/* ==========================================================================
   Mobile layer — loaded last on every page.

   The audit found no horizontal overflow anywhere: the layout itself is sound.
   What was wrong was ergonomics — controls too small to hit accurately, label
   text set at desktop sizes, content that only existed on hover, and scroll
   sections measured in desktop viewports that become marathons on a phone.
   ========================================================================== */

/* ------------------------------------------------------------------ *
   1. TOUCH TARGETS
   Measured before: theme toggle 38px, hamburger 38px, orbit dots 28px,
   FAQ summaries 36px, footer links 20px tall. The accepted floor is 44px.
   Keyed on pointer type, not width — a small laptop keeps its tight spacing.
 * ------------------------------------------------------------------ */
@media (hover: none), (pointer: coarse) {

  .theme-toggle,
  .hamburger { width: 44px; height: 44px; }

  /* Grow the hit area without growing the dot the visitor sees. */
  .sw-route__dot { width: 44px; height: 44px; }

  .faq summary {
    min-height: 44px;
    padding-top: .95rem;
    padding-bottom: .95rem;
  }

  /* Inline links in lists read as text but are tapped like buttons.
     Padding alone left these at 39px, so state the floor explicitly. */
  .footer-col ul a,
  .footer-bottom a,
  .footer-brand a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .nav-overlay a { padding-top: .7rem; padding-bottom: .7rem; }

  .social-circles a { width: 44px; height: 44px; }

  .filter-btn,
  .filter-bar button,
  .filter-bar a { min-height: 44px; }

  /* Contact links are often bare anchors sitting in prose with no wrapper to
     hook — 19–20px tall, and exactly what a visitor reaches for. Target the
     link type rather than a container so none are missed. */
  a[href^="mailto:"],
  a[href*="mail.google.com"],
  a[href^="tel:"],
  a[href*="wa.me"],
  .contact-block a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    overflow-wrap: anywhere;    /* long addresses must not push the page wide */
  }
  /* …but not where the anchor is already a large target in its own right. */
  .tile[href^="mailto:"],
  .tile[href*="mail.google.com"],
  .tile[href^="tel:"],
  .tile[href*="wa.me"],
  .whatsapp-btn { display: grid; min-height: 0; }
  .social-circles a[href^="mailto:"],
  .social-circles a[href*="mail.google.com"] { display: grid; }

  .btn { min-height: 46px; }

  .testimonial-controls button { width: 44px; height: 44px; }

  /* iOS paints a grey box on tap; keep a hint of the brand instead. */
  a, button, summary, .service-row, .project-card {
    -webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 22%, transparent);
  }
}

/* ------------------------------------------------------------------ *
   2. READABILITY
   118 elements sat at 11.2px on the homepage — 0.7rem labels carrying
   0.32em of tracking, which is a desktop detail. Slightly larger with
   tighter tracking reads far better at arm's length.
 * ------------------------------------------------------------------ */
@media (max-width: 700px) {
  .kicker,
  .build__kicker,
  .nextp__label { font-size: .78rem; letter-spacing: .2em; }

  .sw-copy__eyebrow { font-size: .76rem; letter-spacing: .18em; }
  .sw-copy__tags li { font-size: .78rem; }
  .sw-copy__body { font-size: 1rem; }

  .meta,
  .role,
  .build__step span,
  .step p,
  .footer-brand p,
  .footer-col ul { font-size: .88rem; }

  /* These two are set by three-class selectors in style.css, so a bare
     `.role` here loses the cascade and they stayed at 11.2px. */
  .team-grid--lead .team-card .role { font-size: .76rem; letter-spacing: .12em; }
  .team-tier { font-size: .78rem; letter-spacing: .2em; }

  .footer-col h4 { font-size: .8rem; letter-spacing: .1em; }
  .footer-bottom { font-size: .82rem; }
  .tile__idx,
  .step__num,
  .build__step b { font-size: .74rem; }

  /* The Scroll-to-Install hero's own labels and counter. */
  .showcase-scroll-hint span,
  .install-label,
  .install-count,
  .install-total,
  .install-sep,
  .piece-caption-text { font-size: .76rem; letter-spacing: .16em; }

  /* Long addresses and emails must not force a sideways scroll. */
  .contact-block a,
  .footer-col a { overflow-wrap: anywhere; }
}

/* ------------------------------------------------------------------ *
   3. NOTCHES AND HOME INDICATORS
   The floating buttons and the fixed nav sat in the unsafe zone on
   phones with a rounded display.
 * ------------------------------------------------------------------ */
@media (max-width: 860px) {
  .site-nav { padding-top: calc(1.1rem + env(safe-area-inset-top)); }

  .whatsapp-btn {
    right: calc(1rem + env(safe-area-inset-right));
    bottom: calc(1rem + env(safe-area-inset-bottom));
  }
  /* Stacked above WhatsApp so the two never overlap. */
  .back-to-top {
    right: calc(1rem + env(safe-area-inset-right));
    bottom: calc(5.2rem + env(safe-area-inset-bottom));
  }

  .site-footer { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------------ *
   4. SCROLL LENGTH
   These runways are measured in viewport heights, which is a much longer
   physical journey on a phone. Progress is scrubbed, so shortening the
   runway compresses the sequence rather than truncating it.
 * ------------------------------------------------------------------ */
@media (max-width: 860px) {
  .scroll-showcase { height: 380vh; }   /* was 600vh — six screens of scroll */
  .editorial-reveal { height: 190vh; }  /* was 230vh */
}

/* ------------------------------------------------------------------ *
   5. HOVER-ONLY CONTENT
   Six service rows carry a data-img that only ever appeared on hover, so
   touch visitors never saw any of it. js/mobile.js promotes those to real
   inline thumbnails; this styles them.
 * ------------------------------------------------------------------ */
.service-row__thumb { display: none; }

@media (hover: none), (pointer: coarse) {
  .service-row { align-items: center; gap: .9rem; }
  .service-row__thumb {
    display: block;
    flex: none;
    width: 68px;
    height: 52px;
    object-fit: cover;
    border-radius: 3px;
    order: 1;                 /* after the index, before the title */
  }
  .service-row h3 { order: 2; }
  .service-row .arrow { order: 3; margin-left: auto; }
}

/* ------------------------------------------------------------------ *
   6. ODDS AND ENDS
 * ------------------------------------------------------------------ */
@media (max-width: 700px) {
  /* A stray horizontal nudge is easy to trigger with a thumb. */
  html, body { overscroll-behavior-x: none; }

  /* The custom cursor is meaningless without a pointer and costs paint. */
  .cursor-dot, .cursor-ring { display: none !important; }

  /* Give the closing CTA room so the WhatsApp button never covers it. */
  .cta-close { padding-bottom: 5rem; }
}

/* The counter sub-note ("Est. 2011", the trades under the in-house figure)
   computes to 11.2px — under the 12px floor. It also needs the three
   figures stacked on a phone, or 125+ and its label collide. */
@media (max-width: 700px) {
  .counter__note { font-size: 0.78rem; }
  .counters { grid-template-columns: 1fr; gap: 1.6rem; }
}