/* ============================================
   responsive.css — All media queries (mobile-first + breakpoints)
   ============================================ */

/* ---------- 1280px : small desktop ---------- */
@media (max-width: 1280px) {
  .svc-strip { grid-template-columns: repeat(3, 1fr); }
  .industry-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .nav-menu { gap: 0; }
  .nav-link { padding: 10px 11px; font-size: .9rem; }
}

/* ---------- 1024px : tablet landscape ---------- */
@media (max-width: 1024px) {
  :root { --header-h: 68px; --gutter: 20px; }

  .nav-menu, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .mega-menu { display: none; }

  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding-bottom: 9rem; }
  .hero__sub { max-width: 100%; }
  .track-widget { max-width: 520px; }
  .hero__scroll { display: none; }

  .feature-grid, .value-grid, .office-grid, .team-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .split, .founder-card, .contact-grid, .quote-wrap, .locations-layout { grid-template-columns: 1fr; }
  .split-media { max-width: 560px; margin: 0 auto; }
  .founder-photo { max-width: 420px; margin: 0 auto; }
  .svc-tab, .svc-detail .svc-tab { grid-template-columns: 1fr; gap: 1.8rem; }
  .svc-detail:nth-child(even) .svc-tab__media { order: 0; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 34px 22px; }
  .steps::before { display: none; }
  .coverage-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 38px; }
  .toc ol { columns: 1; }
}

/* ---------- 768px : tablet portrait ---------- */
@media (max-width: 768px) {
  .topbar__tag { display: none; }
  .counters-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; }
  .hero__stats .container { grid-template-columns: repeat(2, 1fr); }
  .hero-stat:nth-child(3)::before { display: none; }
  .hero-stat { padding: 1.1rem .6rem; }

  /* Stats wrap into 2 rows on mobile, so keeping them absolutely positioned
     would make them taller than the reserved bottom padding and cover the
     tracking card. Move them back into normal document flow instead. */
  .hero {
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    padding-top: calc(var(--header-h) + var(--topbar-h) + 3rem);
    padding-bottom: 0;
  }
  .hero .container { flex: 0 0 auto; }
  .hero__stats {
    position: static;
    width: 100%;
    margin-top: 3rem;
    background: rgba(13,13,24,.82);
  }

  /* services strip → horizontal scroll */
  .svc-strip {
    display: flex; gap: 14px; overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 6px 4px 18px;
    margin: 0 -4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .svc-card { flex: 0 0 210px; scroll-snap-align: start; }

  .timeline::before { left: 12px; }
  .timeline__item, .timeline__item:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 34px 44px; }
  .timeline__item::before, .timeline__item:nth-child(even)::before { left: 2px; right: auto; }

  .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .transit-list { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-cta-band .container { justify-content: center; text-align: center; }
  .page-hero { padding-bottom: 3.6rem; }
}

/* ---------- 640px : large mobile ---------- */
@media (max-width: 640px) {
  .topbar__group .topbar-mail { display: none; }
  .feature-grid, .value-grid, .office-grid, .team-grid, .blog-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .steps::before {
    display: block; top: 6%; bottom: 6%; left: 38px; right: auto; width: 2.5px; height: auto;
    background: repeating-linear-gradient(180deg, var(--km-primary) 0 14px, transparent 14px 26px);
  }
  .step { display: flex; text-align: left; gap: 18px; align-items: flex-start; }
  .step__num { margin: 0; width: 76px; flex: 0 0 auto; }
  .form-grid { grid-template-columns: 1fr; }
  .checker form { flex-direction: column; }
  .checker input { border-radius: var(--radius); }
  .hero__cta .btn { width: 100%; }
  .track-widget form { flex-direction: column; }
  .float-card--tl { left: 6px; }
  .float-card--br { right: 6px; }
  .offer-badge { width: 88px; height: 88px; font-size: .75rem; top: 16px; right: 16px; }
  .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; }
  .cta-banner .hero__cta { flex-direction: column; align-items: stretch; }
  .founder-facts { grid-template-columns: 1fr; }
  .cert-badge { min-width: 0; width: 100%; }
}

/* ---------- 480px : small mobile ---------- */
@media (max-width: 480px) {
  :root { --gutter: 16px; }
  .topbar .btn { display: none; }
  .nav-logo { width: 158px; }
  .hero { min-height: auto; padding-bottom: 0; }
  .hero__stats { margin-top: 2.4rem; }
  .hero-stat strong { font-size: 1.35rem; }
  .hero-stat { padding: 1rem .5rem; }
  .hero-stat span { font-size: .76rem; }
  .industry-grid { grid-template-columns: 1fr; }
  .industry-card { height: 200px; }
  .track-widget { padding: 20px; }
  .float-btn { width: 48px; height: 48px; }
  .float-wa { right: 14px; bottom: 14px; }
  .float-call { left: 14px; bottom: 14px; }
  .float-top { right: 14px; bottom: 74px; }
  .cert-grid { gap: 10px; }
}

/* ---------- Print (quote pages) ---------- */
@media print {
  .site-header, .site-footer, .float-btn, .cookie-banner, .cursor-dot, .cursor-ring, .page-loader, .cta-banner, .insight-section { display: none !important; }
  body { color: #000; }
  .section { padding: 1.2rem 0; }
  .quote-panel, .contact-form-panel { box-shadow: none; border: 1px solid #ccc; }
}