/* RÔVA responsive polish add-on
   Upload this file and load it AFTER styles.css.
   It keeps the existing black/green design, but improves mobile navigation,
   section rhythm, hero impact, gallery slider behavior and subtle motion. */

:root {
  --rova-header-height: 78px;
  --rova-mobile-header-height: 68px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--rova-header-height) + 18px);
}

body.menu-open {
  overflow: hidden;
}

/* Header: smoother and scroll-aware */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  min-height: var(--rova-header-height);
  transition: transform .32s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease !important;
  will-change: transform;
}

.site-header.is-scrolled {
  background: rgba(3, 4, 3, .88) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.26);
}

.site-header.is-hidden {
  transform: translateY(-112%);
}

.brand-logo img,
.brand img {
  display: block;
  height: clamp(34px, 4vw, 52px);
  width: auto;
  object-fit: contain;
}

.nav-toggle {
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
  background: rgba(127,168,101,.10) !important;
  color: var(--text) !important;
  line-height: 1;
  position: relative;
  z-index: 10002;
}

/* Stronger hero without changing the visual identity */
.hero:first-of-type {
  min-height: min(92vh, 880px);
  position: relative;
  overflow: hidden;
}

.hero:first-of-type::before {
  content: "";
  position: absolute;
  inset: auto -12vw -20% -12vw;
  height: 42%;
  background: radial-gradient(circle at 50% 0%, rgba(127,168,101,.18), transparent 58%);
  pointer-events: none;
}

.hero-car {
  transform-origin: center bottom;
}

/* Clearer breaks between sections while keeping one continuous background */
main > section {
  position: relative;
}

main > section:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(18px, 5vw, 72px);
  right: clamp(18px, 5vw, 72px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(127,168,101,.32), rgba(255,255,255,.08), transparent);
  pointer-events: none;
}

.section-head,
.config-heading,
.contact-panel,
.revenue-panel,
.model-card,
.tech-card,
.detail-card,
.gallery-item,
.vehicle-gallery > figure,
.config-shell {
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
}

.model-card:hover,
.tech-card:hover,
.detail-card:hover,
.gallery-item:hover,
.vehicle-gallery > figure:hover {
  transform: translateY(-4px);
  border-color: rgba(127,168,101,.34) !important;
}

/* Gallery slider: simpler, calmer, less information at once */
.gallery-slider-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.gallery-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

.gallery-control {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(127,168,101,.10);
  color: var(--gold2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.gallery-control:hover,
.gallery-control:focus-visible {
  transform: translateY(-2px);
  background: rgba(127,168,101,.20);
  border-color: rgba(127,168,101,.40);
  outline: none;
}

.vehicle-gallery,
#vehicleGallery {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 18px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.vehicle-gallery > figure,
#vehicleGallery > figure,
.vehicle-gallery .gallery-item,
#vehicleGallery .gallery-item {
  flex: 0 0 calc((100% - 54px) / 4);
  min-width: 0;
  scroll-snap-align: start;
}

.vehicle-gallery img,
#vehicleGallery img {
  min-height: 190px;
  object-fit: contain;
}

/* Desktop: keep the current look, but more balanced */
@media (min-width: 1000px) {
  .site-header {
    justify-content: center;
  }

  .brand-logo,
  .brand {
    margin-right: 0 !important;
  }

  .main-nav {
    margin-left: auto;
  }

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

@media (max-width: 1150px) {
  .vehicle-gallery > figure,
  #vehicleGallery > figure,
  .vehicle-gallery .gallery-item,
  #vehicleGallery .gallery-item {
    flex-basis: calc((100% - 18px) / 2);
  }
}

/* Mobile-first improvements */
@media (max-width: 760px) {
  :root {
    --rova-header-height: var(--rova-mobile-header-height);
  }

  html {
    scroll-padding-top: calc(var(--rova-mobile-header-height) + 18px);
  }

  .site-header {
    min-height: var(--rova-mobile-header-height);
    padding: 10px 16px !important;
    display: flex !important;
    justify-content: center !important;
  }

  .brand-logo,
  .brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 !important;
    z-index: 10002;
  }

  .brand-logo img,
  .brand img {
    height: 34px;
    max-width: 170px;
  }

  .nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    font-size: 1.38rem;
  }

  .header-cta {
    display: none !important;
  }

  /* Full-screen mobile overlay menu */
  .main-nav {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 10000 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(18px, 5vh, 34px) !important;
    padding: calc(var(--rova-mobile-header-height) + 26px) 24px 36px !important;
    background:
      radial-gradient(circle at 50% 12%, rgba(127,168,101,.20), transparent 34%),
      linear-gradient(180deg, rgba(2,3,2,.98), rgba(5,8,5,.98)) !important;
    backdrop-filter: blur(22px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .28s ease, visibility .28s ease, transform .28s ease !important;
    border: 0 !important;
  }

  .main-nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .main-nav a {
    color: var(--text) !important;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.1rem, 9vw, 4rem);
    line-height: .95;
    letter-spacing: .01em;
    text-align: center;
    opacity: .92;
  }

  .main-nav a:hover,
  .main-nav a:focus-visible {
    color: var(--gold2) !important;
    outline: none;
  }

  .hero:first-of-type {
    min-height: calc(100svh - var(--rova-mobile-header-height));
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding-top: 34px !important;
    text-align: center;
  }

  .hero-copy {
    max-width: 100%;
  }

  .hero h1 {
    font-size: clamp(3.2rem, 16vw, 5.4rem) !important;
  }

  .hero-text,
  .lead {
    font-size: 1rem !important;
    margin-inline: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-actions .button {
    width: 100%;
    max-width: 330px;
  }

  .hero-visual {
    min-height: auto !important;
    width: 100%;
  }

  .hero-car {
    width: min(112%, 520px) !important;
    max-height: 360px !important;
    margin-inline: auto;
  }

  .section-pad,
  .section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .section-head,
  .config-shell,
  .contact-panel,
  .revenue-panel,
  .hero.section-pad,
  .about-section {
    grid-template-columns: 1fr !important;
  }

  .model-grid,
  .tech-grid,
  .detail-grid,
  .revenue-grid,
  .hero-stats,
  .spec-strip {
    grid-template-columns: 1fr !important;
  }

  .config-stage {
    min-height: auto !important;
  }

  .vehicle-scene {
    min-height: 300px;
  }

  .config-car-img,
  .config-car-canvas {
    max-height: 330px !important;
  }

  .gallery-slider-head {
    align-items: start;
    flex-direction: row;
  }

  .gallery-controls {
    flex-shrink: 0;
  }

  .vehicle-gallery,
  #vehicleGallery {
    gap: 14px !important;
  }

  .vehicle-gallery > figure,
  #vehicleGallery > figure,
  .vehicle-gallery .gallery-item,
  #vehicleGallery .gallery-item {
    flex-basis: 82vw;
  }

  .vehicle-gallery img,
  #vehicleGallery img {
    min-height: 220px;
    padding: 10px !important;
  }

  .vehicle-gallery figcaption,
  #vehicleGallery figcaption {
    font-size: .86rem;
    line-height: 1.35;
  }

  .rova-footer,
  .site-footer {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    gap: 26px !important;
  }

  .footer-contact,
  .footer-links {
    display: grid !important;
    gap: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}


/* =========================================================
   FINAL iOS HAMBURGER + SMART HEADER FIX
   Keeps logo and hamburger separated, makes iOS tap reliable,
   and hides header on scroll down / shows on scroll up.
   ========================================================= */
:root {
  --rova-mobile-header-height: 72px;
}

.site-header {
  transition: transform .28s ease, background .25s ease, box-shadow .25s ease !important;
  will-change: transform;
}

.site-header.is-scrolled {
  background: rgba(3, 4, 3, .92) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.30) !important;
}

.site-header.is-hidden {
  transform: translate3d(0, -115%, 0) !important;
}

body.menu-open .site-header {
  transform: translate3d(0,0,0) !important;
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: calc(var(--rova-mobile-header-height) + 14px) !important;
  }

  body.menu-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  .site-header {
    min-height: var(--rova-mobile-header-height) !important;
    height: var(--rova-mobile-header-height) !important;
    padding: 10px 18px !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 58px !important;
    align-items: center !important;
    gap: 14px !important;
    justify-content: initial !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10050 !important;
  }

  .site-header > .brand-logo,
  .site-header > .brand {
    grid-column: 2 !important;
    justify-self: center !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    max-width: 100% !important;
    z-index: 10052 !important;
    pointer-events: auto !important;
  }

  .site-header > .brand-logo img,
  .site-header > .brand img {
    height: auto !important;
    max-height: 38px !important;
    max-width: min(185px, 48vw) !important;
    width: auto !important;
    object-fit: contain !important;
  }

  .nav-toggle {
    grid-column: 3 !important;
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(215,237,193,.22) !important;
    background: rgba(127,168,101,.10) !important;
    color: var(--text) !important;
    font-size: 1.45rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    position: relative !important;
    z-index: 10055 !important;
  }

  .nav-toggle:active {
    transform: scale(.96) !important;
  }

  .header-cta {
    display: none !important;
  }

  .main-nav {
    position: fixed !important;
    top: var(--rova-mobile-header-height) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100vw !important;
    height: calc(100vh - var(--rova-mobile-header-height)) !important;
    height: calc(100svh - var(--rova-mobile-header-height)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(18px, 4.2vh, 30px) !important;
    padding: 28px 24px 42px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(127,168,101,.20), transparent 36%),
      linear-gradient(180deg, rgba(2,3,2,.985), rgba(5,8,5,.985)) !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0,-8px,0) !important;
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease !important;
    z-index: 10040 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .main-nav.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0,0,0) !important;
  }

  .main-nav a {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--text) !important;
    font-family: "Playfair Display", serif !important;
    font-size: clamp(2.15rem, 8.8vw, 3.7rem) !important;
    line-height: .95 !important;
    letter-spacing: .01em !important;
    text-align: center !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .main-nav a:active,
  .main-nav a:hover,
  .main-nav a:focus-visible {
    color: var(--gold2) !important;
  }

  .footer-brand-logo,
  .footer-brand-logo img {
    position: static !important;
    transform: none !important;
    display: block !important;
  }
}

@media (max-width: 420px) {
  .site-header {
    grid-template-columns: 46px minmax(0, 1fr) 54px !important;
    gap: 12px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .site-header > .brand-logo img,
  .site-header > .brand img {
    max-width: min(165px, 46vw) !important;
    max-height: 34px !important;
  }

  .nav-toggle {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
  }
}

/* =========================================================
   RÔVA FINAL FIX PACK — top background, details desktop 4-up,
   and smart mobile header/hamburger stability.
   Keep this at the very end of the last loaded CSS file.
   ========================================================= */

html,
body {
  background-color: #07100b !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body {
  background:
    radial-gradient(circle at 72% -10%, rgba(127,168,101,.16), transparent 32%),
    radial-gradient(circle at 0% 18%, rgba(96,80,45,.12), transparent 36%),
    linear-gradient(180deg, #07100b 0%, #07100b 24%, #081109 58%, #050705 100%) !important;
  background-attachment: scroll !important;
}

main,
main > section,
.hero,
.hero-copy,
.hero-visual,
.section,
.section-pad {
  background-color: transparent !important;
}

/* Remove the old rectangular hero overlays that caused the top horizontal band/seam. */
main > .hero:first-of-type,
body main > section.hero:first-of-type,
.hero:first-of-type {
  position: relative !important;
  isolation: isolate !important;
  background-color: #07100b !important;
  background-image:
    radial-gradient(circle at 74% 43%, rgba(127,168,101,.14) 0%, rgba(127,168,101,.08) 30%, transparent 58%),
    radial-gradient(circle at 45% 20%, rgba(215,237,193,.045) 0%, transparent 58%),
    linear-gradient(180deg, #07100b 0%, #07100b 62%, #07100b 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
}

main > .hero:first-of-type::before,
main > .hero:first-of-type::after,
body main > section.hero:first-of-type::before,
body main > section.hero:first-of-type::after,
.hero:first-of-type::before,
.hero:first-of-type::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

main > .hero:first-of-type .vehicle-orbit,
main > .hero:first-of-type .halo {
  opacity: .82 !important;
  background: radial-gradient(circle, rgba(127,168,101,.18), transparent 68%) !important;
}

/* Desktop browser: It's In The Details must be exactly 4 columns. */
@media (min-width: 1151px) {
  #details .detail-grid,
  #details .detail-grid-pictures-only,
  .details-section .detail-grid,
  .details-section .detail-grid-pictures-only {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
  }

  #details .detail-card,
  .details-section .detail-grid-pictures-only .detail-card {
    width: 100% !important;
    min-width: 0 !important;
    grid-column: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  #details .detail-card:has(img[src*="d14.jpg"]) {
    display: block !important;
  }
}

/* Keep the mobile details layout exactly as requested: small windows, not desktop 4-up. */
@media (max-width: 760px) {
  #details .detail-grid,
  #details .detail-grid-pictures-only {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #details .detail-card:first-child {
    grid-column: span 2 !important;
    aspect-ratio: 16 / 10 !important;
  }

  #details .detail-card:has(img[src*="d14.jpg"]) {
    display: none !important;
  }
}

/* Smart mobile header: hidden when scrolling down, visible when scrolling up. */
.site-header {
  transform: translate3d(0,0,0) !important;
  transition: transform .26s ease, background .24s ease, box-shadow .24s ease !important;
  will-change: transform !important;
}

.site-header.is-scrolled {
  background: rgba(3,4,3,.94) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.32) !important;
}

.site-header.is-hidden {
  transform: translate3d(0,-120%,0) !important;
}

body.menu-open .site-header,
.site-header.menu-force-visible {
  transform: translate3d(0,0,0) !important;
}

@media (max-width: 760px) {
  :root { --rova-mobile-header-height: 74px; }

  body.menu-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  .site-header {
    min-height: var(--rova-mobile-header-height) !important;
    height: var(--rova-mobile-header-height) !important;
    padding: 10px 18px !important;
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) 64px !important;
    align-items: center !important;
    gap: 18px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10050 !important;
  }

  .site-header > .brand-logo,
  .site-header > .brand {
    grid-column: 2 !important;
    justify-self: center !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    max-width: 100% !important;
    z-index: 10052 !important;
  }

  .site-header > .brand-logo img,
  .site-header > .brand img {
    height: auto !important;
    max-height: 37px !important;
    max-width: min(178px, 44vw) !important;
    object-fit: contain !important;
  }

  .nav-toggle {
    grid-column: 3 !important;
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(215,237,193,.24) !important;
    background: rgba(127,168,101,.12) !important;
    color: var(--text) !important;
    font-size: 1.45rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    position: relative !important;
    z-index: 10055 !important;
  }

  .header-cta { display: none !important; }

  .main-nav {
    position: fixed !important;
    top: var(--rova-mobile-header-height) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: calc(100vh - var(--rova-mobile-header-height)) !important;
    height: calc(100svh - var(--rova-mobile-header-height)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(18px, 4vh, 30px) !important;
    padding: 28px 24px 42px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(127,168,101,.20), transparent 36%),
      linear-gradient(180deg, rgba(2,3,2,.985), rgba(5,8,5,.985)) !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0,-8px,0) !important;
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease !important;
    z-index: 10040 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .main-nav.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0,0,0) !important;
  }

  .main-nav a {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--text) !important;
    font-family: "Playfair Display", serif !important;
    font-size: clamp(2.15rem, 8.8vw, 3.7rem) !important;
    line-height: .95 !important;
    letter-spacing: .01em !important;
    text-align: center !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .main-nav a:active,
  .main-nav a:hover,
  .main-nav a:focus-visible {
    color: var(--gold2) !important;
  }
}

@media (max-width: 420px) {
  .site-header {
    grid-template-columns: 56px minmax(0,1fr) 56px !important;
    gap: 14px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .site-header > .brand-logo img,
  .site-header > .brand img {
    max-width: min(158px, 42vw) !important;
    max-height: 34px !important;
  }
}

/* =========================================================
   FINAL MOBILE STICKY HAMBURGER / HEADER FIX
   The mobile header is fixed to the top, hides on scroll down,
   and comes back/sticks immediately when scrolling up.
   ========================================================= */
html {
  scroll-padding-top: 96px !important;
}

.site-header.js-smart-header {
  will-change: transform !important;
  transition: transform .26s ease, background .24s ease, box-shadow .24s ease !important;
}

.site-header.js-smart-header.is-hidden {
  transform: translate3d(0,-120%,0) !important;
}

.site-header.js-smart-header.is-scrolled {
  background: rgba(3,4,3,.95) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.34) !important;
}

body.menu-open .site-header.js-smart-header,
.site-header.js-smart-header.menu-force-visible,
.site-header.js-smart-header.is-visible {
  transform: translate3d(0,0,0) !important;
}

@media (max-width: 760px) {
  :root {
    --rova-mobile-header-height: 76px;
  }

  body {
    padding-top: var(--rova-mobile-header-height) !important;
  }

  body.menu-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  .site-header,
  .site-header.js-smart-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-height: var(--rova-mobile-header-height) !important;
    height: var(--rova-mobile-header-height) !important;
    padding: 10px 18px !important;
    display: grid !important;
    grid-template-columns: 70px minmax(0,1fr) 70px !important;
    align-items: center !important;
    gap: 20px !important;
    z-index: 10050 !important;
    transform: translate3d(0,0,0) !important;
    -webkit-transform: translate3d(0,0,0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  .site-header.js-smart-header.is-hidden:not(.menu-force-visible) {
    transform: translate3d(0,-120%,0) !important;
    -webkit-transform: translate3d(0,-120%,0) !important;
    pointer-events: none !important;
  }

  .site-header.js-smart-header.is-visible,
  body.menu-open .site-header.js-smart-header,
  .site-header.js-smart-header.menu-force-visible {
    transform: translate3d(0,0,0) !important;
    -webkit-transform: translate3d(0,0,0) !important;
    pointer-events: auto !important;
  }

  .site-header > .brand-logo,
  .site-header > .brand {
    grid-column: 2 !important;
    justify-self: center !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    margin: 0 !important;
    max-width: 100% !important;
    z-index: 10052 !important;
  }

  .site-header > .brand-logo img,
  .site-header > .brand img {
    height: auto !important;
    max-height: 37px !important;
    max-width: min(172px, 43vw) !important;
    object-fit: contain !important;
  }

  .nav-toggle {
    grid-column: 3 !important;
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(215,237,193,.26) !important;
    background: rgba(127,168,101,.13) !important;
    color: var(--text) !important;
    font-size: 1.46rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    position: relative !important;
    z-index: 10055 !important;
  }

  .main-nav {
    position: fixed !important;
    top: var(--rova-mobile-header-height) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: calc(100vh - var(--rova-mobile-header-height)) !important;
    height: calc(100svh - var(--rova-mobile-header-height)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(18px, 4vh, 30px) !important;
    padding: 28px 24px 42px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(127,168,101,.20), transparent 36%),
      linear-gradient(180deg, rgba(2,3,2,.988), rgba(5,8,5,.988)) !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0,-8px,0) !important;
    -webkit-transform: translate3d(0,-8px,0) !important;
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease !important;
    z-index: 10040 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .main-nav.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0,0,0) !important;
    -webkit-transform: translate3d(0,0,0) !important;
  }

  .header-cta {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .site-header,
  .site-header.js-smart-header {
    grid-template-columns: 62px minmax(0,1fr) 62px !important;
    gap: 16px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .site-header > .brand-logo img,
  .site-header > .brand img {
    max-width: min(154px, 42vw) !important;
    max-height: 34px !important;
  }
}

/* =========================================================
   RÔVA TECHNOLOGY MOBILE/TABLET CAROUSEL
   Same behavior as Collection/Gallery:
   desktop = 4 cards in one row, tablet = 2 cards, mobile = 1 card with arrows.
   ========================================================= */
#technology,
.tech {
  overflow: hidden !important;
}

#technology .tech-carousel-shell,
.tech .tech-carousel-shell {
  position: relative !important;
  width: 100% !important;
  overflow: visible !important;
}

#technology .tech-controls,
.tech .tech-controls {
  display: none !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin: -8px 0 18px !important;
}

#technology .tech-controls .tech-arrow,
.tech .tech-controls .tech-arrow {
  position: static !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(215,237,193,.28) !important;
  background: rgba(3,4,3,.78) !important;
  color: var(--gold2) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 27px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.42) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

#technology .tech-controls .tech-arrow:hover,
#technology .tech-controls .tech-arrow:focus-visible,
.tech .tech-controls .tech-arrow:hover,
.tech .tech-controls .tech-arrow:focus-visible {
  background: rgba(127,168,101,.18) !important;
  outline: none !important;
}

#technology .tech-controls .tech-arrow.is-disabled,
.tech .tech-controls .tech-arrow.is-disabled {
  opacity: .35 !important;
  pointer-events: none !important;
}

@media (min-width: 1151px) {
  #technology .tech-controls,
  .tech .tech-controls {
    display: none !important;
  }

  #technology .tech-grid,
  #technology #techCarousel,
  .tech .tech-grid,
  .tech #techCarousel {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    padding: 0 !important;
  }

  #technology .tech-card,
  .tech .tech-card {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

@media (min-width: 761px) and (max-width: 1150px) {
  #technology .tech-controls,
  .tech .tech-controls {
    display: flex !important;
  }

  #technology .tech-grid,
  #technology #techCarousel,
  .tech .tech-grid,
  .tech #techCarousel {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 4px 4px 20px !important;
  }

  #technology .tech-grid::-webkit-scrollbar,
  #technology #techCarousel::-webkit-scrollbar,
  .tech .tech-grid::-webkit-scrollbar,
  .tech #techCarousel::-webkit-scrollbar {
    display: none !important;
  }

  #technology .tech-card,
  .tech .tech-card {
    flex: 0 0 calc((100% - 16px) / 2) !important;
    min-width: calc((100% - 16px) / 2) !important;
    max-width: calc((100% - 16px) / 2) !important;
    width: auto !important;
    scroll-snap-align: start !important;
    margin: 0 !important;
  }
}

@media (max-width: 760px) {
  #technology .section-head,
  .tech .section-head {
    margin-bottom: 14px !important;
  }

  #technology .tech-controls,
  .tech .tech-controls {
    display: flex !important;
    margin: 0 0 14px !important;
  }

  #technology .tech-grid,
  #technology #techCarousel,
  .tech .tech-grid,
  .tech #techCarousel {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 4px 0 18px !important;
  }

  #technology .tech-grid::-webkit-scrollbar,
  #technology #techCarousel::-webkit-scrollbar,
  .tech .tech-grid::-webkit-scrollbar,
  .tech #techCarousel::-webkit-scrollbar {
    display: none !important;
  }

  #technology .tech-card,
  .tech .tech-card {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    scroll-snap-align: start !important;
    margin: 0 !important;
    border-radius: 22px !important;
  }
}

/* =========================================================
   RÔVA HERO VIDEO LOOP FINAL
   Full visible hero video, no cart image, no browser controls/start button.
   ========================================================= */
main > .video-hero:first-of-type,
body main > section.video-hero:first-of-type,
.video-hero:first-of-type {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: min(92vh, 920px) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: center !important;
  padding: clamp(112px, 12vw, 168px) clamp(20px, 6vw, 86px) clamp(72px, 8vw, 126px) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

main > .video-hero:first-of-type::before,
main > .video-hero:first-of-type::after,
body main > section.video-hero:first-of-type::before,
body main > section.video-hero:first-of-type::after,
.video-hero:first-of-type::before,
.video-hero:first-of-type::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

.hero-bg-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: -3 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  background: transparent !important;
}

.hero-bg-video::-webkit-media-controls,
.hero-bg-video::-webkit-media-controls-panel,
.hero-bg-video::-webkit-media-controls-play-button,
.hero-bg-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  opacity: 0 !important;
  -webkit-appearance: none !important;
}

.hero-video-shade {
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.34) 42%, rgba(0,0,0,.18) 100%),
    linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.16) 52%, rgba(0,0,0,.46) 100%) !important;
}

.video-hero .hero-copy {
  position: relative !important;
  z-index: 2 !important;
  max-width: 760px !important;
  background: transparent !important;
  color: var(--text) !important;
  text-shadow: 0 3px 28px rgba(0,0,0,.68) !important;
}

.video-hero .hero-text {
  color: rgba(246,244,238,.92) !important;
}

.video-hero .kicker,
.video-hero h1 span {
  text-shadow: 0 3px 24px rgba(0,0,0,.72) !important;
}

.video-hero .hero-visual,
.video-hero .vehicle-orbit,
.video-hero .halo,
.video-hero .hero-car {
  display: none !important;
}

@media (max-width: 760px) {
  main > .video-hero:first-of-type,
  body main > section.video-hero:first-of-type,
  .video-hero:first-of-type {
    min-height: 100svh !important;
    padding: 104px 20px 52px !important;
    text-align: center !important;
    align-items: center !important;
  }

  .video-hero .hero-copy {
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .hero-video-shade {
    background:
      linear-gradient(180deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.32) 40%, rgba(0,0,0,.60) 100%) !important;
  }

  .hero-bg-video {
    object-position: center center !important;
  }
}

/* =========================================================
   RÔVA HERO VIDEO MOBILE ZOOM
   Makes the hero video closer on iPhone/mobile so it is easier to see.
   ========================================================= */
@media (max-width: 760px) {
  .hero-bg-video {
    transform: scale(1.42) !important;
    transform-origin: center center !important;
    object-position: center center !important;
  }
}

@media (max-width: 420px) {
  .hero-bg-video {
    transform: scale(1.55) !important;
  }
}


/* =========================================================
   RÔVA STANDALONE VIDEO BEFORE HERO
   Video sits above the hero in its own full-size area.
   The hero below keeps the green/black background and cart image.
   ========================================================= */
.rova-video-intro {
  position: relative !important;
  width: 100% !important;
  min-height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
  border-bottom: 1px solid rgba(215,237,193,.15) !important;
}

.rova-standalone-video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: calc(100svh - 78px) !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #000 !important;
  margin: 0 auto !important;
}

/* Hide browser/iOS video controls and play overlay */
.rova-standalone-video::-webkit-media-controls,
.rova-standalone-video::-webkit-media-controls-panel,
.rova-standalone-video::-webkit-media-controls-play-button,
.rova-standalone-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  opacity: 0 !important;
  -webkit-appearance: none !important;
}

/* Hero returns to the original green/black cart design */
main > .hero:first-of-type,
body main > section.hero:first-of-type {
  background:
    radial-gradient(circle at 65% 0%, rgba(127,168,101,.14), transparent 30%),
    radial-gradient(circle at 0% 20%, rgba(96,80,45,.22), transparent 34%),
    linear-gradient(180deg, #07100b, #030403 52%, #050705) !important;
}

main > .hero:first-of-type .hero-visual {
  display: grid !important;
}

main > .hero:first-of-type .hero-car {
  display: block !important;
}

@media (max-width: 760px) {
  .rova-video-intro {
    margin-top: 0 !important;
  }

  .rova-standalone-video {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  main > .hero:first-of-type,
  body main > section.hero:first-of-type {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 42px 16px !important;
    min-height: auto !important;
    text-align: center !important;
  }

  main > .hero:first-of-type .hero-copy {
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  main > .hero:first-of-type .hero-visual {
    display: grid !important;
    place-items: center !important;
    min-height: auto !important;
    width: 100% !important;
  }

  main > .hero:first-of-type .hero-car {
    display: block !important;
    width: min(112%, 520px) !important;
    max-height: 360px !important;
    object-fit: contain !important;
    margin-inline: auto !important;
  }
}

/* =========================================================
   RÔVA FIX 2026-05-11 v2
   Force intro video to true full browser width on desktop,
   tablet and mobile. Autoplay muted once; click script enables sound.
   ========================================================= */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

main#home,
body > main#home {
  width: 100% !important;
  max-width: none !important;
  overflow-x: clip !important;
}

main#home > section.rova-video-intro,
.rova-video-intro {
  display: block !important;
  position: relative !important;
  left: 50% !important;
  right: auto !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
  line-height: 0 !important;
  box-sizing: border-box !important;
}

main#home > section.rova-video-intro > video.rova-standalone-video,
.rova-video-intro > .rova-standalone-video,
.rova-standalone-video {
  display: block !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.rova-standalone-video::-webkit-media-controls,
.rova-standalone-video::-webkit-media-controls-panel,
.rova-standalone-video::-webkit-media-controls-play-button,
.rova-standalone-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  opacity: 0 !important;
  -webkit-appearance: none !important;
}

@supports (width: 100dvw) {
  main#home > section.rova-video-intro,
  .rova-video-intro,
  main#home > section.rova-video-intro > video.rova-standalone-video,
  .rova-video-intro > .rova-standalone-video,
  .rova-standalone-video {
    width: 100dvw !important;
    min-width: 100dvw !important;
    max-width: 100dvw !important;
  }
  main#home > section.rova-video-intro,
  .rova-video-intro {
    margin-left: -50dvw !important;
  }
}

/* Final scroll-up menu + floating back-to-top arrow */
.site-header {
  position: sticky !important;
  top: 0 !important;
  transform: translateY(0);
}

.site-header.is-visible,
.site-header.menu-force-visible {
  transform: translateY(0) !important;
}

.site-header.is-hidden {
  transform: translateY(-115%) !important;
}

.back-to-top {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(127,168,101,.42);
  background: rgba(3, 4, 3, .82);
  color: var(--gold2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 10001;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(.96);
  box-shadow: 0 18px 44px rgba(0,0,0,.36);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: opacity .25s ease, transform .25s ease, background .25s ease, border-color .25s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: rgba(3, 4, 3, .96);
  border-color: rgba(127,168,101,.72);
  transform: translateY(-3px) scale(1);
  outline: none;
}

.site-footer-legal {
  align-items: center;
}

@media (max-width: 760px) {
  .back-to-top {
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
    font-size: 26px;
  }
}


/* =========================================================
   RÔVA Courtesy hospitality section — 2026-06-01
   Full-width laptop/desktop layout + clean uniform background
   ========================================================= */
#courtesy-solution,
.courtesy-solution{
  scroll-margin-top:96px;
}

.courtesy-panel{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:calc(var(--radius) + 14px);
  background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  box-shadow:var(--shadow);
  padding:clamp(24px,3.2vw,46px);
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  grid-template-areas:
    "copy image"
    "points points";
  gap:clamp(18px,2.8vw,38px) clamp(30px,3.8vw,58px);
  align-items:start;
  width:100%;
  max-width:1380px;
  margin:0 auto;
}

.courtesy-panel::before,
.courtesy-media::after{
  content:none !important;
  display:none !important;
}

.courtesy-media,
.courtesy-copy,
.courtesy-points{
  position:relative;
  z-index:1;
  min-width:0;
}

.courtesy-media{
  grid-area:image;
  min-height:280px;
  display:grid;
  place-items:start end;
  align-self:start;
  overflow:visible;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

.courtesy-media img{
  width:min(120%,900px);
  max-height:440px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 30px 34px rgba(0,0,0,.38));
  transform:translate(4%,-2%);
}

.courtesy-copy{
  grid-area:copy;
  align-self:center;
}

.courtesy-copy h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.25rem,4vw,4.55rem);
  line-height:.92;
  margin:12px 0 16px;
  color:var(--text);
  max-width:11.5ch;
}

.courtesy-copy > p{
  color:var(--muted);
  font-size:1.02rem;
  max-width:62ch;
}

.courtesy-points{
  grid-area:points;
  grid-column:1 / -1 !important;
  width:100% !important;
  max-width:none !important;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:0 !important;
  align-items:stretch;
  justify-self:stretch;
}

.courtesy-points article{
  width:100%;
  max-width:none;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.045);
  padding:16px 18px;
  min-height:100%;
}

.courtesy-points .courtesy-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:14px;
  margin-bottom:10px;
  color:var(--gold2);
  background:rgba(127,168,101,.14);
  border:1px solid rgba(215,237,193,.2);
}

.courtesy-points .courtesy-icon svg{
  width:22px;
  height:22px;
}

.courtesy-points strong{
  display:block;
  color:#fff;
  font-size:1.02rem;
  margin-bottom:6px;
}

.courtesy-points p{
  margin:0;
  font-size:.94rem;
}

.courtesy-cta.collection-config-link{
  display:inline-flex;
  margin-top:18px;
  color:#061006;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:14px 20px;
  box-shadow:0 18px 44px rgba(0,0,0,.28);
  text-decoration:none;
}

.courtesy-cta.collection-config-link:hover,
.courtesy-cta.collection-config-link:focus-visible{
  transform:translateY(-2px);
  outline:none;
  filter:brightness(1.06);
}

@media(min-width:901px) and (max-width:1440px){
  .courtesy-panel{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:16px 32px;
    padding:30px;
  }
  .courtesy-media{
    min-height:260px;
  }
  .courtesy-media img{
    width:min(122%,820px);
    max-height:390px;
    transform:translate(5%,-4%);
  }
  .courtesy-copy h2{
    font-size:clamp(2.05rem,3.7vw,3.85rem);
    max-width:12ch;
  }
  .courtesy-points{
    grid-column:1 / -1 !important;
    width:100% !important;
    gap:14px;
  }
  .courtesy-points article{
    padding:14px 18px;
  }
}

@media(max-width:900px){
  .courtesy-panel{
    grid-template-columns:1fr;
    grid-template-areas:
      "image"
      "copy"
      "points";
  }
  .courtesy-media{
    min-height:320px;
  }
  .courtesy-media img{
    width:min(108%,760px);
    max-height:520px;
    transform:none;
  }
  .courtesy-copy h2{
    max-width:none;
  }
  .courtesy-points{
    grid-template-columns:1fr;
  }
}

@media(max-width:760px){
  .courtesy-panel{
    padding:22px;
    border-radius:28px;
  }
  .courtesy-media{
    min-height:260px;
  }
  .courtesy-media img{
    width:112%;
  }
  .courtesy-copy h2{
    font-size:clamp(2rem,10vw,3rem);
  }
  .courtesy-cta.collection-config-link{
    width:100%;
    justify-content:center;
    text-align:center;
  }
}

/* =========================================================
   RÔVA Fleet hospitality-style section — 2026-06-01
   Fleet image left + text right, icon columns full width below
   ========================================================= */
#fleet-revenue.fleet-solution{
  scroll-margin-top:96px;
}
.fleet-panel{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:calc(var(--radius) + 14px);
  background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  box-shadow:var(--shadow);
  padding:clamp(24px,3.2vw,46px);
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  grid-template-areas:
    "image copy"
    "points points";
  gap:clamp(18px,2.8vw,38px) clamp(30px,3.8vw,58px);
  align-items:start;
  width:100%;
  max-width:1380px;
  margin:0 auto;
}
.fleet-panel::before,
.fleet-media::after{
  content:none !important;
  display:none !important;
}
.fleet-media,
.fleet-copy,
.fleet-points{
  position:relative;
  z-index:1;
  min-width:0;
}
.fleet-media{
  grid-area:image;
  min-height:280px;
  display:grid;
  place-items:start center;
  align-self:start;
  overflow:visible;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
.fleet-media img{
  width:min(120%,900px);
  max-height:440px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 30px 34px rgba(0,0,0,.38));
  transform:translate(-4%,-2%);
}
.fleet-copy{
  grid-area:copy;
  align-self:center;
}
.fleet-copy h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.25rem,4vw,4.55rem);
  line-height:.92;
  margin:12px 0 16px;
  color:var(--text);
  max-width:11.5ch;
}
.fleet-copy > p{
  color:var(--muted);
  font-size:1.02rem;
  max-width:62ch;
}
.fleet-points{
  grid-area:points;
  grid-column:1 / -1 !important;
  width:100% !important;
  max-width:none !important;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:0 !important;
  align-items:stretch;
  justify-self:stretch;
}
.fleet-points article{
  width:100%;
  max-width:none;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.045);
  padding:16px 18px;
  min-height:100%;
}
.fleet-points .fleet-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:14px;
  margin-bottom:10px;
  color:var(--gold2);
  background:rgba(127,168,101,.14);
  border:1px solid rgba(215,237,193,.2);
}
.fleet-points .fleet-icon svg{
  width:22px;
  height:22px;
}
.fleet-points strong{
  display:block;
  color:#fff;
  font-size:1.02rem;
  margin-bottom:6px;
}
.fleet-points p{
  margin:0;
  font-size:.94rem;
}
.fleet-cta.collection-config-link{
  display:inline-flex;
  margin-top:18px;
  color:#061006;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:14px 20px;
  box-shadow:0 18px 44px rgba(0,0,0,.28);
  text-decoration:none;
}
.fleet-cta.collection-config-link:hover,
.fleet-cta.collection-config-link:focus-visible{
  transform:translateY(-2px);
  outline:none;
  filter:brightness(1.06);
}
@media(min-width:901px) and (max-width:1440px){
  .fleet-panel{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:16px 32px;
    padding:30px;
  }
  .fleet-media{
    min-height:260px;
  }
  .fleet-media img{
    width:min(122%,820px);
    max-height:390px;
    transform:translate(-5%,-4%);
  }
  .fleet-copy h2{
    font-size:clamp(2.05rem,3.7vw,3.85rem);
    max-width:12ch;
  }
  .fleet-points{
    grid-column:1 / -1 !important;
    width:100% !important;
    gap:14px;
  }
  .fleet-points article{
    padding:14px 18px;
  }
}
@media(max-width:900px){
  .fleet-panel{
    grid-template-columns:1fr;
    grid-template-areas:
      "image"
      "copy"
      "points";
  }
  .fleet-media{
    min-height:320px;
  }
  .fleet-media img{
    width:min(108%,760px);
    max-height:520px;
    transform:none;
  }
  .fleet-copy h2{
    max-width:none;
  }
  .fleet-points{
    grid-template-columns:1fr;
  }
}
@media(max-width:760px){
  .fleet-panel{
    padding:22px;
    border-radius:28px;
  }
  .fleet-media{
    min-height:260px;
  }
  .fleet-media img{
    width:112%;
  }
  .fleet-copy h2{
    font-size:clamp(2rem,10vw,3rem);
  }
  .fleet-cta.collection-config-link{
    width:100%;
    justify-content:center;
    text-align:center;
  }
}


/* Mirrored aftercare section using the Courtesy solution layout */
.aftercare-panel{
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  grid-template-areas:
    "image copy"
    "points points";
}

.aftercare-media{
  place-items:start start;
}

.aftercare-media img{
  width:min(118%,880px);
  transform:translate(-4%,-2%);
}

.aftercare-copy h2{
  max-width:12.5ch;
}

.aftercare-points article:last-child{
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(212,175,55,.10));
  border-color:rgba(212,175,55,.28);
}

@media(min-width:901px) and (max-width:1440px){
  .aftercare-panel{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .aftercare-media img{
    width:min(120%,820px);
    transform:translate(-3%,-4%);
  }
}

@media(max-width:900px){
  .aftercare-panel{
    grid-template-areas:
      "image"
      "copy"
      "points";
  }
  .aftercare-media{
    place-items:start center;
  }
  .aftercare-media img{
    transform:none;
  }
}

/* Service-focused aftercare refinement */
.service-aftercare-panel{
  background:
    radial-gradient(circle at 16% 12%, rgba(215,237,193,.13), transparent 34%),
    linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
}

.service-vehicle-card{
  position:relative;
  width:100%;
  min-height:280px;
  display:grid;
  place-items:center start;
  overflow:visible;
}

.service-vehicle-card::before{
  content:"SERVICE";
  position:absolute;
  left:clamp(8px,1.5vw,18px);
  top:clamp(10px,1.6vw,20px);
  z-index:0;
  font-family:'Playfair Display',serif;
  font-size:clamp(3.4rem,7vw,7.5rem);
  line-height:.8;
  letter-spacing:.08em;
  color:rgba(255,255,255,.045);
  pointer-events:none;
}

.service-vehicle-card img{
  position:relative;
  z-index:1;
}

.service-vehicle-label{
  position:absolute;
  z-index:2;
  left:clamp(10px,1.8vw,24px);
  bottom:clamp(10px,1.8vw,24px);
  max-width:min(420px,88%);
  padding:14px 16px;
  border-radius:18px;
  background:rgba(7,13,16,.78);
  border:1px solid rgba(215,237,193,.18);
  box-shadow:0 18px 44px rgba(0,0,0,.30);
  backdrop-filter:blur(14px);
}

.service-vehicle-label span{
  display:block;
  color:var(--gold2);
  font-size:.76rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:5px;
}

.service-vehicle-label strong{
  color:#fff;
  font-size:.96rem;
  line-height:1.35;
}

.service-aftercare-copy h2{
  max-width:13.5ch;
}

.service-aftercare-points article:nth-child(3){
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(212,175,55,.12));
  border-color:rgba(212,175,55,.30);
}

@media(max-width:900px){
  .service-vehicle-card{
    min-height:300px;
  }

  .service-vehicle-label{
    position:relative;
    left:auto;
    bottom:auto;
    margin-top:-10px;
    max-width:100%;
  }
}

/* Aftercare image visibility fix */
.service-aftercare-media{
  min-height:320px;
  align-self:start;
}

.service-vehicle-card{
  min-height:340px;
  padding-bottom:0;
  place-items:center start;
}

.service-vehicle-card img{
  width:min(122%,900px);
  max-height:430px;
  object-fit:contain;
  transform:translate(-5%,-2%);
  filter:drop-shadow(0 30px 34px rgba(0,0,0,.38));
}

.service-vehicle-label{
  position:relative;
  left:auto;
  bottom:auto;
  margin-top:10px;
  max-width:min(520px,96%);
  width:auto;
}

@media(min-width:901px){
  .service-vehicle-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
  }

  .service-vehicle-label{
    margin-left:clamp(6px,1vw,14px);
  }
}

@media(min-width:901px) and (max-width:1440px){
  .service-aftercare-media{
    min-height:300px;
  }

  .service-vehicle-card{
    min-height:315px;
  }

  .service-vehicle-card img{
    width:min(124%,820px);
    max-height:390px;
    transform:translate(-4%,-3%);
  }
}

@media(max-width:900px){
  .service-aftercare-media{
    min-height:320px;
    place-items:start center;
  }

  .service-vehicle-card{
    min-height:0;
    display:grid;
    place-items:center;
  }

  .service-vehicle-card img{
    width:min(108%,760px);
    max-height:520px;
    transform:none;
  }

  .service-vehicle-label{
    margin:12px auto 0;
    max-width:100%;
  }
}

@media(max-width:760px){
  .service-aftercare-media{
    min-height:260px;
  }

  .service-vehicle-card img{
    width:112%;
    max-height:360px;
  }
}

/* RÔVA Service Aftercare image update — transparent service van + technician */
.service-aftercare-media{
  overflow:visible;
}
.service-vehicle-card img{
  width:min(126%,980px);
  max-height:520px;
  object-fit:contain;
  object-position:left center;
  transform:translate(-5%,-1%);
}
@media(max-width:900px){
  .service-vehicle-card img{
    width:112%;
    max-height:430px;
    transform:translateX(-3%);
  }
}
@media(max-width:760px){
  .service-vehicle-card img{
    width:120%;
    max-height:390px;
    transform:translateX(-7%);
  }
}

/* Service section blend fix — removes visible rectangular photo edges */
.service-aftercare-media,
.service-vehicle-card{
  background:transparent !important;
}
.service-vehicle-card{
  overflow:visible !important;
}
.service-vehicle-card img{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  mix-blend-mode:normal;
  -webkit-mask-image:radial-gradient(ellipse 96% 88% at 46% 54%, #000 58%, rgba(0,0,0,.92) 70%, rgba(0,0,0,.42) 88%, transparent 100%);
  mask-image:radial-gradient(ellipse 96% 88% at 46% 54%, #000 58%, rgba(0,0,0,.92) 70%, rgba(0,0,0,.42) 88%, transparent 100%);
}


/* Service section mobile fix — mirror Courtesy section */
@media(max-width:900px){
  .service-aftercare-panel{
    grid-template-columns:1fr;
    grid-template-areas:
      "image"
      "copy"
      "points";
    gap:18px;
  }

  .service-aftercare-media{
    min-height:auto;
    display:grid;
    place-items:start center;
    align-self:start;
    overflow:visible;
  }

  .service-vehicle-card{
    width:100%;
    min-height:auto;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
  }

  .service-vehicle-card::before{
    display:none;
  }

  .service-vehicle-card img{
    width:min(108%,760px);
    max-width:none;
    max-height:none;
    object-fit:contain;
    object-position:center top;
    transform:none !important;
    margin:0 auto;
    -webkit-mask-image:radial-gradient(ellipse 96% 90% at 50% 50%, #000 62%, rgba(0,0,0,.92) 76%, rgba(0,0,0,.40) 90%, transparent 100%);
    mask-image:radial-gradient(ellipse 96% 90% at 50% 50%, #000 62%, rgba(0,0,0,.92) 76%, rgba(0,0,0,.40) 90%, transparent 100%);
  }

  .service-vehicle-label{
    margin:8px auto 0;
    width:min(100%,520px);
    max-width:100%;
  }
}

@media(max-width:760px){
  .service-aftercare-panel{
    padding:22px;
  }

  .service-aftercare-media{
    min-height:auto;
  }

  .service-vehicle-card img{
    width:112%;
    max-height:none;
  }

  .service-vehicle-label{
    margin-top:6px;
    padding:14px 16px;
  }
}


/* Service section desktop alignment fix — align image with support label */
@media(min-width:901px){
  .service-aftercare-media{
    place-items:start start;
  }

  .service-vehicle-card{
    align-items:flex-start;
    justify-content:flex-start;
    padding-left:clamp(18px,2vw,34px);
  }

  .service-vehicle-card img{
    width:min(112%,860px);
    max-height:470px;
    object-fit:contain;
    object-position:left top;
    transform:translate(0,0);
    margin:0;
    display:block;
  }

  .service-vehicle-label{
    width:min(100%,640px);
    margin:10px 0 0 0;
  }
}

@media(min-width:901px) and (max-width:1440px){
  .service-vehicle-card{
    padding-left:clamp(14px,1.4vw,24px);
  }

  .service-vehicle-card img{
    width:min(110%,760px);
    max-height:420px;
  }
}


/* Service section mobile side alignment fix — image follows label left/right edges */
@media(max-width:900px){
  .service-aftercare-media{
    place-items:start stretch;
  }

  .service-vehicle-card{
    align-items:stretch;
    width:100%;
    padding-inline:0;
  }

  .service-vehicle-card img{
    width:100% !important;
    max-width:100% !important;
    object-position:center top;
    transform:none !important;
    margin:0;
    display:block;
  }

  .service-vehicle-label{
    width:100%;
    margin:10px 0 0 0;
  }
}

@media(max-width:760px){
  .service-aftercare-media,
  .service-vehicle-card{
    width:100%;
  }

  .service-vehicle-card img{
    width:100% !important;
  }

  .service-vehicle-label{
    width:100%;
    max-width:100%;
  }
}


/* Service section desktop side alignment fix — image follows support card left and right edges */
@media(min-width:901px){
  .service-aftercare-media{
    place-items:start stretch;
  }

  .service-vehicle-card{
    width:100%;
    align-items:stretch;
    justify-content:flex-start;
    padding-inline:0;
  }

  .service-vehicle-card img{
    width:100% !important;
    max-width:100% !important;
    max-height:none;
    object-fit:contain;
    object-position:center top;
    transform:none !important;
    margin:0;
    display:block;
  }

  .service-vehicle-label{
    width:100%;
    max-width:100%;
    margin:10px 0 0 0;
  }
}