/* Loaded only by the six service pages. Keep the Demolition hero's compact scale. */
.service-page .page-hero {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  --hero-label-line: 1.209rem;
}
.service-page .page-hero .wrap {
  /* Reserve a second label line from the existing inset, not extra header space. */
  padding-top: calc(100px - var(--hero-label-line));
}
.service-page .page-hero .eyebrow {
  min-block-size: calc(var(--hero-label-line) + var(--hero-label-line));
  line-height: var(--hero-label-line);
  display: flex;
  align-items: flex-end;
}
.service-page .page-hero h1 {
  max-width: 1200px;
  font-size: clamp(3.2rem, 5.5vw, 4.7rem);
  margin: 12px 0 16px;
}

/* Long text must not establish a minimum width for a grid or flex container. */
.service-page .content-grid > *,
.service-page .section-head > *,
.service-page .cta .wrap > *,
.service-page .footer-grid > *,
.service-page .page-hero .wrap,
.service-page .nav .brand {
  min-width: 0;
}
.service-page .content-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
}
.service-page .display,
.service-page .quote-box,
.service-page footer,
.service-page .gallery-grid figcaption {
  overflow-wrap: anywhere;
}
.service-page .btn,
.service-page .mobile-estimate-bar {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
.service-page .nav-toggle {
  flex-shrink: 0;
}
.service-page .brand-logo {
  height: auto;
}

@media (max-width: 900px) {
  .service-page .content-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .service-page .nav-links {
    max-height: calc(100dvh - 74px);
    overflow-y: auto;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 600px) {
  /* Fit even Construction as a whole word in the narrowest supported viewport. */
  .service-page .page-hero h1 {
    font-size: clamp(1.75rem, 8.5vw, 3.2rem);
  }
  /* Existing section headings also contain long words at a larger minimum size. */
  .service-page .content-grid h2,
  .service-page .section-head h2,
  .service-page .cta h2 {
    font-size: clamp(1.75rem, 7.5vw, 2.6rem) !important;
  }
  .service-page .nav .wrap {
    gap: 12px;
  }
  .service-page .brand {
    flex: 0 1 190px;
  }
  .service-page .brand-logo {
    width: 100%;
  }
  .service-page .checklist,
  .service-page .gallery-grid,
  .service-page .gallery-grid.gallery-expanded,
  .service-page .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}