/**
 * Allura Medical - section layer.
 *
 * Layout only. Colours, type and controls come from base.css and
 * components.css; these rules just arrange the pieces per section.
 */

/*--------------------------------------------------------------
Site header
--------------------------------------------------------------*/
.am-site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	padding-block: var(--am-space-5);
}

.am-site-header--solid {
	position: sticky;
	background-color: var(--am-white);
	border-bottom: 1px solid var(--am-line);
}

/*
 * The content template's bar, in brand. The site's logo is light artwork,
 * and on the white solid bar it simply vanished — the overlay templates
 * never notice because their header lies over a dark photograph. The
 * pieces on the bar already suit a dark ground: the booking button is
 * white-filled and the pill carries its own white text.
 */
.page-template-template-content .am-site-header--solid {
	background-color: var(--am-brand);
	border-bottom-color: transparent;
}

/* Ink would disappear on brand — the overlay header's white instead. */
.page-template-template-content .am-site-header--solid .am-header__toggle,
.page-template-template-content .am-site-header--solid .am-branding__title a {
	color: var(--am-white);
}

/*
 * The pill is brand-coloured and so is this bar, so on these pages alone it
 * would dissolve into its own background. Ink gives it its edge back — the
 * same colour the pill's own buttons take on hover, so nothing new is
 * introduced to the palette.
 */
.page-template-template-content .am-site-header--solid .am-nav-pill {
	background-color: var(--am-brand-dark);
}

.am-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--am-space-5);
}

.am-branding {
	display: flex;
	align-items: center;
	gap: var(--am-space-3);
	min-width: 0;
}

.am-branding__logo {
	display: block;
}

.am-branding img,
.am-branding .custom-logo,
.am-branding__logo img {
	max-height: var(--am-logo-height, 74px);
	width: auto;
}

/*
 * A ceiling on a phone rather than a replacement: min() keeps whatever the
 * Customizer asks for when that is already smaller, so lowering the setting
 * still lowers the mark here instead of being quietly ignored.
 */
@media (max-width: 767px) {
	.am-branding img,
	.am-branding .custom-logo,
	.am-branding__logo img {
		max-height: min(var(--am-logo-height, 74px), 48px);
	}
}

.am-branding__title {
	margin: 0;
	font-family: var(--am-font-display);
	font-size: 1.75rem;
	line-height: 1.1;
}

.am-site-header:not(.am-site-header--solid) .am-branding__title a {
	color: var(--am-white);
}

.am-branding__tagline {
	margin: 4px 0 0;
	color: var(--am-muted);
	font-size: var(--am-fs-small);
}

/* Menu / Our Services pill group */
.am-nav-pill {
	display: flex;
	align-items: center;
	/* Holds its size; the logo beside it is what yields on a narrow phone. */
	flex-shrink: 0;
	padding: 8px 6px;
	background-color: var(--am-brand);
	border-radius: var(--am-radius);
}

/*
 * The services link is the anchor, the Menu control the <button> — so the
 * element selects it without a class of its own. Its 28px of right padding
 * came off so the label and chevron range right, tight to the pill's edge.
 */
.am-nav-pill a.am-nav-pill__btn {
	padding-right: 10px;
	justify-content: flex-end;
}

.am-nav-pill__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--am-space-2);
	padding: 6px 28px;
	border: 0;
	border-radius: var(--am-radius);
	background-color: transparent;
	color: var(--am-white);
	/*
	 * A step below --am-fs-ui, which the rest of the site's buttons take. A
	 * header bar is read at a glance rather than aimed at, and set in caps at
	 * 18px these two labels were competing with the logo beside them.
	 */
	font-size: var(--am-fs-base);
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	transition: color var(--am-transition), background-color var(--am-transition);
}

/*
 * The global a:hover paints links brand-coloured, and the pill is itself
 * brand-coloured — so hovering "Our services" all but erased the label against
 * its own background. Ink instead. The Menu control beside it is a <button>,
 * which never matched that global rule, so this brings the pair into step.
 */
.am-nav-pill__btn:hover,
.am-nav-pill__btn:focus {
	color: var(--am-ink);
}

/*
 * The global focus ring is brand-coloured too, which is invisible on the brand
 * pill. The offset puts this one on the pill rather than on a light button.
 */
.am-nav-pill :focus-visible {
	outline-color: var(--am-white);
}

.am-nav-pill__btn--light {
	background-color: var(--am-white);
	color: var(--am-ink);
}

/*
 * The pill below the desktop bar.
 *
 * It used to be desktop-only, with a plain outlined MENU button standing in
 * underneath. At the desktop size the two labels come to about 325px of the
 * 350px a 390px phone has between its gutters, which leaves nothing for the
 * logo — so the type and the padding scale with the viewport rather than
 * stepping at a breakpoint, and there is no width where the row just fails
 * to fit. The floors are what a 360px handset gets; the ceilings hand the
 * tablet something close to the full-size pill.
 */
@media (max-width: 1099px) {
	.am-nav-pill {
		padding: 4px 3px;
	}

	.am-nav-pill__btn {
		gap: 6px;
		/*
		 * 10px top and bottom rather than the desktop's 6px. The type here is
		 * scaled well below the desktop size, and at 6px the white chip was
		 * wrapped tight around a small word — the height has to come from the
		 * padding once it stops coming from the type.
		 */
		padding: 10px clamp(9px, 2.6vw, 16px);
		font-size: clamp(.625rem, 2.6vw, .8125rem);
		letter-spacing: .02em;
	}

	.am-nav-pill a.am-nav-pill__btn {
		padding-right: 6px;
	}

	.am-nav-pill__bars {
		width: 12px;
	}

	/* 28px between logo and pill is room the pill needs more than the gap does. */
	.am-site-header__inner {
		gap: var(--am-space-3);
	}

	/*
	 * The safety net. The mark is sized by height with width:auto, so it
	 * cannot shrink on its own and a long logo would push the pill off the
	 * edge; this lets it scale down instead of the row overflowing.
	 */
	.am-branding img,
	.am-branding .custom-logo,
	.am-branding__logo img {
		max-width: 100%;
	}
}

.am-nav-pill__bars {
	position: relative;
	display: block;
	width: 14px;
	height: 2px;
	background-color: currentColor;
}

.am-nav-pill__bars::before,
.am-nav-pill__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 14px;
	height: 2px;
	background-color: currentColor;
}

.am-nav-pill__bars::before { top: -5px; }
.am-nav-pill__bars::after { top: 5px; }

.am-header__actions {
	display: none;
}

@media (min-width: 1100px) {
	.am-header__actions {
		display: block;
	}
}

/*
 * The booking button, brought into step with the pill beside it. Written
 * here rather than on .am-btn: that is the button the whole site uses, and
 * this is the one place it wants to be quieter.
 */
.am-header__actions .am-btn {
	font-size: var(--am-fs-base);
}

/*
 * Superseded by the pill, which is shown at every width now and carries the
 * same data-am-nav-open control, so this second MENU button would be a
 * duplicate of it.
 *
 * Hidden rather than deleted from header.php, and that is deliberate: a
 * visitor still holding the previous stylesheet from cache gets a page
 * where the pill is display:none below 1100px. If the markup had gone with
 * the styling, they would have no way into the menu at all until the cache
 * cleared. This way the old stylesheet still finds its button.
 */
.am-header__toggle {
	display: none;
}

/* Slide-out panel */
.am-nav-panel {
	/*
	 * How long the white ground takes to cross a row on hover, and on what
	 * curve. Slower than the theme's general transition on purpose: this one
	 * is meant to be watched crossing, not to have already happened.
	 */
	--am-nav-fill: .5s;
	--am-nav-fill-ease: cubic-bezier(.22, .61, .36, 1);

	position: fixed;
	inset: 0;
	/*
	 * One screen, below whatever is over the top of it — see --am-screen in
	 * base.css. These two come after the shorthand on purpose: height wins
	 * over the bottom edge inset:0 sets, which is what makes it work.
	 */
	top: var(--am-chrome);
	height: var(--am-screen);
	z-index: 200;
	display: flex;
	flex-direction: column;
	background-color: var(--am-brand);
	visibility: hidden;
	opacity: 0;
	/*
	 * A closed panel still covers the viewport, and opacity:0 does not stop
	 * hit-testing. Without this it would swallow every click on the page.
	 */
	pointer-events: none;
	transition: opacity var(--am-transition), visibility var(--am-transition);
}

.am-nav-panel.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}


.am-nav-panel__bar {
	flex: 0 0 auto;
	padding: var(--am-space-4) var(--am-gutter);
}

.am-nav-panel__back {
	display: inline-flex;
	align-items: center;
	gap: var(--am-space-2);
	padding: 12px 22px;
	border: 0;
	border-radius: var(--am-radius);
	background-color: var(--am-white);
	color: var(--am-ink);
	font-family: var(--am-font-body);
	font-size: var(--am-fs-base);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	cursor: pointer;
	transition: background-color var(--am-transition), color var(--am-transition);
}

.am-nav-panel__back:hover,
.am-nav-panel__back:focus-visible {
	background-color: var(--am-ink);
	color: var(--am-white);
}

/*
 * Smaller on the phone — the same step the header's Menu control takes —
 * with more air above and below the bar. The short-screen block further
 * down still tightens that air where height is the scarce thing.
 */
@media (max-width: 767px) {
	.am-nav-panel__bar {
		padding-block: var(--am-space-5);
	}

	.am-nav-panel__back {
		padding: 9px 16px;
		font-size: .8125rem;
	}
}

/* Levels stack on top of each other, so the panel never changes height. */
.am-nav-panel__menu {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
}

.am-nav__level {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	/*
	 * "safe" so a menu taller than the panel falls back to top-aligned rather
	 * than centring and pushing its first items above the scroll origin, where
	 * they could not be reached.
	 */
	justify-content: safe center;
	overflow-y: auto;
	/*
	 * A level that is closed is parked at translateX(100%), just off the
	 * right-hand edge of the one it belongs to — and visibility: hidden
	 * leaves it in the layout. Without this it counts as overflow, and
	 * since overflow-y: auto makes this axis auto too, the level above it
	 * gets a horizontal scrollbar onto nothing at all.
	 */
	overflow-x: hidden;
	padding-inline: var(--am-gutter);
	padding-block: var(--am-space-5);
	list-style: none;
	margin: 0;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform .35s cubic-bezier(.4, 0, .2, 1), visibility .35s;
}

/*
 * Scoped to the open panel. Declaring the root level visible unconditionally
 * would override the closed panel's visibility:hidden and leave an invisible
 * full-screen menu intercepting clicks.
 */
.am-nav-panel.is-open .am-nav__level--root,
.am-nav-panel.is-open .am-nav__level.is-open {
	transform: translateX(0);
	visibility: visible;
}

/*
 * The level you came from leaves to the left as the new one arrives from
 * the right, so the two move together as one gesture rather than the new
 * list sliding over a stationary old one that then blinks out.
 *
 * This only works because site.js lifts the sub-levels out of the <li>
 * WordPress nests them in. Left nested, the parent level is the child's
 * containing block and this transform would carry the child off-screen
 * with it. Specificity has to beat the rule above.
 *
 * visibility is deliberately transitioned rather than switched: it holds
 * at visible for the whole slide and flips exactly as the transform ends,
 * which is what keeps the outgoing level on screen long enough to see it
 * leave.
 */
.am-nav-panel.is-open .am-nav__level.is-behind {
	transform: translateX(-100%);
	visibility: hidden;
}

.am-nav__item {
	flex: 0 0 auto;
	margin: 0;
}

/*
 * The rule goes on the row rather than the item, so a nested level inside the
 * same <li> does not inherit a stray border. Only a bottom rule: the design has
 * no line above the first item.
 */
.am-nav__row {
	position: relative;
	/* Contains the fill's z-index: -1, which would otherwise drop it
	   behind the panel's own background and never be seen. */
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(16px, 2.6vw, 44px);
	min-height: clamp(84px, 15vh, 160px);
	border-bottom: 1px solid rgba(var(--am-white-rgb), .4);
}

/*
 * Three tracks, so the name is centred on the row and not on the row's
 * contents. Centred as a flex line, a name with a chevron beside it is
 * centred as name-plus-gap-plus-chevron, which pushes the name itself left
 * by half of that — SERVICES sat about 40px adrift of HOME and CONTACT,
 * and it was the only item with a chevron, so it was the only one that did.
 *
 * The outer tracks are equal and empty, which puts the middle one dead
 * centre whatever it holds; the chevron rides in the third track without
 * having a say in where the second one lands. A row with no chevron centres
 * identically, which is the point — the names have to line up with each
 * other, not just each within its own row.
 *
 * Root level only: a drilled-in level sets its rows to flex-start and reads
 * as a left-aligned list, which this must not centre.
 */
.am-nav__level--root .am-nav__row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
}

.am-nav__level--root .am-nav__row > .am-nav__link {
	grid-column: 2;
}

/* Hard against the gap, so it keeps the spacing it has beside the name. */
.am-nav__level--root .am-nav__row > .am-nav__drill {
	grid-column: 3;
	justify-self: start;
}

.am-nav__link {
	color: var(--am-white);
	font-family: var(--am-font-display);
	font-size: clamp(1.75rem, 3.7vw, 3.5rem);
	line-height: 1.05;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	transition: color var(--am-nav-fill) var(--am-nav-fill-ease);
}

.am-nav__item.current-menu-item > .am-nav__row > .am-nav__link {
	color: rgba(var(--am-white-rgb), .72);
}

/*
 * Hover grows a white ground across the row and the name turns brand.
 *
 * Scaled from the left edge rather than animated in width, so it is one
 * composited transform instead of a relayout per frame, and it opens in the
 * reading direction instead of from the middle.
 *
 * Behind the row's own contents at z-index -1, which is why the row is an
 * isolated stacking context above: without that, -1 puts it behind the
 * panel's ground rather than behind the name, and nothing shows at all.
 */
.am-nav__row::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--am-white);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--am-nav-fill) var(--am-nav-fill-ease);
}

/*
 * The keyboard's half, unconditionally: a focused row gets the same ground
 * a hovered one does.
 */
.am-nav__row:focus-within::before {
	transform: scaleX(1);
}

.am-nav__row:focus-within > .am-nav__link,
.am-nav__row:focus-within > .am-nav__drill,
.am-nav__item.current-menu-item > .am-nav__row:focus-within > .am-nav__link {
	color: var(--am-brand);
}

/*
 * Hover, only where hovering is a thing a pointer can do. On a touchscreen
 * :hover latches on tap and stays latched, so a phone would be left with a
 * white row and no way to clear it.
 *
 * The chevron is in this list because it is white too — left alone it would
 * vanish into the ground that just arrived under it. The current page's name
 * is dimmed white by a rule that outranks a plain hover selector, so its
 * hovered state has to be named explicitly or the one item you are already
 * on would be the one that disappears.
 */
@media (hover: hover) {
	.am-nav__row:hover::before {
		transform: scaleX(1);
	}

	.am-nav__row:hover > .am-nav__link,
	.am-nav__row:hover > .am-nav__drill,
	.am-nav__item.current-menu-item > .am-nav__row:hover > .am-nav__link {
		color: var(--am-brand);
	}

	/* Name and chevron are one control; either half moves both. */
	.am-nav__row:hover > .am-nav__drill {
		transform: translateX(5px);
	}
}

/*
 * Just the chevron, as in the design — no disc behind it. The padding is there
 * purely to keep the tap target near 44px without drawing anything.
 */
.am-nav__drill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	border: 0;
	background: transparent;
	color: var(--am-white);
	cursor: pointer;
	transition: transform var(--am-transition), opacity var(--am-transition), color var(--am-nav-fill) var(--am-nav-fill-ease);
}

.am-nav__drill:hover,
.am-nav__drill:focus-visible {
	transform: translateX(5px);
}

.am-nav__drill svg {
	display: block;
}

/*
 * A drilled-in level is a different thing from the root one.
 *
 * The root is five words, so it can be set large, centred and in caps. A
 * service list is fourteen, and drawn that way it would run off the bottom
 * of the screen — so the design gives it two columns of smaller type,
 * ranged left and in each name's own case. Set in caps these lose the shape
 * of the word, and "Temporomandibular Joint (TMJ) Surgery" needs all the
 * shape it has.
 *
 * Two columns, and nothing here says which order they fill in: left to
 * right, one row at a time, which is what a grid does on its own and what
 * it will always do if anything else fails. site.js turns it into a
 * top-to-bottom fill by writing the row count it has counted, so the menu
 * can be ordered in two halves rather than in alternating sides. That is
 * an improvement on this, never a prerequisite for it.
 */
@media (min-width: 768px) {
	.am-nav__level:not(.am-nav__level--root) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(32px, 5.4vw, 81px);
		/* "safe", for the same reason the root level's centring is. */
		align-content: safe center;
	}
}

/*
 * No height of its own: site.js gives the level rows of 1fr, so the rows
 * divide the space there is rather than being measured against the
 * viewport and hoping. A pitch in vh has to guess at the Back bar, the
 * padding and the admin bar above it, and eight rows at 9.5vh came within
 * a few pixels of fitting — which is a scrollbar. This cannot overflow at
 * any count or any window height.
 *
 * It is also nearer the artboard than the clamp was: the design's 112.5px
 * pitch was seven rows dividing a screen, which is this.
 */
.am-nav__level:not(.am-nav__level--root) .am-nav__row {
	justify-content: flex-start;
	min-height: 0;
}

/* The rule belongs at the foot of the row's share of the level. */
.am-nav__level:not(.am-nav__level--root) .am-nav__item {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.am-nav__level:not(.am-nav__level--root) .am-nav__item > .am-nav__row {
	flex: 1 1 auto;
}

.am-nav__level:not(.am-nav__level--root) .am-nav__link {
	font-size: clamp(1.25rem, 2.1vw, 2rem);
	text-align: left;
	text-transform: none;
}

/*
 * The drilled lists on a phone. The rows share the level's height in
 * equal fractions, and a service list a dozen long left each row a
 * sliver — names sitting edge to edge on their rules. A real floor and
 * a touch of padding give every row its own air; the level already
 * scrolls when the list runs past the screen.
 */
@media (max-width: 767px) {
	.am-nav__level:not(.am-nav__level--root) .am-nav__row {
		min-height: 72px;
		padding-block: 10px;
	}
}

/* On the desktop the name stands clear of the hover fill's left edge. */
@media (min-width: 768px) {
	.am-nav__level:not(.am-nav__level--root) .am-nav__row {
		padding-left: 24px;
	}
}

/*
 * Phones, portrait.
 *
 * A drilled-in row is content-height by design, so the two columns on a
 * wide screen can divide the space between them. In one column at phone
 * type that leaves rows about 22px tall, stacked against each other with
 * only the hairline between — too tight to read and well under anything
 * you could reliably tap. They get a floor here instead.
 */
@media (max-width: 767px) {
	/*
	 * The root rows divide the screen instead of measuring against it. The
	 * clamp is a floor and a ceiling either side of 15vh, which on a phone
	 * meant five rows of 127px in 705px of panel — near enough to fill it,
	 * but by arithmetic rather than by construction, and a sixth item or a
	 * shorter handset tipped it into a scroll. Sharing the height out is the
	 * same thing the drilled-in levels already do, and it cannot overflow.
	 */
	.am-nav__level--root .am-nav__item {
		display: flex;
		flex-direction: column;
		flex: 1 1 0;
		min-height: 0;
	}

	.am-nav__level--root .am-nav__item > .am-nav__row {
		flex: 1 1 auto;
	}

	.am-nav__level:not(.am-nav__level--root) .am-nav__row {
		min-height: 48px;
	}

	/* Long service lists start at the top rather than centring off-screen. */
	.am-nav__level:not(.am-nav__level--root) {
		justify-content: safe flex-start;
	}
}

/*
 * Short screens — a landscape phone, or a portrait one with the browser
 * chrome and the admin bar both taking a bite.
 *
 * The row floor is the problem: five roots at the 84px minimum need 420px
 * of a panel that has about 250px to give, so the menu scrolled. Nothing
 * here is a fudge on one value — the bar, the level padding, the row floor
 * and the type all come down together, because they share one budget and
 * shrinking any one of them alone just moves where it overflows.
 *
 * The type is set against viewport height rather than width: on a landscape
 * phone the width is generous and the height is not, and it is the height
 * that decides whether five names fit.
 */
@media (max-height: 620px) {
	.am-nav-panel__bar {
		padding-block: var(--am-space-2);
	}

	.am-nav-panel__back {
		padding: 8px 16px;
	}

	.am-nav__level {
		padding-block: var(--am-space-2);
	}

	.am-nav__row {
		min-height: clamp(44px, 12vh, 84px);
	}


	.am-nav__link {
		font-size: clamp(1.25rem, 5.2vh, 2.25rem);
	}

	/* Still a 44px target, without the padding pushing the row taller. */
	.am-nav__drill {
		padding: 6px;
	}

	.am-nav__drill svg {
		width: 20px;
		height: 20px;
	}
}

/*
 * The global focus ring is brand-coloured, which is invisible against the
 * brand-coloured panel.
 */
.am-nav-panel :focus-visible {
	outline: 2px solid var(--am-white);
	outline-offset: 4px;
}

.am-nav__link:focus-visible {
	text-decoration: underline;
	text-underline-offset: .18em;
}

/*
 * Without JavaScript nothing can slide and the Back button cannot work, so the
 * panel becomes an ordinary block of nested lists in the flow. Left as-is it
 * would be a fixed, invisible sheet covering — and blocking — the whole page.
 */
.no-js .am-nav-panel {
	position: static;
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.no-js .am-nav-panel__bar {
	display: none;
}

.no-js .am-nav-panel__menu {
	overflow: visible;
}

.no-js .am-nav__level {
	position: static;
	transform: none;
	visibility: visible;
}

.no-js .am-nav__drill {
	display: none;
}

.no-js .am-nav__level .am-nav__link {
	font-size: clamp(1.1rem, 2.4vw, 1.5rem);
}

/*--------------------------------------------------------------
01 Hero
--------------------------------------------------------------*/
.am-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/*
	 * Exactly one screen — see --am-screen in base.css. A floor rather than
	 * a fixed height, so a long headline on a short window pushes the stat
	 * row down the page instead of off the bottom of it.
	 */
	min-height: var(--am-screen);
	/*
	 * The top clears the header, which is drawn over the hero rather than
	 * above it — 132px is the logo at full height plus the bar's own padding,
	 * and the floor is there so a very short window cannot slide the headline
	 * underneath it.
	 */
	padding-block: clamp(132px, 18vh, 180px) clamp(24px, 5vh, 56px);
	overflow: hidden;
	isolation: isolate;
}

/*
 * The hero's figures on a phone.
 *
 * Two by two. The row variant is auto-fit at a 150px minimum, and two of
 * those plus the 40px column gap want 340px of a content width that is 350
 * at best and 320 on a small handset — so it fell to one column and four
 * figures stacked were the tallest thing in the hero. Asked for two
 * outright, with a gap they fit inside at every phone width.
 */
@media (max-width: 767px) {
	.am-stats--row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--am-space-4);
	}

	/*
	 * Smaller than the scale gives them, because what this row costs is not
	 * its own height but the headline's position: the copy block centres in
	 * whatever is left between the header and these, so every pixel here is
	 * a pixel the headline sits higher than the middle of the screen.
	 *
	 * At the display size the labels also ran to two lines apiece, which is
	 * most of the block — 14px puts "Years of experience" back on one.
	 */
	.am-stats--row .am-stat__value {
		font-size: 1.25rem;
		line-height: 1.15;
	}

	.am-stats--row .am-stat__label {
		margin-top: var(--am-space-1);
		font-size: var(--am-fs-small);
		line-height: 1.35;
	}

	/* The artboard's 80px between copy and figures, closed up to suit. */
	.am-hero__inner {
		gap: clamp(20px, 3vh, 40px);
	}

	/*
	 * A floor, never a lock. This was once height: var(--am-screen) exactly
	 * — which held only while the content had room to spare. At the fixed
	 * 36px headline size an iPhone 7-class screen runs out, and a locked
	 * hero cannot grow: the block spilled upward over the logo instead.
	 * With the floor the render is identical wherever the content fits one
	 * screen — the inner flex still stretches to fill it — and where it
	 * does not, the hero takes the height it needs and the page scrolls.
	 */
	.am-hero {
		min-height: var(--am-screen);
		padding-block: clamp(96px, 14vh, 124px) clamp(20px, 4vh, 40px);
	}
}

/*
 * A phone on its side. The one-screen lock above assumed portrait: at a
 * 375px-tall viewport the headline, lead and figures cannot fit inside one
 * screen, so the block overflowed and was clipped against the header, top
 * first — the headline lost its first line and the copy rode up under the
 * logo and menu. On a short screen the hero stops pretending to be a
 * poster: it takes the height its content needs, keeps clear of the
 * absolute header, and the page scrolls to the rest. After the block
 * above on purpose — same specificity, so order is what wins here.
 */
@media (max-height: 520px) {
	.am-hero {
		height: auto;
		min-height: var(--am-screen);
		padding-block: 132px 40px;
	}

	.am-hero__inner {
		gap: 28px;
	}
}
/* Positioning and the scrim come from the .am-bg-media component. */

.am-hero__inner {
	display: flex;
	flex-direction: column;
	/* The artboard's 80px, given up first on a screen with no room for it. */
	gap: clamp(24px, 6vh, 80px);
	flex: 1 1 auto;
	justify-content: flex-end;
}

/*
 * The headline and intro sit in the middle of the screen; the stat row is held
 * at the foot beneath them.
 *
 * The growth is what centres it. Left to size itself the block sat at the top
 * of the space, hard under the header, and its position then moved with the
 * length of the headline — a one-line treatment name like "Oral Surgery." rode
 * far higher than the home page's three-line one. Taking the whole space and
 * centring within it puts every hero's copy in the same place, whatever the
 * headline runs to.
 */
.am-hero__content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 700px;
	margin-inline: auto;
	padding-block: clamp(8px, 4vh, 56px);
	text-align: center;
}

/*
 * Its own size rather than the h1 token, which the rest of the site still
 * takes: this is the one headline that has to fit a screen alongside a lead
 * and a row of figures. min() takes whichever of width and height is the
 * tighter constraint, so a wide short window is governed by its height and
 * nothing moves on the artboard, where the width term already wins.
 */
.am-hero__title {
	font-size: clamp(2.75rem, min(5.2vw, 7.8vh), 4.5rem);
	text-transform: uppercase;
}

/* Set in caps, so it runs wider than its point size suggests. */
@media (max-width: 767px) {
	.am-hero__title {
		/* Fixed rather than fluid: the chosen size for every phone. */
		font-size: 36px;
	}

	.am-hero__text {
		line-height: 24px;
	}
}

.am-hero__text {
	margin-top: clamp(12px, 2.5vh, 28px);
	color: rgba(var(--am-white-rgb), .9);
	font-size: var(--am-fs-lead);
	line-height: 1.6;
}

/*
 * The landing pages' pair of buttons under the intro. The row only renders
 * when a page fills the hero button fields in, so nothing here reaches the
 * other templates. Ghost for the secondary: it sits on the dark photograph.
 */
.am-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--am-space-3);
	margin-top: clamp(20px, 4vh, 40px);
}

/* On a phone the pair stacks, each button the full column width. */
@media (max-width: 767px) {
	.am-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.am-hero__actions .am-btn {
		width: 100%;
		justify-content: center;
	}
}

/* Never squeezed by the growing block above it. */
.am-hero .am-stats {
	flex: 0 0 auto;
	padding-top: clamp(8px, 2.5vh, 28px);
}

/*--------------------------------------------------------------
02 Logo strip
--------------------------------------------------------------*/
.am-logos {
	--am-logos-duration: 40s;

	background-color: var(--am-surface-cool);
	padding-block: var(--am-space-6);
}

/* Full bleed: no container, and the overflow is clipped here. */
.am-logos__viewport {
	overflow: hidden;
	width: 100%;
}

.am-logos__track {
	display: flex;
	width: max-content;
	/*
	 * Travels right to left. The track holds two copies of the list, so
	 * shifting from 0 to -50% lands the second copy exactly where the first
	 * began — the restart is invisible. Linear timing keeps the speed even;
	 * any easing would visibly stutter at the loop point.
	 */
	animation: am-logos-scroll var(--am-logos-duration) linear infinite;
	will-change: transform;
}

.am-logos__list {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-around;
	gap: 50px;
	/* At least a full screen wide, so few logos still span the viewport. */
	min-width: 100vw;
	padding-inline: clamp(20px, 3vw, 48px);
}

.am-logos__item {
	flex: 0 0 auto;
}

/*
 * Every logo on the same stage: a fixed box, the artwork contained. A
 * bare max-height let each file's own proportions decide its presence —
 * a mark with padding baked in rendered tiny while a tight crop
 * dominated the row. Full colour, as the accreditations ask.
 */
.am-logos__item img {
	width: 180px;
	height: 90px;
	object-fit: contain;
}

@media (max-width: 768px) {
	.am-logos__list {
		gap: 30px;
	}

	.am-logos__item img {
		width: 100px;
		height: 30px;
	}
}

/*
 * Keeps running under the pointer, by request. Focus is the exception: a
 * keyboard user cannot activate a link that is sliding away from them, so the
 * track holds still only while a logo is actually focused. That never fires
 * for mouse users.
 */
.am-logos:focus-within .am-logos__track {
	animation-play-state: paused;
}

@keyframes am-logos-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.am-logos__track {
		animation: none;
		width: 100%;
	}

	/* Static, and the duplicate would just be noise. */
	.am-logos__list[aria-hidden="true"] {
		display: none;
	}

	.am-logos__list {
		flex-wrap: wrap;
		justify-content: center;
		min-width: 0;
		width: 100%;
	}
}

/*--------------------------------------------------------------
03 Approach
--------------------------------------------------------------*/
.am-approach {
	/* Tune the decoration without touching the rules below. */
	/*
	 * Against the height, not the width. This is the space above and below
	 * the copy in a section that is meant to be one screen — measured in vw
	 * it was 160px top and bottom on a laptop, 320px of a 900px screen, and
	 * the section came out at 950px however short the copy was. A wide short
	 * window is exactly where a width-derived gap is most wrong.
	 */
	--am-approach-gap: clamp(32px, 6vh, 96px);
	--am-approach-ornament-width: clamp(180px, 18vw, 340px);
	--am-approach-watermark-width: clamp(140px, 15vw, 300px);
	--am-approach-watermark-opacity: .5;

	position: relative;
	overflow: hidden;
	isolation: isolate;
	/* The gap below supplies the vertical rhythm instead. */
	padding-block: 0;

	/*
	 * One screen, and a floor rather than a fixed height: the copy is
	 * editable, and a section told it is exactly 100vh would clip the day
	 * someone writes a third paragraph. --am-screen rather than 100vh so it
	 * discounts the admin bar and uses svh where the browser has it — the
	 * same measure the hero is built on.
	 */
	display: flex;
	flex-direction: column;
	min-height: var(--am-screen);
}

/*
 * The 160px gap lives here rather than on the ornaments, so it is measured
 * from the ornament's actual bottom edge to the text — exact whatever height
 * the uploaded artwork happens to be.
 */
/*
 * Takes the height the ornaments do not and centres the copy in it, so the
 * two marks sit at the top and bottom of the screen and the text lands
 * between them. space-between on the section would have centred the copy
 * only while both ornaments were the same height, which is a property of
 * whatever artwork happens to be uploaded rather than something to rely on.
 */
.am-approach__inner {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: var(--am-approach-gap);
}

/*
 * Ornaments stay in normal flow (not absolute) so they genuinely push the
 * content down. Absolute positioning would overlap the gap and the spacing
 * would shift with every different image.
 */
.am-approach__ornament {
	position: relative;
	z-index: 0;
	width: var(--am-approach-ornament-width);
	margin-inline: auto;
	pointer-events: none;
}

.am-approach__ornament img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * The marks count against the same screen the copy does, and their height
 * comes from whatever artwork is uploaded — a tall drawing would put the
 * section over a screen on its own. Capped by height and given its width
 * back, so it shrinks whole rather than being squashed.
 */
@media (min-width: 900px) {
	.am-approach__ornament img {
		max-height: 20vh;
		width: auto;
		margin-inline: auto;
	}
}

/* Anchored to the bottom-left corner, at its own natural proportions. */
.am-approach__watermark {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 0;
	width: var(--am-approach-watermark-width);
	opacity: var(--am-approach-watermark-opacity);
	pointer-events: none;
	line-height: 0;
}

.am-approach__watermark img {
	display: block;
	width: 100%;
	height: auto;
	/* Scales to fit — never cropped or stretched the way cover would. */
	object-fit: contain;
}

/* Below this the copy would sit on top of the watermark and lose contrast. */
@media (max-width: 900px) {
	.am-approach__watermark {
		display: none;
	}

	/*
	 * 22vw of a phone is under the 90px floor, so the mark sat at its
	 * smallest on exactly the screens where it had least around it to be
	 * read against — a 90px drawing under a full-width heading reads as
	 * something that failed to load rather than as a divider.
	 */
	.am-approach__ornament {
		width: clamp(140px, 42vw, 220px);
	}
}

.am-approach__grid {
	display: grid;
	gap: var(--am-space-7);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
	.am-approach__grid {
		grid-template-columns: minmax(0, 1fr) 200px;
		gap: var(--am-space-8);
	}
}

.am-approach .am-section-head {
	margin-bottom: var(--am-space-6);
}

.am-approach__body {
	max-width: 700px;
}

@media (min-width: 1024px) {
	.am-approach__body {
		margin-left: calc(220px + var(--am-space-7));
	}
}


/*--------------------------------------------------------------
04 Treatments
--------------------------------------------------------------*/
.am-treatments__groups {
	display: flex;
	flex-direction: column;
	gap: var(--am-space-8);
}

.am-treatment-group__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--am-space-4);
	padding-bottom: var(--am-space-4);
}

.am-treatment-group__title {
	font-size: var(--am-fs-h3);
}

.am-treatment-group__consultant {
	color: var(--am-muted);
	font-size: var(--am-fs-lead);
}

/*
 * Tiles sit in a row with a 12px gap either side of a 1px rule, matching the
 * design's explicit divider elements. Flex rather than grid, because the rules
 * are real elements in the flow, not gap showing a background through.
 */
/*
 * Declared on the group, not on the tile row: the closing rule is a sibling of
 * that row, and custom properties only inherit downwards. Set on the row, the
 * rule could not see it and its margin silently collapsed to zero.
 */
.am-treatment-group {
	--am-treatment-gap: 12px;
}

.am-treatment-group__tiles {
	display: flex;
	align-items: stretch;
	gap: var(--am-treatment-gap);
}

.am-treatment-group__tiles > .am-tile {
	flex: 1 1 0;
	min-width: 0;
}

.am-treatment-group__divider {
	flex: 0 0 1px;
	align-self: stretch;
	background-color: var(--am-brand);
}

/* Closes the group, 12px below the tiles. */
.am-treatment-group__rule {
	display: block;
	height: 1px;
	margin-top: var(--am-treatment-gap);
	background-color: var(--am-brand);
}

/*
 * The section's button renders twice — in the head and after the cards —
 * and these show exactly one of the two: the head's on desktop, the
 * bottom one full-width on a phone, where the head is a whole screen
 * above the tiles it introduces.
 */
.am-treatments__cta {
	display: none;
}

@media (max-width: 767px) {
	.am-treatments .am-section-head__cta {
		display: none;
	}

	.am-treatments__cta {
		display: block;
		margin-top: var(--am-space-6);
	}

	.am-treatments__cta .am-btn {
		width: 100%;
		justify-content: center;
	}
}

/*
 * Stacked on small screens. In a column, the same divider rule becomes a
 * horizontal hairline with no extra markup — flex-basis is its height and
 * align-self: stretch gives it the full width.
 */
@media (max-width: 767px) {
	.am-treatment-group__tiles {
		flex-direction: column;
	}
}

/*--------------------------------------------------------------
05 Care team
--------------------------------------------------------------*/
.am-team {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.am-team__backdrop {
	position: absolute;
	inset: 0 0 auto;
	z-index: -1;
	height: 62%;
	/*
	 * Without this the photograph stops dead in a hard line across the page.
	 * Fading the last third lets it settle into the section background.
	 */
	-webkit-mask-image: linear-gradient(180deg, rgb(0 0 0) 0%, rgb(0 0 0) 62%, rgb(0 0 0 / 0) 100%);
	mask-image: linear-gradient(180deg, rgb(0 0 0) 0%, rgb(0 0 0) 62%, rgb(0 0 0 / 0) 100%);
}

.am-team__backdrop img {
	width: 100%;
	height: 100%;
}


.am-member {
	display: grid;
	gap: var(--am-space-6);
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
}

@media (min-width: 900px) {
	/*
	 * Equal outer columns, so the portrait sits on the true centre line. With
	 * an "auto" third column the registration block sized to its own text and
	 * pushed the photo off to the right.
	 */
	.am-member {
		grid-template-columns: minmax(0, 1fr) minmax(0, 420px) minmax(0, 1fr);
		gap: var(--am-space-7);
	}

	/* Keeps the registration hard right now its column is full width. */
	.am-member__registration {
		justify-self: end;
		/*
		 * And in the last column even when the photo between them is not
		 * uploaded yet — auto-placement would otherwise pull it into the
		 * photo's slot in the middle of the row.
		 */
		grid-column: -2 / -1;
	}
}

.am-member__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--am-space-4);
	max-width: 420px;
}

.am-member__name {
	font-size: var(--am-fs-h3);
}

.am-member__role {
	margin-top: var(--am-space-2);
	color: var(--am-muted);
	font-size: var(--am-fs-lead);
}

.am-member__bio {
	font-size: var(--am-fs-lead);
	line-height: 1.5;
}

.am-member__photo {
	border-radius: var(--am-radius);
	overflow: hidden;
}

.am-member__photo img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.am-member__registration {
	display: flex;
	flex-direction: column;
	gap: var(--am-space-3);
}

.am-member__registration li {
	color: var(--am-ink);
	font-family: var(--am-font-display);
	font-size: var(--am-fs-h4);
}

/*
 * The underline belongs to the anchor, not the li. A decoration set on the li
 * propagates down into the link and cannot be recoloured by it, so on hover the
 * text would turn brand while the rule beneath it stayed ink. As the anchor's
 * own decoration it uses currentColor and the two move together. It also leaves
 * an unlinkable number un-underlined, which is right: an underline that is not
 * a link only misleads. Colour, hover and focus ring come from base.css.
 */
.am-member__registration a {
	text-decoration: underline;
	text-underline-offset: .2em;
}

.am-team__carousel .am-carousel-nav {
	justify-content: flex-end;
}

/*
 * The care team on a phone.
 *
 * Source order is content, photo, registration — right for the wide
 * three-column row, wrong stacked, where it opens with a name and makes
 * you scroll past a biography to find out whose face it is. order: puts
 * the portrait first without touching the markup, so the reading order
 * a screen reader follows is unchanged.
 */
@media (max-width: 767px) {
	.am-member {
		position: relative;
		gap: var(--am-space-5);
		/*
		 * The row the button and the arrows share, reserved — sized for
		 * the button plus a clear margin above it, so the row never
		 * crowds the registration numbers.
		 */
		padding-bottom: 74px;
	}

	.am-member__photo {
		order: 1;
	}

	.am-member__content {
		order: 2;
		max-width: none;
	}

	.am-member__registration {
		order: 3;
	}

	/*
	 * The registration numbers are set at the h4 step, which is a display
	 * size on a phone — two underlined lines at 24px read as the loudest
	 * thing on the card, above the name they belong to.
	 */
	.am-member__registration {
		gap: var(--am-space-2);
	}

	.am-member__registration li {
		font-size: var(--am-fs-ui);
	}


	/*
	 * The button and the arrows sit on one line, and they are not siblings:
	 * the button is inside a slide, the arrows are outside the viewport
	 * altogether. Rather than pull either out of its place in the markup,
	 * both are anchored to the bottom edge of the box they are already in —
	 * the slide for one, the carousel for the other. Those two edges are the
	 * same edge, because the slides stretch to a common height and the nav
	 * is out of flow, so the pair lands level whatever any one member has
	 * written about themselves.
	 */
	.am-member__content .am-btn {
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.am-team__carousel {
		position: relative;
	}

	.am-team__carousel .am-carousel-nav {
		position: absolute;
		right: 0;
		bottom: 0;
		margin-top: 0;
	}

	.am-team__carousel .am-carousel-nav__count {
		display: none;
	}
}

/*
 * The consultant card on a phone held upright: portrait, name, biography,
 * registrations and the button row, all inside one screen.
 *
 * The photograph is the only part that can give: everything under it is
 * type at a size the rest of the site sets, and shrinking that to make
 * room would be shrinking the words to fit the picture. At 4:5 the
 * portrait alone was over half a screen before the name had been read,
 * so it takes a share of the screen instead of a share of the width.
 *
 * Sized against --am-screen rather than vh: that token is 100svh, the
 * screen as it is with the browser's own bar showing, which is the screen
 * the card actually has to fit inside. The ceiling stops a tall phone
 * from turning the share back into an oversized portrait.
 */
@media (max-width: 767px) and (orientation: portrait) {
	.am-member__photo img {
		height: min(calc(var(--am-screen) * .46), 400px);
		aspect-ratio: auto;
		/*
		 * The height above is a crop, and a centred crop takes the same
		 * amount off the top as the bottom — on a head-and-shoulders
		 * portrait that is the crown of the head. Anchored to the top, so
		 * everything that comes off comes off the foot of the frame, which
		 * on these portraits is jacket.
		 */
		object-position: top;
	}
}

/*--------------------------------------------------------------
06 Results
--------------------------------------------------------------*/
/*
 * Slides per view are set here in CSS and measured by the carousel script, so
 * the paging follows the breakpoints rather than being hard-coded in JS.
 */
.am-results__track {
	--am-results-gap: var(--am-space-4);
	--am-results-per-view: 1;
	/*
	 * How much of the row is given over to the next card showing at the
	 * edge. Zero here, so every row that does not ask for one is laid out
	 * exactly as it was before the setting existed.
	 */
	--am-results-peek: 0px;

	gap: var(--am-results-gap);
}

.am-results__slide {
	flex: 0 0 calc(
		(100% - var(--am-results-peek) - (var(--am-results-per-view) - 1) * var(--am-results-gap))
		/ var(--am-results-per-view)
	);
	min-width: 0;
}

@media (min-width: 560px) {
	.am-results__track {
		--am-results-per-view: 2;
	}
}

@media (min-width: 1024px) {
	.am-results__track {
		--am-results-per-view: 4;
	}
}

.am-results__carousel .am-carousel-nav {
	justify-content: flex-end;
}

/*
 * The wide row — "A closer look" on the case studies page. The same
 * comparison drawn in the design's landscape proportion, three across with
 * the fourth showing at the edge so it reads as a row that carries on.
 */
.am-compare--wide .am-compare__frame {
	aspect-ratio: 432 / 334;
}

@media (min-width: 1024px) {
	/*
	 * 56px is the peek the design shows: 20px of gap and 36px of the
	 * fourth card. It is also what makes the arithmetic land on the
	 * artboard's card exactly — (1392 - 56 - 40) / 3 = 432.
	 */
	.am-results--wide .am-results__track {
		--am-results-per-view: 3;
		--am-results-peek: 56px;
	}
}

/*
 * The two rows' grounds, on the one page that draws both.
 *
 * Scoped to the template rather than set on .am-results, which the home
 * page also draws — there the row sits on white between two tinted blocks,
 * and repainting it from here would change a page this design says nothing
 * about. The alternation is the design's: soft, tint, soft, tint.
 */
.am-case-studies .am-results {
	background-color: var(--am-surface-soft);
}

.am-case-studies .am-results--wide {
	background-color: var(--am-surface-tint);
}

/* Nothing to page through — hide the control rather than show it dead. */
.am-carousel--static .am-carousel-nav {
	display: none;
}

/*--------------------------------------------------------------
08 Process
--------------------------------------------------------------*/
/*
 * .am-section sets overflow:hidden for the reveal animation, but an ancestor
 * with a clipping overflow silently disables position:sticky on everything
 * inside it — the stage below would simply not pin.
 */
.am-process {
	/*
	 * The three dials for the pinned changeover, together so they can be tuned
	 * against one another: how long a step takes to swap, the curve it moves
	 * on, and how far it travels while doing it.
	 */
	--am-process-duration: .55s;
	--am-process-ease: cubic-bezier(.33, 0, .2, 1);
	--am-process-shift: 40px;

	overflow: visible;
}

.am-process__list {
	display: flex;
	flex-direction: column;
	gap: var(--am-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.am-process__step {
	display: grid;
	gap: var(--am-space-6);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 900px) {
	/*
	 * Even halves. Equal tracks also make the alternating layout safe by
	 * construction: `order` decides which side each block sits on, and with
	 * both columns the same width the image cannot end up a different size on
	 * alternate steps the way it would with unequal tracks.
	 */
	.am-process__step {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--am-space-8);
		align-items: center;
	}

	.am-process__step--reverse .am-process__content {
		order: 2;
	}

	.am-process__step--reverse .am-process__media {
		order: 1;
	}
}

.am-process__content {
	padding-top: var(--am-space-5);
}

/*
 * The stacked steps on a phone.
 *
 * All three gaps here are set for the two-column layout, where they read
 * as the space around a row. Stacked into one column they land end to end
 * and add up: 80px between steps, 40px between a step's words and its
 * photograph, and 28px above the number again — most of a screen of empty
 * space for every step, which is what makes the section feel like it is
 * mostly scrolling.
 *
 * The step's own gap stays the largest of the three, so a step still reads
 * as one block with a break after it rather than four evenly spaced parts.
 */
@media (max-width: 767px) {
	.am-process__list {
		gap: var(--am-space-6);
	}

	.am-process__step {
		gap: var(--am-space-4);
	}

	/* The list gap above it is the separation now. */
	.am-process__content {
		padding-top: 0;
	}

	/* The title sits close under its number, as it does in the design. */
	.am-process__title {
		margin-top: var(--am-space-2);
	}

	.am-process__text {
		margin-top: var(--am-space-3);
	}
}

.am-process__number {
	color: var(--am-muted);
	font-family: var(--am-font-display);
	font-size: var(--am-fs-h3);
	line-height: 1.1;
}

.am-process__title {
	margin-top: var(--am-space-4);
	font-size: var(--am-fs-h3);
}

.am-process__text {
	margin-top: var(--am-space-4);
	font-size: var(--am-fs-lead);
	line-height: 1.5;
}

.am-process__media {
	aspect-ratio: 5 / 4;
	border-radius: var(--am-radius);
	overflow: hidden;
}

.am-process__media img {
	width: 100%;
	height: 100%;
	/*
	 * Fills the frame, anchored to the top of the shot. Whatever has to go is
	 * taken off the bottom rather than split evenly top and bottom, which keeps
	 * heads and faces in frame when the box is shorter than the image.
	 */
	object-fit: cover;
	object-position: top;
}

/* Only drawn while pinned. */
.am-process__ticks {
	display: none;
}

/*
 * The imageless variant: the heading in one column, the numbered steps
 * down the other, a hairline opening every step after the first. This is
 * what the section renders when no step carries a photograph — see the
 * partial; the pinned stage below only exists to showcase imagery.
 */
.am-process__bare {
	display: grid;
	gap: clamp(28px, 4vw, 64px);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 900px) {
	.am-process__bare {
		/* Near-even, the steps a shade wider, as the crop measures. */
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	}
}

.am-process__bare-head {
	display: flex;
	flex-direction: column;
}

.am-process__bare .am-section-head {
	margin-bottom: 0;
}

/* The drawing sits under the heading, at a weight that reads as texture. */
.am-process__art {
	margin-top: clamp(32px, 6vw, 96px);
}

.am-process__art img {
	display: block;
	width: min(100%, 560px);
	height: auto;
}

@media (max-width: 899px) {
	/* Beside a stacked list it is decoration nobody scrolled for. */
	.am-process__art {
		display: none;
	}
}

.am-process__bare-list {
	display: grid;
	gap: clamp(28px, 3vw, 48px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A rule opens every step, the first included, as the design draws it. */
.am-process__bare-step {
	border-top: 1px solid var(--am-line);
	padding-top: clamp(24px, 2.6vw, 40px);
}

/* The number carries the eye; the title is quiet beneath it. */
.am-process__bare-step .am-process__number {
	margin-bottom: var(--am-space-4);
	color: var(--am-brand);
	font-family: var(--am-font-display);
	font-size: clamp(1.5rem, 2vw, 1.875rem);
	line-height: 1;
}

.am-process__bare-step .am-process__title {
	margin-bottom: var(--am-space-2);
	font-size: clamp(1.125rem, 1.35vw, 1.25rem);
}

.am-process__bare-step .am-process__text {
	color: rgba(var(--am-ink-rgb), .72);
	font-size: var(--am-fs-base);
	line-height: 1.6;
	max-width: 62ch;
}
/*--------------------------------------------------------------
08b Process, pinned
--------------------------------------------------------------*/
/*
 * "is-pinned" is added by assets/js/site.js. Gating on it means that without
 * JavaScript — which is what drives the step changes — the section stays an
 * ordinary stacked list rather than collapsing to a single frozen step.
 */
@media (min-width: 900px) {

	/*
	 * .am-section adds up to 100px top and bottom. On a pinned section that is
	 * dead space either side of the sticky stage, and it also puts the scroller
	 * height calculation below out by that much, so the stage unpins slightly
	 * before the last step has finished its run. The stage is 100vh and centres
	 * its own contents, so nothing needs the padding.
	 */
	.am-process.is-pinned {
		padding-block: 0;
	}

	.am-process.is-pinned .am-process__scroller {
		/*
		 * One screen to pin, then a run per remaining step. This is the
		 * duration's partner, not an independent dial: it is the scroll
		 * distance a changeover gets to finish in. Cross it faster than
		 * --am-process-duration and the class flips again mid-transition, so
		 * the step being replaced is cut off part-way — which reads as text
		 * vanishing rather than fading, because the fade never gets to run.
		 *
		 * At 1.4s against 58vh almost any real scroll outpaced it. Raising the
		 * travel to compensate would only mean more scrolling for the same
		 * four steps, so the duration came down instead and the travel with
		 * it: less to scroll per step, and a fade quick enough to complete
		 * inside it.
		 */
		--am-process-travel: 46vh;

		position: relative;
		height: calc(100vh + (var(--am-process-steps, 4) - 1) * var(--am-process-travel));
	}

	.am-process.is-pinned .am-process__stage {
		position: sticky;
		top: 0;
		display: flex;
		align-items: center;
		height: 100vh;
		overflow: hidden;
	}

	.am-process.is-pinned .am-process__stage > .am-container {
		width: 100%;
	}

	/* Steps stack on one another; the height keeps the stage from collapsing. */
	/*
	 * Sits between the heading and the step beneath it. Fluid, so the gap grows
	 * on a tall screen instead of leaving the two blocks crowded together, and
	 * shrinks on a short one rather than pushing the step out of the stage.
	 */
	.am-process.is-pinned .am-section-head {
		margin-bottom: clamp(36px, 6vh, 72px);
	}

	.am-process.is-pinned .am-process__list {
		position: relative;
		display: block;
		height: min(52vh, 460px);
	}

	.am-process.is-pinned .am-process__step {
		position: absolute;
		inset: 0;
		opacity: 0;
		visibility: hidden;
		transform: translateY(var(--am-process-shift));
		/*
		 * Opacity is deliberately linear. Two steps overlap while one replaces
		 * the other, and only a linear fade keeps their opacities summing to 1
		 * the whole way across — two ease-outs give a bright double-exposure in
		 * the middle, two ease-ins a dip to near-empty. The movement keeps the
		 * eased curve, and that curve is an ease-in-out rather than the
		 * front-loaded --am-reveal-ease: an expo curve finishes most of its
		 * travel in the first third, so lengthening it only adds dead time at
		 * the end instead of a transition you can watch.
		 */
		transition:
			opacity var(--am-process-duration) linear,
			transform var(--am-process-duration) var(--am-process-ease),
			visibility var(--am-process-duration);
		will-change: opacity, transform;
	}

	.am-process.is-pinned .am-process__step.is-active {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	/* The step above the current one leaves upward, not downward. */
	.am-process.is-pinned .am-process__step.is-past {
		transform: translateY(calc(var(--am-process-shift) * -1));
	}

	.am-process.is-pinned .am-process__media {
		aspect-ratio: auto;
		height: min(52vh, 460px);
	}

	.am-process.is-pinned .am-process__content {
		padding-top: 0;
	}

	/* Progress down the side of the stage. */
	.am-process.is-pinned .am-process__ticks {
		position: absolute;
		top: 50%;
		right: 0;
		display: flex;
		flex-direction: column;
		gap: var(--am-space-3);
		margin: 0;
		padding: 0;
		list-style: none;
		transform: translateY(-50%);
	}

	.am-process.is-pinned .am-process__tick {
		width: 2px;
		height: 26px;
		margin: 0;
		background-color: rgba(var(--am-brand-rgb), .25);
		transition: background-color var(--am-transition), height var(--am-transition);
	}

	.am-process.is-pinned .am-process__tick.is-active {
		height: 40px;
		background-color: var(--am-brand);
	}
}

@media (prefers-reduced-motion: reduce) {
	.am-process.is-pinned .am-process__step {
		transition: none;
	}
}

/*--------------------------------------------------------------
09 Locations
--------------------------------------------------------------*/
/*
 * The section carries an id, so an in-page button can send someone to the
 * clinic network. This keeps the heading clear of the sticky header on the
 * templates that have one; on the templates whose header lies over the hero
 * it costs nothing, because that header scrolls away.
 */
.am-locations {
	scroll-margin-top: var(--am-space-6);
}

.am-locations__layout {
	display: grid;
	gap: var(--am-space-4);
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
}

@media (min-width: 1024px) {
	.am-locations__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 569px);
	}
}

/*
 * The map is a plain image with markers placed on it as percentages, so the
 * pins stay put at any width and the section needs no mapping library.
 */
.am-locations__map {
	position: relative;
	min-height: 360px;
	border: 1px solid var(--am-line);
	border-radius: var(--am-radius);
	overflow: hidden;
	background-color: var(--am-surface-soft);
}

.am-locations__base {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Leaflet needs a sized box before it will draw anything. */
.am-locations__canvas {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.am-locations__fallback {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.am-locations__fallback img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Markers are Leaflet divIcons, so the kite and its ripple are ordinary CSS
 * rather than anything the mapping library has to draw.
 */
.am-pin {
	/*
	 * Keep in step with iconSize / iconAnchor in assets/js/map.js: Leaflet
	 * needs the box dimensions to centre the marker on its coordinates, and
	 * the box is this size plus the 2px margin below on each edge.
	 */
	--am-pin-size: 18px;
}

.am-pin__shape {
	display: block;
	width: var(--am-pin-size);
	height: var(--am-pin-size);
	margin: 2px;
	background-color: rgba(var(--am-white-rgb), .9);
	border: 2px solid var(--am-brand);
	transform: rotate(45deg);
	transition: background-color var(--am-transition), transform var(--am-transition);
}

.am-pin:hover .am-pin__shape {
	background-color: rgba(var(--am-brand-rgb), .45);
	transform: rotate(45deg) scale(1.12);
}

.am-pin.is-active .am-pin__shape {
	background-color: var(--am-brand);
	transform: rotate(45deg) scale(1.15);
}

/* Two rings, offset by half a cycle so one is always on its way out. */
.am-pin.is-active::before,
.am-pin.is-active::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--am-pin-size);
	height: var(--am-pin-size);
	margin: calc(var(--am-pin-size) / -2) 0 0 calc(var(--am-pin-size) / -2);
	border: 2px solid var(--am-brand);
	pointer-events: none;
	animation: am-pin-ripple 2.4s cubic-bezier(.2, .6, .3, 1) infinite;
}

.am-pin.is-active::after {
	animation-delay: 1.2s;
}

@keyframes am-pin-ripple {
	from {
		opacity: .65;
		transform: rotate(45deg) scale(1);
	}

	to {
		opacity: 0;
		transform: rotate(45deg) scale(3.2);
	}
}

@media (prefers-reduced-motion: reduce) {
	/* A pulse that never stops is exactly what this preference is for. */
	.am-pin.is-active::before,
	.am-pin.is-active::after {
		animation: none;
		opacity: 0;
	}
}

/* Softens the default OSM tiles towards the site palette. */
.am-locations__canvas .leaflet-tile-pane {
	filter: grayscale(.55) sepia(.18) brightness(1.04);
}

.am-locations__canvas .leaflet-control-attribution {
	font-size: 10px;
}

/*
 * The panel is the copy, not the card.
 *
 * The white ground, the hairline and the corner belong to the viewport
 * below, so the card stands still and only what is written in it travels
 * across on a slide change. Carried here they would ride along with the
 * content and the whole card would move — which is a different effect, and
 * a noisier one beside a map that is not moving at all.
 *
 * The padding stays here rather than moving up with the rest: overflow
 * clips at the padding box, so on the viewport it would be a band the
 * outgoing clinic slides across rather than a margin it slides behind.
 */
.am-location__panel {
	display: flex;
	flex-direction: column;
	gap: var(--am-space-5);
	height: 100%;
	padding: var(--am-space-6);
}

.am-location__city {
	color: var(--am-muted);
	font-size: var(--am-fs-lead);
}

.am-location__name {
	margin-top: var(--am-space-2);
	font-size: var(--am-fs-h3);
}

.am-location__address {
	margin-top: var(--am-space-3);
	color: var(--am-muted);
	font-size: var(--am-fs-base);
	line-height: 1.5;
}

.am-location__group-title {
	margin-bottom: var(--am-space-3);
	font-size: var(--am-fs-h4);
}

.am-location__list {
	color: var(--am-muted);
	font-size: var(--am-fs-base);
	line-height: 1.5;
}

.am-location__directions {
	margin-top: auto;
	padding-top: var(--am-space-4);
	border-top: 1px solid var(--am-line);
}

/*
 * The card on a phone, tightened to fit the screen it shares with the map.
 *
 * 40px all round is most of a phone's gutter again on each side, and the
 * copy inside it is already the narrowest column on the page. Everything
 * comes down together — the padding, the gaps between blocks, the headings
 * and the leading of the lists — because what has to fit is a treatment
 * list of a dozen entries, and taking it out of any one of them alone would
 * have meant taking a lot. Nothing is cut and nothing scrolls inside the
 * card: the whole clinic is on screen, set smaller.
 *
 * This block sits AFTER every rule it overrides, and has to. A media query
 * adds no specificity of its own, so while it stood above them these
 * selectors tied with the plain ones below and lost on source order — the
 * padding took effect, because .am-location__panel is declared higher up,
 * and not one of the type sizes did.
 */
@media (max-width: 767px) {
	.am-location__panel {
		gap: var(--am-space-3);
		padding: 18px 16px;
	}

	.am-location__city {
		font-size: var(--am-fs-base);
	}

	.am-location__name {
		margin-top: 4px;
		font-size: 1.375rem;
	}

	.am-location__address {
		margin-top: 8px;
		font-size: .9375rem;
		line-height: 1.4;
	}

	/*
	 * "Surgical" and "Non-Surgical" are labels for the lists under them, not
	 * headings competing with the clinic's name. The display face and the
	 * ink carry that on their own at this size — they do not need to be half
	 * again the size of the words they introduce.
	 */
	.am-location__group-title {
		margin-bottom: 6px;
		font-size: 1rem;
	}

	.am-location__list {
		font-size: .9375rem;
		line-height: 1.4;
	}
}

.am-locations__carousel {
	display: flex;
	flex-direction: column;
}

.am-locations__carousel .am-carousel__viewport {
	flex: 1 1 auto;
	background-color: var(--am-white);
	border: 1px solid var(--am-line);
	border-radius: var(--am-radius);
}

.am-locations__carousel .am-carousel-nav {
	justify-content: flex-start;
}

/*
 * The controls row.
 *
 * It wraps, and the nav does not shrink. At 320px the buttons, the counter
 * and the link together want more room than there is, and a flex item's
 * automatic minimum size is its content — which for these buttons is a
 * 20px icon, not the 40px circle they declare. Left to shrink they go oval.
 * Wrapping drops the link to its own line instead, which is the graceful
 * version of running out of room.
 */
.am-locations__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--am-space-4);
}

.am-locations__nav .am-carousel-nav {
	flex-shrink: 0;
}

/*
 * Desktop keeps the link inside each panel, where there is room for it and
 * it reads as part of the clinic it belongs to. The shared one is for the
 * phone only.
 *
 * The top margin sits on the two children rather than on the wrapper, and
 * matches the one .am-carousel-nav already carries. Equal top margins put
 * both content centres on the same line — the offset works out of the flex
 * centring regardless of the two different heights — and, more to the
 * point, a margin on the wrapper would outlive its children being hidden.
 * Both are hidden together in two real cases: with no JavaScript, where
 * .no-js hides the nav and the phone rule below never applies, and on a
 * single-clinic desktop, where carousel-nav renders nothing at all. A
 * wrapper with a margin and no contents is 28px of blank page.
 */
.am-locations__nav-directions {
	display: none;
	margin: var(--am-space-5) 0 0;
	white-space: nowrap;
}

/*
 * On a phone the panel's own row goes and the shared link takes its place
 * at the end of the controls row, so the card is shorter by a line that
 * was identical on all nine clinics.
 *
 * Gated on :not(.no-js), which is the honest test: the shared link is
 * re-pointed by script, and without script the carousel is a plain stacked
 * list of every clinic at once — one link could not follow anything there,
 * so the per-panel links stay and this never appears. header.php strips
 * .no-js inline, so this costs a visitor with JavaScript nothing.
 *
 * :not([hidden]) so the script can take the link away for a clinic with no
 * map URL — display:block on a class would otherwise beat the browser's
 * own [hidden] rule and show it regardless.
 */
@media (max-width: 767px) {
	html:not(.no-js) .am-location__directions {
		display: none;
	}

	html:not(.no-js) .am-locations__nav-directions:not([hidden]) {
		display: block;
		margin-left: auto;
	}

	/*
	 * Closer to the card than the desktop's 28px. Both children carry it, so
	 * the two stay on one line — see the note on the base rule above.
	 */
	.am-locations__nav .am-carousel-nav,
	.am-locations__nav-directions {
		margin-top: var(--am-space-3);
	}

	/*
	 * Set at the size of the counter beside it. It is a control in a row of
	 * controls here, not a line of copy in the card it used to sit in.
	 */
	.am-locations__nav-directions {
		font-size: .8125rem;
	}
}

/*
 * Map and clinic card on one screen, on a phone or tablet held upright.
 *
 * The two belong together — the pin and the panel describing it — and read
 * as one thing only while both are in view. The map takes a fixed share of
 * the screen; the card below is left at the height of its own contents,
 * which the block above tightens enough that the pair still comes to about
 * a screen.
 *
 * Only the map is given a height, deliberately. Holding the layout to a
 * screen made the card stretch to fill whatever the map left over, and on a
 * short clinic that was a band of empty white between the last treatment
 * and the card's own border, with the controls pushed down below it. The
 * card ends where its content ends instead, and the controls follow it up.
 *
 * A length rather than a percentage: with nothing setting the layout's
 * height there is nothing for a percentage to resolve against.
 *
 * Gated on :not(.no-js): without script the track becomes a plain stacked
 * list of every clinic, and constraining that would bury eight of the nine.
 */
@media (max-width: 1023px) and (orientation: portrait) {
	html:not(.no-js) .am-locations__map {
		height: calc(var(--am-screen) * .3);
		min-height: 0;
	}
}

/*--------------------------------------------------------------
10 Testimonials
--------------------------------------------------------------*/

.am-review {
	display: flex;
	flex-direction: column;
	gap: var(--am-space-5);
	padding: var(--am-space-5);
	background-color: var(--am-white);
	border: 1px solid var(--am-line);
	border-radius: var(--am-radius);
}

.am-review__quote {
	flex: 1 1 auto;
}

.am-review__quote p {
	font-size: var(--am-fs-lead);
	line-height: 1.5;
}

.am-review__author {
	color: var(--am-ink);
	font-size: var(--am-fs-lead);
}

.am-review__date {
	margin-top: var(--am-space-1);
	color: var(--am-muted);
	font-size: var(--am-fs-base);
}

/*
 * The review card on a phone. One card fills the width, so the quote is
 * already the widest measure on the page — at lead size in 28px of padding
 * a five-line review runs to most of a screen on its own.
 */
@media (max-width: 767px) {
	.am-review {
		gap: var(--am-space-4);
		padding: 20px 18px;
	}

	.am-review__quote p {
		font-size: var(--am-fs-base);
		line-height: 1.55;
	}

	.am-review__author {
		font-size: var(--am-fs-base);
	}

	.am-review__date {
		font-size: var(--am-fs-small);
	}

	.am-review__rating svg {
		width: 16px;
		height: 16px;
	}

	.am-testimonials__top .am-section-head {
		margin-bottom: var(--am-space-5);
	}
}

/*--------------------------------------------------------------
11 Contact
--------------------------------------------------------------*/
/*
 * A full screen tall, with its contents centred in that screen.
 *
 * min-height rather than height: .am-section clips its own overflow for the
 * reveal animation, so a fixed height would cut the bottom off the form on any
 * screen too short to hold the heading, the cards and the form together — the
 * submit button would simply vanish. As a floor it fills the screen when there
 * is room and grows past it when there is not. box-sizing is border-box, so the
 * section's own padding counts inside the screen instead of adding to it.
 */
.am-contact {
	display: flex;
	align-items: center;
	min-height: var(--am-screen);
	/* The enquiry redirect and the landing hero's button both land here. */
	scroll-margin-top: var(--am-space-6);
}

.am-contact__grid {
	display: grid;
	gap: var(--am-space-5);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 1024px) {
	.am-contact__grid {
		grid-template-columns: minmax(0, 499px) minmax(0, 1fr);
		gap: var(--am-space-6);
	}

	/*
	 * The cards hang from the bottom of the row rather than the top, so their
	 * lower edge lines up with the base of the form and the empty space falls
	 * above them, under the heading. The row is as tall as the form, so this is
	 * align-self on the item rather than a change to the grid's align-items —
	 * the form itself must stay at the top.
	 */
	.am-contact__details {
		align-self: end;
	}
}

.am-contact__details {
	display: flex;
	flex-direction: column;
	gap: var(--am-space-4);
}

.am-contact-card {
	display: flex;
	gap: var(--am-space-4);
	padding: var(--am-space-5);
	background-color: var(--am-white);
	border: 1px solid var(--am-brand);
	border-radius: var(--am-radius);
}

.am-contact-card__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--am-brand);
	color: var(--am-white);
}

.am-contact-card__title {
	margin-bottom: var(--am-space-3);
	font-size: var(--am-fs-h4);
}

.am-contact-card__body p {
	font-size: var(--am-fs-base);
	line-height: 1.6;
}

/*
 * The contact cards on a phone. 28px of padding around a 48px disc and two
 * short lines makes each card most of a screen tall, and there are three of
 * them before the form even starts.
 */
@media (max-width: 767px) {
	.am-contact-card {
		gap: var(--am-space-3);
		padding: 18px 16px;
	}

	.am-contact-card__icon {
		width: 38px;
		height: 38px;
	}

	.am-contact-card__icon svg {
		width: 18px;
		height: 18px;
	}

	.am-contact-card__title {
		margin-bottom: var(--am-space-2);
		font-size: var(--am-fs-ui);
	}
}

.am-contact__form {
	padding: var(--am-space-6);
	background-color: var(--am-white);
	border: 1px solid var(--am-brand);
	border-radius: var(--am-radius);
}

/*
 * 40px of panel around fields that carry their own 16px is padding twice
 * over, and on a phone it is 80px of the width gone before a field starts.
 * The landing's panel already clamps down to 22px; this is the same idea.
 */
@media (max-width: 767px) {
	.am-contact__form {
		padding: 18px 16px;
	}
}

/*--------------------------------------------------------------
12 Closing CTA
--------------------------------------------------------------*/
.am-cta {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 560px;
	padding-block: var(--am-space-8);
	overflow: hidden;
	isolation: isolate;
	text-align: center;
}

.am-cta__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

/*
 * A scrim between the photograph and the words. The rooms these use are
 * bright and busy — pale walls, glass, brass — and white type laid straight
 * onto one is legible in the crop it was chosen in and nowhere else.
 *
 * Weighted to the middle, because unlike the hero this section centres its
 * copy rather than sitting it at the foot: the darkest part of the wash is
 * where the heading actually is, and the edges stay light enough that the
 * picture is still doing its job.
 */
.am-cta__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 78% 62% at 50% 50%, rgba(var(--am-ink-rgb), .5) 0%, rgba(var(--am-ink-rgb), 0) 100%),
		linear-gradient(180deg, rgba(var(--am-ink-rgb), .42) 0%, rgba(var(--am-ink-rgb), .3) 45%, rgba(var(--am-ink-rgb), .5) 100%);
}

.am-cta__media img,
.am-cta__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.am-cta__inner {
	max-width: 700px;
}

.am-cta__title {
	font-size: var(--am-fs-h2);
}

.am-cta__text {
	margin-block: var(--am-space-4) var(--am-space-6);
	color: rgba(var(--am-white-rgb), .9);
	font-size: var(--am-fs-lead);
	line-height: 1.6;
}

/*--------------------------------------------------------------
13 Treatment groups
--------------------------------------------------------------*/
/* Standalone, so it carries the spacing the section-head grid would give it. */
.am-tgroups__eyebrow {
	margin-bottom: var(--am-space-6);
}

.am-tgroups__list {
	display: flex;
	flex-direction: column;
	gap: var(--am-space-8);
}

.am-tgroup {
	--am-tgroup-gap: 12px;
}

/* Tighter than a section head sits alone: the rule below it is the real break. */
.am-tgroup .am-section-head {
	margin-bottom: var(--am-space-5);
}

/*
 * The middle track is the hairline between two tiles — a real column rather
 * than a gap with a background showing through, which is how the design draws
 * it. The full-width rules are grid items spanning all three tracks, putting
 * one above the tiles, one between each pair of rows and one below.
 */
.am-tgroup__tiles {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
	gap: var(--am-tgroup-gap);
	align-items: stretch;
}

.am-tgroup__divider,
.am-tgroup__rule {
	background-color: var(--am-brand);
}

.am-tgroup__rule {
	grid-column: 1 / -1;
	height: 1px;
}

/* An odd last card fills the row instead of sitting half-width beside a gap. */
.am-tile--wide {
	grid-column: 1 / -1;
}

@media (min-width: 900px) {
	/*
	 * The design fixes the card at 685.5 x 395.17, so it is the proportion that
	 * has to hold, not a height — a fixed height is only right at one viewport
	 * width. min-height: auto replaces the clamp the tile carries for its
	 * centred variant, and as a grid item that also lets an unusually long
	 * description push the card taller rather than being clipped by the tile's
	 * own overflow: hidden.
	 */
	.am-tgroup__tiles .am-tile {
		min-height: auto;
		aspect-ratio: 685.5 / 395.17;
	}

	/*
	 * The wide card spans both columns, and at the proportion above that made
	 * it twice as tall as well as twice as wide — some 800px of photograph,
	 * with the heading stranded at the top and the button most of a screen
	 * below it.
	 *
	 * Twice the width at the same height instead: one row tall, matching the
	 * pair it follows, so it reads as a wide card in the same grid rather than
	 * as a hero that wandered in. The 1371 is the two card widths; the height
	 * is the one they already have.
	 */
	.am-tgroup__tiles .am-tile--wide {
		aspect-ratio: 1371 / 395.17;
	}
}

@media (max-width: 767px) {
	.am-tgroup__tiles {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * In one column the vertical hairline becomes a row of its own, so it needs
	 * a height — as a column track it had one implicitly.
	 */
	.am-tgroup__divider {
		height: 1px;
	}
}

/*--------------------------------------------------------------
14 FAQ
--------------------------------------------------------------*/
.am-faq__item {
	border-bottom: 1px solid var(--am-line);
}

/*
 * display:flex also drops the disclosure triangle in Chrome and Firefox.
 * Safari draws its own marker, which needs turning off separately.
 */
.am-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--am-space-5);
	padding-block: var(--am-space-5);
	list-style: none;
	cursor: pointer;
	font-size: var(--am-fs-lead);
	transition: color var(--am-transition);
}

.am-faq__q::-webkit-details-marker {
	display: none;
}

.am-faq__q:hover {
	color: var(--am-brand);
}

.am-faq__a {
	max-width: 92ch;
	padding-bottom: var(--am-space-5);
	color: var(--am-body);
	line-height: 1.65;
}

/* A plus that loses its upright to become a minus. */
.am-faq__icon {
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--am-brand);
}

.am-faq__icon::before,
.am-faq__icon::after {
	content: "";
	position: absolute;
	background-color: currentColor;
}

.am-faq__icon::before {
	inset: 50% 0 auto 0;
	height: 1px;
}

.am-faq__icon::after {
	inset: 0 auto 0 50%;
	width: 1px;
	transition: opacity var(--am-transition), rotate var(--am-transition);
}

.am-faq__item[open] .am-faq__icon::after {
	opacity: 0;
	rotate: 90deg;
}

/*--------------------------------------------------------------
15 Treatments we offer (single service)
--------------------------------------------------------------*/
/*
 * Cards two across, with real hairlines around and between them. The design
 * draws those as rules rather than as gaps showing a background through, so
 * the middle grid track IS the vertical hairline and the horizontal rules are
 * grid items spanning all three tracks. That also means they survive the grid
 * collapsing to a single column.
 *
 * The gap is what holds the vertical divider clear of the rule above and below
 * it, as the design has it. It is declared on the section rather than on the
 * grid because the rules are siblings of the cards and custom properties only
 * inherit downwards.
 */
.am-offer {
	--am-offer-gap: 12px;
}

/* The rule beneath the copy is the real break, so the head sits tighter. */
.am-offer .am-section-head {
	margin-bottom: var(--am-space-7);
}

.am-offer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
	gap: var(--am-offer-gap);
	align-items: stretch;
}

/*
 * Brand taupe at full strength, 1px, as the design specifies — the same rule
 * treatment the treatment-groups section uses. Not --am-line: that token is
 * the faint warm grey for panel edges, and it leaves these hairlines washed
 * out against the section's soft ground.
 */
.am-offer__divider,
.am-offer__rule {
	background-color: var(--am-brand);
}

.am-offer__rule {
	grid-column: 1 / -1;
	height: 1px;
}

/*
 * Two alignments, and they are not the same one.
 *
 * align-self keeps the card at the TOP of its row. The row is as tall as the
 * taller of the pair, and the design starts both titles on the same line —
 * letting the shorter card stretch and centre instead would float its title
 * down into the middle of the row, out of step with its neighbour.
 *
 * align-items then holds the icon to the top of that card's own text block,
 * dropped by the padding below so it starts alongside the description rather
 * than the cap line of the title. Nothing else in the row may stretch, or the
 * first alignment is undone — the divider is the exception, and it stretches
 * from the grid.
 */
.am-offer__card {
	align-self: start;
	display: flex;
	align-items: flex-start;
	gap: clamp(24px, 7vw, 104px);
	padding: clamp(32px, 4vw, 60px) clamp(16px, 2.6vw, 44px);
}

/*
 * An odd number of cards leaves the last one without a partner: it takes the
 * whole row and centres itself in it, rather than sitting half-width beside a
 * gap. Its body keeps the same measure, so it still reads as one of the pair
 * rather than as a paragraph stretched across the page.
 */
.am-offer__card--wide {
	grid-column: 1 / -1;
	justify-content: center;
}

/*
 * Held level with the top of the copy, not the top of the card: the offset
 * clears the title's first line so the icon reads against the description.
 * Fixed rather than fluid, so it stays put as the title size changes.
 */
.am-offer__icon {
	flex: 0 0 auto;
	width: clamp(76px, 8vw, 120px);
	padding-top: 25px;
	line-height: 0;
}

.am-offer__icon img {
	width: 100%;
	height: auto;
}

.am-offer__body {
	min-width: 0;
	max-width: 44ch;
}

.am-offer__title {
	font-size: clamp(1.5rem, 2.1vw, 2rem);
	line-height: 1.25;
}

.am-offer__text {
	margin-top: var(--am-space-4);
	color: var(--am-body);
	font-size: var(--am-fs-base);
	line-height: 1.7;
}

@media (max-width: 767px) {
	.am-offer__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * In one column the vertical hairline becomes a row of its own, so it
	 * needs a height — as a column track it had one implicitly.
	 */
	.am-offer__divider {
		height: 1px;
	}

	/* Nothing to centre against once every card owns the full width. */
	.am-offer__card--wide {
		justify-content: flex-start;
	}

	/*
	 * Icon, then title, then text — which is the order they are written in,
	 * so the column needs no reordering. Side by side the icon took a fixed
	 * 76px off a 350px row and left the title wrapping to three lines beside
	 * it; stacked, both get the full measure.
	 */
	.am-offer__card {
		flex-direction: column;
		gap: var(--am-space-4);
		padding: var(--am-space-5) 0;
	}

	/* The offset existed to clear the title's first line beside it. */
	.am-offer__icon {
		width: 64px;
		padding-top: 0;
	}

	.am-offer__text {
		margin-top: var(--am-space-3);
	}
}

/*--------------------------------------------------------------
16 When is it needed (single service)
--------------------------------------------------------------*/
.am-when {
	/*
	 * A letterbox banner on a wide screen. One dial, so the crop can be tuned
	 * without touching the rules below.
	 */
	--am-when-ratio: 16 / 6;
}

.am-when__media {
	margin-top: var(--am-space-7);
	aspect-ratio: var(--am-when-ratio);
	border-radius: var(--am-radius);
	overflow: hidden;
}

.am-when__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 767px) {
	/* The wide ratio would leave a strip too shallow to make anything out. */
	.am-when {
		--am-when-ratio: 4 / 3;
	}
}

/*--------------------------------------------------------------
17 Why Allura (about page)
--------------------------------------------------------------*/
/*
 * The same hairline grid as the treatments grid on a service page: the middle
 * column track IS the vertical rule, and the horizontal rules are grid items
 * spanning all three tracks, so both survive the grid collapsing to a single
 * column. What differs is the card — a number set over the title, rather than
 * an icon beside it.
 *
 * The gap holds the vertical divider clear of the rules above and below it. It
 * is declared on the section because the rules are siblings of the cards, and
 * custom properties only inherit downwards.
 */
.am-why {
	--am-why-gap: 12px;
}

/* The rule beneath the copy is the real break, so the head sits tighter. */
.am-why .am-section-head {
	margin-bottom: var(--am-space-7);
}

.am-why__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
	gap: var(--am-why-gap);
	align-items: stretch;
}

/*
 * Brand taupe at full strength, 1px, as the design draws every rule in it.
 * Not --am-line: that token is the faint warm grey for panel edges and leaves
 * these hairlines washed out.
 */
.am-why__divider,
.am-why__rule {
	background-color: var(--am-brand);
}

.am-why__rule {
	grid-column: 1 / -1;
	height: 1px;
}

/*
 * Held to the top of its row rather than stretched to fill it. The row is as
 * tall as the taller of the pair, and the design starts both numbers on the
 * same line — a shorter card allowed to stretch would centre its contents and
 * drop out of step with its neighbour. The divider is the exception, and it
 * stretches from the grid rather than from here.
 */
/*
 * No padding on the sides. The design aligns the number, the title and the
 * copy with the ends of the rule above them, and up to 44px a side was both
 * indenting the card out of that alignment and taking 88px off the measure —
 * which is what pushed the longest description onto a third line.
 */
.am-why__card {
	align-self: start;
	padding: clamp(32px, 4vw, 60px) 0;
}

/*
 * An odd number of reasons leaves the last without a partner: it takes the
 * whole row rather than sitting half-width beside a gap. Its body keeps the
 * same measure, so it still reads as one of the set.
 */
.am-why__card--wide {
	grid-column: 1 / -1;
}

/*
 * The designer's values. The number and the title are the same face, size
 * and setting — only the colour separates them, brand against ink.
 * Both tokens already hold the exact values given: --am-brand is
 * rgb(137, 111, 92) and --am-ink is rgb(14, 13, 11).
 */
.am-why__number {
	margin: 0 0 var(--am-space-5);
	color: var(--am-brand);
	font-family: var(--am-font-display);
	font-size: 2.25rem;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	letter-spacing: -.02em;
}

/*
 * The measure is the column, not a character count. 44ch at the old 16px
 * was about 440px, and at 20px it is the same 44 characters in a wider
 * face — a third of the column left empty and every description a line
 * longer than the design draws it.
 */
.am-why__body {
	min-width: 0;
}

.am-why__title {
	color: var(--am-ink);
	font-family: var(--am-font-display);
	font-size: 2.25rem;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -.02em;
}

.am-why__text {
	margin-top: var(--am-space-4);
	color: var(--am-ink);
	font-size: 1.25rem;
	line-height: 1.4;
	letter-spacing: 0;
}

@media (max-width: 767px) {
	.am-why__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * In one column the vertical hairline becomes a row of its own, so it
	 * needs a height — as a column track it had one implicitly.
	 */
	.am-why__divider {
		height: 1px;
	}
}

/*--------------------------------------------------------------
18 Research and publications (about page)
--------------------------------------------------------------*/
/*
 * One column per consultant. Unlike the card grids, no rule here has to bridge
 * two columns, so the hairlines are borders on the rows rather than elements
 * of their own.
 */
.am-research {
	/*
	 * The designer's exact rule colour, and a seventh colour deliberately
	 * outside the five in base.css — the same licence --am-field-border takes.
	 * The palette's own line token is warm, and these rules are drawn neutral
	 * grey; brand taupe, which the card grids use, is far too strong for a
	 * separator between two lines of a list. Kept as one dial.
	 */
	--am-research-rule: #d9d9d9;
}

.am-research__columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--am-space-6) clamp(32px, 8vw, 120px);
	margin-top: var(--am-space-8);
}

/*
 * The name and its label sit at opposite ends of the column, centred on each
 * other rather than sharing a baseline: the design pairs 36px display type
 * with a 20px label, and on a common baseline the label hangs low against it.
 */
.am-research__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--am-space-3);
	padding-bottom: var(--am-space-6);
	border-bottom: 1px solid var(--am-research-rule);
}

.am-research__name {
	margin: 0;
	font-size: clamp(1.75rem, 2.4vw, 2.25rem);
	line-height: 1.1;
}

/*
 * Deliberately not the theme's .am-link: that carries an arrow after it, and
 * the design sets this one as a plain brand-coloured label. It is a <span>
 * until an address is given and an <a> after, and the two are drawn alike —
 * only the anchor takes a hover state, so nothing invites a click that would
 * not go anywhere.
 */
.am-research__more {
	color: var(--am-brand);
	font-size: clamp(1rem, 1.35vw, 1.25rem);
	font-weight: 400;
	line-height: 1.4;
}

a.am-research__more:hover,
a.am-research__more:focus {
	color: var(--am-brand-dark);
}

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

/*
 * The rule belongs to the entry above it, so the last entry closes the column
 * the way the consultant's name opens it, and no rule is left hanging under
 * nothing. Equal padding top and bottom is what puts 30px between every rule
 * and the line it sits against, as the design spaces them.
 *
 * The number is decorative — the ordered list already carries the sequence —
 * so it is hidden from assistive technology in the markup.
 */
.am-research__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 10px;
	align-items: center;
	padding-block: clamp(20px, 2vw, 30px);
	border-bottom: 1px solid var(--am-research-rule);
}

/*
 * Set in the display face and in ink, as the design has it: these read as
 * figures in a numbered list rather than as interface labels, which is what
 * the body face would make of them. Tabular so the column stays true.
 */
.am-research__number {
	color: var(--am-ink);
	font-family: var(--am-font-display);
	font-size: clamp(1.25rem, 1.6vw, 1.5rem);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.am-research__title {
	color: var(--am-ink);
	font-size: clamp(1rem, 1.35vw, 1.25rem);
	line-height: 1.4;
}

a.am-research__title:hover,
a.am-research__title:focus {
	color: var(--am-brand);
}

@media (max-width: 1023px) {
	/* Two columns of long titles run too narrow to read before this. */
	.am-research__columns {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--am-space-7);
	}
}

/*--------------------------------------------------------------
19 Landing palette (blepharoplasty)
--------------------------------------------------------------*/
/*
 * The landing page keeps the surgeon's own teal rather than the practice
 * taupe, scoped to the body class WordPress writes for the template. The
 * derived tokens are re-declared alongside the triplets, and that is not
 * duplication: a custom property's var()s are substituted at computed-value
 * time on the element that DECLARES it, so :root's --am-brand is already a
 * finished taupe by the time body inherits it. Re-declared here, each one
 * computes on <body>, where the teal triplets are in scope.
 *
 * Values are the Elementor original's: #01717E accents, #12343B ink,
 * #F5F9F9 soft panels. Rules that use the raw triplets directly — the
 * hairlines, scrims and shadows — pick the override up without help,
 * because a var() used in a real property resolves at the styled element.
 */
.page-template-template-landing-blepharoplasty {
	--am-brand-rgb: 1, 113, 126;
	--am-ink-rgb: 18, 52, 59;
	--am-soft-rgb: 245, 249, 249;
	/* Every card on the landing sits at the design's radius. */
	--am-radius-lg: 16px;

	--am-brand: rgb(var(--am-brand-rgb));
	--am-brand-dark: rgb(var(--am-ink-rgb));
	--am-brand-soft: rgba(var(--am-brand-rgb), .08);
	--am-ink: rgb(var(--am-ink-rgb));
	--am-body: rgb(var(--am-ink-rgb));
	--am-muted: rgb(var(--am-brand-rgb));
	--am-surface-soft: rgb(var(--am-soft-rgb));
	/*
	 * The tint ground derives from the warm line triplet, which is not
	 * overridden — left alone, the enquiry section would sit on a taupe
	 * band in the middle of a teal page. It takes the soft teal instead.
	 */
	--am-surface-tint: rgb(var(--am-soft-rgb));
	--am-star: rgb(var(--am-brand-rgb));
	--am-scrim: rgba(var(--am-ink-rgb), .45);
	--am-shadow: 0 1px 2px rgba(var(--am-ink-rgb), .04), 0 12px 32px rgba(var(--am-ink-rgb), .06);
}

/*
 * The scrim gradient is mixed from the ink triplet, and on this template
 * ink is a dark teal — which washed the whole hero video green. Neutral
 * near-black instead, at the original page's own weights: enough for the
 * white type, no colour cast.
 */
.page-template-template-landing-blepharoplasty .am-bg-media__scrim {
	background: linear-gradient(180deg, rgba(7, 7, 7, .45) 0%, rgba(7, 7, 7, .2) 45%, rgba(7, 7, 7, .55) 100%);
}

/*
 * The landing chrome. The header is the logo and one booking button over
 * the hero — no menu: every path off the page that is not the form is a
 * path the advert paid for and lost. The footer swaps the site's brand
 * band for the ink ground the design draws; its columns reuse the
 * am-footer__* styles the site footer already has.
 */
.am-landing-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	padding-block: var(--am-space-5);
}

.am-landing-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--am-space-4);
}

/*
 * The landing footer's bottom bar runs badge, copyright, legal — three
 * items under space-between, which is what centres the copyright without
 * anything having to say so. The site footer's bar has two and reads left
 * and right, as it should.
 */
.am-footer__badge {
	flex: 0 0 auto;
}

.am-footer__badge img {
	display: block;
	max-width: 236px;
	height: auto;
}

/* Its own line on a phone, where three across would crush all three. */
@media (max-width: 767px) {
	.am-site-footer--landing .am-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
}

/*
 * The design sets these in the name's own case — "Call", not "CALL" —
 * unlike the site footer's menu headings.
 */
.am-site-footer--landing .am-footer__heading {
	text-transform: none;
}

.am-footer__detail {
	margin: 0;
	color: rgba(var(--am-white-rgb), .78);
	line-height: 1.6;
}

.am-footer__detail a {
	color: inherit;
}

.am-footer__detail a:hover,
.am-footer__detail a:focus {
	color: var(--am-white);
}

.am-footer__list {
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--am-space-2);
}
/*
 * Every button on the landing is a pill — the header's, the hero's, the
 * pricing cards' and the form's. One radius here rather than a variant
 * class on each, because on this page it is the rule, not the exception.
 */
.page-template-template-landing-blepharoplasty .am-btn,
.page-template-template-landing-blepharoplasty .am-form button[type="submit"] {
	border-radius: 999px;
}

/*
 * The landing sets every heading's second line in italic — "pricing.",
 * "Blepharoplasty?", "work?" — where the rest of the site keeps it roman.
 */
.page-template-template-landing-blepharoplasty .am-section-head__title-bottom,
.page-template-template-landing-blepharoplasty .am-hero__title-accent {
	font-style: italic;
}

/*
 * Where a full-width section head carries a lead, the landing sets the
 * heading left and the lead right — the pricing and risk sections both
 * draw it so. Scoped to those two: the other heads stack as they do
 * everywhere else.
 */
@media (min-width: 900px) {
	.page-template-template-landing-blepharoplasty .am-pricing .am-section-head__body,
	.page-template-template-landing-blepharoplasty .am-checklist:not(.am-checklist--media) .am-section-head__body {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		column-gap: clamp(32px, 5vw, 80px);
		align-items: start;
		max-width: none;
	}

	.page-template-template-landing-blepharoplasty .am-pricing .am-section-head__text,
	.page-template-template-landing-blepharoplasty .am-checklist:not(.am-checklist--media) .am-section-head__text {
		margin-top: var(--am-space-2);
	}
}

/*
 * The landing hero. The shared partial draws the centred caps composition
 * everywhere else; here the copy ranges left in title case, the award card
 * sits in the second column, and the stat row runs the full width beneath
 * both. Grid rather than the flex column, because the award genuinely is
 * a second column, not a stacked block.
 */
.page-template-template-landing-blepharoplasty .am-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	/*
	 * One flexible row, one that hugs. Left to auto-size, both rows took a
	 * share of the hero's spare height — slack above the copy AND between
	 * the buttons and the figures, with the row gap on top. The copy row
	 * absorbs it now and the figures sit up against them.
	 */
	grid-template-rows: minmax(0, 1fr) auto;
	align-items: end;
	column-gap: var(--am-space-6);
	row-gap: clamp(20px, 3vh, 40px);
}

.page-template-template-landing-blepharoplasty .am-hero__content {
	max-width: 640px;
	margin-inline: 0;
	text-align: left;
	align-items: flex-start;
	/* The row gap already separates the copy from the figures below it. */
	padding-block: 0;
}

.page-template-template-landing-blepharoplasty .am-hero__title {
	text-transform: none;
	/* The design's 60px, reached at the artboard and given up with height. */
	font-size: clamp(2.25rem, min(4vw, 7vh), 3.75rem);
	line-height: 1.15;
}

/* Lower again, since it starts smaller and carries a badge above it. */
@media (max-width: 767px) {
	.page-template-template-landing-blepharoplasty .am-hero__title {
		font-size: clamp(1.75rem, min(7.4vw, 6vh), 2.25rem);
	}
}

.page-template-template-landing-blepharoplasty .am-explainer__media {
	/* The design sets this photograph square-cornered. */
	border-radius: 0;
}
.page-template-template-landing-blepharoplasty .am-hero__text {
	max-width: 560px;
}

.page-template-template-landing-blepharoplasty .am-hero__actions {
	justify-content: flex-start;
}

/* The stat row spans beneath copy and award alike, ranged left. */
.page-template-template-landing-blepharoplasty .am-hero .am-stats {
	grid-column: 1 / -1;
}

.page-template-template-landing-blepharoplasty .am-hero .am-stat {
	text-align: left;
	align-items: flex-start;
}

/*
 * The pieces below are not scoped: they only render when their fields are
 * filled, which today is the landing alone, and a future page that fills
 * them in should get them without a stylesheet edit.
 */
.am-hero__eyebrow-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: var(--am-space-4);
	padding: 10px 20px;
	border: 1px solid rgba(var(--am-white-rgb), .45);
	border-radius: 999px;
	background-color: rgba(var(--am-white-rgb), .08);
	color: var(--am-white);
	font-size: var(--am-fs-base);
}

.am-hero__eyebrow-badge::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--am-brand);
}

/* Its own line, italic, in the same size the headline runs at. */
.am-hero__title-accent {
	display: block;
	font-style: italic;
}

/*
 * The award badge, exactly as supplied: the Top Doctors artwork carries
 * its own white card, so the wrapper draws nothing of its own — a second
 * card around a card is how it looked before this was checked.
 */
.am-hero__award {
	justify-self: end;
}

.am-hero__award img {
	display: block;
	max-width: 256px;
	height: auto;
}

/* One column on a phone: the award follows the copy, before the stats. */
@media (max-width: 767px) {
	.page-template-template-landing-blepharoplasty .am-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.page-template-template-landing-blepharoplasty .am-hero__award,
	.am-hero__award {
		justify-self: start;
	}

	.page-template-template-landing-blepharoplasty .am-hero .am-stats {
		grid-column: 1;
	}
}
/*--------------------------------------------------------------
20 Quick facts (landing pages)
--------------------------------------------------------------*/
/*
 * The hairlines are each cell's own 1px outline. Neighbouring outlines
 * meet in the grid's 1px gaps and paint the same pixel, so every shared
 * edge is one line; the outermost outlines stand in for a border. NOT
 * the tinted-ground trick, on purpose: auto-fit only collapses tracks
 * that are empty in every row, so a fact count that does not divide the
 * columns left the spare tracks as solid tinted blocks. Outlines belong
 * to cells, so a partial last row simply ends.
 */
.am-facts__grid {
	display: grid;
	/*
	 * Three across and two down, as the design draws six facts — fixed
	 * counts rather than auto-fit, so the rows break where the design
	 * breaks them at every width.
	 */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 1px;
}

@media (max-width: 899px) {
	.am-facts__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 559px) {
	.am-facts__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Bottom-heavy on purpose: the design gives each cell its air below. */
.am-facts__cell {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: clamp(22px, 2.4vw, 34px) clamp(22px, 2.4vw, 34px) clamp(36px, 5.2vw, 78px);
	background-color: var(--am-white);
	outline: 1px solid rgba(var(--am-brand-rgb), .12);
}

.am-facts__icon {
	margin-bottom: var(--am-space-4);
	color: var(--am-brand);
}

.am-facts__icon img {
	width: 26px;
	height: 26px;
	object-fit: contain;
}

/*
 * A neutral grey, deliberately not the muted token: on the landing that
 * token resolves to the brand teal, and the design sets the label quiet
 * so the serif value beneath it carries the cell.
 */
.am-facts__label {
	margin: 0;
	color: rgba(var(--am-ink-rgb), .72);
	font-size: var(--am-fs-ui);
	font-weight: 400;
}

.am-facts__value {
	margin: 0;
	color: var(--am-ink);
	font-family: var(--am-font-display);
	font-size: var(--am-fs-h4);
	line-height: 1.25;
}

/*--------------------------------------------------------------
21 Pricing (landing pages)
--------------------------------------------------------------*/
.am-pricing {
	/* The hero's "View pricing" button lands here. */
	scroll-margin-top: var(--am-space-6);
}

.am-pricing__grid {
	display: grid;
	gap: var(--am-space-4);
	/* min() caps the floor at the container, so a 280px screen is not clipped. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/*
 * Head above, list and button pinned to the foot, so three cards of
 * unequal copy still close on one line of buttons.
 */
.am-pricing__card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--am-space-5);
	padding: clamp(24px, 2.2vw, 30px);
	background-color: var(--am-white);
	border: 1px solid var(--am-line);
	border-radius: var(--am-radius-lg);
}

.am-pricing__title {
	font-size: clamp(1.375rem, 2.1vw, 2rem);
}

/* Quiet grey, so the serif price beneath carries the card. */
.am-pricing__text {
	margin-top: var(--am-space-2);
	color: rgba(var(--am-ink-rgb), .72);
	line-height: 1.4;
}

.am-pricing__price {
	margin-top: var(--am-space-6);
	color: var(--am-ink);
	font-family: var(--am-font-display);
	font-size: clamp(2.25rem, 3.7vw, 3.5rem);
	line-height: 1.1;
}

/*
 * As artwork: the row keeps the type's height so a card with an image
 * price and a card with a typed one still line up, and the mark stays
 * beside it rather than under it.
 */
.am-pricing__price--art {
	display: flex;
	align-items: flex-start;
	gap: 2px;
}

.am-pricing__price--art img {
	display: block;
	width: auto;
	max-width: 100%;
	height: clamp(2.25rem, 3.7vw, 3.5rem);
	object-fit: contain;
	object-position: left center;
}

/* The asterisk that ties each price to the shared footnote below. */
.am-pricing__mark {
	font-size: .45em;
	vertical-align: super;
	margin-left: .1em;
}

.am-pricing__badge {
	width: fit-content;
	margin-top: var(--am-space-3);
	padding: 4px 16px;
	border-radius: 100px;
	background-color: var(--am-brand);
	color: var(--am-white);
	font-size: var(--am-fs-small);
	font-weight: 600;
}


.am-pricing__body {
	display: flex;
	flex-direction: column;
	gap: var(--am-space-5);
	padding-top: var(--am-space-5);
	border-top: 1px solid var(--am-line);
}

.am-pricing__list {
	display: grid;
	gap: var(--am-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.am-pricing__list li {
	position: relative;
	padding-left: 28px;
	color: rgba(var(--am-ink-rgb), .75);
}

.am-pricing__list li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--am-brand);
	font-weight: 600;
}

.am-pricing__btn {
	width: 100%;
}

.am-pricing__foot {
	margin-top: var(--am-space-6);
	color: rgba(var(--am-ink-rgb), .6);
	font-style: italic;
	text-align: center;
}

/*--------------------------------------------------------------
22 Procedure explainer (landing pages)
--------------------------------------------------------------*/
/*
 * Stretch, not centre: the photograph and the copy share one height, the
 * head at the top of it and the pulled-out line at the foot — which is
 * what lets the image column set the section's scale.
 */
.am-explainer__grid {
	display: grid;
	gap: clamp(28px, 4vw, 56px);
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
}

@media (min-width: 900px) {
	.am-explainer__grid:not(.am-explainer__grid--bare) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.am-explainer__media {
	display: flex;
	margin: 0;
	border-radius: var(--am-radius);
	overflow: hidden;
}

/* Fills whatever height the copy runs to; the crop gives, never a gap. */
.am-explainer__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Head at the top, list in the middle, note at the foot of the column. */
.am-explainer__content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--am-space-6);
}

/* Inside a column the stacked head's page-scale gap is too much air. */
.am-explainer__content .am-section-head {
	margin-bottom: 0;
}

/* The intro stays quiet; the serif line at the foot does the talking. */
.am-explainer .am-section-head__text {
	color: rgba(var(--am-ink-rgb), .72);
}

.am-explainer__list {
	display: grid;
	gap: clamp(20px, 2.6vw, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.am-explainer__item {
	display: flex;
	align-items: center;
	gap: clamp(16px, 1.8vw, 26px);
	color: var(--am-ink);
	font-size: var(--am-fs-lead);
}

/* Each point's icon sits in a soft brand disc, as the design draws it. */
.am-explainer__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: rgba(var(--am-brand-rgb), .1);
}

.am-explainer__icon img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

/* The line to remember, pulled out the way the design pulls it: ink, not
   brand — the border carries the accent so the words do not have to. */
.am-explainer__note {
	margin: 0;
	padding-left: var(--am-space-4);
	border-left: 3px solid var(--am-brand);
	color: var(--am-ink);
	font-family: var(--am-font-display);
	font-size: clamp(1.25rem, 1.8vw, 1.625rem);
	line-height: 1.5;
}

/*--------------------------------------------------------------
21b Book your consultation (landing pages)
--------------------------------------------------------------*/
.am-booking {
	/* The hero's button and the enquiry redirect both land here. */
	scroll-margin-top: var(--am-space-6);
}

.am-booking__grid {
	display: grid;
	gap: clamp(32px, 5vw, 72px);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 1024px) {
	.am-booking__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.am-booking__intro .am-section-head {
	margin-bottom: var(--am-space-7);
}

/*
 * Headed paragraphs, not the bordered icon cards the site's contact block
 * draws — a landing page has already made its case by here, and a row of
 * boxed cards competes with the form it is meant to be feeding.
 */
.am-booking__details {
	display: grid;
	gap: var(--am-space-5);
	margin: 0;
}

.am-booking__detail dt {
	margin-bottom: var(--am-space-2);
	color: var(--am-ink);
	font-family: var(--am-font-display);
	font-size: var(--am-fs-h4);
}

.am-booking__detail dd {
	margin: 0;
	color: rgba(var(--am-ink-rgb), .78);
	line-height: 1.6;
}

.am-booking__detail a {
	color: inherit;
}

/* The design lists the clinics with a dash apiece. */
.am-booking__places {
	margin: 0;
	padding: 0;
	list-style: none;
}

.am-booking__places li::before {
	content: "- ";
}

.am-booking__panel {
	padding: clamp(22px, 2.6vw, 36px);
	background-color: var(--am-surface-soft);
	border: 1px solid var(--am-line);
	border-radius: var(--am-radius-lg);
}

/* Inside the panel the fields sit on white, as the crop draws them. */
.am-booking__panel .am-form input,
.am-booking__panel .am-form select,
.am-booking__panel .am-form textarea {
	background-color: var(--am-white);
}

/*
 * The three preferences as evenly-shared pills. The radio keeps its own
 * dot — a custom control here would cost the keyboard and screen-reader
 * behaviour the browser gives for nothing.
 */
.am-booking__panel .am-form__choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--am-space-3);
}

.am-booking__panel .am-form__choices legend {
	flex: 1 0 100%;
}

.am-booking__panel .am-choice {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 10px;
	background-color: var(--am-white);
	border: 1px solid rgba(var(--am-brand-rgb), .15);
	border-radius: 999px;
	cursor: pointer;
}

.am-booking__panel .am-choice:has( input:checked ) {
	border-color: var(--am-brand);
}

.am-booking__panel .am-form__submit {
	margin-top: var(--am-space-6);
}

.am-booking__panel .am-form__consent {
	margin-top: var(--am-space-4);
	color: rgba(var(--am-ink-rgb), .7);
}

@media (max-width: 559px) {
	/* Three across at this width leaves no room for the labels. */
	.am-booking__panel .am-choice {
		flex: 1 1 100%;
		justify-content: flex-start;
		padding-inline: 20px;
	}
}
/*--------------------------------------------------------------
22a Recognised expertise (landing pages)
--------------------------------------------------------------*/
/*
 * The copy on one side and the portrait on the other, with the
 * registrations sat at the foot of the copy — which is what the
 * space-between does, so the badges and the caption under the portrait
 * finish on roughly the same line however long the paragraph runs.
 */
.am-expertise {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.am-expertise__grid {
	display: grid;
	gap: clamp(32px, 5vw, 72px);
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
}

@media (min-width: 900px) {
	.am-expertise__grid:not(.am-expertise__grid--bare) {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
	}
}

.am-expertise__copy {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--am-space-7);
}

.am-expertise__copy .am-section-head {
	margin-bottom: 0;
}

.am-expertise .am-section-head__text {
	color: rgba(var(--am-ink-rgb), .72);
}

/* The registrations, as the design's pills. */
.am-expertise__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--am-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.am-expertise__badge > a,
.am-expertise__badge:not(.am-expertise__badge--art) {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	border: 1px solid rgba(var(--am-brand-rgb), .25);
	border-radius: 999px;
	background-color: var(--am-white);
	color: var(--am-brand);
	font-size: var(--am-fs-base);
	text-decoration: none;
}

/* The pill is the anchor's when there is one, so it is not drawn twice. */
.am-expertise__badge:has(> a) {
	padding: 0;
	border: 0;
	background: none;
}

.am-expertise__badge > a:hover,
.am-expertise__badge > a:focus-visible {
	border-color: var(--am-brand);
	color: var(--am-brand-dark);
}

/* Uploaded artwork brings its own shape; the pill steps aside for it. */
.am-expertise__badge--art,
.am-expertise__badge--art > a {
	padding: 0;
	border: 0;
	background: none;
}

.am-expertise__badge--art img {
	display: block;
	max-width: 220px;
	height: auto;
}

.am-expertise__portrait {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--am-space-4);
}

.am-expertise__portrait img {
	display: block;
	width: 100%;
	border-radius: var(--am-radius-lg);
}

.am-expertise__portrait figcaption {
	text-align: center;
}

.am-expertise__name {
	margin: 0;
	color: var(--am-brand);
	font-family: var(--am-font-display);
	font-size: clamp(1.375rem, 2.1vw, 2rem);
	line-height: 1.1;
}

.am-expertise__role {
	margin-top: var(--am-space-2);
	color: var(--am-ink);
}

/*
 * The line drawing, at a weight that reads as texture rather than as a
 * picture. Hidden on a phone, where behind the copy it only muddies it.
 */
.am-expertise__watermark {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -1;
	width: min(46%, 620px);
	pointer-events: none;
}

.am-expertise__watermark img {
	display: block;
	width: 100%;
	height: auto;
	opacity: .5;
}

@media (max-width: 899px) {
	.am-expertise__watermark {
		display: none;
	}
}
/*--------------------------------------------------------------
23 Checklist panels (landing pages)
--------------------------------------------------------------*/
.am-checklist__layout {
	display: grid;
	gap: clamp(28px, 4vw, 56px);
	grid-template-columns: minmax(0, 1fr);
}

/* With a video beside them the panels stack; alone they sit side by side. */
@media (min-width: 900px) {
	.am-checklist--media .am-checklist__layout {
		/* Near-even, the media a shade wider, as the crop measures. */
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		align-items: stretch;
	}
}

/* The copy column: head, cards, then the note at the foot. */
.am-checklist__main {
	display: flex;
	flex-direction: column;
}

.am-checklist__main .am-section-head {
	margin-bottom: var(--am-space-6);
}

.am-checklist__main .am-checklist__foot {
	margin-top: var(--am-space-4);
}

.am-checklist:not(.am-checklist--media) .am-checklist__cards {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.am-checklist__media {
	border-radius: var(--am-radius-lg);
	overflow: hidden;
}

/* Runs the full height of the copy beside it; the crop gives, not a gap. */
.am-checklist__media img,
.am-checklist__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.am-checklist__cards {
	display: grid;
	gap: var(--am-space-4);
	align-items: start;
}

/*
 * Soft cards on the white ground, white cards on the soft one, so the pair
 * reads as panels wherever the section sits.
 */
.am-checklist__card {
	padding: clamp(20px, 2.2vw, 30px);
	background-color: var(--am-surface-soft);
	border: 1px solid var(--am-line);
	border-radius: var(--am-radius-lg);
}

.am-checklist.am-section--soft .am-checklist__card {
	background-color: var(--am-white);
}

.am-checklist__title {
	margin: 0 0 var(--am-space-4);
	color: var(--am-brand);
	font-size: var(--am-fs-h4);
}

.am-checklist__list {
	display: grid;
	gap: var(--am-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.am-checklist__list li {
	position: relative;
	padding-left: 26px;
	color: var(--am-ink);
	font-size: var(--am-fs-lead);
}

.am-checklist__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: var(--am-brand);
}

/*
 * Beside the video each point carries the designer's tick, drawn as the
 * supplied artwork rather than as a text character — the mark it replaces
 * was a CSS content escape, and an escape is one more thing that can be
 * written wrong. The risk section keeps the plain dot: a tick there would
 * read as "yes, this applies to you" against a list of reasons it may not.
 */
.am-checklist--media .am-checklist__list li {
	display: flex;
	align-items: center;
	gap: var(--am-space-3);
	padding-left: 0;
}

.am-checklist--media .am-checklist__list li::before {
	content: none;
}

.am-checklist__list .am-icon {
	flex: 0 0 auto;
}

.am-checklist__foot {
	margin-top: var(--am-space-6);
	max-width: 62ch;
	color: var(--am-muted);
}
/*--------------------------------------------------------------
24 Before & after gallery (landing pages)
--------------------------------------------------------------*/
/*
 * A plain slider: each slide a Before photograph over an After, each with
 * its caption band. The arrows sit beside the heading, as the design puts
 * them, and the counter the shared control carries is not drawn — the
 * design shows arrows alone.
 */
.am-gallery__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--am-space-4);
}

.am-gallery__top .am-section-head {
	margin-bottom: var(--am-space-7);
}

.am-gallery .am-carousel-nav {
	margin-top: 0;
	flex: 0 0 auto;
}

.am-gallery .am-carousel-nav__count {
	display: none;
}

/*
 * Two cards showing, the third holding the edge — the same peek
 * arithmetic the wide results row uses.
 */
.am-gallery__track {
	--am-gallery-gap: var(--am-space-4);

	gap: var(--am-gallery-gap);
}

.am-gallery__slide {
	flex: 0 0 calc(100% - 48px);
	min-width: 0;
}

@media (min-width: 900px) {
	.am-gallery__slide {
		flex-basis: calc((100% - 56px - var(--am-gallery-gap)) / 2);
	}
}

/*
 * One composed photograph per case, at whatever proportion it was
 * exported at — no crop and no caption band, because the before, the
 * after and their labels are all inside the artwork.
 */
.am-gallery__case {
	margin: 0;
}

.am-gallery__case img {
	display: block;
	width: 100%;
	height: auto;
}
/*--------------------------------------------------------------
25 What patients say (landing pages)
--------------------------------------------------------------*/
.am-testimonials__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--am-space-4);
}

.am-testimonials__top .am-section-head {
	margin-bottom: var(--am-space-7);
}

.am-testimonials .am-carousel-nav {
	margin-top: 0;
	flex: 0 0 auto;
}

.am-testimonials .am-carousel-nav__count {
	display: none;
}

/*
 * Three across, and the gap is a variable so the slide can subtract the
 * two it has to share. One card on a phone, two from the tablet up.
 */
.am-testimonials__track {
	--am-testimonials-gap: var(--am-space-4);

	gap: var(--am-testimonials-gap);
	/* Every card as tall as the tallest on its page, whatever it says. */
	align-items: stretch;
}

.am-testimonials__track .am-review {
	flex: 0 0 100%;
	min-width: 0;
}

@media (min-width: 700px) {
	.am-testimonials__track .am-review {
		flex-basis: calc((100% - var(--am-testimonials-gap)) / 2);
	}
}

@media (min-width: 1024px) {
	.am-testimonials__track .am-review {
		flex-basis: calc((100% - (var(--am-testimonials-gap) * 2)) / 3);
	}
}

/*
 * Amber stars, on the landing only. It resolves --am-star to the brand teal
 * along with everything else, which reads as a teal rating rather than a
 * rating; the design keeps the colour the web has agreed means "stars", so
 * this one token steps outside the palette. The site's own pages keep the
 * brand mark, which is legible against their warmer ground.
 */
.page-template-template-landing-blepharoplasty .am-testimonials {
	--am-star: #F7B541;
}

/* Roomier than the site's card, as the design draws them. */
.page-template-template-landing-blepharoplasty .am-review {
	padding: var(--am-space-6);
	border-radius: var(--am-radius-lg);
}

/*--------------------------------------------------------------
26 Frequently asked questions (landing pages)
--------------------------------------------------------------*/
/*
 * The designer's own values, and only on this template — the site's FAQ
 * keeps the theme's type.
 *
 * Both sizes are the design's, fixed rather than fluid: the theme's scale
 * is built on clamp(), but a spec given as 24 and 22 is given at one width
 * and guessing the curve either side of it is not the same as being told.
 */
.page-template-template-landing-blepharoplasty .am-faq__q {
	font-family: var(--am-font-display);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--am-ink);
}

/*
 * Restated at this weight because the rule above outranks the plain
 * .am-faq__q:hover it would otherwise inherit from — a single class each,
 * and the landing block is the later one.
 */
.page-template-template-landing-blepharoplasty .am-faq__q:hover {
	color: var(--am-brand);
}

/*
 * The one grey on the page the palette does not already carry, so it is
 * named here rather than left as a hex in the middle of a rule.
 */
.page-template-template-landing-blepharoplasty .am-faq__a {
	--am-faq-grey: rgb(75, 85, 99);

	font-family: "Inter", var(--am-font-body);
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -.02em;
	color: var(--am-faq-grey);
}

/*--------------------------------------------------------------
27 Content page (privacy, cookies, terms)
--------------------------------------------------------------*/
/*
 * A measure, not a container.
 *
 * The site's container is 1392px, which is right for a row of cards and
 * hopeless for a paragraph — a line of legal English at that width runs to
 * about 190 characters and the eye loses the start of the next line every
 * time.
 *
 * Stated in rem rather than ch, which is the obvious unit and the wrong
 * one here: ch resolves against the font-size of the element it is
 * declared on, and that is the container at the body's 16px, while the
 * prose inside it is set at the 20px lead size. 68ch therefore bought 598px
 * — 54 characters of prose, not the 70 it reads as. Sized for the text that
 * is actually in it, 62rem is about 90 characters at that size — wider than
 * the classic measure by request, while still far short of the 1392px
 * card container.
 */
.am-content > .am-container {
	max-width: 62rem;
}

.am-content__head {
	margin-bottom: var(--am-space-7);
	padding-bottom: var(--am-space-5);
	border-bottom: 1px solid var(--am-line);
}

.am-content__title {
	font-size: var(--am-fs-h2);
	line-height: 1.1;
}

.am-content__head .am-eyebrow {
	margin-bottom: var(--am-space-3);
}

.am-content__lead {
	margin-top: var(--am-space-4);
	color: var(--am-body);
	font-size: var(--am-fs-lead);
	line-height: 1.6;
}

/*
 * Quiet, and last. It is provenance rather than content — worth having on
 * a policy, not worth reading before the policy.
 */
.am-content__updated {
	margin-top: var(--am-space-4);
	color: var(--am-muted);
	font-size: var(--am-fs-small);
	letter-spacing: .02em;
	text-transform: uppercase;
}

/*
 * Anchored headings: a policy is linked to by clause, and an anchor that
 * lands with the heading against the top of the window hides it under the
 * sticky header.
 */
.am-content__body :is(h2, h3, h4)[id] {
	scroll-margin-top: var(--am-space-8);
}

/*--------------------------------------------------------------
Site footer
--------------------------------------------------------------*/
.am-site-footer {
	background-color: var(--am-brand);
	color: var(--am-white);
	padding-block: var(--am-space-8) var(--am-space-6);
}

/*
 * The landing footer takes the ink ground the design draws — rgb(18, 52, 59)
 * on this template, where the palette re-declares the ink triplet.
 *
 * It has to sit here, immediately after the rule it overrides. Both are a
 * single class, so neither outweighs the other and source order decides;
 * kept up with the rest of the landing chrome it lost silently, and the
 * footer painted the mid teal instead.
 */
.am-site-footer--landing {
	background-color: var(--am-ink);
}

.am-site-footer a:hover {
	color: var(--am-white);
	text-decoration: underline;
}

.am-footer__top {
	display: grid;
	gap: var(--am-space-7);
	grid-template-columns: minmax(0, 1fr);
	margin-bottom: var(--am-space-7);
}

@media (min-width: 900px) {
	.am-footer__top {
		grid-template-columns: minmax(0, 300px) minmax(0, 2fr);
	}
}

.am-footer__intro img {
	max-height: var(--am-logo-height-footer, 84px);
	width: auto;
}

.am-footer__intro .am-branding__logo,
.am-footer__intro .am-branding__title {
	display: block;
	margin-bottom: var(--am-space-5);
}

.am-footer__blurb {
	font-size: var(--am-fs-lead);
	line-height: 1.4;
}

.am-footer__columns {
	display: grid;
	gap: var(--am-space-6);
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.am-footer__heading {
	margin-bottom: var(--am-space-4);
	color: var(--am-white);
	font-family: var(--am-font-display);
	font-size: var(--am-fs-h4);
	text-transform: uppercase;
}

.am-footer__columns li {
	margin-bottom: var(--am-space-3);
}

.am-footer__columns a {
	color: var(--am-line);
	font-size: var(--am-fs-lead);
}

.am-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--am-space-4);
	padding-top: var(--am-space-5);
	border-top: 1px solid rgba(var(--am-white-rgb), .35);
	font-size: var(--am-fs-base);
}

.am-footer__legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--am-space-6);
}

/*
 * The credit: a line of type and, optionally, the studio's wordmark set
 * after it. Both are inside the anchor, so the flex box goes on that rather
 * than on the paragraph — a paragraph laid out as flex would be a block the
 * full width of its column, and the underline and hover would follow the
 * box instead of the words.
 */
.am-footer__credit a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/*
 * No rule under this one on hover. Every footer link takes an underline
 * from .am-site-footer a:hover, which is right for a list of links and
 * wrong here: half of what is underlined would be a picture, and a line
 * running under a wordmark reads as a mistake rather than as a link.
 * The wordmark's own colour change says the same thing better.
 *
 * Same specificity as the rule it answers, so this only wins by sitting
 * further down the file. It has to stay below it.
 */
.am-footer__credit a:hover,
.am-footer__credit a:focus-visible {
	text-decoration: none;
}

/*
 * Sized by height with the width left to follow, which is what an SVG
 * wordmark needs — its intrinsic size is whatever the artboard happened to
 * be, and only the cap height has to agree with the line beside it.
 *
 * White, by filter rather than by fill. The artwork arrives in its own
 * colour and this ground is brand taupe; an <img> seals the SVG off from
 * the page's CSS, so a fill rule here could never reach inside it. The
 * filter works on the rendered pixels instead: brightness(0) flattens
 * every colour in the file to black, and invert(1) turns that to white.
 * Whatever colour the studio supplies, it lands white on the taupe.
 */
/*
 * Cropped to the artwork, because the file is not cropped to it.
 *
 * The supplied SVG is a 1080 x 1080 square and the wordmark occupies a band
 * across the middle of it — x 119 to 838, y 434 to 636, read off the <text>
 * transform and the <polygon> points in the file itself. Four fifths of the
 * height is empty. Sized by height in the ordinary way, the box was mostly
 * blank canvas and the lettering inside it came out about six pixels tall.
 *
 * So the box is the shape of the wordmark rather than of the file, and
 * object-fit scales the square until the band fills it: at 168px wide the
 * image renders 168 tall, of which the 202-unit band is 31px — the window
 * height. object-position drops that window onto the band, 49.6% being
 * where its centre sits. The negative margins take back the blank that is
 * left either side, 18px and 38px at this scale.
 *
 * Every number here is measured from that one file. Re-export the SVG
 * cropped to its artwork — which it should be — and this whole block
 * reduces to height and width:auto again.
 */
.am-footer__credit-logo {
	/*
	 * One number drives the whole crop. The window height and the two
	 * margins are all fractions of the box width — which is what the crop
	 * arithmetic above is, once the fixed pixels are divided out — so the
	 * wordmark can be given any width and everything else follows it.
	 * Written as three literal ratios rather than left as pixels, which is
	 * what stopped it scaling and left it overrunning a phone.
	 */
	--am-credit-logo-w: clamp(96px, 9vw, 104px);

	display: block;
	width: var(--am-credit-logo-w);
	/*
	 * The window is deliberately taller than the wordmark and sits a little
	 * above centre. It was cut to the band the artwork occupied in the first
	 * version of this file; the re-exported one carries its letters higher
	 * and the tops came off. The extra is transparent canvas, so a window
	 * bigger than it needs to be costs nothing visible — a window smaller
	 * than it needs to be costs the top of the logo.
	 *
	 * Widening it does not shrink the wordmark: the scale comes from the box
	 * width, and the height only decides how much of the file shows through.
	 */
	height: calc(var(--am-credit-logo-w) * .28);
	margin: 0 calc(var(--am-credit-logo-w) * -.226) 0 calc(var(--am-credit-logo-w) * -.107);
	object-fit: cover;
	object-position: 50% 46%;
	filter: brightness(0) invert(1);
	transition: filter var(--am-transition);
}

/*
 * Yellow on hover, reached by filter because the artwork is an <img> and
 * an <img> seals its own colours off from the page's CSS.
 *
 * The chain is read left to right, each step working on the last: the
 * first two flatten the file to white as above, sepia takes that to a
 * very pale yellow — white through the sepia matrix comes out with the
 * blue channel at .937 and the other two clipped at 1 — and saturate
 * pushes that separation until the blue falls away, leaving red and green
 * full. The result is about rgb(255, 255, 75).
 *
 * Hovering anywhere on the credit turns it, not just the picture: the
 * words and the wordmark are one link, and a hover state that only
 * answered half of it would look broken.
 */
.am-footer__credit a:hover .am-footer__credit-logo,
.am-footer__credit a:focus-visible .am-footer__credit-logo {
	filter: brightness(0) invert(1) sepia(1) saturate(12);
}

@media (prefers-reduced-motion: reduce) {
	.am-footer__credit-logo {
		transition: none;
	}
}

/*
 * Phones.
 *
 * The link columns are auto-fit at a 160px minimum, and two of those plus
 * the 40px gap need 360px — a couple more than a 390px phone has once the
 * gutters are off it. So auto-fit gave up and dropped to a single column,
 * and four stacked menus made the footer most of a screen on its own.
 *
 * Asked for two outright, with a gap they both fit inside: Clinic and
 * Treatments on the first line, Insurance and Locations on the second.
 */
@media (max-width: 767px) {
	.am-site-footer {
		padding-block: var(--am-space-6) var(--am-space-5);
	}

	.am-footer__top {
		gap: var(--am-space-6);
		margin-bottom: var(--am-space-6);
	}

	.am-footer__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--am-space-5) var(--am-space-4);
	}

	/* Tighter line spacing: four menus of links is most of the height. */
	.am-footer__heading {
		margin-bottom: var(--am-space-3);
		font-size: var(--am-fs-ui);
	}

	.am-footer__columns li {
		margin-bottom: var(--am-space-2);
	}

	.am-footer__columns a {
		font-size: var(--am-fs-base);
	}

	/*
	 * The foot reads as one centred block rather than three left-aligned
	 * ones: space-between has nothing to distribute once every item is on
	 * its own line, so it was only ever stacking them at the left edge.
	 */
	.am-footer__bottom {
		flex-direction: column;
		align-items: center;
		gap: var(--am-space-3);
		text-align: center;
	}

	.am-footer__legal ul {
		justify-content: center;
		gap: var(--am-space-4);
	}
}

/*--------------------------------------------------------------
Inner pages (blog, archives, single, 404)
--------------------------------------------------------------*/
.am-page-header {
	padding-block: var(--am-space-8) var(--am-space-6);
	background-color: var(--am-surface-soft);
	border-bottom: 1px solid var(--am-line);
	text-align: center;
}

.am-site-main {
	padding-block: var(--am-section-y);
}

.am-layout {
	display: grid;
	gap: var(--am-space-7);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 992px) {
	.am-layout--sidebar {
		grid-template-columns: minmax(0, 1fr) 320px;
	}
}

.am-post-grid {
	display: grid;
	gap: var(--am-space-5);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.am-post-card {
	display: flex;
	flex-direction: column;
	background-color: var(--am-white);
	border: 1px solid var(--am-line);
	border-radius: var(--am-radius);
	overflow: hidden;
}

.am-post-card__thumb img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.am-post-card__body {
	flex: 1 1 auto;
	padding: var(--am-space-5);
}

.am-post-card__title {
	margin-bottom: var(--am-space-3);
	font-size: var(--am-fs-h4);
}

.am-entry-meta {
	margin-bottom: var(--am-space-2);
	color: var(--am-muted);
	font-size: var(--am-fs-small);
}

.am-entry-thumb {
	margin-bottom: var(--am-space-6);
	border-radius: var(--am-radius);
	overflow: hidden;
}

.am-entry-footer {
	margin-top: var(--am-space-6);
	padding-top: var(--am-space-4);
	border-top: 1px solid var(--am-line);
	color: var(--am-muted);
	font-size: var(--am-fs-small);
}

.am-pagination {
	margin-top: var(--am-space-7);
}

.am-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--am-space-2);
	justify-content: center;
}

.am-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 12px;
	border: 1px solid var(--am-line);
	border-radius: var(--am-radius);
	font-weight: 600;
}

.am-pagination .page-numbers:hover,
.am-pagination .page-numbers.current {
	background-color: var(--am-brand);
	border-color: var(--am-brand);
	color: var(--am-white);
}

.am-post-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--am-space-4);
	margin-top: var(--am-space-6);
	padding-top: var(--am-space-5);
	border-top: 1px solid var(--am-line);
	font-weight: 600;
}

.am-sidebar .widget {
	margin-bottom: var(--am-space-5);
	padding: var(--am-space-5);
	background-color: var(--am-surface-soft);
	border-radius: var(--am-radius);
}

.widget-title {
	margin-bottom: var(--am-space-4);
	font-size: var(--am-fs-h4);
}

.widget li + li {
	margin-top: var(--am-space-2);
	padding-top: var(--am-space-2);
	border-top: 1px solid var(--am-line);
}

.am-no-results {
	padding: var(--am-space-7);
	background-color: var(--am-surface-soft);
	border-radius: var(--am-radius);
	text-align: center;
}

.am-404 {
	padding-block: var(--am-space-8);
	text-align: center;
}

.am-404__code {
	color: var(--am-line);
	font-family: var(--am-font-display);
	font-size: clamp(5rem, 18vw, 9rem);
	line-height: 1;
}

.am-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--am-space-3);
	justify-content: center;
	margin-top: var(--am-space-5);
}

.am-search-form {
	display: flex;
	gap: var(--am-space-2);
	max-width: 420px;
	margin: var(--am-space-5) auto 0;
}

.am-search-form .search-field {
	flex: 1 1 auto;
	padding: 12px 16px;
	border: 1px solid var(--am-line);
	border-radius: var(--am-radius);
	font: inherit;
}

.am-search-form .search-submit {
	padding: 12px 22px;
	border: 1px solid var(--am-brand);
	border-radius: var(--am-radius);
	background-color: var(--am-brand);
	color: var(--am-white);
	font-weight: 600;
	cursor: pointer;
}

.am-comments {
	margin-top: var(--am-space-8);
	padding-top: var(--am-space-6);
	border-top: 1px solid var(--am-line);
}

.comment-list .children {
	margin-top: var(--am-space-4);
	padding-left: var(--am-space-5);
	border-left: 2px solid var(--am-line);
}

.comment-body {
	margin-bottom: var(--am-space-5);
	padding: var(--am-space-4) var(--am-space-5);
	background-color: var(--am-surface-soft);
	border-radius: var(--am-radius);
}

.comment-author img {
	display: inline-block;
	margin-right: var(--am-space-2);
	border-radius: 50%;
	vertical-align: middle;
}

.comment-metadata {
	color: var(--am-muted);
	font-size: var(--am-fs-small);
}