/* Service cards — T1-specific: centered text with top accent bar */

@layer components {
  .services-grid li {
    text-align: center;
  }
  .services-grid li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2.5rem;
    height: 3px;
    background: var(--color-primary);
    border-radius: 0 0 2px 2px;
    transition: width var(--transition);
  }
  .services-grid li:hover {
    border-color: var(--color-primary);
  }
  .services-grid li:hover::before {
    width: 100%;
  }
}