/* Homepage hero on phones (Jarrod, 4 Nov 2026).
   A full-screen photo behind the copy showed about a third of the ute, blown up about twice
   ("very stretched"). Jarrod wants the text inside the photo, so on phones the photo is a 3:4
   panel under the menu instead of the whole screen: the heading sits over the sky at the top,
   the buttons over the ground at the bottom, and the ute shows between them. The slide
   controls sit under the photo. Desktop and tablets are unchanged. */
@media(max-width:640px){
  /* 124px is the fixed header (top bar + menu) at every phone width, 320 to 640px. */
  .home-page .home-hero{display:grid;grid-template-columns:minmax(0,1fr);place-items:stretch;min-height:0;padding:124px 0 10px}
  .home-hero-photos,.home-hero-shade{grid-area:1/1;position:relative;inset:auto;width:auto;height:auto}
  .home-hero-shade{background:linear-gradient(180deg,#111110cc 0%,#11111080 22%,#11111000 40%,#11111000 48%,#111110a6 66%,#111110eb 100%)}
  .home-hero-copy{grid-area:1/1;display:flex;flex-direction:column;align-items:center;min-height:min(133.34vw,760px);padding-top:16px;padding-bottom:16px}
  .home-hero h1.display{margin:10px 0 0}
  .home-hero p.lead{margin:auto 0 0;font-size:15px}
  .home-hero .hero-cta{margin-top:14px}
  .home-hero-note{margin-top:10px}
  .home-hero-controls{grid-area:2/1;position:relative;right:auto;bottom:auto;transform:none;justify-self:center;margin-top:6px}
}
/* The narrowest phones (320px) keep the heading on two lines. */
@media(max-width:360px){.home-hero h1.display{font-size:38px}}
/* Slide 1: the N90 is on the left of the photo, so narrow screens keep it in frame (desktop shows the full width). */
.home-hero-photo.hero-n90{object-position:10% 58%}
@media(max-width:640px){.home-hero-photo.hero-n90{object-position:10% 50%}}
/* Slides 2 and 3 (D-MAX, Triton) sit left of centre; keep each ute in frame on narrow screens. */
.home-hero-photo.hero-dmax{object-position:38% 58%}
.home-hero-photo.hero-triton{object-position:42% 58%}
@media(max-width:640px){.home-hero-photo.hero-dmax{object-position:38% 50%}.home-hero-photo.hero-triton{object-position:56% 50%}}