/**
 * Allura Medical - component layer.
 *
 * Reusable, section-agnostic building blocks. Sections compose these; they
 * should not need to restyle them.
 *
 * Contents: buttons, eyebrow, section head, stats, tiles, cards, carousel,
 * comparison slider, media, forms, notices, star rating, prose.
 */

/*--------------------------------------------------------------
Buttons
--------------------------------------------------------------*/
.am-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--am-space-2);
	padding: 14px 32px;
	border: 1px solid var(--am-brand);
	border-radius: var(--am-radius);
	background-color: transparent;
	color: var(--am-brand);
	font-family: var(--am-font-body);
	font-size: var(--am-fs-ui);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--am-transition), border-color var(--am-transition), color var(--am-transition);
}

.am-btn--solid {
	background-color: var(--am-brand);
	color: var(--am-white);
}

.am-btn--solid:hover,
.am-btn--solid:focus {
	background-color: var(--am-brand-dark);
	border-color: var(--am-brand-dark);
	color: var(--am-white);
}

.am-btn--outline {
	background-color: var(--am-white);
	color: var(--am-brand);
}

.am-btn--outline:hover,
.am-btn--outline:focus {
	background-color: var(--am-brand);
	color: var(--am-white);
}

/* For use on dark backgrounds. */
.am-btn--ghost {
	border-color: rgba(var(--am-white-rgb), .6);
	color: var(--am-white);
}

.am-btn--ghost:hover,
.am-btn--ghost:focus {
	background-color: var(--am-white);
	border-color: var(--am-white);
	color: var(--am-ink);
}

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

/*
 * Phones get a smaller button everywhere, not just where one happened to
 * be crowding something. 18px type inside 32px of padding is an artboard
 * measurement — on a 350px row it is a third of the screen wide before it
 * has said anything, and two of them side by side never fit at all.
 *
 * 38px tall clears WCAG 2.5.8's 24px minimum with room to spare, though it
 * is under the 44px comfort figure — the width is what came off, and the
 * height only follows the type down.
 */
@media (max-width: 767px) {
	.am-btn {
		padding: 14px 18px;
		font-size: .8125rem;
		letter-spacing: .02em;
	}
}

.am-section--dark .am-btn--solid {
	border-color: var(--am-brand);
}

/*--------------------------------------------------------------
Icons
--------------------------------------------------------------*/
/*
 * Icons inherit the text colour, so a button changing colour on hover takes
 * its icon with it — no separate hover rule needed.
 */
.am-icon {
	flex: 0 0 auto;
	display: inline-block;
	vertical-align: middle;
	color: currentColor;
}

/* Inline arrow link */
.am-link {
	display: inline-block;
	color: var(--am-brand);
	font-weight: 600;
}

.am-link::after {
	content: " \2192";
}

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

/*--------------------------------------------------------------
Eyebrow
--------------------------------------------------------------*/
.am-eyebrow {
	margin: 0;
	color: var(--am-ink);
	font-family: var(--am-font-body);
	font-size: var(--am-fs-lead);
	font-weight: 600;
	line-height: 1.4;
}

.am-eyebrow::before {
	content: "+ ";
}

.am-section--dark .am-eyebrow {
	color: var(--am-white);
}

/*--------------------------------------------------------------
Section head
--------------------------------------------------------------*/
.am-section-head {
	display: grid;
	gap: var(--am-space-5);
	margin-bottom: var(--am-space-8);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

/*
 * 80px under a heading is an artboard measurement, and on a phone it is a
 * third of the screen between the title and the thing it introduces — long
 * enough that the two stop reading as one section. Sections that want a
 * different gap still set their own; this only moves the default.
 */
@media (max-width: 767px) {
	.am-section-head {
		gap: var(--am-space-4);
		margin-bottom: var(--am-space-6);
	}
}

@media (min-width: 1024px) {
	/*
	 * The eyebrow column is sized to hold the longest of them — "+ Consultation
	 * locations" — on one line. It has to be fluid rather than a single width
	 * because the eyebrow itself is: --am-fs-lead runs from 16.8px up to 20px
	 * across this range, so a column wide enough at 1100px is too narrow by the
	 * time the type reaches full size. The clamp tracks it, and the ceiling is
	 * where the type stops growing.
	 */
	.am-section-head--split {
		grid-template-columns: clamp(240px, 19vw, 300px) minmax(0, 1fr) auto;
		gap: var(--am-space-7);
	}

	/*
	 * No eyebrow, no eyebrow column. Grid auto-placement puts the body in
	 * whatever track comes first, and the first track here is sized for the
	 * longest eyebrow — so a head without one crushed its heading into
	 * 300px. The landing pages' heads carry no eyebrows at all, which is
	 * what finally surfaced it.
	 */
	.am-section-head--split:not(:has(> .am-eyebrow)) {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

.am-section-head__body {
	max-width: 750px;
}

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

.am-section-head__title-top,
.am-section-head__title-bottom {
	display: block;
}

.am-section-head__title-bottom {
	color: var(--am-muted);
}

.am-section--dark .am-section-head__title-bottom {
	color: rgba(var(--am-white-rgb), .7);
}

.am-section-head__text {
	margin-top: var(--am-space-5);
	color: var(--am-body);
	font-size: var(--am-fs-lead);
	line-height: 1.65;
}

.am-section--dark .am-section-head__text {
	color: rgba(var(--am-white-rgb), .85);
}

.am-section-head__cta {
	justify-self: start;
}

@media (min-width: 1024px) {
	.am-section-head__cta {
		justify-self: end;
	}
}

/*--------------------------------------------------------------
Stats
--------------------------------------------------------------*/
.am-stats {
	display: grid;
	gap: var(--am-space-5) var(--am-space-6);
}

.am-stats--row {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.am-stats--column {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--am-space-5);
}

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

.am-stat__label {
	display: block;
	margin-top: var(--am-space-2);
	color: var(--am-body);
	font-size: var(--am-fs-lead);
	line-height: 1.4;
}

.am-stats--inverse .am-stat__value {
	color: var(--am-white);
}

.am-stats--inverse .am-stat__label {
	color: rgba(var(--am-white-rgb), .82);
}

/*
 * The approach figures read across a phone rather than down it.
 *
 * A column of three is the right shape beside a body of text, which is
 * what it sits next to on a wide screen. Stacked under that text on a
 * phone it is just three screens of scrolling for three short numbers.
 *
 * auto-flow rather than a count: the tracks are however many figures there
 * are, each an equal share, so adding a fourth widens the row instead of
 * silently starting a second one. minmax(0, 1fr) is what lets a long label
 * wrap inside its share instead of forcing the row wider than the screen.
 */
@media (max-width: 767px) {
	.am-stats--column {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: var(--am-space-4);
	}

	/* Three labels sharing a phone's width need the smaller step. */
	.am-stats--column .am-stat__label {
		margin-top: var(--am-space-1);
		font-size: var(--am-fs-base);
		line-height: 1.35;
	}
}

/*--------------------------------------------------------------
Tile (image card with a centred title)
--------------------------------------------------------------*/
.am-tile {
	position: relative;
	display: flex;
	min-height: clamp(340px, 26vw, 440px);
	padding: var(--am-space-5);
	border-radius: var(--am-radius);
	overflow: hidden;
	background-color: var(--am-brand);
	color: var(--am-white);
	isolation: isolate;
}

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

.am-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}

a.am-tile:hover .am-tile__media img,
a.am-tile:focus-visible .am-tile__media img {
	transform: scale(1.05);
}

.am-tile__inner {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--am-space-4);
	text-align: center;
}

.am-tile__title {
	max-width: 15ch;
	color: var(--am-white);
	font-family: var(--am-font-display);
	font-size: var(--am-fs-h3);
	line-height: 1.15;
	/* Keeps a long title from wrapping to a lonely last word. */
	text-wrap: balance;
	/* Last-resort legibility over an unexpectedly bright photograph. */
	text-shadow: 0 1px 12px rgba(var(--am-ink-rgb), .45);
}

/*
 * With body copy the tile stops being a centred label and becomes a card: the
 * title, the copy and the button stack from the top-left, and the button is
 * held at the foot however long the copy runs.
 */
.am-tile--detail .am-tile__inner {
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--am-space-3);
	text-align: left;
}

/*
 * Capped so a long title falls onto two lines by itself, which is how the
 * design sets every card. text-wrap: balance on .am-tile__title then splits the
 * two evenly rather than leaving one word stranded on the second line.
 *
 * A ch cap cannot force a break into a title that already fits — "Oral Surgery"
 * stays on one line whatever the width, short of a cap so narrow it would push
 * the long titles onto four. Those few are broken by hand instead: the Title
 * field is a textarea, so pressing Enter puts the break exactly where the design
 * has it.
 */
.am-tile--detail .am-tile__title {
	max-width: 19ch;
}

.am-tile__text {
	color: rgba(var(--am-white-rgb), .9);
	font-size: var(--am-fs-base);
	line-height: 1.55;
	text-shadow: 0 1px 12px rgba(var(--am-ink-rgb), .45);
}

.am-tile__cta {
	margin-top: auto;
	padding: 10px 20px;
	font-size: var(--am-fs-small);
}

/*--------------------------------------------------------------
Card (white panel)
--------------------------------------------------------------*/
.am-card {
	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);
}

/*--------------------------------------------------------------
Star rating
--------------------------------------------------------------*/
.am-review__rating {
	display: flex;
	gap: 6px;
}

.am-star {
	display: inline-flex;
	color: var(--am-line);
}

.am-star.is-filled {
	color: var(--am-star);
}

/*--------------------------------------------------------------
Carousel
--------------------------------------------------------------*/
.am-carousel__viewport {
	overflow: hidden;
}

.am-carousel__track {
	display: flex;
	margin: 0;
	padding: 0;
	transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}

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

/* Without JS every slide simply stacks. */
.no-js .am-carousel__track {
	display: block;
}

.am-carousel-nav {
	display: flex;
	align-items: center;
	gap: var(--am-space-3);
	margin-top: var(--am-space-5);
}

.am-carousel-nav__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1px solid var(--am-brand);
	border-radius: 100px;
	background-color: transparent;
	color: var(--am-brand);
	cursor: pointer;
	transition: background-color var(--am-transition), color var(--am-transition), opacity var(--am-transition);
}

/*
 * One size on a phone, everywhere. Two sections used to shrink these to
 * 40px on their own while the rest kept the desktop 56px, so the same
 * control changed size from section to section down the page.
 */
@media (max-width: 767px) {
	.am-carousel-nav__btn {
		width: 40px;
		height: 40px;
	}
}

.am-carousel-nav__btn--solid {
	background-color: var(--am-brand);
	color: var(--am-white);
}

.am-carousel-nav__btn:hover:not(:disabled) {
	background-color: var(--am-brand-dark);
	border-color: var(--am-brand-dark);
	color: var(--am-white);
}

.am-carousel-nav__btn:disabled {
	opacity: .4;
	cursor: default;
}

.am-carousel-nav__count {
	color: var(--am-muted);
	font-size: var(--am-fs-ui);
	font-weight: 600;
	text-transform: uppercase;
}

/*--------------------------------------------------------------
Before / after comparison
--------------------------------------------------------------*/
.am-compare {
	margin: 0;
}

.am-compare__frame {
	position: relative;
	aspect-ratio: 3 / 4;
	background-color: var(--am-line);
	border-radius: var(--am-radius);
	overflow: hidden;
	touch-action: pan-y;
}

.am-compare__layer {
	position: absolute;
	inset: 0;
}

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

/*
 * Both layers stay full size and the top one is clipped, so the two photos are
 * guaranteed to share an identical crop. Clipping is also composited, unlike
 * resizing the layer and inversely scaling the image inside it, which forced a
 * layout and repaint on every frame of the drag.
 */
.am-compare__layer--before {
	clip-path: inset(0 calc(100% - var(--am-compare-pos, 50%)) 0 0);
	will-change: clip-path;
}

.am-compare__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--am-compare-pos, 50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2px;
	background-color: var(--am-white);
	transform: translateX(-1px);
	pointer-events: none;
}

/*
 * The supplied artwork carries its own white disc and arrows.
 *
 * flex: 0 0 auto is load-bearing. The handle is the only flex item inside a
 * divider just 2px wide, so with the default flex-shrink: 1 the browser
 * crushes it from 39px down to 2px and it disappears behind the line. This
 * keeps it at full size, overflowing the divider evenly on both sides.
 */
.am-compare__handle {
	flex: 0 0 auto;
	display: block;
	width: 39px;
	height: 39px;
	filter: drop-shadow(0 2px 8px rgba(var(--am-ink-rgb), .3));
	transition: transform var(--am-transition);
}

.am-compare__handle svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Confirms the panel is draggable before anyone has tried. */
.am-compare:hover .am-compare__handle,
.am-compare__range:focus-visible ~ .am-compare__divider .am-compare__handle {
	transform: scale(1.08);
}

/* The range input is the real control: invisible but on top. */
.am-compare__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: ew-resize;
	appearance: none;
	background: transparent;
}

.am-compare__range:focus-visible {
	outline: 2px solid var(--am-brand);
	outline-offset: 2px;
}

.am-compare__caption {
	margin-top: var(--am-space-3);
	color: var(--am-muted);
	font-size: var(--am-fs-small);
}

/*--------------------------------------------------------------
Media
--------------------------------------------------------------*/
.am-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.am-embed {
	position: relative;
	aspect-ratio: 16 / 9;
}

.am-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

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

/*--------------------------------------------------------------
Background media
--------------------------------------------------------------*/
/*
 * Longhand offsets as well as the shorthand, here and on the three below.
 *
 * `inset` is Safari 14.1 and newer. An older Safari drops the declaration
 * whole — and it is the only thing giving this block a position and a size,
 * so the background collapsed to nothing and the hero lost both its picture
 * and its video. The four longhands are what that browser reads; the
 * shorthand stays after them for everything else, and being last it wins
 * where it is understood, so the two can never disagree.
 */
.am-bg-media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background-color: var(--am-ink);
}

.am-bg-media__video,
.am-bg-media__image,
.am-bg-media img,
.am-bg-media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * The still and the video occupy the same frame rather than stacking, and
 * the video is on top by document order.
 */
.am-bg-media__still,
.am-bg-media__video {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	inset: 0;
}

/*
 * The video earns its way in front of the still, and only once it is really
 * playing. Until then — while it buffers, on a refused autoplay, under
 * reduced motion or Data Saver, with no JavaScript at all — it is
 * transparent and the photograph behind is what the headline sits on.
 *
 * This is what stops the hero going black on a phone: a video element that
 * has been told to load but cannot play paints its first frame, and before
 * it has decoded one that frame is black. Keeping it transparent until
 * site.js says otherwise means that state is never seen.
 */
.am-bg-media--video .am-bg-media__video {
	opacity: 0;
	transition: opacity .5s ease;
}

.am-bg-media--video.is-playing .am-bg-media__video {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.am-bg-media--video .am-bg-media__video {
		transition: none;
	}
}

/* Fills the frame regardless of the embed's own aspect ratio. */
.am-bg-media__embed {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	inset: 0;
}

.am-bg-media__embed iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;
	min-height: 100%;
	min-width: 177.77vh;
	border: 0;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.am-bg-media__scrim {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	inset: 0;
	background: linear-gradient(180deg, rgba(var(--am-ink-rgb), .55) 0%, rgba(var(--am-ink-rgb), .3) 45%, rgba(var(--am-ink-rgb), .7) 100%);
}

/*
 * Lighter on a phone, where the hero is the whole first screen and the
 * desktop weights read as a dark panel with a picture somewhere behind
 * it. Every stop comes down by .1 — the image carries through, and the
 * bottom stays the heaviest because the stat row sits there in white.
 *
 * Held between two earlier attempts: the full weight above buried the
 * photograph, and dropping each stop by .2 left the white type with too
 * little to sit against. This is the half step.
 *
 * Over a photograph and over a video alike. The hooks to tell those
 * apart are still emitted and still accurate — background-media.php
 * marks the wrapper am-bg-media--image or am-bg-media--video, and
 * site.js adds is-playing once a source is genuinely running (never on a
 * poster left showing by reduced motion, Data Saver, a refused autoplay
 * or no JavaScript) — but nothing styles them today. To treat a moving
 * background differently again, that is the selector to reach for:
 *
 *     .am-hero .am-bg-media--video.is-playing .am-bg-media__scrim
 *
 * 768px matches the hero's own mobile breakpoint, where the mobile image
 * and the mobile video take over. The landing hero keeps its own scrim,
 * set later in sections.css.
 */
@media (max-width: 768px) {
	.am-hero .am-bg-media__scrim {
		background: linear-gradient(180deg, rgba(var(--am-ink-rgb), .45) 0%, rgba(var(--am-ink-rgb), .2) 45%, rgba(var(--am-ink-rgb), .6) 100%);
	}
}

/*--------------------------------------------------------------
Empty media slot
--------------------------------------------------------------*/
/*
 * Shown while a section is still waiting for its photography, so an
 * unfinished page reads as deliberate rather than broken. Once an image is
 * attached the class is dropped and this never applies.
 */
.am-media-empty {
	position: relative;
	min-height: 280px;
	background-color: var(--am-surface-soft);
	background-image:
		repeating-linear-gradient(
			45deg,
			rgba(var(--am-brand-rgb), .05) 0,
			rgba(var(--am-brand-rgb), .05) 10px,
			transparent 10px,
			transparent 20px
		);
	border: 1px solid var(--am-line);
	border-radius: var(--am-radius);
}

.am-media-empty::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 2px solid var(--am-line);
	border-radius: 50%;
}

.am-member__photo.am-media-empty {
	aspect-ratio: 4 / 5;
}

/*--------------------------------------------------------------
Forms
--------------------------------------------------------------*/
/*
 * A row carries the same bottom margin a single field does. Without it the
 * fields inside a row have theirs zeroed and the row has none of its own,
 * so two rows stack flush and the second row's labels sit tight against the
 * inputs above them.
 */
/*
 * Field padding as a token: the selector that applies it is a ten-line
 * exclusion list, and a second copy of that in a media query is a second
 * place for it to fall out of step.
 */
.am-form {
	--am-field-pad: 16px;
}

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

@media (min-width: 640px) {
	.am-form__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.am-form__field {
	margin: 0 0 var(--am-space-4);
}

.am-form__row .am-form__field {
	margin-bottom: 0;
}

.am-form label,
.am-form legend {
	display: block;
	margin-bottom: 6px;
	color: var(--am-ink);
	font-size: var(--am-fs-base);
	font-weight: 500;
}

/*
 * Named by exclusion rather than by list. A whitelist of input types is a
 * standing invitation to a field that looks nothing like its neighbours:
 * the day someone adds a date, a number or a search box it drops through
 * to the browser's own control, at the browser's own width, in the
 * browser's own font. Only the types that must stay native are named.
 */
.am-form input:not(
	[type="radio"],
	[type="checkbox"],
	[type="submit"],
	[type="button"],
	[type="reset"],
	[type="image"],
	[type="file"],
	[type="range"],
	[type="color"],
	[type="hidden"]
),
.am-form select,
.am-form textarea {
	width: 100%;
	padding: var(--am-field-pad, 16px);
	/* Focus swaps the colour only, so the width is the same either way. */
	border: .6px solid var(--am-field-border);
	border-radius: var(--am-radius);
	background-color: var(--am-white);
	color: var(--am-ink);
	font-family: inherit;
	font-size: var(--am-fs-base);
	/* One line box for every control, so heights can be reasoned about. */
	line-height: 1.5;
	transition: border-color var(--am-transition), box-shadow var(--am-transition);
}

.am-form textarea {
	min-height: 120px;
	resize: vertical;
}

/*
 * Date and time controls lay themselves out at an intrinsic width in
 * WebKit and ignore the one they are given, which on a phone leaves a
 * stub of a field in a full-width column. Dropping the native appearance
 * hands the sizing back to us; the padding above then applies as it does
 * to every other field.
 */
.am-form input[type="date"],
.am-form input[type="datetime-local"],
.am-form input[type="month"],
.am-form input[type="time"],
.am-form input[type="week"] {
	-webkit-appearance: none;
	appearance: none;
	line-height: 1.5;
}

/* The picker button is the only part of the control still drawn for us. */
.am-form input::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: .5;
	transition: opacity var(--am-transition);
}

.am-form input:hover::-webkit-calendar-picker-indicator,
.am-form input:focus::-webkit-calendar-picker-indicator {
	opacity: 1;
}

.am-form input::placeholder,
.am-form textarea::placeholder {
	color: var(--am-placeholder);
}

/* ---------------------------------------------------------------
 * Select
 *
 * Two layers, because the drop-down list is not equally styleable
 * everywhere.
 *
 * The first flattens the native control and paints our own arrow. Every
 * browser gets that, and it has to stand on its own rather than assume the
 * second layer runs.
 *
 * The second opts into the customizable select API, which is the only way to
 * style the list itself rather than leave it to the operating system — that is
 * where the blue highlight comes from. Chrome and Edge 135+ and Safari 27 take
 * it; anywhere else the control still looks right and the list stays native.
 * ------------------------------------------------------------ */
.am-form select {
	appearance: none;
	/*
	 * The height the text controls reach on their own: a 1.5 line box plus
	 * the padding and the two hairline borders. A select computes its
	 * height from its own innards — arrow included — and sat a few pixels
	 * taller than the input beside it in the same row.
	 */
	height: calc(1.5em + (var(--am-field-pad, 16px) * 2) + 1.2px);
	/* Room for the arrow, so a long option cannot run underneath it. */
	padding-right: 46px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1.5 7 7.5l6-6' stroke='%23896F5C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 14px 9px;
	cursor: pointer;
}

@supports (appearance: base-select) {

	/*
	 * Both halves are required: opting in the picker alone does nothing.
	 */
	.am-form select,
	.am-form select::picker(select) {
		appearance: base-select;
	}

	/* The API draws its own arrow, so the painted one comes back off. */
	.am-form select {
		padding-right: 16px;
		background-image: none;
	}

	.am-form select::picker-icon {
		margin-left: auto;
		color: var(--am-brand);
		transition: rotate var(--am-transition);
	}

	.am-form select:open::picker-icon {
		rotate: 180deg;
	}

	.am-form select:open {
		border-color: var(--am-brand);
	}

	/* The list. */
	.am-form select::picker(select) {
		margin-top: 6px;
		padding: 6px;
		border: .6px solid var(--am-field-border);
		border-radius: var(--am-radius);
		background-color: var(--am-white);
		box-shadow: var(--am-shadow);
		opacity: 0;
		translate: 0 -6px;
		/*
		 * display and overlay are discrete properties, so without
		 * allow-discrete the list would vanish instantly on close and the
		 * fade would never be seen.
		 */
		transition:
			opacity var(--am-transition),
			translate var(--am-transition),
			display var(--am-transition) allow-discrete,
			overlay var(--am-transition) allow-discrete;
	}

	.am-form select:open::picker(select) {
		opacity: 1;
		translate: 0 0;
	}

	/* Where the open transition starts from, coming out of display: none. */
	@starting-style {
		.am-form select:open::picker(select) {
			opacity: 0;
			translate: 0 -6px;
		}
	}

	.am-form option {
		display: flex;
		align-items: center;
		padding: 12px 14px;
		border-radius: var(--am-radius);
		background-color: transparent;
		color: var(--am-ink);
		font-family: inherit;
		font-size: var(--am-fs-base);
		cursor: pointer;
	}

	/* Replaces the operating system's blue bar. */
	.am-form option:hover,
	.am-form option:focus {
		background-color: var(--am-brand-soft);
		color: var(--am-ink);
		outline: none;
	}

	.am-form option:checked {
		background-color: var(--am-brand-soft);
		font-weight: 700;
	}

	/*
	 * The fill already says which option is selected, and the tick reserves
	 * space in every row whether it is shown or not.
	 */
	.am-form option::checkmark {
		display: none;
	}
}

.am-form input:focus,
.am-form select:focus,
.am-form textarea:focus {
	border-color: var(--am-brand);
	box-shadow: 0 0 0 3px var(--am-brand-soft);
	outline: none;
}

.am-form__choices {
	padding: 0;
	border: 0;
	margin-bottom: var(--am-space-5);
}

.am-form__choices > legend {
	padding: 0;
}

.am-choice {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--am-space-2);
	flex: 1 1 auto;
	margin: 0;
	padding: 16px;
	/* Matches the inputs it sits beneath — they share one border treatment. */
	border: .6px solid var(--am-field-border);
	border-radius: var(--am-radius);
	cursor: pointer;
	font-weight: 400;
	transition: border-color var(--am-transition), background-color var(--am-transition);
}

.am-form__choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--am-space-2);
}

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

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

.am-choice input {
	accent-color: var(--am-brand);
}

.am-form__submit {
	margin: 0 0 var(--am-space-4);
}

.am-form__consent {
	margin: 0;
	color: var(--am-body);
	font-size: var(--am-fs-base);
}

/*
 * The form on a phone.
 *
 * 16px inside every field makes each one about 52px tall, and there are
 * six of them plus a legend and a button — the form was taller than two
 * screens before anyone typed anything. 12px keeps a field at 43px, which
 * is still a target you can hit, and the row spacing comes in with it.
 */
@media (max-width: 767px) {
	.am-form {
		--am-field-pad: 12px 14px;
	}

	.am-form textarea {
		min-height: 92px;
	}

	.am-form label,
	.am-form legend {
		margin-bottom: 4px;
	}

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

	.am-form__row {
		gap: var(--am-space-3);
		margin-bottom: var(--am-space-3);
	}

	/* The pills match the fields above them, as they do at full size. */
	.am-choice {
		padding: 12px 14px;
	}

	.am-form__choices {
		margin-bottom: var(--am-space-4);
	}
}

/* Honeypot */
.am-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*--------------------------------------------------------------
Notices
--------------------------------------------------------------*/
/*
 * The palette has no red or green, so success and failure are told apart by a
 * leading glyph and by weight rather than by hue. That is the accessible
 * pattern anyway — WCAG 1.4.1 says colour must never be the only signal, and
 * roughly 1 in 12 men cannot separate red from green.
 */
.am-notice {
	display: flex;
	gap: var(--am-space-3);
	margin: 0 0 var(--am-space-4);
	padding: 14px 18px;
	border-left: 3px solid var(--am-brand);
	border-radius: var(--am-radius);
	background-color: var(--am-surface-soft);
	color: var(--am-ink);
	font-size: var(--am-fs-base);
}

.am-notice::before {
	flex: 0 0 auto;
	font-weight: 700;
	line-height: inherit;
}

.am-notice--success {
	border-left-color: var(--am-brand);
}

.am-notice--success::before {
	content: "\2713"; /* check mark */
	color: var(--am-brand);
}

.am-notice--error {
	border-left-color: var(--am-ink);
	background-color: var(--am-surface-tint);
	font-weight: 600;
}

.am-notice--error::before {
	content: "\0021"; /* exclamation mark */
	color: var(--am-ink);
}

/*--------------------------------------------------------------
reCAPTCHA
--------------------------------------------------------------*/
.am-form__captcha {
	margin-bottom: var(--am-space-5);
}

/* The widget is a fixed 304px; let it shrink rather than overflow the panel. */
.am-form__captcha .g-recaptcha {
	display: block;
	max-width: 100%;
	overflow: hidden;
}

@media (max-width: 400px) {
	.am-form__captcha .g-recaptcha > div {
		transform: scale(.86);
		transform-origin: 0 0;
	}
}

/*--------------------------------------------------------------
WhatsApp chat button
--------------------------------------------------------------*/
/*
 * WhatsApp's own green, not the theme's brand. The button is a badge for
 * somebody else's product and is recognised by that colour — painting it
 * taupe would make it a mystery circle in the corner.
 */
.am-wa {
	--am-wa-green: #25d366;
	--am-wa-green-deep: #1da851;

	position: fixed;
	bottom: 20px;
	z-index: 400;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.am-wa--right { right: 20px; align-items: flex-end; }
.am-wa--left  { left: 20px; }

.am-wa__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--am-wa-green);
	color: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
	cursor: pointer;
	transition: transform var(--am-transition), background-color var(--am-transition);
}

.am-wa__toggle:hover,
.am-wa__toggle:focus-visible {
	background-color: var(--am-wa-green-deep);
	transform: scale(1.06);
}

.am-wa__panel {
	width: min(300px, calc(100vw - 40px));
	overflow: hidden;
	border-radius: 14px;
	background-color: #fff;
	box-shadow: 0 14px 40px rgba(0, 0, 0, .26);
}

.am-wa__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background-color: var(--am-wa-green);
	color: #fff;
}

.am-wa__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .22);
}

.am-wa__title {
	flex: 1 1 auto;
	font-family: var(--am-font-body);
	font-size: 1.0625rem;
	font-weight: 700;
}

.am-wa__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .22);
	color: #fff;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}

.am-wa__close:hover,
.am-wa__close:focus-visible { background-color: rgba(255, 255, 255, .38); }

.am-wa__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 16px;
	background-color: #ece5dd; /* WhatsApp's own conversation ground. */
}

/* A speech bubble, tail and all — the tail is the ::before square, rotated. */
.am-wa__bubble {
	position: relative;
	max-width: 100%;
	margin: 0;
	padding: 10px 14px;
	border-radius: 0 10px 10px 10px;
	background-color: #fff;
	color: var(--am-ink);
	font-size: .9375rem;
	line-height: 1.45;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}

.am-wa__bubble::before {
	content: "";
	position: absolute;
	top: 0;
	left: -6px;
	border-top: 8px solid #fff;
	border-left: 7px solid transparent;
}

.am-wa__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 6px;
	padding: 13px 18px;
	border-radius: 40px;
	background-color: var(--am-wa-green);
	color: #fff;
	font-family: var(--am-font-body);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--am-transition);
}

.am-wa__cta:hover,
.am-wa__cta:focus-visible {
	background-color: var(--am-wa-green-deep);
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.am-wa__toggle { transition: none; }
	.am-wa__toggle:hover { transform: none; }
}