/* ==========================================================================
   SPRK — 06. RESPONSIVE
   Breakpoints: 1180 · 1024 · 860 · 640 · 460
   Tested against 1440 / 768 / 375.
   ========================================================================== */

/* ---------- ≤ 1180px : tighten the header ---------------------------------- */
@media (max-width: 1180px) {
  .nav { gap: var(--s-4); }
  .logo__sub { display: none; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr; }
  .footer__contact-col { grid-column: 1 / -1; }
}

/* ---------- ≤ 1024px : drawer navigation ----------------------------------- */
@media (max-width: 1024px) {
  .nav,
  .header__cta .btn--secondary { display: none; }
  .burger { display: grid; }
  .header__inner { gap: var(--s-4); }

  .statbar__inner { grid-template-columns: repeat(2, 1fr); }
  .stat { border-left: 0; border-top: 1px solid var(--line); }
  .stat:nth-child(-n+2) { border-top: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--line); }

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

  .why__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-8); }
  .why__col { padding-right: 0; }
  .why__col + .why__col::before { display: none; }

  .about { grid-template-columns: 1fr; gap: var(--s-11); }
  .about__media { max-width: 560px; }
  .about__media--main { aspect-ratio: 16 / 11; }
  .about__plate { left: auto; right: 4%; top: auto; bottom: -6%; }
  .about__media--inset { display: none; }

  .projects { grid-template-columns: repeat(6, 1fr); }
  .project--wide, .project--tall, .project--half { grid-column: span 6; min-height: 320px; }

  .quote { grid-template-columns: 1fr; }
  .quote__aside { position: static; }

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

/* ---------- ≤ 860px : stack the wide blocks -------------------------------- */
@media (max-width: 860px) {
  .topbar__item--hours { display: none; }

  .sec-head--split { grid-template-columns: 1fr; align-items: start; }
  .sec-head { margin-bottom: var(--s-9); }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-9) var(--s-7); }
  .footer__brand { grid-column: 1 / -1; }

  .hero { min-height: 640px; }
  .hero__lines { grid-template-columns: repeat(2, 1fr); }
  /* The stat plate lands where this sits — one hint is enough */
  .hero__scroll { display: none; }
}

/* ---------- ≤ 640px : single column ---------------------------------------- */
@media (max-width: 640px) {
  .topbar__item--loc { display: none; }
  .topbar__inner { justify-content: space-between; }

  .cats { grid-template-columns: 1fr; }
  .why__grid { grid-template-columns: 1fr; gap: var(--s-7); }

  .statbar { margin-top: calc(var(--section-y) * -0.75); }
  .statbar__inner { grid-template-columns: 1fr 1fr; }
  .stat { padding: var(--s-6) var(--s-5); }

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

  .hero { min-height: 620px; padding-bottom: clamp(6rem, 22vw, 8rem); }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__trust { display: grid; gap: var(--s-3); }
  .hero__trust .sep { display: none; }
  .hero__tag { font-size: 11px; letter-spacing: .06em; padding: 7px 13px 7px 9px; }

  .voices__nav { flex-wrap: wrap; }
  .voices__dots { margin-left: 0; width: 100%; order: -1; margin-bottom: var(--s-3); }

  .footer { padding-top: var(--s-11); }
  .footer__bar { justify-content: center; text-align: center; }
  .footer__legal { justify-content: center; }
}

/* ---------- ≤ 460px : phone polish ----------------------------------------- */
@media (max-width: 460px) {
  .footer__grid { grid-template-columns: 1fr; }
  .statbar__inner { grid-template-columns: 1fr; }
  .stat { border-left: 0 !important; }
  .stat:not(:first-child) { border-top: 1px solid var(--line); }

  .card__body { padding: var(--s-6) var(--s-5); }
  .project__body { padding: var(--s-6) var(--s-5); }

  .fab { width: 50px; height: 50px; }
  .fab svg { width: 24px; height: 24px; }

  .about__plate { position: static; width: fit-content; max-width: none; margin-top: var(--s-5); }
}

/* ---------- Landscape phones: don't let the hero eat the screen ------------ */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: 560px; }
  .hero__scroll { display: none; }
}

/* ---------- Print ---------------------------------------------------------- */
@media print {
  .topbar, .header, .drawer, .drawer-scrim, .fab-stack,
  .scroll-progress, .loader, .hero__scroll, .marquee { display: none !important; }
  body { color: #000; background: #fff; }
  .section--navy, .cta, .footer { background: #fff !important; color: #000 !important; }
  a { color: #000; text-decoration: underline; }
}