/* Mobile pass, 25 Sep 2026. Loaded last on every page so it wins the cascade without
   touching the twenty sheets underneath it. Everything here is inside a media query —
   desktop is untouched.

   Three jobs:
     1. Nothing pins itself to the top of a phone screen any more (the header scrolls away).
     2. Tap targets reach 44px and nothing meaningful is set below 11px.
     3. Section and icon spacing loosened where the desktop values were simply scaled down.

   The breakpoint is 900px: below it the header is already the stacked/hamburger layout. */

@media (max-width: 900px) {

  /* ---------------------------------------------------------------- 1. unpin everything
     The header used 72px of an 844px viewport, and on guide and destination pages a second
     sticky jump bar took another 46–47px. That is 14% of the screen gone before any content.
     On a phone the traditional behaviour is better: scroll up to get the menu back. */
  .sf-system-header,
  .sf-header { position: static !important; top: auto !important; }

  .sf-dg-jump,
  .sf-lp-jumpbar { position: static !important; top: auto !important; backdrop-filter: none; }

  /* The open mobile menu still needs its own scroll container, so keep that intact but
     let the page behind it scroll normally once it is closed. */
  .sf-header.is-open { position: relative !important; }

  /* Anchor offsets existed only to clear the sticky bars. */
  .sf-page--dg [id],
  .sf-page [id] { scroll-margin-top: 12px; }

  /* ---------------------------------------------------------------- 2. legibility floor
     Nothing that carries meaning goes below 11px, and eyebrow/kicker text moves to 12px.
     These were desktop values (9–11px) that were never re-tuned for a phone. */
  .sf-system-header small,
  .sf-header small,
  .sf-site-footer__eyebrow { font-size: 11px !important; letter-spacing: .1em; }

  /* The brand tagline was pinned to 8px !important in style.css:151. Same selector and
     specificity, loaded later, so this wins without another !important escalation. */
  .sf-header > div > a:first-child > span > span:last-child {
    font-size: 11px !important;
    letter-spacing: .14em !important;
  }

  /* the v2 home page sections carry their own eyebrow family, all 10.5–11.5px */
  .sf-path__badge,
  .sf-pw__kicker,
  .sf-fe__kicker,
  .sf-fe__rate-lbl,
  .sf-fe__flow-lbl,
  .sf-hs__eyebrow,
  .sf-hv__kicker,
  .sf-hv__plan-type,
  .sf-home-ship__kicker { font-size: 12px !important; }

  .sf-qc-kicker,
  .sf-guide-kicker,
  .sf-vf-kicker,
  .sf-fieldnotes__kicker,
  .sf-dg-grid__rank,
  .sf-dg-vol__dim,
  .sf-dg-gallery figcaption b,
  .sf-dg-traps span,
  .sf-dg-treat__arm > span { font-size: 12px !important; line-height: 1.45; }

  .sf-qc-note,
  .sf-dg-stack__note,
  .sf-dg-vol__note,
  .sf-dg-route__note,
  .sf-dg-ruler__note,
  .sf-home-brief__reassurance,
  .sf-site-footer a,
  .sf-site-footer span,
  .sf-site-footer p { font-size: 13.5px !important; line-height: 1.6; }

  .sf-dg-gallery figcaption,
  .sf-dg-check span,
  .sf-dg-status li p,
  .sf-dg-treat__arm li,
  .sf-dg-treat__void li,
  .sf-cases__line { font-size: 13.5px !important; line-height: 1.6; }

  /* Body copy: 15px was the smallest comfortable size at arm's length; leads go to 16px. */
  .sf-qc-lead,
  .sf-cf-answer { font-size: 16px !important; line-height: 1.62; }

  /* Measured second pass: every remaining label under 12px on the live pages. */
  .sf-blog-card__meta,
  .sf-blog-card__meta a,
  .sf-section-heading span,
  .sf-system-cta span,
  .sf-guide-cta span,
  .sf-vf-flight__end span,
  .sf-vf-collage__stats span,
  .sf-vf-why__grid article > span,
  .sf-vf-day figcaption,
  .sf-vf-sticky__price small,
  .sf-vf-cats__foot a,
  .sf-dg-hero__label,
  .sf-dg-ruler > figcaption,
  .sf-dg-route > figcaption span,
  .sf-dg-load > figcaption span,
  .sf-dg-vol > figcaption span,
  .sf-cases__where i,
  .sf-cf-limits li > small,
  .sf-qc-wrap dl > dt { font-size: 12px !important; line-height: 1.45; }

  /* ---------------------------------------------------------------- 3. tap targets
     Anything a thumb is meant to hit gets to 44px, either by padding or by a min-height.
     Where the element is visually small (a breadcrumb, a tag) the box grows but the ink
     does not, so the design is unchanged and only the hit area moves. */
  .sf-dg-crumbs { gap: 2px 10px; }
  .sf-dg-crumbs a,
  .sf-dg-crumbs b { display: inline-flex; align-items: center; min-height: 40px; }

  .sf-blog-card__more,
  .sf-fieldnotes__all,
  .sf-cases__more { display: inline-flex; align-items: center; min-height: 44px; }

  /* Category chips on the blog index and the tag rails: real chips, not 17px text. */
  .sf-blog-cats a,
  .sf-blog-card__cat,
  .sf-fieldnotes__cat,
  .sf-blog-tag { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; }

  /* Links that sit alone at the foot of a block are buttons in everything but name.
     Deliberately not applied to links inside a sentence — those should stay inline. */
  .sf-vf-cats__foot a,
  .sf-blog-card__meta > a,
  .sf-section-heading a { display: inline-flex; align-items: center; min-height: 44px; }

  .sf-hero-assurance li > a,
  .sf-hv__wa,
  .sf-testimonials__cta { display: inline-flex; align-items: center; min-height: 44px; }

  /* Quality & shipping and Sourcing pages: inline-block em/b badges at 10–10.5px, and
     contact links and disclosure summaries that stopped a few pixels short of 44. */
  .sf-qc-why em,
  .sf-qc-class em,
  .sf-qc-panel em,
  .sf-qc-floor__tall figcaption em,
  .sf-qc-wrap figcaption em,
  .sf-qc-wrap figcaption b,
  .sf-fs-sketch em { font-size: 12px !important; line-height: 1.45; }

  .sf-qc-table-wrap > summary,
  .sf-fs-flow__item details > a,
  .sf-fs-link { display: flex; align-items: center; min-height: 44px; }

  /* Phone number and email are the two links most likely to be tapped in a hurry. */
  a[href^="tel:"],
  a[href^="mailto:"],
  a[href*="wa.me"] { display: inline-flex; align-items: center; min-height: 44px; }

  .sf-qc-btn,
  .sf-header__cta,
  .sf-hv__btn { min-height: 48px; }

  /* ---------------------------------------------------------------- 4. breathing room
     The desktop rhythm was scaled down proportionally, which reads cramped on a phone.
     Bands get more vertical air; grids that had collapsed to one column get real gaps. */
  .sf-qc-band > .sf-qc-wrap { padding-top: 46px; padding-bottom: 46px; }
  .sf-qc-head { margin-bottom: 22px; }
  .sf-qc-h2 { line-height: 1.2; letter-spacing: -.02em; }

  .sf-ct-glance { gap: 22px 18px; }
  .sf-ct-glance > div { padding-bottom: 4px; }

  .sf-bf-boxes { gap: 12px; }
  .sf-cf-limits { gap: 14px; }
  .sf-dg-steps { gap: 12px; }

  /* Icon rows: the gap between a glyph and its label was tuned for 26px desktop icons. */
  .sf-hv__points li,
  .sf-qc-list li { gap: 14px; }
  .sf-hv__points svg { width: 24px; height: 24px; }

  /* Tables inside guides scroll rather than squeeze to unreadable columns. */
  .sf-qc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sf-qc-table-wrap table { min-width: 520px; }

  /* The floating "Start Your Project" pill overlapped the last section's CTA. */
  .sf-sticky-cta { bottom: 12px; right: 12px; }
  .sf-page > *:last-child { padding-bottom: 8px; }
}

/* Very narrow phones (SE, older Androids): the two-up number grids stop working. */
@media (max-width: 400px) {
  .sf-ct-glance { grid-template-columns: 1fr; }
  .sf-dg-vol__pair { gap: 14px; }
  .sf-qc-band > .sf-qc-wrap { padding-left: 16px; padding-right: 16px; }
}

/* ------------------------------------------------------------------ 25 Sep 2026, pass 2
   Pages reached in the second sweep: the showroom directory (its own template and class
   names, never covered here before), the category guides, the hotel page and blog posts. */

@media (max-width: 900px) {

  /* The showroom directory runs a separate header whose subtitle computed to 5.6px. */
  .logo .logo-sub { font-size: 11px !important; letter-spacing: .12em !important; line-height: 1.3; }

  /* Its labels, chips and status lines were all 10–11px. */
  .breadcrumbs span,
  .hero-facts span,
  .hero-media figcaption span,
  .region-map figcaption span,
  .filter-field > span,
  .results-status span,
  .card-category,
  .tags .tag,
  .shortlist-top span,
  .more-leads > summary span { font-size: 12px !important; line-height: 1.45; }

  /* Interactive parts of the directory. */
  .filter-bar label.filter-field,
  .more-leads > summary,
  .shortlist-card button,
  .showroom-card a { min-height: 44px !important; }
  .more-leads > summary { display: flex !important; align-items: center; }

  /* Content badges that sat at 10–10.5px across the category and hotel guides. */
  .sf-cf-hero-note b,
  .sf-cf-fit li > b,
  .sf-ct-map__card em,
  .sf-cn-card em,
  .sf-fg-price li > b,
  .sf-qc-sketch em,
  .sf-testimonial__tag,
  .sf-blog-pillars span,
  .hv2-marquee__label a,
  .sc-interp { font-size: 12px !important; line-height: 1.45; }

  /* Filter and tab controls: real buttons on a phone. */
  .sf-ct-map__tabs button,
  .hv2-tabs button,
  .sf-blog-hero__topic,
  .hv2-marquee__label a { display: inline-flex; align-items: center; min-height: 44px; }

  /* The map tab rail scrolls rather than wrapping into a ragged block. */
  .sf-ct-map__tabs,
  .hv2-tabs { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .sf-ct-map__tabs::-webkit-scrollbar,
  .hv2-tabs::-webkit-scrollbar { display: none; }
  .sf-ct-map__tabs button,
  .hv2-tabs button { flex: 0 0 auto; white-space: nowrap; }
}