/* ==========================================================================
   Procurix — technisch inkoopadvies
   Stylesheet voor de statische marketingwebsite.
   Opbouw: 1) tokens  2) reset  3) layout  4) componenten  5) secties  6) utils
   ========================================================================== */

/* 1) Design tokens ------------------------------------------------------- */

:root {
  /* Exacte merkkleuren, zoals opgegeven bij het logo */
  --logo-blue: #4094cd; /* R64 G148 B205 */
  --logo-ink: #171731; /* R23 G23 B49  */
  --logo-grey: #6b6c6a; /* R107 G108 B106 */

  /* Afgeleiden: alleen donkerder/lichter gemaakt, zelfde tint */
  --brand-900: #171731;
  --brand-800: #1d1d3d;
  --brand-700: #213658;
  --brand-600: #243f63;
  --brand-500: #2e6b94;

  --accent-700: #2e6b94;
  --accent-600: #306f9a;
  --accent-500: #4094cd;
  --accent-300: #8fc0e8;

  --bg: #ffffff;
  --bg-soft: #f2f3f6;
  --bg-sunken: #e7e8ee;
  --surface: #ffffff;
  --border: #dcdde3;
  --border-strong: #b9bac4;

  --text: #171731;
  --text-muted: #6b6c6a;
  --text-inverse: #f0f1f5;
  --text-inverse-muted: #c9cbd6;

  --link: #2e6b94;
  --link-hover: #295f83;
  --accent-on-surface: #306f9a;

  --ring: color-mix(in srgb, var(--accent-500) 60%, transparent);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(23, 23, 49, 0.07), 0 1px 3px rgba(23, 23, 49, 0.09);
  --shadow: 0 4px 12px rgba(23, 23, 49, 0.09), 0 12px 32px rgba(23, 23, 49, 0.07);

  --measure: 66ch;
  --page-max: 1140px;
  --gutter: clamp(1rem, 4vw, 2rem);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171731;
    --bg-soft: #1d1d3d;
    --bg-sunken: #232349;
    --surface: #1f1f40;
    --border: #32325c;
    --border-strong: #45456f;

    --text: #eceef4;
    --text-muted: #b9bdcf;
    --text-inverse: #eceef4;
    --text-inverse-muted: #c9cbd6;

    --link: #8fc0e8;
    --link-hover: #b3d6f2;
    --accent-on-surface: #8fc0e8;
  }
}

/* 2) Reset / basis ------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 650;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem);
}
h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
}
h3 {
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
}

p {
  margin: 0 0 1rem;
  max-width: var(--measure);
}

a {
  color: var(--link);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--link-hover);
}

:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

ul,
ol {
  padding-left: 1.15rem;
}

li {
  margin-bottom: 0.4rem;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

/* 3) Layout -------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}

.section--soft {
  background: var(--bg-soft);
  border-block: 1px solid var(--border);
}

.section__head {
  max-width: 46rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.section__head p {
  color: var(--text-muted);
  font-size: 1.075rem;
}

.grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand-900);
  color: var(--text-inverse);
  padding: 0.75rem 1rem;
  z-index: 100;
}

.skip-link:focus {
  left: 0;
}

/* 4) Componenten --------------------------------------------------------- */

/* Header & navigatie */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.75rem;
}

/* Het logo is de vector uit de aangeleverde EPS, onbewerkt. De hoogte stuurt
   het formaat; de breedte volgt uit de verhouding van het bestand zelf. */
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.logo__plate {
  display: inline-flex;
  border-radius: 8px;
}

.logo__img,
.logo__plate picture img {
  display: block;
  /* Groeit mee met het scherm: op een breed scherm is er ruimte voor een fors
     logo, tussen 820 en 1100px moet het naast de navigatie passen. */
  height: clamp(2.35rem, 0.6rem + 3.2vw, 2.9rem);
  width: auto;
  max-width: none;
}

/* Op donkere ondergrond staat het logo negatief: het woordmerk wit, het grijs
   een tint lichter, het blauw onveranderd. Dat wisselen doet de <picture> in de
   markup zelf, zodat er geen witte drager meer onder het logo nodig is. */
.logo--footer .logo__img {
  height: 1.85rem;
}

@media (max-width: 820px) {
  .logo__img,
  .logo__plate picture img {
    height: 2.4rem;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.5rem);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 1.4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__list li {
  margin: 0;
}

.nav__link {
  display: inline-block;
  padding: 0.4rem 0.2rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.nav__link:hover {
  color: var(--text);
}

.nav__link[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--accent-500);
}

.nav-toggle[hidden] {
  display: none;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
}

@media (max-width: 820px) {
  .nav-toggle {
    display: inline-flex;
  }

  /* Het menu staat in de normale flow: zonder JavaScript is de navigatie
     dan gewoon zichtbaar onder de header, in plaats van als overlay over
     de pagina-inhoud te vallen. */
  .site-header__inner {
    flex-wrap: wrap;
  }

  .nav {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 1rem;
  }

  .nav[hidden] {
    display: none;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link {
    display: block;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border);
    border-left: 2px solid transparent;
  }

  .nav__link[aria-current="page"] {
    border-bottom-color: var(--border);
    border-left-color: var(--accent-500);
    padding-left: 0.6rem;
  }

  .nav .btn {
    margin-top: 0.9rem;
    justify-content: center;
  }
}

/* Knoppen */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    transform 0.15s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--accent-700);
  color: #ffffff;
}

.btn--primary:hover {
  background: color-mix(in srgb, var(--accent-700) 85%, #000);
  color: #ffffff;
}

.btn--ghost {
  border-color: var(--border-strong);
  color: var(--text);
  background: transparent;
}

.btn--ghost:hover {
  border-color: var(--accent-500);
  color: var(--text);
  background: color-mix(in srgb, var(--accent-500) 8%, transparent);
}

.btn--on-dark {
  border-color: color-mix(in srgb, #ffffff 35%, transparent);
  color: var(--text-inverse);
  background: transparent;
}

.btn--on-dark:hover {
  background: color-mix(in srgb, #ffffff 12%, transparent);
  color: #ffffff;
}

/* Kaarten */

.card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card h3 {
  margin-bottom: 0.25rem;
}

.card p {
  color: var(--text-muted);
  margin-bottom: 0;
}

.card__icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent-500) 14%, transparent);
  color: var(--accent-on-surface);
  margin-bottom: 0.6rem;
}

.card__icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.card--link {
  text-decoration: none;
  color: inherit;
}

.card--link:hover {
  border-color: var(--accent-500);
  color: inherit;
}

.card__more {
  margin-top: auto;
  padding-top: 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--link);
}

/* Kenmerklijst met vinkjes */

.checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.checklist li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.55rem;
  color: var(--text-muted);
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.75rem;
  height: 0.4rem;
  border-left: 2px solid var(--accent-500);
  border-bottom: 2px solid var(--accent-500);
  transform: rotate(-45deg);
}

/* Statistieken */

/* De drie kernpunten horen als één rij te lezen. Met auto-fit viel de derde
   tussen 950 en 1100px alleen op een tweede regel, en op een telefoon kregen
   twee kolommen naast elkaar ongelijke hoogtes. Daarom drie vaste kolommen,
   en onder de 560px netjes onder elkaar. */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 560px) {
  .stats {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

.stats li {
  margin: 0;
  /* De kop schaalt mee met de breedte van dit blok, niet met die van het
     scherm: tussen 950 en 1100px is het venster breed terwijl de kolom smal
     is, en daar liep "Onafhankelijk" buiten zijn kader. */
  container-type: inline-size;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--accent-500);
  background: color-mix(in srgb, var(--bg-soft) 70%, transparent);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.stats b {
  display: block;
  font-size: clamp(1.25rem, 13cqi, 1.6rem);
  hyphens: auto;
  overflow-wrap: break-word;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.stats span {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Genummerde stappen */

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.steps > li {
  counter-increment: step;
  position: relative;
  margin: 0;
  padding: 1.4rem 1.25rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.steps > li::before {
  content: "0" counter(step);
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-on-surface);
  margin-bottom: 0.5rem;
}

.steps h3 {
  font-size: 1.1rem;
}

.steps p {
  color: var(--text-muted);
  margin-bottom: 0;
  font-size: 0.95rem;
}

/* Tijdlijn (werkwijze) */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: phase;
}

.timeline > li {
  counter-increment: phase;
  position: relative;
  margin: 0;
  padding: 0 0 2.25rem 3.25rem;
  border-left: 2px solid var(--border);
}

.timeline > li:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.timeline > li::before {
  content: counter(phase);
  position: absolute;
  left: -1.15rem;
  top: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-700);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}

.timeline__meta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

/* Tabel */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--surface);
}

/* Een tabel met alleen een label en een korte waarde past ook op een telefoon.
   De minimumbreedte hierboven is voor brede tabellen met veel kolommen; die mag
   hier weg, anders moet de bezoeker zijwaarts schuiven voor drie regels tekst. */
.table--kv {
  min-width: 0;
}

th,
td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

thead th {
  background: var(--bg-soft);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: 0;
}

/* Formulier */

.form {
  display: grid;
  gap: 0.9rem;
  max-width: 34rem;
}

.field {
  display: grid;
  gap: 0.35rem;
}

.field label {
  font-size: 0.9rem;
  font-weight: 600;
}

.field .hint {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.field input,
.field select,
.field textarea {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.65rem 0.8rem;
  width: 100%;
}

.field textarea {
  min-height: 8rem;
  resize: vertical;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--accent-500);
}

.field .error {
  font-size: 0.85rem;
  color: #c0392b;
  min-height: 1.2em;
}

@media (prefers-color-scheme: dark) {
  .field .error {
    color: #ff8f80;
  }
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #c0392b;
}

.form__status {
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--accent-500);
  background: color-mix(in srgb, var(--accent-500) 12%, transparent);
  font-size: 0.95rem;
}

.form__status[hidden] {
  display: none;
}

/* Accordeon (FAQ) */

.faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.75rem;
}

.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: none;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--accent-on-surface);
}

.faq details[open] summary::after {
  content: "–";
}

.faq details p {
  margin: 0.75rem 0 0;
  color: var(--text-muted);
}

/* Footer */

.site-footer {
  background: var(--brand-900);
  color: var(--text-inverse-muted);
  padding-block: clamp(2rem, 4vw, 2.75rem) 1.25rem;
}

.site-footer a {
  color: var(--text-inverse);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--accent-300);
  text-decoration: underline;
}

.site-footer h2,
.site-footer h3 {
  color: var(--text-inverse);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer p {
  color: var(--text-inverse-muted);
}

.site-footer .logo {
  color: var(--text-inverse);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, #ffffff 15%, transparent);
  font-size: 0.85rem;
}

/* 5) Secties ------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--brand-900), var(--brand-600) 75%);
  color: var(--text-inverse);
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      color-mix(in srgb, #ffffff 6%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, #ffffff 6%, transparent) 1px,
      transparent 1px
    );
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 72% 28%, #000, transparent 70%);
  pointer-events: none;
}

.hero > .container {
  position: relative;
  z-index: 1;
}

.hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
}

.hero h1 {
  color: #ffffff;
}

.hero p {
  color: var(--text-inverse-muted);
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem);
}

.hero .stats li {
  background: color-mix(in srgb, #ffffff 8%, transparent);
  border-left-color: var(--accent-300);
}

.hero .stats span {
  color: var(--text-inverse-muted);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-on-surface);
  margin-bottom: 0.6rem;
}

.hero .eyebrow {
  color: var(--accent-300);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 2.25rem;
}

.hero__panel {
  background: color-mix(in srgb, #ffffff 8%, transparent);
  border: 1px solid color-mix(in srgb, #ffffff 18%, transparent);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.hero__panel h2 {
  font-size: 1.05rem;
  color: #ffffff;
}

.hero__panel ol {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text-inverse-muted);
  font-size: 0.95rem;
}

.page-header {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}

.page-header p {
  color: var(--text-muted);
  font-size: 1.075rem;
}

.breadcrumb {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.breadcrumb a {
  color: var(--text-muted);
}

.service {
  display: grid;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  padding-block: clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid var(--border);
  scroll-margin-top: 5.5rem;
}

.service:first-of-type {
  border-top: 0;
  padding-top: 0;
}

@media (max-width: 820px) {
  .service {
    grid-template-columns: 1fr;
  }
}

.service__aside {
  align-self: start;
  padding: 1.25rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.service__aside h3 {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.service__aside ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.cta {
  background: linear-gradient(120deg, var(--brand-800), var(--brand-600));
  color: var(--text-inverse);
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
}

.cta h2 {
  color: #ffffff;
}

.cta p {
  color: var(--text-inverse-muted);
}

.cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.quote {
  align-self: start;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-500);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.quote p {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.quote figcaption {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tag-list li {
  margin: 0;
  padding: 0.35rem 0.75rem;
  font-size: 0.88rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--surface);
}

.note {
  font-size: 0.9rem;
  color: var(--text-muted);
  border-left: 3px solid var(--border-strong);
  padding-left: 0.9rem;
}

/* Netlify zet op de gratis laag een "Powered by Netlify"-kadertje rechtsonder
   in elke pagina, via een script dat het bij het uitleveren toevoegt. Het hoort
   niet bij deze site, dus het blijft hier buiten beeld. Op een betaald plan, of
   bij een andere hostingpartij, is deze regel overbodig. */
#nl-badge-frame {
  display: none !important;
}

/* 6) Utilities ----------------------------------------------------------- */

.lead {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  color: var(--text-muted);
}

.stack > * + * {
  margin-top: 1rem;
}

.prose {
  max-width: 46rem;
}

.prose h2 {
  margin-top: 1.5rem;
}

/* Houdt een bedrijfsnaam op één regel, zodat "Brink Towing Systems" niet
   halverwege afbreekt en even als "Brink" leest. */
.nowrap {
  white-space: nowrap;
}

.mt-0 {
  margin-top: 0;
}
.mb-0 {
  margin-bottom: 0;
}
.mt-2 {
  margin-top: 2rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}