/* Variant A — "How we work" as one timeline; the line fill follows the scroll (js/proc2.js sets --p) */
.process--tl .process__grid { display: block; }
.process--tl .process__head { position: static; flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(48px, min(5vw, 72px), 80px); }
.process--tl .process__head .h2 { max-width: 16ch; }
.process--tl .rail-line { display: none; }
.process--tl .steps { --end: calc(75% + 7px); position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 0; padding-top: 44px; }
.process--tl .steps::before, .process--tl .steps::after { content: ""; position: absolute; left: 0; top: 20px; height: 2px; }
.process--tl .steps::before { right: 0; background: rgba(14, 15, 17, .12); }
.process--tl .steps::after { width: calc(var(--end) * var(--p, 0)); background: var(--signal); transition: width .25s linear; }
/* the light that runs along the full line */
.proc-pulse { position: absolute; left: 0; top: 15px; width: 90px; height: 12px; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(226, 73, 43, .9), rgba(226, 73, 43, 0)); filter: blur(1px); }
.process--tl.is-full .proc-pulse { animation: procPulse 3.6s cubic-bezier(.5, 0, .3, 1) .4s infinite; }
@keyframes procPulse { 0% { opacity: 0; transform: translateX(-40px); } 12% { opacity: 1; } 70% { opacity: 1; } 85%, 100% { opacity: 0; transform: translateX(calc(var(--pw, 1000px) * .75)); } }

.process--tl .step { position: relative; display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-areas: "n t" "b b"; justify-content: start; align-content: start; align-items: center; column-gap: 14px;
  padding: 0 clamp(18px, min(2.4vw, 34.56px), 36px) 0 0; border: 0; opacity: 1; }
.process--tl .step::before { content: ""; position: absolute; left: 0; top: -31px; width: 14px; height: 14px; background: #C6CBD3; transition: background .35s, transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.process--tl .step.is-lit::before { background: var(--signal); transform: rotate(45deg) scale(1.15); }
.process--tl .step__n { grid-area: n; position: static; padding: 0; font-size: .78rem; color: #9CA2AD; transition: color .35s; }
.process--tl .step.is-lit .step__n { color: var(--signal); }
.process--tl .step__time { grid-area: t; position: static; justify-self: start; margin: 0; background: #E3E7ED; opacity: .45; transition: opacity .4s, border-color .4s; }
.process--tl .step.is-lit .step__time { opacity: 1; border-color: rgba(14, 15, 17, .3); }
.process--tl .step__body { grid-area: b; margin-top: 26px; }
.process--tl .step__ic { width: 48px; height: 48px; margin-bottom: 22px; background: #D9DEE5; color: #8C929C; transform: scale(.82); transition: background .4s, color .4s, transform .7s cubic-bezier(.3, 1.7, .45, 1); }
.process--tl .step__ic svg { width: 22px; height: 22px; }
.process--tl .step__ic svg * { stroke-dasharray: 1; stroke-dashoffset: 0; }
.process--tl .step.is-lit .step__ic { background: var(--signal); color: #0E0F11; transform: none; }
.process--tl .step.is-lit .step__ic svg * { animation: procDraw 1s var(--ease) both; }
@keyframes procDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.process--tl .step h3, .process--tl .step p { transition: opacity .6s var(--ease), transform .7s var(--ease); }
.process--tl .step:not(.is-lit) h3 { opacity: .3; transform: translateY(12px); }
.process--tl .step:not(.is-lit) p { opacity: 0; transform: translateY(16px); }
.process--tl .step.is-lit p { transition-delay: .12s; }
.process--tl .step h3 { font-size: clamp(1.5rem, min(2.1vw, 30.24px), 2.1rem); letter-spacing: -.035em; line-height: 1.04; }
.process--tl .step p { margin-top: 12px; font-size: .98rem; line-height: 1.5; max-width: 30ch; }
.process--tl .step:hover .step__ic { transform: scale(1.08) rotate(-4deg); }
@media (max-width: 1000px) {
  .process--tl .process__head { flex-direction: column; align-items: flex-start; }
  .process--tl .steps { --end: 100%; grid-template-columns: minmax(0, 1fr); padding: 0 0 0 40px; gap: 44px; }
  .process--tl .steps::before, .process--tl .steps::after { left: 6px; top: 0; width: 2px; right: auto; }
  .process--tl .steps::before { height: 100%; }
  .process--tl .steps::after { width: 2px; height: calc(100% * var(--p, 0)); transition: height .25s linear; }
  .proc-pulse { display: none; }
  .process--tl .step { padding: 0; }
  .process--tl .step::before { left: -40px; top: 4px; }
}
@media (prefers-reduced-motion: reduce) { .process--tl .step__ic svg * { animation: none !important; } .proc-pulse { display: none; } }

/* v231 — the step's time as a big dot figure (js/procdots.js) instead of the small icon square */
.process--tl.has-dg .step__ic { display: none; }
.process--tl .step__dg { display: block; width: 100%; margin: 4px 0 clamp(18px, min(1.8vw, 25.92px), 26px); }
.process--tl.has-dg .step__body { margin-top: 18px; }
.process--tl.has-dg .step:not(.is-lit) h3 { opacity: .3; transform: none; }
.process--tl.has-dg .step:not(.is-lit) p { opacity: .0; transform: none; }
@media (max-width: 1000px) {
  .process--tl .step__dg { max-width: 300px; }
}