/* ==================================================================
   AutoDeck — Responsive Rules
   Media queries only (reduced-motion preference + breakpoints).
   Loaded after main.css so these rules can override it as intended.
   Breakpoints run largest → smallest so narrower rules correctly win.
   ================================================================== */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}

/* Small desktop / large tablet — tighten column gaps */
@media (max-width:1024px){
  .about-services{gap:40px;}
}

/* Tablet — collapse the nav into a toggle menu */
@media (max-width:880px){
  .navbar{justify-content:space-between;}
  .nav-toggle{display:flex;}

  .nav-links{
      display:none;
      position:absolute;
      top:100%;
      left:0;
      width:100%;
      flex-direction:column;
      align-items:center;
      gap:0;
      background:rgba(10,10,10,.97);
      padding:8px 0;
  }
  .nav-links.open{display:flex;}
  .nav-links li{width:100%; text-align:center;}
  .nav-links li a{display:block; padding:14px 0;}

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

/* Small tablet / large phone — Section 3 (about/services) falls back to one column */
@media (max-width:760px){
  .about-services{grid-template-columns:1fr;}
}

/* Mobile — hero content clears the fixed nav; contact stacks to one column */
@media (max-width:900px){

  .hero{height:auto; min-height:100vh;}

  .hero-content{
      justify-content:flex-start;
      padding-top:130px;
      padding-bottom:60px;
      margin:0 24px;
      max-width:100%;
      text-align:center;
      align-items:center;
  }

  .brand-seal img{width:190px;}

  .hero h1{font-size:52px;}

  .hero p{font-size:17px;}

  .hero-buttons{
      flex-direction:column;
      width:100%;
  }

  .hero-buttons a{
      width:100%;
      text-align:center;
  }

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

/* Small mobile */
@media (max-width:480px){
  .wrap{padding:0 20px;}
  .contact-col{padding:24px;}
}