/* Approved hero composition 03. Keep the existing portrait, headline copy,
   conversion link, and CTA treatment; adjust only their typography and spacing. */
@media (max-width: 1023px) {
  #hero h1 > .hero-service {
    top: 16px;
    right: 0;
    left: 0;
    margin: 0;
    font-size: clamp(18px, 4.65vw, 20px);
    font-weight: 800;
    letter-spacing: .025em;
    line-height: 1.2;
  }

  #hero h1 > .hero-headline {
    max-width: 360px;
  }

  #hero h1 > .hero-headline > .hero-headline-before {
    font-size: .82em;
    font-weight: 700;
    line-height: 1.18;
  }

  #hero h1 > .hero-headline > .hero-headline-after {
    margin-top: 12px;
    font-size: 1.16em;
    line-height: 1.06;
  }

  #hero .hero-entry {
    padding-top: clamp(47px, 6.8svh, 64px);
  }
}

@media (max-width: 600px) and (max-height: 650px) {
  #hero h1 > .hero-service {
    top: 10px;
    font-size: 17px;
  }

  #hero .hero-entry {
    padding-top: 36px;
  }

  #hero h1 > .hero-headline > .hero-headline-after {
    margin-top: 8px;
  }
}

@media (min-width: 1024px) {
  #hero h1 > .hero-service {
    margin-bottom: 24px;
    font-size: clamp(17px, 1.3vw, 20px);
    font-weight: 800;
    letter-spacing: .045em;
    line-height: 1.25;
  }

  #hero h1 > .hero-headline > .hero-headline-before {
    font-size: .78em;
    font-weight: 700;
    line-height: 1.17;
  }

  #hero h1 > .hero-headline > .hero-headline-after {
    margin-top: 14px;
    font-size: 1.14em;
    line-height: 1.06;
  }

  #hero .hero-entry {
    padding-top: 54px;
  }
}