/* ==========================================================================
   RESPONSIVE — Desktop first breakpoints
   ========================================================================== */

/* ---- Laptop / small desktop (<=1200px) ---------------------------------- */
@media (max-width:1200px){
  .works-grid{ grid-auto-rows:14vw; }
  .stats-band{ gap:var(--sp-4); }
}

/* ---- Tablet (<=980px) ----------------------------------------------------*/
@media (max-width:980px){
  :root{ --nav-h:72px; }

  .nav-toggle{ display:grid; }

  /* Off-canvas mobile drawer. Kept in the DOM (not display:none) so the
     open/close transition can animate; visibility + pointer-events keep it
     non-interactive and unreachable by keyboard while closed. */
  .nav-links{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    position:fixed;
    inset:var(--nav-h) 0 0 0;
    padding:var(--sp-5) var(--sp-5) var(--sp-8);
    overflow-y:auto;
    background:var(--glass-fill-strong);
    backdrop-filter:blur(28px) saturate(160%);
    -webkit-backdrop-filter:blur(28px) saturate(160%);
    border-top:1px solid var(--glass-border);
    transform:translate3d(0,-12px,0);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity var(--dur-med) var(--ease-soft), transform var(--dur-med) var(--ease-soft), visibility var(--dur-med);
    z-index:190;
  }
  .nav-links.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate3d(0,0,0);
  }
  .nav-links .nav-link{
    width:100%;
    padding:1.15rem .25rem;
    font-size:var(--fs-md);
    border-bottom:1px solid var(--glass-border);
    border-radius:0;
  }
  .nav-links .nav-item.has-mega{ border-bottom:1px solid var(--glass-border); }
  .nav-links .nav-item.has-mega .nav-link{ border-bottom:0; }
  /* The hover-driven mega panel doesn't apply on touch — Services becomes
     a plain link to the #services section on mobile/tablet. */
  .nav-links .mega-hit{ display:none; }

  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ min-height:340px; margin-top:var(--sp-6); }
  .viewport-card{ position:relative; width:100%; margin-inline:auto; }
  .analytics-card,.network-card{ display:none; }
  .hero-copy h1{ max-width:none; }

  .services-grid{ grid-template-columns:repeat(2,1fr); }

  .works-grid{ grid-template-columns:repeat(4,1fr); grid-auto-rows:20vw; }
  .work-item:nth-child(1){ grid-column:span 4; grid-row:span 3; }
  .work-item:nth-child(2){ grid-column:span 2; grid-row:span 2; }
  .work-item:nth-child(3){ grid-column:span 2; grid-row:span 2; }
  .work-item:nth-child(4){ grid-column:span 2; grid-row:span 2; }
  .work-item:nth-child(5){ grid-column:span 2; grid-row:span 2; }

  .about-grid{ grid-template-columns:1fr; }
  .stats-band{ grid-template-columns:repeat(2,1fr); }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

/* ---- Mobile (<=640px) -----------------------------------------------------*/
@media (max-width:640px){
  :root{ --nav-h:66px; --sp-9:3.5rem; --sp-8:2.5rem; }

  .section-head{ margin-bottom:var(--sp-6); }
  .hero{ min-height:auto; padding-block:calc(var(--nav-h) + var(--sp-6)) var(--sp-8); }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
  .hero-trust{ gap:var(--sp-5); }

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

  .works-filter{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:.4rem; }
  .works-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:44vw; gap:var(--sp-3); }
  .work-item, .work-item:nth-child(n){ grid-column:span 2 !important; grid-row:span 1 !important; }

  .about-values{ grid-template-columns:1fr; }
  .timeline{ padding-left:var(--sp-5); }

  .stats-band{ grid-template-columns:1fr 1fr; padding:var(--sp-5); }
  .stat-block .num{ font-size:var(--fs-xl); }

  .testi-slide{ padding:var(--sp-5); }
  .testi-arrow{ display:none; }

  .field-row{ grid-template-columns:1fr; }
  .contact-form{ padding:var(--sp-5); }
  .contact-info{ padding:var(--sp-5); }

  .footer-grid{ grid-template-columns:1fr; gap:var(--sp-5); }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }

  .back-to-top{ right:var(--sp-4); bottom:var(--sp-4); width:46px; height:46px; }
}