/* Smooth service-card hover without layout recalculation. */
@media (hover: hover) and (pointer: fine) {
  .service-card {
    position: relative;
    transition: transform 500ms cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
  }

  .service-card::before {
    content: "";
    position: absolute;
    inset: 4px -16px;
    z-index: -1;
    background: rgba(255, 255, 255, .025);
    opacity: 0;
    transform: scaleX(.985);
    transition: opacity 350ms ease, transform 500ms cubic-bezier(.16, 1, .3, 1);
    pointer-events: none;
  }

  .service-card:hover {
    padding-left: 0;
    padding-right: 0;
    background: transparent;
    transform: translate3d(10px, 0, 0);
  }

  .service-card:hover::before {
    opacity: 1;
    transform: scaleX(1);
  }

  .service-card > * {
    position: relative;
  }

  .service-icon {
    transition: transform 500ms cubic-bezier(.16, 1, .3, 1), border-color 350ms ease, background-color 350ms ease;
  }

  .service-card:hover .service-icon {
    transform: rotate(5deg) scale(1.06);
    border-color: var(--gold);
    background: rgba(199, 166, 106, .07);
  }

  .service-tags span {
    transition: border-color 300ms ease, color 300ms ease;
  }

  .service-card:hover .service-tags span {
    border-color: #4b4337;
    color: #bbb;
  }
}