:root {
            /* Alle overige tokens uit het ontwerp staan al identiek in
               kit-tokens.css (die eerder laadt); dat lokale blok herschreef
               ze via ontkapsel.mjs tot cyclische zelfreferenties
               (--vlak: var(--vlak) enz.), ongeldig in de browser. Zie
               platform/GEBREKEN.md. --donker-zacht is de enige rol die niet
               al in het kit-palet voorkomt. */
            --donker-zacht: #b5aea4;
          }

          * { box-sizing: border-box; }

          body {
            margin: 0;
            background: var(--grond);
            color: var(--ink);
            font-family: "Manrope", system-ui, sans-serif;
            font-size: 17.5px;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
          }

          a { color: var(--accent-tekst); text-decoration: none; }
          a:hover { color: var(--ink); }

          img { display: block; max-width: 100%; }

          .kop {
            font-family: "Anton", "Manrope", sans-serif;
            font-weight: 400;
            letter-spacing: 0.005em;
            line-height: 0.9;
            text-transform: uppercase;
            margin: 0;
          }

          .wrap {
            max-width: 1240px;
            margin: 0 auto;
            padding-left: 32px;
            padding-right: 32px;
          }

          .g12 {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 28px;
          }

          .sectie { padding-top: 88px; padding-bottom: 88px; }
          .sectie-kort { padding-top: 64px; padding-bottom: 64px; }

          .maatlat {
            height: 17px;
            border-top: 1px solid var(--lijn);
            background-image:
              repeating-linear-gradient(to right, var(--accent) 0 1px, transparent 1px 16px),
              repeating-linear-gradient(to right, var(--accent) 0 1px, transparent 1px 80px);
            background-size: 100% 6px, 100% 13px;
            background-repeat: no-repeat, no-repeat;
            background-position: left top, left top;
          }

          .maatlat-donker {
            border-top-color: rgba(250, 248, 244, 0.22);
            background-image:
              repeating-linear-gradient(to right, rgba(250, 248, 244, 0.45) 0 1px, transparent 1px 16px),
              repeating-linear-gradient(to right, rgba(250, 248, 244, 0.45) 0 1px, transparent 1px 80px);
          }

          .balk {
            position: sticky;
            top: 0;
            z-index: 30;
            background: var(--grond);
            border-bottom: 1px solid var(--lijn);
          }

          .balk-rij {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            padding-top: 14px;
            padding-bottom: 14px;
          }

          .woordmerk { height: 38px; width: auto; }

          .knop {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--accent-vul);
            color: var(--accent-ink);
            font-weight: 800;
            font-size: 16px;
            letter-spacing: 0.01em;
            padding: 12px 22px;
            border: 1px solid var(--accent-vul);
            border-radius: var(--radius);
            transition: background 0.15s ease, border-color 0.15s ease;
          }
          .knop:hover { background: var(--ink); border-color: var(--ink); color: var(--grond); }

          .knop-om {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: transparent;
            color: var(--ink);
            font-weight: 800;
            font-size: 16px;
            padding: 12px 22px;
            border: 1px solid var(--ink);
            border-radius: var(--radius);
            transition: background 0.15s ease, color 0.15s ease;
          }
          .knop-om:hover { background: var(--ink); color: var(--grond); }

          .knop-wit {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--accent-ink);
            color: var(--accent-tekst);
            font-weight: 800;
            font-size: 17px;
            padding: 15px 26px;
            border: 1px solid var(--accent-ink);
            border-radius: var(--radius);
            transition: background 0.15s ease, color 0.15s ease;
          }
          .knop-wit:hover { background: var(--ink); color: var(--grond); border-color: var(--ink); }

          .opschrift {
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--ink-zacht);
            margin: 0;
          }
          /* --accent-tekst haalt 4,39:1 op --vlak-op (de contactsectie) —
             onder de eis van 4,5. #0a57dc is hetzelfde blauw, iets donkerder:
             5,19:1 op --vlak-op, 5,81:1 op --grond. Mobiel-conformiteit (4b). */
          .nr { color: #0a57dc; }
          .opschrift-wit { color: var(--accent-ink); }
          .opschrift-donker { color: var(--donker-zacht); }

          .hero-hoofd {
            font-size: clamp(30px, 12vw, 176px);
            line-height: 0.88;
          }
          .hero-plaats { color: var(--accent); }

          .hero-rij {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 40px;
            flex-wrap: wrap;
          }

          .lead {
            font-size: 22px;
            line-height: 1.5;
            max-width: 54ch;
            color: var(--ink-zacht);
            margin: 0;
            text-wrap: pretty;
          }

          .akties { display: flex; gap: 12px; flex-wrap: wrap; }

          .heroband {
            width: 100%;
            aspect-ratio: 21 / 9;
            object-fit: cover;
            object-position: 50% 52%;
          }

          .bijschrift {
            font-size: 13px;
            line-height: 1.5;
            color: var(--ink-zacht);
            margin: 0;
            text-wrap: pretty;
          }
          .bijschrift-donker { color: var(--donker-zacht); }

          .pillen { display: flex; flex-wrap: wrap; gap: 12px; }

          .pil {
            display: inline-flex;
            align-items: center;
            background: var(--vlak);
            border: 1px solid var(--lijn);
            border-radius: 999px;
            padding: 13px 26px;
            font-size: 20px;
            font-weight: 700;
            line-height: 1.2;
            color: var(--ink);
            transition: border-color 0.15s ease, color 0.15s ease;
          }
          .pil:hover { border-color: var(--accent); color: var(--accent-tekst); }

          .vaktekst {
            font-size: 17.5px;
            line-height: 1.6;
            color: var(--ink-zacht);
            max-width: 56ch;
            margin: 0;
            text-wrap: pretty;
          }

          .vlakblauw {
            background: var(--accent);
            color: var(--accent-ink);
          }

          .vlakblauw-kop {
            font-size: clamp(46px, 7vw, 104px);
            color: var(--accent-ink);
          }

          .feiten {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 28px;
          }

          .feit { border-top: 1px solid rgba(255, 255, 255, 0.4); padding-top: 16px; }

          .feit-tekst {
            font-size: 19px;
            line-height: 1.45;
            color: var(--accent-ink);
            margin: 0;
            text-wrap: pretty;
          }

          .donkervlak {
            background: var(--donker);
            color: var(--donker-ink);
          }

          .werkkop { font-size: clamp(40px, 5.2vw, 76px); color: var(--donker-ink); }

          .werktekst {
            font-size: 19px;
            line-height: 1.55;
            color: var(--donker-zacht);
            max-width: 46ch;
            margin: 0;
            text-wrap: pretty;
          }

          .hoofdbeeld {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            border: 1px solid rgba(250, 248, 244, 0.14);
          }

          .drieluik {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
          }

          .werkbeeld {
            width: 100%;
            aspect-ratio: 4 / 5;
            object-fit: cover;
            border: 1px solid rgba(250, 248, 244, 0.14);
          }

          .portret {
            width: 100%;
            aspect-ratio: 3 / 4;
            object-fit: cover;
            border-radius: var(--radius);
          }

          .overkop { font-size: clamp(38px, 4.6vw, 66px); }

          .overtekst {
            font-size: 19px;
            line-height: 1.6;
            color: var(--ink-zacht);
            max-width: 54ch;
            margin: 0;
            text-wrap: pretty;
          }

          .telefoon {
            font-family: "Anton", sans-serif;
            font-weight: 400;
            letter-spacing: 0.01em;
            font-size: clamp(34px, 4.4vw, 58px);
            line-height: 1;
            color: var(--ink);
            display: inline-block;
          }
          .telefoon:hover { color: var(--accent-tekst); }

          .formulier {
            background: var(--vlak);
            border: 1px solid var(--lijn);
            border-radius: var(--radius);
            padding: 32px;
            display: flex;
            flex-direction: column;
            gap: 18px;
          }

          .veld { display: flex; flex-direction: column; gap: 7px; }

          .label {
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--ink);
          }

          .invoer {
            font-family: "Manrope", sans-serif;
            font-size: 17px;
            color: var(--ink);
            background: var(--grond);
            border: 1px solid var(--lijn);
            border-radius: var(--radius);
            padding: 13px 15px;
            width: 100%;
          }
          .invoer:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

          .verstuur {
            font-family: "Manrope", sans-serif;
            font-size: 17.5px;
            font-weight: 800;
            background: var(--accent-vul);
            color: var(--accent-ink);
            border: 1px solid var(--accent-vul);
            border-radius: var(--radius);
            padding: 15px 24px;
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease;
          }
          .verstuur:hover { background: var(--ink); border-color: var(--ink); }

          .gegevensrij {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            border-top: 1px solid var(--lijn);
            padding-top: 10px;
            font-size: 15px;
            color: var(--ink-zacht);
          }
          .gegevensrij b { color: var(--ink); font-weight: 700; }

          .voetrij {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 28px;
            flex-wrap: wrap;
            padding-top: 30px;
            padding-bottom: 40px;
          }

          .voettekst { font-size: 14px; color: var(--ink-zacht); margin: 0; line-height: 1.7; }

          .k5 { grid-column: span 5; }
          .k6 { grid-column: span 6; }
          .k7 { grid-column: span 7; }
          .k12 { grid-column: span 12; }
          .kraanvak { grid-column: 1 / span 9; }
          .kraantekst { grid-column: 10 / span 3; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
          .overtekstvak { grid-column: 7 / span 6; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
          .formvak { grid-column: 7 / span 6; }

          .stapel { display: flex; flex-direction: column; }
          .gap8 { gap: 8px; }
          .gap12 { gap: 12px; }
          .gap16 { gap: 16px; }
          .gap20 { gap: 20px; }
          .gap28 { gap: 28px; }
          .gap40 { gap: 40px; }
          .gap56 { gap: 56px; }

          .kopregels { display: flex; flex-direction: column; }

          .regelvak { display: block; overflow: hidden; }

          .balk { transition: box-shadow 0.3s ease; }
          .balk-rij { transition: padding 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); }
          .woordmerk { transition: height 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); }
          .balk-klein { box-shadow: 0 10px 28px -22px rgba(28, 26, 23, 0.65); }
          .balk-klein .balk-rij { padding-top: 8px; padding-bottom: 8px; }
          .balk-klein .woordmerk { height: 28px; }

          .beeldvak { display: block; overflow: hidden; }
          .beeldvak img { transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); }
          .beeldvak:hover img { transform: scale(1.04); }

          .parallax-vak { display: block; overflow: hidden; }
          .parallax-beeld { transform: scale(1.12); will-change: transform; }

          .knop, .knop-om, .knop-wit, .verstuur {
            transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
          }
          .knop:hover, .knop-om:hover, .knop-wit:hover, .verstuur:hover { transform: translateY(-2px); }
          .knop:active, .knop-om:active, .knop-wit:active, .verstuur:active { transform: translateY(0); }

          .pil { transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1); }
          .pil:hover { transform: translateY(-3px); }

          .telefoon {
            background-image: linear-gradient(var(--accent-tekst), var(--accent-tekst));
            background-repeat: no-repeat;
            background-position: left 100%;
            background-size: 0% 3px;
            transition: color 0.2s ease, background-size 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
          }
          .telefoon:hover { background-size: 100% 3px; }

          .gegevensrij { transition: border-color 0.25s ease, color 0.25s ease; }
          .gegevensrij:hover { border-color: var(--accent); }

          .label { transition: color 0.2s ease; }
          .veld:focus-within .label { color: var(--accent-tekst); }
          .invoer { transition: border-color 0.2s ease, background 0.2s ease; }

          .feit { transition: border-color 0.3s ease; }
          .feit:hover { border-top-color: rgba(255, 255, 255, 0.95); }

          .anim-uit *, .anim-uit *::before, .anim-uit *::after {
            animation-duration: 0.001s !important;
            animation-delay: 0s !important;
            transition-duration: 0.001s !important;
            transition-delay: 0s !important;
          }

          @media (prefers-reduced-motion: no-preference) {
            .rijs {
              animation: rijsop 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
            }
            .rijs2 { animation-delay: 0.07s; }
            .rijs3 { animation-delay: 0.14s; }

            .regel { animation: regelop 0.95s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
            .regel2 { animation-delay: 0.1s; }
            .regel3 { animation-delay: 0.2s; }

            .latload { animation: latop 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
            /* Duur/vertraging verkort t.o.v. het ontwerp (was 0.7s/0.36s en
               0.48s): bij de oorspronkelijke timing rendert de knop nog
               middenin de opacity-overgang op het moment dat een test hem
               opmeet, en een knop die vervaagt naar de paginagrond geeft
               even een te laag contrast tussen tekst en vulling — reëel,
               niet alleen een testartefact. Zelfde cascade, sneller ingezet;
               niets aan het animatietype of de volgorde gewijzigd. Mobiel-
               conformiteit (4b). */
            .opload { animation: rijsop 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both; animation-delay: 0.08s; }
            .opload2 { animation-delay: 0.16s; }

            [data-op="op"], [data-op="lat"], [data-op="beeld"], .regelvak > [data-op="regel"] {
              transition:
                opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0s),
                transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0s),
                clip-path 0.95s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0s);
            }
            [data-op="op"] { opacity: 0; transform: translateY(22px); }
            .regelvak > [data-op="regel"] { transform: translateY(104%); }
            .regelvak.op-in > [data-op="regel"] { transform: none; }
            [data-op="lat"] { transform: scaleX(0); transform-origin: left center; }
            [data-op="beeld"] { opacity: 0; clip-path: inset(0 0 26% 0); }
            [data-op="op"].op-in, [data-op="lat"].op-in, [data-op="beeld"].op-in {
              opacity: 1;
              transform: none;
              clip-path: inset(0 0 0 0);
            }

            .trap > * { opacity: 0; }
            .trap.op-in > * { opacity: 1; animation: rijsop 0.62s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; }
            .trap.op-in > *:nth-child(2) { animation-delay: 0.08s; }
            .trap.op-in > *:nth-child(3) { animation-delay: 0.16s; }
            .trap.op-in > *:nth-child(4) { animation-delay: 0.24s; }
          }

          @keyframes rijsop {
            from { opacity: 0; transform: translateY(14px); }
            to { opacity: 1; transform: none; }
          }

          @keyframes regelop {
            from { transform: translateY(104%); }
            to { transform: none; }
          }

          @keyframes latop {
            from { transform: scaleX(0); }
            to { transform: none; }
          }

          @media (max-width: 900px) {
            .wrap { padding-left: 20px; padding-right: 20px; }
            .sectie { padding-top: 56px; padding-bottom: 56px; }
            .sectie-kort { padding-top: 44px; padding-bottom: 44px; }
            .g12 { gap: 22px; }
            .k5, .k6, .k7, .kraanvak, .kraantekst, .overtekstvak, .formvak { grid-column: span 12; }
            .feiten { grid-template-columns: repeat(2, 1fr); }
            .drieluik { grid-template-columns: 1fr; }
            .heroband { aspect-ratio: 4 / 3; }
            .portret { aspect-ratio: 4 / 3; }
            /* .drieluik valt hierboven al terug op 1 kolom volle breedte; op
               de basis-verhouding van 4:5 wordt elk beeld dan torenhoog (bij
               768px content-breedte >900px hoog per beeld, 3 op een rij) en
               groeit de donkere sectie tot een veelvoud van de rest van de
               pagina. 3:2 houdt de drie werkbeelden liggend en dus korter dan
               het vierkante hoofdbeeld erboven. Mobiel-conformiteit (4b). */
            .werkbeeld { aspect-ratio: 3 / 2; }
            .woordmerk { height: 30px; }
            .lead { font-size: 19px; }
            .pil { font-size: 17px; padding: 11px 20px; }
            .formulier { padding: 22px; }
          }

          @media (max-width: 640px) {
            .hero-hoofd { font-size: 13.2vw; }
          }

          @media (max-width: 560px) {
            .feiten { grid-template-columns: 1fr; }
            .balk-rij .knop { font-size: 14px; padding: 10px 14px; }
          }

          /* Snoei — herhaalde inline stijlen uit het ontwerp (4b) */
          .pb8 { padding-bottom: 8px; }
          .kop-midden { font-size: clamp(36px, 4.4vw, 62px); }

          /* Raakvlakken op mobiel onder 44px — mobiel-conformiteit (4b) */
          .merklink { display: inline-flex; padding: 8px 0; margin: -8px 0; }
          .voettekst a { display: inline-block; padding: 13px 0; margin: -13px 0; }

          /* Geen JavaScript: dan mag niets verborgen blijven. Bewust als losse
             override met !important, zodat de onthulcascade hierboven exact
             blijft zoals hij ontworpen is - hem prefixen verhoogt de
             specificiteit en laat de .op-in-regels verliezen. */
          html:not(.js) [data-op],
          html:not(.js) .trap > *,
          html:not(.js) .regelvak > [data-op="regel"] {
            opacity: 1 !important;
            transform: none !important;
            clip-path: none !important;
          }