/* ==========================================================================
   JNV Creatives — Responsive Layer
   Breakpoints: 1200 / 1080 / 960 / 760 / 560 / 400
   ========================================================================== */

/* ---------- Large desktop ---------- */
@media (max-width: 1200px) {
  :root { --sec-y: 92px; }
  .hero__grid { gap: 44px; }
  .float-card--1 { left: -2%; }
  .float-card--3 { left: -4%; }
  .float-card--2 { right: -3%; }
}

/* ---------- Small desktop / large tablet ---------- */
@media (max-width: 1080px) {
  .nav__list { gap: 0; }
  .nav__link { padding: 10px 11px; font-size: .89rem; }
  .mega { width: 540px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .steps::before { display: none; }
  .quote-ghost { grid-template-columns: 1fr; }
}

/* ---------- Tablet: switch to mobile navigation ---------- */
@media (max-width: 960px) {
  :root { --sec-y: 78px; --header-h: 70px; }

  .nav, .header-cta { display: none; }
  .burger { display: grid; }
  .site-header.is-scrolled { height: 64px; }

  .split, .hero__grid, .page-hero__split { grid-template-columns: 1fr; gap: 44px; }
  .split--reverse > *:first-child { order: 2; }

  .hero { padding-block: 48px 72px; }
  .hero__stage { max-width: 460px; }
  .hero__lead { max-width: 100%; }

  .grid-3, .pf-grid, .blog-grid, .price-grid { grid-template-columns: repeat(2, 1fr); }
  .price-card--featured { transform: none; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .form-card { padding: 30px 26px; }

  .sec-head-row { gap: 24px; margin-bottom: 40px; }
  .sec-head { margin-bottom: 44px; }

  .cta-band { padding-block: 76px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  :root { --sec-y: 64px; --gutter: 20px; }

  body { font-size: 16px; }

  .grid-2, .grid-3, .grid-4, .pf-grid, .blog-grid, .price-grid { grid-template-columns: 1fr; }

  .hero__stage { max-width: 100%; aspect-ratio: 1 / 1.02; }
  .hero__photo { inset: 5% 6% 6% 5%; }
  .float-card { min-width: 0; padding: 11px 13px; transform: none !important; animation: none !important; }
  .float-card__label { font-size: .64rem; margin-bottom: 7px; }
  .float-card__val { font-size: .82rem; }
  .float-card--1 { top: 2%; left: 0; }
  .float-card--2 { top: 26%; right: 0; }
  .float-card--3 { bottom: 20%; left: 0; }
  .float-card--4 { display: none; }
  .hero__meta { gap: 10px 20px; }

  .steps { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .step__dot { width: 48px; height: 48px; margin-bottom: 12px; }

  .timeline::before { left: 22px; }
  .tl-item { grid-template-columns: 58px 1fr; padding-block: 12px; }
  .tl-item__num { width: 46px; height: 46px; border-radius: 15px; font-size: .88rem; }
  .tl-item__body { padding: 18px 20px; }
  .tl-item:hover .tl-item__body { transform: none; }

  .footer-grid { grid-template-columns: 1fr; gap: 34px; padding-bottom: 40px; }
  .footer-bottom { justify-content: flex-start; }

  .form-grid { grid-template-columns: 1fr; }
  .form-card { padding: 26px 20px; border-radius: var(--r-lg); }

  .dash { grid-template-columns: repeat(2, 1fr); }
  .dash__tile--wide, .dash__tile--two { grid-column: span 2; }

  .mega { display: none; }

  .empty-state { padding: 44px 24px; }
  .price-card { padding: 30px 24px; }
  .pf-detail__body { padding: 24px 20px; }

  .btn-row .btn { flex: 1 1 auto; justify-content: center; }
  .cta-band .btn-row .btn { flex: 1 1 220px; }

  .wa-float { padding: 13px 16px; font-size: .86rem; bottom: 78px; right: 16px; }
  .to-top { right: 16px; bottom: 142px; width: 42px; height: 42px; }
  .sticky-bar { display: flex; }
  body { padding-bottom: 0; }

  .section:last-of-type { padding-bottom: calc(var(--sec-y) + 60px); }
  .site-footer { padding-bottom: 62px; }
}

/* ---------- Small mobile ---------- */
@media (max-width: 560px) {
  h1 { font-size: clamp(2.05rem, 8.6vw, 2.7rem); }
  .display { font-size: clamp(1.95rem, 8.2vw, 2.7rem); }
  .stack-head { font-size: clamp(1.6rem, 7.4vw, 2.2rem); }
  .cta-band h2 { font-size: clamp(1.75rem, 7.6vw, 2.4rem); }

  .card, .svc-card, .why-card { padding: 24px 22px; }
  .num-item { padding: 18px 20px; gap: 15px; }
  .num-item:hover { transform: none; }

  .trust__pill { padding: 9px 16px; font-size: .82rem; }
  .filters { gap: 8px; }
  .filter-btn { padding: 9px 15px; font-size: .82rem; }

  .contact-card { padding: 18px 18px; }
  .price-card__amt { font-size: 2.4rem; }

  .float-card--3 { display: none; }
  .hero__stage { aspect-ratio: 1 / 1.1; }

  .quote-ghost { gap: 14px; }
  .mnav__link { font-size: 1.1rem; }
}

@media (max-width: 400px) {
  :root { --gutter: 16px; }
  .btn { padding: 14px 22px; font-size: .9rem; }
  .btn--lg { padding: 16px 26px; font-size: .94rem; }
  .logo__mark { width: 34px; height: 34px; }
  .logo__name { font-size: 1.04rem; }
  .steps { grid-template-columns: 1fr; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .mobile-nav, .wa-float, .to-top, .sticky-bar, .cta-band, .blob, .grid-pattern { display: none !important; }
  body { padding-top: 0; color: #000; }
  .section { padding-block: 20px; }
  a { color: #000; text-decoration: underline; }
}

/* ---------- Hover-capable devices only ---------- */
@media (hover: none) {
  .card:hover, .svc-card:hover, .pf-card:hover, .price-card:hover, .post-card:hover,
  .why-card:hover, .num-item:hover, .contact-card:hover, .trust__pill:hover {
    transform: none;
  }
}

/* ---------- High contrast / forced colors ---------- */
@media (forced-colors: active) {
  .btn, .card, .svc-card, .price-card, .faq-item { border: 1px solid CanvasText; }
  .grad-text { color: CanvasText; -webkit-text-fill-color: CanvasText; }
}