/* Responsive overrides — loaded after each page's inline <style> block.
   Strategy: fluid clamps for type and spacing (smooth across all viewport
   widths, no jumps), discrete breakpoints only for layout switches that
   can't be expressed fluidly (column count, nav visibility, hide/show). */


/* =====================================================================
   FLUID BASE (applies at all widths — replaces per-page clamp() values
   with ones that hold up at narrow viewports too).
   ===================================================================== */

:root {
  /* Page horizontal padding: 16px on tiny phones → 40px on desktop */
  --gutter: clamp(16px, 4vw, 40px);
}

/* Fluid section padding: 56px on phones → 120px on desktop. !important wins
   against inline overrides like paddingTop: 140 used to add emphasis on
   desktop but produce huge dead space on phones. */
section {
  padding: clamp(56px, 9vw, 120px) 0 !important;
}

/* Fluid typography — slope chosen to match each page's existing desktop
   sizes, but with smaller floors so headings stay readable on phones. */
.display {
  font-size: clamp(38px, 8vw, 132px) !important;
  line-height: 1.02 !important;
}
.h2   { font-size: clamp(26px, 5.2vw, 68px) !important; }
.h3   { font-size: clamp(20px, 2.2vw, 30px) !important; }
.lede { font-size: clamp(15px, 1.5vw, 20px) !important; }


/* =====================================================================
   ≤ 960px — TABLET AND BELOW (layout shifts begin)
   ===================================================================== */

@media (max-width: 960px) {

  /* Prevent rogue absolutely-positioned children from causing horizontal
     page scroll. overflow-x: clip is more reliable than hidden on iOS;
     declared after hidden so newer browsers pick it up. */
  html, body {
    overflow-x: hidden !important;
    overflow-x: clip !important;
    max-width: 100vw !important;
  }
  section { overflow: hidden !important; }

  /* Collapse all multi-column inline JSX grids to single column. The
     attribute selector reaches inline `style="grid-template-columns: ..."`
     declarations that no class-based media query can override. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: clamp(24px, 4vw, 48px) !important;
  }

  /* Decorative absolute-positioned SVG ornaments use right: -200px etc.
     and overflow the viewport. Hide on tablet and below. */
  svg[style*="position: absolute"] { display: none !important; }

  /* Hero3D / decorative orb wrappers (full-bleed absolute, non-interactive).
     The 78%-anchored orbs land dead-center on narrow screens. */
  section > div[style*="position: absolute"][style*="pointer-events: none"][style*="inset: 0"] {
    display: none !important;
  }

  /* Hero section uses inline min-height: min(820px, 92vh) — collapse it
     so a stacked hero doesn't leave huge empty space below the copy. */
  section[style*="min-height"] { min-height: 0 !important; }

  /* Footer: drops from 4-up to 2-up across this whole range. */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
}


/* =====================================================================
   ≤ 720px — LARGE PHONE / SMALL TABLET (nav collapses)
   ===================================================================== */

@media (max-width: 720px) {

  /* Hide the in-row nav menu (Home / Services / About / Contact). The
     footer carries the same links so the navigation isn't lost. */
  .nav-inner   { height: 64px !important; }
  .nav-links   { display: none !important; }
  .nav-inner .btn {
    padding: 10px 16px !important;
    font-size: 13px !important;
  }

  /* Section heads (280px sidebar layout): block-stack so the eyebrow sits
     above the heading without grid-gap dead space. */
  .section-head    { display: block !important; }
  .section-head .meta { padding-top: 0 !important; margin-bottom: 20px !important; }

  /* Inline-styled flex rows with big gaps (e.g. hero stat row "24/5 coverage
     — 4 channels — Avg. response < 2 min" at gap: 40) overflow on phones.
     Wrap them and shrink the gap. inline-flex (marquee) unaffected by design. */
  [style*="display: flex"][style*="gap: 40"],
  [style*="display: flex"][style*="gap: 60"],
  [style*="display: flex"][style*="gap: 80"],
  [style*="display: flex"][style*="gap: 100"] {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
}


/* =====================================================================
   ≤ 480px — PHONE (footer single column)
   ===================================================================== */

@media (max-width: 480px) {

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding-top: 32px !important;
  }
  .footer { padding: 64px 0 32px !important; }
  .footer-bottom {
    margin-top: 40px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* Form fields slightly smaller — keeps mobile keyboard-friendly without
     triggering iOS auto-zoom (iOS zooms inputs when font-size < 16px). */
  .field-input, .submit-btn { font-size: 16px !important; }
}


/* =====================================================================
   ≤ 360px — TINY PHONE (Galaxy Fold portrait, oldest iPhone SE etc.)
   ===================================================================== */

@media (max-width: 360px) {
  .nav-inner .btn { display: none !important; } /* brand only — save space */
}