.services-nav { position: fixed; z-index: 40; right: 18px; top: 50%; transform: translateY(-50%); width: 44px; padding: 6px; border: 0; border-radius: 20px; background: transparent; font-family: var(--sans); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .24s ease, visibility 0s .24s, width .2s ease, background-color .2s ease, box-shadow .2s ease; }
.services-nav.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.services-nav:hover, .services-nav:focus-within, .services-nav:has(.services-nav-toggle[aria-expanded=true]) { background: rgba(250,250,252,.96); box-shadow: 0 8px 28px rgba(12,36,84,.08); }
.services-nav:hover, .services-nav:focus-within { width: 260px; }
.services-nav-toggle { display: none; }
.services-nav ol { list-style: none; margin: 0; padding: 0; max-height: calc(100svh - 200px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.services-nav li { margin: 0; padding: 0; }
.services-nav a { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 4px 0; border-radius: 16px; color: var(--ink-3); text-decoration: none; font-size: .72rem; }
.services-nav-number { width: 30px; flex: 0 0 30px; line-height: 24px; border-radius: 12px; text-align: center; font-size: .65rem; transition: background-color .2s ease, color .2s ease; }
.services-nav-label { white-space: nowrap; opacity: 0; transition: opacity .15s; }
.services-nav:hover .services-nav-label, .services-nav:focus-within .services-nav-label { opacity: 1; }
.services-nav a[aria-current] { color: var(--spark); font-weight: 700; }
.services-nav a[aria-current] .services-nav-number { background: var(--spark); color: #fff; }
.services-nav a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }
.services-nav a:focus-visible, .services-nav-toggle:focus-visible { outline: 2px solid var(--spark); outline-offset: -2px; }
.services-nav-ready .svc-row { scroll-margin-top: 100px; }
@media (max-width: 1100px), (max-height: 600px) {
  .services-nav-ready .svc-row { scroll-margin-top: 132px; }
  .services-nav, .services-nav:hover, .services-nav:focus-within { top: 64px; right: 16px; left: 16px; width: auto; padding: 0; transform: none; border-radius: 16px; }
  .services-nav-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 16px; background: transparent; color: var(--navy); text-align: left; font: 500 .72rem/1.3 var(--sans); cursor: pointer; }
  .services-nav-toggle strong { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
  .services-nav-toggle::after { content: ''; flex: none; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
  .services-nav-toggle[aria-expanded=true]::after { transform: translateY(2px) rotate(225deg); }
  .services-nav ol { display: none; max-height: min(60svh, 540px); padding: 4px 8px 8px; }
  .services-nav-toggle[aria-expanded=true] + ol { display: block; }
  .services-nav a { min-height: 44px; padding: 6px 8px; font-size: .82rem; }
  .services-nav .services-nav-label { opacity: 1; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .services-nav, .services-nav-label, .services-nav-number { transition: none; } }
/* On tablets and phones, the service picker takes the main header's place. */
@media (max-width: 1100px) {
  .services-nav-ready .svc-row { scroll-margin-top: 76px; }
  .services-nav-ready > .bar {
    z-index: 51;
    transition: background var(--mid) var(--ease), backdrop-filter var(--mid) var(--ease), transform 460ms cubic-bezier(.4,0,.2,1);
  }
  .services-nav, .services-nav:hover, .services-nav:focus-within {
    z-index: 50; top: 0; right: 0; left: 0; width: auto; border-radius: 0;
    transform: translateY(-100%); background: rgba(250,250,252,.96);
    -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
    box-shadow: 0 4px 20px rgba(12,36,84,.06);
    transition: transform 460ms cubic-bezier(.4,0,.2,1), opacity .32s ease, visibility 0s .46s;
  }
  .services-nav.is-visible { transform: translateY(0); transition-delay: 0s; }
  .services-nav-toggle { min-height: 52px; padding: 10px clamp(16px,2.4vw,30px); border-radius: 0; }
  .services-nav-toggle strong { min-width: 0; }
  .services-nav ol { max-height: min(70svh,calc(100svh - 60px)); padding: 4px clamp(8px,1.5vw,22px) 12px; overscroll-behavior-y: contain; }
}
@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
  .services-nav, .services-nav:hover, .services-nav:focus-within { transition: none; }
  html.bar-hidden .services-nav-ready > .bar { transform: translateY(-100%) !important; }
}