/* ================================================================
   KN Machine — Responsive Styles
   Breakpoints: 1024px (laptop/tablet), 768px (mobile)
   ================================================================ */

/* ---- Hamburger button (hidden on desktop) ---- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
  margin-left: 8px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--fg);
  transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ================================================================
   TABLET  ≤1024px
   ================================================================ */
@media (max-width: 1024px) {

  /* Shared chrome */
  .nav { padding: 16px 32px; }
  .nav-links { gap: 20px; font-size: 12px; }
  .page-title { font-size: 64px; }
  .page-header { padding: 64px 32px 48px; }
  .page-header::before { left: 32px; }
  section.block { padding: 64px 32px; }
  h2.section-h { font-size: 40px; }
  .cta-band { padding: 80px 32px; }
  .cta-band h3 { font-size: 44px; }
  footer.site-footer { padding: 48px 32px 24px; }

  /* Index */
  .hero { padding: 48px 32px 72px; }
  .hero h1 { font-size: 64px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .schematic { max-height: 300px; }
  .trust { grid-template-columns: repeat(3, 1fr); }
  .industries { grid-template-columns: repeat(2, 1fr); }
  .eq-grid { grid-template-columns: repeat(2, 1fr); }

  /* Equipment */
  .filter-bar { padding: 16px 32px; }
  .machines[data-layout="list"] .machine { padding: 14px 32px; gap: 16px; }
  .machines[data-layout="default"] .machine { padding: 16px 32px; gap: 24px; }
  .machines[data-layout="spec"] { padding: 24px 32px; }
  .machines[data-layout="spec"] { grid-template-columns: repeat(3, 1fr); }

  /* Quality */
  .two-col { gap: 32px; }
  .pipeline { flex-wrap: wrap; }
  .pipe-step { flex: 1 1 calc(33.33% - 2px); min-width: 0; }
  .pipe-step::after { display: none; }

  /* Quote */
  .quote-layout { padding: 24px 32px 32px; }

  /* About */
  .quality-section { padding: 64px 32px !important; gap: 48px !important; }
}


/* ================================================================
   MOBILE  ≤768px
   ================================================================ */
@media (max-width: 768px) {

  /* ---- Nav ---- */
  .nav {
    padding: 14px 20px;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0;
  }
  .nav-cta { margin-left: auto; gap: 10px; }
  .nav-links {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--line);
    margin-top: 10px;
    padding: 4px 0 0;
  }
  .nav.nav-open .nav-links { display: flex; }
  .nav-links a {
    padding: 12px 2px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    color: var(--fg-dim);
  }
  .nav-links a:last-child { border-bottom: none; }
  .nav-links a.active::after { display: none; }
  .nav-cta .phone { display: none; }
  .nav-toggle { display: flex; }

  /* ---- Shared typography & layout ---- */
  .page-title { font-size: 36px; letter-spacing: -0.025em; }
  .page-header { padding: 40px 20px 32px; }
  .page-header::before { left: 20px; }
  section.block { padding: 44px 20px; }
  h2.section-h { font-size: 28px; }

  .cta-band { grid-template-columns: 1fr; padding: 52px 20px; gap: 28px; }
  .cta-band h3 { font-size: 32px; }

  footer.site-footer { padding: 40px 20px 24px; font-size: 11px; }
  .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 16px; }
  .foot-col-title { font-size: 10px; margin-bottom: 10px; }
  .foot-col a { font-size: 11px; padding: 3px 0; }
  .foot-bottom { font-size: 10px; }

  /* ---- Index ---- */
  .hero { padding: 36px 20px 52px; }
  .hero h1 { font-size: 40px; }
  .hero .lede { font-size: 15px; }
  .schematic { max-height: 260px; }
  .trust { grid-template-columns: repeat(2, 1fr); }
  .trust-item { padding: 18px 14px; }
  .trust-label { font-size: 12px; }
  .cert-section { padding: 32px 20px 40px; }
  [data-cert-style="mono"] .cert-row,
  [data-cert-style="cards"] .cert-row { grid-template-columns: repeat(2, 1fr); }
  [data-cert-style="lockup"] .cert-row { flex-direction: column; padding: 20px; gap: 16px; }
  [data-cert-style="lockup"] .cert-item { border-right: none; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: 16px; }
  [data-cert-style="lockup"] .cert-item:last-child { border-bottom: none; padding-bottom: 0; }
  .industries { grid-template-columns: 1fr; }
  .ind-card { min-height: 160px; padding: 24px 20px; }
  .ind-title { font-size: 24px; }
  .eq-grid { grid-template-columns: 1fr; }

  /* ---- Equipment ---- */
  .filter-bar {
    padding: 12px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    top: 60px;
  }
  .filter-tabs { overflow-x: auto; width: 100%; padding-bottom: 2px; flex-wrap: nowrap; }
  .filter-tab { padding: 8px 14px; font-size: 10px; white-space: nowrap; }
  .machines[data-layout="default"] .machine {
    grid-template-columns: 72px 1fr;
    padding: 14px 20px;
    gap: 14px;
  }
  .machines[data-layout="list"] .machine {
    grid-template-columns: 1fr auto;
    padding: 14px 20px;
    gap: 8px;
  }
  .machines[data-layout="list"] .machine > *:not(.l-name):not(.l-arrow) { display: none; }
  .machines[data-layout="list"] .l-name .nm { font-size: 14px; }
  .machines[data-layout="spec"] {
    grid-template-columns: repeat(2, 1fr);
    padding: 16px 20px;
    gap: 10px;
  }

  /* ---- Quality ---- */
  .two-col {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  .two-col .label { position: static; }
  .two-col h2 { font-size: 32px !important; }
  .pipeline { flex-direction: column; overflow: visible; }
  .pipe-step { flex: none; border-right: none; border-bottom: 1px solid var(--line); }
  .pipe-step:last-child { border-bottom: none; }
  .pipe-step::after { display: none; }
  .pipe-step::before { right: 0; }
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .inspection-card { padding: 20px; }

  /* ---- Quote ---- */
  .quote-layout { padding: 20px 20px 32px; }
  [data-page="quote"] .page-header { padding: 36px 20px 24px; }
  [data-page="quote"] .page-title { font-size: 38px !important; }
  .row-2 { grid-template-columns: 1fr; }
  .row-3 { grid-template-columns: 1fr; }
  .submit-row { flex-direction: column; align-items: stretch; gap: 16px; }
  .submit-row .btn { text-align: center; justify-content: center; }
  .form-section-head h3 { font-size: 20px; }

  /* ---- Testimonials ---- */
  .quotes { grid-template-columns: 1fr; }
  .q-text { font-size: 18px; }
  .q-card { padding: 28px 20px; min-height: auto; }
  .q-attr { flex-direction: column; gap: 8px; }

  /* ---- About ---- */
  .quality-section { padding: 44px 20px !important; gap: 32px !important; }
}