/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   Mobile styles live in base/layout/components. This file layers on
   changes for wider viewports only (mobile-first).
   ========================================================================== */

/* ---- Small phones: tighten gutters further ---- */
@media (max-width: 359px) {
  :root {
    --gutter: 1.1rem;
  }

  .hero-copy h1 {
    max-width: 100%;
  }
}

/* ---- Large phones / small tablets ---- */
@media (min-width: 480px) {
  .trust-list {
    grid-template-columns: repeat(2, 1fr);
  }

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

/* ---- Tablets ---- */
@media (min-width: 768px) {
  .about-pillars {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-wrap {
    grid-template-columns: 1.1fr 0.9fr;
  }

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

  .report-card {
    padding: var(--space-2xl);
  }

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

  .form-grid .form-field--full {
    grid-column: 1 / -1;
  }
}

/* ---- Desktop ---- */
@media (min-width: 1024px) {
  .nav-links {
    display: flex;
  }

  .nav-cta {
    display: inline-flex;
  }

  .nav-toggle {
    display: none;
  }

  .hero-inner {
  grid-template-columns: 1fr;
}

  .hero-copy p {
    font-size: var(--fs-base);
    max-width: 640px;
  }

  .trust-list {
    grid-template-columns: repeat(4, 1fr);
  }

  .trust-item {
    padding-inline: var(--space-md);
    border-right: 1px solid var(--border);
  }

  .trust-item:last-child {
    border-right: none;
  }

  .split {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-2xl);
  }

  .split.split--reverse {
    grid-template-columns: 1.15fr 0.85fr;
  }

  .split.split--reverse .about-visual {
    order: 1;
  }

  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .values-wrap {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .values-features {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ---- Large desktop ---- */
@media (min-width: 1440px) {
  :root {
    --gutter: 3.5rem;
  }

  .hero {
    padding-top: calc(var(--nav-height) + var(--space-3xl));
  }
}

/* ---- Ultra-wide ---- */
@media (min-width: 1920px) {
  :root {
    --container-max: 1440px;
  }
}