/* =========================================================================
   Tech Zone Solution — Responsive Stylesheet
   Breakpoints: 1080px (laptop) · 900px (tablet) · 680px (mobile) · 460px (small)
   ========================================================================= */

/* ---------- Large laptops ---------- */
@media (max-width: 1080px) {
  .g-4, .stats, .logo-grid, .process, .gallery-grid, .testi-grid, .contact-cards { grid-template-columns: repeat(2, 1fr); }
  .hero__floats { display: none; }
  .gallery-item--lg, .gallery-item--wide { grid-column: span 2; }
  .gallery-item--tall { grid-row: span 1; }
  .process__item::after { display: none; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 36px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  :root { --header-h: 68px; }

  /* Collapse desktop menu -> off-canvas drawer.

     IMPORTANT: .menu is a descendant of .header, and a backdrop-filter on an
     ancestor makes that ancestor the containing block for position:fixed
     children. With the blur left on, the drawer was being clamped to the
     header's own 68px box instead of the viewport, so it opened as an empty
     sliver on phones. Dropping the blur here restores viewport positioning
     (and is cheaper to paint on mobile). */
  .header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; z-index: 1200; }
  .header.is-stuck { background: #fff; }

  .nav-toggle { display: inline-flex; position: relative; z-index: 1250; }
  .menu {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 86vw); z-index: 1150;
    flex-direction: column; align-items: stretch; gap: 2px; background: #fff;
    padding: calc(var(--header-h) + 46px) 20px 40px; box-shadow: var(--sh-lg);
    overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    transform: translateX(100%); transition: transform .35s var(--ease);
    visibility: hidden;
  }
  .menu.is-open { transform: translateX(0); visibility: visible; }
  /* keep the closed drawer out of the tab order (children re-declare visibility) */
  .menu:not(.is-open) .dropdown, .menu:not(.is-open) .mega { visibility: hidden; }
  .menu > li > a { padding: 13px 14px; font-size: 1rem; border-radius: var(--r-sm); justify-content: space-between; }
  .menu > li { border-bottom: 1px solid var(--c-line); }
  .menu > li:last-child { border-bottom: 0; }

  /* Dropdowns become static accordions in the drawer */
  .menu .dropdown, .menu .mega {
    position: static !important; opacity: 1; visibility: visible;
    transform: none !important; box-shadow: none;
    border: 0; left: auto !important; right: auto !important;
    width: auto !important; min-width: 0 !important; max-width: 100% !important;
    padding: 0 0 0 12px; max-height: 0; overflow: hidden;
    transition: max-height .3s var(--ease), padding-bottom .3s var(--ease);
  }
  /* Desktop hover/focus rules are more specific than the reset above, so on
     touch devices a sticky :hover would re-apply translate(-50%) and knock the
     mega menu out of alignment until you tapped elsewhere. Neutralise them. */
  .menu > li:hover .dropdown, .menu > li:focus-within .dropdown,
  .menu > li:hover .mega, .menu > li:focus-within .mega { transform: none; }
  .menu > li.is-expanded .dropdown { max-height: 720px; padding-bottom: 8px; }
  .menu > li.is-expanded .mega { max-height: 1400px; padding-bottom: 8px; }
  /* tighter rhythm so more of a long submenu fits on one screen */
  .dropdown a, .mega__col a { padding: 9px 10px; }
  .mega__col + .mega__col { margin-top: 6px; }
  .mega__col h4 { margin-bottom: 4px; }
  .mega__grid { grid-template-columns: 1fr; gap: 4px; min-width: 0; }
  .mega__col, .dropdown a, .mega__col a { min-width: 0; }
  .dropdown a, .mega__col a { white-space: normal; overflow-wrap: anywhere; }
  .menu > li:hover .caret { transform: none; }
  .menu > li.is-expanded .caret { transform: rotate(180deg); }

  .nav-backdrop { position: fixed; inset: 0; background: rgba(4,14,30,.5); z-index: 1140; opacity: 0; visibility: hidden; transition: .3s; }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }

  body.nav-lock { overflow: hidden; }

  /* Layout */
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: -1; }
  .g-3 { grid-template-columns: repeat(2, 1fr); }
  .hero__stats { gap: 24px; }
  .footer__strip { grid-template-columns: 1fr; padding: 16px; }
  .footer__bottom { flex-direction: column; text-align: center; }

  .topbar__meta span:nth-child(n+3) { display: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 680px) {
  :root { --gutter: 20px; }

  .page-hero__art { width: 100%; opacity: .30; }
  .page-hero::before { background: linear-gradient(180deg, rgba(0,20,45,.93) 0%, rgba(0,32,64,.86) 60%, rgba(0,40,80,.78) 100%); }
  .hero__floats, .hero__cue { display: none; }
  .timeline { padding-left: 34px; }
  .timeline::before { left: 7px; transform: none; }
  .timeline__item, .timeline__item:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 30px 0; text-align: left; }
  .timeline__item::before, .timeline__item:nth-child(even)::before { left: -34px; right: auto; }
  .timeline__item::after { inset: -16px -16px 10px -16px; }
  .gallery-grid { grid-auto-rows: 220px; }
  .gallery-item--lg, .gallery-item--wide, .gallery-item--tall { grid-column: span 1; grid-row: span 1; }
  .g-2, .g-3, .g-4, .stats, .logo-grid, .process, .gallery-grid, .testi-grid, .field-row, .footer__top, .contact-cards, .footer__strip { grid-template-columns: 1fr; }

  .topbar { display: none; }
  .menu { padding-top: calc(var(--header-h) + 22px); }

  .hero__cta .btn, .cta-banner .btn { width: 100%; }
  .hero__cta, .cta-banner .btn-group { width: 100%; }
  .hero__stats { gap: 20px; }
  .hero__stat { min-width: 40%; }

  .section-head { margin-bottom: 36px; }
  .card, .vm-card, .form-card { padding: 24px; }

  .job { flex-direction: column; align-items: flex-start; }
  .job .btn { width: 100%; }

  .gallery-filters { gap: 8px; }
  .gallery-filters button { padding: 8px 15px; font-size: .82rem; }

  .lightbox__nav { width: 42px; height: 42px; }
  .lightbox__nav--prev { left: 10px; }
  .lightbox__nav--next { right: 10px; }
  .lightbox__close { top: 14px; right: 14px; }

  .floats { right: 14px; bottom: 14px; }
  .float-btn { width: 48px; height: 48px; }
  .has-floats .back-top { bottom: calc(14px + 3 * (48px + 12px)); }
  .back-top { right: 14px; }

  .product-card__foot { flex-direction: column; align-items: stretch; }
}

/* ---------- Small phones ---------- */
@media (max-width: 460px) {
  h1 { font-size: 2rem; }
  .nav__actions .btn { display: none; }   /* CTA lives in the drawer / floats instead */
  .nav { gap: 12px; }
  .brand__tag { display: none; }
  .hero__stat b { font-size: 1.6rem; }
  .footer__bottom-links { flex-direction: column; gap: 8px; }
  .cta-banner { padding: 32px 22px; }
}

/* ---------- Print ---------- */
@media print {
  .header, .topbar, .floats, .back-top, .footer, .scroll-progress, .preloader, .hero__dots { display: none !important; }
  body { color: #000; }
}