/* ============================================================
   ZETRYL.CHEM — responsive.css
   Breakpoints · reduced motion
   ============================================================ */

@media (max-width: 1024px) {
  .orbit { right: -34vw; opacity: 0.55; }
  .about-grid, .coverage-grid, .contact-grid { grid-template-columns: 1fr; gap: 52px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .prod-row { grid-template-columns: 48px 1fr auto; }
  .prod-desc { grid-column: 2 / -1; grid-row: 2; }
  .map-frame { max-width: 440px; margin: 0 auto; }
}

@media (max-width: 768px) {
  :root { --nav-h: 62px; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  #hero { padding-top: calc(var(--nav-h) + 32px); }
  /* keep the orbit on phones: a large faint sweep behind the headline */
  .orbit {
    top: 0; right: -58vw;
    width: 150vw;
    transform: translateY(-18%);
    opacity: 0.4;
  }
  .hero-stats { flex-direction: column; border-top: none; margin-top: 48px; }
  .hero-stat { padding: 16px 0; margin-right: 0; border-top: 1px solid var(--line); }
  .hero-stat + .hero-stat { border-left: none; padding-left: 0; }
  #about, #products, #coverage, #services, #contact { padding: 72px 0; }
  #brands { padding: 60px 0; }
  .prod-row { grid-template-columns: 44px 1fr; gap: 16px 18px; padding: 22px 12px; }
  .prod-desc { grid-column: 1 / -1; grid-row: 2; }
  .prod-inq { grid-column: 1 / -1; grid-row: 3; }
  .services-grid, .form-row { grid-template-columns: 1fr; }
  .form-card { padding: 30px 22px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-bottom { flex-direction: column; }
  #inquirePill { right: 16px; bottom: 16px; }
}

@media (max-width: 480px) {
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn-inquire, .hero-cta .link-quiet { justify-content: center; }
  .office { padding: 20px 18px; }
}

/* ---------- Reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .stage, .rv { opacity: 1 !important; transform: none !important; }
  .orbit .oe { stroke-dashoffset: 0 !important; }
  .orbit .onode { opacity: 1 !important; }
  .ticker-track, .brands-track { animation: none !important; }
  #phMap .dot { opacity: var(--o, 0.4) !important; }
  #phMap .arc { stroke-dashoffset: 0 !important; animation: none !important; }
  #phMap .flow { animation: none !important; opacity: 0 !important; }
  #phMap .dest { animation: none !important; opacity: 1 !important; transform: none !important; }
  #phMap .hub-ring { animation: none !important; opacity: 0 !important; }
}