/* VOICE PORTAL HERO 008.4 — only desktop hero composition and headline scale.
   Retains the UNMODIFIED Jeep image and the 008.3 three-car offer section.
   Does not affect existing menu, actions, search, login, API, VIN or QR. */
@media (min-width: 921px) {
  .hero {
    grid-template-columns: 46% 54%;
    min-height: 545px;
    padding: 54px 30px 54px;
  }
  /* Put the photo beyond the copy; keep the ORIGINAL image byte-for-byte. */
  .hero::before {
    top: 0;
    bottom: 0;
    left: 40%;
    right: 0;
    background-image: url('/voice-jeep-0083.webp?v=0083');
    background-position: left center;
    background-size: cover;
    background-repeat: no-repeat;
    /* Only the empty edge of the original photo blends into the page.
       The Jeep begins after the blend, keeping its tires and doors clear. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.80) 1.5%, #000 4.4%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.80) 1.5%, #000 4.4%);
  }
  .hero::after {
    background: linear-gradient(90deg,
      #f9fcff 0%, #f9fcff 30%,
      rgba(249,252,255,.94) 33%,
      rgba(249,252,255,.55) 36%,
      rgba(249,252,255,0) 40%);
  }
  .hero .hero-art { min-height: 425px; }
  .hero .hero-copy { z-index: 3; }
  .hero h1 {
    font-size: clamp(46px, 3.85vw, 61px);
    letter-spacing: -2.8px;
    line-height: 1.075;
    max-width: 620px;
  }
}
/* Keep the existing 008.3 separately framed photograph on phones/tablets. */
@media (max-width: 920px) {
  .hero h1 {font-size: clamp(39px, 7.5vw, 62px);letter-spacing:-2.2px;line-height:1.09;}
  .hero::before {
    top: auto; bottom: 25px; left: 18px; right: 18px;
    height: min(62vw, 430px);
    background-image: url('/voice-jeep-0083.webp?v=0083');
    background-position: center center;
    background-size: cover;
    border-radius: 17px;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero::after {background: none;}
}
@media (max-width: 650px) {
  .hero h1 {font-size: clamp(35px, 8.1vw, 49px);letter-spacing:-1.8px;overflow-wrap:normal;}
  .hero::before {bottom:16px;left:12px;right:12px;height:min(73vw,345px);border-radius:13px;}
}