/* ============================================================
   Nova Marketing — responsive.css
   Mobile-first breakpoints
   Breakpoints: 1024 (tablet/laptop), 768 (tablet), 560 (mobile)
   ============================================================ */

/* ---------- <= 1024px : laptop / small desktop ---------- */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* ---------- <= 860px : tablet ---------- */
@media (max-width: 860px) {
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-6);
  }
  .hero__visual { order: -1; }
  .hero__lead { margin-inline: auto; }
  .hero__ctas { justify-content: center; }

  .why__inner { grid-template-columns: 1fr; gap: var(--space-7); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- <= 768px : mobile nav kicks in ---------- */
@media (max-width: 768px) {
  :root { --nav-h: 64px; }

  .nav__burger { display: inline-flex; }

  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: var(--space-3) var(--space-5) var(--space-5);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t), transform var(--t);
    box-shadow: var(--shadow);
  }
  .nav__links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav__link {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.05rem;
  }
  .nav__link::after { display: none; }

  /* primary CTA inside mobile menu is hidden from the bar to save space */
  .nav__actions .btn-nav-cta { display: none; }
}

/* ---------- <= 560px : phone ---------- */
@media (max-width: 560px) {
  .section { padding-block: var(--space-8); }
  .container { padding-inline: var(--space-4); }

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

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

  .cta-band__inner { flex-direction: column; align-items: flex-start; text-align: left; }

  .hero__ctas .btn { flex: 1; }
}

/* ---------- <= 400px : very small ---------- */
@media (max-width: 400px) {
  .clients__row { gap: var(--space-4); }
  .footer__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PHASE 2 PAGES — responsive
   ============================================================ */
@media (max-width: 1024px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .story-grid { grid-template-columns: 1fr; }
  .mv-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .request-wrap { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .pkg-grid { flex-direction: column; }
}

@media (max-width: 560px) {
  .values-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}