.services { padding-block: 5rem; }
.services h2 { font-size: clamp(1.9rem, 3.5vw, 2.75rem); margin: 0.75rem 0 1rem; }
.services .lede { font-size: 1.125rem; max-width: 62ch; margin-bottom: 3rem; }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem 2rem; }
.svc-card {
  --r: 16px; --tabh: 48px; --tabw: 42%;
  position: relative; background: var(--ink); color: var(--bg);
  border-radius: 0 0 var(--r) var(--r); border-top-left-radius: var(--r);
  margin-top: var(--tabh); padding: 2rem 1.75rem 2rem;
  transition: transform 0.15s ease-out;
}
.svc-card:hover { transform: translateY(-2px); }
.svc-card::before {
  content: ""; position: absolute; bottom: 100%; right: 0;
  width: var(--tabw); height: var(--tabh);
  background: var(--ink); border-radius: var(--r) var(--r) 0 0;
}
.svc-card::after {
  content: ""; position: absolute; bottom: 100%; right: var(--tabw);
  width: var(--r); height: var(--r);
  background: radial-gradient(circle at 0 0, transparent calc(var(--r) - 0.5px), var(--ink) var(--r));
}
.svc-eyebrow {
  position: absolute; bottom: calc(100% + 14px); left: 2px;
  font-family: var(--mono); font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--asphalt);
}
.svc-shield {
  position: absolute; bottom: calc(100% - 6px); right: 1.4rem; z-index: 1;
  font-family: var(--display); font-weight: 700; font-size: 2.5rem; line-height: 1;
  color: color-mix(in oklch, var(--bg) 55%, var(--accent));
}
.svc-card h3 { font-size: 1.5rem; margin-top: 1.5rem; margin-bottom: 0.85rem; letter-spacing: 0.03em; }
.svc-more {
  display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.1rem;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in oklch, var(--bg) 55%, var(--accent)); text-decoration: none;
}
.svc-more svg { transition: transform 0.15s ease-out; }
.svc-more:hover svg { transform: translateX(4px); }
.svc-more:hover { text-decoration: underline; text-underline-offset: 4px; }
.svc-card p { font-size: 0.95rem; line-height: 1.65; color: color-mix(in oklch, var(--sky) 75%, var(--bg)); }

@media (max-width: 900px) {
  .svc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .svc-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-card { transition: none; }
  .svc-card:hover { transform: none; }
}