/* Services We Use (internal page). Colors taken from the site's header styles. */
.svc-page {
  --svc-navy: #0a3151;
  --svc-teal: #147ca0;
  --svc-line: #dbe5eb;
  --svc-soft: #edf5f9;
  --svc-muted: #4f6273;
  color: #1c2b38;
  background: #f7fafc;
}
.svc-page *, .svc-page *::before, .svc-page *::after { box-sizing: border-box; }
.svc-page a { color: var(--svc-teal); }
.svc-page :focus-visible { outline: 3px solid var(--svc-teal); outline-offset: 2px; }
.svc-page [hidden] { display: none !important; }

.svc-hero { background: var(--svc-navy); color: #fff; padding: 2.5rem 0 2rem; }
.svc-hero h1 { margin: 0 0 .5rem; font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.2; color: #fff; }
.svc-hero p { margin: 0; max-width: 65ch; color: #d3e2ee; }
.svc-badge { display: inline-block; margin-bottom: 1rem; padding: .2rem .7rem; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; font-size: .85rem; }

.svc-layout { display: grid; grid-template-columns: 230px 1fr; gap: 2rem; padding-top: 1.75rem; padding-bottom: 3rem; }

.svc-side { position: sticky; top: 1rem; align-self: start; }
.svc-side h2 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 600; color: var(--svc-muted); }
.svc-side ul { list-style: none; margin: 0; padding: 0; }
.svc-side a { display: flex; justify-content: space-between; gap: .5rem; padding: .4rem .55rem; border-radius: 6px; color: var(--svc-navy); text-decoration: none; font-size: .925rem; }
.svc-side a:hover { background: var(--svc-soft); }
.svc-count { color: var(--svc-muted); font-variant-numeric: tabular-nums; }

.svc-search-label { display: block; margin-bottom: .4rem; font-weight: 600; color: var(--svc-navy); }
.svc-search { width: 100%; padding: .75rem .9rem; font: inherit; border: 1px solid var(--svc-line); border-radius: 8px; background: #fff; color: inherit; }
.svc-status { margin: .45rem 0 1.5rem; color: var(--svc-muted); font-size: .9rem; }

.svc-note { margin-bottom: 2rem; padding: .9rem 1rem; background: #fff; border-left: 4px solid var(--svc-teal); color: var(--svc-muted); font-size: .925rem; }
.svc-note strong { color: var(--svc-navy); }

.svc-group { margin-bottom: 2.25rem; scroll-margin-top: 1rem; }
.svc-group h2 { margin: 0 0 .75rem; padding-bottom: .4rem; font-size: 1.3rem; color: var(--svc-navy); border-bottom: 2px solid var(--svc-navy); }
.svc-list { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--svc-line); border-radius: 8px; }
.svc-item { display: grid; grid-template-columns: 210px 1fr auto; gap: 1rem; align-items: baseline; padding: .9rem 1rem; border-top: 1px solid var(--svc-line); }
.svc-item:first-child { border-top: 0; }
.svc-name { font-weight: 700; color: var(--svc-navy); }
.svc-core { display: inline-block; margin-left: .35rem; padding: 0 .45rem; font-size: .75rem; font-weight: 600; border-radius: 4px; background: var(--svc-soft); color: var(--svc-teal); vertical-align: middle; }
.svc-desc { margin: 0; color: var(--svc-muted); max-width: 70ch; line-height: 1.55; }
.svc-link { white-space: nowrap; font-weight: 600; font-size: .925rem; }
.svc-empty { padding: 2rem 1rem; text-align: center; color: var(--svc-muted); }
.svc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

@media (max-width: 860px) {
  .svc-layout { grid-template-columns: 1fr; }
  .svc-side { position: static; }
  .svc-side ul { display: flex; flex-wrap: wrap; gap: .25rem; }
  .svc-item { grid-template-columns: 1fr; gap: .25rem; }
}