/* ═══════════════════════════════════════════════════════════
   Technology By Design — Mobile Typography Enhancement
   Injected universally after all page-specific and global CSS.
   Properly scales text across all 60 pages at mobile breakpoints.
   Strategy:
     - Root font-size scaling (cascades all rem values)
     - Fluid clamp() headings on service-page patterns
     - Body text baseline bump for readability
     - Top bar collapse (12px text is illegible on mobile)
   ═══════════════════════════════════════════════════════════ */

/* ─── TABLET (max 900px) ─────────────────────────────────── */
@media (max-width: 900px) {

  /* Root scale — touches every rem-based value proportionally */
  html { font-size: 15px; }

  /* ── Service-page hero headlines ── */
  .svc-hero h1,
  .hero h1 {
    font-size: clamp(28px, 6.5vw, 42px) !important;
    line-height: 1.15 !important;
    letter-spacing: -.2px !important;
  }

  /* ── Section title class used site-wide ── */
  .st {
    font-size: clamp(26px, 6vw, 34px) !important;
    line-height: 1.2 !important;
  }

  /* ── Section subtitles ── */
  .ss-sub,
  .hero-sub,
  .sub {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }

  /* ── Two-column layouts → single column ── */
  .g2 {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* ── Stat bar → wrap ── */
  .stats-bar {
    flex-wrap: wrap;
    gap: 20px !important;
  }

  /* ── Card body text ── */
  .card p,
  .dcard p,
  .del-item p,
  .uc-card-s p {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  /* ── Bullet lists ── */
  .bul li,
  .chk li {
    font-size: 14px !important;
  }

}

/* ─── MOBILE (max 640px) ─────────────────────────────────── */
@media (max-width: 640px) {

  html { font-size: 14.5px; }

  /* ── Service hero headings ── */
  .svc-hero h1,
  .hero h1 {
    font-size: clamp(24px, 7.5vw, 32px) !important;
    line-height: 1.15 !important;
  }

  /* ── Section titles ── */
  .st {
    font-size: clamp(22px, 7vw, 28px) !important;
  }

  /* ── Body / description text: never under 15px ── */
  .what-text p,
  .ss-sub,
  .hero-sub,
  .sub,
  .final-left p,
  .card p,
  .dcard p {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }

  /* ── Bullet / checklist text ── */
  .bul li,
  .chk li {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  /* ── Eyebrow labels — keep them readable ── */
  .ey,
  .ey-s,
  .hero-ey,
  .trust-item {
    font-size: 11px !important;
    letter-spacing: 2px !important;
  }

  /* ── Card headings ── */
  .card h3,
  .dcard h3,
  .del-item h4,
  .uc-card-s h4 {
    font-size: 18px !important;
  }

  /* ── Step / lifecycle labels ── */
  .lc-step h3 { font-size: 16px !important; }
  .lc-step p  { font-size: 13px !important; }

  /* ── 3-col / 4-col grids → single column ── */
  .g3,
  .g4,
  .del-grid,
  .uc-cards {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── Footer grid ── */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* ── Trust bars ── */
  .trust-grid { gap: 16px !important; }

  /* ── CTA buttons — full width on phone ── */
  .hero-ctas,
  .ctas,
  .final-ctas,
  .cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .bg, .bo, .bn, .btn-gold, .btn-ghost {
    text-align: center !important;
    width: 100% !important;
  }

  /* ── Testimonial quote ── */
  .test-q {
    font-size: 20px !important;
    line-height: 1.45 !important;
  }
  .test-card blockquote { font-size: 15px !important; }

}

/* ─── SMALL PHONE (max 430px) ────────────────────────────── */
@media (max-width: 430px) {

  html { font-size: 14px; }

  /* ── Container padding ── */
  .c, .cn, .cw { padding: 0 18px !important; }

  /* ── Top info bar — collapse entirely ──
     12px text on a 375px screen is unreadable.
     Nav handles everything it provides. ──── */
  .top { display: none !important; }

  /* ── Shift sticky nav to top of screen (no top bar above) ── */
  nav { top: 0 !important; }

  /* ── Hero padding ── */
  .svc-hero { padding: 70px 0 44px !important; }
  .hero-inner { padding: 60px 0 40px !important; }

  /* ── Service steps ── */
  .lc-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  .lc-grid::before { display: none !important; }

  /* ── Partner / cred bars ── */
  .cred-bar { gap: 24px !important; flex-wrap: wrap !important; }

  /* ── Section padding ── */
  .sec { padding: 56px 0 !important; }

  /* ── Phone link in footer/hero ── */
  .ph { font-size: 22px !important; }

  /* ── Stats bar on homepage ── */
  .stat-number { font-size: 1.8rem !important; }

}

/* ─── GLOBAL: images should never overflow ─────────────── */
img { max-width: 100%; height: auto; }

/* ─── GLOBAL: prevent horizontal scroll ──────────────── */
body { overflow-x: hidden; }