/* =============================================================
   Responsive refinements for phones & tablets.
   Loaded after the main inline styles, so these win where they overlap.
   ============================================================= */

/* Comfortable tap targets + no blue tap flash on mobile */
button, .btn, .ec-btn, nav.links a, .area-chip { -webkit-tap-highlight-color: transparent; }
.btn, .ec-btn, #loginBtn, .btn-sm { min-height: 44px; }
input, select, textarea { font-size: 16px; } /* stops iOS from zooming on focus */

/* Respect phone notches / rounded corners */
.wrap { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }

/* ---------- Tablets (portrait) ---------- */
@media (max-width: 1024px) {
  .section { padding: 80px 0; }
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .work-grid { grid-template-columns: 1fr 1fr; }
  .areas-grid { grid-template-columns: repeat(4, 1fr); }
  .contact-wrap { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* ---------- Large phones / small tablets ---------- */
@media (max-width: 760px) {
  .hero .wrap { gap: 30px; }
  .hero .proof { gap: 18px; }
  .hero .proof b { font-size: 1.35rem; }
  .section-head { margin-bottom: 40px; }
  .promo-banner { padding: 30px 24px; }
  .promo-banner h3 { font-size: 1.6rem; }
  .quote-form, .contact-form { padding: 24px; }
  .portal-login .left, .portal-login .right { padding: 30px 24px; }
  .map-box { height: 190px; }
  /* Before/after photos are portrait — cap their height so they don't dominate the screen */
  .ba-feature, .work-card { max-width: 460px; margin-left: auto; margin-right: auto; }
  .ba[style*="3/4"] { max-height: 68vh; aspect-ratio: auto; }
}

/* ---------- Phones ---------- */
@media (max-width: 560px) {
  .section { padding: 56px 0; }
  .wrap { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
  h1, .hero h1 { font-size: clamp(2.2rem, 10vw, 3rem); }
  .section-head h2 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .svc-grid, .steps, .work-grid, .grid2 { grid-template-columns: 1fr; }
  .areas-grid { grid-template-columns: repeat(2, 1fr); }
  .ec-btns { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .trust .wrap { justify-content: flex-start; gap: 12px 20px; }
  .trust .item { font-size: .92rem; }
  .hero .cta-row .btn { width: 100%; justify-content: center; }
  .portal-top { padding: 16px 18px; }
  .portal-body { padding: 18px; }
  .job { padding: 18px; }
  .thumb { width: 72px; height: 54px; }
  .toast { left: 12px; right: 12px; transform: translateY(140%); max-width: none; text-align: center; }
  .toast.show { transform: translateY(0); }
}

/* Very small phones */
@media (max-width: 380px) {
  .areas-grid { grid-template-columns: 1fr; }
  .ec-btns { grid-template-columns: 1fr; }
  .brand .name { font-size: 1.02rem; }
}

/* Landscape phones: keep the hero from getting too tall */
@media (max-height: 560px) and (orientation: landscape) {
  .hero .wrap { padding-top: 40px; padding-bottom: 48px; }
}