/**
 * ATMS Marketing — main stylesheet
 *
 * ARCHITECTURE
 * Cascade layers are declared once, here. Everything added later must go into a
 * layer, which is what keeps specificity from becoming an argument.
 *
 * Tokens ALIAS the theme.json-generated --wp--preset--* variables rather than
 * duplicating their values. theme.json is the single source of truth, so the
 * editor and the front end cannot drift apart.
 *
 * TONE CONTRACT
 * Sections declare a tone (.tone-light / .tone-alt / .tone-ink) and components
 * read from --tone-* variables, never from raw brand tokens. One class on a
 * section wrapper retones every card, button, border and focus ring inside it.
 * There are NO dark variants of any component, by design.
 *
 * Two measured facts make this mandatory rather than stylistic:
 *   1. #8F0C0C on #241F1F is 1.72:1 — the primary button would nearly vanish on
 *      a dark section, so the action colour MUST change by context.
 *   2. #FF4747 on a #FF4747 button is 1.00:1 — an invisible focus ring. The ring
 *      colour is a tone token, and outline-offset places it on the section
 *      background where it measures 3.36:1 on white, 3.15:1 on surface-alt.
 *
 * ACCESSIBILITY NOTES
 *   --tone-border is DECORATIVE ONLY (1.33:1 on white). Where a border must
 *   carry meaning — state, validation, an interactive boundary needing 3:1 —
 *   use --tone-muted (7.70:1) instead.
 *
 *   #FF4747 never carries normal text on a light surface. It carries text only
 *   on .tone-ink, where it measures 4.84:1.
 *
 * BREAKPOINTS
 * Custom properties cannot be used inside media query conditions, and there is
 * no build step to provide @custom-media — so these are documented constants,
 * not tokens. The system leans on clamp(), auto-fit grids and container queries
 * so they are needed rarely.
 *
 *   sm   30em    480px
 *   md   48em    768px
 *   lg   64em   1024px
 *   xl   80em   1280px
 */

@layer tokens, reset, base, layout, components, blocks, utilities, overrides;

/* ==========================================================================
   TOKENS
   ========================================================================== */

@layer tokens {
	:root {
		/* Brand — aliased from theme.json */
		--atms-brand: var(--wp--preset--color--brand);
		--atms-brand-deep: var(--wp--preset--color--brand-deep);
		--atms-brand-rust: var(--wp--preset--color--brand-rust);
		--atms-ink: var(--wp--preset--color--ink);
		--atms-ink-muted: var(--wp--preset--color--ink-muted);
		--atms-surface: var(--wp--preset--color--surface);
		--atms-surface-alt: var(--wp--preset--color--surface-alt);
		--atms-border: var(--wp--preset--color--border);
		--atms-ink-elevated: var(--wp--preset--color--ink-elevated);
		--atms-border-ink: var(--wp--preset--color--border-ink);
		--atms-muted-ink: var(--wp--preset--color--muted-ink);

		/* Type */
		--atms-font-heading: var(--wp--preset--font-family--heading);
		--atms-font-body: var(--wp--preset--font-family--body);
		--atms-leading-tight: 1.15;
		--atms-leading-normal: 1.6;
		--atms-leading-relaxed: 1.75;
		--atms-measure: 68ch;

		/* Spacing */
		--atms-space-3xs: var(--wp--preset--spacing--3-xs);
		--atms-space-2xs: var(--wp--preset--spacing--2-xs);
		--atms-space-xs: var(--wp--preset--spacing--xs);
		--atms-space-s: var(--wp--preset--spacing--s);
		--atms-space-m: var(--wp--preset--spacing--m);
		--atms-space-l: var(--wp--preset--spacing--l);
		--atms-space-xl: var(--wp--preset--spacing--xl);
		--atms-space-2xl: var(--wp--preset--spacing--2-xl);
		--atms-space-3xl: var(--wp--preset--spacing--3-xl);

		/* Layout */
		--atms-content-width: 720px;
		--atms-wide-width: 1200px;
		--atms-gutter: clamp(1rem, 4vw, 2rem);
		--atms-section-y: clamp(3rem, 7vw, 5.5rem);
		--atms-section-y-tight: clamp(2rem, 4vw, 3rem);
		--atms-section-y-loose: clamp(4.5rem, 10vw, 8rem);

		/* Motion + shape */
		--atms-transition: 160ms ease;
		--atms-radius-sm: 4px;
		--atms-radius-md: 8px;

		/* Default tone = light. Overridden by .tone-* wrappers. */
		--tone-bg: var(--atms-surface);
		--tone-fg: var(--atms-ink);
		--tone-muted: var(--atms-ink-muted);
		--tone-border: var(--atms-border);
		--tone-elevated: var(--atms-surface-alt);
		--tone-action-bg: var(--atms-brand-deep);
		--tone-action-fg: var(--atms-surface);
		--tone-action-hover-bg: var(--atms-ink);
		--tone-action-hover-fg: var(--atms-surface);
		--tone-link: var(--atms-brand-deep);
		--tone-focus: var(--atms-brand);
	}

	@media (prefers-reduced-motion: reduce) {
		:root {
			--atms-transition: 0ms;
		}
	}

	/* Tone: light — white surface, elevated blocks lift to warm off-white. */
	.tone-light {
		--tone-bg: var(--atms-surface);
		--tone-fg: var(--atms-ink);
		--tone-muted: var(--atms-ink-muted);
		--tone-border: var(--atms-border);
		--tone-elevated: var(--atms-surface-alt);
		--tone-action-bg: var(--atms-brand-deep);
		--tone-action-fg: var(--atms-surface);
		--tone-action-hover-bg: var(--atms-ink);
		--tone-action-hover-fg: var(--atms-surface);
		--tone-link: var(--atms-brand-deep);
		--tone-focus: var(--atms-brand);
	}

	/* Tone: alt — warm off-white surface, elevated blocks lift to white. */
	.tone-alt {
		--tone-bg: var(--atms-surface-alt);
		--tone-fg: var(--atms-ink);
		--tone-muted: var(--atms-ink-muted);
		--tone-border: var(--atms-border);
		--tone-elevated: var(--atms-surface);
		--tone-action-bg: var(--atms-brand-deep);
		--tone-action-fg: var(--atms-surface);
		--tone-action-hover-bg: var(--atms-ink);
		--tone-action-hover-fg: var(--atms-surface);
		--tone-link: var(--atms-brand-deep);
		--tone-focus: var(--atms-brand);
	}

	/*
	 * Tone: ink — the only place #FF4747 carries text or fills a button.
	 * Action flips to brand red on ink text (4.84:1); brand-deep would have been
	 * 1.72:1 against this background and effectively invisible.
	 * Focus ring flips to white: 16.27:1 on the section, 3.36:1 on a red button.
	 */
	.tone-ink {
		--tone-bg: var(--atms-ink);
		--tone-fg: var(--atms-surface);
		--tone-muted: var(--atms-muted-ink);
		--tone-border: var(--atms-border-ink);
		--tone-elevated: var(--atms-ink-elevated);
		--tone-action-bg: var(--atms-brand);
		--tone-action-fg: var(--atms-ink);
		--tone-action-hover-bg: var(--atms-surface);
		--tone-action-hover-fg: var(--atms-ink);
		--tone-link: var(--atms-brand);
		--tone-focus: var(--atms-surface);
	}

	.tone-light,
	.tone-alt,
	.tone-ink {
		background-color: var(--tone-bg);
		color: var(--tone-fg);
	}
}

/* ==========================================================================
   RESET
   ========================================================================== */

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

	body,
	h1, h2, h3, h4, h5, h6,
	p, figure, blockquote, dl, dd {
		margin: 0;
	}

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

	html:focus-within {
		scroll-behavior: smooth;
	}

	body {
		min-height: 100vh;
		text-rendering: optimizeSpeed;
	}

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

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

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

	a:not([class]) {
		text-decoration-skip-ink: auto;
	}

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

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

/* ==========================================================================
   BASE
   ========================================================================== */

@layer base {
	body {
		background-color: var(--tone-bg);
		color: var(--tone-fg);
		font-family: var(--atms-font-body);
		font-size: var(--wp--preset--font-size--base);
		line-height: var(--atms-leading-normal);
		-webkit-font-smoothing: antialiased;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: var(--atms-font-heading);
		font-weight: 700;
		line-height: var(--atms-leading-tight);
		letter-spacing: -0.015em;
		text-wrap: balance;
	}

	/*
	 * The default heading scale lives HERE, in the base layer, and deliberately
	 * NOT in theme.json. theme.json emits UNLAYERED css, which outranks every
	 * rule in this file regardless of specificity — it would freeze
	 * .footer-nav__title, .card__title and .page-hero__title at the document
	 * scale and no component rule could ever win.
	 *
	 * Content headings are unaffected: an editor's chosen size arrives as a
	 * has-*-font-size preset class, which core marks !important.
	 */
	h1 { font-size: var(--wp--preset--font-size--4-xl); }
	h2 { font-size: var(--wp--preset--font-size--3-xl); }
	h3 { font-size: var(--wp--preset--font-size--2-xl); }
	h4 { font-size: var(--wp--preset--font-size--xl); }
	h5 { font-size: var(--wp--preset--font-size--lg); }
	h6 { font-size: var(--wp--preset--font-size--base); }

	p {
		text-wrap: pretty;
	}

	a {
		color: var(--tone-link);
		text-underline-offset: 0.2em;
		transition: color var(--atms-transition);
	}

	a:hover {
		color: var(--tone-fg);
	}

	/*
	 * Focus is never removed. The 2px offset is load-bearing: it places the ring
	 * on the section background rather than on the element, which is what keeps
	 * it visible on a coloured button.
	 */
	:focus-visible {
		outline: 3px solid var(--tone-focus);
		outline-offset: 2px;
	}

	hr {
		border: 0;
		border-top: 1px solid var(--tone-border);
		margin-block: var(--atms-space-l);
	}

	::selection {
		background-color: var(--atms-brand);
		color: var(--atms-ink);
	}
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

@layer layout {
	.container,
	.container--narrow,
	.container--measure {
		width: 100%;
		margin-inline: auto;
		padding-inline: var(--atms-gutter);
	}

	.container { max-width: var(--atms-wide-width); }
	.container--narrow { max-width: var(--atms-content-width); }
	.container--measure { max-width: var(--atms-measure); }
	.container--full { width: 100%; max-width: none; }

	.section {
		padding-block: var(--atms-section-y);
	}

	.section--tight { padding-block: var(--atms-section-y-tight); }
	.section--loose { padding-block: var(--atms-section-y-loose); }
	.section--none  { padding-block: 0; }

	.site-main {
		display: block;
		padding-block: var(--atms-space-xl);
	}

	/*
	 * Intrinsic grid. min() guards against overflow when --grid-min exceeds the
	 * available width — the classic auto-fit bug on narrow screens.
	 */
	.grid {
		--grid-min: 18rem;
		display: grid;
		gap: var(--atms-space-m);
		grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min), 100%), 1fr));
	}

	.grid--2 { --grid-min: 24rem; }
	.grid--3 { --grid-min: 18rem; }
	.grid--4 { --grid-min: 14rem; }

	/* Block editor content flow */
	.entry__content > * {
		margin-inline: auto;
		max-width: var(--atms-content-width);
		padding-inline: var(--atms-gutter);
	}

	.entry__content > * + * {
		margin-block-start: var(--atms-space-m);
	}

	.entry__content > .alignwide { max-width: var(--atms-wide-width); }

	.entry__content > .alignfull {
		max-width: none;
		padding-inline: 0;
	}
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

@layer components {

	/* Accessibility ------------------------------------------------------- */

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

	.skip-link {
		position: absolute;
		top: 0;
		left: var(--atms-space-s);
		z-index: 100;
		padding: var(--atms-space-2xs) var(--atms-space-s);
		background-color: var(--atms-ink);
		color: var(--atms-surface);
		transform: translateY(-150%);
		transition: transform var(--atms-transition);
	}

	.skip-link:focus-visible {
		transform: translateY(0);
		color: var(--atms-surface);
	}

	/* Buttons ------------------------------------------------------------- */

	/*
	 * Every value is a tone token, so all four variants retone automatically
	 * inside .tone-ink. No dark button variants exist.
	 * 44px minimum in both axes for touch targets.
	 */
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--atms-space-2xs);
		min-height: 44px;
		min-width: 44px;
		padding: var(--atms-space-2xs) var(--atms-space-m);
		border: 2px solid transparent;
		border-radius: var(--atms-radius-sm);
		font-family: var(--atms-font-heading);
		font-size: var(--wp--preset--font-size--sm);
		font-weight: 600;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		transition:
			background-color var(--atms-transition),
			border-color var(--atms-transition),
			color var(--atms-transition);
	}

	.btn--sm {
		padding-inline: var(--atms-space-s);
		font-size: var(--wp--preset--font-size--xs);
	}

	.btn--lg {
		padding: var(--atms-space-xs) var(--atms-space-l);
		font-size: var(--wp--preset--font-size--base);
	}

	.btn--primary {
		background-color: var(--tone-action-bg);
		border-color: var(--tone-action-bg);
		color: var(--tone-action-fg);
	}

	.btn--primary:hover {
		background-color: var(--tone-action-hover-bg);
		border-color: var(--tone-action-hover-bg);
		color: var(--tone-action-hover-fg);
	}

	.btn--secondary {
		background-color: var(--tone-fg);
		border-color: var(--tone-fg);
		color: var(--tone-bg);
	}

	.btn--secondary:hover {
		background-color: var(--tone-action-bg);
		border-color: var(--tone-action-bg);
		color: var(--tone-action-fg);
	}

	.btn--outline {
		background-color: transparent;
		border-color: var(--tone-action-bg);
		color: var(--tone-action-bg);
	}

	.btn--outline:hover {
		background-color: var(--tone-action-bg);
		color: var(--tone-action-fg);
	}

	.btn--text {
		min-height: 44px;
		padding-inline: 0;
		background: none;
		border-color: transparent;
		color: var(--tone-link);
		text-decoration: underline;
		text-underline-offset: 0.25em;
	}

	.btn--text:hover {
		color: var(--tone-fg);
	}

	/* Eyebrow ------------------------------------------------------------- */

	.eyebrow {
		margin-block-end: var(--atms-space-2xs);
		font-family: var(--atms-font-heading);
		font-size: var(--wp--preset--font-size--xs);
		font-weight: 700;
		letter-spacing: 0.1em;
		line-height: 1.3;
		text-transform: uppercase;
		color: var(--tone-muted);
	}

	/* Section heading ----------------------------------------------------- */

	.section-heading {
		max-width: var(--atms-measure);
	}

	.section-heading--center {
		margin-inline: auto;
		text-align: center;
	}

	.section-heading__title {
		font-size: var(--wp--preset--font-size--3-xl);
	}

	.section-heading__lede {
		margin-block-start: var(--atms-space-s);
		color: var(--tone-muted);
		font-size: var(--wp--preset--font-size--lg);
		line-height: var(--atms-leading-relaxed);
	}

	.section-heading__lede > * + * {
		margin-block-start: var(--atms-space-s);
	}

	/* Media --------------------------------------------------------------- */

	.media {
		position: relative;
		margin: 0;
		overflow: hidden;
		background-color: var(--tone-elevated);
	}

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

	.media--16x9 { aspect-ratio: 16 / 9; }
	.media--4x3  { aspect-ratio: 4 / 3; }
	.media--3x2  { aspect-ratio: 3 / 2; }
	.media--1x1  { aspect-ratio: 1 / 1; }

	/* Cards --------------------------------------------------------------- */

	/*
	 * container-type makes the card respond to its own width, not the viewport,
	 * so one card component is correct in a 3-up grid, a sidebar, or full width.
	 */
	.card {
		container-type: inline-size;
		position: relative;
		display: flex;
		flex-direction: column;
		background-color: var(--tone-elevated);
		border: 1px solid var(--tone-border);
		border-radius: var(--atms-radius-md);
		overflow: hidden;
		transition: border-color var(--atms-transition);
	}

	.card:has(.card__link:hover),
	.card:has(.card__link:focus-visible) {
		border-color: var(--tone-action-bg);
	}

	.card__body {
		display: flex;
		flex-direction: column;
		gap: var(--atms-space-2xs);
		padding: var(--atms-space-m);
	}

	.card__title {
		font-size: var(--wp--preset--font-size--xl);
	}

	/*
	 * Stretched overlay: the whole card is clickable, but exactly ONE link is in
	 * the accessibility tree. Text stays selectable because the overlay sits
	 * behind it (z-index 0 vs auto-stacked content).
	 */
	.card__link {
		color: inherit;
		text-decoration: none;
	}

	.card__link::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
	}

	.card__link:hover {
		color: var(--tone-link);
	}

	.card__excerpt {
		color: var(--tone-muted);
		font-size: var(--wp--preset--font-size--sm);
	}

	.card__meta,
	.card__terms {
		display: flex;
		flex-wrap: wrap;
		gap: var(--atms-space-2xs);
		font-size: var(--wp--preset--font-size--xs);
		color: var(--tone-muted);
	}

	/* Term links must sit ABOVE the stretched overlay to stay clickable. */
	.card__term {
		position: relative;
		z-index: 1;
	}

	.card__term a {
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		font-weight: 600;
	}

	.card__cta {
		margin-block-start: var(--atms-space-2xs);
		color: var(--tone-link);
		font-family: var(--atms-font-heading);
		font-size: var(--wp--preset--font-size--sm);
		font-weight: 600;
	}

	.card__icon {
		display: inline-flex;
		width: 2.5rem;
		height: 2.5rem;
		margin-block-end: var(--atms-space-2xs);
		color: var(--tone-action-bg);
	}

	.card__icon svg {
		width: 100%;
		height: 100%;
	}

	/* Container query: roomier padding once the card itself is wide enough. */
	@container (min-width: 26rem) {
		.card__body { padding: var(--atms-space-l); }
		.card__title { font-size: var(--wp--preset--font-size--2-xl); }
	}

	/* CTA band ------------------------------------------------------------ */

	.cta-band__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--atms-space-m);
		text-align: center;
	}

	.cta-band__actions {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--atms-space-s);
	}

	/* Header -------------------------------------------------------------- */

	.site-header {
		border-block-end: 1px solid var(--tone-border);
	}

	.site-header__inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--atms-space-s);
		padding-block: var(--atms-space-s);
	}

	.site-brand__text {
		font-family: var(--atms-font-heading);
		font-size: var(--wp--preset--font-size--xl);
		font-weight: 800;
		color: var(--tone-fg);
		text-decoration: none;
	}

	/*
	 * The supplied mark is 1983x793 — a 2.5:1 horizontal lockup with the
	 * strapline set small underneath. Height, not width, is what keeps the
	 * header compact, so the logo is constrained by height and left to find its
	 * own width. 44px on mobile keeps the header near its previous 77px and
	 * still leaves the strapline legible; 52px from the tablet breakpoint up.
	 */
	.custom-logo,
	.site-brand__logo {
		display: block;
		height: auto;
		max-height: 44px;
		width: auto;
	}

	@media (min-width: 48em) {
		.custom-logo,
		.site-brand__logo { max-height: 52px; }
	}

	.site-brand a {
		display: inline-flex;
		line-height: 0;
	}

	.atms-form__privacy {
		color: var(--tone-muted);
		font-size: var(--wp--preset--font-size--xs);
		margin-block-start: var(--atms-space-xs);
		max-width: var(--atms-measure);
	}

	.footer-contact__list {
		display: flex;
		flex-direction: column;
		gap: var(--atms-space-3xs);
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.footer-contact__item { color: var(--tone-muted); }

	.footer-contact__item a { color: var(--tone-muted); }

	.footer-contact__item a:hover { color: var(--tone-fg); }

	/* The footer mark sits on charcoal and can afford to be a touch larger. */
	.site-footer__brand .site-brand__logo,
	.site-footer__brand .custom-logo { max-height: 56px; }

	/* Navigation ---------------------------------------------------------- */

	.nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		background: none;
		border: 1px solid var(--tone-muted);
		border-radius: var(--atms-radius-sm);
		cursor: pointer;
	}

	.nav-toggle__bar,
	.nav-toggle__bar::before,
	.nav-toggle__bar::after {
		display: block;
		width: 20px;
		height: 2px;
		background-color: var(--tone-fg);
	}

	.nav-toggle__bar::before,
	.nav-toggle__bar::after {
		content: "";
		position: relative;
	}

	.nav-toggle__bar::before { top: -6px; }
	.nav-toggle__bar::after  { top: 4px; }

	.primary-nav {
		flex-basis: 100%;
	}

	/*
	 * No-JS safety: the nav is visible by default. main.js adds .has-js to the
	 * root, which is what enables collapsing. Without JavaScript the menu stays
	 * open and usable rather than permanently hidden.
	 */
	.has-js .primary-nav { display: none; }
	.has-js .primary-nav.is-open { display: block; }

	.primary-nav__list {
		display: flex;
		flex-direction: column;
		gap: var(--atms-space-2xs);
		padding-block: var(--atms-space-s);
	}

	.primary-nav__list a {
		display: block;
		padding: var(--atms-space-2xs) 0;
		color: var(--tone-fg);
		font-family: var(--atms-font-heading);
		font-weight: 600;
		text-decoration: none;
	}

	.primary-nav__list a:hover,
	.primary-nav__list [aria-current] {
		color: var(--tone-link);
	}

	.primary-nav__list [aria-current="page"] {
		text-decoration: underline;
		text-underline-offset: 0.3em;
	}

	/* Submenus: stacked and always visible on mobile. */
	.primary-nav__list .sub-menu {
		display: flex;
		flex-direction: column;
		gap: var(--atms-space-3xs);
		margin-inline-start: var(--atms-space-s);
		padding: 0;
		list-style: none;
	}

	.primary-nav__list .sub-menu a {
		font-size: var(--wp--preset--font-size--sm);
		font-weight: 500;
		color: var(--tone-muted);
	}

	/*
	 * The navigation switches to its horizontal layout at 64em, not at the 48em
	 * used elsewhere. Measured at 768px: six items plus the CTA do not fit on
	 * one line, so the header wrapped to two rows (157px tall) and the CTA label
	 * broke mid-phrase. The disclosure menu handles tablet widths cleanly, so it
	 * keeps them.
	 */
	@media (min-width: 64em) {
		.nav-toggle { display: none; }

		.primary-nav,
		.has-js .primary-nav {
			display: block;
			flex-basis: auto;
		}

		.primary-nav__list {
			flex-direction: row;
			align-items: center;
			gap: var(--atms-space-m);
			padding-block: 0;
		}

		.primary-nav__list .has-submenu {
			position: relative;
		}

		/*
		 * :focus-within is what makes this keyboard-operable without JavaScript
		 * and without a custom walker. A hover-only submenu is inaccessible.
		 */
		.primary-nav__list .sub-menu {
			position: absolute;
			inset-inline-start: 0;
			top: 100%;
			z-index: 20;
			min-width: 14rem;
			margin: 0;
			padding: var(--atms-space-2xs);
			background-color: var(--atms-surface);
			border: 1px solid var(--atms-border);
			border-radius: var(--atms-radius-sm);
			opacity: 0;
			visibility: hidden;
			transition: opacity var(--atms-transition);
		}

		.primary-nav__list .has-submenu:hover > .sub-menu,
		.primary-nav__list .has-submenu:focus-within > .sub-menu {
			opacity: 1;
			visibility: visible;
		}

		.primary-nav__list .sub-menu a {
			padding: var(--atms-space-2xs) var(--atms-space-2xs);
			color: var(--atms-ink);
		}
	}

	/* Footer -------------------------------------------------------------- */

	.site-footer {
		margin-block-start: var(--atms-space-2xl);
		padding-block: var(--atms-space-xl);
		border-block-start: 1px solid var(--tone-border);
	}

	.site-footer__inner {
		display: grid;
		gap: var(--atms-space-l);
	}

	.site-footer__tagline {
		margin-block-start: var(--atms-space-2xs);
		color: var(--tone-muted);
		font-size: var(--wp--preset--font-size--sm);
		max-width: 32ch;
	}

	.footer-nav__title {
		margin-block-end: var(--atms-space-2xs);
		font-size: var(--wp--preset--font-size--sm);
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--tone-muted);
	}

	.footer-nav__list a,
	.legal-nav__list a {
		color: var(--tone-fg);
		text-decoration: none;
	}

	.footer-nav__list a:hover,
	.legal-nav__list a:hover {
		color: var(--tone-link);
		text-decoration: underline;
	}

	.legal-nav__list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--atms-space-s);
	}

	.site-footer__legal {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--atms-space-s);
		padding-block-start: var(--atms-space-m);
		border-block-start: 1px solid var(--tone-border);
		font-size: var(--wp--preset--font-size--sm);
		color: var(--tone-muted);
	}

	@media (min-width: 48em) {
		.site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		.site-footer__legal { grid-column: 1 / -1; }
	}

	@media (min-width: 64em) {
		.site-footer__inner { grid-template-columns: 2fr 1fr 1fr; }
	}

	/* Search -------------------------------------------------------------- */

	.search-form {
		display: flex;
		flex-wrap: wrap;
		gap: var(--atms-space-2xs);
		align-items: end;
	}

	.search-form__label {
		flex-basis: 100%;
		font-size: var(--wp--preset--font-size--sm);
		font-weight: 600;
	}

	.search-form__input {
		flex: 1 1 12rem;
		min-height: 44px;
		padding: var(--atms-space-2xs) var(--atms-space-xs);
		background-color: var(--tone-bg);
		color: var(--tone-fg);
		border: 1px solid var(--tone-muted);
		border-radius: var(--atms-radius-sm);
	}

	.search-form__submit {
		min-height: 44px;
		padding: var(--atms-space-2xs) var(--atms-space-s);
		border: 0;
		border-radius: var(--atms-radius-sm);
		background-color: var(--tone-action-bg);
		color: var(--tone-action-fg);
		font-family: var(--atms-font-heading);
		font-weight: 600;
		cursor: pointer;
		transition: background-color var(--atms-transition);
	}

	.search-form__submit:hover {
		background-color: var(--tone-action-hover-bg);
		color: var(--tone-action-hover-fg);
	}

	/* Entries + empty state ----------------------------------------------- */

	.page-header {
		margin-block-end: var(--atms-space-l);
	}

	.entry__header {
		margin-block-end: var(--atms-space-l);
	}

	.entry__title {
		font-size: var(--wp--preset--font-size--4-xl);
	}

	.content-none {
		display: flex;
		flex-direction: column;
		gap: var(--atms-space-m);
	}

	/* Keeps the button shrink-to-fit inside the flex column. */
	.content-none__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--atms-space-2xs);
	}

	.page-links {
		display: flex;
		gap: var(--atms-space-2xs);
	}
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

@layer utilities {
	.u-measure { max-width: var(--atms-measure); }
	.u-center  { margin-inline: auto; text-align: center; }
	.u-muted   { color: var(--tone-muted); }
	.u-stack > * + * { margin-block-start: var(--atms-space-m); }
	.u-hidden  { display: none !important; }
}

/* ==========================================================================
   HIGH CONTRAST
   ========================================================================== */

@layer overrides {
	/*
	 * --tone-border is decorative (1.33:1). Under an explicit contrast
	 * preference, promote every border to --tone-muted (7.70:1) and thicken
	 * outline buttons. Cheap now, awkward to retrofit later.
	 */
	@media (prefers-contrast: more) {
		.card,
		.site-header,
		.site-footer,
		.site-footer__legal,
		hr {
			border-color: var(--tone-muted);
		}

		.btn--outline {
			border-width: 3px;
		}

		.card__excerpt,
		.eyebrow,
		.section-heading__lede,
		.site-footer__legal {
			color: var(--tone-fg);
		}
	}
}

/* ==========================================================================
   PHASE 3 — PAGE ARCHITECTURE
   ========================================================================== */

@layer layout {
	/*
	 * Section-canvas pages: content is a stack of full-bleed sections, so the
	 * narrow prose measure must NOT be applied to top-level children. Inner
	 * .container elements restore the measure per section.
	 */
	.site-main--flush { padding-block: 0; }

	.entry__content--flush > * {
		max-width: none;
		margin-inline: 0;
		padding-inline: 0;
	}

	.entry__content--flush > * + * { margin-block-start: 0; }

	/* Blocks placed directly on a flush canvas still need a readable measure. */
	.entry__content--flush > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, figure, pre, table) {
		max-width: var(--atms-content-width);
		margin-inline: auto;
		padding-inline: var(--atms-gutter);
	}

	.entry__content--flush > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote) + :is(p, ul, ol, blockquote) {
		margin-block-start: var(--atms-space-m);
	}
}

@layer components {

	/* Breadcrumbs --------------------------------------------------------- */

	.breadcrumbs-bar { padding-block: var(--atms-space-s); }

	.breadcrumbs__list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--atms-space-2xs);
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: var(--wp--preset--font-size--xs);
		color: var(--tone-muted);
	}

	.breadcrumbs__item + .breadcrumbs__item::before {
		content: "/";
		margin-inline-end: var(--atms-space-2xs);
		color: var(--tone-muted);
	}

	.breadcrumbs__item a { color: var(--tone-muted); }
	.breadcrumbs__item a:hover { color: var(--tone-link); }
	.breadcrumbs__item [aria-current] { color: var(--tone-fg); font-weight: 600; }

	/* Page hero (service / hub / archive / single) ------------------------- */

	.page-hero { padding-block: var(--atms-section-y-tight) var(--atms-space-l); }

	.page-hero__inner {
		display: flex;
		flex-direction: column;
		gap: var(--atms-space-s);
		max-width: var(--atms-measure);
	}

	.page-hero__title { font-size: var(--wp--preset--font-size--4-xl); }

	.page-hero__lede {
		color: var(--tone-muted);
		font-size: var(--wp--preset--font-size--lg);
		line-height: var(--atms-leading-relaxed);
	}

	.page-hero__terms {
		display: flex;
		flex-wrap: wrap;
		gap: var(--atms-space-2xs);
		font-size: var(--wp--preset--font-size--xs);
		text-transform: uppercase;
		letter-spacing: 0.06em;
		font-weight: 600;
	}

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

	.hero { position: relative; }

	.hero__inner { position: relative; z-index: 1; }

	.hero__content {
		display: flex;
		flex-direction: column;
		gap: var(--atms-space-m);
		max-width: var(--atms-measure);
	}

	.hero__media {
		position: absolute;
		inset: 0;
		overflow: hidden;
	}

	.hero__image,
	.hero__video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/*
	 * Overlay keeps text legible over photography. It is a scrim, not decoration:
	 * without it the hero would rely on the image happening to be dark enough.
	 */
	.hero--overlay .hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgb(36 31 31 / 0.45), rgb(36 31 31 / 0.78));
	}

	.hero__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--atms-space-s);
	}

	.hero__tagline {
		color: var(--tone-muted);
		font-family: var(--atms-font-heading);
		font-size: var(--wp--preset--font-size--sm);
		font-style: italic;
	}

	/* Autoplay video is motion. Under a reduced-motion preference the poster
	   stands in and the video is not shown. */
	@media (prefers-reduced-motion: reduce) {
		.hero__video { display: none; }
	}

	/* Section heading spacing inside sections ----------------------------- */

	.card-grid-section__heading,
	.process__heading { margin-block-end: var(--atms-space-l); }

	/* Process steps ------------------------------------------------------- */

	.process__list {
		display: grid;
		gap: var(--atms-space-m);
		margin: 0;
		padding: 0;
		list-style: none;
		counter-reset: none;
	}

	.process__step {
		display: flex;
		gap: var(--atms-space-s);
		align-items: flex-start;
	}

	.process__number {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 50%;
		background-color: var(--tone-action-bg);
		color: var(--tone-action-fg);
		font-family: var(--atms-font-heading);
		font-weight: 700;
	}

	.process__title { font-size: var(--wp--preset--font-size--xl); }

	.process__eyebrow {
		font-family: var(--atms-font-heading);
		font-size: var(--wp--preset--font-size--xs);
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--tone-muted);
	}

	.process__text {
		margin-block-start: var(--atms-space-3xs);
		color: var(--tone-muted);
	}

	.process--unnumbered .process__step { padding-inline-start: 0; }

	@media (min-width: 48em) {
		.process--row .process__list {
			grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
			gap: var(--atms-space-l);
		}

		.process--row .process__step { flex-direction: column; }
	}

	/* Split content + media ----------------------------------------------- */

	.split__inner {
		display: grid;
		gap: var(--atms-space-l);
		align-items: center;
	}

	.split__content {
		display: flex;
		flex-direction: column;
		gap: var(--atms-space-m);
	}

	.split__body > * + * { margin-block-start: var(--atms-space-s); }

	.split__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--atms-space-s);
	}

	@media (min-width: 48em) {
		.split__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }

		/*
		 * Visual order only. DOM order always puts content first so reading and
		 * tab order stay correct.
		 */
		.split--reverse .split__media { order: -1; }
	}

	/* Case study grid ----------------------------------------------------- */

	.case-study-grid__actions {
		display: flex;
		justify-content: center;
		margin-block-start: var(--atms-space-l);
	}

	/* Filter nav ---------------------------------------------------------- */

	.filter-nav { margin-block-end: var(--atms-space-l); }

	.filter-nav__list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--atms-space-2xs);
	}

	.filter-nav__link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: var(--atms-space-2xs) var(--atms-space-s);
		border: 1px solid var(--tone-muted);
		border-radius: 999px;
		color: var(--tone-fg);
		font-size: var(--wp--preset--font-size--sm);
		font-weight: 600;
		text-decoration: none;
	}

	.filter-nav__link:hover {
		border-color: var(--tone-action-bg);
		color: var(--tone-action-bg);
	}

	/* Current filter is marked by fill AND aria-current, never colour alone. */
	.filter-nav__link[aria-current] {
		background-color: var(--tone-action-bg);
		border-color: var(--tone-action-bg);
		color: var(--tone-action-fg);
	}

	/* FAQ ----------------------------------------------------------------- */

	.faq__list {
		margin-block-start: var(--atms-space-l);
		border-block-start: 1px solid var(--tone-border);
	}

	.faq__item { border-block-end: 1px solid var(--tone-border); }

	.faq__question {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--atms-space-s);
		min-height: 44px;
		padding-block: var(--atms-space-s);
		cursor: pointer;
		font-family: var(--atms-font-heading);
		font-size: var(--wp--preset--font-size--lg);
		font-weight: 600;
		list-style: none;
	}

	.faq__question::-webkit-details-marker { display: none; }

	.faq__question::after {
		content: "+";
		flex: 0 0 auto;
		font-size: var(--wp--preset--font-size--xl);
		line-height: 1;
		color: var(--tone-action-bg);
	}

	.faq__item[open] .faq__question::after { content: "\2212"; }

	.faq__answer {
		padding-block-end: var(--atms-space-m);
		color: var(--tone-muted);
	}

	.faq__answer > * + * { margin-block-start: var(--atms-space-s); }

	/* Comparison table ---------------------------------------------------- */

	/*
	 * A real table that scrolls inside a focusable region. tabindex="0" is what
	 * lets a keyboard user scroll it; without it the overflow is unreachable
	 * without a mouse.
	 */
	.comparison__scroll {
		margin-block-start: var(--atms-space-l);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

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

	.comparison__table {
		width: 100%;
		min-width: 40rem;
		border-collapse: collapse;
		text-align: start;
	}

	.comparison__caption {
		margin-block-end: var(--atms-space-s);
		color: var(--tone-muted);
		font-size: var(--wp--preset--font-size--sm);
		text-align: start;
	}

	.comparison__table :is(th, td) {
		padding: var(--atms-space-xs) var(--atms-space-s);
		border-block-end: 1px solid var(--tone-border);
		vertical-align: top;
	}

	.comparison__table thead th {
		font-family: var(--atms-font-heading);
		border-block-end: 2px solid var(--tone-muted);
	}

	.comparison__table tbody th {
		font-weight: 600;
		text-align: start;
	}

	.comparison__mark { color: var(--tone-action-bg); font-weight: 700; }
	.comparison__mark--none { color: var(--tone-muted); }

	/* Program cards ------------------------------------------------------- */

	.card--program .card__body { gap: var(--atms-space-xs); }

	.card--featured { border-color: var(--tone-action-bg); border-width: 2px; }

	.card__price {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--atms-space-3xs);
		font-family: var(--atms-font-heading);
	}

	.card__price-prefix,
	.card__price-suffix {
		font-size: var(--wp--preset--font-size--sm);
		color: var(--tone-muted);
	}

	.card__price-value {
		font-size: var(--wp--preset--font-size--3-xl);
		font-weight: 800;
		line-height: 1;
	}

	.card__price-note {
		font-size: var(--wp--preset--font-size--xs);
		color: var(--tone-muted);
	}

	.card__features {
		display: flex;
		flex-direction: column;
		gap: var(--atms-space-2xs);
		margin-block-start: var(--atms-space-2xs);
		font-size: var(--wp--preset--font-size--sm);
	}

	.card__feature {
		position: relative;
		padding-inline-start: 1.5em;
	}

	.card__feature::before {
		content: "\2713";
		position: absolute;
		inset-inline-start: 0;
		color: var(--tone-action-bg);
		font-weight: 700;
	}
}

/* ==========================================================================
   CORE BLOCK BRIDGE
   ========================================================================== */

@layer blocks {
	/*
	 * CRITICAL: theme.json styles core buttons with a FIXED brand-deep
	 * background. Inside a .tone-ink section that is 1.72:1 against the
	 * background — the exact defect the tone contract exists to prevent.
	 * Core buttons are therefore re-pointed at the tone tokens here, so a button
	 * placed in a pattern behaves like a .btn and retones with its section.
	 */
	.wp-block-button__link,
	.wp-element-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: var(--atms-space-2xs) var(--atms-space-m);
		background-color: var(--tone-action-bg);
		border: 2px solid var(--tone-action-bg);
		border-radius: var(--atms-radius-sm);
		color: var(--tone-action-fg);
		font-family: var(--atms-font-heading);
		font-weight: 600;
		text-decoration: none;
		transition:
			background-color var(--atms-transition),
			border-color var(--atms-transition),
			color var(--atms-transition);
	}

	.wp-block-button__link:hover,
	.wp-element-button:hover {
		background-color: var(--tone-action-hover-bg);
		border-color: var(--tone-action-hover-bg);
		color: var(--tone-action-hover-fg);
	}

	.wp-block-button.is-style-outline > .wp-block-button__link {
		background-color: transparent;
		border-color: var(--tone-action-bg);
		color: var(--tone-action-bg);
	}

	.wp-block-button.is-style-outline > .wp-block-button__link:hover {
		background-color: var(--tone-action-bg);
		color: var(--tone-action-fg);
	}

	.wp-block-buttons {
		display: flex;
		flex-wrap: wrap;
		gap: var(--atms-space-s);
	}

	/* Columns used as cards inside patterns get real card padding. */
	.wp-block-column.card { padding: var(--atms-space-m); }

	/* Checklist list style used by "what's included" content. */
	.is-style-atms-checklist {
		list-style: none;
		padding-inline-start: 0;
	}

	.is-style-atms-checklist li {
		position: relative;
		padding-inline-start: 1.5em;
	}

	.is-style-atms-checklist li::before {
		content: "\2713";
		position: absolute;
		inset-inline-start: 0;
		color: var(--tone-action-bg);
		font-weight: 700;
	}

	.wp-block-group.section { padding-block: var(--atms-section-y); }
}

/* ==========================================================================
   PHASE 4 — NAVIGATION CTA + CONTENT BLOCKS
   ========================================================================== */

@layer components {
	/*
	 * Header CTA.
	 *
	 * Implemented as a MENU ITEM carrying the class "nav-cta", added in
	 * Appearance > Menus. Deliberately not a theme option, not a hardcoded
	 * template link, and not Additional CSS: the destination and label stay
	 * editable in WordPress, and there is exactly one source of truth.
	 *
	 * Every value is a tone token, so the CTA retones with its header.
	 */
	.primary-nav__list li.nav-cta > a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: var(--atms-space-2xs) var(--atms-space-m);
		background-color: var(--tone-action-bg);
		border: 2px solid var(--tone-action-bg);
		border-radius: var(--atms-radius-sm);
		color: var(--tone-action-fg);
		transition:
			background-color var(--atms-transition),
			border-color var(--atms-transition),
			color var(--atms-transition);
	}

	.primary-nav__list li.nav-cta > a:hover {
		background-color: var(--tone-action-hover-bg);
		border-color: var(--tone-action-hover-bg);
		color: var(--tone-action-hover-fg);
	}

	/* The CTA is an action, so it does not take the current-page underline. */
	.primary-nav__list li.nav-cta > a[aria-current] {
		text-decoration: none;
	}

	/* Full width in the mobile panel, where it reads as the primary action. */
	.primary-nav__list li.nav-cta {
		margin-block-start: var(--atms-space-2xs);
	}

	.primary-nav__list li.nav-cta > a {
		width: 100%;
	}

	/* Matches the navigation breakpoint above, not the 48em used elsewhere. */
	@media (min-width: 64em) {
		.primary-nav__list li.nav-cta { margin-block-start: 0; }
		.primary-nav__list li.nav-cta > a { width: auto; }
	}

	/*
	 * Form placeholder. Visible on purpose: no form system has been selected,
	 * and an invisible gap would be mistaken for a finished page.
	 */
	.atms-form-placeholder {
		padding: var(--atms-space-m);
		border: 2px dashed var(--tone-muted);
		border-radius: var(--atms-radius-md);
		background-color: var(--tone-elevated);
		color: var(--tone-muted);
		font-size: var(--wp--preset--font-size--sm);
	}
}

@layer blocks {
	/*
	 * Core details block, used for FAQs authored in the editor. Styled to match
	 * the theme's own .faq component so both look identical, and both inherit
	 * the browser's built-in keyboard and screen-reader behaviour.
	 */
	.wp-block-details {
		border-block-end: 1px solid var(--tone-border);
	}

	.wp-block-details:first-of-type {
		border-block-start: 1px solid var(--tone-border);
	}

	.wp-block-details > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--atms-space-s);
		min-height: 44px;
		padding-block: var(--atms-space-s);
		cursor: pointer;
		font-family: var(--atms-font-heading);
		font-size: var(--wp--preset--font-size--lg);
		font-weight: 600;
		list-style: none;
	}

	.wp-block-details > summary::-webkit-details-marker { display: none; }

	.wp-block-details > summary::after {
		content: "+";
		flex: 0 0 auto;
		font-size: var(--wp--preset--font-size--xl);
		line-height: 1;
		color: var(--tone-action-bg);
	}

	.wp-block-details[open] > summary::after { content: "\2212"; }

	.wp-block-details > :not(summary) {
		padding-block-end: var(--atms-space-m);
		color: var(--tone-muted);
	}

	/* Columns used as cards need consistent internal spacing and equal height. */
	.wp-block-columns { align-items: stretch; }

	.wp-block-column.card > *:first-child { margin-block-start: 0; }

	/* Strong text inside tone-ink sections must not fade into the background. */
	.tone-ink strong { color: var(--tone-fg); }
}

/* ==========================================================================
   Fluent Forms
   --------------------------------------------------------------------------
   DELIBERATELY UNLAYERED. Everything else in this file sits inside @layer, but
   Fluent Forms ships its own stylesheet unlayered, and unlayered CSS outranks
   every cascade layer regardless of specificity. A rule for .ff-* inside
   @layer components would lose to the plugin every time — the same trap that
   silently disabled the tone contract before Phase 5 caught it.

   So these rules are unlayered on purpose, and they read from --tone-* like
   every other component, which means a form inherits the tone of whatever
   section it is placed in rather than carrying the plugin's blue.

   Selectors below were confirmed against the rendered markup of both live
   forms, including the error state, not taken from documentation.

   They are also prefixed with .fluentform — the plugin's wrapper div — to
   reach specificity (0,3,x). Measured on the deployed page: the plugin's
   stylesheets are enqueued AFTER main.css, so its own (0,2,0) rules such as
   ".fluentform .ff-el-form-control" win any tie on source order. Being
   unlayered is necessary here but not sufficient.
   ========================================================================== */

.fluentform .frm-fluent-form .ff-el-group {
	margin-block-end: var(--atms-space-s);
}

.fluentform .frm-fluent-form .ff-el-input--label label {
	color: var(--tone-fg);
	font-family: var(--atms-font-heading);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

/*
 * --tone-muted, not --tone-border. An input boundary is an interactive
 * boundary: it needs 3:1, and --tone-border is decorative at 1.33:1. This is
 * the rule the tone contract states for exactly this case.
 */
.fluentform .frm-fluent-form .ff-el-form-control {
	background-color: var(--tone-elevated);
	border: 1px solid var(--tone-muted);
	border-radius: 4px;
	color: var(--tone-fg);
	font-family: var(--atms-font-body);
	font-size: 1rem; /* Never below 16px: iOS zooms the page on focus otherwise. */
	/*
	 * 44px floor. Measured on a 375px viewport, the plugin's own padding left
	 * nine of ten controls under 40px tall — tappable in the sense that a
	 * careful thumb can hit them, which is not the same as usable.
	 */
	min-height: 2.75rem;
	padding: var(--atms-space-2xs) var(--atms-space-xs);
	width: 100%;
}

.fluentform .frm-fluent-form .ff-el-form-control::placeholder {
	color: var(--tone-muted);
	opacity: 1;
}

.fluentform .frm-fluent-form textarea.ff-el-form-control {
	min-height: 8rem;
	resize: vertical;
}

.fluentform .frm-fluent-form .ff-el-form-check-label {
	color: var(--tone-fg);
	font-family: var(--atms-font-body);
}

/*
 * Checkbox rows measured 19px tall on mobile — below every tap-target
 * guideline there is. The row, not just the box, is the target.
 */
.fluentform .frm-fluent-form .ff-el-form-check {
	margin-block-end: var(--atms-space-3xs);
}

.fluentform .frm-fluent-form .ff-el-form-check-label {
	align-items: center;
	display: flex;
	gap: var(--atms-space-2xs);
	min-height: 2.25rem;
}

.fluentform .frm-fluent-form .ff-el-form-check-input,
.fluentform .frm-fluent-form .ff-el-form-check input[type="checkbox"],
.fluentform .frm-fluent-form .ff-el-form-check input[type="radio"] {
	flex: 0 0 auto;
	height: 1.15rem;
	margin: 0;
	width: 1.15rem;
}

.fluentform .frm-fluent-form .ff-el-help-message,
.fluentform .frm-fluent-form .ff-el-input--content .ff-el-help-message {
	color: var(--tone-muted);
	font-size: var(--wp--preset--font-size--xs);
}

/* Errors read as errors. Colour is never the only signal — the text says so. */
.fluentform .frm-fluent-form .error,
.fluentform .frm-fluent-form .text-danger,
.fluentform .frm-fluent-form .ff-el-is-error .error-text {
	color: var(--tone-link);
	font-size: var(--wp--preset--font-size--xs);
}

.fluentform .frm-fluent-form .ff-el-form-control.ff-el-is-error,
.fluentform .frm-fluent-form .ff-el-is-error .ff-el-form-control {
	border-color: var(--tone-link);
}

/* Matches .btn--primary. The plugin's default is an unstyled browser button. */
.fluentform .frm-fluent-form .ff-btn-submit,
.fluentform .frm-fluent-form .ff-btn.ff-btn-submit {
	background-color: var(--tone-action-bg);
	border: 1px solid var(--tone-action-bg);
	border-radius: 4px;
	color: var(--tone-action-fg);
	cursor: pointer;
	font-family: var(--atms-font-heading);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	padding: var(--atms-space-2xs) var(--atms-space-m);
	transition: background-color var(--atms-transition), color var(--atms-transition);
}

.fluentform .frm-fluent-form .ff-btn-submit:hover,
.fluentform .frm-fluent-form .ff-btn.ff-btn-submit:hover {
	background-color: var(--tone-action-hover-bg);
	border-color: var(--tone-action-hover-bg);
	color: var(--tone-action-hover-fg);
}

.fluentform .frm-fluent-form .ff-btn-submit:focus-visible {
	outline: 3px solid var(--tone-focus);
	outline-offset: 2px;
}

/* Confirmation message after a successful submission. */
.fluentform .ff-message-success,
.fluentform .ff_submit_success {
	background-color: var(--tone-elevated);
	border-left: 4px solid var(--tone-action-bg);
	color: var(--tone-fg);
	padding: var(--atms-space-s) var(--atms-space-m);
}