/* =====================================================================
   GB Springs - modern layout (Oct 2026)
   Shared header, menu and footer for every page, plus the new homepage.
   Loaded from includes/header.php, after gbstyles.css, so it wins.
   Sizes are in px so they look the same on old and new pages
   (old pages set body font-size to 62.5%).
   ===================================================================== */

:root {
	--royal: #1800ad;        /* the blue in the GB logo */
	--royal-light: #3220d0;
	--royal-soft: #7a70d9;
	--royal-dark: #0f0078;
	--royal-deep: #0d0066;
	--red: #cc3333;
	--red-dark: #a92626;
	--tint: #f4f3fd;
	--text: #3a3a4a;
	--sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--brand-bold: 'SansationBold', Arial, sans-serif;
	--brand: 'SansationRegular', Arial, sans-serif;
}

.container {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}


/* ---------- Pages using the new layout (homepage for now) ---------- */

body.modern {
	min-width: 0;
	font-family: var(--sans);
	font-size: 16px;
	color: var(--text);
	background-size: 100% auto;
}
body.modern main {
	display: block;
}

/* The header (styled in gbstyles.css) is sized in em against the old 10px base,
   so pin that base on new-layout pages to make it look identical everywhere */
body.modern .header,
body.modern .availableNow {
	font-family: arial, verdana, sans-serif;
	font-size: 10px;
}
/* Desktop: widen the header from the old 950px to the new 1100px content
   width, so the logo, contact details and menu line up with the page below */
@media (min-width: 861px) {
	body.modern .header .wrapper {
		width: auto;
		max-width: 1100px;
		margin: 0 20px;
	}
	/* The logo image has 25px of empty space on its left, so it's pulled back by that much */
	body.modern .logo,
	body.modern.home .header h3.specialist {
		left: -25px;
	}
	body.modern .header h3.emailUs,
	body.modern .header h3.callUs {
		right: 0;
	}
	body.modern.home .availableNow {
		right: max(20px, calc(50% - 550px));
		margin-right: 0;
	}
}
@media (min-width: 1141px) {
	body.modern .header .wrapper {
		margin: 0 auto;
	}
}

/* Phone number is a tap-to-call link */
.header h3.callUs a:link,
.header h3.callUs a:visited {
	color: #cc3333;
	font-size: 1.2em;
	text-decoration: none;
}
.header h3.callUs a:hover {
	text-decoration: underline;
}


/* ---------- Header and menu: phones ----------
   The header is laid out for desktop widths, so on small screens it is
   restacked into a single centred column. */

@media (max-width: 860px) {
	body.modern .header,
	body.modern .header .wrapper {
		width: auto;
		min-height: 0;
	}
	body.modern .header .wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 12px 16px 16px 16px;
	}
	body.modern .header .topMenu {
		order: 1;
	}
	body.modern .header .topMenu ul {
		float: none;
		display: flex;
		justify-content: center;
	}
	body.modern .logo {
		order: 2;
		position: static;
		width: 240px;
		height: 109px;
		margin-top: 10px;
	}
	body.modern .header h3.specialist {
		order: 3;
		position: static;
		width: auto;
		font-size: 2.2em;
		margin: 4px 0 10px 0;
	}
	body.modern .header h3.emailUs,
	body.modern .header h3.callUs {
		position: static;
		text-align: center;
		font-size: 1.7em;
		border: 0;
		padding: 2px 0;
	}
	body.modern .header h3.emailUs { order: 4; }
	body.modern .header h3.callUs { order: 5; }
	body.modern .header .productMenuHolder {
		order: 6;
		position: static;
		margin-top: 14px;
		border-radius: 26px;
	}
	body.modern .header ul.productMenu {
		flex-wrap: wrap;
		justify-content: center;
	}
	body.modern .header ul.productMenu > li > a:link,
	body.modern .header ul.productMenu > li > a:visited {
		font-size: 1.4em;
		padding: 8px 10px;
	}
	body.modern .header ul.productMenu li.hasDropdown > a:after,
	body.modern .header ul.dropdown {
		display: none;
	}
	body.modern .availableNow {
		display: none;
	}
}


/* ---------- Header ---------- */

.siteHeader {
	z-index: 30;
	font-family: var(--sans);
}

/* Slim top bar */
.siteTopBar {
	background: linear-gradient(90deg, var(--royal-deep), var(--royal));
	color: rgba(255,255,255,0.85);
	font-size: 13px;
}
.siteTopBar .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 36px;
}
.siteTopBar ul {
	list-style-type: none;
	display: flex;
	gap: 22px;
}
.siteTopBar a:link,
.siteTopBar a:visited {
	color: #fff;
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.2s ease;
}
.siteTopBar a:hover {
	opacity: 1;
	text-decoration: underline;
}

/* Logo and contact row */
.siteBrandBar .container {
	display: flex;
	align-items: center;
	gap: 24px;
	padding-top: 18px;
	padding-bottom: 18px;
}
.siteLogo {
	display: block;
	flex-shrink: 0;
}
.siteLogo img {
	display: block;
	height: 104px;
	width: auto;
}
.siteTagline {
	font-family: var(--brand);
	font-size: 24px;
	color: var(--royal);
	padding-left: 24px;
	border-left: solid 2px rgba(24,0,173,0.12);
}
.home .siteTagline {
	display: none;
}
.siteContact {
	margin-left: auto;
	text-align: right;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}
.siteContactLabel {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #8a88a0;
}
a.sitePhone:link,
a.sitePhone:visited {
	font-family: var(--brand-bold);
	font-size: 30px;
	line-height: 1.1;
	color: var(--red);
	text-decoration: none;
}
a.siteEmail:link,
a.siteEmail:visited {
	font-family: var(--brand-bold);
	font-size: 16px;
	color: var(--royal);
	text-decoration: none;
}
a.sitePhone:hover,
a.siteEmail:hover {
	text-decoration: underline;
}

/* Menu button - only shown on phones */
.navToggle {
	display: none;
	margin-left: auto;
	font-family: var(--brand-bold);
	font-size: 15px;
	color: #fff;
	background: var(--red);
	border: 0;
	border-radius: 999px;
	padding: 10px 18px 10px 44px;
	cursor: pointer;
}
.navToggle span,
.navToggle span:before,
.navToggle span:after {
	position: absolute;
	left: 18px;
	width: 18px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
}
.navToggle span {
	top: 50%;
	margin-top: -1px;
}
.navToggle span:before,
.navToggle span:after {
	content: "";
	left: 0;
}
.navToggle span:before { top: -6px; }
.navToggle span:after { top: 6px; }


/* ---------- Red product menu bar ---------- */

.siteNav {
	background: linear-gradient(180deg, #e34a4a 0%, var(--red) 50%, var(--red-dark) 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 6px 18px rgba(204,51,51,0.22);
}
.siteNav ul.productMenu {
	width: auto;
	display: flex;
	justify-content: space-between;
	list-style-type: none;
	padding: 0;
}
.siteNav ul.productMenu > li {
	float: none;
	display: block;
	flex-shrink: 0;
	margin: 7px 0;
	border-radius: 999px;
}
.siteNav ul.productMenu > li > a:link,
.siteNav ul.productMenu > li > a:visited {
	float: none;
	display: block;
	font-family: var(--brand-bold);
	font-size: 16px;
	letter-spacing: 0.02em;
	color: #fff;
	white-space: nowrap;
	text-decoration: none;
	text-shadow: 0 1px 2px rgba(0,0,0,0.25);
	padding: 10px 14px;
	border-radius: 999px;
	background: none;
	box-shadow: none;
	transform: none;
	transition: background 0.25s ease, box-shadow 0.25s ease;
}
.siteNav ul.productMenu > li > a:hover {
	background: rgba(255,255,255,0.16);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
	transform: none;
}

/* Little arrow on items with a dropdown */
.siteNav li.hasDropdown > a:after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 0 3px 8px;
	border-right: solid 2px rgba(255,255,255,0.85);
	border-bottom: solid 2px rgba(255,255,255,0.85);
	transform: rotate(45deg);
	transition: transform 0.25s ease;
}
.siteNav li.hasDropdown:hover > a:after,
.siteNav li.hasDropdown:focus-within > a:after {
	transform: rotate(225deg);
	margin-bottom: -1px;
}

/* Dropdown panels */
.siteNav ul.dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 50;
	min-width: 230px;
	margin-top: 14px;
	padding: 12px 10px 10px 10px;
	list-style-type: none;
	background:
		linear-gradient(90deg, var(--red), var(--royal)) left top / 100% 4px no-repeat,
		rgba(255,255,255,0.95);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-radius: 18px;
	box-shadow: 0 18px 40px rgba(15,0,120,0.22), 0 4px 10px rgba(0,0,0,0.06), inset 0 0 0 1px rgba(24,0,173,0.08);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 10px) scale(0.97);
	transform-origin: top center;
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
/* Invisible bridge so the menu stays open while the mouse crosses the gap */
.siteNav ul.dropdown:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -20px;
	height: 20px;
}
.siteNav li.hasDropdown:hover > ul.dropdown,
.siteNav li.hasDropdown:focus-within > ul.dropdown {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}
.siteNav ul.productMenu > li:first-child > ul.dropdown {
	left: 0;
	transform: translate(0, 10px) scale(0.97);
	transform-origin: top left;
}
.siteNav ul.productMenu > li:last-child > ul.dropdown {
	left: auto;
	right: 0;
	transform: translate(0, 10px) scale(0.97);
	transform-origin: top right;
}
.siteNav ul.productMenu > li:first-child:hover > ul.dropdown,
.siteNav ul.productMenu > li:first-child:focus-within > ul.dropdown,
.siteNav ul.productMenu > li:last-child:hover > ul.dropdown,
.siteNav ul.productMenu > li:last-child:focus-within > ul.dropdown {
	transform: translate(0, 0);
}
.siteNav li.vanSprings > ul.dropdown {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 4px;
	min-width: 400px;
}
.siteNav li.vanSprings > ul.dropdown li.viewAll {
	grid-column: 1 / -1;
}
.siteNav ul.dropdown li {
	display: block;
	float: none;
	margin: 0;
	background: none;
	border-radius: 0;
}
.siteNav ul.dropdown a:link,
.siteNav ul.dropdown a:visited {
	display: block;
	white-space: nowrap;
	font-family: var(--brand);
	font-size: 15px;
	color: #15009c;
	text-decoration: none;
	padding: 9px 14px;
	border-radius: 12px;
	transition: background 0.2s ease, color 0.2s ease, padding 0.2s ease;
}
.siteNav ul.dropdown li:not(.viewAll) a:before {
	content: "";
	position: absolute;
	left: 10px;
	top: 50%;
	width: 5px;
	height: 5px;
	margin-top: -3px;
	border-right: solid 2px var(--red);
	border-top: solid 2px var(--red);
	transform: rotate(45deg) translateX(-4px);
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.siteNav ul.dropdown li:not(.viewAll) a:hover {
	background: linear-gradient(90deg, rgba(24,0,173,0.08), rgba(24,0,173,0.02));
	color: var(--red);
	padding-left: 26px;
}
.siteNav ul.dropdown li:not(.viewAll) a:hover:before {
	opacity: 1;
	transform: rotate(45deg) translateX(0);
}
.siteNav ul.dropdown li.viewAll {
	margin-bottom: 6px;
}
.siteNav ul.dropdown li.viewAll a:link,
.siteNav ul.dropdown li.viewAll a:visited {
	font-family: var(--brand-bold);
	font-size: 14px;
	color: #fff;
	padding: 10px 16px;
	border-radius: 999px;
	background: linear-gradient(var(--royal-light), var(--royal));
	box-shadow: 0 4px 12px rgba(24,0,173,0.28), inset 0 1px 0 rgba(255,255,255,0.25);
}
.siteNav ul.dropdown li.viewAll a:after {
	content: "\2192";
	float: right;
	margin-left: 12px;
	transition: transform 0.2s ease;
}
.siteNav ul.dropdown li.viewAll a:hover {
	background: linear-gradient(var(--red), var(--red-dark));
	box-shadow: 0 4px 12px rgba(204,51,51,0.32), inset 0 1px 0 rgba(255,255,255,0.25);
}
.siteNav ul.dropdown li.viewAll a:hover:after {
	transform: translateX(3px);
}


/* ---------- Buttons ---------- */

a.btn:link,
a.btn:visited {
	display: inline-block;
	font-family: var(--brand-bold);
	font-size: 15px;
	letter-spacing: 0.03em;
	text-decoration: none;
	text-transform: uppercase;
	padding: 13px 26px;
	border-radius: 999px;
	transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
a.btn:hover {
	transform: translateY(-2px);
}
a.btnPrimary:link,
a.btnPrimary:visited {
	color: #fff;
	background: linear-gradient(var(--royal-light), var(--royal));
	box-shadow: 0 6px 16px rgba(24,0,173,0.28), inset 0 1px 0 rgba(255,255,255,0.25);
}
a.btnPrimary:hover {
	box-shadow: 0 10px 22px rgba(24,0,173,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}
a.btnOutlineRed:link,
a.btnOutlineRed:visited {
	color: var(--red);
	box-shadow: inset 0 0 0 2px var(--red);
}
a.btnOutlineRed:hover {
	color: #fff;
	background: var(--red);
}
a.btnOutlineLight:link,
a.btnOutlineLight:visited {
	color: #fff;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,0.85);
}
a.btnOutlineLight:hover {
	color: var(--royal);
	background: #fff;
}
.splitPanel a.btnOutlineLight:hover {
	color: var(--red);
}


/* ---------- Homepage: hero ---------- */

.hero {
	background: linear-gradient(180deg, #f3f2fd, #e3e0f8);
	border-bottom: solid 1px rgba(24,0,173,0.1);
	overflow: hidden;
}
.heroInner {
	display: grid;
	grid-template-columns: 5fr 7fr;
	align-items: center;
	gap: 30px;
	padding-top: 56px;
	padding-bottom: 56px;
}
.hero h1 {
	font-family: var(--brand-bold);
	font-weight: normal;
	font-size: 48px;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--red);
	margin: 0 0 18px 0;
}
.hero h1 span {
	display: block;
	margin-top: 10px;
	font-family: var(--brand);
	font-size: 28px;
	line-height: 1.15;
	color: var(--royal-soft);
}
.hero p {
	font-size: 17px;
	line-height: 1.6;
	margin: 0 0 26px 0;
	max-width: 440px;
}
.heroButtons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.heroImage img {
	display: block;
	width: 100%;
	height: auto;
}


/* ---------- Homepage: sections ---------- */

.section {
	padding: 64px 0;
	background: #fff;
}
.sectionTint {
	background: var(--tint);
}
.sectionTitle {
	font-family: var(--brand-bold);
	font-weight: normal;
	font-size: 28px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	color: var(--royal);
	margin: 0 0 40px 0;
}
.sectionTitle:after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin: 14px auto 0 auto;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--red), var(--royal));
}

/* Product cards */
.productGrid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}
a.productCard {
	display: flex;
	flex-direction: column;
	width: calc(25% - 18px);
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(15,0,120,0.08), inset 0 0 0 1px rgba(24,0,173,0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
a.productCard:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(15,0,120,0.16), inset 0 0 0 1px rgba(24,0,173,0.12);
}
.productImg {
	display: block;
	height: 170px;
	margin: 16px 16px 0 16px;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
/* Wide banner pictures: zoom in on one vehicle instead of shrinking the whole strip */
.productImgCrop {
	background-size: auto 100%;
}
.productName {
	display: block;
	margin-top: auto;
	padding: 16px 12px 18px 12px;
	font-family: var(--brand-bold);
	font-size: 15px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	color: var(--royal);
	border-top: solid 1px rgba(24,0,173,0.06);
	transition: color 0.25s ease;
}
a.productCard:hover .productName {
	color: var(--red);
}

/* Van manufacturer tiles */
.brandGrid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}
a.brandTile {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 26px 10px 20px 10px;
	background: #fff;
	border-radius: 18px;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(15,0,120,0.06), inset 0 0 0 1px rgba(24,0,173,0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
a.brandTile:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 26px rgba(15,0,120,0.14), inset 0 0 0 1px rgba(24,0,173,0.14);
}
.brandName {
	font-family: var(--brand-bold);
	font-size: 19px;
	line-height: 1.15;
	color: var(--royal);
	min-height: 44px;
	display: flex;
	align-items: center;
}
.brandType {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8a88a0;
	margin: 4px 0 16px 0;
}
.brandBtn {
	margin-top: auto;
	font-family: var(--brand-bold);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--royal);
	padding: 8px 20px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 2px var(--royal);
	transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
a.brandTile:hover .brandBtn {
	background: var(--royal);
	color: #fff;
}
a.brandTileAlt .brandName {
	color: var(--red);
}
a.brandTileAlt .brandBtn {
	color: var(--red);
	box-shadow: inset 0 0 0 2px var(--red);
}
a.brandTileAlt:hover .brandBtn {
	background: var(--red);
	color: #fff;
}
a.brandTileAll {
	background: linear-gradient(160deg, var(--royal-light), var(--royal-deep));
}
a.brandTileAll .brandName,
a.brandTileAll .brandType {
	color: #fff;
}
a.brandTileAll .brandType {
	opacity: 0.7;
}
a.brandTileAll .brandBtn {
	color: #fff;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,0.85);
}
a.brandTileAll:hover .brandBtn {
	background: #fff;
	color: var(--royal);
}

/* Land Rover split feature */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 380px;
	border-top: solid 4px var(--red);
}
/* Full-bleed photo, kept centred on the Land Rover whatever the panel's shape */
.splitImage {
	background: #2b3a2e url(images/land-rover-feature.webp) no-repeat 48% 45% / cover;
}
.splitPanel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 56px 8%;
	color: #fff;
	background:
		repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 46px, rgba(255,255,255,0) 46px 92px),
		linear-gradient(140deg, #d63c3c, var(--red-dark));
}
.splitBadge {
	font-family: var(--brand-bold);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var(--royal);
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 18px;
}
.splitPanel h2 {
	font-family: var(--brand-bold);
	font-weight: normal;
	font-size: 30px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 16px 0;
}
.splitPanel p {
	font-size: 16px;
	line-height: 1.7;
	max-width: 460px;
	margin: 0 0 26px 0;
	opacity: 0.92;
}

/* About band */
.aboutBand {
	padding: 72px 0;
	text-align: center;
	color: #fff;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.12), rgba(255,255,255,0) 60%),
		linear-gradient(120deg, var(--royal-dark), var(--royal-deep));
	border-top: solid 4px var(--red);
}
.aboutBand h2 {
	font-family: var(--brand-bold);
	font-weight: normal;
	font-size: 28px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 20px 0;
}
.aboutBand p {
	font-size: 17px;
	line-height: 1.75;
	max-width: 780px;
	margin: 0 auto 16px auto;
	opacity: 0.9;
}
.aboutBand .btn {
	margin-top: 14px;
}


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

.siteFooter {
	clear: both;
	font-family: var(--sans);
	font-size: 15px;
	color: rgba(255,255,255,0.85);
	background:
		repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 46px, rgba(255,255,255,0) 46px 92px),
		linear-gradient(160deg, #d63c3c, var(--red-dark));
}
.footerCols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	padding-top: 52px;
	padding-bottom: 44px;
}
.footerCol {
	text-align: center;
	padding: 0 20px;
}
.footerCol + .footerCol {
	border-left: solid 1px rgba(255,255,255,0.16);
}
.footerCol h4 {
	font-family: var(--brand-bold);
	font-weight: normal;
	font-size: 16px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 16px 0;
}
.footerCol p {
	line-height: 1.75;
	margin: 0;
}
.footerCol ul {
	list-style-type: none;
	line-height: 1.75;
}
.siteFooter a:link,
.siteFooter a:visited {
	color: #fff;
	text-decoration: none;
}
.siteFooter a:hover {
	text-decoration: underline;
}
a.footerButton:link,
a.footerButton:visited {
	display: inline-block;
	margin-top: 18px;
	font-family: var(--brand-bold);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 9px 20px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,0.8);
	transition: background 0.25s ease, color 0.25s ease;
}
a.footerButton:hover {
	background: #fff;
	color: var(--red);
	text-decoration: none;
}
.footerBottom {
	background: rgba(0,0,0,0.18);
	font-size: 12px;
	color: rgba(255,255,255,0.6);
}
.footerBottom .container {
	display: flex;
	justify-content: center;
	text-align: center;
	align-items: center;
	gap: 20px;
	padding-top: 16px;
	padding-bottom: 16px;
}
.footerBottom p {
	margin: 0;
	line-height: 1.6;
}
.siteFooter .footerBottom a:link,
.siteFooter .footerBottom a:visited {
	color: rgba(255,255,255,0.6);
	white-space: nowrap;
}


/* ---------- Tablets ---------- */

@media (max-width: 1100px) {
	.siteNav ul.productMenu > li > a:link,
	.siteNav ul.productMenu > li > a:visited {
		font-size: 14px;
		padding: 10px 9px;
	}
	.brandGrid {
		grid-template-columns: repeat(4, 1fr);
	}
	a.productCard {
		width: calc(33.333% - 16px);
	}
}


/* ---------- Phones ---------- */

@media (max-width: 860px) {
	.topTagline,
	.siteTagline,
	.siteContact {
		display: none;
	}
	.siteTopBar .container {
		justify-content: center;
	}
	.siteLogo img {
		height: 60px;
	}
	.navToggle {
		display: block;
	}

	/* Menu becomes a stacked list that opens from the Menu button */
	.siteNav .navHolder {
		display: none;
	}
	.siteNav.navOpen .navHolder {
		display: block;
	}
	.siteNav ul.productMenu {
		flex-direction: column;
		padding: 8px 0;
	}
	.siteNav ul.productMenu > li {
		margin: 2px 0;
	}
	.siteNav ul.productMenu > li > a:link,
	.siteNav ul.productMenu > li > a:visited {
		font-size: 17px;
		padding: 12px 16px;
	}
	.siteNav li.hasDropdown > a:after {
		display: none;
	}
	.siteNav ul.dropdown {
		display: none !important;
	}

	.heroInner {
		grid-template-columns: 1fr;
		padding-top: 36px;
		padding-bottom: 36px;
	}
	.hero h1 {
		font-size: 36px;
	}
	.hero h1 span {
		font-size: 22px;
	}

	.section {
		padding: 44px 0;
	}
	a.productCard {
		width: calc(50% - 12px);
	}
	.productImg {
		height: 120px;
	}
	.brandGrid {
		grid-template-columns: repeat(2, 1fr);
	}
	.split {
		grid-template-columns: 1fr;
	}
	.splitImage {
		min-height: 220px;
	}
	.footerCols {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.footerCol + .footerCol {
		border-left: 0;
		border-top: solid 1px rgba(255,255,255,0.16);
		padding-top: 30px;
	}
	.footerBottom .container {
		flex-direction: column;
		text-align: center;
	}
}


/* =====================================================================
   Inner pages (product, section and information pages)
   Same look as the homepage. Pages opt in with <body class="modern inner">.
   ===================================================================== */

body.inner .viewPort {
	position: static;
}

/* ---------- Page banner: pale blue band with red title, like the homepage hero ---------- */

body.inner .banner {
	float: none;
	width: auto;
	min-height: 0;
	padding: 60px 0 40px 0;
	background: linear-gradient(180deg, #f3f2fd, #e3e0f8);
	border-top: 0;
	border-bottom: solid 1px rgba(24,0,173,0.1);
}
body.inner .banner .wrapper {
	width: auto;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px 40px;
}
body.inner .banner h1 {
	flex: 1 1 300px;
	float: none;
	width: auto;
	margin: 0;
	background: none;
	font-family: var(--brand-bold);
	font-weight: normal;
	font-size: 40px;
	line-height: 1.08;
	text-transform: uppercase;
	color: var(--red);
}
body.inner .banner h1 span {
	margin: 0;
	padding: 0;
	background: none;
}
body.inner .banner img {
	float: none;
	flex: 0 1 auto;
	margin-left: auto;
	max-width: 100%;
	max-height: 210px;
	height: auto;
	width: auto;
}
body.inner .banner.shallow {
	padding-bottom: 44px;
}

/* ---------- Content area, with an optional side column ---------- */

body.inner .pageLayout {
	width: auto;
	max-width: 1100px;
	margin: 0 auto;
	padding: 48px 20px 64px 20px;
	box-sizing: border-box;
}
body.inner .pageLayout.hasSide {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 44px;
	align-items: start;
}
body.inner .pageContent {
	float: none;
	width: auto;
	font-size: 16px;
	line-height: 1.7;
	color: var(--text);
}
body.inner .pageContent:after {
	content: "";
	display: block;
	clear: both;
}
body.inner .pageContent h2 {
	font-family: var(--brand-bold);
	font-weight: normal;
	font-size: 26px;
	line-height: 1.25;
	color: var(--royal);
	margin: 0 0 18px 0;
}
body.inner .pageContent h2:after {
	content: "";
	display: block;
	width: 48px;
	height: 4px;
	margin-top: 12px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--red), var(--royal));
}
body.inner .pageContent * + h2 {
	margin-top: 40px;
}
body.inner .pageContent p {
	margin: 0 0 1.2em 0;
	line-height: 1.7;
}
body.inner .pageContent a:link,
body.inner .pageContent a:visited {
	color: var(--royal);
}
body.inner .pageContent a:hover {
	color: var(--red);
}

/* Bullet lists with small red markers */
body.inner ul.mainInfo {
	list-style-type: none;
	margin: 0 0 1.4em 0;
}
body.inner ul.mainInfo li {
	padding: 0 0 0 26px;
	margin: 0 0 10px 0;
	line-height: 1.65;
}
body.inner ul.mainInfo li:before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.62em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--red);
	box-shadow: 0 0 0 3px rgba(204,51,51,0.15);
}
body.inner ol.mainInfo {
	margin: 0 0 1.4em 22px;
}
body.inner ol.mainInfo li {
	padding-left: 6px;
	margin: 0 0 10px 0;
	line-height: 1.65;
}
body.inner ol.mainInfo li::marker {
	color: var(--red);
	font-family: var(--brand-bold);
}

/* Photos beside the text */
body.inner .imageRight {
	float: right;
	max-width: 38%;
	height: auto;
	margin: 0 0 24px 36px;
	border-radius: 18px;
	box-shadow: 0 10px 28px rgba(15,0,120,0.14);
}
body.inner .halfColumn {
	float: none;
	width: auto;
}
body.inner .pageContent > img:not(.imageRight) {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 18px;
	margin: 0 0 24px 0;
}

/* ---------- Product tables ---------- */

body.inner table.productData {
	float: none;
	width: 100%;
	margin: 10px 0 36px 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 6px 20px rgba(15,0,120,0.08), inset 0 0 0 1px rgba(24,0,173,0.08);
	font-size: 15px;
	line-height: 1.45;
}
body.inner table.productData th {
	padding: 15px 16px;
	border: 0;
	background: linear-gradient(var(--royal-light), var(--royal));
	font-family: var(--brand-bold);
	font-weight: normal;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}
body.inner table.productData td {
	padding: 12px 16px;
	border: 0;
	border-bottom: solid 1px rgba(24,0,173,0.07);
	vertical-align: middle;
}
body.inner table.productData td + td,
body.inner table.productData th + th {
	border-left: 0;
}
body.inner table.productData tr:last-child td {
	border-bottom: 0;
}
body.inner table.productData tr:hover td {
	background: #faf9ff;
}
body.inner table.productData td:first-child {
	font-family: var(--brand-bold);
	color: var(--royal);
	white-space: nowrap;
}
body.inner table.productData td.sectionHead,
body.inner table.productData tr:hover td.sectionHead {
	padding-top: 14px;
	padding-bottom: 10px;
	background: var(--tint);
	font-family: var(--brand-bold);
	font-weight: normal;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--red);
	white-space: normal;
}
body.inner table.productData td.buyNow {
	text-align: right;
}
body.inner table.productData td.buyNow a:link,
body.inner table.productData td.buyNow a:visited {
	display: inline-block;
	font-family: var(--brand-bold);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	padding: 8px 18px;
	border-radius: 999px;
	background: linear-gradient(#d63c3c, var(--red-dark));
	box-shadow: 0 3px 10px rgba(204,51,51,0.25);
	transition: background 0.25s ease, transform 0.25s ease;
}
body.inner table.productData td.buyNow a:hover {
	background: linear-gradient(var(--royal-light), var(--royal));
	transform: translateY(-1px);
}
body.inner table.productData td.buyNow a.contactLink:link,
body.inner table.productData td.buyNow a.contactLink:visited {
	background: none;
	box-shadow: none;
	color: var(--royal);
	padding: 8px 0;
	text-decoration: underline;
}
body.inner p.tableDisclaimer {
	font-size: 13px;
}

/* ---------- Range cards on section pages (vans, pick ups, components) ---------- */

body.inner ul.rangeMenu {
	float: none;
	width: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 20px;
	margin: 24px 0 40px 0;
	list-style-type: none;
}
body.inner ul.rangeMenu li {
	display: block;
	width: auto;
	min-height: 0;
	margin: 0;
	border: 0;
}
body.inner ul.rangeMenu li a:link,
body.inner ul.rangeMenu li a:visited {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: auto;
	height: auto;
	min-height: 230px;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center 22px;
	background-size: 180px auto;
	border-radius: 18px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(15,0,120,0.08), inset 0 0 0 1px rgba(24,0,173,0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
body.inner ul.rangeMenu li a:hover {
	background-color: #fff;
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(15,0,120,0.16), inset 0 0 0 1px rgba(24,0,173,0.12);
}
body.inner ul.rangeMenu a:link h3,
body.inner ul.rangeMenu a:visited h3 {
	position: static;
	width: auto;
	margin: 0;
	padding: 14px 10px 16px 10px;
	background: #fff;
	border-top: solid 1px rgba(24,0,173,0.06);
	font-family: var(--brand-bold);
	font-weight: normal;
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	color: var(--royal);
	transition: color 0.25s ease;
}
body.inner ul.rangeMenu li a:hover h3 {
	background: #fff;
	color: var(--red);
}

/* ---------- "Any questions?" panel at the end of each page ---------- */

.ctaPanel {
	clear: both;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 30px;
	margin: 44px 0 0 0;
	padding: 30px 34px;
	border-radius: 22px;
	color: #fff;
	background:
		repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 46px, rgba(255,255,255,0) 46px 92px),
		linear-gradient(140deg, var(--royal), var(--royal-deep));
	box-shadow: 0 14px 34px rgba(15,0,120,0.22);
}
.ctaText {
	flex: 1 1 320px;
}
body.inner .ctaPanel h3 {
	font-family: var(--brand-bold);
	font-weight: normal;
	font-size: 22px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 6px 0;
}
body.inner .ctaPanel p {
	margin: 0;
	opacity: 0.9;
}
.ctaActions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
body.inner .ctaPanel a.btn:link,
body.inner .ctaPanel a.btn:visited {
	font-size: 14px;
	padding: 12px 22px;
}
a.btnWhite:link,
a.btnWhite:visited {
	color: var(--royal);
	background: #fff;
	box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
body.inner .ctaPanel a.btnWhite:link,
body.inner .ctaPanel a.btnWhite:visited {
	color: var(--royal);
}
a.btnWhite:hover {
	color: var(--red);
}
body.inner .ctaPanel a.btnOutlineLight:link,
body.inner .ctaPanel a.btnOutlineLight:visited {
	color: #fff;
}
body.inner .ctaPanel a.btnOutlineLight:hover {
	color: var(--royal);
}

/* ---------- Side column: range menu and contact card ---------- */

body.inner .pageSide {
	position: sticky;
	top: 20px;
	font-size: 15px;
}
body.inner .subMenu {
	float: none;
	width: auto;
	margin: 0 0 20px 0;
	border: 0;
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 6px 20px rgba(15,0,120,0.08), inset 0 0 0 1px rgba(24,0,173,0.08);
}
body.inner .subMenu h3 {
	float: none;
	margin: 0;
}
body.inner .subMenu h3 a:link,
body.inner .subMenu h3 a:visited {
	width: auto;
	padding: 15px 18px;
	border: 0;
	background: linear-gradient(180deg, #e34a4a, var(--red) 50%, var(--red-dark));
	font-family: var(--brand-bold);
	font-size: 15px;
	letter-spacing: 0.05em;
	color: #fff;
}
body.inner .subMenu h3 a:hover {
	background: linear-gradient(180deg, #d63c3c, var(--red-dark));
}
body.inner .subMenu ul {
	padding: 8px;
}
body.inner .subMenu ul li {
	float: none;
	width: auto !important;
	padding: 0;
	border: 0 !important;
}
body.inner .subMenu ul li a:link,
body.inner .subMenu ul li a:visited {
	float: none;
	width: auto;
	padding: 9px 12px;
	border: 0;
	border-radius: 10px;
	font-family: var(--brand);
	font-size: 15px;
	color: #15009c;
	transition: background 0.2s ease, color 0.2s ease, padding 0.2s ease;
}
body.inner .subMenu ul li a:hover {
	background: rgba(24,0,173,0.07);
	color: var(--red);
	padding-left: 18px;
}

body.inner .sideBar {
	float: none;
	clear: none;
	width: auto;
}
.sideCard {
	padding: 24px 22px;
	border-radius: 18px;
	text-align: center;
	color: #fff;
	background:
		repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 46px, rgba(255,255,255,0) 46px 92px),
		linear-gradient(140deg, var(--royal), var(--royal-deep));
	box-shadow: 0 10px 26px rgba(15,0,120,0.2);
}
body.inner .sideCard h5 {
	float: none;
	margin: 0 0 16px 0;
	font-family: var(--brand-bold);
	font-weight: normal;
	font-size: 19px;
	line-height: 1.3;
}
body.inner .sideCard a.btn:link,
body.inner .sideCard a.btn:visited {
	font-size: 12px;
	padding: 10px 18px;
}
a.sideLink:link,
a.sideLink:visited {
	display: block;
	margin-top: 14px;
	padding: 14px 18px;
	border-radius: 14px;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(24,0,173,0.12);
	font-family: var(--brand-bold);
	font-size: 15px;
	color: var(--royal);
	text-decoration: none;
	transition: color 0.2s ease, box-shadow 0.2s ease;
}
a.sideLink:after {
	content: "\2192";
	float: right;
}
a.sideLink:hover {
	color: var(--red);
	box-shadow: inset 0 0 0 1px rgba(204,51,51,0.4);
}

/* ---------- Land Rover page extras ---------- */

body.inner .landRoverIntro {
	width: auto;
	float: none;
}
body.inner .landRoverIntro .availableNow {
	float: none;
	display: inline-block;
	font-size: 10px !important;
	margin: 6px 0 10px 0;
}
body.inner .boxContentBlue {
	float: none;
	width: auto;
	margin: 0 0 30px 0;
	padding: 22px 26px;
	border-radius: 18px;
	background: linear-gradient(140deg, var(--royal), var(--royal-deep));
	box-shadow: 0 10px 26px rgba(15,0,120,0.2);
}
body.inner .boxContentBlue p {
	margin: 0 0 8px 0;
}
body.inner .boxContentBlue a.white:link,
body.inner .boxContentBlue a.white:visited {
	color: #fff;
}
body.inner ul.thumbGallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 18px;
	margin: 10px 0 30px 0;
	list-style-type: none;
}
body.inner ul.thumbGallery li {
	display: block;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
}
body.inner ul.thumbGallery li a:link,
body.inner ul.thumbGallery li a:visited {
	display: block;
	text-decoration: none;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 6px 18px rgba(15,0,120,0.08), inset 0 0 0 1px rgba(24,0,173,0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
body.inner ul.thumbGallery li a:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(15,0,120,0.16);
}
body.inner ul.thumbGallery img {
	display: block;
	width: 100%;
	height: 140px;
	object-fit: cover;
	border: 0;
}
body.inner ul.thumbGallery p {
	margin: 0;
	padding: 10px 12px 12px 12px;
	font-size: 13px;
	line-height: 1.35;
	color: var(--royal);
}

/* ---------- Contact form ---------- */

body.inner table.contactTable {
	width: 100%;
	max-width: 680px;
	border-collapse: separate;
	border-spacing: 0 10px;
	font-size: 15px;
}
body.inner table.contactTable th {
	width: 120px;
	padding: 12px 16px 0 0;
	vertical-align: top;
	text-align: left;
	font-family: var(--brand-bold);
	font-weight: normal;
	color: var(--royal);
}
body.inner table.contactTable td {
	padding: 0;
}
body.inner table.contactTable td input,
body.inner table.contactTable td textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 16px;
	border: 0;
	border-radius: 12px;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(24,0,173,0.18);
	font-family: var(--sans);
	font-size: 15px;
	transition: box-shadow 0.2s ease;
}
body.inner table.contactTable td input:focus,
body.inner table.contactTable td textarea:focus {
	outline: 0;
	box-shadow: inset 0 0 0 2px var(--royal), 0 0 0 4px rgba(24,0,173,0.1);
}
body.inner table.contactTable td.buttons {
	padding-top: 10px;
	text-align: right;
	color: transparent;
}
body.inner .contactTable input.reset,
body.inner .contactTable input.submit {
	width: auto;
	padding: 12px 28px;
	border-radius: 999px;
	font-family: var(--brand-bold);
	font-size: 14px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
}
body.inner .contactTable input.submit {
	color: #fff;
	background: linear-gradient(var(--royal-light), var(--royal));
	box-shadow: 0 6px 16px rgba(24,0,173,0.28);
}
body.inner .contactTable input.reset {
	color: var(--red);
	background: #fff;
	box-shadow: inset 0 0 0 2px var(--red);
}
body.inner .creditCardSide {
	float: none;
	width: auto;
	margin: 30px 0 0 0;
	padding: 22px 26px;
	border-radius: 18px;
	background: var(--tint);
	box-shadow: inset 0 0 0 1px rgba(24,0,173,0.08);
}

/* ---------- Inner pages: tablets and phones ---------- */

@media (max-width: 960px) {
	body.inner .pageLayout.hasSide {
		grid-template-columns: minmax(0, 1fr) 240px;
		gap: 30px;
	}
}
@media (max-width: 860px) {
	body.inner .banner {
		padding: 36px 0 30px 0;
	}
	body.inner .banner h1 {
		font-size: 30px;
	}
	body.inner .banner img {
		margin-left: 0;
		max-height: none;
	}
	body.inner .pageLayout {
		padding-top: 34px;
		padding-bottom: 44px;
	}
	body.inner .pageLayout.hasSide {
		grid-template-columns: 1fr;
	}
	body.inner .pageSide {
		position: static;
	}
	body.inner .imageRight {
		float: none;
		display: block;
		max-width: 100%;
		margin: 0 0 24px 0;
	}
	/* Wide tables scroll sideways inside the page instead of squashing */
	body.inner table.productData {
		display: block;
		overflow-x: auto;
	}
	body.inner table.contactTable th {
		width: 90px;
	}
	body.inner ul.rangeMenu {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
	body.inner ul.rangeMenu li a:link,
	body.inner ul.rangeMenu li a:visited {
		min-height: 180px;
		background-size: 130px auto;
	}
	.ctaPanel {
		padding: 26px 22px;
	}
}

/* ---------- Inner pages: alignment and fixes ---------- */

/* Content lines up with the header, logo and menu (1100px wide) */
body.inner .banner .wrapper,
body.inner .pageLayout {
	max-width: 1140px;
	box-sizing: border-box;
}

/* "Leaf Spring Solutions" sits under the logo on every page, as on the homepage */
@media (min-width: 861px) {
	body.modern .header h3.specialist {
		left: -25px;
		top: 188px;
		width: 350px;
		font-size: 2.64em;
		text-align: center;
	}
	body.modern .header,
	body.modern .header .wrapper {
		min-height: 270px;
	}
}

/* Banner pictures sit on a white rounded card, so their own white backgrounds blend in */
body.inner .banner img {
	box-sizing: border-box;
	padding: 12px 16px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 12px 30px rgba(15,0,120,0.12);
}

/* Land Rover page: "Now Available" box keeps its white text */
body.inner .landRoverIntro .availableNow a:link,
body.inner .landRoverIntro .availableNow a:visited {
	color: #fff;
	text-decoration: none;
}
body.inner .landRoverIntro .availableNow p.contact {
	color: var(--royal);
}

/* Contact form: labels on white, card-payments box below the form */
body.inner table.contactTable {
	float: none;
	margin: 0 0 10px 0;
	background: none;
}
body.inner table.contactTable th,
body.inner table.contactTable td {
	border: 0;
	background: none;
}
body.inner table.contactTable th {
	color: var(--royal);
}
body.inner .creditCardSide {
	padding-top: 84px;
	background: var(--tint) url(images/card-logos.jpg) no-repeat 26px 24px;
}
body.inner .creditCardSide h2 {
	margin-bottom: 10px;
}
body.inner .creditCardSide h2:after {
	display: none;
}

/* Wide banner pictures shrink to sit beside the title rather than dropping below it */
@media (min-width: 861px) {
	body.inner .banner img {
		max-width: calc(100% - 360px);
	}
	body.inner .banner h1 {
		flex: 1 1 280px;
	}
}

/* Series 3 Land Rover in the homepage "Available & In Stock" box */
body.modern.home .availableNow .cameo {
	width: 124px;
	height: auto;
	top: -6px;
	right: 6px;
}

/* Page titles in a glossy red pill, matching the menu bar */
body.inner .banner h1 {
	flex: 0 1 auto;
	max-width: 520px;
}
body.inner .banner h1 span {
	display: inline-block;
	padding: 14px 30px 12px 30px;
	border-radius: 34px;
	background: linear-gradient(180deg, #e34a4a 0%, var(--red) 50%, var(--red-dark) 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 10px 24px rgba(204,51,51,0.28);
	color: #fff;
	font-size: 32px;
	line-height: 1.15;
	text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
@media (max-width: 860px) {
	body.inner .banner h1 span {
		font-size: 24px;
		padding: 12px 22px 10px 22px;
		border-radius: 26px;
	}
}
@media (min-width: 861px) {
	body.inner .banner h1 {
		flex: 0 1 460px;
		max-width: 460px;
	}
	body.inner .banner img {
		max-width: calc(100% - 500px);
	}
}
/* Phones: keep the single content column to the screen width (wide tables scroll inside it) */
@media (max-width: 860px) {
	body.inner .pageLayout.hasSide {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* Page title pills: royal blue, text centred */
body.inner .banner h1 {
	text-align: center;
}
body.inner .banner h1 span {
	background: linear-gradient(180deg, #3a28d8 0%, var(--royal) 50%, var(--royal-dark) 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 10px 24px rgba(24,0,173,0.28);
	text-align: center;
}
@media (min-width: 861px) {
	body.inner .banner h1 {
		flex: 0 1 510px;
		max-width: 510px;
	}
	body.inner .banner img {
		max-width: calc(100% - 550px);
	}
}
/* Pill lines up with the logo; the text inside it stays centred */
@media (min-width: 861px) {
	body.inner .banner h1 {
		text-align: left;
	}
}
/* New Iveco picture on the Van Springs range card */
body.inner ul.rangeMenu li.iveco a:link,
body.inner ul.rangeMenu li.iveco a:visited {
	background-image: url(images/van-springs/iveco-card.webp);
	background-size: 170px auto;
	background-position: center 26px;
}
/* New Mercedes picture on the Van Springs range card */
body.inner ul.rangeMenu li.mercedes a:link,
body.inner ul.rangeMenu li.mercedes a:visited {
	background-image: url(images/van-springs/mercedes-card.jpg);
	background-size: 175px auto;
	background-position: center 26px;
}
/* Eight menu items: tighten the red menu on smaller laptop screens so it stays on one line */
@media (min-width: 861px) and (max-width: 1180px) {
	.header ul.productMenu > li > a:link,
	.header ul.productMenu > li > a:visited {
		font-size: 1.35em;
		padding-left: 8px;
		padding-right: 8px;
	}
	.header ul.productMenu li.hasDropdown > a:after {
		margin-left: 5px;
	}
}
@media (min-width: 861px) and (max-width: 1000px) {
	.header ul.productMenu > li > a:link,
	.header ul.productMenu > li > a:visited {
		font-size: 1.2em;
		padding-left: 5px;
		padding-right: 5px;
		letter-spacing: 0;
	}
}
/* Full photographs in a page banner fill the rounded card edge to edge */
body.inner .banner img.bannerPhoto {
	padding: 0;
	background: none;
	width: 520px;
	height: 260px;
	max-height: none;
	object-fit: cover;
	object-position: center 65%;
}
@media (max-width: 860px) {
	body.inner .banner img.bannerPhoto {
		width: 100%;
		height: 220px;
	}
}
/* Original Equipment banner photo: keep the buses in frame */
body.inner .banner img.busPhoto {
	object-position: 50% 50%;
}

/* New MAN picture on the Van Springs range card */
body.inner ul.rangeMenu li.man a:link,
body.inner ul.rangeMenu li.man a:visited {
	background-image: url(images/van-springs/man-card.webp);
	background-size: 165px auto;
	background-position: center 22px;
}
/* New Ford Transit picture on the Van Springs range card */
body.inner ul.rangeMenu li.ford a:link,
body.inner ul.rangeMenu li.ford a:visited {
	background-image: url(images/van-springs/ford-card.webp);
	background-size: 170px auto;
	background-position: center 22px;
}
/* New Peugeot Boxer picture on the Van Springs range card */
body.inner ul.rangeMenu li.peugeot a:link,
body.inner ul.rangeMenu li.peugeot a:visited {
	background-image: url(images/van-springs/peugeot-card.webp);
	background-size: 170px auto;
	background-position: center 24px;
}
/* New Renault Master picture on the Vauxhall/Renault range card */
body.inner ul.rangeMenu li.vauxhall a:link,
body.inner ul.rangeMenu li.vauxhall a:visited {
	background-image: url(images/van-springs/vauxhall-renault-card.jpg);
	background-size: 175px auto;
	background-position: center 30px;
}
/* Van Manufacturers tiles: pale red with blue writing */
a.brandTile {
	background: linear-gradient(180deg, #fdeaea, #f8d6d6);
	box-shadow: 0 4px 14px rgba(204,51,51,0.10), inset 0 0 0 1px rgba(204,51,51,0.18);
}
a.brandTile:hover {
	background: linear-gradient(180deg, #e34a4a, var(--red-dark));
	box-shadow: 0 12px 26px rgba(204,51,51,0.28);
}
a.brandTile .brandType {
	color: #5a4f9e;
}
a.brandTile:hover .brandName,
a.brandTile:hover .brandType {
	color: #fff;
}
a.brandTile:hover .brandBtn {
	background: #fff;
	color: var(--royal);
	box-shadow: none;
}

/* DIY Up-Rate tile: royal blue with red writing (a brighter red so it reads on blue) */
a.brandTileAlt {
	background: linear-gradient(160deg, var(--royal-light), var(--royal-deep));
	box-shadow: 0 6px 18px rgba(15,0,120,0.25);
}
a.brandTileAlt .brandName,
a.brandTileAlt .brandType {
	color: #ff6b6b;
}
a.brandTileAlt .brandBtn {
	color: #ff6b6b;
	box-shadow: inset 0 0 0 2px #ff6b6b;
}
a.brandTileAlt:hover {
	background: linear-gradient(160deg, var(--royal), var(--royal-deep));
	box-shadow: 0 12px 26px rgba(15,0,120,0.35);
}
a.brandTileAlt:hover .brandName,
a.brandTileAlt:hover .brandType {
	color: #ff8a8a;
}
a.brandTileAlt:hover .brandBtn {
	background: #ff6b6b;
	color: #fff;
}

/* All Van Springs tile stays royal blue with white writing */
a.brandTileAll {
	background: linear-gradient(160deg, var(--royal-light), var(--royal-deep));
	box-shadow: 0 6px 18px rgba(15,0,120,0.25);
}
a.brandTileAll:hover {
	background: linear-gradient(160deg, var(--royal), var(--royal-deep));
}
a.brandTileAll:hover .brandName,
a.brandTileAll:hover .brandType {
	color: #fff;
}a.brandTileAll .brandType {
	color: rgba(255,255,255,0.75);
	opacity: 1;
}
/* DIY Up-Rate tile: white writing, matching the All Van Springs tile */
a.brandTileAlt .brandName,
a.brandTileAlt:hover .brandName {
	color: #fff;
}
a.brandTileAlt .brandType,
a.brandTileAlt:hover .brandType {
	color: rgba(255,255,255,0.75);
}
a.brandTileAlt .brandBtn {
	color: #fff;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,0.85);
}
a.brandTileAlt:hover .brandBtn {
	background: #fff;
	color: var(--royal);
}
/* Van make tiles: deep red, matching the Land Rover panel below, with white writing */
a.brandTile:not(.brandTileAlt):not(.brandTileAll) {
	background: linear-gradient(140deg, #d63c3c, var(--red-dark));
	box-shadow: 0 6px 18px rgba(204,51,51,0.25);
}
a.brandTile:not(.brandTileAlt):not(.brandTileAll) .brandName {
	color: #fff;
}
a.brandTile:not(.brandTileAlt):not(.brandTileAll) .brandType {
	color: rgba(255,255,255,0.78);
}
a.brandTile:not(.brandTileAlt):not(.brandTileAll) .brandBtn {
	color: #fff;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,0.85);
}
a.brandTile:not(.brandTileAlt):not(.brandTileAll):hover {
	background: linear-gradient(140deg, #c43030, #921f1f);
	box-shadow: 0 12px 26px rgba(204,51,51,0.35);
}
a.brandTile:not(.brandTileAlt):not(.brandTileAll):hover .brandBtn {
	background: #fff;
	color: var(--red);
	box-shadow: none;
}
/* All van tiles the same height, with their content centred */
.brandGrid {
	grid-auto-rows: 1fr;
}
a.brandTile {
	justify-content: center;
}
a.brandTile .brandBtn {
	margin-top: 14px;
}
/* Van tiles: shiny outline appears on hover (blue around red tiles, red around blue tiles) */
a.brandTile:not(.brandTileAlt):not(.brandTileAll),
a.brandTile:not(.brandTileAlt):not(.brandTileAll):hover {
	border: solid 2px transparent;
}
a.brandTile:not(.brandTileAlt):not(.brandTileAll) {
	background: linear-gradient(140deg, #d63c3c, var(--red-dark)) border-box;
}
a.brandTile:not(.brandTileAlt):not(.brandTileAll):hover {
	background:
		linear-gradient(140deg, #c43030, #921f1f) padding-box,
		linear-gradient(135deg, #a9a2ff 0%, var(--royal-light) 30%, #7a70ff 50%, var(--royal) 75%, #a9a2ff 100%) border-box;
}
a.brandTileAlt,
a.brandTileAll,
a.brandTileAlt:hover,
a.brandTileAll:hover {
	border: solid 2px transparent;
}
a.brandTileAlt,
a.brandTileAll {
	background: linear-gradient(160deg, var(--royal-light), var(--royal-deep)) border-box;
}
a.brandTileAlt:hover,
a.brandTileAll:hover {
	background:
		linear-gradient(160deg, var(--royal), var(--royal-deep)) padding-box,
		linear-gradient(135deg, #ffb3b3 0%, #e34a4a 30%, #ff8a8a 50%, var(--red) 75%, #ffb3b3 100%) border-box;
}
/* end van tile hover outlines */
/* Our Products section: washed-out red, like the pale blue of the sections above and below */
#products.section {
	background: linear-gradient(180deg, #fdf3f3, #f9e3e3);
	border-top: solid 1px rgba(204,51,51,0.10);
	border-bottom: solid 1px rgba(204,51,51,0.10);
}
/* Our Products section: faint red flag shapes, like the header */
#products.section {
	background: #fff url(images/union-jack-back-red.png) no-repeat center center / cover;
}
/* Our Products: flag stretched across the full width of the section */
#products.section {
	background: #fff url(images/union-jack-flag-red.png) no-repeat center center / 100% 100%;
}
/* Red menu pill: a little wider, with more room inside so the first and last items sit away from the rounded ends */
@media (min-width: 861px) {
	.header .productMenuHolder {
		left: -14px;
		right: -14px;
		padding-left: 22px;
		padding-right: 22px;
	}
}
/* Red menu: share the spare room evenly (including the ends) so the gaps between items are a little smaller */
@media (min-width: 861px) {
	.header ul.productMenu {
		justify-content: space-evenly;
	}
	.header .productMenuHolder {
		padding-left: 10px;
		padding-right: 10px;
	}
}
/* Six menu items fit at normal size on smaller laptops too (undoes the eight-item squeeze) */
@media (min-width: 861px) and (max-width: 1180px) {
	.header ul.productMenu > li > a:link,
	.header ul.productMenu > li > a:visited {
		font-size: 1.5em;
		padding-left: 10px;
		padding-right: 10px;
		letter-spacing: 0.02em;
	}
}
/* Inner pages have no "Available & In Stock" box, so the buttons and contact details
   move down to sit level with the logo in the open space */
@media (min-width: 861px) {
	body.inner .topMenu ul {
		margin-top: 58px;
	}
	body.inner .header h3.emailUs {
		top: 100px;
	}
	body.inner .header h3.callUs {
		top: 140px;
	}
}
/* Inner pages: the two blue buttons stay at the top; only Email / Call move down */
@media (min-width: 861px) {
	body.inner .topMenu ul {
		margin-top: 4px;
	}
}

/* Product tables: red header bar (matches the red menu) */
body.inner table.productData th {
	background: linear-gradient(180deg, #e34a4a 0%, var(--red) 50%, var(--red-dark) 100%);
}
/* Buy Now buttons: royal blue, turning red on hover */
body.inner table.productData td.buyNow a:link,
body.inner table.productData td.buyNow a:visited {
	background: linear-gradient(var(--royal-light), var(--royal));
	box-shadow: 0 3px 10px rgba(24,0,173,0.25);
}
body.inner table.productData td.buyNow a:hover {
	background: linear-gradient(#d63c3c, var(--red-dark));
	box-shadow: 0 3px 10px rgba(204,51,51,0.3);
}
/* Product tables: header text centred */
body.inner table.productData th {
	text-align: center;
	vertical-align: middle;
}
/* Product tables: header titles always stay on one line, whatever the length of the descriptions */
body.inner table.productData th {
	white-space: nowrap;
}
/* Banner picture whose left-hand vehicle sits right against the left edge of the white card (DIY Up-Rate Kits) */
body.inner .banner img.flushLeft {
	padding-left: 0;
}
/* Ford Ranger picture on the Pick Up Springs range card */
body.inner ul.rangeMenu li.fordPickUp a:link,
body.inner ul.rangeMenu li.fordPickUp a:visited {
	background-image: url(images/pick-up-springs/ford-ranger-card.webp);
	background-size: 175px auto;
	background-position: center 58px;
}
/* Mitsubishi L200 picture on the Pick Up Springs range card */
body.inner ul.rangeMenu li.mistubishi a:link,
body.inner ul.rangeMenu li.mistubishi a:visited {
	background-image: url(images/pick-up-springs/mitsubishi-l200-card.jpg);
	background-size: 170px auto;
	background-position: center 50px;
}
/* Toyota Hilux picture on the Pick Up Springs range card */
body.inner ul.rangeMenu li.toyota a:link,
body.inner ul.rangeMenu li.toyota a:visited {
	background-image: url(images/pick-up-springs/toyota-hilux-card.jpg);
	background-size: 170px auto;
	background-position: center 48px;
}
/* VW Amarok picture on the Pick Up Springs range card */
body.inner ul.rangeMenu li.volkswagenPickUp a:link,
body.inner ul.rangeMenu li.volkswagenPickUp a:visited {
	background-image: url(images/pick-up-springs/vw-amarok-card.jpg);
	background-size: 165px auto;
	background-position: center 46px;
}
/* Nissan Navara picture on the Pick Up Springs range card */
body.inner ul.rangeMenu li.nissan a:link,
body.inner ul.rangeMenu li.nissan a:visited {
	background-image: url(images/pick-up-springs/nissan-navara-card.webp);
	background-size: 165px auto;
	background-position: center 48px;
}
/* Pictures placed directly in the page content sit centred */
body.inner .pageContent > img:not(.imageRight) {
	margin-left: auto;
	margin-right: auto;
}
/* Page title with a button underneath (Land Rover page "Buy Now") */
html {
	scroll-behavior: smooth;
}
body.inner .banner .bannerTitle {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	flex: 0 1 510px;
	max-width: 510px;
}
body.inner .banner .bannerTitle h1 {
	flex: none;
	max-width: 100%;
}
a.btnBuyNow:link,
a.btnBuyNow:visited {
	color: #fff;
	background: linear-gradient(180deg, #e34a4a 0%, var(--red) 50%, var(--red-dark) 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 20px rgba(204,51,51,0.3);
	padding: 13px 34px;
	font-size: 16px;
}
a.btnBuyNow:hover {
	background: linear-gradient(180deg, #d63c3c, #921f1f);
}
/* Leave a little room above the section when the page scrolls to it */
#buy-now {
	scroll-margin-top: 24px;
}
@media (max-width: 860px) {
	body.inner .banner .bannerTitle {
		align-items: center;
		flex: 1 1 100%;
		max-width: none;
	}
}
/* Buy Now button centred under the title pill */
body.inner .banner .bannerTitle {
	align-items: center;
}
/* Homepage-style product cards inside an inner page (Fleet Solutions "Our ranges") */
body.inner .productGrid {
	margin: 24px 0 10px 0;
	gap: 20px;
}
body.inner a.productCard {
	width: calc(25% - 15px);
}
body.inner a.productCard:link,
body.inner a.productCard:visited {
	text-decoration: none;
}
@media (max-width: 960px) {
	body.inner a.productCard {
		width: calc(50% - 10px);
	}
}
/* =====================================================================
   PHONES ONLY (860px and narrower) - nothing below affects desktop
   ===================================================================== */

/* Menu button and section arrows are hidden on desktop */
.mobileMenuToggle,
.subToggle {
	display: none;
}

@media (max-width: 860px) {

	/* ---------- Menu: one red "Menu" button that opens a full list ---------- */
	body.modern .header .mobileMenuToggle {
		order: 6;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		width: 100%;
		margin-top: 14px;
		padding: 13px 20px;
		border: 0;
		border-radius: 999px;
		background: linear-gradient(180deg, #e34a4a 0%, var(--red) 50%, var(--red-dark) 100%);
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 6px 16px rgba(204,51,51,0.25);
		color: #fff;
		font-family: var(--brand-bold);
		font-size: 17px;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		cursor: pointer;
	}
	.mobileMenuToggle .burger,
	.mobileMenuToggle .burger:before,
	.mobileMenuToggle .burger:after {
		display: block;
		width: 20px;
		height: 2px;
		border-radius: 2px;
		background: #fff;
		transition: transform 0.25s ease, background 0.25s ease;
	}
	.mobileMenuToggle .burger:before,
	.mobileMenuToggle .burger:after {
		content: "";
		position: absolute;
		left: 0;
	}
	.mobileMenuToggle .burger:before { top: -6px; }
	.mobileMenuToggle .burger:after { top: 6px; }
	.menuOpen .mobileMenuToggle .burger { background: transparent; }
	.menuOpen .mobileMenuToggle .burger:before { transform: translateY(6px) rotate(45deg); }
	.menuOpen .mobileMenuToggle .burger:after { transform: translateY(-6px) rotate(-45deg); }

	body.modern .header .productMenuHolder {
		order: 7;
		display: none;
		width: 100%;
		box-sizing: border-box;
		margin-top: 8px;
		padding: 8px;
		border-radius: 20px;
	}
	body.modern .header.menuOpen .productMenuHolder {
		display: block;
	}
	body.modern .header ul.productMenu {
		flex-direction: column;
		align-items: stretch;
		flex-wrap: nowrap;
	}
	body.modern .header ul.productMenu > li {
		margin: 0;
		border-radius: 14px;
	}
	body.modern .header ul.productMenu > li + li {
		border-top: solid 1px rgba(255,255,255,0.15);
	}
	body.modern .header ul.productMenu > li > a:link,
	body.modern .header ul.productMenu > li > a:visited {
		font-size: 17px;
		text-align: left;
		padding: 14px 56px 14px 16px;
		border-radius: 14px;
	}
	/* Arrow button to open a section's list of makes */
	body.modern .header .subToggle {
		display: block;
		position: absolute;
		top: 4px;
		right: 4px;
		width: 44px;
		height: 44px;
		border: 0;
		border-radius: 12px;
		background: rgba(255,255,255,0.12);
		cursor: pointer;
	}
	body.modern .header .subToggle:after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 8px;
		height: 8px;
		margin: -6px 0 0 -4px;
		border-right: solid 2px #fff;
		border-bottom: solid 2px #fff;
		transform: rotate(45deg);
		transition: transform 0.25s ease, margin 0.25s ease;
	}
	body.modern .header li.subOpen > .subToggle:after {
		transform: rotate(225deg);
		margin-top: -2px;
	}
	body.modern .header li.subOpen > ul.dropdown {
		display: block;
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		margin: 0 8px 10px 8px;
		padding: 6px;
		border-radius: 14px;
		background: rgba(255,255,255,0.96);
		box-shadow: none;
	}
	body.modern .header li.subOpen > ul.dropdown:before {
		display: none;
	}
	body.modern .header ul.productMenu ul.dropdown a:link,
	body.modern .header ul.productMenu ul.dropdown a:visited {
		font-size: 16px;
		padding: 11px 14px;
	}

	/* ---------- Product tables: one card per part ---------- */
	body.inner table.productData,
	body.inner table.productData tbody,
	body.inner table.productData tr,
	body.inner table.productData td {
		display: block;
		width: auto;
	}
	body.inner table.productData {
		overflow: hidden;
	}
	body.inner table.productData tr:first-child:has(th) {
		display: none;
	}
	body.inner table.productData th {
		display: none;
	}
	body.inner table.productData tr {
		padding: 14px 16px 16px 16px;
		border-bottom: solid 1px rgba(24,0,173,0.08);
	}
	body.inner table.productData tr:last-child {
		border-bottom: 0;
	}
	body.inner table.productData tr:has(td.sectionHead) {
		padding: 0;
	}
	body.inner table.productData td {
		padding: 0;
		border: 0;
		white-space: normal;
	}
	body.inner table.productData tr:hover td {
		background: none;
	}
	body.inner table.productData td:first-child {
		font-size: 16px;
		margin-bottom: 4px;
	}
	body.inner table.productData td.sectionHead,
	body.inner table.productData tr:hover td.sectionHead {
		padding: 12px 16px 10px 16px;
		margin: 0;
	}
	body.inner table.productData td.buyNow {
		margin-top: 12px;
		text-align: left;
	}
	body.inner table.productData td.buyNow a:link,
	body.inner table.productData td.buyNow a:visited {
		display: block;
		text-align: center;
		padding: 12px 18px;
		font-size: 14px;
	}
	/* Wide tables (Heritage, Trailer): show each column's heading as a small label */
	body.inner table.wideTable td[data-label]:not(.buyNow) {
		margin-bottom: 4px;
	}
	body.inner table.wideTable td[data-label]:not(.buyNow):not(:empty):before {
		content: attr(data-label) ": ";
		font-family: var(--brand-bold);
		font-size: 12px;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--royal);
	}
	body.inner table.wideTable td:first-child {
		font-family: var(--sans);
		font-size: 15px;
		color: var(--text);
	}
}
/* Phones only: homepage "Leaf Spring Solutions" headline, text and buttons centred */
@media (max-width: 860px) {
	.hero .heroText {
		text-align: center;
	}
	.hero p {
		margin-left: auto;
		margin-right: auto;
	}
	.hero .heroButtons {
		justify-content: center;
	}
}
/* Phones only: stop the page scrolling sideways */
@media (max-width: 860px) {
	/* Old decorative element beside "Leaf Spring Solutions" stuck out past the screen edge */
	.header h3.specialist span {
		display: none;
	}
	/* Contact form fits the screen */
	body.inner table.contactTable {
		table-layout: fixed;
		width: 100%;
	}
	body.inner table.contactTable th {
		width: 84px;
		padding-right: 10px;
	}
	body.inner .g-recaptcha {
		transform: scale(0.85);
		transform-origin: left top;
	}
	/* Safety net: nothing can widen the page beyond the screen */
	html,
	body.modern {
		overflow-x: clip;
	}
}
/* Inner page titles: plain royal blue text (no pill box) */
body.inner .banner h1 span {
	display: inline;
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--royal);
	text-shadow: none;
	font-size: 40px;
	line-height: 1.1;
}
@media (min-width: 861px) {
	body.inner .banner h1 {
		text-align: left;
	}
}
@media (max-width: 860px) {
	body.inner .banner h1 span {
		font-size: 30px;
		padding: 0;
	}
}
/* Desktop: Buy Now button lines up with the left-aligned page title */
@media (min-width: 861px) {
	body.inner .banner .bannerTitle {
		align-items: flex-start;
	}
}
/* Inner page titles: centred, with a shiny royal-blue underline */
body.inner .banner h1,
body.inner .banner .bannerTitle h1 {
	text-align: center;
}
body.inner .banner h1 {
	flex: 0 1 510px;
	max-width: 510px;
}
body.inner .banner .bannerTitle {
	align-items: center;
}
body.inner .banner h1:after {
	content: "";
	display: block;
	width: 140px;
	height: 6px;
	margin: 18px auto 0 auto;
	border-radius: 6px;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 55%),
		linear-gradient(90deg, var(--royal-dark) 0%, #5b4dff 35%, #8f86ff 50%, #5b4dff 65%, var(--royal-dark) 100%);
	box-shadow: 0 3px 10px rgba(24,0,173,0.35);
}
@media (min-width: 861px) {
	body.inner .banner h1,
	body.inner .banner .bannerTitle h1 {
		text-align: center;
	}
	body.inner .banner .bannerTitle {
		align-items: center;
	}
}
@media (max-width: 860px) {
	body.inner .banner h1 {
		flex: 1 1 100%;
		max-width: none;
	}
	body.inner .banner h1:after {
		width: 110px;
		height: 5px;
		margin-top: 14px;
	}
}
/* Pages with no banner picture (Contact, How to Buy, Terms, Thank You): title centred across the full width */
body.inner .banner.shallow h1 {
	flex: 1 1 100%;
	max-width: none;
}
/* Inner page title underline: same red-to-blue style as the other headings */
body.inner .banner h1:after {
	width: 56px;
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--red), var(--royal));
	box-shadow: none;
}
@media (max-width: 860px) {
	body.inner .banner h1:after {
		width: 56px;
		height: 4px;
	}
}
/* Homepage Land Rover panel grows taller on wide screens, so the whole vehicle (roof to wheels) always fits */
@media (min-width: 861px) {
	.split {
		min-height: max(380px, 28vw);
	}
}
@media (max-width: 860px) {
	.splitImage {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}
}
/* DIY Up-Rate Kits card picture on the Van Springs page */
body.inner ul.rangeMenu li.diyuprate a:link,
body.inner ul.rangeMenu li.diyuprate a:visited {
	background-image: url(images/van-springs/diy-kit-card.jpg);
	background-size: 185px auto;
	background-position: center 34px;
}
/* Pick Up Springs banner photo: keep the Raptor centred */
body.inner .banner img.raptorPhoto {
	object-position: 30% 50%;
}
/* ---------- Cookie notice ---------- */
.cookieBanner {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 1000;
	display: flex;
	justify-content: center;
	pointer-events: none;
}
.cookieBanner[hidden] {
	display: none;
}
.cookieInner {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 18px 28px;
	max-width: 1100px;
	width: 100%;
	box-sizing: border-box;
	padding: 18px 24px;
	border-radius: 18px;
	border-top: solid 4px var(--red);
	background: linear-gradient(140deg, var(--royal), var(--royal-deep));
	box-shadow: 0 16px 40px rgba(15,0,120,0.35);
	color: #fff;
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.55;
}
.cookieInner p {
	margin: 0;
	flex: 1 1 auto;
}
.cookieInner a:link,
.cookieInner a:visited {
	color: #fff;
	text-decoration: underline;
}
.cookieButtons {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}
.cookieBtn {
	font-family: var(--brand-bold);
	font-size: 14px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 11px 24px;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.cookieAccept {
	color: #fff;
	background: linear-gradient(180deg, #e34a4a, var(--red-dark));
	box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.cookieAccept:hover {
	background: linear-gradient(180deg, #d63c3c, #921f1f);
}
.cookieReject {
	color: #fff;
	background: transparent;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,0.85);
}
.cookieReject:hover {
	background: #fff;
	color: var(--royal);
}
@media (max-width: 860px) {
	.cookieBanner {
		left: 10px;
		right: 10px;
		bottom: 10px;
	}
	.cookieInner {
		flex-direction: column;
		align-items: stretch;
		padding: 16px 18px;
		font-size: 14px;
	}
	.cookieButtons .cookieBtn {
		flex: 1 1 0;
	}
}

/* Footer: privacy and cookie settings links */
.siteFooter .footerBottom a.cookieSettingsLink:link,
.siteFooter .footerBottom a.cookieSettingsLink:visited {
	white-space: nowrap;
}

/* ---------- Privacy policy page ---------- */
body.inner .policyText .policyUpdated {
	font-size: 14px;
	color: #8a88a0;
}
body.inner .cookieTableWrap {
	overflow-x: auto;
	margin: 10px 0 24px 0;
}
body.inner table.cookieTable {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 16px;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.5;
	box-shadow: 0 6px 20px rgba(15,0,120,0.08), inset 0 0 0 1px rgba(24,0,173,0.08);
}
body.inner table.cookieTable th {
	padding: 12px 14px;
	text-align: left;
	color: #fff;
	font-family: var(--brand-bold);
	font-weight: normal;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: linear-gradient(180deg, #e34a4a 0%, var(--red) 50%, var(--red-dark) 100%);
}
body.inner table.cookieTable td {
	padding: 10px 14px;
	vertical-align: top;
	border-bottom: solid 1px rgba(24,0,173,0.07);
}
body.inner table.cookieTable td:first-child {
	font-family: var(--brand-bold);
	color: var(--royal);
	white-space: nowrap;
}
body.inner table.cookieTable td.cookieGroup {
	background: var(--tint);
	font-family: var(--brand-bold);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--red);
}

/* Contact form privacy note */
body.inner p.formPrivacy {
	font-size: 13px;
	color: #6a6880;
	margin: 6px 0 0 0;
}
/* ---------- Homepage benefits strip ---------- */
.benefitsStrip {
	background:
		repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 46px, rgba(255,255,255,0) 46px 92px),
		linear-gradient(140deg, var(--royal), var(--royal-deep));
	border-top: solid 4px var(--red);
	border-bottom: solid 4px var(--red);
	color: #fff;
}
.benefitsInner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px 30px;
	padding-top: 14px;
	padding-bottom: 6px;
}
.benefit {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--brand-bold);
	font-size: 19px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}
.benefitIcon {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	padding: 9px;
	border-radius: 50%;
	background: rgba(255,255,255,0.12);
	box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35);
	fill: none;
	stroke: #fff;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
@media (max-width: 1000px) {
	.benefit {
		font-size: 16px;
	}
}
@media (max-width: 860px) {
	.benefitsInner {
		flex-direction: column;
		align-items: flex-start;
		width: fit-content;
		gap: 12px;
		padding-top: 14px;
		padding-bottom: 8px;
	}
	.benefit {
		font-size: 16px;
		white-space: normal;
	}
	.benefitIcon {
		width: 28px;
		height: 28px;
		padding: 8px;
	}
}
/* Footer opening hours */
.siteFooter .footerCol p.footerHours {
	margin-top: 14px;
}
.siteFooter .footerCol p.footerHours strong {
	font-family: var(--brand-bold);
	font-weight: normal;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 13px;
}
/* Product pages: note explaining that Buy Now goes to our authorised stockist */
body.inner p.stockistNote {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 6px 0 16px 0;
	padding: 12px 16px;
	border-radius: 14px;
	background: var(--tint);
	box-shadow: inset 4px 0 0 var(--royal);
	font-size: 14px;
	line-height: 1.55;
	color: var(--text);
}
body.inner p.stockistNote .stockistIcon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--royal);
	color: #fff;
	font-family: Georgia, serif;
	font-style: italic;
	font-weight: bold;
	font-size: 14px;
	line-height: 22px;
	text-align: center;
}
/* Contact form: message shown when an enquiry couldn't be sent */
body.inner p.formError {
	margin: 0 0 18px 0;
	padding: 12px 16px;
	border-radius: 12px;
	background: #fdecec;
	box-shadow: inset 4px 0 0 var(--red);
	color: #8f1f1f;
	font-size: 15px;
}
/* =====================================================================
   PHONE LAYOUT TWEAKS (860px and narrower only)
   ===================================================================== */

.subMenuToggle {
	display: none;
}

@media (max-width: 860px) {

	/* ---- More compact header ---- */
	body.modern .header .wrapper {
		padding: 8px 16px 12px 16px;
	}
	body.modern .logo {
		width: 180px;
		height: 82px;
		margin-top: 6px;
	}
	body.modern .header h3.specialist {
		font-size: 1.75em;
		margin: 0 0 6px 0;
	}
	body.modern .header h3.emailUs,
	body.modern .header h3.callUs {
		font-size: 1.45em;
		padding: 1px 0;
	}
	body.modern .header .mobileMenuToggle {
		margin-top: 10px;
		padding: 11px 20px;
	}

	/* ---- Homepage: vehicles picture above the headline ---- */
	.hero .heroImage {
		order: -1;
	}
	.heroInner {
		padding-top: 22px;
		gap: 18px;
	}

	/* ---- Homepage: shorter Van Manufacturers tiles (name and View on one line) ---- */
	.brandGrid {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		gap: 10px;
	}
	a.brandTile {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		text-align: left;
		padding: 12px 14px 12px 20px;
		border-radius: 14px;
	}
	a.brandTile .brandName {
		min-height: 0;
		font-size: 17px;
	}
	a.brandTile .brandType {
		margin: 0 auto 0 12px;
		font-size: 11px;
	}
	a.brandTile .brandBtn {
		margin-top: 0;
		padding: 7px 18px;
		font-size: 12px;
	}

	/* ---- Product pages: side menu moves to the top and folds up ---- */
	body.inner .pageLayout.hasSide {
		display: flex;
		flex-direction: column;
	}
	body.inner .pageLayout.hasSide .pageContent {
		order: 1;
		min-width: 0;
	}
	body.inner .pageSide {
		display: contents;
	}
	body.inner .pageSide .subMenu {
		order: 0;
		margin: 0 0 22px 0;
	}
	body.inner .pageSide .sideBar {
		order: 2;
		margin-top: 28px;
	}
	body.inner .subMenu .subMenuToggle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 14px 18px;
		border: 0;
		background: linear-gradient(180deg, #e34a4a, var(--red) 50%, var(--red-dark));
		color: #fff;
		font-family: var(--brand-bold);
		font-size: 15px;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		text-align: left;
		cursor: pointer;
	}
	body.inner .subMenu .subMenuToggle span {
		width: 9px;
		height: 9px;
		margin-top: -5px;
		border-right: solid 2px #fff;
		border-bottom: solid 2px #fff;
		transform: rotate(45deg);
		transition: transform 0.25s ease, margin 0.25s ease;
	}
	body.inner .subMenu.subMenuOpen .subMenuToggle span {
		transform: rotate(225deg);
		margin-top: 4px;
	}
	body.inner .subMenu > h3,
	body.inner .subMenu > ul {
		display: none;
	}
	body.inner .subMenu.subMenuOpen > ul {
		display: block;
	}

	/* ---- Product tables: hide cells that have nothing in them ---- */
	body.inner table.productData td.emptyCell {
		display: none;
	}
}@media (max-width: 860px) {
	body.inner .subMenu.subMenuOpen > h3 {
		display: block;
	}
	body.inner .subMenu.subMenuOpen > h3 a:link,
	body.inner .subMenu.subMenuOpen > h3 a:visited {
		background: rgba(24,0,173,0.06);
		color: var(--royal);
		font-size: 14px;
	}
}@media (max-width: 860px) {
	body.inner .pageLayout.hasSide {
		align-items: stretch;
	}
}
/* Small print under the homepage benefits strip */
.benefitsStrip p.benefitsNote {
	margin: 0 auto;
	padding-top: 0;
	padding-bottom: 8px;
	text-align: center;
	font-size: 10.5px;
	line-height: 1.4;
	color: rgba(255,255,255,0.75);
}
.benefitsStrip p.benefitsNote a:link,
.benefitsStrip p.benefitsNote a:visited {
	color: #fff;
	text-decoration: underline;
}
@media (max-width: 860px) {
	.benefitsStrip p.benefitsNote {
		text-align: left;
		padding-left: 20px;
		padding-right: 20px;
	}
}
/* FAQ page - questions open and close when clicked */
.faqPage .faqIntro {
	font-size: 1.05em;
	margin-bottom: 10px;
}
.faqList {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 26px;
}
.faqItem {
	background: #fff;
	border: 1px solid #dcdcf0;
	border-left: 4px solid var(--red);
	border-radius: 12px;
	box-shadow: 0 3px 10px rgba(24,0,173,0.06);
	overflow: hidden;
}
.faqItem summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: 15px 52px 15px 18px;
	font-family: var(--brand-bold);
	font-size: 16px;
	color: var(--royal);
	line-height: 1.35;
}
.faqItem summary::-webkit-details-marker { display: none; }
.faqItem summary::after {
	content: "+";
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--royal);
	color: #fff;
	font-family: Arial, sans-serif;
	font-weight: bold;
	font-size: 20px;
	line-height: 26px;
	text-align: center;
	transition: background 0.2s;
}
.faqItem summary:hover { color: var(--red); }
.faqItem summary:hover::after { background: var(--red); }
.faqItem[open] summary::after { content: "\2212"; background: var(--red); }
.faqItem[open] summary { border-bottom: 1px solid #ececf7; }
.faqAnswer {
	padding: 4px 18px 8px;
	line-height: 1.6;
}
.faqAnswer ul {
	margin: 0 0 12px 20px;
	padding: 0;
	list-style: disc;
}
.faqAnswer li {
	margin-bottom: 4px;
}
.faqPage .faqNote {
	font-size: 13px;
	color: #666;
	font-style: italic;
}
@media (max-width: 860px) {
	.faqItem summary {
		font-size: 15px;
		padding: 13px 48px 13px 14px;
	}
	.faqAnswer {
		padding: 2px 14px 6px;
	}
}
/* Buttons inside page text keep white lettering (inner-page link colours would override it) */
body.inner .pageContent a.btn.btnPrimary:link,
body.inner .pageContent a.btn.btnPrimary:visited,
body.inner .pageContent a.btn.btnPrimary:hover {
	color: #fff;
	text-decoration: none;
}
/* Phones: the three blue top buttons sit on one line */
@media (max-width: 860px) {
	body.modern .header .topMenu ul {
		gap: 6px;
		flex-wrap: nowrap;
	}
	body.modern .header .topMenu ul li {
		margin-left: 0;
	}
	body.modern .header .topMenu ul a:link,
	body.modern .header .topMenu ul a:visited {
		white-space: nowrap;
		font-size: 11.5px;
		padding: 7px 11px;
	}
}
@media (max-width: 359px) {
	body.modern .header .topMenu ul a:link,
	body.modern .header .topMenu ul a:visited {
		font-size: 10.5px;
		padding: 6px 8px;
	}
}
/* Page content always sits in a lower layer than the header, so the
   Van Springs / Pick Up Springs dropdowns open over the text, not under it */
body.modern .pageLayout {
	position: relative;
	z-index: 1;
}
/* Phones: the Van Springs / Pick Up Springs lists open and close ONLY with the
   arrow button. Stops the desktop hover/focus dropdown taking over after a tap
   (it slid off-screen with white-on-white links). */
@media (max-width: 860px) {
	body.modern .header ul.productMenu li.hasDropdown > ul.dropdown {
		display: none !important;
	}
	body.modern .header ul.productMenu li.hasDropdown.subOpen > ul.dropdown {
		display: block !important;
		position: static !important;
		left: auto !important;
		top: auto !important;
		transform: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		width: auto !important;
		min-width: 0 !important;
	}
	body.modern .header ul.productMenu ul.dropdown li:not(.viewAll) a:link,
	body.modern .header ul.productMenu ul.dropdown li:not(.viewAll) a:visited {
		color: var(--royal) !important;
	}
	body.modern .header ul.productMenu ul.dropdown li.viewAll a:link,
	body.modern .header ul.productMenu ul.dropdown li.viewAll a:visited {
		color: #fff !important;
	}
}