/* Generated by ABS_Assets from assets/css/widgets/*.css. Do not edit. */

/* --- abs-area-grid.css --- */
/**
 * ABS — Areas covered (abs-area-grid), PRD §5.3, §12.3, §17.
 *
 * A grid of area cards, each linking to its own area page and carrying its own
 * response window. Every colour and type value here is an --abs-* token; if
 * something is missing, add it to ABS_Tokens rather than writing a hex value or
 * a font stack into this file.
 *
 * The whole card is the pointer target, but the anchor wraps only the area name
 * — a screen reader announces "Winchester, link" rather than the name, the
 * window and the mileage run together. A stretched ::after does the rest, which
 * clears the 48px minimum by a wide margin on every card.
 */

.abs-area-grid__list {
	display: grid;
	/* Overridden per breakpoint by the Columns control. This is the same value
	   as that control's desktop default, so the grid is right in a browser that
	   loads this file before Elementor's generated CSS. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	/* role="list" in the markup restores the semantics Safari drops when a list
	   loses its markers. */
	list-style: none;
}

/* Fallbacks only, matching the Columns control's tablet and mobile defaults
   (both 2). Without them any render that reaches a narrow viewport before
   Elementor's generated CSS exists keeps three tracks, which at 320px is about
   90px per card — narrower than the area names. Elementor's own per-breakpoint
   rules are more specific and win wherever they exist. */
@media (max-width: 1024px) {
	.abs-area-grid__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.abs-area-grid__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-height: 48px;
	padding: 18px 18px 20px;
	border-radius: 4px;
	background: var(--abs-chrome-light);
	box-shadow: inset 0 0 0 2px transparent;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* Relative to the card's inherited body size rather than a literal px, as in
   .abs-eta-badge__glyph — a px value here is a type value that no longer tracks
   the tokens. */
.abs-area-grid__pin {
	font-size: 1.1em;
}

/* The area name keeps the H3 scale whatever tag the panel chooses — the control
   sets the document outline, not the size. */
.abs-area-grid__name {
	margin: 0;
	font-family: var(--abs-h3-font);
	font-size: var(--abs-h3-size);
	font-weight: var(--abs-h3-weight);
	line-height: var(--abs-h3-lh);
	letter-spacing: var(--abs-h3-ls);
	color: var(--abs-black);
}

.abs-area-grid__link {
	color: inherit;
	text-decoration: none;
}

/* Stretches the anchor over the whole card for pointer and touch. */
.abs-area-grid__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.abs-area-grid__item:hover {
	transform: translateY(-2px);
	box-shadow: inset 0 0 0 2px var(--abs-red);
}

.abs-area-grid__item:hover .abs-area-grid__link {
	color: var(--abs-red);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* With the card stretched, a focus ring drawn around the inline anchor marks
   only the name. Where :has() is available the ring moves to the card, which is
   what the pointer actually hits; where it is not, the anchor keeps the default
   ring from abs.css and nothing is lost. */
@supports selector(:has(*)) {
	.abs-area-grid__link:focus-visible {
		outline: none;
	}

	.abs-area-grid__item:has(.abs-area-grid__link:focus-visible) {
		outline: 3px solid var(--abs-black);
		outline-offset: 2px;
	}
}

/* ---- the response window ------------------------------------------------ */

.abs-area-grid__eta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
}

/* .abs-eta-figure supplies the family, weight and tabular figures. Only the
   size steps down: the Dispatch Bar figure at full size would tie with the area
   name and the card would have two headlines. Amber stays off this surface —
   it is 2.04:1 on light — which takes the explicit override in the dark-section
   block at the foot of this file, not abs.css's own confinement. */
.abs-area-grid__eta-value {
	font-size: var(--abs-ui-size);
	color: var(--abs-black);
}

/* --abs-ink on --abs-chrome-light is 5.01:1, clearing the §17 floor. */
.abs-area-grid__zone-note,
.abs-area-grid__distance {
	margin: 0;
	max-width: 34ch;
}

/* ---- inside a dark section ---------------------------------------------- */

/* The card keeps its light --abs-chrome-light surface wherever the section
   around it goes — the footer carries .abs-on-dark, and so do the dark homepage
   sections. abs.css flips three things inside .abs-on-dark, and each of them
   lands on this light card at a specificity the rules above cannot beat:
   .abs-eyebrow and .abs-caption go to --abs-chrome-mid (2.16:1 on the card) and
   .abs-eta-figure goes to --abs-amber (1.69:1 — worse than the 2.04:1 amber
   manages on white, because the card is not white). Both are hard §17 failures, so
   the on-light values are re-asserted here at matching specificity — this file
   depends on 'abs-tyres', so it always loads after abs.css and wins the tie.
   The area name needs no rule: .abs-area-grid__name already ties with
   .abs-on-dark :where(h1…h6) and wins on the same source order. */
.abs-on-dark .abs-area-grid__eta-label,
.abs-on-dark .abs-area-grid__zone-note,
.abs-on-dark .abs-area-grid__distance {
	color: var(--abs-ink);
}

.abs-on-dark .abs-area-grid__eta-value {
	color: var(--abs-black);
}

/* ---- narrow screens ------------------------------------------------------ */

/* Two columns still fit at 320px once the padding comes in; minmax(0, 1fr)
   keeps the cards from pushing the grid wider than its track. */
@media (max-width: 479px) {
	.abs-area-grid__list {
		gap: 8px;
	}

	.abs-area-grid__item {
		padding: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.abs-area-grid__item {
		transition: none;
	}

	.abs-area-grid__item:hover {
		transform: none;
	}
}


/* --- abs-brand-marquee.css --- */
/**
 * Tyre brands — wordmark treatment (Homepage §3, PRD §12.4).
 *
 * The copy asks for "a clean logo grid or horizontal scrolling text bar". This
 * is the text half of that, and only the text half: no manufacturer artwork,
 * no badge wall, nothing that reads as an approved-stockist wall. The chips are
 * deliberately uniform and typographic — a brand set in the site's own display
 * face is plainly a list of names, whereas per-brand colours and shapes start
 * impersonating logotypes.
 *
 * Three custom properties are the widget's whole API, all written by Elementor
 * controls: --abs-brand-columns, --abs-brand-gap, --abs-brand-speed. Everything
 * else comes from the --abs-* design tokens.
 */

.abs-brand-marquee {
	/* Fallbacks only. The controls always emit these at higher specificity. */
	--abs-brand-columns: 4;
	--abs-brand-gap: 12px;
	--abs-brand-speed: 40s;
}

.abs-brand-marquee__group + .abs-brand-marquee__group {
	margin-top: 28px;
}

/* The tier heading stays a real heading for the document outline, but is set as
   an eyebrow: the brand names are the thing being looked at, and a second run of
   display type at heading size next to them flattens the hierarchy. */
.abs-brand-marquee__heading {
	margin: 0 0 10px;
	font-family: var(--abs-eyebrow-font);
	font-size: var(--abs-eyebrow-size);
	font-weight: var(--abs-eyebrow-weight);
	line-height: var(--abs-eyebrow-lh);
	letter-spacing: var(--abs-eyebrow-ls);
	text-transform: var(--abs-eyebrow-transform);
	color: var(--abs-ink);
}

.abs-brand-marquee__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --------------------------------------------------------------------------
   The wordmark chip
   -------------------------------------------------------------------------- */

.abs-brand-marquee__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	padding: 10px 14px;
	border-radius: 3px;
	background: var(--abs-chrome-light);
	color: var(--abs-black);
	font-family: var(--abs-h3-font);
	font-size: var(--abs-h3-size);
	font-weight: var(--abs-h3-weight);
	line-height: var(--abs-h3-lh);
	letter-spacing: var(--abs-h3-ls);
	text-align: center;
	/* Brand names keep the casing the manufacturer uses. Upper-casing them is a
	   step towards a logotype, which is the line this widget exists to hold. */
	text-transform: none;
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Grid — the default
   -------------------------------------------------------------------------- */

.abs-brand-marquee__list--grid {
	display: grid;
	/* minmax(0, 1fr) rather than 1fr: a long name must shrink its column instead
	   of pushing the grid past the viewport at 320px. */
	grid-template-columns: repeat(var(--abs-brand-columns, 4), minmax(0, 1fr));
	gap: var(--abs-brand-gap, 12px);
}

/* --------------------------------------------------------------------------
   Comma-separated line
   -------------------------------------------------------------------------- */

/* Reads as a sentence, so it takes the UI face at body line height rather than
   the display face — a 24px condensed comma list is a wall, not a line. */
.abs-brand-marquee__inline {
	margin: 0;
	font-family: var(--abs-ui-font);
	font-size: var(--abs-ui-size);
	font-weight: var(--abs-ui-weight);
	line-height: var(--abs-body-lh);
	letter-spacing: var(--abs-ui-ls);
	color: var(--abs-black);
}

/* --------------------------------------------------------------------------
   Scrolling strip — never the default
   -------------------------------------------------------------------------- */

.abs-brand-marquee__viewport {
	overflow: hidden;
	/* Names fade in and out at the edges rather than being sliced. A mask reads
	   only the alpha channel, so the colour here is not a design decision and is
	   deliberately not a brand token. */
	-webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0) 0, rgb(0 0 0 / 1) 32px, rgb(0 0 0 / 1) calc(100% - 32px), rgb(0 0 0 / 0) 100%);
	mask-image: linear-gradient(90deg, rgb(0 0 0 / 0) 0, rgb(0 0 0 / 1) 32px, rgb(0 0 0 / 1) calc(100% - 32px), rgb(0 0 0 / 0) 100%);
}

.abs-brand-marquee__track {
	display: flex;
	gap: var(--abs-brand-gap, 12px);
	width: max-content;
	animation: abs-brand-scroll var(--abs-brand-speed, 40s) linear infinite;
}

.abs-brand-marquee__list--row {
	display: flex;
	align-items: stretch;
	gap: var(--abs-brand-gap, 12px);
}

.abs-brand-marquee__list--row .abs-brand-marquee__item {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* The track holds two identical passes separated by one gap, so half its width
   plus half a gap is exactly one seamless loop. */
@keyframes abs-brand-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-50% - (var(--abs-brand-gap, 12px) / 2)));
	}
}

/* Reading a name is easier when it stops, so resting the pointer on the strip
   pauses it — a convenience on top of the explicit control below, which is what
   actually satisfies WCAG 2.2.2. The :focus-within half is a guard for the day
   the names become links; today the strip holds no focusable element, and the
   keyboard route to pausing is the checkbox, which sits outside this box. */
.abs-brand-marquee__viewport:hover .abs-brand-marquee__track,
.abs-brand-marquee__viewport:focus-within .abs-brand-marquee__track {
	animation-play-state: paused;
}

/* ---- the pause control -------------------------------------------------- */

/* WCAG 2.2.2: content that moves for more than five seconds needs a mechanism
   to stop it. A checkbox does that with no JavaScript — it is focusable, it
   toggles with the space bar, and its state is announced. Visually hidden, not
   display:none, because display:none would take it out of the tab order. */
.abs-brand-marquee__pause {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.abs-brand-marquee__pause-label {
	display: inline-flex;
	align-items: center;
	/* PRD §17 tap target floor. */
	min-height: 48px;
	margin-bottom: 8px;
	padding: 0 16px;
	border-radius: 3px;
	background: var(--abs-chrome-light);
	color: var(--abs-black);
	font-family: var(--abs-ui-font);
	font-size: var(--abs-ui-size);
	font-weight: var(--abs-ui-weight);
	line-height: var(--abs-ui-lh);
	letter-spacing: var(--abs-ui-ls);
	cursor: pointer;
	user-select: none;
}

/* Checked means paused, so the control shows a held-down state. */
.abs-brand-marquee__pause:checked + .abs-brand-marquee__pause-label {
	background: var(--abs-black);
	color: var(--abs-white);
}

/* The input is visually hidden, so its focus ring has to be drawn on the label
   or keyboard users lose the control entirely. */
.abs-brand-marquee__pause:focus-visible + .abs-brand-marquee__pause-label {
	outline: 3px solid var(--abs-black);
	outline-offset: 2px;
}

.abs-brand-marquee__pause:checked ~ .abs-brand-marquee__groups .abs-brand-marquee__track {
	animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   On a dark section
   -------------------------------------------------------------------------- */

.abs-brand-marquee--on-dark .abs-brand-marquee__heading {
	color: var(--abs-chrome-mid);
}

.abs-brand-marquee--on-dark .abs-brand-marquee__inline {
	color: var(--abs-white);
}

/* Chrome-light panels disappear on black, so the chip becomes an outline. White
   on black is 19.6:1; the chrome-mid border is decoration and carries no text. */
.abs-brand-marquee--on-dark .abs-brand-marquee__item {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--abs-chrome-mid);
	color: var(--abs-white);
}

.abs-brand-marquee--on-dark .abs-brand-marquee__pause-label {
	background: var(--abs-white);
	color: var(--abs-black);
}

.abs-brand-marquee--on-dark .abs-brand-marquee__pause:checked + .abs-brand-marquee__pause-label {
	background: var(--abs-chrome-mid);
	color: var(--abs-black);
}

.abs-brand-marquee--on-dark .abs-brand-marquee__pause:focus-visible + .abs-brand-marquee__pause-label {
	outline-color: var(--abs-white);
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

/* abs.css already crushes every animation to 0.01ms globally, which for this
   track would leave it parked at the end of its travel with the first names off
   screen. So the strip is rebuilt as a static wrapping row instead: the seam
   copy is dropped, the clipping viewport opens up, and the pause control goes
   with it because nothing is moving to pause. */
@media (prefers-reduced-motion: reduce) {
	.abs-brand-marquee__viewport {
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.abs-brand-marquee__track {
		width: auto;
		flex-wrap: wrap;
		animation: none;
	}

	.abs-brand-marquee__list--row {
		flex-wrap: wrap;
	}

	.abs-brand-marquee__list--row[aria-hidden="true"] {
		display: none;
	}

	/* The input goes with its label. Hiding only the label would leave the
	   checkbox visually hidden but still in the tab order: a keyboard user would
	   land on a control with no visible focus state (WCAG 2.4.7) that operates
	   an animation which is no longer running. */
	.abs-brand-marquee__pause,
	.abs-brand-marquee__pause-label {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Wordmark treatment
   --------------------------------------------------------------------------
   The client asked for a logo grid. PRD §12.4 bans one outright, which is more
   cautious than the law needs — showing the marks of brands you genuinely stock
   is referential use under s.11(2) Trade Marks Act 1994. The widget therefore
   accepts logos, but ships without them, because the artwork is copyright
   separately from the mark and has to come from each manufacturer's brand kit.

   So the type has to carry it alone. Set in the condensed display face at a size
   that reads as a wordmark rather than a list item, on a dark ground where names
   sit like plates on a workshop wall. */

.abs-brand-marquee__list--grid {
	gap: 1px;
	background: var(--abs-chrome-light);
	border: 1px solid var(--abs-chrome-light);
}

.abs-brand-marquee__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 74px;
	padding: 14px 12px;
	background: var(--abs-white);
	transition: background-color 0.15s ease;
}

.abs-brand-marquee__name {
	font-family: var(--abs-font-display);
	font-size: clamp(17px, 2.1vw, 22px);
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--abs-black);
	white-space: nowrap;
}

/* Logos, when supplied, render at a common height so no manufacturer appears
   more prominent than another — or than ABS's own branding. */
.abs-brand-marquee__logo {
	max-height: 30px;
	width: auto;
	object-fit: contain;
}

/* With a logo present the name becomes its accessible label rather than a
   second visual element competing with it. */
.abs-brand-marquee__name--with-logo {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.abs-brand-marquee__heading {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--abs-red);
	margin-bottom: 10px;
}

.abs-brand-marquee__heading::after {
	content: "";
	flex: 1;
	height: 2px;
	background: var(--abs-chrome-light);
}

.abs-brand-marquee__group + .abs-brand-marquee__group {
	margin-top: 26px;
}

@media (prefers-reduced-motion: reduce) {
	.abs-brand-marquee__item {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Logos
   --------------------------------------------------------------------------
   Full colour, at a common height.

   An earlier version rendered these monochrome, to make a partial set of logos
   sit with the wordmarks that filled the gaps. With all eleven supplied that
   problem is gone, and the filter actively broke two of them: Kumho and
   Firestone are white-on-coloured lockups rather than transparent artwork, so
   desaturating them produced a solid black box. Brand recognition is the entire
   point of showing a logo — so they are shown.

   The common height is what keeps this referential use rather than an implied
   partnership: no manufacturer is given prominence over another, or over ABS's
   own branding. */

.abs-brand-marquee__logo {
	/* A uniform bounding box rather than a height cap. Logos come in wildly
	   different aspect ratios — Michelin is 10:1, Nexen's stacked lockup is
	   roughly 3:2 — and capping only the height rendered the square ones at
	   49px wide, which read as an empty cell. object-fit lets each one fill
	   whichever dimension binds first inside a shared box. */
	width: 76%;
	height: 46px;
	object-fit: contain;
}

/* Lockups with their own coloured field get a touch of breathing room so they
   do not butt against the cell edge the way transparent artwork can. */
.abs-brand-marquee__item:has(> .abs-brand-marquee__logo[src$=".png"]) {
	padding-block: 16px;
}

.abs-brand-marquee--on-dark .abs-brand-marquee__logo {
	/* Dark surfaces are the one place a wash is still needed: navy and black
	   artwork disappears on black. */
	filter: brightness(0) invert(1);
}


/* --- abs-coverage-map.css --- */
/**
 * ABS — Coverage map (click-to-load).
 *
 * The frame reserves its final height with a percentage padding-bottom, so the
 * placeholder and the loaded iframe occupy exactly the same box and the page
 * never shifts. That is the whole CLS story for this component.
 */

.abs-map__caption {
	margin: 0 0 10px;
}

.abs-map__frame {
	position: relative;
	width: 100%;
	/* Overridden per breakpoint by the widget's "Shape" control. */
	padding-bottom: 56%;
	overflow: hidden;
	border-radius: 4px;
	background: var(--abs-chrome-light);
}

.abs-map__placeholder,
.abs-map__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.abs-map__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 20px;
	text-align: center;
	/* A flat road-map suggestion rather than a screenshot of Google's map,
	   which would be their copyright. */
	background:
		repeating-linear-gradient(90deg, transparent 0 38px, rgb(154 161 168 / 24%) 38px 39px),
		repeating-linear-gradient(0deg, transparent 0 38px, rgb(154 161 168 / 24%) 38px 39px),
		var(--abs-chrome-light);
}

.abs-map__frame.is-loaded .abs-map__placeholder {
	display: none;
}

.abs-map__pin {
	font-size: 30px;
}

.abs-map__place {
	margin: 0;
	font-family: var(--abs-h3-font);
	font-size: var(--abs-h3-size);
	font-weight: var(--abs-h3-weight);
	line-height: var(--abs-h3-lh);
	letter-spacing: var(--abs-h3-ls);
	color: var(--abs-black);
}

.abs-map__button {
	min-height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	background: var(--abs-red);
	color: var(--abs-white);
	font-family: var(--abs-ui-font);
	font-size: var(--abs-ui-size);
	font-weight: var(--abs-ui-weight);
	letter-spacing: var(--abs-ui-ls);
}

.abs-map__button:hover {
	filter: brightness(0.94);
}

.abs-map__privacy {
	max-width: 34ch;
	margin: 0;
}

.abs-map__fallback {
	margin: 8px 0 0;
}

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


/* --- abs-dispatch-bar.css --- */
/**
 * Dispatch bar — inline widget variant (PRD §7.4, §13.2).
 *
 * The in-content copy of the signature element. It shares the global bar's class
 * names so it reads as the same component, then overrides everything that only
 * makes sense on a bar pinned to the viewport.
 *
 * Two things shape how this file is written:
 *
 *  1. Every root-level override doubles the class —
 *     `.abs-dispatch--inline.abs-dispatch` is (0,2,0) and therefore beats
 *     `.abs-dispatch` (0,1,0) whatever order the two stylesheets load in.
 *     Order is genuinely not guaranteed: Elementor enqueues a widget's
 *     stylesheet when the widget renders, which is after the theme's enqueues on
 *     the front end and instead of them in the editor. Winning on specificity
 *     rather than on order is the difference between an inline block and a
 *     second element stuck over the bottom of the page on mobile.
 *  2. It has to stand on its own. assets/css/dispatch-bar.css is enqueued on the
 *     front end but not inside the Elementor editor canvas, so the rules below
 *     restate what the inline bar needs rather than inheriting it.
 *
 * Tokens only — no hex values, no literal font sizes. See assets/css/abs.css.
 */

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.abs-dispatch--inline.abs-dispatch {
	/* The global bar is the only fixed element on the page (PRD §7.4). This one
	   is an in-flow block and unsets every property the mobile rules use to lift
	   its sibling out of flow. */
	position: static;
	inset: auto;
	z-index: auto;
	box-shadow: none;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	padding: 20px;
	border-radius: 6px;
	background: var(--abs-red);
	color: var(--abs-white);
}

/* --------------------------------------------------------------------------
   Response window
   -------------------------------------------------------------------------- */

.abs-dispatch--inline .abs-dispatch__window {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 0;
	min-width: 0;
	font-family: var(--abs-body-font);
	font-size: var(--abs-body-size);
	line-height: var(--abs-body-lh);
}

.abs-dispatch--inline .abs-dispatch__spark {
	align-self: center;
	font-size: var(--abs-eyebrow-size);
}

.abs-dispatch--inline .abs-dispatch__eyebrow {
	font-family: var(--abs-eyebrow-font);
	font-size: var(--abs-eyebrow-size);
	font-weight: var(--abs-eyebrow-weight);
	line-height: var(--abs-eyebrow-lh);
	letter-spacing: var(--abs-eyebrow-ls);
	text-transform: var(--abs-eyebrow-transform);
	color: var(--abs-white);
}

/* The claim gets its own line, so the eyebrow reads as a label above it rather
   than as a run-on sentence beside it. Done with flex-basis instead of a wrapper
   element, which keeps the markup identical to inc/dispatch-bar.php. */
.abs-dispatch--inline .abs-dispatch__eta {
	flex: 0 0 100%;
	/* White, never amber. The global bar switches this line to --abs-amber below
	   767px because there it sits on --abs-black (9.40:1). On red, amber is
	   2.4:1 and unreadable — that override has to be undone here, and the
	   doubled specificity is what undoes it inside the media query. */
	color: var(--abs-white);
	/* .abs-eta-figure brings --abs-eta-lh, which is 1em — right for a one-line
	   figure like "45–60 min", wrong here. This line carries the whole hedged
	   sentence and wraps to two lines at 320px, where a condensed 800 face at
	   line-height 1 puts one line's descenders into the next line's ascenders.
	   --abs-h3-lh is the theme's display line-height for exactly that case. */
	line-height: var(--abs-h3-lh);
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */

.abs-dispatch--inline .abs-dispatch__actions {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-end;
	gap: 8px;
	padding: 0;
}

.abs-dispatch--inline .abs-dispatch__action {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* PRD §17 floors interactive targets at 48px; the Dispatch Bar raises its own
	   to 56px, and the inline copy is the same component and keeps the same
	   target. */
	min-height: 56px;
	min-width: 168px;
	padding: 8px 20px;
	border-radius: 4px;
	text-align: center;
	text-decoration: none;
	font-family: var(--abs-ui-font);
	line-height: var(--abs-ui-lh);
	transition: transform 0.12s ease, filter 0.12s ease;
}

.abs-dispatch--inline .abs-dispatch__label {
	font-size: var(--abs-ui-size);
	font-weight: var(--abs-ui-weight);
	letter-spacing: var(--abs-ui-ls);
}

/* Kept visible at every width. The global bar drops these below 360px to protect
   its 56px targets in a strip 100vw wide; an in-flow block has the room, and the
   number under "Call now" is the reassurance the whole component exists for. */
.abs-dispatch--inline .abs-dispatch__sub {
	display: block;
	font-family: var(--abs-caption-font);
	font-size: var(--abs-caption-size);
	line-height: var(--abs-caption-lh);
	opacity: 0.85;
	font-variant-numeric: tabular-nums;
}

.abs-dispatch--inline .abs-dispatch__action--call {
	background: var(--abs-white);
	color: var(--abs-red);
}

/* WhatsApp green carries BLACK text, not white. White on --abs-whatsapp is
   1.98:1 and fails WCAG AA outright; --abs-black on it is 9.67:1. A deliberate,
   documented departure from WhatsApp's own brand styling, matching the global
   bar — see assets/css/dispatch-bar.css and tools/contrast-audit.php. */
.abs-dispatch--inline .abs-dispatch__action--wa {
	background: var(--abs-whatsapp);
	color: var(--abs-black);
}

.abs-dispatch--inline .abs-dispatch__action:hover {
	filter: brightness(0.94);
}

/* White ring: the black default from abs.css disappears on red. */
.abs-dispatch--inline .abs-dispatch__action:focus-visible {
	outline: 3px solid var(--abs-white);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Narrow
   -------------------------------------------------------------------------- */

/* Stack below the point where the window line and both buttons stop fitting on
   one row. Buttons go full width — the easiest thing in the world to hit with a
   thumb, which is the whole point of the component. */
@media (max-width: 767px) {
	.abs-dispatch--inline.abs-dispatch {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 16px;
	}

	.abs-dispatch--inline .abs-dispatch__actions {
		justify-content: stretch;
	}

	.abs-dispatch--inline .abs-dispatch__action {
		flex: 1 1 100%;
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.abs-dispatch--inline .abs-dispatch__action {
		transition: none;
	}
}


/* --- abs-eta-badge.css --- */
/**
 * ABS — Response window badge.
 */

.abs-eta-badge {
	display: flex;
}

.abs-eta-badge__inner {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-radius: 3px;
}

.abs-eta-badge--dark .abs-eta-badge__inner {
	background: var(--abs-black);
	color: var(--abs-white);
}

.abs-eta-badge--light .abs-eta-badge__inner {
	background: var(--abs-chrome-light);
	color: var(--abs-black);
	border: 1px solid var(--abs-chrome-mid);
}

.abs-eta-badge__glyph {
	font-size: 1.1em;
}

.abs-eta-badge__label {
	white-space: nowrap;
}

/* Amber only ever appears on the dark variant: on white it is 2.04:1 and fails
   even the large-text threshold. See tools/contrast-audit.php. */
.abs-eta-badge--dark .abs-eta-badge__value {
	color: var(--abs-amber);
}

.abs-eta-badge--light .abs-eta-badge__value {
	color: var(--abs-black);
}

@media (max-width: 480px) {
	.abs-eta-badge__inner {
		flex-wrap: wrap;
		gap: 4px 10px;
	}
}


/* --- abs-faq.css --- */
/**
 * FAQ accordion (PRD §5.5, §13.2).
 *
 * Native <details>/<summary>. The disclosure behaviour, the keyboard handling
 * and the aria-expanded state all come from the browser, so this file only has
 * to do three things: suppress the default marker, draw our own, and keep the
 * toggle above the 48px target floor (§17) whatever padding the client sets.
 *
 * The width, spacing and padding here are fallbacks. Elementor prints the same
 * properties at higher specificity from the widget's own controls, so editing
 * the panel always wins over this file.
 *
 * Every value is a --abs-* token. No hex, no font sizes typed by hand.
 */

.abs-faq {
	max-width: 760px;
}

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

.abs-faq__title {
	display: flex;
	align-items: baseline;
	gap: 0.35em;
	margin-block: 0 0.6em;
}

/* Decorative only, aria-hidden in the markup. Sized down so it never competes
   with the display face beside it. */
.abs-faq__glyph {
	font-size: 0.8em;
}

/* ---- the list ----------------------------------------------------------- */

.abs-faq__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.abs-faq__item {
	background: var(--abs-white);
}

.abs-faq--card .abs-faq__item {
	border: 1px solid var(--abs-chrome-light);
	border-radius: 4px;
}

/* Open items firm up rather than change colour — the border is the only thing
   that moves, so nothing shifts position as questions open and close. */
.abs-faq--card .abs-faq__item[open] {
	border-color: var(--abs-chrome-mid);
}

.abs-faq--line .abs-faq__item {
	border-bottom: 1px solid var(--abs-chrome-light);
}

.abs-faq--line .abs-faq__item:first-child {
	border-top: 1px solid var(--abs-chrome-light);
}

/* ---- the toggle --------------------------------------------------------- */

.abs-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	/* PRD §17 floor. Padding can grow this but never shrink it. */
	min-height: 48px;
	padding: 14px 18px;
	cursor: pointer;
	list-style: none;
	-webkit-tap-highlight-color: transparent;
}

/* Safari draws its own triangle unless the -webkit- pseudo is hidden too, but
   these must be two rules rather than one selector list: an unrecognised
   pseudo-element invalidates the entire list it appears in, so pairing them
   would take ::marker down with it in engines that have never heard of
   ::-webkit-details-marker. */
.abs-faq__q::marker {
	content: "";
}

.abs-faq__q::-webkit-details-marker {
	display: none;
}

/* The question keeps the H3 scale whichever heading level is chosen — the tag
   is there for the document outline, not for size. abs.css gives headings a
   bottom margin; inside a flex toggle that would push the text off centre. */
.abs-faq__q-text {
	margin: 0;
	font-family: var(--abs-h3-font);
	font-size: var(--abs-h3-size);
	font-weight: var(--abs-h3-weight);
	line-height: var(--abs-h3-lh);
	letter-spacing: var(--abs-h3-ls);
	color: var(--abs-black);
	text-wrap: balance;
}

.abs-faq__q:hover .abs-faq__q-text,
.abs-faq__item[open] > .abs-faq__q .abs-faq__q-text {
	/* --abs-red on --abs-white is 5.08:1, clear of the §17 floor. */
	color: var(--abs-red);
}

/* Chevron drawn from borders: no icon font, no extra element — <summary> may
   only contain one heading element, so the marker has to be a pseudo. */
.abs-faq__q::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-block-start: -4px;
	border-right: 2px solid var(--abs-red);
	border-bottom: 2px solid var(--abs-red);
	transform: rotate(45deg);
	transition: transform 0.18s ease;
}

.abs-faq__item[open] > .abs-faq__q::after {
	margin-block-start: 4px;
	transform: rotate(-135deg);
}

/* Keep the focus ring inside the card instead of straddling its border. */
.abs-faq__q:focus-visible {
	outline-offset: -3px;
	border-radius: 3px;
}

/* ---- the answer --------------------------------------------------------- */

.abs-faq__a {
	padding: 0 18px 14px;
	font-family: var(--abs-body-font);
	font-size: var(--abs-body-size);
	font-weight: var(--abs-body-weight);
	line-height: var(--abs-body-lh);
	color: var(--abs-ink);
}

.abs-faq__a > :first-child {
	margin-block-start: 0;
}

.abs-faq__a > :last-child {
	margin-block-end: 0;
}

.abs-faq__a a {
	color: var(--abs-red);
}

/* Contact details inside an answer are links, so they inherit the 48px floor
   from abs.css. Inline within a paragraph that would wreck the leading. */
.abs-faq__a :where(a) {
	min-height: 0;
}

/* ---- motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.abs-faq__q::after {
		transition: none;
	}
}

/* ---- print -------------------------------------------------------------- */

@media print {
	/* Someone printing the FAQs wants the answers, not the questions. The
	   pseudo-element is the modern hook; the display override covers engines
	   that still hide closed content the old way. */
	.abs-faq__item::details-content {
		content-visibility: visible;
	}

	.abs-faq__item > .abs-faq__a {
		display: block;
	}

	.abs-faq__q::after {
		display: none;
	}
}


/* --- abs-reviews.css --- */
/**
 * ABS — Google reviews.
 */

.abs-reviews__stars {
	margin: 0 0 6px;
	font-size: 22px;
	line-height: 1;
	letter-spacing: 2px;
	color: var(--abs-amber);
}

/* Amber on white is 2.04:1, so the stars are decoration only — never the sole
   carrier of the rating. The accessible name on the paragraph states the figure
   in words, and the headline below repeats it in body colour. */
.abs-reviews__headline {
	margin: 0;
	font-family: var(--abs-h2-font);
	font-size: var(--abs-h2-size);
	font-weight: var(--abs-h2-weight);
	line-height: var(--abs-h2-lh);
	letter-spacing: var(--abs-h2-ls);
	color: var(--abs-black);
}

.abs-reviews__subtitle {
	margin: 10px auto 0;
	max-width: 56ch;
}

.abs-reviews__link {
	margin: 14px 0 0;
}

.abs-reviews__link a {
	color: var(--abs-red);
	font-weight: 600;
}

.abs-reviews__editor-warning {
	margin: 14px 0 0;
	padding: 10px 14px;
	border-inline-start: 4px solid var(--abs-amber);
	background: var(--abs-chrome-light);
	color: var(--abs-black);
	font-family: var(--abs-caption-font);
	font-size: var(--abs-caption-size);
	text-align: start;
}

.abs-on-dark .abs-reviews__headline {
	color: var(--abs-white);
}


/* --- abs-service-grid.css --- */
/**
 * ABS — Service grid (PRD §9, §13.2).
 *
 * A list of service cards. The whole card is a click target, but the target is
 * a real anchor stretched over the card with ::after, not a JS click handler on
 * a div — so it is keyboard reachable, focusable, and openable in a new tab.
 *
 * Column count and gap come from the widget's controls as
 * `--abs-service-grid-cols` and a `gap` declaration Elementor writes per
 * breakpoint. The values below are the fallbacks that hold before Elementor has
 * generated its CSS for the page.
 *
 * Every colour is a token. The only literal colour is the card shadow, which is
 * a neutral rgb(0 0 0 / …) as in dispatch-bar.css — a shadow tinted with a brand
 * colour reads as a coloured halo, not depth.
 */

/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */

.abs-service-grid {
	--abs-service-grid-cols: 3;

	display: grid;
	grid-template-columns: repeat(var(--abs-service-grid-cols), minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	/* role="list" in the markup restores the semantics Safari drops when a list
	   loses its markers. */
	list-style: none;
}

/* Fallbacks only. Once the page's Elementor CSS exists its per-breakpoint rules
   are more specific and win, including the widget's own 2 / 1 defaults. */
@media (max-width: 1024px) {
	.abs-service-grid {
		--abs-service-grid-cols: 2;
		gap: 20px;
	}
}

@media (max-width: 767px) {
	.abs-service-grid {
		--abs-service-grid-cols: 1;
		gap: 16px;
	}
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.abs-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 24px;
	background: var(--abs-white);
	border: 1px solid var(--abs-chrome-light);
	/* The red edge is the only brand mark on the card. Enough to tie the grid to
	   the rest of the page without a red panel behind body copy. */
	border-top: 3px solid var(--abs-red);
	border-radius: 4px;
	transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.abs-service-card:hover,
.abs-service-card:focus-within {
	transform: translateY(-2px);
	border-color: var(--abs-chrome-mid);
	border-top-color: var(--abs-red);
	box-shadow: 0 6px 18px rgb(0 0 0 / 12%);
}

.abs-service-card__icon {
	font-size: var(--abs-h3-size);
	line-height: 1;
}

/* The card title keeps the H3 scale whatever tag the panel chooses — the
   control sets the document outline, not the size. Without this an H2 card
   title renders at 36px and the card has two headlines' worth of type in it. */
.abs-service-card__title {
	margin: 0;
	font-family: var(--abs-h3-font);
	font-size: var(--abs-h3-size);
	font-weight: var(--abs-h3-weight);
	line-height: var(--abs-h3-lh);
	letter-spacing: var(--abs-h3-ls);
	color: var(--abs-black);
}

.abs-service-card__body {
	margin: 0;
	font-family: var(--abs-body-font);
	font-size: var(--abs-body-size);
	font-weight: var(--abs-body-weight);
	line-height: var(--abs-body-lh);
	color: var(--abs-ink);
}

/* --------------------------------------------------------------------------
   Link
   -------------------------------------------------------------------------- */

.abs-service-card__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* Sits on the bottom edge whatever length the copy above runs to, so the
	   links line up across a row. */
	margin-top: auto;
	/* PRD §17 — 48px minimum target. */
	min-height: 48px;
	font-family: var(--abs-ui-font);
	font-size: var(--abs-ui-size);
	font-weight: var(--abs-ui-weight);
	color: var(--abs-red);
	text-decoration: none;
}

/* The stretched target. Everything in the card except selectable text sits
   under it, which is what makes the whole card clickable.

   The radius is stated, not inherited: `inherit` resolves against the anchor,
   which has none — and picks up the 2px abs.css puts on :focus-visible, so the
   focus ring would change shape as it appeared. 4px matches the card. */
.abs-service-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 4px;
}

.abs-service-card__link:hover .abs-service-card__link-text,
.abs-service-card:hover .abs-service-card__link-text {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.abs-service-card__arrow {
	transition: transform 0.14s ease;
}

.abs-service-card:hover .abs-service-card__arrow {
	transform: translateX(3px);
}

/* Focus rings the whole card rather than the two words of link text, because
   the whole card is what activates. The ring is drawn on the same ::after that
   provides the hit area, so the two can never disagree — if the ring is missing
   the card is not clickable either, and the anchor's own outline would be
   drawn instead. */
.abs-service-card__link:focus-visible {
	outline: none;
}

.abs-service-card__link:focus-visible::after {
	outline: 3px solid var(--abs-black);
	outline-offset: 3px;
}

/* Screen-reader-only suffix naming the service, so a links list reads
   "Read more about Mobile Puncture Repair" rather than five identical entries. */
.abs-service-card__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   Missing copy
   -------------------------------------------------------------------------- */

/* A [COPY:…] token is a build failure that reached the page. It is styled to be
   impossible to mistake for finished text, and impossible to miss in a
   screenshot sent for approval. */
.abs-service-card__title--missing,
.abs-service-card__body--missing {
	color: var(--abs-red);
	font-family: var(--abs-ui-font);
	outline: 2px dashed var(--abs-red);
	outline-offset: 3px;
}

.abs-service-grid__notice {
	margin: 0;
	padding: 16px;
	font-family: var(--abs-ui-font);
	font-size: var(--abs-ui-size);
	color: var(--abs-ink);
	background: var(--abs-chrome-light);
	border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Dark sections
   -------------------------------------------------------------------------- */

/* Homepage §4 can sit on black. The card body is the substance of the card, not
   a caption, so it takes --abs-chrome-light (15.4:1 on --abs-black) rather than
   the --abs-chrome-mid abs.css gives .abs-caption and .abs-eyebrow (7.34:1).
   --abs-ink is 1.53:1 on black and is not legible there at all. */
.abs-on-dark .abs-service-card {
	background: var(--abs-black);
	border-color: var(--abs-chrome-mid);
	border-top-color: var(--abs-red);
}

.abs-on-dark .abs-service-card__title {
	color: var(--abs-white);
}

.abs-on-dark .abs-service-card__body {
	color: var(--abs-chrome-light);
}

.abs-on-dark .abs-service-card__link {
	color: var(--abs-white);
}

.abs-on-dark .abs-service-card__link:focus-visible::after {
	outline-color: var(--abs-white);
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.abs-service-card,
	.abs-service-card__arrow {
		transition: none;
	}

	.abs-service-card:hover,
	.abs-service-card:focus-within {
		transform: none;
	}

	.abs-service-card:hover .abs-service-card__arrow {
		transform: none;
	}
}


/* --- abs-triage-tiles.css --- */
/**
 * Emergency triage tiles (PRD §12.1).
 *
 * A grid of single-anchor tiles that turn a symptom into a service. Nothing here
 * is decoration: this is the first thing a stranded driver taps, so the rules are
 * size, contrast and a focus ring that survives every background.
 *
 * Two values come from the widget's controls as custom properties, both with
 * fallbacks so the tiles are correct before Elementor writes a line of CSS:
 *   --abs-triage-cols    columns at the current breakpoint (4 or 2)
 *   --abs-triage-min-h   minimum tile height
 *
 * Colour and type are `--abs-*` tokens only — see assets/css/abs.css.
 */

.abs-triage {
	display: grid;
	grid-template-columns: repeat(var(--abs-triage-cols, 4), minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The item is a flex box purely so the anchor fills the whole grid cell — every
   tile in a row then has the same height and the same hit area. */
.abs-triage__item {
	display: flex;
	margin: 0;
}

.abs-triage__tile {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: var(--abs-triage-min-h, 104px);
	padding: 12px 10px;
	border: 2px solid transparent;
	border-radius: 4px;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.abs-triage__glyph {
	font-size: var(--abs-h3-size);
}

/* The label carries the H3 role without being a heading: these are links in a
   list, and four h3s here would clutter the page's heading outline. */
.abs-triage__label {
	font-family: var(--abs-h3-font);
	font-size: var(--abs-h3-size);
	font-weight: var(--abs-h3-weight);
	line-height: var(--abs-h3-lh);
	letter-spacing: var(--abs-h3-ls);
	text-wrap: balance;
}

.abs-triage__dest {
	max-width: 100%;
}

/* ---- dark tiles: the default, for a white section ------------------------ */

/* White on --abs-black is 18.9:1. The tile also carries .abs-on-dark, which is
   what flips .abs-caption to --abs-chrome-mid (7.34:1 on black). */
.abs-triage--dark .abs-triage__tile {
	background: var(--abs-black);
	color: var(--abs-white);
}

/* ---- light tiles: for a section that is already dark --------------------- */

/* --abs-black on --abs-chrome-light is 16.9:1; --abs-ink on it is 5.05:1, so the
   destination line clears AA as small text. */
.abs-triage--light .abs-triage__tile {
	background: var(--abs-chrome-light);
	color: var(--abs-black);
}

.abs-triage--light .abs-triage__dest {
	color: var(--abs-ink);
}

/* ---- hover ------------------------------------------------------------- */

/* Both tones resolve to red on hover, because red is the site's "this is the
   action" colour. White on --abs-red is 5.07:1. */
.abs-triage--dark .abs-triage__tile:hover,
.abs-triage--light .abs-triage__tile:hover {
	background: var(--abs-red);
	color: var(--abs-white);
	transform: translateY(-2px);
}

/* The destination line has to follow. On the dark tile it is --abs-chrome-mid,
   which is 7.34:1 on black but only 1.94:1 once the tile turns red — so both
   tones take white here (5.07:1), at a specificity that beats the .abs-on-dark
   caption rule in abs.css. */
.abs-triage--dark .abs-triage__tile:hover .abs-triage__dest,
.abs-triage--light .abs-triage__tile:hover .abs-triage__dest {
	color: var(--abs-white);
}

/* ---- focus ------------------------------------------------------------- */

/* Red ring, white gap. The gap matters: it keeps the ring visible when the tile
   sits on a surface close to the ring's own colour, and the red clears 3:1
   against white (5.07), --abs-chrome-light (4.08) and --abs-black (4.14) alike,
   so one rule covers both tones and the red hover state underneath it.
   Specificity 0,2,0 beats the site-wide ring in abs.css. */
.abs-triage__tile:focus-visible {
	outline: 3px solid var(--abs-red);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--abs-white);
}

/* ---- phones ------------------------------------------------------------- */

/* 767px is Elementor's mobile breakpoint (ABS_Kit::breakpoints), so this switches
   in step with the responsive columns control and the type tokens. */
@media (max-width: 767px) {
	/* Mirrors the Columns control's own mobile default. Without it the fallback in
	   the var() above holds at every width, so a phone gets four tiles across —
	   roughly 66px of tile at 320px — on any request where Elementor's generated
	   page CSS is missing, stale or still being written. Elementor's own rule is
	   more specific and wins the moment it exists. */
	.abs-triage {
		--abs-triage-cols: 2;

		gap: 8px;
	}

	/* The floor is not negotiable from the panel. PRD §17 asks 48px sitewide;
	   these tiles are aimed at someone at the roadside in the rain, so the height
	   slider can raise them but never take them below 96px. */
	.abs-triage__tile {
		min-height: max(96px, var(--abs-triage-min-h, 104px));
		padding: 10px 8px;
	}
}

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

	.abs-triage--dark .abs-triage__tile:hover,
	.abs-triage--light .abs-triage__tile:hover {
		transform: none;
	}
}