.business-motion {
  --business-ink: #152a31;
  --business-muted: #68777b;
  --business-line: rgba(21, 42, 49, 0.18);
  position: relative;
  overflow: clip;
  background: #fbfbf8;
  color: var(--business-ink);
}

/* 2026-08-12 review: balance the editorial copy and its paired artwork.
   The meta and route remain locked to the artwork column so the three visual
   elements move as one unit. */
@media (min-width: 901px) {
  .home-page .business-motion__intro {
    width: min(calc(100% - 96px), 1380px);
    grid-template-columns: minmax(0, 0.9fr) minmax(390px, 0.72fr);
    column-gap: clamp(88px, 8vw, 150px);
  }

  .home-page .business-motion__intro-copy {
    max-width: 690px;
  }

  .home-page .business-motion__intro-copy h2 {
    max-width: 690px;
    font-size: clamp(52px, 5.4vw, 84px);
  }

  .home-page .business-motion__intro-art {
    right: 0;
    width: clamp(350px, 32vw, 470px);
  }

  .home-page .business-motion__intro-meta,
  .home-page .business-motion__intro-route {
    right: 0 !important;
    width: clamp(350px, 32vw, 470px) !important;
  }
}

.business-motion__intro {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  width: min(100% - 64px, 1240px);
  min-height: min(72vh, 690px);
  margin: 0 auto;
  padding: clamp(92px, 12vw, 160px) 0 clamp(66px, 8vw, 112px);
  border-bottom: 1px solid var(--business-line);
}

.business-motion__intro > :not(.business-motion__intro-art) {
  position: relative;
  z-index: 2;
}

.business-motion__intro-art {
  position: absolute;
  z-index: 1;
  top: 21%;
  right: clamp(4px, 1.8vw, 28px);
  width: clamp(300px, 31vw, 430px);
  aspect-ratio: 953 / 941;
  margin: 0;
  opacity: 0.92;
  pointer-events: none;
  transform: rotate(1.2deg);
  transform-origin: 52% 55%;
}

.business-motion__intro-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(0.72) contrast(0.94);
  mix-blend-mode: multiply;
}

.business-motion__intro-copy { max-width: 800px; }
.business-motion__eyebrow,
.business-motion__scene-order,
.business-motion__outro > p {
  margin: 0 0 20px;
  color: var(--business-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.business-motion__intro-copy h2 {
  display: grid;
  gap: 0.08em;
  max-width: 860px;
  margin: 0;
  color: var(--business-ink);
  font-family: "Songti SC", STSong, SimSun, serif;
  font-size: clamp(46px, 7vw, 108px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.98;
  overflow: hidden;
}

/* Per-line mask for the intro reveal. Descender room comes from the negative
   bottom margin so the clip never shaves the bottom of a glyph. */
.business-motion__intro-copy h2 > span {
  display: block;
  margin-bottom: -0.14em;
  padding-bottom: 0.14em;
  overflow: hidden;
}

.business-motion__intro-line-inner {
  display: block;
  will-change: transform;
}
.business-motion__intro-note {
  max-width: 35rem;
  margin: 32px 0 0;
  color: var(--business-muted);
  font-size: clamp(15px, 1.35vw, 18px);
  letter-spacing: 0.02em;
  line-height: 1.9;
}

.business-motion__intro-index {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 9px;
  color: var(--business-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.business-motion__intro-index i {
  display: block;
  width: 56px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

.business-motion__story {
  position: relative;
  min-height: 360vh;
}

.business-motion__stage {
  position: relative;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background: #2c9678;
}

.business-motion__scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--scene-secondary);
  color: var(--scene-ink);
  will-change: clip-path;
}

.business-motion__scene-split {
  position: absolute;
  inset: 0 0 0 50%;
  background:
    linear-gradient(135deg, var(--scene-highlight) 0%, var(--scene-primary) 52%, var(--scene-shadow) 100%);
}

/* Organic and hazardous scenes use the deepest palette stop as a disciplined flat field. */
.business-motion__scene:nth-of-type(3) .business-motion__scene-split,
.business-motion__scene:nth-of-type(4) .business-motion__scene-split {
  background: var(--scene-shadow);
}

.business-motion__scene-visual {
  position: absolute;
  inset: 0 50% 0 0;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  opacity: 0.46;
  mix-blend-mode: multiply;
  pointer-events: none;
  will-change: transform;
}

.business-motion__scene-visual::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--scene-secondary) 0%, color-mix(in srgb, var(--scene-secondary) 90%, transparent) 28%, color-mix(in srgb, var(--scene-secondary) 26%, transparent) 70%, transparent 100%);
  content: "";
}

.business-motion__scene-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  filter: saturate(0.78) contrast(0.94);
  transform: scale(1.58);
  transform-origin: right center;
}

.business-motion__scene-copy {
  position: absolute;
  top: 14%;
  left: 0;
  z-index: 3;
  display: flex;
  width: 50%;
  height: 72%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px clamp(22px, 4vw, 68px);
  text-align: center;
  will-change: transform, opacity;
}

.business-motion__scene-order { margin-bottom: 24px; color: var(--scene-copy); }
.business-motion__scene-copy h3 { display: grid; gap: 18px; margin: 0; font-family: "Songti SC", STSong, SimSun, serif; font-weight: 600; line-height: 1.05; }
.business-motion__scene-category { font-size: clamp(34px, 4vw, 68px); letter-spacing: -0.045em; }
.business-motion__scene-promise { max-width: 18em; font-size: clamp(21px, 2.2vw, 38px); letter-spacing: -0.03em; line-height: 1.1; }
.business-motion__scene-note { max-width: 22em; margin: 28px 0 0; color: color-mix(in srgb, var(--scene-ink) 80%, transparent); font-size: clamp(14px, 1.1vw, 17px); line-height: 1.75; }
.business-motion__scene-route { margin: 28px 0 0; color: var(--scene-copy); font-size: 11px; font-weight: 700; letter-spacing: 0.13em; }

.business-motion__stamp {
  position: absolute;
  right: clamp(24px, 4.5vw, 72px);
  bottom: clamp(24px, 4vw, 56px);
  z-index: 4;
  display: grid;
  width: clamp(112px, 14vw, 210px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--scene-copy) 70%, transparent);
  border-radius: 50%;
  color: var(--scene-copy);
  transform: rotate(-8deg);
  will-change: transform;
}

.business-motion__stamp span { font-family: "Songti SC", STSong, SimSun, serif; font-size: clamp(28px, 3.4vw, 54px); }
.business-motion__stamp b { position: absolute; bottom: 22%; font-size: 9px; font-weight: 700; letter-spacing: 0.15em; }

.business-motion__progress {
  position: absolute;
  right: clamp(20px, 3vw, 48px);
  bottom: clamp(18px, 2.5vw, 34px);
  left: clamp(20px, 3vw, 48px);
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 16px;
  color: rgba(21, 42, 49, 0.68);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.business-motion__progress > i { display: block; width: 120px; height: 1px; overflow: hidden; background: rgba(21, 42, 49, 0.2); }
.business-motion__progress > i b { display: block; width: 100%; height: 100%; background: currentColor; transform: scaleX(0); transform-origin: left center; }

.business-motion__outro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  min-height: min(75vh, 720px);
  place-content: center;
  background: var(--magic-paper, #fbfbfa);
  padding: 100px 32px 140px;
  text-align: center;
}

.business-motion__outro::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.52;
  background:
    radial-gradient(ellipse at 50% 12%, rgba(255, 255, 255, 0.72), transparent 58%),
    radial-gradient(rgba(21, 38, 46, 0.035) 0.42px, transparent 0.68px) 0 0 / 3px 3px,
    repeating-linear-gradient(
      90deg,
      rgba(244, 245, 244, 0.98) 0,
      rgba(250, 250, 249, 0.78) 40px,
      rgba(255, 255, 255, 0.98) 80px
    );
}

.business-motion__outro > * { position: relative; z-index: 1; }

.business-motion__outro > p { margin-bottom: 24px; }
.business-motion__outro > p em {
  font-family: "Times New Roman", Georgia, serif;
  font-size: 1.08em;
  font-weight: 600;
}
.business-motion__outro h2 { margin: 0; color: var(--business-ink); font-family: "Songti SC", STSong, SimSun, serif; font-size: clamp(40px, 6.5vw, 92px); font-weight: 600; letter-spacing: -0.045em; line-height: 1.02; }
.business-motion__outro a { display: inline-flex; gap: 10px; justify-self: center; margin-top: 34px; color: var(--business-ink); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; }
.business-motion__outro a span { font-size: 18px; line-height: 0.8; }
.business-motion__outro a:hover { color: #1d65a2; }

/* Keep the closing business message, but remove the oversized empty tail before supply. */
.business-motion__outro {
  min-height: 480px;
  padding: 76px 32px 92px;
}

@media (max-width: 760px) {
  .business-motion__intro { width: min(100% - 40px, 620px); min-height: 540px; grid-template-columns: 1fr; align-content: end; padding: 80px 0 48px; }
  .business-motion__intro-art { display: none; }
  .business-motion__intro-index { padding-top: 32px; }
  .business-motion__intro-copy h2 { font-size: clamp(42px, 12vw, 72px); }
  .business-motion__story { min-height: 0; }
  .business-motion__stage { height: auto; min-height: 0; overflow: visible; }
  .business-motion__scene { position: relative; inset: auto; display: grid; min-height: 640px; grid-template-rows: 250px auto; background: var(--scene-secondary); }
  .business-motion__scene-split { inset: 250px 0 0; }
  .business-motion__scene-visual { inset: 0 0 auto; height: 250px; opacity: 0.34; }
  .business-motion__scene-visual img { transform: scale(1.2); }
  .business-motion__scene-visual::after { background: linear-gradient(180deg, color-mix(in srgb, var(--scene-secondary) 10%, transparent), var(--scene-secondary) 94%); }
  .business-motion__scene-copy { top: 250px; width: 100%; height: auto; min-height: 390px; padding: 34px 24px 72px; }
  .business-motion__scene-category { font-size: clamp(35px, 11vw, 58px); }
  .business-motion__scene-promise { font-size: clamp(21px, 6vw, 32px); }
  .business-motion__stamp { right: 22px; bottom: 22px; width: 105px; }
  .business-motion__progress { display: none; }
  .business-motion__outro { min-height: 430px; padding: 76px 20px 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .business-motion__story { min-height: 0; }
  .business-motion__stage { height: auto; min-height: 0; overflow: visible; }
  .business-motion__scene { position: relative; inset: auto; min-height: min(78vh, 720px); clip-path: none !important; }
  .business-motion__scene-copy,
  .business-motion__scene-visual,
  .business-motion__stamp { opacity: 1 !important; transform: none !important; }
  .business-motion__progress { display: none; }
}

/* 2026-08-12 final layout override. */
@media (min-width: 901px) {
  .home-page .business-motion__intro {
    width: min(calc(100% - 96px), 1380px);
    grid-template-columns: minmax(0, 0.9fr) minmax(390px, 0.72fr);
    column-gap: clamp(88px, 8vw, 150px);
  }

  .home-page .business-motion__intro-copy {
    max-width: 690px;
  }

  .home-page .business-motion__intro-copy h2 {
    max-width: 690px;
    font-size: clamp(52px, 5.4vw, 84px);
  }

  .home-page .business-motion__intro-art {
    right: 0;
    width: clamp(350px, 32vw, 470px);
  }

  .home-page .business-motion__intro-meta,
  .home-page .business-motion__intro-route {
    right: 0 !important;
    width: clamp(350px, 32vw, 470px) !important;
  }
}

/* Motion study alignment: the business scenes follow the supplied sample's
   centered seal, split canvas, and quiet editorial detail hierarchy. */
.business-motion__scene-copy h3 {
  display: contents;
  margin: 0;
  font-family: "Songti SC", STSong, SimSun, serif;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.055em;
}

.business-motion__scene-category,
.business-motion__scene-promise {
  position: absolute;
  left: auto;
  right: clamp(130px, 16vw, 250px);
  display: block;
  color: var(--scene-copy, var(--scene-primary));
  text-align: right;
}

.business-motion__scene-category {
  top: 50%;
  width: max-content;
  font-family: "Songti SC", STSong, SimSun, serif;
  font-size: clamp(40px, 5vw, 82px);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(-50%);
}

.business-motion__scene-promise {
  top: calc(50% + clamp(102px, 12vw, 190px));
  width: max-content;
  max-width: none;
  font-size: clamp(28px, 2.4vw, 44px);
  line-height: 1;
  white-space: nowrap;
  transform: translateY(-100%);
}

.business-motion__scene-detail {
  position: absolute;
  top: 9%;
  right: clamp(28px, 5vw, 80px);
  z-index: 3;
  width: min(37vw, 540px);
  color: rgba(252, 252, 248, 0.94);
}

.business-motion__scene-detail::before {
  display: block;
  width: 54px;
  height: 2px;
  margin-bottom: 22px;
  background: currentColor;
  content: "";
}

.business-motion__scene-detail > span {
  display: block;
  margin-bottom: 14px;
  font-size: clamp(12px, 0.9vw, 14px);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.business-motion__scene-detail p {
  max-width: 23em;
  margin: 0;
  font-size: clamp(21px, 1.75vw, 28px);
  font-weight: 600;
  line-height: 1.5;
  white-space: pre-line;
}

.business-motion__scene-detail a { display: inline-flex; margin-top: 24px; color: inherit; font-size: 12px; font-weight: 700; text-decoration: none; }
.business-motion__scene-detail a:hover { text-decoration: underline; }

.business-motion__stamp {
  --stamp-size: clamp(205px, 24vw, 380px);
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  display: grid;
  width: var(--stamp-size);
  aspect-ratio: 1;
  place-content: center;
  border: 2px solid var(--scene-copy);
  border-radius: 50%;
  background: var(--scene-secondary);
  box-shadow: -22px 30px 50px rgba(17, 38, 34, 0.14);
  color: var(--scene-copy);
  text-align: center;
  transform: translate(-50%, -50%);
}

.business-motion__stamp::before,
.business-motion__stamp::after {
  position: absolute;
  inset: 12%;
  border: 1px solid color-mix(in srgb, var(--scene-copy) 32%, transparent);
  border-radius: 50%;
  content: "";
}
.business-motion__stamp::after { inset: 25%; border-style: dashed; }
.business-motion__stamp span { position: relative; z-index: 1; font-family: "Songti SC", STSong, SimSun, serif; font-size: clamp(40px, 4.6vw, 70px); line-height: 1; letter-spacing: 0.02em; }
/* The supply heading is intentionally omitted; the timeline opens directly on
   the paper-grid canvas after hydration. */
.magic-section-heading--supply { display: none !important; }

.business-motion__scene-index {
  position: absolute;
  right: 3vw;
  bottom: -0.18em;
  z-index: 2;
  color: rgba(252, 252, 248, 0.24);
  font-family: "Times New Roman", serif;
  font-size: min(39vw, 600px);
  line-height: 0.8;
  letter-spacing: -0.1em;
}

/* Aceternity WorldMap port: each route is drawn once, then remains still. */
.magic-world-map > svg:not([data-sanhua-world-map="aceternity"]) {
  visibility: hidden !important;
}

.magic-world-map.sanhua-aceternity-map .sanhua-map-route {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.magic-world-map.sanhua-aceternity-map.is-map-visible .sanhua-map-route {
  animation: sanhua-world-map-draw 1.1s cubic-bezier(0.22, 0.72, 0.24, 1) var(--route-delay) forwards;
}

.magic-world-map.sanhua-aceternity-map .sanhua-map-node {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.magic-world-map.sanhua-aceternity-map.is-map-visible .sanhua-map-node {
  animation: sanhua-world-map-node 0.36s ease-out var(--route-delay, 0ms) forwards;
}

.magic-world-map.sanhua-aceternity-map .sanhua-map-node-pulse {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.magic-world-map.sanhua-aceternity-map .sanhua-map-hub {
  opacity: 0;
}

.magic-world-map.sanhua-aceternity-map .sanhua-map-hub-pulse {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.magic-world-map.sanhua-aceternity-map.is-map-visible .sanhua-map-node-pulse {
  animation: sanhua-world-map-pulse 2.3s ease-out var(--pulse-delay, 0ms) infinite;
}

.magic-world-map.sanhua-aceternity-map.is-map-visible .sanhua-map-hub {
  animation: sanhua-world-map-node 0.36s ease-out 0.8s forwards;
}

.magic-world-map.sanhua-aceternity-map.is-map-visible .sanhua-map-hub-pulse {
  animation: sanhua-world-map-pulse 2.3s ease-out 0.8s infinite;
}

@keyframes sanhua-world-map-draw {
  to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes sanhua-world-map-node {
  to { opacity: 1; }
}

@keyframes sanhua-world-map-pulse {
  0% { opacity: 0.5; transform: scale(1); }
  72%, 100% { opacity: 0; transform: scale(5); }
}

@media (max-width: 760px) {
  .business-motion__scene-copy h3 { display: contents; }
  .business-motion__scene-category { top: 72%; right: auto; left: 22px; max-width: 46vw; color: var(--scene-copy); font-size: clamp(34px, 8.7vw, 44px); text-align: left; white-space: nowrap; transform: translateY(-50%); }
  .business-motion__scene-promise { top: calc(72% + var(--stamp-size) / 2); right: auto; bottom: auto; left: 22px; color: var(--scene-ink); font-size: clamp(15px, 4.2vw, 20px); text-align: left; transform: translateY(-100%); }
  .business-motion__scene-detail { top: 54%; right: auto; left: 22px; width: min(48%, 220px); }
  .business-motion__scene-detail::before { margin-bottom: 12px; }
  .business-motion__scene-detail p { max-width: 14em; font-size: 14px; line-height: 1.45; }
  .business-motion__stamp { --stamp-size: min(46vw, 240px); top: 72%; left: 76%; transform: translate(-50%, -50%); }
  .business-motion__scene-index { right: 2vw; bottom: 1vh; font-size: 62vw; }
}

@media (prefers-reduced-motion: reduce) {
  .business-motion__stamp { transform: translate(-50%, -50%) !important; }
  .magic-world-map.sanhua-aceternity-map .sanhua-map-route {
    animation: none !important;
    stroke-dashoffset: 0;
    opacity: 1;
  }
  .magic-world-map.sanhua-aceternity-map .sanhua-map-node { opacity: 1; }
  .magic-world-map.sanhua-aceternity-map .sanhua-map-node-pulse { display: none; }
  .magic-world-map.sanhua-aceternity-map .sanhua-map-hub { opacity: 1; }
  .magic-world-map.sanhua-aceternity-map .sanhua-map-hub-pulse { display: none; }
}