/* Give each service photograph a generous stage alongside its reading column. */
.journey-layout {
  --journey-step-height:clamp(560px,78svh,740px);
  --journey-controls-space:124px;
  --journey-image-height:min(620px,65svh,calc(100svh - 96px - var(--journey-controls-space)));
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  width:92%; max-width:1560px; gap:clamp(40px,4vw,80px);
}
.journey-steps { min-width:0; padding:0; }
.journey-step,.journey-step:last-child {
  min-height:var(--journey-step-height); padding:56px 0; display:flex; flex-direction:column;
  justify-content:center; align-items:flex-start;
}
.journey-step-content { width:100%; max-width:560px; min-width:0; }
.journey-step h3,html[lang="en"] .journey-step h3 {
  font-size:clamp(32px,3vw,48px); font-weight:500; line-height:1.3;
  letter-spacing:-.8px; margin-bottom:24px; text-wrap:balance;
}
.journey-step h3>span { display:block; }
.journey-step h3>span+span { color:var(--blue); }
html[lang="zh-CN"] :is(#journey-customs,#journey-delivery) h3 {
  font-size:clamp(26px,2.8vw,44px); white-space:nowrap; text-wrap:nowrap;
}
html[lang="zh-CN"] :is(#journey-customs,#journey-delivery) h3>span { display:inline; }
html[lang="zh-CN"] #journey-warehouse h3 {
  font-size:clamp(22px,2.5vw,40px); white-space:nowrap; text-wrap:nowrap;
}
html[lang="zh-CN"] #journey-warehouse h3>span { display:inline; }
.journey-reading,html[lang="en"] .journey-reading {
  max-width:29em; font-size:clamp(16px,1.18vw,18px); font-weight:400;
  line-height:1.85; letter-spacing:0;
  --reading-ink:#26455e; --reading-accent:#0753a2;
}
.journey-highlights {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:0;
  list-style:none; padding:16px 0; margin:26px 0 0; width:100%;
  border:1px solid #e3ebf0; border-radius:5px; background:#f4f7f9;
  color:#25465e; font-size:13px; line-height:1.6;
}
.journey-highlights li { display:flex; justify-content:center; align-items:center; min-width:0; padding:0 10px; text-align:center; }
.journey-highlights li+li { border-left:1px solid #dbe5ec; }
.journey-highlights li::before { content:none; }
.journey-highlights--icons li { gap:7px; }
.journey-highlights--icons li>span { min-width:0; }
.journey-highlight-icon {
  display:block; width:22px; height:22px; flex:0 0 22px;
  color:#0753a2; fill:none; stroke:currentColor; stroke-width:1.65;
  stroke-linecap:round; stroke-linejoin:round;
}
.journey-highlight-icon .highlight-icon-tint { fill:currentColor; fill-opacity:.12; stroke:none; }
@media(max-width:480px) {
  html[lang="en"] .journey-highlights--icons li { flex-direction:column; gap:7px; line-height:1.4; }
}
@media(max-width:360px) {
  :is(#journey-warehouse,#journey-delivery) .journey-highlights--icons li { flex-direction:column; gap:7px; line-height:1.4; }
}
.journey-detail { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:baseline; gap:12px; margin-top:18px; }
.journey-detail-label { font-size:11px; line-height:1.85; color:#365b76; white-space:nowrap; }
.journey-note,html[lang="en"] .journey-note {
  max-width:none; min-height:0; font-size:12px; line-height:1.85; margin:0; color:#7b8e9d;
}
.journey-step .text-link.journey-cta {
  display:inline-flex; justify-content:center; font-size:13px; line-height:1.6;
  margin-top:26px; padding:12px 20px; min-height:44px; min-width:148px;
  border:1px solid #0753a2; border-radius:4px; gap:0; background:#0753a2; color:#fff;
  transition:background .2s,border-color .2s;
}
.journey-step .journey-cta:hover { background:#063f7c; border-color:#063f7c; }
.journey-step .journey-cta:focus-visible { outline:2px solid #0753a2; outline-offset:4px; }
.journey-step .text-link>span:last-child { font-size:21px; }
.journey-visual-column {
  position:relative; min-width:0;
  padding:max(0px,calc((var(--journey-step-height) - var(--journey-image-height) - var(--journey-controls-space))/2)) 0 0;
}
.journey-sticky {
  position:sticky;
  top:clamp(96px,calc(50svh + 40px - (var(--journey-image-height) + var(--journey-controls-space))/2),calc(100svh - var(--journey-image-height) - var(--journey-controls-space)));
  height:auto; padding-bottom:0;
}
.journey-canvas {
  position:relative; width:100%; height:var(--journey-image-height); min-height:0; max-height:none;
  clip-path:url(#journey-reference-clip); border-radius:12px;
  background:#05090c; isolation:isolate; overflow:hidden;
}
.journey-scene {
  position:absolute; inset:0; margin:0; opacity:0;
  transition:opacity .75s ease; pointer-events:none;
}
.journey-scene.is-active { opacity:1; z-index:1; }
.journey-scene>img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.035); transition:transform 1.4s cubic-bezier(.2,.6,.2,1);
}
.journey-scene.is-active>img { transform:scale(1); }
.journey-scene[data-journey-scene="0"]>img { object-position:80% 50%; }
.journey-scene[data-journey-scene="1"]>img { object-position:50% 62%; }
.journey-scene[data-journey-scene="2"]>img { object-position:84% 50%; }
.journey-scene::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,#02080c10 65%,#02080c66 100%);
}
.journey-scene-caption { display:none; }
/* One service navigator: a clear current step within a quiet shared surface. */
.journey-controls {
  position:static; z-index:3;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px; margin:14px 0 0; padding:8px;
  border:1px solid #e1e9ef; border-radius:14px; background:#f1f5f8;
}
.journey-controls a {
  position:relative; display:flex; align-items:center; justify-content:flex-start;
  min-width:0; min-height:64px; padding:12px; gap:10px; border:0; border-radius:9px;
  color:#60788a; font-size:14px; line-height:1.4;
  transition:color .25s,background .25s,box-shadow .25s;
}
.journey-controls a>span:first-child {
  display:grid; place-items:center; width:28px; height:28px;
  color:inherit; flex-shrink:0; transition:color .25s;
}
.journey-control-icon svg {
  display:block; width:100%; height:100%; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.journey-control-icon .journey-icon-tint { fill:currentColor; fill-opacity:.14; stroke:none; }
.journey-control-icon .journey-icon-solid { fill:currentColor; stroke:none; }
.journey-control-icon .journey-icon-cutout { stroke:#fff; }
.journey-controls a>span:nth-child(2) {
  position:static; display:flex; flex-direction:column; gap:4px; min-width:0;
  width:auto; height:auto; padding:0; margin:0; overflow:visible; clip:auto; white-space:normal;
}
.journey-control-copy>span { font-weight:500; }
.journey-control-copy small { color:#8596a4; font-size:11px; font-weight:400; line-height:1.4; }
.journey-controls a i { display:none; }
.journey-controls a::after { content:none; }
.journey-controls a:hover { color:#0753a2; background:#e7eef4; }
.journey-controls a[aria-current="step"] {
  background:#fff; color:#0753a2; box-shadow:0 2px 7px #2449600d;
}
.journey-controls a[aria-current="step"]>span:first-child { color:#0753a2; }
.journey-controls a[aria-current="step"] small { color:#577b98; }
.journey-controls a:focus-visible { outline:2px solid #0753a2; outline-offset:2px; }
.journey-image-note {
  position:static; margin:8px 0 0;
  color:#8797a4; font-size:9px; line-height:1.5; text-align:right;
  letter-spacing:.4px; pointer-events:none;
}
@media (max-width:1100px) and (min-width:810px) {
  .journey-layout { --journey-controls-space:108px; }
  .journey-controls { gap:6px; padding:6px; margin-top:12px; }
  .journey-controls a { font-size:12px; min-height:56px; padding:10px 8px; gap:8px; }
  .journey-controls a>span:first-child { width:24px; height:24px; }
  .journey-control-copy small { display:none; }
  .journey-step,.journey-step:last-child { padding-top:42px; padding-bottom:42px; }
  .journey-step h3,html[lang="en"] .journey-step h3 { font-size:32px; margin-bottom:22px; }
  .journey-note,html[lang="en"] .journey-note { font-size:12px; }
  .journey-highlights { gap:0; font-size:12px; margin-top:22px; padding:14px 0; }
  .journey-highlights li { padding:0 7px; }
  .journey-detail { grid-template-columns:1fr; gap:4px; }
}
@media (max-width:809px) {
  .journey-intro { margin-bottom:32px; }
  .journey-layout { display:flex; flex-direction:column-reverse; width:100%; gap:0; }
  .journey-visual-column { width:calc(100% - 40px); margin:0 auto; padding:0; }
  .journey-sticky { position:relative; top:auto; height:auto; padding:0; }
  .journey-canvas {
    height:auto; min-height:0; max-height:440px; aspect-ratio:4 / 3;
    clip-path:none; border-radius:8px;
  }
  .journey-controls {
    gap:4px; padding:6px; margin-top:12px; border-radius:12px;
  }
  .journey-controls a {
    justify-content:center; min-height:52px; padding:8px 4px; gap:5px;
    font-size:12px; line-height:1.4;
  }
  .journey-controls a>span:first-child { width:20px; height:20px; }
  .journey-control-copy small { display:none; }
  .journey-image-note {
    position:static; margin-top:8px; color:#8797a4; font-size:9px; letter-spacing:.4px;
  }
  .journey-steps {
    display:flex; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scrollbar-width:none; width:100%;
    padding:0 20px; scroll-padding-left:20px; gap:24px;
  }
  .journey-step,.journey-step:last-child {
    flex:0 0 100%; display:block; min-height:0; padding:24px 0 14px;
    scroll-snap-align:start;
  }
  .journey-step-content { max-width:none; }
  .journey-step h3,html[lang="en"] .journey-step h3 {
    font-size:30px; line-height:1.35; margin-bottom:20px; letter-spacing:-.7px;
  }
  html[lang="zh-CN"] :is(#journey-customs,#journey-delivery) h3 { font-size:clamp(24px,7.2vw,30px); }
  html[lang="zh-CN"] #journey-warehouse h3 { font-size:clamp(21px,6.5vw,28px); }
  .journey-reading,html[lang="en"] .journey-reading {
    font-size:15px; line-height:1.85; letter-spacing:0;
  }
  .journey-highlights { gap:0; font-size:12px; margin-top:22px; padding:15px 0; }
  .journey-highlights li { padding:0 7px; }
  .journey-detail { grid-template-columns:1fr; gap:5px; margin-top:16px; }
  .journey-note,html[lang="en"] .journey-note {
    font-size:12px; line-height:1.85; margin:0; min-height:0;
  }
  .journey-step .text-link.journey-cta { font-size:13px; margin-top:22px; }
}
@media (prefers-reduced-motion:reduce) {
  .journey-scene,.journey-scene>img,.journey-controls a,.journey-controls a>span:first-child { transition:none; }
  .journey-scene>img { transform:none; }
  .journey-step .text-link.journey-cta { transition:none; }
}
/* One compact introduction, aligned with the service chapter text. */
.journey { padding-top:36px; padding-bottom:64px; }
.journey-intro {
  width:92%; max-width:1560px; text-align:left; margin:0 auto 20px;
  padding-bottom:0; border:0;
}
.journey-intro .kicker {
  font-size:11px; line-height:1.6; letter-spacing:1.5px;
  margin-bottom:16px; color:#71899d;
}
#journey-title,html[lang="en"] #journey-title {
  font-size:clamp(30px,3.05vw,46px); font-weight:550;
  line-height:1.35; letter-spacing:-1px; text-wrap:balance;
}
#journey-title>span { display:inline-block; }
.journey-intro-footer {
  display:block; margin-top:16px;
}
.journey-intro-copy { font-size:16px; line-height:1.8; margin:0; color:#718494; }
.journey-explore {
  display:inline-flex; flex-shrink:0; align-items:center; gap:14px;
  min-height:44px; margin:0; padding:0; border:0;
  font-size:13px; font-weight:500; letter-spacing:0; color:#0753a2;
}
.journey-explore>span:last-child {
  display:grid; place-items:center; width:38px; height:38px;
  border:1px solid #cbd9e5; border-radius:50%; font-size:20px; line-height:1;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.journey-explore:is(:hover,:focus-visible)>span:last-child {
  transform:none; background:#0753a2; color:#fff; border-color:#0753a2;
}
@media(max-width:809px) {
  .journey { padding-top:30px; padding-bottom:40px; }
  .journey-intro { width:calc(100% - 40px); padding-bottom:0; margin-bottom:20px; }
  .journey-intro .kicker { font-size:10px; margin-bottom:13px; }
  #journey-title,html[lang="en"] #journey-title {
    font-size:clamp(27px,5.2vw,36px); line-height:1.45; letter-spacing:-.7px; text-wrap:pretty;
  }
  html[lang="en"] #journey-title>span { display:inline; }
  .journey-intro-footer { align-items:flex-start; flex-direction:column; gap:14px; margin-top:16px; }
  .journey-intro-copy { font-size:14px; line-height:1.85; }
  .journey-explore { font-size:12px; }
  .journey-explore>span:last-child { width:34px; height:34px; font-size:18px; }
}
@media(prefers-reduced-motion:reduce) {
  .journey-explore>span:last-child { transition:none; }
}
