/* ==========================================================================
   M/S Harshit IT Solution — Responsive layer
   Breakpoints: 1080px (small laptop) · 900px (tablet) · 640px (phone) · 400px
   Mobile navigation lives here because it is purely a viewport concern.
   ========================================================================== */

/* ---------- ≤ 1080px : small laptops ------------------------------------ */
@media (max-width: 1460px) {
  .header__cta { display: none; }
}

@media (max-width: 1080px) {
  :root { --section-y: 62px; }

  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__grid { gap: 40px; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1.4fr; }
  .footer__about { grid-column: 1 / -1; }
}

/* ---------- ≤ 1280px : tablet + mobile nav -------------------------------- */
@media (max-width: 1280px) {
  .nav-toggle { display: inline-flex; }

  .header__inner { min-height: 68px; }

  /* Collapsed panel; opened by main.js toggling .is-open */
  .nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px var(--gutter) 20px;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-raised);
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
  }
  .nav.is-open { display: flex; }
  .nav__link { padding: 13px 12px; font-size: 1rem; border-radius: var(--r-sm); }
  .nav__link[aria-current="page"] { background: var(--blue-050); box-shadow: none; }

  .site-header { position: sticky; }
  .header__inner { position: relative; }
  .header__cta { display: none; }

  .hero { padding-block: 56px 64px; min-height: 0; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .hero__panel { order: 2; }
  .hero__stats { grid-template-columns: repeat(auto-fit, minmax(150px, auto)); }

  .split,
  .grid--2,
  .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .split { gap: 30px; }
  .split--reverse .split__media { order: 0; }
  .split__media--photo { min-height: 260px; }

  .topbar__inner { justify-content: center; text-align: center; }
  .topbar__note { width: 100%; }

  .cta-band__inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- ≤ 640px : phones -------------------------------------------- */
@media (max-width: 640px) {
  :root { --gutter: 18px; --section-y: 48px; }

  body { font-size: .98rem; }

  .grid--4 { grid-template-columns: minmax(0, 1fr); }

  .brand__logo { height: 44px; width: 44px; }

  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
  .btn--sm { width: auto; }

  .hero__stats { gap: 16px 28px; }
  .hero__panel { padding: 22px; }

  .form-card { padding: 22px; }
  .card, .info-tile { padding: 20px; }
  .quote { padding: 20px; }

  .step { padding-left: 52px; }

  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .footer__bottom { margin-top: 34px; }

  .float-actions { right: 12px; bottom: 12px; }
  .float-actions a { width: 46px; height: 46px; }
  .fa-services { width: 46px; height: 46px; }
  .services-popup { right: 12px; bottom: 86px; }

  .page-head { padding-block: 38px; }
  .map-frame iframe { min-height: 280px; }
}

/* ---------- ≤ 400px : compact phones ------------------------------------ */
@media (max-width: 400px) {
  .brand__logo { height: 38px; width: 38px; }
  .topbar { font-size: .8rem; }
  .chip { font-size: .8rem; padding: 6px 11px; }
}

/* ---------- Print -------------------------------------------------------- */
@media print {
  .topbar, .site-header, .float-actions, .services-popup, .cta-band, .btn-row { display: none !important; }
  body { color: #000; }
  .hero, .page-head, .site-footer, .section--navy { background: #fff !important; color: #000 !important; }
  .hero h1, .page-head h1, .site-footer h3 { color: #000 !important; }
}