@charset "utf-8";

/*
Theme Name: Voltiva - Performance, Wrap & EV Specialist HTML5 Template
Author: Metropolitanthemes
Version: 1.0.0

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

1. General
   1.1 Typography
   1.2 Spacing & Grounds
   1.3 Section Titles
   1.4 Buttons & Links
   1.5 Forms
   1.6 Shared Pieces
   1.7 Spray Pass & Wrap Swatch
2. Preloader
3. Header
   3.1 Top Bar
   3.2 Main Bar
   3.3 Main Menu
   3.4 Home Mega Menu
   3.5 Sticky Header
4. Offcanvas Menu
5. Custom Select
6. Language Picker
7. Components
   7.1 Hero Slider
   7.2 Features
   7.3 Video Band
   7.4 Post Rows
   7.5 Care Plan Columns
   7.6 Instant Quote Strip
   7.7 Overlap Panel
   7.8 Cards
   7.9 Tabs, Chips & Choice Cards
   7.10 Accordion
   7.11 Pagination & Sidebar
8. Home One
   8.1 Service Words
   8.2 Mosaic
   8.3 Wrap Moment
   8.4 Builds Rail
9. Home Two
   9.1 Hero Two
   9.2 Cut-Out Split
   9.3 Ghost Card
   9.4 Dyno Chart & Stage Cards
   9.5 Parts Row
   9.6 Three Promises
   9.7 Ghost Split
   9.8 Countdown
10. Home Three
   10.1 Light Hero
   10.2 Headlights
   10.3 Card Rail
   10.4 Label Band
   10.5 Battery Ring
   10.6 Check Start & Offers
11. Inner Pages
   11.1 Build Details
   11.2 About
   11.3 Crew
   11.4 FAQ & Contact
12. Studio Pages
   12.1 Services & Details
   12.2 Quote Form
   12.3 Film Library
   12.4 Tuning Page
   12.5 Battery Estimator
   12.6 Booking Wizard
   12.7 Detail Builder & Plans
13. Shop
   13.1 Product Cards
   13.2 Shop Grid
   13.3 Product Page
   13.4 Cart & Checkout
14. Journal, Account & Utility Pages
   14.1 Journal
   14.2 My Garage
   14.3 Sign In & Register
   14.4 Coming Soon & 404
15. Subheader
16. Footer
*/

/*======================
1. General
========================*/
:root {
  /* brand (the same in both themes) */
  --rv-white: #FFFFFF;
  --rv-orange: #1EC8E8;
  --rv-orange-rgb: 30, 200, 232;
  --rv-orange-deep: #249DB3;
  --rv-orange-ink: #258EA1;
  --rv-night: #0A0A0A;
  --rv-night-rgb: 10, 10, 10;
  --rv-coal: #161616;
  --rv-band: #1E1E1E;
  --rv-panel: #2A2A2A;
  --rv-steel: #3B3B3B;
  --rv-paper: #FFFFFF;
  --rv-red: #D0342C;
  /* semantic: the white studio is the default; [data-theme="dark"] turns the white grounds to coal */
  --rv-bg: #FFFFFF;
  --rv-bg-rgb: 255, 255, 255;
  --rv-surface: #FFFFFF;
  --rv-grey: #F3F3F3;
  --rv-grey-2: #F7F7F7;
  --rv-heading: #0A0A0A;
  --rv-heading-rgb: 10, 10, 10;
  --rv-text: #636363;
  --rv-muted: #6E6E6E;
  --rv-line: #E3E3E3;
  --rv-line-2: #CFCFCF;
  --rv-field: #F3F3F3;
  --rv-btn-bg: #EDEDED;
  --rv-btn-ink: #0A0A0A;
  --rv-ghost: rgba(10, 10, 10, 0.13);
  --rv-accent-text: #258EA1;
  --rv-ok: #1F8A4C;
  --rv-ok-text: #1C7A44;
  --rv-shadow: 0 18px 44px rgba(10, 10, 10, 0.1);
  --rv-shadow-lg: 0 30px 70px rgba(10, 10, 10, 0.18);
  --rv-ease: cubic-bezier(0.23, 1, 0.32, 1);
  /* type */
  --rv-ff-display: 'Oxanium', 'Arial Narrow', Arial, sans-serif;
  --rv-ff-body: 'Sarabun', 'Helvetica Neue', Arial, sans-serif;
  --rv-fs-h1: clamp(46px, 6.4vw, 100px);
  --rv-fs-h2: clamp(30px, 3.15vw, 46px);
  --rv-fs-h3: clamp(22px, 2vw, 30px);
  --rv-fs-h4: 21px;
  --rv-fs-h5: 18px;
  --rv-fs-h6: 15px;
  /* the card accent: the orange, until a wrap swatch takes over on hover */
  --rv-acc: var(--rv-orange);
  /* WebGL colours (per section below) */
  --gl-1: #FFFFFF;
  --gl-2: #1EC8E8;
  --gl-3: #9A9A9A;
  --gl-alpha: 0.5;
}
[data-theme="dark"] {
  --rv-bg: #121212;
  --rv-bg-rgb: 18, 18, 18;
  --rv-surface: #1A1A1A;
  --rv-grey: #1A1A1A;
  --rv-grey-2: #202020;
  --rv-heading: #FFFFFF;
  --rv-heading-rgb: 255, 255, 255;
  --rv-text: #A3A3A3;
  --rv-muted: #949494;
  --rv-line: rgba(255, 255, 255, 0.1);
  --rv-line-2: rgba(255, 255, 255, 0.2);
  --rv-field: #222222;
  --rv-btn-bg: #3B3B3B;
  --rv-btn-ink: #FFFFFF;
  --rv-ghost: rgba(255, 255, 255, 0.14);
  --rv-accent-text: #2DCBEA;
  --rv-ok: #49C17A;
  --rv-ok-text: #5BCB88;
  --rv-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
  --rv-shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.55);
  --gl-1: #121212;
  --gl-alpha: 0.42;
}
/* bands that stay night in both themes: the heroes, the base's black sections, the footer */
.is-night,
.is-coal {
  --rv-heading: #FFFFFF;
  --rv-heading-rgb: 255, 255, 255;
  --rv-text: #9A9A9A;
  --rv-muted: #8E8E8E;
  --rv-line: rgba(255, 255, 255, 0.1);
  --rv-line-2: rgba(255, 255, 255, 0.2);
  --rv-surface: #1E1E1E;
  --rv-grey: #1E1E1E;
  --rv-grey-2: #232323;
  --rv-field: rgba(255, 255, 255, 0.06);
  --rv-btn-bg: #3B3B3B;
  --rv-btn-ink: #FFFFFF;
  --rv-ghost: rgba(255, 255, 255, 0.16);
  --rv-accent-text: #2DCBEA;
  --rv-ok-text: #5BCB88;
  --gl-1: #0A0A0A;
  --gl-alpha: 0.42;
  background-color: var(--rv-night);
  color: var(--rv-text);
}
.is-coal {
  --rv-surface: #252525;
  --rv-grey: #252525;
  --gl-1: #161616;
  background-color: var(--rv-coal);
}
/* the base's orange band: black type on the orange */
.is-orange {
  --rv-heading: #0A0A0A;
  --rv-heading-rgb: 10, 10, 10;
  --rv-text: rgba(10, 10, 10, 0.82);
  --rv-muted: rgba(10, 10, 10, 0.72);
  --rv-line: rgba(10, 10, 10, 0.18);
  --rv-line-2: rgba(10, 10, 10, 0.3);
  --rv-field: rgba(255, 255, 255, 0.24);
  --rv-btn-bg: #0A0A0A;
  --rv-btn-ink: #FFFFFF;
  --rv-ghost: rgba(10, 10, 10, 0.16);
  --rv-accent-text: #0A0A0A;
  --rv-acc: #0A0A0A;
  background-color: var(--rv-orange);
  color: var(--rv-text);
}
/* a white panel laid on a photograph keeps the light studio's ink in both themes */
.rv-on-paper {
  --rv-heading: #0A0A0A;
  --rv-heading-rgb: 10, 10, 10;
  --rv-text: #636363;
  --rv-muted: #6E6E6E;
  --rv-line: #E3E3E3;
  --rv-line-2: #CFCFCF;
  --rv-surface: #FFFFFF;
  --rv-field: #F3F3F3;
  --rv-btn-bg: #EDEDED;
  --rv-btn-ink: #0A0A0A;
  --rv-accent-text: #258EA1;
  background-color: var(--rv-paper);
  color: var(--rv-text);
}
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--rv-bg);
  color: var(--rv-text);
  font-family: var(--rv-ff-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s ease;
}
body.oc-open {
  overflow: hidden;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--rv-ease), background-color 0.3s var(--rv-ease);
}
a:hover {
  color: var(--rv-accent-text);
}
::selection {
  background: var(--rv-orange);
  color: var(--rv-night);
}
:focus-visible {
  outline: 2px solid var(--rv-orange);
  outline-offset: 3px;
}

/*----- 1.1 Typography -----*/
/* the base's voice: Oxanium semi-bold capitals for every heading, label and button; Sarabun for the text */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-weight: 600;
  text-transform: uppercase;
}
h1 {
  font-size: var(--rv-fs-h1);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
h2 {
  font-size: var(--rv-fs-h2);
  line-height: 1.07;
  letter-spacing: -0.005em;
}
h3 {
  font-size: var(--rv-fs-h3);
  line-height: 1.18;
}
h4 {
  font-size: var(--rv-fs-h4);
  line-height: 1.22;
  letter-spacing: 0.01em;
}
h5 {
  font-size: var(--rv-fs-h5);
  line-height: 1.3;
  letter-spacing: 0.02em;
}
h6 {
  font-size: var(--rv-fs-h6);
  line-height: 1.35;
  letter-spacing: 0.04em;
}
/* a heading at its outline level that looks like another level */
.rv-h1 {
  font-size: var(--rv-fs-h1);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.rv-h2 {
  font-size: var(--rv-fs-h2);
  line-height: 1.07;
  letter-spacing: -0.005em;
}
.rv-h3 {
  font-size: var(--rv-fs-h3);
  line-height: 1.18;
  letter-spacing: 0;
}
.rv-h4 {
  font-size: var(--rv-fs-h4);
  line-height: 1.22;
  letter-spacing: 0.01em;
}
.rv-h5 {
  font-size: var(--rv-fs-h5);
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.rv-h6 {
  font-size: var(--rv-fs-h6);
  line-height: 1.35;
  letter-spacing: 0.04em;
}
/* an accent word in a title: the base's outline capitals */
h1 em,
h2 em,
h3 em,
.rv-h2 em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1px var(--rv-heading);
}
/* set lines: a title's lines never re-wrap */
.line {
  display: block;
  white-space: nowrap;
}
p {
  margin: 0 0 18px;
}
p:last-child {
  margin-bottom: 0;
}
.rv-lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--rv-text);
}
.rv-caps {
  font-family: var(--rv-ff-display);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rv-num {
  font-family: var(--rv-ff-display);
  font-variant-numeric: lining-nums tabular-nums;
}
.rv-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* the base's giant outline word: stroked capitals, no fill */
.rv-ghost {
  display: block;
  color: transparent;
  font-family: var(--rv-ff-display);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  -webkit-text-stroke: 1px var(--rv-ghost);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
/* the orange tick before a small capitals label */
.rv-tick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.rv-tick::before {
  content: "";
  flex-shrink: 0;
  width: 2px;
  height: 0.95em;
  background: var(--rv-acc);
  transition: background-color 0.4s ease;
}
/* word masks for the R3 title rise: padded on every side so no letter is cut */
.rv-words .w {
  display: inline-block;
  overflow: hidden;
  padding: 0.14em 0.08em 0.2em;
  margin: -0.14em -0.08em -0.2em;
  vertical-align: top;
}
.rv-words .w > span {
  display: inline-block;
}

/*----- 1.2 Spacing & Grounds -----*/
.sec-pt-130 {
  padding-top: 130px;
}
.sec-pb-130 {
  padding-bottom: 130px;
}
.sec-pt-90 {
  padding-top: 90px;
}
.sec-pb-90 {
  padding-bottom: 90px;
}
.rv-bg-grey {
  background-color: var(--rv-grey);
}
/* a working panel: forms, summaries, wizards */
.rv-panel {
  padding: 40px 42px;
  background: var(--rv-surface);
  box-shadow: 0 0 0 1px var(--rv-line), var(--rv-shadow);
}
.rv-panel.is-night {
  background: var(--rv-band);
  box-shadow: none;
}
.rv-panel h2,
.rv-panel h3 {
  margin-bottom: 20px;
}
/* photo band: one style everywhere (cover photo under a night wash from the copy side, light copy) */
.rv-photo-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--rv-night);
  --rv-heading: #FFFFFF;
  --rv-text: rgba(255, 255, 255, 0.82);
  --rv-muted: rgba(255, 255, 255, 0.7);
  --rv-accent-text: #2DCBEA;
  --rv-line: rgba(255, 255, 255, 0.16);
  --rv-line-2: rgba(255, 255, 255, 0.28);
  --rv-btn-bg: #3B3B3B;
  --rv-btn-ink: #FFFFFF;
  --rv-ghost: rgba(255, 255, 255, 0.2);
  color: var(--rv-text);
}
.rv-photo-band > .band-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rv-photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.7) 46%, rgba(10, 10, 10, 0.18) 100%);
}
.rv-photo-band.is-centre::after {
  background: rgba(10, 10, 10, 0.62);
}

/*----- 1.3 Section Titles -----*/
/* the base's section head: a small capitals eyebrow, the big capitals title, a quiet lead */
.rv-title {
  margin-bottom: 60px;
}
.rv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.rv-eyebrow::before {
  content: "";
  width: 2px;
  height: 12px;
  background: var(--rv-orange);
}
.rv-title h2,
.rv-title .rv-h2 {
  max-width: 900px;
}
.rv-title .rv-lead {
  max-width: 640px;
  margin: 22px 0 0;
}
.rv-title.text-center h2,
.rv-title.text-center .rv-h2,
.rv-title.text-center .rv-lead {
  margin-left: auto;
  margin-right: auto;
}
.rv-title.is-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.rv-title.is-split .rv-lead {
  max-width: 480px;
  margin: 0;
}

/*----- 1.4 Buttons & Links -----*/
/* the base's button: a grey face with a solid orange edge on its left, capitals and a plus or an arrow;
   house physics: the face turns orange and lifts, the arrow slides out and its twin slides in */
.rv-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 56px;
  padding: 0 30px 0 32px;
  border: 0;
  border-radius: 0;
  background: var(--rv-btn-bg);
  color: var(--rv-btn-ink);
  font-family: var(--rv-ff-display);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s var(--rv-ease), box-shadow 0.35s var(--rv-ease), transform 0.35s var(--rv-ease);
}
.rv-btn::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: 4px;
  background: var(--rv-orange);
  transition: width 0.45s var(--rv-ease);
}
.rv-btn i {
  position: relative;
  font-size: 12px;
  transition: transform 0.4s var(--rv-ease), opacity 0.3s ease;
}
.rv-btn i.fa-plus {
  order: -1;
  font-size: 11px;
}
.rv-btn i.fa-arrow-right::after {
  content: "\f061";
  position: absolute;
  left: -24px;
  top: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.rv-btn:hover {
  color: var(--rv-night);
  box-shadow: 0 14px 30px rgba(var(--rv-orange-rgb), 0.28);
  transform: translateY(-2px);
}
.rv-btn:hover::before {
  width: 100%;
}
.rv-btn:hover i.fa-plus {
  transform: rotate(90deg);
}
.rv-btn:hover i.fa-arrow-right {
  transform: translateX(24px);
}
.rv-btn:hover i.fa-arrow-right::after {
  opacity: 1;
}
.rv-btn:hover i.fa-arrow-right::before {
  opacity: 0;
}
/* the orange face (one call to action a section) */
.rv-btn.is-orange {
  background: var(--rv-orange);
  color: var(--rv-night);
}
.rv-btn.is-orange::before {
  background: var(--rv-night);
}
.rv-btn.is-orange:hover {
  color: #FFFFFF;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}
.rv-btn.is-sm {
  height: 46px;
  padding: 0 20px 0 22px;
  font-size: 12.5px;
}
.rv-btn.is-block {
  width: 100%;
}
.rv-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
/* the square arrow button (sliders, the stage's call): a grey square, the orange edge on its left */
.rv-square-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 76px;
  height: 56px;
  border: 0;
  background: var(--rv-btn-bg);
  color: var(--rv-btn-ink);
  font-size: 16px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s var(--rv-ease);
}
.rv-square-btn::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: 4px;
  background: var(--rv-orange);
  transition: width 0.45s var(--rv-ease);
}
.rv-square-btn:hover {
  color: var(--rv-night);
}
.rv-square-btn:hover::before {
  width: 100%;
}
.rv-square-btn.is-orange {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}
.rv-square-btn.swiper-button-disabled {
  opacity: 0.4;
  cursor: default;
}
/* "view more": the base's plus before the capitals, the plus turns on hover */
.rv-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rv-more i {
  color: var(--rv-acc);
  font-size: 11px;
  transition: transform 0.4s var(--rv-ease), color 0.4s ease;
}
.rv-more:hover {
  color: var(--rv-accent-text);
}
.rv-more:hover i {
  transform: rotate(90deg);
}
.rv-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rv-link i {
  color: var(--rv-accent-text);
  transition: transform 0.35s var(--rv-ease);
}
.rv-link:hover i {
  transform: translateX(5px);
}
.rv-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
}

/*----- 1.5 Forms -----*/
.rv-field {
  position: relative;
  margin-bottom: 22px;
}
/* the base's form: small capitals labels over a field with a single line under it */
.rv-field label,
.rv-flabel {
  display: block;
  margin-bottom: 8px;
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rv-input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 46px 0 18px;
  border: 0;
  border-bottom: 2px solid var(--rv-line-2);
  border-radius: 0;
  background: var(--rv-field);
  color: var(--rv-heading);
  font-family: var(--rv-ff-body);
  font-size: 16.5px;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
textarea.rv-input {
  height: 160px;
  padding-top: 16px;
  resize: vertical;
}
.rv-input::placeholder {
  color: var(--rv-muted);
}
.rv-input:focus {
  border-bottom-color: var(--rv-orange);
  outline: 0;
}
.rv-input.is-invalid {
  border-bottom-color: var(--rv-red);
}
.rv-input[type="date"] {
  color-scheme: light;
}
[data-theme="dark"] .rv-input[type="date"],
.is-night .rv-input[type="date"],
.is-coal .rv-input[type="date"] {
  color-scheme: dark;
}
.rv-field > i {
  position: absolute;
  right: 18px;
  top: 47px;
  color: var(--rv-accent-text);
  font-size: 13px;
  pointer-events: none;
}
.rv-field.is-area > i {
  top: 50px;
}
.form-status {
  min-height: 0;
  margin: 14px 0 0;
  font-size: 16px;
  color: var(--rv-muted);
}
.form-status.is-ok {
  color: var(--rv-ok-text);
}
.form-status.is-error {
  color: var(--rv-accent-text);
}
.rv-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  cursor: pointer;
}
.rv-check input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  accent-color: var(--rv-orange);
}
/* a native range in the base's colours */
.rv-range {
  width: 100%;
  height: 26px;
  margin: 6px 0 4px;
  background: transparent;
  accent-color: var(--rv-orange);
  cursor: pointer;
}
.range-ends {
  display: flex;
  justify-content: space-between;
  color: var(--rv-muted);
  font-family: var(--rv-ff-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/*----- 1.6 Shared Pieces -----*/
/* buttons start bare; each control draws its own face */
button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.rv-social {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rv-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--rv-grey);
  color: var(--rv-heading);
  font-size: 13px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--rv-ease);
}
.rv-social a:hover {
  background: var(--rv-orange);
  color: var(--rv-night);
  transform: translateY(-3px);
}
.is-night .rv-social a {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}
/* a round portrait beside a name */
.rv-face {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
/* overlapping faces + a count */
.rv-faces {
  display: inline-flex;
  align-items: center;
}
.rv-faces img {
  width: 46px;
  height: 46px;
  margin-left: -12px;
  border: 3px solid var(--rv-bg);
  border-radius: 50%;
  object-fit: cover;
}
.rv-faces img:first-child {
  margin-left: 0;
}
.rv-faces .more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-left: -12px;
  border: 3px solid var(--rv-bg);
  border-radius: 50%;
  background: var(--rv-orange);
  color: var(--rv-night);
  font-family: var(--rv-ff-display);
  font-size: 12.5px;
  font-weight: 700;
}
.rv-bg-grey .rv-faces img,
.rv-bg-grey .rv-faces .more {
  border-color: var(--rv-grey);
}
.is-night .rv-faces img,
.is-night .rv-faces .more,
.rv-photo-band .rv-faces img,
.rv-photo-band .rv-faces .more {
  border-color: var(--rv-night);
}
.is-coal .rv-faces img,
.is-coal .rv-faces .more {
  border-color: var(--rv-coal);
}
/* the base's play button: a grey square with the orange edge */
.rv-play {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  background: rgba(59, 59, 59, 0.85);
  color: #FFFFFF;
  font-size: 22px;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s ease, transform 0.4s var(--rv-ease);
}
.rv-play::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: 4px;
  background: var(--rv-orange);
  transition: width 0.45s var(--rv-ease);
}
.rv-play i {
  margin-left: 4px;
}
.rv-play:hover {
  color: var(--rv-night);
  transform: scale(1.05);
}
.rv-play:hover::before {
  width: 100%;
}
/* progress line (bay load, battery health, the plan meter): filled by the engines */
.rv-meter {
  position: relative;
  height: 3px;
  background: var(--rv-line-2);
}
.rv-meter span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--rv-orange);
  transition: width 1.2s var(--rv-ease);
}
.rv-stars {
  display: inline-flex;
  gap: 3px;
  color: var(--rv-orange);
  font-size: 12px;
}
/* a small capitals tag (New, Sale, In Warranty) */
.rv-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--rv-accent-text);
  font-family: var(--rv-ff-display);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rv-tag.is-ok {
  color: var(--rv-ok-text);
}
/* a status dot before "Open now" lines */
.rv-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--rv-muted);
  vertical-align: middle;
}
.is-open .rv-dot,
.rv-dot.is-open {
  background: var(--rv-ok);
  box-shadow: 0 0 0 4px rgba(31, 138, 76, 0.18);
}
.rv-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-left: 4px solid var(--rv-orange);
  background: var(--rv-night);
  color: #FFFFFF;
  font-size: 16px;
  box-shadow: var(--rv-shadow-lg);
  transform: translate(-50%, 160%);
  transition: transform 0.5s var(--rv-ease);
}
.rv-toast i {
  color: var(--rv-orange);
}
.rv-toast.is-shown {
  transform: translate(-50%, 0);
}
.rv-back-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-left: 4px solid var(--rv-orange);
  background: var(--rv-steel);
  color: #FFFFFF;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s var(--rv-ease), background-color 0.3s ease;
}
.rv-back-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.rv-back-top:hover {
  background: var(--rv-orange);
  color: var(--rv-night);
}
/* WebGL layers sit under a section's content */
.rv-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.rv-gl.is-on {
  opacity: 1;
}
/* label / value rows (hours, specs, plan contents, totals) */
.rv-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rv-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rv-line);
}
.rv-rows li > span {
  color: var(--rv-text);
}
.rv-rows li > b {
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-weight: 600;
  text-align: right;
}
.rv-rows li.is-today > span,
.rv-rows li.is-today > b {
  color: var(--rv-accent-text);
}
/* the base's corner squares: four small orange squares at the corners of an overlap panel */
.rv-corners {
  position: relative;
}
.rv-corners::after {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(var(--rv-acc), var(--rv-acc)) 0 0 / 7px 7px no-repeat,
    linear-gradient(var(--rv-acc), var(--rv-acc)) 100% 0 / 7px 7px no-repeat,
    linear-gradient(var(--rv-acc), var(--rv-acc)) 0 100% / 7px 7px no-repeat,
    linear-gradient(var(--rv-acc), var(--rv-acc)) 100% 100% / 7px 7px no-repeat;
}
/* a small product beside its name and price (sidebars, the article) */
.product-mini {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rv-line);
  color: var(--rv-heading);
}
.product-mini img {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  object-fit: cover;
  background: #F2F2F2;
}
.product-mini > span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.product-mini small {
  color: var(--rv-accent-text);
  font-family: var(--rv-ff-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.product-mini b {
  font-family: var(--rv-ff-display);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
}
.product-mini em {
  font-style: normal;
  font-size: 15px;
}

/*----- 1.7 Spray Pass & Wrap Swatch -----*/
/* Spray Pass: each photograph is uncovered by two feathered spray-gun passes (main.js sets the mask while it
   runs, then clears it); the fresh coat looks wet for a moment and settles */
.rv-spray {
  position: relative;
  overflow: hidden;
}
.rv-spray img {
  display: block;
}
/* the wrap swatch hover: a card's accent (tick, edge, corners, price) takes another film colour and the
   film's chip slides in at its corner */
.w-volt-orange { --rv-wrap: #1EC8E8; }
.w-burnt-copper { --rv-wrap: #317997; }
.w-nardo-grey { --rv-wrap: #8A8D8F; }
.w-battleship { --rv-wrap: #5E6366; }
.w-liquid-silver { --rv-wrap: #C9CDD1; }
.w-graphite { --rv-wrap: #3C3F42; }
.w-gloss-black { --rv-wrap: #141516; }
.w-matte-black { --rv-wrap: #1E1F20; }
.w-chalk { --rv-wrap: #E6E3DC; }
.w-midnight { --rv-wrap: #1E2C4C; }
.w-riviera { --rv-wrap: #0A9AD0; }
.w-racing-green { --rv-wrap: #1F4A33; }
.w-acid-green { --rv-wrap: #94C93A; }
.w-candy-red { --rv-wrap: #219289; }
.w-satin-violet { --rv-wrap: #4B2E6B; }
.w-aurora-shift { --rv-wrap: #5B2A86; }
.rv-wrap-hover {
  position: relative;
}
.rv-wrap-hover:hover,
.rv-wrap-hover:focus-within {
  --rv-acc: var(--rv-wrap, var(--rv-orange));
}
.wrap-chip {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 7px;
  background: rgba(10, 10, 10, 0.86);
  color: #FFFFFF;
  font-family: var(--rv-ff-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  clip-path: inset(0 0 0 100%);
  transform: translateX(10px);
  transition: clip-path 0.5s var(--rv-ease), transform 0.5s var(--rv-ease);
}
.wrap-chip::before {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--rv-wrap, var(--rv-orange));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.w-aurora-shift .wrap-chip::before {
  background: linear-gradient(135deg, #5B2A86, #13897F);
}
.rv-wrap-hover:hover .wrap-chip,
.rv-wrap-hover:focus-within .wrap-chip {
  clip-path: inset(0 0 0 0);
  transform: none;
}

/*======================
2. Preloader
========================*/
/* Wrap Peel: on the night panel a plate covered in satin graphite film; a corner lifts and the film peels off
   diagonally (canvas 2D, main.js), the orange V beneath; the wordmark rises under it and the panel lifts away */
.rv-preloader {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(60% 50% at 50% 46%, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 70%),
    var(--rv-night);
}
/* without JS (or once a session has seen it) the panel never shows */
.no-js .rv-preloader {
  display: none;
}
.pre-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.pre-peel {
  display: block;
  width: 240px;
  height: 240px;
}
.pre-word {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  overflow: hidden;
}
.pre-word img {
  display: block;
  width: 214px;
  height: auto;
}
.pre-line {
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--rv-ff-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/*======================
3. Header
========================*/
/* The base's header: the logo, the menu with the current item on a lighter box under an orange bar, the actions
   and the menu lines. "over" lies on the first night band with white ink; "solid" is the bar in the page's ground.
   Both turn into the solid bar once the page scrolls. */
.rv-header {
  position: relative;
  z-index: 1000;
  --hd-bar: var(--rv-surface);
  --hd-ink: var(--rv-heading);
  --hd-box: var(--rv-grey);
  --hd-icon: var(--rv-grey);
  --hd-line: var(--rv-line);
}
.rv-header .wide {
  display: flex;
  align-items: center;
  padding: 0 40px;
}
.rv-logo {
  display: inline-flex;
  flex-shrink: 0;
}
.rv-logo img {
  height: 30px;
  width: auto;
}
.rv-logo .logo-light,
[data-theme="dark"] .rv-logo .logo-main {
  display: none;
}
[data-theme="dark"] .rv-logo .logo-light {
  display: block;
}
/* over the night band the logo is always the light one */
.header-style-over:not(.is-sticky) .rv-logo .logo-main {
  display: none;
}
.header-style-over:not(.is-sticky) .rv-logo .logo-light {
  display: block;
}
.header-style-over {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.header-style-over:not(.is-sticky) {
  --hd-bar: transparent;
  --hd-ink: #FFFFFF;
  --hd-box: rgba(255, 255, 255, 0.14);
  --hd-icon: rgba(255, 255, 255, 0.12);
  --hd-line: rgba(255, 255, 255, 0.12);
}

/*----- 3.1 Top Bar -----*/
.header-top {
  height: 40px;
  background: var(--rv-night);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  overflow: visible;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: height 0.4s var(--rv-ease), opacity 0.3s ease;
}
.header-style-over:not(.is-sticky) .header-top {
  background: rgba(10, 10, 10, 0.34);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.header-top .wide {
  justify-content: space-between;
  height: 100%;
  gap: 30px;
}
.header-top .top-left,
.header-top .top-right {
  display: flex;
  align-items: center;
  gap: 26px;
}
.header-top a:hover {
  color: var(--rv-orange);
}
.header-top i {
  margin-right: 8px;
  color: var(--rv-orange);
  font-size: 12px;
}
.rv-open {
  display: inline-flex;
  align-items: center;
}
.header-top .rv-dot {
  background: rgba(255, 255, 255, 0.5);
}
.header-top .is-open .rv-dot {
  background: #49C17A;
  box-shadow: 0 0 0 4px rgba(73, 193, 122, 0.2);
}
.header-top .top-right > a {
  position: relative;
  font-family: var(--rv-ff-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.header-top .top-right > a + a::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 2px;
  height: 11px;
  background: var(--rv-orange);
  transform: translateY(-50%);
}

/*----- 3.2 Main Bar -----*/
.header-main {
  position: relative;
  background: var(--hd-bar);
  border-bottom: 1px solid var(--hd-line);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.header-main .wide {
  height: 92px;
  gap: 40px;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: var(--hd-icon);
  color: var(--hd-ink);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.header-icon:hover {
  background: var(--rv-orange);
  color: var(--rv-night);
}
/* the base's count: a small orange square beside the bag */
.header-icon .count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--rv-orange);
  color: var(--rv-night);
  font-family: var(--rv-ff-display);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.header-icon .count:empty {
  display: none;
}
.rv-theme-toggle .ti-sun,
[data-theme="dark"] .rv-theme-toggle .ti-moon {
  display: none;
}
[data-theme="dark"] .rv-theme-toggle .ti-sun {
  display: inline-block;
}
.header-actions .header-btn {
  margin-left: 10px;
}
.header-style-over:not(.is-sticky) .header-btn {
  --rv-btn-bg: rgba(255, 255, 255, 0.14);
  --rv-btn-ink: #FFFFFF;
}
/* the base's menu lines: three lines of three lengths, always shown (they open the side panel of every page) */
.rv-menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  width: 44px;
  height: 44px;
  margin-left: 6px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.rv-menu-toggle span {
  display: block;
  width: 30px;
  height: 2px;
  background: var(--hd-ink);
  transition: width 0.35s var(--rv-ease), background-color 0.3s ease;
}
.rv-menu-toggle span:nth-child(2) {
  width: 20px;
}
.rv-menu-toggle span:nth-child(3) {
  width: 25px;
}
.rv-menu-toggle:hover span {
  width: 30px;
  background: var(--rv-orange);
}

/*----- 3.3 Main Menu -----*/
.rv-nav {
  align-self: stretch;
}
.rv-nav > ul {
  display: flex;
  align-items: stretch;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rv-nav li {
  position: relative;
}
/* each top item is a box; the current and hovered ones take the lighter box and the orange bar on top */
.rv-nav > ul > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  padding: 0 20px;
  color: var(--hd-ink);
  font-family: var(--rv-ff-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.rv-nav > ul > li > a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--rv-orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--rv-ease);
}
.rv-nav > ul > li > a i {
  font-size: 8px;
  opacity: 0.6;
  transition: transform 0.3s var(--rv-ease);
}
.rv-nav > ul > li:hover > a,
.rv-nav > ul > li.active > a {
  background: var(--hd-box);
  color: var(--hd-ink);
}
.rv-nav > ul > li:hover > a::before,
.rv-nav > ul > li.active > a::before {
  transform: scaleX(1);
}
.rv-nav > ul > li:hover > a i {
  transform: rotate(180deg);
}
.rv-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  z-index: 50;
  min-width: 250px;
  margin: 0;
  padding: 16px 0;
  list-style: none;
  border-top: 3px solid var(--rv-orange);
  background: var(--rv-surface);
  box-shadow: var(--rv-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--rv-ease), transform 0.35s var(--rv-ease), visibility 0.3s;
}
/* a bridge over the gap, so the menu stays open while the pointer crosses it */
.rv-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.rv-nav li:hover > .sub-menu,
.rv-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.rv-nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 26px;
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.3s var(--rv-ease), padding 0.35s var(--rv-ease);
}
.rv-nav .sub-menu a i {
  font-size: 8px;
  color: var(--rv-muted);
}
.rv-nav .sub-menu li:hover > a,
.rv-nav .sub-menu li.active > a {
  padding-left: 34px;
  color: var(--rv-accent-text);
}
.rv-nav .sub-menu .sub-menu {
  top: -19px;
  left: 100%;
}
.rv-nav .sub-menu .sub-menu::before {
  left: -12px;
  right: auto;
  top: 0;
  bottom: 0;
  width: 12px;
  height: auto;
}

/*----- 3.4 Home Mega Menu -----*/
.rv-nav .has-mega {
  position: static;
}
.rv-nav .mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 50;
  width: min(1000px, calc(100vw - 60px));
  padding: 30px;
  border-top: 3px solid var(--rv-orange);
  background: var(--rv-surface);
  box-shadow: var(--rv-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity 0.3s var(--rv-ease), transform 0.35s var(--rv-ease), visibility 0.3s;
}
.rv-nav .mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.rv-nav .has-mega:hover > .mega-menu,
.rv-nav .has-mega:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mega-card {
  display: block;
  color: var(--rv-heading);
}
.mega-card .shot {
  display: block;
  overflow: hidden;
  background: var(--rv-grey);
}
.mega-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s var(--rv-ease);
}
.mega-card:hover img {
  transform: scale(1.04);
}
.mega-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
}
.mega-meta small {
  color: var(--rv-accent-text);
  font-family: var(--rv-ff-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mega-meta b {
  font-family: var(--rv-ff-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mega-card.is-current b,
.mega-card:hover b {
  color: var(--rv-accent-text);
}

/*----- 3.5 Sticky Header -----*/
.rv-header.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  animation: rv-header-in 0.6s var(--rv-ease) both;
}
.rv-header.is-sticky .header-top {
  height: 0;
  opacity: 0;
  overflow: hidden;
  border: 0;
}
.rv-header.is-sticky .header-main {
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.14);
}
.rv-header.is-sticky .header-main .wide {
  height: 76px;
}
.rv-header-spacer {
  display: none;
}
.rv-header-spacer.is-on {
  display: block;
}
@keyframes rv-header-in {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/*======================
4. Offcanvas Menu
========================*/
.rv-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  background: var(--rv-surface);
  transform: translateX(105%);
  transition: transform 0.6s var(--rv-ease), box-shadow 0.6s var(--rv-ease);
  overflow-y: auto;
}
/* the shadow only while open: parked off the right edge it would still bleed into the page */
.rv-offcanvas.open {
  box-shadow: var(--rv-shadow-lg);
  transform: none;
}
.rv-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(10, 10, 10, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.rv-offcanvas-overlay.open {
  opacity: 1;
  visibility: visible;
}
.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  border-bottom: 1px solid var(--rv-line);
}
.offcanvas-head .rv-logo img {
  height: 28px;
}
.offcanvas-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  background: var(--rv-grey);
  color: var(--rv-heading);
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--rv-ease);
}
.offcanvas-close:hover {
  background: var(--rv-orange);
  color: var(--rv-night);
  transform: rotate(90deg);
}
.offcanvas-nav {
  flex: 1;
  padding: 14px 32px 30px;
}
.oc-group {
  border-bottom: 1px solid var(--rv-line);
}
.oc-group > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: none;
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.oc-group > button i {
  color: var(--rv-accent-text);
  font-size: 12px;
  transition: transform 0.35s var(--rv-ease);
}
.oc-group.is-open > button i {
  transform: rotate(45deg);
}
.oc-group ul {
  display: none;
  padding: 0 0 16px;
}
.oc-group.is-open ul {
  display: block;
}
.oc-group ul a {
  display: block;
  padding: 7px 0 7px 16px;
  border-left: 2px solid var(--rv-line);
  color: var(--rv-text);
  font-size: 16px;
}
.oc-group ul a:hover,
.oc-group ul a.is-current {
  border-color: var(--rv-orange);
  color: var(--rv-accent-text);
}
.offcanvas-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px 32px 34px;
}
.offcanvas-foot .label {
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
}
.oc-phone {
  color: #FFFFFF;
  font-family: var(--rv-ff-display);
  font-size: 26px;
  font-weight: 600;
}
.oc-mail {
  color: var(--rv-text);
}
.oc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.offcanvas-foot .header-icon {
  --hd-icon: rgba(255, 255, 255, 0.1);
  --hd-ink: #FFFFFF;
}

/*======================
5. Custom Select
========================*/
/* Native selects stay in the form (value, name, submit); a styled button and
   listbox are drawn over them and keep them in sync. */
.rv-select {
  position: relative;
}
.rv-select > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0 !important;
}
.rv-select .select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  height: 58px;
  padding: 0 20px;
  border: 1px solid var(--rv-line-2);
  background: var(--rv-surface);
  font-size: 15px;
  text-align: left;
  color: var(--rv-heading);
  transition: border-color 0.3s var(--rv-ease);
}
.rv-select.is-open .select-button,
.rv-select .select-button:hover {
  border-color: var(--rv-orange);
}
.rv-select .select-button .select-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rv-select .select-button i {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--rv-accent-text);
  transition: transform 0.35s var(--rv-ease);
}
.rv-select.is-open .select-button i {
  transform: rotate(180deg);
}
.rv-select .select-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 100%;
  max-height: 340px;
  margin: 0;
  padding: 10px 0;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  background-color: var(--rv-surface);
  border-top: 3px solid var(--rv-orange);
  box-shadow: var(--rv-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--rv-ease), transform 0.3s var(--rv-ease), visibility 0.3s;
}
.rv-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 8px);
  border-top: 0;
  border-bottom: 2px solid var(--rv-orange);
  transform: translateY(-10px);
}
.rv-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.rv-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 20px;
  font-size: 15px;
  color: var(--rv-heading);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--rv-ease), color 0.2s var(--rv-ease);
}
.rv-select .select-option .option-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rv-accent-text);
}
.rv-select .select-option .option-meta.is-none {
  color: var(--rv-muted);
}
.rv-select .select-option.is-focused,
.rv-select .select-option:hover {
  background-color: var(--rv-grey);
}
.rv-select .select-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.rv-select .select-option.is-selected {
  color: var(--rv-accent-text);
}
.rv-select .select-option.is-selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--rv-accent-text);
}
.rv-select.is-compact .select-button {
  height: 46px;
  border: 0;
  background: var(--rv-grey);
  font-size: 14px;
  font-weight: 600;
}

/*======================
6. 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. */
.rv-lang {
  position: relative;
  flex-shrink: 0;
}
.rv-lang .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  font-family: var(--rv-ff-display);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.rv-lang .lang-btn:hover,
.rv-lang .lang-btn[aria-expanded="true"] {
  background: #FFFFFF;
  color: var(--rv-night);
}
.rv-lang .lang-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.rv-lang .lang-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.rv-lang .flag {
  flex-shrink: 0;
  width: 22px;
  height: 16px;
  border-radius: 0;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.rv-lang.is-icon .lang-btn {
  height: 46px;
  padding: 0 15px;
  background: var(--rv-grey);
  color: var(--rv-heading);
}
.rv-lang.is-icon .lang-btn:hover,
.rv-lang.is-icon .lang-btn[aria-expanded="true"] {
  background: var(--rv-night);
  color: #FFFFFF;
}
.rv-lang .lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 248px;
  padding: 10px;
  border-radius: 0;
  background: var(--rv-surface);
  box-shadow: var(--rv-shadow-lg);
  font-family: var(--rv-ff-body);
  text-align: start;
  white-space: normal;
}
.rv-lang.is-up .lang-menu {
  top: auto;
  bottom: calc(100% + 12px);
}
.rv-lang.is-start .lang-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.rv-lang .lang-menu[hidden] {
  display: none;
}
.rv-lang .lang-group {
  margin: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rv-muted);
}
.rv-lang .lang-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rv-lang .lang-menu ul + .lang-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--rv-line);
}
.rv-lang .lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--rv-heading);
  font-family: var(--rv-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;
}
.rv-lang .lang-item small {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--rv-muted);
}
.rv-lang .lang-item i {
  width: 12px;
  font-size: 11px;
  color: var(--rv-accent-text);
  opacity: 0;
}
.rv-lang .lang-item:hover,
.rv-lang .lang-item[aria-pressed="true"] {
  background: var(--rv-grey);
}
.rv-lang .lang-item[aria-pressed="true"] {
  font-weight: 600;
}
.rv-lang .lang-item[aria-pressed="true"] i {
  opacity: 1;
}
.rv-lang .lang-note {
  margin: 10px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--rv-line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--rv-muted);
}

/*======================
7. Components
========================*/
/*----- 7.1 Hero Slider -----*/
/* the base's hero: a full photograph, the title centred with its giant first line, the arrows at the bottom left
   and the slide numbers at the bottom right (the current one bigger) */
.rv-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--rv-night);
}
.rv-hero .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  min-height: max(760px, 100vh);
  padding: 170px 0 150px;
  overflow: hidden;
}
.rv-hero .hero-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rv-hero .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.72) 0%, rgba(10, 10, 10, 0.12) 30%, rgba(10, 10, 10, 0.18) 62%, rgba(10, 10, 10, 0.86) 100%);
}
.rv-hero .container {
  position: relative;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-copy .rv-eyebrow {
  color: #FFFFFF;
}
.hero-title {
  color: #FFFFFF;
}
.hero-title .line {
  font-size: clamp(56px, 10.2vw, 156px);
  line-height: 0.92;
  letter-spacing: -0.045em;
}
.hero-title .line.is-sub {
  margin-top: 0.42em;
  font-size: clamp(24px, 2.9vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.hero-copy .rv-btn {
  margin-top: 40px;
  --rv-btn-bg: rgba(59, 59, 59, 0.86);
  --rv-btn-ink: #FFFFFF;
}
.hero-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 44px;
  z-index: 5;
  pointer-events: none;
}
.hero-controls .wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 46px;
}
.hero-arrows {
  display: flex;
  gap: 18px;
  pointer-events: auto;
}
.hero-arrows button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #FFFFFF;
  font-size: 19px;
  transition: color 0.3s ease, transform 0.35s var(--rv-ease);
}
.hero-arrows button:hover {
  color: var(--rv-orange);
}
.hero-arrows .hero-prev:hover {
  transform: translateX(-4px);
}
.hero-arrows .hero-next:hover {
  transform: translateX(4px);
}
.hero-numbers {
  display: flex;
  align-items: baseline;
  gap: 22px;
  pointer-events: auto;
}
.hero-numbers button {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--rv-ff-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: color 0.3s ease, font-size 0.4s var(--rv-ease);
}
.hero-numbers button.is-on {
  color: #FFFFFF;
  font-size: 22px;
}
.hero-numbers button:hover {
  color: var(--rv-orange);
}
/* the progress line between the first and the last number (Home 02) */
.hero-progress {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #FFFFFF;
  font-family: var(--rv-ff-display);
  font-size: 13px;
  font-weight: 600;
  pointer-events: auto;
}
.hero-progress .bar {
  position: relative;
  width: 200px;
  height: 2px;
  background: rgba(255, 255, 255, 0.24);
}
.hero-progress .bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 33%;
  background: var(--rv-orange);
  transition: width 0.8s var(--rv-ease);
}

/*----- 7.2 Features -----*/
/* the base's feature grid: a title on the left, the features in columns, each with its orange tick */
.features-title {
  max-width: 300px;
}
.feature-item h3 {
  margin-bottom: 14px;
}
.feature-item p {
  margin: 0;
  max-width: 240px;
  font-size: 15.5px;
}
.feature-item .wrap-chip {
  top: -6px;
  right: auto;
  left: 160px;
}

/*----- 7.3 Video Band -----*/
.rv-video-band {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 620px;
  background: var(--rv-night);
}
.rv-video-band .band-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rv-video-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10, 10, 10, 0.32);
}

/*----- 7.4 Post Rows -----*/
/* the base's latest posts: the date, the two categories and the title in one row between hairlines */
.post-rows {
  border-top: 1px solid var(--rv-line-2);
}
.post-row {
  display: grid;
  grid-template-columns: 80px 150px 1fr 44px;
  align-items: center;
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rv-line-2);
}
.pr-date small {
  display: block;
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pr-date b {
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 22px;
  font-weight: 600;
}
.pr-cats {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pr-cats a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pr-cats a + a::before {
  content: "";
  width: 2px;
  height: 10px;
  background: var(--rv-orange);
}
.post-row h3 a:hover {
  color: var(--rv-accent-text);
}
.pr-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--rv-heading);
  transition: color 0.3s ease, transform 0.35s var(--rv-ease);
}
.pr-go:hover {
  color: var(--rv-orange);
  transform: translateX(4px);
}

/*----- 7.5 Care Plan Columns -----*/
/* the base's leasing plans: four columns over a dark photograph, the featured one on a lighter panel */
.plan-toggle {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.08);
}
.plan-toggle button {
  height: 48px;
  padding: 0 22px;
  color: var(--rv-text);
  font-family: var(--rv-ff-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.plan-toggle button small {
  margin-left: 6px;
  color: var(--rv-orange);
  font-size: 11px;
}
.plan-toggle button.is-on {
  background: var(--rv-orange);
  color: var(--rv-night);
}
.plan-toggle button.is-on small {
  color: var(--rv-night);
}
.plan-col {
  height: 100%;
  padding: 46px 36px 44px;
  transition: background-color 0.4s ease;
}
.plan-col.is-featured {
  background: rgba(255, 255, 255, 0.1);
}
.plan-col:hover {
  background: rgba(255, 255, 255, 0.06);
}
.plan-col.is-featured:hover {
  background: rgba(255, 255, 255, 0.13);
}
.plan-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 12px;
  letter-spacing: 0.1em;
}
.plan-label i {
  width: 2px;
  height: 11px;
  background: var(--rv-acc);
  transition: background-color 0.4s ease;
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 26px;
  color: var(--rv-heading);
  font-size: clamp(38px, 3.2vw, 48px);
  font-weight: 600;
  line-height: 1;
}
.plan-price small {
  color: var(--rv-text);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.plan-col .rv-rows {
  margin-bottom: 30px;
}
.plan-col .rv-rows li {
  padding: 10px 0;
  font-size: 15px;
}
.plan-col .rv-rows li > b {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.plan-col .wrap-chip {
  top: 14px;
  right: 14px;
}
/* the light version on the care plans page */
.rv-plans-light .plan-col {
  background: var(--rv-grey-2);
}
.rv-plans-light .plan-col.is-featured {
  --rv-heading: #FFFFFF;
  --rv-text: #9A9A9A;
  --rv-line: rgba(255, 255, 255, 0.12);
  --rv-accent-text: #2DCBEA;
  background: var(--rv-night);
  color: var(--rv-text);
}

/*----- 7.6 Instant Quote Strip -----*/
/* the base's orange band, given a job: the instant wrap quote */
.rv-quote-strip {
  padding: 56px 0;
}
.qs-form {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr 0.9fr auto;
  align-items: end;
  gap: 22px;
}
.qs-head .rv-eyebrow {
  margin-bottom: 8px;
}
.qs-head .rv-eyebrow::before {
  background: var(--rv-night);
}
.rv-quote-strip .rv-select .select-button {
  background: rgba(255, 255, 255, 0.22);
  border-bottom-color: rgba(10, 10, 10, 0.4);
  color: var(--rv-night);
}
.rv-quote-strip .rv-select .select-button i {
  color: var(--rv-night);
}
.qs-out {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.qs-out small {
  font-size: 13px;
  font-weight: 600;
  color: rgba(10, 10, 10, 0.8);
}
.qs-out b {
  color: var(--rv-night);
  font-size: 34px;
  font-weight: 700;
}

/*----- 7.7 Overlap Panel -----*/
/* the base's overlap: a grey panel laid half over a photograph, the four orange squares at its corners */
.rv-overlap-area {
  overflow: clip;
}
.rv-overlap {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  margin-right: max(16px, calc((100vw - 1320px) / 2));
}
.rv-overlap.is-flip {
  margin-right: 0;
  margin-left: max(16px, calc((100vw - 1320px) / 2));
}
.rv-overlap .ov-photo {
  position: relative;
  grid-column: 1 / 2;
  grid-row: 1;
  height: 100%;
  min-height: 460px;
}
.rv-overlap .ov-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rv-overlap .ov-panel {
  position: relative;
  z-index: 2;
  grid-column: 2 / 3;
  grid-row: 1;
  margin-left: -6%;
  padding: 70px 64px;
  background: var(--rv-steel);
  --rv-heading: #FFFFFF;
  --rv-text: rgba(255, 255, 255, 0.72);
  --rv-btn-bg: rgba(255, 255, 255, 0.12);
  --rv-btn-ink: #FFFFFF;
  color: var(--rv-text);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.24);
}
.rv-overlap .ov-panel h2,
.rv-overlap .ov-panel h3 {
  margin-bottom: 22px;
}
.rv-overlap .ov-panel p {
  margin-bottom: 30px;
}
.rv-overlap.is-flip .ov-photo {
  grid-column: 2 / 3;
}
.rv-overlap.is-flip .ov-panel {
  grid-column: 1 / 2;
  margin-left: 0;
  margin-right: -6%;
}

/*----- 7.8 Cards -----*/
/* the service card: a photograph, the ticked capitals title, a line of text and the plus link */
.svc-card {
  display: block;
  height: 100%;
  color: var(--rv-text);
}
.svc-card .sc-img {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: var(--rv-grey);
}
.svc-card .sc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--rv-ease);
}
.svc-card:hover .sc-img img {
  transform: scale(1.05);
}
.svc-card h3 {
  margin: 26px 0 12px;
}
.svc-card h3 a:hover {
  color: var(--rv-accent-text);
}
.svc-card p {
  margin-bottom: 18px;
  font-size: 15.5px;
}
.svc-card .sc-price {
  display: block;
  margin-bottom: 14px;
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.svc-card .sc-price b {
  color: var(--rv-acc);
  transition: color 0.4s ease;
}
/* the build card (portfolio grids) */
.build-card {
  position: relative;
  display: block;
  overflow: hidden;
  color: #FFFFFF;
  background: var(--rv-night);
}
.build-card .bc-img {
  display: block;
  aspect-ratio: 4 / 3;
}
.build-card .bc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--rv-ease), opacity 0.5s ease;
}
.build-card::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0), rgba(10, 10, 10, 0.82));
  pointer-events: none;
}
.build-card .bc-cap {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.build-card .bc-cap small {
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--rv-ff-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.build-card .bc-cap b {
  font-family: var(--rv-ff-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}
.build-card:hover {
  color: #FFFFFF;
}
.build-card:hover .bc-img img {
  transform: scale(1.06);
}
.build-card .bc-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: 100%;
  height: 4px;
  background: var(--rv-acc);
  transform: scaleX(0.2);
  transform-origin: left center;
  transition: transform 0.6s var(--rv-ease), background-color 0.4s ease;
}
.build-card:hover .bc-bar {
  transform: scaleX(1);
}
/* the slider arrows of a rail: two squares at the title's right */
.rail-arrows {
  display: flex;
  gap: 10px;
}
.grid-empty {
  margin: 30px 0 0;
  color: var(--rv-muted);
}
.is-hidden,
.is-unmatched,
.is-off-family {
  display: none !important;
}
/* the review badge: the Google average and its count */
.rv-review-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.rv-review-badge > b {
  color: var(--rv-heading);
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
}
.rv-review-badge > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rv-review-badge small {
  color: var(--rv-text);
  font-size: 14px;
}

/*----- 7.9 Tabs, Chips & Choice Cards -----*/
.rv-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rv-tabs button {
  height: 46px;
  padding: 0 20px;
  background: var(--rv-grey);
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.rv-tabs button:hover {
  color: var(--rv-accent-text);
}
.rv-tabs button.is-active {
  background: var(--rv-orange);
  color: var(--rv-night);
}
.is-night .rv-tabs button,
.is-coal .rv-tabs button {
  background: rgba(255, 255, 255, 0.08);
}
/* a radio or checkbox drawn as a card: the input is visually hidden, the card shows its state */
.choice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 18px 20px 18px 22px;
  background: var(--rv-grey);
  color: var(--rv-text);
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.choice-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: transparent;
  transition: background-color 0.3s ease;
}
.choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice-card b {
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.choice-card small {
  font-size: 14px;
  line-height: 1.45;
}
.choice-card em {
  margin-top: auto;
  padding-top: 6px;
  color: var(--rv-accent-text);
  font-family: var(--rv-ff-display);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
}
.choice-card:hover {
  box-shadow: inset 0 0 0 1px var(--rv-line-2);
}
.choice-card.is-checked {
  background: var(--rv-surface);
  box-shadow: inset 0 0 0 1px var(--rv-orange);
}
.choice-card.is-checked::before {
  background: var(--rv-orange);
}
.choice-card:focus-within {
  outline: 2px solid var(--rv-orange);
  outline-offset: 2px;
}
.is-night .choice-card,
.is-coal .choice-card {
  background: rgba(255, 255, 255, 0.05);
}
.is-night .choice-card.is-checked,
.is-coal .choice-card.is-checked {
  background: rgba(255, 255, 255, 0.1);
}

/*----- 7.10 Accordion -----*/
.acc-item {
  border-bottom: 1px solid var(--rv-line);
}
.acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 0;
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 17px;
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
}
.acc-head i {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--rv-grey);
  color: var(--rv-accent-text);
  font-size: 12px;
  transition: transform 0.35s var(--rv-ease), background-color 0.3s ease, color 0.3s ease;
}
.acc-item.is-open .acc-head i {
  background: var(--rv-orange);
  color: var(--rv-night);
  transform: rotate(45deg);
}
.acc-body {
  padding: 0 60px 24px 0;
}

/*----- 7.11 Pagination & Sidebar -----*/
.rv-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 60px;
}
.rv-pager a,
.rv-pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding: 0 12px;
  background: var(--rv-grey);
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.rv-pager a:hover,
.rv-pager .is-current {
  background: var(--rv-orange);
  color: var(--rv-night);
}
.rv-sidebar .widget {
  margin-bottom: 30px;
  padding: 34px 32px;
  background: var(--rv-grey);
}
.rv-sidebar .widget > h2 {
  margin-bottom: 22px;
}
.widget-search {
  position: relative;
}
.widget-search input {
  width: 100%;
  height: 54px;
  padding: 0 56px 0 18px;
  border: 0;
  border-bottom: 2px solid var(--rv-line-2);
  background: var(--rv-surface);
  color: var(--rv-heading);
  font-family: var(--rv-ff-body);
  font-size: 16px;
}
.widget-search input:focus {
  border-bottom-color: var(--rv-orange);
  outline: 0;
}
.widget-search button {
  position: absolute;
  right: 0;
  top: 0;
  width: 54px;
  height: 54px;
  color: var(--rv-accent-text);
}
.widget-cats li + li {
  border-top: 1px solid var(--rv-line);
}
.widget-cats a,
.widget-cats button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0;
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
}
.widget-cats a span,
.widget-cats button span {
  color: var(--rv-muted);
  font-size: 13px;
}
.widget-cats a:hover,
.widget-cats button:hover,
.widget-cats button.is-active {
  color: var(--rv-accent-text);
}
.side-posts li {
  display: flex;
  align-items: center;
  gap: 16px;
}
.side-posts li + li {
  margin-top: 18px;
}
.side-posts .thumb {
  flex-shrink: 0;
  width: 82px;
  height: 70px;
  overflow: hidden;
  background: var(--rv-surface);
}
.side-posts .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.side-posts .date {
  display: block;
  margin-bottom: 4px;
  color: var(--rv-accent-text);
  font-family: var(--rv-ff-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.side-posts h3 a:hover {
  color: var(--rv-accent-text);
}
.tr-price {
  display: block;
  margin-top: 4px;
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-weight: 600;
}
.widget-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.widget-tags a {
  display: inline-flex;
  padding: 8px 14px;
  background: var(--rv-surface);
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.widget-tags a:hover {
  background: var(--rv-orange);
  color: var(--rv-night);
}
.widget-cta {
  position: relative;
  overflow: hidden;
}
.rv-sidebar .widget.widget-cta {
  background: var(--rv-night);
}
.widget-cta p {
  margin-bottom: 22px;
}

/*======================
8. Home One
========================*/
/*----- 8.1 Service Words -----*/
/* the base's technical specification: giant stacked words, the chosen one solid, the rest in outline; the chosen
   service's figures stand beside them */
.rv-services-words {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.sw-words {
  margin-top: 6px;
}
.sw-word {
  display: block;
  padding: 0;
  color: transparent;
  font-family: var(--rv-ff-display);
  font-size: clamp(54px, 6.4vw, 104px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-align: left;
  text-transform: uppercase;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.24);
  transition: color 0.5s var(--rv-ease), -webkit-text-stroke-color 0.4s ease, transform 0.5s var(--rv-ease);
}
.sw-word:hover {
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.6);
  transform: translateX(8px);
}
.sw-word.is-on {
  color: #FFFFFF;
  -webkit-text-stroke-color: #FFFFFF;
  transform: none;
}
.sw-panel h3 {
  margin-bottom: 16px;
}
.sw-panel p {
  margin-bottom: 22px;
  font-size: 16px;
}
.sw-panel .rv-rows {
  margin-bottom: 34px;
}
.sw-panel .rv-rows li {
  padding: 11px 0;
  font-size: 15.5px;
}
.sw-panel .rv-rows li > b {
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/*----- 8.2 Mosaic -----*/
/* the base's two-by-two: a panel of bars, two photographs and a fact under a ghost figure */
.mosaic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: var(--rv-night);
}
.mosaic-cell {
  position: relative;
  min-height: 440px;
  overflow: hidden;
}
.mosaic-cell.is-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 70px clamp(30px, 8vw, 130px);
  background: var(--rv-band);
}
.mosaic-cell.is-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bay-title {
  margin-bottom: 30px;
}
.bay-bars li + li {
  margin-top: 26px;
}
.bay-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
  color: #FFFFFF;
  font-family: var(--rv-ff-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bay-head b {
  font-weight: 600;
}
.mosaic-cell .rv-meter {
  height: 3px;
  background: rgba(255, 255, 255, 0.16);
}
.mosaic-cell.is-fact {
  isolation: isolate;
}
.fact-ghost {
  position: absolute;
  left: clamp(30px, 8vw, 130px);
  top: 54px;
  z-index: -1;
  font-size: clamp(60px, 6.4vw, 104px);
}
.mosaic-cell.is-fact h3 {
  max-width: 520px;
  margin: 70px 0 18px;
}
.mosaic-cell.is-fact p {
  max-width: 480px;
  margin: 0;
}

/*----- 8.3 Wrap Moment -----*/
/* one coupe on a dark stage takes each film in turn as the section scrolls: the new colour is laid from the nose
   back behind a bright squeegee line, its swatch lights in the strip and its name stands behind the car */
.rv-wrap-moment {
  overflow: clip;
}
.wm-stage {
  position: relative;
  isolation: isolate;
  overflow: clip;
  margin: 10px 0 34px;
  aspect-ratio: 1240 / 568;
  background: radial-gradient(70% 60% at 50% 62%, #1F1F1F 0%, #0A0A0A 72%);
}
.wm-canvas,
.wm-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.wm-fallback {
  object-fit: contain;
}
.wm-stage.is-live .wm-fallback {
  visibility: hidden;
}
.wm-name-big {
  position: absolute;
  left: 0;
  right: 0;
  top: 2%;
  z-index: -1;
  color: transparent;
  font-family: var(--rv-ff-display);
  font-size: clamp(60px, 9.6vw, 150px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  text-align: center;
  text-transform: uppercase;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.14);
  white-space: nowrap;
}
.wm-swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.wm-swatch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px 16px 14px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: background-color 0.4s ease;
}
.wm-swatch::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--rv-wrap);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--rv-ease);
}
.wm-chip {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: var(--rv-wrap);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.w-aurora-shift .wm-chip {
  background: linear-gradient(135deg, #5B2A86, #13897F);
}
.wm-name {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.wm-name b {
  color: #FFFFFF;
  font-family: var(--rv-ff-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wm-name small {
  color: var(--rv-text);
  font-size: 13px;
}
.wm-swatch.is-on {
  background: rgba(255, 255, 255, 0.1);
}
.wm-swatch.is-on::after {
  transform: scaleX(1);
}
.wm-foot {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}

/*----- 8.4 Builds Rail -----*/
/* the base's car slider: wide photographs with the square arrows standing over its two edges */
.rv-builds {
  overflow: clip;
}
.builds-rail {
  position: relative;
  margin: 0 auto 70px;
  max-width: 1320px;
  padding: 0 60px;
}
.builds-rail .swiper {
  overflow: visible;
}
.build-slide {
  position: relative;
  display: block;
  color: #FFFFFF;
}
.build-slide .bs-img {
  display: block;
  aspect-ratio: 2 / 1;
  background: var(--rv-night);
}
.build-slide .bs-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.build-slide .bs-cap {
  position: absolute;
  left: 30px;
  bottom: 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 22px;
  background: rgba(10, 10, 10, 0.78);
  transition: transform 0.5s var(--rv-ease);
}
.build-slide .bs-cap small {
  font-family: var(--rv-ff-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.build-slide .bs-cap b {
  font-family: var(--rv-ff-display);
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
}
.build-slide:hover {
  color: #FFFFFF;
}
.build-slide:hover .bs-cap {
  transform: translateY(-6px);
}
.builds-rail .rv-square-btn {
  position: absolute;
  top: 50%;
  z-index: 5;
  transform: translateY(-50%);
}
.builds-rail .builds-prev {
  left: 0;
}
.builds-rail .builds-next {
  right: 0;
}
.builds-copy {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  align-items: flex-start;
}
.builds-copy p {
  margin-bottom: 28px;
}

/*======================
9. Home Two
========================*/
/*----- 9.1 Hero Two -----*/
/* the base's tuning hero: the title high on the left with a short lead, a grey band across the photograph's middle,
   the arrows, the progress line and the scroll-down square along the bottom */
.hero-two .swiper-slide {
  align-items: flex-start;
  padding-top: 230px;
}
.hero-two .swiper-slide::after {
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.05) 30%, rgba(10, 10, 10, 0.05) 62%, rgba(10, 10, 10, 0.8) 100%),
    linear-gradient(90deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0) 60%);
}
.hero-two .hero-copy {
  align-items: flex-start;
  max-width: 720px;
  text-align: left;
}
.hero-two .hero-title .line {
  font-size: clamp(54px, 7.4vw, 116px);
}
.hero-lead {
  max-width: 460px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 18px;
}
.hero-lead b {
  color: #FFFFFF;
  font-weight: 600;
}
.hero-two .hero-controls {
  bottom: 0;
}
.hero-two .hero-controls .wide {
  align-items: flex-end;
  padding: 0 0 0 46px;
}
.hero-two .hero-arrows {
  padding-bottom: 40px;
}
.hero-two .hero-progress {
  margin: 0 auto 52px;
}
.hero-down {
  width: 92px;
  height: 92px;
  pointer-events: auto;
  font-size: 18px;
  --rv-btn-bg: rgba(59, 59, 59, 0.9);
  --rv-btn-ink: #FFFFFF;
}
.hero-down::before {
  inset: 0 0 auto 0;
  width: 100%;
  height: 4px;
  transition: height 0.45s var(--rv-ease);
}
.hero-down:hover::before {
  width: 100%;
  height: 100%;
}

/*----- 9.2 Cut-Out Split -----*/
/* the base's part on the left of its copy: a cut-out on the dark ground, no frame */
.cs-img {
  position: relative;
  display: flex;
  justify-content: center;
}
.cs-img::before {
  content: "";
  position: absolute;
  inset: 12% 14%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(30, 200, 232, 0.14), rgba(30, 200, 232, 0));
}
.cs-img img {
  position: relative;
  max-height: 520px;
  object-fit: contain;
}
.rv-cutout-split h2 {
  margin-bottom: 24px;
}
.rv-cutout-split p {
  max-width: 520px;
  margin-bottom: 32px;
}

/*----- 9.3 Ghost Card -----*/
/* the base's overlap: a grey panel with a giant outline figure, the orange block slid under its foot */
.gc-wrap {
  position: relative;
  padding-bottom: 60px;
}
.gc-panel {
  position: relative;
  z-index: 2;
  max-width: 580px;
  padding: 150px 56px 60px;
  background: var(--rv-panel);
  isolation: isolate;
}
.gc-ghost {
  position: absolute;
  left: 50px;
  top: 30px;
  z-index: -1;
  font-size: clamp(58px, 6vw, 92px);
}
.gc-panel h2 {
  margin-bottom: 14px;
}
.gc-panel > p {
  margin-bottom: 36px;
}
.gc-feature i {
  margin-bottom: 14px;
  color: #FFFFFF;
  font-size: 20px;
}
.gc-feature h3 {
  margin-bottom: 8px;
}
.gc-feature p {
  max-width: 300px;
  margin: 0;
  font-size: 15.5px;
}
.gc-orange {
  position: absolute;
  left: 32%;
  right: 8%;
  bottom: 0;
  z-index: 1;
  height: 260px;
  overflow: hidden;
  isolation: isolate;
}
.gc-orange-ghost {
  position: absolute;
  left: 18%;
  bottom: -0.08em;
  z-index: -1;
  font-size: 200px;
  -webkit-text-stroke-color: rgba(10, 10, 10, 0.3);
}
.gc-orange-label {
  position: absolute;
  right: 32px;
  bottom: 28px;
  color: var(--rv-night);
  font-family: var(--rv-ff-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/*----- 9.4 Dyno Chart & Stage Cards -----*/
/* Home 02's scroll moment: the dyno bars climb stock -> stage 1 -> 2 -> 3 as the section travels; each figure is
   set when its bar lands */
.rv-dyno {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.dy-pick {
  width: min(360px, 100%);
}
.dy-chart {
  position: relative;
  margin-bottom: 60px;
  padding: 40px 40px 0;
  background: rgba(255, 255, 255, 0.03);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 100% 25%;
}
.dy-legend {
  display: flex;
  gap: 26px;
  margin-bottom: 26px;
}
.dy-legend span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dy-legend span::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--rv-orange);
}
.dy-legend .is-tq::before {
  background: #6A6A6A;
}
.dy-groups {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  height: 380px;
}
.dy-group {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.dy-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  height: 100%;
}
.dy-bar {
  position: relative;
  width: min(64px, 38%);
  height: 0;
  background: var(--rv-orange);
  transition: background-color 0.4s ease;
}
.dy-bar.is-tq {
  background: #5A5A5A;
}
.dy-group.is-stock .dy-bar.is-hp {
  background: #8E8E8E;
}
.dy-group.is-stock .dy-bar.is-tq {
  background: #3E3E3E;
}
.dy-bar b {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: opacity 0.4s ease, transform 0.4s var(--rv-ease);
}
.dy-bar.is-pending b {
  opacity: 0;
  transform: translate(-50%, 8px);
}
.dy-label {
  display: block;
  padding: 18px 0 20px;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}
.stage-card {
  position: relative;
  height: 100%;
  padding: 42px 36px 34px;
  background: var(--rv-surface);
  isolation: isolate;
  overflow: hidden;
}
.stage-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--rv-acc);
  transition: background-color 0.4s ease;
}
.sc-stage {
  position: absolute;
  right: 20px;
  top: 10px;
  z-index: -1;
  font-size: 110px;
}
.stage-card h3 {
  margin-bottom: 14px;
}
.sc-figs {
  margin-bottom: 18px;
  color: var(--rv-text);
  font-size: 15px;
  text-transform: uppercase;
}
.sc-figs b {
  color: var(--rv-heading);
  font-size: 32px;
  font-weight: 600;
}
.sc-figs span {
  margin: 0 6px;
  color: var(--rv-acc);
}
.stage-card .rv-rows li {
  padding: 9px 0;
  font-size: 15px;
}
.stage-card .rv-rows li > b {
  font-size: 14px;
}
.sc-fits {
  margin: 18px 0 22px;
  font-size: 15px;
}
.sc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.sc-price {
  color: var(--rv-heading);
  font-size: 26px;
  font-weight: 600;
}
.stage-card .wrap-chip {
  top: 18px;
  right: 18px;
}

/*----- 9.5 Parts Row -----*/
/* the base's auto components: cut-outs on the dark ground, the name ticked under each */
.part-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--rv-heading);
}
.pt-img {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 18px;
}
.pt-img img {
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.6s var(--rv-ease);
}
.part-tile:hover .pt-img img {
  transform: translateY(-8px) rotate(-3deg);
}
.pt-name {
  margin-top: 10px;
  font-family: var(--rv-ff-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pt-price {
  margin-top: 4px;
  color: var(--rv-text);
  font-size: 15px;
}
.part-tile .wrap-chip {
  top: 0;
  right: 0;
}

/*----- 9.6 Three Promises -----*/
.three-item p {
  margin: 14px 0 0;
  max-width: 340px;
  font-size: 15.5px;
}
.three-item .wrap-chip {
  top: -8px;
}

/*----- 9.7 Ghost Split -----*/
/* the base's split: a grey panel with a giant outline word over the title on the left, the car on the right */
.rv-ghost-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
}
.gs-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 90px clamp(30px, 6vw, 110px);
  background: var(--rv-steel);
  isolation: isolate;
  overflow: hidden;
  --rv-text: rgba(255, 255, 255, 0.74);
}
.gs-ghost {
  position: absolute;
  left: clamp(30px, 6vw, 110px);
  top: 70px;
  z-index: -1;
  font-size: clamp(60px, 6.4vw, 104px);
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.14);
}
.gs-copy h2 {
  max-width: 460px;
  margin: 60px 0 16px;
}
.gs-copy p {
  max-width: 420px;
  margin-bottom: 30px;
}
.gs-copy .rv-btn {
  align-self: flex-start;
  --rv-btn-bg: rgba(255, 255, 255, 0.12);
}
.gs-photo {
  position: relative;
}
.gs-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*----- 9.8 Countdown -----*/
/* the base's countdown: five cells in a row, the seconds on the orange */
.cd-cells {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.cd-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 22px 22px;
  background: rgba(255, 255, 255, 0.05);
}
.cd-cell span {
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cd-cell b {
  color: #FFFFFF;
  font-size: clamp(40px, 4vw, 62px);
  font-weight: 600;
  line-height: 1;
}
.cd-cell.is-orange {
  background: var(--rv-orange);
}
.cd-cell.is-orange span,
.cd-cell.is-orange b {
  color: var(--rv-night);
}
.cd-cell.is-orange .rv-tick::before {
  background: var(--rv-night);
}
.rv-countdown p b {
  color: #FFFFFF;
  font-weight: 600;
}

/*======================
10. Home Three
========================*/
/*----- 10.1 Light Hero -----*/
/* the base's workshop hero: a light photograph, the copy on the right over a white wash, the numbers below it */
.rv-hero.is-light {
  background: var(--rv-grey);
}
.hero-three .swiper-slide {
  min-height: max(640px, calc(100vh - 132px));
  padding: 110px 0 120px;
}
.hero-three .swiper-slide::after {
  background: linear-gradient(270deg, rgba(243, 243, 243, 0.96) 0%, rgba(243, 243, 243, 0.86) 38%, rgba(243, 243, 243, 0) 66%);
}
[data-theme="dark"] .hero-three .swiper-slide::after {
  background: linear-gradient(270deg, rgba(18, 18, 18, 0.96) 0%, rgba(18, 18, 18, 0.86) 38%, rgba(18, 18, 18, 0) 66%);
}
.hero-three .hero-copy {
  align-items: flex-start;
  max-width: 560px;
  margin-left: auto;
  text-align: left;
}
.hero-three .hero-copy .rv-eyebrow,
.hero-three .hero-title {
  color: var(--rv-heading);
}
.hero-three .hero-title .line {
  font-size: clamp(40px, 4.4vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.hero-three .hero-lead {
  color: var(--rv-text);
}
.hero-three .hero-copy .rv-btn {
  --rv-btn-bg: var(--rv-surface);
  --rv-btn-ink: var(--rv-heading);
}
.hero-three .hero-arrows button,
.hero-three .hero-numbers button {
  color: var(--rv-heading);
}
.hero-three .hero-numbers button {
  opacity: 0.6;
}
.hero-three .hero-numbers button.is-on {
  opacity: 1;
}

/*----- 10.2 Headlights -----*/
/* Home 03's scroll moment: a night band; as it enters, the daytime running light comes on with a flicker, then the
   main beam blazes and settles (the light layers are screened over the night photograph) */
.rv-headlights {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 680px;
  display: flex;
  align-items: center;
}
.hl-stage {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 74%;
}
.hl-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 40%;
}
.hl-drl,
.hl-beam {
  mix-blend-mode: screen;
}
.rv-headlights.is-off .hl-drl,
.rv-headlights.is-off .hl-beam {
  opacity: 0;
}
.hl-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0A0A0A 0%, rgba(10, 10, 10, 0.6) 22%, rgba(10, 10, 10, 0) 46%);
}
.hl-copy {
  max-width: 470px;
  padding: 110px 0;
}
.hl-copy h2 {
  margin-bottom: 20px;
  font-size: clamp(48px, 5.6vw, 90px);
  line-height: 0.96;
}
.hl-rows {
  margin: 10px 0 34px;
}

/*----- 10.3 Card Rail -----*/
.rail-wrap {
  padding-left: max(12px, calc((100vw - 1320px) / 2 + 12px));
  overflow: clip;
}
.rv-rail .svc-card {
  padding-bottom: 6px;
}

/*----- 10.4 Label Band -----*/
/* the base's photo with four service labels along its foot, each with its plus square */
.rv-label-band {
  min-height: 560px;
  display: flex;
  align-items: flex-end;
}
.rv-label-band::after {
  background: linear-gradient(0deg, rgba(10, 10, 10, 0.86) 0%, rgba(10, 10, 10, 0.3) 45%, rgba(10, 10, 10, 0.05) 100%);
}
.lb-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  padding: 0 clamp(16px, 3vw, 46px) 54px;
}
.lb-items li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.lb-name {
  max-width: 220px;
  color: #FFFFFF;
  font-family: var(--rv-ff-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rv-square-btn.is-sm {
  width: 46px;
  height: 46px;
  font-size: 13px;
}

/*----- 10.5 Battery Ring -----*/
/* the base's centre piece with four features round it: here the battery's state of health as a ring */
.ring-grid {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 400px) 1fr;
  align-items: center;
  gap: 50px;
}
.ring-side {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.ring-side:first-child {
  text-align: right;
}
.ring-feature i {
  margin-bottom: 16px;
  color: var(--rv-heading);
  font-size: 24px;
}
.ring-feature h3 {
  margin-bottom: 10px;
}
.ring-feature p {
  margin: 0;
  font-size: 15.5px;
}
.ring-centre {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.soh-ring {
  --soh: 0;
  position: relative;
  width: min(340px, 78vw);
  aspect-ratio: 1 / 1;
  background:
    conic-gradient(var(--rv-orange) calc(var(--soh) * 1%), var(--rv-line) 0);
  border-radius: 50%;
}
.soh-ring::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: var(--rv-bg);
}
.soh-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.soh-face b {
  color: var(--rv-heading);
  font-size: clamp(54px, 5vw, 76px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
.soh-face b small {
  font-size: 0.45em;
  letter-spacing: 0;
}
.soh-face > span {
  margin-top: 8px;
  color: var(--rv-text);
  font-family: var(--rv-ff-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ring-note {
  max-width: 330px;
  margin: 26px 0 0;
  font-size: 15px;
  text-align: center;
}

/*----- 10.6 Check Start & Offers -----*/
.rv-check-start p b {
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-weight: 600;
}
.check-start .rv-btn {
  margin-top: 8px;
}
.check-start .rv-input,
.check-start .rv-select .select-button {
  background: var(--rv-surface);
}
/* the base's check-up offers: a photograph on top, the label, the price and the rows */
.offer-card {
  position: relative;
  height: 100%;
  background: var(--rv-surface);
}
.offer-card .oc-img {
  display: block;
  aspect-ratio: 640 / 278;
  overflow: hidden;
}
.offer-card .oc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--rv-ease);
}
.offer-card:hover .oc-img img {
  transform: scale(1.05);
}
.oc-body {
  padding: 30px 28px 30px;
}
.oc-price {
  margin: 0 0 18px;
  color: var(--rv-heading);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
}
.offer-card .rv-rows {
  margin-bottom: 24px;
}
.offer-card .rv-rows li {
  padding: 9px 0;
  font-size: 14.5px;
}
.offer-card .rv-rows li > b {
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.offer-card .wrap-chip {
  top: 14px;
  right: 14px;
}
.size-tabs button {
  background: var(--rv-surface);
}

/*======================
11. Inner Pages
========================*/
/*----- 11.1 Build Details -----*/
.bd-hero img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}
.bd-main {
  margin-top: -90px;
}
.bd-specs {
  position: relative;
  z-index: 2;
}
.bd-specs h2 {
  margin-bottom: 12px;
}
.bd-specs .rv-rows {
  margin-bottom: 26px;
}
.bd-main .col-lg-8 {
  padding-top: 130px;
}
.bd-main h2 {
  margin-bottom: 22px;
}
.bd-steps {
  margin-top: 30px;
}
.process-step.is-light {
  background: var(--rv-grey);
}
.bd-gallery {
  margin-top: 70px;
}
.bd-gallery a {
  display: block;
}
.bd-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.8s var(--rv-ease);
}
.bd-gallery a:hover img {
  transform: scale(1.05);
}
.bd-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  margin-top: 70px;
  padding-top: 34px;
  border-top: 1px solid var(--rv-line);
}
.bd-nav a {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
}
.bd-nav a span {
  display: flex;
  flex-direction: column;
}
.bd-nav small {
  color: var(--rv-muted);
  font-size: 11.5px;
  letter-spacing: 0.08em;
}
.bd-nav .bd-next {
  justify-self: end;
  text-align: right;
}
.bd-nav .bd-all {
  justify-content: center;
  width: 54px;
  height: 54px;
  background: var(--rv-grey);
}
.bd-nav a:hover {
  color: var(--rv-accent-text);
}

/*----- 11.2 About -----*/
.story-photos {
  position: relative;
  padding-bottom: 90px;
}
.sp-main img {
  width: 85%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.sp-small {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  border: 8px solid var(--rv-bg);
}
.sp-small img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.story-ghost {
  margin-bottom: -40px;
  font-size: clamp(80px, 9vw, 150px);
}
.rv-story h2 {
  margin-bottom: 22px;
}
.story-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
  margin-top: 34px;
}
.rv-facts {
  padding: 64px 0;
}
.facts-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.facts-strip li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 30px;
  border-left: 2px solid var(--rv-orange);
}
.facts-strip b {
  color: #FFFFFF;
  font-size: clamp(36px, 3.4vw, 54px);
  font-weight: 600;
  line-height: 1;
}
.facts-strip span {
  font-family: var(--rv-ff-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bay-card {
  height: 100%;
  background: var(--rv-surface);
}
.bay-card .bay-img {
  display: block;
  aspect-ratio: 4 / 3;
}
.bay-card .bay-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bay-body {
  padding: 26px 24px 28px;
}
.bay-body h3 {
  margin-bottom: 10px;
}
.bay-body p {
  margin-bottom: 20px;
  font-size: 15px;
}
.bay-body .bay-head {
  color: var(--rv-heading);
}
.bay-card .wrap-chip {
  top: 14px;
  right: 14px;
}
.voice {
  height: 100%;
  margin: 0;
  padding: 40px 40px 36px;
  background: rgba(255, 255, 255, 0.05);
}
.voice blockquote {
  margin: 18px 0 26px;
}
.voice blockquote p {
  color: #FFFFFF;
  font-size: 19px;
  line-height: 1.6;
}
.voice figcaption {
  display: flex;
  align-items: center;
  gap: 16px;
}
.voice figcaption span {
  display: flex;
  flex-direction: column;
}
.voice figcaption b {
  color: #FFFFFF;
  font-family: var(--rv-ff-display);
  font-weight: 600;
  text-transform: uppercase;
}
.voice figcaption small {
  font-size: 14px;
}

/*----- 11.3 Crew -----*/
.team-card {
  position: relative;
  height: 100%;
  background: var(--rv-grey);
}
.team-card .tc-img {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.team-card .tc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.8s var(--rv-ease);
  transform-origin: center top;
}
.team-card:hover .tc-img img {
  transform: scale(1.05);
}
.tc-body {
  padding: 26px 26px 28px;
}
.tc-body h3 a:hover {
  color: var(--rv-accent-text);
}
.tc-role {
  display: flex;
  margin: 8px 0 14px;
  color: var(--rv-text);
  font-family: var(--rv-ff-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tc-body .rv-rows {
  margin-bottom: 18px;
}
.tc-body .rv-rows li {
  padding: 8px 0;
  font-size: 14.5px;
}
.rv-social.is-sm a {
  width: 34px;
  height: 34px;
  background: var(--rv-surface);
}
.team-card .wrap-chip {
  top: 14px;
  right: 14px;
}
.rv-crew-teaser .team-card {
  background: var(--rv-surface);
  box-shadow: 0 0 0 1px var(--rv-line);
}
.rv-bg-grey .rv-crew-teaser .team-card {
  box-shadow: none;
}
.profile-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}
.rv-profile h2 {
  margin-bottom: 20px;
}
.profile-rows {
  margin: 28px 0;
}
.profile-bars {
  margin-bottom: 34px;
}
.profile-bars h3 {
  margin-bottom: 16px;
}
.pb-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 15px;
}
.pb-row b {
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-weight: 600;
}
.pb-row .rv-meter {
  grid-column: 1 / -1;
}

/*----- 11.4 FAQ & Contact -----*/
.faq-side {
  position: sticky;
  top: 110px;
}
.faq-group + .faq-group {
  margin-top: 56px;
}
.faq-group-title {
  margin-bottom: 8px;
}
.info-card {
  position: relative;
  height: 100%;
  padding: 36px 30px 32px;
  background: var(--rv-grey);
}
.info-card > i {
  margin-bottom: 18px;
  color: var(--rv-heading);
  font-size: 24px;
}
.info-card h2 {
  margin-bottom: 10px;
}
.info-card p {
  margin: 0;
  color: var(--rv-heading);
}
.info-card .wrap-chip {
  top: 14px;
  right: 14px;
}
.rv-contact h2 {
  margin-bottom: 18px;
}
.rv-contact .hours-list {
  margin-top: 26px;
}
.contact-form .rv-btn {
  margin-top: 6px;
}
.rv-map-wrap {
  line-height: 0;
}
.rv-map {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
  filter: grayscale(1) contrast(1.05);
}
[data-theme="dark"] .rv-map {
  filter: grayscale(1) invert(0.9) contrast(0.9);
}

/*======================
12. Studio Pages
========================*/
/*----- 12.1 Services & Details -----*/
.svc-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 420px;
  padding: 50px 40px;
  overflow: hidden;
  isolation: isolate;
}
.svc-cta-ghost {
  position: absolute;
  left: 30px;
  top: 30px;
  z-index: -1;
  font-size: 120px;
}
.svc-cta h3 {
  margin-bottom: 14px;
}
.svc-cta p {
  margin-bottom: 26px;
}
.svc-cta .rv-btn {
  align-self: flex-start;
}
.rv-process {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.process-step {
  position: relative;
  height: 100%;
  padding: 90px 30px 34px;
  background: rgba(255, 255, 255, 0.04);
  isolation: isolate;
}
.ps-ghost {
  position: absolute;
  left: 26px;
  top: 18px;
  z-index: -1;
  font-size: 84px;
}
.process-step h3 {
  margin-bottom: 12px;
}
.process-step p {
  margin: 0;
  font-size: 15.5px;
}
.prices-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.prices-rows {
  margin: 24px 0 34px;
}
.detail-body .detail-hero {
  margin-bottom: 44px;
}
.detail-body .detail-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.detail-body h2 {
  margin-bottom: 22px;
}
.detail-sub {
  margin: 56px 0 26px;
}
.film-spec {
  height: 100%;
  padding: 26px 24px;
  background: var(--rv-grey);
}
.film-spec h3 {
  margin-bottom: 10px;
}
.film-spec .rv-rows li {
  padding: 9px 0;
  font-size: 14.5px;
}
.detail-pair {
  margin-top: 40px;
}
.detail-pair img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.acc-title {
  margin: 0;
  font-size: inherit;
}
.widget-cats a i {
  color: var(--rv-accent-text);
  font-size: 11px;
}
.widget-cats a.is-current {
  color: var(--rv-accent-text);
}
/* tables: secondary columns step aside on narrow screens, never a sideways scroll */
.rv-table-wrap {
  background: var(--rv-surface);
  box-shadow: 0 0 0 1px var(--rv-line);
}
.rv-table {
  width: 100%;
  border-collapse: collapse;
}
.rv-table th,
.rv-table td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--rv-line);
  text-align: left;
  vertical-align: middle;
}
.rv-table thead th {
  background: var(--rv-night);
  color: #FFFFFF;
  font-family: var(--rv-ff-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rv-table tbody th {
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 14.5px;
  font-weight: 600;
  text-transform: uppercase;
}
.rv-table tbody th small,
.rv-table td small {
  display: block;
  color: var(--rv-text);
  font-family: var(--rv-ff-body);
  font-size: 13.5px;
  font-weight: 400;
  text-transform: none;
}
.rv-table td {
  color: var(--rv-heading);
  font-size: 15px;
}
.rv-table td b {
  font-size: 19px;
  font-weight: 600;
}
.table-note {
  margin: 14px 0 0;
  font-size: 14.5px;
  color: var(--rv-muted);
}
.row-pick {
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
}
.row-pick:hover {
  color: var(--rv-accent-text);
}
.stage-table tbody tr {
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.stage-table tbody tr:hover,
.stage-table tbody tr.is-picked {
  background: var(--rv-grey);
}
.stage-table tbody tr.is-picked th {
  box-shadow: inset 4px 0 0 var(--rv-orange);
}

/*----- 12.2 Quote Form -----*/
/* the quote and the detail builder: numbered blocks (a ghost number before each legend), choice cards, swatches */
.q-block {
  margin: 0 0 48px;
  padding: 0;
  border: 0;
}
/* Bootstrap floats a legend; a block after a hidden note would then sit beside it */
.q-legend {
  position: relative;
  float: none;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
}
.q-legend .rv-ghost {
  font-size: 46px;
  -webkit-text-stroke-color: var(--rv-orange);
}
.choice-group {
  margin: 20px 0 12px;
  color: var(--rv-muted);
  font-family: var(--rv-ff-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.choice-card.is-size b {
  font-size: 13px;
}
.choice-card.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.q-note {
  margin: -8px 0 18px;
  color: var(--rv-muted);
  font-size: 15px;
}
[data-colour-field].is-off .swatch-grid {
  opacity: 0.35;
  pointer-events: none;
}
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  transition: opacity 0.4s ease;
}
.swatch-pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 10px;
  background: var(--rv-grey);
  cursor: pointer;
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.swatch-pick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sp-chip {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background: var(--rv-wrap);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.w-aurora-shift .sp-chip {
  background: linear-gradient(135deg, #5B2A86, #13897F);
}
.sp-name {
  display: flex;
  flex-direction: column;
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
}
.sp-name small {
  color: var(--rv-muted);
  font-family: var(--rv-ff-body);
  font-size: 12.5px;
  font-weight: 400;
  text-transform: none;
}
.swatch-pick:hover {
  box-shadow: inset 0 0 0 1px var(--rv-line-2);
}
.swatch-pick:focus-within {
  outline: 2px solid var(--rv-orange);
  outline-offset: 2px;
}
.swatch-pick.is-checked {
  background: var(--rv-surface);
  box-shadow: inset 0 0 0 2px var(--rv-orange);
}
.quote-side {
  position: sticky;
  top: 110px;
}
.wm-stage.is-preview {
  margin: 0 0 18px;
}
.quote-sum h2 {
  margin-bottom: 14px;
}
.quote-sum .rv-rows li {
  padding: 10px 0;
  font-size: 15px;
}
.quote-sum .rv-rows li > b {
  font-size: 14px;
}
.sum-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin: 18px 0 8px;
  padding: 14px 0;
  border-top: 2px solid var(--rv-orange);
}
.sum-total span {
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sum-total b {
  color: var(--rv-heading);
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
}
.q-facts {
  margin-bottom: 22px;
}
.hold-form .rv-input {
  height: 50px;
}
.hold-form .rv-btns {
  margin-top: 16px;
}
.sum-hint {
  margin: 0 0 20px;
  font-size: 15px;
}
.sum-hint b {
  color: var(--rv-heading);
  font-weight: 600;
}

/*----- 12.3 Film Library -----*/
.films-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 44px;
}
.films-search {
  display: flex;
  gap: 10px;
}
.films-search .rv-select {
  width: 210px;
}
.films-search .widget-search {
  width: 260px;
}
.films-search .widget-search input {
  height: 46px;
  background: var(--rv-grey);
}
.films-search .widget-search button {
  height: 46px;
}
.film-card {
  height: 100%;
  background: var(--rv-grey);
}
/* the swatch: the film's colour with the light of its finish (a sheen for gloss, a softer one for satin) */
.fc-swatch {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--rv-wrap);
}
.fc-swatch.is-gloss {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.36) 46%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.18)),
    var(--rv-wrap);
}
.fc-swatch.is-satin {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0.16) 48%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.14)),
    var(--rv-wrap);
}
.fc-swatch.is-matte {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.1)), var(--rv-wrap);
}
.fc-swatch.is-shift {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.3) 46%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, #5B2A86, #13897F);
}
.fc-body {
  padding: 22px 22px 24px;
}
.fc-body h3 {
  margin-bottom: 8px;
}
.fc-body .rv-rows {
  margin-bottom: 16px;
}
.fc-body .rv-rows li {
  padding: 8px 0;
  font-size: 14px;
}
.fc-body .rv-rows li > b {
  font-size: 13px;
}
.rv-cta-band {
  padding: 90px 0;
}
.cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.cta-title {
  margin: 0 0 8px;
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-weight: 600;
  text-transform: uppercase;
}

/*----- 12.4 Tuning Page -----*/
.model-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 30px;
}
.model-strip li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.05);
}
.model-strip span {
  color: var(--rv-text);
  font-size: 13.5px;
}
.model-strip b {
  color: #FFFFFF;
  font-family: var(--rv-ff-display);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
}

/*----- 12.5 Battery Estimator -----*/
.est-form .rv-field label b {
  color: var(--rv-accent-text);
}
.est-set {
  margin: 0;
  padding: 0;
  border: 0;
}
.est-set legend {
  float: none;
}
/* a segmented control: three tonal options, the chosen one orange */
.seg {
  display: flex;
  gap: 6px;
}
.seg label {
  position: relative;
  flex: 1;
  cursor: pointer;
}
.seg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.seg span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  background: var(--rv-grey);
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.seg input:checked + span {
  background: var(--rv-orange);
  color: var(--rv-night);
}
.seg input:focus-visible + span {
  outline: 2px solid var(--rv-orange);
  outline-offset: 2px;
}
.est-result {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.est-result .soh-ring {
  align-self: center;
  width: min(250px, 70vw);
}
.est-result .soh-ring::before {
  background: var(--rv-band);
}
.est-band {
  margin: 16px 0 10px;
  font-size: 15px;
  text-align: center;
}
.est-band b {
  color: #FFFFFF;
  font-weight: 600;
}
.est-result .rv-rows li {
  padding: 10px 0;
  font-size: 15px;
}
.est-result .rv-rows li.is-ok > b {
  color: var(--rv-ok-text);
}
.est-sub {
  margin: 24px 0 12px;
}
.est-parts {
  margin-bottom: 26px;
}
.est-parts li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 14px;
  padding: 8px 0;
  font-size: 14.5px;
}
.est-parts li b {
  color: #FFFFFF;
  font-family: var(--rv-ff-display);
  font-weight: 600;
}
.est-parts .rv-meter {
  grid-column: 1 / -1;
  background: rgba(255, 255, 255, 0.12);
}
.est-parts .rv-meter span {
  transition: width 0.6s var(--rv-ease);
}
.rv-ev-notes img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.rv-ev-notes h2 {
  margin-bottom: 26px;
}

/*----- 12.6 Booking Wizard -----*/
.wz-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 40px;
}
.wz-steps button {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 12px 14px;
  border-top: 3px solid var(--rv-line-2);
  background: var(--rv-grey);
  color: var(--rv-muted);
  font-family: var(--rv-ff-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  cursor: default;
}
.wz-steps button b {
  font-size: 18px;
}
.wz-steps li.is-done button {
  border-top-color: var(--rv-heading);
  color: var(--rv-heading);
  cursor: pointer;
}
.wz-steps li.is-active button {
  border-top-color: var(--rv-orange);
  background: var(--rv-surface);
  color: var(--rv-heading);
  box-shadow: 0 0 0 1px var(--rv-line);
}
.wz-step {
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
}
.wz-step.is-active {
  display: block;
}
.wz-title {
  float: none;
  margin-bottom: 24px;
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-weight: 600;
  text-transform: uppercase;
}
.wz-note {
  font-size: 15.5px;
}
.wz-note b {
  color: var(--rv-heading);
  font-weight: 600;
}
.day-chips,
.slot-chips {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 26px;
}
.slot-chips {
  grid-template-columns: repeat(6, 1fr);
}
.day-chip,
.slot-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 6px;
  background: var(--rv-grey);
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  line-height: 1.15;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.day-chip small,
.slot-chip small {
  color: var(--rv-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.day-chip b {
  font-size: 22px;
  font-weight: 600;
}
.slot-chip b {
  font-size: 15px;
  font-weight: 600;
}
.day-chip em {
  margin-top: 4px;
  color: var(--rv-accent-text);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
}
.day-chip:hover,
.slot-chip:hover {
  box-shadow: inset 0 0 0 1px var(--rv-line-2);
}
.day-chip.is-on,
.slot-chip.is-on {
  background: var(--rv-orange);
  color: var(--rv-night);
}
.day-chip.is-on small,
.day-chip.is-on em,
.slot-chip.is-on small {
  color: var(--rv-night);
}
.day-chip[disabled],
.slot-chip[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.wz-consent {
  margin-top: 22px;
}
.wz-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--rv-line);
}
.wz-done {
  padding: 30px 0 10px;
  text-align: center;
}
.wz-done > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  margin-bottom: 20px;
  background: var(--rv-orange);
  color: var(--rv-night);
  font-size: 26px;
}
.wz-done h2 {
  margin-bottom: 12px;
}
.wz-done b {
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-weight: 600;
}
.big-line {
  margin: 0 0 10px;
  color: #FFFFFF;
  font-family: var(--rv-ff-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
}

/*----- 12.7 Detail Builder & Plans -----*/
.detail-sum {
  position: sticky;
  top: 110px;
}
.pc-card .rv-rows li {
  padding: 10px 0;
  font-size: 15px;
}
.pc-totals {
  margin-top: 12px;
}
.rv-plan-calc .rv-tabs {
  margin-top: 6px;
}
.rv-plan-calc .rv-tabs button {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}
.rv-plan-calc .rv-tabs button.is-active {
  background: var(--rv-orange);
  color: var(--rv-night);
}
.rv-plan-calc .rv-field label {
  color: #FFFFFF;
}
.rv-plan-calc .rv-select .select-button {
  background: rgba(255, 255, 255, 0.08);
  border-bottom-color: rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
}

/*======================
13. Shop
========================*/
/*----- 13.1 Product Cards -----*/
/* the base's shop: packshots on a light grey plate, the name in capitals, the price; here the fitted price too */
.product-card {
  position: relative;
  height: 100%;
  background: var(--rv-surface);
}
.pc-media {
  position: relative;
  overflow: hidden;
  background: #F2F2F2;
}
.pc-img {
  display: block;
  aspect-ratio: 1 / 1;
}
.pc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--rv-ease);
}
.product-card:hover .pc-img img {
  transform: scale(1.05);
}
.pc-badge {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 3;
  padding: 6px 12px;
  background: var(--rv-night);
  color: #FFFFFF;
  font-family: var(--rv-ff-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pc-badge.is-sale {
  background: var(--rv-orange);
  color: var(--rv-night);
}
.pc-wish {
  position: absolute;
  right: 14px;
  bottom: 70px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: #FFFFFF;
  color: var(--rv-night);
  font-size: 15px;
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 0.4s ease, transform 0.4s var(--rv-ease), background-color 0.3s ease;
}
.pc-wish.is-on {
  color: var(--rv-orange-ink);
}
.pc-add {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  background: var(--rv-night);
  color: #FFFFFF;
  font-family: var(--rv-ff-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateY(100%);
  transition: transform 0.45s var(--rv-ease), background-color 0.3s ease, color 0.3s ease;
}
.pc-add:hover {
  background: var(--rv-orange);
  color: var(--rv-night);
}
.product-card:hover .pc-add,
.product-card:focus-within .pc-add {
  transform: none;
}
.product-card:hover .pc-wish,
.product-card:focus-within .pc-wish,
.pc-wish.is-on {
  opacity: 1;
  transform: none;
}
.pc-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 4px 6px;
}
.pc-cat {
  color: var(--rv-muted);
  font-family: var(--rv-ff-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pc-body h3 a:hover {
  color: var(--rv-accent-text);
}
.pc-price {
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 18px;
  font-weight: 600;
}
.pc-price del {
  margin-left: 8px;
  color: var(--rv-muted);
  font-size: 14px;
  font-weight: 400;
}
.pc-fit {
  color: var(--rv-text);
  font-size: 14px;
}
.product-card .wrap-chip {
  top: 14px;
  right: 14px;
}
.rv-bg-grey .product-card {
  background: transparent;
}
/* touch screens have no hover: the bag button stays */

/*----- 13.2 Shop Grid -----*/
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 34px;
  padding: 14px 16px 14px 22px;
  background: var(--rv-grey);
}
.shop-toolbar p {
  margin: 0;
}
.shop-toolbar p b {
  color: var(--rv-heading);
}
.shop-fit {
  margin-left: auto;
}
.shop-sort {
  width: 220px;
}
.shop-sort .select-button {
  background: var(--rv-surface);
}
.shop-side {
  position: sticky;
  top: 110px;
}

/*----- 13.3 Product Page -----*/
.pd-main {
  background: #F2F2F2;
}
.pd-main img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.pd-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.pd-thumbs button {
  background: #F2F2F2;
  opacity: 0.6;
  transition: opacity 0.3s ease, box-shadow 0.3s ease;
}
.pd-thumbs button.is-active,
.pd-thumbs button:hover {
  opacity: 1;
  box-shadow: inset 0 -3px 0 var(--rv-orange);
}
.pd-thumbs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.pd-info h2 {
  margin: 10px 0 14px;
}
.pd-rating {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 15px;
}
.pd-price {
  margin-bottom: 18px;
  color: var(--rv-heading);
  font-size: 40px;
  font-weight: 600;
}
.pd-fit {
  margin: 24px 0;
  padding: 0;
  border: 0;
}
.pd-fit legend {
  float: none;
}
.pd-fit .seg span {
  padding: 0 10px;
  text-align: center;
}
.pd-fit-note {
  margin: 10px 0 0;
  color: var(--rv-muted);
  font-size: 15px;
}
.pd-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.pd-buy .rv-btn b {
  font-weight: 700;
}
.rv-qty {
  display: inline-flex;
  align-items: center;
  height: 56px;
  background: var(--rv-grey);
}
.rv-qty button {
  width: 44px;
  height: 100%;
  color: var(--rv-heading);
  font-size: 12px;
}
.rv-qty button:hover {
  color: var(--rv-accent-text);
}
.rv-qty input {
  width: 46px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
}
.rv-qty input::-webkit-outer-spin-button,
.rv-qty input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.rv-qty.is-sm {
  height: 44px;
}
.rv-qty.is-sm button {
  width: 36px;
}
.rv-qty.is-sm input {
  width: 36px;
}
.pd-wish {
  width: 56px;
  height: 56px;
  --hd-icon: var(--rv-grey);
  --hd-ink: var(--rv-heading);
}
.pd-wish.is-on {
  color: var(--rv-orange-ink);
}
.pd-meta li {
  padding: 10px 0;
  font-size: 15px;
}
.pd-tabs {
  margin-top: 70px;
}
.pd-panel {
  padding: 34px 0 0;
}
.pd-review {
  display: flex;
  gap: 18px;
}
.pd-review b {
  display: block;
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-weight: 600;
  text-transform: uppercase;
}

/*----- 13.4 Cart & Checkout -----*/
.cart-head {
  margin-bottom: 20px;
}
.bag-line {
  display: grid;
  grid-template-columns: 96px 1fr auto auto 40px;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rv-line);
}
.bag-lines.is-wish .bag-line {
  grid-template-columns: 96px 1fr auto 40px;
}
.bl-img img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  background: #F2F2F2;
}
.bl-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bl-cat {
  color: var(--rv-muted);
  font-size: 13.5px;
}
.bl-body h3 a:hover {
  color: var(--rv-accent-text);
}
.bl-price {
  color: var(--rv-text);
  font-size: 15px;
}
.bl-fit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: var(--rv-heading);
  font-size: 14.5px;
  cursor: pointer;
}
.bl-fit input {
  accent-color: var(--rv-orange);
}
.bl-total {
  min-width: 100px;
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-size: 18px;
  font-weight: 600;
  text-align: right;
}
.bl-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--rv-grey);
  color: var(--rv-heading);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.bl-remove:hover {
  background: var(--rv-orange);
  color: var(--rv-night);
}
.cart-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
}
.coupon-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.coupon-form .rv-input {
  width: 220px;
  height: 46px;
}
.coupon-form .form-status {
  width: 100%;
  margin-top: 4px;
}
.order-summary h2,
.order-summary h3 {
  margin-bottom: 18px;
}
.ship-meter {
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.14);
}
.ship-note {
  font-size: 15px;
}
.ship-note b {
  color: #FFFFFF;
}
.order-summary .rv-rows li {
  padding: 10px 0;
  font-size: 15px;
}
.cart-empty,
.order-done {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.cart-empty > i,
.order-done > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  margin-bottom: 18px;
  background: var(--rv-orange);
  color: var(--rv-night);
  font-size: 24px;
}
.order-done b {
  color: var(--rv-heading);
}
.ck-sub {
  margin: 40px 0 18px;
}
.ck-terms {
  margin: 30px 0 24px;
}
.order-lines li {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rv-line);
}
.ol-img {
  position: relative;
}
.ol-img img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  background: #F2F2F2;
}
.ol-img b {
  position: absolute;
  right: -6px;
  top: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--rv-orange);
  color: var(--rv-night);
  font-family: var(--rv-ff-display);
  font-size: 11px;
  line-height: 20px;
  text-align: center;
}
.ol-name {
  display: flex;
  flex-direction: column;
  color: #FFFFFF;
  font-size: 15px;
}
.ol-name small {
  color: var(--rv-orange);
  font-size: 13px;
}
.order-lines li > b {
  color: #FFFFFF;
  font-family: var(--rv-ff-display);
  font-weight: 600;
}

/*======================
14. Journal, Account & Utility Pages
========================*/
/*----- 14.1 Journal -----*/
.post-card + .post-card {
  margin-top: 70px;
}
.post-media {
  position: relative;
  display: block;
  overflow: hidden;
  margin-bottom: 28px;
}
.post-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.8s var(--rv-ease);
}
a.post-media:hover img {
  transform: scale(1.04);
}
.post-media.is-video,
.post-media.is-audio {
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-media.is-video .rv-play {
  position: absolute;
}
.post-media.is-gallery .rv-square-btn {
  position: absolute;
  bottom: 20px;
  z-index: 3;
}
.post-media.is-gallery .mini-prev {
  right: 76px;
}
.post-media.is-gallery .mini-next {
  right: 20px;
}
.audio-bar {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(10, 10, 10, 0.82);
  color: #FFFFFF;
  font-family: var(--rv-ff-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.audio-bar i {
  color: var(--rv-orange);
}
.post-quote {
  position: relative;
  margin: 0 0 28px;
  padding: 50px 50px 46px;
}
.post-quote i {
  margin-bottom: 18px;
  color: var(--rv-orange);
  font-size: 28px;
}
.post-quote p {
  color: #FFFFFF;
  font-family: var(--rv-ff-display);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
}
.post-quote cite {
  font-style: normal;
}
.post-link {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
  padding: 36px 40px;
  color: var(--rv-night);
  font-family: var(--rv-ff-display);
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
}
.post-link span {
  display: flex;
  flex-direction: column;
}
.post-link b {
  font-size: 13px;
  letter-spacing: 0.06em;
}
.post-link:hover {
  color: var(--rv-night);
  background-color: var(--rv-orange-deep);
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-bottom: 14px;
  color: var(--rv-muted);
  font-size: 14.5px;
}
.post-meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.post-meta i {
  color: var(--rv-accent-text);
}
.post-face {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.post-body h2 {
  margin-bottom: 14px;
}
.post-body h2 a:hover {
  color: var(--rv-accent-text);
}
.post-body p {
  margin-bottom: 26px;
}
.article-body > h2 {
  margin-bottom: 20px;
}
.article-body h3 {
  margin: 40px 0 16px;
}
.article-quote {
  margin: 36px 0;
  padding: 44px 46px;
  border-left: 4px solid var(--rv-orange);
}
.article-quote p {
  color: #FFFFFF;
  font-family: var(--rv-ff-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
}
.article-quote cite {
  font-style: normal;
}
.article-rows {
  margin: 10px 0 30px;
}
.article-pair {
  margin-bottom: 30px;
}
.article-pair img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 40px 0;
  padding: 22px 0;
  border-top: 1px solid var(--rv-line);
  border-bottom: 1px solid var(--rv-line);
}
.article-tags {
  margin: 0;
}
.article-tags b {
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-weight: 600;
  text-transform: uppercase;
}
.article-tags a {
  margin-left: 6px;
  color: var(--rv-accent-text);
}
.article-share {
  display: flex;
  align-items: center;
  gap: 18px;
}
.author-box {
  display: flex;
  gap: 26px;
  padding: 34px;
  background: var(--rv-grey);
}
.author-face {
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
}
.author-box h3 {
  margin: 0 0 8px;
}
.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 40px 0;
}
.post-nav a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-weight: 600;
  text-transform: uppercase;
}
.post-nav a span {
  display: flex;
  flex-direction: column;
}
.post-nav small {
  color: var(--rv-muted);
  font-size: 11.5px;
  letter-spacing: 0.08em;
}
.post-nav .is-next {
  text-align: right;
}
.post-nav a:hover {
  color: var(--rv-accent-text);
}
.comments h3 {
  margin: 0 0 20px;
}
.comment {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rv-line);
}
.comment.is-reply {
  margin-left: 60px;
}
.comment b {
  display: block;
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-weight: 600;
  text-transform: uppercase;
}
.comment small {
  color: var(--rv-muted);
  font-size: 13.5px;
}
.comment p {
  margin: 8px 0 6px;
}
.comment-form {
  margin-top: 46px;
}

/*----- 14.2 My Garage -----*/
.account-wrap {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: start;
}
.account-side {
  position: sticky;
  top: 110px;
}
.acc-user {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.acc-user b {
  display: block;
  color: #FFFFFF;
  font-family: var(--rv-ff-display);
  font-weight: 600;
  text-transform: uppercase;
}
.acc-user small {
  font-size: 14px;
}
.acc-tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 26px;
}
.acc-tabs button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--rv-ff-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.acc-tabs button i {
  width: 16px;
  color: var(--rv-orange);
}
.acc-tabs button:hover {
  color: #FFFFFF;
}
.acc-tabs button.is-active {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 3px 0 0 var(--rv-orange);
  color: #FFFFFF;
}
.acc-panel h2 {
  margin-bottom: 14px;
}
.acc-cards {
  margin: 26px 0 30px;
}
.acc-stat {
  padding: 26px 24px;
  background: var(--rv-grey);
}
.acc-stat b {
  display: block;
  color: var(--rv-heading);
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
}
.acc-stat span {
  font-family: var(--rv-ff-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.garage-item {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rv-line);
}
.garage-item > i {
  color: var(--rv-accent-text);
  font-size: 18px;
}
.garage-item b {
  display: block;
  color: var(--rv-heading);
  font-family: var(--rv-ff-display);
  font-weight: 600;
  text-transform: uppercase;
}
.garage-item small {
  font-size: 14px;
}
.gi-total {
  font-size: 18px;
}
.order-table td:nth-child(3) {
  font-size: 14.5px;
}

/*----- 14.3 Sign In & Register -----*/
.rv-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 760px;
}
.auth-photo {
  display: flex;
  align-items: flex-end;
  padding: 70px;
}
.auth-photo::after {
  background: linear-gradient(0deg, rgba(10, 10, 10, 0.86) 0%, rgba(10, 10, 10, 0.2) 70%);
}
.auth-photo-copy {
  position: relative;
  max-width: 520px;
}
.auth-ghost {
  margin-bottom: -26px;
  font-size: clamp(70px, 8vw, 130px);
}
.auth-line {
  margin: 0;
  color: #FFFFFF;
  font-family: var(--rv-ff-display);
  font-weight: 600;
  text-transform: uppercase;
}
.auth-form-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
}
.auth-form {
  width: min(460px, 100%);
}
.auth-form h1 {
  margin-bottom: 10px;
}
.auth-form > p {
  margin-bottom: 30px;
}
.is-pass .pass-eye {
  position: absolute;
  right: 6px;
  top: 33px;
  width: 44px;
  height: 46px;
  color: var(--rv-accent-text);
}
.pass-meter {
  margin-top: 10px;
}
.pass-meter span {
  transition: width 0.4s ease;
}
.pass-hint {
  display: block;
  margin-top: 6px;
  color: var(--rv-muted);
  font-size: 13.5px;
}
.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
}
.auth-terms {
  margin: 4px 0 24px;
}
.auth-alt {
  margin-top: 22px;
  font-size: 15.5px;
}
.auth-alt a {
  color: var(--rv-accent-text);
  font-weight: 600;
}

/*----- 14.4 Coming Soon & 404 -----*/
.rv-soon {
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 80px 0;
  text-align: center;
}
.rv-soon .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.soon-logo img {
  height: 32px;
  width: auto;
  margin-bottom: 56px;
}
.soon-title {
  margin-bottom: 18px;
  color: #FFFFFF;
  font-size: clamp(56px, 9vw, 140px);
  line-height: 0.95;
}
.soon-lead {
  max-width: 560px;
  margin-bottom: 40px;
}
.soon-lead b {
  color: #FFFFFF;
  font-weight: 600;
}
.soon-cells {
  grid-template-columns: repeat(4, 1fr);
  width: min(720px, 100%);
  margin-bottom: 40px;
}
.soon-cells .cd-cell {
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
}
.soon-cells .cd-cell.is-orange {
  background: var(--rv-orange);
}
.soon-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: min(560px, 100%);
}
.soon-form .rv-input {
  flex: 1;
  min-width: 220px;
  background: rgba(255, 255, 255, 0.1);
  border-bottom-color: rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
}
.soon-form .rv-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
.soon-form .form-status {
  width: 100%;
}
.soon-social {
  justify-content: center;
  margin-top: 40px;
}
.soon-social a {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}
.rv-error {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  align-items: center;
  min-height: 720px;
  padding: 140px 0;
}
.error-ghost {
  margin-bottom: -10px;
  font-size: clamp(140px, 22vw, 340px);
  -webkit-text-stroke-color: rgba(30, 200, 232, 0.5);
}
.error-title {
  max-width: 820px;
  margin-bottom: 20px;
  font-size: clamp(38px, 5vw, 76px);
}
.rv-error p {
  max-width: 560px;
  margin-bottom: 36px;
}

/*======================
15. Subheader
========================*/
/* the base's page title: a light grey band, the trail in small capitals at its top, the title big and left,
   a small orange square at its foot; a giant outline word on the right and the track lines at its edges */
.rv-subheader {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 70px 0 96px;
  background: var(--rv-grey);
  --gl-1: #F3F3F3;
  --gl-alpha: 0.5;
}
[data-theme="dark"] .rv-subheader {
  --gl-1: #1A1A1A;
}
.rv-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-bottom: 64px;
  color: var(--rv-muted);
  font-family: var(--rv-ff-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rv-crumbs a,
.rv-crumbs span {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.rv-crumbs a::after {
  content: "";
  width: 2px;
  height: 11px;
  background: var(--rv-orange);
}
.rv-crumbs span {
  color: var(--rv-accent-text);
}
.sub-copy {
  position: relative;
  max-width: 900px;
}
.sub-copy h1 {
  font-size: clamp(42px, 5.2vw, 82px);
  line-height: 1;
}
.sub-copy .rv-lead {
  max-width: 560px;
  margin-top: 22px;
}
.sub-ghost {
  position: absolute;
  right: -1vw;
  bottom: -0.16em;
  z-index: -1;
  color: transparent;
  font-family: var(--rv-ff-display);
  font-size: clamp(110px, 15vw, 260px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  -webkit-text-stroke: 1px var(--rv-ghost);
  white-space: nowrap;
  pointer-events: none;
}
.sub-dot {
  position: absolute;
  left: 50%;
  bottom: 30px;
  width: 7px;
  height: 7px;
  background: var(--rv-orange);
  transform: translateX(-50%);
}

/*======================
16. Footer
========================*/
/* the base's footer: the support band first (here the studio line, with the V mark running through it in its
   motion-trail echo), then the logo column and the link columns on coal, and the black bottom bar */
.rv-footer {
  position: relative;
  background: var(--rv-coal);
}
.footer-stage {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 92px 0;
  background: var(--rv-band);
  border-bottom: 2px solid #0E0E0E;
  --gl-1: #1E1E1E;
  --gl-alpha: 1;
}
.stage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.stage-copy {
  max-width: 760px;
}
.stage-phone {
  display: inline-block;
  color: #FFFFFF;
  font-family: var(--rv-ff-display);
  font-size: clamp(34px, 3.6vw, 54px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.stage-phone:hover {
  color: var(--rv-orange);
}
.stage-copy p {
  margin: 12px 0 0;
  font-size: 16px;
}
.footer-main {
  padding: 92px 0 80px;
}
.footer-word img {
  height: 28px;
  width: auto;
}
.footer-about p {
  max-width: 330px;
  margin: 26px 0 30px;
  font-size: 16px;
}
.footer-label {
  display: block;
  color: var(--rv-text);
  font-size: 15px;
}
.footer-phone {
  display: inline-block;
  margin: 2px 0 22px;
  color: #FFFFFF;
  font-family: var(--rv-ff-display);
  font-size: 26px;
  font-weight: 600;
}
.footer-address {
  margin: 4px 0 20px;
  color: #FFFFFF;
  font-family: var(--rv-ff-display);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer-open {
  color: var(--rv-text);
  font-size: 15px;
}
.rv-footer .widget h2 {
  margin-bottom: 26px;
  color: #FFFFFF;
}
.footer-links li + li {
  margin-top: 12px;
}
.footer-links a {
  color: var(--rv-text);
  font-family: var(--rv-ff-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer-links a:hover {
  color: var(--rv-orange);
}
.footer-hours .rv-rows li {
  padding: 9px 0;
  font-size: 15px;
}
.footer-hours .rv-rows li > b {
  font-size: 14px;
}
.footer-note {
  margin: 16px 0 0;
  font-size: 15px;
}
.footer-note b {
  color: #FFFFFF;
  font-family: var(--rv-ff-display);
  font-weight: 600;
}
.footer-bottom {
  padding: 26px 0;
  background: var(--rv-night);
}
.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.footer-bottom p {
  margin: 0;
  font-size: 14px;
}
.footer-bottom .rv-social a {
  width: 34px;
  height: 34px;
}