/* Landing-specific responsive overrides.
 * Components.jsx uses inline styles for the desktop layout. These rules
 * override the layout-critical properties at smaller viewports using
 * !important — the only reliable way to beat React's inline-style
 * specificity without restructuring every component to className-only.
 *
 * Breakpoints:
 *   ≤640px    phone
 *   641-1024  tablet
 *   ≥1025     desktop (no overrides — defaults rule)
 */

/* Anchor scroll-margin keeps section headings clear of the sticky header */
section[id] { scroll-margin-top: 72px; }

/* ── Tablet (641-1024) ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ks-header-inner { padding: 12px 24px !important; gap: 16px !important; }
  .ks-lang { display: none !important; }
  .ks-nav { gap: 2px !important; }
  .ks-nav a { font-size: 13px !important; padding: 6px 8px !important; }

  .ks-hero-inner { padding: 72px 24px 64px !important; }
  .ks-hero-title { font-size: 56px !important; }
  .ks-hero-stats { gap: 40px !important; }

  .ks-section { padding: 72px 24px !important; }
  .ks-h2 { font-size: 36px !important; }
  .ks-h2-light { font-size: 36px !important; }

  .ks-process { grid-template-columns: 1fr 1fr !important; gap: 32px 28px !important; }

  .ks-quote-text { font-size: 32px !important; }

  .ks-contact { padding: 72px 24px !important; }

  .ks-footer-inner { padding: 40px 24px 24px !important; gap: 32px !important; }
}

/* ── Phone (≤640) ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ks-header-inner {
    grid-template-columns: auto 1fr !important;
    padding: 10px 16px !important;
    gap: 8px !important;
  }
  .ks-nav { display: none !important; }
  .ks-header-right { gap: 0 !important; justify-content: flex-end !important; }

  .ks-hero-inner { padding: 48px 16px 56px !important; }
  .ks-hero-title { font-size: 36px !important; line-height: 1.1 !important; }
  .ks-hero-lead { font-size: 16px !important; }
  .ks-hero-ctas { flex-wrap: wrap !important; gap: 8px !important; }
  .ks-hero-ctas > button { width: 100% !important; justify-content: center !important; }
  .ks-hero-stats {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 40px !important;
    padding-top: 24px !important;
  }

  .ks-section { padding: 56px 16px !important; }
  .ks-h2 { font-size: 28px !important; }
  .ks-h2-light { font-size: 28px !important; }

  .ks-services-grid { grid-template-columns: 1fr !important; }
  .ks-services-grid > article {
    border-right: 0 !important;
    padding: 24px 20px 22px !important;
  }
  .ks-services-grid > article:last-child { border-bottom: 0 !important; }

  .ks-process { grid-template-columns: 1fr !important; gap: 24px !important; }

  .ks-quote-block { padding: 16px 0 !important; }
  .ks-quote-mark { font-size: 64px !important; margin-bottom: -12px !important; }
  .ks-quote-text { font-size: 22px !important; line-height: 1.3 !important; }

  .ks-contact { padding: 56px 16px !important; }
  .ks-contact-lead { font-size: 16px !important; }
  .ks-form { flex-direction: column !important; gap: 8px !important; }
  .ks-form > * { width: 100% !important; }
  .ks-form-submit { justify-content: center !important; }

  .ks-footer-inner {
    grid-template-columns: 1fr !important;
    padding: 32px 16px 20px !important;
    gap: 24px !important;
  }
  .ks-footer-cols { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
  .ks-footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 14px 16px !important;
  }
}

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}