@font-face {
  font-family: "Witcher Precision";
  src: url("/assets/fonts/WitcherPrecision-Regular.woff2?v=1.102") format("woff2"),
       url("/assets/fonts/WitcherPrecision-Regular.ttf?v=1.102") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --font-heading: "Witcher Precision", "Helvetica Neue", Arial, sans-serif;
}

body {
  font-synthesis: none;
  font-kerning: normal;
}

body :is(h1, h2, h3, h4, h5, h6, [role="heading"]) {
  font-family: var(--font-heading);
  font-weight: 400;
  font-synthesis: none;
  font-kerning: normal;
  font-feature-settings: "kern" 1;
  letter-spacing: -.012em;
}

/* The film hero follows its reference layout's neutral sans-serif headline. */
.hero h1 {
  font-family: var(--font-hero);
  font-weight: 500;
}

/* Interactive service titles are buttons inside h3 elements. */
h3 .showcase-trigger {
  font-family: var(--font-heading);
  font-weight: 400;
  font-synthesis: none;
  font-kerning: normal;
  letter-spacing: -.012em;
}

.showcase-trigger > span:first-child { min-width: 0; }
.showcase-toggle { flex: 0 0 1.3em; margin-inline-end: 6px; text-align: center; }
.assurance-columns > section { min-width: 0; }
.results-metric { min-width: 0; }

@media (max-width: 640px) {
  .results-metric dd { font-size: clamp(3rem, 14vw, 4.5rem); }
}

@media (max-width: 360px) {
  .page-hero h1 { font-size: 2.5rem; }
}