/**
 * Axsia Howmar — components.
 *
 *  1. Header, utility bar            8. Notes, notices, takeaways
 *  2. Primary navigation, panels     9. Details / symptom index
 *  3. Breadcrumbs                   10. Unit and theme toggles
 *  4. Footer                        11. Diagrams and hotspots
 *  5. Sections and page head        12. Glossary
 *  6. Lists: steps, facts, checks   13. Bands: hero, credibility, CTA
 *  7. Grids and cards               14. Comparison table
 */

/* 1. Header --------------------------------------------------------------- */

.ax-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--ax-border);
	background: var(--ax-bg);
}

.ax-header__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.5rem;
	padding-block: 0.625rem;
}

.ax-header__brand {
	margin-right: auto;
}

.ax-header .wp-block-site-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.ax-header .wp-block-site-title a {
	color: var(--ax-ink);
	text-decoration: none;
}

.ax-header .wp-block-site-logo img {
	width: auto;
	max-height: 2.5rem;
}

.ax-header__cta .wp-block-button__link {
	padding: 0.625rem 1rem;
	white-space: nowrap;
}

.ax-utility {
	border-bottom: 1px solid var(--ax-border);
	font-size: var(--wp--preset--font-size--small);
}

.ax-utility__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 0 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ax-utility__link {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	color: var(--ax-muted);
	text-decoration: none;
}

.ax-utility__link:hover,
.ax-utility__link[aria-current="page"] {
	color: var(--ax-ink);
	text-decoration: underline;
}

html:not(.js) .ax-utility__js {
	display: none;
}

/* 2. Primary navigation ---------------------------------------------------- */

.ax-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ax-nav__item {
	position: relative;
}

.ax-nav__item--mega {
	position: static;
}

.ax-nav__link,
.ax-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: var(--wp--custom--target-size);
	padding: 0 0.75rem;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: none;
	color: var(--ax-ink);
	font: inherit;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}

.ax-nav__link:hover,
.ax-nav__toggle:hover,
.ax-nav__toggle[aria-expanded="true"] {
	border-bottom-color: var(--ax-ink);
}

/* Current section: marked by a rule and by weight, not by colour alone. */
.ax-nav__item.is-current > .ax-nav__link,
.ax-nav__item.is-current > .ax-nav__toggle {
	border-bottom-color: var(--ax-accent);
	font-weight: 600;
}

.ax-nav__chevron {
	transition: transform var(--wp--custom--transition);
}

.ax-nav__toggle[aria-expanded="true"] .ax-nav__chevron {
	transform: rotate(180deg);
}

/* No JS: plain links. With JS: disclosure buttons. */
html:not(.js) .ax-nav__toggle,
html:not(.js) .ax-nav__burger,
html.js .ax-nav__link--nojs {
	display: none;
}

.ax-panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	min-width: 18rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--ax-border);
	border-top: 2px solid var(--ax-ink);
	background: var(--ax-surface);
}

.ax-panel--mega {
	right: 0;
	left: 0;
	padding: 0;
	border-inline: 0;
}

.ax-panel__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.5rem 3rem;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: 1.75rem clamp(1rem, 4vw, 2.5rem) 1.5rem;
}

.ax-panel ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ax-panel a {
	display: block;
	padding: 0.5rem 0;
	color: var(--ax-ink);
	text-decoration: none;
}

.ax-panel a:hover,
.ax-panel a[aria-current="page"] {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ax-panel a[aria-current="page"] {
	font-weight: 600;
}

.ax-panel__heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.ax-panel__intro {
	margin: 0 0 0.5rem;
	color: var(--ax-muted);
	font-size: var(--wp--preset--font-size--small);
}

.ax-panel__all {
	grid-column: 1 / -1;
	margin: 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--ax-border);
	font-weight: 600;
}

.ax-nav__burger {
	display: none;
	padding: 0 0.875rem;
	border: 2px solid var(--ax-ink);
	border-radius: var(--wp--custom--radius--sm);
	background: none;
	color: var(--ax-ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

@media (max-width: 63.99rem) {
	html.js .ax-nav__burger {
		display: inline-flex;
		align-items: center;
	}

	html.js .ax-nav {
		order: 3;
	}

	html.js .ax-nav__list {
		display: none;
		flex-basis: 100%;
	}

	html.js .ax-nav__list.is-open {
		display: block;
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		max-height: calc(100vh - 6rem);
		overflow-y: auto;
		padding: 0.5rem clamp(1rem, 4vw, 2.5rem) 1.5rem;
		border-bottom: 2px solid var(--ax-ink);
		background: var(--ax-surface);
	}

	.ax-nav__link,
	.ax-nav__toggle {
		justify-content: space-between;
		width: 100%;
		padding-inline: 0;
		border-bottom: 1px solid var(--ax-border);
	}

	.ax-panel,
	.ax-panel--mega {
		position: static;
		padding: 0.5rem 0 1rem 1rem;
		border: 0;
		background: none;
	}

	.ax-panel__inner {
		display: block;
		padding: 0;
	}

	.ax-panel__group {
		margin-bottom: 1rem;
	}

	.ax-utility__list {
		justify-content: flex-start;
	}
}

/* 3. Breadcrumbs ----------------------------------------------------------- */

.ax-breadcrumbs {
	margin-block: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	color: var(--ax-muted);
}

.ax-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.125rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ax-breadcrumbs li + li::before {
	content: "/";
	margin-right: 0.5rem;
	color: var(--ax-border-strong);
}

.ax-breadcrumbs a {
	display: inline-block;
	padding-block: 0.25rem;
	color: var(--ax-muted);
}

.ax-breadcrumbs [aria-current="page"] {
	color: var(--ax-ink);
	font-weight: 500;
}

/* 4. Footer ---------------------------------------------------------------- */

.ax-footer-wrap {
	margin-top: var(--wp--preset--spacing--80);
	border-top: 2px solid var(--ax-ink);
	background: var(--ax-surface-2);
	font-size: var(--wp--preset--font-size--small);
}

.ax-footer__sitemap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
	gap: 2rem 2.5rem;
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.ax-footer__heading {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0;
}

.ax-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ax-footer a {
	display: inline-block;
	padding-block: 0.3125rem;
	color: var(--ax-ink);
	text-decoration: none;
}

.ax-footer a:hover,
.ax-footer a[aria-current="page"] {
	text-decoration: underline;
}

.ax-certs,
.ax-footer__company {
	padding-block: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--ax-border);
}

.ax-certs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	font-weight: 500;
}

.ax-footer__company p,
.ax-footer__company address {
	margin: 0 0 0.375rem;
	font-style: normal;
	max-width: 70ch;
}

.ax-footer__label {
	color: var(--ax-muted);
}

.ax-footer__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
	margin-block: 0.5rem !important;
}

.ax-footer__small {
	margin-top: 1rem !important;
	color: var(--ax-muted);
}

/* 5. Sections and page head ------------------------------------------------- */

.ax-section {
	margin-block: var(--wp--preset--spacing--60);
}

.ax-section > h2 {
	margin-top: 0;
}

.ax-page-head {
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--ax-border);
}

.ax-muted {
	color: var(--ax-muted);
}

.ax-inline-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ax-inline-list li {
	padding: 0.125rem 0.5rem;
	border: 1px solid var(--ax-border);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--ax-surface);
	font-size: var(--wp--preset--font-size--small);
}

/* 6. Lists ------------------------------------------------------------------ */

.ax-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ax-step;
}

.ax-steps > li {
	position: relative;
	padding: 0 0 1.5rem 3.25rem;
	counter-increment: ax-step;
}

.ax-steps > li::before {
	content: counter(ax-step, decimal-leading-zero);
	position: absolute;
	top: 0.125rem;
	left: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	color: var(--ax-muted);
}

.ax-steps > li::after {
	content: "";
	position: absolute;
	top: 2rem;
	bottom: 0.25rem;
	left: 0.75rem;
	width: 1px;
	background: var(--ax-border);
}

.ax-steps > li:last-child::after {
	display: none;
}

.ax-steps h3 {
	margin: 0 0 0.25rem;
	font-size: var(--wp--preset--font-size--medium);
}

.ax-steps p {
	margin: 0 0 0.5rem;
}

.ax-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0;
	margin: var(--wp--preset--spacing--40) 0;
	border-top: 2px solid var(--ax-ink);
}

.ax-facts > div {
	padding: 0.75rem 1rem 0.75rem 0;
	border-bottom: 1px solid var(--ax-border);
}

.ax-facts dt,
.ax-part-card__meta dt {
	font-size: var(--wp--preset--font-size--small);
	color: var(--ax-muted);
}

.ax-facts dd,
.ax-part-card__meta dd {
	margin: 0;
	font-weight: 500;
}

.ax-standards {
	margin: 0;
}

.ax-standards > div {
	display: grid;
	grid-template-columns: minmax(9rem, 14rem) 1fr;
	gap: 1rem;
	padding-block: 0.625rem;
	border-bottom: 1px solid var(--ax-border);
}

.ax-standards dt {
	font-weight: 500;
}

.ax-standards dd {
	margin: 0;
}

.ax-standards__use {
	display: block;
	color: var(--ax-muted);
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 30rem) {
	.ax-standards > div {
		grid-template-columns: 1fr;
		gap: 0.125rem;
	}
}

.ax-checklist {
	padding-left: 0;
	list-style: none;
}

.ax-checklist li {
	position: relative;
	padding: 0.25rem 0 0.25rem 1.75rem;
}

.ax-checklist li::before {
	content: "";
	position: absolute;
	top: 0.8em;
	left: 0.125rem;
	width: 0.75rem;
	height: 2px;
	background: var(--ax-ink);
}

.ax-deflist li {
	margin-bottom: 0.5rem;
}

/* 7. Grids and cards --------------------------------------------------------- */

.ax-grid {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ax-grid--cards {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
}

.ax-grid--images {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}

.ax-grid--images figure {
	margin: 0;
}

.ax-grid :where(p, li, h3) {
	max-width: none;
}

.ax-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ax-card > * {
	margin: 0;
}

.ax-card__title {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;
}

.ax-card__title a {
	color: var(--ax-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.ax-card__title a:hover {
	color: var(--ax-accent);
}

.ax-card__summary {
	color: var(--ax-muted);
	font-size: var(--wp--preset--font-size--small);
}

.ax-part-card__meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	margin: auto 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--ax-border);
}

.ax-enquire {
	margin: 0.25rem 0 0;
}

.ax-enquire__btn {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--ax-accent);
	color: var(--ax-accent-ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.ax-enquire__btn:hover {
	background: var(--ax-ink);
	color: var(--ax-bg);
}

/* Query-loop post lists rendered as cards. */
.ax-post-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: var(--wp--preset--spacing--40);
	padding: 0;
	list-style: none;
}

.ax-post-list > li {
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--ax-border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--ax-surface);
}

.ax-post-list > li > * {
	margin-block: 0 0.5rem;
	max-width: none;
}

/* 8. Notes, notices, takeaways ------------------------------------------------ */

.ax-note {
	color: var(--ax-muted);
	font-size: var(--wp--preset--font-size--small);
}

.ax-notice {
	padding: 1rem 1.25rem;
	border: 1px solid var(--ax-border-strong);
	border-left-width: 4px;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--ax-surface);
	font-size: var(--wp--preset--font-size--small);
	max-width: var(--wp--custom--measure);
}

.ax-notice > :first-child {
	margin-top: 0;
}

.ax-notice > :last-child {
	margin-bottom: 0;
}

.ax-takeaways {
	margin-block: var(--wp--preset--spacing--40);
	padding: 1.25rem 1.5rem;
	border-top: 2px solid var(--ax-ink);
	background: var(--ax-surface);
}

.ax-takeaways h2,
.ax-takeaways h3 {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--medium);
}

.ax-takeaways ul {
	margin: 0;
	padding-left: 1.25rem;
}

.ax-takeaways li {
	margin-bottom: 0.375rem;
}

.ax-abstract h2 {
	margin: 0 0 0.25rem;
}

.ax-download {
	padding: 0.875rem 1rem;
	border: 1px solid var(--ax-border);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--ax-surface);
}

.ax-downloads {
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ax-border);
}

.ax-downloads li {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--ax-border);
	max-width: none;
}

.ax-references {
	font-size: var(--wp--preset--font-size--small);
}

.ax-faq {
	padding-block: 1rem;
	border-top: 1px solid var(--ax-border);
}

.ax-faq h3 {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--medium);
}

.ax-faq__answer > :last-child {
	margin-bottom: 0;
}

/* 9. Details / symptom index --------------------------------------------------- */

.ax-details,
.wp-block-details {
	border-top: 1px solid var(--ax-border);
}

.ax-details:last-of-type,
.wp-block-details:last-of-type {
	border-bottom: 1px solid var(--ax-border);
}

.ax-details > summary,
.wp-block-details > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	min-height: var(--wp--custom--target-size);
	padding-block: 0.625rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

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

.ax-details > summary::after,
.wp-block-details > summary::after {
	content: "+";
	flex: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.25rem;
	line-height: 1;
}

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

.ax-details > :not(summary),
.wp-block-details > :not(summary) {
	margin-block: 0 1rem;
}

.ax-symptom > summary {
	font-size: var(--wp--preset--font-size--medium);
}

.ax-symptom:target > summary,
.ax-symptom[open] > summary {
	color: var(--ax-ink);
}

.ax-symptom h4 {
	margin: 1rem 0 0.25rem;
	font-size: var(--wp--preset--font-size--base);
}

/* 10. Toggles ------------------------------------------------------------------- */

.ax-unit-toggle {
	display: inline-flex;
	margin-bottom: 0.75rem;
	border: 1px solid var(--ax-border-strong);
	border-radius: var(--wp--custom--radius--sm);
	overflow: hidden;
}

html:not(.js) .ax-unit-toggle {
	display: none;
}

/* Without JavaScript both unit systems are shown side by side. */
html:not(.js) [data-unit-system][hidden] {
	display: inline !important;
}

html:not(.js) [data-unit-system="imperial"]::before {
	content: " / ";
}

.ax-unit-toggle__btn,
.ax-theme-toggle {
	min-height: 2.25rem;
	padding: 0 0.875rem;
	border: 0;
	background: var(--ax-surface);
	color: var(--ax-ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	cursor: pointer;
}

/* Pressed state: inverted fill plus a check mark, never colour alone. */
.ax-unit-toggle__btn[aria-pressed="true"] {
	background: var(--ax-ink);
	color: var(--ax-bg);
}

.ax-unit-toggle__btn[aria-pressed="true"]::before,
.ax-theme-toggle[aria-pressed="true"]::before {
	content: "\2713\00a0";
}

.ax-theme-toggle {
	border: 1px solid var(--ax-border-strong);
	border-radius: var(--wp--custom--radius--sm);
	background: none;
	color: var(--ax-muted);
}

/* 11. Diagrams and hotspots ------------------------------------------------------ */

.ax-diagram {
	margin: var(--wp--preset--spacing--40) 0;
	padding: 1rem;
	border: 1px solid var(--ax-border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--ax-surface);
}

.ax-diagram svg {
	display: block;
	width: 100%;
	height: auto;
	color: var(--ax-ink);
	font-family: var(--wp--preset--font-family--sans);
}

.ax-diagram figcaption {
	margin-top: 0.75rem;
	color: var(--ax-muted);
	font-size: var(--wp--preset--font-size--small);
}

.ax-svg-line {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.ax-svg-thin {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.25;
}

.ax-svg-dash {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.25;
	stroke-dasharray: 5 4;
}

.ax-svg-vessel {
	fill: var(--ax-surface-2);
	stroke: currentColor;
	stroke-width: 2;
}

.ax-svg-water {
	fill: var(--ax-border);
	stroke: none;
}

.ax-svg-label {
	fill: currentColor;
	font-size: 13px;
	font-weight: 500;
}

.ax-svg-small {
	fill: var(--ax-muted);
	font-size: 11px;
}

.ax-hotspot {
	cursor: pointer;
	text-decoration: none;
}

.ax-hotspot circle {
	fill: var(--ax-surface);
	stroke: currentColor;
	stroke-width: 2;
}

.ax-hotspot text {
	fill: currentColor;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	font-weight: 500;
	text-anchor: middle;
}

.ax-hotspot:hover circle,
.ax-hotspot:focus circle,
.ax-hotspot.is-active circle {
	fill: var(--ax-ink);
	stroke-width: 3;
}

.ax-hotspot:hover text,
.ax-hotspot:focus text,
.ax-hotspot.is-active text {
	fill: var(--ax-bg);
}

.ax-hotspot:focus {
	outline: none;
}

.ax-hotspot:focus-visible circle {
	stroke: var(--ax-focus);
	stroke-width: 4;
}

.ax-stage {
	cursor: pointer;
}

.ax-stage:hover .ax-svg-vessel,
.ax-stage:focus .ax-svg-vessel,
.ax-stage.is-active .ax-svg-vessel {
	stroke-width: 4;
}

.ax-stage:focus {
	outline: none;
}

.ax-stage:focus-visible .ax-svg-vessel {
	stroke: var(--ax-focus);
}

.ax-legend {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: ax-legend;
}

.ax-legend > li {
	position: relative;
	padding: 0.625rem 0.75rem 0.625rem 3rem;
	border-left: 3px solid transparent;
	border-top: 1px solid var(--ax-border);
	counter-increment: ax-legend;
	max-width: none;
}

.ax-legend > li::before {
	content: counter(ax-legend);
	position: absolute;
	top: 0.625rem;
	left: 0.75rem;
	width: 1.5rem;
	height: 1.5rem;
	border: 2px solid var(--ax-ink);
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	line-height: 1.5rem;
	text-align: center;
}

.ax-legend > li.is-active,
.ax-legend > li:target {
	border-left-color: var(--ax-ink);
	background: var(--ax-surface-2);
}

.ax-legend strong {
	display: block;
}

/* 12. Glossary ---------------------------------------------------------------------- */

.ax-az ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0;
	list-style: none;
}

.ax-az a {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	border: 1px solid var(--ax-border);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--ax-surface);
	color: var(--ax-ink);
	font-family: var(--wp--preset--font-family--mono);
	text-decoration: none;
}

.ax-az a:hover {
	border-color: var(--ax-ink);
}

.ax-glossary-list {
	margin: 0;
}

.ax-glossary-list > div {
	padding-block: 0.75rem;
	border-top: 1px solid var(--ax-border);
}

.ax-glossary-list dt {
	font-weight: 600;
}

.ax-glossary-list dd {
	margin: 0.125rem 0 0;
	max-width: var(--wp--custom--measure);
}

.ax-definition {
	padding-left: 1rem;
	border-left: 3px solid var(--ax-ink);
}

/* 13. Bands --------------------------------------------------------------------------- */

.ax-hero-band {
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	border-bottom: 1px solid var(--ax-border);
}

.ax-hero-band h1 {
	max-width: 26ch;
	font-size: var(--wp--preset--font-size--display);
}

.ax-band {
	padding-block: var(--wp--preset--spacing--60);
}

.ax-cta-band {
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--md);
}

.ax-cta-band h2,
.ax-cta-band h3 {
	margin-top: 0;
}

.has-inverse-background-color .wp-block-button__link {
	background: var(--ax-inverse-accent);
	color: #07282a;
}

.has-inverse-background-color .wp-block-button__link:hover {
	background: var(--ax-inverse-ink);
	color: var(--ax-inverse-bg);
}

.has-inverse-background-color .is-style-outline .wp-block-button__link {
	border-color: var(--ax-inverse-ink);
	background: transparent;
	color: var(--ax-inverse-ink);
}

.ax-cred {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0;
	border-top: 2px solid var(--ax-ink);
}

.ax-cred > * {
	margin: 0;
	padding: 1.25rem 1.5rem 1.25rem 0;
	border-bottom: 1px solid var(--ax-border);
}

/* 14. Comparison table ------------------------------------------------------------------ */

.ax-table--compare th[scope="col"] {
	min-width: 11rem;
	white-space: normal;
}

.ax-table--compare tbody th {
	min-width: 9rem;
	background: var(--ax-bg);
}

@media (min-width: 48rem) {
	.ax-table--compare tbody th {
		position: sticky;
		left: 0;
	}
}

/* 15. Layout fixes and small parts -------------------------------------------------------- */

.ax-main {
	padding-bottom: var(--wp--preset--spacing--70);
}

.ax-main :where(p, li, dd, blockquote) {
	max-width: var(--wp--custom--measure);
}

.ax-main .ax-grid :where(p, li),
.ax-main .ax-post-list :where(p, li),
.ax-main .ax-cred p,
.ax-main td,
.ax-main .ax-legend > li {
	max-width: none;
}

/* The template-part wrapper is the sticky element, so the header stays
   available (with its Request a quote action) while reading long pages. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

.ax-header {
	position: static;
}

.ax-header > *,
.ax-header__row > * {
	margin-block: 0 !important;
}

.ax-header__brand {
	gap: 0.75rem;
}

@media (max-width: 47.99rem) {
	.ax-utility {
		display: none;
	}
}

.ax-post-list--plain > li {
	padding: 0;
	border: 0;
	background: none;
}

.ax-post-list .wp-block-post-title a {
	color: var(--ax-ink);
}

.ax-steps li > strong {
	display: block;
	font-size: var(--wp--preset--font-size--medium);
}

ol.ax-steps.wp-block-list {
	padding-left: 0;
}

.ax-diagram__scroll {
	overflow-x: auto;
}

.ax-diagram__scroll svg {
	min-width: 40rem;
}

.ax-svg-label {
	font-size: 15px;
}

.ax-svg-small {
	font-size: 13px;
}

.ax-hotspot text {
	font-size: 16px;
}

.ax-symptom-entry {
	padding-block: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--ax-border);
}

.ax-symptom-entry > h3 {
	margin-top: 0;
}

.wp-block-search__inside-wrapper {
	gap: 0.5rem;
	max-width: 40rem;
}

.wp-block-search__input {
	flex: 1;
}

.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--ax-border);
}

.wp-block-query-pagination a,
.wp-block-query-pagination .current {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--target-size);
	padding-inline: 0.5rem;
}

.wp-block-query-pagination .current {
	font-weight: 600;
	text-decoration: underline;
}

.ax-hotspot {
	color: var(--ax-accent);
}

@media (max-width: 47.99rem) {
	.ax-header__cta .wp-block-button__link {
		min-height: 2.5rem;
		padding: 0.5rem 0.75rem;
		font-size: var(--wp--preset--font-size--small);
	}

	.ax-header__row {
		gap: 0.5rem 0.75rem;
	}
}

/* 16. Scrolling home page ----------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.ax-main--home {
	padding-bottom: 0;
}

.ax-main--home > * {
	margin-block: 0 !important;
}

.ax-hero-band {
	padding-block: var(--wp--preset--spacing--60);
}

.ax-hero-band__grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

.ax-hero-band__grid > * {
	margin-block: 0 !important;
	min-width: 0;
}

@media (min-width: 64rem) {
	.ax-hero-band__grid:has(.ax-revolver) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.ax-hero-band__grid:has(.ax-revolver) h1 {
		font-size: var(--wp--preset--font-size--xx-large);
	}
}

.ax-onpage {
	border-block: 1px solid var(--ax-border);
	background: var(--ax-bg);
}

.ax-onpage ul {
	display: flex;
	gap: 0 1.5rem;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	white-space: nowrap;
}

.ax-onpage li {
	max-width: none;
}

.ax-onpage a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--target-size);
	color: var(--ax-ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-decoration: none;
}

.ax-onpage a:hover {
	text-decoration: underline;
}

.ax-scroll-band {
	padding-block: var(--wp--preset--spacing--70);
	scroll-margin-top: 5rem;
}

.ax-scroll-band--alt {
	background: var(--ax-surface-2);
}

.ax-scroll-band > h2:first-child,
.ax-scroll-band .ax-band > h2:first-child {
	margin-top: 0;
}

.ax-scroll-band .ax-band {
	padding-block: 0;
}

/* 17. Hero revolver ------------------------------------------------------------------------ */

.ax-revolver__stage {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
	background: var(--ax-inverse-bg);
}

.ax-revolver__slide {
	position: absolute;
	inset: 0;
}

.ax-revolver__slide img,
.ax-revolver__slide video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ax-revolver__slide video {
	opacity: 0;
	transition: opacity 200ms linear;
}

.ax-revolver__slide.is-playing video {
	opacity: 1;
}

.ax-revolver__caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 0.625rem 1rem;
	background: rgba(7, 40, 42, 0.84);
	color: #ffffff;
	font-size: var(--wp--preset--font-size--small);
	max-width: none;
}

.ax-revolver__caption a {
	color: inherit;
}

.ax-revolver__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.ax-revolver__controls button {
	min-height: 2.75rem;
	padding: 0 0.875rem;
	border: 1px solid var(--ax-border-strong);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--ax-surface);
	color: var(--ax-ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	cursor: pointer;
}

.ax-revolver__controls button:hover {
	border-color: var(--ax-ink);
}

.ax-revolver__controls [data-revolver-count] {
	margin-left: auto;
	color: var(--ax-muted);
}

html:not(.js) .ax-revolver__controls {
	display: none;
}

/* 18. Part finder, enquiry list, RFQ --------------------------------------------------------- */

.ax-finder {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: 1rem;
	align-items: end;
	margin-block: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--ax-border);
	border-top: 2px solid var(--ax-ink);
	border-radius: var(--wp--custom--radius--md);
	background: var(--ax-surface);
}

.ax-finder__field--wide,
.ax-finder__actions {
	grid-column: 1 / -1;
}

.ax-finder label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: var(--wp--preset--font-size--small);
}

.ax-finder input,
.ax-finder select {
	width: 100%;
	box-sizing: border-box;
}

.ax-finder input[type="search"] {
	font-family: var(--wp--preset--font-family--mono);
}

.ax-finder__hint {
	margin: 0.375rem 0 0;
	color: var(--ax-muted);
	font-size: var(--wp--preset--font-size--small);
	max-width: none;
}

.ax-finder__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.ax-finder__actions button {
	border: 0;
	cursor: pointer;
}

.ax-finder-results:focus {
	outline: none;
}

.ax-finder-results > h2 {
	margin-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--large);
}

.ax-pages ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: var(--wp--preset--spacing--40) 0;
	padding: 0;
	list-style: none;
}

.ax-pages a,
.ax-pages span[aria-current] {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	border: 1px solid var(--ax-border);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--ax-surface);
	color: var(--ax-ink);
	font-family: var(--wp--preset--font-family--mono);
	text-decoration: none;
}

.ax-pages span[aria-current] {
	border: 2px solid var(--ax-ink);
	font-weight: 500;
}

.ax-basket {
	margin-block: var(--wp--preset--spacing--50);
}

.ax-basket__qty {
	width: 5.5rem;
	font-family: var(--wp--preset--font-family--mono);
}

.ax-linkbutton {
	min-height: 2.75rem;
	padding: 0 0.5rem;
	border: 0;
	background: none;
	color: var(--ax-accent);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.ax-basket-count {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 1.5rem;
	height: 1.5rem;
	margin-left: 0.5rem;
	padding: 0 0.375rem;
	border-radius: 0.75rem;
	background: var(--ax-accent-ink);
	color: var(--ax-accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	line-height: 1;
}

.ax-rfq-confirmation {
	padding: var(--wp--preset--spacing--40);
	border: 2px solid var(--ax-ink);
	border-radius: var(--wp--custom--radius--md);
	background: var(--ax-surface);
}

.ax-rfq-confirmation:focus {
	outline: 3px solid var(--ax-focus);
	outline-offset: 2px;
}

/* Enquiry form: compact, two columns, full content width ----------------------------------------- */

.ax-enquiry {
	margin-block: var(--wp--preset--spacing--50);
	scroll-margin-top: 6rem;
}

.ax-enquiry__title,
.ax-form__heading {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ax-muted);
}

.ax-enquiry__title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--ax-accent);
}

.ax-enquiry__title::before {
	content: "";
	width: 2.5rem;
	height: 2px;
	background: currentColor;
}

.ax-form__heading {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--ax-border);
}

.ax-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.125rem 1.5rem;
}

@media (max-width: 40rem) {
	.ax-form__grid {
		grid-template-columns: 1fr;
	}
}

.ax-field--wide {
	grid-column: 1 / -1;
}

.ax-field label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ax-muted);
}

.ax-field__req {
	color: var(--ax-ink);
}

.ax-field input:not([type="file"]),
.ax-field select,
.ax-field textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 3rem;
	padding: 0.625rem 0.875rem;
	border-radius: var(--wp--custom--radius--md);
}

.ax-field textarea {
	resize: vertical;
	line-height: 1.5;
}

.ax-field ::placeholder {
	color: var(--ax-muted);
	opacity: 0.85;
}

.ax-form__note {
	margin: 0 0 0.75rem;
	color: var(--ax-muted);
	font-size: var(--wp--preset--font-size--small);
	max-width: none;
}

/* Upload area: a real file input inside a dashed box. Files can be dropped
   straight onto it; keyboard users get the native Choose files button. */
.ax-upload {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	padding: 1rem 1.25rem;
	border: 2px dashed var(--ax-border-strong);
	border-radius: var(--wp--custom--radius--md);
	background: var(--ax-surface);
	color: var(--ax-muted);
}

.ax-upload:focus-within {
	border-color: var(--ax-ink);
}

.ax-upload input[type="file"] {
	flex: 1 1 16rem;
	min-width: 0;
	color: var(--ax-ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
}

.ax-upload__hint {
	flex: 1 1 100%;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	max-width: none;
}

/* Errors: thick rule, the word "Error", and a summary. Never colour alone. */
.ax-field.has-error {
	padding-left: 0.875rem;
	border-left: 4px solid var(--ax-ink);
}

.ax-field.has-error input,
.ax-field.has-error select,
.ax-field.has-error textarea {
	border: 2px solid var(--ax-ink);
}

.ax-field__error {
	margin: 0.375rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	max-width: none;
}

.ax-field__error-mark {
	font-weight: 700;
}

.ax-form-errors {
	margin-bottom: var(--wp--preset--spacing--40);
	padding: 1rem 1.25rem;
	border: 2px solid var(--ax-ink);
	border-left-width: 6px;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--ax-surface);
}

.ax-form-errors h3 {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--medium);
}

.ax-form-errors ul {
	margin: 0;
	padding-left: 1.25rem;
}

.ax-form-errors a {
	color: var(--ax-ink);
	font-weight: 500;
}

.ax-form__submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin-top: 1.5rem;
}

.ax-form__submit button {
	padding-inline: 2rem;
	border: 0;
	cursor: pointer;
}

.ax-form__submit .ax-form__note {
	flex: 1 1 18rem;
	margin: 0;
}

/* Honeypot: off screen for people, present for bots. Not display:none, which
   some bots detect. */
.ax-field--trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* 19. Header fit with seven items plus the quote button -------------------------------------- */

@media (min-width: 64rem) {
	.ax-header__row {
		flex-wrap: nowrap;
	}

	.ax-nav {
		display: flex;
		flex: 1;
		justify-content: flex-end;
		min-width: 0;
	}

	.ax-header__cta {
		flex: none;
	}
}

@media (min-width: 64rem) and (max-width: 85rem) {
	.ax-nav__link,
	.ax-nav__toggle {
		padding-inline: 0.5rem;
		font-size: 0.9375rem;
	}
}

/* 20. Brand colours: teal header and logo lock-up ------------------------- */

/* The header is always logo teal, in both colour schemes, so the mark sits on
   its own background. Tokens are re-scoped so menus, focus rings and the quote
   button inside the header stay AA-legible (white 9.2:1, mint 5.5:1). */
.ax-header {
	--ax-bg: #0f5151;
	--ax-surface: #0b4546;
	--ax-surface-2: #156060;
	--ax-ink: #ffffff;
	--ax-muted: #cfe3dc;
	--ax-border: #2f6f6d;
	--ax-border-strong: #9cc4b9;
	--ax-accent: #90d7ac;
	--ax-accent-ink: #07282a;
	--ax-focus: #90d7ac;
	background: var(--ax-bg);
	color: var(--ax-ink);
	border-bottom: 3px solid #90d7ac;
}

.ax-header a {
	color: var(--ax-ink);
}

.ax-header .wp-block-button__link {
	background: var(--ax-accent);
	color: var(--ax-accent-ink);
}

.ax-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin-right: auto;
	text-decoration: none;
	min-height: 44px;
}

.ax-brand__logo {
	display: block;
	width: auto;
	height: 3rem;
}

.ax-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1;
	font-family: var(--wp--preset--font-family--serif);
	color: #ffffff;
}

.ax-brand__name {
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ax-brand__sub {
	margin-top: 0.3rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: #cfe3dc;
}

@media (max-width: 30rem) {
	.ax-brand__logo {
		height: 2.5rem;
	}

	.ax-brand__name {
		font-size: 1.25rem;
	}
}

/* Footer carries the full badge. */
.ax-footer__badge {
	display: block;
	width: 7rem;
	height: auto;
	margin-bottom: 1rem;
	border-radius: 4px;
}

@media print {
	.ax-header {
		background: none;
		border-bottom: 1px solid #333333;
	}

	.ax-brand__text,
	.ax-brand__sub {
		color: #000000;
	}

	.ax-brand__logo {
		display: none;
	}
}

/* Uploaded logo: shown as supplied. On wide screens it spans both header
   rows (utility bar and navigation) so it can be about twice the size. */
.ax-brand--custom .ax-brand__logo {
	height: 4.5rem;
	max-width: 16rem;
	object-fit: contain;
	border-radius: 2px;
}

@media (max-width: 30rem) {
	.ax-brand--custom .ax-brand__logo {
		height: 3.75rem;
	}
}

@media (min-width: 64rem) {
	.ax-header__row:has(.ax-brand--custom) {
		position: relative;
		min-height: 4.75rem;
		padding-left: 9rem;
	}

	.ax-header__row:has(.ax-brand--custom) .ax-brand--custom {
		position: absolute;
		left: 0;
		bottom: 0.375rem;
		margin: 0;
	}

	.ax-header__row:has(.ax-brand--custom) .ax-brand__logo {
		height: 6.5rem;
		max-width: 8.5rem;
	}
}

.ax-footer__badge {
	width: 9rem;
}

@media print {
	.ax-brand--custom .ax-brand__logo {
		display: block;
	}
}

/* Large logo: keep the menu and quote button inside the row at laptop widths. */
@media (min-width: 64rem) {
	.ax-header__row:has(.ax-brand--custom) .ax-nav {
		min-width: 0;
	}

	.ax-header__row:has(.ax-brand--custom) .ax-header__cta {
		flex: none;
		margin-left: 0.5rem;
	}
}

@media (min-width: 64rem) and (max-width: 85rem) {
	.ax-header__row:has(.ax-brand--custom) {
		gap: 0.5rem 0.75rem;
		padding-left: 7.75rem;
	}

	.ax-header__row:has(.ax-brand--custom) .ax-brand__logo {
		height: 5.75rem;
	}

	.ax-header__row:has(.ax-brand--custom) .ax-header__cta .wp-block-button__link {
		padding-inline: 0.875rem;
		font-size: 0.9375rem;
		white-space: nowrap;
	}
}

@media (min-width: 64rem) and (max-width: 72rem) {
	.ax-header__row:has(.ax-brand--custom) .ax-nav__link,
	.ax-header__row:has(.ax-brand--custom) .ax-nav__toggle {
		padding-inline: 0.375rem;
		font-size: 0.875rem;
	}
}

/* 21. Hero revolver: animated caption overlay --------------------------------
   The caption sits over the footage on a teal gradient and animates in each
   time its slide becomes active. Showing a slide (hidden -> visible) restarts
   the animation, so no script is needed. No motion under reduced-motion. */
.ax-revolver__caption {
	padding: 3.5rem 1.25rem 1.125rem;
	background: linear-gradient(to top, rgba(7, 40, 42, 0.94) 0%, rgba(7, 40, 42, 0.78) 45%, rgba(7, 40, 42, 0) 100%);
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.0625rem, 0.8rem + 0.9vw, 1.5rem);
	font-weight: 600;
	line-height: 1.25;
	text-wrap: balance;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.ax-revolver__caption::before {
	content: "";
	display: block;
	width: 3rem;
	height: 3px;
	margin-bottom: 0.625rem;
	background: #90d7ac;
	transform-origin: left center;
}

.ax-revolver__caption a {
	text-decoration: none;
}

.ax-revolver__caption a:hover,
.ax-revolver__caption a:focus-visible {
	text-decoration: underline;
}

@media (prefers-reduced-motion: no-preference) {
	.ax-revolver__slide.is-active img {
		animation: ax-slide-in 700ms ease-out both;
	}

	.ax-revolver__slide.is-active .ax-revolver__caption {
		animation: ax-caption-in 650ms cubic-bezier(0.2, 0.7, 0.2, 1) 200ms both;
	}

	.ax-revolver__slide.is-active .ax-revolver__caption::before {
		animation: ax-caption-rule 600ms ease-out 450ms both;
	}
}

@keyframes ax-slide-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes ax-caption-in {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes ax-caption-rule {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/* 22. Hero revolver: full-width banner ------------------------------------------
   With slides present the revolver becomes a full-bleed banner under the header
   and the headline block follows it. Without slides nothing here applies. */
.ax-hero-band:has(.ax-revolver) {
	padding-top: 0;
	overflow-x: clip;
}

.ax-hero-band__grid:has(.ax-revolver) {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
}

.ax-hero-band__grid:has(.ax-revolver) h1 {
	max-width: 26ch;
	font-size: var(--wp--preset--font-size--display);
}

.ax-hero-band__grid > .ax-revolver {
	--ax-hero-gutter: max(1.25rem, calc((100vw - 80rem) / 2 + 1.25rem));
	position: relative;
	order: -1;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

.ax-hero-band__grid > .ax-revolver .ax-revolver__stage {
	aspect-ratio: auto;
	height: clamp(21rem, min(46vw, 70vh), 40rem);
	border-radius: 0;
}

.ax-hero-band__grid > .ax-revolver .ax-revolver__caption {
	padding: 6rem var(--ax-hero-gutter) 1.75rem;
	font-size: clamp(1.25rem, 0.9rem + 1.7vw, 2.375rem);
	line-height: 1.2;
}

.ax-hero-band__grid > .ax-revolver .ax-revolver__caption > a,
.ax-hero-band__grid > .ax-revolver .ax-revolver__caption {
	text-wrap: balance;
}

@media (min-width: 48rem) {
	.ax-hero-band__grid > .ax-revolver .ax-revolver__caption {
		padding-right: calc(var(--ax-hero-gutter) + 22rem);
		padding-bottom: 2.25rem;
	}

	.ax-hero-band__grid > .ax-revolver .ax-revolver__controls {
		position: absolute;
		right: var(--ax-hero-gutter);
		bottom: 2rem;
		margin: 0;
	}

	.ax-hero-band__grid > .ax-revolver .ax-revolver__controls button {
		border-color: rgba(255, 255, 255, 0.7);
		background: rgba(7, 40, 42, 0.7);
		color: #ffffff;
	}

	.ax-hero-band__grid > .ax-revolver .ax-revolver__controls button:hover {
		border-color: #ffffff;
		background: rgba(7, 40, 42, 0.92);
	}

	.ax-hero-band__grid > .ax-revolver .ax-revolver__controls [data-revolver-count] {
		margin-left: 0.5rem;
		color: #ffffff;
	}
}

@media (max-width: 47.99rem) {
	.ax-hero-band__grid > .ax-revolver .ax-revolver__controls {
		padding-inline: var(--ax-hero-gutter);
	}
}

/* The banner sits flush under the header. */
.ax-main--home:has(.ax-revolver) {
	margin-top: 0 !important;
}

/* 23. One left edge for page content -----------------------------------------
   WordPress centres any block narrower than the content column. Text blocks
   here carry their own reading width, so they were centred while headings and
   lists sat left. Everything now starts on the same left edge. */
.ax-main.is-layout-constrained > :where(:not(.alignfull):not(.alignwide):not(.aligncenter):not(.has-text-align-center)),
.ax-main .is-layout-constrained > :where(:not(.alignfull):not(.alignwide):not(.aligncenter):not(.has-text-align-center)) {
	margin-left: max(0px, calc((100% - 80rem) / 2)) !important;
	margin-right: auto !important;
}

/* Signed-in editors: keep the sticky header clear of the admin toolbar. */
.admin-bar header.wp-block-template-part {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar header.wp-block-template-part {
		top: 46px;
	}
}

/* 24. Part tiles: equal size, photo slot ------------------------------------- */
.ax-grid--cards > li,
.ax-grid--cards > .wp-block-post {
	display: flex;
}

.ax-grid--cards > li > .ax-card,
.ax-grid--cards > .wp-block-post > .ax-card {
	flex: 1 1 auto;
	width: 100%;
}

.wp-block-post-template.is-layout-grid > .wp-block-post {
	display: flex;
}

.wp-block-post-template.is-layout-grid > .wp-block-post > .ax-card {
	flex: 1 1 auto;
	width: 100%;
}

.ax-part-card {
	overflow: hidden;
}

.ax-part-card__media {
	aspect-ratio: 4 / 3;
	margin: calc(-1 * var(--wp--preset--spacing--40)) calc(-1 * var(--wp--preset--spacing--40)) 0.5rem;
	border-bottom: 1px solid var(--ax-border);
	background: var(--ax-surface-2);
}

.ax-part-card__media {
	position: relative;
	flex: none;
}

.ax-part-card__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #ffffff;
}

.ax-part-card__media--empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	color: var(--ax-muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Titles and summaries take a fixed number of lines so rows line up. */
.ax-part-card .ax-card__title {
	display: -webkit-box;
	min-height: 2.6em;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.ax-part-card .ax-card__summary {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

.ax-part-card .ax-enquire {
	margin-top: 0.5rem;
}

.ax-part-photo {
	max-width: 40rem;
	margin: 0 0 var(--wp--preset--spacing--50);
}

.ax-part-photo img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--ax-border);
	border-radius: var(--wp--custom--radius--md);
	background: #ffffff;
}

/* Every row the same height, not just every tile within a row. */
.ax-grid--cards {
	grid-auto-rows: 1fr;
}

/* 25. Home product tiles ----------------------------------------------------
   Photo tile with a teal scrim, mint label, white title, one line and an arrow.
   The title link is stretched over the tile, so the whole tile is one target. */
.ax-tiles {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: 0;
	padding: 0;
	list-style: none;
}

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

.ax-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(17rem, 26vw, 22rem);
	margin: 0;
	max-width: none;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(144, 215, 172, 0.22) 0%, rgba(144, 215, 172, 0) 60%),
		linear-gradient(160deg, #14605f 0%, #0f5151 45%, #07282a 100%);
	color: #ffffff;
	isolation: isolate;
}

.ax-tile__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms ease;
}

.ax-tile--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(7, 40, 42, 0.96) 0%, rgba(7, 40, 42, 0.88) 40%, rgba(7, 40, 42, 0.62) 72%, rgba(7, 40, 42, 0.4) 100%);
}

.ax-tile__body {
	width: 100%;
	padding: clamp(1.25rem, 2.5vw, 2rem);
}

.ax-tile__body > * {
	margin: 0;
	max-width: 34rem;
}

.ax-tile__eyebrow {
	margin-bottom: 0.625rem;
	color: #90d7ac;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.ax-tile__title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
	line-height: 1.15;
	color: #ffffff;
}

.ax-tile__title a {
	color: inherit;
	text-decoration: none;
}

.ax-tile__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ax-tile__title a:focus-visible {
	outline: none;
}

.ax-tile:has(a:focus-visible) {
	outline: 3px solid #90d7ac;
	outline-offset: 3px;
}

.ax-tile__text {
	margin-top: 0.625rem;
	color: #e3efeb;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.45;
}

.ax-tile__more {
	margin-top: 1.125rem;
	color: #ffffff;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.ax-tile__arrow {
	display: inline-block;
	margin-left: 0.375rem;
	color: #90d7ac;
	transition: transform 200ms ease;
}

.ax-tile:hover .ax-tile__title a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
}

@media (prefers-reduced-motion: no-preference) {
	.ax-tile:hover .ax-tile__img {
		transform: scale(1.04);
	}

	.ax-tile:hover .ax-tile__arrow {
		transform: translateX(0.375rem);
	}
}

@media print {
	.ax-tile {
		min-height: 0;
		background: none;
		color: #000000;
		border: 1px solid #333333;
	}

	.ax-tile__img,
	.ax-tile--photo::before {
		display: none;
	}

	.ax-tile__title,
	.ax-tile__text,
	.ax-tile__more,
	.ax-tile__eyebrow {
		color: #000000;
	}
}

/* Solution page photo (the page's featured image). */
.ax-solution-photo {
	max-width: 56rem;
	margin: 0 0 var(--wp--preset--spacing--50);
}

.ax-solution-photo img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--ax-border);
	border-radius: var(--wp--custom--radius--md);
}

.ax-solution-photo figcaption {
	margin-top: 0.5rem;
	color: var(--ax-muted);
	font-size: var(--wp--preset--font-size--small);
}

/* 26. Footer site map: even grid, aligned headings ----------------------------- */
.ax-footer__sitemap {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 2.25rem 2rem;
}

@media (min-width: 48rem) {
	.ax-footer__sitemap {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ax-footer__col {
	min-width: 0;
}

.ax-footer__heading {
	margin: 0 0 0.625rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--ax-border);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ax-muted);
}

.ax-footer__heading a,
.ax-footer__heading a[aria-current="page"] {
	display: inline;
	padding: 0;
	color: inherit;
	text-decoration: none;
}

.ax-footer__heading a:hover {
	color: var(--ax-ink);
	text-decoration: underline;
}

.ax-footer__col li {
	margin: 0;
	line-height: 1.4;
}

/* 27. Contact page -------------------------------------------------------------- */
.ax-main--contact {
	margin-top: 0 !important;
}

.ax-main--contact {
	overflow-x: clip;
}

.ax-main.ax-main--contact > .ax-contact-hero {
	width: 100vw;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: 0 !important;
	background:
		radial-gradient(60rem 28rem at 88% -20%, rgba(144, 215, 172, 0.2) 0%, rgba(144, 215, 172, 0) 60%),
		linear-gradient(160deg, #14605f 0%, #0f5151 50%, #07282a 100%);
	color: #ffffff;
}

.ax-contact-hero__inner {
	max-width: 80rem;
	margin-inline: auto;
	padding: clamp(2rem, 4.5vw, 3.5rem) var(--wp--style--root--padding-left, 1.25rem) clamp(2rem, 4vw, 3rem);
}

.ax-contact-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.75rem;
	color: #90d7ac;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.ax-contact-hero__eyebrow::before {
	content: "";
	width: 2.5rem;
	height: 2px;
	background: #90d7ac;
}

.ax-contact-hero__title {
	margin: 0;
	max-width: none;
	color: #ffffff;
	font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
	line-height: 1.05;
}

.ax-contact-hero__lede {
	max-width: 44rem;
	margin: 1rem 0 0;
	color: #e3efeb;
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
	line-height: 1.45;
}

.ax-contact-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 1rem;
	margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
	padding: 0;
	list-style: none;
	max-width: none;
}

.ax-contact-card {
	margin: 0;
	padding: 1.25rem 1.375rem 1.375rem;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--wp--custom--radius--md);
	background: rgba(255, 255, 255, 0.07);
	max-width: none;
}

.ax-contact-card svg {
	display: block;
	margin-bottom: 0.75rem;
	color: #90d7ac;
}

.ax-contact-card h2 {
	margin: 0 0 0.375rem;
	color: #cfe3dc;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ax-contact-card p,
.ax-contact-card address {
	margin: 0;
	color: #ffffff;
	font-size: var(--wp--preset--font-size--medium);
	font-style: normal;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.ax-contact-card a {
	color: #ffffff;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(144, 215, 172, 0.7);
	text-underline-offset: 0.2em;
}

.ax-contact-card a:hover {
	text-decoration-color: #ffffff;
}

.ax-contact-card a:focus-visible {
	outline: 3px solid #90d7ac;
	outline-offset: 2px;
}

.ax-contact-card .ax-contact-card__note {
	margin-top: 0.375rem;
	color: #cfe3dc;
	font-size: var(--wp--preset--font-size--small);
}

.ax-contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: start;
	margin-top: var(--wp--preset--spacing--40);
}

.ax-contact-layout > * {
	margin-block: 0 !important;
	min-width: 0;
}

@media (min-width: 64rem) {
	.ax-contact-layout {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60);
	}

	.ax-contact-layout__aside {
		position: sticky;
		top: 9.5rem;
	}
}

.ax-contact-layout__form {
	padding: clamp(1.25rem, 3vw, 2.25rem);
	border: 1px solid var(--ax-border);
	border-top: 4px solid var(--ax-accent);
	border-radius: var(--wp--custom--radius--md);
	background: var(--ax-surface);
}

.ax-contact-layout__form .ax-enquiry {
	margin-top: 0;
}

.ax-contact-layout__aside {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border-radius: var(--wp--custom--radius--md);
	background: var(--ax-surface-2);
	font-size: var(--wp--preset--font-size--small);
}

.ax-contact-layout__aside > .wp-block-post-content > :first-child {
	margin-top: 0;
}

.ax-contact-layout__aside h2 {
	margin: 1.5rem 0 0.5rem;
	font-size: var(--wp--preset--font-size--medium);
}

.ax-contact-layout__aside .is-style-lede {
	font-size: inherit;
	line-height: 1.55;
}

.ax-contact-layout__aside :where(p, ul, li) {
	max-width: none;
}

@media print {
	.ax-contact-hero {
		width: auto;
		margin-left: 0 !important;
		background: none;
		color: #000000;
	}

	.ax-contact-hero__title,
	.ax-contact-hero__lede,
	.ax-contact-card p,
	.ax-contact-card address,
	.ax-contact-card a,
	.ax-contact-card h2 {
		color: #000000;
	}
}

/* 28. Home introduction: alternating text and photo ------------------------------ */
.ax-intro {
	display: grid;
	gap: clamp(3rem, 7vw, 6rem);
	padding-block: clamp(1rem, 3vw, 2.5rem);
}

.ax-intro__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.75rem, 4vw, 4rem);
	align-items: center;
}

@media (min-width: 56rem) {
	.ax-intro__row {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	}

	.ax-intro__row--flip {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	}

	.ax-intro__row--flip .ax-intro__media {
		order: -1;
	}
}

.ax-intro__text > * {
	margin: 0;
	max-width: 38rem;
}

.ax-intro__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.875rem;
	color: var(--ax-accent);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.ax-intro__eyebrow::before {
	content: "";
	width: 2.5rem;
	height: 2px;
	background: #90d7ac;
}

.ax-intro .ax-intro__heading,
.ax-hero-band__grid .ax-intro .ax-intro__heading {
	max-width: 18ch;
	font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
	line-height: 1.08;
}

.ax-intro__lede {
	margin-top: 1.25rem;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

.ax-intro__points {
	display: grid;
	gap: 0.5rem;
	margin-top: 1.25rem;
	padding: 0;
	list-style: none;
}

.ax-intro__points li {
	position: relative;
	margin: 0;
	padding-left: 1.75rem;
	font-weight: 500;
}

.ax-intro__points li::before {
	content: "";
	position: absolute;
	left: 0.125rem;
	top: 0.45em;
	width: 0.875rem;
	height: 0.4375rem;
	border-left: 2px solid var(--ax-accent);
	border-bottom: 2px solid var(--ax-accent);
	transform: rotate(-45deg);
}

.ax-intro__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-top: 1.75rem;
}

.ax-intro__more {
	color: var(--ax-ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: #90d7ac;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

.ax-intro__more:hover {
	color: var(--ax-accent);
}

.ax-intro__more span {
	display: inline-block;
	transition: transform 200ms ease;
}

/* Photo with an offset mint frame behind it. */
.ax-intro__media {
	position: relative;
	margin: 0 1rem 1rem 0;
}

.ax-intro__row--flip .ax-intro__media {
	margin: 0 0 1rem 1rem;
}

.ax-intro__media::before {
	content: "";
	position: absolute;
	inset: 1rem -1rem -1rem 1rem;
	border: 2px solid #90d7ac;
	border-radius: var(--wp--custom--radius--md);
}

.ax-intro__row--flip .ax-intro__media::before {
	inset: 1rem 1rem -1rem -1rem;
}

.ax-intro__media img,
.ax-intro__placeholder {
	position: relative;
	box-sizing: border-box;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md);
}

.ax-intro__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 1.5rem;
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 2.5rem),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 2.5rem),
		radial-gradient(120% 90% at 100% 0%, rgba(144, 215, 172, 0.25) 0%, rgba(144, 215, 172, 0) 60%),
		linear-gradient(160deg, #14605f 0%, #0f5151 45%, #07282a 100%);
	color: #90d7ac;
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.ax-intro__placeholder span {
	color: #e3efeb;
}

@media (prefers-reduced-motion: no-preference) {
	.ax-intro__more:hover span {
		transform: translateX(0.375rem);
	}
}

@media print {
	.ax-intro__media {
		display: none;
	}
}

/* 29. Solution pages: header band, key figures, feature rows ------------------- */
.ax-main--solution {
	margin-top: 0 !important;
	overflow-x: clip;
}

.ax-main.ax-main--solution > .ax-page-hero {
	width: 100vw;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: 0 !important;
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3rem),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3rem),
		radial-gradient(60rem 28rem at 88% -20%, rgba(144, 215, 172, 0.22) 0%, rgba(144, 215, 172, 0) 60%),
		linear-gradient(160deg, #14605f 0%, #0f5151 50%, #07282a 100%);
	color: #ffffff;
}

.ax-page-hero__inner {
	max-width: 80rem;
	margin-inline: auto;
	padding: clamp(2rem, 4.5vw, 3.75rem) var(--wp--style--root--padding-left, 1.25rem) clamp(2rem, 4vw, 3.25rem);
}

.ax-page-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.75rem;
	color: #90d7ac;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.ax-page-hero__eyebrow::before {
	content: "";
	width: 2.5rem;
	height: 2px;
	background: #90d7ac;
}

.ax-page-hero__title {
	margin: 0;
	max-width: 22ch;
	color: #ffffff;
	font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
	line-height: 1.05;
}

.ax-page-hero__lede {
	max-width: 48rem;
	margin: 1.125rem 0 0;
	color: #e3efeb;
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
	line-height: 1.5;
}

.ax-page-hero__figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1rem;
	margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
}

.ax-page-hero__figures > div {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	padding: 1.125rem 1.25rem 1.25rem;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-left: 3px solid #90d7ac;
	border-radius: var(--wp--custom--radius--md);
	background: rgba(255, 255, 255, 0.07);
}

.ax-page-hero__figures dd {
	margin: 0;
	color: #ffffff;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 600;
	line-height: 1.1;
}

.ax-page-hero__figures dt {
	margin-top: 0.5rem;
	color: #cfe3dc;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

.ax-page-hero__actions {
	margin: clamp(1.5rem, 3vw, 2rem) 0 0;
}

.ax-page-hero__actions .wp-block-button__link {
	background: #90d7ac;
	color: #07282a;
}

.ax-page-hero__actions .wp-block-button__link:hover {
	background: #ffffff;
	color: #07282a;
}

.ax-features {
	display: grid;
	gap: clamp(3rem, 6vw, 5.5rem);
	margin-block: clamp(2.5rem, 5vw, 4.5rem);
	max-width: none;
}

.ax-feature {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: center;
}

@media (min-width: 56rem) {
	.ax-feature {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	}

	.ax-feature--flip {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}

	.ax-feature--flip .ax-feature__media {
		order: -1;
	}

	.ax-feature--text {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ax-feature--text {
	padding: clamp(1.5rem, 3.5vw, 2.75rem);
	border-left: 4px solid #90d7ac;
	border-radius: var(--wp--custom--radius--md);
	background: var(--ax-surface-2);
}

.ax-feature--text .ax-feature__text > * {
	max-width: 60rem;
}

.ax-feature__text > * {
	margin: 0;
	max-width: 40rem;
}

.ax-feature__text > * + * {
	margin-top: 1rem;
}

.ax-feature__text .ax-feature__heading {
	margin-top: 0;
	font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem);
	line-height: 1.12;
}

.ax-feature__media {
	margin: 0;
	max-width: none;
}

.ax-feature__media figcaption {
	margin-top: 0.75rem;
	padding-left: 0.875rem;
	border-left: 2px solid #90d7ac;
	color: var(--ax-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

/* Protected picture: no selection, drag or long-press menu; the cover takes the
   pointer so the picture itself is never the click target. */
.ax-protect {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--ax-border);
	border-radius: var(--wp--custom--radius--md);
	background: #ffffff;
	box-shadow: 0.75rem 0.75rem 0 0 rgba(144, 215, 172, 0.45);
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

.ax-protect img {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
	-webkit-user-drag: none;
}

.ax-protect__cover {
	position: absolute;
	inset: 0;
}

@media print {
	.ax-main.ax-main--solution > .ax-page-hero {
		width: auto;
		margin-left: 0 !important;
		background: none;
		color: #000000;
	}

	.ax-page-hero__title,
	.ax-page-hero__lede,
	.ax-page-hero__figures dd,
	.ax-page-hero__figures dt {
		color: #000000;
	}

	.ax-page-hero__actions,
	.ax-protect img {
		display: none;
	}
}

/* 30. Legacy equipment spare parts: identification kit, wide steps, notes ------- */
.ax-page-hero__secondary {
	display: inline-block;
	margin-left: 1.25rem;
	color: #ffffff;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(144, 215, 172, 0.7);
	text-underline-offset: 0.2em;
}

.ax-page-hero__secondary:hover {
	text-decoration-color: #ffffff;
}

.ax-page-hero__secondary:focus-visible {
	outline: 3px solid #90d7ac;
	outline-offset: 2px;
}

@media (max-width: 40rem) {
	.ax-page-hero__secondary {
		display: block;
		margin: 1rem 0 0;
	}
}

.ax-feature__text > .ax-kit {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
	gap: 1rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	max-width: none;
	counter-reset: ax-kit;
}

.ax-kit__item {
	position: relative;
	margin: 0;
	padding: 1.25rem 1.25rem 1.375rem;
	border: 1px solid var(--ax-border);
	border-top: 3px solid var(--ax-accent);
	border-radius: var(--wp--custom--radius--md);
	background: var(--ax-surface);
	counter-increment: ax-kit;
}

.ax-kit__item::after {
	content: counter(ax-kit, decimal-leading-zero);
	position: absolute;
	top: 0.875rem;
	right: 1rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--ax-muted);
}

.ax-kit__icon {
	display: block;
	margin-bottom: 0.75rem;
	color: var(--ax-accent);
}

.ax-kit__title {
	margin: 0 0 0.375rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.3;
}

.ax-kit__item p {
	margin: 0;
	color: var(--ax-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.ax-feature__text > .ax-steps--wide {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: 1.25rem 2rem;
	margin: 1.5rem 0 0;
	max-width: none;
}

.ax-steps--wide > li {
	padding: 0.25rem 0 0 0;
	border-top: 2px solid var(--ax-ink);
}

.ax-steps--wide > li::before {
	position: static;
	display: block;
	margin: 0.75rem 0 0.5rem;
	font-size: var(--wp--preset--font-size--large);
	color: var(--ax-accent);
}

.ax-steps--wide > li::after {
	display: none;
}

.ax-steps--wide > li > strong {
	display: block;
	margin-bottom: 0.375rem;
	font-size: var(--wp--preset--font-size--medium);
}

.ax-feature__note {
	padding: 0.875rem 1rem;
	border-left: 3px solid var(--ax-accent);
	background: var(--ax-surface);
	color: var(--ax-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	max-width: 60rem;
}

.ax-main--legacy > .ax-cta-band {
	margin-top: var(--wp--preset--spacing--50);
}

.ax-feature--dark {
	border-left-color: #90d7ac;
	background:
		radial-gradient(40rem 20rem at 95% -30%, rgba(144, 215, 172, 0.25) 0%, rgba(144, 215, 172, 0) 60%),
		linear-gradient(160deg, #14605f 0%, #0f5151 55%, #07282a 100%);
	color: #ffffff;
}

.ax-feature--dark .ax-intro__eyebrow {
	color: #90d7ac;
}

.ax-feature--dark .ax-feature__heading {
	color: #ffffff;
}

.ax-feature--dark p {
	color: #e3efeb;
}

.ax-feature--dark a {
	color: #ffffff;
}

/* 31. Tiles that line up: part cards and home product tiles --------------------
   Every slot in a part card takes a fixed number of lines, so the SKU, the
   summary, the status row and the button sit at the same height in every card
   of a row. The home product tiles reserve three lines of text so the label and
   title sit at the same height in both tiles. */
.ax-part-card .ax-card__summary {
	min-height: calc(4 * 1.5em);
	line-height: 1.5;
}

.ax-part-card .ax-eyebrow {
	min-height: 1.4em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ax-part-card .ax-part-card__sku {
	min-height: 1.6em;
}

.ax-part-card__meta {
	align-items: start;
	min-height: 5.25rem;
}

.ax-part-card__meta dd {
	min-height: 2.8em;
	line-height: 1.4;
}

.ax-part-card .ax-enquire {
	margin-top: 0.75rem;
}

.ax-part-card .ax-enquire .ax-enquire__btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

/* Photos are shown whole (no cropping), centred in the slot on white. */
.ax-part-card__media img {
	object-fit: contain;
	padding: 0.5rem;
	box-sizing: border-box;
}

.ax-tile__text {
	min-height: calc(3 * 1.45em);
}

.ax-tile__eyebrow {
	min-height: 1.4em;
}

/* 32. Header band on any page, open rows, hub tiles, symptom index, article layout -- */
.ax-main:has(> .ax-page-hero) {
	margin-top: 0 !important;
	overflow-x: clip;
}

.ax-main > .ax-page-hero {
	width: 100vw;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: 0 !important;
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3rem),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3rem),
		radial-gradient(60rem 28rem at 88% -20%, rgba(144, 215, 172, 0.22) 0%, rgba(144, 215, 172, 0) 60%),
		linear-gradient(160deg, #14605f 0%, #0f5151 50%, #07282a 100%);
	color: #ffffff;
}

.ax-main > .ax-page-hero + .ax-breadcrumbs {
	margin-top: var(--wp--preset--spacing--30);
}

/* Rows that hold tiles or an index: no box, full content width. */
.ax-feature--open {
	display: block;
}

.ax-feature--open .ax-feature__text > * {
	max-width: 60rem;
}

.ax-feature--open .ax-feature__text > .ax-tiles,
.ax-feature--open .ax-feature__text > .ax-symptoms {
	max-width: none;
	margin-top: 1.5rem;
}

/* Hub tiles: three across on wide screens, shorter than the home tiles. */
@media (min-width: 64rem) {
	.ax-tiles--hub {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ax-tiles--hub .ax-tile {
	min-height: clamp(15rem, 22vw, 19rem);
}

.ax-tiles--hub .ax-tile__title {
	font-size: clamp(1.25rem, 1rem + 0.9vw, 1.625rem);
}

.ax-tiles--hub .ax-tile__text {
	font-size: var(--wp--preset--font-size--small);
	min-height: 0;
}

/* Symptom index: grouped list of anchored entries. */
.ax-symptoms {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: 1.5rem 2.5rem;
}

.ax-symptoms__label {
	margin: 0 0 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--ax-ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ax-muted);
}

.ax-symptoms__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ax-symptom;
}

.ax-symptoms__list li {
	margin: 0;
	counter-increment: ax-symptom;
}

.ax-symptoms__item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 0.25rem;
	border-bottom: 1px solid var(--ax-border);
	color: var(--ax-ink);
	font-weight: 600;
	text-decoration: none;
}

.ax-symptoms__item::before {
	content: counter(ax-symptom, decimal-leading-zero);
	flex: none;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	color: var(--ax-accent);
}

.ax-symptoms__item > span:first-of-type {
	flex: 1 1 auto;
}

.ax-symptoms__arrow {
	color: var(--ax-accent);
	transition: transform 200ms ease;
}

.ax-symptoms__item:hover {
	color: var(--ax-accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ax-symptoms__item:hover .ax-symptoms__arrow {
	transform: translateX(0.25rem);
}

/* Article layout: table of contents beside a reading-width column. */
.ax-article {
	margin-top: var(--wp--preset--spacing--40);
}

.ax-toc {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 1.25rem 1.375rem;
	border-left: 3px solid var(--ax-accent);
	border-radius: var(--wp--custom--radius--md);
	background: var(--ax-surface-2);
	font-size: var(--wp--preset--font-size--small);
}

.ax-toc__title {
	margin: 0 0 0.625rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ax-muted);
}

.ax-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ax-toc;
}

.ax-toc__list li {
	margin: 0;
	counter-increment: ax-toc;
}

.ax-toc__list a {
	display: flex;
	gap: 0.75rem;
	padding: 0.375rem 0;
	color: var(--ax-ink);
	line-height: 1.4;
	text-decoration: none;
}

.ax-toc__list a::before {
	content: counter(ax-toc, decimal-leading-zero);
	flex: none;
	font-family: var(--wp--preset--font-family--mono);
	color: var(--ax-accent);
}

.ax-toc__list a:hover {
	color: var(--ax-accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (min-width: 64rem) {
	.ax-article:has(> .ax-toc) {
		display: grid;
		grid-template-columns: 16rem minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60);
		align-items: start;
	}

	.ax-article:has(> .ax-toc) > .ax-toc {
		position: sticky;
		top: 9.5rem;
		margin: 0;
	}

	.ax-article:has(> .ax-toc) > .wp-block-post-content {
		margin-top: 0 !important;
	}

	.ax-article:has(> .ax-toc) > .wp-block-post-content > :where(p, ul, ol, h2, h3, h4, blockquote, .ax-notice) {
		max-width: 48rem;
	}
}

.ax-article > .wp-block-post-content > h2[id] {
	scroll-margin-top: 9rem;
}

.ax-symptom-entry > h3[id] {
	scroll-margin-top: 9rem;
}

.ax-hidden-query:empty,
.ax-hidden-query:not(:has(p)) {
	display: none;
}

/* 33. Enquiry confirmation ------------------------------------------------------ */
.ax-confirm {
	max-width: 52rem;
	padding: clamp(1.5rem, 4vw, 3rem);
	border: 1px solid var(--ax-border);
	border-top: 4px solid #90d7ac;
	border-radius: var(--wp--custom--radius--md);
	background: var(--ax-surface);
}

.ax-confirm:focus {
	outline: 3px solid var(--ax-focus);
	outline-offset: 2px;
}

.ax-confirm__head {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
}

.ax-confirm__icon {
	flex: none;
}

.ax-confirm__head > div > * {
	margin: 0;
	max-width: none;
}

.ax-confirm__eyebrow {
	margin-bottom: 0.375rem !important;
	color: var(--ax-accent);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ax-confirm__title {
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	line-height: 1.12;
}

.ax-confirm__lede {
	margin-top: 0.625rem !important;
	color: var(--ax-muted);
}

.ax-confirm__ref {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.25rem;
	margin: 1.75rem 0 0;
	padding: 1rem 1.25rem;
	border-radius: var(--wp--custom--radius--md);
	background: var(--ax-surface-2);
}

.ax-confirm__ref-label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ax-muted);
}

.ax-confirm__ref-value {
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
	letter-spacing: 0.04em;
	color: var(--ax-ink);
}

.ax-confirm__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: 1.25rem 2rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: ax-confirm;
}

.ax-confirm__steps > li {
	margin: 0;
	padding-top: 0.75rem;
	border-top: 2px solid var(--ax-ink);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--ax-muted);
	counter-increment: ax-confirm;
}

.ax-confirm__steps > li::before {
	content: counter(ax-confirm, decimal-leading-zero);
	display: block;
	margin-bottom: 0.375rem;
	font-family: var(--wp--preset--font-family--mono);
	color: var(--ax-accent);
}

.ax-confirm__steps > li > strong {
	display: block;
	margin-bottom: 0.25rem;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--ax-ink);
}

.ax-confirm__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin: 2rem 0 0;
}

.ax-confirm__again {
	font-weight: 600;
	color: var(--ax-ink);
}

.ax-confirm__note {
	margin: 1.25rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--ax-muted);
}