/* Mobile-first overrides
   Target breakpoint example: 375x512 and general small screens
*/

@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-photos{
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
  }
  .photo{ height: 160px; }
  .strip-grid{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: repeat(2, 1fr); }
  .steps{ grid-template-columns: 1fr; }
  .reviews{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .footer-inner{ grid-template-columns: 1fr; }
  .footer-note{ text-align:left; }
}

@media (max-width: 640px){
  .topbar-actions{ display:none; } /* keep it clean on very small screens */

  .nav{
    position: relative;
  }

  .nav-toggle{ display: inline-block; }

  .nav-links{
    position:absolute;
    right: 0;
    top: calc(100% + 10px);
    width: min(320px, 92vw);
    padding: 12px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(11,15,20,0.12);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(0,0,0,0.14);

    display:none;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .nav-links.open{ display:flex; }

  .nav-links a{
    padding: 12px 12px;
    border-radius: 14px;
    background: rgba(0,0,0,0.04);
  }
  .nav-links a.btn{
    background: linear-gradient(135deg, #1e7f3a, #155e2b);
    color: #fff;
    text-align:center;
  }

  .hero{
    padding-top: 28px;
  }
  .hero-card{
    padding: 18px;
  }
  .hero-card h1{
    font-size: 34px;
  }
  .hero-badges{
    grid-template-columns: 1fr;
  }

  .hero-photos{
    grid-template-columns: 1fr;
  }
  .photo{ height: 180px; }

  .section{ padding: 46px 0; }
  .section-head{
    flex-direction: column;
    align-items:flex-start;
  }

  .gallery img{ height: 150px; }

  .container{
    width: calc(100% - 28px);
  }
}

@media (max-width: 420px){
  /* Extra-tight for ~375px wide */
  .hero-card h1{ font-size: 30px; }
  .btn{ width: 100%; }
  .hero-cta{ flex-direction: column; }
  .gallery{ grid-template-columns: 1fr; }
}