@media (hover: hover) and (pointer: fine) {
  .siteHeader nav > .navSection::after {
    background: #d8aa50;
    transition: transform 250ms cubic-bezier(.22, .61, .36, 1);
  }

  :is(
    .contactDetails dd a,
    .serviceHeader nav > a:not(.serviceBack),
    .serviceCta a,
    .serviceFooter a,
    .personHeader nav > a:not(.personBack),
    .personFooter a
  ) {
    position: relative;
  }

  :is(
    .contactDetails dd a,
    .serviceHeader nav > a:not(.serviceBack),
    .serviceCta a,
    .serviceFooter a,
    .personHeader nav > a:not(.personBack),
    .personFooter a
  )::after {
    content: "";
    pointer-events: none;
    position: absolute;
    right: 0;
    bottom: -5px;
    left: 0;
    height: 1px;
    background: #d8aa50;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 250ms cubic-bezier(.22, .61, .36, 1);
  }

  .serviceCta a::after {
    bottom: -1px;
  }

  :is(
    .contactDetails dd a,
    .serviceHeader nav > a:not(.serviceBack),
    .serviceCta a,
    .serviceFooter a,
    .personHeader nav > a:not(.personBack),
    .personFooter a
  ):is(:hover, :focus-visible)::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .siteHeader nav > .navSection::after,
  :is(
    .contactDetails dd a,
    .serviceHeader nav > a:not(.serviceBack),
    .serviceCta a,
    .serviceFooter a,
    .personHeader nav > a:not(.personBack),
    .personFooter a
  )::after {
    transition: none;
  }
}