/* Mobile layout repair layer. Desktop remains controlled by index CSS + enhance CSS. */
@media (max-width: 820px) {
  html,
  body,
  #root {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    scroll-snap-type: none !important;
  }

  body {
    min-width: 0;
    -webkit-text-size-adjust: 100%;
  }

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

  .snap-root,
  .snap-section {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    scroll-snap-align: none !important;
  }

  .nav {
    height: 62px !important;
    padding: 0 16px !important;
    gap: 10px;
  }

  .brand {
    min-width: 0;
    max-width: calc(100vw - 86px);
  }

  .brand-mark {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px;
  }

  .brand-cn {
    font-size: 12px !important;
    line-height: 1.25 !important;
    white-space: normal;
  }

  .brand-en {
    display: none !important;
  }

  .menu-toggle {
    flex: 0 0 40px;
    width: 40px !important;
    height: 40px !important;
  }

  .menu {
    left: 12px !important;
    right: 12px !important;
    top: 62px !important;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 18px 42px rgba(0,0,0,.28);
  }

  .menu button {
    height: 44px !important;
    line-height: 44px !important;
    font-size: 13px !important;
  }

  .hero {
    height: auto !important;
    min-height: 100svh !important;
    overflow: hidden;
  }

  .hero:before {
    background: linear-gradient(180deg, rgba(4,12,24,.9), rgba(4,12,24,.68) 48%, rgba(4,12,24,.92));
  }

  .slide-bg {
    background-position: var(--hero-mobile-position, center center) !important;
  }

  .content {
    height: auto !important;
    min-height: calc(100svh - 128px) !important;
    padding: 96px 20px 160px !important;
    align-items: center !important;
  }

  .copy {
    max-width: 100%;
  }

  .eyebrow {
    font-size: 10px !important;
    letter-spacing: 2px !important;
    margin-bottom: 16px !important;
  }

  .title {
    font-size: clamp(30px, 9vw, 40px) !important;
    line-height: 1.16 !important;
    letter-spacing: .2px !important;
  }

  .subtitle {
    margin-top: 12px !important;
    font-size: clamp(14px, 4.4vw, 18px) !important;
    line-height: 1.45 !important;
    letter-spacing: 1.2px !important;
  }

  .desc {
    margin-top: 18px !important;
    font-size: 13px !important;
    line-height: 1.75 !important;
    color: rgba(255,255,255,.78) !important;
  }

  .actions {
    margin-top: 22px !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 10px !important;
  }

  .btn {
    width: auto !important;
    min-width: 138px;
    height: 42px !important;
    padding: 0 18px !important;
    font-size: 12px !important;
  }

  .hero-dots {
    right: 18px !important;
    top: auto !important;
    bottom: 152px !important;
    transform: none !important;
    flex-direction: row !important;
  }

  .hero-dots button.active {
    width: 26px !important;
    height: 7px !important;
  }

  .bottom-lines {
    left: 20px !important;
    bottom: 132px !important;
  }

  .stats {
    position: absolute !important;
    height: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .stat {
    min-height: 64px !important;
    padding: 12px 20px !important;
    align-items: center !important;
  }

  .stat-num {
    font-size: 22px !important;
  }

  .stat-num.compact {
    font-size: 13px !important;
  }

  .stat-label {
    font-size: 10px !important;
    margin-top: 5px !important;
  }

  .section,
  .services-section,
  .workshop-section,
  .industries-section,
  .certs-section,
  .contact-section {
    padding: 72px 20px !important;
    min-height: 0 !important;
    display: block !important;
  }

  .section-head,
  .services-header,
  .workshop-header,
  .certs-header,
  .contact-header {
    display: block !important;
    margin-bottom: 24px !important;
  }

  .section-title,
  .services-header .section-title,
  .workshop-header .section-title,
  .industries-section .section-title {
    font-size: clamp(26px, 7.6vw, 34px) !important;
    line-height: 1.25 !important;
    margin-bottom: 14px !important;
  }

  .section-note,
  .services-note,
  .workshop-note,
  .certs-note,
  .contact-note,
  .industries-lead,
  .contact-lead {
    max-width: 100% !important;
    text-align: left !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
  }

  .about-main,
  .certs-layout,
  .contact-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .about-photo {
    height: 230px !important;
    border-radius: 12px;
  }

  .year-card {
    width: 92px !important;
    height: 92px !important;
    right: 10px !important;
    bottom: -18px !important;
  }

  .info-row {
    grid-template-columns: 92px 1fr !important;
    gap: 12px !important;
  }

  .service-stage {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 12px;
  }

  .service-list {
    border-right: 0 !important;
  }

  .service-tab {
    height: auto !important;
    min-height: 48px !important;
    grid-template-columns: 30px 24px minmax(0, 1fr) 34px !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .service-tab span:nth-child(3) {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.35;
  }

  .service-detail,
  .service-visual {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border-right: 0 !important;
  }

  .service-detail {
    padding: 30px 20px 24px !important;
  }

  .service-detail .big-num {
    top: 18px !important;
    left: 20px !important;
    font-size: 40px !important;
  }

  .service-detail-content {
    padding-top: 48px !important;
  }

  .service-detail h3 {
    font-size: 20px !important;
  }

  .service-detail p {
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
  }

  .service-tags span {
    height: auto !important;
    min-height: 28px;
    white-space: normal;
  }

  .service-visual,
  .service-visual.single-mode {
    min-height: 240px !important;
  }

  .service-single-image {
    position: relative !important;
    display: block !important;
    min-height: 240px;
  }

  .service-single-image img {
    min-height: 240px;
  }

  .machine-grid {
    height: auto !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    gap: 4px !important;
  }

  .machine-card,
  .machine-card.large {
    height: 210px !important;
    grid-row: auto !important;
  }

  .workshop-grid,
  .industry-strip,
  .industry-cards,
  .cert-grid,
  .process-line {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .workshop-card,
  .workshop-card.wide {
    display: block !important;
    grid-column: auto !important;
    min-height: 210px !important;
  }

  .workshop-card.wide .workshop-img-half {
    min-height: 210px !important;
  }

  .workshop-card.wide .workshop-img-half + .workshop-img-half {
    display: none !important;
  }

  .industry-strip {
    height: auto !important;
  }

  .industry-img-placeholder {
    height: 72px !important;
    border-right: 0 !important;
  }

  .industry-card,
  .cert-card {
    min-height: 0 !important;
    padding: 22px !important;
  }

  .key-project,
  .brand-project,
  .advantage-item {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .promise-band,
  .final-slogan {
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding: 32px 20px !important;
    min-height: 0 !important;
    display: block !important;
  }

  .promise-band h3,
  .final-slogan h3 {
    font-size: 22px !important;
  }

  .promise-keywords {
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-top: 18px;
  }

  .contact-people,
  .contact-box {
    width: 100%;
  }

  .person-row {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    padding: 18px !important;
  }

  .person-phone a {
    font-size: 15px !important;
    overflow-wrap: anywhere;
  }

  .contact-box {
    padding: 22px !important;
  }

  .contact-row {
    grid-template-columns: 38px minmax(0, 1fr) !important;
  }

  .contact-value {
    overflow-wrap: anywhere;
  }

  .site-footer {
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding: 28px 20px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    text-align: left !important;
  }

  .footer-badges {
    flex-wrap: wrap;
  }

  .footer-copy {
    text-align: left !important;
  }

  .floating-support {
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    align-items: flex-end !important;
    pointer-events: none;
  }

  .support-trigger,
  .support-panel {
    pointer-events: auto;
  }

  .support-trigger {
    width: 62px !important;
    height: 56px !important;
  }

  .support-panel {
    width: 100% !important;
    max-height: calc(100svh - 96px) !important;
    border-radius: 12px 12px 0 0;
  }

  .service-card,
  .quote-card {
    padding: 20px !important;
  }

  .quote-card .btn {
    width: 100% !important;
  }
}

@media (max-width: 390px) {
  .title { font-size: 29px !important; }
  .subtitle { font-size: 14px !important; }
  .actions { flex-direction: column !important; align-items: flex-start !important; }
  .btn { width: 168px !important; }
  .stat { padding: 10px 14px !important; }
  .service-tab { grid-template-columns: 26px 22px minmax(0, 1fr) 26px !important; }
}