.services__top {
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: end;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.services__top .lead { max-width: 42ch; padding-bottom: .3rem; }

.cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--paper-3); border-left: 1px solid var(--paper-3);
}
.card {
  position: relative; padding: clamp(1.8rem, 3vw, 2.6rem);
  border-right: 1px solid var(--paper-3); border-bottom: 1px solid var(--paper-3);
  background: var(--paper); overflow: hidden;
  transition: background .5s var(--ease), transform .5s var(--ease-out);
  display: flex; flex-direction: column; gap: 1rem; min-height: clamp(280px, 32vw, 340px);
}
.card::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .55s var(--ease-out);
}
.card:hover { background: var(--paper-2); }
.card:hover::before { transform: scaleX(1); }
.card__num { font-family: var(--font-display); font-size: .95rem; color: var(--text-3); letter-spacing: .06em; transition: color .4s var(--ease); }
.card:hover .card__num { color: var(--gold); }
.card__icon { width: 44px; height: 44px; color: var(--text); margin-bottom: .3rem; transition: transform .55s var(--ease-out), color .4s var(--ease); }
.card:hover .card__icon { transform: translateY(-3px) scale(1.04); color: var(--gold); }
.card__icon svg { width: 100%; height: 100%; }
.card h3 { font-size: var(--step-2); font-family: var(--font-display); }
.card p { color: var(--text-2); font-size: .94rem; line-height: 1.62; }
.card__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: 1.1rem; }
.card__tags i {
  font-style: normal; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-3); border: 1px solid var(--paper-3); border-radius: 999px; padding: .28rem .6rem;
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.card:hover .card__tags i { border-color: var(--text-3); color: var(--text-2); }

.card--cta { background: var(--ink); color: var(--on-ink); justify-content: space-between; }
.card--cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(360px circle at 80% 10%, rgba(192,162,101,.18), transparent 70%);
}
.card--cta:hover { background: var(--ink-3); }
.card--cta h3 { position: relative; z-index: 1; }
.card--cta p { color: var(--on-ink-2); position: relative; z-index: 1; }
.card--cta .btn { position: relative; z-index: 1; align-self: flex-start; }

@media (max-width: 1080px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .services__top { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr; }
}