/* ==========================================================================
   VR Bird Netting Services — Responsive Rules
   ========================================================================== */

/* ----- 1280px and below: tighten grids ----- */
@media (max-width: 1280px){
  .value-grid{ grid-template-columns: repeat(2, 1fr); }
  .service-grid{ grid-template-columns: repeat(3, 1fr); }
  .steps-grid{ grid-template-columns: repeat(2, 1fr); }
  .gallery-grid{ grid-template-columns: repeat(3, 1fr); }
  .badge-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* ----- 1024px: switch two-column heroes to stacked ----- */
@media (max-width: 1024px){
  .container{ padding: 0 20px; }
  section{ padding: 60px 0; }

  .hero-grid{ grid-template-columns: 1fr; }
  .hero-media{ order:-1; max-width: 520px; margin: 0 auto; }

  .why-grid{ grid-template-columns: 1fr; }
  .why-media{ order:-1; max-width: 480px; margin: 0 auto; }

  .about-grid{ grid-template-columns: 1fr; }
  .about-media{ max-width: 480px; margin: 0 auto; }

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

  .service-detail{ grid-template-columns: 70px 1fr; }
  .service-detail .actions{ grid-column: 1 / -1; flex-direction:row; flex-wrap:wrap; margin-top:10px; }
}

/* ----- 900px: nav collapses to hamburger, mobile bar appears ----- */
@media (max-width: 900px){
  .main-nav{
    position: fixed;
    top: var(--header-h);
    left:0; right:0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    max-height: 0;
    overflow:hidden;
    transition: max-height .25s ease;
    z-index: 480;
  }
  .main-nav.open{ max-height: 420px; }
  .main-nav ul{
    flex-direction:column;
    align-items:flex-start;
    gap: 0;
    padding: 10px 22px 18px;
  }
  .main-nav ul li{ width:100%; }
  .main-nav a{ display:block; padding: 13px 2px; border-bottom: 1px solid var(--border); width:100%; }
  .main-nav a::after{ display:none; }

  .header-cta .btn-call span.long{ display:none; }
  .nav-toggle{ display:flex; }

  .mobile-cta-bar{ display:flex; }
  body{ padding-bottom: var(--mobile-bar-h); }
  .float-actions{ bottom: calc(var(--mobile-bar-h) + 18px); }

  .value-grid{ grid-template-columns: 1fr 1fr; }
  .service-grid{ grid-template-columns: 1fr 1fr; }
  .steps-grid{ grid-template-columns: 1fr 1fr; }
  .gallery-grid{ grid-template-columns: 1fr 1fr; }
  .badge-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .about-list{ grid-template-columns: 1fr; }
  .mini-stats{ grid-template-columns: 1fr 1fr; }

  .cta-banner{ flex-direction:column; text-align:center; align-items:center; }
  .cta-banner .btn-row{ justify-content:center; }
}

/* ----- 640px: single column, compact type ----- */
@media (max-width: 640px){
  section{ padding: 46px 0; }
  h1{ font-size: 1.8rem; }
  h2{ font-size: 1.4rem; }

  .value-grid{ grid-template-columns: 1fr; }
  .service-grid{ grid-template-columns: 1fr; }
  .steps-grid{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .badge-grid{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns: 1fr; gap: 26px; }
  .mini-stats{ grid-template-columns: 1fr 1fr; }
  .form-row-2{ grid-template-columns: 1fr; }

  .enquiry-card{ padding: 22px; }
  .cta-banner{ padding: 30px 22px; }
  .cta-strip{ padding: 42px 0; }

  .footer-bottom{ flex-direction:column; text-align:center; }

  .float-actions{ right: 14px; }
  .float-btn{ width:52px; height:52px; }

  .lightbox-prev{ left:8px; }
  .lightbox-next{ right:8px; }
  .lightbox-close{ top:12px; right:12px; }
}

/* ----- 375px and below ----- */
@media (max-width: 375px){
  .container{ padding: 0 16px; }
  .gallery-grid{ grid-template-columns: 1fr; }
  .btn{ padding: 12px 18px; font-size:0.92rem; }
  .brand img{ height: 38px; }
}

/* ----- Print (basic, avoids overflow issues) ----- */
@media print{
  .mobile-cta-bar, .float-actions, .site-header, .nav-toggle{ display:none !important; }
}