.s-process { padding: 120px 24px; }
.s-process__header { margin-bottom: 64px; }

.s-process__title {
  font-family: var(--f-neue);
  font-size: clamp(2.8rem, 5vw, 5.5rem);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--c-black);
  max-width: 60vw;
}

.s-process__cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }

.s-process__card {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 28px 24px 32px;
  overflow: hidden;
  cursor: default;
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.s-process__card::before {
  content: attr(data-num);
  position: absolute;
  top: -12px;
  right: 12px;
  font-family: var(--f-neue);
  font-size: 100px;
  font-weight: 700;
  color: rgba(0,0,0,.04);
  line-height: 1;
  transition: color .4s var(--ease);
  pointer-events: none;
  user-select: none;
}
.s-process__card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--c-yellow);
  transition: width .5s var(--ease);
}
.s-process__card:hover { background: var(--c-black); border-color: var(--c-black); transform: translateY(-6px); }
.s-process__card:hover::before { color: rgba(237,255,0,.08); }
.s-process__card:hover::after  { width: 100%; }

.s-process__num {
  font-family: var(--f-nohemi);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--c-muted);
  display: block;
  margin-bottom: 48px;
  transition: color .4s var(--ease);
}
.s-process__name {
  font-family: var(--f-neue);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--c-black);
  display: block;
  margin-bottom: 12px;
  transition: color .4s var(--ease);
}
.s-process__desc {
  font-family: var(--f-aeonik);
  font-size: 14px;
  font-weight: 400;
  color: var(--c-grey);
  line-height: 1.65;
  transition: color .4s var(--ease);
}
.s-process__card:hover .s-process__num  { color: rgba(255,255,255,.3); }
.s-process__card:hover .s-process__name { color: var(--c-white); }
.s-process__card:hover .s-process__desc { color: rgba(255,255,255,.5); }

@media (max-width: 1024px) { .s-process__cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
  .s-process__cards { grid-template-columns: 1fr 1fr; }
  .s-process { padding: 80px 24px; }
}