/* ==========================================================================
   MOBILE — loaded LAST, everything inside a max-width query so the desktop
   layout is untouched.

   Measured on a real iPhone-class emulation (390x844 @3x, touch, iOS UA)
   before any of this existed:
     · 5,107 KB transferred, of which 1,835 KB was a hero video that never
       played and 1,678 KB were CSS background photographs sitting under a
       90% scrim on a 390px screen
     · the BOOK NOW rail covered the hero subhead, the project cards and the
       AFTER tag on the before/after slider
     · 14 tap targets under 44px, the menu links at 20px
     · 17,402px of page

   The video is dealt with in index.html (the element is no longer created on
   phones at all). Everything else is here.
   ========================================================================== */

@media (max-width: 767px) {

  /* ---- 1 · the BOOK NOW rail -------------------------------------------
     A vertical bar of rotated text pinned to the middle of the right edge.
     On a 390px screen it covers roughly 60px of every section it passes,
     which on this page means the hero subhead, the right edge of the project
     cards and the AFTER tag on the slider. It is a desktop affordance; the
     header keeps a gold "Free Estimate" and every section has its own CTA. */
  a[class*="fixed"][class*="bg-primary"] { display: none !important; }

  /* ---- 2 · the chat bubble ---------------------------------------------
     Kept - it is a lead path - but pulled into the corner and sized down so
     it stops landing on card content. */
  div[class*="fixed"][class*="bottom-6"][class*="right-6"] {
    bottom: 12px !important;
    right: 12px !important;
  }
  div[class*="fixed"][class*="bottom-6"][class*="right-6"] button {
    transform: scale(.82);
    transform-origin: bottom right;
  }

  /* ---- 3 · section background photographs -------------------------------
     Eight full-bleed .webp backgrounds, 190-265 KB each, drawn under a scrim
     that is 90% opaque at the top and 97% at the bottom. At 390px wide they
     are not visible - they are just bytes and decode time. The gradient stays
     so the banding and depth survive. */
  main section[data-bb="services"],
  main section[data-bb="why"],
  main section[data-bb="process"],
  main section[data-bb="reviews"],
  main section[data-bb="areas"],
  main section[data-bb="faq"],
  main section[data-bb="cta"],
  main section[data-bb="projects"] {
    background-image: linear-gradient(180deg,
        rgba(23,7,12,.97) 0%, rgba(30,10,16,.94) 45%,
        rgba(23,7,12,.98) 100%) !important;
  }

  /* The rules above only win once projects.js has stamped data-bb on each
     section. Before that, palette.css addresses the same sections by
     nth-of-type - and the browser has already started fetching those
     backgrounds by then. Same override, keyed the same way, so the request is
     never made. */
  main section:nth-of-type(3), main section:nth-of-type(4),
  main section:nth-of-type(5), main section:nth-of-type(6),
  main section:nth-of-type(7), main section:nth-of-type(8),
  main section:nth-of-type(9), main section:nth-of-type(10),
  main section:nth-of-type(11) {
    background-image: linear-gradient(180deg,
        rgba(23,7,12,.97) 0%, rgba(30,10,16,.94) 45%,
        rgba(23,7,12,.98) 100%) !important;
  }

  /* ---- 4 · tap targets --------------------------------------------------
     The slide-in menu's links were 20px tall. Apple's floor is 44. */
  div[class*="max-w-sm"] a,
  div[class*="max-w-sm"] button {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  header a[href^="tel:"] { min-height: 44px; }

  /* The 20px targets were the footer link columns, not the menu. */
  footer a[class*="items-center"] { min-height: 44px; }

  /* footer contact + legal lines were 15-20px */
  footer a[href^="tel:"], footer a[href^="mailto:"],
  footer a[href*="privacy" i], footer a[href*="terms" i] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* "See All Reviews on Google" was a 30px line of text */
  main section[data-bb="reviews"] a[class*="inline-flex"] { min-height: 44px; }

  /* ---- 5 · the hero -----------------------------------------------------
     "the Warranty" ran to within a few px of both edges, and the subhead was
     clipped by the rail. Real gutters, and a headline that fits the column. */
  section.min-h-screen h1 {
    padding-left: 14px;
    padding-right: 14px;
    font-size: clamp(38px, 11.5vw, 52px) !important;
    line-height: 1.06 !important;
  }
  section.min-h-screen p {
    padding-left: 18px;
    padding-right: 18px;
  }

  /* ---- 5b · the "Scroll" indicator was landing on the trust line -------
     The hero's trust row (500+ Projects / 20 Years / 5-Star / NJ Licence)
     wraps to four lines on a 375px screen and runs from y=741 to y=893. The
     decorative "Scroll" cue is absolutely positioned at bottom-8 and occupies
     y=812-851 at x=188-245 - straight through "5-Star Google Rated". On a
     phone nobody needs to be told to scroll. */
  section.min-h-screen div[class*="absolute"][class*="bottom-8"] {
    display: none !important;
  }

  /* The trust row repeats the stats card word for word - 500+ Projects
     Completed / 20 Years in the Trade / 5-Star Google Rated / NJ Licence are
     in both, stacked one above the other. The card says it better, so on a
     phone the plain text line goes. */
  section.min-h-screen div[class*="flex-wrap"][class*="justify-center"][class*="gap-6"] {
    display: none !important;
  }

  /* (kept for reference: the two-column treatment, if the row ever comes back)
  .bb-trust-two-col {
  section.min-h-screen div[class*="flex-wrap"][class*="justify-center"][class*="gap-6"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px 8px !important;
    padding: 0 12px;
  }
  }
  */

  /* ---- 6 · the before/after slider -------------------------------------
     Full-bleed cards read better than 26px gutters on a phone, and the
     caption needs to clear the top of the frame. */
  #bb-ba .rowGrid { gap: 16px; }
  #bb-ba { padding: 52px 0 58px; }

  /* ---- 7 · trim the scroll ---------------------------------------------
     17,400px is a long way to the footer. These are the paddings doing the
     least work on a narrow screen. */
  main section[data-bb] { padding-top: 56px !important; padding-bottom: 56px !important; }
}

/* Very narrow phones (iPhone SE and the like) */
@media (max-width: 380px) {
  section.min-h-screen h1 { font-size: clamp(32px, 10.5vw, 42px) !important; }
}