/* =========================================================
   ROADEO ELITE SHINE v2.4.8 — TRUE BRUSH CONTACT + MOBILE TYPE FIX
   This is intentionally loaded LAST. It resolves the older 19px
   mobile floor and owns the final four-brush contact geometry.
========================================================= */

/* ---------------------------------------------------------
   1) BIGGER SIDE BRUSHES + REAL VISUAL CONTACT
--------------------------------------------------------- */
#roadeo-v9 .rd9-hero.rd10-cinematic{
  --rd248-side-overlap:165px;
  --rd10-brush-width:clamp(205px,17vw,250px);
  --rd10-travel-left:calc(50vw - var(--rd10-car-half) - var(--rd10-brush-width) - var(--rd10-side) + var(--rd248-side-overlap));
  --rd10-travel-right:calc(-50vw + var(--rd10-car-half) + var(--rd10-brush-width) + var(--rd10-side) - var(--rd248-side-overlap));
  --rd248-diag-size:clamp(190px,16vw,235px);
}

#roadeo-v9 .rd9-hero.rd10-cinematic .rd10-brush-unit{
  top:58px !important;
  z-index:34 !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic .rd10-brush-unit .rd9-hero-wash{
  max-height:340px !important;
  filter:drop-shadow(0 22px 34px rgba(4,42,79,.30)) saturate(1.08) !important;
}

/* The left/right wrappers now overlap well into the car silhouette. This is
   intentional: the transparent padding inside the PNG used to make the brush
   appear to stop before the paint even when the wrapper mathematically touched. */
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="side"] .rd10-brush-left,
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="cross"] .rd10-brush-left,
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="scrub"] .rd10-brush-left{
  opacity:1 !important;
  transform:translateX(var(--rd10-travel-left)) rotate(4deg) scale(1.18) !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="side"] .rd10-brush-right,
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="cross"] .rd10-brush-right,
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="scrub"] .rd10-brush-right{
  opacity:1 !important;
  transform:translateX(var(--rd10-travel-right)) rotate(-4deg) scale(1.18) !important;
}

/* Keep rinse hardware alive through the brush sequence, but behind the brushes. */
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="side"] .rd10-top-unit,
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="cross"] .rd10-top-unit{
  opacity:.70 !important;
  transform:translateX(-50%) translateY(17px) scale(1.02) !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="side"] .rd10-bottom-unit,
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="cross"] .rd10-bottom-unit{
  opacity:.68 !important;
  transform:translateX(-50%) translateY(-18px) scale(1.03) !important;
}

/* ---------------------------------------------------------
   2) TWO EXTRA COPIES OF THE SAME BRUSHES FROM NEW DIRECTIONS
      A: upper-left diagonal -> roof / hood contact
      B: lower-right diagonal -> rocker / rear-side contact
--------------------------------------------------------- */
#roadeo-v9 .rd9-hero.rd10-cinematic .rd248-brush-diag{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  width:var(--rd248-diag-size) !important;
  height:auto !important;
  opacity:.12 !important;
  z-index:35 !important;
  transform-origin:50% 50% !important;
  will-change:transform,opacity,filter;
  pointer-events:none !important;
  animation-duration:var(--rd10-cycle) !important;
  animation-timing-function:cubic-bezier(.18,.82,.18,1) !important;
  animation-iteration-count:infinite !important;
  animation-play-state:running !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic .rd248-brush-diag .rd9-hero-wash{
  width:100% !important;
  max-height:360px !important;
}

/* Resting poses are intentionally well outside the car. */
#roadeo-v9 .rd9-hero.rd10-cinematic .rd248-brush-diag-tl{
  top:-88px !important;
  transform:translateX(calc(0px - var(--rd10-car-half) - 175px)) translateY(-135px) rotate(43deg) scale(.90) !important;
  animation-name:rd248DiagTopLeft !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic .rd248-brush-diag-br{
  top:auto !important;
  bottom:-92px !important;
  transform:translateX(calc(var(--rd10-car-half) + 175px)) translateY(135px) rotate(-43deg) scale(.90) !important;
  animation-name:rd248DiagBottomRight !important;
}

/* When JS owns the timeline, disable fallback wrapper animation. */
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js .rd248-brush-diag{
  animation:none !important;
  transition:transform .78s cubic-bezier(.14,.88,.16,1),opacity .34s ease,filter .30s ease !important;
}

/* SIDE phase: existing left/right brushes are already physically touching;
   diagonals are visible approaching but have not contacted yet. */
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="side"] .rd248-brush-diag-tl{
  opacity:.48 !important;
  transform:translateX(calc(0px - var(--rd10-car-half) - 95px)) translateY(6px) rotate(43deg) scale(1.02) !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="side"] .rd248-brush-diag-br{
  opacity:.48 !important;
  transform:translateX(calc(var(--rd10-car-half) + 95px)) translateY(-6px) rotate(-43deg) scale(1.02) !important;
}

/* CROSS + SCRUB: all FOUR brush units physically overlap the vehicle silhouette. */
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="cross"] .rd248-brush-diag-tl,
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="scrub"] .rd248-brush-diag-tl{
  opacity:1 !important;
  transform:translateX(calc(0px - var(--rd10-car-half) + 86px)) translateY(166px) rotate(43deg) scale(1.18) !important;
  filter:drop-shadow(0 24px 36px rgba(4,42,79,.34)) saturate(1.12) !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="cross"] .rd248-brush-diag-br,
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="scrub"] .rd248-brush-diag-br{
  opacity:1 !important;
  transform:translateX(calc(var(--rd10-car-half) - 86px)) translateY(-166px) rotate(-43deg) scale(1.18) !important;
  filter:drop-shadow(0 24px 36px rgba(4,42,79,.34)) saturate(1.12) !important;
}

/* Give all four brushes a mechanical contact pulse without changing their wrapper
   coordinates, so the exact touch point cannot drift. */
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="cross"] .rd10-brush-unit .rd9-hero-wash,
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="scrub"] .rd10-brush-unit .rd9-hero-wash{
  animation:rd248ContactPulse .42s ease-in-out infinite alternate !important;
}
@keyframes rd248ContactPulse{
  from{filter:drop-shadow(0 20px 31px rgba(4,42,79,.27)) saturate(1.05) brightness(.99)}
  to{filter:drop-shadow(0 28px 42px rgba(4,42,79,.38)) saturate(1.17) brightness(1.055)}
}

/* Retract every brush before the final shine. */
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="shine"] .rd248-brush-diag-tl,
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="reset"] .rd248-brush-diag-tl{
  opacity:.08 !important;
  transform:translateX(calc(0px - var(--rd10-car-half) - 175px)) translateY(-135px) rotate(43deg) scale(.90) !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="shine"] .rd248-brush-diag-br,
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="reset"] .rd248-brush-diag-br{
  opacity:.08 !important;
  transform:translateX(calc(var(--rd10-car-half) + 175px)) translateY(135px) rotate(-43deg) scale(.90) !important;
}

/* CSS-only fallback if JS is blocked. */
@keyframes rd248DiagTopLeft{
  0%,42%{opacity:.08;transform:translateX(calc(0px - var(--rd10-car-half) - 175px)) translateY(-135px) rotate(43deg) scale(.90)}
  49%{opacity:.50;transform:translateX(calc(0px - var(--rd10-car-half) - 95px)) translateY(6px) rotate(43deg) scale(1.02)}
  56%,70%{opacity:1;transform:translateX(calc(0px - var(--rd10-car-half) + 86px)) translateY(166px) rotate(43deg) scale(1.18)}
  78%,100%{opacity:.08;transform:translateX(calc(0px - var(--rd10-car-half) - 175px)) translateY(-135px) rotate(43deg) scale(.90)}
}
@keyframes rd248DiagBottomRight{
  0%,42%{opacity:.08;transform:translateX(calc(var(--rd10-car-half) + 175px)) translateY(135px) rotate(-43deg) scale(.90)}
  49%{opacity:.50;transform:translateX(calc(var(--rd10-car-half) + 95px)) translateY(-6px) rotate(-43deg) scale(1.02)}
  56%,70%{opacity:1;transform:translateX(calc(var(--rd10-car-half) - 86px)) translateY(-166px) rotate(-43deg) scale(1.18)}
  78%,100%{opacity:.08;transform:translateX(calc(var(--rd10-car-half) + 175px)) translateY(135px) rotate(-43deg) scale(.90)}
}

/* Tablet geometry — larger than v2.4.7 and with real brush overlap. */
@media (min-width:701px) and (max-width:1280px){
  #roadeo-v9 .rd9-hero.rd10-cinematic{
    --rd248-side-overlap:132px;
    --rd10-brush-width:clamp(180px,18vw,225px);
    --rd248-diag-size:clamp(172px,18vw,215px);
  }
  #roadeo-v9 .rd9-hero.rd10-cinematic .rd10-brush-unit{top:66px !important}
  #roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="cross"] .rd248-brush-diag-tl,
  #roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="scrub"] .rd248-brush-diag-tl{
    transform:translateX(calc(0px - var(--rd10-car-half) + 72px)) translateY(154px) rotate(43deg) scale(1.15) !important;
  }
  #roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="cross"] .rd248-brush-diag-br,
  #roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="scrub"] .rd248-brush-diag-br{
    transform:translateX(calc(var(--rd10-car-half) - 72px)) translateY(-154px) rotate(-43deg) scale(1.15) !important;
  }
}

/* Mobile geometry: the car nearly fills the viewport, so the side brushes need
   a positive inward travel rather than the desktop car-half formula. */
@media (max-width:700px){
  #roadeo-v9 .rd9-hero.rd10-cinematic{
    --rd10-brush-width:clamp(116px,31vw,148px) !important;
    --rd248-diag-size:clamp(108px,29vw,142px) !important;
    --rd10-travel-left:56px !important;
    --rd10-travel-right:-56px !important;
  }
  #roadeo-v9 .rd9-hero.rd10-cinematic .rd10-brush-unit{top:70px !important}
  #roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="side"] .rd10-brush-left,
  #roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="cross"] .rd10-brush-left,
  #roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="scrub"] .rd10-brush-left{
    transform:translateX(56px) rotate(5deg) scale(1.15) !important;
  }
  #roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="side"] .rd10-brush-right,
  #roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="cross"] .rd10-brush-right,
  #roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="scrub"] .rd10-brush-right{
    transform:translateX(-56px) rotate(-5deg) scale(1.15) !important;
  }
  #roadeo-v9 .rd9-hero.rd10-cinematic .rd248-brush-diag-tl{top:-54px !important}
  #roadeo-v9 .rd9-hero.rd10-cinematic .rd248-brush-diag-br{bottom:-58px !important}
  #roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="side"] .rd248-brush-diag-tl{
    transform:translateX(calc(0px - var(--rd10-car-half) - 36px)) translateY(28px) rotate(42deg) scale(1.00) !important;
  }
  #roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="side"] .rd248-brush-diag-br{
    transform:translateX(calc(var(--rd10-car-half) + 36px)) translateY(-28px) rotate(-42deg) scale(1.00) !important;
  }
  #roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="cross"] .rd248-brush-diag-tl,
  #roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="scrub"] .rd248-brush-diag-tl{
    transform:translateX(calc(0px - var(--rd10-car-half) + 54px)) translateY(112px) rotate(42deg) scale(1.12) !important;
  }
  #roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="cross"] .rd248-brush-diag-br,
  #roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="scrub"] .rd248-brush-diag-br{
    transform:translateX(calc(var(--rd10-car-half) - 54px)) translateY(-112px) rotate(-42deg) scale(1.12) !important;
  }
}

/* ---------------------------------------------------------
   3) MOBILE TYPOGRAPHY — BREAK THE OLD 19PX !IMPORTANT FLOOR
   The root carries .rd248-mobile-type specifically so these selectors
   have enough specificity to win against older !important declarations.
--------------------------------------------------------- */
@media (max-width:900px){
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type{font-size:15px !important}

  #roadeo-v9.rd248-mobile-type.rd248-mobile-type p,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type li,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type a,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type button,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type label,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type input,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type select,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type textarea,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type figcaption,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type summary,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type td,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type th,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type span{
    font-size:15px !important;
    line-height:1.5 !important;
  }

  #roadeo-v9.rd248-mobile-type.rd248-mobile-type small,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type .rd9-kicker,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type [class*="badge"],
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type [class*="eyebrow"],
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type .rd9-topbar *,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type .rd9-gallery-img span,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type .rd9-price-card>small,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type .rd9-price-card>span,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type .rd9-plan-strip article>span,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type .rd9-schedule-card>small{
    font-size:14px !important;
    line-height:1.4 !important;
  }

  #roadeo-v9.rd248-mobile-type.rd248-mobile-type .rd11-primary-nav .rd9-nav>li>a,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type .rd9-btn{
    font-size:15px !important;
    line-height:1.25 !important;
  }

  #roadeo-v9.rd248-mobile-type.rd248-mobile-type h1,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type .rd9-hero.rd10-cinematic h1{
    font-size:clamp(32px,9.4vw,42px) !important;
    line-height:1.00 !important;
  }
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type h2{
    font-size:clamp(27px,7.2vw,34px) !important;
    line-height:1.08 !important;
  }
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type h3{
    font-size:clamp(20px,5.5vw,25px) !important;
    line-height:1.14 !important;
  }

  /* Keep visual numbers/prices intentionally larger than body copy. */
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type .rd9-price{font-size:clamp(44px,13vw,64px) !important;line-height:.95 !important}
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type .rd9-price sup{font-size:18px !important}
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type .rd9-stat-row strong{font-size:clamp(27px,8vw,38px) !important}
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type .rd9-hero-price strong{font-size:28px !important;line-height:1 !important}
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type .rd9-hero-price small,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type .rd9-hero-price span{font-size:11px !important;line-height:1.15 !important}
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type .rd9-fuel-icon{font-size:28px !important;line-height:1 !important}
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type .rd9-phone{font-size:16px !important;line-height:1.2 !important}
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type .rd9-ticker-track{font-size:14px !important}
}

@media (max-width:430px){
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type{font-size:14.5px !important}
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type p,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type li,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type a,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type button,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type label,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type input,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type select,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type textarea,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type span{font-size:14.5px !important}
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type small,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type .rd9-kicker,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type .rd9-topbar *{font-size:13px !important}
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type .rd11-primary-nav .rd9-nav>li>a,
  #roadeo-v9.rd248-mobile-type.rd248-mobile-type .rd9-btn{font-size:15px !important}
}