/* =============================================================
   Mobile fixes — sitewide
   Targets <= 720px. Tightens type, padding, and dense sections
   for phone viewports.
   ============================================================= */

@media (max-width: 720px) {

  /* --- Section rhythm ------------------------------------------ */
  .section {
    padding-top: clamp(56px, 12vw, 80px);
    padding-bottom: clamp(56px, 12vw, 80px);
  }
  .section--tight {
    padding-top: clamp(36px, 8vw, 56px);
    padding-bottom: clamp(36px, 8vw, 56px);
  }
  .section--hero {
    padding-top: clamp(72px, 14vw, 100px);
    padding-bottom: clamp(56px, 12vw, 80px);
    min-height: auto;
  }

  .wrap { padding-left: 20px; padding-right: 20px; }

  /* --- Hero typography ----------------------------------------- */
  .hero__title,
  .page-hero__title {
    font-size: clamp(36px, 11vw, 56px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.025em !important;
    text-wrap: balance;
  }

  .hero__sub,
  .page-hero__sub {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-top: 16px !important;
  }

  /* Generic large display text */
  h1 { font-size: clamp(34px, 10vw, 48px); line-height: 1.05; }
  h2 { font-size: clamp(26px, 7vw, 36px); line-height: 1.1; }
  h3 { font-size: clamp(20px, 5.5vw, 24px); line-height: 1.2; }

  /* --- Buttons / CTA stack ------------------------------------- */
  .btn-row { flex-direction: column; gap: 10px; align-items: stretch; }
  .btn-row .btn { width: 100%; justify-content: center; text-align: center; }
  .btn { padding: 14px 22px; font-size: 14px; }

  /* --- Header / nav -------------------------------------------- */
  .nav { padding-top: 12px; padding-bottom: 12px; }
  .nav__brand { gap: 10px; }
  .nav__logo { width: 32px; height: 32px; }
  .nav__brand-tag { font-size: 9px; line-height: 1.25; letter-spacing: 0.18em; }
  .nav__cta { display: none !important; }

  /* --- Service grids / cards ----------------------------------- */
  .service-grid,
  .home-services-grid,
  .work-grid,
  .feature-grid,
  .three-up,
  .four-up,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* --- Service card type --------------------------------------- */
  .service-card {
    padding: 22px;
  }
  .service-card__title {
    font-size: 22px !important;
    line-height: 1.15 !important;
  }
  .service-card__desc {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* --- Stat blocks --------------------------------------------- */
  .stat-grid,
  .stats-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  .stat__num,
  .big-num {
    font-size: clamp(34px, 11vw, 52px) !important;
  }
  .stat__label {
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
  }

  /* --- Marquee / ticker ---------------------------------------- */
  .fx-marquee,
  .ticker {
    font-size: 13px !important;
  }

  /* --- Tables that look like lists on mobile ------------------- */
  .compare-table,
  .pricing-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- Footer -------------------------------------------------- */
  .footer { padding-top: 48px; padding-bottom: 40px; }
  .footer__inner { gap: 28px !important; }
  .footer__col { font-size: 13px; }
  .footer__heading { font-size: 11px; letter-spacing: 0.2em; }

  /* --- Story head (already in fx.css but ensure mobile pass) --- */
  .fx-story-head { margin-bottom: 28px; }
  .fx-story-eyebrow { font-size: 10px; letter-spacing: 0.22em; }
  .fx-story-title { font-size: clamp(28px, 8vw, 36px) !important; line-height: 1.05 !important; text-wrap: balance; }
  .fx-story-sub { font-size: 15px !important; line-height: 1.55 !important; }

  /* --- Page hero eyebrow --------------------------------------- */
  .page-hero__eyebrow { font-size: 10px; letter-spacing: 0.22em; }

  /* --- Reduce overly large display weights on mobile ----------- */
  .display-xl { font-size: clamp(40px, 12vw, 64px) !important; line-height: 1.0 !important; }
  .display-lg { font-size: clamp(32px, 9vw, 44px) !important; line-height: 1.05 !important; }

  /* --- FAQ items ----------------------------------------------- */
  .faq__q { font-size: 16px !important; padding: 16px !important; }
  .faq__a { font-size: 14px !important; padding: 0 16px 16px !important; }

  /* --- Quote / blockquote -------------------------------------- */
  blockquote, .quote {
    font-size: 18px !important;
    line-height: 1.4 !important;
  }

  /* --- Tighten card padding everywhere ------------------------- */
  .card,
  .case-card,
  .pillar {
    padding: 22px !important;
  }

  /* --- Ensure no horizontal overflow --------------------------- */
  body { overflow-x: hidden; }
}

/* --- Even smaller phones (iPhone SE etc) -------------------- */
@media (max-width: 380px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  h1 { font-size: 32px; }
  .hero__title, .page-hero__title { font-size: 36px !important; }
  .stat__num, .big-num { font-size: 36px !important; }
}