/* ============================================================
   Responsive — tablet & mobile breakpoints
   ============================================================ */

/* ---- Large tablet / small laptop ---- */
@media (max-width: 1080px) {
  .services__grid { grid-template-columns: repeat(3, 1fr); row-gap: 2.6rem; }

  .spaces__layout { grid-template-columns: 1fr; }
  .spaces__intro { max-width: none; text-align: center; margin-inline: auto; }
  .spaces__intro .h { justify-content: center; }
  .spaces__cards { grid-template-columns: repeat(3, 1fr); }

  .portfolio__layout { grid-template-columns: 1fr; }
  .portfolio__grid { grid-template-columns: repeat(4, 1fr); }

  .about__layout { width: auto; margin-left: 0; grid-template-columns: 1fr 1fr; }
  .about__photo > img, .about__frame > img { border-radius: var(--r-xl); }
  .about__body { grid-column: 1 / -1; order: -1; text-align: center; }
  .about__body .eyebrow, .about__body h2 { justify-content: center; }
  .about__body p { margin-inline: auto; max-width: 52ch; }

  .work__layout { grid-template-columns: 1fr; }
  .testimonial { max-width: 560px; margin-inline: auto; width: 100%; }
}

/* ---- Tablet ---- */
@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__actions .icon-btn { display: none; }
  .nav__toggle { display: grid; }
  .nav__actions .btn { display: none; }

  .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__content { text-align: center; }
  .hero__text { margin-inline: auto; }
  .hero__cta, .hero__proof { justify-content: center; }
  .hero__media-frame { border-radius: var(--r-xl); aspect-ratio: 16/11; }
  .hero__caption { left: 4%; }

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

  .cta-banner__img { width: 26%; opacity: 0.5; }
}

/* ---- Large phone ---- */
@media (max-width: 620px) {
  :root { --section-y: 3.2rem; }

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

  .spaces__cards { grid-template-columns: repeat(2, 1fr); }
  .spaces__cards .space-card:last-child { grid-column: 1 / -1; }
  .spaces__cards .space-card:last-child .space-card__img { aspect-ratio: 16/7; }

  .process__steps { grid-template-columns: 1fr 1fr; row-gap: 2.2rem; }
  .process__line { display: none; }

  .about__layout { grid-template-columns: 1fr; }
  .sticky-note { right: 4%; bottom: -6%; }

  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__news { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; text-align: center; }
}

/* ---- Small phone ---- */
@media (max-width: 420px) {
  .hero__title { font-size: clamp(2.2rem, 12vw, 3rem); }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .services__grid { grid-template-columns: 1fr; }
  .spaces__cards { grid-template-columns: 1fr; }
  .spaces__cards .space-card:last-child .space-card__img { aspect-ratio: 3/4; }
  .portfolio__grid { grid-template-columns: 1fr; }
  .process__steps { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__col, .footer__contact { text-align: left; }
}