/* ════════════════════════════════════════════════════════════
   MOBILE POLISH — phone-only overrides, loaded last.

   Everything here is inside a max-width media query, so it cannot affect
   desktop. Rules are added one at a time and verified against a screenshot of
   BOTH the hero and the section being changed: a broad multi-selector rule
   (position/z-index on .section-header) collapsed the hero earlier tonight,
   and .section-header turns out to be used by the hero too.

   This file is separate from style.css on purpose. The page loads
   css/style.min.css, which has been stale against css/style.css since June 20 —
   editing the source there changes nothing in the browser, and re-minifying
   would ship ~2 months of unreviewed drift. This file loads unminified.
   ════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── 1. The phone CTA was 27px tall ────────────────────────
     "Tap to Call" is the single most important control on a phone and it was
     under the 44px minimum by a wide margin. */
  .sticky-call__link {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── 2. Micro-labels were 11.2px ───────────────────────────
     The stat counters' labels and the gallery captions sat just under the
     legibility floor on a phone. 12px, and a touch more line height. */
  .stat-item__label,
  .project-card__badge,
  .tl-tab__title,
  .tl-tab__loc {
    font-size: 12px;
    line-height: 1.45;
  }

  /* ── 3. The header's call bar was a 27px-tall row ──────────
     Separate element from the bottom sticky bar, same problem: the phone
     number is the primary conversion on mobile and it was half the minimum
     touch height. */
  .sticky-cta a {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  /* ── 4. Service-card CTAs were 22px text links ─────────────
     Every other call to action on the site is a real button; these were bare
     inline links with an arrow, and the thinnest tap targets on the page. Same
     styling language, just given a proper hit area. */
  .service-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 2px;
  }

  /* ── 5. Nav controls and inline contact links ──────────────
     The hamburger was 38x32 and the logo 35 tall; the footer's phone and email
     were 17px-tall text links. All are primary navigation or contact on a
     phone. Padding only — nothing here changes how any of them look. */
  .nav__hamburger { min-width: 44px; min-height: 44px; }
  .nav__logo { min-height: 44px; display: inline-flex; align-items: center; }

  .contact-line a,
  .footer-contact a,
  a[href^="tel:"],
  a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* the estimate slider's rail was 4px tall — impossible to grab */
  .calc-range { height: 28px; }

  /* checkboxes in the yard-finder were 16px */
  .jm-row input[type="checkbox"],
  #quiz input[type="checkbox"] { width: 24px; height: 24px; }

  /* ── 6. Cards were transparent, so the vine showed through ──
     The vine is correctly BEHIND these cards — it disappears across the photo
     and reappears over the text, which is the giveaway: the photo is opaque and
     the card body is not. The card had no background at all, so the vine read
     as running over the copy.

     --bone is the cream these cards already sit on, and it is the exact colour
     the guarantee cards use, so this changes nothing about how they look. */
  .project-card,
  .project-card__body { background: var(--bone); }
}