/* Keep intrinsic image height from dominating the service introduction. */
.service-hero {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 40px;
  padding: 44px 24px 48px;
  align-items: center;
}
.service-hero-copy { max-width: none; min-width: 0; }
.service-hero h1 { max-width: 19ch; font-size: 3.25rem; line-height: 1.08; margin: 14px 0 0; }
.service-hero-copy > p:not(.eyebrow):not(.service-breadcrumb) { font-size: 1.25rem; line-height: 1.6; max-width: 48ch; margin: 20px 0 0; }
.service-hero .hero-actions { flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.service-hero-image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 380px; object-fit: cover; box-shadow: none; align-self: center; }
.service-faq .faq-list { max-width: 860px; margin-inline: auto; }
.service-faq summary { font-size: 1.125rem; line-height: 1.5; min-height: 48px; }
.service-faq details p { max-width: 72ch; line-height: 1.7; }
@media (max-width: 920px) {
  .service-hero { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; }
  .service-hero h1 { max-width: 24ch; font-size: 2.75rem; }
  .service-hero-copy > p:not(.eyebrow):not(.service-breadcrumb) { max-width: 60ch; }
  .service-hero-image { max-width: 640px; max-height: none; aspect-ratio: 16 / 9; justify-self: center; }
}
@media (max-width: 640px) {
  .service-hero { padding: 28px 18px 36px; gap: 24px; }
  .service-hero h1 { font-size: 2.375rem; max-width: 20ch; }
  .service-hero-copy > p:not(.eyebrow):not(.service-breadcrumb) { font-size: 1.125rem; }
  .service-hero-image { aspect-ratio: 4 / 3; }
  .service-faq summary { font-size: 1rem; }
}