/* ==========================================================
   Sub-nav / Filter bar — sticky tab navigation
   ========================================================== */
.sub-nav,
.filter,
.svc-nav {
  background: #fff;
  border-bottom: 1px solid var(--c-line);
  position: sticky;
  top: 72px; /* sit below fixed header */
  z-index: 50;
  box-shadow: 0 2px 12px rgba(13, 79, 110, .04);
}
@media (max-width: 960px) {
  .sub-nav,
  .filter,
  .svc-nav { top: 60px; }
}
.sub-nav-inner,
.filter-inner,
.svc-nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  overflow-x: auto;
}
.sub-nav-label,
.filter-label,
.svc-nav-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--c-cyan);
  font-weight: 600;
  white-space: nowrap;
}
.sub-nav-tabs,
.filter-tabs,
.svc-nav-tabs {
  display: flex;
  gap: 4px;
}
.sub-nav-tab,
.filter-tab,
.svc-nav-tab {
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--sans);
  color: var(--c-ink-soft);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
  text-decoration: none;
}
.sub-nav-tab:hover,
.filter-tab:hover,
.svc-nav-tab:hover {
  color: var(--c-primary);
  background: var(--c-bg-alt);
}
.sub-nav-tab.active,
.filter-tab.active,
.svc-nav-tab.active {
  background: var(--c-primary);
  color: #fff;
}
.filter-tab .count {
  font-family: var(--mono);
  font-size: 11px;
  opacity: .7;
  margin-left: 6px;
}
