/* A single, solid red trace follows the edge of cards with links. */
:is(.service-grid .service-card, .project-card, .svc-option, .svc-energy-card, .portfolio-item, .service-link-grid > a) {
  position: relative;
}

:is(.service-grid .service-card, .project-card, .svc-option, .svc-energy-card, .portfolio-item, .service-link-grid > a)::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  width: auto;
  background: var(--red);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  scale: 1;
  transform: none;
  transition: none;
  clip-path: inset(0 0 0 max(0px, calc(100% - 64px)));
}

/* Keep the existing black rail visible beneath the red moving segment. */
.service-grid .service-card:hover { border-top-color: var(--ink); }
.project-card:hover .project-meta { border-top-color: var(--ink); }

:is(.service-grid .service-card, .project-card, .svc-option, .svc-energy-card, .portfolio-item, .service-link-grid > a):is(:focus-visible, :focus-within)::after {
  opacity: 1;
  animation: jta-current-trace 420ms ease-out both;
}

@media (hover: hover) and (pointer: fine) {
  :is(.service-grid .service-card, .project-card, .svc-option, .svc-energy-card, .portfolio-item, .service-link-grid > a):hover::after {
    opacity: 1;
    animation: jta-current-trace 420ms ease-out both;
  }
}

@keyframes jta-current-trace {
  from { clip-path: inset(0 max(0px, calc(100% - 64px)) 0 0); }
  to { clip-path: inset(0 0 0 max(0px, calc(100% - 64px))); }
}

@media (prefers-reduced-motion: reduce) {
  :is(.service-grid .service-card, .project-card, .svc-option, .svc-energy-card, .portfolio-item, .service-link-grid > a)::after {
    animation: none !important;
  }
}

@media (forced-colors: active), print {
  :is(.service-grid .service-card, .project-card, .svc-option, .svc-energy-card, .portfolio-item, .service-link-grid > a)::after {
    display: none;
  }
}