/* Mobile and tablet overrides for the Yipin Health static site. */

@media (max-width: 1024px) {
  :root {
    --mobile-header: 64px;
    --mobile-gutter: clamp(18px, 5vw, 32px);
    --mobile-section: clamp(44px, 9vw, 72px);
    --mobile-ink: #272727;
    --mobile-muted: #6c6256;
    --mobile-paper: #f7f3ef;
    --mobile-line: rgba(39, 39, 39, 0.16);
    --mobile-accent: #b8976b;
  }

  html {
    font-size: 16px !important;
    overflow-x: hidden;
    scroll-padding-top: calc(var(--mobile-header) + env(safe-area-inset-top));
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-width: 0 !important;
    overflow-x: hidden;
    background: var(--mobile-paper) !important;
    color: var(--mobile-ink) !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

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

  img,
  video {
    height: auto;
  }

  video {
    background: #111;
  }

  p,
  li,
  .about-text,
  .about-text p,
  .service-intro p,
  .project-desc,
  .article .content p,
  .value-card .v-desc,
  .sf-card .sf-desc,
  .service-card .info .desc,
  .contact-info .info-item .val {
    font-size: clamp(15px, 3.7vw, 17px) !important;
    line-height: 1.82 !important;
    letter-spacing: 0.02em !important;
    color: #4a4035;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  h1,
  h2,
  h3,
  .section-title h2,
  .page-banner .title-box h1,
  .about-hero .text h1,
  .article h1 {
    max-width: 100%;
    text-wrap: balance;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .f_14,
  .f_16 {
    font-size: 14px !important;
  }

  .f_18,
  .f_20,
  .f_22,
  .f_24,
  .f_26 {
    font-size: clamp(16px, 4.2vw, 19px) !important;
  }

  .f_32,
  .f_34,
  .f_36,
  .f_38,
  .f_40 {
    font-size: clamp(20px, 5.7vw, 28px) !important;
  }

  .f_48,
  .f_50,
  .f_56,
  .f_64,
  .f_76,
  .f_80,
  .f_96,
  .f_100,
  .f_128 {
    font-size: clamp(28px, 9vw, 46px) !important;
    line-height: 1.16 !important;
  }

  body.navopen {
    overflow: hidden !important;
  }

  .inline-nav,
  .floating-menu {
    display: none !important;
  }

  body:has(.pheader) .header,
  body:has(.pheader) .nav {
    display: none !important;
  }

  body:not(:has(.pheader)) .header {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(var(--mobile-header) + env(safe-area-inset-top)) !important;
    padding: env(safe-area-inset-top) var(--mobile-gutter) 0 !important;
    z-index: 1200 !important;
    background: rgba(255, 253, 249, 0.98) !important;
    border-bottom: 1px solid rgba(39, 39, 39, 0.08);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.05) !important;
    color: #272727 !important;
    mix-blend-mode: normal !important;
  }

  body:not(:has(.pheader)) .header .box {
    width: 100% !important;
    height: var(--mobile-header) !important;
    min-height: var(--mobile-header) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  body:not(:has(.pheader)) .header .box .logo {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    pointer-events: auto !important;
    mix-blend-mode: normal !important;
  }

  body:not(:has(.pheader)) .header .box .logo img {
    width: auto !important;
    height: 34px !important;
    max-height: 38px !important;
    object-fit: contain !important;
    filter: brightness(0) saturate(100%) !important;
  }

  body:not(:has(.pheader)) .navbar-toggle {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
    margin-right: -8px !important;
  }

  body:not(:has(.pheader)) .navbar-toggle span {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    margin: 4px 0 !important;
    background: #272727 !important;
    box-shadow: none !important;
  }

  body:not(:has(.pheader)) .nav {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1190 !important;
    width: 100% !important;
    height: 100svh !important;
    padding: calc(var(--mobile-header) + env(safe-area-inset-top) + 8px) var(--mobile-gutter) max(28px, env(safe-area-inset-bottom)) !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    background: #f7f3ef !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body:not(:has(.pheader)).navopen .nav {
    display: flex !important;
  }

  body:not(:has(.pheader)) .nav .links {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    text-align: left !important;
  }

  body:not(:has(.pheader)) .nav .links .item {
    width: 100% !important;
    border-bottom: 1px solid var(--mobile-line);
    margin: 0 !important;
  }

  body:not(:has(.pheader)) .nav .links .item a {
    min-height: 48px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    color: #272727 !important;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
  }

  body:not(:has(.pheader)) .nav .links .item .a1 {
    min-width: 0 !important;
    line-height: 1.45 !important;
  }

  body:not(:has(.pheader)) .nav .links .item .pList {
    padding: 0 0 10px 14px !important;
    border-left: 1px solid rgba(39, 39, 39, 0.13);
  }

  body:not(:has(.pheader)) .nav .links .item .pList a {
    min-height: 44px !important;
    font-size: 15px !important;
    color: #62584b !important;
    letter-spacing: 0.04em !important;
  }

  .pheader {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(var(--mobile-header) + env(safe-area-inset-top)) !important;
    padding-top: env(safe-area-inset-top);
    z-index: 1200 !important;
    background: rgba(255, 253, 249, 0.98) !important;
    border-bottom: 1px solid rgba(39, 39, 39, 0.08);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.05) !important;
  }

  .pheader .menu {
    width: 100% !important;
    height: var(--mobile-header) !important;
    min-height: var(--mobile-header) !important;
    padding: 0 var(--mobile-gutter) !important;
    background: transparent !important;
  }

  .pheader .menu .l a {
    margin-left: 0 !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .pheader .menu .l a img {
    width: auto !important;
    height: 34px !important;
    max-height: 38px !important;
    object-fit: contain !important;
  }

  .pheader .menu .l a p {
    display: none !important;
  }

  .pheader .menu .navbox {
    width: 44px !important;
    height: 44px !important;
    margin-right: -8px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0 !important;
    touch-action: manipulation;
  }

  .pheader .menu .navbox .line {
    width: 24px !important;
    height: 2px !important;
    margin: 4px 0 !important;
    background: #272727 !important;
  }

  .pheader .menu .activeBox {
    transform: none !important;
  }

  .pheader .menu .activeBox .line:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px) !important;
  }

  .pheader .menu .activeBox .line:nth-child(2) {
    opacity: 0 !important;
    transform: translateX(16px) !important;
  }

  .pheader .menu .activeBox .line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px) !important;
  }

  .menuList {
    position: fixed !important;
    top: calc(var(--mobile-header) + env(safe-area-inset-top)) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100svh - var(--mobile-header) - env(safe-area-inset-top)) !important;
    max-height: calc(100svh - var(--mobile-header) - env(safe-area-inset-top)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    z-index: 1190 !important;
    background: #f7f3ef !important;
    padding: 6px 0 max(28px, env(safe-area-inset-bottom)) !important;
    box-shadow: inset 0 1px 0 rgba(39, 39, 39, 0.08), 0 20px 40px rgba(0, 0, 0, 0.16);
  }

  .menuList .lan {
    display: none !important;
  }

  .menuList .item {
    padding: 0 var(--mobile-gutter) !important;
    background: transparent !important;
    border-bottom: 1px solid var(--mobile-line) !important;
  }

  .menuList .item > a,
  .menuList .item .tb,
  .menuList .item .tb a,
  .menuList .item .types_top a {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    color: #272727 !important;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
  }

  .menuList .item .tb {
    width: 100%;
    justify-content: space-between !important;
  }

  .menuList .item .tb img,
  .menuList .item a img {
    width: 18px !important;
    height: 18px !important;
    right: 0 !important;
    top: 50% !important;
  }

  .menuList .item .types_top {
    padding: 0 0 10px 14px !important;
    border-left: 1px solid rgba(39, 39, 39, 0.13);
  }

  .menuList .item .types_top a {
    min-height: 44px !important;
    margin-top: 0 !important;
    color: #62584b !important;
    font-size: 15px !important;
    letter-spacing: 0.04em !important;
  }

  .banner {
    width: 100% !important;
    height: min(78svh, 720px) !important;
    min-height: 500px !important;
    margin-top: calc(var(--mobile-header) + env(safe-area-inset-top)) !important;
    overflow: hidden !important;
    background: #111 !important;
  }

  .banner video,
  .banner .banner-video {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block !important;
  }

  .banner .down {
    bottom: 22px !important;
  }

  .banner .banner-overlay {
    padding: 0 var(--mobile-gutter) !important;
    text-align: center !important;
  }

  .banner .banner-cn {
    width: min(100%, 9em) !important;
    max-width: 100% !important;
    margin: 0 auto 14px !important;
    white-space: normal !important;
    font-size: clamp(30px, 8.4vw, 42px) !important;
    line-height: 1.32 !important;
    letter-spacing: 0.08em !important;
    text-align: center !important;
  }

  .banner .banner-en {
    width: min(100%, 320px) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    white-space: normal !important;
    font-size: clamp(14px, 3.4vw, 16px) !important;
    line-height: 1.5 !important;
    letter-spacing: 0.14em !important;
    text-align: center !important;
  }

  .page-banner,
  .about-hero,
  .service-detail-hero,
  .project-detail-hero {
    width: 100% !important;
    height: clamp(320px, 54svh, 520px) !important;
    min-height: 0 !important;
    margin-top: calc(var(--mobile-header) + env(safe-area-inset-top)) !important;
    overflow: hidden !important;
    aspect-ratio: auto !important;
  }

  .page-banner img,
  .page-banner video,
  .about-hero img,
  .about-hero video,
  .service-detail-hero img,
  .project-detail-hero img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block !important;
  }

  .page-banner .overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.16) 46%, rgba(0, 0, 0, 0.62) 100%) !important;
  }

  .page-banner .title-box,
  .about-hero .text {
    left: var(--mobile-gutter) !important;
    right: var(--mobile-gutter) !important;
    bottom: clamp(30px, 8vw, 52px) !important;
    width: auto !important;
    color: #fff !important;
  }

  .page-banner .title-box .en,
  .about-hero .text .en {
    font-size: clamp(14px, 3.3vw, 15px) !important;
    line-height: 1.35 !important;
    letter-spacing: 0.2em !important;
    margin-bottom: 10px !important;
    color: rgba(255, 255, 255, 0.82) !important;
  }

  .page-banner .title-box h1,
  .about-hero .text h1 {
    font-size: clamp(32px, 10vw, 52px) !important;
    line-height: 1.15 !important;
    letter-spacing: 0.12em !important;
    color: #fff !important;
  }

  .breadcrumb {
    padding: 22px var(--mobile-gutter) 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px 10px;
    font-size: 14px !important;
    line-height: 1.6 !important;
    letter-spacing: 0.04em !important;
    color: var(--mobile-muted) !important;
  }

  .breadcrumb span {
    margin: 0 !important;
  }

  .breadcrumb a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .page-content,
  .service-intro,
  .about-text,
  .article {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--mobile-gutter) !important;
    padding-right: var(--mobile-gutter) !important;
  }

  .page-content {
    padding-top: 32px !important;
    padding-bottom: var(--mobile-section) !important;
  }

  .about-text,
  .service-intro,
  .article {
    padding-top: 36px !important;
    padding-bottom: var(--mobile-section) !important;
  }

  .section-title {
    margin-bottom: 28px !important;
  }

  .section-title .en {
    font-size: 14px !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 8px !important;
  }

  .section-title h2,
  .service-intro h2 {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.25 !important;
    letter-spacing: 0.08em !important;
  }

  .cat-tabs {
    width: calc(100% + var(--mobile-gutter) * 2) !important;
    margin-left: calc(var(--mobile-gutter) * -1) !important;
    margin-right: calc(var(--mobile-gutter) * -1) !important;
    padding: 0 var(--mobile-gutter) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 4px !important;
    scrollbar-width: none;
  }

  .cat-tabs::-webkit-scrollbar {
    display: none;
  }

  .cat-tabs a {
    min-height: 44px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 15px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.08em !important;
  }

  .service-grid,
  .project-grid,
  .value-grid,
  .contact-grid,
  .service-features,
  .project-gallery {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(16px, 3vw, 24px) !important;
    margin-top: 28px !important;
  }

  .service-card,
  .project-card {
    width: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    touch-action: manipulation;
  }

  .service-card {
    aspect-ratio: 4 / 5 !important;
  }

  .project-card {
    aspect-ratio: 4 / 3 !important;
  }

  .service-card img,
  .project-card img,
  .project-gallery img,
  .contact-img img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block !important;
  }

  .project-card .info,
  .service-card .info {
    opacity: 1 !important;
    padding: 18px !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 100%) !important;
  }

  .project-card .info .name,
  .service-card .info .name {
    font-size: clamp(16px, 4vw, 19px) !important;
    line-height: 1.45 !important;
    letter-spacing: 0.06em !important;
    color: #fff !important;
  }

  .project-card .info .meta,
  .service-card .info .desc {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.84) !important;
  }

  .project-card .corner,
  .project-card .num,
  .service-card .num {
    font-size: 14px !important;
    min-height: 26px !important;
    display: inline-flex !important;
    align-items: center;
  }

  .news-list {
    margin-top: 24px !important;
  }

  .news-item {
    min-height: 72px !important;
    padding: 20px 0 !important;
    gap: 10px !important;
    align-items: flex-start !important;
    background: transparent !important;
    touch-action: manipulation;
  }

  .news-item .date {
    min-width: 0 !important;
    width: auto !important;
    padding-top: 0 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: var(--mobile-accent) !important;
  }

  .news-item .news-title {
    font-size: clamp(16px, 4.2vw, 19px) !important;
    line-height: 1.65 !important;
    letter-spacing: 0.03em !important;
    color: #272727 !important;
  }

  .news-item .arrow {
    min-width: 28px !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  .project-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin: 30px 0 !important;
    padding: 22px 0 !important;
  }

  .project-meta .m-item .label,
  .contact-info .info-item .label,
  .article .meta {
    font-size: 14px !important;
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    color: var(--mobile-muted) !important;
  }

  .project-meta .m-item .val {
    font-size: 16px !important;
    line-height: 1.6 !important;
    letter-spacing: 0.04em !important;
  }

  .project-nav {
    gap: 16px !important;
    margin-top: 38px !important;
    padding-top: 26px !important;
  }

  .project-nav a,
  .job-item .apply,
  .more,
  .cta-btn,
  .pager a,
  .page a,
  .button a,
  .button div {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation;
  }

  .article {
    padding-top: 30px !important;
  }

  .article h1 {
    font-size: clamp(24px, 6.6vw, 32px) !important;
    line-height: 1.45 !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 14px !important;
  }

  .article .meta {
    margin-bottom: 28px !important;
  }

  .article .content img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 22px 0 !important;
  }

  .timeline {
    padding: 24px 0 10px 34px !important;
    margin-top: 24px !important;
  }

  .timeline::before {
    left: 10px !important;
  }

  .timeline-item {
    margin-bottom: 34px !important;
  }

  .timeline-item::before {
    left: -30px !important;
  }

  .timeline-item .year {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.2 !important;
  }

  .timeline-item .desc {
    font-size: 16px !important;
    line-height: 1.8 !important;
  }

  .value-card,
  .sf-card {
    padding: 24px !important;
    background: rgba(255, 255, 255, 0.56) !important;
  }

  .value-card .v-title,
  .sf-card .sf-title {
    font-size: clamp(18px, 4.6vw, 22px) !important;
    line-height: 1.45 !important;
    letter-spacing: 0.06em !important;
  }

  .contact-grid {
    align-items: start;
  }

  .contact-info .info-item {
    margin-bottom: 22px !important;
  }

  .contact-img,
  .contact-img img {
    aspect-ratio: 4 / 3 !important;
  }

  .job-list {
    margin-top: 24px !important;
  }

  .job-item {
    min-height: 82px !important;
    padding: 22px 0 !important;
    gap: 14px !important;
    align-items: flex-start !important;
  }

  .job-item .job-name {
    font-size: clamp(18px, 4.8vw, 22px) !important;
    line-height: 1.4 !important;
  }

  .job-item .job-dept {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .job-item .apply {
    font-size: 15px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(184, 151, 107, 0.58);
  }

  .page-banner .title-box .yipin-badge,
  .yipin-badge,
  .sf-card .sf-num,
  .news-card .date,
  .news-card .arrow,
  .source-note,
  .source-note a,
  .article .source-note,
  .article .source-note a,
  .section5 a,
  .section6 a,
  .section7 a,
  a[style*="font-size:12px"],
  .page-content div[style*="font-size:13px"],
  .section5 .project-card span,
  .section5 .project-card div[style*="font-size:11px"],
  .page-content div[style*="font-size:11px"],
  .page-content span[style*="font-size:11px"] {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .section5 .project-card {
    min-height: 44px !important;
  }

  .source-note a,
  .article .source-note a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .section1,
  .section2,
  .section3,
  .section4,
  .section5,
  .section6,
  .section7,
  .section8,
  .home .section,
  .home .section1,
  .home .section2 {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .section1,
  .section2,
  .section3,
  .section5,
  .section6,
  .section8,
  .home .section,
  .home .section1,
  .home .section2 {
    padding-left: var(--mobile-gutter) !important;
    padding-right: var(--mobile-gutter) !important;
  }

  .section1 .content,
  .section1 .content > div,
  .section1 .content .flex1,
  .section1 .content .flex2,
  .section2 .content,
  .section5,
  .section6,
  .section7,
  .home .section1 .wrap,
  .home .section1 .wrap_box,
  .home .section2 .types,
  .home .section2 .boxes {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .section1 .content .big_img,
  .section2 .content .swiper1,
  .section2 .content .swiper1 .swiper-slide .img,
  .section4,
  .section5 .img2,
  .section6 .big_img,
  .section6 .item1 .img,
  .section6 .r .img,
  .home .section1 .wrap_box .box .items a .pic,
  .home .section1 .wrap_box .box .single_item .pic,
  .home .section2 .boxes .box .list a {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
  }

  .section1 .content .big_img img,
  .section2 .content .swiper1 .swiper-slide .img img,
  .section2 .content .swiper1 .swiper-slide .img .scale,
  .section4 video,
  .section5 img,
  .section6 img,
  .section6 video,
  .home .section1 img,
  .home .section2 img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
  }

  .section4 {
    margin: var(--mobile-section) 0 !important;
    background: #111 !important;
    aspect-ratio: 16 / 9 !important;
    padding: 0 !important;
  }

  .section4 .s4-overlay {
    padding: 0 var(--mobile-gutter) !important;
  }

  .section4 .s4-text .cn {
    font-size: clamp(24px, 7vw, 38px) !important;
    letter-spacing: 0.14em !important;
  }

  .section4 .s4-text .en {
    font-size: 13px !important;
    letter-spacing: 0.18em !important;
  }

  .section5,
  .section6,
  .section7 {
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 26px !important;
    padding-top: var(--mobile-section) !important;
    padding-bottom: var(--mobile-section) !important;
  }

  .section5 > div,
  .section5 > div > div[style*="grid-template-columns"],
  .section6 .item1,
  .section6 .big_img,
  .section6 .r,
  .section7 .l,
  .section7 .r {
    width: 100% !important;
    max-width: 100% !important;
  }

  .section5 > div > div[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  .section6 .item1,
  .section6 .r {
    display: flex !important;
    flex-direction: column !important;
  }

  .section7 .l,
  .section7 .r {
    min-height: 360px !important;
  }

  .section7 .l {
    padding: 34px var(--mobile-gutter) !important;
  }

  .home .section1 h1,
  .home .section2 h1,
  .section1 .title .cn-title,
  .section1 .title .p1 {
    font-size: clamp(30px, 8.5vw, 48px) !important;
    line-height: 1.22 !important;
    letter-spacing: 0.08em !important;
  }

  .section1 .title .en-sub {
    font-size: clamp(15px, 4vw, 20px) !important;
    line-height: 1.45 !important;
    letter-spacing: 0.14em !important;
  }

  .section1 .content .flex1 .p1,
  .section1 .content .flex2 .p1,
  .section6 .item1 .p1,
  .section6 .r .title {
    font-size: clamp(22px, 6vw, 32px) !important;
    line-height: 1.35 !important;
    letter-spacing: 0.06em !important;
    white-space: normal !important;
  }

  .home .section2 .types {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding-bottom: 8px !important;
  }

  .home .section2 .types .item {
    min-height: 44px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    flex: 0 0 auto;
    border: 1px solid rgba(39, 39, 39, 0.18);
  }

  .home .section2 .boxes .box .list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  .home .section2 .boxes .box .pager,
  .home .section .wrap .page {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center !important;
  }

  .home .section2 .boxes .box .pager a,
  .home .section .wrap .page a {
    min-width: 44px !important;
    margin: 0 !important;
    font-size: 15px !important;
  }

  .home .section .wrap {
    margin: 0 !important;
  }

  .home .section .wrap .select_box {
    justify-content: flex-start !important;
    margin-bottom: 28px !important;
  }

  .home .section .wrap .select_box .border {
    width: min(100%, 260px) !important;
    height: 44px !important;
  }

  .home .section .wrap .select_box .border .replace,
  .home .section .wrap .select_box .border .select .scroll_box div {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  .home .section .wrap .list .item {
    height: auto !important;
    min-height: 86px !important;
    padding: 18px 0 !important;
    align-items: flex-start !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .home .section .wrap .list .item .hover-reveal {
    display: none !important;
  }

  .home .section .wrap .list .item .date,
  .home .section .wrap .list .item .item_title,
  .home .section .wrap .list .item .item_text {
    width: 100% !important;
    margin: 0 !important;
    white-space: normal !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  .home .section .wrap .list .item .item_title {
    font-size: 18px !important;
  }

  .home .section1 .wrap {
    display: flex !important;
    flex-direction: column !important;
  }

  .home .section1 .wrap .l,
  .home .section1 .wrap .pic,
  .home .section1 .wrap .l .list {
    width: 100% !important;
    position: static !important;
    max-height: none !important;
  }

  .home .section1 .wrap .pic img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }

  .home .section1 .wrap .l .list .item .d1 {
    min-height: 52px !important;
  }

  .home .section1 .wrap .l .list .item .d1 p {
    font-size: 16px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
  }

  .home .section1 .wrap .l .list .item .d2 .content li,
  .home .section1 .wrap .l .list .item .d2 .content a {
    font-size: 15px !important;
    line-height: 1.75 !important;
  }

  .home .section2 .map {
    width: 100% !important;
    margin: 32px 0 54px !important;
  }

  .home .section2 .map .text_box .text {
    position: static !important;
    transform: none !important;
    display: block !important;
    margin-top: 16px !important;
  }

  .home .section2 .map .text_box .text .box {
    width: 100% !important;
    padding: 18px !important;
  }

  .home .section2 .map .point .dot p {
    display: none !important;
  }

  .home .section2 .map .point .dot .icon span {
    width: 10px !important;
    height: 10px !important;
  }

  .section3 .content,
  .section4 .r,
  .section6 .fix .wrap .content,
  .common_swiper .other {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  .section3 .content .l,
  .section3 .content .r,
  .section3 .content .r .text,
  .section3 .content .l .img,
  .section4 .l,
  .section4 .r,
  .section4 .l .title,
  .section4 .l .img1Swiper,
  .section4 .r .img2Swiper,
  .section4 .r .text,
  .section6 .fix,
  .section6 .fix .wrap,
  .section6 .fix .wrap .title,
  .section6 .fix .wrap .title .text2,
  .section6 .fix .wrap .content .img,
  .common_swiper .other .item {
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  .section3 .content .r .text {
    position: static !important;
    top: auto !important;
  }

  .section3 .content .l .img,
  .section4 .l .img1Swiper,
  .section4 .r .img2Swiper,
  .section6 .fix .wrap .content .img {
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }

  .footer {
    padding: 42px var(--mobile-gutter) max(28px, env(safe-area-inset-bottom)) !important;
  }

  .footer .box {
    width: 100% !important;
    max-width: none !important;
  }

  .footer .f-top,
  .footer .f-right {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }

  .footer .f-top {
    padding-bottom: 28px !important;
  }

  .footer .f-logo img {
    height: 40px !important;
  }

  .footer .f-desc,
  .footer .f-col .f-info {
    font-size: 14px !important;
    line-height: 1.8 !important;
    letter-spacing: 0.04em !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .footer .f-bottom .copy,
  .footer .f-bottom .copy a {
    font-size: 12px !important;
    line-height: 1.8 !important;
    letter-spacing: 0.04em !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .footer .f-col {
    width: 100% !important;
    gap: 4px !important;
  }

  .footer .f-col .f-title {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .footer .f-col a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .brand-mark,
  .menu-toggle {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .quadrant-label {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .q-node,
  .hero-kicker span {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .strategy-page .brand-mark span,
  .strategy-page .profile-card > span,
  .strategy-page .q-node,
  .strategy-page .hero-kicker span,
  .strategy-page .stat-ribbon span {
    font-size: max(14px, 1em) !important;
    line-height: 1.4 !important;
  }

  .foot {
    padding: 34px var(--mobile-gutter) !important;
  }

  .foot .dom1 {
    flex-direction: column !important;
    gap: 22px !important;
  }

  .foot .copyright {
    width: 100% !important;
    text-align: left !important;
    margin-top: 24px !important;
    font-size: 12px !important;
    line-height: 1.8 !important;
  }
}

@media (max-width: 767px) {
  :root {
    --mobile-header: 60px;
    --mobile-gutter: clamp(16px, 5.2vw, 22px);
  }

  .banner {
    height: min(74svh, 640px) !important;
    min-height: 430px !important;
  }

  .page-banner,
  .about-hero,
  .service-detail-hero,
  .project-detail-hero {
    height: clamp(300px, 50svh, 430px) !important;
  }

  .service-grid,
  .project-grid,
  .value-grid,
  .contact-grid,
  .service-features,
  .project-gallery,
  .home .section2 .boxes .box .list,
  .section5 > div > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  .news-item,
  .job-item,
  .project-nav {
    flex-direction: column !important;
  }

  .news-item {
    display: flex !important;
  }

  .news-item .arrow {
    align-self: flex-end !important;
    margin-top: -30px !important;
  }

  .project-meta {
    grid-template-columns: 1fr !important;
  }

  .project-nav {
    align-items: stretch !important;
  }

  .project-nav a {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .section1 .content .flex1,
  .section1 .content .flex2 .dis {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  .section1 .content .flex2 .dis a.img {
    width: 100% !important;
    min-height: 44px !important;
  }

  .section7 .l,
  .section7 .r {
    min-height: 300px !important;
  }

  .page-content,
  .about-text,
  .service-intro,
  .article {
    padding-top: 28px !important;
    padding-bottom: 52px !important;
  }
}

@media (max-width: 430px) {
  .pheader .menu .l a img {
    height: 30px !important;
  }

  .banner {
    min-height: 410px !important;
  }

  .page-banner .title-box h1,
  .about-hero .text h1 {
    font-size: clamp(30px, 11vw, 42px) !important;
    letter-spacing: 0.08em !important;
  }

  .page-banner .title-box .en,
  .about-hero .text .en {
    letter-spacing: 0.14em !important;
  }

  .cat-tabs a {
    padding: 0 15px !important;
  }

  .project-card .info,
  .service-card .info {
    padding: 16px !important;
  }

  .footer .f-right {
    gap: 18px !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .item_hover:hover img,
  .project-card:hover img,
  .service-card:hover img,
  .project-gallery img:hover,
  .section5 .project-card:hover,
  .section5 .project-card:hover img,
  .section6 .item1 .img:hover img,
  .section6 .r .img:hover img {
    transform: none !important;
    filter: none !important;
  }

  .news-item:hover,
  .cat-tabs a:hover,
  .project-nav a:hover,
  .footer .f-col a:hover {
    background: transparent !important;
    padding-left: initial;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* v8: iPhone 17 and WeChat mobile layout rebuild. */
@media (max-width: 1024px) {
  :root {
    --mobile-header: 60px;
    --mobile-gutter: clamp(16px, 5vw, 28px);
    --mobile-section: clamp(46px, 10vw, 82px);
    --mobile-card-gap: clamp(16px, 4.5vw, 24px);
    --mobile-safe-top: env(safe-area-inset-top, 0px);
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-vh: 100svh;
  }

  @supports (height: 100dvh) {
    :root {
      --mobile-vh: 100dvh;
    }
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    background: #f7f3ef !important;
    padding-bottom: var(--mobile-safe-bottom);
    -webkit-font-smoothing: antialiased;
  }

  html.act,
  body.navopen {
    height: var(--mobile-vh) !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  .wow,
  .wow[class*="fade"],
  [data-aos] {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition-delay: 0s !important;
  }

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

  img,
  video {
    display: block;
  }

  video {
    background: #111;
  }

  .header,
  .pheader,
  .nav,
  .menuList,
  .floating-menu {
    transform: none !important;
  }

  .pheader {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(var(--mobile-header) + var(--mobile-safe-top)) !important;
    padding-top: var(--mobile-safe-top) !important;
    z-index: 3000 !important;
    background: rgba(255, 253, 249, 0.98) !important;
    border-bottom: 1px solid rgba(39, 39, 39, 0.08) !important;
    box-shadow: 0 1px 16px rgba(0, 0, 0, 0.06) !important;
  }

  .pheader .menu {
    width: 100% !important;
    height: var(--mobile-header) !important;
    min-height: var(--mobile-header) !important;
    padding: 0 var(--mobile-gutter) !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .pheader .menu .l,
  .pheader .menu .l a {
    min-width: 0 !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
  }

  .pheader .menu .l a img {
    width: auto !important;
    height: 32px !important;
    max-height: 36px !important;
    object-fit: contain !important;
  }

  .pheader .menu .l a p {
    display: none !important;
  }

  .pheader .menu .navbox {
    width: 44px !important;
    height: 44px !important;
    margin: 0 -8px 0 0 !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation;
  }

  .pheader .menu .navbox .line {
    width: 24px !important;
    height: 2px !important;
    margin: 4px 0 !important;
    background: #272727 !important;
    border-radius: 2px;
  }

  .pheader .menu .activeBox {
    transform: none !important;
  }

  .pheader .menu .activeBox .line:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px) !important;
  }

  .pheader .menu .activeBox .line:nth-child(2) {
    opacity: 0 !important;
    transform: translateX(14px) !important;
  }

  .pheader .menu .activeBox .line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px) !important;
  }

  .menuList {
    position: fixed !important;
    top: calc(var(--mobile-header) + var(--mobile-safe-top)) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(var(--mobile-vh) - var(--mobile-header) - var(--mobile-safe-top)) !important;
    max-height: calc(var(--mobile-vh) - var(--mobile-header) - var(--mobile-safe-top)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 2990 !important;
    background: #f7f3ef !important;
    padding: 8px 0 max(28px, var(--mobile-safe-bottom)) !important;
    box-shadow: inset 0 1px 0 rgba(39, 39, 39, 0.08), 0 24px 42px rgba(0, 0, 0, 0.18) !important;
  }

  .menuList .lan {
    display: none !important;
  }

  .menuList .item {
    padding: 0 var(--mobile-gutter) !important;
    border-bottom: 1px solid rgba(39, 39, 39, 0.12) !important;
    background: transparent !important;
  }

  .menuList .item > a,
  .menuList .item .tb,
  .menuList .item .tb a,
  .menuList .item .types_top a {
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    color: #272727 !important;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
  }

  .menuList .item .tb {
    width: 100% !important;
    justify-content: space-between !important;
  }

  .menuList .item .tb img,
  .menuList .item a img {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 auto;
    right: 0 !important;
    top: auto !important;
  }

  .menuList .item .types_top {
    padding: 0 0 12px 14px !important;
    border-left: 1px solid rgba(39, 39, 39, 0.14);
  }

  .menuList .item .types_top a {
    min-height: 44px !important;
    color: #62584b !important;
    font-size: 15px !important;
    letter-spacing: 0.04em !important;
  }

  body:has(.pheader) .header,
  body:has(.pheader) .nav,
  body:has(.pheader) .floating-menu {
    display: none !important;
  }

  body:not(:has(.pheader)) .header {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(var(--mobile-header) + var(--mobile-safe-top)) !important;
    padding: var(--mobile-safe-top) var(--mobile-gutter) 0 !important;
    z-index: 3000 !important;
    background: rgba(255, 253, 249, 0.98) !important;
    border-bottom: 1px solid rgba(39, 39, 39, 0.08) !important;
    box-shadow: 0 1px 16px rgba(0, 0, 0, 0.06) !important;
  }

  body:not(:has(.pheader)) .header .box {
    width: 100% !important;
    height: var(--mobile-header) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  body:not(:has(.pheader)) .header .logo img {
    width: auto !important;
    height: 32px !important;
    filter: brightness(0) saturate(100%) !important;
  }

  body:not(:has(.pheader)) .inline-nav,
  body:not(:has(.pheader)) .floating-menu {
    display: none !important;
  }

  body:not(:has(.pheader)) .navbar-toggle {
    width: 44px !important;
    height: 44px !important;
    margin-right: -8px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3010 !important;
  }

  body:not(:has(.pheader)) .navbar-toggle span {
    width: 24px !important;
    height: 2px !important;
    margin: 4px 0 !important;
    background: #272727 !important;
    box-shadow: none !important;
  }

  body:not(:has(.pheader)) .nav {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: var(--mobile-vh) !important;
    z-index: 2990 !important;
    padding: calc(var(--mobile-header) + var(--mobile-safe-top) + 8px) var(--mobile-gutter) max(30px, var(--mobile-safe-bottom)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: #f7f3ef !important;
  }

  body:not(:has(.pheader)).navopen .nav {
    display: flex !important;
  }

  body:not(:has(.pheader)) .nav .links {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  body:not(:has(.pheader)) .nav .links .item {
    width: 100% !important;
    border-bottom: 1px solid rgba(39, 39, 39, 0.12) !important;
  }

  body:not(:has(.pheader)) .nav .links .item a {
    min-height: 50px !important;
    color: #272727 !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.08em !important;
  }

  body:not(:has(.pheader)) .nav .links .item .pList {
    padding: 0 0 12px 14px !important;
    border-left: 1px solid rgba(39, 39, 39, 0.14);
  }

  .banner,
  .page-banner,
  .about-hero,
  .service-detail-hero,
  .project-detail-hero {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .banner video,
  .banner .banner-video,
  .page-banner img,
  .page-banner video,
  .about-hero img,
  .about-hero video,
  .service-detail-hero img,
  .project-detail-hero img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
  }

  .page-banner,
  .about-hero,
  .service-detail-hero,
  .project-detail-hero {
    margin-top: calc(var(--mobile-header) + var(--mobile-safe-top)) !important;
    height: clamp(320px, 52svh, 520px) !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }

  @supports (height: 100dvh) {
    .page-banner,
    .about-hero,
    .service-detail-hero,
    .project-detail-hero {
      height: clamp(320px, 52dvh, 520px) !important;
    }
  }

  .page-banner .overlay,
  .service-detail-hero .hero-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0.16) 48%, rgba(0, 0, 0, 0.64) 100%) !important;
  }

  .page-banner .title-box,
  .about-hero .text,
  .service-detail-hero .hero-title {
    left: var(--mobile-gutter) !important;
    right: var(--mobile-gutter) !important;
    bottom: max(30px, calc(var(--mobile-safe-bottom) + 20px)) !important;
    width: auto !important;
    max-width: calc(100% - var(--mobile-gutter) * 2) !important;
    color: #fff !important;
  }

  .page-banner .title-box .en,
  .about-hero .text .en,
  .service-detail-hero .hero-title .en {
    color: rgba(255, 255, 255, 0.84) !important;
    font-size: clamp(13px, 3vw, 16px) !important;
    line-height: 1.4 !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 10px !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.42);
  }

  .page-banner .title-box h1,
  .about-hero .text h1,
  .service-detail-hero .hero-title h1 {
    color: #fff !important;
    font-size: clamp(30px, 8vw, 48px) !important;
    line-height: 1.18 !important;
    letter-spacing: 0.1em !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  }

  .page-content,
  .service-intro,
  .about-text,
  .article {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--mobile-gutter) !important;
    padding-right: var(--mobile-gutter) !important;
  }

  .page-content {
    padding-top: clamp(30px, 7vw, 48px) !important;
    padding-bottom: var(--mobile-section) !important;
  }

  .page-content [style*="margin-top:80px"],
  .section-title[style*="margin-top"] {
    margin-top: clamp(42px, 10vw, 72px) !important;
  }

  .section-title {
    margin-bottom: clamp(24px, 6vw, 42px) !important;
  }

  .section-title .en {
    font-size: 14px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 8px !important;
  }

  .section-title h2,
  .service-intro h2 {
    font-size: clamp(28px, 7vw, 42px) !important;
    line-height: 1.25 !important;
    letter-spacing: 0.08em !important;
  }

  .cat-tabs {
    width: calc(100% + var(--mobile-gutter) * 2) !important;
    margin-left: calc(var(--mobile-gutter) * -1) !important;
    margin-right: calc(var(--mobile-gutter) * -1) !important;
    padding: 0 var(--mobile-gutter) !important;
    display: flex !important;
    gap: 4px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .cat-tabs::-webkit-scrollbar {
    display: none;
  }

  .cat-tabs a {
    min-height: 44px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto;
    white-space: nowrap !important;
    font-size: 15px !important;
    letter-spacing: 0.08em !important;
  }

  .service-grid,
  .project-grid,
  .value-grid,
  .contact-grid,
  .service-features,
  .project-gallery,
  .article .article-gallery {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--mobile-card-gap) !important;
    margin-top: clamp(24px, 6vw, 40px) !important;
  }

  .service-card,
  .project-card,
  .news-card,
  .value-card,
  .sf-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    touch-action: manipulation;
  }

  .service-card {
    aspect-ratio: 4 / 5 !important;
  }

  .project-card {
    aspect-ratio: 4 / 3 !important;
  }

  .service-card img,
  .project-card img,
  .news-card img,
  .project-gallery img,
  .article .article-gallery img,
  .contact-img img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
  }

  .project-card .info,
  .service-card .info {
    opacity: 1 !important;
    padding: 18px !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.74) 100%) !important;
  }

  .project-card .info .name,
  .service-card .info .name {
    color: #fff !important;
    font-size: clamp(16px, 4vw, 19px) !important;
    line-height: 1.45 !important;
    letter-spacing: 0.05em !important;
  }

  .project-card .info .meta,
  .service-card .info .desc {
    color: rgba(255, 255, 255, 0.84) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .news-card-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .news-card .news-thumb,
  .article .article-hero {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
  }

  .article h1 {
    font-size: clamp(24px, 6.2vw, 34px) !important;
    line-height: 1.45 !important;
    letter-spacing: 0.04em !important;
  }

  .article .content p,
  .about-text,
  .about-text p,
  .service-intro p,
  .project-desc,
  .contact-info .info-item .val {
    font-size: clamp(15px, 3.7vw, 17px) !important;
    line-height: 1.86 !important;
    letter-spacing: 0.02em !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .footer {
    padding: clamp(40px, 9vw, 58px) var(--mobile-gutter) max(30px, var(--mobile-safe-bottom)) !important;
  }

  .footer .box {
    width: 100% !important;
    max-width: none !important;
  }

  .footer .f-top,
  .footer .f-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }

  .footer .f-logo img {
    height: 38px !important;
  }

  .footer .f-desc,
  .footer .f-col .f-info,
  .footer .f-bottom .copy,
  .footer .f-bottom .copy a {
    font-size: 12px !important;
    line-height: 1.85 !important;
    letter-spacing: 0.04em !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .banner {
    height: min(74svh, 760px) !important;
    min-height: 560px !important;
    margin-top: calc(var(--mobile-header) + var(--mobile-safe-top)) !important;
  }

  @supports (height: 100dvh) {
    .banner {
      height: min(74dvh, 760px) !important;
    }
  }

  .section1,
  .section3,
  .section5,
  .section6,
  .section7 {
    padding-left: var(--mobile-gutter) !important;
    padding-right: var(--mobile-gutter) !important;
  }

  .section5 > div > div[style*="grid-template-columns"],
  .home .section1 .content .flex2 .dis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  :root {
    --mobile-header: 60px;
    --mobile-gutter: clamp(17px, 5.2vw, 24px);
    --mobile-section: clamp(46px, 12vw, 68px);
  }

  .banner {
    height: min(76svh, 690px) !important;
    min-height: clamp(540px, 72svh, 660px) !important;
    margin-top: calc(var(--mobile-header) + var(--mobile-safe-top)) !important;
    background: #111 !important;
  }

  @supports (height: 100dvh) {
    .banner {
      height: min(76dvh, 690px) !important;
      min-height: clamp(540px, 72dvh, 660px) !important;
    }
  }

  .banner .banner-overlay {
    padding: 0 var(--mobile-gutter) max(28px, var(--mobile-safe-bottom)) !important;
    text-align: center !important;
  }

  .banner .banner-cn {
    width: min(100%, 9em) !important;
    max-width: 100% !important;
    margin: 0 auto 14px !important;
    white-space: normal !important;
    font-size: clamp(30px, 8.6vw, 42px) !important;
    line-height: 1.32 !important;
    letter-spacing: 0.08em !important;
    text-align: center !important;
  }

  .banner .banner-en {
    width: min(100%, 330px) !important;
    margin: 0 auto !important;
    white-space: normal !important;
    font-size: clamp(13px, 3.4vw, 16px) !important;
    line-height: 1.55 !important;
    letter-spacing: 0.14em !important;
    text-align: center !important;
  }

  .banner .down {
    bottom: max(20px, calc(var(--mobile-safe-bottom) + 12px)) !important;
  }

  .page-banner,
  .about-hero,
  .service-detail-hero,
  .project-detail-hero {
    height: clamp(320px, 48svh, 440px) !important;
  }

  @supports (height: 100dvh) {
    .page-banner,
    .about-hero,
    .service-detail-hero,
    .project-detail-hero {
      height: clamp(320px, 48dvh, 440px) !important;
    }
  }

  .section1,
  .section3,
  .section4,
  .section5,
  .section6,
  .section7 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .section1 {
    padding: var(--mobile-section) var(--mobile-gutter) !important;
  }

  .section1 .title {
    margin: 0 0 26px !important;
  }

  .section1 .title .cn-title,
  .section1 .title .p1 {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.25 !important;
    letter-spacing: 0.08em !important;
  }

  .section1 .title .en-sub {
    font-size: clamp(14px, 4vw, 18px) !important;
    line-height: 1.45 !important;
    letter-spacing: 0.14em !important;
  }

  .section1 .content,
  .section1 .content > div {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 24px !important;
  }

  .section1 .content .big_img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .section1 .content .big_img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .section1 .content .flex1,
  .section1 .content .flex2 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }

  .section1 .content .flex1 .p1,
  .section1 .content .flex2 .p1 {
    font-size: clamp(22px, 6.2vw, 30px) !important;
    line-height: 1.35 !important;
    letter-spacing: 0.06em !important;
    white-space: normal !important;
  }

  .section1 .content .flex1 .p2 {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    text-align-last: left !important;
  }

  .home .section1 .content .flex2 .dis,
  body .section1 .content .flex2 .dis {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .section3 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 var(--mobile-gutter) var(--mobile-section) !important;
    background: #f7f3ef !important;
  }

  .section3 .l,
  .section3 .img {
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
  }

  .section3 .l {
    order: 1;
  }

  .section3 .img {
    order: 2;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
  }

  .section3 .img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .section3 .l .t1 .p1 {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.12 !important;
    letter-spacing: 0.06em !important;
  }

  .section3 .l .t1 .p2 {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }

  .section4 {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 0 var(--mobile-section) !important;
    padding: 0 !important;
    background: #111 !important;
  }

  .section4 video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: static !important;
  }

  .section5 {
    display: block !important;
    padding: var(--mobile-section) var(--mobile-gutter) !important;
    background: #f7f3ef !important;
  }

  .section5 > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .section5 > div > div[style*="grid-template-columns"] {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .section5 .project-card {
    width: 100% !important;
    display: block !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    transform: none !important;
  }

  .section5 .project-card > div:first-child {
    width: 100% !important;
    height: auto !important;
    min-height: 220px !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
  }

  .section5 .project-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .section5 .project-card > div:last-child {
    padding: 14px 2px 0 !important;
  }

  .section6 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    padding: var(--mobile-section) var(--mobile-gutter) !important;
    align-items: stretch !important;
    background: #f7f3ef !important;
  }

  .section6 .item1,
  .section6 .big_img,
  .section6 .r {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .section6 .item1 .img,
  .section6 .big_img,
  .section6 .r .img {
    width: 100% !important;
    height: auto !important;
    min-height: 220px !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
  }

  .section6 .item1 .img img,
  .section6 .big_img video,
  .section6 .big_img img,
  .section6 .r .img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .section6 .item1 .p1,
  .section6 .r .title {
    font-size: clamp(22px, 6vw, 30px) !important;
    line-height: 1.35 !important;
    letter-spacing: 0.06em !important;
  }

  .section7 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    background: #111 !important;
  }

  .section7 .l,
  .section7 .img2 {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 320px !important;
    position: relative !important;
  }

  .section7 .l {
    padding: var(--mobile-section) var(--mobile-gutter) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .section7 .l .p1 {
    font-size: clamp(30px, 9vw, 44px) !important;
    line-height: 1.18 !important;
    letter-spacing: 0.08em !important;
  }

  .section7 .l .contact-text {
    width: 100% !important;
    max-width: 340px !important;
    margin: 24px auto 0 !important;
    font-size: 15px !important;
    line-height: 1.85 !important;
  }

  .section7 .img2 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .service-grid,
  .project-grid,
  .value-grid,
  .contact-grid,
  .service-features,
  .project-gallery,
  .article .article-gallery,
  .news-card-list {
    grid-template-columns: 1fr !important;
  }

  .project-card {
    min-height: 220px !important;
  }

  .service-card {
    min-height: 300px !important;
  }

  .news-card .news-body {
    min-height: 0 !important;
    padding: 18px 18px 22px !important;
  }

  .project-meta {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin: 28px 0 !important;
  }

  .project-nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .project-nav a,
  .job-item .apply,
  .cta-btn,
  .more,
  .pager a,
  .page a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .contact-grid {
    gap: 30px !important;
  }

  .contact-img,
  .contact-img img {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
  }

  .article .article-hero img,
  .article .content img {
    width: 100% !important;
    height: auto !important;
    margin: 20px 0 !important;
  }
}

@media (min-width: 390px) and (max-width: 767px) {
  :root {
    --mobile-gutter: clamp(18px, 5vw, 25px);
  }

  .banner {
    min-height: clamp(560px, 73svh, 680px) !important;
  }

  @supports (height: 100dvh) {
    .banner {
      min-height: clamp(560px, 73dvh, 680px) !important;
    }
  }

  .section5 .project-card > div:first-child,
  .section6 .item1 .img,
  .section6 .big_img,
  .section6 .r .img,
  .project-card {
    min-height: 230px !important;
  }
}

@media (min-width: 420px) and (max-width: 767px) {
  .banner .banner-cn {
    font-size: clamp(34px, 8.1vw, 44px) !important;
  }

  .section5 .project-card > div:first-child,
  .section6 .item1 .img,
  .section6 .big_img,
  .section6 .r .img,
  .project-card {
    min-height: 245px !important;
  }
}

@media (max-width: 380px) {
  :root {
    --mobile-gutter: 16px;
  }

  .banner {
    min-height: 520px !important;
  }

  .banner .banner-cn {
    font-size: 29px !important;
  }

  .page-banner .title-box h1,
  .about-hero .text h1,
  .service-detail-hero .hero-title h1 {
    font-size: 28px !important;
  }
}

/* v9: tighten iPhone/WeChat reading rhythm and alignment. */
@media (max-width: 767px) {
  .breadcrumb {
    width: 100% !important;
    padding: 18px var(--mobile-gutter) 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 9px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em !important;
    color: #7a7168 !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .breadcrumb::-webkit-scrollbar {
    display: none;
  }

  .breadcrumb > * {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.2 !important;
  }

  .breadcrumb a {
    color: #7a7168 !important;
    text-decoration: none !important;
  }

  .breadcrumb > span:not(:last-child) {
    color: rgba(122, 113, 104, 0.58) !important;
  }

  .breadcrumb > span:last-child {
    color: #312b25 !important;
  }

  .footer {
    padding: 34px var(--mobile-gutter) max(28px, var(--mobile-safe-bottom)) !important;
  }

  .footer .f-top {
    gap: 24px !important;
    padding-bottom: 26px !important;
  }

  .footer .f-right {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 22px !important;
    align-items: start !important;
  }

  .footer .f-col {
    width: auto !important;
    min-width: 0 !important;
    gap: 0 !important;
  }

  .footer .f-col .f-title {
    margin: 0 0 10px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.08em !important;
  }

  .footer .f-col a {
    min-height: 0 !important;
    height: auto !important;
    padding: 4px 0 !important;
    display: block !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.03em !important;
  }

  .footer .f-col .f-info {
    margin: 4px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
    letter-spacing: 0.02em !important;
  }

  .footer .f-col:last-child {
    grid-column: 1 / -1 !important;
  }

  .footer .f-desc {
    font-size: 12px !important;
    line-height: 1.7 !important;
    letter-spacing: 0.03em !important;
  }
}

@media (max-width: 430px) {
  .footer .f-right {
    gap: 20px 18px !important;
  }

  .footer .f-col a {
    padding: 3px 0 !important;
  }
}