/* ============================================================
   Cleaning Monstar — Refinements v1
   Mobile/UX audit fixes. Loaded last so it wins the cascade
   over style.css → hero-v6.css → pricing-v1.css.
   ============================================================ */

/* ---------- 1. Honeypot must never be visible ----------
   .cm-hp had no rule anywhere, so the anti-spam field rendered as a real
   input under the Message box. The handler treats a filled honeypot as spam
   and fakes a success response — a customer who typed in it lost their lead
   silently. Hide it off-canvas (bots still see it; screen readers skip it). */
.cm-hp{
  position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;opacity:0!important;
  overflow:hidden!important;pointer-events:none!important;
}

/* ---------- 2. Hero background cut off half way across ----------
   style.css centres the room art with `left:50%; transform:translateX(-50%)`.
   hero-v6.css later re-anchored it with `inset:0; width:100%` but never reset
   the transform, so the SVG was sized to the full viewport and *then* shoved
   half a viewport left — painting -960→960 at 1920w and leaving the right side
   bare. Drop the orphaned transform so the art covers edge to edge. */
.hero-room{transform:none}

/* ---------- 3. "View Services" was hard to read ----------
   .btn-ghost is transparent with a 2px #E6ECF2 border — fine on a plain
   section, but over the hero's room artwork the label competed with whatever
   was behind it. Give it an opaque surface and a border with real contrast,
   while keeping it visually secondary to the solid green primary. */
.hero .btn-ghost{
  background:rgba(255,255,255,.94);
  border-color:rgba(23,32,51,.16);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 4px 18px rgba(23,32,51,.06);
}
.hero .btn-ghost:hover{background:#fff;border-color:var(--mint)}

/* ---------- 4. Mobile hero order ----------
   .hero-visual{order:-1} put the 900px quote form above the headline, so a
   phone visitor met seven form fields before ever reading what the business
   does — the H1 sat ~1.5 screens down. Lead with the pitch, then the form. */
@media(max-width:980px){
  .hero-visual{order:0}
  .hero-grid{gap:30px}
}

/* ---------- 5. Trim the mobile hero copy ----------
   Even in the right order, the copy block ran 509px — 63% of the first screen,
   leaving the form's first field 1.09 screens down. Three items earn their
   place on desktop but are dead weight on a phone:
     · the eyebrow pill repeats what the H1 already says
       ("Residential & Commercial Cleaning" vs "for Homes & Businesses")
     · "Get a Free Quote" scrolls to a form now sitting just below it, and the
       sticky bottom bar already carries a quote CTA at all times
     · .hero-trust-mini is near-verbatim the .trust-strip section directly
       beneath the hero ("One-time & recurring", "Detail-focused")
   Keeps the H1 (SEO + context for cold search traffic) and "View Services"
   as the one non-redundant action. */
@media(max-width:680px){
  .hero-copy .eyebrow{display:none}
  .hero-cta-row .btn-primary{display:none}
  .hero-trust-mini{display:none}
  .hero .hero-blurb{margin:10px 0 16px}
  .hero .hero-cta-row{margin-bottom:8px}
}

/* ---------- 6. Mascots vs. the form heading ----------
   The troupe is absolutely positioned at the top of .hero-form-wrap and is
   taller than the padding reserved for it, so the mascots' feet landed on top
   of "Get Your Free Quote". They're meant to straddle the card's top edge —
   keep that, but drop the heading below their feet. */
.hero .lead-form{padding-top:64px}
@media(max-width:980px){ .hero .lead-form{padding-top:72px} }
@media(max-width:680px){ .hero .lead-form{padding-top:50px} }

/* ---------- 7. iOS auto-zoom on focus ----------
   Safari zooms the viewport when a focused control is under 16px; every field
   was 15.36px, so tapping any input jerked the page larger and left it there. */
@media(max-width:680px){
  .field input,.field select,.field textarea{font-size:16px}
}

/* ---------- 8. Anchor targets clear the sticky header ----------
   site.js uses scrollIntoView() with no offset, so #quote-form / #contact
   landed underneath the fixed header. */
[id]{scroll-margin-top:calc(var(--header-h) + 18px)}

/* ---------- 9. Tap targets ----------
   WCAG 2.5.5 / iOS HIG want ~44px. "Learn More" was 24px, footer links 18px,
   the hamburger 34px. */
@media(max-width:980px){
  .hamburger{padding:13px 10px}
  .mobile-nav a{min-height:48px;display:flex;align-items:center}
  .service-card .sc-cta{min-height:44px}
  .footer-col a{padding:11px 0}
  .footer-contact a{display:inline-block;padding:11px 0}
  .btn-sm{padding:15px 22px}
  .brand{padding:7px 0}
  /* tap-to-call / tap-to-email on the contact cards were 18px tall */
  .info-line a{display:inline-block;padding:12px 0}
  .footer-social a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* ---------- 10. Type floor on phones ----------
   Sub-12px labels are hard to read at arm's length. (.wm-top and .eyebrow are
   deliberately small letterspaced wordmark/label styling — left alone.) */
@media(max-width:680px){
  .service-card .mon-name{font-size:.8rem}
  .big-card .badge-pill{font-size:.8rem}
  .form-note{font-size:.85rem}
}

/* ---------- 11. Hero CTAs read as one stack on phones ----------
   Side-by-side pills wrap into two ragged different-width rows at 375px. */
@media(max-width:680px){
  .hero-cta-row{flex-direction:column;align-items:stretch}
  .hero-cta-row .btn{width:100%;justify-content:center}
}

/* ---------- 12. Horizontally scrollable price table affordance ----------
   The table is 560px inside a 339px wrapper; without a hint the extra columns
   read as missing rather than scrollable. */
@media(max-width:680px){
  .price-table-wrap{
    -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,.25));
    mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,.25));
  }
}