/* ==========================================================================
   RanKnight — Services page
   ========================================================================== */

.svc-detail { scroll-margin-top: 6rem; }
.svc-detail__icon {
  display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px;
  background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--color-accent);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); margin-bottom: var(--space-3);
}
.svc-detail__icon svg { width: 1.6rem; height: 1.6rem; }
.svc-detail__jargon { font-size: var(--text-sm); color: var(--color-text-muted); letter-spacing: .01em; }
.svc-detail .prose .btn { margin-top: var(--space-2); }

/* ---- Capability cards -----------------------------------------------------
   The per-service aside was a flat, stretched dark box with checks floating in
   dead space. Rebuilt as an intentional "capabilities" card: hugs its content,
   divided rows, gold check-tiles, and a faint gold crest frame so it reads as a
   deliberate brand object, not a generic block. Tokens adapt on .section--light. */
.split__aside { align-self: start; }

.svc-detail .split__aside.checklist.card {
  gap: 0;
  padding: var(--space-2) var(--space-5);
  border-color: color-mix(in srgb, var(--gold) 32%, var(--color-border));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--gold) 9%, transparent),
    0 18px 40px -28px rgba(0, 0, 0, 0.7);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--gold) 5%, transparent), transparent 42%),
    var(--color-card);
}

.svc-detail .split__aside.checklist li {
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 13%, var(--color-border));
  transition: transform 0.18s ease;
}
.svc-detail .split__aside.checklist li:last-child { border-bottom: 0; }

/* Turn the bare check into a small gold heraldic tile (echoes .svc-detail__icon) */
.svc-detail .split__aside.checklist li svg {
  box-sizing: content-box;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0.55rem;
  border-radius: 11px;
  margin-top: 0;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--gold) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
}
.svc-detail .split__aside.checklist li strong { margin-bottom: 0.15rem; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .svc-detail .split__aside.checklist li:hover { transform: translateX(4px); }
}