/* Order journey */
.order-journey {
  position: relative; height: 350px; margin-top: 48px;
  border: 0; border-radius: 0;
  background: transparent; box-shadow: none;
}
.poster .journey-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.journey-track-shadow { stroke: #fff; stroke-width: 10; transform: translateY(2px); }
.journey-track { stroke: #cbd2df; stroke-width: 8; }
.journey-progress { stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.journey-stops { list-style: none; margin: 0; padding: 0; }
.journey-step { position: absolute; width: 56px; height: 56px; transform: translate(-50%,-50%); }
.journey-step:nth-child(1) { left: 92%; top: 37.5%; }
.journey-step:nth-child(2) { left: 66%; top: 71.875%; }
.journey-step:nth-child(3) { left: 35%; top: 21.875%; }
.journey-step:nth-child(4) { left: 8%; top: 65.625%; }
.journey-point { position: relative; width: 100%; height: 100%; }
.journey-marker {
  display: grid; place-items: center; width: 56px; height: 56px;
  border: 1px solid #fff; border-radius: 20px; background: var(--soft-bg);
  box-shadow: var(--soft-small); color: var(--ink);
}
.poster .journey-marker svg { width: 27px; height: 27px; }
.journey-caption {
  position: absolute; left: 50%; top: 73px; transform: translateX(-50%);
  width: clamp(120px,14vw,160px); text-align: center; white-space: nowrap;
  color: var(--ink); font-size: clamp(17px,1.8vw,22px); font-weight: 700;
  padding: 6px 4px; border-radius: 12px; background: var(--soft-bg); line-height: 1.6;
}
.journey-narrow { display: none; }
.journey-fallback .journey-progress { transition: stroke-dashoffset .16s linear; }
.journey-fallback .journey-point { opacity: 0; transform: translateY(14px) scale(.88); transition: opacity .35s, transform .45s cubic-bezier(.16,1,.3,1); }
.journey-fallback .journey-step.is-reached .journey-point { opacity: 1; transform: none; }

/* Phone and tablet */
@media (max-width: 900px) {
  .order-journey { height: 640px; margin-top: 36px; }
  .journey-wide { display: none; }
  .journey-narrow { display: block; }
  .journey-step:nth-child(1) { left: 76.3889%; top: 8.59375%; }
  .journey-step:nth-child(2) { left: 23.6111%; top: 32.8125%; }
  .journey-step:nth-child(3) { left: 76.3889%; top: 57.03125%; }
  .journey-step:nth-child(4) { left: 23.6111%; top: 81.25%; }
  .journey-caption { width: clamp(105px,30vw,145px); font-size: 18px; }
}
@media (max-width: 380px) {
  .journey-caption { font-size: 16px; }
}