/* ==========================================================================
   amondi — global tokens, base and shared components.
   Loaded on the front end and inside the block editor.

   Design reference (Figma "amondi", file IHO05NRD1ykl3Lq4BenCtQ): 1680px
   desktop frames with a 1440px "Wrap" and 16px inner gutters (1408px content
   column); 428px mobile frames with 24px gutters (380px column). Type is
   fluid between those two frames. Every colour below is taken from the
   design.
   ========================================================================== */

:root {
	/* ---- Palette ---- */
	--am-teal:        #40748d; /* Primary: buttons, eyebrows, highlight blocks, case-study panel, icon circles */
	--am-ink:         #4a4f54; /* Primary charcoal: all text, footer background, hover state of every button */
	--am-white:       #ffffff;
	--am-lime:        #e1e667; /* headline result numbers ("+300%") */
	--am-tint-12:     rgba(64, 116, 141, 0.12); /* why-us cards, case-study band, dropdown tiles (group 1) */
	--am-tint-24:     rgba(64, 116, 141, 0.24); /* dropdown tiles (group 2) */
	--am-tint-40:     rgba(64, 116, 141, 0.4);
	--am-glass-40:    rgba(255, 255, 255, 0.4);  /* article card, hero result box */
	--am-glass-64:    rgba(255, 255, 255, 0.64); /* four-systems tiles, what-you-get tiles */
	--am-glass-80:    rgba(255, 255, 255, 0.8);  /* sticky header */
	--am-line:        #f3f3f3; /* footer divider */
	--am-placeholder: #d8d8d8; /* empty image slots */

	/* Decorative background blobs (the "Gradients" frames): teal left, lime right. */
	--am-glow-teal: rgba(64, 116, 141, 0.32);
	--am-glow-lime: rgba(217, 230, 168, 0.55);

	/* ---- Effects ---- */
	--am-shadow-card: 0 2px 24px rgba(0, 0, 0, 0.16);
	--am-shadow-btn:  0 2px 12px rgba(0, 0, 0, 0.16);
	--am-blur:        blur(8px);
	--am-radius:      24px;
	--am-radius-sm:   12px;
	--am-radius-pill: 120px;
	--am-radius-input: 4px;
	--am-transition:  180ms ease;
	--am-focus:       3px solid var(--am-teal);

	/* ---- Layout ---- */
	--am-wrap:    1440px;
	--am-gutter:  clamp(16px, 2vw, 24px);
	--am-col-gap: clamp(32px, 2.56vw + 21.1px, 64px);   /* 32 → 64 between the two columns of a section */
	--am-section: clamp(40px, 6.4vw + 12.6px, 120px);   /* 40 → 120 section padding */
	--am-stack:   32px;                                  /* gap between title stack and content */
	--am-text:    776px;                                 /* text column of two-column sections */
	--am-img:     568px;                                 /* image column */
	--am-header-clearance: 100px;                        /* anchor targets stop this far below the top (sticky header + air) */

	/* ---- Type ---- */
	--am-font: 'Meutas', 'Helvetica Neue', Arial, sans-serif;

	--am-fs-marquee: clamp(64px, 3.2vw + 50.3px, 104px);  /* 64 → 104 statements ticker */
	--am-fs-h1:      clamp(40px, 5.11vw + 18.1px, 104px); /* 40 → 104 page/hero titles */
	--am-fs-h2:      clamp(32px, 2.56vw + 21.1px, 64px);  /* 32 → 64 section titles */
	--am-fs-h2-md:   clamp(32px, 1.28vw + 26.5px, 48px);  /* 32 → 48 form-section titles */
	--am-fs-h2-sm:   clamp(28px, 0.96vw + 23.9px, 40px);  /* 28 → 40 intro-split titles */
	--am-fs-numeral: clamp(48px, 1.28vw + 42.5px, 64px);  /* "01" reason numerals */
	--am-fs-result:  48px;
	--am-fs-lg:      24px;   /* eyebrow, lead, card titles */
	--am-fs-body:    18px;
	--am-fs-sm:      16px;
	--am-fs-xs:      14px;
}

/*
 * Phones (team review, 14 Oct): more air between sections (40 → 56px) and
 * paragraphs 2px smaller: the 24px lead/intro copy to 22, the 18px body copy
 * to 16. Eyebrows and card titles share the 24px token and follow it.
 */
@media (max-width: 767px) {
	:root {
		--am-section: 56px;
		--am-fs-lg:   22px;
		--am-fs-body: 16px;
	}
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: var(--am-header-clearance);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--am-white);
	color: var(--am-ink);
	font-family: var(--am-font);
	font-size: var(--am-fs-body);
	font-weight: 300;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

/*
 * Scroll lock while the mobile menu is open. Only the root is locked: its
 * overflow applies to the viewport, so the page keeps its scroll offset (and
 * gets it back on close) and the sticky header stays pinned. Do NOT add
 * `body` here: with both html and body set, body becomes a scroll container
 * of its own, the sticky header sticks to body's unscrolled top instead of
 * the viewport and disappears above the screen once the page is scrolled.
 * The stable gutter stops the page shifting sideways when a desktop
 * scrollbar is hidden. The scroll padding (kept clear for the sticky header)
 * is dropped while the menu is open: the header's own buttons sit inside that
 * band, and focusing one (Shift+Tab back to the menu button) would otherwise
 * scroll the locked page behind the panel.
 */
html.am-nav-open {
	overflow: hidden;
	scrollbar-gutter: stable;
	scroll-padding-top: 0;
}

img,
picture,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
	text-underline-offset: 0.18em;
}

a:hover {
	text-decoration: underline;
}

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

h1, h2, h3, h4, h5, h6, p, figure, blockquote {
	margin: 0;
	font-weight: 400;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

strong, b {
	font-weight: 400; /* the design never goes bolder than Regular; emphasis = Regular on a Light body */
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--am-focus);
	outline-offset: 3px;
}

/* ==========================================================================
   Accessibility helpers
   ========================================================================== */

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

.am-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 12px 20px;
	background: var(--am-teal);
	color: var(--am-white);
	font-weight: 400;
}

.am-skip-link:focus {
	left: 0;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.am-wrap {
	width: 100%;
	max-width: var(--am-wrap);
	margin-inline: auto;
	padding-inline: var(--am-gutter);
}

.am-section {
	position: relative;
	padding-block: var(--am-section) 0;
}

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

/* Two-column section: image column + text column, stacking on tablets. */
.am-cols {
	display: flex;
	align-items: center;
	gap: var(--am-col-gap);
}

.am-cols__img {
	flex: 0 0 var(--am-img);
	max-width: var(--am-img);
}

.am-cols__text {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--am-stack);
}

@media (max-width: 1023px) {
	.am-cols {
		flex-direction: column;
		align-items: stretch;
	}

	.am-cols__img {
		flex-basis: auto;
		max-width: none;
	}
}

/*
 * The decorative background blobs from the "Gradients" frames.
 *
 * Painted as ONE layer fixed to the viewport, so the gradient holds its place
 * on screen while the page scrolls instead of travelling with its section.
 * `:has()` gates it to pages that opt in with .am-section--glow (so the plain
 * legal pages stay white) and guarantees a single instance — several fixed,
 * semi-transparent copies would otherwise composite into a stronger blob.
 * The percentages are viewport-relative, keeping the teal/lime blobs pinned to
 * the left and right edges of the screen.
 */
body:has(.am-section--glow)::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(45% 55% at 0% 55%, var(--am-glow-teal), transparent 70%),
		radial-gradient(45% 55% at 100% 45%, var(--am-glow-lime), transparent 70%);
}

.am-main {
	position: relative;
	isolation: isolate;
}

/* ==========================================================================
   Typography
   ========================================================================== */

.am-h1 {
	font-size: var(--am-fs-h1);
	font-weight: 400;
	line-height: 1.24;
	text-wrap: balance;
}

.am-h2 {
	font-size: var(--am-fs-h2);
	font-weight: 400;
	line-height: 1.2;
	text-wrap: balance;
}

.am-eyebrow {
	color: var(--am-teal);
	font-size: var(--am-fs-lg);
	font-weight: 400;
	line-height: 1.4;
}

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

.am-lead strong,
.am-lead b {
	font-weight: 400;
}

.am-body {
	font-size: var(--am-fs-body);
	font-weight: 300;
}

.am-small {
	font-size: var(--am-fs-sm);
	font-weight: 300;
}

/* Title stack: eyebrow → heading → lede, 16px apart. */
.am-title {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.am-title--center {
	align-items: center;
	text-align: center;
	margin-inline: auto;
	max-width: 960px;
}

.am-title__heading {
	font-size: var(--am-fs-h2);
	font-weight: 400;
	line-height: 1.2;
	text-wrap: balance;
}

h1.am-title__heading {
	font-size: var(--am-fs-h1);
	line-height: 1.24;
}

.am-title--md .am-title__heading {
	font-size: var(--am-fs-h2-md);
}

.am-title--sm .am-title__heading {
	font-size: var(--am-fs-h2-sm);
}

/*
 * The "highlight": Figma fakes a solid teal block behind white text with a
 * 120%-thick underline. A background with box-decoration-break gives the
 * same look and survives line wraps. Produced by the editor's Highlight
 * format (<mark class="am-hl">) and used by hero titles, list rows, tiles.
 */
.am-hl,
mark.am-hl {
	background: var(--am-teal);
	color: var(--am-white);
	padding: 0 0.12em;
	margin: 0 -0.04em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	border-radius: 2px;
}

/* ==========================================================================
   Icons & graphics
   ========================================================================== */

.am-icon {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	display: inline-block;
	vertical-align: middle;
	fill: currentColor;
}

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

/* ==========================================================================
   Buttons (Figma "Btn Regular" / "Btn Large Primary" / "Btn Large Secondary")
   ========================================================================== */

.am-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 20px 40px;
	border: 1px solid transparent;
	border-radius: var(--am-radius-pill);
	font-size: var(--am-fs-body);
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--am-transition), color var(--am-transition), border-color var(--am-transition);
}

.am-btn:hover,
.am-btn:focus-visible {
	text-decoration: none;
}

/*
 * Optical centring of the label against the icon (team review, 14 Oct: the
 * text sat low next to the round icon). Meutas has a tall ascent in the
 * metrics macOS uses (1075 / 285 per 1000), so a centred line box puts the
 * letters 1–2px below the icon's centre. Trimming the label to cap height
 * centres the capitals exactly. Only where there is an icon to set the
 * button's height, so text-only buttons keep theirs; browsers without
 * text-box keep the old layout.
 */
.am-btn:has(.am-icon) .am-btn__label {
	text-box: trim-both cap alphabetic;
}

.am-btn__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 24px;
	transition: background-color var(--am-transition), color var(--am-transition);
}

/* Primary: white pill, charcoal border, teal icon circle. */
.am-btn--primary {
	padding-right: 24px;
	background: var(--am-white);
	border-color: var(--am-ink);
	color: var(--am-ink);
	filter: drop-shadow(var(--am-shadow-btn));
}

.am-btn--primary .am-btn__icon {
	background: var(--am-teal);
	color: var(--am-white);
}

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

/* Secondary: teal pill, white text, white icon circle. */
.am-btn--secondary {
	padding-right: 24px;
	background: var(--am-teal);
	color: var(--am-white);
}

.am-btn--secondary .am-btn__icon {
	background: var(--am-white);
	color: var(--am-teal);
}

.am-btn--secondary:hover,
.am-btn--secondary:focus-visible {
	background: var(--am-ink);
}

.am-btn--secondary:hover .am-btn__icon,
.am-btn--secondary:focus-visible .am-btn__icon {
	color: var(--am-ink);
}

/* Regular: the small header CTA — teal pill, bare 24px icon. */
.am-btn--regular {
	padding: 20px 32px;
	background: var(--am-teal);
	color: var(--am-white);
	font-size: var(--am-fs-sm);
	line-height: 24px;
}

.am-btn--regular .am-btn__icon {
	width: 24px;
	height: 24px;
	background: transparent;
	color: inherit;
}

.am-btn--regular:hover,
.am-btn--regular:focus-visible {
	background: var(--am-ink);
}

/* Text link with a trailing arrow ("All services →", "Inkubit case study →"). */
.am-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
}

.am-link .am-icon {
	font-size: 24px;
}

/* Button rows */
.am-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

/* ==========================================================================
   Header
   ========================================================================== */

.am-header {
	position: sticky;
	top: 0;
	z-index: 100;
	/*
	 * The frosted background lives on ::before, NOT here. A backdrop-filter on
	 * .am-header itself makes it the containing block for the fixed mobile menu
	 * panel; the panel then anchors to the header's document-top position and,
	 * once the page is scrolled, sits far above the viewport (and the open-menu
	 * scroll lock stops you reaching it). Keeping the filter off .am-header lets
	 * the panel stay truly fixed to the viewport at any scroll position.
	 */
	background: transparent;
}

/*
 * The html scroll padding keeps anchor targets clear of the sticky header,
 * but the header's own controls sit inside that band. Without this, focusing
 * one on a scrolled page (Tab to the menu button, Shift+Tab back into the
 * nav) makes the browser scroll them out of the band, about 450px up the
 * page. The negative margin cancels the padding for the header only. It is
 * set on every descendant, not on :focus: the browser scrolls before a
 * :focus style applies. On mobile the menu panel is a scroll container of
 * its own (and the open menu drops the page padding, html.am-nav-open), so
 * its items keep a normal margin.
 */
.am-header * {
	scroll-margin-top: calc(-1 * var(--am-header-clearance));
}

@media (max-width: 1023px) {
	.am-header__panel * {
		scroll-margin-top: 0;
	}
}

.am-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--am-glass-80);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	pointer-events: none;
}

.am-header__inner {
	position: relative; /* the mega menu centres on the header, not on its nav item */
	display: flex;
	align-items: center;
	gap: 12px;
	padding-block: 12px;
	min-height: 88px;
}

.am-header__brand {
	flex: 1 1 0;
	display: flex;
	align-items: center;
}

.am-logo {
	display: block;
	line-height: 0;
}

.am-logo--header svg {
	width: 174px;
	height: 64px;
}

.am-logo--footer svg {
	width: 78px;
	height: 120px;
}

.custom-logo {
	max-height: 64px;
	width: auto;
}

.am-header__actions {
	flex: 1 1 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 12px;
}

/* One line at every width: a longer label broke in two at 1024–1047px (AG-98 item 5). */
.am-header__cta {
	white-space: nowrap;
}

.am-header__round {
	display: none;
	place-items: center;
	width: 64px;
	height: 64px;
	border: 0;
	border-radius: 50%;
	background: var(--am-teal);
	color: var(--am-white);
	font-size: 24px;
	cursor: pointer;
	transition: background-color var(--am-transition);
}

.am-header__round:hover,
.am-header__round:focus-visible {
	background: var(--am-ink);
	text-decoration: none;
}

.am-header__toggle-close {
	display: none;
}

.am-header__toggle[aria-expanded='true'] .am-header__toggle-open {
	display: none;
}

.am-header__toggle[aria-expanded='true'] .am-header__toggle-close {
	display: block;
}

/* ---- Primary nav (desktop) ---- */

.am-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(24px, 3.8vw, 64px);
}

.am-nav__item {
	position: static;
	display: flex;
	align-items: center;
	gap: 4px;
	/* Fill the header's content box so the whole column is the hover target —
	   otherwise the pointer leaves the 32px link before reaching the panel. */
	padding-block: 16px;
}

.am-nav__link {
	position: relative;
	padding-block: 4px;
	font-size: var(--am-fs-sm);
	font-weight: 400;
	line-height: 24px;
	white-space: nowrap;
}

.am-nav__link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1px;
	background: currentColor;
	opacity: 0;
	transition: opacity var(--am-transition);
}

.am-nav__link:hover,
.am-nav__link:focus-visible {
	text-decoration: none;
}

.am-nav__link:hover::after,
.am-nav__link:focus-visible::after,
.am-nav__item.is-current > .am-nav__link::after {
	opacity: 1;
}

.am-nav__toggle {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--am-ink);
	font-size: 24px;
	cursor: pointer;
	transition: transform var(--am-transition);
}

.am-nav__item.is-open > .am-nav__toggle,
.am-nav__toggle[aria-expanded='true'] {
	transform: rotate(180deg);
}

/* ---- Mega menu (desktop) ---- */

/*
 * Sized for a 13" laptop (team review, 14 Oct): the Figma sizes (40px
 * padding, 32px group titles, 76px graphics, 24px gaps) made the panel about
 * 690px tall, which ran off a 1280×800 or 1440×900 screen once the browser's
 * own bars are counted. This compact set is about 500px. The design's larger
 * set comes back on big screens only (the media query below).
 *
 * The panel fades in and slides 8px down with an ease-out curve; closing is
 * a touch quicker and waits 120ms, so a pointer that slips off the panel for
 * a moment does not make it flicker shut.
 */
.am-mega {
	--am-mega-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

	position: absolute;
	top: calc(100% + 16px);
	left: 50%;
	z-index: 20;
	width: min(960px, calc(100vw - 2 * var(--am-gutter)));
	max-height: calc(100vh - 140px);
	max-height: calc(100dvh - 140px);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translate(-50%, 8px);
	padding: 32px;
	background: var(--am-white);
	border-radius: var(--am-radius);
	box-shadow: var(--am-shadow-card);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 160ms ease 120ms,
		transform 160ms ease 120ms,
		visibility 0s linear 280ms;
}

/* Bridge the gap so the panel survives the mouse travelling down to it:
   from the panel's top up to the item's bottom edge (16px visual gap + the
   header's 12px bottom padding, with a little overlap). It only spans the
   panel's own width and only exists while the panel is open, so it never
   covers the other nav links or the CTA. */
.am-mega::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -32px;
	height: 32px;
}

.am-nav__item--has-menu:hover > .am-mega,
.am-nav__item--has-menu:focus-within > .am-mega,
.am-nav__item--has-menu.is-open > .am-mega {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition:
		opacity 220ms var(--am-mega-ease),
		transform 260ms var(--am-mega-ease),
		visibility 0s linear 0s;
}

.am-mega__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 32px;
}

.am-mega__group {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.am-mega__title {
	color: var(--am-teal);
	font-size: var(--am-fs-lg);
	font-weight: 400;
	line-height: 1.4;
}

.am-mega__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* One tile style for both groups (team review: the second group was darker
   and its hover barely showed). Hover: the tile tints, the graphic lifts, the
   arrow circle turns teal and the arrow nudges towards its corner. */
.am-mega__tile {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px 14px 10px 10px;
	border-radius: var(--am-radius-sm);
	background: var(--am-tint-12);
	transition: background-color 200ms ease;
}

.am-mega__tile:hover,
.am-mega__tile:focus-visible {
	background: var(--am-tint-24);
	text-decoration: none;
}

.am-mega__graphic {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	padding: 10px;
	border-radius: var(--am-radius-sm);
	background: var(--am-white);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	object-fit: contain;
	transition: transform 240ms var(--am-mega-ease), box-shadow 240ms ease;
}

.am-mega__tile:hover .am-mega__graphic,
.am-mega__tile:focus-visible .am-mega__graphic {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.am-mega__text {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.am-mega__name {
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
}

.am-mega__desc {
	font-size: var(--am-fs-sm);
	font-weight: 300;
}

.am-mega__arrow {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--am-white);
	color: var(--am-teal);
	font-size: 20px;
	transition: background-color 200ms ease, color 200ms ease;
}

.am-mega__arrow .am-icon {
	transition: transform 240ms var(--am-mega-ease);
}

.am-mega__tile:hover .am-mega__arrow,
.am-mega__tile:focus-visible .am-mega__arrow {
	background: var(--am-teal);
	color: var(--am-white);
}

.am-mega__tile:hover .am-mega__arrow .am-icon,
.am-mega__tile:focus-visible .am-mega__arrow .am-icon {
	transform: translate(2px, -2px);
}

.am-mega__all {
	grid-column: 2;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--am-teal);
	font-size: var(--am-fs-sm);
	font-weight: 400;
}

.am-mega__all .am-icon {
	font-size: 24px;
	transition: transform 240ms var(--am-mega-ease);
}

.am-mega__all:hover .am-icon {
	transform: translateX(4px);
}

/* Big screens with room to spare: the design's own sizes. */
@media (min-width: 1600px) and (min-height: 1000px) {
	.am-mega {
		width: min(1080px, calc(100vw - 2 * var(--am-gutter)));
		padding: 40px;
	}

	.am-mega__inner {
		gap: 40px;
	}

	.am-mega__group {
		gap: 24px;
	}

	.am-mega__title {
		font-size: 32px;
	}

	.am-mega__list {
		gap: 16px;
	}

	.am-mega__tile {
		padding: 12px 16px 12px 12px;
	}

	.am-mega__graphic {
		flex-basis: 72px;
		width: 72px;
		height: 72px;
		padding: 12px;
	}

	.am-mega__name {
		font-size: var(--am-fs-lg);
		line-height: 32px;
	}

	.am-mega__desc,
	.am-mega__all {
		font-size: var(--am-fs-body);
	}

	.am-mega__arrow {
		width: 40px;
		height: 40px;
		font-size: 24px;
	}
}

/* ---- Mobile header & full-screen menu ---- */

/*
 * Rebuilt after the team review (14 Oct): the links were indented 64px while
 * the logo sits on the page gutter, and the chevron hung off the right edge.
 * Now every row sits on the same gutter as the header, rows are split by a
 * hairline, the chevron is a 48px round button lined up with the header's
 * round buttons, and the services open as compact rows under it.
 */
@media (max-width: 1023px) {
	.am-header__cta {
		display: none;
	}

	/* 45px on phones and tablets (Antonio, 16 Oct; the design's 64 felt heavy). */
	.am-header__round {
		display: grid;
		width: 45px;
		height: 45px;
		font-size: 20px;
	}

	.am-header__panel {
		position: fixed;
		/* theme.js sets the real top (the header's bottom edge, which moves with the admin bar). */
		top: var(--am-panel-top, 88px);
		left: 0;
		right: 0;
		/*
		 * An explicit height (viewport minus the header), not `bottom: 0`. The
		 * panel is fixed to the viewport only while no ancestor is its
		 * containing block; a filter, backdrop-filter or transform on
		 * .am-header would make the 88px header box that block (see the note
		 * there) and `bottom: 0` would collapse the panel to zero height. The
		 * height fills the screen either way; dvh tracks the mobile browser
		 * chrome, with a vh fallback.
		 */
		height: calc(100vh - var(--am-panel-top, 88px));
		height: calc(100dvh - var(--am-panel-top, 88px));
		z-index: 90;
		overflow-y: auto;
		overscroll-behavior: contain; /* scrolling past the menu's end must not move the locked page */
		padding: 8px var(--am-gutter) 40px;
		background: var(--am-white);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
	}

	.am-header__panel.is-open {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity 220ms ease, transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0s;
	}

	.am-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.am-nav__item {
		flex-wrap: wrap;
		gap: 0;
		padding-block: 0;
		border-bottom: 1px solid var(--am-tint-24);
	}

	.am-nav__link {
		flex: 1 1 0;
		min-width: 0;
		padding-block: 20px;
		font-size: var(--am-fs-lg);
		line-height: 32px;
	}

	.am-nav__link::after {
		display: none;
	}

	.am-nav__item.is-current > .am-nav__link {
		color: var(--am-teal);
	}

	/* The toggle is its own flex item at the end of the row (no overlap with
	   the link), the same 48px circle as the header's round buttons sit on. */
	.am-nav__toggle {
		flex: 0 0 48px;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background: var(--am-tint-12);
		transition: transform var(--am-transition), background-color var(--am-transition);
	}

	.am-nav__toggle[aria-expanded='true'] {
		background: var(--am-tint-24);
	}

	/* The same panel markup becomes an accordion inside the list. */
	.am-mega {
		position: static;
		width: auto;
		max-height: none;
		overflow: visible;
		transform: none;
		padding: 0 0 24px;
		border-radius: 0;
		box-shadow: none;
		display: none;
		flex-basis: 100%;
		transition: none;
	}

	.am-mega::before {
		display: none;
	}

	.am-nav__item--has-menu:hover > .am-mega,
	.am-nav__item--has-menu:focus-within > .am-mega {
		opacity: 0;
		visibility: hidden;
		transform: none;
	}

	.am-nav__item--has-menu.is-open > .am-mega {
		display: block;
		opacity: 1;
		visibility: visible;
		transform: none;
		animation: am-accordion-in 220ms ease;
	}

	.am-mega__inner {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.am-mega__group {
		gap: 8px;
	}

	.am-mega__title {
		font-size: var(--am-fs-sm);
	}

	.am-mega__list {
		gap: 8px;
	}

	.am-mega__tile {
		padding: 12px 12px 12px 16px;
	}

	.am-mega__name {
		font-size: var(--am-fs-body);
		line-height: 24px;
	}

	.am-mega__arrow {
		width: 32px;
		height: 32px;
		font-size: 18px;
	}

	.am-mega__graphic,
	.am-mega__desc,
	.am-mega__all {
		display: none;
	}
}

@keyframes am-accordion-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

.am-footer {
	background: var(--am-ink);
	color: var(--am-white);
}

.am-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.am-footer__top {
	display: flex;
	align-items: center;
	gap: 64px;
	padding-block: 32px;
	border-bottom: 1px solid var(--am-line);
}

.am-footer__intro {
	flex: 1 1 0;
	font-size: var(--am-fs-body);
	font-weight: 300;
}

.am-footer__badges {
	flex: 1 1 0;
	display: flex;
	justify-content: flex-end;
	gap: 32px;
}

.am-footer__badges li {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	font-size: var(--am-fs-body);
	font-weight: 400;
}

.am-footer__badges .am-icon {
	font-size: 24px;
}

.am-footer__columns {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	align-items: start;
}

.am-footer__col--mobile {
	display: none;
}

.am-footer__heading {
	margin-bottom: 8px;
	font-size: var(--am-fs-lg);
	font-weight: 400;
}

.am-footer__links {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: var(--am-fs-sm);
	font-weight: 300;
}

.am-footer__mobile-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 32px;
	font-size: var(--am-fs-lg);
	font-weight: 400;
}

.am-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	padding-bottom: 40px;
}

.am-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: var(--am-fs-xs);
	font-weight: 300;
}

.am-footer__end {
	display: flex;
	align-items: center;
	gap: 32px;
}

/* "Made with ♥ by amondi": on the right, next to the social icons; the heart is the monochrome icon, sized to the text. */
.am-footer__made {
	margin: 0;
	font-size: var(--am-fs-xs);
	font-weight: 300;
}

.am-footer__made .am-icon {
	margin-inline: 0.2em;
	vertical-align: -0.125em;
}

.am-footer__socials {
	display: flex;
	gap: 16px;
}

/*
 * Until the page is wide enough for the footer to stop short of the corner,
 * keep the right-hand group (credit and social icons) clear of the cookie plugin's fixed reopen button
 * (50px, 24px from the corner). Phones get room below the legal line instead.
 */
@media (min-width: 1024px) and (max-width: 1599px) {
	.am-footer__end {
		margin-right: 64px;
	}
}

.am-footer__social {
	display: grid;
	place-items: center;
	font-size: 24px;
}

@media (max-width: 1023px) {
	.am-footer__top {
		flex-direction: column;
		gap: 32px;
		text-align: center;
	}

	.am-footer__badges {
		justify-content: center;
	}

	.am-footer__columns {
		grid-template-columns: 1fr;
	}

	.am-footer__col--desktop {
		display: none;
	}

	.am-footer__col--mobile {
		display: block;
	}

	/*
	 * Centred, the legal line runs to the right edge, where the cookie plugin's
	 * fixed reopen button (50px, 24px from the corner) sits once the page is
	 * scrolled to the end: leave room under the last line for it.
	 */
	.am-footer__bottom {
		flex-direction: column;
		text-align: center;
		padding-bottom: 96px;
	}

	.am-footer__legal {
		justify-content: center;
	}

	.am-footer__end {
		flex-direction: column;
		gap: 16px;
	}
}

/* ==========================================================================
   Cards, tiles, rows — shared building blocks
   ========================================================================== */

.am-card {
	border-radius: var(--am-radius);
	padding: 32px;
	background: var(--am-tint-12);
}

.am-glass {
	border-radius: var(--am-radius);
	border: 1px solid var(--am-white);
	background: var(--am-glass-64);
	-webkit-backdrop-filter: var(--am-blur);
	backdrop-filter: var(--am-blur);
	box-shadow: var(--am-shadow-card);
}

.am-glass--light {
	background: var(--am-glass-40);
}

/*
 * Phones: the shadows of the glass cards and the device mocks flickered
 * while scrolling the Services and Web pages (team review, 14 Oct; a
 * blurred/shadowed box at a fractional pixel offset is re-rasterised on
 * every frame). Each one gets a compositing layer of its own, painted once
 * and moved as a whole. will-change rather than a transform, so no existing
 * transform is overridden.
 */
@media (max-width: 1023px) {
	.am-glass,
	.am-svc-mock,
	.am-btn--primary {
		will-change: transform;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}
}

/* Hairline list rows (before/after, checklist, contact expectations). */
.am-rows {
	display: flex;
	flex-direction: column;
}

.am-rows__row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 8px;
	border-bottom: 1px solid var(--am-ink);
	font-size: var(--am-fs-sm);
	font-weight: 300;
	line-height: 1.4;
}

.am-rows__row .am-icon {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	padding: 8px;
}

.am-avatar {
	display: block;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
}

.am-avatar--empty {
	background: var(--am-white);
	opacity: 0.6;
}

.am-result__number {
	color: var(--am-lime);
	font-size: var(--am-fs-result);
	font-weight: 400;
	line-height: 1.4;
}

.am-result__label {
	color: var(--am-white);
	font-size: var(--am-fs-lg);
	font-weight: 300;
	line-height: 1.4;
}

/* Empty image slot: the design's grey placeholder, so a missing photo is a box, not a hole. */
.am-slot {
	background: var(--am-placeholder);
	border-radius: var(--am-radius);
}

.is-hidden {
	display: none !important;
}

/* ==========================================================================
   Marquee (statements scroll, client logos)
   ========================================================================== */

.am-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.am-marquee__track {
	display: flex;
	align-items: center;
	gap: var(--am-marquee-gap, 120px);
	width: max-content;
	padding-inline: calc(var(--am-marquee-gap, 120px) / 2);
	white-space: nowrap;
}

.am-marquee.is-running .am-marquee__track {
	animation: am-marquee var(--am-marquee-duration, 30s) linear infinite;
}

.am-marquee--reverse.is-running .am-marquee__track {
	animation-direction: reverse;
}

.am-marquee:hover .am-marquee__track {
	animation-play-state: paused;
}

@keyframes am-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-1 * var(--am-marquee-shift, 50%) - var(--am-marquee-gap, 120px))); }
}

@media (prefers-reduced-motion: reduce) {
	.am-marquee {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* ==========================================================================
   Forms
   ========================================================================== */

.am-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.am-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.am-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.am-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.am-field--half {
	grid-column: span 1;
}

.am-field--full {
	grid-column: 1 / -1;
}

.am-field__label {
	font-size: var(--am-fs-body);
	font-weight: 400;
}

.am-field__optional {
	font-weight: 300;
	opacity: 0.8;
}

.am-field__control {
	width: 100%;
	padding: 20px 16px;
	border: 1px solid var(--am-ink);
	border-radius: var(--am-radius-input);
	background: var(--am-white);
	color: var(--am-ink);
	font-size: var(--am-fs-sm);
	font-weight: 300;
	line-height: 1.4;
	appearance: none;
	-webkit-appearance: none;
}

.am-field__control::placeholder {
	color: var(--am-ink);
	opacity: 0.6;
}

.am-field__control:focus {
	outline: none;
	border-color: var(--am-teal);
	box-shadow: 0 0 0 2px var(--am-teal);
}

.am-field__select {
	position: relative;
	display: block;
}

.am-field__select select {
	padding-right: 48px;
}

.am-field__caret {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	font-size: 24px;
	transition: transform var(--am-transition);
}

/* ---- Custom select (theme.js) ----
   The native <select> stays in the form, invisible and inert, as the value
   that is posted. A combobox button stands in for it; it carries
   .am-field__control, so it gets the inputs' height, border, radius, focus
   ring and invalid state from the rules above. The listbox pops up under it
   (or above, when only that fits). */

.am-field__select.is-enhanced select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}

.am-select__button {
	display: block;
	padding-right: 48px; /* room for the caret */
	text-align: left;
	cursor: pointer;
}

.am-select__value {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.am-select__button.is-placeholder .am-select__value {
	opacity: 0.6; /* as the inputs' placeholder */
}

.am-field__select.is-open .am-select__button {
	border-color: var(--am-teal);
	box-shadow: 0 0 0 2px var(--am-teal);
}

.am-field__select.is-open .am-field__caret {
	transform: translateY(-50%) rotate(180deg);
}

.am-select__popup {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 30;
	padding: 8px;
	border: 1px solid var(--am-ink);
	border-radius: var(--am-radius-sm);
	background: var(--am-white);
	box-shadow: var(--am-shadow-card);
	animation: am-select-in var(--am-transition);
}

.am-select__popup.is-above {
	top: auto;
	bottom: calc(100% + 8px);
}

.am-select__popup[hidden] {
	display: none;
}

@keyframes am-select-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

.am-select__filter {
	width: 100%;
	margin-bottom: 8px;
	padding: 12px 16px;
	border: 1px solid var(--am-ink);
	border-radius: var(--am-radius-pill);
	background: var(--am-white);
	font-size: var(--am-fs-sm); /* 16px: iOS does not zoom into the field */
	line-height: 1.4;
}

.am-select__filter::placeholder {
	color: var(--am-ink);
	opacity: 0.6;
}

.am-select__filter:focus {
	outline: none;
	border-color: var(--am-teal);
	box-shadow: 0 0 0 2px var(--am-teal);
}

.am-select__listbox {
	position: relative; /* theme.js measures the options' offsetTop against the list */
	max-height: min(336px, 50vh); /* seven 48px options without a scrollbar */
	overflow-y: auto;
	overscroll-behavior: contain;
}

.am-select__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px; /* a comfortable tap target */
	padding: 12px 16px;
	border-radius: var(--am-radius-pill);
	font-size: var(--am-fs-sm);
	line-height: 1.4;
	cursor: pointer;
}

.am-select__option[hidden] {
	display: none;
}

.am-select__option.is-active {
	background: var(--am-tint-12);
}

.am-select__option[aria-selected='true'] {
	color: var(--am-teal);
	font-weight: 400;
}

/* The tick on the chosen option. */
.am-select__option[aria-selected='true']::after {
	content: '';
	flex: 0 0 auto;
	width: 6px;
	height: 12px;
	margin-right: 4px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: translateY(-2px) rotate(45deg);
}

.am-select__empty {
	padding: 12px 16px;
	font-size: var(--am-fs-sm);
}

.am-select__empty:empty {
	padding: 0;
}

@media (forced-colors: active) {
	.am-select__option.is-active {
		outline: 2px solid Highlight;
	}
}

@media (prefers-reduced-motion: reduce) {
	.am-select__popup {
		animation: none;
	}
}

.am-field.is-invalid .am-field__control {
	border-color: #b3261e;
	box-shadow: 0 0 0 1px #b3261e;
}

.am-field__help,
.am-form__notice {
	font-size: var(--am-fs-sm);
	font-weight: 300;
}

.am-form__notice a {
	text-decoration: underline;
}

.am-field__error,
.am-form__error {
	color: #b3261e;
	font-size: var(--am-fs-sm);
	font-weight: 400;
}

.am-form__done {
	padding: 24px;
	border-radius: var(--am-radius-sm);
	background: var(--am-tint-12);
	font-size: var(--am-fs-lg);
	font-weight: 300;
}

.am-check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: var(--am-fs-sm);
	font-weight: 300;
}

.am-check input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--am-teal);
}

.am-form__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding-top: 16px;
	text-align: center;
}

@media (max-width: 700px) {
	.am-form__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Prose (articles, legal pages, case-study body text)
   ========================================================================== */

.am-prose {
	font-size: var(--am-fs-body);
	font-weight: 300;
	line-height: 1.5;
}

.am-prose > * + * {
	margin-top: 1.2em;
}

.am-prose > h2 {
	margin-top: 2em;
	font-size: var(--am-fs-h2-sm);
	line-height: 1.2;
}

.am-prose > h3 {
	margin-top: 1.6em;
	font-size: var(--am-fs-lg);
}

.am-prose > h4 {
	font-size: var(--am-fs-body);
	font-weight: 400;
}

.am-prose > ul,
.am-prose > ol {
	padding-left: 1.2em;
}

.am-prose > ul {
	list-style: disc;
}

.am-prose > ol {
	list-style: decimal;
}

.am-prose li + li {
	margin-top: 0.4em;
}

.am-prose a {
	color: var(--am-teal);
	text-decoration: underline;
}

.am-prose blockquote,
.am-prose > .wp-block-quote {
	padding: 24px 32px;
	border-left: 4px solid var(--am-teal);
	border-radius: 0 var(--am-radius-sm) var(--am-radius-sm) 0;
	background: var(--am-tint-12);
	font-size: var(--am-fs-lg);
}

.am-prose blockquote cite {
	display: block;
	margin-top: 12px;
	font-size: var(--am-fs-sm);
	font-style: normal;
}

.am-prose img,
.am-prose figure img {
	border-radius: var(--am-radius);
}

.am-prose figcaption {
	margin-top: 8px;
	font-size: var(--am-fs-xs);
}

.am-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--am-fs-sm);
}

.am-prose th,
.am-prose td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--am-ink);
	text-align: left;
	vertical-align: top;
}

.am-prose th {
	font-weight: 400;
}

/* Long cookie names (wordpress_logged_in_*) may break, so they do not set the column width. */
.am-prose td code {
	overflow-wrap: anywhere;
}

.am-prose .wp-block-gallery {
	gap: 16px;
}

/* Plain page (legal pages, index): a centred column. */
.am-page {
	padding-bottom: var(--am-section);
}

/*
 * The legal pages read like an Insights article (team review, 14 Oct; Jam:
 * "legal pages seem to have a different font style"): the article's main
 * column width (928px), its title size (page.php uses .am-h2) and its body
 * type, 24px Light at 1.4 with 1em between blocks (src/articles/style.scss,
 * .am-article__body). Tables keep the smaller size of the shared prose.
 */
.am-page__inner {
	max-width: 928px;
	margin-inline: auto;
}

.am-page .am-prose {
	font-size: var(--am-fs-lg);
	line-height: 1.4;
}

.am-page .am-prose > * + * {
	margin-top: 1em;
}

.am-page .am-prose > h2 {
	margin-top: 1.67em;
}

.am-page .am-prose > h3 {
	font-size: clamp(28px, 0.96vw + 23.9px, 32px);
}

.am-page__title {
	margin-bottom: var(--am-stack);
}

/* Legal pages: "Last updated: …" between the title and the text. */
.am-page__updated {
	margin-top: calc(var(--am-stack) / -2);
	margin-bottom: var(--am-stack);
	font-size: var(--am-fs-sm);
}

.am-index {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: var(--am-stack);
}

.am-index__link {
	font-size: var(--am-fs-lg);
	font-weight: 400;
}

.am-index__excerpt {
	margin-top: 4px;
}

/* 404 */
.am-404 {
	padding-bottom: var(--am-section);
	text-align: center;
}

.am-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: var(--am-stack);
}

/* Core alignment: sections are full-bleed, no editor margins on the front. */
.alignfull {
	margin-inline: 0;
	width: 100%;
	max-width: none;
}

/* ==========================================================================
   EXPERIMENTAL — highlight "marker wipe" animation.
   Delete everything between this banner and the matching end banner to revert
   (paired with the block of the same name in assets/js/theme.js).

   The teal block draws in left→right and reveals the white text like a
   highlighter stroke, the first time each headline scrolls into view.

   Implemented as a TRANSITION, not a keyframe: a revealed (`--in`) highlight's
   resting style is the full teal block, so the text is guaranteed visible even
   if the transition itself never runs (paused tab, etc.). The `.am-hl.` prefix
   raises specificity above the base `mark.am-hl` rule. With JS off, or for
   reduced-motion users, `--anim` is never added and .am-hl stays solid teal.
   ========================================================================== */

.am-hl.am-hl--anim {
	/* The teal is drawn as a 0-width gradient image (not the solid colour) so
	   it can grow; the base colour is cleared for the reveal. */
	background-color: transparent;
	background-image: linear-gradient(var(--am-teal), var(--am-teal));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0% 100%;
	transition: background-size 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.am-hl.am-hl--in {
	background-size: 100% 100%;
}

@media (prefers-reduced-motion: reduce) {
	.am-hl.am-hl--anim {
		background-color: var(--am-teal);
		background-size: 100% 100%;
		transition: none;
	}
}

/* === end EXPERIMENTAL highlight animation === */

/* ==========================================================================
   Filter tabs loading in place (assets/js/theme.js, team review 14 Oct): the
   grid dims while the next one is fetched, so a slow connection still shows
   that the click registered.
   ========================================================================== */

.am-case-grid.is-loading .am-case-grid__list,
.am-articles.is-loading .am-articles__grid {
	opacity: 0.45;
	transition: opacity 120ms ease 80ms;
}

/* A form replaced by its thank-you line in place keeps its box height (set
   by theme.js); the line sits in the middle of it. */
.am-form-sent {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Newsletter confirm / unsubscribe page (inc/newsletter.php): one line and the button. */
.am-form__lead {
	margin-bottom: 20px;
	font-size: var(--am-fs-body);
	line-height: 1.5;
}