/* Mobile tidy (Direction A, 2026-11-04).
   Phone-only rules shared by every page. Desktop is untouched: everything here
   sits inside a max-width query. Homepage-only rules live in index.html. */

/* ---------- header: stays put on phones and tablets (it carries the only CTA while reading) ---------- */
@media (max-width: 900px) {
  .nav.hide { transform: none !important; }
}

@media (max-width: 640px) {

  /* ---------- service-page hero: sized to its content, so the strip lands in the first screen ---------- */
  body:not(.home) .hero { min-height: 0 !important; }
  /* busier photos sit behind more text on a narrow screen: darker scrim, soft shadow on the copy */
  body:not(.home) .hero::before { opacity: .86; }
  body:not(.home) .hero-in { text-shadow: 0 1px 14px rgba(0,0,0,.45); }
  body:not(.home) .hero-in { padding-top: 28px; padding-bottom: 28px; }
  body:not(.home) .hero h1 { margin-top: 18px; font-size: 32px; line-height: 1.06; }
  body:not(.home) .hero h1.kw { font-size: 31px; }
  body:not(.home) .hero .hero-sub { margin-top: 14px; font-size: 20px; }
  body:not(.home) .hero .lede { margin-top: 16px; font-size: 16.5px; line-height: 1.55; }
  body:not(.home) .hero-ctas { margin-top: 24px; gap: 12px 22px; }
  body:not(.home) .hero-ctas .btn { min-height: 52px; }
  body:not(.home) .hero-strip li { padding-top: 13px; padding-bottom: 14px; }

  /* ---------- rhythm: phone-sized section padding and bands ---------- */
  body:not(.home) .sec { padding: 60px 0; }
  body:not(.home) .sec.tight { padding: 48px 0; }
  body:not(.home) .place { min-height: 400px !important; }
  body:not(.home) .place-in { padding-top: 96px; padding-bottom: 32px; }
  body:not(.home) .place-big { font-size: 30px; }
  body:not(.home) .place-foot { margin-top: 28px; }
  body:not(.home) .pull { padding-top: 56px; padding-bottom: 56px; }
  body:not(.home) .pull p { font-size: 30px; }
  body:not(.home) .pull .pull-foot { margin-top: 24px; font-size: 15.5px; }

  /* ---------- type: phone-sized headings and body ---------- */
  body:not(.home) .sec-head h2 { margin-top: 14px; font-size: 28px; line-height: 1.12; }
  body:not(.home) .sec-head p, body:not(.home) .split-head p, body:not(.home) .intro p { font-size: 16.5px; line-height: 1.6; }
  body:not(.home) .sec-head p { margin-top: 14px; }
  body:not(.home) .split-head { gap: 14px; }

  /* ---------- long lists: tighter rows ---------- */
  .cov { margin-top: 28px !important; }
  .cov li { gap: 12px; padding: 18px 0; grid-template-columns: 34px 1fr; }
  .cov h3 { font-size: 18px; }
  .cov p { font-size: 15px; line-height: 1.55; }
  .cov li.note { margin-top: 16px; }
  .tl { margin-top: 28px !important; }
  .tl > li { grid-template-columns: 1fr !important; gap: 10px; padding: 22px 0 !important; }
  .tl .tm { font-size: 26px; }
  .tl .ph { margin-top: 6px; }
  .tl h3 { font-size: 20px; }
  .tl .desc { margin-top: 6px; font-size: 15.5px; line-height: 1.55; }
  .steps li { font-size: 15px; padding: 12px 0; }
  .pstep-media img { aspect-ratio: 16 / 9; }
  .feat-media img, .feat-media.tall img { aspect-ratio: 16 / 10; }

  /* ---------- contact block ---------- */
  .contact { padding: 56px 0 !important; }
  .contact-grid { gap: 32px; }
  .facts { margin-top: 28px; }
  .facts > div { padding: 13px 0; }

  /* ---------- tap targets: standalone links get a 44px row ---------- */
  .tlink, .covered-more, .work-all, .hero-tel { display: inline-flex; align-items: center; min-height: 44px; }
  .cities a, .work-subs a { display: inline-block; padding: 11px 0; }
  .facts a, .foot-mail, .form-note a, .cf-note a, .acc .a a { display: inline-block; padding: 10px 0; }
  /* padded links keep their underline at the text, not at the bottom of the tap area */
  .work-subs a, .facts a { border-bottom: 0 !important; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--sand); }
  .foot-bar a { padding: 12px 0; }

  /* ---------- small labels: a little larger and stronger ---------- */
  .facts dt, .place-foot, .hero-strip .n { font-size: 12px; }
  .facts dt { color: rgba(255,255,255,.78); }

  /* ---------- footer: phone, email and hours stay open; link groups fold ---------- */
  .foot { padding-top: 48px; }
  .foot-grid { gap: 0 !important; }
  .foot-brand { padding-bottom: 22px; }
  .foot-grid > nav, .foot-grid > div:not(.foot-brand) { margin: 0 !important; }
  .foot-grid > div > nav + nav { margin-top: 0 !important; }
  .foot h4.fx { margin: 0; border-top: 1px solid rgba(255,255,255,.14); }
  .foot h4.fx button { all: unset; box-sizing: border-box; width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-family: var(--display); font-weight: 500; font-size: 16px; color: #fff; }
  .foot h4.fx button:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }
  .foot h4.fx button::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border-right: 1.5px solid var(--sand); border-bottom: 1.5px solid var(--sand); transform: translateY(-3px) rotate(45deg); transition: transform .2s; }
  .foot h4.fx button[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
  .foot h4.fx + ul { margin-top: 0; padding-bottom: 14px; }
  .foot h4.fx + ul[hidden] { display: none; }
  .foot-bar { margin-top: 0; border-top: 1px solid rgba(255,255,255,.14); }

  /* ---------- "When something breaks" (managed IT): one problem open at a time ---------- */
  .scn-list { margin-top: 32px; gap: 12px; }
  .scn { padding: 22px 20px; gap: 18px; }
  .scn h3 { margin-top: 16px; font-size: 23px; }
  .scn .sum { font-size: 16px; }
  .scn-ico { width: 48px; height: 48px; }
  .scn-ico svg { width: 22px; height: 22px; }
  .scn-tog { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 10px; cursor: pointer; font-family: var(--display); font-weight: 500; font-size: 15px; color: var(--teal); }
  .scn-tog span { border-bottom: 1.5px solid var(--sand); padding-bottom: 1px; }
  .scn-tog::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
  .scn-tog[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
  .scn-tog:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
  .scn.shut .steps, .scn.shut .tlink { display: none; }

  /* ---------- quote forms: the essentials first, the rest behind "Add more detail" ---------- */
  .more-detail { grid-column: 1 / -1; border-top: 1px solid var(--line, #E2DDD3); }
  .more-detail > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 52px; cursor: pointer; font-family: var(--display); font-weight: 500; font-size: 15.5px; color: var(--teal); }
  .more-detail > summary::-webkit-details-marker { display: none; }
  .more-detail > summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--sand-dark, #8A6534); }
  .more-detail[open] > summary::after { content: "\2212"; }
  .more-detail > summary small { font-family: var(--sans); font-weight: 400; font-size: 13.5px; color: var(--grey); margin-left: 6px; }
  .more-detail .more-in { display: grid; gap: 16px; padding-bottom: 8px; }
  .field input, .field select { font-size: 16px; min-height: 48px; }
  .field textarea { font-size: 16px; }
}