/* Compact five-step process on the user-supplied stone texture. */
.process.process-compact{padding:40px 0 44px;scroll-margin-top:72px;background:linear-gradient(rgba(25,24,22,.66),rgba(25,24,22,.66)),url('../assets/images/grey-stone-texture.webp') center / cover;color:#F5F1E9;}
.process-compact h2{font-size:clamp(25px,2.2vw,30px);line-height:1.25;text-transform:none;letter-spacing:-.01em;color:#FFFDF8;margin:0 0 28px;}
.process-compact .steps{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;border:0;}
.process-compact .steps::before,.process-compact .steps::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;}
.process-compact .steps::before{background:rgba(245,241,233,.28);}
.process-compact .steps::after{background:#D7BD91;transform-origin:left;}
.process-compact .step{padding:20px 0 0;min-width:0;}
.process-compact .step::before{top:-2px;left:0;width:5px;height:5px;border-radius:50%;background:#D7BD91;}
.process-compact .step .n{display:inline;margin:0 10px 0 0;font-size:13px;line-height:1.5;color:#D7BD91;}
.process-compact .step h3{display:inline;font-size:16px;line-height:1.5;color:#FFFDF8;text-transform:none;letter-spacing:0;}
.process-compact .step p{margin:10px 0 0;font-size:15px;line-height:1.55;color:#F5F1E9;}
.process-compact.process-ready:not(.process-visible) .steps::after{transform:scaleX(0);}
.process-compact.process-visible .steps::after{animation:process-line 2.2s cubic-bezier(.4,0,.2,1) both;}
@keyframes process-line{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@media(max-width:1060px){.process-compact .steps{gap:20px;}.process-compact .step p{font-size:14px;line-height:1.5;}}
@media(max-width:760px){
  .process.process-compact{padding:36px 0 40px;}
  .process-compact h2{font-size:26px;max-width:24ch;margin-bottom:28px;}
  .process-compact .steps{grid-template-columns:1fr;gap:20px;}
  .process-compact .steps::before,.process-compact .steps::after{top:6px;bottom:0;right:auto;width:1px;height:auto;transform-origin:top;}
  .process-compact .step{padding:0 0 0 24px;}
  .process-compact .step::before{top:5px;left:-2px;}
  .process-compact .step p{font-size:15px;line-height:1.5;margin-top:6px;max-width:54ch;}
  .process-compact.process-ready:not(.process-visible) .steps::after{transform:scaleY(0);}
  .process-compact.process-visible .steps::after{animation-name:process-line-vertical;}
  @keyframes process-line-vertical{from{transform:scaleY(0);}to{transform:scaleY(1);}}
}
@media(prefers-reduced-motion:reduce){
  .process-compact.process-ready .steps::after{animation:none;transform:none;}
}