/* ==========================================================================
   Bright & Tidy — Mobile polish layer
   --------------------------------------------------------------------------
   Loaded LAST so it wins the cascade. Every rule is scoped to phone
   breakpoints; the approved desktop design is intentionally untouched.
   Authored from the Playwright mobile audit (_recon/mobile-audit).
   Sections map 1:1 to the Phase-2 fix groups.
   ========================================================================== */

@media (max-width: 600px) {

  /* =======================================================================
     GROUP 1 — SHARED CHROME (footer, eyebrow token, app-CTA, prose links)
     Cascades to all 119 pages.
     ===================================================================== */

  /* ---- Global label / eyebrow token: 12px -> 14px (strict 14px floor) --- */
  .eyebrow { font-size: 14px; }

  /* ---- Site footer ----------------------------------------------------- */
  /* copyright + legal row inherit 13px -> 14px */
  .footer__bottom { font-size: 14px; }
  .footer__bottom small { font-size: 14px; }
  /* legal links were 21px tall -> comfortable 44px tap rows */
  .footer__legal { gap: 6px 20px; }
  .footer__legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 2px; }
  /* column headings 13 -> 14 */
  .footer__col h5 { font-size: 14px; }
  /* column link rows were ~23px tall -> >=44px tappable list rows */
  .footer__col a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; margin-bottom: 2px; font-size: 15px; }
  .footer__cta-eyebrow { font-size: 14px; }
  /* social icons 42 -> 44 */
  .footer__social a { width: 44px; height: 44px; }
  /* store pills were 37px tall / 13px -> >=44px / 14px */
  .footer__apps a { padding: 12px 16px; font-size: 14px; }

  /* ---- Shared app-download CTA band (app-cta partial, ~100 pages) ------- */
  .app-cta__divider { font-size: 14px; }   /* "Or grab the app" 12 -> 14 */
  .app-cta__lang { font-size: 14px; }       /* 13 -> 14 */
  .book-badge small { font-size: 14px; }    /* "Download on the" 10 -> 14 */
  .book-badge strong { font-size: 16px; }   /* keep hierarchy above sublabel */
  /* home app section uses the same sublabel pattern */
  .app__badge-text small { font-size: 14px; }
  .app__badge-text strong { font-size: 16px; }

  /* ---- Inline prose links: comfortable spacing -------------------------
     (Inline text links are exempt from the 44px rule by WCAG 2.5.8; we still
     give them breathing room so they're easy to hit on mobile.) */
  .page-lede, .svc-card__body p, .faq-item__a, .contact-split__copy .page-lede { line-height: 1.8; }
  .page-lede a, .svc-card__body p a, .faq-item__a a, .bt-checks li a { padding-block: 2px; }

  /* ---- Standalone chip / pill / card links -> true 44px ---------------- */
  .area-chips a, .area-chips span { display: inline-flex; align-items: center; min-height: 44px; }
  /* burger button 42 -> 44 (shared header) */
  .nav__burger { width: 44px; height: 44px; }
  /* service-card CTA ("Explore" / "Book this") was 27px tall -> 44px */
  .svc-card__link { min-height: 44px; }

  /* =======================================================================
     GROUP 2 — MOBILE DRAWER (accordion). Cascades to all 119 pages.
     Fixes: 3,100px flattened list, ~150px caret, clipped descriptions,
     24px unreachable CTA, no internal scroll.
     ===================================================================== */

  /* drawer scrolls internally; safe-area bottom padding */
  .mobile-menu {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  /* constrain the oversized caret chevron (was ~150px) + rotate when open */
  .mobile-menu__list .caret { width: 18px; height: 18px; flex: none; transition: transform .3s var(--ease); }
  .mobile-menu__list .has-mega.is-open > a .caret { transform: rotate(180deg); }

  /* accordion collapse/expand of each mega sub-list (grid-rows technique) */
  .mobile-menu__list .sub-mega { padding: 0; }
  .mobile-menu__list .sub-mega::before { display: none; }
  /* neutralise the desktop FIXED mega-panel so it sits inside the drawer as an accordion */
  .mobile-menu__list .has-mega > .sub-mega,
  .mobile-menu__list .has-mega:hover > .sub-mega,
  .mobile-menu__list .has-mega:focus-within > .sub-mega {
    position: static;
    inset: auto;
    width: auto;
    max-width: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s var(--ease);
  }
  .mobile-menu__list .has-mega > .sub-mega > .sub-mega__inner { overflow: hidden; min-height: 0; padding-left: 14px; }
  .mobile-menu__list .has-mega.is-open > .sub-mega { grid-template-rows: 1fr; }

  /* sub-item text + tap size inside the drawer */
  .mobile-menu__list .sub-mega__list a { min-height: 44px; }
  .mobile-menu__list .mm-text em { font-size: 14px; }

  /* 3rd level (neighbourhoods) inside the mobile drawer — stack + thumb-size */
  .mobile-menu__list .sub-mega__list { display: block; }
  .mobile-menu__list .mm-locs { padding-left: 18px; margin: 2px 0 10px; }
  .mobile-menu__list .mm-locs a { display: flex; align-items: center; min-height: 40px; padding: 6px 10px; font-size: 15px; }

  /* full-width "Schedule pickup" CTA at the drawer foot (out-specify .mobile-menu a) */
  .mobile-menu .mobile-menu__cta {
    width: 100%; align-self: stretch;
    min-height: 50px; display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 20px; border-bottom: 0; font-size: 16px;
  }

  /* =======================================================================
     GROUP 3 — COMBO pages + shared content (svc-hero chip, review cards)
     ===================================================================== */
  .svc-hero__chip small { font-size: 14px; }        /* "Dockside pickup…" 13 -> 14 */
  .review footer em { font-size: 14px; }            /* "Customer · 2 years" 13 -> 14 */

  /* =======================================================================
     GROUP 5 — HOME (front-page)
     ===================================================================== */
  .jstop__label span { font-size: 14px; }           /* "Stop 01" 11 -> 14 */
  .jstop__label em { font-size: 14px; }             /* "Pickup at your door" 11 -> 14 */
  .app__notif em { font-size: 14px; }               /* phone-mockup notification 11 -> 14 */
  .hero-meta { font-size: 14px; }                   /* "Est. 2018 …" 12 -> 14 */
  .craft__mute { width: 44px; height: 44px; }       /* mute button 38 -> 44 */
  .service__body .link { min-height: 44px; display: inline-flex; align-items: center; } /* "Book this" 25 -> 44 */

  /* =======================================================================
     GROUP 6 — BLOG (single, post-card, index) + pricing + contact
     ===================================================================== */
  .post-hero__cat { font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; }
  .post-card__cat { font-size: 14px; }
  .post-card__meta, .post-card__meta time, .post-card__meta span { font-size: 14px; }
  .post-share span { font-size: 14px; }
  .social-row a { width: 44px; height: 44px; }
  .post-back { min-height: 44px; }
  .price-list__name small { font-size: 14px; }
  .contact-card__sub { font-size: 14px; }

  /* =======================================================================
     FOLLOW-UP — stragglers caught by the full re-audit
     ===================================================================== */
  /* universal: footer CTA sublabel 13.5 -> 14 (was on all 119 pages) */
  .footer__cta small { font-size: 14px; }

  /* home content labels + CTAs */
  .hero-pill { font-size: 14px; }
  .hero-rail__item em, .hero-rail__item i { font-size: 14px; }
  #journeyLabel { font-size: 14px; }
  .craft__foot, .craft__foot em { font-size: 14px; }
  .app__whatsapp { min-height: 44px; display: inline-flex; align-items: center; }
  .reviews__google-link { min-height: 44px; }

  /* book + contact: tappable phone/email values 27px -> 44px; book note 13.5 -> 14 */
  .contact-card__value { min-height: 44px; display: inline-flex; align-items: center; }
  .book-note { font-size: 14px; }
  .book-embed .__cc_policy, .book-embed .__cc_policy a { font-size: 14px; }

  /* blog: share icons carry inline width/height:40px — override for mobile only */
  .post-share a.social-row { width: 44px !important; height: 44px !important; }

  /* home: "Book this" service-card link font 13 -> 14 (tap height already fixed) */
  .service__body .link { font-size: 14px; }
  /* home: animated step chip label ("Pickup/Wash/…/Booking") 13 -> 14 */
  .how__chip strong, #howChipText { font-size: 14px; }

  /* home: remaining 13px labels surfaced once larger ones were fixed */
  .services__note { font-size: 14px; }
  .why__rating small { font-size: 14px; }
  .jstop__label strong { font-size: 14px; }
  .reviews__stars { font-size: 14px; }
  .app__lang { font-size: 14px; }
  .service__body ul li { font-size: 14px; }   /* home service-card checklist 13.5 -> 14 */
  .app__notif strong { font-size: 14px; }      /* app mockup notification title 13 -> 14 */

  /* blog index: post-card title link tap area (25px -> ~45px) */
  .post-card__title a { display: inline-block; padding-block: 10px; }

  /* /book CleanCloud widget (third-party): nudge its readable attribution/policy text */
  .book-embed .__cc_policy, .book-embed .__cc_policy a,
  .book-embed #poweredByCleanCloud, .book-embed #poweredByCleanCloud a { font-size: 14px !important; }

}

/* =====================================================================
   The whole mobile DRAWER must work up to the burger breakpoint (1100px),
   not just 600px. The theme locked every drawer rule (scroll, caret size,
   accordion, CTA) into @media 600, but the burger/drawer is active far
   wider — so on tablets (601-1100px) the carets blew up, the drawer would
   not scroll, and the desktop fixed mega-panel leaked over the page.
   Scoped to the drawer (.mobile-menu) so desktop is never touched.
   ===================================================================== */
@media (max-width: 1100px) {
  /* drawer scrolls internally */
  .mobile-menu { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  /* constrain + rotate the caret (was rendering at full SVG size) */
  .mobile-menu__list .caret { width: 18px; height: 18px; flex: none; transition: transform .3s var(--ease); }
  .mobile-menu__list .has-mega.is-open > a .caret { transform: rotate(180deg); }
  /* neutralise the desktop FIXED mega-panel -> in-flow accordion */
  .mobile-menu__list .sub-mega { padding: 0; }
  .mobile-menu__list .sub-mega::before { display: none; }
  .mobile-menu__list .has-mega > .sub-mega,
  .mobile-menu__list .has-mega:hover > .sub-mega,
  .mobile-menu__list .has-mega:focus-within > .sub-mega {
    position: static; inset: auto; width: auto; max-width: none;
    transform: none; opacity: 1; visibility: visible;
    background: transparent; box-shadow: none; border: 0; border-radius: 0;
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .35s var(--ease);
  }
  .mobile-menu__list .has-mega > .sub-mega > .sub-mega__inner { overflow: hidden; min-height: 0; padding-left: 14px; }
  .mobile-menu__list .has-mega.is-open > .sub-mega { grid-template-rows: 1fr; }
  .mobile-menu__list .sub-mega__list { display: block; }
  .mobile-menu__list .sub-mega__list a { min-height: 44px; }
  .mobile-menu__list .mm-text em { font-size: 14px; }
  .mobile-menu__list .mm-locs { padding-left: 18px; margin: 2px 0 10px; }
  .mobile-menu__list .mm-locs a { display: flex; align-items: center; min-height: 40px; padding: 6px 10px; font-size: 15px; }
  /* full-width "Schedule pickup" CTA at the drawer foot */
  .mobile-menu .mobile-menu__cta { width: 100%; align-self: stretch; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 14px 20px; border-bottom: 0; font-size: 16px; }
}

/* =====================================================================
   iOS (WebKit) TAP-RESPONSIVENESS FIX
   ---------------------------------------------------------------------
   Symptom: on iPhone/iPad ONLY, tapping the menu dropdown (or a menu link)
   freezes for several seconds ("stuck"). Android is instant.

   Cause is NOT the menu JS — that's a one-line class toggle. It's that iOS's
   WebKit engine is kept 100% busy by two effects that Android's Blink engine
   composites cheaply, so the tap event can't be processed until WebKit frees
   up:
     1. The 3 full-screen background blobs use filter: blur(120px) AND
        animate scale() forever -> WebKit re-rasterises that huge blur every
        frame. We KEEP the blobs, just stop the animation (they sit still).
     2. The mobile-menu accordion animates grid-template-rows 0fr -> 1fr,
        which forces WebKit to re-lay-out the whole (large) submenu on every
        frame of the 0.35s open. We make it open instantly instead.

   Scoped to iOS only via @supports(-webkit-touch-callout) so Android and
   desktop are completely unchanged. Revert = delete this block.
   ===================================================================== */
@supports (-webkit-touch-callout: none) {
  /* 1) Stop the perpetual blur re-rasterisation (blobs stay visible). */
  .blob { animation: none !important; }

  /* 2) Open/close the mobile submenu instantly (no per-frame relayout). */
  .mobile-menu__list .has-mega > .sub-mega { transition: none !important; }
}

/* =====================================================================
   AGGRESSIVE MOBILE PERFORMANCE FIX  (the gentle pass above was not enough —
   every tap still froze on iOS, so we now strip the heavy effects wholesale)
   ---------------------------------------------------------------------
   Removes the effects that keep WebKit's main thread busy so taps queue for
   seconds. Applied to phones/tablets via a width query AND to ALL iOS via
   @supports(-webkit-touch-callout) (covers iPad in landscape too). Paired with
   JS guards that disable the WebGL hero scene, the fake page loader, Lenis
   smooth-scroll and the cursor/tilt/parallax loops on mobile.
   Android stays fast; desktop is untouched.
   ===================================================================== */
@media (max-width: 1100px) {
  /* Remove the 3 full-screen blur(120px) background blobs entirely. */
  .bg-gradient { display: none !important; }
  /* Remove ALL frosted-glass blur — WebKit re-blurs these on every repaint,
     so each tap that changed the screen was paying for a full-viewport blur. */
  *, *::before, *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
@supports (-webkit-touch-callout: none) {
  .bg-gradient { display: none !important; }
  *, *::before, *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* =====================================================================
   BURGER VISIBILITY FIX + HOMEPAGE MOBILE PERFORMANCE
   ---------------------------------------------------------------------
   1) Burger: styles-hero.css paints the bars WHITE while the home nav is
      un-scrolled (leftover from an old transparent-button design), but the
      button itself is a WHITE circle -> white-on-white = invisible until
      scroll adds .is-scrolled. Keep the bars ink at all times.
   2) Homepage hero slideshow: all 5 full-screen slides run infinite
      opacity+scale animations with will-change -> five composited
      full-viewport GPU layers alive the whole time. This is the biggest
      remaining reason taps freeze on iPhone. On phones show the first
      slide as a static backdrop and drop the rest (also saves ~2MB of
      image downloads).
   3) Film-grain overlay uses mix-blend-mode across the whole viewport —
      WebKit re-blends it against the animating hero every frame.
   4) The final-CTA glow blobs are 80px-blur layers; cheap to drop.
   Desktop is untouched.
   ===================================================================== */
@media (max-width: 1100px) {
  body.home .nav:not(.is-scrolled) .nav__burger span { background: var(--ink) !important; }

  .hero--cinema .hero-bg-slide { animation: none !important; transform: none !important; will-change: auto !important; opacity: 1 !important; }
  .hero--cinema .hero-bg-slide:not(:first-child) { display: none !important; }

  .hero-grain { display: none !important; }

  .app__blob { display: none !important; }
}