.cooperation {
  --journey-color: var(--chosen-accent, #102b3b);
  --journey-soft: color-mix(in srgb, var(--journey-color) 7%, white);
  --journey-rule: color-mix(in srgb, var(--journey-color) 28%, #e2e5ec);
  --journey-ink: #15242d;
  scroll-margin-top: 100px;
}
.journey-intro { max-width: 56ch; margin-top: 18px; font-size: 1.0625rem; }
.journey-stage { position: relative; isolation: isolate; background: #fff; border-radius: 20px; padding: 45px 32px 30px; }
.journey-rail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: visible; }
.journey-rail path { fill: none; stroke: var(--journey-rule); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 6 8; }
.journey-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 13%; row-gap: 14px; align-items: start; list-style: none; margin: 0; padding: 0; }
.journey-step { min-width: 0; position: relative; padding: 30px 26px 26px; background: #fff; border: 1px solid #e6e8ee; border-radius: 16px; box-shadow: 0 18px 30px -20px #102b3b60; transform: rotate(-3deg); }
.journey-step:nth-child(even) { margin-top: 84px; transform: rotate(3deg); }
.journey-step::before { content: ""; position: absolute; top: -10px; left: calc(50% - 8px); width: 16px; height: 16px; border-radius: 50%; background: var(--journey-color); border: 2px solid color-mix(in srgb, var(--journey-color) 65%, white); box-shadow: 1px 4px 0 color-mix(in srgb, var(--journey-color) 65%, black), 2px 7px 8px #102b3b30; }
.journey-number { display: flex; align-items: center; justify-content: flex-start; color: var(--journey-ink); font-size: 2rem; font-weight: 500; font-variant-numeric: tabular-nums; margin-bottom: 16px; }
.journey-phase { display: block; color: var(--journey-ink); font-size: 1.75rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }
.journey-phase::first-letter { color: var(--journey-color); }
.journey-copy h3 + p { margin-top: 0; }
.journey-copy { margin-top: 12px; padding: 16px; background: var(--journey-soft); border-radius: 8px; }
.journey-copy h3 { margin: 0 0 10px; font-size: 1.15rem; letter-spacing: -.035em; line-height: 1.16; text-wrap: pretty; }
.journey-copy p { max-width: 48ch; font-size: .9375rem; line-height: 1.65; }
.journey-outcome { display: block; margin-top: 20px; color: var(--journey-ink); font-size: .8125rem; font-weight: 600; line-height: 1.5; }
@media (max-width: 900px) {
  .journey-list { column-gap: 8%; }
  .journey-stage { padding-inline: 18px; }
  .journey-step { padding: 24px 16px 16px; }
  .journey-copy { padding: 14px; }
}
@media (max-width: 700px) {
  .journey-stage { padding: 28px 10px; }
  .journey-list { grid-template-columns: 1fr; gap: 44px; padding: 0 8px; }
  .journey-step { padding: 24px 16px 16px; transform: rotate(-1.5deg); }
  .journey-step:nth-child(even) { margin-top: 0; transform: rotate(1.5deg); }
  .journey-copy p { font-size: 1rem; }
}