/* =========================================================
   33LOOP — Responsive Rules
   ========================================================= */

/* ---------- 1200px ---------- */
@media (max-width: 1200px) {
  .story { grid-template-columns: 1fr; }
  .story__device { position: relative; top: 0; margin-bottom: 20px; }
  .tech__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 1024px ---------- */
@media (max-width: 1024px) {
  .site-nav__links { display: none; }
  .site-nav__cta { display: none; }
  .menu-toggle { display: flex; }

  .hero__inner { grid-template-columns: 1fr; text-align: left; }
  .hero__device { margin-top: 40px; order: -1; }
  .device { width: min(280px, 60vw); }

  .service-row { grid-template-columns: 40px 1fr 32px; grid-template-areas: "num title icon" "desc desc desc"; row-gap: 12px; }
  .service-row__number { grid-area: num; }
  .service-row__title { grid-area: title; }
  .service-row__icon { grid-area: icon; }
  .service-row__desc { grid-area: desc; max-width: 100%; }

  .why-row { grid-template-columns: 60px 40px 1fr; }

  .case-study { grid-template-columns: 1fr; }

  .about { grid-template-columns: 1fr; text-align: left; }
  .about__loop { order: -1; margin-bottom: 20px; }

  .process__steps { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
  .process__path { display: none; }
  .process__timeline { padding-top: 0; }
  .process__steps { margin-top: 0; }

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

/* ---------- 767px (below tablet) ---------- */
@media (max-width: 767px) {
  .form-row { grid-template-columns: 1fr; }
  .contact-hero { padding-top: 120px; }
  :root { --section-pad-y: clamp(56px, 14vw, 100px); }

  .hero { padding-top: 100px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }

  .services__list { border-top: none; }
  .service-row { padding: 24px 0; }

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

  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric { border-left: none; border-top: 1px solid var(--border); }
  .metric:nth-child(odd) { border-right: 1px solid var(--border); }

  .site-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .site-footer__bottom { flex-direction: column; gap: 12px; align-items: flex-start; }

  .cta-primary { padding: 56px 24px; }

  .loop-signature__labels { gap: 14px; }
}

/* ---------- 480px ---------- */
@media (max-width: 480px) {
  .process__steps { grid-template-columns: repeat(2, 1fr); }
  .why-row { grid-template-columns: 44px 32px 1fr; gap: 16px; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr; }
  .metric { border-right: none !important; }
}

/* ---------- Small height / short viewports ---------- */
@media (max-height: 700px) and (min-width: 1025px) {
  .hero { min-height: auto; padding-top: 140px; padding-bottom: 80px; }
}