/*
Theme Name: A1 Diagnostics
Theme URI: https://www.a1-diagnostics.com
Author: A1 Diagnostics
Description: Block theme for the A1 Diagnostics revamp. Design tokens live in theme.json — colour, type scale, spacing and radii are defined there, not here. This file is only for what theme.json cannot express.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: a1-diagnostics
Tags: full-site-editing, block-patterns
*/

/* ---------------------------------------------------------------------------
   Only put things here that theme.json genuinely cannot express.
   If you find yourself writing a colour or a font size in this file, it almost
   certainly belongs in theme.json instead.
   ------------------------------------------------------------------------ */

/* The wide-tracked monospace eyebrow — the strongest device in the design.
   theme.json has no concept of a reusable text style, so it lives here. */
/* Green, not grey. The tokens file had these as secondary text; the prototype
   sets every eyebrow on a light ground in British Racing Green (#243918), and
   the prototype is the record for how the page looks. 12.4:1 on cream. */
.a1-eyebrow {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 500;
  letter-spacing: var(--wp--custom--tracking--eyebrow);
  text-transform: uppercase;
  color: var(--wp--preset--color--green);
}

/* On a dark band the green would disappear, so those carry the on-dark tier. */
.has-ink-background-color .a1-eyebrow,
.has-green-background-color .a1-eyebrow,
.a1-hero .a1-eyebrow {
  color: var(--wp--preset--color--on-dark-secondary);
}

/* Display type sits above h1 in the scale and is applied by class, because
   not every page's largest heading should be display size. */
.a1-display {
  font-size: var(--wp--preset--font-size--display);
  line-height: 1.06;
  letter-spacing: var(--wp--custom--tracking--display);
  font-weight: 600;
}

/* Cap running text. Block layout controls width, not measure. */
.a1-measure { max-width: var(--wp--custom--measure); }

/* Fault-code tables: 96 pages depend on these two rules.
   Tabular figures keep the code column aligned; the mono face keeps 0/O and
   1/l distinguishable for someone matching a code off a reader. */
.a1-code-table { font-variant-numeric: tabular-nums; }
.a1-code-table .a1-code {
  font-family: var(--wp--preset--font-family--mono);
  font-weight: 500;
  letter-spacing: .03em;
}

/* Wide content must scroll inside its own container, never the page body. */
.a1-scroll-x { overflow-x: auto; }

/* The prototype has no focus states at all. This is the floor, not the finish. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--green);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   FAULT-CODE PAGES  (119 of them)

   The body copy on these pages exists in three different shapes, none of which
   we control and none of which we want to hand-edit 119 times:

     A   <p><b>P0430</b> Defective catalytic converter…</p>
     B   <ul><li><b>U0301</b> &ndash; Software incompatibility…</li></ul>
     C   prose with no per-code markup at all

   The rules below make A and B render as a consistent code list without any
   content being touched, and leave C alone.
   ------------------------------------------------------------------------ */

/* --- the codes strip, derived from the page title at render time --- */
.a1-codes {
  margin: 0 0 var(--wp--preset--spacing--30);
  padding: 0 0 var(--wp--preset--spacing--20);
  border-bottom: 1px solid var(--wp--preset--color--rule);
}
.a1-codes__label { margin: 0 0 10px; }
.a1-codes__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.a1-codes__item {
  font-family: var(--wp--preset--font-family--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--wash);
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: var(--wp--custom--radius--pill);
  padding: 5px 13px;
  white-space: nowrap;
}

/* --- shapes A and B: a bold code leading a paragraph or list item ---
   The a1-code-row class is applied server-side by a1_mark_code_rows(), which
   checks the text actually looks like a code. A CSS :has() selector would also
   catch the address block at the foot of these pages, whose first bold is
   "Opening Times". */
.a1-fault-body ul { list-style: none; padding: 0; margin: 0 0 var(--wp--preset--spacing--30); }

.a1-fault-body .a1-code-row {
  display: grid;
  grid-template-columns: minmax(5.5em, max-content) 1fr;
  gap: 4px 18px;
  align-items: baseline;
  padding: 11px 0;
  margin: 0;
  border-top: 1px solid var(--wp--preset--color--rule);
}

.a1-fault-body .a1-code-row > b:first-child {
  font-family: var(--wp--preset--font-family--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--wp--preset--color--ink);
}

/* Below 640px the columns stack, so the code sits above its description rather
   than being squeezed into a sliver. Someone reading this has usually just
   plugged in a reader and is standing next to the car. */
@media (max-width: 640px) {
  .a1-fault-body .a1-code-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

.a1-fault-body h2,
.a1-fault-body h3 { margin-top: var(--wp--preset--spacing--40); }

/* Legacy layout tables on the older pages, wrapped by a1_wrap_tables(). */
.a1-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.a1-scroll-x > table { min-width: 100%; border-collapse: collapse; }
.a1-scroll-x > table td { padding: 8px; vertical-align: top; }

/* ---------------------------------------------------------------------------
   Media. WordPress ships no max-width rule of its own for content images, and
   these legacy pages embed full-size uploads — one is 1791px wide, which drags
   the whole page sideways on any normal screen.
   ------------------------------------------------------------------------ */
img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------------
   FAULT-CODE INDEX
   Replaces the live site's grids of thumbnail images, which cannot be scanned,
   searched, or read on a phone.
   ------------------------------------------------------------------------ */

.a1-index__search {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--wp--preset--color--cream);
  padding: var(--wp--preset--spacing--20) 0;
  margin-bottom: var(--wp--preset--spacing--30);
  border-bottom: 1px solid var(--wp--preset--color--rule);
}
.a1-index__search label { display: block; margin-bottom: 8px; }

.a1-index__input {
  width: 100%;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--md);
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--wash);
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: var(--wp--custom--radius--sm);
  padding: 12px 14px;
}
.a1-index__input:focus-visible {
  outline: 2px solid var(--wp--preset--color--green);
  outline-offset: 1px;
}
.a1-index__count {
  margin: 8px 0 0;
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-secondary);
  font-variant-numeric: tabular-nums;
}

.a1-index__group { margin-bottom: var(--wp--preset--spacing--40); }

.a1-index__marque {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: var(--wp--preset--font-size--lg);
  letter-spacing: var(--wp--custom--tracking--title);
  margin: 0 0 var(--wp--preset--spacing--20);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--wp--preset--color--ink);
}
.a1-index__n {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--wp--preset--color--text-tertiary);
}

.a1-index__list { list-style: none; margin: 0; padding: 0; }

.a1-index__row {
  padding: 14px 0;
  border-bottom: 1px solid var(--wp--preset--color--rule);
}
.a1-index__link {
  display: block;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  letter-spacing: var(--wp--custom--tracking--title);
  margin-bottom: 8px;
}
.a1-index__link:hover { color: var(--wp--preset--color--green); }

.a1-index__codes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Reuses .a1-codes__item from the reference-page strip, at a smaller size. */
.a1-index__codes .a1-codes__item {
  font-size: 11px;
  padding: 3px 9px;
}

.a1-index__empty {
  padding: var(--wp--preset--spacing--30);
  background: var(--wp--preset--color--wash);
  border-radius: var(--wp--custom--radius--md);
  color: var(--wp--preset--color--text-secondary);
  font-size: var(--wp--preset--font-size--sm);
}

/* ---------------------------------------------------------------------------
   PER-MAKE CODE INDEX (design 3a, a1-mcodes)
   The BMW, Audi, Skoda and Mercedes index pages: one row per code, grouped by
   system, code first. The rows live in page content, so the legacy
   .entry-content rules that force inherit on span/li/p are overridden here.
   ------------------------------------------------------------------------ */
.a1-mcodes { margin-top: var(--wp--preset--spacing--30); }
/* Not sticky like the library's bar: the header already holds the top. */
.a1-mcodes .a1-mcodes__search { position: static; }

.a1-mcodes__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.a1-mcodes__chip {
  font: inherit;
  font-size: 13px;
  color: var(--wp--preset--color--ink);
  background: transparent;
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: var(--wp--custom--radius--pill);
  padding: 6px 14px;
  cursor: pointer;
}
.a1-mcodes__chip:hover { border-color: var(--wp--preset--color--ink); }
.a1-mcodes__chip[aria-pressed="true"] {
  background: var(--wp--preset--color--ink);
  border-color: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--cream);
}
.a1-mcodes__chip:focus-visible { outline: 2px solid var(--wp--preset--color--green); outline-offset: 2px; }

.a1-mcodes__group { margin-top: var(--wp--preset--spacing--40); }
.a1-fault-body h2.a1-mcodes__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--wp--preset--color--ink);
  font-size: 21px;
}
.entry-content .a1-mcodes__n {
  font-family: var(--wp--preset--font-family--mono) !important;
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--wp--preset--color--text-tertiary);
}
.entry-content p.a1-mcodes__about {
  margin: 0 0 6px;
  font-size: 15px !important;
  color: var(--wp--preset--color--text-secondary);
}

.a1-fault-body ul.a1-mcodes__list { list-style: none; margin: 0; padding: 0; }
.a1-mcodes__list > li { margin: 0; padding: 0; border-bottom: 1px solid var(--wp--preset--color--rule); }
.a1-mcodes__list > li::before, .a1-mcodes__list > li::marker { content: none; }

.entry-content .a1-mcodes__list a {
  display: grid;
  grid-template-columns: 6.2em minmax(0, 1fr) auto;
  column-gap: 20px;
  align-items: baseline;
  padding: 11px 8px;
  margin: 0 -8px;
  border-radius: var(--wp--custom--radius--sm);
  color: var(--wp--preset--color--ink) !important;
  text-decoration: none !important;
}
.entry-content .a1-mcodes__list a:hover { background: var(--wp--preset--color--wash); }
.entry-content .a1-mcodes__list a:hover .a1-mcodes__code { color: var(--wp--preset--color--green); text-decoration: underline; }
.entry-content .a1-mcodes__list a:focus-visible { outline: 2px solid var(--wp--preset--color--green); outline-offset: -2px; }

.entry-content .a1-mcodes__code {
  font-family: var(--wp--preset--font-family--mono) !important;
  font-size: 15px !important;
  font-weight: 500;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
}
.entry-content .a1-mcodes__desc { font-size: 15px !important; }
.entry-content .a1-mcodes__sys {
  font-size: 13px !important;
  color: var(--wp--preset--color--text-secondary);
  text-align: right;
}
/* Audi's code pages give causes rather than a meaning, so its rows carry no
   description: the system label takes the second column. */
.entry-content .a1-mcodes__list--nodesc a { grid-template-columns: 6.2em minmax(0, 1fr); }
.entry-content .a1-mcodes__list--nodesc .a1-mcodes__sys { text-align: left; font-size: 15px !important; }

@media (max-width: 640px) {
  .entry-content .a1-mcodes__list a { grid-template-columns: 5.6em minmax(0, 1fr); row-gap: 2px; }
  .entry-content .a1-mcodes__sys { grid-column: 2; grid-row: 1; text-align: left; }
  .entry-content .a1-mcodes__desc { grid-column: 2; grid-row: 2; }
}

/* ---------------------------------------------------------------------------
   Service pages
   ------------------------------------------------------------------------- */

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

/* The column fills its track; the measure is applied to the text inside it
   instead. That way photographs and video use the full width they were shot at,
   while running text stays at a readable line length — capping the whole column
   would have left a 300px dead gap between the article and the card. */
.a1-service-body {
	min-width: 0;
}

.a1-service-body p,
.a1-service-body h2,
.a1-service-body h3,
.a1-service-body h4,
.a1-service-body ul,
.a1-service-body ol,
.a1-service-body blockquote {
	max-width: min(var(--wp--custom--measure), 100%);
}

.a1-service-body h2 {
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--xl);
}

.a1-service-body h3,
.a1-service-body h4 {
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--lg);
}

/* Visual Composer set type inline on nearly every element — Arial for body,
   Georgia and 'arial black' for headings, at fixed pixel sizes. The colour is
   stripped in PHP; the families and sizes are overridden here, across all
   legacy content rather than page type by page type, so the theme's typography
   actually reaches the 126 pages that need it most. */
.entry-content p,
.entry-content span,
.entry-content li,
.entry-content strong,
.entry-content b,
.entry-content div[class^="vce"],
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	font-family: inherit !important;
}

.entry-content p,
.entry-content span,
.entry-content li,
.entry-content strong,
.entry-content b {
	font-size: inherit !important;
}

/* <font> survives on 41 imported pages, carrying face, size and colour as HTML
   attributes. Two of them set colour to white and yellow, which on a cream
   ground is either invisible or unreadable — the same class of problem as the
   inline white text a1_strip_invisible_text() removes, but expressed as
   attributes rather than CSS, so that filter never saw it. Presentational
   attributes lose to author CSS, so neutralising them here is enough. */
.entry-content font {
	font-family: inherit !important;
	font-size: inherit !important;
	color: inherit !important;
}

/* Headings keep the theme's scale rather than whatever pixel size was typed.
   Scoped away from our own components, which set their own sizes and would
   otherwise be overridden by a rule meant for legacy markup. */
.entry-content h2:not([class*="a1-"]) { font-size: var(--wp--preset--font-size--xl) !important; }
.entry-content h3:not([class*="a1-"]) { font-size: var(--wp--preset--font-size--lg) !important; }
.entry-content h4:not([class*="a1-"]) { font-size: var(--wp--preset--font-size--md) !important; }

/* h5 and h6 have no step of their own — the scale stops at 15px, and a
   subheading smaller than body copy is not a heading, it is small print. Both
   sit at body size and lean on weight instead. Without this they inherit the
   browser's 0.83em/0.67em and land at 12.5px and 10.05px. */
.entry-content h5:not([class*="a1-"]),
.entry-content h6:not([class*="a1-"]) {
	font-size: var(--wp--preset--font-size--sm) !important;
	font-weight: 600;
}

.a1-service-body p {
	margin: 0 0 1.1em;
	color: var(--wp--preset--color--text-secondary);
}

/* Visual Composer wrapped images in three nested divs with no width limit, so
   max-width on the <img> alone resolves against an 1800px parent and the page
   scrolls sideways. Constraining every VC wrapper is what actually stops it. */
.a1-service-body [class^="vce-"],
.a1-service-body [class*=" vce-"] {
	max-width: 100%;
}

.a1-service-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--md);
}

/* --- facts card --- */

.a1-facts {
	position: sticky;
	top: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--wash);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--30);
}

.a1-facts__row + .a1-facts__row {
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--rule-soft);
}

.a1-facts .a1-eyebrow {
	margin: 0 0 6px;
	color: var(--wp--preset--color--text-tertiary);
}

.a1-facts__price {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: var(--wp--custom--tracking--title);
	font-variant-numeric: tabular-nums;
}

/* A quote-only job is not a missing price, so it is set as a statement rather
   than as an absence. */
.a1-facts__price--quote {
	font-size: var(--wp--preset--font-size--md);
	letter-spacing: var(--wp--custom--tracking--body);
}

.a1-facts__tel {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--md);
	letter-spacing: -0.01em;
}

.a1-facts__tel a {
	text-decoration: none;
}

.a1-facts__addr {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-secondary);
	line-height: 1.5;
}

.a1-facts__note {
	margin: 6px 0 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-tertiary);
	line-height: 1.45;
}

.a1-facts__cta {
	display: block;
	margin-top: var(--wp--preset--spacing--30);
	padding: 12px 20px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--cream);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.a1-facts__cta:hover,
.a1-facts__cta:focus-visible {
	background: var(--wp--preset--color--green-hover);
	color: var(--wp--preset--color--cream);
}

/* --- related services --- */

.a1-related {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--rule);
	max-width: var(--wp--custom--measure);
}

.a1-related__title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--md);
	letter-spacing: var(--wp--custom--tracking--title);
}

.a1-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
}

.a1-related__list a {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--xs);
	text-decoration: none;
}

.a1-related__list a:hover,
.a1-related__list a:focus-visible {
	border-color: var(--wp--preset--color--green);
	color: var(--wp--preset--color--green);
}

@media (max-width: 900px) {
	.a1-service-layout {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--40);
	}

	/* On a phone the cost and the phone number are what the visitor came for,
	   so the card goes above the article rather than below it. */
	.a1-facts {
		position: static;
		order: -1;
	}

	.a1-service-layout {
		display: flex;
		flex-direction: column;
		/* The grid above sets align-items:start, which in a column flexbox means
		   the cross axis — every child would shrink to its own content width and
		   the measure cap would then push the body wider than the screen. */
		align-items: stretch;
	}
}

/* Both files these players point at return 404 from the contractor's domain,
   so the element is a black box until someone re-uploads them. The aspect ratio
   at least stops it collapsing to the browser's default 150px strip, and being
   visibly broken is better than being invisibly broken. */
.a1-video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--ink);
}

/* ---------------------------------------------------------------------------
   Embedded enquiry form

   Every one of these pages embeds the same Ninja Form, and the plugin writes
   its colours into the page as a <style> block: a white form background with
   white field labels. On the live site the old theme happens to overrule that,
   which is the only reason the labels are readable today. Nothing guarantees
   the next theme will, so the colours are pinned here instead of left to luck.

   The proper repair is in the plugin's own appearance settings, once, rather
   than in CSS — but this holds until someone does that.

   Originally scoped to .a1-service-body, which meant only the 240 service
   pages got palette forms. A colour sweep found the contact page, the 119
   fault-code pages and every post still rendering the plugin's own #050505
   text, #C4C4C4 borders and #F7F7F7 fills. The scope is dropped so one form
   looks the same everywhere it appears.
   ------------------------------------------------------------------------- */

.nf-form-cont {
	background-color: transparent !important;
	color: var(--wp--preset--color--ink) !important;
}

.nf-field-label label,
.nf-form-title h3,
.nf-row {
	color: var(--wp--preset--color--ink) !important;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
}

.nf-field-element input:not([type="button"]):not([type="submit"]),
.nf-field-element textarea {
	width: 100%;
	padding: 10px 14px;
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--sm);
	font: inherit;
	color: var(--wp--preset--color--ink);
}

.nf-field-element input[type="button"],
.nf-field-element input[type="submit"] {
	padding: 12px 24px;
	background: var(--wp--preset--color--green) !important;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--cream) !important;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	cursor: pointer;
}

/* The opening paragraph of a service page, set one step up so the answer the
   visitor came for is legible before they commit to reading. */
.a1-lede {
	max-width: 60ch;
	color: var(--wp--preset--color--ink);
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Homepage
   ------------------------------------------------------------------------- */

/* --- hero --- */

/* The band is the positioning context; the photograph and the scrim sit behind
   the content as two absolutely positioned layers. */
.a1-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: 480px;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--50);
}

/* The design draws the desktop hero at 2.57:1, expressed here as a height
   rather than an aspect-ratio.

   aspect-ratio would be the obvious way to write it and is the wrong one: on a
   box whose width is auto, the ratio can resolve the other way round and derive
   the WIDTH from the content height. This hero's content is taller than
   width/2.57, so the box sized itself to 480 × 2.57 = 1234px and pushed the
   whole page into a horizontal scroll. A min-height in vw cannot do that.

   The width is left alone on purpose too: alignfull works by letting the width
   resolve to auto and pulling the band out of the content gutter with negative
   margins, and a width:100% here made the hero 48px narrower than every other
   band.

   Below tablet the ratio is dropped entirely: at 390px wide, 2.57:1 is a 152px
   strip, too thin to read as a photograph. */
@media (min-width: 900px) {
	.a1-hero {
		min-height: min(38.9vw, 620px);
	}
}

.a1-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
}

.a1-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* A flat 70% dim measured 3.9:1 for body text against the brightest part of the
   photograph — under AA. A scrim weighted toward the text side holds 6.1:1 for
   the headline and 4.8:1 for the caption row, and still lets the workshop show
   through on the right. */
.a1-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		100deg,
		rgba(55, 63, 67, 0.88) 0%,
		rgba(55, 63, 67, 0.82) 38%,
		rgba(55, 63, 67, 0.44) 70%,
		rgba(55, 63, 67, 0.18) 100%
	);
}

.a1-hero__inner {
	width: 100%;
}

.a1-hero__inner > * {
	margin-block: 0;
}

.a1-hero .a1-display {
	max-width: 16ch;
	margin-top: 0;
	letter-spacing: var(--wp--custom--tracking--display);
	text-wrap: balance;
}

.a1-hero__sub {
	max-width: 48ch;
	margin-top: var(--wp--preset--spacing--20);
}

.a1-hero__actions {
	margin-top: var(--wp--preset--spacing--30);
}

/* Three facts, hairline-separated. Not cards — they are a caption to the
   headline, and boxing them would give them more weight than the CTA. */
.a1-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid rgba(244, 241, 234, 0.22);
}

.a1-hero__facts p {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.a1-hero__facts strong {
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--title);
	color: var(--wp--preset--color--cream);
	font-variant-numeric: tabular-nums;
}

/* 0.82, not 0.70: at 13px this needs 4.5:1 and 0.70 measured 4.0:1 against the
   scrim above. */
.a1-hero__facts span {
	font-size: var(--wp--preset--font-size--xs);
	color: rgba(244, 241, 234, 0.82);
}

/* --- section bands --- */

.a1-band > .a1-eyebrow {
	margin-bottom: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--text-tertiary);
}
/* The rule above ties with the dark-ground eyebrow rule near the top and wins
   by order, which left the Remote hero eyebrow ink on its own ink band (1:1). */
:is(.has-ink-background-color, .has-green-background-color).a1-band > .a1-eyebrow {
	color: var(--wp--preset--color--on-dark-secondary);
}

/* WordPress' constrained layout centres every direct child with
   `margin-left: auto !important`, so a max-width heading sits in the middle of
   the column. Overriding it needs !important back — that is core's choice, not
   a specificity accident on our side. */
.a1-band > h2,
.a1-band > .a1-measure,
.a1-remote h2 {
	margin-inline: 0 auto !important;
}

.a1-band > h2 {
	max-width: 22ch;
	margin-top: 0;
	text-wrap: balance;
}

.a1-band__more {
	margin-top: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--text-tertiary);
}

.a1-band__more a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- reviews --- */

.a1-quotes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}

@media (max-width: 839px) {
	.a1-quotes {
		grid-template-columns: minmax(0, 1fr);
	}
}

.a1-quote {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--wash);
	border-radius: var(--wp--custom--radius--lg);
}

/* Gold is allowed on review stars and on the award mark, nowhere else. The
   text stays in the DOM for screen readers; the glyphs are drawn on top. */
.a1-stars {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: 0;
	color: var(--wp--preset--color--gold);
}

.a1-stars::before {
	content: "★★★★★";
	font-size: 17px;
	letter-spacing: 3px;
}

.a1-quote__body {
	margin: 0;
	line-height: 1.55;
	letter-spacing: var(--wp--custom--tracking--title);
}

.a1-quote__body::before {
	content: open-quote;
}

.a1-quote__body::after {
	content: close-quote;
}

.a1-quote__by {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--rule-soft);
}

.a1-quote__face {
	flex: 0 0 auto;
	margin: 0;
}

.a1-quote__face img {
	display: block;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
}

.a1-quote__by p {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.a1-quote__by span {
	color: var(--wp--preset--color--text-tertiary);
}

/* --- remote cloud --- */

.a1-remote h2 {
	max-width: 18ch;
}

.a1-remote__line {
	letter-spacing: var(--wp--custom--tracking--title);
}

.a1-remote__shot img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--lg);
}

/* --- team --- */

.a1-team {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--40);
}

@media (max-width: 1099px) {
	.a1-team {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 559px) {
	.a1-team {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.a1-person figure {
	margin: 0;
}

.a1-person img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md);
	filter: grayscale(1);
	transition: filter 160ms ease;
}

.a1-person:hover img {
	filter: grayscale(0);
}

@media (prefers-reduced-motion: reduce) {
	.a1-person img {
		transition: none;
	}
}

.a1-person p {
	margin: var(--wp--preset--spacing--10) 0 0;
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.a1-person span {
	color: var(--wp--preset--color--text-tertiary);
}

/* --- hero at narrow widths --- */

@media (max-width: 899px) {
	.a1-hero .a1-display {
		max-width: none;
	}

	.a1-hero__facts {
		gap: var(--wp--preset--spacing--30);
	}
}

/* On a phone the headline runs the full width of the screen, so a scrim
   weighted to one side leaves the end of each line over bare photograph. Below
   tablet it becomes vertical instead, darkest where the text sits. */
@media (max-width: 899px) {
	.a1-hero::after {
		background: linear-gradient(
			180deg,
			rgba(55, 63, 67, 0.70) 0%,
			rgba(55, 63, 67, 0.86) 40%,
			rgba(55, 63, 67, 0.93) 100%
		);
	}
}

/* The legacy promo strips, freed from their layout tables. */
.a1-banners {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--30) 0;
}

.a1-banners__item {
	flex: 1 1 200px;
	max-width: 320px;
}

.a1-banners img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--md);
}

/* ---------------------------------------------------------------------------
   Homepage — section furniture

   Composition follows the prototype (A1 Diagnostics v2.dc.html); colour, type
   and shape follow the tokens file, which is the authority for those. Where the
   two differ the difference is deliberate and noted at the point it occurs.
   ------------------------------------------------------------------------- */

/* The section rhythm lives here, once, so a new band cannot be built without
   it. clamp(48px, 7vw, 88px) — a phone gets 48px, not the 88px that a fixed
   spacing step was giving it. */
.a1-band {
	padding-block: var(--wp--custom--section-y);
}

/* A band that follows straight on from the one above and shares its ground. */
.a1-band--tight {
	padding-block: 0 var(--wp--custom--section-y);
}

.a1-band__sub {
	max-width: 52ch;
	margin: var(--wp--preset--spacing--10) 0 0;
	color: var(--wp--preset--color--text-secondary);
}

/* Heading on the left, a pill link on the right, baseline-aligned. */
.a1-band__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	flex-wrap: wrap;
}

.a1-band__head h2 {
	margin: var(--wp--preset--spacing--10) 0 0;
	max-width: 22ch;
	text-wrap: balance;
}

.a1-band__action {
	margin: 0;
	flex: 0 0 auto;
}

.a1-band__action a {
	display: inline-block;
	padding: 12px 22px;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-decoration: none;
}

.a1-band__action a:hover,
.a1-band__action a:focus-visible {
	border-color: var(--wp--preset--color--ink);
}

/* --- quick cards: six across, then three, then two --- */

.a1-quick {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
}

@media (max-width: 1099px) {
	.a1-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
	.a1-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.a1-quick__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--md);
	transition: border-color 160ms ease, transform 160ms ease;
}

.a1-quick__card:hover,
.a1-quick__card:focus-within {
	border-color: var(--wp--preset--color--ink);
	transform: translateY(-3px);
}

.a1-quick__card figure { margin: 0; }

.a1-quick__card img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm);
}

.a1-quick__card p {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	line-height: 1.35;
}

.a1-quick__card a {
	text-decoration: none;
	font-size: var(--wp--preset--font-size--md);
	letter-spacing: var(--wp--custom--tracking--title);
}

.a1-quick__card a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.a1-quick__card span {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-secondary);
}

/* --- why choose us: three cards on the wash --- */

.a1-why {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--40);
}

@media (max-width: 899px) {
	.a1-why { grid-template-columns: minmax(0, 1fr); }
}

.a1-why__card {
	background: var(--wp--preset--color--cream);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--30);
}

.a1-why__card h3 {
	margin: 0;
	text-wrap: balance;
}

.a1-why__card p {
	margin: var(--wp--preset--spacing--10) 0 0;
	color: var(--wp--preset--color--text-secondary);
}

/* --- manufacturer grid: nine across --- */

.a1-brands {
	display: grid;
	grid-template-columns: repeat(9, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--10);
	margin-top: var(--wp--preset--spacing--40);
}

@media (max-width: 1099px) {
	.a1-brands { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
	.a1-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.a1-brands p { margin: 0; }

.a1-brands a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 88px;
	padding: 8px;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--md);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	color: var(--wp--preset--color--text-secondary);
	transition: border-color 160ms ease, color 160ms ease;
}

.a1-brands a:hover,
.a1-brands a:focus-visible {
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

/* --- equipment feature panel --- */

/* The one large panel on the page, so it takes the 22px radius the token system
   reserves for exactly this. The prototype draws it at 26px; the four-radius
   scale is a deliberate simplification of the prototype's seventeen. */
.a1-panel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--wash);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--lg);
}

@media (max-width: 899px) {
	.a1-panel {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--30);
		padding: var(--wp--preset--spacing--30);
	}
}

.a1-panel__title {
	margin: var(--wp--preset--spacing--10) 0 0;
	line-height: 1.08;
	text-wrap: balance;
}

.a1-tech {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--10);
	margin-top: var(--wp--preset--spacing--30);
}

@media (max-width: 599px) {
	.a1-tech { grid-template-columns: minmax(0, 1fr); }
}

.a1-tech p {
	position: relative;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--md);
}

.a1-tech a {
	text-decoration: none;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: var(--wp--custom--tracking--title);
}

.a1-tech a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.a1-tech span {
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
	color: var(--wp--preset--color--text-secondary);
}

.a1-panel__shot { margin: 0; }

.a1-panel__shot img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md);
}

/* --- rating headline --- */

.a1-rating {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	flex-wrap: wrap;
}

.a1-rating__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--heading);
}

/* The stars are gold; the figure beside them is ink. Gold at 2.74:1 on cream is
   a glyph colour, never a text colour. */
.a1-rating__stars { margin: 0; }

.a1-rating__stars::before { font-size: 20px; }

/* --- latest advice --- */

.a1-advice {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}

@media (max-width: 899px) {
	.a1-advice { grid-template-columns: minmax(0, 1fr); }
}

.a1-advice__card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}

.a1-advice__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md);
}

.a1-advice__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	letter-spacing: var(--wp--custom--tracking--title);
	text-wrap: balance;
}

.a1-advice__title a { text-decoration: none; }

.a1-advice__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-secondary);
}

.a1-advice__meta {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--text-tertiary);
}

/* --- FAQ --- */

.a1-faq {
	max-width: var(--wp--custom--measure-narrow);
	margin-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--rule);
}

.a1-faq__item {
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.a1-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20) 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--title);
	cursor: pointer;
	list-style: none;
}

.a1-faq__item summary::-webkit-details-marker { display: none; }

.a1-faq__item summary::after {
	content: "+";
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--green);
}

.a1-faq__item[open] summary::after { content: "−"; }

.a1-faq__item p {
	margin: 0 0 var(--wp--preset--spacing--20);
	max-width: var(--wp--custom--measure);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-secondary);
}

/* --- hero: the trade line, then the address line, under the buttons --- */

.a1-hero__trade {
	margin-top: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--on-dark-secondary);
}

.a1-hero__trade a {
	color: var(--wp--preset--color--on-dark);
	text-decoration: underline;
	text-decoration-color: rgba(244, 241, 234, 0.4);
	text-underline-offset: 4px;
}

.a1-hero__trade a:hover,
.a1-hero__trade a:focus-visible { text-decoration-color: currentColor; }

.a1-hero__where {
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid rgba(244, 241, 234, 0.22);
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: 0.02em;
}

/* WordPress applies blockGap as `margin-block-start` on every child after the
   first. Inside a grid or flex container that is wrong twice over: the gap
   property already handles spacing, and the stray margin pushes every item
   except the first one down, so row one sits 24px out of line with the rest.
   Zeroed for each of the layouts that manage their own spacing. */
.a1-quick > *,
.a1-why > *,
.a1-brands > *,
.a1-tech > *,
.a1-advice > *,
.a1-quotes > *,
.a1-hero__facts > *,
.a1-related__list > *,
.a1-panel > *,
.a1-faq > * {
	margin-block: 0;
}

/* The same core `margin-left: auto !important` that centres constrained
   children catches any left-aligned block given a max-width. */
.a1-band__sub,
.a1-faq,
.a1-article__title,
.a1-band > .a1-toc,
.a1-article__body > *,
.a1-article__body .entry-content > * {
	margin-inline: 0 auto !important;
}

/* Cards size to their content; nothing here should be clipped. */
.a1-why__card,
.a1-quick__card {
	min-width: 0;
	overflow: visible;
}

/* ---------------------------------------------------------------------------
   Article pages
   ------------------------------------------------------------------------- */

.a1-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--text-tertiary);
}

.a1-crumbs a { text-decoration: none; color: var(--wp--preset--color--green); }
.a1-crumbs [aria-current] {
	color: var(--wp--preset--color--text-tertiary);
	max-width: 34ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.a1-crumbs span { color: var(--wp--preset--color--text-tertiary); }

.a1-article__title {
	margin: var(--wp--preset--spacing--20) 0 0;
	max-width: 24ch;
	text-wrap: balance;
}

.a1-postmeta {
	margin: var(--wp--preset--spacing--10) 0 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-secondary);
}

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

.a1-article__body {
	min-width: 0;
}

/* The article column is capped at the narrow measure the spec reserves for
   running prose, not the 68ch used for reference pages. */
.a1-article__body > p,
.a1-article__body > ul,
.a1-article__body > ol,
.a1-article__body > h2,
.a1-article__body > h3,
.a1-article__body > blockquote,
.a1-article__body .entry-content > p,
.a1-article__body .entry-content > ul,
.a1-article__body .entry-content > ol,
.a1-article__body .entry-content > h2,
.a1-article__body .entry-content > h3 {
	max-width: min(var(--wp--custom--measure), 100%);
}

.a1-article__body h2 {
	margin-top: var(--wp--preset--spacing--40);
	scroll-margin-top: var(--wp--preset--spacing--40);
}

.a1-article__body h3 { margin-top: var(--wp--preset--spacing--30); }

.a1-article__body p { color: var(--wp--preset--color--text-secondary); }

.a1-article__hero img {
	width: 100%;
	border-radius: var(--wp--custom--radius--md);
}

.a1-article__rail {
	position: sticky;
	top: var(--wp--preset--spacing--30);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.a1-toc__list {
	margin: var(--wp--preset--spacing--10) 0 0;
	padding: 0 0 0 1.4em;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
}

.a1-toc__list li { margin-bottom: 8px; }
.a1-toc__list a { text-decoration: none; color: var(--wp--preset--color--text-secondary); }
.a1-toc__list a:hover { color: var(--wp--preset--color--green); }

.a1-railcta {
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--wash);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--md);
}

.a1-railcta h2 { margin: 0; letter-spacing: var(--wp--custom--tracking--title); }
.a1-railcta p { margin: var(--wp--preset--spacing--10) 0 0; color: var(--wp--preset--color--text-secondary); }

.a1-railcta__tel a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--md);
	text-decoration: none;
	letter-spacing: -0.01em;
}

.a1-railcta .wp-block-buttons { margin-top: var(--wp--preset--spacing--20); }

@media (max-width: 899px) {
	.a1-article__layout {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--40);
	}

	.a1-article__rail { position: static; order: -1; }
}

/* --- post grids on the index and archives --- */

.a1-postgrid .a1-advice {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 1099px) {
	.a1-postgrid .a1-advice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
	.a1-postgrid .a1-advice { grid-template-columns: minmax(0, 1fr); }
}

.a1-postgrid .a1-advice > li {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	margin: 0;
}

.a1-postgrid .a1-advice__media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md);
}

.a1-postgrid .a1-advice__title,
.a1-postgrid .a1-advice__excerpt,
.a1-postgrid .a1-advice__meta {
	margin: 0 !important;
}

.a1-postgrid .a1-advice__excerpt .wp-block-post-excerpt__more-text { display: none; }

.a1-pagination {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--rule);
	font-size: var(--wp--preset--font-size--xs);
}

.a1-pagination a,
.a1-pagination .page-numbers {
	text-decoration: none;
	padding: 6px 10px;
	border-radius: var(--wp--custom--radius--sm);
}

.a1-pagination .page-numbers.current {
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--cream);
}

/* --- manufacturer hub --- */

.a1-band--tightish { padding-block: var(--wp--preset--spacing--40); }

.a1-jobs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--30);
}

@media (max-width: 1099px) { .a1-jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .a1-jobs { grid-template-columns: minmax(0, 1fr); } }

.a1-jobs__kind {
	margin: 0 0 var(--wp--preset--spacing--10);
	padding-bottom: 8px;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--green);
}

.a1-jobs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.45;
}

.a1-jobs__list li { margin-bottom: 10px; }
.a1-jobs__list a { text-decoration: none; color: var(--wp--preset--color--text-secondary); }
.a1-jobs__list a:hover { color: var(--wp--preset--color--green); }

.a1-marque__body .entry-content > * { max-width: min(var(--wp--custom--measure), 100%); }
.a1-marque__body p { color: var(--wp--preset--color--text-secondary); }
.a1-marque__body [class^="vce-"],
.a1-marque__body [class*=" vce-"] { max-width: 100%; }
.a1-marque__body img { max-width: 100%; height: auto; border-radius: var(--wp--custom--radius--md); }
/* Converted pages hold each photo row, card grid and post list as its own block.
   The reading measure above is for prose; those run the full content width, or
   the body sits in a 691px column with the right half of the page empty. */
.a1-marque__body .entry-content > :is(.wp-block-columns, .wp-block-latest-posts, .wp-block-image, .wp-block-gallery, .wp-block-video, .wp-block-embed, .wp-block-group, .wp-block-table, figure) { max-width: 100%; }
/* Card rows (three or more across): each card's lead photo fills the column at
   one shape, so the headings under them line up. The source photos run from
   270px to 800px wide at mixed ratios. Two-column rows keep their natural
   shape - they hold portrait certificates and the award trophy. */
.a1-marque__body .wp-block-columns:has(> .wp-block-column:nth-child(3)) > .wp-block-column > .wp-block-image:first-child img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
/* The card titles came across as h3, h4 and h5 side by side in one row; the
   levels stay as written, the size is one. !important because the legacy
   heading scale (.entry-content h3/h4/h5 above) is itself !important. */
.a1-marque__body .wp-block-columns:has(> .wp-block-column:nth-child(3)) > .wp-block-column > :is(h3, h4, h5, h6) {
	font-size: var(--wp--preset--font-size--md) !important;
	font-weight: 600;
	line-height: 1.3;
}

/* Recent posts (converted posts grids): one photo shape so the titles line up. */
.wp-block-latest-posts__featured-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
/* Recent posts: the date sits on the type scale. */
.wp-block-latest-posts__post-date {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-secondary);
}

/* --- brands index --- */

.a1-brands--index { margin-top: var(--wp--preset--spacing--40); }

.a1-brands--index a {
	flex-direction: column;
	gap: 4px;
	min-height: 96px;
}

.a1-brands--index span {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink);
}

.a1-brands--index em {
	font-style: normal;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--text-tertiary);
}

/* --- services index --- */

.a1-jobs--services { margin-top: var(--wp--preset--spacing--40); }
.a1-jobs--services .a1-jobs__list { font-size: var(--wp--preset--font-size--sm); }

/* --- contact --- */

.a1-contact {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}

@media (max-width: 899px) { .a1-contact { grid-template-columns: minmax(0, 1fr); } }

.a1-contact__card {
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--wash);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--md);
}

.a1-contact__card > * { margin-block: 0; }
.a1-contact__card > * + * { margin-top: var(--wp--preset--spacing--10); }

.a1-contact__big {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--md);
	letter-spacing: -0.01em;
	word-break: break-word;
}

.a1-contact__big a { text-decoration: none; }
.a1-contact__card p:last-child { color: var(--wp--preset--color--text-secondary); }

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

   Light, on the cream wash, matching the design. Sizes below are the design's
   own: 10px column titles at .14em, 13.5px links on a 9px rhythm, 14px address
   text. The titles sit at half ink deliberately — they label the columns, they
   are not meant to compete with the links under them.
   ------------------------------------------------------------------------- */

.a1-footer { border-top: 1px solid var(--wp--preset--color--rule); }

.a1-footer__cols {
	display: grid;
	/* Address block, then one equal column per link group. The count varies —
	   Legal is absent until the three legal pages are published — so the
	   columns are generated rather than fixed, and no empty slot is reserved. */
	grid-template-columns: 1.4fr;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 40px;
}

@media (max-width: 1199px) {
	.a1-footer__cols { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
	.a1-footer__cols { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 559px) {
	.a1-footer__cols { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
}

.a1-footer__col > * { margin-block: 0; }

/* .a1-eyebrow is shared by twenty templates and is green by default. In the
   footer the design mutes it instead, so it is overridden here rather than
   changed globally. */
.a1-footer__col .a1-eyebrow {
	margin: 0 0 14px;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.14em;
	/* Was half-ink (2.5:1). Text must reach 4.5:1 and never be muted by opacity
	   (design team standing rules, 14 Sep 2026). */
	color: var(--wp--preset--color--text-tertiary);
}

/* Wordmark above the address, as the design's footer has it. */
.a1-footer__mark {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.01em;
}

.a1-footer__mark img { width: 34px; height: 34px; object-fit: contain; flex: none; }

.a1-footer__address {
	margin: 0;
	font-style: normal;
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
}

.a1-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: 15px;
	line-height: 1.35;
}

.a1-footer a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.a1-footer__address a { color: inherit; }

.a1-footer a:hover,
.a1-footer a:focus-visible {
	color: var(--wp--preset--color--green);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.a1-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	margin-top: 44px;
	padding-top: 22px;
	border-top: 1px solid var(--wp--preset--color--rule);
	font-size: 13px;
	/* Was ink at 50%: 2.5:1 on the wash footer, too faint for 13px text. */
	color: var(--wp--preset--color--text-secondary);
}

/* Legal links sit in their own footer column, as the design has them, and are
   rendered by a1/footer-columns so a draft is never linked to. They appear the
   moment the three legal pages are published. */

/* ---------------------------------------------------------------------------
   Visual Composer column shim

   Every legacy page is built from VC rows and columns, and VC's own stylesheet
   is not loaded — so a three-column row becomes three full-width blocks stacked
   on top of each other. The Audi page came out 22,700px tall for that reason
   alone. Roughly 126 pages are affected.

   This restores the column behaviour from the class names VC leaves in the
   markup. It is a shim, not a reimplementation: the percentage widths and the
   hide/show classes are what the layouts actually depend on, and everything
   collapses to a single column below tablet, which is what VC did too.
   ------------------------------------------------------------------------- */

.entry-content .vce-row-content {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	align-items: flex-start;
}

.entry-content .vce-col {
	flex: 1 1 0;
	min-width: 0;
}

.entry-content .vce-col-inner,
.entry-content .vce-col-content {
	min-width: 0;
}

/* VC's own gutter classes are already accounted for by the gap above, so its
   negative margins would double-count. */
.entry-content .vce-row--col-gap-30,
.entry-content .vce-row--col-gap-0 {
	margin-inline: 0;
}

@media (min-width: 768px) {
	.entry-content .vce-col--md-auto  { flex: 1 1 0; }
	.entry-content .vce-col--md-10p   { flex: 0 1 8%; }
	.entry-content .vce-col--md-25p   { flex: 0 1 23%; }
	.entry-content .vce-col--md-33p   { flex: 0 1 31%; }
	.entry-content .vce-col--md-40p   { flex: 0 1 38%; }
	.entry-content .vce-col--md-50p   { flex: 0 1 48%; }
	.entry-content .vce-col--md-60p   { flex: 0 1 58%; }
	.entry-content .vce-col--md-75p   { flex: 0 1 73%; }
	.entry-content .vce-col--md-100p  { flex: 0 0 100%; }
	.entry-content .vce-col--md-hide  { display: none; }
}

@media (min-width: 1024px) {
	.entry-content .vce-col--lg-10p   { flex: 0 1 8%; }
	.entry-content .vce-col--lg-25p   { flex: 0 1 23%; }
	.entry-content .vce-col--lg-33p   { flex: 0 1 31%; }
	.entry-content .vce-col--lg-35p   { flex: 0 1 33%; }
	.entry-content .vce-col--lg-40p   { flex: 0 1 38%; }
	.entry-content .vce-col--lg-50p   { flex: 0 1 48%; }
	.entry-content .vce-col--lg-51p   { flex: 0 1 49%; }
	.entry-content .vce-col--lg-60p   { flex: 0 1 58%; }
	.entry-content .vce-col--lg-100p  { flex: 0 0 100%; }
	.entry-content .vce-col--lg-hide  { display: none; }
}

/* Below tablet everything is one column, and VC's own hide classes are honoured
   — several of these rows carry a spacer column that only exists to pad a
   desktop layout. */
@media (max-width: 767px) {
	.entry-content .vce-col { flex: 0 0 100%; }
	.entry-content .vce-col--xs-hide,
	.entry-content .vce-col--sm-hide { display: none; }
}

/* --- default page --- */

.a1-page__body { margin-top: var(--wp--preset--spacing--40); }

.a1-page__body > *,
.a1-page__body .entry-content > * {
	max-width: min(var(--wp--custom--measure), 100%);
	margin-inline: 0 auto !important;
}

/* Legacy rows manage their own width; capping them would break the shim. */
.a1-page__body .vce-row-container,
.a1-page__body .vce-row,
.a1-page__body .vce-row-content,
.a1-page__body figure,
.a1-page__body .a1-banners,
.a1-page__body .a1-scroll-x {
	max-width: 100% !important;
}

.a1-page__body p { color: var(--wp--preset--color--text-secondary); }
.a1-page__body h2 { margin-top: var(--wp--preset--spacing--40); }
.a1-page__body h3 { margin-top: var(--wp--preset--spacing--30); }
.a1-page__body img { max-width: 100%; height: auto; border-radius: var(--wp--custom--radius--md); }
.a1-page__body [class^="vce-"],
.a1-page__body [class*=" vce-"] { max-width: 100%; }

/* ---------------------------------------------------------------------------
   Enquiry form fallback

   Stands in for [ninja_form] on the 643 imported pages when the plugin is not
   active. Deliberately a contact card rather than a fake form: a form that
   cannot submit is worse than a phone number.
   ------------------------------------------------------------------------ */

.a1-formfallback {
	margin-block: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--wash);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--md);
}

.a1-formfallback > * { margin-block: 0; }
.a1-formfallback > * + * { margin-block-start: var(--wp--preset--spacing--20); }

.a1-formfallback__lead {
	font-size: var(--wp--preset--font-size--md);
	max-width: 46ch;
}

.a1-formfallback__contact {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	align-items: baseline;
}

.a1-formfallback__tel {
	font-size: var(--wp--preset--font-size--xl);
	letter-spacing: var(--wp--custom--tracking--title);
	color: var(--wp--preset--color--green);
	text-decoration: none;
}

.a1-formfallback__mail { color: var(--wp--preset--color--ink); }

.a1-formfallback__tel:hover,
.a1-formfallback__mail:hover { text-decoration: underline; }

.a1-formfallback__meta {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-tertiary);
}

.a1-formfallback__cta {
	display: inline-block;
	padding: 0.7em 1.4em;
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--cream);
	border-radius: var(--wp--custom--radius--pill);
	text-decoration: none;
}

.a1-formfallback__cta:hover { background: var(--wp--preset--color--green-hover, #1a2a12); }

/* ---------------------------------------------------------------------------
   ADVICE CENTRE  (/advice-centre/)

   Prototype screens 13–16: header and chips, one featured article beside a
   short list, a row per category, then a recent grid.

   The two catch-all categories hold 606 of 613 posts, so the rows are capped
   by article count in PHP rather than printing 24 rows of one. The chips carry
   the long tail.
   ------------------------------------------------------------------------ */

.a1-ac__head .a1-lede { margin-bottom: var(--wp--preset--spacing--30); }

/* --- chips --- */
.a1-ac__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: var(--wp--preset--spacing--30);
}

.a1-ac__chip {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	padding: 7px 15px;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--pill);
	text-decoration: none;
	white-space: nowrap;
}

.a1-ac__chip:hover { border-color: var(--wp--preset--color--ink); }

.a1-ac__chip.is-current {
	background: var(--wp--preset--color--green);
	border-color: var(--wp--preset--color--green);
	color: var(--wp--preset--color--on-dark);
}

.a1-ac__count {
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--text-tertiary, rgba(55, 63, 67, 0.65));
}

.a1-ac__chip.is-current .a1-ac__count { color: var(--wp--preset--color--on-dark-tertiary); }

/* --- shared card --- */
.a1-ac__card { display: flex; flex-direction: column; gap: 14px; }

.a1-ac__media {
	display: block;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--wash);
	aspect-ratio: 16 / 10;
}

.a1-ac__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.a1-ac__body { display: flex; flex-direction: column; gap: 8px; }

.a1-ac__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--text-tertiary, rgba(55, 63, 67, 0.65));
}

.a1-ac__cat { color: var(--wp--preset--color--green); text-decoration: none; }
.a1-ac__cat:hover { text-decoration: underline; }

.a1-ac__title { margin: 0; font-size: var(--wp--preset--font-size--lg); line-height: 1.22; letter-spacing: var(--wp--custom--tracking--title); }
.a1-ac__title a { color: inherit; text-decoration: none; }
.a1-ac__title a:hover { text-decoration: underline; }

.a1-ac__excerpt { margin: 0; color: var(--wp--preset--color--text-secondary); }

.a1-ac__more { margin: 0; }
.a1-ac__more a {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--green);
	text-decoration: none;
}
.a1-ac__more a::after { content: " \2192"; }
.a1-ac__more a:hover { text-decoration: underline; }

/* --- screen 14: featured beside a short list --- */
.a1-ac__featured {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

.a1-ac__card--lead .a1-ac__title { font-size: var(--wp--preset--font-size--xxl); letter-spacing: var(--wp--custom--tracking--heading); }
.a1-ac__card--lead .a1-ac__media { aspect-ratio: 16 / 9; }
.a1-ac__card--lead .a1-ac__excerpt { font-size: var(--wp--preset--font-size--md); }

.a1-ac__sidelist { display: flex; flex-direction: column; }

.a1-ac__card--side {
	gap: 6px;
	padding-block: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--rule);
}
.a1-ac__card--side:first-child { border-top: 0; padding-top: 0; }
.a1-ac__card--side .a1-ac__title { font-size: var(--wp--preset--font-size--md); }
.a1-ac__card--side .a1-ac__more { display: none; }

/* --- screens 15 and 16: rows --- */
.a1-ac__row + .a1-ac__row { margin-top: var(--wp--preset--spacing--60); }

.a1-ac__rowhead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.a1-ac__rowtitle { margin: 0; font-size: var(--wp--preset--font-size--xl); letter-spacing: var(--wp--custom--tracking--heading); }

.a1-ac__viewall {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--green);
	text-decoration: none;
	white-space: nowrap;
}
.a1-ac__viewall::after { content: " \2192"; }
.a1-ac__viewall:hover { text-decoration: underline; }

.a1-ac__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--40);
}

/* blockGap would otherwise push row 1 out of line inside a grid */
.a1-ac__grid > *, .a1-ac__featured > *, .a1-ac__sidelist > * { margin-block-start: 0; }

.a1-ac__loadmore { margin-top: var(--wp--preset--spacing--40); text-align: center; }

.a1-btn--ghost {
	display: inline-block;
	padding: 0.75em 1.6em;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--rule-strong);
	border-radius: var(--wp--custom--radius--pill);
	text-decoration: none;
}
.a1-btn--ghost:hover { background: var(--wp--preset--color--wash); }

@media (max-width: 900px) {
	.a1-ac__featured { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); }
	.a1-ac__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.a1-ac__grid { grid-template-columns: 1fr; }
	.a1-ac__card--lead .a1-ac__title { font-size: var(--wp--preset--font-size--xl); }
}

/* ---------------------------------------------------------------------------
   SERVICE DETAIL  — prototype 42

   "What's included" beside "Signs you need this". Two lists with different
   markers because they are different kinds of statement: a tick is a promise
   about the work, a dot is a symptom.
   ------------------------------------------------------------------------ */

.a1-detail {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--rule);
}

.a1-detail > * { margin-block-start: 0; }

.a1-detail__title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--xl);
	letter-spacing: var(--wp--custom--tracking--heading);
}

.a1-detail__list { margin: 0; padding: 0; list-style: none; }

.a1-detail__list li {
	position: relative;
	padding-left: 1.9em;
	padding-block: 9px;
	border-top: 1px solid var(--wp--preset--color--rule-soft);
	color: var(--wp--preset--color--text-secondary);
}

.a1-detail__list li:first-child { border-top: 0; }

.a1-detail__list--check li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 9px;
	color: var(--wp--preset--color--green);
	font-weight: 600;
}

.a1-detail__list--dot li::before {
	content: "";
	position: absolute;
	left: 0.35em;
	top: 1.15em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
}

@media (max-width: 780px) {
	.a1-detail { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); }
}

/* ---------------------------------------------------------------------------
   Floating WhatsApp button

   Replaces the QuadLayers plugin, which loaded an icon font and a roster UI to
   render one link. This is CSS and an inline SVG: no JS, no network request,
   no cookie, so nothing here needs consent.

   The label is real text that expands on hover AND on keyboard focus, rather
   than a title attribute — a tooltip is invisible to touch and to a screen
   reader, which between them are most of the people who would use this.
   --------------------------------------------------------------------------- */

.a1-wa {
	position: fixed;
	right: max(20px, env(safe-area-inset-right));
	bottom: max(20px, env(safe-area-inset-bottom));
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: 0;
	padding: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
	text-decoration: none;
	box-shadow: 0 6px 20px rgb(55 63 67 / 0.22);
	transition: box-shadow 0.2s ease, transform 0.25s ease, opacity 0.25s ease;
}

.a1-wa:hover,
.a1-wa:focus-visible {
	box-shadow: 0 10px 28px rgb(55 63 67 / 0.3);
	transform: translateY(-2px);
	color: var(--wp--preset--color--gold);
}

/* Design review, 11 Sep: the bubble sat over headings and copy. nav.js adds
   a1-wa-away while the reader is scrolling down through the page, and takes it
   off again on scrolling up and at the foot of the page. Without JavaScript
   the class is never set and the button simply stays. Keyboard focus always
   brings it back. */
.a1-wa-away .a1-wa:not(:focus-visible) {
	opacity: 0;
	transform: translateY(calc(100% + 24px));
	pointer-events: none;
}

@media (max-width: 600px) {
	.a1-wa__icon { width: 48px; height: 48px; flex-basis: 48px; }
	.a1-wa__icon svg { width: 22px; height: 22px; }
}

.a1-wa__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	flex: 0 0 56px;
}

/* Collapsed to nothing by default and opened on intent. max-width rather than
   display so the text stays in the accessibility tree throughout. */
.a1-wa__label {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--title);
	transition: max-width 0.28s ease, padding 0.28s ease;
	padding: 0;
}

.a1-wa:hover .a1-wa__label,
.a1-wa:focus-visible .a1-wa__label {
	max-width: 12ch;
	padding-inline-start: 18px;
}

/* Touch has no hover state, and an always-open pill would sit over content on
   the smallest screens. Icon only there. */
@media (hover: none) {
	.a1-wa__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.a1-wa,
	.a1-wa__label { transition: none; }
	.a1-wa:hover,
	.a1-wa:focus-visible { transform: none; }
}

@media print {
	.a1-wa { display: none; }
}

/* ---------------------------------------------------------------------------
   Legacy blog thumbnails cropped to their photo (inc/thumb-crop.php)

   The span is the card's image box; the image inside is enlarged and placed
   so the photo box (--x --y --w --h, fractions of the image; --A its aspect)
   covers it, centred. Container units measure the box whatever shape the
   card gives it. !important because the featured-image block writes
   width, height and aspect-ratio inline on the <img>.
   --------------------------------------------------------------------------- */

.a1-crop {
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 16 / 9;
	container-type: size;
	border-radius: var(--wp--custom--radius--md);
	/* Wash, not ink: while a photo is still loading the card must not flash
	   the black box this replaces. */
	background: var(--wp--preset--color--wash);
}

.a1-crop > img[data-a1-crop] {
	--iw: max(calc(100cqw / var(--w)), calc(100cqh * var(--A) / var(--h)));
	position: absolute !important;
	left: calc((100cqw - var(--w) * var(--iw)) / 2 - var(--x) * var(--iw));
	top: calc((100cqh - var(--h) * var(--iw) / var(--A)) / 2 - var(--y) * var(--iw) / var(--A));
	width: var(--iw) !important;
	height: calc(var(--iw) / var(--A)) !important;
	max-width: none !important;
	aspect-ratio: auto !important;
	object-fit: fill !important;
	margin: 0 !important;
	border-radius: 0 !important;
}

/* The panel for cards with no usable photo: wash ground, a hairline, and the
   post's category in the mono label face. Same shape as a photo card. */
.a1-crop--plain {
	display: flex;
	/* Centred (design review round 2): low-left read as a caption with its
	   photo missing. */
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 18px 20px;
	box-sizing: border-box;
	container-type: normal;
	background: var(--wp--preset--color--wash);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--rule);
}

/* On a wash band a wash panel disappears, leaving a hairline and a label
   floating in space (the Advice Centre rows). Cream there instead. */
:is(.a1-band--wash, .has-wash-background-color) .a1-crop--plain {
	background: var(--wp--preset--color--cream);
}

.a1-crop__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	/* Full-strength anthracite (design team, 11 Sep): the secondary tone
	   measured about 2.6:1 on the wash, and this label is the only thing
	   standing in for the photo. */
	color: var(--wp--preset--color--ink);
}

/* Cards whose box shape is set on the link, not the image. */
.a1-ac__media .a1-crop { aspect-ratio: auto; height: 100%; border-radius: 0; }
.wp-block-latest-posts__featured-image .a1-crop { aspect-ratio: 3 / 2; border-radius: 0; }

/* The crop box has no width of its own (size containment), so every wrapper
   around it must be a full-width block. Core's recent-posts block makes its
   image link inline-block, which shrank the box to nothing. */
.wp-block-latest-posts__featured-image:has(.a1-crop),
.wp-block-latest-posts__featured-image:has(.a1-crop) > a {
	display: block;
	width: 100%;
}
.a1-rest__media .a1-crop { border-radius: var(--wp--custom--radius--sm); margin-bottom: 12px; }

/* ---------------------------------------------------------------------------
   Engine repairs hub (page 2869, rebuilt 11 Sep 2026 with the owner's OK)

   Three ways we deal with an engine as quiet wash cards, then the fifteen
   makes as anthracite links to their own engine pages. Replaces fifteen
   legacy image tiles ("Press or Click Here" printed on stock photos).
   --------------------------------------------------------------------------- */

/* A grid of its own rather than core's flex layout classes, so the three sit
   side by side on desktop and stack on phones whatever the legacy content
   rules around the service body do to columns. */
.wp-block-columns.a1-engine-ways {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-block: 24px 48px;
}

.wp-block-columns.a1-engine-ways > .wp-block-column { margin: 0 !important; flex-basis: auto !important; }

@media (max-width: 781px) {
	.wp-block-columns.a1-engine-ways { grid-template-columns: minmax(0, 1fr); }
}

.a1-engine-way {
	background: var(--wp--preset--color--wash);
	border-radius: var(--wp--custom--radius--md);
	padding: 24px 22px;
}

.a1-engine-way > h3.wp-block-heading {
	margin: 0 0 8px !important;
	font-size: var(--wp--preset--font-size--lg) !important;
	letter-spacing: -0.02em;
}

.a1-engine-way > p {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--text-secondary);
}

ul.a1-makegrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	list-style: none;
	padding: 0 !important;
	margin: 20px 0 0 !important;
}

ul.a1-makegrid > li { margin: 0 !important; padding: 0; }
ul.a1-makegrid > li::before, ul.a1-makegrid > li::marker { content: none; }

ul.a1-makegrid a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 18px;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream) !important;
	text-decoration: none !important;
	font-size: 15px;
	font-weight: 600;
}

ul.a1-makegrid a::after { content: "\2192"; color: var(--wp--preset--color--on-dark-secondary); }
ul.a1-makegrid a:hover,
ul.a1-makegrid a:focus-visible { background: var(--wp--preset--color--green); }

@media (max-width: 700px) {
	ul.a1-makegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Fifteen makes: the last one spans the row instead of sitting alone. */
	ul.a1-makegrid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------
   Self-hosted video (inc/video.php turns an .mp4-in-iframe into <video>)

   Sized by the video itself, but never taller than most of the screen: the
   DSG article's clip is portrait (720x1280) and would otherwise stand 1280px
   tall. Centred portrait clips sit in the column like a phone screen.
   --------------------------------------------------------------------------- */

video.a1-vid {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: min(78vh, 640px);
	margin: var(--wp--preset--spacing--40) auto;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--ink);
}

/* Design review round 2: the browser's controls over the clip's first frame
   (on the DSG article, an A1 watermark over stock circuitry) looked like the
   legacy graphics removed everywhere else. With JavaScript, the clip waits
   behind an anthracite panel with the site's play button, the title and the
   running time; the controls appear once it plays. Without JavaScript the
   button stays hidden and the plain player shows. The box takes the video's
   own shape, so portrait and landscape clips both fit. */
.a1-vidbox {
	position: relative;
	display: block;
	width: fit-content;
	max-width: 100%;
	margin: var(--wp--preset--spacing--40) auto;
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	background: var(--wp--preset--color--ink);
}

.a1-vidbox > video.a1-vid { margin: 0; border-radius: 0; }

/* Inside a core video block the figure already spaces it; core's own
   width: 100% would stretch a portrait clip to the column's width. */
.wp-block-video > .a1-vidbox { margin-block: 0; }

/* yt-facade.js hides clips whose file no longer exists. */
.a1-vidbox[hidden],
.wp-block-video[hidden] { display: none; }
.wp-block-video video.a1-vid { width: auto; }

.a1-vidbox__play {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
	font: inherit;
	cursor: pointer;
}

.a1-vidbox__play[hidden] { display: none; }

.a1-vidbox__time {
	display: block;
	margin-top: 6px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--on-dark-secondary);
}

.a1-vidbox__time:empty { display: none; }

/* ---------------------------------------------------------------------------
   YouTube still (inc/video.php)

   The video's own still, darkened a little, with an anthracite play button
   and the title in cream. No YouTube red and no Shorts branding until someone
   chooses to play it. Width follows the content column; 16:9 either way.
   --------------------------------------------------------------------------- */

.a1-yt,
.a1-yt__frame {
	display: block;
	width: 100%;
	max-width: 760px;
	aspect-ratio: 16 / 9;
	margin: var(--wp--preset--spacing--40) 0;
	border: 0;
	border-radius: var(--wp--custom--radius--card, 12px);
	background: var(--wp--preset--color--ink);
}

/* Inside a core YouTube embed the wrapper already reserves the 16:9 box with
   a padded ::before and positions its iframe absolutely; fill that box the
   same way instead of stacking a second one under it. */
.wp-has-aspect-ratio .wp-block-embed__wrapper > :is(.a1-yt, .a1-yt__frame) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	aspect-ratio: auto;
}

.a1-yt__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.a1-yt {
	position: relative;
	overflow: hidden;
	padding: 0;
	cursor: pointer;
	font: inherit;
	color: var(--wp--preset--color--cream);
}

.a1-yt__still {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.82) saturate(0.85);
	transition: filter 0.2s ease;
}

/* A dark fade under the title (design review round 2: white on the bright car
   was hard to read). The play button and title sit above it. */
.a1-yt::after,
.a1-vidbox__play::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 55%;
	background: linear-gradient(to top, rgb(30 34 37 / 0.85), rgb(30 34 37 / 0));
	pointer-events: none;
}

.a1-yt__play,
.a1-yt__label { z-index: 1; }

.a1-yt__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 68px;
	margin: -34px 0 0 -34px;
	border-radius: 50%;
	background: var(--wp--preset--color--ink);
	/* A cream ring (round 2): with only a faint white edge, the anthracite disc
	   over a dark still read as a translucent grey circle. */
	box-shadow: 0 0 0 2px var(--wp--preset--color--cream), 0 8px 24px rgb(0 0 0 / 0.35);
	transition: background 0.2s ease;
}

.a1-yt__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -11px 0 0 -7px;
	border-style: solid;
	border-width: 11px 0 11px 19px;
	border-color: transparent transparent transparent var(--wp--preset--color--cream);
}

.a1-yt__label {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 16px;
	text-align: left;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.3;
	text-shadow: 0 1px 8px rgb(0 0 0 / 0.5);
}

.a1-yt:hover .a1-yt__still,
.a1-yt:focus-visible .a1-yt__still { filter: brightness(0.82) saturate(0.9); }

.a1-yt:hover .a1-yt__play,
.a1-yt:focus-visible .a1-yt__play,
.a1-vidbox__play:hover .a1-yt__play,
.a1-vidbox__play:focus-visible .a1-yt__play { background: var(--wp--preset--color--gold); }

.a1-yt:hover .a1-yt__play::after,
.a1-yt:focus-visible .a1-yt__play::after,
.a1-vidbox__play:hover .a1-yt__play::after,
.a1-vidbox__play:focus-visible .a1-yt__play::after { border-left-color: var(--wp--preset--color--ink); }

.a1-yt:focus-visible,
.a1-vidbox__play:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.a1-yt__still,
	.a1-yt__play { transition: none; }
}

/* ---------------------------------------------------------------------------
   Article screen — prototype ARTICLE PAGE
   Chip, pull quote, mid-article CTA, FAQ cards, related services.
   --------------------------------------------------------------------------- */

.a1-article__chipline { margin: 0 0 18px; }

.a1-chip {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--cream);
	padding: 7px 11px;
	border-radius: 6px;
	text-decoration: none;
}

.a1-chip:hover,
.a1-chip:focus-visible { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--cream); }

/* Pull quote. No post on the site uses a blockquote today, so this styles the
   design's treatment for whatever gets written from here on rather than
   changing anything that exists. */
.entry-content blockquote {
	margin: 34px 0;
	padding: 6px 0 6px 22px;
	border-left: 3px solid var(--wp--preset--color--green);
}

.entry-content blockquote p { font-size: 21px; line-height: 1.6; letter-spacing: -0.015em; }
.entry-content blockquote cite,
.entry-content blockquote footer {
	display: block;
	margin-top: 10px;
	font-size: 13px;
	font-style: normal;
	color: var(--wp--preset--color--text-tertiary);
}

/* Mid-article CTA */
.a1-midcta {
	margin: 40px 0;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
	border-radius: var(--wp--custom--radius--lg);
	padding: 38px 40px;
	display: flex;
	gap: 32px;
	align-items: center;
}

.a1-midcta__text { flex: 1; }
.a1-midcta__title { margin: 0; font-size: var(--wp--preset--font-size--xl); letter-spacing: var(--wp--custom--tracking--heading); font-weight: 600; }

/* The prototype sets this paragraph to a dark ink at 40% on an ink panel, which
   is unreadable. Cream at reduced opacity keeps the intended hierarchy. */
.a1-midcta__text p { margin: 10px 0 0; font-size: 17px; line-height: 1.55; color: var(--wp--preset--color--on-dark-secondary); }

.a1-midcta__actions { display: flex; flex-direction: column; gap: 10px; flex: none; }

.a1-midcta__btn {
	display: inline-block;
	text-align: center;
	padding: 14px 26px;
	border-radius: var(--wp--custom--radius--pill);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	/* Design review, 11 Sep: gold on the ink panel measured 3.48:1, both the
	   button against the panel and its label against the button. Cream on ink
	   reads at a glance; gold is kept for the hover. */
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
}

.a1-midcta__btn--ghost { background: transparent; color: var(--wp--preset--color--cream); box-shadow: inset 0 0 0 1px currentColor; }
.a1-midcta__btn:hover, .a1-midcta__btn:focus-visible { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }
.a1-midcta__btn--ghost:hover, .a1-midcta__btn--ghost:focus-visible { background: transparent; color: var(--wp--preset--color--gold); }

/* Design review round 2, 11 Sep: the same gold-on-ink button survived on the
   fault-code reference card, and the homepage hero and remote-coding bands
   carried it too. Every gold button on a dark ground now takes the cream
   treatment above, whether it comes from a template or from a page's saved
   content. !important because WordPress's colour classes use it. */
:is(.has-ink-background-color, .has-green-background-color, .a1-hero) .wp-block-button__link:is(.has-gold-background-color, .has-cream-background-color) {
	background-color: var(--wp--preset--color--cream) !important;
	color: var(--wp--preset--color--ink) !important;
}

:is(.has-ink-background-color, .has-green-background-color, .a1-hero) .wp-block-button__link:is(.has-gold-background-color, .has-cream-background-color):is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--gold) !important;
}

/* FAQ cards */
.a1-afaq { margin-top: 44px; }
.a1-afaq__title { margin: 0 0 18px; font-size: var(--wp--preset--font-size--xl); letter-spacing: -0.028em; font-weight: 600; }
.a1-afaq__list { display: flex; flex-direction: column; gap: 10px; }

.a1-afaq__item {
	background: var(--wp--preset--color--wash);
	border-radius: 14px;
	padding: 20px 22px;
}

.a1-afaq__item strong { font-size: 16.5px; letter-spacing: -0.018em; }
.a1-afaq__a { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--wp--preset--color--text-secondary); }
.a1-afaq__a > :first-child { margin-top: 0; }
.a1-afaq__a > :last-child { margin-bottom: 0; }

/* Related services */
.a1-asvc { margin-top: 40px; border-top: 1px solid rgb(55 63 67 / 0.14); padding-top: 24px; }
.a1-asvc__list { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }

.a1-asvc__pill {
	border: 1px solid rgb(55 63 67 / 0.16);
	border-radius: var(--wp--custom--radius--pill);
	padding: 10px 16px;
	font-size: 13.5px;
	text-decoration: none;
	color: inherit;
}

.a1-asvc__pill:hover,
.a1-asvc__pill:focus-visible { border-color: var(--wp--preset--color--ink); }

@media (max-width: 780px) {
	.a1-midcta { flex-direction: column; align-items: stretch; padding: 28px 24px; gap: 22px; }
	.a1-midcta__actions { flex-direction: row; }
	.a1-midcta__btn { flex: 1; }
	.a1-afaq__title { font-size: var(--wp--preset--font-size--xl); }
}

/* Side by side, the two pills broke mid-label at 390px ("Send an / enquiry",
   "02920 220 / 380"). On phones they stack full width (design review round 2). */
@media (max-width: 600px) {
	.a1-midcta__actions { flex-direction: column; }
	.a1-midcta__btn { flex: none; white-space: nowrap; }
}

/* ---------------------------------------------------------------------------
   Category archive — prototype isCategory
   --------------------------------------------------------------------------- */

.a1-catmeta {
	margin: 10px 0 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-tertiary);
}

.a1-ac__chip.is-current {
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--cream);
	border-color: transparent;
}

.a1-catsvc {
	max-width: var(--wp--style--global--content-size, 1100px);
	margin: 0 auto;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--custom--section-y);
}

.a1-catsvc__title { margin: 0; font-size: var(--wp--preset--font-size--xl); letter-spacing: var(--wp--custom--tracking--heading); font-weight: 600; }
.a1-catsvc__sub { margin: 8px 0 0; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--text-tertiary); }

.a1-catsvc__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
	margin-top: 20px;
}

.a1-catsvc__card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px;
	border: 1px solid rgb(55 63 67 / 0.16);
	border-radius: var(--wp--custom--radius--sm);
	text-decoration: none;
	color: inherit;
}

.a1-catsvc__card strong { font-size: var(--wp--preset--font-size--sm); letter-spacing: var(--wp--custom--tracking--title); line-height: 1.3; }
.a1-catsvc__card span { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--green); }
.a1-catsvc__card:hover, .a1-catsvc__card:focus-visible { border-color: var(--wp--preset--color--ink); }

/* Remote page — audience cards and equipment grid (prototype isRemote) */
.a1-audience { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.a1-audience__card {
	border: 1px solid rgb(55 63 67 / 0.14);
	border-radius: var(--wp--custom--radius--lg);
	padding: 32px;
	background: var(--wp--preset--color--wash);
}

.a1-audience__card h3 { margin: 0; letter-spacing: -0.025em; }
.a1-audience__card h3 a { color: inherit; text-decoration: none; }
.a1-audience__card p { margin: 10px 0 0; color: var(--wp--preset--color--text-tertiary); line-height: 1.5; }
.a1-audience__card:hover, .a1-audience__card:focus-within { border-color: var(--wp--preset--color--green); }

.a1-equip {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 var(--wp--preset--spacing--40) var(--wp--custom--section-y);
}

.a1-equip__title { margin: 0 0 24px; font-size: var(--wp--preset--font-size--xxl); letter-spacing: -0.03em; font-weight: 600; }
.a1-equip__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }

.a1-equip__card {
	border: 1px solid rgb(55 63 67 / 0.14);
	border-radius: var(--wp--custom--radius--md);
	padding: 20px;
	text-align: center;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

@media (max-width: 780px) {
	.a1-audience { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Remote audience pages — prototype isRemoteAud
   --------------------------------------------------------------------------- */

.a1-audnav { display: flex; gap: 6px; margin: 0 0 28px; flex-wrap: wrap; }

.a1-audnav__pill {
	padding: 9px 18px;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid rgb(55 63 67 / 0.2);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	color: inherit;
}

.a1-audnav__pill.is-current {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
	border-color: transparent;
}

.a1-audnav__pill:hover:not(.is-current),
.a1-audnav__pill:focus-visible:not(.is-current) { border-color: var(--wp--preset--color--ink); }

/* No max-width here on purpose. WordPress's constrained layout builds the
   content column out of auto inline margins, so a narrower max-width on the
   heading gets centred inside that column and the h1 ends up indented while the
   breadcrumb and body copy sit at the margin. Overriding the margins instead
   throws it out to the container edge. Letting the heading take the column keeps
   everything on one left edge; text-wrap: balance still controls the line
   lengths. */
.a1-aud__title { margin: 0; }
.a1-aud__title + * { margin-top: 20px; }

.a1-steps { margin-top: 56px; }
.a1-steps__title { margin: 0 0 28px; font-size: var(--wp--preset--font-size--xl); letter-spacing: -0.028em; font-weight: 600; }

.a1-steps__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.a1-steps__item {
	border: 1px solid rgb(55 63 67 / 0.14);
	border-radius: var(--wp--custom--radius--md);
	padding: 20px;
	background: var(--wp--preset--color--cream);
	margin: 0;
}

.a1-steps__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wp--preset--color--wash);
	font-size: 13px;
	font-weight: 600;
}

.a1-steps__item p { margin: 14px 0 0; font-size: var(--wp--preset--font-size--sm); line-height: 1.5; color: var(--wp--preset--color--text-secondary); }

/* ---------------------------------------------------------------------------
   Sticky chrome — prototype "STICKY CHROME"
   Announcement strip + header, both sticking to the top as one unit.
   --------------------------------------------------------------------------- */

/* The sticky element has to be the template-part wrapper, not .a1-chrome
   inside it: a sticky box only travels within its own parent, and that wrapper
   is exactly as tall as the chrome, so sticking the inner div did nothing at
   all — the header simply scrolled away. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 60;
}

.a1-chrome { position: relative; z-index: 60; }

.a1-topstrip {
	background: var(--wp--preset--color--wash);
	color: var(--wp--preset--color--ink);
	text-align: center;
	font-size: 12.5px;
	letter-spacing: 0.01em;
	padding: 10px 20px;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.a1-topstrip__sep { color: rgb(55 63 67 / 0.25); padding: 0 8px; }

.a1-head {
	height: 72px;
	display: flex;
	align-items: center;
	/* Translucent so content scrolling under it stays faintly visible, as the
	   prototype has it. The solid fallback comes first for browsers without
	   backdrop-filter, where a see-through bar would be unreadable. */
	background: var(--wp--preset--color--cream);
	background: color-mix(in srgb, var(--wp--preset--color--cream) 86%, transparent);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding-block: 0;
}

.a1-head__row { width: 100%; gap: 32px; align-items: center; }

.a1-brand { gap: 10px; align-items: center; text-decoration: none; }
.a1-brand__mark { margin: 0; flex: none; line-height: 0; }
.a1-brand__mark img { width: 34px; height: 34px; object-fit: contain; display: block; }
.a1-brand__text { display: flex; flex-direction: column; gap: 2px; }
.a1-brand__name { line-height: 1.15; }
.a1-brand__name a { text-decoration: none; color: inherit; }

.a1-brand__est {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9.5px;
	line-height: 1;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-tertiary);
}

/* A heading jumped to from the contents rail has to clear the sticky chrome.
   The chrome measures 137px on desktop and 142px on a phone where the nav is
   taller, so 160px covers both with a little breathing room — at 132px the
   heading landed underneath the bar. */
:where(.entry-content, .a1-article__body) :is(h2, h3, h4)[id] { scroll-margin-top: 160px; }

@media (max-width: 600px) {
	.a1-topstrip { font-size: 11.5px; padding: 8px 14px; }
	.a1-topstrip__sep { padding: 0 5px; }
	/* The prototype's phone strip carries the first two segments only, so the
	   bar stays one line. The Bosch segment is the second and always shows. */
	.a1-topstrip__part--2,
	.a1-topstrip__sep--2 { display: none; }
	.a1-head { height: 64px; }
}

/* -------------------------------------------------------------------------
   Header navigation, mega menus and the mobile drawer
   Prototype "STICKY CHROME" — the three panels and the two header actions.
   ------------------------------------------------------------------------- */

.a1-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 15px;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

/* Static, so the panel below positions against .a1-chrome and spans the bar. */
.a1-nav__item { position: static; }

.a1-nav__link {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 12px;
	border: 0;
	border-radius: 8px;
	background: none;
	font: inherit;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	cursor: pointer;
}

.a1-nav__link:hover,
.a1-nav__link:focus-visible { background: var(--wp--preset--color--wash); }

.a1-nav__chev {
	width: 0;
	height: 0;
	border-inline: 3.5px solid transparent;
	border-top: 4px solid var(--wp--preset--color--text-tertiary);
}

.a1-nav__panel {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	/* .a1-nav sets nowrap to keep the bar itself on one line; the panel is
	   prose and has to be allowed to wrap again. */
	white-space: normal;
	background: var(--wp--preset--color--cream);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	box-shadow: 0 24px 48px rgb(55 63 67 / 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* Hover and keyboard focus open it without script; .is-open is what nav.js
   adds, so a tap works on touch where there is no hover at all. */
.a1-nav__item--has-menu:hover .a1-nav__panel,
.a1-nav__item--has-menu:focus-within .a1-nav__panel,
.a1-nav__item--has-menu.is-open .a1-nav__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.a1-mega__inner {
	box-sizing: border-box;
	max-width: 1400px;
	margin-inline: auto;
	padding: 34px 40px 14px;
}

.a1-mega__inner--services {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 44px;
}

.a1-mega__inner--remote {
	display: grid;
	grid-template-columns: 1fr 1fr 380px;
	gap: 48px;
	padding-bottom: 34px;
}

.a1-mega__eyebrow {
	margin: 0 0 14px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-tertiary);
}

.a1-mega__eyebrow--accent { color: var(--wp--preset--color--green); }

.a1-mega__title {
	margin: 0 0 22px;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.025em;
}

.a1-mega__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* The design puts an icon block above each label. There is no icon set for the
   six services, so the card is sized to its label rather than reserving an
   empty box for artwork that does not exist. */
.a1-mega__card {
	display: flex;
	align-items: center;
	padding: 16px 14px;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 14px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: border-color 0.18s ease, transform 0.18s ease;
}

.a1-mega__card:hover {
	border-color: var(--wp--preset--color--ink);
	transform: translateY(-2px);
}

.a1-mega__cardname {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.015em;
}

.a1-mega__groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }

.a1-mega__links { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.a1-mega__links a { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--ink); text-decoration: none; }
.a1-mega__links a:hover { color: var(--wp--preset--color--green); }
.a1-mega__links--lg a { font-size: var(--wp--preset--font-size--sm); }
.a1-mega__links--brands { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px 24px; }

.a1-mega__brands { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 28px; }

.a1-mega__brand {
	padding: 16px;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 14px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: border-color 0.18s ease, transform 0.18s ease;
}

.a1-mega__brand:hover { border-color: var(--wp--preset--color--ink); transform: translateY(-2px); }

.a1-mega__promo { background: var(--wp--preset--color--wash); border-radius: 16px; padding: 24px; }

.a1-mega__promotext {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--wp--preset--color--text-secondary);
}

.a1-mega__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 18px;
	padding: 16px 40px;
	background: var(--wp--preset--color--wash);
	font-size: 13px;
	color: var(--wp--preset--color--text-tertiary);
}

.a1-mega__cta {
	flex: none;
	padding: 11px 20px;
	border-radius: 100px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}

.a1-mega__cta:hover { background: var(--wp--preset--color--green); }
.a1-mega__promo .a1-mega__cta { display: inline-block; }

/* ---- the two header actions ---- */

.a1-headcta { display: flex; align-items: center; gap: 12px; white-space: nowrap; }

.a1-headcta__tel {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--wp--preset--color--rule-strong);
	border-radius: 100px;
	font-size: 13.5px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.a1-headcta__tel:hover { border-color: var(--wp--preset--color--ink); }

.a1-headcta__dot {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 100px;
	background: var(--wp--preset--color--green);
}

.a1-headcta__btn {
	padding: 12px 22px;
	border-radius: 100px;
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--cream);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 6px 18px rgb(36 57 24 / 0.28);
}

.a1-headcta__btn:hover { background: var(--wp--preset--color--green-hover); }

.a1-headcta__burger {
	display: none;
	flex-direction: column;
	gap: 4px;
	padding: 11px;
	border: 1px solid var(--wp--preset--color--rule-strong);
	border-radius: 9px;
	background: none;
	cursor: pointer;
}

.a1-headcta__burger i { display: block; width: 16px; height: 1.6px; background: var(--wp--preset--color--ink); }

/* ---- narrow ----
   The prototype swaps to a compact bar at its navNarrow breakpoint. Below
   1180px the four grouped columns cannot hold their line lengths, so the
   panels go and the drawer takes over. */
@media (max-width: 1179px) {
	.a1-nav { display: none; }
	.a1-headcta__burger { display: flex; }
	.a1-headcta__telno { display: none; }
	.a1-headcta__tel { padding: 11px; }
}

.a1-headcta__short { display: none; }

@media (max-width: 600px) {
	.a1-headcta { gap: 10px; }
	.a1-headcta__btn { padding: 11px 18px; font-size: 13px; }
	.a1-headcta__long { display: none; }
	.a1-headcta__short { display: inline; }
	/* One row, as the prototype's narrow bar has it — the logo and the two
	   actions must not stack. */
	.a1-head__row { flex-wrap: nowrap; gap: 12px; }
	/* The actions keep their width; a long site title is what gets clipped. */
	.a1-headcta { flex: none; }
	.a1-brand { min-width: 0; overflow: hidden; }
	.a1-brand__text { min-width: 0; }
	.a1-brand__est { display: none; }
	.a1-brand__name {
		font-size: 14px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* ---- mobile drawer ---- */

.a1-drawer-open { overflow: hidden; }

/* display:flex below outranks the browser's own [hidden] rule, so the closed
   state has to be stated explicitly or the drawer covers every page. */
.a1-drawer[hidden] { display: none; }

.a1-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--cream);
}

.a1-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	font-size: 17px;
}

.a1-drawer__close {
	border: 0;
	background: none;
	font-size: 18px;
	line-height: 1;
	padding: 6px;
	cursor: pointer;
	color: var(--wp--preset--color--ink);
}

.a1-drawer__body { flex: 1; overflow-y: auto; padding: 20px; }

.a1-drawer__eyebrow {
	margin: 22px 0 10px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-tertiary);
}

.a1-drawer__body > .a1-drawer__eyebrow:first-child { margin-top: 0; }

.a1-drawer__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.a1-drawer__chip {
	padding: 8px 14px;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 100px;
	background: var(--wp--preset--color--wash);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.a1-drawer__sec { border-top: 1px solid var(--wp--preset--color--rule); margin-top: 20px; }

.a1-drawer__sec > summary {
	list-style: none;
	cursor: pointer;
	padding: 16px 0;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.015em;
}

.a1-drawer__sec > summary::-webkit-details-marker { display: none; }
.a1-drawer__sec > summary::after { content: "\203A"; float: right; color: var(--wp--preset--color--text-tertiary); }
.a1-drawer__sec[open] > summary::after { content: "\2039"; }

.a1-drawer__links { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.a1-drawer__links a { display: block; padding: 10px 0; font-size: 15px; color: var(--wp--preset--color--ink); text-decoration: none; }

.a1-drawer__links--top {
	margin-top: 20px;
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: 8px;
}

.a1-drawer__links--top a { font-size: 17px; font-weight: 600; padding: 14px 0; letter-spacing: -0.015em; }

.a1-drawer__foot {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 10px;
	padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--wash);
}

.a1-drawer__call,
.a1-drawer__enq {
	text-align: center;
	padding: 14px 18px;
	border-radius: 100px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.a1-drawer__call { border: 1px solid var(--wp--preset--color--rule-strong); color: var(--wp--preset--color--ink); }
.a1-drawer__enq { background: var(--wp--preset--color--green); color: var(--wp--preset--color--cream); }

@media (prefers-reduced-motion: reduce) {
	.a1-nav__panel,
	.a1-mega__card,
	.a1-mega__brand { transition: none; }
	.a1-mega__card:hover,
	.a1-mega__brand:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Closing call to action — prototype "Need help with your vehicle?"

   Open space on the page's own ground, centred, no background. The design has
   no dark or green full-bleed section anywhere; #243918 is carried by the
   primary button alone. Three sizes, because the design gives Home, Services
   and About their own.
   ------------------------------------------------------------------------- */

.a1-cta {
	text-align: center;
	padding-block: 88px;
}

.a1-cta__title {
	margin: 0;
	font-size: clamp(26px, 4vw, 48px);
	line-height: 1.08;
	font-weight: 600;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.a1-cta__sub {
	margin: 14px auto 0;
	max-width: 46ch;
	font-size: 21px;
	line-height: 1.5;
	color: var(--wp--preset--color--text-tertiary);
}

.a1-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 28px;
}

.a1-cta__btn {
	padding: 16px 32px;
	border-radius: 100px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.a1-cta__btn--primary {
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--cream);
}

.a1-cta__btn--primary:hover,
.a1-cta__btn--primary:focus-visible { background: var(--wp--preset--color--green-hover); }

.a1-cta__btn--ghost {
	border: 1px solid var(--wp--preset--color--rule-strong);
	color: var(--wp--preset--color--ink);
}

.a1-cta__btn--ghost:hover,
.a1-cta__btn--ghost:focus-visible { border-color: var(--wp--preset--color--ink); }

/* --- the design's three sizes --- */

.a1-cta--services {
	padding-top: 76px;
	padding-bottom: 88px;
}

.a1-cta--services .a1-cta__title {
	font-size: clamp(26px, 3.6vw, 44px);
	letter-spacing: -0.034em;
}

.a1-cta--services .a1-cta__sub { font-size: 17px; }
.a1-cta--services .a1-cta__actions { margin-top: 26px; }

/* About closes the page, so it carries no top padding and no sub-line. */
.a1-cta--about {
	padding-top: 0;
	padding-bottom: 96px;
}

.a1-cta--about .a1-cta__title {
	font-size: clamp(26px, 2.8vw, 34px);
	letter-spacing: -0.03em;
}

.a1-cta--about .a1-cta__actions { margin-top: 26px; }

@media (max-width: 600px) {
	.a1-cta { padding-block: 56px; }
	.a1-cta--services { padding-top: 48px; padding-bottom: 56px; }
	.a1-cta--about { padding-bottom: 64px; }
	.a1-cta__sub { font-size: 17px; }
	.a1-cta__btn { padding: 15px 26px; font-size: 15px; }
	/* Full-width stacked buttons read better than two half-width pills. */
	.a1-cta__actions { flex-direction: column; align-items: stretch; }
	.a1-cta__btn { text-align: center; }
}

/* Service page closing card — prototype SERVICE DETAIL. */
.a1-svccta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: var(--wp--preset--spacing--60);
	padding: 32px;
	background: var(--wp--preset--color--wash);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 22px;
}

.a1-svccta__title {
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.a1-svccta__sub {
	margin: 8px 0 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	color: var(--wp--preset--color--text-tertiary);
}

/* ---------------------------------------------------------------------------
   CookieYes banner, in the site's palette.

   CookieYes writes its colours as INLINE styles on each button, taken from its
   own settings screen — `style="color:#FFFFFF;background-color:#1863DC"`. An
   inline style outranks any stylesheet rule, so these overrides carry
   !important. That is not a shortcut here; it is the only thing that beats an
   inline attribute short of editing the plugin's stored settings, and keeping
   it in the theme means the styling travels with the design rather than living
   in a plugin screen someone can change without noticing.

   The banner is the first thing a visitor sees, so default-blue against cream
   reads as a third-party bolt-on. Accept takes the green the rest of the site
   uses for primary actions; Reject and Customize are quiet outlines, equal in
   weight to each other so the choice is not visually loaded.
   --------------------------------------------------------------------------- */

.cky-consent-container,
.cky-modal {
	font-family: var(--wp--preset--font-family--sans);
}

.cky-consent-container .cky-consent-bar,
.cky-modal .cky-preference-center {
	background-color: var(--wp--preset--color--cream) !important;
	border: 1px solid var(--wp--preset--color--rule) !important;
	color: var(--wp--preset--color--ink) !important;
}

.cky-title,
.cky-preference-title,
.cky-accordion-header .cky-accordion-btn {
	color: var(--wp--preset--color--ink) !important;
}

.cky-notice-des,
.cky-preference-content-wrapper,
.cky-accordion-header-des,
.cky-gpc-wrapper .cky-gpc-desc {
	color: var(--wp--preset--color--text-secondary) !important;
}

/* Primary action. */
.cky-btn-accept {
	background-color: var(--wp--preset--color--green) !important;
	border-color: var(--wp--preset--color--green) !important;
	color: var(--wp--preset--color--on-dark) !important;
}

.cky-btn-accept:hover,
.cky-btn-accept:focus-visible {
	background-color: var(--wp--preset--color--green-hover) !important;
	border-color: var(--wp--preset--color--green-hover) !important;
}

/* Secondary actions — outlined, and deliberately equal to each other. */
.cky-btn-reject,
.cky-btn-customize,
.cky-btn-preferences {
	background-color: transparent !important;
	border-color: var(--wp--preset--color--rule-strong) !important;
	color: var(--wp--preset--color--ink) !important;
}

.cky-btn-reject:hover,
.cky-btn-customize:hover,
.cky-btn-preferences:hover,
.cky-btn-reject:focus-visible,
.cky-btn-customize:focus-visible,
.cky-btn-preferences:focus-visible {
	background-color: var(--wp--preset--color--wash) !important;
	border-color: var(--wp--preset--color--ink) !important;
}

.cky-btn {
	border-radius: 4px !important;
	font-weight: 600;
}

/* Phones (staging review, 10 Nov 2026): the library's box stacked its three
   buttons full width and covered about half the first screen. Here it is a
   slim bar on the bottom edge: short text, and the three choices in one row,
   still equal in size so Reject stays as easy as Accept. */
@media (max-width: 575px) {
	.cky-consent-container.cky-box-bottom-left,
	.cky-consent-container.cky-box-bottom-right {
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		max-width: none !important;
	}
	.cky-consent-container .cky-consent-bar {
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
		border-width: 1px 0 0 !important;
		border-radius: 0 !important;
		box-shadow: 0 -4px 16px rgb(0 0 0 / 0.08) !important;
	}
	.cky-consent-container .cky-title {
		margin: 0 0 4px !important;
		font-size: 15px !important;
		line-height: 1.3 !important;
	}
	.cky-consent-container .cky-notice-des,
	.cky-consent-container .cky-notice-des p {
		margin: 0 !important;
		font-size: 13px !important;
		line-height: 1.45 !important;
	}
	.cky-consent-container .cky-notice-group {
		display: block !important;
	}
	.cky-consent-container .cky-notice-btn-wrapper {
		display: flex !important;
		flex-flow: row nowrap !important;
		gap: 8px !important;
		margin: 10px 0 0 !important;
		padding: 0 !important;
	}
	.cky-consent-container .cky-notice-btn-wrapper .cky-btn {
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0 !important;
		min-height: 44px !important;
		margin: 0 !important;
		padding: 0 6px !important;
		font-size: 14px !important;
		line-height: 1.2 !important;
		white-space: normal !important;
	}
}

/* The floating "manage consent" tab. */
.cky-btn-revisit-wrapper {
	background-color: var(--wp--preset--color--green) !important;
}

.cky-btn-revisit-wrapper .cky-btn-revisit img,
.cky-btn-revisit-wrapper .cky-btn-revisit svg {
	filter: brightness(0) invert(1);
}

/* Category toggles. */
.cky-switch input[type="checkbox"]:checked {
	background-color: var(--wp--preset--color--green) !important;
}

.cky-consent-container a,
.cky-modal a {
	color: var(--wp--preset--color--green) !important;
	text-decoration-color: var(--wp--preset--color--gold) !important;
}

/* ---------------------------------------------------------------------------
   Phone header: let the site name finish.

   The narrow bar clips the brand name by design — the two actions keep their
   width and the title is what gives. That is the right priority, but at 14px
   "A1 Diagnostics" was landing one character short and rendering as
   "A1 Diagnosti…", which reads as a broken logo rather than a deliberate
   truncation. Tightening the type and the action padding buys back roughly
   17px, enough for the name to finish on a 375px screen. The ellipsis rule is
   left in place, so a longer title still degrades safely.
   --------------------------------------------------------------------------- */

@media (max-width: 600px) {
	.a1-head__row { gap: 10px; }
	.a1-headcta { gap: 8px; }
	.a1-headcta__btn { padding: 11px 14px; font-size: 13px; }
	.a1-brand { gap: 8px; }
	.a1-brand__mark img { width: 30px; height: 30px; }
	.a1-brand__name { font-size: 13px; letter-spacing: -0.01em; }
}

/* ---------------------------------------------------------------------------
   Palette audit, second pass.

   A sweep of every rendered element's computed colours turned up three things
   the first pass missed. Recorded here because each is easy to reintroduce.

   1. The CookieYes preference modal's internals — the cookie audit tables, the
      notice text, the "Show more" toggle and the "Always Active" flag — are
      styled separately from the banner and kept plugin defaults: #EBEBEB
      rules, #212121 text, #F4F4F4 fills, #1863DC blue and pure #008000 green.
   2. <button> does not inherit font-family. The theme's own hamburger and
      drawer close button were rendering in Arial while everything around them
      was Instrument Sans.
   3. The WhatsApp bubble carried WhatsApp's own brand green.
   --------------------------------------------------------------------------- */

/* 1. Cookie modal internals. */
.cky-audit-table,
.cky-audit-table .cky-cookie-des-table,
.cky-audit-table li,
.cky-accordion,
.cky-accordion-wrapper {
	border-color: var(--wp--preset--color--rule) !important;
}

.cky-audit-table {
	background-color: var(--wp--preset--color--wash) !important;
}

.cky-notice-group,
.cky-notice-des *,
.cky-audit-table li div,
.cky-cookie-des-table li div {
	color: var(--wp--preset--color--text-secondary) !important;
}

.cky-show-desc-btn {
	color: var(--wp--preset--color--green) !important;
}

.cky-always-active {
	color: var(--wp--preset--color--green) !important;
}

/* 2. Buttons inherit the page's typeface rather than the UA default. */
.a1-headcta__burger,
.a1-drawer__close,
.cky-btn,
.cky-btn-revisit,
.cky-btn-close {
	font-family: inherit;
}

/* 3. The WhatsApp bubble now takes the palette: anthracite with a cream glyph
   (design review and owner decision, 11 Sep 2026). The WhatsApp glyph alone
   identifies it. See the Floating WhatsApp button block. */

/* ---------------------------------------------------------------------------
   Ninja Forms, the parts the block above does not reach.

   Found by sweeping computed colours across the contact page: the required
   asterisk shipped as pure #E80000, the honeypot and reCAPTCHA fallbacks
   carried UA-default borders, and fourteen elements rendered in Arial because
   form controls do not inherit font-family.
   --------------------------------------------------------------------------- */

.nf-form-cont,
.nf-form-cont * {
	font-family: inherit;
}

.nf-field-element select,
.nf-field-element input:not([type="button"]):not([type="submit"]),
.nf-field-element textarea {
	background: var(--wp--preset--color--cream) !important;
	border: 1px solid var(--wp--preset--color--rule) !important;
	color: var(--wp--preset--color--ink) !important;
}

.nf-field-element input:focus-visible,
.nf-field-element textarea:focus-visible,
.nf-field-element select:focus-visible {
	outline: 2px solid var(--wp--preset--color--green);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--ink) !important;
}

.nf-field-element ::placeholder {
	color: var(--wp--preset--color--text-tertiary);
	opacity: 1;
}

/* The required marker. Pure red against cream is louder than anything else on
   the page; the gold carries the same "attend to this" weight in the palette's
   own voice, and the asterisk's meaning is carried by the label text anyway. */
.ninja-forms-req-symbol,
.nf-form-fields-required {
	color: var(--wp--preset--color--gold) !important;
}

.nf-error-msg,
.nf-error .nf-field-element input,
.nf-error .nf-field-element textarea {
	border-color: var(--wp--preset--color--gold) !important;
}

.nf-error-msg {
	color: var(--wp--preset--color--ink) !important;
	font-size: var(--wp--preset--font-size--xs);
}

.nf-response-msg,
.nf-response-msg p {
	color: var(--wp--preset--color--ink) !important;
}

.nf-field-element input[type="button"]:hover,
.nf-field-element input[type="submit"]:hover {
	background: var(--wp--preset--color--green-hover) !important;
}

/* Honeypot — hidden from people, but it still inherits a UA border in the
   audit, so it is pinned rather than left to the browser. */
.nf-field-hp {
	border-color: transparent !important;
}

/* ---------------------------------------------------------------------------
   Legacy Visual Composer content, mapped onto the palette.

   The 31 manufacturer pages and 240 service pages still hold Visual Composer
   markup written for the old theme, with colours inline on the stored content:
   #212121 and #070707 panels, #4E4A40 / #959EA7 / #A38D8D columns, #333333
   links and #646568 excerpts. The cutover deliberately does not rewrite that
   content — it only assigns templates — so the colours arrive with it.

   Visual Composer writes the panel and column colours into id-keyed inline
   stylesheets, not onto the markup, so they are remapped in PHP before they
   are printed: see inc/legacy-colours.php. (An earlier version of this block
   used [style*=…] selectors here; they never matched, and were removed on
   10 September 2026.) What is left below is colour that does reach the markup
   or comes from Visual Composer's own element CSS.
   --------------------------------------------------------------------------- */

.vce-content-wrapper a:not([class*="button"]),
.vce-post-description a {
	color: var(--wp--preset--color--ink);
	text-decoration-color: var(--wp--preset--color--gold);
}

.vce-post-description--excerpt,
.vce-post-description--excerpt * {
	color: var(--wp--preset--color--text-secondary) !important;
}

/* ---------------------------------------------------------------------------
   Declare the design's colour scheme.

   The palette is a single light scheme — cream ground, anthracite text — with
   no dark variant. The theme never said so, which leaves two things to chance:
   a browser in dark mode may apply its own automatic dark transform to the
   page, and form controls, scrollbars and the canvas behind the document all
   render in the UA's dark defaults rather than the design's.

   `color-scheme: light` states the intent, so the UA stops guessing. The
   explicit background on html as well as body covers the canvas: body's
   background propagates to the canvas only while html has none, and that is a
   quiet dependency to leave in place when a plugin could set one at any time.
   --------------------------------------------------------------------------- */

html {
	color-scheme: light;
	background-color: var(--wp--preset--color--cream);
}

body {
	background-color: var(--wp--preset--color--cream);
}

/* ---------------------------------------------------------------------------
   Accessibility corrections found by a computed-contrast sweep.

   1. THE RATING STARS WERE PRINTING THEIR OWN LABEL.
      .a1-stars hides its text with font-size:0 and draws ★★★★★ in ::before,
      so the words stay in the DOM for screen readers only. Measured on the
      rendered page, the text node was painting at 142x19px — the font-size:0
      was being lost in the cascade, so the review heading read
      "★★★★★Rated five out of five", with the words in gold on cream at 2.5:1.

      Rather than win a specificity argument that a future plugin could reopen,
      the text is hidden two independent ways: font-size:0 and a transparent
      colour. The glyph sets its own colour so it survives both.

   2. FOOTER COLUMN HEADINGS FAILED AA.
      Half-ink at 10px measured 2.5:1 against cream, where AA asks 4.5:1.
      Moved to the text-secondary token — the same hue, a little more present,
      still clearly subordinate to the links beneath it.

   Left alone deliberately: the topstrip's "|" separators sit at 1.53:1, but
   they carry no information and are exempt as decorative. Raising them would
   make punctuation compete with the words either side of it.
   --------------------------------------------------------------------------- */

.a1-stars {
	font-size: 0 !important;
	line-height: 0;
	color: transparent;
}

.a1-stars::before {
	color: var(--wp--preset--color--gold);
	line-height: 1;
}

.a1-footer__col .a1-eyebrow {
	color: var(--wp--preset--color--text-secondary);
}

/* ---------------------------------------------------------------------------
   Focus rings that survive a dark ground.

   The global focus state is a 2px British Racing Green outline, which reads
   clearly against cream. Against the site's dark surfaces — the hero, and any
   band carrying the ink or green background — green on dark measures under
   2:1, so a keyboard user loses the ring exactly where the page's main calls
   to action live.

   WCAG 2.2's focus-appearance guidance asks for 3:1 against what surrounds
   the indicator, so the ring flips to cream in those contexts. Same weight,
   same offset; only the hue changes with the ground beneath it.
   --------------------------------------------------------------------------- */

.a1-hero :where(a, button, input, select, textarea, [tabindex]):focus-visible,
.has-ink-background-color :where(a, button, input, select, textarea, [tabindex]):focus-visible,
.has-green-background-color :where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--cream);
}

/* Third palette pass — two survivors found by a full computed-colour sweep.

   Ninja Forms colours its field WRAPPERS separately from the form container,
   at #070707, so the labels sat a shade off the ink used everywhere else.
   And CookieYes styles its "No cookies to display" line on its own at #212121.

   That line is worth reading rather than just recolouring: it appears under
   every category because the cookie scan has never been run. On staging that
   is cosmetic. On live it means the cookie notice declares no cookies while
   the site sets analytics and advertising ones. */

.nf-form-cont .field-wrap,
.nf-form-cont .field-wrap label,
.nf-form-cont .field-wrap legend,
.nf-form-cont .nf-field-description,
.nf-form-cont .nf-field-label {
	color: var(--wp--preset--color--ink) !important;
}

.cky-empty-cookies-text,
.cky-audit-table .cky-empty-cookies-text {
	color: var(--wp--preset--color--text-secondary) !important;
}

/* Re-asserted after the field-wrap rule above, which would otherwise inherit
   over it — the required marker stays gold. */
.nf-form-cont .ninja-forms-req-symbol,
.ninja-forms-req-symbol {
	color: var(--wp--preset--color--gold) !important;
}

/* The audit-table containers set their own #212121. Their only visible child
   is already corrected, so nothing renders wrong — but leaving the
   declaration in place means the next element added inside one inherits it. */
.cky-audit-table {
	color: var(--wp--preset--color--text-secondary) !important;
}

/* ---------------------------------------------------------------------------
   Ninja Forms field wrappers.

   Form 1 — the enquiry form on the service and manufacturer pages — carries
   per-field colours in its own saved settings, and Ninja Forms prints them as
   an inline block keyed by field id:

       .nf-form-content .nf-field-container #nf-field-1-wrap { background:#000 }

   So every field sat in a pure black box. Worse, the third palette pass above
   recoloured the labels to ink without touching that background, which left
   "Name *" reading at about 1.4:1 — present in the markup and invisible on
   screen. This clears the wrappers so the labels sit on the section behind
   them, where the rest of the form already lives.

   The inputs and the submit button are already forced to the palette further
   up; only the wrappers were missed.
   --------------------------------------------------------------------------- */

.nf-form-cont .nf-field-container .field-wrap,
.nf-form-cont .nf-field-container .nf-field-label,
.nf-form-cont .nf-field-container .nf-field-label label,
.nf-form-cont .nf-field-container .nf-field-element,
.nf-form-cont .nf-field-container .submit-wrap {
	background-color: transparent !important;
}

/* ---------------------------------------------------------------------------
   Blog Designer listings.

   /blog/ is rendered by the Blog Designer plugin, not by the theme, and it
   ships its own palette: #222 titles, #999 meta and excerpt, a #2E93EA blue
   for the Read More button and the current page number, and #CECECE for the
   rest of the pagination. None of it is ours, and the Read More button put
   #CECECE on that blue — about 2.4:1, below AA for a control.

   The plugin sets its title colour with !important, so these rules carry one
   extra class to win on specificity rather than on source order.
   --------------------------------------------------------------------------- */

.a1-page__body .bdp_blog_template .bd-blog-header h2 a,
.a1-page__body .bdp_blog_template .blog_header h2 a,
.a1-page__body .bdp_blog_template .bd-blog-header h2 a span {
	color: var(--wp--preset--color--ink) !important;
}

.a1-page__body .bdp_blog_template .bd-blog-header h2 a:hover,
.a1-page__body .bdp_blog_template .bd-blog-header h2 a:hover span {
	color: var(--wp--preset--color--green) !important;
}

.a1-page__body .bdp_blog_template .bd-meta-datas {
	color: var(--wp--preset--color--text-tertiary) !important;
}

.a1-page__body .bdp_blog_template .bd-post-content {
	color: var(--wp--preset--color--text-secondary) !important;
}

/* The Read More control, given the same shape as every other button on the
   site rather than the plugin's square blue one. */
.a1-page__body .bdp_blog_template .bd-more-tag {
	display: inline-block;
	padding: 10px 22px;
	background: var(--wp--preset--color--green) !important;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--cream) !important;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-decoration: none;
}

.a1-page__body .bdp_blog_template .bd-more-tag:hover,
.a1-page__body .bdp_blog_template .bd-more-tag:focus-visible {
	background: var(--wp--preset--color--green-hover) !important;
	color: var(--wp--preset--color--cream) !important;
}

/* Pagination. The current page reads as the filled one, the rest as quiet
   links on the wash — the same relationship the nav uses. */
.a1-page__body .bdp_wrapper .page-numbers {
	background: var(--wp--preset--color--wash) !important;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--ink) !important;
}

.a1-page__body .bdp_wrapper .page-numbers:hover {
	background: var(--wp--preset--color--rule-soft) !important;
	color: var(--wp--preset--color--green) !important;
}

.a1-page__body .bdp_wrapper .page-numbers.current {
	background: var(--wp--preset--color--green) !important;
	color: var(--wp--preset--color--cream) !important;
}

.a1-page__body .bdp_wrapper .page-numbers.dots {
	background: transparent !important;
	color: var(--wp--preset--color--text-tertiary) !important;
}

/* ---------------------------------------------------------------------------
   The blog.

   The category archives are a finding aid — a uniform grid, because when you
   are looking for one article every card should look the same. The blog is for
   browsing, so it is built on a different principle: one piece is given the
   room to make its case, two more get most of it, and the rest sit small enough
   to scan. Nothing new is introduced; the same cards are simply weighted.
   --------------------------------------------------------------------------- */

.a1-blog__masthead { padding-bottom: var(--wp--preset--spacing--30); }

.a1-rest__meta {
	margin: 0;
	font-size: var(--wp--preset--font-size--xxs);
	color: var(--wp--preset--color--text-tertiary);
}

/* The rest ------------------------------------------------------------ */

.a1-blog__more {
	margin: 0 0 var(--wp--preset--spacing--30);
	letter-spacing: -0.015em;
}

.a1-blog__rest .wp-block-post-template,
.a1-blog__rest > ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 2.4vw, 32px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.a1-rest__media img {
	width: 100%;
	border-radius: var(--wp--custom--radius--sm);
	margin-bottom: 12px;
}

.a1-rest__title {
	margin: 0 0 8px;
	line-height: 1.28;
	letter-spacing: -0.01em;
}

.a1-rest__title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.a1-rest__title a:hover { color: var(--wp--preset--color--green); }

@media (max-width: 1024px) {
	.a1-blog__rest .wp-block-post-template,
	.a1-blog__rest > ul { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
	.a1-blog__rest .wp-block-post-template,
	.a1-blog__rest > ul { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.a1-blog__rest .wp-block-post-template,
	.a1-blog__rest > ul { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Two measured corrections.

   R2 — a legacy gallery image laid out at 460px inside a 375px screen. The page
   did not scroll sideways because an ancestor contained it, which meant part of
   the photograph was simply unreachable on a phone.

   R3 — the quick-link chips measured 118x23. WCAG 2.2 asks for 24x24, and the
   exemption for links inline in a sentence does not cover a list of them.
   --------------------------------------------------------------------------- */

.vce-image-gallery-img,
.a1-page__body img,
.a1-service-body img,
.a1-marque__body img {
	max-width: 100%;
	height: auto;
}

.a1-quick__card a,
.a1-jobs__list a,
.a1-ac__chip {
	display: inline-block;
	min-height: 24px;
	line-height: 24px;
}

/* ---------------------------------------------------------------------------
   Header between 1180px and 1279px.

   The full menu appears at 1180px, but the logo (196px), the menu (558px) and
   both actions (309px) with two 32px gaps need a 1,126px row — and at 1180 to
   1239px the row is narrower than that. The actions wrapped onto a second line,
   and because the bar is a fixed 72px tall the second line spilled out of it:
   up over the announcement strip and down over the page. Measured 10 September
   2026 at 1180, 1200 and 1220px, spilling 49px each time.

   Through that band the phone number collapses to its icon, which is exactly
   how the narrow bar already shows it. The actions drop to 194px and the row
   needs 1,012px, which fits with room to spare.
   --------------------------------------------------------------------------- */

@media (min-width: 1180px) and (max-width: 1279px) {
	.a1-headcta__telno { display: none; }
	.a1-headcta__tel { padding: 11px; }
}

/* And if something ever does push the bar onto two lines — a longer site title,
   a translated menu, a fallback font — it grows to hold them instead of
   letting them sit on top of the page. At its normal content it measures the
   same 72px, so nothing moves today. */
.a1-head {
	height: auto;
	min-height: 72px;
}

@media (max-width: 600px) {
	.a1-head { min-height: 64px; }
}

/* ---------------------------------------------------------------------------
   Header on scroll, 10 September 2026.
   ------------------------------------------------------------------------- */

/* The strip and the bar sat 24px apart: .a1-chrome is a flow layout, which
   gives every child after the first a 24px top margin. At the top of the page
   the gap matched the page ground; scrolled, content showed through it. */
.a1-chrome > * { margin-block-start: 0; }

/* The same 24px flow margin sat between the header and <main>: a cream strip
   under the bar and above the homepage hero photo. */
.wp-site-blocks > header + * { margin-block-start: 0; }

/* Only the bar stays. The wrapper sticks at minus the strip's height (measured
   by nav.js), so the strip scrolls away with the page instead of holding its
   40px of every screen. The whole chrome was 137px; the bar alone is 72px. */
.wp-site-blocks > header.wp-block-template-part { top: calc(-1 * var(--a1-strip-h, 40px)); }

/* Logged in, WordPress pins its admin bar (32px, 46px below 783px) over the
   top of the window, and the bar stuck underneath it: the owner's view showed
   the header sliding under STAGING / Edit Page once scrolled. Stick below the
   admin bar instead. Below 600px the admin bar scrolls away with the page, so
   no offset there. Visitors never get the admin-bar class. */
.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: calc(var(--wp-admin--admin-bar--height, 32px) - var(--a1-strip-h, 40px));
}

@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part { top: calc(-1 * var(--a1-strip-h, 40px)); }
}

/* A solid bar. The translucent one let card text blur through under the menu.
   Scrolled, it lifts off the page on a soft ink shadow in place of the rule. */
.a1-head {
	background: var(--wp--preset--color--cream);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.a1-scrolled .a1-head {
	border-bottom-color: transparent;
	box-shadow: 0 1px 0 rgb(55 63 67 / 0.08), 0 10px 30px -12px rgb(55 63 67 / 0.18);
}

/* The enquiry button's 18px green glow read as heavy against the flat bar. */
.a1-headcta__btn { box-shadow: none; transition: background-color 0.2s ease; }

/* Anchors now only have to clear the bar, not bar plus strip. */
:where(.entry-content, .a1-article__body) :is(h2, h3, h4)[id] { scroll-margin-top: 100px; }

@media (prefers-reduced-motion: reduce) {
	.a1-head { transition: none; }
}

/* ---------------------------------------------------------------------------
   Pre-QA corrections, 10 September 2026.

   Found by reviewing full-page captures of 14 pages at 1440px and 390px, and
   by a computed-colour sweep of 22 pages against the palette.
   --------------------------------------------------------------------------- */

/* 1. Flow-layout groups used as grids.
   WordPress gives every child of a flow-layout group a 24px top margin except
   the first. Where the group is a grid, that pushes items 2..n of the first row
   24px below item 1 — measured on the team grid (About), the three contact
   cards, the service page's article and price card, and the blog grid. The
   grid's own gap does the spacing; the margin has to go. Doubled class so it
   outranks core's :root :where(.is-layout-flow) > * rule wherever it prints. */
.a1-team.a1-team > *,
.a1-contact.a1-contact > *,
.a1-service-layout.a1-service-layout > *,
.a1-rest.a1-rest > li {
	margin-block-start: 0;
}

/* 2. Headings and intros in section bands.
   Band h2s, `.a1-measure`, `.a1-band__sub` and the article title are pinned
   to margin-inline 0 auto so their short measure reads from the left. As
   direct children of a constrained band that left is the band's padding
   edge, while their siblings (eyebrow, crumbs, grids) are centred to the
   1180px content width, so they sat 82px left of their own section on
   Services, Brands, Contact, the blog, Advice Centre, manufacturer pages and
   the article "You might also like" band. Start them where the content column
   starts. Bands with their own layout settings carry a wp-container class and
   already put everything on one edge, so they are left alone. Below ~1260px
   the column fills the band and this resolves to 0. */
.a1-band.is-layout-constrained:not([class*="wp-container-core-group-is-layout-"]) > :is(h2, .a1-measure, .a1-band__sub, .a1-article__title) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
}
/* Bands with their own width (the Remote bands and the home "why" band, all
   1400px) centre their eyebrow, grids and buttons to 1400px, but the pinned
   h2 and intro stayed on the band's padding edge. It only shows once the band
   is wider than 1400px, i.e. on large screens where the page is zoomed. */
.a1-band.is-layout-constrained[class*="wp-container-core-group-is-layout-"] > :is(h2, .a1-measure, .a1-band__sub, .a1-article__title) {
	margin-left: max(0px, calc((100% - 1400px) / 2)) !important;
}
/* Large screens (owner's choice, 11 Sep 2026). The design is drawn for 1440px;
   on a 2560-2880px monitor it sat in a narrow strip with 60% of the screen
   empty. Above 1800px the whole page is enlarged as one piece, so type,
   photos, cards and spacing grow together and the layout stays exactly as
   designed. Phones, laptops and the 1440px review view are unchanged. */
@media (min-width: 1800px) { html { zoom: 1.2; } }
@media (min-width: 2200px) { html { zoom: 1.4; } }
@media (min-width: 2600px) { html { zoom: 1.6; } }

/* Service pages: "Related services" sits straight in <main>, not in a band,
   so the rule above never reached it and its 68ch measure left it centred -
   245px right of the checklists above it. Same fix, same edge. */
main.is-layout-constrained > .a1-related {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
}

/* 3. The header phone link below 1280px.
   The number is hidden there and the link was left showing only its 7px
   status dot. Draw a handset in its place, in ink like the number it stands
   for. (Material "call" glyph, Apache 2.0.) */
@media (max-width: 1279px) {
	.a1-headcta__dot {
		width: 16px;
		height: 16px;
		border-radius: 0;
		background: var(--wp--preset--color--ink);
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24 11.36 11.36 0 0 0 3.57.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24 11.36 11.36 0 0 0 3.57.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
	}
}

/* 4. Retired 21 Sep 2026: the blog's lead and pair became photo cards. */

/* 5. Palette. Colours that reach the markup, or come from a plugin's own CSS,
   which the PHP remap in inc/legacy-colours.php cannot see. */

/* White text typed into legacy content, on the dark legacy panels -> cream. */
.wp-block-post-content [style*="color: #fff" i]:not([style*="background" i]),
.wp-block-post-content [style*="color:#fff" i]:not([style*="background" i]),
.wp-block-post-content [style*="color: rgb(255, 255, 255)"]:not([style*="background" i]) {
	color: var(--wp--preset--color--cream) !important;
}

/* The same, where the colour was typed as a word rather than a code — found by
   the site audit on the Ingenium engine page (white) and the brands overview
   (yellow). Yellow on the dark panel becomes the palette's gold. */
.wp-block-post-content [style*="color: white" i]:not([style*="background" i]),
.wp-block-post-content [style*="color:white" i]:not([style*="background" i]) {
	color: var(--wp--preset--color--cream) !important;
}

.wp-block-post-content [style*="color: yellow" i]:not([style*="background" i]),
.wp-block-post-content [style*="color:yellow" i]:not([style*="background" i]) {
	color: var(--wp--preset--color--gold) !important;
}

/* Old posts carry inline text colours from the previous editor — pure blue
   links, pure black text. On a post the ground is always the cream page, so
   the palette's own text colours apply. Backgrounds are left alone. */
.single-post .wp-block-post-content [style*="color:" i]:not([style*="background" i]) {
	color: inherit !important;
}

/* Visual Composer feature sections paint #525251 behind white text, and its
   outline buttons draw #e3e3e3 on #3d3d3d. The panels become ink; the buttons
   become the theme's primary button. */
.vce-feature-section {
	background-color: var(--wp--preset--color--ink) !important;
}

.wp-block-post-content .vce-button {
	background: var(--wp--preset--color--green) !important;
	border-color: var(--wp--preset--color--green) !important;
	color: var(--wp--preset--color--cream) !important;
	border-radius: 100px !important;
}

.wp-block-post-content .vce-button:hover,
.wp-block-post-content .vce-button:focus-visible {
	background: var(--wp--preset--color--green-hover) !important;
	border-color: var(--wp--preset--color--green-hover) !important;
}

.wp-block-post-content .vce-button [class*="-text"] {
	color: var(--wp--preset--color--cream) !important;
}

/* Rules and preformatted text in content. A <pre> in the car-servicing copy
   did not wrap and pushed that page 23px wider than a phone. */
.wp-block-post-content hr {
	border-color: var(--wp--preset--color--rule-strong);
	color: var(--wp--preset--color--rule-strong);
}

.wp-block-post-content pre {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	max-width: 100%;
}

.wp-block-post-content :is(pre, code, kbd, samp) {
	font-family: var(--wp--preset--font-family--mono);
}

/* Visual Composer's FAQ rows draw #dfdfdf rules. They sit on the dark panels,
   so they become the on-dark hairline: cream at low alpha. */
.vce-faq-group-item {
	border-color: rgba(244, 241, 234, 0.24) !important;
}

/* Visual Composer's post grid: white cards and #333 titles -> wash and ink. */
.vce-post-description--background,
.vce-post-description--has-background {
	background-color: var(--wp--preset--color--wash) !important;
}

.vce-post-description--title a {
	color: var(--wp--preset--color--ink) !important;
}

/* Ninja Forms' title bar, #9e9e9e behind the form heading on legacy pages. */
.nf-form-title h3 {
	background-color: var(--wp--preset--color--wash) !important;
	color: var(--wp--preset--color--ink) !important;
}

/* Core search field (404 page): white fill and a #949494 border. */
.wp-block-search .wp-block-search__input {
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--rule-strong);
	color: var(--wp--preset--color--ink);
}

/* 6. Visual Composer "full width" rows inside the theme's columns.
   VC stretches such a row to the window with inline width/left, then pads its
   content by the same offsets so the columns line up with the old theme's
   container. The theme already un-stretches the row, but the inline padding
   stayed: on the MOT page 40px left and 404px right, inside an 816px service
   column, which squeezed two 40% columns to 101px and set their text one
   letter per line. The row now fits its column, so the padding goes. */
.wp-block-post-content .vce-row[data-vce-full-width] > .vce-row-content {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* The YouTube facade letterboxes on black. YouTube's own red play mark is a
   third-party brand mark and keeps its colour. */
.a1-yt-facade.a1-yt-facade {
	background-color: var(--wp--preset--color--ink) !important;
}

/* ---------------------------------------------------------------------------
   7. The enquiry form: one look wherever it appears.

   A survey of all 644 pages carrying a form (10 Sep) found the fields already
   on the palette, but the form itself different everywhere: 272px wide in a
   service column, 1,180px across the contact page with 1,170px inputs, on
   cream on the converted pages and inside ink panels on the legacy ones —
   where the ink labels vanished and only the gold asterisks showed. The
   heading sat in a wash strip, the reCAPTCHA field printed "Recaptcha v2"
   as a label, and the 13px inputs made iPhones zoom in on every tap.

   Now it is one object: a wash card of at most 760px, the heading set as a
   heading, the short fields paired when there is room, 17px inputs, and the
   site's own button. Card and labels no longer depend on what is behind them.
   The wording is made the same in inc/forms.php.
   --------------------------------------------------------------------------- */

.nf-form-cont.nf-form-cont {
	container-type: inline-size;
	box-sizing: border-box;
	max-width: 760px;
	margin-block: var(--wp--preset--spacing--30);
	margin-inline: 0;
	padding: clamp(20px, 3vw, 40px);
	background-color: var(--wp--preset--color--wash) !important;
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink) !important;
	text-align: left;
}

/* On a wash band the card turns cream, so it still reads as a card. */
:is(.has-wash-background-color, .a1-svccta, .a1-cta) .nf-form-cont.nf-form-cont {
	background-color: var(--wp--preset--color--cream) !important;
}

.nf-form-cont .nf-form-title {
	display: block;
	margin: 0 0 var(--wp--preset--spacing--10);
}

.nf-form-cont .nf-form-title h3 {
	margin: 0;
	padding: 0;
	background-color: transparent !important;
	color: var(--wp--preset--color--ink) !important;
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: var(--wp--custom--tracking--heading);
	text-wrap: balance;
}

.nf-form-cont .nf-before-form-content .nf-form-fields-required {
	margin-bottom: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--text-secondary) !important;
	font-size: var(--wp--preset--font-size--xs);
}

.nf-form-cont .nf-form-fields-required .ninja-forms-req-symbol {
	color: var(--wp--preset--color--gold) !important;
}

.nf-form-cont .nf-field-container {
	margin-bottom: 20px;
}

.nf-form-cont .nf-field-label {
	margin-bottom: 6px;
}

.nf-form-cont .nf-field-label label {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* "Recaptcha v2" is not a question anyone is asked. */
.nf-form-cont .recaptcha-container .nf-field-label {
	display: none;
}

.nf-form-cont .nf-field-element :is(input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]), select) {
	height: 52px;
	padding: 0 16px;
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--wp--preset--font-size--md) !important;
	line-height: 1.3;
}

.nf-form-cont .nf-field-element textarea {
	height: 160px;
	min-height: 120px;
	padding: 14px 16px;
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--wp--preset--font-size--md) !important;
	line-height: 1.5;
	resize: vertical;
}

.nf-form-cont .nf-field-element :is(input[type="submit"], input[type="button"]) {
	min-width: 180px;
	height: 52px;
	padding: 0 32px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--green) !important;
	color: var(--wp--preset--color--cream) !important;
	font-size: var(--wp--preset--font-size--sm) !important;
	font-weight: 600;
	letter-spacing: 0.01em;
	opacity: 1;
	transition: background-color 0.2s ease;
}

.nf-form-cont .nf-field-element :is(input[type="submit"], input[type="button"]):hover {
	background-color: var(--wp--preset--color--green-hover) !important;
}

.nf-form-cont .nf-field-element :is(input[type="submit"], input[type="button"])[disabled] {
	opacity: 0.6;
	cursor: progress;
}

/* The same order in both forms: name, phone, email, registration, message.
   Form 1 asked for email before phone; form 2 is already in this order. */
.nf-form-cont :is(nf-rows-wrap, nf-fields-wrap) {
	display: flex;
	flex-direction: column;
}

#nf-form-1-cont :is(nf-rows-wrap, nf-fields-wrap) > * { order: 10; }
#nf-form-1-cont :is(nf-rows-wrap, nf-fields-wrap) > :has(#nf-field-1-container) { order: 1; }
#nf-form-1-cont :is(nf-rows-wrap, nf-fields-wrap) > :has(#nf-field-31-container) { order: 2; }
#nf-form-1-cont :is(nf-rows-wrap, nf-fields-wrap) > :has(#nf-field-2-container) { order: 3; }
#nf-form-1-cont :is(nf-rows-wrap, nf-fields-wrap) > :has(#nf-field-28-container) { order: 4; }
#nf-form-1-cont :is(nf-rows-wrap, nf-fields-wrap) > :has(#nf-field-3-container) { order: 5; }
#nf-form-1-cont :is(nf-rows-wrap, nf-fields-wrap) > :has(#nf-field-27-container) { order: 6; }
#nf-form-1-cont :is(nf-rows-wrap, nf-fields-wrap) > :has(#nf-field-4-container) { order: 7; }

/* Where the card has room, the four short fields pair up. */
@container (min-width: 520px) {
	.nf-form-cont :is(nf-rows-wrap, nf-fields-wrap) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 20px;
	}
	.nf-form-cont :is(nf-rows-wrap, nf-fields-wrap) > * {
		grid-column: 1 / -1;
	}
	.nf-form-cont :is(nf-rows-wrap, nf-fields-wrap) > :has(:is(.textbox-container, .firstname-container, .email-container, .phone-container)) {
		grid-column: auto;
	}
}

/* Narrow cards: full-width button, and reCAPTCHA's fixed 304px widget scaled
   so it cannot push past the card. */
@container (max-width: 519px) {
	.nf-form-cont .nf-field-element :is(input[type="submit"], input[type="button"]) {
		width: 100%;
	}
}

.nf-form-cont .g-recaptcha {
	transform-origin: 0 0;
}

@container (max-width: 300px) {
	.nf-form-cont .g-recaptcha { transform: scale(0.85); margin-bottom: -12px; }
}

@container (max-width: 258px) {
	.nf-form-cont .g-recaptcha { transform: scale(0.76); margin-bottom: -19px; }
}

/* ---------------------------------------------------------------------------
   The blog: topic tabs, photo cards, topic rows (owner's brief, 21 Sep 2026,
   after the StickerApp blog). Built in inc/blog.php.

   The five newest articles carry their headline on the picture, on an ink
   fade, in cream. The topic label is cream too, with a short gold rule:
   gold text on a dark photo does not reach 4.5:1, so gold only draws the line.
   The topic rows reuse the Advice Centre cards.
   --------------------------------------------------------------------------- */

/* Tabs ------------------------------------------------------------------- */

.a1-topics {
	margin-top: var(--wp--preset--spacing--40);
	border-bottom: 2px solid var(--wp--preset--color--ink);
	/* Six tabs do not fit a phone: the row scrolls sideways on its own. */
	overflow-x: auto;
	scrollbar-width: none;
}
.a1-topics::-webkit-scrollbar { display: none; }

.a1-topics__list {
	display: flex;
	gap: clamp(20px, 2.6vw, 36px);
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}
.a1-topics__list > li { margin: 0; }

.a1-topics__tab {
	display: block;
	padding: 12px 0 11px;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	/* The current tab's bar sits on the row's rule. */
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
}
.a1-topics__tab:hover { color: var(--wp--preset--color--green); border-bottom-color: var(--wp--preset--color--rule-strong); }
.a1-topics__tab[aria-current="page"] { color: var(--wp--preset--color--green); border-bottom-color: var(--wp--preset--color--green); }
.a1-topics__tab:focus-visible { outline-offset: -2px; }

/* Photo cards ------------------------------------------------------------- */

.a1-blog__leadband { padding-top: var(--wp--preset--spacing--30); }

.a1-photos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* Minimum heights, not fixed ones: a long headline on a narrow card grows
	   the card instead of running out of its top. */
	grid-template-rows: minmax(clamp(340px, 31vw, 440px), auto) minmax(clamp(300px, 26vw, 370px), auto);
	gap: clamp(14px, 1.6vw, 20px);
}
.a1-photos > * { margin-block-start: 0; }
.a1-photos > :first-child { grid-column: span 2; }

.a1-photo {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--ink);
	box-shadow: var(--wp--custom--shadow--sm);
	/* Keeps the picture's hover zoom inside the rounded corners in Safari. */
	isolation: isolate;
}

.a1-photo__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.a1-photo__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a1-photo__media .a1-crop { aspect-ratio: auto; height: 100%; border-radius: 0; }
/* No usable photo: a plain green card, the headline on it as on the others. */
.a1-photo__media .a1-crop--plain { background: var(--wp--preset--color--green); box-shadow: none; }
.a1-photo__media .a1-crop__label { display: none; }
.a1-photo:hover .a1-photo__media { transform: scale(1.035); }

.a1-photo__text {
	/* The fade lives behind the text, so it is dense wherever there are words,
	   whatever the photo is like underneath. */
	padding: clamp(72px, 8vw, 110px) clamp(18px, 2vw, 26px) clamp(18px, 2vw, 24px);
	background: linear-gradient(to top, rgba(55, 63, 67, .96) 0%, rgba(55, 63, 67, .9) 45%, rgba(55, 63, 67, .55) 75%, rgba(55, 63, 67, 0) 100%);
	color: var(--wp--preset--color--on-dark);
	text-shadow: 0 1px 10px rgba(55, 63, 67, .45);
}

.a1-photo__cat {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--on-dark);
}
.a1-photo__cat::before {
	content: "";
	width: 18px;
	height: 2px;
	flex: none;
	background: var(--wp--preset--color--gold);
}

.a1-photo__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.18;
	letter-spacing: var(--wp--custom--tracking--title);
	text-wrap: balance;
	color: var(--wp--preset--color--on-dark);
}
.a1-photos > :first-child .a1-photo__title {
	font-size: clamp(26px, 2.4vw, 34px);
	letter-spacing: var(--wp--custom--tracking--heading);
	max-width: 24ch;
}

.a1-photo__title a { color: inherit; text-decoration: none; }
/* The headline's link covers the whole card. */
.a1-photo__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.a1-photo__title a:focus-visible { outline: none; }
.a1-photo__title a:focus-visible::after { outline: 3px solid var(--wp--preset--color--green); outline-offset: 3px; border-radius: var(--wp--custom--radius--md); }
.a1-photo:hover .a1-photo__title a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

.a1-photo__sum {
	margin: 8px 0 0;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
	color: var(--wp--preset--color--on-dark-secondary);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.a1-photos > :first-child .a1-photo__sum { font-size: var(--wp--preset--font-size--sm); max-width: 60ch; }

@media (prefers-reduced-motion: reduce) {
	.a1-photo:hover .a1-photo__media { transform: none; }
}

/* Topic rows: the Advice Centre's rows, straight after the photo cards. */

.a1-blog__topicsband { padding-top: 0; }

/* Where the Advice Centre grid drops to two columns, three articles would
   leave one on its own; show two. */
@media (min-width: 601px) and (max-width: 900px) {
	.a1-blog__row .a1-ac__grid > :nth-child(3) { display: none; }
}

/* Smaller screens ------------------------------------------------------------ */

@media (max-width: 1024px) {
	.a1-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(clamp(280px, 40vw, 360px), auto); }
	/* Five cards on two columns: the wide one on its own, then two pairs. */
	.a1-photos > :first-child { grid-column: 1 / -1; grid-row: span 1; }
}

@media (max-width: 600px) {
	.a1-photos { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(300px, auto); }
	/* The tabs scroll sideways here; fade the right edge so it shows. */
	.a1-topics { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); padding-right: 32px; }
	.a1-photos > :first-child { grid-row: span 1; }
	.a1-photos > :first-child .a1-photo__title { font-size: var(--wp--preset--font-size--xl); }
	.a1-photo__sum { -webkit-line-clamp: 3; }
}

/* ===========================================================================
   Staging review, 21 September 2026: section 1 fixes (theme only).
   Everything below is additive; each block names the finding it answers.
   =========================================================================== */

/* --- Enquiry form: registration shown in capitals as it is typed ------- */
.nf-form-cont input.a1-reg { text-transform: uppercase; }
.nf-form-cont input.a1-reg::placeholder { text-transform: none; }

/* --- Phone bar: Call, WhatsApp, Enquire (below 768px) ---------------------
   Replaces the floating WhatsApp bubble on phones, which covered cards and the
   footer text. The page gets bottom padding of the bar's height, so the bar
   never sits over the end of the page. */
.a1-mbar { display: none; }

@media (max-width: 767px) {
	.a1-mbar {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 55;
		display: grid;
		grid-template-columns: 1fr 1fr 1.2fr;
		gap: 8px;
		padding: 8px max(12px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right));
		background: var(--wp--preset--color--cream);
		border-top: 1px solid var(--wp--preset--color--rule-strong);
		box-shadow: 0 -8px 24px rgb(55 63 67 / 0.08);
	}
	.a1-mbar__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		min-height: 44px;
		border: 1px solid var(--wp--preset--color--rule-strong);
		border-radius: var(--wp--custom--radius--pill);
		font-size: var(--wp--preset--font-size--xs);
		font-weight: 600;
		color: var(--wp--preset--color--ink);
		text-decoration: none;
	}
	.a1-mbar__btn--primary {
		background: var(--wp--preset--color--green);
		border-color: var(--wp--preset--color--green);
		color: var(--wp--preset--color--cream);
	}
	.a1-mbar__btn:active { transform: scale(0.97); }
	body { padding-bottom: calc(61px + env(safe-area-inset-bottom)); }
	.a1-wa { display: none; }
	/* The menu drawer covers the page; the bar would sit over its foot. */
	.a1-drawer-open .a1-mbar { display: none; }
	/* CookieYes's "manage consent" tab sits bottom-left: lift it above the bar. */
	.cky-btn-revisit-wrapper { bottom: calc(72px + env(safe-area-inset-bottom)) !important; }
}

@media print { .a1-mbar { display: none !important; } }

/* --- Menus: the page dims behind an open panel; hover waits 120ms --------- */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 59;
	background: rgb(55 63 67 / 0.35);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, visibility 0.18s;
}
@media (min-width: 1180px) {
	body:has(.a1-nav__item--has-menu:is(:hover, :focus-within, .is-open) .a1-nav__panel)::after {
		opacity: 1;
		visibility: visible;
		transition-delay: 0.12s;
	}
}
/* Opening on hover waits a moment, so crossing the bar does not flash panels
   open; closing, keyboard focus and taps stay immediate. */
.a1-nav__item--has-menu:hover:not(:focus-within, .is-open) .a1-nav__panel { transition-delay: 0.12s; }

/* The current section of the site, marked in the bar with a gold rule. */
.a1-nav__link[aria-current="page"],
.a1-nav__toggle.is-current { box-shadow: inset 0 -2px 0 var(--wp--preset--color--gold); border-radius: 8px 8px 0 0; }

/* --- Services menu: one highlight instead of six repeated links ---------- */
.a1-mega__highlight {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 14px;
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: border-color 0.18s ease, transform 0.18s ease;
}
.a1-mega__highlight:hover { border-color: var(--wp--preset--color--ink); transform: translateY(-2px); }
.a1-mega__highlight img { display: block; width: 100%; height: 150px; object-fit: cover; background: var(--wp--preset--color--wash); }
.a1-mega__hltext { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px 18px; }
.a1-mega__hltext .a1-mega__eyebrow { margin: 0; }
.a1-mega__hltitle { font-size: var(--wp--preset--font-size--lg); font-weight: 600; letter-spacing: -0.02em; }
.a1-mega__hlprice { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--text-secondary); }
.a1-mega__hlbtn {
	margin-top: 6px;
	padding: 9px 16px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--cream);
	font-size: 13.5px;
	font-weight: 600;
}

/* --- Closing call to action, trade version (Remote pages) ---------------- */
.a1-cta--trade .a1-cta__sub { max-width: 52ch; margin-inline: auto; }

/* --- Brand pages: long job lists fold away -------------------------------- */
.a1-jobs__more summary {
	cursor: pointer;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	color: var(--wp--preset--color--green);
	list-style: none;
}
.a1-jobs__more summary::-webkit-details-marker { display: none; }
.a1-jobs__more summary::after { content: " +"; }
.a1-jobs__more[open] summary { margin-bottom: 10px; }
.a1-jobs__more[open] summary::after { content: " \2212"; }

/* --- Homepage FAQ: questions and a help panel side by side ---------------- */
.a1-faqwrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
	margin-top: var(--wp--preset--spacing--40);
}
/* The FAQ's own margin-inline: 0 auto (set earlier, !important) would shrink
   it to its content inside the grid. */
.a1-faqwrap > .a1-faq { max-width: none; margin: 0 !important; }
.a1-faqhelp {
	position: sticky;
	top: 120px;
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--on-dark);
}
/* !important: the panel sits inside page content, where the legacy rules force
   every p to inherit its size. */
.a1-faqhelp .a1-faqhelp__title { margin: 0; font-size: var(--wp--preset--font-size--xl) !important; font-weight: 600; letter-spacing: var(--wp--custom--tracking--heading); }
.a1-faqhelp .a1-faqhelp__sub { margin: 8px 0 20px; font-size: var(--wp--preset--font-size--sm) !important; color: var(--wp--preset--color--on-dark-secondary); }
.a1-faqhelp__actions { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.a1-faqhelp__btn {
	display: block;
	padding: 12px 18px;
	border: 1px solid rgb(244 241 234 / 0.35);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--on-dark);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}
.a1-faqhelp__btn:hover { border-color: var(--wp--preset--color--on-dark); }
.a1-faqhelp__btn--primary { background: var(--wp--preset--color--green); border-color: var(--wp--preset--color--green); }
.a1-faqhelp__btn--primary:hover { background: var(--wp--preset--color--green-hover); }
.a1-faqhelp__btn:focus-visible { outline-color: var(--wp--preset--color--gold); }
.a1-faqhelp .a1-faqhelp__hours {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid rgb(244 241 234 / 0.2);
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: var(--wp--preset--font-size--xs) !important;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--on-dark-secondary);
}
@media (max-width: 899px) {
	.a1-faqwrap { grid-template-columns: minmax(0, 1fr); }
	.a1-faqhelp { position: static; }
}

/* --- Remote page ----------------------------------------------------------
   The Bodyshops card sat 29px below Garages: WordPress's blockGap margin on
   the second grid item. And the equipment tiles are links now. */
.a1-audience > * { margin-block: 0; }
.a1-equip__card--link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: border-color 0.18s ease, transform 0.18s ease;
}
.a1-equip__card--link::after { content: "\2192"; color: var(--wp--preset--color--green); transition: transform 0.18s ease; }
.a1-equip__card--link:hover { border-color: var(--wp--preset--color--ink); transform: translateY(-2px); }
.a1-equip__card--link:hover::after { transform: translateX(3px); }

/* --- Fault codes: the next step after a search ---------------------------- */
.a1-index__next {
	margin: var(--wp--preset--spacing--30) 0;
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--on-dark);
}
.a1-index__nexttitle { margin: 0; font-size: var(--wp--preset--font-size--lg); font-weight: 600; letter-spacing: var(--wp--custom--tracking--title); }
.a1-index__nexttitle span { font-family: var(--wp--preset--font-family--mono); }
.a1-index__nextsub { margin: 8px 0 18px; max-width: 64ch; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--on-dark-secondary); }
.a1-index__nextactions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.a1-index__nextbtn {
	padding: 11px 20px;
	border: 1px solid rgb(244 241 234 / 0.4);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--on-dark);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-decoration: none;
}
.a1-index__nextbtn--primary { background: var(--wp--preset--color--cream); border-color: var(--wp--preset--color--cream); color: var(--wp--preset--color--green); }
.a1-index__nextbtn:focus-visible { outline-color: var(--wp--preset--color--gold); }

/* --- Blog posts: easier to read -------------------------------------------
   Body text was 15px. 17px is the next step on the type scale, with longer
   line spacing, the 68-character measure already set on the column, and more
   room above headings. The legacy rules force p/li/span to inherit, so the
   size is set once on the content wrapper. */
.single-post .a1-article__body .entry-content { font-size: var(--wp--preset--font-size--md); line-height: 1.7; }
.single-post .a1-article__body .entry-content :is(p, li) { line-height: 1.7; }
.single-post .a1-article__body h2 { margin-top: var(--wp--preset--spacing--50); }
.single-post .a1-article__body h3 { margin-top: var(--wp--preset--spacing--40); }
/* Line length (staging re-check, 21 Sep): the 68ch measure is 68 zeros, which in
   Instrument Sans is 90-99 letters a line. 34em holds a post line to about 70. */
.single-post .a1-article__body .entry-content > :is(p, ul, ol, blockquote) { max-width: min(34em, 100%); }
.single-post .a1-article__body .entry-content > :is(h2, h3, h4) { max-width: min(578px, 100%); }

/* --- Phones: long card stacks become rows that swipe -----------------------
   "Why choose us", the equipment tiles and the make tiles stacked into long
   single columns (the homepage measured 10,700px on a phone). Each shows a
   little of the next card so it is clear there is more. */
@media (max-width: 767px) {
	.a1-why,
	.a1-tech,
	.a1-brands:not(.a1-brands--index) {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding-bottom: 4px;
	}
	.a1-why::-webkit-scrollbar,
	.a1-tech::-webkit-scrollbar,
	.a1-brands:not(.a1-brands--index)::-webkit-scrollbar { display: none; }
	.a1-why > *,
	.a1-tech > * { flex: 0 0 82%; scroll-snap-align: start; }
	.a1-brands:not(.a1-brands--index) > * { flex: 0 0 38%; scroll-snap-align: start; }
}

/* --- Images: a quiet ground while they load ------------------------------- */
:is(.a1-quick__card, .a1-advice__media, .a1-rest__media, .wp-block-post-featured-image, .wp-block-latest-posts__featured-image) img {
	background-color: var(--wp--preset--color--wash);
}

/* --- Gold, used sparingly: a short rule before each small section label.
   Never gold text on cream; gold fails contrast there at every size. */
.a1-eyebrow:not(label)::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 2px;
	margin-right: 10px;
	vertical-align: middle;
	background: var(--wp--preset--color--gold);
	transform: translateY(-1px);
}

/* Card titles: the hover underline is drawn in gold. */
:is(.a1-ac__title, .a1-rest__title, .a1-advice__title) a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* ===========================================================================
   Motion. One vocabulary everywhere: things rise into place once, cards lift,
   buttons press. All of it is off for visitors who ask for reduced motion.
   =========================================================================== */
@media (prefers-reduced-motion: no-preference) {

	/* Cards lift on hover; their photo grows a little. */
	:is(.a1-ac__card, .a1-rest > li, .a1-advice > li, .a1-quick__card, .a1-audience__card) {
		transition: transform 0.3s cubic-bezier(.2, .7, .2, 1), border-color 0.3s ease;
	}
	:is(.a1-ac__card, .a1-rest > li, .a1-advice > li, .a1-quick__card, .a1-audience__card):hover { transform: translateY(-3px); }
	:is(.a1-ac__media, .a1-rest__media, .a1-advice__media) { overflow: hidden; }
	:is(.a1-ac__media, .a1-rest__media, .a1-advice__media) img { transition: transform 0.4s cubic-bezier(.2, .7, .2, 1); }
	:is(.a1-ac__card, .a1-rest > li, .a1-advice > li):hover :is(.a1-ac__media, .a1-rest__media, .a1-advice__media) img { transform: scale(1.04); }

	/* Buttons press in, and an arrow nudges forward. */
	:is(.a1-cta__btn, .wp-block-button__link, .a1-headcta__btn, .a1-mega__cta, .a1-faqhelp__btn, .a1-index__nextbtn):active { transform: scale(0.97); }
	:is(.a1-cta__btn, .wp-block-button__link, .a1-headcta__btn, .a1-mega__cta) { transition: transform 0.12s ease, background-color 0.18s ease, border-color 0.18s ease; }
	:is(.a1-ac__more a, .a1-ac__viewall)::after { display: inline-block; transition: transform 0.2s ease; }
	:is(.a1-ac__more a, .a1-ac__viewall):hover::after { transform: translateX(3px); }

	/* FAQ: the answer opens smoothly and the + turns into a ×. */
	.a1-faq__item summary::after { content: "+"; transition: transform 0.25s ease; }
	.a1-faq__item[open] summary::after { content: "+"; transform: rotate(45deg); }
	@supports (interpolate-size: allow-keywords) {
		.a1-faq__item { interpolate-size: allow-keywords; }
		.a1-faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size 0.25s ease, content-visibility 0.25s allow-discrete; }
		.a1-faq__item[open]::details-content { block-size: auto; }
	}

	/* Sections' cards rise 12px into place the first time they scroll into
	   view. Browsers without scroll-driven animation show them as they are. */
	@supports (animation-timeline: view()) {
		:is(.a1-why__card, .a1-quick__card, .a1-advice > li, .a1-ac__card, .a1-photo, .a1-tech > p, .a1-audience__card, .a1-equip__card, .a1-quote) {
			animation: a1-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 35%;
		}
	}

	/* Blog posts: a thin gold bar across the top fills as you read. */
	@supports (animation-timeline: scroll()) {
		.single-post::before {
			content: "";
			position: fixed;
			top: 0;
			left: 0;
			z-index: 70;
			width: 100%;
			height: 3px;
			background: var(--wp--preset--color--gold);
			transform-origin: 0 50%;
			animation: a1-progress linear both;
			animation-timeline: scroll(root);
		}
	}
}

/* translate, not transform, so the card hover lift still works afterwards. */
@keyframes a1-rise {
	from { opacity: 0; translate: 0 12px; }
	to { opacity: 1; translate: none; }
}

@keyframes a1-progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

/* ---------------------------------------------------------------------------
   Services hub (staging review, 21 Sep 2026). Built in a1_render_service_list:
   a card per kind of work, the general pages as links, the per-make pages as
   short chips. Every service page is still linked from here.
   ------------------------------------------------------------------------- */

.a1-hub__search { margin-top: var(--wp--preset--spacing--40); }

.a1-hub {
	columns: 3 300px;
	column-gap: clamp(16px, 2vw, 24px);
}
.a1-hub > * { margin-block-start: 0; }

.a1-hub__card {
	break-inside: avoid;
	margin: 0 0 clamp(16px, 2vw, 24px);
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--wash);
	border: 1px solid var(--wp--preset--color--rule-soft);
	border-radius: var(--wp--custom--radius--md);
}
.a1-hub__card[hidden] { display: none; }

.a1-hub .a1-hub__title {
	margin: 0 0 12px;
	font-size: var(--wp--preset--font-size--lg) !important;
	line-height: 1.2;
	text-wrap: balance;
}

.a1-hub__main,
.a1-hub__makes {
	margin: 0;
	padding: 0;
	list-style: none;
}
.a1-hub__main { display: grid; gap: 6px; font-size: var(--wp--preset--font-size--sm); line-height: 1.4; }
.a1-hub__main > li { margin: 0; }
.a1-hub__main a { color: var(--wp--preset--color--ink); text-decoration: underline; text-decoration-color: var(--wp--preset--color--rule-strong); text-underline-offset: 3px; }
.a1-hub__main a:hover { color: var(--wp--preset--color--green); text-decoration-color: currentColor; }

.a1-hub .a1-hub__by {
	margin: 16px 0 8px;
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: var(--wp--preset--font-size--eyebrow) !important;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
}
.a1-hub__main + .a1-hub__by { padding-top: 14px; border-top: 1px solid var(--wp--preset--color--rule-soft); }
.a1-hub__title + .a1-hub__by { margin-top: 0; }

.a1-hub__makes { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--wp--preset--font-size--xs); }
.a1-hub__makes > li { margin: 0; }
.a1-hub__makes a {
	display: inline-block;
	padding: 5px 11px;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 999px;
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	line-height: 1.3;
}
.a1-hub__makes a:hover { border-color: var(--wp--preset--color--green); color: var(--wp--preset--color--green); }
.a1-hub :is(.a1-hub__main, .a1-hub__makes) > li[hidden] { display: none; }

.a1-hub__none { margin: 0; color: var(--wp--preset--color--text-secondary); }
.a1-hub__none[hidden] { display: none; }

/* Cookie settings in the footer's Legal column (a1_render_footer_columns), in
   place of CookieYes's floating button, which sat over content on phones. */
.a1-footer__cookies {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	text-align: left;
}
.a1-footer__cookies:hover,
.a1-footer__cookies:focus-visible { color: var(--wp--preset--color--green); text-decoration: underline; text-underline-offset: 3px; }
body:has(.a1-footer__cookies) .cky-btn-revisit-wrapper { display: none !important; }

/* Blog search box (home.html, search.html). */
.a1-blogsearch { margin-top: var(--wp--preset--spacing--30); max-width: 560px; }
.a1-blogsearch .wp-block-search__inside-wrapper { display: flex; gap: 8px; padding: 0; border: 0; }
.a1-blogsearch .wp-block-search__input {
	flex: 1;
	min-width: 0;
	padding: 12px 14px;
	font: inherit;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--wash);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--sm);
}
.a1-blogsearch .wp-block-search__input:focus-visible { outline: 2px solid var(--wp--preset--color--green); outline-offset: 1px; }
.a1-blogsearch .wp-block-search__button {
	margin: 0;
	padding: 12px 22px;
	border: 0;
	border-radius: 100px;
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--cream);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.a1-blogsearch .wp-block-search__button:hover { background: var(--wp--preset--color--green-hover); }

/* ===========================================================================
   Brands: maker logos, brand cards, homepage logo row, brand page opening.
   Owner-approved mock-up v2 (10 Nov 2026). Logos are the theme's own SVGs in
   assets/logos; colours other than each maker's own come from the palette.
   =========================================================================== */

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

/* A logo is an inline SVG sized by its own outline: wide marks by width,
   round ones by height, so the Audi rings and the BMW roundel weigh the same. */
.a1-brandcard__logo,
.a1-logowall__logo,
.a1-mhero__chiplogo,
.a1-mhero__biglogo {
	display: inline-flex;
	align-items: center;
	color: var(--a1-logo-colour, var(--wp--preset--color--ink));
}
.a1-brandcard__logo svg,
.a1-logowall__logo svg,
.a1-mhero__chiplogo svg,
.a1-mhero__biglogo svg {
	display: block;
	fill: currentColor;
}
.a1-brandcard__logo--word,
.a1-logowall__logo--word,
.a1-mhero__chiplogo--word,
.a1-mhero__biglogo--word {
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* --- Brands page: white cards --- */

.a1-brandgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
	gap: 16px;
	margin-top: var(--wp--preset--spacing--40);
}

.a1-brandcard {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 178px;
	padding: 26px 22px 22px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--rule-soft);
	border-radius: 12px;
	color: var(--wp--preset--color--ink) !important;
	text-decoration: none !important;
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.a1-brandcard:hover,
.a1-brandcard:focus-visible {
	border-color: var(--wp--preset--color--green);
	box-shadow: 0 10px 24px rgb(30 60 40 / 0.12);
	transform: translateY(-2px);
}
.a1-brandcard__logo { height: 56px; }
.a1-brandcard__logo--round svg { height: 46px; width: auto; }
.a1-brandcard__logo--wide svg { width: 112px; height: auto; max-height: 46px; }
.a1-brandcard__logo--word { font-size: 18px; }
.a1-brandcard__name {
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.a1-brandcard__jobs {
	font-size: var(--wp--preset--font-size--xs) !important;
	line-height: 1.45;
	color: var(--wp--preset--color--text-secondary);
}
.a1-brandcard__go {
	position: absolute;
	top: 22px;
	right: 20px;
	font-size: 18px;
	color: var(--wp--preset--color--rule-strong);
	transition: color 180ms ease, transform 180ms ease;
}
.a1-brandcard:hover .a1-brandcard__go,
.a1-brandcard:focus-visible .a1-brandcard__go {
	color: var(--wp--preset--color--green);
	transform: translateX(2px);
}

@media (max-width: 599px) {
	.a1-brandgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.a1-brandcard { min-height: 150px; padding: 18px 14px 16px; gap: 10px; }
	.a1-brandcard__logo { height: 44px; }
	.a1-brandcard__logo--round svg { height: 38px; }
	.a1-brandcard__logo--wide svg { width: 88px; }
	.a1-brandcard__go { top: 16px; right: 14px; }
}

/* --- Homepage: single-colour logo row --- */

.a1-logowall {
	display: grid;
	/* Nine across: the homepage lists eighteen makes, two even rows. */
	grid-template-columns: repeat(9, minmax(0, 1fr));
	gap: 28px 16px;
	align-items: center;
	justify-items: center;
	margin-top: var(--wp--preset--spacing--40);
	padding: 32px clamp(16px, 3vw, 40px);
	background: #fff;
	border: 1px solid var(--wp--preset--color--rule-soft);
	border-radius: 14px;
}
.a1-logowall__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	min-width: 48px;
	padding: 4px;
	border-radius: 8px;
	text-decoration: none !important;
}
.a1-logowall__logo {
	--a1-logo-colour: var(--wp--preset--color--ink) !important;
	opacity: 0.72;
	transition: opacity 160ms ease;
}
.a1-logowall__item:hover .a1-logowall__logo,
.a1-logowall__item:focus-visible .a1-logowall__logo { opacity: 1; }
.a1-logowall__logo--round svg { height: 36px; width: auto; }
.a1-logowall__logo--wide svg { width: 82px; height: auto; max-height: 36px; }
.a1-logowall__logo--word { font-size: 13px; }

@media (max-width: 999px) {
	.a1-logowall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
	.a1-logowall { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 6px; padding: 20px 10px; }
	.a1-logowall__item { min-width: 0; padding: 2px; }
	.a1-logowall__logo--round svg { height: 26px; }
	.a1-logowall__logo--wide svg { width: 48px; }
	.a1-logowall__logo--word { font-size: 9px; letter-spacing: 0.08em; }
}

/* --- Brand page opening --- */

.a1-mhero {
	--a1-mhero-bg: #1f221e;
	background: var(--a1-mhero-bg);
	color: #fff;
}
.a1-mhero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	max-width: 1400px;
	min-height: 440px;
	margin: 0 auto;
}
.a1-mhero--text .a1-mhero__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.a1-mhero__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(40px, 5vw, 64px) clamp(16px, 4vw, 56px);
}
.a1-mhero .a1-crumbs,
.a1-mhero .a1-crumbs a,
.a1-mhero .a1-crumbs span { color: rgb(255 255 255 / 0.66) !important; }
.a1-mhero .a1-crumbs { margin-bottom: 20px; }
.a1-mhero__chip {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	align-self: flex-start;
	margin: 0 0 22px !important;
	padding: 10px 16px;
	background: #fff;
	border-radius: 10px;
}
.a1-mhero__chiplogo--round svg { height: 30px; width: auto; }
.a1-mhero__chiplogo--wide svg { width: 76px; height: auto; max-height: 30px; }
.a1-mhero__chiplogo--word { font-size: 13px; }
.a1-mhero__chip > span:last-child {
	padding-left: 14px;
	border-left: 1px solid var(--wp--preset--color--rule);
	font-size: 12px !important;
	font-weight: 600;
	color: var(--wp--preset--color--text-secondary) !important;
}
.a1-mhero__title {
	margin: 0 0 14px !important;
	max-width: 16ch;
	font-size: clamp(34px, 4.2vw, 52px) !important;
	line-height: 1.04 !important;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: #fff !important;
	text-wrap: balance;
}
.a1-mhero__sub {
	margin: 0 0 26px !important;
	max-width: 48ch;
	font-size: var(--wp--preset--font-size--md) !important;
	line-height: 1.55;
	color: rgb(255 255 255 / 0.8) !important;
}
.a1-mhero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.a1-mhero__btn {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 20px;
	border-radius: 999px;
	background: var(--wp--preset--color--green);
	color: #fff !important;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none !important;
	transition: background-color 160ms ease, border-color 160ms ease;
}
.a1-mhero__btn:hover,
.a1-mhero__btn:focus-visible { background: var(--wp--preset--color--green-hover); }
.a1-mhero__btn--ghost {
	background: transparent;
	border: 1px solid rgb(255 255 255 / 0.45);
}
.a1-mhero__btn--ghost:hover,
.a1-mhero__btn--ghost:focus-visible { background: rgb(255 255 255 / 0.08); border-color: #fff; }
.a1-mhero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 30px 0 0 !important;
	padding: 22px 0 0 !important;
	border-top: 1px solid rgb(255 255 255 / 0.14);
	list-style: none;
}
.a1-mhero__trust li {
	margin: 0 !important;
	font-size: 14px !important;
	color: rgb(255 255 255 / 0.74) !important;
}
.a1-mhero__trust li::before { content: "\2713"; margin-right: 7px; color: #8fc79f; }
.a1-mhero__media {
	position: relative;
	margin: 0;
	overflow: hidden;
}
.a1-mhero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.a1-mhero__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, var(--a1-mhero-bg) 0%, rgb(31 34 30 / 0.55) 22%, rgb(31 34 30 / 0) 55%);
	pointer-events: none;
}
.a1-mhero__media figcaption {
	position: absolute;
	left: 16px;
	bottom: 14px;
	z-index: 2;
	padding: 6px 11px;
	border-radius: 999px;
	background: rgb(0 0 0 / 0.5);
	color: #fff;
	font-size: 12px;
}
.a1-mhero__media--logo {
	display: grid;
	place-items: center;
	background: radial-gradient(circle at 50% 45%, #2c3a30 0%, var(--a1-mhero-bg) 70%);
}
.a1-mhero__media--logo::before { display: none; }
.a1-mhero__biglogo { --a1-logo-colour: #fff !important; }
.a1-mhero__biglogo--round svg { height: clamp(90px, 11vw, 140px); width: auto; }
.a1-mhero__biglogo--wide svg { width: clamp(200px, 24vw, 300px); height: auto; }
.a1-mhero__biglogo--word { font-size: clamp(28px, 3vw, 40px); }

@media (max-width: 781px) {
	.a1-mhero__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.a1-mhero__media { order: -1; height: 240px; }
	.a1-mhero__media::before { background: linear-gradient(0deg, var(--a1-mhero-bg) 0%, rgb(31 34 30 / 0) 55%); }
	.a1-mhero__media--logo { height: 180px; }
	.a1-mhero__text { padding-top: 28px; padding-bottom: 36px; }
	.a1-mhero__trust { gap: 8px 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.a1-brandcard,
	.a1-brandcard__go,
	.a1-logowall__logo { transition: none; }
	.a1-brandcard:hover { transform: none; }
}

/* Trademark line in the footer base. */
.a1-footer__tm { flex-basis: 100%; font-size: 12px; }

/* --- Homepage: specialist work links and the team (10 Nov 2026) ---
   Both carried over from the live homepage when its wording was merged into
   the new design. The links are real internal links to each service page. */

.a1-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: var(--wp--preset--spacing--30) !important;
}
.a1-chips a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--rule-soft);
	border-radius: 999px;
	color: var(--wp--preset--color--ink) !important;
	font-size: var(--wp--preset--font-size--xs) !important;
	font-weight: 600;
	text-decoration: none !important;
	transition: border-color 160ms ease, color 160ms ease;
}
.a1-chips a:hover,
.a1-chips a:focus-visible {
	border-color: var(--wp--preset--color--green);
	color: var(--wp--preset--color--green) !important;
}

.a1-team__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 !important;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--rule-soft);
	border-radius: 12px;
}
.a1-team__item strong {
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}
.a1-team__item span {
	font-size: var(--wp--preset--font-size--xs) !important;
	color: var(--wp--preset--color--text-secondary);
}

@media (max-width: 599px) {
	.a1-team__item { padding: 14px; }
	.a1-chips a { min-height: 44px; padding: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.a1-chips a { transition: none; }
}

/* --- 11 Nov 2026: UX pass ---------------------------------------------- */

/* "What's included" now sits between the title and the article, so it takes
   the gap above it from the title and keeps its hairline as the divider into
   the article below. */
main > .a1-detail {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: 0;
	padding-bottom: var(--wp--preset--spacing--40);
	border-top: 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

/* On a phone the sticky Call / WhatsApp / Enquire bar already carries the
   phone number and the enquiry link, so the facts card above the article
   keeps only the price and stops filling the first screen. */
@media (max-width: 900px) {
	.a1-facts .a1-facts__row:not(.a1-facts__row--price),
	.a1-facts .a1-facts__cta {
		display: none;
	}
}

/* Enquiry form for service pages whose content has none. */
.a1-svcform {
	margin-top: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--wash);
	border: 1px solid var(--wp--preset--color--rule-soft);
	border-radius: var(--wp--custom--radius--md, 12px);
	scroll-margin-top: 120px;
}
.a1-svcform__title {
	margin: 0 0 var(--wp--preset--spacing--10) !important;
	font-size: var(--wp--preset--font-size--xl);
}
.a1-svcform__sub {
	margin: 0 0 var(--wp--preset--spacing--30) !important;
	color: var(--wp--preset--color--text-secondary);
}

/* Homepage link chips: the first ten show, the rest wait behind a button.
   Every link stays in the page for search engines and for anyone without
   JavaScript; only the collapsed view hides them. */
.a1-chips.is-collapsed a:nth-of-type(n+11) {
	display: none;
}
.a1-chips__more {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	background: transparent;
	border: 1px dashed var(--wp--preset--color--rule);
	border-radius: 999px;
	color: var(--wp--preset--color--green);
	font: inherit;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	cursor: pointer;
}
.a1-chips__more:hover,
.a1-chips__more:focus-visible {
	border-style: solid;
	border-color: var(--wp--preset--color--green);
}

/* 404: popular pages under the search box. */
.a1-404-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: var(--wp--preset--spacing--40) !important;
	padding: 0;
	list-style: none;
}
.a1-404-links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--rule-soft);
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	text-decoration: none;
}
.a1-404-links a:hover,
.a1-404-links a:focus-visible {
	border-color: var(--wp--preset--color--green);
	color: var(--wp--preset--color--green);
}

/* Long-form text on the designed pages (About, Our Services, Remote).
   Live's own wording was restored under these designs on 11 Nov 2026 as plain
   headings, paragraphs and lists. The designed bands zero their children's
   margins and run 1180px wide, so the restored text ran headings straight into
   the paragraph above and set lines far too long to read. Matched only on a band
   holding two or more plain (unstyled) H2s, which only the restored sections
   have, so the designed bands are untouched. */
.a1-band:has(> h2.wp-block-heading:not([class*="-font-size"]) ~ h2.wp-block-heading:not([class*="-font-size"])) > :is(p, ul, ol, h2, h3, figure) {
	max-width: 72ch;
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}
.a1-band:has(> h2.wp-block-heading:not([class*="-font-size"]) ~ h2.wp-block-heading:not([class*="-font-size"])) > :is(p, ul, ol) {
	margin-top: 0 !important;
	margin-bottom: 1em !important;
	line-height: 1.65;
}
.a1-band:has(> h2.wp-block-heading:not([class*="-font-size"]) ~ h2.wp-block-heading:not([class*="-font-size"])) > h2 {
	margin-top: var(--wp--preset--spacing--60) !important;
	margin-bottom: var(--wp--preset--spacing--20) !important;
}
.a1-band:has(> h2.wp-block-heading:not([class*="-font-size"]) ~ h2.wp-block-heading:not([class*="-font-size"])) > h2:first-child {
	margin-top: 0 !important;
}
.a1-band:has(> h2.wp-block-heading:not([class*="-font-size"]) ~ h2.wp-block-heading:not([class*="-font-size"])) > h3 {
	margin-top: var(--wp--preset--spacing--40) !important;
	margin-bottom: var(--wp--preset--spacing--10) !important;
	font-size: var(--wp--preset--font-size--lg);
}
.a1-band:has(> h2.wp-block-heading:not([class*="-font-size"]) ~ h2.wp-block-heading:not([class*="-font-size"])) > :is(ul, ol) {
	padding-left: 1.3em;
}
.a1-band:has(> h2.wp-block-heading:not([class*="-font-size"]) ~ h2.wp-block-heading:not([class*="-font-size"])) li + li {
	margin-top: 0.35em;
}

/* The old page builders wrote font-family: Arial / "arial black" inline on
   317 pages and posts, so their text set in Arial beside the site's own type
   (11 Nov 2026). Content text follows the theme's font; sizes, weights and
   colours set by the author are left alone. */
:is(.wp-block-post-content, .entry-content, .a1-service-body) :is([style*="font-family"], font[face]) {
	font-family: inherit !important;
}

/* --- homepage hero film (11 Nov 2026, inc/hero-video.php) ---
   The video sits inside the photograph's layer, under the scrim, and fades in
   only once it is playing, so the photograph is never swapped for a black box. */
.a1-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.8s ease;
	pointer-events: none;
}

.a1-hero.has-video .a1-hero__video {
	opacity: 1;
}

.a1-hero__vidctl {
	position: absolute;
	right: var(--wp--preset--spacing--30);
	bottom: var(--wp--preset--spacing--30);
	z-index: 1;
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	background: rgba(55, 63, 67, 0.55);
	color: #fff;
	cursor: pointer;
}

.a1-hero.has-video .a1-hero__vidctl {
	display: inline-flex;
}

.a1-hero__vidctl:hover {
	background: rgba(55, 63, 67, 0.8);
}

@media (prefers-reduced-motion: reduce) {
	.a1-hero__video {
		transition: none;
	}
}

/* --- "Related services at A1 Diagnostics", the block the live site carries at
   the end of its posts (12 Nov 2026). Same look as the theme's own related
   services row (.a1-asvc); the wording and links are the content's own. --- */
.a1-related-services {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid rgb(55 63 67 / 0.14);
	clear: both;
}

.a1-related-services h3 {
	margin: 0 0 12px;
	font-size: var(--wp--preset--font-size--md);
}

.a1-related-services ul {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.a1-related-services li {
	margin: 0;
}

.a1-related-services li a {
	display: inline-block;
	border: 1px solid rgb(55 63 67 / 0.16);
	border-radius: var(--wp--custom--radius--pill);
	padding: 10px 16px;
	font-size: 13.5px;
	text-decoration: none;
	color: inherit;
}

.a1-related-services li a:hover,
.a1-related-services li a:focus-visible {
	border-color: var(--wp--preset--color--ink);
}

.a1-related-services p {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-secondary);
}

/* --- footer: the live site's "Approved Bosch Centre" statement and logo,
   carried over word for word (12 Nov 2026) --- */
.a1-footer__bosch {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-top: 22px;
	max-width: 340px;
}

.a1-footer__bosch img {
	flex: none;
	width: 64px;
	height: auto;
	border-radius: 0;
}

.a1-footer__bosch p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--text-secondary);
}

.a1-footer__bosch .a1-footer__bosch-title {
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

/* --- homepage: the live site's "ECU Repairs" paragraphs, carried over word
   for word (owner, 12 Nov 2026). A short text band on the content column. --- */
.a1-ecu > :is(h2, p) {
	max-width: 72ch;
	/* 1400px is the content width this homepage's bands are laid out to. */
	margin-left: max(0px, calc((100% - 1400px) / 2)) !important;
	margin-right: auto !important;
}

.a1-ecu > h2 {
	margin-top: 0 !important;
	margin-bottom: var(--wp--preset--spacing--20) !important;
}

.a1-ecu > p {
	margin-top: 0 !important;
	margin-bottom: 1em !important;
	line-height: 1.65;
}

.a1-ecu > p:last-child {
	margin-bottom: 0 !important;
}