/* ==========================================================================
   Zen Functional Medicine — main stylesheet
   Mobile first: base styles are for phones, min-width queries add to them.
   ========================================================================== */

/* ---------- Font (self-hosted, one variable file covers weights 300–600) ---------- */
@font-face {
	font-family: "Montserrat";
	src: url("../fonts/montserrat-latin-var.woff2") format("woff2");
	font-weight: 300 600;
	font-style: normal;
	font-display: swap;
}

/* ---------- Brand tokens (locked, see CLAUDE.md section 4) ---------- */
:root {
	--zen-blue: #1E90FF;        /* Zen Electric Blue */
	--zen-green: #7ED321;       /* Vitality Green */
	--zen-deep-blue: #0A4FAF;   /* Deep Blue Outline */
	--zen-cyan: #7FDBFF;        /* Soft Cyan Highlight */
	--zen-dark-green: #4CAF50;  /* Dark Wellness Green */
	--zen-white: #FFFFFF;
	--zen-black: #000000;
	--zen-gradient: linear-gradient(135deg, #1E90FF 0%, #7ED321 100%);

	/* Section backgrounds */
	--zen-near-black: #05070D;
	--zen-midnight: #0A1528;

	/* Text on dark backgrounds */
	--text: #FFFFFF;
	--text-soft: rgba(255, 255, 255, 0.78);
	--text-faint: rgba(255, 255, 255, 0.55);
	--rule: rgba(255, 255, 255, 0.12);

	/* Type */
	--font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--track-headline: 0.18em;
	--track-label: 0.22em;

	/* Layout */
	--gutter: 20px;
	--max-width: 1180px;
	--section-pad: 72px;
}

@media (min-width: 900px) {
	:root {
		--gutter: 40px;
		--section-pad: 120px;
	}
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; }

/* ---------- Base ---------- */
body {
	background: var(--zen-near-black);
	color: var(--text);
	font-family: var(--font);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip; /* clip, not hidden, so the sticky header keeps working */
}

a { color: var(--zen-cyan); text-underline-offset: 3px; }
a:hover { color: var(--zen-white); }

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

/* ---------- Typography ---------- */
/* Headlines use normal capitalization (JT, 2026-09-24). Only small labels are all caps. */
h1, h2, h3 {
	font-weight: 300;
	letter-spacing: var(--track-headline);
	line-height: 1.3;
}

h1 { font-size: clamp(1.6rem, 6vw, 3.2rem); }
h2 { font-size: clamp(1.35rem, 4.5vw, 2.3rem); }
h3 { font-size: clamp(1.05rem, 3vw, 1.35rem); letter-spacing: 0.12em; }

p + p { margin-top: 1em; }

.eyebrow {
	display: block;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--zen-cyan);
}

.gradient-rule {
	width: 96px;
	height: 3px;
	border: 0;
	background: var(--zen-gradient);
	margin: 24px 0;
}

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

.section { padding-block: var(--section-pad); }
.section--midnight { background: var(--zen-midnight); }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 14px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--zen-gradient);
	color: var(--zen-white);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	line-height: 1.3;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
	color: var(--zen-white);
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(30, 144, 255, 0.35);
}

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

/* Visually hidden, still read by screen readers */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- SECTION BACKGROUND RULE (site-wide, JT 2026-09-27) ----------
   Every section background image fills its section at any screen size with no stretching:
   - CSS backgrounds: always "center / cover no-repeat" (never "100% 100%" or a fixed width + height).
   - <img> used as a background: width/height 100% with object-fit: cover (never "fill").
   Cover scales the image evenly and trims the edges; it can soften a small image on large
   screens but can never distort it. Supply background photos at least 2880px wide. */

/* ---------- Placeholders (unconfirmed content, see CLAUDE.md section 12) ---------- */
.placeholder {
	display: inline-block;
	padding: 2px 10px;
	border: 1px dashed #FFB020;
	border-radius: 4px;
	background: rgba(255, 176, 32, 0.12);
	color: #FFB020;
	font-size: 0.85em;
	font-weight: 500;
}

.skip-link {
	position: absolute;
	left: 12px;
	top: -100px;
	z-index: 1000;
	padding: 10px 16px;
	background: var(--zen-white);
	color: var(--zen-black);
	font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* ==========================================================================
   Header
   Phones: logo + menu button, with a full-width booking bar underneath.
   1180px and up: logo, nav with dropdowns, booking button, all in one row.
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--rule);
}

/* The frosted background sits on its own layer. A backdrop-filter on .site-header itself
   would trap the fixed-position phone menu inside the header's 64px height. */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(5, 7, 13, 0.94);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 64px;
}

.site-header__logo { flex-shrink: 0; }
.site-header__logo img { width: 158px; height: auto; }

.site-header__cta { display: none; }

.site-header__cta-bar .btn--bar {
	width: 100%;
	min-height: 46px;
	padding: 10px 16px;
	border-radius: 0;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
}
.site-header__cta-bar .btn--bar:hover { transform: none; box-shadow: none; }
@media (max-width: 359px) {
	.site-header__cta-bar .btn--bar { font-size: 0.66rem; letter-spacing: 0.08em; }
}

/* Menu button (three lines that turn into an X) */
.menu-toggle {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-right: -12px;
	border: 0;
	background: none;
	color: var(--zen-white);
	cursor: pointer;
}
.menu-toggle__lines { position: relative; width: 24px; height: 16px; }
.menu-toggle__lines span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.menu-toggle__lines span:nth-child(1) { top: 0; }
.menu-toggle__lines span:nth-child(2) { top: 7px; }
.menu-toggle__lines span:nth-child(3) { top: 14px; }
.is-menu-open .menu-toggle__lines span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.is-menu-open .menu-toggle__lines span:nth-child(2) { opacity: 0; }
.is-menu-open .menu-toggle__lines span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* Phone menu panel: drops down under the header bar and fills the screen */
.primary-nav {
	display: none;
	position: fixed;
	inset: 65px 0 0 0;
	overflow-y: auto;
	padding: 12px var(--gutter) 40px;
	background: var(--zen-near-black);
}
.is-menu-open .primary-nav { display: block; }
.is-menu-open .site-header__cta-bar { display: none; }
html.menu-open { overflow: hidden; }

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

.nav__link {
	display: block;
	padding: 14px 0;
	color: var(--zen-white);
	font-size: 1.15rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-decoration: none;
	border-bottom: 1px solid var(--rule);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--zen-cyan); }

.nav__toggle { display: none; }

.nav__group-label {
	display: block;
	padding: 24px 0 4px;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--text-faint);
}
.nav__sub { list-style: none; margin: 0; padding: 0; }
.nav__link--sub { padding-left: 16px; }

.primary-nav__contact {
	display: grid;
	gap: 16px;
	justify-items: center;
	margin-top: 32px;
}

.phone-link {
	color: var(--zen-white);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-decoration: none;
}
.phone-link:hover { color: var(--zen-cyan); }

@media (min-width: 1180px) {
	.site-header__bar { height: 84px; }
	.site-header__logo img { width: 200px; }
	.site-header__cta { display: block; }
	.site-header__cta .btn { min-height: 46px; padding: 12px 22px; font-size: 0.72rem; }
	.site-header__cta-bar,
	.menu-toggle,
	.primary-nav__contact,
	.nav__group-label { display: none; }

	.primary-nav {
		display: block;
		position: static;
		overflow: visible;
		padding: 0;
		background: none;
		margin-left: auto;
	}

	.nav { display: flex; align-items: center; gap: 8px; }
	.nav__item { position: relative; }

	.nav__link,
	.nav__toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 10px 14px;
		border: 0;
		background: none;
		color: var(--text-soft);
		font-family: var(--font);
		font-size: 0.74rem;
		font-weight: 500;
		letter-spacing: var(--track-label);
		text-transform: uppercase;
		cursor: pointer;
	}
	.nav__link:hover,
	.nav__toggle:hover,
	.nav__toggle[aria-expanded="true"] { color: var(--zen-white); }
	.nav__link[aria-current="page"],
	.is-current > .nav__toggle { color: var(--zen-cyan); }

	.nav__chevron {
		width: 7px;
		height: 7px;
		margin-top: -4px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.2s ease;
	}
	.nav__toggle[aria-expanded="true"] .nav__chevron { transform: rotate(225deg); margin-top: 4px; }

	/* Dropdown panel: opens on click/tap or keyboard, and on hover for mouse users */
	.nav__sub {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 230px;
		padding: 10px 0;
		background: var(--zen-midnight);
		border: 1px solid var(--rule);
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	}
	.nav__toggle[aria-expanded="true"] + .nav__group-label + .nav__sub,
	.nav__item--group:hover > .nav__sub {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.nav__sub::before {
		content: "";
		position: absolute;
		top: -1px; left: -1px; right: -1px;
		height: 2px;
		background: var(--zen-gradient);
	}
	.nav__link--sub {
		padding: 12px 20px;
		letter-spacing: 0.16em;
		white-space: nowrap;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	position: relative;
	padding-top: 64px;
	background: var(--zen-midnight);
	color: var(--text-soft);
	font-size: 0.95rem;
}
.site-footer::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--zen-gradient);
}

.site-footer__grid {
	display: grid;
	gap: 48px;
}

.site-footer__logo { width: 150px; }
.site-footer .eyebrow { margin-bottom: 16px; }
.address { font-style: normal; line-height: 1.7; }
.site-footer__phone { margin: 12px 0 24px; }

.hours { margin: 0; }
.hours__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 6px 0;
	border-bottom: 1px solid var(--rule);
}
.hours dt { font-weight: 500; color: var(--zen-white); }
.hours dd { margin: 0; text-align: right; }

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links a {
	display: inline-block;
	padding: 6px 0;
	color: var(--text-soft);
	text-decoration: none;
}
.footer-links a:hover { color: var(--zen-cyan); }

.site-footer__legal {
	margin-top: 56px;
	padding-top: 28px;
	padding-bottom: 32px;
	border-top: 1px solid var(--rule);
	font-size: 0.8rem;
	color: var(--text-faint);
}
.site-footer__disclaimer strong { color: var(--text-soft); font-weight: 600; }
.site-footer__disclaimer { max-width: 900px; line-height: 1.6; }
/* Links inside the disclaimers: same look as the Privacy Policy / Terms links below them */
.site-footer__disclaimer a { color: var(--text-faint); overflow-wrap: anywhere; }
.site-footer__disclaimer a:hover { color: var(--zen-white); }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: 20px;
}
.legal-links { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.legal-links a { color: var(--text-faint); }
.legal-links a:hover { color: var(--zen-white); }

@media (min-width: 700px) {
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
	.site-footer { padding-top: 88px; }
	.site-footer__grid { grid-template-columns: 1fr 1.2fr 1.3fr 1fr; gap: 56px; }
	.site-footer__logo { width: 170px; }
}

/* ==========================================================================
   Hero video player (template-parts/hero-video.php + assets/js/video-player.js)
   The buttons sit under the video, not on top of it, so they never cover the speaker.
   Their space is reserved from the start so nothing on the page jumps when they appear.
   ========================================================================== */
.zen-video {
	--progress: 0%;
	position: relative;
	width: 100%;
	max-width: 960px;
	margin-inline: auto;
}

.zen-video__frame {
	position: relative;
	aspect-ratio: var(--ratio, 16/9);
	overflow: hidden;
	border-radius: 14px;
	background: radial-gradient(ellipse at 50% 40%, var(--zen-midnight) 0%, var(--zen-near-black) 75%);
	box-shadow: 0 0 0 1px var(--rule), 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(30, 144, 255, 0.12);
}

/* Vertical videos: keep them from getting taller than the screen */
.zen-video[style*="9/16"] { max-width: min(420px, 56svh); }

.zen-video__media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--zen-black);
	cursor: pointer;
}

/* YouTube version (zen_videos() 'src' is a youtube.com/embed/ link): YouTube's player fills the frame */
.zen-video__yt { position: absolute; inset: 0; }
.zen-video__yt iframe { display: block; border: 0; cursor: auto; }

/* Placeholder (no video file yet) */
.zen-video__placeholder {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 16px;
	height: 100%;
	padding: 16px;
	text-align: center;
}
.zen-video__placeholder img { width: 110px; }

/* Big play button */
.zen-video__bigplay {
	position: absolute;
	inset: 0;
	margin: auto;
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	border: 0;
	border-radius: 50%;
	background: var(--zen-gradient);
	color: var(--zen-white);
	box-shadow: 0 0 0 10px rgba(30, 144, 255, 0.18), 0 12px 40px rgba(0, 0, 0, 0.5);
	cursor: pointer;
	transition: transform 0.2s ease, opacity 0.3s ease;
}
.zen-video__bigplay:hover { transform: scale(1.06); }
.zen-video__bigplay svg { width: 34px; height: 34px; margin-left: 4px; fill: currentColor; }
.zen-video.is-started .zen-video__bigplay { opacity: 0; pointer-events: none; }
.zen-video.is-started:not(.is-playing) .zen-video__bigplay { opacity: 1; pointer-events: auto; }

/* Control bar */
.zen-video__controls {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 28px 8px 6px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.zen-video.is-started .zen-video__controls { opacity: 1; }
.zen-video.is-idle .zen-video__controls { opacity: 0; }
.zen-video.is-idle { cursor: none; }

.zen-video__btn {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--zen-white);
	cursor: pointer;
}
.zen-video__btn svg { width: 22px; height: 22px; fill: currentColor; }
.zen-video__btn--cc { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; }
.zen-video__btn--cc[aria-pressed="true"] { color: var(--zen-cyan); }

.icon-pause, .icon-muted { display: none; }
.zen-video.is-playing .icon-play { display: none; }
.zen-video.is-playing .icon-pause { display: block; }
.zen-video.is-muted .icon-sound { display: none; }
.zen-video.is-muted .icon-muted { display: block; }

.zen-video__time {
	flex-shrink: 0;
	min-width: 76px;
	font-size: 0.72rem;
	font-variant-numeric: tabular-nums;
	color: var(--text-soft);
	text-align: center;
}

/* Seek bar: the filled part uses the brand gradient */
.zen-video__seek {
	flex: 1;
	min-width: 0;
	height: 44px;
	margin: 0 6px;
	background: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.zen-video__seek::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--zen-blue), var(--zen-green)) 0 0 / var(--progress) 100% no-repeat, rgba(255, 255, 255, 0.25);
}
.zen-video__seek::-moz-range-track {
	height: 4px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.25);
}
.zen-video__seek::-moz-range-progress {
	height: 4px;
	border-radius: 2px;
	background: var(--zen-gradient);
}
.zen-video__seek::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	margin-top: -5px;
	border-radius: 50%;
	background: var(--zen-white);
}
.zen-video__seek::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 0;
	border-radius: 50%;
	background: var(--zen-white);
}

/* Phones: the time readout is the first thing to go when space is tight */
@media (max-width: 380px) {
	.zen-video__time { display: none; }
}

/* Buttons under the video */
.zen-video__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding-top: 24px;
}
/* The two homepage choices sit side by side even on phones, so the space held for them stays small */
.zen-video__cta:has(.zen-video__choice) { flex-direction: row; justify-content: center; gap: 10px; }
.zen-video__choice {
	flex: 1 1 0;
	max-width: 260px;
	padding: 14px 10px;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
}

@media (min-width: 560px) {
	.zen-video__cta { flex-direction: row; justify-content: center; }
	.zen-video__choice { flex: 0 1 240px; font-size: 0.8rem; letter-spacing: 0.16em; }
}

/* With the custom player running, buttons wait for their moment, then fade up.
   Hidden from first paint (html.js is set in <head>) so they never flash on load.
   Without JavaScript (or with no video file yet) they're simply always visible. */
.js .zen-video[data-zen-video] .zen-video__cta:not(.zen-video__cta--persistent) {
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
}
.js .zen-video[data-zen-video].is-cta-visible .zen-video__cta:not(.zen-video__cta--persistent) {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.8s ease, transform 0.8s ease, visibility 0s;
}

/* Landing pages: always-visible booking button that glows at the narration cue */
.zen-video__cta--persistent { flex-direction: column; }
.zen-video__cta-note {
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--text-faint);
}
.zen-video.is-cta-visible .zen-video__cta--persistent .btn {
	animation: zen-cta-glow 1.6s ease-in-out 3;
}
@keyframes zen-cta-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(30, 144, 255, 0); transform: none; }
	50%      { box-shadow: 0 0 0 10px rgba(30, 144, 255, 0.25), 0 0 40px rgba(126, 211, 33, 0.45); transform: scale(1.04); }
}

/* Full screen covers the whole player, so the buttons are still there */
.zen-video:fullscreen {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: none;
	padding: 24px;
	background: var(--zen-black);
}
.zen-video:fullscreen .zen-video__frame {
	align-self: center;
	height: calc(100vh - 140px);
	width: auto;
	max-width: 100%;
	border-radius: 0;
}

/* ==========================================================================
   Homepage and shared content sections
   ========================================================================== */

/* Readable text column. On a .container it limits the line length but keeps the
   same left edge as every other section. */
.prose { max-width: 760px; }
.container.prose { max-width: var(--max-width); }
.container.prose > * { max-width: 760px; }
.prose--center { margin-inline: auto; text-align: center; }
.prose--center .gradient-rule { margin-inline: auto; }
.prose p { color: var(--text-soft); }

.lead {
	font-size: 1.15rem;
	line-height: 1.6;
	color: var(--zen-white) !important;
}

/* Short standalone lines that carry the emotional beat */
.statement {
	margin-block: 1.6em !important;
	font-size: clamp(1.2rem, 4vw, 1.5rem);
	font-weight: 500;
	line-height: 1.45;
	color: var(--zen-white) !important;
}

.statement--gradient,
.hero__title-accent {
	background: var(--zen-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
}

.pull-quote {
	margin: 1.8em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid;
	border-image: var(--zen-gradient) 1;
	font-size: clamp(1.35rem, 4.6vw, 1.9rem);
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: var(--zen-white);
}

/* ---------- Hero ---------- */
.hero {
	padding-block: 48px 64px;
	text-align: center;
	background:
		radial-gradient(ellipse 80% 50% at 50% 0%, rgba(30, 144, 255, 0.16) 0%, transparent 70%),
		radial-gradient(ellipse 60% 40% at 80% 60%, rgba(126, 211, 33, 0.07) 0%, transparent 70%),
		var(--zen-near-black);
}

.hero__title {
	font-size: clamp(1.55rem, 6.4vw, 3.3rem);
	line-height: 1.25;
	letter-spacing: 0.08em;
}
.hero__title-accent { display: block; margin-top: 0.3em; }

.hero__lede {
	max-width: 640px;
	margin: 14px auto 0;
	color: var(--text-soft);
}


@media (min-width: 900px) {
	.hero { padding-block: 88px 104px; }
	.hero__title { letter-spacing: var(--track-headline); }
	.hero__lede { font-size: 1.1rem; }
}

/* ---------- Homepage hero (background image, copy in the left half) ----------
   Phones: the image fills the whole hero, the copy sits at the top over a dark fade, and the
   lab screen shows through below it. 900px and up: copy on the left, screen on the right. */
.home-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: flex-start;
	min-height: calc(100svh - 110px);
	padding-block: 40px 0;
	background: var(--zen-near-black);
}

/* Phones: the image is anchored to the bottom of the hero so the lab screen lands under the
   button instead of behind the paragraph. */
.home-hero__bg {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -2;
	width: 100%;
	height: 520px;
	object-fit: cover;
	object-position: 74% 50%; /* keep the screen in frame on narrow screens */
}

/* Dark fade behind the copy so it stays readable; clears toward the bottom so the screen shows */
.home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg,
		rgba(5, 7, 13, 1) 0%,
		rgba(5, 7, 13, 0.94) 48%,
		rgba(5, 7, 13, 0.55) 64%,
		rgba(5, 7, 13, 0) 80%,
		rgba(5, 7, 13, 0.35) 100%);
}

.home-hero__inner { position: relative; }
.home-hero__copy { max-width: 560px; padding-bottom: 300px; /* room for the screen to show */ }

.home-hero__h1 {
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.5;
	color: var(--zen-white);
}

.home-hero__headline {
	margin-top: 18px;
	font-size: clamp(1.75rem, 7.4vw, 3.4rem);
	font-weight: 300;
	letter-spacing: 0.08em;
	line-height: 1.2;
	color: var(--zen-white);
}

.home-hero__body {
	margin-top: 20px;
	font-size: 1.02rem;
	line-height: 1.7;
	color: var(--zen-white);
}

/* Brand highlight words: .hl = brand blue #1E90FF, .hl--green = brand green #7ED321 */
.home-hero .hl { color: var(--zen-blue); }
.home-hero .hl.hl--green { color: var(--zen-green); }

.btn--play {
	gap: 12px;
	margin-top: 28px;
	padding: 14px 30px 14px 24px;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
}
.btn--play__icon { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }

/* ---------- Video pop-up (lightbox) ----------
   A native <dialog>: the browser handles the backdrop, Esc, and keeping keyboard focus inside.
   Phones: fills the screen. Desktop: the video is large and centered. */
.video-lightbox {
	width: 100vw;
	max-width: none;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--text);
	overflow: hidden;
}
.video-lightbox[open] {
	display: flex;
	align-items: center;
	justify-content: center;
	animation: zen-lightbox-in 0.3s ease;
}
.video-lightbox::backdrop {
	background: rgba(2, 4, 10, 0.94);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
@keyframes zen-lightbox-in {
	from { opacity: 0; transform: scale(0.97); }
	to   { opacity: 1; transform: none; }
}
html:has(.video-lightbox[open]) { overflow: hidden; } /* page behind doesn't scroll */

.video-lightbox__inner { width: 100%; }
.video-lightbox .zen-video { max-width: none; }
.video-lightbox .zen-video__frame { border-radius: 0; box-shadow: none; }
.video-lightbox .zen-video__cta { padding-inline: var(--gutter); }

.video-lightbox__close {
	position: absolute;
	top: max(12px, env(safe-area-inset-top));
	right: 12px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: var(--zen-white);
	cursor: pointer;
	transition: background 0.2s ease;
}
.video-lightbox__close:hover { background: rgba(255, 255, 255, 0.2); }
.video-lightbox__close svg { width: 24px; height: 24px; }

/* Chronic Fatigue: the pop-up opens BELOW the sticky header (header z-index 100), so the header's
   booking button stays visible for the narration "Click the button at the top of this page…".
   main.js sets --zen-header-h. It's a non-modal dialog, so it has no ::backdrop: the panel itself is dark. */
.video-lightbox--under-header {
	position: fixed;
	inset: var(--zen-header-h, 64px) 0 0 0;
	z-index: 99;
	height: auto;
	background: rgba(2, 4, 10, 0.96);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.video-lightbox--under-header .video-lightbox__close { top: 12px; }
.video-lightbox--under-header[open] { animation: zen-fade-in 0.3s ease; } /* fade only: no gap under the header */
@keyframes zen-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 900px) {
	/* As big as fits between the header and the bottom of the screen (no buttons under this video) */
	.video-lightbox--under-header .video-lightbox__inner { width: min(1200px, 90vw, calc((100dvh - var(--zen-header-h, 84px) - 96px) * 16 / 9)); }
}

/* At the cue, the header's booking button glows (3 pulses), like the landing-page button used to.
   The phone bar is full width, so it glows without growing (growing would push past the screen edge). */
.is-header-cta-glow .site-header__cta .btn {
	animation: zen-cta-glow 1.6s ease-in-out 3;
}
.is-header-cta-glow .site-header__cta-bar .btn--bar {
	animation: zen-cta-glow-bar 1.6s ease-in-out 3;
}
@keyframes zen-cta-glow-bar {
	0%, 100% { box-shadow: none; filter: none; }
	50%      { box-shadow: 0 0 28px rgba(126, 211, 33, 0.6), inset 0 0 0 2px rgba(255, 255, 255, 0.55); filter: brightness(1.15); }
}

/* ---------- Request form pop-up ----------
   Same native <dialog> pattern as the video pop-up. Phones: fills the screen.
   Desktop: a centered panel. The form scrolls inside the panel; the page behind doesn't move.
   The X sits in its own bar above the form so it never covers a field. */
.form-lightbox {
	width: 100vw;
	max-width: none;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--text);
	overflow: hidden;
}
.form-lightbox[open] {
	display: flex;
	align-items: center;
	justify-content: center;
	animation: zen-lightbox-in 0.3s ease;
}
.form-lightbox::backdrop {
	background: rgba(2, 4, 10, 0.94);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
html:has(.form-lightbox[open]) { overflow: hidden; }

.form-lightbox__panel {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background: var(--zen-midnight);
}
.form-lightbox__bar {
	display: flex;
	justify-content: flex-end;
	flex-shrink: 0;
	padding: max(8px, env(safe-area-inset-top)) 8px 8px;
	border-bottom: 1px solid var(--rule);
}
.form-lightbox__close {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: var(--zen-white);
	cursor: pointer;
	transition: background 0.2s ease;
}
.form-lightbox__close:hover { background: rgba(255, 255, 255, 0.2); }
.form-lightbox__close svg { width: 24px; height: 24px; }
.form-lightbox__body {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 16px var(--gutter) max(24px, env(safe-area-inset-bottom));
}
.form-lightbox__body iframe { display: block; width: 100%; border: 0; }

@media (min-width: 768px) {
	.form-lightbox__panel {
		width: min(680px, calc(100vw - 80px));
		height: auto;
		max-height: calc(100dvh - 80px);
		border: 1px solid var(--rule);
		border-radius: 16px;
		overflow: hidden;
		box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
	}
	.form-lightbox__body { min-height: 360px; }
}

@media (min-width: 900px) {
	.home-hero {
		align-items: center;
		min-height: min(calc(100vh - 85px), 760px);
		padding-block: 80px;
	}
	.home-hero__bg { top: 0; height: 100%; object-position: 100% 50%; }
	.home-hero::before {
		background: linear-gradient(90deg,
			rgba(5, 7, 13, 0.94) 0%,
			rgba(5, 7, 13, 0.82) 34%,
			rgba(5, 7, 13, 0.25) 56%,
			rgba(5, 7, 13, 0) 70%);
	}
	.home-hero__copy { width: 50%; max-width: 580px; padding-bottom: 0; }
	.home-hero__h1 { font-size: 1.05rem; }
	.home-hero__headline { font-size: clamp(2.4rem, 3.6vw, 3.4rem); letter-spacing: var(--track-headline); }
	.home-hero__body { font-size: 1.1rem; }
	/* Desktop pop-up: as large as fits, leaving room for the buttons under the video */
	.video-lightbox__inner { width: min(1200px, 90vw, calc((100dvh - 200px) * 16 / 9)); }
	.video-lightbox .zen-video__frame { border-radius: 14px; box-shadow: 0 0 0 1px var(--rule), 0 40px 120px rgba(0, 0, 0, 0.7); }
	.video-lightbox .zen-video__cta { padding-inline: 0; }
	.video-lightbox__close { top: 20px; right: 24px; width: 52px; height: 52px; }
}

/* ---------- Numbered lists (typographic, no icons) ---------- */
.numbered-list {
	display: grid;
	gap: 0;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.numbered-list__item {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 16px;
	align-items: baseline;
	padding: 24px 0;
	border-top: 1px solid var(--rule);
}
.numbered-list__item:last-child { border-bottom: 1px solid var(--rule); }

.numbered-list__num {
	font-size: 2.2rem;
	font-weight: 300;
	line-height: 1;
	letter-spacing: 0.04em;
	background: var(--zen-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.numbered-list__title {
	font-size: 1.1rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--zen-white);
}
.numbered-list__item p { margin-top: 6px; color: var(--text-soft); }

@media (min-width: 900px) {
	.numbered-list__item { grid-template-columns: 96px 1fr; padding: 28px 0; }
	.numbered-list__num { font-size: 3rem; }
	.numbered-list--grid { grid-template-columns: 1fr 1fr; column-gap: 56px; }
	.numbered-list--grid .numbered-list__item:nth-last-child(2) { border-bottom: 1px solid var(--rule); }
}

.closing-line {
	max-width: 760px;
	margin-top: 36px;
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--zen-white);
}

.insurance-note {
	display: inline-block;
	margin-top: 36px;
	padding: 14px 22px;
	border: 1px solid rgba(127, 219, 255, 0.35);
	border-radius: 12px;
	font-weight: 500;
	color: var(--zen-cyan);
}

/* ---------- Team ---------- */
.team {
	display: grid;
	gap: 64px;
}
.team__member { display: grid; gap: 28px; align-content: start; }

/* Both headshots: same dark slate background, same 4:5 crop, same frame */
.team__photo {
	width: 100%;
	max-width: 360px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 15%;
	border-radius: 14px;
	background: #1B2530;
	box-shadow: 0 0 0 1px var(--rule), 0 24px 60px rgba(0, 0, 0, 0.5);
}
.team__body p { color: var(--text-soft); }

/* Homepage staff photos: both in the same 3:4 rounded frame at identical size (photos are pre-matched 3:4) */
.team__photo--staff { aspect-ratio: 3 / 4; object-position: 50% 50%; }

@media (min-width: 900px) {
	.team { grid-template-columns: 1fr 1fr; gap: 72px; }
	.team__photo { max-width: none; }
}

/* ---------- Brain Fog / Chronic Fatigue choice cards ---------- */
.path-cards {
	display: grid;
	gap: 24px;
	margin-top: 40px;
}

.path-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 14px;
	background: var(--zen-near-black);
	box-shadow: 0 0 0 1px var(--rule);
	color: inherit;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.path-card:hover {
	color: inherit;
	transform: translateY(-4px);
	box-shadow: 0 0 0 1px rgba(30, 144, 255, 0.5), 0 24px 60px rgba(0, 0, 0, 0.5);
}

.path-card__image {
	aspect-ratio: 16 / 10;
	background: radial-gradient(ellipse at 50% 40%, var(--zen-midnight), var(--zen-near-black));
}
.path-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
	transition: transform 0.6s ease;
}
.path-card:hover .path-card__image img { transform: scale(1.03); }
.path-card__image { overflow: hidden; }
.path-card__image--placeholder {
	display: grid;
	place-items: center;
	padding: 16px;
	text-align: center;
}

.path-card__body { padding: 28px 24px 32px; }
.path-card__body h3 { font-size: 1.3rem; letter-spacing: 0.1em; }
.path-card__body p { margin-top: 12px; color: var(--text-soft); }

.path-card__link {
	display: inline-block;
	margin-top: 20px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--zen-cyan);
}

@media (min-width: 800px) {
	.path-cards { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ---------- FAQ accordion (native <details>, works without JavaScript) ---------- */
.faq { margin-top: 32px; border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }

.faq__question {
	position: relative;
	padding: 22px 44px 22px 0;
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--zen-white);
	cursor: pointer;
	list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }

/* Plus that turns into a minus */
.faq__question::before,
.faq__question::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	width: 16px;
	height: 2px;
	background: var(--zen-cyan);
	transition: transform 0.25s ease;
}
.faq__question::after { transform: rotate(90deg); }
.faq__item[open] .faq__question::after { transform: rotate(0deg); }

.faq__answer { padding: 0 0 24px; }
.faq__answer p { color: var(--text-soft); }

/* ---------- Closing booking section ---------- */
.cta-section.section--midnight {
	background:
		radial-gradient(ellipse 70% 60% at 50% 0%, rgba(30, 144, 255, 0.18) 0%, transparent 70%),
		radial-gradient(ellipse 50% 40% at 50% 100%, rgba(126, 211, 33, 0.08) 0%, transparent 70%),
		var(--zen-near-black);
	border-top: 1px solid var(--rule);
}
.cta-section__actions {
	display: grid;
	justify-items: center;
	gap: 18px;
	margin-top: 32px;
}
.cta-section__phone { font-size: 1.1rem; }

.cta-section__details {
	display: grid;
	gap: 40px;
	max-width: 760px;
	margin: 64px auto 0;
	padding-top: 40px;
	border-top: 1px solid var(--rule);
	color: var(--text-soft);
}
.cta-section__details .eyebrow { margin-bottom: 14px; }

@media (min-width: 700px) {
	.cta-section__details { grid-template-columns: 1fr 1.3fr; gap: 56px; }
}

/* ==========================================================================
   Landing pages (Brain Fog, Chronic Fatigue): template-parts/landing.php
   ========================================================================== */
.hero__title-line { display: block; }
.landing-hero .hero__title-accent { margin-top: 0.15em; }
.hero__lede--landing { max-width: 680px; margin-top: 22px; font-size: 1.05rem; }

@media (min-width: 900px) {
	.hero__lede--landing { font-size: 1.15rem; }
}

/* ---------- Landing-page hero image (JT's desktop + mobile versions, switch at 768px) ----------
   Phones: headline first on the dark background, then the image below it. The image's top edge
   fades in and slides up under the text only as far as the dark part of that image allows
   (--hero-overlap per page), so the headline never covers the brain / figure.
   768px and up: image fills the hero, subject on the right, headline in the dark left side. */
.landing-hero {
	--hero-overlap: 0px;
	--hero-fade: 48px;
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	background: var(--zen-near-black);
	overflow: hidden;
}
.landing-hero--brain-fog { --hero-overlap: 110px; --hero-fade: 140px; } /* brain starts ~34% down its image */
.landing-hero--chronic-fatigue { --hero-overlap: 0px; --hero-fade: 28px; } /* battery screen starts ~5% down */

.landing-hero__inner { order: 1; position: relative; z-index: 1; padding-block: 40px 20px; }
.landing-hero__media { order: 2; display: block; margin-top: calc(-1 * var(--hero-overlap)); }
.landing-hero__media img {
	width: 100%;
	height: auto;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--hero-fade));
	mask-image: linear-gradient(to bottom, transparent 0, #000 var(--hero-fade));
}
.landing-hero__copy { max-width: 620px; }

@media (min-width: 768px) {
	.landing-hero {
		display: grid;
		align-items: center;
		min-height: clamp(460px, 50.5vw, 760px); /* about the images' own shape, so little is cropped */
	}
	.landing-hero__media {
		position: absolute;
		inset: 0;
		z-index: -1;
		margin: 0;
	}
	.landing-hero__media img {
		height: 100%;
		object-fit: cover;
		object-position: 85% 50%; /* keep the subject in frame when the sides crop */
		-webkit-mask-image: none;
		mask-image: none;
	}
	/* dark fade behind the headline on the left */
	.landing-hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(5, 7, 13, 0.9) 0%, rgba(5, 7, 13, 0.7) 32%, rgba(5, 7, 13, 0) 56%);
	}
	.landing-hero__inner { padding-block: 64px; }
	.landing-hero__copy { max-width: min(44%, 560px); }
	/* scale the headline with the width so it stays in the dark left side on tablets */
	.landing-hero .hero__title { font-size: clamp(1.5rem, 3.6vw, 3.3rem); letter-spacing: 0.12em; }
}
@media (min-width: 1100px) {
	.landing-hero .hero__title { letter-spacing: var(--track-headline); }
}
/* Inner-page photo heroes (template-parts/page-hero.php with 'image'; JT, 2026-11-02): Contact anchors its photo
   to the right edge so the intro line clears the person at the desk on tablets. */
@media (min-width: 768px) {
	.landing-hero--contact .landing-hero__media img { object-position: 100% 50%; }
}
/* About (phones): Dr. Arnett's hair starts near the photo's top edge, so no top fade there */
.landing-hero--about { --hero-fade: 0px; }

/* ---------- Chronic Fatigue hero only (JT, 2026-10-05) ----------
   Highlight words (set in page-chronic-fatigue.php): lead-in in brand green like the homepage,
   "Energy" / "Patients" in brand blue.
   Headline about 25% smaller than the shared landing size at every width. line-height and the
   em-based gaps are relative to the font size, so they shrink with it; the fixed gaps are cut by 25%. */
.landing-hero--chronic-fatigue .hl { color: var(--zen-blue); }
.landing-hero--chronic-fatigue .hl.hl--green { color: var(--zen-green); }
.landing-hero--chronic-fatigue .hero__title { font-size: clamp(1.16rem, 4.8vw, 2.48rem); } /* was clamp(1.55rem, 6.4vw, 3.3rem) */
.landing-hero--chronic-fatigue .home-hero__h1 + .hero__title { margin-top: 14px; }       /* was 18px */
.landing-hero--chronic-fatigue .hero__lede--landing { margin-top: 16px; }                /* was 22px */
@media (min-width: 768px) {
	.landing-hero--chronic-fatigue .hero__title { font-size: clamp(1.125rem, 2.7vw, 2.48rem); } /* was clamp(1.5rem, 3.6vw, 3.3rem) */
}
/* Large screens (JT, 2026-10-06): exactly three lines, one sentence each, never wrapping.
   The headline gets its own wider column (wider than the lead-in and paragraph), and its size is set
   so the longest line, "It's What Our Patients Tell Us Most.", ends at least 40px before the figure
   in the hero image at every width (measured 1100–2560px). Below 1100px it wraps as before. */
@media (min-width: 1100px) {
	.landing-hero--chronic-fatigue .hero__title {
		width: max-content;
		font-size: min(calc(0.95rem + 1.05vw), 2.48rem);
	}
	.landing-hero--chronic-fatigue .hero__title-line,
	.landing-hero--chronic-fatigue .hero__title-accent { white-space: nowrap; }
	/* The lead-in line ("Functional Medicine for Chronic Fatigue in Dallas, Texas") on one line too (JT). */
	.landing-hero--chronic-fatigue .home-hero__h1 { width: max-content; white-space: nowrap; }
	/* The long line reaches about 65% of the width, past the shared fade (gone by 56%), where a bright
	   light pillar sits in the photo. Darker for longer here, fully clear by 64%; the figure starts at
	   about 67.6% at every width measured, so it is never shaded. */
	.landing-hero--chronic-fatigue .landing-hero__media::after {
		background: linear-gradient(90deg, rgba(5, 7, 13, 0.9) 0%, rgba(5, 7, 13, 0.78) 36%, rgba(5, 7, 13, 0.6) 52%, rgba(5, 7, 13, 0) 64%);
	}
}

/* Landing "What's actually happening": blurred lab photo under a dark overlay (all widths;
   the photos are made evenly dark so text can sit anywhere) */
.section--photo-bg {
	background:
		linear-gradient(180deg, rgba(5, 7, 13, 0.72) 0%, rgba(5, 7, 13, 0.62) 50%, rgba(5, 7, 13, 0.8) 100%),
		var(--section-bg-sm, none) center / cover no-repeat,
		var(--zen-near-black);
}
@media (min-width: 1300px) {
	.section--photo-bg {
		background:
			linear-gradient(180deg, rgba(5, 7, 13, 0.72) 0%, rgba(5, 7, 13, 0.62) 50%, rgba(5, 7, 13, 0.8) 100%),
			var(--section-bg, none) center / cover no-repeat,
			var(--zen-near-black);
	}
}
.section--photo-bg .info-block { border-top-color: rgba(255, 255, 255, 0.16); }

/* Portrait photos on phones: 4:5 instead of 4:3 so faces aren't cropped off */
@media (max-width: 899px) {
	.split__media.split__media--tall-mobile { aspect-ratio: 4 / 5; }
}

/* STEP list inside the narrower text column of a split section */
@media (min-width: 900px) {
	.steps--in-split .steps__item { grid-template-columns: 120px 1fr; column-gap: 24px; padding: 28px 0; }
}

/* Landing hero buttons: Watch the Video (gradient) + booking (outline). Full width on phones. */
.landing-hero__actions { display: grid; gap: 12px; margin-top: 28px; }
.landing-hero__actions .btn { width: 100%; }
.landing-hero__actions .btn--play { margin-top: 0; }
.landing-hero__note {
	margin-top: 14px;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--text-faint);
}
@media (min-width: 560px) {
	.landing-hero__actions { display: flex; flex-wrap: wrap; }
	.landing-hero__actions .btn { width: auto; }
}

/* Steps with body text and a card grid (landing "We test" / "We build a plan") */
.steps__body > p:not(.insurance-note):not(.closing-line) { margin-top: 10px; color: var(--text-soft); } /* direct text only, so the homepage components keep their own colors */


/* Tap-to-call words inside copy ("Give us a call") */
.inline-call { color: var(--zen-cyan); text-decoration: underline; text-underline-offset: 3px; }

/* Landing closing section: near-black with a soft brand glow (the FAQ above is midnight) */
.cta-section.cta-section--landing {
	background:
		radial-gradient(ellipse 60% 70% at 85% 30%, rgba(30, 144, 255, 0.14) 0%, transparent 70%),
		radial-gradient(ellipse 50% 50% at 10% 100%, rgba(126, 211, 33, 0.06) 0%, transparent 70%),
		var(--zen-near-black);
}
.cta-section--landing .cta-section__actions { justify-items: start; }
.cta-section__after { margin-top: 20px !important; }

/* "Does this sound familiar?" lines */
.familiar {
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}
.familiar li {
	position: relative;
	padding: 16px 0 16px 28px;
	border-bottom: 1px solid var(--rule);
	font-size: 1.08rem;
	line-height: 1.55;
	color: var(--zen-white);
}
.familiar li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.55em;
	width: 14px;
	height: 2px;
	background: var(--zen-gradient);
}

/* Titled info blocks (Brain Fog section 2) */
.info-blocks {
	display: grid;
	gap: 0;
	margin-top: 16px;
}
.info-block {
	padding: 28px 0;
	border-top: 1px solid var(--rule);
}
.info-block h3 {
	font-size: 1.15rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--zen-white);
}
.info-block p { margin-top: 10px; color: var(--text-soft); }

@media (min-width: 900px) {
	.info-blocks { grid-template-columns: 1fr 1fr; column-gap: 56px; }
	.info-block:last-child { grid-column: 1 / -1; max-width: calc(50% - 28px); }
}

/* STEP #1 … STEP #5 (typographic, no icons) */
.steps {
	display: grid;
	gap: 0;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}
.steps__item {
	padding: 32px 0;
	border-top: 1px solid var(--rule);
}
.steps__item:last-child { border-bottom: 1px solid var(--rule); }

.steps__label {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	background: var(--zen-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.steps__title {
	margin-top: 10px;
	font-size: clamp(1.15rem, 3.6vw, 1.45rem);
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.35;
	color: var(--zen-white);
}
.steps__item p { margin-top: 10px; max-width: 680px; color: var(--text-soft); }

@media (min-width: 900px) {
	.steps__item {
		display: grid;
		grid-template-columns: 180px 1fr;
		column-gap: 40px;
		padding: 40px 0;
	}
	.steps__label { grid-row: span 2; font-size: 0.9rem; padding-top: 6px; }
	.steps__title { margin-top: 0; }
}

/* ==========================================================================
   Inner pages (About, Contact, Advanced Testing, IV Therapy, Peptides)
   ========================================================================== */
.hero--page {
	position: relative;
	overflow: hidden;
	padding-block: 64px 72px;
}
/* Decorative lotus glow behind the headline */
.hero--page__lotus {
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(520px, 110vw);
	transform: translate(-50%, -50%);
	opacity: 0.22;
	pointer-events: none;
}
.hero--page .hero__inner { position: relative; }
.hero--page .gradient-rule { margin-inline: auto; }
.hero__lede--page { font-size: 1.1rem; color: var(--zen-white); }
.hero__actions { margin-top: 32px; }

@media (min-width: 900px) {
	.hero--page { padding-block: 104px 112px; }
	.hero__lede--page { font-size: 1.25rem; }
}

.inline-action { margin-top: 24px !important; font-size: 1.1rem; }

/* Outline button (secondary action next to the gradient booking button) */
.btn--outline {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--zen-cyan);
	color: var(--zen-white);
}
.btn--outline:hover {
	background: rgba(127, 219, 255, 0.08);
	box-shadow: inset 0 0 0 1.5px var(--zen-cyan), 0 10px 30px rgba(30, 144, 255, 0.25);
}

/* About: team names are H3 under the "Meet Our Team" H2 */
.team--about { margin-top: 40px; }
.team__name {
	font-size: clamp(1.3rem, 4vw, 1.7rem);
	letter-spacing: 0.1em;
	margin-bottom: 16px;
}
.team__name .placeholder { margin-top: 8px; font-size: 0.55em; letter-spacing: normal; vertical-align: middle; }

/* Contact: two action cards */
.contact-grid { display: grid; gap: 24px; }
.contact-card {
	padding: 32px 24px;
	border-radius: 14px;
	background: var(--zen-near-black);
	box-shadow: 0 0 0 1px var(--rule);
}
.contact-card h2 { font-size: clamp(1.2rem, 4vw, 1.6rem); }
.contact-card p { color: var(--text-soft); }
.contact-card__action { margin-top: 24px; }
.contact-card__action .btn { width: 100%; }

@media (min-width: 900px) {
	.contact-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
	.contact-card { display: flex; flex-direction: column; padding: 44px 40px; }
	.contact-card__action { margin-top: auto; padding-top: 28px; }
	.contact-card__action .btn { width: auto; }
}

/* Contact: address + map */
.visit { display: grid; gap: 36px; }
.address--large { font-size: 1.15rem; color: var(--zen-white); }
.visit__directions-link { margin-top: 16px; }
.visit__parking { margin-top: 20px; }
.visit__map {
	overflow: hidden;
	border-radius: 14px;
	box-shadow: 0 0 0 1px var(--rule);
	aspect-ratio: 4 / 3;
	background: var(--zen-midnight);
}
.visit__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	/* Tone Google's bright map down to sit on the dark page */
	filter: invert(0.9) hue-rotate(180deg) saturate(0.6) brightness(0.95);
}

@media (min-width: 900px) {
	.visit { grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: center; }
}

.hours-wrap { max-width: 460px; margin-top: 8px; }

/* ==========================================================================
   Two-column image + text sections (homepage): text about 60%, image about 40%, sides alternate.
   Phones: image stacks above the text, full width, 4:3.
   ========================================================================== */
.split {
	display: grid;
	gap: 32px;
}
.split__media {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 14px; /* same as the homepage cards */
	background: var(--zen-midnight);
	box-shadow: 0 0 0 1px var(--rule), 0 24px 60px rgba(0, 0, 0, 0.45);
}
.split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.split__text { min-width: 0; }
.split__text .gradient-rule { margin-inline: 0; }

@media (min-width: 900px) {
	.split {
		grid-template-columns: 4fr 6fr;
		gap: 72px;
		align-items: center;
	}
	.split--media-right { grid-template-columns: 6fr 4fr; }
	.split--media-right .split__media { order: 2; }

	/* Different image shapes per section keep the section heights from all matching */
	.split__media--portrait  { aspect-ratio: 4 / 5; }
	.split__media--square    { aspect-ratio: 1 / 1; }
	.split__media--landscape { aspect-ratio: 4 / 3; }

	/* Long sections: the image stays in view while the text scrolls past */
	.split--sticky { align-items: start; }
	.split--sticky .split__media { position: sticky; top: 124px; }
}

/* Section height variety */
.section--pad-s { padding-block: 56px; }
.section--pad-l { padding-block: 88px; }
@media (min-width: 900px) {
	.section--pad-s { padding-block: 88px; }
	.section--pad-l { padding-block: 160px; }
}

/* Homepage closing section: midnight tone (alternates with the FAQ above), text left-aligned */
.cta-section.cta-section--home {
	background:
		radial-gradient(ellipse 60% 70% at 85% 30%, rgba(30, 144, 255, 0.14) 0%, transparent 70%),
		radial-gradient(ellipse 50% 50% at 10% 100%, rgba(126, 211, 33, 0.06) 0%, transparent 70%),
		var(--zen-midnight);
}
.cta-section--home .cta-section__actions { justify-items: start; }
.cta-section__details--left { max-width: none; margin: 48px 0 0; }

/* ==========================================================================
   Stacking scroll effect (reusable): add .stack-section to consecutive <section>s.
   Each section scrolls normally until its BOTTOM reaches the bottom of the screen, then pins,
   and the next section slides up over it. Tall sections stay fully readable because they
   only pin once their last line is on screen. assets/js/main.js sets --stack-top per section.
   Off for people who ask their device to reduce motion.
   ========================================================================== */
:where(.stack-section) { background-color: var(--zen-near-black); } /* opaque; tinted sections keep their own color */
@media (prefers-reduced-motion: no-preference) {
	.stack-section {
		position: sticky;
		top: var(--stack-top, 0px);
	}
	.stack-section + .stack-section { box-shadow: 0 -28px 56px rgba(0, 0, 0, 0.5); }
}

/* Tighter vertical spacing (Treatment and Testing card sections) */
.section--tight { padding-block: 48px; }
@media (min-width: 900px) { .section--tight { padding-block: 72px; } }
.section--tight .closing-line,
.section--tight .insurance-note { margin-top: 24px; }

/* ==========================================================================
   Card grid with thin rules (homepage Treatment and Testing). Icon left, title + 2-line text right.
   ========================================================================== */
.card-grid {
	display: grid;
	grid-template-columns: 1fr;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--rule);
	border-left: 1px solid var(--rule);
}
.card-grid__item {
	display: grid;
	grid-template-columns: 36px 1fr;
	column-gap: 16px;
	align-content: start;
	padding: 22px 20px;
	border-right: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}
.card-grid__item .card-icon {
	grid-row: span 2;
	width: 28px;
	height: 28px;
	margin-top: 2px;
	color: var(--zen-blue);   /* brand blue #1E90FF (JT) */
	stroke-width: 1.5;        /* thin-line */
}
.card-grid__title {
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.35;
	color: var(--zen-white);
}
.card-grid__item p {
	margin-top: 6px;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--text-soft);
}
/* No-icon cards: title and text use the full card width */
.card-grid--no-icons .card-grid__item { grid-template-columns: 1fr; }

/* Roman numeral card markers: large, light Montserrat in brand blue, set as type (not an icon),
   sitting above the title. Same typographic treatment family as the "STEP #1" labels. */
.card-grid__numeral {
	display: block;
	margin-bottom: 12px;
	font-size: 2.4rem;
	font-weight: 400;       /* a touch heavier so "II" / "III" read as numerals, not thin bars */
	line-height: 1;
	letter-spacing: 0.02em; /* tight, so each numeral reads as one unit */
	color: var(--zen-blue); /* #1E90FF */
}
@media (min-width: 900px) {
	.card-grid__numeral { font-size: 3rem; margin-bottom: 14px; }
}

@media (min-width: 760px) {
	.card-grid { grid-template-columns: 1fr 1fr; }
	/* an odd last card spans the full row so the grid stays closed */
	.card-grid__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
	.card-grid__item { padding: 26px 28px; grid-template-columns: 40px 1fr; }
	.card-grid__item .card-icon { width: 30px; height: 30px; }
}

/* ==========================================================================
   Brain Fog / Chronic Fatigue section background
   Phones: plain dark gradient (no image download). Desktop: lab photo under a dark overlay.
   ========================================================================== */
.section--two-card {
	background: linear-gradient(180deg, var(--zen-midnight) 0%, var(--zen-near-black) 100%);
}
@media (min-width: 900px) {
	.section--two-card {
		background:
			linear-gradient(180deg, rgba(5, 7, 13, 0.62) 0%, rgba(5, 7, 13, 0.78) 60%, rgba(5, 7, 13, 0.9) 100%),
			url("../img/two-card-bg-1717.webp?v=2") center / cover no-repeat,
			var(--zen-near-black);
	}
}

/* ==========================================================================
   FAQ: single centered column, max 800px, one question open at a time
   ========================================================================== */
.faq-wrap { max-width: 800px; }
.faq-wrap > h2 { text-align: center; }
.faq-wrap > .gradient-rule { margin-inline: auto; }

/* ==========================================================================
   Tap targets: every standalone link is at least 44px tall on phones
   ========================================================================== */
.footer-links a,
.legal-links a,
.phone-link,
.visit__directions-link a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.footer-links a { padding: 0; }
.site-footer__phone { margin: 4px 0 16px; }

/* ==========================================================================
   Page stubs (pages whose real content isn't built yet)
   ========================================================================== */
.page-stub { min-height: 60vh; }
.page-stub__note { margin-top: 20px; }

/* ---------- Temporary holding page (replaced as pages are built) ---------- */
.holding {
	min-height: 70vh;
	display: grid;
	place-items: center;
	padding-block: var(--section-pad);
	text-align: center;
	background: radial-gradient(ellipse at 50% 35%, var(--zen-midnight) 0%, var(--zen-near-black) 70%);
}

.holding__lotus { width: 140px; margin: 40px auto 0; }

/* lotus-glow is a JPEG on near-black, not a transparent PNG. Screen blend drops the black,
   and the radial fade hides the faint edge of the image box. Dark backgrounds only. */
.lotus-blend {
	mix-blend-mode: screen;
	-webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
	mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
}
.holding .gradient-rule { margin-inline: auto; }
.holding p { color: var(--text-soft); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Homepage components inside a landing-page step: keep their homepage spacing */
.steps__body .card-grid { margin-top: 20px; }
.steps__body .insurance-note { margin-top: 24px; }
.steps__body .closing-line { margin-top: 24px; font-size: 1.05rem; }
/* Landing hero lead-in (the page H1): same gap to the headline as the homepage */
.landing-hero .home-hero__h1 + .hero__title { margin-top: 18px; }

/* ==========================================================================
   Thank-you page (/request-received/, page-request-received.php)
   Phones: tight top spacing so the headline and video are on the first screen.
   ========================================================================== */
.thanks {
	padding-block: 40px 64px;
	background: radial-gradient(ellipse at 50% 0%, var(--zen-midnight) 0%, var(--zen-near-black) 70%);
	text-align: center;
}
.thanks__inner { max-width: 820px; }
.thanks__title { text-wrap: balance; }
.thanks .gradient-rule { margin: 20px auto; }
.thanks__lede { font-size: 1.1rem; color: var(--zen-white); }
.thanks__video { margin-top: 28px; }
.thanks__next {
	max-width: 640px;
	margin: 32px auto 0;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--text-soft);
}
.thanks__next strong { font-weight: 600; color: var(--zen-white); }
.thanks__phone { color: inherit; text-decoration: none; white-space: nowrap; }
.thanks__action { margin-top: 32px; }

@media (min-width: 900px) {
	.thanks { padding-block: 80px 112px; }
	.thanks__lede { font-size: 1.25rem; }
	.thanks__next { font-size: 1.15rem; }
}

/* ---------- Homepage revisions (2026-10-20) ----------
   Hero headline: each sentence on its own line (.home-hero__line). Under 540px it wraps naturally. */
.home-hero__line { display: block; }
@media (min-width: 540px) {
	.home-hero__line { white-space: nowrap; }
	.home-hero__headline { font-size: clamp(1.75rem, calc((100vw - 40px) / 17.6), 3.4rem); }
}
@media (min-width: 900px) {
	.home-hero__headline { font-size: calc(min(50vw - 40px, 550px) / 20.3); }
}
/* Section-headline highlight words in brand blue (homepage only) */
.home .hl { color: var(--zen-blue); }
/* Hero video button hidden for now. To bring it back, delete this rule. */
.home-hero .btn--play { display: none; }
/* Hero headline in bold (600 = SemiBold, the heaviest weight the site's font file loads) */
.home-hero__headline { font-weight: 600; }

/* ---------- Legal pages: Privacy Policy and Terms of Use (2026-10-22) ----------
   Text comes from inc/legal/*.html, printed by index.php. Everything is scoped to
   .legal-content, which only appears on those two pages. */
.legal-content {
	max-width: 760px;
	margin-top: 32px;
	color: var(--text-soft);
	font-size: 1rem;
	line-height: 1.75;
}
.legal-content .legal-effective-date { font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); }
.legal-content p { margin: 0 0 1em; }
.legal-content h2 {
	margin: 56px 0 18px;
	padding-top: 28px;
	border-top: 1px solid var(--rule);
	font-size: clamp(1.25rem, 3.6vw, 1.6rem);
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.35;
	color: var(--zen-white);
}
.legal-content h3 {
	margin: 32px 0 10px;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
	color: var(--zen-white);
}
.legal-content h2 + h3 { margin-top: 0; }
.legal-content ul {
	margin: 0 0 1.25em;
	padding-left: 1.5em;
	list-style: disc;
}
.legal-content li { margin-bottom: 0.45em; padding-left: 0.25em; }
.legal-content li::marker { color: var(--zen-blue); }
.legal-content strong { color: var(--zen-white); font-weight: 600; }
.legal-content a { color: var(--zen-blue); overflow-wrap: anywhere; }
.legal-content a:hover { color: var(--zen-white); }