/* ===========================================================================
   MOBILE
   ---------------------------------------------------------------------------
   Loaded last on every page so it wins without needing !important.

   Measured on a real iPhone profile at 390x844, not a narrow desktop window.
   Nothing overflowed sideways, but two things were wrong on every page:

     TYPE  Seven different things rendered below 12px, down to 7.5px. Small caps
           with heavy letterspacing look deliberate on a 27in monitor and become
           unreadable at arm's length on a phone.

     TAPS  Footer links were 22 to 24px tall and text links 25px. Apple and
           Google both put the minimum at around 44px. Every one of these was a
           link an owner would be trying to hit one-handed in a truck.
   =========================================================================== */

@media (max-width: 767px) {

  /* ------------------------------------------------------------------ type
     A floor, not a redesign. Each of these keeps its role in the hierarchy,
     it just stops going under the size a phone can render honestly. */
  .eyebrow, .micro-label { font-size: .78rem; letter-spacing: .13em; }
  .hero-note { font-size: .78rem; letter-spacing: .1em; line-height: 1.65; }
  .hero-spec span { font-size: .78rem; letter-spacing: .1em; }
  .service-what { font-size: .76rem; letter-spacing: .12em; }
  .status-chip { font-size: .76rem; }
  .loop-caption { font-size: .8rem; }
  .q label, .field label { font-size: .76rem; letter-spacing: .1em; }
  .terms-line, .section-note { font-size: .9rem; }

  /* "Milwaukee, Wisconsin" under the wordmark was 7.5px. There is no size that
     is both legible and subordinate here, and the town is already in the
     footer and on three pages of copy, so the header stops repeating it. */
  .brand-copy small { display: none; }
  .brand-copy strong { font-size: .92rem; }

  /* Browser chrome on the demo frame. Decorative, and there is no room. */
  .concept-label { display: none; }

  /* ------------------------------------------------------------ tap targets
     44px is the floor. Using min-height plus centring rather than padding so a
     link's box grows without its text drifting off its own baseline. */
  .footer-nav a,
  .site-nav > a,
  .services-menu a,
  .nav-services > button {
    display: flex; align-items: center;
    min-height: 44px;
  }
  .text-link {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
  .brand { min-height: 44px; }
  .view-switch button { min-height: 44px; }
  .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }
  /* .hero-price is the primary button on the phone hero and hero.css gives it
     54px. Setting 44 here would shrink it, because this file loads later. */

  /* A phone number and an email address are the two links most likely to be
     tapped on a phone, and they were the smallest on the page. Targeted by
     protocol so this holds wherever they appear, in prose or in the footer. */
  a[href^="tel:"], a[href^="mailto:"] {
    display: inline-flex; align-items: center; min-height: 44px;
  }

  /* A row of full-width buttons is easier to hit than a row of inline ones. */
  .hero-actions, .leak-actions, .closing {
    display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  }
  .hero-actions .button, .leak-actions .button, .closing .button {
    width: 100%; justify-content: center; min-height: 52px;
  }
  .hero-actions .text-link, .leak-actions .text-link { justify-content: center; }

  /* --------------------------------------------------------------- the hero
     THE MOBILE HERO LIVES IN hero.css, NOT HERE.

     There used to be a second, competing treatment at this point: it fixed the
     original bug (the object was first in the flow and pushed the headline two
     screens down) by reordering the object to sit BELOW the headline as an
     inline block. That worked, but it is not the live site's phone hero.

     Live keeps the object as a full-height layer bleeding off the left edge with
     every piece of type set hard right against it, which is a different
     composition rather than the desktop one reflowed. hero.css now carries that.
     This file loads AFTER hero.css, so anything left here would silently win:
     the rules are deleted rather than commented out for exactly that reason. */
}

/* Very small phones. The spec row is three columns of serif and it stops fitting
   somewhere under 380px, so it becomes a stack rather than three cramped ones. */
@media (max-width: 379px) {
  .hero-specs { flex-direction: column; gap: 16px; }
  .hero-spec { display: flex; align-items: baseline; gap: 10px; }
  .hero-spec b { font-size: 1.1rem; }
  .hero-spec span { margin-top: 0; }
}