/* Process panels, warehouse handoff and hero route framing. */
#pw_long.reference-process { height: auto !important; padding: 72px 0 0; }
#pw_long #pw-sticky { position: relative !important; top: auto !important; height: auto !important; padding: 0; gap: 32px; overflow: visible; }
#pw_long .process_content_wrap { position: relative; align-items: flex-end; gap: 32px; padding: 0; }
#pw_long .heading_paragraph_wrap { display: block; width: auto; }
#pw_long .paragraph.process { position: static; width: auto; max-width: 440px; margin: 0; padding: 0; font-size: 24px; line-height: 1.3; }
#pw_long .process-wrap { display: block; flex: none; height: auto; padding: 0; }
#pw_long .cards_wrap { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(16px,2vw,40px); width: 100%; height: auto; padding: 0; transform: none !important; }
#pw_long .process_card { display: block; width: 100%; min-width: 0; height: auto !important; min-height: 0; margin: 0; padding: 0; background: transparent !important; transform: none !important; }
.process-card-face { position: relative; height: clamp(360px,28vw,440px); overflow: hidden; background: color-mix(in srgb,var(--color-ink-black) 78%,var(--color-link-blue)); }
.process_card:nth-child(2) .process-card-face { background: color-mix(in srgb,var(--color-ink-black) 72%,var(--color-grass-green)); }
.process_card:nth-child(3) .process-card-face { background: color-mix(in srgb,var(--color-ink-black) 82%,var(--color-plum-violet)); }
.process_card:nth-child(4) .process-card-face { background: var(--color-ink-black); }
#pw_long .process-card-face .item_num { position: absolute; top: 26px; left: 24px; color: var(--color-cream-canvas) !important; font-size: 18px; }
#pw_long h3.process-vertical { position: absolute; top: 24px; right: 16px; bottom: 24px; margin: 0; color: var(--color-cream-canvas) !important; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--_typography---font-secondary); font-size: clamp(32px,3.2vw,48px); font-style: normal; font-weight: 500; line-height: 1.05; letter-spacing: -.02em; white-space: nowrap; }
#pw_long p.process-card-copy { position: absolute; left: 24px; bottom: 28px; width: calc(100% - 110px); margin: 0; color: var(--color-cream-canvas) !important; font-size: 18px; line-height: 1.35; }
.process-card-photo { display: block; width: 100%; aspect-ratio: 2.1; overflow: hidden; }
.process-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The warehouse photograph remains as its own scroll scene. */
#pricing.image-scene { padding: 0; background: var(--color-cream-canvas); }
#pricing.image-scene .sticky_blur_wrapper { position: relative; width: 100%; height: 180vh; }
#pricing.image-scene .sticky_blur { position: sticky; top: 0; width: 100%; height: 100vh; overflow: hidden; }
#pricing.image-scene .external_ps_wrap { position: relative; width: 100%; height: 100%; transform-origin: center; }
#pricing.image-scene img.big-logistics-image { display: block !important; position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; margin: 0; object-fit: cover; object-position: center; }
#hover-section { min-height: 0 !important; height: auto !important; padding: 100px 0 80px; }
#hover-section .container.cta { padding-top: 0; padding-bottom: 0; }
/* Bring the next copy into view during the final image shrink, with clear space between them. */
#pricing.image-scene.has-image-exit + #hover-section { margin-top: -48vh; padding-top: clamp(24px,4vh,48px); }
.process_container .stratchy-text { width: 100% !important; max-width: 100%; }
#pw_long .process-card-face .item_num { display: block; }
.reduced-motion #pw_long.reference-process { padding-block: 64px 0 !important; }
.reduced-motion #pricing.image-scene .sticky_blur_wrapper, .reduced-motion #pricing.image-scene .sticky_blur, .reduced-motion #pricing.image-scene .external_ps_wrap { position: relative; height: auto; transform: none !important; }
.reduced-motion #pricing.image-scene img.big-logistics-image { position: relative; height: auto; }
@media (max-width: 1100px) {
  #pw_long .cards_wrap { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .process-card-face { height: 360px; }
  #pw_long h3.process-vertical { font-size: 44px; }
  #pw_long p.process-card-copy { width: calc(100% - 126px); }
}
@media (max-width: 991px) {
  .process_container { padding: 0 20px 40px; }
  #pw_long.reference-process { padding-top: 48px; }
  #pw_long .paragraph.process { font-size: 24px; max-width: 360px; }
  #hover-section { padding-block: 72px; }
}
@media (max-width: 600px) {
  .process_container { padding-inline: 12px; }
  #pw_long .cards_wrap { grid-template-columns: 1fr; gap: 24px; }
  #pw_long .process_content_wrap { gap: 24px; align-items: flex-start; flex-direction: column; }
  #pw_long .paragraph.process { max-width: 320px; }
  #pw_long .title_wrap { padding: 10px 20px; }
  .process-card-face { height: 350px; }
  #pw_long h3.process-vertical { font-size: 44px; }
  #pw_long p.process-card-copy { width: calc(100% - 126px); }
}

/* White route animation sits inside the bottom of the hero photograph. */
.video_wrap > .img { position: relative; }
.hero-route-overlay { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: min(clamp(280px,42vw,540px),100%); background: transparent; overflow: hidden; pointer-events: none; }
.hero-route-overlay #pw-canvas { position: absolute; inset: auto 0 0; display: block; width: 100%; height: 100%; }
@media (max-width: 600px) { .hero-route-overlay { height: min(280px,100%); } }