:root{--font-heading:"Archivo", system-ui, sans-serif;--font-body:"Source Serif 4", Georgia, serif;--font-mono:"IBM Plex Mono", ui-monospace, monospace;--zwart:#0b0b0c;--vlak:#151517;--lijn:#2a2a2e;--wit:#f4f3f0;--grijs:#a9a8a4;--rood:#d42c22;--rood-licht:#ff6a5f}body{background:var(--zwart);color:var(--wit)}::selection{background:var(--rood);color:#fff}:focus-visible{outline:2px solid var(--rood);outline-offset:3px;border-radius:4px}.label{font-family:var(--site-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grijs);align-items:center;gap:10px;font-size:12px;display:flex}.punt{background:var(--rood);width:8px;height:8px;animation:puls 2.4s var(--ease-uit) infinite;border-radius:50%;box-shadow:0 0 #e3342a99}@keyframes puls{0%{box-shadow:0 0 #e3342a8c}70%,to{box-shadow:0 0 0 10px #e3342a00}}em{color:var(--grijs);font-style:normal}.knop{background:var(--rood);color:#fff;min-height:48px;font-family:var(--site-serif);transition:transform .4s var(--ease-uit), background .3s;white-space:nowrap;border-radius:999px;justify-content:center;align-items:center;padding:0 24px;font-size:16px;font-weight:600;text-decoration:none;display:inline-flex}.knop:hover{background:#e2372c;transform:translateY(-2px)}.knop-lijn{color:var(--wit);background:0 0;box-shadow:inset 0 0 0 1px #4a4a50}.knop-lijn:hover{background:#ffffff0f}.knop-klein{min-height:40px;padding:0 18px;font-size:14px}.knop-groot{min-height:60px;padding:0 34px;font-size:19px}.tekstlink{font-family:var(--site-mono);letter-spacing:.04em;color:var(--wit);text-underline-offset:5px;-webkit-text-decoration-color:var(--rood);text-decoration-color:var(--rood);margin-top:18px;font-size:13px;display:inline-block}.kop{z-index:20;padding:14px var(--rand);transition:background .4s, padding .4s var(--ease-uit);align-items:center;gap:32px;display:flex;position:fixed;inset:0 0 auto}.kop.is-gescrold{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0b0b0cdb;padding-block:8px}.merk{font-family:var(--site-serif);letter-spacing:.12em;text-transform:uppercase;align-items:center;gap:12px;font-size:15px;font-weight:800;text-decoration:none;display:flex}.kop nav{gap:28px;margin-left:auto;display:flex}.kop nav a{color:var(--grijs);font-size:15px;text-decoration:none;transition:color .2s}.kop nav a:hover{color:var(--wit)}.hero{isolation:isolate;align-content:end;min-height:100svh;padding-bottom:28px;display:grid;position:relative}.hero-beeld{--p:0;z-index:-1;clip-path:inset(calc((1 - var(--p)) * 72px + 12px) calc((1 - var(--p)) * 4vw) calc((1 - var(--p)) * 12px) round calc((1 - var(--p)) * 28px));position:absolute;inset:0;overflow:hidden}.hero-beeld img{object-fit:cover;object-position:50% 30%;width:100%;height:100%;transform:scale(calc(1.06 - var(--p) * .06))}.hero-beeld:after{content:"";background:linear-gradient(180deg, #0b0b0c59 0%, #0b0b0c1a 35%, #0b0b0ce0 78%, var(--zwart) 100%);position:absolute;inset:0}.hero-tekst{padding-top:28vh}.hero h1{font-family:var(--site-serif);text-transform:uppercase;letter-spacing:-.035em;max-width:18ch;margin-top:18px;font-size:clamp(46px,6.6vw,112px);font-weight:800;line-height:.9}.hero h1 .regel{padding-bottom:.04em;display:block;overflow:hidden}.hero h1 .regel>span{display:inline-block}.hero-sub{color:#d9d7d2;max-width:44ch;margin-top:24px;font-size:clamp(17px,1.2vw + 12px,21px)}.acties{flex-wrap:wrap;gap:12px;margin-top:28px;display:flex}.vertrouwen{border-top:1px solid var(--lijn);grid-template-columns:repeat(4,1fr);gap:16px;margin:48px auto 0;padding:22px 0 0;list-style:none;display:grid}.vertrouwen li{color:var(--grijs);flex-wrap:wrap;align-items:baseline;gap:8px;font-size:15px;display:flex}.vertrouwen b{font-family:var(--site-serif);color:var(--wit);font-size:20px;font-weight:700}.sterren{color:var(--rood-licht);letter-spacing:2px;font-size:13px}.aanbod{grid-template-columns:1fr 1.4fr;gap:48px;padding:clamp(96px,14vw,180px) 0 clamp(64px,8vw,120px);display:grid}.sectie-kop h2,.zaak h2,.cta h2{font-family:var(--site-serif);text-transform:uppercase;letter-spacing:-.03em;margin-top:16px;font-size:clamp(36px,5vw,72px);font-weight:800;line-height:.95}.diensten{border-top:1px solid var(--lijn);margin:0;padding:0;list-style:none}.diensten li{border-bottom:1px solid var(--lijn);grid-template-columns:64px 1fr;column-gap:20px;padding:32px 0;display:grid}.diensten .nr{font-family:var(--site-mono);color:var(--rood-licht);grid-row:span 2;padding-top:10px;font-size:14px}.diensten h3{font-family:var(--site-serif);letter-spacing:-.02em;text-transform:uppercase;font-size:clamp(30px,3.4vw,46px);font-weight:700}.diensten p{color:var(--grijs);max-width:46ch;margin-top:8px}.zaak{padding:clamp(40px,6vw,80px) 0}.zaak-raster{grid-template-columns:1.3fr 1fr;align-items:center;gap:clamp(32px,5vw,80px);display:grid}.zaak-beeld{aspect-ratio:4/3;border-radius:20px;overflow:hidden}.zaak-beeld img{object-fit:cover;width:100%;height:100%}.zaak-tekst>p:not(.label){color:#d0cec9;max-width:40ch;margin-top:20px}.cta{text-align:center;justify-items:center;padding:clamp(110px,16vw,220px) 0;display:grid}.cta h2{max-width:14ch;font-size:clamp(42px,7.5vw,120px)}.cta mark{color:var(--rood-licht);background:0 0}.cta p{color:var(--grijs);max-width:44ch;margin:22px 0 32px}.voet{border-top:1px solid var(--lijn);background:var(--vlak);padding:64px 0 120px}.voet-raster{grid-template-columns:1.2fr 1fr 1fr .7fr;align-items:start;gap:40px;display:grid}.voet-logo{opacity:.92;width:140px;height:auto}.voet p:not(.label){margin-top:10px}.voet a{text-underline-offset:4px}.zacht{color:var(--grijs);font-size:15px}.klein{font-family:var(--site-mono);color:#77767a;letter-spacing:.06em;margin-top:56px;font-size:12px}.belbalk{display:none}@media (width<=900px){.kop nav{display:none}.kop .knop-klein{margin-left:auto}.hero-tekst{padding-top:40vh}.vertrouwen{grid-template-columns:1fr 1fr;row-gap:14px}.aanbod,.zaak-raster,.voet-raster{grid-template-columns:1fr}.aanbod,.voet-raster{gap:28px}.belbalk{z-index:30;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 40px #00000080, inset 0 0 0 1px var(--lijn);background:#151517e6;border-radius:999px;grid-template-columns:1.4fr 1fr;gap:8px;padding:8px;display:grid;position:fixed;inset:auto 12px 12px}.belbalk .knop{min-height:48px}}@media (width<=480px){.kop .knop-klein{display:none}.hero h1{font-size:clamp(42px,13.5vw,60px)}.acties .knop{flex:100%}.diensten li{grid-template-columns:44px 1fr}}
