/* ===== SoffitPro — mobile optimization (premium, centered) ===== */
@media (max-width: 880px){
  /* Type scales down sensibly on phones */
  h1{ font-size: clamp(34px,8.6vw,50px) !important; line-height:1.06 !important; letter-spacing:-.02em !important; text-align:center !important; }
  h2{ font-size: clamp(27px,6.6vw,40px) !important; line-height:1.12 !important; text-align:center !important; }
  p{ font-size:16.5px !important; line-height:1.6 !important; }

  /* Center hero/section copy and constrain width */
  section p{ text-align:center !important; margin-left:auto !important; margin-right:auto !important; max-width:560px !important; width:auto !important; height:auto !important; }

  /* Oversized eyebrow labels back to tasteful size, centered */
  div[style*="JetBrains Mono"][style*="text-transform"]{ font-size:13px !important; letter-spacing:.16em !important; text-align:center !important; justify-content:center !important; }

  /* Center every flex group (CTAs, trust points, chips) */
  section > div{ justify-content:center !important; }
  section > div > div[style*="flex:1"]{ text-align:center !important; }
  section > div > div[style*="flex: 1"]{ text-align:center !important; }

  /* CTA button rows: center + comfortable tap targets */
  a[href="#quote"], a[href^="tel:"]{ justify-content:center !important; }

  /* Cards: keep inner text left-aligned for readability */
  h3{ text-align:left !important; }

  /* Tighter, even section padding on phones */
  section{ padding-left:0 !important; padding-right:0 !important; }
  section > div{ padding-left:22px !important; padding-right:22px !important; }

  /* Trust strip / metrics: 2-up grid centered */
  /* Hero image keeps nice rounded frame, full width */
  img[alt*="soffit"], img[alt*="home"], img[alt*="exterior"]{ }
}

@media (max-width: 520px){
  h1{ font-size: clamp(30px,9vw,40px) !important; }
  /* Stack CTA buttons full-width for thumb reach */
  section .cta-row a, section a[href="#quote"]{ }
}

@media (max-width: 880px){
  #hero > div{ flex-direction:column !important; text-align:center !important; padding-top:40px !important; padding-bottom:48px !important; }
  #hero > div > div{ text-align:center !important; width:100% !important; min-width:0 !important; }
  #hero h1{ font-family:'Plus Jakarta Sans',system-ui,sans-serif !important; font-size:clamp(42px,11.5vw,62px) !important; line-height:1.02 !important; letter-spacing:-.035em !important; font-weight:800 !important; margin:0 0 20px !important; }
  #hero p{ font-size:18px !important; line-height:1.55 !important; margin:0 auto 28px !important; max-width:520px !important; width:auto !important; height:auto !important; }
  #hero > div > div > div{ justify-content:center !important; }
  #hero a[href="#quote"], #hero a[href^="tel:"]{ justify-content:center !important; }
}