/* ============================================
   Tablet — 1024px and below
   ============================================ */
@media (max-width: 1024px) {
  /* Nav */
  .nav__links { display: none; }
  .nav__toggle { display: flex; }

  /* Grids */
  .grid-3,
  .portfolio-grid { grid-template-columns: 1fr 1fr; }

  .grid-4,
  .team-grid { grid-template-columns: 1fr 1fr; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }

  .contact-layout { grid-template-columns: 1fr; gap: 3rem; }

  .content-split { gap: 3rem; }

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

/* ============================================
   Mobile — 768px and below
   ============================================ */
@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4,
  .portfolio-grid,
  .team-grid,
  .feature-list,
  .values-grid,
  .content-split { grid-template-columns: 1fr; }

  .content-split--reverse .content-split__text,
  .content-split--reverse .content-split__media { order: unset; }

  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }

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

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

  .hero__scroll { display: none; }

  .content-split__media img,
  .content-split__media-placeholder { height: 240px; }

  .cta-banner { padding: 4rem 0; }

  .cta-banner__body { max-width: none; }

  .page-hero { padding-bottom: 3rem; }

  /* Scale ruler up so labels are readable on mobile */
  .ruler { padding: 3rem 0 4rem; }
  .ruler__track { width: 300%; margin-left: -100%; }
}

/* ============================================
   Small mobile — 480px and below
   ============================================ */
@media (max-width: 480px) {
  .filter-bar { gap: 0.4rem; }

  .hero__title { font-size: clamp(2rem, 9vw, 2.6rem); }

  .btn { width: 100%; justify-content: center; }

  .hero__actions .btn { width: auto; }
}