/* =====================================================================
   SPECTRUMSPEAKS — Responsive layer
   Breakpoints tuned for 320 / 375 / 430 mobile, tablet, 1366–1920 desktop
   ===================================================================== */

/* ---- Large desktop: cap line-lengths, keep breathing room ---- */
@media (min-width: 1600px) {
  :root { --container: 1300px; }
}

/* ---- Tablet & below (<= 980px) ---- */
@media (max-width: 980px) {
  :root { --nav-h: 70px; }

  /* Nav collapses to hamburger */
  .nav__links,
  .nav__cta .btn { display: none; }
  .nav__toggle { display: inline-flex; }

  .nav__panel {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    height: calc(100vh - var(--nav-h));
    height: calc(100dvh - var(--nav-h));
    background: var(--cream);
    padding: 2rem var(--gutter) 3rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
    overflow-y: auto;
    border-top: 1px solid var(--line);
  }
  .nav__panel.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
  .nav__panel .nav__link {
    font-size: 1.5rem;
    font-family: var(--font-display);
    color: var(--espresso);
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
  }
  .nav__panel .nav__link::after { display: none; }
  .nav__panel .btn { margin-top: 1.4rem; width: 100%; }

  /* Hero → single column */
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; }

  /* Two-up layouts stack */
  .guide-promo,
  .feature-card,
  .contact-layout,
  .split,
  .split--wide-left,
  .split--wide-right { grid-template-columns: 1fr; }

  .hero__insight { position: static; width: auto; margin-top: 1rem; box-shadow: var(--shadow-md); }
  .frame--hero { aspect-ratio: 16 / 11; }
  .hero__blob { display: none; }

  .flow__node { border-radius: var(--r-md) !important; }
  .flow__node + .flow__node { border-left: 1px solid var(--line); }
  .flow__node::after { display: none; }
  .flow { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }

  .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .cards-3 { grid-template-columns: repeat(2, 1fr); }
  .cred-grid { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: repeat(2, 1fr); }

  /* Approach timeline → vertical */
  .timeline__track,
  .timeline__progress { display: none; }
  .timeline__row { grid-template-columns: 1fr; gap: 0; }
  .tl-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.2rem;
    align-items: start;
    padding: 1.2rem 0;
    border-top: 1px solid var(--line);
  }
  .tl-step:last-child { border-bottom: 1px solid var(--line); }
  .tl-step__num { margin-bottom: 0; width: 58px; height: 58px; font-size: 1.2rem; }

  .feature-card__aside { order: -1; }
}

/* ---- Small tablet / large phone (<= 720px) ---- */
@media (max-width: 720px) {
  .form-row { grid-template-columns: 1fr; }
  .cards-4,
  .cards-3,
  .cards-2,
  .pillars { grid-template-columns: 1fr; }

  .footer__top { grid-template-columns: 1fr; gap: 2rem; }
  .footer__bottom { justify-content: flex-start; gap: 0.4rem; }

  .hero__actions .btn,
  .cta-band__actions .btn { flex: 1 1 auto; }

  .statement { max-width: none; }
}

/* ---- Phones (<= 480px) ---- */
@media (max-width: 480px) {
  :root { --gutter: 1.15rem; }

  .btn { width: 100%; }
  .nav__cta .btn { width: auto; }
  .hero__actions,
  .cta-band__actions { flex-direction: column; align-items: stretch; }

  .trust-row { gap: 1.1rem; }
  .trust-row__item { max-width: none; flex: 1 1 40%; }

  .brand__sub { display: none; }

  .feature-card,
  .guide-promo { padding: 1.5rem; border-radius: var(--r-lg); }

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

  .cta-band__inner { border-radius: var(--r-lg); }
}

/* ---- Very small (<= 360px) : protect from overflow ---- */
@media (max-width: 360px) {
  .brand__mark { font-size: 0.98rem; letter-spacing: 0.1em; }
  .chip { font-size: 0.72rem; }
  .mockbook { padding: 1.15rem; }
}

/* ---- Print (basic tidy) ---- */
@media print {
  .nav, .footer, .scroll-progress, .btn, .cta-band { display: none !important; }
  body { background: #fff; color: #000; }
}