/* ============================================================
   RAW FITNESS ARUBA — CONCRETE
   ------------------------------------------------------------
   Brutalist system: graphite slabs, bone type, hard 90° rules,
   monospace data. No diagonals, no italics, no rounded corners,
   no decorative watermarks. Structure is the ornament.

   Class names are shared with the templates; the visual language
   here is entirely independent of them, so the design can be
   replaced again without touching a single template.
   ============================================================ */

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

:root {
	/* concrete scale — cooler and flatter than a warm black */
	--ink: #0b0b0c;
	--ink2: #0f0f11;
	--slab: #131316;
	--slab-2: #1a1a1e;
	--concrete: #26262c;

	--bone: #ece9e3;         /* warm off-white — never pure white */
	--bone-dim: #b6b3ad;
	--mut: #7d7d86;

	--red: #e2141e;
	--red-hot: #ff2a35;
	--red-deep: #9c0d14;
	--wa: #1fbd59;

	--line: rgba(236, 233, 227, 0.11);
	--line-soft: rgba(236, 233, 227, 0.06);

	/* aliases kept so the WordPress layer keeps resolving */
	--panel: var(--slab);
	--white: var(--bone);

	--disp: "Anton", "Inter", system-ui, sans-serif;
	--body: "Inter", system-ui, sans-serif;
	--cond: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	--gut: clamp(16px, 4vw, 64px);
	--maxw: 1360px;
}

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

[id] {
	scroll-margin-top: 96px;
}

body {
	background: var(--ink);
	color: var(--bone);
	font-family: var(--body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--red);
	color: #fff;
}

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

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

/* Monospace data label — the connective tissue of the whole system. */
.mono {
	font-family: var(--cond);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* Display type: flat, heavy, tight. Never italic, never expanded. */
.giant,
.blaze-title,
.row-name,
.band-word {
	font-family: var(--disp);
	font-weight: 900;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 0.88;
}

/* Anton (the display face above) ships one static weight. Without this, a
   browser fakes the requested 900/800 by synthetically embolding an
   already-heavy display face, which blurs and distorts it — every element
   that sets font-family:var(--disp) opts out here instead. */
.giant,
.blaze-title,
.row-name,
.band-word,
.tagline,
.drawer a:not(.btn),
.eco-card b,
.stat b,
.tier-tag,
.price b,
.spec h3 {
	font-synthesis: none;
}

.giant {
	font-size: clamp(38px, 7.4vw, 108px);
	color: var(--bone);
}

.giant em {
	font-style: normal;
	color: var(--red);
}

.giant br + em,
.giant em {
	display: inline;
}

/* Letter-by-letter reveal — motion.js wraps every character of a .giant
   headline in one of these on load (GSAP path only). Same clip + rise
   mechanic as the hero's .tw/.tw-in, just applied per letter here too. */
/* Keeps a whole word together as one unbreakable unit — without this a
   line can wrap between any two letters (each is its own inline-block
   box), not just at a real space, splitting a word mid-letter. */
.char-word {
	display: inline-block;
	white-space: nowrap;
}

.char-wrap {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}

.char {
	display: inline-block;
}

/* The old build wiped headings in from the side. Here they simply arrive. */
.wipe {
	clip-path: none;
}

.lede {
	max-width: 62ch;
	margin-top: 22px;
	font-size: clamp(15px, 1.5vw, 18px);
	color: var(--bone-dim);
}

/* scroll progress */
.prog {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	z-index: 70;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: left;
	pointer-events: none;
}

/* ------------------------------------------------------------
   Buttons — hard-edged, corners notched not rounded. A hexagonal
   chamfer on two opposite corners (not a full parallelogram skew)
   so it reads as boxy-but-angular, its own shape rather than a
   rounded pill or a slanted block.
   ------------------------------------------------------------ */

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--cond);
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 17px 34px;
	min-width: 190px;
	border: 2px solid var(--bone);
	background: none;
	color: var(--bone);
	cursor: pointer;
	border-radius: 0;
	clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
	transition: background 0.18s linear, color 0.18s linear, border-color 0.18s linear;
}

.btn.big {
	padding: 20px 36px;
	clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

.btn svg {
	flex: none;
}

.btn-join {
	background: var(--red);
	border-color: var(--red);
	color: #fff;
}

.btn-join:hover,
.btn-join:focus-visible {
	background: var(--bone);
	border-color: var(--bone);
	color: var(--ink);
}

.btn-ghost {
	border-color: var(--concrete);
	color: var(--bone);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
	background: var(--bone);
	border-color: var(--bone);
	color: var(--ink);
}

.btn-dark {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bone);
}

.btn-dark:hover {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}

.btn-wa {
	background: var(--wa);
	border-color: var(--wa);
	color: #04220f;
}

.btn-wa:hover {
	background: transparent;
	color: var(--wa);
}

.btn-outline-dark {
	border-color: var(--ink);
	color: var(--ink);
}

/* inline text link with a rule that extends on hover */
.vlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--cond);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--red);
	padding-bottom: 4px;
	border-bottom: 2px solid var(--concrete);
	transition: color 0.2s, border-color 0.2s;
}

.vlink:hover {
	color: var(--bone);
	border-color: var(--red);
}

/* ------------------------------------------------------------
   Header — a hard bar, flush to the top, no blur pill.
   ------------------------------------------------------------ */

#nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 14px var(--gut);
	border-bottom: 1px solid transparent;
	transition: background 0.25s linear, border-color 0.25s linear, padding 0.25s linear;
}

/* A permanent dark wash behind the bar, independent of scroll state. Without
   this, nav links have nothing but whatever photo happens to be under them —
   over a bright hero image light text on light photo is unreadable. This
   sits behind the nav's own content and fades up further once .solid takes
   over on scroll. */
#nav::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(11, 11, 12, 0.75) 0%, rgba(11, 11, 12, 0.35) 70%, transparent 100%);
	pointer-events: none;
	transition: opacity 0.25s linear;
}

#nav.solid {
	background: var(--ink);
	border-bottom-color: var(--concrete);
	padding-top: 10px;
	padding-bottom: 10px;
}

#nav.solid::before {
	opacity: 0;
}

.brand {
	display: block;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s linear;
}

#nav.branded .brand {
	opacity: 1;
	pointer-events: auto;
}

.brand img {
	height: 60px;
	width: auto;
}

#nav.solid .brand img {
	height: 50px;
}

.nav-links {
	display: flex;
	gap: 26px;
	margin-left: auto;
}

.nav-links a {
	font-family: var(--cond);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bone);
	padding: 6px 0;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	transition: color 0.18s linear, opacity 0.18s linear;
	opacity: 0.82;
}

.nav-links a:hover,
.nav-links a.active {
	opacity: 1;
}

/* the active section is marked with a red block, not an underline sweep */
.nav-links a.active {
	position: relative;
}

.nav-links a.active::before {
	content: "";
	position: absolute;
	left: -11px;
	top: 50%;
	width: 5px;
	height: 5px;
	background: var(--red);
	transform: translateY(-50%);
}

.nav-right {
	display: flex;
	align-items: center;
	gap: 16px;
	/* .nav-links normally does this pushing-right job via its own auto
	   margin, but it's display:none below the burger breakpoint — without
	   this too, the burger would sit right next to the logo instead of the
	   far edge once nav-links drops out of the flex row. */
	margin-left: auto;
}

.burger {
	display: none;
	flex-direction: column;
	gap: 5px;
	width: 44px;
	height: 40px;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	cursor: pointer;
}

.burger span {
	width: 22px;
	height: 2px;
	background: var(--bone);
	transition: transform 0.25s, opacity 0.25s;
}

.burger.x span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.burger.x span:nth-child(2) {
	opacity: 0;
}

.burger.x span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Full-bleed, but slides in from the left rather than dropping down, and
   starts its links right under the header instead of centering the block
   and leaving a gap above it. */
.drawer {
	position: fixed;
	inset: 0;
	z-index: 55;
	width: 100%;
	background: var(--ink);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 0;
	padding: 90px var(--gut) 40px;
	transform: translateX(-101%);
	transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);
	overflow-y: auto;
}

.drawer.open {
	transform: none;
}

.drawer a:not(.btn) {
	font-family: var(--disp);
	font-weight: 900;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	font-size: clamp(30px, 9vw, 62px);
	line-height: 1;
	color: var(--bone);
	padding: 16px 0;
	border-bottom: 1px solid var(--concrete);
	transition: color 0.18s, padding-left 0.25s;
}

.drawer a:not(.btn):hover {
	color: var(--red);
	padding-left: 14px;
}

.drawer .btn {
	margin-top: 22px;
	align-self: flex-start;
}

/* ------------------------------------------------------------
   Hero — split slab. Type left, a black-to-red duotone photograph
   right, data along the bottom. The photo reads as atmosphere, not
   as competing content, so the headline can run large.
   ------------------------------------------------------------ */

.hero {
	position: relative;
	min-height: 100svh;
	overflow: hidden;
	display: flex;
	align-items: stretch;
	padding: 0;
	background: var(--ink);
	text-align: left;
	border-bottom: 1px solid var(--concrete);
}

.hero-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
	filter: grayscale(1) contrast(1.1) brightness(0.78);
	animation: none;
}

/* Three colors, kept simple: the photo is black — plain grayscale, no
   color mixed in — and red only ever shows up in text and UI (kicker,
   one headline word, buttons, the countdown bar), never smeared across
   the image itself. This gradient only adds depth at the top (behind the
   nav) and bottom (behind the CTA row); the middle, where the headline
   sits, is left alone since the photo is already dark on its own. */
.hero-duo {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, var(--ink) 0%, transparent 35%, transparent 65%, var(--ink) 100%);
	mix-blend-mode: color;
}

/* a flat wash, not a radial vignette */
.hero-scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(11, 11, 12, 0.55) 0%, rgba(11, 11, 12, 0.4) 45%, rgba(11, 11, 12, 0.9) 100%);
	z-index: 2;
}

.grain {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.05;
	mix-blend-mode: overlay;
	z-index: 3;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-in {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	width: 100%;
	/* Not height:100% — .hero only sets min-height, not height, so a
	   percentage height here can't resolve and silently collapses to
	   content size, leaving a dead gap above .hero-blaze. align-items:
	   stretch on .hero (a row-direction flex container) already stretches
	   an auto-height child to fill it correctly. */
	padding: 110px var(--gut) 90px;
}

.hero-top {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* The lion wordmark now reads as a small badge, not the page's headline —
   the type carries that job. */
.hero-logo {
	width: clamp(110px, 10vw, 150px);
	height: auto;
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-logo.in {
	opacity: 1;
	transform: none;
}

.tagline {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: auto 0 0;
	font-family: var(--disp);
	font-weight: 900;
	/* Notably bigger than a standard hero headline — this is the page's
	   loudest element, not a caption competing with the photo. */
	font-size: clamp(46px, 9vw, 132px);
	line-height: 0.96;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--bone);
	/* A tight shadow for edge definition against the photo, plus a much
	   softer, wider one underneath for depth — lifts the type off the
	   background without reading as a heavy drop-shadow effect. */
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 14px 40px rgba(0, 0, 0, 0.45);
}

/* Each line is a run of individually-clipped letters (.tw), grouped under
   one .tw-line so the per-line color still applies to the whole line at
   once. */
.tw-line {
	display: block;
}

/* Keeps a whole word together as one unbreakable unit — every letter is
   its own inline-block box, so without this a line could wrap between
   any two letters, not just at a real space. */
.tw-word {
	display: inline-block;
	white-space: nowrap;
}

.tw {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}

/* Hidden a line-height below its own row, clipped by .tw's overflow:hidden.
   JS gives each letter its own staggered delay and animates it up into
   view on load; theme.css restores every letter to plain sight instantly
   if JS is missing or the visitor has asked for less motion, using the
   same rf-js/rf-reduced guard the rest of the site's reveals use — see
   theme.css section 1. */
.tw-in {
	display: inline-block;
	transform: translateY(112%);
	transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.tw.in .tw-in {
	transform: none;
}

.tw-line:nth-child(2) {
	color: var(--red);
}

.tw-line:last-child {
	color: var(--bone);
}

.hero-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin-top: 34px;
}

.hero-cta {
	display: flex;
	gap: 0;
	flex-wrap: wrap;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-cta.in {
	opacity: 1;
	transform: none;
}

.hero-cta .btn + .btn {
	margin-left: 12px;
}

.trust {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--cond);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bone-dim);
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.trust.in {
	opacity: 1;
	transform: none;
}

.trust b {
	color: var(--bone);
	font-weight: 700;
}

.stars {
	color: var(--red);
	letter-spacing: 2px;
	font-size: 12px;
}

/* ---------- the spinning "scroll" badge — a bit of always-on motion ---------- */

.hero-spin {
	position: absolute;
	right: 0;
	bottom: 118px;
	z-index: 11;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(84px, 8vw, 108px);
	height: clamp(84px, 8vw, 108px);
	color: var(--bone);
}

.hero-spin-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	animation: hero-spin 16s linear infinite;
}

.hero-spin-ring text,
.hero-spin-ring textPath {
	font-family: var(--cond);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	fill: var(--bone-dim);
	text-transform: uppercase;
}

.hero-spin-core {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--red);
	color: #fff;
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-spin:hover .hero-spin-core {
	transform: translateY(4px);
}

@keyframes hero-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Blaze notice becomes a hard data bar pinned across the hero foot. */
.hero-blaze {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 12;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 15px var(--gut);
	background: var(--red);
	color: #fff;
	border: 0;
	opacity: 0;
	transform: translateY(100%);
	transition: background 0.2s linear, opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-blaze.in {
	opacity: 1;
	transform: none;
}

.hero-blaze:hover {
	background: var(--bone);
	color: var(--ink);
}

.hb-flame {
	width: 7px;
	height: 7px;
	background: currentColor;
	flex: none;
}

.hb-text {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: inherit;
}

.hb-text i {
	font-style: normal;
	opacity: 0.75;
}

.hb-go {
	margin-left: auto;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: inherit;
}

/* ------------------------------------------------------------
   Page shell and sections.
   ------------------------------------------------------------ */

.page {
	position: relative;
	z-index: 2;
	background: var(--ink);
	margin-top: 0;
	clip-path: none;
	counter-reset: sec;
}

.page::before {
	display: none;
}

.sec {
	position: relative;
	padding: clamp(64px, 8vw, 132px) var(--gut);
	border-top: 1px solid var(--concrete);
	overflow: hidden;
}

.wrap {
	max-width: var(--maxw);
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

/* Oversized outline-only word sitting behind a section's real content —
   stroke, not fill, so it reads as texture rather than a second headline.
   Position and size per-section below; JS (motion.js) drifts it slightly
   on scroll the same way the hero photo does. */
.sec-watermark {
	position: absolute;
	z-index: 0;
	bottom: -6%;
	right: clamp(-40px, -2vw, 0px);
	font-family: var(--disp);
	font-weight: 900;
	font-synthesis: none;
	font-size: clamp(140px, 20vw, 380px);
	line-height: 0.78;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(236, 233, 227, 0.16);
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

/* On a .sec-light section the stroke needs a dark tone instead — the
   fixed light rgba above would vanish against the paper background. */
.sec-light .sec-watermark {
	-webkit-text-stroke-color: rgba(23, 23, 26, 0.14);
}

/* ------------------------------------------------------------
   Light sections — an off-white "paper" band breaks the page up
   every few sections instead of running black start to finish.
   Every component already reads its color from these custom
   properties, so re-pointing ink/bone/slab/line locally re-themes
   everything inside for free — no component-level overrides needed.
   ------------------------------------------------------------ */
.sec-light {
	--ink: #f3f0e9;
	--ink2: #ece8e0;
	--slab: #e8e3d9;
	--slab-2: #e0dacd;
	--concrete: #d6cfc0;
	--bone: #17171a;
	--bone-dim: #4c4c54;
	--mut: #706f78;
	--line: rgba(23, 23, 26, 0.12);
	--line-soft: rgba(23, 23, 26, 0.06);
	background: var(--ink);
	color: var(--bone);
}

/* ------------------------------------------------------------
   Photo sections — a full-bleed duotone photograph standing in for
   a flat background, for content sections rather than the thin
   decorative .band strips. Same construction as .hero-duo: a
   grayscale photo with a black-to-red gradient blended in via
   mix-blend-mode:color, so it reads as branded, not just a dark
   stock photo. A scrim skewed toward one edge keeps the text
   readable while pointing the eye toward the CTA.
   ------------------------------------------------------------ */
.sec-photo {
	position: relative;
	overflow: hidden;
}

/* top/bottom run 6% past the section's own edges (clipped by .sec-photo's
   overflow:hidden) so the scroll parallax in motion.js has headroom to
   shift within without ever exposing a gap. */
.sec-photo-bg {
	position: absolute;
	top: -6%;
	left: 0;
	right: 0;
	bottom: -6%;
	z-index: 0;
	background-size: cover;
	background-position: center 42%;
	filter: grayscale(1) contrast(1.1) brightness(0.5);
}

.sec-photo-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(200deg, var(--ink) 0%, var(--red-deep) 55%, var(--red) 100%);
	mix-blend-mode: color;
}

.sec-photo-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(100deg, rgba(11, 11, 12, 0.9) 0%, rgba(11, 11, 12, 0.55) 45%, rgba(11, 11, 12, 0.32) 100%);
}

.sec-photo > .wrap {
	position: relative;
	z-index: 2;
}

/* Auto-numbered sections, set flush to the top-right corner. */
.sec > .wrap::after {
	counter-increment: sec;
	content: counter(sec, decimal-leading-zero);
	position: absolute;
	top: -14px;
	right: 0;
	font-family: var(--cond);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.2em;
	color: var(--mut);
}

/* The kicker gets a red rule instead of a lion glyph. */
.kicker {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
	font-family: var(--cond);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--red);
}

.kicker::before {
	content: "";
	width: 34px;
	height: 2px;
	background: var(--red);
	flex: none;
}

/* Decoration from the previous design, retired. */
.wm,
.wm-lion,
.wm-low,
.speed,
.halftone,
.blaze-slash,
.sec-bg,
.band-tint,
.house-scrim {
	display: none !important;
}

/* Section seam: a hard bar, not a diagonal laser. */
.lasers {
	position: relative;
	z-index: 3;
	height: 0;
	margin: 0;
	pointer-events: none;
}

.seam {
	height: 8px;
	background: var(--red);
}

/* ------------------------------------------------------------
   The Standard — one still photo beside a short list of lines,
   each revealing on its own instead of the whole block fading in
   at once. A deliberately quieter rhythm between the eco-rail and
   the photo-band teasers on either side of it.
   ------------------------------------------------------------ */

.pillars-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(36px, 6vw, 80px);
	align-items: center;
	margin-top: 44px;
}

.pillars-photo {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%);
}

.pillars-photo img {
	position: absolute;
	top: -8%;
	left: 0;
	width: 100%;
	height: 116%;
	object-fit: cover;
	filter: grayscale(0.5) contrast(1.05);
}

.pillars-list {
	display: flex;
	flex-direction: column;
}

.pillar-line {
	display: flex;
	gap: 22px;
	padding: 26px 0;
	border-top: 1px solid var(--line);
}

.pillar-line:last-child {
	border-bottom: 1px solid var(--line);
}

.pillar-num {
	flex: none;
	padding-top: 5px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--red);
}

.pillar-body h3 {
	font-family: var(--disp);
	font-weight: 800;
	font-size: clamp(18px, 1.9vw, 23px);
	text-transform: uppercase;
	margin-bottom: 6px;
}

.pillar-body p {
	color: var(--bone-dim);
	font-size: 14.5px;
	max-width: 48ch;
}

@media (max-width: 1000px) {
	.pillars-grid {
		grid-template-columns: 1fr;
	}

	.pillars-photo {
		aspect-ratio: 16 / 10;
	}
}

/* ------------------------------------------------------------
   Marquee strips — thin mono rules.
   ------------------------------------------------------------ */

.disc {
	overflow: hidden;
	padding: 13px 0;
	border-top: 1px solid var(--concrete);
	background: var(--ink);
	transform: none;
}

.disc-ghost {
	background: var(--slab);
}

.disc-track {
	display: flex;
	align-items: center;
	gap: 26px;
	width: max-content;
	animation: march 34s linear infinite;
	will-change: transform;
}

.disc-track.rev {
	animation-direction: reverse;
}

.disc-track span {
	font-family: var(--cond);
	font-weight: 500;
	font-style: normal;
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--bone-dim);
	white-space: nowrap;
}

.disc-ghost .disc-track span {
	color: var(--mut);
}

.disc-track em {
	font-style: normal;
	color: var(--red);
	font-size: 8px;
}

.disc:hover .disc-track {
	animation-play-state: paused;
}

@keyframes march {
	to {
		transform: translateX(-50%);
	}
}

/* ------------------------------------------------------------
   Statement — sub-brand rail and the stat band.
   ------------------------------------------------------------ */

.statement {
	background: var(--ink);
}

.railbox {
	margin-top: 44px;
}

.eco-rail {
	display: flex;
	gap: 1px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	background: var(--concrete);
	border: 1px solid var(--concrete);
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
}

.eco-rail::-webkit-scrollbar {
	display: none;
}

.eco-rail:active {
	cursor: grabbing;
}

.eco-card {
	position: relative;
	flex: 0 0 clamp(210px, 22vw, 280px);
	height: clamp(240px, 26vw, 320px);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 4px;
	padding: 20px;
	background: var(--slab);
	overflow: hidden;
	border-radius: 0;
	clip-path: none;
	transition: background 0.25s linear;
}

.eco-card img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.1) brightness(0.42);
	transition: filter 0.5s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	-webkit-user-drag: none;
	pointer-events: none;
}

.eco-card:hover img {
	filter: grayscale(1) contrast(1.1) brightness(0.56);
	transform: scale(1.08) translate(-1%, -1%);
}

/* On hover the card tints red rather than "un-graying" to reveal true
   color — the same black-to-red duotone blend used on the hero and photo
   bands, so the movement stays on-brand instead of a plain photo reveal. */
.eco-card-duo {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(200deg, var(--ink) 0%, var(--red-deep) 60%, var(--red) 100%);
	mix-blend-mode: color;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.eco-card:hover .eco-card-duo {
	opacity: 0.85;
}

.eco-card b,
.eco-card span {
	position: relative;
	z-index: 1;
}

.eco-card b,
.eco-card .mono {
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.eco-card:hover b,
.eco-card:hover .mono {
	transform: translateY(-4px);
}

.eco-card b {
	font-family: var(--disp);
	font-weight: 800;
	font-size: clamp(17px, 1.7vw, 22px);
	letter-spacing: -0.02em;
	text-transform: uppercase;
	line-height: 1.05;
}

.eco-card .mono {
	font-size: 10px;
	color: var(--bone-dim);
}

.ec-arrow {
	position: absolute;
	top: 16px;
	right: 18px;
	z-index: 1;
	font-size: 15px;
	color: var(--red);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.eco-card:hover .ec-arrow {
	transform: translate(4px, -4px) scale(1.15);
}

.rail-line {
	position: relative;
	display: block;
	height: 2px;
	margin-top: 14px;
	background: var(--concrete);
}

.rail-line::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--w, 30%);
	transform: translateX(var(--x, 0));
	background: var(--red);
}

/* stat band — hairline-separated data cells */
.stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	margin-top: 56px;
	background: var(--concrete);
	border: 1px solid var(--concrete);
}

.stat {
	background: var(--ink);
	padding: 28px 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.stat b {
	font-family: var(--disp);
	font-weight: 900;
	font-style: normal;
	font-size: clamp(32px, 4.4vw, 62px);
	letter-spacing: -0.02em;
	line-height: 0.9;
	color: var(--bone);
}

.stat b i {
	font-style: normal;
	font-size: 0.45em;
	color: var(--red);
	margin-left: 2px;
}

.stat .mono {
	font-size: 10px;
	color: var(--mut);
	max-width: 22ch;
}

/* ------------------------------------------------------------
   Photo bands — flat, square, left-aligned type.
   ------------------------------------------------------------ */

.band {
	position: relative;
	height: clamp(240px, 34vw, 440px);
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	border-top: 1px solid var(--concrete);
}

.band-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 45%;
	filter: grayscale(1) contrast(1.1) brightness(0.6);
	transform: none;
	animation: none;
}

/* Same duotone construction as the hero — see .hero-duo for the mechanics. */
.band-img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, var(--ink) 0%, var(--red-deep) 60%, var(--red) 100%);
	mix-blend-mode: color;
}

.band-word {
	position: relative;
	z-index: 2;
	padding: 0 var(--gut) clamp(24px, 3vw, 44px);
	font-size: clamp(30px, 6.4vw, 96px);
	color: var(--bone);
	animation: none;
	transform: none;
	white-space: normal;
	max-width: 22ch;
}

/* ------------------------------------------------------------
   Memberships — a price table, not a row of floating cards.
   ------------------------------------------------------------ */

.tiers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin-top: 48px;
	background: var(--concrete);
	border: 1px solid var(--concrete);
}

.tier {
	position: relative;
	background: var(--ink);
	padding: 34px 28px 30px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	border-radius: 0;
	clip-path: none;
	transform: none !important;
	transition: background 0.2s linear;
}

.tier:hover {
	background: var(--slab);
}

.tier-hot {
	background: var(--slab);
	box-shadow: inset 4px 0 0 var(--red);
	animation: none;
}

.flag {
	align-self: flex-start;
	background: var(--red);
	color: #fff;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	padding: 6px 10px;
	margin-bottom: 2px;
}

.tier h3 {
	font-family: var(--cond);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bone-dim);
}

.tier-tag {
	font-family: var(--disp);
	font-weight: 800;
	font-style: normal;
	font-size: clamp(19px, 2vw, 26px);
	letter-spacing: -0.02em;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--bone);
}

.price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding-top: 12px;
	border-top: 1px solid var(--concrete);
}

.price b {
	font-family: var(--disp);
	font-weight: 900;
	font-size: clamp(28px, 3.4vw, 46px);
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--bone);
}

.price.sub b {
	font-size: clamp(20px, 2.2vw, 28px);
	color: var(--bone-dim);
}

.price .mono {
	font-size: 10px;
	color: var(--mut);
}

.tier ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-top: 4px;
}

.tier li {
	position: relative;
	padding-left: 18px;
	font-size: 14px;
	color: var(--bone-dim);
	line-height: 1.45;
}

.tier li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 7px;
	height: 1px;
	background: var(--red);
}

.tier .btn {
	margin-top: auto;
	width: 100%;
}

/* specialty plans */
.specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	margin-top: 1px;
	background: var(--concrete);
	border: 1px solid var(--concrete);
	border-top: 0;
}

.spec {
	background: var(--ink);
	padding: 30px 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.spec h3 {
	font-family: var(--disp);
	font-weight: 800;
	font-size: clamp(19px, 2vw, 26px);
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--bone);
}

.spec-price {
	font-size: 11px;
	color: var(--red);
}

.spec p {
	font-size: 14.5px;
	color: var(--bone-dim);
	max-width: 46ch;
}

.mem-note {
	margin-top: 26px;
	font-size: 10.5px;
	color: var(--mut);
	line-height: 1.7;
}

/* ------------------------------------------------------------
   Disciplines — an index, numbered and ruled.
   ------------------------------------------------------------ */

.rows {
	margin-top: 44px;
	border-top: 1px solid var(--concrete);
}

.rows::after {
	display: none;
}

.row {
	position: relative;
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1.1fr) 48px;
	align-items: center;
	gap: 22px;
	padding: clamp(20px, 2.4vw, 34px) 0;
	border-bottom: 1px solid var(--concrete);
	overflow: hidden;
	transition: padding-left 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.row:hover {
	padding-left: 20px;
}

.row-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.35s linear;
}

.row:hover .row-bg {
	opacity: 1;
}

.row-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) brightness(0.3);
}

.row-num {
	font-family: var(--cond);
	font-weight: 500;
	font-style: normal;
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--red);
}

.row-name {
	font-size: clamp(24px, 3.6vw, 52px);
	color: var(--bone);
}

.row-desc {
	font-size: 14.5px;
	color: var(--bone-dim);
	max-width: 46ch;
}

.row-go {
	font-size: 18px;
	color: var(--mut);
	text-align: right;
	transition: color 0.2s, transform 0.25s;
}

.row:hover .row-go {
	color: var(--red);
	transform: translateX(5px);
}

/* coaches strip — flex rather than a fixed grid so it holds up whether the
   client has published two coaches or a dozen. */
.coaches {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	margin-top: 56px;
	background: var(--concrete);
	border: 1px solid var(--concrete);
}

.coach {
	position: relative;
	display: block;
	flex: 1 1 200px;
	min-height: 230px;
	overflow: hidden;
}

.coach img {
	width: 100%;
	height: 100%;
	min-height: 230px;
	object-fit: cover;
	filter: grayscale(1) contrast(1.1);
	transition: filter 0.4s, transform 0.4s;
}

.coach:hover img {
	filter: grayscale(0);
	transform: scale(1.04);
}

.coach-meta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: linear-gradient(180deg, transparent, rgba(5, 5, 7, 0.85));
}

.coach-meta b {
	font-family: var(--disp);
	font-weight: 800;
	font-size: 15px;
	text-transform: uppercase;
	color: var(--bone);
}

.coach-meta i {
	font-style: normal;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bone-dim);
}

.coaches-copy {
	flex: 2 1 320px;
	background: var(--ink);
	padding: 32px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	align-items: flex-start;
	border: 0;
	clip-path: none;
}

.coaches-copy h3 {
	font-family: var(--disp);
	font-weight: 900;
	font-size: clamp(20px, 2.4vw, 32px);
	letter-spacing: -0.02em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--bone);
}

.coaches-copy p {
	font-size: 14.5px;
	color: var(--bone-dim);
	max-width: 44ch;
}

/* ------------------------------------------------------------
   The Raw Family.
   ------------------------------------------------------------ */

.house {
	position: relative;
	border-top: 1px solid var(--concrete);
}

.house-hero {
	position: relative;
	padding: clamp(64px, 8vw, 120px) var(--gut) 0;
	overflow: hidden;
}

.house-img {
	position: absolute;
	inset: 0;
	background-position: center 35%;
	background-size: cover;
	background-repeat: no-repeat;
	filter: grayscale(1) brightness(0.28);
}

.house-head {
	position: relative;
	z-index: 1;
	max-width: var(--maxw);
	margin: 0 auto;
}

.house-body {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 40px var(--gut) clamp(64px, 8vw, 120px);
	position: relative;
	z-index: 1;
}

.houses {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--concrete);
	border: 1px solid var(--concrete);
}

.houseb {
	position: relative;
	background: var(--ink);
	padding: 30px 26px 26px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	border-radius: 0;
	clip-path: none;
	transition: background 0.3s linear, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.houseb::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.houseb:hover {
	background: var(--slab);
	transform: translateY(-6px);
	box-shadow: 0 24px 36px -20px rgba(0, 0, 0, 0.55);
}

.houseb:hover::before {
	transform: scaleX(1);
}

.houseb-logo {
	height: 42px;
	width: auto;
	max-width: 130px;
	object-fit: contain;
	object-position: left center;
	filter: grayscale(1) brightness(1.6);
	transition: filter 0.25s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	-webkit-user-drag: none;
	pointer-events: none;
}

.houseb:hover .houseb-logo {
	filter: none;
	transform: translateY(-2px);
}

.houseb-lion {
	height: 40px;
}

.houseb h3 {
	font-family: var(--disp);
	font-weight: 800;
	font-size: clamp(17px, 1.8vw, 22px);
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--bone);
	margin-top: 4px;
}

.houseb p {
	font-size: 13.5px;
	color: var(--bone-dim);
	line-height: 1.5;
}

.houseb .mono {
	margin-top: auto;
	padding-top: 12px;
	font-size: 10px;
	color: var(--red);
}

/* The homepage teaser trades the full page's static grid for a slow,
   self-scrolling strip of the same cards, on real scroll position rather
   than a transform — see family-rail.js — so the same drag/swipe/wheel
   interaction every other scroll container already supports just works
   here too, pausing the auto-scroll while it's in use. */
.family-hint {
	margin-top: 20px;
	margin-bottom: -8px;
	text-align: right;
	font-size: 10px;
	letter-spacing: 0.14em;
	color: var(--mut);
}

.family-rail {
	margin-top: 48px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
}

.family-rail::-webkit-scrollbar {
	display: none;
}

.family-rail:active {
	cursor: grabbing;
}

.family-track {
	display: flex;
	gap: 1px;
	width: max-content;
	background: var(--concrete);
}

.family-track .houseb {
	flex: 0 0 clamp(230px, 24vw, 300px);
}

/* ------------------------------------------------------------
   Gallery.
   ------------------------------------------------------------ */

.gallery {
	position: relative;
	padding: clamp(64px, 8vw, 120px) 0;
	border-top: 1px solid var(--concrete);
	overflow: hidden;
}

.gallery .wrap {
	padding: 0 var(--gut);
}

/* Tilted, not straight — the two rows sit at a permanent slight angle
   rather than running dead horizontal, and settle into that angle from a
   steeper one on entrance instead of just fading up in place. */
.g-rows {
	margin-top: 56px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transform: rotate(-2.5deg);
	transform-origin: center;
}

.g-rows.reveal {
	transform: translateY(40px) rotate(-6deg);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.g-rows.reveal.in {
	transform: rotate(-2.5deg);
}

.g-row {
	display: flex;
	gap: 8px;
	width: max-content;
	animation: gslide 52s linear infinite;
	will-change: transform;
}

.g-row.g-b {
	animation-direction: reverse;
}

.g-item {
	position: relative;
	display: block;
	overflow: hidden;
}

.g-row img {
	height: clamp(150px, 21vw, 240px);
	width: auto;
	object-fit: cover;
	flex: none;
	border-radius: 0;
	clip-path: none;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.g-item:hover img {
	transform: scale(1.08);
}

@keyframes gslide {
	to {
		transform: translateX(-50%);
	}
}

/* ------------------------------------------------------------
   Raw Kitchen.
   ------------------------------------------------------------ */

.kitchen {
	background: var(--ink);
}

.kitchen .kicker,
.kitchen .kicker::before {
	color: var(--wa);
	background-color: var(--wa);
}

.kitchen .kicker {
	background: none;
}

/* Kitchen keeps the emphasis word in food-brand green instead of the gym's
   red everywhere it appears — the homepage teaser (scoped by .kitchen) and
   the standalone menu page (scoped by the .kitchen-page body class set in
   header.php). */
.kitchen .giant em,
.kitchen-page .giant em {
	color: var(--wa);
}

.kitchen-page .kicker,
.kitchen-page .kicker::before {
	color: var(--wa);
	background-color: var(--wa);
}

.kitchen-page .kicker {
	background: none;
}

/* Menu prices and fact-card labels too — .mlist and .fact-grid are shared
   with other pages (Blaze prizes, Physio/Alpha Box fact cards), which stay
   red, so these only touch the Kitchen page. */
.kitchen-page .mlist span {
	color: var(--wa);
}

.kitchen-page .fact > .mono {
	color: var(--wa);
}

.k-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 30px;
}

.k-logo {
	width: clamp(90px, 10vw, 130px);
	height: auto;
	flex: none;
}

.kitchen-copy {
	margin-top: 24px;
}

.kitchen-copy p {
	color: var(--bone-dim);
	font-size: clamp(15px, 1.5vw, 17px);
	max-width: 62ch;
}

.k-food {
	display: grid;
	gap: 1px;
	margin-top: 40px;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 180px;
	grid-template-areas:
		"waffle smoothie tacos salmon"
		"waffle bowl burrito salmon"
		"parfait parfait coffee coffee";
	background: var(--concrete);
	border: 1px solid var(--concrete);
}

.kf {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 0;
	clip-path: none;
}

.kf-waffle { grid-area: waffle; }
.kf-smoothie { grid-area: smoothie; }
.kf-tacos { grid-area: tacos; }
.kf-salmon { grid-area: salmon; }
.kf-bowl { grid-area: bowl; }
.kf-burrito { grid-area: burrito; }
.kf-parfait { grid-area: parfait; }
.kf-coffee { grid-area: coffee; }

.kf img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.kf:hover img {
	transform: scale(1.04);
}

.kf figcaption {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 24px 14px 12px;
	font-family: var(--cond);
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(180deg, transparent, rgba(5, 5, 7, 0.85));
}

.kitchen-foot {
	margin-top: 36px;
}

.k-menu {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1px;
	background: var(--concrete);
	border: 1px solid var(--concrete);
}

.k-chip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--ink);
	padding: 16px 18px;
	font-size: 10.5px;
	color: var(--bone-dim);
	border: 0;
	clip-path: none;
}

.k-chip b {
	color: var(--wa);
	font-weight: 700;
}

.k-hours {
	margin-top: 20px;
	font-size: 10px;
	color: var(--mut);
}

.physio-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-top: 26px;
}

.physio-cta .btn + .btn {
	margin-left: 12px;
}

/* ------------------------------------------------------------
   Eleva Physio.
   ------------------------------------------------------------ */

.physio {
	background: var(--ink);
}

.ph-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin-top: 44px;
}

.ph-photo {
	position: relative;
	display: block;
	overflow: hidden;
	min-height: 340px;
	background: var(--slab);
}

.ph-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05) brightness(0.75);
	transition: filter 0.4s;
}

.ph-photo:hover img {
	filter: none;
}

.ph-tag {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	padding: 10px 14px;
	background: var(--ink);
	font-size: 9.5px;
	color: var(--bone-dim);
}

.ph-body {
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-start;
}

.ph-body > p {
	font-size: 15px;
	color: var(--bone-dim);
	max-width: 54ch;
}

.ph-body b {
	color: var(--bone);
}

.ph-pillars {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.ph-pillars span {
	font-family: var(--cond);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bone);
	padding-right: 18px;
	margin-right: 18px;
	border-right: 1px solid var(--concrete);
}

.ph-pillars span:last-child {
	padding-right: 0;
	margin-right: 0;
	border-right: 0;
}

.tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tag-cloud span {
	font-family: var(--cond);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bone-dim);
	border: 1px solid var(--concrete);
	padding: 7px 11px;
	border-radius: 0;
}

.ph-doc {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 14px 0;
	border-top: 1px solid var(--concrete);
	transition: opacity 0.2s linear;
}

.ph-doc:hover {
	opacity: 0.72;
}

.ph-doc img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	flex: none;
	border-radius: 999px;
	filter: grayscale(1);
}

.ph-doc-name {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ph-doc-name b {
	font-family: var(--disp);
	font-weight: 800;
	font-size: 15px;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.ph-doc-name i {
	font-style: normal;
	font-size: 9.5px;
	color: var(--mut);
}

.ph-doc-go {
	margin-left: auto;
	font-size: 10px;
	color: var(--red);
}

/* physio page — the portrait runs large with a vertical spine label, not a
   small rectangle politely sharing the row with the bio. JS (motion.js)
   drifts the photo slightly on scroll (same technique as the hero
   parallax); the frame itself is a plain static crop if motion is off or
   JS never runs, so it never looks unfinished. */
.physio-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 48px;
	margin-top: 40px;
	align-items: center;
}

.physio-copy p {
	font-size: 15px;
	color: var(--bone-dim);
	margin-bottom: 16px;
	max-width: 60ch;
}

.physio-copy b {
	color: var(--bone);
}

.physio-portrait {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(340px, 52vw, 560px);
	padding-left: 34px;
}

.physio-portrait-label {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	display: flex;
	align-items: center;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--cond);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--red);
	white-space: nowrap;
}

/* Overflow is clipped here; the photo itself is sized taller than this
   frame (see .p-portrait) so JS (motion.js) can drift it up and down on
   scroll without ever exposing an edge. */
.physio-portrait-frame {
	position: relative;
	width: 100%;
	max-width: 520px;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.7);
}

.p-portrait {
	position: absolute;
	top: -12%;
	left: 0;
	width: 100%;
	height: 124%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.1) brightness(0.92);
	border-radius: 0;
}

/* Credentials run as a divided mono line under the bio, not a stacked
   bullet list under the photo — the site's "spec strip" idiom (see
   .ph-pillars) instead of a generic resume list. */
.physio-services {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	margin: 4px 0 8px;
}

.physio-services li {
	font-family: var(--cond);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bone-dim);
	padding: 4px 16px 4px 0;
	margin-right: 16px;
	border-right: 1px solid var(--concrete);
}

.physio-services li:last-child {
	padding-right: 0;
	margin-right: 0;
	border-right: 0;
}

/* "What We Treat" — full-width numbered rows instead of the boxed
   fact-card grid other sub-brand pages share, so this page reads as its
   own thing rather than the same template component reused again. */
.treat-rows {
	margin-top: 36px;
	border-top: 1px solid var(--concrete);
}

.treat-row {
	display: grid;
	grid-template-columns: 60px minmax(160px, 220px) 1fr;
	gap: 24px;
	align-items: baseline;
	padding: 24px 0;
	border-bottom: 1px solid var(--concrete);
}

.treat-num {
	font-family: var(--disp);
	font-weight: 900;
	font-synthesis: none;
	font-size: 20px;
	color: var(--red);
}

.treat-label {
	font-family: var(--cond);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bone);
}

.treat-row p {
	font-size: 14.5px;
	color: var(--bone-dim);
	line-height: 1.5;
}

@media (max-width: 700px) {
	.treat-row {
		grid-template-columns: 32px 1fr;
	}

	.treat-row p {
		grid-column: 1 / -1;
	}
}

.physio-shots img {
	width: 100%;
	object-fit: cover;
	filter: grayscale(1);
}

/* ------------------------------------------------------------
   Aruba Blaze — flat red slab.
   ------------------------------------------------------------ */

.blaze {
	position: relative;
	background: var(--red);
	color: #fff;
	padding: clamp(64px, 8vw, 120px) var(--gut) 0;
	border-top: 1px solid var(--red);
	overflow: hidden;
}

.blaze-in {
	position: relative;
	z-index: 2;
	max-width: var(--maxw);
	margin: 0 auto;
	text-align: left;
}

.blaze .kicker {
	color: #fff;
}

.blaze .kicker::before {
	background: #fff;
}

.blaze-title {
	font-size: clamp(52px, 13vw, 190px);
	color: #fff;
	margin: 8px 0 18px;
}

.blaze-sub {
	font-size: clamp(15px, 1.6vw, 19px);
	color: rgba(255, 255, 255, 0.86);
	max-width: 56ch;
}

.count {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 150px));
	gap: 1px;
	margin: 40px 0 30px;
	background: rgba(255, 255, 255, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.35);
	width: max-content;
	max-width: 100%;
}

.cbox {
	background: var(--red);
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cbox b {
	font-family: var(--disp);
	font-weight: 900;
	font-style: normal;
	font-size: clamp(28px, 4vw, 52px);
	letter-spacing: -0.02em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.cbox .mono {
	font-size: 9.5px;
	color: rgba(255, 255, 255, 0.75);
}

.blaze-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-bottom: 26px;
}

.blaze-meta .mono {
	font-size: 10px;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.4);
	padding: 7px 11px;
}

.blaze-meta i {
	display: none;
}

.blaze .hero-cta {
	margin-top: 0;
	opacity: 1;
	animation: none;
}

.urgent {
	margin-top: clamp(40px, 5vw, 64px);
	margin-left: calc(var(--gut) * -1);
	margin-right: calc(var(--gut) * -1);
	background: var(--ink);
	overflow: hidden;
	padding: 12px 0;
	position: relative;
	z-index: 2;
}

/* The negative margins above only cancel out correctly when .urgent sits
   inside a var(--gut)-padded section (the homepage's .blaze block). On the
   standalone Aruba Blaze page it's a direct child of <main>, which has no
   padding to cancel — the same negative margin there just pushes it past
   the true viewport edge on both sides, causing horizontal scroll. */
main > .urgent {
	margin-left: 0;
	margin-right: 0;
}

.urgent-track {
	display: flex;
	align-items: center;
	gap: 24px;
	width: max-content;
	animation: march 30s linear infinite;
}

.urgent-track span {
	font-family: var(--cond);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--red);
	white-space: nowrap;
}

.urgent-track em {
	font-style: normal;
	color: var(--concrete);
	font-size: 8px;
}

/* ------------------------------------------------------------
   Reviews.
   ------------------------------------------------------------ */

.quotes {
	background: var(--slab);
}

.q-car {
	position: relative;
	max-width: 1000px;
	margin: 0;
	min-height: 0;
}

.qs {
	position: relative;
	inset: auto;
	display: flex;
	flex-direction: column;
	text-align: left;
	padding: 0;
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.qs::before {
	content: "";
	display: block;
	width: 52px;
	height: 3px;
	background: var(--red);
	margin-bottom: 26px;
	position: static;
	transform: none;
	font-size: 0;
}

.qs p {
	font-family: var(--disp);
	font-weight: 800;
	font-style: normal;
	font-size: clamp(20px, 2.8vw, 38px);
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--bone);
}

.qs cite {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 26px;
	font-family: var(--cond);
	font-size: 10px;
	font-style: normal;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mut);
}

.q-dots {
	display: flex;
	gap: 6px;
	margin-top: 32px;
}

.q-dots button {
	width: 34px;
	height: 3px;
	background: var(--concrete);
	border: 0;
	cursor: pointer;
	border-radius: 0;
	clip-path: none;
	transition: background 0.25s;
}

.q-dots button.on {
	background: var(--red);
}

/* ------------------------------------------------------------
   Visit — an open-hours stamp beside a divided list, not a grid of
   identical boxed cards.
   ------------------------------------------------------------ */

.visit-panel {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 56px;
	align-items: start;
	margin-top: 44px;
}

.visit-hours {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.visit-hours-big {
	font-family: var(--disp);
	font-weight: 900;
	font-synthesis: none;
	font-size: clamp(26px, 3vw, 40px);
	line-height: 1.12;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--bone);
}

.visit-list {
	display: flex;
	flex-direction: column;
}

.vrow {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 22px 0;
	border-top: 1px solid var(--concrete);
}

.vrow:first-child {
	border-top: 2px solid var(--red);
}

.vrow > .mono {
	font-size: 10px;
	color: var(--red);
}

.vrow p {
	font-size: 14.5px;
	color: var(--bone-dim);
	line-height: 1.5;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 10px;
	border: 1px solid var(--concrete);
	font-size: 9.5px;
	color: var(--bone);
	align-self: flex-start;
}

.badge i {
	width: 6px;
	height: 6px;
	background: var(--wa);
	animation: none;
}

.badge.closed i {
	background: var(--mut);
}

.visit-map {
	margin-top: 56px;
	border-top: 1px solid var(--concrete);
	padding-top: 1px;
	height: clamp(280px, 38vw, 440px);
	filter: grayscale(1) contrast(1.05) invert(0.92) hue-rotate(180deg);
}

@media (max-width: 900px) {
	.visit-panel {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

.visit-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ------------------------------------------------------------
   Footer.
   ------------------------------------------------------------ */

.foot {
	padding: clamp(48px, 6vw, 84px) var(--gut);
	border-top: 8px solid var(--red);
	background: var(--ink);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	text-align: left;
}

.foot-logo {
	width: clamp(140px, 14vw, 200px);
	height: auto;
}

.foot p.mono {
	font-size: 10px;
	color: var(--bone-dim);
}

.foot .fine {
	font-size: 9.5px;
	color: var(--mut);
	margin-top: 6px;
}

.foot .fine a {
	color: var(--bone-dim);
	border-bottom: 1px solid var(--concrete);
}

/* ------------------------------------------------------------
   Sub-brand pages.
   ------------------------------------------------------------ */

.p-hero {
	position: relative;
	min-height: 74svh;
	display: flex;
	align-items: flex-end;
	padding: 150px var(--gut) clamp(40px, 5vw, 72px);
	overflow: hidden;
	border-bottom: 1px solid var(--concrete);
}

.p-hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 45%;
	filter: grayscale(1) contrast(1.1) brightness(0.34);
}

.p-hero .wrap {
	max-width: var(--maxw);
	width: 100%;
}

.p-back {
	display: inline-block;
	margin-bottom: 26px;
	font-size: 10px;
	color: var(--bone-dim);
	border-bottom: 1px solid var(--concrete);
	padding-bottom: 4px;
}

.p-back:hover {
	color: var(--red);
}

/* ------------------------------------------------------------
   Standalone content pages — Memberships, Train, The House, Visit.

   These reuse the same full section a homepage teaser links out to,
   with just a return-to-home bar above it to clear the fixed nav
   and orient the visitor. No new hero photo, no duplicated heading —
   the section itself already carries its own kicker and title.
   ------------------------------------------------------------ */

.page-return {
	padding: 104px var(--gut) 16px;
}

/* A compact highlight box on the Memberships teaser: badge, plan name
   and price in one line, standing in for the full pricing table. */
.teaser-highlight {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 30px;
	padding: 16px 22px;
	background: var(--slab);
	border: 1px solid var(--concrete);
}

.teaser-highlight .flag {
	margin: 0;
}

.teaser-highlight b {
	font-family: var(--body);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--bone);
}

.teaser-highlight__price {
	color: var(--red);
	font-size: 10.5px;
}

/* The discipline pills on the Train teaser, sitting directly under a
   paragraph rather than inside a flex column with its own gap. */
.train-teaser .tag-cloud {
	margin-top: 24px;
}

.p-sub {
	margin-top: 22px;
	font-size: clamp(15px, 1.6vw, 18px);
	color: var(--bone-dim);
	max-width: 58ch;
}

.p-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-top: 32px;
}

.p-cta .btn + .btn {
	margin-left: 12px;
}

.fact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1px;
	margin-top: 36px;
	background: var(--concrete);
	border: 1px solid var(--concrete);
}

.fact {
	background: var(--ink);
	padding: 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.fact > .mono {
	font-size: 10px;
	color: var(--red);
}

.fact p {
	font-size: 14.5px;
	color: var(--bone-dim);
	line-height: 1.5;
}

/* events grid — multiple events, homepage teaser + /events/ archive */
.events-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1px;
	margin-top: 36px;
	background: var(--concrete);
	border: 1px solid var(--concrete);
}

.event-card {
	position: relative;
	background: var(--ink);
	padding: 28px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	text-decoration: none;
	color: inherit;
	transition: background 0.3s linear, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.event-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.event-card:hover {
	background: var(--slab);
	transform: translateY(-6px);
	box-shadow: 0 24px 36px -20px rgba(0, 0, 0, 0.55);
}

.event-card:hover::before {
	transform: scaleX(1);
}

.event-card-kicker {
	font-size: 10px;
	color: var(--red);
}

.event-card-title {
	font-family: var(--disp);
	font-size: clamp(20px, 2.2vw, 26px);
	text-transform: uppercase;
	line-height: 1.1;
}

.event-card-meta {
	font-size: 14px;
	color: var(--bone-dim);
	line-height: 1.5;
}

.event-card-cta {
	margin-top: auto;
	padding-top: 6px;
	font-size: 11px;
	color: var(--bone);
}

/* menus and tables */
.menu-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	margin-top: 40px;
	background: var(--concrete);
	border: 1px solid var(--concrete);
}

.menu-block {
	background: var(--ink);
	padding: 30px 28px;
	/* Grid items don't shrink below their content's natural width by
	   default — without this, the build-your-own table's own min-width
	   (needed so its columns aren't crushed) stretches this whole block
	   past its grid track instead of just scrolling inside it. */
	min-width: 0;
}

.menu-wide {
	grid-column: 1 / -1;
}

.menu-block h3 {
	font-family: var(--disp);
	font-weight: 800;
	font-size: clamp(19px, 2vw, 26px);
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--bone);
	margin-bottom: 18px;
}

.mb-note {
	font-size: 13.5px;
	color: var(--mut);
	margin-bottom: 16px;
	max-width: 60ch;
}

.mlist {
	list-style: none;
}

.mlist li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid var(--concrete);
	font-size: 14.5px;
}

.mlist li:last-child {
	border-bottom: 0;
}

.mlist b {
	font-weight: 500;
	color: var(--bone);
}

.mlist span {
	margin-left: auto;
	font-family: var(--cond);
	font-size: 11px;
	color: var(--red);
	white-space: nowrap;
}

/* The build-your-own table has 5 columns of real content — on a narrow
   screen that needs more room than the page has, so it scrolls sideways
   inside its own box instead of pushing the whole page wider (the table's
   own min-width keeps its columns from being crushed instead of actually
   triggering that scroll). */
.mtable-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 18px;
}

.mtable {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
}

.mtable th,
.mtable td {
	text-align: left;
	padding: 11px 12px;
	border: 1px solid var(--concrete);
	font-size: 13px;
	color: var(--bone-dim);
}

.mtable th {
	font-family: var(--cond);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bone);
}

.mtable td:first-child {
	color: var(--bone);
}

.prizes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	margin-top: 40px;
	background: var(--concrete);
	border: 1px solid var(--concrete);
}

.prize {
	background: var(--ink);
	padding: 30px 28px;
}

.prize h3 {
	font-family: var(--disp);
	font-weight: 800;
	font-size: clamp(19px, 2vw, 26px);
	letter-spacing: -0.02em;
	text-transform: uppercase;
	margin-bottom: 16px;
}

.blz-shots {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin-top: 40px;
	background: var(--concrete);
	border: 1px solid var(--concrete);
}

.blz-shots img {
	width: 100%;
	height: clamp(200px, 24vw, 300px);
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
	transition: filter 0.35s;
}

.blz-shots img:hover {
	filter: none;
}

/* ------------------------------------------------------------
   Reveal — a short, flat rise. No wipes, no clip-path theatre.
   ------------------------------------------------------------ */

.reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s linear, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal.in {
	opacity: 1;
	transform: none;
}

/* ------------------------------------------------------------
   Reduced motion.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.reveal,
	.tagline,
	.tw-in,
	.hero-logo,
	.hero-cta,
	.trust,
	.hero-blaze {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}

	.disc-track,
	.g-row,
	.urgent-track,
	.hero-bg img,
	.hero-spin-ring {
		animation: none !important;
	}
}

/* ------------------------------------------------------------
   Responsive.
   ------------------------------------------------------------ */

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

@media (max-width: 1000px) {
	.ph-grid,
	.physio-grid,
	.specs,
	.prizes,
	.menu-grid {
		grid-template-columns: 1fr;
	}

	.tiers {
		grid-template-columns: 1fr;
	}

	.stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.row {
		grid-template-columns: 62px minmax(0, 1fr) 32px;
		row-gap: 8px;
	}

	.row-num {
		grid-row: 1 / 3;
	}

	.row-desc {
		grid-column: 2 / 3;
		grid-row: 2;
	}

	.row-go {
		grid-row: 1 / 3;
	}

	.coaches-copy {
		flex-basis: 100%;
	}
}

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

	.nav-right .btn-join,
	.nav-right .btn-wa {
		display: none;
	}

	.burger {
		display: flex;
	}

	/* Below the burger breakpoint the header brand is always visible, so the
	   hero mark would just repeat it. It also glides to center when the
	   drawer opens — always absolutely positioned here (rather than only
	   while open) so that move is a transform change, not a jump from
	   static into absolute positioning. */
	.brand {
		opacity: 1;
		pointer-events: auto;
		position: absolute;
		top: 50%;
		left: var(--gut);
		transform: translateY(-50%);
		transition: left 0.4s cubic-bezier(0.7, 0, 0.2, 1), transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);
	}

	#nav.menu-open .brand {
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.hero-logo {
		display: none;
	}

	/* A nice-to-have flourish, not essential content — rather than chase its
	   position across every hero layout permutation below this breakpoint
	   (where the CTA stack, trust badge and Blaze bar are all fighting for
	   the same vertical space), it simply steps aside. */
	.hero-spin {
		display: none;
	}

	.k-food {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 150px;
		grid-template-areas: none;
	}

	.kf {
		grid-area: auto !important;
	}

	.blz-shots {
		grid-template-columns: 1fr;
	}

	.count {
		grid-template-columns: repeat(4, 1fr);
		width: 100%;
	}
}

@media (max-width: 640px) {
	.houses,
	.stats {
		grid-template-columns: 1fr;
	}

	.hero-cta,
	.p-cta,
	.physio-cta {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.hero-cta .btn + .btn,
	.p-cta .btn + .btn,
	.physio-cta .btn + .btn {
		margin-left: 0;
		margin-top: 12px;
	}

	.btn {
		width: 100%;
	}

	.k-head {
		flex-direction: column;
	}

	.coach {
		flex-basis: 100%;
	}

	.count {
		grid-template-columns: repeat(2, 1fr);
	}
}