/* ==========================================================================
   Ontwerp D · Werf en antraciet — GEMAAKT BESTAND, NIET MET DE HAND BEWERKEN.
   Opnieuw maken: node src/ontwerp-d/maak.mjs
   Bronnen: site/css/ontwerp-b.css (het kader op elke pagina: de kop met het menu, de overslaanlink en de voet; en de
   homepage), site/css/ontwerp-c.css (de inhoud van elke andere pagina), site/css/rojects.css (de basis),
   src/ontwerp-d/naad.css (de naad) en de templates (welke regels in D iets kunnen kiezen). Wijzig die, nooit dit.
   Indeling: html[data-ontwerp="d"] … = B op elke pagina: de kop (met het menu) en de voet;
             html[data-ontwerp="d"]:where([data-pagina="home"]) … = B op de homepage;
             html[data-ontwerp="d"]:where(:not([data-pagina="home"])) …:where(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"])
               = een algemene regel van B (.t-l, .btn …) in het kader van de andere pagina's;
             html[data-ontwerp="d"]:where(:not([data-pagina="home"])) … = C op de andere pagina's, buiten het kader
               (met …:where(:not(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"])) waar de templates dat niet al uitsluiten).
   Een regel van C voor de kop, het menu of de voet valt weg: daar staat B. Weggelaten ook: regels die in D nooit iets
   kiezen (een klasse die volgens de templates niet op die pagina of niet in dat gebied staat).
   Twee letters: Archivo (B) op elke pagina (minstens de kop en de voet), Mona Sans (C) enkel op de andere pagina's;
   elk wordt enkel geladen waar het gebruikt wordt.
   ========================================================================== */


/* ##########################################################################
   Uit ontwerp-b.css · B · Werf in beeld — het kader (de kop, het menu, de voet) op elke pagina; de homepage
   ########################################################################## */
/* ==========================================================================
   Eén letter: Archivo (variabel, breedte 62–125, gewicht 100–900, OFL).
   Breed (125) en zwaar voor de titels, normaal (100) voor de lopende tekst.
   Banden wisselen: papier om te lezen, antraciet (#222629, de onderrand van de hero) om aan te komen en te vragen.
   Het ene motief: een kleine oranje zeshoek op de lopende kop (haarlijn, nummer op de homepage, naam).
   Alle hoeken 0. Foto's in volle kleur: de werf is het beeld.
   Beweging (enkel bij prefers-reduced-motion: no-preference; de R blijft de enige lus):
     de haarlijn van elke lopende kop wordt bij het scrollen gespannen, de zeshoek draait mee één zesde slag aan,
     een foto wordt bij het binnenkomen onthuld (een vlak trekt zich naar rechts terug), bij aandacht zoomt ze traag 3%,
     links tekenen hun oranje lijn, pijlen schuiven 4 px, de oranje streep onder "u bent hier" wordt getrokken,
     een tabblad van de filter krijgt bij aandacht een inktlijn, telefoon en e-mail in de kop flitsen grijs → wit → oranje,
     na het verzenden draait het teken naast "Aanvraag verstuurd" één zesde slag.
   ========================================================================== */
@font-face {
  font-family: "Ontwerp B Archivo";
  src: url("/fonts/ontwerp-b-archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* ---------- maten en kleuren ---------- */
html[data-ontwerp="d"]:where([data-pagina="home"]) {
  --ob-f: "Ontwerp B Archivo", "Helvetica Neue", Arial, sans-serif;
  --ink: #17191b;
  --anth: #2a2e33;
  --deep: #222629;
  --k1: #222629;
  --paper: #f7f6f2;
  --mist: #e8e9eb;
  --grey: #e8e9eb;
  --box: #d9dadc;
  --ink-mid: #5c6167;
  --mid: #a3a8ae;
  --lo: #a3a8ae;
  --soft: #d3d5d8;
  --or: #ce6943;
  --or-d: #b85a38;
  --or-dd: #a24d2e;
  --g: clamp(16px, 2.2222vw, 32px);
  --sec: clamp(88px, 11.1111vw, 160px);
  --ob-head: clamp(48px, 6.6667vw, 96px);
  --t3: 700ms;
}

/* ---------- de letter: overal behalve in de hero (die houdt zijn systeemletter) ---------- */
html[data-ontwerp="d"] .hdr,
html[data-ontwerp="d"]:where([data-pagina="home"]) #inhoud > :not(#diensten),
html[data-ontwerp="d"] .ftr {
  font-family: var(--ob-f);
  font-synthesis: none;
  font-kerning: normal;
}

/* ---------- ondergronden ----------
   donker: de paginakop, de oproep, contact, het volgende project; licht: de rest, ook kop en voet */
html[data-ontwerp="d"]:where([data-pagina="home"]) .dark,
html[data-ontwerp="d"] .deep {
  background: var(--deep);
  color: var(--paper);
  --fg: var(--paper); --fg2: var(--mid); --fg3: var(--mid); --soft-fg: var(--soft);
  --rule: rgba(247, 246, 242, .16); --rule2: rgba(247, 246, 242, .4); --line: rgba(247, 246, 242, .62);
  --focus: var(--or); --acc: var(--or); --lnk: var(--or-l);
  --ph: #33383d; --ph-fg: #b4b8bd;
}
html[data-ontwerp="d"]:where([data-pagina="home"]) .paper,
html[data-ontwerp="d"]:where([data-pagina="home"]) .grey,
html[data-ontwerp="d"] .hdr,
html[data-ontwerp="d"] .ftr,
html[data-ontwerp="d"]:where([data-pagina="home"]) #realisaties,
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) #realisaties:where(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"]),
html[data-ontwerp="d"]:where([data-pagina="home"]) #partners {
  background: var(--paper);
  color: var(--ink);
  --fg: var(--ink); --fg2: var(--ink-mid); --fg3: var(--ink-mid); --soft-fg: var(--ink-mid);
  --rule: rgba(23, 25, 27, .14); --rule2: rgba(23, 25, 27, .4); --line: var(--anth);
  --focus: var(--or-d); --acc: var(--or); --lnk: var(--or-t);
  --ph: var(--box); --ph-fg: #4f545a;
}
html[data-ontwerp="d"]:where([data-pagina="home"]) .cta,
html[data-ontwerp="d"]:where([data-pagina="home"]) #contact {
  background: var(--deep);
  color: var(--paper);
  --fg: var(--paper); --fg2: var(--mid); --fg3: var(--mid); --soft-fg: var(--soft);
  --rule: rgba(247, 246, 242, .16); --rule2: rgba(247, 246, 242, .4); --line: rgba(247, 246, 242, .62);
  --focus: var(--or); --acc: var(--or); --lnk: var(--or-l);
  --ph: #33383d; --ph-fg: #b4b8bd;
}
html[data-ontwerp="d"]:where([data-pagina="home"]) #contact { --err: #ef7b7b; }

/* ---------- typografie: zeven stijlen ---------- */
/* 6 · label */
html[data-ontwerp="d"]:where([data-pagina="home"]) .t-l,
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .t-l:where(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"]) {
  font-size: 12px; line-height: 1.4; font-weight: 600; font-stretch: 112%;
  letter-spacing: .14em; --trk: .14em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
/* 7 · klein */
html[data-ontwerp="d"]:where([data-pagina="home"]) .t-s,
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .t-s:where(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"]) { font-size: 15px; line-height: 1.5; font-weight: 400; font-stretch: 100%; letter-spacing: .002em; }
/* 4 · inleiding (standaard voor M) */
html[data-ontwerp="d"]:where([data-pagina="home"]) .t-m { font-size: clamp(18px, 1.5278vw, 22px); line-height: 1.45; font-weight: 400; font-stretch: 100%; letter-spacing: -.003em; }
/* 3 · kop (standaard voor T) */
html[data-ontwerp="d"]:where([data-pagina="home"]) .t-t { font-size: clamp(20px, 1.6667vw, 24px); line-height: 1.22; font-weight: 650; font-stretch: 108%; letter-spacing: -.006em; text-wrap: balance; }
/* 2 · koptitel (standaard voor XL) */
html[data-ontwerp="d"]:where([data-pagina="home"]) .t-xl {
  font-size: clamp(28px, 3.6111vw, 52px); line-height: 1.06; font-weight: 680; font-stretch: 112%;
  letter-spacing: -.016em; text-wrap: balance;
}
html[data-ontwerp="d"]:where([data-pagina="home"]) .nr { font-stretch: 112%; font-variant-numeric: tabular-nums; }

/* projecttitels in kaarten en register: kop (3) */
html[data-ontwerp="d"]:where([data-pagina="home"]) .card h3.t-m,
html[data-ontwerp="d"]:where([data-pagina="home"]) .card h3.t-t,
html[data-ontwerp="d"]:where([data-pagina="home"]) .call a.t-m,
html[data-ontwerp="d"]:where([data-pagina="home"]) .fsum p.t-m {
  font-size: clamp(20px, 1.6667vw, 24px); line-height: 1.22; font-weight: 650; font-stretch: 108%; letter-spacing: -.006em;
}
html[data-ontwerp="d"]:where([data-pagina="home"]) .call a.t-m { line-height: 1.22; }
/* 1 · titel: breed, zwaar en kapitaal — de uitspraak van een sectie */
html[data-ontwerp="d"]:where([data-pagina="home"]) .sh .st.t-xl,
html[data-ontwerp="d"]:where([data-pagina="home"]) .sh .st > .t-xl {
  font-size: clamp(42px, 8.3333vw, 120px); line-height: .9; font-weight: 720; font-stretch: 125%;
  letter-spacing: -.012em; text-transform: uppercase; text-wrap: balance; overflow-wrap: normal; hyphens: manual;
  text-box: trim-both cap alphabetic;
}

/* ---------- het ene motief: één kleine zeshoek ---------- */
html[data-ontwerp="d"]:where([data-pagina="home"]) .hx,
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .hx:where(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"]) { width: 11px; height: 9.5px; background: var(--or); }

/* ---------- de lopende kop: haarlijn, zeshoek, nummer (homepage), naam ---------- */
html[data-ontwerp="d"]:where([data-pagina="home"]) .sh,
html[data-ontwerp="d"]:where([data-pagina="home"]) .cta .sh { padding-top: 16px; row-gap: 0; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .sh::before,
html[data-ontwerp="d"]:where([data-pagina="home"]) .ln-top::before,
html[data-ontwerp="d"]:where([data-pagina="home"]) .sh.op-hero::before,
html[data-ontwerp="d"]:where([data-pagina="home"]) .cta .sh::before { display: block; background: var(--line); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .sh > h2,
html[data-ontwerp="d"]:where([data-pagina="home"]) .ct > h2,
html[data-ontwerp="d"]:where([data-pagina="home"]) .prt > h2 {
  display: flex; align-items: center; gap: 12px; color: var(--fg); text-box: none;
}
html[data-ontwerp="d"]:where([data-pagina="home"]) .sh > h2,
html[data-ontwerp="d"]:where([data-pagina="home"]) .ct > h2,
html[data-ontwerp="d"]:where([data-pagina="home"]) .prt > h2 { grid-column: 1 / -1; grid-row: auto; margin-bottom: var(--ob-head); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .sh > h2::before,
html[data-ontwerp="d"]:where([data-pagina="home"]) .ct > h2::before,
html[data-ontwerp="d"]:where([data-pagina="home"]) .prt > h2::before {
  content: ""; order: -2; flex: none; width: 11px; height: 9.5px; background: var(--or);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
/* de vier secties van de homepage dragen een nummer (01–04) */
html[data-ontwerp="d"]:where([data-pagina="home"]) #inhoud { counter-reset: ob-sec; }
html[data-ontwerp="d"]:where([data-pagina="home"]) #inhoud:has(> #diensten) .sh > h2,
html[data-ontwerp="d"]:where([data-pagina="home"]) #inhoud:has(> #diensten) .ct > h2,
html[data-ontwerp="d"]:where([data-pagina="home"]) #inhoud:has(> #diensten) .prt > h2 { counter-increment: ob-sec; }
html[data-ontwerp="d"]:where([data-pagina="home"]) #inhoud:has(> #diensten) .sh > h2::after,
html[data-ontwerp="d"]:where([data-pagina="home"]) #inhoud:has(> #diensten) .ct > h2::after,
html[data-ontwerp="d"]:where([data-pagina="home"]) #inhoud:has(> #diensten) .prt > h2::after {
  content: counter(ob-sec, decimal-leading-zero); order: -1; flex: none; margin-right: auto;
  font-stretch: 112%; letter-spacing: .14em;
}

/* ---------- links en knoppen ---------- */
/* een tekstlink: een rustende lijn in de tekstkleur, bij aandacht trekt een oranje lijn erover */
html[data-ontwerp="d"]:where([data-pagina="home"]) .go { gap: 12px; color: var(--fg); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .go.t-l {
  font-size: 15px; line-height: 1.5; font-weight: 500; font-stretch: 104%; letter-spacing: .002em; --trk: 0em; text-transform: none;
}
html[data-ontwerp="d"]:where([data-pagina="home"]) .go .ln,
html[data-ontwerp="d"]:where([data-pagina="home"]) .send p a .ln,
html[data-ontwerp="d"]:where([data-pagina="home"]) .end .go > span:first-child {
  padding-bottom: 4px; line-height: 1.5;
  background: linear-gradient(var(--acc), var(--acc)) no-repeat 100% 100% / 0 1px,
              linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px;
}
html[data-ontwerp="d"]:where([data-pagina="home"]) .call .u .ln,
html[data-ontwerp="d"]:where([data-pagina="home"]) .cdl .u .ln { background: linear-gradient(var(--acc), var(--acc)) no-repeat 100% 100% / 0 1px; padding-bottom: 2px; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .card:has(h3 a:focus-visible) .end .go > span:first-child { background-position: 0 100%, 0 100%; background-size: 100% 1px, 100% 1px; }

html[data-ontwerp="d"]:where([data-pagina="home"]) .btn,
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .btn:where(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"]) {
  min-height: 56px; padding: 0 22px 0 26px; gap: 20px; justify-content: space-between; border-radius: 0;
  background: var(--or-d); color: #fff;
  font-size: 15px; line-height: 1.3; font-weight: 600; font-stretch: 106%; letter-spacing: .004em;
}
html[data-ontwerp="d"]:where([data-pagina="home"]) .btn:active,
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .btn:active:where(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"]) { background: var(--or-dd); }
html[data-ontwerp="d"] .btn--line {
  min-height: 44px; padding: 0 18px; justify-content: center; background: transparent; color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--line);
}
html[data-ontwerp="d"] .btn--line:active { background: transparent; box-shadow: inset 0 0 0 2px var(--fg); }

/* ---------- foto's: volle kleur, grijs is de laadtoestand ---------- */
html[data-ontwerp="d"]:where([data-pagina="home"]) .ph { background: var(--ph); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .ph img { filter: none; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .ph .cap {
  left: 16px; bottom: 14px; color: var(--ph-fg);
  font-size: 12px; line-height: 1; font-weight: 600; font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase;
}

/* ---------- metaregel: nummer, soort werk ---------- */
html[data-ontwerp="d"]:where([data-pagina="home"]) .meta.t-s {
  justify-content: flex-start; gap: 20px; color: var(--fg);
  font-size: 12px; line-height: 1.4; font-weight: 600; font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase;
}
html[data-ontwerp="d"]:where([data-pagina="home"]) .meta .no { order: -1; color: var(--fg); font-stretch: 112%; font-weight: 600; font-variant-numeric: tabular-nums; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .tz { color: var(--fg2); font-size: clamp(16px, 1.1806vw, 17px); line-height: 1.65; }

/* ==========================================================================
   Kop: papier, haarlijn eronder, even hoog als vroeger
   ========================================================================== */
html[data-ontwerp="d"] .hdr { border-bottom-color: var(--rule); }
html[data-ontwerp="d"] .hdr .nav.t-l,
html[data-ontwerp="d"] .hdr .mob.t-l {
  font-size: 15px; line-height: 1.5; font-weight: 500; font-stretch: 104%; letter-spacing: .002em; --trk: 0em; text-transform: none;
}
html[data-ontwerp="d"] .nav a:not(.btn):not(.hex-btn-link) { color: var(--fg); }
html[data-ontwerp="d"] .nav a[aria-current] .hx { display: none; }
html[data-ontwerp="d"] .nav a[aria-current]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 2px; background: var(--or); transform-origin: 0 50%;
}
html[data-ontwerp="d"] .nav a[aria-current] .ln { background: none; }
html[data-ontwerp="d"] .nav .tl { align-items: center; padding-left: clamp(20px, 2.7778vw, 40px); border-left: 1px solid var(--rule); }
html[data-ontwerp="d"] .hdr .hex-btn { background: var(--anth); color: var(--paper); }
html[data-ontwerp="d"] .hdr .hex-btn-link:active .hex-btn { background: var(--or-d); color: #fff; }
html[data-ontwerp="d"] .menu summary { color: var(--fg); }
html[data-ontwerp="d"] .menu-p { background: var(--paper); border-bottom: 1px solid var(--rule); }
html[data-ontwerp="d"] .menu-p a:not(.btn) { color: var(--fg); border-bottom-color: var(--rule); font-size: 17px; }

/* ==========================================================================
   Homepage onder de hero
   ========================================================================== */
/* 01 · realisaties, op papier */
html[data-ontwerp="d"]:where([data-pagina="home"]) #realisaties,
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) #realisaties:where(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"]) { padding-top: var(--sec); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .sh > .st { grid-column: 1 / -1; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .soorten { margin-top: clamp(32px, 3.3333vw, 48px); gap: 0 clamp(24px, 2.7778vw, 40px); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .soorten a { gap: 6px; color: var(--fg2); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .soorten .nr { color: var(--fg2); letter-spacing: 0; translate: 0 -6px; }

/* uitgelicht project: foto over acht kolommen, het titelblok op de onderrand */
html[data-ontwerp="d"]:where([data-pagina="home"]) .feat { margin-top: var(--ob-head); row-gap: 24px; align-items: end; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .feat .ph { aspect-ratio: 3 / 2; align-self: auto; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .pj .meta,
html[data-ontwerp="d"]:where([data-pagina="home"]) .pj .meta.t-s { border-top: 1px solid var(--line); padding-top: 16px; margin-bottom: 20px; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .pj h3 { margin-top: 0; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .pj .tz { margin-top: 16px; max-width: 46ch; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .pj .end { margin-top: 24px; border-top: 0; padding-top: 0; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .pj .end .go { min-height: 0; }

/* de andere projecten: een register op haarlijnen, nummer en soort, titel als kop */
html[data-ontwerp="d"]:where([data-pagina="home"]) .idx { margin-top: clamp(72px, 8.8889vw, 128px); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .reg li { border-top-color: var(--rule); padding: 20px 0; column-gap: var(--g); }
/* de laatste regel sluit niet zelf af: de donkere lijn van "Bekijk onze realisaties" doet dat (één lijn, geen dubbele) */
html[data-ontwerp="d"]:where([data-pagina="home"]) .reg li:last-child { border-bottom-color: transparent; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .reg li { align-items: center; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .reg li .rg { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding-right: 40px; }
/* de pijl van het systeem (zelfde tekening als #arr) als teken dat de hele regel een link is */
html[data-ontwerp="d"]:where([data-pagina="home"]) .reg li .rg::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 8H13.2M11.6 2.8 14.6 8l-3 5.2' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 8H13.2M11.6 2.8 14.6 8l-3 5.2' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
html[data-ontwerp="d"]:where([data-pagina="home"]) .reg li .rg .meta.solo { position: static; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .rg:has(.meta.solo) h3 { padding-right: 0; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .idx-f {
  position: relative; justify-content: flex-end; margin-top: clamp(64px, 6.6667vw, 96px); margin-left: 0; padding-top: 20px;
}
html[data-ontwerp="d"]:where([data-pagina="home"]) .idx-f::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: 0 50%; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .idx-f .go.t-l {
  gap: 16px; font-size: clamp(20px, 1.6667vw, 24px); line-height: 1.22; font-weight: 650; font-stretch: 108%; letter-spacing: -.006em;
}
html[data-ontwerp="d"]:where([data-pagina="home"]) .idx-f .go .i { width: 20px; height: 20px; }

/* 02 · volgende stap: antraciet, de uitspraak in de breedte, daaronder de vraag en de knop */
html[data-ontwerp="d"]:where([data-pagina="home"]) .cta { padding-block: var(--sec); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .cta-r { margin-top: var(--ob-head); padding-top: 32px; border-top: 1px solid var(--rule); row-gap: 32px; align-items: center; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .cta-r > .cx { grid-column: 1 / -1; color: var(--soft-fg); max-width: 34ch; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .cta-r .do { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 24px 48px; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .call { gap: 4px; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .call > span.t-s {
  color: var(--fg2); font-size: 12px; line-height: 1.4; font-weight: 600; font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase;
}
html[data-ontwerp="d"]:where([data-pagina="home"]) .call a { min-height: 44px; color: var(--fg); text-decoration: none; }
/* na het volgende project loopt de antracietband gewoon door en sluit ze met één regel op een haarlijn:
   de vraag, de knop, "Liever bellen?" (zoals het concept). De naam en de uitspraak blijven voor schermlezers (aria-labelledby). */
html[data-ontwerp="d"]:where([data-pagina="home"]) #inhoud > :has(.nxc) + .cta { padding-top: 0; }
html[data-ontwerp="d"]:where([data-pagina="home"]) #inhoud > :has(.nxc) + .cta .sh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* de regel ligt op de onderrand van de band: boven de 2 px overloop van de band tekenen */
html[data-ontwerp="d"]:where([data-pagina="home"]) #inhoud > :has(.nxc) + .cta .cta-r { position: relative; margin-top: 0; }

/* 03 · partners: logo's in lichte vlakken */
html[data-ontwerp="d"]:where([data-pagina="home"]) .prt-s { padding-block: var(--sec); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .prt { position: relative; padding-top: 16px; row-gap: 0; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .prt::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: 0 50%; pointer-events: none; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .prt > .leeg,
html[data-ontwerp="d"]:where([data-pagina="home"]) .logos { grid-column: 1 / -1; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .logos { gap: 12px; border-bottom: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .logos li { border-top: 0; background: var(--mist); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .logos a,
html[data-ontwerp="d"]:where([data-pagina="home"]) .logos .lv { color: var(--ink); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .logos .nm {
  color: var(--ink-mid); font-size: 12px; line-height: 1.4; font-weight: 600; font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase;
}
html[data-ontwerp="d"]:where([data-pagina="home"]) .logos a:active { box-shadow: inset 0 0 0 2px var(--anth); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .prt > .leeg p { color: var(--fg2); }

/* 04 · contact: antraciet, de gegevens links, het formulier rechts */
html[data-ontwerp="d"]:where([data-pagina="home"]) #contact { padding-block: var(--sec); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .ct { padding-top: 16px; row-gap: 0; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .cst .sub { margin-top: 24px; max-width: 32ch; color: var(--fg2); font-size: clamp(16px, 1.1806vw, 17px); line-height: 1.65; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .cdl { margin-top: 56px; border-top-color: var(--rule); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .cdl div { padding: 18px 0 20px; gap: 6px; border-bottom-color: var(--rule); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .cdl dt { color: var(--fg2); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .cdl dd { min-height: 0; color: var(--fg); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .cdl dd a { min-height: 44px; margin-block: -10px; color: var(--fg); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .frm-w { margin-top: 56px; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .frm .req { margin-bottom: 36px; color: var(--fg2); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .fields { row-gap: 36px; column-gap: var(--g); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .f { gap: 10px; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .f label.t-s {
  color: var(--fg2); font-size: 12px; line-height: 1.4; font-weight: 600; font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase;
}
html[data-ontwerp="d"]:where([data-pagina="home"]) .f label .o { text-transform: none; letter-spacing: .01em; font-weight: 400; font-stretch: 100%; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .f input,
html[data-ontwerp="d"]:where([data-pagina="home"]) .f textarea {
  height: 52px; padding: 12px 0 13px; color: var(--fg); border-bottom-color: rgba(247, 246, 242, .4);
  font-size: 17px; line-height: 26px; caret-color: var(--or);
}
html[data-ontwerp="d"]:where([data-pagina="home"]) .f textarea { height: auto; min-height: 148px; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .f input:focus-visible,
html[data-ontwerp="d"]:where([data-pagina="home"]) .f textarea:focus-visible { border-bottom-color: var(--or); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .f input:-webkit-autofill { -webkit-text-fill-color: var(--paper); -webkit-box-shadow: inset 0 0 0 100px var(--deep); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .err { color: var(--fg); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .fsum { background: rgba(247, 246, 242, .06); color: var(--fg); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .fsum li a { color: var(--fg); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .send { margin-top: 44px; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .send .btn { order: -1; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .send p { color: var(--fg2); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .send p a { color: var(--fg); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .ok .t-l:first-child { color: var(--fg2); }
/* verzonden: geen ring van de hero naast de tekst, wel het ene teken op de lopende kop; de tekst blijft in de kolom van het formulier */
html[data-ontwerp="d"]:where([data-pagina="home"]) .ok { grid-template-columns: minmax(0, 1fr); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .ok .ok-ring { display: none; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .ok > div > .t-l:first-child { display: flex; align-items: center; gap: 12px; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .ok > div > .t-l:first-child::before {
  content: ""; flex: none; width: 11px; height: 9.5px; background: var(--or);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
html[data-ontwerp="d"]:where([data-pagina="home"]) .ok .ok-t { margin-top: 20px; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .ok .ok-t.t-t {
  font-size: clamp(28px, 3.6111vw, 52px); line-height: 1.06; font-weight: 680; font-stretch: 112%; letter-spacing: -.016em;
}

/* ==========================================================================
   Voet: papier, op dezelfde vier assen
   ========================================================================== */
html[data-ontwerp="d"] .ftr { padding-top: clamp(72px, 7.7778vw, 112px); padding-bottom: 0; }
html[data-ontwerp="d"] .ftr .g12 { row-gap: 36px; }
html[data-ontwerp="d"] .ftr .lg svg,
html[data-ontwerp="d"] .ftr .lg img { width: 140px; }
html[data-ontwerp="d"] .ftr h2 { color: var(--fg2); margin-bottom: 8px; }
html[data-ontwerp="d"] .ftr li a,
html[data-ontwerp="d"] .ftr address a { color: var(--fg); font-size: 15px; font-weight: 500; font-stretch: 104%; }
html[data-ontwerp="d"] .ftr address > span { color: var(--fg); font-size: 15px; font-weight: 500; font-stretch: 104%; }
html[data-ontwerp="d"] .ftr address > span + span { color: var(--fg2); }
html[data-ontwerp="d"] .ftr .soc a { color: var(--fg2); }
html[data-ontwerp="d"] .bot { margin-top: clamp(56px, 6.6667vw, 96px); padding: 24px 0 32px; border-top-color: var(--rule); color: var(--fg2); }

/* ==========================================================================
   Paginakop: antraciet; terug, soort werk met de zeshoek, titel
   ========================================================================== */
html[data-ontwerp="d"]:where([data-pagina="home"]) .lead a { color: var(--lnk); }

/* ---------- projectpagina: lopende kop over de breedte, de inhoud eronder ---------- */
html[data-ontwerp="d"]:where([data-pagina="home"]) .vn-gals,
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .vn-gals:where(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"]) { gap: 56px; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .vn-gal > h3,
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .vn-gal > h3:where(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"]) { gap: 12px; margin-bottom: 20px; color: var(--fg); }
html[data-ontwerp="d"]:where([data-pagina="home"]) .vn-gal .vn-n,
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .vn-gal .vn-n:where(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"]) { color: var(--fg2); font-weight: 600; }
html[data-ontwerp="d"]:where([data-pagina="home"]) .duo,
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .duo:where(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"]) { gap: 32px var(--g); }

/* ==========================================================================
   Breed: twaalf kolommen
   ========================================================================== */
@media (min-width: 600px) {
  html[data-ontwerp="d"]:where([data-pagina="home"]) .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 768px) {
  html[data-ontwerp="d"] .ftr .lg svg,
  html[data-ontwerp="d"] .ftr .lg img { width: 168px; }
}
@media (min-width: 900px) {
  /* het nummer op de homepage staat in de kolommen 1–2, de naam begint op kolom 3 */
  html[data-ontwerp="d"]:where([data-pagina="home"]) #inhoud:has(> #diensten) .sh > h2::after,
  html[data-ontwerp="d"]:where([data-pagina="home"]) #inhoud:has(> #diensten) .ct > h2::after,
  html[data-ontwerp="d"]:where([data-pagina="home"]) #inhoud:has(> #diensten) .prt > h2::after {
    margin-right: 0; width: calc((100% - 11 * var(--g)) / 6 + 2 * var(--g) - 35px);
  }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .prt > h2,
  html[data-ontwerp="d"]:where([data-pagina="home"]) .logos,
  html[data-ontwerp="d"]:where([data-pagina="home"]) .prt > .leeg { grid-column: 1 / -1; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .feat .ph { grid-column: 1 / 9; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .feat .ft { grid-column: 9 / 13; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .pj .meta,
  html[data-ontwerp="d"]:where([data-pagina="home"]) .pj .meta.t-s { border-top: 1px solid var(--line); padding-top: 16px; margin-bottom: 20px; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .reg li .pv { grid-column: 1 / 3; justify-self: start; width: min(100%, 160px); }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .reg li .rg { grid-column: 3 / 13; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .idx-f { margin-left: 0; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .cta-r > .cx { grid-column: 1 / 7; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .cta-r .do { grid-column: 7 / 13; justify-content: flex-end; align-items: center; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .do .btn { width: auto; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .duo,
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .duo:where(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"]) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .duo > .ph { grid-column: 1 / 8; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .duo--stapel > .ph { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  html[data-ontwerp="d"]:where([data-pagina="home"]) .feat .ph { grid-column: 1 / 9; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .feat .ft { grid-column: 9 / 13; }
  /* contact: de naam over de breedte; inleiding en gegevens links (1–5), het formulier rechts (7–12) */
  /* contact: de naam over de breedte; inleiding en gegevens links (kolom 1–4), het formulier vanaf kolom 6 */
  html[data-ontwerp="d"]:where([data-pagina="home"]) .ct > h2 { grid-column: 1 / -1; grid-row: 1; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .cst { grid-column: 1 / 5; grid-row: 2; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .cdl { grid-column: 1 / 5; grid-row: 3; margin-top: 56px; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .ct { grid-template-rows: auto auto auto 1fr; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .frm-w { grid-column: 6 / 13; grid-row: 2 / 5; margin-top: 0; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .frm,
  html[data-ontwerp="d"]:where([data-pagina="home"]) .ok { border-top: 0; padding-top: 0; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .f,
  html[data-ontwerp="d"]:where([data-pagina="home"]) .f:nth-child(2),
  html[data-ontwerp="d"]:where([data-pagina="home"]) .f:nth-child(4) { grid-column: auto; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .f.w { grid-column: 1 / -1; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .send { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 20px 32px; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .send p { grid-column: auto; grid-row: auto; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .send .btn { order: -1; width: auto; grid-column: auto; grid-row: auto; }
  html[data-ontwerp="d"] .ftr .lg { grid-column: 1 / 6; }
  html[data-ontwerp="d"] .ftr nav:nth-of-type(1) { grid-column: 6 / 8; }
  html[data-ontwerp="d"] .ftr nav:nth-of-type(2) { grid-column: 8 / 10; }
  html[data-ontwerp="d"] .ftr .fc { grid-column: 10 / 13; }
  html[data-ontwerp="d"] .bot { display: flex; justify-content: space-between; gap: 8px 32px; }
}
@media (min-width: 600px) and (max-width: 1199px) {
  html[data-ontwerp="d"]:where([data-pagina="home"]) .send { justify-content: flex-start; gap: 20px 32px; }
}
@media (max-width: 599px) {
  /* op een telefoon staan er twee regels; ook de tweede sluit niet zelf af */
  html[data-ontwerp="d"]:where([data-pagina="home"]) .reg li:nth-child(2) { border-bottom-color: transparent; }
  /* partners: twee per rij, het logo leesbaar groot */
  html[data-ontwerp="d"]:where([data-pagina="home"]) .logos li { aspect-ratio: 3 / 2; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .logos a,
  html[data-ontwerp="d"]:where([data-pagina="home"]) .logos .lv { padding: 6%; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .logos img { max-width: 88%; }
  html[data-ontwerp="d"] .ftr nav:nth-of-type(1) { grid-column: 1 / 3; }
  html[data-ontwerp="d"] .ftr nav:nth-of-type(2) { grid-column: 3 / 5; }
  html[data-ontwerp="d"] .ftr li a { white-space: normal; }
}

/* ==========================================================================
   Smal (≤ 767 px): alles onder elkaar, foto's van rand tot rand
   ========================================================================== */
@media (max-width: 767px) {
  html[data-ontwerp="d"]:where([data-pagina="home"]) .sh .st.t-xl,
  html[data-ontwerp="d"]:where([data-pagina="home"]) .sh .st > .t-xl { font-size: max(28px, calc((100vw - 2 * var(--m)) / 10)); line-height: .94; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .feat .ph { margin-inline: calc(var(--m) * -1); }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .cta-r .do { flex-direction: column; align-items: stretch; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .cta-r .do .btn { width: 100%; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .idx-f { justify-content: flex-start; }
}
/* heel smal (320–379): de titel van een registerregel breekt niet midden in een woord */
@media (max-width: 379px) {
  html[data-ontwerp="d"]:where([data-pagina="home"]) .reg li { grid-template-columns: 72px minmax(0, 1fr); }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .reg li .rg { padding-right: 28px; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .reg li .rg h3.t-m,
  html[data-ontwerp="d"]:where([data-pagina="home"]) .reg li .rg h3.t-t { font-size: 18px; font-stretch: 100%; overflow-wrap: normal; hyphens: auto; }
}
/* een titel op één regel is maar 23 px hoog: 1 px lucht boven en onder maakt het doel 24 px, zonder dat er iets verschuift */
html[data-ontwerp="d"]:where([data-pagina="home"]) :is(.feat .ft, .reg .rg) h3 a { padding-block: 1px; }

/* ==========================================================================
   Beweging — enkel bij prefers-reduced-motion: no-preference
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* foto's: bij aandacht traag 3% dichterbij */
  html[data-ontwerp="d"]:where([data-pagina="home"]) .ph img { transition: transform var(--t3) var(--ease); }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .end .go > span:first-child { transition: background-size 220ms var(--ease-x); }
  html[data-ontwerp="d"] .hdr .hex-btn { transition: background-color var(--t2) var(--ease), color var(--t2) var(--ease); }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .logos a { transition: box-shadow var(--t1) var(--ease); }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .reg li .rg::after { transition: translate var(--t2) var(--ease); }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .reg li:has(h3 a:focus-visible) .rg::after { translate: 4px 0; }
  /* "u bent hier": de oranje streep wordt bij aankomst getrokken, de zeshoek van de soort werk draait één zesde slag */
  html[data-ontwerp="d"] .nav a[aria-current]::after { animation: slag 600ms var(--ease) 200ms backwards; }
  /* verzonden: de pagina schuift eerst naar de bevestiging, dan draait het teken */
  html[data-ontwerp="d"]:where([data-pagina="home"]) .ok > div > .t-l:first-child::before { animation: moer 600ms var(--ease) 700ms backwards; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .card:has(h3 a:focus-visible) .ph img { transform: scale(1.03); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html[data-ontwerp="d"]:where([data-pagina="home"]) .card:hover .ph img,
  html[data-ontwerp="d"]:where([data-pagina="home"]) a.ph:hover img,
  html[data-ontwerp="d"]:where([data-pagina="home"]) .reg li:hover .pv img { transform: scale(1.03); }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .reg li:hover .rg::after { translate: 4px 0; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .card:hover .end .go > span:first-child { background-position: 0 100%, 0 100%; background-size: 100% 1px, 100% 1px; transition: background-size var(--t2) var(--ease); }
}
@media (hover: hover) {
  html[data-ontwerp="d"]:where([data-pagina="home"]) .card:hover .end .go > span:first-child { background-position: 0 100%, 0 100%; background-size: 100% 1px, 100% 1px; }
  html[data-ontwerp="d"] .hdr .hex-btn-link:hover .hex-btn { animation: none; background: var(--or-d); color: #fff; }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .logos a:hover { box-shadow: inset 0 0 0 1px var(--anth); }
  html[data-ontwerp="d"]:where([data-pagina="home"]) .soorten a:hover { color: var(--fg); }
  /* een veld onder de muis: de lijn wordt lichter (de oranje lijn blijft voor de focus) */
  html[data-ontwerp="d"]:where([data-pagina="home"]) .f:not(.fout) input:hover:not(:focus),
  html[data-ontwerp="d"]:where([data-pagina="home"]) .f:not(.fout) textarea:hover:not(:focus) { border-bottom-color: rgba(247, 246, 242, .75); }
}
html[data-ontwerp="d"] .hdr .hex-btn-link:focus-visible .hex-btn { animation: none; background: var(--or-d); color: #fff; }
/* indrukken: meteen oranje, zonder de witte flits (na hover en focus, zodat het altijd wint) */
html[data-ontwerp="d"] .hdr .hex-btn-link:active .hex-btn { animation: none; background: var(--or-d); color: #fff; }
/* telefoon en e-mail in de kop: grijs → wit → oranje, zoals de klant ze vroeg (N34/N42/N13), op hun eigen tempo (0,45 s, eenmalig).
   Zonder beweging: meteen oranje (de regels hierboven). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ob-flits {
    0% { background-color: #2a2e33; color: #f7f6f2; }
    40% { background-color: #fff; color: #2a2e33; }
    100% { background-color: #b85a38; color: #fff; }
  }
  html[data-ontwerp="d"] .hdr .hex-btn-link:focus-visible .hex-btn { animation: ob-flits 450ms ease-out forwards; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html[data-ontwerp="d"] .hdr .hex-btn-link:hover .hex-btn { animation: ob-flits 450ms ease-out forwards; }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-ontwerp="d"] .hdr .hex-btn-link:active .hex-btn { animation: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* de lijn boven partners en boven "Bekijk onze realisaties" wordt gespannen zoals elke sectielijn */
    html[data-ontwerp="d"]:where([data-pagina="home"]) .prt,
    html[data-ontwerp="d"]:where([data-pagina="home"]) .idx-f { view-timeline: --slag block; }
    html[data-ontwerp="d"]:where([data-pagina="home"]) .prt::before,
    html[data-ontwerp="d"]:where([data-pagina="home"]) .idx-f::before { animation: slag linear; animation-fill-mode: none; animation-timeline: --slag; animation-range: cover 0px cover 40vh; }
    /* de zeshoek op de lopende kop draait één zesde slag aan terwijl de kop binnenkomt */
    html[data-ontwerp="d"]:where([data-pagina="home"]) .sh > h2::before,
    html[data-ontwerp="d"]:where([data-pagina="home"]) .ct > h2::before,
    html[data-ontwerp="d"]:where([data-pagina="home"]) .prt > h2::before { animation: moer linear both; animation-timeline: view(); animation-range: cover 0% cover 30%; }
  }
  @media screen and (prefers-reduced-motion: no-preference) {
    /* werf in beeld: een grijs vlak (de laadtoestand) trekt zich naar rechts terug terwijl de foto binnenkomt.
       De tijdlijn hoort bij de fotodoos zelf (die snijdt af en zou anders haar eigen scrollvenster zijn). */
    html[data-ontwerp="d"]:where([data-pagina="home"]) .feat .ph,
    html[data-ontwerp="d"]:where([data-pagina="home"]) .duo > .ph,
    html[data-ontwerp="d"]:where([data-pagina="home"]) .reg li .pv { view-timeline: --ob-foto block; }
    /* het kleine beeld van een registerregel staat in de systeemopmaak statisch: het vlak moet in het beeld blijven */
    html[data-ontwerp="d"]:where([data-pagina="home"]) .reg li .pv { position: relative; }
    html[data-ontwerp="d"]:where([data-pagina="home"]) .feat .ph::after,
    html[data-ontwerp="d"]:where([data-pagina="home"]) .duo > .ph::after,
    html[data-ontwerp="d"]:where([data-pagina="home"]) .reg li .pv::after {
      content: ""; position: absolute; inset: 0; background: var(--ph); transform-origin: 100% 50%; pointer-events: none;
      animation: slag linear both reverse; animation-timeline: --ob-foto; animation-range: entry 0% entry 30%;
    }
  }
}

/* ==========================================================================
   Afdrukken: geen banden, inkt op wit
   ========================================================================== */
@media print {
  html[data-ontwerp="d"] .hdr,
  html[data-ontwerp="d"] .ftr { background: #fff; }
}

/* ##########################################################################
   Uit ontwerp-c.css · C · Antraciet — de inhoud van elke andere pagina (met de oproep en de lightbox)
   De opmerkingen hieronder komen uit C. Wat ze over de kop, het menu of de voet zeggen, geldt in D niet: daar staat B.
   ########################################################################## */
/* ==========================================================================
   C · Antraciet
   De hele site in het antraciet van de hero (#222629), met het raster zichtbaar als haarlijnen op de
   kolomranden. Eén letter: Mona Sans, breed (125) en in kapitalen voor koppen en labels, normaal (100)
   voor tekst. Papier enkel waar gelezen of ingevuld wordt (het formulier, de toelichting van een project,
   de juridische tekst). Diep antraciet (#17191b) voor de oproep en de voet. Oranje voor knoppen, het ene
   zeshoekige meetpunt op elke sectielijn en de getekende lijn.

   Zes stijlen (uit het concept):
     display  125 600 kap.  44–104   de naam van een overzicht, de oproep
     h2       125 600 kap.  26–44    de uitspraak van een sectie
     titel    108 500       29–56    de titel van een project
     h3       108 500       19–24    projecttitels, waarden
     lead     100 400       18–21    inleidingen
     label    125 580 kap.  12       wat benoemt of bedient

   Beweging (enkel bij prefers-reduced-motion: no-preference; de R blijft de enige lus):
     - elke sectielijn wordt bij het scrollen gespannen, vanuit het meetpunt; het meetpunt draait mee één zesde slag;
     - de uitspraak van een sectie komt 16 px omhoog terwijl ze binnenkomt (scrollgebonden);
     - foto's zetten zich bij het scrollen (schaal 1,06 → 1) en krijgen bij aandacht hun volle kleur en 2,5% zoom;
     - de naam van een pagina komt bij aankomst één keer omhoog (0,7 s), de inleiding volgt; de lijn onder "u bent hier"
       wordt getrokken (ook in het menu op de telefoon);
     - elke regel van het register en elke kaart van het overzicht komt 16 px omhoog terwijl ze binnenschuift;
     - bellen en mailen flitsen zoals in het gekozen ontwerp (lijn → licht → oranje, 0,45 s, eenmalig);
     - pijlen schuiven 4 px, regels in het register lichten op, links tekenen hun lijn. Overgangen ≤ 700 ms.

   Contrast (gemeten): #f7f6f2 op #222629 15,0:1 · #a3a7ab op #222629 7,0:1 · #8d9196 op #17191b 5,6:1
   · #17191b op #ce6943 (knop) 4,8:1, op #d9774f (hover) 5,6:1 · #5c6166 op #f7f6f2 5,9:1 · #2a2e33 op #fff 13,9:1
   ========================================================================== */
@font-face {
  font-family: "Ontwerp C Mona Sans";
  src: url("/fonts/ontwerp-mona-sans-volledig.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

html[data-ontwerp="d"]:where(:not([data-pagina="home"])) {
  --c0: #17191b; --c1: #222629; --c2: #2a2e33; --c3: #3a3f45;
  --c-paper: #f7f6f2; --c-box: #d9dadc; --c-field: #8a8e93;
  --c-or: #ce6943; --c-or-h: #d9774f;
  --c-line: rgba(247, 246, 242, .14); --c-line2: rgba(247, 246, 242, .30);
  --c-gl: rgba(247, 246, 242, .04);
  --c-sec: clamp(88px, 10vw, 144px);
  --c-ease: cubic-bezier(.2, .7, .2, 1);
  --c-arr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 8H13.2M11.6 2.8 14.6 8l-3 5.2' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E");
  --c-hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: #222629;
}

/* ---------- letter en ondergronden ---------- */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.hdr, .dark, .paper, .grey, .deep, .lb):where(:not(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"])) {
  font-family: "Ontwerp C Mona Sans", "Mona Sans", "Mona Sans terugval", system-ui, sans-serif;
  line-height: 1.65;
}
/* de pagina zelf is antraciet; vanaf 900px liggen de twaalf kolommen er als haarlijnen in (zoals in het concept) */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) #inhoud { background-color: var(--c1); }
@media (min-width: 900px) {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) #inhoud {
    background-image:
      repeating-linear-gradient(90deg, var(--c-gl) 0 1px, transparent 1px calc((100% + var(--g)) / 12)),
      linear-gradient(270deg, var(--c-gl) 0 1px, transparent 1px);
    background-size: min(100% - 2 * var(--m), 1280px) 100%;
    background-position: 50% 0;
    background-repeat: no-repeat;
  }
}
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.dark, .paper, .grey, .deep, .hdr):where(:not(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"])) {
  --rule: var(--c-line); --rule2: var(--c-line2);
}
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.dark, .phd.dark, .s3-hd.dark, .bridge) { background: transparent; }
/* papier wordt antraciet, behalve de juridische tekst (lezen) */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .paper:not(.lg-sec) {
  background: transparent; color: var(--hi);
  --fg: var(--hi); --fg2: var(--mid); --fg3: var(--lo); --focus: var(--or); --acc: var(--or); --lnk: var(--or-l);
  --ph: var(--c3); --ph-fg: #b4b8bc;
}
/* de oproep en de voet: diep antraciet */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.grey, .deep):where(:not(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"])) {
  background: var(--c0); color: var(--hi);
  --fg: var(--hi); --fg2: var(--mid); --fg3: var(--lo); --focus: var(--or); --acc: var(--or); --lnk: var(--or-l);
  --ph: var(--c3); --ph-fg: #b4b8bc;
}
/* papier: wat gelezen of ingevuld wordt */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.frm-w, .blk:has(> .sx > .txt), .lg-sec) {
  color: var(--ink);
  --fg: var(--ink); --fg2: var(--ink-mid); --fg3: var(--ink-mid);
  --rule: rgba(42, 46, 51, .16); --rule2: rgba(42, 46, 51, .42); --focus: var(--or-d); --acc: var(--or-d); --lnk: var(--or-t);
  --ph: var(--c-box); --ph-fg: #4f5459;
}

/* ---------- zes stijlen ---------- */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .t-l:where(:not(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"])) { font-stretch: 125%; font-weight: 580; letter-spacing: .14em; line-height: 1.35; --trk: .14em; }
/* h3: projecttitels, waarden */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.t-m, .t-t) {
  font-stretch: 108%; font-weight: 500; font-size: clamp(19px, 1.6667vw, 24px); line-height: 1.25; letter-spacing: -.01em;
}
/* titel: de titel van een project */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.t-xl, .nxc h3.t-t) {
  font-stretch: 108%; font-weight: 500; font-size: clamp(29px, 3.8889vw, 56px); line-height: 1.06; letter-spacing: -.025em; text-transform: none;
}
/* volgend project: een rustige titel van twee à drie regels, nooit luider dan de h1 van de pagina zelf */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .nxc h3.t-t { font-size: clamp(24px, 2.5vw, 36px); line-height: 1.1; text-wrap: balance; }
/* h2: de uitspraak van een sectie, breed en in kapitalen */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.sh .st.t-xl, .sh .st > .t-xl, .cst > .t-xl, .prt > h2, .sx > .side > h2) {
  font-stretch: 125%; font-weight: 600; text-transform: uppercase; font-size: clamp(26px, 3.0556vw, 44px); line-height: 1; letter-spacing: -.01em;
  text-wrap: balance; color: var(--fg);
}
/* display: de naam van een overzicht en de oproep */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.mast h1, .cta .sh .st) {
  font-stretch: 125%; font-weight: 600; text-transform: uppercase; font-size: clamp(44px, 7.2vw, 104px); line-height: .92; letter-spacing: -.02em;
  text-wrap: balance;
}
/* smalste telefoons (320–359): één woord van een naam past altijd op de regel; een lange samenstelling breekt op een
   afbreekstreepje (lang="nl"), nooit midden in een letter */
@media (max-width: 359px) {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.sh .st.t-xl, .sh .st > .t-xl, .cst > .t-xl, .prt > h2, .sx > .side > h2) {
    font-size: 7.4vw; -webkit-hyphens: auto; hyphens: auto;
  }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.mast h1, .cta .sh .st) { font-size: 12.4vw; -webkit-hyphens: auto; hyphens: auto; }
}
/* een juridische pagina en de 404 dragen hun naam ook breed, een maat kleiner (lange woorden passen op 320px) */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.phd > .wrap > h1:first-child, #fout-title) {
  font-stretch: 125%; font-weight: 600; text-transform: uppercase; font-size: clamp(30px, 5.5556vw, 80px); line-height: .96; letter-spacing: -.02em;
  text-wrap: balance; max-width: none;
}
/* lead: inleidingen */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.lead, .lead.t-m, .cta-r > .cx, .cst .sub, .prt > .leeg p) {
  font-stretch: 100%; font-weight: 400; font-size: clamp(18px, 1.4583vw, 21px); line-height: 1.5; letter-spacing: 0; color: var(--fg2);
}
/* label: metaregels, onderschriften, formulierlabels */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.meta, .pair figcaption, .f label, .call > span, .bot):where(:not(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"])) {
  font-stretch: 125%; font-weight: 580; text-transform: uppercase; font-size: 12px; line-height: 1.35; letter-spacing: .14em;
}

/* ---------- knoppen en links ---------- */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .btn:where(:not(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"])) {
  min-height: 56px; padding: 0 22px 0 24px; gap: 24px; justify-content: space-between;
  background: var(--c-or); color: var(--c0); border-radius: 0;
  font-stretch: 125%; font-weight: 580; text-transform: uppercase; font-size: 12px; line-height: 1; letter-spacing: .14em;
}
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .btn .i:where(:not(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"])) { width: 18px; height: 18px; }
/* smalle telefoon (320–399): de knop blijft binnen de goot */
@media (max-width: 399px) {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .btn:where(:not(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"])) { gap: 12px; padding: 0 16px 0 18px; letter-spacing: .1em; max-width: 100%; white-space: normal; text-align: left; }
}
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.btn:active, .btn[aria-disabled="true"]):where(:not(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"])) { background: var(--c-or); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .btn:focus-visible:where(:not(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"])) { outline: 2px solid var(--fg, var(--hi)); outline-offset: 3px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .idx-f .go {
  background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--rule2);
}
@media (hover: hover) {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .btn:hover:where(:not(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"])) { background: var(--c-or-h); }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.btn--line, .idx-f .go):hover:where(:not(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"])) { background: transparent; box-shadow: inset 0 0 0 1px var(--fg); }
}
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .go { gap: 12px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .back { color: var(--fg2); }
@media (hover: hover) { html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .back:hover { color: var(--fg); } }

/* ---------- beelden: één grading (concept), bij aandacht volle kleur en 2,5% dichterbij ---------- */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .ph img { filter: saturate(.8) contrast(1.02); }
@media (hover: hover) {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.card:hover .ph img, a.ph:hover img, .reg li:hover .pv img) { filter: saturate(1) contrast(1.02); transform: scale(1.025); }
}
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.card:has(h3 a:focus-visible) .ph img, a.ph:focus-visible img) { filter: saturate(1) contrast(1.02); }

/* ---------- sectielijn met één zeshoekig meetpunt ---------- */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.sh, .ln-top) { padding-top: 20px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cta .sh::before { display: block; }
/* de eerste sectie onder de hero: de onderrand van de hero is haar lijn (geen tweede lijn eronder);
   het meetpunt kan daar niet op staan zonder de hero te raken, dus het vervalt hier */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .sh.op-hero::after { display: none; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.sh, .ln-top, .prt)::after {
  content: ""; position: absolute; left: 0; top: -4.5px; width: 12px; height: 10px; background: var(--c-or);
  clip-path: var(--c-hex); pointer-events: none;
}
/* partners: dezelfde lijn (de sectie had er geen) */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .prt { position: relative; padding-top: 20px; view-timeline: --slag block; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .prt::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule);
  transform-origin: 0 50%; pointer-events: none;
}

/* een sectie zonder label (partners, de hoofdstukken van een project): de uitspraak staat verder onder de lijn,
   zodat ze even ver van lijn en meetpunt ademt als label + uitspraak elders */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.sx:not(:has(> .nxc)), .prt) { padding-top: 36px; }
@media (min-width: 900px) { html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.sx:not(:has(> .nxc)), .prt) { padding-top: 40px; } }

/* sectiekop: label op de lijn, daaronder de uitspraak in h2 (kolom 1–8) */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .sh { row-gap: 32px; align-items: end; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .sh > :is(h2, .nm) { color: var(--fg2); }
@media (min-width: 900px) {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .sh > :is(h2, .nm) { grid-column: 1 / -1; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .sh > .st { grid-column: 1 / 9; }
}

/* ==========================================================================
   Homepage onder de hero
   ========================================================================== */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) #realisaties:where(:not(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"])) { padding-top: 0; padding-bottom: var(--c-sec); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) #realisaties .sh.op-hero { padding-top: clamp(56px, 5.5556vw, 80px); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) #realisaties .sh > .st { display: contents; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) #realisaties .st > .t-xl { grid-column: 1 / -1; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .soorten { grid-column: 1 / -1; margin-top: 0; gap: 0 24px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .soorten a { min-height: 44px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .soorten .nr { color: var(--fg3); font-stretch: 125%; }
/* de soorten werk staan rechts naast de uitspraak; lopen ze op twee regels, dan groeien ze omhoog in de ruimte naast
   het label in plaats van de uitspraak omlaag te duwen (label → uitspraak blijft overal even ver) */
@media (min-width: 900px) {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) #realisaties .sh > h2 { grid-column: 1 / 8; grid-row: 1; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) #realisaties .st > .t-xl { grid-column: 1 / 8; grid-row: 2; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .soorten { grid-column: 8 / 13; grid-row: 1 / 3; align-self: end; gap: 0 20px; margin-bottom: -13px; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .soorten a { min-height: 32px; }
}

/* uitgelicht project: beeld 3:2 in kolom 1–8, het titelblok onderaan in 9–12 */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .feat { margin-top: 56px; row-gap: 24px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .feat .ph { aspect-ratio: 3 / 2; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .pj .ft { gap: 16px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .pj .ft > * { margin: 0; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .pj .meta { border-top: 0; padding-top: 0; margin-bottom: 0; justify-content: flex-start; flex-wrap: wrap; gap: 4px 20px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .pj .tz { color: var(--fg2); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .pj .end { border-top: 0; padding-top: 0; margin-top: 4px; }
/* het beeld houdt zijn verhouding (niet uitgerekt tot de hoogte van een lang titelblok); het titelblok staat onderaan */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .pj .ph { align-self: start; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .pj .ft { align-self: end; }
@media (min-width: 900px) {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .feat { margin-top: 80px; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .feat .ph { grid-column: 1 / 9; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .feat .ft { grid-column: 9 / 13; align-self: end; gap: 20px; padding-bottom: 4px; }
}

/* metaregel: volgnummer eerst, in het licht; de rest in label */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .meta { color: var(--fg2); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .meta .no { order: -1; color: var(--fg); font-stretch: 125%; font-weight: 580; }

/* register: nummer, beeld, titel, soort en een pijl, elk in zijn kolom */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .idx { margin-top: 72px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .reg li { position: relative; grid-template-columns: 120px minmax(0, 1fr); column-gap: 16px; padding: 20px 0; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .reg li .rg { row-gap: 8px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .rg .meta { justify-content: flex-start; flex-wrap: wrap; gap: 2px 14px; }
/* smalste telefoons: een kleiner beeld, zodat een lange soort (TOTAALRENOVATIE) naast het beeld past */
@media (max-width: 359px) { html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .reg li { grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; } }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .rg .meta.solo { position: static; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .rg:has(.meta.solo) h3 { padding-right: 0; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .idx-f { margin-top: 40px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .idx-f .go { min-height: 56px; padding: 0 22px 0 24px; gap: 24px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .idx-f .go .ln { background: none; }
/* op een telefoon drie regels (zoals het concept): een register, geen lijstje van twee */
@media (max-width: 599px) {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .reg li:nth-child(3) { display: grid; border-bottom: 1px solid var(--rule); }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .reg li:nth-child(2):not(:last-child) { border-bottom: 0; }
}
@media (min-width: 600px) and (max-width: 899px) { html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .reg li { grid-template-columns: 160px minmax(0, 1fr); column-gap: var(--g); } }
@media (min-width: 900px) {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .idx { margin-top: 96px; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .reg li { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: center; padding: 16px 0; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.reg li .rg, .reg li .rg .meta) { display: contents; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .reg li .meta .no { grid-column: 1 / 2; grid-row: 1; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .reg li .pv { grid-column: 2 / 4; grid-row: 1; justify-self: stretch; width: auto; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .reg li .rg h3 { grid-column: 4 / 9; grid-row: 1; padding-right: 24px; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .reg li .meta > span:first-child { grid-column: 9 / 12; grid-row: 1; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .reg li::after {
    content: ""; grid-column: 12 / 13; grid-row: 1; justify-self: end; width: 18px; height: 18px; background-color: var(--fg2);
    -webkit-mask: var(--c-arr) center / contain no-repeat; mask: var(--c-arr) center / contain no-repeat;
  }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .idx-f { margin-top: 48px; }
}
@media (min-width: 900px) and (hover: hover) {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .reg li:hover { background-color: rgba(247, 246, 242, .025); }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .reg li:hover::after { background-color: var(--c-or); translate: 4px 0; }
}

/* ---------- de oproep: diep antraciet, de uitspraak in display ---------- */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cta { padding-block: var(--c-sec); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cta .sh { padding-top: 20px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cta .sh .st { grid-column: 1 / -1; margin-top: 16px; color: var(--fg); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cta-r { margin-top: 40px; row-gap: 40px; align-items: end; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cta-r > .cx { max-width: 26em; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cta-r .do { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 32px 48px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .do .btn { width: auto; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .call { gap: 6px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .call > span { color: var(--fg2); }
@media (min-width: 900px) {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cta .sh .st { margin-top: 40px; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cta-r { margin-top: 64px; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cta-r > .cx { grid-column: 1 / 6; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cta-r .do { grid-column: 7 / 13; align-items: center; }
}
/* korte oproep op een juridische pagina */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cta-kort { padding-block: clamp(56px, 6.6667vw, 96px); }

/* ---------- partners: tegels in antraciet, de logo's licht ---------- */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .prt-s { padding-top: var(--c-sec); padding-bottom: var(--c-sec); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .prt { row-gap: 32px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .logos { gap: var(--g); border-bottom: 0; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .logos li { border-top: 0; background: var(--c2); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .logos img { mix-blend-mode: screen; filter: grayscale(1) invert(1) contrast(1.15); opacity: .85; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .logos :is(a, .lv) { color: var(--fg2); }
@media (hover: hover) {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .logos a:hover { box-shadow: inset 0 0 0 1px var(--rule2); }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .logos a:hover img { opacity: 1; }
}
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .logos a:active { box-shadow: inset 0 0 0 1px var(--fg); }
@media (min-width: 900px) {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .prt > h2 { grid-column: 1 / 5; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.logos, .prt > .leeg) { grid-column: 5 / 13; }
  /* vier per rij op elke breedte vanaf 900px: acht logo's zijn altijd twee volle rijen */
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* 900–1199: de tegels krijgen de volle breedte onder de naam (in kolom 5–12 werden de logo's te klein om te lezen) */
@media (min-width: 900px) and (max-width: 1199px) {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .prt > h2 { grid-column: 1 / -1; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.logos, .prt > .leeg) { grid-column: 1 / -1; }
}

/* ---------- contact: links de gegevens op antraciet, rechts het formulier op papier tot de rand ---------- */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) #contact { padding-top: 0; padding-bottom: 0; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .ct { row-gap: 32px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .ct > h2 { color: var(--fg2); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cst .sub { margin-top: 24px; max-width: 22em; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cdl { margin-top: 8px; border-top: 1px solid var(--rule); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cdl div { padding: 18px 0 16px; gap: 4px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cdl dd { min-height: 0; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cdl dd a { min-height: 44px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .frm-w {
  margin-top: 32px; padding: 48px 0 var(--c-sec); background: var(--c-paper);
  box-shadow: 0 0 0 100vmax var(--c-paper); clip-path: inset(0 -100vmax);
}
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) #frm-title {
  position: static; width: auto; height: auto; margin: 0 0 8px; padding: 0; overflow: visible; clip: auto; white-space: normal;
  font-stretch: 108%; font-weight: 500; font-size: clamp(19px, 1.6667vw, 24px); line-height: 1.25; letter-spacing: -.01em; color: var(--ink);
}
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.frm, .ok) { border-top: 0; padding-top: 0; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .frm .req { margin-bottom: 32px; font-size: 16px; color: var(--ink-mid); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .fields { gap: 24px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .f { gap: 8px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .f label { color: var(--ink); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .f label .o { color: var(--ink-mid); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.f input, .f textarea) {
  height: 52px; padding: 13px 16px; background: #fff; border: 1px solid var(--c-field); border-radius: 0; color: var(--ink); line-height: 24px;
}
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .f textarea { height: auto; min-height: 168px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.f input, .f textarea):focus-visible { outline: 2px solid var(--or-d); outline-offset: 0; border-color: var(--ink); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .f input:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 100px #fff; }
@media (hover: hover) { html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.f input, .f textarea):hover { border-color: var(--ink); } }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .f:is(.fout, :has(:user-invalid)) :is(input, textarea) { border-color: var(--err); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .send { margin-top: 32px; display: flex; flex-direction: column-reverse; align-items: flex-start; justify-content: flex-start; gap: 20px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .send p { font-size: 16px; color: var(--ink-mid); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .send .btn { width: auto; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .ok .ok-t { font-size: clamp(22px, 2.2222vw, 32px); line-height: 1.16; }
@media (min-width: 600px) {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .f { grid-column: auto; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .f.w { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .ct { grid-template-rows: auto auto auto 1fr; align-items: start; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .ct > h2 { grid-column: 1 / -1; grid-row: 1; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cst { grid-column: 1 / 6; grid-row: 2; }
  /* de gegevens houden een sectiemarge onder zich: na een kort bevestigingspaneel komt de voetlijn niet vlak onder hun lijn */
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cdl { grid-column: 1 / 6; grid-row: 3; display: block; margin-top: 8px; margin-bottom: var(--c-sec); }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .frm-w { grid-column: 7 / 13; grid-row: 2 / 5; align-self: stretch; margin-top: 0; padding: 56px 0 var(--c-sec) 56px; clip-path: inset(0 -100vmax 0 0); }
}
/* smal paneel (900–1399): twee regels plaats voor elk label, zodat de velden naast elkaar op één lijn blijven */
@media (min-width: 900px) and (max-width: 1399px) {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .f:not(.w) label { min-height: 2.7em; display: flex; flex-wrap: wrap; align-content: flex-end; column-gap: .45em; }
}
@media (min-width: 1200px) {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.f, .f:nth-child(2), .f:nth-child(4)) { grid-column: auto; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .f.w { grid-column: 1 / -1; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .send { display: flex; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .send .btn { width: auto; }
}

/* ==========================================================================
   Paginakop (project, juridisch, 404)
   ========================================================================== */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .phd { padding-top: 32px; padding-bottom: 72px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .kick { margin-top: 56px; color: var(--fg2); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .phd h1.t-xl { max-width: 20em; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .phd > .wrap > h1:first-child { margin-top: 40px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .phd .row { margin-top: 32px; row-gap: 40px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .facts { border-top: 1px solid var(--rule); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .facts div { padding: 14px 0; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .facts dt { color: var(--fg2); }
@media (min-width: 900px) {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .phd { padding-top: 40px; padding-bottom: 96px; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .kick { margin-top: 80px; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .phd > .wrap > h1:first-child { margin-top: 72px; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .phd .row { margin-top: 48px; }
}

/* ---------- projectpagina: kop, inleiding en gegevens, dan de omslag over de volle breedte ---------- */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) [aria-labelledby="project-title"]:where(:not(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"])) { display: flex; flex-direction: column; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) [aria-labelledby="project-title"] > .paper { display: contents; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) [aria-labelledby="project-title"] > .phd { order: 1; padding-bottom: 0; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) [aria-labelledby="project-title"] .intro { order: 2; width: 100%; padding-bottom: 72px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) [aria-labelledby="project-title"] > .bridge { order: 3; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) [aria-labelledby="project-title"] .blk { order: 4; width: 100%; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .intro .row { padding-top: 32px; margin-top: 0; row-gap: 40px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .intro .lead { color: var(--fg2); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .bridge .wrap { max-width: none; padding-inline: 0; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .bridge .ph { aspect-ratio: 3 / 2; }
@media (min-width: 900px) {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) [aria-labelledby="project-title"] .intro { padding-bottom: 96px; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .intro .row { padding-top: 48px; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .bridge .ph { aspect-ratio: 12 / 5; }
}

/* hoofdstukken: lijn, de naam in h2 over de volle breedte (met de uitleg rechts), dan de inhoud over de volle breedte */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .blk { padding-top: var(--c-sec); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .blk:last-child { padding-bottom: var(--c-sec); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .sx { row-gap: 48px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .sx > .side p { margin-top: 24px; max-width: 34em; color: var(--fg2); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .pair { gap: 32px var(--g); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .pair figcaption { margin-top: 12px; color: var(--fg2); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .vn-gal > h3:where(:not(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"])) { color: var(--fg); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .slider-arrow:active:not([aria-disabled="true"]) { background: rgba(247, 246, 242, .06); }
/* de paginering: maatstreepjes, het huidige in oranje (de zeshoek blijft het meetpunt op de sectielijn) */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .slider-dot span,
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .slider-dot[aria-current="true"] span { width: 20px; height: 2px; clip-path: none; border-radius: 0; background: var(--fg3); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .slider-dot[aria-current="true"] span { background: var(--c-or); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .slider-dot:active span { background: var(--fg); }
@media (hover: hover) { html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .slider-dot:not([aria-current="true"]):hover span { background: var(--fg2); } }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .slider-dot:focus-visible { outline-offset: -8px; }
/* het eerste streepje begint op de kolomrand (de knop is 44 px, het streepje 20) */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .slider-dots { margin-left: -12px; }
/* tekst naast of onder een beeld: dezelfde maat als de toelichting, rustig grijs, met lucht tussen de alinea's */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .duo .txt .body { font-size: 18px; line-height: 1.6; color: var(--fg2); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .duo .txt .body > p + p { margin-top: 1em; }
/* over dit project: op papier, tot de randen */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .blk:has(> .sx > .txt) {
  margin-top: var(--c-sec); padding-bottom: var(--c-sec);
  background: var(--c-paper); box-shadow: 0 0 0 100vmax var(--c-paper); clip-path: inset(0 -100vmax);
}
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .blk:has(> .sx > .txt) .body { font-size: 18px; line-height: 1.6; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .txt .body.has-lead > p:first-child { font-stretch: 100%; font-weight: 400; font-size: clamp(18px, 1.4583vw, 21px); line-height: 1.5; letter-spacing: 0; }
/* volgend project: de naam blijft een label op de lijn */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .sx:has(> .nxc) > .side > h2 {
  font-stretch: 125%; font-weight: 580; text-transform: uppercase; font-size: 12px; line-height: 1.35; letter-spacing: .14em; color: var(--fg2);
}
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .nxc { row-gap: 24px; }
@media (min-width: 900px) {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .sx { row-gap: 64px; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .sx > .side { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: last baseline; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .sx > .side > h2 { grid-column: 1 / 8; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .sx > .side > p { grid-column: 8 / 13; margin-top: 0; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .sx > :is(.pair, .main-c, .duo) { grid-column: 1 / -1; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .pair { gap: 32px var(--g); }
  /* over dit project: naam in kolom 1–4, tekst in 5–10 */
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .sx:has(> .txt) > .side { grid-column: 1 / 5; display: block; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .sx > .txt { grid-column: 5 / 11; }
  /* beeld met tekst */
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .duo:where(:not(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"])) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .duo > .ph { grid-column: 1 / 8; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .duo > .txt { grid-column: 8 / 13; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .duo--stapel > .ph { grid-column: 1 / -1; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .duo--stapel > .txt { grid-column: 5 / 11; }
  /* volgend project: beeld 1–4, tekst 5–11 (een lange titel blijft zo op twee à drie regels, het blok zo hoog als het beeld) */
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .nxc { grid-column: 1 / -1; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .nxc .ph { grid-column: 1 / 5; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .nxc .ft { grid-column: 5 / 12; align-self: end; gap: 20px; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .nxc h3.t-t { max-width: 22em; }
}
/* 900–1199: een groter beeld (kolom 1–5), zodat het titelblok niet hoger wordt dan het beeld */
@media (min-width: 900px) and (max-width: 1199px) {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .nxc .ph { grid-column: 1 / 6; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .nxc .ft { grid-column: 6 / 13; }
}

/* ==========================================================================
   Realisaties
   ========================================================================== */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .s3-hd { padding-bottom: 0; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .mast { padding-top: 72px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .mast .row { margin-top: 32px; row-gap: 56px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .mast .lead { max-width: 28em; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .flt { grid-column: 1 / -1; margin-inline: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .flt ul { display: flex; flex-wrap: wrap; gap: 0 28px; padding: 4px 0; overflow: visible; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .flt li { flex: none; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .flt a { justify-content: flex-start; align-items: center; gap: 8px; min-height: 48px; padding: 0; border: 0; color: var(--fg2); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .flt a[aria-current] { color: var(--fg); border: 0; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .flt a[aria-current] .hx { display: none; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .flt a[aria-current] .ln { background: none; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .flt a[aria-current]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: var(--c-or); transform-origin: 0 50%;
}
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .flt .n { font-stretch: 125%; font-weight: 580; font-size: 12px; line-height: 1.35; letter-spacing: .14em; color: var(--fg2); }
/* het aantal naast Voor en Na: zelfde grijs als in de filter (--fg3 haalt op de donkere grond geen 4,5:1) */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .vn-gal .vn-n:where(:not(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"])) { color: var(--fg2); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .s3-bd { padding-top: 56px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cards { grid-template-columns: minmax(0, 1fr); gap: 0 var(--g); padding-bottom: calc(var(--c-sec) - 56px); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cards .card { margin-bottom: 56px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cards .meta { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--rule); justify-content: space-between; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cards h3 { margin-top: 12px; }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cards .tz { margin-top: 10px; max-width: 34em; color: var(--fg2); }
@media (min-width: 600px) {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .mast { padding-top: 112px; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .mast .row { margin-top: 48px; row-gap: 80px; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .mast .lead { grid-column: 1 / 7; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .flt ul { gap: 0 40px; padding: 8px 0; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .s3-bd { padding-top: 80px; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: calc(var(--c-sec) - 96px); }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cards .card { margin-bottom: 96px; }
}

/* ==========================================================================
   Juridisch en 404
   ========================================================================== */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .lg-sec { background: var(--c-paper); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .cta-kort .t-m { color: var(--fg); }
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .links-404 { gap: 8px 40px; margin-top: 48px; }

/* afdrukken: zwart op wit, zoals het gekozen ontwerp */
@media print {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(#inhoud, .dark, .paper, .grey, .deep, .frm-w, .blk, .lg-sec):where(:not(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"])) {
    background: #fff !important; box-shadow: none !important; color: #000 !important;
    --fg: #000; --fg2: #333; --fg3: #333; --rule: #bbb; --rule2: #888;
  }
}

/* ==========================================================================
   Beweging (enkel zonder voorkeur voor minder beweging; geen lussen)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .ph img { transition: filter 700ms var(--c-ease), transform 700ms var(--c-ease); }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.btn--line, .idx-f .go):where(:not(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"])) { transition: box-shadow 300ms var(--c-ease), color 300ms var(--c-ease); }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.nav a, .flt a, .soorten a, .back, .ftr a):where(:not(.hdr, .hdr *, .ftr, .ftr *, body > [href="#inhoud"])) { transition: color 300ms var(--c-ease); }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .reg li { transition: background-color 300ms var(--c-ease); }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .reg li::after { transition: translate 360ms var(--c-ease), background-color 300ms var(--c-ease); }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .logos img { transition: opacity 300ms var(--c-ease); }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.f input, .f textarea) { transition: border-color 160ms var(--c-ease); }
  /* bij aankomst: de naam van de pagina komt één keer omhoog, de lijn onder "u bent hier" wordt getrokken */
  @keyframes c-op { from { opacity: 0; translate: 0 16px; } }
  @keyframes c-lijn { from { transform: scaleX(0); } }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.mast h1, .phd h1) { animation: c-op 700ms var(--c-ease) 100ms backwards; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.mast .lead, [aria-labelledby="project-title"] .intro .row) { animation: c-op 700ms var(--c-ease) 240ms backwards; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .flt a[aria-current]::after { animation: c-lijn 600ms var(--c-ease) 300ms backwards; }
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .slider-dot span { transition: background-color 300ms var(--c-ease); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* de lijn wordt gespannen vanuit het meetpunt; het meetpunt draait mee één zesde slag */
    @keyframes c-moer { from { rotate: -60deg; } }
    html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.sh, .ln-top, .prt)::after { animation: c-moer linear both; animation-timeline: --slag; animation-range: cover 0px cover 40vh; }
    html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .prt::before { animation: slag linear; animation-fill-mode: none; animation-timeline: --slag; animation-range: cover 0px cover 40vh; }
    /* de uitspraak van een sectie komt omhoog terwijl ze binnenkomt */
    html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.sh .st.t-xl, .sh .st > .t-xl, .cst > .t-xl, .prt > h2, .sx > .side > h2) {
      animation: c-op linear both; animation-timeline: view(); animation-range: entry 0% entry 100%;
    }
    /* foto's zetten zich terwijl ze in beeld schuiven */
    @keyframes c-zet { from { scale: 1.06; } }
    html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .ph { view-timeline: --c-ph block; }
    html[data-ontwerp="d"]:where(:not([data-pagina="home"])) .ph img { animation: c-zet linear both; animation-timeline: --c-ph; animation-range: entry 0% cover 50%; }
    /* het werk zelf: elke regel van het register en elke kaart komt 16 px omhoog terwijl ze binnenschuift */
    html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :is(.reg li, .cards .card) { animation: c-op linear both; animation-timeline: view(); animation-range: cover 0px cover 30vh; }
  }
}

/* ##########################################################################
   De naad: waar het kader van B de inhoud van C raakt
   ########################################################################## */
/* ---------- de tokens van B voor het kader: op <html> staan hier die van C ----------
   (gemaakt uit de html-regels van ontwerp-b.css en ontwerp-c.css en :root in site/css/rojects.css) */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :where(.hdr, .ftr, body > [href="#inhoud"]) {
  --c0: initial; --c1: initial; --c2: initial; --c3: initial; --c-paper: initial; --c-box: initial; --c-field: initial;
  --c-or: initial; --c-or-h: initial; --c-line: initial; --c-line2: initial; --c-gl: initial; --c-sec: initial;
  --c-ease: initial; --c-arr: initial; --c-hex: initial;
}
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :where(.hdr, .ftr, body > [href="#inhoud"]) {
  --ob-f: "Ontwerp B Archivo", "Helvetica Neue", Arial, sans-serif; --ink: #17191b; --anth: #2a2e33; --deep: #222629;
  --k1: #222629; --paper: #f7f6f2; --mist: #e8e9eb; --grey: #e8e9eb; --box: #d9dadc; --ink-mid: #5c6167; --mid: #a3a8ae;
  --lo: #a3a8ae; --soft: #d3d5d8; --or: #ce6943; --or-d: #b85a38; --or-dd: #a24d2e; --g: clamp(16px, 2.2222vw, 32px);
  --sec: clamp(88px, 11.1111vw, 160px); --ob-head: clamp(48px, 6.6667vw, 96px); --t3: 700ms;
}
/* ---------- wat de overslaanlink in B van <body> erft: hier rekent body met de tokens van C ----------
   (gemaakt uit de regels voor body in site/css/rojects.css; .hdr en .ftr zetten het zelf, in B) */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :where(body > [href="#inhoud"]) {
  color: var(--ink);
}
@media print {
  html[data-ontwerp="d"]:where(:not([data-pagina="home"])) :where(body > [href="#inhoud"]) {
    color: #000;
  }
}

/* ---------- de naad, met de hand (src/ontwerp-d/naad.css) ----------
   Enkel regels die bestaan omdat het kader van B (de kop, de overslaanlink en de voet) de inhoud van C raakt; de
   tokens en wat het kader van <body> erft, maakt maak.mjs zelf uit de bronnen. Elke selector begint met
   html[data-ontwerp="d"]; maak.mjs weigert alles wat dat niet doet. Na een wijziging: node src/ontwerp-d/maak.mjs,
   dan node ui-audit/ui10/vergelijk-d.mjs (moet "D GELIJK" geven). */

/* het doek op de andere pagina's: wat de browser toont wanneer men voorbij de boven- of onderrand trekt (de veer van
   een trackpad of telefoon). C kleurt het antraciet, op <html>, passend bij zijn donkere kop en voet; in D staan daar
   de papieren kop en voet van B, dus zou er boven de witte kop een donkere strook verschijnen. Zonder achtergrond op
   <html> wordt die van de body het doek, zoals in B: het papier (rojects.css; maak.mjs controleert dat het hetzelfde
   papier is als in B). Op de pagina zelf verandert er geen pixel: de body schilderde dat papier al zelf, en de kop, de
   inhoud en de voet bedekken het volledig. */
html[data-ontwerp="d"]:where(:not([data-pagina="home"])) { background: none; }

/* ---------- projectpagina: elke pagina dezelfde weg (Bram, 30 oktober) ----------
   Geen naad maar D's eigen regels voor de vaste opbouw van _project.twig: verder bladeren op één lijn onder het
   volgende project, en een tussenkop per deel van het verhaal. */
html[data-ontwerp="d"] .pnav {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 32px; padding-top: 24px; border-top: 1px solid var(--rule);
}
html[data-ontwerp="d"] .pnav-nr { color: var(--fg2); }
html[data-ontwerp="d"] .txt > h3:not(:first-child) { margin-top: 24px; }
/* volgend project op een smal scherm: de soort werk plakte tegen de foto */
@media (max-width: 899px) { html[data-ontwerp="d"] .nxc .ft { padding-top: 20px; } }