/* kit: v0.2.0 */
/* ==========================================================================
   Lasting Wellness Center
   Breakpoints, min-width by default (a max-width query needs a stated reason).
   One line each: what changes there, and why in a phrase. The width is measured
   before the query is written, but the measurement lives in docs/plan.md and
   docs/plan-rebuild.md — this is not an evidence log.
   Content fit, @container page (the body), whose width excludes a classic scrollbar:
   324   the approaches button takes its 18 px label: it fits its designed one line
   342   the dark banner's button takes its 18 px label: it fits its designed two lines
   350   the footer's contact rows take their 16 px type, the light banner's button its 18 px label: each fits its column
   352   the We Ask tiles take their 18 px label, the treatment card its 28 px title: the longest label fits its tile, the longest word its card
   358   the submenu items take their 16 px title: each title fits one line, as designed
   365   the category cards take their 24 px title: the longest title fits its designed two lines
   370   the light banner's button takes its designed 30 px padding: its label still sets two lines
   509   the footer's Legal menu and copyright share a row, at either end: both fit with a 20 px gap
   874   the category cards take three columns, their titles a step down: each title sets as in two columns
   928   the hero's features take their row: each label sets as on phones
   974   the FAQ tabs take their row, a type step down: the four tabs fit; 1078 their designed size fits
   993   the card grids take three columns, a type step down: each card's copy keeps the phone card's line length
   1008  the header shows its menu row, a type step down: the row fits with 20 px between its groups
   1128  the cards take their phone type back: three columns fit it
   1185  the footer takes its four columns: the designed column widths fit with the grid's 30 px gap
   Layout, @media:
   768   sections take their desktop arrangement where it fits, scaled to the container; card grids two columns
   961   split-card photos fill their column at the designed share: every cover photo keeps at least half its width
   1024  type steps up; We Ask takes its row; the doctors card takes three columns, its bios a step down
   1188  the paragraphs hero's copy widens to half the container: it clears the photo's faces from here
   1280  header, doctors card and cards at their designed sizes: each row's designed widths fit
   1310  the container caps and the float's clearance releases: nothing wraps beneath the float
   1410  the We Ask panel overhangs the content column, as designed
   ========================================================================== */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-variable-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-italic-variable-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/manrope-variable-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Allura';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/allura-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The stand-ins: Arial sized to each web font's width and vertical metrics, so text keeps its
   lines and height while the web font loads and does not move when it swaps in. The values are
   measured from the woff2 files (docs/report-performance.md §5.2). Where a device has no Arial,
   the face is skipped and system-ui draws. */

@font-face {
	font-family: 'Inter Fallback';
	src: local('Arial');
	size-adjust: 107.46%;
	ascent-override: 90.15%;
	descent-override: 22.45%;
	line-gap-override: 0%;
}

@font-face {
	font-family: 'Inter Fallback';
	font-style: italic;
	src: local('Arial Italic');
	size-adjust: 108.1%;
	ascent-override: 89.62%;
	descent-override: 22.31%;
	line-gap-override: 0%;
}

@font-face {
	font-family: 'Manrope Fallback';
	src: local('Arial');
	size-adjust: 108.82%;
	ascent-override: 97.96%;
	descent-override: 27.57%;
	line-gap-override: 0%;
}

:root {
	--color-white: #fff;
	--color-navy: #0f385a;
	--color-body: #3f3f3f;
	--color-cream: #fff8f5;
	--color-brass: #8c4f30;
	--color-brass-light: #e88d5f;
	--color-muted: #656565;
	--color-mid-grey: #6b6b6b;
	--color-slate: #6b7d87;
	--color-line: #ffefe8;
	--color-tint: #f9f0ec;
	--color-selected: #edd6ca;
	--color-light-grey: #f4f2f2;
	--color-mist: #e7ecef;
	--color-divider: #e5e5e5;
	--color-placeholder: #ccc;
	--color-error: #c73e39;
	--color-lead: rgba(255, 255, 255, 0.75);
	--color-border: rgba(101, 101, 101, 0.2);

	--gradient-button: linear-gradient(90deg, #c2754e, #e88d5f);
	--gradient-button-hover: linear-gradient(270deg, #c2754e, #e88d5f);
	--gradient-button-slide: linear-gradient(90deg, #c2754e, #e88d5f, #c2754e);
	--gradient-hero: linear-gradient(180deg, #0f385a 15%, rgba(15, 56, 90, 0.7) 42%, rgba(15, 56, 90, 0) 70%);
	--gradient-tile: linear-gradient(233deg, #144167 50%, rgba(64, 78, 97, 0.93) 63%, rgba(107, 91, 91, 0.85) 75%, rgba(151, 104, 84, 0.78) 88%, rgba(194, 117, 78, 0.7) 100%);
	--gradient-card: linear-gradient(0deg, rgba(15, 56, 90, 0.98) 23%, rgba(59, 71, 87, 0.79) 42%, rgba(106, 87, 84, 0.59) 62%, rgba(150, 102, 81, 0.39) 81%, rgba(194, 117, 78, 0.2) 100%);
	--gradient-doctors: linear-gradient(139deg, #0f385a 50%, #9a6851 100%);
	--gradient-banner-dark: linear-gradient(180deg, #0f385a 3%, rgba(15, 56, 90, 0.5) 30%, rgba(15, 56, 90, 0.25) 43%, rgba(15, 56, 90, 0) 56%);
	--mask-banner-light: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.75) 75%, #000 100%);
	--gradient-banner-paragraph: linear-gradient(180deg, #0f385a 15%, rgba(15, 56, 90, 0.5) 44%, rgba(15, 56, 90, 0.25) 58%, rgba(15, 56, 90, 0) 73%);
	--gradient-banner-wide: linear-gradient(180deg, #0f385a 34%, rgba(15, 56, 90, 0.5) 57%, rgba(15, 56, 90, 0.25) 68%, rgba(15, 56, 90, 0) 79%);
	--gradient-banner-clear: linear-gradient(180deg, #0f385a 6%, rgba(15, 56, 90, 0.5) 24%, rgba(15, 56, 90, 0.25) 33%, rgba(15, 56, 90, 0) 42%);
	--gradient-banner-long: linear-gradient(180deg, #0f385a 6%, rgba(15, 56, 90, 0.5) 40%, rgba(15, 56, 90, 0.25) 56%, rgba(15, 56, 90, 0) 73%);
	--gradient-banner-solid: linear-gradient(180deg, #0f385a 21%, rgba(15, 56, 90, 0.5) 49%, rgba(15, 56, 90, 0.25) 63%, rgba(15, 56, 90, 0) 77%);
	--gradient-banner-broad: var(--gradient-banner-long);
	--mask-photo-fade: linear-gradient(90deg, transparent 3%, rgba(0, 0, 0, 0.13) 13%, rgba(0, 0, 0, 0.47) 23%, #000 36%);
	--gradient-hero-paragraphs: linear-gradient(180deg, #0f385a, rgba(15, 56, 90, 0));
	--gradient-section-fade: linear-gradient(180deg, #fff, #fff8f5);
	--gradient-copyright: linear-gradient(90deg, #715953, #0f385a);
	--gradient-icon-hover: linear-gradient(180deg, #c2754e, #0f385a);
	--gradient-step: linear-gradient(to bottom right, #144167 44%, #9e6a53 100%);
	--gradient-split-card: linear-gradient(to bottom left, #144167 60%, #745e59 100%);
	--gradient-quote: linear-gradient(to top, #144167, rgba(67, 80, 96, 0.92));
	--gradient-tab: linear-gradient(to top left, #bd734e, #0f385a 75%);
	--gradient-badge: linear-gradient(327deg, #6c5854, #0f385a 62%);
	--gradient-category: linear-gradient(to top right, #144167 50%, #7e6158);
	--gradient-category-hover: linear-gradient(to top right, #144167 50%, #55555e);

	--shadow-header: inset 0 -1px var(--color-line), 0 10px 20px rgba(63, 63, 63, 0.1);
	--shadow-tile: 0 13px 33px rgba(15, 56, 90, 0.3);
	--shadow-quote: 0 10px 25px rgba(15, 56, 90, 0.7);
	--shadow-inset-card: 0 20px 50px rgba(15, 56, 90, 0.7);
	--shadow-detail-ring: inset 0 0 0 1.5px var(--color-brass);
	--shadow-brass-ring: inset 0 0 0 2px var(--color-brass);
	--shadow-brass-light-ring: inset 0 0 0 2px var(--color-brass-light);

	--color-heading: var(--color-navy);
	--color-surface: var(--color-cream);
	--color-focus: var(--color-brass);
	--shadow-ring: var(--shadow-brass-ring);

	--font-heading: 'Manrope', 'Manrope Fallback', system-ui, sans-serif;
	--font-body: 'Inter', 'Inter Fallback', system-ui, sans-serif;

	--section-pad: 30px;
	--gutter: 15px;
	--copy-column: 615px;
	--lead-column: 675px;
}

@media (min-width: 768px) {
	:root {
		--gradient-hero: linear-gradient(90deg, #0f385a 2%, rgba(15, 56, 90, 0.5) 27%, rgba(15, 56, 90, 0.25) 40%, rgba(15, 56, 90, 0) 52%);
		--gradient-banner-dark: linear-gradient(90deg, #0f385a 1%, rgba(15, 56, 90, 0.5) 31%, rgba(15, 56, 90, 0.25) 46%, rgba(15, 56, 90, 0) 60%);
		--mask-banner-light: linear-gradient(90deg, transparent 1%, rgba(0, 0, 0, 0.5) 31%, rgba(0, 0, 0, 0.75) 46%, #000 60%);
		--gradient-banner-paragraph: var(--gradient-hero);
		--gradient-banner-wide: linear-gradient(90deg, #0f385a 4%, rgba(15, 56, 90, 0.7) 40%, rgba(15, 56, 90, 0.5) 58%, rgba(15, 56, 90, 0) 76%);
		--gradient-banner-clear: linear-gradient(90deg, #0f385a 0%, rgba(15, 56, 90, 0.9) 15%, rgba(15, 56, 90, 0.5) 33%, rgba(15, 56, 90, 0) 50%);
		--gradient-banner-long: linear-gradient(90deg, #0f385a 14%, rgba(15, 56, 90, 0.7) 39%, rgba(15, 56, 90, 0.5) 53%, rgba(15, 56, 90, 0) 68%);
		--gradient-banner-solid: linear-gradient(90deg, #0f385a 34%, rgba(15, 56, 90, 0.7) 52%, rgba(15, 56, 90, 0.5) 60%, rgba(15, 56, 90, 0) 69%);
		--gradient-banner-broad: var(--gradient-banner-wide);
		--gradient-doctors: linear-gradient(175deg, #0f385a 50%, #c2754e 100%);
		--gradient-copyright: linear-gradient(90deg, #c2754e, #0f385a);
		--gradient-hero-paragraphs: linear-gradient(90deg, #0f385a 0%, rgba(15, 56, 90, 0.86) 6%, rgba(15, 56, 90, 0.14) 43%, rgba(15, 56, 90, 0) 100%);
		--gradient-principle: linear-gradient(191deg, #144167 50%, #745e59 100%);
		--gradient-profile: linear-gradient(to top left, #144167 54%, #806257 100%);
		--gradient-profile-even: linear-gradient(to top right, #144167 54%, #806257 100%);
	}
}

@media (min-width: 1024px) {
	:root {
		--shadow-tile: 0 20px 50px rgba(15, 56, 90, 0.3);
		--shadow-quote: 0 20px 50px rgba(15, 56, 90, 0.7);
		--section-pad: 80px;
	}
}

@media (min-width: 1280px) {
	:root {
		--gradient-card: linear-gradient(0deg, rgba(15, 56, 90, 0.98) 23%, rgba(59, 71, 87, 0.76) 42%, rgba(106, 87, 84, 0.53) 62%, rgba(150, 102, 81, 0.32) 81%, rgba(194, 117, 78, 0.1) 100%);
		--shadow-header: 0 10px 20px rgba(63, 63, 63, 0.1);
	}
}

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

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

/* The universal margin reset above would otherwise strip the UA's auto
   margins and render a native dialog top-left instead of centred. */

dialog { margin: auto; }

.list--bare {
	list-style: none;
	padding-left: 0;
}

img,
picture { display: block; }

img {
	max-width: 100%;
	height: auto;
}

picture > img { width: 100%; }

a { color: inherit; }

address { font-style: normal; }

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

button {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	text-transform: inherit;
	cursor: pointer;
}

p, li, h1, h2, h3, figcaption { overflow-wrap: break-word; }

/* The content-fit rules query this box: a media query would count the scrollbar. */

body {
	container: page / inline-size;
	background-color: var(--color-white);
	color: var(--color-body);
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.56;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	color: var(--color-heading);
	font-family: var(--font-heading);
	line-height: 1.31;
	text-wrap: balance;
}

h1 { font-size: 36px; line-height: 1.22; }

h2,
.media-text h1,
.hero--paragraphs h1,
.not-found h1 {
	margin-bottom: 20px;
	font-size: 32px;
}

.media-text h1,
.hero--paragraphs h1,
.not-found h1 { line-height: 1.31; }

.media-text--phone-center h1,
.media-text--text h1,
.faq > .container > h2,
.approaches--category > .container > h2 { line-height: 1.38; }

p, li, figcaption { text-wrap: pretty; }

p { margin-bottom: 20px; }

strong { color: var(--color-heading); }

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

@media (min-width: 1024px) {
	h1 { font-size: 52px; line-height: 1.19; }

	h2,
	.media-text h1,
	.hero--paragraphs h1,
	.faq > .container > h2,
	.approaches--category > .container > h2,
	.not-found h1 { font-size: 42px; line-height: 1.24; }
}

/* Core blocks */

.wp-block-buttons { justify-content: center; }

.wp-block-button { width: 100%; }

/* The label and the hover symbol are the link's two flex items; the symbol has
   no width until hover, so the label alone is centred at rest. Hovered, the symbol
   and its gap take their 39.5 px from the side padding, so the button keeps its
   width and the label its lines. A touch screen never shows it: a tap's hover stays. */

.wp-block-button__link {
	--button-pad: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px var(--button-pad);
	border-radius: 10px;
	background-image: var(--gradient-button);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.44;
	text-transform: uppercase;
	text-wrap: balance;
}

/* A length, so the hover width can transition. */

.wp-block-button__link::after {
	content: "";
	flex-shrink: 0;
	width: 0;
	height: 24px;
	background: url('../images/button-symbol.svg') center / contain no-repeat;
}

@media (hover: hover) and (pointer: fine) {
	.wp-block-button__link:hover {
		padding-left: calc(var(--button-pad) - 19.75px);
		padding-right: calc(var(--button-pad) - 19.75px);
	}

	.wp-block-button__link:hover::after {
		width: 24.5px;
		margin-left: 15px;
	}
}

.not-found__outline > .wp-block-button__link {
	--hover-fill: var(--gradient-button);
	background: none;
	color: var(--color-brass);
}

/* A hover fill that crossfades: a pseudo-element (background-image does not transition) behind
   the content. The brass rings here and on the shell's icon circles clear on hover, or their
   edge shows through the fill; a category card fades to its darker gradient, the header CTA to its reversed one. Each host sets --hover-fill. */

.not-found__outline > .wp-block-button__link,
.icon-circle {
	position: relative;
	isolation: isolate;
	box-shadow: var(--shadow-ring);
}

.not-found__outline > .wp-block-button__link::before,
.icon-circle::before,
.card--category::before,
.site-header__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background-image: var(--hover-fill);
	opacity: 0;
}

.not-found__outline > .wp-block-button__link:hover,
a:hover > .icon-circle { box-shadow: none; }

.not-found__outline > .wp-block-button__link:hover::before,
a:hover > .icon-circle::before,
.site-header__cta:hover::before { opacity: 1; }

.not-found__outline > .wp-block-button__link:hover { color: var(--color-white); }

.wp-block-list {
	margin-bottom: 20px;
	padding-left: 28px;
}

/* A list inside a list item would otherwise take the nested circle marker. */

ul.wp-block-list { list-style-type: disc; }

.wp-block-list li { margin-bottom: 10px; }

.wp-block-list:not(.is-style-terms) { padding-bottom: 5px; }

@media (min-width: 768px) {
	.wp-block-buttons { justify-content: flex-start; }

	.wp-block-button { width: fit-content; }
}

@media (min-width: 1024px) {
	.wp-block-button__link { line-height: 1.67; }

	.wp-block-list li { margin-bottom: 0; }

	.wp-block-list:not(.is-style-terms) { padding-bottom: 0; }
}

.is-style-subtitle {
	color: var(--color-brass-light);
	font-weight: 700;
	text-transform: uppercase;
	text-wrap: balance;
}

.is-style-alias {
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.44;
	opacity: 0.85;
	text-wrap: balance;
}

@media (min-width: 1024px) {
	.is-style-alias {
		font-size: 22px;
		line-height: 1.36;
	}
}

.is-style-closing {
	font-size: 14px;
	font-style: italic;
	line-height: 1.71;
	text-align: center;
}

/* Follows the list's 1024 rule, which it overrides at every width. */

.is-style-terms li { margin-bottom: 20px; }

.is-style-terms li::marker { color: var(--color-heading); }

/* Editor canvas: WordPress wraps each block preview in .wp-block and gives it a width
   and margins; a block root's own cap and margins below must outrank this. */

:where(.wp-block)[data-type^="codeart/"] {
	max-width: none;
	margin-top: 0;
	margin-bottom: 0;
}

/* Only a Text page holds core blocks at the canvas root (inc/lockdown.php): they take the
   page's column, as .text-page__body draws it on the front end. */

.is-root-container > :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {
	max-width: min(750px, 100% - 2 * var(--gutter));
	margin-left: auto;
	margin-right: auto;
}

/* Layout */

.container {
	width: 100%;
	max-width: 1310px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.section {
	padding-top: var(--section-pad);
	padding-bottom: var(--section-pad);
}

/* Two adjacent sections whose colours meet at their edge read as one band, so the
   second drops its top padding: a fade starts white and ends cream. A navy section
   (the hero) ends on its photo, so it never joins. Sections only: the ground
   utilities also colour bars and panels. */

.section.bg--white + .section.bg--white,
.section.bg--cream + .section.bg--cream,
.section.bg--white + .section.bg--fade,
.section.bg--fade + .section.bg--cream { padding-top: 0; }

/* A cream surface inside a cream section would vanish, so it turns white there; on a
   fade, which runs from white to cream, it takes a grey that differs from both ends. */

.section.bg--cream { --color-surface: var(--color-white); }

.section.bg--fade { --color-surface: var(--color-light-grey); }

/* Overrides the heading and focus colours for everything inside. */

.inverse {
	color: var(--color-white);
	--color-heading: var(--color-white);
	--color-focus: var(--color-brass-light);
}

/* Restores the body, heading and focus colours on a light surface inside an inverse ancestor. */

.on-light {
	color: var(--color-body);
	--color-heading: var(--color-navy);
	--color-focus: var(--color-brass);
}

.stacked {
	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
}

.media-text .wp-block-button,
.approaches .wp-block-button,
.physicians .wp-block-button,
.not-found .wp-block-button { max-width: 345px; }

.physicians .wp-block-button__link,
.not-found .wp-block-button__link { line-height: 1.67; }

/* Core's heading markup takes no theme class, so the section headings that share a
   treatment are named beside its class. */

.align-stacked,
.we-ask__text > h2,
.split-photo__text > h2 { text-align: center; }

.media-text--heading-above > .container > :is(h1, h2),
.approaches > .container > h2,
.physicians > .container > h2,
.split-cards > .container > :is(h2, p),
.approaches--category > .container > p,
.faq > .container > h2,
.contact-info__grid > h2,
.split-card--feature > h2 { text-align: center; }

.media-text--heading-above > .container > :is(h1, h2),
.split-cards > .container > :is(h2, p),
.faq > .container > h2,
.contact-info__grid > h2,
.split-card--feature > h2 { margin-bottom: 30px; }

/* A section introduction carries the heading's gap to the cards; the heading closes up to it. */

.split-cards > .container > h2:has(+ p) { margin-bottom: 10px; }

.split-cards > .container > p,
.approaches--category > .container > p {
	margin-left: auto;
	margin-right: auto;
}

/* Drawn in its host's text colour, so the host's hover and open colours reach it. */

.chevron::after {
	content: "";
	background-color: currentColor;
	mask-image: url('../images/icon-chevron.svg');
	mask-size: contain;
	rotate: 180deg;
}

.photo {
	margin-top: 30px;
	margin-bottom: 30px;
}

.photo img { border-radius: 20px; }

.fine-print {
	font-size: 12px;
	line-height: 1.5;
	text-wrap: balance;
}

/* The host positions itself. The veil overlaps the photo's open edge (its top on
   phones, its left beside the copy) by a pixel, so a fractional edge cannot show. */

.scrim::after {
	content: "";
	position: absolute;
	inset: -1px 0 0;
}

/* Paints behind its host's copy inside the host's isolated stacking context. */

.cover-photo {
	position: relative;
	z-index: -1;
}

.cover-photo img {
	height: 100%;
	object-fit: cover;
}

@media (min-width: 768px) {
	.stacked {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}

	.align-stacked,
	.we-ask__text > h2,
	.split-photo__text > h2 { text-align: left; }

	/* Media + text's text only stays centred, so its button keeps the phone's centring. */
	.approaches .wp-block-buttons,
	.physicians .wp-block-buttons,
	.not-found .wp-block-buttons,
	.media-text--text .wp-block-buttons { justify-content: center; }

	.scrim::after { inset: 0 0 0 -1px; }

	.side-photo {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
	}
}

@media (min-width: 1024px) {
	.media-text--heading-above > .container > :is(h1, h2),
	.approaches > .container > h2,
	.physicians > .container > h2,
	.split-cards > .container > :is(h2, p) { margin-bottom: 40px; }

	.split-cards--principle > .container > :is(h2, p),
	.split-cards--treatment > .container > :is(h2, p),
	.approaches--category > .container > p,
	.contact-info__grid > h2 { margin-bottom: 50px; }

	.approaches--category > .container > h2 { margin-bottom: 20px; }
}

.media-block {
	display: flex;
	flex-direction: column;
	max-width: 715px;
	margin-left: auto;
	margin-right: auto;
}

.media-block__img {
	order: 2;
	width: 100%;
	max-width: 516px;
	margin-top: 30px;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
}

/* Photo first on phones: the block keeps source order. This rule outranks the float's
   base rule, so every query below that sets the float's margins restates them for it. */

.media-text--media-first .media-block { display: flow-root; }

.media-text--media-first .media-block__img {
	margin-top: 0;
	margin-bottom: 30px;
}

@media (min-width: 768px) {
	.media-block {
		display: flow-root;
		max-width: none;
	}

	.media-block__img,
	.media-text--media-first .media-block__img {
		float: left;
		width: 41%;
		margin-top: 0;
		margin-right: 50px;
		margin-bottom: 20px;
	}

	.media-text--photo-right .media-block__img {
		float: right;
		margin-right: 0;
		margin-left: 50px;
	}
}

@media (min-width: 1310px) {
	.media-block__img,
	.media-text--media-first .media-block__img { margin-bottom: 0; }
}

/* home-S01 — Header and navigation */

.site-header,
.site-footer {
	font-size: 16px;
	line-height: 1.38;
}

.site-header {
	position: relative;
	z-index: 1;
}

.site-header__offer { padding: 10px; }

.site-header__bar { box-shadow: var(--shadow-header); }

.site-header__row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 15px;
	padding-bottom: 15px;
}

.site-header__logo {
	flex-shrink: 0;
	margin-right: auto;
}

.site-header__logo img {
	width: auto;
	height: 34px;
}

.site-header__cta {
	--hover-fill: var(--gradient-button-hover);
	display: flex;
	position: relative;
	isolation: isolate;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 130px;
	height: 34px;
	border-radius: 6px;
	background-image: var(--gradient-button);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.31;
	text-decoration: none;
	white-space: nowrap;
}

.site-header__toggle {
	flex-shrink: 0;
	order: 1;
}

.site-header__toggle img:last-of-type,
.site-header__toggle[aria-expanded="true"] img:first-of-type { display: none; }

.site-header__toggle[aria-expanded="true"] img:last-of-type { display: block; }

.site-nav {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background-color: var(--color-cream);
}

.site-header__toggle[aria-expanded="true"] + .site-nav { display: block; }

.site-nav__menu,
.site-nav__contact { padding: 30px max(20px, (100% - 335px) / 2); }

.site-nav__menu > li { margin-bottom: 24px; }

.site-nav__menu a {
	text-decoration: none;
	text-wrap: balance;
}

.site-nav__menu a[aria-current="page"],
.site-nav__menu a[aria-current="page"] + .site-nav__toggle,
.site-nav__menu > li:has(.site-nav__submenu a[aria-current="page"]) > :is(a, .site-nav__toggle),
.site-nav__menu a:hover,
.site-nav__menu a:hover + .site-nav__toggle,
.site-nav__toggle:hover,
li:has(> .site-nav__toggle:hover) > a,
.site-nav__toggle[aria-expanded="true"],
li:has(> .site-nav__toggle[aria-expanded="true"]) > a { color: var(--color-brass); }

.site-nav__toggle {
	margin-left: 5px;
	vertical-align: middle;
}

.site-nav__toggle::after {
	display: block;
	width: 24px;
	height: 24px;
}

.site-nav__submenu {
	display: none;
	margin-top: 16px;
}

.site-nav__toggle[aria-expanded="true"] + .site-nav__submenu { display: block; }

.site-nav__submenu a {
	display: block;
	padding: 12px 10px 12px 15px;
	border-radius: 6px;
	font-size: 13.5px;
	line-height: 1.5;
}

@container page (min-width: 358px) {
	.site-nav__submenu a { font-size: 16px; }
}

.site-nav__submenu a:hover {
	background-color: var(--color-tint);
}

.site-nav__submenu a[aria-current="page"] { background-color: var(--color-selected); }

.site-nav__count {
	display: block;
	color: var(--color-muted);
	font-family: var(--font-heading);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.33;
}

.site-nav__contact {
	font-size: 14px;
	line-height: 1.43;
}

.site-nav__contact p {
	margin-bottom: 30px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.38;
	text-wrap: balance;
}

.contact li { margin-bottom: 15px; }

.icon-row {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	text-wrap: balance;
}

.icon-row--address { align-items: flex-start; }

.icon-circle {
	--hover-fill: var(--gradient-icon-hover);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
}

@container page (min-width: 1008px) {
	.site-header__row { justify-content: space-between; }

	.site-header__logo { margin-right: 0; }

	.site-header__toggle { display: none; }

	.site-nav {
		display: block;
		position: static;
		background-color: transparent;
	}

	.site-nav__menu {
		display: flex;
		padding: 0;
	}

	.site-nav__menu > li {
		position: relative;
		margin-bottom: 0;
	}

	.site-nav__menu > li > a {
		display: inline-block;
		padding: 10px 6px;
		border-radius: 10px;
		font-size: 14px;
	}

	.site-nav__toggle {
		margin-left: -1px;
		margin-right: 6px;
	}

	.site-nav__toggle[aria-expanded="true"]::after { rotate: none; }

	.site-nav__submenu {
		position: absolute;
		top: calc(100% + 25px);
		left: -35px;
		width: 320px;
		margin-top: 0;
		padding: 15px;
		border: 1px solid var(--color-border);
		border-radius: 10px;
		background-color: var(--color-white);
	}

	.site-nav__contact { display: none; }
}

@media (min-width: 1280px) {
	.site-header__row {
		padding-top: 23px;
		padding-bottom: 23px;
	}

	.site-header__logo img { height: 54px; }

	.site-header__cta {
		width: auto;
		max-width: none;
		height: auto;
		padding: 10px 30px;
		border-radius: 10px;
		font-size: inherit;
		line-height: inherit;
	}

	.site-nav__menu { gap: 6px; }

	.site-nav__menu > li > a {
		padding: 10px;
		font-size: inherit;
	}

	.site-nav__toggle {
		margin-left: -5px;
		margin-right: 10px;
	}

	.site-nav__submenu { top: calc(100% + 40px); }
}

/* home-S02, physicians-S02 — Hero (the paragraphs h1's centring is in the media + text layer) */

.hero {
	position: relative;
	isolation: isolate;
	padding-bottom: 0;
}

.hero strong { color: var(--color-brass-light); }

.hero--lead .hero__content { max-width: var(--lead-column); }

.hero--paragraphs .hero__content {
	max-width: var(--copy-column);
	margin-left: auto;
	margin-right: auto;
}

.hero--lead h1 { margin-bottom: 15px; }

.hero--lead .hero__content > p {
	margin-bottom: 30px;
	color: var(--color-lead);
	font-size: 20px;
	line-height: 1.5;
}

.hero .wp-block-buttons { margin-bottom: 15px; }

.hero .wp-block-button { max-width: 470px; }

.features {
	display: flex;
	justify-content: center;
	gap: 25px;
}

.feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--color-lead);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.33;
}

.feature p { text-wrap: balance; }

.feature img {
	flex-shrink: 0;
	width: 36px;
	margin-bottom: 10px;
}

.hero--lead .hero__photo { margin-top: -145px; }

.hero--lead .hero__photo img { aspect-ratio: 685 / 708; }

/* On phones the band's foot shows the top of the photo, drawn wider than the band, under the copy's last lines. */

.hero--paragraphs .hero__photo {
	overflow: hidden;
	aspect-ratio: 375 / 229;
	margin-top: -30px;
}

.hero--paragraphs .hero__photo img {
	height: auto;
	aspect-ratio: 375 / 278;
}

.hero--lead .hero__photo::after { background-image: var(--gradient-hero); }

.hero--paragraphs .hero__photo::after { background-image: var(--gradient-hero-paragraphs); }

@media (min-width: 768px) {
	.hero--lead { padding-bottom: var(--section-pad); }

	.hero--lead .hero__content { max-width: calc(52vw - var(--gutter)); }

	.hero .wp-block-button { width: 100%; }

	.hero--lead .hero__photo {
		width: 59%;
		margin-top: 0;
	}

	.hero__photo img { object-position: top; }
}

@media (min-width: 1024px) {
	.hero--lead .hero__content { max-width: var(--lead-column); }

	.hero--lead h1 { margin-bottom: 20px; }

	.hero--lead .hero__content > p {
		max-width: calc(52vw - var(--gutter));
		margin-bottom: 40px;
	}

	.hero .wp-block-buttons { margin-bottom: 30px; }
}

@container page (min-width: 928px) {
	.features {
		max-width: 470px;
		gap: 10px;
	}

	.feature {
		flex-direction: row;
		font-size: 14px;
		line-height: 1.29;
	}

	.feature img {
		width: 44px;
		margin-right: 10px;
		margin-bottom: 0;
	}
}

@media (min-width: 768px) {
	.hero--paragraphs { padding-bottom: var(--section-pad); }

	/* 45 % keeps the copy left of the photo, which starts at 47 %. */
	.hero--paragraphs .hero__content {
		max-width: min(var(--copy-column), 45%);
		margin-left: 0;
	}

	.hero--paragraphs .hero__photo {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		overflow: visible;
		width: 53%;
		aspect-ratio: auto;
		margin-top: 0;
	}

	.hero--paragraphs .hero__photo img { height: 100%; }

	/* Needs the photo's own stacking context (`.cover-photo`), or the blend reaches the band. */
	.hero--paragraphs .hero__photo::before {
		content: "";
		position: absolute;
		inset: 0;
		background: url('../images/physicians-s02-texture-window-light.webp') center / cover;
		opacity: 0.5;
		mix-blend-mode: soft-light;
	}
}

@media (min-width: 1188px) {
	.hero--paragraphs .hero__content { max-width: min(var(--copy-column), 50%); }
}

/* home-S03, home-S08, approach-S02, approach-S04, journey-S02, physicians-S04, conditions-S02, faq-S02, contact-S02,
   treatments-S02, each category page's S02 — Media + text: a float, columns, or text only (the hero's paragraphs h1 shares the centring) */

.media-block > :is(h1, h2),
.media-text__content > :is(h1, h2),
.media-text__content > :is(h1, h2) + .is-style-subtitle,
.hero--paragraphs h1 { text-align: center; }

.media-text__content > :is(h1, h2) + .is-style-subtitle { color: var(--color-brass); }

.media-text__columns {
	display: flex;
	flex-direction: column;
}

/* Photo first: the photo falls between the heading (with its subtitle) and the rest. */
.media-text--media-first .media-text__content { display: contents; }

.media-text--media-first .media-text__content > :not(h1, h2, :is(h1, h2) + .is-style-subtitle) { order: 2; }

.media-text__content > *,
.media-text__photo {
	max-width: var(--copy-column);
	margin-left: auto;
	margin-right: auto;
}

.media-text__photo {
	width: 100%;
	margin-top: 20px;
}

.media-text--media-first .media-text__photo {
	margin-top: 0;
	margin-bottom: 20px;
}

.media-text__photo img { border-radius: 20px; }

.media-text .wp-block-buttons { margin-top: 10px; }

/* In block flow the buttons' margin collapses with the paragraph's 20, so it carries the whole 30. */
.media-text--media-first .media-block .wp-block-buttons,
.media-text--columns:not(.media-text--media-first) .wp-block-buttons,
.media-text--text .wp-block-buttons { margin-top: 30px; }

.media-text--phone-center .media-text__content,
.media-text--text > .container { text-align: center; }

@media (min-width: 768px) {
	.media-text__content > :is(h1, h2),
	.media-text__content > :is(h1, h2) + .is-style-subtitle { text-align: left; }

	.media-text__columns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
		column-gap: 50px;
	}

	.media-text__content,
	.media-text--media-first .media-text__content { display: block; }

	.media-text__photo,
	.media-text--media-first .media-text__photo {
		order: -1;
		align-self: start;
		margin-top: 0;
		margin-bottom: 0;
	}

	.media-text--photo-right .media-text__photo { order: 0; }

	.media-text--split-narrow .media-text__columns { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); }

	.media-text--split-narrow.media-text--photo-right .media-text__columns { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); }

	.media-text--align-top .media-text__columns { align-items: start; }

	.media-text--phone-center .media-text__content { text-align: left; }

	/* A narrower photo leaves the copy's track wider than its cap: the copy keeps to the gap. */
	.media-text--split-narrow .media-text__content > * {
		margin-left: 0;
		margin-right: auto;
	}

	.media-text--split-narrow.media-text--photo-right .media-text__content > * {
		margin-left: auto;
		margin-right: 0;
	}
}

@media (min-width: 1024px) {
	.media-text--text .wp-block-buttons { margin-top: 40px; }

	.media-text--text .wp-block-button { max-width: none; }

	.media-text--columns .media-text__content .wp-block-buttons {
		justify-content: flex-start;
		margin-top: 40px;
	}

	.media-text--columns .wp-block-button { max-width: none; }
}

@media (min-width: 768px) {
	.hero--paragraphs h1 { text-align: left; }
}

@media (min-width: 768px) {
	.media-block > :is(h1, h2) { text-align: left; }

	.media-text--heading-above .media-block > :is(h1, h2):first-child { text-align: center; }

	.media-text .media-block .wp-block-buttons { margin-top: 40px; }

	.media-text .media-block .wp-block-button { max-width: none; }
}

/* home-S04 — We Ask */

/* The panel is navy whatever the section's ground, so a surface on it stays cream. */
.we-ask__panel {
	--color-surface: var(--color-cream);
	display: grid;
	row-gap: 30px;
	padding: 30px 20px;
	border-radius: 20px;
}

.tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 243px));
	justify-content: center;
	gap: 25px;
}

.tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 13px 20px;
	border-radius: 10px;
	background-image: var(--gradient-tile);
	box-shadow: var(--shadow-tile);
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 700;
}

.tile p { text-wrap: balance; }

@container page (min-width: 352px) {
	.tile { font-size: 18px; }
}

.tile img {
	width: 50px;
	margin-bottom: 4px;
}

@media (min-width: 768px) {
	.we-ask__panel {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
		column-gap: 50px;
	}
}

@media (min-width: 1024px) {
	.we-ask__panel {
		grid-template-columns: minmax(0, 1fr) 516px;
		align-items: center;
		gap: 50px;
		padding: 50px;
		border-radius: 40px;
	}

	.tiles { gap: 30px; }

	.tile {
		padding: 30px;
		border-radius: 20px;
		font-size: 22px;
		line-height: 1.27;
	}

	.tile img {
		width: 80px;
		margin-bottom: 15px;
	}
}

@media (min-width: 1410px) {
	.we-ask__panel {
		margin-left: -50px;
		margin-right: -50px;
	}
}

/* home-S04, home-S09, approach-S05, journey-S04, physicians-S05, conditions-S04, faq-S04, treatments-S05, each category page's S05 — CTA banner (the paragraph heading's desktop type is in the approach-S03 layer) */

.cta-banner {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: 20px;
}

.cta-banner__content { padding: 20px 20px 0; }

.cta-banner--dark .cta-banner__content { padding-top: 30px; }

.cta-banner h2 { font-size: 28px; }

.cta-banner--tagline p { display: none; }

/* The tagline, absent from the phone design, stays editable in a narrow canvas. */

.wp-block.cta-banner--tagline p { display: block; }

.cta-banner .wp-block-button { max-width: max-content; }

.cta-banner .wp-block-button__link { font-size: 15px; }

.cta-banner--light { background-color: var(--color-surface); }

.cta-banner--light .wp-block-button__link { --button-pad: 20px; }

/* Below 370 the light button's 20 px padding has no room for the symbol, so its hover shows none. */

@media (hover: hover) and (pointer: fine) {
	@container page (width < 370px) {
		.cta-banner--light .wp-block-button__link:hover {
			padding-left: var(--button-pad);
			padding-right: var(--button-pad);
		}

		.cta-banner--light .wp-block-button__link:hover::after {
			width: 0;
			margin-left: 0;
		}
	}
}

@container page (min-width: 342px) {
	.cta-banner--dark .wp-block-button__link { font-size: 18px; }
}

@container page (min-width: 350px) {
	.cta-banner--light .wp-block-button__link { font-size: 18px; }
}

@container page (min-width: 370px) {
	.cta-banner--light .wp-block-button__link { --button-pad: 30px; }
}

/* The photo fades into the card, whatever colour the card takes. */
.cta-banner--light .cta-banner__photo {
	margin-top: -30px;
	mask-image: var(--mask-banner-light);
}

.cta-banner--tagline .cta-banner__photo { margin-top: -10px; }

.cta-banner--paragraph .cta-banner__photo { margin-top: -100px; }

.cta-banner--wide .cta-banner__photo { margin-top: -150px; }

.cta-banner--clear .cta-banner__photo { margin-top: -20px; }

.cta-banner--long .cta-banner__photo { margin-top: -40px; }

.cta-banner--solid .cta-banner__photo { margin-top: 10px; }

/* −46.4% is the 160 px rise on the 345 px designed card: narrower, the rise scales with the photo, whose scrim stops are percentages. */
.cta-banner--broad .cta-banner__photo { margin-top: max(-160px, -46.4%); }

.cta-banner--tagline .cta-banner__photo::after { background-image: var(--gradient-banner-dark); }

.cta-banner--paragraph .cta-banner__photo::after { background-image: var(--gradient-banner-paragraph); }

.cta-banner--wide .cta-banner__photo::after { background-image: var(--gradient-banner-wide); }

.cta-banner--clear .cta-banner__photo::after { background-image: var(--gradient-banner-clear); }

.cta-banner--long .cta-banner__photo::after { background-image: var(--gradient-banner-long); }

.cta-banner--solid .cta-banner__photo::after { background-image: var(--gradient-banner-solid); }

.cta-banner--broad .cta-banner__photo::after { background-image: var(--gradient-banner-broad); }

/* The card clips the veil, so it overhangs every edge by a pixel: a fractional card edge cannot show a row of unveiled photo. */
.cta-banner__photo::after { inset: -1px; }

/* On phones each dark copy keeps its designed photo box and crops the desktop photo into it. */

.cta-banner--tagline .cta-banner__photo img { aspect-ratio: 1448 / 998; }

.cta-banner--paragraph .cta-banner__photo img { aspect-ratio: 846 / 724; }

.cta-banner--wide .cta-banner__photo img {
	aspect-ratio: 727 / 810;
	object-position: 66% 50%;
}

.cta-banner--clear .cta-banner__photo img {
	aspect-ratio: 952 / 612;
	object-position: 90% 50%;
}

.cta-banner--long .cta-banner__photo img {
	aspect-ratio: 1247 / 798;
	object-position: 26% 50%;
}

.cta-banner--solid .cta-banner__photo img {
	aspect-ratio: 608 / 461;
	object-position: 89% 50%;
}

.cta-banner--broad .cta-banner__photo img {
	aspect-ratio: 345 / 273;
	object-position: 97% 50%;
}

.cta-banner h2,
.cta-banner p {
	margin-left: auto;
	margin-right: auto;
}

.cta-banner--paragraph h2,
.cta-banner--paragraph p,
.cta-banner--solid h2,
.cta-banner--solid p { max-width: 608px; }

.cta-banner--wide h2,
.cta-banner--wide p { max-width: 690px; }

.cta-banner--clear h2,
.cta-banner--clear p { max-width: 660px; }

.cta-banner--broad h2,
.cta-banner--broad p { max-width: 755px; }

@media (min-width: 768px) {
	.cta-banner { grid-column: 1 / -1; }

	.cta-banner__content {
		min-width: 525px;
		max-width: 57%;
		padding: 50px;
	}

	.cta-banner--dark .cta-banner__content { padding-top: 50px; }

	.cta-banner--tagline .cta-banner__content { max-width: 54%; }

	.cta-banner--paragraph .cta-banner__content,
	.cta-banner--solid .cta-banner__content { max-width: 56%; }

	.cta-banner--solid .cta-banner__content { min-width: 565px; }

	.cta-banner--wide .cta-banner__content { max-width: 62%; }

	.cta-banner--clear .cta-banner__content { max-width: 60%; }

	.cta-banner--long .cta-banner__content { max-width: 70%; }

	.cta-banner--broad .cta-banner__content { max-width: 67%; }

	.cta-banner--light h2,
	.cta-banner--paragraph h2 { margin-bottom: 30px; }

	.cta-banner--tagline h2,
	.cta-banner--tagline p { max-width: 532px; }

	.cta-banner--long h2,
	.cta-banner--long p { max-width: 785px; }

	.cta-banner--tagline h2 { margin-bottom: 15px; }

	.cta-banner--tagline p { display: block; }

	.cta-banner--dark p { margin-bottom: 30px; }

	.cta-banner h2,
	.cta-banner p { margin-left: 0; }

	.cta-banner--light .wp-block-button__link { --button-pad: 36px; }

	.cta-banner__photo { width: 57%; }

	.cta-banner--wide .cta-banner__photo { width: 54%; }

	.cta-banner--clear .cta-banner__photo { width: 53%; }

	.cta-banner--long .cta-banner__photo { width: 59%; }

	.cta-banner--solid .cta-banner__photo { width: 76%; }

	.cta-banner--broad .cta-banner__photo { width: 52%; }

	.cta-banner .cta-banner__photo { margin-top: 0; }

	.cta-banner .cta-banner__photo img { object-position: center; }
}

@media (min-width: 1024px) {
	.cta-banner h2 {
		font-size: 34px;
		line-height: 1.31;
	}
}

/* home-S05 — Have You Been to Different Doctors */

.split-photo {
	position: relative;
	isolation: isolate;
}

.split-photo__photo img { aspect-ratio: 1122 / 1000; }

@media (min-width: 768px) {
	.split-photo__text { max-width: 66%; }

	.split-photo__text > h2 { margin-bottom: 30px; }

	.split-photo__photo {
		width: 42%;
		margin-top: 0;
		margin-bottom: 0;
	}

	.split-photo__photo img { border-radius: 0; }

	.split-photo__photo { mask-image: var(--mask-photo-fade); }
}

/* home-S06, treatments-S04, each category page's S04 — We Don't Treat a Diagnosis: the approaches and their card grid */

.cards {
	display: grid;
	gap: 20px;
	max-width: 397px;
	margin: 30px auto;
}

.approaches .wp-block-buttons { margin-top: 30px; }

.approaches .wp-block-button__link { font-size: 15px; }

@container page (min-width: 324px) {
	.approaches .wp-block-button__link { font-size: 18px; }
}

.card {
	display: grid;
	grid-template-rows: minmax(80px, 1fr) auto;
	aspect-ratio: 61 / 45;
	isolation: isolate;
	overflow: hidden;
	border-radius: 20px;
}

.card__photo {
	grid-row: 1 / -1;
	grid-column: 1;
}

.card__photo::after { background-image: var(--gradient-card); }

.card__body {
	grid-row: 2;
	grid-column: 1;
	padding: 0 15px 20px;
}

.card h3 {
	margin-bottom: 5px;
	font-size: 28px;
	font-weight: 600;
}

@media (min-width: 768px) {
	.cards {
		grid-template-columns: repeat(2, minmax(0, 397px));
		justify-content: center;
		gap: 30px;
		max-width: none;
	}
}

@container page (min-width: 993px) {
	.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.card h3 { font-size: 24px; }

	.card:not(.card--category) .card__body p { font-size: 16px; }
}

@container page (min-width: 1128px) {
	.card h3 { font-size: 28px; }

	.card:not(.card--category) .card__body p { font-size: inherit; }
}

@media (min-width: 1280px) {
	.card__body { padding: 0 20px 24px; }

	.card h3 { font-size: 32px; }
}

/* treatments-S04, each category page's S04 — Category cards: a link to each category page in the approaches grid; hovered, the title rises over its label */

.approaches--category > .container > p { max-width: 705px; }

/* Clip, not hidden: as a scroll container the card would scroll to its hanging label. */
.card--category {
	--hover-fill: var(--gradient-category-hover);
	position: relative;
	grid-template-rows: 1fr auto;
	min-height: 220px;
	aspect-ratio: auto;
	overflow: clip;
	padding: 20px;
	background-image: var(--gradient-category);
}

/* The label hangs below the card's edge until the card is hovered. */
.card--category .card__body {
	margin-bottom: -40px;
	padding: 0;
}

.card--category h3 {
	max-width: 305px;
	margin-bottom: 10px;
	font-size: 20px;
	font-weight: 700;
}

@container page (min-width: 365px) {
	.card--category h3 { font-size: 24px; }
}

@container page (min-width: 874px) {
	.approaches--category .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.card--category h3 { font-size: 18px; }
}

@container page (min-width: 1128px) {
	.card--category h3 { font-size: 24px; }
}

.card--category h3 a { text-decoration: none; }

.card--category h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.card--category .card__body > p {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--color-brass-light);
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.67;
	text-transform: uppercase;
	text-wrap: balance;
	opacity: 0;
}

.card--category .card__body > p::after {
	content: "";
	width: 30px;
	height: 30px;
	background-color: currentColor;
	mask-image: url('../images/treatments-s04-icon-arrow.svg');
}

.card--category:has(a:focus-visible) .card__body { margin-bottom: 0; }

.card--category:has(a:focus-visible)::before,
.card--category:has(a:focus-visible) .card__body > p { opacity: 1; }

/* Only a card that links reveals its label: the current page's card has no link. */
@media (hover: hover) and (pointer: fine) {
	.card--category:has(a[href]):hover .card__body { margin-bottom: 0; }

	.card--category:has(a[href]):hover::before,
	.card--category:has(a[href]):hover .card__body > p { opacity: 1; }
}

/* home-S07 — Two Brilliant Minds */

.physicians__card {
	display: grid;
	max-width: 404px;
	margin: 30px auto;
	padding: 30px 20px;
	border-radius: 20px;
	background-image: var(--gradient-doctors);
}

.physicians__photo { grid-row: 2; }

.doctor h3 {
	margin-bottom: 10px;
	color: var(--color-brass-light);
	font-family: 'Allura', cursive;
	font-size: 34px;
	font-weight: 400;
}

.physicians .wp-block-buttons { margin-top: 30px; }

@media (min-width: 768px) {
	/* The photo is placed, so the bios fill the other column in order: beside it here, around it from 1024. */
	.physicians__card {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		max-width: none;
		align-items: start;
		gap: 30px 50px;
		padding: 30px;
	}

	.physicians__photo {
		grid-row: 1 / span 2;
		grid-column: 1;
		margin-top: 0;
		margin-bottom: 0;
	}
}

@media (min-width: 1024px) {
	.physicians .wp-block-buttons { margin-top: 50px; }

	.physicians__card { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.physicians__photo {
		grid-row: 1;
		grid-column: 2;
	}

	.doctor p { font-size: 16px; }
}

@media (min-width: 1280px) {
	.physicians__card { grid-template-columns: minmax(0, 1fr) 364px minmax(0, 1fr); }

	.doctor p { font-size: inherit; }
}

/* approach-S03, journey-S03, physicians-S03, conditions-S03, contact-S04, treatments-S03, each category page's S03 — Split cards: a photo beside a column, alternating */

/* Each card gradient's stops are set for the background size beside it; change the two together. */
.split-card {
	--split-card-gap: 20px;
	display: flex;
	flex-direction: column;
	max-width: 605px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	padding: 30px 20px;
	border-radius: 20px;
	background-image: var(--gradient-split-card);
	background-size: 164% 100%;
	counter-increment: split-card;
}

.split-card-list { counter-reset: split-card; }

.split-card--principle,
.split-card--profile,
.split-card--feature { --split-card-gap: 30px; }

.split-card--step { max-width: 740px; }

.split-card--panel,
.split-card--feature { max-width: 575px; }

.split-card--step,
.split-card--panel {
	background-image: var(--gradient-step);
	background-size: 100% 132%;
}

.split-card--treatment {
	max-width: 664px;
	padding: 20px 15px;
	background: var(--color-surface);
}

.split-card--profile,
.split-card--treatment { margin-bottom: 30px; }

/* Order on phones: the header above the row, then the photo and the text, then any closing note. */
.split-card__photo { margin-bottom: var(--split-card-gap); }

.split-card__text { order: 1; }

.split-card--copy-first .split-card__photo {
	order: 2;
	margin-top: var(--split-card-gap);
	margin-bottom: 0;
}

.split-card > .is-style-closing {
	order: 3;
	margin-top: 20px;
}

.split-card__photo img,
.split-card__photo--empty { border-radius: 10px; }

.split-card__photo--empty {
	aspect-ratio: 15 / 16;
	background-color: var(--color-placeholder);
}

/* Stacked, a wide or portrait photo keeps its designed box and crops the photo into it. The boxes
   end below 961, where the photo starts filling its column: a query that cancelled them from 961 would also cancel
   the ratio the photo's width and height reserve before it loads. */

@media (width < 961px) {

	.split-card--phone-wide .split-card__photo img {
		aspect-ratio: 1502 / 760;
		object-fit: cover;
	}

	.split-card--phone-portrait .split-card__photo img {
		aspect-ratio: 1122 / 1370;
		object-fit: cover;
	}
}

.split-card__photo--focus-top img { object-position: 50% 0; }

.split-card__photo--focus-bottom img { object-position: 50% 100%; }

/* :where() keeps these two rules under the page-wide last-child reset. */
.split-card__text:where(:has(> .split-card__icon)) {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
}

.split-card--principle .split-card__text { column-gap: 15px; }

.split-card--step .split-card__text { column-gap: 10px; }

.split-card__icon { width: 60px; }

.split-card--panel > h2,
.split-card__text > :is(h2, h3) { font-size: 28px; }

.split-card--principle .split-card__icon,
.split-card--principle h3 { margin-bottom: 20px; }

.split-card__text:where(:has(> .split-card__icon)) p {
	grid-column: 1 / -1;
	margin-bottom: 28px;
}

.split-card--step .split-card__icon { margin-bottom: 10px; }

/* A label (a Subtitle line above the heading) shares the icon's row; the heading spans the row below. */
.split-card__text:where(:has(> .split-card__icon)) > .is-style-subtitle:has(+ :is(h2, h3)) { grid-column: auto; }

.split-card__text:where(:has(> .split-card__icon)) > .is-style-subtitle + :is(h2, h3) { grid-column: 1 / -1; }

.split-card--principle .is-style-subtitle { margin-bottom: 20px; }

.split-card--step .is-style-subtitle {
	grid-column: auto;
	margin-bottom: 10px;
}

.split-card--step h3 {
	grid-column: 1 / -1;
	margin-bottom: 15px;
}

/* Numbered cards: the label, a Subtitle line above the heading, opens with the card's number. */
.split-card--numbered .split-card__text > .is-style-subtitle:has(+ :is(h2, h3))::before { content: "Step " counter(split-card) ": "; }

.split-card--profile h2 { margin-bottom: 6px; }

.split-card--profile p { margin-bottom: 15px; }

.split-card--profile .is-style-alias { margin-bottom: 6px; }

.split-card--profile .is-style-subtitle { margin-bottom: 20px; }

.split-card--panel > .is-style-subtitle { margin-bottom: 5px; }

.split-card--panel > h2 { margin-bottom: 15px; }

:is(.split-card--panel, .split-card--feature) .split-card__text {
	display: grid;
	row-gap: 20px;
}

.split-card__quote {
	position: absolute;
	right: 15px;
	bottom: 15px;
	left: 15px;
	padding: 10px;
	border-radius: 10px;
	background-image: var(--gradient-quote);
	box-shadow: var(--shadow-quote);
	font-size: 14px;
	font-style: italic;
	line-height: 1.43;
}

/* A wide phone crop is too short to carry the quote over its foot, so the quote follows it. */
.split-card--phone-wide .split-card__photo:not(.split-card__photo--empty) > .split-card__quote {
	position: static;
	margin-top: 15px;
}

@media (min-width: 768px) {
	.split-card {
		display: grid;
		grid-template-columns: var(--tracks);
		column-gap: 50px;
		max-width: none;
		margin-bottom: 30px;
		padding: 50px;
	}

	/* Until the photo fills its column, it keeps its own box and the text takes the larger share. */
	.split-card:not(.split-card--split-narrow) {
		--tracks: minmax(0, 9fr) minmax(0, 11fr);
		--tracks-mirror: minmax(0, 11fr) minmax(0, 9fr);
	}

	.split-card:not(.split-card--photo-own) { align-items: start; }

	.split-card__photo,
	.split-card--copy-first .split-card__photo {
		margin-top: 0;
		margin-bottom: 0;
	}

	.split-card--principle {
		background-image: var(--gradient-principle);
		background-size: auto;
	}

	.split-card--photo-own { align-items: start; }

	.split-card--photo-own.split-card--align-center { align-items: center; }

	.split-card--profile,
	.split-card--panel,
	.split-card--feature,
	.split-card--treatment { border-radius: 40px; }

	/* The profile's paint follows its photo's side: the mirror set below picks the pair. */
	.split-card--profile {
		--paint: var(--gradient-profile);
		--paint-size: 100% 134%;
		--paint-mirror: var(--gradient-profile-even);
		--paint-mirror-size: 100% 179%;
		background-image: var(--card-paint, var(--paint));
		background-size: var(--card-paint-size, var(--paint-size));
	}

	.split-card--panel,
	.split-card--feature { margin-bottom: 50px; }

	.split-card > :is(h2, h3, p) { grid-column: 1 / -1; }

	.split-card--panel > :is(h2, p) { text-align: center; }

	:is(.split-card--panel, .split-card--feature) > :is(.split-card__photo, .split-card__text) { margin-top: 30px; }

	/* Reordered below the row, so its spacing is its own: DOM position no longer says where it shows. */
	.split-card > .is-style-closing {
		margin-top: 30px;
		margin-bottom: 0;
	}

	.split-card > .is-style-closing ~ .is-style-closing { margin-top: 20px; }

	.split-card--feature {
		background-image: var(--gradient-step);
		background-size: 100% 132%;
	}

	.split-card--feature > h2 { margin-bottom: 20px; }

	/* Photo side: the header and the photo share order 0, so the header (earlier in the content) stays first.
	   One mirror set places the photo on the right; each style sets the tracks and paint it swaps. */
	.split-card > .split-card__photo { order: var(--photo-order, 0); }

	.split-card:nth-child(even),
	.split-card--first-right:nth-child(odd),
	.split-card--photo-right {
		--photo-order: 2;
		--card-paint: var(--paint-mirror);
		--card-paint-size: var(--paint-mirror-size);
		grid-template-columns: var(--tracks-mirror);
	}

	.split-card--first-right:nth-child(even),
	.split-card--photo-left:nth-child(n) {
		--photo-order: 0;
		--card-paint: var(--paint);
		--card-paint-size: var(--paint-size);
		grid-template-columns: var(--tracks);
	}

	.split-card--split-narrow {
		--tracks: minmax(0, 3fr) minmax(0, 5fr);
		--tracks-mirror: minmax(0, 5fr) minmax(0, 3fr);
	}

	.split-card__photo img,
	.split-card__photo--empty { border-radius: 20px; }

	/* The heading row is 1fr so the icon's extra height falls below the label, not above it. */
	.split-card--step .split-card__text {
		grid-template-rows: auto 1fr;
		column-gap: 15px;
	}

	.split-card--step .split-card__icon {
		grid-row: span 2;
		margin-bottom: 15px;
	}

	.split-card--step .is-style-subtitle { margin-bottom: 0; }

	.split-card--step .split-card__text > h3 {
		grid-column: 2;
		align-self: start;
		font-size: 24px;
	}
}

@media (min-width: 961px) {
	.split-card:not(.split-card--split-narrow) {
		--tracks: repeat(2, minmax(0, 1fr));
		--tracks-mirror: var(--tracks);
	}

	.split-card:not(.split-card--photo-own) { align-items: normal; }

	/* The photo (out of flow) and an empty slot take the text's height instead of adding their own. */
	.split-card--feature:not(.split-card--photo-own) .split-card__photo { position: relative; }

	.split-card--feature:not(.split-card--photo-own) .split-card__photo img { position: absolute; }

	.split-card--feature:not(.split-card--photo-own) .split-card__photo--empty { aspect-ratio: auto; }

	.split-card--phone-wide .split-card__photo:not(.split-card__photo--empty) > .split-card__quote {
		position: absolute;
		margin-top: 0;
	}

	.split-card__photo img {
		height: 100%;
		object-fit: cover;
	}

	.split-card__photo > picture { height: 100%; }

	.split-card:not(.split-card--photo-own) > .split-card__photo--empty { place-self: stretch; }

	.split-card--step .split-card__text > h3 { font-size: 28px; }
}

@media (min-width: 1024px) {
	.split-card__icon { width: 70px; }

	.split-card--profile h2,
	.split-card--panel > h2 {
		font-size: 34px;
		line-height: 1.31;
	}

	:is(.split-card--panel, .split-card--feature) .split-card__text { row-gap: 30px; }

	.split-card__quote {
		right: 30px;
		bottom: 30px;
		left: 30px;
		padding: 20px;
		border-radius: 20px;
		font-size: 16px;
		line-height: 1.63;
	}
}

/* treatments-S03, each category page's S03 — Treatment cards: a light card, its header above a photo with a badge beside an accordion */

.split-cards--treatment > .container > p { max-width: 1015px; }

.split-card--treatment > :is(h3, p) { text-align: center; }

.split-card--treatment > p { max-width: 1060px; }

.split-card--treatment > h3 {
	margin-bottom: 10px;
	font-size: 24px;
}

@container page (min-width: 352px) {
	.split-card--treatment > h3 { font-size: 28px; }
}

.split-card__badge {
	position: absolute;
	top: 20px;
	right: 10px;
	left: 20px;
	width: fit-content;
	padding: 4px 8px;
	border-radius: 4px;
	background-image: var(--gradient-badge);
	color: var(--color-white);
	font-size: 16px;
	font-style: italic;
	line-height: 1.63;
}

.split-card__badge > p { text-wrap: balance; }

@media (min-width: 768px) {
	.split-card--treatment {
		margin-bottom: 40px;
		padding: 40px;
	}

	.split-card--treatment.split-card--split-narrow {
		--tracks: minmax(0, 9fr) minmax(0, 11fr);
		--tracks-mirror: minmax(0, 11fr) minmax(0, 9fr);
	}

	.split-card--treatment > :is(h3, p) { text-align: left; }

	/* The accordion's top holds under every Align value: opening a question never moves the others. */
	.split-card--treatment > .split-card__text { align-self: start; }

	.split-card--treatment > p { margin-bottom: 40px; }

	.split-card__badge {
		top: 30px;
		left: 30px;
	}
}

@media (min-width: 1024px) {
	.split-cards--treatment {
		padding-top: 60px;
		padding-bottom: 60px;
	}
}

/* conditions-S03, contact-S04 — Inset cards: a heading over a list or copy, in a split card's text column */

.inset-card {
	border-radius: 10px;
	box-shadow: var(--shadow-inset-card);
}

.inset-card :is(p, ul, ol) { margin-bottom: 15px; }

.inset-card--panel { padding: 15px; }

.inset-card--panel h3 {
	margin-bottom: 15px;
	font-size: 24px;
	text-transform: capitalize;
}

.inset-card--feature { padding: 30px 20px; }

.inset-card--feature h3 {
	margin-bottom: 20px;
	text-align: center;
}

@media (min-width: 1024px) {
	.inset-card {
		padding: 30px;
		border-radius: 20px;
	}

	.inset-card--panel h3 { font-size: 28px; }

	.inset-card--panel :is(p, ul, ol) { margin-bottom: 10px; }
}

@media (min-width: 768px) {
	.inset-card--feature h3 { text-align: left; }
}

/* faq-S03 — FAQ: question topics as tabs, each over questions that open in place */

.faq-topics {
	max-width: 1065px;
	margin-left: auto;
	margin-right: auto;
}

.faq-tabs {
	display: flex;
	justify-content: space-between;
	column-gap: 20px;
	margin-right: calc(-1 * var(--gutter));
	padding-right: var(--gutter);
	overflow-x: auto;
	scroll-padding-right: var(--gutter);
	scrollbar-width: none;
}

/* The canvas label shares the strip's gap. */

.faq-tabs,
.wp-block.faq-topic > .faq-tabs__tab { margin-bottom: 20px; }

.wp-block.faq-topic > .faq-tabs__tab { width: fit-content; }

.faq-tabs__tab {
	padding: 10px 20px;
	border-radius: 10px;
	background-color: var(--color-surface);
	color: var(--color-navy);
	font-size: 16px;
	line-height: 1.63;
	white-space: nowrap;
}

@container page (min-width: 974px) {
	.faq-tabs__tab { font-size: 14px; }
}

@container page (min-width: 1078px) {
	.faq-tabs__tab { font-size: 16px; }
}

.faq-tabs__tab:hover { background-color: var(--color-mist); }

/* The gradient's stops are set for the background size beside it; change the two together. The
   gradient runs from navy to brass, so the focus outline is white: no brass shows on both. */

.faq-tabs__tab[aria-selected="true"] {
	--color-focus: var(--color-white);
	background-image: var(--gradient-tab);
	background-size: 100% 328%;
	color: var(--color-white);
}

/* The strip clips its overflow, so the focus ring sits inside the tab. */

.faq-tabs__tab:focus-visible { outline-offset: -4px; }

.faq-item {
	margin-bottom: 10px;
	border-radius: 10px;
	background-color: var(--color-surface);
}

.faq-item > h3 {
	font-size: 16px;
	line-height: 1.5;
}

.faq-item__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	text-align: left;
}

/* The canvas item shares the trigger's padding. */

.faq-item__trigger,
.wp-block.faq-item { padding: 15px; }

.faq-item__trigger::after {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
}

.faq-item__trigger[aria-expanded="true"] { color: var(--color-brass); }

.faq-item__trigger[aria-expanded="true"]::after { rotate: none; }

/* The padding sits on the row, so it closes with it. */

.faq-item__panel {
	display: grid;
	grid-template-rows: 0fr;
	padding-right: 15px;
	padding-left: 15px;
}

.faq-item__answer {
	overflow: hidden;
	visibility: hidden;
}

.faq-item:has([aria-expanded="true"]) > .faq-item__panel {
	grid-template-rows: 1fr;
	padding-top: 5px;
	padding-bottom: 15px;
}

.faq-item:has([aria-expanded="true"]) .faq-item__answer { visibility: visible; }

.faq-item .wp-block-list:not(.is-style-terms) { padding-bottom: 0; }

.faq-item .wp-block-list:not(.is-style-terms) li { margin-bottom: 0; }

@media (min-width: 1024px) {
	.faq-tabs,
	.wp-block.faq-topic > .faq-tabs__tab { margin-bottom: 50px; }

	.faq-item { margin-bottom: 15px; }

	.faq-item > h3 {
		font-size: 20px;
		line-height: 1.4;
	}
}

/* treatments-S03, each category page's S03 — Accordion: a treatment card's questions, lined, one open at a time */

.faq-item--line {
	margin-bottom: 0;
	padding: 20px 0;
	border-bottom: 1px solid var(--color-divider);
	border-radius: 0;
	background: none;
}

.faq-item--line > h3 {
	font-size: 20px;
	text-transform: capitalize;
}

.faq-item--line .faq-item__trigger { padding: 0; }

.faq-item--line > .faq-item__panel {
	padding-left: 0;
	padding-right: 0;
}

.faq-item--line .faq-item__trigger::after {
	width: 24px;
	height: 24px;
	mask-image: url('../images/treatments-s03-icon-chevron.svg');
}

.faq-item--line .faq-item__trigger[aria-expanded="true"] { color: inherit; }

.faq-item--line:has([aria-expanded="true"]) > .faq-item__panel {
	padding-top: 10px;
	padding-bottom: 0;
}

/* Always open: the answer shows under its heading, with no trigger. */

.faq-item--open > .faq-item__answer {
	padding-top: 10px;
	visibility: visible;
}

/* The canvas item takes the row's padding, which the FAQ's canvas rule would replace. */

.wp-block.faq-item--line { padding: 20px 0; }

.faq-item--line:first-child,
.wp-block.faq-item--line:first-child { padding-top: 0; }

@media (min-width: 1024px) {
	.faq-item--line > h3 {
		font-size: 24px;
		line-height: 1.58;
	}
}

/* contact-S03 — Contact information: the location, its map and the contact details beside the form card */

.location,
.contact-details,
.form-card {
	margin-left: auto;
	margin-right: auto;
}

.location {
	max-width: 625px;
	margin-bottom: 20px;
}

.location h3 {
	margin-bottom: 8px;
	font-size: 24px;
	line-height: 1.42;
}

.location p { margin-bottom: 10px; }

.location__map img {
	border-radius: 20px;
	object-fit: cover;
}

/* Stacked, the map keeps its designed box and crops into it. The box ends below 768, where the
   map takes its own proportions: a query that cancelled it from 768 would also cancel the ratio
   the map's width and height reserve before it loads. */

@media (width < 768px) {
	.location__map img { aspect-ratio: 2; }
}

.contact-details {
	display: grid;
	row-gap: 20px;
	max-width: 565px;
	margin-bottom: 30px;
}

.contact-detail {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	align-items: center;
	column-gap: 10px;
}

/* A shadow, not a border: a border snaps to whole device pixels and would resize the glyph inside. */
.contact-detail__icon {
	padding: 7px;
	border-radius: 50%;
	background-color: var(--color-white);
	box-shadow: var(--shadow-detail-ring);
}

.contact-detail h3 {
	font-size: 20px;
	line-height: 1.4;
}

.contact-detail p {
	grid-column: 1 / -1;
	margin-top: 5px;
	font-size: 16px;
	line-height: 1.5;
}

.contact-details,
.form-card { border-radius: 20px; }

.form-card {
	max-width: 605px;
	padding: 20px;
	background-color: var(--color-surface);
	text-align: center;
}

.form-card h3 {
	margin-bottom: 15px;
	font-size: 28px;
}

/* The contact form, a Ninja Forms form (L1). The plugin writes the markup and its structure
   sheet loads after this one, so each rule names the card to outrank it. The labels stay
   in the markup, hidden, and name each field; the required note has no visible label to
   explain, and each field carries aria-required. */

.form-card .nf-form-cont {
	margin-top: 30px;
	text-align: left;
}

.form-card .nf-form-fields-required { display: none; }

.form-card nf-fields-wrap {
	display: grid;
	row-gap: 15px;
}

.form-card .nf-field-container { margin-bottom: 0; }

/* The plugin's empty character-count line under every field carries a 5 px top margin. */
.form-card .nf-input-limit { margin-top: 0; }

.form-card .submit-container { margin-top: 29px; }

/* The 1.5 px border is a shadow: a border snaps to whole device pixels and would change the
   field's height with the screen. */
.form-card .ninja-forms-field:not([type="submit"], [type="checkbox"]) {
	--field-ring: var(--color-light-grey);
	width: 100%;
	padding: 13px 15px 13px 43px;
	border: 0;
	border-radius: 100px;
	box-shadow: inset 0 0 0 1.5px var(--field-ring);
	background-color: var(--color-white);
	color: var(--color-navy);
	font: 16px / 26px var(--font-body);
}

.form-card .textarea-container .ninja-forms-field {
	display: block;
	height: 130px;
	padding-left: 15px;
	border-radius: 20px;
	resize: vertical;
}

.form-card .ninja-forms-field::placeholder {
	color: var(--color-mid-grey);
	opacity: 1;
}

/* The navy ring is the designed focus state. */
.form-card .ninja-forms-field:not([type="submit"], [type="checkbox"]):focus {
	--field-ring: var(--color-navy);
	outline: none;
}

.form-card .ninja-forms-field[aria-invalid="true"] {
	--field-ring: var(--color-error);
	padding-right: 39px;
}

/* Each field's icon is a mask, so it can take the field's state: grey until the field is
   focused or filled, navy after. */
.form-card :is(.firstname-container, .lastname-container, .email-container, .phone-container) .nf-field-element::before {
	content: "";
	position: absolute;
	top: 16px;
	left: 15px;
	width: 20px;
	height: 20px;
	background-color: var(--color-mid-grey);
	mask: var(--field-icon) center / contain no-repeat;
	pointer-events: none;
}

.form-card .firstname-container { --field-icon: url('../images/icon-field-user.svg'); }

.form-card .lastname-container { --field-icon: url('../images/icon-field-name.svg'); }

.form-card .email-container { --field-icon: url('../images/icon-field-mail.svg'); }

.form-card .phone-container { --field-icon: url('../images/icon-field-phone.svg'); }

.form-card .nf-field-element:is(:focus-within, :has(.ninja-forms-field:not(:placeholder-shown)))::before { background-color: var(--color-navy); }

.form-card .nf-field-element:has(> [aria-invalid="true"]:not([type="checkbox"]))::after {
	content: "";
	position: absolute;
	top: 18px;
	right: 15px;
	width: 16px;
	height: 16px;
	background: url('../images/icon-field-error.svg') center / contain no-repeat;
	pointer-events: none;
}

/* The design shows the error only as the red border and its icon; the message says what to
   fix, for a screen reader and for anyone who cannot tell the red apart. */
.form-card .nf-error-msg {
	margin-top: 6px;
	color: var(--color-error);
	font-size: 14px;
	line-height: 1.43;
}

.form-card .nf-form-errors .nf-error-msg { margin-top: 15px; }

/* The privacy checkbox. The box draws itself, so the text fields' rules skip it; the plugin's
   row puts the label beside it. */
.form-card .checkbox-wrap {
	align-items: flex-start;
	column-gap: 8px;
}

.form-card .label-right .checkbox-wrap .nf-field-element { width: auto; }

.form-card .checkbox-wrap .nf-field-label {
	display: block;
	padding-left: 0;
	font-size: 16px;
	line-height: 1.5;
}

.form-card .checkbox-wrap label { font-weight: 400; }

.form-card .checkbox-wrap .ninja-forms-req-symbol { display: none; }

/* The top margin centres the box on the label's first 24 px line. */
.form-card .checkbox-wrap .ninja-forms-field {
	display: block;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	padding: 0;
	border: 1px solid var(--color-slate);
	border-radius: 3px;
	background-color: var(--color-white);
	appearance: none;
	cursor: pointer;
}

/* The plugin marks a failing checkbox's row with nf-fail; the box takes no aria-invalid. */
.form-card .checkbox-wrap.nf-fail .ninja-forms-field { border-color: var(--color-error); }

.form-card .checkbox-wrap .ninja-forms-field:checked {
	border-color: var(--color-navy);
	background: var(--color-navy) url('../images/icon-field-check.svg') center / 12px no-repeat;
}

/* An input draws no pseudo-element, so the hover fill slides: the gradient runs brass to light
   and back, and the hover shows its second half. */
.form-card .ninja-forms-field[type="submit"] {
	width: 100%;
	padding: 12px 36px;
	border: 0;
	border-radius: 10px;
	background-image: var(--gradient-button-slide);
	background-size: 200% 100%;
	color: var(--color-white);
	font: 700 18px / 30px var(--font-heading);
	text-transform: uppercase;
	cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
	.form-card .ninja-forms-field[type="submit"]:hover { background-position: 100% 0; }
}

.form-card .nf-response-msg {
	color: var(--color-heading);
	font-weight: 600;
	text-align: center;
}

.form-card .nf-response-msg p { margin-bottom: 0; }

@media (min-width: 768px) {
	.contact-info__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto auto 1fr;
		column-gap: 30px;
	}

	.contact-info__grid > h2 { grid-column: 1 / -1; }

	.location,
	.contact-details,
	.form-card {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}

	.contact-details,
	.form-card { padding: 30px; }

	.contact-details {
		align-self: start;
		margin-bottom: 0;
		background-color: var(--color-surface);
	}

	.form-card {
		grid-column: 2;
		grid-row: 2 / span 2;
	}
}

@media (min-width: 1024px) {
	.contact-detail h3 { line-height: 1.5; }

	.contact-detail p { font-family: var(--font-heading); }
}

/* not-found-S02 — 404: the numeral behind the copy, one grid cell for both */

.not-found__body {
	display: grid;
	justify-items: center;
	container-type: inline-size;
}

.not-found__code,
.not-found__copy { grid-area: 1 / 1; }

/* 55cqi follows the numeral face's advance: recompute it if the font changes. */

.not-found__code {
	margin-top: 13px;
	color: var(--color-navy);
	opacity: 0.05;
	font-family: var(--font-heading);
	font-size: min(55cqi, 0.55 * var(--lead-column));
	line-height: 0.78;
}

.not-found__copy { max-width: var(--lead-column); }

.not-found p { margin-bottom: 30px; }

.not-found .wp-block-buttons { gap: 20px 32px; }

@media (min-width: 1024px) {
	.not-found__body { align-items: center; }

	.not-found__code {
		margin-top: 0;
		font-size: min(55cqi, 603px);
	}

	.not-found h1 { margin-bottom: 10px; }

	.not-found p { margin-bottom: 48px; }
}

/* Text page template — the page's own heading, paragraph and list blocks in one column */

.text-page__body { max-width: calc(750px + 2 * var(--gutter)); }

/* The canvas root holds the same blocks; there this also replaces core's flow-layout gap,
   24 px above each block and none below. */

:is(.text-page__body, .is-root-container) > :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {
	margin-top: 0;
	margin-bottom: 20px;
}

/* home-S10 — Footer */

/* The design rings the footer's icons in the light brass and the phone menu's in the brass. */
.site-footer {
	--shadow-ring: var(--shadow-brass-light-ring);
	padding-top: var(--section-pad);
}

.site-footer__columns {
	display: flex;
	flex-direction: column;
	row-gap: 30px;
	max-width: 320px;
	margin-bottom: var(--section-pad);
}

.site-footer h2 {
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.56;
}

.site-footer a { text-decoration: none; }

.site-footer__menu a:hover { color: var(--color-brass-light); }

.site-footer__brand { max-width: 300px; }

.site-footer__logo {
	display: block;
	margin-bottom: 30px;
}

.site-footer__menu li {
	margin-bottom: 12px;
	text-wrap: balance;
}

.site-footer__hours { width: 250px; }

.hours { margin-bottom: 30px; }

.hours li {
	display: flex;
	justify-content: space-between;
	margin-bottom: 12px;
	text-wrap: balance;
}

.social li { margin-bottom: 12px; }

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 20px;
}

/* The bar runs from brass to navy, so the focus outline is white: no brass shows on both ends. */
.site-footer__copyright {
	--color-focus: var(--color-white);
	padding: 15px 0;
	background-image: var(--gradient-copyright);
}

.site-footer__copyright > .container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.site-footer__legal a { text-decoration: underline; }

.site-footer__contact {
	font-size: 14px;
	line-height: 1.43;
}

@container page (min-width: 350px) {
	.site-footer__contact {
		font-size: inherit;
		line-height: inherit;
	}
}

@container page (min-width: 509px) {
	.site-footer__copyright > .container {
		flex-direction: row;
		justify-content: space-between;
		column-gap: 20px;
	}
}

@media (min-width: 768px) {
	.site-footer__columns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 30px;
		max-width: none;
	}
}

@container page (min-width: 1185px) {
	.site-footer__columns {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.site-footer__nav { width: 195px; }
}

/* After the components: each component's own heading margin ties this on specificity. */

:is(h1, h2, h3):has(+ .is-style-subtitle) { margin-bottom: 6px; }

/* The design's "[H3] Manrope 32" style. The 1024 list follows the banner and contact layers, whose
   `.cta-banner h2` and `.form-card h3` tie it on specificity. */

.inset-card--feature h3,
.split-cards--treatment > .container > h2 {
	font-size: 32px;
	line-height: 1.38;
}

@media (min-width: 1024px) {
	.cta-banner--paragraph h2,
	.cta-banner--solid h2,
	.split-card--principle h3,
	.split-card--treatment > h3,
	.form-card h3 {
		font-size: 32px;
		line-height: 1.38;
	}
}

/* Opt-in, so reduced motion is the default: a reduced-motion user gets each
   state change instantly. */

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
	a { transition: color 0.3s ease; }
	.wp-block-button__link { transition: padding 0.3s ease-out; }
	.wp-block-button__link::after { transition: width 0.3s ease-out, margin-left 0.3s ease-out; }
	.not-found__outline > .wp-block-button__link { transition: padding 0.3s ease-out, color 0.3s ease, box-shadow 0.3s ease; }
	.icon-circle { transition: box-shadow 0.3s ease; }
	.not-found__outline > .wp-block-button__link::before,
	.icon-circle::before,
	.site-header__cta::before { transition: opacity 0.3s ease; }
	.site-nav__toggle { transition: color 0.3s ease; }
	.site-nav__submenu a { transition: background-color 0.3s ease; }
	.faq-tabs__tab { transition: background-color 0.3s ease; }
	.faq-item__panel { transition: grid-template-rows 0.3s ease, padding 0.3s ease; }
	.faq-item__answer { transition: visibility 0.3s; }
	.card--category .card__body { transition: margin-bottom 0.3s ease-out; }
	.card--category::before,
	.card--category .card__body > p { transition: opacity 0.3s ease-out; }
	.form-card .ninja-forms-field { transition: box-shadow 0.3s ease, background-position 0.3s ease; }
	.form-card .nf-field-element::before { transition: background-color 0.3s ease; }
}

/* Utilities */

.txt--left { text-align: left; }
.txt--center { text-align: center; }
.txt--right { text-align: right; }

.txt--uppercase { text-transform: uppercase; }
.txt--lowercase { text-transform: lowercase; }
.txt--capitalize { text-transform: capitalize; }

.txt--white { color: var(--color-white); }
.txt--navy { color: var(--color-navy); }
.txt--body { color: var(--color-body); }
.txt--brass { color: var(--color-brass); }
.txt--brass-light { color: var(--color-brass-light); }
.txt--muted { color: var(--color-muted); }
.txt--lead { color: var(--color-lead); }

.bg--white { background-color: var(--color-white); }
.bg--navy { background-color: var(--color-navy); }
.bg--cream { background-color: var(--color-cream); }
.bg--light-grey { background-color: var(--color-light-grey); }
.bg--mist { background-color: var(--color-mist); }
.bg--fade { background-image: var(--gradient-section-fade); }

.fw--regular { font-weight: 400; }
.fw--medium { font-weight: 500; }
.fw--semibold { font-weight: 600; }
.fw--bold { font-weight: 700; }

.p--relative { position: relative; }
.overflow--hidden { overflow: hidden; }
.mb--none { margin-bottom: 0; }

.mx--auto {
	margin-left: auto;
	margin-right: auto;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Sits after the components and the utilities to win the source-order tie, and is
   scoped to text and lists (core's lists and the card grid by their class: a bare ul is
   often a component root) so a component's own closing space survives. */

p:last-child,
li:last-child,
:is(h1, h2, h3, h4, h5, h6):last-child,
.wp-block-list:last-child,
.cards:last-child { margin-bottom: 0; }