/* Services page — page-specific layout only. Component look (cards/buttons/grids) comes from base.css. */

/* Scroll offset so anchored sections clear the sticky header + sticky jump-nav */
main section[id],
.scroll-anchor {
  scroll-margin-top: 128px;
}

/* Page intro */
.services-intro-section { padding-top: var(--space-7); padding-bottom: var(--space-5); }
.services-intro-desc { max-width: 70ch; color: var(--color-text-muted); margin-top: var(--space-3); }

/* Sticky in-page jump navigation */
.services-jumpnav {
  position: sticky;
  top: 64px;
  z-index: 50;
  background: var(--color-surface);
  border-block: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.services-jumpnav-inner { padding-block: var(--space-3); }
.services-jumpnav-track {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: var(--space-1);
}
.services-jumpnav-track a {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.services-jumpnav-track a:hover { color: var(--color-primary); border-color: var(--color-primary); }
.services-jumpnav-track a.active {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* Category sections */
.category-card { align-items: center; gap: var(--space-6); }
.category-info { display: flex; flex-direction: column; gap: var(--space-2); }
.category-icon { font-size: 2.2rem; }
.category-info h2 { color: var(--color-primary-dark); }
.category-desc { color: var(--color-text-muted); }
.category-badge {
  align-self: flex-start;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--color-accent);
  color: #fff;
}

.category-conditions { display: flex; flex-direction: column; gap: var(--space-5); }
.condition-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.condition-list li {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  font-weight: 600;
  color: var(--color-text);
}
.category-conditions .btn { align-self: flex-start; }

/* Core-focus (Neuro & Spine) section is visually larger */
.category-section--featured { padding-top: var(--space-6); }
.category-card--featured { padding: var(--space-6); border: 2px solid var(--color-primary); }
.category-card--featured .category-icon { font-size: 2.8rem; }
.category-card--featured h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }