/* =========================================================
   POST MOTION — RESPONSIVE STYLESHEET
   ========================================================= */

/* ---------- Large desktop refinement ---------- */
@media (max-width: 1400px) {
  :root { --container: 1140px; }
}

/* ---------- Tablet / small desktop ---------- */
@media (max-width: 1080px) {
  .main-nav { display: none; }
  .menu-toggle { display: flex; }

  .site-header__actions .btn--ghost { display: none; }

  .studio__grid { grid-template-columns: 1fr; gap: 48px; }
  .studio__visual { order: -1; max-width: 420px; margin: 0 auto; width: 100%; }

  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }

  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* ---------- Tablet portrait ---------- */
@media (max-width: 860px) {
  :root { --gutter: 24px; }

  .hero { padding-top: 120px; padding-bottom: 90px; min-height: auto; }
  .hero__hud { gap: 14px 20px; margin-bottom: 44px; }
  .hero__title { margin-bottom: 26px; }
  .hero__desc { max-width: 100%; }
  .hero__scroll { display: none; }
  .hero__timeline-track .tick:nth-child(2),
  .hero__timeline-track .tick:nth-child(4) { display: none; }

  .process__item { grid-template-columns: 70px 1fr; gap: 20px; }

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

  .popup__panel { grid-template-columns: 1fr; }
  .popup__visual { min-height: 180px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .accordion__q { font-size: 1.15rem; }
  html { font-size: 15px; }

  .container { padding: 0 20px; }

  .site-header__inner { padding: 0 20px; }
  .logo__text { font-size: 16px; }

  .hero { padding: 110px 20px 70px; }
  .hero__hud { font-size: 10.5px; gap: 10px 16px; }
  .hero__title { font-size: clamp(2.6rem, 13vw, 4rem); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .hero__timeline { display: none; }

  .marquee__track { font-size: 0.95rem; gap: 20px; }

  .work { padding: 90px 0 80px; }
  .work-swiper .swiper-slide { width: 78vw; }
  .project-card__title { font-size: 1.25rem; }

  .services { padding: 20px 0 90px; }

  .stats { padding: 44px 0; }
  .stats__grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .stat__num { font-size: 2.1rem; }

  .process { padding: 90px 0; }
  .process__item { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; }

  .studio { padding: 20px 0 90px; }
  .studio__facts { flex-wrap: wrap; gap: 24px; }

  .testimonials { padding: 20px 0 90px; }
  .testimonial { padding: 32px 26px; min-height: 260px; }
  .testimonial p { font-size: 1.3rem; }

  .cta { padding: 90px 0 70px; }
  .cta__contacts { flex-direction: column; gap: 16px; }

  .site-footer { padding-top: 60px; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 36px; padding-bottom: 40px; }
  .site-footer__bottom-inner { flex-direction: column; align-items: flex-start; }

  .popup { padding: 14px; }
  .popup__body { padding: 32px 24px; }
  .popup__body h3 { font-size: 1.5rem; }

  .scrubber { height: 2px; }
}

/* ---------- Very small phones ---------- */
@media (max-width: 380px) {
  .hero__title { font-size: 2.3rem; }
  .stats__grid { grid-template-columns: 1fr; }
  .work-swiper .swiper-slide { width: 84vw; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}