/* Four steps highlighting the client’s involvement and the work handled for them. */
.process { padding: 24px 0 64px; background: #fff; color: #202020; }
.process__title { max-width: 900px; margin: 0 auto 48px; text-wrap: balance; font-size: clamp(32px, 3.3vw, 46px); line-height: 1.12; letter-spacing: -.04em; text-align: center; }
.process__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.process__card { min-width: 0; padding: 28px; border-radius: 20px; background: #f5f5f5; }
.process__step-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.process__step-label { color: #606060; font: 12px/18px var(--mono); white-space: nowrap; }
.process__icon { display: block; width: 44px; height: 44px; flex-shrink: 0; color: #454545; }
.process__card h3 { margin: 0 0 10px; font-size: 22px; line-height: 1.2; letter-spacing: -.035em; }
.process__description { margin: 0; color: #666; font-size: 15px; line-height: 1.55; }
@media (max-width: 1100px) {
  .process__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .process { padding: 8px 16px 48px; }
  .process__title { margin-bottom: 32px; }
  .process__cards { gap: 20px; }
  .process__card { padding: 24px; border-radius: 18px; }
}
@media (max-width: 600px) {
  .process__cards { grid-template-columns: minmax(0, 1fr); }
  .process__step-header { margin-bottom: 24px; }
}