/* =========================================================
   SYNVERIQ — Responsive adjustments
   Breakpoints are content-driven; verified at 360/390/768/1024/1440/1920
   ========================================================= */

/* ---- Small phones (<= 380px): tighten type & spacing ---------------- */
@media (max-width: 23.75em) {
  :root {
    --section-pad-x: 1rem;
  }

  .hero__title {
    max-width: none;
  }

  .founder__initials {
    font-size: 3.4rem;
  }
}

/* ---- Phones (<= 480px) ------------------------------------------------ */
@media (max-width: 30em) {
  .site-header__row {
    padding-block: var(--space-xs);
  }

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

  .cta-band__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-band__actions .btn {
    justify-content: center;
  }

  .form-grid { grid-template-columns: 1fr; }
}

/* ---- Tablets (768px) ---------------------------------------------------- */
@media (min-width: 48em) and (max-width: 61.9375em) {
  .founder { grid-template-columns: 0.7fr 1.3fr; }
}

/* ---- Small laptops (1024px) --------------------------------------------- */
@media (min-width: 64em) and (max-width: 74.9375em) {
  .hero__title { font-size: clamp(2.8rem, 2rem + 4vw, 4.2rem); }
}

/* ---- Large desktop (1440px+) -------------------------------------------- */
@media (min-width: 90em) {
  :root {
    --container-max: 92rem;
  }
}

/* ---- Ultra-wide (1920px+) ----------------------------------------------- */
@media (min-width: 120em) {
  :root {
    --container-max: 100rem;
  }
}

/* ---- Prevent horizontal overflow globally -------------------------------- */
html, body {
  overflow-x: hidden;
}

.wrap, .hero, .section {
  max-width: 100%;
}