/* =========================================================================
   Responsive breakpoints — loaded last so it overrides component defaults
   ========================================================================= */
@media (max-width: 1024px){
  .about-us-grid{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .about-us-grid .media-frame{ order: -1; max-width: 560px; margin-inline: auto; width: 100%; }
}

@media (max-width: 860px){
  .topbar-item span{ display: none; }
  .nav-links{ display: none; }
  .menu-toggle{ display: block; }
}

@media (max-width: 640px){
  .topbar{ display: none; }
  html{ scroll-padding-top: 76px; }
  .hero{ padding-top: 110px; }
  .cursor{ display: none; }
  .contact-grid{ text-align: center; }
  .contact-card ul{ align-items: center; }
  .contact-card li{ flex-direction: column; align-items: center; text-align: center; }
  .contact-card-head{ flex-direction: column; }
  .offer-card.featured{
    grid-column: span 1;
    flex-direction: column;
    text-align: center;
  }
  .offer-card.featured .offer-price{ align-items: center; }
  .offer-card.featured .offer-badge{ align-self: center; }
}

/* =========================================================================
   Touch devices — disable cursor-dependent effects
   ========================================================================= */
@media (pointer: coarse){
  .cursor{ display: none; }
  .tilt{ transform: none !important; }
  .tilt::before{ display: none; }
}

/* =========================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .cursor, .hero-particles, .mesh-blob{ display: none; }
  .hero-bg-img{ transform: none; }
}