/* ==========================================================
   RESPONSIVE

   Responsive layout adjustments.

   Contains:
   - Tablet breakpoints
   - Mobile breakpoints
   - Reduced motion preferences

   This file should contain only responsive overrides.
   No base styling belongs here.
   ========================================================== */


/* #region ========== Tablet (≤ 960px) ========== */
@media (max-width: 960px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: rgba(10,10,10,0.96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    flex-direction: column;
    padding: 24px var(--pad);
    gap: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .nav-links.open { display: flex; }
  .nav-toggle { display: flex; }

  .service-grid { grid-template-columns: 1fr; }
  .junk-layout { grid-template-columns: 1fr; gap: 48px; }
  .junk-media { position: static; margin-top: 16px; }
  .junk-media img { aspect-ratio: 16 / 10; }
  .hotshot-layout { grid-template-columns: 1fr; gap: 48px; }
  .hotshot-media { order: 2; }
  .hotshot-media img { aspect-ratio: 16 / 10; }
  .pricing-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; gap: 12px; }
  .other-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-intro { position: static; }
  .contact-grid { grid-template-columns: 1fr; gap: 56px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
  .hero-mark { display: none; }
  .form-row-split { grid-template-columns: 1fr; }
  .motto-mark { display: none; }
}
/* #endregion */


/* #region ========== Mobile (≤ 520px) ========== */
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .contact-form-wrap { padding: 30px 22px; }
  .quote-card {
    margin-left: 12px;
    max-width: calc(100% - 24px);
    padding: 28px 22px 24px;
  }
  .hero-ctas { flex-direction: column; align-items: flex-start; }
  .hero-ctas .btn { width: 100%; }
}
/* #endregion */


/* #region ========== Accessibility ========== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero-headline .line-1,
  .hero-headline .line-2,
  .hero-headline .line-3,
  .hero-sub, .hero-ctas, .hero-meta, .section-scroll {
    opacity: 1;
    transform: none;
  }
}
/* #endregion */