/* L&A Building Experts — mobile experience layer (loaded last so it wins) */

/* 1) Kill horizontal overflow (was clipping text + hiding the menu button) */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, iframe, table { max-width: 100%; }
.herogrid > *, .split > *, .inc > *, .revs > *, .strip > *, .g > *, .cc > *,
.hero .cta > *, .trust .wrap > *, .areas > *, .qgrid > *, .q2 > * { min-width: 0; }

/* 2) Stop iOS auto-zooming when a form field is tapped (needs >=16px) */
input, select, textarea { font-size: 16px; }

/* 3) Force the two-column layouts to stack on small screens */
@media (max-width: 860px) { .herogrid { grid-template-columns: 1fr !important; } }
@media (max-width: 820px) { .split { grid-template-columns: 1fr !important; } .qgrid { grid-template-columns: 1fr !important; } }

/* 4) Phone typography & spacing */
@media (max-width: 600px) {
  h1, h2, h3, p, li, summary { overflow-wrap: break-word; word-break: break-word; }
  .hero h1 { font-size: 26px; line-height: 1.18; }
  .hero .wrap { padding: 42px 16px 36px; }
  .hero p.sub, .hero p { font-size: 16px; }
  section { padding: 40px 0; }
  .sec-h { font-size: 23px; }
  .band h2 { font-size: 23px; }
  .hero .cta { flex-direction: column; align-items: stretch; }
  .hero .cta > .btn { width: 100%; justify-content: center; }
  .leadcard { max-width: 100%; }
  .founder { grid-template-columns: 1fr !important; }
}

/* 5) Sticky mobile action bar (Call + Free Quote) */
#mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9500;
  display: none; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid #e5e7eb; box-shadow: 0 -4px 16px rgba(16,24,40,.12);
}
#mbar a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 14px 8px; border-radius: 11px; font-weight: 800; font-size: 15.5px;
  text-decoration: none; min-height: 50px;
}
#mbar .c { background: #77b800; color: #fff; }
#mbar .q { background: #2d2d2d; color: #fff; }
@media (max-width: 760px) {
  #mbar { display: flex; }
  body.has-mbar { padding-bottom: 74px; }
  body.has-mbar .la-chat { bottom: 80px !important; }
}

/* 6) The reCAPTCHA v3 badge is a 256px fixed element that forces horizontal
   overflow on mobile (widening the page and clipping content). Hide it —
   Google permits this when the "protected by reCAPTCHA" text is shown, which
   our forms display. This does NOT affect reCAPTCHA working. */
.grecaptcha-badge { display: none !important; }