/* ============================================================
   SOFTODOOR — responsive.css
   ============================================================ */

/* ── tablet ── */
@media (max-width: 980px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__card--lg { grid-column: span 2; grid-row: span 1; min-height: 240px; }
  .bento__card--wide { grid-column: span 2; }

  .process__track { grid-template-columns: repeat(2, 1fr); gap: 40px 26px; }
  .process__track::before { display: none; }

  .work { grid-template-columns: 1fr; }
  .work__sticky { position: relative; height: auto; margin-bottom: 30px; }
  .work__visual { aspect-ratio: 16/10; max-width: 520px; }
  .work__step { min-height: auto; padding-block: 30px; opacity: 1; }

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

  .footer__top { grid-template-columns: 1fr; gap: 40px; }
}

/* ── mobile nav ── */
@media (max-width: 760px) {
  .nav__actions { display: none; }
  .nav__toggle { display: flex; }
  .nav__links {
    position: fixed; inset: 0 0 0 auto; width: min(82vw, 360px);
    flex-direction: column; justify-content: center; gap: 30px;
    padding: 0 40px; background: rgba(8,10,24,.92); backdrop-filter: blur(22px);
    transform: translateX(100%); transition: transform .5s var(--ease);
    border-left: 1px solid var(--line);
  }
  .nav__links.is-open { transform: none; }
  .nav__links a { font-family: var(--display); font-size: 1.5rem; color: var(--text); }
}

/* ── phones ── */
@media (max-width: 600px) {
  :root { --radius: 18px; }
  .bento { grid-template-columns: 1fr; }
  .bento__card--lg, .bento__card--wide { grid-column: span 1; }
  .process__track { grid-template-columns: 1fr; }
  .hero__stats { gap: 28px 40px; }
  .hero { padding-top: 110px; }
  .quote__card blockquote { font-size: 1.4rem; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .btn { padding: 13px 22px; }
}

@media (max-width: 380px) {
  .footer__cols { grid-template-columns: 1fr; }
}