/* ==========================================================================
   FleetPoint — 2026 design, v2
   Rebuilt against the approved mockup with colours sampled from it directly:
   navy badge #003c64 · red #960000 · star crimson #a91313 · heading #383838
   Content is boxed to the same 1200px container on every page, homepage included.
   ========================================================================== */

/* ------------------------------------------------------------ fonts -- */
/* Poppins, self-hosted — the rounded geometric face the mockup uses.     */

@font-face {
	font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
	src: url('../fonts/poppins-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
	src: url('../fonts/poppins-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
	src: url('../fonts/poppins-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
	src: url('../fonts/poppins-700.woff2') format('woff2');
}

:root {
	--fp-navy:      #004aad;   /* logo FLEET / banner blue */
	--fp-badge:     #003c64;   /* category chips on card images */
	--fp-red:       #960000;   /* buttons, dates, See More, toolbox */
	--fp-red-dark:  #7a0000;
	--fp-star:      #a91313;   /* review stars */
	--fp-grey:      #eeeeee;   /* section bands, grey nav bar */
	--fp-grey-2:    #f7f7f7;
	--fp-line:      #dcdcdc;
	--fp-ink:       #202020;
	--fp-heading:   #383838;   /* section headings */
	--fp-muted:     #6b6b6b;

	--fp-wrap:      1200px;
	/* Width of every coloured band (nav bar, toolbox, grey callouts). Matches the
	   content column exactly — 1200px container minus its 20px gutters — so no
	   background ever runs wider than the hero or the card grids. */
	--fp-band:      calc(1200px - 40px);
	--fp-gap:       24px;

	--fp-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
	           Arial, sans-serif;
}

/* --------------------------------------------------------------- base -- */

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

body {
	margin: 0;
	font-family: var(--fp-font);
	font-size: 15px;
	line-height: 1.55;
	color: var(--fp-ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--fp-red); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.25; font-weight: 600; }

.fp-wrap {
	max-width: var(--fp-wrap);
	margin: 0 auto;
	padding: 0 20px;
	width: 100%;
}

/*
 * The page sheet.
 *
 * Wraps the header, main content AND the footer, casting a soft shadow down its left
 * and right edges so the whole page reads as one raised column. Sized to the same
 * 1200px container as everything else, so the bands inside are unaffected.
 */
.fp-sheet {
	max-width: var(--fp-wrap);
	margin: 0 auto;
	background: #fff;
	box-shadow:
		-14px 0 22px -14px rgba(0, 0, 0, .38),
		 14px 0 22px -14px rgba(0, 0, 0, .38);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.fp-skip {
	position: absolute; left: -9999px;
	background: var(--fp-red); color: #fff;
	padding: 12px 18px; z-index: 999;
}
.fp-skip:focus { left: 8px; top: 8px; }

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

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

.fp-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	padding-block: 18px;
	/*
	 * The header holds its height with or without a banner.
	 *
	 * The banner is the tallest thing in this row, so with no advertiser booked the bar
	 * collapsed from 180px to 107px and the logo rode up 37px with it — the masthead
	 * changed shape depending on whether a slot had been sold, which is the wrong thing
	 * to let an advert decide. Reserving the height keeps the logo where it sits today
	 * and gives a newly booked banner somewhere to land without the page jumping.
	 *
	 * Desktop only: on a phone the banner is on its own row underneath, so there is
	 * nothing to reserve and 180px of empty masthead would be absurd.
	 */
	min-height: 180px;
}

@media (max-width: 1199px) {
	.fp-topbar__inner { min-height: 0; }
}

/* Big, commanding logo — the mockup gives it real presence. Nudged down off the top
   of the row so it sits level with the middle of the banner beside it. */
.fp-logo { padding-top: 10px; }
.fp-logo img, .fp-logo .custom-logo { width: 320px; max-height: none; height: auto; }

.fp-logo__text {
	font-size: 44px; font-weight: 700; letter-spacing: -.01em;
	color: var(--fp-ink); text-decoration: none; text-transform: uppercase;
}
.fp-logo__text strong { color: var(--fp-red); }

/* Banner: wide clean leaderboard, as designed. 760px takes up the slack beside the
   logo without going past the artwork's own 1000px, so it never has to upscale. */
.fp-banner { flex: 0 1 760px; }
.fp-topacct { display: none; }
.fp-navlogo { display: none; }
.fp-btn.fp-btn--dash { display: none; }
.fp-banner__img { width: 100%; height: auto; border-radius: 6px; }

/*
 * The drawer's two section labels are injected into the nav by JS at page load, so they
 * are in the markup on a 27in monitor as well. Hidden by default and turned on only
 * inside the drawer — without this the "Key categories" button sat in the desktop nav
 * bar and pushed every item 40px to the right.
 */
.fp-navgroup,
.fp-navlabel { display: none; }

/* mobile menu button */
.fp-navtoggle {
	display: none;
	background: var(--fp-red); border: 0; color: #fff;
	/*
	 * padding: 0 matters. The site-wide button rule sets 11px 26px, and with
	 * box-sizing: border-box a 46px width cannot contain 52px of padding — the browser
	 * clamps the box out to 52px instead. The bars were then laid out from a hardcoded
	 * left: 12px that assumed 46px, leaving 12px of red on one side and 18px on the
	 * other. Hence the icon sitting off-centre.
	 */
	padding: 0;
	width: 46px; height: 40px;
	cursor: pointer; position: relative;
	flex: 0 0 auto;
}
.fp-navtoggle__bars,
.fp-navtoggle__bars::before,
.fp-navtoggle__bars::after {
	position: absolute; left: 12px; width: 22px; height: 2px;
	background: #fff; content: "";
}
/* Centred by measurement rather than by arithmetic, so a change to the button's size
   cannot put the icon off to one side again. */
.fp-navtoggle__bars {
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
}
.fp-navtoggle__bars::before { top: -7px; left: 0; }
.fp-navtoggle__bars::after  { top:  7px; left: 0; }

/* -------------------------------------------------------- topics nav -- */
/* Six bold headings spread across the row. No carets — the mockup has none. */

/* No rule above the topics row — it reads cleaner running straight off the logo. */
.fp-catnav { border-top: 0; }

/*
 * Eight headings now. Measured at 1440px: the labels total 1024px and the row has
 * 1160px, so a 20px gap tipped it 4px over and wrapped "Reviews" onto its own line.
 * 16px of gap and a hair less type give it room without looking cramped.
 */
.fp-catnav__list {
	display: flex; flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 16px;
	margin: 0; padding: 0; list-style: none;
}

.fp-catnav__list > li { position: relative; }

.fp-catnav__list > li > a {
	display: block; padding: 14px 0;
	font-size: 15px; font-weight: 600;
	color: var(--fp-ink); text-decoration: none;
}
.fp-catnav__list > li > a:hover,
.fp-catnav__list > li:hover > a { color: var(--fp-red); }

/* dropdown panels (shared) */
.fp-catnav .sub-menu,
.fp-mainnav .sub-menu {
	position: absolute; top: 100%; left: 0; z-index: 60;
	min-width: 250px; margin: 0; padding: 8px 0;
	list-style: none; background: #fff;
	border: 1px solid var(--fp-line); border-top: 3px solid var(--fp-red);
	box-shadow: 0 12px 28px rgba(0,0,0,.14);
	opacity: 0; visibility: hidden;
	transform: translateY(6px);
	transition: opacity .14s ease, transform .14s ease;
}

.fp-catnav li:hover > .sub-menu,
.fp-catnav li:focus-within > .sub-menu,
.fp-mainnav li:hover > .sub-menu,
.fp-mainnav li:focus-within > .sub-menu,
.fp-catnav li.fp-open > .sub-menu,
.fp-mainnav li.fp-open > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
}

.fp-catnav .sub-menu a,
.fp-mainnav .sub-menu a {
	display: block; padding: 9px 18px;
	font-size: 13.5px; font-weight: 500;
	color: var(--fp-ink); text-decoration: none;
	white-space: nowrap;
}
.fp-catnav .sub-menu a:hover,
.fp-mainnav .sub-menu a:hover { background: var(--fp-grey); color: var(--fp-red); }

/* Caret on the MAIN nav only ("News v" per the mockup); topics row stays clean */
.fp-mainnav .menu-item-has-children > a::after {
	content: ""; display: inline-block; margin-left: 6px;
	border: 4px solid transparent; border-top-color: currentColor;
	transform: translateY(2px);
}

/* ---------------------------------------------------------- main bar -- */
/* Grey strip; red buttons run the FULL height, flush and square.          */

/* Grey lives on the inner band, not the full-width strip, so it stops at the
   content column and the Login button ends level with the hero's right edge. */
.fp-mainbar { background: none; border-top: 0; }

.fp-mainbar__inner {
	display: flex; align-items: stretch; gap: 0;
	min-height: 46px;
	background: var(--fp-grey);
	max-width: var(--fp-band);
	padding-inline: 0;
}

.fp-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px; padding: 0 22px;
	font-size: 14.5px; font-weight: 600;
	color: #fff; background: var(--fp-red);
	text-decoration: none; border-radius: 0;
	align-self: stretch;
}
.fp-btn:hover, .fp-btn:focus { background: var(--fp-red-dark); color: #fff; text-decoration: none; }

.fp-btn--home { padding: 0 16px; }
.fp-btn--home svg { width: 18px; height: 18px; }

/* No divider here. It split the home icon from the red button that used to sit beside
   it; now the grey nav follows, so the hairline had nothing to divide and read as a
   line floating off the edge of the icon. The one between Subscribe and Login stays —
   there it still separates two red buttons. */

.fp-btn--login { margin-left: auto; }

.fp-mainnav { flex: 1 1 auto; display: flex; align-items: stretch; }

.fp-mainnav__list {
	display: flex; flex-wrap: wrap; align-items: stretch;
	/* Tightened twice over: the starred Reviews item is 22px wider than a plain text
	   link, and the search control that follows the toolbox now carries a label. At the
	   original 34px spacing the row overflowed and items dropped to a second line. */
	gap: 0 24px; margin: 0; padding: 0 0 0 18px; list-style: none;
}
.fp-mainnav__list > li { position: relative; display: flex; align-items: center; }
.fp-mainnav__list > li > a {
	display: flex; align-items: center; height: 100%;
	font-size: 14.5px; font-weight: 500;
	color: var(--fp-ink); text-decoration: none;
}
.fp-mainnav__list > li > a:hover { color: var(--fp-red); }

/* ----------------------------------------------------------- toolbox -- */
/* Red-branded strip, red rules top and bottom, red labels + grey subs.    */

.fp-toolbox {
	background: none;
	margin-top: 14px;   /* breathing room between the grey nav bar and the red rule */
}

/* Red rules ride on the band, so they start and stop with the content column. */
.fp-toolbox__inner {
	display: flex; align-items: stretch;
	background: #fff;
	border-top: 2px solid var(--fp-red);
	border-bottom: 2px solid var(--fp-red);
	max-width: var(--fp-band);
	padding-inline: 0;
}

.fp-toolbox__brand {
	display: flex; align-items: center; gap: 10px;
	background: var(--fp-red); color: #fff;
	padding: 9px 20px; flex: 0 0 auto;
}
.fp-toolbox__brand .fp-toolbox__icon { color: #fff; width: 26px; height: 26px; }
.fp-toolbox__brandtext { display: flex; flex-direction: column; line-height: 1.2; }
.fp-toolbox__brandtext strong { font-size: 15px; font-weight: 700; }
.fp-toolbox__brandtext span  { font-size: 11.5px; opacity: .95; }

.fp-toolbox__list {
	display: flex; flex: 1 1 auto;
	margin: 0; padding: 0; list-style: none;
}

.fp-toolbox__item { flex: 1 1 0; display: flex; border-left: 1px solid #444; }
.fp-toolbox__item:first-child { border-left: 0; }
/* Close the bar on the right, as the mockup does — otherwise the red top and bottom
   rules run off with nothing joining them at the Car Tax end. */
.fp-toolbox__item:last-child { border-right: 1px solid #444; }

.fp-toolbox__item > a {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	flex: 1 1 auto; padding: 9px 12px;
	text-decoration: none;
}
.fp-toolbox__item > a:hover { background: #fdf5f5; text-decoration: none; }

.fp-toolbox__icon { width: 24px; height: 24px; flex: 0 0 auto; color: var(--fp-red); }

.fp-toolbox__text { display: flex; flex-direction: column; line-height: 1.2; }
.fp-toolbox__text strong { font-size: 14px; font-weight: 600; color: var(--fp-red); }
.fp-toolbox__text span   { font-size: 11.5px; font-weight: 400; color: var(--fp-muted); }

/* -------------------------------------------------------------- hero -- */
/* Boxed inside the 1200px container, same width as every other page.     */

.fp-hero {
	position: relative; overflow: hidden;
	background: #111;
	/* Flush against the navigation — the hero is the top of the page, not the first
	   item in the stack below it. */
	margin-top: 0;
}

/* Slides stack in a single grid cell and cross-fade. Using grid rather than
   absolute positioning means the hero keeps the height of its tallest slide,
   so nothing jumps as it rotates. */
.fp-hero__slides { display: grid; }
.fp-hero__slide {
	grid-area: 1 / 1;
	position: relative;
	opacity: 0;
	visibility: hidden;
	transition: opacity .55s ease;
}
.fp-hero__slide.is-active { opacity: 1; visibility: visible; z-index: 2; }

/* Without JS every slide would be invisible — show the first regardless. */
.fp-hero:not([data-fp-hero]) .fp-hero__slide { opacity: 1; visibility: visible; }

.fp-hero__media img {
	width: 100%; height: clamp(340px, 38vw, 480px);
	object-fit: cover;
}

/* --- rotator controls --- */

.fp-hero__dots {
	position: absolute; right: 20px; bottom: 18px; z-index: 5;
	display: flex; gap: 9px;
}

.fp-hero__dot {
	width: 11px; height: 11px; padding: 0;
	border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.fp-hero__dot:hover { background: rgba(255, 255, 255, .8); }
.fp-hero__dot.is-active { background: var(--fp-red); transform: scale(1.25); }

.fp-hero__overlay {
	position: absolute; inset: auto 0 0 0;
	padding: 90px 36px 28px;
	background: linear-gradient(to top, rgba(0,0,0,.82) 8%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0));
	color: #fff;
}

.fp-hero__kicker {
	display: inline-block; margin-bottom: 14px;
	background: var(--fp-red); color: #fff;
	padding: 5px 10px;
	font-size: 10.5px; font-weight: 600;
	letter-spacing: .08em; text-transform: uppercase;
}
.fp-hero__kicker:hover { background: #5a5a5a; text-decoration: none; }

.fp-hero__title {
	max-width: 660px; margin: 0 0 10px;
	font-size: clamp(24px, 2.9vw, 38px);
	font-weight: 600; line-height: 1.3;
}
.fp-hero__title a { color: #fff; text-decoration: none; }
.fp-hero__title a:hover { text-decoration: underline; }

.fp-hero .fp-date { color: #e04b4b; }

/* ------------------------------------------------------- section bar -- */

.fp-sectionbar__inner {
	max-width: var(--fp-wrap); margin: 0 auto;
	padding: 0 20px;
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
}

.fp-sectionbar__title {
	margin: 0; font-size: 24px; font-weight: 500; color: var(--fp-heading);
}

.fp-sectionbar__more {
	font-size: 15px; font-weight: 600; color: var(--fp-red); white-space: nowrap;
}

/*
 * Grey band for "Latest Fleet News".
 *
 * Boxed to exactly the content column (1200px container minus its 20px gutters),
 * so its edges line up with the hero and the card grids rather than bleeding to
 * the window edge.
 */
.fp-sectionbar--full {
	background: var(--fp-grey);
	max-width: var(--fp-band);
	margin: 0 auto;
}
.fp-sectionbar--full .fp-sectionbar__inner {
	max-width: none;
	padding: 18px 22px;
}

/* white inset bar on a grey section — "Latest Expert Blogs" etc */
.fp-sectionbar--inset { background: #fff; margin-bottom: 26px; }
.fp-sectionbar--inset .fp-sectionbar__inner { padding: 15px 20px; max-width: none; }
.fp-sectionbar--inset .fp-sectionbar__title { font-size: 19px; }

/* ------------------------------------------------------------ blocks -- */

.fp-block { padding-bottom: 40px; }
/* No gap above "Latest Fleet News" — its grey bar butts straight onto the hero. */
.fp-block--news { padding-top: 0; margin-top: 0; }
.fp-block--news .fp-wrap { padding-top: 30px; }

/*
 * Grey "callout" sections.
 *
 * The grey lives on the inner container, not the <section>, so the band stops at
 * the content column instead of spanning the window. Consecutive sections sit flush
 * — no white slivers between Expert Blogs, Hot Topics and Reviews.
 */
.fp-block--blogs,
.fp-block--hot,
.fp-block--reviews,
.fp-block--related {
	background: none;
	padding: 0;
	margin-top: 0;
}

.fp-block--blogs > .fp-wrap,
.fp-block--hot > .fp-wrap,
.fp-block--reviews > .fp-wrap,
.fp-block--related > .fp-wrap {
	background: var(--fp-grey);
	max-width: var(--fp-band);
	padding: 22px 22px 28px;
}

/*
 * One block in the stack runs inverted — white section, grey heading box — exactly as
 * the mockup has it. It is a POSITIONAL treatment: whichever block sits in the middle
 * carries `fp-block--inverted`, so the grey/white/grey rhythm survives reordering.
 */
.fp-block--inverted > .fp-wrap { background: #fff; }
.fp-block--inverted .fp-sectionbar--inset { background: var(--fp-grey); }

/*
 * Reviews sits on a FleetPoint-red band with clear white space above and below, so it
 * reads as its own section rather than another band in the stack. Cards stay white:
 * vehicle photography needs a neutral surround, and the red score badge on each image
 * would disappear against a red card.
 */
.fp-block--reviews { margin: 40px 0; }
.fp-block--reviews > .fp-wrap {
	/* Deepened towards the bottom so the band has some weight to it — flat red read as
	   a plain coloured box next to the grey sections above and below. */
	background: linear-gradient(160deg, #a80303 0%, var(--fp-red) 46%, #6f0000 100%);
	padding: 26px 26px 30px;
}

/* --- feature-block header ----------------------------------------------- *
 *
 * Shared by Car & Van Reviews and Green Fleet News. Both needed to announce themselves;
 * the inset grey section bar the rest of the stack uses is quiet furniture that
 * disappeared entirely once it was recoloured onto a strong band. Colours come from
 * currentColor, so each band sets its own and this stays neutral.
 */
.fp-blockhead {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 12px;
	padding-bottom: 16px; margin-bottom: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, .28);
}
.fp-blockhead__title {
	display: flex; align-items: center; gap: 11px;
	margin: 0;
	font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; letter-spacing: -.01em;
	color: #fff;
}
.fp-blockhead__icon { width: 24px; height: 24px; fill: #fff; color: #fff; flex: 0 0 auto; }

/* An outlined button, not a text link — the old "See More" was 13px of pale tint and
   nobody was going to find it. */
.fp-blockhead__more {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 18px;
	border: 1px solid rgba(255, 255, 255, .55);
	font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	color: #fff; text-decoration: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.fp-blockhead__more:hover { background: #fff; border-color: #fff; text-decoration: none; }
.fp-block--reviews .fp-blockhead__more:hover { color: var(--fp-red); }

/* --- horizontal slider ---------------------------------------------------- *
 *
 * A real scroll container rather than a JavaScript carousel: it works by touch and
 * trackpad on its own, and scroll-snap keeps the cards aligned. The arrows only appear
 * when something is actually off-screen.
 */
.fp-slider { position: relative; }

.fp-slider__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Room for the card hover lift, which would otherwise be clipped by overflow. */
	padding: 4px 2px 14px;
	margin: -4px -2px -14px;
	scrollbar-width: none;
}
.fp-slider__track::-webkit-scrollbar { display: none; }

/*
 * Four across on the band, matching the grid it replaced.
 *
 * display:flex on the item, and the card told to fill it. A flex ITEM stretches to the
 * row height on its own, but its contents do not — so the cards were each as tall as
 * their own headline and the "Read Review" links sat at different heights. Grid items
 * stretched their contents for free, which is why this only appeared once the grid
 * became a slider.
 */
.fp-slider__item {
	flex: 0 0 calc((100% - 60px) / 4);
	min-width: 0;
	scroll-snap-align: start;
	display: flex;
}
.fp-slider__item > .fp-review { flex: 1 1 auto; }

/*
 * The arrows sit up in the tab row, not floating over the cards. Overlaid on the track
 * they covered the first card's photograph and the last one's score badge, which is the
 * one thing on a review card a reader is scanning for.
 */
.fp-slider__arrow {
	/*
	 * z-index sits above every layer inside the block — the card (auto), its media, the
	 * category flag and the review score badge (2). The arrows are the only control in
	 * this section, so nothing here should ever paint over them as the track scrolls.
	 */
	position: absolute; top: -50px; z-index: 20;
	display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	padding: 0;
	background: rgba(0, 0, 0, .28); color: #fff;
	border: 0; border-radius: 50%;
	cursor: pointer;
	transition: opacity .15s ease, background .15s ease;
}
.fp-slider__arrow svg { width: 19px; height: 19px; }
.fp-slider__arrow:hover { background: #fff; color: var(--fp-red); }
.fp-slider__arrow--prev { right: 46px; }
.fp-slider__arrow--next { right: 0; }
/* Dimmed at the ends rather than removed, so the controls do not jump about. */
.fp-slider__arrow.is-end { opacity: .35; pointer-events: none; }

/*
 * Tablet: three across, not four.
 *
 * Four cards in a 984px band gives each one about 230px, which is narrow enough that
 * headlines break to four lines and the rows go ragged. Three is the comfortable count
 * between the phone's single column and the desktop's four, and the range is bounded at
 * both ends so neither of those changes.
 */
@media (min-width: 901px) and (max-width: 1199px) {
	.fp-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.fp-listing__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.fp-slider__item { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 560px) {
	.fp-slider__item { flex-basis: 82%; }
	.fp-slider__arrow { display: none; }   /* swiping is the obvious gesture here */
}

/* --- reviews and green news, phone layout --------------------------------- *
 *
 * Three changes, all inside the two coloured blocks and all confined to phone widths.
 */
@media (max-width: 782px) {

	/*
	 * "See all…" moves below the cards.
	 *
	 * Beside the heading it is the first thing under the title and asks the reader to
	 * leave before they have seen anything; after the strip it is the natural next step.
	 * display:contents on the head lets its two children be ordered against the panels,
	 * which are their uncles rather than their siblings — no markup change needed.
	 */
	.fp-block--reviews > .fp-wrap,
	.fp-block--green > .fp-wrap { display: flex; flex-direction: column; }

	.fp-block--reviews .fp-blockhead,
	.fp-block--green .fp-blockhead {
		display: contents;
	}
	.fp-block--reviews .fp-blockhead__title,
	.fp-block--green .fp-blockhead__title { order: 1; margin-bottom: 16px; }
	.fp-block--reviews .fp-blockpills,
	.fp-block--green .fp-blockpills { order: 2; }
	.fp-block--reviews .fp-revpanels,
	.fp-block--green .fp-greenpanels { order: 3; }
	.fp-block--reviews .fp-blockhead__more,
	.fp-block--green .fp-blockhead__more {
		order: 4;
		align-self: flex-start;
		margin-top: 18px;
	}

	/*
	 * The tab rows stay on one line, by two different routes.
	 *
	 * Reviews has three short labels — Latest, Car Reviews, Van Reviews — which fit
	 * across the screen once the type and padding come down, so they share the width
	 * equally and the row is exactly as wide as the block.
	 *
	 * Green news cannot do that. "Infrastructure Development" is 26 characters, and a
	 * third of a 350px screen is not enough for it at any size worth reading. Squeezing
	 * it would either truncate the label or shrink the type past legibility, so that row
	 * keeps each pill at its natural width and scrolls sideways instead — the same
	 * gesture the cards beneath it already use.
	 */
	.fp-block--reviews .fp-blockpills,
	.fp-block--green .fp-blockpills {
		flex-wrap: nowrap;
		gap: 6px;
	}
	.fp-block--reviews .fp-blockpill,
	.fp-block--green .fp-blockpill {
		padding: 9px 12px;
		font-size: 12.5px;
		white-space: nowrap;
	}
	.fp-block--reviews .fp-blockpill { flex: 1 1 0; min-width: 0; padding-inline: 6px; text-align: center; }

	.fp-block--green .fp-blockpills {
		overflow-x: auto;
		scrollbar-width: none;
		/* Runs off the right edge so it is visibly a strip, like the cards below. */
		margin-right: -20px;
		padding-right: 20px;
	}
	.fp-block--green .fp-blockpills::-webkit-scrollbar { display: none; }
	.fp-block--green .fp-blockpill { flex: 0 0 auto; }
}

/* --- Green Fleet News slides too, on a phone ------------------------------ *
 *
 * The green block is a four-across grid, which on a phone stacks into four full-width
 * cards and turns a section into a very long scroll. Reviews solved this already, so
 * green borrows the same behaviour rather than a different one: a horizontal snap
 * strip, cards at 82% so the next one is visibly waiting, running off the right edge
 * of the screen so it reads as a strip rather than as a row that happens to be cut.
 *
 * Grid to flex is the whole change — no markup, no JavaScript, and above 782px the
 * block is the same four-across grid it has always been.
 */
@media (max-width: 782px) {

	.fp-block--green .fp-greenpanel { position: relative; }

	.fp-block--green .fp-grid {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
		/* Bleed right so the strip runs off the screen edge, with the padding putting
		   the last card's trailing space back. */
		margin-right: -20px;
		padding-right: 20px;
	}
	.fp-block--green .fp-grid::-webkit-scrollbar { display: none; }
	.fp-block--green .fp-grid > * {
		flex: 0 0 82%;
		scroll-snap-align: start;
	}

	/*
	 * The scroll cue. A strip that runs off the edge is only obviously scrollable once
	 * you have already tried it, so both blocks get a chevron sitting over the right
	 * edge of the artwork. It fades out on the last card — see fleetpoint.js — and is
	 * pointer-events: none, so it never intercepts a tap meant for the card beneath.
	 */
	.fp-block--green .fp-greenpanel::after,
	.fp-slider::after {
		content: "";
		position: absolute; top: 108px; right: 6px;
		width: 46px; height: 46px;
		border-radius: 50%;
		background: rgba(255, 255, 255, .94) no-repeat center / 20px 20px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23202020' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
		box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
		pointer-events: none;
		transition: opacity .2s ease;
	}
	.fp-block--green .fp-greenpanel.is-scrollend::after,
	.fp-slider.is-scrollend::after { opacity: 0; }
}

/* The pills row is the arrows' home; keep it tall enough to hold them even when a
   panel has too few cards to need them. */
.fp-blockpills { min-height: 38px; }

/* --- category pills ------------------------------------------------------ */

/*
 * On the red band the card's grey hairline read as a white border drawn around every
 * photograph. The white card body is edge enough there; the border stays on the pages
 * where these cards sit on white and need one.
 */
.fp-block--reviews .fp-review { border: 0; }

.fp-blockpills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }

.fp-blockpill {
	padding: 9px 20px;
	font-family: inherit; font-size: 13.5px; font-weight: 600;
	color: #fff; background: rgba(0, 0, 0, .28);
	border: 0; border-radius: 0; cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.fp-blockpill:hover { background: rgba(0, 0, 0, .42); color: #fff; }
.fp-blockpill.is-active { background: #fff; }
.fp-block--reviews .fp-blockpill.is-active { color: var(--fp-red); }

/* --------------------------------------------------------- news lead -- */

.fp-newslead {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
	gap: 38px;
	margin-bottom: 36px;
}

/* space-between keeps the column flush with the lead card whatever the story count,
   so headline lengths can vary without reopening a gap at the bottom. */
.fp-newslead__side {
	display: flex; flex-direction: column;
	gap: 18px;
	justify-content: space-between;
}

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

.fp-grid { display: grid; gap: var(--fp-gap); }
.fp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.fp-card { position: relative; min-width: 0; }

.fp-card__top { position: relative; }

.fp-card__media { display: block; position: relative; overflow: hidden; background: #ddd; }
.fp-card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .3s ease; }
.fp-card:hover .fp-card__media img { transform: scale(1.04); }

.fp-media__placeholder {
	display: block; width: 100%; aspect-ratio: 3 / 2;
	background: linear-gradient(135deg, #e8e8e8 0%, #dcdcdc 100%);
	position: relative;
}
.fp-media__placeholder::after {
	content: "FLEETPOINT";
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 700; letter-spacing: .16em;
	color: #c2c2c2;
}

/* Navy category chip, bottom-left of the image — sampled #003c64 */
.fp-badge {
	position: absolute; z-index: 2;
	left: 0; bottom: 0;
	display: inline-block;
	background: var(--fp-red); color: #fff;
	padding: 4px 10px;
	font-size: 10px; font-weight: 600;
	letter-spacing: .04em;
}
.fp-badge:hover { background: #5a5a5a; text-decoration: none; }

.fp-card__title { margin: 12px 0 6px; font-size: 15.5px; line-height: 1.4; font-weight: 500; }
.fp-card__title a { color: var(--fp-ink); }
.fp-card__title a:hover { color: var(--fp-red); text-decoration: none; }

.fp-card--lead .fp-card__title { font-size: 23px; line-height: 1.32; font-weight: 600; margin-top: 16px; }

.fp-card__excerpt { margin: 8px 0 0; font-size: 13px; color: var(--fp-muted); line-height: 1.6; }

.fp-date {
	display: block;
	font-size: 13px; font-weight: 700; color: var(--fp-red);
}

/* --------------------------------------------------------- thumb row -- */

.fp-row { display: flex; gap: 16px; align-items: flex-start; }

.fp-row__media { flex: 0 0 136px; background: #ddd; }
.fp-row__media img { width: 136px; aspect-ratio: 3 / 2; object-fit: cover; }
.fp-row__media .fp-media__placeholder { width: 136px; }

.fp-row__body { min-width: 0; }
.fp-row__title { margin: 0 0 6px; font-size: 15.5px; line-height: 1.4; font-weight: 500; }
.fp-row__title a { color: var(--fp-ink); }
.fp-row__title a:hover { color: var(--fp-red); text-decoration: none; }

/* ----------------------------------------------------------- reviews -- */
/* White cards on the grey band, red stars, red kicker, Read Review link. */

/*
 * REVIEWS
 *
 * Images are CONTAINED, not cropped: press shots frame the whole vehicle, and cover
 * was slicing the nose or roof off. The trade-off is letterboxing, so each image sits
 * on a light plate that makes the padding read as deliberate, and a fixed aspect ratio
 * keeps every card the same height whatever shape the supplied photo is.
 */

.fp-review {
	background: #fff;
	display: flex; flex-direction: column; min-width: 0;
	border: 1px solid var(--fp-line);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.fp-review:hover {
	transform: translateY(-3px);
	border-color: #c9c9c9;
	box-shadow: 0 12px 24px rgba(0,0,0,.13);
}

.fp-review__top { position: relative; background: #fff; }

.fp-review__media { display: block; }
.fp-review__media img {
	width: 100%;
	/*
	 * 16:9, matching the shape the review photography is actually shot and cropped at
	 * (2000x1054 ≈ 1.9:1), so filling the frame crops very little off a typical press
	 * shot. Cover rather than contain: contain left the images floating on a plate with
	 * uneven white bands wherever a photo was not that ratio.
	 */
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	transition: transform .4s ease;
}
.fp-review:hover .fp-review__media img { transform: scale(1.04); }
.fp-review__media .fp-media__placeholder { aspect-ratio: 16 / 9; }

/* CAR REVIEW / VAN REVIEW, sitting on the image plate */
/*
 * Dark chip, not red: the score badge on the same image is red and two red chips fight
 * each other. Dark also survives the white plate behind the image — a white chip would
 * vanish into it.
 */
.fp-review__kicker {
	position: absolute; top: 0; left: 0; z-index: 2;
	background: #202020; color: #fff;
	padding: 5px 11px;
	font-size: 10px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase;
}

/*
 * Score badge. One figure is what a reader compares when scanning four cars; five small
 * stars do not read at a glance. Bottom-right of the plate, clear of the vehicle.
 */
.fp-review__score {
	position: absolute; right: 0; bottom: 0; z-index: 1;
	display: flex; align-items: baseline; gap: 2px;
	padding: 7px 12px;
	background: var(--fp-red); color: #fff;
	line-height: 1;
}
.fp-review__score strong { font-size: 22px; font-weight: 700; }
.fp-review__score span   { font-size: 11px; opacity: .85; }

.fp-review__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 9px; }

.fp-review__title { margin: 0; font-size: 16.5px; line-height: 1.35; font-weight: 600; }
.fp-review__title a { color: var(--fp-ink); text-decoration: none; }
.fp-review__title a:hover { color: var(--fp-red); }

.fp-review__excerpt { margin: 0; font-size: 13px; color: var(--fp-muted); line-height: 1.6; }

.fp-review__more {
	margin-top: auto; padding-top: 4px;
	font-size: 12.5px; font-weight: 700; letter-spacing: .05em;
	color: var(--fp-red); text-transform: uppercase;
	display: inline-flex; align-items: center; gap: 7px;
}
.fp-review__more:hover { color: var(--fp-red-dark); text-decoration: none; }
.fp-review__arrow { transition: transform .2s ease; }
.fp-review:hover .fp-review__arrow { transform: translateX(4px); }

/* --- the Reviews section ------------------------------------------------ *
 *
 * The landing page and the two category archives. Everything here exists to say
 * "these are road tests, not news": a standfirst, a car/van switcher, one lead
 * review with its score, then the scored cards.
 */

.fp-reviews { margin-bottom: 40px; }

.fp-revintro {
	margin: 0 0 20px;
	/* Full content width. The usual reading-measure cap belongs on body copy, not on a
	   two-line standfirst, where it just left a ragged gap down the right. */
	max-width: none;
	font-size: 16px; line-height: 1.65; color: var(--fp-muted);
}

.fp-revtabs {
	display: flex; flex-wrap: wrap; gap: 4px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--fp-line);
}
.fp-revtab {
	padding: 11px 20px;
	margin-bottom: -1px;                 /* sit the active bar on the hairline */
	border-bottom: 3px solid transparent;
	font-size: 14px; font-weight: 600;
	color: var(--fp-muted); text-decoration: none;
}
.fp-revtab:hover { color: var(--fp-ink); text-decoration: none; }
.fp-revtab.is-active { color: var(--fp-ink); border-bottom-color: var(--fp-red); }

/* The lead review. Image left, everything else right; stacks on narrow screens. */
.fp-revlead {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 0;
	margin-bottom: 34px;
	border: 1px solid var(--fp-line);
	border-left: 4px solid var(--fp-red);
	background: #fff;
}

.fp-revlead__media { position: relative; display: block; background: #fff; }
.fp-revlead__media img {
	width: 100%; height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;            /* filled, matching the cards */
	object-position: center;
}
.fp-revlead__score {
	position: absolute; left: 0; bottom: 0; z-index: 2;
	display: flex; align-items: baseline; gap: 3px;
	padding: 10px 16px;
	background: var(--fp-red); color: #fff;
	line-height: 1;
}
.fp-revlead__score strong { font-size: 30px; font-weight: 700; }
.fp-revlead__score span   { font-size: 13px; opacity: .85; }

.fp-revlead__body {
	display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
	padding: 28px 30px;
}
.fp-revlead__kicker {
	background: #202020; color: #fff;
	padding: 5px 11px;
	font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.fp-revlead__title { margin: 0; font-size: clamp(20px, 2vw, 26px); line-height: 1.28; font-weight: 600; }
.fp-revlead__title a { color: var(--fp-ink); text-decoration: none; }
.fp-revlead__title a:hover { color: var(--fp-red); }
.fp-revlead__excerpt { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--fp-muted); }
.fp-revlead__more {
	margin-top: auto;
	font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	color: var(--fp-red); text-decoration: none;
	display: inline-flex; align-items: center; gap: 7px;
}
.fp-revlead__more:hover { color: var(--fp-red-dark); text-decoration: none; }

@media (max-width: 860px) {
	.fp-revlead { grid-template-columns: minmax(0, 1fr); }
	.fp-revlead__body { padding: 22px; }
}

/* Underlines belong to body copy, not to these components. */
.fp-page__content .fp-revtab,
.fp-page__content .fp-revlead a,
.fp-page__content .fp-reviews .fp-pagination a { text-decoration: none; }

/* stars — crimson sampled from the mockup */
.fp-stars { display: inline-flex; gap: 3px; }
.fp-star { width: 15px; height: 15px; }
.fp-star .fp-star__bg   { fill: #cfcfcf; }
.fp-star--full .fp-star__bg { fill: var(--fp-star); }
.fp-star__half { fill: var(--fp-star); }

/* ---------------------------------------------------------- archives -- */

.fp-archive__header { padding: 32px 0 24px; }
.fp-archive__title { font-size: clamp(24px, 3vw, 32px); font-weight: 600; margin: 0; }
.fp-archive__intro { margin-top: 10px; color: var(--fp-muted); max-width: 70ch; font-size: 14px; }

.fp-empty { padding: 40px 0; font-size: 17px; }

.fp-pagination { padding: 36px 0; }
.fp-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-pagination .page-numbers {
	display: inline-block; padding: 8px 14px;
	background: var(--fp-grey); color: var(--fp-ink);
	font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.fp-pagination .page-numbers:hover { background: var(--fp-line); }
.fp-pagination .page-numbers.current { background: var(--fp-red); color: #fff; }

/* ------------------------------------------------------------ single -- */

/* padding-block, NOT the padding shorthand: these elements also carry .fp-wrap,
   and a shorthand with 0 horizontal wipes out its 20px gutters — which pushed
   page titles 20px wider than the content and bands beneath them. */
.fp-single__head { padding-block: 26px 0; }

/* Section rule above the article — the category name underlined in red, sitting on a
   hairline that runs the full content width. Matches fleetpoint.org as it stands. */
.fp-single__section {
	border-bottom: 1px solid var(--fp-line);
	margin-bottom: 22px;
}
.fp-single__kicker {
	display: inline-block;
	padding-bottom: 9px;
	margin-bottom: -1px;               /* sit the red bar on top of the hairline */
	border-bottom: 3px solid var(--fp-red);
	font-size: 14px; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--fp-ink);
}
.fp-single__kicker:hover { color: var(--fp-red); }

/*
 * The headline follows the picture, so it no longer has to carry the page on its own
 * and does not need to be display-sized. 26px reads as a news headline beside a photo;
 * the old clamp() peaked at 38px and dwarfed everything under it.
 */
.fp-single__title {
	font-size: clamp(21px, 2.1vw, 26px);
	font-weight: 600;
	margin: 0 0 14px;
	line-height: 1.3;
}

/* Byline strip — a tinted band rather than loose text, which separates the furniture
   from the article itself. */
.fp-single__meta {
	display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
	margin-bottom: 26px;
	padding: 10px 14px;
	background: var(--fp-grey);
	font-size: 13px;
}
.fp-single__meta .fp-date { display: inline-block; }
.fp-single__author { color: var(--fp-muted); font-weight: 500; }

/* Every category the article is filed under. Wraps onto a second line rather than
   stretching the strip — eight categories is normal here. */
/* Plain inline flow, not flex: the ", " separators are their own text nodes and a
   flex gap put a space in front of every comma. */
.fp-single__cats {
	min-width: 0;
	color: var(--fp-muted);
	line-height: 1.7;
}
.fp-single__cats svg {
	width: 14px; height: 14px;
	vertical-align: -2px;
	margin-right: 6px;
}
/* Scoped through .fp-single__meta so it outranks the body-copy rule that underlines
   every link inside .fp-single__content — this strip lives inside that column now. */
.fp-single__meta .fp-single__cats a { color: var(--fp-muted); text-decoration: none; }
.fp-single__meta .fp-single__cats a:hover { color: var(--fp-red); text-decoration: underline; }

/* Inside the content column now, not spanning the full width. */
.fp-single__media { margin: 0 0 20px; }
.fp-single__media img { width: 100%; height: auto; display: block; }

.fp-single__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 46px;
	padding-bottom: 44px;
}
.fp-single__layout:not(:has(.fp-sidebar)) { grid-template-columns: minmax(0, 1fr); }

.fp-single__content { font-size: 16px; line-height: 1.7; min-width: 0; }
.fp-single__content img { margin: 22px 0; }
.fp-single__content h2 { font-size: 24px; margin-top: 1.5em; }
.fp-single__content h3 { font-size: 20px; margin-top: 1.4em; }
.fp-single__content a { text-decoration: underline; }

.fp-single__tags { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.fp-single__tags a {
	background: var(--fp-grey); color: var(--fp-ink);
	padding: 5px 12px; font-size: 12px; text-decoration: none; font-weight: 500;
}
.fp-single__tags a:hover { background: var(--fp-red); color: #fff; }

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

/* padding-block, NOT the padding shorthand: these elements also carry .fp-wrap,
   and a shorthand with 0 horizontal wipes out its 20px gutters — which pushed
   page titles 20px wider than the content and bands beneath them. */
.fp-page__head { padding-block: 34px 16px; }
.fp-page__title { font-size: clamp(25px, 3.2vw, 34px); font-weight: 600; margin: 0; }
.fp-page__content { padding-bottom: 48px; font-size: 16px; line-height: 1.7; }
.fp-page__content a { text-decoration: underline; }

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

.fp-sidebar { min-width: 0; }
.fp-widget { background: var(--fp-grey); padding: 20px; margin-bottom: 24px; }
.fp-widget__title { font-size: 16px; margin: 0 0 12px; }
.fp-widget ul { margin: 0; padding-left: 18px; }

/* --------------------------------------------------------------- 404 -- */

/* padding-block, NOT the padding shorthand: these elements also carry .fp-wrap,
   and a shorthand with 0 horizontal wipes out its 20px gutters — which pushed
   page titles 20px wider than the content and bands beneath them. */
.fp-404 { padding-block: 50px; }
.fp-404__title { font-size: clamp(28px, 4vw, 42px); }
.fp-404__intro { font-size: 16px; color: var(--fp-muted); max-width: 60ch; }
.fp-404 .fp-block { background: none; padding-top: 30px; }

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

/* Sits inside .fp-sheet, so it takes the sheet's width and shadow. Its inner .fp-wrap
   is left alone so footer columns line up with the content column above. */
.fp-footer { background: #16181c; color: #cfd2d6; margin-top: 14px; }

.fp-footer__inner {
	display: grid;
	grid-template-columns: 1.6fr repeat(3, 1fr);
	gap: 36px;
	padding-block: 44px;
}

/* Dedicated all-white artwork with a transparent background — no plate needed. */
.fp-footer__logo { display: inline-block; }
.fp-footer__brand img {
	max-width: 230px; width: 100%; height: auto;
}
.fp-footer__blurb { margin-top: 16px; font-size: 13.5px; line-height: 1.65; color: #9aa0a6; }

.fp-footer__heading {
	font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
	color: #fff; margin-bottom: 14px; font-weight: 600;
}

.fp-footer__list { margin: 0; padding: 0; list-style: none; }
.fp-footer__list li { margin-bottom: 10px; }
.fp-footer__list a { color: #cfd2d6; font-size: 13.5px; }
.fp-footer__list a:hover { color: #fff; }

.fp-footer__bar { border-top: 1px solid #262a30; font-size: 12.5px; color: #8b9096; }
.fp-footer__bar p { margin: 0; padding-block: 16px; }

/* ------------------------------------------------------- breadcrumbs -- */

.fp-crumbs {
	font-size: 12.5px; color: var(--fp-muted);
	margin-bottom: 14px; line-height: 1.5;
}
.fp-crumbs a { color: var(--fp-muted); }
.fp-crumbs a:hover { color: var(--fp-red); }
.fp-crumbs .breadcrumb_last { color: var(--fp-ink); font-weight: 600; }

/* ------------------------------------------- legacy content, mobile -- */

.fp-single__content,
.fp-page__content { overflow-wrap: break-word; word-wrap: break-word; }

.fp-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
	margin: 22px 0;
}
.fp-scroll table { margin: 0; }

.fp-single__content table,
.fp-page__content table {
	border-collapse: collapse;
	font-size: 14px;
}
.fp-single__content th, .fp-single__content td,
.fp-page__content th, .fp-page__content td {
	border: 1px solid var(--fp-line);
	padding: 8px 10px;
	text-align: left;
}
.fp-single__content th, .fp-page__content th { background: var(--fp-grey); }

.fp-single__content iframe,
.fp-page__content iframe,
.fp-vc iframe {
	max-width: 100%;
	border: 0;
}

.fp-single__content pre,
.fp-page__content pre {
	overflow-x: auto;
	background: var(--fp-grey);
	padding: 14px;
	font-size: 13.5px;
}

.fp-single__content blockquote,
.fp-page__content blockquote {
	margin: 24px 0;
	padding: 4px 0 4px 20px;
	border-left: 4px solid var(--fp-red);
	color: var(--fp-muted);
	font-style: italic;
}

/*
 * Legacy inline floats.
 *
 * Old content carries `style="float: left"` on its paragraphs — harmless in the narrow
 * column it was written for, but once the content runs full width the following heading
 * rides up alongside the float instead of starting a new section. Clearing headings
 * fixes it without overriding the author's inline styles, and the container clears its
 * own floats so it never collapses.
 */
.fp-prose h2, .fp-prose h3, .fp-prose h4,
.fp-single__content h2, .fp-single__content h3, .fp-single__content h4 { clear: both; }

.fp-prose::after, .fp-single__content::after { content: ""; display: table; clear: both; }

.alignleft  { float: left;  margin: 6px 22px 14px 0; }
.alignright { float: right; margin: 6px 0 14px 22px; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 12.5px; color: var(--fp-muted); padding-top: 6px; }

@media (max-width: 560px) {
	.alignleft, .alignright { float: none; margin: 16px auto; }
}

/* ------------------------------------------------- fp-core listings -- */

.fp-listing { margin: 8px 0 32px; }

/*
 * CAREFUL: fp-core's [grid] uses .fp-listing__heading for BOTH the block heading and
 * each card's title. Scope by position — a direct child of .fp-listing is the block
 * heading; one inside .fp-listing__item is a card title. Styling it unscoped put a
 * red rule under every headline on /news/, /videos/ and /expert-blog/.
 */
.fp-listing > .fp-listing__heading {
	font-size: 20px; font-weight: 600; color: var(--fp-heading);
	margin: 0 0 20px; padding-bottom: 10px;
	border-bottom: 3px solid var(--fp-red);
}

.fp-listing__item .fp-listing__heading,
.fp-listing__item .fp-listing__title {
	margin: 12px 0 6px;
	padding: 0;
	border: 0;
	font-size: 15.5px;
	line-height: 1.4;
	font-weight: 500;
}
.fp-listing__item .fp-listing__heading a,
.fp-listing__item .fp-listing__title a {
	color: var(--fp-ink);
	text-decoration: none;
}
.fp-listing__item .fp-listing__heading a:hover,
.fp-listing__item .fp-listing__title a:hover { color: var(--fp-red); }

/*
 * Four across, matching the card grids on every archive in the theme. The shortcode
 * carries its own magz_columns (2 on News and Latest Fleet News, 3 on Expert Blog) but
 * those numbers came from the orion layout and left these pages narrower than the rest
 * of the site, so the column count is set here rather than taken from the attribute.
 */
.fp-listing__items {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--fp-gap);
}

.fp-listing__item { min-width: 0; }

.fp-listing__thumb { display: block; overflow: hidden; background: #ddd; }
.fp-listing__thumb img {
	width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
	transition: transform .3s ease;
}
.fp-listing__item:hover .fp-listing__thumb img { transform: scale(1.04); }

.fp-listing__title { margin: 12px 0 6px; font-size: 15.5px; line-height: 1.4; font-weight: 500; }
.fp-listing__title a { color: var(--fp-ink); }
.fp-listing__title a:hover { color: var(--fp-red); text-decoration: none; }

.fp-listing__date {
	display: block; margin: 0 0 7px;
	font-size: 12.5px; font-weight: 700; color: var(--fp-red);
}

.fp-listing__excerpt { margin: 0; font-size: 13px; color: var(--fp-muted); line-height: 1.6; }

/* --- listing toolbar: count on the left, page length on the right -------- */

.fp-listing__bar {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 12px;
	margin-bottom: 22px; padding-bottom: 12px;
	border-bottom: 1px solid var(--fp-line);
}
.fp-listing__showing { margin: 0; font-size: 13.5px; color: var(--fp-muted); }

.fp-listing__perpage { display: flex; align-items: center; gap: 8px; margin: 0; }
.fp-listing__perpage label,
.fp-listing__perpage span { font-size: 13.5px; color: var(--fp-muted); }
.fp-listing__perpage select {
	width: auto; min-width: 72px;
	padding: 5px 30px 5px 10px;
	font-size: 13.5px;
	background-position: right 9px center;
}

.fp-listing__pagination { grid-column: 1 / -1; padding-top: 24px; }
.fp-listing__pagination a,
.fp-listing__pagination span {
	display: inline-block; padding: 8px 14px; margin-right: 6px;
	background: var(--fp-grey); color: var(--fp-ink);
	font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.fp-listing__pagination a:hover { background: var(--fp-line); }
.fp-listing__pagination .current { background: var(--fp-red); color: #fff; }

.fp-heading {
	font-size: 20px; font-weight: 600; color: var(--fp-heading);
	margin: 26px 0 16px; padding-bottom: 10px;
	border-bottom: 3px solid var(--fp-red);
}

/* Three across on a tablet — four in a 984px band leaves each card about 230px, and
   the headlines break to four lines. Bounded so desktop and phone are unaffected. */
@media (min-width: 901px) and (max-width: 1199px) {
	.fp-listing__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.fp-listing__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.fp-listing__items { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------- vc shims -- */

.fp-vc--separator { border: 0; border-top: 1px solid var(--fp-line); margin: 26px 0; }
.fp-vc--raw img { margin: 0 auto; }

/* =========================================================================
   LEGACY TEMPLATE LAYER
   ─────────────────────────────────────────────────────────────────────────
   The eleven fp-core page templates (fuel calculator, car tax, contact,
   directory, platinum…) were written against the old orion theme and still
   emit Bootstrap 2 markup: #main.row-fluid with .span4 / .span6 / .span8
   children, plus .single-page, .form-style, .block-title and friends.

   orion is gone, so without this block those pages render as unstyled,
   full-bleed markup with no container and no grid. Rewriting eleven legacy
   templates is a bigger and riskier job than teaching the theme their
   vocabulary, so this maps the old class names onto the new design.
   ========================================================================= */

/* --- container: give legacy templates the same column as everything else -- */

#main.row-fluid,
.fp-main > .row-fluid {
	max-width: var(--fp-wrap);
	margin: 0 auto;
	padding: 32px 20px 48px;
	width: 100%;
}

/* Nested rows must not re-pad or re-centre. */
#main.row-fluid .row-fluid,
.fp-main > .row-fluid .row-fluid { max-width: none; padding: 0; margin: 0; }

/* --- the Bootstrap 2 span grid, rebuilt on flexbox ----------------------- */

.row-fluid { display: flex; flex-wrap: wrap; gap: 0 3%; align-items: flex-start; }

/* Any element that CONTAINS spans becomes a row itself — the templates nest
   .span4 columns inside a .span12, which is how the directory builds its
   three category columns. */
.row-fluid [class*="span"]:has(> [class*="span"]) {
	display: flex; flex-wrap: wrap; gap: 0 3%; align-items: flex-start;
}

.row-fluid [class*="span"] { flex: 1 1 100%; min-width: 0; }

/* Headings and loose paragraphs are flex items too, and would otherwise sit
   beside the first column instead of above it. Applies at both levels: the row
   itself, and any span acting as a nested row (e.g. the directory's "Categories"
   heading above its list + content columns). */
.row-fluid > *:not([class*="span"]),
.row-fluid [class*="span"]:has(> [class*="span"]) > *:not([class*="span"]) {
	flex: 1 1 100%;
	min-width: 0;
}

@media (min-width: 783px) {
	.row-fluid .span3  { flex-basis: 22.7%; }
	.row-fluid .span4  { flex-basis: 31.3%; }
	.row-fluid .span5  { flex-basis: 39.8%; }
	.row-fluid .span6  { flex-basis: 48.5%; }
	.row-fluid .span7  { flex-basis: 57.1%; }
	.row-fluid .span8  { flex-basis: 65.6%; }
	.row-fluid .span9  { flex-basis: 74.2%; }
	.row-fluid .span12 { flex-basis: 100%; }

	/* Templates ask for .span8 expecting a sidebar in the remaining third. The
	   sidebar is empty, so let the content take the full width rather than
	   leaving a third of the page blank. */
	.row-fluid > [class*="span"]:only-child { flex-basis: 100%; }
}

/*
 * Empty sidebar columns.
 *
 * The fp-core templates always print `<div class="sidebar span4">` and then call
 * get_sidebar(). The widget area is empty, so sidebar.php outputs nothing — but the
 * wrapper div still occupied a third of the row, which is the gap down the right of
 * every tool page. Hidden when it has no element children; the content span then
 * grows to fill the row on its own, because these spans carry flex-grow: 1.
 */
.row-fluid .sidebar:not(:has(*)) { display: none; }

/*
 * Gated two-column tools (the car tax page has two selectors side by side).
 *
 * When signed out only one gate is shown, which left it in a half-width column beside
 * the other selector's leftover "Your results will display here" text. Give the gated
 * column the whole row and drop the empty one.
 */
.row-fluid .span6:has(.fp-gate) { flex-basis: 100%; }
.row-fluid:has(.span6 .fp-gate) .span6:not(:has(.fp-gate)) { display: none; }

/* Orion utility classes the templates still rely on. `.hide-element` wraps
   schema-only author/date markup — without this it prints "admin Jan 09 2013"
   and a broken avatar on the contact page. */
.hide-element, .hide { display: none !important; }
.clearfix::after { content: ""; display: table; clear: both; }

/* --- legacy typography --------------------------------------------------- */

#main.row-fluid > h2,
#main.row-fluid .single-page > h2,
.fp-main > .row-fluid h2:first-child {
	font-size: clamp(25px, 3.2vw, 34px);
	font-weight: 600;
	margin: 0 0 22px;
	color: var(--fp-ink);
}

#main.row-fluid h3,
.fp-main > .row-fluid h3 { font-size: 19px; font-weight: 600; margin: 26px 0 12px; }

#main.row-fluid p,
.fp-main > .row-fluid p { line-height: 1.7; max-width: 78ch; }

.block-title h1,
.block-title h4 { margin: 0 0 14px; }
.block-title h1 { font-size: clamp(25px, 3.2vw, 34px); font-weight: 600; }
.block-title h4 { font-size: 18px; font-weight: 600; }

/* Match the body scale used by the theme's own page template. The legacy templates
   inherited the 15px site default, so pages served by fp-core — Contact, the
   calculators — read a size smaller than every other page on the site. */
.single-page, .single-content { min-width: 0; font-size: 16px; line-height: 1.7; }

/* Legacy page-list markup (the supplier directory's category columns). */
#main.row-fluid ul.page_item,
#main.row-fluid .span4 > ul,
#main.row-fluid .span12 > ul {
	list-style: none; margin: 0; padding: 0;
}
#main.row-fluid li.page_item { margin: 0 0 2px; }
#main.row-fluid li.page_item > a {
	display: block;
	padding: 9px 12px;
	background: var(--fp-grey-2);
	border-left: 3px solid transparent;
	color: var(--fp-ink);
	font-size: 14px;
	text-decoration: none;
}
#main.row-fluid li.page_item > a:hover {
	background: var(--fp-grey);
	border-left-color: var(--fp-red);
	color: var(--fp-red);
}

/* =========================================================================
   FORMS — global
   Applies to the legacy calculator/contact markup and to WPForms alike.
   ========================================================================= */

input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
select, textarea {
	width: 100%;
	max-width: 100%;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 14.5px;
	color: var(--fp-ink);
	background: #fff;
	border: 1px solid #c8c8c8;
	border-radius: 2px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

select {
	appearance: none;
	padding-right: 34px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 11px;
}

textarea { min-height: 150px; resize: vertical; }

input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--fp-red);
	box-shadow: 0 0 0 3px rgba(150, 0, 0, .12);
}

label {
	display: block;
	margin-bottom: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--fp-heading);
}

/* Checkboxes and radios must not stretch to full width. */
input[type="checkbox"], input[type="radio"] {
	width: auto; margin-right: 7px; accent-color: var(--fp-red);
}
label > input[type="checkbox"], label > input[type="radio"] { display: inline-block; }

button, input[type="submit"], input[type="button"], input[type="reset"], .button {
	display: inline-block;
	padding: 11px 26px;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	color: #fff;
	background: var(--fp-red);
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	transition: background .15s ease;
}
button:hover, input[type="submit"]:hover, input[type="button"]:hover, .button:hover {
	background: var(--fp-red-dark);
	color: #fff;
}

/* Legacy form scaffolding */
.form-style .form-box,
.contact-form .contact-input { margin-bottom: 16px; }

.form-style .form-box { display: flex; flex-wrap: wrap; gap: 0 3%; }
.form-style .form-box > [class*="span"] { flex: 1 1 100%; margin-bottom: 16px; }
@media (min-width: 783px) {
	.form-style .form-box > .span6 { flex-basis: 48.5%; }
	.form-style .form-box > .span4 { flex-basis: 31.3%; }
}

.form-style ul.error { list-style: none; margin: 0 0 14px; padding: 0; color: var(--fp-red); }
.form-style ul.error:empty { display: none; }

.contact-form, .form-style {
	background: var(--fp-grey-2);
	border: 1px solid var(--fp-line);
	padding: 24px;
	margin-bottom: 30px;
	max-width: 720px;
}

/* --- company car tax calculator -------------------------------------------- *
 *
 * Two selectors side by side, each with its own results panel underneath, so a
 * comparison reads across. The results HTML comes back from results.php as bare
 * Bootstrap-2 .span6 pairs — label, value, label, value — which without styling ran
 * down the page as a single column of orphaned fragments. Every rule below is scoped
 * inside .fp-cartax so nothing leaks back onto the legacy grid elsewhere.
 */
#main.row-fluid .fp-cartax p { max-width: none; }

#main .fp-cartax__lead {
	margin: 0 0 26px;
	font-size: 17px; line-height: 1.6; color: var(--fp-muted);
}

.fp-cartax__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-bottom: 34px;
}

.fp-cartax__col {
	background: #fff;
	border: 1px solid var(--fp-line);
	border-top: 3px solid var(--fp-red);
}
#main .fp-cartax__col > h3 {
	margin: 0;
	padding: 18px 24px;
	border-bottom: 1px solid var(--fp-line);
	font-size: 18px; font-weight: 600;
}

.fp-cartax__form { margin: 0; padding: 22px 24px 24px; }
.fp-cartax__form label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px; font-weight: 600; color: var(--fp-muted);
}
#main .fp-cartax__form select {
	display: block;
	width: 100%; max-width: none;
	margin: 0 0 16px;
}
.fp-cartax__form select:last-child { margin-bottom: 0; }

/* Results ---------------------------------------------------------------- */

/*
 * results.php returns a flat run of children: an <img>, h3 section headings, then
 * alternating .span6 label/value pairs and a .span12 footnote. Making the panel a
 * two-column grid pairs each value with its own label by row order alone, with the
 * full-width pieces told to span both columns. (An inline-block pass was tried first
 * and the whitespace between elements pushed every second value onto its own line,
 * staggering the whole table by one.)
 */
.fp-cartax .results {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	border-top: 1px solid var(--fp-line);
}
.fp-cartax .results > h3,
.fp-cartax .results > img,
.fp-cartax .results > .span12,
.fp-cartax .results > .fp-cartax__empty { grid-column: 1 / -1; }

#main .fp-cartax__empty {
	margin: 0;
	padding: 26px 24px;
	font-size: 14.5px; color: var(--fp-muted);
}

/* The vehicle shot; it arrives at whatever size the supplier holds. */
.fp-cartax .results > img {
	width: 100%; max-width: 300px; height: auto;
	margin: 20px auto 4px;
}

#main .fp-cartax .results h3.span12,
#main .fp-cartax .results h3 {
	margin: 0;
	padding: 13px 24px;
	background: var(--fp-grey-2);
	border-top: 1px solid var(--fp-line);
	border-bottom: 1px solid var(--fp-line);
	font-size: 12px; font-weight: 700; line-height: 1.4;
	letter-spacing: .06em; text-transform: uppercase; color: var(--fp-ink);
}

/*
 * Labels and values carry the same class, so they are told apart by the one thing that
 * actually differs: a label wraps its text in <strong>, a value does not. (`.span6 +
 * .span6` was the obvious first try and is wrong — it matches the third, fourth and
 * every later cell too, so everything after the first label came out right-aligned.)
 */
.fp-cartax .results .span6 {
	display: flex; align-items: center;
	min-height: 44px;
	padding: 9px 12px 9px 24px;
	border-bottom: 1px solid var(--fp-line);
	font-size: 14.5px;
}
.fp-cartax .results .span6:has(strong) strong { font-weight: 600; color: var(--fp-muted); }
.fp-cartax .results .span6:not(:has(strong)) {
	justify-content: flex-end;
	padding: 9px 24px 9px 12px;
	white-space: nowrap;
	font-weight: 600; color: var(--fp-ink);
}

/* Sub-items of the running cost breakdown; .right is the template's own marker. */
.fp-cartax .results .span6.right { padding-left: 44px; }
.fp-cartax .results .span6.right strong { font-weight: 400; }

.fp-cartax .results > .span12 { padding: 14px 24px 18px; }
#main .fp-cartax .results > .span12 p {
	max-width: none;
	margin: 0;
	font-size: 12px; line-height: 1.6; color: var(--fp-muted);
}
.fp-cartax .results sup { font-size: 10px; }

/* Notes ------------------------------------------------------------------- */

.fp-cartax__notes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin-bottom: 26px;
}
.fp-cartax__note {
	padding: 20px 22px 22px;
	background: var(--fp-grey-2);
	border-left: 3px solid var(--fp-red);
}
#main .fp-cartax__note h3 {
	margin: 0 0 8px;
	font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--fp-ink);
}
#main .fp-cartax__note p {
	max-width: none;
	margin: 0;
	font-size: 14.5px; line-height: 1.55; color: var(--fp-muted);
}

#main .fp-cartax__more {
	max-width: none;
	margin: 0;
	font-size: 14.5px; line-height: 1.65; color: var(--fp-muted);
}

@media (max-width: 900px) {
	.fp-cartax__grid,
	.fp-cartax__notes { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.fp-cartax__lead { font-size: 16px; }
}

/* --- whole life cost calculator -------------------------------------------- *
 *
 * The tool is a compiled React bundle with its own stylesheet; only the page around it
 * is styled here. The banner image that used to sit above it has gone — it was a flat
 * PNG of a heading, and it was loaded from the live domain, so staging pulled an asset
 * off the production site on every view.
 */
#main.row-fluid .fp-wlc p,
.fp-main > .row-fluid .fp-wlc p { max-width: none; }

.fp-wlc__lead {
	margin: 0 0 26px;
	font-size: 17px; line-height: 1.6; color: var(--fp-muted);
}

#wlc_root { margin: 0 0 34px; }

.fp-wlc__trial {
	padding: 26px 28px 28px;
	background: #fff;
	border: 1px solid var(--fp-line);
	border-top: 3px solid var(--fp-red);
}
#main .fp-wlc__trial h3,
.fp-wlc__trial h3 {
	margin: 0 0 10px;
	font-size: 19px; font-weight: 600; color: var(--fp-ink);
}
.fp-wlc__trial p {
	margin: 0 0 18px;
	font-size: 15px; line-height: 1.65; color: var(--fp-muted);
}
.fp-wlc__cta { margin: 0 !important; }
.fp-wlc a.fp-wlc__btn {
	display: inline-block;
	padding: 13px 30px;
	background: var(--fp-red);
	color: #fff !important;
	font-size: 15px; font-weight: 700; text-decoration: none;
}
.fp-wlc a.fp-wlc__btn:hover,
.fp-wlc a.fp-wlc__btn:focus { background: var(--fp-ink); color: #fff !important; text-decoration: none; }

/* --- EV fuel cost calculator ----------------------------------------------- *
 *
 * The tool itself is the ev-fuel-calculator plugin, which ships its own stylesheet and
 * knows nothing about this theme — a blue button, its own rounded card, its own type.
 * Rather than fork the plugin, the markup it emits is restyled here so it sits with the
 * other tools. Everything is scoped to .fp-evfuel and the .ev-* classes the plugin uses.
 */
#main.row-fluid .fp-evfuel p,
.fp-main > .row-fluid .fp-evfuel p { max-width: none; }

.fp-evfuel__lead {
	margin: 0 0 26px;
	font-size: 17px; line-height: 1.6; color: var(--fp-muted);
}

.fp-evfuel .ev-calculator-wrapper { margin: 0 0 30px; }

.fp-evfuel .ev-calculator-container {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 0;
	background: #fff;
	border: 1px solid var(--fp-line);
	border-top: 3px solid var(--fp-red);
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

.fp-evfuel .ev-calculator-form {
	padding: 24px 26px 26px;
	background: none;
	border: 0; border-radius: 0; box-shadow: none;
}
#main .fp-evfuel .ev-calculator-title,
.fp-evfuel .ev-calculator-title {
	margin: 0 0 20px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--fp-line);
	font-size: 18px; font-weight: 600; color: var(--fp-ink);
}
.fp-evfuel .ev-form-group { margin: 0 0 18px; }
.fp-evfuel .ev-form-label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px; font-weight: 600; color: var(--fp-muted);
}
.fp-evfuel .ev-info-text {
	margin: 0 0 8px;
	font-size: 12px; line-height: 1.45; color: var(--fp-muted);
}
.fp-evfuel .ev-select,
.fp-evfuel .ev-input {
	width: 100%; max-width: none;
	border-radius: 0;
}
.fp-evfuel .ev-selection-container { display: grid; gap: 10px; }

.fp-evfuel .ev-button,
.fp-evfuel #ev-calculate-btn {
	padding: 13px 30px;
	background: var(--fp-red);
	border: 0; border-radius: 0;
	color: #fff;
	font-size: 15px; font-weight: 700;
}
.fp-evfuel .ev-button:hover,
.fp-evfuel #ev-calculate-btn:hover { background: var(--fp-ink); }

/* The answer panel: a tinted column beside the form rather than a floating red slab. */
.fp-evfuel .ev-calculator-results {
	display: flex; align-items: center; justify-content: center;
	padding: 26px;
	background: var(--fp-grey-2);
	border-left: 1px solid var(--fp-line);
	border-radius: 0;
	box-shadow: none;
}
/* The plugin paints this block solid red with !important, which inside our own tinted
   column reads as a box within a box. Match the other tools: quiet ground, red figure. */
.fp-evfuel .ev-calculator-wrapper .ev-results-container {
	width: 100%;
	padding: 0;
	background-color: transparent !important;
	border-radius: 0;
	color: var(--fp-ink) !important;
	text-align: center;
}
.fp-evfuel .ev-calculator-wrapper .ev-results-container * { color: inherit !important; }
/* The plugin prints an inline block that repeats this rule with !important on the size
   and weight, so matching it needs !important here too. */
#main .fp-evfuel .ev-calculator-wrapper .ev-results-title,
.fp-evfuel .ev-calculator-wrapper .ev-results-title {
	margin: 0 0 12px !important;
	font-size: 12px !important; font-weight: 700 !important;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--fp-muted) !important;
}
.fp-evfuel .ev-calculator-wrapper .ev-result-value {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	font-size: 44px; line-height: 1; font-weight: 700;
	color: var(--fp-red) !important;
}
.fp-evfuel .ev-calculator-wrapper .ev-result-value * { color: var(--fp-red) !important; }
.fp-evfuel .ev-result-icon svg { width: 26px; height: 26px; }

.fp-evfuel .ev-disclaimer {
	margin: 0 0 30px;
	padding: 16px 20px;
	background: var(--fp-grey-2);
	border-left: 3px solid var(--fp-line);
	font-size: 12.5px; line-height: 1.6; color: var(--fp-muted);
}

.fp-evfuel__notes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}
.fp-evfuel__note {
	padding: 20px 22px 22px;
	background: var(--fp-grey-2);
	border-left: 3px solid var(--fp-red);
}
#main .fp-evfuel__note h3,
.fp-evfuel__note h3 {
	margin: 0 0 8px;
	font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--fp-ink);
}
.fp-evfuel__note p {
	margin: 0;
	font-size: 14.5px; line-height: 1.55; color: var(--fp-muted);
}

@media (max-width: 900px) {
	.fp-evfuel .ev-calculator-container { grid-template-columns: minmax(0, 1fr); }
	.fp-evfuel .ev-calculator-results { border-left: 0; border-top: 1px solid var(--fp-line); }
	.fp-evfuel__notes { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.fp-evfuel__lead { font-size: 16px; }
}

/* --- EV charging point map -------------------------------------------------- *
 *
 * The page used to carry an inline <style> block that set a background colour on
 * body — for the whole site, on this URL — plus a fixed 800x600 PlugShare widget and
 * two hidden leftovers. All of it is gone; the map is now a responsive frame and the
 * page explains what the reader is looking at.
 */
.fp-evmap__lead {
	margin: 0 0 22px;
	font-size: 17px; line-height: 1.6; color: var(--fp-muted);
}

.fp-evmap__frame {
	height: 640px;
	background: var(--fp-grey-2);
	border: 1px solid var(--fp-line);
	border-top: 3px solid var(--fp-red);
}
.fp-evmap__frame iframe {
	display: block;
	width: 100%; height: 100%;
	border: 0;
}
/* Logged out, the gate strips the iframe. Without this the page kept a 640px grey
   rectangle where the map used to be. */
.fp-evmap__frame:not(:has(iframe)) { display: none; }

.fp-evmap__notes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 22px 0 38px;
}
.fp-evmap__note {
	padding: 20px 24px;
	background: var(--fp-grey-2);
	border-left: 3px solid var(--fp-red);
}
.fp-evmap__note h3 {
	margin: 0 0 8px;
	font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--fp-ink);
}
.fp-evmap__note p {
	margin: 0;
	font-size: 14.5px; line-height: 1.6; color: var(--fp-muted);
}

.fp-evmap > h2 { margin: 0 0 12px; font-size: 22px; }
.fp-evmap > p:last-child {
	margin: 0;
	font-size: 15px; line-height: 1.65; color: var(--fp-muted);
}

@media (max-width: 900px) {
	.fp-evmap__notes { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.fp-evmap__frame { height: 480px; }
	.fp-evmap__lead { font-size: 16px; }
}

/* --- driving licence checking ---------------------------------------------- *
 *
 * This page is signposting, not a tool: the checks themselves happen on GOV.UK. The
 * layout says so honestly — two cards, one per audience, each listing what you need
 * before you click through — rather than dressing two outbound links up as a form.
 */
.fp-licence__lead {
	margin: 0 0 28px;
	font-size: 17px; line-height: 1.6; color: var(--fp-muted);
}

.fp-licence__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-bottom: 32px;
}

.fp-licence__card {
	display: flex; flex-direction: column;
	padding: 26px 28px 28px;
	background: #fff;
	border: 1px solid var(--fp-line);
	border-top: 3px solid var(--fp-red);
}

/* Icons ride on the card so the page content stays plain HTML. */
.fp-licence__card::before {
	content: "";
	display: block;
	width: 34px; height: 34px;
	margin-bottom: 16px;
	background-repeat: no-repeat; background-position: center; background-size: contain;
}
.fp-licence__card--driver::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23960000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Ccircle cx='8' cy='11' r='2'/%3E%3Cpath d='M4.8 16c.8-1.3 1.9-2 3.2-2s2.4.7 3.2 2'/%3E%3Cpath d='M14.5 10H19M14.5 13.5H19'/%3E%3C/svg%3E");
}
.fp-licence__card--employer::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23960000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.2c0 4.6-3.1 8.2-7.5 10.3-4.4-2.1-7.5-5.7-7.5-10.3V6z'/%3E%3Cpath d='M8.8 11.8l2.2 2.2 4.2-4.4'/%3E%3C/svg%3E");
}

.fp-licence__card h2 {
	margin: 0 0 10px;
	font-size: 21px; line-height: 1.25;
}
.fp-licence__card > p {
	margin: 0 0 20px;
	font-size: 15px; line-height: 1.6; color: var(--fp-muted);
}
.fp-licence__card h3,
.fp-licence__note h3 {
	margin: 0 0 10px;
	font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--fp-ink);
}
.fp-licence__card ul {
	margin: 0 0 24px; padding: 0;
	list-style: none;
}
.fp-licence__card li {
	position: relative;
	margin: 0; padding: 7px 0 7px 26px;
	border-bottom: 1px solid var(--fp-line);
	font-size: 15px;
}
.fp-licence__card li:last-child { border-bottom: 0; }
.fp-licence__card li::before {
	content: "";
	position: absolute; left: 2px; top: 13px;
	width: 9px; height: 5px;
	border-left: 2px solid var(--fp-red); border-bottom: 2px solid var(--fp-red);
	transform: rotate(-45deg);
}

/* Pushed to the bottom so both buttons line up however long the copy runs. */
.fp-licence__cta { margin: auto 0 0; }
/* .fp-page__content a underlines every link in page copy; a button is not that. */
.fp-licence a.fp-licence__btn {
	display: inline-block;
	padding: 12px 24px;
	background: var(--fp-red);
	color: #fff !important;
	font-size: 15px; font-weight: 700; text-decoration: none;
}
.fp-licence a.fp-licence__btn:hover,
.fp-licence a.fp-licence__btn:focus { background: var(--fp-ink); color: #fff !important; text-decoration: none; }

.fp-licence__note {
	margin-bottom: 34px;
	padding: 22px 26px;
	background: var(--fp-grey-2);
	border-left: 3px solid var(--fp-red);
}
.fp-licence__note ul { margin: 0; padding: 0; list-style: none; }
.fp-licence__note li {
	margin: 0; padding: 5px 0;
	font-size: 15px; line-height: 1.55; color: var(--fp-muted);
}
.fp-licence__note strong { color: var(--fp-ink); }

.fp-licence > h2 { margin: 0 0 12px; font-size: 22px; }
.fp-licence > p:last-child {
	margin: 0;
	font-size: 15px; line-height: 1.65; color: var(--fp-muted);
}

@media (max-width: 780px) {
	.fp-licence__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.fp-licence__lead { font-size: 16px; }
}

/* --- fuel cost calculator ------------------------------------------------- *
 *
 * The results arrive as two separate <ul>s — all the labels in one, all the values in
 * the other — which rendered as two bullet lists and left the reader counting down both
 * to pair a figure with its meaning.
 *
 * display:contents drops both lists out of the box tree so their <li>s become items of
 * one grid; grid-auto-flow:column with five explicit rows then fills labels down the
 * first column and values down the second, so each value lands beside its own label
 * without a line of the template changing.
 */
#fuelcostresults {
	margin: 30px 0 40px;
	background: #fff;
	border: 1px solid var(--fp-line);
	border-top: 3px solid var(--fp-red);
}

#fuelcostresults h3 {
	margin: 0;
	padding: 18px 24px;
	border-bottom: 1px solid var(--fp-line);
	font-size: 18px; font-weight: 600;
}

/*
 * The template gives us the labels and the values as two separate <ul>s, which rendered
 * as two bullet lists — the reader had to count down both to pair a figure with its
 * meaning. display:contents drops the lists out of the box tree so their <li>s become
 * items of one grid; column flow over six explicit rows then fills labels down the first
 * column and values down the second, and because they share rows a label that wraps on a
 * phone takes its value with it. The button is placed by hand on row seven.
 *
 * Row count is fixed at 6 — if a row is added to the template, bump it here too.
 */
#fuelcostresults .content {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(6, auto);
	grid-template-columns: minmax(0, 1fr) auto;
}
#fuelcostresults .field-names,
#fuelcostresults .field-values { margin: 0; padding: 0; list-style: none; display: contents; }

#fuelcostresults li {
	display: flex; align-items: center;
	min-height: 50px;
	padding: 10px 24px;
	border-bottom: 1px solid var(--fp-line);
	font-size: 15px;
}
#fuelcostresults .field-names li  { color: var(--fp-muted); padding-right: 12px; }
#fuelcostresults .field-values li { justify-content: flex-end; font-weight: 600; color: var(--fp-ink); text-align: right; }

/* The answer, given the weight the answer deserves. */
#fuelcostresults li.total {
	min-height: 74px;
	background: var(--fp-grey-2);
	border-bottom: 0;
	font-size: 16px; font-weight: 700; color: var(--fp-ink);
}
#fuelcostresults .field-values li.total {
	font-size: 30px; line-height: 1.1; color: var(--fp-red);
}

/* The button sits in its own full-width row; the wrapper is what stretches, not the button. */
#fuelcostresults .fp-fuel-actions { grid-column: 1 / -1; grid-row: 7; padding: 18px 24px 22px; }
#fuelcostresults #close {
	padding: 10px 22px;
	background: none;
	border: 1px solid var(--fp-line);
	color: var(--fp-muted);
	font-size: 14px; font-weight: 600;
}
#fuelcostresults #close:hover,
#fuelcostresults #close:focus {
	background: none;
	border-color: var(--fp-ink);
	color: var(--fp-ink);
}

@media (max-width: 520px) {
	/* A content-sized value column squeezes the labels until they wrap three lines deep.
	   Cap both columns so it is the values that give way instead. */
	#fuelcostresults .content { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
	#fuelcostresults li { padding: 10px 16px; font-size: 14px; }
	#fuelcostresults .field-values li { flex-wrap: wrap; }
	#fuelcostresults .fp-basis { flex: 0 0 100%; margin-left: 0; }
	#fuelcostresults .field-values li.total { font-size: 24px; }
	#fuelcostresults .fp-fuel-actions { padding: 16px; }
}

/* The page's own intro copy, above the form. */
.fp-fuel-intro p { margin: 0 0 8px; }
.fp-fuel-intro { margin-bottom: 4px; }

/* The form, given the same card treatment so the pair reads as one tool. */
#fuelcalc {
	max-width: none; /* .form-style caps every form at 720px; this one spans the column. */
	margin: 26px 0 0;
	padding: 0 0 24px;
	background: #fff;
	border: 1px solid var(--fp-line);
	border-top: 3px solid var(--fp-red);
}
#fuelcalc h3 {
	margin: 0 0 22px;
	padding: 18px 24px;
	border-bottom: 1px solid var(--fp-line);
	font-size: 18px; font-weight: 600;
}
#fuelcalc .error:empty { display: none; }
#fuelcalc .form-box { margin: 0 0 18px; padding: 0 24px; }
#fuelcalc .form-box.last { margin-bottom: 22px; }
/* Button left, licence credit filling the space to its right. */
#fuelcalc > .span12 {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px 28px;
	padding: 0 24px;
}
#fuelcalc label { font-size: 13px; font-weight: 600; color: var(--fp-muted); text-transform: none; }
#fuelcalc #whatgas {
	flex: 1 1 340px;
	max-width: 78ch;
	margin: 0;
	font-size: 12px; line-height: 1.55; color: var(--fp-muted);
}
#fuelcalc #whatgas a { color: var(--fp-muted); text-decoration: underline; }
#fuelcalc #whatgas a:hover { color: var(--fp-red); }
#fuelcalc .fp-stale { display: block; margin-top: 5px; color: var(--fp-red); }
#fuelcalc .submit { padding: 13px 30px; font-size: 15px; font-weight: 700; }

/* Optional own-price field: a hint under each control, and a quiet "optional" tag so the
   field reads as a choice rather than something else to fill in. */
#fuelcalc .fp-field-hint {
	margin: 6px 0 0;
	font-size: 12px; line-height: 1.45; color: var(--fp-muted);
}
#fuelcalc .fp-optional {
	margin-left: 6px;
	font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
	color: var(--fp-muted); opacity: .8;
}
#fuelcalc .error:not(:empty) {
	margin: 0 24px 18px;
	padding: 12px 16px;
	background: #fdf2f2;
	border-left: 3px solid var(--fp-red);
	list-style: none;
	font-size: 14px;
}
#fuelcalc .error li { margin: 0; padding: 2px 0; list-style: none; }

/* Where the price came from, said quietly next to it. */
/* The li is a flex container, so the space before this span is not preserved. */
#fuelcostresults .fp-basis { margin-left: .4em; font-weight: 400; color: var(--fp-muted); }

/* WPForms */
.wpforms-container { max-width: 720px; }
.wpforms-container .wpforms-field { padding: 0 0 16px; }
.wpforms-container .wpforms-field-label { font-weight: 600; font-size: 13.5px; }
.wpforms-container button[type="submit"] { background: var(--fp-red); }

/* =========================================================================
   READABLE MEASURE
   Body copy at 1160px is far too long a line. Constrain prose, but leave
   listing pages (which contain card grids) at full width.
   ========================================================================= */

/*
 * Full width, per Ian. A capped measure reads better for long prose, but with no
 * sidebar it left an obvious empty third down the right of every article. If a sidebar
 * is ever populated the grid above puts it back and the content narrows automatically.
 */
.fp-single__content { max-width: none; }

/*
 * Page content runs the full column, matching articles and the tool templates.
 *
 * A capped measure reads better for long prose, but with no sidebar it left an empty
 * third down the right of every page — which is what Ian was seeing on the licence
 * checker. Consistency across the site won.
 */
.fp-prose { max-width: none; }

/* Legacy "button" links in page content should read as buttons, not underlined text. */
.fp-page__content a.button,
.fp-prose a.button { color: #fff; text-decoration: none; }
.fp-page__content a.button:hover,
.fp-prose a.button:hover { color: #fff; }

/* Login gate on member-only tools (fp-core's [ev_calculator_protected]). */
.fp-gate {
	background: var(--fp-grey);
	border-left: 4px solid var(--fp-red);
	padding: 28px 30px;
	margin: 10px 0 30px;
	/* Full width, like the content it stands in for. */
	max-width: none;
}
.fp-gate__text { max-width: 70ch; }
.fp-gate__title { margin: 0 0 8px; font-size: 21px; font-weight: 600; }
.fp-gate__text { margin: 0 0 18px; color: var(--fp-muted); }
.fp-gate .button { color: #fff; text-decoration: none; }

/* Section landing pages that list their child pages (e.g. /tools/). */
.fp-childpages {
	list-style: none; margin: 6px 0 40px; padding: 0;
	display: grid; gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.fp-childpages__item a {
	display: block; height: 100%;
	padding: 20px 22px;
	background: var(--fp-grey);
	border-left: 4px solid var(--fp-red);
	color: var(--fp-ink);
	text-decoration: none;
	transition: background .15s ease;
}
.fp-childpages__item a:hover { background: #e4e4e4; }
.fp-childpages__title {
	display: block; font-size: 17px; font-weight: 600; margin-bottom: 6px;
	color: var(--fp-red);
}
.fp-childpages__blurb { display: block; font-size: 13.5px; color: var(--fp-muted); line-height: 1.6; }

/*
 * Toolbox showcase — the /tools/ landing page.
 *
 * Wider tiles than the child-page list uses: each tool carries an icon and a sentence
 * of explanation, so a narrow column left the descriptions in ragged four-word lines.
 */
.fp-tools {
	list-style: none; margin: 6px 0 32px; padding: 0;
	display: grid; gap: 16px;
	/* min() so the track can go narrower than 330px on a small phone. auto-fill with a
	   flat 330px minimum forced a 330px column into a 280px viewport and gave the page a
	   horizontal scrollbar; 100% wins whenever the container is the smaller of the two,
	   and 330px still governs everywhere it fits. */
	grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
}
.fp-tools__item a {
	display: flex; gap: 16px; height: 100%;
	padding: 22px;
	background: var(--fp-grey);
	border-left: 4px solid var(--fp-red);
	color: var(--fp-ink);
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}
.fp-tools__item a:hover { background: #e4e4e4; }

.fp-tools__icon {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px;
	background: var(--fp-red); color: #fff;
	border-radius: 50%;
}
/* The shared icon markup carries .fp-toolbox__icon, which paints it red — invisible on
   the red disc. Override the colour, not the markup, so the header keeps its own. */
.fp-tools__icon svg { width: 24px; height: 24px; color: #fff; }

.fp-tools__body { min-width: 0; }
.fp-tools__name {
	display: block; font-size: 17px; font-weight: 600; line-height: 1.3;
	margin-bottom: 6px; color: var(--fp-red);
}
.fp-tools__blurb { display: block; font-size: 13.5px; color: var(--fp-muted); line-height: 1.6; }

/* Says up front that these need an account, rather than letting someone fill in a
   calculator and only then meet the gate. */
.fp-tools__lock {
	display: inline-block; margin-top: 10px;
	padding: 3px 9px;
	font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	color: #fff; background: var(--fp-ink);
	border-radius: 2px;
}

.fp-tools__note {
	margin: 0 0 36px;
	padding: 16px 20px;
	background: var(--fp-grey);
	border-left: 4px solid var(--fp-ink);
	font-size: 14.5px; color: var(--fp-muted);
}
.fp-tools__note a { color: var(--fp-red); font-weight: 600; }

/* --- category directory (News by Subject / News by Vehicle) -------------- */

.fp-dirintro {
	margin: 0 0 24px;
	/* Full content width — the reading-measure cap belongs on body copy, not on a
	   one-line standfirst, where it just left a gap down the right. */
	max-width: none;
	font-size: 16px; line-height: 1.65; color: var(--fp-muted);
}

.fp-dir {
	display: grid; gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	margin-bottom: 40px;
}

.fp-dircard {
	display: flex; flex-direction: column; min-width: 0;
	background: #fff;
	border: 1px solid var(--fp-line);
	border-top: 3px solid var(--fp-red);
	transition: box-shadow .2s ease, transform .2s ease;
}
.fp-dircard:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.10); }

.fp-dircard__media { display: block; overflow: hidden; }
.fp-dircard__media img {
	width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
	transition: transform .4s ease;
}
.fp-dircard:hover .fp-dircard__media img { transform: scale(1.04); }
.fp-dircard__media .fp-media__placeholder { aspect-ratio: 16 / 9; display: block; background: var(--fp-grey); }

.fp-dircard__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1 1 auto; }

.fp-dircard__title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.fp-dircard__title a { color: var(--fp-ink); text-decoration: none; }
.fp-dircard__title a:hover { color: var(--fp-red); }

.fp-dircard__count {
	margin: -4px 0 0;
	font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	color: var(--fp-muted);
}

/* Sub-topics as chips, each with how much is behind it — the count is what tells a
   reader whether a section is worth opening. */
.fp-dircard__subs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fp-dircard__subs a {
	display: inline-flex; align-items: baseline; gap: 6px;
	padding: 5px 10px;
	background: var(--fp-grey);
	font-size: 12.5px; color: var(--fp-ink); text-decoration: none;
}
.fp-dircard__subs a:hover { background: var(--fp-red); color: #fff; }
.fp-dircard__subs span { font-size: 11px; color: var(--fp-muted); }
.fp-dircard__subs a:hover span { color: rgba(255,255,255,.8); }

/* Sections with no sub-topics show their newest headlines instead. */
.fp-dircard__latest { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.fp-dircard__latest a {
	font-size: 13.5px; line-height: 1.45; color: var(--fp-ink); text-decoration: none;
	display: block; padding-left: 13px; position: relative;
}
.fp-dircard__latest a::before {
	content: ""; position: absolute; left: 0; top: .55em;
	width: 5px; height: 5px; background: var(--fp-red);
}
.fp-dircard__latest a:hover { color: var(--fp-red); }

.fp-dircard__more {
	margin-top: auto; padding-top: 6px;
	font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	color: var(--fp-red); text-decoration: none;
	display: inline-flex; align-items: center; gap: 7px;
}
.fp-dircard__more:hover { color: var(--fp-red-dark); }

.fp-page__content .fp-dir a { text-decoration: none; }

/* --- supplier directory --------------------------------------------------- *
 *
 * Two tiers, and they have to look different or there is nothing to sell: a featured
 * listing is a full card with the logo given room, the standard listing is a compact
 * row. Logos are contained on a white plate — supplier artwork arrives in every shape
 * and colour there is, and cropping a wordmark is worse than letterboxing it.
 */

.fp-dirsection { margin: 0 0 40px; }
.fp-dirsection__title {
	margin: 0 0 18px; padding-bottom: 10px;
	border-bottom: 2px solid var(--fp-line);
	font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--fp-heading);
}

/* --- featured cards --- */

/* Four across, and compact with it: a featured listing should read as a strong tile,
   not a full article card. */
.fp-supgrid {
	display: grid; gap: 18px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fp-supcard {
	position: relative;
	display: flex; flex-direction: column;
	background: #fff;
	border: 1px solid var(--fp-line);
	border-top: 3px solid var(--fp-red);
	transition: box-shadow .2s ease, transform .2s ease;
}
.fp-supcard:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.10); }

.fp-supcard__badge {
	position: absolute; top: 0; right: 0; z-index: 2;
	padding: 4px 10px;
	background: var(--fp-red); color: #fff;
	font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}

.fp-suplogo {
	display: flex; align-items: center; justify-content: center;
	height: 96px; padding: 14px;
	background: #fff;
	border-bottom: 1px solid var(--fp-line);
}
.fp-suplogo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* No logo supplied: the initial on a plate, so the row still has an anchor. */
.fp-suplogo__fallback {
	display: flex; align-items: center; justify-content: center;
	width: 62px; height: 62px;
	background: var(--fp-grey); color: var(--fp-muted);
	font-size: 26px; font-weight: 700;
}

.fp-supcard__body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1 1 auto; }
.fp-supcard__name { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.fp-supcard__name a { color: var(--fp-ink); text-decoration: none; }
.fp-supcard__name a:hover { color: var(--fp-red); }
.fp-supcard__blurb { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--fp-muted); }

.fp-supcard__contacts { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.fp-supcard__link {
	font-size: 12px; font-weight: 600; color: var(--fp-red); text-decoration: none;
	overflow-wrap: anywhere;
}
.fp-supcard__link:hover { text-decoration: underline; }

/* --- standard rows --- */

.fp-suplist { display: grid; gap: 2px; background: var(--fp-line); border: 1px solid var(--fp-line); }

.fp-suprow {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr) minmax(0, 210px);
	gap: 20px; align-items: center;
	padding: 16px 20px;
	background: #fff;
}
.fp-suprow__logo {
	display: flex; align-items: center; justify-content: center;
	height: 58px;
}
.fp-suprow__logo img { max-width: 100%; max-height: 58px; width: auto; height: auto; object-fit: contain; }
.fp-suprow__logo .fp-suplogo__fallback { width: 46px; height: 46px; font-size: 20px; }

.fp-suprow__name { margin: 0 0 4px; font-size: 16px; font-weight: 600; line-height: 1.3; }
.fp-suprow__name a { color: var(--fp-ink); text-decoration: none; }
.fp-suprow__name a:hover { color: var(--fp-red); }
.fp-suprow__blurb { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--fp-muted); }
.fp-suprow .fp-supcard__contacts { margin: 0; padding: 0; }

/* --- category index --- */

.fp-catlist {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 8px;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.fp-catlist a {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 12px 16px;
	background: var(--fp-grey-2);
	border-left: 3px solid var(--fp-line);
	font-size: 14.5px; font-weight: 500; color: var(--fp-ink); text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}
.fp-catlist a:hover { background: var(--fp-grey); border-left-color: var(--fp-red); color: var(--fp-red); }
.fp-catlist span {
	min-width: 24px; padding: 1px 7px;
	background: var(--fp-red); color: #fff;
	font-size: 11.5px; font-weight: 700; text-align: center;
}

/* --- site takeover -------------------------------------------------------- *
 *
 * Fixed to the viewport gutters either side of the 1200px sheet. Hidden below 1500px:
 * the gutters are too thin there to carry a skin, and a squeezed advertisement serves
 * the advertiser worse than none at all.
 */
.fp-takeover { display: none; }

@media (min-width: 1500px) {
	.fp-takeover { display: block; }
	.fp-takeover__side {
		position: fixed; top: 0; bottom: 0; z-index: 1;
		width: calc((100vw - var(--fp-wrap)) / 2);
		overflow: hidden;
	}
	.fp-takeover__side--left  { left: 0; }
	.fp-takeover__side--right { right: 0; }

	/*
	 * The skin fills the whole gutter whatever it was uploaded at.
	 *
	 * The gutter is a different shape on every monitor — 150px wide at 1500px, 360px at
	 * 1920px, 680px on a 2560px screen — so no single image can match it. object-fit:
	 * cover scales the creative until it covers the column and crops the overflow rather
	 * than stretching it, and anchoring to the top keeps the branding, which sits at the
	 * top of every skin we have been sent, in view on short screens.
	 */
	.fp-takeover__side a,
	.fp-takeover__side img {
		display: block; width: 100%; height: 100%;
	}
	.fp-takeover__side img {
		object-fit: cover; object-position: center top;
	}
}

/* --- site takeover: the phone panel ---------------------------------------- *
 *
 * The skins above need gutters, which a phone does not have, so below 1500px the same
 * booking appears as a strip fixed to the bottom of the screen carrying its own
 * creative. It starts off-screen and is slid up by JS a moment after load, so it never
 * competes with the page rendering.
 *
 * Closing collapses it to the label tab rather than removing it: the advertiser keeps a
 * presence, and the reader can bring it back.
 */

.fp-tkphone {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
	background: #fff;
	border-top: 1px solid var(--fp-line, #e3e3e3);
	box-shadow: 0 -6px 18px rgba(0,0,0,.13);
	transform: translateY(110%);
	transition: transform .32s ease;
}

.fp-tkphone.is-in { transform: none; }

/* Collapsed: the panel is pushed down by exactly its own height, leaving the tab. */
.fp-tkphone.is-shut .fp-tkphone__panel {
	max-height: 0;
	border-top-color: transparent;
}

/* The menu drawer must never have an advertisement sitting on top of it. */
body.fp-navopen .fp-tkphone { transform: translateY(110%); }

.fp-tkphone__tab {
	display: flex; align-items: center; gap: 8px; width: 100%;
	margin: 0; padding: 6px 14px;
	background: #f4f4f5; border: 0; cursor: pointer;
	font: inherit; font-size: 11px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; color: #6b6b70;
	text-align: left;
}

.fp-tkphone__label {
	flex: 1 1 auto;
	overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* Chevron points down to close, and flips to point up once it is shut. */
.fp-tkphone__chev {
	flex: 0 0 auto; width: 9px; height: 9px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s ease;
}

.fp-tkphone.is-shut .fp-tkphone__chev {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.fp-tkphone__panel {
	max-height: 140px;
	overflow: hidden;
	transition: max-height .32s ease;
}

.fp-tkphone__link { display: block; }

/*
 * The creative is shown whole and centred, never cropped — unlike the skins, which have
 * a column to fill. Height is what has to be held down here: a 640x200 at full width is
 * 122px on a phone but 240px on a tablet, which is a quarter of the screen. Capping the
 * height instead of the width keeps the strip the same size on every device, and 16vh
 * stops it swallowing a short screen.
 */
.fp-tkphone__panel img {
	display: block; margin: 0 auto;
	width: auto; height: auto;
	max-width: 100%; max-height: min(120px, 16vh);
}

/*
 * The tab never leaves the screen, so the bottom of the footer would sit permanently
 * behind it. Reserve its height — the height of the tab, not the open panel, since the
 * reader can always collapse the panel to reach what is under it.
 */
@media (max-width: 1499px) {
	body:has(.fp-tkphone) { padding-bottom: 30px; }
}

/* Above 1500px the skins do the job, so the strip goes away entirely. */
@media (min-width: 1500px) {
	.fp-tkphone { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fp-tkphone,
	.fp-tkphone__panel,
	.fp-tkphone__chev { transition: none; }
}

/* --- commercial enquiry form ---------------------------------------------- */

.fp-enq {
	margin: 8px 0 36px;
	padding: 28px 30px 30px;
	background: #fff;
	border: 1px solid var(--fp-line);
	border-top: 3px solid var(--fp-red);
}
.fp-enq__title { margin: 0 0 18px; font-size: 21px; font-weight: 600; clear: none; }
.fp-enq__grid { display: grid; gap: 16px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fp-enq__field { margin: 0 !important; display: flex; flex-direction: column; gap: 6px; }
.fp-enq__field--wide { grid-column: 1 / -1; }
.fp-enq label { font-size: 13.5px; font-weight: 600; }
.fp-enq label span { color: var(--fp-red); }

.fp-enq input[type="text"],
.fp-enq input[type="email"],
.fp-enq input[type="tel"],
.fp-enq select,
.fp-enq textarea {
	width: 100%; padding: 11px 13px; font-size: 15px;
	background: var(--fp-grey-2); border: 1px solid #c8c8c8; border-radius: 2px;
}
.fp-enq input:focus, .fp-enq select:focus, .fp-enq textarea:focus {
	background: #fff; border-color: var(--fp-red);
	box-shadow: 0 0 0 3px rgba(150,0,0,.12); outline: none;
}
.fp-enq button[type="submit"] { margin-top: 20px; padding: 13px 32px; font-size: 15px; font-weight: 700; }
.fp-enq__error {
	margin: 0 0 16px; padding: 12px 16px;
	background: #fdeeee; border-left: 3px solid var(--fp-red);
	font-size: 14px; font-weight: 600; color: var(--fp-red);
}
.fp-enq__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fp-enq--done { border-top-color: #1F7A00; }
.fp-enq--done h2 { margin: 0 0 10px; font-size: 22px; font-weight: 600; clear: none; }
.fp-enq--done p { margin: 0; color: var(--fp-muted); line-height: 1.65; }

/* --- editorial contact ---------------------------------------------------- *
 *
 * The free editorial routes ask people to email the editor rather than fill a form: a
 * press release arrives as a document and a 2MB photograph, and a blog pitch as a
 * draft. Neither fits in a five-field form, so the address is the call to action.
 */
.fp-editorial {
	margin: 0 0 36px;
	padding: 26px 30px 28px;
	background: var(--fp-grey-2);
	border-left: 4px solid var(--fp-red);
}
.fp-editorial__lead { margin: 0 0 6px !important; font-size: 15px; color: var(--fp-muted); }
.fp-editorial__mail { margin: 0 0 14px !important; }
.fp-editorial__mail a {
	font-size: clamp(20px, 2.4vw, 28px); font-weight: 700;
	color: var(--fp-red); text-decoration: none; overflow-wrap: anywhere;
}
.fp-editorial__mail a:hover { text-decoration: underline; }
/* Full width of the panel — the reading-measure cap belongs on long body copy, not on
   a three-line note, where it just left a gap down the right. */
.fp-editorial__note { margin: 0 !important; font-size: 14.5px; line-height: 1.65; color: var(--fp-muted); max-width: none; }

/* --- ad placements ------------------------------------------------------- *
 *
 * Each placement carries a wireframe of the page with its own slot in red. A buyer
 * choosing between a "square" and a "rectangle" is really asking where on the page it
 * sits, and a diagram answers that in a glance.
 */
.fp-places {
	display: grid; gap: 2px;
	background: var(--fp-line);
	border: 1px solid var(--fp-line);
	margin: 0 0 30px;
}

/*
 * Where a page needs two frames — an article and a newsletter, say — the blocks sit
 * flush so they read as one list rather than two tables with a hole between them. Their
 * touching borders come to 2px, the same as the internal row gap.
 *
 * The general sibling combinator, not the adjacent one: wpautop leaves a <br> between
 * the two shortcodes, so they are never strictly adjacent.
 */
.fp-places ~ .fp-places { margin-top: -30px; }

/* That stray <br> would still take a line's worth of height. */
.fp-page__content br + .fp-places,
.fp-prose br + .fp-places { margin-top: -30px; }
.fp-places + br { display: none; }
.fp-place {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 22px; align-items: center;
	padding: 18px 22px;
	background: #fff;
}
.fp-place__wire { display: block; }
.fp-place__wire svg { width: 100%; height: auto; display: block; }
.fp-wire__page { fill: #fff; stroke: var(--fp-line); stroke-width: 1.5; }
.fp-wire__part { fill: #ececec; }
.fp-wire__slot { fill: var(--fp-red); }

.fp-place__name { margin: 0 0 3px; font-size: 17px; font-weight: 600; clear: none; }
.fp-place__size {
	margin: 0 0 7px !important;
	font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--fp-red);
}
.fp-place__desc { margin: 0 !important; font-size: 14px; line-height: 1.6; color: var(--fp-muted); }

@media (max-width: 560px) {
	.fp-place { grid-template-columns: 92px minmax(0, 1fr); gap: 16px; padding: 14px 16px; }
}

/* --- rate cards ----------------------------------------------------------- */

.fp-rates {
	display: grid; gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	margin: 0 0 30px;
}
.fp-rate {
	position: relative; display: flex; flex-direction: column;
	padding: 24px;
	background: #fff; border: 1px solid var(--fp-line); border-top: 3px solid var(--fp-line);
}
.fp-rate--best { border-top-color: var(--fp-red); box-shadow: 0 6px 20px rgba(0,0,0,.07); }
.fp-rate__flag {
	position: absolute; top: 0; right: 0; padding: 4px 11px;
	background: var(--fp-red); color: #fff;
	font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.fp-rate__name {
	margin: 0 0 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--fp-muted); clear: none;
}
.fp-rate__price { margin: 0 0 14px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.fp-rate__price strong { font-size: 32px; font-weight: 700; line-height: 1; color: var(--fp-ink); }
.fp-rate--best .fp-rate__price strong { color: var(--fp-red); }
.fp-rate__price span { font-size: 12.5px; color: var(--fp-muted); }
.fp-rate__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fp-rate__list li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.5; }
.fp-rate__list li::before {
	content: ""; position: absolute; left: 3px; top: .45em;
	width: 8px; height: 4px;
	border-left: 2px solid var(--fp-red); border-bottom: 2px solid var(--fp-red);
	transform: rotate(-45deg);
}

@media (max-width: 700px) { .fp-enq__grid { grid-template-columns: minmax(0, 1fr); } }

/* --- listing plans -------------------------------------------------------- */

.fp-plans {
	display: grid; gap: 20px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0 0 28px;
}

.fp-plan {
	position: relative;
	display: flex; flex-direction: column;
	padding: 26px 26px 28px;
	background: #fff;
	border: 1px solid var(--fp-line);
	border-top: 3px solid var(--fp-line);
}
/* The tier being sold hardest carries the brand colour; the other stays quiet. */
.fp-plan--best { border-top-color: var(--fp-red); box-shadow: 0 6px 20px rgba(0,0,0,.07); }

.fp-plan__flag {
	position: absolute; top: 0; right: 0;
	padding: 4px 11px;
	background: var(--fp-red); color: #fff;
	font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}

.fp-plan__name {
	margin: 0 0 6px;
	font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--fp-muted); clear: none;
}
.fp-plan__price { margin: 0 0 18px; display: flex; align-items: baseline; gap: 8px; }
.fp-plan__price strong { font-size: 40px; font-weight: 700; line-height: 1; color: var(--fp-ink); }
.fp-plan--best .fp-plan__price strong { color: var(--fp-red); }
.fp-plan__price span { font-size: 13px; color: var(--fp-muted); }

.fp-plan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.fp-plan__list li {
	position: relative; padding-left: 24px;
	font-size: 14px; line-height: 1.5; color: var(--fp-ink);
}
.fp-plan__list li::before {
	content: ""; position: absolute; left: 4px; top: .45em;
	width: 9px; height: 5px;
	border-left: 2px solid var(--fp-red); border-bottom: 2px solid var(--fp-red);
	transform: rotate(-45deg);
}

@media (max-width: 700px) { .fp-plans { grid-template-columns: minmax(0, 1fr); } }

/* --- "Add your company" submission form ---------------------------------- */

.fp-supform {
	margin: 8px 0 36px;
	padding: 28px 30px 30px;
	background: #fff;
	border: 1px solid var(--fp-line);
	border-top: 3px solid var(--fp-red);
}

.fp-supform__grid {
	display: grid; gap: 18px 22px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fp-supform__field { margin: 0 !important; display: flex; flex-direction: column; gap: 6px; }
.fp-supform__field--wide { grid-column: 1 / -1; }

.fp-supform label { font-size: 13.5px; font-weight: 600; color: var(--fp-ink); }
.fp-supform label span { color: var(--fp-red); }
.fp-supform__hint { font-size: 12.5px; color: var(--fp-muted); }

.fp-supform input[type="text"],
.fp-supform input[type="email"],
.fp-supform input[type="tel"],
.fp-supform input[type="url"],
.fp-supform select,
.fp-supform textarea {
	width: 100%;
	padding: 11px 13px;
	font-size: 15px;
	background: var(--fp-grey-2);
	border: 1px solid #c8c8c8; border-radius: 2px;
}
.fp-supform input:focus,
.fp-supform select:focus,
.fp-supform textarea:focus {
	background: #fff; border-color: var(--fp-red);
	box-shadow: 0 0 0 3px rgba(150, 0, 0, .12); outline: none;
}
.fp-supform input[type="file"] { font-size: 13.5px; }

.fp-supform button[type="submit"] { margin-top: 22px; padding: 13px 34px; font-size: 15px; font-weight: 700; }

.fp-supform__error,
.fp-supform__warn {
	margin: 0 0 18px; padding: 12px 16px;
	background: #fdeeee; border-left: 3px solid var(--fp-red);
	font-size: 14px; font-weight: 600; color: var(--fp-red);
}
.fp-supform__warn { background: var(--fp-grey-2); border-left-color: var(--fp-muted); color: var(--fp-ink); font-weight: 500; }

/* Hidden from people, left in the DOM for bots to fall into. */
.fp-supform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fp-supform--done { border-top-color: #1F7A00; }
.fp-supform--done h2 { margin: 0 0 10px; font-size: 22px; font-weight: 600; clear: none; }
.fp-supform--done p { margin: 0 0 10px; color: var(--fp-muted); line-height: 1.65; }

@media (max-width: 700px) {
	.fp-supform__grid { grid-template-columns: minmax(0, 1fr); }
	.fp-supform { padding: 22px; }
}

/* --- sell the listing --- */

/* Generic name: the same panel now closes the commercial pages as well as the
   directory. .fp-dircta stays as an alias so nothing there has to change. */
.fp-cta,
.fp-dircta {
	margin: 8px 0 40px;
	padding: 28px 30px;
	background: var(--fp-grey-2);
	border-left: 4px solid var(--fp-red);
}
.fp-cta h2,
.fp-dircta h2 { margin: 0 0 10px; font-size: 21px; font-weight: 600; clear: none; }
.fp-cta p,
.fp-dircta p { margin: 0 0 16px; font-size: 15px; line-height: 1.65; color: var(--fp-muted); max-width: 78ch; }
.fp-cta__actions,
.fp-dircta__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 !important; }

/*
 * Matches the two back buttons on a supplier page, so moving directory → category →
 * supplier and back again uses one control that looks the same at every step. It was a
 * bare red text link, which read as body copy next to the buttons further in.
 */
.fp-dirback { margin: -6px 0 26px; font-size: 14px; }
.fp-dirback a {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 10px 18px;
	background: #fff;
	border: 1px solid var(--fp-line);
	font-size: 14.5px; font-weight: 600;
	color: var(--fp-ink);
	text-decoration: none;
}
.fp-dirback a:hover {
	border-color: var(--fp-red);
	color: var(--fp-red);
	text-decoration: none;
}

@media (max-width: 480px) {
	.fp-dirback a { width: 100%; }
}

.fp-page__content .fp-supgrid a,
.fp-page__content .fp-suplist a,
.fp-page__content .fp-catlist a,
.fp-page__content .fp-dirback a { text-decoration: none; }

@media (max-width: 1000px) { .fp-supgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 782px) {
	.fp-supgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fp-suprow { grid-template-columns: 90px minmax(0, 1fr); }
	.fp-suprow .fp-supcard__contacts { grid-column: 2; }
}
@media (max-width: 480px) { .fp-supgrid { grid-template-columns: minmax(0, 1fr); } }

/* --- What is FleetPoint? -------------------------------------------------- */

.fp-about__lead {
	font-size: clamp(18px, 2vw, 22px);
	line-height: 1.5;
	font-weight: 500;
	color: var(--fp-ink);
	margin: 0 0 28px;
}

/* The claims in the copy are the most persuasive thing on the page, so they are pulled
   out as figures rather than left buried mid-sentence. */
.fp-about__stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2px;
	margin: 0 0 32px;
	background: var(--fp-line);
	border: 1px solid var(--fp-line);
}
.fp-stat {
	display: flex; flex-direction: column; gap: 4px;
	padding: 22px 20px;
	background: #fff;
}
.fp-stat strong {
	font-size: clamp(26px, 3vw, 34px); font-weight: 700; line-height: 1;
	color: var(--fp-red);
}
.fp-stat span {
	font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	color: var(--fp-muted);
}

.fp-about__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 34px 0;
}
.fp-aboutcard {
	display: flex; flex-direction: column;
	padding: 24px;
	background: var(--fp-grey-2);
	border-top: 3px solid var(--fp-red);
}
.fp-aboutcard h2 {
	margin: 0 0 12px;
	font-size: 19px; font-weight: 600; line-height: 1.3;
	clear: none;
}
.fp-aboutcard p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.65; color: var(--fp-muted); }
.fp-aboutcard__actions {
	margin: auto 0 0 !important;
	display: flex; flex-wrap: wrap; gap: 8px;
}

/*
 * Second action reads as the quieter of the pair. Scoped a.button.button--ghost so it
 * outranks `.fp-prose a.button { color: #fff }`, which otherwise painted the label
 * white on a white background and made these buttons invisible.
 */
.fp-prose a.button.button--ghost {
	background: none;
	color: var(--fp-red);
	box-shadow: inset 0 0 0 1px var(--fp-red);
}
.fp-prose a.button.button--ghost:hover { background: var(--fp-red); color: #fff; }

.fp-about__follow { margin-top: 8px; }
.fp-about__social { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
.fp-about__social a {
	padding: 9px 18px;
	background: var(--fp-ink); color: #fff;
	font-size: 13.5px; font-weight: 600;
	text-decoration: none;
}
.fp-about__social a:hover { background: var(--fp-red); color: #fff; }

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

/* --- legacy .contain cards (Commercial / Editorial Opportunities) --------- *
 *
 * These pages are a run of orion-era `.contain` blocks — heading, image, blurb, Read
 * More — stacked one under another at full width, so a six-item page ran to three
 * screens of scrolling with each thumbnail floating in a sea of white.
 *
 * The blocks are siblings with no wrapper of their own, so the grid goes on the prose
 * container and everything that is NOT a .contain is told to span the full row. :has()
 * keeps it off every other page.
 */
.fp-prose:has(> .contain) {
	display: grid;
	/*
	 * auto-fit rather than a fixed count: Commercial Opportunities has four products and
	 * wants them on one row, Editorial has two and wants them side by side. Empty tracks
	 * collapse, so each page fills the width with whatever it has.
	 */
	/*
	 * Column count follows the number of cards, so each page fills its width: two cards
	 * are 50/50, four are 25 each.
	 *
	 * auto-fit does not work here. It only collapses tracks that are empty on EVERY row,
	 * and the intro paragraphs span all columns — so nothing ever collapsed and two
	 * cards sat in a quarter of the width each with a hole beside them.
	 */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* Row gap smaller than the column gap: every paragraph on these pages is a grid
	   item, so the row gap IS the space between paragraphs and 20px read as a gulf. */
	gap: 10px 20px;
	align-items: start;
}

/* nth-of-type counts divs, and the cards are the only divs at this level. */
.fp-prose:has(> div.contain:nth-of-type(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fp-prose:has(> div.contain:nth-of-type(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* The grid gap already separates them; their own margins were stacking on top. */
.fp-prose:has(> .contain) > p { margin: 0; }
.fp-prose:has(> .contain) > :not(.contain) { grid-column: 1 / -1; }

/* Copy that follows the card row needs air above it: the grid gap alone left the next
   heading sitting hard against the bottom of the cards. */
.fp-prose:has(> .contain) > .contain ~ h2 { margin-top: 26px; margin-bottom: 0; }

/* Air under the intro, before the row of cards starts. */
.fp-prose:has(> .contain) > p:last-of-type:not(:last-child) { margin-bottom: 12px; }

.fp-prose > .contain {
	display: flex; flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--fp-line);
	border-top: 3px solid var(--fp-red);
	padding: 0 0 18px;
	margin: 0;
}

.fp-prose > .contain > h2 {
	order: 2;                       /* picture first, heading under it */
	margin: 14px 16px 7px;
	font-size: 16.5px; font-weight: 600; line-height: 1.3;
	clear: none;
}

/*
 * Contained, not cropped: these are logos and graphics of wildly different shapes and
 * cover was slicing the tops off the wordmarks.
 *
 * The picture arrives in three shapes depending on how the page was written — a bare
 * <img>, an <a> around one, or either of those wrapped in a <p> by wpautop — so the
 * frame is applied to whichever of them is the direct child, and the image inside is
 * told to fill it. */
.fp-prose > .contain > a:has(img),
.fp-prose > .contain > a:has(.fp-picon),
.fp-prose > .contain > p:has(img),
.fp-prose > .contain > p:has(.fp-picon),
.fp-prose > .contain > img {
	order: 1;
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 140px;
	background: var(--fp-grey-2);
	padding: 10px;
	margin: 0;
}

/* Drawn product marks, not other advertisers' banners used as wallpaper. */
.fp-picon {
	display: flex; align-items: center; justify-content: center;
	width: 62px; height: 62px;
	color: var(--fp-red);
}
.fp-picon svg { width: 100%; height: 100%; }
.fp-prose > .contain:hover .fp-picon { color: var(--fp-red-dark); }
.fp-prose > .contain > a:has(img) img,
.fp-prose > .contain > p:has(img) img,
.fp-prose > .contain > img {
	width: 100%; height: 100%;
	object-fit: contain;
	margin: 0;
	display: block;
}

.fp-prose > .contain .info {
	order: 3;
	display: flex; flex-direction: column; align-items: flex-start; gap: 11px;
	flex: 1 1 auto;
	margin: 0; padding: 0 16px;
	font-size: 13.5px; line-height: 1.55; color: var(--fp-muted);
}
.fp-prose > .contain .info p { margin: 0; }
.fp-prose > .contain .info .button { margin-top: auto; }

@media (max-width: 900px) {
	.fp-prose:has(> div.contain:nth-of-type(3)),
	.fp-prose:has(> div.contain:nth-of-type(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.fp-prose:has(> .contain),
	.fp-prose:has(> div.contain:nth-of-type(3)),
	.fp-prose:has(> div.contain:nth-of-type(4)) { grid-template-columns: minmax(0, 1fr); }
}

/* --- contact page -------------------------------------------------------- *
 *
 * fp-core's contact template stacks the form and then the artwork underneath it, which
 * left the right-hand half of the page empty and the graphic stranded mid-page.
 */
.single-page:has(.contact-form) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
	gap: 40px;
	align-items: start;
}
.single-page:has(.contact-form) > .contact-info,
.single-page:has(.contact-form) > .hide-element { grid-column: 1 / -1; }

/* --- the form itself ----------------------------------------------------- *
 *
 * fp-core's contact template is orion markup with no styling of its own: four bare
 * inputs on a tinted panel, a heading that doubled as the error message, and nothing to
 * mark the message box out from the single-line fields.
 */
.contact-form {
	max-width: none;
	margin-bottom: 0;
	background: #fff;
	border: 1px solid var(--fp-line);
	border-top: 3px solid var(--fp-red);
	padding: 28px 30px 30px;
}

.contact-form .block-title h4 {
	margin: 0 0 4px;
	font-size: 21px; font-weight: 600; color: var(--fp-ink);
}
/* A one-line prompt under the heading, written here rather than in the template so the
   plugin stays untouched. */
.contact-form .block-title::after {
	content: "Fill in the form and we will come back to you. Every message reaches the FleetPoint editorial team.";
	display: block;
	margin-bottom: 22px;
	font-size: 14px; line-height: 1.6; color: var(--fp-muted);
}

.contact-form .contact-input,
.contact-form .contact-subject,
.contact-form .contact-topic,
.contact-form .contact-textarea { margin-bottom: 16px; }

.contact-form .contact-topic label {
	display: block; margin-bottom: 6px;
	font-size: 13.5px; font-weight: 600; color: var(--fp-ink);
}
.contact-form .contact-topic select {
	width: 100%; padding: 12px 14px; font-size: 15px;
	background: var(--fp-grey-2); border: 1px solid #c8c8c8; border-radius: 2px;
}

.contact-form input[type="text"],
.contact-form textarea {
	width: 100%;
	padding: 12px 14px;
	font-size: 15px;
	border: 1px solid #c8c8c8;
	border-radius: 2px;
	background: var(--fp-grey-2);
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.contact-form input[type="text"]:focus,
.contact-form textarea:focus {
	background: #fff;
	border-color: var(--fp-red);
	box-shadow: 0 0 0 3px rgba(150, 0, 0, .12);
	outline: none;
}
.contact-form textarea { min-height: 190px; resize: vertical; }

.contact-form button[type="submit"] {
	padding: 13px 34px;
	font-size: 15px; font-weight: 700;
}

/* Validation messages: red, and above the field they belong to. */
.contact-form .error-contact,
.contact-form .error-subject {
	display: block; margin-bottom: 6px;
	font-size: 13px; font-style: normal; font-weight: 600;
	color: var(--fp-red);
}
.contact-form .thanks {
	display: block; margin-top: 6px;
	font-size: 14px; font-weight: 600; color: #1F7A00;
}

/* --- the panel beside it ------------------------------------------------- */

.single-page:has(.contact-form) .entry-content {
	margin: 0;
	padding: 26px 24px;
	background: var(--fp-grey-2);
	border: 1px solid var(--fp-line);
	text-align: center;
}
.single-page:has(.contact-form) .entry-content img {
	display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto;
}

@media (max-width: 782px) {
	.single-page:has(.contact-form) { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* Social icon strips (#about) sat as a vertical stack of 48px images. */
.info.social { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.info.social a { display: inline-flex; text-decoration: none; }
.info.social img { width: 40px; height: 40px; border-radius: 3px; }

/*
 * Page content underlines its links, which is right for body copy and wrong for every
 * component rendered inside a page — listings, card grids, child-page tiles, buttons.
 * Exclude them explicitly rather than narrowing the prose rule, which would miss the
 * deeply nested markup in legacy pages (#about > .big-contain > .info > p > a).
 */
.fp-page__content .fp-listing a,
.fp-page__content .fp-card a,
.fp-page__content .fp-row a,
.fp-page__content .fp-review a,
.fp-page__content .fp-sectionbar a,
.fp-page__content .fp-childpages a,
.fp-page__content .fp-tools a,
.fp-page__content .fp-pagination a,
.fp-page__content .fp-badge,
.fp-page__content a.button { text-decoration: none; }

.fp-page__content .fp-card__title a,
.fp-page__content .fp-row__title a,
.fp-page__content .fp-review__title a,
.fp-page__content .fp-listing__title a { color: var(--fp-ink); }

.fp-page__content .fp-card__title a:hover,
.fp-page__content .fp-row__title a:hover,
.fp-page__content .fp-review__title a:hover,
.fp-page__content .fp-listing__title a:hover { color: var(--fp-red); }

/* -------------------------------------------------------- responsive -- */

/*
 * The right-hand dropdown ran off the screen between 1200px and 1439px.
 *
 * Flyouts are anchored to the left edge of their parent item and are 250px wide, so the
 * last item in each bar — sitting at the right end of a 1160px band — opened past the
 * viewport and gave the document a horizontal scrollbar. It only showed up in that
 * range: wider than 1439px there is enough room beside the band to absorb it, narrower
 * than 1200px the whole nav is collapsed and there are no flyouts at all.
 *
 * Anchoring the last one to its right edge instead is confined to the failing range, so
 * the dropdowns look exactly as they always have on a full-size screen.
 */
@media (min-width: 1200px) and (max-width: 1439px) {
	.fp-catnav__list > li:last-child > .sub-menu,
	.fp-mainnav__list > li:last-child > .sub-menu { left: auto; right: 0; }
}

/*
 * TABLET AND BELOW — the navigation collapses at 1199px, not 782px.
 *
 * .fp-mainbar__inner needs 1183px to lay out: home icon, six nav items (817px of them
 * on their own), search, Subscribe and Login. The band it sits in is capped at 1160px
 * and shrinks with the viewport, so anything narrower than about 1200px pushed the bar
 * past the right edge and gave the whole document a horizontal scrollbar — 1183px wide
 * in an 800px window, with the nav running off screen and the dropdowns off further
 * still. Nothing caught it, because the only collapse breakpoint was 782px and every
 * width between the two rendered the full desktop header into a space too small for it.
 *
 * The burger already collapses both bars, so the fix is to start using it earlier
 * rather than to build a second mechanism. Above 1199px not one of these rules applies
 * and the desktop header is untouched.
 */
@media (max-width: 1199px) {

	.fp-navtoggle { display: block; }

	/* --- sticky bar ------------------------------------------------- *
	 *
	 * The header follows the page down on a phone, because the menu, search and the
	 * account button are the things a reader reaches for mid-article and scrolling back
	 * to the top for them is the whole reason menus get missed. Only the logo-and-burger
	 * strip stays: .fp-stuck drops the banner out once the page has moved, so what
	 * follows you is 68px, not 200px.
	 */
	/*
	 * Sticky goes on .fp-header, not .fp-topbar. A sticky element is only sticky within
	 * its own parent's box, and .fp-topbar's parent is the header — so it stuck for the
	 * height of the header and then left with it, which looks exactly like sticky not
	 * working. The header's parent is the page sheet, which runs the whole way down.
	 * With the drawer closed the header is the top bar, so the effect is the same.
	 */
	.fp-header {
		position: sticky; top: 0; z-index: 120;
		background: #fff;
		transition: box-shadow .18s ease;
	}
	/*
	 * The shadow is on from the start everywhere except the homepage, where the hero
	 * begins immediately under the header and a shadow cast onto a full-bleed
	 * photograph reads as a smudge. There it appears on scroll, once the header is over
	 * the article rather than over the hero.
	 */
	.fp-header { box-shadow: 0 2px 14px rgba(0, 0, 0, .13); }
	body.home .fp-header { box-shadow: none; }
	body.fp-stuck .fp-header { box-shadow: 0 2px 14px rgba(0, 0, 0, .13); }
	/* Nothing of the header shows through the open panel. */
	body.fp-navopen .fp-header { box-shadow: none; }
	body.fp-stuck .fp-banner { display: none; }
	body.fp-stuck .fp-topbar__inner { padding-block: 8px; }
	body.fp-stuck .fp-logo img,
	body.fp-stuck .fp-logo .custom-logo { width: 150px; }

		/* --- WordPress admin bar ----------------------------------------- *
	 *
	 * Only ever seen by signed-in WordPress users — editors and admins — since the
	 * 436 FleetPoint members live in their own table and never get one. It is fixed to
	 * the top of the viewport, so without this it sits over the sticky header and, with
	 * the menu open, directly on top of the close button. Readers are unaffected; this
	 * is so the people editing the site can use it.
	 */
	body.admin-bar .fp-header { top: 32px; }
	body.admin-bar .fp-nav.fp-nav--open { top: 32px; }
	body.admin-bar.fp-navopen .fp-navtoggle { top: 46px; }
	/* The offset is only right while the bar is actually there — see the 600px rule. */

/* --- signed-in chip ---------------------------------------------- *
	 *
	 * On desktop the account button sits in the nav bar, which on a phone is behind the
	 * burger — so there was nothing on screen to say whether you were signed in. This
	 * rides in the sticky bar and answers that without a tap.
	 */
	.fp-topacct {
		display: inline-flex; align-items: center; gap: 6px;
		margin-left: auto; margin-right: 10px;
		padding: 8px 14px;
		background: var(--fp-grey-2);
		border: 1px solid var(--fp-line);
		color: var(--fp-ink);
		font-size: 13px; font-weight: 600; text-decoration: none;
		white-space: nowrap;
		max-width: 46vw; overflow: hidden; text-overflow: ellipsis;
	}
	.fp-topacct svg { width: 15px; height: 15px; flex: 0 0 auto; }
	.fp-topacct__hi { font-weight: 400; opacity: .75; }
	.fp-topacct--out { background: var(--fp-red); border-color: var(--fp-red); color: #fff; }

	/* --- the drawer -------------------------------------------------- *
	 *
	 * A panel over the page rather than a list pushed into it. It starts under the
	 * sticky bar, so the logo stays visible and the burger that opened it is the same
	 * control that closes it — no second close button to find.
	 */
	/*
	 * Open, it takes the whole screen — header included. Covering the logo and banner
	 * buys back about 120px, which on a 667px phone is the difference between the menu
	 * fitting and the reader having to scroll it. The burger stays above the panel and
	 * becomes the close button, so there is one control in one place, not a burger at
	 * the top and an X somewhere else.
	 */
	.fp-nav { display: none; }
	.fp-nav.fp-nav--open {
		display: flex; flex-wrap: wrap; align-content: flex-start;
		column-gap: 10px;
		position: fixed;
		top: 0; left: 0; right: 0; bottom: 0;
		z-index: 130;
		overflow-y: auto; -webkit-overflow-scrolling: touch;
		background: #fff;
		/*
		 * The last menu row is Fleet Toolbox, which is a full-bleed red band. On an
		 * iPhone the space below the content — the home-indicator area, and whatever
		 * rubber-banding exposes — took its colour and the bottom of the screen came out
		 * solid red. A deep white foot, measured against the safe area, keeps the band
		 * looking like a row of a menu rather than the end of the page.
		 */
		padding: 74px 20px calc(56px + env(safe-area-inset-bottom, 0px));
	}
	body.fp-navopen { overflow: hidden; }

	/* Everything is a full-width row except the two account buttons, which pair up. */
	.fp-nav--open .fp-btn--search,
	.fp-nav--open .fp-navgroup,
	.fp-nav--open .fp-navlabel,
	.fp-nav--open .fp-catnav__list,
	.fp-nav--open .fp-mainnav__list { flex: 0 0 100%; }
	/* Signed out it is Subscribe and Login; signed in it is the greeting and the way
	   into the account. Either way the row is two halves. */
	.fp-nav--open .fp-btn--subscribe,
	.fp-nav--open .fp-btn--login,
	.fp-nav--open .fp-btn--account,
	.fp-nav--open .fp-btn--dash { flex: 1 1 calc(50% - 5px); }
	.fp-nav--open .fp-btn.fp-btn--dash { display: inline-flex; order: 2; }

	/* The burger, promoted to a close button while the panel is open. */
	body.fp-navopen .fp-navtoggle {
		position: fixed; top: 14px; right: 20px;
		z-index: 140;
	}
	body.fp-navopen .fp-navtoggle__bars {
		background: transparent;
		transform: translate(-50%, -50%);
	}
	body.fp-navopen .fp-navtoggle__bars::before { top: 0; transform: rotate(45deg); }
	body.fp-navopen .fp-navtoggle__bars::after  { top: 0; transform: rotate(-45deg); }

	/*
	 * Flattening the wrappers is what makes the order below possible: the account
	 * buttons live inside .fp-mainbar__inner and the topics inside .fp-catnav, two
	 * different branches of the header, and no amount of ordering can interleave them
	 * while those boxes still exist. display:contents removes the boxes and leaves the
	 * leaves as direct children of the drawer.
	 */
	.fp-nav--open .fp-catnav,
	.fp-nav--open .fp-catnav > .fp-wrap,
	.fp-nav--open .fp-mainbar,
	.fp-nav--open .fp-mainbar__inner,
	.fp-nav--open .fp-mainnav { display: contents; }

	/* Account first, then search, then topics, then the rest of the menu. */
	.fp-nav--open .fp-btn--account   { order: 1; }
	.fp-nav--open .fp-btn--subscribe { order: 1; }
	.fp-nav--open .fp-btn--login     { order: 2; }
	.fp-nav--open .fp-btn--search    { order: 3; }
	/* The search panel is a sibling of the bar, so without an order of its own it fell
	   to 0 and opened above the account buttons rather than under the control that
	   opens it. */
	.fp-nav--open .fp-search         { order: 4; flex: 0 0 100%; }
	.fp-nav--open .fp-navlabel       { order: 5; }
	.fp-nav--open .fp-btn--home      { order: 6; }
	.fp-nav--open .fp-navgroup       { order: 7; }
	.fp-nav--open .fp-catnav__list   { order: 8; }
	.fp-nav--open .fp-mainnav__list  { order: 9; }

	/*
	 * Home, as a row rather than the icon it is on the bar. Its label is screen-reader
	 * only up there because the house speaks for itself in a row of buttons; in a list
	 * of words it needs to be a word.
	 */
	/* .fp-nav twice over: the stacked-button rule above centres every .fp-btn in the
	   drawer, and at equal specificity the later rule would win. */
	.fp-nav.fp-nav--open .fp-btn--home {
		/* flex-basis, not width — as a flex item the basis wins, and at 100% the red
		   stopped 20px short of the right edge while the negative margin still pulled it
		   left, so the band sat off-centre. */
		flex: 0 0 100%;
		justify-content: flex-start;
		height: auto; min-height: 0;
		/* Same inset red row as Reviews and Fleet Toolbox. */
		padding: 13px 14px;
		margin: 0;
		background: var(--fp-red); color: #fff;
		border-bottom: 0;
		font-size: 14.5px; font-weight: 600;
	}
	.fp-nav.fp-nav--open .fp-btn--home:hover,
	.fp-nav.fp-nav--open .fp-btn--home:focus { background: var(--fp-red-dark); color: #fff; }
	.fp-nav.fp-nav--open .fp-btn--home svg { order: 2; width: 17px; height: 17px; margin-left: 8px; }
	.fp-nav--open .fp-btn--home .screen-reader-text {
		position: static !important;
		width: auto; height: auto;
		clip: auto; clip-path: none;
		white-space: normal;
	}

	/* A white rule closing the last red band off from the foot of the drawer. */
	.fp-nav--open .fp-mainnav__list > li:last-child { border-bottom: 4px solid #fff; }

	/* The drawer's own logo, level with the close button. */
	.fp-nav--open .fp-navlogo {
		display: block;
		position: absolute; top: 20px; left: 20px;
		line-height: 0;
	}
	.fp-nav--open .fp-navlogo img { width: 132px; height: auto; }

	/* The collapsed topics group. */
	/* Set to match the menu links exactly — same family, size and weight — so the two
	   section headings read as part of the list rather than as small print above it. */
	.fp-navgroup {
		display: flex; align-items: center; justify-content: space-between;
		width: 100%; margin: 0; padding: 13px 14px;
		background: none; border: 0; border-bottom: 1px solid var(--fp-line);
		color: var(--fp-ink);
		font-family: inherit;
		font-size: 14.5px; font-weight: 500; letter-spacing: normal; text-transform: none;
		text-align: left; cursor: pointer;
	}
	.fp-navgroup::after {
		content: ""; flex: 0 0 auto;
		width: 8px; height: 8px; margin-left: 10px;
		border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translateY(-2px);
		transition: transform .15s ease;
	}
	.fp-navgroup[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
	.fp-navgroup:hover, .fp-navgroup:focus { background: none; color: var(--fp-red); }

	/*
	 * Opened, "Key categories" looks like any other opened row.
	 *
	 * It was showing its six topics as full-width rows with their own rules, which read
	 * as a new section of the menu rather than as the contents of the row above it.
	 * Dressed as a submenu — tinted ground, indented links, no rules — the two gestures
	 * produce the same kind of thing, which is the point of putting it in the list.
	 */
	.fp-navgroup__panel { display: none; }
	.fp-navgroup__panel.is-open {
		display: block;
		background: var(--fp-grey-2);
		/* Inset like a submenu, not bled like a red row — .sub-menu sits inside the
		   drawer's padding and this has to line up with it. */
		padding: 4px 0;
	}
	.fp-navgroup__panel.is-open > li { border-bottom: 0; }

	/*
	 * The third level needs its own ground.
	 *
	 * Key categories opens onto a tinted panel, and a topic inside it opens onto another
	 * one — same tint, so the two ran together and there was no telling where the
	 * category ended and its sections began. This one steps a shade darker and carries a
	 * red rule down its left, which is the only mark in the drawer that says "this
	 * belongs to the row above".
	 */
	/* .fp-catnav .sub-menu sets the tint at the same weight and later in the sheet, so
	   this needs the open-drawer class in front of it to win. */
	.fp-nav--open .fp-navgroup__panel .sub-menu {
		background: var(--fp-grey);
		border-left: 3px solid var(--fp-red);
		margin-left: 14px;
	}
	.fp-nav--open .fp-navgroup__panel .sub-menu a { padding-left: 22px; }
	.fp-navgroup__panel.is-open > li > a {
		padding: 12px 14px 12px 30px;
		white-space: normal;
	}

	.fp-navlabel {
		display: block;
		text-decoration: underline;
		text-underline-offset: 5px;
		margin: 20px 0 0; padding: 13px 14px;
		border-bottom: 1px solid var(--fp-line);
		font-size: 14.5px; font-weight: 500; letter-spacing: normal; text-transform: none;
		color: var(--fp-ink);
	}

	.fp-catnav__list,
	.fp-mainnav__list { flex-direction: column; align-items: stretch; gap: 0; padding-left: 0; }

	.fp-catnav__list > li,
	.fp-mainnav__list > li { border-bottom: 1px solid var(--fp-line); display: block; }

	.fp-catnav__list > li > a,
	.fp-mainnav__list > li > a { padding: 13px 0; height: auto; display: block; }

	.fp-catnav .sub-menu,
	.fp-mainnav .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		border: 0; box-shadow: none; background: var(--fp-grey-2);
		display: none; padding: 4px 0;
		min-width: 0;
	}
	.fp-catnav .sub-menu a,
	.fp-mainnav .sub-menu a { white-space: normal; padding-left: 18px; }
	.fp-catnav li.fp-open > .sub-menu,
	.fp-mainnav li.fp-open > .sub-menu { display: block; }
	.fp-catnav li:hover > .sub-menu,
	.fp-mainnav li:hover > .sub-menu { display: none; }
	.fp-catnav li.fp-open:hover > .sub-menu,
	.fp-mainnav li.fp-open:hover > .sub-menu { display: block; }

	/*
	 * A drawer, not a squeezed bar. Left as wrap-and-hope, the home icon kept its slot
	 * on the first row and pushed the whole menu into an indented column beside it,
	 * with Search stranded in the middle of the gap and the two buttons off to the
	 * right. One column, everything full width, in reading order.
	 */
	.fp-mainbar__inner {
		flex-direction: column; align-items: stretch; flex-wrap: nowrap;
		gap: 0; min-height: 0;
		padding: 0;
	}

	.fp-mainnav { flex: 0 0 auto; width: 100%; }

	/* Search, Subscribe and Login: full-width targets stacked under the menu. */
	.fp-mainbar__inner > .fp-btn,
	.fp-mainbar__inner > .fp-acctmenu > .fp-btn {
		align-self: stretch;
		justify-content: center;
		margin: 10px 0 0;
		min-height: 46px;
		font-size: 15px;
	}
	.fp-mainbar__inner > .fp-btn--search {
		margin-top: 14px;
		background: var(--fp-grey-2);
		border: 1px solid var(--fp-line);
	}
	.fp-btn--login,
	.fp-btn--account { margin-left: 0; }

	.fp-toolbox__inner { padding-inline: 0; }

	/* Roomier rows than the desktop bar allows — these are thumb targets now. The
	   width matters as much as the height: the highlighted items (Reviews, Fleet
	   Toolbox) carry a red ground, and sized to their text they read as pills adrift
	   in the list rather than as rows of it. */
	.fp-catnav__list > li > a,
	.fp-mainnav__list > li > a {
		display: block; width: 100%; box-sizing: border-box;
		padding: 13px 14px; font-size: 14.5px;
		/* The topics carry 600 on the desktop bar, where six bold headings are the
		   design. Opened out in the drawer they sat heavier than every menu item around
		   them, so they take the list's weight instead. */
		font-weight: 500;
	}
	/* Both lists are flex containers on desktop; in a column they still shrink-wrap to
	   their widest item unless told to fill. */
	.fp-mainnav,
	.fp-catnav__list,
	.fp-mainnav__list { width: 100%; padding-left: 0; margin-left: 0; }
	.fp-catnav__list > li,
	.fp-mainnav__list > li { width: 100%; }

	/*
	 * Icons trail the label in the drawer.
	 *
	 * The star and the briefcase are printed before the text, which is right on a
	 * horizontal bar but in a stacked list it indents "Reviews" and "Fleet Toolbox"
	 * past every other item and the left edge goes ragged. Ordering them after the
	 * text — the text being an anonymous flex item, so order 0 — lines all eight
	 * labels up on the same edge. The dropdown caret is pushed out to the right, where
	 * it reads as a control rather than as punctuation.
	 */
	.fp-nav--open .fp-catnav__list > li > a,
	.fp-nav--open .fp-mainnav__list > li > a { display: flex; align-items: center; }
	.fp-nav--open .fp-navmark,
	.fp-nav--open .fp-mainnav__list > li > a > .fp-toolbox__icon {
		order: 2; margin: 0 0 0 8px;
	}
	/*
	 * One chevron, everywhere. The menu rows drew a solid CSS triangle while the "Key
	 * categories" control drew a two-sided chevron, so the same gesture was advertised
	 * by two different marks in one list. The triangle borders are cleared and the
	 * chevron redrawn in their place — including the flip to point up when the row is
	 * open, which only the group heading used to do.
	 */
	.fp-nav--open .fp-catnav__list .menu-item-has-children > a::after,
	.fp-nav--open .fp-mainnav__list .menu-item-has-children > a::after {
		/*
		 * content is set here, not inherited. The topics bar has no carets by design —
		 * the desktop mockup does not have them — so there was no pseudo-element on
		 * those rows for this rule to restyle, and Key categories opened onto six items
		 * with no sign which of them went anywhere. The main nav does declare one, and
		 * repeating it costs nothing.
		 */
		content: "";
		order: 3;
		flex: 0 0 auto;
		margin-left: auto;
		width: 8px; height: 8px;
		border: 0;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translateY(-2px);
		transition: transform .15s ease;
	}
	.fp-nav--open .fp-catnav__list li.fp-open > a::after,
	.fp-nav--open .fp-mainnav__list li.fp-open > a::after {
		transform: rotate(-135deg) translateY(-2px);
	}

	/* Reviews and Fleet Toolbox carry their own horizontal padding for the pill they
	   are on desktop, which left them two-thirds the height of every other row. In the
	   drawer they are rows like the rest — same height, same left edge, red ground.
	   The .fp-nav prefix is doing real work: the desktop pill rules sit further down the
	   stylesheet, so an equal-specificity override up here would lose the cascade. */
	.fp-nav .fp-mainnav__list > li.fp-nav-reviews > a,
	.fp-nav .fp-mainnav__list > li.fp-toolboxnav > a {
		/*
		 * Inside the drawer's padding, level with the Search button, rather than running
		 * to the screen edges. Bleeding them made the red the widest thing in the menu
		 * and the bands read as separators cutting the list into pieces. Every row now
		 * shares the same left and right gap.
		 */
		padding: 13px 14px;
		margin: 0;
		width: 100%;
	}
	.fp-catnav .sub-menu a,
	.fp-mainnav .sub-menu a { padding-block: 12px; }

	/* Inside the drawer the panel is just a row of the menu: no grey band, no inset. */
	.fp-search__inner { flex-wrap: wrap; }
	.fp-search .fp-search__field { flex: 1 1 100%; }
	/* 16px text needs a taller box than the 34px desktop bar allows — and, like the
	   font-size above, the panel's id to outrank the rule that sets it. */
	#fp-search .fp-search__field,
	#fp-search .fp-search__go,
	#fp-search .fp-search__close { height: 44px; }
	.fp-nav--open .fp-search__inner {
		background: none;
		max-width: none;
		padding: 12px 0 0;
		gap: 8px;
	}
	.fp-nav--open .fp-search .fp-search__go { flex: 1 1 auto; }
}

@media (max-width: 1120px) {
	.fp-banner { flex-basis: 520px; }
	/*
	 * The gap, font-size and padding-left tweaks that used to live here are gone. They
	 * shrank a horizontal nav that no longer exists at this width — the bars collapse
	 * into the drawer at 1199px — and because this block is cascaded after that one,
	 * the 22px padding-left was re-indenting every item in the open menu.
	 */
}

@media (max-width: 900px) {
	/* --3 was missing here, so the reviews grid stayed three across on a tablet. */
	.fp-grid--4, .fp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fp-newslead { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.fp-single__layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.fp-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fp-logo img, .fp-logo .custom-logo { width: 245px; }
}

@media (max-width: 782px) {

	/*
	 * The banner used to be hidden outright below 782px, which threw away the header
	 * slot on the majority of the traffic. It moves to its own full-width row under the
	 * logo instead. The <img> keeps its width and height attributes, so the browser
	 * reserves the right box before the file arrives and the page does not jump.
	 */
	/* Logo, account chip and burger share the first row; the banner takes the second.
	   Without the explicit order the chip's margin-left:auto pushed the burger onto a
	   row of its own. */
	.fp-topbar__inner { flex-wrap: wrap; align-items: center; gap: 0 12px; }
	.fp-topacct  { order: 1; }
	.fp-navtoggle { order: 2; }
	.fp-banner { flex: 1 1 100%; order: 3; margin-top: 10px; }

	.fp-toolbox__inner { flex-direction: column; padding: 0; }
	.fp-toolbox__brand { justify-content: center; }
	.fp-toolbox__list { flex-wrap: wrap; }
	.fp-toolbox__item { flex: 1 1 50%; border-top: 1px solid var(--fp-line); }
	.fp-toolbox__text span { display: block; }

	/* The admin bar is 46px between 601px and 782px, not 32px. */
	body.admin-bar .fp-header { top: 46px; }
	body.admin-bar .fp-nav.fp-nav--open { top: 46px; }
	body.admin-bar.fp-navopen .fp-navtoggle { top: 60px; }

	/*
	 * Edge to edge on a phone. The hero sits inside .fp-wrap, which holds 20px of
	 * padding for the text columns below it — right for a paragraph, wrong for the
	 * lead image, which reads as a photograph in a frame rather than as the top of the
	 * page. Negative margins take it back out to the screen edges.
	 *
	 * No margin above it either: the gap to the banner is then just the top bar's own
	 * padding, which is as tight as it can go without the two touching.
	 */
	.fp-hero {
		margin: 0 -20px;
		width: calc(100% + 40px);
	}
	.fp-topbar__inner { padding-bottom: 10px; }
	.fp-hero__overlay { padding: 60px 20px 20px; }

	.fp-logo img, .fp-logo .custom-logo { width: 190px; }
	.fp-topbar__inner { padding-block: 12px; }
}

/* Three things have to fit across the top on a phone: logo, "Hi, name" and the burger.
   At 190px the logo alone took more than half of a 350px row. */
@media (max-width: 480px) {
	.fp-logo img, .fp-logo .custom-logo { width: 148px; }
	body.fp-stuck .fp-logo img,
	body.fp-stuck .fp-logo .custom-logo { width: 130px; }
	.fp-topacct { max-width: 40vw; padding: 7px 11px; font-size: 12.5px; }
}

@media (max-width: 560px) {
	.fp-grid--4, .fp-grid--3, .fp-grid--2 { grid-template-columns: minmax(0, 1fr); }
	.fp-footer__inner { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.fp-card--lead .fp-card__title { font-size: 20px; }
	.fp-toolbox__item { flex: 1 1 100%; }
	.fp-sectionbar__title { font-size: 20px; }
}

/*
 * reCAPTCHA is a fixed 304px-wide iframe that Google will not let us resize, so on a
 * 320px phone it pushed the registration form off the side of the screen. Scaling the
 * container is the only lever available; the height comes down with it so the form does
 * not keep a gap where the untransformed box used to be.
 */
@media (max-width: 400px) {
	#captcha {
		transform: scale(.82);
		transform-origin: left top;
		height: 66px;
	}
}

/*
 * Below 601px WordPress switches its admin bar from fixed to absolute, so it scrolls
 * away with the page instead of staying at the top. Holding the header 46px down for a
 * bar that is no longer there left a see-through strip above it with the article
 * scrolling past underneath. No offset at this width — there is nothing to clear.
 */
@media (max-width: 600px) {
	body.admin-bar .fp-header { top: 0; }
	body.admin-bar .fp-nav.fp-nav--open { top: 0; }
	body.admin-bar.fp-navopen .fp-navtoggle { top: 14px; }
}

/*
 * The three account tabs stay on one row on a phone.
 *
 * At 14.5px with 22px of padding either side they wrapped to two rows, which pushed the
 * panel down and made the third tab look like it belonged to something else. Shrinking
 * the type and the padding fits all three across a 350px screen; nowrap keeps them there
 * and each takes an equal third so the row reads as one control.
 */
@media (max-width: 782px) {
	/*
	 * Close the gap above the tabs. The dashboard header carries 18px of padding and
	 * 26px of margin under its rule, and the grid the panels sit in adds a row gap on
	 * top of that — about 54px of nothing between the Log out button and the tabs on a
	 * screen where vertical space is the scarce thing.
	 */
	#account .fp-dash__head { padding-bottom: 12px; margin-bottom: 0; gap: 10px; }
	#account.fp-dash { row-gap: 16px; }

	#account .fp-acctabs { flex-wrap: nowrap; gap: 0; margin-bottom: 18px; }
	#account .fp-acctab {
		flex: 1 1 0; min-width: 0;
		padding: 11px 4px;
		font-size: 12.5px;
		white-space: nowrap;
		text-align: center;
	}
	.fp-acctab {
		flex: 1 1 0; min-width: 0;
		padding: 11px 4px;
		font-size: 12.5px;
		white-space: nowrap;
		text-align: center;
	}
}

/*
 * Stop iOS zooming the page when a field is focused.
 *
 * Safari zooms in on focus whenever the field's text is smaller than 16px, then leaves
 * the page scaled up — which is what made tapping Search in the menu feel like the phone
 * had lurched. There is no way to switch the behaviour off short of disabling pinch-zoom
 * for everyone, which is worse; 16px is the threshold, so every control that takes typing
 * gets it at phone widths. Above 782px nothing changes.
 */
@media (max-width: 782px) {
	input[type="text"],
	input[type="search"],
	input[type="email"],
	input[type="password"],
	input[type="number"],
	input[type="tel"],
	input[type="url"],
	input[type="date"],
	select,
	textarea,
	/* The search field's own 13.5px rule sits further down the sheet, so this needs the
	   panel's id to outrank it. */
	#fp-search .fp-search__field,
	#fuelcalc select,
	#fuelcalc input,
	#account form input,
	#account form select { font-size: 16px; }
}

/*
 * The three review tabs stay on one row on a phone.
 *
 * "All Reviews / Car Reviews / Van Reviews" at 14px with 20px of padding either side
 * needs about 430px and wrapped onto two lines, which pushed the cards down and left the
 * third tab looking like it belonged to something else. Smaller type and tighter padding
 * fits them across a 320px screen; each takes an equal third so the row reads as one
 * control, and nowrap keeps it that way if a label is ever renamed.
 */
@media (max-width: 782px) {
	.fp-revtabs { flex-wrap: nowrap; gap: 0; }
	.fp-revtab {
		flex: 1 1 0; min-width: 0;
		padding: 11px 4px;
		font-size: 12.5px;
		white-space: nowrap;
		text-align: center;
	}
}

/* --- review dates and the "Latest" flag ----------------------------------- */

.fp-review__body .fp-date,
.fp-revlead__body .fp-date { display: block; margin: 0 0 8px; font-size: 13px; }

/* Top-left of the lead image, opposite the score badge on the right. */
.fp-revlead__flag {
	position: absolute; top: 0; left: 0; z-index: 2;
	padding: 7px 14px;
	background: var(--fp-red); color: #fff;
	font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
	.fp-card:hover .fp-card__media img,
	.fp-review:hover .fp-review__media img { transform: none; }
}

/* Feed of related articles shown on otherwise-empty pages (see page.php). */
.fp-block--pagefeed { padding: 0; margin: 10px 0 40px; background: none; }
.fp-block--pagefeed .fp-sectionbar--inset { background: var(--fp-grey); margin-bottom: 22px; }

/* =========================================================================
   LOWER HOMEPAGE — publications, news river + ad rail, partner, topics
   ========================================================================= */

.fp-block--pubs > .fp-wrap,
.fp-block--river > .fp-wrap,
.fp-block--partner > .fp-wrap,
.fp-block--topics > .fp-wrap {
	background: var(--fp-grey);
	max-width: var(--fp-band);
	padding: 22px 22px 28px;
}

/*
 * Publications runs on a FleetPoint-red band with its heading sitting directly on the
 * red — no white inset bar, no grey. It is the one strongly-coloured section on the
 * page, which is what makes it read as a distinct shelf rather than another news block.
 */
/* Breathing room above the red band so it reads as its own shelf rather than
   butting straight onto the Expert Blogs block above it. */
.fp-block--pubs { margin-top: 38px; }
.fp-block--pubs > .fp-wrap { background: var(--fp-red); padding: 24px 26px 30px; }
.fp-block--pubs .fp-sectionbar--bare { background: none; margin-bottom: 20px; }
.fp-block--pubs .fp-sectionbar--bare .fp-sectionbar__inner { max-width: none; padding: 0; }
.fp-block--pubs .fp-sectionbar__title { color: #fff; font-weight: 600; }

/* Alternate the bands so the lower page keeps the same rhythm as the upper one. */
.fp-block--river > .fp-wrap { background: #fff; }
.fp-block--river .fp-sectionbar--inset { background: var(--fp-grey); }
.fp-block--topics > .fp-wrap { background: #fff; }
.fp-block--topics .fp-sectionbar--inset { background: var(--fp-grey); }

/* --- publications ------------------------------------------------------- */

.fp-pubs {
	display: grid; gap: var(--fp-gap);
	grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}

.fp-pub { background: #fff; display: flex; flex-direction: column; min-width: 0; }

.fp-pub__label {
	display: block; padding: 9px 14px;
	font-size: 12.5px; font-weight: 700;
	/* Colour is set inline from the chip's own background — see fp_chip_ink().
	   This is only the fallback for a chip with no colour stored. */
	color: #fff;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.fp-pub__media { display: block; padding: 16px; }
.fp-pub__media img { width: 100%; height: auto; }

/*
 * Drawn cover for a card with no photograph. Graphic over the title, both centred.
 * Replaced entirely once a real cover image is set on the card.
 */
.fp-pub__placeholder {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 16px; text-align: center;
	aspect-ratio: 4 / 3; padding: 22px;
	color: #fff;
	/* Flat card colour, no gradient. */
	background: var(--tint);
}

.fp-pub__art {
	width: 84px; height: 84px;
	flex: 0 0 auto;
}

.fp-pub__name { font-size: 15px; font-weight: 600; line-height: 1.4; }

.fp-pub__cta {
	margin: 0 16px 18px; padding: 10px 14px;
	text-align: center; font-size: 13px; font-weight: 700;
	text-decoration: none;
	/* The card passes its chip colour in as --fp-cta / --fp-cta-ink, so the button
	   matches the card it belongs to. The fallbacks cover a card with no colour stored. */
	color: var(--fp-cta-ink, #fff); background: var(--fp-cta, var(--fp-red));
	transition: background-color .15s ease;
}
/* --fp-cta-hover is a darkened version of the card's colour, set inline alongside it.
   Without it a navy button flicked to red under the cursor. */
.fp-pub__cta:hover { background: var(--fp-cta-hover, var(--fp-red-dark)); text-decoration: none; }

/* --- news river --------------------------------------------------------- */

.fp-river {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 34px;
	/* stretch, not start: the rail column then matches the river's height exactly */
	align-items: stretch;
}
.fp-river--norail { grid-template-columns: minmax(0, 1fr); }

.fp-river__main { min-width: 0; display: flex; flex-direction: column; gap: 26px; }

/* lead item: headline over the image */
.fp-river__lead { position: relative; overflow: hidden; background: #111; }
.fp-river__leadmedia img { width: 100%; height: clamp(240px, 26vw, 330px); object-fit: cover; }
.fp-river__leadmedia .fp-media__placeholder { height: clamp(240px, 26vw, 330px); aspect-ratio: auto; }

.fp-river__leadbody {
	position: absolute; inset: auto 0 0 0;
	padding: 70px 24px 20px;
	background: linear-gradient(to top, rgba(0,0,0,.85) 10%, rgba(0,0,0,0));
	color: #fff;
}
.fp-river__kicker {
	display: inline-block; margin-bottom: 10px;
	background: var(--fp-red); padding: 4px 9px;
	font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.fp-river__leadtitle { margin: 0 0 8px; font-size: clamp(19px, 2.1vw, 26px); line-height: 1.3; font-weight: 600; }
.fp-river__leadtitle a { color: #fff; text-decoration: none; }
.fp-river__leadtitle a:hover { text-decoration: underline; }
.fp-river__lead .fp-date { color: #e04b4b; }

/* standard row */
.fp-river__item { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; }
.fp-river__media { position: relative; }
.fp-river__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.fp-river__title { margin: 0 0 6px; font-size: 18px; line-height: 1.35; font-weight: 600; }
.fp-river__title a { color: var(--fp-red); text-decoration: none; }
.fp-river__title a:hover { color: var(--fp-red-dark); text-decoration: underline; }

.fp-river__excerpt { margin: 10px 0 0; font-size: 13.5px; color: var(--fp-muted); line-height: 1.6; }

.fp-river__more {
	align-self: flex-start;
	padding: 11px 22px; font-size: 14px; font-weight: 600;
	color: #fff; background: var(--fp-red); text-decoration: none;
}
.fp-river__more:hover { background: var(--fp-red-dark); color: #fff; text-decoration: none; }

/* advertising rail */
.fp-rail { min-width: 0; display: flex; flex-direction: column; }
/* The final placeholder absorbs whatever height is left, so the rail finishes level
   with the river instead of stopping short or running past it. */
.fp-rail__slot--empty:last-child { flex: 1 1 auto; aspect-ratio: auto; min-height: 250px; }
.fp-rail__title {
	margin: 0 0 14px; padding: 8px 12px;
	background: var(--fp-grey); color: var(--fp-muted);
	font-size: 12px; font-weight: 600; letter-spacing: .04em;
}
.fp-rail__slot { margin-bottom: 16px; }

/* The AdSense unit is held to the square's footprint, so it can never out-size the
   adverts booked below it. An unfilled one still collapses to nothing. */
.fp-rail__slot--google { max-height: 250px; overflow: hidden; }
.fp-rail__slot--google ins { max-height: 250px; }
/* AdSense collapses an unfilled unit itself, but not reliably — article pages were left
   holding a blank 250px hole above the booked adverts while the homepage collapsed. Pull
   the whole slot when Google reports no ad, so the rail closes up either way. */
.fp-rail__slot--google:has( ins[data-ad-status="unfilled"] ) { display: none; }
.fp-rail__slot img { width: 100%; height: auto; }

/*
 * A slot held to a chosen shape.
 *
 * object-fit: contain, not cover — an advert is somebody's paid-for artwork, and cropping
 * it to fill a box can cut off a logo, a phone number or a price. Letterboxing on a white
 * ground is the honest failure: the creative is whole, just smaller, and the advertiser
 * can see they supplied the wrong size.
 */
.fp-rail__slot--fit { background: #fff; }
.fp-rail__slot--fit img {
	width: 100%; height: 100%;
	object-fit: contain;
	object-position: center;
}
.fp-rail__slot--fit > a { display: block; height: 100%; }
.fp-rail__slot--square { aspect-ratio: 300 / 250; }
.fp-rail__slot--rect   { aspect-ratio: 336 / 280; }

/*
 * Unsold inventory. Plainly labelled as available space — never dressed up to look
 * like a real advertiser, which would mislead readers and advertisers alike.
 */
.fp-rail__slot--empty {
	display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 6px;
	background: repeating-linear-gradient(45deg, #f4f4f4 0 10px, #ededed 10px 20px);
	border: 1px dashed #c4c4c4;
	text-align: center;
}
.fp-rail__slot--mpu  { aspect-ratio: 300 / 250; }
.fp-rail__slot--half { aspect-ratio: 300 / 600; }

.fp-rail__label { font-size: 13.5px; font-weight: 600; color: var(--fp-muted); }
.fp-rail__size  { font-size: 11.5px; color: #9a9a9a; letter-spacing: .04em; }
.fp-rail__enquire {
	margin-top: 6px; padding: 7px 16px;
	font-size: 12px; font-weight: 600;
	color: #fff; background: var(--fp-red); text-decoration: none;
}
.fp-rail__enquire:hover { background: var(--fp-red-dark); color: #fff; text-decoration: none; }

/* --- partner showcase --------------------------------------------------- */

.fp-partner {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 34px; align-items: start;
	background: #fff; padding: 24px;
}
.fp-partner__logo { display: block; margin-bottom: 16px; }
.fp-partner__logo img { max-width: 220px; height: auto; }
.fp-partner__name { margin: 0 0 10px; font-size: 21px; font-weight: 600; }
.fp-partner__name a { color: var(--fp-ink); text-decoration: none; }
.fp-partner__name a:hover { color: var(--fp-red); }
.fp-partner__blurb { margin: 0 0 18px; font-size: 14px; color: var(--fp-muted); line-height: 1.65; }
.fp-partner__cta {
	display: inline-block; padding: 10px 22px;
	font-size: 13.5px; font-weight: 600; color: #fff;
	background: var(--fp-red); text-decoration: none;
}
.fp-partner__cta:hover { background: var(--fp-red-dark); color: #fff; text-decoration: none; }

.fp-partner__newstitle {
	margin: 0 0 14px; padding-bottom: 9px;
	font-size: 16px; font-weight: 600; color: var(--fp-heading);
	border-bottom: 3px solid var(--fp-red);
}
.fp-partner__list { list-style: none; margin: 0; padding: 0; }
.fp-partner__list li { padding: 10px 0; border-bottom: 1px solid var(--fp-line); }
.fp-partner__list li:last-child { border-bottom: 0; }
.fp-partner__list a { display: block; font-size: 14.5px; font-weight: 500; color: var(--fp-ink); text-decoration: none; }
.fp-partner__list a:hover { color: var(--fp-red); }

/* --- topic tiles -------------------------------------------------------- */

.fp-topics {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 14px;
	/* Fixed 3 columns: the six topics land 3+3 instead of auto-fit's ragged 5+1. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 780px) { .fp-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .fp-topics { grid-template-columns: minmax(0, 1fr); } }
.fp-topics__item a {
	display: block; padding: 18px 20px;
	background: var(--fp-grey); border-left: 4px solid var(--fp-red);
	font-size: 15.5px; font-weight: 600; color: var(--fp-ink); text-decoration: none;
	transition: background .15s ease;
}
.fp-topics__item a:hover { background: #e4e4e4; color: var(--fp-red); }

/* --- closing statement -------------------------------------------------- */

.fp-block--tagline { padding-bottom: 34px; }
.fp-tagline { padding-block: 34px; }
.fp-tagline__heading { font-size: clamp(24px, 3vw, 34px); font-weight: 700; margin: 0 0 12px; }
.fp-tagline__text {
	max-width: 70ch; margin: 0 0 22px;
	font-size: 15.5px; line-height: 1.7; color: var(--fp-muted);
}

/* Social links in place of the old single button. */
.fp-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.fp-social__link {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 9px 16px;
	background: var(--fp-grey); color: var(--fp-ink);
	font-size: 13.5px; font-weight: 600; text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.fp-social__link:hover { background: var(--fp-red); color: #fff; text-decoration: none; }
.fp-social__icon { width: 18px; height: 18px; flex: 0 0 auto; }

@media (max-width: 1000px) {
	.fp-river { grid-template-columns: minmax(0, 1fr); }
	.fp-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
	.fp-rail__title { grid-column: 1 / -1; }
	.fp-pubs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fp-partner { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

@media (max-width: 560px) {
	.fp-pubs { grid-template-columns: minmax(0, 1fr); }
	.fp-river__item { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.fp-river__leadbody { padding: 50px 16px 16px; }
}

/* --- supplier showcase -------------------------------------------------- */

.fp-block--showcase > .fp-wrap {
	background: var(--fp-grey);
	max-width: var(--fp-band);
	padding: 22px 22px 30px;
}

.fp-showcase__intro {
	max-width: 78ch; margin: 0 0 22px;
	font-size: 14.5px; line-height: 1.7; color: var(--fp-muted);
}

.fp-showcase {
	list-style: none; margin: 0 0 24px; padding: 0;
	display: grid; gap: 16px;
	/*
	 * Fits however many advertisers are featured, rather than always laying out four
	 * columns.
	 *
	 * auto-FILL, not auto-fit, and this is the whole trick. auto-fit collapses the tracks
	 * nothing landed in, so a single featured supplier used to stretch its card across the
	 * entire band. The old fix — capping tracks at 280px and centring them — solved that
	 * one case and broke every other: once there were seven suppliers the grid was
	 * narrower than the band it sits in and floated in the middle of it, out of line with
	 * the heading and intro above.
	 *
	 * auto-fill keeps the empty tracks, so the row is always as wide as the band and the
	 * cards always line up with everything else in the block, whether there is one
	 * supplier or twenty.
	 */
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.fp-showcase__item a {
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	height: 100%; padding: 20px 16px;
	background: #fff; border-bottom: 3px solid transparent;
	text-align: center; text-decoration: none;
	transition: border-color .15s ease, transform .15s ease;
}
.fp-showcase__item a:hover { border-bottom-color: var(--fp-red); transform: translateY(-2px); }

/* Logos arrive at wildly different shapes and sizes, so give each a fixed box
   and let the image sit inside it rather than dictating the card's height. */
.fp-showcase__logo {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 62px;
}
.fp-showcase__logo img { max-width: 100%; max-height: 62px; width: auto; height: auto; }

.fp-showcase__initial {
	display: flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 50%;
	background: var(--fp-red); color: #fff;
	font-size: 22px; font-weight: 700;
}

.fp-showcase__name { font-size: 14.5px; font-weight: 600; color: var(--fp-ink); }
.fp-showcase__cat  { font-size: 11.5px; color: var(--fp-muted); }

.fp-showcase__cta {
	display: inline-block; padding: 11px 24px;
	font-size: 14px; font-weight: 600;
	color: #fff; background: var(--fp-red); text-decoration: none;
}
.fp-showcase__cta:hover { background: var(--fp-red-dark); color: #fff; text-decoration: none; }

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

/* --- Green Fleet News ---------------------------------------------------- */

/*
 * A sustainability signal, not a brand colour — this deep green appears nowhere else
 * on the site. Cards stay white so the photography and the red category chips read
 * exactly as they do in every other block.
 */
/* padding:0 matters — .fp-block carries a 40px padding-bottom, which stacked on top
   of this margin and left twice as much white below the green band as above it. */
.fp-block--green { margin: 0 0 40px; padding: 0; }

.fp-block--green > .fp-wrap {
	/*
	 * One flat green across the whole band. It also settles the contrast question that
	 * the earlier lime kept raising: white on #1F7A00 is 5.9:1, so the heading, the
	 * button and the pills are all legible sitting directly on it, with no wash behind
	 * them and no gradient needed to make the top readable.
	 */
	background: #1F7A00;
	max-width: var(--fp-band);
	padding: 26px 26px 30px;
}

/* The reverse — green on the white active pill — clears 5.9:1 at the same value. */
.fp-block--green .fp-blockpill.is-active,
.fp-block--green .fp-blockhead__more:hover { color: #1F7A00; }



/* Panels are all present in the HTML; only the active one is shown. Generic classes,
   because Car & Van Reviews uses the same mechanism. */
.fp-tabpanel { display: none; }
.fp-tabpanel.is-active { display: block; }

/* Without JS nothing would ever toggle, so show every panel rather than hide them. */
[data-fp-tabs]:not([data-fp-tabs-ready]) .fp-tabpanel { display: block; }
[data-fp-tabs]:not([data-fp-tabs-ready]) .fp-tabpanel + .fp-tabpanel { margin-top: 20px; }


.fp-block--green .fp-card { background: #fff; }
.fp-block--green .fp-card__title { padding: 0 14px; }
.fp-block--green .fp-card .fp-date { padding: 0 14px 14px; }
.fp-block--green .fp-card__top { margin-bottom: 12px; }

/* The Topics heading repeated as the first item in its own dropdown — ruled off so it
   reads as "the section itself" rather than a duplicate of the item above it. */
.fp-catnav .sub-menu .fp-selflink > a {
	font-weight: 700;
	border-bottom: 1px solid var(--fp-line);
	margin-bottom: 4px;
	padding-bottom: 10px;
}

/* --- member state in the header ----------------------------------------- */

.fp-account { display: flex; align-items: stretch; margin-left: auto; }
.fp-account__hi { opacity: .75; font-weight: 500; margin-right: 4px; }
.fp-account__out {
	display: inline-flex; align-items: center;
	padding: 0 14px;
	background: #3f3f3f; color: #fff;
	font-size: 13px; font-weight: 600; text-decoration: none;
}
.fp-account__out:hover { background: #202020; color: #fff; text-decoration: none; }

/* --- members-only gate --------------------------------------------------- */

.fp-gate__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; }
.fp-gate__alt { font-size: 13.5px; font-weight: 600; color: var(--fp-red); }

@media (max-width: 782px) {
	.fp-account { margin-left: 0; }
}

/* =========================================================================
   MEMBER ACCOUNT PAGES  (/account/login.php, register, forgotten, reset…)
   ─────────────────────────────────────────────────────────────────────────
   These are plain PHP pages outside WordPress that call get_header() and
   get_footer(). Their markup is fixed legacy Bootstrap 2, so the layout is
   rebuilt here with grid and flex `order` rather than by editing the pages —
   they contain the authentication logic and are not worth the risk.
   ========================================================================= */

#account.row-fluid {
	display: grid;
	grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
	/* Row gap much smaller than the column gap: the intro paragraphs are grid items, so
	   the row gap is the space between them and 44px read as a chasm. The 44px stays
	   between the columns, where it separates the form from the panel beside it. */
	gap: 14px 44px;
	align-items: start;
	max-width: var(--fp-wrap);
	margin: 0 auto;
	padding: 40px 20px 56px;
}

/* Intro copy: the grid gap does the spacing, and match the 16px the rest of the site
   uses rather than the 15px site default these legacy pages inherited.
   max-width:none overrides the 78ch reading measure applied to every paragraph inside
   a .row-fluid — right for long body copy, but it left this two-line intro stopping
   380px short of the form beneath it. */
#account.row-fluid > p { margin: 0; max-width: none; font-size: 16px; line-height: 1.7; }

/* The blocks below the intro still want air above them. */
#account.row-fluid > form,
#account.row-fluid > .span12 { margin-top: 22px; }

#account.row-fluid > h2 {
	grid-column: 1 / -1;
	font-size: clamp(26px, 3.2vw, 36px);
	font-weight: 600;
	margin: 0;
}

/* The form column */
#account .row { min-width: 0; }

#account form.login,
#account form:not(.fp-pwform) {
	display: flex;
	flex-direction: column;
	background: var(--fp-grey-2);
	border: 1px solid var(--fp-line);
	border-top: 3px solid var(--fp-red);
	padding: 26px 26px 28px;
}

/*
 * The details forms are a wrapping ROW, not a column.
 *
 * My Account mixes two shapes at the top level: .span12 sections that want a line to
 * themselves, and bare pairs of .span6 (Job Title + Company, and two more under YOUR
 * FLEET) that the old float layout sat side by side. As a column every one of them ran
 * full width, which is what made the order look scrambled.
 */
#account form:not(.login):not(.fp-pwform) {
	flex-direction: row; flex-wrap: wrap;
	gap: 0 2.5%;
	align-items: flex-start;
}
#account form:not(.login):not(.fp-pwform) > [class*="span"] { flex: 0 1 100%; min-width: 0; }

@media (min-width: 783px) {
	#account form:not(.login):not(.fp-pwform) > .span2 { flex: 0 1 14%; }
	#account form:not(.login):not(.fp-pwform) > .span4 { flex: 0 1 31.3%; }
	#account form:not(.login):not(.fp-pwform) > .span6 { flex: 0 1 48.5%; }
	#account form:not(.login):not(.fp-pwform) > .span8 { flex: 0 1 65.6%; }
}

/* Section headings sit on their own line above the fields they introduce. */
#account form > [class*="span"] > p:first-child,
#account form > .span12 > p:first-child {
	flex-basis: 100%; width: 100%;
	margin: 18px 0 12px;
	padding-bottom: 8px; border-bottom: 1px solid var(--fp-line);
	font-size: 12px; font-weight: 700; letter-spacing: .1em;
	color: var(--fp-heading);
}
#account form > [class*="span"]:first-child > p:first-child { margin-top: 0; }

#account form label {
	margin-bottom: 6px;
	font-size: 13px; font-weight: 600; color: var(--fp-heading);
}
#account form input[type="text"],
#account form input[type="email"],
#account form input[type="password"],
#account form select { margin-bottom: 18px; }

/* --- the registration form ----------------------------------------------- *
 *
 * The markup is orion's Bootstrap 2 grid: sections are .span12, and the fields inside
 * them are .span2/.span4/.span6 expecting a row to lay them out. Nothing made those
 * containers rows any more, so Title, First Name and Last Name stacked and the select
 * sat a different height from the inputs beside it.
 */
/*
 * div only. The opt-in checkboxes are <label class="checkbox span12">, so an unscoped
 * .span12 turned each one into a wrapping flex row — the box on one line and its
 * sentence on the next.
 */
#account form > [class*="span"] > div.span12,
#account form > #location,
#account form > #company,
#account form > #fleet {
	display: flex; flex-wrap: wrap;
	gap: 0 2.5%;
	align-items: flex-end;    /* labels differ in length; align on the inputs */
}

/*
 * Full width is the default for a field wrapper; the media block further down narrows
 * the ones that pair up.
 *
 * The per-section variants of this rule (#location, #company, #fleet) have been
 * removed: two IDs in a selector outranks anything the width rules can reasonably
 * carry, so they silently pinned those sections at 100% and no column width would take.
 * The generic selectors below cover them — every one of those sections also carries
 * class="span12".
 */
#account form > [class*="span"] > .span12 > [class*="span"],
#account form > [class*="span"] > [class*="span"] { flex: 0 1 100%; min-width: 0; }

/*
 * My Account nests one level shallower than Register — its fields are direct children
 * of the section, with no inner wrapper — so the section itself has to be the row.
 */
#account form > div[class*="span"]:has(> div[class*="span"]) {
	display: flex; flex-wrap: wrap;
	gap: 0 2.5%;
	align-items: flex-end;
}

/*
 * Column widths, at any depth.
 *
 * One block instead of a rule per section: the two forms nest differently — Register
 * wraps its fields in an inner .span12, My Account does not, and some pairs sit at the
 * top level of the form — and chasing each shape separately is how Register ended up
 * with its fleet sizes stacked one per row while My Account had them two-up.
 *
 * :not(.span12) is not decoration: it lifts these above the `flex: 0 1 100%` rules
 * that give every span a full-width default, which are equally specific and appear
 * earlier.
 */
@media (min-width: 783px) {
	#account form [class*="span"] > .span2:not(.span12),
	#account form > .span2:not(.span12) { flex: 0 1 14%; }

	#account form [class*="span"] > .span4:not(.span12),
	#account form > .span4:not(.span12) { flex: 0 1 31.3%; }

	#account form [class*="span"] > .span6:not(.span12),
	#account form > .span6:not(.span12) { flex: 0 1 48.5%; }

	#account form [class*="span"] > .span8:not(.span12),
	#account form > .span8:not(.span12) { flex: 0 1 65.6%; }
}

/* Section headings run the full width of their row. */
#account > form > [class*="span"] > p:first-child,
#account form > #location > p:first-child {
	flex-basis: 100%;
	margin: 0 0 14px;
	font-size: 12.5px; font-weight: 700; letter-spacing: .09em;
	color: var(--fp-heading);
}

/*
 * The newsletter opt-in. The source puts the <select> before the sentence it belongs
 * to, so the dropdown appeared above its own label. Reordered here rather than in the
 * PHP, which is shared with the live site.
 */
/*
 * The newsletter opt-in, on both forms. The source puts the <select> before the
 * sentence it belongs to, so the dropdown appeared above its own label.
 */
#account form .span6.top-8,
#account form .span6.top-10 {
	order: 2;
	flex: 1 1 100%;          /* full width forces the wrap, so it starts a new line */
	margin-top: 4px;
}
#account form .span6.top-8 label,
#account form .span6.top-10 label {
	display: block; margin: 0 0 8px;
	font-size: 14.5px; font-weight: 400; color: var(--fp-ink); line-height: 1.6;
}
#account form .span2:has(#emailoptin) { order: 3; }
#account form .span2:has(#emailoptin) label { display: none; }

/* Long explanatory copy and the closing note run the full width, not a grid column. */
#account form p.span12,
#account form > [class*="span"] .span12 > p,
#account form .span12 > p {
	flex-basis: 100%; width: 100%; max-width: none;
	margin: 6px 0 14px;
	font-size: 14.5px; line-height: 1.65; color: var(--fp-muted);
}

/*
 * Reordering, not re-authoring. The source markup puts "Register Here" above the
 * Login button and hides Login below a Forgotten Password link — so the secondary
 * action came first. `order` puts the primary action back on top without touching
 * the PHP.
 */
#account form.login .span6.right { order: 2; display: flex; flex-direction: column; align-items: stretch; }
#account form.login .span6       { order: 3; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--fp-line); }
#account form .error-popup { order: 4; }

#account form.login .span6.right input[type="submit"] { order: 1; width: 100%; margin-bottom: 12px; }
#account form.login .span6.right a                    { order: 3; font-size: 13px; font-weight: 600; align-self: flex-start; }
#account form.login .span6.right br                   { display: none; }

/* Facebook sign-in, previously bare text with an onclick */
#account .fb-button {
	order: 2;
	display: block; margin-bottom: 12px; padding: 11px 18px;
	background: #1877f2; color: #fff;
	font-size: 14px; font-weight: 600; text-align: center;
	cursor: pointer; user-select: none;
}
#account .fb-button:hover { background: #145fc4; }

/* "Register Here" is the secondary route — outline, not another solid red button.
   Scoped with :not(.right): .span6.right also matches .span6, so without it the
   Login submit inside that block picked up the outline and stopped reading as the
   primary action. */
#account form.login .span6:not(.right) .button {
	display: block; width: 100%; text-align: center;
	background: #fff; color: var(--fp-red);
	border: 2px solid var(--fp-red);
	padding: 10px 18px;
	text-decoration: none;
}
#account form.login .span6:not(.right) .button:hover { background: var(--fp-red); color: #fff; }

/* The explanatory column */
#account > .span12 {
	background: #fff;
	border: 1px solid var(--fp-line);
	padding: 26px 28px;
}
#account > .span12 h4 {
	margin: 0 0 12px;
	font-size: 19px; font-weight: 600; color: var(--fp-heading);
	padding-bottom: 10px; border-bottom: 3px solid var(--fp-red);
}
#account > .span12 p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.7; color: var(--fp-muted); max-width: 62ch; }
#account > .span12 p:last-child { margin-bottom: 0; }

/* --- member dashboard ----------------------------------------------------- *
 *
 * The account page was 886 lines of form and nothing else: no greeting, no sense of
 * what membership gets you, and no way to change a password. The form is still there,
 * below; this is what a member now lands on.
 */
#account.fp-dash { grid-template-columns: minmax(0, 1fr); gap: 0 44px; }

.fp-dash__head {
	display: flex; align-items: flex-start; justify-content: space-between;
	flex-wrap: wrap; gap: 16px;
	padding-bottom: 18px; margin-bottom: 26px;
	border-bottom: 2px solid var(--fp-line);
}
.fp-dash__head h2 { margin: 0 0 6px !important; }
.fp-dash__since { margin: 0 !important; max-width: none; font-size: 15px; color: var(--fp-muted); }
.fp-dash__since strong { color: var(--fp-ink); }

.fp-dash__out {
	padding: 9px 18px;
	background: none; color: var(--fp-red);
	box-shadow: inset 0 0 0 1px var(--fp-red);
	font-size: 13.5px; font-weight: 700; text-decoration: none;
	white-space: nowrap;
}
.fp-dash__out:hover { background: var(--fp-red); color: #fff; }

.fp-dash__tools { margin-bottom: 8px; }
.fp-dash__tools h3 { margin: 0 0 4px; font-size: 19px; font-weight: 600; }
.fp-dash__tools > p { margin: 0 0 16px !important; max-width: none; color: var(--fp-muted); }

/* The toolbox showcase is built for a page; inside the dashboard it wants to be
   tighter and it must not repeat the "members only" pitch to a member. */
.fp-dash .fp-tools { margin-bottom: 30px; }
.fp-dash .fp-tools__lock,
.fp-dash .fp-tools__note { display: none; }

/* Tabs, so the account is three short pages rather than one very long one. Every
   panel stays in the DOM — the details form spans one of them and still submits in
   full whichever tab is showing. */
.fp-acctabs {
	display: flex; flex-wrap: wrap; gap: 4px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--fp-line);
}
.fp-acctab {
	padding: 11px 22px;
	margin-bottom: -1px;
	background: none; border: 0; border-bottom: 3px solid transparent;
	font-family: inherit; font-size: 14.5px; font-weight: 600;
	color: var(--fp-muted); cursor: pointer;
}
/* The site-wide button rule paints every <button> red on hover; these are tabs, not
   buttons, so the state has to be stated explicitly. */
.fp-acctab:hover,
.fp-acctab:focus,
.fp-acctab.is-active { background: none; color: var(--fp-ink); }
.fp-acctab.is-active { border-bottom-color: var(--fp-red); }
.fp-acctab:focus-visible { outline: 2px solid var(--fp-red); outline-offset: -2px; }

.fp-accpanels > .fp-tabpanel > h3 { margin: 0 0 4px; font-size: 19px; font-weight: 600; }
.fp-dash__blurb { margin: 0 0 18px !important; max-width: none; color: var(--fp-muted); }

#account.fp-dash .fp-dash__panel {
	background: #fff; border: 1px solid var(--fp-line); border-top: 3px solid var(--fp-red);
	padding: 24px 26px 26px;
	margin: 0 0 34px;
	max-width: 560px;
}
.fp-dash__panel h3 { margin: 0 0 16px; font-size: 19px; font-weight: 600; }

.fp-pwform { display: flex; flex-direction: column; }
.fp-pwform label { margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--fp-heading); }
.fp-pwform input[type="password"] { margin-bottom: 16px; }
.fp-pwform input[type="submit"] { align-self: flex-start; margin-top: 4px; }

/* The account grid has one column now; the panels manage their own width. */
#account.fp-dash > .fp-acctabs,
#account.fp-dash > .fp-accpanels { grid-column: 1 / -1; }

/* --- forgotten password / reset password --------------------------------- *
 *
 * Both are single-purpose pages with one short form. They were inheriting the login
 * page's two-column grid, so the form sat in a 440px column with two thirds of the
 * page empty beside it, and on the forgotten page the whole thing was wrapped in the
 * .span12 card, giving a card inside a card.
 */
#account.fp-account--narrow {
	grid-template-columns: minmax(0, 1fr);
	max-width: 620px;
}

#account.fp-account--narrow > .span12 {
	background: none; border: 0; padding: 0;
}

#account.fp-account--narrow > .span12 > h2,
#account.fp-account--narrow > h2 {
	margin: 0 0 10px;
	padding: 0; border: 0;
	font-size: clamp(26px, 3.2vw, 34px); font-weight: 600; color: var(--fp-ink);
}

#account .fp-account__lead {
	margin: 0 0 20px;
	max-width: none;
	font-size: 15.5px; line-height: 1.65; color: var(--fp-muted);
}

/* One field and one button — the login form's two-column footer has nothing to do. */
#account.fp-account--narrow form.login .span6,
#account.fp-account--narrow form.login .span6.right {
	flex-basis: 100%;
	margin: 0; padding: 0; border: 0;
}
#account.fp-account--narrow form.login .span6.right { order: 1; margin-bottom: 14px; }
#account.fp-account--narrow form.login .span6:not(.right) {
	order: 2;
	padding-top: 14px; border-top: 1px solid var(--fp-line);
	font-size: 13.5px;
}
#account.fp-account--narrow form.login .span6:not(.right) a {
	color: var(--fp-red); font-weight: 600;
}

/* The reset form has no span wrappers at all — just style its submit button. */
#account.fp-account--narrow > form.login input[type="submit"] { width: 100%; margin-top: 4px; }

#account .message {
	margin: 0 0 20px; padding: 14px 18px;
	background: var(--fp-grey-2); border-left: 4px solid #1F7A00;
	font-size: 15px; line-height: 1.6; color: var(--fp-ink); max-width: none;
}
#account .message a { color: var(--fp-red); font-weight: 600; }

/* --- marketing preferences ------------------------------------------------ *
 *
 * A run of long checkbox labels with no spacing between them: three sentences stacked
 * hard against each other, then another four. Give each line room and align the box
 * with the first line of its text.
 */
#account form .checkbox,
#account form label.checkbox {
	display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 10px;
	margin: 0 0 12px;
	font-size: 14px; font-weight: 400; line-height: 1.55;
	color: var(--fp-ink);
	max-width: 90ch;
}
#account form .checkbox input[type="checkbox"] {
	margin: 3px 0 0; flex: 0 0 auto;
}

/* The two explanatory sentences that introduce each group. */
#account form #optin > p,
#account form .span12 > p:not(:first-child) {
	margin: 18px 0 12px;
	font-size: 14.5px; line-height: 1.65; color: var(--fp-muted);
	max-width: 90ch;
}

#account form #optin { margin-top: 8px; }
#account form #optin > .span12 { margin-bottom: 6px; }

/* Validation messages */
#account .error {
	grid-column: 1 / -1;
	margin: 0; padding: 12px 16px;
	background: #fdeaea; border-left: 4px solid var(--fp-red);
	color: #7a0000; font-size: 14px; font-weight: 600;
}
#account .error:empty,
#account .message:empty { display: none; }


/* Registration is a long multi-column form — let it use the full width. */
#account.row-fluid:not(:has(form.login)) { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 900px) {
	#account.row-fluid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* --- Company Car Tax: results placeholder + explanatory notes ------------ */

/*
 * The "Your results will automatically display here" line appears once per selector
 * and is a status message, not body copy — quieter and italic so it reads as a hint
 * rather than competing with the tool above it.
 */
#main.row-fluid p.col1.margin {
	margin: 4px 0 0;
	padding: 10px 12px;
	background: var(--fp-grey-2);
	border-left: 3px solid var(--fp-line);
	font-size: 12.5px; font-style: italic; color: var(--fp-muted);
}

/*
 * The notes beneath the calculator. Full width, set smaller than body copy — this is
 * reference material people scan, not prose they read start to finish — and given the
 * CVD attribution its own line.
 */
#main.row-fluid > .span12:last-child:not(.fp-evfuel-page):not(.fp-supplier-page) {
	margin-top: 34px;
	padding: 24px 26px 20px;
	background: var(--fp-grey-2);
	border-top: 3px solid var(--fp-red);
	columns: 2;
	column-gap: 44px;
}

#main.row-fluid > .span12:last-child:not(.fp-evfuel-page):not(.fp-supplier-page) > a:first-child {
	display: block;
	column-span: all;
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--fp-line);
}
#main.row-fluid > .span12:last-child:not(.fp-evfuel-page):not(.fp-supplier-page) img { max-height: 40px; width: auto; }

#main.row-fluid > .span12:last-child:not(.fp-evfuel-page):not(.fp-supplier-page) p {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.65;
	color: var(--fp-muted);
	max-width: none;
	break-inside: avoid;
}
#main.row-fluid > .span12:last-child:not(.fp-evfuel-page):not(.fp-supplier-page) p:last-child { margin-bottom: 0; }
#main.row-fluid > .span12:last-child:not(.fp-evfuel-page):not(.fp-supplier-page) a { font-weight: 600; }

@media (max-width: 782px) {
	#main.row-fluid > .span12:last-child:not(.fp-evfuel-page):not(.fp-supplier-page) { columns: 1; padding: 20px; }
}

/* --- Reviews, flagged in the nav ----------------------------------------- *
 *
 * Reviews is the section FleetPoint wants people to find, so it does not sit as another
 * grey text link. Brand red with a star — the same star the ratings are drawn with, so
 * it reads as scored reviews rather than more news.
 *
 * The hook is a CSS class on the menu item (Appearance > Menus > CSS Classes), so the
 * treatment can be moved to a different item without touching the stylesheet.
 */
.fp-mainnav__list > li.fp-nav-reviews > a {
	background: var(--fp-red); color: #fff;
	padding: 0 18px;
	font-weight: 600;
}
.fp-mainnav__list > li.fp-nav-reviews > a:hover,
.fp-mainnav__list > li.fp-nav-reviews:focus-within > a { background: var(--fp-red-dark); color: #fff; }
.fp-mainnav .fp-nav-reviews > a::after { border-top-color: #fff; }

.fp-navmark {
	width: 15px; height: 15px;
	fill: currentColor;
	margin-right: 7px;
	vertical-align: -2px;
	flex: 0 0 auto;
}

/* --- Green News, flagged in the topics bar ------------------------------- *
 *
 * The topics bar is a row of plain text links with no vertical room for a solid block
 * like the Reviews button downstairs, so this is coloured type and a leaf rather than a
 * chip. #1F7A00 is the Green Fleet News band colour and clears 5.9:1 on white.
 */
.fp-catnav__list > li.fp-nav-green > a { color: #1F7A00; }
.fp-catnav__list > li.fp-nav-green > a:hover,
.fp-catnav__list > li.fp-nav-green:focus-within > a { color: #145200; }
.fp-catnav .fp-nav-green > a::after { border-top-color: #1F7A00; }

/* --- Fleet Toolbox as a nav dropdown ------------------------------------ */

/* The trigger reads as an action, not another nav link. */
.fp-mainnav__list > li.fp-toolboxnav > a {
	background: var(--fp-red); color: #fff;
	padding: 0 18px; margin-left: 6px;
	font-weight: 600;
}
.fp-mainnav__list > li.fp-toolboxnav > a:hover { background: var(--fp-red-dark); color: #fff; }
.fp-mainnav .fp-toolboxnav > a::after { border-top-color: #fff; }

/* The shared icon markup paints itself red, which is invisible on the red trigger. */
.fp-mainnav__list > li.fp-toolboxnav > a > .fp-toolbox__icon {
	width: 18px; height: 18px;
	margin-right: 8px;
	color: #fff;
	vertical-align: -3px;
}

/* Wider panel than a normal dropdown — each row carries an icon and two lines. */
.fp-toolboxnav__list { min-width: 290px; }

.fp-toolboxnav__list .fp-toolitem > a {
	display: flex; align-items: center; gap: 11px;
	padding: 10px 18px;
	white-space: normal;
}
.fp-toolboxnav__list .fp-toolbox__icon { width: 22px; height: 22px; flex: 0 0 auto; color: var(--fp-red); }
.fp-toolboxnav__list .fp-toolitem__text { display: flex; flex-direction: column; line-height: 1.25; }
.fp-toolboxnav__list .fp-toolitem__text strong { font-size: 13.5px; font-weight: 600; }
.fp-toolboxnav__list .fp-toolitem__text span { font-size: 11.5px; color: var(--fp-muted); }
.fp-toolboxnav__list .fp-toolitem > a:hover .fp-toolitem__text strong { color: var(--fp-red); }

@media (max-width: 782px) {
	.fp-mainnav__list > li.fp-toolboxnav > a { margin-left: 0; }
}

/* --- header search ------------------------------------------------------ */

/*
 * Search sits between the Fleet Toolbox and Subscribe and takes the slack in the bar,
 * so the empty middle stretch is the button rather than dead space. No red: it is not
 * one of the calls to action, and a third red block beside Subscribe and Login read as
 * one long button.
 */
.fp-btn--search {
	flex: 1 1 auto;
	justify-content: center;      /* centred in the space it fills, not left-hugging */
	gap: 9px;
	padding: 0 14px;
	background: none; color: var(--fp-ink);
	font-size: 14px;
	border: 0; cursor: pointer;
	font-family: inherit;
}
.fp-btn--search svg { width: 17px; height: 17px; flex: 0 0 auto; }
.fp-btn--search:hover,
.fp-btn--search:focus,
.fp-btn--search[aria-expanded="true"] { background: rgba(0, 0, 0, .07); color: var(--fp-ink); }

/* The nav gives up the slack it used to hold, or the two would fight over it — but it
   must not shrink below its own content either, or the menu wraps to a second row. */
.fp-mainnav { flex: 0 0 auto; }

/*
 * Subscribe and Login are the two account actions, so they sit together at the right
 * end. Subscribe takes the auto margin that pushes the pair over, and carries the same
 * white hairline the home icon uses to separate the two.
 */
.fp-btn--subscribe { position: relative; }
.fp-btn--subscribe::after {
	content: "";
	position: absolute; right: 0; top: 24%; bottom: 24%;
	width: 1px;
	background: rgba(255, 255, 255, .65);
}
.fp-btn--subscribe:hover::after { background: rgba(255, 255, 255, .8); }

.fp-mainbar__inner .fp-btn--subscribe ~ .fp-btn--login,
.fp-mainbar__inner .fp-btn--subscribe ~ .fp-account { margin-left: 0; }

/*
 * Signed in: one button occupying both the Subscribe and Login slots. It takes the auto
 * margin that used to push Subscribe over, so it still finishes flush with the right
 * edge of the bar. Logging out is inside the account area.
 */
.fp-btn--account { margin-left: auto; gap: 8px; padding: 0 24px; }
.fp-btn--account svg { width: 16px; height: 16px; flex: 0 0 auto; }
.fp-account__hi { font-weight: 400; opacity: .8; }

/* The grey belongs on the inner band, exactly as .fp-mainbar__inner carries it — on
   the full-width strip it ran 20px past the nav bar at each end and the two rows did
   not line up. */
.fp-search { background: none; }
.fp-search__inner {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--fp-grey);
	max-width: var(--fp-band);
	/* Padding, not zero: with the row centred and no inset, a narrow desktop window let
	   the field and the two buttons fill the band edge to edge and sit hard against the
	   grey. This keeps a margin of grey to the left and right at every width. */
	padding-block: 9px;
	padding-inline: 28px;
}

/*
 * Kept shallower than the 46px nav bar above it — this is a panel that drops out of the
 * header, not a second bar competing with it. One fixed height on all three controls,
 * because align-items: stretch would size the row from whichever grew tallest.
 *
 * Scoped through .fp-search so it outranks the site-wide input[type="search"] rule,
 * which is an attribute selector and would otherwise win on specificity and put its own
 * 10px padding back.
 */
.fp-search .fp-search__field,
.fp-search .fp-search__go,
.fp-search .fp-search__close { height: 34px; }

.fp-search .fp-search__field {
	/* Capped, not stretched. A search box the full 1160px looks like a form the page is
	   asking you to fill in; this is centred in the band at a width that still shows a
	   long query in full. It shrinks before the padding does, so the buttons stay inside
	   the grey rather than the field holding its width and pushing them out. */
	flex: 0 1 900px;
	min-width: 0;
	padding: 0 12px;
	font-size: 13.5px;
	border: 1px solid #c8c8c8; border-radius: 0;
}
.fp-search__field:focus { border-color: var(--fp-red); box-shadow: 0 0 0 3px rgba(150,0,0,.12); outline: none; }

.fp-search .fp-search__go {
	padding: 0 20px;
	background: var(--fp-red); color: #fff; border: 0;
	font-size: 13px; font-weight: 600; cursor: pointer;
}
.fp-search__go:hover { background: var(--fp-red-dark); }

.fp-search .fp-search__close {
	padding: 0 11px;
	background: none; border: 1px solid #c8c8c8; color: var(--fp-muted);
	font-size: 16px; line-height: 1; cursor: pointer;
}
.fp-search__close:hover { background: #fff; color: var(--fp-ink); }

@media (max-width: 782px) {
	.fp-btn--search { flex: 0 0 auto; }
	.fp-search__inner { padding-inline: 20px; flex-wrap: wrap; }
	.fp-search .fp-search__field { flex: 1 1 100%; }
}

/* --- Show/hide password toggle ------------------------------------------- *
 *
 * Injected by fleetpoint.js around any input carrying data-fp-reveal, so these rules
 * only ever apply where the script has run.
 *
 * The wrapper takes over the input's own margin-bottom: #account gives password fields
 * 18px, and leaving it on the input would have put the gap inside the wrapper and
 * dropped the button 18px below centre.
 */
.fp-pw { position: relative; display: block; }

#account form .fp-pw { margin-bottom: 18px; }

#account form .fp-pw input[type="password"],
#account form .fp-pw input[type="text"] {
	margin-bottom: 0;
	padding-right: 48px;   /* room for the button, so text never runs under it */
}

.fp-pw__toggle {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	/* The site-wide button rule sets 11px 26px, which would make this a slab. */
	width: 38px;
	height: 38px;
	min-width: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	border-radius: 4px;
	color: var(--fp-ink-soft, #5a6472);
	cursor: pointer;
	line-height: 1;
}

.fp-pw__toggle:hover { background: none; color: var(--fp-red); }

.fp-pw__toggle:focus-visible {
	outline: 2px solid var(--fp-red);
	outline-offset: 1px;
}

/* One icon at a time: eye when hidden, struck-through eye when showing. */
.fp-pw__icon--hide { display: none; }
.fp-pw__toggle[aria-pressed="true"] .fp-pw__icon--show { display: none; }
.fp-pw__toggle[aria-pressed="true"] .fp-pw__icon--hide { display: block; }

/* --- EV Fuel Cost Calculator --------------------------------------------- *
 *
 * Deliberately the same furniture as the Company Car Tax Calculator: white panels with
 * a red top rule, the form on the left, the answer on the right, notes underneath. The
 * toolbox should feel like one set of tools rather than six separate ones.
 *
 * Everything is scoped inside .fp-evfuel so nothing leaks onto the legacy grid, and the
 * #main.row-fluid ID is used where those older rules would otherwise win.
 */
#main.row-fluid .fp-evfuel p { max-width: none; }

#main .fp-evfuel__title { margin: 0 0 14px; }

#main .fp-evfuel__lead {
	margin: 0 0 26px;
	font-size: 17px; line-height: 1.6; color: var(--fp-muted);
}

.fp-evfuel__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px;
	margin-bottom: 34px;
	align-items: start;
}

.fp-evfuel__col {
	background: #fff;
	border: 1px solid var(--fp-line);
	border-top: 3px solid var(--fp-red);
}

#main .fp-evfuel__col > h3 {
	margin: 0;
	padding: 18px 24px;
	border-bottom: 1px solid var(--fp-line);
	font-size: 18px; font-weight: 600;
}

.fp-evfuel__form { margin: 0; padding: 22px 24px 24px; }

.fp-evfuel__form label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px; font-weight: 600; color: var(--fp-muted);
}

#main .fp-evfuel__form select,
#main .fp-evfuel__form input[type="number"] {
	display: block;
	width: 100%; max-width: none;
	margin: 0 0 16px;
}

#main .fp-evfuel__hint {
	margin: -10px 0 18px;
	font-size: 12.5px; font-style: italic; line-height: 1.5;
	color: var(--fp-muted);
}

.fp-evfuel__submit {
	width: 100%;
	background: var(--fp-red);
	color: #fff;
	border: 0;
	font-size: 15px; font-weight: 600;
	cursor: pointer;
}
.fp-evfuel__submit:hover { background: var(--fp-red-dark); color: #fff; }

/* Result ------------------------------------------------------------------ */

.fp-evfuel__result { padding: 0; }

#main .fp-evfuel__empty,
#main .fp-evfuel__error {
	margin: 0;
	padding: 26px 24px;
	font-size: 14.5px; color: var(--fp-muted);
}
#main .fp-evfuel__error { color: var(--fp-red); }

/* The answer itself — the one number people came for, so it gets the room. */
#main .fp-evfuel__figure {
	margin: 0;
	padding: 26px 24px 22px;
	border-bottom: 1px solid var(--fp-line);
	text-align: center;
	line-height: 1;
}
#main .fp-evfuel__figure strong {
	display: block;
	font-size: 54px; font-weight: 700;
	color: var(--fp-red);
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}
#main .fp-evfuel__figure span {
	display: block;
	margin-top: 8px;
	font-size: 13px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .08em;
	color: var(--fp-muted);
}

/* The figures behind the answer, so the number is explainable. */
.fp-evfuel__breakdown {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	gap: 0;
	margin: 0;
	padding: 6px 24px 20px;
}
.fp-evfuel__breakdown dt,
.fp-evfuel__breakdown dd {
	margin: 0;
	padding: 10px 0;
	font-size: 13.5px;
	border-bottom: 1px solid var(--fp-line);
}
.fp-evfuel__breakdown dt { color: var(--fp-muted); font-weight: 600; padding-right: 18px; }
.fp-evfuel__breakdown dd { text-align: right; font-variant-numeric: tabular-nums; }
.fp-evfuel__breakdown dt:last-of-type,
.fp-evfuel__breakdown dd:last-of-type { border-bottom: 0; }

/* Notes ------------------------------------------------------------------- */

.fp-evfuel__notes {
	margin-top: 34px;
	padding: 24px 26px 20px;
	background: var(--fp-grey-2);
	border-top: 3px solid var(--fp-red);
}
#main.row-fluid .fp-evfuel__notes p {
	margin: 0 0 12px;
	font-size: 13px; line-height: 1.65; color: var(--fp-muted);
}
#main.row-fluid .fp-evfuel__notes p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
	.fp-evfuel__grid { grid-template-columns: minmax(0, 1fr); }
	.fp-evfuel__notes { padding: 20px; }
}

/*
 * Undo the Company Car Tax notes rule, which targets `#main.row-fluid > .span12:last-child`
 * and so claimed this tool's whole wrapper — splitting the entire calculator into two
 * newspaper columns and boxing it in grey. Same specificity (1,3,0), declared later, so
 * this wins without resorting to !important.
 */
#main.row-fluid > .span12.fp-evfuel-page {
	columns: auto;
	column-gap: normal;
	margin-top: 0;
	padding: 0;
	background: none;
	border-top: 0;
}

/* --- Account menu on the desktop bar ------------------------------------- *
 *
 * "Hi, <name>" opens Dashboard / Log out on hover. Desktop only: below 1200px the
 * drawer already gives both a greeting row and a "My dashboard" button, and a hover
 * menu has no meaning on a touch screen.
 *
 * display:contents is what keeps the drawer untouched — the wrapper stops generating a
 * box, so the button and "My dashboard" go on being direct flex children of the column
 * exactly as they were before this wrapper existed.
 */
.fp-acctmenu { display: contents; }
.fp-acctmenu__list { display: none; }

@media (min-width: 1200px) {

	.fp-acctmenu {
		/*
		 * A flex item that stretches, and a flex container in its own right.
		 *
		 * .fp-btn carries `align-self: stretch`, which is what gave this button the full
		 * height of the bar — the same height as Fleet Toolbox and Search. align-self
		 * only applies to a flex child, so wrapping the button in a plain block broke
		 * that chain and it collapsed to the height of its text. The wrapper now takes
		 * the stretch from the bar and passes it on.
		 */
		display: flex;
		align-self: stretch;
		position: relative;
		/* Takes over pushing the pair to the right-hand end of the bar; the button
		   inside can no longer do it now that it is not a flex child of the bar. */
		margin-left: auto;
	}
	.fp-acctmenu > .fp-btn--account { align-self: stretch; margin-left: 0; }

	/*
	 * The same caret the main nav draws on its dropdowns, in the white Reviews uses —
	 * a solid triangle from border colours, not a two-sided chevron. Copied rather than
	 * inherited because this button is not a .menu-item-has-children.
	 */
	.fp-acctmenu > .fp-btn--account::after {
		content: ""; display: inline-block; margin-left: 6px;
		border: 4px solid transparent; border-top-color: #fff;
		transform: translateY(2px);
	}

	/*
	 * Same panel as the main nav dropdowns — white, red top rule, soft shadow — so it
	 * reads as part of the same bar rather than a second design. Right-aligned because
	 * it is the last thing on the bar and a left-aligned panel would run off-screen.
	 */
	.fp-acctmenu__list {
		display: block;
		position: absolute; top: 100%; right: 0; z-index: 60;
		min-width: 200px; margin: 0; padding: 8px 0;
		list-style: none; background: #fff;
		border: 1px solid var(--fp-line); border-top: 3px solid var(--fp-red);
		box-shadow: 0 12px 28px rgba(0,0,0,.14);
		opacity: 0; visibility: hidden;
		transform: translateY(6px);
		transition: opacity .14s ease, transform .14s ease;
	}

	.fp-acctmenu:hover .fp-acctmenu__list,
	.fp-acctmenu:focus-within .fp-acctmenu__list {
		opacity: 1; visibility: visible;
		transform: translateY(0);
	}

	.fp-acctmenu__list li { margin: 0; }

	.fp-acctmenu__list a {
		display: block; padding: 9px 18px;
		font-size: 13.5px; font-weight: 500;
		color: var(--fp-ink); text-decoration: none;
		white-space: nowrap;
	}
	.fp-acctmenu__list a:hover,
	.fp-acctmenu__list a:focus-visible {
		background: var(--fp-grey-2);
		color: var(--fp-red);
	}

}

/* --- Whole Life Cost: dressing the React app as a FleetPoint tool --------- *
 *
 * The calculator is a compiled React bundle (fp-core/assets/wlclite) that arrives with
 * its own card, headings and grey blurb, so it read as a different product embedded in
 * the page rather than one of our tools. Everything below re-skins it to match the EV
 * Fuel Cost and Company Car Tax calculators — white panels, red top rule, our form
 * controls — without touching the bundle.
 *
 * All rules are scoped `.fp-wlc .wlc_*`, which is two classes to the app's one, so they
 * win regardless of which stylesheet loads first.
 */

/* The app's own blurb. Kept — it is their copy — but demoted to a note, since the page
   already carries a lead paragraph saying much the same thing. */
.fp-wlc .wlc_notice--section {
	margin: 0 0 24px;
	padding: 16px 20px;
	background: var(--fp-grey-2);
	border-left: 3px solid var(--fp-line);
}
#main.row-fluid .fp-wlc .wlc_notice--section p,
.fp-wlc .wlc_notice--section p { margin: 0; }
.fp-wlc .wlc_notice--section small {
	font-size: 13px; line-height: 1.6; color: var(--fp-muted);
}

/* The two working panels. */
.fp-wlc .wlc_form--wrapper,
.fp-wlc .wlc_home-mb {
	background: #fff;
	border: 1px solid var(--fp-line);
	border-top: 3px solid var(--fp-red);
	padding: 22px 24px 24px;
	margin-bottom: 24px;
}

/*
 * The app opens with an <h1> reading "Find the True Cost Whole Life Cost Calculator",
 * directly beneath the page's own title saying the same thing — two competing headlines.
 * Both its h1s and the League Table h2 become panel headings at the size the other tools
 * use for a section.
 */
/*
 * !important is unavoidable here, and only here. The bundle ships a reset that forces
 * `#wlc_root h1..h6 { font-weight: 700 !important; line-height: 1.1 !important }` and a
 * size per level, plus `#wlc_root p, span, ul { font-size: 16px !important }`. Nothing
 * short of !important reaches past that, so these declarations match it — at a higher
 * specificity than the bundle's, which is what actually decides the winner.
 */
#main .fp-wlc .wlc_form--wrapper h1,
#main .fp-wlc .wlc_form--wrapper h2,
#main .fp-wlc .wlc_home-mb > h2,
.fp-wlc .wlc_form--wrapper h1,
.fp-wlc .wlc_home-mb > h2 {
	margin: 0 0 4px !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: var(--fp-ink);
}
#main.row-fluid .fp-wlc .wlc_form--wrapper > p,
.fp-wlc .wlc_form--wrapper > p {
	margin: 0 0 18px;
	font-size: 14px !important;
	color: var(--fp-muted);
}
/* The blurb, likewise held down by the 16px rule above. */
#main .fp-wlc .wlc_notice--section small,
.fp-wlc .wlc_notice--section small { font-size: 13px !important; }

/* Form controls, matched to the EV calculator. */
.fp-wlc .wlc_form--group { margin-bottom: 16px; }
#main .fp-wlc .wlc_form--control,
.fp-wlc .wlc_form--control,
.fp-wlc .wlc_form--group select,
.fp-wlc .wlc_form--group input {
	display: block;
	width: 100%; max-width: none;
	margin: 0;
}

/* Buttons in brand red rather than the bundle's own. */
.fp-wlc .wlc_btn--primary {
	background: var(--fp-red);
	color: #fff;
	border: 0;
	padding: 0 24px;
	min-height: 42px;
	font-size: 14.5px; font-weight: 600;
	border-radius: 0;
	cursor: pointer;
}
.fp-wlc .wlc_btn--primary:hover { background: var(--fp-red-dark); color: #fff; }

.fp-wlc .wlc_divider--line {
	margin: 22px 0;
	border: 0; border-top: 1px solid var(--fp-line); height: 1px;
}

/*
 * THE MOBILE FIX.
 *
 * The results table is 875px wide and was sitting in a 350px column, so most of it was
 * simply unreachable. Its own wrapper now scrolls horizontally — the honest answer for a
 * dense comparison table, which loses its meaning if the columns are stacked — and the
 * page itself never scrolls sideways.
 */
.fp-wlc .wlc_table--wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}
.fp-wlc .wlc_table { min-width: 720px; }

@media (max-width: 782px) {

	/* The filter row is two half-width flex columns on desktop; stacked, they each
	   need the full width or they shrink-wrap to their widest label. */
	.fp-wlc .wlc_flex { flex-wrap: wrap; }
	.fp-wlc .wlc_max--width--half { flex: 1 1 100%; max-width: 100%; }
	.fp-wlc .wlc_from--column { flex-direction: column; }

	.fp-wlc .wlc_form--wrapper,
	.fp-wlc .wlc_home-mb { padding: 18px 16px 20px; }

	/*
	 * Full-width actions, as the EV calculator has. The wrapper is a <span> inside a
	 * flex row, so it shrink-wrapped to the button's text however wide the button was
	 * told to be — the flex-basis has to be set on the wrapper, not just the button.
	 */
	.fp-wlc .wlc_button-wrapper {
		display: block;
		width: 100%;
		flex: 1 1 100%;
	}
	.fp-wlc .wlc_btn--primary { width: 100%; justify-content: center; }
}

/*
 * Square corners. FleetPoint does not use rounded corners anywhere, and the bundle
 * rounds ten different things at 3px to 10px — panels, inputs, buttons, the toast.
 *
 * A blanket reset rather than ten targeted overrides: the radii are scattered through a
 * compiled stylesheet we do not control, and any future rebuild of it could introduce
 * more. Scoped to the calculator, so it reaches nothing else on the site. The one
 * exception is anything genuinely circular — a spinner or an avatar at 100% — which is
 * a shape, not a rounded corner.
 */
.fp-wlc #wlc_root,
.fp-wlc #wlc_root *:not([class*="spinner"]):not([class*="loader"]) {
	border-radius: 0 !important;
}

/*
 * One size for every Fleet Toolbox title.
 *
 * The six tools had drifted to four different treatments — 34px on the fuel calculator,
 * charge map and licence checker, 30px on the EV calculator, and 22.5px on Whole Life
 * Cost and Company Car Tax, which were <h2> rather than <h1>. They are all now h1s
 * carrying this class, matched to the 34px the majority already used.
 *
 * The ID is needed because #main.row-fluid h1/h2 rules from the legacy grid outrank a
 * plain class.
 */
#main .fp-tool__title,
#main.row-fluid .fp-tool__title,
.fp-main .fp-tool__title {
	margin: 0 0 14px;
	font-size: 34px;
	line-height: 1.15;
	font-weight: 600;
	letter-spacing: -.01em;
}

@media (max-width: 782px) {
	#main .fp-tool__title,
	#main.row-fluid .fp-tool__title,
	.fp-main .fp-tool__title { font-size: 27px; }
}

/*
 * The members gate, identical on all six tools.
 *
 * .fp-gate__title is a single class, so on the four templates where the gate sits inside
 * #main.row-fluid the legacy `#main.row-fluid h2` rule outranked it and the heading came
 * out at 34px — while the two tools using the default page template got the intended
 * 21px. The body copy drifted the same way, landing at 16px, 15px and 13px depending on
 * which container it happened to be in. These carry the ID so they win everywhere.
 */
#main .fp-gate__title,
#main.row-fluid .fp-gate__title,
.fp-main .fp-gate__title {
	margin: 0 0 8px;
	font-size: 21px;
	line-height: 1.25;
	font-weight: 600;
}

/*
 * The extra `.fp-gate` in the selector is load-bearing. The Company Car Tax notes rule —
 * `#main.row-fluid > .span12:last-child p { font-size: 13px }` — also matched this
 * paragraph, because on the EV calculator the tool's own wrapper happens to be the last
 * child of #main. That rule is (1,3,0); this now matches it and is declared later.
 *
 * No max-width either: the sentence is about 95 characters and the old 70ch cap broke it
 * onto a second line mid-phrase on desktop.
 */
#main .fp-gate p.fp-gate__text,
#main.row-fluid .fp-gate p.fp-gate__text,
.fp-main .fp-gate p.fp-gate__text {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--fp-muted);
	max-width: none;
}

/* A little breathing room under the fuel calculator's intro, before the tool starts. */
#main .fp-fuel-intro,
#main.row-fluid .fp-fuel-intro { margin-bottom: 26px; }

/*
 * The EV calculator's disclaimer: one column, full width.
 *
 * It was computing as display:grid — inherited from a generic rule elsewhere, not from
 * anything this block asks for — so the two paragraphs were laid out as 355px tracks
 * side by side instead of running the width of the panel. Stated explicitly here so it
 * cannot be re-grid-ed by whatever set it.
 */
#main .fp-evfuel__notes,
#main.row-fluid .fp-evfuel__notes {
	display: block;
	columns: auto;
}
#main.row-fluid .fp-evfuel__notes p {
	max-width: none;
	width: auto;
}

/*
 * "Latest news" on the 404 page.
 *
 * The section bar is the --inset variant, which is white — fine on the homepage where it
 * sits on a grey block, invisible on the 404 where the block has no background. It gets
 * the same grey band and spacing the other sections use, so the page ends with something
 * that looks designed rather than a bare heading over four cards.
 */
.fp-404 .fp-block--404 { padding-top: 34px; }

.fp-404 .fp-sectionbar--inset {
	background: var(--fp-grey);
	margin-bottom: 22px;
	border-top: 3px solid var(--fp-red);
}
.fp-404 .fp-sectionbar--inset .fp-sectionbar__inner { padding: 14px 20px; }
.fp-404 .fp-sectionbar--inset .fp-sectionbar__title { font-size: 19px; font-weight: 600; }

/*
 * The homepage supplier showcase carries one featured advertiser at a time, so the logo
 * is the whole point of the slot rather than one of a row of thumbnails. 62px was sized
 * for a grid of several; at one, it left the panel looking empty and the logo unreadable.
 */
.fp-showcase__logo { height: 104px; }
.fp-showcase__logo img { max-height: 104px; }

@media (max-width: 782px) {
	.fp-showcase__logo { height: 84px; }
	.fp-showcase__logo img { max-height: 84px; }
}

/* --- A supplier's own directory page ------------------------------------- */

/*
 * The Company Car Tax notes rules target `#main.row-fluid > .span12:last-child`, and a
 * supplier page's wrapper is also the last .span12 — so its whole content was being set
 * in two newspaper columns, splitting the strapline and the contact panel down the
 * middle. The page is excluded at source alongside the EV calculator rather than fought
 * with an override; the override lost anyway, because each :not() raises that rule's
 * specificity above a plain class.
 */

.fp-supplier__head {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
	padding: 0 0 22px;
	border-bottom: 1px solid var(--fp-line);
	margin-bottom: 26px;
}

.fp-supplier__logo {
	flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center;
	width: 190px; min-height: 96px;
	padding: 14px 18px;
	background: #fff;
	border: 1px solid var(--fp-line);
}
.fp-supplier__logo img { max-width: 100%; max-height: 90px; width: auto; height: auto; }

.fp-supplier__ident { flex: 1 1 320px; min-width: 0; }

#main .fp-supplier__name { margin: 0 0 8px; font-size: 32px; line-height: 1.15; font-weight: 600; }

.fp-supplier__flag {
	display: inline-block;
	margin-bottom: 8px;
	padding: 4px 10px;
	background: var(--fp-red); color: #fff;
	font-size: 11.5px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .08em;
}

#main.row-fluid .fp-supplier__cats { margin: 0; font-size: 14px; color: var(--fp-muted); max-width: none; }
.fp-supplier__cats a { color: var(--fp-red); font-weight: 600; }

/* Description on the left, the details panel beside it. */
.fp-supplier__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 30px;
	align-items: start;
}

#main.row-fluid .fp-supplier__about p { max-width: none; }

.fp-supplier__contact {
	background: #fff;
	border: 1px solid var(--fp-line);
	border-top: 3px solid var(--fp-red);
	padding: 20px 22px 22px;
}
#main .fp-supplier__contact h2 { margin: 0 0 14px; font-size: 17px; font-weight: 600; }

.fp-supplier__contact dl { margin: 0; }
.fp-supplier__contact dt {
	font-size: 12.5px; font-weight: 600; text-transform: uppercase;
	letter-spacing: .06em; color: var(--fp-muted);
	margin-bottom: 3px;
}
.fp-supplier__contact dd {
	margin: 0 0 14px;
	font-size: 15px;
	word-break: break-word;
}
.fp-supplier__contact dd a { color: var(--fp-ink); }
.fp-supplier__contact dd a:hover { color: var(--fp-red); }

.fp-supplier__cta {
	display: block;
	margin-top: 4px;
	padding: 12px 18px;
	background: var(--fp-red); color: #fff;
	text-align: center; font-weight: 600; font-size: 15px;
	text-decoration: none;
}
.fp-supplier__cta:hover { background: var(--fp-red-dark); color: #fff; text-decoration: none; }

.fp-supplier__back { margin: 30px 0 0; }
.fp-supplier__back a { font-weight: 600; }

@media (max-width: 860px) {
	.fp-supplier__body { grid-template-columns: minmax(0, 1fr); }
	.fp-supplier__head { gap: 18px; }
	.fp-supplier__logo { width: 150px; min-height: 80px; }
	#main .fp-supplier__name { font-size: 26px; }
}

/*
 * A supplier's own headings sit in a column about two-thirds of the page, not the full
 * article measure, so the article h2 size (which the description inherits) broke a
 * strapline like "All your Automotive Lead Generation, Appointment Setting and Digital
 * Solutions in one UK Agency" across six lines of very large type.
 */
#main .fp-supplier__about h2,
#main.row-fluid .fp-supplier__about h2 {
	margin: 0 0 14px;
	font-size: 21px;
	line-height: 1.3;
	font-weight: 600;
	text-wrap: balance;
}
#main .fp-supplier__about h3,
#main.row-fluid .fp-supplier__about h3 { font-size: 17px; margin: 20px 0 8px; }

#main.row-fluid .fp-supplier__about p { font-size: 15.5px; line-height: 1.7; }

/* --- Directory listings: the whole row is the link ------------------------ *
 *
 * The reader's next step from a listing is the supplier's page, so the entire row and
 * card is the target rather than a small link inside it.
 *
 * Done by stretching the name's own anchor over the row — one real link, so it keeps a
 * single tab stop, a proper focus ring and one href for search engines. A wrapping <a>
 * around the whole block, or a JS click handler on the row, would each cost one of those.
 */
.fp-suprow,
.fp-supcard { position: relative; }

.fp-suprow__name a::after,
.fp-supcard__name a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.fp-suprow:hover,
.fp-supcard:hover { border-color: var(--fp-red); }
.fp-suprow:hover .fp-suprow__name a,
.fp-supcard:hover .fp-supcard__name a { color: var(--fp-red); }

/* The focus ring has to come from the row, since the link itself is only the text. */
.fp-suprow:focus-within,
.fp-supcard:focus-within { outline: 2px solid var(--fp-red); outline-offset: 2px; }

/* "More info" — the affordance, not a control. */
.fp-supcard__more {
	display: inline-flex;
	align-items: center;
	/* Centred, and a fixed width so every row's button is the same size — ragged widths
	   made the right-hand edge of the list look uneven. */
	justify-content: center;
	min-width: 150px;
	gap: 8px;
	flex: 0 0 auto;
	align-self: center;
	padding: 9px 16px;
	background: var(--fp-grey-2);
	border: 1px solid var(--fp-line);
	font-size: 14px;
	font-weight: 600;
	color: var(--fp-ink);
	white-space: nowrap;
}

.fp-supcard__more-arrow { transition: transform .15s ease; }

/*
 * In a featured card the body is a vertical stack, so `align-self: center` from the
 * shared rule centred the button under the blurb. Cards read as a left-aligned column —
 * logo, name, description — and the button belongs on that same edge. It also sits at the
 * foot of the card, so a row of cards has its buttons on one line whatever length the
 * descriptions are.
 */
.fp-supcard .fp-supcard__more {
	align-self: flex-start;
	margin-top: auto;
}

.fp-suprow:hover .fp-supcard__more,
.fp-supcard:hover .fp-supcard__more {
	background: var(--fp-red);
	border-color: var(--fp-red);
	color: #fff;
}
.fp-suprow:hover .fp-supcard__more-arrow,
.fp-supcard:hover .fp-supcard__more-arrow { transform: translateX(3px); }

/* The logo is no longer a link, so it must not look like one. */
.fp-suplogo,
.fp-suprow__logo { cursor: inherit; }

@media (max-width: 640px) {
	.fp-supcard__more { width: 100%; justify-content: center; margin-top: 12px; }
}

/* --- Directory pagination ------------------------------------------------ */

.fp-dirsection__count {
	margin-left: 10px;
	font-size: 14px;
	font-weight: 400;
	color: var(--fp-muted);
}

.fp-dirpager {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--fp-line);
}

.fp-dirpager__list {
	display: flex; align-items: center; gap: 6px;
	list-style: none; margin: 0; padding: 0;
}

.fp-dirpager__num,
.fp-dirpager__step {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; height: 38px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid var(--fp-line);
	font-size: 14px; font-weight: 600;
	color: var(--fp-ink); text-decoration: none;
}

a.fp-dirpager__num:hover,
a.fp-dirpager__step:hover {
	border-color: var(--fp-red);
	color: var(--fp-red);
	text-decoration: none;
}

.fp-dirpager__num.is-current {
	background: var(--fp-red);
	border-color: var(--fp-red);
	color: #fff;
}

@media (max-width: 640px) {
	.fp-dirpager { gap: 6px; }
	.fp-dirpager__num,
	.fp-dirpager__step { min-width: 34px; height: 34px; padding: 0 9px; font-size: 13px; }
}

/* Two ways back from a supplier: their category, or the whole directory. */
.fp-supplier__back {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 30px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--fp-line);
}

.fp-supplier__back a {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 10px 18px;
	font-size: 14.5px; font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--fp-line);
}

.fp-supplier__back-primary { background: var(--fp-red); border-color: var(--fp-red); color: #fff; }
.fp-supplier__back-primary:hover { background: var(--fp-red-dark); border-color: var(--fp-red-dark); color: #fff; text-decoration: none; }

.fp-supplier__back-all { background: #fff; color: var(--fp-ink); }
.fp-supplier__back-all:hover { border-color: var(--fp-red); color: var(--fp-red); text-decoration: none; }

@media (max-width: 480px) {
	.fp-supplier__back a { width: 100%; }
}