/* css/process.css — 'How I work': five-step timeline. */

/* =============================================================
   4e. PROCESS — five steps on one line; the line fills as you scroll
   ============================================================= */
.process{padding:clamp(4rem,9vw,9rem) 5vw;border-top:1px solid var(--line)}
.process-head,.reviews-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:clamp(2.5rem,6vw,5rem)}
.process-head .l span,.reviews-head .l span{font-size:var(--h2-size)}
.process-head p,.reviews-head p{max-width:24rem;padding-bottom:1rem;color:var(--muted)}
/* "how i work" header: title on the right, text on the left, on its own soft panel */
.process-head{flex-direction:row-reverse;align-items:center;padding:clamp(1.8rem,4vw,3.5rem);border-radius:1.4rem;color:var(--bg);
  background:radial-gradient(circle at 12% 25%,rgba(255,77,31,.35),transparent 55%),radial-gradient(rgba(242,240,234,.16) 1.4px,transparent 1.4px) 0 0/22px 22px,#161616}
.process-head h2{text-align:right}
.process-head p{padding-bottom:0;color:rgba(242,240,234,.72)}
.steps{--p:0;position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1rem,2vw,2rem);margin:0;padding:3.2rem 0 0;list-style:none}
.steps::before,.steps::after{content:"";position:absolute;left:0;right:0;top:.55rem;height:2px;background:var(--line)}
.steps::after{background:var(--accent);transform:scaleX(var(--p));transform-origin:left}
.step{position:relative;transition:opacity .6s,transform .6s}
.step.dim{opacity:.35;transform:translateY(12px)}
.step.dim.on{opacity:1;transform:none}
.step::before{content:"";position:absolute;left:0;top:calc(-3.2rem + 3px);width:14px;height:14px;border:2px solid var(--line);border-radius:50%;background:var(--bg);transition:background .4s,border-color .4s}
.step.on::before{background:var(--accent);border-color:var(--accent)}
.step-num{display:block;margin-bottom:.8rem;font-size:.9rem;font-weight:700;color:var(--accent)}
.step h3{margin-bottom:.6rem;font-size:clamp(1.2rem,1.8vw,1.6rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;transition:color .3s}
.step:hover h3{color:var(--accent)}
.step p{font-size:.95rem;color:var(--muted)}
@media(max-width:1024px){
  .steps{grid-template-columns:1fr;gap:0;padding:0 0 0 2.2rem}
  .steps::before,.steps::after{left:.45rem;right:auto;top:0;bottom:0;width:2px;height:auto}
  .steps::after{transform:scaleY(var(--p));transform-origin:top}
  .step{padding-bottom:2.2rem}
  .step::before{left:calc(-2.2rem + .45rem - 6px);top:.3rem}
}