/* Zelfgehoste webfonts — zie wwwroot/vendor/fonts/HERKOMST.md.
   WHY: hier stond geen enkel webfont, alleen een systeem-stack met "Iowan Old Style" (bestaat alleen
   op macOS) en "Aptos" (alleen mét Office). De site zag er dus op elk apparaat anders uit. Bewust
   zelfgehost in plaats van via de Google-CDN: dat scheelt het IP van elke bezoeker naar een
   Amerikaanse partij. Variabele fonts, dus één bestand dekt 400/600/700. */
@font-face {
  font-family: "Source Serif 4";
  src: url("/vendor/fonts/source-serif-4-latin-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  src: url("/vendor/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Reserveletters met de maten van de webfonts. WHY: zonder deze vlakken zakte de hero bij de wissel
   naar het webfont 30-56 px (CLS 0,26 in PageSpeed, 24-10-2026). Times New Roman, Liberation en
   Tinos/Arimo delen hun metriek, dus één stel waarden dekt Windows, macOS en Linux. Gemeten met
   fontTools op een zin van de startpagina; 400, 600 en 700 apart, want elk gewicht loopt anders uit. */
@font-face {
  font-family: "Source Serif 4 reserve";
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Tinos");
  font-weight: 100 500;
  size-adjust: 118.42%;
  ascent-override: 87.49%;
  descent-override: 28.29%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Source Serif 4 reserve";
  src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Liberation Serif Bold"), local("Tinos Bold");
  font-weight: 600;
  size-adjust: 113.28%;
  ascent-override: 91.45%;
  descent-override: 29.57%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Source Serif 4 reserve";
  src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Liberation Serif Bold"), local("Tinos Bold");
  font-weight: 700 900;
  size-adjust: 115.21%;
  ascent-override: 89.92%;
  descent-override: 29.08%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter reserve";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
  font-weight: 100 500;
  size-adjust: 107.2%;
  ascent-override: 90.37%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter reserve";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold");
  font-weight: 600;
  size-adjust: 101.82%;
  ascent-override: 95.14%;
  descent-override: 23.69%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter reserve";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold");
  font-weight: 700 900;
  size-adjust: 103.04%;
  ascent-override: 94.02%;
  descent-override: 23.41%;
  line-gap-override: 0%;
}

:root {
  /* Rood wax-zegel palette met behoud van warme parchment achtergrond en gouden accent.
     Goud + rood is een klassieke notariaat-combinatie (lakzegel + bladgoud). */
  --sig-font-serif: "Source Serif 4", "Source Serif 4 reserve", Georgia, serif;
  --sig-font-sans: "Inter", "Inter reserve", "Segoe UI", system-ui, sans-serif;
  --sig-ink: #1a1210;
  --sig-muted: #665048;
  --sig-surface: #f7f4ed;
  --sig-surface-strong: #efe7d7;
  --sig-panel: #fffdf8;
  /* Bandkleuren voor het sectieritme. Deze twee moeten van elkaar én van de body-gradient
     verschillen, anders leest de pagina als één doorlopend vlak (zie .sig-section-muted). */
  --sig-band-warm: #f0e8d8;
  --sig-band-light: #fffefb;
  --sig-line: rgba(26, 18, 16, 0.12);
  --sig-primary: #8b1a1a;
  --sig-primary-strong: #5c0f0f;
  --sig-accent: #c98a42;
  --sig-footer: #2a0f10;
  --sig-footer-ink: rgba(255, 250, 240, 0.88);
  --sig-shadow: 0 18px 42px rgba(26, 18, 16, 0.09);
  /* Typeschaal: vier tekststappen en vier kopstappen. Een kaartkop is bewust kleiner dan een sectiekop: een
     kaart is vaak 200-380px breed, en op sectiekopmaat brak "Contactformulier" daar midden in het woord af. */
  --sig-type-small: 0.85rem;
  --sig-type-compact: 0.94rem;
  --sig-type-body: 1rem;
  --sig-type-lead: 1.15rem;
  --sig-type-card-title: clamp(1.2rem, 1.05rem + 0.35vw, 1.45rem);
  --sig-type-section-title: clamp(1.6rem, 3vw, 2.7rem);
  --sig-type-hero-title: clamp(2.1rem, 3.6vw, 3.4rem);
  --sig-type-page-title: clamp(1.9rem, 3.2vw, 3.2rem);
  /* Pictogram in een tekstregel (het pijltje van een menugroep), geen tekststap. */
  --sig-type-icon: 0.72rem;

  --sig-radius-field: 14px;
  --sig-radius-card: 24px;
  --sig-radius-pill: 999px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100%;
  color: var(--sig-ink);
  background:
    radial-gradient(circle at top left, rgba(201, 138, 66, 0.18), transparent 28%),
    linear-gradient(180deg, #fffdf8 0%, var(--sig-surface) 52%, #f3eee1 100%);
  font-family: var(--sig-font-sans);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: -0.03em;
  font-family: var(--sig-font-serif);
  /* break-word blijft als nooduitgang voor woorden breder dan de kolom;
     hyphens: manual voorkomt gretig afbreken ("bekwaamh-eid") in smalle kaarten */
  overflow-wrap: break-word;
  hyphens: manual;
  text-wrap: balance;
}

p {
  margin: 0;
  line-height: 1.65;
}

/* 1280 px: hetzelfde plafond als de werkbench (.sig-main-shell). Op 1180 bleef op een 1920-scherm 39% leeg. */
.sig-shell {
  width: min(1280px, calc(100% - 2rem));
  margin: 0 auto;
}

.sig-skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: var(--sig-radius-pill);
  color: #fff;
  background: var(--sig-primary-strong);
}

.sig-skip-link:focus {
  top: 1rem;
}

.sig-site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(26, 18, 16, 0.08);
  background: rgba(255, 253, 248, 0.9);
}

.sig-header-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 84px;
}

.sig-brandlockup {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  text-decoration: none;
}

.sig-brandlockup-stack {
  display: grid;
  gap: 0.15rem;
}

.sig-brand-mark {
  width: 40px;
  height: 40px;
  flex: none;
}

.sig-brand-naam {
  color: var(--sig-ink);
  font-family: var(--sig-font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}

.sig-brand-wordmark,
.sig-footer-wordmark {
  height: 28px;
  width: auto;
}

.sig-brandlockup-image {
  width: auto;
  height: 32px;
  max-width: min(180px, 100%);
}

.sig-brand-context {
  color: var(--sig-muted);
  font-size: var(--sig-type-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sig-header-menu {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
}

.sig-nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(26, 18, 16, 0.14);
  border-radius: var(--sig-radius-field);
  background: rgba(255, 255, 255, 0.82);
}

.sig-nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: var(--sig-radius-pill);
  background: var(--sig-primary-strong);
}

.sig-site-nav,
.sig-header-actions,
.sig-action-row,
.sig-stat-row,
.sig-cta-band-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sig-site-nav {
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.6rem;
}

.sig-nav-group {
  position: relative;
}

.sig-nav-group summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.65rem;
  border-radius: var(--sig-radius-pill);
  color: var(--sig-muted);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.sig-nav-group summary::-webkit-details-marker {
  display: none;
}

.sig-nav-group summary::after {
  content: "\25BE";
  font-size: var(--sig-type-icon);
  line-height: 1;
}

.sig-nav-group[open] summary,
.sig-nav-group summary:hover,
.sig-nav-group.is-active summary {
  color: var(--sig-primary-strong);
  background: rgba(139, 26, 26, 0.08);
}

.sig-nav-group-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 30;
  display: grid;
  min-width: 11rem;
  padding: 0.35rem;
  border: 1px solid rgba(26, 18, 16, 0.12);
  border-radius: var(--sig-radius-field);
  background: rgba(255, 253, 248, 0.98);
  box-shadow: var(--sig-shadow);
}

.sig-nav-group-menu a {
  white-space: nowrap;
}

.sig-site-nav a {
  padding: 0.4rem 0.65rem;
  border-radius: var(--sig-radius-pill);
  color: var(--sig-muted);
  text-decoration: none;
  white-space: nowrap;
}

.sig-site-nav a.is-active,
.sig-site-nav a:hover {
  color: var(--sig-primary-strong);
  background: rgba(139, 26, 26, 0.08);
}

.sig-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.85rem 1.2rem;
  border: 1px solid transparent;
  border-radius: var(--sig-radius-pill);
  text-decoration: none;
  font-weight: 600;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.sig-button:focus-visible,
.sig-nav-toggle:focus-visible,
.sig-field input:focus-visible,
.sig-field select:focus-visible,
.sig-field textarea:focus-visible {
  outline: 2px solid rgba(139, 26, 26, 0.42);
  outline-offset: 2px;
}

.sig-button:hover {
  transform: translateY(-1px);
}

.sig-button-primary {
  color: #fff;
  background: var(--sig-primary);
}

.sig-button-secondary,
.sig-button-ghost {
  border-color: rgba(26, 18, 16, 0.14);
  color: var(--sig-primary-strong);
  background: rgba(255, 255, 255, 0.74);
}

.sig-button-intake {
  box-shadow: 0 12px 28px rgba(26, 18, 16, 0.07);
}

.sig-button-intake.is-active {
  border-color: rgba(139, 26, 26, 0.22);
  color: var(--sig-primary-strong);
  background: rgba(139, 26, 26, 0.1);
}

.sig-button-ghost {
  background: transparent;
}

/* Op 5.5rem per kant stond er tussen twee blokken 176 px lucht. */
.sig-hero,
.sig-page-hero,
.sig-section,
.sig-cta-band {
  padding: clamp(2.75rem, 4.5vw, 4rem) 0;
}

/* Twee blokken op dezelfde achtergrond delen hun tussenruimte: anders telt de onderkant van het ene blok
   op bij de bovenkant van het volgende, zonder band die dat verklaart. Een wisseling naar een gekleurde
   band (muted/panel) houdt beide kanten, want daar markeert de band zelf de grens. */
.sig-page-hero + .sig-section:not(.sig-section-muted):not(.sig-section-panel),
.sig-selfstart-hero + .sig-section:not(.sig-section-muted):not(.sig-section-panel),
.sig-section:not(.sig-section-muted):not(.sig-section-panel) + .sig-section:not(.sig-section-muted):not(.sig-section-panel),
.sig-section-muted + .sig-section-muted,
.sig-page-hero + .sig-cta-band,
.sig-section:not(.sig-section-muted):not(.sig-section-panel) + .sig-cta-band {
  padding-top: 0;
}

.sig-hero-grid,
.sig-copy-grid,
.sig-card-grid,
.sig-feature-grid,
.sig-footer-grid,
.sig-story-grid,
.sig-proof-band,
.sig-contact-grid,
.sig-tour-stage,
.sig-product-surface-grid,
.sig-company-grid,
.sig-faq-layout,
.sig-compare-grid,
.sig-process-grid,
.sig-case-frame,
.sig-trust-strip-grid {
  display: grid;
  gap: 1.5rem;
}

/* De beeldkolom kreeg 0.9fr van 1180px ≈ 480px voor een screenshot van 1600px breed — daarin is geen
   enkel woord leesbaar, terwijl juist dít het bewijs is dat het een echt product is. Kolommen
   gelijkgetrokken; het beeld wint ~110px en de tekstkolom blijft ruim genoeg voor de kop. */
.sig-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
}

.sig-hero-grid > * {
  min-width: 0;
}

.sig-hero-copy {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.sig-page-hero-inner,
.sig-page-hero-story,
.sig-tour-stack,
.sig-contact-copy,
.sig-form-grid,
.sig-proof-card,
.sig-story-card,
.sig-tour-copy,
.sig-form-intro,
.sig-field,
.sig-company-card,
.sig-company-meta,
.sig-side-stack,
.sig-faq-list,
.sig-legal-stack {
  display: grid;
  gap: 1rem;
}

.sig-kicker,
.sig-panel-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
  color: var(--sig-primary);
  font-size: var(--sig-type-small);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sig-hero h1 {
  max-width: 18ch;
  font-size: var(--sig-type-hero-title);
  line-height: 1.06;
}

.sig-page-hero h1 {
  font-size: var(--sig-type-page-title);
  line-height: 1.06;
}

/* Geen eigen max-width: een smallere, gecentreerde hero sprong 14 px in ten opzichte van de secties eronder. */
.sig-page-hero-inner {
  min-width: 0;
}

/* Bewust zonder max-width (besluit Jan 07-10-2026): inleidingen lopen over de volle kolom, net als de
   kaarten eronder. Een smalle maat liet de rechterhelft van elke hero leeg. */
.sig-lead,
.sig-section-heading p,
.sig-page-hero p {
  color: var(--sig-muted);
  font-size: var(--sig-type-lead);
}

.sig-hero-copy .sig-lead {
  max-width: 34rem;
}

/* Drie gelijke kolommen in plaats van een wrappende flex-rij: bij wrap kwam de derde statistiek
   alleen onder de eerste te staan, met de basislijnen uit het lood door align-items: center. */
.sig-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 2rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--sig-line);
}

.sig-stat-row div {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.sig-stat-row strong {
  font-size: var(--sig-type-card-title);
}

.sig-stat-row span {
  color: var(--sig-muted);
  font-size: var(--sig-type-small);
}

.sig-hero-visual {
  display: grid;
  gap: 1.25rem;
}

.sig-panel,
.sig-panel-large,
.sig-card,
.sig-feature-card,
.sig-copy-card,
.sig-proof-card,
.sig-story-card,
.sig-form-card,
.sig-mini-shot,
.sig-product-window,
.sig-surface-card,
.sig-company-card,
.sig-faq-item,
.sig-compare-card,
.sig-process-card,
.sig-case-slot,
.sig-legal-card,
.sig-trust-chip {
  border: 1px solid var(--sig-line);
  border-radius: var(--sig-radius-card);
  background: rgba(255, 253, 248, 0.88);
  box-shadow: var(--sig-shadow);
}

.sig-panel,
.sig-card,
.sig-feature-card,
.sig-copy-card,
.sig-proof-card,
.sig-story-card,
.sig-form-card,
.sig-surface-card,
.sig-company-card,
.sig-compare-card,
.sig-process-card,
.sig-case-slot,
.sig-legal-card {
  padding: 1.6rem;
}

.sig-card,
.sig-feature-card,
.sig-copy-card,
.sig-proof-card,
.sig-story-card,
.sig-surface-card,
.sig-company-card,
.sig-compare-card,
.sig-process-card,
.sig-case-slot,
.sig-legal-card {
  min-width: 0;
  height: 100%;
  align-content: start;
}

.sig-mini-shot,
.sig-product-window {
  padding: 1.25rem;
}

.sig-panel-large {
  min-width: 0;
  padding: 2rem;
  background:
    linear-gradient(145deg, rgba(139, 26, 26, 0.92), rgba(92, 15, 15, 0.96)),
    url("/branding/login/sigillum-login-hero.svg") center/cover no-repeat;
  color: #fff;
}

.sig-panel-large .sig-panel-label,
.sig-panel-large .sig-kicker {
  color: #e9c9b6;
}

.sig-panel-large p,
.sig-panel p,
.sig-card p,
.sig-feature-card p,
.sig-copy-card p {
  color: var(--sig-muted);
}

.sig-panel-large p {
  color: rgba(255, 249, 240, 0.86);
}

.sig-panel-large-compact {
  background: linear-gradient(145deg, rgba(139, 26, 26, 0.94), rgba(92, 15, 15, 0.98));
}

.sig-product-window {
  min-width: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 244, 237, 0.96));
}

.sig-product-window-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: var(--sig-muted);
  font-size: var(--sig-type-compact);
}

.sig-window-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--sig-radius-pill);
  background: rgba(139, 26, 26, 0.2);
}

.sig-window-dot:first-child {
  background: rgba(139, 26, 26, 0.62);
}

.sig-product-window-body {
  display: grid;
  grid-template-columns: minmax(126px, 148px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

figure.sig-product-window {
  margin: 0;
}

.sig-product-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--sig-radius-field);
  border: 1px solid rgba(31, 27, 22, 0.08);
}

.sig-product-caption {
  margin-top: 0.6rem;
  font-size: var(--sig-type-small);
  color: var(--sig-muted);
}

.sig-product-window-inline {
  margin: 2.25rem 0 1.75rem;
}

.sig-feature-link {
  display: inline-block;
  margin-top: 0.65rem;
  font-size: var(--sig-type-compact);
  font-weight: 600;
}

.sig-proof-band + .sig-compare-grid {
  margin-top: 1.75rem;
}

.sig-card-grid + .sig-action-row,
.sig-feature-grid + .sig-action-row {
  margin-top: 1.75rem;
}

@media (max-width: 640px) {
  .sig-cookie-banner {
    bottom: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
  }

  .sig-cookie-banner-inner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    font-size: var(--sig-type-small);
    line-height: 1.35;
  }

  .sig-cookie-banner-inner strong {
    display: none;
  }

  .sig-cookie-banner-inner p {
    margin: 0;
    flex: 1;
  }

  .sig-cookie-banner-actions .sig-button {
    padding: 0.5rem 0.85rem;
    font-size: var(--sig-type-small);
  }
}

.sig-product-nav {
  display: grid;
  gap: 0.55rem;
  align-content: start;
}

.sig-product-nav span {
  padding: 0.72rem 0.9rem;
  border-radius: var(--sig-radius-field);
  color: var(--sig-muted);
  background: rgba(139, 26, 26, 0.04);
  font-weight: 600;
}

.sig-product-nav span.is-active {
  color: var(--sig-primary-strong);
  background: rgba(139, 26, 26, 0.1);
}

.sig-product-content {
  display: grid;
  gap: 1rem;
}

.sig-product-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.75rem, 1fr));
  gap: 0.8rem;
}

.sig-product-metrics div {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid rgba(26, 18, 16, 0.08);
  border-radius: var(--sig-radius-field);
  background: rgba(255, 255, 255, 0.86);
}

.sig-product-metrics strong {
  font-size: var(--sig-type-card-title);
}

.sig-product-metrics span,
.sig-product-column span,
.sig-proof-card span,
.sig-story-card p,
.sig-mini-shot span,
.sig-surface-card p,
.sig-surface-label,
.sig-form-actions p,
.sig-footer-note,
.sig-footer-trust span,
.sig-trust-chip span,
.sig-legal-meta {
  color: var(--sig-muted);
  overflow-wrap: break-word;
  hyphens: manual;
}

.sig-product-metrics span,
.sig-product-column h3,
.sig-product-column span {
  hyphens: manual;
  word-break: keep-all;
}

.sig-product-metrics span,
.sig-product-column span {
  line-height: 1.35;
  text-wrap: pretty;
}

.sig-cookie-banner {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 9999;
  background: var(--sig-surface, #fff);
  border: 1px solid rgba(22, 32, 42, 0.12);
  border-radius: var(--sig-radius-field);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.sig-cookie-banner-inner {
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
}

.sig-cookie-banner p {
  margin: 0;
  flex: 1 1 240px;
  font-size: var(--sig-type-small);
  line-height: 1.5;
}

.sig-cookie-banner strong {
  flex: 1 0 100%;
  font-size: var(--sig-type-body);
}

.sig-cookie-banner-actions {
  flex: 0 0 auto;
}

.sig-product-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.75rem, 1fr));
  gap: 0.8rem;
  align-items: start;
}

.sig-product-column {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  align-content: start;
  padding: 1rem;
  border-radius: var(--sig-radius-field);
  background: rgba(139, 26, 26, 0.04);
}

.sig-product-column h3,
.sig-story-card h3,
.sig-copy-card h3,
.sig-proof-card strong,
.sig-surface-card strong,
.sig-trust-chip strong,
.sig-legal-card h2 {
  font-size: var(--sig-type-lead);
}

.sig-proof-band {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  align-items: stretch;
}

.sig-proof-band-compact {
  margin-top: 0.5rem;
}

.sig-story-grid {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  align-items: stretch;
}

.sig-story-card,
.sig-proof-card {
  background: rgba(255, 253, 248, 0.7);
}

.sig-mini-shot {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
  background: rgba(139, 26, 26, 0.04);
}

.sig-check-list {
  display: grid;
  gap: 0.65rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.sig-check-list li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--sig-muted);
}

.sig-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: var(--sig-radius-pill);
  background: var(--sig-accent);
}

.sig-check-list-plain li::before {
  background: rgba(102, 80, 72, 0.5);
}

.sig-contact-grid {
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1.08fr);
  align-items: start;
}

/* Contact: de rechterhelft van de hero draagt het directe contactpunt, en de toelichting staat in een eigen
   band over de volle breedte. In de linkerkolom naast het formulier werden het tien kaarten van 201px. */
.sig-contact-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
}

.sig-contact-direct {
  height: auto;
}

.sig-form-intro {
  margin-bottom: 1.5rem;
}

.sig-contact-direct .sig-panel-label {
  margin-bottom: 0;
}

.sig-contact-direct .sig-contactpunt {
  font-size: var(--sig-type-lead);
  line-height: 1.7;
}

.sig-contact-punten {
  gap: 1rem;
}

.sig-contact-punten strong {
  color: var(--sig-ink);
}

.sig-contact-weetjes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (max-width: 1060px) {
  .sig-contact-weetjes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .sig-contact-weetjes {
    grid-template-columns: 1fr;
  }
}

.sig-company-grid,
.sig-faq-layout {
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  align-items: start;
}

.sig-compare-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sig-process-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* De werkwijze op een specialisatiepagina heeft vijf of zes stappen: in vieren bleef er een wees over. */
.sig-werkwijze {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sig-case-frame {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sig-compare-card,
.sig-process-card,
.sig-case-slot {
  display: grid;
  gap: 1rem;
}

.sig-compare-card-muted {
  background: rgba(247, 244, 237, 0.9);
}

.sig-process-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: var(--sig-radius-pill);
  color: #fff;
  background: var(--sig-primary);
  font-weight: 700;
}

.sig-case-slot {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 244, 237, 0.9));
}

.sig-company-card h2 {
  font-size: var(--sig-type-section-title);
}

.sig-company-meta {
  gap: 0;
  margin-top: 0.5rem;
}

.sig-company-meta div {
  display: grid;
  gap: 0.2rem;
  padding: 0.85rem 0;
  border-top: 1px solid rgba(26, 18, 16, 0.08);
}

.sig-company-meta strong {
  font-size: var(--sig-type-compact);
}

.sig-faq-item {
  padding: 1.35rem 1.4rem;
}

.sig-faq-item summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--sig-type-lead);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-family: var(--sig-font-serif);
}

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

.sig-faq-item summary::after {
  content: "+";
  float: right;
  color: var(--sig-primary);
  font-family: var(--sig-font-sans);
}

.sig-faq-item[open] summary {
  color: var(--sig-primary-strong);
}

.sig-faq-item[open] summary::after {
  content: "-";
}

.sig-faq-item p {
  margin-top: 1rem;
  color: var(--sig-muted);
}

.sig-form-card {
  padding: 2rem;
  background: rgba(255, 253, 248, 0.94);
}

.sig-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sig-field {
  gap: 0.55rem;
}

.sig-field span:first-child {
  font-weight: 600;
}

.sig-field label {
  font-weight: 600;
}

.sig-field input:not([type="checkbox"]),
.sig-field select,
.sig-field textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(26, 18, 16, 0.12);
  border-radius: var(--sig-radius-field);
  color: var(--sig-ink);
  background: rgba(255, 255, 255, 0.94);
  font: inherit;
}

.sig-field textarea {
  resize: vertical;
}

.sig-field-full {
  grid-column: 1 / -1;
}

.sig-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.5rem;
}

.sig-validation,
.sig-validation-summary {
  color: var(--sig-primary-strong);
  font-size: var(--sig-type-compact);
}

.sig-validation-summary ul {
  margin: 0;
  padding-left: 1.2rem;
}

.sig-alert {
  padding: 1rem 1.1rem;
  border-radius: var(--sig-radius-field);
  border: 1px solid transparent;
}

.sig-alert-success {
  color: #204629;
  border-color: rgba(32, 70, 41, 0.18);
  background: rgba(231, 244, 233, 0.95);
}

.sig-alert-error {
  color: var(--sig-primary-strong);
  border-color: rgba(139, 26, 26, 0.18);
  background: rgba(255, 241, 240, 0.96);
}

.sig-selfstart-hero,
.sig-selfstart-stage {
  padding: clamp(2.75rem, 4.5vw, 4rem) 0;
}

.sig-selfstart-hero-grid,
.sig-selfstart-stage-grid,
.sig-selfstart-form-layout,
.sig-selfstart-card-grid {
  display: grid;
  gap: 1.5rem;
}

.sig-selfstart-hero-grid,
.sig-selfstart-stage-grid {
  grid-template-columns: minmax(0, 1.04fr) minmax(290px, 0.78fr);
  align-items: start;
}

.sig-selfstart-form-layout {
  grid-template-columns: minmax(0, 1.02fr) minmax(290px, 0.8fr);
  align-items: start;
}

.sig-selfstart-form-layout-single {
  grid-template-columns: minmax(0, 1fr);
}

.sig-selfstart-copy,
.sig-selfstart-rail,
.sig-selfstart-main-card,
.sig-selfstart-side-stack,
.sig-selfstart-info-card,
.sig-selfstart-form,
.sig-selfstart-rail-card,
.sig-selfstart-card,
.sig-selfstart-card-body,
.sig-selfstart-metric,
.sig-selfstart-step,
.sig-selfstart-context,
.sig-selfstart-context-item,
.sig-selfstart-consent-list {
  display: grid;
  gap: 1rem;
}

.sig-selfstart-main-card,
.sig-selfstart-info-card,
.sig-selfstart-form-card,
.sig-selfstart-rail-card,
.sig-selfstart-card {
  min-width: 0;
  padding: clamp(1.35rem, 2vw, 2rem);
  border: 1px solid var(--sig-line);
  border-radius: var(--sig-radius-card);
  background: rgba(255, 253, 248, 0.9);
  box-shadow: var(--sig-shadow);
}

.sig-selfstart-card {
  height: 100%;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.sig-selfstart-card:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 26, 26, 0.26);
  box-shadow: 0 22px 52px rgba(26, 18, 16, 0.12);
}

.sig-selfstart-hero h1,
.sig-selfstart-stage h1 {
  font-size: var(--sig-type-hero-title);
  line-height: 1.06;
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: balance;
}

.sig-selfstart-stage h1 {
  font-size: var(--sig-type-section-title);
}

.sig-selfstart-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.9rem;
  margin-top: 0.75rem;
}

.sig-selfstart-metric {
  padding: 1rem 1.1rem;
  border: 1px solid rgba(26, 18, 16, 0.08);
  border-radius: var(--sig-radius-card);
  background: rgba(255, 255, 255, 0.7);
}

.sig-selfstart-metric strong {
  font-size: var(--sig-type-body);
}

.sig-selfstart-metric span,
.sig-selfstart-caption,
.sig-selfstart-meta,
.sig-selfstart-step p,
.sig-selfstart-context-item span,
.sig-selfstart-timeline,
.sig-selfstart-timeline li,
.sig-selfstart-checklist li,
.sig-selfstart-card p,
.sig-selfstart-info-card p {
  color: var(--sig-muted);
}

.sig-selfstart-steps {
  display: grid;
  gap: 0.85rem;
}

.sig-selfstart-step {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border-radius: var(--sig-radius-card);
  background: rgba(255, 255, 255, 0.1);
}

.sig-selfstart-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--sig-radius-pill);
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  font-weight: 700;
}

.sig-selfstart-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  align-items: stretch;
}

.sig-selfstart-card-head,
.sig-selfstart-card-footer,
.sig-selfstart-pill-row,
.sig-selfstart-actions,
.sig-selfstart-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.sig-selfstart-card-head {
  justify-content: flex-start;
}

.sig-selfstart-card-titel {
  margin: 0;
  font-size: var(--sig-type-card-title);
}

.sig-selfstart-card-footer {
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.35rem;
  color: var(--sig-primary-strong);
  font-weight: 700;
}

.sig-selfstart-arrow {
  font-size: var(--sig-type-lead);
  line-height: 1;
}

.sig-selfstart-pill {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--sig-radius-pill);
  color: var(--sig-primary-strong);
  background: rgba(139, 26, 26, 0.08);
  font-size: var(--sig-type-compact);
  font-weight: 700;
}

.sig-selfstart-pill-muted {
  color: var(--sig-muted);
  background: rgba(26, 18, 16, 0.06);
}

.sig-selfstart-highlight {
  color: #fff;
  background: linear-gradient(150deg, rgba(139, 26, 26, 0.95), rgba(92, 15, 15, 0.97));
}

.sig-selfstart-highlight .sig-panel-label,
.sig-selfstart-highlight p,
.sig-selfstart-highlight li,
.sig-selfstart-highlight .sig-selfstart-caption,
.sig-selfstart-highlight .sig-selfstart-step p {
  color: rgba(255, 248, 240, 0.86);
}

.sig-selfstart-highlight .sig-panel-label {
  color: #f1d3bf;
}

.sig-selfstart-main-card h2,
.sig-selfstart-info-card h2 {
  font-size: var(--sig-type-section-title);
  line-height: 1.03;
}

.sig-selfstart-progress {
  margin-bottom: 1.4rem;
}

.sig-selfstart-progress-step {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(26, 18, 16, 0.1);
  border-radius: var(--sig-radius-pill);
  color: var(--sig-muted);
  background: rgba(255, 255, 255, 0.55);
  font-weight: 600;
}

.sig-selfstart-progress-step strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--sig-radius-pill);
  color: var(--sig-primary-strong);
  background: rgba(139, 26, 26, 0.08);
  font-size: var(--sig-type-small);
}

.sig-selfstart-progress-step.is-active {
  color: var(--sig-primary-strong);
  border-color: rgba(139, 26, 26, 0.2);
  background: rgba(139, 26, 26, 0.08);
}

.sig-selfstart-progress-step.is-active strong,
.sig-selfstart-progress-step.is-complete strong {
  color: #fff;
  background: var(--sig-primary);
}

.sig-selfstart-progress-step.is-complete {
  color: var(--sig-ink);
}

.sig-selfstart-context {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sig-selfstart-context-item {
  gap: 0.35rem;
  padding: 1rem 1.1rem;
  border-radius: var(--sig-radius-card);
  background: rgba(26, 18, 16, 0.04);
}

.sig-selfstart-context-item strong {
  font-size: var(--sig-type-body);
}

.sig-selfstart-form {
  gap: 1.1rem;
}

.sig-selfstart-form-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sig-selfstart-consent-list {
  gap: 0.8rem;
}

.sig-checkbox {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
}

.sig-checkbox-inline {
  margin-top: 0.2rem;
}

.sig-checkbox input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.2rem 0 0;
  accent-color: var(--sig-primary);
}

.sig-checkbox label {
  font-weight: 600;
}

.sig-selfstart-captcha {
  padding-top: 0.25rem;
}

.sig-selfstart-timeline,
.sig-selfstart-checklist {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding-left: 1.2rem;
}

.sig-selfstart-checklist {
  list-style: none;
  padding-left: 0;
}

.sig-selfstart-checklist li {
  position: relative;
  padding-left: 1.5rem;
}

.sig-selfstart-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--sig-radius-pill);
  background: var(--sig-accent);
}

.sig-req {
  color: var(--sig-primary);
}

.sig-selfstart-office-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 3rem;
}

.sig-office-logo {
  width: auto;
  max-width: 160px;
  max-height: 40px;
  object-fit: contain;
}

.sig-tour-stack {
  gap: 3rem;
}

.sig-tour-stage {
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  gap: 2rem;
  align-items: start;
}

.sig-tour-stage-reverse .sig-tour-copy {
  order: 2;
}

.sig-tour-stage-reverse .sig-product-window-stage {
  order: 1;
}

.sig-product-window-stage {
  padding: 1.5rem;
}

.sig-product-surface-grid {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  align-items: stretch;
}

.sig-surface-card {
  gap: 0.55rem;
}

.sig-surface-label {
  font-size: var(--sig-type-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sig-page-hero-wide .sig-page-hero-inner {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.sig-footer-note {
  max-width: 28ch;
}

.footer-tagline {
  color: rgba(255, 250, 240, 0.74);
}

.sig-panel-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

/* WHY effen in plaats van een gradient: hier stond een verloop van rgba(239,231,215,.64) naar
   rgba(255,253,248,.08) — dat dooft binnen de sectie uit naar bijna niets, bovenop een body die zélf
   al een perkament-gradient is. Gemeten 05-08-2026: negen secties leverden visueel één doorlopend
   vlak op, waardoor de pagina als één lange brij las. Een band moet zijn kleur vasthouden tot de
   rand, anders scheidt hij niets. */
.sig-section-muted {
  background: var(--sig-band-warm);
}

.sig-section-panel {
  background: var(--sig-band-light);
}

/* De trust-strip heeft padding-top: 0 en hoort dus visueel bij de sectie erboven; hij krijgt
   dezelfde band, anders ontstaat er een naad midden in één blok. */
.sig-trust-strip {
  background: var(--sig-band-light);
}

.sig-pressure-band {
  padding: 1.25rem 0 0.5rem;
}

.sig-pressure-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.sig-pressure-card {
  display: grid;
  gap: 0.8rem;
  min-width: 0;
  padding: 1.45rem;
  border: 1px solid var(--sig-line);
  border-radius: var(--sig-radius-card);
  background: rgba(255, 253, 248, 0.78);
  box-shadow: 0 12px 30px rgba(26, 18, 16, 0.06);
}

.sig-pressure-card h2 {
  font-size: var(--sig-type-card-title);
  line-height: 1.16;
}

.sig-pressure-card p {
  color: var(--sig-muted);
  overflow-wrap: break-word;
  hyphens: manual;
}

.sig-section-heading {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 2rem;
}

.sig-section-heading h2,
.sig-cta-band h2,
.sig-copy-card h2,
.sig-panel h2 {
  font-size: var(--sig-type-section-title);
}

.sig-copy-card h3 {
  margin-bottom: 0.6rem;
  font-size: var(--sig-type-card-title);
  line-height: 1.2;
}

.sig-card h3,
.sig-card-titel,
.sig-feature-card h3 {
  font-size: var(--sig-type-card-title);
}

.sig-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.sig-feature-grid,
.sig-copy-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sig-copy-grid {
  align-items: start;
}

.sig-copy-card h2,
.sig-feature-card h3,
.sig-card h3,
.sig-card-titel {
  margin-bottom: 0.8rem;
}

.sig-trust-strip {
  padding-top: 0;
}

.sig-trust-strip-grid {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.sig-trust-chip {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
  padding: 1rem 1.1rem;
  border-radius: var(--sig-radius-field);
  box-shadow: 0 12px 30px rgba(26, 18, 16, 0.06);
}

.sig-legal-card {
  gap: 0.9rem;
}

.sig-legal-list {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--sig-muted);
}

.sig-legal-list li + li {
  margin-top: 0.55rem;
}


.sig-cta-band-inner {
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--sig-radius-card);
  background: linear-gradient(135deg, var(--sig-primary-strong), #3a1010 65%, #6a2222);
  color: #fff;
  box-shadow: var(--sig-shadow);
}

.sig-cta-band-inner .sig-kicker,
.sig-cta-band-inner p {
  color: rgba(255, 249, 240, 0.82);
}

.sig-cta-band-inner .sig-button-secondary {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.sig-cta-band-inner .sig-button-secondary:hover {
  background: rgba(255, 255, 255, 0.18);
}

.sig-site-footer {
  padding: 3rem 0 3.5rem;
  color: var(--sig-footer-ink);
  background: var(--sig-footer);
}

.sig-footer-grid {
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
}

/* Colofon: rechtspersoon, vestigingsadres, KvK en btw. Rustig gezet — het hoort er te staan, niet
   op te vallen. Wel voldoende contrast: dit is juist de regel waarop een koper ons natrekt. */
.sig-footer-colofon {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 250, 240, 0.16);
  font-size: var(--sig-type-small);
  color: rgba(255, 250, 240, 0.72);
}

.sig-footer-colofon p {
  margin: 0;
}

.sig-footer-colofon p + p {
  margin-top: 0.45rem;
}

.sig-footer-colofon strong {
  color: rgba(255, 250, 240, 0.92);
}

.sig-footer-colofon span[aria-hidden] {
  margin: 0 0.45rem;
  opacity: 0.5;
}

.sig-footer-kop {
  margin-bottom: 1rem;
  font-size: var(--sig-type-lead);
}

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

.sig-site-footer li + li,
.sig-site-footer p + p {
  margin-top: 0.7rem;
}

.sig-site-footer a {
  color: #fff;
  text-decoration: none;
}

.sig-site-footer a:hover {
  color: #f8d7ad;
}

.sig-site-footer .sig-button-primary {
  color: #fff;
  background: var(--sig-primary);
}

.sig-site-footer .sig-button-secondary-light {
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.sig-site-footer .sig-button-secondary-light:hover {
  background: rgba(255, 255, 255, 0.14);
}

.sig-footer-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sig-footer-trust span {
  padding: 0.6rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--sig-radius-pill);
  background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 980px) {
  .sig-header-shell,
  .sig-action-row,
  .sig-cta-band-inner {
    flex-wrap: wrap;
  }

  /* De statistiekenrij is een grid; op smal past drie naast elkaar niet meer. */
  .sig-stat-row {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1.5rem;
  }

  .sig-hero-grid,
  .sig-selfstart-hero-grid,
  .sig-selfstart-stage-grid,
  .sig-selfstart-form-layout,
  .sig-pressure-grid,
  .sig-selfstart-card-grid,
  .sig-card-grid,
  .sig-feature-grid,
  .sig-copy-grid,
  .sig-footer-grid,
  .sig-panel-row,
  .sig-story-grid,
  .sig-proof-band,
  .sig-contact-grid,
  .sig-contact-hero,
  .sig-tour-stage,
  .sig-page-hero-wide .sig-page-hero-inner,
  .sig-product-surface-grid,
  .sig-company-grid,
  .sig-faq-layout,
  .sig-compare-grid,
  .sig-case-frame,
  .sig-trust-strip-grid {
    grid-template-columns: 1fr;
  }

  .sig-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sig-product-window-body,
  .sig-product-metrics,
  .sig-product-columns,
  .sig-form-grid,
  .sig-selfstart-form-grid,
  .sig-selfstart-context {
    grid-template-columns: 1fr;
  }

  .sig-tour-stage-reverse .sig-tour-copy,
  .sig-tour-stage-reverse .sig-product-window-stage {
    order: initial;
  }
}

/* publicsite/06-08: van 840 naar 1060px. Met Specialisaties en Cliëntportaal in de balk overlapte het
   menu tussen die twee breedtes het woordmerk (gemeten op 860 en 1024px). */
@media (max-width: 1060px) {
  .sig-header-shell {
    position: relative;
  }

  .sig-nav-toggle {
    display: inline-flex;
  }

  .sig-header-menu {
    position: absolute;
    top: calc(100% - 0.35rem);
    left: 0;
    right: 0;
    display: none;
    padding: 1rem;
    border: 1px solid rgba(26, 18, 16, 0.08);
    border-radius: var(--sig-radius-card);
    background: rgba(255, 253, 248, 0.98);
    box-shadow: var(--sig-shadow);
  }

  /* justify-content: stretch — de flex-end van de brede kop duwde in dit grid de hele kolom naar rechts. */
  .sig-header-menu.is-open {
    display: grid;
    justify-content: stretch;
  }

  .sig-site-nav,
  .sig-header-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .sig-nav-group {
    width: 100%;
  }

  .sig-nav-group summary {
    width: 100%;
    justify-content: space-between;
  }

  .sig-nav-group-menu {
    position: static;
    min-width: 0;
    margin-top: 0.25rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .sig-site-nav a,
  .sig-nav-group-menu a,
  .sig-header-actions .sig-button {
    width: 100%;
  }

  .sig-brand-context {
    display: none;
  }

}

@media (max-width: 640px) {
  .sig-shell {
    width: min(1280px, calc(100% - 1.25rem));
  }

  .sig-site-header {
    position: sticky;
  }

  .sig-site-footer,
  .sig-selfstart-hero,
  .sig-selfstart-stage {
    padding: 2.75rem 0;
  }

  .sig-hero h1,
  .sig-page-hero h1,
  .sig-selfstart-hero h1,
  .sig-selfstart-stage h1 {
    max-width: 100%;
  }

  .sig-header-shell {
    padding: 1rem 0;
  }

  .sig-panel,
  .sig-card,
  .sig-selfstart-main-card,
  .sig-selfstart-info-card,
  .sig-selfstart-form-card,
  .sig-selfstart-rail-card,
  .sig-selfstart-card,
  .sig-feature-card,
  .sig-copy-card,
  .sig-form-card,
  .sig-proof-card,
  .sig-story-card,
  .sig-product-window,
  .sig-surface-card,
  .sig-compare-card,
  .sig-process-card,
  .sig-case-slot,
  .sig-legal-card {
    padding: 1.25rem;
  }

  .sig-process-grid {
    grid-template-columns: 1fr;
  }

  .sig-form-actions {
    align-items: stretch;
  }
}

/* FIX bug rapport 2026-05-06 #38: header sluit aan op 375px viewports
   (iPhone SE / kleine Android). Zonder deze breakpoint loopt het wordmark
   over het hamburger-icoon en verdwijnt de tikbare zone aan de rechterrand. */
@media (max-width: 380px) {
  .sig-shell,
  .sig-shell.sig-header-shell {
    width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .sig-header-shell {
    min-height: 64px;
    gap: 0.5rem;
    padding: 0.5rem 0;
  }

  .sig-brandlockup-image {
    height: 24px;
    max-width: 140px;
  }

  .sig-brand-mark {
    width: 32px;
    height: 32px;
  }

  .sig-brand-naam {
    font-size: 1.3rem;
  }

  .sig-nav-toggle {
    width: 44px;
    height: 44px;
    border-radius: var(--sig-radius-field);
    flex-shrink: 0;
  }
}

/* zelfbediening/09: keuzehulp */
.sig-keuzehulp-vraag {
  border: none;
  padding: 0;
  margin: 0 0 1.25rem;
}

.sig-keuzehulp-vraag legend {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.sig-keuzehulp-opties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sig-keuzehulp-optie {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--sig-border, #cbd5e1);
  border-radius: var(--sig-radius-field);
  padding: 0.45rem 0.8rem;
  cursor: pointer;
}

.sig-keuzehulp-optie input[type="radio"] {
  accent-color: var(--sig-primary);
}

/* publicsite/06-09: specialisaties, cliëntportaal, zelfbediening, demo, klikbare rondleiding, overstap,
   kennis. Geen nieuwe kleuren: alles leunt op de tokens bovenaan. */
.sig-card-link {
  color: inherit;
  text-decoration: none;
}

.sig-card-link:hover,
.sig-card-link:focus-visible {
  color: var(--sig-primary-strong);
  text-decoration: underline;
}

.sig-situaties {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  column-gap: 2rem;
}

.sig-overstap-noot {
  margin-top: 1.5rem;
  color: var(--sig-muted);
}

.sig-schermen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
  gap: 1.5rem;
  align-items: start;
}

.sig-demo-treden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.sig-demo-trede {
  display: grid;
  align-content: start;
  gap: 0.9rem;
}

.sig-demo-trede h2 {
  font-size: var(--sig-type-card-title);
}

.sig-demo-routes,
.sig-demo-stappen {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sig-demo-routes li {
  display: grid;
  gap: 0.15rem;
}

.sig-demo-routes a {
  font-weight: 600;
  color: var(--sig-primary-strong);
}

.sig-demo-routes span {
  color: var(--sig-muted);
  font-size: var(--sig-type-compact);
}

.sig-demo-stappen {
  counter-reset: stap;
}

.sig-demo-stappen li {
  counter-increment: stap;
  position: relative;
  padding-left: 2.6rem;
  color: var(--sig-muted);
}

.sig-demo-stappen li::before {
  content: counter(stap);
  position: absolute;
  left: 0;
  top: -0.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--sig-radius-pill);
  color: #fff;
  background: var(--sig-primary);
  font-weight: 700;
}

.sig-demo-specialisaties {
  margin: 0;
  padding: 0;
  border: 0;
}

.sig-demo-specialisaties legend {
  margin-bottom: 0.55rem;
  font-weight: 600;
}

.sig-demo-vinkjes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.4rem 1rem;
}

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

.sig-talen li {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--sig-line);
  border-radius: var(--sig-radius-pill);
  background: var(--sig-panel);
  font-weight: 600;
}

.sig-zelfbediening,
.sig-overstap-stappen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sig-drieslag {
  display: grid;
  grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr);
  gap: 0.55rem 1rem;
  margin: 0.25rem 0 0;
}

.sig-drieslag dt {
  font-weight: 700;
}

.sig-drieslag dd {
  margin: 0;
  color: var(--sig-muted);
}

.sig-codefragment {
  margin: 0;
  padding: 1rem;
  overflow-x: auto;
  border-radius: var(--sig-radius-field);
  color: #fff8ef;
  background: var(--sig-footer);
  font-size: var(--sig-type-small);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.sig-kennis-artikel h1 {
  margin: 1rem 0;
  font-size: var(--sig-type-hero-title);
  line-height: 1.08;
}

.sig-kennis-artikel h2 {
  margin: 2rem 0 0.75rem;
  font-size: var(--sig-type-card-title);
}

.sig-kennis-artikel p + p {
  margin-top: 1rem;
}

.sig-contactpunt a {
  font-weight: 600;
}

/* Klikbare rondleiding: tekst links, scherm rechts, markering als uitsparing over het scherm. */
.sig-rondleiding {
  padding-top: 2.5rem;
}

.sig-rondleiding-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin-bottom: 1.5rem;
}

.sig-rondleiding-kop .sig-kicker {
  margin: 0;
}

.sig-rondleiding-teller {
  color: var(--sig-muted);
}

.sig-rondleiding-stappen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sig-rondleiding-stappen a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  border: 1px solid var(--sig-line);
  border-radius: var(--sig-radius-pill);
  color: var(--sig-muted);
  background: var(--sig-panel);
  font-weight: 600;
  text-decoration: none;
}

.sig-rondleiding-stappen a[aria-current="step"] {
  border-color: var(--sig-primary);
  color: #fff;
  background: var(--sig-primary);
}

.sig-rondleiding-stap {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.6fr);
  gap: 2rem;
  align-items: start;
}

.sig-rondleiding-tekst {
  display: grid;
  gap: 1rem;
}

.sig-rondleiding-tekst h1 {
  font-size: var(--sig-type-section-title);
  line-height: 1.1;
}

.sig-rondleiding-tekst p {
  color: var(--sig-muted);
}

.sig-rondleiding-hint {
  font-size: var(--sig-type-small);
}

.sig-rondleiding-kader {
  position: relative;
  overflow: hidden;
  border-radius: var(--sig-radius-field);
}

.sig-markering {
  position: absolute;
  border: 3px solid var(--sig-accent);
  border-radius: var(--sig-radius-field);
  box-shadow: 0 0 0 9999px rgba(26, 18, 16, 0.28);
  pointer-events: none;
}

@media (max-width: 980px) {
  .sig-rondleiding-stap {
    grid-template-columns: 1fr;
  }

  .sig-rondleiding-beeld {
    order: -1;
  }
}

@media (max-width: 640px) {
  .sig-drieslag {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .sig-drieslag dd {
    margin-bottom: 0.5rem;
  }
}

/* Kop tussen de hamburgergrens en ~1200px: zeven items plus twee knoppen passen alleen compact, en
   een knoptekst die over drie regels breekt ("Plan / een / demo") is erger dan wat minder lucht. */
.sig-header-actions .sig-button {
  white-space: nowrap;
}

@media (min-width: 1061px) and (max-width: 1200px) {
  .sig-site-nav {
    gap: 0.2rem;
  }

  .sig-site-nav a,
  .sig-nav-group summary {
    padding: 0.4rem 0.45rem;
  }

  .sig-header-actions {
    gap: 0.5rem;
  }

  .sig-header-actions .sig-button {
    padding: 0.7rem 0.95rem;
  }
}

.sig-demo-trede .sig-button {
  justify-self: start;
}

.sig-site-footer .sig-footer-client {
  margin-top: 1rem;
  color: var(--sig-footer-ink);
}

/* axe link-in-text-block: een link midden in een zin moet zonder kleur te herkennen zijn. */
.sig-site-footer .sig-footer-client a {
  text-decoration: underline;
}

.sig-vergroot {
  display: block;
  border-radius: var(--sig-radius-field);
}

.sig-vergroot:focus-visible {
  outline: 2px solid var(--sig-accent);
  outline-offset: 3px;
}

/* BEV-881: de cookietabel op /privacy stond zonder deze regels 705 px breed op een scherm van 360 px, en de
   hele pagina schoof opzij. De tabel scrolt nu binnen zijn eigen kader. */
.sig-table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.sig-table-scroll:focus-visible {
  outline: 2px solid var(--sig-accent);
  outline-offset: 3px;
}

.sig-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sig-type-compact);
}

.sig-table caption {
  margin-bottom: 0.5rem;
  font-weight: 700;
  text-align: left;
}

.sig-table th,
.sig-table td {
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--sig-line, rgba(0, 0, 0, 0.12));
  text-align: left;
  vertical-align: top;
}

.sig-table code {
  overflow-wrap: anywhere;
}

/* BEV-882: een lang woord in de paginatitel ("Ondernemingsrecht", "gegevensverwerking") maakte de kolom van de
   hero breder dan een scherm van 360 px; de titel liep rechts van het scherm af. */
.sig-page-hero-inner {
  grid-template-columns: minmax(0, 1fr);
}

/* Onder 340 px past een woord als "Ondernemingsrecht" of "Verwerkersovereenkomst," niet meer in een kop, en
   rekt het de kaart eromheen op tot voorbij het scherm. Alleen daar, en alleen voor lange woorden, afbreken met
   een streepje; daarboven brak de browser met text-wrap: balance ook "in-take" en "werk-dag" af. */
@media (max-width: 340px) {
  h1,
  h2,
  h3 {
    overflow-wrap: anywhere;
    hyphens: auto;
    hyphenate-limit-chars: 14 6 6;
  }
}

/* ── Homepage (oktober 2026) ──────────────────────────────────────────────────────────────────────────
   Opbouw: introductie met één groot productscherm, drie werkzaamheden, drie productvoorbeelden, overstap,
   vertrouwen, leeromgeving, uitnodiging. Eigen ontwerp; compositie geïnspireerd op productsites met grote
   schermen in rustige panelen. */
.sig-intro {
  padding: clamp(2.75rem, 4.5vw, 4rem) 0 clamp(2rem, 3.5vw, 3rem);
}

.sig-intro h1 {
  font-size: var(--sig-type-hero-title);
  line-height: 1.08;
  text-wrap: balance;
}

.sig-intro-copy {
  display: grid;
  gap: 1.1rem;
}

.sig-intro-copy .sig-lead {
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem);
}

.sig-intro-boven {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.sig-intro-pilot {
  margin: 0;
  color: var(--sig-muted);
  font-size: var(--sig-type-compact);
}

.sig-waarom {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--sig-line);
  border-radius: calc(var(--sig-radius-card) + 4px);
  background: rgba(255, 255, 255, 0.55);
}

.sig-waarom-kop {
  margin: 0 0 1rem;
  color: var(--sig-primary);
  font-family: var(--sig-font-sans);
  font-size: var(--sig-type-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sig-waarom-cijfers {
  display: grid;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sig-waarom-cijfers li {
  display: grid;
  gap: 0.2rem;
}

.sig-waarom-cijfers li + li {
  padding-top: 1.1rem;
  border-top: 1px solid var(--sig-line);
}

.sig-waarom-cijfers strong {
  font-family: var(--sig-font-serif);
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
  line-height: 1.1;
  color: var(--sig-primary-strong);
}

.sig-waarom-cijfers span {
  color: var(--sig-muted);
}

.sig-waarom-bron {
  margin: 1rem 0 0;
  color: var(--sig-muted);
  font-size: var(--sig-type-small);
}

.sig-intro-schermkop {
  margin: clamp(2.5rem, 4vw, 3.5rem) 0 0;
  font-size: var(--sig-type-section-title);
  text-wrap: balance;
}

.sig-intro-schermkop + .sig-scherm {
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

@media (max-width: 960px) {
  .sig-intro-boven {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sig-scherm {
  margin: clamp(2rem, 3.5vw, 3rem) 0 0;
  padding: clamp(0.75rem, 1.6vw, 1.25rem);
  border: 1px solid var(--sig-line);
  border-radius: calc(var(--sig-radius-card) + 4px);
  background: var(--sig-band-warm);
}

.sig-scherm img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--sig-radius-field);
  border: 1px solid rgba(31, 27, 22, 0.08);
  box-shadow: var(--sig-shadow);
}

.sig-scherm figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-top: 0.75rem;
  color: var(--sig-muted);
  font-size: var(--sig-type-small);
}

.sig-scherm figcaption a {
  color: var(--sig-primary-strong);
  font-weight: 600;
}

.sig-werk-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.sig-werk {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--sig-primary);
}

.sig-werk h3 {
  font-size: var(--sig-type-card-title);
}

.sig-werk p {
  color: var(--sig-muted);
}

.sig-voorbeelden {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

.sig-voorbeeld {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}

.sig-voorbeeld:nth-child(even) .sig-scherm {
  order: 2;
}

.sig-voorbeeld .sig-scherm {
  margin: 0;
}

.sig-voorbeeld-tekst {
  display: grid;
  gap: 1rem;
}

.sig-voorbeeld-tekst > * {
  margin: 0;
}

.sig-voorbeeld-tekst h2,
.sig-voorbeeld-tekst h3 {
  font-size: var(--sig-type-section-title);
  line-height: 1.15;
}

.sig-taakverdeling {
  display: grid;
  gap: 0.85rem;
  margin: 0;
}

.sig-taakverdeling div {
  display: grid;
  gap: 0.2rem;
  padding-left: 1rem;
  border-left: 3px solid var(--sig-line);
}

.sig-taakverdeling div:nth-child(2) {
  border-left-color: var(--sig-primary);
}

.sig-taakverdeling dt {
  color: var(--sig-primary-strong);
  font-size: var(--sig-type-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sig-taakverdeling dd {
  margin: 0;
  color: var(--sig-ink);
}

.sig-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 3rem);
}

.sig-duo > div {
  display: grid;
  align-content: start;
  gap: 0.75rem;
}

.sig-duo h3 {
  font-size: var(--sig-type-card-title);
}

.sig-duo p {
  color: var(--sig-muted);
}

.sig-feitenrij {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sig-feitenrij li {
  display: grid;
  align-content: start;
  gap: 0.4rem;
}

.sig-feitenrij strong {
  font-size: var(--sig-type-body);
}

.sig-feitenrij span {
  color: var(--sig-muted);
}

.sig-tekstlink {
  color: var(--sig-primary-strong);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.sig-tekstlink:focus-visible,
.sig-scherm figcaption a:focus-visible {
  outline: 2px solid var(--sig-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (max-width: 960px) {
  .sig-werk-trio,
  .sig-feitenrij,
  .sig-duo,
  .sig-voorbeeld {
    grid-template-columns: minmax(0, 1fr);
  }

  .sig-voorbeeld:nth-child(even) .sig-scherm {
    order: 0;
  }
}

.sig-na-blok {
  margin-top: 1.75rem;
}

.sig-cta-band-inner p a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.sig-cta-band-inner p a:focus-visible {
  outline: 2px solid var(--sig-accent);
  outline-offset: 3px;
}

/* Modules: per werkgebied een kop links en de onderdelen rechts, zonder kaartjes. */
.sig-modulegroep {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-top: 1px solid var(--sig-line);
}

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

.sig-modulegroep > header {
  display: grid;
  align-content: start;
  gap: 0.5rem;
}

.sig-modulegroep > header h2 {
  font-size: var(--sig-type-card-title);
}

.sig-modulegroep > header p {
  color: var(--sig-muted);
  font-size: var(--sig-type-compact);
}

.sig-module-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem clamp(1.25rem, 2.5vw, 2.25rem);
}

.sig-module-items article {
  display: grid;
  align-content: start;
  gap: 0.45rem;
}

.sig-module-items h3 {
  font-size: var(--sig-type-body);
  font-family: var(--sig-font-sans);
  font-weight: 700;
}

.sig-module-items p {
  color: var(--sig-muted);
}

.sig-module-items .sig-voorwaarde {
  color: var(--sig-primary-strong);
  font-size: var(--sig-type-small);
}

@media (max-width: 960px) {
  .sig-modulegroep,
  .sig-module-items {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sig-copy-card .sig-action-row {
  margin-top: 1rem;
}

/* Laag 1 uit de audit van 12-10-2026 (docs/huisstijl/publieke-site-audit-2026-10-12.md): alleen afwerking, geen
   nieuwe indeling. De focusring haalde 2,2:1 op crème (rgba-rood op 42%); de eis is 3:1. */
.sig-button:focus-visible,
.sig-nav-toggle:focus-visible,
.sig-field input:focus-visible,
.sig-field select:focus-visible,
.sig-field textarea:focus-visible {
  outline: 2px solid var(--sig-primary);
}

.sig-site-footer .sig-button:focus-visible,
.sig-site-footer a:focus-visible,
.sig-cta-band-inner .sig-button:focus-visible {
  outline: 2px solid #f3d9b8;
  outline-offset: 3px;
}

.sig-button {
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.sig-button:active {
  transform: translateY(1px) scale(0.98);
}

h1, h2, h3 {
  text-wrap: balance;
}

p, li {
  text-wrap: pretty;
}

.sig-waarom-cijfers strong,
.sig-stat-row strong {
  font-variant-numeric: tabular-nums;
}

/* Een kaart met één titellink is als geheel klikbaar: de hele kaart oogde als knop, maar alleen de titel
   (248 x 30 van 411 x 179 px) reageerde. Alleen waar de kaart precies die ene link draagt. */
.sig-card:has(> .sig-card-titel > .sig-card-link) {
  position: relative;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.sig-card:has(> .sig-card-titel > .sig-card-link) .sig-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.sig-card:has(> .sig-card-titel > .sig-card-link):hover {
  transform: translateY(-2px);
  border-color: rgba(139, 26, 26, 0.3);
  box-shadow: 0 22px 48px rgba(26, 18, 16, 0.12);
}

.sig-card:has(> .sig-card-titel > .sig-card-link:focus-visible) {
  outline: 2px solid var(--sig-primary);
  outline-offset: 3px;
}

.sig-card:has(> .sig-card-titel > .sig-card-link) .sig-card-link:focus-visible {
  outline: none;
}

/* Op een telefoon stond de tekst op 10 px van de rand; 16 px leest rustiger. De smalste schermen (380 px en
   minder) houden hun eigen 12 px van bug #38. */
@media (max-width: 640px) and (min-width: 381px) {
  .sig-shell {
    width: min(1280px, calc(100% - 2rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .sig-button,
  .sig-selfstart-card,
  .sig-card {
    transition: none;
  }

  .sig-button:hover,
  .sig-button:active,
  .sig-selfstart-card:hover,
  .sig-card:hover {
    transform: none;
  }
}

/* Laag 2 (besluit Jan 12-10-2026). Specialisaties in vier groepen, in de vorm van /modules: kop links, drie kaarten
   rechts. De gewone kaartenrij (minmax 20rem) zette er in de rechterkolom twee naast elkaar en één eronder. */
.sig-specialisatiegroep {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 3fr);
}

.sig-specialisatiegroep .sig-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 960px) {
  .sig-specialisatiegroep {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .sig-specialisatiegroep .sig-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sig-footer-kop-volgend {
  margin-top: 1.75rem;
}

/* Dezelfde beeldtaal als presentatie.sigillum.nl: een stippenvlak achter de paginakop, dat naar rechts en onder
   wegvalt. Stilstaand: een animatie bovenaan de pagina vertraagt het moment waarop de pagina als geladen telt. */
.sig-hero,
.sig-page-hero {
  position: relative;
  isolation: isolate;
}

.sig-hero::before,
.sig-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(26, 18, 16, 0.13) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 18% 30%, #000 20%, transparent 70%);
  mask-image: radial-gradient(ellipse 55% 70% at 18% 30%, #000 20%, transparent 70%);
}

/* De kop staat vast bovenaan (sticky, ±85 px). Zonder ruimte viel hij bij een link naar een anker (#clienten,
   #meedoen, #leverancier) over de titel van het onderdeel heen. */
html {
  scroll-padding-top: 6rem;
}

/* Over ons: portret naast de tekst van een persoon; op een smal scherm erboven. */
.sig-persoon {
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: start;
  column-gap: 1.25rem;
}

.sig-persoon > div {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.sig-portret {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
}

@media (max-width: 30rem) {
  .sig-persoon {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Drie mensen naast elkaar op een breed scherm; het portret staat dan boven de tekst. */
@media (min-width: 981px) {
  .sig-team-drie {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sig-team-drie .sig-persoon {
    grid-template-columns: minmax(0, 1fr);
  }
}