/* ============================================================================
   FIREWHEEL — MOBILE COMPRESSION LAYER
   Load LAST, after styles.css and after each page's own <style> blocks.

   Everything here is inside @media(max-width:600px). Desktop and tablet are
   physically untouchable from this file.

   Nothing is display:none. Every section stays in the DOM and stays indexed.

   To roll back: delete the <link> tag. That's it.
   ============================================================================ */

@media (max-width: 600px) {

/* ---------------------------------------------------------------------------
   NOTE 1 — HERO
   Problem: .hero-crumb is position:absolute at top:104px (~14px tall, so it
   ends at ~118px) while .hero-body starts its content at padding-top:112px.
   The breadcrumb and the .hbadge eyebrow were literally drawn on top of each
   other. Fix = push the body down past the crumb.
   Also: body copy was sitting directly on a bright photo with no scrim.
   --------------------------------------------------------------------------- */

  .hero-body {
    padding-top: 148px !important;   /* was 112px — clears the 118px crumb */
    padding-bottom: 34px !important;
  }

  .hero-crumb {
    top: 100px !important;
    font-size: 10px !important;
    opacity: .55;                    /* recede it — it's navigation, not a headline */
  }

  /* The scrim. This is the readability fix.
     A bottom-weighted gradient so the photo still reads as a photo at the top
     (cinematic) but the text sits on near-solid ink (legible). */
  #hero .hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(to bottom,
        rgba(13,13,13,.86) 0%,
        rgba(13,13,13,.62) 32%,
        rgba(13,13,13,.80) 62%,
        rgba(13,13,13,.96) 100%);
  }

  #hero .hero-body { position: relative; z-index: 2; }

  /* Tighten the stack so the hero is one screen, not two */
  .hbadge {
    margin-bottom: 14px !important;
    padding: 5px 11px !important;
    font-size: 10px !important;
  }
  .hbadge .hb-txt { font-size: 10px !important; letter-spacing: .4px !important; }

  .hero-h1 {
    font-size: clamp(38px, 12vw, 54px) !important;
    line-height: .95 !important;
    margin-bottom: 14px !important;
  }

  /* The SEO subline inside the <h1>. Stays in the DOM, stays crawled —
     just stops competing with the headline for attention. */
  .h1sub {
    font-size: 10px !important;
    letter-spacing: 1.2px !important;
    opacity: .5 !important;
    margin-bottom: 10px !important;
  }

  .hero-desc {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
    max-width: none !important;
  }

  .hero-btns { gap: 9px !important; margin-bottom: 0 !important; }
  .hero-btns .btn { padding: 13px 16px !important; font-size: 13px !important; }

  /* Empty leftover container — collapses to zero without hiding anything */
  .hero-trust:empty { display: none; }


/* ---------------------------------------------------------------------------
   NOTE 2 — RED TRUST BAND (#trust-band)
   Problem: .tb-i has padding:15px 26px, so 6-7 items at ~200px wide each
   wrapped to ~6 rows and justify-content:center left them ragged and
   alternating. ~400px tall for six three-word phrases.
   Fix: real 2-column grid, tight padding. ~400px -> ~120px.
   --------------------------------------------------------------------------- */

  #trust-band .tb-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    justify-content: stretch !important;
  }

  #trust-band .tb-i {
    padding: 9px 8px !important;
    font-size: 10px !important;
    gap: 5px !important;
    justify-content: center !important;
    text-align: center !important;
    border-right: 1px solid rgba(255,255,255,.16) !important;
    border-bottom: 1px solid rgba(255,255,255,.16) !important;
    line-height: 1.25 !important;
  }
  #trust-band .tb-i:nth-child(2n) { border-right: none !important; }
  #trust-band .tb-ico { font-size: 12px !important; }


/* ---------------------------------------------------------------------------
   NOTE 8 — RED STATS BAND (.stats-row)
   Problem: a rule at @media(max-width:480px) forced 1 column. Your phone is
   430px, so it won. Four stats, one per row, ~780px.
   Fix: 2x2. ~780px -> ~200px. This is the single cheapest win on the site.
   --------------------------------------------------------------------------- */

  .stats-row { grid-template-columns: 1fr 1fr !important; }

  .stats-row .st {
    padding: 20px 10px !important;
    border-right: 1px solid rgba(255,255,255,.15) !important;
    border-bottom: 1px solid rgba(255,255,255,.15) !important;
  }
  .stats-row .st:nth-child(2n) { border-right: none !important; }
  .stats-row .st:nth-last-child(-n+2) { border-bottom: none !important; }


/* ---------------------------------------------------------------------------
   NOTE 6 — REVIEWS (.rev-grid)
   Problem: mob-tighten set .rev-grid{grid-template-columns:1fr 1fr!important}
   which OVERRODE the page's own correct 1-column rule at 768px. Two 200px
   columns = testimonials wrapping at 3 words per line = ~700px per card.
   Fix: one column, and JS turns it into a swipeable carousel (see mobile.js).
   --------------------------------------------------------------------------- */

  .rev-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .rev-card { padding: 18px 16px !important; }
  .rev-card p { font-size: 14px !important; line-height: 1.6 !important; }
  .rev-hd { flex-direction: column !important; align-items: flex-start !important; }


/* ---------------------------------------------------------------------------
   NOTE 7 — SERVICE AREAS (.areas-grid)
   Problem: 20 city tiles, 2 columns, ~1,600px. Every tile repeats the same
   "Roof repair available" line — 20 identical strings.
   Fix: 3 tight columns. City name + TX stay (that's the SEO). The repeated
   availability line is styled down, not removed — still in the DOM, still
   crawled, just no longer shouting 20 times.
   ~1,600px -> ~560px.
   --------------------------------------------------------------------------- */

  .areas-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 5px !important; }

  .area-card { padding: 10px 6px !important; gap: 2px !important; text-align: center; }
  .area-card > *:nth-child(1) { font-size: 11px !important; letter-spacing: 0 !important; }
  .area-card > *:nth-child(2) { font-size: 8.5px !important; }
  .area-card > *:nth-child(3) { font-size: 8px !important; opacity: .6; line-height: 1.2; }


/* ---------------------------------------------------------------------------
   NOTE 9 — FORM / FINAL CTA
   The form itself stays exactly as it is — it converts, and it's the point of
   the page. Only the wrapper grids collapse and the padding tightens.
   --------------------------------------------------------------------------- */

  .cta-i, .cf-row { grid-template-columns: 1fr !important; gap: 14px !important; }


/* ---------------------------------------------------------------------------
   NOTE 10 — FOOTER
   Problem: ~2,000px of stacked link columns.
   Fix: 2-col link grid + the 22-city SERVING strip tightened. mobile.js turns
   each footer column into a tap-to-open group. All links stay in the DOM —
   footer links are internal-linking equity and must remain crawlable.
   --------------------------------------------------------------------------- */

  .ft-cols { grid-template-columns: 1fr 1fr !important; gap: 18px !important; padding: 28px var(--pad) !important; }
  .ft-cities { padding: 12px var(--pad) !important; gap: 2px !important; }
  .ft-city { font-size: 9.5px !important; padding: 2px 5px !important; }
  .ft-bot { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; padding: 12px var(--pad) !important; }
  .ft-bot p { font-size: 10px !important; }


/* ---------------------------------------------------------------------------
   NOTE 3/5 — ACCORDIONS (paired with mobile.js)
   The JS adds .m-acc to each list and .m-acc-i to each item, then toggles
   .is-open. Collapsed bodies use grid-template-rows:0fr -> 1fr, which means
   the text is NEVER removed from the DOM and never display:none.
   Google renders and indexes it exactly as if it were open.
   --------------------------------------------------------------------------- */

  .m-acc-i > .m-acc-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .28s ease;
  }
  .m-acc-i > .m-acc-body > .m-acc-inner { overflow: hidden; min-height: 0; }
  .m-acc-i.is-open > .m-acc-body { grid-template-rows: 1fr; }

  .m-acc-i > .m-acc-head {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
  }
  .m-acc-i > .m-acc-head::after {
    content: "+";
    margin-left: auto;
    font-family: var(--fb);
    font-size: 17px;
    line-height: 1;
    color: var(--gold, #C49234);
    transition: transform .28s ease;
    flex: none;
  }
  .m-acc-i.is-open > .m-acc-head::after { transform: rotate(45deg); }

  .m-acc-i { padding: 12px 14px !important; }
  .m-acc-i p { font-size: 13px !important; line-height: 1.5 !important; margin-top: 8px; }


/* ---------------------------------------------------------------------------
   NOTE 4 — PROCESS STEPS -> SWIPEABLE CAROUSEL
   Accordion would have killed this section. A 5-step process only reads as
   "this is easy" if you can see it move. Swiping through it delivers that;
   five closed boxes do not.
   ~1,300px -> ~380px. Pure CSS, no JS needed for the scroll itself.
   --------------------------------------------------------------------------- */

  .m-rail {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px !important;
    padding: 2px 4px 12px !important;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad) !important;
  }
  .m-rail::-webkit-scrollbar { display: none; }

  .m-rail > * {
    flex: 0 0 82% !important;
    scroll-snap-align: center;
    border-right: none !important;
    border-bottom: none !important;
    border: 1px solid rgba(255,255,255,.10) !important;
  }

  .m-rail-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--fb);
    font-size: 9.5px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255,255,255,.32);
    margin-top: 2px;
  }
  .m-rail-hint::before,
  .m-rail-hint::after { content: "—"; opacity: .5; }


/* ---------------------------------------------------------------------------
   NOTE 4b — duplicate durations
   Every step printed its time twice: the eyebrow said "YOU · 2 MINUTES" and
   the chip below said "2 MIN". Keeping the chip (it's scannable), dropping the
   eyebrow's redundant half via the JS, which rewrites the text node.
   Nothing here — handled in mobile.js so the eyebrow's other half survives.
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   FLOAT CTA (.float)
   It was covering body text in 6 of 9 screenshots. That's lost calls.
   Fix: single compact pill, bottom-left of the right stack, out of the
   reading column. Both actions still reachable.
   --------------------------------------------------------------------------- */

  .float {
    bottom: 10px !important;
    right: 8px !important;
    flex-direction: row !important;
    gap: 6px !important;
  }
  .float a, .float button {
    padding: 8px 11px !important;
    font-size: 10px !important;
    white-space: nowrap;
  }


/* ---------------------------------------------------------------------------
   GLOBAL RHYTHM
   Section padding was ~120px top and bottom on some sections. Across 13
   sections that alone is ~3,000px of nothing.
   --------------------------------------------------------------------------- */

  .sec    { padding: 34px 0 !important; }
  .sec-sm { padding: 24px 0 !important; }

  .h2 { font-size: clamp(25px, 7vw, 33px) !important; margin-bottom: 10px !important; }
  .eyebrow { margin-bottom: 9px !important; font-size: 9.5px !important; }
  .lead { font-size: 14.5px !important; line-height: 1.55 !important; max-width: none !important; }

  .faq-layout { grid-template-columns: 1fr !important; gap: 18px !important; }

  /* Marquee top bar was clipping mid-word ") 387-3848" / "BONDED IN T" */
  .topbar-track span, .topbar-track a { padding: 0 12px !important; }

}