/* Fix service page vertical jump caused by one-line vs two-line headings */
:root {
  --sos-service-hero-min-height: 360px;
  --sos-service-title-block-height: 126px;
}

/* Keep hero/content panels top-oriented instead of vertical-centering around the title */
.hero,
.page-hero,
.service-hero,
.brand-panel,
.split-hero,
.detail-hero,
.content-hero,
section.hero,
main > section:first-of-type {
  align-items: flex-start !important;
}

.hero .container,
.page-hero .container,
.service-hero .container,
.brand-panel .container,
.split-hero .container,
.detail-hero .container,
.content-hero .container,
.hero-grid,
.brand-panel-grid,
.split-grid,
.service-hero-grid {
  align-items: flex-start !important;
}

/* Reserve consistent title space so wrapped and unwrapped headings do not move content */
.service-page h1,
body[class*="service"] h1,
body[class*="small-business"] h1,
body[class*="home-services"] h1,
.page-title h1,
.hero h1,
.page-hero h1,
.service-hero h1 {
  min-height: var(--sos-service-title-block-height) !important;
  display: flex !important;
  align-items: flex-start !important;
  margin-bottom: 12px !important;
  line-height: 1.08 !important;
}

/* Keep the full top block a consistent height across service detail pages */
.service-page .hero,
.service-page .page-hero,
.service-page .service-hero,
body[class*="service"] .hero,
body[class*="small-business"] .hero,
body[class*="home-services"] .hero {
  min-height: var(--sos-service-hero-min-height) !important;
  padding-top: 56px !important;
  padding-bottom: 36px !important;
}

/* Prevent surrounding panels/cards from centering vertically against short headings */
.service-layout,
.detail-layout,
.page-layout,
.content-grid,
.two-column,
.service-detail-grid {
  align-items: flex-start !important;
}

/* Mobile: smaller reserved title block but still stable */
@media (max-width: 760px) {
  :root {
    --sos-service-hero-min-height: 300px;
    --sos-service-title-block-height: 96px;
  }
  .service-page h1,
  body[class*="service"] h1,
  body[class*="small-business"] h1,
  body[class*="home-services"] h1,
  .page-title h1,
  .hero h1,
  .page-hero h1,
  .service-hero h1 {
    min-height: var(--sos-service-title-block-height) !important;
  }
}