/* ============================================================
   PWS Services Hire — mobile layer
   The bundled homepage was authored at a 1440px preview width and
   shipped breakpoints only at 1120px and 900px. This file adds the
   phone-sized behaviour. Loaded after the bundle's own <style> blocks,
   so !important is used only where it must beat an inline style.
   ============================================================ */

/* — guards: nothing may push the page sideways — */
html, body { overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }

/* ── Header / nav ─────────────────────────────────────────────
   Below 1120px the bundle already swaps the inline links for the
   burger. The remaining nowrap pills still overflow a phone, so the
   phone number drops out (it is repeated inside the drawer) and the
   wordmark reduces to the logo mark, keeping the booking CTA visible. */
@media (max-width: 1000px) {
  #top nav { gap: 10px !important; padding: 10px 12px !important; }
  #top nav a[href^="tel:"] { display: none !important; }
}
@media (max-width: 600px) {
  #top nav > a[href="#top"] > span { display: none !important; }
  #top nav .burger { padding: 12px 16px !important; }
  #top nav a[href="#search"] { padding: 12px 18px !important; font-size: 13.5px !important; }
}

/* ── Hero ─────────────────────────────────────────────────────
   112vh forced a phone user to scroll a full screen before reaching
   any content, and vh ignores mobile browser chrome. svh fits the
   visible viewport; the padding keeps the copy clear of the nav. */
@media (max-width: 900px) {
  #top > .card {
    min-height: calc(100vh - 20px) !important;
    min-height: calc(100svh - 20px) !important;
  }
  #top > .card > div:last-of-type { padding-top: 92px !important; }
}

/* ── Forms ────────────────────────────────────────────────────
   iOS Safari zooms the page whenever a focused field is under 16px. */
@media (max-width: 900px) {
  .fld input, .fld select, form input { font-size: 16px !important; }
}
@media (max-width: 600px) {
  form .pill { width: 100% !important; }
}

/* ── Reviews ──────────────────────────────────────────────────
   Three columns become two at 1120px but never reach one. */
@media (max-width: 760px) {
  .rev { grid-template-columns: minmax(0,1fr) !important; }
}

/* ── "Three simple steps" image pair ──────────────────────────
   Its height:100% resolves against an auto-height row once the
   parent stacks, which collapses the images. */
@media (max-width: 900px) {
  .m-steps-media {
    height: auto !important;
    grid-template-rows: auto auto !important;
  }
  .m-steps-media img { height: auto !important; }
}

/* ── "Everything's on board" tabs ─────────────────────────────
   Three nowrap tabs are wider than a phone; let them wrap. */
@media (max-width: 700px) {
  [role="tablist"] {
    flex-wrap: wrap !important;
    justify-content: center;
    border-radius: 22px !important;
  }
  .tabbtn { padding: 11px 16px !important; font-size: 13.5px !important; }
}

/* ── Section rhythm ───────────────────────────────────────────
   One section carries a fixed 96px band; the rest already clamp. */
@media (max-width: 700px) {
  section[style*="padding:96px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}