/*
 * Theme glue. Everything here is Restore-specific and additive — assets/css/styles.css
 * stays byte-identical to the Avenir export so it remains diffable against it.
 */

/* ---- Brand tokens -------------------------------------------------------- */

/*
 * Restore's palette, overriding the Avenir placeholders.
 *
 * Avenir's whole colour system resolves through these base variables — every
 * `--color-tokens-*` alias, and therefore every component, reads from them. The swap
 * happens here rather than in assets/css/styles.css, which stays byte-identical to
 * the export and diffable against it.
 *
 *   ink     #0b2e3c deep navy    ->  #21283a blue-charcoal (from the logo)
 *   accent  #ffe96f solar yellow ->  #7491aa dusty blue    (from the logo)
 *
 * The `-0 … -100` suffixes are an OPACITY RAMP, carried in the eighth and ninth hex
 * digits — `-0` is fully transparent and is what keeps the navbar clear over the
 * hero. Each alpha pair below is copied verbatim from the export; only the six-digit
 * ink changes. Flattening them to solid silently turns the navbar into an opaque bar.
 */
:root {
	--color-base-base-dark-0: #21283a00;
	--color-base-base-dark-4: #21283a0a;
	--color-base-base-dark-8: #21283a14;
	--color-base-base-dark-16: #21283a29;
	--color-base-base-dark-32: #21283a52;
	--color-base-base-dark-48: #21283a7a;
	--color-base-base-dark-64: #21283aa3;
	--color-base-base-dark-88: #21283ae0;
	--color-base-base-dark-100: #21283a;
	--color-base-colors-color5: #21283a;

	--color-base-colors-accent: #7491aa;

	/*
	 * Headings: Merriweather Light in place of Avenir's Lora 400.
	 *
	 * Both tokens are single points of control — every h0–h6 rule resolves its family
	 * through `--typography-font-heading-main` and its weight through
	 * `--typography-weight-heading-alternative`, so nothing else needs touching.
	 *
	 * Avenir's own note ("do not introduce additional typefaces") is about ADDING a
	 * fourth family. This substitutes one serif for another, so the trio still holds:
	 * Merriweather / Inter Tight / Fragment Mono.
	 */
	--typography-font-heading-main: 'Merriweather', Georgia, serif;
	--typography-weight-heading-alternative: var(--typography-all-weights-light);

	/*
	 * Heading tracking, relaxed for Merriweather.
	 *
	 * Avenir's values were drawn against Lora. Merriweather is a wider face with a
	 * larger x-height, and Light has thinner strokes, so the same negative tracking
	 * reads cramped rather than considered. These are roughly half the original.
	 *
	 * h5/h6 are relaxed furthest: at -1.5px on 24px they were -0.063em, the tightest
	 * ratio in the system, and small headings have the least room to lose.
	 *
	 * Still negative — the design system's intent is tight display type, and that is
	 * kept; only the amount is retuned to the new face.
	 */
	--typography-letter-spacing-h0: -1px;
	--typography-letter-spacing-h1: -1.5px;
	--typography-letter-spacing-h2: -1.5px;
	--typography-letter-spacing-h3: -1px;
	--typography-letter-spacing-h4: -0.4px;
	--typography-letter-spacing-h5: -0.6px;
	--typography-letter-spacing-h6: -0.6px;

	/*
	 * Accessibility guard for the accent button.
	 *
	 * The brand ink on the brand accent measures 4.46:1 — just under WCAG AA's 4.5:1
	 * for normal text, which build spec §9 requires. (White is worse at 3.3:1.) The
	 * accent stays exactly as delivered; only the text sitting on it is deepened, to
	 * 4.88:1. The shift is imperceptible next to #21283a.
	 *
	 * This is why Avenir's design notes warn against dark text on the accent without
	 * checking contrast — the warning survives the palette swap.
	 */
	--color-tokens-button-accent-default-text: #1b2130;
	--color-tokens-button-accent-hover-text: #1b2130;
}

/* ---- Entrance reveals (see assets/js/reveal.js) ------------------------- */

/* Scoped to .rp-reveal-ready so content is visible without JS and under
   prefers-reduced-motion, where the class is never added. */
.rp-reveal-ready [data-reveal] {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 600ms ease, transform 600ms ease;
}

.rp-reveal-ready [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* Stagger the two hero groups so the headline leads. */
.rp-reveal-ready [animation="opacity-02"] { transition-delay: 120ms; }
.rp-reveal-ready [animation="opacity-03"] { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
	.rp-reveal-ready [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	/* The header still compacts and still swaps — it just snaps rather than animates. */
	.nav-container,
	.brand_navbar,
	.brand_navbar .rp-logo {
		transition: none;
	}
}

/* ---- Hero media --------------------------------------------------------- */

/*
 * Legibility scrim.
 *
 * Avenir's overlay stack (`.overlay_home-a.is-30` / `.is-70`) was built for a dark
 * photograph — it only tints, so reversed type held up on its own. A light-background
 * portrait breaks that: white type over a pale studio wall measures around 1.4:1,
 * far under the 4.5:1 the build spec requires.
 *
 * This adds a scrim that is strongest at the lower left, where the headline, buttons
 * and card sit, and clears to nothing across the upper right so the subject stays
 * bright. Applied to the media wrapper so it sits under the content but over the
 * image.
 */
.hero_media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		/* Top band: the navbar is reversed across the full width, so it needs cover
		   even where the diagonal scrim has already cleared. */
		linear-gradient(180deg, rgba(20, 25, 35, 0.38) 0%, rgba(20, 25, 35, 0) 22%),
		/* Diagonal: strongest under the headline and CTAs, gone by the subject. */
		linear-gradient(100deg, rgba(20, 25, 35, 0.62) 0%, rgba(20, 25, 35, 0.34) 38%, rgba(20, 25, 35, 0) 70%),
		/* Foot: carries the new-patients card. */
		linear-gradient(0deg, rgba(20, 25, 35, 0.42) 0%, rgba(20, 25, 35, 0) 45%);
}

.hero_media {
	position: relative;
}

/* Avenir's `.video_home-a` carries `transform: rotate(180deg)` to correct an
   upside-down source video. A still needs no such correction, so the hero image
   gets its own class rather than borrowing that one. */
.hero_media {
	width: 100%;
	height: 100%;
}

.hero_media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Mirrored so the subject faces into the page and the open side of the frame
	   falls where the headline and CTA sit. */
	transform: scaleX(-1);
}

/* ---- Logo --------------------------------------------------------------- */

/*
 * The lockups inherit `color` for their wordmark (the accent is fixed in the file),
 * so nav reversal over the hero and the dark state on scroll both come for free.
 * `.logo-nav` / `.logo-footer` are Avenir sizing hooks expecting a full-width SVG;
 * the width caps below stop the horizontal lockup filling its whole grid cell.
 */
.rp-logo {
	display: block;
	color: currentColor;
}

.rp-logo svg {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Header layout: treatment items left, the stacked lockup centred, then the
 * remaining item grouped with the phone number and the appointment button.
 *
 * Both menu groups stay inside `.nav-menu` (Webflow's `w-nav-menu`), because that
 * element is what the runtime turns into the mobile overlay — anything moved out of
 * it would disappear behind the hamburger. Below 992px the split is meaningless and
 * the groups simply stack, so all of this is desktop-only.
 *
 * The lockup is centred on the container rather than sitting in flow, so it does not
 * drift as menu labels change length. The inner padding keeps a clear lane for it.
 */
@media screen and (min-width: 992px) {
	.nav-container {
		display: flex;
		align-items: center;
		position: relative;
		/* The stacked lockup is ~76px tall; the bar has to clear it or it spills
		   above and below the background. */
		min-height: 96px;
		transition: min-height 240ms ease;
	}

	.nav-menu {
		flex: 1 1 auto;
		min-width: 0;
	}

	.nav_wrap-menu {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.nav_wrap-menu > .nav-menu_inner {
		flex: 0 1 auto;
	}

	.nav-menu_inner.is-left {
		margin-right: auto;
		padding-right: 96px;
	}

	.nav-menu_inner.is-right {
		margin-left: auto;
		padding-left: 96px;
	}

	.brand_navbar {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
		width: 120px;
		/* Avenir caps this at max-width: 5.8rem (93px) for its own compact mark. */
		max-width: 120px;
	}

	/*
	 * Compact state, flagged by assets/js/nav.js once the page leaves the top.
	 */
	.rp-nav-compact .nav-container {
		min-height: 68px;
	}

	/* The stacked lockup is taller than the horizontal one; the bar grows to suit. */
	.navbar {
		padding-top: var(--spacing--space-micro, 12px);
		padding-bottom: var(--spacing--space-micro, 12px);
	}
}

/*
 * Full lockup at the top of the page, mark alone once the header compacts.
 *
 * Shrinking the lockup instead pushes its tagline below legibility — it reads as a
 * grey smudge rather than words — so the compact state shows a mark that still
 * reads at size. Both occupy the same grid cell and cross-fade, which keeps the
 * centring stable; swapping `display` would jump.
 */
.brand_navbar {
	display: grid;
}

.brand_navbar .rp-logo {
	grid-area: 1 / 1;
	justify-self: center;
	align-self: center;
	transition: opacity 200ms ease, transform 240ms ease;
}

.brand_navbar .rp-logo--stacked {
	width: 100%;
	max-width: 120px;
}

.brand_navbar .rp-logo--mark {
	width: 48px;
	opacity: 0;
	transform: scale(0.88);
	/* Inert while faded out, so it cannot swallow a pointer or a focus ring. */
	pointer-events: none;
}

.rp-nav-compact .brand_navbar .rp-logo--stacked {
	opacity: 0;
	transform: scale(0.9);
	pointer-events: none;
}

.rp-nav-compact .brand_navbar .rp-logo--mark {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.rp-logo--horizontal.logo-footer {
	width: 100%;
	max-width: 260px;
}

/* Hero mark: a quiet brand note, not a billboard. */
.logo_home-a-hero .rp-logo--mark {
	width: 100%;
	max-width: 56px;
	margin-left: auto;
	opacity: 0.9;
}

@media (max-width: 767px) {
	.brand_navbar .rp-logo--stacked { max-width: 104px; }
	.brand_navbar .rp-logo--mark { width: 40px; }
	.logo_home-a-hero .rp-logo--mark { max-width: 44px; }
}

/* ---- Dropdown panel ----------------------------------------------------- */

/*
 * Avenir opened its mega-menu by animating the panel's height with IX2. With the
 * page-load interaction layer removed (see inc/webflow.php), nothing grows the
 * panel: `.dropdown-list` and its wrappers stay at the collapsed nav height while
 * the links spill out over the hero with no background behind them.
 *
 * Sizing the panel to its content instead makes the open state a matter of layout
 * rather than animation, so it cannot silently break again. The Webflow dropdown
 * runtime still handles open/close and the `w--open` class.
 */
.dropdown-list.w--open,
.dropdown-list.w--open .dropdown-large_inner,
.dropdown-list.w--open .wrap_dropdown-content,
.dropdown-list.w--open .dropdown-inner {
	height: auto;
}

/* Gives .dropdown-bg (absolute, inset 0) the containing block it needs to fill
   the panel rather than the nav bar. */
.wrap_dropdown-content {
	position: relative;
}

/*
 * The panel's fill follows the navbar's own light/dark state. Over the hero that
 * reads clearly, but once the bar turns parchment the panel matches the page behind
 * it and the edge disappears. The design system's resting nav shadow plus a hairline
 * gives it back its lift, without introducing a colour the palette does not have.
 */
.dropdown-list.w--open .dropdown-bg {
	box-shadow: var(--shadow-nav-resting, 0 4px 10px 0 rgba(33, 40, 58, 0.08));
	border-bottom: 1px solid var(--color-tokens-borders-faint, rgba(33, 40, 58, 0.08));
	border-bottom-left-radius: var(--radius-general-default);
	border-bottom-right-radius: var(--radius-general-default);
}

/* ---- Grid placement ------------------------------------------------------ */

/*
 * Webflow places grid children with per-element id rules (`#w-node-<hash>`), not
 * classes. Those hashes are page-scoped, meaningless to read, and would collide
 * the moment a section rendered twice, so the markup here drops them — which
 * leaves the affected children stacked in column one.
 *
 * These rules restate the same placement against the classes that are already
 * there. Every new section built from an Avenir page needs this check: if a
 * child sat inside a `display: grid` parent and carried a `w-node-` id, its
 * placement has to be reproduced here.
 */

/* .services_halves — 5fr 1fr 6fr; media panel occupies the third track. */
.services_halves > .content_services { grid-area: 1 / 1 / 2 / 2; }
.services_halves > .image_features    { grid-area: 1 / 3 / 2 / 4; }

/* .footer_top-tile — "Left . Right" / 3fr 3fr 6fr. */
.footer_top-tile > .left-footer  { grid-area: Left; }
.footer_top-tile > .right-footer { grid-area: Right; justify-self: start; }

/* .grid_cta-bottom — 3fr 6fr 3fr; contact block occupies the third track. */
.grid_cta-bottom > .left_cta-bottom  { grid-area: 1 / 1 / 2 / 2; }
.grid_cta-bottom > .right_cta-bottom { grid-area: 1 / 3 / 2 / 4; }

/* .grid_faqs — 5fr 1fr 6fr; the accordion occupies the third track. Without this
   it lands in the 1fr spacer column and every question wraps to four lines. */
.grid_faqs > .rp-faq-column { grid-area: 1 / 3 / 2 / 4; }

/* ---- Treatment templates ------------------------------------------------- */

/* Breadcrumbs. Avenir has no equivalent, so this is built from its type tokens. */
.rp-breadcrumbs {
	margin-bottom: var(--spacing--space-small, 24px);
}

.rp-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rp-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.rp-breadcrumbs__sep {
	opacity: 0.4;
}

/* Reviewer attribution. Sits quietly between the content and the closing CTA. */
.rp-reviewer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding-top: var(--spacing--space-small, 24px);
	border-top: 1px solid var(--color-tokens-borders-faint, rgba(33, 40, 58, 0.08));
}

.rp-reviewer__inner p {
	margin: 0;
}

.rp-review__quote {
	margin: 0;
}

/*
 * WYSIWYG output. ACF returns unclassed markup, so the fields that hold prose need
 * the body styles applied by element rather than by Avenir's utility classes.
 */
.rp-prose p {
	font-size: var(--text-body, 16px);
	line-height: 1.5;
}

.rp-prose > *:first-child { margin-top: 0; }
.rp-prose > *:last-child { margin-bottom: 0; }

.rp-prose ul,
.rp-prose ol {
	padding-left: 1.25em;
}

.rp-prose li {
	margin-bottom: 8px;
}

/* ---- Light-page header --------------------------------------------------- */

/*
 * Two header patterns, because one surface cannot do both jobs.
 *
 * OVERLAY (front page): Avenir's floating rounded card, inset from the edges and
 * transparent, so the dark hero image reads through it and the reversed type sits on
 * photography. Its shadow and radius exist to separate a pale card from a photograph.
 *
 * BAR (every other page): those same devices fail on parchment — a parchment card on
 * a parchment page has nothing to contrast against, so it reads as a floating blob
 * with a stray shadow, and page content slides underneath its rounded corners.
 *
 * So light pages get a different construction rather than a recoloured one: the
 * surface moves from the inset card out to the full-width bar, flush to the top edge,
 * square, with a hairline rule instead of a shadow. The rule is what defines the edge
 * on a same-colour page; a shadow only muddies it.
 */
body.rp-nav-solid .navbar {
	padding-top: 0;
	background-color: var(--color-base-base-light-100, #f7f6f5);
	border-bottom: 1px solid var(--color-tokens-borders-faint, rgba(33, 40, 58, 0.08));
}

/* The card's own devices are stood down — the bar carries the surface now. */
body.rp-nav-solid .nav-container {
	background-color: transparent;
	box-shadow: none;
	border-radius: 0;
}

/*
 * ROOT CAUSE of the light-page colour bugs.
 *
 * `.master_navigation` carries a variant class declaring a complete REVERSED token
 * set — tone, borders, button fills, input states, 78 properties in all. Every nav
 * descendant reads from it, which is why patching `color:` on individual selectors
 * kept missing things: the hamburger, then the dropdown toggles, and so on down the
 * tree, each one reading a token rather than inheriting a colour.
 *
 * These revert the set to the light-surface values, taken from `:root` rather than
 * invented, so anything reading any of these tokens flips at once. The variant rule
 * uses `:where()`, which has zero specificity, so `body.rp-nav-solid` outranks it
 * without needing `!important`.
 */
body.rp-nav-solid .master_navigation {
	--color-tokens-background-base: var(--color-base-base-light-100);
	--color-tokens-tone-strong: var(--color-base-base-dark-100);
	--color-tokens-input-default-border: var(--color-base-base-dark-0);
	--color-tokens-input-default-background: var(--color-base-depth-light);
	--color-tokens-input-default-text: var(--color-base-base-dark-48);
	--color-tokens-input-active-border: var(--color-base-base-dark-32);
	--color-tokens-input-active-text: var(--color-base-base-dark-100);
	--color-tokens-input-active-background: var(--color-base-depth-light);
	--color-tokens-tone-subtle: var(--color-base-base-dark-64);
	--color-tokens-input-icon: var(--color-base-base-dark-100);
	--color-tokens-background-light-0: var(--color-base-base-light-0);
	--color-tokens-background-lift: var(--color-base-base-dark-4);
	--color-tokens-button-primary-default-text: var(--color-base-base-light-100);
	--color-tokens-button-secondary-default-text: var(--color-base-base-dark-100);
	--color-tokens-button-accent-default-text: var(--color-base-base-dark-100);
	--color-tokens-button-primary-hover-text: var(--color-base-base-dark-100);
	--color-tokens-button-secondary-hover-text: var(--color-base-base-dark-100);
	--color-tokens-button-accent-hover-text: var(--color-base-base-dark-100);
	--color-tokens-button-primary-default-border: var(--color-base-base-light-8);
	--color-tokens-button-primary-default-background: var(--color-base-base-dark-100);
	--color-tokens-button-secondary-default-border: var(--color-base-base-dark-8);
	--color-tokens-button-secondary-default-background: var(--color-base-base-dark-8);
	--color-tokens-button-accent-default-border: var(--color-tokens-color-accent);
	--color-tokens-button-accent-default-background: var(--color-tokens-color-accent);
	--color-tokens-button-primary-hover-border: var(--color-base-base-dark-0);
	--color-tokens-button-primary-hover-background: var(--color-tokens-color-blue-wash);
	--color-tokens-button-secondary-hover-border: var(--color-base-base-dark-0);
	--color-tokens-button-secondary-hover-background: var(--color-tokens-color-blue-wash);
	--color-tokens-button-accent-hover-border: var(--color-tokens-color-accent);
	--color-tokens-button-accent-hover-background: var(--color-tokens-color-accent);
	--color-tokens-tone-medium: var(--color-base-base-dark-88);
	--color-tokens-button-tertiary-default-text: var(--color-base-base-dark-100);
	--color-tokens-button-tertiary-hover-text: var(--color-base-base-dark-88);
	--color-tokens-tone-faint: var(--color-base-base-dark-16);
	--color-tokens-bg-grid-main: var(--color-base-base-dark-8);
	--color-tokens-borders-subtle: var(--color-base-base-dark-16);
	--color-tokens-borders-faint: var(--color-base-base-dark-8);
	--color-tokens-input-label: var(--color-base-base-dark-64);
	--color-tokens-color-blue-wash: var(--color-base-colors-color4);
	--color-tokens-background-morph: var(--color-base-base-dark-16);
	--color-tokens-borders-strong: var(--color-base-base-dark-64);
	--color-tokens-color-corpo: var(--color-base-colors-color5);
	--color-tokens-background-barely: var(--color-base-base-light-8);
	--color-tokens-color-yellow-wash: var(--color-base-colors-color3);
	--color-tokens-color-plum-wash: var(--color-base-colors-color2);
	--color-tokens-background-semi-transparent: var(--color-base-base-light-32);
	--color-tokens-background-opaque: var(--color-base-base-light-64);
	--color-tokens-background-depth: var(--color-base-depth-light);
	--color-tokens-background-gradient-purposes-gradient-0: var(--color-base-base-light-0);
	--color-tokens-background-gradient-purposes-gradient-64: var(--color-base-base-light-64);
	--color-tokens-background-gradient-purposes-gradient-100: var(--color-base-base-light-100);
	--color-tokens-color-sage-wash: var(--color-base-colors-color1);
	--color-tokens-color-accent: var(--color-base-colors-accent);
	--color-tokens-color-yellow-two: var(--color-base-colors-accent-2);
	--color-tokens-borders-medium: var(--color-base-base-dark-32);
	--color-tokens-overlay-faint: var(--color-base-base-dark-8);
	--color-tokens-overlay-subtle: var(--color-base-base-dark-16);
	--color-tokens-overlay-medium: var(--color-base-base-dark-32);
	--color-tokens-overlay-strong: var(--color-base-base-dark-48);
	--color-tokens-glass-tiles-strong: var(--color-base-base-dark-48);
	--color-tokens-glass-tiles-medium: var(--color-base-base-dark-32);
	--color-tokens-glass-tiles-soft: var(--color-base-base-dark-16);
	--color-tokens-glass-tiles-faint: var(--color-base-base-dark-8);
	--color-tokens-glass-tiles-super-strong-keep-dark: var(--color-base-base-dark-64);
	--color-tokens-glass-tiles-strong-keep-dark: var(--color-base-base-dark-48);
	--color-tokens-glass-tiles-medium-keep-dark: var(--color-base-base-dark-32);
	--color-tokens-glass-tiles-soft-keep-dark: var(--color-base-base-dark-16);
	--color-tokens-glass-tiles-faint-keep-dark: var(--color-base-base-dark-8);
	--color-tokens-gradients-base-88: var(--color-base-base-light-88);
	--color-tokens-gradients-base-64: var(--color-base-base-light-64);
	--color-tokens-gradients-base-0: var(--color-base-base-light-0);
	--color-tokens-gradients-base-100: var(--color-base-base-light-100);
	--color-tokens-input-filled-background: var(--color-base-depth-light);
	--color-tokens-input-filled-text: var(--color-base-base-dark-100);
	--color-tokens-input-filled-border: var(--color-base-base-dark-0);
	--color-tokens-input-error-background: var(--color-base-depth-light);
	--color-tokens-input-error-text: var(--color-base-base-dark-100);
	--color-tokens-input-error-border: var(--color-base-base-dark-0);
}

/* The dropdown panel hangs off the bar, so it keeps the square top edge too. */
body.rp-nav-solid .dropdown-list.w--open .dropdown-bg {
	border-radius: 0 0 var(--radius-general-default) var(--radius-general-default);
}

/* ---- Generic light section ----------------------------------------------- */

/*
 * Avenir's `section_service-list` is a dark band built for its numbered process list.
 * The treatment card grid needs a light surface — `card_service` is drawn for one —
 * so it gets a neutral wrapper on the page canvas instead of borrowing that band.
 * Padding matches Avenir's other content sections.
 */
.rp-section {
	padding-top: var(--spacing--space-xx-large, 120px);
	padding-bottom: var(--spacing--space-xx-large, 120px);
}

@media (max-width: 767px) {
	.rp-section {
		padding-top: var(--spacing--space-large, 64px);
		padding-bottom: var(--spacing--space-large, 64px);
	}
}

.rp-section__head {
	display: flex;
	flex-direction: column;
	gap: var(--spacing--space-tiny, 16px);
	margin-bottom: var(--spacing--space-medium, 40px);
}

/*
 * Avenir's `grid_services` uses `place-items: center`, which suited its six evenly
 * filled cells. A hub has however many children it has — four leaves a lone card
 * centred in an empty row — so cards align to the start of their cell instead.
 */
.rp-section .grid_services {
	place-items: start stretch;
	margin-bottom: 0;
}

.rp-section .card_service {
	max-width: none;
	width: 100%;
}

/* `.master_label` centres itself; in a left-aligned section head it should not. */
.rp-section__head .master_label {
	justify-content: flex-start;
	align-self: flex-start;
}

/* ---- Treatment hero ------------------------------------------------------ */

/*
 * Centred headline over a pair of offset images, after the Evermind hero-7 reference.
 * Rebuilt on Avenir's tokens rather than lifted: the chip keeps the 8px button radius
 * Avenir's notes require (pills "would read as consumer SaaS, not consultancy"), and
 * the dot field is drawn here from the navy tint rather than hotlinked from Evermind.
 */
.rp-hero {
	position: relative;
	overflow: clip;
	padding-bottom: var(--section-padding--medium, 120px);
}

/* Dot field. A repeating radial gradient, masked so it fades before it reaches the
   content — cheaper than an asset and it inherits the brand ink. */
.rp-hero__dots {
	position: absolute;
	inset: 0 0 auto;
	height: 620px;
	pointer-events: none;
	background-image: radial-gradient(var(--color-base-base-dark-32, rgba(33, 40, 58, 0.32)) 1.5px, transparent 1.5px);
	background-size: 20px 20px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 0%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 0%, transparent 75%);
	opacity: 0.7;
}

.rp-hero__headline {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing--space-small, 24px);
	max-width: 680px;
	margin: 0 auto var(--spacing--space-xx-large, 80px);
	text-align: center;
}

.rp-hero__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing--space-small, 20px);
}

.rp-hero__tile .paragraph {
	max-width: 46ch;
}

/* ---- Paired hero images -------------------------------------------------- */

.rp-hero__images {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: var(--spacing--space-pico, 12px);
}

.rp-hero__image {
	position: relative;
	flex: 1 1 0;
	max-width: 441px;
	height: 475px;
	border-radius: var(--radius-general-medium);
	overflow: hidden;
}

/* The drop is the whole point of the pair — without it they read as a plain row. */
.rp-hero__image.is-offset {
	margin-top: 88px;
}

.rp-hero__images.is-single .rp-hero__image {
	max-width: 720px;
}

.rp-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- Avatar chip --------------------------------------------------------- */

/* `.btn-bg` is absolutely positioned and sits after the content in the DOM, so it
   paints over anything in `.button-inner` that is not raised above it. Avenir's own
   icon wrappers are positioned; a plain span is not. */
.rp-chip .button-inner {
	position: relative;
	z-index: 1;
	align-items: center;
	gap: var(--spacing--space-nano, 8px);
}

.rp-chip__avatar {
	position: relative;
	flex: none;
	display: block;
	width: 44px;
	height: 28px;
	border-radius: var(--radius-general-small, 8px);
	overflow: hidden;
}

.rp-chip__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Small accent mark, the one place the brand blue appears at this size. */
.rp-chip__dot {
	position: absolute;
	right: 2px;
	bottom: 2px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--color-base-colors-accent, #7491aa);
	box-shadow: 0 0 0 2px var(--color-base-base-light-100, #f7f6f5);
}

@media (max-width: 991px) {
	.rp-hero__image { height: 360px; }
	.rp-hero__image.is-offset { margin-top: 56px; }
}

@media (max-width: 767px) {
	.rp-hero__headline { margin-bottom: var(--spacing--space-large, 56px); }
	.rp-hero__image { height: 260px; }
	.rp-hero__image.is-offset { margin-top: 40px; }
	.rp-hero__dots { height: 420px; background-size: 18px 18px; }
}

/* Avenir retunes heading tracking again below 479px; those values need the same
   relaxation or small screens fall back to the Lora-tuned set. */
@media screen and (max-width: 479px) {
	:root {
		--typography-letter-spacing-h1: -1.25px;
		--typography-letter-spacing-h2: -1px;
		--typography-letter-spacing-h3: -0.75px;
		--typography-letter-spacing-h4: -0.25px;
		--typography-letter-spacing-h5: -0.6px;
		--typography-letter-spacing-h6: -0.6px;
	}
}

/* ---- Home hero layout ---------------------------------------------------- */

/*
 * Headline scale. Avenir's home H1 uses the h2 step; the layout direction calls for
 * a larger, three-line display setting, so it moves up to the h1 step and is given
 * room to breathe.
 */
.section_hero-home-a h1 {
	font-size: var(--typography-size-h1);
	line-height: var(--typography-line-height-h1);
	letter-spacing: var(--typography-letter-spacing-h1);
}

/* NOTE: the headline's measure is an inline `max-width` in
   parts/sections/hero-home.php, carried over from Avenir. An inline style beats a
   class rule, so change it there — a rule here is dead code. */

/*
 * Short-viewport safety.
 *
 * Avenir fixes the hero at `height: 100vh`. With content bottom-anchored, a viewport
 * shorter than the content has nowhere to put the overflow, so the headline rides up
 * underneath the fixed navbar. Two things are needed:
 *
 *   1. The section grows instead of clipping — `min-height` rather than `height`, and
 *      the chain stretches by flex rather than percentage heights, which do not
 *      resolve against an auto-height parent.
 *   2. A reserved band at the top the height of the navbar, so bottom-anchored
 *      content can never reach it however tall the content becomes.
 */
.section_hero-home-a {
	height: auto;
	min-height: 100vh;
	display: flex;
}

.section_hero-home-a > .master_hero-home-a {
	height: auto;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.section_hero-home-a > .master_hero-home-a > .container-large {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.section_hero-home-a .home-a_hero-content {
	height: auto;
	flex: 1 1 auto;
	/* Navbar band: .navbar padding-top (20) + .nav-container min-height (96). */
	padding-top: 116px;
}

@media (max-width: 991px) {
	.section_hero-home-a .home-a_hero-content {
		padding-top: 96px;
	}
}

/*
 * Content sits on the floor of the hero: headline group bottom-left, new-patients
 * card bottom-right on the same band.
 *
 * Avenir centres the headline with SYMMETRIC AUTO MARGINS
 * (`.wrap_home-a-headline { margin-top: auto; margin-bottom: auto }`). Auto margins
 * absorb the free space in a flex column and win over `justify-content` outright, so
 * setting `flex-end` on the parent does nothing on its own — the bottom margin has to
 * go as well. That is the actual lever here.
 *
 * The card is then lifted out of the flow so the two share the bottom band rather
 * than the card being pushed below the headline. The container is already positioned,
 * so it is the containing block.
 */
.section_hero-home-a .home-a_hero-content {
	justify-content: flex-end;
}

.section_hero-home-a .wrap_home-a-headline {
	margin-top: auto;
	margin-bottom: 0;
}

.home-a_hero-bottom {
	justify-content: flex-end;
}

/*
 * The two only share the bottom band where both genuinely fit: the headline wants
 * ~660px and the card ~320px, so below roughly 1100px they would collide. Under that,
 * the card returns to the flow beneath the headline rather than being squeezed — a
 * percentage cap on the headline instead just forces it into six narrow lines.
 */
@media screen and (min-width: 1100px) {
	.section_hero-home-a .home-a_hero-bottom {
		position: absolute;
		right: 0;
		bottom: 0;
		width: auto;
		margin: 0;
	}
}

.rp-hero-card {
	position: relative;
	max-width: 20rem;
}

.rp-hero-card[hidden] {
	display: none;
}

/* Sits over the card's own padding, clear of the thumbnail and the link. */
.rp-hero-card__close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-general-small, 8px);
	background: transparent;
	color: var(--color-base-base-light-100, #f7f6f5);
	opacity: 0.65;
	cursor: pointer;
	transition: opacity 200ms ease, background-color 200ms ease;
}

.rp-hero-card__close:hover,
.rp-hero-card__close:focus-visible {
	opacity: 1;
	background-color: rgba(247, 246, 245, 0.14);
}

@media (max-width: 767px) {
	.home-a_hero-bottom {
		justify-content: stretch;
	}

	.rp-hero-card {
		max-width: none;
		width: 100%;
	}

	.section_hero-home-a .wrap_home-a-headline .slot-sizing > div {
		max-width: none;
	}
}