/**
 * Site chrome: skip link, header, navigation, page header, footer, pagination
 * and the generic archive entry.
 *
 * The masthead is paper with a hairline, not a black slab. The dark mass of the
 * page belongs at the bottom, in the footer, where it closes the document;
 * putting it at the top as well framed every page in two heavy bars and made
 * the content between them feel boxed in.
 *
 * Mobile-first. Navigation is a stacked panel below 68.75em and a horizontal
 * row from 68.75em up — the width at which eight items and the logo actually
 * fit side by side. See the note above .ajp-site-header__inner.
 */

@layer ajp.components {

	/* ----------------------------------------------------------------------
	 * Skip link
	 * -------------------------------------------------------------------- */

	.ajp-skip-link {
		position: absolute;
		top: 0;
		left: var(--ajp-space-2);
		z-index: var(--ajp-z-skip-link);
		padding: var(--ajp-space-2) var(--ajp-space-4);
		background-color: var(--ajp-ink);
		color: var(--ajp-white);
		font-weight: var(--ajp-weight-semibold);
		text-decoration: none;
		transform: translateY(-100%);
	}

	.ajp-skip-link:focus-visible {
		color: var(--ajp-white);
		transform: translateY(0);
		outline-color: var(--ajp-focus-color-inverse);
		outline-offset: -4px;
	}

	/* ----------------------------------------------------------------------
	 * Masthead
	 * -------------------------------------------------------------------- */

	/*
	 * Sticky, and no taller than it was. position: sticky keeps its space in
	 * flow, so there is no jump when it pins and no compensating padding is
	 * needed anywhere.
	 *
	 * The base is a solid paper bar with a thin grey rule. Everything below
	 * layers the frosted treatment on top of that, so any browser that cannot
	 * do one of the pieces falls back to a legible opaque header rather than to
	 * a see-through one.
	 */
	.ajp-site-header {
		position: sticky;
		top: 0;
		z-index: var(--ajp-z-header);
		background-color: var(--ajp-color-bg);
		border-bottom: var(--ajp-border-width) solid var(--ajp-color-line);
	}

	/*
	 * Frosted at rest. Gated on backdrop-filter, because a translucent bar
	 * without the blur behind it is just a see-through bar, and the logo and
	 * navigation are dark ink that has to stay readable over whatever passes
	 * underneath.
	 */
	@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		@media (prefers-reduced-motion: no-preference) {
			.ajp-site-header {
				background-color: color-mix(in srgb, var(--ajp-paper) 70%, transparent);
				-webkit-backdrop-filter: blur(14px) saturate(1.4);
				backdrop-filter: blur(14px) saturate(1.4);
			}
		}
	}

	/*
	 * ...and solid once the page has moved under it. A scroll-driven timeline,
	 * so this needs no JavaScript and no scroll listener. Browsers without
	 * scroll-driven animations keep the frosted state, which is the graceful
	 * half of the effect rather than a broken one.
	 */
	@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and (animation-timeline: scroll()) {
		@media (prefers-reduced-motion: no-preference) {
			@keyframes ajp-header-solidify {
				from { background-color: color-mix(in srgb, var(--ajp-paper) 70%, transparent); }
				to { background-color: var(--ajp-color-bg); }
			}

			.ajp-site-header {
				animation: ajp-header-solidify linear both;
				animation-timeline: scroll();
				animation-range: 0 5rem;
			}
		}
	}

	/* ----------------------------------------------------------------------
	 * The masthead over the hero — front page only
	 *
	 * The page used to open with a paper bar and then a photograph. The bar is
	 * the only thing above the fold that is not the machinery, so it moves on
	 * to the photograph and the hero starts at the top of the window.
	 *
	 * Everything here is gated three ways, and the gates are the design:
	 *
	 * 1. .ajp-has-hero — only the front page has a full-bleed photograph for
	 *    the header to sit on.
	 * 2. @supports (animation-timeline: scroll()) — the header has to come
	 *    back to paper once the photograph has scrolled away, and that is what
	 *    brings it back. Without scroll-driven animations there is no way to
	 *    know where the page is without a scroll listener, and a white-on-
	 *    photograph header stranded over white content is unreadable. Browsers
	 *    that cannot do it keep today's design exactly.
	 * 3. prefers-reduced-motion — same reason: the return journey is animated,
	 *    so if the animation is unwanted the whole treatment stays off.
	 *
	 * html:not(.ajp-nav-is-open) takes the treatment off while the mobile menu
	 * is open. The menu is an opaque sheet, and a transparent header with white
	 * text over it would be a white logo on white paper. Written as :not()
	 * rather than by out-specifying it further down, so the two rules cannot
	 * end up in a specificity race.
	 * -------------------------------------------------------------------- */

	@supports (animation-timeline: scroll()) {
		@media (prefers-reduced-motion: no-preference) {

			/*
			 * The hero moves up under the header and gives the space back as
			 * padding, so the photograph fills the window from the very top
			 * while the words stay clear of the navigation.
			 *
			 * --ajp-hero-min-h is added back to the minimum height as well:
			 * with border-box sizing the new padding would otherwise come out
			 * of the band's designed height and the hero would end up shorter
			 * than it is on every other browser.
			 */
			.ajp-has-hero .ajp-hero {
				margin-block-start: calc(var(--ajp-header-h, 4.5rem) * -1);
			}

			.ajp-has-hero .ajp-hero__inner {
				min-height: calc(var(--ajp-hero-min-h) + var(--ajp-header-h, 4.5rem));

				/*
				 * The masthead's height plus the band's own rhythm.
				 *
				 * This was briefly the larger of the two rather than the sum,
				 * to save height on a phone. It saved 24px and cost the top of
				 * the hero: the motif ended up 16px under the navigation, which
				 * is not a margin, it is a near miss.
				 *
				 * The sum is also the only value that centres the content
				 * correctly at desktop widths. The content box is centred
				 * between its own paddings, but the band the reader sees starts
				 * at the bottom of the masthead — so for the two centres to
				 * agree, the top padding has to exceed the bottom by exactly
				 * the height of the header. Any other value sits the content
				 * low in the frame.
				 */
				padding-block-start: calc(var(--ajp-header-h, 4.5rem) + var(--ajp-section-y-tight));
			}

			/*
			 * A scrim for the masthead, not for the picture.
			 *
			 * Measured on the rendered band with the header's own contents
			 * hidden: white navigation over the bare photograph averages
			 * 6.88:1 but falls to 3.81:1 where the sky is brightest behind
			 * "About A & J", under AA for 14px text. This darkens the strip
			 * the header occupies and is gone a couple of rem below it, so it
			 * pays for the header without touching the part of the frame the
			 * machinery is in.
			 *
			 * It belongs to the header treatment rather than to the hero, so
			 * it lives inside the same gate: no overlay, no scrim.
			 */
			.ajp-has-hero .ajp-hero::before {
				content: "";
				position: absolute;
				inset-inline: 0;
				top: 0;
				z-index: 1;
				height: calc(var(--ajp-header-h, 4.5rem) + 3rem);
				background: linear-gradient(
					to bottom,
					rgb(12 14 16 / 0.55) 0%,
					rgb(12 14 16 / 0.34) 55%,
					rgb(12 14 16 / 0) 100%
				);
			}

			html:not(.ajp-nav-is-open) .ajp-has-hero .ajp-site-header {
				animation: ajp-header-over-hero linear both;
				animation-timeline: scroll();

				/*
				 * 2.5rem, not the 5rem this started at.
				 *
				 * The background crosses from clear to paper, and somewhere in
				 * the middle it is a mid-grey that neither white nor ink reads
				 * against: measured over the photograph, white type fell to
				 * 2.54:1 partway through and 1.51:1 further on. Nothing can
				 * remove that crossing — one of the two colours has to be
				 * wrong while the surface is halfway between them — so the
				 * answer is to make it short and to get it over with while the
				 * page is moving.
				 *
				 * Nothing happens for the first 3rem, so the clear header is
				 * still there when someone starts to scroll; then the change
				 * takes 2.5rem. Measured across it, white holds AA to about a
				 * third of the way in and ink has it from about two thirds, so
				 * roughly 14px of scroll has neither at 4.5:1 — both are above
				 * 3:1 throughout, and it is a transient during an active
				 * flick rather than a resting state.
				 *
				 * The range ends at 88px, which is inside the shortest hero
				 * this design produces (432px at 390). That matters: the
				 * header must finish turning to paper while it still has the
				 * photograph behind it, never after the white page has
				 * arrived underneath it.
				 */
				animation-range: 3rem 5.5rem;
			}

			/*
			 * One animation, four elements. The colours and the inversion are
			 * inherited custom properties, so the links, the toggle and the
			 * logo all follow the header without a timeline of their own.
			 *
			 * The ink switches at a stop rather than fading. Two keyframes a
			 * thousandth apart hold white until the background is halfway to
			 * paper and then change it outright: interpolating instead spent
			 * the whole transition on a grey that was neither, which is what
			 * made the navigation look washed out on the way down the page.
			 * The logo pair rides the same switch, so it swaps cleanly rather
			 * than ghosting through a double image.
			 */
			/*
			 * The hairline under the bar is there in both states, not only once
			 * the header is paper. Over the photograph it is white at 0.14,
			 * which is a line you notice only when you look for it; on paper it
			 * is the same --ajp-color-line every other page uses.
			 *
			 * 0.14 rather than the 0.28 it started at. Against a dark
			 * photograph a white hairline carries much further than the same
			 * value does against paper, and at 0.28 it read as a drawn edge
			 * rather than as the quiet join it is meant to be.
			 *
			 * It is also the machinery panel's top edge. The panel hangs from
			 * the header's bottom with no border of its own, so this line is
			 * what it sits flush against, in both states.
			 */
			@keyframes ajp-header-over-hero {
				from {
					background-color: transparent;
					border-bottom-color: rgb(255 255 255 / 0.14);
					-webkit-backdrop-filter: blur(0) saturate(1);
					backdrop-filter: blur(0) saturate(1);
				}

				to {
					background-color: var(--ajp-color-bg);
					border-bottom-color: var(--ajp-color-line);
					-webkit-backdrop-filter: blur(14px) saturate(1.4);
					backdrop-filter: blur(14px) saturate(1.4);
				}
			}

			/*
			 * The bar's contents are animated one by one, on their own
			 * elements, rather than reading a colour the header animates and
			 * passes down.
			 *
			 * This is the third attempt at this and the reason for the change
			 * is worth writing down. Twice the navigation stayed body-grey on
			 * the photograph — invisible — and both times the cause was the
			 * cascade rather than the design: first a structural selector that
			 * did not match what the menu walker emits, then a declaration that
			 * something else outranked. A declaration can always be outranked.
			 * An animation cannot: values produced by a running animation sit
			 * above the whole normal cascade, so nothing in this theme, in a
			 * plugin, or in an unlayered stylesheet can win against them.
			 *
			 * It costs a handful of extra timelines, which are compositor work
			 * and cheap, and it buys a rule that does not depend on being the
			 * most specific selector in the document.
			 *
			 * Each pair holds its first value until halfway and then changes
			 * outright, for the reason in the note above: fading a colour
			 * across a background that is itself crossing from clear to paper
			 * spends the whole journey on a grey that reads against neither.
			 */
			html:not(.ajp-nav-is-open) .ajp-has-hero .ajp-nav a,
			html:not(.ajp-nav-is-open) .ajp-has-hero .ajp-dropdown__summary,
			html:not(.ajp-nav-is-open) .ajp-has-hero .ajp-nav-toggle {
				animation: ajp-nav-ink linear both;
				animation-timeline: scroll();
				animation-range: 3rem 5.5rem;
			}

			/* Stronger for the current page and on hover, as everywhere else. */
			html:not(.ajp-nav-is-open) .ajp-has-hero .ajp-nav a:hover,
			html:not(.ajp-nav-is-open) .ajp-has-hero .ajp-dropdown__summary:hover,
			html:not(.ajp-nav-is-open) .ajp-has-hero .ajp-nav a[aria-current],
			html:not(.ajp-nav-is-open) .ajp-has-hero .ajp-dropdown__summary[aria-current],
			html:not(.ajp-nav-is-open) .ajp-has-hero .ajp-nav-toggle {
				animation-name: ajp-nav-ink-strong;
			}

			/*
			 * The panel is paper and keeps its own colours. It is inside .ajp-nav,
			 * so it needs its own animation to overrule the one above — a plain
			 * declaration would lose to it, which is exactly the property being
			 * relied on here.
			 */
			html:not(.ajp-nav-is-open) .ajp-has-hero .ajp-nav .ajp-dropdown__panel a {
				animation-name: ajp-nav-ink-panel;
			}

			html:not(.ajp-nav-is-open) .ajp-has-hero .ajp-nav .ajp-dropdown__panel a:hover {
				animation-name: ajp-nav-ink-panel-hover;
			}

			/* The enquiry button is a red fill with its own label colour. */
			html:not(.ajp-nav-is-open) .ajp-has-hero .ajp-nav a.ajp-button {
				animation-name: ajp-nav-ink-button;
			}

			@keyframes ajp-nav-ink {
				from, 49.9% { color: #ffffff; }
				50%, to { color: var(--ajp-color-text); }
			}

			@keyframes ajp-nav-ink-strong {
				from, 49.9% { color: #ffffff; }
				50%, to { color: var(--ajp-color-heading); }
			}

			@keyframes ajp-nav-ink-panel {
				from, to { color: var(--ajp-color-text); }
			}

			@keyframes ajp-nav-ink-panel-hover {
				from, to { color: var(--ajp-color-brand); }
			}

			@keyframes ajp-nav-ink-button {
				from, to { color: var(--ajp-button-fg); }
			}

			html:not(.ajp-nav-is-open) .ajp-has-hero .ajp-nav-toggle {
				border-color: currentColor;
			}

			html:not(.ajp-nav-is-open) .ajp-has-hero .ajp-site-header :focus-visible {
				outline-color: currentColor;
			}

			/*
			 * The logo pair: the same white asset the footer uses, swapped at
			 * the same halfway point rather than cross-faded through a double
			 * image. Each mark animates its own opacity, for the same reason
			 * the colours do.
			 */
			html:not(.ajp-nav-is-open) .ajp-has-hero .ajp-branding__logo--paired .custom-logo {
				animation: ajp-logo-black linear both;
				animation-timeline: scroll();
				animation-range: 3rem 5.5rem;
			}

			html:not(.ajp-nav-is-open) .ajp-has-hero .ajp-branding__logo img.ajp-branding__logo-inverse {
				animation: ajp-logo-white linear both;
				animation-timeline: scroll();
				animation-range: 3rem 5.5rem;
			}

			@keyframes ajp-logo-black {
				from, 49.9% { opacity: 0; }
				50%, to { opacity: 1; }
			}

			@keyframes ajp-logo-white {
				from, 49.9% { opacity: 1; }
				50%, to { opacity: 0; }
			}

			/*
			 * Fallback for a site with no white artwork in the library: invert
			 * the black mark, as the footer did before the asset was found.
			 */
			html:not(.ajp-nav-is-open) .ajp-has-hero .ajp-branding__logo:not(.ajp-branding__logo--paired) .custom-logo {
				animation: ajp-logo-invert linear both;
				animation-timeline: scroll();
				animation-range: 3rem 5.5rem;
			}

			@keyframes ajp-logo-invert {
				from, 49.9% { filter: brightness(0) invert(1); }
				50%, to { filter: brightness(1) invert(0); }
			}
		}
	}

	/*
	 * scroll-padding on <html> keeps an anchored target clear of the pinned
	 * header rather than landing underneath it.
	 */
	html { scroll-padding-top: 6rem; }

	.ajp-site-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--ajp-space-4);
		min-height: 4.5rem;
	}

	@media (min-width: 68.75em) {
		.ajp-site-header__inner {
			min-height: 5.25rem;
			gap: var(--ajp-space-6);
		}
	}

	/* ----------------------------------------------------------------------
	 * Branding
	 * -------------------------------------------------------------------- */

	/*
	 * flex-shrink: 0 is load-bearing. Without it the logo is the only thing in
	 * the header that can give way, so as soon as the navigation needs more room
	 * than the row has, the mark is squashed rather than the menu collapsing —
	 * it rendered 42px wide at 1024. The header must reach the mobile menu
	 * instead, which is what the breakpoint above now does.
	 */
	.ajp-branding {
		display: flex;
		align-items: center;
		flex: 0 0 auto;
		min-width: 0;
	}

	.ajp-branding__logo { display: flex; }

	.ajp-branding__logo img {
		width: auto;
		max-height: 2.5rem;
	}

	/*
	 * The white mark sits exactly on top of the black one so the two can
	 * cross-fade. It is out of flow, so the black mark alone sets the size of
	 * the box and the row cannot change height as they swap.
	 */
	.ajp-branding__logo--paired { position: relative; }

	.ajp-branding__logo-inverse {
		position: absolute;
		inset-block: 0;
		left: 0;
		max-height: none;
		height: 100%;
		width: auto;
		opacity: 0;
	}

	@media (min-width: 68.75em) {
		.ajp-branding__logo img { max-height: 3.125rem; }
	}

	.ajp-branding__title {
		margin: 0;
		font-size: var(--ajp-text-card);
		line-height: var(--ajp-leading-heading);
	}

	.ajp-branding__title a { text-decoration: none; }

	/* ----------------------------------------------------------------------
	 * Navigation toggle — mobile only, and only once JavaScript has run.
	 * -------------------------------------------------------------------- */

	.ajp-nav-toggle {
		display: none;
		align-items: center;
		gap: var(--ajp-space-2);
		min-height: var(--ajp-control-height-sm);
		padding-inline: var(--ajp-space-3);
		border: var(--ajp-border-width) solid var(--ajp-color-line-strong);
		border-radius: var(--ajp-radius);
		background-color: transparent;
		color: var(--ajp-color-heading);
		font-size: var(--ajp-text-meta);
		font-weight: var(--ajp-weight-semibold);
		cursor: pointer;
	}

	.js .ajp-nav-toggle { display: inline-flex; }

	@media (min-width: 68.75em) {
		.js .ajp-nav-toggle { display: none; }
	}

	.ajp-nav-toggle__bars,
	.ajp-nav-toggle__bars::before,
	.ajp-nav-toggle__bars::after {
		display: block;
		width: 1rem;
		height: 1.5px;
		background-color: currentColor;
	}

	.ajp-nav-toggle__bars { position: relative; }

	.ajp-nav-toggle__bars::before,
	.ajp-nav-toggle__bars::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.ajp-nav-toggle__bars::before { top: -5px; }
	.ajp-nav-toggle__bars::after { top: 5px; }

	/* ----------------------------------------------------------------------
	 * Navigation
	 *
	 * Sentence case, one weight, one size. The active page is marked with a
	 * short red rule underneath rather than by colouring the text, so the
	 * marker is unmistakable without turning a navigation item into a link
	 * that looks different from its neighbours.
	 * -------------------------------------------------------------------- */

	.ajp-nav__list {
		display: flex;
		flex-direction: column;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/*
	 * Resting at body weight and body colour, strengthening to ink on hover.
	 * Both hover and the active state are marked by a short rule under the
	 * text — neutral on hover, A&J red for the current page — rather than by
	 * turning the link red, which made hovering look like a state change.
	 */
	.ajp-nav__list a,
	.ajp-dropdown__summary {
		display: block;
		color: var(--ajp-color-text);
		font-size: var(--ajp-text-body);
		font-weight: var(--ajp-weight-medium);
		text-decoration: none;
		transition: color var(--ajp-duration-fast) var(--ajp-ease);
	}

	.ajp-nav__list > li { position: relative; }

	.ajp-nav__list > li > a,
	.ajp-dropdown__summary { padding-block: var(--ajp-space-3); }

	.ajp-nav__list a:hover,
	.ajp-dropdown__summary:hover { color: var(--ajp-color-heading); }

	/*
	 * aria-current is set by the filter in inc/template-functions.php for menu
	 * items and by the walker for the disclosure, so whatever marks the current
	 * page reads from one source.
	 *
	 * On the stacked menu that mark is the ink colour and nothing else. The rule
	 * belongs to a horizontal row, where it underlines one word among several;
	 * drawn under a full-width row with a divider already beneath it, it read as
	 * a second, heavier divider rather than as a marker.
	 */
	.ajp-nav__list > li > a[aria-current],
	.ajp-dropdown__summary[aria-current] { color: var(--ajp-color-heading); }

	/* ----------------------------------------------------------------------
	 * Enquire
	 *
	 * The site's primary button, unmodified: red fill, white text, arrow. It
	 * matches "View machinery", "Talk to us" and every form submit, so the
	 * header's action reads as the same action the rest of the site offers
	 * rather than as a header-only variant.
	 * -------------------------------------------------------------------- */

	.ajp-nav__action { margin-block-start: var(--ajp-space-4); }

	/* The arrow travels on hover, the same as the text-action component's. */
	.ajp-nav__action-arrow { transition: transform var(--ajp-duration-fast) var(--ajp-ease); }

	.ajp-nav__action:hover .ajp-nav__action-arrow { transform: translateX(var(--ajp-space-1)); }

	@media (max-width: 68.74em) {
		/*
		 * The whole screen below the header, not a panel hanging off it. Fixed
		 * rather than absolute so it fills the viewport instead of the header it
		 * sits inside, and it starts below the header so the control that closes
		 * it stays reachable.
		 *
		 * --ajp-header-h is measured and set by assets/js/navigation.js, because
		 * the header's height depends on the logo the site has uploaded. The
		 * fallback matches .ajp-site-header__inner's min-height, so the menu is
		 * right even on the first frame.
		 *
		 * dvh, so the address bar collapsing on a phone does not leave a strip of
		 * page showing under the menu.
		 */
		.js .ajp-nav {
			position: fixed;
			left: 0;
			right: 0;
			top: var(--ajp-header-h, 4.5rem);
			height: calc(100dvh - var(--ajp-header-h, 4.5rem));
			overflow-y: auto;
			overscroll-behavior: contain;
			padding: var(--ajp-space-2) var(--ajp-gutter) var(--ajp-space-6);
			background-color: var(--ajp-color-bg);
		}

		.ajp-nav__list > li + li { border-top: var(--ajp-border); }

		/*
		 * The page behind must not scroll while the menu is over it.
		 *
		 * The lock goes on the root element ONLY. overflow on <html> propagates
		 * to the viewport, which stops wheel and touch scrolling just as well —
		 * and, unlike the same declaration on <body>, it leaves the header's
		 * scroll container alone.
		 *
		 * Adding <body> to this rule made body a scroll container of its own.
		 * That container never scrolls, so the sticky header had nothing to
		 * stick to: opening the menu part-way down a page un-pinned the header
		 * and dropped it back to its in-flow position at the top of the
		 * document, hundreds of pixels above the viewport. The panel below
		 * followed it off-screen (see the header rule underneath), leaving a
		 * page that was scroll-locked with no menu and no way to close it.
		 */
		.ajp-nav-is-open { overflow: hidden; }

		/*
		 * Solid header while the menu is open — and not only for looks.
		 *
		 * backdrop-filter makes an element the containing block for fixed
		 * descendants, and .ajp-nav is fixed inside the header. Frosted, the
		 * panel is positioned against the header rather than the viewport, so
		 * anything that moves the header takes the whole menu with it. Dropping
		 * the filter for as long as the menu is open puts the panel back on the
		 * viewport where it belongs.
		 *
		 * animation-name is cleared because the scroll-driven solidify keyframes
		 * animate background-color, and an animation outranks a plain
		 * declaration in the cascade.
		 */
		.ajp-nav-is-open .ajp-site-header {
			animation-name: none;
			background-color: var(--ajp-color-bg);
			-webkit-backdrop-filter: none;
			backdrop-filter: none;
		}
	}

	@media (min-width: 68.75em) {
		.ajp-nav {
			display: flex;
			align-items: center;
			gap: var(--ajp-space-6);
		}

		.ajp-nav__list {
			flex-direction: row;
			align-items: center;
			gap: var(--ajp-space-6);
		}

		.ajp-nav__list > li > a,
		.ajp-dropdown__summary { padding-block: var(--ajp-space-2); }

		.ajp-nav__list a,
		.ajp-dropdown__summary {
			font-size: var(--ajp-text-meta);
			white-space: nowrap;
		}

		.ajp-nav__action { margin-block-start: 0; }

		/*
		 * The marker, and only on the horizontal row. It runs the full width of
		 * the item it belongs to, so the current page is marked by the whole
		 * word rather than by a stub under its first letter, and width is the
		 * only thing that animates.
		 *
		 * The disclosure takes the same offset as a plain link, or its marker
		 * sits higher than its neighbours': the summary is a flex box with a
		 * chevron, so its box is taller and a shared bottom value would not land
		 * in the same place.
		 */
		.ajp-nav__list > li > a::after,
		.ajp-dropdown__summary::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: -0.3rem;
			width: 0;
			height: 2px;
			background-color: var(--ajp-color-line-strong);
			transition: width var(--ajp-duration-base) var(--ajp-ease);
		}

		.ajp-nav__list > li > a:hover::after,
		.ajp-dropdown__summary:hover::after { width: 100%; }

		.ajp-nav__list > li > a[aria-current]::after,
		.ajp-dropdown__summary[aria-current]::after {
			width: 100%;
			background-color: var(--ajp-color-brand);
		}
	}

	/* ----------------------------------------------------------------------
	 * Machinery disclosure
	 *
	 * <details>/<summary>: native, keyboard-operable, and functional with no
	 * JavaScript. assets/js/navigation.js only adds the conveniences.
	 * -------------------------------------------------------------------- */

	.ajp-dropdown { position: relative; }

	.ajp-dropdown__summary {
		position: relative;
		display: flex;
		align-items: center;
		gap: var(--ajp-space-2);
		cursor: pointer;
		list-style: none;
	}

	.ajp-dropdown__summary::-webkit-details-marker { display: none; }

	.ajp-dropdown__chevron {
		width: 0.4rem;
		height: 0.4rem;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
	}

	.ajp-dropdown[open] .ajp-dropdown__chevron { transform: translateY(2px) rotate(-135deg); }

	.ajp-dropdown__list {
		margin: 0;
		padding: 0 0 var(--ajp-space-3) var(--ajp-space-4);
		list-style: none;
	}

	/*
	 * A row is a name and an arrow, which is how every other list of routes on
	 * this site behaves — the ruled rows under "Browse by type", the text
	 * actions, the machine card's cue. The arrow is the affordance and it is
	 * always present; on hover it travels and turns red, and the name goes with
	 * it. Nothing here is new: it is the .ajp-rule treatment applied to the one
	 * list of routes that had been left out of it.
	 */
	.ajp-dropdown__list a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--ajp-space-4);
		padding-block: var(--ajp-space-2);
		font-size: var(--ajp-text-meta);
		font-weight: var(--ajp-weight-regular);
	}

	.ajp-dropdown__list a::after {
		content: "\2192";
		flex: 0 0 auto;
		color: var(--ajp-color-line-strong);
		transition: transform var(--ajp-duration-fast) var(--ajp-ease),
			color var(--ajp-duration-fast) var(--ajp-ease);
	}

	.ajp-dropdown__list a:hover { color: var(--ajp-color-brand); }

	.ajp-dropdown__list a:hover::after {
		color: var(--ajp-color-brand);
		transform: translateX(var(--ajp-space-1));
	}

	@media (min-width: 68.75em) {
		/* One of only two shadows in the design. The panel overlaps machinery
		 * photography, which a hairline cannot separate it from. */
		/*
		 * The panel sits a little below the summary. That gap is empty page, so
		 * a pointer travelling down to the panel would leave the item and close
		 * it again; this bridges the gap with a transparent strip that belongs
		 * to the panel, keeping the pointer inside the item the whole way.
		 */
		/*
		 * The strip between the label and the panel belongs to the disclosure,
		 * so the pointer never leaves it on the way down.
		 *
		 * It lives on .ajp-dropdown, not on the panel. On the panel it had to
		 * measure the gap as a percentage, and a percentage height resolves
		 * against the containing block — which for a child of the panel is the
		 * panel, three hundred pixels of it. The sum went negative, the strip
		 * collapsed to nothing, and the menu could not be reached with a mouse
		 * at all. On the disclosure the same percentage is the summary's own
		 * height, which is the number the arithmetic wanted.
		 *
		 * Only while open, and only as wide as the label, so it never sits over
		 * the item next to it.
		 */
		.ajp-dropdown[open]::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			top: 100%;
			height: calc((var(--ajp-header-h, 5.25rem) - 100%) / 2);
		}

		/*
		 * The panel's left edge lines up with the summary's text and with the
		 * marker that wipes in under it, because left: 0 on the disclosure is
		 * exactly where that marker starts.
		 *
		 * It used to hang 16px further left so that the rows' text lined up
		 * with the summary's instead. That is the textbook alignment and it
		 * looked wrong here: the panel is a visible object with an edge and a
		 * shadow, and an edge that agrees with nothing above it reads as a
		 * misplaced box long before anyone notices the text inside it agrees
		 * with the label. Edge to edge, and the rows take a smaller inset.
		 *
		 * Tighter all round: the panel's own padding, the row inset and the
		 * minimum width. It is a list of seven short words and was sized like
		 * a page.
		 *
		 * It hangs from the bottom of the masthead, not from the label. Sat a
		 * few pixels under the summary it floated: a box near a word rather
		 * than a drawer belonging to the bar. Now its top edge is the header's
		 * bottom edge, its top corners are square, and the whole thing reads as
		 * something the masthead opened.
		 *
		 * Horizontally it is offset by exactly the row inset, so the category
		 * names line up with the label they dropped out of. Text to text is the
		 * alignment that reads: the panel's own edge then sits a few pixels
		 * further left, which is far less noticeable than eight names that do
		 * not agree with the word above them.
		 *
		 * The offset is arithmetic on numbers the page already has. The
		 * disclosure is centred in the header row, so the distance from its top
		 * to the bottom of the bar is half the header's height plus half its
		 * own — and a percentage in `top` resolves against the containing
		 * block's height, which is the disclosure. --ajp-header-h is measured
		 * and published by assets/js/navigation.js; the fallback is the desktop
		 * header's own min-height, so it is right before that runs.
		 */
		.ajp-dropdown__panel {
			/*
			 * One number for the row inset, because two things depend on it and
			 * they must never disagree: the rows pad by it, and the panel is
			 * pulled left by it so the category names line up with the label
			 * they dropped out of. Changing the padding alone would quietly
			 * break the alignment.
			 */
			--ajp-dropdown-inset: var(--ajp-space-4);

			position: absolute;
			top: calc((var(--ajp-header-h, 5.25rem) + 100%) / 2);
			left: calc((var(--ajp-dropdown-inset) + var(--ajp-border-width)) * -1);
			z-index: var(--ajp-z-dropdown);
			min-width: 14rem;
			padding-block: var(--ajp-space-2);
			border-radius: 0 0 var(--ajp-radius) var(--ajp-radius);
			background-color: var(--ajp-color-bg);
			border: var(--ajp-border-width) solid var(--ajp-color-line);
			border-top: 0;
			box-shadow: var(--ajp-shadow-panel);
		}

		.ajp-dropdown__list { padding: 0; }

		.ajp-dropdown__list a {
			gap: var(--ajp-space-5);
			padding: var(--ajp-space-3) var(--ajp-dropdown-inset);
		}

		.ajp-dropdown__list a:hover { background-color: var(--ajp-color-surface); }
	}

	/* ----------------------------------------------------------------------
	 * Page header band
	 *
	 * Archive and taxonomy pages have no hero photograph, so this band is
	 * where they get their weight. It is the only dark band above the fold on
	 * those templates.
	 * -------------------------------------------------------------------- */

	.ajp-page-header {
		padding-block: var(--ajp-section-y-tight);
		background-color: var(--ajp-color-inverse-bg);
		color: var(--ajp-color-on-inverse);
	}

	.ajp-page-header__title {
		margin: 0;
		max-width: 20ch;
		color: var(--ajp-color-on-inverse-heading);
		font-size: var(--ajp-text-h1);
		letter-spacing: var(--ajp-tracking-heading);
	}

	.ajp-page-header__description {
		max-width: var(--ajp-measure);
		margin-block-start: var(--ajp-space-heading-copy);
		color: var(--ajp-color-on-inverse);
	}

	.ajp-page-header a { color: var(--ajp-color-on-inverse-heading); }
	.ajp-page-header :focus-visible { outline-color: var(--ajp-focus-color-inverse); }

	/* ----------------------------------------------------------------------
	 * Inner page body
	 *
	 * Overrides .ajp-section's homepage rhythm. Scoped to .ajp-page, so the
	 * homepage bands keep theirs.
	 * -------------------------------------------------------------------- */

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

	/*
	 * Whatever follows the band opens the page, so it takes the inner-page
	 * rhythm too. This reaches the machinery archive and the term pages, whose
	 * first band is a grid section; the grid itself is untouched, only the space
	 * around it.
	 *
	 * Both edges, not just the top. Setting only padding-block-start left the
	 * section opening at the inner-page gap and closing at the homepage one,
	 * which on a category with no stock put a short paragraph in a box with
	 * twice as much air below it as above.
	 */
	.ajp-page-header + .ajp-section,
	.ajp-page-header + .ajp-container.ajp-section { padding-block: var(--ajp-page-y); }

	/* --- Copy beside the form --------------------------------------------
	 *
	 * One column until there is room for two. The form is the point of the
	 * page, so on a wide screen it sits level with the copy that argues for
	 * it rather than below the fold.
	 * -------------------------------------------------------------------- */

	.ajp-page__split { display: grid; }

	@media (min-width: 64em) {
		.ajp-page__split {
			grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
			gap: var(--ajp-space-8);
			align-items: start;
		}

		/* The column is already the measure; a second cap would narrow it twice.
		 * The gap between the columns is the separation, so the stacked layout's
		 * top margin goes. Not sticky: the form is close to a viewport tall, and
		 * pinning it would clip the submit button on a laptop. */
		.ajp-page__split .ajp-prose,
		.ajp-page__split .ajp-enquiry { max-width: none; }
		.ajp-page__split .ajp-enquiry { margin-block-start: 0; }

		/*
		 * The same split where the copy is the point and the panel beside it is
		 * a place to act, not an equal half. Finance is read for its argument;
		 * Sell Your Machine is visited to use the form.
		 *
		 * The measure cap comes back for the copy: this column is wider than the
		 * near-even one above, and without it the lines run past the length the
		 * rest of the site is read at. The panel keeps max-width: none from the
		 * rule above, because it is already narrower than a measure.
		 */
		.ajp-page__split--aside { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
		.ajp-page__split--aside .ajp-page__body { max-width: var(--ajp-measure); }
	}

	/*
	 * FMF's quotation terms, at the foot of the contact panel. Ruled off the
	 * details above them the way .ajp-enquiry__aside is, so a hundred words of
	 * small print reads as a closing note rather than as more contact copy, and
	 * the enquiry button below stays findable instead of arriving as the next
	 * line of it.
	 */
	.ajp-finance-terms {
		margin-block-start: var(--ajp-space-5);
		padding-block-start: var(--ajp-space-5);
		border-top: var(--ajp-border-width) solid var(--ajp-color-line);
	}

	.ajp-finance-terms + .ajp-button { margin-block-start: var(--ajp-space-copy-cta); }

	/* ----------------------------------------------------------------------
	 * Footer
	 *
	 * The dark mass that closes every page. Four columns whose prominence is
	 * deliberately unequal: the phone number is the single most findable thing
	 * in it, navigation is uniform and quieter, legal is quietest.
	 * -------------------------------------------------------------------- */

	.ajp-site-footer {
		padding-block-start: var(--ajp-space-8);
		background-color: var(--ajp-color-inverse-bg);
		color: var(--ajp-color-on-inverse);
	}

	.ajp-site-footer a {
		color: var(--ajp-color-on-inverse);
		text-decoration: none;
	}

	.ajp-site-footer a:hover { color: var(--ajp-color-on-inverse-heading); }
	.ajp-site-footer :focus-visible { outline-color: var(--ajp-focus-color-inverse); }

	.ajp-footer-grid {
		display: grid;
		gap: var(--ajp-space-6);
		grid-template-columns: minmax(0, 1fr);
	}

	/* 560px */
	@media (min-width: 35em) {
		.ajp-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}

	/*
	 * 1100px. Widths follow content density rather than column count: the brand
	 * column carries a logo, a tagline and an address, the two navigation
	 * columns carry short links and need the least, and contact carries the
	 * phone number the footer exists to surface.
	 */
	@media (min-width: 68.75em) {
		.ajp-footer-grid {
			grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.4fr);
			column-gap: var(--ajp-space-8);
			row-gap: var(--ajp-space-6);
		}
	}

	.ajp-footer-col { min-width: 0; }

	/*
	 * Column headings are 12px labels — the same component as every other
	 * eyebrow on the site. The links below them stay sentence case, so they
	 * read as links rather than as more labels.
	 */
	.ajp-footer-col__title {
		margin: 0 0 var(--ajp-space-4);
		color: var(--ajp-color-on-inverse-muted);
		font-size: var(--ajp-text-label);
		font-weight: var(--ajp-weight-semibold);
		letter-spacing: var(--ajp-tracking-label);
		text-transform: uppercase;
	}

	.ajp-footer-col__list {
		display: flex;
		flex-direction: column;
		gap: var(--ajp-space-3);
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: var(--ajp-text-meta);
	}

	.ajp-footer-col__text,
	.ajp-footer-col__address {
		margin: 0;
		max-width: 26rem;
		color: var(--ajp-color-on-inverse-muted);
		font-size: var(--ajp-text-meta);
		font-style: normal;
	}

	/* The tagline carries more weight than tertiary footer text; the address
	 * below it stays quiet. */
	.ajp-footer-col__text { color: var(--ajp-color-on-inverse); }

	.ajp-footer-col__text + .ajp-footer-col__address { margin-block-start: var(--ajp-space-3); }

	/* Explicit line breaks come from the template; this just keeps them
	 * from stretching if the address ever gains a longer line. */
	.ajp-footer-col__address {
		max-width: 18rem;
		line-height: var(--ajp-leading-snug);
	}

	.ajp-footer-logo {
		display: inline-block;
		margin-block-end: var(--ajp-space-4);
	}

	/* The WhatsApp arrow inherits the footer's own colours rather than the
	 * text-action component's paper-surface ones. */
	.ajp-site-footer .ajp-action { color: var(--ajp-color-on-inverse); }
	.ajp-site-footer .ajp-action::after { color: var(--ajp-color-on-inverse-muted); }
	.ajp-site-footer .ajp-action:hover,
	.ajp-site-footer .ajp-action:hover::after { color: var(--ajp-color-on-inverse-heading); }

	.ajp-footer-logo__image {
		width: auto;
		max-height: 3.75rem;
	}

	/* Only when no white asset exists and the black mark is standing in. */
	.ajp-footer-logo__image--inverted { filter: invert(1) brightness(1.9); }

	/*
	 * Phone, email and WhatsApp as one set: the text-action component at one
	 * size and weight, each with its arrow. Tabular figures keep the number
	 * from shifting against the two lines below it.
	 */
	.ajp-footer-contact { gap: var(--ajp-space-4); }

	.ajp-site-footer .ajp-footer-contact .ajp-action {
		color: var(--ajp-color-on-inverse-heading);
		font-variant-numeric: tabular-nums;
	}

	.ajp-site-footer__bar {
		margin-block-start: var(--ajp-space-7);
		padding-block: var(--ajp-space-4);
		border-top: var(--ajp-border-width) solid var(--ajp-color-line-inverse);
	}

	.ajp-site-footer__bar-inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--ajp-space-2) var(--ajp-space-5);
		color: var(--ajp-color-on-inverse-muted);
		font-size: var(--ajp-text-label);
	}

	.ajp-site-footer__copyright { margin: 0; }

	.ajp-site-footer__legal {
		display: flex;
		flex-wrap: wrap;
		gap: var(--ajp-space-5);
	}

	.ajp-site-footer__legal a { color: var(--ajp-color-on-inverse-muted); }

	/* ----------------------------------------------------------------------
	 * Generic archive entry
	 *
	 * Blog index and search results. Not a machinery card: those are the
	 * commercial component and are not borrowed for editorial content.
	 * -------------------------------------------------------------------- */

	.ajp-entry__header { margin-block-end: var(--ajp-space-block); }
	.ajp-entry__meta {
		margin-block-start: var(--ajp-space-2);
		color: var(--ajp-color-muted);
		font-size: var(--ajp-text-meta);
	}
	.ajp-entry__media { margin-block-end: var(--ajp-space-block); }
	.ajp-entry__media img { width: 100%; border-radius: var(--ajp-radius); }

	.ajp-card {
		position: relative;
		padding-block: var(--ajp-space-block);
		border-bottom: var(--ajp-border-width) solid var(--ajp-color-line);
	}

	.ajp-card__media {
		overflow: hidden;
		margin-block-end: var(--ajp-space-4);
		border-radius: var(--ajp-radius);
		aspect-ratio: var(--ajp-card-media-ratio);
	}

	.ajp-card__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.ajp-card__title {
		margin: 0;
		font-size: var(--ajp-text-h3);
	}

	.ajp-card__link { text-decoration: none; }

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

	.ajp-card__excerpt {
		max-width: var(--ajp-measure);
		margin-block-start: var(--ajp-space-3);
	}

	/* ----------------------------------------------------------------------
	 * Form controls
	 *
	 * Element-level as well as class-level, so a form rendered by WordPress or
	 * by a plugin inherits the design without markup changes. This replaced a
	 * 222-line form component of which one class was ever used.
	 * -------------------------------------------------------------------- */

	.ajp-form-control,
	input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="search"], [type="number"], [type="date"]),
	textarea,
	select {
		width: 100%;
		min-height: var(--ajp-control-height);
		padding: var(--ajp-space-2) var(--ajp-space-4);
		border: var(--ajp-border-width) solid var(--ajp-color-line-strong);
		border-radius: var(--ajp-radius);
		background-color: var(--ajp-color-bg);
		color: var(--ajp-color-heading);
		/* 16px minimum, or focusing the field zooms the page on iOS. */
		font-size: var(--ajp-text-body);
		transition: border-color var(--ajp-duration-fast) var(--ajp-ease);
	}

	.ajp-form-control:hover,
	input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="search"]):hover,
	textarea:hover { border-color: var(--ajp-color-heading); }

	textarea { min-height: 8rem; }

	::placeholder { color: var(--ajp-color-muted); }

	.ajp-search-form {
		display: flex;
		gap: var(--ajp-space-2);
	}

	.ajp-search-form__field { flex: 1 1 auto; }
	.ajp-search-form__submit { flex: 0 0 auto; }

	/* ----------------------------------------------------------------------
	 * Enquiry form
	 *
	 * The panel the native form sits in, and the field/label/error primitives
	 * it needs. Deliberately the same surface, rule and radius as every other
	 * panel on the site — a form is not a separate visual language.
	 * -------------------------------------------------------------------- */

	.ajp-enquiry {
		max-width: var(--ajp-measure);
		margin-block-start: var(--ajp-space-8);
		padding: var(--ajp-space-6);
		border: var(--ajp-border-width) solid var(--ajp-color-line);
		border-radius: var(--ajp-radius);
		background-color: var(--ajp-color-surface);
	}

	.ajp-enquiry__title {
		margin: 0;
		font-size: var(--ajp-text-h3);
	}

	.ajp-enquiry__aside {
		margin-block-start: var(--ajp-space-5);
		padding-block-start: var(--ajp-space-5);
		border-top: var(--ajp-border-width) solid var(--ajp-color-line);
		color: var(--ajp-color-muted);
		font-size: var(--ajp-text-meta);
	}

	/* ----------------------------------------------------------------------
	 * Contact details
	 *
	 * A description list, because that is what it is: a label and its value,
	 * four times. No cards, no icons — every value is a working link.
	 * -------------------------------------------------------------------- */

	.ajp-contact__title {
		margin: 0;
		font-size: var(--ajp-text-h3);
	}

	.ajp-contact {
		margin: var(--ajp-space-5) 0 0;
		border-top: var(--ajp-border-width) solid var(--ajp-color-line);
	}

	.ajp-contact__row {
		padding-block: var(--ajp-space-4);
		border-bottom: var(--ajp-border-width) solid var(--ajp-color-line);
	}

	.ajp-contact__label {
		color: var(--ajp-color-muted);
		font-size: var(--ajp-text-label);
		font-weight: var(--ajp-weight-medium);
		letter-spacing: var(--ajp-tracking-label);
		text-transform: uppercase;
	}

	.ajp-contact__value {
		margin: var(--ajp-space-2) 0 0;
		color: var(--ajp-color-heading);
	}

	.ajp-contact__address {
		font-style: normal;
		line-height: var(--ajp-leading-snug);
	}

	@media (min-width: 35em) {
		.ajp-contact__row {
			display: grid;
			grid-template-columns: 8rem minmax(0, 1fr);
			gap: var(--ajp-space-4);
			align-items: baseline;
		}

		.ajp-contact__value { margin-block-start: 0; }
	}

	.ajp-form { margin-block-start: var(--ajp-space-5); }

	.ajp-form__required {
		margin: 0 0 var(--ajp-space-5);
		color: var(--ajp-color-muted);
		font-size: var(--ajp-text-meta);
	}

	/* Off-screen rather than display:none, so a bot that reads CSS still fills
	 * it in. aria-hidden and tabindex in the markup keep people away from it. */
	.ajp-form__trap {
		position: absolute;
		left: -9999px;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}

	.ajp-field + .ajp-field { margin-block-start: var(--ajp-space-5); }

	.ajp-field__label {
		display: block;
		margin-block-end: var(--ajp-space-2);
		color: var(--ajp-color-heading);
		font-weight: var(--ajp-weight-medium);
	}

	/*
	 * The required marker.
	 *
	 * Brand red, because that is the colour this site uses to mean "attend to
	 * this" and the error text beside it already does. Colour is not carrying
	 * the meaning on its own: the asterisk is a shape, the sentence above the
	 * fields says what it means, and the input carries the required attribute
	 * for anything not reading the page by eye.
	 *
	 * Not bolder than the label and not larger. An asterisk set at label weight
	 * is legible at this size, and six of them down a form drawn any heavier
	 * reads as a column of warnings rather than a set of ordinary questions.
	 */
	.ajp-field__required {
		margin-inline-start: 0.15em;
		color: var(--ajp-color-brand-hover);
	}

	.ajp-field__hint,
	.ajp-field__error {
		margin: 0 0 var(--ajp-space-2);
		font-size: var(--ajp-text-meta);
	}

	.ajp-field__hint { color: var(--ajp-color-muted); }

	/*
	 * The error is stated in words above the field it belongs to, so nothing
	 * depends on the colour or on the border alone.
	 */
	.ajp-field__error {
		color: var(--ajp-color-brand-hover);
		font-weight: var(--ajp-weight-medium);
	}

	.ajp-field--invalid .ajp-field__control {
		border-color: var(--ajp-color-brand-hover);
		border-width: 2px;
	}

	/* ----------------------------------------------------------------------
	 * Notices
	 * -------------------------------------------------------------------- */

	/*
	 * A notice is a sentence, not a card. Both of these are rendered inside the
	 * enquiry panel, which is already a bordered, tinted box with a heading — so
	 * drawing a second bordered box inside it was a box in a box, and read as an
	 * administration alert rather than as this site.
	 *
	 * Only the failure is drawn as a box, because it is an interruption: it sits
	 * above a form the visitor still has to use and has to be findable again
	 * after the page has reloaded under them. The confirmation is not an
	 * interruption — it has replaced the form, so it is simply what the panel
	 * says now.
	 */
	.ajp-notice { max-width: var(--ajp-measure); }

	/*
	 * The heading above is rendered by the page, and the gap under it used to be
	 * carried by .ajp-form. A notice replaces the form, so the gap went with it
	 * and the message sat flush against the heading. It belongs to whatever
	 * follows the heading, not to the form specifically.
	 */
	.ajp-enquiry__title + .ajp-notice { margin-block-start: var(--ajp-space-5); }

	.ajp-notice + .ajp-form { margin-block-start: var(--ajp-space-6); }

	.ajp-notice__text {
		margin: 0;
		color: var(--ajp-color-heading);
	}

	.ajp-notice__list {
		margin: var(--ajp-space-3) 0 0;
		padding-inline-start: var(--ajp-space-5);
	}

	.ajp-notice__list li + li { margin-block-start: var(--ajp-space-2); }

	.ajp-notice--error {
		padding: var(--ajp-space-4) var(--ajp-space-5);
		border: var(--ajp-border-width) solid var(--ajp-color-line-strong);
		border-inline-start: 3px solid var(--ajp-color-brand);
		border-radius: var(--ajp-radius);
		background-color: var(--ajp-color-bg);
	}

	/*
	 * Set at lead size: this is the panel's content once the form has gone, and
	 * body size left it looking like a caption for something that was no longer
	 * there. Same size the service blocks and page headers use for the sentence
	 * under a title.
	 */
	.ajp-notice--success .ajp-notice__text { font-size: var(--ajp-text-lead); }

	/* ----------------------------------------------------------------------
	 * Pagination — styles core the_posts_pagination() output.
	 * -------------------------------------------------------------------- */

	.ajp-pagination { margin-block-start: var(--ajp-space-block); }

	.ajp-pagination .nav-links {
		display: flex;
		flex-wrap: wrap;
		gap: var(--ajp-space-2);
	}

	.ajp-pagination .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: var(--ajp-control-height-sm);
		min-height: var(--ajp-control-height-sm);
		padding-inline: var(--ajp-space-2);
		border: var(--ajp-border-width) solid var(--ajp-color-line-strong);
		border-radius: var(--ajp-radius);
		color: var(--ajp-color-heading);
		font-size: var(--ajp-text-meta);
		font-weight: var(--ajp-weight-medium);
		text-decoration: none;
	}

	.ajp-pagination .page-numbers:hover { background-color: var(--ajp-color-surface); }

	.ajp-pagination .page-numbers.current {
		background-color: var(--ajp-color-brand);
		border-color: var(--ajp-color-brand);
		color: var(--ajp-color-brand-contrast);
	}
}