/* ============================================================
   Homepage responsive styles
   Breakpoints: ≤1024 laptop, ≤900 tablet wide, ≤768 tablet, ≤480 mobile
   Overrides inline styles with !important where needed.
   ============================================================ */

/* ---- Laptop (≤1280) — tighten padding ---- */
@media (max-width: 1280px) {
  .h-hero__inner { padding: 80px 40px !important; }
  .h-industries, .h-pillars, .h-case, .h-cta { padding-left: 40px !important; padding-right: 40px !important; }
  .h-stats { padding-left: 40px !important; padding-right: 40px !important; }
}

/* ---- Tablet wide (≤1024) — shrink h1, 2-col grids ---- */
@media (max-width: 1024px) {
  .h-hero__h1 { font-size: 56px !important; }
  .h-hero__lede { font-size: 18px !important; }
  .h-h2 { font-size: 40px !important; }
  .h-case__h2 { font-size: 32px !important; }
  .h-cta__h2 { font-size: 44px !important; }

  /* Stats: 4 → 2 cols; reset all borders, re-add them logically */
  .h-stats__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 40px !important; }
  .h-stats__grid .h-stat { border-left: none !important; padding-left: 0 !important; }
  .h-stat__n { font-size: 54px !important; }
}

/* ---- Tablet (≤900) — 3-col grids → 2-col; case study stacks ---- */
@media (max-width: 900px) {
  .h-hero { min-height: auto !important; padding-bottom: 40px; }
  .h-hero__inner { padding: 64px 32px 48px !important; }
  .h-hero__h1 { font-size: 48px !important; }
  .h-hero__strip { gap: 20px !important; font-size: 10px !important; padding: 16px 32px !important; }
  .h-hero__strip > span:last-child { margin-left: 0 !important; }

  .h-industries, .h-pillars { padding-top: 80px !important; padding-bottom: 80px !important; }
  .h-case { padding-top: 80px !important; padding-bottom: 80px !important; }

  /* 3-col grids → 2-col */
  .h-grid-3 { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }

  /* Case study — stack, image on top */
  .h-case__grid { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* Nav: hide desktop nav + sign-in + request-demo; show hamburger */
  nav.desktop-nav { display: none !important; }
  .mobile-toggle { display: inline-flex !important; }
  .nav-signin, .nav-demo { display: none !important; }
}

/* ---- Mobile (≤640) — single column everywhere ---- */
@media (max-width: 640px) {
  .h-hero__inner { padding: 56px 20px 40px !important; }
  .h-hero__eyebrow { font-size: 10px !important; }
  .h-hero__h1 { font-size: 36px !important; letter-spacing: -0.03em !important; }
  .h-hero__lede { font-size: 16px !important; margin-top: 20px !important; margin-bottom: 28px !important; }
  .h-hero__ctas { flex-direction: column !important; align-items: stretch !important; width: 100% !important; }
  .h-hero__ctas > * { width: 100% !important; justify-content: center !important; }
  .h-hero__strip { padding: 14px 20px !important; gap: 14px !important; }
  .h-hero__strip > span:nth-child(4) { display: none !important; } /* scroll indicator hidden on mobile */

  /* All single column */
  .h-grid-3 { grid-template-columns: 1fr !important; gap: 16px !important; }
  .h-industries, .h-pillars, .h-case, .h-cta { padding-left: 20px !important; padding-right: 20px !important; }
  .h-industries, .h-pillars, .h-case { padding-top: 64px !important; padding-bottom: 64px !important; }
  .h-cta { padding-top: 72px !important; padding-bottom: 72px !important; }

  .h-h2 { font-size: 30px !important; }
  .h-lede { font-size: 16px !important; margin-bottom: 36px !important; }
  .h-case__h2 { font-size: 24px !important; }
  .h-cta__h2 { font-size: 32px !important; }

  /* Stats: keep 2 cols, smaller numerals */
  .h-stats { padding: 64px 20px !important; }
  .h-stat__n { font-size: 40px !important; }
  .h-stats__grid { gap: 32px !important; }

  /* Nav */
  [role="banner"], div[style*="height: 72px"] { padding: 0 20px !important; }
}

/* ---- Inquiry modal mobile ---- */
@media (max-width: 640px) {
  div[role="dialog"] aside { width: 100% !important; }
}

/* ---- Footer stacking ---- */
@media (max-width: 900px) {
  footer > div > div:first-child {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  footer > div > div:first-child > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  footer { padding: 56px 20px 24px !important; }
  footer > div > div:first-child {
    grid-template-columns: 1fr !important;
  }
  /* Certifications row wraps naturally (flex wrap) */
  /* Bottom legal row already flex-wraps */
}