/* =========================================================================
   Studio Forme Réunion
   Dark, single-theme. One accent (the gold of the wordmark). Zero radius.
   ========================================================================= */

:root {
	/* One grey family. The darks carry the same warm hue as the paper and the
	   gold, so nothing in the palette reads as a different temperature. */
	--ink:        #0b0a09;
	--ink-2:      #131210;
	--ink-3:      #1a1917;
	--paper:      #f4f1ec;
	--muted:      #a29c93;
	--gold:       #e0a73c;
	--gold-deep:  #a8681f;
	--gold-light: #f5d283;
	--line:       rgba(244, 241, 236, .13);
	--line-soft:  rgba(244, 241, 236, .07);
	/* Shadows carry the hue of the surface they fall on, never flat black. */
	--shadow-lg:  0 28px 70px rgba(6, 4, 2, .62);

	--display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
	--body:    'Manrope', system-ui, -apple-system, sans-serif;

	--gutter: clamp(1.25rem, 4.5vw, 4.5rem);
	--maxw:   1480px;
	--section: clamp(3.75rem, 6.5vw, 6.25rem);
	--header-h: 74px;

	--ease: cubic-bezier(.16, 1, .3, 1);
}

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

html {
	--admin-bar: 0px;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + var(--admin-bar) + 1rem);
}

/* The WordPress toolbar is fixed above everything for signed-in users. Without
   this offset the fixed header sits underneath it and reads as detached from
   the top of the screen. Declared on the root so scroll-padding sees it too. */
html:has(body.admin-bar) { --admin-bar: var(--wp-admin--admin-bar--height, 32px); }

@media screen and (max-width: 782px) {
	html:has(body.admin-bar) { --admin-bar: var(--wp-admin--admin-bar--height, 46px); }
}
@media screen and (max-width: 600px) {
	/* Below this width WordPress lets the toolbar scroll away, so the header
	   goes back to the very top instead of trailing a gap behind it. */
	html:has(body.admin-bar) { --admin-bar: 0px; }
}

body {
	margin: 0;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--body);
	font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
	line-height: 1.65;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* A fixed film grain keeps the large flat darks from looking like printer
   ink. It never scrolls and never repaints, so it costs nothing after paint. */
body::after {
	content: '';
	position: fixed;
	inset: -50%;
	z-index: 90;
	pointer-events: none;
	opacity: .035;
	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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

/* Every slot that holds a photograph carries a surface of its own. An image
   still in flight then reads as an empty frame, never as a hole in the page. */
.split__media,
.gallery figure,
.coach__frame,
.card__media,
.subhero__media,
.closer__media,
.banner__media,
.studio__bg {
	background-color: var(--ink-2);
	background-image: linear-gradient(135deg, rgba(244, 241, 236, .04), transparent 55%);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

.skip {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--gold); color: var(--ink); padding: .75rem 1.25rem; font-weight: 700;
}
.skip:focus { left: 0; }

/* ---------- Layout ---------- */

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

/* Bottom padding runs slightly heavier than top: optically even, not
   mathematically even. */
.section { padding-block: var(--section) calc(var(--section) * 1.12); position: relative; }

/* Section modifiers, so templates stop carrying layout in style attributes. */
.section--tight { padding-top: 0; }
.section--alt { background: var(--ink-2); border-block: 1px solid var(--line); }
.section--edge { border-top: 1px solid var(--line); }

.u-mt-0 { margin: 0; }
.u-mt-1 { margin-top: 1.25rem; }
.u-mt-2 { margin-top: 1.5rem; }
.u-mt-3 { margin-top: 2rem; }
.u-mt-4 { margin-top: 2.5rem; }

/* Zero-height marker the header watches to know it has left the top. */
.sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

.footer__blurb { max-width: 34ch; }
.sup-sm { font-size: .5em; }
.pillars--flush { margin-top: 0; }
.post-row { padding-block: 2rem; border-bottom: 1px solid var(--line); }

/* ---------- Typography ---------- */

.display, h1, h2, h3 {
	font-family: var(--display);
	font-weight: 800;
	font-stretch: 118%;
	line-height: .94;
	letter-spacing: -.022em;
	text-transform: uppercase;
	margin: 0;
	text-wrap: balance;
}

.d1 { font-size: clamp(2.75rem, 8.2vw, 7.4rem); }
.d2 { font-size: clamp(2.1rem, 5.4vw, 4.6rem); }
.d3 { font-size: clamp(1.5rem, 2.6vw, 2.35rem); line-height: 1; }

.kicker {
	font-family: var(--display);
	font-size: .72rem;
	font-weight: 600;
	font-stretch: 100%;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 1.4rem;
	display: flex;
	align-items: center;
	gap: .9rem;
}
.kicker::before {
	content: '';
	width: 2.4rem;
	height: 2px;
	background: linear-gradient(90deg, var(--gold-deep), var(--gold-light));
}

.lead {
	font-size: clamp(1.075rem, 1rem + .45vw, 1.35rem);
	line-height: 1.55;
	color: var(--paper);
	max-width: 34ch;
	margin: 0;
}

.body-text { color: var(--muted); max-width: 62ch; margin: 0; text-wrap: pretty; }
.body-text + .body-text { margin-top: 1.1rem; }
.body-text strong { color: var(--paper); font-weight: 600; }

.num {
	font-family: var(--display);
	font-weight: 800;
	font-stretch: 112%;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.03em;
	line-height: .85;
}

/* ---------- Buttons ---------- */

.btn {
	--btn-fg: var(--ink);
	--btn-bg: var(--gold);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	padding: 1.1rem 1.9rem;
	font-family: var(--display);
	font-size: .82rem;
	font-weight: 700;
	font-stretch: 105%;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
	background: var(--btn-bg);
	color: var(--btn-fg);
	border: 1px solid var(--btn-bg);
	overflow: hidden;
	/* The magnetic pull writes --mx/--my rather than transform, so the pressed
	   state can still compose on top of it. */
	transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
	transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn span { position: relative; z-index: 1; }
.btn:hover { background: var(--gold-light); border-color: var(--gold-light); }
.btn:active {
	transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + 1px), 0) scale(.985);
	transition-duration: .08s;
}

.btn--ghost {
	--btn-fg: var(--paper);
	--btn-bg: transparent;
	border-color: var(--line);
}
.btn--ghost:hover {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--ink);
}

.btn--full { width: 100%; }

.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	font-family: var(--display);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold);
	padding-block: .35rem;
	border-bottom: 1px solid transparent;
	transition: border-color .3s var(--ease), gap .3s var(--ease);
}
.arrow-link::after {
	content: '';
	width: 1.4rem; height: 1px;
	background: currentColor;
	transition: width .3s var(--ease);
}
.arrow-link:hover { gap: 1.1rem; border-bottom-color: currentColor; }
.arrow-link:hover::after { width: 2rem; }

/* ---------- Header ---------- */

.header {
	position: fixed;
	top: var(--admin-bar);
	right: 0;
	left: 0;
	z-index: 60;
	height: var(--header-h);
	display: flex;
	align-items: center;
	transition: background-color .4s var(--ease), border-color .4s var(--ease);
	border-bottom: 1px solid transparent;
}
.header::before {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(11, 10, 9, .78), transparent);
	pointer-events: none;
	transition: opacity .4s var(--ease);
}
.header.is-stuck {
	background: rgba(11, 10, 9, .92);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom-color: var(--line-soft);
}
.header.is-stuck::before { opacity: 0; }

.header__in {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	position: relative;
	z-index: 1;
}

.brand { display: block; flex: 0 0 auto; }
.brand img { width: clamp(140px, 15vw, 186px); height: auto; }

.nav { display: flex; align-items: center; gap: clamp(.9rem, 1.6vw, 1.75rem); }
.nav ul { display: flex; align-items: center; gap: clamp(.9rem, 1.6vw, 1.75rem); list-style: none; margin: 0; padding: 0; }

.nav__link {
	position: relative;
	font-family: var(--display);
	font-size: .72rem;
	font-weight: 600;
	font-stretch: 100%;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--paper);
	padding-block: .4rem;
	transition: color .25s var(--ease);
	white-space: nowrap;
}
.nav__link::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 1px;
	background: var(--gold);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .38s var(--ease);
}
.nav__link:hover { color: var(--gold); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--gold); }

.header .btn { padding: .78rem 1.2rem; font-size: .69rem; letter-spacing: .1em; }

.burger {
	display: none;
	width: 46px; height: 46px;
	background: none;
	border: 1px solid var(--line);
	cursor: pointer;
	position: relative;
}
.burger span {
	position: absolute;
	left: 12px;
	width: 20px; height: 1.5px;
	background: var(--paper);
	transition: transform .35s var(--ease), opacity .2s;
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 23px; }
.burger span:nth-child(3) { top: 29px; }
.is-menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.is-menu-open .burger span:nth-child(2) { opacity: 0; }
.is-menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
	position: fixed;
	inset: var(--admin-bar) 0 0;
	z-index: 55;
	background: var(--ink);
	padding: calc(var(--header-h) + 2.5rem) var(--gutter) 3rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transform: translateY(-100%);
	visibility: hidden;
	transition: transform .6s var(--ease), visibility .6s;
	overflow-y: auto;
}
.is-menu-open .drawer { transform: none; visibility: visible; }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer li { border-bottom: 1px solid var(--line-soft); }
/* Scoped to the menu list: the booking button in the footer of the drawer must
   keep its own type scale, otherwise its label overflows the screen. */
.drawer nav a {
	display: block;
	padding: 1.05rem 0;
	font-family: var(--display);
	font-size: clamp(1.6rem, 7vw, 2.4rem);
	font-weight: 800;
	font-stretch: 112%;
	text-transform: uppercase;
	letter-spacing: -.02em;
	opacity: 0;
	transform: translateY(14px);
}
.is-menu-open .drawer nav a { animation: drawer-in .55s var(--ease) forwards; }
.drawer li:nth-child(1) a { animation-delay: .06s; }
.drawer li:nth-child(2) a { animation-delay: .11s; }
.drawer li:nth-child(3) a { animation-delay: .16s; }
.drawer li:nth-child(4) a { animation-delay: .21s; }
.drawer li:nth-child(5) a { animation-delay: .26s; }
.drawer li:nth-child(6) a { animation-delay: .31s; }
@keyframes drawer-in { to { opacity: 1; transform: none; } }

.drawer__foot { display: grid; gap: 1.25rem; padding-top: 2rem; }
.drawer__foot a.tel {
	display: flex;
	align-items: center;
	min-height: 48px;
	font-family: var(--display);
	font-size: 1.5rem;
	font-weight: 800;
	font-stretch: 110%;
	letter-spacing: -.01em;
	color: var(--gold);
}
/* Long label, narrow screen: allow the booking button to use two lines here. */
.drawer__foot .btn { white-space: normal; text-align: center; line-height: 1.35; }

body.is-menu-open { overflow: hidden; }

/* =========================================================================
   Hero: full bleed footage, headline anchored low left
   ========================================================================= */

.hero {
	position: relative;
	min-height: 100dvh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	padding-bottom: clamp(2.5rem, 6vw, 5rem);
	padding-top: calc(var(--header-h) + 2rem);
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.hero__media img,
.hero__media video {
	width: 100%; height: 100%;
	object-fit: cover;
}

/* Parallax: the picture is oversized so it can drift against the page without
   ever exposing an edge. JS writes the translate, CSS owns the scale. */
.js [data-parallax] img {
	transform: scale(1.16);
	will-change: transform;
	animation: shot-in 1.6s var(--ease) both;
}
@keyframes shot-in { from { opacity: 0; } to { opacity: 1; } }

.hero__scrim {
	position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(180deg, rgba(11, 10, 9, .55) 0%, rgba(11, 10, 9, .12) 32%, rgba(11, 10, 9, .82) 78%, var(--ink) 100%),
		linear-gradient(90deg, rgba(11, 10, 9, .72) 0%, rgba(11, 10, 9, .15) 62%);
}

.hero__in {
	position: relative;
	z-index: 2;
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .42fr);
	align-items: end;
	gap: clamp(2rem, 5vw, 4rem);
}

.hero h1 { margin-bottom: 1.6rem; }
.hero .line { display: block; overflow: hidden; }
.hero .line__in { display: block; }

.hero__aside {
	padding-bottom: .5rem;
	border-left: 1px solid var(--line);
	padding-left: clamp(1.25rem, 2.5vw, 2.25rem);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }

.rating {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .3rem .55rem;
	margin-top: 1.6rem;
	font-size: .88rem;
	color: var(--muted);
}
.rating span { min-width: 0; }
.rating b {
	font-family: var(--display);
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--gold);
	line-height: 1;
}

/* =========================================================================
   Marquee band
   ========================================================================= */

.band {
	border-block: 1px solid var(--line);
	background: var(--ink-2);
	overflow: hidden;
	padding-block: 1.15rem;
}
.band__track {
	display: flex;
	width: max-content;
	gap: 3.5rem;
	will-change: transform;
}
.band__track > span {
	display: flex;
	align-items: center;
	gap: 3.5rem;
	font-family: var(--display);
	font-size: clamp(1rem, 1.7vw, 1.5rem);
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(244, 241, 236, .32);
	white-space: nowrap;
}
.band__track i {
	width: 7px; height: 7px;
	background: var(--gold);
	flex: 0 0 auto;
	transform: rotate(45deg);
}

/* =========================================================================
   Expertises: horizontal pan on desktop, snap stack on mobile
   ========================================================================= */

/* The head is a normal section; only .pan carries the pinned viewport, so the
   height JS assigns to it is never fought over by other content. */
.pan { position: relative; background: var(--ink); }
.pan__head {
	position: relative;
	z-index: 2;
	padding-block: var(--section) clamp(2rem, 4vw, 3.5rem);
}
.pan__head-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}

.pan__pin {
	position: sticky;
	top: 0;
	padding-top: calc(var(--header-h) + 1rem);
	padding-bottom: clamp(2rem, 4vw, 3.5rem);
	background: var(--ink);
}
/* Without scripting the row is simply a horizontal scroller; with scripting the
   overflow is hidden and the pan is driven by the page scroll. */
.pan__viewport { position: relative; overflow-x: auto; scrollbar-width: none; }
.pan__viewport::-webkit-scrollbar { display: none; }
.js .pan__viewport { overflow: hidden; }
.pan__track {
	display: flex;
	gap: clamp(1rem, 1.6vw, 1.6rem);
	padding-inline: var(--gutter);
	will-change: transform;
}

.card {
	position: relative;
	flex: 0 0 auto;
	/* Sized off the viewport height so the pinned row always fits on screen. */
	height: clamp(380px, 60vh, 620px);
	width: auto;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--ink-2);
	display: block;
	isolation: isolate;
}
.card__media { position: absolute; inset: 0; z-index: 0; }
.card__media img,
.card__media video {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.06) brightness(.72);
	transform: scale(1.02);
	transition: filter .7s var(--ease), transform 1.1s var(--ease), opacity .6s var(--ease);
}
/* The clip only appears under the pointer, and only then is it downloaded. */
.card__media video { opacity: 0; }
.card:hover .card__media video,
.card:focus-visible .card__media video { opacity: 1; }
.card:hover .card__media img,
.card:hover .card__media video,
.card:focus-visible .card__media img,
.card:focus-visible .card__media video {
	filter: grayscale(0) contrast(1) brightness(.9);
	transform: scale(1.07);
}
.card::after {
	content: '';
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(11, 10, 9, .35) 0%, transparent 34%, rgba(11, 10, 9, .88) 100%);
}
.card__in {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(1.35rem, 2.2vw, 2.1rem);
}
.card__metric {
	display: flex;
	align-items: baseline;
	gap: .4rem;
	color: var(--gold);
}
.card__metric .num { font-size: clamp(2.1rem, 3.6vw, 3.2rem); }
.card__metric small {
	font-family: var(--display);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.card__metric-label {
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
	margin: .45rem 0 0;
}
.card h3 { font-size: clamp(1.5rem, 2.5vw, 2.15rem); margin-bottom: .6rem; }
.card__kicker {
	font-family: var(--display);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 .9rem;
}
.card p.card__promise {
	color: rgba(244, 241, 236, .82);
	font-size: .95rem;
	line-height: 1.5;
	margin: 0 0 1.2rem;
	max-width: 30ch;
}

.pan__progress {
	height: 1px;
	background: var(--line-soft);
	margin: clamp(2rem, 4vw, 3rem) var(--gutter) 0;
	position: relative;
}
.pan__progress i {
	position: absolute;
	inset: 0 auto 0 0;
	height: 100%;
	width: 12%;
	background: linear-gradient(90deg, var(--gold-deep), var(--gold-light));
	transform-origin: left;
}

/* =========================================================================
   Figures: sticky title, streaming numbers
   ========================================================================= */

/* A single soft pool of warm light behind the numbers, so the section is not
   flat text on flat black. Radial, not a linear gradient wash. */
.figures { border-top: 1px solid var(--line); isolation: isolate; }
.figures::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(58% 42% at 78% 22%, rgba(224, 167, 60, .07), transparent 70%);
}
.figures__grid {
	display: grid;
	grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: start;
}
.figures__aside { position: sticky; top: calc(var(--header-h) + clamp(2rem, 6vw, 5rem)); }

.figure-row {
	display: grid;
	grid-template-columns: minmax(0, .46fr) minmax(0, 1fr);
	gap: clamp(1rem, 3vw, 2.5rem);
	align-items: baseline;
	padding-block: clamp(1.6rem, 3vw, 2.4rem);
	border-bottom: 1px solid var(--line-soft);
}
.figure-row:first-child { padding-top: 0; }
.figure-row:last-child { border-bottom: 0; }
.figure-row__val {
	display: flex;
	align-items: baseline;
	gap: .4rem;
	color: var(--gold);
}
.figure-row__val .num { font-size: clamp(3rem, 6.2vw, 5.4rem); }
.figure-row__val small {
	font-family: var(--display);
	font-size: clamp(.85rem, 1.1vw, 1.05rem);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gold-light);
}
.figure-row p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.5; }

/* =========================================================================
   Studio: overlapping editorial
   ========================================================================= */

/* Edge to edge photograph with the copy panel riding on the right. Because the
   image is the section background rather than a grid cell, there is no column
   that can end up empty, at any width. */
.studio {
	position: relative;
	overflow: hidden;
	min-height: min(76vh, 660px);
	display: flex;
	align-items: center;
}
.studio__bg { position: absolute; inset: 0; z-index: 0; }
.studio__bg img { width: 100%; height: 100%; object-fit: cover; }
.studio__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(11, 10, 9, .34) 0%, rgba(11, 10, 9, .52) 38%, rgba(11, 10, 9, .9) 68%, var(--ink) 96%),
		linear-gradient(180deg, var(--ink) 0%, transparent 18%, transparent 76%, var(--ink) 100%);
}

.studio__grid {
	position: relative;
	z-index: 1;
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
}
.studio__panel {
	grid-column: 2;
	background: rgba(19, 18, 16, .82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--line);
	padding: clamp(1.6rem, 3vw, 2.9rem);
	box-shadow: var(--shadow-lg);
}
@media (prefers-reduced-transparency: reduce) {
	.studio__panel { background: var(--ink-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.studio__panel .body-text { margin-top: 1.1rem; }

.facts { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .8rem; }
.facts li {
	position: relative;
	padding-left: 1.5rem;
	color: var(--paper);
	font-size: .95rem;
	line-height: 1.45;
}
.facts li::before {
	content: '';
	position: absolute;
	left: 0; top: .5rem;
	width: 7px; height: 7px;
	background: var(--gold);
	transform: rotate(45deg);
}

.address {
	margin-top: 2.2rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--line);
	display: grid;
	gap: .35rem;
}
.address__label {
	font-family: var(--display);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 .5rem;
}
.address p { margin: 0; color: var(--muted); }
.address a.tel {
	font-family: var(--display);
	font-size: clamp(1.35rem, 2.4vw, 1.9rem);
	font-weight: 800;
	font-stretch: 110%;
	color: var(--paper);
	margin-top: .6rem;
	transition: color .25s var(--ease);
}
.address a.tel:hover { color: var(--gold); }

/* =========================================================================
   Method finder
   ========================================================================= */

.finder { border-top: 1px solid var(--line); isolation: isolate; }
.finder::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(50% 46% at 18% 30%, rgba(224, 167, 60, .06), transparent 68%);
}
.finder__head { max-width: 62ch; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.finder__head .body-text { margin-top: 1.25rem; }

.finder__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
}

.finder__questions { display: grid; gap: 1.75rem; }

.qgroup { border: 0; margin: 0; padding: 0; }
.qgroup legend {
	font-family: var(--display);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gold);
	padding: 0 0 .9rem;
}
.qgroup__opts { display: flex; flex-wrap: wrap; gap: .6rem; }

.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	margin: 0;
}
.chip span {
	display: block;
	border: 1px solid var(--line);
	padding: .8rem 1.25rem;
	font-family: var(--display);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--paper);
	transition: border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.chip:hover span { border-color: rgba(224, 167, 60, .55); }
.chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.chip input:checked + span {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--ink);
}

/* All four cards share one grid cell, so the box is always as tall as the
   tallest of them and never clips whichever one is showing. */
.finder__result { display: grid; }
.rcard {
	grid-area: 1 / 1;
	background: var(--ink-2);
	border: 1px solid var(--line);
	padding: clamp(1.5rem, 2.6vw, 2.4rem);
	display: flex;
	flex-direction: column;
	gap: .5rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
.rcard.is-active { opacity: 1; visibility: visible; transform: none; }
.rcard__label {
	font-family: var(--display);
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 .4rem;
}
.rcard__kicker { color: var(--muted); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin: .2rem 0 0; }
.rcard__promise { color: var(--paper); margin: .9rem 0 0; font-size: .98rem; line-height: 1.5; }
.rcard__metric {
	display: flex;
	align-items: baseline;
	gap: .45rem;
	margin: auto 0 1.2rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--line);
	color: var(--gold);
}
.rcard__metric .num { font-size: clamp(2.2rem, 3.4vw, 3rem); }
.rcard__metric small { font-family: var(--display); font-weight: 700; font-size: .9rem; text-transform: uppercase; }
.rcard__metric em {
	font-style: normal;
	margin-left: .5rem;
	font-size: .74rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
}
.rcard .arrow-link { align-self: flex-start; }

/* =========================================================================
   Interval timer
   ========================================================================= */

.timer-section { background: var(--ink-2); border-block: 1px solid var(--line); }
.timer-section__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.timer {
	border: 1px solid var(--line);
	background: var(--ink);
	padding: clamp(1.5rem, 3vw, 2.4rem);
	display: grid;
	gap: 1.75rem;
	justify-items: center;
}

.timer__presets { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.timer__preset {
	background: none;
	border: 1px solid var(--line);
	padding: .6rem 1rem;
	cursor: pointer;
	font-family: var(--display);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--paper);
	display: grid;
	gap: .2rem;
	transition: border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.timer__preset em {
	font-style: normal;
	font-size: .68rem;
	letter-spacing: .06em;
	color: var(--muted);
	font-weight: 500;
}
.timer__preset:hover { border-color: rgba(224, 167, 60, .55); }
.timer__preset.is-on { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.timer__preset.is-on em { color: rgba(11, 10, 9, .72); }

.timer__dial { position: relative; width: min(260px, 68vw); aspect-ratio: 1; }
.timer__dial svg { width: 100%; height: 100%; }
.timer__ring-bg { fill: none; stroke: var(--line); stroke-width: 6; }
.timer__ring {
	fill: none;
	stroke: var(--gold);
	stroke-width: 6;
	stroke-linecap: butt;
	transition: stroke .4s var(--ease);
}
.timer.is-rest .timer__ring { stroke: var(--paper); }

.timer__read {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: .3rem;
	text-align: center;
}
.timer__phase {
	font-family: var(--display);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gold);
}
.timer.is-rest .timer__phase { color: var(--paper); }
.timer__time { font-size: clamp(3.2rem, 8vw, 4.6rem); line-height: 1; }
.timer__round { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.timer__controls { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.timer__controls .btn { padding: .85rem 1.5rem; font-size: .74rem; }

.timer__sound {
	background: none;
	border: 0;
	padding: .2rem .4rem;
	cursor: pointer;
	font-size: .74rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold);
	transition: color .25s var(--ease);
}
.timer__sound.is-off { color: var(--muted); text-decoration: line-through; }
.timer__sound:hover { color: var(--gold-light); }

/* =========================================================================
   Cardiac reading progress
   ========================================================================= */

.pulse {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	height: 30px;
	z-index: 40;
	pointer-events: none;
	background: linear-gradient(180deg, transparent, rgba(11, 10, 9, .92) 55%);
}
.pulse svg { width: 100%; height: 100%; display: block; }
.pulse__track { fill: none; stroke: var(--line-soft); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pulse__line {
	fill: none;
	stroke: var(--gold);
	stroke-width: 2.5;
	vector-effect: non-scaling-stroke;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.js .pulse__line { stroke-dasharray: var(--len, 0) var(--len, 0); stroke-dashoffset: var(--len, 0); }

/* Where it exists, the trace is tied straight to the scroll position and runs
   off the main thread. The script only steps in for browsers without it. */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.js .pulse__line {
			animation: pulse-draw linear both;
			animation-timeline: scroll(root block);
		}
		@keyframes pulse-draw {
			from { stroke-dashoffset: var(--len, 0); }
			to   { stroke-dashoffset: 0; }
		}
	}
}

/* =========================================================================
   Coaches: staggered portraits
   ========================================================================= */

.coaches__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2.4vw, 2.4rem);
	margin-top: clamp(2.5rem, 5vw, 4rem);
}
.coach { position: relative; }
.coach:nth-child(2) { margin-top: clamp(2rem, 6vw, 6rem); }
.coach:nth-child(3) { margin-top: clamp(1rem, 3vw, 3rem); }

.coach__frame {
	position: relative;
	overflow: hidden;
	background: var(--ink-2);
}
.coach:nth-child(1) .coach__frame { aspect-ratio: 3 / 4; }
.coach:nth-child(2) .coach__frame { aspect-ratio: 4 / 5; }
.coach:nth-child(3) .coach__frame { aspect-ratio: 5 / 7; }

.coach__frame img {
	width: 100%; height: 100%;
	object-fit: cover;
	filter: grayscale(1) brightness(.82);
	transform: scale(1.02);
	transition: filter .7s var(--ease), transform 1s var(--ease);
}
.coach:hover .coach__frame img { filter: grayscale(0) brightness(1); transform: scale(1.06); }

.coach__name {
	font-family: var(--display);
	font-size: clamp(1.35rem, 2.2vw, 1.85rem);
	font-weight: 800;
	font-stretch: 114%;
	text-transform: uppercase;
	letter-spacing: -.015em;
	margin: 1.1rem 0 .35rem;
}
.coach__role { color: var(--gold); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .7rem; }
.coach__note { color: var(--muted); font-size: .95rem; margin: 0; }

/* =========================================================================
   Reviews: drag carousel
   ========================================================================= */

.reviews { background: var(--ink-2); border-block: 1px solid var(--line); }
.reviews__rail {
	display: flex;
	gap: clamp(1rem, 1.8vw, 1.75rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-inline: var(--gutter);
	padding-bottom: 1.5rem;
	margin-top: clamp(2rem, 4vw, 3rem);
	scrollbar-width: none;
	cursor: grab;
}
.reviews__rail::-webkit-scrollbar { display: none; }
.reviews__rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.review {
	flex: 0 0 auto;
	width: min(400px, 78vw);
	scroll-snap-align: start;
	background: var(--ink);
	border: 1px solid var(--line);
	padding: clamp(1.5rem, 2.4vw, 2.2rem);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.5rem;
	transition: border-color .35s var(--ease);
}
.review:hover { border-color: rgba(224, 167, 60, .45); }
.review blockquote { margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--paper); }
.review figcaption { display: flex; align-items: center; gap: .8rem; }
.review__author { font-family: var(--display); font-weight: 700; font-size: .95rem; letter-spacing: .02em; }
.review__src { font-size: .75rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.stars { color: var(--gold); font-size: .8rem; letter-spacing: .18em; }

/* =========================================================================
   Contact
   ========================================================================= */

.contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}

.info-list { display: grid; gap: 1.6rem; margin-top: 2.5rem; }
.info-list > div { padding-top: 1.4rem; border-top: 1px solid var(--line); }
.info-list dt {
	font-family: var(--display);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: .5rem;
}
.info-list dd { margin: 0; color: var(--paper); }
.info-list dd a { transition: color .25s var(--ease); }
.info-list dd a:hover { color: var(--gold); }
.info-list dd span { display: block; color: var(--muted); font-size: .95rem; }

.cform { background: var(--ink-2); border: 1px solid var(--line); padding: clamp(1.5rem, 3vw, 2.6rem); }
.cform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: grid; gap: .45rem; }
.field--full { grid-column: 1 / -1; }
/* Form labels stay sentence case at a readable size. Wide-tracked micro caps
   suit a section eyebrow; they do not suit something you have to read while
   typing. */
.field label {
	font-family: var(--body);
	font-size: .88rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--paper);
}
.field input,
.field select,
.field textarea {
	width: 100%;
	background: var(--ink);
	border: 1px solid var(--line);
	color: var(--paper);
	font-family: var(--body);
	font-size: 1rem;
	padding: .85rem 1rem;
	transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input::placeholder, .field textarea::placeholder { color: #78736b; }
.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--gold);
	background: #0e0d0b;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #f0836a; }

.field__error {
	margin: 0;
	font-size: .82rem;
	color: #f0836a;
	min-height: 0;
	display: none;
}
.field__error.is-visible { display: block; }

.consent {
	display: flex;
	gap: .85rem;
	align-items: flex-start;
	margin-top: 1.4rem;
	font-size: .85rem;
	line-height: 1.5;
	color: var(--muted);
}
.consent input {
	flex: 0 0 auto;
	width: 20px; height: 20px;
	margin-top: .15rem;
	accent-color: var(--gold);
}
.consent a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

.cform .btn { margin-top: 1.6rem; }
.cform__status { margin: 1rem 0 0; font-size: .92rem; display: none; }
.cform__status.is-ok { display: block; color: var(--gold-light); }
.cform__status.is-error { display: block; color: #f0836a; }
.cform.is-sending { opacity: .6; pointer-events: none; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =========================================================================
   Closing call to action
   ========================================================================= */

.closer { position: relative; overflow: hidden; text-align: center; }
.closer__media { position: absolute; inset: 0; z-index: 0; }
.closer__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.34); }
.closer::after {
	content: '';
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, var(--ink), rgba(11, 10, 9, .55) 50%, var(--ink));
}
.closer .wrap { position: relative; z-index: 2; }
.closer p.lead { margin-inline: auto; max-width: 46ch; color: var(--muted); }
.closer h2 { margin-bottom: 1.5rem; }
.closer .btn { margin-top: 2.2rem; }

/* =========================================================================
   Footer
   ========================================================================= */

.footer { border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
}
.footer__brand img { width: 210px; margin-bottom: 1.4rem; }
.footer h4 {
	font-family: var(--display);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 1.1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer a { color: var(--muted); transition: color .25s var(--ease); }
.footer a:hover { color: var(--paper); }
.footer__social { display: flex; gap: .7rem; margin-top: 1.4rem; }
.footer__social a {
	width: 42px; height: 42px;
	border: 1px solid var(--line);
	display: grid; place-items: center;
	transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.footer__social a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.footer__social svg { width: 17px; height: 17px; fill: currentColor; }

.footer__bottom {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: 1.6rem;
	border-top: 1px solid var(--line-soft);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: .82rem;
	color: var(--muted);
}
.footer__bottom nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* =========================================================================
   Interior pages
   ========================================================================= */

.subhero {
	position: relative;
	min-height: min(78vh, 720px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	padding: calc(var(--header-h) + 4rem) 0 clamp(2.5rem, 5vw, 4.5rem);
}
.subhero--short { min-height: min(56vh, 520px); }
.subhero__media { position: absolute; inset: 0; z-index: 0; }
.subhero__media img,
.subhero__media video { width: 100%; height: 100%; object-fit: cover; }
.subhero__media::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(11, 10, 9, .72) 0%, rgba(11, 10, 9, .3) 40%, rgba(11, 10, 9, .9) 82%, var(--ink) 100%);
}
.subhero .wrap { position: relative; z-index: 1; }
.subhero h1 { max-width: 16ch; }
.subhero .lead { margin-top: 1.4rem; max-width: 44ch; }
.subhero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	margin-top: 2.5rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--line);
}
.subhero__meta div { display: grid; gap: .25rem; }
.subhero__meta .num { font-size: clamp(1.9rem, 3.4vw, 2.9rem); color: var(--gold); }
.subhero__meta span { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 5.5rem);
	align-items: center;
}
.split--reverse .split__media { order: -1; }
.split__media img,
.split__media video { width: 100%; object-fit: cover; }
.split__media--tall img { aspect-ratio: 4 / 5; }
.split__media--wide img { aspect-ratio: 16 / 11; }

/* Side by side, a fixed aspect ratio made the picture far taller than the
   paragraph beside it, leaving a tall gap above and below the text. The media
   now takes the height of the row instead, so both columns always end level. */
@media (min-width: 981px) {
	.split { align-items: stretch; }
	.split > * { align-self: center; }
	.split__media {
		align-self: stretch;
		position: relative;
		min-height: clamp(340px, 30vw, 520px);
	}
	/* Taken out of the flow so the picture cannot push the row taller than the
	   paragraph next to it. The row is set by the text, the picture fills it. */
	.split__media img,
	.split__media video {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
	}
}

.pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 0;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid var(--line);
}
.pillar {
	padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.4rem, 2.4vw, 2.2rem);
	border-bottom: 1px solid var(--line);
	border-right: 1px solid var(--line);
	transition: background-color .35s var(--ease);
}

/* Titles wrap onto different line counts from one column to the next, which
   used to leave the lists starting at different heights. Subgrid pins the
   title row and the list row to a shared baseline across all columns. */
@supports (grid-template-rows: subgrid) {
	.pillar {
		display: grid;
		grid-row: span 2;
		grid-template-rows: subgrid;
		row-gap: 0;
	}
	.pillars { grid-auto-rows: auto; }
}
.pillar:hover { background: var(--ink-2); }
.pillar h3 { font-size: clamp(1.05rem, 1.5vw, 1.3rem); margin-bottom: 1.1rem; }
.pillar h3 em {
	display: block;
	font-style: normal;
	font-size: .68rem;
	letter-spacing: .2em;
	color: var(--gold);
	font-weight: 600;
	margin-bottom: .4rem;
}
.pillar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.pillar li {
	position: relative;
	padding-left: 1.4rem;
	color: var(--muted);
	font-size: .95rem;
	line-height: 1.45;
}
.pillar li::before {
	content: '';
	position: absolute;
	left: 0; top: .55rem;
	width: 6px; height: 6px;
	background: var(--gold);
	transform: rotate(45deg);
}

/* Two columns: the quotation on the left, the commentary that answers it on the
   right. Stacked, the quotation ran as a narrow tower with an empty half beside
   it. */
.quote-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.75rem, 5vw, 4.5rem);
	align-items: center;
}

.quote-block {
	border-left: 2px solid var(--gold);
	padding: clamp(1.25rem, 2.4vw, 2rem) 0 clamp(1.25rem, 2.4vw, 2rem) clamp(1.25rem, 2.4vw, 2.25rem);
	max-width: 34ch;
}
.quote-block p {
	font-family: var(--display);
	font-size: clamp(1.2rem, 2.1vw, 1.85rem);
	font-weight: 800;
	font-stretch: 108%;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: -.02em;
	margin: 0 0 1rem;
	text-wrap: balance;
}
.quote-block cite { font-style: normal; color: var(--gold); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; }

.principles {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: 2rem;
}
.principles li {
	list-style: none;
	border: 1px solid var(--line);
	padding: .7rem 1.2rem;
	font-family: var(--display);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--paper);
	transition: border-color .3s var(--ease), color .3s var(--ease);
}
.principles li:hover { border-color: var(--gold); color: var(--gold); }

.gallery {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(.6rem, 1.2vw, 1.1rem);
}
.gallery figure { margin: 0; overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.gallery figure:hover img { transform: scale(1.05); }
.gallery figure:nth-child(1) { grid-column: span 7; aspect-ratio: 16 / 11; }
.gallery figure:nth-child(2) { grid-column: span 5; aspect-ratio: 4 / 5; }
.gallery figure:nth-child(3) { grid-column: span 5; aspect-ratio: 4 / 3; }
.gallery figure:nth-child(4) { grid-column: span 7; aspect-ratio: 16 / 9; }

/* Side by side, differing aspect ratios left one cell short and a step of empty
   space beneath it. On a row, the cells share a height and the pictures crop. */
@media (min-width: 981px) {
	.gallery { align-items: stretch; }
	.gallery figure {
		position: relative;
		aspect-ratio: auto;
		min-height: clamp(300px, 27vw, 470px);
	}
	.gallery figure img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* Full bleed banner used when a third block would otherwise repeat the split */
/* Sized to its content plus a margin: the copy here is two short blocks, and a
   taller band just pushed the text to the floor under a lot of nothing. */
.banner {
	position: relative;
	min-height: min(48vh, 430px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	padding-block: clamp(3rem, 6vw, 5rem);
}
.banner__media { position: absolute; inset: 0; z-index: 0; }
.banner__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.55); }
.banner__media::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, var(--ink) 0%, rgba(11, 10, 9, .3) 35%, rgba(11, 10, 9, .92) 100%);
}
.banner__in { position: relative; z-index: 1; }
.banner__in .lead { max-width: 42ch; margin-top: 1.25rem; }

/* Long-form legal page */
.prose { max-width: 68ch; }
.prose h2 {
	font-size: clamp(1.3rem, 2vw, 1.7rem);
	margin: 3rem 0 1rem;
	letter-spacing: -.01em;
}
.prose h3 { font-size: 1.1rem; margin: 2rem 0 .75rem; }
.prose p, .prose li { color: var(--muted); }
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.2rem; display: grid; gap: .5rem; }

/* =========================================================================
   Scroll reveals
   ========================================================================= */

/* Reveals are driven by the scroll position itself, never by a script and never
   by a transition that has to be triggered. Content is visible by default; the
   animation is added only where the browser can tie it to the scroll. A missed
   or unsupported animation therefore shows the content, never a hole. */

@keyframes sfr-rise {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: none; }
}
@keyframes sfr-wipe {
	from { clip-path: inset(0 0 100% 0); }
	to   { clip-path: inset(0 0 0 0); }
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		[data-reveal] {
			animation: sfr-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 26%;
		}
		[data-reveal="mask"] { animation-name: sfr-wipe; }
	}
}

/* The hero entrance is a plain timed animation with a backwards fill. It starts
   on its own and always finishes, with no class for a script to forget. */
@keyframes sfr-line-up {
	from { transform: translateY(105%); }
	to   { transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
	.hero .line__in { animation: sfr-line-up .95s var(--ease) both; }
	.hero h1 .line:nth-child(1) .line__in { animation-delay: .12s; }
	.hero h1 .line:nth-child(2) .line__in { animation-delay: .225s; }
	.hero h1 .line:nth-child(3) .line__in { animation-delay: .33s; }

	.hero__aside,
	.hero__actions,
	.hero .rating { animation: sfr-rise .9s var(--ease) .5s both; }
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 1100px) {
	.hero__in { grid-template-columns: 1fr; }
	.hero__aside { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 1.5rem; max-width: 46ch; }
	.figures__grid { grid-template-columns: 1fr; }
	.figures__aside { position: static; }
	.studio__grid { grid-template-columns: 1fr; }
	.studio__panel { grid-column: 1; }
	/* Narrower band: the scrim turns vertical so the copy stays legible. */
	.studio__bg::after {
		background: linear-gradient(180deg, var(--ink) 0%, rgba(11, 10, 9, .55) 26%, rgba(11, 10, 9, .88) 58%, var(--ink) 100%);
	}
	.contact__grid { grid-template-columns: 1fr; }
	.footer__grid { grid-template-columns: 1fr 1fr; }
	.footer__brand { grid-column: 1 / -1; }
}

/* The bar carries six links plus the booking button; below this width it can
   no longer hold one line, so it becomes the drawer. */
@media (max-width: 1240px) {
	.nav, .header .btn { display: none; }
	.burger { display: block; }
}

@media (max-width: 980px) {
	.split { grid-template-columns: 1fr; }
	.split--reverse .split__media { order: 0; }
	.coaches__grid { grid-template-columns: 1fr 1fr; }
	.coach:nth-child(3) { grid-column: 1 / -1; max-width: 60%; margin-top: 1.5rem; }
	.gallery figure:nth-child(n) { grid-column: span 6; }

	.finder__grid { grid-template-columns: 1fr; }
	.rcard__metric { margin-top: 1.5rem; }

	.timer-section__grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   Phone polish: readable micro labels, thumb-sized targets
   ========================================================================= */

@media (max-width: 720px) {
	/* Wide-tracked caps get illegible below 12px on a phone screen. */
	.info-list dt,
	.address__label,
	.footer h4,
	.rcard__label,
	.card__metric-label,
	.review__src,
	.subhero__meta span,
	.coach__role { font-size: .76rem; letter-spacing: .16em; }

	.qgroup legend,
	.pillar h3 em,
	.timer__phase,
	.timer__round { font-size: .78rem; }
	.timer__preset em { font-size: .74rem; }
	.timer__sound { min-height: 44px; padding-inline: 1rem; }

	.kicker { font-size: .78rem; letter-spacing: .2em; }
	.card__kicker { font-size: .74rem; letter-spacing: .16em; }

	a.arrow-link { min-height: 44px; }

	/* Anything you tap gets at least a thumb's worth of height. */
	.info-list dd a,
	.footer ul a,
	.footer__bottom a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
	.info-list dd span { margin-top: -.4rem; }
	.footer ul { gap: .1rem; }

	.address a.tel { min-height: 48px; display: inline-flex; align-items: center; }

	.footer__social a { width: 46px; height: 46px; }

	.consent { gap: 1rem; align-items: center; }
	.consent input { width: 24px; height: 24px; margin-top: 0; }

	/* Decorative, so it keeps a light footprint over the content it sits on. */
	.pulse { height: 16px; }
}

@media (max-width: 720px) {
	:root { --header-h: 64px; }
	.hero { min-height: 100dvh; }
	.hero__scrim { background: linear-gradient(180deg, rgba(11, 10, 9, .6) 0%, rgba(11, 10, 9, .25) 30%, rgba(11, 10, 9, .9) 72%, var(--ink) 100%); }
	.d1 { font-size: clamp(2.6rem, 12.5vw, 4rem); }

	/* The horizontal pan becomes a vertical snap list */
	.pan__viewport { overflow: visible; }
	.pan__track {
		flex-direction: column;
		transform: none !important;
		gap: 1rem;
	}
	.pan__pin { position: static; padding-top: 0; }
	.card { width: 100%; height: auto; aspect-ratio: 5 / 6; }
	.pan__progress { display: none; }

	.figure-row { grid-template-columns: 1fr; gap: .5rem; }
	.studio { min-height: 0; padding-block: calc(var(--section) * 1.4); }
	.coaches__grid { grid-template-columns: 1fr; }
	.coach:nth-child(n) { margin-top: 0; max-width: none; }
	.coach + .coach { margin-top: 2.5rem; }
	.cform__grid { grid-template-columns: 1fr; }
	.footer__grid { grid-template-columns: 1fr; }
	.gallery figure:nth-child(n) { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
	.subhero { min-height: auto; padding-top: calc(var(--header-h) + 3rem); }
	.subhero__meta { gap: 1.5rem 2rem; }
	.quote-block { max-width: none; }
	.quote-row { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* Narrow phones: the booking label is long, so buttons take the full width and
   are allowed to run onto a second line rather than being clipped. */
@media (max-width: 430px) {
	.btn {
		white-space: normal;
		text-align: center;
		line-height: 1.35;
		padding-inline: 1.35rem;
	}
	.hero__actions { flex-direction: column; align-items: stretch; }
	.hero__actions .btn { width: 100%; }
}

/* =========================================================================
   Reduced motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	[data-reveal] { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
	.hero .line__in { animation: none !important; transform: none !important; }
	.hero__aside, .hero__actions, .hero .rating { animation: none !important; opacity: 1 !important; transform: none !important; }
	.hero__media img, .hero__media video { transform: none !important; }
	.band__track { transform: none !important; }
	[data-parallax] img { transform: none !important; }
	.pulse__line { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
	.card__media video { opacity: 0 !important; }
	.pan { height: auto !important; }
	.pan__pin { position: static; padding-top: 0; }
	.pan__track { transform: none !important; }
	.pan__viewport { overflow-x: auto; }
	.pan__progress { display: none; }
}


/* ---------- SEO H1 (1.6.5) ----------
   The H1 carries the keyword as a kicker line; the big display title is a <p class="display d1">. */
.sfr-h1 { line-height: 1.45; text-wrap: balance; }
.subhero .sfr-h1 { max-width: none; }
.subhero .d1 { max-width: 16ch; }
.hero .sfr-h1 { margin-bottom: 1.4rem; }
.hero .d1 { margin-bottom: 1.6rem; }
@media (prefers-reduced-motion: no-preference) {
	.hero .d1 .line:nth-child(1) .line__in { animation-delay: .12s; }
	.hero .d1 .line:nth-child(2) .line__in { animation-delay: .225s; }
	.hero .d1 .line:nth-child(3) .line__in { animation-delay: .33s; }
}