/*
Theme Name: T8 Plant and Tool Hire
Theme URI: https://www.t8planthire.co.uk/
Author: Welch Marketing Ltd
Author URI: https://www.welchmarketing.co.uk
Description: Premium, plugin free WordPress theme built for T8 Plant and Tool Hire Ltd, Kent. Self building pages, Welch Settings panel, lead capture with database storage, GDPR and PECR cookie consent, schema and local SEO.
Version: 1.7.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: t8
Tags: business, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ---------------------------------------------------------------
   1. Fonts, self hosted. No third party requests before consent.
   --------------------------------------------------------------- */
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/dm-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/dm-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/dm-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/dm-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/inter-latin-700-normal.woff2") format("woff2");
}

/* ---------------------------------------------------------------
   2. Tokens
   --------------------------------------------------------------- */
:root {
	/* Blues sampled directly from the logo artwork.
	   The light end is the top of the mark, the deep end is the bottom. */
	--brand: #0b2a5c;
	--brand-soft: #1a4e7e;
	--brand-deep: #061733;
	--accent: #4fcdf6;
	--accent-mid: #3794c0;
	--accent-deep: #1d5484;
	--accent-soft: #8ddef9;
	--on-accent: #052039;
	--grad: linear-gradient(135deg, var(--accent) 0%, var(--accent-mid) 100%);
	--grad-btn: linear-gradient(to right, var(--accent) 0%, var(--accent-mid) 100%);
	--grad-deep: linear-gradient(160deg, var(--brand-soft) 0%, var(--brand) 45%, var(--brand-deep) 100%);
	--ink: #0f1a2e;
	--muted: #545c72;
	--line: #dfe5f0;
	--cream: #f2f6fc;
	--white: #ffffff;
	--ok: #14713d;
	--err: #a3161b;
	--radius: 14px;
	--radius-lg: 22px;
	--shadow: 0 1px 2px rgba(15, 26, 46, .06), 0 10px 30px rgba(15, 26, 46, .08);
	--shadow-lg: 0 24px 60px rgba(11, 42, 92, .18);
	--wrap: 1180px;
	--head: "DM Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
	--body: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

/* ---------------------------------------------------------------
   3. Base
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
h1, h2, h3, h4, h5 {
	font-family: var(--head);
	line-height: 1.15;
	margin: 0 0 .6em;
	letter-spacing: -.02em;
	color: var(--ink);
	font-weight: 700;
}
h1 { font-size: clamp(2rem, 5.2vw, 3.35rem); }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2.1vw, 1.4rem); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1.1em; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-soft); }
ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .35em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
strong, b { font-weight: 600; }
small { font-size: .85rem; }
blockquote { margin: 0 0 1.2em; padding-left: 1.1rem; border-left: 3px solid var(--accent-mid); color: var(--muted); }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
	outline: 3px solid var(--accent-deep);
	outline-offset: 2px;
	border-radius: 4px;
}
.section-brand :focus-visible,
.hero :focus-visible,
.page-hero :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible,
.topbar :focus-visible,
.callbar :focus-visible { outline-color: var(--accent); }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--brand);
	color: #fff;
	padding: .8rem 1.2rem;
	z-index: 999;
	border-radius: 0 0 8px 0;
	font-weight: 600;
}
.skip-link:focus {
	left: 0;
	color: #fff;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 820px; }
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section-cream { background: var(--cream); }
.section-brand { background: var(--grad-deep); color: #ccd9ec; }
.section-brand h2, .section-brand h3, .section-brand h1 { color: #fff; }
.section-brand a { color: #fff; }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.eyebrow {
	font-family: var(--head);
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: .74rem;
	font-weight: 600;
	color: var(--accent-deep);
	margin: 0 0 .7rem;
}
.section-brand .eyebrow { color: var(--accent-soft); }
.lede { font-size: 1.1rem; color: var(--muted); max-width: 62ch; }
.section-brand .lede { color: #b8c8e0; }
.section-head { max-width: 66ch; margin-bottom: 2.5rem; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* Icons, intrinsic size backstop */
.icon {
	width: 1em; height: 1em;
	display: inline-block;
	flex: none;
	vertical-align: -.125em;
	fill: currentColor;
}

/* ---------------------------------------------------------------
   4. Buttons
   --------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	font-family: var(--head);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	padding: 1rem 1.5rem;
	border-radius: 999px;
	border: 2px solid transparent;
	/* The button has a transparent border. A background image is positioned
	   from the padding box by default and repeats, so a gradient shows a
	   sliver of its opposite end in the 2px border on each side. Painting
	   from the border box with no repeat removes it. */
	background-origin: border-box;
	background-repeat: no-repeat;
	text-decoration: none;
	cursor: pointer;
	transition: transform .15s ease, background-color .15s ease, background-image .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 1.05em; height: 1.05em; }
.btn-primary {
	background-color: var(--accent-mid);
	background-image: var(--grad-btn);
	background-origin: border-box;
	color: var(--on-accent);
	border-color: transparent;
}
.btn-primary:hover { background-image: linear-gradient(to right, var(--accent-soft) 0%, var(--accent) 100%); color: var(--on-accent); }
.btn-brand { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-brand:hover { background: var(--brand-soft); color: #fff; }
.btn-ghost { background: transparent; color: var(--brand); border-color: rgba(11, 42, 92, .28); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-light { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn-light:hover { background: #fff; color: var(--brand); border-color: #fff; }
.btn-block { width: 100%; }
.btn-sm { padding: .7rem 1.1rem; font-size: .92rem; }

/* ---------------------------------------------------------------
   5. Header
   --------------------------------------------------------------- */
.topbar {
	background: var(--brand-deep);
	color: #b8c8e0;
	font-size: .85rem;
}
.topbar .wrap {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.4rem;
	align-items: center;
	justify-content: center;
	padding-top: .5rem;
	padding-bottom: .5rem;
	text-align: center;
}
.topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.topbar a:hover { color: var(--accent); }
.topbar span { display: inline-flex; align-items: center; gap: .4rem; }

.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: #fff;
	border-bottom: 1px solid var(--line);
}
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: .8rem;
	padding-bottom: .8rem;
}
.brand-link { display: inline-flex; align-items: center; text-decoration: none; }
.brand-link img { max-height: 46px; width: auto; }
.brand-link svg { height: 52px; width: auto; }
.header-actions { display: flex; align-items: center; gap: .6rem; }
/* Hidden until the sticky call bar drops away, so the quote action is only
   ever in one place at a time and the header stays clear on a phone. */
.header-cta { display: none; }
.header-phone {
	display: none;
	font-family: var(--head);
	font-weight: 700;
	color: var(--brand);
	text-decoration: none;
	font-size: 1.05rem;
	align-items: center;
	gap: .45rem;
	white-space: nowrap;
}

.nav-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 48px;
	height: 44px;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: 10px;
	cursor: pointer;
	background: #fff;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after {
	content: "";
	display: block;
	height: 2px;
	background: var(--brand);
	border-radius: 2px;
}
.nav-toggle-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}
.nav-toggle-input:focus-visible ~ .header-actions .nav-toggle {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

.primary-nav { display: none; }
.primary-nav ul { list-style: none; margin: 0; padding: 0; }
.primary-nav a {
	display: block;
	text-decoration: none;
	color: var(--ink);
	font-family: var(--head);
	font-weight: 600;
	white-space: nowrap;
}

/* Mobile menu, pure CSS toggle */
#nav-toggle:checked ~ .primary-nav {
	display: block;
	position: fixed;
	inset: 0;
	top: 0;
	background: var(--grad-deep);
	padding: 5.5rem 1.5rem 2.5rem;
	overflow-y: auto;
	z-index: 80;
}
#nav-toggle:checked ~ .primary-nav ul { display: block; }
#nav-toggle:checked ~ .primary-nav a {
	color: #fff;
	font-size: 1.2rem;
	padding: .85rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}
#nav-toggle:checked ~ .primary-nav ul ul { background: transparent; padding-left: 1rem; }
#nav-toggle:checked ~ .primary-nav ul ul a { font-size: 1rem; color: #b8c8e0; }
#nav-toggle:checked ~ .nav-close { display: inline-flex; }
.nav-close {
	display: none;
	position: fixed;
	top: 1rem;
	right: 1rem;
	z-index: 90;
	width: 46px;
	height: 46px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	font-family: var(--head);
}

/* ---------------------------------------------------------------
   6. Hero
   --------------------------------------------------------------- */
.hero {
	position: relative;
	background: var(--grad-deep);
	color: #fff;
	overflow: hidden;
}
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, rgba(6, 23, 51, .96) 0%, rgba(11, 42, 92, .90) 45%, rgba(26, 78, 126, .62) 100%);
	z-index: 1;
}
.hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-inner {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 2.5rem;
	padding-top: clamp(2.6rem, 7vw, 5rem);
	padding-bottom: clamp(3rem, 7vw, 5rem);
}
.hero h1 { color: #fff; max-width: 15ch; }
.hero p.hero-sub { color: #c6d5e8; font-size: 1.12rem; max-width: 52ch; }
.hero-flag {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: rgba(79, 205, 246, .14);
	border: 1px solid rgba(79, 205, 246, .45);
	color: var(--accent-soft);
	font-family: var(--head);
	font-weight: 600;
	font-size: .8rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: .45rem .9rem;
	border-radius: 999px;
	margin-bottom: 1.2rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.6rem; }
.hero-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: .7rem; max-width: 46ch; }
.hero-points li { display: flex; gap: .6rem; align-items: flex-start; color: #c6d5e8; margin: 0; }
.hero-points svg { color: var(--accent); margin-top: .25rem; }

/* Hero without the quote card beside it */
.hero-inner.hero-inner--solo { grid-template-columns: 1fr; }
.hero-inner--solo > div { max-width: 62ch; }
@media (min-width: 700px) {
	.hero-inner.hero-inner--solo { padding-top: clamp(3.5rem, 9vw, 6.5rem); padding-bottom: clamp(3.5rem, 9vw, 6.5rem); }
}

/* The header is sticky, so an anchor target has to clear it or the heading
   lands underneath and the section looks like it starts halfway down. */
[id] { scroll-margin-top: 90px; }

/* Hero with a cut out machine beside the text */
.hero-inner--machine { grid-template-columns: 1fr; }
.hero-machine { display: none; }
@media (min-width: 900px) {
	.hero-inner.hero-inner--machine { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 2.5rem; }
	.hero-machine { display: block; }
	.hero-machine img {
		width: 100%;
		height: auto;
		max-height: 460px;
		object-fit: contain;
		/* A cut out shot needs a shadow or it floats with no weight on it. */
		filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .45));
	}
}

/* Quote card */
.quote-card {
	background: #fff;
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 1.6rem;
	box-shadow: var(--shadow-lg);
}
.quote-card h2 { font-size: 1.3rem; margin-bottom: .3rem; }
.quote-card .quote-note { font-size: .9rem; color: var(--muted); margin-bottom: 1.1rem; }

/* ---------------------------------------------------------------
   7. Forms
   --------------------------------------------------------------- */
.field { margin-bottom: .9rem; }
.field label, .form-label {
	display: block;
	font-family: var(--head);
	font-weight: 600;
	font-size: .9rem;
	margin-bottom: .35rem;
	color: var(--ink);
}
.field .req { color: var(--err); }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="date"], input[type="search"], select, textarea {
	width: 100%;
	font-family: var(--body);
	font-size: 1rem;
	color: var(--ink);
	background: #fff;
	border: 1px solid #c3c8d8;
	border-radius: 10px;
	padding: .75rem .85rem;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); outline: 3px solid rgba(240, 165, 0, .55); outline-offset: 1px; }
.field-hint { font-size: .84rem; color: var(--muted); margin: .3rem 0 0; }
.field-pair { display: flex; gap: .5rem; }
.field-pair input[type="number"] { flex: 0 0 88px; }
.field-pair select { flex: 1 1 auto; min-width: 0; }
.check-row {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-family: var(--head);
	font-weight: 600;
	font-size: .95rem;
	cursor: pointer;
	margin: 0;
}
.check-row input[type="checkbox"] {
	width: 22px;
	height: 22px;
	flex: none;
	accent-color: var(--brand);
	margin: 0;
}
/* A date input is short by default on iOS and looks broken beside a text box */
input[type="date"] { min-height: 48px; }
optgroup { font-family: var(--head); font-weight: 700; color: var(--brand); }
option { font-weight: 400; color: var(--ink); }
.consent-row {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: .8rem;
	margin: 1rem 0;
}
.consent-row input[type="checkbox"] { margin-top: .25rem; width: 20px; height: 20px; flex: none; accent-color: var(--brand); }
.consent-row label { font-family: var(--body); font-weight: 400; font-size: .88rem; line-height: 1.5; margin: 0; color: var(--muted); }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-notice {
	border-radius: 10px;
	padding: .9rem 1rem;
	margin-bottom: 1.2rem;
	font-size: .95rem;
	border: 1px solid;
}
.form-notice-ok { background: #eaf6ef; border-color: #b4dcc4; color: var(--ok); }
.form-notice-err { background: #fdeceb; border-color: #f2bfbd; color: var(--err); }
.form-notice ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.form-grid-2 { display: grid; gap: 0 .9rem; }

/* ---------------------------------------------------------------
   8. Cards and grids
   --------------------------------------------------------------- */
.grid { display: grid; gap: 1.4rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

.card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.5rem;
	box-shadow: var(--shadow);
}
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--muted); margin-bottom: 0; font-size: .97rem; }

.service-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	transition: transform .18s ease, box-shadow .18s ease;
	text-decoration: none;
	color: inherit;
	height: 100%;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; }
.service-card .img-slot { aspect-ratio: 16 / 10; }
.service-card-body { padding: 1.3rem; display: flex; flex-direction: column; flex: 1; }
.service-card h3 { margin-bottom: .35rem; font-size: 1.2rem; }
.service-card p { color: var(--muted); font-size: .95rem; flex: 1; margin-bottom: 1rem; }
.service-card .go {
	font-family: var(--head);
	font-weight: 600;
	color: var(--brand);
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .95rem;
}

.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.feature-list li { display: flex; gap: .85rem; margin: 0; }
.feature-ico {
	flex: none;
	width: 44px; height: 44px;
	border-radius: 12px;
	background: rgba(11, 42, 92, .07);
	color: var(--brand);
	display: flex; align-items: center; justify-content: center;
	font-size: 1.25rem;
}
.section-brand .feature-ico { background: rgba(79, 205, 246, .16); color: var(--accent-soft); }
.feature-list h3 { font-size: 1.05rem; margin-bottom: .2rem; }
.feature-list p { color: var(--muted); font-size: .95rem; margin: 0; }
.section-brand .feature-list p { color: #b8c8e0; }

/* Fleet item rows */
.fleet-grid { display: grid; gap: 1.1rem; }
.fleet-item {
	display: flex;
	gap: 1rem;
	/* stretch, so the photo tile fills the full height of the card and the
	   images line up across a row */
	align-items: stretch;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.1rem;
}
/* A fixed square tile holds either the machine photo or, where there is no
   photo yet, the item number. Same footprint either way, so a category with
   only some photos filled in still lines up. */
.fleet-media {
	flex: none;
	width: 108px;
	min-height: 108px;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
}
.fleet-media img {
	width: 100%;
	height: 100%;
	/* contain, not cover: these are cut out product shots and cropping them
	   lops the bucket or the arm off the machine. */
	object-fit: contain;
}
.fleet-media .num {
	width: 100%;
	height: 100%;
	border-radius: 8px;
	background: var(--grad-deep);
	color: var(--accent-soft);
	font-family: var(--head);
	font-weight: 700;
	font-size: 1.05rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fleet-body { min-width: 0; display: flex; flex-direction: column; }
.fleet-action { margin: .9rem 0 0; }
.fleet-action .btn { padding: .6rem 1rem; font-size: .88rem; }
.fleet-item h3 { font-size: 1.05rem; margin-bottom: .25rem; }
.fleet-item p { color: var(--muted); font-size: .93rem; margin: 0; }
@media (min-width: 760px) {
	.fleet-media { width: 150px; min-height: 130px; }
	.fleet-item { padding: 1.2rem; gap: 1.2rem; }
}

/* Steps */
.steps { counter-reset: step; display: grid; gap: 1.3rem; }
.step { position: relative; padding-left: 3.4rem; }
.step::before {
	counter-increment: step;
	content: "0" counter(step);
	position: absolute;
	left: 0; top: -.2rem;
	font-family: var(--head);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--accent-deep);
}
.section-brand .step::before { color: var(--accent-soft); }
.step h3 { font-size: 1.05rem; margin-bottom: .25rem; }
.step p { color: var(--muted); font-size: .95rem; margin: 0; }
.section-brand .step p { color: #b8c8e0; }

/* Stats */
.stats { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
.stat {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--radius);
	padding: 1.1rem;
	text-align: center;
}
.stat .num { font-family: var(--head); font-weight: 700; font-size: 1.55rem; color: var(--accent); display: block; }
.stat .lbl { font-size: .85rem; color: #b8c8e0; }

/* Trust badges */
/* Trust badges sit on one line where there is room, and wrap centred
   where there is not, so a badge is never clipped. */
.badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}
.badges li {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	flex: 0 1 auto;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: .5rem .9rem;
	font-family: var(--head);
	font-weight: 600;
	font-size: .82rem;
	margin: 0;
}
/* Selector must be at least as specific as .badges li, or the pill styling
   above wins and the break renders as an empty white bar. */
.badges li.badge-break {
	display: none;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	box-shadow: none;
	height: 0;
	overflow: hidden;
}
@media (min-width: 1081px) {
	.badges li { font-size: .87rem; padding: .55rem 1rem; }
	/* A zero height full width item forces the flex row to break here, which
	   is what balances the two rows. Wide screens only, because narrower ones
	   need to wrap freely just to fit. */
	.badges li.badge-break { display: block; width: 100%; height: 0; padding: 0; }
}
.badges svg { color: var(--accent-deep); }

/* Reviews */
.review-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.5rem;
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
}
.review-card .stars { color: var(--accent-mid); letter-spacing: .12em; font-size: .95rem; margin-bottom: .6rem; }
.recommend-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem;
	background: var(--grad-deep);
	color: #fff;
	border-radius: var(--radius-lg);
	padding: 1.6rem;
	margin: 0 0 2.2rem;
}
.recommend-figure {
	font-family: var(--head);
	font-weight: 700;
	font-size: clamp(2.6rem, 7vw, 3.6rem);
	line-height: 1;
	margin: 0;
	color: var(--accent);
	flex: none;
}
.recommend-strip h3 { color: #fff; font-size: 1.15rem; margin: 0 0 .3rem; }
.recommend-strip p { margin: 0; color: #b8c8e0; font-size: .96rem; }
.review-card blockquote { border: 0; padding: 0; margin: 0 0 1rem; color: var(--ink); font-size: 1rem; flex: 1; }
.review-meta { display: flex; align-items: center; gap: .7rem; margin-top: auto; }
.review-meta .avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; background: var(--cream); }
.review-meta .avatar img { width: 100%; height: 100%; object-fit: cover; }
.review-meta .who { font-family: var(--head); font-weight: 600; font-size: .95rem; }
.review-meta .where { font-size: .85rem; color: var(--muted); }
.empty-state {
	border: 1px dashed #b9c0d4;
	background: var(--cream);
	border-radius: var(--radius);
	padding: 2rem;
	text-align: center;
	color: var(--muted);
}

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 1.1rem 0; }
.faq summary {
	font-family: var(--head);
	font-weight: 600;
	font-size: 1.05rem;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "+";
	color: var(--accent-deep);
	font-size: 1.5rem;
	line-height: 1;
	flex: none;
	transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: .8rem 0 0; color: var(--muted); }

/* Areas */
.area-links { display: flex; flex-wrap: wrap; gap: .55rem; list-style: none; padding: 0; margin: 0; }
.area-links li { margin: 0; }
.area-links a {
	display: inline-block;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: .5rem 1rem;
	font-size: .92rem;
	text-decoration: none;
	color: var(--ink);
	font-family: var(--head);
	font-weight: 500;
}
.area-links a:hover { border-color: var(--brand); color: var(--brand); }

/* Gallery */
.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
.gallery .img-slot { aspect-ratio: 4 / 3; }

/* Image slots */
.img-slot {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	background:
		repeating-linear-gradient(135deg, #eef0f7 0 12px, #e5e8f2 12px 24px);
	border: 1px dashed #b9c0d4;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 160px;
}
.img-slot span {
	font-family: var(--head);
	font-size: .8rem;
	font-weight: 600;
	color: #6a7189;
	text-align: center;
	padding: .8rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.img-slot--filled { border: 0; background: none; }
.img-slot--filled img { width: 100%; height: 100%; object-fit: cover; }
.img-slot--round { border-radius: 50%; }

/* Contact blocks */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.contact-list li { display: flex; gap: .8rem; margin: 0; }
.contact-list a { text-decoration: none; font-weight: 600; }
.contact-list .lbl { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-family: var(--head); }

/* CTA band */
.cta-band { background: var(--grad-deep); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #b8c8e0; max-width: 60ch; margin-left: auto; margin-right: auto; }
.cta-band .hero-cta { justify-content: center; }

/* Breadcrumbs */
.crumbs { font-size: .85rem; color: var(--muted); padding: 1rem 0 0; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }
.crumbs span[aria-current] { color: var(--ink); }

/* Page header */
.page-hero { background: var(--grad-deep); color: #fff; padding: clamp(2.2rem, 6vw, 3.6rem) 0; }
.page-hero h1 { color: #fff; margin-bottom: .5rem; }
.page-hero p { color: #b8c8e0; max-width: 62ch; margin: 0; }
.page-hero .crumbs, .page-hero .crumbs a { color: #93a8c6; }
.page-hero .crumbs span[aria-current] { color: #fff; }

/* Prose (legal, blog) */
.prose { max-width: 76ch; }
.prose h2 { margin-top: 2.2rem; font-size: 1.5rem; }
.prose h3 { margin-top: 1.6rem; font-size: 1.15rem; }
.prose ul { padding-left: 1.2rem; }
.prose table td, .prose table th { border: 1px solid var(--line); padding: .6rem .7rem; text-align: left; font-size: .95rem; }

/* Blog */
.post-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow);
}
.post-card h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.post-card h3 a { text-decoration: none; color: var(--ink); }
.post-card h3 a:hover, .post-card h3 a:focus-visible { color: var(--brand); text-decoration: underline; }
.post-card .meta { font-size: .82rem; color: var(--muted); margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .08em; font-family: var(--head); }
.post-card p { color: var(--muted); font-size: .96rem; }
/* The excerpt takes the slack and the action row is pinned to the bottom, so
   every Read more button in a row sits on the same line whatever the length
   of the title or the summary. */
.post-card .post-excerpt { flex: 1 1 auto; margin-bottom: 1.2rem; }
.post-card .post-action { margin: auto 0 0; }
.pagination { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 2rem; }
.pagination .page-numbers {
	display: inline-block; padding: .5rem .85rem; border: 1px solid var(--line);
	border-radius: 8px; text-decoration: none; background: #fff;
}
.pagination .current { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---------------------------------------------------------------
   9. Footer
   --------------------------------------------------------------- */
.site-footer { background: var(--brand-deep); color: #a7b7d1; font-size: .95rem; }
.site-footer h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1rem; }
.footer-top { padding-top: clamp(2.5rem, 6vw, 4rem); padding-bottom: 2rem; display: grid; gap: 2.2rem; }
.footer-brand svg { height: 48px; width: auto; }
.footer-brand img { max-height: 64px; width: auto; }
.footer-about { margin: 1.1rem 0; max-width: 40ch; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .55rem; }
.site-footer a { color: #a7b7d1; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-social { display: flex; gap: .6rem; margin-top: 1rem; }
.footer-social a {
	width: 40px; height: 40px; border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 1.1rem;
}
.footer-social a:hover { background: var(--accent); color: var(--on-accent); }
.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding-top: 1.2rem;
	padding-bottom: 5rem;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.2rem;
	justify-content: space-between;
	font-size: .85rem;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; }
.footer-legal button {
	background: none; border: 0; padding: 0; cursor: pointer;
	color: #a7b7d1; font: inherit; text-decoration: underline;
}
.footer-legal button:hover { color: #fff; }

/* Sticky mobile call bar */
.callbar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 55;
	display: flex;
	background: var(--brand);
	border-top: 1px solid rgba(255, 255, 255, .15);
	box-shadow: 0 -6px 24px rgba(0, 0, 0, .18);
}
.callbar a {
	flex: 1;
	text-align: center;
	padding: .95rem .5rem;
	color: #fff;
	text-decoration: none;
	font-family: var(--head);
	font-weight: 600;
	font-size: .95rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
}
.callbar a + a { background-image: var(--grad-btn); background-color: var(--accent-mid); color: var(--on-accent); }

/* ---------------------------------------------------------------
   10. Cookie consent
   --------------------------------------------------------------- */
.cc-banner {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 100;
	background: #fff;
	border-top: 3px solid transparent;
	border-image: var(--grad) 1;
	box-shadow: 0 -14px 40px rgba(0, 0, 0, .22);
	padding: 1.2rem;
	display: none;
	max-height: 90vh;
	overflow-y: auto;
}
.cc-banner.is-open { display: block; }
.cc-inner { max-width: var(--wrap); margin: 0 auto; }
.cc-banner h2 { font-size: 1.15rem; margin-bottom: .4rem; }
.cc-banner p { font-size: .92rem; color: var(--muted); margin-bottom: 1rem; }
.cc-actions { display: grid; gap: .6rem; }
.cc-prefs { display: none; margin: 1rem 0 0; border-top: 1px solid var(--line); padding-top: 1rem; }
.cc-prefs.is-open { display: block; }
.cc-cat {
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: .85rem;
	margin-bottom: .7rem;
}
.cc-cat-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.cc-cat h3 { font-size: 1rem; margin: 0 0 .2rem; }
.cc-cat p { font-size: .87rem; margin: 0; }
.cc-cat input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--brand); flex: none; }
.cc-locked { font-size: .8rem; font-family: var(--head); font-weight: 600; color: var(--ok); flex: none; }

/* ---------------------------------------------------------------
   11. Responsive
   --------------------------------------------------------------- */
@media (min-width: 560px) {
	.form-grid-2 { grid-template-columns: 1fr 1fr; }
	.cc-actions { grid-template-columns: repeat(3, 1fr); }
	.grid-2 { grid-template-columns: repeat(2, 1fr); }
	.gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 760px) {
	.grid-3 { grid-template-columns: repeat(3, 1fr); }
	.grid-4 { grid-template-columns: repeat(2, 1fr); }
	.stats { grid-template-columns: repeat(4, 1fr); }
	.steps { grid-template-columns: repeat(2, 1fr); }
	.fleet-grid { grid-template-columns: repeat(2, 1fr); }
	.footer-top { grid-template-columns: 1.4fr 1fr 1fr; }
	.header-phone { display: inline-flex; }
	.brand-link img { max-height: 58px; }
}
@media (min-width: 1081px) {
	.grid-4 { grid-template-columns: repeat(4, 1fr); }
	.steps { grid-template-columns: repeat(4, 1fr); }
	.hero-inner { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 3rem; }
	.footer-top { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
	.callbar { display: none; }
	.header-cta { display: inline-flex; }
	.footer-bottom { padding-bottom: 1.5rem; }
	.nav-toggle, .nav-close { display: none; }
	#nav-toggle:checked ~ .nav-close { display: none; }
	#nav-toggle:checked ~ .primary-nav {
		position: static;
		display: block;
		inset: auto;
		background: none;
		padding: 0;
		overflow: visible;
		z-index: auto;
	}
	#nav-toggle:checked ~ .primary-nav a {
		color: var(--ink);
		font-size: .95rem;
		padding: .6rem .7rem;
		border-bottom: 0;
	}
	#nav-toggle:checked ~ .primary-nav ul ul a { color: var(--ink); font-size: .92rem; }
	.primary-nav { display: block; }
	.primary-nav > ul { display: flex; align-items: center; gap: .3rem; }
	.primary-nav > ul > li { position: relative; margin: 0; }
	.primary-nav > ul > li > a { padding: .6rem .7rem; font-size: .95rem; border-radius: 8px; }
	.primary-nav > ul > li > a:hover { background: var(--cream); color: var(--brand); }
	.primary-nav ul ul {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 230px;
		background: #fff;
		border: 1px solid var(--line);
		border-radius: 12px;
		box-shadow: var(--shadow-lg);
		padding: .5rem;
		z-index: 70;
	}
	.primary-nav li:hover > ul, .primary-nav li:focus-within > ul { display: block; }
	.primary-nav ul ul a { padding: .55rem .7rem; font-size: .92rem; border-radius: 8px; font-weight: 500; }
	.primary-nav ul ul a:hover { background: var(--cream); }
	.cc-actions { grid-template-columns: auto auto auto; justify-content: flex-end; }
	.cc-banner { padding: 1.6rem; }
}
@media (min-width: 1081px) {
	.cc-inner-flex { display: flex; gap: 2rem; align-items: center; justify-content: space-between; }
	.cc-inner-flex .cc-copy { flex: 1; }
	.cc-inner-flex .cc-copy p { margin-bottom: 0; }
}

@media (max-width: 1080px) {
	.site-header { backdrop-filter: none; filter: none; transform: none; will-change: auto; contain: none; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.btn:hover, .service-card:hover { transform: none; }
}

/* WordPress core alignment classes */
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin: 0 auto 1.5rem; }
.wp-caption-text { font-size: .85rem; color: var(--muted); }