/* ==========================================================================
   KITE Nepal Technosis — Responsive Stylesheet (Mobile-first breakpoints)
   ========================================================================== */

/* ---------- Large tablets / small laptops ---------- */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .nav-links a { padding: 8px 10px; font-size: .85rem; }
}

/* ---------- Intermediate desktop scaling to fit all 14 links ---------- */
@media (min-width: 1251px) and (max-width: 1400px) {
  .nav-links a {
    padding: 6px 6px;
    font-size: 0.78rem;
  }
  .nav-inner {
    gap: 6px;
  }
  .brand {
    font-size: 1rem;
    gap: 8px;
  }
  .brand-mark {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
  }
  .nav-actions .btn {
    padding: 8px 16px;
    font-size: 0.8rem;
  }
}

/* ---------- Tablet & mobile nav breakpoint raised to 1250px to prevent overflow ---------- */
@media (max-width: 1250px) {
  .nav-toggle { display: grid; place-items: center; }
  .nav-links {
    position: fixed; top: 0; right: 0; height: 100dvh; width: min(320px, 84vw);
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--nav-bg); backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-left: 1px solid var(--border); padding: 96px 22px 30px;
    transform: translateX(100%); transition: transform .45s var(--ease); z-index: 1001;
    overflow-y: auto; box-shadow: var(--shadow-lg);
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { padding: 13px 16px; font-size: 1rem; border-radius: 12px; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(4,7,16,.5); opacity: 0; visibility: hidden; transition: opacity .4s; z-index: 1000; }
  .nav-backdrop.show { opacity: 1; visibility: visible; }

  .about-split, .contact-split { grid-template-columns: 1fr; }
  .about-media { order: -1; }
  .about-media .float-badge { left: 12px; bottom: 12px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  :root { --gutter: 20px; }
  .hero-content { padding-block: 100px; }
  .hero-cta .btn { flex: 1; justify-content: center; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .gallery-grid { grid-auto-rows: 160px; }
  .gallery-item.wide { grid-column: span 1; }
  .filter-bar { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; }
  .brand small { display: none; }
  .floating-social a { width: 40px; height: 40px; }
  .section-head p { font-size: .96rem; }
}

/* ---------- Small phones ---------- */
@media (max-width: 480px) {
  .hero-content h1 { font-size: 2.3rem; }
  .stat .num { font-size: 2.1rem; }
  .brand-mark { width: 38px; height: 38px; }
  .cta-band { padding: 34px 22px; }
  .service-card, .testi-card { padding: 24px 20px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; }
  .gallery-item.tall { grid-row: span 1; }
}

/* ---------- Print ---------- */
@media print {
  .navbar, .floating-social, #backTop, #loader, .footer { display: none !important; }
}