/* ============================================================================
   mobile-polish.css — mobile rhythm + density pass
   ----------------------------------------------------------------------------
   The theme's spacing.css ships FIXED desktop values with NO media queries, so
   a `pt-145` put 145px of padding on a 375px phone exactly like on a 27" display.
   Stacked across ~14 sections that turned the homepage into 21 screens of
   scrolling and is the main reason mobile felt "heavy".
   Here every spacing utility the site actually uses is scaled down: ~62% on
   tablet, ~44% on phones. Loaded LAST so it wins the cascade.
   ========================================================================== */

@media (max-width: 991px) {
  .pt-250{padding-top:156px}
  .pt-200{padding-top:124px}
  .pt-160{padding-top:100px}
  .mt-150{margin-top:92px}
  .pb-150{padding-bottom:92px}
  .pt-150{padding-top:92px}
  .pb-145{padding-bottom:88px}
  .pt-145{padding-top:88px}
  .pt-140{padding-top:88px}
  .pb-130{padding-bottom:80px}
  .pt-130{padding-top:80px}
  .mt-120{margin-top:76px}
  .pb-120{padding-bottom:76px}
  .pt-120{padding-top:76px}
  .pb-110{padding-bottom:68px}
  .pt-110{padding-top:68px}
  .mb-100{margin-bottom:64px}
  .pb-100{padding-bottom:64px}
  .pt-100{padding-top:64px}
  .pb-90{padding-bottom:56px}
  .pt-90{padding-top:56px}
  .pt-85{padding-top:52px}
  .mb-80{margin-bottom:48px}
  .pb-80{padding-bottom:48px}
  .pt-80{padding-top:48px}
  .mt-70{margin-top:44px}
  .pb-70{padding-bottom:44px}
  .pt-70{padding-top:44px}
  .mb-65{margin-bottom:40px}
  .pb-65{padding-bottom:40px}
  .pt-65{padding-top:40px}
  .mb-60{margin-bottom:36px}
  .mt-60{margin-top:36px}
  .pb-60{padding-bottom:36px}
  .pt-60{padding-top:36px}
  .mb-55{margin-bottom:36px}
  .pt-55{padding-top:36px}
  .mb-50{margin-bottom:32px}
  .mt-50{margin-top:32px}
  .pb-50{padding-bottom:32px}
  .pt-50{padding-top:32px}
  .pb-45{padding-bottom:32px}

  /* Hero: kill the dead gap under the fixed navbar */
  .nd-hero { padding-top: 104px !important; }
  .nd-hero .nd-globe { height: clamp(300px, 62vw, 420px) !important; }

  /* Headings: desktop clamps still resolve big on small screens */
  .at-section-title, .section-title { font-size: clamp(26px, 5.6vw, 40px) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(24px, 5.2vw, 36px) !important; line-height: 1.18 !important; }
  h3 { font-size: clamp(21px, 4.6vw, 30px) !important; line-height: 1.2 !important; }

  /* Cards: trim oversized media windows so lists don't run for screens */
  .nd-sol-card-media { height: clamp(150px, 34vw, 190px) !important; }
  .nd-sol-card-body { padding: 16px 18px 18px !important; }

  /* Comfortable tap targets — scoped to real controls so inline text links
     inside body copy keep flowing normally. */
  button, .at-btn, .nd-hero-btn, .nd-hero-btn-ghost, .nd-funnel-btn,
  .nd-qb-cta, .nd-qb-cta2, .nd-sticky-btn, .filter-btn {
    min-height: 44px;
  }
}

@media (max-width: 575px) {
  .pt-250{padding-top:112px}
  .pt-200{padding-top:88px}
  .pt-160{padding-top:72px}
  .mt-150{margin-top:64px}
  .pb-150{padding-bottom:64px}
  .pt-150{padding-top:64px}
  .pb-145{padding-bottom:64px}
  .pt-145{padding-top:64px}
  .pt-140{padding-top:60px}
  .pb-130{padding-bottom:56px}
  .pt-130{padding-top:56px}
  .mt-120{margin-top:52px}
  .pb-120{padding-bottom:52px}
  .pt-120{padding-top:52px}
  .pb-110{padding-bottom:48px}
  .pt-110{padding-top:48px}
  .mb-100{margin-bottom:44px}
  .pb-100{padding-bottom:44px}
  .pt-100{padding-top:44px}
  .pb-90{padding-bottom:40px}
  .pt-90{padding-top:40px}
  .pt-85{padding-top:36px}
  .mb-80{margin-bottom:36px}
  .pb-80{padding-bottom:36px}
  .pt-80{padding-top:36px}
  .mt-70{margin-top:32px}
  .pb-70{padding-bottom:32px}
  .pt-70{padding-top:32px}
  .mb-65{margin-bottom:28px}
  .pb-65{padding-bottom:28px}
  .pt-65{padding-top:28px}
  .mb-60{margin-bottom:28px}
  .mt-60{margin-top:28px}
  .pb-60{padding-bottom:28px}
  .pt-60{padding-top:28px}
  .mb-55{margin-bottom:24px}
  .pt-55{padding-top:24px}
  .mb-50{margin-bottom:24px}
  .mt-50{margin-top:24px}
  .pb-50{padding-bottom:24px}
  .pt-50{padding-top:24px}
  .pb-45{padding-bottom:24px}

  .nd-hero { padding-top: 92px !important; }
  .nd-hero .nd-globe { height: clamp(260px, 58vw, 340px) !important; }
  .at-section-title, .section-title { font-size: clamp(24px, 6.4vw, 32px) !important; }

  /* Edge gutters: 24px reads tight on a phone, 20px is the sweet spot */
  .container, .container-fluid { padding-left: 20px !important; padding-right: 20px !important; }
}

/* Never let a long word or wide element cause sideways scroll on a phone */
@media (max-width: 991px) {
  body { overflow-x: hidden; }
  h1, h2, h3, h4, p { overflow-wrap: break-word; }
}

/* ---------------------------------------------------------------------------
   Solutions grid: 2-up on phones. Six full-width cards stacked ran ~2,200px
   (over two screens) for what is a scannable list. Two-up keeps every card
   readable (verified: 156px wide, titles unclipped, illustrations intact) and
   cuts the section to ~1,000px.
   NOTE: the team grid is deliberately NOT 2-up — its cards size photos by
   height, so halving the column renders ragged 78px portraits.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .at-service-area .row.g-4 > [class*="col-"] {
    width: 50% !important; flex: 0 0 50% !important; max-width: 50% !important;
  }
  .nd-sol-card-media { height: clamp(96px, 26vw, 130px) !important; padding: 10px 10px 0 !important; }
  .nd-sol-card-body  { padding: 12px 13px 14px !important; }
  .nd-sol-card-title { font-size: 15px !important; margin: 4px 0 5px !important; }
  .nd-sol-card-text  { font-size: 12px !important; -webkit-line-clamp: 3 !important; }
  .nd-sol-card-link  { font-size: 11px !important; }
}