/* Shared sweepingcorp-style title swap. Only the label layers move. */
:is(p, a, button):has(> .cta-label-hover) {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

:is(p, a, button):has(> .cta-label-hover) > .cta-label {
  display: block !important;
  position: static !important;
  grid-area: 1 / 1 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  transform: translateY(0) scale(1) !important;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1) !important;
}

:is(p, a, button):has(> .cta-label-hover) > .cta-label-hover[hidden] {
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: max-content !important;
  height: auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
  transform: translate(-50%, calc(50% + 100%)) scale(.9) !important;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1) !important;
}

:is(p, a, button):has(> .cta-label-hover):hover > .cta-label,
:is(p, a, button):has(> .cta-label-hover):focus-visible > .cta-label {
  transform: translateY(-100%) scale(.7) !important;
}

:is(p, a, button):has(> .cta-label-hover):hover > .cta-label-hover[hidden],
:is(p, a, button):has(> .cta-label-hover):focus-visible > .cta-label-hover[hidden] {
  top: 50% !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

/* The clickable surface is often a wrapper around the title paragraph. Keep
 * the hover trigger on that whole surface so hovering its background also
 * runs the title swap. */
:is(
  .banner-content1-left .btn,
  .banner-content2-left .btn,
  .cases .section1-right,
  .about .section1-right,
  .material .section2 > a,
  .banner .left > .section3 > .btn,
  .solution > .inner > .btn,
  .service .banner .section3 .btn,
  .banner:has(> .inner > .fabrication) > .inner > .fabrication > .section1 > .section1-right > .upload,
  .banner:has(> .inner > .fabrication) > .inner > .material > .section2 > a,
  .related-products__action,
  .related-articles .section1-right
):has(> p > .cta-label-hover):hover > p > .cta-label,
:is(
  .banner-content1-left .btn,
  .banner-content2-left .btn,
  .cases .section1-right,
  .about .section1-right,
  .material .section2 > a,
  .banner .left > .section3 > .btn,
  .solution > .inner > .btn,
  .service .banner .section3 .btn,
  .banner:has(> .inner > .fabrication) > .inner > .fabrication > .section1 > .section1-right > .upload,
  .banner:has(> .inner > .fabrication) > .inner > .material > .section2 > a,
  .related-products__action,
  .related-articles .section1-right
):has(> p > .cta-label-hover):focus-within > p > .cta-label {
  transform: translateY(-100%) scale(.7) !important;
}

:is(
  .banner-content1-left .btn,
  .banner-content2-left .btn,
  .cases .section1-right,
  .about .section1-right,
  .material .section2 > a,
  .banner .left > .section3 > .btn,
  .solution > .inner > .btn,
  .service .banner .section3 .btn,
  .banner:has(> .inner > .fabrication) > .inner > .fabrication > .section1 > .section1-right > .upload,
  .banner:has(> .inner > .fabrication) > .inner > .material > .section2 > a,
  .related-products__action,
  .related-articles .section1-right
):has(> p > .cta-label-hover):hover > p > .cta-label-hover[hidden],
:is(
  .banner-content1-left .btn,
  .banner-content2-left .btn,
  .cases .section1-right,
  .about .section1-right,
  .material .section2 > a,
  .banner .left > .section3 > .btn,
  .solution > .inner > .btn,
  .service .banner .section3 .btn,
  .banner:has(> .inner > .fabrication) > .inner > .fabrication > .section1 > .section1-right > .upload,
  .banner:has(> .inner > .fabrication) > .inner > .material > .section2 > a,
  .related-products__action,
  .related-articles .section1-right
):has(> p > .cta-label-hover):focus-within > p > .cta-label-hover[hidden] {
  top: 50% !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

/* Keep the homepage source label outside the clipping window while hovered. */
#app .cases .section1-right p:hover > .cta-label,
#app .cases .section1-right:focus-within p > .cta-label,
#app .about .section1-right p:hover > .cta-label,
#app .about .section1-right:focus-within p > .cta-label,
#app .process .section2 .more:hover > .cta-label,
#app .process .section2 .more:focus-visible > .cta-label { transform: translateY(-200%) scale(.7) !important; }

#app .cases .section1-right p:hover > .cta-label-hover[hidden],
#app .cases .section1-right:focus-within p > .cta-label-hover[hidden],
#app .about .section1-right p:hover > .cta-label-hover[hidden],
#app .about .section1-right:focus-within p > .cta-label-hover[hidden],
#app .process .section2 .more:hover > .cta-label-hover[hidden],
#app .process .section2 .more:focus-visible > .cta-label-hover[hidden] {
  top: 50% !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

/* Final homepage-only override: the source label must clear the clipping
 * window completely before the translated copy is shown. */
#app .cases .section1-right p:hover > .cta-label,
#app .cases .section1-right:focus-within p > .cta-label,
#app .about .section1-right p:hover > .cta-label,
#app .about .section1-right:focus-within p > .cta-label,
#app .process .section2 .more:hover > .cta-label,
#app .process .section2 .more:focus-visible > .cta-label {
  transform: translateY(-200%) scale(.7) !important;
}

#app .cases .section1-right p:hover > .cta-label-hover[hidden],
#app .cases .section1-right:focus-within p > .cta-label-hover[hidden],
#app .about .section1-right p:hover > .cta-label-hover[hidden],
#app .about .section1-right:focus-within p > .cta-label-hover[hidden],
#app .process .section2 .more:hover > .cta-label-hover[hidden],
#app .process .section2 .more:focus-visible > .cta-label-hover[hidden] {
  top: 50% !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

/* Final high-specificity pass. Several legacy page rules use direct class
 * chains with !important, so the shared rules must be scoped to #app to win
 * without changing any surface, image, or icon styles. */
#app :is(
  .banner-content1-left .btn > p,
  .banner-content2-left .btn > p,
  .cases .section1-right > p,
  .about .section1-right > p,
  .material .section2 > a > p,
  .related-articles .section1-right > p,
  .related-products__action > p,
  .service .banner .section3 .btn > p,
  .solution > .inner > .btn > p,
  .banner:has(> .inner > .fabrication) > .inner > .fabrication > .section1 > .section1-right > .upload > p,
  .banner:has(> .inner > .fabrication) > .inner > .material > .section2 > a > p
):has(> .cta-label-hover) {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

#app :is(
  .banner-content1-left .btn > p,
  .banner-content2-left .btn > p,
  .cases .section1-right > p,
  .about .section1-right > p,
  .material .section2 > a > p,
  .related-articles .section1-right > p,
  .related-products__action > p,
  .service .banner .section3 .btn > p,
  .solution > .inner > .btn > p,
  .banner:has(> .inner > .fabrication) > .inner > .fabrication > .section1 > .section1-right > .upload > p,
  .banner:has(> .inner > .fabrication) > .inner > .material > .section2 > a > p
):has(> .cta-label-hover) > .cta-label {
  display: block !important;
  position: static !important;
  grid-area: 1 / 1 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  transform: translateY(0) scale(1) !important;
}

#app :is(
  .banner-content1-left .btn > p,
  .banner-content2-left .btn > p,
  .cases .section1-right > p,
  .about .section1-right > p,
  .material .section2 > a > p,
  .related-articles .section1-right > p,
  .related-products__action > p,
  .service .banner .section3 .btn > p,
  .solution > .inner > .btn > p,
  .banner:has(> .inner > .fabrication) > .inner > .fabrication > .section1 > .section1-right > .upload > p,
  .banner:has(> .inner > .fabrication) > .inner > .material > .section2 > a > p
):has(> .cta-label-hover) > .cta-label-hover[hidden] {
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: max-content !important;
  height: auto !important;
  white-space: nowrap !important;
  transform: translate(-50%, calc(50% + 100%)) scale(.9) !important;
}

#app :is(
  .banner-content1-left .btn,
  .banner-content2-left .btn,
  .cases .section1-right,
  .about .section1-right,
  .material .section2 > a,
  .related-articles .section1-right,
  .related-products__action,
  .service .banner .section3 .btn,
  .solution > .inner > .btn,
  .banner:has(> .inner > .fabrication) > .inner > .fabrication > .section1 > .section1-right > .upload,
  .banner:has(> .inner > .fabrication) > .inner > .material > .section2 > a
):has(> p > .cta-label-hover):hover > p > .cta-label,
#app :is(
  .banner-content1-left .btn,
  .banner-content2-left .btn,
  .cases .section1-right,
  .about .section1-right,
  .material .section2 > a,
  .related-articles .section1-right,
  .related-products__action,
  .service .banner .section3 .btn,
  .solution > .inner > .btn,
  .banner:has(> .inner > .fabrication) > .inner > .fabrication > .section1 > .section1-right > .upload,
  .banner:has(> .inner > .fabrication) > .inner > .material > .section2 > a
):has(> p > .cta-label-hover):focus-within > p > .cta-label {
  transform: translateY(-100%) scale(.7) !important;
}

#app :is(
  .banner-content1-left .btn,
  .banner-content2-left .btn,
  .cases .section1-right,
  .about .section1-right,
  .material .section2 > a,
  .related-articles .section1-right,
  .related-products__action,
  .service .banner .section3 .btn,
  .solution > .inner > .btn,
  .banner:has(> .inner > .fabrication) > .inner > .fabrication > .section1 > .section1-right > .upload,
  .banner:has(> .inner > .fabrication) > .inner > .material > .section2 > a
):has(> p > .cta-label-hover):hover > p > .cta-label-hover[hidden],
#app :is(
  .banner-content1-left .btn,
  .banner-content2-left .btn,
  .cases .section1-right,
  .about .section1-right,
  .material .section2 > a,
  .related-articles .section1-right,
  .related-products__action,
  .service .banner .section3 .btn,
  .solution > .inner > .btn,
  .banner:has(> .inner > .fabrication) > .inner > .fabrication > .section1 > .section1-right > .upload,
  .banner:has(> .inner > .fabrication) > .inner > .material > .section2 > a
):has(> p > .cta-label-hover):focus-within > p > .cta-label-hover[hidden] {
  top: 50% !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

#app .process .section2 .more:has(> .cta-label-hover) {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}
#app .process .section2 .more:has(> .cta-label-hover) > .cta-label {
  display: block !important;
  position: static !important;
  grid-area: 1 / 1 !important;
  transform: translateY(0) scale(1) !important;
}
#app .process .section2 .more:has(> .cta-label-hover) > .cta-label-hover[hidden] {
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: max-content !important;
  transform: translate(-50%, calc(50% + 100%)) scale(.9) !important;
}
#app .process .section2 .more:has(> .cta-label-hover):hover > .cta-label,
#app .process .section2 .more:has(> .cta-label-hover):focus-visible > .cta-label {
  transform: translateY(-200%) scale(.7) !important;
}
#app .process .section2 .more:has(> .cta-label-hover):hover > .cta-label-hover[hidden],
#app .process .section2 .more:has(> .cta-label-hover):focus-visible > .cta-label-hover[hidden] {
  transform: translate(-50%, -50%) scale(1) !important;
}

#app .cases .section1-right:has(> p > .cta-label-hover):hover > p > .cta-label,
#app .cases .section1-right:has(> p > .cta-label-hover):focus-within > p > .cta-label,
#app .about .section1-right:has(> p > .cta-label-hover):hover > p > .cta-label,
#app .about .section1-right:has(> p > .cta-label-hover):focus-within > p > .cta-label {
  transform: translateY(-200%) scale(.7) !important;
}
#app .cases .section1-right:has(> p > .cta-label-hover):hover > p > .cta-label-hover[hidden],
#app .cases .section1-right:has(> p > .cta-label-hover):focus-within > p > .cta-label-hover[hidden],
#app .about .section1-right:has(> p > .cta-label-hover):hover > p > .cta-label-hover[hidden],
#app .about .section1-right:has(> p > .cta-label-hover):focus-within > p > .cta-label-hover[hidden] {
  top: 50% !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

/* Homepage process cards keep both title layers directly on the anchor. */
:is(.process .section2 .more):has(> .cta-label-hover) {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}
:is(.process .section2 .more):has(> .cta-label-hover) > .cta-label {
  display: block !important;
  position: static !important;
  grid-area: 1 / 1 !important;
  transform: translateY(0) scale(1) !important;
}
:is(.process .section2 .more):has(> .cta-label-hover) > .cta-label-hover[hidden] {
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: max-content !important;
  transform: translate(-50%, calc(50% + 100%)) scale(.9) !important;
}
:is(.process .section2 .more):has(> .cta-label-hover):hover > .cta-label,
:is(.process .section2 .more):has(> .cta-label-hover):focus-visible > .cta-label {
  transform: translateY(-100%) scale(.7) !important;
}
:is(.process .section2 .more):has(> .cta-label-hover):hover > .cta-label-hover[hidden],
:is(.process .section2 .more):has(> .cta-label-hover):focus-visible > .cta-label-hover[hidden] {
  transform: translate(-50%, -50%) scale(1) !important;
}

/* Preserve translated labels inside the fixed hero button without clipping
 * the label to the Chinese source width. */
:is(.banner-content1-left .btn > p, .banner-content2-left .btn > p):has(> .cta-label-hover) {
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  width: max-content !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Homepage wrappers have older, more specific rules in index.css. Repeat the
 * title-layer geometry at the same specificity so these declarations win. */
:is(
  .banner-content1-left .btn > p,
  .banner-content2-left .btn > p,
  .cases .section1-right > p,
  .about .section1-right > p,
  .material .section2 > a > p
):has(> .cta-label-hover) {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

:is(
  .banner-content1-left .btn > p,
  .banner-content2-left .btn > p,
  .cases .section1-right > p,
  .about .section1-right > p,
  .material .section2 > a > p
):has(> .cta-label-hover) > .cta-label {
  display: block !important;
  position: static !important;
  grid-area: 1 / 1 !important;
  white-space: nowrap !important;
  transform: translateY(0) scale(1) !important;
}

:is(
  .banner-content1-left .btn > p,
  .banner-content2-left .btn > p,
  .cases .section1-right > p,
  .about .section1-right > p,
  .material .section2 > a > p
):has(> .cta-label-hover) > .cta-label-hover[hidden] {
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: max-content !important;
  white-space: nowrap !important;
  transform: translate(-50%, calc(50% + 100%)) scale(.9) !important;
}

:is(
  .banner-content1-left .btn,
  .banner-content2-left .btn,
  .cases .section1-right,
  .about .section1-right,
  .material .section2 > a
):has(> p > .cta-label-hover):hover > p > .cta-label,
:is(
  .banner-content1-left .btn,
  .banner-content2-left .btn,
  .cases .section1-right,
  .about .section1-right,
  .material .section2 > a
):has(> p > .cta-label-hover):focus-within > p > .cta-label {
  transform: translateY(-100%) scale(.7) !important;
}

:is(
  .banner-content1-left .btn,
  .banner-content2-left .btn,
  .cases .section1-right,
  .about .section1-right,
  .material .section2 > a
):has(> p > .cta-label-hover):hover > p > .cta-label-hover[hidden],
:is(
  .banner-content1-left .btn,
  .banner-content2-left .btn,
  .cases .section1-right,
  .about .section1-right,
  .material .section2 > a
):has(> p > .cta-label-hover):focus-within > p > .cta-label-hover[hidden] {
  top: 50% !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

#app .cases .section1-right p:hover > .cta-label,
#app .cases .section1-right:focus-within p > .cta-label,
#app .about .section1-right p:hover > .cta-label,
#app .about .section1-right:focus-within p > .cta-label,
#app .process .section2 .more:hover > .cta-label,
#app .process .section2 .more:focus-visible > .cta-label { transform: translateY(-200%) scale(.7) !important; }
#app .cases .section1-right p:hover > .cta-label-hover[hidden],
#app .cases .section1-right:focus-within p > .cta-label-hover[hidden],
#app .about .section1-right p:hover > .cta-label-hover[hidden],
#app .about .section1-right:focus-within p > .cta-label-hover[hidden],
#app .process .section2 .more:hover > .cta-label-hover[hidden],
#app .process .section2 .more:focus-visible > .cta-label-hover[hidden] { top: 50% !important; transform: translate(-50%, -50%) scale(1) !important; }

/* The legacy homepage rules can leave a scaled fragment of the source label
 * inside the 50px title window. Hide that fragment during the swap so only
 * the centered translated copy is visible. */
#app .cases .section1-right p:hover > .cta-label,
#app .cases .section1-right:focus-within p > .cta-label,
#app .about .section1-right p:hover > .cta-label,
#app .about .section1-right:focus-within p > .cta-label,
#app .process .section2 .more:hover > .cta-label,
#app .process .section2 .more:focus-visible > .cta-label { opacity: 0 !important; }

#app .cases .section1-right p:hover > .cta-label-hover[hidden],
#app .cases .section1-right:focus-within p > .cta-label-hover[hidden],
#app .about .section1-right p:hover > .cta-label-hover[hidden],
#app .about .section1-right:focus-within p > .cta-label-hover[hidden],
#app .process .section2 .more:hover > .cta-label-hover[hidden],
#app .process .section2 .more:focus-visible > .cta-label-hover[hidden] { opacity: 1 !important; }

/* Final homepage alignment: all three legacy CTA shapes use one fixed text
 * window. The artwork and outer button keep their original geometry. */
#app .process .section2 .more:has(> .cta-label-hover),
#app .about .section1-right > p.cta-more3,
#app .cases .section1-right > p {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  transform: none !important;
}

#app .process .section2 .more:has(> .cta-label-hover) > .cta-label,
#app .about .section1-right > p.cta-more3 > .cta-label,
#app .cases .section1-right > p > .cta-label {
  position: static !important;
  display: block !important;
  grid-area: 1 / 1 !important;
  width: max-content !important;
  margin: 0 !important;
  white-space: nowrap !important;
  transform: translateY(0) scale(1) !important;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1), opacity .8s cubic-bezier(.16, 1, .3, 1) !important;
}

#app#app .process .section2 .more:has(> .cta-label-hover) > .cta-label-hover[hidden],
#app#app .about .section1-right > p.cta-more3:has(> .cta-label-hover) > .cta-label-hover[hidden],
#app#app .cases .section1-right > p:has(> .cta-label-hover) > .cta-label-hover[hidden] {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: block !important;
  grid-area: 1 / 1 !important;
  width: max-content !important;
  height: auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
  text-align: center !important;
  transform: translateY(200%) scale(.9) !important;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1), opacity .8s cubic-bezier(.16, 1, .3, 1) !important;
}

@media (hover: hover) and (pointer: fine) {
  #app .process .section2 .more:has(> .cta-label-hover):hover > .cta-label,
  #app .process .section2 .more:has(> .cta-label-hover):focus-visible > .cta-label,
  #app .about .section1-right:hover > p.cta-more3 > .cta-label,
  #app .about .section1-right:focus-within > p.cta-more3 > .cta-label,
  #app .cases .section1-right:hover > p > .cta-label,
  #app .cases .section1-right:focus-within > p > .cta-label {
    transform: translateY(-100%) scale(.7) !important;
    opacity: 0 !important;
  }

  #app#app .process .section2 .more:has(> .cta-label-hover):hover > .cta-label-hover[hidden],
  #app#app .process .section2 .more:has(> .cta-label-hover):focus-visible > .cta-label-hover[hidden],
  #app#app .about .section1-right:hover > p.cta-more3:has(> .cta-label-hover) > .cta-label-hover[hidden],
  #app#app .about .section1-right:focus-within > p.cta-more3:has(> .cta-label-hover) > .cta-label-hover[hidden],
  #app#app .cases .section1-right:hover > p:has(> .cta-label-hover) > .cta-label-hover[hidden],
  #app#app .cases .section1-right:focus-within > p:has(> .cta-label-hover) > .cta-label-hover[hidden] {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
  }
}