/* 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;
  }
}