/* Work Sans — self-hosted (variable, weight 300–700) so it loads same-origin
   under the immutable asset cache, off the render-blocking critical path, and
   without sending visitor IPs to Google. unicode-range kept so the browser only
   fetches the subset a page actually needs. The latin woff2 is <link rel=preload>ed
   in meta-bottom.php. */
@font-face {
	font-family: 'Work Sans';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url(fonts/work-sans/work-sans-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Work Sans';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url(fonts/work-sans/work-sans-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--color-white: #FFFFFF;
	--color-black: #000000;
	--trans-black: rgba(0, 0, 0, 0.65);
	--trans-white: rgba(255, 255, 255, 0.85);
	--black: #000000;
	--color-grey: #333333;
	--color-light: #f3f4f8;
	--text-link-color: #445898;
	--text-link-color-hover: #1f2f63;	
	--nav-color: black;
	--nav-color-desktop: black;
	--nav-color-active: var(--color-primary);
	--nav-dropdown-color: white;
	--nav-toggle-color: white;
	--header-text-color: white;
	--bg-light: #f8f9fa;
	--bg-grey: #cccccc;
	--bg-black: #000000;
	--border: 1px solid #cccccc;
	--color-black-trans: rgba(0, 0, 0, 0.75);
	--color-primary: #1f3065;
	--color-primary-hover: #2241a3;
	--color-primary-dark: #0A1A2E;
	--color-primary-light: rgba(128,162,205,0.1);
	--color-primary-verylight: rgba(241,247,255,0.1);
	--color-secondary: #666666;
	--color-secondary-hover: #333333;
	--color-accent: #00EAAD;
	--color-accent-hover: #13ffc1;
	--color-accent-dark: #00523d;
	--color-accent-light: rgba(167,229,213,0.2);
	--color-accent-verylight: rgba(231,255,249,0.1);
	--color-accent-fade: linear-gradient(var(--color-accent-light), var(--color-accent-verylight));
	--color-success: #28a745;
	--color-success-hover: #157d2d;
	--box-shadow: 0 0 12px rgb(14 15 16 / 18%);
	--boxshadow: var(--box-shadow);
	--box-shadow-dark: 0 0 15px rgb(0 0 0 / 35%);
	--body-font: "Work Sans", sans-serif;
	--heading-font: "Work Sans", sans-serif;
	--border-radius: 1rem;
	--border-radius-small: 0.35rem;
	--headerheight: 80px;
	--headerheight-lg: 95px;
	--bgheader: var(--color-black);
	--footerbg: var(--color-black);
	--footertext: var(--color-white);
	--contentwidth: 1600px;
	--footerwidth: 100%;
	--listviewwidth: 1920px;
	--detailviewwidth: 1570px;
	--narrowwidth: 940px;

	/* Map Bootstrap's primary onto the MotoVend brand colour so utility classes
	   (text-primary, bg-primary, link-primary, etc.) are on-brand out of the box. */
	--bs-primary: var(--color-primary);
	--bs-primary-rgb: 26, 31, 46;

	/* Darker than Bootstrap's #6c757d, which is too faint to read on the light bands
	   (.text-secondary fails WCAG AA contrast on --color-light). */
	--bs-secondary: #596169;
	--bs-secondary-rgb: 89, 97, 105;
}

body {
	font-family: var(--body-font);
	background: var(--color-white);
	color: var(--color-grey);
	margin: 0;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-size: 1rem;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	font-weight: 500;
}

nav .dropdown-menu.show {
	top: 41px !important;
}

nav .dropdown-item.active, nav .dropdown-item:active {
	color: var(--color-accent-dark);
	background-color: var(--color-accent);
}

/* Features mega-menu (desktop): wide multi-column panel with icon + description items */
.mv-megamenu {
	width: min(880px, 94vw);
	max-width: 94vw;
}
.mv-megamenu .mv-megamenu__item {
	white-space: normal;
	margin-bottom: 0.5rem;
}
.mv-megamenu .mv-megamenu__item small {
	font-size: 0.78rem;
}
.mv-megamenu .mv-megamenu__item:hover,
.mv-megamenu .mv-megamenu__item:focus {
	background-color: var(--bs-tertiary-bg, #f6f7f8);
	background-color: var(--color-accent-light);
	color: inherit;
}

.mv-megamenu .mv-megamenu__item.active i.text-primary, .mv-megamenu .mv-megamenu__item.active .text-secondary {
	color: var(--color-accent-dark) !important;
}

.mv-megamenu .mv-megamenu__item.active {
	color: var(--color-accent-dark);
	background-color: var(--color-accent);
}

.scroll-offset {
	scroll-margin-top: 80px;
}

header {
	border-bottom: 1px solid #dee2e6;
	padding: 1rem 0;
	background: var(--color-white);
	position: sticky !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1030;
	min-height: 90px;
}

header .logo-text {
	font-weight: 700;
	font-size: 1.4rem;
	text-decoration: none;
	color: var(--color-primary);
}

nav a.nav-link {
	margin-left: 1.5rem;
	font-weight: 500;
	text-decoration: none;
	color: #222222;
	font-size: 1rem;
}

/* Mint text is unreadable on the white header, so the mint is carried by the underline. */
nav a.nav-link:hover, nav a.nav-link.active, nav a.nav-link:focus {
	color: var(--color-accent-dark);
	text-decoration: underline;
	text-decoration-color: var(--color-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

.offcanvas-body nav a.nav-link {
	margin-left: 0;
	font-size: 1.2rem;
}

/* Vehicle / feature sub-links inside the collapsible mobile menu sections */
.offcanvas-body nav a.mjb-subnav {
	font-size: 1rem;
	opacity: 0.85;
}

/* Mobile nav collapsibles (Features / Sectors) — rotate the caret when open */
.mv-nav-caret {
	transition: transform 0.2s ease;
}
.offcanvas-body [aria-expanded="true"] .mv-nav-caret {
	transform: rotate(180deg);
}

/* Sector (vehicle) menu icons — local monochrome SVGs tinted via a CSS mask, so
   they inherit text-primary (--bs-primary, the brand navy #1f3065) like the old
   Bootstrap icons did and adapt on hover/active. Landscape slot; each icon is
   centred and scaled to fit (contain), so their differing aspect ratios align. */
.mv-veh-icon, .mv-veh-page-icon {
	display: inline-block;
	flex: 0 0 auto;
	width: 2em;
	max-width: 100%;
	height: 1.35em;
	background-color: currentColor;
	-webkit-mask: var(--mv-icon) center / contain no-repeat;
	        mask: var(--mv-icon) center / contain no-repeat;
}

.mv-veh-page-icon {
	background-color: var(--color-white);
	min-width: 150px;
	height: 120px;
}

.mjb-stats-highlight {
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.25);
	padding: 0.75rem 1.25rem;
	border-radius: 8px;
	font-weight: 600;
	font-size: 1.1rem;
	display: inline-block;
	backdrop-filter: blur(4px);
}

.mjb-stats-highlight .mjb-emoji {
	font-size: 1.25rem;
	margin-right: 0.35rem;
	position: relative;
	top: -1px;
}

span#listing-counter {
	font-variant-numeric: tabular-nums;
}

.color-primary {
	color: var(--color-primary);
}

.border-primary {
	border-color: var(--color-primary) !important;
}

/* Pagination active state on the brand accent. Bootstrap declares these vars ON
   .pagination (component-scoped), so a :root override is shadowed — they MUST be set
   on the component. Dark text because the accent (#00EAAD) is too light for white. */
.pagination {
	--bs-pagination-color: var(--color-accent-dark);
	--bs-pagination-hover-color: var(--color-accent-dark);
	--bs-pagination-focus-color: var(--color-accent-dark);
	--bs-pagination-active-bg: var(--color-accent);
	--bs-pagination-active-border-color: var(--color-accent);
	--bs-pagination-active-color: var(--color-accent-dark);
}

/* Burger icon base */
.mjb-burger-icon {
	display: inline-block;
	width: 24px;
	height: 2px;
	background-color: #000000;
	position: relative;
	transition: all 0.2s ease-in-out;
}

.mjb-burger-icon::before,
.mjb-burger-icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 24px;
	height: 2px;
	background-color: #000000;
	transition: all 0.2s ease-in-out;
}

.mjb-burger-icon::before {
	top: -7px;
}

.mjb-burger-icon::after {
	top: 7px;
}

/* Burger -> X animation */
.mjb-nav-toggle.is-open .mjb-burger-icon {
	background-color: transparent;
}

.mjb-nav-toggle.is-open .mjb-burger-icon::before {
	transform: translateY(7px) rotate(45deg);
}

.mjb-nav-toggle.is-open .mjb-burger-icon::after {
	transform: translateY(-7px) rotate(-45deg);
}

.mjb-offcanvas.offcanvas-end {
	width: 75vw;
	max-width: 400px;
}

/* Darker backdrop for offcanvas */
.offcanvas-backdrop.show {
	opacity: 0.6;
}

#hero {
	padding: 5rem 0;
	background: var(--color-primary-dark);
	color: var(--color-white);
	text-align: left;
}

#hero h1 {
	font-weight: 700;
	font-size: clamp(1.375rem, 0.9667rem + 1.7vw, 2.5rem)!important;
	margin-bottom: 1rem;
	line-height: 1.15;
}

/* The key phrase in a hero headline sits on a solid mint block (see .mv-mark). */
#hero h1 strong {
	font-weight: 700;
	background: var(--color-accent);
	color: var(--color-primary-dark);
	padding: 0 0.22em;
	border-radius: 0.12em;
	-webkit-box-decoration-break: clone;
	        box-decoration-break: clone;
}

b, strong {
	font-weight: 700;
}

#hero p.hero-lede {
	max-width: 680px;
	font-size: clamp(1rem, 0.8rem + 1.3vw, 1.1em)!important;
	line-height: 1.6;
}

/* keep small hero text (trust line, scroll hint) small — the id selector would
   otherwise inherit the lede size */
#hero p.small {
	font-size: 0.9rem;
	max-width: none;
}

.blog-list-wrapper, .blog-post-wrapper {
	background: var(--color-light) !important;
}

.feature-page #hero, .page-blog-post #hero {
	padding: 1rem 0 5rem 0;
}

/* Teal-gradient number/keyword for stat-style headlines (e.g. the About hero "20 years").
   Inherits the standard #hero h1 sizing — no custom clamp. */
.mv-stat-gradient {
	background: linear-gradient(90deg, #00EAAD 0%, #6fe3ff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

section {
	padding: 4rem 1rem;
}

section:nth-of-type(odd) {
	background: var(--color-white);
}

section:nth-of-type(even) {
	background: var(--color-light);
}

blockquote {
	border-left: 4px solid var(--color-primary);
	padding-left: 1rem;
	margin-left: 0;
	font-style: italic;
	color: #333333;
}

main a {
	color: var(--text-link-color);
	font-weight: bold;
	text-decoration: none;
}

main a:hover {
	color: var(--text-link-color-hover);
	text-decoration: none;
}

main a.card {
	font-weight: unset;
}

footer {
	padding: 2.5rem 0;
	background: var(--color-primary-dark);
	border-top: 1px solid rgba(255, 255, 255, .14);   /* separates it from a dark closing band */
	font-size: 0.9rem;
	color: rgba(255, 255, 255, .75) !important;
}

footer a, footer button {
	color: var(--color-white);
	text-decoration: none;
	opacity: 0.75;
}

footer a:hover, footer button:hover {
	opacity: 1;
}

.text-white-50 {
	color: rgba(255, 255, 255, .75) !important;
}

/* Footer "Trusted technology" partner logos — one colour logo per partner, whitened
   here via filter so the same file works on the light /partners/ page too.
   Bounding BOTH dimensions + object-fit keeps differently-shaped logos in a consistent
   box; per-logo max-height can be fine-tuned via the data 'logo_h'. */
.footer-partner-logo {
	max-height: 26px;
	max-width: 120px;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: 0.8;
	filter: invert(1) grayscale(1) brightness(500%);
	transition: opacity 0.15s ease;
}

.footer-partner-logo:hover {
	opacity: 1;
}

/* /partners/ page logo cells — colour logos on light cards, bounded to a uniform box */
.partner-logo-zone {
	height: 46px;
	display: flex;
	align-items: center;
}

.partner-logo {
	max-height: 46px;
	max-width: 170px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.form-control,
.form-select,
textarea {
	max-width: 500px;
}

.bg-accent {
	background-color: var(--color-accent) !important;
}

.bg-accent-light {
	background-color: var(--color-accent-light) !important;
}

.bg-accent-dark {
	background-color: var(--color-accent-dark) !important;
}

.bg-primary {
	background-color: var(--color-primary) !important;
}

.bg-primary-light {
	background-color: var(--color-priimay-light) !important;
}

.bg-primary-dark {
	background-color: var(--color-primary-dark-dark) !important;
}

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

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background-color: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
	color: var(--color-white);
}

/* Outline buttons: Bootstrap hard-codes these colours on the component, so the theme
   variables don't reach them. Its defaults are too faint on the light bands, and off-brand. */
.btn-outline-secondary {
	--bs-btn-color: #596169;
	--bs-btn-border-color: #596169;
	--bs-btn-hover-bg: #596169;
	--bs-btn-hover-border-color: #596169;
	--bs-btn-active-bg: #596169;
	--bs-btn-active-border-color: #596169;
	--bs-btn-disabled-color: #596169;
	--bs-btn-disabled-border-color: #596169;
}
.btn-outline-primary {
	--bs-btn-color: var(--color-primary);
	--bs-btn-border-color: var(--color-primary);
	--bs-btn-hover-bg: var(--color-primary);
	--bs-btn-hover-border-color: var(--color-primary);
	--bs-btn-active-bg: var(--color-primary);
	--bs-btn-active-border-color: var(--color-primary);
	--bs-btn-disabled-color: var(--color-primary);
	--bs-btn-disabled-border-color: var(--color-primary);
}

.btn-info {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-accent-dark);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
	background-color: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
}

.text-info {
	color: var(--color-accent) !important;
}

.badge-sm {
	font-size: 0.75rem;
}

.grid-2 {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

section.faq-wrapper {
	background: var(--color-primary-dark);
	color: var(--color-white);
}

section.faq-wrapper .lead.text-secondary {
	color: var(--color-white) !important;
}

.accordion-item {
	border: none;
	margin-bottom: 1rem;
	background: none;
}

.accordion-body {
	background-color: var(--color-white);
	border-radius: 0 0 1.5rem 1.5rem;
}

.accordion-collapse {
	padding: 0 1.5rem;	
}

.accordion-button {
	outline: none;
	box-shadow: none;
	background-color: var(--color-primary-light);
	color: var(--color-white);
}

.accordion-button::after {
	color: var(--color-white);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed) {
	color: var(--color-accent-dark);
	background-color: var(--color-accent);
	box-shadow: none;
}

/* Chrome, Safari, Edge, and Opera */
.mv-est-count {
	font-weight: 900;
	font-size: 2rem;
	color: var(--color-accent-dark);
	margin: auto 0.35rem;
}

.mv-est-slider::-webkit-slider-thumb {
  background-color: var(--color-accent) !important; /* Change to your desired color */
  -webkit-appearance: none; /* Required to override default browser styling */
  appearance: none;
  cursor: grab;
  height: 24px !important;
  width: 24px !important;
  margin-top: -8px !important;	
}

/* Firefox */
.mv-est-slider::-moz-range-thumb {
  background-color: var(--color-accent) !important; /* Change to your desired color */
  border: none; /* Firefox adds a default border */
  height: 24px !important;
  width: 24px !important;
  margin-top: -8px !important;  
}

.mv-est-slider::-webkit-slider-thumb:hover {
  background-color: var(--color-accent-dark) !important; 
}
.mv-est-slider::-moz-range-thumb:hover {
  background-color: var(--color-accent-dark) !important;
}

/* The "Everything included" panel beside the price estimator. */
.card.mv-card.mv-included {
	--bs-card-bg: var(--color-primary-dark);
	--bs-card-color: var(--color-white);
	--bs-card-border-color: var(--color-primary-dark);
	font-weight: 400;
}
.mv-included a { color: var(--color-white); font-weight: 400; }
.mv-included a:hover, .mv-included a:focus { color: var(--color-accent); }
.mv-included a.mv-included__all { color: var(--color-accent); font-weight: 600; }
.mv-included a.mv-included__all:hover, .mv-included a.mv-included__all:focus { color: var(--color-accent-hover); }
.mv-included a.mv-included__team {
	background: var(--color-accent);
	color: var(--color-primary-dark);
	font-weight: 600;
	border-radius: 0.35rem;
}
.mv-included a.mv-included__team:hover, .mv-included a.mv-included__team:focus {
	background: var(--color-accent-hover);
	color: var(--color-primary-dark);
}

img.rounded-circle {
	background: var(--color-white);
	padding: 0.5rem;
}

/* --- Contact form polish ------------------------------------------------- */
/* Scoped to .mv-contact-form so the rest of the site is unaffected. */
.mv-contact-form .form-label {
	font-size: 1rem;
	font-weight: 500;
	color: var(--color-primary);
	margin-bottom: 0.4rem;
}

.mv-contact-form .form-control,
.mv-contact-form .form-select {
	max-width: none;            /* fill the grid column instead of the 500px cap */
	background-color: #f5f6f8;  /* very light grey fill */
	border: 1px solid #e4e7ec;
	border-radius: 0.6rem;
	color: var(--color-primary);
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.mv-contact-form .form-control::placeholder {
	color: #9aa1ad;
}

.mv-contact-form .form-control:hover,
.mv-contact-form .form-select:hover {
	border-color: #cfd4dc;
}

.mv-contact-form .form-control:focus,
.mv-contact-form .form-select:focus {
	background-color: var(--color-white);
	border-color: var(--color-primary);
	box-shadow: 0 0 0 0.2rem rgba(26, 31, 46, 0.12);
}

/* When one label in a pair wraps to two lines at awkward viewports, keep the
   inputs on the same baseline by letting each column stretch and pushing its
   control to the bottom. Only needed once the grid goes two-up (md and above). */
 
@media (max-height: 900px) {  
	.nav-features-text {
		display: none !important;	
	} 
}  
@media (min-width: 768px) {
	.mv-contact-form .row > [class*="col-"] {
		display: flex;
		flex-direction: column;
	}
	.mv-contact-form .row > [class*="col-"] > .form-control,
	.mv-contact-form .row > [class*="col-"] > .form-select {
		margin-top: auto;
	}
}

@media (min-width: 992px) {
	nav a.nav-link {
		margin-left: 0.5rem;
		font-size: 0.9rem;
	}
	
	.mv-veh-page-icon {
		width: 370px;
		height: 240px;
	}
}

/* Cookie consent banner — fixed, bottom-anchored, brand-styled card. Hidden by
   default via the [hidden] attribute; base.php reveals it only when consent is
   unknown. The wrapper is click-through (pointer-events:none) so the page stays
   usable around the centred card. */
.mjb-cookie-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1080;
	display: flex;
	justify-content: center;
	padding: 0.75rem;
	pointer-events: none;
}
.mjb-cookie-banner[hidden] {
	display: none;
}
.mjb-cookie-banner__card {
	width: 100%;
	max-width: 920px;
	pointer-events: auto;
}
@media (min-width: 992px) {
	.mjb-cookie-banner {
		padding: 1rem;
	}
}

/* "Cookie settings" trigger — a <button> that re-opens the banner, styled to sit
   inline with the footer's .legal-link anchors (resets default button chrome). */
button.legal-link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	cursor: pointer;
}

/* Latest-posts scroll-snap slider (phpincludes/blog-latest-posts.php) — shared by the
   'swiper' (swipe only) and 'carousel' (swipe + arrows + dots) layouts. A horizontal,
   touch-swipeable snap row. Bootstrap has no scroll-snap utilities, so only the snap +
   per-breakpoint item widths live here (spacing/flex stay BS utilities). Widths use
   calc() to subtract the gap-4 (1.5rem) so exactly 1 / 2 / 3 whole cards are visible:
   <540 → 1, 540–992 → 2, ≥993 → 3. */
.mv-blog-swiper {
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.mv-blog-swiper__item {
	scroll-snap-align: start;
	width: 100%;            /* < 540px → 1 card */
}
@media (min-width: 540px) {
	.mv-blog-swiper__item { width: calc((100% - 1.5rem) / 2); }   /* 540–992 → 2 cards */
}
@media (min-width: 993px) {
	.mv-blog-swiper__item { width: calc((100% - 3rem) / 3); }     /* ≥ 993 → 3 cards */
}

/* Slider dots (the 'carousel' layout). Prev/next use real .btn buttons (set in the
   include); the dots are reset <button>s coloured brand-neutral so they show on a
   light section. JS toggles .active as the row scrolls. */
.mv-blog-dot {
	position: relative;
	width: 24px;   /* the tap target; the visible dot is the 10px ::before */
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	opacity: 0.3;
	transition: opacity 0.15s ease;
}
.mv-blog-dot::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 7px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--bs-secondary, #6c757d);
}
.mv-blog-dot.active {
	opacity: 1;
}

/* Prev/next arrows: a fixed square so rounded-circle draws a true circle (a .btn's own
   padding made them oval). Bootstrap .btn vars are component-scoped, so set them here. */
.btn.mv-blog-arrow {
	--bs-btn-padding-x: 0;
	--bs-btn-padding-y: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1rem;
	line-height: 1;
}

/* Mouse drag on the carousel (JS adds .is-dragging); snapping pauses while dragging. */
@media (hover: hover) and (pointer: fine) {
	[data-bl-slider] .mv-blog-swiper { cursor: grab; }
}
.mv-blog-swiper.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
	-webkit-user-select: none;
}

/* ==========================================================================
   Brand pieces for the 10/2026 redesign. Layout stays Bootstrap; these are the
   few things utilities cannot express: flat section bands, the mint highlight,
   the hairline card, and the drawn page-builder canvas in the hero.
   ========================================================================== */

/* Flat section bands (override the automatic white / mint-fade alternation). */
section.mv-band-light { background: var(--color-light); }
section.mv-band-white { background: var(--color-white); }
section.mv-band-dark  { background: var(--color-primary-dark); color: var(--color-white); }
section.mv-band-dark .text-secondary { color: rgba(255, 255, 255, .75) !important; }
section.mv-band-dark a:not(.btn) { color: var(--color-accent); }

/* Mint highlight for the key phrase in a headline — a solid block, not coloured text. */
.mv-mark {
	background: var(--color-accent);
	color: var(--color-primary-dark);
	padding: 0 0.22em;
	border-radius: 0.12em;
	-webkit-box-decoration-break: clone;
	        box-decoration-break: clone;
}

/* Small uppercase label above a heading, and the short mint rule under one. */
.mv-kicker {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
}
section.mv-band-dark .mv-kicker, #hero .mv-kicker { color: var(--color-accent); }
.mv-rule::after {
	content: "";
	display: block;
	width: 3rem;
	height: 4px;
	margin-top: 0.75rem;
	background: var(--color-accent);
}
.text-center > .mv-rule::after, .mv-rule.text-center::after { margin-left: auto; margin-right: auto; }

/* Hairline card: square-ish, bordered, no shadow. Bootstrap card vars are component-scoped. */
.card.mv-card {
	--bs-card-border-color: #d9dee8;
	--bs-card-border-radius: 0.5rem;
	--bs-card-inner-border-radius: 0.5rem;
	box-shadow: none;
}
a.card.mv-card { transition: border-color 0.15s ease; }
a.card.mv-card:hover, a.card.mv-card:focus { border-color: var(--color-primary); }
.card.mv-card.mv-card--top { border-top: 4px solid var(--color-accent); }
section.mv-band-dark .card.mv-card {
	--bs-card-bg: transparent;
	--bs-card-border-color: rgba(255, 255, 255, .22);
	--bs-card-color: var(--color-white);
}

/* Home hero: larger headline. */
.page-name-home #hero h1 {
	font-size: clamp(2rem, 1.2rem + 2.9vw, 3.35rem) !important;
	letter-spacing: -0.01em;
}

/* --- Drawn page-builder canvas (decorative illustration, no image) ----------- */
.mv-canvas {
	background: var(--color-white);
	border-radius: 0.6rem;
	overflow: hidden;
	max-width: 620px;
	width: 100%;
	color: var(--color-grey);
	font-size: 0.72rem;
	line-height: 1.3;
	user-select: none;
	-webkit-user-select: none;
}
.mv-canvas__bar { background: var(--color-primary); color: var(--color-white); }
.mv-canvas__page { background: #eceff5; min-width: 0; }
.mv-canvas__outline { flex: 0 0 37%; background: var(--color-white); border-left: 1px solid #dfe3ea; }
.mv-canvas__outline li { padding: 0.28rem 0.4rem; border-radius: 0.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-canvas__outline li.is-active { background: var(--color-accent); color: var(--color-primary-dark); font-weight: 600; }
.mv-wire { background: var(--color-white); border: 1px solid #dfe3ea; border-radius: 0.35rem; padding: 0.5rem; }
.mv-wire--dark { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.mv-wire--active { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.mv-bar { display: block; height: 0.42rem; border-radius: 1rem; background: #cdd3de; }
.mv-bar--light  { background: rgba(255, 255, 255, .55); }
.mv-bar--accent { background: var(--color-accent); }
.mv-ph { background: #d5dae4; border-radius: 0.25rem; aspect-ratio: 4 / 3; }
.mv-wire__tag {
	position: absolute; top: -0.6rem; left: 0.5rem;
	background: var(--color-accent); color: var(--color-primary-dark);
	font-weight: 600; font-size: 0.62rem; padding: 0.05rem 0.4rem; border-radius: 0.2rem;
}

/* Canvas variants: the block picker (chips) and the layout picker (thumbnails). */
.mv-chipgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.4rem, 1fr)); gap: 0.4rem; }
.mv-chipgrid--wide { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.6rem; }
.mv-chip, .mv-lay { background: var(--color-white); border: 1px solid #dfe3ea; border-radius: 0.3rem; }
.mv-chip { padding: 0.3rem 0.45rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-lay { padding: 0.45rem; text-align: center; }
.mv-chip.is-active, .mv-lay.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-primary-dark); font-weight: 600; }
.mv-lay__cols { display: flex; gap: 0.25rem; height: 2.4rem; }
.mv-lay__cols > span { background: #d5dae4; border-radius: 0.2rem; }
.mv-lay.is-active .mv-lay__cols > span { background: rgba(10, 26, 46, .28); }
.mv-lay__cols--stack { flex-direction: column; }
.mv-lay__cols--stack > .mv-bar { flex: 0 0 auto; }

/* Search-preview and blog-list panels (SEO and Blog pages) — real text, so slightly larger. */
.mv-token { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--color-accent); color: var(--color-primary-dark); padding: 0.05rem 0.3rem; border-radius: 0.2rem; white-space: nowrap; }
.mv-serp__template { font-size: 0.82rem; line-height: 1.9; }
.mv-serp__url   { font-size: 0.78rem; color: #4d5156; }
.mv-serp__title { font-size: 1.05rem; line-height: 1.3; color: #1a0dab; }
.mv-serp__desc  { font-size: 0.82rem; line-height: 1.45; color: #4d5156; }
.mv-postrow__title { font-size: 0.85rem; color: var(--color-primary); }

/* Dark panel inside a hero (price summary, "at a glance" list). */
.mv-hero-panel {
	border: 1px solid rgba(255, 255, 255, .22);
	border-top: 4px solid var(--color-accent);
	border-radius: 0.5rem;
}

/* Device frames for screenshots, drawn in CSS (mv_device() in functions.php). The light
   edge keeps the dark bezel visible on the dark bands. */
.mv-laptop { width: 100%; }
.mv-laptop__screen {
	margin-inline: 6%;
	padding: 2% 1.4% 1.4%;
	background: #11151c;
	border: 1px solid rgba(255, 255, 255, .2);
	border-bottom: 0;
	border-radius: 0.75rem 0.75rem 0 0;
}
.mv-laptop__base {
	position: relative;
	height: clamp(0.5rem, 1.4vw, 0.9rem);
	background: #c4c9d2;
	border-radius: 0 0 0.75rem 0.75rem;
}
.mv-laptop__base::before {
	content: "";
	position: absolute;
	top: 0;
	left: 42%;
	width: 16%;
	height: 45%;
	background: #9aa1ad;
	border-radius: 0 0 0.4rem 0.4rem;
}
.mv-phone {
	position: relative;
	padding: 8px;
	background: #11151c;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 13% / 6.5%;
}
.mv-phone img { border-radius: 10% / 5%; }
.mv-phone::before {
	content: "";
	position: absolute;
	top: 2.4%;
	left: 37%;
	width: 26%;
	height: 1.6%;
	background: #11151c;
	border-radius: 1rem;
}
.mv-phone--hero { max-width: 280px; margin-inline: auto; }

/* A laptop with a phone overlapping its corner (home page). */
.mv-device-stack { position: relative; }
.mv-device-stack .mv-laptop { width: 86%; }
.mv-device-stack .mv-phone { position: absolute; right: 0; bottom: 0; width: 26%; padding: 4px; }
@media (min-width: 768px) {
	.mv-device-stack .mv-phone { width: 18%; }
}

/* Reserve room for the Elfsight reviews so the page doesn't jump when they load. */
.mv-reviews-widget { min-height: 222px; }
/* Elfsight colours its "Read more" link mint, which is unreadable on the white cards. */
.mv-reviews-widget .es-text-shortener-control { color: var(--color-accent-dark); }

/* Vehicle-type tile icon (mask-tinted, see .mv-veh-icon). */
.mv-veh-tile .mv-veh-icon { width: 3.2em; height: 2em; }

/* AutoTrader sync graphic on the vehicle pages: two logo tiles and turning arrows. */
.mv-sync__logo {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 4.5rem;
	padding: 0.75rem 1rem;
	background: var(--color-light);
	border: 1px solid #d9dee8;
	border-radius: 0.5rem;
}
.mv-sync__logo img { width: 100%; height: auto; max-width: 9.5rem; }
.mv-sync__arrows {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--color-primary-dark);
	font-size: 1.5rem;
}
.mv-sync__arrows .bi { animation: mv-spin 4s linear infinite; }
@keyframes mv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.mv-sync__arrows .bi { animation: none; }
}