/* Homepage hero: match the supplied van photograph so nothing is cropped. */
main > section:first-child {
  min-height: 0 !important;
  display: block;
  padding-top: 5rem !important;
  background: #1f2937;
}

main > section:first-child > div:nth-child(1) {
  position: relative !important;
  inset: auto !important;
  width: 100%;
  aspect-ratio: 39 / 35;
  background-image: url("../site-photos/hero-roof.jpg?v=20260915-van") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  transform: none !important;
}

main > section:first-child > div:nth-child(2),
main > section:first-child > div:nth-child(3) {
  display: none !important;
}

main > section:first-child > div:nth-child(4) {
  display: block !important;
  padding: 2rem 1.25rem 2.5rem !important;
}

main > section:first-child > div:nth-child(4) > div:first-child {
  max-width: 44rem;
}

@media (min-width: 1024px) {
  main > section:first-child {
    min-height: 680px !important;
    display: flex;
    align-items: center !important;
    padding-top: 6rem !important;
  }

  main > section:first-child > div:nth-child(1) {
    position: absolute !important;
    top: 54% !important;
    right: 2rem !important;
    bottom: auto !important;
    left: auto !important;
    width: min(48vw, 670px);
    aspect-ratio: 39 / 35;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1.25rem;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
    transform: translateY(-50%) !important;
  }

  main > section:first-child > div:nth-child(4) {
    width: 100%;
    padding: 3rem 2rem !important;
  }

  main > section:first-child > div:nth-child(4) > div:first-child {
    width: 43%;
    max-width: 35rem;
  }

  main > section:first-child h1 {
    font-size: clamp(3rem, 4.3vw, 4rem) !important;
    line-height: 0.98 !important;
  }

  main > section:first-child > div:nth-child(4) > div:last-child {
    display: none !important;
  }
}

@media (min-width: 1440px) {
  main > section:first-child > div:nth-child(1) {
    right: max(2rem, calc((100vw - 1280px) / 2));
  }
}
