.process-section {
  --route-gap: clamp(120px, 20vw, 288px);
  --dock-offset: 38px;
  padding-block: clamp(64px, 7vw, 104px) clamp(80px, 9vw, 128px);
  border-top: 1px solid var(--line);
}

.process-head {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr);
  align-items: end;
  gap: clamp(40px, 7vw, 100px);
  margin-bottom: clamp(56px, 6vw, 88px);
}

.process-head .eyebrow { margin-bottom: 24px; }

.process-head h2 {
  font-size: clamp(3rem, 5.1vw, 5rem);
  line-height: 1.06;
  letter-spacing: -.06em;
  text-wrap: initial;
}

.process-point { color: var(--accent); }

.process-head .section-intro {
  max-width: 330px;
  margin: 0 0 4px;
  font-size: 1.0625rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.process-route { position: relative; isolation: isolate; }

.process-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.process-rail {
  stroke: #302a38;
  stroke-width: 1;
  stroke-linecap: round;
}

.process-trail {
  stroke: url(#process-light);
  stroke-width: 1.5;
  stroke-linecap: round;
  visibility: hidden;
}

.process-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.process-step {
  position: relative;
  width: calc((100% - var(--route-gap)) / 2);
}

.process-step:nth-child(even) { align-self: flex-end; }

.process-island {
  position: relative;
  padding: clamp(26px, 2.7vw, 40px);
  border: 1px solid #2c2833;
  border-radius: 20px;
  background: #100f14;
  transition: border-color .3s, background .3s;
}

.process-number {
  display: block;
  margin-bottom: 22px;
  color: #91889f;
  font: .875rem/1 ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  transition: color .3s;
}

.process-island h3 {
  font-size: clamp(1.5rem, 2.25vw, 2rem);
  line-height: 1.18;
  letter-spacing: -.04em;
}

.process-island > p {
  margin-top: 18px;
  color: #ada7b7;
  font-size: .9375rem;
  line-height: 1.75;
  text-wrap: pretty;
}

.process-dock {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--dock-offset));
  z-index: 1;
  width: 6px;
  height: 6px;
  border: 1px solid #685779;
  border-radius: 50%;
  background: var(--paper);
  transform: translate(-50%, -50%);
  transition: background .25s, border-color .25s;
}

.process-dock::before {
  content: '';
  position: absolute;
  top: 1.5px;
  right: 5px;
  width: calc(var(--dock-offset) - 3px);
  height: 1px;
  background: #3a3144;
}

.process-step:nth-child(even) .process-dock { left: calc(-1 * var(--dock-offset)); }
.process-step:nth-child(even) .process-dock::before { right: auto; left: 5px; }

.process-step.is-current .process-island { border-color: #7b629a; background: #19131f; }
.process-step.is-current .process-number { color: var(--accent); }
.process-step.is-reached .process-dock { border-color: var(--accent); background: var(--accent); }
.process-step.is-reached .process-dock::before { background: #8a6aaa; }
.process-step.is-current .process-dock {
  border-color: #e4d6fa;
  background: #e4d6fa;
  box-shadow: 0 0 12px rgb(185 160 255 / .3);
}

.process-signal { visibility: hidden; }

.process-signal-glow {
  fill: var(--accent);
  opacity: .35;
  filter: blur(6px);
}

.process-signal-core {
  fill: #f0e8ff;
  filter: drop-shadow(0 0 4px #bda3ed);
}

.process-route.is-ready .process-signal,
.process-route.is-ready .process-trail { visibility: visible; }

@media (min-width: 1440px) {
  .process-title-break { display: none; }
  .process-head { grid-template-columns: minmax(0, 2.2fr) minmax(260px, 1fr); }
}

@media (max-width: 1000px) {
  .process-section { --route-gap: 150px; --dock-offset: 26px; }
  .process-head { gap: 40px; }
  .process-head .section-intro { font-size: 1rem; }
  .process-island { padding: 26px; }
  .process-island h3 { font-size: 1.625rem; }
}

@media (max-width: 760px) {
  .process-section { --dock-offset: 36px; padding-block: 64px 72px; }
  .process-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
  .process-head .eyebrow { margin-bottom: 20px; }
  .process-head h2 { font-size: clamp(2.45rem, 7.3vw, 3.5rem); }
  .process-title-break { display: none; }
  .process-head .section-intro { max-width: 450px; }
  .process-steps { gap: 28px; padding-left: 52px; }
  .process-step { width: 100%; }
  .process-island { padding: 26px; border-radius: 16px; }
  .process-dock { left: calc(-1 * var(--dock-offset)); }
  .process-dock::before { right: auto; left: 5px; }
}

@media (max-width: 440px) {
  .process-section { --dock-offset: 28px; }
  .process-head h2 { font-size: clamp(2rem, 8.5vw, 2.6rem); }
  .process-steps { padding-left: 42px; gap: 24px; }
  .process-island { padding: 24px 20px; }
  .process-number { margin-bottom: 18px; font-size: .8125rem; }
  .process-island h3 { font-size: 1.5rem; }
  .process-island > p { margin-top: 14px; font-size: .875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .process-signal,
  .process-trail { display: none; }
  .process-island,
  .process-number,
  .process-dock { transition: none; }
}

@media print {
  .process-head { display: block; margin-bottom: 24px; }
  .process-head h2 { font-size: 2rem; }
  .process-head .section-intro { margin-top: 16px; }
  .process-map,
  .process-dock { display: none; }
  .process-steps { gap: 20px; padding: 0; }
  .process-step { width: 100%; break-inside: avoid; }
  .process-step .process-island { background: #fff; border-color: #ccc; }
  .process-number,
  .process-island > p { color: #444; }
}