/* ==========================================================================
   TeQToniQ — homepage
   Implemented from the design canvas: "TeQToniQ Homepage.dc.html".
   Blueprint sheet: 38px grid, drawing rail, FIG.xx captions, titleblock.
   ========================================================================== */

/* --- tokens -------------------------------------------------------------- */
:root {
  --ink:        #2F343A;
  --navy:       #343A40;
  --gold:       #CC5A16;
  --gold-deep:  #CC5A16;   /* accent-on-light; equal to --gold in this palette */

  --panel:      #000000;   /* deepest panel fill */
  --on-accent:  #fff;      /* text + marks on --gold */

  --paper:      #eef0f3;   /* sheet */
  --paper-2:    #e4e7ed;   /* page behind the sheet */
  --cell:       #e7eaf0;   /* diagram wells */

  --text:       #4a4c52;
  --text-2:     #5a5c62;
  --text-3:     #3f4148;
  --muted:      #80828b;
  --muted-2:    #9aa0ad;

  --on-dark:        #abadb4;
  --on-dark-2:      #9da0a8;
  --on-dark-mono:   #9aa3bb;

  --line:       rgba(92, 99, 107, .22);
  --line-soft:  rgba(92, 99, 107, .18);
  --line-mid:   rgba(92, 99, 107, .25);
  --line-hard:  rgba(92, 99, 107, .35);
  --hairline:   rgba(92, 99, 107, .4);

  --grid:       38px;
  --rule:       1.5px;

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

[id] { scroll-margin-top: 84px; }

::selection { background: var(--gold); color: var(--on-accent); }

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

a { color: inherit; }

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

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--gold);
  color: var(--on-accent);
  font: 600 12px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top .18s;
}
.skip-link:focus { top: 12px; }

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}
main:focus { outline: none; }

/* --- animations ---------------------------------------------------------- */
@keyframes tq-trace  { to { stroke-dashoffset: 0; } }
@keyframes ds-core   { 0%, 100% { opacity: 0; } 50% { opacity: .6; } }
@keyframes ds-travel {
  0%   { top: -1.5%; opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { top: 101.5%; opacity: 0; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(10px);
  background: rgba(238, 240, 243, .88);
  border-bottom: var(--rule) solid var(--navy);
}

.site-header__inner {
  max-width: 1340px;
  margin: 0 auto;
  padding: 15px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
}

.brand__mark {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.brand__name {
  font: 800 19px/1 var(--display);
  letter-spacing: -.03em;
  color: var(--navy);
}

.brand__wave {
  width: 92px;
  height: auto;
  display: block;
}
.brand__wave path {
  stroke-dasharray: 281;
  stroke-dashoffset: 281;
  animation: tq-trace 1.5s .25s ease-out forwards;
}

.brand__tag {
  font: 500 10px/1.25 var(--mono);
  letter-spacing: .06em;
  color: var(--muted);
  border-left: 1px solid rgba(92, 99, 107, .28);
  padding-left: 13px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav__link {
  font: 500 12px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: color .16s;
}
.nav__link:hover { color: var(--gold-deep); }

/* Menuknop — alleen zichtbaar op smalle schermen, zie "Narrow viewports". */
.nav__toggle {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  margin: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: 500 12px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.nav__toggle:hover { color: var(--gold-deep); }

.nav__toggle-bars {
  position: relative;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: background .16s;
}
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: top .16s, transform .16s;
}
.nav__toggle-bars::before { top: -6px; }
.nav__toggle-bars::after  { top: 6px; }

.site-header.is-open .nav__toggle-bars          { background: transparent; }
.site-header.is-open .nav__toggle-bars::before  { top: 0; transform: rotate(45deg); }
.site-header.is-open .nav__toggle-bars::after   { top: 0; transform: rotate(-45deg); }

/* ==========================================================================
   Buttons & links
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .16s, border-color .16s, color .16s;
}

.btn--gold {
  background: var(--gold);
  color: var(--on-accent);
  padding: 16px 28px;
  font-size: 13px;
  line-height: 1;
}
.btn--gold:hover { background: var(--ink); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hairline);
  padding: 16px 28px;
  font-size: 13px;
  line-height: 1;
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-deep); }

.btn--nav {
  background: var(--gold);
  color: var(--on-accent);
  padding: 11px 19px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .06em;
}
.btn--nav:hover { background: var(--ink); color: #fff; }

.btn--lg {
  padding: 17px 30px;
  font-size: 14px;
  line-height: 1;
}

/* rule-underlined text link */
.ulink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: var(--rule) solid var(--gold);
  padding-bottom: 4px;
  transition: color .16s, border-color .16s;
}
.ulink:hover { color: var(--gold-deep); }

.ulink--case {
  gap: 10px;
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--navy);
  padding-bottom: 5px;
}
.ulink--case:hover { color: var(--gold-deep); border-color: var(--gold); }

.ulink--case-sm {
  gap: 8px;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--navy);
  align-self: flex-start;
  margin-top: 14px;
}
.ulink--case-sm:hover { color: var(--gold-deep); border-color: var(--gold); }

.ulink--mail {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: none;
  border-bottom-color: var(--hairline);
  padding-bottom: 5px;
  overflow-wrap: anywhere;
}
.ulink--mail:hover { color: var(--gold-deep); border-color: var(--gold); }

.ulink--on-dark {
  color: #fff;
  font-size: 12px;
  letter-spacing: .05em;
  padding-bottom: 5px;
  align-self: flex-start;
}
.ulink--on-dark:hover { color: var(--gold-deep); }

/* ==========================================================================
   The sheet
   ========================================================================== */
.ds-outer {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 30px;
}

.ds-sheet {
  display: grid;
  grid-template-columns: 76px 1fr;
  position: relative;
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(92, 99, 107, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 99, 107, .055) 1px, transparent 1px);
  background-size: var(--grid) var(--grid);
  border-left: var(--rule) solid var(--navy);
  border-right: var(--rule) solid var(--navy);
}

/* --- drawing rail -------------------------------------------------------- */
.ds-rail {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  border-right: var(--rule) solid var(--navy);
}

.ds-rail__ticks {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 9px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(92, 99, 107, .5) 0,
    rgba(92, 99, 107, .5) 1px,
    transparent 1px,
    transparent var(--grid)
  );
}

.ds-rail-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font: 500 10px/1 var(--mono);
  letter-spacing: .22em;
  color: var(--muted-2);
  white-space: nowrap;
}
.ds-rail-label--top    { top: 120px; }
.ds-rail-label--bottom { bottom: 120px; }

.ds-rail__signal {
  position: absolute;
  right: -4.5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 4px rgba(92, 99, 107, .18);
  animation: ds-travel 11s linear infinite;
}

/* --- content column ------------------------------------------------------ */
.ds-col {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  min-width: 0;
}

.sect {
  position: relative;
  padding: 30px 38px 70px;
}
.sect--hero    { padding: 60px 38px 56px; }
.sect--list    { padding: 80px 38px 70px; }
.sect--contact { padding: 30px 38px 64px; border-top: 1px solid var(--line); }

/* crosshair node where a section meets the rail */
.node {
  position: absolute;
  left: 0;
  top: 54px;
  transform: translate(-50%, -50%);
  width: var(--grid);
  height: var(--grid);
  pointer-events: none;
}
.node--hero { top: 76px; }
.node--list { top: 96px; }

.node::before,
.node::after {
  content: "";
  position: absolute;
  background: var(--line-hard);
}
.node::before { top: 50%; left: 0; width: var(--grid); height: 1px; }
.node::after  { left: 50%; top: 0; width: 1px; height: var(--grid); }

.node__dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--navy);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px var(--paper);
}

/* --- FIG caption --------------------------------------------------------- */
.fig {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.fig--tight { margin-bottom: 22px; }
.fig--wide  { gap: 16px; margin-bottom: 32px; }
.fig--hero  { margin-bottom: 30px; }

.fig__id {
  font: 600 12px/1 var(--mono);
  letter-spacing: .14em;
  color: var(--muted);
}

.fig__rule {
  width: 40px;
  height: var(--rule);
  background: var(--line-mid);
  flex: none;
}
.fig__rule--flex {
  width: auto;
  flex: 1;
  height: 1px;
  background: var(--line);
}

.fig__name {
  font: 500 12px/1 var(--mono);
  letter-spacing: .13em;
  color: var(--navy);
}
.fig__rule--flex + .fig__name { letter-spacing: .14em; }

/* ==========================================================================
   FIG.00 — hero
   ========================================================================== */
.hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 38px;
  align-items: center;
}

.hero__title {
  margin: 0;
  font: 900 clamp(34px, 6.4vw, 88px)/0.92 var(--display);
  letter-spacing: -.035em;
  overflow-wrap: break-word;
}

.gold { color: var(--gold-deep); }

/* the "1:1 / GEEN TEMPLATE" measure line */
.measure {
  display: flex;
  align-items: center;
  max-width: 440px;
  margin: 32px 0 26px;
}
.measure::before,
.measure::after,
.measure__span {
  content: "";
  background: var(--navy);
}
.measure::before,
.measure::after { width: 1px; height: 11px; }
.measure__span  { flex: 1; height: 1px; }
.measure__label {
  font: 500 10px/1 var(--mono);
  letter-spacing: .12em;
  color: var(--navy);
  padding: 0 12px;
  white-space: nowrap;
}

.lede {
  margin: 0 0 34px;
  max-width: 50ch;
  font: 400 clamp(15px, 1.4vw, 18px)/1.62 var(--body);
  color: var(--text);
  text-wrap: pretty;
}

.actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.actions--lg { gap: 18px; }

/* --- schematic frame ----------------------------------------------------- */
.schematic {
  border: var(--rule) solid var(--navy);
  background: rgba(255, 255, 255, .5);
  padding: 20px 22px 16px;
}

.schematic__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 10px;
  font: 500 10px/1 var(--mono);
  letter-spacing: .12em;
}
.schematic__title  { color: var(--muted); }
.schematic__status { color: var(--muted); }

.schematic svg { width: 100%; height: auto; display: block; }

.pulse { animation: ds-core 2.4s ease-in-out infinite; }

/* ==========================================================================
   Spec row
   ========================================================================== */
.specrow {
  border-top: var(--rule) solid var(--navy);
  border-bottom: var(--rule) solid var(--navy);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}

.specrow__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 24px;
  border-right: 1px solid var(--line-soft);
}
.specrow__item:last-child { border-right: 0; }

.specrow__n {
  font: 600 11px/1 var(--mono);
  color: var(--muted);
}
.specrow__t {
  font: 600 12px/1.35 var(--mono);
  letter-spacing: .03em;
  color: var(--ink);
}

/* ==========================================================================
   FIG.01 — parts list
   ========================================================================== */
.sect__h2 {
  margin: 0 0 44px;
  font: 800 clamp(30px, 4vw, 56px)/1.0 var(--display);
  letter-spacing: -.03em;
  max-width: 17ch;
}

.list { border-top: var(--rule) solid var(--ink); }

.list__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 28px 8px;
  border-bottom: 1px solid var(--line);
  transition: background .18s, padding-left .18s;
}
.list__row:hover {
  background: var(--paper-2);
  padding-left: 20px;
}

.list__n {
  flex: none;
  width: 84px;
  font: 800 42px/1 var(--display);
  letter-spacing: -.03em;
  color: var(--gold-deep);
}

.list__body {
  flex: 1 1 320px;
  min-width: 200px;
}

.list__h {
  margin: 0 0 6px;
  font: 700 24px/1.1 var(--display);
  letter-spacing: -.02em;
}

.list__p {
  margin: 0;
  font: 400 15px/1.55 var(--body);
  color: var(--text-2);
  max-width: 54ch;
}

.tag {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
}
.tag__dash {
  width: 16px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--navy) 0, var(--navy) 3px, transparent 3px, transparent 6px);
}
.tag__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--navy);
  flex: none;
}
.tag__label {
  font: 500 11px/1 var(--mono);
  letter-spacing: .08em;
  color: var(--navy);
  border: 1px solid var(--line-hard);
  padding: 7px 11px;
  white-space: nowrap;
}

/* ==========================================================================
   Inset panels (FIG.02 gold, FIG.03 dark)
   ========================================================================== */
.ds-panel {
  position: relative;
  overflow: hidden;
}

.ds-panel--gold {
  background: var(--gold);
  color: var(--on-accent);
  padding: 64px 48px;
}
.ds-panel--gold .ds-panel__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .14) 1px, transparent 1px);
  background-size: var(--grid) var(--grid);
  pointer-events: none;
}
.ds-panel__inner { position: relative; }

.ds-panel--gold .fig__id   { color: var(--on-accent); }
.ds-panel--gold .fig__rule { background: var(--on-accent); }
.ds-panel--gold .fig__rule--flex { background: rgba(255, 255, 255, .45); }
.ds-panel--gold .fig__name { color: rgba(255, 255, 255, .8); }

.statement {
  margin: 0;
  font: 900 clamp(36px, 5.6vw, 92px)/0.92 var(--display);
  letter-spacing: -.035em;
  max-width: 15ch;
}

.statement-body {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  margin-top: 42px;
}
.statement-body p {
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
  max-width: 56ch;
  font: 400 18px/1.6 var(--body);
  color: rgba(255, 255, 255, .85);
  text-wrap: pretty;
}

.stats {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 36px;
  align-items: flex-start;
}
.stat__v {
  font: 800 50px/1 var(--display);
  letter-spacing: -.03em;
}
.stat__l {
  font: 500 11px/1.4 var(--mono);
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .8);
  margin-top: 8px;
}

/* --- dark panel ---------------------------------------------------------- */
.ds-panel--dark {
  background-color: var(--panel);
  background-image:
    linear-gradient(rgba(204, 90, 22, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204, 90, 22, .1) 1px, transparent 1px);
  background-size: var(--grid) var(--grid);
  padding: 60px 48px;
  color: #fff;
}
.ds-panel--dark .fig             { gap: 16px; margin-bottom: 20px; }
.ds-panel--dark .fig__rule--flex { background: rgba(255, 255, 255, .2); }
.ds-panel--dark .fig__name       { color: var(--on-dark-mono); }

.ds-panel--dark h2 {
  margin: 0 0 14px;
  font: 800 clamp(30px, 4vw, 56px)/1.0 var(--display);
  letter-spacing: -.03em;
  max-width: 20ch;
}
.ds-panel--dark .lede-dark {
  margin: 0 0 44px;
  max-width: 60ch;
  font: 400 17px/1.6 var(--body);
  color: var(--on-dark);
  text-wrap: pretty;
}

/* --- assembly steps ------------------------------------------------------ */
.steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  row-gap: 26px;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.step {
  position: relative;
  min-width: 0;
  padding-right: 28px;
}
.step:last-child { padding-right: 0; }

/* stippellijn van badge naar badge; de laatste van een rij krijgt er geen */
.step::before {
  content: "";
  position: absolute;
  top: 22px; left: 46px; right: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0, rgba(255, 255, 255, .35) 6px, transparent 6px, transparent 12px);
}
.step:last-child::before { display: none; }

.step__badge {
  width: 46px; height: 46px;
  border: var(--rule) solid var(--gold);
  background: var(--panel);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  position: relative;
  z-index: 2;
  font: 600 13px/1 var(--mono);
  color: var(--gold-deep);
}
.step__badge--on {
  background: var(--gold);
  color: var(--on-accent);
}

.step__h {
  margin: 0 0 10px;
  font: 700 20px/1.15 var(--display);
  letter-spacing: -.01em;
}
.step__p {
  margin: 0;
  font: 400 14px/1.6 var(--body);
  color: var(--on-dark-2);
  max-width: 30ch;
}

/* ==========================================================================
   FIG.04 — the machine
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 38px;
  align-items: start;
}

.split__h2 {
  margin: 0 0 18px;
  font: 900 clamp(30px, 3.6vw, 54px)/0.98 var(--display);
  letter-spacing: -.03em;
  max-width: 18ch;
}
.split__p {
  margin: 0 0 26px;
  max-width: 52ch;
  font: 400 16px/1.62 var(--body);
  color: var(--text);
  text-wrap: pretty;
}

.speclist {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.speclist__row {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 16px 18px;
  background: rgba(255, 255, 255, .55);
}
.speclist__k {
  flex: none;
  width: 70px;
  font: 600 10px/1.4 var(--mono);
  letter-spacing: .1em;
  color: var(--muted);
}
.speclist__v {
  font: 400 14px/1.55 var(--body);
  color: var(--text-3);
}
.speclist__v strong { font-weight: 600; color: var(--navy); }

.split .ulink { margin-top: 24px; }

/* ==========================================================================
   FIG.05 — project register
   ========================================================================== */
.case-featured {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border: var(--rule) solid var(--ink);
  background: rgba(255, 255, 255, .5);
  margin-bottom: 34px;
}

/* registration crosshairs at opposite corners */
.corner {
  position: absolute;
  width: 18px; height: 18px;
  z-index: 3;
  pointer-events: none;
}
.corner--tl { top: 0; left: 0; transform: translate(-50%, -50%); }
.corner--br { bottom: 0; right: 0; transform: translate(50%, 50%); }
.corner::before,
.corner::after {
  content: "";
  position: absolute;
  background: var(--gold);
}
.corner::before { top: 50%; left: 0; width: 18px; height: var(--rule); transform: translateY(-50%); }
.corner::after  { left: 50%; top: 0; width: var(--rule); height: 18px; transform: translateX(-50%); }

/* diagram well */
.plan-well {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cell);
  background-image:
    linear-gradient(rgba(92, 99, 107, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 99, 107, .07) 1px, transparent 1px);
  background-size: 24px 24px;
}
.plan-well--featured {
  flex: 1 1 360px;
  min-width: 0;
  min-height: 360px;
  border-right: 1px solid var(--line-mid);
  padding: 30px 26px 20px;
}
.plan-well--card {
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--line-mid);
  padding: 14px 14px 6px;
  background-image:
    linear-gradient(rgba(92, 99, 107, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 99, 107, .06) 1px, transparent 1px);
  background-size: 18px 18px;
}

.plan-well__tag,
.plan-well__status {
  position: absolute;
  top: 14px;
  z-index: 2;
  font: 500 10px/1 var(--mono);
  letter-spacing: .1em;
  pointer-events: none;
}
.plan-well__tag    { left: 14px;  color: var(--navy); }
.plan-well__status { right: 14px; color: var(--muted); }

.plan-well--card .plan-well__tag {
  top: 12px; left: 12px;
  font-size: 9px;
}

/* De generator geeft de <svg> width/height:100% mee met preserveAspectRatio
   "meet"; deze hoogteketen laat het plan binnen de well passen in plaats van
   eronderuit te lopen. */
.plan {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.plan--featured { max-width: 600px; }
.plan svg { width: 100%; height: 100%; display: block; }

.case-featured__body {
  flex: 1 1 360px;
  min-width: 0;
  padding: 44px 40px;
}

.case-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.case-meta__id {
  font: 600 11px/1 var(--mono);
  letter-spacing: .1em;
  color: var(--muted);
}
.case-meta__kind {
  font: 500 11px/1 var(--mono);
  letter-spacing: .1em;
  color: var(--muted);
}

.case-featured__h {
  margin: 0 0 16px;
  font: 800 clamp(26px, 3.2vw, 36px)/1.0 var(--display);
  letter-spacing: -.03em;
}
.case-featured__p {
  margin: 0 0 28px;
  font: 400 16px/1.62 var(--body);
  color: var(--text);
  max-width: 48ch;
  text-wrap: pretty;
}

.case-stats {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  margin-bottom: 30px;
}
.case-stat {
  flex: 1 1 130px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.case-stat + .case-stat {
  padding-left: 22px;
  border-left: 1px solid var(--line);
}
.case-stat__v {
  font: 800 25px/1 var(--display);
  color: var(--ink);
}
.case-stat__l {
  font: 500 10px/1.4 var(--mono);
  letter-spacing: .06em;
  color: var(--muted);
  margin-top: 6px;
}

/* --- register grid ------------------------------------------------------- */
.register {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  border-top: var(--rule) solid var(--ink);
  border-left: var(--rule) solid var(--ink);
}

.reg-card {
  border-right: var(--rule) solid var(--ink);
  border-bottom: var(--rule) solid var(--ink);
  background: rgba(255, 255, 255, .4);
  display: flex;
  flex-direction: column;
}

.reg-card__body {
  padding: 22px 24px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.reg-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.reg-card__meta .case-meta__kind { font-size: 10px; }
.reg-card__h {
  margin: 0 0 8px;
  font: 700 22px/1.05 var(--display);
  letter-spacing: -.02em;
}
.reg-card__p {
  margin: 0;
  font: 400 14px/1.55 var(--body);
  color: var(--text-2);
}

.reg-card--cta {
  background: var(--panel);
  color: #fff;
  justify-content: center;
  padding: 30px 26px;
  min-height: 200px;
}
.reg-card__label {
  font: 500 10px/1 var(--mono);
  letter-spacing: .12em;
  color: var(--on-dark-mono);
  margin-bottom: 14px;
}
.reg-card--cta h3 {
  margin: 0 0 16px;
  font: 700 22px/1.1 var(--display);
  letter-spacing: -.02em;
}

/* ==========================================================================
   FIG.06 — contact
   ========================================================================== */
.contact__h2 {
  margin: 0 0 30px;
  font: 900 clamp(34px, 5vw, 76px)/0.94 var(--display);
  letter-spacing: -.035em;
  max-width: 16ch;
}

/* ==========================================================================
   Titleblock + colophon
   ========================================================================== */
.titleblock {
  display: flex;
  flex-wrap: wrap;
  border-top: var(--rule) solid var(--navy);
  font: 500 11px/1 var(--mono);
  letter-spacing: .06em;
}
.titleblock__cell {
  flex: var(--cell-flex, 1 1 160px);
  padding: 15px 24px;
  border-right: 1px solid rgba(92, 99, 107, .2);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
}
.titleblock__cell:last-child { border-right: 0; }
.titleblock__cell--project { flex: 2 1 220px; }
.titleblock__cell--doc     { flex: 1 1 120px; }
.titleblock__cell--rev     { flex: 0 1 100px; }
.titleblock__cell--sheet   { flex: 0 1 110px; }
.titleblock__k { color: var(--muted); }
.titleblock__v { color: var(--ink); }
.titleblock__v--gold { color: var(--gold-deep); }

.colophon {
  max-width: 1340px;
  margin: 0 auto;
  padding: 22px 30px 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.colophon__brand {
  display: flex;
  align-items: center;
  gap: 13px;
}
.colophon__mark {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.colophon__name {
  font: 800 17px/1 var(--display);
  letter-spacing: -.03em;
  color: var(--navy);
}
.colophon__wave { width: 82px; height: auto; display: block; }
.colophon__note {
  font: 500 10px/1.3 var(--mono);
  letter-spacing: .06em;
  color: var(--muted);
}
.colophon__doc {
  font: 500 10px/1 var(--mono);
  letter-spacing: .08em;
  color: #9a9da4;
}

/* ==========================================================================
   Reduced motion — the sheet is heavily animated; hold it still on request.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .brand__wave path {
    animation: none;
    stroke-dashoffset: 0;
  }
  .ds-rail__signal { display: none; }
  .pulse           { animation: none; opacity: .6; }

  *, *::before, *::after {
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   Subpaginas — Werkwijze / Contact / Case
   Zelfde vel, smallere rail (64px) en ruimere sectiemarge (44px).
   ========================================================================== */
.ds-sheet--sub { grid-template-columns: 64px 1fr; }
.ds-sheet--sub .sect { padding: 30px 44px 60px; }
.ds-sheet--sub .sect--hero { padding: 60px 44px 44px; }

/* Op de subpaginas is het ankerpunt een kale stip in plaats van een kruisdraad. */
.node-dot {
  position: absolute;
  left: 0;
  top: 54px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--navy);
  transform: translateX(-50%);
  box-shadow: 0 0 0 4px var(--paper);
  pointer-events: none;
}
.node-dot--hero  { top: 74px; }
.node-dot--tight { top: 24px; }

.nav__link--active {
  color: var(--navy);
  border-bottom: var(--rule) solid var(--navy);
  padding-bottom: 3px;
}

.titleblock__cell--status { flex: 1 1 160px; }
.titleblock__cell--scale  { flex: 1 1 120px; }

/* ==========================================================================
   Werkwijze
   ========================================================================== */
.wk-hero__h1 {
  margin: 0 0 20px;
  font: 900 clamp(36px, 5.2vw, 80px)/0.92 var(--display);
  letter-spacing: -.035em;
  max-width: 17ch;
  overflow-wrap: break-word;
}
.wk-hero__p {
  margin: 0 0 34px;
  max-width: 60ch;
  font: 400 clamp(15px, 1.4vw, 18px)/1.62 var(--body);
  color: var(--text);
  text-wrap: pretty;
}

/* --- kerncijfers --------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  max-width: 820px;
}
.stat-cell {
  padding: 24px 22px;
  background: rgba(255, 255, 255, .6);
}
.stat-cell--gold { background: var(--gold); }
.stat-cell__v {
  font: 800 46px/1 var(--display);
  letter-spacing: -.03em;
  color: var(--navy);
}
.stat-cell__l {
  margin-top: 10px;
  font: 500 10px/1.5 var(--mono);
  letter-spacing: .09em;
  color: var(--muted);
}
.stat-cell--gold .stat-cell__v { color: var(--on-accent); }
.stat-cell--gold .stat-cell__l { color: rgba(255, 255, 255, .8); }

/* --- rolverdeling -------------------------------------------------------- */
.roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 26px;
}
.role {
  border: var(--rule) solid var(--navy);
  background: rgba(255, 255, 255, .55);
  padding: 30px 28px;
}
.role--machine {
  background-color: var(--panel);
  background-image:
    linear-gradient(rgba(204, 90, 22, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204, 90, 22, .1) 1px, transparent 1px);
  background-size: var(--grid) var(--grid);
  color: #fff;
}
.role__tag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font: 600 11px/1 var(--mono);
  letter-spacing: .12em;
  color: var(--navy);
}
.role--machine .role__tag { color: var(--gold-deep); }
.role__bullet {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--navy);
  flex: none;
}
.role--machine .role__bullet { background: var(--gold); }
.role__h {
  margin: 0 0 16px;
  font: 800 26px/1.1 var(--display);
  letter-spacing: -.02em;
}
.role__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.role__item {
  display: flex;
  gap: 12px;
  font: 400 14px/1.55 var(--body);
  color: var(--text-3);
}
.role--machine .role__item { color: #c8cad0; }
.role__n {
  flex: none;
  color: var(--muted);
  font: 600 12px/1.7 var(--mono);
}
.roles + p {
  margin: 26px 0 0;
  max-width: 64ch;
  font: 400 15px/1.62 var(--body);
  color: var(--text);
  text-wrap: pretty;
}

/* --- vijf stappen -------------------------------------------------------- */
.steps-table {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 0;
  padding: 0;
  list-style: none;
}
.step-row {
  background: rgba(255, 255, 255, .55);
  padding: 30px 28px;
}
.step-row--gold { background: var(--gold); }
.step-row__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}
.step-num {
  flex: none;
  width: 52px;
  height: 52px;
  border: var(--rule) solid var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 14px/1 var(--mono);
  color: var(--navy);
}
.step-row--gold .step-num {
  background: var(--navy);
  color: var(--on-accent);
}
.step-row__main {
  flex: 1 1 320px;
  min-width: 0;
}
.step-row__h {
  margin: 0 0 10px;
  font: 700 22px/1.15 var(--display);
  letter-spacing: -.015em;
}
.step-row__p {
  margin: 0;
  max-width: 58ch;
  font: 400 15px/1.6 var(--body);
  color: var(--text);
  text-wrap: pretty;
}
.step-row--gold .step-row__h { color: var(--on-accent); }
.step-row--gold .step-row__p { color: rgba(255, 255, 255, .85); }
.step-row__aside {
  flex: 0 0 210px;
  border-left: 1px solid rgba(92, 99, 107, .2);
  padding-left: 22px;
}
.step-row--gold .step-row__aside { border-left-color: rgba(255, 255, 255, .35); }
.step-row__k {
  font: 600 10px/1 var(--mono);
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 10px;
}
.step-row--gold .step-row__k { color: rgba(255, 255, 255, .7); }
.step-row__v {
  font: 400 13px/1.5 var(--body);
  color: var(--text-3);
}
.step-row--gold .step-row__v { color: rgba(255, 255, 255, .85); }

/* --- wat de engine wel en niet doet -------------------------------------- */
.engine__h2 {
  margin: 0 0 18px;
  font: 900 clamp(28px, 3.4vw, 50px)/0.98 var(--display);
  letter-spacing: -.03em;
  max-width: 18ch;
}
.engine__p {
  margin: 0 0 24px;
  max-width: 54ch;
  font: 400 16px/1.62 var(--body);
  color: var(--text);
  text-wrap: pretty;
}
.engine-list {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 0;
  padding: 0;
  list-style: none;
}
.engine-row {
  display: flex;
  gap: 14px;
  padding: 15px 18px;
  background: rgba(255, 255, 255, .6);
  font: 400 14px/1.55 var(--body);
  color: var(--text-3);
}
.engine-row__mark {
  flex: none;
  font: 600 13px/1.5 var(--mono);
  color: var(--navy);
}
.engine-row--no { color: #6b6d74; }
.engine-row--no .engine-row__mark { color: var(--muted-2); }

/* --- waarborgen ---------------------------------------------------------- */
.qa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.qa {
  background: rgba(255, 255, 255, .6);
  padding: 28px 26px;
}
.qa--dark {
  background-color: var(--panel);
  background-image:
    linear-gradient(rgba(204, 90, 22, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204, 90, 22, .1) 1px, transparent 1px);
  background-size: var(--grid) var(--grid);
  color: #fff;
}
.qa__k {
  font: 600 10px/1 var(--mono);
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 14px;
}
.qa__h {
  margin: 0 0 10px;
  font: 700 18px/1.25 var(--display);
  letter-spacing: -.01em;
}
.qa__p {
  margin: 0;
  font: 400 14px/1.6 var(--body);
  color: var(--text);
  text-wrap: pretty;
}
.qa--dark .qa__p { color: #b7bac1; }

.wk-cta__h2 {
  margin: 0 0 30px;
  font: 900 clamp(32px, 4.6vw, 70px)/0.94 var(--display);
  letter-spacing: -.035em;
  max-width: 18ch;
  overflow-wrap: break-word;
}
.btn--cta {
  padding: 17px 30px;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .06em;
}
.ulink--plain {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: none;
  border-bottom-color: var(--hairline);
  padding-bottom: 3px;
}
.ulink--plain:hover { color: var(--gold-deep); border-color: var(--gold); }

/* ==========================================================================
   Contact
   ========================================================================== */
.ct-hero__h1 {
  margin: 0 0 18px;
  font: 900 clamp(38px, 5.6vw, 82px)/0.92 var(--display);
  letter-spacing: -.035em;
  max-width: 16ch;
}
.ct-hero__p {
  margin: 0;
  max-width: 54ch;
  font: 400 clamp(15px, 1.4vw, 18px)/1.62 var(--body);
  color: var(--text);
  text-wrap: pretty;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 44px;
  align-items: start;
}

.form-card {
  border: var(--rule) solid var(--ink);
  background: rgba(255, 255, 255, .55);
  padding: 32px 30px;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field { display: block; }
.field + .field,
.field-row + .field { margin-top: 18px; }
/* Binnen .field-row regelt de grid-gap de tussenruimte al; zonder deze reset
   duwt de sibling-marge hierboven het tweede veld 18px omlaag. */
.field-row > .field + .field { margin-top: 0; }
.field__label {
  display: block;
  font: 600 10px/1 var(--mono);
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 8px;
}
.ds-field {
  width: 100%;
  padding: 12px 13px;
  font: 400 15px/1.3 var(--body);
  color: var(--ink);
  background: #fff;
  border: var(--rule) solid #cfd3da;
  border-radius: 0;
  transition: border-color .15s;
}
.ds-field::placeholder { color: var(--muted-2); }
.ds-field:focus {
  outline: none;
  border-color: var(--gold);
}
textarea.ds-field {
  line-height: 1.5;
  resize: vertical;
}

/* Het native <select> negeert de line-height uit de font-shorthand en rendert
   1,5px hoger dan de inputs, met een eigen pijl. Uitzetten en zelf tekenen,
   zodat elk veld dezelfde rechthoek is. */
select.ds-field {
  appearance: none;
  -webkit-appearance: none;
  line-height: 1.3;
  padding-right: 38px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2380828b' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 11px 8px;
}
select.ds-field::-ms-expand { display: none; }

.form-error {
  margin-top: 18px;
  padding: 11px 14px;
  background: #fbe9e8;
  border: 1px solid #B3261E;
  font: 500 12px/1.4 var(--mono);
  color: #B3261E;
}
.btn--submit {
  margin-top: 18px;
  width: 100%;
  justify-content: center;
  border: none;
  cursor: pointer;
  padding: 16px 28px;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .06em;
}
.btn--submit[disabled] { opacity: .7; cursor: progress; }
.form-note {
  margin: 14px 0 0;
  font: 400 11px/1.5 var(--mono);
  color: var(--muted-2);
}
.form-note a { color: var(--gold-deep); }

.form-done__check {
  width: 46px;
  height: 46px;
  border: 2px solid #1E9E5A;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font: 700 22px/1 var(--body);
  color: #1E9E5A;
}
.form-done__h {
  margin: 0 0 12px;
  font: 800 26px/1.05 var(--display);
  letter-spacing: -.02em;
  color: var(--ink);
}
.form-done__p {
  margin: 0 0 24px;
  font: 400 15px/1.6 var(--body);
  color: var(--text);
  max-width: 42ch;
}
.btn--outline {
  padding: 13px 24px;
  background: transparent;
  color: var(--ink);
  border: var(--rule) solid var(--ink);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.btn--outline:hover {
  border-color: var(--gold);
  color: var(--gold-deep);
}

.info {
  display: flex;
  flex-direction: column;
  border-top: var(--rule) solid var(--ink);
}
.info__block {
  padding: 24px 4px;
  border-bottom: 1px solid var(--line);
}
.info__block:last-child { border-bottom: 0; }
.info__k {
  font: 600 10px/1 var(--mono);
  letter-spacing: .1em;
  color: var(--gold-deep);
  margin-bottom: 12px;
}
.info__mail {
  font: 700 clamp(18px, 2vw, 22px)/1.1 var(--display);
  letter-spacing: -.02em;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 3px;
  transition: color .16s;
}
.info__mail:hover { color: var(--gold-deep); }
.info__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.info__list li {
  display: flex;
  gap: 12px;
  font: 400 15px/1.5 var(--body);
  color: var(--text);
}
.info__n {
  font: 600 11px/1.6 var(--mono);
  color: var(--navy);
  flex: none;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  font: 500 11px/1 var(--mono);
  letter-spacing: .04em;
  color: var(--navy);
  border: 1px solid var(--line-hard);
  padding: 7px 11px;
}

/* ==========================================================================
   Case
   ========================================================================== */
.case-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 11px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 26px;
  transition: color .16s;
}
.case-back:hover { color: var(--gold-deep); }

.sect--case-hero { padding: 46px 44px 30px; }
.sect--case-shot { padding: 0 44px 16px; }
.sect--case-body { padding: 36px 44px 30px; }
.sect--case-cta  { padding: 6px 44px 60px; }

.case-hero__h1 {
  margin: 0 0 16px;
  font: 900 clamp(32px, 4.6vw, 64px)/0.98 var(--display);
  letter-spacing: -.035em;
  max-width: 20ch;
}
.case-hero__sub {
  margin: 0;
  font: 500 clamp(16px, 1.8vw, 21px)/1.4 var(--body);
  color: var(--gold-deep);
  max-width: 46ch;
}

.plan-well--case {
  border: var(--rule) solid var(--ink);
  min-height: 340px;
  padding: 30px 26px 20px;
}

.case-body { max-width: 760px; }
.case-sect { margin: 0 0 40px; }
.case-sect__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
}
.case-sect__n {
  font: 600 11px/1 var(--mono);
  letter-spacing: .12em;
  color: var(--gold-deep);
}
.case-sect__rule {
  flex: 1;
  height: 1px;
  background: var(--line);
}
.case-sect__label {
  font: 500 11px/1 var(--mono);
  letter-spacing: .12em;
  color: var(--navy);
}
.case-sect p {
  margin: 0 0 16px;
  font: 400 16px/1.65 var(--body);
  color: #34363c;
  max-width: 64ch;
  text-wrap: pretty;
}
.case-outro {
  margin: 8px 0 0;
  font: 500 18px/1.5 var(--body);
  color: var(--ink);
  max-width: 52ch;
  text-wrap: pretty;
}

.case-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding-top: 30px;
  border-top: var(--rule) solid var(--ink);
}
.ulink--case-back {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--ink);
  border-bottom-color: var(--hairline);
  padding-bottom: 5px;
}
.ulink--case-back:hover { color: var(--gold-deep); border-color: var(--gold); }

/* ==========================================================================
   Narrow viewports
   Alle breekpunten staan hier bij elkaar, ná de componentregels, zodat ze in
   de cascade altijd winnen. 940: het uitgelichte project stapelt; 960: de
   "je krijgt"-kolom van de stappentabel zakt onder de tekst; 760: de rail
   wordt smal en de navigatie gaat achter de menuknop; 520 en 400: telefoons.
   ========================================================================== */

/* --- gestapelde composities ---------------------------------------------- */
@media (max-width: 940px) {
  .plan-well--featured,
  .case-featured__body { flex-basis: 100%; }
  .plan-well--featured {
    border-right: 0;
    border-bottom: 1px solid var(--line-mid);
  }
}

@media (max-width: 960px) {
  .step-row__aside {
    flex: 1 1 100%;
    border-left: 0;
    border-top: 1px solid rgba(92, 99, 107, .2);
    padding-left: 0;
    padding-top: 18px;
  }
}

/* --- assemblagestappen: 3 en 2 per rij ----------------------------------- */
@media (max-width: 1240px) and (min-width: 901px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step:nth-child(3n) { padding-right: 0; }
  .step:nth-child(3n)::before { display: none; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(2n) { padding-right: 0; }
  .step:nth-child(2n)::before { display: none; }
}

/* --- tablet en smaller --------------------------------------------------- */
@media (max-width: 760px) {
  /* header + menu */
  .site-header__inner { padding: 12px 18px; gap: 16px; }
  .nav { gap: 16px; }
  .nav__toggle { display: inline-flex; }
  .nav__links {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 18px 16px;
    background: var(--paper);
    border-bottom: var(--rule) solid var(--navy);
    box-shadow: 0 24px 32px -24px rgba(47, 52, 58, .45);
  }
  .site-header.is-open .nav__links { display: flex; }
  .nav__link {
    padding: 16px 0;
    border-top: 1px solid var(--line);
    font-size: 13px;
  }
  .nav__link--active {
    border-bottom: 0;
    padding-bottom: 16px;
    color: var(--gold-deep);
  }

  /* het vel */
  .ds-outer { padding-left: 14px; padding-right: 14px; }
  .ds-sheet,
  .ds-sheet--sub { grid-template-columns: 30px 1fr; }
  .ds-rail-label { display: none; }
  .sect,
  .ds-sheet--sub .sect,
  .ds-sheet--sub .sect--hero { padding-left: 18px; padding-right: 18px; }
  .sect--hero,
  .ds-sheet--sub .sect--hero { padding-top: 44px; }
  .sect--list { padding-top: 60px; }
  .sect__h2 { margin-bottom: 30px; }
  .fig__name { line-height: 1.4; }

  /* panelen */
  .ds-panel--gold,
  .ds-panel--dark { padding: 44px 22px; }
  .statement-body { gap: 28px; margin-top: 30px; }
  .stats { gap: 20px 28px; }

  /* assemblagestappen: verticale lijst met de stippellijn links */
  .steps { grid-template-columns: 1fr; row-gap: 0; }
  .step {
    display: grid;
    grid-template-columns: 46px 1fr;
    column-gap: 18px;
    padding: 0 0 28px;
  }
  .step:last-child { padding-bottom: 0; }
  .step::before {
    display: block;
    left: 22px; right: auto;
    top: 0; bottom: 0;
    width: 1px;
    height: auto;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .35) 0, rgba(255, 255, 255, .35) 6px, transparent 6px, transparent 12px);
  }
  .step:last-child::before { display: none; }
  .step__badge { grid-row: 1 / span 2; margin-bottom: 0; }
  .step__h { grid-column: 2; margin-top: 12px; }
  .step__p { grid-column: 2; max-width: none; }

  /* onderdelenlijst */
  .list__n { width: 56px; font-size: 32px; }

  /* specrow: twee kolommen met een lijn tussen de rijen */
  .specrow { grid-template-columns: 1fr 1fr; }
  .specrow__item { border-bottom: 1px solid var(--line-soft); }
  .specrow__item:nth-child(2n) { border-right: 0; }
  .specrow__item:nth-last-child(-n + 2) { border-bottom: 0; }

  /* projectregister */
  .case-featured__body { padding: 32px 24px; }
  .plan-well--featured { padding: 22px 18px 16px; min-height: 300px; }

  /* werkwijze */
  .roles { gap: 18px; }
  .role,
  .step-row,
  .qa,
  .form-card { padding-left: 22px; padding-right: 22px; }
  .step-row__grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px 18px;
  }
  .step-num { width: 44px; height: 44px; }
  .step-row__main { grid-column: 2; }
  .step-row__aside { grid-column: 1 / -1; }

  /* contact */
  .field-row { grid-template-columns: 1fr; }
  .contact-grid { gap: 32px; }
  /* 16px voorkomt dat iOS inzoomt zodra een veld focus krijgt. */
  .ds-field { font-size: 16px; }

  /* case */
  .plan-well--case { min-height: 260px; padding: 22px 16px 14px; }
}

/* --- telefoons ----------------------------------------------------------- */
@media (max-width: 520px) {
  .site-header__inner { padding: 12px 16px; }
  .brand__tag { display: none; }
  .btn--nav { padding: 10px 14px; }
  .nav__links { padding-left: 16px; padding-right: 16px; }

  .ds-outer { padding-left: 10px; padding-right: 10px; }
  .sect,
  .ds-sheet--sub .sect,
  .ds-sheet--sub .sect--hero { padding-left: 16px; padding-right: 16px; }
  .ds-panel--gold,
  .ds-panel--dark { padding: 36px 18px; }

  /* knoppen over de volle breedte */
  .actions .btn,
  .case-cta .btn { width: 100%; justify-content: center; }

  /* onderdelenlijst: nummer links, tekst en tag rechts */
  .list__row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 16px;
    align-items: start;
    padding: 22px 4px;
  }
  .list__row:hover { padding-left: 12px; }
  .list__n { width: auto; font-size: 28px; line-height: 1.1; }
  .list__body { grid-column: 2; min-width: 0; }
  .list__h { font-size: 21px; }
  .tag { grid-column: 2; }

  .specrow { grid-template-columns: 1fr; }
  .specrow__item { border-right: 0; }
  .specrow__item:nth-last-child(-n + 2) { border-bottom: 1px solid var(--line-soft); }
  .specrow__item:last-child { border-bottom: 0; }

  .stat__v { font-size: 42px; }
  .stat-cell__v { font-size: 38px; }
  .plan-well--featured { min-height: 240px; }
  .plan-well--case { min-height: 220px; }
  .case-featured__body { padding: 26px 18px; }
  .case-stat { flex-basis: 100%; }
  .case-stat + .case-stat { padding-left: 0; border-left: 0; }
  .reg-card__body { padding: 20px 18px 24px; }
  .role,
  .step-row,
  .qa,
  .form-card { padding: 24px 18px; }

  /* titelblok: twee cellen per rij */
  .titleblock__cell {
    flex: 1 1 50%;
    padding: 13px 16px;
    line-height: 1.4;
    border-bottom: 1px solid rgba(92, 99, 107, .2);
  }
  .titleblock__cell:nth-child(2n) { border-right: 0; }

  .colophon { padding: 20px 16px 36px; }
}

@media (max-width: 400px) {
  .brand__name { font-size: 17px; }
  .brand__wave { width: 72px; }
  .nav__toggle-label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}