/* Service copy stays readable and selectable; the highlight is decorative. */
.services article {
  position: relative;
  isolation: isolate;
}

.services article::before,
.services article::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

.services article::before {
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  transform: scaleX(0);
  transform-origin: left;
}

.services article::after {
  inset: 0 -14px 12px;
  background: linear-gradient(155deg, #65e4f30c, #f37ed109 65%, transparent);
  z-index: -1;
}

nav > a:not(.nav-contact) {
  position: relative;
  padding: 10px 0;
  min-height: 44px;
}

nav > a:not(.nav-contact)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

.nav-contact {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.text-link {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 44px;
  text-decoration-thickness: 1px;
}

nav > a:not(.nav-contact):focus-visible::after,
nav > a:not(.nav-contact):active::after { transform: scaleX(1); }

.nav-contact:focus-visible,
.nav-contact:active {
  color: var(--cyan);
  border-color: var(--cyan);
  background: #65e4f30d;
  box-shadow: 0 0 22px #65e4f311;
}

.button:not(:disabled):focus-visible {
  background: #a8eff8;
  box-shadow: 0 6px 24px #65e4f326;
}

.button:not(:disabled):active {
  background: #a8eff8;
  box-shadow: 0 2px 10px #65e4f322;
}

.text-link:focus-visible,
.text-link:active {
  color: var(--cyan);
  text-decoration-thickness: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .services article:hover::before { opacity: 1; transform: scaleX(1); }
  .services article:hover::after { opacity: 1; }
  nav > a:not(.nav-contact):hover::after { transform: scaleX(1); }
  .nav-contact:hover {
    color: var(--cyan);
    border-color: var(--cyan);
    background: #65e4f30d;
    box-shadow: 0 0 22px #65e4f311;
  }
  .button:not(:disabled):hover {
    background: #a8eff8;
    box-shadow: 0 6px 24px #65e4f326;
  }
  .text-link:hover { text-decoration-thickness: 2px; }
}

@media (prefers-reduced-motion: no-preference) {
  .services article { transition: transform 220ms ease-out; }
  .services article::before {
    transition: transform 260ms ease-out, opacity 180ms ease-out;
  }
  .services article::after { transition: opacity 220ms ease-out; }
  nav > a:not(.nav-contact)::after { transition: transform 180ms ease-out; }
  nav > a,
  .text-link { transition: color 180ms ease-out; }
  .nav-contact {
    transition: color 180ms ease-out, border-color 180ms ease-out,
      background-color 180ms ease-out, box-shadow 180ms ease-out;
  }
  .button:not(:disabled) {
    transition: transform 180ms ease-out, background-color 180ms ease-out,
      box-shadow 180ms ease-out;
  }
  .button:not(:disabled):active { transform: translateY(1px); }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .services article:hover { transform: translateY(-4px); }
  .button:not(:disabled):hover { transform: translateY(-2px); }
  .button:not(:disabled):hover:active { transform: translateY(1px); }
}

/* Preserve the draft form's disabled state even while the pointer is over it. */
button.button:disabled {
  background: #34475a;
  color: #d3dce6;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}