/* Approved option A: matching pill shapes with a clear primary action. */
.service-page .service-header-actions { gap: 10px; }
.service-page .service-nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  gap: 14px;
  width: auto;
  height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 12px/1 var(--jp);
  letter-spacing: .015em;
  white-space: nowrap;
  transform: none;
  transition: background .22s, border-color .22s, color .22s, box-shadow .22s;
}
.service-page .service-nav-button > span {
  display: inline;
  width: auto;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  transform: none;
}
.service-page .service-nav-button:hover > span { transform: none; }
.service-page .service-nav-login {
  background: rgba(255, 255, 255, .02);
  border-color: rgba(219, 232, 225, .22);
  color: #dbe8e1;
}
.service-page .service-nav-login:hover,
.service-page .service-nav-login:focus-visible {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(219, 232, 225, .4);
  color: #fff;
}
.service-page .service-nav-consult {
  background: var(--lime);
  border-color: var(--lime);
  color: #163327;
}
.service-page .service-nav-consult:hover,
.service-page .service-nav-consult:focus-visible {
  background: #c0f85b;
  border-color: #c0f85b;
  color: #163327;
  box-shadow: 0 0 0 3px rgba(182, 242, 74, .07);
}
.service-page .service-nav-button svg {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: transform .22s;
}
.service-page .service-nav-consult:hover svg { transform: translateX(3px); }
.service-page .service-nav-button:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }

@media (max-width: 960px) {
  .service-page .service-header-actions .service-nav-button { display: none; }
  .service-page .mobile-nav > a { color: #dbe8e1; }
  .service-mobile-actions { display: flex; flex-wrap: wrap; flex: none; gap: 12px; padding-top: 24px; }
  .service-page .mobile-nav .service-nav-button { font-family: var(--jp); }
  .service-page .mobile-nav .service-nav-button > span { width: auto; font: inherit; color: inherit; }
}
@media (prefers-reduced-motion: reduce) {
  .service-page .service-nav-button,
  .service-page .service-nav-button svg { transition: none; }
  .service-page .service-nav-consult:hover svg { transform: none; }
}