/* Template: expertise — three-branch diagram as one static SVG (see
   js/templates/expertise.js). Geometry, font sizes and stroke widths follow
   the reference SVG; colors/fonts are theme tokens, so the diagram adapts
   to dark/light mode. The SVG scales uniformly (viewBox 1000x420). */

.expertise {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  padding: clamp(96px, 16vh, 160px) 0;
}

.expertise__inner {
  width: 100%;
  display: flex;
  justify-content: center;
}

.expertise__diagram {
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
}

.expertise__diagram-title {
  fill: var(--color-text-primary);
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 600;
}

.expertise__diagram-label {
  fill: var(--color-text-primary);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
}

.expertise__diagram-line {
  fill: none;
  stroke: var(--color-text-primary);
  stroke-opacity: 0.55;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.expertise__diagram-node {
  fill: var(--color-text-primary);
}