/* ===================================================================
   BLYFT — shared mobile typography overrides
   Loaded LAST on every page it applies to, so it always wins over
   that page's own inline <style> block regardless of source order.
   This is the single place mobile heading sizes are decided — do not
   re-introduce page-local mobile font-size overrides for these
   selectors, edit them here instead.
   =================================================================== */

/* Breakpoint matches the site's nav hamburger threshold (1080px) rather
   than a narrower "phone" width. iOS Safari's "Request Desktop Website"
   mode renders pages at a fixed 980px layout width — narrow enough to
   still collapse the nav to a hamburger, but wide enough to skip past a
   640/720px breakpoint entirely, leaving desktop-sized headings on a
   phone screen. Using 1080px here means these rules apply in that
   scenario too, not just on a genuinely narrow viewport. */
@media (max-width: 1080px) {

  /* ---- blyft.html / index.html (homepage) ---- */
  /* The stats return to normal flow on mobile, so their parent must also
     stack vertically. Otherwise flex shrinks the copy into a narrow column. */
  #hero { flex-direction: column; min-height: 0; }
  #hero .hero-inner { width: 100%; flex-shrink: 0; }
  #hero .hero-bottom { width: 100%; }
  #hero .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 560px; gap: 12px !important; }
  #hero .hero-stat { min-width: 0; }
  #hero .hero-stat .lbl { line-height: 1.5; }
  .hero-title { font-size: 34px !important; line-height: 1.12 !important; max-width: 100% !important; overflow-wrap: break-word; }
  .section-title { font-size: 30px !important; line-height: 1.15 !important; overflow-wrap: break-word; }
  .cta h2 { font-size: 28px !important; line-height: 1.15 !important; overflow-wrap: break-word; }
  .hero-bottom { position: static !important; padding: 32px 20px 0 !important; flex-direction: column !important; align-items: center !important; gap: 20px !important; }
  .hero-scroll { display: none !important; }
  .hero-stats { gap: 20px !important; flex-wrap: wrap !important; justify-content: center !important; width: 100% !important; }
  .hero-stat { text-align: center !important; }

  /* ---- growthx.html / arc.html ---- */
  .hero-h1 { font-size: 32px !important; line-height: 1.12 !important; overflow-wrap: break-word; }
  .sec-title { font-size: 28px !important; line-height: 1.15 !important; overflow-wrap: break-word; }
  .cta-h { font-size: 28px !important; line-height: 1.15 !important; overflow-wrap: break-word; }

  /* ---- about.html ---- */
  .about-hero h1 { font-size: 34px !important; line-height: 1.15 !important; max-width: 100% !important; overflow-wrap: break-word; }
  .cta-strip h2 { font-size: 26px !important; line-height: 1.2 !important; overflow-wrap: break-word; }

  /* ---- contact.html / contact-us.html ---- */
  .contact-left h1 { font-size: 32px !important; line-height: 1.15 !important; max-width: 100% !important; overflow-wrap: break-word; }

  /* ---- careers.html ---- */
  .hero h1 { font-size: 34px !important; line-height: 1.15 !important; overflow-wrap: break-word; }
  .lookfor-left h2 { font-size: 28px !important; line-height: 1.15 !important; overflow-wrap: break-word; }
  .apply-card h2 { font-size: 26px !important; line-height: 1.2 !important; overflow-wrap: break-word; }

  /* ---- faq.html ---- */
  .faq-hero h1 { font-size: 32px !important; line-height: 1.15 !important; max-width: 100% !important; overflow-wrap: break-word; }
  .faq-cta h2 { font-size: 26px !important; line-height: 1.2 !important; max-width: 100% !important; overflow-wrap: break-word; }

  /* ---- blog.html ---- */
  .hero-left h1 { font-size: 32px !important; line-height: 1.12 !important; overflow-wrap: break-word; }
}