/* PROCESS — timeline; the line fills and the steps light up as you scroll (assets/js/ui/process.js).
   Desktop: steps side by side, line across the top. Narrow screens: steps stacked, line down the left. */
.yk-proc{position:relative;}
.yk-proc-line{position:absolute;left:0;right:0;top:6px;height:1px;background:var(--line2);}
.yk-proc-fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--yolk),var(--orange));transform-origin:left;transform:scaleX(0);box-shadow:0 0 14px var(--glow);}
.yk-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,44px);}

.yk-step{position:relative;padding-top:clamp(28px,5vh,48px);}
.yk-step::after{content:'';position:absolute;top:0;left:0;width:13px;height:13px;border:1px solid var(--orange);background:var(--bg);transform:rotate(45deg);transition:background .4s,box-shadow .4s;}
.yk-step.yk-on::after{background:var(--orange);box-shadow:0 0 18px var(--glow);}

.yk-step-n{font-family:var(--display);font-weight:300;font-size:clamp(52px,min(6vw,10vh),96px);line-height:0.8;letter-spacing:-0.06em;color:transparent;-webkit-text-stroke:1px var(--line2);transition:color .5s,-webkit-text-stroke-color .5s;}
.yk-step.yk-on .yk-step-n{color:var(--orange);-webkit-text-stroke-color:var(--orange);}
.yk-step h3{font-size:26px;letter-spacing:-0.03em;margin-top:clamp(12px,2vh,18px);}
.yk-step p{font-size:15px;margin-top:10px;max-width:340px;}

@media(max-width:900px){
  .yk-proc-line{left:7px;right:auto;top:0;bottom:0;width:1px;height:auto;}
  .yk-proc-fill{background:linear-gradient(var(--yolk),var(--orange));transform-origin:top;transform:scaleY(0);}
  .yk-steps{grid-template-columns:1fr;gap:clamp(32px,6vw,56px);}
  .yk-step{padding-top:0;margin-left:40px;}
  .yk-step::after{top:22px;left:-39px;}
}