/* ==========================================================================
   Bristol Appliance Centre
   Built from the signed-off "Variant A" homepage design.
   Brand: Emerald #00C86B · Ink #0E1113 · Montserrat
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
	--emerald: #00c86b;        /* brand green: backgrounds, rules, text on dark */
	/* #00a85b measured only 3.11:1 on white, which fails AA for the small text
	   it was used on (eyebrows, text links, card CTAs). These clear 4.5:1. */
	--emerald-ink: #00723e;    /* accent TEXT on light backgrounds: 6.04:1 */
	--emerald-deep: #005c32;   /* hover: 8.15:1 */
	--ink: #0e1113;
	--ink-soft: #1b2023;
	--slate: #4c5451;
	--grey: #6a716e;
	--grey-light: #9aa19d;
	--line: #e3e7e5;
	--mist: #f5f7f6;
	--white: #fff;
	--gold: #f0b429;
	--trustpilot: #00b67a;

	--font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	--container: 1296px;
	--gutter: clamp(20px, 5vw, 72px);
	--section-y: clamp(56px, 7vw, 88px);
	--radius: 4px;

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--speed: 0.35s;

	--header-h: 0px;
}

/* ------------------------------------------------------------- resets */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.7;
	color: var(--ink);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

img, svg, video, picture { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
a:where(:not([class])) { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

button { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
	outline: 2px solid var(--emerald);
	outline-offset: 3px;
}

::selection { background: var(--emerald); color: var(--ink); }

/* ---------------------------------------------------------- a11y utils */
.screen-reader-text {
	position: absolute !important;
	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;
}

.skip-link:focus {
	position: fixed; top: 12px; left: 12px;
	z-index: 999;
	width: auto; height: auto;
	clip: auto; clip-path: none;
	padding: 12px 20px;
	background: var(--ink); color: var(--white);
	font-weight: 700; font-size: 13px;
}

/* -------------------------------------------------------------- layout */
.container {
	width: 100%;
	max-width: calc(var(--container) + (var(--gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--gutter);
}
/* Left-aligned content is anchored to the gutter, not centred in the page.
   Sections that are genuinely centred (404, centred CTAs) set their own
   alignment and are unaffected. */
.container--narrow { max-width: 860px; margin-inline: 0; }
.section--centred .container--narrow,
.container--narrow.is-centred { margin-inline: auto; }

.section { padding-block: var(--section-y); }
.section--centred { text-align: center; }
.section--centred.container--narrow { margin-inline: auto; }
.section--categories { background: var(--white); }
.section--brands { background: var(--mist); }
.section--features { background: var(--mist); padding-bottom: clamp(40px, 5vw, 64px); }
.section--reviews { background: var(--white); padding-top: clamp(36px, 4vw, 56px); }

/* ---------------------------------------------------------- typography */
.h-rich {
	font-weight: 300;
	letter-spacing: -0.01em;
	line-height: 1.15;
	text-wrap: balance;
	color: var(--ink);
}
.h-rich strong, .h-rich b { font-weight: 600; }
.h-rich em { font-style: italic; }

.section__title { font-size: clamp(27px, 3.1vw, 36px); }

.eyebrow {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--emerald-ink);
	margin-bottom: 14px;
}

.rich { text-wrap: pretty; }
/* Reset first, then space siblings. `.rich p` would out-specify `.rich > * + *`
   and silently collapse the gap between paragraphs, so match on the child
   selector in both rules. */
.rich > * { margin: 0; }
.rich > * + * { margin-top: 1em; }
.rich strong { font-weight: 600; }
.rich a {
	color: var(--emerald-ink);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color var(--speed) var(--ease);
}
.rich a:hover { color: var(--emerald-deep); }
.rich ul { list-style: none; }
.rich ul li { position: relative; padding-left: 22px; }
.rich ul li::before {
	content: ""; position: absolute; left: 0; top: 0.72em;
	width: 8px; height: 2px; background: var(--emerald);
}
.rich ol { list-style: decimal; padding-left: 20px; }
.rich li + li { margin-top: 0.4em; }
.rich h2, .rich h3, .rich h4 { font-weight: 600; line-height: 1.25; }
.rich h2 { font-size: 1.6em; }
.rich h3 { font-size: 1.3em; }
.rich blockquote {
	padding-left: 24px;
	border-left: 3px solid var(--emerald);
	font-size: 1.08em;
	color: var(--slate);
}

.section__head { margin-bottom: clamp(32px, 4vw, 44px); }
.section__head--split {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 40px;
	justify-content: space-between;
	align-items: flex-end;
}
.section__head--split .section__head-aside {
	max-width: 38ch;
	font-size: 14px;
	line-height: 1.65;
	color: var(--grey);
	text-align: right;
}
.section__head--centred { text-align: center; }
.section__head--centred .section__lede {
	max-width: 62ch;
	margin-inline: auto;
	margin-top: 12px;
	font-size: 14px;
	color: var(--grey);
}
.section__note {
	margin-top: 26px;
	text-align: center;
	font-size: 11px;
	color: var(--grey-light);
}

@media (max-width: 720px) {
	.section__head--split { flex-direction: column; align-items: flex-start; }
	.section__head--split .section__head-aside { text-align: left; }
}

/* ------------------------------------------------------------- buttons */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 17px 30px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background var(--speed) var(--ease), color var(--speed) var(--ease),
		border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--compact { padding: 14px 22px; font-size: 11.5px; }

.btn--primary { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--primary:hover { background: var(--emerald); border-color: var(--emerald); color: var(--ink); }

.btn--secondary { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.7); }
.btn--secondary:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

.btn--dark { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn--dark:hover { background: var(--emerald); border-color: var(--emerald); color: var(--ink); }

.btn--text {
	padding: 0 0 5px;
	background: none;
	color: var(--emerald-ink);
	letter-spacing: 0.14em;
}
.btn--text:hover { color: var(--emerald-deep); transform: none; }
.btn--underline { border-bottom: 2px solid var(--emerald); }
.btn__icon { width: 16px; height: 16px; flex: none; transition: transform var(--speed) var(--ease); }
.btn:hover .btn__icon { transform: translateX(3px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--centred { justify-content: center; margin-top: 32px; }

/* Once buttons stack they read as a list, and a ragged right edge looks like
   a mistake — so give every button in a stacked row the same width. */
@media (max-width: 560px) {
	.btn-row:not(.btn-row--centred) {
		flex-direction: column;
		align-items: stretch;
	}
	.btn-row:not(.btn-row--centred) > .btn {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
	.btn-row:not(.btn-row--centred) > .btn--text { width: auto; align-self: flex-start; }
}

/* Light sections need a dark default button. */
.section .btn--primary,
.split__body .btn--primary {
	background: var(--ink); color: var(--white); border-color: var(--ink);
}
.section .btn--primary:hover,
.split__body .btn--primary:hover { background: var(--emerald); border-color: var(--emerald); color: var(--ink); }
.section .btn--secondary,
.split__body .btn--secondary { color: var(--ink); border-color: var(--ink); }
.section .btn--secondary:hover,
.split__body .btn--secondary:hover { background: var(--ink); color: var(--white); }

/* --------------------------------------------------------------- stars */
.stars { display: inline-flex; gap: 2px; line-height: 1; }
.star { width: 15px; height: 15px; flex: none; fill: var(--gold); }
.star.is-empty,
.star__track { fill: rgba(0, 0, 0, 0.16); }
/* A part-filled star is an empty one with a filled copy on top, clipped from
   the right by --star-cover (set inline by bac_stars()). */
.star.is-part { position: relative; }
.star.is-part svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.star__fill { clip-path: inset(0 var(--star-cover, 0%) 0 0); }
.stars--sm .star { width: 13px; height: 13px; }
.stars--md .star { width: 15px; height: 15px; }
.stars--lg .star { width: 20px; height: 20px; }
.hero .star.is-empty,
.hero .star__track,
.site-footer .star.is-empty,
.site-footer .star__track { fill: rgba(255, 255, 255, 0.25); }

/* ---------------------------------------------------------- utility bar */
.utility-bar {
	background: var(--ink);
	color: rgba(255, 255, 255, 0.78);
	font-size: 12px;
	letter-spacing: 0.04em;
}
.utility-bar__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	min-height: 38px;
	padding-block: 9px;
}
.utility-bar__group { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; }
.utility-bar__item { display: inline-flex; }
.utility-bar__item > a,
.utility-bar__item { align-items: center; gap: 8px; }
.utility-bar__item > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	transition: color var(--speed) var(--ease);
}
.utility-bar__item > a:hover { color: var(--white); text-decoration: none; }
.utility-bar__icon { width: 14px; height: 14px; flex: none; opacity: 0.6; }
.utility-bar__item.is-highlight { color: var(--emerald); font-weight: 600; }
.utility-bar__item.is-highlight .utility-bar__icon { opacity: 1; }

@media (max-width: 1023px) {
	.utility-bar__group--right { display: none; }
	.utility-bar__inner { justify-content: center; }
}
@media (max-width: 520px) {
	.utility-bar { font-size: 11px; }
	.utility-bar__group { gap: 8px 16px; justify-content: center; }
}

/* -------------------------------------------------------------- header */
.site-header { position: relative; z-index: 100; }
.site-header--sticky { position: sticky; top: 0; }

.site-header__main {
	background: var(--white);
	border-bottom: 1px solid var(--line);
	transition: box-shadow var(--speed) var(--ease);
}
.site-header.is-stuck .site-header__main { box-shadow: 0 8px 30px rgba(14, 17, 19, 0.08); }

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 14px;
}

/* Brand lockup — deliberately given room; the logo and strapline lead.
   The <a> carries --logo-h (Site Settings) and --logo-ratio (measured from
   the logo file), so the strapline can be held to the logo's own width. The
   media queries below cap the height through --logo-h-max. */
.brand {
	--logo-h-max: 999px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	flex: none;
	transition: opacity var(--speed) var(--ease);
}
.brand:hover { opacity: 0.85; }
.brand__mark { display: block; }
.brand__logo {
	height: min(var(--logo-h, 82px), var(--logo-h-max));
	width: auto;
	max-width: min(58vw, 340px);
	object-fit: contain;
	object-position: left center;
}
.brand__strapline {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--emerald-ink);
	line-height: 1.2;
	padding-left: 2px;
}
.brand__strapline--subtle { color: var(--grey); font-weight: 600; letter-spacing: 0.18em; }
.brand__strapline--bold {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--ink);
	font-size: 10.5px;
	letter-spacing: 0.24em;
}
.brand__strapline--bold::before {
	content: "";
	width: 22px; height: 3px;
	background: var(--emerald);
	flex: none;
}
/* "Lockup" sets the strapline the way the brand kit does: ink capitals under
   the logo's green rule, with the comma picked out in emerald. It pairs with
   the "mark" logo files (no strapline baked in), so the line is live text and
   stays legible whatever size the logo is. Held to the logo's width, it wraps
   to two balanced lines. */
.brand__strapline--lockup {
	max-width: calc(min(var(--logo-h, 82px), var(--logo-h-max)) * var(--logo-ratio, 2.275));
	padding-left: 3px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.45;
	color: var(--ink);
	text-wrap: balance;
}
.strapline__mark { color: var(--emerald); }

/* The trust bar sets the Google and Trustpilot scores as a thin band under the
   header row, centred. It sits outside the sticky header, so it scrolls away
   with the page instead of thickening the fixed band. Nothing renders when
   both platforms are switched off, so the band is never an empty stripe. */
.trust-bar {
	background: var(--mist);
	border-bottom: 1px solid var(--line);
}
.trust-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding-block: 11px;
	font-size: 12.5px;
	color: var(--slate);
}
/* .trust-chip is built for the hero, where it sits on a dark photograph, so
   the divider and the hover colour have to be restated for this light band.
   Spacing is padding rather than a flex gap, which keeps the hairline centred
   in the space between the two scores. */
.trust-bar .trust-chip { padding-inline: clamp(16px, 2.6vw, 34px); font-weight: 500; }
.trust-bar .trust-chip + .trust-chip { border-left: 1px solid var(--line); }
.trust-bar a.trust-chip:hover { color: var(--ink); }
.trust-bar .trust-chip__label { white-space: nowrap; }

/* Phones: both scores on one line run off the screen, and stacking them ate
   the top of every page, so they become one looping carousel instead. */
@media (max-width: 720px) {
	.trust-bar__inner {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.trust-bar__inner::-webkit-scrollbar { display: none; }
	.trust-bar .trust-chip {
		flex: 0 0 100%;
		width: 100%;
		justify-content: center;
		scroll-snap-align: center;
		padding-inline: 0;
	}
	/* The divider only ever made sense with the scores side by side. */
	.trust-bar .trust-chip + .trust-chip { border-left: 0; }
}

@media (max-width: 560px) {
	.trust-bar__inner { min-height: 38px; padding-block: 9px; font-size: 11.5px; }
	.trust-bar .star { width: 11px; height: 11px; }
}

/* Auto-advance is switched off in JS under reduced motion; this keeps a manual
   swipe from animating too. */
@media (prefers-reduced-motion: reduce) {
	.trust-bar__inner { scroll-behavior: auto; }
}

.site-header__actions { display: flex; align-items: center; gap: 14px; flex: none; }

/* ------------------------------------------------------------ nav */
.nav__list {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.7vw, 26px);
}
.nav__list > li { position: relative; }

.menu-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding-block: 8px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transition: color var(--speed) var(--ease);
}
.nav__list > li > .menu-link { position: relative; }
.nav__list > li > .menu-link::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: var(--emerald);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--speed) var(--ease);
}
.nav__list > li:hover > .menu-link::after,
.nav__list > li.current-menu-item > .menu-link::after,
.nav__list > li.current-menu-ancestor > .menu-link::after { transform: scaleX(1); }

.menu-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 6px;
	cursor: pointer;
}
.menu-toggle__icon { width: 14px; height: 14px; transition: transform var(--speed) var(--ease); }

.has-dropdown > .menu-link::before {
	content: "";
	position: absolute;
	right: -14px; top: 50%;
	width: 7px; height: 7px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	opacity: 0.55;
}
.nav__list > li.has-dropdown { margin-right: 10px; }

.sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: -20px;
	min-width: 250px;
	padding: 10px 0;
	background: var(--white);
	border: 1px solid var(--line);
	box-shadow: 0 24px 50px rgba(14, 17, 19, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease), visibility var(--speed);
}
.nav__list > li:hover > .sub-menu,
.nav__list > li:focus-within > .sub-menu,
.nav__list > li.is-open > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.sub-menu .menu-link {
	display: block;
	padding: 10px 24px;
	font-size: 13px;
	font-weight: 500;
	white-space: normal;
}
.sub-menu .menu-link:hover { color: var(--emerald-ink); background: var(--mist); }

.nav__mobile-extras { display: none; }

/* burger */
.nav-burger {
	display: none;
	background: none;
	border: 1px solid var(--line);
	width: var(--control-size, 46px);
	height: var(--control-size, 46px);
	flex: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color var(--speed) var(--ease);
}
.nav-burger:hover { border-color: var(--ink); }
.nav-burger__box { position: relative; width: 20px; height: 12px; display: block; }
.nav-burger__line,
.nav-burger__box::before,
.nav-burger__box::after {
	position: absolute;
	left: 0;
	width: 100%; height: 2px;
	background: var(--ink);
	transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease);
}
.nav-burger__line { top: 5px; }
.nav-burger__box::before { content: ""; top: 0; }
.nav-burger__box::after { content: ""; bottom: 0; }
[aria-expanded="true"] .nav-burger__box::before { transform: translateY(5px) rotate(45deg); }
[aria-expanded="true"] .nav-burger__box::after { transform: translateY(-5px) rotate(-45deg); }
[aria-expanded="true"] .nav-burger__line { opacity: 0; }

/* Close control inside the mobile drawer. Hidden on desktop, where the drawer
   does not exist. */
.nav-close {
	display: none;
	position: absolute;
	top: 22px;
	right: 24px;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	background: none;
	border: 1px solid var(--line);
	color: var(--ink);
	cursor: pointer;
	transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.nav-close:hover { background: var(--mist); border-color: var(--ink); }
.nav-close svg { width: 20px; height: 20px; }

.nav-scrim {
	position: fixed;
	inset: 0;
	background: rgba(14, 17, 19, 0.55);
	backdrop-filter: blur(2px);
	z-index: 98;
	opacity: 0;
	transition: opacity var(--speed) var(--ease);
}
.nav-scrim.is-visible { opacity: 1; }

@media (max-width: 1180px) {
	.menu-link { font-size: 11.5px; }
	.brand { --logo-h-max: 64px; }
}

@media (max-width: 1023px) {
	.nav-burger { display: inline-flex; }
	.site-header__actions { --control-size: 46px; align-items: center; }
	.site-header__cta {
		height: var(--control-size);
		padding: 0 16px;
		font-size: 10.5px;
		letter-spacing: 0.09em;
	}

	.nav {
		position: fixed;
		top: 0; right: 0; bottom: 0;
		width: min(400px, 88vw);
		z-index: 99;
		background: var(--white);
		padding: 96px 32px 40px;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform var(--speed) var(--ease);
		box-shadow: -20px 0 60px rgba(14, 17, 19, 0.16);
	}
	.nav.is-open { transform: translateX(0); }
	.nav-close { display: inline-flex; }

	.nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav__list > li { border-bottom: 1px solid var(--line); }
	.nav__list > li.has-dropdown { margin-right: 0; }
	.has-dropdown > .menu-link::before { display: none; }
	.nav__list > li > .menu-link::after { display: none; }

	.menu-link {
		padding: 16px 0;
		font-size: 15px;
		font-weight: 600;
	}
	.nav__list > li.has-dropdown > .menu-link { padding-right: 48px; }

	.menu-toggle {
		display: inline-flex;
		position: absolute;
		top: 8px; right: 0;
		width: 40px; height: 40px;
		align-items: center; justify-content: center;
	}
	.nav__list > li.is-open > .menu-toggle .menu-toggle__icon { transform: rotate(180deg); }

	.sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		box-shadow: none;
		min-width: 0;
		padding: 0 0 12px 16px;
		display: none;
	}
	.nav__list > li.is-open > .sub-menu { display: block; }
	.sub-menu .menu-link { padding: 9px 0; font-size: 13.5px; color: var(--slate); }

	.nav__mobile-extras { display: block; margin-top: 32px; }
	.socials--nav { margin-top: 22px; }
}

@media (max-width: 560px) {
	.site-header__inner { padding-block: 12px; gap: 10px; }
	.brand { --logo-h-max: 50px; }
	.brand__strapline { font-size: 9px; letter-spacing: 0.18em; }
	.brand__strapline--bold::before { width: 16px; }
	/* Narrower than the logo would need four lines; two lines that overhang a
	   little read better on a phone. */
	.brand__strapline--lockup { max-width: 150px; font-size: 8.5px; letter-spacing: 0.16em; }
	.site-header__actions { --control-size: 42px; gap: 8px; }
	.site-header__cta { padding: 0 12px; font-size: 9.5px; letter-spacing: 0.06em; white-space: nowrap; }
}

/* Narrowest phones: the logo gives way before the quote button does, and
   the strapline goes altogether. */
@media (max-width: 400px) {
	.brand { --logo-h-max: 42px; }
	.brand__strapline { display: none; }
	.site-header__cta { padding: 0 10px; font-size: 9px; }
}

/* ------------------------------------------------- drawer contact list */
.contact-list {
	display: grid;
	gap: 12px;
	font-size: 13px;
	color: var(--slate);
}
.contact-list li,
.contact-list li > a {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	transition: color var(--speed) var(--ease);
}
.contact-list li > a:hover { color: var(--emerald-ink); text-decoration: none; }
.contact-list .icon {
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--emerald-ink);
}
.contact-list span { min-width: 0; word-break: break-word; }

/* ---------------------------------------------------------------- hero */
.hero {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--ink);
	color: var(--white);
	overflow: hidden;
}
.hero--short { min-height: clamp(400px, 52vw, 520px); }
.hero--standard { min-height: clamp(480px, 62vw, 680px); }
.hero--tall { min-height: clamp(560px, 74vw, 820px); }
.hero--full { min-height: calc(100svh - 120px); }

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__picture, .hero__img, .hero__video {
	width: 100%; height: 100%;
	object-fit: cover;
}
.hero__video { position: absolute; inset: 0; }
.hero__scrim {
	position: absolute;
	inset: 0;
	/* A light base pass stops a bright photograph blowing out on the open side,
	   then the directional pass carries the text column. */
	background:
		linear-gradient(90deg,
			rgba(8, 11, 10, var(--overlay, 0.82)) 0%,
			rgba(8, 11, 10, calc(var(--overlay, 0.82) * 0.94)) 34%,
			rgba(8, 11, 10, calc(var(--overlay, 0.82) * 0.6)) 54%,
			rgba(8, 11, 10, 0.1) 78%,
			transparent 92%),
		linear-gradient(rgba(8, 11, 10, 0.22), rgba(8, 11, 10, 0.22));
}
.hero--centre .hero__scrim { background: rgba(8, 11, 10, var(--overlay, 0.82)); }
.hero--right .hero__scrim {
	background:
		linear-gradient(270deg,
			rgba(8, 11, 10, var(--overlay, 0.82)) 0%,
			rgba(8, 11, 10, calc(var(--overlay, 0.82) * 0.94)) 34%,
			rgba(8, 11, 10, calc(var(--overlay, 0.82) * 0.6)) 54%,
			rgba(8, 11, 10, 0.1) 78%,
			transparent 92%),
		linear-gradient(rgba(8, 11, 10, 0.22), rgba(8, 11, 10, 0.22));
}

.hero__inner { position: relative; z-index: 1; padding-block: clamp(56px, 8vw, 96px); width: 100%; }
.hero__content { max-width: 720px; }
.hero--centre .hero__content { max-width: 780px; margin-inline: auto; text-align: center; }
.hero--right .hero__content { margin-left: auto; }

.hero__strapline {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 22px;
	font-size: clamp(11px, 1.1vw, 12.5px);
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--emerald);
}
.hero__strapline::before {
	content: "";
	width: 34px; height: 3px;
	background: var(--emerald);
	flex: none;
}
.hero--centre .hero__strapline::before { display: none; }

.hero__title {
	margin-bottom: 24px;
	font-size: clamp(31px, 4.2vw, 50px);
	line-height: 1.14;
	color: var(--white);
}
.hero__intro {
	max-width: 52ch;
	margin-bottom: 32px;
	font-size: clamp(15px, 1.25vw, 16px);
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.88);
}
.hero--centre .hero__intro { margin-inline: auto; }
.hero__intro a { color: var(--emerald); }

.hero__buttons { margin-bottom: 38px; }
.hero--centre .hero__buttons { justify-content: center; }

.hero__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.85);
}
.hero--centre .hero__trust { justify-content: center; }

.trust-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	transition: color var(--speed) var(--ease);
}
a.trust-chip:hover { color: var(--white); }
a.trust-chip:hover .trust-chip__label { text-decoration: underline; text-underline-offset: 0.2em; }
.trust-chip + .trust-chip {
	padding-left: 20px;
	border-left: 1px solid rgba(255, 255, 255, 0.28);
}
.trust-chip--trustpilot .star:not(.is-empty) { fill: var(--trustpilot); }

.hero__badge {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--emerald);
	border: 1px solid rgba(0, 200, 107, 0.45);
	background: rgba(0, 200, 107, 0.08);
}

@media (max-width: 900px) {
	.hero__scrim { background: linear-gradient(180deg, rgba(8, 11, 10, 0.55) 0%, rgba(8, 11, 10, var(--overlay, 0.82)) 62%); }
	.hero__content { max-width: none; }
	.hero__intro { max-width: 46ch; }
}
@media (max-width: 560px) {
	.hero__buttons { flex-direction: column; align-items: stretch; }
	.hero__buttons .btn { justify-content: center; }
	.trust-chip + .trust-chip { padding-left: 0; border-left: 0; }
	.hero__trust { flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; }
	.hero--centre .hero__trust { align-items: center; }
	/* The badge is a pill, so it must wrap its own text rather than run off
	   the side of the screen. */
	.hero__badge {
		max-width: 100%;
		white-space: normal;
		text-align: center;
		justify-content: center;
	}
}

/* ---------------------------------------------------------- usp strip */
.usp-strip { background: var(--mist); border-bottom: 1px solid var(--line); }
.usp-strip__viewport { padding-inline: 0; }
.usp-strip__inner {
	display: grid;
	grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
}
.usp {
	padding: 24px 20px;
	text-align: center;
	border-right: 1px solid var(--line);
	transition: background var(--speed) var(--ease);
}
.usp:last-child { border-right: 0; }
a.usp:hover { background: var(--mist); }
.usp__rule { display: block; width: 22px; height: 3px; background: var(--emerald); margin: 0 auto 12px; }
/* An icon replaces the dash when one is chosen. Set in the darker green so it
   clears 3:1 against the strip's grey, which the brand green does not. */
.usp__icon {
	display: block;
	width: 28px;
	height: 28px;
	margin: 0 auto 10px;
	color: var(--emerald-ink);
}
a.usp:hover .usp__icon { color: var(--emerald-deep); }
.usp__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.4;
}
.usp__detail { display: block; margin-top: 6px; font-size: 12px; color: var(--grey); }
.usp-strip__dots { display: none; }

@media (max-width: 900px) and (min-width: 721px) {
	.usp-strip__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.usp:nth-child(2n) { border-right: 0; }
	.usp:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* Phones: one promise at a time, advancing on a loop. Snap points mean a
   finger-swipe lands cleanly on the next promise, and the JS simply nudges
   the same scroll position along. */
@media (max-width: 720px) {
	.usp-strip__viewport { position: relative; overflow: hidden; }
	.usp-strip__inner {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
		scroll-behavior: smooth;
	}
	.usp-strip__inner::-webkit-scrollbar { display: none; }
	.usp {
		flex: 0 0 100%;
		width: 100%;
		scroll-snap-align: center;
		border-right: 0;
		padding: 26px 20px 22px;
	}
	.usp-strip__dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		padding-bottom: 18px;
	}
	.usp-dot {
		width: 7px;
		height: 7px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--line);
		cursor: pointer;
		transition: background var(--speed) var(--ease), width var(--speed) var(--ease);
	}
	.usp-dot.is-active { background: var(--emerald); width: 20px; border-radius: 4px; }
}

@media (prefers-reduced-motion: reduce) {
	.usp-strip__inner { scroll-behavior: auto; }
}

/* -------------------------------------------------------- category cards */
.card-grid {
	display: grid;
	grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
	gap: clamp(18px, 2.2vw, 28px);
}
.card__link { display: block; }
.card__media {
	display: block;
	position: relative;
	aspect-ratio: 6 / 5;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--mist);
	margin-bottom: 16px;
}
.card__img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}
.card__link:hover .card__img { transform: scale(1.04); }
.card__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}
.card__title { font-size: 17px; font-weight: 600; }
.card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--emerald-ink);
}
.card__arrow { width: 14px; height: 14px; transition: transform var(--speed) var(--ease); }
.card__link:hover .card__arrow { transform: translateX(3px); }
.card__text { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--grey); }

@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .card-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------- price band */
.promo-band { color: var(--ink); }
.promo-band--emerald { background: var(--emerald); }
.promo-band--ink { background: var(--ink); color: var(--white); }
.promo-band--mist { background: var(--mist); border-block: 1px solid var(--line); }
.promo-band__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	padding-block: clamp(32px, 4vw, 44px);
}
.promo-band__title { font-size: clamp(21px, 2.3vw, 26px); font-weight: 600; line-height: 1.25; }
.promo-band__title strong { font-weight: 700; }
.promo-band__body {
	margin-top: 8px;
	max-width: 70ch;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(14, 17, 19, 0.75);
}
.promo-band--ink .promo-band__body { color: rgba(255, 255, 255, 0.75); }
.promo-band--emerald a:not(.btn) { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; }
.promo-band__cta { flex: none; }
.promo-band--ink .promo-band__cta { background: var(--emerald); color: var(--ink); border-color: var(--emerald); }
.promo-band--ink .promo-band__cta:hover { background: var(--white); border-color: var(--white); }

/* ------------------------------------------------------------- brands */
.brand-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 28px;
}
.brand-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 86px;
	padding: 16px 24px;
	background: var(--white);
	border: 1px solid var(--line);
	transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
a.brand-tile:hover {
	border-color: var(--emerald);
	box-shadow: 0 10px 26px rgba(14, 17, 19, 0.07);
	transform: translateY(-2px);
}
.brand-tile__img {
	max-width: 100%;
	max-height: 50px;
	width: auto;
	object-fit: contain;
}

/* Brands whose artwork has not been supplied yet are set as a wordmark so the
   grid still reads as a deliberate row rather than a gap. */
.brand-tile__name {
	font-size: clamp(12px, 1.2vw, 15px);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.25;
	color: var(--ink);
}
.brand-tile--wordmark { color: var(--slate); }
a.brand-tile--wordmark:hover .brand-tile__name { color: var(--emerald-ink); }

@media (max-width: 1023px) { .brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .brand-tile { height: 70px; padding: 12px 14px; } .brand-tile__img { max-height: 38px; } }

.brand-marquee {
	overflow: hidden;
	margin-bottom: 28px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.brand-marquee__track {
	display: flex;
	gap: 14px;
	width: max-content;
	animation: bac-marquee 46s linear infinite;
}
.brand-marquee:hover .brand-marquee__track { animation-play-state: paused; }
.brand-marquee .brand-tile { width: 190px; flex: none; }
@keyframes bac-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.brand-list {
	text-align: center;
	font-size: 12.5px;
	letter-spacing: 0.06em;
	line-height: 2.1;
	color: var(--grey);
}

/* ------------------------------------------------------ split sections */
.split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	background: var(--white);
	border-top: 1px solid var(--line);
}
.split--media-right .split__media { order: 2; }
.split__media { position: relative; min-height: clamp(340px, 42vw, 560px); background: var(--mist); }
.split__img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.split__body { display: flex; align-items: center; }
.split__inner { padding: clamp(40px, 5.2vw, 72px); width: 100%; max-width: 720px; }
/* Centre the text within its column so a wide screen does not leave a gap. */
.split--map .split__body { justify-content: center; }
.split--map .split__inner { margin-inline: auto; }
.split__text { margin-top: 18px; font-size: 15px; line-height: 1.7; color: var(--slate); }
.split__details {
	margin-top: 26px;
	font-size: 14px;
	line-height: 2;
	color: var(--slate);
}
.split__details strong { color: var(--ink); font-weight: 600; }

/* Address, phone and email are all tappable, but styling them as ordinary
   links turns a contact block into a wall of green underlines. Keep them
   reading as text and show the affordance on hover instead. */
.split__details a,
.site-footer__text a,
.promo-band__body a {
	color: inherit;
	text-decoration: none;
	transition: color var(--speed) var(--ease);
}
.split__details a:hover,
.split__details a:focus-visible,
.site-footer__text a:hover,
.site-footer__text a:focus-visible,
.promo-band__body a:hover,
.promo-band__body a:focus-visible {
	color: var(--emerald-ink);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
.site-footer__text a:hover,
.site-footer__text a:focus-visible { color: var(--emerald); }
.split__inner .btn-row { margin-top: 30px; }

/* The map takes the larger share whichever side it sits on — the track order
   is fixed, but `order` moves the media, so the columns must be stated per
   direction or the text column ends up the wide one. */
.split--map { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.split--map.split--media-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.split--map .split__body { background: var(--mist); }
.split--map.has-bg-white .split__body { background: var(--white); }
.split--map .split__body { border-left: 1px solid var(--line); }
.split--map.split--media-right .split__body { border-left: 0; border-right: 1px solid var(--line); }
.split__media--map { min-height: clamp(320px, 34vw, 460px); }
.map-embed { position: absolute; inset: 0; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.25); }
.map-embed--placeholder {
	display: flex; align-items: center; justify-content: center;
	background: var(--mist); color: var(--grey); font-size: 13px; text-align: center; padding: 24px;
}
.map__cta { position: absolute; right: 20px; bottom: 20px; z-index: 2; }

@media (max-width: 900px) {
	.split, .split--map { grid-template-columns: 1fr; }
	.split--media-right .split__media { order: 0; }
	.split__media { min-height: clamp(240px, 56vw, 380px); }
	.split--map .split__body,
	.split--map.split--media-right .split__body { border: 0; border-top: 1px solid var(--line); }
	.split__inner { max-width: none; }
}

/* ---------------------------------------------------------- feature tiles */
.tile-grid {
	display: grid;
	grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
	gap: clamp(18px, 2.2vw, 28px);
}
.tile { position: relative; }
.tile__link, .tile { display: block; }
.tile__media {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--ink);
}
.tile__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.tile__link:hover .tile__img { transform: scale(1.04); }
.tile__overlay {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 64px 32px 26px;
	background: linear-gradient(transparent, rgba(10, 13, 12, 0.45) 38%, rgba(10, 13, 12, 0.92));
	border-radius: 0 0 var(--radius) var(--radius);
	color: var(--white);
	pointer-events: none;
}
.tile__title { display: block; font-size: clamp(19px, 2vw, 22px); font-weight: 600; margin-bottom: 5px; }
.tile__text { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); max-width: 46ch; }
.tile__cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--emerald);
}
.tile__arrow { width: 14px; height: 14px; transition: transform var(--speed) var(--ease); }
.tile__link:hover .tile__arrow { transform: translateX(3px); }

@media (max-width: 720px) {
	.tile-grid { grid-template-columns: 1fr; }
	.tile__overlay { padding: 52px 22px 22px; }
}

/* -------------------------------------------------------------- reviews */
.rating-summary {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 36px;
	margin-bottom: 26px;
}
.rating-summary__item {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 12px 22px;
	background: var(--white);
	border: 1px solid var(--line);
	transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
a.rating-summary__item:hover { border-color: var(--emerald); box-shadow: 0 10px 26px rgba(14, 17, 19, 0.07); }
.rating-summary__score { font-size: 30px; font-weight: 300; line-height: 1; }
.rating-summary__meta { display: grid; gap: 5px; text-align: left; }
.rating-summary__label { font-size: 12.5px; color: var(--grey); }
.rating-summary__item--trustpilot .star:not(.is-empty) { fill: var(--trustpilot); }

.review-grid {
	display: grid;
	grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
	gap: clamp(16px, 2vw, 24px);
	align-items: stretch;
	grid-auto-rows: 1fr;
}
.review { display: flex; }
.review__inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 30px;
	background: var(--white);
	border: 1px solid var(--line);
	transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.review__inner:hover {
	border-color: rgba(0, 200, 107, 0.5);
	box-shadow: 0 14px 34px rgba(14, 17, 19, 0.07);
	transform: translateY(-2px);
}
.review__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review__date { font-size: 11.5px; color: var(--grey-light); }
.review__title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ink);
	margin-bottom: -4px;
}

.review__quote { margin: 0; font-size: 14px; line-height: 1.7; color: #3a423f; }
.review__quote .rich p::before { content: "\201C"; }
.review__quote .rich p::after { content: "\201D"; }

/* Long reviews are clamped to a few lines so a row of cards stays even; the
   button only appears when there is genuinely more to read (see main.js). */
.review__quote[data-review-body] {
	display: -webkit-box;
	flex: 1 1 auto;
	-webkit-line-clamp: var(--review-lines, 5);
	line-clamp: var(--review-lines, 5);
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.review__quote[data-review-body].is-expanded {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	overflow: visible;
}
.review__more {
	align-self: flex-start;
	margin-top: -4px;
	padding: 0;
	background: none;
	border: 0;
	border-bottom: 1px solid currentColor;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--emerald-ink);
	cursor: pointer;
	transition: color var(--speed) var(--ease);
}
.review__more:hover { color: var(--emerald-deep); }
.review__more[hidden] { display: none; }
.review__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--line);
}
.review__author { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
.review__source {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--grey);
}
.review__source--trustpilot { color: var(--trustpilot); }
.review__source-mark { width: 12px; height: 12px; fill: currentColor; }

/* Grouped layout — one panel per review platform, clearly separated. */
.review-groups {
	display: grid;
	grid-template-columns: repeat(var(--panels, 2), minmax(0, 1fr));
	gap: clamp(20px, 2.6vw, 32px);
	align-items: stretch;
}
.review-group {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: clamp(22px, 2.4vw, 30px);
	background: var(--white);
	border: 1px solid var(--line);
	border-top: 3px solid var(--line);
	height: 100%;
}
.review-group--google { border-top-color: #4285f4; }
.review-group--trustpilot { border-top-color: var(--trustpilot); }
/* Trustpilot's stars are green, not gold — match them so the panel reads as
   genuinely theirs. */
.review-group--trustpilot .star { fill: var(--trustpilot); }
.review-group--trustpilot .star.is-empty,
.review-group--trustpilot .star__track { fill: rgba(0, 182, 122, 0.22); }
.review-group--houzz { border-top-color: #4dbc15; }

.review-group__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
}
.review-group__brand { display: inline-flex; align-items: center; gap: 7px; }
.review-group__wordmark {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ink);
}
.review-group--trustpilot .review-group__wordmark { color: var(--ink); }
.tpmark { width: 19px; height: 19px; fill: var(--trustpilot); }

/* Google set in its own colours, letter by letter. */
.gmark { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.gmark span:nth-child(1) { color: #4285f4; }
.gmark span:nth-child(2) { color: #ea4335; }
.gmark span:nth-child(3) { color: #fbbc05; }
.gmark span:nth-child(4) { color: #4285f4; }
.gmark span:nth-child(5) { color: #34a853; }
.gmark span:nth-child(6) { color: #ea4335; }

.review-group__score { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.review-group__number { font-size: 21px; font-weight: 300; line-height: 1; }
.review-group__count { font-size: 12px; color: var(--grey); width: 100%; }

.review-group__list { display: grid; gap: 14px; grid-auto-rows: 1fr; }
.review--spacer { display: none; }

/* Line every card up with its opposite number in the other panel. Subgrid lets
   the panels share one set of row tracks, so a Trustpilot card with a headline
   and a Google card without one still end at exactly the same height. */
@supports (grid-template-rows: subgrid) {
	@media (min-width: 861px) {
		.review-groups {
			grid-template-rows: auto repeat(var(--rows, 3), 1fr) auto;
		}
		.review-group {
			grid-row: span calc(var(--rows, 3) + 2);
			display: grid;
			grid-template-rows: subgrid;
			gap: 18px;
		}
		.review-group__list {
			grid-row: span var(--rows, 3);
			grid-template-rows: subgrid;
			grid-auto-rows: auto;
			gap: 14px;
		}
		.review--spacer { display: block; }
	}
}
.review-group .review__inner { padding: 20px 22px; background: var(--mist); border-color: transparent; }
.review-group { background: var(--white); }
.review-group .review__inner:hover { transform: none; box-shadow: none; border-color: rgba(0, 200, 107, 0.4); }
.review-group .review__quote { font-size: 13.5px; }
.review-group .review__meta { border-top-color: rgba(14, 17, 19, 0.08); }
.review-group__empty {
	padding: 22px;
	background: var(--mist);
	font-size: 13px;
	color: var(--grey);
	text-align: center;
}
.review-group__cta { margin-top: auto; align-self: flex-start; }

@media (max-width: 860px) {
	.review-groups { grid-template-columns: 1fr; }
	.review-group__score { margin-left: 0; }
}

@media (max-width: 900px) { .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
	.review-grid { grid-template-columns: 1fr; }
	.rating-summary { gap: 12px; }
	.rating-summary__item { width: 100%; justify-content: center; }
}

/* -------------------------------------------------------------- socials */
.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.socials__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	border: 1px solid var(--line);
	color: var(--ink);
	transition: background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.socials__link:hover {
	background: var(--emerald);
	border-color: var(--emerald);
	color: var(--ink);
	transform: translateY(-2px);
}
.social__icon { width: 18px; height: 18px; }
.social__icon--custom { width: 18px; height: 18px; object-fit: contain; }

.socials--footer .socials__link {
	border-color: rgba(255, 255, 255, 0.22);
	color: rgba(255, 255, 255, 0.86);
}
.socials--footer .socials__link:hover { background: var(--emerald); border-color: var(--emerald); color: var(--ink); }
.socials--text { gap: 18px; }
.socials--text .socials__link {
	width: auto; height: auto; border: 0;
	font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--emerald-ink);
}

/* --------------------------------------------------------------- footer */
.site-footer {
	background: var(--ink);
	color: rgba(255, 255, 255, 0.72);
	padding-block: clamp(48px, 6vw, 64px) 36px;
	font-size: 13px;
}
.site-footer__top {
	display: grid;
	grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
	gap: clamp(28px, 3.6vw, 48px);
	padding-bottom: clamp(36px, 4vw, 48px);
}
.site-footer__mark { display: block; margin-bottom: 14px; }
.site-footer__logo {
	height: var(--logo-h, 112px);
	width: auto;
	max-width: 300px;
	object-fit: contain;
	object-position: left center;
	margin-left: -4px;
}
/* Set like the header lockup: live text under the mark's green rule, held
   to the logo's width, comma in emerald. */
.site-footer__strapline {
	max-width: calc(var(--logo-h, 112px) * var(--logo-ratio, 2.275));
	margin-bottom: 16px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.5;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
	text-wrap: balance;
}
.site-footer__strapline .strapline__mark { color: var(--emerald); }
.site-footer__about { max-width: 36ch; font-size: 12.5px; line-height: 1.7; }
.site-footer__about + .socials { margin-top: 22px; }

.site-footer__col-title {
	margin-bottom: 12px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--emerald);
}
.site-footer__links { display: grid; gap: 9px; }
.site-footer__link { transition: color var(--speed) var(--ease); }
.site-footer__link:hover { color: var(--white); }
.site-footer__text { font-size: 13px; line-height: 1.9; }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 24px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.45);
}
.site-footer__end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 18px; }
/* A hairline keeps the agency credit from reading as one more legal link. */
.site-footer__legal + .site-footer__credit {
	padding-left: 18px;
	border-left: 1px solid rgba(255, 255, 255, 0.14);
}

@media (max-width: 1023px) {
	.site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.site-footer__top { grid-template-columns: 1fr; }
	.site-footer__bottom,
	.site-footer__end { flex-direction: column; align-items: flex-start; }
	.site-footer__legal + .site-footer__credit { padding-left: 0; border-left: 0; }
}

/* ------------------------------------------------------------ multi-buy */
/* A centred head over a numbered row of steps. A hairline runs between the
   icons so the three read as one process rather than three unrelated cards;
   below 720px the row stacks, icon on the left, and the line turns vertical. */
.multibuy__steps {
	--gap: clamp(28px, 4vw, 64px);
	--icon: 64px;
	display: grid;
	grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr));
	gap: var(--gap);
	max-width: 1080px;
	margin-inline: auto;
	text-align: center;
}
.multibuy-step { position: relative; }
.multibuy-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc(var(--icon) / 2);
	left: calc(50% + var(--icon) / 2 + 14px);
	width: calc(100% + var(--gap) - var(--icon) - 28px);
	height: 1px;
	background: var(--line);
}
.multibuy-step__icon {
	display: grid;
	place-items: center;
	width: var(--icon);
	height: var(--icon);
	margin: 0 auto 22px;
	border-radius: 50%;
	background: var(--mist);
	color: var(--emerald-ink);
}
.multibuy-step__svg { width: 28px; height: 28px; }
/* The tag is drawn on the diagonal, so at the same box size it reads smaller
   than the upright icons beside it. */
.multibuy-step__svg.feature-icon--tag { transform: scale(1.2); }
.multibuy-step__title { font-size: 17px; font-weight: 600; line-height: 1.3; margin-bottom: 8px; }
.multibuy-step__number { color: var(--emerald-ink); }
.multibuy-step__text { max-width: 34ch; margin-inline: auto; font-size: 14px; line-height: 1.65; color: var(--grey); }
.multibuy__buttons { margin-top: clamp(32px, 4vw, 44px); }
.multibuy__note { margin-top: 20px; text-align: center; font-size: 12px; line-height: 1.5; color: var(--grey-light); }

.has-bg-mist .multibuy-step__icon { background: var(--white); }
.has-bg-ink .multibuy-step:not(:last-child)::after { background: rgba(255, 255, 255, 0.16); }
.has-bg-ink .multibuy-step__icon { background: rgba(255, 255, 255, 0.06); color: var(--emerald); }
.has-bg-ink .multibuy-step__title { color: var(--white); }
.has-bg-ink .multibuy-step__number { color: var(--emerald); }
.has-bg-ink .multibuy-step__text { color: rgba(255, 255, 255, 0.72); }

@media (max-width: 720px) {
	.multibuy__steps { --icon: 52px; grid-template-columns: 1fr; gap: 28px; text-align: left; }
	.multibuy-step { display: grid; grid-template-columns: var(--icon) minmax(0, 1fr); column-gap: 18px; }
	.multibuy-step__icon { grid-row: span 2; margin: 0; }
	.multibuy-step__svg { width: 24px; height: 24px; }
	.multibuy-step__title { align-self: end; margin-top: 4px; }
	.multibuy-step__text { max-width: none; margin-inline: 0; }
	.multibuy-step:not(:last-child)::after {
		top: calc(var(--icon) + 8px);
		left: calc(var(--icon) / 2);
		width: 1px;
		height: calc(100% - var(--icon) + 28px - 16px);
	}
}

/* ----------------------------------------------------------- what3words */
/* A ///word.word.word link under the postal address. The slashes are set in
   what3words' own red, which is how the addresses are recognised. */
.w3w {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin-top: 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	transition: color var(--speed) var(--ease);
}
.w3w:hover,
.w3w:focus-visible { color: var(--emerald-ink); text-decoration: underline; text-underline-offset: 0.18em; }
.w3w__label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--grey);
}
.w3w__slashes { margin-right: 1px; color: #e11f26; font-weight: 700; letter-spacing: -0.06em; }
.has-bg-ink .w3w { color: var(--white); }
.has-bg-ink .w3w:hover { color: var(--emerald); }

/* ------------------------------------------------------- inner pages */
.page-hero {
	position: relative;
	background: var(--ink);
	color: var(--white);
	padding-block: clamp(56px, 7vw, 96px);
	overflow: hidden;
}
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero > .container { position: relative; z-index: 1; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.42; }
.page-hero__title { font-size: clamp(30px, 4vw, 46px); font-weight: 300; line-height: 1.15; }

.post-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.post-card__media { display: block; margin-bottom: 14px; border-radius: var(--radius); overflow: hidden; }
.post-card__title { font-size: 19px; font-weight: 600; line-height: 1.3; }
.post-card__excerpt { margin-top: 8px; font-size: 14px; color: var(--grey); }
@media (max-width: 900px) { .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .post-list { grid-template-columns: 1fr; } }

.search-form { display: flex; gap: 8px; }
.search-form input {
	flex: 1; padding: 13px 16px; border: 1px solid var(--line); font: inherit; font-size: 14px;
}
.search-form__submit {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; background: var(--ink); color: var(--white); border: 0; cursor: pointer;
}

.pagination { margin-top: 40px; display: flex; justify-content: center; gap: 8px; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 10px;
	border: 1px solid var(--line); font-size: 13px; font-weight: 600;
}
.pagination .page-numbers.current { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* Nudge sticky anchors clear of the sticky header. */
[id] { scroll-margin-top: 120px; }

/* Logged-in admin bar. */
.admin-bar .site-header--sticky { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header--sticky { top: 46px; } }

/* ==========================================================================
   Page sections — the builder blocks used by every page beyond the homepage.
   They reuse the homepage components, with these additions.
   ========================================================================== */

/* ------------------------------------------------ backgrounds & spacing */
.has-bg-white   { background: var(--white); }
.has-bg-mist    { background: var(--mist); }
.has-bg-ink     { background: var(--ink); color: rgba(255, 255, 255, 0.82); }
.has-bg-emerald { background: var(--emerald); color: var(--ink); }

.has-bg-ink .h-rich,
.has-bg-ink .section__title,
.has-bg-ink .stat__value { color: var(--white); }
.has-bg-ink .eyebrow { color: var(--emerald); }
.has-bg-ink .section__lede,
.has-bg-ink .section__head-aside { color: rgba(255, 255, 255, 0.7); }
.has-bg-ink .rich a { color: var(--emerald); }
.has-bg-emerald .eyebrow { color: rgba(14, 17, 19, 0.6); }
.has-bg-emerald .rich a { color: var(--ink); }

.section.is-tight { padding-block: clamp(32px, 4vw, 48px); }
.section.is-loose { padding-block: clamp(72px, 9vw, 120px); }
.section.is-flush { padding-block: 0; }

.section__body { font-size: 15.5px; line-height: 1.75; color: var(--slate); }
.section__buttons { margin-top: 28px; }
@media (max-width: 720px) { .section__body--columns { columns: 1; } }

/* ------------------------------------------------------------ page hero */
.hero--page .hero__title--page { font-size: clamp(28px, 3.6vw, 44px); }
.hero--page .hero__eyebrow { color: var(--emerald); }

/* --------------------------------------------------------- breadcrumbs */
.breadcrumbs { margin-bottom: 18px; }
.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	font-size: 12px;
	letter-spacing: 0.03em;
	color: var(--slate);
}
.breadcrumbs__item + .breadcrumbs__item::before {
	content: "";
	display: inline-block;
	width: 5px; height: 5px;
	margin-right: 10px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(-45deg);
	opacity: 0.5;
}
.breadcrumbs a { text-decoration: none; transition: color var(--speed) var(--ease); }
.breadcrumbs a:hover { color: var(--emerald-ink); text-decoration: underline; text-underline-offset: 0.18em; }
.breadcrumbs__item [aria-current] { color: var(--ink); font-weight: 600; }
/* On a photographic hero the trail has to be set on .breadcrumbs__list, not on
   .breadcrumbs - the list carries its own colour and out-specifies anything
   inherited from the wrapper, which left the links dark slate on a dark hero. */
.hero .breadcrumbs__list,
.brand-hero--media .breadcrumbs__list,
.page-hero .breadcrumbs__list { color: rgba(255, 255, 255, 0.88); }
.hero .breadcrumbs a,
.brand-hero--media .breadcrumbs a,
.page-hero .breadcrumbs a { color: rgba(255, 255, 255, 0.88); }
.hero .breadcrumbs__item [aria-current],
.brand-hero--media .breadcrumbs__item [aria-current],
.page-hero .breadcrumbs__item [aria-current] { color: var(--white); }
.hero .breadcrumbs a:hover,
.brand-hero--media .breadcrumbs a:hover,
.page-hero .breadcrumbs a:hover { color: var(--emerald); }
/* The separators sit between the two, so they read as dividers not as text. */
.hero .breadcrumbs__item + .breadcrumbs__item::before,
.brand-hero--media .breadcrumbs__item + .breadcrumbs__item::before,
.page-hero .breadcrumbs__item + .breadcrumbs__item::before { opacity: 0.7; }

/* ----------------------------------------------------------- tick list */
.tick-list { display: grid; gap: 10px; margin-top: 22px; }
.tick-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.6; }
.tick-list__icon { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--emerald-ink); }
.has-bg-ink .tick-list__icon { color: var(--emerald); }

/* --------------------------------------------------------------- steps */
.steps {
	display: grid;
	grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
	gap: clamp(20px, 2.6vw, 32px);
	counter-reset: step;
}
.step { padding-top: 22px; border-top: 2px solid var(--emerald); }
.step__number {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--emerald-ink);
	margin-bottom: 10px;
}
.step__title { font-size: 17px; font-weight: 600; line-height: 1.3; margin-bottom: 8px; }
.step__text { font-size: 14px; line-height: 1.65; color: var(--grey); }
.has-bg-ink .step__title { color: var(--white); }
.has-bg-ink .step__text { color: rgba(255, 255, 255, 0.7); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- stats */
.stats {
	display: grid;
	grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
	gap: clamp(20px, 3vw, 40px);
	text-align: center;
}
.stat__value {
	display: block;
	font-size: clamp(34px, 4.4vw, 52px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.02em;
	margin-bottom: 10px;
}
.stat__label { font-size: 13px; letter-spacing: 0.04em; line-height: 1.5; }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ----------------------------------------------------------------- FAQ */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--emerald-ink); }
.faq__icon { width: 18px; height: 18px; flex: none; transition: transform var(--speed) var(--ease); }
.faq__item[open] .faq__icon { transform: rotate(180deg); }
.faq__a { padding-bottom: 22px; font-size: 14.5px; line-height: 1.75; color: var(--slate); max-width: 68ch; }

/* ------------------------------------------------------------- gallery */
.gallery { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); }
.gallery__item { overflow: hidden; border-radius: var(--radius); background: var(--mist); aspect-ratio: 4 / 3; }
.gallery__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.gallery__item:hover .gallery__img { transform: scale(1.04); }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .gallery { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ quote CTA */
.quote-cta {
	position: relative;
	overflow: hidden;
	padding-block: clamp(56px, 7vw, 88px);
	text-align: center;
}
.quote-cta--ink { background: var(--ink); color: rgba(255, 255, 255, 0.82); }
.quote-cta--emerald { background: var(--emerald); color: var(--ink); }
.quote-cta--image { background: var(--ink); color: rgba(255, 255, 255, 0.86); }
.quote-cta__media { position: absolute; inset: 0; z-index: 0; }
.quote-cta__img { width: 100%; height: 100%; object-fit: cover; }
.quote-cta__scrim { position: absolute; inset: 0; background: rgba(8, 11, 10, 0.74); }
.quote-cta__inner { position: relative; z-index: 1; }
.quote-cta__eyebrow { color: var(--emerald); }
.quote-cta--emerald .quote-cta__eyebrow { color: rgba(14, 17, 19, 0.6); }
.quote-cta__title { font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 16px; }
.quote-cta--ink .quote-cta__title,
.quote-cta--image .quote-cta__title { color: var(--white); }
.quote-cta__copy { max-width: 60ch; margin-inline: auto; font-size: 15.5px; line-height: 1.7; }
.quote-cta__buttons { margin-top: 30px; }
.quote-cta--ink .btn--primary,
.quote-cta--image .btn--primary { background: var(--emerald); border-color: var(--emerald); color: var(--ink); }
.quote-cta--ink .btn--primary:hover,
.quote-cta--image .btn--primary:hover { background: var(--white); border-color: var(--white); }
.quote-cta--ink .btn--secondary,
.quote-cta--image .btn--secondary { color: var(--white); border-color: rgba(255, 255, 255, 0.6); }
.quote-cta--ink .btn--secondary:hover,
.quote-cta--image .btn--secondary:hover { background: var(--white); color: var(--ink); }

/* Emerald had no button rules of its own, so the buttons fell through to a
   white-on-white default and disappeared. Solid ink reads clearly on green. */
.quote-cta--emerald .quote-cta__copy { color: rgba(14, 17, 19, 0.82); }
.quote-cta--emerald .quote-cta__eyebrow { color: rgba(14, 17, 19, 0.66); }
.quote-cta--emerald .btn--primary { background: var(--ink); border-color: var(--ink); color: var(--white); }
.quote-cta--emerald .btn--primary:hover { background: var(--white); border-color: var(--white); color: var(--ink); }
.quote-cta--emerald .btn--secondary { color: var(--ink); border-color: rgba(14, 17, 19, 0.55); }
.quote-cta--emerald .btn--secondary:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
/* A green link on green is invisible — underline it and keep it ink. */
.quote-cta--emerald a:not(.btn),
.has-bg-emerald .rich a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}
.quote-cta--emerald a:not(.btn):hover,
.has-bg-emerald .rich a:hover { color: var(--white); }

/* Light closing panels — high contrast, and clearly not the footer. */
.quote-cta--white { background: var(--white); color: var(--slate); border-top: 1px solid var(--line); }
.quote-cta--white .quote-cta__title { color: var(--ink); }
.quote-cta--white .quote-cta__eyebrow { color: var(--emerald-ink); }
.quote-cta--white .quote-cta__copy { color: var(--slate); }
.quote-cta--white .btn--primary { background: var(--ink); border-color: var(--ink); color: var(--white); }
.quote-cta--white .btn--primary:hover { background: var(--emerald); border-color: var(--emerald); color: var(--ink); }
.quote-cta--white .btn--secondary { color: var(--ink); border-color: var(--ink); }
.quote-cta--white .btn--secondary:hover { background: var(--ink); color: var(--white); }

.quote-cta--mist { background: var(--mist); color: var(--slate); border-top: 1px solid var(--line); }
.quote-cta--mist .quote-cta__title { color: var(--ink); }
.quote-cta--mist .quote-cta__eyebrow { color: var(--emerald-ink); }
.quote-cta--mist .quote-cta__copy { color: var(--slate); }
.quote-cta--mist .btn--primary { background: var(--ink); border-color: var(--ink); color: var(--white); }
.quote-cta--mist .btn--primary:hover { background: var(--emerald); border-color: var(--emerald); color: var(--ink); }
.quote-cta--mist .btn--secondary { color: var(--ink); border-color: var(--ink); }
.quote-cta--mist .btn--secondary:hover { background: var(--ink); color: var(--white); }

/* ---------------------------------------------------------- brand pages */
.brand-hero {
	position: relative;
	padding-block: clamp(44px, 5.5vw, 72px);
	background: var(--mist);
	border-bottom: 1px solid var(--line);
	overflow: hidden;
}
.brand-hero--media { background: var(--ink); color: rgba(255, 255, 255, 0.86); border-bottom: 0; }
.brand-hero__media { position: absolute; inset: 0; z-index: 0; }
.brand-hero__img { width: 100%; height: 100%; object-fit: cover; }
.brand-hero__scrim { position: absolute; inset: 0; background: rgba(8, 11, 10, 0.78); }
/* Constrained inside the container, not on it - putting max-width on the
   .container element itself let its auto margins centre the whole block. */
.brand-hero__inner { position: relative; z-index: 1; max-width: 780px; margin-inline: 0; }
.brand-hero__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 150px;
	height: 84px;
	padding: 14px 24px;
	margin-bottom: 20px;
	background: var(--white);
	border: 1px solid var(--line);
}
.brand-hero__logo img { max-height: 52px; max-width: 100%; width: auto; object-fit: contain; }
.brand-hero__title { font-size: clamp(30px, 4vw, 46px); font-weight: 300; line-height: 1.12; letter-spacing: -0.01em; }
.brand-hero--media .brand-hero__title { color: var(--white); }
.brand-hero__tagline {
	margin-top: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--emerald-ink);
}
.brand-hero--media .brand-hero__tagline { color: var(--emerald); }
.brand-hero__intro { margin-top: 18px; font-size: 16px; line-height: 1.7; max-width: 62ch; }

/* Category strip directly under the hero - the page's navigation spine. */
.brand-bar { background: var(--ink); }
.brand-bar__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
}
.brand-bar__item { display: flex; align-items: center; }
.brand-bar__item + .brand-bar__item::before {
	content: "";
	width: 1px;
	height: 14px;
	background: rgba(255, 255, 255, 0.18);
}
.brand-bar__link {
	display: block;
	padding: 16px clamp(14px, 2vw, 28px);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
	transition: color var(--speed) var(--ease);
}
a.brand-bar__link:hover { color: var(--emerald); }

/* About band. The tick list fills what used to be dead space beside the copy. */
.brand-about {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: clamp(32px, 4.5vw, 64px);
	align-items: start;
}
.brand-about__text { margin-top: 18px; font-size: 15.5px; line-height: 1.8; color: var(--slate); }
.brand-about__site { margin-top: 24px; }
.brand-panel { padding: 28px 30px; background: var(--mist); border-top: 2px solid var(--emerald); }
.brand-panel__title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--emerald-ink);
	margin-bottom: 16px;
}
.brand-panel .tick-list { margin-top: 0; }

/* "In short" band - the old sidebar definition list, given real weight. */
.brand-facts-grid {
	display: grid;
	grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
	gap: clamp(24px, 3vw, 44px);
}
.brand-fact { padding-top: 20px; border-top: 2px solid var(--emerald); }
.brand-fact__title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--emerald);
	margin-bottom: 10px;
}
.brand-fact__text { font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, 0.86); }

/* Category cards - image beside text, two across. */
.cat-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(18px, 2.2vw, 28px);
}
.cat-card { display: flex; }
.cat-card__link {
	display: grid;
	grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
	width: 100%;
	background: var(--white);
	border: 1px solid var(--line);
	transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
a.cat-card__link:hover { border-color: var(--emerald); box-shadow: 0 12px 32px rgba(14, 17, 19, 0.08); }
.cat-card__media { display: block; position: relative; overflow: hidden; background: var(--mist); }
.cat-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
a.cat-card__link:hover .cat-card__img { transform: scale(1.04); }
.cat-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(22px, 2.4vw, 30px);
}
.cat-card__title { display: block; font-size: 19px; font-weight: 600; line-height: 1.25; }
.cat-card__text { display: block; margin-top: 10px; font-size: 14px; line-height: 1.65; color: var(--grey); }
.cat-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 18px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--emerald-ink);
}
.cat-card__arrow { width: 14px; height: 14px; flex: none; transition: transform var(--speed) var(--ease); }
a.cat-card__link:hover .cat-card__arrow { transform: translateX(4px); }

@media (max-width: 1100px) {
	.brand-facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.brand-about { grid-template-columns: 1fr; }
	.cat-cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.brand-facts-grid { grid-template-columns: 1fr; }
	.cat-card__link { grid-template-columns: 1fr; }
	.cat-card__media { aspect-ratio: 16 / 9; }
}

/* Split sections inside the builder pick up their own background. */
.split.has-bg-mist .split__body { background: var(--mist); }
.split.has-bg-ink .split__body { background: var(--ink); color: rgba(255, 255, 255, 0.82); }
.split.has-bg-ink .section__title { color: var(--white); }
.split.has-bg-ink .split__text { color: rgba(255, 255, 255, 0.72); }

/* ==========================================================================
   Enquiry forms
   ========================================================================== */
.form-layout { display: grid; gap: clamp(28px, 4vw, 56px); }
.form-layout--aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
.form-layout--centred { max-width: 780px; margin-inline: auto; }
.form-layout--centred .form-layout__intro { text-align: center; }
.form-layout--centred .form-layout__copy { max-width: 60ch; margin-inline: auto; }
.form-layout--centred .tick-list { display: inline-grid; text-align: left; }
.form-layout__copy { margin-top: 14px; font-size: 15.5px; line-height: 1.7; color: var(--slate); }
.has-bg-ink .form-layout__copy { color: rgba(255, 255, 255, 0.75); }
.form-layout__intro .contact-list { margin-top: 26px; }
@media (max-width: 860px) { .form-layout--aside { grid-template-columns: 1fr; } }

/* The form always sits on its own card with a border. Without it, a form on a
   white section melts into the page and stops reading as something to fill in. */
.form-block {
	position: relative;
	background: var(--white);
	border: 1px solid var(--line);
	padding: clamp(24px, 3vw, 36px);
}
.has-bg-ink .form-block { color: var(--ink); border-color: transparent; }
/* On a white section the card needs a hint of separation from the page. */
.has-bg-white .form-block { box-shadow: 0 10px 30px rgba(14, 17, 19, 0.05); }

.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form__row--full { grid-column: 1 / -1; }
@media (max-width: 620px) { .form__grid { grid-template-columns: 1fr; } }

.form__label {
	display: block;
	margin-bottom: 7px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--ink);
}
.form__required { color: var(--emerald-ink); margin-left: 2px; }

.form__input {
	width: 100%;
	padding: 13px 15px;
	font: inherit;
	font-size: 15px;
	color: var(--ink);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 0;
	transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
	-webkit-appearance: none;
	appearance: none;
}
.form__input { background: var(--mist); }
.form__input:hover { border-color: #cdd4d1; }
.form__input:focus {
	outline: none;
	border-color: var(--emerald);
	box-shadow: 0 0 0 3px rgba(0, 200, 107, 0.18);
	background: var(--white);
}
textarea.form__input { resize: vertical; min-height: 110px; line-height: 1.6; }

.form__input--select {
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%230E1113' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 18px;
}

.form__help { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--grey); }
.form__error { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: #b32d2e; }
.form__row.has-error .form__input { border-color: #b32d2e; }
.form__row.has-error .form__input:focus { box-shadow: 0 0 0 3px rgba(179, 45, 46, 0.16); }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.form__trap {
	position: absolute !important;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

.form__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
	margin-top: 24px;
}
.form__submit { cursor: pointer; }
.form__submit[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.form__small { font-size: 12px; line-height: 1.5; color: var(--grey); max-width: 40ch; }
.form__small a { color: var(--emerald-ink); text-decoration: underline; text-underline-offset: 0.16em; }

.form-note {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 20px;
	margin-bottom: 24px;
	font-size: 14px;
	line-height: 1.6;
}
.form-note:focus { outline: none; }
.form-note__title { font-weight: 700; margin-bottom: 3px; }
.form-note__icon { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.form-note--ok { background: rgba(0, 200, 107, 0.1); border-left: 3px solid var(--emerald); color: var(--ink); }
.form-note--ok .form-note__icon { color: var(--emerald-ink); }
.form-note--error { background: rgba(179, 45, 46, 0.07); border-left: 3px solid #b32d2e; color: #7d2021; }
.form-note--error ul { margin-top: 6px; display: grid; gap: 3px; }
.form-note--error a { text-decoration: underline; text-underline-offset: 0.16em; }

/* Full-width map above the details-and-form row. */
.map-band {
	position: relative;
	height: clamp(280px, 32vw, 420px);
	margin-bottom: clamp(36px, 4.5vw, 64px);
	background: var(--mist);
	border-bottom: 1px solid var(--line);
}
.section--contact { padding-top: 0; }
.contact-form { margin-top: 30px; }
.contact-details { font-size: 15px; line-height: 1.9; }
.contact-details strong { color: var(--ink); }
.form-layout__intro .socials { margin-top: 24px; }

/* ------------------------------------------------------- FAQ with image */
.faq-layout--plain { max-width: 900px; }
.faq-layout--media-left,
.faq-layout--media-right {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 60px);
	align-items: start;
}
.faq-layout--media-right .faq-layout__media { order: 2; }
.faq-layout__media {
	position: sticky;
	top: 140px;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--mist);
}
.faq-layout__img { width: 100%; height: 100%; object-fit: cover; }
.faq-layout__body .faq { border-top: 1px solid var(--line); }

@media (max-width: 900px) {
	.faq-layout--media-left,
	.faq-layout--media-right { grid-template-columns: 1fr; }
	.faq-layout--media-right .faq-layout__media { order: 0; }
	.faq-layout__media { position: static; aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   Dark sections - text and control contrast
   Any component can be dropped onto a near-black section by the builder, so
   every colour that would otherwise stay dark is restated here. Measured
   against #0E1113 for WCAG AA (4.5:1 body, 3:1 large text).
   ========================================================================== */
.has-bg-ink,
.quote-cta--ink,
.quote-cta--image { color: rgba(255, 255, 255, 0.82); }

/* Body and supporting copy: #4C5451 on ink was 2.43:1. */
.has-bg-ink .section__body,
.has-bg-ink .rich,
.has-bg-ink .card__text,
.has-bg-ink .faq__a,
.has-bg-ink .review__quote,
.has-bg-ink .form-layout__copy,
.has-bg-ink .split__details,

/* Quieter tiers still need to clear 4.5:1. */
.has-bg-ink .section__note,
.has-bg-ink .form__help,
.has-bg-ink .form__small,
.has-bg-ink .stat__label,
.has-bg-ink .review__date { color: rgba(255, 255, 255, 0.72); }

.has-bg-ink h1, .has-bg-ink h2, .has-bg-ink h3,
.has-bg-ink .card__title,
.has-bg-ink .faq__q,
.has-bg-ink .review__author,

.has-bg-ink .rich blockquote { color: rgba(255, 255, 255, 0.86); border-left-color: var(--emerald); }
.has-bg-ink .faq,
.has-bg-ink .faq__item { border-color: rgba(255, 255, 255, 0.16); }
.has-bg-ink .faq__q:hover { color: var(--emerald); }
.has-bg-ink .rich a { color: var(--emerald); }
.has-bg-ink .card__cta,
.has-bg-ink .btn--text { color: var(--emerald); }
.has-bg-ink .btn--underline { border-bottom-color: var(--emerald); }

/* Buttons: the light-section rules further up set ink on ink, which made the
   outline button invisible. Restate both for dark backgrounds. */
.section.has-bg-ink .btn--primary,
.split.has-bg-ink .btn--primary {
	background: var(--emerald);
	border-color: var(--emerald);
	color: var(--ink);
}
.section.has-bg-ink .btn--primary:hover,
.split.has-bg-ink .btn--primary:hover {
	background: var(--white);
	border-color: var(--white);
	color: var(--ink);
}
.section.has-bg-ink .btn--secondary,
.split.has-bg-ink .btn--secondary {
	background: transparent;
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.65);
}
.section.has-bg-ink .btn--secondary:hover,
.split.has-bg-ink .btn--secondary:hover {
	background: var(--white);
	color: var(--ink);
	border-color: var(--white);
}
.section.has-bg-ink .btn--dark,
.split.has-bg-ink .btn--dark {
	background: var(--white);
	border-color: var(--white);
	color: var(--ink);
}
.section.has-bg-ink .btn--dark:hover,
.split.has-bg-ink .btn--dark:hover { background: var(--emerald); border-color: var(--emerald); }

/* Tick lists and inputs sitting on a dark panel. */
.has-bg-ink .tick-list li { color: rgba(255, 255, 255, 0.86); }
.has-bg-ink .pill { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); color: var(--white); }

/* ==========================================================================
   Button hover states on an emerald ground
   The default hover for dark and primary buttons is emerald, which on an
   emerald section makes the button disappear into its background. Every
   button sitting on green hovers to ink or white instead.
   ========================================================================== */
.promo-band--emerald .btn--dark:hover,
.quote-cta--emerald .btn--dark:hover,
.has-bg-emerald .btn--dark:hover {
	background: var(--white);
	border-color: var(--white);
	color: var(--ink);
}
.promo-band--emerald .btn--primary,
.has-bg-emerald .btn--primary {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--white);
}
.promo-band--emerald .btn--primary:hover,
.has-bg-emerald .btn--primary:hover {
	background: var(--white);
	border-color: var(--white);
	color: var(--ink);
}
.promo-band--emerald .btn--secondary,
.has-bg-emerald .btn--secondary {
	background: transparent;
	color: var(--ink);
	border-color: rgba(14, 17, 19, 0.55);
}
.promo-band--emerald .btn--secondary:hover,
.has-bg-emerald .btn--secondary:hover {
	background: var(--ink);
	color: var(--white);
	border-color: var(--ink);
}
.promo-band--emerald .btn--text,
.has-bg-emerald .btn--text { color: var(--ink); }
.promo-band--emerald .btn--text:hover,
.has-bg-emerald .btn--text:hover { color: var(--white); }


/* ------------------------------------------------------------ text block */
.text-block--split {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	gap: clamp(28px, 4.5vw, 72px);
	align-items: start;
}
.text-block--split .text-block__head { padding-top: 4px; }
.text-block--measure .text-block__body,
.text-block--measure .text-block__head { max-width: 70ch; }
.text-block--measure .text-block__head { margin-bottom: 20px; }
.text-block--wide .text-block__head { margin-bottom: 20px; }
.text-block--wide .text-block__body { max-width: 90ch; }
.text-block--columns .text-block__head { margin-bottom: 24px; }
.text-block--columns .section__body {
	columns: 2;
	column-gap: clamp(28px, 4vw, 56px);
}
.text-block--columns .section__body > * { break-inside: avoid; }

@media (max-width: 860px) {
	.text-block--split { grid-template-columns: 1fr; gap: 18px; }
	.text-block--columns .section__body { columns: 1; }
}