/*
 * Hero alignment correction (visual QA). Loaded only on service pages other
 * than Commercial Construction, plus About. Mirrors the reference
 * .hero-heading-2 / .hero-content-2 rules used by Commercial Construction so
 * the heading and CTA share one left edge. Markup and IX2 untouched.
 */
.section-4.service-hero .hero-heading-3,
.section-4.about .hero-heading-3 {
  text-align: left;
  text-wrap: balance;
}

/* The generic .electrical-panels card class (padding: 15px) also matched the
   hero section and pushed its content right of the shared gutter. */
.hero-section-3.electrical-panels {
  padding-left: 0;
  padding-right: 0;
}

/* About: its CTA sits outside .hero-content-8 (a sibling in the wrap), so
   the reference spacing is reproduced on the wrap/content/CTA instead.
   The content's 20px bottom margin moves below the CTA, leaving the
   heading's own 10px margin as the heading-CTA gap (as in the reference). */
.section-4.about .hero-content-8 {
  max-width: 600px;
  margin-bottom: 0;
}
.section-4.about .hero-content-wrap-8 > .button-primary-3 {
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  .section-4.about .hero-content-8 { max-width: 360px; }
}
@media screen and (max-width: 479px) {
  .section-4.about .hero-content-8 { max-width: 400px; }
  /* Reference phone inset = 20px wrap gutter + 10px content inset, applied
     to the shared wrap so heading and CTA move together. */
  .section-4.about .hero-content-wrap-8 { padding-left: 30px; }
}

@media screen and (max-width: 479px) {
  .section-4.service-hero .hero-content-3,
  .section-4.service-hero .hero-content-4,
  .section-4.service-hero .hero-content-5,
  .section-4.service-hero .hero-content-6,
  .section-4.service-hero .hero-content-7 {
    padding-left: 10px;
  }
}