/* =========================================================
   KINTEK MOBILE RESPONSIVE FIX
   Loaded after page CSS so it can correct all pages on phones.
========================================================= */

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

img, video, canvas, iframe, svg {
  max-width: 100%;
}

/* Desktop header spacing/alignment */
@media (min-width: 901px) {
  #navbar {
    height: 76px !important;
    min-height: 76px !important;
    padding: 0 clamp(22px, 4vw, 64px) !important;
    gap: 22px !important;
  }

  #navbar .nav-logo {
    flex: 0 0 auto !important;
    min-width: 185px !important;
    gap: 10px !important;
  }

  #navbar .nav-logo img {
    height: 38px !important;
    max-height: 38px !important;
    width: auto !important;
  }

  #navbar .nav-logo-text {
    white-space: nowrap !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.055em !important;
  }

  #navbar .nav-links {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(8px, 1.2vw, 18px) !important;
  }

  #navbar .nav-links a {
    padding: 8px 8px !important;
    font-size: clamp(0.74rem, 0.78vw, 0.86rem) !important;
    white-space: nowrap !important;
  }

  #navbar .nav-right {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
}

/* Tablet: hide crowded desktop links earlier */
@media (max-width: 1100px) and (min-width: 901px) {
  #navbar {
    padding-inline: 22px !important;
    gap: 14px !important;
  }

  #navbar .nav-logo {
    min-width: 160px !important;
  }

  #navbar .nav-logo img {
    height: 34px !important;
  }

  #navbar .nav-links {
    gap: 4px !important;
  }

  #navbar .nav-links a {
    padding-inline: 7px !important;
    font-size: 0.74rem !important;
  }

  #navbar .nav-cta {
    padding-inline: 13px !important;
    font-size: 0.72rem !important;
  }
}

/* Phone header */
@media (max-width: 900px) {
  :root { --nav-h: 68px; }

  #navbar {
    height: var(--nav-h) !important;
    min-height: var(--nav-h) !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  #navbar .nav-logo {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 96px) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  #navbar .nav-logo img {
    height: 32px !important;
    max-height: 32px !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }

  #navbar .nav-logo-text {
    font-size: 0.78rem !important;
    letter-spacing: 0.035em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #navbar .nav-links {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #navbar .nav-right {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  #navbar .nav-right .nav-cta {
    display: none !important;
  }

  #navbar .theme-toggle,
  #navbar .hamburger {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    flex: 0 0 40px !important;
  }

  #navbar .hamburger {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
  }

  #navbar .hamburger span {
    width: 20px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: currentColor !important;
  }

  .mobile-menu {
    position: fixed !important;
    top: var(--nav-h) !important;
    left: 0 !important;
    right: 0 !important;
    max-height: calc(100dvh - var(--nav-h)) !important;
    overflow-y: auto !important;
    padding: 14px 18px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    z-index: 9998 !important;
    transform: translateY(-120%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .mobile-menu.open {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .mobile-menu a {
    width: 100% !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 13px 4px !important;
    font-size: 0.98rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    border-radius: 0 !important;
    transform: none !important;
  }
}

/* Global phone layout corrections */
@media (max-width: 760px) {
  body {
    font-size: 15.5px;
  }

  main,
  .page-body,
  .kx-home,
  .kt-about-page,
  .kt-svc-page,
  .kt-hiw-page,
  .kt-ind-page,
  .kt-price-page,
  .kt-res-page,
  .kt-contact-page {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding-top: var(--nav-h, 68px) !important;
  }

  .container,
  .kx-container,
  .kt-about-container,
  .kt-svc-container,
  .kt-hiw-container,
  .kt-ind-container,
  .kt-price-container,
  .kt-res-container,
  .kt-contact-container,
  .footer-inner,
  .footer-bottom {
    width: min(100% - 28px, 1180px) !important;
    max-width: calc(100% - 28px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  section,
  .section,
  .kx-section,
  .kt-about-section,
  .kt-svc-section,
  .kt-hiw-steps,
  .kt-hiw-overview,
  .kt-hiw-journey,
  .kt-ind-quick,
  .kt-ind-tabs,
  .kt-ind-mix,
  .kt-price-hero,
  .kt-packages-section,
  .kt-comparison-section,
  .kt-faq-section,
  .kt-res-topics,
  .kt-res-articles,
  .kt-contact-section {
    padding-top: 54px !important;
    padding-bottom: 54px !important;
  }

  .kx-media-hero,
  .kt-about-hero,
  .kt-svc-hero,
  .kt-hiw-hero,
  .kt-ind-hero,
  .kt-price-hero,
  .kt-res-hero,
  .kt-contact-hero {
    min-height: auto !important;
    margin-top: 0 !important;
    padding-top: 58px !important;
    padding-bottom: 62px !important;
  }

  .kx-media-hero-grid,
  .kx-split,
  .kx-grid.two,
  .kx-grid.three,
  .kx-grid.four,
  .kx-process-row,
  .kx-cta-content,
  .kt-about-story-grid,
  .kt-about-copy-grid,
  .kt-about-mv-grid,
  .kt-values-grid,
  .kt-model-clean,
  .kt-model-flow,
  .kt-group-grid,
  .kt-svc-item,
  .kt-hiw-step,
  .kt-hiw-overview-grid,
  .kt-ind-panel,
  .kt-ind-mix-grid,
  .kt-packages-grid,
  .kt-res-topics-grid,
  .kt-res-grid,
  .kt-contact-layout,
  .kt-form-row,
  .why-grid,
  .services-grid,
  .pricing-grid,
  .blog-grid,
  .values-grid,
  .stats-row,
  .footer-inner,
  .footer-nav {
    grid-template-columns: 1fr !important;
  }

  .kx-grid,
  .kx-process-row,
  .kt-about-stats,
  .kt-ind-quick-grid,
  .kt-price-pills,
  .kt-res-pills,
  .kt-contact-pills {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .kx-media-hero-title,
  .kt-about-title,
  .kt-svc-hero h1,
  .kt-hiw-hero h1,
  .kt-ind-hero h1,
  .kt-price-hero h1,
  .kt-res-hero h1,
  .kt-contact-hero h1,
  .section-title,
  .kt-about-section-title,
  .kt-price-section-title,
  .kt-res-section-title {
    font-size: clamp(2rem, 10vw, 3.05rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.045em !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .kx-media-hero-lead,
  .kx-lead,
  .section-sub,
  .kt-about-lead,
  .kt-svc-hero p,
  .kt-hiw-hero p,
  .kt-ind-hero p,
  .kt-price-hero p,
  .kt-res-hero p,
  .kt-contact-hero p,
  .kt-price-section-lead,
  .kt-res-section-lead {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    max-width: 100% !important;
  }

  .kx-actions,
  .kx-cta-actions,
  .kt-about-btns,
  .kt-svc-actions,
  .kt-hiw-actions,
  .kt-hiw-cta-actions,
  .kt-ind-actions,
  .kt-ind-cta-actions,
  .kt-price-actions,
  .kt-price-cta-actions,
  .kt-res-actions,
  .kt-res-cta-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .kx-btn,
  .btn-primary,
  .btn-outline,
  .kt-about-btn,
  .kt-svc-btn,
  .kt-hiw-btn,
  .kt-ind-btn,
  .kt-price-btn,
  .kt-res-btn,
  .kt-form-submit {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 48px !important;
  }

  .kx-card,
  .kt-about-copy-card,
  .kt-about-mv-card,
  .kt-value-card,
  .kt-group-card,
  .kt-model-flow-card,
  .kt-svc-nav-btn,
  .kt-svc-item,
  .kt-hiw-step-content,
  .kt-hiw-img-card,
  .kt-hiw-journey-card,
  .kt-ind-quick-card,
  .kt-ind-panel,
  .kt-ind-mix-card,
  .kt-pkg-card,
  .kt-res-topic-card,
  .kt-res-card,
  .kt-form-card,
  .kt-next-steps,
  .card,
  .why-card,
  .service-card,
  .pricing-card,
  .blog-card,
  .value-card {
    max-width: 100% !important;
  }

  .kx-image-card img,
  .why-icon,
  .service-icon,
  .kt-svc-img,
  .kt-hiw-img-card,
  .kt-ind-img-card,
  .kt-about-mv-image {
    min-height: 220px !important;
    height: auto !important;
  }

  .kt-svc-img img,
  .kt-hiw-img-card img,
  .kt-ind-img-card img,
  .kt-about-mv-image img {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 220px !important;
    object-fit: cover !important;
  }

  .kt-svc-nav {
    position: relative !important;
    top: auto !important;
    padding: 20px 0 !important;
  }

  .kt-svc-nav-grid,
  .kt-ind-tabs-list,
  .kt-res-filter-bar {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
    scroll-snap-type: x mandatory !important;
  }

  .kt-svc-nav-btn,
  .kt-ind-tab,
  .kt-res-filter {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    scroll-snap-align: start !important;
  }

  .kt-table-wrap,
  .kt-price-table,
  table {
    max-width: 100% !important;
  }

  .kt-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .kt-price-table {
    min-width: 680px !important;
  }

  .footer-bottom {
    padding-inline: 0 !important;
    align-items: flex-start !important;
  }

  .footer-bottom-links {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 420px) {
  #navbar .nav-logo img {
    height: 30px !important;
    max-height: 30px !important;
  }

  #navbar .nav-logo-text {
    font-size: 0.72rem !important;
  }

  #navbar .theme-toggle,
  #navbar .hamburger {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    flex-basis: 38px !important;
  }

  .kx-media-hero-title,
  .kt-about-title,
  .kt-svc-hero h1,
  .kt-hiw-hero h1,
  .kt-ind-hero h1,
  .kt-price-hero h1,
  .kt-res-hero h1,
  .kt-contact-hero h1 {
    font-size: clamp(1.85rem, 11vw, 2.65rem) !important;
  }
}