/* DCP Global v2 · iframe: geen vh/fixed */

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { list-style: none; padding: 0; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: 2rem; }
[hidden] { display: none; }

/* Tokens */
:root {
  --c-bg: #E8E6E0;
  --c-sheet: #F5F4F0;
  --c-bg-2: #DAD7CF;
  --c-ink: #1E2327;
  --c-ink-2: #4B5156;
  --c-line: #B4B0A6;
  --c-line-strong: #807C73;
  --c-ochre: #CC9330;
  --c-ochre-hover: #B98225;
  --c-ochre-text: #7A4F0A;
  --c-ochre-wash: #EFE2C4;
  --c-dark: #1B1F22;
  --c-dark-line: #3A4045;
  --c-on-dark: #ECEAE4;
  --c-on-dark-2: #B4B0A6;
  --c-ochre-on-dark: #DDA84A;
  --c-error: #A3261B;
  --c-success: #2F6B3A;

  --f-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-0: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --step-1: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem);
  --step-2: clamp(1.375rem, 1.22rem + 0.7vw, 1.8125rem);
  --step-3: clamp(1.75rem, 1.45rem + 1.35vw, 2.5rem);
  --step-4: clamp(2.125rem, 1.6rem + 2.4vw, 3.5rem);

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --section-y: clamp(3.5rem, 2.5rem + 4.5vw, 7rem);
  --gutter: clamp(1rem, 0.6rem + 1.8vw, 2.5rem);
  --container: 75rem;
  --measure: 36rem;
  --overlap: clamp(3rem, 1rem + 14.5vw, 12rem);

  --tap: 2.75rem;
  --radius: 2px;
  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);
  --dur: 180ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-in: 600ms;
  --dur-draw: 800ms;
  --dur-hover: 150ms;
  --bleed: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--container) - 2 * var(--gutter)) / 2)));
  --ink-sq: linear-gradient(var(--c-ink), var(--c-ink));
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 11 11 1' stroke='%231E2327' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* Base */
body { background: var(--c-bg); color: var(--c-ink); font: 400 var(--step-0)/1.6 var(--f-serif); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
main { display: block; overflow-x: clip; }
h1, h2, h3, h4 { font-family: var(--f-sans); font-weight: 700; color: inherit; text-wrap: balance; }
h1 { font-size: var(--step-4); line-height: 1.04; letter-spacing: -0.022em; }
h2 { font-size: var(--step-3); line-height: 1.1; letter-spacing: -0.016em; }
h3 { font-size: var(--step-2); line-height: 1.2; letter-spacing: -0.01em; }
p, li, dd { text-wrap: pretty; }
strong { font-weight: 600; }
a { color: var(--c-ochre-text); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }
::selection { background: var(--c-ochre-wash); color: var(--c-ink); }
address { font-style: normal; }

/* Layout */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.narrow > * { max-width: 48rem; }
.section { padding-block: var(--section-y); }
.section--beton { background: var(--c-bg-2); }
.section--sheet { background: var(--c-sheet); }
.sec-head { max-width: 48rem; margin-bottom: var(--sp-7); }
.sec-head .pl { margin-bottom: var(--sp-4); }
.lead { font-size: var(--step-1); line-height: 1.5; color: var(--c-ink-2); max-width: var(--measure); }
.sec-head .lead, .sec-head .more { margin-top: var(--sp-4); }
.sec-head .flow { margin-top: var(--sp-5); }
.measure { max-width: var(--measure); }
.flow > * + * { margin-top: var(--sp-4); }
.split { display: grid; gap: var(--sp-6); }
.split > .sec-head { margin-bottom: 0; }

/* Skip-link */
.skip { position: absolute; left: var(--sp-4); top: -6rem; z-index: 30; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-5); background: var(--c-ink); color: var(--c-sheet); font: 600 1rem/1 var(--f-sans); text-decoration: none; }
.skip:focus { top: var(--sp-4); }

/* Plan-label */
.pl, .cote-label, .zone-meta, .bestek-head, .staat-head, .tb-cell dt, .area dt, .towns-k, .note-k, .form legend { font: 600 var(--step--1)/1.25 var(--f-sans); font-stretch: 118%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-2); }
.pl { display: flex; align-items: center; gap: var(--sp-3); }
.pl::after { content: ""; flex: 1 1 auto; max-width: 10rem; height: 1px; background: var(--c-line-strong); }
.pl-t { min-width: 0; }
.pl-b { flex: none; display: inline-grid; place-items: center; width: 1.875rem; height: 1.875rem; border: 1px solid var(--c-ink); border-radius: 50%; color: var(--c-ink); font-size: 0.8125rem; font-stretch: 100%; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.on-dark .pl { color: var(--c-on-dark-2); }
.on-dark .pl::after { background: var(--c-dark-line); }

/* Knoppen en links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 3rem; padding: 0 var(--sp-5); border: 1px solid transparent; border-radius: var(--radius); font: 600 1rem/1.2 var(--f-sans); font-stretch: 106%; letter-spacing: 0.01em; text-align: center; text-decoration: none; transition: background-color 120ms var(--ease), color 120ms var(--ease), border-color 120ms var(--ease); }
.btn-primary { background: var(--c-ochre); border-color: var(--c-ochre); color: var(--c-ink); }
.btn-primary:hover { background: var(--c-ochre-hover); border-color: var(--c-ochre-hover); }
.btn-ghost { border-color: var(--c-ink); color: var(--c-ink); }
.btn-ghost:hover { background: var(--c-ink); color: var(--c-sheet); }
.btn-light { border-color: var(--c-on-dark); color: var(--c-on-dark); }
.btn-light:hover { background: var(--c-on-dark); color: var(--c-dark); }
.btn-s { min-height: var(--tap); padding: 0 var(--sp-4); font-size: 0.9375rem; }
.on-dark .btn-primary:focus-visible, .on-dark .btn-light:focus-visible { outline-color: var(--c-ochre-on-dark); }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

.more { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); font: 600 1rem/1.3 var(--f-sans); color: var(--c-ochre-text); text-underline-offset: 0.3em; }
.more svg { width: 1.125rem; height: 1.125rem; flex: none; transition: transform var(--dur-hover) var(--ease-out); }
.more:hover svg, .more:focus-visible svg { transform: translateX(4px); }
.on-dark a:not(.btn) { color: var(--c-ochre-on-dark); }

/* Header */
.site-header { position: relative; z-index: 10; background: var(--c-bg); border-bottom: 1px solid var(--c-ink); }
.header-bar { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sp-4); padding-block: var(--sp-3); }
.brand { display: inline-flex; align-items: center; gap: 0.625rem; min-height: var(--tap); margin-right: auto; color: var(--c-ink); text-decoration: none; }
.brand-mark { width: 1.875rem; height: 1.875rem; flex: none; }
.brand-word { display: flex; align-items: center; gap: 0.5rem; font: 700 1.0625rem/1 var(--f-sans); font-stretch: 118%; letter-spacing: 0.07em; text-transform: uppercase; }
.brand-word span { padding-left: 0.5rem; border-left: 1px solid var(--c-ink); font-weight: 500; color: var(--c-ink-2); }
.nav-list { display: flex; }
.nav-link { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-3); font: 600 1rem/1.1 var(--f-sans); color: var(--c-ink); text-decoration: none; }
.nav-link:hover { color: var(--c-ochre-text); }
.nav-link[aria-current] { box-shadow: inset 0 -2px 0 var(--c-ochre); }
.has-sub { position: relative; display: flex; align-items: center; }
.sub-toggle { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); color: var(--c-ink); }
.sub-toggle svg { width: 1rem; height: 1rem; transition: transform var(--dur) var(--ease); }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.sub a { display: flex; align-items: center; gap: 0.75rem; min-height: var(--tap); padding: 0 var(--sp-4); color: var(--c-ink); font: 500 1rem/1.2 var(--f-sans); text-decoration: none; }
.sub a:hover { background: var(--c-bg); }
.sub a[aria-current] { font-weight: 700; }
.sub .sw { width: 1.5rem; height: 1rem; border: 1px solid var(--c-ink); flex: none; }
.sub-all { border-top: 1px solid var(--c-line); margin-top: var(--sp-2); padding-top: var(--sp-2); }
.nav-extra { display: none; }
.header-actions { display: flex; align-items: center; gap: var(--sp-2); }
.cta-full { display: none; }
.menu-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: var(--tap); min-height: var(--tap); padding: 0 0.75rem; border: 1px solid var(--c-ink); border-radius: var(--radius); font: 600 0.9375rem/1 var(--f-sans); }
.menu-icon { position: relative; width: 1.125rem; height: 0.75rem; flex: none; }
.menu-icon::before, .menu-icon::after, .menu-icon span { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: var(--c-ink); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.menu-icon::before { top: 0; }
.menu-icon span { top: 5px; }
.menu-icon::after { top: 10px; }
.menu-btn[aria-expanded="true"] .menu-icon::before { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-icon span { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-icon::after { transform: translateY(-5px) rotate(-45deg); }

/* Figuren */
.fig { position: relative; background: var(--c-bg-2); }
.fig picture, .fig img { width: 100%; height: 100%; }
.fig img { object-fit: cover; }
.fig-tag { position: absolute; left: 0; bottom: 0; padding: 0.4375rem 0.75rem; background: var(--c-sheet); border-top: 1px solid var(--c-ink); border-right: 1px solid var(--c-ink); color: var(--c-ink-2); font: 500 0.8125rem/1.2 var(--f-sans); font-stretch: 110%; letter-spacing: 0.03em; }
.band .fig-tag { top: 0; bottom: auto; border-top: 0; border-bottom: 1px solid var(--c-ink); }
.brick .fig-tag { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--c-ink); }
.ratio-3-2 { aspect-ratio: 3 / 2; }

/* Hoekmerken */
.plan-sheet, .tb, .titelblad, .bestek { position: relative; }
.plan-sheet::after, .tb::after, .titelblad::after, .bestek::after { content: ""; position: absolute; inset: -2px; pointer-events: none; background: var(--ink-sq) left top / 5px 5px no-repeat, var(--ink-sq) right top / 5px 5px no-repeat, var(--ink-sq) left bottom / 5px 5px no-repeat, var(--ink-sq) right bottom / 5px 5px no-repeat; }

/* Titelblad */
.band { width: 100%; }
.hero-band, .ph-band { aspect-ratio: 4 / 3; }
.hero-band { max-height: 34rem; }
.hero-band img { object-position: 62% 55%; }
.ph-band img { object-position: var(--op, 50% 50%); }
.titelblad { --pad: clamp(1.25rem, 0.75rem + 2vw, 2.5rem); padding: var(--pad); background: var(--c-sheet); border: 1px solid var(--c-ink); }
.band + .container .titelblad { margin-top: calc(-1 * var(--overlap)); }
.titelblad h1 { margin-top: var(--sp-4); font-size: clamp(1.75rem, 1.2rem + 2.9vw, 3.25rem); }
.titelblad .lead { margin-top: var(--sp-3); max-width: 34rem; }
.titelblad .actions { margin-top: var(--sp-4); }
.titelblad .crumbs { margin: calc(-1 * var(--sp-3)) 0 var(--sp-3); }
.l1, .l2 { display: block; }
.hero { padding-bottom: var(--sp-8); }
.hero h1 { font-size: clamp(1.6875rem, 0.95rem + 3.6vw, 3.25rem); line-height: 1.02; }
.tb-row { display: grid; gap: 1px; margin: var(--sp-6) calc(-1 * var(--pad)) calc(-1 * var(--pad)); background: var(--c-ink); border-top: 1px solid var(--c-ink); }
.tb-row li { display: flex; align-items: center; gap: 0.75rem; padding: var(--sp-3) var(--pad); background: var(--c-sheet); font: 600 1rem/1.35 var(--f-sans); }
.tb-row li::before, .towns li::before, .trades li::before { content: ""; flex: none; width: 0.625rem; height: 0.625rem; background: var(--c-ochre); }

/* Paginakop */
.page-head { padding-bottom: var(--sp-8); }
.page-head--plain { padding-top: var(--sp-6); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); font: 500 0.875rem/1.3 var(--f-sans); color: var(--c-ink-2); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.crumbs li + li::before { content: "/"; color: var(--c-line-strong); }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--c-ink-2); }
.crumbs [aria-current] { color: var(--c-ink); }

/* Diensten + doorsnede */
.ds-wrap { display: grid; gap: var(--sp-7); }
.plan-sheet { background: var(--c-sheet); border: 1px solid var(--c-ink); padding: var(--sp-2); }
.plan-sheet svg { width: 100%; height: auto; }
.plan-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin: var(--sp-3) var(--sp-2) 0; padding-top: var(--sp-3); border-top: 1px solid var(--c-ink); font: 600 0.8125rem/1.3 var(--f-sans); font-stretch: 112%; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-2); }
.plan-cap span + span { font-weight: 500; letter-spacing: 0.03em; text-transform: none; }
.ds-groups { border-top: 1px solid var(--c-ink); }
.ds-group { --gp: var(--sp-5); position: relative; display: grid; padding: var(--gp) 0 var(--gp) 2.25rem; border-bottom: 1px solid var(--c-line-strong); }
.ds-band { position: absolute; left: 0; top: var(--gp); width: 0.75rem; height: calc(100% - 2 * var(--gp)); border: 1px solid var(--c-ink); }
.ds-group h3 { margin-top: var(--sp-2); }
.ds-group > p:not(.bay-n) { margin-top: var(--sp-2); color: var(--c-ink-2); }
.ds-refs { display: flex; flex-direction: column; margin-top: var(--sp-2); }
.ds-refs a { display: inline-flex; align-items: center; gap: 0.625rem; min-height: var(--tap); color: var(--c-ink); font: 500 0.9375rem/1.3 var(--f-sans); text-decoration: none; }
.ds-refs a:hover { color: var(--c-ochre-text); text-decoration: underline; }
.ds-refs .num { width: 1.75rem; height: 1.75rem; font-size: 0.8125rem; }
.ds-foot { display: grid; gap: var(--sp-4); align-content: start; }
.ds-coord { display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--sp-4); align-items: start; }
.ds-coord strong { display: block; font: 600 1.0625rem/1.3 var(--f-sans); }
.ds-foot p { color: var(--c-ink-2); font-size: 1rem; }
.num { display: inline-grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border: 1px solid var(--c-ink); border-radius: 50%; background: var(--c-sheet); color: var(--c-ink); font: 600 0.9375rem/1 var(--f-sans); font-variant-numeric: tabular-nums; }
.num--dash { border-style: dashed; border-color: var(--c-ochre-text); }
.bay-n { font: 600 var(--step--1)/1 var(--f-sans); font-stretch: 118%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
/* Legende → doorsnede */
.ds-co { transition: opacity var(--dur-hover) var(--ease-out); }
.ds-co path { stroke: var(--lead, #1E2327); stroke-width: var(--lw, 1.1); transition: stroke var(--dur-hover) var(--ease-out); }
.ds-co .ds-bub { fill: var(--bub, #F5F4F0); transition: fill var(--dur-hover) var(--ease-out); }
.ds-wrap:has([data-s="1"]:is(:hover, :focus-within)) .ds-co:not([data-s="1"]),
.ds-wrap:has([data-s="2"]:is(:hover, :focus-within)) .ds-co:not([data-s="2"]),
.ds-wrap:has([data-s="3"]:is(:hover, :focus-within)) .ds-co:not([data-s="3"]),
.ds-wrap:has([data-s="4"]:is(:hover, :focus-within)) .ds-co:not([data-s="4"]) { opacity: 0.35; }
.ds-wrap:has([data-s="1"]:is(:hover, :focus-within)) .ds-co[data-s="1"],
.ds-wrap:has([data-s="2"]:is(:hover, :focus-within)) .ds-co[data-s="2"],
.ds-wrap:has([data-s="3"]:is(:hover, :focus-within)) .ds-co[data-s="3"],
.ds-wrap:has([data-s="4"]:is(:hover, :focus-within)) .ds-co[data-s="4"] { --bub: var(--c-ochre); --lead: var(--c-ochre-text); --lw: 2; }

/* Staat */
.staat-grid { display: grid; gap: var(--sp-6); }
.staat-side .sec-head { margin-bottom: var(--sp-6); }
.staat-head { display: none; }
.staat li { display: grid; gap: var(--sp-2); padding-block: var(--sp-5); border-bottom: 1px solid var(--c-line-strong); }
.staat li:first-child { border-top: 1px solid var(--c-ink); }
.staat h3 { font-size: var(--step-1); line-height: 1.25; }
.staat .ref { display: block; margin-bottom: var(--sp-1); font: 600 0.8125rem/1 var(--f-sans); font-stretch: 118%; letter-spacing: 0.08em; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.staat p { color: var(--c-ink-2); }
.staat .more, .ds-group .more, .ds-foot .more { justify-self: start; }

/* Werkwijze */
.cote-label { margin-bottom: var(--sp-6); }
.steps { position: relative; display: grid; gap: var(--sp-6); padding-left: 4.25rem; }
.steps::before { content: ""; position: absolute; left: calc(1.5rem - 6px); top: -1.25rem; bottom: 0; width: 12px; background: var(--tick) center top / 12px 12px no-repeat, var(--tick) center bottom / 12px 12px no-repeat, var(--ink-sq) center / 1px 100% no-repeat; transform-origin: top; }
.step { position: relative; }
.step-n { position: absolute; left: -4.25rem; top: -0.5rem; display: inline-grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--c-ink); border-radius: 50%; background: var(--c-bg-2); font: 700 var(--step-2)/1 var(--f-sans); font-stretch: 125%; font-variant-numeric: tabular-nums; }
.step h3 { font-size: var(--step-1); line-height: 1.25; }
.step p { margin-top: var(--sp-2); color: var(--c-ink-2); }

/* Bestek */
.bestek { background: var(--c-sheet); border: 1px solid var(--c-ink); }
.bestek-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-1) var(--sp-4); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--c-ink); }
.bestek-list { display: grid; }
.bestek-list li { padding: var(--sp-5); border-bottom: 1px solid var(--c-line); }
.bestek-list li:last-child { border-bottom: 0; }
.art { font: 600 0.8125rem/1 var(--f-sans); font-stretch: 118%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ochre-text); font-variant-numeric: tabular-nums; }
.bestek-list h3 { margin-top: var(--sp-2); font-size: var(--step-1); line-height: 1.25; }
.bestek-list p { margin-top: var(--sp-2); color: var(--c-ink-2); }
.brick { height: clamp(16rem, 10rem + 14vw, 28rem); }
.bestek--on-band { margin-top: clamp(-12rem, -6rem - 6vw, -4rem); }

.area > div { display: grid; gap: var(--sp-1); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-line); }
.area > div:last-child { border-bottom: 0; }
.area dd { font: 600 1.0625rem/1.45 var(--f-sans); }
.area > div:last-child dd { font: 400 1rem/1.5 var(--f-serif); color: var(--c-ink-2); }

/* Werkgebied */
.zone-poster { margin-bottom: var(--sp-7); border-bottom: 1px solid var(--c-ink); }
.zone-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-1) var(--sp-4); font-variant-numeric: tabular-nums; }
.zone-word { margin-top: var(--sp-2); font: 700 clamp(3.5rem, 18.4vw - 0.2rem, 14.5rem)/0.84 var(--f-sans); font-stretch: 125%; letter-spacing: -0.02em; text-transform: uppercase; white-space: nowrap; }
.map-grid { display: grid; gap: var(--sp-6); align-items: start; }
.map-text .sec-head { margin-bottom: var(--sp-5); }
.towns, .trades { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin-top: var(--sp-5); color: var(--c-ink-2); font: 500 0.9375rem/1.5 var(--f-sans); }
.towns-k { margin-top: var(--sp-5); }
.towns-k + .towns { margin-top: var(--sp-2); }
.towns li, .trades li { display: flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }

/* Titelhoek */
.tb { background: var(--c-sheet); border: 1px solid var(--c-ink); }
.tb-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--c-ink); }
.tb-cell { background: var(--c-sheet); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.tb-cell dd { margin-top: var(--sp-1); font: 600 1.0625rem/1.35 var(--f-sans); overflow-wrap: anywhere; }
.tb-contact dd a { display: inline-block; padding-block: calc((var(--tap) - 1.35em) / 2); margin-block: calc((var(--tap) - 1.35em) / -2); }
.tb-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-ink); }
.tb-foot .brand-mark { width: 1.5rem; height: 1.5rem; }

/* FAQ */
.faq-grid { display: grid; }
.faq-grid > .sec-head { margin-bottom: var(--sp-6); }
.faq-more { margin-top: var(--sp-6); }
.faq-more p { color: var(--c-ink-2); }
.faq { border-top: 1px solid var(--c-ink); }
.faq-item { border-bottom: 1px solid var(--c-line-strong); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 3.5rem; padding-block: var(--sp-4); font: 600 var(--step-1)/1.3 var(--f-sans); cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-mark { position: relative; flex: none; width: 1.75rem; height: 1.75rem; border: 1px solid var(--c-ink); border-radius: 50%; }
.faq-mark::before, .faq-mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.75rem; height: 1.5px; background: var(--c-ink); transform: translate(-50%, -50%); }
.faq-mark::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform var(--dur) var(--ease); }
.faq-item[open] .faq-mark::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-a { padding-bottom: var(--sp-5); max-width: 42rem; color: var(--c-ink-2); }
.faq-a p + p { margin-top: var(--sp-3); }

/* CTA-band */
.cta { background: var(--c-dark); color: var(--c-on-dark); }
.cta-grid { display: grid; gap: var(--sp-6); padding-block: var(--section-y); }
.cta h2 { margin-top: var(--sp-4); max-width: 20ch; }
.cta p.lead { margin-top: var(--sp-4); color: var(--c-on-dark-2); }
.cta-fig { aspect-ratio: 3 / 2; }
.cta .fig-tag { background: var(--c-dark); color: var(--c-on-dark-2); border-color: var(--c-dark-line); }
.cta--simple .cta-grid { align-items: end; }
.cta--simple .actions { margin-top: 0; }

/* Footer */
.site-footer { background: var(--c-dark); color: var(--c-on-dark-2); border-top: 1px solid var(--c-dark-line); font: 500 1rem/1.5 var(--f-sans); }
.site-footer a:not(.btn) { color: var(--c-on-dark); text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--c-ochre-on-dark); text-decoration: underline; }
.site-footer :focus-visible { outline-color: var(--c-ochre-on-dark); }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-5); padding-block: var(--sp-8) var(--sp-7); }
.footer-brand, .footer-col--wide { grid-column: 1 / -1; }
.footer-brand .brand { color: var(--c-on-dark); }
.footer-brand .brand-word span { color: var(--c-on-dark-2); border-color: var(--c-on-dark-2); }
.footer-brand p { margin-top: var(--sp-3); max-width: 22rem; }
.site-footer a.mail { display: inline-flex; align-items: center; min-height: var(--tap); margin-top: var(--sp-2); color: var(--c-ochre-on-dark); overflow-wrap: anywhere; }
.footer-col h2 { display: flex; align-items: center; min-height: var(--tap); font: 600 0.8125rem/1.3 var(--f-sans); font-stretch: 118%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-on-dark); }
.footer-col ul { display: grid; }
.footer-col li a { display: flex; align-items: flex-start; min-height: var(--tap); padding-block: 0.625rem; line-height: 1.5; }
.footer-col p { max-width: 18rem; }
.footer-col .btn { margin-top: var(--sp-4); }
.footer-legal { padding-block: var(--sp-5) var(--sp-6); border-top: 1px solid var(--c-dark-line); font-size: 0.875rem; }

/* Legende */
.legend { display: grid; border-top: 1px solid var(--c-ink); }
.legend-item { display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--sp-4); padding-block: var(--sp-5); border-bottom: 1px solid var(--c-line-strong); }
.legend-item .sw { width: 3.5rem; height: 2.5rem; border: 1px solid var(--c-ink); background: var(--c-sheet); }
.sw-dash { display: block; width: 3.5rem; height: 2.5rem; border: 1px solid var(--c-ink); background: var(--c-sheet) linear-gradient(90deg, var(--c-ochre-text) 60%, transparent 0) center / 12px 2px repeat-x; }
.sw-clean { display: block; width: 3.5rem; height: 2.5rem; border: 1px dashed var(--c-ink-2); background: var(--c-sheet); }
.legend-item h3 { font-size: var(--step-1); line-height: 1.25; }
.legend-item p { margin-top: var(--sp-2); color: var(--c-ink-2); }
.legend-item .more { margin-top: var(--sp-1); }

/* Families */
.family { display: grid; gap: var(--sp-6); align-items: center; }
.family + .family { margin-top: var(--sp-8); padding-top: var(--sp-8); border-top: 1px solid var(--c-line-strong); }
.family-fig { aspect-ratio: 3 / 2; }
.family .bay-n { display: block; }
.family-h { margin-top: var(--sp-3); font-size: var(--step-3); line-height: 1.1; }
.family p { margin-top: var(--sp-4); }

/* Galerij */
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-7); }
.gallery .fig { aspect-ratio: 3 / 2; }
.gallery .g-main { grid-column: 1 / -1; }

/* Ook bij DCP Global */
.also { border-top: 1px solid var(--c-ink); }
.also-item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) 1.5rem; align-items: center; gap: var(--sp-5); padding-block: var(--sp-5); border-bottom: 1px solid var(--c-ink); }
.also-sw { position: relative; display: block; width: clamp(3.5rem, 2rem + 6vw, 6rem); height: 3rem; border: 1px solid var(--c-ink); }
.also-sw svg { width: 100%; height: 100%; }
.also-sw::after { content: ""; position: absolute; inset: -1px; box-shadow: 0 0 0 2px var(--c-ochre); opacity: 0; transition: opacity var(--dur-hover) var(--ease-out); }
.also h3 { font-size: var(--step-2); }
.also-link { color: var(--c-ink); text-decoration: none; }
.also-link::after { content: ""; position: absolute; inset: 0; }
.also-link:focus-visible { outline: 0; }
.also-link:focus-visible::after { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.also p { margin-top: var(--sp-1); color: var(--c-ink-2); font-size: 1rem; }
.also-arrow { width: 1.5rem; height: 1.5rem; color: var(--c-ochre-text); transition: transform var(--dur-hover) var(--ease-out); }
.also-item:hover .also-link, .also-item:focus-within .also-link { color: var(--c-ochre-text); }
.also-item:hover .also-sw::after, .also-item:has(:focus-visible) .also-sw::after { opacity: 1; }
.also-item:hover .also-arrow, .also-item:has(:focus-visible) .also-arrow { transform: translateX(4px); }

/* Prijsfactoren */
.factors { display: grid; gap: 0 var(--sp-7); border-top: 1px solid var(--c-ink); }
.factors > div { padding-block: var(--sp-4); border-bottom: 1px solid var(--c-line-strong); }
.factors dt { display: flex; gap: var(--sp-3); align-items: baseline; font: 600 1.0625rem/1.3 var(--f-sans); }
.factors dt::before { content: ""; flex: none; width: 0.625rem; height: 0.625rem; background: var(--c-ochre); transform: translateY(-1px); }
.factors dd { margin-top: var(--sp-1); padding-left: 1.375rem; color: var(--c-ink-2); }
.factors .factors-end dt::before { background: none; box-shadow: inset 0 0 0 1.5px var(--c-ink); }
.factors-end dd { color: var(--c-ink); }

/* Goed om te weten */
.notes { display: grid; background: var(--c-sheet); border: 1px solid var(--c-ink); }
.note { display: flex; flex-direction: column; padding: var(--sp-5); border-bottom: 1px solid var(--c-line); }
.note:last-child { border-bottom: 0; }
.note-k { color: var(--c-ochre-text); }
.note h3 { margin-top: var(--sp-2); font-size: var(--step-1); line-height: 1.25; }
.note p { max-width: var(--measure); margin-top: var(--sp-2); color: var(--c-ink-2); font-size: 1rem; }
.note .more { margin-top: auto; padding-top: var(--sp-3); }

/* Vergelijking */
.compare { display: grid; gap: var(--sp-5) var(--sp-7); }
.compare-col { background: var(--c-sheet); border: 1px solid var(--c-ink); }
.compare-col h3 { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-ink); font-size: var(--step-1); }
.compare-col h3 .sw { width: 2.25rem; height: 1.5rem; border: 1px solid var(--c-ink); }
.compare-col ul { padding: var(--sp-3) var(--sp-5) var(--sp-5); }
.compare-col li { position: relative; padding: var(--sp-2) 0 var(--sp-2) 1.25rem; color: var(--c-ink-2); }
.compare-col li::before { content: ""; position: absolute; left: 0; top: calc(var(--sp-2) + 0.8em); width: 0.625rem; height: 1px; background: var(--c-ink); }

/* Over ons / 404 */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-4); }
.lost { display: grid; gap: var(--sp-6); align-items: center; }
.lost-h { margin-top: var(--sp-4); }
.lost .lead { margin-top: var(--sp-5); }
.lost-links { display: grid; gap: var(--sp-1); margin-top: var(--sp-5); }

/* Formulier */
.contact-grid { display: grid; gap: var(--sp-7); }
.form { display: grid; gap: var(--sp-5); }
.form fieldset { display: grid; gap: var(--sp-5); min-width: 0; margin: 0; padding: 0; border: 0; }
.form fieldset + fieldset { margin-top: var(--sp-5); padding-top: var(--sp-6); border-top: 1px solid var(--c-line); }
.form legend { float: left; width: 100%; padding: 0; margin-bottom: 0; }
.field { display: grid; gap: var(--sp-2); }
.field label { font: 600 1rem/1.3 var(--f-sans); }
.opt { font-weight: 500; color: var(--c-ink-2); }
.hint { font-size: 0.9375rem; color: var(--c-ink-2); }
.field input, .field select, .field textarea { width: 100%; min-height: 3rem; padding: 0.625rem 0.75rem; background: var(--c-sheet); border: 1px solid var(--c-line-strong); border-radius: var(--radius); font: 500 1.0625rem/1.4 var(--f-sans); }
.field textarea { min-height: 9rem; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--c-ink) 50%), linear-gradient(135deg, var(--c-ink) 50%, transparent 50%); background-position: calc(100% - 1.25rem) 55%, calc(100% - 0.875rem) 55%; background-size: 0.375rem 0.375rem; background-repeat: no-repeat; padding-right: 2.5rem; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 1px; border-color: var(--c-ink); }
.field [aria-invalid="true"] { border-color: var(--c-error); border-width: 2px; }
.err { font: 600 0.9375rem/1.35 var(--f-sans); color: var(--c-error); }
.check { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--sp-3); align-items: start; }
.check input { width: 1.5rem; height: 1.5rem; margin: 0.125rem 0 0; accent-color: var(--c-ink); }
.check label { font: 400 1rem/1.5 var(--f-serif); }
.check .err { grid-column: 2; }
.form-errors { padding: var(--sp-4) var(--sp-5); border: 2px solid var(--c-error); background: var(--c-sheet); }
.form-errors p { font: 600 1rem/1.4 var(--f-sans); color: var(--c-error); }
.form-errors ul { margin-top: var(--sp-2); padding-left: 1.25rem; list-style: square; }
.form-errors li { font: 500 1rem/1.5 var(--f-sans); }
.form-errors a { color: var(--c-error); }
.form-errors li::marker { color: var(--c-error); }
.form-submit { display: grid; gap: var(--sp-3); justify-items: start; }
.form-submit .hint { max-width: 32rem; }
.form-ok { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--c-success); background: var(--c-sheet); color: var(--c-success); font: 600 1rem/1.45 var(--f-sans); }
.form-ok[hidden], .form-errors[hidden], .err[hidden] { display: none; }
.form-ok svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.125rem; }
.aside { display: grid; gap: var(--sp-5); align-content: start; }
.contact-head { display: grid; gap: var(--sp-5); }
.aside-block { background: var(--c-sheet); border: 1px solid var(--c-ink); padding: var(--sp-5); }
.aside-block h2 { font-size: var(--step-1); line-height: 1.25; }
.aside-block p { margin-top: var(--sp-2); color: var(--c-ink-2); font-size: 1rem; }
.aside-mail { display: inline-flex; align-items: center; min-height: var(--tap); margin-top: var(--sp-2); font: 600 1.0625rem/1.3 var(--f-sans); overflow-wrap: anywhere; }
.mini-steps { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); counter-reset: s; }
.mini-steps li { display: grid; grid-template-columns: 1.75rem 1fr; gap: var(--sp-3); font-size: 1rem; color: var(--c-ink-2); counter-increment: s; }
.mini-steps li::before { content: counter(s); display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--c-ink); border-radius: 50%; font: 600 0.8125rem/1 var(--f-sans); color: var(--c-ink); }
.mini-steps strong { color: var(--c-ink); font-family: var(--f-sans); }
.noscript-note { padding: var(--sp-4); border: 1px solid var(--c-ink); background: var(--c-sheet); }

/* Wettelijke vermeldingen */
.legal h2 { margin-top: var(--sp-7); font-size: var(--step-2); }
.legal h2:first-child { margin-top: 0; }
.legal dl { margin-top: var(--sp-4); border-top: 1px solid var(--c-ink); }
.legal dl > div { display: grid; gap: var(--sp-1); padding-block: var(--sp-3); border-bottom: 1px solid var(--c-line-strong); }
.legal dt { font: 600 0.9375rem/1.35 var(--f-sans); }
.legal dd { color: var(--c-ink-2); }
.legal p, .legal ul { margin-top: var(--sp-4); max-width: 42rem; }
.legal ul { padding-left: 1.25rem; list-style: square; }
.legal li + li { margin-top: var(--sp-2); }
.legal blockquote { margin-top: var(--sp-4); padding-left: var(--sp-5); border-left: 3px solid var(--c-ochre); font-style: italic; color: var(--c-ink-2); max-width: 42rem; }

/* Utilities */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Beweging (.js + no-preference) */
@media screen and (prefers-reduced-motion: no-preference) {
  .js .hero-band, .js .ph-band { animation: rise-clip var(--dur-draw) var(--ease-out) both; }
  .js .band + .container h1 > span { animation: rise-in var(--dur-in) var(--ease-out) both; animation-delay: 180ms; }
  .js .band + .container h1 > .l2 { animation-delay: 270ms; }
  .js [data-reveal=""] { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-in) var(--ease-out), transform var(--dur-in) var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .bestek--on-band[data-reveal=""] { transform: translateY(24px); }
  .js [data-reveal=""].is-in { opacity: 1; transform: none; }
  .js [data-reveal="clip"] { clip-path: inset(100% 0 0 0); transition: clip-path var(--dur-draw) var(--ease-out); }
  .js [data-reveal="clip"].is-in { clip-path: inset(0); }
  .js .steps[data-reveal]::before { transition: transform var(--dur-draw) var(--ease-out); }
  .js .steps[data-reveal]:not(.is-in)::before { transform: scaleY(0); }
  .js .steps[data-reveal] > .step { opacity: 0; transition: opacity var(--dur-in) var(--ease-out) 450ms; }
  .js .steps.is-in > .step { opacity: 1; }
  .js .situatieplan[data-reveal] .sp-ring { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 700ms var(--ease-out); }
  .js .situatieplan[data-reveal] .sp-dots { opacity: 0; transition: opacity var(--dur-in) var(--ease-out) 550ms; }
  .js .situatieplan.is-in .sp-ring { stroke-dashoffset: 0; }
  .js .situatieplan.is-in .sp-dots { opacity: 1; }
  .js .faq-item[open] .faq-a { animation: rise-in 200ms var(--ease-out) both; --rise: 8px; }
}
@keyframes rise-clip { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(var(--rise, 16px)); } to { opacity: 1; transform: none; } }
@keyframes nav-open { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

/* Media */
html:not(.js) .menu-btn { display: none; }

@media (max-width: 22.49em) {
  .header-bar { column-gap: var(--sp-2); }
  .brand { gap: var(--sp-2); }
  .brand .brand-mark { width: 1.375rem; height: 1.375rem; }
  .brand .brand-word { font-size: 0.875rem; letter-spacing: 0.04em; gap: 0.375rem; }
  .brand .brand-word span { padding-left: 0.375rem; }
  .header-actions { gap: 0.375rem; }
  .cta-short { padding: 0 0.625rem; }
}

@media (max-width: 25em) {
  .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-btn { padding: 0; }
  .brand-word { font-size: 0.9375rem; letter-spacing: 0.05em; }
  .brand-mark { width: 1.625rem; height: 1.625rem; }
}

@media (max-width: 29.99em) {
  .pl-x { display: none; }
  .hero-band { aspect-ratio: 1 / 1; }
  .titelblad .actions .btn { flex: 1 1 auto; }
  .situatieplan .t-sm { font-size: 22px; }
}

@media (max-width: 39.99em) {
  .situatieplan .t-md { font-size: 21px; }
  .situatieplan .t-lg { font-size: 25px; }
  .situatieplan .t-xs { font-size: 20px; }
  .doorsnede .ds-bub { r: 29px; }
  .doorsnede .ds-cos { font-size: 30px; }
  .doorsnede .ds-axes { display: none; }
}
@media (min-width: 30em) and (max-width: 39.99em) {
  .situatieplan .t-sm { font-size: 20px; }
}

@media (max-width: 63.99em) {
  .nav { order: 3; flex-basis: 100%; margin-top: var(--sp-3); }
  .js .nav { display: none; }
  .js .nav.is-open { display: block; }
  .nav-list { flex-direction: column; border-top: 1px solid var(--c-line-strong); padding-bottom: var(--sp-3); }
  .nav-link { min-height: 3.25rem; padding: 0; font-size: 1.1875rem; }
  .nav-list > li { border-bottom: 1px solid var(--c-line); }
  .has-sub { flex-wrap: wrap; }
  .has-sub > .nav-link { flex: 1; }
  .sub-toggle { display: none; }
  .sub { flex-basis: 100%; padding-bottom: var(--sp-3); }
  .sub a { padding-left: 0; }
  .nav-link[aria-current] { box-shadow: inset 3px 0 0 var(--c-ochre); padding-left: var(--sp-3); }
  .nav-list > .nav-extra { display: grid; gap: var(--sp-3); padding-top: var(--sp-5); border-bottom: 0; }
  .nav-extra .btn { width: 100%; }
  .nav-extra a.mail { display: inline-flex; align-items: center; min-height: var(--tap); font: 600 1rem/1.3 var(--f-sans); overflow-wrap: anywhere; }
}
@media screen and (max-width: 63.99em) and (prefers-reduced-motion: no-preference) {
  .js .nav.is-open { animation: nav-open 240ms var(--ease-out) both; }
}

@media (max-width: 79.99em) {
  .ds-foot { display: contents; }
  .ds-groups, .ds-foot > * { order: 2; }
  .ds-coord { order: 1; margin-top: calc(var(--sp-5) - var(--sp-7)); }
  .ds-foot > .more { margin-top: calc(var(--sp-4) - var(--sp-7)); }
}
@media (min-width: 48em) and (max-width: 79.99em) {
  .ds-sheet, .ds-coord { width: 100%; max-width: 36rem; margin-inline: auto; }
}

@media (min-width: 30em) {
  .tb-grid { grid-template-columns: 1fr 1fr; }
  .tb-wide { grid-column: 1 / -1; }
  .tb-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tb-row li { align-items: flex-start; padding-inline: var(--sp-4); }
  .tb-row li::before { margin-top: 0.375rem; }
}

@media (min-width: 40em) {
  .compare { grid-template-columns: 1fr 1fr; }
  .factors { grid-template-columns: 1fr 1fr; }
  .factors > div:nth-child(-n+2) { border-top: 0; }
}

@media (min-width: 48em) {
  .hero-band, .ph-band { aspect-ratio: 16 / 9; }
  .staat-head { display: grid; grid-template-columns: 14rem 1fr; gap: var(--sp-6); padding-bottom: var(--sp-3); }
  .staat li { grid-template-columns: 14rem 1fr; column-gap: var(--sp-6); row-gap: 0; align-items: start; }
  .staat h3 { grid-row: span 2; }
  .staat p, .staat .more { grid-column: 2; }
  .notes--2 { grid-template-columns: 1fr 1fr; }
  .notes--2 .note { border-bottom: 0; border-right: 1px solid var(--c-line); }
  .notes--2 .note:last-child { border-right: 0; }
  .ds-groups { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-6); }
  .ds-group { grid-template-rows: auto auto auto 1fr auto; }
  .legend { grid-template-columns: 1fr 1fr; column-gap: var(--sp-7); }
  .family { grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
  .family:nth-of-type(even) .family-fig { order: 2; }
  .lost { grid-template-columns: 1fr 1fr; }
  .bestek-list { grid-template-columns: 1fr 1fr; }
  .bestek-list li { border-right: 1px solid var(--c-line); }
  .bestek-list li:nth-child(2n) { border-right: 0; }
  .bestek-list li:nth-last-child(-n+2) { border-bottom: 0; }
  .legal dl > div { grid-template-columns: 15rem 1fr; gap: var(--sp-5); }
  .gallery { gap: var(--sp-4); }
}

@media (min-width: 64em) {
  .menu-btn, .cta-short { display: none; }
  .cta-full { display: inline-flex; }
  .nav { margin-right: var(--sp-4); }
  .nav-list { align-items: center; gap: var(--sp-1); }
  .has-sub > .nav-link { padding-right: var(--sp-1); }
  .sub-toggle:focus-visible { outline-offset: -3px; }
  .sub { position: absolute; top: calc(100% + 0.8125rem); left: -1rem; display: none; min-width: 18rem; padding: var(--sp-2) 0; background: var(--c-sheet); border: 1px solid var(--c-ink); box-shadow: 0 16px 28px -20px rgb(30 35 39 / 0.45); }
  .sub.is-open { display: block; }

  .hero-band .fig-tag, .ph-band .fig-tag { left: auto; right: 0; top: auto; bottom: 0; border: 0; border-left: 1px solid var(--c-ink); border-top: 1px solid var(--c-ink); }
  .titelblad { width: calc(8 / 12 * 100%); }
  .hero, .page-head:not(.page-head--plain) { display: grid; grid-template-rows: var(--photo-top) auto var(--sp-8); }
  .hero { --photo-top: clamp(14rem, 22vw, 22rem); }
  .page-head { --photo-top: clamp(8rem, 12vw, 12rem); }
  .hero-band, .ph-band { grid-area: 1 / 1 / 3 / 2; aspect-ratio: auto; max-height: none; }
  .hero-band picture, .ph-band picture { position: absolute; inset: 0; }
  .band + .container { grid-area: 2 / 1 / 4 / 2; }
  .band + .container .titelblad { margin-top: 0; }
  .lost .titelblad { width: auto; }
  .lost { align-items: stretch; }
  .lost .plan-sheet { display: grid; align-content: space-between; }

  .notes:not(.notes--2) { grid-template-columns: repeat(3, 1fr); }
  .note { border-bottom: 0; border-right: 1px solid var(--c-line); }
  .note:last-child { border-right: 0; }
  .plan-sheet { padding: var(--sp-4); }
  .plan-cap { margin-inline: 0; }
  .staat-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); align-items: start; }
  .staat-main { padding-top: 0.5rem; }
  .staat-side .fig { aspect-ratio: 1 / 1; }

  .steps { grid-template-columns: repeat(5, 1fr); grid-template-rows: auto auto; column-gap: var(--sp-5); row-gap: 0; padding: 4.5rem 0 0; }
  .steps::before { left: -1.5rem; right: -1.5rem; top: calc(1.5rem - 6px); bottom: auto; width: auto; height: 12px; background-position: left center, right center, center; background-size: 12px 12px, 12px 12px, 100% 1px; transform-origin: left; }
  .step { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--sp-2); }
  .step p { margin-top: 0; }
  .step-n { left: 0; top: 0; transform: translateY(-4.5rem); font-size: 1.5rem; }
  .steps--4 { grid-template-columns: repeat(4, 1fr); }

  .bestek--on-band { margin-inline: calc(100% / 12); }

  .map-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-8); }
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); align-items: start; }
  .split--center { align-items: center; }
  .split--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split--rev > .sec-head { order: 2; }

  .faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto 1fr; column-gap: var(--sp-8); }
  .faq-grid > .sec-head { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .faq-grid > .faq { grid-column: 2; grid-row: 1 / span 2; }
  .faq-grid > .faq-more { grid-column: 1; grid-row: 2; }

  .gallery { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-rows: 1fr 1fr; }
  .gallery .g-main { grid-column: 1; grid-row: 1 / span 2; }
  .gallery .fig:not(.g-main) { aspect-ratio: auto; }
  .gallery .fig:not(.g-main) picture { position: absolute; inset: 0; }

  .cta-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--sp-8); align-items: center; }
  .cta-fig { margin-right: var(--bleed); aspect-ratio: auto; height: clamp(24rem, 16rem + 12vw, 32rem); }
  .cta--simple .cta-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .cta--simple .actions { justify-content: flex-end; }

  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: var(--sp-7); }
  .footer-brand, .footer-col--wide { grid-column: auto; }

  .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--sp-8); }
  .contact-head { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--sp-8); align-items: end; }
  .contact-head .titelblad { width: auto; }
}
@media screen and (min-width: 64em) and (prefers-reduced-motion: no-preference) {
  .js .steps[data-reveal]:not(.is-in)::before { transform: scaleX(0); }
}

@media (min-width: 80em) {
  .brand-word { font-size: 1.125rem; }
  .tb-grid { grid-template-columns: repeat(3, 1fr); }
  .tb-contact { grid-column: 1 / -1; }
  .ds-wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-rows: auto 1fr; column-gap: var(--sp-8); row-gap: var(--sp-6); align-items: start; }
  .ds-sheet { grid-column: 1; grid-row: 1; }
  .ds-groups { grid-column: 2; grid-row: 1 / span 2; }
  .ds-foot { grid-column: 1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0.01ms; --dur-hover: 0.01ms; }
  .more:hover svg, .more:focus-visible svg, .also-item:hover .also-arrow, .also-item:has(:focus-visible) .also-arrow { transform: none; }
}