/* ==========================================================================
   Zosma Digital - Global Responsive & Core Web Vitals Layout Guards
   ========================================================================== */

/* Universal Overflow & Layout Guard */
html, body {
  width: 100%;
  overflow-x: hidden;
  max-width: 100vw;
}

/* Extra Large Screens (>= 1440px) */
@media (min-width: 1440px) {
  .container {
    max-width: 1280px;
  }
}

/* Large Tablets & Small Desktops (<= 1024px) */
@media (max-width: 1024px) {
  .hero-grid {
    gap: 40px;
  }

  .footer-top {
    gap: 40px;
  }
}

/* Tablets & Mobile Landscape (<= 768px) */
@media (max-width: 768px) {
  .nav-wrap {
    height: 70px;
  }

  :root {
    --header-height: 70px;
  }

  .hero {
    padding: 48px 0 44px;
  }

  .hero h1 {
    font-size: 32px;
  }

  .hero-sub {
    font-size: 16px;
  }

  .hero-form {
    padding: 28px 20px;
  }

  .final-cta {
    padding: 48px 24px;
  }

  .final-cta h2 {
    font-size: 26px;
  }

  .results-panel {
    padding: 36px 20px;
  }
}

/* Mobile Devices (<= 430px: iPhone 14/15/16 Pro Max, Pixel) */
@media (max-width: 430px) {
  .container {
    padding: 0 16px;
  }

  .btn {
    width: 100%;
    padding: 13px 20px;
  }

  .hero-service-links .btn-sm {
    width: auto;
  }

  .hero-ctas .btn {
    width: 100%;
  }

  .trust-strip {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .editorial-item {
    padding: 24px 0;
  }

  .editorial-item .item-num {
    font-size: 20px;
  }

  .process-timeline {
    gap: 28px;
  }

  .process-step {
    padding-left: 0;
    border-left: none;
    border-top: 2px solid var(--blue);
    padding-top: 14px;
  }

  .footer-pills a {
    width: 100%;
    text-align: center;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* Small Mobile (<= 375px: iPhone SE, small screens) */
@media (max-width: 375px) {
  .hero h1 {
    font-size: 28px;
  }

  .sec-head h2 {
    font-size: 24px;
  }
}

/* Micro screens (<= 320px) */
@media (max-width: 320px) {
  body {
    font-size: 15px;
  }

  .hero h1 {
    font-size: 25px;
  }

  .hero-form {
    padding: 20px 14px;
  }
}