/* ==========================================================================
   Responsive breakpoints
   Reviewed at: 1440 / 1280 / 1024 / 768 / 390 / 360
   Header cutover: >=1200px shows the full desktop nav row;
   below 1200px shows the compact logo + Menu control.
   ========================================================================== */

/* ----- Compact header + mobile navigation (<1200px) ----- */
@media (max-width: 1199px) {
  .primary-nav,
  .header-cta {
    display: none;
  }

  .mobile-nav {
    display: block;
  }

  .brand__logo {
    height: 2.75rem;
  }
}

/* ----- Laptop / tablet landscape (<=1024px) ----- */
@media (max-width: 1024px) {
  :root {
    --fs-4xl: 3rem;
    --fs-3xl: 2.5rem;
  }

  .card-grid,
  .project-grid,
  .proof-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl) var(--space-lg);
  }

  .split {
    gap: var(--space-lg);
  }
}

/* ----- Tablet (<=768px) ----- */
@media (max-width: 768px) {
  :root {
    --fs-4xl: 2.5rem;
    --fs-3xl: 2.15rem;
    --fs-2xl: 1.85rem;
  }

  .split,
  .hero__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .split--reverse {
    flex-direction: column-reverse;
  }

  .split--reverse .split__media {
    order: initial;
  }

  .hero {
    padding-block: var(--space-xl) var(--space-lg);
  }

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

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

  .section--lavender {
    padding-block: 5rem;
  }
}

/* ----- Mobile (<=480px) ----- */
@media (max-width: 480px) {
  :root {
    --fs-4xl: 2rem;
    --fs-3xl: 1.85rem;
    --fs-2xl: 1.6rem;
    --fs-xl: 1.3rem;
    --container-padding: 1.1rem;
  }

  .card-grid,
  .project-grid {
    grid-template-columns: 1fr;
  }

  .btn-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }

  .btn-row .btn {
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .newsletter-form {
    flex-direction: column;
  }

  .logo-strip {
    gap: var(--space-md) var(--space-lg);
  }

  .utility-bar__inner {
    padding-inline: var(--space-sm);
    text-align: center;
  }
}

/* ----- Small mobile (<=360px) -----
   Below ~340px the logo (flex-shrink:0 by design, so it never gets
   compressed by flexbox) plus the header gap plus the Menu toggle no
   longer fit their available width, which pushed the toggle outside
   the header and caused real horizontal scroll. Reclaim space from
   several smaller levers instead of shrinking any one thing too far. */
@media (max-width: 360px) {
  :root {
    --container-padding: 0.875rem;
  }

  .site-header__inner {
    gap: 0.75rem;
  }

  .mobile-nav__toggle {
    gap: 0.3rem;
    padding: 0.5rem 0.55rem;
    font-size: 0.8125rem;
  }

  .mobile-nav__icon {
    width: 16px;
  }
}