/* Shared rhythm and readable type across the three service areas. */
:root { --muted: #606368; --line: #e0e1e3; }
body { -webkit-font-smoothing: antialiased; }
.header { height: 82px; background: #fffffffa; }
.header:after { content: ''; position: absolute; left: 0; bottom: -1px; width: var(--page-progress, 0%); height: 2px; background: var(--red); pointer-events: none; transition: width .1s linear; }
.brand.brand-zhonghe { min-width: 202px; }
.brand.brand-zhonghe img { width: 202px; height: 66px; }
.header nav { font-size: 15px; }
.header nav a { padding: 14px 0; }
.nav-contact { min-height: 46px; border-color: #dfdfe2; border-radius: 4px; }
.hero-inner { padding-top: 76px; }
.hero h1 { line-height: 1.38; }
.hero-desc { font-size: 16px; color: #484c51; }
.hero-bottom { color: #444; }
.hero-bottom>a { padding: 8px 12px; background: #ffffffd9; border-radius: 4px; }
.business-index { gap: 36px; padding-block: 28px; }
.business-index>a { min-height: 76px; }
.business-index h2 { font-size: 21px; }
.business-index p { font-size: 13px; }
.business-index a:hover h2 { color: var(--red); }
.section { padding-block: 76px; }
.section-heading { margin-bottom: 34px; gap: 48px; }
.section-heading>p { font-size: 15px; line-height: 1.9; color: #64676b; }
.eyebrow { font-size: 11px; }
.xhs-tabs { position: sticky; top: 82px; z-index: 15; background: #f6f6f4f5; backdrop-filter: blur(16px); gap: 8px; border-bottom: 1px solid #dedee0; padding: 10px 0; margin-bottom: 28px; }
.xhs-tabs button { position: relative; min-height: 57px; padding: 14px 12px; border: 0; border-radius: 5px; font-size: 16px; font-weight: 600; color: #64676b; transition: color .2s, background .2s; }
.xhs-tabs button:hover { background: #eaeaec; color: #252629; }
.xhs-tabs button[aria-selected='true'] { color: #fff; background: var(--red); box-shadow: 0 5px 15px #ed263e16; }
.xhs-tabs button[aria-selected='true'] span { color: #ffffffc4; }
.xhs-panel { min-height: 480px; gap: 64px; align-items: center; }
.xhs-panel-copy h3 { font-size: 28px; max-width: 540px; margin: 13px 0 17px; }
.xhs-panel-copy>p:not(.eyebrow) { font-size: 15px; line-height: 1.95; color: #666a70; }
.xhs-checks { margin-block: 20px; }
.xhs-checks li { font-size: 14px; padding-block: 7px; }
.delivery-line { padding: 13px 0; }
.delivery-line span { color: #777; font-size: 11px; }
.delivery-line p { font-size: 13px; color: #51555b; }
.text-link { min-height: 40px; align-items: center; font-size: 14px; margin-top: 14px; }
.text-link:hover span { transform: translate(2px, -2px); }
.text-link span { transition: transform .2s; }
.xhs-panel-visual { border-radius: 7px; height: 458px; }
.xhs-panel-visual figcaption { padding: 32px; padding-top: 75px; }
.xhs-panel-visual figcaption strong { font-size: 25px; }
.content-showcase-heading { padding-top: 30px; }
.story-grid { gap: 22px; }
.story { border-radius: 7px; overflow: hidden; background: white; border: 1px solid #e7e7e7; transition: box-shadow .3s, transform .3s; }
.story:hover { transform: translateY(-5px); box-shadow: 0 16px 32px #2426290b; }
.story-image { aspect-ratio: 4 / 3; }
.story-image>span { font-size: 11px; padding: 7px 11px; border-radius: 3px; color: #44484d; }
.story-body { padding: 23px; }
.story-title { margin: 0 0 13px; align-items: flex-start; gap: 16px; min-height: 56px; }
.story-title h3 { font-size: 19px; line-height: 1.55; }
.story-title>span { padding-top: 7px; }
.story-body>p { color: #686c72; font-size: 14px; line-height: 1.85; min-height: 78px; }
.story-topics { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; border-top: 1px solid #efeff0; padding-top: 16px; margin-top: 18px; font-size: 10px; color: #99686f; }
.story-topics small { font-size: 9px; color: #92969a; margin-left: auto; }
.content-principles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 35px; padding-top: 35px; margin-top: 38px; border-top: 1px solid #dadbde; }
.content-principles>div>span { font: 10px Arial,sans-serif; color: var(--red); }
.content-principles h3 { font-size: 18px; margin: 10px 0 8px; }
.content-principles p { color: #73777c; font-size: 13px; }
.image-note { line-height: 1.8; color: #7b7d81; }
.xhs-faq { gap: 70px; }
.xhs-faq summary { min-height: 32px; align-items: center; font-size: 15px; }
.xhs-faq details { padding-block: 20px; }
.xhs-faq details p { font-size: 14px; color: #696d73; }
.xhs-faq>div>p:last-child { font-size: 14px; }
.contact-strip { padding-block: 40px; }
.contact-strip h2 { font-size: 28px; }
.contact-strip p:last-child { font-size: 14px; color: #ffffffd4; }
.contact-methods small { font-size: 10px; }
.contact-methods strong { font-size: 19px; }
.design-caption { padding: 24px; }
.design-services p { font-size: 14px; line-height: 1.9; color: #6e7278; }
.design-services article { padding-block: 25px; }
.geo { background: #242629; }
.geo-copy>p:not(.eyebrow) { font-size: 15px; color: #b7bcc3; line-height: 1.95; }
.geo-copy>p.geo-note { font-size: 11px; color: #969ca5; }
.geo li { font-size: 15px; padding-block: 13px; }
.search-demo { transform: rotate(-1deg); box-shadow: 13px 13px 0 #ffffff05; border: 1px solid #ffffff22; }
.answer p { font-size: 14px; line-height: 1.9; color: #6b7077; }
.question { font-size: 18px; line-height: 1.8; border-left: 2px solid var(--red); }
.knowledge-tags span { border-radius: 3px; font-size: 11px; }
.process-grid { gap: 32px; }
.process-grid li { position: relative; }
.process-grid li>span { color: #7c8188; }
.process-grid p { font-size: 14px; color: #6a6e74; line-height: 1.85; }
.process-grid h3 { margin-top: 18px; }
.closing-section { padding: 65px 0; background: #fff; border-bottom: 1px solid #e7e8ea; }
.closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.closing-inner h2 { font-size: 34px; line-height: 1.5; margin: 15px 0; }
.closing-inner>div>p:last-child { color: #8a8e93; font-size: 12px; }
.closing-link { border-bottom: 1px solid #d9dce0; padding-bottom: 16px; flex-shrink: 0; }
.closing-link>span { display: block; color: #81868c; font-size: 12px; margin-bottom: 14px; }
.closing-link strong { display: flex; gap: 40px; color: var(--red); font-size: 23px; font-weight: 500; }
.closing-link:hover { border-bottom-color: var(--red); }
footer { padding-top: 42px; background: #fafafa; }
.footer-top>div>p { font-size: 13px; }
.footer-nav { font-size: 13px; gap: 10px; }
.footer-nav h3 { font-size: 14px; }
.footer-nav a { min-height: 26px; }
.footer-bottom { color: #777c83; }
@media(max-width:1100px) {
  .header { gap: 24px; }
  .brand.brand-zhonghe { min-width: 178px; }
  .brand.brand-zhonghe img { width: 178px; height: 60px; }
  .header nav { gap: 22px; font-size: 14px; }
  .xhs-panel { gap: 36px; }
  .xhs-tabs button { font-size: 14px; }
  .story-body { padding: 18px; }
  .story-title h3 { font-size: 17px; }
  .story-body>p { min-height: 100px; font-size: 13px; }
  .content-principles { gap: 24px; }
  .closing-inner h2 { font-size: 30px; }
  .closing-link strong { font-size: 20px; gap: 20px; }
}
@media(max-width:760px) {
  .header { height: 74px; }
  .brand.brand-zhonghe { min-width: 158px; }
  .brand.brand-zhonghe img { width: 158px; height: 54px; }
  .header nav { padding: 15px 24px; }
  .header nav a { padding: 12px 0; }
  .hero-inner { padding-top: 36px; }
  .hero-desc { font-size: 13px; }
  .hero-bottom>a { font-size: 11px; }
  .section { padding-block: 52px; }
  .section-heading { gap: 17px; margin-bottom: 26px; }
  .section-heading>p { font-size: 13px; }
  .business-index { gap: 0; padding-block: 12px; }
  .business-index>a { min-height: 90px; }
  .business-index h2 { font-size: 19px; }
  .business-index p { font-size: 12px; }
  .xhs-tabs { top: 74px; gap: 6px; padding-block: 9px; margin-bottom: 24px; }
  .xhs-tabs button { font-size: 12px; padding: 11px 6px; min-height: 46px; gap: 7px; }
  .xhs-panel { gap: 25px; min-height: 0; }
  .xhs-panel-copy h3 { font-size: 23px; margin-block: 12px; }
  .xhs-panel-copy>p:not(.eyebrow) { font-size: 14px; }
  .xhs-checks li { font-size: 13px; }
  .delivery-line p { font-size: 12px; }
  .xhs-panel-visual { height: 330px; }
  .xhs-panel-visual figcaption { padding: 23px; padding-top: 60px; }
  .xhs-panel-visual figcaption strong { font-size: 22px; }
  .story-grid { gap: 22px; }
  .story-body { padding: 20px; }
  .story-title { min-height: 0; }
  .story-title h3 { font-size: 19px; }
  .story-body>p { min-height: 0; font-size: 14px; }
  .content-principles { grid-template-columns: 1fr; gap: 22px; padding-top: 27px; margin-top: 28px; }
  .content-principles>div+div { padding-top: 22px; border-top: 1px solid #e2e3e5; }
  .content-principles h3 { font-size: 18px; }
  .xhs-faq { gap: 26px; }
  .xhs-faq summary { font-size: 14px; }
  .xhs-faq details p { font-size: 13px; }
  .contact-strip h2 { font-size: 23px; }
  .contact-strip p:last-child { font-size: 13px; }
  .contact-methods strong { font-size: 20px; }
  .design-services p { font-size: 13px; }
  .geo-copy>p:not(.eyebrow) { font-size: 14px; }
  .geo-copy>p.geo-note { font-size: 11px; }
  .search-demo { transform: none; }
  .question { font-size: 16px; }
  .answer p { font-size: 13px; }
  .process-grid { gap: 28px 20px; }
  .process-grid p { font-size: 13px; }
  .closing-section { padding-block: 42px; }
  .closing-inner { align-items: stretch; flex-direction: column; gap: 30px; }
  .closing-inner h2 { font-size: 27px; }
  .closing-link strong { font-size: 22px; justify-content: space-between; }
}
@media(prefers-reduced-motion:reduce) { .header:after { transition: none; } }