/* Narrow desktop: keep the homepage message and service image side by side. */
@media (min-width: 821px) and (max-width: 1100px) {
  body .hero:has(.hero-service-carousel) {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(310px, 0.85fr) !important;
    gap: clamp(20px, 3vw, 34px) !important;
    align-items: center !important;
    padding: clamp(34px, 5vw, 54px) clamp(24px, 4vw, 44px) 30px !important;
    text-align: left !important;
  }

  body .hero:has(.hero-service-carousel) .hero-copy,
  body .hero:has(.hero-service-carousel) .hero-copy p,
  body .hero:has(.hero-service-carousel) h1 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body .hero:has(.hero-service-carousel) h1 {
    max-width: 620px !important;
    font-size: clamp(3rem, 5.7vw, 4rem) !important;
    line-height: 0.98 !important;
  }

  body .hero:has(.hero-service-carousel) .hero-copy p {
    max-width: 570px !important;
    font-size: clamp(0.92rem, 1.55vw, 1.08rem) !important;
  }

  body .hero:has(.hero-service-carousel) .hero-trust-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body .hero-service-carousel.product-scene {
    width: 100% !important;
    min-height: 500px !important;
    margin: 0 !important;
  }

  body .hero-carousel-frame,
  body .hero-carousel-track {
    min-height: 455px !important;
  }

  body .hero-slide-visual {
    width: min(360px, 100%) !important;
    height: 430px !important;
  }
}

/* Phone hero image: maximize the artwork inside its frame. */
@media (max-width: 820px) {
  body .hero-carousel-frame {
    padding: 0 !important;
    border-width: 1px !important;
    border-radius: 16px !important;
  }

  body .hero-service-slide {
    padding: 2px !important;
  }

  body .hero-slide-visual {
    width: 100% !important;
    height: calc(clamp(230px, 62vw, 310px) - 4px) !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
  }

  body .hero-slide-visual img {
    width: 100% !important;
    height: 100% !important;
  }
}