@charset "utf-8";

/*
Theme Name: Prestora - Car Dealership & Marketplace HTML5 Template.
Author: Metropolitanthemes
Version: 2.0.0

%%%%%%% Table of CSS %%%%%%%

1. General
    1.1 Typography
    1.2 Spacing
    1.3 Buttons
    1.4 Section Title
    1.5 Helpers & Reveals
    1.6 Range Slider
2. Preloader
3. Top Bar
4. Header
    4.1 Mega Menu
    4.2 Compare Drawer
5. Offcanvas Menu
6. Hero
7. Search Panel
8. Car Card
9. Featured Models
10. Brands
11. Why Prestora
12. How It Works
13. Finance Band
14. Best Match
15. Dealers
16. Testimonials
17. Journal
18. Counter Band
19. Sell CTA
20. Footer
21. Back To Top
22. Split Hero
23. Advanced Search
24. Car Rail
25. Brand Tabs
26. Media Strip
27. Gallery Wall
28. Social Mosaic
29. Header Variants
30. Footer Variants
31. Trim Tabs
32. Video Band
33. Category Cards
34. Centred Hero
35. Category Grid
36. Inline Hero
37. Showroom Configurator
38. Spec Table
39. Tool Tiles
40. Compact Banner
41. Listing Rows
42. Brand Leaderboard
43. Favourite Brand
44. Editorial Hero
45. Dealer Finder
46. Boxed Hero
47. Design Hotspots
48. Video Modal
49. Subheader
50. Pagination
51. Sidebar
52. Blog Layouts
53. Blog Details
54. Filter Sidebar
55. Listing Toolbar
56. Listing Map
57. Car Details
58. Compare Table
59. Add Listing
60. Dealer Details
61. Pricing
62. Dashboard
63. Auth
64. Contact
65. About
66. Sponsored Models
67. Error & Coming Soon
68. Road Light
69. Language Picker
70. Services
71. Test Drive
72. Grounds
73. Running Costs
74. Private Viewing
75. Finance Or Lease
76. Budget Planner
77. Service Centre
78. Trade-In
79. Body Rail
*/

/*======================
1. General
========================*/
:root {
  --mv-ff-display: 'Saira', 'Segoe UI', Arial, sans-serif;
  --mv-ff-body: 'Rubik', 'Segoe UI', Arial, sans-serif;
  /* Saira is one variable family with a width axis: headings run extended */
  --mv-stretch: 110%;
  --mv-stretch-wide: 122%;
  --mv-fs-h1: clamp(40px, 4.5vw, 74px);
  --mv-fs-h2: clamp(30px, 3vw, 48px);
  --mv-fs-h3: clamp(20px, 1.45vw, 24px);
  --mv-fs-h4: 19px;
  --mv-fs-h5: 16px;
  --mv-fs-h6: 14px;
  --mv-fs-lead: 18px;
  --mv-fs-body: 16px;
  --mv-fs-micro: 12px;
  /* brand (both themes) */
  --mv-color-primary: #C9A55C;
  --mv-color-primary-rgb: 201, 165, 92;
  --mv-color-primary-deep: #987C3B;
  --mv-color-primary-soft: #FFEDE4;
  --mv-color-ink: #101418;
  --mv-color-ink-rgb: 16, 20, 24;
  --mv-color-ink-deep: #0A0D10;
  --mv-color-carbon: #1A1F26;
  --mv-color-carbon-rgb: 26, 31, 38;
  --mv-color-white: #FFFFFF;
  --mv-color-white-rgb: 255, 255, 255;
  --mv-color-star: #F5B301;
  --mv-color-go: #1FB866;
  /* theme roles (light) */
  --mv-ground: #FFFFFF;
  --mv-ground-rgb: 255, 255, 255;
  --mv-heading: #101418;
  --mv-heading-soft: #8A929C;
  --mv-color-body: #5B6470;
  --mv-color-muted: #7D8692;
  --mv-color-paper: #F4F5F3;
  --mv-color-paper-rgb: 244, 245, 243;
  --mv-color-surface: #FFFFFF;
  --mv-color-line: #E4E7E3;
  --mv-color-line-2: #EFF1EE;
  --mv-tonal: rgba(16, 20, 24, 0.055);
  --mv-tonal-2: rgba(16, 20, 24, 0.1);
  --mv-glass: rgba(255, 255, 255, 0.78);
  --mv-scroll: rgba(16, 20, 24, 0.28);
  --mv-radius: 12px;
  --mv-radius-lg: 20px;
  --mv-radius-pill: 100px;
  --mv-shadow: 0 14px 34px -18px rgba(16, 20, 24, 0.22), 0 2px 6px rgba(16, 20, 24, 0.04);
  --mv-shadow-lg: 0 40px 80px -36px rgba(16, 20, 24, 0.34), 0 4px 14px rgba(16, 20, 24, 0.05);
  --mv-shear: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  --mv-shear-sm: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  --mv-tick: repeating-linear-gradient(90deg, var(--mv-color-line) 0 2px, transparent 2px 9px);
  --mv-tick-light: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 2px, transparent 2px 9px);
  --mv-chrome: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  --mv-hero-shade: linear-gradient(90deg, rgba(10, 13, 16, 0.92) 0%, rgba(10, 13, 16, 0.72) 38%, rgba(10, 13, 16, 0.18) 72%, rgba(10, 13, 16, 0.35) 100%);
}

/* Dark theme: the grounds, text and lines turn; brand colours and the ink
   bands stay as they are. Set on <html> by the head script and the toggle. */
[data-theme="dark"] {
  color-scheme: dark;
  --mv-ground: #0E1115;
  --mv-ground-rgb: 14, 17, 21;
  --mv-heading: #F2F4F6;
  --mv-heading-soft: #7C8691;
  --mv-color-body: #A2ABB6;
  --mv-color-muted: #7F8994;
  --mv-color-paper: #13171C;
  --mv-color-paper-rgb: 19, 23, 28;
  --mv-color-surface: #181D24;
  --mv-color-line: #262D35;
  --mv-color-line-2: #1D232A;
  --mv-color-primary-deep: #D3B779;
  --mv-color-primary-soft: rgba(201, 165, 92, 0.14);
  --mv-color-ink: #05070A;
  --mv-color-ink-rgb: 5, 7, 10;
  --mv-tonal: rgba(255, 255, 255, 0.07);
  --mv-tonal-2: rgba(255, 255, 255, 0.12);
  --mv-glass: rgba(18, 22, 27, 0.8);
  --mv-scroll: rgba(255, 255, 255, 0.22);
  --mv-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.3);
  --mv-shadow-lg: 0 40px 80px -30px rgba(0, 0, 0, 0.8), 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* Audience moods. The Electric home runs on volt, the Prestige home on
   champagne; every other page keeps the blaze orange. */
.mv-mood-volt {
  --mv-color-primary: #21D19F;
  --mv-color-primary-rgb: 33, 209, 159;
  --mv-color-primary-deep: #0B7F5E;
  --mv-color-primary-soft: #E2F7F0;
}

[data-theme="dark"] .mv-mood-volt {
  --mv-color-primary-deep: #3EE0B2;
  --mv-color-primary-soft: rgba(33, 209, 159, 0.14);
}

.mv-mood-prestige {
  --mv-color-primary: #C9A46A;
  --mv-color-primary-rgb: 201, 164, 106;
  --mv-color-primary-deep: #8A6A35;
  --mv-color-primary-soft: #F5EEE2;
}

[data-theme="dark"] .mv-mood-prestige {
  --mv-color-primary-deep: #D9B880;
  --mv-color-primary-soft: rgba(201, 164, 106, 0.14);
}

/* Bands that stay night in both themes */
.is-night {
  --mv-color-primary-deep: var(--mv-color-primary);
  --mv-heading: #F2F4F6;
  --mv-heading-soft: rgba(255, 255, 255, 0.5);
  --mv-color-body: rgba(255, 255, 255, 0.68);
  --mv-color-muted: rgba(255, 255, 255, 0.5);
  --mv-color-line: rgba(255, 255, 255, 0.12);
  --mv-color-line-2: rgba(255, 255, 255, 0.08);
  --mv-color-surface: #161B21;
  --mv-tonal: rgba(255, 255, 255, 0.07);
  --mv-tonal-2: rgba(255, 255, 255, 0.12);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--mv-scroll) transparent;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* the offcanvas parks off-screen right; clip it here as well as on body so the
     document never reports a scrollable width wider than the viewport */
  overflow-x: hidden;
}

body {
  /* the page's own colours, kept for blocks that sit inside a night band (a docked search card) */
  --mv-page-heading: var(--mv-heading);
  --mv-page-heading-soft: var(--mv-heading-soft);
  --mv-page-body: var(--mv-color-body);
  --mv-page-muted: var(--mv-color-muted);
  --mv-page-line: var(--mv-color-line);
  --mv-page-surface: var(--mv-color-surface);
  --mv-page-tonal: var(--mv-tonal);
  --mv-page-tonal-2: var(--mv-tonal-2);
  --mv-page-primary-deep: var(--mv-color-primary-deep);
  font-family: var(--mv-ff-body);
  font-size: var(--mv-fs-body);
  font-weight: 400;
  line-height: 1.75;
  color: var(--mv-color-body);
  background-color: var(--mv-ground);
  /* no overflow here: on body it would become the scroll container and stop
     every position: sticky on the page; html's clip already reaches the viewport */
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.4s ease;
}

/* Wide screens: a 1320 container and a 16px root read small at 2K */
@media (min-width: 1600px) {
  html {
    font-size: 17px;
  }

  .container {
    max-width: 1440px;
  }
}

@media (min-width: 1960px) {
  html {
    font-size: 18px;
  }

  .container {
    max-width: 1560px;
  }
}

/* Logos and marks that come in a light and a dark cut */
.on-dark {
  display: none;
}

[data-theme="dark"] .on-light {
  display: none;
}

[data-theme="dark"] .on-dark {
  display: inline-block;
}

/*-----------------
1.1 Typography
-------------------*/
h1,
h2,
h3 {
  font-family: var(--mv-ff-display);
  font-weight: 700;
  font-stretch: var(--mv-stretch);
  color: var(--mv-heading);
  line-height: 1.08;
  letter-spacing: -0.012em;
}

h4,
h5,
h6 {
  font-family: var(--mv-ff-body);
  font-weight: 600;
  color: var(--mv-heading);
  line-height: 1.34;
}

h1 {
  font-size: var(--mv-fs-h1);
}

h2 {
  font-size: var(--mv-fs-h2);
}

h3 {
  font-size: var(--mv-fs-h3);
  font-weight: 600;
  line-height: 1.2;
}

h4 {
  font-size: var(--mv-fs-h4);
}

h5 {
  font-size: var(--mv-fs-h5);
}

h6 {
  font-size: var(--mv-fs-h6);
}

p {
  margin-bottom: 0;
}

a {
  text-decoration: none;
  color: var(--mv-heading);
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

a:hover {
  color: var(--mv-color-primary-deep);
}

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

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  outline: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

.mv-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mv-lead {
  font-size: var(--mv-fs-lead);
  line-height: 1.7;
}

.mv-micro {
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  line-height: 1.4;
}

.mv-no-scroll {
  overflow: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*-----------------
1.2 Spacing
-------------------*/
.sec-pt-130 {
  padding-top: 130px;
}

.sec-pb-130 {
  padding-bottom: 130px;
}

.sec-pt-90 {
  padding-top: 90px;
}

.sec-pb-90 {
  padding-bottom: 90px;
}

.sec-pb-60 {
  padding-bottom: 60px;
}

/*-----------------
1.3 Buttons
-------------------*/
.mv-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 30px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border: 2px solid var(--mv-color-primary);
  border-radius: var(--mv-radius-pill);
  overflow: hidden;
  transition: color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.mv-btn:hover {
  color: var(--mv-color-primary);
  background-color: var(--mv-color-ink);
  border-color: var(--mv-color-ink);
  transform: translateY(-3px);
  box-shadow: var(--mv-shadow);
}

/* Double-arrow slide -- the house hover physics */
.mv-btn .arw {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
  overflow: hidden;
  flex: none;
}

.mv-btn .arw i {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 13px;
  line-height: 14px;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.mv-btn .arw i + i {
  transform: translateX(-140%);
}

.mv-btn:hover .arw i {
  transform: translateX(140%);
}

.mv-btn:hover .arw i + i {
  transform: translateX(0);
}

.mv-btn.is-ink {
  color: var(--mv-color-white);
  background-color: var(--mv-color-ink);
  border-color: var(--mv-color-ink);
}

[data-theme="dark"] .mv-btn.is-ink {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-white);
  border-color: var(--mv-color-white);
}

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

/* secondary: a tonal face, never a hairline outline */
.mv-btn.is-ghost {
  color: var(--mv-heading);
  background-color: var(--mv-tonal);
  border-color: transparent;
}

.mv-btn.is-ghost:hover {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border-color: var(--mv-color-primary);
}

.mv-btn.is-ghost-light {
  color: var(--mv-color-white);
  background-color: rgba(255, 255, 255, 0.12);
  border-color: transparent;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.mv-btn.is-ghost-light:hover {
  color: var(--mv-heading);
  background-color: var(--mv-color-surface);
  border-color: var(--mv-color-white);
}

.mv-btn.is-sm {
  padding: 11px 22px;
  font-size: 14px;
}

.mv-btn.is-block {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* Text link with a sliding rule */
.mv-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 500;
  color: var(--mv-heading);
  padding-bottom: 3px;
  border-bottom: 2px solid var(--mv-color-primary);
}

.mv-link i {
  font-size: 12px;
  transition: transform 0.35s ease;
}

.mv-link:hover {
  color: var(--mv-heading);
  border-bottom-color: var(--mv-heading);
}

.mv-link:hover i {
  transform: translateX(5px);
}

.mv-link.is-light {
  color: var(--mv-color-white);
}

.mv-link.is-light:hover {
  color: var(--mv-color-primary);
  border-bottom-color: var(--mv-color-white);
}

/*-----------------
1.4 Section Title
-------------------*/
.mv-sec-head {
  max-width: 760px;
  margin-bottom: 56px;
}

.mv-sec-head.is-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.mv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch-wide);
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mv-color-primary-deep);
  margin-bottom: 18px;
}

/* Speed ticks -- replaces the base's divider trio, used everywhere a rule is wanted */
.mv-eyebrow::before {
  content: "";
  width: 28px;
  height: 9px;
  background-image: repeating-linear-gradient(90deg, var(--mv-color-primary) 0 3px, transparent 3px 7px);
}

.mv-sec-head.is-center .mv-eyebrow {
  justify-content: center;
}

.mv-sec-head h2 {
  margin-bottom: 0;
  text-wrap: balance;
}

/* the second voice of a heading: the same face, a quieter tone */
.mv-sec-head h2 em,
h1 em,
h2 em {
  font-style: normal;
  color: var(--mv-heading-soft);
}

.mv-sec-head p {
  margin-top: 22px;
  font-size: var(--mv-fs-lead);
  line-height: 1.7;
}

.mv-sec-head.is-light h2 {
  color: var(--mv-color-white);
}

.mv-sec-head.is-light .mv-eyebrow {
  color: var(--mv-color-primary);
}

.mv-sec-head.is-light h2 em {
  color: rgba(255, 255, 255, 0.5);
}

.mv-sec-head.is-light p {
  color: rgba(255, 255, 255, 0.66);
}

/* Head with an action parked on the right */

/* Homepage map. A map section of its own for the homepage. */
.mv-hpmap {
  padding-block: 130px;
  background-color: var(--mv-color-paper);
}

.mv-hpmap-frame {
  overflow: hidden;
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow);
  line-height: 0;
}

.mv-hpmap-frame iframe {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
  filter: grayscale(1) contrast(1.05);
}

/* "In The Media" runs edge to edge: these two sections drop the container. */
.mv-gallery > .container,
.mv-social-media > .container {
  max-width: 100%;
  padding-inline: 34px;
}

/* Grid gutters.
   Card rows shipped with a 24px horizontal gutter and no vertical one at all,
   so a second row of cards sat flush against the first. Bootstrap's gutter-y
   cancels itself on the first row, so this only opens up where cards wrap. */
.row {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 30px;
}

/* Two half-width content columns were meeting on a 24px gutter and reading as
   one block. These carry a proper column gap instead. */
.mv-why .row,
.mv-journal .row,
.mv-story .row,
.mv-history .row,
.mv-contactinfo .row,
.mv-contactform .row,
.mv-faq .row {
  --bs-gutter-x: 70px;
}

.mv-sec-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 58px;
}

.mv-sec-bar .mv-sec-head {
  margin-bottom: 0;
}

/*-----------------
1.5 Helpers & Reveals
-------------------*/
.mv-paper {
  background-color: var(--mv-color-paper);
}

.mv-dark {
  background-color: var(--mv-color-ink);
}

/* Sheared band -- the decorative silhouette that carries through the template */
.mv-shear-top {
  clip-path: polygon(0 34px, 100% 0, 100% 100%, 0 100%);
}

.mv-shear-bottom {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), 0 100%);
}

.mv-shear-both {
  clip-path: polygon(0 34px, 100% 0, 100% calc(100% - 34px), 0 100%);
}

/* Parallax layers are oversized so the drift never exposes an edge */
.mv-parallax {
  will-change: transform;
}

/* Oversized watermark wordmark -- fills the dead air behind stat and CTA bands */
.mv-ghost {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mv-ff-display);
  font-size: clamp(120px, 20vw, 300px);
  line-height: 1;
  letter-spacing: 6px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.035);
  pointer-events: none;
  user-select: none;
}

.mv-ghost.is-dark {
  color: rgba(16, 20, 24, 0.04);
}

/* 1px chrome hairline for dark surfaces */
.mv-hairline {
  height: 1px;
  background-image: var(--mv-chrome);
  border: 0;
}

.mv-rule {
  height: 10px;
  background-image: var(--mv-tick);
}

.mv-shear-plate {
  clip-path: var(--mv-shear);
}

.mv-star {
  color: var(--mv-color-star);
  font-size: 12px;
  letter-spacing: 1px;
}

/* Reveals: CSS hides them, JS adds .is-in. Every skip path must add .is-in too. */
/* Skew Slide: content pulls in from the side with a lean, the way a car pulls
   into a bay, and settles square. Grids ripple in turn (data-delay from JS). */
.js .fade-up,
.js .fade-in,
.js .fade-left,
.js .fade-right {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.js .fade-up {
  transform: translate3d(-56px, 14px, 0) skewX(-6deg);
}

.js .fade-left {
  transform: translate3d(-64px, 0, 0) skewX(-7deg);
}

.js .fade-right {
  transform: translate3d(64px, 0, 0) skewX(7deg);
}

.js .fade-up.is-in,
.js .fade-in.is-in,
.js .fade-left.is-in,
.js .fade-right.is-in {
  opacity: 1;
  transform: none;
}

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

  .mv-staged .mv-hero-inner,
  .mv-staged .mv-edit-inner {
    opacity: 1;
    transition: none;
  }

  .js .fade-up,
  .js .fade-in,
  .js .fade-left,
  .js .fade-right {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/*-----------------
1.6 Range Slider
-------------------*/
/* Two class selectors so these beat the generic `.mv-field input` rules above. */
.mv-field .mv-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  padding: 0;
  background-color: var(--mv-color-line);
  border: none;
  border-radius: var(--mv-radius-pill);
  cursor: pointer;
}

.mv-field .mv-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background-color: var(--mv-color-primary);
  border: 3px solid var(--mv-color-ink);
  border-radius: 50%;
  cursor: grab;
}

.mv-field .mv-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background-color: var(--mv-color-primary);
  border: 3px solid var(--mv-color-ink);
  border-radius: 50%;
  cursor: grab;
}

.mv-field .mv-range:focus {
  outline: none;
}

.mv-field .mv-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(var(--mv-color-primary-rgb), 0.35);
}

/*======================
2. Preloader
========================*/
/* Gauge Sweep: a tachometer revs and drops back to idle, the readout taken off
   the needle; the panel then leaves on a skewed wipe. --rpm (0..1) is set by JS. */
.mv-preloader {
  --rpm: 0;
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0A0D10;
  background-image: radial-gradient(60% 60% at 50% 46%, rgba(var(--mv-color-primary-rgb), 0.14), transparent 70%);
  transition: transform 0.85s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.85s ease;
}

.mv-preloader.is-done {
  transform: translateX(-112%) skewX(-12deg);
  opacity: 0.6;
  pointer-events: none;
}

.mv-preloader-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  padding: 0 20px;
}

.mv-tach {
  position: relative;
  width: 260px;
  height: 260px;
}

/* the dial: a 240 degree track, with the revs filling it in the brand colour */
.mv-tach-arc,
.mv-tach-fill {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
}

.mv-tach-arc {
  background: conic-gradient(from 240deg, rgba(255, 255, 255, 0.12) 0deg 240deg, transparent 240deg 360deg);
}

.mv-tach-fill {
  background: conic-gradient(from 240deg, var(--mv-color-primary) 0deg calc(var(--rpm) * 240deg), transparent calc(var(--rpm) * 240deg) 360deg);
  filter: drop-shadow(0 0 10px rgba(var(--mv-color-primary-rgb), 0.6));
}

.mv-tach-nums i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  margin: -10px 0 0 -10px;
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch-wide);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
}

.mv-tach-nums i:nth-child(1) { transform: rotate(-120deg) translateY(-100px) rotate(120deg); }
.mv-tach-nums i:nth-child(2) { transform: rotate(-90deg) translateY(-100px) rotate(90deg); }
.mv-tach-nums i:nth-child(3) { transform: rotate(-60deg) translateY(-100px) rotate(60deg); }
.mv-tach-nums i:nth-child(4) { transform: rotate(-30deg) translateY(-100px) rotate(30deg); }
.mv-tach-nums i:nth-child(5) { transform: translateY(-100px); }
.mv-tach-nums i:nth-child(6) { transform: rotate(30deg) translateY(-100px) rotate(-30deg); }
.mv-tach-nums i:nth-child(7) { transform: rotate(60deg) translateY(-100px) rotate(-60deg); }
.mv-tach-nums i:nth-child(8) { transform: rotate(90deg) translateY(-100px) rotate(-90deg); color: var(--mv-color-primary); }
.mv-tach-nums i:nth-child(9) { transform: rotate(120deg) translateY(-100px) rotate(-120deg); color: var(--mv-color-primary); }

.mv-tach-needle {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 4px;
  height: 112px;
  margin-left: -2px;
  border-radius: 4px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.9), var(--mv-color-primary));
  transform-origin: 50% 100%;
  transform: rotate(calc(-120deg + var(--rpm) * 240deg));
  box-shadow: 0 0 14px rgba(var(--mv-color-primary-rgb), 0.7);
}

.mv-tach-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border-radius: 50%;
  background-color: #0A0D10;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06);
}

.mv-tach-hub img {
  display: block;
  width: 100%;
  transform: rotate(calc(var(--rpm) * 720deg));
}

.mv-tach-read {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  text-align: center;
  color: var(--mv-color-white);
}

.mv-tach-read b {
  display: block;
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch-wide);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mv-tach-read small {
  display: block;
  margin-top: 6px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.mv-preloader-logo {
  width: 190px;
  opacity: 0.92;
}

/*======================
3. Top Bar
========================*/
.mv-topbar {
  position: relative;
  z-index: 95;
  background-color: #0A0D10;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
}

.mv-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  height: 46px;
}

/* live showroom status: green while open, the next opening while closed */
.mv-topbar-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  font-weight: 500;
  color: var(--mv-color-white);
}

.mv-open-dot {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.35);
}

.mv-open-dot.is-open {
  background-color: var(--mv-color-go);
}

.mv-open-dot.is-open::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--mv-color-go);
  opacity: 0;
  animation: mv-ping 2.4s ease-out infinite;
}

@keyframes mv-ping {
  0% {
    transform: scale(0.6);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

/* Rotating notice: one line at a time, the rest parked out of view */
.mv-topbar-notice {
  position: relative;
  flex: 1 1 auto;
  height: 22px;
  overflow: hidden;
  padding-left: 30px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.mv-topbar-notice li {
  position: absolute;
  top: 0;
  left: 30px;
  right: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 22px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.mv-topbar-notice li i {
  font-size: 13px;
}

.mv-topbar-notice li.is-on {
  opacity: 1;
  transform: translateY(0);
}

.mv-topbar-notice li.is-out {
  opacity: 0;
  transform: translateY(-100%);
}

.mv-topbar-notice i {
  font-size: 12px;
  color: var(--mv-color-primary);
}

.mv-topbar-links {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: none;
}

.mv-topbar-links > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.62);
}

.mv-topbar-links > a:hover {
  color: var(--mv-color-white);
}

.mv-topbar-links > a > i {
  font-size: 13px;
  color: var(--mv-color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .mv-open-dot.is-open::after {
    animation: none;
  }
}

/*======================
4. Header
========================*/
/* Sticky by default; home heroes use the overlay variant, which sits on the
   photograph and pins as a glass bar once the page moves. */
.mv-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background-color: var(--mv-ground);
  border-bottom: 1px solid var(--mv-color-line);
  transition: background-color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.mv-header.is-stuck {
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.35);
}

.mv-header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  height: 88px;
}

.mv-logo {
  flex: none;
  line-height: 0;
}

.mv-logo img {
  width: 200px;
}

.mv-nav > ul {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}

.mv-nav > ul > li {
  position: relative;
}

.mv-nav > ul > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 32px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--mv-heading);
}

.mv-nav > ul > li > a i {
  font-size: 10px;
  opacity: 0.55;
  transition: transform 0.3s ease;
}

.mv-nav > ul > li:hover > a i {
  transform: rotate(180deg);
}

/* first-level dropdowns hang clear of the bar; the ::before bridges the gap */
.mv-nav .sub-menu {
  position: absolute;
  top: calc(100% - 14px);
  left: 0;
  z-index: 5;
  min-width: 250px;
  padding: 10px;
  list-style: none;
  background-color: var(--mv-color-surface);
  border-radius: var(--mv-radius);
  box-shadow: var(--mv-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.mv-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}

[data-theme="dark"] .mv-nav .sub-menu {
  box-shadow: var(--mv-shadow-lg), inset 0 0 0 1px var(--mv-color-line);
}

.mv-nav li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mv-nav .sub-menu li {
  position: relative;
}

.mv-nav .sub-menu a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--mv-color-body);
  border-radius: 9px;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.mv-nav .sub-menu a i {
  font-size: 10px;
}

.mv-nav .sub-menu a:hover,
.mv-nav .sub-menu li.active > a {
  color: var(--mv-heading);
  background-color: var(--mv-tonal);
}

.mv-nav .sub-menu li.active > a {
  color: var(--mv-color-primary-deep);
}

/* Third level flies out to the side, towards the page's middle so it never
   leaves the screen when the bar sits far right (RTL mirrors it) */
.mv-nav .sub-menu .sub-menu {
  top: -10px;
  left: auto;
  right: calc(100% + 10px);
}

.mv-nav .sub-menu .sub-menu::before {
  top: 0;
  bottom: 0;
  left: auto;
  right: -12px;
  width: 12px;
  height: auto;
}

.mv-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

/* round point controls on a tonal face (no hairline outline) */
.mv-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 16px;
  color: var(--mv-heading);
  background-color: var(--mv-tonal);
  border: 0;
  border-radius: 50%;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.mv-icon-btn:hover {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
}

/* the light / dark switch: a moon in the light theme, a sun in the dark one */
.mv-theme-btn .mvi-sun,
[data-theme="dark"] .mv-theme-btn .mvi-moon {
  display: none;
}

[data-theme="dark"] .mv-theme-btn .mvi-sun {
  display: inline-block;
}

.mv-theme-btn i {
  font-size: 17px;
}

.mv-count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font-family: var(--mv-ff-body);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border: 2px solid var(--mv-ground);
  border-radius: var(--mv-radius-pill);
}

.mv-header-cta {
  margin-left: 8px;
}

.mv-nav-toggler {
  display: none;
  width: 44px;
  height: 44px;
  font-size: 17px;
  color: var(--mv-heading);
  background-color: var(--mv-tonal);
  border-radius: 50%;
}

/*-----------------
4.1 Mega Menu
-------------------*/
.mv-nav .has-mega {
  position: static;
}

.mv-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 38px 42px 42px;
  background-color: var(--mv-color-surface);
  border-top: 3px solid var(--mv-color-primary);
  box-shadow: var(--mv-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.mv-nav li:hover > .mv-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mv-mega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 268px;
  gap: 38px;
}

/* The listings mega carries a fourth list before its promo */
.mv-mega-grid.is-listings {
  grid-template-columns: repeat(4, minmax(0, 1fr)) 268px;
  gap: 30px;
}

/* No rule under these: across the wide home column it drew a line the whole
   width of the dropdown. The label carries itself on weight and tracking. */
.mv-nav > ul > li.active > a,
.mv-nav > ul > li:hover > a {
  color: var(--mv-color-primary-deep);
}

.mv-mega-title {
  display: block;
  margin-bottom: 18px;
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mv-color-muted);
}

.mv-mega-col ul {
  list-style: none;
}

.mv-mega-col li + li {
  margin-top: 3px;
}

.mv-mega-col ul a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--mv-color-body);
}

/* An icon per row so the listings menu is scannable rather than a wall of text */
.mv-mega-col ul a > i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  font-size: 12px;
  color: var(--mv-color-primary-deep);
  background-color: var(--mv-color-primary-soft);
  border-radius: 7px;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.mv-mega-col ul a:hover > i {
  color: var(--mv-color-white);
  background-color: var(--mv-color-primary);
}

.mv-mega-col ul a:hover,
.mv-mega-col li.active > a {
  color: var(--mv-heading);
}

.mv-mega-promo {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--mv-radius);
  min-height: 240px;
  cursor: pointer;
  background: none;
}

.mv-mega-promo img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.7s ease;
}

.mv-mega-promo:hover img {
  transform: scale(1.06);
}

.mv-mega-promo-inner {
  position: absolute;
  inset: auto 0 0 0;
  padding: 40px 24px 22px;
  /* Deep enough that the caption still reads over a pale car, not just a dark one */
  background-image: linear-gradient(to top, rgba(16, 20, 24, 0.95) 30%, rgba(16, 20, 24, 0.7) 62%, transparent);
}

.mv-mega-promo-inner span {
  display: block;
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mv-color-primary);
}

.mv-mega-promo-inner b {
  display: block;
  margin-top: 4px;
  font-family: var(--mv-ff-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.6px;
  color: var(--mv-color-white);
}

/* Home mega -- screenshot cards */
/* The home mega gives its card wall the room and parks the promo beside it */
.mv-mega-grid.is-home {
  /* minmax(0,...) or the flex row inside the slider sets the column min-width
     and blows the grid out to the full track width */
  grid-template-columns: minmax(0, 1fr);
}

/* Seven cards in a four-wide grid strand an empty cell against the promo.
   Wrapping centred puts the orphan row under the middle of the wall instead. */

/* Seven homepages on one row rather than a wrapped grid: the cards are smaller
   and the row slides, which is what the extra width was costing. */
.mv-homeslider {
  overflow: hidden;
}

.mv-homeslider .swiper-slide {
  height: auto;
}

.mv-home-card {
  display: block;
}

.mv-home-card .shot {
  display: block;
  overflow: hidden;
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius);
  aspect-ratio: 16 / 11;
}

.mv-home-card .shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.7s ease;
}

.mv-home-card:hover .shot {
  border-color: var(--mv-color-primary);
}

.mv-home-card:hover .shot img {
  transform: scale(1.05);
}

.mv-home-card .meta {
  display: block;
  margin-top: 11px;
  text-align: center;
}

.mv-home-card .meta b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mv-heading);
}

.mv-home-card .meta em {
  display: block;
  font-size: 12px;
  font-style: normal;
  color: var(--mv-color-muted);
}

.mv-home-card.active .meta b {
  color: var(--mv-color-primary-deep);
}

/* The dealership hero runs as a slider.
   Each slide keeps the whole composition, card included. */
.mv-split-slider {
  overflow: hidden;
}

.mv-split-hero-slide {
  position: relative;
  overflow: hidden;
}

.mv-split-nav {
  position: absolute;
  right: 34px;
  bottom: 34px;
  z-index: 4;
  display: flex;
  gap: 10px;
}

.mv-split-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  font-size: 14px;
  color: var(--mv-color-white);
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.mv-split-nav button:hover {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border-color: var(--mv-color-primary);
}

/* Browse By Make closes the listings mega: the marque logo beside its name,
   which is the one place in the menu where a mark says more than a word. */
.mv-mega-makes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.mv-mega-makes a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  font-size: 13px;
  border-radius: 8px;
  transition: background-color 0.25s ease;
}

.mv-mega-makes a:hover {
  background-color: var(--mv-color-primary-soft);
}

.mv-mega-makes img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex: none;
}

.mv-mega-makes b {
  font-weight: 500;
  color: var(--mv-color-body);
  transition: color 0.25s ease;
}

.mv-mega-makes a:hover b {
  color: var(--mv-color-primary-deep);
}

/* The listings mega used to end in a grid of chips. It carries the same promo
   card as the home mega now, so both dropdowns close the same way. */
.mv-mega-col ul a {
  position: relative;
}

/*-----------------
4.2 Compare Drawer
-------------------*/
.mv-compare-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  padding: 16px 0;
  background-color: var(--mv-color-ink);
  border-top: 3px solid var(--mv-color-primary);
  transform: translateY(101%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-compare-bar.is-open {
  transform: translateY(0);
}

.mv-compare-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.mv-compare-label {
  flex: none;
  font-family: var(--mv-ff-display);
  font-size: 19px;
  letter-spacing: 1px;
  color: var(--mv-color-white);
}

.mv-compare-label span {
  color: var(--mv-color-primary);
}

.mv-compare-slots {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  list-style: none;
  overflow-x: auto;
}

.mv-compare-slots li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 38px 8px 8px;
  background-color: var(--mv-color-carbon);
  border-radius: var(--mv-radius);
  flex: none;
}

.mv-compare-slots img {
  width: 54px;
  height: 38px;
  object-fit: cover;
  border-radius: 6px;
}

.mv-compare-slots b {
  font-size: 13px;
  font-weight: 600;
  color: var(--mv-color-white);
  white-space: nowrap;
}

.mv-compare-slots button {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--mv-color-muted);
}

.mv-compare-slots button:hover {
  color: var(--mv-color-primary);
}

.mv-compare-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.mv-compare-clear {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
}

.mv-compare-clear:hover {
  color: var(--mv-color-primary);
}

.mv-compare-warn {
  display: none;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  color: var(--mv-color-primary);
}

/*======================
5. Offcanvas Menu
========================*/
.mv-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  width: 380px;
  max-width: 88vw;
  padding: 28px 32px 40px;
  overflow-y: auto;
  background-color: var(--mv-color-surface);
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-offcanvas.is-open {
  transform: translateX(0);
}

.mv-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 199;
  background-color: rgba(5, 7, 10, 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.mv-offcanvas-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.mv-offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 22px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--mv-color-line);
}

.mv-offcanvas-head img {
  width: 180px;
}

.mv-offcanvas-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  font-size: 17px;
  color: var(--mv-heading);
  background-color: var(--mv-tonal);
  border-radius: 50%;
  flex: none;
}

.mv-offcanvas-close:hover {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
}

/* theme switch and language side by side under the logo */
.mv-offcanvas-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.mv-offcanvas-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  font-size: 16px;
  color: var(--mv-heading);
  background-color: var(--mv-tonal);
  border-radius: 50%;
}

.mv-offcanvas-theme .mvi-sun,
[data-theme="dark"] .mv-offcanvas-theme .mvi-moon {
  display: none;
}

[data-theme="dark"] .mv-offcanvas-theme .mvi-sun {
  display: inline-block;
}

.mv-offcanvas-nav {
  list-style: none;
}

.mv-offcanvas-nav li {
  border-bottom: 1px solid var(--mv-color-line-2);
}

.mv-offcanvas-nav > li {
  position: relative;
}

.mv-offcanvas-nav > li > a {
  display: block;
  padding: 13px 0;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--mv-heading);
}

.mv-offcanvas-nav > li > a.active,
.mv-offcanvas-nav .sub-menu a.active {
  color: var(--mv-color-primary-deep);
}

.mv-offcanvas-nav .sub-menu {
  display: none;
  list-style: none;
  padding: 0 0 10px 16px;
}

.mv-offcanvas-nav .sub-menu li {
  border: none;
}

.mv-offcanvas-nav .sub-menu a {
  display: block;
  padding: 6px 0;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--mv-color-body);
}

.mv-offcanvas-nav .sub-menu a:hover {
  color: var(--mv-heading);
}

.mv-offcanvas-toggle {
  position: absolute;
  right: 0;
  top: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 13px;
  color: var(--mv-heading);
  background-color: var(--mv-tonal);
  border-radius: 50%;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.mv-offcanvas-nav > li.is-open > .mv-offcanvas-toggle {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  transform: rotate(180deg);
}

.mv-offcanvas-foot {
  margin-top: 34px;
}

.mv-offcanvas-title {
  margin-bottom: 12px;
  font-size: 19px;
}

.mv-offcanvas-contact {
  list-style: none;
  margin-bottom: 24px;
}

.mv-offcanvas-contact li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  padding: 6px 0;
}

.mv-offcanvas-contact i {
  font-size: 15px;
  color: var(--mv-color-primary-deep);
}

.mv-social {
  display: flex;
  align-items: center;
  gap: 9px;
  list-style: none;
}

.mv-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 15px;
  color: var(--mv-heading);
  background-color: var(--mv-tonal);
  border-radius: 50%;
}

.mv-social a:hover {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  transform: translateY(-3px);
}

/*======================
6. Hero
========================*/
.mv-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: #0A0D10;
}

.mv-hero-slider {
  position: relative;
}

.mv-hero-slide {
  position: relative;
  height: clamp(860px, calc(100vh + 70px), 1000px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.mv-hero-bg {
  position: absolute;
  /* inset past the frame so the parallax drift never exposes an edge */
  top: -14%;
  right: 0;
  bottom: -14%;
  left: 0;
}

.mv-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.12);
  transition: transform 7s linear;
}

.swiper-slide-active .mv-hero-bg img {
  transform: scale(1);
}

.mv-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(10, 13, 16, 0.55) 0%, rgba(10, 13, 16, 0) 28%, rgba(10, 13, 16, 0) 62%, rgba(10, 13, 16, 0.85) 100%), var(--mv-hero-shade);
}

/* the light trails stream out of the right half; the copy side stays clear */
.mv-hero > .mv-gl {
  z-index: 3;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.25) 34%, #000 62%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.25) 34%, #000 62%);
}

.mv-hero-inner {
  position: relative;
  z-index: 4;
  max-width: 820px;
  padding: 120px 0 230px;
}

.mv-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch-wide);
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mv-color-primary);
}

.mv-hero-eyebrow::before {
  content: "";
  width: 34px;
  height: 9px;
  background-image: repeating-linear-gradient(90deg, var(--mv-color-primary) 0 3px, transparent 3px 7px);
}

.mv-hero-slide h1,
.mv-hero-slide h2 {
  margin-bottom: 24px;
  font-size: var(--mv-fs-h1);
  line-height: 1.04;
  color: var(--mv-color-white);
}

/* headline lines are set, never re-wrapped */
.mv-hero-slide .ln {
  display: block;
  white-space: nowrap;
}

.mv-hero-slide h1 em,
.mv-hero-slide h2 em {
  font-style: normal;
  color: var(--mv-color-primary);
}

.mv-hero-slide p {
  max-width: 540px;
  font-size: var(--mv-fs-lead);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.74);
  margin-bottom: 38px;
}

.mv-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 52px;
}

/* the copy skew-slides in once the preloader has cleared */
.mv-staged .mv-hero-inner > span,
.mv-staged .mv-hero-inner .ln,
.mv-staged .mv-hero-inner > p,
.mv-staged .mv-hero-inner > .mv-hero-actions,
.mv-staged .mv-hero-inner > .mv-hero-rail {
  opacity: 0;
  transform: translate3d(-48px, 0, 0) skewX(-8deg);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.mv-ready .mv-staged .swiper-slide-active .mv-hero-inner > span,
.mv-ready .mv-staged .swiper-slide-active .mv-hero-inner .ln,
.mv-ready .mv-staged .swiper-slide-active .mv-hero-inner > p,
.mv-ready .mv-staged .swiper-slide-active .mv-hero-inner > .mv-hero-actions,
.mv-ready .mv-staged .swiper-slide-active .mv-hero-inner > .mv-hero-rail {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.mv-ready .mv-staged .swiper-slide-active .mv-hero-inner .ln:nth-child(1) { transition-delay: 0.1s; }
.mv-ready .mv-staged .swiper-slide-active .mv-hero-inner .ln:nth-child(2) { transition-delay: 0.18s; }
.mv-ready .mv-staged .swiper-slide-active .mv-hero-inner .ln:nth-child(3) { transition-delay: 0.26s; }
.mv-ready .mv-staged .swiper-slide-active .mv-hero-inner > p { transition-delay: 0.36s; }
.mv-ready .mv-staged .swiper-slide-active .mv-hero-inner > .mv-hero-actions { transition-delay: 0.46s; }
.mv-ready .mv-staged .swiper-slide-active .mv-hero-inner > .mv-hero-rail { transition-delay: 0.56s; }

/* Spec rail -- the slide's hard numbers, built into the layout with hairline rules */
.mv-hero-rail {
  display: flex;
  align-items: stretch;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 26px;
}

.mv-hero-rail li {
  padding-right: 36px;
}

.mv-hero-rail li + li {
  padding-left: 36px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.mv-hero-rail b {
  display: block;
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch-wide);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--mv-color-white);
}

.mv-hero-rail b i {
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  color: var(--mv-color-primary);
}

.mv-hero-rail b + span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

/* Avatar group: real faces beside the actions */
.mv-faces {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-left: 12px;
}

.mv-faces-row {
  display: inline-flex;
  align-items: center;
}

.mv-faces-row img,
.mv-faces-row b {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #0A0D10;
  object-fit: cover;
  object-position: center top;
}

.mv-faces-row > * + * {
  margin-left: -11px;
}

.mv-faces-row b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
}

.mv-faces-copy {
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}

.mv-stars {
  display: flex;
  gap: 2px;
  font-size: 11px;
  color: var(--mv-color-star);
}

/* Slider chrome: counter, autoplay progress and arrows on one line */
.mv-hero-chrome {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 190px;
  z-index: 5;
  pointer-events: none;
}

.mv-hero-chrome-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
}

.mv-hero-count {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch-wide);
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
}

.mv-hero-count b {
  font-weight: 700;
  color: var(--mv-color-white);
}

.mv-hero-bar {
  position: relative;
  width: 120px;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.mv-hero-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background-color: var(--mv-color-primary);
}

.mv-hero-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

.mv-hero-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 15px;
  color: var(--mv-color-white);
  background-color: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.mv-hero-nav button:hover {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
}

/*======================
7. Search Panel
========================*/
.mv-search {
  position: relative;
  z-index: 40;
  /* The card lifts onto the hero; ::before starts at the hero's bottom edge (the
     lift) and paints the next section's ground under the card's lower half. */
  margin-top: -120px;
}

.mv-search::before {
  content: "";
  position: absolute;
  top: 120px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: var(--mv-ground);
}

.mv-search-card {
  padding: 26px 32px 28px;
  background-color: var(--mv-color-surface);
  border-radius: 24px;
  box-shadow: var(--mv-shadow-lg);
}

[data-theme="dark"] .mv-search-card {
  box-shadow: var(--mv-shadow-lg), inset 0 0 0 1px var(--mv-color-line);
}

/* Bare: the panel keeps its wiring but drops the card, for heroes that already
   provide a ground of their own. */
.mv-search-card.is-bare {
  padding: 0;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* condition tabs as a segmented control, not a coloured strip */
.mv-search-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 22px;
  list-style: none;
}

.mv-search-tabs li {
  flex: none;
}

.mv-search-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 18px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--mv-color-body);
  background-color: var(--mv-tonal);
  border-radius: var(--mv-radius-pill);
  transition: color 0.3s ease, background-color 0.3s ease;
}

.mv-search-tabs button i {
  font-size: 13px;
  color: var(--mv-color-primary-deep);
}

.mv-search-tabs button:hover {
  color: var(--mv-heading);
  background-color: var(--mv-tonal-2);
}

.mv-search-tabs button.is-active {
  color: var(--mv-color-white);
  background-color: var(--mv-color-ink);
}

.mv-search-tabs button.is-active i {
  color: var(--mv-color-primary);
}

[data-theme="dark"] .mv-search-tabs button.is-active {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-white);
}

[data-theme="dark"] .mv-search-tabs button.is-active i {
  color: var(--mv-color-ink);
}

.mv-search-tabs-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  font-size: 13.5px;
  color: var(--mv-color-muted);
}

.mv-search-body {
  padding: 0;
}

.mv-search-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 190px;
  gap: 16px;
  align-items: end;
}

.mv-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mv-color-muted);
}

.mv-field-control {
  position: relative;
}

.mv-field-control > i:not(.caret) {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 16px;
  color: var(--mv-color-primary-deep);
  background-color: var(--mv-color-primary-soft);
  border-radius: 50%;
  pointer-events: none;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.mv-field select,
.mv-field input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 40px 0 56px;
  font-size: 15px;
  font-weight: 500;
  color: var(--mv-heading);
  background-color: var(--mv-color-paper);
  border: 1px solid var(--mv-color-line);
  border-radius: 14px;
  appearance: none;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.mv-field input::placeholder {
  color: var(--mv-color-muted);
  font-weight: 400;
}

.mv-field select:focus,
.mv-field input:focus {
  background-color: var(--mv-color-surface);
  border-color: var(--mv-color-primary);
}

.mv-field-control:focus-within > i:not(.caret) {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
}

.mv-field select:disabled {
  color: var(--mv-color-muted);
  cursor: not-allowed;
}

.mv-field-control .caret {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--mv-color-muted);
  pointer-events: none;
}

.mv-field-search .mv-btn {
  height: 56px;
  border-radius: 14px;
}

.mv-search-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--mv-color-line-2);
}

.mv-search-result {
  font-size: 14.5px;
  color: var(--mv-color-body);
}

.mv-search-result b {
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch-wide);
  font-size: 22px;
  font-weight: 700;
  color: var(--mv-heading);
  margin-right: 6px;
}

.mv-search-advanced {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--mv-heading);
}

.mv-search-advanced i {
  font-size: 13px;
  color: var(--mv-color-primary-deep);
}

.mv-search-advanced:hover {
  color: var(--mv-color-primary-deep);
}

/*======================
8. Car Card
========================*/
/* The photo sits inset in the card on its own radius; the price is the card's
   headline figure, under the name. */
.mv-car {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: 22px;
  transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
}

.mv-car:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: var(--mv-shadow-lg);
}

.mv-car-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  border-radius: 15px;
}

.mv-car-media > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-car:hover .mv-car-media > img:first-child {
  transform: scale(1.07);
}

/* a headlight sheen crosses the photo once as the card lands */
.mv-car-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}

.js .mv-car.is-in .mv-car-media::after {
  transform: translateX(120%);
  transition: transform 1.3s cubic-bezier(0.5, 0, 0.2, 1) 0.25s;
}

/* Sheared plates -- the automotive detail carried from v1 */
.mv-car-tag {
  position: absolute;
  top: 14px;
  left: 0;
  padding: 6px 20px 6px 14px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  clip-path: var(--mv-shear);
}

.mv-car-tag.is-ink {
  color: var(--mv-color-white);
  background-color: var(--mv-color-ink);
}

.mv-car-acts {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mv-car-fav,
.mv-car-compare {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: 14px;
  color: #101418;
  background-color: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.mv-car-fav:hover,
.mv-car-fav.is-on,
.mv-car-compare:hover,
.mv-car-compare.is-on {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
}

.mv-car-media .mv-car-flag {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 28px;
  height: 20px;
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.mv-car-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 20px 12px 6px;
}

.mv-car-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mv-color-muted);
}

.mv-car-meta em {
  font-style: normal;
  color: var(--mv-color-line);
}

.mv-car h3 {
  font-size: 21px;
  margin-bottom: 8px;
}

.mv-car h3 a:hover {
  color: var(--mv-color-primary-deep);
}

.mv-car-priceline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 12px;
}

.mv-car-priceline .mv-car-price {
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--mv-heading);
}

.mv-car-priceline span {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--mv-color-primary-deep);
}

.mv-car-body > p:not(.mv-car-meta):not(.mv-car-priceline) {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 18px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--mv-color-body);
}

/* Spec rail -- three hard facts on a tonal strip with hairline dividers */
.mv-car-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background-color: var(--mv-tonal);
  border-radius: 14px;
}

.mv-car-specs li {
  padding: 12px 6px;
  text-align: center;
  list-style: none;
}

.mv-car-specs li + li {
  border-left: 1px solid var(--mv-color-line);
}

.mv-car-specs i {
  display: block;
  margin-bottom: 4px;
  font-size: 17px;
  color: var(--mv-color-primary-deep);
}

.mv-car-specs b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mv-heading);
}

.mv-car-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--mv-color-line-2);
}

.mv-car-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 500;
  color: var(--mv-heading);
}

.mv-car-cta i {
  font-size: 12px;
  color: var(--mv-color-primary-deep);
  transition: transform 0.35s ease;
}

.mv-car-cta:hover i {
  transform: translateX(5px) skewX(-10deg);
}

.mv-car-drive {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--mv-heading);
  background-color: var(--mv-tonal);
  border-radius: var(--mv-radius-pill);
}

.mv-car-drive i {
  font-size: 12px;
  color: var(--mv-color-primary-deep);
}

.mv-car-drive:hover {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
}

.mv-car-drive:hover i {
  color: var(--mv-color-ink);
}

.mv-car-loc i {
  font-size: 13px;
  color: var(--mv-color-primary-deep);
}

/*======================
9. Featured Models
========================*/
.mv-featured .mv-car {
  margin-bottom: 30px;
}

.mv-featured-foot {
  margin-top: 22px;
  text-align: center;
}

/*======================
10. Brands
========================*/
/* eight marques on one row of tiles; each badge on its own white disc so the
   full-colour art reads on either theme */
.mv-brand-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 14px;
}

.mv-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 26px 10px 22px;
  text-align: center;
  background-color: var(--mv-color-surface);
  border-radius: 20px;
  box-shadow: var(--mv-shadow);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.mv-brand:hover {
  transform: translateY(-6px);
  box-shadow: var(--mv-shadow-lg);
}

.mv-brand img {
  width: 82px;
  height: 82px;
  margin-bottom: 6px;
  padding: 7px;
  object-fit: contain;
  background-color: #FFFFFF;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(16, 20, 24, 0.08);
  transition: transform 0.35s ease;
}

.mv-brand:hover img {
  transform: scale(1.08) rotate(-4deg);
}

.mv-brand b {
  font-size: 15px;
  font-weight: 600;
  color: var(--mv-heading);
}

.mv-brand span {
  font-size: 13px;
  color: var(--mv-color-muted);
}

.mv-brand.is-hidden {
  display: none;
}

.mv-brand-foot {
  margin-top: 40px;
  text-align: center;
}

/*======================
11. Why Prestora
========================*/
.mv-why-media {
  position: relative;
  padding-right: 60px;
  padding-bottom: 60px;
}

.mv-why-media > img {
  width: 100%;
  border-radius: var(--mv-radius-lg);
}

.mv-why-media .mv-why-inset {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58%;
  border: 8px solid var(--mv-color-white);
  border-radius: var(--mv-radius-lg);
  overflow: hidden;
}

.mv-why-media .mv-why-inset img {
  width: 100%;
  display: block;
}

/* Gauge -- a conic speedometer arc, our counter motif */
.mv-gauge {
  position: absolute;
  left: 0;
  bottom: 24px;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--mv-color-ink);
  background-image: conic-gradient(var(--mv-color-primary) calc(var(--mv-gauge-val, 0) * 1%), rgba(255, 255, 255, 0.12) 0);
  box-shadow: var(--mv-shadow-lg);
}

.mv-gauge::after {
  content: "";
  position: absolute;
  inset: 12px;
  background-color: var(--mv-color-ink);
  border-radius: 50%;
}

.mv-gauge-core {
  position: relative;
  z-index: 2;
  text-align: center;
}

.mv-gauge-core b {
  display: block;
  font-family: var(--mv-ff-display);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--mv-color-white);
}

.mv-gauge-core > span {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.mv-why-list {
  list-style: none;
  margin: 26px 0 34px;
}

/* A numbered gutter with its own rule -- the count is part of the layout
   rather than a decorative bullet stuck on the front of each line. */
.mv-why-list li {
  position: relative;
  padding: 18px 0 18px 66px;
  border-bottom: 1px solid var(--mv-color-line-2);
}

.mv-why-list li:first-child {
  border-top: 1px solid var(--mv-color-line-2);
}

.mv-why-list li::before {
  content: "";
  position: absolute;
  left: 44px;
  top: 20px;
  bottom: 20px;
  width: 1px;
  background-color: var(--mv-color-line);
  transition: background-color 0.35s ease;
}

.mv-why-list li:hover::before {
  background-color: var(--mv-color-primary);
}

.mv-why-list .num {
  position: absolute;
  left: 0;
  top: 17px;
  font-family: var(--mv-ff-display);
  font-size: 25px;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--mv-heading-soft);
  transition: color 0.35s ease;
}

.mv-why-list li:hover .num {
  color: var(--mv-color-primary-deep);
}

.mv-why-list b {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--mv-heading);
}

.mv-why-list b + span {
  font-size: 14.5px;
  color: var(--mv-color-body);
}

/*======================
12. How It Works
========================*/
.mv-step {
  position: relative;
  height: 100%;
  padding: 40px 34px 36px;
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.mv-step:hover {
  transform: translateY(-8px);
  box-shadow: var(--mv-shadow);
}

.mv-step-num {
  position: absolute;
  top: 22px;
  right: 28px;
  font-family: var(--mv-ff-display);
  font-size: 62px;
  line-height: 1;
  letter-spacing: 2px;
  color: var(--mv-color-line-2);
  transition: color 0.4s ease;
}

.mv-step:hover .mv-step-num {
  color: var(--mv-color-primary);
}

.mv-step .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 22px;
  font-size: 25px;
  color: var(--mv-color-primary);
  background-color: var(--mv-color-ink);
  border-radius: var(--mv-radius);
  transition: color 0.4s ease, background-color 0.4s ease;
}

.mv-step:hover .ico {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
}

.mv-step h3 {
  font-size: 22px;
  margin-bottom: 12px;
}

.mv-step p {
  font-size: 15px;
  line-height: 1.7;
}

/*======================
13. Finance Band
========================*/
.mv-night {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--mv-color-body);
  background-color: #07090C;
}

.mv-night .mv-sec-head p {
  color: var(--mv-color-body);
}

/* terms at a glance: label / value rows */
.mv-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 30px;
  margin: 0 0 40px;
}

.mv-facts div {
  padding: 16px 0;
  border-top: 1px solid var(--mv-color-line);
}

.mv-facts dt {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--mv-color-muted);
}

.mv-facts dd {
  margin: 4px 0 0;
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch);
  font-size: 22px;
  font-weight: 600;
  color: var(--mv-heading);
}

/* the live calculator on smoked glass */
.mv-fincalc {
  padding: 36px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 26px;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.mv-fincalc-head {
  margin-bottom: 26px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--mv-color-line);
}

.mv-fincalc-head > span {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mv-color-muted);
}

.mv-fincalc-head b {
  display: block;
  margin: 6px 0 4px;
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch-wide);
  font-size: clamp(46px, 4.4vw, 66px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--mv-color-primary);
  font-variant-numeric: tabular-nums;
}

.mv-fincalc-head small {
  font-size: 14px;
  color: var(--mv-color-body);
}

.mv-fincalc .mv-field {
  margin-bottom: 22px;
}

.mv-fincalc .mv-field label,
.mv-seg-field legend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  float: none;
  width: 100%;
  margin-bottom: 12px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mv-color-muted);
}

.mv-fincalc .mv-field label span {
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mv-heading);
}

.mv-seg-field {
  min-width: 0;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}

/* segmented radio group */
.mv-seg {
  display: flex;
  gap: 4px;
  padding: 5px;
  background-color: var(--mv-tonal);
  border-radius: var(--mv-radius-pill);
}

.mv-seg input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.mv-seg label {
  flex: 1 1 0;
  padding: 10px 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  color: var(--mv-color-body);
  border-radius: var(--mv-radius-pill);
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.mv-seg label:hover {
  color: var(--mv-heading);
}

.mv-seg input:checked + label {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
}

.mv-seg input:focus-visible + label {
  outline: 2px solid var(--mv-color-primary);
  outline-offset: 2px;
}

/* label / value rows */
.mv-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  font-size: 15px;
  border-bottom: 1px solid var(--mv-color-line);
}

.mv-rows b {
  font-weight: 600;
  color: var(--mv-heading);
  font-variant-numeric: tabular-nums;
}

.mv-fincalc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/*======================
14. Best Match
========================*/
.mv-filter-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  padding: 6px;
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-pill);
}

.mv-filter-nav button {
  display: block;
  padding: 10px 22px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--mv-color-body);
  border-radius: var(--mv-radius-pill);
  transition: color 0.3s ease, background-color 0.3s ease;
}

.mv-filter-nav button:hover {
  color: var(--mv-heading);
}

.mv-filter-nav button.is-active {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
}

.mv-match-grid .col-item {
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.mv-match-grid .col-item.is-out,
.mv-listing-grid > .is-out {
  display: none;
}

.mv-match-empty {
  display: none;
  padding: 60px 0;
  text-align: center;
}

.mv-match-empty.is-on {
  display: block;
}

.mv-countdown {
  display: flex;
  gap: 10px;
  list-style: none;
  margin-bottom: 30px;
}

.mv-countdown li {
  flex: 1 1 0;
  padding: 12px 6px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: var(--mv-radius);
}

.mv-countdown b {
  display: block;
  font-family: var(--mv-ff-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.1;
  color: var(--mv-color-primary);
}

.mv-countdown span {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/*======================
15. Dealers
========================*/
.mv-dealer {
  height: 100%;
  overflow: hidden;
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
  transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
}

.mv-dealer:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: var(--mv-shadow-lg);
}

.mv-dealer-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.mv-dealer-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform-origin: center top;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-dealer:hover .mv-dealer-media img {
  transform: scale(1.07);
}

.mv-dealer-stock {
  position: absolute;
  left: 0;
  bottom: 16px;
  padding: 6px 22px 6px 16px;
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  clip-path: var(--mv-shear);
}

.mv-dealer-body {
  padding: 24px 26px 26px;
}

.mv-dealer-rate {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
}

.mv-dealer-rate span + span {
  font-size: 12.5px;
  color: var(--mv-color-muted);
}

.mv-dealer h3 {
  font-size: 19px;
  margin-bottom: 6px;
}

.mv-dealer-loc {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--mv-color-body);
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--mv-color-line-2);
}

.mv-dealer-loc i {
  font-size: 13px;
  color: var(--mv-color-primary-deep);
}

.mv-dealer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.mv-dealer-foot .mv-link {
  font-size: 12.5px;
}

.mv-dealer-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 14px;
  color: var(--mv-heading);
  background-color: var(--mv-tonal-2);
  border-radius: 50%;
}

.mv-dealer-call:hover {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
}

/*======================
16. Testimonials
========================*/
.mv-quote {
  height: auto;
  padding: 38px 36px 34px;
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.mv-quote:hover {
  border-color: transparent;
  box-shadow: var(--mv-shadow);
}

.mv-quote-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.mv-quote-head > i {
  font-size: 32px;
  color: var(--mv-color-primary);
}

.mv-quote p {
  font-size: 16px;
  line-height: 1.78;
  color: var(--mv-color-body);
  margin-bottom: 24px;
}

.mv-quote-by {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--mv-color-line-2);
}

.mv-quote-by img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  flex: none;
}

.mv-quote-by b {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--mv-heading);
}

.mv-quote-by span {
  display: block;
  font-size: 13px;
  color: var(--mv-color-muted);
}

.mv-swiper-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mv-swiper-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  font-size: 14px;
  color: var(--mv-heading);
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: 50%;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.mv-swiper-nav button:hover {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border-color: var(--mv-color-primary);
}

.mv-quote-slider {
  padding-bottom: 6px;
}

/*======================
17. Journal
========================*/
.mv-post-lead {
  position: relative;
  display: block;
  height: 100%;
  min-height: 470px;
  overflow: hidden;
  border-radius: var(--mv-radius-lg);
}

.mv-post-lead > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform-origin: center top;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-post-lead:hover > img {
  transform: scale(1.06);
}

.mv-post-lead::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, rgba(10, 13, 16, 0.94) 6%, rgba(10, 13, 16, 0.35) 52%, transparent 78%);
}

.mv-post-lead-inner {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 40px 40px 36px;
}

.mv-post-cat {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 20px 6px 15px;
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  clip-path: var(--mv-shear);
}

.mv-post-lead h3 {
  font-size: clamp(24px, 2vw, 32px);
  color: var(--mv-color-white);
  margin-bottom: 12px;
}

.mv-post-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}

.mv-post-meta li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mv-post-meta i {
  font-size: 13px;
  color: var(--mv-color-primary);
}

.mv-post-row {
  display: flex;
  gap: 22px;
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--mv-color-line);
}

.mv-post-row:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.mv-post-row-media {
  flex: none;
  width: 146px;
  overflow: hidden;
  border-radius: var(--mv-radius);
  aspect-ratio: 4 / 3;
}

.mv-post-row-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform-origin: center top;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-post-row:hover .mv-post-row-media img {
  transform: scale(1.07);
}

.mv-post-row-body .mv-post-meta {
  color: var(--mv-color-muted);
  margin-bottom: 8px;
}

.mv-post-row-body .mv-post-meta i {
  color: var(--mv-color-primary-deep);
}

.mv-post-row-body h4 {
  font-size: 18px;
  line-height: 1.42;
  margin-bottom: 8px;
}

.mv-post-row-body h4 a:hover {
  color: var(--mv-color-primary-deep);
}

.mv-post-row-body p {
  font-size: 14.5px;
  line-height: 1.64;
}

/*======================
18. Counter Band
========================*/
.mv-counter {
  position: relative;
  overflow: hidden;
  background-color: #07090C;
}

/* the rev line: fills with the band's travel while the figures climb */
.mv-counter-rev {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.08);
}

.mv-counter-rev i {
  display: block;
  width: calc(var(--rev, 0) * 100%);
  height: 100%;
  background-image: linear-gradient(90deg, var(--mv-color-primary), #FFFFFF);
}

.mv-counter-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.mv-counter-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 64px 20px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.mv-counter-cell:last-child {
  border-right: none;
}

.mv-counter-cell b {
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch-wide);
  font-size: clamp(38px, 3.4vw, 54px);
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  color: var(--mv-color-white);
}

.mv-counter-cell b i {
  font-style: normal;
  color: var(--mv-color-primary);
}

.mv-counter-cell > span {
  font-size: var(--mv-fs-micro);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.mv-counter-shot {
  position: relative;
  min-height: 250px;
  padding: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.mv-counter-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-counter-shot:hover img {
  transform: scale(1.08);
}

/*======================
19. Sell CTA
========================*/
.mv-sell {
  --mv-heading: #101418;
  --mv-heading-soft: rgba(16, 20, 24, 0.55);
  --mv-color-primary-deep: #101418;
  position: relative;
  overflow: hidden;
  padding: 90px 0;
  background-color: var(--mv-color-primary);
}

[data-theme="dark"] .mv-sell .mv-sell-form {
  --mv-heading: #F2F4F6;
  --mv-color-primary-deep: #D3B779;
}

.mv-sell .mv-eyebrow::before {
  background-image: repeating-linear-gradient(90deg, #101418 0 3px, transparent 3px 7px);
}

.mv-sell .mv-ghost {
  color: rgba(16, 20, 24, 0.07);
}

.mv-sell-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 60px;
  align-items: center;
}

.mv-sell h2 {
  margin-bottom: 14px;
}

.mv-sell-inner > div > p {
  font-size: var(--mv-fs-lead);
  color: rgba(16, 20, 24, 0.72);
  max-width: 460px;
}

/* Hard numbers built into the band, on the same rail pattern as the hero */
.mv-sell-rail {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid rgba(var(--mv-color-ink-rgb), 0.18);
}

.mv-sell-rail li {
  padding-right: 34px;
}

.mv-sell-rail li + li {
  padding-left: 34px;
  border-left: 1px solid rgba(var(--mv-color-ink-rgb), 0.18);
}

.mv-sell-rail b {
  display: block;
  font-family: var(--mv-ff-display);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.1;
  color: var(--mv-heading);
}

.mv-sell-rail b i {
  font-size: 16px;
  font-style: normal;
}

.mv-sell-rail > li > span {
  display: block;
  margin-top: 4px;
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(var(--mv-color-ink-rgb), 0.55);
}

.mv-sell-form {
  padding: 30px 32px 32px;
  background-color: var(--mv-color-surface);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-lg);
}

.mv-sell-form h3 {
  margin-bottom: 18px;
}

.mv-sell-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.mv-sell-form .mv-field select,
.mv-sell-form .mv-field input {
  padding-left: 16px;
}

.mv-val-out {
  display: none;
  margin-top: 18px;
  padding: 18px 22px;
  text-align: center;
  background-color: var(--mv-color-ink);
  border-radius: var(--mv-radius);
}

.mv-val-out p {
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.mv-val-out b {
  display: block;
  margin-top: 5px;
  font-family: var(--mv-ff-display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--mv-color-primary);
}

.mv-val-error {
  display: none;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
  color: #9F7852;
}

.mv-sell-note {
  display: block;
  margin-top: 14px;
  font-size: 12.5px;
  text-align: center;
  color: var(--mv-color-muted);
}

/*======================
20. Footer
========================*/
/* Night in both themes (the light variant below follows the theme) */
.mv-footer {
  --mv-heading: #F2F4F6;
  --mv-color-body: rgba(255, 255, 255, 0.62);
  --mv-color-muted: rgba(255, 255, 255, 0.45);
  --mv-color-line: rgba(255, 255, 255, 0.1);
  --mv-tonal: rgba(255, 255, 255, 0.07);
  --mv-tonal-2: rgba(255, 255, 255, 0.12);
  position: relative;
  display: flow-root;
  background-color: #0A0D10;
  color: var(--mv-color-body);
  font-size: 15px;
}

.mv-footer > .container {
  position: relative;
  z-index: 1;
}

/* three jobs a visitor came for, before the link columns */
.mv-footer-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding: 70px 0 60px;
  border-bottom: 1px solid var(--mv-color-line);
}

.mv-footer-action {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 26px;
  background-color: var(--mv-tonal);
  border-radius: var(--mv-radius-lg);
  transition: background-color 0.35s ease, transform 0.35s ease;
}

.mv-footer-action .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 54px;
  height: 54px;
  font-size: 20px;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border-radius: 50%;
}

.mv-footer-action .txt {
  flex: 1 1 auto;
}

.mv-footer-action b {
  display: block;
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch);
  font-size: 20px;
  font-weight: 600;
  color: var(--mv-heading);
}

.mv-footer-action small {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  color: var(--mv-color-body);
}

.mv-footer-action .go {
  font-size: 15px;
  color: var(--mv-heading);
  transition: transform 0.35s ease;
}

.mv-footer-action:hover {
  background-color: var(--mv-tonal-2);
  transform: translateY(-4px);
}

.mv-footer-action:hover .go {
  transform: translateX(5px) skewX(-8deg);
}

.mv-footer-top {
  padding: 70px 0 64px;
}

.mv-footer-grid {
  display: grid;
  grid-template-columns: 1.45fr 0.85fr 0.95fr 1fr 1.35fr;
  gap: 48px;
}

.mv-footer-logo {
  display: inline-block;
  margin-bottom: 22px;
  line-height: 0;
}

.mv-footer-logo img {
  width: 196px;
}

.mv-footer-about p {
  margin-bottom: 22px;
  font-size: 15px;
  line-height: 1.75;
}

.mv-footer-title {
  margin-bottom: 22px;
  font-size: 18px;
  font-weight: 600;
  color: var(--mv-heading);
}

.mv-footer-links li + li {
  margin-top: 12px;
}

.mv-footer-links a {
  color: var(--mv-color-body);
}

.mv-footer-links a:hover {
  color: var(--mv-color-primary);
}

.mv-footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
}

.mv-footer-contact li + li {
  margin-top: 10px;
}

.mv-footer-contact i {
  margin-top: 5px;
  font-size: 15px;
  color: var(--mv-color-primary);
}

/* showroom hours: label / value rows, today's row picked out */
.mv-hours li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  font-size: 14.5px;
  border-bottom: 1px solid var(--mv-color-line);
}

.mv-hours li:first-child {
  padding-top: 0;
}

.mv-hours b {
  font-weight: 500;
  color: var(--mv-heading);
  white-space: nowrap;
}

.mv-hours li.is-today span,
.mv-hours li.is-today b {
  color: var(--mv-color-primary);
}

.mv-hours-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mv-heading);
}

.mv-footer-news p {
  margin-bottom: 18px;
  font-size: 14.5px;
}

.mv-newsletter {
  position: relative;
  margin-bottom: 22px;
}

.mv-newsletter input {
  display: block;
  width: 100%;
  height: 54px;
  padding: 0 64px 0 20px;
  font-size: 14.5px;
  color: var(--mv-heading);
  background-color: var(--mv-tonal);
  border: 1px solid transparent;
  border-radius: var(--mv-radius-pill);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.mv-newsletter input::placeholder {
  color: var(--mv-color-muted);
}

.mv-newsletter input:focus {
  border-color: var(--mv-color-primary);
}

.mv-newsletter button {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  font-size: 14px;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.mv-newsletter button:hover {
  transform: translateX(3px);
}

.mv-footer-bottom {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--mv-color-line);
}

.mv-footer-bottom-inner {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 76px;
  padding: 16px 0;
  font-size: 14px;
}

.mv-footer-bottom-inner > p {
  margin-right: auto;
}

.mv-footer-legal {
  display: flex;
  align-items: center;
  gap: 24px;
}

.mv-footer-legal a {
  color: var(--mv-color-body);
}

.mv-footer-legal a:hover {
  color: var(--mv-color-primary);
}

/*======================
21. Back To Top
========================*/
.mv-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 92;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 15px;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border-radius: 50%;
  box-shadow: var(--mv-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease, background-color 0.3s ease;
}

.mv-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mv-top:hover {
  color: var(--mv-color-primary);
  background-color: var(--mv-color-ink);
}

.mv-top.is-lifted {
  bottom: 118px;
}

/*======================
22. Split Hero
========================*/
.mv-split-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: #07090C;
}

/* the field lines run behind the copy and fade out before the photograph */
.mv-split-hero > .mv-gl {
  z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.8) 38%, transparent 66%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.8) 38%, transparent 66%);
}

.mv-split-hero .mv-split-slider {
  position: relative;
  z-index: 2;
}

.mv-split-hero-slide {
  position: relative;
  min-height: clamp(820px, calc(100vh + 40px), 960px);
  display: flex;
  align-items: center;
}

/* The photo takes the right half and meets the copy on a sheared edge */
.mv-split-hero-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 54%;
  clip-path: polygon(170px 0, 100% 0, 100% 100%, 0 100%);
}

.mv-split-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mv-split-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(7, 9, 12, 0.75) 0%, rgba(7, 9, 12, 0.05) 40%, rgba(7, 9, 12, 0.35) 100%), linear-gradient(180deg, rgba(7, 9, 12, 0.5) 0%, transparent 25%);
}

.mv-split-hero-body {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding: 150px 0 170px;
}

.mv-split-hero-body h1,
.mv-split-hero-body h2 {
  margin-bottom: 24px;
  font-size: var(--mv-fs-h1);
  line-height: 1.04;
  color: var(--mv-color-white);
}

.mv-split-hero-body .ln {
  display: block;
  white-space: nowrap;
}

.mv-split-hero-body h1 em,
.mv-split-hero-body h2 em {
  font-style: normal;
  color: var(--mv-color-primary);
}

.mv-split-hero-body > p {
  max-width: 520px;
  font-size: var(--mv-fs-lead);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 36px;
}

/* the featured car, on smoked glass over the photograph */
.mv-split-hero-card {
  position: absolute;
  right: 6%;
  bottom: 220px;
  z-index: 3;
  width: 310px;
  padding: 24px 26px;
  background-color: rgba(7, 9, 12, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.mv-split-hero-card > span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mv-color-primary);
}

.mv-split-hero-card-name {
  display: block;
  margin: 8px 0 14px;
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch);
  font-size: 21px;
  font-weight: 600;
  color: var(--mv-color-white);
}

.mv-split-hero-card ul {
  display: flex;
  list-style: none;
  margin-bottom: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.mv-split-hero-card li {
  flex: 1 1 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
}

.mv-split-hero-card li b {
  display: block;
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch-wide);
  font-size: 19px;
  font-weight: 700;
  color: var(--mv-color-white);
}

.mv-split-nav {
  position: absolute;
  right: 6%;
  bottom: 146px;
  z-index: 4;
  display: flex;
  gap: 10px;
}

.mv-split-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 15px;
  color: var(--mv-color-white);
  background-color: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.mv-split-nav button:hover {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
}

/*======================
23. Advanced Search
========================*/
.mv-advanced {
  position: relative;
  z-index: 40;
  margin-top: -96px;
}

/* Docked into the next section (Home 2): the section starts at the hero's edge,
   its ground and texture run up under the card, and the card lifts onto the
   hero above it. The card keeps the page's own colours, not the night band's. */
.mv-night.has-dock {
  z-index: 3;
  overflow: visible;
  overflow-x: clip;
}

.mv-advanced.is-docked {
  margin-bottom: 120px;
  --mv-heading: var(--mv-page-heading);
  --mv-heading-soft: var(--mv-page-heading-soft);
  --mv-color-body: var(--mv-page-body);
  --mv-color-muted: var(--mv-page-muted);
  --mv-color-line: var(--mv-page-line);
  --mv-color-surface: var(--mv-page-surface);
  --mv-tonal: var(--mv-page-tonal);
  --mv-tonal-2: var(--mv-page-tonal-2);
  --mv-color-primary-deep: var(--mv-page-primary-deep);
  color: var(--mv-color-body);
}

.mv-search-form.is-advanced {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mv-search-form.is-advanced .mv-field-range {
  grid-column: span 2;
}

.mv-field-range label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mv-field-range .mv-range-out {
  font-family: var(--mv-ff-display);
  font-size: 15px;
  letter-spacing: 0.6px;
  text-transform: none;
  color: var(--mv-heading);
}

.mv-field-range .mv-field-control {
  display: flex;
  align-items: center;
  height: 54px;
  padding: 0 18px;
  background-color: var(--mv-color-paper);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius);
}

.mv-search-reset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--mv-color-muted);
}

.mv-search-reset:hover {
  color: var(--mv-heading);
}

/*======================
24. Car Rail
========================*/
.mv-rail {
  padding-bottom: 6px;
}

.mv-rail-card {
  display: grid;
  grid-template-columns: 216px 1fr;
  height: 100%;
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
  overflow: hidden;
  transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
}

.mv-rail-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--mv-shadow-lg);
}

.mv-rail-media {
  position: relative;
  overflow: hidden;
}

.mv-rail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-rail-card:hover .mv-rail-media img {
  transform: scale(1.07);
}

.mv-rail-tag {
  position: absolute;
  top: 14px;
  left: 0;
  padding: 5px 18px 5px 13px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  clip-path: var(--mv-shear-sm);
}

.mv-rail-body {
  padding: 24px 26px;
}

.mv-rail-body h3 {
  font-size: 21px;
  margin-bottom: 14px;
}

.mv-rail-specs {
  display: flex;
  list-style: none;
  padding: 13px 0;
  margin-bottom: 14px;
  border-top: 1px solid var(--mv-color-line-2);
  border-bottom: 1px solid var(--mv-color-line-2);
}

.mv-rail-specs li {
  flex: 1 1 0;
  font-size: 13px;
  color: var(--mv-color-muted);
}

.mv-rail-specs li i {
  margin-right: 7px;
  color: var(--mv-color-primary-deep);
  font-size: 15px;
}

.mv-rail-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.mv-rail-price {
  font-family: var(--mv-ff-display);
  font-size: 26px;
  letter-spacing: 0.6px;
  color: var(--mv-heading);
}

.mv-rail-price small {
  display: block;
  font-family: var(--mv-ff-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--mv-color-muted);
}

/*======================
25. Brand Tabs
========================*/
.mv-tabs {
  display: grid;
  grid-template-columns: 268px 1fr;
  gap: 46px;
  align-items: start;
}

.mv-tabs-nav {
  list-style: none;
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
  overflow: hidden;
}

.mv-tabs-nav li + li {
  border-top: 1px solid var(--mv-color-line);
}

.mv-tabs-nav button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 15px 22px;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  color: var(--mv-heading);
  transition: color 0.3s ease, background-color 0.3s ease, padding 0.3s ease;
}

.mv-tabs-nav button span {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--mv-color-muted);
}

.mv-tabs-nav button:hover {
  padding-left: 28px;
}

.mv-tabs-nav button.is-active {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
}

.mv-tabs-nav button.is-active span {
  color: rgba(var(--mv-color-ink-rgb), 0.6);
}

.mv-tabs-panel {
  display: none;
}

.mv-tabs-panel.is-on {
  display: block;
}

.mv-model-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.mv-model {
  display: block;
  padding: 22px 24px;
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.mv-model:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--mv-shadow);
}

.mv-model li i {
  font-size: 14px;
}

.mv-model b {
  display: block;
  font-family: var(--mv-ff-display);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.6px;
  color: var(--mv-heading);
}

.mv-model .from {
  display: block;
  margin: 3px 0 14px;
  font-size: 13px;
  color: var(--mv-color-muted);
}

.mv-model ul {
  display: flex;
  list-style: none;
  padding-top: 13px;
  border-top: 1px solid var(--mv-color-line-2);
}

.mv-model li {
  flex: 1 1 0;
  font-size: 12px;
  color: var(--mv-color-muted);
}

.mv-model li i {
  margin-right: 6px;
  color: var(--mv-color-primary-deep);
}

/*======================
26. Media Strip
========================*/
.mv-media-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  border-top: 1px solid var(--mv-color-line);
  border-bottom: 1px solid var(--mv-color-line);
}

.mv-media-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 52px 20px;
}

.mv-media-item + .mv-media-item {
  border-left: 1px solid var(--mv-color-line);
}

.mv-media-item img {
  max-height: 34px;
  width: auto;
  opacity: 0.48;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.mv-media-item:hover img {
  opacity: 1;
  transform: scale(1.06);
}

.mv-media-quote {
  max-width: 880px;
  margin: 56px auto 0;
  text-align: center;
}

.mv-media-quote > i {
  font-size: 30px;
  color: var(--mv-color-primary);
}

.mv-media-quote p {
  margin: 18px 0 20px;
  font-family: var(--mv-ff-display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: 0.4px;
  color: var(--mv-heading);
}

.mv-media-quote cite {
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mv-color-muted);
}

/*======================
27. Gallery Wall
========================*/
.mv-gallery-grid {
  display: grid;
  /* the thumbnails take a third: wide enough to read each film at a glance */
  grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
  gap: 26px;
  align-items: stretch;
}

.mv-gallery-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
}

.mv-gallery-nav button {
  display: block;
  width: 100%;
  padding: 0;
  height: 100%;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--mv-radius);
  transition: border-color 0.3s ease;
}

.mv-gallery-nav button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.78;
  transition: opacity 0.35s ease, transform 0.6s ease;
}

.mv-gallery-nav button:hover img {
  opacity: 1;
  transform: scale(1.06);
}

.mv-gallery-nav button.is-active {
  border-color: var(--mv-color-primary);
}

.mv-gallery-nav button.is-active img {
  opacity: 1;
}

.mv-gallery-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--mv-radius-lg);
  background-color: var(--mv-color-ink);
}

.mv-gallery-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mv-gallery-stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background-image: linear-gradient(to top, rgba(10, 13, 16, 0.92), transparent);
}

.mv-gallery-caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 36px 38px 32px;
}

.mv-gallery-caption span {
  display: block;
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mv-color-primary);
}

.mv-gallery-caption h3 {
  max-width: 620px;
  margin-top: 8px;
  font-size: clamp(21px, 2vw, 29px);
  color: var(--mv-color-white);
}

.mv-gallery-play {
  position: absolute;
  top: 26px;
  right: 26px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  font-size: 17px;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border-radius: 50%;
}

.mv-gallery-play:hover {
  color: var(--mv-color-primary);
  background-color: var(--mv-color-ink);
}

/*======================
28. Social Mosaic
========================*/
.mv-social-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 300px;
  gap: 18px;
}

.mv-social-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--mv-radius-lg);
  background-color: var(--mv-color-ink);
}

.mv-social-tile.is-tall {
  grid-row: span 2;
}

.mv-social-tile.is-wide {
  grid-column: span 2;
}

.mv-social-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-social-tile:hover img {
  transform: scale(1.07);
}

/* Platform badge on the sheared plate the rest of the template uses, in the
   network's own colours so the source reads before the photo does */
.mv-social-plat {
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 12px 32px 12px 20px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--mv-color-white);
  background-color: var(--mv-color-ink);
  clip-path: var(--mv-shear);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6);
}

.mv-social-plat i {
  font-size: 21px;
}

.mv-social-plat.is-instagram {
  background-image: linear-gradient(45deg, #C4B661 0%, #DD2A7B 42%, #8134AF 72%, #515BD4 100%);
}

.mv-social-plat.is-x {
  background-color: #000000;
}

.mv-social-plat.is-facebook {
  background-color: #1877F2;
}

.mv-social-plat.is-youtube {
  background-color: #C17744;
}

.mv-social-plat.is-tiktok {
  background-color: #000000;
  text-shadow: -1px 0 #25F4EE, 1px 0 #FE2C55;
}

.mv-social-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 44px 22px 20px;
  background-image: linear-gradient(to top, rgba(10, 13, 16, 0.94) 22%, transparent);
  transform: translateY(26px);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}

.mv-social-tile:hover .mv-social-body {
  transform: translateY(0);
  opacity: 1;
}

.mv-social-body p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--mv-color-white);
  margin-bottom: 14px;
}

.mv-social-by {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.mv-social-by img {
  width: 32px;
  height: 32px;
  flex: none;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
}

.mv-social-by b {
  font-size: 13px;
  font-weight: 600;
  color: var(--mv-color-white);
}

.mv-social-by span {
  margin-left: auto;
  font-size: 12px;
  color: var(--mv-color-primary);
}

.mv-social-foot {
  margin-top: 40px;
  text-align: center;
}

/*======================
29. Header Variants
========================*/
/* Each home wears a header that suits its buyer. The markup is one shape; a
   modifier on <header> changes it, so nothing is duplicated per page. */

/* OVERLAY -- sits on the hero photograph in white, pins as a glass bar */
.mv-header.is-overlay {
  position: absolute;
  top: auto;
  left: 0;
  right: 0;
  background-color: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.mv-header.is-overlay .mv-nav > ul > li > a,
.mv-header.is-inner .mv-nav > ul > li > a {
  color: var(--mv-color-white);
}

.mv-header.is-overlay .mv-icon-btn,
.mv-header.is-overlay .mv-nav-toggler,
.mv-header.is-inner .mv-icon-btn,
.mv-header.is-inner .mv-nav-toggler {
  color: var(--mv-color-white);
  background-color: rgba(255, 255, 255, 0.12);
}

.mv-header.is-overlay .mv-icon-btn:hover,
.mv-header.is-inner .mv-icon-btn:hover {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
}

.mv-header.is-overlay .mv-count,
.mv-header.is-inner .mv-count {
  border-color: #0A0D10;
}

.mv-header.is-overlay .mv-logo .on-light,
.mv-header.is-inner .mv-logo .on-light {
  display: none;
}

.mv-header.is-overlay .mv-logo .on-dark,
.mv-header.is-inner .mv-logo .on-dark {
  display: inline-block;
}

.mv-header.is-overlay .mv-nav > ul > li:hover > a,
.mv-header.is-overlay .mv-nav > ul > li.active > a,
.mv-header.is-inner .mv-nav > ul > li:hover > a,
.mv-header.is-inner .mv-nav > ul > li.active > a {
  color: var(--mv-color-primary);
}

/* pinned: a glass bar in the page's own theme */
.mv-header.is-overlay.is-stuck {
  position: fixed;
  top: 0;
  background-color: var(--mv-glass);
  border-bottom-color: var(--mv-color-line);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  animation: mv-drop 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes mv-drop {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

.mv-header.is-overlay.is-stuck .mv-nav > ul > li > a {
  color: var(--mv-heading);
}

.mv-header.is-overlay.is-stuck .mv-nav > ul > li:hover > a,
.mv-header.is-overlay.is-stuck .mv-nav > ul > li.active > a {
  color: var(--mv-color-primary-deep);
}

.mv-header.is-overlay.is-stuck .mv-icon-btn,
.mv-header.is-overlay.is-stuck .mv-nav-toggler {
  color: var(--mv-heading);
  background-color: var(--mv-tonal);
}

.mv-header.is-overlay.is-stuck .mv-count {
  border-color: var(--mv-ground);
}

.mv-header.is-overlay.is-stuck .mv-logo .on-light {
  display: inline-block;
}

.mv-header.is-overlay.is-stuck .mv-logo .on-dark {
  display: none;
}

[data-theme="dark"] .mv-header.is-overlay.is-stuck .mv-logo .on-light {
  display: none;
}

[data-theme="dark"] .mv-header.is-overlay.is-stuck .mv-logo .on-dark {
  display: inline-block;
}

/* INNER -- every page below the homes wears the night masthead */
.mv-header.is-inner {
  background-color: #0A0D10;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* CENTERED -- nav left, wordmark in the middle, actions right */
.mv-header.is-centered .mv-header-main {
  height: 96px;
}

.mv-header.is-centered .mv-logo {
  order: 2;
  margin: 0 auto;
}

.mv-header.is-centered .mv-nav {
  order: 1;
  flex: 1 1 0;
}

.mv-header.is-centered .mv-header-right {
  order: 3;
  flex: 1 1 0;
  justify-content: flex-end;
}

/* SEARCH -- a stock lookup lives in the bar itself */
.mv-header-search {
  position: relative;
  flex: 0 0 250px;
  margin-left: 6px;
}

.mv-header.is-search .mv-nav > ul > li > a {
  padding-left: 10px;
  padding-right: 10px;
}

.mv-header.is-search .mv-header-main {
  gap: 18px;
}

.mv-header.is-search .mv-header-search {
  flex-basis: 220px;
}

/* the compare control in a list row is a labelled pill, not the round photo button */
.mv-listrow-side .mv-car-compare {
  width: auto;
  height: 38px;
  gap: 8px;
  padding: 0 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--mv-heading);
  background-color: var(--mv-tonal);
  border-radius: var(--mv-radius-pill);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.mv-header-search input {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 50px 0 20px;
  font-size: 14.5px;
  color: var(--mv-heading);
  background-color: var(--mv-tonal);
  border: 1px solid transparent;
  border-radius: var(--mv-radius-pill);
}

.mv-header-search input::placeholder {
  color: var(--mv-color-muted);
}

.mv-header-search input:focus {
  border-color: var(--mv-color-primary);
}

.mv-header-search button {
  position: absolute;
  top: 5px;
  right: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 13px;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border-radius: 50%;
}

/* MINIMAL -- wordmark, the booking button and a menu button */
.mv-header.is-minimal .mv-nav {
  display: none;
}

.mv-header.is-minimal .mv-nav-toggler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* BOXED -- the bar floats in a rounded container clear of the page edge */
.mv-header.is-boxed {
  position: absolute;
  top: auto;
  left: 0;
  right: 0;
  background-color: transparent;
  border-bottom: none;
  padding-top: 18px;
}

.mv-header.is-boxed .mv-header-main {
  height: 78px;
  padding: 0 14px 0 28px;
  background-color: var(--mv-glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-radius: var(--mv-radius-pill);
  box-shadow: var(--mv-shadow);
}

.mv-header.is-boxed .mv-nav > ul > li > a {
  padding-top: 27px;
  padding-bottom: 27px;
}

.mv-header.is-boxed.is-stuck {
  position: fixed;
  top: 0;
  padding-top: 10px;
  box-shadow: none;
  animation: mv-drop 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/*======================
30. Footer Variants
========================*/
/* CTA BAND -- a call to action straddling the footer's top edge. flow-root on
   the footer keeps the negative margin from collapsing out of it. */
.mv-footer.has-cta {
  margin-top: 90px;
}

.mv-footer-cta {
  position: relative;
  z-index: 2;
  overflow: hidden;
  margin-top: -90px;
  padding: 50px 56px;
  color: rgba(var(--mv-color-ink-rgb), 0.72);
  background-color: var(--mv-color-primary);
  border-radius: var(--mv-radius-lg);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 36px;
  align-items: center;
}

.mv-footer-cta .mv-gl {
  mix-blend-mode: soft-light;
}

.mv-footer-cta-copy,
.mv-footer-cta-actions {
  position: relative;
  z-index: 1;
}

.mv-footer-cta h2 {
  margin-bottom: 8px;
  font-size: clamp(26px, 2.4vw, 38px);
  color: #101418;
}

.mv-footer-cta p {
  font-size: 16px;
  color: rgba(16, 20, 24, 0.72);
}

.mv-footer-cta-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mv-footer-cta .mv-btn {
  color: var(--mv-color-white);
  background-color: #101418;
  border-color: #101418;
}

.mv-footer-cta .mv-btn.is-ghost-light {
  color: #101418;
  background-color: rgba(255, 255, 255, 0.4);
  border-color: transparent;
}

.mv-footer.has-cta .mv-footer-top {
  padding-top: 80px;
}

/* LIGHT -- the same columns on the page's own paper */
.mv-footer.is-light {
  --mv-heading: inherit;
  --mv-color-body: inherit;
  --mv-color-muted: inherit;
  --mv-color-line: inherit;
  --mv-tonal: inherit;
  --mv-tonal-2: inherit;
  background-color: var(--mv-color-paper);
}

.mv-footer.is-light .mv-footer-action .go,
.mv-footer.is-light .mv-footer-links a:hover,
.mv-footer.is-light .mv-footer-legal a:hover {
  color: var(--mv-color-primary-deep);
}

/* the language button follows the light ground */
.mv-footer.is-light .mv-lang .lang-btn {
  color: var(--mv-heading);
  background: var(--mv-tonal);
}

.mv-footer.is-light .mv-lang .lang-btn:hover,
.mv-footer.is-light .mv-lang .lang-btn[aria-expanded="true"] {
  background: var(--mv-tonal-2);
}

.mv-footer.is-light .mv-hours li.is-today span,
.mv-footer.is-light .mv-hours li.is-today b,
.mv-footer.is-light .mv-footer-contact i {
  color: var(--mv-color-primary-deep);
}

/* MINIMAL -- the wordmark, one line of links and the socials */
.mv-footer-minimal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 56px 0;
}

.mv-footer-minimal .mv-footer-logo {
  margin: 0;
}

.mv-footer-inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 30px;
}

.mv-footer-inline a {
  font-size: 15px;
  font-weight: 500;
  color: var(--mv-heading);
}

.mv-footer-inline a:hover {
  color: var(--mv-color-primary);
}

/*======================
31. Trim Tabs
========================*/
.mv-trim-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin-bottom: 46px;
}

.mv-trim-nav button {
  padding: 13px 30px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--mv-color-body);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-pill);
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.mv-trim-nav button:hover {
  color: var(--mv-heading);
  border-color: var(--mv-color-ink);
}

.mv-trim-nav button.is-active {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border-color: var(--mv-color-primary);
}

.mv-trim-panel {
  display: none;
}

.mv-trim-panel.is-on {
  display: block;
}

.mv-trim {
  height: 100%;
  padding: 28px 30px 30px;
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
  transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
}

.mv-trim:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: var(--mv-shadow-lg);
}

.mv-trim-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.mv-trim-head h3 {
  font-size: 24px;
}

.mv-trim-year {
  padding: 5px 18px 5px 13px;
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 1.4px;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  clip-path: var(--mv-shear-sm);
  flex: none;
}

.mv-trim-media {
  overflow: hidden;
  border-radius: var(--mv-radius);
  aspect-ratio: 16 / 10;
  margin-bottom: 20px;
}

.mv-trim-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform-origin: center top;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-trim:hover .mv-trim-media img {
  transform: scale(1.06);
}

/* The spec table is the point of this card, so it gets real rules */
.mv-trim-specs {
  list-style: none;
  margin-bottom: 22px;
}

.mv-trim-specs li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  font-size: 14px;
  color: var(--mv-color-muted);
  border-bottom: 1px solid var(--mv-color-line-2);
}

.mv-trim-specs li:first-child {
  border-top: 1px solid var(--mv-color-line-2);
}

.mv-trim-specs strong {
  font-weight: 600;
  color: var(--mv-heading);
}

.mv-trim-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.mv-trim-price {
  font-family: var(--mv-ff-display);
  font-size: 26px;
  letter-spacing: 0.6px;
  color: var(--mv-heading);
}

.mv-trim-price small {
  display: block;
  font-family: var(--mv-ff-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--mv-color-muted);
}

/*======================
32. Video Band
========================*/
.mv-video {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: center;
  background-color: var(--mv-color-ink);
}

.mv-video-bg {
  position: absolute;
  top: -14%;
  right: 0;
  bottom: -14%;
  left: 0;
}

.mv-video-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mv-video-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(100deg, rgba(10, 13, 16, 0.96) 4%, rgba(10, 13, 16, 0.82) 52%, rgba(10, 13, 16, 0.68) 100%);
}

.mv-video-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding: 90px 0;
}

.mv-video-inner h2 {
  color: var(--mv-color-white);
  margin-bottom: 18px;
  text-wrap: balance;
}

.mv-video-inner h2 em {
  font-style: normal;
  color: var(--mv-color-primary);
}

.mv-video-inner p {
  font-size: var(--mv-fs-lead);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.66);
  margin-bottom: 32px;
}

.mv-video-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

/* Play button with a slow halo, paused for reduced motion */
.mv-video-play {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  font-size: 19px;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border-radius: 50%;
  flex: none;
}

.mv-video-play::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(var(--mv-color-primary-rgb), 0.45);
  border-radius: 50%;
  animation: mvHalo 2.6s ease-out infinite;
}

@keyframes mvHalo {
  0% {
    transform: scale(0.86);
    opacity: 1;
  }

  100% {
    transform: scale(1.22);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mv-video-play::before {
    animation: none;
  }
}

.mv-video-play:hover {
  color: var(--mv-color-primary);
  background-color: var(--mv-color-ink);
}

.mv-video-call b {
  display: block;
  font-family: var(--mv-ff-display);
  font-size: 24px;
  letter-spacing: 0.8px;
  color: var(--mv-color-white);
}

.mv-video-call span {
  font-size: var(--mv-fs-micro);
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/*======================
33. Category Cards
========================*/
.mv-cat {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 330px;
  border-radius: var(--mv-radius-lg);
  background-color: var(--mv-color-ink);
}

.mv-cat.is-tall {
  min-height: 690px;
}

.mv-cat > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-cat:hover > img {
  transform: scale(1.07);
}

.mv-cat::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, rgba(10, 13, 16, 0.95) 0%, rgba(10, 13, 16, 0.78) 30%, rgba(10, 13, 16, 0.3) 60%, transparent 84%);
}

/* the short cards carry their copy higher up the photograph: the shade climbs with it */
.mv-cat:not(.is-tall)::after {
  background-image: linear-gradient(to top, rgba(10, 13, 16, 0.96) 0%, rgba(10, 13, 16, 0.84) 42%, rgba(10, 13, 16, 0.45) 70%, rgba(10, 13, 16, 0.1) 100%);
}

.mv-cat-inner {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 32px 32px 28px;
}

.mv-cat-inner > span:first-child {
  display: block;
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mv-color-primary);
}

.mv-cat-inner h3 {
  margin: 7px 0 10px;
  font-size: clamp(22px, 2vw, 30px);
  color: var(--mv-color-white);
}

.mv-cat-inner p {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 16px;
  max-width: 400px;
}

.mv-cat-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 14px;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border-radius: 50%;
  transition: transform 0.35s ease;
}

.mv-cat:hover .mv-cat-go {
  transform: translateX(6px);
}

/*======================
34. Centred Hero
========================*/
/* Home 03 (Prestige) runs the same slider with the copy down the middle, studio
   light gliding over the whole frame and a zoom-out as the page leaves it. */
.mv-hero.is-centered .mv-hero-inner {
  max-width: 940px;
  margin: 0 auto;
  text-align: center;
}

.mv-hero.is-centered .mv-hero-eyebrow {
  justify-content: center;
}

.mv-hero.is-centered .mv-hero-eyebrow::after {
  content: "";
  width: 34px;
  height: 9px;
  background-image: repeating-linear-gradient(90deg, var(--mv-color-primary) 0 3px, transparent 3px 7px);
}

.mv-hero.is-centered .mv-hero-slide p {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.mv-hero.is-centered .mv-hero-actions,
.mv-hero.is-centered .mv-hero-rail {
  justify-content: center;
}

.mv-hero.is-centered .mv-hero-bg::after {
  background-image: radial-gradient(70% 80% at 50% 45%, rgba(7, 9, 12, 0.55) 0%, rgba(7, 9, 12, 0.88) 100%), linear-gradient(180deg, rgba(7, 9, 12, 0.6) 0%, transparent 30%, rgba(7, 9, 12, 0.8) 100%);
}

.mv-hero.is-centered > .mv-gl {
  -webkit-mask-image: none;
  mask-image: none;
  mix-blend-mode: screen;
}

.mv-hero.is-centered .mv-hero-chrome-inner {
  justify-content: center;
}

/* zoom-out: --zo runs 0 -> 1 as the hero scrolls away (main.js 41) */
.mv-hero[data-zoomout] .mv-hero-bg {
  top: 0;
  bottom: 0;
  transform: scale(calc(1.16 - 0.16 * var(--zo, 0)));
  transform-origin: 50% 40%;
}

.mv-hero[data-zoomout] .mv-hero-inner {
  transform: translate3d(0, calc(var(--zo, 0) * -110px), 0);
  opacity: calc(1 - var(--zo, 0) * 1.2);
}

/*======================
35. Category Grid
========================*/
.mv-cat-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 26px;
}

.mv-cat-stack {
  display: grid;
  gap: 26px;
  align-content: start;
}

.mv-cat-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

.mv-cat.is-tall {
  min-height: 686px;
}

/*======================
36. Inline Hero
========================*/
/* Home 04 puts the lookup straight into the banner rather than under it */
.mv-inline-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: #07090C;
}

/* the background is a slider of its own; the copy and the lookup stay put */
.mv-inline-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.mv-inline-slider .swiper-slide {
  overflow: hidden;
}

/* studio light gliding over the bodywork: added as light, so it lifts the
   paint instead of drawing over the car */
.mv-inline-hero > .mv-gl {
  z-index: 1;
  mix-blend-mode: screen;
}

.mv-inline-hero > .container {
  position: relative;
  z-index: 2;
}

.mv-inline-hero .ln {
  display: block;
  white-space: nowrap;
}

.mv-inline-chrome {
  position: absolute;
  right: max(24px, calc((100% - 1320px) / 2 + 12px));
  top: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
}

.mv-inline-hero .mv-ghost {
  left: 74%;
  top: 76%;
  color: rgba(255, 255, 255, 0.035);
}

.mv-inline-hero-bg {
  position: absolute;
  inset: 0;
}

.mv-inline-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mv-inline-hero-bg img {
  transform: scale(1.1);
  transition: transform 7s linear;
}

.swiper-slide-active .mv-inline-hero-bg img {
  transform: scale(1);
}

.mv-inline-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(7, 9, 12, 0.92) 0%, rgba(7, 9, 12, 0.7) 50%, rgba(7, 9, 12, 0.35) 100%), linear-gradient(180deg, rgba(7, 9, 12, 0.5) 0%, transparent 30%, rgba(7, 9, 12, 0.9) 100%);
}

.mv-inline-hero-inner {
  position: relative;
  z-index: 2;
  padding: 176px 0 104px;
}

/* the copy and the lookup keep their measure; the headline's set lines take
   the width they need, so a mirrored page never pushes one off the edge */
.mv-inline-hero-inner > :not(h1) {
  max-width: 820px;
}

.mv-inline-hero-inner h1 {
  color: var(--mv-color-white);
  margin-bottom: 20px;
}

.mv-inline-hero-inner h1 em {
  font-style: normal;
  color: var(--mv-color-primary);
}

.mv-inline-hero-inner > p {
  max-width: 560px;
  font-size: var(--mv-fs-lead);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 38px;
}

/* The search row sits on the dark ground, no card behind it */
.mv-inline-search {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 176px;
  gap: 14px;
  align-items: end;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.mv-inline-search .mv-field label {
  color: rgba(255, 255, 255, 0.5);
}

.mv-inline-search .mv-field select,
.mv-inline-search .mv-field input {
  color: var(--mv-color-white);
  background-color: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}

.mv-inline-search .mv-field select option {
  color: var(--mv-heading);
}

.mv-inline-search .mv-field-control > i,
.mv-inline-search .mv-field-control .caret {
  color: var(--mv-color-primary);
}

.mv-inline-search .mv-field select:focus,
.mv-inline-search .mv-field input:focus {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: var(--mv-color-primary);
}

.mv-inline-hero .mv-search-foot {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.mv-inline-hero .mv-search-result {
  color: rgba(255, 255, 255, 0.66);
}

.mv-inline-hero .mv-search-result b {
  color: var(--mv-color-primary);
}

.mv-inline-hero .mv-search-reset {
  color: rgba(255, 255, 255, 0.5);
}

.mv-inline-hero .mv-search-reset:hover {
  color: var(--mv-color-white);
}

/*======================
37. Showroom Configurator
========================*/
/* A showroom, not a form: the car on a light studio stage (the white-ground
   studio photographs sink into it through multiply), its figures along the
   floor, and a graphite control panel with the versions, the price and the
   payment. Block 27 swaps the version; block 26 recomputes the payment. */
.mv-showroom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  overflow: hidden;
  background-color: var(--mv-color-surface);
  border-radius: 26px;
  box-shadow: var(--mv-shadow-lg);
}

.mv-showroom-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 44px 48px 0;
  background-color: #F1F2F4;
  background-image: radial-gradient(70% 62% at 52% 52%, #FFFFFF 0%, rgba(255, 255, 255, 0.82) 38%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, #ECEEF1 0%, #F5F6F7 62%, #E3E6EA 100%);
}

/* the studio stays a studio in the dark theme: the photographs are shot on white */
[data-theme="dark"] .mv-showroom-stage {
  background-color: #DADDE2;
  background-image: radial-gradient(70% 62% at 52% 52%, #F4F5F7 0%, rgba(244, 245, 247, 0.8) 38%, rgba(244, 245, 247, 0) 72%),
    linear-gradient(180deg, #D3D7DC 0%, #E2E5E8 62%, #CDD1D7 100%);
}

.mv-showroom-tag {
  display: block;
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #987C3B;
}

.mv-showroom-name {
  margin: 8px 0 0;
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch-wide);
  font-size: clamp(34px, 3.3vw, 54px);
  font-weight: 700;
  line-height: 1.02;
  color: #101418;
}

.mv-showroom-blurb {
  max-width: 460px;
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: #5B6470;
}

.mv-showroom-car {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 340px;
  margin: 0 -20px;
}

.mv-showroom-car img {
  position: relative;
  display: block;
  width: 100%;
  max-width: 940px;
  max-height: 470px;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-showroom-car.is-swapping img {
  opacity: 0;
  transform: translateX(-26px);
}

.mv-showroom-specs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 18px -48px 0;
  list-style: none;
  background-color: rgba(255, 255, 255, 0.72);
  border-top: 1px solid rgba(16, 20, 24, 0.08);
  backdrop-filter: blur(8px);
}

.mv-showroom-specs li {
  padding: 20px 14px 22px;
  text-align: center;
}

.mv-showroom-specs li + li {
  border-left: 1px solid rgba(16, 20, 24, 0.08);
}

.mv-showroom-specs i {
  display: block;
  margin-bottom: 8px;
  font-size: 20px;
  color: #987C3B;
}

.mv-showroom-specs span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #7D8692;
}

.mv-showroom-specs b {
  display: block;
  margin-top: 4px;
  font-family: var(--mv-ff-display);
  font-size: 17px;
  font-weight: 600;
  color: #101418;
}

/* the control panel: graphite in both themes */
.mv-showroom-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px 36px 36px;
  background-color: #101418;
  background-image: radial-gradient(90% 60% at 100% 0%, rgba(var(--mv-color-primary-rgb), 0.16), transparent 70%);
}

.mv-showroom-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.mv-showroom-label b {
  font-weight: 600;
  color: var(--mv-color-primary);
}

.mv-showroom-versions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mv-showroom-versions button {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  width: 100%;
  padding: 14px 18px 14px 20px;
  text-align: left;
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.mv-showroom-versions button::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background-color: var(--mv-color-primary);
  border-radius: 0 3px 3px 0;
  transform: scaleY(0);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-showroom-versions button:hover {
  background-color: rgba(255, 255, 255, 0.07);
}

.mv-showroom-versions button.is-active {
  background-color: rgba(255, 255, 255, 0.09);
  border-color: rgba(var(--mv-color-primary-rgb), 0.55);
}

.mv-showroom-versions button.is-active::before {
  transform: scaleY(1);
}

.mv-showroom-versions .v-name {
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
}

.mv-showroom-versions .v-meta {
  grid-column: 1;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
}

.mv-showroom-versions .v-price {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-family: var(--mv-ff-display);
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}

.mv-showroom-versions button.is-active .v-price {
  color: var(--mv-color-primary);
}

.mv-showroom-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mv-showroom-price > span {
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.mv-showroom-price strong {
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch-wide);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
}

.mv-showroom-price strong i {
  margin-right: 3px;
  font-size: 0.55em;
  font-style: normal;
  vertical-align: 0.6em;
  color: var(--mv-color-primary);
}

.mv-showroom-side .mv-field {
  margin: 0;
}

.mv-showroom-side .mv-field label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.mv-showroom-side .mv-field label span {
  font-family: var(--mv-ff-display);
  font-size: 14px;
  letter-spacing: 0.4px;
  text-transform: none;
  color: #FFFFFF;
}

.mv-showroom-pay {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border-radius: 14px;
}

.mv-showroom-pay > div {
  padding: 16px 18px;
  background-color: rgba(255, 255, 255, 0.05);
}

.mv-showroom-pay > div.is-key {
  background-color: var(--mv-color-primary);
}

.mv-showroom-pay span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  white-space: nowrap;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.mv-showroom-pay .is-key span {
  color: rgba(16, 20, 24, 0.72);
}

.mv-showroom-pay b {
  display: block;
  margin-top: 4px;
  font-family: var(--mv-ff-display);
  font-size: 24px;
  font-weight: 700;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}

.mv-showroom-pay .is-key b {
  color: #101418;
}

.mv-showroom-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: auto;
}

.mv-showroom-actions .mv-btn {
  justify-content: center;
  padding-inline: 18px;
  white-space: nowrap;
}

/*======================
38. Spec Table
========================*/
.mv-spec-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
  overflow: hidden;
}

.mv-spec-table th,
.mv-spec-table td {
  padding: 18px 24px;
  font-size: 15px;
  text-align: left;
  border-bottom: 1px solid var(--mv-color-line-2);
}

.mv-spec-table thead th {
  font-family: var(--mv-ff-display);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.6px;
  color: var(--mv-heading);
  background-color: var(--mv-color-paper);
  border-bottom: 1px solid var(--mv-color-line);
}

.mv-spec-table thead th:first-child {
  font-family: var(--mv-ff-body);
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--mv-color-muted);
}

.mv-spec-table tbody th {
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mv-color-muted);
  width: 210px;
}

.mv-spec-table td {
  font-weight: 600;
  color: var(--mv-heading);
}

.mv-spec-table tbody tr:last-child th,
.mv-spec-table tbody tr:last-child td {
  border-bottom: none;
}

.mv-spec-table tbody tr:hover td,
.mv-spec-table tbody tr:hover th {
  background-color: var(--mv-color-primary-soft);
}

.mv-spec-table .is-best {
  color: var(--mv-color-primary-deep);
}

/*======================
39. Tool Tiles
========================*/
.mv-tool {
  position: relative;
  height: 100%;
  padding: 38px 34px 34px;
  overflow: hidden;
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.mv-tool:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: var(--mv-shadow-lg);
}

.mv-tool > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 22px;
  font-size: 23px;
  color: var(--mv-color-primary);
  background-color: var(--mv-color-ink);
  border-radius: var(--mv-radius);
  transition: color 0.4s ease, background-color 0.4s ease;
}

.mv-tool:hover > i {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
}

.mv-tool h3 {
  font-size: 21px;
  margin-bottom: 11px;
}

.mv-tool p {
  font-size: 14.5px;
  line-height: 1.68;
  margin-bottom: 18px;
}

/* A watermark numeral fills the corner instead of leaving it empty */
.mv-tool-num {
  position: absolute;
  right: 24px;
  bottom: 18px;
  font-family: var(--mv-ff-display);
  font-size: 62px;
  line-height: 1;
  letter-spacing: 2px;
  color: var(--mv-color-line-2);
  pointer-events: none;
  transition: color 0.4s ease;
}

.mv-tool:hover .mv-tool-num {
  color: var(--mv-color-primary-soft);
}

/*======================
40. Compact Banner
========================*/
/* Home 05 keeps its lookup in the masthead, so the banner itself stays short */
.mv-compact-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--mv-color-ink);
}

.mv-compact-hero-bg {
  position: absolute;
  top: -12%;
  right: 0;
  bottom: -12%;
  left: 0;
}

.mv-compact-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mv-compact-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(95deg, rgba(10, 13, 16, 0.95) 8%, rgba(10, 13, 16, 0.74) 56%, rgba(10, 13, 16, 0.5) 100%);
}

.mv-compact-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 104px 0;
}

.mv-compact-hero h1 {
  color: var(--mv-color-white);
  margin-bottom: 18px;
}

.mv-compact-hero h1 em {
  font-style: normal;
  color: var(--mv-color-primary);
}

.mv-compact-hero p {
  font-size: var(--mv-fs-lead);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.68);
  margin-bottom: 32px;
}

/*======================
41. Listing Rows
========================*/
.mv-listrow {
  display: grid;
  grid-template-columns: 280px 1fr 224px;
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.mv-listrow:hover {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow: var(--mv-shadow-lg);
}

.mv-listrow-media {
  position: relative;
  overflow: hidden;
  min-height: 210px;
}

.mv-listrow-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-listrow:hover .mv-listrow-media img {
  transform: scale(1.07);
}

.mv-listrow-tag {
  position: absolute;
  top: 14px;
  left: 0;
  padding: 5px 18px 5px 13px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  clip-path: var(--mv-shear-sm);
}

.mv-listrow-body {
  padding: 26px 30px;
}

.mv-listrow-body h3 {
  font-size: 23px;
  margin-bottom: 10px;
}

.mv-listrow-body > p:not(.mv-car-meta) {
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 16px;
}

.mv-listrow-specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  padding-top: 15px;
  border-top: 1px solid var(--mv-color-line-2);
}

.mv-listrow-specs li {
  font-size: 13px;
  color: var(--mv-color-muted);
}

.mv-listrow-specs i {
  margin-right: 7px;
  color: var(--mv-color-primary-deep);
  font-size: 15px;
}

.mv-listrow-specs b {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mv-heading);
}

/* The price rail closes the row so the eye lands somewhere definite */
.mv-listrow-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: 26px 28px;
  background-color: var(--mv-color-paper);
  border-left: 1px solid var(--mv-color-line);
}

.mv-listrow-price {
  font-family: var(--mv-ff-display);
  font-size: 30px;
  letter-spacing: 0.8px;
  line-height: 1.1;
  color: var(--mv-heading);
}

.mv-listrow-price small {
  display: block;
  margin-top: 3px;
  font-family: var(--mv-ff-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--mv-color-muted);
}

/*======================
42. Brand Leaderboard
========================*/
.mv-rank {
  list-style: none;
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
  overflow: hidden;
  background-color: var(--mv-color-surface);
}

.mv-rank li + li {
  border-top: 1px solid var(--mv-color-line);
}

.mv-rank a {
  display: grid;
  grid-template-columns: 62px 56px 1fr 180px 90px;
  align-items: center;
  gap: 20px;
  padding: 18px 26px;
  transition: background-color 0.3s ease;
}

.mv-rank a:hover {
  background-color: var(--mv-color-primary-soft);
}

.mv-rank .pos {
  font-family: var(--mv-ff-display);
  font-size: 26px;
  letter-spacing: 1px;
  color: var(--mv-color-line);
  transition: color 0.3s ease;
}

.mv-rank a:hover .pos {
  color: var(--mv-color-primary-deep);
}

.mv-rank img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.mv-rank a:hover img {
  filter: none;
  opacity: 1;
}

.mv-rank .name {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--mv-heading);
}

.mv-rank .name em {
  display: block;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  color: var(--mv-color-muted);
}

/* Share bar -- width set inline by nothing; each row carries its own modifier */
.mv-rank .bar {
  height: 8px;
  background-color: var(--mv-color-line-2);
  border-radius: var(--mv-radius-pill);
  overflow: hidden;
}

.mv-rank .bar i {
  display: block;
  height: 100%;
  background-color: var(--mv-color-primary);
  border-radius: var(--mv-radius-pill);
}

.mv-rank .bar.w-96 i {
  width: 96%;
}

.mv-rank .bar.w-84 i {
  width: 84%;
}

.mv-rank .bar.w-72 i {
  width: 72%;
}

.mv-rank .bar.w-58 i {
  width: 58%;
}

.mv-rank .bar.w-44 i {
  width: 44%;
}

.mv-rank .bar.w-30 i {
  width: 30%;
}

.mv-rank .count {
  font-family: var(--mv-ff-display);
  font-size: 21px;
  letter-spacing: 0.6px;
  text-align: right;
  color: var(--mv-heading);
}

/*======================
43. Favourite Brand
========================*/
.mv-fav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}

.mv-fav-media {
  position: relative;
  border-radius: var(--mv-radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.mv-fav-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-fav-media:hover img {
  transform: scale(1.05);
}

.mv-fav-badge {
  position: absolute;
  left: 0;
  top: 28px;
  z-index: 2;
  padding: 9px 26px 9px 20px;
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  clip-path: var(--mv-shear);
}

.mv-fav-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 28px 0 32px;
  border-top: 1px solid var(--mv-color-line);
  border-bottom: 1px solid var(--mv-color-line);
}

.mv-fav-stats li {
  padding: 22px 16px 22px 0;
}

.mv-fav-stats li + li {
  padding-left: 24px;
  border-left: 1px solid var(--mv-color-line);
}

.mv-fav-stats b {
  display: block;
  font-family: var(--mv-ff-display);
  font-size: 32px;
  letter-spacing: 1px;
  line-height: 1.1;
  color: var(--mv-heading);
}

.mv-fav-stats span {
  display: block;
  margin-top: 4px;
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--mv-color-muted);
}

/*======================
44. Editorial Hero
========================*/
/* Home 06 runs one marque at a time, full bleed, with the type doing the work */
.mv-edit-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--mv-color-ink);
}

.mv-edit-slide {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 840px;
  overflow: hidden;
}

.mv-edit-bg {
  position: absolute;
  /* Inset past the frame so the parallax drift never exposes an edge */
  top: -14%;
  right: 0;
  bottom: -14%;
  left: 0;
}

.mv-edit-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.1);
  transition: transform 8s linear;
}

.swiper-slide-active .mv-edit-bg img {
  transform: scale(1);
}

.mv-edit-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, rgba(10, 13, 16, 0.96) 4%, rgba(10, 13, 16, 0.68) 48%, rgba(10, 13, 16, 0.76) 100%);
}

.mv-edit-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 104px;
}

.mv-staged .mv-edit-inner {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.mv-staged .swiper-slide-active .mv-edit-inner {
  opacity: 1;
  transition: opacity 0.6s ease 0.4s;
}

.mv-edit-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--mv-color-primary);
}

.mv-edit-kicker::before {
  content: "";
  width: 40px;
  height: 10px;
  background-image: repeating-linear-gradient(90deg, var(--mv-color-primary) 0 3px, transparent 3px 8px);
}

.mv-edit-inner h1,
.mv-edit-inner h2 {
  max-width: 900px;
  font-size: clamp(40px, 5.4vw, 82px);
  color: var(--mv-color-white);
  margin-bottom: 26px;
}

.mv-edit-inner h1 em,
.mv-edit-inner h2 em {
  font-style: normal;
  color: var(--mv-color-primary);
}

.mv-edit-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.mv-edit-foot p {
  max-width: 460px;
  font-size: var(--mv-fs-lead);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

.mv-edit-rail {
  display: flex;
  list-style: none;
}

.mv-edit-rail li {
  padding-right: 34px;
}

.mv-edit-rail li + li {
  padding-left: 34px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.mv-edit-rail b {
  display: block;
  font-family: var(--mv-ff-display);
  font-size: 30px;
  letter-spacing: 1px;
  line-height: 1.1;
  color: var(--mv-color-white);
}

.mv-edit-rail span {
  display: block;
  margin-top: 3px;
  font-size: var(--mv-fs-micro);
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.mv-edit-nav {
  position: absolute;
  right: calc((100vw - 1290px) / 2);
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mv-edit-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  font-size: 15px;
  color: var(--mv-color-white);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.mv-edit-nav button:hover {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border-color: var(--mv-color-primary);
}

/*======================
45. Dealer Finder
========================*/
.mv-finder {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 60px;
  align-items: center;
  padding: 46px 52px;
  background-color: var(--mv-color-ink);
  border-radius: var(--mv-radius-lg);
  margin-bottom: 56px;
}

.mv-finder h2,
.mv-finder h3 {
  font-size: clamp(24px, 2.2vw, 32px);
  color: var(--mv-color-white);
  margin-bottom: 8px;
}

.mv-finder p {
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.6);
}

.mv-finder-form {
  position: relative;
}

.mv-finder-form label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.mv-finder-form input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 150px 0 20px;
  font-size: 15px;
  color: var(--mv-color-white);
  background-color: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--mv-radius-pill);
}

.mv-finder-form input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.mv-finder-form input:focus {
  border-color: var(--mv-color-primary);
}

.mv-finder-form button {
  position: absolute;
  right: 5px;
  bottom: 5px;
  height: 46px;
  padding: 0 26px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border-radius: var(--mv-radius-pill);
  transition: background-color 0.3s ease;
}

.mv-finder-form button:hover {
  background-color: var(--mv-color-surface);
}

/*======================
46. Boxed Hero
========================*/
/* Home 07 floats its masthead, so the banner is inset and rounded to match.
   The copy slides; the instant offer stays fixed over the right side. */
.mv-boxed-hero {
  padding-top: 120px;
}

.mv-boxed-hero-inner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 720px;
  border-radius: 30px;
  background-color: #07090C;
}

.mv-boxed-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.mv-boxed-slide {
  position: relative;
  height: 100%;
}

.mv-boxed-hero-bg {
  position: absolute;
  inset: 0;
}

.mv-boxed-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.1);
  transition: transform 7s linear;
}

.swiper-slide-active .mv-boxed-hero-bg img {
  transform: scale(1);
}

.mv-boxed-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(100deg, rgba(7, 9, 12, 0.95) 10%, rgba(7, 9, 12, 0.72) 55%, rgba(7, 9, 12, 0.5) 100%);
}

.mv-boxed-hero-inner > .mv-gl {
  z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 30%, #000 55%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 30%, #000 55%);
}

.mv-boxed-copy {
  position: relative;
  z-index: 2;
  max-width: 600px;
  padding: 110px 0 150px 64px;
}

.mv-boxed-copy h1,
.mv-boxed-copy h2 {
  margin-bottom: 22px;
  font-size: clamp(38px, 4vw, 64px);
  line-height: 1.05;
  color: var(--mv-color-white);
}

.mv-boxed-copy .ln {
  display: block;
  white-space: nowrap;
}

.mv-boxed-copy h1 em,
.mv-boxed-copy h2 em {
  font-style: normal;
  color: var(--mv-color-primary);
}

.mv-boxed-copy > p {
  max-width: 500px;
  margin-bottom: 40px;
  font-size: var(--mv-fs-lead);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

.mv-boxed-chrome {
  position: absolute;
  left: 64px;
  bottom: 56px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* the instant offer */
.mv-offer {
  --mv-heading: #101418;
  --mv-color-body: #5B6470;
  --mv-color-muted: #7D8692;
  --mv-color-line: #E4E7E3;
  --mv-color-surface: #FFFFFF;
  --mv-color-paper: #F4F5F3;
  --mv-tonal: rgba(16, 20, 24, 0.055);
  --mv-tonal-2: rgba(16, 20, 24, 0.1);
  --mv-color-primary-deep: #987C3B;
  position: absolute;
  top: 50%;
  right: 56px;
  z-index: 4;
  width: 440px;
  padding: 32px;
  background-color: #FFFFFF;
  border-radius: 26px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
  transform: translateY(-50%);
}

[data-theme="dark"] .mv-offer {
  --mv-heading: #F2F4F6;
  --mv-color-body: #A2ABB6;
  --mv-color-muted: #7F8994;
  --mv-color-line: #262D35;
  --mv-color-surface: #181D24;
  --mv-color-paper: #13171C;
  --mv-tonal: rgba(255, 255, 255, 0.07);
  --mv-tonal-2: rgba(255, 255, 255, 0.12);
  --mv-color-primary-deep: #D3B779;
  background-color: #181D24;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8), inset 0 0 0 1px #262D35;
}

.mv-offer-head {
  margin-bottom: 22px;
}

.mv-offer-head h2 {
  margin-bottom: 4px;
  font-size: 28px;
}

.mv-offer-head p {
  font-size: 14.5px;
  color: var(--mv-color-body);
}

.mv-offer .mv-seg-field {
  margin: 0;
}

.mv-offer .mv-field select {
  padding-left: 52px;
  padding-right: 30px;
  font-size: 14.5px;
}

.mv-offer .mv-field-control .caret {
  right: 14px;
}

.mv-offer .mv-seg-field legend {
  display: block;
  float: none;
  width: 100%;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mv-color-muted);
}

.mv-offer .mv-val-out {
  display: none;
  margin-top: 18px;
}

.mv-offer .mv-rows li.is-offer b {
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch);
  font-size: 20px;
  color: var(--mv-color-primary-deep);
}

.mv-offer .mv-val-error {
  display: none;
  margin-top: 14px;
  font-size: 13.5px;
  color: #9F7852;
}

.mv-offer .mv-btn {
  margin-top: 20px;
}

.mv-offer .mv-sell-note {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  text-align: center;
  color: var(--mv-color-muted);
}

/*======================
47. Design Hotspots
========================*/
/* Tabbed copy on one side, a car with
   numbered pointers on the other. */
.mv-design {
  position: relative;
  overflow: hidden;
  background-color: var(--mv-color-ink);
}

.mv-design-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 70px;
  align-items: center;
}

.mv-design-copy h2 {
  color: var(--mv-color-white);
  margin-bottom: 26px;
}

.mv-design-copy h2 em {
  font-style: normal;
  color: var(--mv-color-primary);
}

.mv-design-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin-bottom: 26px;
}

.mv-design-nav button {
  padding: 11px 24px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--mv-radius-pill);
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.mv-design-nav button:hover {
  color: var(--mv-color-white);
  border-color: rgba(255, 255, 255, 0.4);
}

.mv-design-nav button.is-active {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border-color: var(--mv-color-primary);
}

.mv-design-panel {
  display: none;
}

.mv-design-panel.is-on {
  display: block;
}

.mv-design-panel p {
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.64);
  margin-bottom: 22px;
  min-height: 84px;
}

/* The car and its pointers */
.mv-design-car {
  position: relative;
}

.mv-design-car > img {
  width: 100%;
  border-radius: var(--mv-radius-lg);
}

.mv-hot {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  font-family: var(--mv-ff-display);
  font-size: 15px;
  letter-spacing: 0.4px;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(var(--mv-color-primary-rgb), 0.22);
  transition: transform 0.3s ease;
}

.mv-hot:hover,
.mv-hot:focus-visible {
  transform: scale(1.12);
}

/* Positions are modifier classes -- no inline styles anywhere in this template */
.mv-hot.at-1 {
  top: 26%;
  left: 17%;
}

.mv-hot.at-2 {
  top: 54%;
  left: 36%;
}

.mv-hot.at-3 {
  top: 31%;
  left: 62%;
}

.mv-hot.at-4 {
  top: 66%;
  left: 79%;
}

.mv-hot-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  transform: translateX(-50%);
  width: 176px;
  padding: 10px 14px;
  font-family: var(--mv-ff-body);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  color: var(--mv-color-white);
  background-color: var(--mv-color-ink-deep);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--mv-radius);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, bottom 0.3s ease;
  pointer-events: none;
}

.mv-hot:hover .mv-hot-label,
.mv-hot:focus-visible .mv-hot-label {
  opacity: 1;
  visibility: visible;
  bottom: calc(100% + 8px);
}

.mv-hot-label b {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mv-color-primary);
}

/*======================
48. Video Modal
========================*/
.mv-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background-color: rgba(10, 13, 16, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.mv-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.mv-modal-inner {
  position: relative;
  width: min(1000px, 100%);
}

.mv-modal-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background-color: var(--mv-color-ink-deep);
  border-radius: var(--mv-radius-lg);
}

.mv-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.mv-modal-close {
  position: absolute;
  top: -58px;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border-radius: var(--mv-radius-pill);
}

.mv-modal-close:hover {
  color: var(--mv-color-primary);
  background-color: var(--mv-color-surface);
}

.mv-modal-cap {
  margin-top: 18px;
  text-align: center;
}

.mv-modal-cap b {
  display: block;
  font-family: var(--mv-ff-display);
  font-size: 21px;
  letter-spacing: 0.6px;
  color: var(--mv-color-white);
}

.mv-modal-cap span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

/*======================
49. Subheader
========================*/
/* the trails stream out of the right of every inner-page banner */
.mv-subheader > .mv-gl {
  z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.3) 35%, #000 70%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.3) 35%, #000 70%);
}

.mv-subheader {
  position: relative;
  overflow: hidden;
  background-color: var(--mv-color-ink);
}

.mv-subheader-bg {
  position: absolute;
  top: -14%;
  right: 0;
  bottom: -14%;
  left: 0;
}

.mv-subheader-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mv-subheader-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(95deg, rgba(10, 13, 16, 0.95) 6%, rgba(10, 13, 16, 0.8) 54%, rgba(10, 13, 16, 0.66) 100%);
}

.mv-subheader-inner {
  position: relative;
  z-index: 2;
  padding: 96px 0 92px;
  max-width: 940px;
}

.mv-subheader h1 {
  color: var(--mv-color-white);
  margin-bottom: 16px;
  text-wrap: balance;
}

.mv-subheader h1 em {
  font-style: normal;
  color: var(--mv-color-primary);
}

.mv-subheader p {
  max-width: 640px;
  font-size: var(--mv-fs-lead);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.68);
  max-width: 600px;
}

/* Breadcrumb on the speed-tick rule the rest of the template uses */
.mv-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin-bottom: 20px;
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.mv-crumb li {
  color: rgba(255, 255, 255, 0.5);
}

.mv-crumb a {
  color: var(--mv-color-primary);
}

.mv-crumb a:hover {
  color: var(--mv-color-white);
}

.mv-crumb li + li::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 8px;
  margin-right: 12px;
  vertical-align: middle;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.34) 0 3px, transparent 3px 8px);
}

/*======================
50. Pagination
========================*/
.mv-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin-top: 54px;
}

.mv-pager a,
.mv-pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  height: 50px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--mv-heading);
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius);
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.mv-pager a:hover {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border-color: var(--mv-color-primary);
}

.mv-pager .is-current {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border-color: var(--mv-color-primary);
}

.mv-pager .is-gap {
  border-color: transparent;
  background-color: transparent;
  color: var(--mv-color-muted);
  min-width: 26px;
  padding: 0;
}

/*======================
51. Sidebar
========================*/
.mv-widget {
  padding: 30px 30px 32px;
  margin-bottom: 30px;
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
}

.mv-widget:last-child {
  margin-bottom: 0;
}

.mv-widget-title {
  position: relative;
  font-family: var(--mv-ff-display);
  font-weight: 600;
  margin-bottom: 22px;
  padding-bottom: 16px;
  font-size: 18px;
  border-bottom: 1px solid var(--mv-color-line);
}

.mv-widget-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 56px;
  height: 2px;
  background-color: var(--mv-color-primary);
}

/* Search widget */
.mv-widget-search {
  position: relative;
}

.mv-widget-search input {
  display: block;
  width: 100%;
  height: 54px;
  padding: 0 60px 0 18px;
  font-size: 14.5px;
  color: var(--mv-heading);
  background-color: var(--mv-color-paper);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius);
}

.mv-widget-search input::placeholder {
  color: var(--mv-color-muted);
}

.mv-widget-search input:focus {
  background-color: var(--mv-color-surface);
  border-color: var(--mv-color-ink);
}

.mv-widget-search button {
  position: absolute;
  top: 5px;
  right: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 14px;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border-radius: 7px;
}

.mv-widget-search button:hover {
  color: var(--mv-color-primary);
  background-color: var(--mv-color-ink);
}

/* Recent posts */
.mv-recent-post {
  display: flex;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--mv-color-line-2);
}

.mv-recent-post:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.mv-recent-post-media {
  flex: none;
  width: 82px;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 1 / 1;
}

.mv-recent-post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform-origin: center top;
  transition: transform 0.7s ease;
}

.mv-recent-post:hover .mv-recent-post-media img {
  transform: scale(1.08);
}

.mv-recent-post time {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--mv-color-muted);
}

.mv-recent-post h4 {
  font-size: 15px;
  line-height: 1.42;
}

.mv-recent-post h4 a:hover {
  color: var(--mv-color-primary-deep);
}

/* Category list */
.mv-cat-list {
  list-style: none;
}

.mv-cat-list li + li {
  margin-top: 4px;
}

.mv-cat-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 16px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--mv-color-body);
  background-color: var(--mv-color-paper);
  border-radius: var(--mv-radius);
}

.mv-cat-list a span {
  font-size: 12.5px;
  color: var(--mv-color-muted);
}

.mv-cat-list a:hover {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
}

.mv-cat-list a:hover span {
  color: rgba(var(--mv-color-ink-rgb), 0.6);
}

/* Tag cloud */
.mv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  list-style: none;
}

.mv-tags a {
  display: inline-block;
  padding: 8px 17px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mv-color-body);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-pill);
}

.mv-tags a:hover {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border-color: var(--mv-color-primary);
}

/* Sidebar promo */
.mv-widget-promo {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 320px;
  border-radius: var(--mv-radius-lg);
  background-color: var(--mv-color-ink);
}

.mv-widget-promo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.mv-widget-promo:hover img {
  transform: scale(1.06);
}

.mv-widget-promo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, rgba(10, 13, 16, 0.94) 10%, rgba(10, 13, 16, 0.3) 60%, transparent);
}

.mv-widget-promo-inner {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 28px 26px 26px;
}

.mv-widget-promo-inner > span:first-child {
  display: block;
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mv-color-primary);
}

.mv-widget-promo-inner b {
  display: block;
  margin: 6px 0 12px;
  font-family: var(--mv-ff-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.6px;
  line-height: 1.16;
  color: var(--mv-color-white);
}

/*======================
52. Blog Layouts
========================*/
.mv-post {
  overflow: hidden;
  margin-bottom: 40px;
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
  transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
}

.mv-post:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--mv-shadow-lg);
}

.mv-post-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.mv-post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform-origin: center top;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-post:hover .mv-post-media img {
  transform: scale(1.06);
}

.mv-post-media .mv-post-cat {
  position: absolute;
  top: 18px;
  left: 0;
  z-index: 2;
  margin: 0;
}

/* Post format badge -- video, gallery and quote posts carry one */
.mv-post-format {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  font-size: 17px;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border-radius: 50%;
}

.mv-post-format:hover {
  color: var(--mv-color-primary);
  background-color: var(--mv-color-ink);
}

.mv-post-body {
  padding: 28px 32px 30px;
}

.mv-post-body .mv-post-meta {
  color: var(--mv-color-muted);
  margin-bottom: 12px;
}

.mv-post-body .mv-post-meta i {
  color: var(--mv-color-primary-deep);
}

/* .mv-post-meta is painted white for the dark lead card. The article reuses it
   on a white body, which left the byline invisible. This also gives the row a
   hairline rule and real separators instead of three items floating in a gap. */
.mv-article-meta {
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  font-size: 13.5px;
  /* --mv-color-muted only reaches 3.06:1 on white, which is thin for 13.5px */
  color: var(--mv-color-body);
  border-bottom: 1px solid var(--mv-color-line);
}

.mv-article-meta i {
  color: var(--mv-color-primary-deep);
}

.mv-article-meta > li {
  position: relative;
}

.mv-article-meta > li + li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -14px;
  width: 1px;
  height: 13px;
  transform: translateY(-50%);
  background-color: var(--mv-color-line);
}

.mv-post-body h3 {
  font-size: clamp(22px, 1.9vw, 28px);
  margin-bottom: 13px;
}

.mv-post-body h3 a:hover {
  color: var(--mv-color-primary-deep);
}

.mv-post-body > p {
  font-size: 15.5px;
  line-height: 1.72;
  margin-bottom: 22px;
}

/* Quote format renders as a pulled quote instead of a photo */
.mv-post-quote {
  padding: 46px 44px;
  background-color: var(--mv-color-ink);
}

.mv-post-quote > i {
  font-size: 30px;
  color: var(--mv-color-primary);
}

.mv-post-quote p {
  margin: 16px 0 18px;
  font-family: var(--mv-ff-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: 0.4px;
  color: var(--mv-color-white);
}

.mv-post-quote cite {
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mv-color-primary);
}

/* Gallery format shows a small strip under the lead image */
.mv-post-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.mv-post-gallery a {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.mv-post-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.mv-post-gallery a:hover img {
  transform: scale(1.07);
}

/*======================
53. Blog Details
========================*/
.mv-article {
  background-color: var(--mv-color-surface);
}

.mv-article-media {
  overflow: hidden;
  border-radius: var(--mv-radius-lg);
  margin-bottom: 34px;
  aspect-ratio: 16 / 9;
}

.mv-article-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.mv-article-body h2 {
  font-size: clamp(26px, 2.4vw, 36px);
  margin: 34px 0 16px;
}

.mv-article-body h3 {
  font-size: clamp(21px, 1.8vw, 26px);
  margin: 28px 0 14px;
}

.mv-article-body p {
  margin-bottom: 20px;
  line-height: 1.82;
}

.mv-article-body ul {
  list-style: none;
  margin-bottom: 24px;
}

.mv-article-body ul:not(.mv-reset) li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 11px;
  line-height: 1.7;
}

.mv-article-body ul:not(.mv-reset) li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 14px;
  height: 8px;
  background-image: repeating-linear-gradient(90deg, var(--mv-color-primary) 0 3px, transparent 3px 7px);
}

/* Pulled quote inside the article */
.mv-article-quote {
  position: relative;
  padding: 34px 38px;
  margin: 32px 0;
  background-color: var(--mv-color-paper);
  border-left: 4px solid var(--mv-color-primary);
  border-radius: var(--mv-radius);
}

.mv-article-quote p {
  font-family: var(--mv-ff-display);
  font-size: clamp(20px, 1.8vw, 25px);
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: 0.3px;
  color: var(--mv-heading);
  margin-bottom: 10px;
}

.mv-article-quote cite {
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--mv-color-muted);
}

/* Tags row + share */
.mv-article-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  padding: 26px 0;
  margin-top: 34px;
  border-top: 1px solid var(--mv-color-line);
  border-bottom: 1px solid var(--mv-color-line);
}

.mv-article-foot h4 {
  margin-bottom: 12px;
  font-size: var(--mv-fs-micro);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--mv-color-muted);
}

/* Author box */
.mv-author {
  display: flex;
  gap: 26px;
  padding: 32px 34px;
  margin-top: 40px;
  background-color: var(--mv-color-paper);
  border-radius: var(--mv-radius-lg);
}

.mv-author img {
  flex: none;
  width: 104px;
  height: 104px;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
}

.mv-author span {
  display: block;
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--mv-color-primary-deep);
}

.mv-author h4 {
  margin: 5px 0 10px;
  font-size: 20px;
}

.mv-author p {
  font-size: 14.5px;
  line-height: 1.7;
  margin-bottom: 14px;
}

/* Prev / next post */
.mv-postnav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin-top: 40px;
}

.mv-postnav a {
  display: block;
  padding: 26px 28px;
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.mv-postnav a:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--mv-shadow);
}

.mv-postnav .is-next {
  text-align: right;
}

.mv-postnav span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--mv-color-primary-deep);
}

.mv-postnav h5 {
  font-size: 17px;
  line-height: 1.42;
}

/* Comments */
.mv-comments {
  margin-top: 46px;
}

.mv-comment {
  display: flex;
  gap: 22px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--mv-color-line);
}

.mv-comment.is-reply {
  margin-left: 78px;
}

.mv-comment:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.mv-comment img {
  flex: none;
  width: 68px;
  height: 68px;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
}

.mv-comment-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.mv-comment-head h4 {
  font-size: 16.5px;
}

.mv-comment-head time {
  font-size: 12.5px;
  color: var(--mv-color-muted);
}

.mv-comment p {
  font-size: 14.5px;
  line-height: 1.72;
  margin-bottom: 12px;
}

.mv-comment-reply {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mv-heading);
}

.mv-comment-reply:hover {
  color: var(--mv-color-primary-deep);
}

/* Comment form */
.mv-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.mv-form-field {
  margin-bottom: 18px;
}

.mv-form-field label {
  display: block;
  margin-bottom: 9px;
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--mv-color-muted);
}

.mv-form-field input,
.mv-form-field select,
.mv-form-field textarea {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 20px;
  font-size: 15px;
  color: var(--mv-heading);
  background-color: var(--mv-color-paper);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.mv-form-field textarea {
  height: auto;
  min-height: 160px;
  padding: 18px 20px;
  line-height: 1.7;
  resize: vertical;
}

.mv-form-field input::placeholder,
.mv-form-field textarea::placeholder {
  color: var(--mv-color-muted);
}

.mv-form-field input:focus,
.mv-form-field select:focus,
.mv-form-field textarea:focus {
  background-color: var(--mv-color-surface);
  border-color: var(--mv-color-ink);
}

.mv-form-field.is-full {
  grid-column: 1 / -1;
}

/* AJAX status line */
.form-status {
  display: none;
  padding: 15px 20px;
  margin-top: 18px;
  font-size: 14.5px;
  border-radius: var(--mv-radius);
}

.form-status.is-success {
  color: #1B7A46;
  background-color: #E6F6EC;
}

.form-status.is-error {
  color: #7B5C3B;
  background-color: #FCEBE8;
}

/*======================
54. Filter Sidebar
========================*/
.mv-filters .mv-widget {
  padding: 26px 26px 28px;
}

.mv-check {
  list-style: none;
}

.mv-check li + li {
  margin-top: 3px;
}

.mv-check label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 14.5px;
  color: var(--mv-color-body);
  cursor: pointer;
}

.mv-check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--mv-color-primary);
  cursor: pointer;
}

.mv-check label:hover {
  color: var(--mv-heading);
}

.mv-check .count {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--mv-color-muted);
}

.mv-filter-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 20px;
  margin-top: 4px;
  border-top: 1px solid var(--mv-color-line);
}

.mv-filter-count {
  font-size: 14px;
  color: var(--mv-color-body);
}

.mv-filter-count b {
  font-family: var(--mv-ff-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.6px;
  color: var(--mv-heading);
}

/*======================
55. Listing Toolbar
========================*/
.mv-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px 22px;
  margin-bottom: 30px;
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
}

.mv-toolbar-count {
  font-size: 14.5px;
  color: var(--mv-color-body);
}

.mv-toolbar-count b {
  font-family: var(--mv-ff-display);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.6px;
  color: var(--mv-heading);
  margin-right: 4px;
}

.mv-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mv-toolbar select {
  height: 46px;
  padding: 0 40px 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mv-heading);
  background-color: var(--mv-color-paper);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius);
  appearance: none;
}

.mv-toolbar-select {
  position: relative;
}

.mv-toolbar-select i {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--mv-color-muted);
  pointer-events: none;
}

.mv-view-toggle {
  display: flex;
  gap: 6px;
}

.mv-view-toggle a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  font-size: 15px;
  color: var(--mv-heading);
  background-color: var(--mv-color-paper);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius);
}

.mv-view-toggle a:hover,
.mv-view-toggle a.is-on {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border-color: var(--mv-color-primary);
}

.mv-empty {
  display: none;
  padding: 70px 30px;
  text-align: center;
  background-color: var(--mv-color-surface);
  border: 1px dashed var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
}

.mv-empty.is-on {
  display: block;
}

.mv-empty i {
  font-size: 34px;
  color: var(--mv-color-line);
  margin-bottom: 16px;
}

/*======================
56. Listing Map
========================*/
.mv-maplayout {
  display: grid;
  grid-template-columns: 1fr 44%;
  gap: 0;
  align-items: start;
}

.mv-maplayout-list {
  padding-right: 34px;
  max-height: 1180px;
  overflow-y: auto;
}

/* The list column is half width beside the map: the spec row folds to two by two */
.mv-maplayout .mv-listrow-specs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.mv-mapframe {
  position: sticky;
  top: 110px;
  overflow: hidden;
  height: 760px;
  border-radius: var(--mv-radius-lg);
  background-color: var(--mv-color-paper);
  border: 1px solid var(--mv-color-line);
}

.mv-mapframe iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.35) contrast(1.05);
}

.mv-map-note {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--mv-color-body);
  background-color: var(--mv-color-paper);
  border-radius: var(--mv-radius);
}

.mv-map-note i {
  color: var(--mv-color-primary-deep);
}

/*======================
57. Car Details
========================*/
.mv-detail-gallery {
  margin-bottom: 30px;
}

.mv-detail-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--mv-radius-lg);
  background-color: var(--mv-color-ink);
}

.mv-detail-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mv-detail-badge {
  position: absolute;
  top: 22px;
  left: 0;
  z-index: 2;
  padding: 8px 24px 8px 18px;
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  clip-path: var(--mv-shear);
}

.mv-detail-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
  list-style: none;
}

.mv-detail-thumbs button {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 2px solid transparent;
  border-radius: var(--mv-radius);
  transition: border-color 0.3s ease;
}

.mv-detail-thumbs button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  transition: opacity 0.3s ease, transform 0.6s ease;
}

.mv-detail-thumbs button:hover img {
  opacity: 1;
  transform: scale(1.06);
}

.mv-detail-thumbs button.is-active {
  border-color: var(--mv-color-primary);
}

.mv-detail-thumbs button.is-active img {
  opacity: 1;
}

/* Title block */
.mv-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--mv-color-line);
}

.mv-detail-head h1,
.mv-detail-head h2 {
  font-size: clamp(30px, 3vw, 44px);
  margin-bottom: 10px;
}

.mv-detail-price {
  text-align: right;
}

.mv-detail-price b {
  display: block;
  font-family: var(--mv-ff-display);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.05;
  color: var(--mv-heading);
}

.mv-detail-price span {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--mv-color-muted);
}

/* Key spec strip */
.mv-detail-keys {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
  overflow: hidden;
  margin-bottom: 34px;
}

.mv-detail-keys li {
  padding: 22px 18px;
  text-align: center;
}

.mv-detail-keys li + li {
  border-left: 1px solid var(--mv-color-line);
}

.mv-detail-keys i {
  display: block;
  margin-bottom: 9px;
  font-size: 20px;
  color: var(--mv-color-primary-deep);
}

.mv-detail-keys b {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--mv-heading);
}

.mv-detail-keys span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mv-color-muted);
}

/* Full spec table */
.mv-detail-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  border-top: 1px solid var(--mv-color-line-2);
}

.mv-detail-specs li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 4px;
  font-size: 14.5px;
  color: var(--mv-color-muted);
  border-bottom: 1px solid var(--mv-color-line-2);
}

.mv-detail-specs li:nth-child(odd) {
  padding-right: 26px;
  border-right: 1px solid var(--mv-color-line-2);
}

.mv-detail-specs li:nth-child(even) {
  padding-left: 26px;
}

.mv-detail-specs strong {
  font-weight: 600;
  color: var(--mv-heading);
}

/* Feature checklist */
.mv-detail-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 26px;
  list-style: none;
}

/* equipment reads as plain rows, not a bullet list */
.mv-detail-features li {
  padding: 12px 0;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--mv-heading);
  border-bottom: 1px solid var(--mv-color-line-2);
}

/* Inspection sheet */
.mv-sheet {
  list-style: none;
}

.mv-sheet li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--mv-color-line-2);
}

.mv-sheet li:last-child {
  border-bottom: none;
}

.mv-sheet .mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 12px;
  border-radius: 50%;
}

.mv-sheet .mark.is-pass {
  color: #1B7A46;
  background-color: #E6F6EC;
}

.mv-sheet .mark.is-note {
  color: #96631B;
  background-color: #FBF1DF;
}

.mv-sheet b {
  font-size: 15px;
  font-weight: 600;
  color: var(--mv-heading);
}

.mv-sheet span {
  display: block;
  font-size: 13.5px;
  color: var(--mv-color-muted);
}

.mv-sheet .grade {
  margin-left: auto;
  font-family: var(--mv-ff-display);
  font-size: 17px;
  letter-spacing: 0.6px;
  color: var(--mv-heading);
}

/* Seller card */
.mv-seller {
  padding: 28px 28px 30px;
  background-color: var(--mv-color-ink);
  border-radius: var(--mv-radius-lg);
  margin-bottom: 30px;
}

.mv-seller-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.mv-seller-head img {
  flex: none;
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--mv-radius);
}

.mv-seller-head h4 {
  color: var(--mv-color-white);
  font-size: 18px;
}

.mv-seller-head span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

.mv-seller-lines {
  list-style: none;
  margin-bottom: 22px;
}

.mv-seller-lines li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 8px 0;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.72);
}

.mv-seller-lines i {
  font-size: 13px;
  color: var(--mv-color-primary);
}

.mv-seller-actions {
  display: grid;
  gap: 10px;
}

/*======================
58. Compare Table
========================*/
.mv-compare-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
  overflow: hidden;
}

.mv-compare-table th,
.mv-compare-table td {
  padding: 18px 22px;
  font-size: 14.5px;
  text-align: left;
  border-bottom: 1px solid var(--mv-color-line-2);
}

.mv-compare-table tbody th {
  width: 200px;
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mv-color-muted);
  background-color: var(--mv-color-paper);
}

.mv-compare-table td {
  font-weight: 600;
  color: var(--mv-heading);
}

.mv-compare-table tbody tr:last-child th,
.mv-compare-table tbody tr:last-child td {
  border-bottom: none;
}

.mv-compare-head {
  padding: 0 !important;
  vertical-align: top;
}

/* the label column and the last slot keep set widths; the three cars share the rest evenly */
.mv-compare-head:first-child {
  width: 200px;
}

.mv-compare-head:last-child {
  width: 210px;
  vertical-align: middle;
}

.mv-compare-car {
  padding: 22px;
}

.mv-compare-car img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--mv-radius);
  margin-bottom: 14px;
}

.mv-compare-car h3 {
  font-size: 17px;
  margin-bottom: 4px;
}

.mv-compare-car span {
  font-family: var(--mv-ff-display);
  font-size: 22px;
  letter-spacing: 0.6px;
  color: var(--mv-color-primary-deep);
}

.mv-compare-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 250px;
  padding: 22px;
  text-align: center;
  color: var(--mv-color-muted);
}

.mv-compare-drop i {
  font-size: 28px;
  color: var(--mv-color-line);
}

.mv-compare-best {
  color: var(--mv-color-primary-deep);
}

/*======================
59. Add Listing
========================*/
.mv-steps-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin-bottom: 40px;
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
  overflow: hidden;
  background-color: var(--mv-color-surface);
}

.mv-steps-nav li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  font-size: 15px;
  font-weight: 600;
  color: var(--mv-color-muted);
  border-right: 1px solid var(--mv-color-line);
}

.mv-steps-nav li:last-child {
  border-right: none;
}

.mv-steps-nav li.is-on {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
}

.mv-steps-nav b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  font-family: var(--mv-ff-display);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.4px;
  color: var(--mv-color-muted);
  background-color: var(--mv-color-paper);
  border-radius: 50%;
}

.mv-steps-nav li.is-on b {
  color: var(--mv-color-primary);
  background-color: var(--mv-color-ink);
}

.mv-panel {
  padding: 36px 38px 38px;
  margin-bottom: 30px;
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
}

.mv-panel-title {
  margin-bottom: 26px;
  padding-bottom: 16px;
  font-size: 20px;
  border-bottom: 1px solid var(--mv-color-line);
}

/* Photo dropzone */
.mv-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 54px 30px;
  text-align: center;
  background-color: var(--mv-color-paper);
  border: 2px dashed var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.mv-drop:hover {
  border-color: var(--mv-color-primary);
  background-color: var(--mv-color-primary-soft);
}

.mv-drop i {
  font-size: 34px;
  color: var(--mv-color-primary-deep);
}

.mv-drop b {
  font-size: 17px;
  color: var(--mv-heading);
}

.mv-drop span {
  font-size: 13.5px;
  color: var(--mv-color-muted);
}

.mv-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

/*======================
60. Dealer Details
========================*/
.mv-dealer-hero {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: center;
  padding: 34px 38px;
  margin-bottom: 40px;
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
}

.mv-dealer-hero-media {
  overflow: hidden;
  border-radius: var(--mv-radius);
  aspect-ratio: 4 / 3;
}

.mv-dealer-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mv-dealer-hero h2 {
  font-size: clamp(26px, 2.4vw, 36px);
  margin-bottom: 8px;
}

.mv-dealer-hero > div > p {
  font-size: 15.5px;
  line-height: 1.72;
  margin: 14px 0 20px;
  max-width: 620px;
}

.mv-dealer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  list-style: none;
  padding-top: 20px;
  border-top: 1px solid var(--mv-color-line);
}

.mv-dealer-meta li {
  font-size: 13px;
  color: var(--mv-color-muted);
}

.mv-dealer-meta b {
  display: block;
  font-family: var(--mv-ff-display);
  font-size: 24px;
  letter-spacing: 0.6px;
  color: var(--mv-heading);
}

/*======================
61. Pricing
========================*/
.mv-plan {
  position: relative;
  height: 100%;
  padding: 38px 34px 36px;
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.mv-plan:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: var(--mv-shadow-lg);
}

.mv-plan.is-featured {
  background-color: var(--mv-color-ink);
  border-color: var(--mv-color-ink);
}

.mv-plan-flag {
  position: absolute;
  top: 26px;
  right: 0;
  padding: 6px 20px 6px 15px;
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%);
}

.mv-plan-name {
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--mv-color-primary-deep);
}

.mv-plan.is-featured .mv-plan-name {
  color: var(--mv-color-primary);
}

.mv-plan-cost {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 12px 0 8px;
}

.mv-plan-cost b {
  font-family: var(--mv-ff-display);
  font-size: clamp(38px, 3.6vw, 52px);
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--mv-heading);
}

.mv-plan.is-featured .mv-plan-cost b {
  color: var(--mv-color-white);
}

.mv-plan-cost span {
  font-size: 14px;
  color: var(--mv-color-muted);
  padding-bottom: 6px;
}

.mv-plan > p {
  font-size: 14.5px;
  line-height: 1.7;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--mv-color-line);
}

.mv-plan.is-featured > p {
  color: rgba(255, 255, 255, 0.6);
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.mv-plan-list {
  list-style: none;
  margin-bottom: 28px;
}

.mv-plan-list li {
  position: relative;
  padding: 8px 0 8px 30px;
  font-size: 14.5px;
  color: var(--mv-color-body);
}

.mv-plan.is-featured .mv-plan-list li {
  color: rgba(255, 255, 255, 0.72);
}

.mv-plan-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 14px;
  height: 8px;
  background-image: repeating-linear-gradient(90deg, var(--mv-color-primary) 0 3px, transparent 3px 7px);
}

.mv-plan-list li.is-off {
  color: var(--mv-color-muted);
  text-decoration: line-through;
}

.mv-plan-list li.is-off::before {
  background-image: repeating-linear-gradient(90deg, var(--mv-color-line) 0 3px, transparent 3px 7px);
}

/*======================
62. Dashboard
========================*/
.mv-dash {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 40px;
  align-items: start;
}

.mv-dash-nav {
  list-style: none;
  overflow: hidden;
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
}

.mv-dash-nav li + li {
  border-top: 1px solid var(--mv-color-line);
}

.mv-dash-nav a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 22px;
  font-size: 15px;
  font-weight: 500;
  color: var(--mv-color-body);
  transition: color 0.3s ease, background-color 0.3s ease, padding 0.3s ease;
}

.mv-dash-nav a i {
  width: 18px;
  font-size: 14px;
  color: var(--mv-color-muted);
}

.mv-dash-nav a:hover {
  padding-left: 28px;
  color: var(--mv-heading);
}

.mv-dash-nav li.is-on a {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
}

.mv-dash-nav li.is-on a i {
  color: var(--mv-heading);
}

.mv-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.mv-stat {
  padding: 24px 24px 22px;
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
}

.mv-stat i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  font-size: 16px;
  color: var(--mv-color-primary);
  background-color: var(--mv-color-ink);
  border-radius: var(--mv-radius);
}

.mv-stat b {
  display: block;
  font-family: var(--mv-ff-display);
  font-size: 30px;
  letter-spacing: 0.8px;
  line-height: 1.1;
  color: var(--mv-heading);
}

.mv-stat > span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--mv-color-muted);
}

.mv-dash-table {
  width: 100%;
  border-collapse: collapse;
}

.mv-dash-table th,
.mv-dash-table td {
  padding: 16px 18px;
  font-size: 14.5px;
  text-align: left;
  border-bottom: 1px solid var(--mv-color-line-2);
}

.mv-dash-table thead th {
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mv-color-muted);
  border-bottom: 1px solid var(--mv-color-line);
}

.mv-dash-table tbody tr:last-child td {
  border-bottom: none;
}

.mv-dash-car {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mv-dash-car img {
  width: 64px;
  height: 46px;
  object-fit: cover;
  border-radius: 7px;
  flex: none;
}

.mv-dash-car b {
  display: block;
  font-size: 14.5px;
  color: var(--mv-heading);
}

.mv-dash-car span {
  font-size: 12.5px;
  color: var(--mv-color-muted);
}

.mv-pill {
  display: inline-block;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  border-radius: var(--mv-radius-pill);
}

.mv-pill.is-live {
  color: #1B7A46;
  background-color: #E6F6EC;
}

.mv-pill.is-review {
  color: #96631B;
  background-color: #FBF1DF;
}

.mv-pill.is-sold {
  color: var(--mv-color-white);
  background-color: var(--mv-color-ink);
}

/*======================
63. Auth
========================*/
.mv-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-lg);
  background-color: var(--mv-color-surface);
}

.mv-auth-media {
  position: relative;
  min-height: 620px;
  background-color: var(--mv-color-ink);
}

.mv-auth-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mv-auth-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, rgba(10, 13, 16, 0.94) 8%, rgba(10, 13, 16, 0.5) 60%, rgba(10, 13, 16, 0.6) 100%);
}

.mv-auth-media-inner {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 44px 44px 40px;
}

.mv-auth-media-inner h2 {
  font-size: clamp(24px, 2.2vw, 32px);
  color: var(--mv-color-white);
  margin-bottom: 12px;
}

.mv-auth-media-inner p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.66);
}

.mv-auth-form {
  padding: 54px 56px;
}

.mv-auth-form h2 {
  font-size: clamp(28px, 2.6vw, 38px);
  margin-bottom: 8px;
}

.mv-auth-form > p:not(.mv-auth-foot) {
  margin-bottom: 30px;
}

.mv-auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.mv-auth-row label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--mv-color-body);
  cursor: pointer;
}

.mv-auth-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--mv-color-primary);
}

.mv-auth-row a {
  font-size: 14px;
  font-weight: 500;
  color: var(--mv-color-primary-deep);
}

.mv-auth-alt {
  position: relative;
  margin: 30px 0 22px;
  text-align: center;
}

.mv-auth-alt::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background-color: var(--mv-color-line);
}

.mv-auth-alt span {
  position: relative;
  padding: 0 16px;
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--mv-color-muted);
  background-color: var(--mv-color-surface);
}

.mv-auth-social {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mv-auth-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  height: 54px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--mv-heading);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius);
}

.mv-auth-social a:hover {
  border-color: var(--mv-color-ink);
}

.mv-auth-foot {
  margin-top: 26px;
  font-size: 14.5px;
  text-align: center;
}

.mv-auth-foot a {
  font-weight: 600;
  color: var(--mv-color-primary-deep);
}

/*======================
64. Contact
========================*/
.mv-contact-card h3 {
  margin-bottom: 8px;
  font-size: 20px;
}

.mv-contact-card {
  height: 100%;
  padding: 34px 32px 32px;
  text-align: center;
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.mv-contact-card:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: var(--mv-shadow);
}

.mv-contact-card > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  font-size: 23px;
  color: var(--mv-color-primary);
  background-color: var(--mv-color-ink);
  border-radius: 50%;
  transition: color 0.4s ease, background-color 0.4s ease;
}

.mv-contact-card:hover > i {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
}

.mv-contact-card h4 {
  margin-bottom: 10px;
}

.mv-contact-card p {
  font-size: 14.5px;
  line-height: 1.7;
}

.mv-contact-card a {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--mv-heading);
}

.mv-contact-card a:hover {
  color: var(--mv-color-primary-deep);
}

.mv-contact-form {
  padding: 42px 44px 44px;
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: var(--mv-radius-lg);
}

.mv-contact-map {
  overflow: hidden;
  height: 100%;
  min-height: 520px;
  border-radius: var(--mv-radius-lg);
  background-color: var(--mv-color-paper);
}

.mv-contact-map iframe {
  width: 100%;
  height: 100%;
  min-height: 520px;
  border: 0;
  filter: grayscale(0.35) contrast(1.05);
}

/*======================
65. About
========================*/
.mv-about-media {
  position: relative;
  border-radius: var(--mv-radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.mv-about-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mv-timeline {
  list-style: none;
  position: relative;
  padding-left: 36px;
}

.mv-timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background-color: var(--mv-color-line);
}

.mv-timeline li {
  position: relative;
  padding-bottom: 30px;
}

.mv-timeline li:last-child {
  padding-bottom: 0;
}

.mv-timeline li::before {
  content: "";
  position: absolute;
  left: -36px;
  top: 7px;
  width: 16px;
  height: 16px;
  background-color: var(--mv-color-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 5px var(--mv-color-primary-soft);
}

.mv-timeline time {
  display: block;
  margin-bottom: 5px;
  font-family: var(--mv-ff-display);
  font-size: 20px;
  letter-spacing: 0.8px;
  color: var(--mv-color-primary-deep);
}

.mv-timeline h4 {
  margin-bottom: 7px;
}

.mv-timeline p {
  font-size: 14.5px;
  line-height: 1.7;
}

/* Team */
/* staff cards: a round portrait (people are always round), the name, the role
   and three round contact links */
.mv-person {
  height: 100%;
  padding: 34px 24px 28px;
  text-align: center;
  background-color: var(--mv-color-surface);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow);
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}

.mv-person:hover {
  transform: translateY(-8px);
  box-shadow: var(--mv-shadow-lg);
}

.mv-person-media {
  width: 168px;
  height: 168px;
  margin: 0 auto 22px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--mv-color-surface), 0 0 0 8px var(--mv-color-primary);
}

.mv-person-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-person:hover .mv-person-media img {
  transform: scale(1.06);
}

.mv-person-body h3 {
  margin-bottom: 4px;
  font-size: 21px;
}

.mv-person-body > span {
  display: block;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mv-color-primary-deep);
}

.mv-person-social {
  display: flex;
  justify-content: center;
  gap: 8px;
  list-style: none;
}

.mv-person-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: 13px;
  color: var(--mv-heading);
  background-color: var(--mv-tonal);
  border-radius: 50%;
}

.mv-person-social a:hover {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
}

/*======================
66. Sponsored Models
========================*/
.mv-specs-rail {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}

.mv-specs-rail > button {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  font-size: 18px;
  color: var(--mv-color-muted);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.25s ease;
}

.mv-specs-rail > button:hover {
  color: var(--mv-color-primary);
}

.mv-specslider {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  padding: 10px 0 26px;
}

.mv-specslider .swiper-slide {
  height: auto;
}

.mv-spec-card {
  height: 100%;
  padding: 28px 26px 22px;
  border-radius: var(--mv-radius-lg);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.mv-spec-card h3 {
  font-size: 21px;
  margin-bottom: 8px;
  color: var(--mv-color-muted);
  transition: color 0.3s ease;
}

.mv-spec-from {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--mv-color-body);
}

.mv-spec-from b {
  font-weight: 600;
  color: var(--mv-heading);
}

.mv-spec-note {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--mv-color-muted);
  margin-bottom: 18px;
}

.mv-spec-media {
  margin-bottom: 20px;
}

.mv-spec-media img {
  width: 100%;
  height: auto;
  max-height: 190px;
  object-fit: contain;
}

.mv-spec-figs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.mv-spec-figs b {
  display: block;
  font-family: var(--mv-ff-display);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: var(--mv-heading);
}

.mv-spec-figs > li > span {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--mv-color-muted);
}

/* the centre card is the one on offer */
.mv-specslider .swiper-slide-active .mv-spec-card,
.mv-spec-card:hover {
  background-color: var(--mv-color-surface);
  box-shadow: var(--mv-shadow-lg);
  border-bottom: 3px solid var(--mv-color-primary);
  transform: translateY(-6px);
}

.mv-specslider .swiper-slide-active .mv-spec-card h3,
.mv-spec-card:hover h3 {
  color: var(--mv-color-primary-deep);
}

/*======================
67. Error & Coming Soon
========================*/
.mv-bare {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 100vh;
  background-color: var(--mv-color-ink);
}

.mv-bare-bg {
  position: absolute;
  /* Inset past the frame so the parallax drift never exposes an edge */
  top: -14%;
  right: 0;
  bottom: -14%;
  left: 0;
}

.mv-bare-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mv-bare-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(120deg, rgba(10, 13, 16, 0.96) 12%, rgba(10, 13, 16, 0.82) 58%, rgba(10, 13, 16, 0.7) 100%);
}

.mv-bare-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 80px 0;
}

.mv-bare-logo {
  display: inline-block;
  width: 210px;
  margin-bottom: 44px;
}

.mv-bare-code {
  display: block;
  font-family: var(--mv-ff-display);
  font-size: clamp(90px, 16vw, 220px);
  line-height: 0.92;
  letter-spacing: 6px;
  color: var(--mv-color-primary);
  margin-bottom: 10px;
}

.mv-bare-inner h1 {
  color: var(--mv-color-white);
  margin-bottom: 16px;
}

.mv-bare-inner h1 em {
  font-style: normal;
  color: var(--mv-color-primary);
}

.mv-bare-inner > .container > p,
.mv-bare-inner p {
  font-size: var(--mv-fs-lead);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.68);
  max-width: 560px;
  margin-bottom: 34px;
}

.mv-bare-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Coming soon countdown reuses the shared clock on a bigger scale */
.mv-soon-clock {
  display: flex;
  gap: 16px;
  list-style: none;
  margin-bottom: 36px;
}

.mv-soon-clock li {
  min-width: 112px;
  padding: 20px 14px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--mv-radius-lg);
}

.mv-soon-clock b {
  display: block;
  font-family: var(--mv-ff-display);
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.05;
  letter-spacing: 1px;
  color: var(--mv-color-primary);
}

.mv-soon-clock span {
  display: block;
  margin-top: 4px;
  font-size: var(--mv-fs-micro);
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.mv-soon-form {
  position: relative;
  max-width: 480px;
}

.mv-soon-form input {
  display: block;
  width: 100%;
  height: 60px;
  padding: 0 160px 0 22px;
  font-size: 15px;
  color: var(--mv-color-white);
  background-color: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--mv-radius-pill);
}

.mv-soon-form input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.mv-soon-form input:focus {
  border-color: var(--mv-color-primary);
}

.mv-soon-form button {
  position: absolute;
  top: 5px;
  right: 5px;
  height: 50px;
  padding: 0 28px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border-radius: var(--mv-radius-pill);
}

.mv-soon-form button:hover {
  color: var(--mv-color-primary);
  background-color: var(--mv-color-surface);
}

.mv-soon-social {
  margin-top: 32px;
}

/*======================
68. Road Light
========================*/
/* The WebGL texture layer (main.js 37). It fades in once its scene is live; a
   host only needs position: relative and the layer sits under its content. */
.mv-gl {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.mv-gl.is-live {
  opacity: 1;
}

.mv-gl[data-gl="trails"] {
  mix-blend-mode: screen;
}

/*======================
69. Language Picker
========================*/
/* Language picker: a flag and a code; the menu lists the languages that read left to right and right to left.
   The demo copy stays in English, and a right-to-left language turns the layout around. */
.mv-lang {
  position: relative;
  flex-shrink: 0;
}
.mv-lang .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--mv-ff-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.mv-lang .lang-btn:hover,
.mv-lang .lang-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
}
.mv-lang .lang-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.mv-lang .lang-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.mv-lang .flag {
  flex-shrink: 0;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.mv-lang.is-icon .lang-btn {
  height: 42px;
  padding: 0 15px;
  background: var(--mv-tonal);
  color: var(--mv-heading);
}
.mv-lang.is-icon .lang-btn:hover,
.mv-lang.is-icon .lang-btn[aria-expanded="true"] {
  background: var(--mv-tonal-2);
  color: var(--mv-heading);
}
.mv-lang .lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 248px;
  padding: 10px;
  border-radius: var(--mv-radius);
  background: var(--mv-color-surface);
  box-shadow: var(--mv-shadow-lg);
  font-family: var(--mv-ff-body);
  text-align: start;
  white-space: normal;
}
.mv-lang.is-up .lang-menu {
  top: auto;
  bottom: calc(100% + 12px);
}
.mv-lang.is-start .lang-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.mv-lang .lang-menu[hidden] {
  display: none;
}
.mv-lang .lang-group {
  margin: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mv-color-muted);
}
.mv-lang .lang-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mv-lang .lang-menu ul + .lang-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--mv-color-line);
}
.mv-lang .lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--mv-heading);
  font-family: var(--mv-ff-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.mv-lang .lang-item small {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--mv-color-muted);
}
.mv-lang .lang-item i {
  width: 12px;
  font-size: 11px;
  color: var(--mv-color-primary-deep);
  opacity: 0;
}
.mv-lang .lang-item:hover,
.mv-lang .lang-item[aria-pressed="true"] {
  background: var(--mv-tonal);
}
.mv-lang .lang-item[aria-pressed="true"] {
  font-weight: 600;
}
.mv-lang .lang-item[aria-pressed="true"] i {
  opacity: 1;
}
.mv-lang .lang-note {
  margin: 10px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--mv-color-line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--mv-color-muted);
}

/*======================
70. Services
========================*/
.mv-service {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  isolation: isolate;
  color: var(--mv-color-white);
  border-radius: 22px;
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}

.mv-service .shot {
  position: absolute;
  inset: 0;
}

.mv-service .shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-service::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(180deg, rgba(10, 13, 16, 0.05) 30%, rgba(10, 13, 16, 0.92) 100%);
}

.mv-service-body {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 26px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mv-service-body .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  font-size: 18px;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border-radius: 50%;
}

.mv-service-body b {
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.2;
}

.mv-service-body small {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.74);
}

.mv-service .go {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 14px;
  color: var(--mv-color-white);
  background-color: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  transition: color 0.35s ease, background-color 0.35s ease, transform 0.35s ease;
}

.mv-service:hover {
  color: var(--mv-color-white);
  transform: translateY(-8px);
  box-shadow: var(--mv-shadow-lg);
}

.mv-service:hover .shot img {
  transform: scale(1.08);
}

.mv-service:hover .go {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  transform: rotate(-45deg);
}

/*======================
71. Test Drive
========================*/
.mv-steplist li {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 24px 0;
  border-top: 1px solid var(--mv-color-line);
}

.mv-steplist .num {
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch-wide);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--mv-color-primary-deep);
}

.mv-steplist h3 {
  margin-bottom: 6px;
  font-size: 20px;
}

.mv-steplist p {
  font-size: 15px;
  line-height: 1.7;
}

.mv-drive {
  padding: 38px;
  background-color: var(--mv-color-surface);
  border-radius: 26px;
  box-shadow: var(--mv-shadow-lg);
}

[data-theme="dark"] .mv-drive {
  box-shadow: var(--mv-shadow-lg), inset 0 0 0 1px var(--mv-color-line);
}

.mv-drive-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 26px;
}

.mv-drive-head h3 {
  font-size: 26px;
}

.mv-drive-head p {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--mv-heading);
  background-color: var(--mv-tonal);
  border-radius: var(--mv-radius-pill);
}

.mv-drive .mv-open-dot {
  background-color: var(--mv-color-muted);
}

.mv-drive .mv-open-dot.is-open {
  background-color: var(--mv-color-go);
}

.mv-drive-summary {
  margin: 20px 0;
  padding: 13px 16px;
  font-size: 14.5px;
  color: var(--mv-color-body);
  background-color: var(--mv-tonal);
  border-radius: 14px;
}

.mv-drive-summary b {
  color: var(--mv-heading);
}

.mv-drive .form-status {
  margin-top: 16px;
}

/*======================
72. Grounds
========================*/
/* Section grounds: a photograph as texture under a wash of the section's own
   ground (dark mode follows the -rgb token), with two brand glows; or the
   WebGL contour lines on paper. Never two photo grounds in a row. */
.mv-ground-photo,
.mv-ground-contour {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.mv-ground-photo {
  background-color: var(--mv-ground);
}

.mv-ground-contour {
  background-color: var(--mv-color-paper);
}

.mv-ground-img {
  position: absolute;
  top: -12%;
  right: 0;
  bottom: -12%;
  left: 0;
  z-index: -2;
}

.mv-ground-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.5);
}

.mv-ground-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(55% 70% at 0% 0%, rgba(var(--mv-color-primary-rgb), 0.22), transparent 62%), radial-gradient(50% 60% at 100% 100%, rgba(var(--mv-color-primary-rgb), 0.14), transparent 62%);
  background-color: rgba(var(--mv-ground-rgb), 0.88);
}

/* any section carrying a WebGL layer keeps its content above it */
section > .mv-gl ~ .container {
  position: relative;
  z-index: 1;
}

/*======================
73. Running Costs
========================*/
.mv-evcalc,
.mv-charge {
  padding: 34px;
  background-color: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 26px;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.mv-evcalc {
  height: 100%;
}

.mv-evcalc .mv-field {
  margin-bottom: 22px;
}

.mv-evcalc .mv-field label,
.mv-charge .mv-seg-field legend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  float: none;
  width: 100%;
  margin-bottom: 12px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mv-color-muted);
}

.mv-evcalc .mv-field label span {
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mv-heading);
}

.mv-evcalc .mv-seg-field:last-child {
  margin-bottom: 0;
}

/* the answer, on the brand colour */
.mv-evresult {
  --mv-heading: #101418;
  --mv-color-body: rgba(16, 20, 24, 0.72);
  --mv-color-line: rgba(16, 20, 24, 0.16);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 34px;
  color: var(--mv-color-body);
  background-color: var(--mv-color-primary);
  border-radius: 26px;
}

.mv-evresult > span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mv-evresult > b {
  display: block;
  margin: 8px 0 18px;
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch-wide);
  font-size: clamp(48px, 4.6vw, 72px);
  font-weight: 700;
  line-height: 1;
  color: #101418;
  font-variant-numeric: tabular-nums;
}

.mv-evresult .mv-btn {
  margin-top: auto;
  color: var(--mv-color-white);
  background-color: #101418;
  border-color: #101418;
}

.mv-evresult .mv-rows {
  margin-bottom: 26px;
}

.mv-charge {
  --charge: 0.1;
  margin-top: 30px;
}

.mv-charge-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 30px;
  margin-bottom: 30px;
}

.mv-charge-head h3 {
  font-size: 26px;
}

.mv-charge-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.mv-charge-pick .mv-seg-field {
  min-width: 300px;
  margin: 0;
}

/* the battery fills from 10% to 80% with the section's travel */
.mv-battery {
  position: relative;
  height: 78px;
  margin-right: 14px;
  border: 2px solid rgba(255, 255, 255, 0.24);
  border-radius: 20px;
}

.mv-battery::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -14px;
  width: 9px;
  height: 28px;
  margin-top: -14px;
  border-radius: 0 5px 5px 0;
  background-color: rgba(255, 255, 255, 0.24);
}

.mv-battery-fill {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: calc((100% - 12px) * var(--charge));
  border-radius: 14px;
  background-image: linear-gradient(90deg, rgba(var(--mv-color-primary-rgb), 0.55), var(--mv-color-primary));
  box-shadow: 0 0 34px rgba(var(--mv-color-primary-rgb), 0.45);
}

.mv-battery-mark {
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: calc(6px + (100% - 12px) * 0.8);
  width: 2px;
  background-color: rgba(255, 255, 255, 0.55);
}

.mv-battery-pct {
  position: absolute;
  top: 50%;
  left: 26px;
  transform: translateY(-50%);
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch-wide);
  font-size: 26px;
  font-weight: 700;
  color: #07090C;
  font-variant-numeric: tabular-nums;
}

.mv-charge-read {
  margin-top: 22px;
  font-size: 16px;
  color: var(--mv-color-body);
}

.mv-charge-read b {
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch);
  font-size: 22px;
  font-weight: 700;
  color: var(--mv-heading);
}

/*======================
74. Private Viewing
========================*/
.mv-specialist {
  display: flex;
  align-items: center;
  gap: 18px;
  width: fit-content;
  margin-bottom: 30px;
  padding: 16px 26px 16px 16px;
  background-color: var(--mv-color-surface);
  border-radius: 22px;
  box-shadow: var(--mv-shadow);
}

.mv-specialist img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  box-shadow: 0 0 0 3px var(--mv-color-surface), 0 0 0 5px var(--mv-color-primary);
}

.mv-specialist span {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mv-color-muted);
}

.mv-specialist b {
  display: block;
  margin: 2px 0 4px;
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch);
  font-size: 20px;
  font-weight: 600;
  color: var(--mv-heading);
}

.mv-specialist a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mv-color-primary-deep);
}

/*======================
75. Finance Or Lease
========================*/
.mv-leasecalc {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 30px;
  align-items: start;
}

.mv-lease-inputs {
  padding: 34px;
  background-color: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 26px;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.mv-lease-inputs .mv-field {
  margin-bottom: 22px;
}

.mv-lease-inputs .mv-field label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mv-color-muted);
}

.mv-lease-inputs .mv-field label span {
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mv-heading);
}

.mv-lease-inputs .mv-seg-field legend {
  display: block;
  float: none;
  width: 100%;
  margin-bottom: 12px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mv-color-muted);
}

.mv-lease-inputs .mv-seg-field:last-child {
  margin-bottom: 0;
}

.mv-lease-out {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.mv-lease-card {
  --fill: 0;
  padding: 30px;
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: 26px;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

/* the cheaper monthly wears the brand ring */
.mv-lease-card.is-lower {
  border-color: var(--mv-color-primary);
  box-shadow: 0 0 0 1px var(--mv-color-primary), 0 30px 60px -30px rgba(var(--mv-color-primary-rgb), 0.45);
}

.mv-lease-tag {
  display: inline-block;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mv-heading);
  background-color: var(--mv-tonal-2);
  border-radius: var(--mv-radius-pill);
}

.mv-lease-card.is-lower .mv-lease-tag {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
}

.mv-lease-monthly {
  display: block;
  margin: 18px 0 2px;
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch-wide);
  font-size: clamp(40px, 3.6vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--mv-heading);
  font-variant-numeric: tabular-nums;
}

.mv-lease-card small {
  display: block;
  font-size: 14px;
  color: var(--mv-color-body);
}

/* where the money goes: two parts, filled with the section's travel */
.mv-lease-bar {
  display: flex;
  gap: 4px;
  height: 10px;
  margin: 24px 0 14px;
  border-radius: 10px;
  background-color: var(--mv-tonal);
  overflow: hidden;
}

.mv-lease-bar i {
  display: block;
  height: 100%;
  width: calc(var(--w, 0) * var(--fill) * 1%);
  border-radius: 10px;
}

.mv-lease-bar .is-a,
.mv-rows .dot.is-a {
  background-color: var(--mv-color-primary);
}

.mv-lease-bar .is-b,
.mv-rows .dot.is-b {
  background-color: rgba(255, 255, 255, 0.55);
}

.mv-rows .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 10px;
  border-radius: 50%;
}

.mv-lease-verdict {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  font-size: 15.5px;
  color: var(--mv-heading);
  background-color: var(--mv-tonal);
  border-radius: 18px;
}

.mv-lease-verdict i {
  font-size: 18px;
  color: var(--mv-color-primary);
}

/*======================
76. Budget Planner
========================*/
/* Used Cars home: the hero runs under a solid header, with the budget planner
   parked over its right side (outside the slides, so it never changes) */
.mv-hero.is-used .mv-hero-slide {
  height: clamp(780px, calc(100vh - 60px), 900px);
}

.mv-hero.is-used .mv-hero-inner {
  max-width: 640px;
  padding: 60px 0 170px;
}

.mv-hero.is-used .mv-hero-slide h1,
.mv-hero.is-used .mv-hero-slide h2 {
  font-size: clamp(38px, 4vw, 66px);
}

.mv-hero.is-used .mv-hero-chrome {
  bottom: 70px;
}

.mv-hero.is-used .mv-hero-chrome-inner {
  justify-content: flex-start;
}

.mv-hero-aside {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 6;
  transform: translateY(-50%);
  pointer-events: none;
}

.mv-hero-aside .container {
  display: flex;
  justify-content: flex-end;
}

.mv-budget {
  width: 430px;
  padding: 30px;
  pointer-events: auto;
  background-color: var(--mv-color-surface);
  border-radius: 26px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .mv-budget {
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8), inset 0 0 0 1px var(--mv-color-line);
}

.mv-budget-head {
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--mv-color-line);
}

.mv-budget-head span {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mv-color-primary-deep);
}

.mv-budget-head b {
  display: block;
  margin: 6px 0 2px;
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch-wide);
  font-size: 46px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--mv-heading);
  font-variant-numeric: tabular-nums;
}

.mv-budget-head small {
  font-size: 14px;
  color: var(--mv-color-body);
}

.mv-budget .mv-field {
  margin-bottom: 18px;
}

.mv-budget .mv-field label,
.mv-budget .mv-seg-field legend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  float: none;
  width: 100%;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mv-color-muted);
}

.mv-budget .mv-field label span {
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mv-heading);
}

.mv-budget .mv-seg-field {
  margin-bottom: 18px;
}

.mv-budget .mv-seg label {
  padding: 9px 6px;
  font-size: 13.5px;
}

.mv-budget .mv-btn {
  margin-top: 6px;
}

/*======================
77. Service Centre
========================*/
/* the service form is the whole section: the frame belongs to the visit card */
.mv-drive.is-service,
[data-theme="dark"] .mv-drive.is-service {
  padding: 0;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* the service menu: each job a selectable row with its price and time */
.mv-jobs {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.mv-jobs li + li {
  margin-top: 12px;
}

.mv-jobs input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.mv-jobs label {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 22px 18px 18px;
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line);
  border-radius: 20px;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.mv-jobs label:hover {
  box-shadow: var(--mv-shadow);
}

.mv-jobs .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 18px;
  color: var(--mv-color-primary-deep);
  background-color: var(--mv-color-primary-soft);
  border-radius: 50%;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.mv-jobs .txt b {
  display: block;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--mv-heading);
}

.mv-jobs .txt small {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--mv-color-body);
}

.mv-jobs .cost {
  text-align: right;
}

.mv-jobs .cost b {
  display: block;
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch);
  font-size: 21px;
  font-weight: 700;
  color: var(--mv-heading);
}

.mv-jobs .cost small {
  font-size: 13px;
  color: var(--mv-color-muted);
}

.mv-jobs input:checked + label {
  border-color: var(--mv-color-primary);
  box-shadow: 0 0 0 1px var(--mv-color-primary);
}

.mv-jobs input:checked + label .ico {
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
}

.mv-jobs input:focus-visible + label {
  outline: 2px solid var(--mv-color-primary);
  outline-offset: 3px;
}

.mv-jobs input:disabled + label {
  cursor: default;
  opacity: 0.55;
}

.mv-jobs li.is-included .cost b,
.mv-jobs li.is-free .cost b {
  font-size: 15px;
  color: var(--mv-color-primary-deep);
}

.mv-svc-card {
  position: sticky;
  top: 110px;
  padding: 32px;
  background-color: var(--mv-color-surface);
  border-radius: 26px;
  box-shadow: var(--mv-shadow-lg);
}

[data-theme="dark"] .mv-svc-card {
  box-shadow: var(--mv-shadow-lg), inset 0 0 0 1px var(--mv-color-line);
}

.mv-svc-rows {
  margin-top: 22px;
}

.mv-svc-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 16px;
}

.mv-svc-total span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mv-color-muted);
}

.mv-svc-total b {
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch-wide);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--mv-color-primary-deep);
  font-variant-numeric: tabular-nums;
}

/* Service day: the stages stack on top of one another as the page moves
   (CSS sticky, each a step lower than the last; no scroll pinning) */
/* sticky needs an ancestor that does not clip: this band lets its overflow show */
.mv-stages-area.mv-night {
  overflow: visible;
}

.mv-stages-head {
  position: sticky;
  top: 140px;
}

.mv-stages {
  padding-bottom: 40px;
}

.mv-stage {
  position: sticky;
  display: grid;
  grid-template-columns: 58px 1fr;
  grid-template-rows: auto auto;
  gap: 4px 20px;
  margin-bottom: 26px;
  padding: 30px;
  background-color: #12161B;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  box-shadow: 0 -20px 40px -20px rgba(0, 0, 0, 0.6);
}

.mv-stage:nth-child(1) { top: 130px; }
.mv-stage:nth-child(2) { top: 154px; }
.mv-stage:nth-child(3) { top: 178px; }
.mv-stage:nth-child(4) { top: 202px; }

/* each card gets most of a screen of travel before the next one lands on it */
.mv-stage:not(:last-child) {
  margin-bottom: 22vh;
}

.mv-stage .num {
  position: absolute;
  top: 24px;
  right: 30px;
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch-wide);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.08);
}

.mv-stage .ico {
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  font-size: 20px;
  color: var(--mv-color-ink);
  background-color: var(--mv-color-primary);
  border-radius: 50%;
}

.mv-stage h3 {
  align-self: end;
  font-size: 22px;
}

.mv-stage p {
  max-width: 440px;
  font-size: 15px;
  color: var(--mv-color-body);
}

/* service plans */
.mv-plancard {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 36px;
  background-color: var(--mv-color-surface);
  border-radius: 26px;
  box-shadow: var(--mv-shadow);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.mv-plancard:hover {
  transform: translateY(-8px);
  box-shadow: var(--mv-shadow-lg);
}

.mv-plancard-tag {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mv-color-primary-deep);
}

.mv-plancard h3 {
  margin: 10px 0 14px;
  font-size: 26px;
}

.mv-plancard-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 18px;
}

.mv-plancard-price b {
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch-wide);
  font-size: 50px;
  font-weight: 700;
  line-height: 1;
  color: var(--mv-heading);
}

.mv-plancard-price span {
  font-size: 15px;
  color: var(--mv-color-muted);
}

.mv-plancard .mv-rows {
  margin-bottom: 30px;
}

.mv-plancard .mv-btn {
  margin-top: auto;
}

.mv-plancard.is-featured {
  --mv-heading: #F2F4F6;
  --mv-color-body: rgba(255, 255, 255, 0.68);
  --mv-color-muted: rgba(255, 255, 255, 0.5);
  --mv-color-line: rgba(255, 255, 255, 0.12);
  --mv-color-primary-deep: var(--mv-color-primary);
  background-color: #0A0D10;
  transform: translateY(-12px);
}

.mv-plancard.is-featured:hover {
  transform: translateY(-18px);
}

/*======================
78. Trade-In
========================*/
.mv-tradecalc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
  align-items: stretch;
}

.mv-trade-inputs,
.mv-trade-out {
  padding: 36px;
  background-color: var(--mv-color-surface);
  border-radius: 26px;
  box-shadow: var(--mv-shadow);
}

.mv-trade-inputs .mv-field {
  margin-bottom: 24px;
}

.mv-trade-inputs .mv-field label,
.mv-trade-inputs .mv-seg-field legend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  float: none;
  width: 100%;
  margin-bottom: 12px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mv-color-muted);
}

.mv-trade-inputs .mv-field label span {
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mv-heading);
}

.mv-trade-inputs .mv-seg-field {
  margin: 0;
}

.mv-trade-out {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 20px;
}

.mv-trade-col {
  padding: 22px 24px;
  background-color: var(--mv-tonal);
  border-radius: 20px;
}

.mv-trade-col span {
  font-size: 13px;
  font-weight: 500;
  color: var(--mv-color-muted);
}

.mv-trade-col b {
  display: block;
  margin: 6px 0 0;
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch-wide);
  font-size: clamp(34px, 3vw, 46px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--mv-heading);
  font-variant-numeric: tabular-nums;
}

.mv-trade-col small {
  font-size: 13.5px;
  color: var(--mv-color-body);
}

.mv-trade-col.is-with {
  --mv-heading: #101418;
  --mv-color-muted: rgba(16, 20, 24, 0.65);
  --mv-color-body: rgba(16, 20, 24, 0.72);
  background-color: var(--mv-color-primary);
}

.mv-trade-out .mv-rows,
.mv-trade-out .mv-btn {
  grid-column: 1 / -1;
}

/*======================
79. Body Rail
========================*/
/* The shapes on the floor, one rail on every page. Docked, it lifts onto the
   hero's or the page title's lower edge and the next section's own ground runs
   up under it; stacked, it sits under a search card that already docks there.
   The counts come off the stock (block 13); the rail slides (block 17). */
.mv-bodyrail,
.mv-bodyrail + * {
  --mv-rail-h: 156px;
  --mv-rail-pad: 130px;
  --mv-rail-lift: 32px;
}

.mv-bodyrail {
  position: relative;
  z-index: 30;
}

.mv-bodyrail.is-docked {
  margin-top: calc(var(--mv-rail-lift) * -1);
  margin-bottom: calc((var(--mv-rail-h) - var(--mv-rail-lift)) * -1);
}

.mv-bodyrail.is-docked + * {
  padding-top: calc(var(--mv-rail-pad) + var(--mv-rail-h) - var(--mv-rail-lift));
}

.mv-bodyrail.is-stacked {
  margin-top: 26px;
}

/* slider controls on a hero's bottom edge step up clear of the rail
   (translate composes with whatever transform already places them) */
:is(.mv-inline-hero, .mv-edit-hero, .mv-boxed-hero).has-rail :is(.mv-inline-chrome, .mv-edit-nav, .mv-boxed-chrome) {
  translate: 0 -26px;
}

.mv-bodyrail-card {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  height: var(--mv-rail-h);
  overflow: hidden;
  background-color: var(--mv-color-surface);
  border: 1px solid var(--mv-color-line-2);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-lg);
}

/* the label panel: graphite in both themes, the page's accent on the count */
.mv-bodyrail-head {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 0 30px;
  background-color: #101418;
  background-image: radial-gradient(120% 140% at 0% 100%, rgba(var(--mv-color-primary-rgb), 0.22), transparent 60%);
}

.mv-bodyrail-kicker {
  display: block;
  font-size: var(--mv-fs-micro);
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.mv-bodyrail-kicker b {
  font-weight: 700;
  color: var(--mv-color-primary);
}

.mv-bodyrail-title {
  margin: 4px 0 0;
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch-wide);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  color: #FFFFFF;
}

.mv-bodyrail-nav {
  display: flex;
  gap: 8px;
}

.mv-bodyrail-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 16px;
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.09);
  border: 0;
  border-radius: 50%;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.mv-bodyrail-nav button:hover {
  color: #101418;
  background-color: var(--mv-color-primary);
}

.mv-bodyrail-slider {
  width: 100%;
  height: 100%;
  margin: 0;
}

.mv-bodyrail-slider .swiper-slide {
  height: 100%;
}

.mv-bodytype {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 10px 8px 16px;
  text-align: center;
}

/* hairline between shapes, and an accent bar that draws in under the one in focus */
.mv-bodytype::before {
  content: "";
  position: absolute;
  top: 26%;
  bottom: 26%;
  left: 0;
  width: 1px;
  background-color: var(--mv-color-line);
}

.swiper-slide:first-child > .mv-bodytype::before {
  display: none;
}

.mv-bodytype::after {
  content: "";
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: 0;
  height: 3px;
  background-color: var(--mv-color-primary);
  border-radius: 3px 3px 0 0;
  transform: scaleX(0);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-bodytype > i {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  font-size: 94px;
  color: var(--mv-heading);
  transition: color 0.35s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-bodytype-name {
  margin-top: 12px;
  font-family: var(--mv-ff-display);
  font-stretch: var(--mv-stretch);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--mv-heading);
  transition: color 0.3s ease;
}

.mv-bodytype-count {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--mv-color-muted);
}

.mv-bodytype:hover > i,
.mv-bodytype:focus-visible > i {
  color: var(--mv-color-primary);
  transform: translateX(8px);
}

.mv-bodytype:hover .mv-bodytype-name,
.mv-bodytype:focus-visible .mv-bodytype-name {
  color: var(--mv-color-primary-deep);
}

.mv-bodytype:hover::after,
.mv-bodytype:focus-visible::after {
  transform: scaleX(1);
}