/* ============================================================
   Auto Repair Tune-Up · components — the pattern primitives.
   Every rule reads tokens only. Add site-specific components in a site
   stylesheet rather than growing this file.
   ============================================================ */

/* ---------- cards ---------- */
.ar-card {
	background: var(--ar-surface);
	border: 1px solid var(--ar-border);
	border-radius: var(--ar-radius-lg);
	padding: 1.25rem;
	box-shadow: var(--ar-shadow);
	transition: border-color var(--ar-ease), box-shadow var(--ar-ease);
}
.ar-card:hover {
	border-color: var(--ar-accent);
	box-shadow: var(--ar-shadow-lg);
}
.ar-card__media img {
	border-radius: var(--ar-radius);
	inline-size: 100%;
	object-fit: cover;
}
.ar-card h3 {
	margin-block: 0.5rem;
}
.ar-card--post .wp-block-post-title a {
	text-decoration: none;
	color: var(--ar-text);
}
.ar-card--post .wp-block-post-title a:hover {
	color: var(--ar-accent);
}

/* ---------- hero ---------- */
.ar-hero {
	padding-block: var(--wp--preset--spacing--lg);
}
.ar-hero__title {
	margin-block: 0 0.75rem;
}
.ar-hero__lead {
	color: var(--ar-text-2);
	font-size: var(--wp--preset--font-size--large);
	max-inline-size: 60ch;
}
.ar-hero__media img {
	border-radius: var(--ar-radius-lg);
}

/* ---------- chips ---------- */
.ar-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
}
.ar-chip {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--ar-accent);
	border: 1px solid var(--ar-border);
	border-radius: var(--ar-radius-pill);
	padding: 0.3em 0.9em;
}

/* ---------- silo nav ---------- */
.ar-silo {
	margin-block-start: var(--wp--preset--spacing--lg);
	padding-block-start: var(--wp--preset--spacing--md);
	border-top: 1px solid var(--ar-border);
}
.ar-silo__title {
	font-size: var(--wp--preset--font-size--large);
	margin-block: 0 0.75rem;
}
.ar-silo__grid {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--md);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 0.75rem;
}
.ar-silo__card {
	display: block;
	background: var(--ar-surface);
	border: 1px solid var(--ar-border);
	border-radius: var(--ar-radius);
	padding: 0.9rem 1.1rem;
	text-decoration: none;
	color: var(--ar-text);
	font-weight: 600;
	transition: border-color var(--ar-ease), background-color var(--ar-ease);
}
.ar-silo__card:hover {
	border-color: var(--ar-accent);
	color: var(--ar-accent);
}
.ar-silo__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-block: 0;
}

/* ---------- CTA strip ---------- */
.ar-cta {
	background: var(--wp--preset--gradient--accent-gradient);
	border-radius: var(--ar-radius-lg);
	padding: var(--wp--preset--spacing--md);
	text-align: center;
}
.ar-cta :where(h2, p) {
	color: var(--ar-on-accent);
}
.ar-cta__lead {
	max-inline-size: 52ch;
	margin-inline: auto;
}
/* The CTA button sits on the dark gradient in both modes, so it must not use
   the mode-flipping text token — that renders white-on-white in dark.
   The :not() in base.css's button rule counts toward specificity (0,3,0), so
   this selector has to carry the same :not() to outrank it. */
.ar-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--ar-on-accent);
	color: var(--ar-on-accent-contrast);
}
.ar-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--ar-on-accent);
	filter: brightness(0.92);
}

/* ---------- FAQ ---------- */
.ar-faq__item {
	border-bottom: 1px solid var(--ar-border);
	padding-block: 0.25rem;
}
.ar-faq__item summary {
	cursor: pointer;
	font-family: var(--ar-font-display);
	font-weight: 700;
	padding-block: 0.9rem;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.ar-faq__item summary::-webkit-details-marker {
	display: none;
}
.ar-faq__item summary::after {
	content: "+";
	font-size: 1.25rem;
	color: var(--ar-accent);
	flex: none;
}
.ar-faq__item[open] summary::after {
	content: "\2212";
}
.ar-faq__item > :not(summary) {
	color: var(--ar-text-2);
	margin-block-start: 0;
	padding-block-end: 0.9rem;
}

/* ---------- key facts (bindings + unit toggle) ---------- */
.ar-facts {
	background: var(--ar-surface);
	border: 1px solid var(--ar-border);
	border-radius: var(--ar-radius-lg);
	padding: var(--wp--preset--spacing--md);
}
.ar-facts__title {
	margin-block: 0 1rem;
}
.ar-facts__cols {
	gap: var(--wp--preset--spacing--md);
}
.ar-facts__key {
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ar-text-2);
	margin-block: 0 0.15rem;
}
.ar-facts__value {
	font-family: var(--ar-font-display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	margin-block: 0 1rem;
}

.ar-units__switch {
	display: inline-flex;
	border: 1px solid var(--ar-border);
	border-radius: var(--ar-radius-pill);
	padding: 3px;
	margin-block-end: 1rem;
	background: var(--ar-bg);
}
.ar-units__btn {
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	border: 0;
	background: transparent;
	color: var(--ar-text-2);
	border-radius: var(--ar-radius-pill);
	padding: 0.35em 1em;
	cursor: pointer;
	transition: background-color var(--ar-ease), color var(--ar-ease);
}
/* aria-pressed is the state — style from it rather than a parallel class, so
   the visual and the accessible state cannot disagree. */
.ar-units__btn[aria-pressed="true"] {
	background: var(--ar-btn-bg);
	color: var(--ar-on-accent);
}

/* ---------- feature / stat strip ---------- */
.ar-stats {
	background: var(--ar-surface);
	border: 1px solid var(--ar-border);
	border-radius: var(--ar-radius-lg);
	padding: var(--wp--preset--spacing--md);
}
.ar-stats__num {
	font-family: var(--ar-font-display);
	font-weight: 800;
	font-size: 2rem;
	color: var(--ar-accent);
	line-height: 1.1;
}
.ar-stats__key {
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ar-text-2);
}

/* ---------- local business: NAP, hours, call button ----------
   Tokens only. A literal hex here would not flip when the palette does, and
   check-tokens.sh fails the build for it. */

.ar-nap {
	display: grid;
	gap: var(--wp--preset--spacing--md);
	background: var(--ar-surface);
	border: 1px solid var(--ar-border);
	border-radius: var(--ar-radius-lg);
	padding: var(--wp--preset--spacing--md);
}
@media (min-width: 48rem) {
	.ar-nap { grid-template-columns: 1fr 1fr; }
}

.ar-nap__address {
	font-size: 1.125rem;
	line-height: 1.5;
	margin: 0;
}
.ar-nap__phone {
	font-family: var(--ar-font-display);
	font-size: 1.375rem;
	font-weight: 600;
	margin: 0.5rem 0 0;
}

/* Hours. tabular-nums so the times form a column instead of a ragged edge. */
.ar-hours {
	margin: 0;
	font-variant-numeric: tabular-nums;
}
.ar-hours__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--ar-border);
}
.ar-hours__row:last-child { border-bottom: 0; }
.ar-hours dt { color: var(--ar-text-2); }
.ar-hours dd { margin: 0; color: var(--ar-text); }

/* Saturday is a genuine differentiator in this market — most independent
   shops are shut. Weight it rather than letting it read as one row of six. */
.ar-hours__row--flag dd {
	color: var(--ar-accent);
	font-weight: 600;
}
.ar-hours__row--closed dt,
.ar-hours__row--closed dd { color: var(--ar-text-2); }

/* Tap-to-call. --ar-btn-bg deliberately does NOT flip between colour modes:
   white on it measures 5.01:1, while white on the dark-mode accent is ~3.3:1
   and fails AA. Never swap this for --ar-accent. */
.ar-btn--call .wp-block-button__link {
	background-color: var(--ar-btn-bg);
	color: var(--ar-on-accent);
	font-family: var(--ar-font-display);
	font-weight: 600;
	letter-spacing: 0.02em;
}
.ar-btn--call .wp-block-button__link:hover,
.ar-btn--call .wp-block-button__link:focus-visible {
	background-color: var(--ar-btn-bg-hover);
}

.ar-hero__hours {
	color: var(--ar-text-2);
	margin-top: var(--wp--preset--spacing--sm);
}

/* Footer NAP — one line, wrapping to stacked on narrow. */
.ar-nap-compact {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	color: var(--ar-text-2);
	margin-top: 0.75rem;
}
.ar-nap-compact__tel {
	color: var(--ar-accent);
	font-weight: 600;
}

/* Service → cost cross-link. Underlined, never colour-only: the accent
   measures 4.53:1 on light and 4.56:1 on the dark surface — passing, with no
   margin to spend on signalling by hue alone. */
.ar-costlink a {
	color: var(--ar-accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* ============================================================
   Site chrome — utility bar, header, footer.

   These live in components.css, NOT in a per-template sheet: the chrome is on
   every view, and a header styled only on the front page is the classic
   code-splitting own goal.
   ============================================================ */

/* ---------- header shell ---------- */

/* WordPress wraps every template part in its own <header class="wp-block-template-part">.
   That wrapper is exactly as tall as the header, and `position: sticky` can only
   travel inside its containing block — so the header stuck to a 121px box and
   scrolled away with it. Collapsing the wrapper's box makes .ar-header a flow
   child of .wp-site-blocks, which is the full page height.

   It also removes a duplicate `banner` landmark: the wrapper and .ar-header are
   both <header> elements. */
.wp-site-blocks > header.wp-block-template-part {
	display: contents;
}

.ar-header {
	position: sticky;
	top: 0;
	z-index: var(--ar-z-header);
	/* Sticky over content needs an opaque ground, or the page scrolls
	   through the header. */
	background: var(--ar-bg);
	padding: 0 1rem 0.6rem;
	box-shadow: var(--wp--preset--shadow--sm);
}

/* The dark utility bar must stay edge-to-edge, so it cancels the header's
   INLINE padding. The header has no top padding, so there is nothing to pull
   back vertically — the bar sits flush against the top edge. */
.ar-utility {
	margin: 0 -1rem 0.6rem;
}

/* ---------- utility bar ---------- */

.ar-utility {
	background: var(--ar-fixed-dark);
	color: var(--ar-on-accent);
	font-size: 0.8125rem;
}
.ar-utility__inner {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--md);
	padding: 0.6rem 1rem;
	flex-wrap: wrap;
}
.ar-utility__item,
.ar-utility__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
}
.ar-utility__item .ar-icon,
.ar-utility__phone .ar-icon { color: var(--ar-fixed-accent); flex: none; }
.ar-utility__phone {
	margin-inline-start: auto;
	color: var(--ar-on-accent);
	text-decoration: none;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.ar-utility__phone:hover,
.ar-utility__phone:focus-visible { color: var(--ar-fixed-accent); }

/* The utility strip is `--ar-fixed-dark` in BOTH modes — it never flips — so the
   full 44px toggle (sized for the white/chip header band) would force the bar
   from a thin 40px strip to something like 63px tall just to fit it. Shrunk to
   28px (still clears the WCAG 2.2 AA 24px target-size minimum) and rescaled the
   inner dot to match, so the bar keeps its height. */
.ar-theme-toggle--utility {
	inline-size: 28px;
	block-size: 28px;
	flex: none;
}
.ar-theme-toggle--utility .ar-theme-toggle__icon {
	inline-size: 10px;
	block-size: 10px;
	box-shadow: inset -2.5px -2.5px 0 0 var(--ar-surface);
}
/* In light mode --ar-surface is white, so the button chrome (inherited from the
   base .ar-theme-toggle rule) reads at 17:1 against the always-dark bar — fine.
   In dark mode --ar-surface is a dark slate nearly identical to the bar's own
   --ar-fixed-dark: measured 1.17:1, the coin all but disappeared and only the
   icon's own dot remained visible. The dot's crescent-cutout technique doesn't
   apply here — dark mode renders it as a plain filled circle with no
   box-shadow — so only the outer chrome needs a fixed, non-flipping override. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .ar-theme-toggle--utility {
		background: rgba(255, 255, 255, 0.1);
		border-color: rgba(255, 255, 255, 0.4);
	}
}
:root[data-theme="dark"] .ar-theme-toggle--utility {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 48rem) {
	/* On a phone the utility bar was wrapping to two lines and repeating the
	   number the header pill already shows, pushing the hero below the fold.
	   Keep the service area only; full hours live in the footer. */
	.ar-utility__item:first-child,
	.ar-utility__phone { display: none; }
	.ar-utility__inner { justify-content: space-between; }
	/* The phone link normally does this job with its own auto margin, but it's
	   display:none at this width — the item after it has to take over. */
	.ar-theme-toggle--utility { margin-inline-start: auto; }
}

/* ---------- footer ---------- */

.ar-footer {
	background: var(--ar-fixed-dark);
	color: var(--ar-on-accent);
	padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md) 0;
}
.ar-footer__grid {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.3fr 1.2fr;
	gap: var(--wp--preset--spacing--md);
}
.ar-footer__logo { width: 11rem; height: auto; background: var(--ar-on-accent); border-radius: var(--ar-radius-sm); padding: 0.3rem 0.5rem; }
.ar-footer__blurb { font-size: 0.875rem; line-height: 1.6; color: rgba(255, 255, 255, 0.72); margin: var(--wp--preset--spacing--sm) 0 0; }

.ar-footer__head {
	font-family: var(--ar-font-display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 var(--wp--preset--spacing--sm);
	color: var(--ar-on-accent);
}
.ar-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; font-size: 0.875rem; }
.ar-footer__list a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.ar-footer__list a:hover,
.ar-footer__list a:focus-visible { color: var(--ar-fixed-accent); }
.ar-footer__list--contact li { display: flex; gap: 0.5rem; align-items: flex-start; color: rgba(255, 255, 255, 0.78); }
.ar-footer__list--contact .ar-icon { color: var(--ar-fixed-accent); flex: none; margin-top: 0.1rem; }

.ar-footer__hours { margin: 0; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.ar-footer__hours > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; color: rgba(255, 255, 255, 0.78); }
.ar-footer__hours dd { margin: 0; }
.ar-footer__hours .is-closed { color: rgba(255, 255, 255, 0.5); }

.ar-footer__legal {
	max-width: 1200px;
	margin: var(--wp--preset--spacing--md) auto 0;
	padding: var(--wp--preset--spacing--sm) 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.6);
}
.ar-footer__legal p { margin: 0; }
.ar-footer__legal a { color: rgba(255, 255, 255, 0.6); }

@media (max-width: 62rem) {
	.ar-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
	.ar-footer__grid { grid-template-columns: 1fr; }
}
/* ---------- header band ---------- */

.ar-topbar {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--md);
	padding: 0;
}
.ar-topbar__brand { flex: none; line-height: 0; }
.ar-topbar__logo { height: clamp(2.25rem, 3vw, 2.875rem); width: auto; display: block; }

/* The lockup carries a baked-in white plate. On the dark ground that reads as a
   stray rectangle, so it becomes an intentional chip instead. Selectors mirror
   tokens.css exactly: OS preference unless the toggle overrides it. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .ar-topbar__brand {
		background: var(--ar-on-accent);
		border-radius: var(--ar-radius-sm);
		padding: 0.35rem 0.6rem;
	}
}
:root[data-theme="dark"] .ar-topbar__brand {
	background: var(--ar-on-accent);
	border-radius: var(--ar-radius-sm);
	padding: 0.35rem 0.6rem;
}
:root[data-theme="light"] .ar-topbar__brand { background: none; padding: 0; }

.ar-topbar__nav { margin-inline-start: auto; }
.ar-topbar__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--gutter);
}
.ar-topbar__menu a {
	font-family: var(--ar-font-display);
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ar-text);
	text-decoration: none;
	white-space: nowrap;
}
.ar-topbar__menu a:hover,
.ar-topbar__menu a:focus-visible { color: var(--ar-accent); }

.ar-topbar__call {
	flex: none;
	position: relative;
	isolation: isolate;              /* keeps the -1 pseudo inside this button */
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	background: none;                /* the fill lives on ::before */
	color: var(--ar-on-accent);
	text-decoration: none;
	font-family: var(--ar-font-display);
	font-weight: 700;
	font-size: 1.0625rem;
	/* Extra inline padding clears the skew: the shape shifts by
	   (height / 2) x tan(16°) at each end, so the label never rides the angle. */
	padding: 0.75rem 1.9rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
/* The button carries the same oblique as the hero cut. Skewing a pseudo-element
   rather than the button means the SHAPE leans while the label stays upright —
   skewing the element itself would slant the digits too. */
.ar-topbar__call::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--ar-btn-bg);
	border-radius: var(--ar-radius-sm);
	transform: skewX(calc(var(--ar-oblique) * -1));
	transition: var(--ar-ease);
}
.ar-topbar__call:hover::before,
.ar-topbar__call:focus-visible::before { background: var(--ar-btn-bg-hover); }

/* focus ring must follow the skewed shape, not the upright box */
.ar-topbar__call:focus-visible { outline: none; }
.ar-topbar__call:focus-visible::before { outline: 2px solid var(--ar-text); outline-offset: 2px; }

@media (max-width: 62rem) {
	.ar-topbar { flex-wrap: wrap; }
	.ar-topbar__nav { margin-inline-start: 0; order: 3; width: 100%; }
	.ar-topbar__call { margin-inline-start: auto; }
}

/* Phone, variation 2 (2026-08-07): the toggle moved to the utility strip (see
   above), which frees the white band for logo + call on ONE row — matching the
   brand mockup's own header more closely than the previous three-row stack, and
   cutting the chrome further: ~131px there, ~96px here. Nav keeps its own row;
   a primary-nav row and a logo/CTA row are a standard enough phone pattern that
   it doesn't need justifying the way three stacked rows did. */
@media (max-width: 48rem) {
	.ar-topbar {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"brand call"
			"nav   nav";
		gap: 0.6rem var(--wp--preset--spacing--sm);
		align-items: center;
	}
	/* Same stretch behaviour as the brand fix above: `call` sits in the 1fr
	   column, so it needs justify-self:end or it fills the column and the
	   pill's skewed edge would sit nowhere near its own text. */
	.ar-topbar__brand { grid-area: brand; justify-self: start; }
	.ar-topbar__call  {
		grid-area: call;
		justify-self: end;
		margin-inline-start: 0;
		/* Shorter button -> smaller skew shift (shift scales with height), so this
		   padding still clears the diagonal edge; verified against the rendered
		   edge, not recomputed by formula. */
		padding: 0.5rem 1.1rem;
		font-size: 0.9375rem;
		gap: 0.3rem;
	}
	.ar-topbar__nav   { grid-area: nav; order: 0; width: auto; }
	.ar-topbar__menu  { justify-content: space-between; gap: var(--wp--preset--spacing--xs); }
	/* The menu links were 16px tall — under WCAG 2.2 SC 2.5.8's 24px minimum, and
	   a genuinely awkward tap on a phone. Padding rather than a height so the row
	   stays baseline-aligned with the rest of the bar. */
	.ar-topbar__menu a { display: inline-block; padding-block: 0.5rem; }
}

/* ---------- section furniture (shared by home, service, blog) ---------- */

.ar-section { max-width: 1200px; margin: 0 auto; padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md); text-align: center; }
.ar-section__eyebrow {
	font-family: var(--ar-font-display);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ar-accent);
	margin: 0 0 0.4rem;
}
.ar-section__title {
	font-family: var(--ar-font-display);
	font-weight: 700;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--ar-text);
	margin: 0;
}
.ar-section__rule { display: block; width: 3.5rem; height: 3px; background: var(--ar-accent); margin: 0.75rem auto var(--wp--preset--spacing--md); }
.ar-section__rule--invert { background: var(--ar-on-accent); margin-inline: 0; }

/* ---------- service cards ---------- */

.ar-cards {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--wp--preset--spacing--sm);
	text-align: center;
}
.ar-card {
	border: 1px solid var(--ar-border);
	border-radius: var(--ar-radius-sm);
	background: var(--ar-bg);
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm);
	display: flex; flex-direction: column; gap: 0.6rem;
	transition: var(--ar-ease);
}
.ar-card:hover { box-shadow: var(--wp--preset--shadow--md); transform: translateY(-3px); border-color: var(--ar-accent); }
.ar-card__icon { color: var(--ar-accent); display: grid; place-items: center; }
.ar-card__title {
	font-family: var(--ar-font-display); font-weight: 700; font-size: 0.9375rem;
	letter-spacing: 0.06em; text-transform: uppercase; color: var(--ar-text); margin: 0;
}
.ar-card__text { font-size: 0.875rem; line-height: 1.5; color: var(--ar-text-2); margin: 0; flex: 1; }
.ar-card__more {
	display: inline-flex; align-items: center; gap: 0.3rem; justify-content: center;
	font-family: var(--ar-font-display); font-weight: 600; font-size: 0.75rem;
	letter-spacing: 0.08em; text-transform: uppercase; color: var(--ar-text);
	text-decoration: none; margin-top: auto; padding-top: 0.6rem; border-top: 1px solid var(--ar-border);
}
.ar-card__more:hover, .ar-card__more:focus-visible { color: var(--ar-accent); }

/* ---------- why choose us ---------- */

.ar-why { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: stretch; }
.ar-why__brand {
	background: var(--ar-fixed-dark); color: var(--ar-on-accent);
	padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
	display: grid; place-items: center; text-align: center; gap: var(--wp--preset--spacing--sm);
	align-content: center;
}
/* The mark carries a baked white plate like the lockup does, so it gets the
   same deliberate chip rather than a stray white square. */
.ar-why__mark {
	width: 8rem; height: auto;
	background: var(--ar-on-accent);
	border-radius: var(--ar-radius-lg);
	padding: 0.5rem;
}
.ar-why__blurb { font-size: 0.875rem; line-height: 1.6; color: rgba(255, 255, 255, 0.78); margin: 0; max-width: 22rem; }
.ar-why__reasons { background: var(--ar-surface); padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md); }
.ar-why__reviews {
	background: var(--ar-btn-bg); color: var(--ar-on-accent);
	padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
}
.ar-why__head {
	font-family: var(--ar-font-display); font-weight: 700;
	font-size: clamp(1.25rem, 2.2vw, 1.75rem); letter-spacing: 0.005em;
	text-transform: uppercase; color: var(--ar-text); margin: 0;
}
.ar-why__head--invert { color: var(--ar-on-accent); }
.ar-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.ar-checklist li { display: flex; gap: 0.6rem; align-items: center; font-size: 0.9375rem; color: var(--ar-text); }
.ar-checklist__tick {
	display: grid; place-items: center; width: 1.25rem; height: 1.25rem; flex: none;
	border-radius: 50%; background: var(--ar-btn-bg); color: var(--ar-on-accent);
}
.ar-why__quote { margin: var(--wp--preset--spacing--sm) 0 0; }
.ar-why__quote p { margin: 0 0 0.6rem; line-height: 1.55; }
.ar-why__quote cite { font-style: normal; font-weight: 700; }
.ar-why__reviews .ar-stars { color: var(--ar-star); }

/* ---------- closing CTA ---------- */

.ar-final {
	background: var(--ar-fixed-dark); color: var(--ar-on-accent);
	padding: var(--wp--preset--spacing--md);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: var(--wp--preset--spacing--md);
}
.ar-final__copy { max-width: 34rem; }
.ar-final__head {
	font-family: var(--ar-font-display); font-weight: 700;
	font-size: clamp(1.375rem, 2.4vw, 2rem); text-transform: uppercase;
	margin: 0 0 0.3rem;
	/* Explicit, not inherited: theme.json styles h2 with the contrast colour,
	   which is near-black in light mode — the heading vanished into the dark
	   band. Every heading that sits on a fixed-dark surface must set its own. */
	color: var(--ar-on-accent);
}
.ar-final__lead { margin: 0; color: rgba(255, 255, 255, 0.78); font-size: 0.9375rem; }
.ar-final__actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--sm); }
.ar-btn--onDark { background: transparent; color: var(--ar-on-accent); border: 1px solid rgba(255, 255, 255, 0.4); }
.ar-btn--onDark:hover, .ar-btn--onDark:focus-visible { border-color: var(--ar-on-accent); background: rgba(255, 255, 255, 0.08); }

@media (max-width: 62rem) {
	.ar-why { grid-template-columns: 1fr; }
	.ar-final { flex-direction: column; text-align: center; }
}

/* Buttons moved out of the front-page sheet — used on every view. */
/* ---------- buttons ---------- */

.ar-hero-split__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--sm);
}
.ar-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	padding: 0.8rem 1.15rem;
	border-radius: var(--ar-radius-sm);
	font-family: var(--ar-font-display);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: var(--ar-ease);
}
/* Solid fill is --ar-btn-bg, which does NOT flip between colour modes:
   white on #D62828 is 5.01:1, white on the dark accent is ~3.3:1 and fails. */
.ar-btn--solid {
	background: var(--ar-btn-bg);
	color: var(--ar-on-accent);
	box-shadow: var(--wp--preset--shadow--red);
}
.ar-btn--solid:hover,
.ar-btn--solid:focus-visible {
	background: var(--ar-btn-bg-hover);
	transform: translateY(-3px);
}
.ar-btn--ghost {
	background: transparent;
	color: var(--ar-text);
	border: 1px solid var(--ar-border);
}
.ar-btn--ghost:hover,
.ar-btn--ghost:focus-visible { border-color: var(--ar-accent); color: var(--ar-accent); }


/* ---------- service hero ---------- */

.ar-shero { position: relative; background: var(--ar-fixed-dark); color: var(--ar-on-accent); overflow: hidden; isolation: isolate; }
.ar-shero__bg {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: 60% 40%; opacity: 0.28; z-index: -1;
}
.ar-shero__inner {
	max-width: 1200px; margin: 0 auto;
	padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
	display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--wp--preset--spacing--md); align-items: start;
}
.ar-shero__eyebrow {
	font-family: var(--ar-font-display); font-weight: 700; font-size: 0.8125rem;
	letter-spacing: 0.14em; text-transform: uppercase; color: var(--ar-fixed-accent); margin: 0 0 0.4rem;
}
.ar-shero__title {
	font-family: var(--ar-font-display); font-weight: 700;
	font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.03; letter-spacing: 0.005em;
	text-transform: uppercase; color: var(--ar-on-accent); margin: 0 0 0.5rem;
}
.ar-shero__tag { color: var(--ar-fixed-accent); font-weight: 600; margin: 0 0 var(--wp--preset--spacing--sm); }
.ar-shero__lead { color: rgba(255, 255, 255, 0.82); line-height: 1.6; margin: 0 0 var(--wp--preset--spacing--md); max-width: 34rem; }

.ar-shero__benefits {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--sm);
}
.ar-shero__benefits li { display: flex; flex-direction: column; gap: 0.4rem; align-items: center; text-align: center; }
.ar-shero__benefits .ar-icon { color: var(--ar-fixed-accent); }
.ar-shero__benefits span {
	font-family: var(--ar-font-display); font-weight: 600; font-size: 0.6875rem;
	letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3;
}

.ar-shero__card {
	background: var(--ar-bg); color: var(--ar-text);
	border-radius: var(--ar-radius-lg); box-shadow: var(--wp--preset--shadow--lg);
	padding: var(--wp--preset--spacing--md); display: grid; gap: 0.6rem;
}
.ar-shero__cardhead {
	font-family: var(--ar-font-display); font-weight: 700; font-size: 1.25rem;
	text-transform: uppercase; margin: 0; text-align: center; color: var(--ar-text);
}
.ar-shero__cardsub { margin: 0 0 0.4rem; text-align: center; font-size: 0.875rem; color: var(--ar-text-2); }
.ar-shero__cardbtn { justify-content: center; }
.ar-shero__hours { margin: 0.4rem 0 0; font-size: 0.8125rem; font-variant-numeric: tabular-nums; border-top: 1px solid var(--ar-border); padding-top: 0.6rem; }
.ar-shero__hours > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.15rem 0; color: var(--ar-text-2); }
.ar-shero__hours dd { margin: 0; color: var(--ar-text); }
.ar-shero__hours .is-closed dd { color: var(--ar-text-2); }

/* ---------- process steps ---------- */

.ar-steps {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--md);
	counter-reset: none;
}
.ar-steps__item { position: relative; text-align: center; display: grid; gap: 0.4rem; justify-items: center; }
.ar-steps__icon { color: var(--ar-text); }
/* Numbered because the order is real: you cannot test before you service. */
.ar-steps__n {
	display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
	background: var(--ar-btn-bg); color: var(--ar-on-accent);
	font-family: var(--ar-font-display); font-weight: 700; font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}
.ar-steps__title {
	font-family: var(--ar-font-display); font-weight: 700; font-size: 0.9375rem;
	letter-spacing: 0.08em; text-transform: uppercase; margin: 0; color: var(--ar-text);
}
.ar-steps__text { font-size: 0.8125rem; line-height: 1.5; color: var(--ar-text-2); margin: 0; max-width: 15rem; }

@media (max-width: 62rem) {
	.ar-shero__inner { grid-template-columns: 1fr; }
	.ar-shero__benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ar-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 30rem) {
	.ar-steps { grid-template-columns: 1fr; }
}

/* ---------- page banner ---------- */

.ar-banner { position: relative; background: var(--ar-fixed-dark); color: var(--ar-on-accent); overflow: hidden; isolation: isolate; }
.ar-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.25; z-index: -1; }
.ar-banner__inner { max-width: 1200px; margin: 0 auto; padding: var(--wp--preset--spacing--md); }
.ar-banner__title {
	font-family: var(--ar-font-display); font-weight: 700;
	font-size: clamp(1.75rem, 3.4vw, 2.75rem); text-transform: uppercase;
	letter-spacing: 0.005em; color: var(--ar-on-accent); margin: 0.4rem 0 0.4rem;
}
.ar-banner__lead { color: rgba(255, 255, 255, 0.8); margin: 0; max-width: 42rem; }
.ar-banner .ar-breadcrumbs, .ar-banner .ar-breadcrumbs a { color: rgba(255, 255, 255, 0.72); }

/* ---------- blog layout ---------- */

.ar-blog,
.ar-withside {
	max-width: 1200px; margin: 0 auto;
	padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
	display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--wp--preset--spacing--lg);
	align-items: start;
}
.ar-blog__main,
.ar-withside__main { min-width: 0; }
.ar-posts > li, .ar-posts { list-style: none; margin: 0; padding: 0; }
.ar-posts > li { padding-bottom: var(--wp--preset--spacing--md); margin-bottom: var(--wp--preset--spacing--md); border-bottom: 1px solid var(--ar-border); }
.ar-posts__img img { border-radius: var(--ar-radius-sm); }
.ar-posts__meta { font-size: 0.8125rem; color: var(--ar-text-2); gap: 0.75rem; margin: 0.6rem 0 0.3rem; }
.ar-posts__title a { text-decoration: none; color: var(--ar-text); }
.ar-posts__title a:hover, .ar-posts__title a:focus-visible { color: var(--ar-accent); }
.ar-pagination { margin-top: var(--wp--preset--spacing--md); gap: 0.4rem; }

/* ---------- sidebar ---------- */

.ar-sidebar { display: grid; gap: var(--wp--preset--spacing--md); position: sticky; top: var(--wp--preset--spacing--sm); }
.ar-sidebar__cta {
	background: var(--ar-btn-bg); color: var(--ar-on-accent);
	border-radius: var(--ar-radius-lg); padding: var(--wp--preset--spacing--md); display: grid; gap: 0.5rem;
}
.ar-sidebar__ctaeyebrow { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0; opacity: 0.9; }
.ar-sidebar__ctahead { font-family: var(--ar-font-display); font-weight: 700; font-size: 1.5rem; text-transform: uppercase; margin: 0; color: var(--ar-on-accent); }
.ar-sidebar__ctalead { margin: 0 0 0.4rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.9); }
.ar-sidebar__ctaphone { margin: 0.4rem 0 0; text-align: center; font-size: 0.8125rem; }
.ar-sidebar__ctaphone a { display: block; color: var(--ar-on-accent); font-family: var(--ar-font-display); font-weight: 700; font-size: 1.25rem; text-decoration: none; font-variant-numeric: tabular-nums; }
.ar-btn--onRed { background: var(--ar-on-accent); color: var(--ar-btn-bg); justify-content: center; }
.ar-btn--onRed:hover, .ar-btn--onRed:focus-visible { background: var(--ar-surface); }

.ar-sidebar__block { border: 1px solid var(--ar-border); border-radius: var(--ar-radius-lg); padding: var(--wp--preset--spacing--sm); background: var(--ar-bg); }
.ar-sidebar__head { font-family: var(--ar-font-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 0.6rem; color: var(--ar-text); }
.ar-sidebar__list, .ar-sidebar__posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.875rem; }
.ar-sidebar__list li { display: flex; justify-content: space-between; gap: 0.5rem; align-items: center; }
.ar-sidebar__list a { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--ar-text); text-decoration: none; }
.ar-sidebar__list a:hover, .ar-sidebar__list a:focus-visible { color: var(--ar-accent); }
.ar-sidebar__list .ar-icon { color: var(--ar-accent); }
.ar-sidebar__count { color: var(--ar-text-2); font-variant-numeric: tabular-nums; }
.ar-sidebar__posts li { display: grid; gap: 0.15rem; }
.ar-sidebar__posts a { color: var(--ar-text); text-decoration: none; font-weight: 600; line-height: 1.35; }
.ar-sidebar__posts a:hover, .ar-sidebar__posts a:focus-visible { color: var(--ar-accent); }
.ar-sidebar__posts time { font-size: 0.75rem; color: var(--ar-text-2); }

/* The service rail's content column keeps the article measure; post-content's
   own constrained layout would otherwise centre it inside the column. */
.ar-withside__main > .wp-block-post-content { max-width: none; }

.ar-sidebar__hours { margin: 0; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.ar-sidebar__hours > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; color: var(--ar-text-2); }
.ar-sidebar__hours dd { margin: 0; color: var(--ar-text); }
.ar-sidebar__hours .is-closed dd { color: var(--ar-text-2); }
.ar-sidebar__addr { margin: 0.6rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--ar-border); font-size: 0.8125rem; color: var(--ar-text-2); line-height: 1.5; }

@media (max-width: 62rem) {
	.ar-blog,
	.ar-withside { grid-template-columns: 1fr; }
	.ar-sidebar { position: static; }
}

/* Post titles in the loop need the display face — theme.json's h2 sizing is
   tuned for in-content headings, which is too quiet for a card title. */
.ar-posts__title {
	font-family: var(--ar-font-display);
	font-weight: 700;
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	line-height: 1.2;
	margin: 0 0 0.4rem;
}

/* The sidebar renders core's default search form; brand it rather than leaving
   a grey system button in a red-and-navy page. */
.ar-sidebar__block .wp-block-search__inside-wrapper,
.ar-sidebar__block form[role="search"] { display: flex; gap: 0.4rem; }
/* WordPress nests the search input INSIDE its <label>. Hiding the label with
   display:none therefore collapsed the input to 0x0 and stripped its accessible
   name. The label stays in the box tree and in the a11y tree; only the visible
   caption is clipped, via core's own screen-reader-text class. */
.ar-sidebar__block form[role="search"] label { flex: 1; min-width: 0; display: block; }
.ar-sidebar__block input[type="search"] {
	width: 100%;
	border: 1px solid var(--ar-border);
	border-radius: var(--ar-radius-sm);
	padding: 0.55rem 0.7rem;
	font: inherit;
	background: var(--ar-bg);
	color: var(--ar-text);
}
.ar-sidebar__block input[type="search"]:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 1px; }
.ar-sidebar__block input[type="submit"],
.ar-sidebar__block button[type="submit"] {
	background: var(--ar-btn-bg);
	color: var(--ar-on-accent);
	border: 0;
	border-radius: var(--ar-radius-sm);
	padding: 0.55rem 0.9rem;
	font-family: var(--ar-font-display);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}
.ar-sidebar__block input[type="submit"]:hover,
.ar-sidebar__block button[type="submit"]:hover { background: var(--ar-btn-bg-hover); }
.ar-sidebar__block label > .screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   Promise bar + proof card.

   MOVED out of the front-page-only sheet: five templates render the
   `trust-bar` pattern (front page, service pages, blog index, archive,
   search) but its CSS shipped with the homepage alone, so four of the five
   rendered raw <li> bullets on white. Markup present is not markup styled.
   ============================================================ */
/* ---------- dark promise bar ---------- */

.ar-trust { background: var(--ar-fixed-dark); }
.ar-trust__row {
	list-style: none;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--md);
	max-width: 1200px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--md);
}
.ar-trust__item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--lg);
	color: var(--ar-on-accent);
}
.ar-trust__item + .ar-trust__item {
	border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
	padding-inline-start: var(--wp--preset--spacing--md);
}
.ar-trust__item .ar-icon { color: var(--ar-fixed-accent); flex: none; }
.ar-trust__label {
	font-family: var(--ar-font-display);
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1.25;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ---------- social proof card ---------- */

.ar-proof {
	background: var(--ar-fixed-dark);
	padding: 0 var(--wp--preset--spacing--md) var(--wp--preset--spacing--md);
}
.ar-proof__card {
	max-width: 1200px;
	margin: 0 auto;
	background: var(--ar-bg);
	border-radius: var(--ar-radius-xl);
	box-shadow: var(--wp--preset--shadow--lg);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--md);
	padding: var(--wp--preset--spacing--gutter) var(--wp--preset--spacing--md);
}
.ar-proof__cell {
	display: flex;
	gap: var(--wp--preset--spacing--lg);
	align-items: center;
	margin: 0;
}
.ar-proof__cell + .ar-proof__cell {
	border-inline-start: 1px solid var(--ar-border);
	padding-inline-start: var(--wp--preset--spacing--md);
}
.ar-proof__headline { display: block; font-weight: 700; color: var(--ar-text); line-height: 1.35; }
.ar-proof__sub { display: block; font-size: 0.875rem; color: var(--ar-text-2); font-style: normal; }
.ar-stars { color: var(--ar-star); display: inline-flex; }
.ar-proof__qmark { color: var(--ar-text-2); flex: none; align-self: flex-start; }

/* Placeholder marks — the real Google and ASE assets are third-party and are
   NOT in the brand package. Do not ship these to production as-is. */
.ar-proof__badge {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	font-family: var(--ar-font-display);
	font-weight: 700;
	flex: none;
}
.ar-proof__badge--g { background: var(--ar-surface); color: var(--ar-text); font-size: 1.5rem; }
.ar-proof__badge--ase { background: var(--ar-ase); color: var(--ar-on-accent); font-size: 0.875rem; letter-spacing: 0.04em; }


@media (max-width: 62rem) {
	.ar-trust__row,
	.ar-proof__card { grid-template-columns: 1fr; }
	.ar-trust__item + .ar-trust__item,
	.ar-proof__cell + .ar-proof__cell { border-inline-start: 0; padding-inline-start: 0; }
}

/* ============================================================
   Full-bleed band corrections + Related grid + closing bar
   ============================================================ */

/* WordPress applies `margin-block-start: 1.25rem` to every sibling in a flow
   layout (`:root :where(.is-layout-flow) > *`). Between full-bleed dark bands
   that renders as a 20px WHITE STRIPE.

   Chasing it per-section does not work: the margin lands on the WRAPPERS too
   (`.wp-block-template-part`, the intermediate `.wp-block-group`s), so the
   stripe just moves. Zero it at the two flow levels that hold page sections —
   the site blocks and main's direct children. Every section owns its own
   padding, so nothing collapses; blocks nested deeper keep their normal gaps.

   `body` prefix beats WP's `:root :where(...)` on specificity without
   !important. */
body .wp-site-blocks > *,
body main.wp-block-group > * {
	margin-block-start: 0;
}

/* The proof card sits on the promise bar's ground — they are one dark block. */
.ar-proof { padding-top: 0; }

/* ---------- Related (silo sibling mesh) ---------- */

.ar-silo {
	max-width: 1200px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
}
.ar-silo__title {
	font-family: var(--ar-font-display);
	font-weight: 700;
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--ar-text);
	margin: 0 0 var(--wp--preset--spacing--sm);
	text-align: center;
}
/* Auto-fit rather than two fixed columns: the old grid left a lone orphan card
   on the last row whenever the count was odd.
   NOTE: `.ar-silo__links` is the <p> that wraps the "All of …" button, NOT the
   card list — the cards are `.ar-silo__grid > li > a`. */
.ar-silo__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--wp--preset--spacing--xs);
}
.ar-silo__grid li { display: flex; }
.ar-silo__grid li > a,
.ar-silo__card {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	background: var(--ar-bg);
	border: 1px solid var(--ar-border);
	border-inline-start: 3px solid var(--ar-border);
	border-radius: var(--ar-radius-sm);
	padding: 0.85rem 1rem;
	color: var(--ar-text);
	text-decoration: none;
	font-family: var(--ar-font-display);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.3;
	transition: var(--ar-ease);
}
.ar-silo__grid li > a:hover,
.ar-silo__grid li > a:focus-visible {
	border-inline-start-color: var(--ar-accent);
	border-color: var(--ar-border);
	border-inline-start: 3px solid var(--ar-accent);
	color: var(--ar-accent);
	transform: translateX(3px);
	box-shadow: var(--wp--preset--shadow--sm);
}
.ar-silo__links { margin: var(--wp--preset--spacing--sm) 0 0; text-align: center; }
.ar-silo .ar-btn--secondary {
	display: inline-flex;
	margin-top: var(--wp--preset--spacing--sm);
	background: transparent;
	border: 1px solid var(--ar-accent);
	color: var(--ar-accent);
}
.ar-silo .ar-btn--secondary:hover,
.ar-silo .ar-btn--secondary:focus-visible { background: var(--ar-btn-bg); color: var(--ar-on-accent); border-color: var(--ar-btn-bg); }

@media (prefers-reduced-motion: reduce) {
	.ar-silo__grid li > a:hover { transform: none; }
}

/* ---------- FAQ accordion ----------
   Styled on the bare `.wp-block-details` element, not on a theme class, so an
   FAQ typed in the editor looks right without the author knowing a class name.
   The core/details block is also what inc/seo.php reads to build the FAQPage
   node — keep the element, or the schema goes with it. */

.wp-block-post-content .wp-block-details {
	border: 1px solid var(--ar-border);
	border-radius: var(--ar-radius-sm);
	background: var(--ar-bg);
	padding: 0;
	margin-block: 0.5rem;
	transition: var(--ar-ease);
}
.wp-block-post-content .wp-block-details[open] { border-color: var(--ar-accent); }

.wp-block-post-content .wp-block-details > summary {
	cursor: pointer;
	list-style: none;
	padding: 0.9rem 3rem 0.9rem 1rem;
	position: relative;
	font-family: var(--ar-font-display);
	font-weight: 600;
	font-size: 1rem;
	color: var(--ar-text);
}
.wp-block-post-content .wp-block-details > summary::-webkit-details-marker { display: none; }

/* A plus that becomes a minus, as in the mockup. Drawn with two bars so it
   needs no icon font and no JS. */
.wp-block-post-content .wp-block-details > summary::after,
.wp-block-post-content .wp-block-details > summary::before {
	content: "";
	position: absolute;
	right: 1.1rem;
	top: 50%;
	background: var(--ar-accent);
	transition: var(--ar-ease);
}
.wp-block-post-content .wp-block-details > summary::before {
	width: 0.75rem; height: 2px; margin-top: -1px;
}
.wp-block-post-content .wp-block-details > summary::after {
	width: 2px; height: 0.75rem; margin-top: -0.375rem; right: 1.475rem;
}
.wp-block-post-content .wp-block-details[open] > summary::after { transform: scaleY(0); }

.wp-block-post-content .wp-block-details > summary:hover,
.wp-block-post-content .wp-block-details > summary:focus-visible { color: var(--ar-accent); }

.wp-block-post-content .wp-block-details > :not(summary) {
	margin: 0 1rem 1rem;
	color: var(--ar-text-2);
	line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-post-content .wp-block-details,
	.wp-block-post-content .wp-block-details > summary::after { transition: none; }
}

/* ---------- home rail: symptom router + visit card ----------
   Visually distinct from the service rail on purpose. That one leads with a red
   call card because the visitor already knows what they want. This one leads
   with a dark router because they usually don't — so the first thing it offers
   is a way in, not a conversion. */

.ar-router {
	background: var(--ar-fixed-dark);
	color: var(--ar-on-accent);
	border-radius: var(--ar-radius-lg);
	padding: var(--wp--preset--spacing--md);
}
.ar-router__eyebrow {
	font-family: var(--ar-font-display);
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ar-fixed-accent);
	margin: 0 0 0.3rem;
}
.ar-router__head {
	font-family: var(--ar-font-display);
	font-weight: 700;
	font-size: 1.375rem;
	text-transform: uppercase;
	letter-spacing: 0.005em;
	color: var(--ar-on-accent);
	margin: 0 0 0.4rem;
}
.ar-router__lead { font-size: 0.8125rem; line-height: 1.5; color: rgba(255, 255, 255, 0.7); margin: 0 0 var(--wp--preset--spacing--sm); }

.ar-router__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.ar-router__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	padding: 0.7rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--ar-on-accent);
	text-decoration: none;
	font-size: 0.875rem;
	line-height: 1.35;
	transition: var(--ar-ease);
}
.ar-router__list li:last-child a { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.ar-router__list .ar-icon { color: var(--ar-fixed-accent); flex: none; transition: var(--ar-ease); }
.ar-router__list a:hover,
.ar-router__list a:focus-visible { color: var(--ar-fixed-accent); }
.ar-router__list a:hover .ar-icon,
.ar-router__list a:focus-visible .ar-icon { transform: translateX(3px); }

.ar-router__none { margin: var(--wp--preset--spacing--sm) 0 0; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.7); }
.ar-router__none a { color: var(--ar-fixed-accent); }

.ar-visit {
	border: 1px solid var(--ar-border);
	border-radius: var(--ar-radius-lg);
	padding: var(--wp--preset--spacing--md);
	background: var(--ar-bg);
}
.ar-visit__head {
	display: flex; align-items: center; gap: 0.45rem;
	font-family: var(--ar-font-display);
	font-weight: 700; font-size: 0.8125rem;
	letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--ar-text); margin: 0 0 0.6rem;
}
.ar-visit__head .ar-icon { color: var(--ar-accent); }
.ar-visit__addr { margin: 0 0 0.7rem; font-size: 0.9375rem; line-height: 1.5; color: var(--ar-text); }
.ar-visit__note {
	margin: 0.7rem 0 0; padding-top: 0.7rem;
	border-top: 1px solid var(--ar-border);
	font-size: 0.8125rem; line-height: 1.5; color: var(--ar-text-2);
}
/* Saturday is the differentiator — weight it in both rails. */
.ar-sidebar__hours .is-flag dd { color: var(--ar-accent); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
	.ar-router__list a, .ar-router__list .ar-icon { transition: none; }
	.ar-router__list a:hover .ar-icon { transform: none; }
}

/* ---------- page + hub headings ----------
   Both of these carried no type treatment at all — .ar-page-title had no rule
   and .ar-hero__title set only a margin — so every hub, about and contact page
   rendered its H1 at body-heading size, the same as the H2 directly beneath it.
   The two ran together and neither read as the page title. */

.ar-page-title,
.ar-hero__title {
	font-family: var(--ar-font-display);
	font-weight: 700;
	font-size: clamp(1.875rem, 3.4vw, 2.75rem);
	line-height: 1.06;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--ar-text);
	margin-block: 0 var(--wp--preset--spacing--sm);
	text-wrap: balance;
}

/* The H1 needs air beneath it before the first section heading. */
.ar-page-title + *,
.ar-hero__lead { margin-block-start: var(--wp--preset--spacing--sm); }

/* Breadcrumbs were sitting flush against the title. */
.ar-breadcrumbs {
	padding-block: var(--wp--preset--spacing--sm) 0;
	margin-block-end: var(--wp--preset--spacing--xs);
}

/* The hub's child grid needs separating from the copy above it. */
.ar-silo { border-top: 1px solid var(--ar-border); margin-top: var(--wp--preset--spacing--md); }

/* ---------- closing CTA (hub / about / generic) ---------- */

.ar-cta {
	background: var(--ar-btn-bg);
	color: var(--ar-on-accent);
	border-radius: var(--ar-radius-lg);
	padding: var(--wp--preset--spacing--md);
	text-align: center;
}
/* This block is a direct child of <main>, so it is caught by the flow reset
   that kills the white stripe between full-bleed bands — which left it flush
   against the NAP card above with zero gap. It also needs constraining: it was
   784px wide against a 720px content measure, so its edges stuck out either
   side of everything above it. Same specificity shape as the reset, declared
   after it, so it wins without !important. */
body main.wp-block-group > .ar-cta {
	max-width: var(--wp--style--global--content-size, 720px);
	margin-inline: auto;
	margin-block-start: var(--wp--preset--spacing--md);
	box-sizing: border-box;
}
.ar-cta__head {
	font-family: var(--ar-font-display);
	font-weight: 700;
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	text-transform: uppercase;
	letter-spacing: 0.005em;
	color: var(--ar-on-accent);
	margin: 0 0 0.4rem;
}
.ar-cta__lead { margin: 0 auto var(--wp--preset--spacing--sm); max-width: 44ch; color: rgba(255, 255, 255, 0.92); font-size: 0.9375rem; line-height: 1.55; }
.ar-cta__actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--xs); justify-content: center; }
.ar-btn--onRedGhost { background: transparent; color: var(--ar-on-accent); border: 1px solid rgba(255, 255, 255, 0.55); }
.ar-btn--onRedGhost:hover,
.ar-btn--onRedGhost:focus-visible { border-color: var(--ar-on-accent); background: rgba(255, 255, 255, 0.1); }

/* ---------- contact page: form + call-now panel ---------- */

/* Same flow-reset gap this theme hits on every direct child of <main> (see the
   .ar-cta note above) — this section is a top-level wp:html block on
   page-location.html, so it needs its own top margin and its own width; raw
   HTML output isn't sized by the block layout system the way a wp:group is. */
body main.wp-block-group > .ar-contact {
	max-width: 60rem;
	margin-inline: auto;
	margin-block-start: var(--wp--preset--spacing--lg);
	box-sizing: border-box;
	padding-inline: var(--wp--preset--spacing--md);
}
.ar-contact__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: var(--wp--preset--spacing--lg);
	align-items: start;
}
.ar-contact__heading {
	font-family: var(--ar-font-display);
	font-weight: 700;
	font-size: clamp(1.375rem, 2.4vw, 1.875rem);
	text-transform: uppercase;
	letter-spacing: 0.005em;
	color: var(--ar-text);
	margin: 0 0 0.5rem;
}
.ar-contact__lead {
	color: var(--ar-text-2);
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: 0 0 var(--wp--preset--spacing--md);
	max-width: 46ch;
}

/* The submit button, honeypot and any status notice must stay full-width even
   though the fields around them pair up — :has() targets by content, so this
   holds regardless of exactly which fields the autorepair26_contact_fields
   filter adds or removes; nothing here is positional. */
.ar-form {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 var(--wp--preset--spacing--sm);
}
.ar-form__row:has(textarea),
.ar-form__row:has(select),
.ar-form__actions,
.ar-form__notice {
	grid-column: 1 / -1;
}
.ar-form__actions { display: flex; }
.ar-form__actions .ar-btn {
	flex: 1 1 auto;
	text-align: center;
	font-size: 1rem;
	padding-block: 0.85em;
}

.ar-contact__call-card {
	position: sticky;
	top: var(--wp--preset--spacing--md);
	background: var(--ar-fixed-dark);
	color: var(--ar-on-accent);
	border-radius: var(--ar-radius-lg);
	padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
	text-align: center;
}
.ar-contact__call-icon { color: var(--ar-fixed-accent); margin-block-end: 0.5rem; }
.ar-contact__call-eyebrow {
	font-family: var(--ar-font-display);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ar-fixed-accent);
	margin: 0 0 0.6rem;
}
.ar-contact__call-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-size: 1.0625rem;
	padding-block: 0.85em;
	margin-block-end: 0.9rem;
	font-variant-numeric: tabular-nums;
}
.ar-contact__call-note {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.8125rem;
	line-height: 1.55;
	margin: 0;
}

/* Below this a stacked two-column grid is tighter than the form fields can
   take gracefully, and the sticky call card has nothing to stick against once
   it's no longer beside the form. */
@media (max-width: 48rem) {
	.ar-contact__grid { grid-template-columns: 1fr; }
	.ar-contact__call-card { position: static; }
}
@media (max-width: 30rem) {
	.ar-form { grid-template-columns: 1fr; }
}