/* Exit in Engineering, op het ontwerpsysteem van The Exit Company. Een lettertype, vijf kleuren, dunne lijnen.
   Papier, inkt en grijs zijn die van TEC. Het vlak en de punt zijn van het label: blauwdruk en signaaloranje.
   De namen --navy en --red blijven, zodat de bouwstenen gelijk lopen met exitcompany.nl. Regels: CLAUDE.md. */

/* Inter 4.001, variabel op gewicht, latijnse subset. Hetzelfde bestand dat Google Fonts levert,
   maar van ons eigen domein. Licentie: fonts/OFL.txt. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-wght.woff2') format('woff2');
  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 {
  --paper: #F3F3F1;
  --ink: #0B0C0F;
  --navy: #0F3A5C;      /* blauwdruk: het vlak */
  --grey: #5C616B;
  --steel: #A3B8CC;     /* stille tekst op blauwdruk en inkt */
  --red: #E8590C;       /* signaaloranje: alleen de punt */
  --graphite: #3A3F4A;   /* lijn op inkt, stille tekst in de rail */
  --rule-navy: #2D5577;  /* lijn op blauwdruk */

  --gutter: clamp(20px, 5vw, 64px);
  --header-h: 72px;  /* hoogte van de kop op mobiel en tablet */
  --space-section: clamp(56px, 10vw, 150px);
  --space-section-short: clamp(56px, 10vw, 140px);

  /* per vlak overschreven */
  --quiet: var(--grey);
  --rule: var(--ink);
}

body { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a { color: inherit; }

/* Focus altijd zichtbaar bij het toetsenbord, in de kleur van de tekst op dat vlak. */
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.btn:focus-visible { outline-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn::before, .navlink::after { transition: none; }
}

.page {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
  overflow-x: clip;  /* clip laat de kop plakken; hidden zou dat blokkeren */
}

/* Vlakken */
.on-ink { background: var(--ink); color: var(--paper); --quiet: var(--steel); --rule: var(--graphite); }
.on-navy { background: var(--navy); color: var(--paper); --quiet: var(--steel); --rule: var(--rule-navy); }
.dot { color: var(--red); }
.rule-top { border-top: 1px solid var(--rule); }

/* Labels en kleine hoofdletters */
.caps { font-size: 15px; font-weight: 800; letter-spacing: 0.22em; }
.eyebrow { font-size: 14px; font-weight: 800; letter-spacing: 0.22em; color: var(--quiet); }
.num { font-size: 15px; font-weight: 800; letter-spacing: 0.1em; color: var(--quiet); }

/* Grote koppen */
.display { margin: 0; font-weight: 900; line-height: 0.9; letter-spacing: -0.04em; }
.display--hero { font-size: clamp(60px, 11.5vw, 190px); line-height: 0.88; }
/* Voor een langer laatste woord, zoals SECTOR. Past op elke breedte binnen de kolom. */
.display--hero-long { font-size: clamp(56px, 10vw, 160px); }
.display--back { font-size: clamp(56px, 8.5vw, 140px); }
.display--why { font-size: clamp(52px, 9vw, 150px); }
.display--section { font-size: clamp(48px, 8vw, 128px); }
.display--moment { font-size: clamp(44px, 7.4vw, 120px); line-height: 0.92; max-width: 1100px; }
.display--contact { font-size: clamp(48px, 9vw, 150px); line-height: 0.88; }
.after-eyebrow { margin-top: 20px; }

/* Lopende tekst */
.lead { margin: 0; font-size: 22px; line-height: 1.45; }
.lead + .lead { margin-top: 24px; }
.body-20 { font-size: 20px; }
.measure { max-width: 520px; }

/* Knop */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 32px;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-decoration: none;
}
/* Bij hover schuift navy er van links in. Alleen transform, de tekst houdt zijn contrast. */
.btn { position: relative; isolation: isolate; overflow: hidden; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 380ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.btn:active { transform: translateY(1px); }

/* Merkteken met woordmerk */
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
/* Logo in de kop: raakvlak van 45 px, ook als het woordmerk op een regel past. */
.site-header .brand { padding: 5px 0; margin: -5px 0; }

/* Twee kolommen die onder elkaar vallen */
.split {
  margin-top: clamp(48px, 7vw, 96px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(32px, 6vw, 96px);
}

/* 1. Kop en hero. De kop blijft bovenaan staan; de lijn loopt over de breedte van de inhoud. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 0 var(--gutter);
  background: var(--paper);
  color: var(--ink);
}
.site-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
}
/* Lijn, logo en menuknop liggen boven het open menu, zodat SLUIT altijd te raken is. */
.site-header-inner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); z-index: 2; }
.site-header-inner > .brand, .menu summary { position: relative; z-index: 2; }
@media (min-width: 1120px) {
  :root { --header-h: 92px; }
  .site-header-inner { padding: 28px 0; }
}
/* Tekstlinks van 22,5 px hoog krijgen een raakvlak van 44 px. De negatieve marge houdt de opmaak gelijk. */
.navlink, .footer-link { padding: 11px 0; margin: -11px 0; }
.navlink { position: relative; text-decoration: none; }
.navlink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.navlink:hover::after, .navlink[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }
.hero { padding: 0 var(--gutter); }
.hero-body {
  padding: clamp(56px, 9vw, 140px) 0 clamp(48px, 7vw, 96px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
}
.hero-line { margin: 0; max-width: 440px; font-size: clamp(20px, 1.9vw, 26px); font-weight: 500; line-height: 1.35; }
.hero-body .btn { margin-top: 40px; }

/* 2. Drie lagen. Het back office is altijd het grootste. */
.layers { padding: 0 var(--gutter) var(--space-section-short); }
.layers-stage > .eyebrow { padding-bottom: 20px; }
.layers-mark, .intro, .intro-mark, .rail-line { display: none; }
.layer { display: flex; flex-wrap: wrap; gap: 16px 48px; align-items: baseline; }
.layer .num { flex: 0 0 64px; }
.layer h2 { flex: 1 1 320px; margin: 0; font-weight: 900; }
.layer > p { flex: 1 1 320px; margin: 0; font-size: 20px; }
.layer--front { padding: 28px 0 32px; }
.layer--front h2 { font-size: 28px; letter-spacing: -0.01em; }
.layer--mid { padding: 44px 0 48px; }
.layer--mid h2 { font-size: clamp(36px, 4.4vw, 56px); letter-spacing: -0.02em; }
.layer--back { padding: clamp(40px, 7vw, 96px) clamp(20px, 3vw, 48px); gap: 24px 48px; }
.layer--back h2 { flex-basis: 420px; }
.layer-text { flex: 1 1 320px; }
.layer-lead { margin: 0; font-size: 22px; line-height: 1.4; }
.layer-tag { margin: 24px 0 0; }

/* 3. Kostprijs */
.why { padding: var(--space-section) var(--gutter); }
.ledger-row { padding: 18px 0 22px; display: flex; gap: 24px; flex-wrap: wrap; }
.ledger-row .eyebrow { flex: 0 0 var(--ledger-label, 110px); }
:lang(nl) .ledger-row { --ledger-label: 130px; }
.ledger-row span + span { flex: 1 1 220px; font-size: 19px; }

/* 4. De rail */
.engine { padding: var(--space-section) var(--gutter); }
.rail {
  margin-top: clamp(40px, 6vw, 80px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 32px;
}
.step { padding-top: 16px; }
.step h3 { margin: 10px 0 0; font-size: 20px; font-weight: 800; letter-spacing: 0.02em; }
.step p { margin: 10px 0 0; font-size: 16px; color: var(--graphite); }
.statement { margin: clamp(48px, 7vw, 96px) 0 0; font-size: clamp(32px, 4.4vw, 64px); font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.statement-note { margin: 20px 0 0; font-size: 18px; color: var(--graphite); }

/* 5. Drie borden */
.plates { padding: 0 var(--gutter) var(--space-section); }
.plates-intro { margin: 24px 0 0; }
.plate-grid {
  margin-top: clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 32px;
}
.plate { padding-top: 24px; }
.plate h3 { margin: 28px 0 0; font-size: 32px; font-weight: 900; letter-spacing: -0.02em; }
.plate p { margin: 12px 0 0; font-size: 18px; }
.plate .plate-split { margin: 20px 0 0; font-size: 15px; font-weight: 800; letter-spacing: 0.14em; color: var(--quiet); }
.plates-legend { margin: 40px 0 0; }

/* 6. Sectoren en labels */
.sectors { margin: 0 var(--gutter); padding: clamp(48px, 7vw, 96px) 0 var(--space-section-short); }
.sector-line { margin: 24px 0 0; font-size: clamp(36px, 6.2vw, 96px); font-weight: 900; line-height: 0.98; letter-spacing: -0.035em; }
.sectors-note { margin: 28px 0 0; }
.labels {
  margin-top: clamp(48px, 7vw, 96px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 24px;
}
.label-row { padding-top: 16px; display: flex; justify-content: space-between; gap: 16px; }
.label-name { font-size: 20px; font-weight: 800; }
.status { font-size: 14px; font-weight: 800; letter-spacing: 0.22em; }
.status--next { color: var(--quiet); }

/* 7. Het moment en de partner */
.moment { padding: var(--space-section) var(--gutter); }
.profile > .eyebrow { padding-bottom: 16px; }
.profile-row { padding: 16px 0; font-size: 20px; }
.profile-close { border-top: 1px solid var(--paper); padding: 20px 0 0; font-size: 20px; font-weight: 800; }

/* 8. Contact */
.contact { padding: var(--space-section) var(--gutter); }
.contact-form { margin-top: 48px; }
.fields { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 900px) {
  .fields { grid-template-columns: repeat(3, 1fr); }
}
.field--wide { grid-column: 1 / -1; }
.field label { display: block; }
.field input {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 500 20px/1.4 'Inter', system-ui, sans-serif;
  appearance: none;
}
.field input:focus-visible { outline-offset: 2px; }
/* Valt alleen bots op: niet zichtbaar, niet bereikbaar met het toetsenbord. */
.trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.contact-actions { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; }
.contact-details { font-size: 18px; font-weight: 500; }
.contact-mail { display: inline-block; padding: 11px 0; margin: -11px 0; text-underline-offset: 4px; }
button.btn { border: 0; border-radius: 0; cursor: pointer; font-family: inherit; }
.form-note { margin: 24px 0 0; font-size: 15px; color: var(--quiet); }

/* 9. Voet */
.site-footer { padding: 48px var(--gutter); }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px; }
.footer-address { font-size: 15px; line-height: 1.6; color: var(--quiet); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.footer-link { font-size: 15px; color: var(--quiet); }

/* Tweede pagina's: privacy, bedankt, niet gevonden. Zelfde patroon: lijn bovenaan, hoofdletterkop, korte tekst. */
.doc { padding: clamp(56px, 9vw, 140px) var(--gutter) var(--space-section); }
.doc-intro { margin: 28px 0 0; }
.doc .btn { margin-top: 40px; }
.clauses { margin-top: clamp(48px, 7vw, 96px); }
.clause { display: flex; flex-wrap: wrap; gap: 12px 48px; padding: 28px 0 32px; align-items: baseline; }
.clause h2 { flex: 1 1 320px; margin: 0; font-size: 28px; font-weight: 900; letter-spacing: -0.01em; line-height: 1.2; }
.clause-text { flex: 1 1 420px; }
.clause-text p { margin: 0; font-size: 18px; }
.clause-text p + p { margin-top: 12px; }
.clause-text a { text-underline-offset: 3px; }

/* Partnerpagina. Zelfde bouwstenen; alleen de labelregel en de tekstlink zijn nieuw. */
.quiet { color: var(--quiet); }
.label-wall { margin: 24px 0 0; font-size: clamp(36px, 6.2vw, 96px); font-weight: 900; line-height: 0.98; letter-spacing: -0.035em; }
.label-wall-note { margin: 28px 0 0; }
.more-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 24px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness 200ms ease;
}
.more-link:hover { text-decoration-thickness: 3px; }
.bring { padding: var(--space-section) var(--gutter); }
.bring .split { margin-top: clamp(40px, 6vw, 80px); }
.bring .eyebrow { padding-bottom: 16px; }
.bring--follow { margin: 0 var(--gutter); padding: clamp(48px, 7vw, 96px) 0 var(--space-section); border-top: 1px solid var(--rule); }
.starts { margin: 0 var(--gutter); padding: clamp(48px, 7vw, 96px) 0 0; }

/* Navigatie. Breed: alle pagina's naast elkaar. Smal: MENU opent een volledig scherm in navy. Zonder JavaScript. */
.nav-inline { display: none; }
.menu summary { list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu-close { display: none; }
.menu[open] .menu-open { display: none; }
.menu[open] .menu-close { display: inline; }

/* Menu open: de kop klapt om naar navy, het teken naar papier, de pagina eronder staat stil. */
.site-header:has(.menu[open]) { background: var(--navy); color: var(--paper); }
.site-header:has(.menu[open]) .site-header-inner::after { background: var(--rule-navy); }
html:has(.menu[open]) { overflow: hidden; }

.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: calc(var(--header-h) + 24px) var(--gutter) 40px;
  background: var(--navy);
  color: var(--paper);
  --quiet: var(--steel);
  --rule: var(--rule-navy);
  animation: menu-curtain 460ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.menu-list { display: flex; flex-direction: column; }
.menu-link { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-top: 1px solid var(--rule); color: inherit; text-decoration: none; }
.menu-link:last-child { border-bottom: 1px solid var(--rule); }
.menu-link:first-child { border-top: 0; padding-top: 0; }
.menu-num { flex: 0 0 28px; font-size: 14px; font-weight: 800; letter-spacing: 0.1em; color: var(--quiet); }
.menu-label { font-size: clamp(34px, 9.5vw, 64px); font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
.menu-link[aria-current="page"] .menu-label::after { content: "."; color: var(--red); }
.menu-link:hover .menu-label { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.menu-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.menu-foot .btn { background: var(--paper); color: var(--ink); }
.menu-foot .btn::before { display: none; }
.menu-foot .btn:hover { background: var(--ink); color: var(--paper); }
.menu-meta { text-decoration-thickness: 1px; transition: text-decoration-thickness 200ms ease; }
.menu-meta:hover { text-decoration-thickness: 3px; }
.menu-foot .btn:focus-visible { outline-color: var(--paper); }
.menu-meta { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 800; letter-spacing: 0.22em; text-underline-offset: 6px; }
.menu-mail { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; color: var(--quiet); text-underline-offset: 4px; }
@keyframes menu-curtain { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes menu-item { from { transform: translateY(28px); } }
.menu-link, .menu-foot { animation: menu-item 560ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.menu-link:nth-child(2) { animation-delay: 40ms; }
.menu-link:nth-child(3) { animation-delay: 80ms; }
.menu-link:nth-child(4) { animation-delay: 120ms; }
.menu-link:nth-child(5) { animation-delay: 160ms; }
.menu-link:nth-child(6) { animation-delay: 200ms; }
.menu-link:nth-child(7) { animation-delay: 240ms; }
.menu-foot { animation-delay: 260ms; }
@media (prefers-reduced-motion: reduce) { .menu-panel, .menu-link, .menu-foot { animation: none; } }
@media (min-width: 1120px) {
  .nav-inline { display: flex; gap: 28px; }
  .menu { display: none; }
}

/* Voet met alle pagina's */
.site-footer .footer-row { align-items: flex-start; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0 56px; }
.footer-nav .footer-links { flex-direction: column; gap: 0; }
.footer-nav .footer-link { display: flex; align-items: center; min-height: 44px; margin: 0; padding: 0; }
.footer-link[aria-current="page"] { color: var(--paper); }

/* Bouwstenen voor de vervolgpagina's */
.section { padding: var(--space-section) var(--gutter); }
.section-intro { margin: 24px 0 0; }
.section--after-hero { padding-top: 0; }
.clause h3 { flex: 1 1 320px; margin: 0; font-size: 28px; font-weight: 900; letter-spacing: -0.01em; line-height: 1.2; }
.clause--large h2 { font-size: clamp(32px, 4vw, 56px); letter-spacing: -0.02em; line-height: 1; }
.clause .status { display: block; margin-bottom: 12px; }
.clause .more-link { margin-top: 12px; }
.ledger--wide .ledger-row { --ledger-label: 150px; }
.cta-btn { margin-top: 48px; }
.after-section-link { margin-top: 40px; }

/* Keuzeveld in het contactformulier: zelfde lijn als de andere velden, geen pijltje. */
.field select {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 500 20px/1.4 'Inter', system-ui, sans-serif;
  appearance: none;
  cursor: pointer;
}
@media (min-width: 900px) {
  .field--two { grid-column: span 2; }
}

/* Het teken als verhaal (canvas, bord 01). De onderschriften staan op de hoogte van hun balk. */
.rule-section { border-top: 1px solid var(--ink); margin: 0 var(--gutter); padding-left: 0; padding-right: 0; }
.mark-explain { margin-top: clamp(40px, 6vw, 80px); display: grid; gap: 40px; align-items: start; }
.mark-large { display: block; width: 100%; max-width: 560px; height: auto; }
.mark-parts { display: grid; gap: 24px; }
.mark-part p { margin: 6px 0 0; font-size: 20px; color: var(--graphite); }
@media (min-width: 900px) {
  .mark-explain { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); }
  .mark-parts { aspect-ratio: auto; height: 100%; grid-template-rows: 34fr 34fr 32fr; gap: 0; }
  .mark-part:last-child { align-self: center; }
}

/* Endorsement (canvas, bord 03): het label houdt zijn gezicht, de motor zit eronder. In eigen kleuren. */
.endorsements {
  margin-top: clamp(48px, 7vw, 96px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 24px;
}
.endorse { border: 1px solid var(--rule); padding: 28px 24px 20px; display: flex; flex-direction: column; justify-content: space-between; }
.endorse-name { margin: 0; font-size: clamp(28px, 2.6vw, 36px); font-weight: 900; letter-spacing: -0.02em; line-height: 1; }
.endorse-foot { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.endorse-mark { display: inline-flex; align-items: center; gap: 10px; }
.endorse-mark .caps { font-size: 13px; }

/* Beheerpagina /bijwerken/ */
.notice { margin: 32px 0 0; padding: 16px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-size: 18px; font-weight: 500; }
.break { overflow-wrap: anywhere; }
.btn-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: 800 15px/1.5 'Inter', system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-decoration: underline;
  text-underline-offset: 6px;
  cursor: pointer;
}
button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Startpagina: drie deuren, per doelgroep een eigen pagina. De hele kaart is de link. */
.doors {
  margin-top: clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 32px;
}
.door { display: flex; flex-direction: column; padding-top: 24px; color: inherit; text-decoration: none; }
.door h3 { margin: 16px 0 0; font-size: clamp(28px, 2.6vw, 36px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; }
.door p { margin: 12px 0 0; font-size: 18px; }
.door-cue { margin-top: 20px; font-size: 15px; font-weight: 800; letter-spacing: 0.22em; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; transition: text-decoration-thickness 200ms ease; }
.door:hover h3 { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.door:hover .door-cue { text-decoration-thickness: 3px; }
.doors-section { padding-top: 0; }

/* Een kolom alleen in een split: niet breder dan prettig leest. */
.split > :only-child { max-width: 760px; }

/* Mobiel en tablet: afwerking. Desktop verandert hier niet. */
.split--list { row-gap: 0; }
.section > .clauses:first-child { margin-top: 0; }
.eyebrow + .labels { margin-top: 20px; }
@media (min-width: 900px) {
  .endorse { min-height: 220px; }
  .endorse-foot { margin-top: 48px; }
}
@media (max-width: 599px) {
  /* Drie lagen: nummer en kop op een regel, de tekst eronder. */
  .layer { column-gap: 16px; }
  .layer .num { flex-basis: 28px; }
  .layer h2 { flex-basis: calc(100% - 44px); }
}

/* Overslaan naar de inhoud: alleen zichtbaar bij toetsenbordfocus. */
.skip {
  position: absolute;
  left: var(--gutter);
  top: -120px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { top: 12px; outline-color: var(--ink); }

/* Het model om aan te klikken (Partners). Keuzerondjes en CSS: hol is van jou, vol is van ons. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.model { margin: clamp(40px, 6vw, 72px) 0 0; padding: 0; border: 0; min-width: 0; }
.model { position: relative; }
.model-input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; clip-path: inset(50%); }
.model-tabs { display: flex; flex-wrap: wrap; border-top: 1px solid var(--rule); }
.model-tabs label {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  border-bottom: 3px solid transparent;
  color: var(--quiet);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.22em;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}
.model-tabs label:hover { color: var(--ink); }
.model-num { font-size: 14px; letter-spacing: 0.1em; }
/* Op volgorde, niet op id: rondje 1 hoort bij tab 1 en tekst 1. */
.model-input:nth-of-type(1):checked ~ .model-tabs label:nth-child(1),
.model-input:nth-of-type(2):checked ~ .model-tabs label:nth-child(2),
.model-input:nth-of-type(3):checked ~ .model-tabs label:nth-child(3) { color: var(--ink); border-bottom-color: var(--ink); }
.model-input:nth-of-type(1):focus-visible ~ .model-tabs label:nth-child(1),
.model-input:nth-of-type(2):focus-visible ~ .model-tabs label:nth-child(2),
.model-input:nth-of-type(3):focus-visible ~ .model-tabs label:nth-child(3) { outline: 2px solid var(--ink); outline-offset: 4px; }
.model-stage { margin-top: clamp(32px, 5vw, 64px); display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .model-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); } }
.model-mark { display: block; width: 100%; max-width: 440px; height: auto; }
.model-mark rect { transform-box: fill-box; transition: transform 360ms ease, opacity 200ms ease; }
.m-mid-solid, .m-top-solid { transform-origin: left center; transform: scaleX(0); }
.model-input:nth-of-type(2):checked ~ .model-stage .m-mid-solid,
.model-input:nth-of-type(3):checked ~ .model-stage .m-mid-solid,
.model-input:nth-of-type(3):checked ~ .model-stage .m-top-solid { transform: scaleX(1); }
.model-input:nth-of-type(2):checked ~ .model-stage .m-mid-hollow,
.model-input:nth-of-type(3):checked ~ .model-stage .m-mid-hollow,
.model-input:nth-of-type(3):checked ~ .model-stage .m-top-hollow { opacity: 0; }
.model-copy { display: none; animation: tec-copy 460ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes tec-copy { from { transform: translateY(16px); } }
.model-input:nth-of-type(1):checked ~ .model-stage .model-copy--1,
.model-input:nth-of-type(2):checked ~ .model-stage .model-copy--2,
.model-input:nth-of-type(3):checked ~ .model-stage .model-copy--3 { display: block; }
.model-copy h3 { margin: 0; font-size: clamp(32px, 4vw, 56px); font-weight: 900; letter-spacing: -0.02em; line-height: 1; }
.model-copy p { margin: 16px 0 0; font-size: 20px; }
.model-copy .plate-split { margin-top: 24px; font-size: 15px; font-weight: 800; letter-spacing: 0.14em; color: var(--quiet); }
@media (prefers-reduced-motion: reduce) { .model-mark rect, .model-tabs label { transition: none; } .model-copy { animation: none; } }

/* Onderwerp als knoppen in plaats van een uitklaplijst: groter raakvlak, een tik. */
.chips { position: relative; margin: 0; padding: 0; border: 0; min-width: 0; }
.chips legend { padding: 0; }
.chip-row { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; }
/* Verborgen maar bereikbaar; los van de regel dat invoervelden de volle breedte nemen. */
.field .chip-input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; clip-path: inset(50%); }
.field .chip {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
.field .chip:hover { background: var(--ink); color: var(--paper); }
.field .chip-input:checked + .chip { background: var(--ink); color: var(--paper); }
.field .chip-input:focus-visible + .chip { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .chip { transition: none; } }

/* M&A 1.0 tegen M&A 2.0 (homepage). Drie kolommen met dunne lijnen; de kolom van 2.0 staat in navy, zoals het
   back office. Smal: per rij onder elkaar, met het label erboven. */
.compare { width: 100%; margin-top: clamp(40px, 6vw, 72px); border-collapse: collapse; text-align: left; }
.compare th, .compare td { padding: 20px 24px 24px 0; vertical-align: top; }
.compare thead th { padding-top: 0; padding-bottom: 16px; font-size: 14px; font-weight: 800; letter-spacing: 0.22em; color: var(--quiet); }
.compare tbody th, .compare tbody td { border-top: 1px solid var(--ink); }
.compare tbody th { width: 20%; font-size: 14px; font-weight: 800; letter-spacing: 0.22em; color: var(--quiet); }
.compare tbody td { width: 40%; font-size: 19px; line-height: 1.45; color: var(--grey); }
.compare thead th:last-child, .compare tbody td:last-child { padding-left: 24px; background: var(--navy); color: var(--paper); }
.compare thead th:last-child { padding-top: 20px; }
.compare tbody td:last-child { border-top-color: var(--rule-navy); font-weight: 500; }
.compare tbody tr:last-child td:last-child { padding-bottom: 32px; }
.compare td::before { content: attr(data-v); display: none; }
@media (max-width: 699px) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare tbody tr { padding: 20px 0 8px; border-top: 1px solid var(--ink); }
  .compare tbody th, .compare tbody td { width: auto; padding: 0; border-top: 0; }
  .compare tbody td { margin-top: 12px; }
  .compare tbody td:last-child { padding: 16px 20px 20px; }
  .compare tbody tr:last-child td:last-child { padding-bottom: 20px; }
  .compare td::before { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 800; letter-spacing: 0.18em; color: var(--quiet); }
  .compare td:last-child::before { color: var(--steel); }
}

/* Op inkt (The Engine): 1.0 in staal, de kolom van 2.0 in papier. */
.platform-lead { margin-top: clamp(32px, 5vw, 56px); }
.on-ink .compare tbody th, .on-ink .compare tbody td { border-top-color: var(--graphite); }
.on-ink .compare tbody td { color: var(--steel); }
.on-ink .compare thead th:last-child, .on-ink .compare tbody td:last-child { background: var(--paper); color: var(--ink); }
.on-ink .compare thead th:last-child { color: var(--grey); }
.on-ink .compare tbody td:last-child { border-top-color: var(--grey); }
@media (max-width: 699px) {
  .on-ink .compare tbody tr { border-top-color: var(--graphite); }
  .on-ink .compare td:last-child::before { color: var(--grey); }
}

/* Wat een label is (Labels): EXIT IN, en het woord van de sector wisselt (vier labels, elk 2,5 seconde). Zonder beweging staat er EXIT IN FLEX. */
.label-cycle { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 0.28em; margin: clamp(32px, 5vw, 56px) 0 0; font-size: clamp(36px, 6.2vw, 96px); font-weight: 900; line-height: 1; letter-spacing: -0.035em; }
.cycle { display: grid; overflow: hidden; }
.cycle > span { grid-area: 1 / 1; }
.cycle > span + span { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .cycle > span + span { visibility: visible; }
  .cycle > span { animation: tec-cycle 10s cubic-bezier(0.7, 0, 0.2, 1) infinite both; }
  .cycle > span:nth-child(2) { animation-delay: -7.5s; }
  .cycle > span:nth-child(3) { animation-delay: -5s; }
  .cycle > span:nth-child(4) { animation-delay: -2.5s; }
}
@keyframes tec-cycle {
  0% { transform: translateY(105%); }
  5%, 22% { transform: none; }
  27%, 100% { transform: translateY(-105%); }
}

/* Exit Readiness Check (Eigenaren). Zes vragen, ja of nee, zonder JavaScript: de keuzerondjes staan samen bovenaan,
   de knoppen zijn hun labels. Een teller telt de ja's; :has() kiest de uitslag zodra alle zes beantwoord zijn.
   Er gaat niets naar een server. */
.check { position: relative; margin-top: clamp(40px, 6vw, 72px); counter-reset: ready; }
.check .ci { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; clip-path: inset(50%); }
.check .yes:checked { counter-increment: ready; }
.cq { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 20px 0 24px; border-top: 1px solid var(--ink); }
.cq-text { margin: 0; font-size: clamp(20px, 2vw, 26px); font-weight: 500; line-height: 1.3; }
.cq .num { padding-top: 4px; }
.cq-answer { grid-column: 2; display: flex; gap: 10px; margin-top: 16px; }
.cq-tip { grid-column: 2; display: none; margin: 14px 0 0; max-width: 560px; font-size: 17px; color: var(--grey); }
@media (min-width: 900px) {
  .cq { grid-template-columns: 64px minmax(0, 1fr) auto; align-items: start; }
  .cq-answer { grid-column: 3; grid-row: 1; margin-top: 0; }
}
.check .chip:hover { background: var(--ink); color: var(--paper); }
.check:has(.c1.yes:checked) .q1 .chip-yes, .check:has(.c1.no:checked) .q1 .chip-no { background: var(--ink); color: var(--paper); }
.check:has(.c1.yes:focus-visible) .q1 .chip-yes, .check:has(.c1.no:focus-visible) .q1 .chip-no { outline: 2px solid var(--ink); outline-offset: 3px; }
.check:has(.c1.no:checked) .q1 .cq-tip { display: block; }
.check:has(.c2.yes:checked) .q2 .chip-yes, .check:has(.c2.no:checked) .q2 .chip-no { background: var(--ink); color: var(--paper); }
.check:has(.c2.yes:focus-visible) .q2 .chip-yes, .check:has(.c2.no:focus-visible) .q2 .chip-no { outline: 2px solid var(--ink); outline-offset: 3px; }
.check:has(.c2.no:checked) .q2 .cq-tip { display: block; }
.check:has(.c3.yes:checked) .q3 .chip-yes, .check:has(.c3.no:checked) .q3 .chip-no { background: var(--ink); color: var(--paper); }
.check:has(.c3.yes:focus-visible) .q3 .chip-yes, .check:has(.c3.no:focus-visible) .q3 .chip-no { outline: 2px solid var(--ink); outline-offset: 3px; }
.check:has(.c3.no:checked) .q3 .cq-tip { display: block; }
.check:has(.c4.yes:checked) .q4 .chip-yes, .check:has(.c4.no:checked) .q4 .chip-no { background: var(--ink); color: var(--paper); }
.check:has(.c4.yes:focus-visible) .q4 .chip-yes, .check:has(.c4.no:focus-visible) .q4 .chip-no { outline: 2px solid var(--ink); outline-offset: 3px; }
.check:has(.c4.no:checked) .q4 .cq-tip { display: block; }
.check:has(.c5.yes:checked) .q5 .chip-yes, .check:has(.c5.no:checked) .q5 .chip-no { background: var(--ink); color: var(--paper); }
.check:has(.c5.yes:focus-visible) .q5 .chip-yes, .check:has(.c5.no:focus-visible) .q5 .chip-no { outline: 2px solid var(--ink); outline-offset: 3px; }
.check:has(.c5.no:checked) .q5 .cq-tip { display: block; }
.check:has(.c6.yes:checked) .q6 .chip-yes, .check:has(.c6.no:checked) .q6 .chip-no { background: var(--ink); color: var(--paper); }
.check:has(.c6.yes:focus-visible) .q6 .chip-yes, .check:has(.c6.no:focus-visible) .q6 .chip-no { outline: 2px solid var(--ink); outline-offset: 3px; }
.check:has(.c6.no:checked) .q6 .cq-tip { display: block; }
.check-hint { margin: 0; padding-top: 24px; border-top: 1px solid var(--ink); font-size: 17px; color: var(--grey); }
.check-result { display: none; margin-top: 8px; padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 48px); }
.check-score { margin: 16px 0 0; font-size: clamp(56px, 8vw, 120px); font-weight: 900; line-height: 0.9; letter-spacing: -0.04em; }
.check-n::before { content: counter(ready); }
.tier { display: none; margin-top: 28px; }
.tier h3 { margin: 0; font-size: clamp(28px, 3vw, 40px); font-weight: 900; letter-spacing: -0.02em; line-height: 1; }
.tier p { margin: 12px 0 0; max-width: 560px; font-size: 20px; }
.check-btn { margin-top: 32px; background: var(--paper); color: var(--ink); }
.check-btn::before { display: none; }
.check-btn:hover { background: var(--ink); color: var(--paper); }
.check-btn:focus-visible { outline-color: var(--paper); }
.check:has(.ci:checked ~ .ci:checked ~ .ci:checked ~ .ci:checked ~ .ci:checked ~ .ci:checked) .check-hint { display: none; }
.check:has(.ci:checked ~ .ci:checked ~ .ci:checked ~ .ci:checked ~ .ci:checked ~ .ci:checked) .check-result { display: block; }
.tier-early { display: block; }
.check:has(.yes:checked ~ .yes:checked ~ .yes:checked) .tier-early { display: none; }
.check:has(.yes:checked ~ .yes:checked ~ .yes:checked) .tier-almost { display: block; }
.check:has(.yes:checked ~ .yes:checked ~ .yes:checked ~ .yes:checked ~ .yes:checked) .tier-almost { display: none; }
.check:has(.yes:checked ~ .yes:checked ~ .yes:checked ~ .yes:checked ~ .yes:checked) .tier-ready { display: block; }
@media (prefers-reduced-motion: reduce) { .check .chip { transition: none; } }

/* Kunnen we je helpen (Eigenaren) en Open of niet (Partners): kies je sector, het antwoord staat er meteen.
   Ja in navy, nog niet met een lijn. Zelfde techniek als de check: rondjes bovenaan, knoppen als labels. */
.pick { position: relative; margin-top: clamp(32px, 5vw, 56px); }
.pick .pi { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; clip-path: inset(50%); }
.pick-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.check .chip, .pick .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.18em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 140ms ease, color 140ms ease;
}
.pick .chip:hover { background: var(--ink); color: var(--paper); }
.pick-hint { margin: 20px 0 0; font-size: 17px; color: var(--grey); }
.pick:has(.pi:checked) .pick-hint { display: none; }
.pick-answer { display: none; margin-top: 24px; padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 48px); }
.pick-answer.ans-no { border: 1px solid var(--ink); }
.pick-answer h3 { margin: 0; font-size: clamp(48px, 7vw, 112px); font-weight: 900; line-height: 0.9; letter-spacing: -0.04em; }
.pick-answer p { margin: 20px 0 0; max-width: 620px; font-size: 20px; }
.pick-actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.pick-actions .more-link { margin-top: 0; }
.ans-yes .pick-btn { background: var(--paper); color: var(--ink); }
.ans-yes .pick-btn::before { display: none; }
.ans-yes .pick-btn:hover { background: var(--ink); color: var(--paper); }
.ans-yes .pick-btn:focus-visible { outline-color: var(--paper); }
.pick:has(.p1:checked) .l1 { background: var(--ink); color: var(--paper); }
.pick:has(.p1:focus-visible) .l1 { outline: 2px solid var(--ink); outline-offset: 3px; }
.pick:has(.p1:checked) .pa1 { display: block; }
.pick:has(.p2:checked) .l2 { background: var(--ink); color: var(--paper); }
.pick:has(.p2:focus-visible) .l2 { outline: 2px solid var(--ink); outline-offset: 3px; }
.pick:has(.p2:checked) .pa2 { display: block; }
.pick:has(.p3:checked) .l3 { background: var(--ink); color: var(--paper); }
.pick:has(.p3:focus-visible) .l3 { outline: 2px solid var(--ink); outline-offset: 3px; }
.pick:has(.p3:checked) .pa3 { display: block; }
.pick:has(.p4:checked) .l4 { background: var(--ink); color: var(--paper); }
.pick:has(.p4:focus-visible) .l4 { outline: 2px solid var(--ink); outline-offset: 3px; }
.pick:has(.p4:checked) .pa4 { display: block; }
.pick:has(.p5:checked) .l5 { background: var(--ink); color: var(--paper); }
.pick:has(.p5:focus-visible) .l5 { outline: 2px solid var(--ink); outline-offset: 3px; }
.pick:has(.p5:checked) .pa5 { display: block; }
@media (prefers-reduced-motion: reduce) { .pick .chip { transition: none; } }

/* Hero met twee wegen: verkopen of aansluiten als specialist. */
.hero-actions { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.hero-body .hero-actions .btn, .hero-actions .more-link { margin-top: 0; }

/* Foto: zwart-wit, van inkt naar papier. Klein gehouden. Naast een hero met twee kolommen hangt hij onder de
   rechterkolom, op de lijn van de introtekst (zelfde marge en tussenruimte als .hero-body). */
.photo { margin: 0 var(--gutter); overflow: hidden; }
.photo img { display: block; width: 100%; height: auto; }
@media (min-width: 1000px) {
  .photo { margin-left: calc(50% + clamp(40px, 6vw, 96px) / 2); }
}

/* Beweging. Alles komt uit het merk: de lijn, de punt, de drie woorden. Alleen verschuiven en schalen, nooit
   doorzichtig, zodat tekst altijd zijn volle contrast houdt. Wie om minder beweging vraagt, krijgt een stille site. */
/* Een woord in een grote kop breekt nooit, en de punt blijft altijd aan het laatste woord vast. */
.display .w { white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  /* Bij het laden zakken de woorden van de grote kop op hun plek, een voor een. Daarna valt de punt. */
  .display--hero .w { display: inline-block; animation: tec-word 900ms cubic-bezier(0.2, 0.75, 0.15, 1) var(--intro, 0ms) both; }
  .display--hero .w:nth-child(2) { animation-delay: calc(var(--intro, 0ms) + 70ms); }
  .display--hero .w:nth-child(3) { animation-delay: calc(var(--intro, 0ms) + 140ms); }
  .display--hero .w:nth-child(4) { animation-delay: calc(var(--intro, 0ms) + 210ms); }
  .display--hero .w:nth-child(5) { animation-delay: calc(var(--intro, 0ms) + 280ms); }
  h1.display .dot { display: inline-block; transform-origin: 50% 80%; animation: tec-dot 700ms cubic-bezier(0.3, 1.9, 0.5, 1) calc(var(--intro, 0ms) + 520ms) both; }

  /* Opening van de homepage. Het teken bouwt zich groot op in het midden: lijf, back office, mid, het lege vak.
     Dan gaat het naar zijn plek in de kop en wordt het het logo. Het doek eronder gaat omhoog. Klikken kan meteen. */
  .page:has(.intro) { --intro: 900ms; }
  .intro {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-h);
    bottom: 0;
    z-index: 25;
    background: var(--paper);
    pointer-events: none;
    animation: tec-curtain 520ms cubic-bezier(0.7, 0, 0.2, 1) 860ms both;
  }
  /* Groot in het midden van het beeld onder de kop; de vlucht is alleen transform, dus niets verschuift. */
  .intro-mark {
    display: block;
    position: fixed;
    z-index: 40;
    left: calc(50vw - var(--w) / 2);
    top: calc(50svh + var(--header-h) / 2 - var(--w) * 5 / 12);
    width: var(--w);
    height: auto;
    color: var(--ink);
    pointer-events: none;
    transform-origin: 0 0;
    animation: tec-fly 560ms cubic-bezier(0.7, 0, 0.2, 1) 780ms both, tec-handoff 1ms linear 1340ms both;
  }
  .intro-mark rect { transform-box: fill-box; transform-origin: left center; }
  .intro-mark rect:nth-child(1) { transform-origin: center bottom; animation: tec-grow-y 320ms cubic-bezier(0.2, 0.7, 0.2, 1) 40ms both; }
  .intro-mark rect:nth-child(3) { animation: tec-bar 380ms cubic-bezier(0.2, 0.7, 0.2, 1) 180ms both; }
  .intro-mark rect:nth-child(2) { animation: tec-bar 380ms cubic-bezier(0.2, 0.7, 0.2, 1) 290ms both; }
  .intro-mark rect:nth-child(4) { stroke-dasharray: 140; animation: tec-trace 420ms cubic-bezier(0.2, 0.7, 0.2, 1) 380ms both; }
  .page:has(.intro) .site-header .brand svg { animation: tec-handon 1ms linear 1340ms both; }

  /* Het teken in de kop bouwt zich opnieuw op als je erover gaat: eerst het back office, dan mid, dan het lege vak. */
  .site-header .brand rect { transform-box: fill-box; transform-origin: left center; }
  .site-header .brand:hover rect:nth-child(3) { animation: tec-bar 440ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .site-header .brand:hover rect:nth-child(2) { animation: tec-bar 440ms cubic-bezier(0.2, 0.7, 0.2, 1) 90ms both; }
  .site-header .brand:hover rect:nth-child(4) { animation: tec-bar 440ms cubic-bezier(0.2, 0.7, 0.2, 1) 180ms both; }

  /* Naar een andere pagina: de kop blijft staan, de inhoud komt van onder binnen. */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: kop; }
  ::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) { animation: tec-bands 640ms cubic-bezier(0.7, 0, 0.2, 1) both; }
}
@keyframes tec-word { from { transform: translateY(0.32em); } }
@keyframes tec-curtain { to { clip-path: inset(0 0 100% 0); } }
/* Naar de plek van het logo: --lt is de bovenkant van het logo, --s de verhouding logo / groot teken. */
@keyframes tec-fly {
  to { transform: translate(calc(var(--gutter) - 50vw + var(--w) / 2), calc(var(--lt) - 50svh - var(--header-h) / 2 + var(--w) * 5 / 12)) scale(var(--s)); }
}
@keyframes tec-handoff { to { visibility: hidden; } }
@keyframes tec-handon { from { visibility: hidden; } }
@keyframes tec-trace { from { stroke-dashoffset: 140; } to { stroke-dashoffset: 0; } }
.intro-mark { --w: 240px; --s: 0.175; --lt: 18px; }
@media (max-width: 380px) { .intro-mark { --s: 0.15833; --lt: 23px; } }
@media (min-width: 600px) { .intro-mark { --w: 360px; --s: 0.11667; } }
@media (min-width: 1120px) { .intro-mark { --w: 480px; --s: 0.0875; --lt: 28px; } }
@keyframes tec-dot { from { transform: scale(0); } }
/* Drie banen in de verhouding van het teken: front, mid, back. De onderste, het back office, loopt voorop. */
@keyframes tec-bands {
  0% { clip-path: polygon(0 0, 0 0, 0 34%, 0 34%, 0 68%, 0 68%, 0 100%, 0 100%); }
  55% { clip-path: polygon(0 0, 35% 0, 35% 34%, 70% 34%, 70% 68%, 100% 68%, 100% 100%, 0 100%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 34%, 100% 34%, 100% 68%, 100% 68%, 100% 100%, 0 100%); }
}

/* Beweging bij het scrollen: lijnen tekenen zich, koppen komen omhoog, het teken bouwt zich op.
   Alleen waar de browser het kan, en alleen als niemand om minder beweging vraagt. Zonder: de site staat stil. */
.door:hover, .door:focus-visible { border-top-width: 3px; padding-top: 22px; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rule-top { position: relative; border-top-color: transparent; }
    .rule-top::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: -1px;
      height: 1px;
      background: var(--rule);
      transform-origin: left center;
      animation: tec-draw linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
    .door:hover::before, .door:focus-visible::before { top: -3px; height: 3px; }
    .display:not(.display--hero), .sector-line, .statement, .label-wall {
      animation: tec-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    .layer--back { animation: tec-king linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    /* Drie lagen als scène. Het teken bouwt zich op terwijl je scrolt: het lijf, het lege vak (front office, van
       jou), mid (samen), back office (van ons). Dan schuift het back office in navy over het hele beeld. */
    .layers { padding-bottom: var(--space-section-short); }
    .layers-track { height: 420svh; view-timeline-name: --engine; view-timeline-inset: var(--header-h) 0px; }
    .layers-stage {
      position: sticky;
      top: var(--header-h);
      height: calc(100svh - var(--header-h));
      margin: 0 calc(-1 * var(--gutter));
      padding: clamp(24px, 4vw, 48px) var(--gutter);
      box-sizing: border-box;
      overflow: hidden;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 24px;
    }
    .layers-mark { display: block; width: min(100%, 80vw, 34svh * 1.2); height: auto; justify-self: start; }
    .layers-mark rect { transform-box: fill-box; transform-origin: left center; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --engine; }
    .layers-mark .lm-spine { transform-origin: center bottom; animation-name: tec-grow-y; animation-range: entry 60% contain 10%; }
    .layers-mark .lm-front { stroke-dasharray: 140; animation-name: tec-trace; animation-range: contain 6% contain 22%; }
    .layers-mark .lm-mid { animation-name: tec-bar; animation-range: contain 34% contain 48%; }
    .layers-mark .lm-back { animation-name: tec-bar; animation-range: contain 60% contain 72%; }
    .layers-panels { display: grid; align-self: start; }
    .layers-panels > .layer { grid-area: 1 / 1; }
    .layers-track .layer--front, .layers-track .layer--mid { animation: tec-panel linear both; animation-timeline: --engine; }
    .layers-track .layer--front { animation-range: contain 4% contain 36%; }
    .layers-track .layer--mid { animation-range: contain 32% contain 62%; }
    .layers-track .layer--front h2 { font-size: clamp(32px, 4.4vw, 64px); letter-spacing: -0.02em; }
    .layers-track .layer--mid h2 { font-size: clamp(40px, 6vw, 96px); letter-spacing: -0.03em; line-height: 1; }
    .layers-track .rule-top::before { animation: none; transform: none; }
    .layers-track .display { animation: none; }
    /* grid-area: auto, anders wordt een vak van het raster het kader en dekt het navy niet het hele beeld. */
    .layers-track .layer--back {
      grid-area: auto;
      position: absolute;
      inset: 0;
      z-index: 2;
      align-content: center;
      padding: clamp(24px, 5vw, 64px) var(--gutter);
      animation: tec-takeover linear both;
      animation-timeline: --engine;
      animation-range: contain 72% contain 88%;
    }
    @media (min-width: 900px) {
      .layers-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); }
      .layers-stage > .eyebrow { grid-column: 1 / -1; }
      .layers-mark { width: min(100%, 560px, 56svh * 1.2); }
      .layers-panels { align-self: center; }
    }

    /* Het spoor (The Engine, en de route op Eigenaren) als scène. Het podium blijft staan; de dikke lijn trekt van fase 1 naar 5, elke halte
       wordt van hol vol, en de fase waar je bent staat groot in beeld. */
    .rail-track { height: 520svh; view-timeline-name: --rail; view-timeline-inset: var(--header-h) 0px; }
    .rail-stage {
      position: sticky;
      top: var(--header-h);
      height: calc(100svh - var(--header-h));
      box-sizing: border-box;
      padding: clamp(24px, 4vw, 48px) 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: clamp(20px, 3vw, 40px);
    }
    .rail-stage > .display { animation: none; }
    .rail-stage > .section-intro { margin: 0; }
    .rail-line { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; margin-top: 12px; border-top: 1px solid var(--ink); }
    .rail-line::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: -2px;
      height: 3px;
      background: var(--ink);
      transform: scaleX(0);
      transform-origin: left center;
      animation: tec-draw linear both;
      animation-timeline: --rail;
      animation-range: contain 0% contain 100%;
    }
    .rail-stop { position: relative; display: flex; flex-direction: column; gap: 6px; padding-top: 22px; }
    .rail-stop::before {
      content: "";
      position: absolute;
      left: 0;
      top: -9px;
      width: 16px;
      height: 16px;
      box-sizing: border-box;
      border: 3px solid var(--ink);
      background: var(--paper);
      animation: tec-stop linear both;
      animation-timeline: --rail;
    }
    .rail-stop:nth-child(1)::before { animation-range: contain 0% contain 1%; }
    .rail-stop:nth-child(2)::before { animation-range: contain 19% contain 20%; }
    .rail-stop:nth-child(3)::before { animation-range: contain 39% contain 40%; }
    .rail-stop:nth-child(4)::before { animation-range: contain 59% contain 60%; }
    .rail-stop:nth-child(5)::before { animation-range: contain 79% contain 80%; }
    .rail-num { font-size: 14px; font-weight: 800; letter-spacing: 0.1em; color: var(--quiet); }
    .rail-name { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; }
    .rail-panels { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; margin: 0; }
    .rail-panels > * { grid-area: 1 / 1; display: block; padding: 0; border-top: 0; animation: tec-panel linear both; animation-timeline: --rail; }
    .rail-panels > *::before { display: none; }
    .rail-panels > :nth-child(1) { animation-range: entry 70% contain 22%; }
    .rail-panels > :nth-child(2) { animation-range: contain 18% contain 42%; }
    .rail-panels > :nth-child(3) { animation-range: contain 38% contain 62%; }
    .rail-panels > :nth-child(4) { animation-range: contain 58% contain 82%; }
    .rail-panels > :nth-child(5) { animation-name: tec-panel-in; animation-range: contain 78% contain 100%; }
    .rail-panels h3 { margin: 12px 0 0; font-size: min(clamp(32px, 5.6vw, 88px), 10svh); font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
    .rail-panels > .clause h3 { margin: 0; }
    .rail-panels .clause-text { margin-top: 20px; max-width: 640px; }
    .rail-panels p { max-width: 640px; font-size: clamp(20px, 1.8vw, 24px); }
    .rail-panels > .step p { margin: 20px 0 0; color: var(--ink); }
    @media (max-width: 699px) { .rail-name { display: none; } }

    /* De lijn onder de kop is ook de voortgang: hij wordt dik van links naar rechts terwijl je leest. */
    .site-header-inner::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      height: 3px;
      background: var(--ink);
      transform: scaleX(0);
      transform-origin: left center;
      animation: tec-draw linear both;
      animation-timeline: scroll(root);
    }
    .site-header:has(.menu[open]) .site-header-inner::before { display: none; }
    /* De rode punt landt als de kop in beeld komt. */
    .display:not(h1) .dot { display: inline-block; transform-origin: 50% 80%; animation: tec-land linear both; animation-timeline: view(); animation-range: entry 50% cover 45%; }
    /* Slotregel: SECTOR. NETWORK. ENGINE. komen een voor een omhoog, de punt als laatste. */
    .display.display--contact { animation: none; view-timeline-name: --slot; }
    .display--contact .w { display: inline-block; animation: tec-rise-word linear both; animation-timeline: --slot; }
    .display--contact .w:nth-child(1) { animation-range: entry 10% entry 70%; }
    .display--contact .w:nth-child(2) { animation-range: entry 30% entry 90%; }
    .display--contact .w:nth-child(3) { animation-range: entry 50% cover 45%; }
    .display.display--contact .dot { animation-timeline: --slot; animation-range: cover 35% cover 55%; }
    .photo img { animation: tec-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    .mark-large { view-timeline-name: --mark; }
    .mark-large rect { transform-box: fill-box; transform-origin: left center; animation: tec-bar linear both; animation-timeline: --mark; }
    .mark-large rect:nth-child(1) { transform-origin: center bottom; animation-name: tec-grow-y; animation-range: entry 10% cover 30%; }
    .mark-large rect:nth-child(3) { animation-range: entry 20% cover 35%; }
    .mark-large rect:nth-child(2) { animation-range: entry 30% cover 40%; }
    .mark-large rect:nth-child(4) { animation-range: entry 40% cover 45%; }
  }
}
@keyframes tec-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Alleen verschuiven en schalen, nooit doorzichtig: tekst houdt altijd zijn volle contrast. */
@keyframes tec-rise { from { transform: translateY(28px); } to { transform: none; } }
@keyframes tec-king { from { transform: scale(0.97); } to { transform: none; } }
@keyframes tec-panel {
  0% { transform: translateY(48px); clip-path: inset(0 0 100% 0); }
  22%, 78% { transform: none; clip-path: inset(0); }
  100% { transform: translateY(-48px); clip-path: inset(100% 0 0 0); }
}
@keyframes tec-panel-in {
  0% { transform: translateY(48px); clip-path: inset(0 0 100% 0); }
  30%, 100% { transform: none; clip-path: inset(0); }
}
@keyframes tec-stop { to { background: var(--ink); } }
@keyframes tec-takeover { from { transform: translateY(100%); } to { transform: none; } }
@keyframes tec-land { 0% { transform: scale(0); } 70% { transform: scale(1.4); } 100% { transform: none; } }
@keyframes tec-rise-word { from { transform: translateY(0.5em); } to { transform: none; } }
@keyframes tec-settle { from { transform: scale(1.06); } to { transform: none; } }
@keyframes tec-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tec-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Geen blauwe tikgloed op iOS bij knoppen en keuzes; de eigen staat (inkt) is de terugkoppeling. */
.chip, .model-tabs label, .menu summary, .door { -webkit-tap-highlight-color: transparent; }

/* Exit in Engineering. Het label heeft zijn eigen woordmerk; The Exit Company staat eronder als Powered by,
   met het teken, zoals de kaarten op exitcompany.nl/nl/labels/. Verder dezelfde bouwstenen als hierboven. */
.wordmark { font-size: 16px; font-weight: 900; letter-spacing: 0.16em; line-height: 1.2; white-space: nowrap; }
/* Woordmerk in de kop: raakvlak van 44 px; de negatieve marge houdt de kop even hoog als op exitcompany.nl. */
.site-header .brand { min-height: 44px; margin: -4.5px 0; padding: 0; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.wordmark--footer { font-size: clamp(20px, 2.4vw, 30px); letter-spacing: 0.06em; line-height: 1.05; white-space: normal; }
.powered { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 44px; padding-top: 12px; border-top: 1px solid var(--rule); color: inherit; text-decoration: none; }
.powered:hover .caps { text-decoration: underline; text-underline-offset: 4px; }

/* Een lang laatste woord, zoals ENGINEERING. Past vanaf 360 px binnen de kolom. */
.display--hero-fit { font-size: clamp(34px, 9.4vw, 156px); }

/* Sectorkeuze met zeven keuzes (Eigenaren): zelfde techniek, twee rondjes meer. */
.pick:has(.p6:checked) .l6, .pick:has(.p7:checked) .l7 { background: var(--ink); color: var(--paper); }
.pick:has(.p6:focus-visible) .l6, .pick:has(.p7:focus-visible) .l7 { outline: 2px solid var(--ink); outline-offset: 3px; }
.pick:has(.p6:checked) .pa6, .pick:has(.p7:checked) .pa7 { display: block; }

/* Het gezicht dat er nog niet is: een vak met een lijn, waar straks de foto komt. Geen beeld verzinnen. */
.face { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 32px; align-items: end; }
.face-frame { aspect-ratio: 4 / 5; max-width: 420px; display: flex; align-items: flex-end; padding: 20px; box-sizing: border-box; border: 1px solid var(--rule); color: var(--quiet); font-size: 15px; font-weight: 800; letter-spacing: 0.14em; }
.face .face-name { margin: 0; font-size: clamp(32px, 4vw, 56px); font-weight: 900; letter-spacing: -0.02em; line-height: 1; }
.face p { margin: 16px 0 0; max-width: 520px; font-size: 20px; }

/* Hero in een kolom: voor een kop met een lang woord (TECHNIEK, ENGINEERING, GEZICHT). De kop krijgt de hele breedte,
   de tekst en de knoppen staan eronder. */
.hero-body--stack { grid-template-columns: minmax(0, 1fr); }
.hero-body--stack .hero-line { max-width: 560px; }
/* BINNENKORT. is een woord van elf tekens: op 360 px iets kleiner dan een gewone sectiekop. */
.display--status { font-size: clamp(42px, 8vw, 128px); }
.nowrap { white-space: nowrap; }