.services { --gx: 76%; --gy: 46%; --gw: 52%; --gh: 42%; padding-top: var(--section); }
.services .display { margin-bottom: clamp(24px, 4vw, 52px); }

.svc { position: relative; display: grid; }
.svc-thumb {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--h, 0px);
  border-radius: 26px;
  background: var(--grain), rgba(255, 255, 255, .045);
  background-size: 180px, auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  opacity: var(--o, 0);
  transform: translateY(var(--y, 0px));
  transition: transform .55s var(--spring), height .55s var(--spring), opacity .35s;
  pointer-events: none;
}
.svc.no-glide .svc-thumb { transition: opacity .35s; }
.svc-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  padding: 26px 28px;
}
.svc-row h3 { font-size: clamp(28px, 3.4vw, 48px); font-weight: 600; line-height: 1.05; letter-spacing: -0.04em; transition: color .35s, transform .6s var(--spring); }
.svc-row p { max-width: 34ch; color: var(--ink-3); font-size: 16px; line-height: 1.5; transition: color .35s; }
.svc.is-hover .svc-row h3 { color: rgba(255, 255, 255, .3); }
.svc .svc-row.is-on h3 { color: #fff; transform: translateX(12px); }
.svc-row.is-on p { color: var(--ink-2); }

@media (hover: none), (max-width: 760px) {
  .svc-thumb { display: none; }
  .svc-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 0; }
  .svc-row h3 { font-size: clamp(26px, 7vw, 34px); }
  .svc-row p { grid-row: 2; color: var(--ink-2); font-size: 15px; }