/* The current-section marker occupies no space, so the navigation stays still. */
.marketing-page #navigation > a[data-section-link] {
  position: relative;
  isolation: isolate;
  transition: color 180ms ease;
}

.marketing-page #navigation > a[data-section-link]::before {
  content: '';
  position: absolute;
  inset: -6px -9px;
  z-index: -1;
  border-radius: 7px;
  background: #edf5ef;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.marketing-page #navigation > a[data-section-link]::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: #24804b;
  opacity: 0;
  transform: scaleX(.5);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.marketing-page #navigation > a[data-section-link][aria-current='location'] {
  color: #206c43;
}

.marketing-page #navigation > a[data-section-link][aria-current='location']::before,
.marketing-page #navigation > a[data-section-link][aria-current='location']::after {
  opacity: 1;
}

.marketing-page #navigation > a[data-section-link][aria-current='location']::after {
  transform: scaleX(1);
}

.marketing-page #navigation.open > a[data-section-link]::before {
  inset: 0 -9px;
}

.marketing-page #navigation.open > a[data-section-link]::after {
  right: auto;
  bottom: 6px;
  width: 24px;
}

@media (prefers-reduced-motion: reduce) {
  .marketing-page #navigation > a[data-section-link],
  .marketing-page #navigation > a[data-section-link]::before,
  .marketing-page #navigation > a[data-section-link]::after {
    transition: none;
  }
}