/* Homepage mobile layout repair: loaded last to override legacy inline/grid rules. */
@media (max-width: 1023px) {
  html, body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: clip !important;
  }

  *, *::before, *::after { box-sizing: border-box; }
  img, video, svg { max-width: 100%; }

  .sx-header,
  .sx-mobile,
  #heroCarousel,
  #stats-section,
  .con02bg,
  .products-overview-section,
  .who-we-serve-section,
  #contact,
  .sx-footer {
    width: 100% !important;
    max-width: 100% !important;
  }

  .sx-nav {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    gap: 7px !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }
  .sx-brand { min-width: 0; }
  .sx-brand img { width: 92px !important; height: 34px !important; }
  .sx-tools { margin: 0 !important; padding: 4px 5px !important; gap: 1px !important; }
  .sx-tool { width: 30px !important; height: 30px !important; }
  .sx-toggle { width: 42px !important; height: 42px !important; padding: 9px !important; }

  #heroCarousel {
    height: 100svh !important;
    min-height: 650px !important;
    max-height: 920px;
  }
  #heroCarousel .carousel-slide > .bg-cover {
    transform: scale(1.035) !important;
    background-position: center center !important;
  }
  #heroCarousel .carousel-slide.sx-hero-active > .bg-cover {
    transform: scale(1) !important;
    transition: transform 6s ease-out !important;
  }
  #heroCarousel .carousel-slide > .relative {
    width: 100% !important;
    max-width: 100% !important;
    padding: 86px 22px 56px !important;
  }
  #heroCarousel h1 { font-size: clamp(2rem, 10vw, 3rem) !important; }
  #heroCarousel p { font-size: clamp(.88rem, 4vw, 1.05rem) !important; line-height: 1.5; }
  #heroCarousel .carousel-text > a,
  #heroCarousel .carousel-text.delay-2 a { width: 100%; max-width: 100%; }
  #heroCarousel .carousel-btn { width: 42px !important; height: 42px !important; }

  #stats-section { padding: 34px 0 !important; }
  #stats-section > .max-w-7xl { width: 100% !important; padding: 0 16px !important; }
  #stats-section .grid {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  #stats-section .stat-card {
    min-width: 0 !important;
    min-height: 126px !important;
    padding: 14px 7px !important;
    overflow: hidden;
  }
  #stats-section .stat-value {
    max-width: 100%;
    font-size: clamp(1rem, 5.4vw, 1.45rem) !important;
    white-space: normal !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere;
  }
  #stats-section .stat-card p {
    font-size: .58rem !important;
    line-height: 1.35 !important;
    letter-spacing: .035em !important;
  }

  .con02bg { padding: 32px 0 44px !important; }
  .con02bg .wapper1 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
  }
  .con02_list1 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
    margin: 12px 0 28px !important;
  }
  .con02_list1_lt,
  .con02_list1_rt { width: 100% !important; min-width: 0 !important; }
  .con02_list1 .tit1 .h2 { font-size: 1.75rem !important; }
  .con02_list1 .box1 .h4 { font-size: .94rem !important; line-height: 1.7 !important; }
  .con02_list1_rt .img { width: 100% !important; }
  #aboutVideo { width: 100% !important; aspect-ratio: 16 / 10 !important; }

  .con02_list3 { margin-top: 18px !important; }
  .con02_list3 ul {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
  }
  .con02_list3 li,
  .con02_list3 li a { width: 100% !important; min-width: 0 !important; }
  .con02_list3 .nr_box {
    display: grid !important;
    grid-template-columns: 42% minmax(0, 1fr) !important;
    min-height: 150px;
    align-items: stretch;
  }
  .con02_list3 .imgbg,
  .con02_list3 .img { height: 100% !important; }
  .con02_list3 img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .con02_list3 .txtbg { padding: 16px !important; display: flex; align-items: center; }
  .con02_list3 .txtbg .h2 { font-size: 1rem !important; line-height: 1.25 !important; }
  .con02_list3 .txtbg .h3 { font-size: .78rem !important; line-height: 1.45 !important; }
  .con02_list3 li a:active { transform: scale(.985) !important; }

  .products-overview-section > .max-w-7xl,
  .who-we-serve-section > .max-w-7xl { width: 100% !important; max-width: 100% !important; padding-inline: 16px !important; }
  .products-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .product-line-card { min-width: 0 !important; padding-inline: 10px !important; }

  .wa-contact-hub { right: 14px !important; bottom: max(14px, env(safe-area-inset-bottom)) !important; }
  .wa-contact-panel { right: 0 !important; width: min(260px, calc(100vw - 28px)) !important; }
}

@media (max-width: 390px) {
  .sx-brand img { width: 82px !important; }
  .sx-tools .sx-language { display: none !important; }
  #heroCarousel .carousel-slide > .relative { padding-inline: 18px !important; }
  .con02_list3 .nr_box { grid-template-columns: 38% minmax(0, 1fr) !important; }
}

@media (prefers-reduced-motion: reduce) {
  #heroCarousel .carousel-slide.sx-hero-active > .bg-cover { transition: none !important; }
}