/* First viewport only. Later homepage sections intentionally keep their original styles. */
:root {
  --sanhua-paper: #ffffff;
  --sanhua-ink: #102a40;
  --sanhua-teal: #1660ab;
  --sanhua-blue: #1660ab;
  --sanhua-yellow: #1660ab;
  --sanhua-muted: #66788a;
  --sanhua-line: rgba(22, 96, 171, 0.18);
  --sanhua-field: #f2f5f7;
  --sanhua-service: #d92732;
}

.home-page .magic-hero {
  display: block;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--sanhua-paper);
  color: var(--sanhua-ink);
}

.home-page .navbar {
  background: #ffffff;
}

.home-page .magic-hero > .magic-hero-aurora {
  display: none;
}

.home-page .magic-hero-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  width: 100%;
  min-height: 0;
  align-items: flex-end;
  margin: 0;
  padding: clamp(96px, 13dvh, 126px) max(64px, calc((100% - 1696px) / 2)) clamp(48px, 8dvh, 90px);
  background: none;
  isolation: isolate;
}

.home-page .magic-hero-content::before {
  content: none;
}

.home-page .magic-hero-content::after {
  content: none;
}

.home-page .sanhua-hero-copy {
  display: block;
  width: min(1696px, 100%);
  max-width: none;
  margin: 0 auto;
  text-align: left;
}

.home-page .sanhua-poster-heading {
  display: block;
  min-width: 0;
}

.home-page .magic-hero h1 {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  color: #ffffff;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: clamp(52px, 5.4vw, 92px);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: 0;
  text-align: left;
  text-shadow: 0 3px 22px rgba(10, 26, 39, 0.3);
  transform: none;
}

.home-page .sanhua-poster-line {
  display: block;
  width: max-content;
  white-space: nowrap;
}

.home-page .sanhua-poster-line--accent {
  margin-left: clamp(48px, 6vw, 112px);
  color: #ffffff;
}

.home-page .sanhua-poster-word--deep {
  font-weight: 800;
}

.home-page .sanhua-poster-word--service {
  color: #f6c15f;
  font-weight: 800;
}

.home-page .magic-hero h1::before {
  content: none;
}

.home-page .magic-aurora-text-fill {
  background: none !important;
  color: var(--sanhua-ink) !important;
  -webkit-text-fill-color: var(--sanhua-ink) !important;
  animation: none !important;
  filter: none;
}

.home-page .magic-hero-frame,
.home-page .magic-hero-frame--shanghai {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
  overflow: hidden;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

.home-page .magic-hero-frame::before {
  content: none;
}

.home-page .magic-hero-frame > img,
.home-page .magic-hero-frame > .decoded-hero-picture,
.home-page .magic-hero-frame > .decoded-hero-picture > img {
  width: 100% !important;
  height: 100% !important;
}

.home-page .magic-hero-frame > .decoded-hero-picture {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
}

.home-page .magic-hero-frame > .decoded-hero-picture > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  object-fit: cover;
  object-position: center center;
  opacity: 1 !important;
  clip-path: inset(0) !important;
  transform: none !important;
  /* 天际线的调色不写在这里 —— 本文件第 519 行有同选择器、带 !important 的
     后续块，会盖掉这一条。改饱和请去那里。 */
  filter: none;
}

.home-page .magic-hero-frame > .decoded-hero-image--placeholder {
  opacity: 0 !important;
}

/* The SSR markup still carries the pre-revamp headline; the current one is
   built by homepage-hero-refresh.js after hydration. This used to be gated on
   .sbc-intro-pending, which the head script only sets on the first visit of a
   session, so every refresh painted the old headline at full opacity until the
   swap landed. .sanhua-hero-gate is set unconditionally by that same head
   script instead, and lifts on .sanhua-hero-started (now fired after the swap,
   not at rAF). No-JS never gets the class, so it still sees the SSR copy, and
   the head script carries a 2s failsafe for a JS error mid-flight. */
.home-page.sanhua-hero-gate:not(.sanhua-hero-started) .magic-hero-content,
.home-page.sanhua-hero-gate:not(.sanhua-hero-started) .magic-hero-frame,
.home-page.sbc-intro-pending:not(.sanhua-hero-started) .magic-hero-content,
.home-page.sbc-intro-pending:not(.sanhua-hero-started) .magic-hero-frame {
  opacity: 0;
}

/* Handoff out of the intro. The copy no longer fades in as one block: each
   line rises out of a slight skew with the blur clearing, which is the same
   gesture the intro uses for its letters, so the two reads as one movement. */
.home-page.sanhua-hero-started .magic-hero-frame {
  animation: sanhua-hero-image-in 560ms cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

.home-page.sanhua-hero-started .magic-hero h1 .sanhua-poster-line {
  --sanhua-rise-base: 0ms;
  --sanhua-rise-step: 0ms;
  transform-origin: left bottom;
  animation: sanhua-hero-line-in 780ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--sanhua-rise-base) + var(--sanhua-rise-step));
}

/* The veil wipes bottom-to-top, so the sky - where the copy now sits - is the
   last strip it uncovers, around 380ms after the reveal fires. Holding the
   cascade until then keeps it from playing out of sight behind the veil.
   Repeat visits have no veil at all, so the base stays at zero. */
.home-page.sanhua-hero-after-intro.sanhua-hero-started .magic-hero h1 .sanhua-poster-line {
  --sanhua-rise-base: 380ms;
}

.home-page.sanhua-hero-started .magic-hero h1 .sanhua-poster-line--accent {
  --sanhua-rise-step: 130ms;
}

@keyframes sanhua-hero-image-in {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 1; transform: scale(1); }
}

/* Title lines: the skew is what gives the line its lift. */
@keyframes sanhua-hero-line-in {
  from { opacity: 0; transform: translate3d(0, 0.42em, 0) skewY(1.2deg); filter: blur(6px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) skewY(0deg); filter: blur(0px); }
}

@media (max-width: 900px) {
  .home-page .magic-hero {
    height: 100dvh;
  }

  .home-page .magic-hero-content {
    width: 100%;
    min-height: 0;
    flex-basis: clamp(220px, 35dvh, 300px);
    margin: 0;
    padding: 88px 20px 22px;
    background: var(--sanhua-field);
  }

  .home-page .sanhua-hero-copy {
    display: block;
  }

  .home-page .magic-hero h1 {
    display: block;
    max-width: none;
    font-size: clamp(46px, 10.8vw, 76px);
    line-height: 0.96;
  }

  .home-page .sanhua-poster-line--accent {
    margin-left: clamp(32px, 9vw, 72px);
  }

  .home-page .magic-hero-frame,
  .home-page .magic-hero-frame--shanghai {
    height: auto;
    aspect-ratio: auto;
  }
}

@media (max-width: 560px) {
  .home-page .magic-hero-content {
    flex-basis: clamp(210px, 36dvh, 270px);
    padding: 78px 16px 18px;
  }

  .home-page .magic-hero h1 {
    font-size: clamp(40px, 11vw, 62px);
  }

  .home-page .sanhua-poster-line--accent {
    margin-left: clamp(20px, 7vw, 44px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page.sanhua-hero-started .magic-hero-content,
  .home-page.sanhua-hero-started .magic-hero-frame,
  .home-page.sanhua-hero-started .magic-hero h1 .sanhua-poster-line {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* The hydrated island still carries the archived skyline URL for a moment.
   Keep that stale frame invisible until the refinement swaps in the approved
   image, so a reload can never flash the previous hero photograph. */
.home-page .magic-hero-frame img[src*="homepage-shanghai-skyline-desktop-v4"] {
  visibility: hidden !important;
}

/* Final homepage review overrides. */
.home-page .magic-aurora-text-fill {
  color: #102a40 !important;
  -webkit-text-fill-color: #102a40 !important;
}

@media (max-width: 900px) {
  .home-page .magic-hero-content {
    padding: 88px 20px 52px;
    background: none;
  }

  .home-page .magic-hero-frame,
  .home-page .magic-hero-frame--shanghai {
    height: 100%;
  }
}

/* Keep the hero in one viewport-height flow after legacy homepage rules load. */
.home-page .magic-hero {
  display: flex !important;
  flex-direction: column !important;
  height: 100dvh !important;
  min-height: 0 !important;
}

.home-page .magic-hero-content {
  position: relative !important;
  flex: 0 0 clamp(250px, 38dvh, 350px) !important;
  min-height: 0 !important;
}

.home-page .magic-hero-frame,
.home-page .magic-hero-frame--shanghai {
  position: relative !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
}

@media (max-width: 900px) {
  .home-page .magic-hero-content {
    flex-basis: clamp(220px, 35dvh, 300px) !important;
  }
}

@media (max-width: 560px) {
  .home-page .magic-hero-content {
    flex-basis: clamp(210px, 36dvh, 270px) !important;
  }

  .home-page .magic-hero h1 {
    font-size: clamp(30px, 8.5vw, 44px);
  }
}

/* Taste pass: preserve the original half-screen image composition. */
.home-page .magic-hero {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100dvh !important;
  height: 100dvh !important;
  background: #f5f7f8 !important;
}

.home-page .magic-hero-frame,
.home-page .magic-hero-frame--shanghai {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  flex: 1 1 50dvh !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
}

.home-page .magic-hero-frame > .decoded-hero-picture > img {
  object-fit: cover !important;
  object-position: center 58% !important;
}

.home-page .magic-hero-content {
  position: relative !important;
  inset: auto !important;
  z-index: 3 !important;
  display: flex !important;
  flex: 0 0 50dvh !important;
  align-items: flex-end !important;
  min-height: 0 !important;
  padding: 104px max(52px, calc((100% - 1400px) / 2)) clamp(34px, 5dvh, 52px) !important;
  background: #f5f7f8 !important;
  border-bottom: 1px solid rgba(16, 42, 64, 0.12);
}

.home-page .sanhua-hero-copy {
  width: min(1100px, 88vw) !important;
  margin: 0 !important;
}

.home-page .sanhua-poster-heading::before {
  content: none !important;
  display: none !important;
}

.home-page .magic-hero h1 {
  max-width: 1100px !important;
  color: #102a40 !important;
  font-size: clamp(48px, 5.4vw, 78px) !important;
  font-weight: 600 !important;
  line-height: 1.02 !important;
  text-shadow: none !important;
}

.home-page .sanhua-poster-line,
.home-page .sanhua-poster-line--accent,
.home-page .sanhua-poster-word--deep,
.home-page .sanhua-poster-word--service,
.home-page .magic-aurora-text-fill {
  width: auto !important;
  margin-left: 0 !important;
  color: #102a40 !important;
  -webkit-text-fill-color: #102a40 !important;
  font-weight: inherit !important;
}

@media (max-width: 900px) {
  .home-page .magic-hero-content {
    flex-basis: 46dvh !important;
    padding: 94px 24px 30px !important;
    background: #f5f7f8 !important;
  }

  .home-page .sanhua-hero-copy {
    width: min(760px, 94vw) !important;
  }

  .home-page .magic-hero h1 {
    font-size: clamp(42px, 8vw, 64px) !important;
  }
}

@media (max-width: 560px) {
  .home-page .magic-hero-content {
    flex-basis: 44dvh !important;
    padding: 82px 18px 24px !important;
  }

  .home-page .magic-hero h1 {
    font-size: clamp(34px, 10vw, 48px) !important;
    line-height: 1.08 !important;
  }
}

/* Palette pass: use the supplied sky blue and cream for the hero copy block. */
.home-page .magic-hero,
.home-page .magic-hero-content {
  background: #ffffff !important;
}

.home-page .magic-hero-content {
  border-bottom-color: rgba(2, 145, 218, 0.24) !important;
}

.home-page .magic-hero h1,
.home-page .sanhua-poster-line,
.home-page .sanhua-poster-line--accent,
.home-page .sanhua-poster-word--deep,
.home-page .sanhua-poster-word--service,
.home-page .magic-aurora-text-fill {
  color: #0291da !important;
  -webkit-text-fill-color: #0291da !important;
  /* 这层蓝色描述是早期版本，颜色已被后面的纸色规则覆盖；但 h1 元素本身的
     text-shadow 没人覆盖，14px 的蓝色模糊会在标题外沿留一圈光。一并收紧。 */
  text-shadow: 0 1px 2px rgba(2, 145, 218, 0.1) !important;
}

.home-page .magic-hero h1 {
  font-weight: 520 !important;
}

.home-page .magic-hero h1::before,
.home-page .magic-hero h1::after {
  color: color-mix(in srgb, #0291da 68%, #fffbea) !important;
}

/* ==========================================================================
   2026-08-03 full-bleed pass
   The skyline now fills the whole first viewport and the copy sits on top of
   it as an editorial overlay. This block supersedes the earlier half-screen
   "Taste pass" and the white "Palette pass" above.
   ========================================================================== */
.home-page .magic-hero {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fbfaf7 !important;
}

/* Photo layer: absolutely fills the viewport. */
.home-page .magic-hero-frame,
.home-page .magic-hero-frame--shanghai {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  flex: none !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fbfaf7 !important;
  box-shadow: none !important;
}

.home-page .magic-hero-frame > .decoded-hero-picture,
.home-page .magic-hero-frame > .decoded-hero-picture > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.home-page .magic-hero-frame > .decoded-hero-picture > img {
  object-fit: cover !important;
  object-position: center 46% !important;
  opacity: 1 !important;
  clip-path: inset(0) !important;
  transform: none !important;
  /* 这是天际线主图 filter 的最终落点：同选择器在本文件里出现四次
     （142 / 153 / 360 / 505 行），带 !important 的这一条最后生效。
     按要求恢复原片饱和：不再压 saturate，原图的蓝天与江面本来就是成片
     调过的，压到 .82 反而发灰。留 none 让浏览器直出。 */
  filter: none !important;
}

/* 照片零滤镜：不铺任何压暗层，保持原片通透。 */
.home-page .magic-hero-frame::after {
  content: none !important;
  display: none !important;
}

/* Copy layer: overlay, aligned to the bottom-left of the viewport. */
.home-page .magic-hero-content {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  flex: none !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  /* Top padding alone places the headline now that it is the only child.
     24dvh lands it at y~216 on a 900px viewport and the left inset moves it
     off the edge, pulling the block toward the centre of the frame. Both stay
     inside the sky: per-row sampling of the photo keeps min luminance >=0.36
     down to y~480, where the tower silhouette starts. */
  padding: clamp(170px, 24dvh, 258px) max(104px, calc((100% - 1560px) / 2)) clamp(48px, 7dvh, 88px) !important;
  background: none !important;
  border: 0 !important;
  isolation: isolate !important;
}

.home-page .sanhua-hero-copy {
  display: flex !important;
  flex-direction: column !important;
  /* One child (the heading) since the eyebrow, lede and metric row were
     removed, so there is no gap left to distribute. */
  gap: 0 !important;
  width: min(1560px, 100%) !important;
  max-width: none !important;
  margin: 0 !important;
  text-align: left !important;
}

.home-page .sanhua-poster-heading {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  min-width: 0 !important;
}

/* Headline: open leading, generous optical tracking. */
.home-page .magic-hero h1 {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(2px, 0.5dvh, 10px) !important;
  width: 100% !important;
  max-width: 22em !important;
  margin: 0 !important;
  color: #12314a !important;
  /* Songti SC and Source Han Serif SC are not installed here -- rasterising the
     text shows their ink identical to a bogus font name, so Noto Serif SC is
     what actually renders. It carries a genuine 500 (ink +11.8% over 400),
     so the weight below is a real step and not a synthesised one. */
  /* 2026-08-07: STSong/SimSun inserted before the sans fallbacks. Without them a
     Windows visitor who lacks Noto Serif SC falls straight through to Microsoft
     YaHei UI -- a sans -- and the headline loses its serif identity, while an
     iPad picks up Songti SC. This was the only one of 14 serif stacks in the
     project missing a Windows Song fallback. */
  font-family: "Songti SC", "Source Han Serif SC", "Noto Serif SC", "STSong", "SimSun", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif !important;
  font-size: clamp(30px, 3.1vw, 50px) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  text-align: left !important;
  /* No white halo. A light outline around dark type on a pale sky reads as a
     cut-out edge; the sky here is already bright enough for 11:1 contrast
     without it. */
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased !important;
  transform: none !important;
}

/* Neutralise the theme's aurora gradient on the words themselves. The line
   elements are deliberately left out: they carry the entrance animation, and
   animation/filter with !important here would win over the keyframes. */
.home-page .sanhua-poster-word--deep,
.home-page .magic-aurora-text-fill {
  display: inline !important;
  width: auto !important;
  margin-left: 0 !important;
  background: none !important;
  color: #102a40 !important;
  -webkit-text-fill-color: #102a40 !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-shadow: inherit !important;
  animation: none !important;
  filter: none !important;
}

.home-page .sanhua-poster-line,
.home-page .sanhua-poster-line--accent {
  width: auto !important;
  margin-left: 0 !important;
  background: none !important;
  color: #102a40 !important;
  -webkit-text-fill-color: #102a40 !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-shadow: inherit !important;
}

.home-page .sanhua-poster-line {
  display: block !important;
  white-space: normal !important;
}

/* 全球资源 reads exactly like the rest of the line now: no underscore, no
   colour shift. The rule stays only to neutralise the theme's aurora styling,
   which still targets this word. */
.home-page .sanhua-poster-word--service {
  color: #102a40 !important;
  -webkit-text-fill-color: #102a40 !important;
  font-weight: inherit !important;
  /* Must be reset explicitly: the earlier palette pass put a blue glow on this
     selector, and `text-shadow: inherit` on the sibling word rules does not
     reach it. */
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Navbar sits over a dark photo now, so it must not paint white.
   Only apply transparency when the hero is still in viewport. */
.home-page .navbar:not(.is-resized) {
  background: transparent !important;
}

/* Floating state: the pill (.nav-container) is the only thing that should
   paint. The bar itself stays a transparent positioning shell -- painting it
   too put a full-width band behind the pill, which read as the old navbar
   showing through. */
.home-page .navbar.is-resized {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  .home-page .magic-hero-content {
    flex: none !important;
    flex-basis: auto !important;
    height: 100% !important;
    padding: 96px 22px clamp(40px, 7dvh, 64px) !important;
    background: none !important;
  }

  .home-page .magic-hero-frame,
  .home-page .magic-hero-frame--shanghai {
    height: 100% !important;
  }

  .home-page .magic-hero-frame > .decoded-hero-picture > img {
    object-position: center 42% !important;
  }

  .home-page .sanhua-hero-copy {
    width: 100% !important;
  }

  .home-page .magic-hero h1 {
    max-width: none !important;
    font-size: clamp(36px, 8.4vw, 60px) !important;
    line-height: 1.18 !important;
    letter-spacing: 0.04em !important;
  }
}

@media (max-width: 560px) {
  .home-page .magic-hero-content {
    padding: 84px 18px 34px !important;
  }

  .home-page .magic-hero h1 {
    font-size: clamp(30px, 9vw, 42px) !important;
  }
}

/* Editorial hero refinement: the skyline remains the visual anchor while the
   copy reads like a restrained publication cover. */
/* 文案上移，压在天际线顶部那条干净的蓝上，避开中间那排云 ——
   云是白的，白字压上去就没了。原本 146–196px 正好落在云带上。 */
.home-page .magic-hero-content {
  padding: clamp(104px, 13dvh, 138px) max(88px, calc((100% - 1560px) / 2)) 56px !important;
}

.home-page .sanhua-hero-copy {
  gap: clamp(18px, 2.2dvh, 24px) !important;
  width: min(1180px, 100%) !important;
}

/* 三层文字统一取开屏 loading 的纸色 #fbfaf7（intro-elegant.css 的 --sbc-paper），
   开屏收起后颜色是连着的。天空是浅蓝、局部还有白云，暖白字需要压深一点才立
   得住，但阴影必须"紧"：大模糊半径（原来是 10–20px）在浅色字周围散成一圈光
   晕，看着像字在发光。改成 1–3px 的贴身投影 —— 只吃掉字边缘那一点对比度不
   足，不产生光圈。字重顺带各加一档，靠笔画本身撑起可读性，而不是靠阴影。 */
.home-page .sanhua-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  color: rgba(251, 250, 247, 0.94) !important;
  text-shadow: 0 1px 2px rgba(12, 34, 54, 0.42);
  font-family: "SBC Body Sans", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.4;
}

.home-page .sanhua-hero-eyebrow::before {
  width: 42px;
  height: 1px;
  background: currentColor;
  content: "";
}

.home-page .magic-hero h1 {
  gap: 0.04em !important;
  max-width: 13em !important;
  font-size: clamp(50px, 4.5vw, 72px) !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

.home-page .sanhua-poster-line--accent {
  margin-left: clamp(54px, 6vw, 112px) !important;
}

.home-page .sanhua-poster-word--service {
  color: #fbfaf7 !important;
  -webkit-text-fill-color: #fbfaf7 !important;
}

/* 第一行标题原本继承 .magic-hero h1 的深色，两行现在都取纸色。
   text-shadow 必须带 !important：本文件前面 .sanhua-poster-line 与
   .sanhua-poster-word--service 两处都写了 text-shadow: none !important
   （深色字在浅天空上不需要阴影），不加权重这层阴影会被它们清掉。
   大字号最容易看出光晕，所以这层收得最紧：只留 1px 贴身投影。 */
.home-page .magic-hero h1 .sanhua-poster-line,
.home-page .magic-hero h1 .sanhua-poster-word--service {
  color: #fbfaf7 !important;
  text-shadow: 0 1px 3px rgba(12, 34, 54, 0.34) !important;
}

.home-page .sanhua-hero-lede {
  max-width: 30em;
  margin: 0 0 0 clamp(54px, 6vw, 112px);
  color: rgba(251, 250, 247, 0.94) !important;
  text-shadow: 0 1px 2px rgba(12, 34, 54, 0.42);
  font-family: "SBC Body Sans", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.7;
}

.home-page.sanhua-hero-started .sanhua-hero-eyebrow,
.home-page.sanhua-hero-started .sanhua-hero-lede {
  animation: sanhua-hero-detail-in 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.home-page.sanhua-hero-started .sanhua-hero-eyebrow { animation-delay: 40ms; }
.home-page.sanhua-hero-started .sanhua-hero-lede { animation-delay: 260ms; }

.home-page.sanhua-hero-after-intro.sanhua-hero-started .sanhua-hero-eyebrow { animation-delay: 420ms; }
.home-page.sanhua-hero-after-intro.sanhua-hero-started .sanhua-hero-lede { animation-delay: 640ms; }

@keyframes sanhua-hero-detail-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 900px) {
  .home-page .magic-hero-content {
    padding: 106px 24px 42px !important;
  }

  .home-page .sanhua-hero-copy {
    gap: 16px !important;
  }

  .home-page .magic-hero h1 {
    max-width: 12em !important;
    font-size: clamp(40px, 8vw, 60px) !important;
    line-height: 1.1 !important;
  }

  .home-page .sanhua-poster-line--accent,
  .home-page .sanhua-hero-lede {
    margin-left: clamp(28px, 7vw, 64px) !important;
  }
}

@media (max-width: 560px) {
  .home-page .magic-hero-content {
    padding: 88px 18px 30px !important;
  }

  .home-page .sanhua-hero-eyebrow {
    gap: 10px;
    font-size: 9px;
    letter-spacing: 0.12em;
  }

  .home-page .sanhua-hero-eyebrow::before { width: 28px; }

  .home-page .magic-hero h1 {
    font-size: clamp(34px, 10vw, 48px) !important;
  }

  .home-page .sanhua-hero-lede {
    max-width: 22em;
    font-size: 13px;
    letter-spacing: 0.04em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page.sanhua-hero-started .sanhua-hero-eyebrow,
  .home-page.sanhua-hero-started .sanhua-hero-lede {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Operational figures sit directly on the river image as a quiet baseline,
   preserving the full-bleed photograph instead of introducing another card. */
.home-page .sanhua-hero-facts {
  position: absolute;
  right: auto;
  bottom: clamp(30px, 5dvh, 52px);
  left: max(88px, calc((100% - 1560px) / 2));
  z-index: 4;
  display: grid;
  width: min(760px, calc(100% - 176px));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 72px);
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(251, 250, 247, 0.72);
  color: #fbfaf7;
  text-shadow: 0 1px 3px rgba(12, 34, 54, 0.42);
}

.home-page .sanhua-hero-facts > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.home-page .sanhua-hero-facts dt {
  order: 2;
  margin: 0;
  font-family: "SBC Body Sans", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.35;
}

.home-page .sanhua-hero-facts dd {
  order: 1;
  margin: 0;
  font-family: "SBC Body Sans", "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
  font-size: clamp(25px, 2.4vw, 38px);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1;
}

.home-page.sanhua-hero-started .sanhua-hero-facts {
  animation: sanhua-hero-facts-in 720ms 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.home-page.sanhua-hero-after-intro.sanhua-hero-started .sanhua-hero-facts {
  animation-delay: 760ms;
}

@keyframes sanhua-hero-facts-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 900px) {
  .home-page .sanhua-hero-facts {
    right: 24px;
    bottom: 30px;
    left: 24px;
    width: auto;
    gap: clamp(16px, 5vw, 42px);
    padding-top: 14px;
  }
}

@media (max-width: 560px) {
  .home-page .sanhua-hero-facts {
    right: 18px;
    bottom: 22px;
    left: 18px;
    gap: 12px;
    padding-top: 12px;
  }

  .home-page .sanhua-hero-facts dt {
    font-size: 10px;
    letter-spacing: 0.04em;
  }

  .home-page .sanhua-hero-facts dd {
    font-size: clamp(20px, 6.4vw, 28px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page.sanhua-hero-started .sanhua-hero-facts {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* The approved 2026-08-06 skyline fades to white on the left, so the hero
   copy and operating figures use the ink colour instead of the former
   light-on-sky treatment. */
.home-page .magic-hero .sanhua-hero-eyebrow,
.home-page .magic-hero h1 .sanhua-poster-line,
.home-page .magic-hero h1 .sanhua-poster-line > span,
.home-page .magic-hero h1 .sanhua-poster-word--service,
.home-page .sanhua-hero-facts {
  color: #102a40 !important;
  -webkit-text-fill-color: #102a40 !important;
  text-shadow: none !important;
}

.home-page .sanhua-hero-facts {
  border-top-color: rgba(16, 42, 64, 0.34);
}

/* Place the operating figures immediately below the hero statement. The
   three left-aligned groups share two simple dividers and no top rule. */
.home-page .sanhua-hero-facts {
  top: clamp(330px, 40dvh, 380px);
  right: auto;
  bottom: auto;
  left: max(88px, calc((100% - 1560px) / 2));
  width: min(884px, calc(100% - 176px));
  gap: 0;
  padding: 0;
  border-top: 0;
  color: #fbfaf7 !important;
  -webkit-text-fill-color: #fbfaf7 !important;
  text-align: left;
  text-shadow: 0 1px 3px rgba(12, 34, 54, 0.42) !important;
}

.home-page .sanhua-hero-facts > div {
  align-items: flex-start;
  min-height: 66px;
  padding: 0 clamp(24px, 3vw, 50px);
  text-align: left;
}

.home-page .sanhua-hero-facts > div:first-child {
  padding-left: 0;
}

.home-page .sanhua-hero-facts > div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.78);
}

@media (max-width: 900px) {
  .home-page .sanhua-hero-facts {
    top: clamp(300px, 46dvh, 380px);
    right: 24px;
    bottom: auto;
    left: 24px;
    width: auto;
    gap: 0;
    padding: 0;
  }

  .home-page .sanhua-hero-facts > div {
    padding: 0 clamp(14px, 4vw, 30px);
  }

  .home-page .sanhua-hero-facts > div:first-child {
    padding-left: 0;
  }
}

@media (max-width: 560px) {
  .home-page .sanhua-hero-facts {
    top: clamp(290px, 50dvh, 330px);
    right: 18px;
    bottom: auto;
    left: 18px;
    padding: 0;
  }

  .home-page .sanhua-hero-facts > div {
    min-height: 54px;
    padding: 0 12px;
  }

  .home-page .sanhua-hero-facts > div:first-child {
    padding-left: 0;
  }
}

/* The three headline facts need stronger hierarchy and a slightly tighter
   rhythm while keeping the original left edge and divider treatment. */
.home-page .sanhua-hero-facts {
  width: min(828px, calc(100% - 176px));
}

.home-page .sanhua-hero-facts > div {
  padding-right: clamp(20px, 2.4vw, 40px);
  padding-left: clamp(20px, 2.4vw, 40px);
}

.home-page .sanhua-hero-facts > div:first-child {
  padding-left: 0;
}

.home-page .sanhua-hero-facts dt {
  font-size: clamp(15px, 1.05vw, 17px);
}

.home-page .sanhua-hero-facts dd {
  font-size: clamp(33px, 2.8vw, 46px);
}

@media (max-width: 900px) {
  .home-page .sanhua-hero-facts {
    width: auto;
  }
}

@media (max-width: 560px) {
  .home-page .sanhua-hero-facts > div {
    padding-right: 8px;
    padding-left: 8px;
  }

  .home-page .sanhua-hero-facts > div:first-child {
    padding-left: 0;
  }

  .home-page .sanhua-hero-facts dt {
    font-size: 14px;
  }

  .home-page .sanhua-hero-facts dd {
    font-size: clamp(28px, 7.4vw, 34px);
  }
}

@media (min-width: 901px) {
  .home-page .sanhua-hero-facts {
    width: 610px;
    grid-template-columns: 180px 180px 250px;
  }

  .home-page .sanhua-hero-facts > div {
    padding-right: 24px;
    padding-left: 24px;
  }

  .home-page .sanhua-hero-facts > div:first-child {
    padding-left: 0;
  }

  .home-page .sanhua-hero-facts dt {
    font-size: clamp(19px, 1.3vw, 21px);
  }

  .home-page .sanhua-hero-facts dd {
    font-size: clamp(41px, 3.3vw, 54px);
  }
}

/* Final laptop-hero override. Kept last so the new annotation wins over the
   historical skyline-specific passes above. */
.home-page .magic-hero-frame > .decoded-hero-picture > img {
  object-position: center center !important;
}

.home-page .magic-hero .sanhua-hero-eyebrow {
  color: #12314a !important;
  -webkit-text-fill-color: #12314a !important;
  text-shadow: none !important;
}

.home-page .magic-hero h1 .sanhua-poster-line,
.home-page .magic-hero h1 .sanhua-poster-line > span,
.home-page .magic-hero h1 .sanhua-poster-word--service,
.home-page .magic-hero h1 .sanhua-poster-line--accent,
.home-page .magic-hero h1 .sanhua-poster-line--accent > span {
  color: #111820 !important;
  -webkit-text-fill-color: #111820 !important;
  text-shadow: none !important;
}

.home-page .sanhua-poster-line--accent {
  margin-left: 0 !important;
}

.home-page .sanhua-hero-facts {
  left: max(88px, calc((100% - 1560px) / 2)) !important;
  color: #111820 !important;
  -webkit-text-fill-color: #111820 !important;
  text-shadow: none !important;
}

.home-page .sanhua-hero-facts > div {
  border-left-color: rgba(17, 24, 32, 0.32) !important;
}

.home-page .sanhua-hero-facts dd,
.home-page .sanhua-hero-facts dt {
  color: #111820 !important;
  -webkit-text-fill-color: #111820 !important;
}

@media (min-width: 901px) {
  .home-page .sanhua-hero-facts .sanhua-hero-stat-icon {
    width: 27px;
    height: 27px;
  }

  .home-page .sanhua-hero-facts dd {
    font-size: 31px;
  }

  .home-page .sanhua-hero-facts dt {
    font-size: 15px;
  }
}

/* 2026-08-12 homepage hero annotation: pale laptop photograph with an ink
   editorial system. All text blocks share the headline's left edge. */
.home-page .magic-hero-frame > .decoded-hero-picture > img {
  object-position: center center !important;
}

.home-page .magic-hero .sanhua-hero-eyebrow {
  color: #12314a !important;
  -webkit-text-fill-color: #12314a !important;
  text-shadow: none !important;
}

.home-page .magic-hero h1 .sanhua-poster-line,
.home-page .magic-hero h1 .sanhua-poster-line > span,
.home-page .magic-hero h1 .sanhua-poster-word--service,
.home-page .magic-hero h1 .sanhua-poster-line--accent,
.home-page .magic-hero h1 .sanhua-poster-line--accent > span {
  color: #111820 !important;
  -webkit-text-fill-color: #111820 !important;
  text-shadow: none !important;
}

.home-page .sanhua-poster-line--accent {
  margin-left: 0 !important;
}

.home-page .sanhua-hero-facts {
  left: max(88px, calc((100% - 1560px) / 2)) !important;
  color: #111820 !important;
  -webkit-text-fill-color: #111820 !important;
  text-shadow: none !important;
}

.home-page .sanhua-hero-facts > div {
  border-left-color: rgba(17, 24, 32, 0.32) !important;
}

.home-page .sanhua-hero-facts dd,
.home-page .sanhua-hero-facts dt {
  color: #111820 !important;
  -webkit-text-fill-color: #111820 !important;
}

@media (min-width: 901px) {
  .home-page .sanhua-hero-facts .sanhua-hero-stat-icon {
    width: 27px;
    height: 27px;
  }

  .home-page .sanhua-hero-facts dd {
    font-size: 31px;
  }

  .home-page .sanhua-hero-facts dt {
    font-size: 15px;
  }
}

/* Final hero refinements: the supplied skyline has a bright upper-left field,
   so keep the eyebrow white and align the metric block with the headline. */
.home-page .magic-hero .sanhua-hero-eyebrow {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 1px 3px rgba(12, 34, 54, 0.42) !important;
}

@media (min-width: 901px) {
  .home-page .sanhua-hero-facts {
    left: max(120px, calc((100% - 1560px) / 2 + 32px));
    width: 540px;
    grid-template-columns: 155px 155px 190px;
  }

  .home-page .sanhua-hero-facts > div {
    padding-left: 16px;
    padding-right: 16px;
  }

  .home-page .sanhua-hero-facts > div:first-child {
    padding-left: 0;
  }

  .home-page .sanhua-hero-facts dt {
    font-size: clamp(21px, 1.4vw, 23px);
  }

  .home-page .sanhua-hero-facts dd {
    font-size: clamp(45px, 3.55vw, 60px);
  }
}

/* Latest annotation: replace the former plain figures with the supplied
   icon-and-unit treatment. The data sits directly on the photograph, with
   white Huawen ZhongSong typography and simple vertical dividers. */
.home-page .magic-hero h1 .sanhua-poster-word--service,
.home-page .magic-hero h1 .sanhua-poster-line--accent,
.home-page .magic-hero h1 .sanhua-poster-line--accent > span {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 1px 3px rgba(12, 34, 54, 0.38) !important;
}

.home-page .sanhua-hero-facts {
  left: max(88px, calc((100% - 1560px) / 2));
  bottom: clamp(34px, 6dvh, 58px);
  width: min(760px, calc(100% - 176px));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  border-top: 0;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 1px 3px rgba(12, 34, 54, 0.38) !important;
}

.home-page .sanhua-hero-facts > div {
  display: grid;
  min-height: 70px;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  padding: 0 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.9);
}

.home-page .sanhua-hero-facts > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.home-page .sanhua-hero-facts .sanhua-hero-stat-icon {
  display: inline-flex;
  width: 1.12em;
  height: 1.12em;
  grid-row: 1 / span 2;
  align-items: center;
  justify-content: center;
}

.home-page .sanhua-hero-facts .sanhua-hero-stat-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.home-page .sanhua-hero-facts dd,
.home-page .sanhua-hero-facts dt {
  margin: 0;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-family: "STZhongsong", "华文中宋", "SimSun", serif;
  letter-spacing: 0;
  text-align: left;
}

.home-page .sanhua-hero-facts dd {
  order: initial;
  font-size: clamp(28px, 2.15vw, 36px);
  font-weight: 700;
  line-height: 1.05;
}

.home-page .sanhua-hero-facts dt {
  order: initial;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

@media (max-width: 900px) {
  .home-page .sanhua-hero-facts {
    right: 24px;
    bottom: 30px;
    left: 24px;
    width: auto;
  }

  .home-page .sanhua-hero-facts > div { padding: 0 14px; }
  .home-page .sanhua-hero-facts > div:first-child { padding-left: 0; }
}

@media (max-width: 560px) {
  .home-page .sanhua-hero-facts {
    right: 18px;
    bottom: 22px;
    left: 18px;
  }

  .home-page .sanhua-hero-facts > div {
    min-height: 54px;
    column-gap: 5px;
    padding: 0 7px;
  }

  .home-page .sanhua-hero-facts dd { font-size: clamp(18px, 5.3vw, 26px); }
  .home-page .sanhua-hero-facts dt { font-size: 12px; }
}

/* ==========================================================================
   Final data-bar override (single source of truth for .sanhua-hero-facts).

   Root cause of the stretched layout: an earlier block pinned `top`
   (clamp(330px, 40dvh, 380px)) and a later block pinned `bottom`, so the
   absolutely positioned list spanned almost the whole hero. Its grid row
   stretched to that height, each group stretched with it, and the two text
   rows were pushed apart while the dividers ran the full height. Anchoring to
   the bottom edge only collapses the strip back to its content height.

   Spec: icon + value on the first row, label underneath, white STZhongsong,
   row 1 at 一号 (26pt = 34.7px), row 2 at 小四 (12pt = 16px), groups left
   aligned, white vertical dividers only, no top rule, sitting on the water at
   the bottom of the first screen.
   ========================================================================== */
.home-page .sanhua-hero-facts {
  position: absolute;
  top: auto;
  right: auto;
  bottom: clamp(34px, 6dvh, 58px);
  left: max(88px, calc((100% - 1560px) / 2));
  width: auto;
  max-width: calc(100% - 176px);
  height: auto;
  display: grid;
  grid-template-columns: repeat(3, max-content);
  grid-auto-rows: auto;
  align-items: stretch;
  justify-content: start;
  gap: 0;
  padding: 0;
  border-top: 0;
}

.home-page .sanhua-hero-facts > div {
  display: grid;
  width: auto;
  min-width: 0;
  min-height: 0;
  height: auto;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-content: center;
  justify-content: start;
  column-gap: 10px;
  row-gap: 3px;
  padding: 1px clamp(22px, 2.2vw, 34px);
  border-left: 1px solid rgba(255, 255, 255, 0.85);
  text-align: left;
}

.home-page .sanhua-hero-facts > div:first-child {
  padding-left: 0;
  border-left: 0;
}

/* Icon rides the first row and matches the height of the value beside it. */
.home-page .sanhua-hero-facts .sanhua-hero-stat-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  grid-column: 1;
  grid-row: 1;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.home-page .sanhua-hero-facts dd {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 34.7px;
  font-weight: 700;
  line-height: 1.08;
  white-space: nowrap;
}

.home-page .sanhua-hero-facts dt {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .home-page .sanhua-hero-facts {
    bottom: 30px;
    left: 24px;
    max-width: calc(100% - 48px);
  }

  .home-page .sanhua-hero-facts > div {
    padding: 1px clamp(14px, 3.4vw, 24px);
    column-gap: 8px;
  }

  .home-page .sanhua-hero-facts > div:first-child { padding-left: 0; }

  .home-page .sanhua-hero-facts .sanhua-hero-stat-icon {
    width: 24px;
    height: 24px;
  }

  .home-page .sanhua-hero-facts dd { font-size: 27px; }
  .home-page .sanhua-hero-facts dt { font-size: 14px; }
}

@media (max-width: 560px) {
  .home-page .sanhua-hero-facts {
    bottom: 22px;
    left: 18px;
    max-width: calc(100% - 36px);
  }

  .home-page .sanhua-hero-facts > div {
    padding: 1px 10px;
    column-gap: 6px;
    row-gap: 2px;
  }

  .home-page .sanhua-hero-facts > div:first-child { padding-left: 0; }

  .home-page .sanhua-hero-facts .sanhua-hero-stat-icon {
    width: 18px;
    height: 18px;
  }

  .home-page .sanhua-hero-facts dd { font-size: 21px; }
  .home-page .sanhua-hero-facts dt { font-size: 12px; }
}

/* ==========================================================================
   Desktop-only sizing pass for the data bar (verified at desktop ratio only;
   the tablet/mobile blocks above are intentionally left as they were).

   The strip read slightly small against the skyline, so the whole group is
   nudged right of the headline's left edge and scaled up roughly 15%. This
   deliberately goes past the handoff doc's 一号/小四 figures (34.7px/16px)
   because the on-screen result at desktop width was under-weight.
   ========================================================================== */
@media (min-width: 901px) {
  .home-page .sanhua-hero-facts {
    left: max(136px, calc((100% - 1560px) / 2 + 48px));
    max-width: calc(100% - 200px);
  }

  .home-page .sanhua-hero-facts > div {
    column-gap: 12px;
    row-gap: 4px;
    padding: 1px clamp(28px, 2.7vw, 42px);
  }

  .home-page .sanhua-hero-facts > div:first-child {
    padding-left: 0;
  }

  .home-page .sanhua-hero-facts .sanhua-hero-stat-icon {
    width: 35px;
    height: 35px;
  }

  .home-page .sanhua-hero-facts dd {
    font-size: 40px;
  }

  .home-page .sanhua-hero-facts dt {
    font-size: 18.5px;
  }
}

/* 2026-08-12 final laptop hero annotation override.
   This block must remain at the end of the file because the stylesheet still
   contains earlier skyline-specific tuning passes. */
.home-page .magic-hero-frame > .decoded-hero-picture > img {
  object-position: center center !important;
}

.home-page .magic-hero .sanhua-hero-eyebrow {
  color: #12314a !important;
  -webkit-text-fill-color: #12314a !important;
  text-shadow: none !important;
}

.home-page .magic-hero h1 .sanhua-poster-line,
.home-page .magic-hero h1 .sanhua-poster-line > span,
.home-page .magic-hero h1 .sanhua-poster-word--service,
.home-page .magic-hero h1 .sanhua-poster-line--accent,
.home-page .magic-hero h1 .sanhua-poster-line--accent > span {
  color: #111820 !important;
  -webkit-text-fill-color: #111820 !important;
  text-shadow: none !important;
}

.home-page .sanhua-poster-line--accent {
  margin-left: 0 !important;
}

.home-page .sanhua-hero-facts {
  left: max(88px, calc((100% - 1560px) / 2)) !important;
  color: #111820 !important;
  -webkit-text-fill-color: #111820 !important;
  text-shadow: none !important;
}

.home-page .sanhua-hero-facts > div {
  border-left-color: rgba(17, 24, 32, 0.32) !important;
}

.home-page .sanhua-hero-facts dd,
.home-page .sanhua-hero-facts dt {
  color: #111820 !important;
  -webkit-text-fill-color: #111820 !important;
}

@media (min-width: 901px) {
  .home-page .sanhua-hero-facts .sanhua-hero-stat-icon {
    width: 27px !important;
    height: 27px !important;
  }

  .home-page .sanhua-hero-facts dd {
    font-size: 31px !important;
  }

  .home-page .sanhua-hero-facts dt {
    font-size: 15px !important;
  }
}