/* MOBILE CORRECTIONS, one file, linked on EVERY page. Created 29 August 2026.

   WHY THIS IS A SEPARATE STYLESHEET AND NOT PART OF agency.css. This site is two families
   of page. EIGHT link `css/agency.css`; ELEVEN carry all of their CSS inline and link no
   local stylesheet at all. Nothing marks which is which from the outside.

   That split is not a curiosity, it is the exact shape of the bug the operator reported on
   29 August: the rule meant to hide the header button on phones lived in agency.css and so
   was absent from eleven pages, and it was written against a `.hdr__right` wrapper that only
   the OTHER family has, so it reached neither. A correction placed in agency.css silently
   covers eight pages out of nineteen and looks, from the file, like it covers all of them.

   Everything here is therefore in a file that every page links, and the deploy check asserts
   the link is present on all nineteen. If a new page is added and this file is not linked,
   the check fails rather than the page quietly rendering 9px labels.
*/

@media(max-width:620px){

  /* 1. THE MICRO LABELS. Every one of these is mono, uppercase and letterspaced, set
        between 9.3px and 10.9px. Uppercase mono with wide tracking reads smaller than its
        nominal size, so these were the least legible text on the site by a distance. The
        design device is kept and only the floor is raised. */
  body .fld label,
  body .pr__n,
  body .salebar__tag,
  body .wrproof__ba figcaption,
  body .ba--mob figcaption,
  body .demo__f span,
  body .site__b span{font-size:.75rem;letter-spacing:.1em}

  /* 1b. A SECOND PASS OVER THE SAME PROBLEM, after the first pass halved it. These are
         denser strings inside pills and tag lists, so the floor here is .72rem rather
         than .75rem: enough to clear the legibility threshold without widening a pill
         far enough to overflow at 320px, which was checked afterwards rather than
         assumed. `.tier__then` carries the price that rises on 1 October and it was the
         smallest text on the pricing page at 9.6px, which is the wrong thing to set in
         the smallest type on the page. */
  body .tier__then,
  body .tier__tag,
  body .tier__scope,
  body .plan__tag,
  body .upt span,
  body .lp__role,
  body .lp__f span,
  body .work__body .tags li,
  body .ba figcaption span,
  body .step,
  body .plan__tag{font-size:.72rem;letter-spacing:.08em}

  /* `.step` arrived with /lead-generation/, a page created AFTER this file was written.
     It linked mobile.css correctly, so the header and the form were covered, and it
     still introduced four new 10.6px labels. THAT IS THE EXPECTED SHAPE OF THIS FILE'S
     MAINTENANCE: the structural rules cover a new page for free, the per-component
     legibility list does not, and only re-running site-tools/mobile_audit.mjs finds it. */

  /* DELIBERATELY NOT RAISED: everything inside `.bw`, the browser window mockups. The
     `.bw__bar` address bar, `.bw__e` and `.bw__m` are a SCALE MODEL of somebody else's
     website sitting inside a screenshot frame. Their text is small because a browser
     rendered at thumbnail size has small text; setting it at a legible size would make
     the mockup look wrong rather than make anything readable. A legibility floor is for
     text the reader is meant to read, and this is a picture of text. */

  /* 2. THE STANDALONE CALL TO ACTION LINKS, measured at 13px to 20px tall against a 44px
        minimum. These are the arrow links that sit on their own line, not links inside a
        sentence, which are exempt and are deliberately left alone.

        VERTICAL PADDING ON AN INLINE ELEMENT GROWS THE HIT RECTANGLE WITHOUT MOVING ANY
        LAYOUT, because vertical padding does not affect an inline box's line height. The
        page renders pixel for pixel as before and the target is roughly twice the size.
        Verified by measuring document height and element positions either side of the
        change, not assumed. */
  body a.go,
  body a.lime,
  body .pf a,
  body .ftr__b a,
  body span.mono a,
  body a[href^="tel:"]:not(.callbtn):not(.herocall__a):not(.hdr__tel){padding-top:12px;padding-bottom:12px}

  /* THE PHONE NUMBER IS THE ONE ABOVE THAT MATTERS MOST. The footer number was a 103x16
     inline link, and on a phone a phone number is the highest intent target on the page.
     The three excluded classes are the big call buttons and the header pill, which are
     already 37px to 79px tall and are `flex` or `block`, so padding there WOULD move
     layout and buys nothing.

     `.golink` IS DELIBERATELY ABSENT. It measures 25px tall, which clears the WCAG 2.5.8
     minimum of 24px, and it is `inline-flex` with a `margin-top:28px` that a padding fix
     would have to fight. Padding an element that already passes, at the cost of moving
     the page, is not an improvement. */
}

/* ---- THE HEADER, MOVED HERE FROM agency.css SO IT REACHES ALL NINETEEN PAGES ----
   It was fixed in agency.css earlier the same day and was therefore live on eight of
   them. The other eleven happened to be correct already, through their own inline copy
   of the old rule plus the `.hdr__right` wrapper that only they have. "Correct by
   coincidence on the pages the fix could not reach" is not a state to leave a site in,
   so the rule now lives once, in the file every page links, and is body-prefixed to
   beat those inline copies. */
/* THE MOBILE HEADER, REWRITTEN 29 AUG 2026. The old rule was
   `.hdr__right .btn{display:none}` and it silently did nothing on 8 of the 19 pages,
   INCLUDING THE HOME PAGE, because only 11 of them wrap the header's right hand side in
   a `.hdr__right` div. The wrapper is markup that half the pages happen to have; the
   selector below depends on `.hdr__in`, which every header has, so a page cannot opt out
   of its own mobile layout by being written slightly differently.

   WHAT IT LOOKED LIKE. The button stayed in an 80px header on a 412px phone, and `.btn`
   carries `overflow-wrap:anywhere`, so "Start a project" broke mid word into four lines
   reading "Start / a / projec / t" and overflowed the bar on top of the logo. The nowrap
   below is the belt to that braces: even if this button is ever shown at a narrow width,
   it can no longer hyphenate itself into a block. */
@media(max-width:620px){
  body .hdr__tel{font-size:.82rem;margin-right:0;padding:7px 12px;border:1px solid var(--lime);
            border-radius:2px;color:var(--lime)}
  body .hdr__in .btn{display:none}

  /* AND IF THE PHONE NUMBER IS SUPPRESSED, GIVE THE BUTTON BACK. `.wr-nocall` hides
     `.hdr__tel` for the campaign geographies where calls are not invited, so hiding the
     button as well would leave a phone with a header containing no way to make contact
     at all. This is the case the old rule could never reach, because on the 11 pages
     where it did match it matched unconditionally. */
  body .wr-nocall .hdr__in .btn{display:inline-flex;padding:9px 16px;font-size:.8rem}
}
/* Never let the header button hyphenate. It is two or three words and it is in a bar of
   fixed height, so overflowing is a bug in every case, at every width. */
body .hdr__in .btn{white-space:nowrap;overflow-wrap:normal}