/* Services: "how we work", six steps in cards, three across. Once the cards are in view they are uncovered
   one after another, right to left, --hw-gap apart (js/sections/services-process.js). */
.hw{padding:0 0 40px}
.hw-kick{display:flex;align-items:center;gap:12px;font-size:var(--fs-14);font-weight:var(--fw-bold);color:var(--red)}
.hw-kick::before{content:"";width:8px;height:8px;border-radius:var(--r-round);background:var(--red)}
.hw>h2{margin-top:14px;font-size:var(--fs-section);line-height:1.2;color:var(--title)}
.hw-grid{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hw-step{padding:28px 30px 30px;border-radius:var(--r-24);background:var(--mist);border:1px solid var(--line);display:grid;align-content:start}
.hw-n{font-size:clamp(40px,4vw,56px);line-height:1;color:var(--red);font-weight:var(--fw-bold);justify-self:start;font-variant-numeric:tabular-nums}
.hw-step h3{margin-top:20px;font-size:var(--fs-22);font-weight:var(--fw-bold);color:var(--head)}
.hw-step p{margin-top:10px;font-size:var(--fs-15-5);line-height:1.8;color:var(--char)}

/* the steps: hidden until .go, then each card (box, number and words together) uncovered right to left after the one before it */
.hw{--hw-gap:1.5s}
.js .hw-step{clip-path:inset(0 0 0 100%);translate:24px 0;transition:clip-path .9s var(--ease-out),translate .9s var(--ease-out);transition-delay:calc(var(--i,0) * var(--hw-gap))}
.js .hw-grid.go .hw-step{clip-path:inset(0);translate:0 0}

@media (max-width:1000px){.hw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .hw-grid{grid-template-columns:1fr;gap:14px;margin-top:28px}
  .hw-step{padding:22px 22px 24px;border-radius:var(--r-20)}
  .hw-step h3{margin-top:16px;font-size:var(--fs-19)}
  .hw-step p{font-size:var(--fs-15)}
}
@media (prefers-reduced-motion:reduce){.js .hw-step{clip-path:none;translate:none;transition:none}}