/* 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;
}

: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", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sig-font-sans: "Inter", "Segoe UI Variable Text", "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);
}

* {
  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;
}

.sig-shell {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
}

.sig-skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  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: 44px;
  height: 44px;
}

.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: 0.8rem;
  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;
  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: 16px;
  background: rgba(255, 255, 255, 0.82);
}

.sig-nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  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: 999px;
  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: 0.72rem;
  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: 14px;
  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: 999px;
  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: 999px;
  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;
}

.sig-hero,
.sig-page-hero,
.sig-section,
.sig-cta-band {
  padding: 5.5rem 0;
}

.sig-hero {
  padding-top: 4.5rem;
}

.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: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sig-hero h1 {
  max-width: 18ch;
  font-size: clamp(2.1rem, 3.6vw, 3.4rem);
  line-height: 1.06;
}

.sig-page-hero h1 {
  max-width: 24ch;
  font-size: clamp(2.35rem, 4.4vw, 4.2rem);
  line-height: 1.02;
}

.sig-page-hero-inner {
  min-width: 0;
  max-width: min(72rem, 100%);
}

.sig-lead,
.sig-section-heading p,
.sig-page-hero p {
  max-width: 52ch;
  color: var(--sig-muted);
  font-size: 1.16rem;
}

.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: 1.3rem;
}

.sig-stat-row span {
  color: var(--sig-muted);
  font-size: 0.9rem;
  max-width: 24ch;
}

.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: 24px;
  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: 0.95rem;
}

.sig-window-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  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: 14px;
  border: 1px solid rgba(31, 27, 22, 0.08);
}

.sig-product-caption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  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: 0.92rem;
  font-weight: 600;
}

.sig-proof-band + .sig-compare-grid {
  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: 0.8rem;
    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: 0.85rem;
  }
}

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

.sig-product-nav span {
  padding: 0.72rem 0.9rem;
  border-radius: 16px;
  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: 18px;
  background: rgba(255, 255, 255, 0.86);
}

.sig-product-metrics strong {
  font-size: 1.35rem;
}

.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: 14px;
  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: 0.9rem;
  line-height: 1.5;
}

.sig-cookie-banner strong {
  flex: 1 0 100%;
  font-size: 1rem;
}

.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: 18px;
  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: 1.1rem;
}

.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: 999px;
  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;
}

.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));
}

.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: 999px;
  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: clamp(1.55rem, 3vw, 2.4rem);
}

.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: 0.94rem;
}

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

.sig-faq-item summary {
  cursor: pointer;
  list-style: none;
  font-size: 1.15rem;
  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-copy-grid-tight {
  margin-top: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.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: 16px;
  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: 0.94rem;
}

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

.sig-alert {
  padding: 1rem 1.1rem;
  border-radius: 18px;
  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: 4.5rem 0 5rem;
}

.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: 28px;
  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 {
  max-width: 18ch;
  font-size: clamp(2.1rem, 3.6vw, 3.4rem);
  line-height: 1.06;
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: balance;
}

.sig-selfstart-stage h1 {
  max-width: 20ch;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
}

.sig-selfstart-copy .sig-lead,
.sig-selfstart-main-card .sig-lead,
.sig-selfstart-form-card .sig-lead {
  max-width: 44ch;
}

.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: 20px;
  background: rgba(255, 255, 255, 0.7);
}

.sig-selfstart-metric strong {
  font-size: 1.02rem;
}

.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: 20px;
  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: 999px;
  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 h3 {
  margin: 0;
  font-size: clamp(1.3rem, 1.7vw, 1.5rem);
}

.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: 1.2rem;
  line-height: 1;
}

.sig-selfstart-pill {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  color: var(--sig-primary-strong);
  background: rgba(139, 26, 26, 0.08);
  font-size: 0.92rem;
  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: clamp(1.75rem, 3.2vw, 2.8rem);
  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: 999px;
  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: 999px;
  color: var(--sig-primary-strong);
  background: rgba(139, 26, 26, 0.08);
  font-size: 0.88rem;
}

.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: 20px;
  background: rgba(26, 18, 16, 0.04);
}

.sig-selfstart-context-item strong {
  font-size: 1rem;
}

.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: 999px;
  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: 0.85rem;
  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: 22px;
  background: rgba(255, 253, 248, 0.78);
  box-shadow: 0 12px 30px rgba(26, 18, 16, 0.06);
}

.sig-pressure-card h2 {
  font-size: clamp(1.3rem, 2.1vw, 1.75rem);
  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-copy-card h3,
.sig-panel h2 {
  font-size: clamp(1.6rem, 3vw, 2.7rem);
}

.sig-card h3,
.sig-feature-card h3 {
  font-size: clamp(1.35rem, 1.9vw, 1.65rem);
}

.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 {
  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: 18px;
  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 {
  padding-bottom: 6rem;
}

.sig-cta-band-inner {
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 32px;
  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: 0.85rem;
  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-site-footer h2,
.sig-site-footer h3 {
  margin-bottom: 1rem;
  font-size: 1.15rem;
}

.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-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.35rem;
}

.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: 999px;
  background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 980px) {
  .sig-header-shell,
  .sig-action-row,
  .sig-cta-band-inner,
  .sig-footer-actions {
    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-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;
  }
}

@media (max-width: 840px) {
  .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: 24px;
    background: rgba(255, 253, 248, 0.98);
    box-shadow: var(--sig-shadow);
  }

  .sig-header-menu.is-open {
    display: grid;
  }

  .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;
  }

  .sig-hero {
    padding-top: 3.25rem;
  }
}

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

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

  .sig-site-footer,
  .sig-hero,
  .sig-selfstart-hero,
  .sig-selfstart-stage,
  .sig-page-hero,
  .sig-section,
  .sig-cta-band {
    padding: 4rem 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-nav-toggle {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
  }
}