/* ==========================================================================
   RESPONSIVE — Desktop → Laptop → Tablet → Mobile
   ========================================================================== */

/* ---------- Large screens (≥1600px) ---------- */
@media (min-width: 1600px) {
  .masonry { column-count: 5; }
}

/* ---------- Laptop (≤1200px) ---------- */
@media (max-width: 1200px) {
  :root { --gutter: 28px; }
  .masonry { column-count: 3; column-gap: 24px; }
  .card { margin-bottom: 24px; }
  .hero__grid { grid-template-columns: 1.2fr 0.8fr; gap: 44px; }
  .hero__video-frame { width: min(100%, 320px); }
  .about__grid, .contact__grid { gap: 56px; }
}

/* ---------- Tablet (≤1024px) ---------- */
@media (max-width: 1024px) {
  .nav { display: none; }
  .social--header { display: none; }
  .menu-toggle { display: flex; }

  .hero__grid { grid-template-columns: 1fr; }
  .hero__right { order: -1; margin-bottom: 8px; }
  .hero__video-frame { width: min(100%, 300px); aspect-ratio: 9/16; }
  .hero__meta { gap: 28px; }

  .about__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 420px; }

  .masonry { column-count: 2; }
  .section-head__row { grid-template-columns: 1fr; gap: 20px; }
  .section-head--portfolio .section-sub { max-width: 100%; }

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

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

  .counters { grid-template-columns: repeat(4, auto); gap: 26px; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* ---------- Tablet small / large mobile (≤768px) ---------- */
@media (max-width: 768px) {
  .masonry { column-gap: 20px; }
  .card { margin-bottom: 20px; }
  .card__title { font-size: 19px; }

  .portfolio { padding: 110px 0 90px; }
  .about, .services { padding: 90px 0; }

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

  .testi__card { padding: 36px 28px; }

  .contact__form { grid-template-columns: 1fr; }
  .field { grid-column: 1 / -1; }

  .counters { grid-template-columns: repeat(2, auto); row-gap: 30px; }

  .modal__panel { grid-template-columns: 1fr; }
  .modal__media { min-height: 200px; }
}

/* ---------- Mobile (≤600px) ---------- */
@media (max-width: 600px) {
  :root { --gutter: 20px; --header-h: 72px; }

  .hero { min-height: auto; padding: 120px 0 90px; }
  .hero__title { font-size: 38px; }
  .hero__title-alt { font-size: 19px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }
  .hero__meta { flex-wrap: wrap; gap: 22px 32px; }
  .hero__video-frame { width: min(78%, 260px); border-radius: 22px; }
  .hero__video-frame::before { border-radius: 15px; }
  .scroll-indicator { display: none; }

  .masonry { column-count: 1; }

  .section-title { font-size: 30px; }
  .section-head--portfolio .section-title { font-size: 40px; }

  .filters { gap: 8px; }
  .filter { padding: 8px 16px; font-size: 11px; }

  .about__image-frame { aspect-ratio: 4/3.6; }

  .footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .footer__bottom { flex-direction: column; gap: 16px; text-align: center; }

  .testi__quote { font-size: 19px; }
  .testi__card { padding: 30px 22px; }

  .modal__info { padding: 30px 22px; }

  .cursor { display: none !important; }
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: auto; }

  .mobile-menu__list a { font-size: 26px; }
}

/* ---------- No horizontal scroll safeguard ---------- */
@media (max-width: 420px) {
  .hero__meta-item strong { font-size: 22px; }
  .counter__num { font-size: 32px; }
}