/* Protech Solutions — mobile home hero refinement
   Task #5: keep the approved hero design while surfacing the CTAs sooner
   on phones. Desktop/tablet composition remains unchanged. */
@media (max-width: 900px) {
  .topfoto {
    height: clamp(690px, 104svh, 790px) !important;
  }

  .hero {
    margin-top: calc(-1 * clamp(690px, 104svh, 790px)) !important;
    min-height: clamp(690px, 104svh, 790px) !important;
    padding-top: 108px !important;
    padding-bottom: 34px !important;
  }

  .hero .shell {
    width: min(100% - 32px, 1180px) !important;
  }

  .hero h1 {
    font-size: clamp(2.15rem, 9.7vw, 3.05rem) !important;
    line-height: 1.06 !important;
    max-width: 13ch !important;
    margin-top: 10px !important;
    margin-bottom: 16px !important;
  }

  .hero .lede {
    font-size: clamp(.98rem, 4.15vw, 1.12rem) !important;
    line-height: 1.5 !important;
    max-width: 34ch !important;
  }

  .hero .cta-row {
    margin-top: 24px !important;
    gap: 10px !important;
  }

  .hero .cta-row .btn {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
  }

  .hero .hero-rating {
    margin-top: 18px !important;
  }
}

@media (max-width: 520px) {
  .topfoto {
    height: 730px !important;
  }

  .hero {
    margin-top: -730px !important;
    min-height: 730px !important;
    padding-top: 100px !important;
    padding-bottom: 30px !important;
  }

  .hero h1 {
    font-size: clamp(2.05rem, 9.5vw, 2.7rem) !important;
    max-width: 13ch !important;
  }

  .hero .lede {
    font-size: clamp(.96rem, 4vw, 1.05rem) !important;
    line-height: 1.47 !important;
  }

  .hero .cta-row {
    margin-top: 20px !important;
  }
}