/* ==========================================================================
   Routes1 - "Bold Editorial" home page
   Full-bleed, zero-gap, dark-first landing built on top of the SPA shell.
   Everything is scoped to html.rv1 (added by routes-revamp.js on / only).
   ========================================================================== */

.rv1 {
  --rv-ink: #0b0d12;
  --rv-ink-2: #12151d;
  --rv-navy: #132a8e;
  --rv-navy-deep: #0b1957;
  --rv-navy-lit: #1e3aa8;
  --rv-orange: #ff6100; /* official brand orange */
  --rv-orange-deep: #d94f00;
  --rv-orange-lit: #ff8a3d;
  --rv-orange-pale: #ffb27a;
  --rv-sand: #f6f7f9;
  --rv-display: "Anton", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --rv-pad: clamp(1.25rem, 5vw, 5.5rem);
  --rv-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- shell: kill every white gap, keep the header opaque ---------- */
.rv1 body {
  background: var(--rv-ink);
}
.rv1 #root > div {
  background: var(--rv-ink);
}
/* The sticky bar is bg-white/85 by default - over a dark page that reads grey. */
.rv1 #root > div > .sticky {
  background: #fff !important;
}

/* ---------- strip the stock home page, keep only the hero ----------
   Matched structurally as well as by data-rv so the stock blocks are hidden on
   the first paint (routes-revamp-early.js sets .rv1 before React renders) and
   their background images are never fetched. */
.rv1 main .overflow-clip > [class*="md:block"] > *:not(:first-child):not([data-rv="hero"]),
.rv1 [data-rv="home-desktop"] > *:not(:first-child):not([data-rv="hero"]) {
  display: none !important;
}
/* Mobile keeps its DOM (the search sheet trigger lives there) but is not shown. */
.rv1 main .overflow-clip > [class*="md:hidden"],
.rv1 [data-rv="home-mobile"] {
  display: none !important;
}
@media (max-width: 767.98px) {
  .rv1 main .overflow-clip > [class*="md:block"],
  .rv1 [data-rv="home-desktop"] {
    display: none !important;
  }
}

/* Native compact sticky pill - never shown on home. It stays in the DOM so its
   expand button can still be clicked programmatically (phones: opens the sheet). */
html.rv1 .sticky.top-0 > .border-t,
html.rv1 .sticky.top-0[class*="z-50"] > .border-t {
  display: none !important;
}

/* ==========================================================================
   1. HERO - centre stage. One colossal line of Anton over a slowly drifting
      photo, the search card beneath it. Motion is ambient and cheap (transforms
      and background-position only) and switches off under reduced-motion.
   ========================================================================== */
.rv1 {
  --rv-hero-w: 68rem;
  --rv-hero-gap: clamp(1.4rem, 2.8vh, 2.5rem);
}

.rv1 [data-rv="hero"],
html.rv1 main section.relative.flex.h-\[100svh\] {
  position: relative !important;
  isolation: isolate;
  min-height: 100svh !important;
  height: 100svh !important;
  max-height: 100svh !important;
  background: var(--rv-ink) !important;
  overflow: hidden;
}
/* Photo layer - oversized so the 26s drift never exposes an edge */
.rv1 [data-rv="hero"]::before,
html.rv1 main section.relative.flex.h-\[100svh\]::before {
  content: "";
  position: absolute;
  inset: -4%;
  z-index: 0;
  background: var(--rv-ink) url("/images/rv/hero.webp") 58% 42% / cover no-repeat;
  transform-origin: 50% 40%;
  animation: rv-hero-drift 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes rv-hero-drift {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.07) translate3d(-1.2%, -0.9%, 0);
  }
}
/* Scrim - a very light, even wash of black over the whole photo, plus a fade
   at the foot so the page's ink continues without a seam */
.rv1 [data-rv="hero"]::after,
html.rv1 main section.relative.flex.h-\[100svh\]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(11, 13, 18, 0.92) 0%, rgba(11, 13, 18, 0.3) 18%, rgba(11, 13, 18, 0) 40%),
    rgba(0, 0, 0, 0.22);
}
/* Brand glow (injected by routes-revamp.js) - breathes behind the headline */
.rv1 [data-rv="hero"] .rv-hero-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(38% 34% at 50% 34%, rgba(255, 97, 0, 0.34), transparent 70%),
    radial-gradient(26% 30% at 10% 92%, rgba(19, 42, 142, 0.45), transparent 70%),
    radial-gradient(26% 30% at 92% 90%, rgba(255, 97, 0, 0.18), transparent 70%);
  mix-blend-mode: screen;
  animation: rv-hero-bloom 8s ease-in-out infinite alternate;
}
@keyframes rv-hero-bloom {
  from {
    opacity: 0.7;
    transform: scale(1);
  }
  to {
    opacity: 1;
    transform: scale(1.08);
  }
}

.rv1 [data-rv="hero"] > div[class~="absolute"][class~="inset-0"],
html.rv1 main section.relative.flex.h-\[100svh\] > div[class~="absolute"][class~="inset-0"] {
  display: none !important;
}

/* Column, centred under the header */
.rv1 [data-rv="hero"] .rv-hero-inner,
.rv1 [data-rv="hero"] > div.relative.z-20,
.rv1 [data-rv="hero"] > div.relative.flex,
html.rv1 main section.relative.flex.h-\[100svh\] > div.relative.z-20 {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: var(--rv-hero-gap) !important;
  width: min(var(--rv-hero-w), 100% - 3rem) !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 auto !important;
  padding: 7rem 0 4rem !important;
  text-align: center;
}

/* ---- copy ---- */
.rv1 [data-rv="hero"] .rv-hero-copy,
.rv1 [data-rv="hero"] .rv-hero-inner > .max-w-3xl,
html.rv1 main section.relative.flex.h-\[100svh\] > div.relative.z-20 > .max-w-3xl {
  position: relative !important;
  transform: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  text-align: center !important;
  flex: 0 0 auto;
}

/* Eyebrow: hairlines either side, like a title card */
.rv1 [data-rv="hero"] p[class*="uppercase"] {
  display: inline-flex !important;
  align-items: center;
  gap: 1rem;
  margin: 0 !important;
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.38em !important;
  color: rgba(255, 255, 255, 0.86) !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
.rv1 [data-rv="hero"] p[class*="uppercase"]::before,
.rv1 [data-rv="hero"] p[class*="uppercase"]::after {
  content: "";
  width: 3.25rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rv-orange-pale));
  box-shadow: 0 0 12px rgba(255, 97, 0, 0.5);
}
.rv1 [data-rv="hero"] p[class*="uppercase"]::after {
  background: linear-gradient(90deg, var(--rv-orange-pale), transparent);
}

/* Headline: one colossal line. Sized so "OWN THE OPEN ROAD" always fits the
   68rem column (Anton runs ~8.1em for the string); it caps rather than wraps. */
html.rv1 [data-rv="hero"] h1,
html.rv1 main section.relative.flex.h-\[100svh\] h1 {
  font-family: "Anton", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 400 !important;
  color: #fff !important;
  text-transform: uppercase;
  font-size: clamp(3rem, 5.6vw, 8.6rem) !important;
  line-height: 0.9 !important;
  letter-spacing: 0.004em !important;
  margin: 1.1rem 0 0 !important;
  max-width: none !important;
  white-space: nowrap;
  text-wrap: initial;
  text-shadow: none;
  animation: rv-hero-rise 0.9s var(--rv-ease) both;
}
@keyframes rv-hero-rise {
  from {
    clip-path: inset(0 0 100% 0);
    transform: translateY(0.35em);
  }
  to {
    clip-path: inset(-20% 0 -20% 0);
    transform: translateY(0);
  }
}
/* "open road" - flat official orange */
.rv1 [data-rv="hero"] h1 span {
  color: var(--rv-orange) !important;
  text-shadow: none;
}
/* Stock lead is replaced by .rv-hero-lead (injected) so "60 seconds" can be
   set as a highlight; the original stays in the DOM for React, unseen. */
.rv1 [data-rv="hero"] h1 + p {
  display: none !important;
}
.rv1 [data-rv="hero"] .rv-hero-lead {
  max-width: 44rem;
  margin: 1.5rem auto 0 !important;
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1rem, 1.15vw, 1.35rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.94);
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
  animation: rv-hero-fade 0.7s var(--rv-ease) 0.25s both;
}
.rv1 [data-rv="hero"] .rv-hero-lead em {
  font-style: normal;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  padding: 0 0.12em;
  background: linear-gradient(transparent 58%, rgba(255, 97, 0, 0.72) 58%, rgba(255, 97, 0, 0.72) 92%, transparent 92%);
}
@keyframes rv-hero-fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- search ---- */
.rv1 [data-rv="hero"] .rv-hero-searchwrap,
.rv1 [data-rv="hero"] .rv-hero-inner > [class*="max-w-5xl"],
html.rv1 main section.relative.flex.h-\[100svh\] > div.relative.z-20 > [class*="max-w-5xl"] {
  position: static !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  flex: 0 0 auto;
}
.rv1 [data-rv="hero"] .rv-hero-searchwrap > * + * {
  margin-top: 0.9rem !important;
}

/* Kill Framer enter-opacity/transforms so the hero never fades or slides -
   the JS strips inline styles once, the CSS holds them from then on. */
.rv1 [data-rv="hero"] .rv-hero-inner,
.rv1 [data-rv="hero"] .rv-hero-copy,
.rv1 [data-rv="hero"] .rv-hero-searchwrap,
.rv1 [data-rv="hero"] .rv-hero-searchwrap > *,
.rv1 [data-rv="hero"] form,
html.rv1 main section.relative.flex.h-\[100svh\] > div.relative.z-20,
html.rv1 main section.relative.flex.h-\[100svh\] > div.relative.z-20 > *,
html.rv1 main section.relative.flex.h-\[100svh\] > div.relative.z-20 > [class*="max-w-5xl"] > *,
html.rv1 main section.relative.flex.h-\[100svh\] form {
  opacity: 1 !important;
}
.rv1 [data-rv="hero"] .rv-hero-inner,
.rv1 [data-rv="hero"] .rv-hero-copy,
.rv1 [data-rv="hero"] .rv-hero-searchwrap > *,
html.rv1 main section.relative.flex.h-\[100svh\] > div.relative.z-20,
html.rv1 main section.relative.flex.h-\[100svh\] > div.relative.z-20 > *,
html.rv1 main section.relative.flex.h-\[100svh\] > div.relative.z-20 > [class*="max-w-5xl"] > * {
  transform: none !important;
}

/* Hold the stock field layout out of sight until the location picker has
   rebuilt the form (≤ ~80ms after route change); the animation is the safety
   net - if the enhancer never lands the form still shows after 0.6s. */
@keyframes rv-hold-form {
  0%,
  100% {
    visibility: hidden;
  }
}
html.rv1 main section.relative.flex.h-\[100svh\] form:not(.rlp-enhanced) {
  animation: rv-hold-form 0.6s steps(1, end) 1;
}

/* Frosted frame around the white card, rising in after the headline */
.rv1 [data-rv="hero"] .rv-hero-search {
  padding: 6px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, 0.8),
    0 12px 30px -16px rgba(0, 0, 0, 0.5),
    0 0 80px -20px rgba(255, 97, 0, 0.25);
  animation: rv-hero-fade 0.8s var(--rv-ease) 0.35s both;
}
.rv1 [data-rv="hero"] form,
.rv1 [data-rv="hero"] form.bg-white,
html.rv1 main section.relative.flex.h-\[100svh\] form {
  width: 100% !important;
  margin: 0 !important;
  border-radius: 20px !important;
  padding: 1rem 1.1rem !important;
  background: #fff !important;
  text-align: left;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
}
.rv1 [data-rv="hero"] button {
  font-weight: 800;
}
.rv1 [data-rv="hero"] .bg-accent-500,
.rv1 [data-rv="hero"] .bg-accent-600 {
  background: linear-gradient(180deg, var(--rv-orange-lit) 0%, var(--rv-orange) 55%, var(--rv-orange-deep) 100%) !important;
  border-radius: 12px !important;
  min-height: 3rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 18px 40px -14px rgba(255, 97, 0, 0.8) !important;
}
.rv1 [data-rv="hero"] .bg-accent-500:hover {
  background: linear-gradient(180deg, var(--rv-orange) 0%, var(--rv-orange-deep) 100%) !important;
}
/* Trust: frosted pills, centred */
.rv1 [data-rv="hero"] .rv-hero-trust {
  justify-content: center !important;
  gap: 0.55rem !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 0.8rem !important;
  text-align: center;
  animation: rv-hero-fade 0.8s var(--rv-ease) 0.5s both;
}
.rv1 [data-rv="hero"] .rv-hero-trust > span {
  padding: 0.42rem 0.85rem 0.42rem 0.7rem;
  border-radius: 999px;
  background: rgba(11, 13, 18, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  white-space: nowrap;
}
.rv1 [data-rv="hero"] .rv-hero-trust .text-accent-500 {
  color: var(--rv-orange-lit) !important;
}

.rv1 .rv-hero-flag {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .rv1 [data-rv="hero"]::before,
  html.rv1 main section.relative.flex.h-\[100svh\]::before,
  .rv1 [data-rv="hero"] .rv-hero-glow,
  html.rv1 [data-rv="hero"] h1,
  .rv1 [data-rv="hero"] .rv-hero-lead,
  .rv1 [data-rv="hero"] .rv-hero-search,
  .rv1 [data-rv="hero"] .rv-hero-trust {
    animation: none !important;
  }
}

/* Short windows: compact type, and let the hero grow rather than clip */
@media (max-height: 700px) {
  .rv1 [data-rv="hero"],
  html.rv1 main section.relative.flex.h-\[100svh\] {
    height: auto !important;
    max-height: none !important;
    min-height: 100svh !important;
  }
  .rv1 [data-rv="hero"] .rv-hero-inner,
  html.rv1 main section.relative.flex.h-\[100svh\] > div.relative.z-20 {
    height: auto !important;
    min-height: 100svh !important;
    padding-top: 6rem !important;
    padding-bottom: 1.25rem !important;
    gap: 1.1rem !important;
  }
  html.rv1 [data-rv="hero"] h1 {
    margin-top: 0.7rem !important;
  }
  .rv1 [data-rv="hero"] .rv-hero-lead {
    margin-top: 0.85rem !important;
    font-size: 1rem;
    line-height: 1.45;
  }
  .rv1 [data-rv="hero"] .rv-hero-searchwrap > * + * {
    margin-top: 0.7rem !important;
  }
}
@media (max-height: 620px) {
  .rv1 [data-rv="hero"] .rv-hero-lead {
    display: none !important;
  }
}

/* ==========================================================================
   2. Shared building blocks
   ========================================================================== */
#rv-home {
  background: var(--rv-ink);
  color: #fff;
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
}
/* :where() keeps these resets at zero specificity so the component rules below
   (and their colour/fit overrides) still win without !important. */
:where(#rv-home) * {
  box-sizing: border-box;
}
:where(#rv-home) section {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
}
:where(#rv-home) a {
  color: inherit;
  text-decoration: none;
}
:where(#rv-home) img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rv-orange);
}
.rv-eyebrow::before {
  content: "";
  width: 2.2rem;
  height: 2px;
  background: var(--rv-orange);
}
.rv-eyebrow.rv-on-orange {
  color: rgba(255, 255, 255, 0.95);
}
.rv-eyebrow.rv-on-orange::before {
  background: rgba(255, 255, 255, 0.9);
}

.rv-h2 {
  margin: 0;
  font-family: var(--rv-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.35rem, 5.3vw, 5rem);
  line-height: 0.9;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.rv-h3 {
  margin: 0;
  font-family: var(--rv-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 2.5vw, 2.5rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.rv-lead {
  margin: 1.1rem 0 0;
  max-width: 42ch;
  font-size: clamp(0.96rem, 1.05vw, 1.1rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.74);
}
.rv-lead.rv-dark {
  color: rgba(11, 13, 18, 0.7);
}

.rv-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  /* every band is a grid, so opt out of the default stretch */
  justify-self: start;
  align-self: start;
  width: fit-content;
  margin-top: 1.9rem;
  padding: 1.05rem 1.8rem;
  border: 0;
  border-radius: 999px;
  background: var(--rv-orange);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.35s var(--rv-ease), background 0.3s, box-shadow 0.35s;
  box-shadow: 0 20px 44px -18px rgba(255, 97, 0, 0.8);
}
.rv-btn:hover {
  background: var(--rv-orange-deep);
  transform: translateY(-2px);
}
.rv-btn svg {
  transition: transform 0.35s var(--rv-ease);
}
.rv-btn:hover svg {
  transform: translateX(4px);
}
.rv-btn.rv-btn-light {
  background: #fff;
  color: var(--rv-ink);
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.6);
}
.rv-btn.rv-btn-light:hover {
  background: #fff;
  color: var(--rv-navy);
}
.rv-btn.rv-btn-ghost {
  background: transparent;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4) inset;
}
.rv-btn.rv-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
}

/* Light heading bands - white surface, navy type (client: no black headings) */
.rv-band-light {
  background: #fff;
  color: var(--rv-ink);
}
.rv-band-light .rv-h2,
.rv-band-light .rv-h3 {
  color: var(--rv-ink);
}
.rv-band-light .rv-btn-ghost {
  color: var(--rv-ink);
  box-shadow: 0 0 0 2px rgba(11, 13, 18, 0.18) inset;
}
.rv-band-light .rv-btn-ghost:hover {
  background: rgba(19, 42, 142, 0.06);
  box-shadow: 0 0 0 2px var(--rv-navy) inset;
  color: var(--rv-navy);
}

/* scroll reveal */
.rv-rise {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--rv-ease), transform 0.75s var(--rv-ease);
}
.rv-rise.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .rv-rise {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   3. Mobile hero (md-) - search card dead-center
   ========================================================================== */
.rv-mhero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.1rem;
  min-height: 100svh;
  padding: 5.5rem 1.15rem 5.5rem;
  overflow: visible;
}
@media (min-width: 768px) {
  .rv-mhero {
    display: none;
  }
}
.rv-mhero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/images/rv/hero-1400.webp") center 38% / cover;
}
.rv-mhero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 48%, rgba(8, 10, 16, 0.28) 0%, rgba(8, 10, 16, 0.62) 100%),
    linear-gradient(to bottom, rgba(8, 10, 16, 0.5) 0%, rgba(8, 10, 16, 0.22) 40%, rgba(8, 10, 16, 0.75) 100%);
}
.rv-mhero > * {
  z-index: 1;
}
.rv-mhero-copy {
  position: relative;
  width: 100%;
  max-width: 28rem;
  text-align: center;
  z-index: 2;
}
.rv-mhero-copy .rv-eyebrow {
  justify-content: center;
  margin-bottom: 0.5rem;
}
.rv-mhero-meta {
  position: relative;
  width: 100%;
  max-width: 28rem;
  z-index: 2;
}
/* Mobile hero: no class shortcut chips (SUVs / Sedans / Luxury). */
.rv-mhero .rv-mchips,
.rv-mhero [data-rv-chips] {
  display: none !important;
}
.rv-mhero h1 {
  margin: 0;
  font-family: var(--rv-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.85rem, 8.5vw, 2.35rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-align: center;
}
.rv-mhero h1 em {
  font-style: normal;
  color: var(--rv-orange);
}
.rv-msearch {
  display: grid;
  gap: 0.55rem;
  position: relative;
  width: 100%;
  max-width: 28rem;
  margin: 0;
  padding: 0.85rem 0.85rem 0.95rem;
  border: 0;
  border-radius: 22px;
  background: #fff;
  color: var(--rv-ink);
  text-align: left;
  cursor: pointer;
  z-index: 3;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.95),
    0 0 0 10px rgba(255, 255, 255, 0.18),
    0 32px 64px -24px rgba(0, 0, 0, 0.7);
}
.rv-msearch-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  background: #f4f5f7;
}
.rv-msearch-row span {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b7280;
}
.rv-msearch-row strong {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--rv-ink);
}
.rv-msearch-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  margin-top: 0.15rem;
  padding: 0.95rem 1rem;
  border-radius: 999px;
  background: var(--rv-orange);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.rv-mchips {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.95rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rv-mchips::-webkit-scrollbar {
  display: none;
}
.rv-mchips a {
  flex: 0 0 auto;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22) inset;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.rv-mtrust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.1rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
}
.rv-mtrust li::before {
  content: "✓";
  margin-right: 0.4rem;
  color: var(--rv-orange);
  font-weight: 900;
}

/* ==========================================================================
   4. Marquee strip
   ========================================================================== */
.rv-ticker {
  display: none !important;
}
.rv-ticker-track {
  display: flex;
  width: max-content;
  animation: rv-marquee 34s linear infinite;
}
.rv-ticker:hover .rv-ticker-track {
  animation-play-state: paused;
}
.rv-ticker-track span {
  display: inline-flex;
  align-items: center;
  gap: 2.6rem;
  padding-right: 2.6rem;
  font-family: var(--rv-display);
  font-size: clamp(0.95rem, 1.6vw, 1.35rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rv-ticker-track span::after {
  content: "★";
  font-family: system-ui, sans-serif;
  font-size: 0.75em;
  opacity: 0.8;
}
@keyframes rv-marquee {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rv-ticker-track {
    animation: none;
  }
}

/* ==========================================================================
   5. Deal split band
   ========================================================================== */
.rv-deal {
  display: grid;
  background: var(--rv-navy);
}
@media (min-width: 900px) {
  .rv-deal {
    grid-template-columns: 1.02fr 1fr;
  }
}
.rv-deal-copy {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  padding: clamp(1.9rem, 2.6vw, 2.5rem) var(--rv-pad);
  background: var(--rv-navy);
}
@media (min-width: 900px) {
  .rv-deal-copy {
    clip-path: polygon(0 0, 100% 0, calc(100% - 4.5rem) 100%, 0 100%);
    margin-right: -4.5rem;
    padding-right: calc(var(--rv-pad) + 3rem);
  }
}
.rv-deal-media {
  position: relative;
  min-height: clamp(13rem, 20vw, 16rem);
  background: var(--rv-ink-2);
}
/* Pin media so intrinsic portrait/landscape ratios don't stretch the band. */
.rv-deal-media img,
.rv-deal-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rv-deal-media .rv-deal-poster {
  z-index: 1;
  transition: opacity 0.5s var(--rv-ease);
}
.rv-deal-media .rv-deal-video {
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s var(--rv-ease);
}
.rv-deal-media.is-ready .rv-deal-video {
  opacity: 1;
}
.rv-deal-media.is-ready .rv-deal-poster {
  opacity: 0;
  pointer-events: none;
}
.rv-price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
  font-family: var(--rv-display);
  font-size: clamp(4.4rem, 11vw, 9.5rem);
  line-height: 0.82;
  letter-spacing: -0.03em;
  color: var(--rv-orange);
}
.rv-price small {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(0.9rem, 1.4vw, 1.35rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.rv-code {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  justify-self: start;
  width: fit-content;
  margin-top: 1.6rem;
  padding: 0.7rem 1.1rem;
  border: 2px dashed rgba(255, 255, 255, 0.45);
  border-radius: 10px;
  font-family: ui-monospace, monospace;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.22em;
}
.rv-code b {
  color: var(--rv-orange);
}

/* ==========================================================================
   6. Fleet strip - three adjoining panels, edge to edge
   Square corners, no gutters, no outer padding: the white heading band sits
   straight on the ink strip and the strip sits straight on the mosaic below.
   Each panel is a short landscape row - copy on the left, studio render on the
   right - so the whole fleet reads in one glance.
   ========================================================================== */
.rv-fleet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(3.2rem, 6vw, 6rem) var(--rv-pad) clamp(1.8rem, 3vw, 2.8rem);
}
.rv-showroom {
  --card-pad: clamp(1.25rem, 1.9vw, 2.1rem);
  --stage-w: 54%;
  /* hairline between neighbours; set to transparent for one seamless strip */
  --divider: rgba(255, 255, 255, 0.08);
  position: relative;
  padding: 0;
  background: var(--rv-ink);
}
/* The wrapper itself does not rise - its panels stagger in instead. */
.rv-showroom.rv-rise {
  opacity: 1;
  transform: none;
  transition: none;
}
.rv-showroom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
@media (min-width: 1024px) {
  .rv-showroom-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .rv-showroom-grid[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rv-showroom-grid[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
  }
  .rv-car + .rv-car {
    border-left: 1px solid var(--divider);
  }
}
@media (min-width: 1280px) {
  .rv-showroom {
    --stage-w: 56%;
  }
}
@media (min-width: 1440px) {
  .rv-showroom {
    --stage-w: 58%;
  }
}
/* Below the desktop grid the panels stack as full-width rows, still joined.
   Phones replace that stack with a sideways strip — see the block below. */
@media (max-width: 1023.98px) {
  .rv-showroom {
    --stage-w: 42%;
  }
  .rv-car + .rv-car {
    border-top: 1px solid var(--divider);
  }
}
@media (max-width: 639.98px) {
  .rv-showroom {
    --card-pad: 1.15rem;
    --stage-w: 50%;
  }
}
/* Phone: one card, with a quarter of the next one peeking (1.25 visible).
   The white gutter is the same above the cards, under them, at the left edge,
   and between neighbours. */
@media (max-width: 767.98px) {
  .rv-fleet-head {
    padding-bottom: var(--rv-pad);
  }
  .rv-showroom {
    --fleet-gap: var(--rv-pad);
    --stage-w: 44%;
    background: #fff;
    padding-bottom: var(--rv-pad);
  }
  .rv-showroom-grid {
    display: flex;
    align-items: stretch;
    gap: var(--fleet-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--rv-pad);
    padding-left: var(--rv-pad);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  /* Room after the last card so it can snap to the same left edge as the first.
     Without this the end of the row stops short and the previous card's arrow
     sits on top of the last one. */
  .rv-showroom-grid::after {
    content: "";
    flex: 0 0 calc(100% - ((100% - var(--fleet-gap)) / 1.25) - var(--fleet-gap));
  }
  .rv-showroom-grid::-webkit-scrollbar {
    display: none;
  }
  .rv-showroom-grid > .rv-car {
    flex: 0 0 calc((100% - var(--fleet-gap)) / 1.25);
    width: calc((100% - var(--fleet-gap)) / 1.25);
    min-width: 0;
    border-radius: 1.15rem;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .rv-car + .rv-car {
    border-top: 0;
  }
}

/* Panel grid: copy top-left, render right (centred on the copy block), and the
   price / CTA row across the whole foot - so a long converted price such as
   "L3,506.82" never collides with the arrow, whatever the column width. */
.rv-car {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--stage-w);
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "head  stage"
    "name  stage"
    "tag   stage"
    "specs stage"
    ".     stage"
    "foot  foot";
  column-gap: clamp(0.5rem, 1vw, 1rem);
  min-height: clamp(12rem, 15.5vw, 14.5rem);
  padding: var(--card-pad) 0 var(--card-pad) var(--card-pad);
  background: #0a0d13;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  transition: background 0.45s var(--rv-ease);
}
/* Tablet rows are wide enough for the price row to stay in the copy column, so
   the render takes the full row height and the copy centres beside it. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .rv-car {
    grid-template-rows: auto auto auto auto 0 auto;
    grid-template-areas:
      "head  stage"
      "name  stage"
      "tag   stage"
      "specs stage"
      ".     stage"
      "foot  stage";
    align-content: center;
    padding-block: clamp(1.25rem, 3vw, 2rem);
  }
}
/* orange rule that draws in along the foot of the hovered panel */
.rv-car::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 3px;
  background: var(--rv-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--rv-ease);
}
.rv-car:hover,
.rv-car:focus-visible {
  background: #10141d;
  outline: none;
}
.rv-car:hover::before,
.rv-car:focus-visible::before {
  transform: scaleX(1);
}

/* The copy wrapper only groups markup; its children are the grid items. */
.rv-car-copy {
  display: contents;
}
.rv-car-head,
.rv-car-name,
.rv-car-tag,
.rv-car-specs,
.rv-car-foot {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.rv-car-head {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.rv-car-idx {
  font-family: var(--rv-display);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: var(--rv-orange);
}
.rv-car-count {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.62rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.rv-car-count::before {
  content: "";
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.22);
}
.rv-car-name {
  grid-area: name;
  margin: 0.7rem 0 0;
  font-family: var(--rv-display);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #fff;
}
.rv-car-tag {
  grid-area: tag;
  margin: 0.3rem 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.6);
}

/* Render sits flush with the panel's right edge; its studio backdrop is a hair
   off the panel ink, so the foot and the side facing the copy dissolve. */
.rv-car-stage {
  grid-area: stage;
  align-self: center;
  position: relative;
  z-index: 1;
  min-width: 0;
}
/* warm floor light under the car - shows through the render's faded foot */
.rv-car-stage::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 0;
  bottom: -8%;
  z-index: -1;
  height: 58%;
  background: radial-gradient(ellipse at 50% 90%, rgba(255, 97, 0, 0.36) 0%, rgba(255, 97, 0, 0) 64%);
  filter: blur(14px);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.6s var(--rv-ease);
}
.rv-car:hover .rv-car-stage::after,
.rv-car:focus-visible .rv-car-stage::after {
  opacity: 1;
}
.rv-car-stage img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 14%),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 14%),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 84%, transparent 100%);
  mask-composite: intersect;
  transform-origin: 50% 72%;
  transition: transform 1s var(--rv-ease);
}
.rv-car:hover .rv-car-stage img,
.rv-car:focus-visible .rv-car-stage img {
  transform: translateX(1.5%) scale(1.035);
}

/* one quiet line of specs, dot-separated */
.rv-car-specs {
  grid-area: specs;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.rv-car-specs li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
}
.rv-car-specs li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--rv-orange);
}

.rv-car-foot {
  grid-area: foot;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 1rem;
  padding-right: var(--card-pad);
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .rv-car-foot {
    margin-top: 1.4rem;
    padding-right: 0;
  }
}
.rv-car-price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
  min-width: 0;
}
.rv-car-price span {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.rv-car-price b {
  font-family: var(--rv-display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap;
}
.rv-car-price b.rv-car-price--text {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rv-car-go {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.rv-car-go svg {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.62rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
  transition: background 0.35s var(--rv-ease), box-shadow 0.35s var(--rv-ease), transform 0.35s var(--rv-ease);
}
.rv-car:hover .rv-car-go svg,
.rv-car:focus-visible .rv-car-go svg {
  background: var(--rv-orange);
  box-shadow: 0 0 0 1px var(--rv-orange) inset, 0 12px 26px -10px rgba(255, 97, 0, 0.95);
  transform: translateX(4px);
}

/* Very narrow panels: the CTA keeps only its arrow. */
@container (max-width: 330px) {
  .rv-car-go > span {
    display: none;
  }
}

/* staggered entrance once the strip scrolls into view */
.rv-showroom.rv-rise .rv-car {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s var(--rv-ease) calc(var(--i, 0) * 110ms),
    transform 0.7s var(--rv-ease) calc(var(--i, 0) * 110ms),
    background 0.45s var(--rv-ease);
}
.rv-showroom.rv-rise.is-in .rv-car {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .rv-showroom.rv-rise .rv-car,
  .rv-car,
  .rv-car-stage img {
    transition: none !important;
    opacity: 1;
    transform: none;
  }
  .rv-car::before,
  .rv-car-stage::after {
    transition: none !important;
  }
}

/* ==========================================================================
   7. Mosaic - two adjoining panels, no gutter
   ========================================================================== */
.rv-mosaic {
  display: grid;
  gap: 0;
}
@media (min-width: 900px) {
  .rv-mosaic {
    grid-template-columns: 1fr 1fr;
  }
}
.rv-panel {
  position: relative;
  display: grid;
  align-content: end;
  min-height: clamp(24rem, 46vw, 38rem);
  padding: clamp(2.2rem, 4vw, 4rem);
  overflow: hidden;
}
.rv-panel > *:not(.rv-panel-media) {
  position: relative;
  z-index: 2;
}
.rv-panel-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.rv-panel-media img {
  transition: transform 1.4s var(--rv-ease);
}
.rv-panel:hover .rv-panel-media img {
  transform: scale(1.06);
}
.rv-panel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 21rem;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.8) 40%, rgba(0, 0, 0, 0) 100%);
}
.rv-badge {
  align-self: start;
  justify-self: start;
  margin-bottom: auto;
  padding: 0.5rem 0.9rem;
  background: #fff;
  color: var(--rv-ink);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.rv-list {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}
.rv-list li {
  display: flex;
  gap: 0.7rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.rv-list li::before {
  content: "→";
  font-weight: 900;
  color: #fff;
  opacity: 0.75;
}

/* ==========================================================================
   8. Steps
   ========================================================================== */
.rv-steps {
  background: #fff;
}
.rv-steps-head {
  padding: clamp(3.2rem, 6vw, 6rem) var(--rv-pad) clamp(1.8rem, 3vw, 2.6rem);
}
.rv-grid-3 {
  display: grid;
  gap: 0;
}
@media (min-width: 800px) {
  .rv-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Phone: same sideways strip as the fleet — one step, a quarter of the next.
   Top, bottom, left and the space between cards are one gutter. */
@media (max-width: 799.98px) {
  .rv-steps-head {
    padding-bottom: var(--rv-pad);
  }
  .rv-steps .rv-grid-3 {
    --step-gap: var(--rv-pad);
    display: flex;
    align-items: stretch;
    gap: var(--step-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--rv-pad);
    padding-left: var(--rv-pad);
    padding-bottom: var(--rv-pad);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .rv-steps .rv-grid-3::after {
    content: "";
    flex: 0 0 calc(100% - ((100% - var(--step-gap)) / 1.25) - var(--step-gap));
  }
  .rv-steps .rv-grid-3::-webkit-scrollbar {
    display: none;
  }
  .rv-steps .rv-step {
    flex: 0 0 calc((100% - var(--step-gap)) / 1.25);
    width: calc((100% - var(--step-gap)) / 1.25);
    min-width: 0;
    min-height: 22rem;
    border-radius: 1.15rem;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}
.rv-step {
  position: relative;
  min-height: clamp(20rem, 34vw, 28rem);
  display: grid;
  align-content: end;
  padding: clamp(1.6rem, 2.6vw, 2.6rem);
  overflow: hidden;
}
.rv-step-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.rv-step-media img {
  transition: transform 1.4s var(--rv-ease);
}
.rv-step:hover .rv-step-media img {
  transform: scale(1.07);
}
.rv-step::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 18rem;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.78) 42%, rgba(0, 0, 0, 0) 100%);
}
.rv-step > *:not(.rv-step-media) {
  position: relative;
  z-index: 2;
}
.rv-step-n {
  font-family: var(--rv-display);
  font-size: clamp(3.6rem, 7vw, 6rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.55);
}
.rv-step h3 {
  margin: 0.8rem 0 0;
  font-family: var(--rv-display);
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1;
  text-transform: uppercase;
}
.rv-step p {
  margin: 0.6rem 0 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
}

/* ==========================================================================
   9. Stats bar
   ========================================================================== */
.rv-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  background: var(--rv-orange);
  color: #fff;
}
@media (min-width: 800px) {
  .rv-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}
.rv-stat {
  padding: clamp(1.6rem, 3vw, 2.8rem) clamp(1.1rem, 2vw, 2rem);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.22) inset, 0 1px 0 rgba(255, 255, 255, 0.22) inset;
}
.rv-stat b {
  display: block;
  font-family: var(--rv-display);
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
}
.rv-stat span {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* ==========================================================================
   10. Destinations mosaic
   ========================================================================== */
.rv-cities-head {
  padding: clamp(3.2rem, 6vw, 6rem) var(--rv-pad) clamp(1.8rem, 3vw, 2.6rem);
}
.rv-cities-sec {
  background: #fff;
}
.rv-cities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
@media (min-width: 700px) {
  .rv-cities {
    grid-template-columns: repeat(4, 1fr);
  }
}
.rv-city {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: grid;
  align-content: end;
  padding: clamp(0.9rem, 1.6vw, 1.5rem);
}
/* Wide tiles span both mobile columns too, so the mosaic never leaves a hole. */
.rv-city.rv-city-wide {
  grid-column: span 2;
  aspect-ratio: 2 / 1;
}
.rv-city-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.rv-city-media img {
  transition: transform 1.2s var(--rv-ease);
}
.rv-city:hover .rv-city-media img {
  transform: scale(1.09);
}
.rv-city::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 9rem;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.72) 40%, rgba(0, 0, 0, 0) 100%);
  transition: background 0.45s;
}
.rv-city:hover::after {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.82) 46%, rgba(0, 0, 0, 0) 100%);
}
.rv-city > *:not(.rv-city-media) {
  position: relative;
  z-index: 2;
}
.rv-city-all {
  background: var(--rv-orange);
  align-content: center;
  justify-items: start;
}
.rv-city-all::after {
  background: none;
}
.rv-city-all em {
  color: rgba(255, 255, 255, 0.9);
}
.rv-city strong {
  font-family: var(--rv-display);
  font-size: clamp(1.05rem, 1.9vw, 1.75rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.rv-city em {
  display: block;
  margin-top: 0.3rem;
  font-style: normal;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* ==========================================================================
   11. Closing CTA + link farm (flows straight into the dark footer)
   ========================================================================== */
.rv-close {
  background: var(--rv-navy-deep);
}
.rv-close-media {
  position: absolute;
  inset: 0 0 auto 0;
  height: 100%;
  z-index: 0;
}
.rv-close::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Scrim hugs the copy on the left instead of washing the whole photo, so the
     top-right of the shot stays clear. The link grid gets its own block below. */
  background: linear-gradient(to right, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.72) 32%, rgba(0, 0, 0, 0) 62%),
    linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0) 52%);
}
.rv-close > *:not(.rv-close-media) {
  position: relative;
  z-index: 2;
}
.rv-close-inner {
  display: grid;
  max-width: 46rem;
  padding: clamp(3.8rem, 8vw, 8rem) var(--rv-pad) clamp(2.4rem, 4vw, 3.4rem);
}
.rv-links {
  padding: clamp(1.6rem, 2.4vw, 2.2rem) var(--rv-pad) clamp(3rem, 5vw, 4.5rem);
  background: rgba(0, 0, 0, 0.88);
}
.rv-links h4 {
  margin: 0 0 1.4rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.rv-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.55rem 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 1.6rem;
}
.rv-links-grid a {
  font-size: 0.83rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.25s, transform 0.25s;
}
.rv-links-grid a:hover {
  color: var(--rv-orange);
  transform: translateX(3px);
}

/* ==========================================================================
   12. Typography escape hatch - MUST stay in @layer theme
   --------------------------------------------------------------------------
   The app's Tailwind base layer sets font-family/font-size/line-height on
   h1–h3 and p with !important:

     @layer base { h1,h2,h3,p,.font-display { font-family: var(--font-display)
                   !important } h2 { font-size: var(--text-h2) !important } … }

   Cascade-layer precedence is *reversed* for !important declarations, so an
   unlayered !important rule can never win against it, no matter how specific.
   "theme" is declared ahead of "base" by the bundle, which makes these the
   winning declarations. Everything else (colour, spacing, tracking) stays
   unlayered above - only the three hijacked properties live here.
   ========================================================================== */
@layer theme {
  html.rv1 [data-rv="hero"] h1,
  #rv-home .rv-mhero h1,
  #rv-home .rv-h2,
  #rv-home .rv-h3,
  #rv-home .rv-price,
  #rv-home .rv-car-name,
  #rv-home .rv-car-price b,
  #rv-home .rv-step h3,
  #rv-home .rv-stat b,
  #rv-home .rv-city strong,
  #rv-home .rv-step-n,
  #rv-home .rv-ticker-track span,
  #rv-home .rv-hero-flag b {
    font-family: "Anton", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 400 !important;
  }

  html.rv1 [data-rv="hero"] h1 {
    font-size: clamp(3rem, 5.6vw, 8.6rem) !important;
    line-height: 0.9 !important;
  }
  @media (max-height: 700px) {
    html.rv1 [data-rv="hero"] h1 {
      font-size: clamp(2.6rem, 5.6vw, 4.8rem) !important;
    }
  }
  #rv-home .rv-mhero h1 {
    font-size: clamp(1.85rem, 8.5vw, 2.35rem) !important;
    line-height: 1.05 !important;
  }
  #rv-home .rv-h2 {
    font-size: clamp(2.35rem, 5.3vw, 5rem) !important;
    line-height: 0.9 !important;
  }
  #rv-home .rv-h3 {
    font-size: clamp(1.6rem, 2.6vw, 2.5rem) !important;
    line-height: 0.95 !important;
  }
  /* Fleet panels size their type from their own width (cqi), so the same rule
     fits a 3-up desktop cell, a stacked tablet row and a phone row. */
  #rv-home .rv-car-name {
    font-size: 2rem !important;
    font-size: clamp(1.55rem, 8cqi, 2.4rem) !important;
    line-height: 0.95 !important;
  }
  #rv-home .rv-car-price b {
    font-size: 1.5rem !important;
    font-size: clamp(1.3rem, 5.2cqi, 1.75rem) !important;
  }
  #rv-home .rv-car-price b.rv-car-price--text {
    font-size: 1rem !important;
  }
  #rv-home .rv-step h3 {
    font-size: clamp(1.35rem, 2vw, 1.9rem) !important;
    line-height: 1 !important;
  }
  #rv-home .rv-price {
    font-size: clamp(4.4rem, 11vw, 9.5rem) !important;
    line-height: 0.82 !important;
  }

  /* Body copy keeps the sans face and the sizes set above. */
  #rv-home .rv-lead,
  #rv-home .rv-eyebrow,
  #rv-home .rv-car-tag,
  #rv-home .rv-step p,
  #rv-home .rv-code,
  #rv-home .rv-links h4 {
    font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif !important;
  }
  #rv-home .rv-lead {
    font-size: clamp(0.96rem, 1.05vw, 1.1rem) !important;
    line-height: 1.65 !important;
  }
  #rv-home .rv-eyebrow {
    font-size: 0.66rem !important;
    line-height: 1.2 !important;
  }
  #rv-home .rv-car-tag {
    font-size: 0.86rem !important;
    line-height: 1.45 !important;
  }
  #rv-home .rv-step p {
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
  }
  #rv-home .rv-price small {
    font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: clamp(0.9rem, 1.4vw, 1.35rem) !important;
    font-weight: 800 !important;
  }
}

/* ==========================================================================
   Sticky search - floating booking bar (home, once the hero search scrolls away)
   One bar, one set of controls: each cell opens the hero form's own picker
   (location dropdown, inline calendar, time menu) anchored to that cell.
   ========================================================================== */
#rv-sticky-search {
  position: fixed;
  top: var(--rv-nav-h, 3.5rem);
  left: 0;
  right: 0;
  z-index: 55;
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  color: var(--rv-ink);
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(15, 18, 25, 0.08);
  box-shadow: 0 18px 40px -24px rgba(15, 18, 25, 0.4);
  transform: translateY(-10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.3s var(--rv-ease),
    opacity 0.2s ease,
    top 0.3s var(--rv-ease),
    visibility 0s linear 0.3s;
}
html.rv1[data-rv-ss="on"] #rv-sticky-search {
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 0.38s var(--rv-ease),
    opacity 0.22s ease,
    top 0.3s var(--rv-ease);
}
html.rv1[data-rms-sheet-open] #rv-sticky-search {
  visibility: hidden;
  pointer-events: none;
}

/* ---- layout */
.rv-ss__inner {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  max-width: 110rem;
  margin: 0 auto;
  padding: 0.7rem 1.25rem 0.55rem;
}
.rv-ss__fields {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
  min-width: 0;
}

/* ---- cells */
.rv-ss__cell {
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  min-height: 3.6rem;
  margin: 0;
  padding: 0.45rem 0.75rem 0.45rem 0.55rem;
  border: 1px solid #e5e8ef;
  border-radius: 14px;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}
.rv-ss__cell--loc {
  flex: 1.7 1 15rem;
}
.rv-ss__cell:hover {
  border-color: #ffc59a;
  background: #fffaf6;
}
.rv-ss__cell:focus-visible {
  outline: none;
  border-color: var(--rv-orange);
  box-shadow: 0 0 0 3px rgba(255, 97, 0, 0.22);
}
.rv-ss__cell.is-active {
  border-color: var(--rv-orange);
  background: #fff6ee;
  box-shadow: 0 0 0 3px rgba(255, 97, 0, 0.16);
}
.rv-ss__cell--drop {
  display: none;
}
html.rv1[data-rv-diff="on"] .rv-ss__cell--drop {
  display: flex;
  animation: rv-ss-pop 0.26s var(--rv-ease);
}

.rv-ss__pair {
  display: flex;
  flex: 1.6 1 17rem;
  align-items: stretch;
  min-width: 0;
  padding: 0.18rem;
  border: 1px solid #e5e8ef;
  border-radius: 14px;
  background: #fff;
  transition: border-color 0.18s ease;
}
.rv-ss__pair:hover {
  border-color: #ffd7ba;
}
.rv-ss__pair .rv-ss__cell {
  min-height: calc(3.6rem - 0.36rem - 2px);
  border: 0;
  border-radius: 11px;
  background: transparent;
}
.rv-ss__pair .rv-ss__cell:hover {
  background: #fff7f0;
}
.rv-ss__pair .rv-ss__cell:focus-visible,
.rv-ss__pair .rv-ss__cell.is-active {
  background: #fff6ee;
  box-shadow: inset 0 0 0 1.5px var(--rv-orange);
}
.rv-ss__pair .rv-ss__cell--time {
  flex: 0.85 1 0;
}
.rv-ss__split {
  flex: 0 0 1px;
  align-self: stretch;
  margin: 0.55rem 0;
  background: #e5e8ef;
}

.rv-ss__ico {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.65rem;
  background: var(--rv-orange);
  color: #fff;
  transition: transform 0.2s var(--rv-ease);
}
.rv-ss__ico svg {
  display: block;
  width: 15px;
  height: 15px;
}
.rv-ss__ico--soft {
  background: #fff1e6;
  color: var(--rv-orange-deep);
}
.rv-ss__cell.is-active .rv-ss__ico {
  transform: scale(1.06);
}
.rv-ss__copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 auto;
}
.rv-ss__k {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a91a0;
}
.rv-ss__cell.is-active .rv-ss__k {
  color: var(--rv-orange-deep);
}
.rv-ss__copy strong {
  display: block;
  overflow: hidden;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--rv-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rv-ss__copy strong.is-empty {
  font-weight: 600;
  color: #9aa1ad;
}
.rv-ss__chev {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  margin-left: 0.15rem;
  color: #b8bec9;
  transition:
    transform 0.22s var(--rv-ease),
    color 0.2s ease;
}
.rv-ss__chev svg {
  width: 14px;
  height: 14px;
}
.rv-ss__cell.is-active .rv-ss__chev {
  transform: rotate(180deg);
  color: var(--rv-orange-deep);
}
.rv-ss__cell--time .rv-ss__chev {
  display: none;
}

/* ---- primary action */
.rv-ss__book {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  align-self: stretch;
  min-width: 9.75rem;
  margin: 0;
  padding: 0 1.4rem;
  border: 0;
  border-radius: 14px;
  background: var(--rv-orange);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 12px 24px -12px rgba(255, 97, 0, 0.75);
  transition:
    background 0.18s ease,
    transform 0.18s var(--rv-ease),
    box-shadow 0.18s ease;
}
.rv-ss__book svg {
  width: 16px;
  height: 16px;
  transition: transform 0.22s var(--rv-ease);
}
.rv-ss__book:hover {
  background: var(--rv-orange-deep);
  transform: translateY(-1px);
  box-shadow: 0 16px 28px -12px rgba(255, 97, 0, 0.8);
}
.rv-ss__book:hover svg {
  transform: translateX(3px);
}
.rv-ss__book:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 5px var(--rv-orange);
}
.rv-ss__book:active {
  transform: translateY(0);
}

/* ---- options row: chips + promo */
.rv-ss__opts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  max-width: 110rem;
  margin: 0 auto;
  padding: 0 1.25rem 0.7rem;
}
.rv-ss__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.05rem;
  margin: 0;
  padding: 0 0.5rem 0 0.65rem;
  border: 1px solid #e5e8ef;
  border-radius: 999px;
  background: #fff;
  color: #4b5563;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}
.rv-ss__chip:hover {
  border-color: #ffc59a;
  color: var(--rv-ink);
}
.rv-ss__chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 97, 0, 0.22);
}
.rv-ss__chip[aria-checked="true"] {
  border-color: #ffd2b0;
  background: #fff4ea;
  color: var(--rv-orange-deep);
}
.rv-ss__chip-ico {
  display: grid;
  place-items: center;
  color: #9aa1ad;
}
.rv-ss__chip[aria-checked="true"] .rv-ss__chip-ico {
  color: var(--rv-orange-deep);
}
.rv-ss__chip-ico svg {
  width: 14px;
  height: 14px;
}
.rv-ss__switch {
  position: relative;
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.1rem;
  border-radius: 999px;
  background: #cfd4dc;
  transition: background 0.18s ease;
}
.rv-ss__switch::after {
  content: "";
  position: absolute;
  top: 0.12rem;
  left: 0.12rem;
  width: 0.86rem;
  height: 0.86rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 18, 25, 0.28);
  transition: transform 0.22s var(--rv-ease);
}
.rv-ss__chip[aria-checked="true"] .rv-ss__switch {
  background: var(--rv-orange);
}
.rv-ss__chip[aria-checked="true"] .rv-ss__switch::after {
  transform: translateX(0.8rem);
}

.rv-ss__promo {
  display: none;
  align-items: center;
  gap: 0.4rem;
  height: 2.05rem;
  margin: 0;
  padding: 0 0.55rem 0 0.65rem;
  border: 1px solid #e5e8ef;
  border-radius: 999px;
  background: #fff;
  transition: border-color 0.18s ease;
}
html.rv1[data-rv-promo="on"] .rv-ss__promo {
  display: inline-flex;
  animation: rv-ss-pop 0.24s var(--rv-ease);
}
.rv-ss__promo:focus-within {
  border-color: var(--rv-orange);
  box-shadow: 0 0 0 3px rgba(255, 97, 0, 0.16);
}
.rv-ss__promo.has-code {
  border-color: #bfe6cc;
  background: #f3fbf5;
}
.rv-ss__promo-ico,
.rv-ss__promo-ok {
  display: grid;
  place-items: center;
  color: #9aa1ad;
}
.rv-ss__promo-ico svg,
.rv-ss__promo-ok svg {
  width: 14px;
  height: 14px;
}
.rv-ss__promo-ok {
  display: none;
  color: #15803d;
}
.rv-ss__promo.has-code .rv-ss__promo-ico {
  display: none;
}
.rv-ss__promo.has-code .rv-ss__promo-ok {
  display: grid;
}
.rv-ss__promo input {
  width: 8.5rem;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rv-ink);
}
.rv-ss__promo input::placeholder {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #9aa1ad;
}
.rv-ss__hint {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: #8a91a0;
}
.rv-ss__summary {
  display: none;
}

/* Inline validation nudge (e.g. "choose a pick-up first") */
.rv-ss__cell.is-nudge {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
  animation: rv-ss-nudge 0.42s var(--rv-ease);
}
.rv-ss__copy strong.is-warn {
  color: #b45309 !important;
}
@keyframes rv-ss-nudge {
  0%,
  100% {
    transform: none;
  }
  20% {
    transform: translateX(-4px);
  }
  45% {
    transform: translateX(4px);
  }
  70% {
    transform: translateX(-2px);
  }
}

/* Date/time pairs get tight once four cells share the row - drop their chevrons */
@media (max-width: 1399.98px) {
  .rv-ss__pair .rv-ss__chev {
    display: none;
  }
}
@media (max-width: 1749.98px) {
  html.rv1[data-rv-diff="on"] .rv-ss__pair .rv-ss__chev {
    display: none;
  }
}

@keyframes rv-ss-pop {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- small laptops / tablets: tighter cells, no chevrons */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .rv-ss__inner {
    gap: 0.6rem;
    padding: 0.6rem 1rem 0.5rem;
  }
  .rv-ss__opts {
    padding: 0 1rem 0.6rem;
  }
  .rv-ss__fields {
    gap: 0.45rem;
  }
  .rv-ss__cell {
    gap: 0.5rem;
    min-height: 3.3rem;
    padding: 0.4rem 0.6rem 0.4rem 0.45rem;
  }
  .rv-ss__pair .rv-ss__cell {
    min-height: calc(3.3rem - 0.36rem - 2px);
  }
  .rv-ss__pair .rv-ss__cell--time {
    flex: 1 1 0;
  }
  .rv-ss__ico {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.55rem;
  }
  .rv-ss__copy strong {
    font-size: 0.84rem;
  }
  .rv-ss__k {
    font-size: 0.56rem;
  }
  .rv-ss__chev,
  .rv-ss__hint {
    display: none;
  }
  .rv-ss__book {
    min-width: 7.5rem;
    padding: 0 1rem;
    font-size: 0.94rem;
  }
}
/* ---- tablets: location on its own row, both date pairs side by side below */
@media (min-width: 768px) and (max-width: 959.98px) {
  .rv-ss__cell--loc {
    flex-basis: 100%;
  }
  .rv-ss__pair {
    flex-basis: 12rem;
  }
}

/* ---- phones: single summary row, options live in the bottom sheet */
@media (max-width: 767.98px) {
  html.rv1 #rv-sticky-search .rv-ss__fields > .rv-ss__cell,
  html.rv1 #rv-sticky-search .rv-ss__fields > .rv-ss__pair,
  html.rv1 #rv-sticky-search .rv-ss__opts {
    display: none;
  }
  .rv-ss__inner {
    gap: 0.5rem;
    padding: 0.5rem 0.75rem 0.6rem;
  }
  .rv-ss__fields {
    flex-wrap: nowrap;
  }
  html.rv1 #rv-sticky-search .rv-ss__summary {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    min-height: 3.1rem;
    margin: 0;
    padding: 0.3rem 0.65rem 0.3rem 0.4rem;
    border: 1px solid #e5e8ef;
    border-radius: 14px;
    background: #fff;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  html.rv1 #rv-sticky-search .rv-ss__summary:active {
    background: #fff7f0;
  }
  .rv-ss__summary .rv-ss__ico {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.55rem;
  }
  .rv-ss__summary strong {
    font-size: 0.86rem;
  }
  .rv-ss__sub {
    display: block;
    overflow: hidden;
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rv-ss__book {
    min-width: 0;
    padding: 0 0.95rem;
    border-radius: 12px;
    font-size: 0.9rem;
  }
  .rv-ss__book svg {
    display: none;
  }
}