/* Reading 06 + 11 + 12: one functional accent, confined to the existing six-step process. */
#approach{--process-copper:#C98243}
#approach>.shell{position:relative}
#approach .process-runner{position:absolute;left:0;top:0;width:40px;height:30px;color:var(--process-copper);opacity:0;pointer-events:none;z-index:2;will-change:transform,opacity}
#approach .process-runner svg{width:100%;height:100%}
#approach .process-runner .process-leg{transform-box:view-box;transform-origin:11px 18px;transform:rotate(0deg)}
#approach .process-line li::after{content:"";position:absolute;left:0;top:-1.5px;width:100%;height:2px;background:var(--process-copper);transform:scaleX(1);transform-origin:left center;pointer-events:none}
#approach .process-line li:last-child::after{display:none}
#approach .process-line li::before{z-index:1;background:var(--process-copper);border-radius:50%;transform:scale(1.6);box-shadow:none}
#approach .process-line li>span{color:var(--process-copper)}
#approach .process-line h3{opacity:1}
/* Content remains readable while waiting. The original pale track is untouched. */
#approach.is-process-ready:not(.is-process-complete) .process-line li::after{transform:scaleX(0)}
#approach.is-process-ready:not(.is-process-complete) .process-line li::before{background:var(--blue);border-radius:0;transform:scale(1)}
#approach.is-process-ready:not(.is-process-complete) .process-line li>span{color:#56616b}
#approach.is-process-ready:not(.is-process-complete) .process-line h3{opacity:.78}
#approach.is-process-running .process-line li::after{animation:tonvion-process-line-x var(--process-segment-duration,550ms) linear var(--process-departure,80ms) both}
#approach.is-process-running .process-line li::before{animation:tonvion-process-point 300ms ease-out var(--process-delay,0ms) both}
#approach.is-process-running .process-line li>span{animation:tonvion-process-number 220ms ease-out var(--process-delay,0ms) both}
#approach.is-process-running .process-line h3{animation:tonvion-process-title 220ms ease-out var(--process-delay,0ms) both}
@keyframes tonvion-process-line-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tonvion-process-line-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes tonvion-process-point{
  0%{background:var(--blue);border-radius:0;transform:scale(1);box-shadow:0 0 0 0 rgba(201,130,67,0)}
  40%{background:var(--process-copper);border-radius:50%;transform:scale(1.6);box-shadow:0 0 0 5px rgba(201,130,67,.12)}
  100%{background:var(--process-copper);border-radius:50%;transform:scale(1.6);box-shadow:0 0 0 5px rgba(201,130,67,0)}
}
@keyframes tonvion-process-number{from{color:#56616b}to{color:var(--process-copper)}}
@keyframes tonvion-process-title{from{opacity:.78}to{opacity:1}}
@media(min-width:621px) and (max-width:1120px){#approach .process-runner{width:26px;height:20px}}
@media(max-width:620px){
  #approach .process-runner{width:22px;height:16px}
  #approach .process-line li::after{left:-1.5px;top:10.5px;width:2px;height:100%;transform:scaleY(1);transform-origin:center top}
  #approach .process-line li:last-child::after{display:none}
  #approach.is-process-ready:not(.is-process-complete) .process-line li::after{transform:scaleY(0)}
  #approach.is-process-running .process-line li::after{animation-name:tonvion-process-line-y}
}
@media(prefers-reduced-motion:reduce){
  #approach .process-runner{display:none!important}
  #approach .process-line li::after,#approach .process-line li::before,#approach .process-line li>span,#approach .process-line h3{animation:none!important}
  #approach.is-process-ready:not(.is-process-complete) .process-line li::after{transform:scaleX(1)}
  #approach.is-process-ready:not(.is-process-complete) .process-line li::before{background:var(--process-copper);border-radius:50%;transform:scale(1.6);box-shadow:none}
  #approach.is-process-ready:not(.is-process-complete) .process-line li>span{color:var(--process-copper)}
  #approach.is-process-ready:not(.is-process-complete) .process-line h3{opacity:1}
}
@media(max-width:620px) and (prefers-reduced-motion:reduce){#approach.is-process-ready:not(.is-process-complete) .process-line li::after{transform:scaleY(1)}}