/* Small additions theme.json can't express. Keep this lean. */

.eyebrow {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
body.admin-bar .site-header { top: 32px; }

.is-style-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 20px;
	padding: var(--wp--preset--spacing--40);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.is-style-card:hover {
	transform: translateY(-3px);
	border-color: transparent;
	box-shadow: var(--wp--preset--shadow--soft);
}
.is-style-card h3 a { color: inherit; text-decoration: none; }
.is-style-card h3 a::after { content: ""; position: absolute; inset: 0; }
.is-style-card { position: relative; }

/* No visible scrollbar anywhere on the site (scrolling still works), so nothing
   shifts sideways when the menu locks the page. */
html { scrollbar-width: none; }
/* Form controls use the site sans (browsers default them to Arial/system). */
input, textarea, select, button { font-family: inherit; font-weight: inherit; }
html::-webkit-scrollbar,
body::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Back to the list, on a condition page and a service page: a frosted pill fixed at the top left, level
   with the site bar (same height, glass and type), so it's always one click away. */
.back-pill {
	position: fixed;
	top: clamp(16px, 2.2vw, 32px);
	left: max(var(--gutter, 64px), calc((100vw - 1312px) / 2));
	z-index: 45; /* under the site bar and its menu */
	display: inline-flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	height: 48px;
	margin: 0;
	padding: 0 22px 0 18px;
	border: 0;
	border-radius: 76px;
	background: rgba(255, 255, 255, 0.16);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	box-shadow: 0 4px 16px rgba(29, 62, 93, 0.05);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: 14px;
	letter-spacing: 0.56px;
	color: var(--wp--preset--color--slate);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.35s ease;
}
.back-pill:hover, .back-pill:focus-visible { background: rgba(255, 255, 255, 0.45); }
.back-pill span { display: inline-block; transition: translate 0.35s var(--ease-out); }
.back-pill:hover span[aria-hidden] { translate: -3px 0; }
.back-pill .back-pill__short { display: none; } /* phones: "← Services" beside the menu pill (mobile block) */
.back-pill--phone { display: none; } /* articles: phones only (mobile block) */
.back-pill:focus { outline: none; }
.back-pill:focus-visible { outline: 2px solid var(--wp--preset--color--slate); outline-offset: -4px; }

/* Site bar (Figma 754:5078): one frosted pill, centred at the top, fixed above the
   story and the bottom blur. Left half opens the menu ("Dr. Hina"), right half is
   "Consultation"; an engraved divider (white + light blue hairlines) splits them. */
.site-bar {
	position: fixed;
	top: clamp(16px, 2.2vw, 32px);
	left: 50%;
	z-index: 50;
	display: flex;
	align-items: stretch;
	height: 48px;
	margin: 0;
	border-radius: 76px;
	background: rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	box-shadow: 0 4px 16px rgba(29, 62, 93, 0.05);
	transform: translateX(-50%);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.7;
	letter-spacing: 0.56px;
	color: var(--wp--preset--color--slate);
}
.site-bar__menu,
.site-bar__cta {
	display: flex;
	align-items: center;
	margin: 0;
	border: 0;
	background: none;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
.site-bar__menu {
	gap: 14px;
	padding: 0 18px 0 22px;
	border-radius: 76px 0 0 76px;
}
.site-bar__cta {
	position: relative;
	padding: 0 22px 0 16px;
	border-radius: 0 76px 76px 0;
}
/* "Dr. Hina" → "Menu" and "Consultation" → "Request" on hover: the letters roll
   up one after another (split in menu.js); the hover word sits under the label,
   left-aligned in the same space. */
.site-bar__roll {
	position: relative;
	display: inline-block;
	overflow: hidden;
	height: 1.7em;
	vertical-align: top;
}
.site-bar__roll-a,
.site-bar__roll-b {
	display: block;
	white-space: nowrap;
}
.site-bar__roll-b {
	position: absolute;
	top: 0;
	left: 0;
}
.site-bar__roll span span {
	display: inline-block;
	transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
	transition-delay: calc(var(--i) * 28ms);
}
.site-bar__roll-b span { transform: translateY(105%); }
.site-bar [data-view]:hover .site-bar__roll-a span,
.site-bar [data-view]:focus-visible .site-bar__roll-a span { transform: translateY(-105%); }
.site-bar [data-view]:hover .site-bar__roll-b span,
.site-bar [data-view]:focus-visible .site-bar__roll-b span { transform: none; }
@media (hover: none) {
	.site-bar__roll-b { display: none; }
	/* Touch screens keep :hover after a tap, which rolled the label away with nothing to replace it. */
	.site-bar [data-view] .site-bar__roll-a span { transform: none !important; }
}

/* Divider: a crease in the frosted pill, running its full height: a faint dark groove line with a light
   highlight beside it. */
.site-bar__cta::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -1px;
	width: 2px;
	background: linear-gradient(90deg, rgba(29, 62, 93, 0.12) 50%, rgba(255, 255, 255, 0.6) 50%);
}
/* Consultation's X: pops in beside the word while the form is open, identical to the menu's X (same bars, same 16px box, same 12px gap). */
.site-bar__x { position: relative; display: inline-block; flex: none; width: 0; height: 7px; margin-left: 0; opacity: 0; scale: 0.4; transition: width 0.4s var(--ease-out), margin 0.4s var(--ease-out), opacity 0.3s ease, scale 0.45s var(--ease-out); }
.site-bar__x::before,
.site-bar__x::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 1.5px; margin: -0.75px 0 0 -6.5px; border-radius: 24px; background: currentColor; } /* exactly the menu's X: 13px bars, 1.5px, round ends */
.site-bar__x::before { rotate: 45deg; }
.site-bar__x::after { rotate: -45deg; }
.site-bar__cta[aria-expanded="true"] .site-bar__x { width: 16px; margin-left: 12px; opacity: 1; scale: 1; transition-delay: 0.15s; }
/* Hamburger: two rounded bars (16 and 11px); they cross into an X while the menu is open (not the consultation form, where it stays a hamburger to open the menu). */
.site-bar__icon {
	position: relative;
	width: 16px;
	height: 7px;
	flex: none;
}
.site-bar__icon::before,
.site-bar__icon::after {
	content: "";
	position: absolute;
	left: 0;
	height: 1.5px;
	border-radius: 24px;
	background: currentColor;
	transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.site-bar__icon::before { top: 0; width: 16px; }
.site-bar__icon::after { bottom: 0; width: 11px; }
.site-bar__menu[aria-expanded="true"] .site-bar__icon::before { width: 13px; transform: translate(1.5px, 2.75px) rotate(45deg); }
.site-bar__menu[aria-expanded="true"] .site-bar__icon::after { width: 13px; transform: translate(1.5px, -2.75px) rotate(-45deg); }
.site-bar__menu:focus-visible,
.site-bar__cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--slate);
	outline-offset: -4px;
}
@media (max-width: 600px) {
	.site-bar { height: 44px; font-size: 13px; letter-spacing: 0.5px; }
	.site-bar__menu { gap: 12px; padding: 0 16px 0 20px; }
	.site-bar__cta { padding: 0 20px 0 14px; }
}

/* Menu panel: one big frosted card over the whole screen, 20px in from every
   edge, same radius and frost as the cards. It grows out of the site bar: the
   clip starts as the bar's pill (--clip-*, measured in menu.js) and opens to the
   full panel; closing shrinks it back into the bar. */
.site-menu-backdrop {
	position: fixed;
	inset: 0;
	z-index: 45;
	margin: 0; /* cancel WordPress's block gap */
	padding: 20px;
	background: rgba(20, 52, 110, 0); /* clean dark-blue dim behind the panel */
	visibility: hidden;
	transition: background-color 0.7s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 0.7s;
}
.site-menu {
	--menu-ease: cubic-bezier(0.76, 0, 0.24, 1);
	box-sizing: border-box;
	height: 100%;
	border-radius: 23px;
	background: rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	clip-path: inset(var(--clip-t, 0) var(--clip-r, 0) var(--clip-b, 0) var(--clip-l, 0) round 76px);
	transition: clip-path 0.7s var(--menu-ease);
}
.menu-open .site-menu-backdrop {
	background-color: rgba(20, 52, 110, 0.1);
	visibility: visible;
	transition: background-color 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}
.menu-open .site-menu { clip-path: inset(0 0 0 0 round 23px); }
/* Panel content: one view at a time (data-view set by menu.js); the panel scrolls
   if the content is taller than the screen (scrollbar hidden, as everywhere). */
.site-menu {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
}
.site-menu::-webkit-scrollbar { display: none; }
.site-menu__view { display: none; }
.site-menu[data-view="menu"] .site-menu__view--menu,
.site-menu[data-view="consult"] .site-menu__view--consult {
	display: block;
	animation: site-menu-view 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
@keyframes site-menu-view {
	from { opacity: 0; transform: translateY(12px); }
}

/* Mega menu: a large serif index of the pages on the left; a preview on the right
   whose photo wipes in and caption changes as you hover each item (menu.js);
   contact strip + consultation button along the bottom. Items rise out of line
   masks one after another once the panel has grown out of the pill. */
.site-menu[data-view="menu"] .mm { display: grid; } /* only in menu mode; the form view replaces it */
.mm {
	box-sizing: border-box;
	flex: 1;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	grid-template-rows: 1fr auto;
	gap: 32px 64px;
	width: 100%;
	min-height: 100%;
	padding: 104px 56px 36px;
}
.mm__list {
	align-self: center;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mm;
}
.mm__item { margin: 0; }
.mm__link {
	display: grid;
	grid-template-columns: 44px auto 1fr;
	--mm-size: clamp(2.25rem, 3.4vh + 1.5vw, 3.75rem);
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	color: var(--wp--preset--color--slate);
	text-decoration: none;
	transition: opacity 0.4s ease;
}
.mm__num {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	align-self: center;
	margin-right: -8px; /* reaches across the grid gap to where the label starts, so the dot can centre between */
	position: relative;
	top: calc(var(--mm-size) * -0.105 - 1px); /* level with the middle of the capitals */
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--muted);
	transition: color 0.3s ease;
}
/* The page you're on: a small blue dot beside its number. */
.mm__num::after {
	content: "";
	margin-inline: auto; /* exactly halfway between the number and the label… */
	translate: -0.75px 0; /* …measured from the digits' ink, not their trailing letter-spacing */
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	opacity: 0;
}
.mm__link[aria-current="page"] .mm__num::after { opacity: 1; }
.mm__label { display: block; overflow: hidden; padding-bottom: 0.06em; transition: translate 0.55s var(--ease-out); }
.mm__label-inner {
	display: block;
	color: var(--serif-ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--mm-size);
	line-height: 0.98;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: translate 0.55s var(--ease-out);
}
/* Hovering one item dims the rest; the hovered label slides over. */
.mm__list:has(.mm__link:hover, .mm__link:focus-visible) .mm__link:not(:hover, :focus-visible) { opacity: 0.28; }
/* Slide the whole mask, not the word inside it, so the right edge never clips. */
.mm__link:hover .mm__label,
.mm__link:focus-visible .mm__label { translate: 16px 0; }
.mm__link:hover .mm__num,
.mm__link:focus-visible .mm__num { color: var(--accent); }
.mm__link:focus-visible { outline: none; }

.mm__preview { position: relative; min-height: 0; }
.mm__frame {
	position: absolute;
	inset: 0;
	border-radius: 24px;
	background: var(--ice);
	overflow: hidden;
}
/* The incoming photo wipes up with a thin line on its edge (.mm__shot.was-active::after). */
.mm__shot { position: absolute; inset: 0; margin: 0; clip-path: inset(100% 0 0 0); z-index: 1; }
.mm__shot.is-active { z-index: 3; clip-path: inset(0 0 0 0); transition: clip-path 0.75s var(--ease-io); }
.mm__shot.was-active { z-index: 2; clip-path: inset(0 0 0 0); }
.mm__shot.was-active::after {
	/* A hairline riding the incoming photo's edge, drawn on the photo it covers just above that
	   edge (same timing as the wipe). */
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)) top / 100% 1px no-repeat;
	pointer-events: none;
	animation: wipe-line 0.75s var(--ease-io) both;
}
@keyframes wipe-line { from { translate: 0 calc(100% - 1px); } to { translate: 0 -1px; } }
.mm__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	scale: 1.22;
	translate: var(--px, 0) var(--py, 0);
	transition: scale 1.2s var(--ease-out), translate 0.8s var(--ease-out);
}
.mm__shot.is-active img { scale: 1.12; }
/* The photo being covered shrinks back a little as the next one wipes over it, never below the
   size that still covers the frame with the pointer parallax (±9px). */
.mm__shot.was-active img { scale: 1.03; transition: scale 0.75s var(--ease-io), translate 0.8s var(--ease-out); }
.mm__shot img.mm__shot-cutout {
	object-fit: contain;
	object-position: center bottom;
	/* Same deep navy backdrop + soft glow as the Dr. Hina slide on the home page. */
	background:
		radial-gradient(ellipse 45% 40% at 50% 55%, rgba(34, 40, 78, 0.6) 0%, rgba(24, 28, 56, 0.35) 45%, transparent 100%),
		radial-gradient(ellipse 90% 80% at 50% 56%, #12152A 0%, #0D1020 45%, #090B16 75%, #06070E 100%);
}

.mm__foot {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding-top: 24px;
	border-top: 1px solid rgba(29, 62, 93, 0.12);
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	color: rgba(29, 62, 93, 0.7);
}
.mm__contact { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.mm__contact a { color: var(--wp--preset--color--slate); }

/* Opening: labels rise out of their masks in turn, numbers and preview follow. */
.mm__label-inner { transform: translateY(110%); transition: transform 0.9s var(--ease-out), translate 0.55s var(--ease-out); }
.mm__num { opacity: 0; transition: opacity 0.6s ease, color 0.3s ease; }
.mm__frame { clip-path: inset(100% 0 0 0 round 24px); transition: clip-path 1s var(--ease-io); }
.mm__foot { opacity: 0; translate: 0 16px; transition: opacity 0.6s ease, translate 0.8s var(--ease-out); }
.menu-open .site-menu[data-view="menu"] .mm__label-inner { transform: none; transition-delay: calc(0.32s + var(--i) * 0.055s), 0s; }
.menu-open .site-menu[data-view="menu"] .mm__num { opacity: 1; transition-delay: calc(0.45s + var(--i) * 0.055s), 0s; }
.menu-open .site-menu[data-view="menu"] .mm__frame { clip-path: inset(0 0 0 0 round 24px); transition-delay: 0.4s; }
.menu-open .site-menu[data-view="menu"] .mm__foot { opacity: 1; translate: 0 0; transition-delay: 0.7s; }
@media (prefers-reduced-motion: reduce) {
	.mm__label-inner, .mm__num, .mm__frame, .mm__foot { transform: none !important; opacity: 1 !important; clip-path: none !important; translate: none !important; }
}

/* Consultation form — Figma 755:5085. */
.consult {
	box-sizing: border-box;
	width: 100%;
	max-width: 654px;
	margin: 0 auto; /* fixed distance from the top, so switching tabs doesn't move the tabs */
	padding: 96px 32px 48px; /* clears the site bar */
	color: var(--wp--preset--color--slate);
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	letter-spacing: 0.04em;
}
.consult * { box-sizing: border-box; }
.consult__tabs {
	--pill-x: 0px;
	--pill-w: 162px;
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 53px;
	padding: 3px;
	border-radius: 52px;
	background: #D0E2EB;
}
.consult__tabs-pill {
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 3px;
	width: var(--pill-w);
	border-radius: 69px;
	background: #fff;
	transform: translateX(var(--pill-x));
	transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1), width 0.45s cubic-bezier(0.76, 0, 0.24, 1);
}
.consult__tab {
	position: relative;
	height: 47px;
	min-width: 158px;
	padding: 0 20px;
	border: 0;
	border-radius: 69px;
	background: none;
	color: inherit;
	font: 500 16px/1.54 var(--wp--preset--font-family--body);
	cursor: pointer;
}
.consult__tab:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.consult__intro {
	margin: 0 0 8px; /* 32px to the fields with the form's 24px gap */
	line-height: 1.5;
}
.consult__form {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 32px;
}
.consult__form[hidden] { display: none; }
.consult__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}
.consult__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}
/* Payment choice: two round options side by side (same circle as "I agree"). */
.consult__choices {
	display: grid;
	grid-template-columns: repeat(2, max-content);
	column-gap: 72px;
	row-gap: 4px;
	padding: 0;
	border: 0;
	min-width: 0;
}
.consult__choices legend {
	grid-column: 1 / -1;
	float: left; /* lets the legend sit inside the grid */
	width: 100%;
	padding: 0;
	font-weight: 500;
	line-height: 1.54;
	letter-spacing: 0;
}
.consult .consult__choice {
	padding: 8px 0;
	color: var(--wp--preset--color--slate);
}
.consult__field > span:first-child {
	font-weight: 500;
	line-height: 1.54;
	letter-spacing: 0;
}
.consult__field input,
.consult__field textarea {
	width: 100%;
	margin: 0;
	padding: 8px;
	border: 0;
	border-bottom: 1px solid rgba(29, 62, 93, 0.25);
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: 300 14px/1.1 var(--wp--preset--font-family--body);
	letter-spacing: 0.04em;
	transition: border-color 0.2s ease;
}
.consult__field textarea {
	min-height: 33px;
	line-height: 1.4;
	padding-top: 7px;
	resize: none;
	overflow: hidden;
}
.consult__field input::placeholder,
.consult__field textarea::placeholder { color: rgba(29, 62, 93, 0.7); opacity: 1; }
.consult__field input:focus,
.consult__field textarea:focus {
	outline: none;
	border-bottom-color: var(--wp--preset--color--slate);
}
.consult__field.is-invalid input,
.consult__field.is-invalid textarea { border-bottom-color: #FF6745; }
.consult__drop {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin-top: 4px;
	padding: 16px;
	border: 1px dashed rgba(29, 62, 93, 0.25);
	border-radius: 16px;
	line-height: 1.1;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.consult__drop input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.consult__drop svg { margin-bottom: 4px; }
.consult__drop-hint { color: rgba(29, 62, 93, 0.7); }
.consult__files { font-weight: 500; }
.consult__files:empty { display: none; }
.consult__drop:hover,
.consult__drop.is-dragging { border-color: var(--wp--preset--color--slate); background: rgba(255, 255, 255, 0.35); }
.consult__drop:focus-within { border-color: var(--wp--preset--color--slate); }
.consult__drop.is-invalid { border-color: #FF6745; }
.consult__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.consult__agree {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: rgba(29, 62, 93, 0.7);
	line-height: 1.1;
	cursor: pointer;
}
.consult__agree input {
	appearance: none;
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 2px solid var(--wp--preset--color--slate);
	border-radius: 50%;
	cursor: pointer;
	transition: box-shadow 0.2s ease;
}
.consult__agree input:checked { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 10px var(--wp--preset--color--slate); }
.consult__agree input:focus-visible { outline: 2px solid var(--wp--preset--color--slate); outline-offset: 2px; }
.consult__agree.is-invalid input { border-color: #FF6745; }
.consult__choices.is-invalid input { border-color: #FF6745; }
.consult__submit {
	flex: none;
	padding: 16px 32px;
	border: 0;
	border-radius: 100px;
	background: var(--wp--preset--color--slate);
	color: #fff;
	font: 500 16px/16px var(--wp--preset--font-family--body);
	cursor: pointer;
	transition: transform 0.25s ease;
}
.consult__submit:hover { transform: translateY(-1px); }
.consult__submit:focus-visible { outline: 2px solid var(--wp--preset--color--slate); outline-offset: 3px; }
.consult__status { margin: 0; min-height: 1.4em; line-height: 1.4; }
.consult__status:empty { display: none; }
@media (max-width: 600px) {
	.consult { padding: 84px 20px 32px; }
	.consult__tabs { display: flex; }
	.consult__tab { flex: 1; min-width: 0; padding: 0 8px; font-size: 14px; }
	.consult__row { grid-template-columns: 1fr; gap: 24px; }
	.consult__choices { column-gap: 32px; }
	/* The form scrolls under the bar on phones, so the bar keeps a solid pill. */
	.menu-open .site-bar { background-color: rgba(255, 255, 255, 0.9); }
	.consult__footer { flex-direction: column; align-items: stretch; }
	.consult__submit { width: 100%; }
}
/* While open the bar sits on the panel's own frost (no second pill on top); its
   pill comes back only once the panel has shrunk back into it. */
.site-bar { transition: background-color 0s linear 0.7s, box-shadow 0s linear 0.7s; }
.menu-open .site-bar {
	background-color: transparent;
	box-shadow: none;
	transition: none;
}
.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
	.site-menu { transition-duration: 0.01s; }
}

.wp-block-button.is-style-arrow .wp-block-button__link {
	background: none;
	padding: 0;
	color: var(--wp--preset--color--primary);
}
.wp-block-button.is-style-arrow .wp-block-button__link::after { content: " →"; }

.has-deep-gradient-background,
.has-deep-gradient-background :where(h1, h2, h3, p) { color: var(--wp--preset--color--base); }

.wp-block-image.is-rounded img,
.rounded-media img { border-radius: 24px; }

:where(a, button, input, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

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

/* Home hero — Figma HOME / node 454:593 */
.home-hero {
	/* Taller than the screen: the stage stays pinned while you scroll through it.
	   --hero-p (0 → 1, set on <html> by motion.js) is how far through that scroll you are. */
	--hero-scroll: 780svh;
	position: relative;
	height: var(--hero-scroll);
	background: var(--wp--preset--color--base);
	text-align: center;
}
.home-hero__stage {
	position: sticky;
	top: 0;
	height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-inline: var(--wp--style--root--padding-left);
	overflow: clip;
	/* White at the top fading to a light blue-grey at the bottom of the screen. */
	background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 25%, #B9C9D9 100%);
}
/* When the pinned story releases, the Dr. Hina slide scrolls away at half speed and dims slightly
   while the next section (.home-story, z-index 3) slides up over it — parallax on the exit,
   scrubbed by the hero's own scroll-out. */
@supports (view-timeline: --a) {
	.home-hero { view-timeline: --home-hero block; }
	@keyframes hero-exit { to { translate: 0 50vh; } }
	@keyframes hero-exit-dim { to { opacity: 0.55; } }
	.home-hero__stage { animation: hero-exit linear both; animation-timeline: --home-hero; animation-range: exit 0% exit 100%; }
	.home-hero__stage::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: #06070E; opacity: 0;
		animation: hero-exit-dim linear both; animation-timeline: --home-hero; animation-range: exit 0% exit 100%; }
}
.home-hero__copy {
	--copy-y: 0vh;
	position: relative;
	z-index: 1;
	align-items: center;
	pointer-events: none; /* let drags reach the brain behind */
	/* Scrolls straight up and off the top early in the pinned scroll (no fade). */
	transform: translateY(calc(var(--copy-y) - min(1, var(--hero-p) * 3.2) * 110vh));
	will-change: transform;
}
.home-hero__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--label);
	font-weight: 300;
	font-size: 0.875rem;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--slate);
}
.home-hero__title.wp-block-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(2.5rem, 4.6vw + 0.5rem, 4rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--serif-ink);
}

/* Title line breaks: one set for phones, one for larger screens (mobile block at the end). */
br.br-mobile { display: none; }
@media (max-width: 767px) { br.br-mobile { display: inline; } br.br-desktop { display: none; } }

/* Long-form page content rhythm */
.wp-block-post-content > h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin-top: var(--wp--preset--spacing--50);
}
.wp-block-post-content > h2:first-child { margin-top: 0; }

.site-header .wp-block-site-title,
.site-header .wp-element-button { white-space: nowrap; }
@media (max-width: 781px) {
	.site-header .header-cta { display: none; }
}

/* Motion: Lenis smooth scroll + line reveals (assets/js/motion.js) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.has-motion .reveal:not(.is-split) { visibility: hidden; }
.reveal .word { display: inline-block; will-change: opacity, filter, transform; }

/* Interactive 3D brain (assets/js/brain-viewer.js) */
.brain-viewer {
	--bv-accent: #2B6F98;
	--bv-fill: 0.78;  /* brain size: lower = bigger (read by brain-viewer.js) */
	--bv-offset: 0%;  /* how far below centre the brain sits (read by brain-viewer.js) */
	--bv-fill-end: 1.15;  /* size once scrolled: whole brain visible (higher = smaller) */
	--bv-offset-end: 6%;  /* position once scrolled ("The human brain"): a little below centre */
	--bv-fill-ch2: 1.3;   /* size in "When something goes wrong" (higher = smaller) */
	--bv-offset-ch2: 0%;  /* position in "When something goes wrong" */
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	/* Not 0: browsers skip compositing fully transparent layers, which makes the
	   first visible frame stall and the fade look like a pop. */
	opacity: 0.001;
	transition: opacity 1.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media (min-width: 1024px) {
	.brain-viewer {
		--bv-fill: 0.92;
		--bv-offset: 54%;
		--bv-fill-ch2: 1.38;  /* "When a problem occurs": side view, large; placed to keep the title clear */
		--bv-offset-ch2: 0%;
		--bv-ch2-title-gap: 32px; /* sideways: the brain's front sits this far from the title (brain-viewer.js) */
	}
	.home-hero__copy {
		/* Title sits between the site bar (bottom ≈ 80px) and the top of the brain,
		   a little nearer the bar so there's more room above the brain. */
		--copy-y: calc(112px - 28.25vh);
	}
}
.brain-viewer.is-loaded { opacity: 1; }
.brain-viewer.is-intro { z-index: 3; } /* passes in front of the headline during its entrance (brain-viewer.js) */
/* Chapter 3 has no brain: it scrolls up and off with chapter 2's content
   (same range and ease-in, its own parallax speed). Once it's off screen the
   viewer stops rendering. */
.brain-viewer {
	--bv-exit: clamp(0, calc((var(--hero-p) - 0.9) / 0.12), 1);
	translate: 0 calc(var(--bv-exit) * var(--bv-exit) * -125vh);
}
.brain-viewer__canvas { display: block; width: 100%; height: 100%; }
.brain-viewer__canvas.is-grabbable { cursor: grab; }
.brain-viewer__canvas.is-dragging { cursor: grabbing; }
.brain-viewer__hotspots { position: absolute; inset: 0; pointer-events: none; }
.brain-viewer__dot {
	position: absolute;
	width: 26px;
	height: 26px;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	border: 1.5px solid var(--bv-accent);
	color: var(--bv-accent);
	font: 300 10.5px/1 var(--wp--preset--font-family--body);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	pointer-events: all;
	transform: translate(-50%, -50%);
	transition: background 0.15s, transform 0.12s, border-color 0.15s, color 0.15s, box-shadow 0.15s, opacity 0.2s;
	user-select: none;
	will-change: left, top;
}
.brain-viewer__dot:hover,
.brain-viewer__dot.is-active {
	background: var(--bv-accent);
	border-color: #fff;
	color: #fff;
	transform: translate(-50%, -50%) scale(1.18);
	box-shadow: 0 0 0 5px rgba(74, 144, 184, 0.25);
}
.brain-viewer__dot.is-occluded { opacity: 0.28; pointer-events: none; }
.brain-viewer__panel {
	position: absolute;
	z-index: 2;
	width: 270px;
	max-width: calc(100% - 20px);
	padding: 16px 18px;
	text-align: left;
	background: rgba(255, 255, 255, 0.97);
	border: 1px solid rgba(74, 144, 184, 0.28);
	border-radius: 10px;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	opacity: 0;
	transform: scale(0.96) translateY(3px);
	transition: opacity 0.18s, transform 0.18s;
	pointer-events: none;
}
.brain-viewer__panel.is-visible { opacity: 1; transform: none; pointer-events: all; }
.brain-viewer__panel-eyebrow {
	margin-bottom: 5px;
	font: 300 9.5px/1.4 var(--wp--preset--font-family--body);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bv-accent);
}
.brain-viewer__panel-title {
	margin-bottom: 9px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	line-height: 1.15;
	color: var(--serif-ink);
}
.brain-viewer__panel-desc {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--wp--preset--color--slate-muted);
}
.brain-viewer__panel-close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--wp--preset--color--slate-muted);
	font-size: 13px;
	cursor: pointer;
}
.brain-viewer__panel-close:hover { background: rgba(74, 144, 184, 0.15); color: var(--wp--preset--color--slate); }

/* Stat glass card — Figma node 736:772. Sits over the right side of the brain;
   its chapter container (.brain-chapter) moves it. */
.brain-stat {
	position: absolute;
	z-index: 1;
	top: 50%;
	right: clamp(24px, 8.6vw, 124px);
	box-sizing: border-box;
	margin: 0; /* cancel WordPress's block gap so it lines up exactly */
	width: 402px;
	min-height: 415px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 52px; /* equal on both sides so text runs edge to edge */
	border-radius: 23px;
	background: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	color: var(--wp--preset--color--slate);
	text-align: left;
	pointer-events: none;
	transform: translateY(-50%) var(--tilt,); /* --tilt: hover tilt (motion.js) */
}
.brain-stat > * { margin: 0; }
.brain-stat__num {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 200;
	font-size: 96px;
	line-height: 1.05;
	letter-spacing: 0.01em;
}
/* Slot-machine digits (motion.js, data-slot): each digit's window masks a strip
   that rolls up through the digits. */
.slot { display: inline-block; height: 1lh; overflow: hidden; vertical-align: top; }
.slot__strip { display: block; will-change: transform; }
.slot__strip > span { display: block; height: 1lh; text-align: center; }
.brain-stat__title {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.5;
	letter-spacing: 0.04em;
}
.brain-stat .brain-stat__text {
	text-wrap: pretty; /* avoid a lone word on the last line */
	margin-top: 18px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.25;
	letter-spacing: 0.04em;
}
/* Hero chapters: each chapter's title + card over the fixed brain. Everything is
   scrubbed by the (smoothed) hero scroll progress, so scrolling back plays it in
   exact reverse:
   - entry  (--in, 0 → 1 over --in-from → --in-to): headline reveals (motion.js),
     card + tiles rise from below with an ease-out, then their text rises;
   - exit   (--out over --out-from → --out-to): the chapter scrolls up and away. */
.brain-chapter {
	--in: clamp(0, calc((var(--hero-p) - var(--in-from)) / (var(--in-to) - var(--in-from))), 1);
	--in-u: calc(1 - var(--in));
	--out: clamp(0, calc((var(--hero-p) - var(--out-from)) / (var(--out-to) - var(--out-from))), 1);
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
	pointer-events: none;
	transform: translateY(calc(var(--out) * var(--out) * -110vh));
}
.brain-chapter.chapter-1 { --in-from: 0.16; --in-to: 0.42; --out-from: 0.5; --out-to: 0.62; }
.brain-chapter.chapter-2 { --in-from: 0.6; --in-to: 0.82; --out-from: 0.9; --out-to: 1.02; }
.brain-chapter.chapter-3 { --in-from: 1; --in-to: 1.2; --out-from: 1.3; --out-to: 2.3; } /* starts as chapter 2 clears; drifts up slowly under the photos */
/* Chapter 3 doesn't scroll away: the chapter 4 scene slides up over it, so the
   headline only drifts up slowly underneath (parallax) while it's covered. */
.brain-chapter.chapter-3 { transform: translateY(calc(var(--out) * -24vh)); }
/* …and as the photos and Dr. Hina's portrait come over it, the headline shrinks and
   blurs away (over the first 60% of that). */
.brain-chapter.chapter-3 .brain-title {
	--sb: clamp(0, calc(var(--out) / 0.6), 1);
	scale: calc(1 - var(--sb) * 0.2);
	filter: blur(calc(var(--sb) * 14px));
}
.brain-chapter.chapter-4 { --in-from: 2.24; --in-to: 2.3; --out-from: 9; --out-to: 10; } /* text + stats play (timed) once the portrait has filled the screen (motion.js) */
.brain-chapter .brain-stat {
	translate: 0 calc(var(--in-u) * var(--in-u) * var(--in-u) * 100vh);
}

/* "THE HUMAN BRAIN" — large serif title on the left, mirroring the stat card. */
.brain-title.wp-block-heading {
	position: absolute;
	z-index: 1;
	/* Top aligned with the top of the stat card (card is 415px tall, centred). */
	top: calc(50% - 415px / 2);
	left: clamp(24px, 8.6vw, 124px);
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(2.5rem, 4.6vw + 0.5rem, 4rem); /* same as the hero heading */
	line-height: 0.95;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	text-align: left;
	color: var(--serif-ink);
	pointer-events: none;
}
@media (max-width: 1023px) {
	.brain-title.wp-block-heading {
		top: clamp(48px, 9vh, 96px);
		left: var(--wp--style--root--padding-left);
		translate: none;
	}
}

/* Without motion the title simply appears at the end state. */

/* Chapter 1 — Figma node 745:826. Title top left with a 2×2 grid of topic tiles
   beneath it; stat card on the right (positions from the 1440×837 frame,
   measured from the centre). */
.brain-topics {
	position: absolute;
	z-index: 1;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 196px);
	gap: 9px;
	pointer-events: none;
}
.brain-topic {
	box-sizing: border-box;
	height: 90px;
	margin: 0;
	padding: 24px 28px;
	border-radius: 23px;
	background: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	color: var(--wp--preset--color--slate);
	text-align: left;
	/* Come up from below with the headline, one after another (scrubbed). */
	--t: clamp(0, calc((var(--in) - 0.08 - var(--i) * 0.07) / 0.6), 1);
	--tu: calc(1 - var(--t));
	translate: 0 calc(var(--tu) * var(--tu) * var(--tu) * 100vh);
	position: relative;
	transform: var(--tilt, none);
}
.brain-topic > * { margin: 0; }
.brain-topic__num {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	opacity: 0.32; /* very soft, so the labels lead */
}
.brain-topic__label {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.02em;
}
/* "is responsible for", leading into the tiles; blurs in word by word after the
   title (.reveal--chapter, motion.js). */
.brain-topics__lead {
	grid-column: 1 / -1;
	margin: 0 0 48px 7px;
	text-align: left;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--slate);
}
.brain-topic:nth-child(2) { --i: 0; }
.brain-topic:nth-child(3) { --i: 1; }
.brain-topic:nth-child(4) { --i: 2; }
.brain-topic:nth-child(5) { --i: 3; }
@media (min-width: 1024px) {
	.brain-chapter.chapter-1 .brain-title.wp-block-heading {
		top: calc(50% - 216px);
		left: clamp(24px, 10.45vw, 150px);
	}
	.brain-topics {
		top: calc(50% - 28px); /* the lead line sits above, just under the title; the tiles stay at 50% + 53px */
		left: clamp(24px, 10.45vw, 150px);
	}
	.brain-chapter.chapter-1 .brain-stat {
		top: calc(50% - 172px);
		transform: var(--tilt, none);
	}
}
@media (max-width: 1023px) {
	.brain-topics {
		top: calc(clamp(48px, 9vh, 96px) + 3 * 0.95 * clamp(2.5rem, 4.6vw + 0.5rem, 4rem) + 20px);
		left: var(--wp--style--root--padding-left);
		grid-template-columns: repeat(2, minmax(0, 150px));
		gap: 8px;
	}
	.brain-topic {
		height: auto;
		padding: 12px 16px;
		border-radius: 16px;
	}
	.brain-topic__num,
	.brain-topic__label { font-size: 14px; }
}

/* Chapter 2 — Figma node 745:821. Title to the right of the brain; severity
   chart card on the left (top aligned with the title); a slim warning card under
   the title whose bottom lines up with the chart card. Positions from the
   1440×837 frame, measured from the centre so they hold on other screen sizes:
   title/card top 50% - 171px; chart card 354px tall → bottom 50% + 183px;
   warning card 114px tall at 50% + 69px → same bottom. */

/* Shared scrubbed icon mask (rises out of its box as the chapter enters). */
.brain-stat__icon-inner {
	--lp: clamp(0, calc((var(--in) - 0.5) / 0.3), 1);
	--lu: calc(1 - var(--lp));
	display: block;
	transform: translateY(calc(var(--lu) * var(--lu) * var(--lu) * 110%));
}

/* --- Severity chart card (left) --- */
.brain-stat--severity {
	/* Chart draws in over the middle of the chapter's entry (scrubbed). */
	--draw: clamp(0, calc((var(--in) - 0.3) / 0.55), 1);
	min-height: 354px;
	padding: 55px 60px 52px 52px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.severity-chart {
	position: relative;
	width: 335px;
	height: 203px;
	margin: 0 0 4px -28px; /* chart box sits at 24px from the card edge (Figma) */
}
.brain-stat--severity .brain-stat__text { margin-top: 0; }
.severity-chart__limit {
	position: absolute;
	top: 46.66%;
	left: 9.82%;
	right: 3.63%;
	height: 1px;
	transform-origin: left;
	transform: scaleX(clamp(0, calc(var(--draw) * 2), 1));
}
.severity-chart__limit svg { display: block; width: 100%; height: 1px; }
.severity-chart__graph {
	position: absolute;
	top: 4.88%;
	right: 3.63%;
	bottom: 12.92%;
	left: 9.84%;
	width: auto;
	height: auto;
	overflow: visible;
}
/* One smooth rise, drawn left → right: navy up to the threshold, then orange above it. */
.severity-chart__low,
.severity-chart__high {
	stroke-dasharray: 1;
	vector-effect: non-scaling-stroke;
}
.severity-chart__low { stroke-dashoffset: calc(1 - clamp(0, calc(var(--draw) * 2), 1)); }
.severity-chart__high { stroke-dashoffset: calc(1 - clamp(0, calc(var(--draw) * 2 - 1), 1)); }
/* Pulsing point at the end of the line once it's drawn. */
.severity-chart__end {
	position: absolute;
	top: calc(4.88% + 82.2% * 4 / 170);
	right: calc(3.63% + 86.55% * 2 / 300);
	width: 9px;
	height: 9px;
	margin: -4px -4px 0 0;
	border-radius: 50%;
	background: #FF6745;
	opacity: clamp(0, calc((var(--draw) - 0.94) * 16), 1);
	animation: alert-ping 1.6s ease-out infinite;
}
.severity-chart__value {
	position: absolute;
	top: -1.73%;
	left: 8.94%;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.25;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--slate);
	font-variant-numeric: tabular-nums;
	opacity: clamp(0, calc(var(--draw) * 4), 1);
}
.severity-chart__arrow { display: inline-block; width: 12px; height: 11px; animation: severity-bob 1.8s ease-in-out infinite; }
.severity-chart__arrow svg { display: block; width: 12px; height: 11px; }
@keyframes severity-bob {
	50% { transform: translateY(-3px); }
}
@keyframes alert-ping {
	0% { box-shadow: 0 0 0 0 rgba(255, 103, 69, 0.55); }
	100% { box-shadow: 0 0 0 10px rgba(255, 103, 69, 0); }
}

@media (min-width: 1024px) {
	/* Chapter 2 mirrors chapter 1: title, lead line and topic tiles on the right
	   (right-aligned), the chart card on the left where chapter 1's stat card sits. */
	.brain-chapter.chapter-2 .brain-title.wp-block-heading {
		top: calc(50% - 216px);
		left: auto;
		right: clamp(24px, 10.45vw, 150px);
		width: auto;
		white-space: nowrap;
		text-align: right;
	}
	.brain-chapter.chapter-2 .brain-topics { left: auto; right: clamp(24px, 10.45vw, 150px); }
	.brain-chapter.chapter-2 .brain-topics__lead { margin-left: 0; margin-right: 7px; text-align: right; }
	.brain-chapter.chapter-2 .brain-stat {
		top: calc(50% - 172px);
		right: auto;
		left: clamp(24px, 8.6vw, 124px);
		transform: var(--tilt, none);
	}
	/* The chart card matches chapter 1's stat card (402 × 415, bottom level with the
	   tiles): chart at the top, text at the bottom. */
	.brain-chapter.chapter-2 .brain-stat--severity { min-height: 415px; justify-content: space-between; }
}

/* --- Warning card (under the title) --- */
.brain-alerts {
	position: absolute;
	z-index: 1;
	margin: 0;
	display: grid;
	pointer-events: none;
}
.brain-alert {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0;
	padding: 0 52px 0 36px;
	border-radius: 23px;
	background: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	color: var(--wp--preset--color--slate);
	text-align: left;
	/* Rises in with the chapter (scrubbed like the tiles). */
	--t: clamp(0, calc((var(--in) - 0.12) / 0.6), 1);
	--tu: calc(1 - var(--t));
	translate: 0 calc(var(--tu) * var(--tu) * var(--tu) * 100vh);
	position: relative;
	transform: var(--tilt, none);
}
.brain-alert > * { margin: 0; }
/* Hover tilt sheen on the chapter cards (motion.js sets --gx / --gy). */
:is(.brain-stat, .brain-topic, .brain-alert, .cb-card)::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%);
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
}
:is(.brain-stat, .brain-topic, .brain-alert, .cb-card).is-tilting::after { opacity: 1; }
/* A fine white highlight round the frosted cards' edge, as light catching glass: brightest at the
   top left and bottom right, fading out along the sides. Home chapter cards, the Services cards and
   the About timeline's detail cards. */
:is(.brain-stat, .brain-topic, .brain-alert, .svc-card, .tl-mark__more, .cb-card, .cb__hud, .cb__hero-cta, .prx-surf__card, .back-pill)::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0.5) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	pointer-events: none;
}
.brain-alert__icon {
	position: relative;
	flex: none;
	width: 45px;
	height: 41px;
	overflow: hidden; /* baseline mask */
}
.brain-alert__icon svg { display: block; width: 45px; height: 41px; }
.brain-alert .brain-alert__text {
	max-width: 244px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.25;
	letter-spacing: 0.04em;
	text-wrap: pretty;
}
@media (min-width: 1024px) {
	.brain-alerts {
		top: calc(50% + 28px);
		left: calc(50% + 21.5vh + 24px);
		width: 400px;
		height: 114px; /* bottom = 50% + 142px, level with the (smaller) chart card */
	}
}
@media (max-width: 1023px) {
	.brain-alerts {
		top: calc(clamp(48px, 9vh, 96px) + 3 * 0.95 * clamp(2.5rem, 4.6vw + 0.5rem, 4rem) + 20px);
		left: var(--wp--style--root--padding-left);
		right: var(--wp--style--root--padding-right);
	}
	.brain-alert { gap: 16px; padding: 16px 20px; border-radius: 16px; }
	.brain-stat--severity { padding: 32px 28px 28px; }
	.severity-chart { width: calc(100% + 12px); height: auto; aspect-ratio: 335 / 203; margin-left: -12px; }
}

/* Loops only run while chapter 2 is showing. */
.brain-chapter:not(.is-in) .severity-chart * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	.brain-stat__icon-inner { transform: none; }
}

/* Chapter 3 — "The surgeon you choose matters": centred over the brain at the
   hero heading's size and style. */
.brain-chapter.chapter-3 .brain-title.wp-block-heading {
	top: 50%;
	left: 0;
	right: 0;
	width: auto;
	translate: 0 -50%;
	text-align: center;
}

/* Chapter 4 — Dr. Hina. After "The surgeon you choose matters", a flock of photos rises over the
   headline at different speeds (parallax), and Dr. Hina rises with them as a centred portrait
   card on the navy backdrop, then grows until it fills the screen (clip-path + inner scale), the
   photos passing behind it. All scrubbed by --hero-p (story units), so it reverses. */
.hp-flock {
	/* Starts with the headline reveal; speeds are set so that when Dr. Hina's card reaches the
	   centre (--hero-p 1.75) three photos sit above him and three below. */
	--g: clamp(0, calc((var(--hero-p) - 1) / 1.4), 1);
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
}
.hp-flock__img {
	z-index: 1;
	position: absolute;
	top: 100%;
	left: var(--x);
	width: var(--w);
	height: auto;
	aspect-ratio: var(--ar);
	max-width: none;
	object-fit: cover;
	border-radius: 9px;
	filter: saturate(1.3); /* a touch more of the film's blue */
	transform: translateY(calc(var(--y0) - var(--g) * (130vh + var(--y0)) * var(--s) * var(--k, 1)));
	will-change: transform;
}
/* Depth: near scans are large, sharp and fastest (in front); mid ones medium and sharp; far ones
   small, blurred and slowest (further away = less parallax); --k spreads those speeds further
   apart per layer. Slightly see-through, more so further back. The
   film-0*.webp files are crops of one gritty four-panel MRI film (sagittal, coronal, two axial). */
.hp-flock__img--near { --k: 1.18; z-index: 3; border-radius: 11px; opacity: 0.88; }
.hp-flock__img--mid { --k: 1; z-index: 2; opacity: 0.8; }
.hp-flock__img--far2 { z-index: 1; border-radius: 7px; filter: saturate(1.3) blur(2.5px); opacity: 0.68; --k: 0.8; }
.hp-flock__img--far { z-index: 0; border-radius: 5px; filter: saturate(1.3) blur(5px); opacity: 0.55; --k: 0.62; }
/* WordPress's block gap (16px) would push the scene down now that the photos sit before it. */
.hp-flock, .dr-scene, .dr-stats { margin: 0 !important; }
.dr-scene {
	--rise: clamp(0, calc((var(--hero-p) - 1.25) / 0.5), 1);
	--ru: calc(1 - var(--rise));
	--ru3: calc(var(--ru) * var(--ru) * var(--ru));
	--grow: clamp(0, calc((var(--hero-p) - 1.75) / 0.5), 1); /* starts the moment the card has risen to the centre */
	--gw: calc(var(--grow) * var(--grow) * (3 - 2 * var(--grow))); /* smoothstep */
	--cw: 24vw; /* card size before it grows */
	--ch: 66vh;
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	clip-path: inset(calc((100% - var(--ch)) / 2 * (1 - var(--gw))) calc((100% - var(--cw)) / 2 * (1 - var(--gw))) round calc((1 - var(--gw)) * 12px));
	transform: translateY(calc(var(--ru3) * 110vh));
}
.dr-scene__layer {
	position: absolute;
	inset: 0;
	scale: calc(0.62 + 0.38 * var(--gw));
}
/* Deep near-black navy, the same as the About hero's dark version: #12152A at the centre to
   #06070E at the edges, with a faint cool glow behind Dr. Hina. Sizes are scaled for the -30%
   inset (the box is 160% of the screen), so it matches the About hero on screen. */
.dr-scene__bg {
	position: absolute;
	inset: -30%;
	background:
		radial-gradient(ellipse 21% 32.5% at 50% 57.5%, rgba(34, 40, 78, 0.6) 0%, rgba(24, 28, 56, 0.35) 45%, transparent 100%),
		radial-gradient(ellipse 44% 50% at 50% 56%, #12152A 0%, #0D1020 45%, #090B16 75%, #06070E 100%);
}
.dr-portrait {
	position: absolute;
	left: 50%;
	bottom: 0; /* image is cropped at the folded arms */
	width: auto;
	height: min(92vh, 1000px);
	max-width: none;
	margin: 0;
	translate: -50% 0;
}
/* The slide's text, either side of Dr. Hina (centred): bio on the left, the at-a-glance stats on
   the right. Headline lines reveal in turn (motion.js .reveal--chapter); stat rows rise one after
   another and the 2 / 6 count up (data-scrub-count), all from the chapter's --in. */
.dr-intro {
	position: absolute;
	top: 50%;
	left: clamp(24px, 6vw, 110px);
	width: min(400px, 28vw);
	margin: 0;
	translate: 0 -50%;
	color: #F2F2F4;
	text-align: left;
	pointer-events: none;
}
.dr-intro > * { margin: 0; }
.dr-intro__name {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: rgba(242, 242, 244, 0.55);
}
.dr-intro .dr-intro__title.wp-block-heading {
	margin-top: 20px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(2rem, 2.9vw, 3rem);
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: #fff;
	text-wrap: balance;
}
.dr-intro .dr-intro__text {
	margin-top: 28px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: 14px; /* same style as the stat labels */
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: rgba(242, 242, 244, 0.45);
}
.dr-intro .dr-intro__link { margin-top: 28px; pointer-events: none; }
/* Only clickable (and so only showing its hover underline) once the slide has played in; before
   that it sits invisible over the earlier chapters. */
.chapter-4.is-played .dr-intro .dr-intro__link { pointer-events: auto; }
.dr-intro .dr-intro__link a, .dr-intro .link-arrow { color: #fff; }
.dr-stats {
	position: absolute;
	top: 50%;
	right: clamp(24px, 6vw, 110px);
	width: min(300px, 22vw);
	margin: 0;
	padding: 0;
	list-style: none;
	translate: 0 -50%;
	text-align: left;
}
.dr-stats li:last-child { border-bottom: 1px solid rgba(242, 242, 244, 0.14); } /* arrives with the last row, not before */
.dr-stats li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 0;
	border-top: 1px solid rgba(242, 242, 244, 0.14);
	opacity: 0;
	translate: 0 28px;
	transition: opacity 0.5s ease, translate 0.6s var(--ease-out);
}
/* Played (timed) once Dr. Hina has filled the screen: rows rise one after another. */
.chapter-4.is-played .dr-stats li { opacity: 1; translate: 0 0; transition: opacity 0.9s ease calc(0.35s + var(--k) * 0.14s), translate 1.1s var(--ease-out) calc(0.35s + var(--k) * 0.14s); }
.dr-stats__num { font-family: var(--wp--preset--font-family--body); font-weight: 200; font-size: clamp(2.2rem, 2.8vw, 3rem); line-height: 1; letter-spacing: -0.03em; color: #fff; }
.dr-stats__label { font-family: var(--wp--preset--font-family--body); font-weight: 300; font-size: 14px; line-height: 1.4; letter-spacing: -0.01em; color: rgba(242, 242, 244, 0.45); }
@media (max-width: 1023px) {
	.dr-intro {
		top: clamp(48px, 9vh, 96px);
		left: var(--wp--style--root--padding-left);
		right: var(--wp--style--root--padding-right);
		width: auto;
	}
	.dr-intro__name { font-size: 16px; }
	.dr-intro .dr-intro__title.wp-block-heading { margin-top: 14px; }
	.dr-intro .dr-intro__text { margin-top: 14px; }
	.dr-portrait {
		left: auto;
		right: -8%;
		bottom: 0;
		width: min(420px, 90vw);
		height: auto;
	}
}

/* Chapters 1 and 2 leave in parallax, the reverse of how they arrive: same scroll
   range (--out), each layer at its own speed — title slowest, then the lead line,
   the tiles one after another (in the order they came in), and the stat / chart
   card fastest; the brain (.brain-viewer, --bv-exit) sits in between. */
.brain-chapter.chapter-1,
.brain-chapter.chapter-2 { transform: none; }
.brain-chapter:is(.chapter-1, .chapter-2) .brain-title { transform: translateY(calc(var(--out) * var(--out) * -110vh)); }
.brain-chapter:is(.chapter-1, .chapter-2) .brain-topics__lead { transform: translateY(calc(var(--out) * var(--out) * -125vh)); }
.brain-chapter:is(.chapter-1, .chapter-2) .brain-topic {
	--o: clamp(0, calc((var(--out) - var(--i) * 0.08) / 0.68), 1);
	translate: 0 calc(var(--tu) * var(--tu) * var(--tu) * 100vh - var(--o) * var(--o) * 140vh);
}
.brain-chapter:is(.chapter-1, .chapter-2) .brain-stat { transform: translateY(calc(var(--out) * var(--out) * -175vh)) var(--tilt,); }

/* Without motion the headlines aren't split into animated words; show them with entry. */
html:not(.has-motion) .brain-chapter .brain-title { opacity: clamp(0, calc(var(--in) * 2 - 0.4), 1); }

/* Baseline mask reveal for the card text (split into lines by motion.js). */
.mask-line {
	display: block;
	overflow: hidden;
	/* Room for descenders inside the mask without changing the layout. */
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
}
.mask-line__inner {
	/* Rises from its baseline in the second half of the chapter's entry, line by
	   line (--line set by motion.js), scrubbed by scroll. */
	--lp: clamp(0, calc((var(--in, 1) - 0.5 - var(--line) * 0.035) / 0.25), 1); /* lines 0–7 all land by --in = 1 */
	--lu: calc(1 - var(--lp));
	display: block;
	transform: translateY(calc(var(--lu) * var(--lu) * var(--lu) * 110%));
}
@media (prefers-reduced-motion: reduce) {
	.mask-line__inner { transform: none; }
}

@media (max-width: 1023px) {
	.brain-stat {
		top: auto;
		bottom: 24px;
		right: var(--wp--style--root--padding-right);
		width: min(300px, calc(100% - 40px));
		min-height: 0;
		padding: 28px;
		transform: none;
	}
	.brain-stat__num { font-size: 64px; }
	.brain-stat__title { font-size: 17px; }
	.brain-stat .brain-stat__text { margin-top: 14px; }
}

/* Progressive bottom blur: four stacked layers, each blurring more and masked to
   a band nearer the bottom, so content sharpens smoothly as it moves up. */
:root { --hero-p: 0; }
.viewport-blur {
	--vb-height: 18vh;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	height: var(--vb-height);
	pointer-events: none;
	transition: opacity 0.6s ease;
}
/* Fades away once the footer comes up, so its bottom edge reads clearly (motion.js). */
html.footer-in .viewport-blur { opacity: 0; }
.viewport-blur span {
	position: absolute;
	inset: 0;
}
.viewport-blur span:nth-child(1) { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 50%, transparent 75%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 50%, transparent 75%); }
.viewport-blur span:nth-child(2) { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); mask-image: linear-gradient(to bottom, transparent 25%, #000 50%, #000 75%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 25%, #000 50%, #000 75%, transparent 100%); }
.viewport-blur span:nth-child(3) { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); mask-image: linear-gradient(to bottom, transparent 50%, #000 75%, #000 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 50%, #000 75%, #000 100%); }
.viewport-blur span:nth-child(4) { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); mask-image: linear-gradient(to bottom, transparent 75%, #000 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 75%, #000 100%); }

/* In the pinned hero the blur lives inside the stage, above the brain (z 0) but
   under the headline and chapter content (z 2); the page-level one is hidden there. */
.viewport-blur--hero {
	position: absolute;
	z-index: 1;
}
html.in-hero .viewport-blur--page { visibility: hidden; }
.home-hero__copy,
.brain-chapter { z-index: 2; }


/* Insights (blog index) — Figma 574:1583. Serif title and intro, then a 3-column
   grid of article cards: image (pale blue placeholder until one is set), blue
   category • date, title. Also used for the meta on single articles. */
.insights,
.insight {
	box-sizing: border-box;
	width: 100%;
	max-width: 1364px; /* 1268px grid + 48px gutters */
	margin: 0 auto;
	padding: 0 48px 120px;
	color: var(--wp--preset--color--slate);
}
.insights__head {
	max-width: 1248px;
	margin: 0 auto;
	padding: 217px 0 34px;
}
.insights .insights__title.wp-block-heading,
.insights .insights__title.wp-block-query-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 64px;
	line-height: 0.95;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--serif-ink);
}
.insights__head .insight-card__meta { margin-bottom: 24px; } /* "Insights" crumb on category pages */
.insights__intro p { margin: 0; }
.insights__intro {
	max-width: 450px;
	margin: 24px 0 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 1.68;
	letter-spacing: 0.03em;
	color: rgba(29, 62, 93, 0.8);
}
.insights__list { margin: 0; padding-top: 64px; }
.insights__grid.wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 96px 10px;
	max-width: 1268px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.insights__grid > li { margin: 0; }
.insight-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
}
.insight-card > * { margin: 0; }
.insight-card__media {
	aspect-ratio: 416 / 400;
	border-radius: 10px;
	background: #E7EEF5;
	overflow: hidden;
}
.insight-card__media .wp-block-post-featured-image,
.insight-card__media .wp-block-post-featured-image a { height: 100%; margin: 0; }
.insight-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.insight-card:hover .insight-card__media img { transform: scale(1.03); }
.insight-card__meta {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #2790F1;
}
.insight-card__meta > * { margin: 0; white-space: nowrap; }
.insight-card__meta a { color: inherit; text-decoration: none; }
.insight-card__meta .wp-block-post-terms + .wp-block-post-date::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin: 0 8px 0 0;
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
	translate: 0 -1px;
}
.insight-card .insight-card__meta { margin-bottom: -12px; } /* 12px from meta to title */
.insight-card .insight-card__title.wp-block-post-title {
	margin: 0;
	max-width: 381px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: 24px;
	line-height: 1.3;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--slate);
	text-wrap: pretty;
}
.insight-card__title a { color: inherit; text-decoration: none; }
/* The whole card is clickable through the title link. */
.insight-card__title a::after { content: ""; position: absolute; inset: 0; }
.insight-card:hover .insight-card__title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.insight-card__title a:focus-visible { outline: none; }
.insight-card:has(.insight-card__title a:focus-visible) { outline: 2px solid var(--wp--preset--color--slate); outline-offset: 6px; border-radius: 12px; }
.insights__pagination { margin-top: 96px; gap: 16px; font-family: var(--wp--preset--font-family--body); }
.insights__pagination a { color: inherit; }
.insights__empty { margin: 0; font-family: var(--wp--preset--font-family--body); }

/* Insights article — Figma 574:1825. Meta (Insights • category • date), serif
   title, byline, a wide thumbnail, then an 853px reading column with 64px between
   blocks; pullquotes sit between hairlines; related articles reuse the cards. */
.insight { max-width: 1440px; padding: 0 64px 64px; }
.insight__head {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 180px 0 64px; /* 116px + 64px in the frame */
}
.insight__head > * { margin: 0; }
.insight__crumb a { color: inherit; text-decoration: none; }
/* Dots between all three meta items. */
.insight .insight-card__meta > * + *::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin: 0 8px 0 0;
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
	translate: 0 -1px;
}
.insight .insight-card__meta .wp-block-post-terms + .wp-block-post-date::before { margin-left: 0; }
.insight .insight__title.wp-block-post-title {
	max-width: 996px;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 64px;
	line-height: 0.95;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--serif-ink);
}
.insight__author .wp-block-post-author__content {
	display: flex;
	gap: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 1.68;
	letter-spacing: 0.03em;
	color: rgba(29, 62, 93, 0.8);
}
.insight__author .wp-block-post-author__content { flex: none; }
.insight__author p { flex: none; width: auto; margin: 0; font-size: inherit; }
.insight__image {
	height: 500px;
	margin: 0;
	border-radius: 10px;
	background: #E7EEF5;
	overflow: hidden;
}
.insight__image .wp-block-post-featured-image,
.insight__image img { width: 100%; height: 100%; margin: 0; object-fit: cover; }
.insight__content {
	max-width: 853px;
	margin: 0 auto;
	padding: 128px 0 64px;
	border-bottom: 1px solid #C0D6EB;
	font-family: var(--wp--preset--font-family--body);
	font-size: 18px;
	line-height: 1.68;
	letter-spacing: 0.03em;
	color: rgba(29, 62, 93, 0.8);
}
.insight__content > * { margin: 0; }
.insight__content > * + * { margin-top: 64px; }
.insight__content > p + p { margin-top: 1.68em; } /* paragraphs: one blank line apart */
.insight__content h2,
.insight__content h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	line-height: 1;
	color: var(--serif-ink);
}
.insight__content h2 { font-size: 40px; }
.insight__content h3 { font-size: 28px; }
.insight__content a { color: #2790F1; }
.insight__content .wp-block-pullquote {
	margin-inline: 0;
	padding: 64px 0;
	border-top: 1px solid #C0D6EB;
	border-bottom: 1px solid #C0D6EB;
	text-align: center;
	font-family: var(--wp--preset--font-family--display);
	font-size: 40px;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--serif-ink);
}
.insight__content .wp-block-pullquote blockquote,
.insight__content .wp-block-pullquote p { margin: 0; font-size: inherit; line-height: inherit; }
.insight__content .wp-block-pullquote cite {
	display: block;
	margin: 0;
	font-style: normal;
	font-size: inherit;
	text-transform: none;
}
.insight__content .wp-block-quote {
	margin-inline: 0;
	padding: 12px 0 12px 24px;
	border-left: 1px solid #C0D6EB;
}
.insight__content .wp-block-quote p { margin: 0; }
.insight__content .wp-block-image img,
.insight__content .wp-block-gallery img { border-radius: 10px; }
.insight__content .wp-block-image figcaption,
.insight__content .wp-block-gallery figcaption {
	margin: 8px 0 0;
	font-size: 14px;
	text-align: right;
}
.insight__content .wp-block-gallery { gap: 32px; }
.insight__content hr,
.insight__content .wp-block-separator {
	height: 0;
	border: 0;
	border-top: 1px solid #C0D6EB;
	opacity: 1;
}
.insight__related { padding: 64px 0 56px; }
.insight__related > * { margin: 0; }
.insight .insight__related-title.wp-block-heading {
	margin: 0 0 32px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 48px;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--serif-ink);
}

/* Services hub — Figma 534:307. Centred title + intro, six 640px cards in two
   columns (first row staggered: left card taller, both bottom-aligned), then the
   "Get the right care" call to action. */
.services {
	box-sizing: border-box;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 64px 128px;
	color: var(--wp--preset--color--slate);
	font-family: var(--wp--preset--font-family--body);
}
.services__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 200px 0 40px;
	text-align: center;
}
.services__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 64px;
	line-height: 0.95;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--serif-ink);
}
.services__intro {
	max-width: 680px;
	margin: 0;
	font-size: 16px;
	line-height: 1.68;
	letter-spacing: 0.03em;
	color: rgba(29, 62, 93, 0.8);
}
/* Crystal radiolarian background (src/radiolarian.js): a fixed full-screen
   three.js canvas behind the page (styled like the home brain, moved by scroll),
   blurred except for a clear spot that follows the pointer. Fades in once drawn. */
.svc-bg {
	position: fixed;
	inset: 0;
	margin: 0 !important; /* WordPress's block gap would push it 16px down from the top edge */
	z-index: -1;
	background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 25%, #B9C9D9 100%); /* the home hero's gradient */
	opacity: 0;
	transition: opacity 1.2s ease;
	pointer-events: none;
}
.svc-bg.is-ready { opacity: 1; }
/* The background carries on behind the inset navy footer (no white surround). */
body:has(.svc-bg) .site-footer { background: transparent; }
.svc-bg canvas { display: block; width: 100%; height: 100%; }
.svc-bg__blur {
	position: absolute;
	inset: 0;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	-webkit-mask-image: radial-gradient(circle 250px at var(--x, 50%) var(--y, 50%), transparent 0%, transparent 30%, #000 100%);
	mask-image: radial-gradient(circle 250px at var(--x, 50%) var(--y, 50%), transparent 0%, transparent 30%, #000 100%);
}
/* Gallery: a staggered column of portrait images, each offset left or right
   (--stagger) at its own width (--img-w), with the service name underneath.
   src/services.js adds the parallax, the reveal and the detail transition. */
.svc-gallery {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4vh;
	padding: 4vh 0 16vh;
}
.svc-slide {
	display: block;
	flex-shrink: 0;
	translate: var(--stagger, 0) 0;
	color: var(--wp--preset--color--slate);
	text-decoration: none;
	outline: none;
}
/* Card: the home chapters' frosted glass card (.brain-stat) — big light number,
   bold name, content at the bottom. Also used for the detail view's tall panel. */
.svc-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 6px;
	padding: clamp(32px, 3.6vw, 52px);
	border-radius: 23px;
	/* A little frostier than the home cards (.brain-stat): the background here is
	   already soft, so the same glass would read thinner. */
	background: rgba(255, 255, 255, 0.4);
	-webkit-backdrop-filter: blur(calc(32px * var(--frost-k, 1))) saturate(1.15);
	backdrop-filter: blur(calc(32px * var(--frost-k, 1))) saturate(1.15);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 18px 50px rgba(29, 62, 93, 0.06); /* bright top edge + faint lift */
	color: var(--wp--preset--color--slate);
	text-align: left;
	transition: background-color 0.5s ease;
}
.svc-slide__img-wrapper {
	position: relative;
	width: var(--img-w, 400px);
	aspect-ratio: 402 / 415;
	container-type: inline-size; /* the name scales with its card, so long words fit */
}
.svc-slide:hover .svc-slide__img-wrapper { background: rgba(255, 255, 255, 0.55); }
/* Sheen for the hover tilt (services.js sets --gx / --gy to the pointer). */
.svc-slide__img-wrapper::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%);
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
}
.svc-slide__img-wrapper.is-tilting::after { opacity: 1; }
.svc-card .svc-slide__num {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 200;
	font-size: clamp(64px, 6.7vw, 96px);
	line-height: 1.05;
	letter-spacing: 0.01em;
}
.svc-card .svc-slide__name {
	margin-top: 10px;
	color: var(--serif-ink);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(20px, 6.8cqw, 34px);
	line-height: 0.98;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	text-wrap: balance;
}
.svc-slide:focus-visible .svc-slide__img-wrapper { outline: 2px solid var(--wp--preset--color--slate); outline-offset: 4px; }

/* Detail view: the clicked card's glass expands to fill the screen (20px inset), the text sits
   on the right. Hidden until opened (display is set by services.js). */
.svc-detail {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 44; /* under the menu pill and panel, so both still work */
}
.svc-detail__bg { position: absolute; inset: 0; background: rgba(240, 245, 250, 0.45); } /* light veil over the page; the full-screen glass card sits on it */
.svc-detail__preview {
	position: fixed;
	inset: 0;
	margin: 0;
	background: rgba(244, 247, 250, 0.97);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	clip-path: inset(0 0 0 0); /* full screen; services.js animates this from the card's shape */
}
/* Same type sizes as the card, so nothing jumps while it morphs. */
.svc-detail__panel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 120px clamp(64px, 12vw, 200px) 80px;
	overflow-y: auto;
	scrollbar-width: none;
	color: var(--wp--preset--color--slate);
	font-family: var(--wp--preset--font-family--body);
}
.svc-detail__panel::-webkit-scrollbar { display: none; }
.svc-detail__key { color: var(--muted); }
/* Focus ring (keyboard only): thin navy, with a little room, instead of the system accent. */
.svc-detail__group { display: none; max-width: 640px; }
.svc-detail__group.active { display: block; }
.svc-detail__eyebrow { margin: 36px 0 0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.svc-detail__title {
	margin: 18px 0 48px;
	color: var(--serif-ink);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(2.5rem, min(3.5vw, 6.4vh), 3.6rem); /* serif uppercase at the footer statement's size (≥ 50px) */
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-wrap: balance;
	overflow-wrap: normal;
}
.svc-detail__item + .svc-detail__item { margin-top: 28px; }
.svc-detail__sub { margin: 0 0 8px; font-family: var(--wp--preset--font-family--body); font-weight: 500; font-size: 18px; }
.svc-detail__text { margin: 0; font-size: 17px; line-height: 1.7; color: rgba(29, 62, 93, 0.8); }
.svc-detail__label { margin: 56px 0 12px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.svc-detail__conditions { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); }
.svc-detail__conditions li { border-bottom: 1px solid var(--hairline); }
.svc-detail__conditions a {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	font-size: 17px;
	color: var(--wp--preset--color--slate);
	text-decoration: none;
	transition: padding 0.45s var(--ease-out);
}
.svc-detail__conditions a:hover { padding-inline: 12px; }
.svc-detail__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 48px; }
.services-cta {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 471px;
	margin-top: 128px;
	border-radius: 32px;
	background: #E3EDF7 url("../images/services-cta.webp") right center / auto 100% no-repeat;
	overflow: hidden;
}
.services-cta__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 64px;
}
.services-cta__eyebrow {
	margin: 0;
	font-size: 20px;
	line-height: 1.54;
	color: #7796B7;
}
.services-cta__title {
	max-width: 533px;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 64px;
	line-height: 0.95;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--serif-ink);
}
.services-cta__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 16px 24px;
	border-radius: 100px;
	background: rgba(192, 214, 235, 0.21);
	color: var(--serif-ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: 18px;
	line-height: 1.1;
	text-decoration: none;
	transition: background-color 0.3s ease;
}
.services-cta__button:hover { background: rgba(192, 214, 235, 0.45); }
.services-cta__button svg { transition: transform 0.3s ease; }
.services-cta__button:hover svg { transform: translateX(3px); }

/* Sub-page blocks fade up out of a soft blur as they come into view (motion.js
   adds .enter, then .is-in with a staggered --enter-d). The selector list matches
   INERTIA in motion.js, so nothing flashes before the script runs. */
.has-motion :is(.rise, .service-card, .services-cta, .insights__grid > li, .insight__image, .insight__content > *, .insight__related-title) {
	opacity: 0;
	transform: translateY(40px) scale(0.985);
	filter: blur(8px);
	transition:
		opacity 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) var(--enter-d, 0s),
		transform 1.1s cubic-bezier(0.215, 0.61, 0.355, 1) var(--enter-d, 0s),
		filter 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) var(--enter-d, 0s);
}
.has-motion .service-card {
	transition:
		opacity 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) var(--enter-d, 0s),
		transform 1.1s cubic-bezier(0.215, 0.61, 0.355, 1) var(--enter-d, 0s),
		filter 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) var(--enter-d, 0s),
		scale 0.45s cubic-bezier(0.215, 0.61, 0.355, 1),
		background-color 0.35s ease;
}
/* Keep each block's own hover transitions alongside the scroll-in one. */
.has-motion :is(.doc-row, .visit-card, .quick-link, .contact-card, .info-card).rise {
	transition:
		opacity 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) var(--enter-d, 0s),
		transform 1.1s cubic-bezier(0.215, 0.61, 0.355, 1) var(--enter-d, 0s),
		filter 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) var(--enter-d, 0s),
		color 0.45s ease,
		background-color 0.4s ease,
		border-radius 0.4s ease;
}
.has-motion .pv-aspects__panel.rise {
	transition:
		opacity 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) var(--enter-d, 0s),
		transform 1.1s cubic-bezier(0.215, 0.61, 0.355, 1) var(--enter-d, 0s),
		filter 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) var(--enter-d, 0s),
		flex-grow 1.1s cubic-bezier(0.65, 0, 0.25, 1);
}
.has-motion .enter.is-in {
	opacity: 1;
	transform: none;
	filter: none;
}
@media (prefers-reduced-motion: reduce) {
	.has-motion :is(.rise, .service-card, .services-cta, .insights__grid > li, .insight__image, .insight__content > *, .insight__related-title) { opacity: 1; transform: none; filter: none; }
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* =========================================================================
   Shared components (sub-pages + home story)
   ========================================================================= */
:root {
	/* Serif (Sorts Mill Goudy) text on light backgrounds: the footer's deep navy. */
	--serif-ink: #1E2A5A;
	--ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
	--ease-io: cubic-bezier(0.76, 0, 0.24, 1);
	--ice: #F7FAFD;
	--mist: #E3EDF7;
	--hairline: #C0D6EB;
	--accent: #2790F1;
	--muted: #7796B7;
	--gutter: 64px;
}
.eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: 0.06em;
	color: var(--muted);
}
.eyebrow--light { color: rgba(255, 255, 255, 0.72); }
.h-display {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(2.5rem, 3.6vw + 0.5rem, 3.75rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--serif-ink);
	text-wrap: balance;
}
.lede {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 18px;
	line-height: 1.6;
	letter-spacing: 0.01em;
	color: rgba(29, 62, 93, 0.8);
	text-wrap: pretty;
}

/* Buttons: pill, arrow slides on hover, gently pulled toward the pointer (.magnetic). */
.btn {
	--mx: 0px;
	--my: 0px;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 18px 28px;
	border: 1px solid transparent;
	border-radius: 100px;
	background: var(--wp--preset--color--slate);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0.03em;
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	translate: var(--mx) var(--my);
	transition: translate 0.5s var(--ease-out), background-color 0.35s ease, color 0.35s ease;
}
.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: #0F2A44;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s var(--ease-out);
}
.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); }
.btn__arrow { display: inline-block; transition: transform 0.45s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn:focus-visible { outline: 2px solid var(--wp--preset--color--slate); outline-offset: 4px; }
.btn--light { background: #fff; color: var(--wp--preset--color--slate); }
.btn--light::before { background: var(--mist); }
.btn--ghost { background: transparent; border-color: var(--hairline); color: var(--wp--preset--color--slate); }
.btn--ghost::before { background: var(--ice); }

/* Text links: arrow nudges; underline draws in from the left. */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: 15px;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--slate);
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
	padding-bottom: 3px;
	transition: background-size 0.45s var(--ease-out);
}
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow span { display: inline-block; transition: transform 0.45s var(--ease-out); }
.link-arrow:hover span { transform: translateX(4px); }
.link-line {
	color: inherit;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) right bottom / 0 1px no-repeat;
	transition: background-size 0.45s var(--ease-out);
}
.link-line:hover { background-size: 100% 1px; background-position: left bottom; }

.pill-list,
.lang-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pill-list li {
	padding: 9px 16px;
	border-radius: 100px;
	background: var(--mist);
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--slate);
	transition: background-color 0.3s ease, color 0.3s ease, translate 0.4s var(--ease-out);
}
.pill-list li:hover { background: var(--wp--preset--color--slate); color: #fff; translate: 0 -2px; }
/* Languages: hovering rolls the name up into a greeting in that language. */
.lang-list li {
	position: relative;
	height: 44px;
	padding: 0 20px;
	border: 1px solid var(--hairline);
	border-radius: 100px;
	overflow: hidden;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	line-height: 42px;
	color: var(--wp--preset--color--slate);
	cursor: default;
	transition: background-color 0.35s ease, border-color 0.35s ease;
}
.lang-list li::after {
	content: attr(data-hello);
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #fff;
	transform: translateY(100%);
	transition: transform 0.5s var(--ease-io);
}
.lang-list li:hover { background: var(--wp--preset--color--slate); border-color: var(--wp--preset--color--slate); color: transparent; }
.lang-list li:hover::after { transform: none; }

/* Marquee: endless credentials ticker; pauses on hover. */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track {
	display: flex;
	gap: 56px;
	width: max-content;
	animation: marquee 40s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { white-space: nowrap; }
.marquee__track span::before { content: "✦"; margin-right: 56px; opacity: 0.4; font-size: 0.6em; vertical-align: middle; }
@keyframes marquee { to { transform: translateX(calc(-50% - 28px)); } }

/* Image reveal: a mask wipes up from the bottom while the photo settles from a slight zoom. */
.reveal-img { overflow: hidden; }
.reveal-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.has-motion .reveal-img { clip-path: inset(100% 0 0 0 round 32px); transition: clip-path 1.3s var(--ease-io) var(--enter-d, 0s); }
.has-motion .reveal-img > img,
.has-motion .reveal-img .wp-block-post-featured-image img { scale: 1.18; transition: scale 1.8s var(--ease-out) var(--enter-d, 0s); }
.has-motion .reveal-img.is-in { clip-path: inset(0 0 0 0 round 32px); }
.has-motion .reveal-img.is-in > img,
.has-motion .reveal-img.is-in .wp-block-post-featured-image img { scale: 1; }
/* Parallax photos are taller than their frame and drift as you scroll (motion.js). */
img[data-parallax] { height: 116% !important; margin-top: -8%; will-change: translate; }

/* Accordions (details/summary; height animated in menu.js). */
.acc { border-top: 1px solid var(--hairline); }
.acc:last-child { border-bottom: 1px solid var(--hairline); }
.acc__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 28px 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--wp--preset--color--slate);
	list-style: none;
	cursor: pointer;
	transition: padding-left 0.45s var(--ease-out), color 0.3s ease;
}
.acc__q::-webkit-details-marker { display: none; }
.acc__q:hover { padding-left: 8px; }
.acc__icon {
	position: relative;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ice);
	transition: background-color 0.35s ease, transform 0.5s var(--ease-io);
}
.acc__icon::before,
.acc__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 1.5px;
	margin: -0.75px 0 0 -7px;
	background: var(--wp--preset--color--slate);
	transition: transform 0.5s var(--ease-io), background-color 0.35s ease;
}
.acc__icon::after { transform: rotate(90deg); }
.acc[open] .acc__icon { background: var(--wp--preset--color--slate); transform: rotate(180deg); }
.acc[open] .acc__icon::before,
.acc[open] .acc__icon::after { background: #fff; }
.acc[open] .acc__icon::after { transform: rotate(0deg); }
.acc__a { overflow: hidden; }
.acc__a p {
	margin: 0;
	padding: 0 64px 28px 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 1.6;
	color: rgba(29, 62, 93, 0.7);
}
.acc-group__title {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 28px;
	color: var(--serif-ink);
}

/* Filter chips (Insights topics, Conditions areas). */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 11px 18px;
	border: 1px solid var(--hairline);
	border-radius: 100px;
	background: transparent;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--slate);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, translate 0.4s var(--ease-out);
}
.chip:hover { translate: 0 -2px; border-color: var(--wp--preset--color--slate); }
.chip.is-active { background: var(--wp--preset--color--slate); border-color: var(--wp--preset--color--slate); color: #fff; }
.chip__count { font-size: 11px; opacity: 0.6; translate: 0 -4px; }

/* Section heading row: eyebrow + title, optional link to the right. */
.hs-head {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 16px 32px;
	margin-bottom: 56px;
}
.hs-head .eyebrow { grid-column: 1 / -1; }
.hs-head .h-display { max-width: 820px; }

/* Shared page widths. */
.home-story > section,
.pr > section,
.pr > nav,
.conditions > section,
.contact > section,
.condition-body {
	box-sizing: border-box;
	max-width: 1440px;
	margin: 160px auto 0;
	padding: 0 var(--gutter);
}

/* =========================================================================
   Home — after the brain story
   ========================================================================= */
.home-story { position: relative; z-index: 3; background: #fff; padding-bottom: 160px; }
.home-story > section:first-of-type { margin-top: 0; padding-top: 160px; } /* the stats moved onto the Dr. Hina slide; the quote now opens the story */
.hs-stats__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hs-stat {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding-top: 32px;
}
.hs-stat::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--hairline);
	transform-origin: left;
	transition: transform 1.2s var(--ease-io) var(--enter-d, 0s);
}
.has-motion .hs-stat:not(.is-in)::before { transform: scaleX(0); }
.hs-stat__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(4rem, 7vw, 7.5rem);
	line-height: 0.85;
	letter-spacing: -0.03em;
	color: var(--serif-ink);
	font-variant-numeric: tabular-nums;
}
.hs-stat__label {
	max-width: 220px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	line-height: 1.45;
	letter-spacing: 0.03em;
	color: rgba(29, 62, 93, 0.7);
}

/* Patient care philosophy (augen-style): one centred statement in light sans that fills in word
   by word (.scroll-highlight), then the three dimensions of healing
   as expanding duotone panels (the About page's .pv-aspects). */
.hs-quote { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hs-quote__label { margin: 0; font-family: var(--wp--preset--font-family--body); font-weight: 300; font-size: 15px; letter-spacing: -0.01em; color: rgba(15, 16, 18, 0.45); }
.hs-quote__quote { max-width: 1040px; margin: 36px 0 0; padding: 0; border: 0; }
.hs-quote__quote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: clamp(1.9rem, 2.9vw, 3.1rem);
	line-height: 1.18;
	letter-spacing: -0.03em;
	color: #0F1012;
	text-wrap: balance;
}
.hs-quote__quote cite {
	display: block;
	margin-top: 32px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: 15px;
	font-style: normal;
	letter-spacing: -0.01em;
	color: rgba(15, 16, 18, 0.45);
}
.hs-aspects { margin-top: 7vh; width: min(1200px, 100%); }
.hs-aspects .pv-aspects__word { font-family: var(--wp--preset--font-family--body); font-weight: 300; text-transform: none; letter-spacing: -0.02em; }
.hs-aspects .pv-label { font-family: var(--wp--preset--font-family--body); font-weight: 300; font-size: 14px; letter-spacing: -0.01em; text-transform: none; color: rgba(242, 242, 244, 0.6); }

/* Services: sticky split. The left half (heading + one illustration) stays pinned while the four
   services scroll on the right; the one crossing the middle of the screen brightens and the
   illustration cross-fades to it (motion.js). Option 2, the horizontal gallery, is in
   backups/2026-10-12-home-services-gallery. */
.hs-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6vw; align-items: start; }
.hs-split__aside { align-self: stretch; }
.hs-split__sticky { position: sticky; top: 14vh; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.hs-services__label { margin: 0; font-family: var(--wp--preset--font-family--body); font-weight: 300; font-size: 15px; letter-spacing: -0.01em; color: rgba(15, 16, 18, 0.45); }
.hs-split__sticky .h-display { margin: 0; }
.hs-split__media { position: relative; width: 100%; margin-top: 4vh; aspect-ratio: 640 / 408; border-radius: 23px; overflow: hidden; background: #F8FAFB; }
.hs-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; scale: 1.04; transition: opacity 0.8s ease, scale 1.2s var(--ease-out); }
.hs-split__media img.is-active { opacity: 1; scale: 1; }
.hs-split__count { position: absolute; left: 22px; bottom: 18px; font-family: var(--wp--preset--font-family--body); font-weight: 300; font-size: 13px; letter-spacing: -0.01em; color: rgba(15, 16, 18, 0.45); }
.hs-split__list { margin: 0; padding: 18vh 0 22vh; list-style: none; }
.hs-split__item { margin: 0; border-top: 1px solid rgba(15, 16, 18, 0.1); }
.hs-split__item:last-child { border-bottom: 1px solid rgba(15, 16, 18, 0.1); }
.hs-split__item a { display: flex; flex-direction: column; min-height: 46vh; justify-content: center; padding: 6vh 0; color: inherit; text-decoration: none;
	opacity: 0.3; transition: opacity 0.6s ease; }
.hs-split__item.is-active a, .hs-split__item a:hover { opacity: 1; }
.hs-split__item .hs-gcard__num { margin-top: 0; }
.hs-split__item .hs-gcard__text { max-width: 440px; }
.hs-gcard__num { margin-top: 28px; font-family: var(--wp--preset--font-family--body); font-weight: 200; font-size: clamp(48px, 4.4vw, 72px); line-height: 1; letter-spacing: -0.02em; color: var(--serif-ink); }
.hs-gcard__name { margin-top: 12px; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.4rem, 1.8vw, 1.9rem); line-height: 1; text-transform: uppercase; color: var(--serif-ink); }
.hs-gcard__text { margin-top: 14px; font-family: var(--wp--preset--font-family--body); font-weight: 300; font-size: 14px; line-height: 1.5; letter-spacing: -0.01em; color: rgba(15, 16, 18, 0.5); }
.hs-gcard__more { margin-top: 18px; font-family: var(--wp--preset--font-family--body); font-weight: 400; font-size: 14px; color: var(--serif-ink); opacity: 0.6; transition: opacity 0.4s ease; }
.hs-gcard:hover .hs-gcard__more { opacity: 1; }
.hs-services__progress { position: absolute; left: 6vw; right: 6vw; bottom: 32px; height: 1px; background: rgba(29, 62, 93, 0.15); }
.hs-services__progress span { position: absolute; inset: 0; background: var(--serif-ink); transform-origin: left; transform: scaleX(0); }

/* Collaboration (option 3, richer): the section pins over the theatre photo, graded cool and
   vignetted to navy, zooming out slowly. A dark frosted panel slides up with the headline; then
   each specialist takes the stage in turn — huge, thin, on the right with its count — before
   lifting away and settling into the panel's list, and a meter fills a sixth at a time. All
   scrubbed by the section's own scroll (view timeline), so it reverses.
   Earlier versions: backups/2026-10-12-home-collab-opt3-basic, -opt2, and -collab (original). */
.home-story > .hs-room { max-width: none; padding: 0; }
.hs-room { position: relative; height: 420svh; view-timeline: --hs-room block; }
.hs-room__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #06070E; }
.hs-room__media { position: absolute; inset: 0; filter: brightness(0.85); } /* already graded navy-blue: just dimmed a touch, plus the vignette */
.hs-room__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* One photo per specialist, stacked; each fades in as its name comes on stage. */
.hs-room__img:not([style*="--i:0"]) { opacity: 0; }
.hs-room__vignette { position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(ellipse 26% 26% at 52% 38%, rgba(6, 7, 14, 0.6) 0%, rgba(6, 7, 14, 0.3) 55%, transparent 100%), /* tones down the theatre lights behind the big names */
		radial-gradient(ellipse 70% 80% at 50% 40%, transparent 0%, rgba(6, 7, 14, 0.35) 55%, rgba(6, 7, 14, 0.9) 100%),
		linear-gradient(90deg, rgba(6, 7, 14, 0.9) 0%, rgba(6, 7, 14, 0.7) 28%, rgba(6, 7, 14, 0.15) 50%, rgba(6, 7, 14, 0.25) 62%, rgba(6, 7, 14, 0.7) 100%),
		linear-gradient(0deg, rgba(6, 7, 14, 0.6) 0%, transparent 45%); }
/* No card: the text sits straight on the photo, which the vignette darkens behind it. */
.hs-room__panel { position: absolute; z-index: 2; left: clamp(24px, 6vw, 110px); top: 0; bottom: 0; width: min(560px, 38vw); display: flex; flex-direction: column; justify-content: center; color: #F2F2F4; } /* vertically centred */
.hs-room__label { margin: 0; font-family: var(--wp--preset--font-family--body); font-weight: 300; font-size: 14px; letter-spacing: -0.01em; color: rgba(242, 242, 244, 0.55); }
.hs-room__title { margin: 18px 0 0; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 60px; line-height: 0.95; letter-spacing: -0.01em; text-transform: uppercase; color: #fff; text-wrap: balance; } /* 60px+: uppercase serif (type rule) */
.hs-room__text { margin: 18px 0 0; font-family: var(--wp--preset--font-family--body); font-weight: 300; font-size: 14px; line-height: 1.5; letter-spacing: -0.01em; color: rgba(242, 242, 244, 0.5); }
.hs-room__list { margin: 24px 0 0; padding: 0; list-style: none; }
.hs-room__list li { display: grid; grid-template-columns: 56px 1fr; align-items: baseline; padding: 9px 0; border-top: 1px solid rgba(242, 242, 244, 0.1); }
.hs-room__count { font-family: var(--wp--preset--font-family--body); font-weight: 300; font-size: 12px; letter-spacing: -0.01em; color: rgba(242, 242, 244, 0.4); }
.hs-room__name { font-family: var(--wp--preset--font-family--body); font-weight: 300; font-size: 16px; letter-spacing: -0.02em; color: #fff; }
.hs-room__meter { position: relative; height: 1px; margin-top: 14px; background: rgba(242, 242, 244, 0.12); }
.hs-room__meter span { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }
/* The stage: each specialist in turn, huge and thin on the right. */
.hs-room__stage { position: absolute; z-index: 1; inset: 0 5vw 0 52vw; margin: 0; padding: 0; list-style: none; pointer-events: none; }
/* The big name's top lines up with the paragraph on the left (--room-top, measured in motion.js). */
.hs-room__stage li { position: absolute; left: 0; right: 0; top: var(--room-top, 24%); display: flex; flex-direction: column; gap: 18px; opacity: 0; }
.hs-room__bigcount { font-family: var(--wp--preset--font-family--body); font-weight: 300; font-size: 15px; letter-spacing: -0.01em; color: rgba(242, 242, 244, 0.7); }
.hs-room__bigcount em { font-style: normal; color: rgba(242, 242, 244, 0.4); }
.hs-room__bigname { font-family: var(--wp--preset--font-family--body); font-weight: 200; font-size: clamp(3rem, 5.4vw, 6rem); line-height: 0.95; letter-spacing: -0.05em; color: #fff; text-wrap: balance; }
@supports (view-timeline: --a) {
	@keyframes hs-room-zoom { from { scale: 1.45; } to { scale: 1; } }
	/* The theatre starts in darkness and the lights come up (levels: brightness + contrast). */
	@keyframes hs-room-lights { from { filter: brightness(0.12) contrast(1.6) saturate(0.6); } to { filter: brightness(0.85) contrast(1) saturate(1); } }
	@keyframes hs-room-item { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
	@keyframes hs-room-big {
		0% { opacity: 0; translate: 0 70px; filter: blur(10px); }
		28%, 62% { opacity: 1; translate: 0 0; filter: blur(0); }
		100% { opacity: 0; translate: 0 -90px; filter: blur(8px); }
	}
	@keyframes hs-room-meter { from { transform: scaleX(0); } to { transform: scaleX(1); } }
	.hs-room__media {
		animation: hs-room-zoom linear both, hs-room-lights ease-in-out both;
		animation-timeline: --hs-room, --hs-room;
		animation-range: entry 60% contain 100%, entry 30% contain 14%; /* lights start coming up while the section is still scrolling in */
	}
	@keyframes hs-room-photo { from { opacity: 0; } to { opacity: 1; } }
	.hs-room__img:not([style*="--i:0"]) { animation: hs-room-photo linear both; animation-timeline: --hs-room; animation-range: contain calc(15% + var(--i) * 12.5%) contain calc(21% + var(--i) * 12.5%); }
	/* The panel's label, title and paragraph aren't scrubbed: once the section pins they reveal
	   line by line and finish on their own, like the Dr. Hina slide (.reveal--pinned, motion.js). */
	/* Each specialist: on stage over a 12% slice, then lands in the list as it leaves. */
	.hs-room__stage li { animation: hs-room-big linear both; animation-timeline: --hs-room; animation-range: contain calc(18% + var(--i) * 12.5%) contain calc(31% + var(--i) * 12.5%); }
	.hs-room__list li { animation: hs-room-item linear both; animation-timeline: --hs-room; animation-range: contain calc(27% + var(--i) * 12.5%) contain calc(31% + var(--i) * 12.5%); }
	.hs-room__meter span { animation: hs-room-meter linear both; animation-timeline: --hs-room; animation-range: contain 18% contain 93%; }
}

.hs-intl {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	align-items: center;
	gap: 96px;
}
.hs-intl__media { aspect-ratio: 4 / 5; margin: 0; border-radius: 32px; }
.hs-intl__text { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }

.hs-cta { position: relative; min-height: 640px; display: flex; align-items: center; }
.hs-cta__media { position: absolute; inset: 0 var(--gutter); margin: 0; border-radius: 32px; }
.hs-cta__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(15, 42, 68, 0.88) 0%, rgba(15, 42, 68, 0.55) 45%, rgba(15, 42, 68, 0.05) 100%);
}
.hs-cta__text {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	max-width: 560px;
	padding: 64px;
	color: #fff;
}
.hs-cta__text > p:not(.eyebrow) { margin: 0; font-family: var(--wp--preset--font-family--body); font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.hs-cta__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(3rem, 5vw, 5rem);
	line-height: 0.92;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: #fff;
}


/* =========================================================================
   Footer
   ========================================================================= */
.site-footer { position: relative; z-index: 3; padding: 0 20px 20px; background: #fff; }
.site-footer__inner {
	box-sizing: border-box;
	/* Exactly one screen (inset 20px, like the heroes): top section, wordmark and
	   bottom line spread down it; everything scales with the screen height. */
	display: flex;
	flex-direction: column;
	height: calc(100svh - 40px);
	min-height: 500px;
	max-height: 1000px;
	margin-top: 20px;
	padding: clamp(40px, 8vh, 96px) 64px clamp(20px, 3vh, 32px);
	border-radius: 32px;
	/* Deep navy, the same family as the About hero / timeline / MDT backgrounds; flat. */
	background: #0D1020;
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	overflow: hidden;
}
.site-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 64px;
}
.site-footer__lead { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.site-footer__eyebrow { margin: 0; font-size: 15px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.5); }
.site-footer__statement {
	margin: 0 0 12px;
	max-width: 520px;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, min(3.4vw, 6.5vh), 3.5rem);
	line-height: 0.95;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: #fff;
}
.site-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.site-footer__col a { color: #fff; }
.site-footer__label { margin: 0 0 8px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
.site-footer__address { margin: 12px 0 0; line-height: 1.6; }
.site-footer__wordmark {
	display: flex;
	flex: 1;
	align-items: safe center; /* centred, but if it's too tall it hangs down past the line below instead of up into the button */
	justify-content: center;
	min-height: 0;
	margin: 0;
	padding: clamp(24px, 5vh, 64px) 0; /* equal space above and below the letters */
	font-family: var(--wp--preset--font-family--display);
	container-type: size; /* the letters size themselves to this box (cq units) */
	text-transform: uppercase;
	white-space: nowrap;
}
/* The letters: box trimmed to cap height and baseline, so centring is visual. */
.site-footer__wordmark span {
	display: block;
	/* The ink of the D and A sits on the content edges: sized so the letters span
	   the full width, then pulled out past the glyphs' side space and the balancing
	   padding (~0.118em each side, measured). */
	font-size: 18.69cqw;
	letter-spacing: 0.1em;
	padding-left: 0.1em; /* balances the space letter-spacing adds after the last letter */
	margin-inline: -0.118em;
	line-height: 1;
	text-box: trim-both cap alphabetic;
	color: transparent;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.02));
	-webkit-background-clip: text;
	background-clip: text;
}
.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px 32px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
}
.site-footer__bottom p { margin: 0; }
.site-footer__legal { display: flex; gap: 20px; }
.site-footer__legal a { color: rgba(255, 255, 255, 0.75); }

/* =========================================================================
   Page heroes (Patient Resources, Conditions)
   ========================================================================= */

/* Quick links: numbered tiles that fill navy on hover. */
.quick-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 96px !important; }
.quick-link {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 220px;
	padding: 32px;
	border-radius: 24px;
	background: var(--ice);
	color: var(--wp--preset--color--slate);
	font-family: var(--wp--preset--font-family--body);
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	transition: color 0.45s ease;
}
.quick-link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--preset--color--slate);
	clip-path: circle(0% at 90% 90%);
	transition: clip-path 0.7s var(--ease-io);
}
.quick-link:hover { color: #fff; }
.quick-link:hover::before { clip-path: circle(150% at 90% 90%); }
.quick-link__num { font-size: 13px; letter-spacing: 0.06em; opacity: 0.6; }
.quick-link__title { margin-top: auto; font-weight: 500; font-size: 20px; }
.quick-link__text { font-size: 15px; opacity: 0.75; }
.quick-link__arrow { position: absolute; top: 28px; right: 32px; font-size: 20px; transition: transform 0.5s var(--ease-out); }
.quick-link:hover .quick-link__arrow { transform: translateY(6px); }

.split-section { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 96px; align-items: start; }
.split-section__head { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 20px; }
.split-section__media { aspect-ratio: 4 / 3; margin: 16px 0 0; border-radius: 24px; }
.faq-groups { display: flex; flex-direction: column; gap: 64px; }

.doc-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); }
.doc-row {
	position: relative;
	display: grid;
	grid-template-columns: 80px 1fr auto auto 24px;
	align-items: center;
	gap: 24px;
	padding: 28px 16px;
	border-bottom: 1px solid var(--hairline);
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--slate);
	isolation: isolate;
	transition: color 0.45s ease;
}
/* Hover: a soft ice fill wipes in from the left while the row eases right. */
.doc-row::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 16px;
	background: var(--ice);
	clip-path: inset(0 100% 0 0 round 16px);
	transition: clip-path 0.7s var(--ease-io);
}
.doc-row:hover::before { clip-path: inset(0 0 0 0 round 16px); }
.doc-row > * { transition: translate 0.6s var(--ease-out), opacity 0.4s ease, background-color 0.4s ease; }
.doc-row:hover > :not(.doc-row__arrow) { translate: 12px 0; }
.doc-row__num { font-size: 13px; letter-spacing: 0.06em; color: var(--muted); }
.doc-row__title { font-size: 22px; font-weight: 400; }
.doc-row__type { padding: 6px 12px; border-radius: 100px; background: var(--mist); font-size: 12px; letter-spacing: 0.06em; }
.doc-row:hover .doc-row__type { background: #fff; }
.doc-row__status { font-size: 14px; color: var(--muted); }
.doc-row__arrow { justify-self: end; font-size: 18px; opacity: 0; translate: -10px 0; }
.doc-row:hover .doc-row__arrow { opacity: 1; translate: 0 0; }

.pr-intl .info-card { width: 100%; }
.info-card { box-sizing: border-box; padding: 32px; border-radius: 24px; background: var(--ice); font-family: var(--wp--preset--font-family--body); }
.info-card p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: rgba(29, 62, 93, 0.8); }
.info-card__title { margin: 0; font-family: var(--wp--preset--font-family--body); font-weight: 500; font-size: 20px; color: var(--wp--preset--color--slate); }

/* Condition cards: invert to navy on hover; the arrow turns to point the way. */
.condition-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}
.condition-card { margin: 0; }
.condition-card[hidden] { display: none; }
.condition-card a {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	min-height: 280px;
	box-sizing: border-box;
	padding: 32px;
	border-radius: 24px;
	background: var(--ice);
	color: var(--wp--preset--color--slate);
	font-family: var(--wp--preset--font-family--body);
	text-decoration: none;
	transition: background-color 0.45s ease, color 0.45s ease, translate 0.5s var(--ease-out);
}
.condition-card a:hover { background: var(--wp--preset--color--slate); color: #fff; translate: 0 -4px; }
.condition-card__num { font-size: 13px; letter-spacing: 0.06em; opacity: 0.55; }
.condition-card__area {
	align-self: flex-start;
	padding: 6px 12px;
	border-radius: 100px;
	background: rgba(39, 144, 241, 0.1);
	color: var(--accent);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: background-color 0.45s ease, color 0.45s ease;
}
.condition-card a:hover .condition-card__area { background: rgba(255, 255, 255, 0.14); color: #fff; }
.condition-card__title { margin-top: auto; font-weight: 500; font-size: 22px; line-height: 1.2; }
.condition-card__text { font-size: 15px; line-height: 1.5; opacity: 0.75; }
.condition-card__arrow {
	position: absolute;
	top: 28px;
	right: 28px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	color: var(--wp--preset--color--slate);
	transform: rotate(-45deg);
	transition: transform 0.5s var(--ease-io);
}
.condition-card a:hover .condition-card__arrow { transform: rotate(0deg); }

/* Condition detail. */
.page-hero .insight-card__meta { flex-wrap: wrap; }
.page-hero .insight-card__meta a { color: inherit; text-decoration: none; }
.page-hero .insight-card__meta > * + *::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-right: 8px;
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
	translate: 0 -1px;
}
.condition-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 96px; align-items: start; }
.condition-toc {
	position: sticky;
	top: 120px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	color: var(--wp--preset--color--slate);
}
.condition-content { display: flex; flex-direction: column; gap: 96px; max-width: 860px; }
.condition-block { display: flex; flex-direction: column; gap: 24px; scroll-margin-top: 120px; }
.condition-block > .btn { align-self: flex-start; margin-top: 16px; } /* sized to its text, not the column */
main.condition { padding-bottom: 160px; } /* room after the last block, before the footer */
.condition-lede {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: clamp(1.5rem, 2.2vw, 2.125rem);
	line-height: 1.35;
	color: var(--wp--preset--color--slate);
	text-wrap: pretty;
}
.condition-text { margin: 0; font-family: var(--wp--preset--font-family--body); font-size: 18px; line-height: 1.7; color: rgba(29, 62, 93, 0.8); }
.condition-text--muted { color: var(--muted); font-size: 16px; }
.symptom-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.symptom-list li {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 28px;
	border-radius: 24px;
	background: var(--ice);
	font-family: var(--wp--preset--font-family--body);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--wp--preset--color--slate);
}
/* Numbers come from a counter, so the practice just types a plain list in the editor. */
.symptom-list { counter-reset: symptom; }
.symptom-list li::before {
	counter-increment: symptom;
	content: counter(symptom, decimal-leading-zero);
	font-size: 13px;
	font-weight: 300;
	letter-spacing: 0.06em;
	color: var(--muted);
}
.related-links { margin: 0 0 24px; padding: 0; list-style: none; border-top: 1px solid var(--hairline); font-family: var(--wp--preset--font-family--body); }
.related-links li { border-bottom: 1px solid var(--hairline); }
.related-links a,
.related-links li.is-soon {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 0;
	font-size: 18px;
	color: var(--wp--preset--color--slate);
	text-decoration: none;
	transition: padding 0.45s var(--ease-out);
}
.related-links a:hover { padding-left: 12px; padding-right: 12px; }
.related-links__soon { font-size: 14px; color: var(--muted); }

/* =========================================================================
   Contact
   ========================================================================= */
.contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 96px !important; }
.contact-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-height: 260px;
	box-sizing: border-box;
	padding: 36px;
	border-radius: 24px;
	background: var(--ice);
	font-family: var(--wp--preset--font-family--body);
}
.contact-card__label { margin: 0 0 auto; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.contact-card__value { margin: 0; font-size: 22px; font-weight: 400; line-height: 1.35; color: var(--wp--preset--color--slate); text-decoration: none; }
p.contact-card__value { font-size: 17px; font-weight: 300; line-height: 1.6; }
a.contact-card__value { background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size 0.45s var(--ease-out); }
a.contact-card__value:hover { background-size: 100% 1px; }
.contact-card .link-arrow { margin-top: 16px; }
.copy-btn {
	position: relative;
	margin-top: 16px;
	padding: 10px 16px;
	border: 1px solid var(--hairline);
	border-radius: 100px;
	background: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--slate);
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.3s ease;
}
.copy-btn:hover { border-color: var(--wp--preset--color--slate); }
.copy-btn span { display: block; transition: transform 0.45s var(--ease-io); }
.copy-btn::after {
	content: "Copied ✓";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--slate);
	color: #fff;
	transform: translateY(100%);
	transition: transform 0.45s var(--ease-io);
}
.copy-btn.is-copied span { transform: translateY(-100%); }
.copy-btn.is-copied::after { transform: none; }
.consult-band {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	max-width: calc(1440px - 128px) !important;
	padding: 64px !important;
	border-radius: 32px;
	background: #0F2A44 url("../images/photo-theatre.webp") right 55% / 65% auto no-repeat;
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	box-sizing: border-box;
	width: calc(100% - 128px);
	position: relative;
	overflow: hidden;
}
.consult-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0F2A44 45%, rgba(15, 42, 68, 0.15)); }
.consult-band > * { position: relative; }
.consult-band__text { display: flex; flex-direction: column; gap: 16px; max-width: 520px; }
.consult-band__text p:not(.eyebrow) { margin: 0; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); }
.consult-band__title { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 52px; line-height: 0.95; text-transform: uppercase; color: #fff; }
.visit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.visit-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px;
	border-top: 1px solid var(--hairline);
	font-family: var(--wp--preset--font-family--body);
	transition: background-color 0.4s ease, border-radius 0.4s ease;
}
.visit-card:hover { background: var(--ice); border-radius: 0 0 24px 24px; }
.visit-card__num { font-size: 13px; letter-spacing: 0.06em; color: var(--muted); }
.visit-card__title { margin: 24px 0 0; font-family: var(--wp--preset--font-family--body); font-weight: 500; font-size: 20px; color: var(--wp--preset--color--slate); }
.visit-card p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(29, 62, 93, 0.75); }
.enquiry { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 96px; align-items: start; }
.enquiry__head { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 20px; }
.enquiry-form.consult { max-width: none; margin: 0; padding: 48px; border-radius: 28px; background: var(--ice); display: flex; flex-direction: column; gap: 24px; }

/* =========================================================================
   Insights listing — featured article + topics + latest
   ========================================================================= */
.insights-featured { max-width: 1268px; margin: 64px auto 0; }
.insights-featured__list { margin: 0; padding: 0; list-style: none; }
.featured-card {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 56px;
	align-items: center;
	margin: 0;
}
.featured-card__media { aspect-ratio: 16 / 11; margin: 0; border-radius: 28px; background: #E7EEF5; }
.featured-card__media .wp-block-post-featured-image { height: 100%; margin: 0; }
.featured-card__media img { width: 100%; height: 100%; object-fit: cover; }
.featured-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.featured-card__body > * { margin: 0; }
.insights .featured-card__title.wp-block-post-title {
	max-width: none;
	color: var(--serif-ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.25rem, 3vw, 3rem);
	line-height: 1;
	letter-spacing: -0.01em;
}
.featured-card__excerpt p,
.insight-card__excerpt p { margin: 0; font-family: var(--wp--preset--font-family--body); font-size: 17px; line-height: 1.6; color: rgba(29, 62, 93, 0.75); }
.insight-card__excerpt p { font-size: 15px; }
.featured-card .wp-block-read-more { padding-bottom: 3px; }
.insights .insights__section-title.wp-block-heading {
	max-width: 1268px;
	margin: 160px auto 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 48px;
	line-height: 1;
	color: var(--serif-ink);
}
.insights .insights__list { padding-top: 48px; }
.insight-card { gap: 20px; }
.insight-card__media { position: relative; }
.insight-card__media::after {
	content: "Read";
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	margin: -44px 0 0 -44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(calc(8px * var(--frost-k, 1)));
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--slate);
	scale: 0.4;
	opacity: 0;
	transition: scale 0.5s var(--ease-out), opacity 0.3s ease;
	pointer-events: none;
}
.insight-card:hover .insight-card__media::after { scale: 1; opacity: 1; }

/* Generic prose pages (legal etc.) and 404. */
.prose-page__intro p { margin: 0; font-family: var(--wp--preset--font-family--body); font-size: 16px; letter-spacing: 0.04em; color: var(--muted); }
.legal-draft { padding: 20px 24px; border-radius: 16px; background: #FFF4E5; color: #92400E !important; font-size: 15px !important; }
.not-found { box-sizing: border-box; max-width: 1440px; min-height: 80vh; margin: 0 auto; padding: 220px 64px 120px; display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.not-found__title { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(4rem, 9vw, 8rem); line-height: 0.85; letter-spacing: -0.03em; text-transform: uppercase; color: var(--serif-ink); }
.not-found__links { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 0; }

/* Entry for the new blocks (same look as .rise; image reveals use their own wipe). */
.has-motion :is(.hs-stat, .quick-link, .condition-card, .doc-row, .visit-card, .contact-card) { will-change: opacity, transform; }
.prose-page .insight__content { padding-top: 48px; }
.site-footer__credit { margin: 16px 0 0; font-size: 12px; color: rgba(255, 255, 255, 0.4); }
.site-footer__credit a { color: rgba(255, 255, 255, 0.6); }

/* =========================================================================
   Sub-page heroes (Patient Resources, Conditions, a condition, Contact)
   One screen tall: gradient panel with the title block anchored low-left and a
   framed photo on the right (absolutely filled, so its proportions never stretch
   the hero). The bottom blur stays off while you're at the top (motion.js).
   ========================================================================= */
.page-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
	box-sizing: border-box;
	height: calc(100svh - 40px);
	min-height: 520px;
	max-height: 940px;
	max-width: none !important;
	margin: 20px !important;
	padding: 0 !important;
	border-radius: 32px;
	background: linear-gradient(180deg, #FFFFFF 0%, #EEF3F9 52%, #C9D6E3 100%);
	overflow: hidden;
	isolation: isolate;
}
/* Soft light bloom behind the title. */
.page-hero::before {
	content: "";
	position: absolute;
	left: -10%;
	bottom: -30%;
	z-index: -1;
	width: 60%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
}
.page-hero__text {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 22px;
	min-width: 0;
	padding: 120px 64px 56px;
}
.page-hero__text > * { margin: 0; }
.page-hero__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(3.25rem, 4.2vw + 3vh, 7.5rem);
	line-height: 0.88;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--serif-ink);
	text-wrap: balance;
}
.page-hero__intro {
	max-width: 460px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 18px;
	line-height: 1.6;
	color: rgba(29, 62, 93, 0.8);
	text-wrap: pretty;
}
.page-hero__media {
	position: relative;
	margin: 14px 14px 14px 0;
	border-radius: 22px;
	overflow: hidden;
	background: var(--mist);
}
.page-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.page-hero__media img[data-parallax] { height: 116% !important; top: -8%; margin-top: 0; }
.page-hero__media .page-hero__img--neck { object-position: 66% center; }
/* A condition: no panel (the image is the only rounded shape, no double border), and shorter, so the image is
   shorter too. The image sits in from the right as the text does from the left, starting under the site bar. */
.page-hero--condition { height: 64svh; min-height: 520px; max-height: 660px; border-radius: 0; background: none; overflow: visible; }
.page-hero--condition::before { content: none; }
.page-hero--condition .page-hero__media { margin: 120px 64px 0 0; }
/* The condition's content follows close after the hero, so it starts to show above the fold. */
.page-hero--condition + .condition-body { margin-top: 24px; }
/* A condition: long names, so a smaller title. */
.page-hero--condition .page-hero__title { font-size: clamp(2.75rem, 3vw + 2.6vh, 5.5rem); line-height: 0.92; }
/* Contact: one huge line. */
.page-hero--contact .page-hero__title { font-size: clamp(4rem, 6vw + 3vh, 10rem); line-height: 0.82; white-space: nowrap; }
.page-hero--contact .page-hero__intro { max-width: 520px; }
html.at-top .viewport-blur--page { opacity: 0; }
/* Opening the menu brings the pill back even if it has scrolled off with the footer. */
.menu-open .site-bar { translate: none !important; }

/* Hina symbol: small and quiet in the menu's bottom strip and the footer. */
.hina-mark { display: block; width: 100%; height: auto; }
.mm__mark { flex: none; width: 26px; color: var(--wp--preset--color--slate); opacity: 0.55; transition: opacity 0.3s ease, rotate 0.6s var(--ease-out); }
.mm__foot:hover .mm__mark { opacity: 0.9; rotate: -8deg; }
.mm__contact { margin-right: auto; }
.site-footer__mark { width: 40px; margin-bottom: 8px; color: #fff; opacity: 0.9; }
/* Short screens: no room for the wordmark, so let the rest breathe instead. */
@media (max-height: 720px) {
	.site-footer__wordmark { display: none; }
	.site-footer__top { flex: 1; align-content: center; }
}

/* Home: "scroll to explore" hint, no text. A small white mouse outline whose dot
   glides down and fades, on a loop. Sits above the hero's bottom blur; fades in once
   the hero text has landed and away as soon as scrolling starts (--hero-p). */
.scroll-hint {
	position: absolute;
	left: 50%;
	bottom: clamp(24px, 4.5vh, 44px);
	z-index: 3;
	width: 24px;
	height: 38px;
	box-sizing: border-box;
	margin-left: -12px;
	border: 1.5px solid rgba(255, 255, 255, 0.9);
	border-radius: 14px;
	background: none;
	pointer-events: none;
	opacity: 0;
	translate: 0 8px;
	transition: opacity 0.9s ease, translate 1.1s var(--ease-out);
}
.hero-revealed .scroll-hint {
	opacity: clamp(0, calc(1 - var(--hero-p, 0) * 12), 1);
	translate: 0 0;
}
.scroll-hint__dot {
	position: absolute;
	top: 7px;
	left: 50%;
	width: 3px;
	height: 7px;
	margin-left: -1.5px;
	border-radius: 2px;
	background: #fff;
	animation: scroll-hint 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes scroll-hint {
	0% { transform: translateY(0); opacity: 0; }
	20% { opacity: 1; }
	70% { transform: translateY(12px); opacity: 0; }
	100% { transform: translateY(12px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.scroll-hint__dot { animation: none; }
}

/* Frosted cards near the top of the screen: Chrome's backdrop blur samples a
   margin around the card, and above the viewport there's nothing to sample, so
   it blurs in a dark band. As a card's top edge comes within ~100px of the top of
   the screen its blur eases to nothing (scroll-driven, so it reverses as you
   scroll back). --frost-k scales each card's blur; it inherits, so pseudo-element
   glass (the Insights cards) follows its card. */
@property --frost-k {
	syntax: "<number>";
	inherits: true;
	initial-value: 1;
}
@keyframes frost-near-top {
	from { --frost-k: 1; }
	to { --frost-k: 0; }
}
@supports (animation-timeline: view()) {
	.svc-slide .svc-card,
	.insight-card__media {
		animation: frost-near-top linear both;
		animation-timeline: view();
		animation-range: exit-crossing -100px exit-crossing 0%;
	}
}

/* =========================================================================
   Contact — experimental "Luminara"-style layout (patterns/contact.php).
   Editorial two-tone statements, small dot labels, key/value facts, a photo
   banner with a frosted card, a bento of contact cards, FAQ-style visit info.
   Previous version: backups/2026-10-08-contact-luminara/.
   ========================================================================= */
body:has(.cx) { background: #F5F7FA; }
body:has(.cx) .site-footer { background: transparent; }
.cx {
	--cx-mute: rgba(29, 62, 93, 0.38);
	box-sizing: border-box;
	max-width: 1440px;
	margin: 0 auto !important;
	padding: 0 64px 160px;
	color: var(--wp--preset--color--slate);
	font-family: var(--wp--preset--font-family--body);
}
.cx-mute { color: var(--cx-mute); }
/* Small dot label (section marker). */
.cx-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--slate);
}
.cx-label__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--slate); box-shadow: 0 0 0 4px rgba(29, 62, 93, 0.12); }
.cx-label--light { color: #fff; }
.cx-label--light .cx-label__dot { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2); }

/* Intro: label on the left, statement + facts on the right. */
.cx-intro {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	gap: 48px;
	padding: 200px 0 72px;
}
.cx-intro .cx-label { align-self: start; margin-top: 14px; }
.cx-statement.reveal {
	margin: 0;
	max-width: 22em;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: clamp(2.25rem, 2.6vw + 1rem, 48px); /* stays under 50px, so sans (type rule) */
	line-height: 1.08;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--slate);
	text-transform: none;
	text-wrap: pretty;
}
.cx-intro__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; margin-top: 64px; }
.cx-facts { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 14px 56px; margin: 0; }
.cx-facts div { display: flex; gap: 8px; font-size: 16px; line-height: 1.4; }
.cx-facts dt { color: var(--cx-mute); }
.cx-facts dt::after { content: " /"; }
.cx-facts dd { margin: 0; font-weight: 400; white-space: nowrap; }
.cx-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cx-pills li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 100px;
	background: #E3EDF7;
	font-size: 14px;
	font-weight: 400;
}
.cx-pills__mark {
	width: 14px;
	height: 14px;
	background: var(--wp--preset--color--slate);
	clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); /* four-point spark */
}

/* Photo banner with a frosted card. */
.cx-banner {
	position: relative;
	height: min(78vh, 720px);
	min-height: 520px;
	border-radius: 32px;
	overflow: hidden;
}
.cx-banner__media { position: absolute; inset: 0; margin: 0; border-radius: 32px; overflow: hidden; }
.cx-banner__media img { position: absolute; inset: 0; width: 100%; height: 116% !important; top: -8%; max-width: none; object-fit: cover; }
.cx-banner__card {
	position: absolute;
	left: 32px;
	bottom: 32px;
	width: min(460px, calc(100% - 64px));
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	padding: 36px;
	border-radius: 24px;
	background: rgba(15, 42, 68, 0.38);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	color: #fff;
}
.cx-banner__card > p:not(.cx-label) { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
.cx-banner__title { margin: 0; font-family: var(--wp--preset--font-family--body); font-weight: 400; font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; color: #fff; }

/* Bento of contact cards. */
.cx-bento {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: minmax(300px, auto);
	gap: 16px;
	margin-top: 16px;
}
.cx-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	padding: 36px;
	border-radius: 28px;
	background: #fff;
	overflow: hidden;
	box-sizing: border-box;
}
.cx-card--tint { background: linear-gradient(160deg, #EAF2FA 0%, #D3E2F1 100%); }
.cx-card--dark { grid-row: span 2; background: linear-gradient(170deg, #16324F 0%, #0F2A44 100%); color: #fff; }
.cx-card--wide { grid-column: span 2; }
.cx-card__label { margin: 0; font-size: 14px; font-weight: 400; letter-spacing: 0.02em; color: var(--cx-mute); }
.cx-card--dark .cx-card__label { color: rgba(255, 255, 255, 0.55); }
.cx-card__body { display: flex; flex-direction: column; gap: 10px; }
.cx-card__body--row { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 32px; width: 100%; }
.cx-card__big { font-weight: 300; font-size: clamp(2rem, 2.6vw, 2.75rem); line-height: 1.05; letter-spacing: -0.02em; color: inherit; text-decoration: none; }
.cx-card__big--sm { font-size: clamp(1.5rem, 1.7vw, 1.9rem); }
.cx-card__line { font-size: 15px; line-height: 1.5; color: rgba(29, 62, 93, 0.7); text-decoration: none; }
.cx-card--dark .cx-card__line { color: rgba(255, 255, 255, 0.72); }
.cx-card__title { margin: 0; font-family: var(--wp--preset--font-family--body); font-weight: 400; font-size: clamp(2rem, 2.4vw, 2.6rem); line-height: 1.05; letter-spacing: -0.02em; color: #fff; }
.cx-card__address { margin: 0; font-size: clamp(1.25rem, 1.4vw, 1.5rem); line-height: 1.4; letter-spacing: -0.01em; }
/* Dotted sphere on the dark card. */
.cx-card__dots {
	position: absolute;
	right: -30%;
	bottom: -28%;
	width: 120%;
	aspect-ratio: 1;
	border-radius: 50%;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.35) 1.1px, transparent 1.6px);
	background-size: 11px 11px;
	-webkit-mask-image: radial-gradient(circle at 40% 35%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 70%);
	mask-image: radial-gradient(circle at 40% 35%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 70%);
	pointer-events: none;
}
.cx-card--dark > *:not(.cx-card__dots) { position: relative; }

/* Two-column sections: label + two-tone heading left, content right. */
.cx-split {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 96px;
	margin-top: 160px;
	scroll-margin-top: 120px;
}
.cx-split__head { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.cx-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: clamp(2rem, 1.8vw + 1rem, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: pretty;
}
.cx-faq .acc__q { font-size: 20px; padding-block: 26px; }
.cx-faq .acc__a p { max-width: 560px; font-size: 16px; line-height: 1.7; color: rgba(29, 62, 93, 0.75); }
.cx-faq__num { display: inline-block; min-width: 44px; font-size: 13px; letter-spacing: 0.06em; color: var(--cx-mute); vertical-align: 2px; }
.cx-form.consult { padding: 40px; border-radius: 28px; background: #fff; }

/* =========================================================================
   About (patterns/about.php), after sobha-privy-collection.com. Quiet luxury: black / charcoal / white, light uppercase
   serif headings, tiny letter-spaced labels, huge stacked words.
   ========================================================================= */
body:has(.pv) { background: #fff; }
body:has(.pv) .site-footer { background: transparent; }
.pv { --pv-black: #0B0B0B; --pv-char: #1A1919; --pv-grey: #717170; margin: 0 !important; max-width: none !important; font-family: var(--wp--preset--font-family--body); color: #fff; }
.pv-serif { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; }
.pv-label { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
.pv-label--dark { color: #1A1919; }
.pv-grey { color: var(--pv-grey); }
.pv-black { background: var(--pv-black); padding: 22vh 8vw; }
.pv-charcoal { background: var(--pv-char); padding: 22vh 8vw; }
.pv-white { background: #fff; color: #1A1919; padding: 22vh 8vw; }
/* Hero. */
/* Hero: background → title → portrait, so the title sits behind Dr. Hina and in front of the
   backdrop. The title drifts up a little faster than he does as you scroll (depth). */
.pv-hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: #fff; color: #1A1919; text-align: center; }
.pv-hero__bg { position: absolute; inset: 0;
	background: radial-gradient(ellipse 60% 70% at 50% 60%, #F6F7F9 0%, #FBFBFC 50%, #FFFFFF 100%); }
.pv-hero__label { position: absolute; left: 0; right: 0; top: 19vh; z-index: 3; }
.pv-hero__label.reveal { text-transform: uppercase; color: #1A1919; }
/* Title stacked above him; his head rises in front of "Precision". */
.pv-hero__title.reveal { position: absolute; left: 0; right: 0; top: 24vh; z-index: 1; margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 400;
	font-size: clamp(40px, 5vw, 64px); line-height: 0.95; letter-spacing: 0.01em; color: var(--serif-ink); text-transform: uppercase; }
.pv-hero__portrait { position: absolute; left: 50%; bottom: 0; z-index: 2; width: auto; height: min(78svh, 900px); max-width: none; translate: -50% 0;
	-webkit-mask-image: linear-gradient(#000 78%, transparent 100%); mask-image: linear-gradient(#000 78%, transparent 100%); }
/* Parallax, scrubbed by the hero's own scroll-out (view-timeline): the backdrop drifts slowest,
   Dr. Hina lags well behind the page, and the title lifts away a little faster than it. */
@supports (view-timeline: --a) {
	.pv-hero { view-timeline: --pv-hero block; }
	@keyframes pv-hero-title { to { translate: 0 -12vh; } }
	@keyframes pv-hero-portrait { to { translate: -50% 26vh; } }
	@keyframes pv-hero-bg { to { translate: 0 40vh; } }
	.pv-hero__title.reveal, .pv-hero__label.reveal, .pv-hero__portrait, .pv-hero__bg { animation-timeline: --pv-hero; animation-range: exit 0% exit 100%; animation-fill-mode: both; animation-timing-function: linear; }
	.pv-hero__title.reveal, .pv-hero__label.reveal { animation-name: pv-hero-title; }
	.pv-hero__portrait { animation-name: pv-hero-portrait; }
	.pv-hero__bg { animation-name: pv-hero-bg; }
}
/* After the timeline: one rhythm for every section — a split header (label + serif title on
   the left, lede on the right), then visuals: bento cards, photos, diagrams. White / navy / white. */
.pv-navy { background: radial-gradient(ellipse 80% 60% at 50% 40%, #12152A 0%, #0D1020 50%, #06070E 100%); color: #fff; padding: 0 8vw 22vh; }
.pv-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 6vw; align-items: start; }
.pv-split__head { display: flex; flex-direction: column; gap: 22px; }
.pv-h2 { font-size: clamp(2.2rem, 3.4vw, 3.4rem); line-height: 1.02; color: #1A1919; }
.pv-split--dark .pv-h2 { color: #fff; }
.pv-lede { margin: 0; color: #1A1919; }
.pv-split--dark .pv-lede { color: rgba(255, 255, 255, 0.82); }
.pv-body { margin: 0; color: rgba(26, 25, 25, 0.7); }
.pv-navy .pv-body { color: rgba(234, 242, 255, 0.7); }

/* ---- Our approach ---- */
.pv-approach { padding-top: 20vh; padding-bottom: 18vh; }
/* Our approach, after augen.pro: a large light statement, one wide photo that drifts inside its
   frame, and a hairline-ruled index. Generous white space; motion is parallax + rises only. */
.ap-statement { margin: 0; font-family: "Inter Tight", var(--wp--preset--font-family--body); font-weight: 300; font-size: clamp(1.6rem, 2.4vw, 2.6rem); line-height: 1.22; letter-spacing: -0.025em; color: #1A1919; }
.ap-statement em { font-style: normal; color: #2B3A8C; }
.ap-photo { margin: 18vh 0 0; }
.ap-photo__frame { position: relative; height: min(82svh, 860px); border-radius: 24px; overflow: hidden; background: #0D1020; }
.ap-photo__frame img { position: absolute; inset: 0; width: 100%; height: 124% !important; top: -12%; max-width: none; object-fit: cover; }
.ap-photo__cap { display: flex; justify-content: space-between; gap: 24px; margin-top: 18px; font-size: 13px; letter-spacing: -0.01em; color: rgba(0, 0, 0, 0.4); }
.ap-index { margin-top: 18vh; }
.ap-index__body { display: flex; flex-direction: column; gap: 9vh; }
.ap-index__body .pv-body a { color: #1A1919; text-decoration: underline; text-decoration-color: rgba(26, 25, 25, 0.25); text-underline-offset: 3px; transition: text-decoration-color 0.3s ease; }
.ap-index__body .pv-body a:hover { text-decoration-color: #1A1919; }
.ap-rows { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(26, 25, 25, 0.12); }
.ap-rows li { display: grid; grid-template-columns: 64px 1fr; align-items: baseline; padding: 26px 0; border-top: 1px solid rgba(26, 25, 25, 0.12); }
.ap-rows__num { font-size: 11px; font-weight: 500; letter-spacing: 0.2em; color: rgba(26, 25, 25, 0.4); }
.ap-rows__word { font-family: "Inter Tight", var(--wp--preset--font-family--body); font-weight: 300; font-size: clamp(1.4rem, 2vw, 2.1rem); letter-spacing: -0.025em; color: #1A1919;
	transition: color 0.4s ease, translate 0.6s var(--ease-out); }
.ap-rows li:hover .ap-rows__word { color: #2B3A8C; translate: 10px 0; }
.pv-approach { padding-bottom: 20vh; }
.pv-approach .pv-holistic { margin-top: 22vh; }

.pv-outcomes__ring { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(234, 242, 255, 0.5); }
.pv-outcomes__ring::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px rgba(156, 200, 255, 0.9); }
.pv-outcomes__ring::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(156, 200, 255, 0.6); animation: pv-ping 2.8s ease-out infinite; }
@keyframes pv-ping { from { scale: 1; opacity: 0.9; } to { scale: 1.9; opacity: 0; } }

/* Holistic: quote, then the paragraph fills in word by word, then three circles scale in. */
.pv-holistic { display: flex; flex-direction: column; align-items: center; gap: 32px; max-width: 900px; margin: 0 auto; text-align: center; }
.pv-quote { margin: 0; font-size: clamp(1.9rem, 2.8vw, 3rem); line-height: 1.1; color: #1A1919; }
.pv .pv-holistic__text { margin: 0; font-family: "Inter Tight", var(--wp--preset--font-family--body); font-weight: 300; font-size: clamp(1.35rem, 1.9vw, 1.9rem); line-height: 1.4; letter-spacing: -0.02em; color: #1A1919; }
/* Aspects of healing: three tall panels in one duotone treatment (black-and-white under a navy
   wash); the hovered panel widens and warms to colour. */
.pv-aspects { display: flex; gap: 14px; width: min(1100px, 84vw); height: min(64vh, 620px); margin: 10vh 0 0; padding: 0; list-style: none; }
.pv-aspects__panel { position: relative; flex: 1 1 0; min-width: 0; border-radius: 24px; overflow: hidden; background: #0D1020;
	transition: flex-grow 0.9s cubic-bezier(.65, 0, .25, 1); }
.pv-aspects:hover .pv-aspects__panel { flex-grow: 0.85; }
.pv-aspects .pv-aspects__panel:hover { flex-grow: 1.6; }
/* The photo is sized to the panel's open width and centred, so widening the panel only uncovers
   more of it (no rescaling); hover just warms it from black-and-white to colour. */
.pv-aspects__panel img { position: absolute; top: 0; left: 50%; width: max(100%, min(620px, 48vw)); max-width: none; height: 100%; object-fit: cover; translate: -50% 0;
	filter: grayscale(1) contrast(1.05) brightness(0.92); transition: filter 1.1s cubic-bezier(0.65, 0, 0.25, 1); }
.pv-aspects__panel::after { content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(18, 21, 42, 0.25) 0%, rgba(18, 21, 42, 0.35) 45%, rgba(6, 7, 14, 0.85) 100%); mix-blend-mode: multiply; transition: opacity 0.9s ease; }
.pv-aspects__panel:hover img { filter: none; }
.pv-aspects__panel:hover::after { opacity: 0.7; }
.pv-aspects__label { position: absolute; left: 28px; right: 28px; bottom: 26px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; text-align: left; }
.pv-aspects__label .pv-label { color: rgba(255, 255, 255, 0.75); }
.pv-aspects__word { font-size: clamp(1.25rem, 1.5vw, 1.6rem); line-height: 1; color: #fff; white-space: nowrap; }

/* ---- MDT ---- */
.pv-mdt__media { position: relative; height: 78svh; margin: 0 -8vw 16vh; overflow: clip; } /* clip so the img's view() zoom tracks the page */
.pv-mdt__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0.8; }
.pv-mdt__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(6, 7, 14, 0.15) 30%, #0D1020 100%); }
@supports (animation-timeline: view()) {
	@keyframes pv-mdt-zoom { from { scale: 1.35; } to { scale: 1; } }
	.pv-mdt__media img { animation: pv-mdt-zoom linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
}

/* Network: six specialities on a ring around "Your case"; the links draw in with scroll and
   small signals travel inward along them. */
.pv-orbit { position: relative; width: min(640px, 80vw); aspect-ratio: 1; margin: 14vh auto 6vh; }
.pv-orbit__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pv-orbit__ring { fill: none; stroke: rgba(234, 242, 255, 0.1); stroke-width: 1; }
.pv-orbit__ring--inner { stroke-dasharray: 2 6; stroke: rgba(234, 242, 255, 0.16); }
.pv-orbit__line { fill: none; stroke: rgba(184, 210, 255, 0.45); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pv-orbit__signal { fill: #fff; filter: drop-shadow(0 0 4px rgba(156, 200, 255, 0.95)); }
@supports (animation-timeline: view()) {
	@keyframes pv-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
	.pv-orbit__line { animation: pv-draw linear both; animation-timeline: --pv-orbit; animation-range: entry calc(30% + var(--i) * 8%) cover calc(42% + var(--i) * 4%); }
	.pv-orbit { view-timeline: --pv-orbit block; }
	@keyframes pv-node-in { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
	.pv-orbit__node { animation: pv-node-in linear both; animation-timeline: --pv-orbit; animation-range: entry calc(40% + var(--i) * 8%) cover calc(46% + var(--i) * 4%); }
}
.pv-orbit__core { position: absolute; left: 50%; top: 50%; width: 132px; aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; border-radius: 50%;
	background: radial-gradient(circle, rgba(70, 86, 160, 0.55), rgba(18, 21, 42, 0.9) 70%); border: 1px solid rgba(234, 242, 255, 0.35); box-shadow: 0 0 60px rgba(120, 160, 255, 0.25); }
.pv-orbit__core::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(156, 200, 255, 0.5); animation: pv-ping 3s ease-out infinite; }
.pv-orbit__nodes { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.pv-orbit__node { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pv-orbit__dot { width: 18px; height: 18px; border-radius: 50%; background: #0D1020; border: 1px solid rgba(234, 242, 255, 0.8); box-shadow: 0 0 18px rgba(156, 200, 255, 0.35); transition: scale 0.4s ease, background 0.4s ease; }
.pv-orbit__name { position: absolute; top: calc(100% + 10px); white-space: nowrap; font-family: var(--wp--preset--font-family--display); font-size: clamp(1rem, 1.25vw, 1.25rem); text-transform: uppercase; letter-spacing: 0.02em; color: #fff; }
/* Labels above the dot for the top node and the two upper side nodes, so no link crosses them. */
.pv-orbit__node:nth-child(1) .pv-orbit__name,
.pv-orbit__node:nth-child(2) .pv-orbit__name,
.pv-orbit__node:nth-child(6) .pv-orbit__name { top: auto; bottom: calc(100% + 10px); }
.pv-orbit__node:hover .pv-orbit__dot { scale: 1.5; background: #fff; }
.pv-orbit__more { position: absolute; left: 0; right: 0; bottom: -10vh; text-align: center; color: rgba(234, 242, 255, 0.55); }

/* Tailored plan: photo with a frosted card overlapping it. */
.pv-plan { position: relative; display: grid; grid-template-columns: 7fr 5fr; align-items: center; margin-top: 22vh; }
.pv-plan__media { position: relative; margin: 0; aspect-ratio: 16 / 11; border-radius: 24px; overflow: hidden; }
.pv-plan__media img { position: absolute; inset: 0; width: 100%; height: 116% !important; top: -8%; max-width: none; object-fit: cover; }
.pv-plan__card { position: relative; z-index: 1; margin-left: -8vw; display: flex; flex-direction: column; gap: 22px; padding: 44px; border-radius: 24px;
	background: rgba(18, 21, 42, 0.55); -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); }

/* ---- Team ---- */
.pv-team { padding-top: 20vh; }
.pv-team__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 10vh 0 0; padding: 0; list-style: none; }
.pv-team__grid .pv-member:nth-child(even) { margin-top: 10vh; }
.pv-member { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 3 / 4.4; background: linear-gradient(160deg, #F1F3F6, #E3E7ED); }
.pv-member__photo { position: absolute; inset: 0; display: grid; place-items: center; transition: scale 0.9s var(--ease-out, cubic-bezier(.2,.7,.2,1)); }
.pv-member__initial { font-family: var(--wp--preset--font-family--display); font-size: 4rem; color: rgba(26, 25, 25, 0.08); }
.pv-member__info { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; border-radius: 16px;
	background: rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.pv-member__role { color: rgba(26, 25, 25, 0.55); }
.pv-member__name { font-size: clamp(1.1rem, 1.3vw, 1.35rem); line-height: 1.1; color: #1A1919; }
.pv-member__bio { margin: 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.6s var(--ease-out, cubic-bezier(.2,.7,.2,1)), opacity 0.4s ease; }
.pv-member:hover .pv-member__photo { scale: 1.06; }
.pv-member:hover .pv-member__bio { max-height: 6em; opacity: 1; }

/* Privy: sharp-edged image reveals, and room for the longest stacked word. */
.has-motion .pv .reveal-img { clip-path: inset(100% 0 0 0); }
.has-motion .pv .reveal-img.is-in { clip-path: inset(0 0 0 0); }

/* ==========================================================================
   About — career timeline (inc/about-timeline.php + src/timeline.js), after nasdaq50.com/stories.
   A tall section whose sticky inner pane holds a particle ribbon that slides with scroll.
   ========================================================================== */
.tl {
	--tl-ink: #EAF2FF;
	--tl-cyan: #9CC8FF;
	position: relative;
	height: calc(100svh + var(--tl-n, 6) * 55svh);
	margin: 0 !important;
	/* Same deep navy as the About hero. */
	background:
		radial-gradient(ellipse 50% 60% at 50% 56%, rgba(34, 40, 78, 0.6) 0%, rgba(24, 28, 56, 0.35) 45%, transparent 100%),
		radial-gradient(ellipse 80% 90% at 50% 55%, #12152A 0%, #0D1020 45%, #090B16 75%, #06070E 100%);
	color: var(--tl-ink);
	font-family: var(--wp--preset--font-family--body);
}
.tl__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.tl__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.tl__head { position: absolute; left: clamp(24px, 5vw, 80px); top: clamp(96px, 16vh, 160px); z-index: 2; pointer-events: none;
	opacity: calc(1 - var(--tl-p, 0) * 6); translate: calc(var(--tl-p, 0) * -40vw) 0; }
.tl__label { margin: 0 0 18px; font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tl-cyan); }
.tl__title { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 400;
	font-size: clamp(2.2rem, 3.4vw, 3.4rem); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; color: #fff; }

.tl__marks { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; z-index: 3; pointer-events: none; }
.tl-mark { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.tl-mark:has(.tl-mark__ring:hover), .tl-mark.is-open { z-index: 2; }
/* Info sits above the ring on a stem. */
.tl-mark__info { position: absolute; left: 0; bottom: 92px; width: 280px; translate: -50% 0; text-align: center; pointer-events: none; }
.tl-mark__info::after { content: ""; position: absolute; left: 50%; top: calc(100% + 12px); width: 1px; height: 34px; background: linear-gradient(rgba(234, 242, 255, 0.7), rgba(234, 242, 255, 0.15)); }
.tl-mark__info::before { content: ""; position: absolute; left: 50%; top: calc(100% + 8px); width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #fff; }
.tl-mark__meta { display: flex; justify-content: center; align-items: baseline; gap: 12px; margin: 0 0 10px; }
.tl-mark__year { font-size: 15px; font-weight: 300; letter-spacing: 0.06em; }
.tl-mark__stage { font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tl-cyan); }
.tl-mark__title { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 1.45rem; line-height: 1.1; color: #fff; }
.tl-mark__place { margin: 8px 0 0; font-size: 12px; letter-spacing: 0.04em; color: rgba(234, 242, 255, 0.7); }
.tl-mark__title, .tl-mark__place { opacity: 0.55; transition: opacity 0.5s ease; }
.tl-mark.is-near .tl-mark__title, .tl-mark.is-near .tl-mark__place,
.tl-mark:has(.tl-mark__ring:hover) .tl-mark__title, .tl-mark:has(.tl-mark__ring:hover) .tl-mark__place,
.tl-mark.is-open .tl-mark__title, .tl-mark.is-open .tl-mark__place { opacity: 1; }
/* The ring on the ribbon. */
.tl-mark__ring { position: absolute; left: -42px; top: -42px; width: 84px; height: 84px; padding: 0; border-radius: 50%; cursor: pointer; pointer-events: auto;
	background: rgba(234, 242, 255, 0.02); border: 1px solid rgba(234, 242, 255, 0.55); box-shadow: 0 0 24px rgba(156, 200, 255, 0.18), inset 0 0 18px rgba(156, 200, 255, 0.12);
	transition: scale 0.6s cubic-bezier(.2,.7,.2,1), border-color 0.4s ease, box-shadow 0.4s ease; }
.tl-mark__ring::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgba(234, 242, 255, 0.18);
	transition: inset 0.6s cubic-bezier(.2,.7,.2,1), border-color 0.4s ease; }
.tl-mark__ring::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%;
	border: 1px solid #fff; transition: scale 0.5s ease, background 0.4s ease; }
.tl-mark.is-near .tl-mark__ring { scale: 1.12; border-color: rgba(234, 242, 255, 0.85); }
.tl-mark__ring:hover, .tl-mark__ring:focus-visible, .tl-mark.is-open .tl-mark__ring { scale: 1.25; border-color: #fff; outline: none;
	box-shadow: 0 0 40px rgba(156, 200, 255, 0.4), inset 0 0 24px rgba(156, 200, 255, 0.25); }
.tl-mark__ring:hover::before, .tl-mark.is-open .tl-mark__ring::before { inset: -16px; border-color: rgba(234, 242, 255, 0.35); }
.tl-mark__ring:hover::after, .tl-mark.is-open .tl-mark__ring::after { scale: 1.6; background: #fff; }
/* Detail card below the ring: opens on hover, focus or click. */
.tl-mark__more { position: absolute; left: 0; top: 74px; width: 300px; margin: 0; padding: 18px 22px; translate: -50% 10px; text-align: left;
	font-size: 14px; font-weight: 200; line-height: 1.7; letter-spacing: 1px; color: rgba(234, 242, 255, 0.6); border-radius: 16px; pointer-events: none;
	background: rgba(18, 21, 42, 0.55); border: 0;
	-webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
	opacity: 0; visibility: hidden; transition: opacity 0.45s ease, translate 0.6s cubic-bezier(.2,.7,.2,1), visibility 0s linear 0.45s; }
.tl-mark:has(.tl-mark__ring:hover) .tl-mark__more,
.tl-mark:has(.tl-mark__ring:focus-visible) .tl-mark__more,
.tl-mark.is-open .tl-mark__more { opacity: 1; visibility: visible; translate: -50% 0; transition-delay: 0s; }

.tl__progress { position: absolute; left: clamp(24px, 5vw, 80px); right: clamp(24px, 5vw, 80px); bottom: 24px; height: 1px; background: rgba(234, 242, 255, 0.14); z-index: 2; opacity: clamp(0, (1 - var(--tl-p, 0)) / 0.06, 1); } /* fades out over the last 6% of the timeline */
.tl__progress span { position: absolute; inset: 0; background: rgba(234, 242, 255, 0.7); transform-origin: left; transform: scaleX(0); }

html.tl-pinned .viewport-blur--page { opacity: 0; }

/* Pill over dark backgrounds (motion.js samples what is under it): white text, a fainter
   white pill and a softer divider. The colour fades over 0.35s as sections pass under it. */
.site-bar__menu, .site-bar__cta { transition: color 0.35s ease; }
.site-bar--dark { color: #fff; background-color: rgba(255, 255, 255, 0.08); box-shadow: none; }
.site-bar--dark .site-bar__cta::before { background: linear-gradient(90deg, rgba(0, 0, 0, 0.18) 50%, rgba(255, 255, 255, 0.16) 50%); }
.site-bar--dark .site-bar__menu:focus-visible,
.site-bar--dark .site-bar__cta:focus-visible { outline-color: #fff; }
html.bar-probe *:not(.site-bar, .site-bar *) { pointer-events: auto !important; }

/* About body text: Inter Tight (variable 100–900, self-hosted, OFL) for every paragraph on the
   About page, white and dark sections alike — Light (300), slightly tight tracking (-0.02em),
   1.5 line height; 18px ledes, 16px body. The timeline cards go a step finer (200). On white
   it's 40% black; dark sections keep their own pale colours. Labels and headings unchanged. */
.pv .pv-lede,
.pv .pv-body,
.pv .pv-member__bio,
.pv .tl-mark__more,
.pv .tl-mark__place { font-family: "Inter Tight", var(--wp--preset--font-family--body); font-weight: 300; }
.pv .tl-mark__more { font-weight: 200; }
.pv .pv-lede,
.pv .pv-body,
.pv .pv-member__bio { line-height: 1.5; letter-spacing: -0.02em; }
.pv .pv-lede { font-size: 18px; }
.pv .pv-body,
.pv .pv-member__bio { font-size: 16px; }
.pv-white .pv-lede,
.pv-white .pv-body,
.pv-white .pv-member__bio { color: rgba(0, 0, 0, 0.4); }
/* Thin rendering: macOS draws text heavier by default; antialiased/grayscale gives the finer stroke. */
.pv { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* About type, after isomeet.com (measured): everything regular weight — thinness comes from the
   face and colour, not light weights. Body 16/18px at 40% black (white) or pale (navy), -0.02em,
   1.5; large statements like their H2 (regular, black, -0.01em, 1.2); small titles like their
   H3 (medium 500, black, tight). */
.pv .pv-lede,
.pv .pv-body,
.pv .pv-member__bio,
.pv .tl-mark__more,
.pv .tl-mark__place,
.pv .pv-holistic__text { font-weight: 300; }
.pv .tl-mark__more { letter-spacing: -0.02em; line-height: 1.5; }
.pv .ap-statement { font-weight: 300; font-size: clamp(1.8rem, 2.6vw, 2.8rem); line-height: 1.2; letter-spacing: -0.01em; color: #000; }
.pv .pv-holistic__text { font-size: clamp(1.5rem, 2.1vw, 2.2rem); line-height: 1.25; letter-spacing: -0.01em; color: #000; }
.pv .ap-rows__word { font-weight: 400; font-size: clamp(1.25rem, 1.6vw, 1.75rem); letter-spacing: -0.013em; color: #000; }

/* =========================================================================
   About type system, after augen.pro (measured: one sans at weight 350, sentence case, -0.02em,
   tight leading; no uppercase or letter-spaced caps) and isomeet.com (40% grey body). One voice:
   Inter Tight 350 for everything after the hero; the hero's Goudy title stays the one serif.
   ========================================================================= */
.pv { --sans: "Inter Tight", var(--wp--preset--font-family--body); --ink: #0F1012; --ink-2: rgba(15, 16, 18, 0.45); }
/* Everything sans, sentence case, untracked, Book weight. */
.pv > :not(.pv-hero) :is(.pv-serif, .pv-label, .pv-h2, .pv-quote, .pv-lede, .pv-body, .pv-member__bio, .pv-member__name, .pv-aspects__word,
	.pv-orbit__name, .pv-specs li, .ap-statement, .ap-rows__word, .ap-rows__num, .pv-holistic__text,
	.tl__label, .tl__title, .tl-mark__year, .tl-mark__stage, .tl-mark__title, .tl-mark__place, .tl-mark__more) {
	font-family: var(--sans); font-weight: 300; text-transform: none; letter-spacing: -0.02em; }
/* Labels: small grey sentence case (augen 13–14px). */
.pv > :not(.pv-hero) .pv-label,
.pv .tl__label,
.pv .tl-mark__stage,
.pv .ap-rows__num { font-size: 14px; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink-2); }
.pv-navy .pv-label, .pv .tl__label, .pv .tl-mark__stage, .pv-aspects__label .pv-label, .pv-orbit .pv-label { color: rgba(242, 242, 244, 0.55); }
/* Section headings (augen 38px). */
.pv .pv-h2 { font-size: clamp(2rem, 2.8vw, 2.75rem); line-height: 1.1; color: var(--ink); }
.pv .pv-split--dark .pv-h2, .pv .tl__title { color: #F2F2F4; }
.pv .tl__title { font-size: clamp(2rem, 2.8vw, 2.75rem); line-height: 1.1; }
/* Statements (augen 27px, two-tone). */
.pv .ap-statement { font-size: clamp(1.5rem, 2vw, 2rem); line-height: 1.25; color: var(--ink); }
.pv .ap-statement em { color: #2B3A8C; }
.pv .pv-quote { font-size: clamp(1.5rem, 2vw, 2rem); line-height: 1.2; color: var(--ink); }
.pv .pv-holistic__text { font-size: clamp(1.25rem, 1.6vw, 1.6rem); line-height: 1.3; color: var(--ink); }
/* Body. */
.pv .pv-lede, .pv .pv-body, .pv .pv-member__bio { line-height: 1.45; }
.pv-white .pv-lede, .pv-white .pv-body, .pv-white .pv-member__bio { color: rgba(15, 16, 18, 0.5); }
/* Small titles: rows, specialities, team names, timeline, aspects, diagram. */
.pv .ap-rows__word { font-size: clamp(1.25rem, 1.6vw, 1.6rem); color: var(--ink); }
.pv .pv-specs li { font-size: clamp(1.05rem, 1.3vw, 1.3rem); }
.pv .pv-member__name { font-size: 1.25rem; line-height: 1.2; color: var(--ink); }
.pv .pv-aspects__word { font-size: clamp(1.4rem, 1.8vw, 1.9rem); }
.pv .pv-orbit__name { font-size: clamp(1rem, 1.2vw, 1.2rem); }
.pv .tl-mark__title { font-size: 1.35rem; line-height: 1.15; }
.pv .tl-mark__year { font-size: 14px; }
.pv .tl-mark__place { font-size: 13px; }

/* Lighter type with the hierarchy kept: every sans weight stepped down one level (bold/semibold →
   medium 500, medium → regular 400, regular → light 300), so emphasis still reads; lightness also
   comes from colour (grey body copy) rather than weight alone. Finer macOS rendering site-wide. */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
strong, b { font-weight: 500; }

/* =========================================================================
   TYPE RULE (site-wide): text under 50px is sans (Inter Tight); text 50px and over is serif
   (Sorts Mill Goudy), and the serif is only ever set in UPPERCASE. Numbers are never serif (always
   thin sans, at any size). Measured at desktop (1440px);
   these overrides bring every exception into line. Sans replacements are light, sentence case
   and slightly tight.
   ========================================================================= */
/* Serif under 50px → sans. */
.hs-gcard__name,
.acc-group__title,
.insights .featured-card__title.wp-block-post-title,
.insights .insights__section-title.wp-block-heading,
.insight .insight__related-title.wp-block-heading,
.insight__content h3,
.insight__content .wp-block-pullquote,
.insight__content .wp-block-pullquote p,
.insight__content .wp-block-pullquote cite {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	text-transform: none;
	letter-spacing: -0.03em;
}
.dr-intro .dr-intro__title.wp-block-heading { font-size: clamp(2.5rem, min(3.5vw, 6.4vh), 3.6rem); line-height: 1; letter-spacing: 0.01em; } /* serif uppercase, at the footer statement's size (≥ 50px) */
/* Numbers are never serif, at any size: thin sans (an exception to the 50px line). */
.brain-stat__num,
.hs-gcard__num,
.svc-card .svc-slide__num,
.pv-member__initial {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 200;
	letter-spacing: -0.03em;
}
/* The one exception: the big specialist names in Collaboration stay thin sans at display size —
   long words like "Ophthalmologists" don't fit as uppercase serif. */
/* Main section headings sit right on the line: never below 60px on desktop, so they stay serif. */
@media (min-width: 1024px) {
	.h-display { font-size: max(60px, min(3.6vw + 0.5rem, 3.75rem)); }
}

/* =========================================================================
   Contact — option after exoape.com (inc/contact-exo.php, /contact/?v=exo).
   Cinematic hero with an enormous headline, a giant title with drifting
   staggered images, words that slide apart to reveal the portrait, a
   scattered collage round the visit notes, and the enquiry form. Display
   type follows the type rule: uppercase serif, numbers in thin sans.
   ========================================================================= */
body:has(.ce) { background: #fff; }
.ce { --ce-ink: #0D1020; --ce-navy: #1E2A5A; --ce-pale: #E3E7F0; margin: 0 !important; max-width: none !important; color: var(--ce-ink); font-family: var(--wp--preset--font-family--body); font-weight: 300; }
.ce-label { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; }
.ce-label--light { color: var(--ce-pale); }
.ce-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ce-giant { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(4.5rem, 10vw, 10rem); line-height: 0.88; letter-spacing: -0.01em; text-transform: uppercase; color: var(--ce-navy); }
.ce-lede { margin: 0; font-size: clamp(1.15rem, 1.25vw, 1.4rem); font-weight: 300; line-height: 1.4; letter-spacing: -0.01em; }
/* Hero. */
.ce-hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; color: #fff; background: var(--ce-ink); }
.ce-hero__img { position: absolute; inset: 0; width: 100%; height: 116% !important; top: -8%; max-width: none; object-fit: cover; opacity: 0.7; filter: saturate(0.6); }
.ce-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 16, 32, 0.75) 0%, rgba(13, 16, 32, 0.15) 55%, rgba(13, 16, 32, 0) 100%), linear-gradient(180deg, rgba(13, 16, 32, 0.4) 0%, rgba(13, 16, 32, 0) 40%, rgba(13, 16, 32, 0.7) 100%); }
.ce-hero__intro.reveal { position: absolute; z-index: 1; top: 30%; left: 6vw; max-width: 360px; margin: 0; font-size: 18px; font-weight: 300; line-height: 1.45; color: #fff; text-transform: none; }
.ce-hero__title.reveal { position: absolute; z-index: 1; left: 5.4vw; bottom: 5vh; margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(5rem, 14vw, 15rem); line-height: 0.84; letter-spacing: -0.01em; color: #fff; text-transform: uppercase; }
.ce-hero__cap.reveal { position: absolute; z-index: 1; right: 4vw; bottom: 6vh; margin: 0; font-size: 12px; font-weight: 400; line-height: 1.5; color: rgba(255, 255, 255, 0.8); text-align: right; text-transform: none; }
/* Giant word + staggered images + hairline contact rows. */
.ce-reach { padding: 18vh 6vw 20vh; background: #fff; }
.ce-reach .ce-giant { margin-bottom: 8vh; }
.ce-reach__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: 4vw; align-items: start; }
.ce-shot { position: relative; margin: 0; overflow: hidden; }
.ce-shot img { position: absolute; inset: 0; width: 100%; height: 116% !important; top: -8%; max-width: none; object-fit: cover; filter: saturate(0.7); }
.ce-shot--a { aspect-ratio: 4 / 5; }
.ce-shot--b { aspect-ratio: 3 / 4; margin-top: 30vh; }
.ce-reach__text { display: flex; flex-direction: column; gap: 28px; padding-top: 6vh; }
.ce-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(13, 16, 32, 0.14); }
.ce-list li { display: grid; grid-template-columns: 110px 1fr auto; align-items: start; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(13, 16, 32, 0.14); font-size: 15px; }
.ce-list__k { color: rgba(13, 16, 32, 0.5); }
.ce-list__v { display: flex; flex-direction: column; gap: 4px; }
.ce-list a { color: var(--ce-ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--ease-out); }
.ce-list a:hover { background-size: 100% 1px; }
.ce-copy.copy-btn { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: 12px; letter-spacing: 0; line-height: 1.6; color: rgba(13, 16, 32, 0.5); transition: color 0.3s ease; }
.ce-copy.copy-btn:hover { color: var(--ce-ink); }
.ce-copy.copy-btn::after { content: "Copied"; background: none; color: var(--ce-ink); place-items: center end; }
/* Sharp-edged image reveals. */
.has-motion .ce .reveal-img { clip-path: inset(100% 0 0 0); }
.has-motion .ce .reveal-img.is-in { clip-path: inset(0 0 0 0); }
.ce-list__arrow { font-size: 13px; color: rgba(13, 16, 32, 0.5); }
/* Words that slide apart, revealing the portrait. */
.ce-reel { position: relative; padding: 14vh 0 16vh; background: var(--ce-ink); color: var(--ce-pale); overflow: clip; text-align: center; }
.ce-reel__label { margin-bottom: 6vh; }
.ce-reel__stage { position: relative; display: grid; place-items: center; height: 82vh; }
.ce-reel__media { position: relative; width: min(46vw, 720px); height: 100%; margin: 0; overflow: hidden; }
.ce-reel__bg { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 60%, #28305E 0%, #161B33 55%, #0B0D18 100%); }
.ce-reel__media img { position: absolute; left: 50%; bottom: 0; height: 94%; width: auto; max-width: none; translate: -50% 0; }
.ce-reel__word { position: absolute; top: 50%; z-index: 2; translate: 0 -50%; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(4.5rem, 10vw, 10rem); line-height: 1; text-transform: uppercase; color: var(--ce-pale); white-space: nowrap; }
.ce-reel__word--l { right: 50%; }
.ce-reel__word--r { left: 50%; }
.ce-reel__cap { max-width: 440px; margin: 6vh auto 0; font-size: 14px; line-height: 1.55; color: rgba(227, 231, 240, 0.72); }
.ce-reel__cta { display: inline-block; margin-top: 28px; font-size: 14px; color: #fff; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.ce-reel__cta span { display: inline-block; transition: translate 0.4s var(--ease-out); }
.ce-reel__cta:hover span { translate: 4px 0; }
@supports (animation-timeline: view()) {
	.ce-reel__media { animation: ce-reel-media linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
	.ce-reel__word--l { animation: ce-reel-l linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
	.ce-reel__word--r { animation: ce-reel-r linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
	@keyframes ce-reel-media { from { clip-path: inset(30% 42% 30% 42%); } to { clip-path: inset(0 0 0 0); } }
	@keyframes ce-reel-l { from { translate: 8vw -50%; } to { translate: -20vw -50%; } }
	@keyframes ce-reel-r { from { translate: -8vw -50%; } to { translate: 20vw -50%; } }
}
/* Scattered collage round the visit notes. */
.ce-visit { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 9vh; gap: 2vw; padding: 20vh 6vw; background: #fff; }
.ce-tile { position: relative; margin: 0; overflow: hidden; }
.ce-tile img { position: absolute; inset: 0; width: 100%; height: 116% !important; top: -8%; max-width: none; object-fit: cover; filter: saturate(0.7); }
.ce-tile--1 { grid-column: 1 / span 3; grid-row: 1 / span 3; }
.ce-tile--2 { grid-column: 5 / span 3; grid-row: 2 / span 3; }
.ce-tile--3 { grid-column: 10 / span 3; grid-row: 1 / span 4; }
.ce-visit__head { grid-column: 2 / span 10; grid-row: 6 / span 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; text-align: center; }
.ce-giant--c { text-align: center; }
.ce-notes { grid-column: 2 / span 7; grid-row: 10 / span 5; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(13, 16, 32, 0.14); counter-reset: none; }
.ce-notes li { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid rgba(13, 16, 32, 0.14); }
.ce-notes__num { font-size: 12px; font-weight: 400; color: rgba(13, 16, 32, 0.45); }
.ce-notes__title { margin: 0; font-family: var(--wp--preset--font-family--body); font-size: 22px; font-weight: 300; letter-spacing: -0.02em; text-transform: none; color: var(--ce-ink); }
.ce-notes p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(13, 16, 32, 0.62); }
.ce-tile--4 { grid-column: 10 / span 3; grid-row: 11 / span 4; }
/* Close: giant title + enquiry form. */
.ce-write { padding: 16vh 6vw 18vh; background: #F3F5F9; }
.ce-write__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 10vh; }
.ce-write__text { max-width: 340px; margin: 0 0 1vh; font-size: 18px; line-height: 1.45; color: rgba(13, 16, 32, 0.7); }
.ce-form { max-width: none; padding-top: 32px; border-top: 1px solid rgba(13, 16, 32, 0.14); }

/* =========================================================================
   Contact — option after joinvoy.com (inc/contact-voy.php, /contact/?v=voy).
   Inset rounded photo hero, soft pastel contact cards, a consultation split
   on a profile card, a dark rounded band of visit cards, pill buttons.
   Display type follows the type rule: uppercase serif, numbers in thin sans.
   ========================================================================= */
body:has(.cv) { background: #fff; }
.cv { --cv-ink: #0D1020; --cv-navy: #1E2A5A; margin: 0 !important; max-width: none !important; color: var(--cv-ink); font-family: var(--wp--preset--font-family--body); font-weight: 300; }
.cv-serif { font-family: var(--wp--preset--font-family--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0; }
/* Hero. */
.cv-hero { position: relative; height: calc(100svh - 40px); min-height: 560px; margin: 20px; border-radius: 28px; overflow: hidden; display: grid; place-items: center; text-align: center; background: var(--cv-ink); }
.cv-hero__media { position: absolute; inset: 0; margin: 0; }
.cv-hero__media img { position: absolute; inset: 0; width: 100%; height: 116% !important; top: -8%; max-width: none; object-fit: cover; object-position: center 40%; }
.cv-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 16, 32, 0.2) 0%, rgba(13, 16, 32, 0.55) 100%); }
.cv-hero__text { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 24px; }
.cv-hero__eyebrow.reveal { margin: 0 0 20px; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
.cv-hero__title.reveal { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(4rem, 8vw, 8.5rem); line-height: 0.95; letter-spacing: 0; text-transform: uppercase; color: #fff; }
.cv-hero__sub.reveal { max-width: 460px; margin: 24px 0 0; font-size: 18px; font-weight: 300; line-height: 1.45; color: rgba(255, 255, 255, 0.88); text-transform: none; }
.cv-hero__actions.reveal { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
/* Pills. */
.cv-pill { display: inline-flex; align-items: center; gap: 12px; padding: 13px 22px; border: 1px solid var(--cv-ink); border-radius: 100px; background: transparent; font-family: var(--wp--preset--font-family--body); font-size: 15px; font-weight: 400; color: var(--cv-ink); text-decoration: none; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.cv-pill:hover { background: var(--cv-ink); color: #fff; }
.cv-pill--white { border-color: #fff; background: #fff; }
.cv-pill--white:hover { background: rgba(255, 255, 255, 0.85); color: var(--cv-ink); }
.cv-pill--ghost { border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.cv-pill--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.12); }
.cv-pill--dark { align-self: flex-start; background: var(--cv-ink); color: #fff; }
.cv-pill--dark:hover { background: var(--cv-navy); }
.cv-copy.copy-btn { margin: 0; letter-spacing: 0; }
.cv-copy.copy-btn::after { background: var(--cv-ink); }
/* Sections + headings. */
.cv-section { box-sizing: border-box; max-width: 1312px; margin: 0 auto; padding: 160px 64px 0; }
.cv-eyebrow { margin: 0; text-align: center; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(13, 16, 32, 0.6); }
.cv-eyebrow--left { text-align: left; }
.cv-heading { margin: 16px 0 0; text-align: center; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(3.75rem, 4.6vw, 4.75rem); line-height: 0.98; text-transform: uppercase; color: var(--cv-navy); }
.cv-heading--left { text-align: left; }
/* Pastel contact cards. */
.cv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 64px; }
.cv-card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 340px; padding: 32px; border-radius: 22px; box-sizing: border-box; }
/* One soft blue-white for every card. */
.cv-card { background: #F7F9FC; }
.cv-card__label { margin: 0; font-size: 12px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: #7D93AA; }
.cv-card .cv-pill { border-color: #C9D5E2; }
.cv-card .cv-pill:hover { border-color: var(--cv-ink); }
.cv-card__value { margin: 8px 0 0; font-size: clamp(1.5rem, 2vw, 2rem); font-weight: 300; line-height: 1.25; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.cv-card__value--sm { font-size: 18px; line-height: 1.5; letter-spacing: -0.01em; }
.cv-card__value a { color: inherit; text-decoration: none; }
.cv-card__value a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cv-card__note { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(13, 16, 32, 0.6); }
.cv-card .cv-pill { margin-top: auto; }
/* Consultation split on a profile card. */
.cv-consult { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.cv-consult__card { position: relative; aspect-ratio: 5 / 5.4; border-radius: 24px; overflow: hidden; background: radial-gradient(ellipse 70% 70% at 50% 60%, #28305E 0%, #161B33 60%, #0D1020 100%); }
.cv-consult__card img { position: absolute; left: 50%; bottom: 0; height: 94%; width: auto; max-width: none; translate: -50% 0; }
.cv-consult__tag { position: absolute; left: 20px; bottom: 20px; margin: 0; padding: 11px 18px; border-radius: 100px; background: #fff; font-size: 14px; font-weight: 400; color: var(--cv-ink); box-shadow: 0 8px 24px rgba(13, 16, 32, 0.15); }
.cv-consult__text { display: flex; flex-direction: column; gap: 24px; }
.cv-consult__text .cv-heading { margin: 0; }
.cv-consult__lede { margin: 0; max-width: 440px; font-size: 18px; line-height: 1.5; color: rgba(13, 16, 32, 0.72); }
.cv-checks { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(13, 16, 32, 0.12); }
.cv-checks li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(13, 16, 32, 0.12); font-size: 15px; }
.cv-checks li::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; background: #DCE7F1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.5 9.2l2.3 2.3 4.7-4.9' fill='none' stroke='%231E2A5A' stroke-width='1.4'/%3E%3C/svg%3E") center / 18px no-repeat; }
/* Dark rounded band of visit cards. */
.cv-visit { margin: 160px 20px 0; padding: 120px max(44px, calc((100vw - 1312px) / 2)); border-radius: 28px; background: var(--cv-ink); color: #fff; }
.cv-visit__title { margin: 0 0 72px; text-align: center; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(3.75rem, 5.4vw, 5.5rem); line-height: 0.95; text-transform: uppercase; color: #fff; }
.cv-visit__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cv-vcard { display: flex; flex-direction: column; gap: 12px; min-height: 300px; padding: 28px; border-radius: 20px; background: rgba(255, 255, 255, 0.07); box-sizing: border-box; }
.cv-vcard__num { margin: 0 0 auto; font-size: clamp(3rem, 4vw, 4rem); font-weight: 200; line-height: 1; letter-spacing: -0.04em; color: rgba(255, 255, 255, 0.9); }
.cv-vcard__title { margin: 0; font-family: var(--wp--preset--font-family--body); font-size: 20px; font-weight: 400; letter-spacing: -0.01em; text-transform: none; color: #fff; }
.cv-vcard__text { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.68); }
/* Enquiry form in a calm rounded panel. */
.cv-write { margin: 20px 20px 0; padding: 120px max(44px, calc((100vw - 1100px) / 2)); border-radius: 28px; background: #F4F1EB; }
.cv-write__head { margin-bottom: 56px; text-align: center; }
.cv-write__lede { max-width: 440px; margin: 20px auto 0; font-size: 17px; line-height: 1.5; color: rgba(13, 16, 32, 0.7); }
.cv-form { max-width: none; }

/* =========================================================================
   Contact cards, styled after isomeet.com: white with a hairline outline,
   a round icon, a medium title, grey details and a soft pill action.
   ========================================================================= */
.ci-cards { --ci-ink: #0D1020; --ci-muted: rgba(13, 16, 32, 0.48); --ci-line: rgba(13, 16, 32, 0.1); --ci-fill: #F2F3F6; gap: 16px; }
.ci-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 32px; border: 1px solid var(--ci-line); border-radius: 24px; background: #fff; transition: border-color 0.3s ease, box-shadow 0.4s ease; }
.ci-card:hover { border-color: rgba(13, 16, 32, 0.18); box-shadow: 0 18px 40px -24px rgba(13, 16, 32, 0.25); }
.ci-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 22px; border-radius: 50%; background: var(--ci-fill); }
.ci-icon svg { width: 20px; height: 20px; fill: none; stroke: var(--ci-ink); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.ci-card__title { margin: 0; font-family: var(--wp--preset--font-family--body); font-size: 20px; font-weight: 500; letter-spacing: -0.016em; text-transform: none; color: var(--ci-ink); }
.ci-card__text { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ci-muted); }
.ci-card__text a { color: var(--ci-ink); text-decoration: none; }
.ci-card__text a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ci-action { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding: 10px 18px; border: 0; border-radius: 80px; background: var(--ci-fill); font-family: var(--wp--preset--font-family--body); font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--ci-ink); text-decoration: none; cursor: pointer; transition: background-color 0.3s ease; }
.ci-card .ci-action { margin-top: auto; }
.ci-card__text + .ci-action { margin-top: 18px; }
.ci-action:hover { background: #E6E8EE; }
.ci-action.copy-btn::after { background: var(--ci-ink); border-radius: 80px; }

/* Contact — location globe (src/globe.js): a dark rounded panel with a particle globe that spins
   to Cape Town and pins the practice, address beside it. */
.cv-globe { position: relative; height: min(86vh, 760px); min-height: 560px; margin: 120px 20px 0; border-radius: 28px; overflow: hidden; background: radial-gradient(ellipse 60% 70% at 36% 50%, #161C3A 0%, #0D1020 70%); color: #fff; }
.cv-globe__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.cv-globe.is-grabbing .cv-globe__canvas { cursor: grabbing; }
.cv-globe__pin { position: absolute; left: 0; top: 0; z-index: 1; display: inline-flex; align-items: center; gap: 8px; margin: -38px 0 0 14px; padding: 7px 12px; border-radius: 100px; background: rgba(255, 255, 255, 0.95); font-size: 12px; font-weight: 500; color: #0D1020; white-space: nowrap; opacity: 0; pointer-events: none; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5); will-change: transform; }
.cv-globe__pin-dot { width: 6px; height: 6px; border-radius: 50%; background: #4C7BD9; }
.cv-globe__info { position: absolute; z-index: 1; right: max(48px, 8vw); top: 50%; translate: 0 -50%; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 360px; pointer-events: none; }
.cv-globe__info a { pointer-events: auto; }
.cv-globe__eyebrow { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #9DB4E8; }
.cv-globe__title { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(3.75rem, 5.4vw, 5.5rem); line-height: 0.95; text-transform: uppercase; color: #fff; }
.cv-globe__addr { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.75); }
.cv-globe__coords { margin: 0; font-size: 13px; letter-spacing: 0.04em; color: rgba(157, 180, 232, 0.85); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
	.cv-globe { height: auto; min-height: 0; padding: 0 24px 40px; }
	.cv-globe__canvas { position: relative; height: 420px; }
	.cv-globe__info { position: relative; right: auto; top: auto; translate: none; max-width: none; }
}

/* =========================================================================
   Contact — direction from the Dr. Hina aesthetic board: misty ice-blue
   gradients, frosted liquid-glass forms, hairline lines with nodes, a soft
   horizon glow, and deep navy only where something should glow.
   ========================================================================= */
.cv { --mist-1: #E6EDF8; --mist-2: #F3F6FB; --peri: #B9C9E8; --monsoon: #5E77AC; --monsoon-deep: #33477A; }
/* Intro: a misty band behind the heading and cards. */
.cv-intro { position: relative; isolation: isolate; }
.cv-glass { position: absolute; z-index: -1; top: 0; bottom: -120px; left: calc(50% - 50vw); right: calc(50% - 50vw); overflow: hidden; pointer-events: none; background: linear-gradient(180deg, var(--mist-1) 0%, var(--mist-2) 52%, #fff 100%); }
.cv-intro .ci-cards { position: relative; }
.cv-intro .ci-card { box-shadow: 0 24px 50px -32px rgba(40, 70, 140, 0.28); }
.cv-intro .ci-card:hover { box-shadow: 0 30px 60px -30px rgba(40, 70, 140, 0.38); }
/* Globe: a faint horizon glow along the bottom of the navy. */
.cv-globe { background: radial-gradient(ellipse 85% 38% at 50% 118%, rgba(130, 165, 240, 0.4) 0%, rgba(130, 165, 240, 0) 70%), radial-gradient(ellipse 60% 70% at 36% 50%, #161C3A 0%, #0D1020 70%); }
/* Consultation: the doctor on pale periwinkle glass with a large glass arc behind. */
.cv-consult__card { background: radial-gradient(ellipse 90% 80% at 25% 15%, #FFFFFF 0%, #E3EAF7 45%, var(--peri) 100%); }
.cv-consult__arc { position: absolute; z-index: 0; width: 135%; aspect-ratio: 1; left: 18%; top: -12%; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 1); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.7) 0%, rgba(200, 216, 246, 0.45) 40%, rgba(110, 145, 215, 0.5) 100%); box-shadow: inset 0 0 0 14px rgba(255, 255, 255, 0.18), inset -40px -50px 100px rgba(90, 125, 205, 0.45), 0 30px 80px -30px rgba(60, 90, 170, 0.4); }
.cv-consult__card img, .cv-consult__tag { z-index: 1; }
/* Before you arrive: a hairline with nodes on a monsoon-blue gradient. */
.cv-visit--line { padding: 0; background: linear-gradient(165deg, #AFC0DF 0%, #7D93C4 38%, var(--monsoon) 66%, var(--monsoon-deep) 100%); overflow: hidden; }
.cv-visit__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; padding: 120px max(56px, calc((100vw - 1240px) / 2)); }
.cv-visit__head { position: sticky; top: 140px; align-self: start; display: flex; flex-direction: column; gap: 20px; }
.cv-visit__eyebrow { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.cv-visit--line .cv-visit__title { margin: 0; text-align: left; }
.cv-visit__lede { max-width: 340px; margin: 0; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, 0.75); }
.cv-steps { position: relative; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 56px; }
.cv-steps::before { content: ""; position: absolute; left: 7px; top: 22px; bottom: 10px; width: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.35)); }
.cv-step { position: relative; display: flex; flex-direction: column; gap: 8px; padding-left: 52px; }
.cv-step__node { position: absolute; left: 0; top: 2px; width: 15px; height: 15px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.25); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08); }
.cv-step:first-child .cv-step__node { background: var(--monsoon-deep); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.14), 0 0 18px rgba(255, 255, 255, 0.5); }
.cv-step__num { margin: 0; font-size: 12px; font-weight: 400; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.65); font-variant-numeric: tabular-nums; }
.cv-step__title { margin: 0; font-family: var(--wp--preset--font-family--body); font-size: 24px; font-weight: 300; letter-spacing: -0.02em; text-transform: none; color: #fff; }
.cv-step__text { max-width: 440px; margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
/* Enquiry: misty ice gradient, the form on frosted glass. */
.cv-write { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #F4F7FC 0%, #DCE5F4 34%, #C3D2EC 100%); }
.cv-write .cv-form.enquiry-form.consult { border: 1px solid rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(18px); box-shadow: 0 40px 80px -40px rgba(40, 70, 140, 0.35); }

/* =========================================================================
   Footer reveal: the navy runs full width and sits sticky at the bottom of
   the screen, clipped to the strip the page has scrolled off (--foot-reveal),
   so the content seems to slide up off it; its contents rise with a little
   parallax as they're uncovered (--foot-p). Both set by src/motion.js.
   ========================================================================= */
.site-footer-mark { position: relative; z-index: 1; height: 0; margin: 0 !important; }
/* Navy backing that scrolls with the page under the footer's reveal strip, so a fast scroll
   never shows the white page through the frame or two before the footer's clip catches up. */
.site-footer-mark::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: calc(100svh + 2px); background: #1E2A5A; pointer-events: none; }
.site-footer,
body:has(.svc-bg) .site-footer,
body:has(.cx) .site-footer,
body:has(.pv) .site-footer { position: sticky; bottom: 0; z-index: 2; margin: 0 !important; padding: 0; overflow: clip; background: #1E2A5A; }
/* Clipped shut from first paint (not just once motion.js runs), so a page load never flashes the footer. */
@media (scripting: enabled) { .site-footer { clip-path: inset(calc(100% - var(--foot-reveal, 0px)) 0 0 0); } }
.site-footer__inner { height: 100svh; margin: 0; border-radius: 0; padding-inline: max(64px, calc((100vw - 1312px) / 2)); translate: 0 calc((1 - var(--foot-p, 1)) * 32%); opacity: calc(0.4 + 0.6 * var(--foot-p, 1)); will-change: translate; }
/* The footer's closing line is serif (uppercase), an exception to the 50px rule. */
.site-footer__statement { font-family: var(--wp--preset--font-family--display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.95; }
@media (prefers-reduced-motion: reduce) { .site-footer__inner { translate: none; opacity: 1; } }
/* Contact enquiry: full-bleed, no inset rounded block. */
.cv-write { margin: 0; border-radius: 0; }
/* Contact globe: full screen, edge to edge. */
.cv-globe { height: 100svh; min-height: 600px; margin: 120px 0 0; border-radius: 0; }
/* Footer: "Explore" and "Contact" drop to line up with "Dr. Thembani Hina Neurosurgery" under the mark
   (mark 40px wide ≈ 43px tall + its 8px margin + the lead's 20px gap, plus the half-leading difference). */
.site-footer__col { padding-top: 72px; }
/* Footer wordmark: a soft light follows the cursor across the faint letters. A lit copy of the
   word (::after) sits exactly over them — bright white-to-periwinkle with a hairline edge — and is
   masked to a soft circle at the cursor (--mx, --my set by src/motion.js), which opens on hover
   (--lit-r) and closes when the cursor leaves. CSS only, besides two coordinates. */
@property --lit-r { syntax: '<length>'; inherits: true; initial-value: 0px; }
.site-footer__wordmark { position: relative; --lit-r: 0px; transition: --lit-r 0.9s var(--ease-out); cursor: default; user-select: none; -webkit-user-select: none; }
.site-footer__wordmark.is-lit { --lit-r: clamp(180px, 16vw, 280px); }
.site-footer__wordmark span { position: relative; }
.site-footer__wordmark span::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	padding-left: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-box: trim-both cap alphabetic;
	color: transparent;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(214, 226, 255, 0.7) 55%, rgba(157, 180, 232, 0.28) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-stroke: 0.6px rgba(255, 255, 255, 0.4);
	-webkit-mask-image: radial-gradient(circle var(--lit-r) at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0, 0, 0, 0.75) 42%, transparent 74%);
	mask-image: radial-gradient(circle var(--lit-r) at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0, 0, 0, 0.75) 42%, transparent 74%);
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .site-footer__wordmark { transition: none; } }
/* Footer sans: lighter weight and dimmer, so the serif line and the wordmark lead. */
.site-footer__inner { font-weight: 300; color: rgba(255, 255, 255, 0.6); }
.site-footer__eyebrow { font-weight: 300; color: rgba(255, 255, 255, 0.42); }
.site-footer__label { font-weight: 300; color: rgba(255, 255, 255, 0.36); }
.site-footer__col a { font-weight: 300; color: rgba(255, 255, 255, 0.72); transition: color 0.3s ease; }
.site-footer__col a:hover { color: #fff; }
.site-footer__address { color: rgba(255, 255, 255, 0.55); }
.site-footer__bottom { font-weight: 300; color: rgba(255, 255, 255, 0.4); }
.site-footer__legal a { font-weight: 300; color: rgba(255, 255, 255, 0.55); }
.site-footer__credit { font-weight: 300; color: rgba(255, 255, 255, 0.32); }

/* =========================================================================
   Footer, refined: quieter and more editorial. A soft light in the navy,
   a 12-column grid with generous air, small letter-spaced labels, light
   links with a hairline underline on hover, an understated text CTA, and
   one hairline bottom line with credentials centred between © and legal.
   ========================================================================= */
.site-footer,
body:has(.svc-bg) .site-footer,
body:has(.cx) .site-footer,
body:has(.pv) .site-footer { background: radial-gradient(ellipse 70% 60% at 12% 0%, rgba(74, 98, 170, 0.16) 0%, rgba(74, 98, 170, 0) 70%), #1E2A5A; } /* navy (dark = #1E2A5A, never near-black) */
.site-footer__inner { padding-top: clamp(56px, 11vh, 128px); letter-spacing: 0.005em; }
.site-footer__top { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 32px; }
.site-footer__lead { grid-column: 1 / span 5; gap: 0; }
.site-footer__col:nth-of-type(1) { grid-column: 8 / span 2; }
.site-footer__col:nth-of-type(2) { grid-column: 10 / span 3; }
.site-footer__mark { width: 30px; margin: 0 0 36px; opacity: 0.7; }
.site-footer__eyebrow { margin: 0 0 22px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
.site-footer__statement { margin: 0 0 40px; max-width: none; font-size: clamp(2.5rem, min(3.5vw, 6.4vh), 3.6rem); line-height: 1; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.94); }
/* Understated CTA: text, a hairline underline that draws across on hover, and an arrow. */
.site-footer__cta { display: inline-flex; align-items: center; gap: 14px; padding-bottom: 8px; background: linear-gradient(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.28)) 0 100% / 100% 1px no-repeat; font-size: 15px; font-weight: 300; letter-spacing: 0.02em; color: #fff; text-decoration: none; position: relative; }
.site-footer__cta::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #fff; transform: scaleX(0); transform-origin: right; transition: transform 0.7s var(--ease-out); }
.site-footer__cta:hover::before { transform: scaleX(1); transform-origin: left; }
.site-footer__cta-arrow { display: inline-block; transition: translate 0.5s var(--ease-out); }
.site-footer__cta:hover .site-footer__cta-arrow { translate: 6px 0; }
/* Columns: labels line up with the eyebrow (mark 30px ≈ 33px tall + its 36px margin). */
.site-footer__col { gap: 14px; padding-top: 69px; }
.site-footer__label { margin: 0 0 14px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.38); }
.site-footer__col a { font-size: 15px; letter-spacing: 0.01em; background-image: none; }
.site-footer__col a { position: relative; width: max-content; }
.site-footer__col a::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.5); transform: scaleX(0); transform-origin: right; transition: transform 0.6s var(--ease-out); }
.site-footer__col a:hover::after { transform: scaleX(1); transform-origin: left; }
.site-footer__address { margin: 18px 0 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 14px; line-height: 1.75; }
/* Bottom line: © · credentials · legal, small and evenly spaced. */
.site-footer__bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding-top: 22px; border-top-color: rgba(255, 255, 255, 0.09); font-size: 12px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.38); }
.site-footer__quals { text-align: center; }
.site-footer__legal { justify-self: end; gap: 28px; }
.site-footer__legal a { font-size: 12px; }
.site-footer__col a { white-space: nowrap; }
@media (max-width: 1180px) {
	.site-footer__lead { grid-column: 1 / span 6; }
	.site-footer__col:nth-of-type(1) { grid-column: 7 / span 3; }
	.site-footer__col:nth-of-type(2) { grid-column: 10 / span 3; }
}
.site-footer__legal a { white-space: nowrap; }

/* Before you arrive: animated line icons (Lucide, ISC licence). Each draws itself on as its
   step rises in, then keeps a small loop of its own: the pin bobs over a pulsing ring, the
   clock's hand turns, a scan line sweeps the frame, the card's stripe redraws. */
.cv-step__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 10px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; }
.cv-step__icon svg { width: 22px; height: 22px; overflow: visible; }
.cv-step__icon svg * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease-out) 0.25s; transform-box: view-box; }
.cv-step.is-in .cv-step__icon svg *, .no-js .cv-step__icon svg *, .cv-step:not(.rise) .cv-step__icon svg * { stroke-dashoffset: 0; }
.cv-step.is-in .cv-ico-bob { animation: cv-ico-bob 2.6s ease-in-out 1.6s infinite; }
.cv-step.is-in .cv-ico-ring { transform-origin: 12px 21.6px; animation: cv-ico-ring 2.6s ease-out 1.6s infinite; }
.cv-step.is-in .cv-ico-hand { transform-origin: 12px 12px; animation: cv-ico-turn 8s linear 1.6s infinite; }
.cv-step.is-in .cv-ico-sweep { animation: cv-ico-sweep 2.8s ease-in-out 1.6s infinite; }
.cv-step.is-in .cv-ico-stripe { animation: cv-ico-redraw 3.2s var(--ease-out) 1.6s infinite; }
@keyframes cv-ico-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.6px; } }
@keyframes cv-ico-ring { 0% { scale: 0.6; opacity: 1; } 100% { scale: 1.6; opacity: 0; } }
@keyframes cv-ico-turn { to { rotate: 360deg; } }
@keyframes cv-ico-sweep { 0%, 100% { translate: 0 -5px; } 50% { translate: 0 5px; } }
@keyframes cv-ico-redraw { 0% { stroke-dashoffset: 1; } 45%, 100% { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
	.cv-step__icon svg * { stroke-dashoffset: 0; transition: none; }
	.cv-step .cv-ico-bob, .cv-step .cv-ico-ring, .cv-step .cv-ico-hand, .cv-step .cv-ico-sweep, .cv-step .cv-ico-stripe { animation: none !important; }
}
.cv-step__node { top: 14.5px; } /* centred on the 44px icon */
/* Icons sit to the left of the line, larger and unframed, so the motion reads. */
.cv-step__icon { position: absolute; left: -76px; top: 0; width: 44px; height: 44px; margin: 0; border: 0; border-radius: 0; background: none; }
.cv-step__icon svg { width: 44px; height: 44px; stroke-width: 1; }
.cv-step__node { top: 14.5px; }
/* Find us: globe centred, place name and coordinates on the left, address and directions on the right. */
.cv-globe { background: radial-gradient(ellipse 85% 38% at 50% 118%, rgba(130, 165, 240, 0.4) 0%, rgba(130, 165, 240, 0) 70%), radial-gradient(ellipse 45% 60% at 50% 50%, #161C3A 0%, #0D1020 70%); }
.cv-globe__info { max-width: 300px; }
.cv-globe__info--l { right: auto; left: max(56px, 6vw); }
.cv-globe__info--r { right: max(56px, 6vw); }
.cv-globe__info--l { max-width: none; }
.cv-globe__info--l .cv-globe__title { font-size: clamp(3.2rem, 3.9vw, 4rem); white-space: nowrap; }
.cv-globe__info--l { left: 64px; } .cv-globe__info--r { right: 64px; }

/* =========================================================================
   Contact, refined (the footer's language across the page): small letter-
   spaced labels, light weights, dimmer secondary text, hairlines, more air,
   and understated text CTAs whose underline draws across on hover.
   ========================================================================= */
.cv { --cv-quiet: rgba(13, 16, 32, 0.52); --cv-hair: rgba(13, 16, 32, 0.09); letter-spacing: 0.005em; }
/* Labels and headings. */
.cv .cv-eyebrow, .cv .cv-visit__eyebrow, .cv .cv-globe__eyebrow { font-size: 11px; font-weight: 400; letter-spacing: 0.22em; color: rgba(13, 16, 32, 0.45); }
.cv .cv-visit__eyebrow, .cv .cv-globe__eyebrow { color: rgba(255, 255, 255, 0.55); }
.cv .cv-heading, .cv .cv-visit__title, .cv .cv-globe__title { letter-spacing: 0.01em; line-height: 1; }
.cv .cv-heading { margin-top: 22px; }
.cv-section { padding-top: 180px; }
.cv-intro { padding-top: 200px; }
/* Text CTAs: a hairline under the words, a brighter one drawing across on hover, arrow nudges. */
.cv .cv-pill { position: relative; gap: 14px; padding: 0 0 9px; border: 0; border-radius: 0; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; font-size: 15px; font-weight: 300; letter-spacing: 0.02em; opacity: 1; }
.cv .cv-pill { background-image: linear-gradient(rgba(13, 16, 32, 0.22), rgba(13, 16, 32, 0.22)); color: var(--cv-ink); }
.cv .cv-pill--white { background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); color: #fff; }
.cv .cv-pill::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.7s var(--ease-out); }
.cv .cv-pill:hover { background-color: transparent; color: inherit; }
.cv .cv-pill--white:hover { color: #fff; }
.cv .cv-pill:hover::before { transform: scaleX(1); transform-origin: left; }
.cv .cv-pill span { display: inline-block; transition: translate 0.5s var(--ease-out); }
.cv .cv-pill:hover span { translate: 6px 0; }
/* Contact cards: hairline, lighter type, text actions. */
.cv .ci-cards { gap: 20px; margin-top: 80px; }
.cv .ci-card { padding: 40px 36px 36px; border-color: var(--cv-hair); border-radius: 22px; box-shadow: 0 30px 60px -44px rgba(40, 70, 140, 0.35); }
.cv .ci-card:hover { border-color: rgba(13, 16, 32, 0.14); box-shadow: 0 34px 70px -40px rgba(40, 70, 140, 0.42); }
.cv .ci-icon { width: 40px; height: 40px; margin-bottom: 28px; background: #F3F5F9; }
.cv .ci-icon svg { width: 18px; height: 18px; stroke-width: 1.2; }
.cv .ci-card__title { font-size: 11px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(13, 16, 32, 0.45); }
.cv .ci-card__text { margin-top: 6px; font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--cv-ink); }
.cv .ci-card__text a { text-decoration: none; }
.cv .ci-action { position: relative; margin-top: auto; padding: 0 0 7px; border-radius: 0; background: linear-gradient(rgba(13, 16, 32, 0.2), rgba(13, 16, 32, 0.2)) 0 100% / 100% 1px no-repeat; font-size: 13px; font-weight: 300; letter-spacing: 0.04em; color: var(--cv-quiet); transition: color 0.3s ease; }
.cv .ci-card__text + .ci-action { margin-top: 28px; }
.cv .ci-action::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--cv-ink); transform: scaleX(0); transform-origin: right; transition: transform 0.6s var(--ease-out); }
.cv .ci-action:hover { background-color: transparent; color: var(--cv-ink); }
.cv .ci-action:hover::before { transform: scaleX(1); transform-origin: left; }
.cv .ci-action.copy-btn::after { inset: 0 0 1px; display: flex; align-items: flex-start; background: #fff; border-radius: 0; color: var(--cv-ink); }
/* Find us. */
.cv .cv-globe__addr { font-size: 15px; font-weight: 300; line-height: 1.8; color: rgba(255, 255, 255, 0.62); }
.cv .cv-globe__coords { font-size: 11px; letter-spacing: 0.22em; color: rgba(157, 180, 232, 0.7); }
.cv .cv-globe__info--l { gap: 22px; }
.cv .cv-globe__info--r { gap: 30px; }
.cv .cv-globe__pin { padding: 6px 12px; font-size: 11px; font-weight: 400; letter-spacing: 0.06em; }
/* Book a consultation. */
.cv .cv-consult { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 6vw, 96px); }
.cv .cv-consult__text { gap: 28px; }
.cv .cv-consult__text .cv-heading { margin: 0; }
.cv .cv-consult__lede { font-size: 17px; font-weight: 300; line-height: 1.65; color: var(--cv-quiet); }
.cv .cv-checks { border-top-color: var(--cv-hair); }
.cv .cv-checks li { padding: 16px 0; border-bottom-color: var(--cv-hair); font-size: 15px; font-weight: 300; }
.cv .cv-checks li::before { width: 16px; height: 16px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 9.2l3 3 6-6.2' fill='none' stroke='%231E2A5A' stroke-width='1.1'/%3E%3C/svg%3E") center / 16px no-repeat; }
.cv .cv-pill--dark { margin-top: 8px; }
.cv .cv-consult__tag { padding: 9px 16px; font-size: 12px; font-weight: 300; letter-spacing: 0.04em; box-shadow: 0 12px 30px -12px rgba(13, 16, 32, 0.3); }
/* Before you arrive. */
.cv .cv-visit__lede { font-size: 15px; font-weight: 300; line-height: 1.65; color: rgba(255, 255, 255, 0.7); }
.cv .cv-step__num { font-size: 11px; letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.55); }
.cv .cv-step__title { font-size: 22px; font-weight: 300; letter-spacing: -0.01em; }
.cv .cv-step__text { font-size: 15px; font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, 0.72); }
.cv .cv-steps { gap: 64px; }
/* General enquiries: understated labels and fields on the frosted card. */
.cv .cv-write { padding-top: 180px; padding-bottom: 180px; }
.cv .cv-write__lede { font-size: 16px; font-weight: 300; line-height: 1.65; color: var(--cv-quiet); }
.cv .cv-write .cv-form.enquiry-form.consult { gap: 32px; padding: 56px 56px 48px; border-radius: 26px; }
.cv .cv-form .consult__row { gap: 40px; }
.cv .cv-form .consult__field > span:first-child { font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(13, 16, 32, 0.5); }
.cv .cv-form .consult__field input, .cv .cv-form .consult__field textarea { padding: 10px 0; border-bottom-color: rgba(13, 16, 32, 0.14); font-size: 16px; font-weight: 300; letter-spacing: 0; color: var(--cv-ink); }
.cv .cv-form .consult__field input::placeholder, .cv .cv-form .consult__field textarea::placeholder { color: rgba(13, 16, 32, 0.32); }
.cv .cv-form .consult__field input:focus, .cv .cv-form .consult__field textarea:focus { border-bottom-color: var(--cv-ink); }
.cv .cv-form .consult__agree { font-size: 13px; font-weight: 300; color: var(--cv-quiet); }
.cv .cv-form .consult__agree input { width: 16px; height: 16px; border-width: 1px; border-color: rgba(13, 16, 32, 0.5); }
.cv .cv-form .consult__submit { padding: 17px 34px; background: var(--cv-navy); font-size: 12px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; transition: background-color 0.3s ease; }
.cv .cv-form .consult__submit:hover { background: color-mix(in srgb, var(--cv-navy) 85%, #fff); }
/* Contact intro: synapse network over the misty band (src/contact-aether.js), fading out toward the info. */
.cv-aether { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); }

/* Contact intro: no card boxes around the contact info, so the network reads behind it; the
   network carries further down before fading. */
.cv .cv-intro--aether .ci-card,
.cv .cv-intro--aether .ci-card:hover { padding: 0 8px; border-color: transparent; background: transparent; box-shadow: none; }
.cv .cv-intro--aether .ci-icon { background: rgba(255, 255, 255, 0.7); }
.cv .cv-intro--aether .ci-action.copy-btn::after { background: transparent; }
.cv .cv-intro--aether .ci-action.copy-btn.is-copied span { opacity: 0; }
.cv-intro--aether .cv-aether { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%); }
/* Contact intro cards: the same frosted panels as the home page's brain story cards
   (.brain-stat / .brain-topic): 30% white, 24px blur, 23px corners, no border or shadow, 52px padding. No hover. */
.cv .cv-intro--aether .ci-card,
.cv .cv-intro--aether .ci-card:hover { padding: 52px; border: 0; border-radius: 23px; background: rgba(255, 255, 255, 0.3); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: none; }
/* Contact intro background: the home hero's gradient, white for the top quarter to blue-grey. */
.cv-glass { background: linear-gradient(180deg, #FFFFFF 0, #FFFFFF 25svh, #B9C9D9 100svh); }
/* Contact intro cards: a touch more see-through than the home cards so the network moves behind. */
.cv .cv-intro--aether .ci-card,
.cv .cv-intro--aether .ci-card:hover { background: rgba(255, 255, 255, 0.24); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* Contact intro entrance, in sequence: the label and heading reveal line by line (.reveal--load);
   once the heading starts (it gets .is-split), the cards rise in one after another, then each
   card's icon, label, details and link follow in turn. */
.cv-intro .cv-eyebrow.reveal, .cv-intro .cv-heading.reveal { text-transform: uppercase; }
.has-motion .cv-intro .ci-card,
.has-motion .cv-intro .ci-card > * { opacity: 0; }
.has-motion .cv-intro:has(.cv-heading.is-split) .ci-card { animation: cv-card-in 1.1s var(--ease-out) both; animation-delay: calc(0.85s + var(--ci, 0) * 0.16s); }
.has-motion .cv-intro:has(.cv-heading.is-split) .ci-card > * { animation: cv-card-text 0.8s var(--ease-out) both; animation-delay: calc(1.2s + var(--ci, 0) * 0.16s + var(--cj, 0) * 0.08s); }
.cv-intro .ci-card:nth-child(2) { --ci: 1; }
.cv-intro .ci-card:nth-child(3) { --ci: 2; }
.cv-intro .ci-card > :nth-child(2) { --cj: 1; }
.cv-intro .ci-card > :nth-child(3) { --cj: 2; }
.cv-intro .ci-card > :nth-child(4) { --cj: 3; }
@keyframes cv-card-in { from { opacity: 0; translate: 0 36px; } to { opacity: 1; translate: 0 0; } }
@keyframes cv-card-text { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
/* Contact intro: the title sits just above the middle of the screen, the cards a little lower. */
.cv-intro { padding-top: max(200px, calc(50svh - 150px)); }
.cv .cv-intro .ci-cards { margin-top: 112px; }
/* Card icons: the same animated Lucide line icons as "Before you arrive", unframed and larger.
   They draw on as their card's content arrives, then loop: the phone rings, the envelope flap
   redraws, the pin bobs over a pulsing ring. */
.cv .cv-intro .ci-icon { display: block; width: 32px; height: 32px; margin-bottom: 26px; border-radius: 0; background: none; color: var(--cv-ink); }
.cv .cv-intro .ci-icon svg { width: 32px; height: 32px; overflow: visible; stroke: currentColor; stroke-width: 1.1; }
.cv-intro .ci-icon svg * { stroke-dasharray: 1; stroke-dashoffset: 1; transform-box: view-box; }
.has-motion .cv-intro:has(.cv-heading.is-split) .ci-icon svg * { animation: cv-ico-draw 1.4s var(--ease-out) both; animation-delay: calc(1.25s + var(--ci, 0) * 0.16s); }
html:not(.has-motion) .cv-intro .ci-icon svg * { stroke-dashoffset: 0; }
@keyframes cv-ico-draw { to { stroke-dashoffset: 0; } }
.has-motion .cv-intro:has(.cv-heading.is-split) .cv-ico-shake { transform-origin: 12px 12px; animation: cv-ico-shake 3.6s ease-in-out calc(2.8s + var(--ci, 0) * 0.16s) infinite; }
.has-motion .cv-intro:has(.cv-heading.is-split) .cv-ico-flap { animation: cv-ico-draw 1.4s var(--ease-out) calc(1.25s + var(--ci, 0) * 0.16s) both, cv-ico-redraw 3.4s var(--ease-out) calc(2.8s + var(--ci, 0) * 0.16s) infinite; }
.has-motion .cv-intro:has(.cv-heading.is-split) .ci-icon .cv-ico-bob { animation: cv-ico-bob 2.6s ease-in-out calc(2.8s + var(--ci, 0) * 0.16s) infinite; }
.has-motion .cv-intro:has(.cv-heading.is-split) .ci-icon .cv-ico-ring { transform-origin: 12px 21.6px; animation: cv-ico-draw 1.4s var(--ease-out) calc(1.25s + var(--ci, 0) * 0.16s) both, cv-ico-ring 2.6s ease-out calc(2.8s + var(--ci, 0) * 0.16s) infinite; }
@keyframes cv-ico-shake { 0%, 72%, 100% { rotate: 0deg; } 76% { rotate: -12deg; } 80% { rotate: 10deg; } 84% { rotate: -8deg; } 88% { rotate: 6deg; } 92% { rotate: 0deg; } }
@media (prefers-reduced-motion: reduce) { .cv-intro .ci-icon svg * { stroke-dashoffset: 0; animation: none !important; } }
/* Contact intro: "Connect with us" centred between the menu pill (~60px) and the cards (~58% down). */
.cv-intro { padding-top: max(120px, calc(29svh - 15px)); }
.cv .cv-intro .ci-cards { margin-top: max(64px, calc(29svh - 69px)); }

/* =========================================================================
   Footer, final alignment (desktop). One 12-column grid. The mark sits on its
   own row; beneath it the lead (name, serif line, CTA) and the two link
   columns share exact top and bottom edges: text boxes are trimmed to cap
   height and baseline, so the first link's cap line meets the name's and the
   last link's baseline meets the CTA's. The bottom line snaps to the same
   columns as the links above it.
   ========================================================================= */
@media (min-width: 1024px) {
	.site-footer__top { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 0; align-items: stretch; }
	.site-footer__mark { grid-column: 1 / -1; grid-row: 1; width: 30px; margin: 0 0 40px; }
	.site-footer__lead { grid-column: 1 / span 5; grid-row: 2; gap: 0; }
	nav.site-footer__col { grid-column: 7 / span 2; grid-row: 2; }
	div.site-footer__col { grid-column: 10 / span 3; grid-row: 2; }
	.site-footer__col { justify-content: space-between; gap: 0; padding-top: 0; }
	.site-footer__eyebrow,
	.site-footer__col a,
	.site-footer__address,
	.site-footer__cta-text,
	.site-footer__cta-arrow { text-box: trim-both cap alphabetic; }
	.site-footer__eyebrow { margin: 0 0 30px; }
	.site-footer__statement { margin: 0 0 44px; }
	.site-footer__address { margin: 0; padding-top: 22px; line-height: 1.75; }
	/* CTA: the box ends at the text baseline; its hairline sits 9px below, drawn as pseudo-elements. */
	.site-footer__cta { align-items: baseline; padding-bottom: 0; background: none; }
	.site-footer__cta::after { content: ""; position: absolute; left: 0; bottom: -9px; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.28); }
	.site-footer__cta::before { bottom: -9px; }
	/* Bottom line on the same columns: © and credentials stacked at left, legal under the menu,
	   the studio credit under the contact column. */
	.site-footer__bottom { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 12px; align-items: start; padding-top: 24px; }
	.site-footer__bottom > p { margin: 0; text-box: trim-both cap alphabetic; }
	.site-footer__bottom > p:first-child { grid-column: 1 / span 6; grid-row: 1; }
	.site-footer__quals { grid-column: 1 / span 6; grid-row: 2; text-align: left; }
	.site-footer__legal { grid-column: 7 / span 3; grid-row: 1; justify-self: start; gap: 28px; }
	.site-footer__by { grid-column: 10 / span 3; grid-row: 1; }
}
@media (min-width: 1024px) {
	/* Beat the older nth-of-type placements. */
	.site-footer__top > nav.site-footer__col { grid-column: 7 / span 2; }
	.site-footer__top > div.site-footer__col { grid-column: 10 / span 3; }
	/* Contact: three links then the address as four lines — seven rows, like the menu, so every
	   row lines up across both columns. */
	.site-footer__address { display: contents; font-style: normal; }
	.site-footer__address span { display: block; font-size: 15px; color: rgba(255, 255, 255, 0.5); text-box: trim-both cap alphabetic; white-space: nowrap; }
	.site-footer__legal a, .site-footer__by a { white-space: nowrap; text-box: trim-both cap alphabetic; }
	.site-footer__legal { align-items: flex-start; }
}
/* Laptops (1024–1439px): the columns step one grid column left so the longest address line fits. */
@media (min-width: 1024px) and (max-width: 1439px) {
	.site-footer__top > nav.site-footer__col { grid-column: 6 / span 3; }
	.site-footer__top > div.site-footer__col { grid-column: 9 / span 4; }
	.site-footer__legal { grid-column: 6 / span 3; gap: 22px; }
	.site-footer__by { grid-column: 9 / span 4; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
	.site-footer__by { grid-column: 6 / span 4; grid-row: 2; }
	.site-footer__legal { gap: 22px; }
}
/* Footer link columns: tighter rows, still ending exactly on the CTA's baseline. */
@media (min-width: 1024px) {
	.site-footer__col { justify-content: flex-end; gap: 24px; }
}
/* Footer: the link columns span exactly from the cap line of "PRECISION AT" to the CTA's baseline.
   The lead's pieces become grid items (row 2 name, row 3 serif line, row 4 CTA) and the columns
   span rows 3–4, spreading their rows evenly between those two edges. */
@media (min-width: 1024px) {
	.site-footer__lead { display: contents; }
	.site-footer__eyebrow { grid-column: 1 / span 5; grid-row: 2; justify-self: start; }
	.site-footer__statement { grid-column: 1 / span 5; grid-row: 3; justify-self: start; text-box: trim-both cap alphabetic; }
	.site-footer__cta { grid-column: 1 / span 5; grid-row: 4; justify-self: start; align-self: end; }
	.site-footer__top > nav.site-footer__col,
	.site-footer__top > div.site-footer__col { grid-row: 3 / span 2; justify-content: space-between; gap: 0; }
}
/* Footer bottom line: always one line — ©, legal under the menu, studio credit under contact. */
@media (min-width: 1024px) {
	.site-footer__bottom { row-gap: 0; }
	.site-footer__bottom > p { white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
	.site-footer__legal { grid-column: 5 / span 4; gap: 18px; }
	.site-footer__by { grid-column: 9 / span 4; grid-row: 1; }
}
/* Footer bottom line: © and legal left-aligned to their columns; the studio credit right-aligned
   to the footer's right edge. */
@media (min-width: 1024px) {
	.site-footer__by { justify-self: end; text-align: right; }
}
/* Footer bottom line: © at left; the four links (legal + studio credit) as one evenly spaced,
   identically styled group, right-aligned to the footer edge. */
@media (min-width: 1024px) {
	.site-footer__legal,
	.site-footer__legal { grid-column: 7 / -1; justify-self: end; gap: 32px; }
}
@media (min-width: 1024px) and (max-width: 1439px) {
	.site-footer__legal { grid-column: 6 / -1; gap: 28px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
	.site-footer__legal { grid-column: 5 / -1; gap: 24px; }
}
.site-footer__legal a { font-size: 12px; font-weight: 300; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.55); }
.site-footer__legal a:hover { color: #fff; }
/* Menu pill: small, widely spaced uppercase — the same quiet label style as the footer and contact page. */
.site-bar { font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; }
.site-bar__menu { gap: 12px; padding: 0 18px 0 22px; }
.site-bar__cta { padding: 0 20px 0 16px; }
.site-bar__menu, .site-bar__cta { text-transform: inherit; }

/* =========================================================================
   About, refined (the contact page's and footer's language): tiny spaced
   uppercase labels, lighter headings and body, finer hairlines, quieter
   cards, links with a hairline underline, and a little more air.
   ========================================================================= */
/* Labels. */
.pv.pv.pv .pv-label,
.pv.pv.pv .tl__label,
.pv.pv.pv .pv-orbit__more,
.pv.pv.pv .pv-member__role { font-size: 11px; font-weight: 400; line-height: 1.6; letter-spacing: 0.22em; text-transform: uppercase; }
.pv.pv.pv .pv-label--dark,
.pv.pv.pv .pv-white .pv-label,
.pv.pv.pv .pv-member__role { color: rgba(15, 16, 18, 0.45); }
.pv.pv.pv .pv-navy .pv-label,
.pv.pv.pv .tl__label,
.pv.pv.pv .pv-plan__card .pv-label,
.pv.pv.pv .pv-orbit__more { color: rgba(234, 242, 255, 0.55); }
.pv.pv.pv .pv-aspects__label .pv-label { color: rgba(255, 255, 255, 0.7); }
.pv.pv.pv .pv-orbit__core .pv-label { color: rgba(234, 242, 255, 0.85); }
/* Headings: lighter and slightly tighter. */
.pv.pv.pv .pv-h2,
.pv.pv.pv .tl__title { font-weight: 200; font-size: clamp(2.4rem, 3vw, 2.95rem); line-height: 1.06; letter-spacing: -0.03em; }
.pv.pv.pv .pv-split__head { display: flex; flex-direction: column; gap: 22px; }
.pv.pv.pv .pv-split__head .pv-h2 { margin: 0; }
/* Statements and body. */
.pv.pv.pv .ap-statement { font-weight: 200; line-height: 1.32; letter-spacing: -0.02em; }
.pv.pv.pv .pv-quote { font-weight: 200; letter-spacing: -0.02em; }
.pv.pv.pv .pv-body,
.pv.pv.pv .pv-member__bio { font-size: 15px; font-weight: 300; line-height: 1.75; letter-spacing: 0; color: rgba(15, 16, 18, 0.52); }
.pv.pv.pv .pv-plan__card .pv-body { color: rgba(234, 242, 255, 0.68); }
.pv.pv.pv .pv-lede { font-size: 17px; font-weight: 300; line-height: 1.7; letter-spacing: 0; color: rgba(255, 255, 255, 0.7); }
.pv.pv.pv .pv-body a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 1px; transition: color 0.3s ease; }
.pv.pv.pv .pv-body a:hover { color: rgba(15, 16, 18, 0.9); }
/* Numbered rows: finer rules, spaced numbers, lighter words. */
.pv.pv.pv .ap-rows li { padding: 28px 0; border-color: rgba(15, 16, 18, 0.08); }
.pv.pv.pv .ap-rows__num { font-size: 11px; font-weight: 400; letter-spacing: 0.22em; color: rgba(15, 16, 18, 0.4); }
.pv.pv.pv .ap-rows__word { font-weight: 200; letter-spacing: -0.02em; }
.pv.pv.pv .ap-photo__cap .pv-label { color: rgba(15, 16, 18, 0.45); }
/* MDT orbit names: smaller, airier. */
.pv.pv.pv .pv-orbit__name { font-size: 15px; font-weight: 300; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.85); }
/* Tailored-plan card: frosted with a hairline edge. */
.pv.pv.pv .pv-plan__card { padding: 48px 48px 44px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 22px; background: rgba(18, 21, 42, 0.5); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); display: flex; flex-direction: column; gap: 18px; }
.pv.pv.pv .pv-plan__card > * { margin: 0; }
/* Timeline cards. */
.pv.pv.pv .tl-mark__meta { font-size: 11px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; }
.pv.pv.pv .tl-mark__title { font-weight: 300; letter-spacing: -0.015em; }
.pv.pv.pv .tl-mark__place { font-size: 13px; letter-spacing: 0.01em; color: rgba(234, 242, 255, 0.6); }
/* Team. */
.pv.pv.pv .pv-member__name { font-weight: 300; letter-spacing: -0.015em; }
.pv.pv.pv .pv-member__info { display: flex; flex-direction: column; gap: 10px; }
.pv.pv.pv .pv-member__info > * { margin: 0; }
/* More air between sections. */
.pv.pv.pv .pv-white, .pv.pv.pv .pv-navy { padding-top: 200px; padding-bottom: 200px; }
/* Timeline heading "Exceptional training": serif, uppercase (the serif is only ever uppercase). */
.pv.pv.pv .tl__title { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(3.2rem, 4vw, 4rem); line-height: 0.98; letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap; }
/* Timeline milestones animate in as they come on screen (.is-in, src/timeline.js): the ring scales
   up, the stem draws down, then year, title and place blur-fade up in turn. Fill "backwards" so the
   usual near/hover opacities take over once each has played. */
.has-motion .tl-mark:not(.is-in) .tl-mark__ring,
.has-motion .tl-mark:not(.is-in) .tl-mark__info > *,
.has-motion .tl-mark:not(.is-in) .tl-mark__info::before,
.has-motion .tl-mark:not(.is-in) .tl-mark__info::after { opacity: 0; }
.has-motion .tl-mark.is-in .tl-mark__ring { animation: tl-ring-in 1s cubic-bezier(.2,.7,.2,1) backwards; }
.has-motion .tl-mark.is-in .tl-mark__info::after { animation: tl-stem-in 0.7s cubic-bezier(.2,.7,.2,1) 0.25s backwards; transform-origin: bottom; }
.has-motion .tl-mark.is-in .tl-mark__info::before { animation: tl-fade-in 0.5s ease 0.45s backwards; }
.has-motion .tl-mark.is-in .tl-mark__info > * { animation: tl-text-in 0.9s cubic-bezier(.2,.7,.2,1) backwards; }
.has-motion .tl-mark.is-in .tl-mark__meta { animation-delay: 0.4s; }
.has-motion .tl-mark.is-in .tl-mark__title { animation-delay: 0.52s; }
.has-motion .tl-mark.is-in .tl-mark__place { animation-delay: 0.64s; }
@keyframes tl-ring-in { from { opacity: 0; transform: scale(0.55); } }
@keyframes tl-stem-in { from { opacity: 0; transform: scaleY(0); } }
@keyframes tl-fade-in { from { opacity: 0; } }
@keyframes tl-text-in { from { opacity: 0; filter: blur(8px); transform: translateY(14px); } }
/* Menu pill, Apple-like: small sentence-case text at regular weight with slightly tight tracking
   (replaces the uppercase labels above). */
.site-bar { font-size: 13px; font-weight: 400; letter-spacing: -0.01em; text-transform: none; }
.site-bar__menu, .site-bar__cta { text-transform: none; }
.site-bar__menu { gap: 12px; padding: 0 18px 0 20px; }
.site-bar__cta { padding: 0 20px 0 16px; }
.site-bar { letter-spacing: 0.03em; } /* Inter Tight runs narrow: open the tracking a little so the pill reads at a natural width. */

/* =========================================================================
   About, after the timeline. Only the site's existing type and surfaces:
   11px spaced labels, the contact page's uppercase serif heading, the
   17px / 15px light body, 22px light card titles, the home page's frosted
   cards on the home hero gradient, and the contact page's text link.
   ========================================================================= */
.ab { --ab-ink: #0D1020; --ab-navy: #1E2A5A; padding: 200px 8vw; background: #fff; color: var(--ab-ink); font-family: var(--wp--preset--font-family--body); }
.ab-care, .ab-plan { background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 25%, #B9C9D9 100%); }
.ab-head { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
/* Label: as .cv-eyebrow. */
.ab-label, .ab-label.reveal { margin: 0; font-size: 11px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(13, 16, 32, 0.45); }
/* Heading: as .cv-heading. */
.ab-big, .ab-big.reveal { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(3.75rem, 4.6vw, 4.75rem); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ab-navy); }
/* Lede: as .cv-consult__lede. */
.ab-lede { max-width: 32em; margin: 0; font-size: 17px; font-weight: 300; line-height: 1.65; color: rgba(13, 16, 32, 0.52); }
.ab-body { margin: 0; font-size: 17px; font-weight: 300; line-height: 1.65; color: rgba(13, 16, 32, 0.52); }
.ab-body a, .ab-lede a { color: var(--ab-ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
/* Photo panel with frosted bars (bar text as the 15px light body, white). */
.ab-panel { position: relative; margin: 96px 0 0; }
.ab-panel__frame { position: relative; aspect-ratio: 16 / 8.4; border-radius: 23px; overflow: hidden; background: #0D1020; }
.ab-panel__frame img { position: absolute; inset: 0; width: 100%; height: 116% !important; top: -8%; max-width: none; object-fit: cover; }
.ab-bars { position: absolute; left: 50%; bottom: 9%; translate: -50% 0; display: flex; flex-direction: column; gap: 12px; width: min(640px, 56%); margin: 0; }
.ab-bar { position: relative; display: flex; justify-content: space-between; align-items: center; height: 56px; margin: 0; padding: 0 24px; border-radius: 14px; overflow: hidden; background: rgba(8, 12, 28, 0.32); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 15px; font-weight: 300; color: #fff; }
.ab-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--fill) * 100%); background: rgba(255, 255, 255, 0.2); border-radius: inherit; transform-origin: left; }
.ab-bar::after { content: ""; position: absolute; top: 50%; left: calc(var(--fill) * 100% - 12px); width: 2px; height: 22px; margin-top: -11px; border-radius: 2px; background: #fff; }
.ab-bar > span { position: relative; z-index: 1; }
.ab-bar__value { color: rgba(255, 255, 255, 0.8); }
@supports (animation-timeline: view()) {
	.ab-bar::before { animation: ab-fill linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
	.ab-bar::after { animation: ab-handle linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
	@keyframes ab-fill { from { transform: scaleX(0); } }
	@keyframes ab-handle { from { left: 12px; opacity: 0; } }
}
.ab-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; margin-top: 96px; }
.ab-split .ab-label { grid-column: 1 / span 4; padding-top: 0.5em; }
.ab-split .ab-body { grid-column: 6 / span 7; max-width: 38em; }
/* Bento: the home page's frosted cards (as .brain-stat): 30% white, 24px blur, 23px corners. */
.ab-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; margin: 96px 0 0; padding: 0; list-style: none; }
.ab-card { display: flex; flex-direction: column; gap: 32px; min-height: 520px; padding: 52px 52px 0; border-radius: 23px; overflow: hidden; background: rgba(255, 255, 255, 0.3); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.ab-card:nth-child(1) { grid-column: 1 / span 7; }
.ab-card:nth-child(2) { grid-column: 8 / span 5; }
.ab-card:nth-child(3) { grid-column: 1 / span 5; }
.ab-card:nth-child(4) { grid-column: 6 / span 7; }
.ab-card__text { display: flex; flex-direction: column; gap: 8px; }
/* Card title and text: as .cv-step__title / .cv-step__text. */
.ab-card__title { margin: 0; font-family: var(--wp--preset--font-family--body); font-size: 22px; font-weight: 300; line-height: 1.25; letter-spacing: -0.01em; text-transform: none; color: var(--ab-ink); }
.ab-card__sub { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.6; color: rgba(13, 16, 32, 0.52); }
.ab-card__media { flex: 1; min-height: 300px; margin: 0; border-radius: 16px 16px 0 0; overflow: hidden; }
.ab-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-card--note { justify-content: space-between; padding-bottom: 52px; }
.ab-card__lead { margin: 0; max-width: 32em; font-size: 17px; font-weight: 300; line-height: 1.65; color: rgba(13, 16, 32, 0.52); }
.ab-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(13, 16, 32, 0.09); }
.ab-list li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(13, 16, 32, 0.09); font-size: 15px; font-weight: 300; color: var(--ab-ink); }
.ab-list__dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--ab-navy); justify-self: center; }
.ab-list__note { font-size: 15px; font-weight: 300; color: rgba(13, 16, 32, 0.52); }
/* Split plan: a frosted card and a rotating photo. */
.ab-plan { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.ab-plan__card { grid-column: 1 / span 6; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; min-height: 620px; padding: 52px; border-radius: 23px; background: rgba(255, 255, 255, 0.3); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-sizing: border-box; }
.ab-plan__title { margin: 0; }
/* Link: as the contact page's text CTA (.cv-pill). */
.ab-plan__cta { position: relative; display: inline-flex; align-items: center; gap: 14px; margin-top: auto; padding: 0 0 9px; background: linear-gradient(rgba(13, 16, 32, 0.22), rgba(13, 16, 32, 0.22)) 0 100% / 100% 1px no-repeat; font-size: 15px; font-weight: 300; letter-spacing: 0.02em; color: var(--ab-ink); text-decoration: none; }
.ab-plan__cta::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.7s var(--ease-out); }
.ab-plan__cta:hover::before { transform: scaleX(1); transform-origin: left; }
.ab-plan__cta span { display: inline-block; transition: translate 0.5s var(--ease-out); }
.ab-plan__cta:hover span { translate: 6px 0; }
.ab-plan__media { grid-column: 7 / span 6; position: relative; min-height: 620px; border-radius: 23px; overflow: hidden; background: #0D1020; }
.ab-plan__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.ab-plan__media img.is-on { opacity: 1; }
.ab-dots { position: absolute; left: 50%; bottom: 26px; translate: -50% 0; display: flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 100px; background: rgba(13, 16, 32, 0.28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ab-dots span { width: 6px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.55); transition: width 0.5s var(--ease-out), background-color 0.5s ease; }
.ab-dots span.is-on { width: 22px; background: #fff; }
.pv.pv.pv .pv-mdt { padding-top: 0; }

/* About, after the timeline: a large serif statement that fills in word by word
   as it scrolls up (.scroll-highlight in motion.js). Same type as the headings. */
.pv.pv.pv .ab-fill { padding: 22vh 8vw 28vh; background: #fff; }
.pv.pv.pv .ab-fill__label { margin: 0 0 32px; text-align: center; }
.pv.pv.pv .ab-fill__text { max-width: 22em; margin: 0 auto; text-align: center; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(2.5rem, min(3.5vw, 6.4vh), 3.6rem); line-height: 1; text-transform: uppercase; color: #1E2A5A; text-wrap: pretty; }

/* MDT workshops: the Dr and his team in a 3 × 3 grid (ref: Codrops "Sticky Grid
   Scroll"). The section slides out from under the statement above, the columns
   arrive from above and below, then the grid zooms: the side columns spread to
   the edges and the centre column splits up and down around the title and copy. Scroll-driven in motion.js; static without motion. */
.pv.pv.pv .ab-fill { position: relative; z-index: 1; }
.mdt { position: relative; background: #0D1020; color: #fff; }
.has-motion .mdt { height: 250vh; }
.mdt__wrapper { position: relative; padding: 0 8vw; overflow: hidden; background: radial-gradient(ellipse 80% 60% at 50% 50%, #12152A 0%, #0D1020 55%, #06070E 100%); }
.has-motion .mdt__wrapper { position: sticky; top: 0; height: 100vh; will-change: transform; }
.mdt__content { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 32px; height: 100vh; box-sizing: border-box; padding: 0; text-align: center; pointer-events: none; }
.mdt__title { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.pv.pv.pv .mdt__heading { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(3.2rem, 4vw, 4rem); line-height: 0.98; letter-spacing: 0.01em; text-transform: uppercase; color: color-mix(in srgb, #F2F2F4 var(--mdt-light, 100%), #1E2A5A); }
.pv.pv.pv .mdt__title .pv-label { color: color-mix(in srgb, rgba(242, 242, 244, 0.55) var(--mdt-light, 100%), #1E2A5A); } /* --mdt-light: motion.js */
.pv.pv.pv .mdt__description { max-width: 40em; margin: 0; font-size: 14px; font-weight: 300; line-height: 1.85; letter-spacing: 0.015em; color: rgba(255, 255, 255, 0.58); }
.mdt__gallery { position: absolute; top: 50%; left: 50%; width: min(736px, 51vw, 82vh); translate: -50% -50%; }
.pv.pv.pv .mdt__description p { margin: 0; }
.mdt__description .nowrap, .team__role .nowrap { white-space: nowrap; } /* keeps short words with the next, for cleaner breaks */
.pv.pv.pv .mdt__description p + p { margin-top: 14px; }
.mdt__description .word { display: inline-block; will-change: opacity; }
.mdt-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; row-gap: 40px; margin: 0; padding: 0; list-style: none; }
.mdt-grid__item { box-sizing: border-box; position: relative; display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 1; overflow: hidden; padding-bottom: 18px; border-radius: 6px; background: linear-gradient(180deg, #1B2140 0%, #141A33 100%); }
/* Names sit on the part of each card still on screen once the grid has spread:
   the bottom edge of the top row, the top edge of the bottom row, and the inner
   edge of the side columns. */
.mdt-grid__item:nth-child(n + 4) { align-items: flex-start; padding: 18px 0 0; }
.mdt-grid__item:nth-child(3n + 1) { justify-content: flex-end; padding-right: 22px; }
.mdt-grid__item:nth-child(3n) { justify-content: flex-start; padding-left: 22px; }
.mdt__tags { position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* names, placed by motion.js */
.mdt__tags .mdt-grid__tag { position: absolute; top: 0; left: 0; }
.mdt-grid__tag--phone { display: none; } /* the label on Dr. Hina's photo: phones only (mobile block) */
.pv.pv.pv .mdt-grid__tag .pv-label { display: block; color: rgba(242, 242, 244, 0.85); white-space: nowrap; }
.mdt-grid__item img { position: absolute; inset: 0; width: 100%; height: 100% !important; margin: 0 !important; max-width: none; object-fit: cover; object-position: 50% 15%; }
/* Photo cards: the specialty photos are graded to one navy-to-pale-blue tone (baked into the mdt-*.webp files),
   with a soft navy fade behind the name. */
.mdt-grid__item--photo img { object-position: 50% 50%; }
.mdt-grid__item--lead img { object-position: 50% 15%; filter: saturate(0.75) brightness(0.85); } /* the Dr's portrait isn't graded */
.mdt-grid__item--lead { background: radial-gradient(ellipse 90% 70% at 50% 35%, #2B4277 0%, #1D2D56 55%, #141D3A 100%); } /* the portrait is a cut-out, so this is the colour behind him */
.mdt-grid__item--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 16, 32, 0.15), rgba(13, 16, 32, 0.45)); }
.mdt-grid__item:nth-child(-n + 3).mdt-grid__item--photo::after { background: linear-gradient(0deg, rgba(13, 16, 32, 0.5), rgba(13, 16, 32, 0.1) 60%); }
.mdt-grid__item:nth-child(n + 4).mdt-grid__item--photo::after { background: linear-gradient(180deg, rgba(13, 16, 32, 0.5), rgba(13, 16, 32, 0.1) 60%); }
/* Without motion: an ordinary section, copy above the grid. */
:root:not(.has-motion) .mdt__wrapper { padding: 22vh 8vw; }
:root:not(.has-motion) .mdt__content { height: auto; padding: 0 0 64px; gap: 32px; }
:root:not(.has-motion) .mdt__gallery { position: relative; top: auto; left: auto; translate: none; margin: 0 auto; }

/* Our team: centred heading as "Our Approach", then four portrait cards with
   role and name. Photos to come; a soft placeholder until then. */
.pv.pv.pv .team { padding: 24vh 8vw 26vh; background: #fff; color: #0F1012; }
.team__head { display: flex; flex-direction: column; align-items: center; gap: 32px; margin: 0 0 12vh; text-align: center; }
.pv.pv.pv .team__head .pv-label { margin: 0; }
.pv.pv.pv .team__heading { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(3.2rem, 4vw, 4rem); line-height: 0.98; letter-spacing: 0.01em; text-transform: uppercase; color: #1E2A5A; }
.team__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 56px 12px; margin: 0; padding: 0; list-style: none; }
.team__member { display: flex; flex-direction: column; }
.team__photo { aspect-ratio: 4 / 5; margin: 0 0 24px; overflow: hidden; border-radius: 6px; background: linear-gradient(180deg, #F2F4F7 0%, #DCE4EC 100%); }
.team__photo img { display: block; width: 100%; height: 100% !important; margin: 0 !important; max-width: none; object-fit: cover; object-position: 50% 20%; }
.pv.pv.pv .team__member > p, .pv.pv.pv .team__name { margin: 0; }
.pv.pv.pv .team__role { font-family: var(--wp--preset--font-family--body); font-size: 14px; font-weight: 300; line-height: 1.5; color: rgba(15, 16, 18, 0.6); } /* sentence case, not the spaced capitals label */
.pv.pv.pv .team__name { margin: 0 0 6px; font-family: var(--wp--preset--font-family--body); font-size: 20px; font-weight: 300; line-height: 1.3; letter-spacing: -0.015em; color: #0F1012; }

/* Home services: the Patient resources split layout — heading and an image on the
   left, an accordion of the six services on the right. The image shows the service
   being hovered or opened (motion.js). */
.hs-svc__media { position: relative; overflow: hidden; background: #F8FAFB; }
.hs-svc__media img { position: absolute; inset: 0; width: 100%; height: 100% !important; margin: 0 !important; max-width: none; object-fit: cover; opacity: 0; scale: 1.04; transition: opacity 0.6s ease, scale 1.2s var(--ease-out, cubic-bezier(.2,.7,.2,1)); }
.hs-svc__media img.is-active { opacity: 1; scale: 1; }
/* The section's entrance (.reveal-img > img) sets its own scale and transition, which overrode the
   cross-fade (the swap was instant). Keep both: the entrance zoom, then the fade + settle. */
.has-motion .hs-svc__media.reveal-img > img { transition: opacity 0.7s ease, scale 1.8s var(--ease-out) var(--enter-d, 0s); }
.has-motion .hs-svc__media.reveal-img.is-in > img { scale: 1.05; transition: opacity 0.7s ease, scale 1.2s var(--ease-out); }
.has-motion .hs-svc__media.reveal-img.is-in > img.is-active { scale: 1; }
/* Rows are links to each service (no expanding): the round button carries an arrow
   that fills navy on hover. */
.hs-svc .acc__q { text-decoration: none; }
.hs-svc__go { display: grid; place-items: center; font-family: var(--wp--preset--font-family--body); font-weight: 300; font-size: 18px; color: var(--wp--preset--color--slate); }
.hs-svc__go::before, .hs-svc__go::after { content: none; }
.hs-svc .acc__q:hover .hs-svc__go { background: var(--wp--preset--color--slate); color: #fff; transform: translateX(4px); }
.hs-svc .acc__q { padding-block: 18px; font-weight: 300; letter-spacing: -0.01em; } /* tighter rows than Patient resources; same light weight */
.hs-svc__all { margin-top: 32px; }

/* Service detail, one screen: a top bar (All services · ‹ 03 / 06 ›), the service in
   two columns (title, copy and consultation | conditions), and a strip of all six
   services along the bottom; services switch in place (src/services.js). */
.svc-detail__panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; align-items: stretch; padding: 100px clamp(48px, 7vw, 120px) 44px; }
.svc-detail__top { display: flex; justify-content: flex-end; align-items: center; } /* the back pill is fixed at the top left (.back-pill); the pager stays right */
.svc-detail__pager { display: flex; align-items: center; gap: 14px; font-size: 14px; letter-spacing: 0.04em; color: var(--muted); }
.svc-detail__current { color: var(--wp--preset--color--slate); }
.svc-detail__step { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--hairline); border-radius: 50%; background: rgba(255, 255, 255, 0.5); font: inherit; font-size: 20px; line-height: 1; color: var(--wp--preset--color--slate); cursor: pointer; transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; }
.svc-detail__step:hover { background: var(--wp--preset--color--slate); border-color: var(--wp--preset--color--slate); color: #fff; }
.svc-detail__step:focus { outline: none; }
.svc-detail__step:focus-visible { outline: 1px solid rgba(29, 62, 93, 0.45); outline-offset: 4px; }
.svc-detail__body { display: flex; align-items: flex-start; min-height: 0; padding-top: 4vh; } /* every service starts at the same height */
.svc-detail__group.active { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); /* room for the longest word (CEREBROVASCULAR) at the hero title size */ gap: clamp(48px, 7vw, 120px); align-items: start; width: 100%; max-width: none; }
.svc-detail__main .svc-detail__eyebrow { margin: 0; }
.svc-detail__main .svc-detail__title { margin: 16px 0 32px; }
.svc-detail__main .svc-detail__item + .svc-detail__item { margin-top: 20px; }
.svc-detail__main .svc-detail__text { font-size: 16px; line-height: 1.65; }
.svc-detail__main .svc-detail__actions { margin-top: 36px; }
.svc-detail__side .svc-detail__label { margin: 0 0 12px; } /* level with the eyebrow on the left */
.svc-detail__side .svc-detail__conditions a { padding: 14px 0; font-size: 16px; }
.svc-detail__nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.svc-detail__navlink { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.3; color: var(--muted); text-decoration: none; transition: color 0.35s ease; }
.svc-detail__navnum { font-size: 12px; letter-spacing: 0.06em; opacity: 0.7; }
.svc-detail__navlink:hover, .svc-detail__navlink.is-current { color: var(--wp--preset--color--slate); }
.svc-detail__navlink.is-current { position: relative; }
.svc-detail__navlink.is-current::before { content: ""; position: absolute; left: 0; right: 0; top: -19px; height: 1px; background: var(--wp--preset--color--slate); }
/* Shorter screens: a little tighter so the longest service still fits above the strip;
   if one ever doesn't, only the content area scrolls (never under the strip). */
.svc-detail__body { overflow-y: auto; scrollbar-width: none; }
.svc-detail__body::-webkit-scrollbar { display: none; }
@media (max-height: 820px) {
	.svc-detail__panel { padding-top: 88px; padding-bottom: 28px; }
	.svc-detail__body { padding-top: 2vh; }
	.svc-detail__main .svc-detail__title { margin: 12px 0 20px; }
	.svc-detail__main .svc-detail__sub { margin-bottom: 4px; font-size: 16px; }
	.svc-detail__main .svc-detail__text { font-size: 15px; line-height: 1.55; }
	.svc-detail__main .svc-detail__item + .svc-detail__item { margin-top: 14px; }
	.svc-detail__main .svc-detail__actions { margin-top: 24px; }
	.svc-detail__side .svc-detail__conditions a { padding: 11px 0; font-size: 15px; }
	.svc-detail__nav { padding-top: 14px; }
	.svc-detail__navlink.is-current::before { top: -15px; }
}
/* Related conditions: the Patient resources row hover (.doc-row) — an ice fill wipes in
   from the left, the text eases right and the arrow slides in. */
.svc-detail__conditions a { position: relative; isolation: isolate; align-items: center; }
.svc-detail__conditions a:hover { padding-inline: 0; } /* text stays in line with the label and dividers */
.svc-detail__conditions a::before { content: ""; position: absolute; inset: 0 -14px; z-index: -1; border-radius: 12px; background: var(--ice); clip-path: inset(0 100% 0 0 round 12px); transition: clip-path 0.7s var(--ease-io); }
.svc-detail__conditions a:hover::before { clip-path: inset(0 0 0 0 round 12px); }
.svc-detail__conditions a > span { transition: translate 0.6s var(--ease-out), opacity 0.4s ease; }
.svc-detail__conditions a:hover > span:first-child { translate: 10px 0; }
.svc-detail__conditions a > span:last-child { opacity: 0; translate: -10px 0; }
.svc-detail__conditions a:hover > span:last-child { opacity: 1; translate: 0 0; }
/* The conditions list's top rule lines up with the top of the title's capitals: the
   title is trimmed to its cap height, and the label (same height as the eyebrow)
   sits above the rule by the same gap as the eyebrow above the title. */
.svc-detail__main .svc-detail__title { text-box: trim-both cap alphabetic; }
.svc-detail__side { padding-top: 4px; } /* title margin-top 16px − label margin-bottom 12px */
@media (max-height: 820px) { .svc-detail__side { padding-top: 0; } } /* 12px − 12px */

/* While a service is open its content area never hands scrolling on to the page
   (wheel/touch are also held in services.js); the page itself isn't locked with
   overflow, which made the frosted cards repaint dark at the screen edge. */
.svc-detail__panel, .svc-detail__body { overscroll-behavior: contain; }

/* Contact: ID badge on a lanyard (src/lanyard.js) in place of the photo card. The
   stage spans the whole section (set in JS) and isn't clipped, so the card can swing
   over the text and off screen; the card is HTML turned in 3D. Sizes follow --lyd-cw. The photo card shows
   until the badge is ready. */
.cv-consult__media { position: relative; }
.cv-consult__media:has(.lyd.is-ready) .cv-consult__card { visibility: hidden; }
.lyd { --lyd-cw: 320px; --lyd-strap: #1E2A5A; --lyd-hardware: #C9D0DA; position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 3; overflow: visible; pointer-events: none; user-select: none; visibility: hidden; }
.lyd.is-ready { visibility: visible; }
.lyd__canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; pointer-events: none; }
.lyd__card { position: absolute; left: 0; top: 0; width: var(--lyd-cw); height: calc(var(--lyd-ch) + var(--lyd-ring) + var(--lyd-clip)); transform-origin: 50% var(--lyd-clamp-top); cursor: grab; touch-action: none; will-change: transform; pointer-events: auto; outline: none; font-size: calc(var(--lyd-cw) / 24); }
.lyd__card:focus-visible .lyd__face { outline: 1px solid rgba(29, 62, 93, 0.45); outline-offset: 4px; }
/* Steel clamp the strap ends in, square over the top of the card and just over its hole:
   polished steel with an edge highlight. */
.lyd__clamp { position: absolute; left: 50%; top: var(--lyd-clamp-top); z-index: 2; width: calc(var(--lyd-cw) * 0.2); height: var(--lyd-clamp-h); translate: -50% 0; box-sizing: border-box; border-radius: calc(var(--lyd-cw) * 0.022); background: linear-gradient(180deg, #e6e9ee 0%, #b3b9c3 40%, #8d949f 75%, #c4c9d1 100%); box-shadow: 0 1px 2px rgba(13, 16, 32, 0.3); }
.lyd__clamp::after { content: ""; position: absolute; left: 16%; right: 16%; top: 5%; height: 1px; background: rgba(255, 255, 255, 0.6); }
.lyd__inner { position: absolute; left: 0; right: 0; top: calc(var(--lyd-ring) + var(--lyd-clip) * 0.6); height: var(--lyd-ch); transform-style: preserve-3d; }
.lyd__face * { pointer-events: none; -webkit-user-drag: none; user-select: none; } /* the card is grabbed whole, never its photo or text */
.lyd__face { position: absolute; inset: 0; overflow: hidden; border-radius: calc(var(--lyd-cw) * 0.06); backface-visibility: hidden; -webkit-backface-visibility: hidden; font-family: var(--wp--preset--font-family--body); }
.lyd__back { transform: rotateY(180deg); }
.lyd__slot { display: none; }
/* The slot is a real hole punched through the card (both faces), so the page shows through it. */
.lyd__face { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 480'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='320' height='480' fill='%23fff'/%3E%3Crect x='115' y='16' width='90' height='12' rx='6' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='320' height='480' fill='%23000' mask='url(%23m)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 480'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='320' height='480' fill='%23fff'/%3E%3Crect x='115' y='16' width='90' height='12' rx='6' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='320' height='480' fill='%23000' mask='url(%23m)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.lyd__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%) var(--lyd-shine, 50%) 0 / 250% 100% no-repeat, rgba(0, 0, 0, var(--lyd-dim, 0)); } /* a gloss that slides as it moves, and dims side-on */
.lyd p, .lyd dl, .lyd dd { margin: 0; }
/* Front (after a minimal ID card): the portrait full bleed on a soft backdrop, a white
   panel below with a stepped curve along its top, the name in two light lines, and a
   quiet bottom row. 1em = a 24th of the card. */
.lyd__front { background: #fff; color: #1E2A5A; }
.lyd__photo { position: absolute; inset: 0 0 30% 0; overflow: hidden; background: radial-gradient(ellipse 90% 80% at 30% 20%, #F4F6FA 0%, #DDE4EE 55%, #C6D1E1 100%); }
.lyd__photo img { position: absolute; left: 50%; bottom: -52%; height: 150% !important; width: auto; max-width: none; margin: 0 !important; translate: -50% 0; }
.lyd__panel { position: absolute; inset: 0; width: 100%; height: 100%; fill: #fff; }
.lyd__name { position: absolute; left: 7.5%; top: 66.5%; white-space: nowrap; font-size: 1.55em; font-weight: 300; line-height: 1.12; letter-spacing: -0.015em; color: #1E2A5A; }
.lyd__foot { position: absolute; left: 7.5%; right: 7.5%; bottom: 5%; display: flex; justify-content: space-between; font-size: 0.62em; font-weight: 400; letter-spacing: 0.01em; color: #1E2A5A; }
/* Back: navy, "Dr. Hina" running up the card, the footer mark at the foot. */
.lyd__back { background: linear-gradient(160deg, #22316A 0%, #141C40 100%); color: #fff; }
.lyd__word { position: absolute; left: 42%; bottom: 22%; transform-origin: 0 100%; transform: rotate(-90deg); font-size: 4.6em; font-weight: 300; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.lyd__back .lyd__mark { position: absolute; left: 7.5%; bottom: 5%; display: inline-flex; color: #fff; }
.lyd__back .lyd__mark svg { width: 2.6em; height: auto; display: block; }
/* The badge may swing past the screen edge: trim the contact page there rather than
   letting it add a sideways scroll. */
.cv { overflow-x: clip; }
/* Contact hero: "Connect with us" with the phone and email cards on the left, the ID
   badge hanging from the top of the page on the right (the address is in Find us). */
.cv .cv-intro--aether { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 4vw, 72px); align-items: center; }
.cv .cv-intro--aether .cv-intro__main { position: relative; z-index: 1; top: -88px; }
.cv .cv-intro--aether .ci-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cv-intro__badge { position: relative; align-self: start; height: 560px; } /* sets how low the badge hangs */
/* Contact hero: phone and email straight under the title, stacked and left-aligned,
   without the frosted cards. */
.cv .cv-intro--aether .ci-cards { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 56px; }
.cv .cv-intro--aether .ci-card,
.cv .cv-intro--aether .ci-card:hover { padding: 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.cv .cv-intro--aether .ci-card { gap: 8px; }
.cv .cv-intro--aether .ci-card .ci-card__text { margin-top: 2px; }
.cv .cv-intro--aether .ci-card .ci-action { margin-top: 10px; }
.cv .cv-intro--aether .ci-cards { gap: 36px; margin-top: 48px; }
/* …each with its icon on the left and the details beside it. */
.cv .cv-intro--aether .ci-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 22px; row-gap: 6px; align-items: start; justify-items: start; }
.cv .cv-intro--aether .ci-card .ci-icon { grid-row: 1 / span 3; grid-column: 1; }
.cv .cv-intro--aether .ci-card > :not(.ci-icon) { grid-column: 2; }
.cv .cv-intro--aether .ci-card .ci-card__text { margin-top: 0; }
.cv .cv-intro--aether .ci-card .ci-action { margin-top: 6px; }

/* "Before you arrive" on the page itself (no blue block), styled as the consult text was. */
.cv .cv-visit--line { margin-top: 120px; background: none; border-radius: 0; color: var(--cv-ink); }
.cv .cv-visit--line .cv-visit__eyebrow { color: rgba(13, 16, 32, 0.45); }
.cv .cv-visit--line .cv-visit__title { color: var(--cv-navy); }
.cv .cv-visit--line .cv-visit__lede { font-size: 17px; color: var(--cv-quiet); }
.cv .cv-visit--line .cv-steps::before { background: linear-gradient(180deg, rgba(30, 42, 90, 0.35), rgba(30, 42, 90, 0.1)); }
.cv .cv-visit--line .cv-step__node { border-color: var(--cv-navy); background: #fff; box-shadow: 0 0 0 6px rgba(30, 42, 90, 0.06); }
.cv .cv-visit--line .cv-step:first-child .cv-step__node { background: var(--cv-navy); box-shadow: 0 0 0 6px rgba(30, 42, 90, 0.08); }
.cv .cv-visit--line .cv-step__icon { color: var(--cv-navy); }
.cv .cv-visit--line .cv-step__num { color: rgba(13, 16, 32, 0.45); }
.cv .cv-visit--line .cv-step__title { color: var(--cv-ink); }
.cv .cv-visit--line .cv-step__text { color: var(--cv-quiet); }
/* No step numbers: the icon, dot and heading share one centre line, and the first heading
   starts level with the title. The filled dot is the step you've scrolled to (.is-current). */
.cv .cv-visit--line .cv-steps { margin-top: 58px; }
.cv .cv-visit--line .cv-step { --row: 24.64px; }
.cv .cv-visit--line .cv-step__icon { top: calc(var(--row) / 2 - 22px); }
.cv .cv-visit--line .cv-step__node { top: calc(var(--row) / 2 - 7.5px); transition: background-color 0.4s, box-shadow 0.4s; }
.cv .cv-visit--line .cv-steps::before { top: calc(var(--row) / 2); }
.cv .cv-visit--line .cv-step:first-child .cv-step__node { background: #fff; box-shadow: 0 0 0 6px rgba(30, 42, 90, 0.06); }
.cv .cv-visit--line .cv-step.is-current .cv-step__node { background: var(--cv-navy); box-shadow: 0 0 0 6px rgba(30, 42, 90, 0.1); }
/* The line runs dot to dot (first to last), and steps you haven't reached are faded back. */
.cv .cv-visit--line .cv-steps::before { content: none; }
.cv .cv-visit--line .cv-step:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: calc(var(--row) / 2); height: calc(100% + 64px); width: 1px; background: rgba(30, 42, 90, 0.28); }
.cv .cv-visit--line .cv-step__node { z-index: 1; }
.cv .cv-visit--line .cv-step__icon, .cv .cv-visit--line .cv-step__title, .cv .cv-visit--line .cv-step__text { opacity: 0.3; transition: opacity 0.5s ease; }
.cv .cv-visit--line .cv-step.is-current .cv-step__icon, .cv .cv-visit--line .cv-step.is-current .cv-step__title, .cv .cv-visit--line .cv-step.is-current .cv-step__text { opacity: 1; }
/* The hero fills the screen exactly; the dark globe section starts right under it. */
.cv .cv-intro--aether { box-sizing: border-box; height: 100svh; min-height: 720px; }
.cv .cv-intro--aether + .cv-globe { margin-top: 0; }

/* Conditions (src/condition-brain.js): the home gradient fixed behind the page, the title and the
   conditions as a list down the left, the brain held on screen on the right. Each condition
   is a plain row until hovered or lit on the brain, when its frosted card appears. The row in view (or hovered) lights
   the brain; it stays plain until the first row comes up. */
.conditions { overflow-x: clip; }
main.conditions { margin-top: 0 !important; } /* no block gap above, so the brain's frame starts at the top of the screen and never shifts as it pins */
.conditions::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 25%, #B9C9D9 100%); pointer-events: none; }
.conditions > .cb { position: relative; margin-top: 0; padding-bottom: 30svh; } /* room for the last rows to reach the middle */
.cb__stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cb__sticky { position: sticky; top: 0; height: 100svh; }
.cb__canvas { position: absolute; top: 14svh; right: 9%; display: block; width: 55%; height: 78svh; opacity: 0; transition: opacity 1s ease; } /* sized outright: a canvas stretched by left/right grows with its own pixel size */
.cb.is-ready .cb__canvas { opacity: 1; }
.cb__canvas { z-index: 1; } /* in front of the ring (its background is clear) */
.cb__canvas { pointer-events: auto; touch-action: pan-y; cursor: grab; } /* drag to turn (a vertical swipe still scrolls) */
.cb__canvas.is-dragging { cursor: grabbing; }
/* The annotation over the brain (condition-brain.js places it on the glowing spot): an orange dot,
   a fine line up from it, and a frosted label naming the place. They rise in one after another. */
.cb__tag { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; } /* its own layer, above the list and the readout card (under the site bar and menu) */
.cb__tag-dot { position: absolute; left: -13px; top: -13px; display: grid; place-items: center; box-sizing: border-box; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.35), 0 2px 10px rgba(30, 42, 90, 0.18); font-size: 10px; font-weight: 500; letter-spacing: 0.04em; color: var(--wp--preset--color--navy); scale: 0; transition: scale 0.35s var(--ease-out); } /* the condition's number, pinned to the spot (as Dentale's markers) */
.cb__tag-line { position: absolute; left: 0; top: -13px; width: var(--len, 72px); height: 1px; background: rgba(255, 255, 255, 0.55); transform-origin: 0 50%; transform: rotate(var(--ang, -90deg)) scaleX(0); transition: transform 0.35s var(--ease-out); } /* from the marker to the label's foot (condition-brain.js sets the angle) */
.cb__tag-label { position: absolute; left: var(--lx, 0px); bottom: 85px; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 13px; letter-spacing: 0.02em; line-height: 1.3; white-space: nowrap; color: var(--wp--preset--color--slate); opacity: 0; translate: -50% 4px; transition: opacity 0.25s ease, translate 0.25s ease; }
.cb__tag.is-on .cb__tag-dot { scale: 1; }
.cb__tag.is-on .cb__tag-line { transform: rotate(var(--ang, -90deg)) scaleX(1); transition-delay: 0.12s; }
.cb__tag.is-on .cb__tag-label { opacity: 1; translate: -50% -8px; transition: opacity 0.45s ease 0.3s, translate 0.55s var(--ease-out) 0.3s; }
/* The instrument round the brain (as the Dentale / Soma dials): a fine ticked ring that turns with the
   brain (condition-brain.js), with a tick every degree, and an inner hairline. Sits on the canvas's box. */
.cb__dial { position: absolute; z-index: 0; top: 14svh; right: 9%; width: 55%; height: 78svh; pointer-events: none; opacity: 0; transition: opacity 1.4s ease 0.8s; } /* behind the brain; fades in once the brain has (is-ready, condition-brain.js) */
.cb.is-ready .cb__dial { opacity: 1; }
.cb__dial svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cb__dial circle { fill: none; vector-effect: non-scaling-stroke; }
.cb__dial-ring { stroke: rgba(29, 62, 93, 0.14); stroke-width: 1; }
.cb__dial-inner { stroke: rgba(29, 62, 93, 0.08); stroke-width: 1; stroke-dasharray: 2 6; }
.cb__dial-ticks { transform-origin: 100px 100px; transition: transform 0.2s linear; }
.cb__dial-ticks line { stroke: rgba(29, 62, 93, 0.1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cb__dial-ticks line.is-mid { stroke: rgba(29, 62, 93, 0.12); }
.cb__dial-ticks line.is-major { stroke: rgba(29, 62, 93, 0.15); }
/* Readouts in a frosted glass card in the top right corner, where the ring curves away (as Soma's
   "Oxygenation 96%"): tiny label, light value. They come up with the first condition. */
.cb__hud { position: absolute; z-index: 2; right: 40px; top: 16svh; box-sizing: border-box; display: flex; flex-direction: column; gap: 28px; width: 248px; margin: 0; padding: 32px; border-radius: 23px; background: rgba(255, 255, 255, 0.3); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); opacity: 0; translate: 0 8px; transition: opacity 0.6s ease, translate 0.6s var(--ease-out); pointer-events: none; }
.cb.has-focus .cb__hud { opacity: 1; translate: 0 0; }
.cb__hud dl { display: flex; flex-direction: column; gap: 22px; margin: 0; }
.cb__hud dl > div { display: flex; flex-direction: column; gap: 4px; }
.cb__hud dt { font-size: 9px; font-weight: 400; line-height: 1.6; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(15, 16, 18, 0.45); }
.cb__hud dd { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.35; letter-spacing: -0.01em; color: var(--wp--preset--color--slate); font-variant-numeric: tabular-nums; } /* all one size; the service's name can run to two lines */
.cb__hud-link { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid rgba(29, 62, 93, 0.12); font-size: 13px; letter-spacing: 0.02em; color: var(--wp--preset--color--slate); text-decoration: none; pointer-events: auto; }
.cb__hud-link span { transition: translate 0.35s var(--ease-out); }
.cb__hud-link:hover span { translate: 4px 0; }
.cb:not(.has-focus) .cb__hud-link { pointer-events: none; } /* not clickable while the card is hidden */
.cb__hero { position: relative; z-index: 1; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 22px; max-width: 42%; min-height: 100svh; padding: 250px 0 0; pointer-events: none; }
.cb__hero > * { margin: 0; }
/* "See conditions": a frosted glass pill under the intro (the hero itself lets the pointer through to the brain). */
.cb__hero-cta { position: relative; display: inline-flex; align-items: center; gap: 12px; margin-top: 10px !important; padding: 14px 26px; border-radius: 999px; background: rgba(255, 255, 255, 0.35); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); font-size: 15px; letter-spacing: 0.01em; color: var(--wp--preset--color--slate); text-decoration: none; pointer-events: auto; transition: background-color 0.4s ease; }
.cb__hero-cta:hover, .cb__hero-cta:focus-visible { background: rgba(255, 255, 255, 0.6); }
.cb__hero-cta span { transition: translate 0.4s var(--ease-out); }
.cb__hero-cta:hover span { translate: 0 3px; }
/* The list, down the left beside the brain. */
.cb__cards { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; max-width: 54%; margin: 0 0 0 -24px; padding: 0; list-style: none; } /* rows' text lines up with the title */
.cb__item { position: relative; margin: 0; }
.cb__item + .cb__item::before { content: ""; position: absolute; top: -2px; left: 24px; right: 24px; height: 1px; background: rgba(29, 62, 93, 0.08); pointer-events: none; transition: opacity 0.4s ease; } /* hairline rules between rows */
/* No rules above or below a row while its card shows (hovered, or lit on the brain). */
.cb__item:is(.is-active, :has(.cb-card:hover, .cb-card:focus-visible))::before,
.cb__item:is(.is-active, :has(.cb-card:hover, .cb-card:focus-visible)) + .cb__item::before { opacity: 0; }
.cb-card {
	position: relative;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) 24px;
	column-gap: 8px;
	align-items: baseline;
	padding: 22px 24px;
	border-radius: 23px;
	background: rgba(255, 255, 255, 0);
	color: var(--wp--preset--color--slate);
	text-decoration: none;
	transform: var(--tilt, none);
	transition: background-color 0.4s ease;
}
.cb-card::before { opacity: 0; transition: opacity 0.4s ease; } /* the glass edge highlight, with the card */
.cb-card:hover, .cb-card:focus-visible, .cb__item.is-active .cb-card { background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); } /* hovered, or the one lit on the brain */
.cb-card:hover::before, .cb-card:focus-visible::before, .cb__item.is-active .cb-card::before { opacity: 1; }
.cb-card__num { grid-column: 1; grid-row: 1; font-size: 16px; font-weight: 300; line-height: 1.5; letter-spacing: 0.02em; opacity: 0.32; transition: color 0.4s ease, opacity 0.4s ease; }
.cb__item.is-active .cb-card__num { color: #FF6745; opacity: 1; } /* the brain's glow colour */
.cb-card__title { grid-column: 2; grid-row: 1; font-size: 22px; font-weight: 300; line-height: 29px; letter-spacing: -0.01em; color: #1D3E5D; }
.cb-card__text { grid-column: 2; grid-row: 2; max-width: 460px; margin-top: 8px; font-size: 14px; font-weight: 300; line-height: 1.45; letter-spacing: 0.02em; color: rgba(29, 62, 93, 0.8); }
.cb-card__arrow { grid-column: 3; grid-row: 1; justify-self: end; font-size: 18px; line-height: 1; opacity: 0; transition: opacity 0.4s ease, translate 0.4s var(--ease-out); }
.cb-card:hover .cb-card__arrow, .cb-card:focus-visible .cb-card__arrow { opacity: 1; translate: 4px 0; }
.cb__item.is-active .cb-card__arrow { opacity: 1; }

/* ==========================================================================
   Patient Resources (patterns/patient-resources.php), after augen.pro / meetcleo.com:
   a white page, flat rounded panels set 8px in from the screen edges, small numbered
   labels beside hairline-ruled content, thin type, outline pills.
   ========================================================================== */
.prx { --px-panel: #F0F2F5; --px-dark: var(--wp--preset--color--navy); --px-line: rgba(29, 62, 93, 0.12); --px-text: rgba(29, 62, 93, 0.78); }
.prx-side { margin: 0; font-family: var(--wp--preset--font-family--body); font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--px-text); }
.prx-side { display: flex; flex-direction: column; gap: 6px; }
.prx-body { margin: 0; max-width: 560px; font-family: var(--wp--preset--font-family--body); font-size: 17px; font-weight: 300; line-height: 1.65; color: var(--px-text); }

/* Hero: the title centred above four tall full-photo cards, one per section, each jumping to it. */
.pr > section.prx-hero { display: flex; flex-direction: column; justify-content: flex-end; gap: 56px; box-sizing: border-box; min-height: calc(100svh - 16px); max-width: none; margin: 8px; padding: 150px 0 0; }
.prx-hero__text { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.prx-hero__text > * { margin: 0; }
.prx-hero__intro { max-width: 420px; font-family: var(--wp--preset--font-family--body); font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--px-text); }
.prx-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.prx-card { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: 0; box-sizing: border-box; height: clamp(380px, 52svh, 540px); padding: 28px; border-radius: 20px; overflow: hidden; background: var(--px-panel); color: var(--wp--preset--color--slate); text-decoration: none; }
.prx-card__thumb { position: absolute; left: 28px; bottom: 132px; width: 44px; height: 44px; margin: 0; border-radius: 8px; object-fit: cover; transition: scale 0.6s var(--ease-out); }
.prx-card__title { font-family: var(--wp--preset--font-family--body); font-size: 22px; font-weight: 300; line-height: 1.2; letter-spacing: -0.01em; }
.prx-card__text { min-height: 3em; font-family: var(--wp--preset--font-family--body); font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--px-text); }
.prx-card:hover .prx-card__thumb { scale: 1.08; }
/* Full-photo cards: the picture fills the card, white title and line at the bottom left. */
.prx-card--photo { color: #fff; background: var(--wp--preset--color--navy); }
.prx-card__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; filter: brightness(0.82); transition: scale 1.2s var(--ease-out), filter 0.6s ease; }
.prx-card--photo .prx-card__text { color: rgba(255, 255, 255, 0.82); }
.prx-card--photo[href="#international"] .prx-card__bg { filter: brightness(0.62); } /* its pale mask sits under the text */
.prx-card--photo[href="#international"]:hover .prx-card__bg { filter: brightness(0.7); }
.prx-card__bg[data-parallax] { top: -8%; height: 116%; inset-inline: 0; } /* room for the photo to drift inside its card (motion.js) */
.prx-card--photo[href="#faq"] .prx-card__bg { transform: scaleX(-1); } /* mirrored, so the hand and X-ray sit away from the title */
.prx-card--photo:hover .prx-card__bg { scale: 1.05; filter: brightness(0.9); }

.prx-media { position: relative; margin: 0; border-radius: 20px; overflow: hidden; background: var(--px-panel); }
.prx-media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.prx-media img[data-parallax] { height: 116% !important; top: -8%; margin: 0; }

/* Section switcher: the top pill's style (glass, 48px, its divider and type), fixed at the bottom
   once past the hero; it turns white over dark sections as the top pill does (motion.js). The
   section you're in is at full strength, the rest sit back. */
.prx-tabs { position: fixed; left: 50%; bottom: clamp(16px, 2.2vw, 32px); z-index: 60; display: flex; align-items: stretch; height: 48px; border-radius: 76px; background: rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 4px 16px rgba(29, 62, 93, 0.05); font-family: var(--wp--preset--font-family--body); font-size: 13px; font-weight: 400; line-height: 1.7; letter-spacing: 0.03em; color: var(--wp--preset--color--slate); translate: -50% 24px; opacity: 0; pointer-events: none; transition: opacity 0.4s ease, translate 0.5s var(--ease-out), color 0.35s ease, background-color 0.35s ease; }
.pr > nav.prx-tabs { box-sizing: border-box; max-width: none; margin: 0; padding: 0; } /* not the page-width nav rule */
.prx-tabs.is-shown { translate: -50% 0; opacity: 1; pointer-events: auto; }
.prx-tabs a { position: relative; display: flex; align-items: center; padding: 0 18px; color: inherit; text-decoration: none; white-space: nowrap; opacity: 0.55; transition: opacity 0.35s ease; }
.prx-tabs a:first-child { padding-left: 22px; }
.prx-tabs a:last-child { padding-right: 22px; }
.prx-tabs a + a::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: linear-gradient(90deg, rgba(29, 62, 93, 0.12) 50%, rgba(255, 255, 255, 0.6) 50%); } /* the top pill's crease */
.prx-tabs a:hover, .prx-tabs a.is-current { opacity: 1; }
.prx-tabs.site-bar--dark { color: #fff; background-color: rgba(255, 255, 255, 0.08); box-shadow: none; }
.prx-tabs.site-bar--dark a + a::before { background: linear-gradient(90deg, rgba(0, 0, 0, 0.18) 50%, rgba(255, 255, 255, 0.16) 50%); }

/* Sections: a small label column, then the content. Panels are flat and rounded, 8px in. */
.pr > section.prx-sec { margin-top: 160px; }
.pr > section.prx-panel { box-sizing: border-box; max-width: none; margin: 160px 8px 0; padding: 120px max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter))); border-radius: 20px; background: var(--px-panel); }
.pr > section.prx-panel + section.prx-panel { margin-top: 8px; }
.prx-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: 48px; }
.prx-main { display: flex; flex-direction: column; gap: 48px; min-width: 0; }
.prx-main--row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; }

/* Accordions, finer. */
.prx .acc { border-top-color: var(--px-line); }
.prx .acc:last-child { border-bottom-color: var(--px-line); }
.prx .acc__q { padding: 22px 0; font-weight: 300; letter-spacing: -0.01em; }
.prx .acc__icon { width: 32px; height: 32px; border: 1px solid var(--px-line); background: transparent; }
.prx .acc__icon::before, .prx .acc__icon::after { width: 10px; height: 1px; margin: -0.5px 0 0 -5px; }
.prx .acc[open] .acc__icon { border-color: var(--wp--preset--color--slate); }
.prx .acc__a p { font-weight: 300; color: var(--px-text); }
.prx-group { margin: 0 0 8px; font-family: var(--wp--preset--font-family--body); font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--px-text); }
.prx-side-col { display: flex; flex-direction: column; gap: 32px; }
.prx-aside { margin: 0; max-width: 220px; font-family: var(--wp--preset--font-family--body); font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--px-text); } /* in the label column, so it stays put as the answers open */
.prx-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }

/* Forms: hairline rows with an outline tag. */
.prx-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--px-line); }
.prx-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 120px 24px; align-items: center; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--px-line); font-family: var(--wp--preset--font-family--body); color: var(--wp--preset--color--slate); }
.prx-row__title { font-size: 22px; font-weight: 300; letter-spacing: -0.01em; }
.prx-row__status { font-size: 14px; font-weight: 300; color: var(--px-text); }
.prx-row__go { justify-self: end; font-size: 14px; opacity: 0.4; }
.prx-tag, .prx-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--px-line); border-radius: 100px; font-family: var(--wp--preset--font-family--body); color: var(--wp--preset--color--slate); }
.prx-tag { padding: 4px 10px; font-size: 11px; letter-spacing: 0.14em; }
.prx-pill { flex: none; padding: 12px 20px; font-size: 14px; text-decoration: none; transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease; }
.prx-pill:hover { background: var(--wp--preset--color--slate); border-color: var(--wp--preset--color--slate); color: #fff; }

/* International: the dark panel, photo beside the text. */
.prx-panel--dark { background: var(--px-dark) !important; --px-text: rgba(255, 255, 255, 0.62); --px-line: rgba(255, 255, 255, 0.14); }
.prx-panel--dark .h-display, .prx-panel--dark .prx-note__title { color: #fff; }
.prx-grid--media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 80px; align-items: stretch; }
.prx-media--tall { min-height: 640px; }
.prx-grid--media .prx-main { justify-content: center; gap: 32px; }
.prx-panel--dark .lang-list li { border-color: var(--px-line); color: #fff; }
.prx-panel--dark .lang-list li::after { color: var(--px-dark); }
.prx-panel--dark .lang-list li:hover { background: #fff; border-color: #fff; color: transparent; }
.prx-note { padding-top: 24px; border-top: 1px solid var(--px-line); }
.prx-note__title { margin: 0 0 8px; font-family: var(--wp--preset--font-family--body); font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--slate); }
.prx-note p { margin: 0; max-width: 560px; font-family: var(--wp--preset--font-family--body); font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--px-text); }

.prx-panel--dark .prx-pill { border-color: var(--px-line); color: #fff; }
/* Conditions we treat (src/motion.js): pinned while the condition cards surf past on a 3D track
   (after componentry.dev's Collection Surfer), with the heading and a link to /conditions/ top left. */
.pr > section.prx-surf { position: relative; box-sizing: border-box; height: calc(100svh + (var(--n) - 1) * 360px); max-width: none; margin-top: 8px; padding: 0; } /* 8px of white under the grey panel above (as its sides); pins as soon as that has gone, releases into the footer after the last card */
.prx-surf__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #2E4C7C; } /* deep blue under the moving gradient (motion.js) */
.prx-surf__bg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease; } /* the moving gradient (motion.js), over the still photo */
.prx-surf__bg.is-ready { opacity: 1; }
.prx-surf__head { position: absolute; z-index: 2; top: 50%; translate: 0 -50%; left: max(64px, calc((100vw - 1312px) / 2)); display: flex; flex-direction: column; align-items: flex-start; gap: 28px; max-width: 520px; }
.prx-surf__head > * { margin: 0; }
.prx-surf__head, .prx-surf__head .prx-side, .prx-surf__head .prx-side span, .prx-surf__head .h-display { color: #fff; } /* white over the blue */
.prx-surf__head .cb__hero-cta { background: rgba(255, 255, 255, 0.82); color: var(--wp--preset--color--navy); } /* a light glass pill with dark blue text */
.prx-surf__head .cb__hero-cta:hover, .prx-surf__head .cb__hero-cta:focus-visible { background: rgba(255, 255, 255, 0.95); }
.prx-surf__head .cb__hero-cta { margin-top: 0 !important; } /* the Conditions hero's glass pill, here pointing across */
.prx-surf__head .cb__hero-cta:hover span { translate: 4px 0; }
.prx-surf__scene { position: absolute; inset: 0 0 0 50%; display: flex; align-items: center; justify-content: center; perspective: 2000px; perspective-origin: 50% 50%; } /* the right half: the card in focus sits in its middle */
.prx-surf__track { position: relative; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
/* Frosted glass cards (no photos): the condition's number and area, title, summary and an arrow. */
.prx-surf__card { position: absolute; left: -160px; top: -200px; box-sizing: border-box; display: flex; flex-direction: column; width: 320px; height: 400px; padding: 32px; border-radius: 23px; background: rgba(255, 255, 255, calc(0.5 + 0.42 * var(--focus, 0))); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); color: var(--wp--preset--color--slate); text-decoration: none; will-change: transform, opacity; } /* frosted glass, going almost white as it comes into focus (--focus, motion.js) */
.prx-surf__card > * { filter: blur(calc(var(--soft, 1) * 2.5px)); } /* out-of-focus cards' contents soft-focus; the blur sits on the contents so the card keeps its frosted glass */
.prx-surf__card:hover, .prx-surf__card:focus-visible { background: rgba(255, 255, 255, calc(0.62 + 0.3 * var(--focus, 0))); }
.prx-surf__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(15, 16, 18, 0.45); }
.prx-surf__num { font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.prx-surf__title { margin-top: auto; font-size: 24px; font-weight: 300; line-height: 1.2; letter-spacing: -0.01em; }
.prx-surf__text { margin-top: 12px; padding-right: 28px; font-size: 14px; font-weight: 300; line-height: 1.5; color: rgba(29, 62, 93, 0.78); }
.prx-surf__arrow { position: absolute; right: 30px; bottom: 30px; font-size: 18px; line-height: 1; opacity: 0.5; transition: opacity 0.4s ease, translate 0.4s var(--ease-out); }
.prx-surf__card:hover .prx-surf__arrow { opacity: 1; translate: 4px 0; }
.prx { padding-bottom: 0; } /* the Conditions section runs straight into the footer (no white strip) */

main.prx { margin-top: 0 !important; } /* so the hero panel sits 8px from the top as well as the sides and bottom */

/* Page transition (cross-document view transitions): the old page fades out, the new one
   fades up into place; the site bar pill holds still across the change. Browsers without
   support just load the page as normal. */
@view-transition { navigation: auto; }
.site-bar { view-transition-name: site-bar; }
::view-transition-old(root) { animation: pt-out 0.3s ease-in both; }
::view-transition-new(root) { animation: pt-in 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) 0.15s both; }
@keyframes pt-out { to { opacity: 0; translate: 0 -16px; } }
@keyframes pt-in { from { opacity: 0; translate: 0 24px; } }
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Hero titles: one style on every page (home, about, services, insights, articles, conditions,
   patient resources, contact, condition and service pages). */
:root :is(.home-hero__title, .pv-hero__title, .services__title, .svc-detail__title, .insights__title, .insight__title, .page-hero__title, .cv-intro .cv-heading) {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(2.5rem, 4.6vw + 0.5rem, 4rem);
	line-height: 0.95;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--serif-ink);
}

/* Hero eyebrows (the small line above each hero title): one style everywhere, the About page's
   "The practice" label (.pv-label--dark): tiny, spaced, uppercase, soft grey. Home, About, the
   service and condition pages, and articles. */
:root:root:root :is(.home-hero__eyebrow, .pv-hero__label, .svc-detail__eyebrow, .page-hero--condition .insight-card__meta, .insight__head .insight-card__meta) {
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(15, 16, 18, 0.45);
}

/* Hero titles all start at the same height: 24% of the screen down (216px on a 900px-tall screen),
   where the About hero's sits. Each hero places its title its own way, so each is set here. */
@media (min-width: 1024px) {
	.home-hero__copy { --copy-y: calc(40px - 26vh); } /* the copy is centred; this lifts the title (under the eyebrow) to 24vh */
}
.services__head { padding-top: 24vh; }
.svc-detail__body { padding-top: max(0px, calc(10.67vh - 70px)); } /* under the panel's top bar (which itself grows with the screen) and the eyebrow */
.cb__hero { justify-content: center; padding-top: 0; } /* Conditions: the title block in the middle of the screen's height (not 24vh like the rest) */
.page-hero--condition .page-hero__text { justify-content: center; padding-top: 120px; padding-bottom: 0; } /* centred against the image beside it (same top margin, same bottom) */
.pr > section.prx-hero { justify-content: flex-start; gap: 32px; padding-top: calc(24vh - 8px); }
.prx-hero .prx-cards { margin-top: auto; } /* the cards stay at the foot of the screen */
.pr > section.prx-hero { min-height: calc(100svh + 116px); } /* the cards sit lower, running past the bottom of the screen… */
.prx-hero .prx-card { justify-content: flex-start; } /* …with their titles at the top, so they still show above the fold */
.prx-hero .prx-card__text { opacity: 0; translate: 0 -4px; transition: opacity 0.4s ease, translate 0.4s var(--ease-out); } /* the subtitle only on hover */
.prx-hero .prx-card:is(:hover, :focus-visible) .prx-card__text { opacity: 1; translate: 0 0; }
.insights__head { padding-top: 24vh; }
.insight__head { padding-top: 24vh; }
.insight__head:has(> .insight-card__meta) { padding-top: calc(24vh - 42px); } /* articles: the eyebrow sits above */
.cv .cv-intro--aether .cv-intro__main { align-self: center; top: calc(max(120px, 29svh - 15px) / -2); } /* Contact: the title block in the middle of the screen's height (centred in the grid below the intro's top padding, then lifted by half that padding); the lanyard stays put */

/* =========================================================================
   Mobile (phones, under 768px). Everything for small screens lives here, so the
   desktop layout above is untouched. Built page by page; home first.
   ========================================================================= */
@media (max-width: 767px) {
	:root { --gutter: 20px; }

	/* Menu panel: solid white, edge to edge (it still grows out of the pill). */
	.site-menu-backdrop { padding: 0; }
	.site-menu { border-radius: 0; background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
	/* The clip's corners stay the pill's (22px) the whole way, so the panel shrinks into the pill's
	   exact shape instead of ballooning through a bigger rounded box. */
	.site-menu { clip-path: inset(var(--clip-t, 0) var(--clip-r, 0) var(--clip-b, 0) var(--clip-l, 0) round 22px); }
	.menu-open .site-menu { clip-path: inset(0 0 0 0 round 22px); }

	/* Menu: the page list on its own (no photo preview), labels allowed to wrap
	   ("Patient / resources"); contact details and the consultation button stacked below. */
	.site-menu[data-view="menu"] .mm { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 28px; padding: 96px 24px 24px; }
	.mm__preview { display: none; }
	.mm__link { --mm-size: clamp(1.9rem, 9vw, 2.4rem); grid-template-columns: 32px auto 1fr; padding: 5px 0; }
	.mm__label-inner { white-space: normal; }
	.mm__link:hover .mm__label, .mm__link:focus-visible .mm__label { translate: none; }
	.mm__foot { flex-direction: column; align-items: stretch; gap: 20px; }
	.mm__mark { display: none; }
	.mm__contact { flex-direction: column; gap: 6px; }
	.mm__cta { box-sizing: border-box; justify-content: center; width: 100%; }

	/* Home hero: "Precision" on its own line; the title in the top half of the screen and the
	   brain in the bottom half (--bv-offset is read by brain-viewer.js). */
	.home-hero__copy { --copy-y: -22svh; }
	.brain-viewer { --bv-fill: 0.95; --bv-offset: 20%; }

	/* Services — the gallery: one column of equal cards, centred, shorter so a couple show at once. */
	.svc-gallery { gap: 20px; padding: 24px 0 96px; }
	.svc-slide { translate: none; }
	.svc-slide__img-wrapper { width: calc(100vw - var(--gutter) * 2); aspect-ratio: 3 / 2; }
	.svc-card { padding: 28px; }
	.svc-card .svc-slide__num { font-size: 56px; }
	.svc-card .svc-slide__name { font-size: clamp(22px, 8cqw, 28px); }

	/* Back button (service and condition pages): a round frosted button with just a back chevron,
	   on the left, level with the menu pill (which stays centred). The label stays for screen readers. */
	.back-pill { top: 16px; left: var(--gutter); justify-content: center; width: 44px; height: 44px; padding: 0; font-size: 0; }
	.back-pill > * { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* the services one is wrapped in a line by the text animation */
	.back-pill::after { content: ""; width: 7px; height: 7px; margin-left: 3px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; transition: translate 0.35s var(--ease-out); }
	.back-pill:hover::after { translate: -2px 0; }
	.back-pill--phone { display: inline-flex; }
	/* Services — a service open: one scrolling column. The pager sits level with the back pill;
	   the title, copy and button, then the related conditions; no strip of all six at the foot. */
	.svc-detail__panel { display: block; padding: 56px var(--gutter) 64px; overflow-y: auto; }
	.svc-detail__pager { display: none; } /* no ‹ 01 / 06 › on phones (the back button in the same row is fixed, so it stays) */
	.svc-detail__body { display: block; padding-top: 40px; overflow: visible; }
	.svc-detail__group.active { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	:root:root:root .svc-detail__title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
	.svc-detail__main .svc-detail__title { margin: 14px 0 24px; }
	.svc-detail__main .svc-detail__text { font-size: 15px; }
	.svc-detail__actions .btn { width: 100%; box-sizing: border-box; justify-content: center; }
	.svc-detail__nav { display: none; }

	/* Conditions — hero: title, intro and button at the top, the brain in the lower half of the
	   first screen (not held on screen behind the list); then the list, full width. No readout card. */
	.cb__stage { bottom: auto; height: 100svh; }
	.cb__sticky { position: relative; }
	.cb__canvas, .cb__dial { top: auto; bottom: 4svh; left: var(--gutter); right: auto; width: calc(100% - var(--gutter) * 2); height: 50svh; }
	.cb__hud { display: none; }
	.cb__hero.cb__hero { max-width: none; justify-content: flex-start; align-items: center; padding-top: 120px; gap: 18px; text-align: center; }
	.cb__tag-label, .cb__tag-line { display: none; } /* its label is placed for the desktop layout; the marker alone */
	.conditions > .cb { padding-bottom: 96px; }
	.cb__cards { max-width: none; margin: 0 calc(var(--gutter) * -0.5); }
	.cb-card { grid-template-columns: 30px minmax(0, 1fr) 18px; padding: 18px 12px; }
	.cb-card__title { font-size: 20px; line-height: 26px; }
	.cb-card__arrow { opacity: 0.45; }

	/* Page heroes with an image (a condition, and others built on .page-hero): text first, then the
	   image full width under it. */
	.page-hero { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; max-height: none; margin: 0 !important; border-radius: 0; }
	.page-hero__text,
	.page-hero--condition .page-hero__text { justify-content: flex-start; padding: 132px var(--gutter) 28px; gap: 16px; }
	.page-hero__media,
	.page-hero--condition .page-hero__media { aspect-ratio: 4 / 3; margin: 0 var(--gutter); }
	.page-hero__intro { font-size: 16px; }
	.page-hero--condition { height: auto; min-height: 0; max-height: none; }
	.page-hero--condition .page-hero__title { font-size: clamp(2.3rem, 10.5vw, 3rem); }
	/* A condition's content: one column, no contents list beside it. */
	.condition-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.page-hero--condition + .condition-body { margin-top: 56px; }
	.condition-toc { display: none; }
	.condition-content { gap: 64px; }
	.condition-lede { font-size: 1.3rem; }
	.symptom-list { gap: 10px; }
	.symptom-list li { gap: 14px; padding: 18px; border-radius: 18px; font-size: 16px; }
	main.condition { padding-bottom: 96px; }

	/* Patient Resources — hero: the four section cards as a 2 × 2 grid under the title. */
	.pr > section.prx-hero { min-height: 0; gap: 40px; padding-top: 128px; }
	.prx-hero__text { padding-inline: var(--gutter); }
	.prx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.prx-card { height: 44vw; min-height: 150px; padding: 18px; border-radius: 16px; }
	.prx-hero .prx-card { justify-content: flex-end; } /* the label at the foot of each card */
	.prx-hero .prx-card__title { font-size: 18px; }
	.prx-hero .prx-card__text { display: none; }
	/* Section switcher at the foot of the screen: snug enough for a phone. */
	.prx-tabs { max-width: calc(100vw - var(--gutter) * 2); font-size: 12px; letter-spacing: 0.01em; }
	.prx-tabs a { padding: 0 12px; }
	.prx-tabs a:first-child { padding-left: 16px; }
	.prx-tabs a:last-child { padding-right: 16px; }
	/* Sections: the label above the content instead of in a column beside it. */
	.pr > section.prx-sec { margin-top: 96px; }
	.pr > section.prx-panel { margin: 96px 8px 0; padding: 64px calc(var(--gutter) - 8px); border-radius: 16px; }
	.prx-grid, .prx-grid--media { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
	.prx-main { gap: 32px; }
	.prx-main--row { flex-direction: column; align-items: flex-start; }
	.prx-aside { max-width: none; }
	.prx-side-col { gap: 12px; }
	/* Forms: the name on one line, PDF tag and status under it, the arrow on the right. */
	.prx-row { grid-template-columns: auto auto minmax(0, 1fr) 20px; row-gap: 10px; column-gap: 12px; padding: 18px 0; }
	.prx-row__title { grid-column: 1 / -1; font-size: 19px; }
	.prx-row__go { grid-column: 4; }
	/* FAQ: the two groups one after the other. */
	.prx-faq { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	/* International: the photo above the text. */
	.prx-media--tall { min-height: 0; aspect-ratio: 4 / 3; }
	/* Conditions: not pinned; the heading, then the cards as a row you can swipe sideways (or just
	   scroll on past), over the moving blue. */
	.pr > section.prx-surf { height: auto; }
	.prx-surf__pin { position: relative; height: auto; padding: 96px 0 120px; }
	.prx-surf__head { position: relative; top: auto; left: auto; translate: none; max-width: none; padding-inline: var(--gutter); gap: 18px; }
	.prx-surf__scene { position: relative; inset: auto; display: block; margin-top: 40px; perspective: none; }
	.prx-surf__track { display: flex; gap: 12px; width: auto; height: auto; padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; transform: none !important; transform-style: flat; }
	.prx-surf__track::-webkit-scrollbar { display: none; }
	.prx-surf__card { position: relative; left: auto; top: auto; flex: 0 0 78vw; width: auto; height: 220px; padding: 22px; scroll-snap-align: start; --focus: 1; }
	.prx-surf__card > * { filter: none; }
	/* Mouse drag on the sideways rows (motion.js): a grab cursor, and no snapping mid-drag. */
	:is(.mdt-grid, .team__grid, .prx-surf__track) { cursor: grab; user-select: none; -webkit-user-select: none; }
	:is(.mdt-grid, .team__grid, .prx-surf__track).is-dragging { cursor: grabbing; scroll-snap-type: none; }
	.prx-surf__title { font-size: 21px; }

	/* One corner radius on phones: 10px, as the Insights article images, for every card, image and
	   panel (pill buttons stay round). */
	:is(.ab-card, .ab-card__media, .ab-panel__frame, .ab-plan__card, .ab-plan__media, .ap-photo__frame,
		.brain-alert, .brain-stat, .brain-topic, .cb-card, .ci-card, .condition-card a, .consult-band, .consult__drop,
		.contact-card, .cv-card, .cv-consult__card, .cv-globe, .cv-hero, .cv-vcard, .cv-visit, .cv-write, .cv-form,
		.cx-banner, .cx-banner__card, .cx-banner__media, .cx-card, .cx-form.consult, .enquiry-form.consult,
		.featured-card__media, .hs-cta__media, .hs-intl__media, .hs-split__media, .info-card, .is-style-card,
		.legal-draft, .mdt-grid__item, .page-hero__media, .prx-card, .prx-media, .prx-surf__card,
		.pv-aspects__panel, .pv-member, .pv-member__info, .pv-plan__card, .pv-plan__media, .quick-link,
		.rounded-media img, .services-cta, .split-section__media, .svc-card, .symptom-list li, .team__photo,
		.tl-mark__more, .doc-row::before) { border-radius: 10px !important; }
	.pr > section.prx-panel { border-radius: 10px; }
	.has-motion .reveal-img { clip-path: inset(100% 0 0 0 round 10px); }
	.has-motion .reveal-img.is-in { clip-path: inset(0 0 0 0 round 10px); }

	/* Contact — the hero: the ID badge hanging in the top half of the screen, then the title and the
	   phone and email under it (the badge's height in lanyard.js). */
	.cv .cv-intro--aether { display: flex; flex-direction: column; height: auto; min-height: 0; padding: 0 var(--gutter) 64px; }
	.cv-intro__badge { order: -1; align-self: stretch; height: 52svh; margin-inline: calc(var(--gutter) * -1); }
	.lyd { --lyd-cw: 190px; }
	.cv .cv-intro--aether .cv-intro__main { top: auto; align-self: stretch; }
	.cv .cv-intro--aether .ci-cards { margin-top: 36px; gap: 28px; }
	.cv .cv-intro--aether .cv-heading { text-align: center; } /* "Connect / with Dr. Hina" */
	/* Phone and email centred under it: icon on top, then label, details and the copy button. */
	.cv .cv-intro--aether .ci-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
	.cv .cv-intro--aether .ci-card .ci-icon { margin-bottom: 6px; }

	/* Contact — Find us: the globe, then "Cape Town" and the address under it (not beside it). */
	.cv-globe { height: auto; min-height: 0; padding: 0 var(--gutter) 72px; }
	.cv-globe__canvas { position: relative; height: 380px; margin-inline: calc(var(--gutter) * -1); width: calc(100% + var(--gutter) * 2); }
	.cv-globe__info,
	.cv-globe__info--l,
	.cv-globe__info--r { position: relative; inset: auto; translate: none; max-width: none; }
	.cv .cv-globe__info--l { gap: 14px; }
	.cv .cv-globe__info--r { gap: 24px; margin-top: 28px; }
	.cv-globe__info--l .cv-globe__title { font-size: clamp(2.5rem, 12vw, 3.2rem); }
	.cv-globe__info[data-speed], .cv-write__head[data-speed] { transform: none !important; } /* no parallax drift: stacked, it pushed them into each other */
	/* Contact — Before you arrive: the heading, then the four steps, each icon above its text. */
	.cv-visit__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; padding: 96px var(--gutter); }
	.cv-visit__head { position: static; }
	.cv .cv-visit__title { font-size: clamp(2.5rem, 11vw, 3.2rem); }
	.cv .cv-steps { gap: 48px; }
	.cv-step { padding-left: 40px; }
	.cv-step__icon { position: static; width: 36px; height: 36px; margin-bottom: 6px; }
	.cv-step__icon svg { width: 36px; height: 36px; }
	.cv-step__node { top: 10px; }
	/* Contact — enquiry form: smaller heading, a slimmer card. */
	.cv-write { padding: 96px var(--gutter); }
	.cv .cv-write .cv-heading { font-size: clamp(2.5rem, 11vw, 3.2rem); }
	.cv-write__head { margin-bottom: 36px; }
	.cv-write__lede { font-size: 15px; }
	.cv .cv-write .cv-form.enquiry-form.consult { gap: 24px; padding: 32px 20px 28px; }

	/* Insights — the listing: one column; the featured article's image above its text; filter
	   chips wrap. */
	.insights, .insight { padding: 0 var(--gutter) 80px; }
	.insights__head { padding: 128px 0 24px; text-align: center; } /* centred, like the other phone heroes */
	.insights__intro { margin-inline: auto; }
	.insights__head .filter-chips { justify-content: center; }
	.insights__head .insight-card__meta { justify-content: center; }
	.insights__intro { font-size: 15px; letter-spacing: 0.01em; }
	.insights-featured { margin-top: 40px; }
	.featured-card { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.featured-card__media { border-radius: 20px; }
	.insights .featured-card__title.wp-block-post-title { font-size: clamp(1.8rem, 8vw, 2.2rem); }
	.featured-card__excerpt p { font-size: 16px; }
	.insights .insights__section-title.wp-block-heading { margin-top: 96px; font-size: 2.2rem; }
	.insights__grid.wp-block-post-template { grid-template-columns: minmax(0, 1fr); gap: 56px; }
	.insight-card__meta { flex-wrap: wrap; }
	.insight-card__meta > * { white-space: normal; }
	/* An article: smaller title and headings, the text at a phone reading size. */
	.insight__head { padding: 128px 0 32px; }
	.insight .insight__title.wp-block-post-title { font-size: clamp(2.2rem, 10vw, 2.8rem); }
	.insight__content { padding: 56px 0 32px; font-size: 17px; }
	.insight__content > * + * { margin-top: 40px; }
	.insight__content h2 { font-size: 28px; }
	.insight__content h3 { font-size: 22px; }
	.insight__content .wp-block-pullquote { padding: 40px 0; font-size: 26px; } /* the quote and its credit together */

	/* About — timeline: one milestone per screen (spacing in timeline.js); details card fits. */
	.tl-mark__info { width: min(300px, calc(100vw - 48px)); }
	.tl-mark__more { width: min(300px, calc(100vw - 48px)); }
	/* About — the statement: smaller so it reads as a paragraph, not a wall of capitals. */
	.pv.pv.pv .ab-fill { padding: 120px var(--gutter) 140px; }
	.pv.pv.pv .ab-fill__text { font-size: clamp(1.7rem, 7.6vw, 2.1rem); line-height: 1.05; }
	/* About — MDT: not pinned or animated; the heading and copy, then the six photos in a grid. */
	.has-motion .mdt { height: auto; }
	.mdt__wrapper,
	.has-motion .mdt__wrapper { position: relative; height: auto; padding: 120px var(--gutter); translate: none !important; }
	.mdt__content { height: auto; gap: 24px; padding: 0 0 48px; }
	.pv.pv.pv .mdt__heading { font-size: clamp(2.5rem, 11vw, 3.2rem); }
	.pv.pv.pv .mdt__title { opacity: 1 !important; translate: none !important; }
	.mdt__gallery { position: relative; top: auto; left: auto; width: 100%; translate: none; }
	/* The six photos as a row you swipe sideways: one whole card and about a third of the next. */
	.mdt-grid { display: flex; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
	.mdt-grid::-webkit-scrollbar { display: none; }
	.mdt-grid > .mdt-grid__item { flex: 0 0 70vw; aspect-ratio: 4 / 5; scroll-snap-align: start; }
	.mdt-grid__item,
	.mdt-grid__item:nth-child(n),
	.mdt-grid__item:nth-child(n + 4),
	.mdt-grid__item:nth-child(3n + 1),
	.mdt-grid__item:nth-child(3n) { align-items: flex-end; justify-content: center; padding: 0 8px 14px; transform: none !important; }
	.mdt-grid__item--photo::after,
	.mdt-grid__item:nth-child(n).mdt-grid__item--photo::after { background: linear-gradient(0deg, rgba(13, 16, 32, 0.6), rgba(13, 16, 32, 0.05) 60%); }
	.pv.pv.pv .mdt-grid__tag .pv-label { position: relative; z-index: 1; white-space: normal; text-align: center; }
	.mdt-grid__tag--phone { display: block; }
	/* About — our team. */
	.pv.pv.pv .team { padding: 120px var(--gutter) 140px; }
	.team__head { margin-bottom: 56px; }
	.pv.pv.pv .team__heading { font-size: clamp(2.5rem, 11vw, 3.2rem); }
	/* Swiped sideways like the MDT photos: one whole person and about a third of the next. */
	.team__grid { display: flex; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
	.team__grid::-webkit-scrollbar { display: none; }
	.team__grid > .team__member { flex: 0 0 70vw; scroll-snap-align: start; }
	.team__photo { margin-bottom: 16px; }

	/* Home — brain chapters 1 and 2: the title at the top, the brain in the middle, the lead line and the
	   four small tiles along the bottom; no stat / chart cards. */
	.brain-chapter:is(.chapter-1, .chapter-2) .brain-title.wp-block-heading { top: 96px; left: var(--gutter); right: var(--gutter); translate: none; font-size: clamp(2.4rem, 11vw, 3rem); text-align: center; }
	.brain-chapter:is(.chapter-1, .chapter-2) .brain-topics { top: auto; bottom: 28px; left: var(--gutter); right: var(--gutter); grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.brain-chapter:is(.chapter-1, .chapter-2) .brain-topics__lead { margin: 0 0 12px; text-align: center; }
	.brain-chapter:is(.chapter-1, .chapter-2) .brain-stat { display: none; }

	/* Home — brain story. "The surgeon you choose matters" fits the width. */
	.brain-chapter.chapter-3 .brain-title.wp-block-heading { font-size: clamp(2.4rem, 11vw, 3rem); padding-inline: var(--gutter); } /* same size as the chapter titles above */
	/* Dr. Hina's card: phone-shaped before it grows to fill the screen. */
	.dr-scene { --cw: 64vw; --ch: 58vh; }
	/* Dr. Hina slide: bio at the top, the four figures as a 2 × 2 grid along the bottom over a
	   dark fade, Dr. Hina between them. */
	.dr-intro { top: 84px; translate: none; }
	.dr-intro .dr-intro__title.wp-block-heading { font-size: clamp(1.9rem, 8.6vw, 2.4rem); }
	.dr-intro .dr-intro__text { font-size: 13px; line-height: 1.5; }
	.dr-intro .dr-intro__link { margin-top: 16px; }
	/* Larger while he's on the card (his head near its top), easing back to fit under the bio as the
	   card grows to fill the screen (--gw, 0 → 1, from .dr-scene). */
	.dr-portrait { right: auto; left: 50%; width: calc(min(360px, 82vw) + (1 - var(--gw)) * 46vw); translate: -50% 0; }
	.dr-stats { top: auto; bottom: 0; left: 0; right: 0; width: auto; translate: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; padding: 64px var(--gutter) 20px; }
	/* The dark fade behind the figures comes in with them (the slide isn't moved off screen before it plays). */
	.dr-stats::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(9, 11, 22, 0.94) 0%, rgba(9, 11, 22, 0.85) 60%, transparent 100%); opacity: 0; transition: opacity 0.5s ease; }
	.chapter-4.is-played .dr-stats::before { opacity: 1; transition: opacity 0.9s ease 0.2s; }
	.dr-stats li { padding: 12px 0; gap: 4px; }
	.dr-stats li:nth-last-child(2) { border-bottom: 1px solid rgba(242, 242, 244, 0.14); }
	.dr-stats__num { font-size: 1.9rem; }
	.dr-stats__label { font-size: 12px; }

	/* Home — sections: tighter vertical rhythm, one column. */
	.home-story > section { margin-top: 96px; }
	.home-story > section:first-of-type { padding-top: 96px; }
	.home-story { padding-bottom: 96px; }

	/* Patient care philosophy: the quote a touch smaller; the three aspects stack as full-width cards. */
	.hs-quote__quote p { font-size: clamp(1.6rem, 7vw, 2rem); }
	.pv-aspects.hs-aspects { flex-direction: column; width: 100%; height: auto; gap: 12px; margin-top: 48px; }
	.pv-aspects.hs-aspects .pv-aspects__panel { flex: none; height: 52vw; }
	.pv-aspects.hs-aspects .pv-aspects__panel img { width: 100%; }

	/* Services: heading, image, then the list, one under the other. */
	.split-section { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.split-section__head { position: static; }
	.hs-svc .acc__q { gap: 16px; font-size: 19px; padding-block: 16px; }
	.hs-svc .acc__q:hover { padding-left: 0; }

	/* Collaboration: not pinned or animated — the photo behind, the heading, paragraph and the six
	   specialists listed under it. */
	.hs-room { height: auto; view-timeline: none; }
	.hs-room__pin { position: relative; height: auto; }
	.hs-room__media, .hs-room__img, .hs-room__list li, .hs-room__meter span { animation: none !important; }
	.hs-room__media { filter: brightness(0.6); }
	.hs-room__img:not([style*="--i:0"]) { display: none; }
	.hs-room__panel { position: relative; inset: auto; width: auto; padding: 96px var(--gutter); }
	.hs-room__title { font-size: clamp(2.5rem, 11vw, 3.2rem); }
	.hs-room__text { margin-top: 14px; }
	.hs-room__list { margin-top: 32px; }
	.hs-room__list li { opacity: 1; translate: none; padding: 12px 0; }
	.hs-room__list li:last-child { border-bottom: 1px solid rgba(242, 242, 244, 0.1); }
	.hs-room__stage, .hs-room__meter { display: none; }

	/* International patients: image above the text. */
	.hs-intl { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.hs-intl__media { aspect-ratio: 4 / 3; border-radius: 24px; }

	/* Get in touch: the photo fills the card behind the text; the gradient runs bottom-up. */
	.hs-cta { min-height: 0; }
	.hs-cta__media { border-radius: 24px; }
	.hs-cta__media::after { background: linear-gradient(0deg, rgba(15, 42, 68, 0.92) 0%, rgba(15, 42, 68, 0.6) 60%, rgba(15, 42, 68, 0.25) 100%); }
	.hs-cta__text { max-width: none; padding: 48px 28px; }
	.hs-cta__text > p:not(.eyebrow) { font-size: 16px; }

	/* Footer: an ordinary block at the end of the page — not the sticky, clipped reveal from desktop,
	   which is taller than a phone screen and so couldn't be scrolled through properly. */
	.site-footer,
	body:has(.svc-bg) .site-footer,
	body:has(.cx) .site-footer,
	body:has(.pv) .site-footer { position: relative; clip-path: none !important; }
	.site-footer-mark::after { display: none; }
	/* One column, the wordmark and bottom line stacked. */
	.site-footer__inner { height: auto; min-height: 0; max-height: none; padding-inline: var(--gutter); padding-top: 72px; translate: none; opacity: 1; }
	.site-footer__top { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.site-footer__lead,
	.site-footer__col:nth-of-type(1),
	.site-footer__col:nth-of-type(2) { grid-column: 1; }
	.site-footer__col { padding-top: 0; }
	.site-footer__statement { font-size: clamp(2.2rem, 10vw, 2.8rem); margin-bottom: 28px; }
	.site-footer__bottom { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.site-footer__quals { text-align: left; }
	.site-footer__legal { justify-self: start; flex-wrap: wrap; gap: 8px 20px; }
	.site-footer__address { font-style: normal; }
	.site-footer__address span { display: block; }
	/* The menu in two columns so the footer isn't a long scroll of links. */
	nav.site-footer__col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 6px; }
	nav.site-footer__col > :not(a) { grid-column: 1 / -1; }
	.site-footer__col a { padding-block: 6px; } /* bigger tap targets */
	.site-footer__col { gap: 6px; }
}

/* Form honeypot (inc/forms.php): off-screen, never seen or filled by people. */
.consult__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.is-sending .consult__submit { opacity: 0.6; cursor: progress; }

/* Sent forms (src/forms.js): the fields give way to a serif "Thank you" (h-display size, never above hero titles). */
.is-sent > :not(.form-thanks) { display: none !important; }
.form-thanks { display: flex; flex-direction: column; gap: 16px; padding: 24px 0 8px; outline: none; animation: form-thanks-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.form-thanks__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(2.5rem, 3.6vw + 0.5rem, 3.75rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--serif-ink);
}
.form-thanks__text { margin: 0; max-width: 34em; line-height: 1.5; }
@keyframes form-thanks-in { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .form-thanks { animation: none; } }

/* Patient Resources downloads: each row is a link to its fillable PDF.
   Hover matches the original download rows (.doc-row): a soft ice fill wipes in from the left,
   the row eases right, the PDF tag turns white and the arrow slides in. */
.prx-rows > li { margin: 0; }
a.prx-row {
	position: relative;
	grid-template-columns: minmax(0, 1fr) auto 24px;
	text-decoration: none;
	isolation: isolate;
	transition: color 0.45s ease;
}
a.prx-row::before {
	content: "";
	position: absolute;
	inset: 0 -16px;
	z-index: -1;
	border-radius: 16px;
	background: var(--ice);
	clip-path: inset(0 100% 0 0 round 16px);
	transition: clip-path 0.7s var(--ease-io);
}
a.prx-row > * { transition: translate 0.6s var(--ease-out), opacity 0.4s ease, background-color 0.4s ease; }
@media (hover: hover) {
	a.prx-row .prx-row__go { opacity: 0; translate: -10px 0; }
	a.prx-row:hover::before { clip-path: inset(0 0 0 0 round 16px); }
	a.prx-row:hover > :not(.prx-row__go) { translate: 12px 0; }
	a.prx-row:hover .prx-tag { background: #fff; }
	a.prx-row:hover .prx-row__go { opacity: 1; translate: 0 0; }
}
a.prx-row:focus-visible { outline: 2px solid var(--serif-ink); outline-offset: 4px; border-radius: 16px; }
@media (max-width: 767px) {
	a.prx-row { grid-template-columns: minmax(0, 1fr) auto 20px; row-gap: 0; }
	a.prx-row .prx-row__title, a.prx-row .prx-row__go { grid-column: auto; }
	a.prx-row::before { border-radius: 10px; clip-path: inset(0 100% 0 0 round 10px); }
	a.prx-row:active::before { clip-path: inset(0 0 0 0 round 10px); transition-duration: 0.3s; }
}
@media (prefers-reduced-motion: reduce) {
	a.prx-row::before, a.prx-row > * { transition: none; }
}

/* =========================================================================
   About → Our team: "Read bio" on each card opens the bio panel (src/team.js).
   ========================================================================= */
.team__member { position: relative; }
.team__photo img { transition: scale 0.9s var(--ease-out); }
.pv.pv.pv .team__more {
	align-self: flex-start;
	margin-top: 14px;
	padding-bottom: 2px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 400;
	color: var(--serif-ink);
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
	transition: background-size 0.5s var(--ease-out);
}
.team__more::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* the whole card opens the bio */
.team__more:focus-visible { outline: none; }
.team__more:focus-visible::after { outline: 2px solid var(--serif-ink); outline-offset: 6px; border-radius: 8px; }
@media (hover: hover) {
	.team__member:hover .team__photo img { scale: 1.04; }
	.pv.pv.pv .team__member:hover .team__more { background-size: 100% 1px; }
}

/* The panel: white card over a soft navy veil. Desktop: photo left, bio right (scrolls).
   Phones: a full-height sheet, photo on top, everything scrolls together. */
dialog.team-bio {
	position: fixed;
	inset: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 32px;
	border: 0;
	background: transparent;
	overflow: hidden;
	overscroll-behavior: contain;
}
dialog.team-bio[open] { display: grid; place-items: center; }
dialog.team-bio::backdrop { background: rgba(30, 42, 90, 0.38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.45s ease; }
dialog.team-bio.is-open::backdrop { opacity: 1; }
html.has-team-bio { overflow: hidden; }

.team-bio__panel {
	position: relative;
	box-sizing: border-box;
	width: min(1120px, 100%);
	height: min(760px, 100%);
	overflow: hidden;
	border-radius: 16px;
	background: #fff;
	font-family: var(--wp--preset--font-family--body);
	color: #0F1012;
	box-shadow: 0 40px 120px rgba(30, 42, 90, 0.25);
	opacity: 0;
	translate: 0 28px;
	clip-path: inset(3% 3% 3% 3% round 16px);
	transition: opacity 0.4s ease, translate 0.6s var(--ease-out), clip-path 0.7s var(--ease-io);
}
.team-bio.is-open .team-bio__panel { opacity: 1; translate: 0 0; clip-path: inset(0 0 0 0 round 16px); }

.team-bio__close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 2;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(30, 42, 90, 0.16);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease, rotate 0.5s var(--ease-out);
}
.team-bio__close span, .team-bio__close span::before { position: absolute; top: 50%; left: 50%; width: 16px; height: 1.5px; margin: -0.75px 0 0 -8px; background: var(--serif-ink); rotate: 45deg; content: ""; transition: background-color 0.3s ease; }
.team-bio__close span::before { top: 0; left: 0; margin: 0; rotate: 90deg; }
.team-bio__close:focus-visible { outline: 2px solid var(--serif-ink); outline-offset: 3px; }
@media (hover: hover) {
	.team-bio__close:hover { background: var(--serif-ink); border-color: var(--serif-ink); rotate: 90deg; }
	.team-bio__close:hover span, .team-bio__close:hover span::before { background: #fff; }
}

.team-bio__person { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); height: 100%; }
.team-bio__person[hidden] { display: none; }
.team-bio__photo { height: 100%; overflow: hidden; background: linear-gradient(180deg, #F2F4F7 0%, #DCE4EC 100%); }
.team-bio__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.team-bio__person:not([hidden]) .team-bio__photo img { animation: team-bio-photo 0.9s var(--ease-out) both; }
.team-bio__body { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 72px clamp(32px, 5vw, 72px) 0; }
.team-bio__person:not([hidden]) .team-bio__body > * { animation: team-bio-in 0.7s var(--ease-out) both; }
.team-bio__person:not([hidden]) .team-bio__body > :nth-child(2) { animation-delay: 0.05s; }
.team-bio__person:not([hidden]) .team-bio__body > :nth-child(3) { animation-delay: 0.1s; }
.team-bio__person:not([hidden]) .team-bio__body > :nth-child(n+4) { animation-delay: 0.15s; }
@keyframes team-bio-in { from { opacity: 0; translate: 0 16px; } }
@keyframes team-bio-photo { from { scale: 1.06; } }

.team-bio__role { margin: 0 0 18px; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(15, 16, 18, 0.6); }
.team-bio__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(2.5rem, 3.6vw + 0.5rem, 3.75rem); /* the section-heading size: never above hero titles */
	line-height: 0.95;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--serif-ink);
	text-wrap: balance;
}
.team-bio__credentials { margin: 16px 0 0; font-size: 14px; font-weight: 400; color: rgba(15, 16, 18, 0.6); }
.team-bio__text { margin-top: 36px; }
.team-bio__text p { margin: 0 0 1.1em; font-size: 17px; font-weight: 300; line-height: 1.65; color: rgba(15, 16, 18, 0.82); }
.team-bio__text p:last-child { margin-bottom: 0; }

.team-bio__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: auto; padding: 48px 0 40px; }
.team-bio__nav::before { content: ""; grid-column: 1 / -1; height: 1px; margin-bottom: 8px; background: rgba(30, 42, 90, 0.12); }
.team-bio__step { display: flex; flex-direction: column; gap: 6px; color: #0F1012; text-decoration: none; }
.team-bio__step--next { align-items: flex-end; text-align: right; }
.team-bio__step-dir { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(15, 16, 18, 0.5); }
.team-bio__step-dir::before, .team-bio__step-dir::after { display: inline-block; transition: translate 0.5s var(--ease-out); }
.team-bio__step--prev .team-bio__step-dir::before { content: "←"; margin-right: 8px; }
.team-bio__step--next .team-bio__step-dir::after { content: "→"; margin-left: 8px; }
.team-bio__step-name { font-size: 18px; font-weight: 300; letter-spacing: -0.01em; background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size 0.5s var(--ease-out); }
.team-bio__step--next .team-bio__step-name { background-position: right bottom; }
.team-bio__step:focus-visible { outline: 2px solid var(--serif-ink); outline-offset: 4px; border-radius: 4px; }
@media (hover: hover) {
	.team-bio__step:hover .team-bio__step-name { background-size: 100% 1px; }
	.team-bio__step--prev:hover .team-bio__step-dir::before { translate: -4px 0; }
	.team-bio__step--next:hover .team-bio__step-dir::after { translate: 4px 0; }
}

@media (max-width: 767px) {
	dialog.team-bio { padding: 12px 0 0; }
	dialog.team-bio[open] { place-items: end stretch; }
	.team-bio__panel { width: 100%; height: 100%; border-radius: 10px 10px 0 0; clip-path: inset(0 0 0 0 round 10px 10px 0 0); translate: 0 100%; opacity: 1; transition: translate 0.6s var(--ease-io); }
	.team-bio.is-open .team-bio__panel { clip-path: inset(0 0 0 0 round 10px 10px 0 0); translate: 0 0; }
	.team-bio__close { top: 14px; right: 14px; }
	.team-bio__person { display: block; overflow-y: auto; overscroll-behavior: contain; }
	.team-bio__photo { height: 48svh; }
	.team-bio__body { overflow: visible; padding: 32px var(--gutter, 20px) 0; }
	.team-bio__text { margin-top: 28px; }
	.team-bio__text p { font-size: 16px; }
	.team-bio__nav { gap: 16px; padding: 40px 0 calc(32px + env(safe-area-inset-bottom)); }
	.team-bio__step-name { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.team-bio__panel, dialog.team-bio::backdrop { transition: none; }
	.team-bio__person .team-bio__photo img, .team-bio__person .team-bio__body > * { animation: none !important; }
}

/* Team cards, desktop: the photo blurs, a navy fade rises at the bottom and "See bio ↗" rises in at its bottom left.
   Touch screens keep the "Read bio" link. */
@media (hover: hover) and (min-width: 768px) {
	.team__photo { position: relative; }
	.team__photo::after {
		content: "See bio  ↗";
		position: absolute;
		left: 20px;
		bottom: 18px;
		font-family: var(--wp--preset--font-family--body);
		font-size: 15px;
		font-weight: 400;
		letter-spacing: 0.01em;
		white-space: pre;
		color: #fff;
		text-shadow: 0 1px 12px rgba(30, 42, 90, 0.3);
		opacity: 0;
		translate: 0 10px;
		transition: opacity 0.4s ease, translate 0.6s var(--ease-out);
		pointer-events: none;
	}
	.team__member:hover .team__photo::after { opacity: 1; translate: 0 0; }
	.team__photo img { transition: scale 0.9s var(--ease-out), filter 0.6s var(--ease-out); }
	.team__member:hover .team__photo img { filter: blur(6px); }
	/* A navy fade along the bottom so the label reads, without darkening the whole photo. */
	.team__photo::before {
		content: "";
		position: absolute;
		inset: auto 0 0;
		z-index: 1;
		height: 45%;
		background: linear-gradient(to top, rgba(30, 42, 90, 0.55), rgba(30, 42, 90, 0));
		opacity: 0;
		transition: opacity 0.5s ease;
		pointer-events: none;
	}
	.team__member:hover .team__photo::before { opacity: 1; }
	.team__photo::after { z-index: 2; }
	/* The circle replaces the "Read bio" link here; the link stays (invisible) so the card is still a link. */
	.pv.pv.pv .team__more { margin: 0; padding: 0; background: none; }
	.team__more span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Panels (menu / consultation, team bios) get a slim grey scrollbar of their own; the page
   itself keeps no scrollbar. Chrome/Safari: the ::-webkit-scrollbar rules (they only apply while
   scrollbar-width is unset there). Firefox: thin + grey via scrollbar-color. */
.site-menu, .team-bio__body, .team-bio__person { scrollbar-width: auto; }
/* Spelled out per selector: Chrome ignores these pseudo-elements after :is(). */
.site-menu::-webkit-scrollbar, .team-bio__body::-webkit-scrollbar, .team-bio__person::-webkit-scrollbar { display: block; width: 14px; height: 14px; background: transparent; }
.site-menu::-webkit-scrollbar-track, .team-bio__body::-webkit-scrollbar-track, .team-bio__person::-webkit-scrollbar-track { background: transparent; margin-block: 16px; }
.site-menu::-webkit-scrollbar-thumb, .team-bio__body::-webkit-scrollbar-thumb, .team-bio__person::-webkit-scrollbar-thumb {
	border: 5px solid transparent; /* a 4px bar floating inside the 14px gutter */
	border-radius: 100px;
	background: rgba(15, 16, 18, 0.18) padding-box;
}
.site-menu::-webkit-scrollbar-thumb:hover, .team-bio__body::-webkit-scrollbar-thumb:hover, .team-bio__person::-webkit-scrollbar-thumb:hover { background-color: rgba(15, 16, 18, 0.34); }
.site-menu::-webkit-scrollbar-corner, .team-bio__body::-webkit-scrollbar-corner, .team-bio__person::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
	.site-menu, .team-bio__body, .team-bio__person { scrollbar-width: thin; scrollbar-color: rgba(15, 16, 18, 0.22) transparent; }
}

/* Patient Resources → Conditions: white instead of the moving blue (which clashed with the navy
   footer right after it). The blue canvas is gone from the markup, so motion.js skips it.
   Text goes dark, and the glass cards / pill become the page's light grey so they show on white. */
.prx-surf__pin { background: #fff; }
.prx-surf__head, .prx-surf__head .prx-side, .prx-surf__head .prx-side span { color: var(--px-text); }
.prx-surf__head .h-display { color: var(--serif-ink); }
.prx-surf__head .cb__hero-cta { background: var(--px-panel); color: var(--wp--preset--color--slate); -webkit-backdrop-filter: none; backdrop-filter: none; }
.prx-surf__head .cb__hero-cta:hover, .prx-surf__head .cb__hero-cta:focus-visible { background: #E4E8EE; }
.prx-surf__card { background: color-mix(in srgb, var(--px-panel) calc(70% + 30% * var(--focus, 0)), #fff); -webkit-backdrop-filter: none; backdrop-filter: none; }
.prx-surf__card:hover, .prx-surf__card:focus-visible { background: #E8ECF1; }