@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 900;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/roboto-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 900;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/roboto-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/roboto-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/roboto-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/roboto-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/roboto-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/roboto-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/roboto-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/roboto-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/roboto-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 800;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/roboto-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 800;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/roboto-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/roboto-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/roboto-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--c-bg: #f4f3f0;
--c-card: #ffffff;
--c-ink: #171a24;
--c-navy: #171a24;
--c-accent: #3c58a4;
--c-accent-2: #6f8ae0;
--c-accent-soft: #eef1f9;
--c-soft: #6b7280;
--c-line: #e8e6e1;
--c-beige: #e7e3df;
--c-kraft: #c4b89a;
--c-ok: #2e9e6b;
--c-warn: #d99a2b;
--c-danger: #cf5a4e;
--c-dark-1: #6a85d6;
--c-dark-2: #3c58a4;
--c-dark-3: #24397a;
--c-on-dark: #ffffff;
--c-on-dark-soft: #dbe2f6;
--c-accent-on-dark-1: #ffffff;
--c-accent-on-dark-2: #e8dcc0;
--c-device: #0c1020;
--c-footer-bg: #24397a;
--c-footer-text: #c9d3f0;
--c-footer-link: #e6ebfa;
--c-footer-head: #aebce8;
--shadow-rgb: 16, 22, 43;
--font-sans: "Roboto", Arial, Helvetica, sans-serif;
--font-script: "Glypher", cursive;
--fs-hero: 46px;
--fs-statement: 40px;
--fs-h2: 34px;
--fs-h3: 32px;
--fs-lead: 16.5px;
--fs-body: 16px;
--fs-small: 13.5px;
--fs-kicker: 12.5px;
--lh-hero: 0.92;
--lh-head: 1;
--lh-snug: 1.375;
--lh-relaxed: 1.625;
--ls-hero: -2.5px;
--ls-h2: -1.6px;
--ls-kicker: 1.6px;
--fw-head: 900;
--fw-bold: 700;
--fw-semi: 600;
--wrap: 1200px;
--gutter: 20px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-24: 96px;
--section-y: 64px;
--band-y: 90px;
--r-xs: 6px;
--r-sm: 8px;
--r-md: 12px;
--r-bubble: 16px;
--r-base: 18px;
--r-card: 20px;
--r-lg: 24px;
--r-xl: 28px;
--r-band: 36px;
--r-pill: 9999px;
--sh-bubble: 0 18px 40px -18px rgba(var(--shadow-rgb), .45), 0 0 0 1px rgba(0, 0, 0, .05);
--sh-card: 0 24px 50px -18px rgba(var(--shadow-rgb), .45), 0 0 0 1px rgba(0, 0, 0, .05);
--sh-open: 0 18px 40px -26px rgba(var(--shadow-rgb), .35);
--sh-lift: 0 22px 48px rgba(28, 28, 28, .14);
--sh-btn: 0 16px 30px -14px rgba(60, 88, 164, .75);
--sh-btn-accent: 0 14px 30px -12px rgba(60, 88, 164, .7);
--sh-laptop: 0 50px 100px -40px rgba(var(--shadow-rgb), .55), inset 0 0 0 1px rgba(255, 255, 255, .06);
--sh-phone: 0 40px 80px -30px rgba(var(--shadow-rgb), .6), inset 0 0 0 1px rgba(255, 255, 255, .08);
--sh-push: 0 24px 50px -20px rgba(10, 14, 30, .55);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-std: cubic-bezier(0.4, 0, 0.2, 1);
--dur-fast: 150ms;
--dur-hover: 350ms;
--dur-swap: 500ms;
--dur-push: 600ms;
--dur-cross: 700ms;
--dur-reveal: 850ms;
--stagger: 100ms;
}
@media (min-width: 640px) {
:root { --fs-hero: 66px; --fs-statement: 56px; }
}
@media (min-width: 768px) {
:root {
--fs-hero: 84px;
--fs-statement: 78px;
--fs-h2: 52px;
--fs-h3: 48px;
--fs-lead: 18px;
--ls-hero: -3px;
--gutter: 22px;
--section-y: 96px;
--band-y: 120px;
--r-bubble: 18px;
--r-xl: 32px;
}
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overscroll-behavior: none; }
body {
background: var(--c-bg);
color: var(--c-ink);
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
overflow-wrap: break-word;
overflow-x: clip;
}
img { display: block; max-width: 100%; }
* { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2.5px solid var(--c-accent); outline-offset: 2px; }
.dark :focus-visible, .grain :focus-visible { outline-color: #fff; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.h-hero { font-size: var(--fs-hero); line-height: var(--lh-hero); font-weight: var(--fw-head); letter-spacing: var(--ls-hero); margin: 0; }
.h-statement { font-size: var(--fs-statement); line-height: .98; font-weight: var(--fw-head); letter-spacing: -2.5px; margin: 0; }
.h2 { font-size: var(--fs-h2); line-height: 1.02; font-weight: var(--fw-head); letter-spacing: var(--ls-h2); margin: 0; color: var(--c-navy); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--c-soft); }
.kicker { font-size: var(--fs-kicker); font-weight: 800; text-transform: uppercase; letter-spacing: var(--ls-kicker); color: var(--c-accent); }
.grad {
background-image: linear-gradient(95deg, var(--c-accent) 10%, var(--c-accent-2) 90%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
padding-bottom: .06em;
}
.dark .grad { background-image: linear-gradient(95deg, var(--c-accent-on-dark-1) 10%, var(--c-accent-on-dark-2) 90%); }
.script { font-family: var(--font-script); font-weight: 400; letter-spacing: 0; font-size: 1.22em; color: var(--c-accent); }
.dark-card {
position: relative; overflow: hidden; color: var(--c-on-dark);
border-radius: var(--r-band);
background: radial-gradient(120% 100% at 18% -10%, var(--c-dark-1) 0%, var(--c-dark-2) 48%, var(--c-dark-3) 100%);
}
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
border-radius: var(--r-pill); padding: 16px 28px;
font: var(--fw-bold) 16px/1 var(--font-sans); text-decoration: none; cursor: pointer; border: 0;
transition: background-color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-std);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--c-accent); color: #fff; box-shadow: var(--sh-btn); }
.btn-primary:hover { background: #2e4a94; }
.btn-outline { background: #fff; color: var(--c-navy); border: 1px solid var(--c-line); }
.btn-outline:hover { border-color: var(--c-accent); }
.lift { transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover); }
.lift:hover { transform: translateY(-6px); box-shadow: var(--sh-lift); }
.papier {
background-color: var(--c-bg);
background-image: url("../img/papier-licht.png");
background-image: image-set(url("../img/papier-licht.webp") type("image/webp"), url("../img/papier-licht.png") type("image/png"));
background-size: 400px 400px;
}
.grain { position: relative; isolation: isolate; }
.grain::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: .55;
background-image: url("../img/papier-donker.png");
background-image: image-set(url("../img/papier-donker.webp") type("image/webp"), url("../img/papier-donker.png") type("image/png"));
background-size: 400px 400px;
}
.grain.dark-card {
-webkit-mask-image: -webkit-radial-gradient(white, black);
mask-image: radial-gradient(white, black);
}
@keyframes reveal-up    { from { opacity: 0; transform: translateY(48px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes reveal-left  { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: none; } }
@keyframes reveal-right { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: none; } }
@keyframes zoom-in      { from { opacity: 0; transform: scale(.84); } to { opacity: 1; transform: scale(1); } }
@keyframes blur-in      { from { opacity: 0; filter: blur(14px); transform: translateY(22px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes pop-up       { 0% { opacity: 0; transform: translateY(26px) scale(.92); } 65% { transform: translateY(-4px) scale(1.02); } 100% { opacity: 1; transform: none; } }
@keyframes clip-up      { from { opacity: 0; clip-path: inset(100% 0 0 0); transform: translateY(16px); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } }
.reveal { opacity: 0; }
.reveal.in-view { animation: reveal-up var(--dur-reveal) var(--ease-out) forwards; }
.reveal-left.in-view  { animation-name: reveal-left; }
.reveal-right.in-view { animation-name: reveal-right; }
.reveal-zoom.in-view  { animation-name: zoom-in; }
.reveal-blur.in-view  { animation-name: blur-in; }
.reveal-pop.in-view   { animation-name: pop-up; }
.reveal-clip.in-view  { animation-name: clip-up; }
.reveal-2.in-view { animation-delay: .1s; }
.reveal-3.in-view { animation-delay: .2s; }
.reveal-4.in-view { animation-delay: .3s; }
.reveal-5.in-view { animation-delay: .4s; }
.reveal-6.in-view { animation-delay: .5s; }
.onthul { position: relative; height: 220vh; --p: 0; }
.onthul-podium {
position: sticky; top: 0; height: 100vh; overflow: hidden;
display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 20px;
}
.onthul-kop { text-align: center; opacity: calc(1 - var(--p) * 1.6); transform: translateY(calc(var(--p) * -60px)); }
.onthul-toneel { position: relative; width: 100%; max-width: 900px; margin-top: 32px; perspective: 1400px; }
.onthul-laptop {
transform:
rotateX(calc(28deg - min(var(--p), 0.55) * 51deg))
scale(calc(0.78 + min(var(--p), 0.5) * 0.44))
translateY(calc(40px - min(var(--p), 0.55) * 72px));
transform-origin: 50% 100%;
}
.onthul-links, .onthul-rechts { position: absolute; }
.onthul-links {
left: 1%; top: 22%; width: 22%;
opacity: clamp(0, calc((var(--p) - 0.3) * 4), 1);
transform: translateX(calc((1 - clamp(0, (var(--p) - 0.3) * 3, 1)) * -120%)) rotate(-6deg);
}
.onthul-rechts {
right: 1%; top: 12%; width: 24%;
opacity: clamp(0, calc((var(--p) - 0.4) * 4), 1);
transform: translateX(calc((1 - clamp(0, (var(--p) - 0.4) * 3, 1)) * 120%)) rotate(6deg);
}
@media (min-width: 768px) {
.onthul-links { left: -8%; width: 20%; }
.onthul-rechts { right: -8%; width: 22%; }
}
.zijwaarts { position: relative; --p: 0; }
.zijwaarts-podium { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.zijwaarts-baan {
display: flex; gap: 24px; width: max-content; margin-top: 40px;
padding-inline: max(22px, calc((100vw - 1200px) / 2 + 22px));
transform: translate3d(calc(var(--p) * var(--dx, 0px) * -1), 0, 0);
}
.zijwaarts-baan > * { flex-shrink: 0; }
.voortgang { height: 3px; border-radius: 9999px; background: rgba(30, 39, 68, .1); overflow: hidden; max-width: 220px; }
.voortgang > span { display: block; height: 100%; background: var(--c-accent); transform-origin: left; transform: scaleX(var(--p)); }
.scroll-prog {
position: fixed; top: 0; left: 0; z-index: 200;
width: 100%; height: 3px;
transform: scaleX(0); transform-origin: 0 50%;
background: linear-gradient(90deg, var(--c-kraft), var(--c-accent) 55%, var(--c-accent-2));
}
@keyframes push-in { 0% { opacity: 0; transform: translateY(-18px) scale(.96); } 100% { opacity: 1; transform: none; } }
.push-in { animation: push-in var(--dur-push) var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal.in-view { opacity: 1; animation: none; }
.push-in { animation: none; }
}
.laptop { position: relative; }
.laptop-rand {
position: relative;
background: var(--c-device);
border-radius: 14px;
padding: 1.1% 1.1% 1.6%;
box-shadow: var(--sh-laptop);
}
.laptop-camera {
position: absolute; top: .45%; left: 50%; transform: translateX(-50%);
width: .6%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .15);
}
.laptop-scherm {
position: relative; overflow: hidden; container-type: inline-size;
aspect-ratio: 16 / 10; border-radius: 6px; background: #fff;
}
.laptop-voet {
position: relative; margin: 0 -5%; height: 10px;
border-radius: 0 0 18px 18px;
background: linear-gradient(to bottom, #d9dbe1, #a9adb8);
box-shadow: 0 18px 30px -12px rgba(var(--shadow-rgb), .5);
}
.laptop-voet::after {
content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 16%; height: 40%; border-radius: 0 0 8px 8px; background: rgba(142, 146, 156, .6);
}
@media (min-width: 768px) {
.laptop-rand { border-radius: 18px; }
.laptop-scherm { border-radius: 8px; }
.laptop-voet { height: 14px; }
}
.telefoon {
position: relative;
background: var(--c-device);
border-radius: 15% / 7%;
padding: 3.2%;
box-shadow: var(--sh-phone);
}
.telefoon-scherm {
position: relative; overflow: hidden; container-type: inline-size;
aspect-ratio: 1290 / 2796;
border-radius: 12.5% / 5.8%;
background: #fff;
}
.telefoon-scherm > img, .laptop-scherm > img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top;
}
.telefoon-island {
position: absolute; top: 1.5%; left: 36%; width: 28%; height: 3.4%;
border-radius: 9999px; background: var(--c-device);
}
.telefoon-status {
position: absolute; left: 0; right: 0; top: 1.5%; height: 3.4%;
display: grid; grid-template-columns: 36% 28% 36%; align-items: center;
pointer-events: none; color: #10131c;
}
.telefoon-status .tijd { grid-column: 1; justify-self: center; font-size: 4.2cqw; font-weight: 700; line-height: 1; transform: translateY(.27cqw); }
.telefoon-status .iconen { grid-column: 3; justify-self: center; display: flex; align-items: center; gap: 1.2cqw; }
.telefoon-status svg { height: 2.7cqw; width: auto; }
.telefoon-home {
position: absolute; bottom: .9%; left: 50%; transform: translateX(-50%);
width: 36%; height: .5%; border-radius: 9999px; background: rgba(16, 19, 28, .8);
}
.telefoon.donker .telefoon-scherm { background: #000; }
.telefoon.donker .telefoon-status { color: #fff; }
.telefoon.donker .telefoon-home { background: rgba(255, 255, 255, .8); }
.tilt {
transform-style: preserve-3d; will-change: transform;
transition: transform .4s var(--ease-out);
}
@font-face { font-family: "Glypher"; src: url("../../Glypher.ttf") format("truetype"); font-weight: 400; font-display: swap; }
a { color: inherit; text-decoration: none; }
.ruimte { margin-block: calc(var(--section-y) * .7); }
.band { width: min(1240px, calc(100% - 28px)); margin-inline: auto; }
.center { text-align: center; }
.nav {
position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 300;
width: min(1180px, calc(100% - 28px));
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 9px 9px 9px 24px; border-radius: var(--r-pill);
background: rgba(255, 255, 255, .8);
-webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
box-shadow: 0 14px 34px -18px rgba(var(--shadow-rgb), .45), 0 0 0 1px rgba(var(--shadow-rgb), .05);
}
.nav-logo img { height: 25px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
display: inline-flex; align-items: center; font-size: 15px; font-weight: 500; color: var(--c-ink);
padding: 11px 15px; border-radius: var(--r-pill);
transition: background-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.nav-links a:hover { background: var(--c-accent-soft); color: var(--c-accent); }
.nav-links a.is-active { color: var(--c-accent); }
.nav-drop { position: relative; }
.nav-links .nav-drop-knop { display: inline-flex; align-items: center; gap: 6px; }
.nav-drop-knop svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-hover) var(--ease-out); }
.nav-menu { position: absolute; top: calc(100% + 14px); left: 50%; min-width: 240px; padding: 8px; border-radius: 20px; background: #fff;
box-shadow: 0 24px 50px -20px rgba(var(--shadow-rgb), .35), 0 0 0 1px rgba(var(--shadow-rgb), .06);
opacity: 0; pointer-events: none; transform: translate(-50%, -6px); transition: opacity var(--dur-fast), transform var(--dur-hover) var(--ease-out); }
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu, .nav-drop.open .nav-menu { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.nav-drop:hover .nav-drop-knop svg, .nav-drop.open .nav-drop-knop svg { transform: rotate(180deg); }
.nav-links .nav-menu a { display: flex; align-items: center; gap: 12px; padding: 9px 14px 9px 9px; border-radius: 12px; white-space: nowrap; }
.nav-menu a i { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--c-accent-soft); color: var(--c-accent); display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast), color var(--dur-fast); }
.nav-menu a i svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-menu a:hover i { background: var(--c-accent); color: #fff; }
.nav-links .nav-menu a.nav-alle { font-weight: 700; color: var(--c-accent); }
.nav-lijn { display: block; height: 1px; margin: 6px 10px; background: var(--c-line); }
.nav-go svg { height: 15px; width: auto; display: block; fill: var(--c-accent); }
.nav-links a.nav-cta { background: var(--c-accent); color: #fff; font-weight: 700; padding: 13px 24px; margin-left: 8px; box-shadow: var(--sh-btn-accent); }
.nav-links a.nav-cta:hover { background: #2e4a94; color: #fff; }
.nav-toggle { display: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--c-accent); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.nav-toggle span { width: 18px; height: 2px; border-radius: 2px; background: #fff; transition: transform var(--dur-hover) var(--ease-out), opacity var(--dur-fast); }
.nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.gloed { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; }
.scene { position: relative; height: 300vh; }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.stage .gloed.g1 { width: 620px; height: 620px; background: #c9d5f4; top: -220px; right: -160px; opacity: .8; }
.stage .gloed.g2 { width: 520px; height: 520px; background: #ece2cb; bottom: -220px; left: -200px; opacity: .85; }
.koppen { position: absolute; z-index: 10; left: 0; right: 0; top: 12vh; padding: 0 20px; display: grid; justify-items: center; text-align: center; pointer-events: none; }
.koppen > * { grid-area: 1 / 1; }
.koppen p { font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--c-soft); max-width: 540px; margin: 18px auto 0; }
.scroll-tip { position: absolute; z-index: 10; left: 50%; bottom: 3.2vh; transform: translateX(-50%); font-size: 13px; font-weight: 600; color: var(--c-soft); display: flex; align-items: center; gap: 10px; }
.scroll-tip i { width: 22px; height: 34px; border-radius: 12px; border: 1.5px solid rgba(var(--shadow-rgb), .25); position: relative; }
.scroll-tip i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--c-accent); animation: tip 1.8s var(--ease-out) infinite; }
@keyframes tip { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }
.hero-foto { position: absolute; inset: 0; z-index: 0; border-radius: 0; overflow: hidden; background: var(--c-dark-3); }
.hero-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: grayscale(1) contrast(1.2) brightness(.95) blur(calc(3px - var(--diep, 0) * 3px)); transform: scale(calc(1.06 + var(--zoom, 0) * .08)); will-change: transform; }
.hero-foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, #5f7de0 0%, #3c58a4 55%, #2a4290 100%); mix-blend-mode: multiply; }
.hero-foto::after { content: ""; position: absolute; inset: 0; opacity: calc(.7 + var(--diep, 0) * .12);
background: radial-gradient(ellipse 58% 34% at 50% 22%, #22377a, transparent 80%), linear-gradient(180deg, #2c4590, #3c58a4 45%, #2c4590); }
.stage .h-statement { color: #fff; text-shadow: 0 6px 40px rgba(10, 20, 60, .3); }
.stage .grad { background-image: linear-gradient(95deg, #ffffff 10%, #e8dcc0 90%); }
.stage .koppen p { color: var(--c-on-dark-soft); }
.stage .sel { background-image: linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)); }
.stage .sel::after { border-color: #fff; }
.stage .sel b { background: var(--c-accent); border-color: #fff; }
.stage .scroll-tip { color: rgba(255,255,255,.8); }
.stage .scroll-tip i { border-color: rgba(255,255,255,.45); }
.stage .scroll-tip i::after { background: #fff; }
.stage .deksel-voor { box-shadow: 0 40px 80px -30px rgba(5, 10, 35, .6); }
.stage .toetsen { box-shadow: inset 0 0 0 1px rgba(0,0,0,.05), 0 50px 70px -30px rgba(5, 10, 35, .55); }
.stage .bubbel { box-shadow: 0 20px 40px -18px rgba(5, 10, 35, .55); }
.eind { position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 70px 20px 0; pointer-events: none; }
.eind-logo { position: relative; width: min(500px, 66vw); aspect-ratio: 700 / 223; opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity; }
.eind-logo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.eind-logo .l-wit { filter: brightness(0) invert(1); opacity: 0; }
.eind-logo { filter: drop-shadow(0 18px 40px rgba(10, 20, 60, .35)); }
.eind-teksten { display: grid; margin-top: clamp(26px, 4.5vh, 48px); }
.eind-teksten > * { grid-area: 1 / 1; }
.eind-tekst { opacity: 0; }
.intro-tekst { margin: 0; font-size: clamp(19px, 1.8vw, 26px); line-height: 1.4; font-weight: 500; color: var(--c-on-dark-soft); }
.h-eind { font-size: clamp(30px, 3.6vw, 52px); font-weight: var(--fw-head); line-height: 1.05; letter-spacing: -.035em; color: #fff; margin: 0; }
.eind-tekst p { font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--c-on-dark-soft); max-width: 540px; margin: 16px auto 0; }
.eind-tekst .knoppen { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.eind.live { pointer-events: auto; }
.eind .sel { background-image: linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)); }
.eind .sel::after { border-color: #fff; }
.eind .sel b { background: var(--c-accent); border-color: #fff; }
.k-voor .h-statement { font-size: clamp(44px, 6.4vw, 96px); letter-spacing: -.045em; line-height: .95; }
.k-voor .grad { padding-right: .06em; }
.bb { position: absolute; left: 0; top: 0; z-index: 6; width: 280px; opacity: 0; will-change: transform, opacity; }
.bubbel {
display: flex; align-items: flex-start; gap: 10px;
background: var(--c-card); border-radius: var(--r-bubble); border-bottom-left-radius: 6px;
padding: 10px 14px; box-shadow: var(--sh-bubble);
}
.bubbel-ic { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--c-accent-soft); color: var(--c-accent); display: flex; align-items: center; justify-content: center; }
.bubbel-ic.kraft { background: #f3eee2; color: #9b8a5e; }
.bubbel-ic.rood { background: #fbeceb; color: var(--c-danger); }
.bubbel-ic svg { width: 17px; height: 17px; fill: currentColor; }
.bubbel-van { display: block; font-size: 12px; font-weight: 700; color: var(--c-soft); }
.bubbel-bericht { display: block; font-size: 15px; font-weight: 600; color: var(--c-ink); line-height: 1.375; }
.laptop3d { position: absolute; z-index: 5; left: 50%; bottom: 22vh; width: min(500px, 54vw); transform: translateX(-50%); perspective: 1600px; perspective-origin: 50% -60%; }
.rig { position: relative; width: 100%; aspect-ratio: 16 / 10.4; transform-style: preserve-3d; transform-origin: 50% 100%; will-change: transform; }
.deksel { position: absolute; inset: 0; transform-origin: 50% 100%; transform-style: preserve-3d; will-change: transform; }
.deksel-voor, .deksel-achter { position: absolute; inset: 0; border-radius: 16px 16px 6px 6px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.deksel-voor { background: var(--c-device); padding: 2.2% 2.2% 2.8%; box-shadow: var(--sh-laptop); }
.deksel-achter { background: linear-gradient(165deg, #eceef2, #c3c7cf); transform: rotateX(180deg); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.deksel-achter img { width: 32%; }
.toetsen { position: absolute; left: -3.5%; right: -3.5%; top: 100%; height: 100%; transform-origin: 50% 0; transform: rotateX(90deg); border-radius: 4px 4px 24px 24px;
background: linear-gradient(180deg, #cfd2d8, #e7e9ec 35%, #d6d9de); box-shadow: inset 0 0 0 1px rgba(0,0,0,.05), 0 50px 70px -30px rgba(var(--shadow-rgb), .35); }
.toetsen .kb { position: absolute; left: 8%; right: 8%; top: 7%; height: 47%; border-radius: 10px;
background: repeating-linear-gradient(90deg, transparent 0 6.2%, rgba(255,255,255,.07) 6.2% 6.9%), repeating-linear-gradient(0deg, transparent 0 17%, rgba(255,255,255,.07) 17% 19.5%), linear-gradient(#3a3d45, #2a2d34); }
.toetsen .tp { position: absolute; left: 33%; right: 33%; top: 61%; height: 29%; border-radius: 10px; background: linear-gradient(#d2d5da, #c6c9cf); box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }
.scherm { position: relative; width: 100%; height: 100%; border-radius: 7px; overflow: hidden; background: #fff; font-size: 11px; color: #222; }
.scherm-balk { height: 7%; background: #f1f2f4; display: flex; align-items: center; gap: 1%; padding: 0 2%; }
.scherm-balk i { width: 1.4%; aspect-ratio: 1; border-radius: 50%; background: #d3d6db; }
.scherm-balk span { margin-left: 2%; flex: 1; height: 38%; border-radius: 6px; background: #e4e6ea; }
.ig { padding: 3% 4%; }
.ig-kop { display: flex; align-items: center; gap: 3.4%; padding-right: 9%; }
.ig-av { width: 10%; aspect-ratio: 1; border-radius: 50%; flex: none; background: #fff; display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px #3c58a4; }
.ig-av img { width: 78%; }
.ig-info { flex: 1; min-width: 0; }
.ig-naam { font-weight: 700; font-size: 12.5px; color: #111; }
.ig-bio { font-size: 9.5px; color: #555; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-bio b { color: #111; }
.ig-knop { flex: none; background: #3c58a4; color: #fff; font-weight: 700; font-size: 9.5px; padding: 4px 12px; border-radius: 6px; }
.ig-dm { position: absolute; right: 3.5%; top: 11%; width: 4.6%; aspect-ratio: 1; border-radius: 7px; background: #eceef1; }
.ig-dm::after { content: "99+"; position: absolute; top: -9px; right: -16px; background: var(--c-danger); color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 9px; }
.ig-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1%; margin-top: 3.2%; }
.ig-raster > div { position: relative; aspect-ratio: 1; border-radius: 3px; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center;
font-weight: 800; font-size: clamp(9px, 1.15vw, 15px); line-height: 1.1; letter-spacing: -.02em; padding: 8%; }
.ig-raster .t-foto { padding: 0; }
.ig-raster .t-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ig-raster .t-blauw { background: #3c58a4; color: #fff; }
.ig-raster .t-kraft { background: #e8dcc0; }
.ig-raster .t-kraft img { width: 70%; }
.ig-raster .t-licht { background: #dfe6f8; color: #3c58a4; }
.scherm-dim { position: absolute; inset: 0; background: #0b0e16; opacity: 0; pointer-events: none; }
.wie { position: relative; padding: calc(var(--section-y) * .9) 0 calc(var(--section-y) * 1.3); }
.wie-in { position: relative; max-width: 1000px; margin-inline: auto; text-align: center; }
.wie-label { font-size: clamp(19px, 1.8vw, 26px); font-weight: 700; color: var(--c-ink); margin-bottom: 36px; }
.wie h2 { font-size: clamp(40px, 6.2vw, 96px); font-weight: 500; line-height: 1.06; letter-spacing: -.04em; color: var(--c-ink); margin: 0; }
.wie h2 em { font-style: italic; font-weight: 900; }
.sel { position: relative; display: inline-block; padding: 0 .1em;
background-image: linear-gradient(var(--c-accent-soft), var(--c-accent-soft)); background-repeat: no-repeat; background-size: 0% 100%;
transition: background-size 900ms var(--ease-out); }
.sel::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--c-accent); opacity: 0; transform: scale(.97); transition: opacity 400ms 250ms, transform 600ms 250ms var(--ease-out); }
.sel b { position: absolute; z-index: 2; width: 10px; height: 10px; background: #fff; border: 2px solid var(--c-accent); transform: scale(0); transition: transform 450ms var(--ease-out); }
.sel b:nth-of-type(1) { left: -5px; top: -5px; transition-delay: 450ms; }
.sel b:nth-of-type(2) { right: -5px; top: -5px; transition-delay: 520ms; }
.sel b:nth-of-type(3) { left: -5px; bottom: -5px; transition-delay: 590ms; }
.sel b:nth-of-type(4) { right: -5px; bottom: -5px; transition-delay: 660ms; }
.sel.on { background-size: 100% 100%; }
.sel.on::after { opacity: 1; transform: none; }
.sel.on b { transform: scale(1); }
.sticker { position: absolute; z-index: 3; font-size: clamp(13px, 1.1vw, 16px); font-weight: 600; white-space: nowrap; padding: 10px 17px; border-radius: 14px; background: var(--c-accent); color: #fff;
box-shadow: 0 18px 34px -16px rgba(var(--shadow-rgb), .55); animation: zweef 7s ease-in-out infinite; }
.sticker.kraft { background: var(--c-kraft); color: var(--c-ink); }
.sticker.wit { background: #fff; color: var(--c-accent); box-shadow: 0 18px 34px -18px rgba(var(--shadow-rgb), .45), 0 0 0 1px rgba(var(--shadow-rgb), .06); }
.sticker.s1 { right: 2%; top: -16%; --r: -6deg; }
.sticker.s2 { right: 5%; top: 104%; --r: 4deg; animation-delay: -2.4s; }
.sticker.s3 { left: 6%; top: 100%; --r: -4deg; animation-delay: -4.6s; }
@keyframes zweef { 0%, 100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(-8px) rotate(var(--r)); } }
.diensten { padding: var(--band-y) clamp(22px, 5vw, 70px); }
.diensten .gloed { width: 460px; height: 460px; background: #8fa6ee; opacity: .35; right: -120px; bottom: -160px; }
.diensten-kop { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: 48px; }
.diensten-kop .h2 { color: #fff; max-width: 13ch; }
.diensten-kop p { color: var(--c-on-dark-soft); font-size: var(--fs-lead); line-height: var(--lh-relaxed); max-width: 40ch; margin: 0; }
.dienst-raster { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dienst {
display: flex; flex-direction: column; min-height: 300px; padding: 28px 26px 26px; border-radius: var(--r-lg);
background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
transition: transform var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover);
}
.dienst:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .15); box-shadow: 0 26px 50px -26px rgba(10, 18, 50, .6); }
.dienst-ic { width: 48px; height: 48px; border-radius: 14px; background: #fff; color: var(--c-accent); display: flex; align-items: center; justify-content: center; }
.dienst-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dienst h3 { color: #fff; font-size: 22px; font-weight: 800; letter-spacing: -.4px; margin: 26px 0 10px; }
.dienst p { color: var(--c-on-dark-soft); font-size: 15px; line-height: 1.6; margin: 0; }
.dienst .lees { margin-top: auto; padding-top: 24px; color: #fff; font-size: 14.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.dienst .lees span { transition: transform var(--dur-hover) var(--ease-out); }
.dienst:hover .lees span { transform: translateX(5px); }
.zijwaarts-podium > .wrap { width: 100%; }
.proj-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.proj-kop p { margin: 14px 0 0; }
.project {
position: relative; display: block; width: min(440px, 78vw); height: min(560px, 62vh); border-radius: var(--r-xl); overflow: hidden;
box-shadow: var(--sh-card); transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover);
}
.project:hover { transform: translateY(-6px); box-shadow: var(--sh-lift); }
.project .vlak { position: absolute; inset: 0; transition: transform 900ms var(--ease-out); }
.project:hover .vlak { transform: scale(1.05); }
.v1 { background: radial-gradient(120% 90% at 20% 0%, #7c95dc, #3c58a4 55%, #2a4185); }
.v2 { background: radial-gradient(120% 90% at 20% 0%, #e2d8bf, #c4b89a 55%, #a3946f); }
.v3 { background: radial-gradient(120% 90% at 20% 0%, #9fb2e8, #5e78c4 55%, #3c58a4); }
.v4 { background: radial-gradient(120% 90% at 20% 0%, #efe9dc, #d9cfb6 55%, #bfb08b); }
.v5 { background: radial-gradient(120% 90% at 20% 0%, #6b86d4, #34508f 60%, #24397a); }
.project .schaduw { position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 18, 34, .55), rgba(14, 18, 34, 0) 50%); }
.project .info { position: absolute; left: 26px; right: 26px; bottom: 24px; color: #fff; }
.project .pil { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.project .titel { font-size: clamp(22px, 2vw, 28px); font-weight: 800; letter-spacing: -.5px; line-height: 1.15; margin-top: 12px; }
.project.alles { background: var(--c-card); display: flex; flex-direction: column; justify-content: space-between; padding: 34px; box-shadow: var(--sh-card), inset 0 0 0 1px var(--c-line); }
.project.alles .h2 { font-size: clamp(30px, 3vw, 44px); }
.project.alles .btn { align-self: flex-start; }
.over { border-radius: var(--r-band); background-color: #ece5d7; padding: var(--band-y) clamp(22px, 5vw, 70px); position: relative; overflow: hidden; }
.over-raster { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.over-foto { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-card); aspect-ratio: 4 / 5; }
.over-foto img { width: 100%; height: 100%; object-fit: cover; }
.over .h2 { margin-top: 0; }
.over .lead { margin: 22px 0 0; max-width: 46ch; }
.motto { margin: 30px 0 34px; font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; color: var(--c-ink); }
.motto .script { font-size: 1.5em; color: var(--c-accent); }
.team { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.teamlid { display: flex; align-items: center; gap: 12px; padding: 7px 20px 7px 7px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .7);
box-shadow: 0 12px 26px -18px rgba(var(--shadow-rgb), .45), 0 0 0 1px rgba(var(--shadow-rgb), .05); }
.teamlid .ft { position: relative; width: 50px; height: 50px; flex: none; border-radius: 50%; overflow: hidden; background: var(--c-kraft); color: #fff; font-weight: 800; font-size: 19px; display: flex; align-items: center; justify-content: center; }
.teamlid .ft img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.teamlid b { display: block; font-size: 15px; color: var(--c-ink); line-height: 1.3; }
.teamlid .rol { display: block; font-size: 13px; color: var(--c-soft); line-height: 1.3; }
.go { padding: var(--section-y) 0; }
.go-raster { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.go-logo { display: block; height: 30px; width: auto; fill: var(--c-accent); margin: 12px 0 24px; }
.go-eyebrow { font-size: 17px; font-weight: 600; color: var(--c-soft); }
.go .lead { max-width: 44ch; margin: 20px 0 32px; }
.go-toneel { position: relative; }
.go-telefoon { position: absolute; right: -4%; bottom: -10%; width: 28%; }
.go-donker { position: relative; overflow: hidden; border-radius: var(--r-band); padding: var(--band-y) 0; background: radial-gradient(120% 90% at 85% 10%, #26346a 0%, #172150 45%, #0f1633 100%); }
.go-donker .gloed { width: 560px; height: 560px; background: #3c58a4; opacity: .35; right: -160px; top: -220px; }
.go-donker .go-raster { position: relative; z-index: 1; }
.go-donker .go-eyebrow { color: rgba(255, 255, 255, .6); }
.go-donker .go-logo { fill: #fff; }
.go-donker .h2 { color: #fff; }
.go-donker .lead { color: var(--c-on-dark-soft); }
.dash { position: absolute; inset: 0; display: grid; grid-template-columns: 17% 1fr; background: #f7f6f3; }
.dash aside { background: var(--c-accent); }
.dash aside::before { content: ""; display: block; margin: 12% 14% 0; height: 5%; border-radius: 4px; background: rgba(255, 255, 255, .5); }
.dash .inhoud { padding: 4cqw 4cqw; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr; gap: 2cqw; }
.dash .inhoud .tegel { border-radius: 1.4cqw; background: #fff; box-shadow: 0 2px 8px rgba(16, 22, 43, .06); padding: 2cqw; }
.dash .inhoud .tegel b { display: block; height: 1.6cqw; width: 50%; border-radius: 1cqw; background: #e4e8f3; }
.dash .inhoud .tegel em { display: block; margin-top: 1.6cqw; height: 3.4cqw; width: 70%; border-radius: 1cqw; background: var(--c-accent); opacity: .85; }
.dash .inhoud .kal { grid-column: 1 / -1; border-radius: 1.4cqw; background: #fff; box-shadow: 0 2px 8px rgba(16, 22, 43, .06); display: grid; grid-template-columns: repeat(7, 1fr); gap: .8cqw; padding: 2cqw; }
.dash .inhoud .kal i { border-radius: .8cqw; background: #f1f2f6; }
.dash .inhoud .kal i.a { background: #dfe6f8; } .dash .inhoud .kal i.k { background: #efe8d8; }
.telscherm { position: absolute; inset: 0; padding: 18cqw 7cqw 7cqw; background: #f7f6f3; display: flex; flex-direction: column; gap: 4cqw; }
.telscherm i { display: block; border-radius: 4cqw; background: #fff; box-shadow: 0 2px 8px rgba(16, 22, 43, .06); }
.telscherm i.foto { background: linear-gradient(140deg, #c4b89a, #a99a74); }
.telscherm .knop { height: 9cqw; border-radius: 9999px; background: var(--c-accent); }
.afsluiter { padding: calc(var(--band-y) * 1.1) 24px; text-align: center; }
.afsluiter .gloed { width: 520px; height: 520px; background: #8fa6ee; opacity: .35; left: -160px; top: -200px; }
.afsluiter .h-hero { position: relative; z-index: 1; color: #fff; }
.afsluiter p { position: relative; z-index: 1; color: var(--c-on-dark-soft); font-size: clamp(18px, 1.6vw, 22px); margin: 26px auto 36px; }
.afsluiter .knoppen { position: relative; z-index: 1; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-wit { background: #fff; color: var(--c-accent); box-shadow: 0 16px 30px -14px rgba(10, 18, 50, .5); }
.btn-wit:hover { background: #f1f4fc; }
.btn-glas { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .3); }
.btn-glas:hover { background: rgba(255, 255, 255, .2); }
.footer { position: relative; isolation: isolate; margin-top: var(--section-y); background: radial-gradient(120% 140% at 10% -20%, #3c58a4 0%, #2c4489 45%, #213670 100%); color: var(--c-footer-text); padding: 72px 0 32px; }
.footer-in { max-width: 1180px; margin-inline: auto; padding-inline: 22px; }
.footer-top { display: grid; grid-template-columns: 1.2fr 2fr; gap: 50px; }
.footer-logo img { height: 34px; width: auto; filter: brightness(0) invert(1); }
.footer-merk p { font-size: 15px; line-height: 1.65; margin: 18px 0 0; max-width: 34ch; color: var(--c-footer-text); }
.footer-status { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 14px; color: #fff; }
.footer-status i { width: 9px; height: 9px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74, 222, 128, .2); }
.footer-socials { display: flex; gap: 10px; margin-top: 24px; }
.footer-socials a { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; border: 1px solid rgba(255, 255, 255, .28); transition: background-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std), transform var(--dur-hover) var(--ease-out); }
.footer-socials a:hover { background: #fff; color: var(--c-accent); transform: translateY(-3px); }
.footer-socials svg { width: 18px; height: 18px; }
.footer-kolommen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.footer-kolom h3 { margin: 0 0 14px; font-size: 13px; font-weight: 500; color: var(--c-footer-head); }
.footer-kolom a, .footer-kolom span { display: block; padding: 5px 0; font-size: 14.5px; color: var(--c-footer-link); transition: color var(--dur-fast) var(--ease-std); }
.footer-kolom a:hover { color: #fff; }
.footer-onder { margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; font-size: 13px; color: var(--c-footer-text); }
.footer-onder .jt { font-family: var(--font-script); color: #fff; }
.footer-juridisch { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-juridisch a { color: var(--c-footer-text); transition: color var(--dur-fast); }
.footer-juridisch a:hover { color: #fff; }
@media (max-width: 960px) {
.nav { padding-left: 18px; }
.nav-toggle { display: inline-flex; }
.nav-links { position: fixed; top: 74px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px; border-radius: 26px; background: #fff;
box-shadow: 0 30px 60px -20px rgba(var(--shadow-rgb), .45); opacity: 0; transform: translateY(-10px); pointer-events: none;
transition: opacity var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out); }
.nav.open .nav-links { opacity: 1; transform: none; pointer-events: auto; }
.nav-links a { padding: 15px 18px; font-size: 17px; }
.nav-links a.nav-cta { margin: 8px 0 0; justify-content: center; }
.nav-links .nav-drop-knop { justify-content: space-between; width: 100%; }
.nav-menu { position: static; transform: none; opacity: 1; pointer-events: auto; box-shadow: none; min-width: 0; padding: 0 0 0 12px; display: none; background: transparent; }
.nav-drop.open .nav-menu, .nav-drop:focus-within .nav-menu { display: block; transform: none; }
.nav-drop:hover .nav-menu { transform: none; }
.nav-links .nav-menu a { font-size: 16px; padding: 12px 18px; }
.dienst-raster { grid-template-columns: 1fr 1fr; }
.over-raster, .go-raster { grid-template-columns: 1fr; }
.footer-top { grid-template-columns: 1fr; }
.footer-kolommen { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
.koppen { top: 13vh; }
.laptop3d { width: 84vw; bottom: 19vh; }
.bb { width: 64vw; }
.bb.alleen-groot { display: none; }
.bubbel { padding: 8px 11px; gap: 8px; }
.bubbel-ic { width: 26px; height: 26px; }
.bubbel-van { font-size: 10.5px; }
.bubbel-bericht { font-size: 12.5px; }
.sticker { position: static; display: inline-block; margin: 6px; animation: none; transform: rotate(var(--r)); }
.wie-stickers { margin-top: 30px; }
.dienst-raster { grid-template-columns: 1fr; }
.dienst { min-height: 0; }
.go-telefoon { width: 30%; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
.sticker { animation: none; }
}
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sectie { padding: var(--section-y) 0; }
.sectie-kop { max-width: 760px; margin-bottom: 48px; }
.sectie-kop.midden { margin-inline: auto; text-align: center; }
.sectie-kop .lead { margin: 18px 0 0; max-width: 56ch; }
.sectie-kop.midden .lead { margin-inline: auto; }
.label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--c-accent); margin-bottom: 16px; }
.label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 4px var(--c-accent-soft); }
.stappen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stap { background: var(--c-card); border-radius: var(--r-card); padding: 28px 26px 30px; box-shadow: var(--sh-card); position: relative; overflow: hidden; }
.stap-ic { width: 52px; height: 52px; border-radius: 16px; background: var(--c-accent-soft); color: var(--c-accent); display: flex; align-items: center; justify-content: center; }
.stap-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stap h3 { font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: var(--c-ink); margin: 22px 0 8px; }
.stap p { font-size: 15px; line-height: 1.6; color: var(--c-soft); margin: 0; }
.stap.kraft .stap-ic { background: #f1e9d6; color: #8d7a4b; }
.faq-raster { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.faq-kop { position: sticky; top: 120px; }
.faq-kop .lead { margin: 18px 0 28px; }
.faq-lijst { display: grid; gap: 10px; }
.faq-lijst details { background: var(--c-card); border-radius: 20px; box-shadow: 0 10px 30px -22px rgba(var(--shadow-rgb), .5), 0 0 0 1px rgba(var(--shadow-rgb), .05); overflow: hidden; }
.faq-lijst summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; font-size: 17px; font-weight: 700; color: var(--c-ink); }
.faq-lijst summary::-webkit-details-marker { display: none; }
.faq-lijst summary i { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--c-accent-soft); transition: background var(--dur-fast), transform var(--dur-hover) var(--ease-out); }
.faq-lijst summary i::before, .faq-lijst summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--c-accent); }
.faq-lijst summary i::after { transform: rotate(90deg); transition: transform var(--dur-hover) var(--ease-out); }
.faq-lijst details[open] summary i { background: var(--c-accent); }
.faq-lijst details[open] summary i::before, .faq-lijst details[open] summary i::after { background: #fff; }
.faq-lijst details[open] summary i::after { transform: rotate(0deg); }
.faq-lijst .antwoord { padding: 0 24px 24px; font-size: 16px; line-height: 1.7; color: var(--c-soft); max-width: 62ch; }
.faq-lijst .antwoord a { color: var(--c-accent); font-weight: 600; }
.werkboek { padding: clamp(40px, 6vw, 80px); background: #ece5d7; border-radius: var(--r-band); display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 70px); align-items: center; overflow: hidden; }
.werkboek .h2 { max-width: 14ch; }
.werkboek .lead { margin: 18px 0 26px; max-width: 46ch; }
.werkboek-form { display: flex; gap: 8px; background: #fff; padding: 7px; border-radius: var(--r-pill); max-width: 480px; box-shadow: 0 16px 34px -22px rgba(var(--shadow-rgb), .5); }
.werkboek-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; padding: 0 18px; color: var(--c-ink); }
.werkboek-form .btn { flex: none; }
.werkboek-klein { display: block; font-size: 13px; color: var(--c-soft); margin-top: 12px; }
.werkboek-boek { position: relative; justify-self: center; width: min(330px, 80%); aspect-ratio: 210 / 297; }
.werkboek-boek .blad { position: absolute; inset: 0; border-radius: 10px; background: #fff; box-shadow: 0 30px 60px -30px rgba(var(--shadow-rgb), .55); }
.werkboek-boek .blad.b2 { transform: rotate(6deg) translate(18px, 6px); background: #f6f2ea; }
.werkboek-boek .blad.b1 { transform: rotate(-3deg); padding: 12% 11%; display: flex; flex-direction: column; background: linear-gradient(160deg, #4d69bf, #3c58a4 60%, #2f4890); color: #fff; }
.werkboek-boek .blad.b1 img { width: 42%; filter: brightness(0) invert(1); }
.werkboek-boek .blad.b1 small { margin-top: auto; font-size: 12px; font-weight: 700; opacity: .75; }
.werkboek-boek .blad.b1 strong { font-size: clamp(24px, 2.6vw, 34px); font-weight: 900; line-height: 1; letter-spacing: -.03em; margin-top: 8px; }
.werkboek-boek .blad.b1 span { font-size: 13px; opacity: .85; margin-top: 10px; }
.werkboek-lijst { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 8px; }
.werkboek-lijst li { display: flex; gap: 10px; align-items: center; font-size: 15.5px; color: var(--c-ink); font-weight: 500; }
.werkboek-lijst li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; padding: 11px 18px; border-radius: var(--r-pill); background: var(--c-card); font-size: 15px; font-weight: 600; color: var(--c-ink); box-shadow: 0 10px 24px -18px rgba(var(--shadow-rgb), .45), 0 0 0 1px rgba(var(--shadow-rgb), .05); }
.diensten .chips { margin-top: 34px; position: relative; z-index: 1; }
.diensten .chip { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.diensten .voorwie-tekst { position: relative; z-index: 1; margin: 46px 0 0; color: var(--c-on-dark-soft); font-size: 15px; font-weight: 600; }
.afsluiter .contactregel { position: relative; z-index: 1; margin-top: 26px; display: flex; gap: 10px 26px; justify-content: center; flex-wrap: wrap; font-size: 15px; }
.afsluiter .contactregel a { color: #fff; font-weight: 600; opacity: .9; }
.afsluiter .contactregel a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 800; width: 58px; height: 58px; border-radius: 50%; background: var(--c-accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 30px -10px rgba(var(--shadow-rgb), .55); transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast); }
.wa-float:hover { transform: scale(1.07); background: #2e4a94; }
.wa-float svg { width: 29px; height: 29px; fill: #fff; }
.dhero { position: relative; margin: 0; min-height: min(92vh, 860px); border-radius: 0; overflow: hidden; display: flex; align-items: flex-end; }
.dhero .hero-foto { inset: 0; border-radius: 0; --diep: .85; }
.dhero-in { position: relative; z-index: 2; width: 100%; padding-top: 150px; padding-bottom: clamp(44px, 7vh, 80px); }
.kruimel { display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; color: var(--c-on-dark-soft); margin-bottom: 20px; }
.kruimel a { color: var(--c-on-dark-soft); }
.kruimel a:hover { color: #fff; }
.dhero h1 { font-size: clamp(36px, 6.4vw, 94px); font-weight: var(--fw-head); line-height: .96; letter-spacing: -.045em; color: #fff; margin: 0; max-width: 11em; overflow-wrap: normal; word-break: normal; text-shadow: 0 6px 40px rgba(10, 20, 60, .3); }
.dhero h1 .grad { background-image: linear-gradient(95deg, #ffffff 10%, #e8dcc0 90%); }
.dhero .lead { color: var(--c-on-dark-soft); max-width: 50ch; margin: 24px 0 32px; font-size: clamp(17px, 1.5vw, 21px); }
.dhero .knoppen { display: flex; gap: 12px; flex-wrap: wrap; }
.dhero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.dhero-tags span { font-size: 13.5px; font-weight: 600; color: #fff; padding: 8px 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.herken { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.herken-bubbels { position: relative; display: grid; gap: 14px; justify-items: start; }
.herken-bubbels .bubbel { width: min(100%, 380px); }
.herken-bubbels .bubbel:nth-child(1) { transform: rotate(-2.5deg); }
.herken-bubbels .bubbel:nth-child(2) { transform: rotate(2deg) translateX(clamp(20px, 6vw, 80px)); }
.herken-bubbels .bubbel:nth-child(3) { transform: rotate(-1.5deg) translateX(clamp(6px, 2vw, 26px)); }
.herken .lead { margin: 18px 0 0; }
.krijg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.krijg-item { display: flex; gap: 16px; align-items: flex-start; background: var(--c-card); border-radius: 22px; padding: 24px; box-shadow: 0 12px 30px -24px rgba(var(--shadow-rgb), .55), 0 0 0 1px rgba(var(--shadow-rgb), .05); }
.krijg-item i { flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.krijg-item b { display: block; font-size: 16.5px; color: var(--c-ink); line-height: 1.35; }
.krijg-item span { display: block; font-size: 14.5px; color: var(--c-soft); line-height: 1.55; margin-top: 4px; }
.soorten-raster { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.soort { border-radius: var(--r-card); padding: 28px 24px 30px; background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.soort h3 { color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -.3px; margin: 22px 0 8px; }
.soort p { color: var(--c-on-dark-soft); font-size: 15px; line-height: 1.6; margin: 0; }
.voorwie { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.voorwie .lead { margin: 18px 0 0; }
.anders-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.anders { display: flex; flex-direction: column; background: var(--c-card); border-radius: var(--r-card); padding: 28px; box-shadow: var(--sh-card); transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover); }
.anders:hover { transform: translateY(-5px); box-shadow: var(--sh-lift); }
.anders h3 { font-size: 21px; font-weight: 800; color: var(--c-ink); margin: 22px 0 8px; letter-spacing: -.3px; }
.anders p { font-size: 15px; line-height: 1.6; color: var(--c-soft); margin: 0 0 22px; }
.anders .lees { margin-top: auto; font-size: 14.5px; font-weight: 700; color: var(--c-accent); }
.overzicht { display: grid; gap: 18px; }
.overzicht-item { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(24px, 5vw, 70px); align-items: center; background: var(--c-card); border-radius: var(--r-band); padding: clamp(18px, 2vw, 26px); box-shadow: var(--sh-card); }
.overzicht-item:nth-child(even) { grid-template-columns: 1.15fr 1fr; }
.overzicht-item:nth-child(even) .overzicht-foto { order: 2; }
.overzicht-item:nth-child(even) .overzicht-tekst { padding: 10px 0 10px clamp(6px, 2vw, 30px); }
.overzicht-foto { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-dark-3); }
.overzicht-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); }
.overzicht-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, #5f7de0, #3c58a4 55%, #2a4290); mix-blend-mode: multiply; }
.overzicht-tekst { padding: 10px clamp(6px, 2vw, 30px) 10px 0; }
.overzicht-tekst h2 { font-size: clamp(28px, 3vw, 42px); font-weight: var(--fw-head); letter-spacing: -.035em; color: var(--c-ink); margin: 0 0 14px; }
.overzicht-tekst p { font-size: 16.5px; line-height: 1.65; color: var(--c-soft); margin: 0 0 20px; }
.overzicht-tekst ul { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 8px; }
.overzicht-tekst li { display: flex; gap: 10px; align-items: center; font-size: 15.5px; font-weight: 500; color: var(--c-ink); }
.overzicht-tekst li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
@media (max-width: 1000px) {
.stappen, .soorten-raster { grid-template-columns: 1fr 1fr; }
.krijg, .anders-raster { grid-template-columns: 1fr 1fr; }
.faq-raster, .werkboek, .herken, .voorwie, .overzicht-item { grid-template-columns: 1fr; }
.faq-kop { position: static; }
.overzicht-item:nth-child(even) { grid-template-columns: 1fr; }
.overzicht-item:nth-child(even) .overzicht-foto { order: 0; }
.overzicht-item:nth-child(even) .overzicht-tekst { padding: 0 8px 12px; }
.overzicht-tekst { padding: 0 8px 12px; }
}
@media (max-width: 620px) {
.stappen, .soorten-raster, .krijg, .anders-raster { grid-template-columns: 1fr; }
.werkboek-form { flex-direction: column; border-radius: 22px; }
.werkboek-form input { padding: 14px 16px; }
.werkboek-boek { display: none; }
.dhero h1 { font-size: 8.4vw; }
.dhero-in { padding-top: 120px; }
.herken-bubbels .bubbel:nth-child(n) { transform: rotate(-1.5deg); width: 100%; }
.herken-bubbels .bubbel:nth-child(2) { transform: rotate(1.5deg); }
.wa-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}
.k-voor { opacity: 0; }
.bb { opacity: 0; }
.hero-intro { position: absolute; inset: 0; z-index: 20; overflow: hidden; will-change: transform; }
.intro-foto { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; overflow: hidden; }
.intro-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; will-change: transform; }
.intro-in { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.intro-tekst { width: 44%; padding-top: 60px; }
.intro-logo { display: block; width: min(440px, 90%); height: auto; }
.hero-intro h1 { font-size: clamp(30px, 3.2vw, 48px); line-height: 1.05; font-weight: var(--fw-head); letter-spacing: -.035em; color: var(--c-ink); margin: 34px 0 0; max-width: 16ch; }
.intro-sub { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--c-soft); margin: 16px 0 32px; max-width: 40ch; }
.hero-intro .knoppen { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-intro .scroll-tip { left: var(--gutter); transform: none; color: var(--c-soft); bottom: 4vh; }
.hero-intro .scroll-tip i { border-color: rgba(var(--shadow-rgb), .25); }
.hero-intro .scroll-tip i::after { background: var(--c-accent); }
.k-na { opacity: 0; }
.k-na.live { pointer-events: auto; }
@media (max-width: 960px) {
.intro-foto { width: 100%; bottom: auto; height: 52%; }
.intro-in { justify-content: flex-end; padding-bottom: 12vh; }
.intro-tekst { width: 100%; padding-top: 0; }
.intro-logo { width: min(300px, 70%); }
.hero-intro h1 { margin: 18px 0 0; font-size: 28px; }
.intro-sub { margin: 10px 0 20px; font-size: 15px; }
.hero-intro .scroll-tip { display: none; }
}
.wie { padding-top: calc(var(--section-y) * .75); padding-bottom: calc(var(--section-y) * 1.6); margin-top: -45vh; z-index: 2; }
.wie-kop .w { display: inline; opacity: .14; transition: opacity 400ms var(--ease-out); }
.wie .sticker { opacity: 0; animation: none; }
.wie .sticker.geplakt { animation: plak 560ms cubic-bezier(.2, 1.3, .4, 1) both, zweef 7s ease-in-out .7s infinite; }
@keyframes plak { 0% { opacity: 0; transform: scale(1.6) rotate(calc(var(--r) + 10deg)); } 55% { opacity: 1; transform: scale(.93) rotate(var(--r)); } 100% { opacity: 1; transform: scale(1) rotate(var(--r)); } }
.cursor { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; opacity: 0; transition: transform 800ms cubic-bezier(.65, 0, .35, 1), opacity 300ms; }
.cursor svg { display: block; width: 24px; height: 24px; filter: drop-shadow(0 4px 8px rgba(10, 20, 60, .25)); }
.cursor svg path { stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.cursor span { position: absolute; left: 20px; top: 20px; padding: 5px 11px; border-radius: 4px 10px 10px 10px; font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; box-shadow: 0 8px 18px -8px rgba(10, 20, 60, .4); }
.c-jens svg path { fill: var(--c-accent); }
.c-jens span { background: var(--c-accent); }
.c-jikke svg path { fill: #a8925f; }
.c-jikke span { background: #a8925f; }
.cursor.aan { opacity: 1; }
@media (max-width: 760px) { .cursor { display: none; } .sticker.s1 { top: -22%; } }
@media (prefers-reduced-motion: reduce) { .wie-kop .w { opacity: 1; } .wie .sticker { opacity: 1; animation: none; } }
.hero-intro .grad { background-image: linear-gradient(95deg, var(--c-accent) 10%, var(--c-accent-2) 90%); }
.gesprek { position: relative; height: 320vh; }
.gesprek-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; padding-top: 70px; }
.gesprek-raster { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 100px); align-items: center; }
.gesprek-tekst .lead { margin: 18px 0 34px; max-width: 42ch; }
.gesprek-stappen { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.gesprek-stappen li { position: relative; padding: 14px 0 14px 30px; opacity: .32; transition: opacity 400ms var(--ease-out); }
.gesprek-stappen li::before { content: ""; position: absolute; left: 0; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-line); transition: background 300ms, box-shadow 300ms; }
.gesprek-stappen li b { display: block; font-size: clamp(22px, 2.2vw, 30px); font-weight: var(--fw-head); letter-spacing: -.03em; color: var(--c-ink); line-height: 1.15; }
.gesprek-stappen li span { display: block; max-height: 0; overflow: hidden; font-size: 16px; line-height: 1.6; color: var(--c-soft); transition: max-height 500ms var(--ease-out), margin 500ms var(--ease-out); }
.gesprek-stappen li.aan { opacity: 1; }
.gesprek-stappen li.aan::before { background: var(--c-accent); box-shadow: 0 0 0 5px var(--c-accent-soft); }
.gesprek-stappen li.aan span { max-height: 80px; margin-top: 6px; }
.gesprek-tel { display: flex; justify-content: center; }
.tel { width: min(370px, 100%); height: min(680px, 78vh); border-radius: 44px; background: #f4f1ea; border: 10px solid #151826; box-shadow: 0 50px 90px -40px rgba(var(--shadow-rgb), .6); display: flex; flex-direction: column; overflow: hidden; }
.tel-kop { display: flex; align-items: center; gap: 12px; padding: 22px 18px 14px; background: #fff; border-bottom: 1px solid rgba(var(--shadow-rgb), .07); }
.tel-av { width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--c-accent); display: flex; align-items: center; justify-content: center; }
.tel-av img { width: 78%; }
.tel-kop b { display: block; font-size: 15px; color: var(--c-ink); }
.tel-kop small { display: block; font-size: 12px; color: #2fa866; font-weight: 600; }
.tel-berichten { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 16px 14px; overflow: hidden; }
.msg { display: none; max-width: 82%; padding: 10px 14px; border-radius: 18px; font-size: 14.5px; line-height: 1.45; box-shadow: 0 6px 14px -10px rgba(var(--shadow-rgb), .5); }
.msg.in { align-self: flex-start; background: #fff; color: var(--c-ink); border-bottom-left-radius: 6px; }
.msg.uit { align-self: flex-end; background: var(--c-accent); color: #fff; border-bottom-right-radius: 6px; }
.msg.toon { display: block; animation: msgIn 420ms var(--ease-out) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.msg-pdf { display: flex; align-items: center; gap: 10px; margin: -2px -6px 8px; padding: 9px 10px; border-radius: 12px; background: rgba(255, 255, 255, .16); font-weight: 600; font-size: 13.5px; }
.msg-pdf i { font-style: normal; font-size: 10px; font-weight: 800; padding: 6px 6px; border-radius: 6px; background: #fff; color: var(--c-accent); }
.msg-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: -4px -8px 8px; }
.msg-fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.msg.typen { width: 64px; padding: 14px 16px; }
.msg.typen.toon { display: flex; gap: 5px; }
.msg.typen i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .8); animation: typen 1s infinite; }
.msg.typen i:nth-child(2) { animation-delay: .15s; }
.msg.typen i:nth-child(3) { animation-delay: .3s; }
@keyframes typen { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.tel-voet { padding: 12px 14px 20px; background: #fff; }
.tel-voet span { display: block; padding: 11px 16px; border-radius: 22px; background: #f1f2f5; font-size: 14px; color: #9aa0ad; }
@media (max-width: 960px) {
.gesprek { height: 300vh; }
.gesprek-raster { grid-template-columns: 1fr; gap: 18px; }
.gesprek-tekst .lead, .gesprek-stappen li:not(.aan) { display: none; }
.gesprek-stappen li { padding-top: 6px; padding-bottom: 0; }
.gesprek-stappen li::before { top: 14px; }
.tel { height: min(520px, 60vh); }
}
@media (prefers-reduced-motion: reduce) { .gesprek { height: auto; } .gesprek-pin { position: relative; height: auto; padding: var(--section-y) 0; } }
.over2 { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 5vw, 80px); align-items: center; padding: clamp(44px, 5.5vw, 84px) clamp(26px, 6vw, 90px); border-radius: var(--r-band); background-color: #ece5d7; overflow: hidden; }
.over2 .lead { margin: 18px 0 30px; max-width: 44ch; }
.tafel { position: relative; height: clamp(340px, 32vw, 460px); }
.pola { position: absolute; margin: 0; background: #fff; padding: 10px 10px 34px; border-radius: 4px; box-shadow: 0 24px 44px -24px rgba(var(--shadow-rgb), .55), 0 2px 6px rgba(var(--shadow-rgb), .08);
opacity: 0; transform: translateY(-60px) rotate(calc(var(--r) + 14deg)) scale(1.06); transition: opacity 500ms var(--ease-out), transform 900ms cubic-bezier(.2, 1.15, .4, 1); }
.pola img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.pola figcaption { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-family: var(--font-script); font-size: clamp(20px, 1.9vw, 26px); color: var(--c-ink); }
.pola::before { content: ""; position: absolute; left: 50%; top: -12px; width: 86px; height: 26px; margin-left: -43px; background: rgba(232, 220, 192, .85); transform: rotate(-3deg); box-shadow: 0 2px 4px rgba(0, 0, 0, .05); }
.pola.p1 { width: 46%; left: 6%; top: 4%; z-index: 1; }
.pola.p2 { width: 44%; right: 4%; top: 12%; z-index: 2; transition-delay: 150ms; }
.notitie { position: absolute; left: 34%; bottom: 0; z-index: 3; width: clamp(150px, 15vw, 200px); padding: 22px 20px; background: var(--c-accent); color: #fff; font-weight: 800; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.1; border-radius: 4px;
box-shadow: 0 22px 40px -20px rgba(var(--shadow-rgb), .6); opacity: 0; transform: translateY(-50px) rotate(calc(var(--r) - 12deg)); transition: opacity 500ms var(--ease-out) 300ms, transform 900ms cubic-bezier(.2, 1.15, .4, 1) 300ms; }
.notitie span { display: block; font-family: var(--font-script); font-weight: 400; font-size: 1.45em; color: #e8dcc0; margin-top: 4px; }
.tafel.in-view .pola, .tafel.in-view .notitie { opacity: 1; transform: rotate(var(--r)); }
.tafel.in-view .pola:hover { transform: rotate(0deg) translateY(-8px) scale(1.03); z-index: 4; transition-delay: 0s; }
@media (max-width: 960px) {
.over2 { grid-template-columns: 1fr; }
.tafel { height: 380px; }
}
.uitspraak { margin: 0 0 30px; padding-left: 20px; border-left: 3px solid var(--c-accent); font-size: clamp(20px, 1.8vw, 26px); font-weight: 800; letter-spacing: -.02em; color: var(--c-ink); line-height: 1.2; }
.uitspraak span { font-family: var(--font-script); font-weight: 400; font-size: 1.3em; color: var(--c-accent); letter-spacing: 0; }
.uitspraak cite { display: block; margin-top: 6px; font-style: normal; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--c-soft); }
.over2 .lead { margin-bottom: 26px; }
.dscroll { position: relative; height: 340vh; }
.dscroll-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding: 86px 0 14px; }
.dscroll-vlak { width: min(1240px, calc(100% - 28px)); margin-inline: auto; height: 100%; max-height: 760px; padding: clamp(30px, 4.5vw, 64px); display: flex; }
.dscroll-raster { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: center; }
.dscroll-kop { font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; color: var(--c-on-dark-soft); margin: 0 0 22px; letter-spacing: 0; }
.dscroll-kop .grad { font-weight: 800; }
.dscroll-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dscroll-lijst a { display: block; padding: 10px 0; color: #fff; }
.ds-naam { display: block; font-size: clamp(30px, 3.7vw, 54px); font-weight: var(--fw-head); letter-spacing: -.045em; line-height: 1; opacity: .3; transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out); transform-origin: left center; }
.ds-zin { display: block; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--c-on-dark-soft); max-width: 36ch; padding-top: 12px; }
.ds-lees { display: inline-flex; margin: 14px 0 6px; padding: 11px 20px; border-radius: var(--r-pill); background: #fff; color: var(--c-accent); font-size: 14.5px; font-weight: 700; overflow: hidden; }
.ds-meer { display: block; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 600ms var(--ease-out), opacity 400ms var(--ease-out); }
.dscroll-lijst li.aan .ds-meer { max-height: 220px; opacity: 1; }
.dscroll-lijst li.aan .ds-naam { opacity: 1; }
.dscroll-lijst li:not(.aan) a:hover .ds-naam { opacity: .6; }
.dscroll-beeld { position: relative; height: min(560px, 62vh); }
.ds-scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(30px) scale(.96); transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out); pointer-events: none; }
.ds-scene.aan { opacity: 1; transform: none; }
.ds-tel { position: relative; height: 100%; aspect-ratio: 9 / 18.5; border-radius: 38px; border: 9px solid #12162a; background: #fff; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(5, 10, 35, .7); }
.ds-ig-kop { display: flex; align-items: center; gap: 9px; padding: 26px 12px 12px; }
.ds-ig-av { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px var(--c-accent); flex: none; }
.ds-ig-av img { width: 80%; }
.ds-ig-kop b { display: block; font-size: 13px; color: #111; }
.ds-ig-kop small { display: block; font-size: 11px; color: #777; }
.ds-ig-kop em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: var(--c-accent); padding: 5px 10px; border-radius: 6px; }
.ds-ig-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ds-ig-raster i { aspect-ratio: 1; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; font-style: normal; font-size: 9px; font-weight: 800; line-height: 1.1; padding: 6%;
opacity: 0; transform: scale(.8); transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out); }
.ds-ig-raster .t-blauw { background-color: var(--c-accent); color: #fff; }
.ds-ig-raster .t-kraft { background-color: #e8dcc0; }
.ds-ig-raster .t-kraft img { width: 72%; }
.ds-ig-raster .t-licht { background-color: #dfe6f8; color: var(--c-accent); }
.s0.aan .ds-ig-raster i { opacity: 1; transform: none; }
.s0.aan .ds-ig-raster i:nth-child(2) { transition-delay: 80ms; } .s0.aan .ds-ig-raster i:nth-child(3) { transition-delay: 160ms; }
.s0.aan .ds-ig-raster i:nth-child(4) { transition-delay: 240ms; } .s0.aan .ds-ig-raster i:nth-child(5) { transition-delay: 320ms; }
.s0.aan .ds-ig-raster i:nth-child(6) { transition-delay: 400ms; } .s0.aan .ds-ig-raster i:nth-child(7) { transition-delay: 480ms; }
.s0.aan .ds-ig-raster i:nth-child(8) { transition-delay: 560ms; } .s0.aan .ds-ig-raster i:nth-child(9) { transition-delay: 640ms; }
.ds-hart { position: absolute; left: 50%; top: 55%; width: 70px; height: 70px; margin: -35px 0 0 -35px; opacity: 0; }
.ds-hart svg { width: 100%; height: 100%; fill: #fff; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .35)); }
.s0.aan .ds-hart { animation: hartje 1.2s 900ms var(--ease-out) both; }
@keyframes hartje { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; transform: scale(1.15); } 60% { transform: scale(.95); opacity: 1; } 100% { opacity: 0; transform: scale(1) translateY(-20px); } }
.ds-zoeker { position: relative; height: 100%; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: #111; box-shadow: 0 40px 80px -30px rgba(5, 10, 35, .7); }
.ds-zoeker img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: blur(10px); transform: scale(1.06); transition: filter 900ms 300ms var(--ease-out), transform 900ms 300ms var(--ease-out); }
.s1.aan .ds-zoeker img { filter: blur(0); transform: scale(1); }
.hoek { position: absolute; width: 34px; height: 34px; border: 2.5px solid #fff; opacity: .9; }
.hoek.h1 { left: 18px; top: 18px; border-right: 0; border-bottom: 0; } .hoek.h2 { right: 18px; top: 18px; border-left: 0; border-bottom: 0; }
.hoek.h3 { left: 18px; bottom: 54px; border-right: 0; border-top: 0; } .hoek.h4 { right: 18px; bottom: 54px; border-left: 0; border-top: 0; }
.focus { position: absolute; left: 50%; top: 30%; width: 90px; height: 90px; margin-left: -45px; border: 2px solid #fff; border-radius: 8px; transform: scale(1.4); opacity: .6; transition: transform 700ms 300ms var(--ease-out), border-color 300ms 1100ms, opacity 300ms; }
.s1.aan .focus { transform: scale(1); border-color: #7cf29a; opacity: 1; }
.ds-zoeker-balk { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; display: flex; align-items: center; gap: 18px; padding: 0 18px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.ds-zoeker-balk i { margin-left: auto; width: 10px; height: 10px; border-radius: 50%; background: #ff4d4d; }
.flits { position: absolute; inset: 0; background: #fff; opacity: 0; }
.s1.aan .flits { animation: flits 600ms 1500ms ease-out both; }
@keyframes flits { 0% { opacity: 0; } 15% { opacity: .9; } 100% { opacity: 0; } }
.ds-reel { background: #000; }
.ds-reel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ds-reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 25%, transparent 60%, rgba(0,0,0,.6)); }
.ds-reel-balk { position: absolute; z-index: 2; left: 12px; right: 12px; top: 22px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.ds-reel-balk i { display: block; height: 100%; width: 0; background: #fff; }
.s2.aan .ds-reel-balk i { animation: reel 6s linear infinite; }
@keyframes reel { to { width: 100%; } }
.ds-reel-acties { position: absolute; z-index: 2; right: 12px; bottom: 90px; display: grid; gap: 14px; }
.ds-reel-acties i { width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.ds-reel-tekst { position: absolute; z-index: 2; left: 14px; right: 56px; bottom: 22px; color: #fff; font-size: 13px; line-height: 1.4; }
.ds-reel-tekst b { display: block; font-size: 13px; margin-bottom: 4px; }
.ds-browser { position: relative; width: 100%; max-width: 560px; aspect-ratio: 16 / 11; border-radius: 14px; background: #fff; overflow: visible; box-shadow: 0 40px 80px -30px rgba(5, 10, 35, .7); }
.ds-browser-balk { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: #eef0f4; border-radius: 14px 14px 0 0; }
.ds-browser-balk i { width: 10px; height: 10px; border-radius: 50%; background: #d0d4dc; }
.ds-browser-balk span { margin-left: 14px; flex: 1; max-width: 60%; padding: 4px 12px; border-radius: 8px; background: #fff; font-size: 11px; color: #777; }
.ds-site { padding: 4% 5%; }
.ds-site > *, .ds-site-hero > div > * , .ds-site-tegels i { opacity: 0; transform: translateY(10px); transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out); }
.ds-site-nav { display: flex; align-items: center; gap: 10px; }
.ds-site-nav b { width: 18%; height: 12px; border-radius: 4px; background: var(--c-accent); }
.ds-site-nav i { width: 8%; height: 7px; border-radius: 4px; background: #e2e5eb; }
.ds-site-nav em { margin-left: auto; width: 14%; height: 18px; border-radius: 10px; background: var(--c-accent); }
.ds-site-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 6%; margin-top: 7%; align-items: center; }
.ds-site-hero b { display: block; height: 16px; border-radius: 5px; background: #1c2133; margin-bottom: 8px; }
.ds-site-hero b + b { width: 70%; }
.ds-site-hero span { display: block; height: 8px; width: 85%; border-radius: 4px; background: #e2e5eb; margin: 12px 0 14px; }
.ds-site-hero em { display: block; width: 40%; height: 22px; border-radius: 12px; background: var(--c-accent); }
.ds-site-foto { aspect-ratio: 4 / 3; border-radius: 10px; background-size: cover; background-position: center 30%; }
.ds-site-tegels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; margin-top: 7%; }
.ds-site-tegels i { height: 46px; border-radius: 8px; background: #eef1f8; }
.s3.aan .ds-site > *, .s3.aan .ds-site-hero > div > *, .s3.aan .ds-site-tegels i { opacity: 1; transform: none; }
.s3.aan .ds-site-hero { transition-delay: 200ms; } .s3.aan .ds-site-hero > div > :nth-child(2) { transition-delay: 300ms; }
.s3.aan .ds-site-hero > div > :nth-child(3) { transition-delay: 400ms; } .s3.aan .ds-site-hero > div > :nth-child(4) { transition-delay: 500ms; }
.s3.aan .ds-site-tegels { transition-delay: 600ms; } .s3.aan .ds-site-tegels i:nth-child(2) { transition-delay: 700ms; } .s3.aan .ds-site-tegels i:nth-child(3) { transition-delay: 800ms; }
.ds-scores { position: absolute; right: -18px; bottom: -26px; display: flex; gap: 10px; }
.ds-score { position: relative; width: 92px; height: 92px; border-radius: 50%; background: #fff; box-shadow: 0 20px 40px -14px rgba(5, 10, 35, .55), inset 0 0 0 6px #2fa866; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transform: scale(.4); transition: opacity 300ms 1000ms, transform 600ms 1000ms cubic-bezier(.2, 1.4, .4, 1); }
.ds-score b { font-size: 28px; font-weight: 900; color: #2fa866; line-height: 1; }
.ds-score small { font-size: 11px; font-weight: 700; color: var(--c-soft); }
.s3.aan .ds-score { opacity: 1; transform: none; }
@media (max-width: 960px) {
.dscroll-vlak { max-height: none; padding: 26px 22px; }
.dscroll-raster { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 14px; align-content: start; }
.dscroll-beeld { order: -1; height: 36vh; }
.ds-naam { font-size: 30px; }
.dscroll-lijst li:not(.aan) { display: none; }
.dscroll-kop { margin-bottom: 8px; }
.ds-score { right: 6px; bottom: -14px; width: 74px; height: 74px; }
.ds-score b { font-size: 21px; }
}
.logomuur { position: relative; height: 240vh; }
.logomuur-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding-top: 80px; }
.logomuur-kop { text-align: center; margin-bottom: clamp(24px, 4vh, 44px); }
.logomuur-kop .h-statement { font-size: clamp(42px, 6vw, 88px); letter-spacing: -.045em; color: var(--c-ink); }
.logomuur-kop .lead { max-width: 52ch; margin: 16px auto 0; }
.logomuur-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 980px; margin-inline: auto; }
.logotegel { --s: 1; position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 22px; background: #fff; overflow: hidden;
box-shadow: 0 18px 40px -26px rgba(var(--shadow-rgb), .55), 0 0 0 1px rgba(var(--shadow-rgb), .05);
transform: translate(calc(var(--dx) * var(--s)), calc(var(--dy) * var(--s))) rotate(calc(var(--rot) * var(--s))) scale(calc(1 - .12 * var(--s))); will-change: transform; }
.lt-logo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 14%; transition: opacity 300ms; }
.lt-logo img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .8; }
.woordmerk { font-size: clamp(18px, 2vw, 28px); font-weight: 900; letter-spacing: -.03em; color: var(--c-ink); }
.lt-foto { position: absolute; inset: 0; opacity: 0; transition: opacity 400ms var(--ease-out); }
.lt-foto > img, .lt-foto > .ph-vlak { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 600ms var(--ease-out); }
.lt-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 18px 14px; background: linear-gradient(transparent, rgba(15, 22, 51, .75)); color: #fff; font-weight: 800; font-size: 17px; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.lt-label em { font-style: normal; font-size: 13px; font-weight: 600; opacity: .9; }
.logotegel:hover .lt-foto { opacity: 1; }
.logotegel:hover .lt-foto > img, .logotegel:hover .lt-foto > .ph-vlak { transform: scale(1); }
.logotegel:hover .lt-logo { opacity: 0; }
.logomuur .scroll-tip { color: var(--c-soft); }
.logomuur .scroll-tip i { border-color: rgba(var(--shadow-rgb), .25); }
.logomuur .scroll-tip i::after { background: var(--c-accent); }
.ph-vlak { display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .55); }
.ph-vlak svg { width: 22%; max-width: 70px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ph-vlak.v1 { background: radial-gradient(120% 90% at 20% 10%, #6f8ae0, #3c58a4 55%, #24397a); }
.ph-vlak.v2 { background: radial-gradient(120% 90% at 80% 10%, #e8dcc0, #c4b89a 55%, #9f8f68); }
.ph-vlak.v3 { background: radial-gradient(120% 90% at 30% 90%, #8fa6ee, #4d69bf 55%, #2f4890); }
.ph-vlak.v4 { background: radial-gradient(120% 90% at 70% 20%, #2a3a72, #172150 60%, #0f1633); }
.ph-vlak.v5 { background: radial-gradient(120% 90% at 50% 0%, #dfe6f8, #a9b9e6 55%, #6f8ae0); }
.werk-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter { border: 0; cursor: pointer; font: inherit; font-size: 15px; font-weight: 600; padding: 11px 18px; border-radius: var(--r-pill); background: #fff; color: var(--c-ink); box-shadow: 0 0 0 1px rgba(var(--shadow-rgb), .08); transition: background var(--dur-fast), color var(--dur-fast); }
.filter:hover { background: var(--c-accent-soft); color: var(--c-accent); }
.filter.is-aan { background: var(--c-accent); color: #fff; box-shadow: var(--sh-btn-accent); }
.pkaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pkaart { display: flex; flex-direction: column; border-radius: 26px; background: #fff; overflow: hidden; box-shadow: var(--sh-card); transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover), opacity 300ms; }
.pkaart:nth-child(3n+1) { grid-row: span 1; }
.pkaart:hover { transform: translateY(-6px); box-shadow: var(--sh-lift); }
.pkaart.weg { display: none; }
.pkaart-beeld { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; }
.pkaart-beeld > img, .pkaart-beeld > .ph-vlak { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.pkaart:hover .pkaart-beeld > * { transform: scale(1.05); }
.pkaart-info { padding: 20px 22px 24px; display: block; }
.pkaart-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.pkaart-chips .pil { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: var(--r-pill); background: var(--c-accent-soft); color: var(--c-accent); }
.pkaart-info b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--c-ink); }
.pkaart-info > span:last-child { display: block; margin-top: 4px; font-size: 15px; color: var(--c-soft); }
.case-kop { padding: 130px 0 0; }
.kruimel-donker, .kruimel-donker a { color: var(--c-soft); }
.kruimel-donker a:hover { color: var(--c-accent); }
.case-titel { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: 40px; }
.case-logo { display: inline-flex; align-items: center; height: 54px; margin-bottom: 22px; }
.case-logo img { height: 100%; width: auto; }
.case-logo .woordmerk { font-size: 24px; color: var(--c-accent); }
.case-titel .h-statement { font-size: clamp(38px, 5.4vw, 80px); letter-spacing: -.045em; color: var(--c-ink); max-width: 14ch; }
.case-feiten { display: grid; gap: 14px; margin: 0; padding: 22px 24px; border-radius: 22px; background: #fff; box-shadow: var(--sh-card); }
.case-feiten div { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.case-feiten dt { color: var(--c-soft); font-weight: 600; }
.case-feiten dd { margin: 0; color: var(--c-ink); font-weight: 700; text-align: right; }
.case-cover { position: relative; aspect-ratio: 16 / 8; border-radius: var(--r-band); overflow: hidden; }
.case-cover > img, .case-cover > .ph-vlak { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-verhaal { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 100px); }
.case-groot { font-size: clamp(20px, 1.9vw, 27px); line-height: 1.45; font-weight: 500; letter-spacing: -.01em; color: var(--c-ink); margin: 0; }
.case-gal-sectie { padding-top: 0; }
.case-galerij { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(140px, 16vw, 230px); gap: 14px; }
.case-galerij figure { position: relative; margin: 0; border-radius: 22px; overflow: hidden; }
.case-galerij figure > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gal-0 { grid-column: span 4; grid-row: span 2; } .gal-1 { grid-column: span 2; } .gal-2 { grid-column: span 2; }
.gal-3 { grid-column: span 3; grid-row: span 2; } .gal-4 { grid-column: span 3; grid-row: span 2; }
.resultaat { padding: clamp(30px, 5vw, 60px); border-radius: var(--r-band); background: #ece5d7; }
.resultaat p { margin: 0; font-size: clamp(28px, 3.6vw, 52px); font-weight: var(--fw-head); letter-spacing: -.04em; line-height: 1.08; color: var(--c-ink); max-width: 22ch; }
.volgende { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 30px; padding: clamp(20px, 3vw, 34px); border-radius: var(--r-band); background: #fff; box-shadow: var(--sh-card); transition: transform var(--dur-hover) var(--ease-out); }
.volgende:hover { transform: translateY(-5px); }
.volgende-tekst b { display: block; font-size: clamp(30px, 3.6vw, 52px); font-weight: var(--fw-head); letter-spacing: -.04em; color: var(--c-ink); line-height: 1; }
.volgende-tekst > span:last-child { display: block; margin-top: 10px; font-size: 17px; color: var(--c-soft); }
.volgende-beeld { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; }
.volgende-beeld > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 960px) {
.logomuur-raster { grid-template-columns: 1fr 1fr; gap: 10px; }
.pkaarten { grid-template-columns: 1fr 1fr; }
.case-titel, .case-verhaal, .volgende { grid-template-columns: 1fr; }
.case-galerij { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
.case-galerij figure { grid-column: span 1 !important; grid-row: span 1 !important; }
.case-galerij .gal-0 { grid-column: span 2 !important; grid-row: span 2 !important; }
}
@media (max-width: 620px) {
.pkaarten { grid-template-columns: 1fr; }
.logomuur-kop .lead { display: none; }
}
.logomuur-pin > .wrap { width: 100%; }
.twijfel { position: fixed; right: 22px; bottom: 92px; z-index: 900; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.twijfel-kaart { pointer-events: auto; border-radius: 24px; background: #f4f1ea; overflow: hidden; box-shadow: 0 30px 70px -24px rgba(10, 18, 50, .55), 0 0 0 1px rgba(var(--shadow-rgb), .06);
transform-origin: calc(100% - 29px) calc(100% + 40px); transform: scale(.2) translateY(30px); opacity: 0; transition: transform 550ms cubic-bezier(.2, 1.25, .4, 1), opacity 250ms; }
.twijfel.open .twijfel-kaart { transform: none; opacity: 1; }
.twijfel-kop { display: flex; align-items: center; gap: 11px; padding: 14px 14px 12px 16px; background: var(--c-accent); color: #fff; }
.twijfel-av { width: 36px; height: 36px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.twijfel-av img { width: 78%; }
.twijfel-kop b { display: block; font-size: 15px; }
.twijfel-kop small { display: block; font-size: 12px; opacity: .8; }
.twijfel-dicht { margin-left: auto; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.twijfel-dicht:hover { background: rgba(255, 255, 255, .28); }
.twijfel-dicht svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.twijfel-msg { margin: 16px 16px 12px; padding: 16px 18px; border-radius: 18px; border-top-left-radius: 6px; background: #fff; box-shadow: 0 6px 14px -10px rgba(var(--shadow-rgb), .5); }
.twijfel h2 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--c-ink); margin: 0 0 4px; }
.twijfel p { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--c-ink); }
.twijfel p .script { font-family: var(--font-script); font-weight: 400; font-size: 1.55em; color: var(--c-accent); letter-spacing: 0; }
.twijfel .twijfel-sub { font-size: 14.5px; font-weight: 400; line-height: 1.55; color: var(--c-soft); letter-spacing: 0; margin-top: 8px; }
.twijfel-knoppen { display: grid; gap: 8px; padding: 0 16px 16px; }
.twijfel-knoppen .btn { justify-content: center; width: 100%; }
@media (max-width: 620px) { .twijfel { right: 16px; bottom: 80px; } }
.dscroll { height: 340vh; }
.ds-zoek { position: relative; width: 100%; max-width: 520px; display: grid; gap: 12px; }
.ds-zoekbalk { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: var(--r-pill); background: #fff; box-shadow: 0 30px 60px -30px rgba(5, 10, 35, .7); font-size: 17px; color: var(--c-ink); }
.ds-zoekbalk svg { width: 20px; height: 20px; fill: none; stroke: var(--c-soft); stroke-width: 2.2; stroke-linecap: round; flex: none; }
.ds-typ { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; border-right: 2px solid var(--c-accent); }
.s4.aan .ds-typ { animation: typ 1.1s steps(18) 300ms both, cursor .8s step-end infinite; }
@keyframes typ { to { width: 18ch; } }
@keyframes cursor { 50% { border-color: transparent; } }
.ds-res { padding: 16px 20px; border-radius: 18px; background: #fff; box-shadow: 0 20px 40px -26px rgba(5, 10, 35, .6); opacity: 0; transform: translateY(14px); transition: opacity 400ms var(--ease-out), transform 600ms var(--ease-out); }
.ds-res-url { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #4d5160; }
.ds-res-url i { width: 18px; height: 18px; border-radius: 50%; background: var(--c-accent); }
.ds-res b { display: block; margin: 6px 0 8px; font-size: 18px; font-weight: 600; color: #1a3db8; }
.ds-res-txt { display: block; height: 8px; border-radius: 4px; background: #e6e8ee; margin-top: 6px; }
.ds-res-txt.kort { width: 60%; }
.ds-res.grijs { opacity: 0; }
.ds-res.grijs b { height: 12px; width: 55%; border-radius: 4px; background: #dfe2ea; }
.ds-res.grijs .ds-res-url i { background: #c9cdd8; }
.s4.aan .ds-res { opacity: 1; transform: none; transition-delay: 1.4s; }
.s4.aan .ds-res.grijs { opacity: .55; transition-delay: 1.6s; }
.ds-ai { padding: 16px 18px; border-radius: 18px; border-top-left-radius: 6px; background: #f4f1ea; color: var(--c-ink); font-size: 15px; line-height: 1.55; box-shadow: 0 20px 40px -26px rgba(5, 10, 35, .6); opacity: 0; transform: translateY(14px) scale(.97); transition: opacity 400ms var(--ease-out), transform 600ms cubic-bezier(.2, 1.3, .4, 1); }
.ds-ai-kop { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--c-accent); margin-bottom: 6px; }
.ds-ai-kop svg { width: 15px; height: 15px; fill: var(--c-accent); }
.ds-ai b { color: var(--c-accent); }
.s4.aan .ds-ai { opacity: 1; transform: none; transition-delay: 2.2s; }
@media (max-width: 960px) { .ds-res.grijs { display: none; } .ds-zoekbalk { padding: 12px 16px; font-size: 15px; } .ds-ai { font-size: 13.5px; } }
.logomuur-knop { text-align: center; margin-top: clamp(20px, 3vh, 34px); }
.logomuur-home { height: 220vh; }
.over-kop { padding: 140px 0 var(--section-y); }
.over-kop-raster { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.over-kop .h-statement { font-size: clamp(44px, 6vw, 92px); letter-spacing: -.045em; line-height: 1; color: var(--c-ink); margin: 6px 0 0; }
.over-kop .h-statement .script { font-size: 1.15em; }
.over-kop .lead { margin: 26px 0 24px; max-width: 48ch; }
.feitjes { display: flex; flex-wrap: wrap; gap: 8px; }
.over-kop-foto { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-band); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(var(--shadow-rgb), .6); }
.over-kop-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.verhaal { position: relative; height: 380vh; }
.verhaal-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: 70px; }
.verhaal-raster { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 100px); align-items: center; }
.hoofdstukken { position: relative; margin-top: 30px; min-height: 230px; }
.hoofdstuk { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(24px); transition: opacity 450ms var(--ease-out), transform 600ms var(--ease-out); }
.hoofdstuk.aan { opacity: 1; transform: none; }
.hoofdstuk h3 { font-size: clamp(32px, 3.4vw, 50px); font-weight: var(--fw-head); letter-spacing: -.04em; color: var(--c-ink); margin: 0 0 12px; }
.hoofdstuk p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: var(--c-soft); margin: 0; max-width: 40ch; }
.verhaal-stapel { position: relative; height: min(560px, 64vh); }
.vpola { position: absolute; left: 50%; top: 50%; width: min(340px, 80%); margin: 0; padding: 12px 12px 52px; background: #fff; border-radius: 4px; box-shadow: 0 30px 60px -30px rgba(var(--shadow-rgb), .55), 0 2px 6px rgba(var(--shadow-rgb), .08);
transform: translate(-50%, -50%) rotate(var(--r)); transition: transform 800ms cubic-bezier(.2, 1, .3, 1), opacity 500ms; }
.vpola img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.vpola figcaption { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-family: var(--font-script); font-size: 26px; color: var(--c-ink); }
.vpola.weg { transform: translate(-160%, -40%) rotate(-24deg); opacity: 0; }
.waarden-raster { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.waarden { list-style: none; margin: 0; padding: 0; }
.waarden li { padding: 26px 0; border-top: 1px solid var(--c-line); }
.waarden li:last-child { border-bottom: 1px solid var(--c-line); }
.waarden b { display: block; font-size: clamp(24px, 2.4vw, 34px); font-weight: var(--fw-head); letter-spacing: -.035em; color: var(--c-ink); }
.waarden span { display: block; margin-top: 6px; font-size: 17px; line-height: 1.6; color: var(--c-soft); }
.team2 { padding: clamp(40px, 5vw, 76px); border-radius: var(--r-band); background-color: #ece5d7; }
.team2-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 36px; }
.team2-kop .lead { margin: 0; max-width: 40ch; }
.team2-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.lid { margin: 0; background: #fff; border-radius: 26px; padding: 12px 12px 20px; box-shadow: var(--sh-card); }
.lid-foto { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 4.4; border-radius: 18px; overflow: hidden; background: var(--c-kraft); color: #fff; font-size: 64px; font-weight: 900; }
.lid-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lid figcaption { padding: 16px 8px 0; }
.lid b { display: block; font-size: 20px; font-weight: 800; color: var(--c-ink); }
.lid figcaption span { display: block; font-size: 14.5px; color: var(--c-soft); margin-top: 2px; }
.contact-kop { padding: 140px 0 var(--section-y); }
.contact-raster { display: grid; grid-template-columns: 1.25fr .85fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.contact-kop .h-statement { font-size: clamp(42px, 5.6vw, 84px); letter-spacing: -.045em; color: var(--c-ink); margin: 6px 0 0; }
.contact-kop .lead { margin: 20px 0 30px; max-width: 46ch; }
.cform { display: grid; gap: 16px; padding: clamp(22px, 3vw, 36px); border-radius: 28px; background: #fff; box-shadow: var(--sh-card); }
.keuzes { border: 0; padding: 0; margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 8px; }
.keuzes legend { font-size: 15px; font-weight: 700; color: var(--c-ink); margin-bottom: 12px; padding: 0; }
.keuze { position: relative; cursor: pointer; }
.keuze input { position: absolute; opacity: 0; }
.keuze span { display: inline-flex; padding: 10px 16px; border-radius: var(--r-pill); background: #f2f3f7; font-size: 14.5px; font-weight: 600; color: var(--c-ink); transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast); }
.keuze:hover span { background: var(--c-accent-soft); color: var(--c-accent); }
.keuze input:checked + span { background: var(--c-accent); color: #fff; box-shadow: var(--sh-btn-accent); }
.keuze input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.cform-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cform label > span { display: block; font-size: 14px; font-weight: 600; color: var(--c-ink); margin-bottom: 6px; }
.cform label em { font-style: normal; font-weight: 500; color: var(--c-soft); }
.cform input[type=text], .cform input[type=email], .cform input[type=tel], .cform textarea { width: 100%; font: inherit; font-size: 16px; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--c-line); background: #fafafa; color: var(--c-ink); transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast); }
.cform input:focus, .cform textarea:focus { outline: 0; border-color: var(--c-accent); background: #fff; box-shadow: 0 0 0 4px var(--c-accent-soft); }
.cform textarea { resize: vertical; min-height: 120px; }
.cform-knop { justify-content: center; width: 100%; padding-block: 16px; font-size: 16px; }
.cform-klein { font-size: 13px; color: var(--c-soft); text-align: center; }
.cform-klein a { color: var(--c-accent); }
.contact-rechts { position: sticky; top: 110px; display: grid; gap: 16px; margin-top: 8px; }
.direct { padding: 22px; border-radius: 28px; background: var(--c-accent); color: #fff; box-shadow: 0 30px 60px -30px rgba(var(--shadow-rgb), .7); }
.direct-kop { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.direct-foto { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); flex: none; }
.direct-foto img { width: 100%; height: 100%; object-fit: cover; }
.direct-kop b { display: block; font-size: 19px; }
.direct-kop small { display: block; font-size: 13px; color: var(--c-on-dark-soft); }
.direct-rij { display: flex; align-items: center; gap: 14px; padding: 13px 14px; border-radius: 16px; color: #fff; transition: background var(--dur-fast); }
a.direct-rij:hover { background: rgba(255, 255, 255, .1); }
.direct-rij i { flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .14); display: flex; align-items: center; justify-content: center; }
.direct-rij i svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.direct-rij.wa i { background: #fff; }
.direct-rij.wa i svg { fill: var(--c-accent); stroke: none; }
.direct-rij b { display: block; font-size: 16px; }
.direct-rij small { display: block; font-size: 13px; color: var(--c-on-dark-soft); }
.daarna { padding: 22px 24px; border-radius: 24px; background: #fff; box-shadow: var(--sh-card); }
.daarna b { display: block; font-size: 16px; color: var(--c-ink); margin-bottom: 10px; }
.daarna ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.daarna li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.5; color: var(--c-soft); }
.daarna li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); }
.goscene { position: relative; height: 210vh; }
.goscene-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; border-radius: 0; }
.goscene-kop { position: relative; z-index: 5; padding-top: 130px; text-align: center; }
.goscene-logo { height: 34px; margin: 0 auto 22px; }
.goscene-kop .h-statement { font-size: clamp(40px, 5.4vw, 80px); letter-spacing: -.045em; color: #fff; }
.goscene-kop .lead { color: var(--c-on-dark-soft); max-width: 50ch; margin: 18px auto 0; }
.gb { position: absolute; left: 0; top: 0; z-index: 6; width: 290px; will-change: transform, opacity; }
.go-laptop { position: absolute; z-index: 4; left: 50%; bottom: -4vh; width: min(760px, 70vw); transform: translateX(-50%); will-change: transform; }
.gofuncties { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gofunctie { padding: 26px; border-radius: var(--r-card); background: #fff; box-shadow: var(--sh-card); }
.gofunctie h3 { font-size: 21px; font-weight: 800; color: var(--c-ink); margin: 20px 0 8px; letter-spacing: -.02em; }
.gofunctie p { font-size: 15px; line-height: 1.6; color: var(--c-soft); margin: 0; }
.goportaal { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 6vw, 90px); align-items: center; padding: clamp(40px, 5vw, 80px); border-radius: var(--r-band); background-color: #ece5d7; overflow: hidden; }
.goportaal .lead { margin: 18px 0 28px; max-width: 44ch; }
.goportaal-tel { width: min(300px, 70%); justify-self: center; }
.go-donker.afsluiter { padding: calc(var(--band-y) * 1.1) 24px; }
@media (max-width: 960px) {
.over-kop-raster, .verhaal-raster, .waarden-raster, .contact-raster, .goportaal { grid-template-columns: 1fr; }
.verhaal-stapel { height: 40vh; order: -1; }
.vpola { width: min(220px, 60%); padding-bottom: 40px; }
.hoofdstukken { min-height: 200px; margin-top: 10px; }
.verhaal .h2 { display: none; }
.contact-rechts { position: static; }
.cform-rij { grid-template-columns: 1fr; }
.gofuncties { grid-template-columns: 1fr 1fr; }
.gb { width: 210px; }
}
@media (max-width: 620px) { .gofuncties { grid-template-columns: 1fr; } }
.s3.aan .ds-score:nth-child(2) { transition-delay: 1200ms; }
.s3.aan .ds-score:nth-child(3) { transition-delay: 1400ms; }
.ds-geo { box-shadow: 0 20px 40px -14px rgba(5, 10, 35, .55), inset 0 0 0 6px var(--c-accent); }
.ds-geo b { color: var(--c-accent); }
@media (max-width: 960px) { .ds-scores { right: 4px; bottom: -16px; gap: 6px; } .ds-score { width: 66px; height: 66px; } .ds-score b { font-size: 19px; } .ds-score small { font-size: 9.5px; } }
.logomuur-raster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; max-width: 1100px; }
.logotegel { aspect-ratio: 3 / 2; border-radius: 18px; }
.lt-logo { padding: 18%; }
.woordmerk { font-size: clamp(15px, 1.3vw, 19px); }
.lt-label { padding: 22px 12px 10px; font-size: 14px; }
.lt-label em { display: none; }
@media (max-width: 620px) { .logomuur-raster { grid-template-columns: repeat(3, 1fr); gap: 8px; } .logotegel { border-radius: 12px; } }
.wie { height: 175vh; padding: 0 !important; }
.wie-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.wie-pin > .wrap { width: 100%; }
.cursor { transition: opacity 200ms; }
.ozoom { position: relative; height: 300vh; }
.ozoom-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.ozoom-tafel { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; background-color: #ece5d7; }
.tpol { position: absolute; margin: 0; padding: 10px 10px 40px; background: #fff; border-radius: 3px; box-shadow: 0 30px 60px -30px rgba(var(--shadow-rgb), .55), 0 2px 6px rgba(var(--shadow-rgb), .08); transform: translate(-50%, -50%) rotate(var(--r)); }
.tpol img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.tpol.hoofd { left: 50%; top: 56%; width: min(300px, 30vw); z-index: 3; }
.tpol.t2 { left: 22%; top: 40%; width: min(220px, 20vw); }
.tpol.t3 { left: 79%; top: 38%; width: min(230px, 21vw); }
.tpol.t4 { left: 76%; top: 78%; width: min(190px, 17vw); z-index: 2; }
.tnote { position: absolute; left: 25%; top: 76%; transform: translate(-50%, -50%) rotate(var(--r)); padding: 20px 22px; background: var(--c-accent); color: #fff; font-weight: 800; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.1; border-radius: 3px; box-shadow: 0 22px 40px -20px rgba(var(--shadow-rgb), .6); z-index: 2; }
.tnote span { display: block; font-family: var(--font-script); font-weight: 400; font-size: 1.45em; color: #e8dcc0; }
.tlogo { position: absolute; left: 50%; top: 18%; transform: translate(-50%, -50%) rotate(var(--r)); padding: 14px 20px; background: #fff; border-radius: 12px; box-shadow: 0 16px 30px -18px rgba(var(--shadow-rgb), .5); }
.tlogo img { display: block; height: 30px; }
.tsticker { position: absolute; transform: translate(-50%, -50%) rotate(var(--r)); font-size: 15px; font-weight: 700; padding: 9px 16px; border-radius: 12px; background: var(--c-accent); color: #fff; box-shadow: 0 14px 26px -14px rgba(var(--shadow-rgb), .55); z-index: 4; }
.tsticker.kraft { background: var(--c-kraft); color: var(--c-ink); }
.tsticker.s-a { left: 37%; top: 28%; } .tsticker.s-b { left: 63%; top: 86%; }
.ozoom-intro { position: absolute; left: 0; right: 0; bottom: 10vh; z-index: 6; text-align: center; color: #fff; text-shadow: 0 6px 40px rgba(10, 20, 60, .45); pointer-events: none; }
.ozoom-intro span { display: block; font-size: clamp(20px, 2vw, 28px); font-weight: 600; }
.ozoom-intro b { display: block; font-family: var(--font-script); font-weight: 400; font-size: clamp(90px, 13vw, 200px); line-height: .9; }
.ozoom-kop { position: absolute; left: 0; right: 0; top: 96px; z-index: 6; text-align: center; opacity: 0; }
.ozoom-kop .h-statement { font-size: clamp(40px, 5vw, 76px); letter-spacing: -.045em; color: var(--c-ink); }
.ozoom-kop .lead { max-width: 50ch; margin: 10px auto 0; }
.ozoom .scroll-tip { z-index: 6; color: #fff; }
.tijdlijn { position: relative; height: 300vh; }
.tijdlijn-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding-top: 70px; }
.tijdlijn-pin > .wrap { width: 100%; }
.tijdlijn-kop { margin-bottom: 30px; }
.tijdlijn-spoor { display: flex; gap: 20px; padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); will-change: transform; }
.tl-kaart { flex: none; width: clamp(280px, 30vw, 400px); background: #fff; border-radius: 26px; padding: 12px 12px 26px; box-shadow: var(--sh-card); }
.tl-foto { display: block; aspect-ratio: 4 / 3.2; border-radius: 18px; overflow: hidden; margin-bottom: 18px; }
.tl-foto img { width: 100%; height: 100%; object-fit: cover; }
.tl-kaart .label, .tl-kaart h3, .tl-kaart p { margin-left: 12px; margin-right: 12px; }
.tl-kaart .label { margin-bottom: 8px; }
.tl-kaart h3 { font-size: clamp(26px, 2.4vw, 34px); font-weight: var(--fw-head); letter-spacing: -.035em; color: var(--c-ink); margin-top: 0; margin-bottom: 8px; }
.tl-kaart p { font-size: 16px; line-height: 1.6; color: var(--c-soft); margin-top: 0; margin-bottom: 0; }
.tl-slot { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; padding: 40px 34px; background: #ece5d7; }
.tl-slot h3 { margin: 0; font-size: clamp(32px, 3vw, 46px); }
.waarden2 { list-style: none; margin: 18px 0 0; padding: 0; }
.waarden2 li { padding: 22px 0; border-top: 1px solid var(--c-line); opacity: .18; transition: opacity 500ms var(--ease-out); display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: baseline; }
.waarden2 li.aan { opacity: 1; }
.waarden2 b { font-size: clamp(30px, 4vw, 60px); font-weight: var(--fw-head); letter-spacing: -.045em; line-height: 1; color: var(--c-ink); }
.waarden2 span { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--c-soft); }
.ckop { position: relative; min-height: 88vh; display: flex; align-items: flex-end; overflow: hidden; }
.ckop .hero-foto { inset: 0; border-radius: 0; --diep: .9; }
.ckop-in { position: relative; z-index: 2; width: 100%; padding-top: 150px; padding-bottom: clamp(110px, 16vh, 170px); }
.ckop-label { display: inline-block; font-size: 14px; font-weight: 700; color: #fff; padding: 7px 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.ckop .h-statement { font-size: clamp(38px, 5.4vw, 84px); letter-spacing: -.045em; line-height: 1; color: #fff; margin: 22px 0 0; max-width: 16ch; text-shadow: 0 6px 40px rgba(10, 20, 60, .3); }
.ckop .h-statement .script { color: #e8dcc0; font-size: 1.2em; }
.ckop .lead { color: var(--c-on-dark-soft); max-width: 46ch; margin: 22px 0 30px; }
.ckop-keuzes { display: flex; gap: 12px; flex-wrap: wrap; }
.ckeuze { display: flex; align-items: center; gap: 14px; padding: 14px 20px 14px 14px; border-radius: 20px; background: #fff; color: var(--c-ink); min-width: 280px; box-shadow: 0 24px 44px -24px rgba(5, 10, 35, .6); transition: transform var(--dur-hover) var(--ease-out); }
.ckeuze:hover { transform: translateY(-4px); }
.ckeuze i { flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--c-accent); display: flex; align-items: center; justify-content: center; }
.ckeuze i svg { width: 22px; height: 22px; fill: #fff; }
.ckeuze:nth-child(2) i svg { fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ckeuze b { display: block; font-size: 17px; }
.ckeuze small { display: block; font-size: 13px; color: var(--c-soft); }
.ckeuze em { margin-left: auto; font-style: normal; font-size: 20px; color: var(--c-accent); }
.cvlak { position: relative; z-index: 3; margin-top: -80px; padding-bottom: var(--section-y); }
.cvlak-raster { display: grid; grid-template-columns: 1.3fr .8fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.ktegels { border: 0; padding: 0; margin: 0 0 6px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ktegels legend { font-size: 18px; font-weight: 800; color: var(--c-ink); margin-bottom: 14px; padding: 0; letter-spacing: -.01em; }
.ktegel { position: relative; cursor: pointer; }
.ktegel input { position: absolute; opacity: 0; }
.ktegel > span { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 18px; background: #f4f5f8; font-size: 15px; font-weight: 700; color: var(--c-ink); transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast); }
.ktegel i { width: 38px; height: 38px; border-radius: 12px; background: #fff; color: var(--c-accent); display: flex; align-items: center; justify-content: center; }
.ktegel i svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ktegel:hover > span { background: var(--c-accent-soft); }
.ktegel input:checked + span { background: var(--c-accent); color: #fff; box-shadow: var(--sh-btn-accent); transform: translateY(-2px); }
.ktegel input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.cnaast { display: grid; gap: 14px; position: sticky; top: 110px; }
.cnaast-foto { position: relative; aspect-ratio: 4 / 4.2; border-radius: 26px; overflow: hidden; box-shadow: var(--sh-card); }
.cnaast-foto img { width: 100%; height: 100%; object-fit: cover; }
.cnaast-label { position: absolute; left: 14px; bottom: 14px; padding: 9px 14px; border-radius: 12px; background: #fff; font-size: 14px; font-weight: 700; color: var(--c-ink); box-shadow: 0 10px 24px -12px rgba(var(--shadow-rgb), .5); }
.cnaast-rij { display: flex; justify-content: space-between; gap: 10px; padding: 0 6px; font-size: 14.5px; font-weight: 600; }
.cnaast-rij a { color: var(--c-accent); }
@media (max-width: 960px) {
.cvlak-raster { grid-template-columns: 1fr; }
.cnaast { position: static; }
.ktegels { grid-template-columns: 1fr 1fr; }
.ckeuze { min-width: 0; width: 100%; }
.waarden2 li { grid-template-columns: 1fr; gap: 6px; }
.tpol.hoofd { width: 44vw; } .tpol.t2, .tpol.t3 { width: 30vw; } .tpol.t4 { width: 26vw; }
}
.tlogo { left: 42%; top: 91%; z-index: 4; }
.tsticker.s-a { left: 89%; top: 60%; }
.tsticker.s-b { left: 64%; top: 90%; }
.boek3d { position: relative; justify-self: center; width: min(330px, 78%); aspect-ratio: 210 / 297; perspective: 1800px; }
.boek { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(-26deg) rotateX(5deg) rotateZ(1.5deg); transition: transform 900ms var(--ease-out); }
.boek3d:hover .boek { transform: rotateY(-12deg) rotateX(3deg) rotateZ(0deg) translateY(-6px); }
.boek > div { position: absolute; }
.boek-voor { inset: 0; transform: translateZ(9px); border-radius: 2px 6px 6px 2px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.boek-voor img { display: block; width: 100%; height: 100%; object-fit: cover; }
.boek-voor::before { content: ""; position: absolute; left: 3.5%; top: 0; bottom: 0; width: 2.5%; background: linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(255, 255, 255, .12) 60%, rgba(0, 0, 0, .08)); }
.boek-voor::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .08) 100%); pointer-events: none; }
.boek-achter { inset: 0; transform: translateZ(-9px) rotateY(180deg); background: #24397a; border-radius: 6px 2px 2px 6px; }
.boek-rug { top: 0; bottom: 0; left: 0; width: 18px; transform: translateX(-9px) rotateY(-90deg); background: linear-gradient(90deg, #1d2f6a, #2f4890 50%, #1d2f6a); }
.boek-bladen { top: 1.2%; bottom: 1.2%; right: 0; width: 18px; transform: translateX(9px) rotateY(90deg); background: repeating-linear-gradient(90deg, #fbfaf6 0 1px, #e6e1d5 1px 2px); box-shadow: inset 0 0 6px rgba(0, 0, 0, .12); }
.boek-schaduw { position: absolute; left: 8%; right: -6%; bottom: -7%; height: 14%; background: radial-gradient(closest-side, rgba(23, 26, 36, .35), transparent); filter: blur(6px); transform: rotate(1.5deg); z-index: -1; }
.boek-los { position: absolute; inset: 4% -10% -2% 18%; transform: rotate(8deg); border-radius: 3px; overflow: hidden; box-shadow: 0 24px 50px -24px rgba(var(--shadow-rgb), .5); z-index: -1; }
.boek-los img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (max-width: 620px) { .boek3d { display: block; width: 62%; margin: 10px auto 0; } }
.kop-logo { display: inline-block; height: .86em; width: auto; vertical-align: -.08em; margin-left: .06em; }
.tl-kaart h3 .kop-logo { height: .95em; margin-left: 0; }
.go-toneel { perspective: 1400px; }
.go-toneel .laptop, .go-toneel .go-telefoon .telefoon { will-change: transform; transform-origin: 50% 100%; }
.go-chip { position: absolute; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 16px; background: #fff; color: var(--c-ink); font-size: 13.5px; white-space: nowrap;
box-shadow: 0 20px 40px -18px rgba(5, 10, 35, .6); opacity: 0; transform: translateY(16px) scale(.9); transition: opacity 400ms var(--ease-out), transform 600ms cubic-bezier(.2, 1.3, .4, 1); pointer-events: none; }
.go-chip b { font-weight: 800; }
.go-chip i { flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--c-accent-soft); color: var(--c-accent); display: flex; align-items: center; justify-content: center; }
.go-chip i.geel { background: #fdf1d8; color: #c98a12; }
.go-chip i.groen { background: #dcf3e5; color: #2fa866; }
.go-chip i svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.go-chip.aan { opacity: 1; transform: none; }
.go-chip.c1 { left: -6%; top: 6%; }
.go-chip.c2 { right: 16%; top: -6%; }
.go-chip.c3 { left: 8%; bottom: -4%; }
@media (max-width: 960px) { .go-chip { font-size: 12px; } .go-chip.c1 { left: 0; } .go-chip.c2 { right: 0; } }
.boek-binnen { inset: 1.2% 1.5% 1.2% 0; transform: translateZ(7px); overflow: hidden; border-radius: 0 4px 4px 0; background: #f4f1ea; box-shadow: inset 8px 0 14px -8px rgba(0, 0, 0, .25); }
.boek-binnen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.boek-voor { transform-origin: 0 50%; transform-style: preserve-3d; transition: transform 900ms cubic-bezier(.2, .9, .25, 1); }
.boek-kaft-binnen { position: absolute; inset: 0; transform: rotateY(180deg) translateZ(1px); backface-visibility: hidden; background: linear-gradient(90deg, #e9e3d6, #f6f2ea); }
.boek-voor img { backface-visibility: hidden; }
.boek3d:hover .boek-voor { transform: translateZ(9px) rotateY(-62deg); }
.boek3d:hover .boek { transform: rotateY(-8deg) rotateX(4deg) translateY(-8px); }
.boek3d:hover .boek-los { transform: rotate(12deg) translate(18px, 6px); }
.boek-los { transition: transform 900ms var(--ease-out); }
.boek3d { cursor: pointer; }
.ckop-in { display: grid; grid-template-columns: 1.4fr .75fr; gap: clamp(24px, 4vw, 60px); align-items: end; }
.ckop-tekst .h-statement { margin-top: 0; }
.ckop-kaart { background: #fff; border-radius: 26px; padding: 20px; box-shadow: 0 30px 60px -26px rgba(5, 10, 35, .6); display: grid; gap: 4px; }
.ckop-kaart-kop { font-size: 17px; color: var(--c-ink); padding: 4px 8px 10px; }
.ck-rij { display: flex; align-items: center; gap: 14px; padding: 10px 8px; border-radius: 14px; color: var(--c-ink); transition: background var(--dur-fast); }
a.ck-rij:hover { background: var(--c-accent-soft); }
.ck-rij i { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--c-accent-soft); color: var(--c-accent); display: flex; align-items: center; justify-content: center; }
.ck-rij i svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ck-rij i.wa { background: var(--c-accent); }
.ck-rij i.wa svg { fill: #fff; stroke: none; }
.ck-rij small { display: block; font-size: 12.5px; color: var(--c-soft); }
.ck-rij b { display: block; font-size: 16.5px; }
.ck-kvk { font-size: 12.5px; color: var(--c-soft); padding: 6px 8px 0; }
@media (max-width: 960px) { .ckop-in { grid-template-columns: 1fr; } }
.hk { position: relative; height: 320vh; }
.hk-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.hk-h1 { display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--c-accent); background: var(--c-accent-soft); padding: 7px 14px; border-radius: var(--r-pill); margin: 0 0 18px; }
.hk-h1.licht { color: #fff; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.hk .h-statement { font-size: clamp(40px, 5.2vw, 80px); letter-spacing: -.045em; line-height: 1; color: var(--c-ink); }
.hk-social .hk-pin { display: flex; align-items: center; padding-top: 70px; }
.hk-raster { width: 100%; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.hk-wissel { position: relative; min-height: 330px; }
.hk-a, .hk-b { position: absolute; inset: 0 0 auto 0; transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); }
.hk-b { opacity: 0; transform: translateY(24px); pointer-events: none; }
.hk-b .lead { margin: 20px 0 28px; max-width: 44ch; }
.hk-social.na .hk-a { opacity: 0; transform: translateY(-24px); }
.hk-social.na .hk-b { opacity: 1; transform: none; pointer-events: auto; }
.hk-beeld { position: relative; display: flex; justify-content: center; align-items: center; gap: 22px; }
.sf-tel { width: min(320px, 70%); border-radius: 40px; border: 10px solid #12162a; background: #fff; padding: 22px 12px 14px; box-shadow: 0 40px 80px -36px rgba(var(--shadow-rgb), .6); }
.sf-kop { display: flex; align-items: center; gap: 10px; }
.sf-av { width: 42px; height: 42px; border-radius: 50%; background: #e3e6ee; color: #9aa0ad; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.sf-naam b { display: block; font-size: 14px; } .sf-naam small { display: block; font-size: 11.5px; color: #8b8f9c; }
.sf-cijfers { display: flex; justify-content: space-around; margin: 14px 0 10px; text-align: center; font-size: 11px; color: #8b8f9c; }
.sf-cijfers b { display: block; font-size: 16px; color: var(--c-ink); }
.sf-melding { position: relative; height: 30px; margin-bottom: 10px; font-size: 12px; font-weight: 700; }
.sf-melding span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; transition: opacity 400ms; }
.m-oud { background: #fdecea; color: #c94a3e; }
.m-nieuw { background: #dcf3e5; color: #24874f; opacity: 0; }
.hk-social.vol .m-oud { opacity: 0; } .hk-social.vol .m-nieuw { opacity: 1; }
.sf-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.sf-vak { position: relative; aspect-ratio: 1; border-radius: 4px; background: #f1f2f5; border: 1.5px dashed #d8dbe3; overflow: hidden; }
.sf-vak i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-style: normal; font-size: 9.5px; font-weight: 800; line-height: 1.1; padding: 6%; background-size: cover; background-position: center;
opacity: 0; transform: scale(.7); transition: opacity 350ms var(--ease-out), transform 500ms cubic-bezier(.2, 1.3, .4, 1); }
.sf-vak.aan { border-color: transparent; }
.sf-vak.aan i { opacity: 1; transform: none; }
.sf-vak .t-blauw { background-color: var(--c-accent); color: #fff; } .sf-vak .t-licht { background-color: #dfe6f8; color: var(--c-accent); } .sf-vak .t-kraft { background-color: #e8dcc0; } .sf-vak .t-kraft img { width: 70%; }
.sf-kalender { display: grid; gap: 8px; padding: 18px; border-radius: 22px; background: #fff; box-shadow: var(--sh-card); font-size: 13px; }
.sf-kalender > b { font-size: 14px; margin-bottom: 4px; }
.sf-week { display: flex; align-items: center; gap: 6px; }
.sf-week em { font-style: normal; color: var(--c-soft); width: 56px; }
.sf-week i { width: 22px; height: 22px; border-radius: 7px; background: #f1f2f5; transition: background 300ms; }
.sf-week.aan i { background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.hk-foto .hk-pin { background-color: #ece5d7; }
.zf-pol { position: absolute; margin: 0; padding: 10px 10px 36px; background: #fff; border-radius: 3px; box-shadow: 0 26px 50px -26px rgba(var(--shadow-rgb), .55); transform: rotate(var(--r)); width: min(230px, 18vw); }
.zf-pol img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.zp1 { right: 26%; top: 24%; } .zp2 { right: 6%; top: 40%; }
.zf { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; transform-origin: 0 0; will-change: transform; }
.zf-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; will-change: filter; }
.zf-ui { position: absolute; inset: 0; }
.zf-ui .hoek { width: 54px; height: 54px; border-width: 3px; }
.zf-ui .hoek.h1 { left: 4%; top: 13%; } .zf-ui .hoek.h2 { right: 4%; top: 13%; } .zf-ui .hoek.h3 { left: 4%; bottom: 12%; } .zf-ui .hoek.h4 { right: 4%; bottom: 12%; }
.zf-focus { position: absolute; left: 50%; top: 34%; width: 130px; height: 130px; margin-left: -65px; border: 2.5px solid #fff; border-radius: 10px; transition: border-color 200ms; }
.zf-focus.scherp { border-color: #7cf29a; }
.zf-balk { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; display: flex; align-items: center; gap: 26px; padding: 0 4%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .05em; }
.zf-balk i { margin-left: auto; width: 14px; height: 14px; border-radius: 50%; background: #ff4d4d; }
.zf-flits { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.zf-tekst-a { position: absolute; left: 0; right: 0; top: 130px; z-index: 3; }
.zf-tekst-a .h-statement { color: #fff; text-shadow: 0 6px 40px rgba(0, 0, 0, .35); max-width: 12ch; }
.zf-tekst-a .script { color: #fff; font-size: 1.15em; }
.zf-tekst-b { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 3; opacity: 0; pointer-events: none; }
.zf-tekst-b > div { max-width: 44%; }
.zf-tekst-b .lead { margin: 20px 0 28px; }
.hk-foto.na .zf-tekst-b { opacity: 1; pointer-events: auto; transition: opacity 500ms var(--ease-out); }
.hk-video .hk-pin { border-radius: 0; }
.vd-tel { position: absolute; right: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); top: 50%; transform: translateY(-46%); width: min(330px, 30vw); aspect-ratio: 9 / 18; }
.vd-ring { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.vd-ring svg { position: absolute; width: 100%; max-width: 330px; aspect-ratio: 1; transform: rotate(-90deg); }
.vd-ring circle { fill: none; stroke: rgba(255, 255, 255, .15); stroke-width: 4; }
.vd-ring .vd-ring-v { stroke: #fff; stroke-linecap: round; stroke-dasharray: 339.3; stroke-dashoffset: 339.3; }
.vd-getal { position: relative; font-size: clamp(120px, 15vw, 220px); font-weight: 900; color: #fff; letter-spacing: -.06em; line-height: 1; }
.vd-reel { position: absolute; inset: 0; border-radius: 38px; border: 9px solid #0b0f22; overflow: hidden; background: #000; opacity: 0; transform: scale(.6); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7); }
.vd-reel > img { width: 100%; height: 100%; object-fit: cover; }
.vd-reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.3), transparent 25%, transparent 60%, rgba(0,0,0,.65)); }
.vd-balk { position: absolute; z-index: 2; left: 12px; right: 12px; top: 18px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.vd-balk i { display: block; height: 100%; width: 0; background: #fff; }
.vd-acties { position: absolute; z-index: 2; right: 12px; bottom: 100px; display: grid; gap: 14px; }
.vd-acties i { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.vd-tekst { position: absolute; z-index: 2; left: 14px; right: 56px; bottom: 22px; color: #fff; font-size: 13.5px; line-height: 1.4; }
.vd-tekst b { display: block; margin-bottom: 4px; }
.vd-tekst-a, .vd-tekst-b { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 3; }
.vd-tekst-a > *, .vd-tekst-b > div { max-width: 52%; }
.hk-video .h-statement { color: #fff; }
.hk-video .lead { color: var(--c-on-dark-soft); margin: 20px 0 28px; }
.vd-tekst-b { opacity: 0; pointer-events: none; }
.hk-video.na .vd-tekst-a { opacity: 0; transition: opacity 400ms; }
.hk-video.na .vd-tekst-b { opacity: 1; pointer-events: auto; transition: opacity 500ms var(--ease-out); }
.hk-web .hk-pin { display: flex; flex-direction: column; justify-content: center; padding-top: 80px; }
.hk-web .hk-pin > .wrap { width: 100%; }
.wb-kop { text-align: center; }
.wb-kop .h-statement { font-size: clamp(34px, 4.2vw, 64px); max-width: 20ch; margin-inline: auto; }
.wb-toneel { position: relative; width: min(860px, 86vw); margin: clamp(20px, 3vh, 36px) auto 0; }
.wb-browser { border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(var(--shadow-rgb), .6), 0 0 0 1px rgba(var(--shadow-rgb), .06); }
.wb-balk { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: #eef0f4; }
.wb-balk i { width: 11px; height: 11px; border-radius: 50%; background: #d0d4dc; }
.wb-balk span { margin-left: 16px; flex: 1; max-width: 50%; padding: 5px 14px; border-radius: 8px; background: #fff; font-size: 12px; color: #777; }
.wb-site { padding: 3% 4% 4%; }
.wb-el { background: #e6e8ee; border-radius: 6px; transition: background 400ms, color 400ms, box-shadow 400ms; }
.wb-nav { display: flex; align-items: center; gap: 12px; }
.wb-nav b { width: 16%; height: 16px; } .wb-nav i { width: 8%; height: 9px; } .wb-nav em { margin-left: auto; width: 13%; height: 26px; border-radius: 14px; }
.wb-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 5%; margin-top: 5%; align-items: center; }
.wb-txt { display: block; color: transparent; font-size: clamp(16px, 2.2vw, 30px); font-weight: 900; letter-spacing: -.03em; line-height: 1.08; min-height: 2.2em; }
.wb-hero span.wb-el { display: block; height: 10px; margin-top: 14px; } .wb-hero span.wb-el.kort { width: 70%; margin-top: 8px; }
.wb-hero em.wb-el { display: inline-block; margin-top: 18px; font-style: normal; font-size: 13px; font-weight: 700; color: transparent; padding: 10px 18px; border-radius: 20px; }
.wb-foto { aspect-ratio: 4 / 3; border-radius: 12px; background-size: cover; background-position: center 30%; }
.wb-tegels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; margin-top: 5%; }
.wb-tegels i { height: 56px; border-radius: 10px; }
.wb-el.vol { background: transparent; }
.wb-nav b.vol { background: var(--c-accent); } .wb-nav i.vol { background: #cfd5e6; } .wb-nav em.vol, .wb-hero em.vol { background: var(--c-accent); color: #fff; box-shadow: var(--sh-btn-accent); }
.wb-txt.vol { color: var(--c-ink); background: transparent; } .wb-hero span.vol { background: #d9dde8; }
.wb-foto:not(.vol) { background-image: none !important; } .wb-foto.vol { box-shadow: 0 20px 40px -24px rgba(var(--shadow-rgb), .55); }
.wb-tegels i.vol { background: #eef1f8; box-shadow: inset 0 0 0 1px #dfe4f2; }
.wb-mobiel { position: absolute; right: -4%; bottom: -8%; width: 22%; aspect-ratio: 9 / 18.5; border-radius: 26px; border: 7px solid #12162a; background: #fff; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(var(--shadow-rgb), .6); opacity: 0; transform: translateX(60px); transition: opacity 500ms, transform 700ms cubic-bezier(.2, 1.2, .4, 1); }
.wb-mobiel-in { padding: 16px 10px; display: grid; gap: 8px; }
.wb-mobiel-in b { height: 10px; width: 50%; border-radius: 4px; background: var(--c-accent); }
.wb-mobiel-in span { aspect-ratio: 4 / 3; border-radius: 8px; background-size: cover; background-position: center 30%; }
.wb-mobiel-in i { height: 8px; border-radius: 4px; background: #d9dde8; } .wb-mobiel-in i.kort { width: 60%; }
.wb-mobiel-in em { height: 22px; width: 60%; border-radius: 12px; background: var(--c-accent); }
.hk-web.mobiel .wb-mobiel { opacity: 1; transform: none; }
.wb-scores { position: absolute; left: -5%; bottom: -10%; display: flex; gap: 12px; }
.wb-score { position: relative; width: 104px; height: 104px; border-radius: 50%; background: #fff; box-shadow: 0 20px 40px -18px rgba(var(--shadow-rgb), .55); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transform: scale(.5); transition: opacity 300ms, transform 500ms cubic-bezier(.2, 1.4, .4, 1); }
.wb-score svg { position: absolute; inset: 7px; transform: rotate(-90deg); }
.wb-score circle { fill: none; stroke: #edf0f4; stroke-width: 9; }
.wb-score .wb-v { stroke: #2fa866; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; }
.wb-score.geo .wb-v { stroke: var(--c-accent); }
.wb-score b { position: relative; font-size: 28px; font-weight: 900; color: #2fa866; line-height: 1; }
.wb-score.geo b { color: var(--c-accent); }
.wb-score small { position: relative; font-size: 11px; font-weight: 700; color: var(--c-soft); margin-top: 2px; }
.hk-web.scores .wb-score { opacity: 1; transform: none; }
.hk-web.scores .wb-score:nth-child(2) { transition-delay: 100ms; } .hk-web.scores .wb-score:nth-child(3) { transition-delay: 200ms; }
.wb-onder { text-align: center; margin-top: clamp(40px, 7vh, 70px); }
.wb-onder .knoppen { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hk-kast { height: 440vh; }
.hk-kast .hk-pin { display: flex; flex-direction: column; padding-top: 110px; }
.hk-kast .hk-pin > .wrap { width: 100%; }
.kast-kop { text-align: center; }
.kast-kop .h-statement { font-size: clamp(36px, 4.6vw, 70px); }
.kast { position: relative; flex: 1; width: min(900px, 92vw); margin: 10px auto 0; }
.map { position: absolute; left: 0; right: 0; bottom: calc(-6vh - var(--i) * 0px); height: 70%; transform: translateY(calc((3 - var(--i)) * 0px)); transition: transform 800ms cubic-bezier(.2, .9, .25, 1), filter 500ms; }
.map-voor { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; pointer-events: none; filter: drop-shadow(0 -10px 24px rgba(var(--shadow-rgb), .18)); }
.map[data-i="0"] { z-index: 4; transform: translateY(18%); } .map[data-i="1"] { z-index: 3; transform: translateY(11%); }
.map[data-i="2"] { z-index: 2; transform: translateY(4%); } .map[data-i="3"] { z-index: 1; transform: translateY(-3%); }
.map-vel { position: absolute; left: 10%; right: 10%; bottom: 20%; padding: 30px 34px 40px; border-radius: 10px; background: #fffdf9; box-shadow: 0 20px 40px -20px rgba(var(--shadow-rgb), .45);
transform: translateY(40%); opacity: 0; transition: transform 800ms cubic-bezier(.2, .9, .25, 1), opacity 400ms; }
.map-vel h2 { font-size: clamp(26px, 2.8vw, 40px); font-weight: var(--fw-head); letter-spacing: -.035em; color: var(--c-ink); margin: 6px 0 10px; }
.map-vel p { font-size: 16.5px; line-height: 1.6; color: var(--c-soft); margin: 0 0 14px; max-width: 46ch; }
.map-vel ul { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.map-vel li { font-size: 13.5px; font-weight: 600; padding: 7px 12px; border-radius: var(--r-pill); background: var(--c-accent-soft); color: var(--c-accent); }
.map.open .map-vel { transform: translateY(-36%); opacity: 1; }
.kast.actief .map:not(.open) { filter: saturate(.7) brightness(.97); }
.kast.actief .map:not(.open) .map-vel { opacity: 0; }
@media (max-width: 960px) {
.hk-raster { grid-template-columns: 1fr; gap: 10px; }
.hk-social .hk-pin { padding-top: 90px; align-items: flex-start; }
.hk-wissel { min-height: 210px; }
.hk .h-statement { font-size: 34px; }
.sf-kalender { display: none; }
.sf-tel { width: 62%; padding-top: 14px; }
.zf-tekst-b > div, .vd-tekst-a > *, .vd-tekst-b > div { max-width: 100%; }
.zf-tekst-b { top: auto; bottom: 6vh; transform: none; }
.zp1, .zp2 { display: none; }
.vd-tel { width: 46vw; right: 50%; transform: translate(50%, -10%); top: 46%; }
.vd-tekst-a, .vd-tekst-b { top: 110px; transform: none; }
.wb-scores { left: 0; gap: 6px; } .wb-score { width: 70px; height: 70px; } .wb-score b { font-size: 19px; } .wb-score small { font-size: 9px; }
.wb-mobiel { width: 28%; right: 0; }
.map-vel { left: 4%; right: 4%; padding: 20px; }
}
.ckop { min-height: 78vh; }
.ckop-in { align-items: center; }
.ckop-tekst .btn { margin-top: 4px; }
.anders { padding: clamp(24px, 3vw, 36px); border-radius: 30px; color: #fff; background: radial-gradient(120% 90% at 85% 10%, #26346a 0%, #172150 50%, #0f1633 100%); box-shadow: 0 40px 80px -30px rgba(5, 10, 35, .7); display: grid; gap: 10px; }
.anders h2 { font-size: clamp(28px, 2.6vw, 38px); font-weight: var(--fw-head); letter-spacing: -.035em; margin: 0 0 8px; color: #fff; }
.anders .grad { background-image: linear-gradient(95deg, #8fa6ee, #c9d5f4); }
.an-rij { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: #fff; transition: background var(--dur-fast); }
a.an-rij:hover { background: rgba(255, 255, 255, .12); }
.an-rij i { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #c9d5f4; color: #24397a; display: flex; align-items: center; justify-content: center; }
.an-rij i svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.an-rij i.wa svg { fill: #24397a; stroke: none; }
.an-rij b { display: block; font-size: 17px; }
.an-rij small { display: block; font-size: 14px; color: #c9d5f4; line-height: 1.4; }
.an-rij em { margin-left: auto; font-style: normal; font-size: 22px; color: rgba(255, 255, 255, .6); }
.an-gegevens { margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: #c9d5f4; }
.an-gegevens b { color: #fff; }
.cform-kop { font-size: clamp(30px, 3vw, 44px); font-weight: var(--fw-head); letter-spacing: -.035em; color: var(--c-ink); margin: 0; }
.cform-sub { margin: -8px 0 6px; font-size: 16.5px; color: var(--c-soft); }
.cvlak { margin-top: 0; padding-top: var(--section-y); }
.go-waarom { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.go-waarom .lead { margin-top: 18px; }
@media (max-width: 960px) { .go-waarom { grid-template-columns: 1fr; } }
.kop-go { display: inline-block; height: .72em; width: auto; fill: #fff; vertical-align: -.02em; margin: .12em 0 0; }
.kop-vraag { margin-left: .08em; }
@media (max-width: 960px) {
.hk-b .lead, .hk-b .btn-outline { display: none; }
.hk-b .knoppen { margin-top: 18px; }
.hk-wissel { min-height: 190px; }
.sf-tel { width: 58%; border-width: 7px; border-radius: 30px; }
.hk-kast .hk-pin { padding-top: 96px; }
.kast { width: 100%; }
.map { bottom: 0; height: 74%; }
.map[data-i="0"] { transform: translateY(14%); } .map[data-i="1"] { transform: translateY(9%); } .map[data-i="2"] { transform: translateY(4%); } .map[data-i="3"] { transform: translateY(-1%); }
.map-vel { bottom: 26%; padding: 18px 18px 22px; }
.map-vel h2 { font-size: 24px; }
.map-vel p { font-size: 14.5px; margin-bottom: 10px; }
.map-vel li { font-size: 12px; padding: 5px 9px; }
.map.open .map-vel { transform: translateY(-20%); }
.wb-kop .h-statement { font-size: 30px; }
.wb-onder { margin-top: 54px; }
}
.ckop { min-height: 62vh; }
.ckop-in { grid-template-columns: 1fr; }
.ckop-tekst { max-width: 760px; }
.cvlak { padding-top: clamp(40px, 6vw, 70px); }
.cvlak-raster { align-items: stretch; }
.anders.cnaast { position: sticky; top: 110px; align-self: start; }
.an-daarna { margin-top: 6px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .06); font-size: 14px; line-height: 1.55; color: #c9d5f4; }
.an-daarna b { display: block; color: #fff; font-size: 15px; margin-bottom: 4px; }
@media (max-width: 960px) { .anders.cnaast { position: static; } }
.boek { transform: rotateY(calc(-40deg + var(--draai, 0) * 14deg)) rotateX(5deg) rotateZ(1.5deg); }
.boek-voor { transform: translateZ(9px) rotateY(calc(var(--open, 0) * -1deg)); }
@media (max-width: 960px) {
.hk-h1 { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
.hk-h1 { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.h-over .nw { display: inline-block; opacity: 0; will-change: transform, opacity; }
.over-script { position: relative; display: inline-block; font-family: var(--font-script); font-weight: 400; letter-spacing: 0; font-size: 1.35em; line-height: .8; color: #e8dcc0; margin-left: .08em; clip-path: inset(-20% 100% -40% 0); }
.over-zwier { position: absolute; left: -4%; right: -6%; bottom: -.32em; width: 110%; height: .4em; overflow: visible; }
.over-zwier path { fill: none; stroke: #e8dcc0; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 320; }
.koppen { top: 16vh; }
.k-voor .h-statement { font-size: clamp(40px, 5vw, 78px); line-height: 1; letter-spacing: -.04em; }
@media (max-width: 960px) { .koppen { top: 14vh; } }
.credits { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 26px; padding: 18px 24px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(var(--shadow-rgb), .07); }
.credits-kop { font-size: 14px; color: var(--c-ink); }
.credits ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; }
.credits li { font-size: 14.5px; color: var(--c-soft); }
.credits li span { margin-right: 6px; }
.credits li b { color: var(--c-ink); font-weight: 600; }
.credits a { color: var(--c-accent); }
.over-script { font-family: inherit; font-weight: inherit; font-size: 1em; line-height: inherit; letter-spacing: inherit; margin-left: 0; color: transparent; }
.goscene-kop .h-statement { font-size: clamp(36px, 4.6vw, 72px); line-height: 1.02; }
.ckop.kort { min-height: 86vh; }
.ckop.kort .ckop-in { grid-template-columns: 1.35fr .65fr; align-items: center; }
.kort .knoppen { display: flex; gap: 12px; flex-wrap: wrap; }
.kort-pola { justify-self: center; width: min(320px, 100%); margin: 0; padding: 12px 12px 54px; background: #fff; border-radius: 4px; position: relative; transform: rotate(var(--r)); box-shadow: 0 40px 70px -30px rgba(5, 10, 35, .7), 0 2px 6px rgba(5, 10, 35, .15); }
.kort-pola.reveal.in-view { transform: rotate(var(--r)); }
.kort-pola img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.kort-pola figcaption { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-family: var(--font-script); font-size: 30px; color: var(--c-ink); }
.kort-404 .kort-pola img { filter: blur(7px) saturate(.8); transition: filter .8s var(--ease-out); }
.kort-404 .kort-pola:hover img { filter: none; }
@media (max-width: 960px) {
.ckop.kort { min-height: 0; }
.ckop.kort .ckop-in { grid-template-columns: 1fr; gap: 0; padding-top: 104px; padding-bottom: 56px; }
.kort-pola { grid-row: 1; justify-self: end; width: 38%; max-width: 180px; padding: 6px 6px 30px; margin: 0 8px 22px 0; z-index: 1; }
.kort-pola figcaption { font-size: 18px; bottom: 5px; }
.kort .ckop-tekst { grid-row: 2; }
.kort .h-statement { font-size: clamp(34px, 9vw, 52px); }
}
.jkop { padding: clamp(130px, 16vh, 180px) 0 clamp(30px, 4vw, 50px); }
.jkop .h-statement { font-size: clamp(40px, 6vw, 88px); letter-spacing: -.045em; line-height: 1; margin: 0; }
.jkop-meta { margin: 20px 0 0; font-size: 15px; color: var(--c-soft); max-width: 70ch; line-height: 1.6; }
.jvlak { padding-bottom: calc(var(--section-y) * .5); }
.jvlak-raster { display: grid; grid-template-columns: 280px 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.jinhoud { position: sticky; top: 110px; max-height: calc(100vh - 140px); overflow: auto; background: #fff; border-radius: 22px; padding: 18px 18px 14px; box-shadow: 0 10px 30px -22px rgba(var(--shadow-rgb), .5), 0 0 0 1px rgba(var(--shadow-rgb), .05); }
.jinhoud summary { list-style: none; display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 15px; cursor: pointer; padding: 2px 4px 10px; }
.jinhoud summary::-webkit-details-marker { display: none; }
.jinhoud summary i { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--c-accent-soft); }
.jinhoud summary i::before, .jinhoud summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; border-radius: 2px; background: var(--c-accent); }
.jinhoud summary i::after { transform: rotate(90deg); transition: transform var(--dur-hover) var(--ease-out); }
.jinhoud[open] summary i::after { transform: rotate(0deg); }
.jinhoud ol { margin: 0; padding: 0 0 0 22px; font-size: 14px; line-height: 1.45; color: var(--c-soft); }
.jinhoud li { padding: 5px 0; }
.jinhoud li::marker { color: var(--c-accent); font-weight: 700; font-size: 12px; }
.jinhoud a:hover { color: var(--c-accent); }
.jtekst { background: #fff; border-radius: 28px; padding: clamp(24px, 4.5vw, 64px); box-shadow: 0 30px 60px -40px rgba(var(--shadow-rgb), .45), 0 0 0 1px rgba(var(--shadow-rgb), .05); max-width: 860px; }
.jtekst > :first-child { margin-top: 0; }
.jtekst h2 { font-size: clamp(20px, 2vw, 24px); letter-spacing: -.02em; line-height: 1.25; color: var(--c-ink); margin: 46px 0 12px; scroll-margin-top: 110px; }
.jtekst p, .jtekst li { font-size: 16px; line-height: 1.75; color: #33373f; }
.jtekst p { margin: 0 0 12px; }
.jtekst ul { margin: 6px 0 18px; padding-left: 22px; }
.jtekst li { margin-bottom: 6px; }
.jtekst li::marker { color: var(--c-accent); }
.jtekst .clause strong { color: var(--c-accent); margin-right: 4px; }
.jtekst .vw-abc { list-style: none; padding-left: 26px; }
.jtekst a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) {
.jvlak-raster { grid-template-columns: 1fr; }
.jinhoud { position: static; max-height: none; }
.jtekst { border-radius: 22px; }
}
.lt-logo:has(img.vast) { padding: 0; }
.lt-logo img.vast { width: calc(var(--lw) * 100%); max-width: none; max-height: none; filter: none; opacity: .85; }
.case-logo:has(img.vast) { height: auto; }
.case-logo img.vast { height: calc(var(--lh) * 190px); width: auto; }
.hk.hk-video { height: auto; }
.hk-video .hk-pin { position: relative; height: 100vh; height: 100svh; min-height: 560px; }
.hk-video .vd-ring { transition: opacity 400ms var(--ease-out); }
.hk-video .vd-reel { opacity: 0; transform: scale(.6); transition: opacity 500ms var(--ease-out), transform 700ms cubic-bezier(.2, 1.4, .4, 1); }
.hk-video .vd-getal { display: inline-block; }
.hk-video .vd-getal.tik { animation: vd-tik 900ms var(--ease-out); }
@keyframes vd-tik { 0% { transform: scale(1.35); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hk-video .vd-getal.tik { animation: none; } }
.vd-tekst-b .knoppen { display: flex; gap: 12px; flex-wrap: wrap; }
.vd-tekst-c { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 3; opacity: 0; pointer-events: none; transition: opacity 400ms var(--ease-out); }
.vd-tekst-c > * { max-width: 52%; }
.vd-tekst-c .lead { color: var(--c-on-dark-soft); margin: 20px 0 0; }
.hk-video.tussen .vd-tekst-a { opacity: 0; transition: opacity 300ms; }
.hk-video.tussen .vd-tekst-c { opacity: 1; }
@media (max-width: 960px) { .vd-tekst-c { top: 110px; transform: none; } .vd-tekst-c > * { max-width: 100%; } }
@media (max-width: 960px) {
.hk-video .vd-tel { transition: top 600ms var(--ease-out), width 600ms var(--ease-out), transform 600ms var(--ease-out); }
.hk-video.na .vd-tel { width: min(40vw, 200px); top: auto; bottom: 28px; transform: translateX(50%); }
}
.blauwfoto { position: relative; overflow: hidden; }
.blauwfoto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); transition: transform 700ms var(--ease-out); }
.blauwfoto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, #5f7de0 0%, #3c58a4 55%, #2a4290 100%); mix-blend-mode: multiply; }
.blauwfoto > figcaption, .blauwfoto > .ad-in { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px; color: #fff; display: grid; gap: 4px; background: linear-gradient(transparent, rgba(10, 18, 50, .55)); }
.blauwfoto b { font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.blauwfoto figcaption span, .blauwfoto .ad-in > span { font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .85); }
@media (max-width: 960px) {
.swipe { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 14px; scrollbar-width: none; }
.swipe::-webkit-scrollbar { display: none; }
.swipe > * { flex: 0 0 var(--swipe-w, 70%); scroll-snap-align: start; }
}
.sfeed-raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.sfeed-tekst .h-statement, .ftafel-kop .h-statement, .wcheck-tekst .h-statement { font-size: clamp(36px, 4.4vw, 66px); letter-spacing: -.045em; line-height: 1.02; color: var(--c-ink); }
.sfeed-tekst .lead, .wcheck-tekst .lead { margin: 22px 0 0; max-width: 46ch; }
.sfeed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; background: #fff; border-radius: 26px; box-shadow: 0 30px 60px -36px rgba(var(--shadow-rgb), .55); }
.fpost { --p: 1; position: relative; aspect-ratio: 1; padding: clamp(14px, 1.6vw, 22px); display: flex; flex-direction: column; justify-content: space-between; border-radius: 4px; overflow: hidden; background-size: cover; background-position: center;
transform: translateY(calc((1 - var(--p)) * 30px)) scale(calc(.86 + var(--p) * .14)); opacity: var(--p); }
.sfeed-grid .fpost:nth-child(1) { border-top-left-radius: 20px; } .sfeed-grid .fpost:nth-child(2) { border-top-right-radius: 20px; }
.sfeed-grid .fpost:nth-child(3) { border-bottom-left-radius: 20px; } .sfeed-grid .fpost:nth-child(4) { border-bottom-right-radius: 20px; }
.fpost-in { position: relative; z-index: 1; display: grid; gap: 6px; }
.fpost-in b { font-size: clamp(18px, 1.9vw, 27px); line-height: 1.08; letter-spacing: -.03em; font-weight: 900; }
.fpost-in span { font-size: 13.5px; line-height: 1.4; opacity: .85; }
.fpost-onder { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; }
.fpost-onder em { font-style: normal; opacity: .85; }
.hartje { width: 15px; height: 15px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%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 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center / contain no-repeat; }
.f-blauw { background-color: var(--c-accent); color: #fff; }
.f-foto { color: #fff; }
.f-foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(95, 125, 224, .85), rgba(42, 66, 144, .9)); }
.f-kraft { background-color: #e8dcc0; color: var(--c-ink); }
.f-wit { background-color: #f4f1ea; color: var(--c-ink); }
.f-wit .hartje { background: #e0465a; }
@media (max-width: 960px) { .sfeed-raster { grid-template-columns: 1fr; } .fpost-in span { display: none; } }
.story-rij { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 34px; --swipe-w: 58%; }
.story { margin: 0; aspect-ratio: 9 / 16; border-radius: 20px; box-shadow: 0 30px 50px -30px rgba(var(--shadow-rgb), .6); }
.story-balkjes { position: absolute; z-index: 3; top: 12px; left: 12px; right: 12px; display: flex; gap: 4px; }
.story-balkjes i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); }
.story-balkjes i.vol { background: #fff; }
.story:hover > img { transform: scale(1.05); }
.ftafel { border-radius: 0; }
.ftafel-kop { max-width: 760px; }
.ftafel-kop .lead { margin: 22px 0 0; max-width: 56ch; }
.ftafel-polas { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2.4vw, 34px); margin-top: clamp(34px, 5vw, 60px); }
.fpola { --p: 1; margin: 0; background: #fff; padding: 10px 10px 0; border-radius: 3px; box-shadow: 0 30px 50px -28px rgba(var(--shadow-rgb), .6), 0 2px 5px rgba(var(--shadow-rgb), .08);
transform: translateY(calc((1 - var(--p)) * -140px)) rotate(calc(var(--r) + (1 - var(--p)) * 14deg)) scale(calc(1.1 - var(--p) * .1)); opacity: calc(var(--p) * 1.4); }
.fpola img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.fpola figcaption { padding: 12px 6px 16px; text-align: center; display: grid; gap: 4px; }
.fpola b { font-family: var(--font-script); font-weight: 400; font-size: clamp(22px, 2vw, 30px); line-height: 1.05; color: var(--c-ink); }
.fpola span { font-size: 13px; line-height: 1.4; color: var(--c-soft); }
@media (max-width: 960px) { .ftafel-polas { grid-template-columns: 1fr 1fr; gap: 18px 14px; } .fpola span { display: none; } }
.cvel { position: relative; border-radius: var(--r-card, 30px); padding: clamp(28px, 5vw, 64px); background: #12172e; }
.cvel .h2 { color: #fff; margin: 0 0 30px; }
.cv-strook { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; --swipe-w: 64%; }
.cv-beeld { margin: 0; aspect-ratio: 3 / 4; border-radius: 6px; outline: 1px solid rgba(255, 255, 255, .12); outline-offset: 5px; }
.cv-beeld:hover > img { transform: scale(1.06); }
.vspeler { position: relative; height: 260vh; }
.vspeler-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: 70px; }
.vspeler-pin > .wrap { width: 100%; }
.vspeler-kop { font-size: clamp(32px, 4vw, 60px); letter-spacing: -.045em; line-height: 1.02; color: var(--c-ink); margin: 0 0 24px; }
.vs-scherm { position: relative; width: 100%; max-height: 64vh; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: #000; box-shadow: 0 50px 90px -40px rgba(5, 10, 35, .75); }
.vs-scherm > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); opacity: .55; }
.vs-scherm::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(95, 125, 224, .5), rgba(42, 66, 144, .7)); mix-blend-mode: multiply; }
.vs-rec { position: absolute; z-index: 2; top: 20px; left: 22px; display: flex; align-items: center; gap: 8px; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.vs-rec i { width: 10px; height: 10px; border-radius: 50%; background: #ff4d5e; animation: vs-knipper 1.2s infinite; }
@keyframes vs-knipper { 50% { opacity: .2; } }
.vs-subs { position: absolute; z-index: 2; left: 6%; right: 6%; bottom: 58px; display: grid; justify-items: center; }
.vs-sub { grid-area: 1 / 1; margin: 0; max-width: 34ch; text-align: center; padding: 10px 16px; border-radius: 10px; background: rgba(0, 0, 0, .55); color: #fff; font-size: clamp(16px, 1.9vw, 26px); line-height: 1.3; opacity: 0; transform: translateY(10px); transition: opacity 300ms, transform 400ms var(--ease-out); }
.vs-sub b { color: #e8dcc0; }
.vs-sub.aan { opacity: 1; transform: none; }
.vs-balk { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 24px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .25); }
.vs-balk i { display: block; height: 100%; width: 0; border-radius: 4px; background: #fff; }
@media (max-width: 960px) { .vspeler { height: 220vh; } .vs-scherm { aspect-ratio: 4 / 5; max-height: 62vh; } .vs-subs { bottom: 48px; } }
.fstrip { position: relative; border-radius: var(--r-card, 30px); padding: clamp(28px, 5vw, 64px); }
.fstrip .h2 { color: #fff; margin: 0 0 30px; position: relative; z-index: 1; }
.fs-rol { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: #070a18; padding: 30px 0; border-radius: 6px; --swipe-w: 72%;
background-image: repeating-linear-gradient(90deg, transparent 0 14px, rgba(255, 255, 255, .85) 14px 26px, transparent 26px 40px), repeating-linear-gradient(90deg, transparent 0 14px, rgba(255, 255, 255, .85) 14px 26px, transparent 26px 40px);
background-size: 100% 10px, 100% 10px; background-position: 0 10px, 0 calc(100% - 10px); background-repeat: no-repeat; }
.fs-beeld { margin: 0; padding: 0 6px; }
.fs-plaat { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 4px; overflow: hidden; }
.fs-plaat img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); }
.fs-plaat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, #5f7de0, #2a4290); mix-blend-mode: multiply; }
.fs-beeld figcaption { padding: 14px 4px 0; display: grid; gap: 4px; color: #fff; }
.fs-beeld b { font-size: clamp(17px, 1.5vw, 21px); font-weight: 800; }
.fs-beeld figcaption span { font-size: 14px; color: var(--c-on-dark-soft); line-height: 1.45; }
@media (max-width: 960px) { .fs-rol { margin-inline: 0; padding-inline: 6px; border-radius: 6px; } }
.wcheck-raster { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.wcheck-venster { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 40px 70px -40px rgba(var(--shadow-rgb), .6), 0 0 0 1px rgba(var(--shadow-rgb), .06); }
.wcheck-balk { display: flex; align-items: center; gap: 7px; padding: 14px 18px; background: #f1efe9; }
.wcheck-balk span { width: 11px; height: 11px; border-radius: 50%; background: #d6d1c6; }
.wcheck-balk em { margin-left: 12px; flex: 1; font-style: normal; font-size: 13px; color: var(--c-soft); background: #fff; border-radius: 8px; padding: 6px 12px; }
.wcheck-venster ul { list-style: none; margin: 0; padding: 6px 24px 10px; }
.wcheck-venster li { --p: 1; display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid rgba(var(--shadow-rgb), .08); opacity: calc(.3 + var(--p) * .7); }
.wcheck-venster li:first-child { border-top: 0; }
.wcheck-venster li b { display: block; font-size: 17px; font-weight: 800; color: var(--c-ink); }
.wcheck-venster li span { font-size: 14.5px; color: var(--c-soft); line-height: 1.45; }
.vinkje { position: relative; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(var(--shadow-rgb), .15); }
.vinkje::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #2fa66a; transform: scale(var(--p)); opacity: var(--p); }
.vinkje::after { content: ""; position: absolute; left: 10px; top: 7px; width: 7px; height: 13px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg) scale(var(--p)); opacity: var(--p); }
@media (max-width: 960px) { .wcheck-raster { grid-template-columns: 1fr; } }
.zres-raster .h2 { margin: 0 0 28px; }
.zres-venster { max-width: 880px; background: #fff; border-radius: 24px; padding: clamp(20px, 3vw, 36px); box-shadow: 0 40px 70px -44px rgba(var(--shadow-rgb), .6), 0 0 0 1px rgba(var(--shadow-rgb), .06); }
.zres-zoek { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-radius: 999px; box-shadow: 0 2px 10px rgba(var(--shadow-rgb), .12); font-size: 16px; color: var(--c-ink); }
.zres-zoek svg { width: 18px; height: 18px; fill: none; stroke: var(--c-soft); stroke-width: 2; }
.zres-venster ul { list-style: none; margin: 10px 0 0; padding: 0; }
.zres-venster li { padding: 20px 4px 0; display: grid; gap: 4px; }
.zr-url { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--c-ink); }
.zr-url i { width: 26px; height: 26px; border-radius: 50%; background: #eef1fa url("../../logo-trim.png") center / 70% no-repeat; }
.zr-url em { font-style: normal; color: var(--c-soft); }
.zres-venster li b { font-size: clamp(18px, 1.7vw, 22px); font-weight: 500; color: #3c58a4; }
.zres-venster li:hover b { text-decoration: underline; }
.zr-tekst { font-size: 15px; line-height: 1.55; color: var(--c-soft); }
.ad-rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; --swipe-w: 78%; }
.ad-tegel { display: block; aspect-ratio: 4 / 5; border-radius: 26px; box-shadow: 0 30px 60px -36px rgba(5, 10, 35, .6); }
.ad-tegel .ad-in { padding: 26px; gap: 8px; }
.ad-tegel b { font-size: clamp(22px, 2.2vw, 30px); }
.ad-tegel em { font-style: normal; font-weight: 700; font-size: 15px; margin-top: 6px; }
.ad-tegel:hover > img { transform: scale(1.05); }
@media (min-width: 961px) {
.wb-toneel { width: min(860px, 86vw, calc((100vh - 330px) * 1.5)); }
.wb-kop .h-statement { font-size: clamp(30px, min(4.2vw, 6.4vh), 64px); }
.wb-onder { margin-top: clamp(24px, 5vh, 70px); }
.hk-web .hk-pin { padding-top: 90px; }
}
.pkop { position: relative; min-height: 78vh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; }
.pkop .hero-foto { inset: 0; border-radius: 0; --diep: .9; }
.pk-vlak { position: absolute; inset: 0; background: radial-gradient(120% 90% at 85% 10%, #6f8ae0 0%, #3c58a4 45%, #22357a 100%); }
.pkop-in { position: relative; z-index: 2; width: 100%; padding-top: 150px; padding-bottom: clamp(56px, 9vh, 100px); }
.pkop-kruimel { margin-bottom: clamp(22px, 4vh, 40px); }
.pkop-kruimel, .pkop-kruimel a { color: rgba(255, 255, 255, .7); }
.pkop-kruimel a:hover { color: #fff; }
.pk-logo { display: inline-flex; align-items: center; margin-bottom: 20px; }
.pk-logo img { filter: brightness(0) invert(1); height: 64px; width: auto; }
.pk-logo img.vast { height: calc(var(--lh) * 170px); }
.pk-logo .woordmerk { color: #fff; font-size: 26px; }
.pkop .h-statement { color: #fff; font-size: clamp(38px, 5.6vw, 88px); letter-spacing: -.045em; line-height: 1; max-width: 16ch; margin: 0; text-shadow: 0 6px 40px rgba(10, 20, 60, .3); }
.pkop-onder { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; margin-top: 28px; }
.pkop-meta { font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, .85); }
.pverhaal { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.pverhaal .h2 { margin: 0 0 18px; }
.pverhaal p { margin: 0; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.7; color: #3a3e48; max-width: 52ch; }
.pverhaal .pcredits { margin-top: 22px; font-size: 14px; color: var(--c-soft); }
.presultaat { margin: 0; font-size: clamp(28px, 3.4vw, 50px); line-height: 1.1; letter-spacing: -.04em; font-weight: 900; color: var(--c-accent); max-width: 22ch; }
.ptafel { border-radius: 0; }
.ptafel-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px); }
.ppola { margin: 0; background: #fff; padding: 10px 10px 40px; border-radius: 3px; transform: rotate(var(--r)); box-shadow: 0 30px 50px -28px rgba(var(--shadow-rgb), .6), 0 2px 5px rgba(var(--shadow-rgb), .08); transition: transform 400ms var(--ease-out); }
.ppola.reveal.in-view { transform: rotate(var(--r)); }
.ppola:hover { transform: rotate(0deg) scale(1.03); z-index: 2; }
.ppola img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ppola:nth-child(3n+2) img { aspect-ratio: 1; }
.ptafel-raster { display: flex; flex-wrap: wrap; justify-content: center; }
.ppola { flex: 0 1 calc((100% - 2 * clamp(18px, 3vw, 40px)) / 3); }
@media (max-width: 960px) {
.pkop { min-height: 70vh; }
.pkop-in { padding-top: 120px; }
.pverhaal { grid-template-columns: 1fr; }
.ptafel-raster { gap: 16px; }
.ppola { flex-basis: calc(50% - 8px); }
.ppola { padding: 6px 6px 24px; }
}
.pvraag-in { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
.pvraag-in .h2 { margin: 0; }
.pvraag-in p { margin: 0; font-size: clamp(20px, 1.9vw, 28px); line-height: 1.45; letter-spacing: -.01em; color: var(--c-ink); font-weight: 500; }
.pwat { padding-top: 0; }
.pwat-kop { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 30px; margin-bottom: clamp(22px, 3vw, 36px); }
.pwat-kop .h2 { margin: 0; }
.ptabs { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px; border-radius: 999px; background: #fff; box-shadow: 0 10px 30px -22px rgba(var(--shadow-rgb), .5), 0 0 0 1px rgba(var(--shadow-rgb), .06); }
.ptabs button { border: 0; background: none; font: inherit; font-weight: 700; font-size: 15px; color: var(--c-ink); padding: 11px 20px; border-radius: 999px; cursor: pointer; transition: background 200ms, color 200ms; }
.ptabs button:hover { color: var(--c-accent); }
.ptabs button[aria-selected="true"] { background: var(--c-accent); color: #fff; }
.ppaneel { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(24px, 4vw, 60px); align-items: center; background: #fff; border-radius: 30px; padding: clamp(18px, 2.5vw, 28px); box-shadow: 0 30px 60px -40px rgba(var(--shadow-rgb), .5), 0 0 0 1px rgba(var(--shadow-rgb), .05); }
.ppaneel.aan { animation: pp-in 450ms var(--ease-out); }
@keyframes pp-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ppaneel-tekst { padding: clamp(6px, 2vw, 24px); }
.ppaneel-tekst h3 { margin: 0 0 14px; font-size: clamp(28px, 3vw, 44px); letter-spacing: -.04em; line-height: 1.05; font-weight: 900; color: var(--c-ink); }
.ppaneel-tekst p { margin: 0; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.7; color: #3a3e48; max-width: 50ch; }
.ppaneel-beeld { margin: 0; aspect-ratio: 4 / 3; border-radius: 22px; }
.ppaneel-beeld.leeg { display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 90% at 85% 10%, #6f8ae0 0%, #3c58a4 45%, #22357a 100%); }
.ppaneel-beeld.leeg::after { display: none; }
.ppaneel-beeld .pk-logo { margin: 0; position: relative; z-index: 1; }
.pwat .pcredits { margin: 18px 4px 0; font-size: 14px; color: var(--c-soft); }
@media (max-width: 960px) {
.pvraag-in, .ppaneel { grid-template-columns: 1fr; }
.ptabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.ptabs button { flex: 0 0 auto; }
.ppaneel-beeld { order: -1; }
}
.ppaneel[hidden] { display: none; }
@media (max-width: 960px) { .ptabs { gap: 2px; padding: 4px; } .ptabs button { font-size: 13.5px; padding: 10px 13px; } }
.pkop .hero-foto img { filter: saturate(.9) contrast(1.05); transform: scale(1.04); }
.pkop .hero-foto::before { mix-blend-mode: multiply; opacity: .9; }
.pkop .hero-foto::after { opacity: 1; background: linear-gradient(90deg, rgba(30, 46, 110, .88) 0%, rgba(34, 53, 122, .6) 45%, rgba(34, 53, 122, .1) 100%), linear-gradient(0deg, rgba(30, 46, 110, .5), transparent 45%); }
.pvolgend { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.pv-pola { margin: 0; width: min(380px, 78vw); background: #fff; padding: 12px 12px 0; border-radius: 3px; transform: rotate(-3deg); box-shadow: 0 40px 60px -34px rgba(var(--shadow-rgb), .6), 0 2px 6px rgba(var(--shadow-rgb), .08); transition: transform 450ms var(--ease-out); }
.pv-pola > img, .pv-vlak { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: radial-gradient(120% 90% at 85% 10%, #6f8ae0 0%, #3c58a4 45%, #22357a 100%); }
.pv-vlak .pk-logo { margin: 0; }
.pv-pola figcaption { font-family: var(--font-script); font-size: clamp(26px, 2.6vw, 36px); color: var(--c-ink); padding: 12px 6px 16px; }
.pv-titel { font-size: clamp(17px, 1.4vw, 20px); font-weight: 600; color: var(--c-soft); max-width: 36ch; }
.pvolgend:hover .pv-pola { transform: rotate(0deg) translateY(-6px); }
.pkop .hero-foto::before, .pkop .hero-foto::after { z-index: 1; }
.ppola img { aspect-ratio: auto; height: auto; }
.ppola:nth-child(3n+2) img { aspect-ratio: auto; }
.ppola { flex-basis: calc(50% - clamp(18px, 3vw, 40px) / 2); padding-bottom: 34px; }
.ppaneel-beeld { position: relative; overflow: hidden; background: #f1efe9; }
.ppaneel-beeld > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pv-vlak .pk-logo img.vast { height: calc(var(--lh) * 120px); }
.hk-apps .hk-pin { display: flex; align-items: center; padding-top: 70px; }
.hk-apps.na .hk-a { opacity: 0; transform: translateY(-24px); }
.hk-apps.na .hk-b { opacity: 1; transform: none; pointer-events: auto; }
.ap-toneel { --p: 0; position: relative; height: min(560px, 70vh); }
.ap-papier { position: absolute; left: 4%; top: 18%; width: min(330px, 70%); padding: 22px 22px 18px; background: #e8dcc0; border-radius: 10px; color: var(--c-ink); box-shadow: 0 30px 50px -30px rgba(var(--shadow-rgb), .6);
transform: translate(calc(var(--vlieg, 0) * 120px), calc(var(--vlieg, 0) * 40px)) rotate(calc(-6deg + var(--vlieg, 0) * 14deg)) scale(calc(1 - var(--vlieg, 0) * .45)); opacity: calc(1 - var(--vlieg, 0)); }
.ap-papier b { display: block; font-family: var(--font-script); font-weight: 400; font-size: 34px; line-height: 1; }
.ap-papier small { display: block; font-size: 13px; color: #6b5f45; margin: 6px 0 14px; }
.ap-papier em { display: block; margin-top: 14px; font-style: normal; font-size: 13px; font-weight: 700; color: #6b5f45; }
.ap-stempels { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.ap-stempels i { aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(107, 95, 69, .45); position: relative; }
.ap-stempels i.vol::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #9b3b2f; opacity: .85; transform: rotate(-12deg); }
.ap-tel { position: absolute; right: 2%; top: 4%; width: min(270px, 52%); aspect-ratio: 9 / 18.5; background: #0b0f22; border-radius: 40px; padding: 10px; box-shadow: 0 50px 80px -40px rgba(5, 10, 35, .75);
transform: translateY(calc((1 - var(--tel, 0)) * 60px)); opacity: calc(.15 + var(--tel, 0) * .85); }
.ap-scherm { position: relative; height: 100%; border-radius: 31px; background: #f2f1ee; overflow: hidden; padding: 38px 12px 12px; display: flex; flex-direction: column; gap: 12px; }
.ap-wallet { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--c-ink); padding-left: 4px; }
.ap-pas { border-radius: 16px; padding: 14px; background: linear-gradient(160deg, #4b6bc4, #2a4290); color: #fff; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 18px 30px -18px rgba(5, 10, 35, .6); }
.ap-pas-kop { display: flex; justify-content: space-between; align-items: baseline; }
.ap-pas-kop b { font-size: 16px; } .ap-pas-kop small { font-size: 11px; opacity: .8; }
.ap-digitaal { gap: 6px; }
.ap-digitaal i { border: 1.5px solid rgba(255, 255, 255, .45); }
.ap-digitaal i.vol::after { background: #e8dcc0; inset: 2px; opacity: 1; }
.ap-teller { font-size: 12px; opacity: .9; } .ap-teller b { font-size: 14px; }
.ap-qr { align-self: center; display: grid; grid-template-columns: repeat(7, 1fr); width: 74px; height: 74px; padding: 6px; background: #fff; border-radius: 8px; }
.ap-qr i { background: #0b0f22; } .ap-qr i.z { background: transparent; }
.ap-korting { align-self: center; margin-top: auto; font-size: 12px; font-weight: 700; color: #fff; background: #2fa66a; padding: 8px 14px; border-radius: 999px; opacity: var(--korting, 0); transform: translateY(calc((1 - var(--korting, 0)) * 10px)); }
@media (max-width: 960px) {
.hk-apps .hk-raster { grid-template-columns: 1fr; }
.ap-toneel { height: 330px; }
.ap-tel { width: 150px; border-radius: 26px; padding: 6px; } .ap-scherm { border-radius: 21px; padding: 22px 8px 8px; gap: 8px; }
.ap-wallet { font-size: 15px; } .ap-pas { padding: 9px; gap: 7px; border-radius: 11px; } .ap-qr { width: 46px; height: 46px; padding: 4px; }
.ap-papier { width: 190px; padding: 14px; } .ap-papier b { font-size: 24px; }
}
.wpasjes-raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.wpasjes-tekst .h-statement { font-size: clamp(36px, 4.4vw, 66px); letter-spacing: -.045em; line-height: 1.02; color: var(--c-ink); }
.wpasjes-tekst .lead { margin: 22px 0 0; max-width: 46ch; }
.wpasjes-stapel { display: grid; gap: 14px; }
.wpas { --p: 1; position: relative; border-radius: 18px; padding: 18px 22px 22px; display: grid; gap: 6px; box-shadow: 0 24px 40px -26px rgba(5, 10, 35, .6);
transform: translateY(calc((1 - var(--p)) * var(--i) * -84px)) scale(calc(.94 + var(--p) * .06)); z-index: calc(10 - var(--i)); }
.wpas-kop { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; opacity: .75; }
.wpas-kop i { width: 18px; height: 18px; border-radius: 5px; background: currentColor; opacity: .35; }
.wpas b { font-size: clamp(19px, 1.8vw, 24px); letter-spacing: -.02em; }
.wpas span:last-child { font-size: 14.5px; line-height: 1.5; opacity: .85; }
.p-blauw { background: linear-gradient(160deg, #4b6bc4, #2a4290); color: #fff; }
.p-kraft { background: #e8dcc0; color: var(--c-ink); }
.p-navy { background: linear-gradient(160deg, #1c2650, #0f1633); color: #fff; }
.p-wit { background: #fff; color: var(--c-ink); }
@media (max-width: 960px) { .wpasjes-raster { grid-template-columns: 1fr; } }
.mscherm { position: relative; border-radius: var(--r-card, 30px); padding: clamp(28px, 5vw, 64px); }
.mscherm-raster { position: relative; z-index: 1; display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(26px, 5vw, 70px); align-items: center; }
.mscherm-tekst .h2 { color: #fff; margin: 0 0 16px; }
.mscherm-tekst p { margin: 0; color: var(--c-on-dark-soft); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; max-width: 40ch; }
.mscherm-tel { display: grid; gap: 10px; }
.mscherm-tijd { justify-self: center; font-size: clamp(44px, 6vw, 76px); font-weight: 300; letter-spacing: -.03em; color: rgba(255, 255, 255, .9); margin-bottom: 6px; }
.melding { --p: 1; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 14px 16px; border-radius: 20px; background: rgba(255, 255, 255, .14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
transform: translateY(calc((1 - var(--p)) * -26px)) scale(calc(.94 + var(--p) * .06)); opacity: var(--p); color: #fff; }
.melding-ic { width: 40px; height: 40px; border-radius: 11px; background: #fff; display: flex; align-items: center; justify-content: center; }
.melding-ic svg { width: 21px; height: 21px; fill: none; stroke: var(--c-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.melding-kop { display: flex; justify-content: space-between; gap: 10px; }
.melding-kop b { font-size: 15.5px; } .melding-kop em { font-style: normal; font-size: 12px; opacity: .6; }
.melding-tekst { display: block; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .82); margin-top: 2px; }
@media (max-width: 960px) { .mscherm-raster { grid-template-columns: 1fr; } }
.map-css { position: absolute; left: 0; right: 0; bottom: 0; top: 54px; border-radius: 6px 18px 18px 18px; pointer-events: none; box-shadow: 0 -14px 30px -18px rgba(var(--shadow-rgb), .45), inset 0 1px 0 rgba(255, 255, 255, .25); }
.map-css.kraft { background: linear-gradient(180deg, #dccfb2, #cbbb98); color: #2b2416; }
.map-css.blauw { background: linear-gradient(180deg, #4864b5, #3450a0); color: #fff; }
.map-tab { position: absolute; bottom: 100%; left: var(--tab); height: 56px; padding: 0 30px; display: flex; align-items: center; border-radius: 16px 16px 0 0; background: inherit; font-weight: 900; font-size: clamp(14px, 1.7vw, 22px); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.map-css.kraft .map-tab { background: #dccfb2; } .map-css.blauw .map-tab { background: #4864b5; }
.map-clip { position: absolute; top: -26px; left: calc(var(--tab) + 4%); width: 22px; height: 58px; fill: none; stroke: #2a2a2a; stroke-width: 2.4; stroke-linecap: round; opacity: .75; transform: rotate(18deg); }
.kast .map { height: 66%; bottom: -4vh; }
.map[data-i="0"] { z-index: 5; transform: translateY(24%); } .map[data-i="1"] { z-index: 4; transform: translateY(16%); }
.map[data-i="2"] { z-index: 3; transform: translateY(8%); } .map[data-i="3"] { z-index: 2; transform: translateY(0%); }
.map[data-i="4"] { z-index: 1; transform: translateY(-8%); }
.map.open { z-index: 10 !important; }
@media (max-width: 960px) {
.map-tab { height: 42px; padding: 0 16px; font-size: 12.5px; border-radius: 12px 12px 0 0; }
.map-css { top: 40px; }
.map-clip { display: none; }
.kast .map { height: 70%; bottom: 0; }
.map[data-i="0"] { transform: translateY(20%); } .map[data-i="1"] { transform: translateY(13%); } .map[data-i="2"] { transform: translateY(6%); } .map[data-i="3"] { transform: translateY(-1%); } .map[data-i="4"] { transform: translateY(-8%); }
}
.map-clip { top: -18px; left: auto; right: 10px; height: 46px; width: 18px; }
.map-tab { padding-right: 40px; }
.kast .map-vel { bottom: auto; top: 60px; transform: translateY(30%); }
.kast .map.open .map-vel { transform: translateY(-88%); }
@media (max-width: 960px) { .kast .map-vel { top: 44px; } .kast .map.open .map-vel { transform: translateY(-92%); } .map-tab { padding-right: 16px; } }
.kast .map.open .map-vel { transform: translateY(-104%); }
@media (max-width: 960px) { .kast .map.open .map-vel { transform: translateY(-106%); } }
.ph-vlak .ph-logo { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.ph-vlak .ph-logo img { filter: brightness(0) invert(1); width: 46%; height: auto; max-height: 50%; object-fit: contain; }
.map-css { border-radius: 4px 14px 10px 10px; background-size: 512px 512px !important;
box-shadow: 0 -2px 0 rgba(255, 255, 255, .35) inset, 0 -16px 34px -18px rgba(40, 30, 10, .5), 0 1px 0 rgba(0, 0, 0, .08); }
.map-css.kraft, .map-css.kraft .map-tab { background: url("../img/map-kraft.jpg") #d6c7a6; color: #2b2416; }
.map-css.blauw, .map-css.blauw .map-tab { background: url("../img/map-blauw.jpg") #3e5cac; color: #fff; }
.map-css::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 7%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .12)),
linear-gradient(90deg, rgba(0, 0, 0, .06), transparent 6%, transparent 94%, rgba(0, 0, 0, .08)); }
.map-css::after { content: ""; position: absolute; left: 3%; right: 3%; top: 22px; height: 1px; background: rgba(0, 0, 0, .1); box-shadow: 0 1px 0 rgba(255, 255, 255, .25); }
.map-tab { border-radius: 12px 14px 0 0; padding: 0 22px; height: 52px; box-shadow: 0 -2px 0 rgba(255, 255, 255, .3) inset; }
.map-tab::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .2), transparent 30%); pointer-events: none; }
.map-etiket { position: relative; display: inline-block; padding: 7px 16px 6px; background: #fbf8f1; color: #1e2133; border-radius: 3px; font-size: clamp(13px, 1.4vw, 18px); font-weight: 800; letter-spacing: .06em;
box-shadow: 0 1px 2px rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(0, 0, 0, .05); transform: rotate(-1.2deg); }
.map:nth-child(2n) .map-etiket { transform: rotate(1deg); }
.map-clip { top: -20px; right: -4px; }
.map[data-i="0"] .map-css { transform: rotate(-.4deg); } .map[data-i="1"] .map-css { transform: rotate(.5deg); }
.map[data-i="2"] .map-css { transform: rotate(-.3deg); } .map[data-i="3"] .map-css { transform: rotate(.35deg); } .map[data-i="4"] .map-css { transform: rotate(-.25deg); }
.kast::after { content: ""; position: absolute; left: -3%; right: -3%; bottom: -8vh; height: 24%; z-index: 6; border-radius: 10px 10px 0 0; pointer-events: none;
background: url("../img/map-kraft.jpg") #8f7d5a; background-blend-mode: multiply; box-shadow: 0 -18px 30px -16px rgba(40, 30, 10, .55), inset 0 2px 0 rgba(255, 255, 255, .2); }
.kast-kop { position: relative; }
.kast-kop .h-statement { font-size: clamp(40px, 5.4vw, 84px); letter-spacing: -.05em; line-height: .98; }
.kast-kop .script { font-size: 1.3em; color: var(--c-accent); position: relative; display: inline-block; }
.kast-kop .script::after { content: ""; position: absolute; left: 4%; right: -2%; bottom: -.04em; height: .16em; border-radius: 50%; border-bottom: 4px solid #e8dcc0; transform: rotate(-2deg); }
.kast-kop .lead { margin: 14px auto 0; max-width: 44ch; }
.kast-kop .lead i { font-style: normal; }
@media (max-width: 960px) { .map-tab { height: 40px; padding: 0 12px; } .map-etiket { font-size: 11px; padding: 5px 9px; } .map-css::after { top: 14px; } }
.ap-papier { top: 8%; left: 0; }
.ap-postit, .ap-lijst { position: absolute; color: var(--c-ink); box-shadow: 0 24px 40px -26px rgba(var(--shadow-rgb), .6); opacity: calc(1 - var(--vlieg, 0)); }
.ap-postit { left: 22%; top: 50%; width: 170px; padding: 18px 16px; background: #f6e27a; font-family: var(--font-script); font-size: 26px; line-height: 1.05;
transform: translate(calc(var(--vlieg, 0) * 160px), calc(var(--vlieg, 0) * -40px)) rotate(calc(5deg - var(--vlieg, 0) * 10deg)) scale(calc(1 - var(--vlieg, 0) * .5)); }
.ap-lijst { left: 2%; top: 64%; width: 190px; padding: 14px 16px; background: #fff; border-radius: 4px; display: grid; gap: 6px; font-size: 14px;
background-image: repeating-linear-gradient(transparent 0 25px, rgba(60, 88, 164, .15) 25px 26px);
transform: translate(calc(var(--vlieg, 0) * 200px), calc(var(--vlieg, 0) * -90px)) rotate(calc(-4deg + var(--vlieg, 0) * 8deg)) scale(calc(1 - var(--vlieg, 0) * .5)); }
.ap-lijst b { font-family: var(--font-script); font-weight: 400; font-size: 24px; }
.ap-lijst span { display: flex; justify-content: space-between; } .ap-lijst i { font-style: normal; color: #c0392b; font-weight: 800; }
.ap-lijst span:last-child i { color: #2fa66a; }
.ap-regel { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: #fff; border-radius: 12px; font-size: 11.5px; color: var(--c-soft); box-shadow: 0 6px 16px -12px rgba(0, 0, 0, .4);
opacity: var(--korting, 0); transform: translateY(calc((1 - var(--korting, 0)) * 8px)); transition: opacity 400ms, transform 400ms; }
.ap-regel b { display: block; font-size: 13px; color: var(--c-ink); }
.ap-regel i.ok { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #2fa66a; position: relative; }
.ap-regel i.ok::after { content: ""; position: absolute; left: 8px; top: 5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ap-regel + .ap-regel { transition-delay: 150ms; }
.ap-korting { background: var(--c-accent); }
@media (max-width: 960px) { .ap-postit { width: 110px; font-size: 18px; padding: 12px 10px; top: 46%; left: 14%; } .ap-lijst { width: 130px; font-size: 11px; top: 66%; padding: 10px; } .ap-lijst b { font-size: 18px; } .ap-regel { padding: 6px 8px; font-size: 9.5px; } .ap-regel b { font-size: 11px; } }
@media (max-width: 960px) { .ap-korting { display: none; } .ap-pas-kop small { display: none; } }
.pkop-eigen .hero-foto { background: var(--hk); }
.pkop-eigen .hero-foto img { filter: none; }
.pkop-eigen .hero-foto::before { background: linear-gradient(90deg, var(--hk) 0%, transparent 55%); mix-blend-mode: normal; opacity: .55; }
.pkop-eigen .hero-foto::after { background: linear-gradient(90deg, rgba(0, 0, 0, .28), transparent 50%); opacity: 1; }
.pkop-eigen .pk-vlak { background: var(--hk); }
.pkaart-logo { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: opacity 400ms var(--ease-out); }
.pkaart-logo img { width: 44%; max-height: 42%; object-fit: contain; filter: brightness(0) invert(1) drop-shadow(0 2px 14px rgba(0, 0, 0, .25)); }
.pkaart-beeld:has(.pkaart-logo) > img { filter: brightness(.82); transition: transform 700ms var(--ease-out), filter 400ms; }
.pkaart:hover .pkaart-logo { opacity: 0; }
.pkaart:hover .pkaart-beeld > img { filter: none; }
.pkaart:hover .pkaart-beeld > .pkaart-logo { transform: none; }
@media (hover: none) { .pkaart-logo { opacity: 1; } }
.pscores { position: absolute; right: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); bottom: clamp(56px, 9vh, 100px); z-index: 3; padding: 14px 16px 12px; border-radius: 20px; color: #fff;
background: rgba(255, 255, 255, .12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 20px 40px -24px rgba(0, 0, 0, .5); }
.pscores-kop { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; margin-bottom: 10px; }
.pscores-kop i { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); animation: ps-puls 1.8s infinite; }
@keyframes ps-puls { 70% { box-shadow: 0 0 0 7px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
.pscores-rij { display: flex; gap: 14px; }
.pscore { --v: 0; position: relative; display: grid; justify-items: center; gap: 4px; width: 50px; }
.pscore svg { width: 50px; height: 50px; transform: rotate(-90deg); }
.pscore circle { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 3.5; }
.pscore circle.v { stroke: #fff; stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: calc(119.4 - 119.4 * var(--v) / 100); transition: stroke-dashoffset 1.2s var(--ease-out); }
.pscore.goed circle.v { stroke: #3ddc84; } .pscore.matig circle.v { stroke: #ffb547; } .pscore.zwak circle.v { stroke: #ff6b6b; }
.pscore b { position: absolute; top: 0; height: 50px; display: flex; align-items: center; font-size: 16px; font-weight: 800; }
.pscore small { font-size: 11px; font-weight: 700; opacity: .8; }
.pscores.laden .pscore b { animation: ps-laad 1s infinite alternate; }
@keyframes ps-laad { from { opacity: .3; } to { opacity: 1; } }
@media (max-width: 960px) { .pscores { position: relative; right: auto; bottom: auto; display: inline-block; margin-top: 22px; } }
.plinks { display: flex; flex-wrap: wrap; gap: 8px; }
.plink { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 8px; border-radius: 999px; color: #fff; font-size: 14.5px; font-weight: 700;
background: rgba(255, 255, 255, .14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); transition: background 250ms, color 250ms; }
.plink i { width: 28px; height: 28px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.plink svg { width: 16px; height: 16px; fill: none; stroke: var(--hk, var(--c-accent)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plink em { font-style: normal; opacity: .7; transition: transform 250ms; }
.plink:hover { background: #fff; color: var(--hk, var(--c-accent)); }
.plink:hover em { transform: translate(2px, -2px); }
.pscores { position: relative; right: auto; bottom: auto; display: inline-block; margin-top: 20px; }
.pkop-in .pscores + * { margin-top: 0; }
.presultaat-sectie .wrap { display: flex; justify-content: center; }
.pmelding { --hk: var(--c-accent); display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: center; width: min(640px, 100%); padding: 20px 26px 20px 20px; border-radius: 28px;
background: rgba(255, 255, 255, .78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
box-shadow: 0 30px 60px -30px rgba(var(--shadow-rgb), .55), 0 0 0 1px rgba(var(--shadow-rgb), .06); }
.pmelding.reveal { transform: translateY(-30px) scale(.94); opacity: 0; transition: transform 700ms cubic-bezier(.2, 1.4, .4, 1), opacity 400ms; }
.pmelding.reveal.in-view { transform: none; opacity: 1; }
.pm-icoon { width: 64px; height: 64px; border-radius: 16px; background: var(--hk); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .4); }
.pm-icoon img { width: 72%; max-height: 60%; object-fit: contain; filter: brightness(0) invert(1); }
.pm-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.pm-kop b { font-size: 15px; color: var(--c-ink); } .pm-kop em { font-style: normal; font-size: 13px; color: var(--c-soft); }
.pmelding p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.35; color: var(--c-ink); }
.pmelding strong { font-size: clamp(34px, 4vw, 56px); font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--hk); }
.pm-vlam { width: clamp(28px, 3vw, 40px); height: clamp(28px, 3vw, 40px); fill: #ff7a2f; stroke: none; filter: drop-shadow(0 4px 10px rgba(255, 122, 47, .45)); transform-origin: 50% 90%; animation: pm-flakker 1.4s ease-in-out infinite alternate; }
.pm-vlam path + path { fill: none; stroke: #ff7a2f; stroke-width: 2; stroke-linecap: round; }
@keyframes pm-flakker { from { transform: scale(1) rotate(-3deg); } to { transform: scale(1.08) rotate(3deg); } }
.pmelding p span { flex-basis: 100%; }
@media (max-width: 600px) { .pmelding { grid-template-columns: 48px 1fr; padding: 16px; gap: 12px; } .pm-icoon { width: 48px; height: 48px; border-radius: 12px; } }
@media (prefers-reduced-motion: reduce) { .pm-vlam { animation: none; } }
.pmelding p.pm-zin { flex-wrap: nowrap; align-items: center; gap: 14px; font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; }
.pmelding p.pm-zin span { flex-basis: auto; }
.pm-raket { flex: none; width: 34px; height: 34px; fill: none; stroke: var(--hk); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: pm-raket 2s ease-in-out infinite; }
@keyframes pm-raket { 50% { transform: translate(2px, -3px); } }
@media (prefers-reduced-motion: reduce) { .pm-raket { animation: none; } }
.pk-melding { --hk: var(--c-accent); position: absolute; z-index: 3; left: 12px; right: 12px; top: 12px; display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; border-radius: 16px;
background: rgba(255, 255, 255, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .5);
opacity: 0; transform: translateY(-120%) scale(.94); transition: transform 700ms cubic-bezier(.2, 1.4, .4, 1) 350ms, opacity 400ms 350ms; }
.pkaart.in-view .pk-melding, .pkaart:not(.reveal) .pk-melding { opacity: 1; transform: none; }
.pk-m-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--hk); display: flex; align-items: center; justify-content: center; }
.pk-m-ic img { width: 74%; max-height: 60%; object-fit: contain; filter: brightness(0) invert(1); }
.pk-m-tekst { display: grid; line-height: 1.2; min-width: 0; }
.pk-m-tekst b { display: flex; align-items: center; gap: 4px; font-size: 17px; font-weight: 900; letter-spacing: -.02em; color: var(--c-ink); }
.pk-m-tekst b .pm-vlam { width: 17px; height: 17px; }
.pk-m-tekst small { font-size: 12px; color: var(--c-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pkaart:hover .pkaart-beeld > .pk-melding { transform: none; }
.pzelf { padding-top: 0; }
.pzelf-raster { display: grid; gap: clamp(18px, 3vw, 34px); align-items: end; }
.pzelf-raster.met-scores { grid-template-columns: 1.4fr auto; }
.pzelf-links { display: grid; gap: 12px; }
.pzelf-links .h2 { margin: 0 0 6px; }
.padres { --hk: var(--c-accent); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 12px 12px 12px 14px; border-radius: 22px; background: #fff;
box-shadow: 0 20px 40px -30px rgba(var(--shadow-rgb), .55), 0 0 0 1px rgba(var(--shadow-rgb), .07); transition: transform 300ms var(--ease-out), box-shadow 300ms; }
.pzelf .padres { --hk: inherit; }
.padres-ic { width: 46px; height: 46px; border-radius: 14px; background: #f1efe9; display: flex; align-items: center; justify-content: center; }
.padres-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--c-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.padres-tekst { display: grid; min-width: 0; }
.padres-tekst small { font-size: 12.5px; font-weight: 700; color: var(--c-soft); }
.padres-tekst b { font-size: clamp(18px, 2vw, 26px); letter-spacing: -.02em; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.padres-ga { width: 50px; height: 50px; border-radius: 16px; background: var(--c-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; transition: transform 300ms var(--ease-out); }
.padres:hover { transform: translateY(-3px); box-shadow: 0 26px 46px -28px rgba(var(--shadow-rgb), .6), 0 0 0 1px rgba(var(--shadow-rgb), .07); }
.padres:hover .padres-ga { transform: rotate(45deg); }
.pzelf .pscores { margin: 0; color: var(--c-ink); background: #fff; backdrop-filter: none; box-shadow: 0 20px 40px -30px rgba(var(--shadow-rgb), .55), 0 0 0 1px rgba(var(--shadow-rgb), .07); padding: 16px 18px 14px; }
.pzelf .pscore circle { stroke: rgba(var(--shadow-rgb), .1); }
.pzelf .pscore circle.v { stroke: var(--c-accent); }
.pzelf .pscore.goed circle.v { stroke: #2fa66a; } .pzelf .pscore.matig circle.v { stroke: #f0a020; } .pzelf .pscore.zwak circle.v { stroke: #e05050; }
@media (max-width: 960px) { .pzelf-raster.met-scores { grid-template-columns: 1fr; } .pzelf .pscores { justify-self: start; } }
.pzelf[style] .padres-ga { background: var(--hk); }
.padres-kaart { border-radius: 22px; background: #fff; box-shadow: 0 20px 40px -30px rgba(var(--shadow-rgb), .55), 0 0 0 1px rgba(var(--shadow-rgb), .07); }
.padres-kaart .padres { box-shadow: none; background: none; }
.padres-kaart .padres:hover { transform: none; box-shadow: none; }
.padres-kaart .pscores { display: flex; align-items: center; gap: 18px; margin: 0; padding: 12px 18px 14px; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid rgba(var(--shadow-rgb), .08); color: var(--c-ink); backdrop-filter: none; }
.padres-kaart .pscore { width: auto; grid-template-columns: 40px auto; grid-template-rows: auto; align-items: center; gap: 8px; justify-items: start; }
.padres-kaart .pscore svg { width: 40px; height: 40px; }
.padres-kaart .pscore b { position: absolute; left: 0; width: 40px; height: 40px; justify-content: center; font-size: 13px; }
.padres-kaart .pscore small { font-size: 13px; opacity: 1; color: var(--c-soft); font-weight: 600; }
.padres-kaart .pscore circle { stroke: rgba(var(--shadow-rgb), .1); }
.padres-kaart .pscore.goed circle.v { stroke: #2fa66a; } .padres-kaart .pscore.matig circle.v { stroke: #f0a020; } .padres-kaart .pscore.zwak circle.v { stroke: #e05050; }
.pscores-datum { margin-left: auto; font-size: 12px; color: var(--c-soft); }
@media (max-width: 600px) { .padres-kaart .pscores { flex-wrap: wrap; gap: 10px 14px; } .pscores-datum { flex-basis: 100%; margin: 0; } }
.pkaart.in-view .pk-melding, .pkaart:not(.reveal) .pk-melding { opacity: 0; transform: translateY(-120%) scale(.94); transition: transform 700ms cubic-bezier(.2, 1.4, .4, 1), opacity 350ms; }
.pkaart.melding-nu .pk-melding, .pkaart:hover .pkaart-beeld > .pk-melding { opacity: 1; transform: none; }
@media (hover: none) { .pkaart.melding-gezien .pk-melding { opacity: 1; transform: none; } }
.pwat-onder { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 30px; margin-top: 22px; }
.pwat-onder .pcredits { margin: 0; }
.pwat-onder .knoppen { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.pmeet-raster { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.pmeet-tekst .h2 { margin: 0 0 16px; } .pmeet-tekst .lead { margin: 0; max-width: 44ch; }
.pmeet-venster { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 70px -40px rgba(var(--shadow-rgb), .6), 0 0 0 1px rgba(var(--shadow-rgb), .06); }
.pmeet-balk { display: flex; align-items: center; gap: 7px; padding: 14px 18px; background: #f1efe9; }
.pmeet-balk span { width: 11px; height: 11px; border-radius: 50%; background: #d6d1c6; }
.pmeet-balk em { margin-left: 12px; flex: 1; font-style: normal; font-size: 13.5px; color: var(--c-soft); background: #fff; border-radius: 8px; padding: 6px 12px; }
.pmeet .pscores { position: static; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: clamp(24px, 4vw, 44px) clamp(18px, 3vw, 36px) 20px; background: none; box-shadow: none; backdrop-filter: none; color: var(--c-ink); border-radius: 0; }
.pmeet .pscore { width: auto; justify-items: center; gap: 10px; }
.pmeet .pscore svg { width: clamp(84px, 9vw, 118px); height: clamp(84px, 9vw, 118px); }
.pmeet .pscore circle { stroke: rgba(var(--shadow-rgb), .08); stroke-width: 3; }
.pmeet .pscore circle.v { stroke-width: 3; }
.pmeet .pscore.goed circle.v { stroke: #2fa66a; } .pmeet .pscore.matig circle.v { stroke: #f0a020; } .pmeet .pscore.zwak circle.v { stroke: #e05050; }
.pmeet .pscore b { position: absolute; top: 0; height: clamp(84px, 9vw, 118px); display: flex; align-items: center; font-size: clamp(26px, 3vw, 38px); font-weight: 900; letter-spacing: -.03em; }
.pmeet .pscore small { font-size: 14px; font-weight: 700; color: var(--c-ink); opacity: 1; }
.pmeet .pscores-datum { grid-column: 1 / -1; justify-self: center; margin: 10px 0 0; font-size: 12.5px; color: var(--c-soft); }
@media (max-width: 960px) { .pmeet-raster { grid-template-columns: 1fr; } .pwat-onder .knoppen { margin-left: 0; } }
.pveld { position: relative; min-height: 64vh; display: flex; align-items: center; overflow: hidden; padding: 150px 0 70px; }
.pveld-logos { position: absolute; inset: 0; z-index: 0; }
.zl { --dx: 0px; --dy: 0px; --k: 1; position: absolute; left: var(--x); top: var(--y); width: clamp(70px, 9vw, 130px); height: clamp(40px, 5vw, 70px); display: flex; align-items: center; justify-content: center;
transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) rotate(var(--r)) scale(calc(var(--s) * var(--k))); opacity: .16; filter: grayscale(1); transition: transform 600ms cubic-bezier(.2, 1, .3, 1), opacity 300ms, filter 300ms; }
.zl img { max-width: 100%; max-height: 100%; object-fit: contain; }
a.zl:hover, a.zl.dichtbij { opacity: .9; filter: none; --k: 1.35; z-index: 2; }
.pveld-kop { position: relative; z-index: 1; text-align: center; pointer-events: none; }
.pveld-kop .h-statement { font-size: clamp(44px, 6.4vw, 100px); letter-spacing: -.05em; line-height: .98; color: var(--c-ink); text-shadow: 0 0 40px var(--c-bg, #ece5d7), 0 0 20px var(--c-bg, #ece5d7); }
.pveld-kop .lead { max-width: 44ch; margin: 18px auto 0; text-shadow: 0 0 18px var(--c-bg, #ece5d7); }
.pwerk { padding-top: 10px; }
@media (max-width: 960px) { .pveld { min-height: 52vh; padding: 120px 0 40px; } .zl { width: 64px; height: 36px; } }
.pveld-kop .h-statement .grad { text-shadow: none; }
.pveld { min-height: 70vh; }
@media (max-width: 960px) { .pwerk .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter); } .pwerk .filters::-webkit-scrollbar { display: none; } .pwerk .filter { flex: none; } }
.pscores.laden .pscore svg { animation: ps-draai 1.1s linear infinite; }
.pscores.laden .pscore circle.v { stroke: var(--c-accent); stroke-dashoffset: 90; }
.pscores.laden .pscore b { opacity: 0; }
@keyframes ps-draai { to { transform: rotate(270deg); } }
.pscore-was { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--c-soft); white-space: pre; }
.pscore-was.beter { color: #2fa66a; }
.pveld .zl { opacity: .13; }
.pveld-kop .h-statement, .pveld-kop .lead { text-shadow: 0 0 30px var(--c-bg, #ece5d7), 0 0 14px var(--c-bg, #ece5d7), 0 0 4px var(--c-bg, #ece5d7); }
.pmelding strong + .pm-ic, .pk-m-tekst b .pm-ic { flex: none; fill: none; stroke: #ff7a2f; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pmelding strong + .pm-ic { width: clamp(28px, 3vw, 40px); height: clamp(28px, 3vw, 40px); }
.pk-m-tekst b .pm-ic { width: 17px; height: 17px; }
.pm-champagne { stroke: #d4a017 !important; animation: pm-proost 1.6s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes pm-proost { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-6deg); } 90% { transform: rotate(6deg); } }
.pm-champagne .pm-bubbel { animation: pm-bubbel 1.6s ease-out infinite; }
@keyframes pm-bubbel { from { opacity: 1; transform: translateY(2px); } to { opacity: 0; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .pm-champagne, .pm-champagne .pm-bubbel { animation: none; } }
.pm-champagne { stroke: #c9951a !important; stroke-width: 1.6 !important; animation: none; }
.pmelding strong + .pm-champagne { width: clamp(34px, 3.6vw, 48px); height: clamp(34px, 3.6vw, 48px); }
.pm-champagne .pm-glas-l { transform-origin: 9.5px 24px; animation: pm-glas-l 2s ease-in-out infinite; }
.pm-champagne .pm-glas-r { transform-origin: 22.5px 24px; animation: pm-glas-r 2s ease-in-out infinite; }
@keyframes pm-glas-l { 0%, 60%, 100% { transform: rotate(0); } 75% { transform: rotate(14deg); } }
@keyframes pm-glas-r { 0%, 60%, 100% { transform: rotate(0); } 75% { transform: rotate(-14deg); } }
.pm-champagne .pm-bubbel { fill: #f6d36b; stroke: none; animation: pm-bubbel 2s ease-out infinite; }
@keyframes pm-bubbel { 0%, 70% { opacity: 0; transform: translateY(3px); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .pm-champagne g { animation: none !important; } }
.kast.kast2 { width: min(980px, 92vw); perspective: 1600px; }
.kast2::after { display: none; }
.kast2 .map { left: 2%; right: 2%; height: 62%; bottom: 0; transition: transform 900ms cubic-bezier(.16, 1, .3, 1), filter 600ms, opacity 600ms; filter: none !important; }
.kast2 .map[data-i="0"] { transform: translateY(26%); } .kast2 .map[data-i="1"] { transform: translateY(19%); }
.kast2 .map[data-i="2"] { transform: translateY(12%); } .kast2 .map[data-i="3"] { transform: translateY(5%); } .kast2 .map[data-i="4"] { transform: translateY(-2%); }
.kast2 .map-css { top: 46px; border-radius: 4px 12px 8px 8px; transform: none !important;
box-shadow: 0 -1px 0 rgba(255, 255, 255, .5) inset, 0 -18px 28px -20px rgba(20, 24, 50, .45); }
.kast2 .map-css::after { top: 16px; left: 2%; right: 2%; opacity: .6; }
.kast2 .map-tab { left: var(--tab); width: 18.8%; height: 48px; padding: 0 10px; justify-content: center; border-radius: 10px 10px 0 0; }
.kast2 .map-etiket { transform: none !important; width: 100%; text-align: center; padding: 7px 8px 6px; font-size: clamp(10px, 1.05vw, 14px); letter-spacing: .08em; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 0 rgba(0, 0, 0, .12), inset 0 0 0 1px rgba(0, 0, 0, .04); }
.kast2 .map.open { transform: translateY(-14%) !important; }
.kast2 .map.ervoor { transform: translateY(48%) !important; opacity: .95; }
.kast2.actief .map:not(.open) .map-css { filter: brightness(.94) saturate(.85); }
.kast2 .map-vel { left: 7%; right: 7%; top: 48px; bottom: auto; border-radius: 6px; padding: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 40px) clamp(26px, 3vw, 40px);
background: #fffdf9 url("../img/papier-licht.png"); background-size: 400px; box-shadow: 0 30px 60px -30px rgba(20, 24, 50, .55), 0 0 0 1px rgba(0, 0, 0, .04);
opacity: 0; transform: translateY(10%) rotate(0deg); transition: transform 900ms cubic-bezier(.16, 1, .3, 1) 120ms, opacity 400ms 120ms; }
.kast2 .map.open .map-vel { opacity: 1; transform: translateY(-96%) rotate(-1.2deg); }
.kast2 .map-vel h2 { margin-top: 0; }
.kast2 .map-vel::before { content: ""; position: absolute; left: 22px; right: 22px; top: 14px; height: 1px; background: rgba(60, 88, 164, .25); }
.kast2::before { content: ""; position: absolute; left: -2%; right: -2%; bottom: -10vh; height: calc(26% + 10vh); z-index: 8; border-radius: 14px 14px 0 0; pointer-events: none;
background: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 18%), #1e2744 url("../img/papier-donker.png"); background-size: auto, 400px;
box-shadow: 0 -24px 40px -24px rgba(10, 14, 40, .65), inset 0 2px 0 rgba(255, 255, 255, .12); }
.kast-stip { position: absolute; z-index: 9; left: 50%; bottom: calc(26% - 74px); transform: translateX(-50%); display: flex; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.kast-stip i { width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .35); transition: width 400ms cubic-bezier(.16, 1, .3, 1), background 300ms; }
.kast-stip i.aan { width: 26px; background: #fff; }
.kast2 .map:hover:not(.open) { transform: translateY(var(--hov, 0)); }
@media (hover: hover) { .kast2:not(.actief) .map:hover .map-css { filter: brightness(1.04); } }
@media (max-width: 960px) {
.kast.kast2 { width: 100%; }
.kast2 .map-tab { height: 38px; padding: 0 3px; }
.kast2 .map-etiket { font-size: 8.5px; letter-spacing: .03em; padding: 5px 3px; }
.kast2 .map-css { top: 36px; }
.kast2 .map.open .map-vel { transform: translateY(-100%) rotate(-1deg); }
.kast-stip { bottom: calc(26% - 60px); }
}
.kast2 .map.open { transform: translateY(8%) !important; }
.kast2 .map.ervoor { transform: translateY(70%) !important; }
.kast2 .map.open .map-vel { transform: translateY(-74%) rotate(-1deg); }
.kast2 .map-vel .btn { position: relative; z-index: 2; }
@media (max-width: 960px) { .kast2 .map.open .map-vel { transform: translateY(-84%) rotate(-1deg); } }
.kast2 .map-css { z-index: 1; }
.kast2 .map-vel { z-index: 3; }
.kast2 .map.open { transform: translateY(26%) !important; }
.kast2 .map.ervoor { transform: translateY(80%) !important; }
.kast2 .map.open .map-vel { transform: translateY(-58%) rotate(-1deg); }
@media (max-width: 960px) { .kast2 .map.open .map-vel { transform: translateY(-62%) rotate(-1deg); } }
.pkop .hero-foto img { transform: none; will-change: auto; }
.pm-champagne { stroke: #1f2f1c !important; stroke-width: 1.2 !important; animation: none !important; overflow: visible; }
.pm-champagne .pm-kurk { transform-origin: 16px 6px; animation: pm-kurk 2.4s cubic-bezier(.2, .8, .3, 1) infinite; }
@keyframes pm-kurk { 0%, 35% { transform: translate(0, 0) rotate(0); opacity: 1; } 55% { transform: translate(0, -9px) rotate(-40deg); opacity: 1; } 70%, 100% { transform: translate(0, -12px) rotate(-70deg); opacity: 0; } }
.pm-champagne .pm-bubbel { fill: #f6d36b; stroke: none; animation: pm-spuit 2.4s ease-out infinite; }
@keyframes pm-spuit { 0%, 40% { opacity: 0; transform: translate(4px, 4px) scale(.4); } 55% { opacity: 1; } 100% { opacity: 0; transform: translate(-2px, -3px) scale(1.1); } }
.ozoom { height: 260vh; }
.ozoom-tafel { transform: none !important; will-change: auto; }
.ozoom-tafel > * { will-change: transform, opacity; }
.ozoom-intro { top: 50%; bottom: auto; transform: translateY(-50%); color: var(--c-ink); text-shadow: 0 0 30px #ece5d7, 0 0 12px #ece5d7; z-index: 7; }
.ozoom-intro span { color: var(--c-soft); }
.ozoom-intro b { color: var(--c-accent); }
.ozoom .scroll-tip { color: var(--c-soft); }
.doka { --licht: 0; position: relative; height: 320vh; }
.doka-pin { position: sticky; top: 0; height: 100vh; overflow: hidden;
background: linear-gradient(rgba(236, 229, 215, var(--licht)), rgba(236, 229, 215, var(--licht))), #0d0f1a; }
.doka-pin::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--licht); background: url("../img/papier-licht.png"); background-size: 400px; }
.doka-licht { position: absolute; left: 50%; top: -30vh; width: 120vw; height: 90vh; transform: translateX(-50%); pointer-events: none; opacity: calc(1 - var(--licht));
background: radial-gradient(ellipse at 50% 30%, rgba(214, 48, 49, .45), rgba(214, 48, 49, .12) 40%, transparent 70%); animation: doka-flikker 6s ease-in-out infinite; }
@keyframes doka-flikker { 50% { opacity: calc((1 - var(--licht)) * .85); } }
.doka-lijn { position: absolute; left: -2%; right: -2%; top: calc(14% - 6px); height: 60px; z-index: 1; }
.doka-lijn svg { width: 100%; height: 100%; overflow: visible; }
.doka-lijn path { fill: none; stroke: color-mix(in srgb, #c9b99a calc(100% - var(--licht) * 100%), #3a3427); stroke-width: 2; vector-effect: non-scaling-stroke; }
.doka-foto { --o: 0; position: absolute; left: var(--x); top: var(--y); z-index: 2; width: clamp(130px, 14vw, 210px); transform: translateX(-50%) rotate(var(--r)); transform-origin: 50% 0;
animation: doka-wieg 5s ease-in-out infinite; animation-delay: calc(var(--x) * -.08s); }
.doka-foto.hoofd { width: clamp(170px, 19vw, 280px); z-index: 3; }
@keyframes doka-wieg { 0%, 100% { transform: translateX(-50%) rotate(var(--r)); } 50% { transform: translateX(-50%) rotate(calc(var(--r) * -.6)); } }
.knijper { position: absolute; left: 50%; top: -14px; z-index: 2; width: 14px; height: 34px; margin-left: -7px; border-radius: 3px; background: linear-gradient(90deg, #b88a55, #d9b07a 50%, #b88a55); box-shadow: 0 3px 6px rgba(0, 0, 0, .35); }
.knijper::after { content: ""; position: absolute; left: 3px; right: 3px; top: 12px; height: 6px; border-radius: 2px; background: #8a8a8a; }
.doka-papier { position: relative; display: block; padding: 8px 8px 30px; background: #f6f3ec; border-radius: 2px; box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .7); }
.doka-papier img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
opacity: var(--o); filter: sepia(calc((1 - var(--o)) * .9)) contrast(calc(.6 + var(--o) * .4)) brightness(calc(1.6 - var(--o) * .6)); }
.doka-foto.briefje .doka-papier { padding: 22px 18px 24px; background: #3c58a4; color: #fff; text-align: left; opacity: calc(.15 + var(--o) * .85); }
.doka-foto.briefje b { display: block; font-size: clamp(16px, 1.5vw, 22px); font-weight: 800; }
.doka-foto.briefje em { display: block; font-style: normal; font-family: var(--font-script); font-size: clamp(24px, 2.3vw, 34px); color: #e8dcc0; line-height: 1; }
.doka-hoi { position: absolute; left: 0; right: 0; bottom: 12vh; z-index: 4; text-align: center; color: #f3e7e1; pointer-events: none; }
.doka-hoi span { display: block; font-size: clamp(18px, 1.8vw, 26px); font-weight: 600; opacity: .8; }
.doka-hoi b { display: block; font-family: var(--font-script); font-weight: 400; font-size: clamp(80px, 11vw, 170px); line-height: .9; color: #ff8a80; text-shadow: 0 0 40px rgba(214, 48, 49, .5); }
.doka-kop { position: absolute; left: 0; right: 0; bottom: 9vh; z-index: 4; text-align: center; opacity: 0; }
.doka-kop .h-statement { font-size: clamp(40px, 5vw, 76px); letter-spacing: -.045em; color: var(--c-ink); margin: 0; }
.doka-kop .lead { max-width: 52ch; margin: 12px auto 0; }
.doka .scroll-tip { color: rgba(255, 255, 255, .6); z-index: 5; }
@media (max-width: 960px) {
.doka-foto { width: 26vw; } .doka-foto.hoofd { width: 38vw; }
.doka-foto.f1 { --x: 14% !important; --y: 15% !important; } .doka-foto.f5 { --x: 86% !important; --y: 15% !important; }
.doka-foto.f2 { --x: 30% !important; --y: 38% !important; } .doka-foto.f4 { --x: 72% !important; --y: 38% !important; }
.doka-foto.f3 { --y: 20% !important; }
.doka-foto.briefje .doka-papier { padding: 12px 10px 14px; }
.doka-hoi { bottom: 9vh; } .doka-kop { bottom: 6vh; }
}
@media (prefers-reduced-motion: reduce) { .doka-foto, .doka-licht { animation: none; } }
@media (max-width: 960px) {
.doka-pin::before { content: ""; position: absolute; left: -2%; right: -2%; top: calc(38% - 4px); height: 2px; z-index: 1; border-radius: 50%; background: color-mix(in srgb, #c9b99a calc(100% - var(--licht) * 100%), #3a3427); transform: rotate(-1deg); }
}
.pkop .pmelding-kop { position: absolute; right: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); top: 120px; z-index: 4; width: min(400px, 40vw); padding: 14px 18px 14px 14px; grid-template-columns: 46px 1fr; gap: 12px; border-radius: 22px;
background: rgba(255, 255, 255, .82); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55);
opacity: 0; transform: translateY(-30px) scale(.94); animation: pm-binnen 800ms cubic-bezier(.2, 1.4, .4, 1) 900ms forwards; }
@keyframes pm-binnen { to { opacity: 1; transform: none; } }
.pkop .pmelding-kop .pm-icoon { width: 46px; height: 46px; border-radius: 12px; }
.pkop .pmelding-kop strong { font-size: clamp(26px, 2.6vw, 38px); }
.pkop .pmelding-kop strong + .pm-ic, .pkop .pmelding-kop .pm-vlam { width: 26px; height: 26px; }
.pkop .pmelding-kop p { font-size: 14.5px; gap: 2px 8px; }
.pkop .pmelding-kop p.pm-zin { font-size: 14.5px; font-weight: 600; }
.pkop .pmelding-kop .pm-raket { width: 24px; height: 24px; }
@media (max-width: 960px) {
.pkop .pmelding-kop { position: relative; right: auto; top: auto; width: 100%; max-width: 420px; margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) { .pkop .pmelding-kop { animation: none; opacity: 1; transform: none; } }
.ov-open { position: relative; height: 300vh; }
.ov-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; background-color: var(--c-bg); }
.ov-raster { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 80px); align-items: center; padding-top: 70px; }
.ov-tekst { will-change: opacity, transform; }
.ov-hoi { margin: 0 0 6px; font-size: clamp(22px, 2vw, 30px); font-weight: 800; letter-spacing: -.02em; color: var(--c-ink); }
.ov-hoi .script { font-family: var(--font-script); font-weight: 400; font-size: 1.7em; color: var(--c-accent); letter-spacing: 0; margin-left: .1em; }
.ov-tekst .h-statement { margin: 0 0 18px; }
.ov-tekst .lead { max-width: 34ch; margin: 0; }
.ov-plek { height: min(74vh, 640px); }
.ov-foto { position: absolute; z-index: 3; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; border-radius: var(--rad, 0); box-shadow: 0 40px 80px -40px rgba(23, 26, 36, .55); }
.ov-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ov-blauw { position: absolute; inset: 0; opacity: var(--blauw, 0); background: linear-gradient(60deg, rgba(36, 57, 122, .93) 0%, rgba(60, 88, 164, .72) 50%, rgba(60, 88, 164, .3) 100%); }
.ov-motto { position: absolute; z-index: 4; left: 0; right: 0; bottom: clamp(60px, 12vh, 140px); color: #fff; pointer-events: none; opacity: var(--m, 0); transform: translateY(calc((1 - var(--m, 0)) * 30px)); }
.ov-motto .h-hero { color: #fff; margin: 0 0 16px; }
.ov-motto .lead { color: var(--c-on-dark-soft); max-width: 40ch; margin: 0; }
.ov-door { position: relative; display: inline-block; }
.ov-door svg { position: absolute; left: -2%; top: 28%; width: 104%; height: 50%; overflow: visible; }
.ov-door path { fill: none; stroke: #e8dcc0; stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--streep, 0)); }
.ov-open .scroll-tip { position: absolute; z-index: 5; left: 50%; bottom: 26px; transform: translateX(-50%); }
.ov-verhaal { position: relative; height: 420vh; }
.ov-verhaal-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: 70px; overflow: hidden; }
.ov-verhaal-raster { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 100px); align-items: center; }
.ov-hst { position: relative; margin-top: 34px; min-height: 220px; }
.ov-h { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(26px); transition: opacity 450ms var(--ease-out), transform 650ms var(--ease-out); }
.ov-h.aan { opacity: 1; transform: none; }
.ov-h.voorbij { transform: translateY(-26px); }
.ov-h h3 { font-size: clamp(34px, 3.6vw, 54px); font-weight: var(--fw-head); letter-spacing: -.04em; color: var(--c-ink); margin: 0 0 12px; }
.ov-h h3 .kop-logo { margin-left: 0; height: .95em; }
.ov-h p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: var(--c-soft); margin: 0; max-width: 40ch; }
.ov-stippen { display: flex; gap: 8px; margin-top: 10px; }
.ov-stippen i { width: 26px; height: 4px; border-radius: 4px; background: var(--c-line); transition: background 400ms, width 400ms; }
.ov-stippen i.aan { background: var(--c-accent); width: 44px; }
.ov-stapel { position: relative; height: min(600px, 68vh); }
.ov-pola { position: absolute; left: 50%; top: 50%; width: min(360px, 78%); margin: 0; padding: 12px 12px 56px; background: #fff; border-radius: 4px;
box-shadow: 0 30px 60px -30px rgba(23, 26, 36, .5), 0 2px 6px rgba(23, 26, 36, .08);
transform: translate(calc(-50% + var(--x)), -50%) rotate(var(--r)); transition: transform 900ms cubic-bezier(.2, 1.2, .35, 1), opacity 350ms; }
.ov-pola:not(.op) { opacity: 0; transform: translate(calc(-50% + var(--x) + 40px), -170%) rotate(calc(var(--r) * -3)); }
.ov-pola img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.ov-pola figcaption { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-family: var(--font-script); font-size: 28px; color: var(--c-ink); }
.ov-waarden { position: relative; overflow: hidden; border-radius: var(--r-band); padding: clamp(46px, 7vw, 110px) clamp(24px, 6vw, 100px); }
.ov-waarden .h2 { position: relative; color: #fff; margin: 0 0 clamp(26px, 4vw, 50px); }
.ov-waarden ul { position: relative; list-style: none; margin: 0; padding: 0; }
.ov-waarden li { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px 40px; align-items: baseline; padding: clamp(20px, 2.6vw, 34px) 0; border-top: 1px solid rgba(255, 255, 255, .16); opacity: .28; transition: opacity 500ms var(--ease-out); }
.ov-waarden li.aan { opacity: 1; }
.ov-waarden li b { font-size: clamp(30px, 4.2vw, 64px); font-weight: var(--fw-head); letter-spacing: -.045em; line-height: 1.02; color: #fff; }
.ov-waarden li span { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--c-on-dark-soft); }
.lid-leeg { background: linear-gradient(150deg, var(--c-dark-1), var(--c-dark-3)); }
.lid-leeg em { font-family: var(--font-script); font-style: normal; font-weight: 400; font-size: 64px; color: #fff; }
@media (max-width: 860px) {
.ov-raster { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; gap: 22px; padding-top: 104px; padding-bottom: 26px; }
.ov-plek { height: 100%; min-height: 0; }
.ov-tekst .h-statement { margin-bottom: 10px; }
.ov-motto { bottom: 76px; }
.ov-open .scroll-tip { display: none; }
.ov-verhaal { height: 400vh; }
.ov-verhaal-pin { align-items: flex-start; padding-top: 96px; }
.ov-verhaal-raster { grid-template-columns: 1fr; gap: 10px; }
.ov-stapel { order: -1; height: 40vh; }
.ov-pola { width: min(230px, 62%); padding: 8px 8px 38px; }
.ov-pola figcaption { font-size: 22px; bottom: 8px; }
.ov-hst { margin-top: 16px; min-height: 200px; }
.ov-waarden li { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ov-pola, .ov-h { transition: none; } }
.over-script { clip-path: none; opacity: 0; transform-origin: 40% 60%; will-change: transform, opacity, filter; }
.over-script .grad { padding-right: .06em; }
.over-zwier { left: 0; right: auto; width: 100%; bottom: -.12em; height: .22em; }
.over-zwier path { stroke-width: 6; vector-effect: non-scaling-stroke; }
.hk.hk-web { height: auto; }
.hk-web .hk-pin { position: relative; height: 100vh; height: 100svh; min-height: 620px; }
.wb-kop { display: grid; }
.wb-t { grid-area: 1 / 1; transition: opacity 450ms var(--ease-out), transform 600ms var(--ease-out); }
.wb-t .h-statement { margin-bottom: 0; }
.wb-t .lead { margin: 12px auto 0; max-width: 46ch; }
.wb-t-b, .wb-t-c { opacity: 0; transform: translateY(16px); pointer-events: none; }
.hk-web.traag .wb-t-a, .hk-web.snel .wb-t-a, .hk-web.snel .wb-t-c { opacity: 0; transform: translateY(-16px); }
.hk-web.traag:not(.snel) .wb-t-c { opacity: 1; transform: none; }
.hk-web.snel .wb-t-b { opacity: 1; transform: none; pointer-events: auto; }
.wb-balk span { display: flex; align-items: center; gap: 8px; }
.wb-draai { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #c9cfdc; border-top-color: var(--c-accent); animation: wb-draai .8s linear infinite; font-style: normal; }
.hk-web.snel .wb-draai { animation: none; border-color: #2fa866; background: #2fa866; }
@keyframes wb-draai { to { transform: rotate(360deg); } }
.wb-klok { margin-left: auto; padding: 4px 10px; border-radius: 8px; background: #fff; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--c-ink); transition: color 300ms, background 300ms; }
.hk-web.traag .wb-klok { color: #fff; background: var(--c-danger); }
.hk-web.snel .wb-klok { color: #fff; background: #2fa866; }
.wb-laad { height: 3px; background: #eef0f4; }
.wb-laad i { display: block; height: 100%; width: 0; background: var(--c-accent); }
.hk-web.traag .wb-laad i { background: var(--c-danger); }
.hk-web.snel .wb-laad i { width: 100% !important; background: #2fa866; transition: width 300ms; }
.hk-web:not(.snel) .wb-el { animation: wb-schim 1.4s ease-in-out infinite; }
@keyframes wb-schim { 50% { opacity: .55; } }
.wb-browser { transition: opacity 400ms, transform 500ms var(--ease-out); }
.hk-web.weg .wb-browser { opacity: 0; transform: scale(.94) translateY(20px); }
.wb-onder { opacity: 0; transition: opacity 500ms 300ms; }
.hk-web.snel .wb-onder { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .wb-draai, .hk-web .wb-el { animation: none !important; } }
@media (min-width: 961px) {
.hk-web .hk-pin { padding-top: 100px; padding-bottom: 20px; }
.hk-web .wb-toneel { width: min(820px, 80vw, calc((100vh - 400px) * 1.65)); }
.hk-web .wb-kop .h-statement { font-size: clamp(30px, min(3.8vw, 5.6vh), 60px); }
.hk-web .wb-onder { margin-top: clamp(30px, 6vh, 64px); }
}
.hk.hk-social, .hk.hk-foto { height: auto; }
.hk-social .hk-pin, .hk-foto .hk-pin { position: relative; height: 100vh; height: 100svh; min-height: 620px; }
.hk-social .sf-vak i, .hk-social .sf-week { transition-duration: 450ms; }
@media (min-width: 961px) {
.hk-web .wb-scores { left: auto; right: calc(100% + 22px); top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; gap: 12px; }
.hk-web .wb-score { width: 92px; height: 92px; }
.hk-web .wb-score b { font-size: 24px; }
.hk-web .wb-mobiel { bottom: -4%; }
}
@media (max-width: 960px) { .hk-web .wb-onder { margin-top: 64px; } }
.pveld.pv-start .zl:not(.geland) { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(calc(var(--s) * 1.9)); transition: none; }
.pveld.pv-start .zl.geland { animation: pv-land 520ms cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pv-land { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(calc(var(--s) * 1.9)); } 60% { opacity: .5; } 100% { opacity: .16; transform: translate(-50%, -50%) rotate(var(--r)) scale(var(--s)); } }
.pveld.pv-start .pveld-kop > * { opacity: 0; filter: blur(12px); transform: scale(1.06); transition: opacity 600ms var(--ease-out), filter 700ms var(--ease-out), transform 800ms var(--ease-out); }
.pveld.pv-start.pv-kop .pveld-kop > * { opacity: 1; filter: none; transform: none; }
.pveld.pv-start.pv-kop .pveld-kop .lead { transition-delay: 350ms; }
.pv-meldingen { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pv-m { --hk: var(--c-accent); position: absolute; display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; width: min(320px, 80vw); padding: 12px 16px 12px 12px; border-radius: 20px; text-decoration: none;
background: rgba(255, 255, 255, .82); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 24px 50px -24px rgba(23, 26, 36, .45), 0 0 0 1px rgba(255, 255, 255, .7) inset;
opacity: 0; transform: translateY(-18px) scale(.94); transition: opacity 350ms, transform 600ms cubic-bezier(.2, 1.4, .4, 1); }
.pv-m.aan { opacity: 1; transform: none; pointer-events: auto; }
.pv-m.weg { opacity: 0; transform: translateY(10px) scale(.97); transition: opacity 500ms, transform 500ms; }
.pv-m.pl-a { left: 6%; top: 24%; } .pv-m.pl-b { right: 6%; top: 46%; } .pv-m.pl-c { left: 10%; bottom: 10%; }
.pv-m-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--hk); display: flex; align-items: center; justify-content: center; }
.pv-m-ic img { width: 72%; max-height: 60%; object-fit: contain; filter: brightness(0) invert(1); }
.pv-m-kop { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.pv-m-kop b { color: var(--c-ink); } .pv-m-kop em { font-style: normal; color: var(--c-soft); }
.pv-m-zin { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 2px; font-size: 13.5px; line-height: 1.3; color: var(--c-ink); }
.pv-m-zin strong { font-size: 22px; font-weight: 900; letter-spacing: -.03em; color: var(--hk); }
.pv-m-zin svg { width: 20px; height: 20px; }
.pv-m-zin > span { flex-basis: 100%; color: var(--c-soft); }
@media (max-width: 960px) {
.pv-m { width: min(270px, 78vw); }
.pv-m.pl-a { left: 16px; top: 96px; } .pv-m.pl-b { right: 16px; left: auto; top: auto; bottom: 14px; } .pv-m.pl-c { left: 16px; top: auto; bottom: 14px; }
}
@media (min-width: 961px) { .pv-m.pl-a { left: 4%; top: 17%; } .pv-m.pl-b { right: 4%; top: 62%; } .pv-m.pl-c { left: 5%; bottom: 6%; } }
.hk.hk-tijd { height: auto; }
.hk-tijd .hk-pin { position: relative; height: 100vh; height: 100svh; min-height: 640px; display: flex; align-items: center; padding-top: 70px; }
.hk-tijd.na .hk-a { opacity: 0; transform: translateY(-24px); }
.hk-tijd.na .hk-b { opacity: 1; transform: none; pointer-events: auto; }
.hk-tijd .hk-a .h-statement { margin: 0; }
.sx-toneel { position: relative; display: flex; justify-content: center; align-items: center; }
.sx-teller { position: absolute; z-index: 3; top: 6%; left: 2%; padding: 9px 16px; border-radius: 999px; background: var(--c-ink); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 14px 30px -14px rgba(23, 26, 36, .6); transition: opacity 400ms, transform 400ms; }
.sx-teller b { font-variant-numeric: tabular-nums; }
.hk-sx.na .sx-teller { opacity: 0; transform: translateY(-10px); }
.sx-tel { width: min(320px, 72vw); aspect-ratio: 9 / 18.5; max-height: 74vh; border-radius: 44px; border: 10px solid #12162a; background: #fff; overflow: hidden; box-shadow: 0 40px 80px -36px rgba(23, 26, 36, .6); }
.sx-scherm { position: relative; height: 100%; overflow: hidden; }
.sx-feed { will-change: transform; }
.sx-post { padding: 12px 12px 14px; border-bottom: 1px solid #eef0f4; }
.sx-pk { display: flex; align-items: center; gap: 8px; }
.sx-pk i { width: 26px; height: 26px; border-radius: 50%; background: #dfe2ea; flex: none; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 10px; font-weight: 800; color: #fff; }
.sx-pk em { width: 40%; height: 8px; border-radius: 4px; background: #e6e8ee; }
.sx-pb { display: block; margin-top: 10px; aspect-ratio: 1; border-radius: 6px; background: hsl(calc(210 + var(--t, 0) * 25) 12% calc(86% - var(--t, 0) * 3%)); }
.sx-pr { display: flex; gap: 6px; margin-top: 10px; } .sx-pr em { width: 34%; height: 7px; border-radius: 4px; background: #e6e8ee; } .sx-pr em.k { width: 18%; }
.sx-jouw .sx-pk i { background: var(--c-accent); }
.sx-jouw .sx-pk b { font-size: 13px; color: var(--c-ink); }
.sx-foto { position: relative; overflow: hidden; }
.sx-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-hart { position: absolute; left: 50%; top: 50%; font-size: 84px; line-height: 1; color: #fff; text-shadow: 0 10px 30px rgba(0, 0, 0, .35); transform: translate(-50%, -50%) scale(0); opacity: 0; }
.hk-sx.like .sx-hart { animation: sx-hart 900ms cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes sx-hart { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 30% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 70% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0; } }
.sx-acties { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--c-ink); }
.sx-like { font-style: normal; font-size: 18px; color: #c5c9d3; transition: color 300ms, transform 400ms cubic-bezier(.2, 1.6, .4, 1); }
.hk-sx.like .sx-like { color: #e0245e; transform: scale(1.2); }
.sx-acties b { font-variant-numeric: tabular-nums; }
.sx-reactie { display: block; margin-top: 6px; font-size: 12.5px; color: var(--c-soft); opacity: 0; transform: translateY(6px); transition: opacity 400ms 500ms, transform 400ms 500ms; }
.sx-reactie b { color: var(--c-ink); margin-right: 4px; }
.hk-sx.like .sx-reactie { opacity: 1; transform: none; }
.fx-toneel { position: relative; height: min(560px, 70vh); }
.fx-camera { position: absolute; z-index: 3; left: 50%; top: 4%; width: min(300px, 64vw); aspect-ratio: 1.3; transform: translateX(-50%); border-radius: 26px 26px 18px 18px;
background: linear-gradient(180deg, #2b2f3d 0 34%, #f3efe6 34% 100%); box-shadow: 0 30px 60px -30px rgba(23, 26, 36, .6), inset 0 -6px 0 rgba(0, 0, 0, .06); }
.fx-lens { position: absolute; left: 50%; top: 22%; width: 40%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(circle at 50% 50%, #0d1020 0 38%, #3a3f52 39% 54%, #1b1e2b 55% 66%, #d9d4c8 67% 100%); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5); }
.fx-lens i { position: absolute; left: 30%; top: 26%; width: 14%; height: 14%; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.fx-flits { position: absolute; left: 9%; top: 10%; width: 22%; height: 15%; border-radius: 6px; background: linear-gradient(135deg, #e9eef8, #b9c3d8); }
.fx-zoeker { position: absolute; right: 10%; top: 11%; width: 12%; height: 12%; border-radius: 4px; background: #11141f; }
.fx-streep { position: absolute; left: 0; right: 0; top: 72%; height: 7%; background: var(--c-accent); }
.fx-knop { position: absolute; right: 9%; top: 48%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: #cf5a4e; box-shadow: 0 3px 0 #9f3f35; transition: transform 120ms; }
.hk-fx.klik .fx-knop { transform: translateY(3px); box-shadow: none; }
.fx-sleuf { position: absolute; left: 14%; right: 14%; bottom: 6%; height: 5px; border-radius: 3px; background: #2b2f3d; }
.fx-licht { position: fixed; inset: 0; z-index: 50; background: #fff; opacity: 0; pointer-events: none; }
.hk-fx.klik .fx-licht { animation: fx-flits 450ms ease-out; }
@keyframes fx-flits { 0% { opacity: 0; } 15% { opacity: .85; } 100% { opacity: 0; } }
.fx-pola { position: absolute; left: 50%; margin: 0; width: min(230px, 50vw); padding: 10px 10px 46px; background: #fff; border-radius: 3px; box-shadow: 0 30px 60px -30px rgba(23, 26, 36, .55), 0 2px 6px rgba(23, 26, 36, .08); }
.fx-pola img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.fx-hoofd { z-index: 2; top: calc(4% + min(300px, 64vw) / 1.3 * .94); transform: translate(-50%, calc(-100% + var(--uit, 0) * 100%)) rotate(calc(var(--uit, 0) * 2deg)); clip-path: inset(calc((1 - var(--uit, 0)) * 100%) 0 0 0); }
.fx-beeld { position: relative; display: block; }
.fx-waas { position: absolute; inset: 0; background: linear-gradient(160deg, #9aa4b6, #5e6880); opacity: var(--waas, 1); }
.fx-hoofd figcaption { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-family: var(--font-script); font-size: 26px; color: var(--c-ink); opacity: var(--pen, 0); }
.fx-w1, .fx-w2 { z-index: 1; top: 40%; opacity: 0; transform: translateX(-50%) rotate(0deg) scale(.9); transition: transform 900ms cubic-bezier(.2, 1.2, .35, 1), opacity 400ms; }
.hk-fx.waaier .fx-w1 { opacity: 1; transform: translateX(calc(-50% - 62%)) translateY(4%) rotate(var(--r)); }
.hk-fx.waaier .fx-w2 { opacity: 1; transform: translateX(calc(-50% + 62%)) translateY(2%) rotate(var(--r)); transition-delay: 120ms; }
.fx-w1 img, .fx-w2 img { aspect-ratio: 1; }
.ax-toneel { position: relative; height: min(520px, 66vh); }
.ax-teller { position: absolute; z-index: 4; left: 50%; top: -2%; transform: translateX(-50%); padding: 9px 16px; border-radius: 999px; background: var(--c-ink); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; transition: background 400ms; }
.hk-ax.een .ax-teller { background: #2fa866; }
.ax-app { position: absolute; z-index: 2; left: var(--x); top: var(--y); display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 14px; background: #fff; font-size: 14px; font-weight: 700; color: var(--c-ink);
box-shadow: 0 16px 30px -16px rgba(23, 26, 36, .45); opacity: 0; transform: rotate(var(--r)) scale(.6); transition: opacity 300ms, transform 500ms cubic-bezier(.2, 1.5, .4, 1); }
.ax-app.aan { opacity: 1; transform: rotate(var(--r)); }
.ax-app i { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 14px; font-weight: 900; color: #fff; }
.ax-venster { position: absolute; z-index: 3; left: 50%; top: 50%; width: min(400px, 86%); border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 40px 80px -36px rgba(23, 26, 36, .6), 0 0 0 1px rgba(23, 26, 36, .05);
opacity: 0; transform: translate(-50%, -50%) scale(.7); transition: opacity 400ms, transform 700ms cubic-bezier(.2, 1.4, .4, 1); }
.hk-ax.een .ax-venster { opacity: 1; transform: translate(-50%, -50%); }
.ax-balk { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: var(--c-accent); }
.ax-balk i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.ax-balk b { margin-left: 10px; color: #fff; font-size: 14px; }
.ax-inhoud { display: grid; gap: 8px; padding: 16px; }
.ax-regel { display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #f4f6fb; font-size: 14px; opacity: 0; transform: translateY(10px); transition: opacity 350ms, transform 450ms var(--ease-out); }
.ax-regel em { font-style: normal; color: var(--c-soft); } .ax-regel b { color: var(--c-ink); }
.ax-regel i { width: 20px; height: 20px; border-radius: 50%; background: #2fa866; position: relative; }
.ax-regel i::after { content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.hk-ax.een .ax-regel { opacity: 1; transform: none; }
.hk-ax.een .ax-regel:nth-child(2) { transition-delay: 150ms; } .hk-ax.een .ax-regel:nth-child(3) { transition-delay: 300ms; } .hk-ax.een .ax-regel:nth-child(4) { transition-delay: 450ms; }
@media (max-width: 960px) {
.hk-tijd .hk-pin { align-items: flex-start; padding-top: 96px; min-height: 0; }
.hk-tijd .hk-raster { grid-template-columns: 1fr; gap: 6px; }
.hk-tijd .hk-wissel { min-height: 150px; }
.hk-tijd .hk-b .lead { display: none; }
.hk-tijd .h-statement { font-size: clamp(30px, 8.4vw, 40px); }
.sx-tel { width: min(230px, 60vw); max-height: 52vh; border-width: 8px; border-radius: 34px; }
.sx-teller { top: auto; bottom: 4%; left: 0; font-size: 12.5px; }
.fx-toneel { height: 54vh; }
.fx-camera { width: min(220px, 56vw); }
.fx-pola { width: min(160px, 40vw); padding: 7px 7px 32px; }
.fx-hoofd { top: calc(4% + min(220px, 56vw) / 1.3 * .94); }
.fx-hoofd figcaption { font-size: 20px; bottom: 6px; }
.ax-toneel { height: 52vh; margin-top: 14px; }
.ax-app { font-size: 12px; padding: 6px 10px 6px 6px; } .ax-app i { width: 24px; height: 24px; }
.ax-regel { padding: 9px 12px; font-size: 13px; grid-template-columns: 64px 1fr auto; }
}
.dkop { padding: 150px 0 40px; text-align: center; }
.dkop .h-statement { font-size: clamp(44px, 6vw, 96px); letter-spacing: -.05em; line-height: 1; color: var(--c-ink); margin: 0; }
.dkop .h-statement .script { font-family: var(--font-script); font-weight: 400; letter-spacing: 0; font-size: 1.15em; color: var(--c-accent); }
.dkop .lead { max-width: 46ch; margin: 18px auto 0; }
.dstapel { position: relative; padding: 10px clamp(12px, 3vw, 40px) 12vh; }
.dkaart { position: sticky; top: calc(90px + var(--i) * 14px); height: calc(100vh - 130px); min-height: 520px; max-width: 1400px; margin: 0 auto 6vh; border-radius: var(--r-band, 36px); overflow: hidden;
box-shadow: 0 -20px 60px -30px rgba(23, 26, 36, .45); transform-origin: 50% 0; will-change: transform; }
.dkaart > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dkaart-blauw { position: absolute; inset: 0; background: linear-gradient(75deg, rgba(36, 57, 122, .95) 0%, rgba(60, 88, 164, .82) 38%, rgba(60, 88, 164, .15) 75%, rgba(60, 88, 164, 0) 100%); }
.dkaart-in { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; max-width: 560px; padding: 0 clamp(26px, 6vw, 90px); color: #fff; }
.dkaart-in .h-statement { font-size: clamp(38px, 4.6vw, 72px); letter-spacing: -.045em; line-height: 1; color: #fff; margin: 0; }
.dkaart-in .lead { color: var(--c-on-dark-soft); margin: 18px 0 0; }
.dkaart-in ul { list-style: none; margin: 22px 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dkaart-in li { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); font-size: 14px; font-weight: 600; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dkaart-in .btn { align-self: flex-start; }
@media (max-width: 960px) {
.dkop { padding: 120px 0 24px; }
.dkaart { top: calc(84px + var(--i) * 8px); height: calc(100svh - 110px); min-height: 0; }
.dkaart-blauw { background: linear-gradient(0deg, rgba(36, 57, 122, .96) 0%, rgba(60, 88, 164, .85) 45%, rgba(60, 88, 164, .1) 85%); }
.dkaart-in { justify-content: flex-end; padding: 0 22px 30px; }
.dkaart-in ul { margin: 16px 0 20px; }
.dkaart-in li { font-size: 12.5px; padding: 6px 11px; }
}
html { scroll-behavior: smooth; }
.dkaart { position: relative; top: auto; height: min(82vh, 760px); min-height: 520px; margin: 0 auto 28px; scroll-margin-top: 100px; transform: none !important; filter: none !important; box-shadow: 0 30px 70px -40px rgba(23, 26, 36, .5); }
.dstapel { padding-bottom: 60px; }
.dzij { position: fixed; z-index: 40; left: 0; top: 50%; transform: translate(-110%, -50%); display: flex; flex-direction: column; gap: 6px; transition: transform 500ms var(--ease-out); }
.dzij.zichtbaar { transform: translate(0, -50%); }
.dzij a { display: flex; align-items: center; gap: 10px; padding: 11px 16px 11px 14px; border-radius: 0 14px 14px 0; background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
box-shadow: 0 10px 24px -14px rgba(23, 26, 36, .45); color: var(--c-ink); text-decoration: none; font-size: 14px; font-weight: 700; transform: translateX(calc(-100% + 40px)); transition: transform 400ms var(--ease-out), background 300ms, color 300ms; }
.dzij a i { flex: none; order: 2; width: 10px; height: 10px; border-radius: 50%; background: #cfd5e6; transition: background 300ms; }
.dzij a:hover, .dzij a.aan { transform: none; }
.dzij a.aan { background: var(--c-accent); color: #fff; }
.dzij a.aan i { background: #fff; }
@media (max-width: 960px) {
.dkaart { height: 78svh; min-height: 0; margin-bottom: 18px; }
.dzij { left: 50%; top: auto; bottom: 14px; flex-direction: row; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 14px 30px -16px rgba(23, 26, 36, .5); transform: translate(-50%, 140%); max-width: calc(100vw - 100px); overflow-x: auto; }
.dzij.zichtbaar { transform: translate(-50%, 0); }
.dzij a { transform: none; padding: 7px 11px; border-radius: 999px; background: transparent; box-shadow: none; font-size: 12px; white-space: nowrap; }
.dzij a i { display: none; }
}
@media (max-width: 960px) { .dzij { left: 14px; transform: translateY(140%); max-width: calc(100vw - 104px); } .dzij.zichtbaar { transform: none; } }
@media (min-width: 961px) {
.dstapel { padding-left: 76px; padding-right: 40px; }
.dzij { gap: 8px; }
.dzij a { transform: none; writing-mode: vertical-rl; rotate: 180deg; padding: 18px 11px; border-radius: 14px 0 0 14px; gap: 10px; font-size: 13.5px; letter-spacing: .01em; }
.dzij a i { order: 0; }
.dzij a:hover { background: #fff; color: var(--c-accent); padding-left: 15px; }
.dzij a.aan { padding-left: 15px; }
}
.pveld.pv-start .pveld-kop > * { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
.an-kaartje { margin-top: 10px; padding: 18px 20px; border-radius: 18px; background: #fff; color: var(--c-ink); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .5); }
.an-kaartje-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--c-line); }
.an-kaartje-kop img { height: 22px; width: auto; }
.an-kaartje-kop span { font-size: 13.5px; font-weight: 600; color: var(--c-soft); }
.an-kaartje dl { margin: 12px 0 0; display: grid; gap: 8px; }
.an-kaartje dl > div { display: grid; grid-template-columns: 64px 1fr; gap: 12px; font-size: 14px; line-height: 1.5; }
.an-kaartje dt { color: var(--c-soft); }
.an-kaartje dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.ckop-knoppen { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.dkeus { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; max-width: 1180px; margin: clamp(30px, 5vh, 54px) auto 0; text-align: left; }
.dkeus a { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 10px 10px 16px; border-radius: 22px; background: #fff; color: var(--c-ink); text-decoration: none;
box-shadow: 0 18px 36px -24px rgba(23, 26, 36, .45), 0 0 0 1px rgba(23, 26, 36, .04); transition: transform 400ms cubic-bezier(.2, 1.4, .4, 1), box-shadow 300ms; }
.dkeus a:hover { transform: translateY(-6px); box-shadow: 0 26px 46px -24px rgba(23, 26, 36, .5), 0 0 0 1px rgba(60, 88, 164, .25); }
.dkeus-foto { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; }
.dkeus-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.dkeus-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(60, 88, 164, 0) 40%, rgba(36, 57, 122, .55)); }
.dkeus a:hover .dkeus-foto img { transform: scale(1.06); }
.dkeus b { padding: 0 6px; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.dkeus em { position: absolute; right: 16px; bottom: 15px; font-style: normal; color: var(--c-accent); transition: transform 300ms; }
.dkeus a:hover em { transform: translateY(3px); }
.dstapel { padding-left: clamp(12px, 3vw, 40px) !important; padding-right: clamp(12px, 3vw, 40px) !important; }
@media (max-width: 960px) {
.dkeus { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.dkeus a:last-child { grid-column: span 2; flex-direction: row; align-items: center; }
.dkeus a:last-child .dkeus-foto { width: 42%; flex: none; }
.dkeus b { font-size: 14px; }
}
.dscroll { height: 420vh; }
.dscroll-kop { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.ds-naam { font-size: clamp(28px, 3.3vw, 50px); }
.ds-post { display: flex; flex-direction: column; padding: 30px 12px 12px; }
.ds-post-kop { display: flex; align-items: center; gap: 8px; }
.ds-post-kop i { width: 30px; height: 30px; border-radius: 50%; background: var(--c-accent); color: #fff; font-style: normal; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ds-post-kop b { font-size: 13px; color: var(--c-ink); } .ds-post-kop em { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--c-soft); }
.ds-post-foto { position: relative; display: block; margin-top: 10px; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; }
.ds-post-foto img { width: 100%; height: 100%; object-fit: cover; }
.ds-post-hart { position: absolute; left: 50%; top: 50%; font-size: 72px; color: #fff; text-shadow: 0 10px 26px rgba(0, 0, 0, .35); transform: translate(-50%, -50%) scale(0); opacity: 0; }
.s0.aan .ds-post-hart { animation: sx-hart 1s 700ms cubic-bezier(.2, 1.4, .4, 1) both; }
.ds-post-acties { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--c-ink); }
.ds-post-acties i { font-style: normal; font-size: 17px; color: #c5c9d3; transition: color 300ms 1s; }
.s0.aan .ds-post-acties i { color: #e0245e; }
.ds-post-reactie { display: block; margin-top: 6px; font-size: 12.5px; color: var(--c-soft); opacity: 0; transform: translateY(6px); transition: opacity 400ms, transform 400ms; }
.ds-post-reactie b { color: var(--c-ink); margin-right: 4px; }
.s0.aan .ds-post-reactie { opacity: 1; transform: none; transition-delay: 1.3s; } .s0.aan .ds-post-reactie.r2 { transition-delay: 1.8s; }
.ds-cam-toneel { position: relative; width: min(340px, 100%); height: 100%; }
.ds-cam { top: 2%; width: 100%; max-width: 300px; }
.ds-cam-pola { position: absolute; z-index: 2; left: 50%; top: 28%; width: 62%; margin: 0; padding: 9px 9px 40px; background: #fff; border-radius: 3px; box-shadow: 0 30px 60px -30px rgba(5, 10, 35, .7);
transform: translate(-50%, -60%) rotate(0deg); clip-path: inset(100% 0 0 0); transition: transform 900ms 300ms cubic-bezier(.2, 1, .3, 1), clip-path 900ms 300ms cubic-bezier(.2, 1, .3, 1); }
.ds-cam-pola img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(.2) brightness(1.3); transition: filter 2s 1.1s var(--ease-out); }
.ds-cam-pola figcaption { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-family: var(--font-script); font-size: 22px; color: var(--c-ink); opacity: 0; transition: opacity 500ms 2.6s; }
.s1.aan .ds-cam-pola { transform: translate(-50%, 0) rotate(3deg); clip-path: inset(0 0 0 0); }
.s1.aan .ds-cam-pola img { filter: none; }
.s1.aan .ds-cam-pola figcaption { opacity: 1; }
.s1 .fx-camera { z-index: 3; }
.ds-reel-ring { position: absolute; z-index: 3; left: 50%; top: 42%; width: 74px; height: 74px; margin-left: -37px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .9); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 30px; font-weight: 900; opacity: 0; }
.s2.aan .ds-reel-ring { animation: ds-ring 1.6s 200ms ease-out both; }
@keyframes ds-ring { 0% { opacity: 0; transform: scale(.6); } 20% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }
.ds-klok { margin-left: auto; font-style: normal; padding: 3px 9px; border-radius: 7px; background: #2fa866; color: #fff; font-size: 11px; font-weight: 800; opacity: 0; transform: scale(.6); transition: opacity 300ms 700ms, transform 500ms 700ms cubic-bezier(.2, 1.5, .4, 1); }
.s3.aan .ds-klok { opacity: 1; transform: none; }
.ds-apps { position: relative; width: min(420px, 100%); }
.ds-apps-teller { display: table; margin: 0 auto 18px; padding: 8px 15px; border-radius: 999px; background: #2fa866; color: #fff; font-size: 13.5px; font-weight: 700; opacity: 0; transform: translateY(-8px); transition: opacity 400ms 200ms, transform 400ms 200ms; }
.ds-apps-venster { position: relative; left: auto; top: auto; width: 100%; transform: scale(.8); }
.s-apps.aan .ds-apps-teller { opacity: 1; transform: none; }
.s-apps.aan .ds-apps-venster { opacity: 1; transform: none; }
.s-apps.aan .ax-regel { opacity: 1; transform: none; }
.s-apps.aan .ax-regel:nth-child(1) { transition-delay: 300ms; } .s-apps.aan .ax-regel:nth-child(2) { transition-delay: 450ms; } .s-apps.aan .ax-regel:nth-child(3) { transition-delay: 600ms; } .s-apps.aan .ax-regel:nth-child(4) { transition-delay: 750ms; }
@media (max-width: 960px) {
.ds-cam { max-width: 200px; }
.ds-cam-toneel { width: 220px; }
.ds-cam-pola figcaption { font-size: 16px; }
.ds-apps .ax-regel { padding: 7px 10px; font-size: 12px; }
}
.ds-cam-pola { top: calc(min(300px, 100%) / 1.3 - 26px); padding-bottom: 30px; }
@media (max-width: 960px) { .ds-cam-pola { top: calc(200px / 1.3 - 18px); width: 54%; padding-bottom: 20px; } }
.fx-hoofd { padding-bottom: 34px; }
.nav-links a.nav-login { display: inline-flex; align-items: center; gap: 7px; margin-left: 6px; padding: 11px 16px; border-radius: var(--r-pill, 999px); color: var(--c-accent); font-weight: 700; box-shadow: inset 0 0 0 1.5px rgba(60, 88, 164, .35); }
.nav-links a.nav-login svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.nav-links a.nav-login:hover { background: var(--c-accent-soft, #eef1f9); box-shadow: inset 0 0 0 1.5px var(--c-accent); }
@media (max-width: 960px) { .nav-links a.nav-login { margin: 8px 0 0; justify-content: center; } }
.dkeus { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; max-width: 1240px; margin-top: clamp(40px, 6vh, 70px); padding-bottom: 20px; }
.dkeus a { flex: 0 0 auto; width: clamp(170px, 17vw, 230px); margin: 0 -6px; padding: 10px 10px 0; border-radius: 3px; gap: 0; background: #fff;
box-shadow: 0 24px 40px -26px rgba(23, 26, 36, .55), 0 2px 6px rgba(23, 26, 36, .08); transform: translateY(var(--y)) rotate(var(--r)); transition: transform 500ms cubic-bezier(.2, 1.4, .4, 1), box-shadow 300ms; }
.dkeus a:hover { transform: translateY(-12px) rotate(0deg) scale(1.06); z-index: 3; box-shadow: 0 34px 50px -26px rgba(23, 26, 36, .6), 0 2px 6px rgba(23, 26, 36, .08); }
.dkeus-foto { aspect-ratio: 1; border-radius: 1px; }
.dkeus-foto::after { display: none; }
.dkeus b { display: block; padding: 10px 4px 14px; text-align: center; font-family: var(--font-script); font-weight: 400; font-size: clamp(24px, 2vw, 30px); letter-spacing: 0; line-height: 1; color: var(--c-ink); white-space: nowrap; }
.dkeus a:hover b { color: var(--c-accent); }
.dkeus em { display: none; }
.dkeus-tape { position: absolute; z-index: 2; left: 50%; top: -12px; width: 76px; height: 24px; transform: translateX(-50%) rotate(calc(var(--r) * -1.4)); background: rgba(232, 220, 192, .78); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
@media (max-width: 960px) {
.dkeus { display: flex; gap: 18px 0; }
.dkeus a { width: 46%; margin: 0 -3px; }
.dkeus a:last-child { grid-column: auto; flex-direction: column; }
.dkeus a:last-child .dkeus-foto { width: auto; }
.dkeus b { font-size: 22px; padding: 8px 2px 10px; }
}
@media (min-width: 961px) {
.nav-links a.nav-login { width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: 50%; }
.nav-links a.nav-login span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav-links a.nav-login svg { width: 19px; height: 19px; }
}
@media (min-width: 961px) { .nav-links a.nav-cta { order: 1; } .nav-links a.nav-login { order: 2; margin-left: 6px; } }
.dzin { max-width: 1100px; margin: clamp(26px, 4vh, 44px) auto 0; font-size: clamp(26px, 3vw, 46px); font-weight: 700; letter-spacing: -.035em; line-height: 1.5; color: var(--c-soft); }
.dpil { display: inline-flex; align-items: center; gap: .3em; padding: .08em .5em .08em .1em; margin: 0 .05em; border-radius: 999px; background: #fff; color: var(--c-ink); text-decoration: none; vertical-align: middle; line-height: 1.25;
box-shadow: 0 10px 24px -16px rgba(23, 26, 36, .5), 0 0 0 1px rgba(23, 26, 36, .06); transition: background 300ms, color 300ms, transform 400ms cubic-bezier(.2, 1.4, .4, 1); }
.dpil-foto { width: 1.2em; height: 1.2em; border-radius: 50%; overflow: hidden; flex: none; transition: width 400ms cubic-bezier(.2, 1.2, .4, 1); }
.dpil-foto img { width: 100%; height: 100%; object-fit: cover; }
.dpil:hover { background: var(--c-accent); color: #fff; transform: translateY(-3px); }
.dpil:hover .dpil-foto { width: 2em; border-radius: 999px; }
.dzin-rest { color: var(--c-accent); }
@media (max-width: 960px) { .dzin { font-size: 24px; line-height: 1.75; } }
.dzin { font-size: clamp(22px, 2.4vw, 36px); font-weight: 600; line-height: 1.7; max-width: 980px; }
.dpil { font-weight: 700; padding: .1em .6em .1em .12em; }
@media (max-width: 960px) { .dzin { font-size: 20px; line-height: 1.85; } }
@media (min-width: 961px) {
.nav-links a.nav-login { width: 44px; height: 44px; margin-left: 8px; background: var(--c-accent-soft, #eef1f9); box-shadow: none; color: var(--c-accent); transition: background 250ms, color 250ms, transform 250ms; }
.nav-links a.nav-login svg { width: 18px; height: 18px; stroke-width: 2.2; stroke-linejoin: round; }
.nav-links a.nav-login:hover { background: var(--c-accent); color: #fff; box-shadow: none; transform: translateX(2px); }
}
.nav-links a.nav-login svg { stroke-linejoin: round; }
.blauwfoto > img { filter: none; }
.blauwfoto::after { display: none; }
.blauwfoto > figcaption, .blauwfoto > .ad-in { left: 12px; right: 12px; bottom: 12px; padding: 16px 18px; border-radius: 18px; color: var(--c-ink); background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 14px 30px -18px rgba(23, 26, 36, .45); }
.blauwfoto b { color: var(--c-ink); }
.blauwfoto figcaption span, .blauwfoto .ad-in > span { color: var(--c-soft); }
.blauwfoto em { color: var(--c-accent); }
.ad-tegel .ad-in { padding: 18px 20px; }
.dkaart-blauw { background: linear-gradient(75deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .88) 34%, rgba(255, 255, 255, .2) 66%, rgba(255, 255, 255, 0) 100%); }
.dkaart-in, .dkaart-in .h-statement { color: var(--c-ink); }
.dkaart-in .lead { color: var(--c-soft); }
.dkaart-in li { background: rgba(60, 88, 164, .08); border-color: rgba(60, 88, 164, .18); color: var(--c-accent); }
.dkaart-in .btn-wit { background: var(--c-accent); color: #fff; }
@media (max-width: 960px) { .dkaart-blauw { background: linear-gradient(0deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .9) 48%, rgba(255, 255, 255, 0) 80%); } }
.ds-reel > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vd-reel > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.igp { display: block; background: #fff; color: #0c1014; font-family: var(--font-sans); font-size: 12px; line-height: 1.35; text-align: left; }
.igp-kop { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.igp-av { flex: none; width: 30px; height: 30px; padding: 2px; border-radius: 50%; background: linear-gradient(45deg, #feda75, #fa7e1e 30%, #d62976 60%, #962fbf 80%, #4f5bd5); }
.igp-av i { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 50%; color: #fff; font-style: normal; font-size: 9px; font-weight: 800; text-transform: lowercase; }
.igp-naam { min-width: 0; line-height: 1.2; }
.igp-naam b { display: block; font-size: 12px; font-weight: 700; }
.igp-naam small { display: block; font-size: 10px; color: #737373; }
.igp-meer { margin-left: auto; display: flex; width: 18px; height: 18px; }
.igp svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
.igp-meer svg { fill: currentColor; stroke: none; }
.igp-foto { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #efefef; }
.igp-foto > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.igp-acties { display: flex; align-items: center; gap: 13px; padding: 9px 10px 5px; }
.igp-acties i { display: flex; width: 21px; height: 21px; }
.igp-acties .igp-bew { margin-left: auto; }
.igp-hart svg { transition: fill 300ms, stroke 300ms, transform 400ms cubic-bezier(.2, 1.6, .4, 1); }
.igp-hart.aan svg, .hk-sx.like .sx-jouw .igp-hart svg, .s0.aan .ds-post .igp-hart svg { fill: #ff3040; stroke: #ff3040; }
.hk-sx.like .sx-jouw .igp-hart svg { transform: scale(1.15); }
.s0.aan .ds-post .igp-hart svg { transition-delay: 1s; }
.igp-likes { display: block; padding: 0 10px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.igp-cap { margin: 3px 0 0; padding: 0 10px; font-size: 12px; color: #0c1014; }
.igp-cap b { font-weight: 700; margin-right: 3px; }
.igp-tijd { display: block; padding: 4px 10px 12px; font-size: 10px; color: #737373; }
.igp .sx-reactie, .igp .ds-post-reactie { padding: 0 10px; font-size: 12px; }
.sx-post.igp { padding: 0; border-bottom: 0; margin-bottom: 6px; }
.sx-jouw .igp-av { background: linear-gradient(45deg, #feda75, #fa7e1e 30%, #d62976 60%, #962fbf 80%, #4f5bd5); }
.ds-post { padding: 26px 0 0; justify-content: flex-start; }
.ds-post .igp-foto { margin: 0; border-radius: 0; }
.igr { position: absolute; inset: 0; z-index: 2; color: #fff; font-family: var(--font-sans); pointer-events: none; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.igr svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); }
.igr-top { position: absolute; top: 26px; left: 14px; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.igr-rechts { position: absolute; right: 9px; bottom: 64px; display: grid; gap: 13px; justify-items: center; }
.igr-rechts i { display: grid; justify-items: center; gap: 2px; font-style: normal; }
.igr-rechts i:nth-child(4) svg { fill: #fff; stroke: none; width: 20px; }
.igr-rechts small { font-size: 10px; font-weight: 600; }
.igr-plaat { width: 24px; height: 24px; border-radius: 6px; border: 2px solid #fff; background: linear-gradient(135deg, #3c58a4, #c8553d); }
.igr-onder { position: absolute; left: 12px; right: 50px; bottom: 16px; display: grid; gap: 6px; }
.igr-wie { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.igr-wie .igp-av { width: 26px; height: 26px; }
.igr-wie em { font-style: normal; font-size: 11px; font-weight: 600; padding: 3px 9px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 8px; }
.igr-cap { font-size: 12px; line-height: 1.35; }
.igr-audio { font-size: 10.5px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-reel-balk, .vd-balk { top: auto; bottom: 3px; left: 0; right: 0; height: 2px; border-radius: 0; z-index: 3; }
.vintro-raster { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.vintro-tekst .lead { margin: 20px 0 28px; max-width: 46ch; }
.vintro-tel { position: relative; justify-self: center; width: min(340px, 78vw); aspect-ratio: 9 / 16; border-radius: 40px; border: 10px solid #12162a; overflow: hidden; background: #000; box-shadow: 0 50px 90px -40px rgba(5, 10, 35, .6); }
.vintro-tel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vintro-geluid { position: absolute; z-index: 2; top: 16px; right: 16px; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--c-ink); font: 600 13px var(--font-sans); cursor: pointer; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); }
.vintro-geluid svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vintro-geluid .aan, .vintro-geluid[aria-pressed="true"] .uit { display: none; }
.vintro-geluid[aria-pressed="true"] .aan { display: inline; }
@media (max-width: 960px) { .vintro-raster { grid-template-columns: 1fr; } .vintro-tel { width: min(300px, 76vw); } }
.pola figcaption, .vpola figcaption, .kort-pola figcaption, .pv-pola figcaption, .ov-pola figcaption, .fx-hoofd figcaption, .ds-cam-pola figcaption { font-family: var(--font-sans); font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.fpola b { font-family: var(--font-sans); font-weight: 800; font-size: clamp(17px, 1.4vw, 20px); letter-spacing: -.02em; line-height: 1.2; }
.igp-naam b, .igp-naam small, .igr-wie b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 960px) {
.dscroll-beeld { height: 42vh; }
.ds-post { padding-top: 16px; }
.ds-post .igp { zoom: .6; }
.ds-reel .igr { zoom: .62; }
.vd-reel .igr { zoom: .7; }
.vintro { padding-block: 56px; }
.vintro-raster { gap: 28px; }
.vintro-tekst .lead { margin: 14px 0 20px; }
.vintro-tel { width: min(230px, 60vw); border-radius: 32px; border-width: 8px; }
.vintro-geluid { top: 10px; right: 10px; padding: 7px 11px; font-size: 12px; }
}
@media (max-width: 960px) {
.hero-intro .intro-foto { inset: 0; width: 100%; height: 100%; }
.hero-intro .intro-foto img { object-position: 50% 18%; }
.hero-intro .intro-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(244, 243, 240, .82) 58%, var(--c-bg) 72%); }
.hero-intro .intro-in { justify-content: flex-end; padding-bottom: max(28px, 5vh); }
.hero-intro .intro-logo { display: none; }
.hero-intro h1 { margin: 0; font-size: clamp(30px, 8.4vw, 38px); max-width: 13ch; }
.hero-intro .intro-sub { margin: 10px 0 18px; font-size: 15.5px; color: var(--c-ink); opacity: .75; max-width: 32ch; }
.hero-intro .knoppen { flex-wrap: nowrap; gap: 8px; }
.hero-intro .knoppen .btn { padding: 13px 16px; font-size: 14.5px; white-space: nowrap; }
}
.ds-score b { letter-spacing: -.04em; }
@media (max-width: 960px) { .ds-score { width: 62px; height: 62px; box-shadow: 0 14px 30px -12px rgba(5, 10, 35, .55), inset 0 0 0 4px #2fa866; } .ds-score.ds-geo { box-shadow: 0 14px 30px -12px rgba(5, 10, 35, .55), inset 0 0 0 4px var(--c-accent); } .ds-score b { font-size: 17px; } .ds-score small { font-size: 8.5px; } }
@media (max-width: 620px) {
.pkaarten:not(.swipe) { grid-template-columns: 1fr 1fr; gap: 10px; }
.pkaarten:not(.swipe) .pkaart { border-radius: 18px; }
.pkaarten:not(.swipe) .pkaart-beeld { aspect-ratio: 4 / 5; }
.pkaarten:not(.swipe) .pkaart-info { padding: 10px 12px 14px; }
.pkaarten:not(.swipe) .pkaart-chips { margin-bottom: 6px; gap: 4px; }
.pkaarten:not(.swipe) .pkaart-chips .pil { font-size: 10px; padding: 3px 7px; }
.pkaarten:not(.swipe) .pkaart-chips .pil:nth-child(n+2) { display: none; }
.pkaarten:not(.swipe) .pkaart-info b { font-size: 15px; line-height: 1.2; }
.pkaarten:not(.swipe) .pkaart-info > span:last-child { font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pkaarten:not(.swipe) .pk-melding { left: 6px; right: 6px; top: 6px; gap: 6px; padding: 6px 8px 6px 6px; border-radius: 11px; }
.pkaarten:not(.swipe) .pk-m-ic { width: 24px; height: 24px; border-radius: 6px; }
.pkaarten:not(.swipe) .pk-m-tekst b { font-size: 13px; }
.pkaarten:not(.swipe) .pk-m-tekst b svg { display: none; }
.pkaarten:not(.swipe) .pk-m-tekst small { font-size: 9.5px; }
.pkaarten:not(.swipe) .pkaart-logo img { width: 58%; }
}
@media (hover: none), (max-width: 960px) {
* { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.nav { background: rgba(255, 255, 255, .95); }
.grain.dark-card { -webkit-mask-image: none; mask-image: none; }
.pk-melding { background: rgba(255, 255, 255, .95); }
}
@media (max-width: 620px) {
.cform { gap: 12px; padding: 20px 16px; border-radius: 22px; }
.cform-kop { font-size: 28px; }
.cform-sub { margin: -6px 0 2px; font-size: 15px; }
.ktegels { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.ktegels legend { font-size: 15px; margin-bottom: 8px; }
.ktegel > span { flex-direction: row; align-items: center; gap: 0; padding: 8px 13px; border-radius: 999px; font-size: 13.5px; }
.ktegel i { display: none; }
.ktegel input:checked + span { transform: none; }
.cform-rij { gap: 12px; }
.cform-rij + .cform-rij { display: none; }
.cform label > span { font-size: 13px; margin-bottom: 4px; }
.cform input[type=text], .cform input[type=email], .cform textarea { padding: 11px 14px; border-radius: 12px; }
.cform textarea { min-height: 88px; }
.cform-knop { padding-block: 14px; }
.cform-klein { font-size: 12px; }
}
@media (max-width: 960px) {
.wie { height: 150vh; }
.wie-pin { top: 12svh; height: 76svh; }
}
.hero-intro .btn .kort { display: none; }
@media (max-width: 960px) { .hero-intro .btn .lang { display: none; } .hero-intro .btn .kort { display: inline; } }
.werkboek-form .kort { display: none; }
@media (max-width: 620px) {
.werkboek { position: relative; padding: 26px 20px 24px; gap: 0; }
.werkboek .h2 { max-width: 58%; font-size: 30px; }
.werkboek .lead { margin: 12px 0 16px; font-size: 15px; line-height: 1.5; }
.boek3d { position: absolute; top: 18px; right: 14px; width: 112px; margin: 0; z-index: 1; }
.boek-los { display: none; }
.werkboek-lijst { grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-bottom: 18px; }
.werkboek-lijst li { align-items: flex-start; gap: 7px; font-size: 13px; line-height: 1.3; }
.werkboek-lijst li::before { width: 16px; height: 16px; background-size: 11px; margin-top: 1px; }
.werkboek-form { flex-direction: row; border-radius: var(--r-pill); padding: 5px; }
.werkboek-form input { padding: 0 12px; font-size: 16px; }
.werkboek-form .btn { padding: 12px 18px; font-size: 14.5px; }
.werkboek-form .lang { display: none; }
.werkboek-form .kort { display: inline; }
.werkboek-klein { font-size: 12px; margin-top: 8px; }
}
@media (max-width: 620px) { .boek3d { width: 90px; top: 22px; right: 18px; } .werkboek .h2 { max-width: 64%; } }
@media (max-width: 620px) { .werkboek .h2 { max-width: 60%; min-height: 128px; } }
.werkboek-pil { display: none; }
@media (max-width: 620px) {
.werkboek-pil { display: inline-block; margin-bottom: 10px; padding: 5px 11px; border-radius: 999px; background: var(--c-accent); color: #fff; font-size: 12px; font-weight: 700; }
.werkboek .h2 { min-height: 0; max-width: 62%; }
.boek3d { width: 96px; top: 24px; }
.werkboek .lead { margin-top: 18px; }
}
@media (max-width: 620px) { .boek3d { width: 84px; top: 20px; right: 20px; } .werkboek .lead { margin-top: 22px; } }
@media (max-width: 960px) {
.hero-intro .intro-foto { top: calc(env(safe-area-inset-top, 0px) + 92px); height: auto; bottom: 0; border-radius: 26px 26px 0 0; }
.hero-intro .intro-foto img { object-position: 50% 8% !important; }
}
.ds-zoeker { position: relative; width: min(560px, 100%); aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 40px 80px -30px rgba(5, 10, 35, .7); }
.ds-z-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(7px) brightness(.9); transform: scale(1.06); transition: filter 700ms var(--ease-out) 700ms, transform 900ms var(--ease-out) 700ms; }
.ds-zoeker::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .45)); pointer-events: none; }
.ds-z-hoek { position: absolute; z-index: 2; width: 26px; height: 26px; border: 2px solid rgba(255, 255, 255, .85); }
.ds-z-hoek.a { left: 18px; top: 18px; border-right: 0; border-bottom: 0; } .ds-z-hoek.b { right: 18px; top: 18px; border-left: 0; border-bottom: 0; }
.ds-z-hoek.c { left: 18px; bottom: 18px; border-right: 0; border-top: 0; } .ds-z-hoek.d { right: 18px; bottom: 18px; border-left: 0; border-top: 0; }
.ds-z-focus { position: absolute; z-index: 2; left: 50%; top: 46%; width: 70px; height: 50px; margin: -25px 0 0 -35px; border: 2px solid #fff; border-radius: 4px; transform: scale(1.5); opacity: .8; transition: transform 500ms var(--ease-out) 300ms, border-color 200ms 800ms; }
.ds-z-boven, .ds-z-onder { position: absolute; z-index: 2; left: 24px; right: 24px; display: flex; align-items: center; gap: 14px; color: #fff; font: 700 12px/1 var(--font-sans); letter-spacing: .04em; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.ds-z-boven { top: 26px; padding-left: 26px; } .ds-z-onder { bottom: 26px; padding-left: 26px; }
.ds-z-boven i { width: 9px; height: 9px; border-radius: 50%; background: #ff4d5e; }
.ds-z-boven em, .ds-z-onder em { margin-left: auto; margin-right: 26px; font-style: normal; opacity: .85; }
.ds-z-flits { position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; }
.ds-z-genomen { position: absolute; z-index: 4; right: 22px; bottom: 50px; width: 74px; aspect-ratio: 3 / 2; border: 2px solid #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(14px) scale(.8); transition: opacity 400ms 1.75s, transform 500ms cubic-bezier(.2, 1.4, .4, 1) 1.75s; }
.ds-z-genomen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s1.aan .ds-z-foto { filter: none; transform: none; }
.s1.aan .ds-z-focus { transform: none; border-color: #3ddc84; }
.s1.aan .ds-z-flits { animation: ds-flits 450ms ease-out 1.45s both; }
.s1.aan .ds-z-genomen { opacity: 1; transform: none; }
@keyframes ds-flits { 0% { opacity: 0; } 25% { opacity: .9; } 100% { opacity: 0; } }
.ds-echt { aspect-ratio: auto; overflow: hidden; }
.ds-echt-sites { position: relative; aspect-ratio: 1440 / 760; overflow: hidden; border-radius: 0 0 14px 14px; background: #fff; }
.ds-echt-sites img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; }
.ds-echt-sites img:first-child { opacity: 1; }
.ds-adres { position: relative; height: 20px; overflow: hidden; }
.ds-adres em { position: absolute; left: 12px; top: 4px; font-style: normal; opacity: 0; }
.ds-adres em:first-child { opacity: 1; }
.s3.aan .ds-echt-sites img, .s3.aan .ds-adres em { animation: ds-wissel 9s infinite; }
.s3.aan .ds-echt-sites img:nth-child(2), .s3.aan .ds-adres em:nth-child(2) { animation-delay: 3s; }
.s3.aan .ds-echt-sites img:nth-child(3), .s3.aan .ds-adres em:nth-child(3) { animation-delay: 6s; }
.s3.aan .ds-echt-sites img:first-child, .s3.aan .ds-adres em:first-child { opacity: 0; }
@keyframes ds-wissel { 0% { opacity: 0; } 4% { opacity: 1; } 33% { opacity: 1; } 38% { opacity: 0; } 100% { opacity: 0; } }
.ds-echt-label { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--c-accent); font-size: 12.5px; font-weight: 800; white-space: nowrap; box-shadow: 0 14px 30px -12px rgba(5, 10, 35, .55); }
.ds-apps-echt { width: min(540px, 100%); padding-bottom: 6%; }
.ds-apps-echt .ds-apps-scherm { display: block; width: 100%; aspect-ratio: 1.6; object-fit: cover; object-position: top left; }
.ds-apps-tel { position: absolute; z-index: 4; right: -4%; bottom: 0; width: 26%; aspect-ratio: 9 / 19; border-radius: 22px; border: 6px solid #12162a; background: #fff; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(5, 10, 35, .7); opacity: 0; transform: translateY(30px); transition: opacity 500ms 500ms, transform 700ms cubic-bezier(.2, 1.3, .4, 1) 500ms; }
.ds-apps-tel img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.s-apps.aan .ds-apps-tel { opacity: 1; transform: none; }
@media (max-width: 960px) { .ds-z-boven, .ds-z-onder { font-size: 10px; gap: 9px; } .ds-z-genomen { width: 54px; bottom: 40px; } .ds-echt-label { font-size: 11px; } .ds-apps-tel { border-width: 4px; border-radius: 14px; } }
.ax-echt { width: min(560px, 92%); overflow: visible; }
.ax-echt .ax-balk { border-radius: 18px 18px 0 0; }
.ax-scherm { display: block; width: 100%; aspect-ratio: 1.6; object-fit: cover; object-position: top left; border-radius: 0 0 18px 18px; }
.ax-label { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: var(--c-ink); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 14px 30px -12px rgba(5, 10, 35, .55); }
.ds-zoeker { height: auto; max-height: 100%; aspect-ratio: 3 / 2; width: min(560px, 100%); }
.ds-echt { overflow: visible; }
.ds-echt .ds-browser-balk { border-radius: 14px 14px 0 0; }
.ds-safari { position: relative; margin: 0; width: min(580px, 100%); }
.ds-safari img { display: block; width: 100%; height: auto; filter: drop-shadow(0 40px 50px rgba(5, 10, 35, .45)); transform: translateY(16px) scale(.97); opacity: .6; transition: transform 700ms var(--ease-out), opacity 500ms; }
.s3.aan .ds-safari img { transform: none; opacity: 1; }
.ds-safari .ds-echt-label { bottom: -18px; }
.ds-safari .ds-echt-label { bottom: -40px; }
@media (max-width: 960px) { .ds-safari .ds-echt-label { bottom: -34px; } }
@media (max-width: 620px) { .werkboek .h2 { max-width: 54%; min-height: 0; font-size: 29px; } .boek3d { top: 24px; } .werkboek .lead { margin-top: 18px; } }
@media (max-width: 620px) { .boek3d { width: 80px; top: 22px; right: 22px; } .werkboek .lead { margin-top: 28px; } }
.pr-feiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 0 0 clamp(40px, 6vw, 80px); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.pr-feiten > div { padding: 18px 18px 18px 0; }
.pr-feiten dt { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-soft); margin-bottom: 6px; }
.pr-feiten dd { margin: 0; font-size: 16px; font-weight: 700; color: var(--c-ink); }
.pr-situatie { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: start; }
.pr-situatie .lead { margin: 18px 0 0; }
.pr-vraag { margin: 22px 0 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--hk, var(--c-accent)); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; font-weight: 600; color: var(--c-ink); }
.pr-vn { display: grid; gap: 14px; }
.pr-vn > div { border-radius: 22px; padding: 22px 24px; }
.pr-vn span { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.pr-vn p { margin: 0; font-size: 16px; line-height: 1.55; }
.pr-vn-voor { background: #ebe7df; color: var(--c-soft); }
.pr-vn-voor p { text-decoration: line-through; text-decoration-color: rgba(23, 26, 36, .25); }
.pr-vn-na { background: #fff; box-shadow: var(--sh-card); color: var(--c-ink); }
.pr-vn-na span { color: var(--c-accent); }
.pr-aanpak .lead { max-width: 62ch; margin: 16px 0 0; }
.pr-blok { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 6vw, 90px); align-items: center; margin-top: clamp(56px, 8vw, 110px); }
.pr-blok.pr-om .pr-blok-tekst { order: 2; }
.pr-nr { display: block; font-size: 14px; font-weight: 800; color: var(--c-accent); letter-spacing: .08em; margin-bottom: 10px; }
.pr-blok-tekst h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -.03em; font-weight: var(--fw-head); margin: 0 0 14px; }
.pr-blok-tekst p { font-size: 16.5px; line-height: 1.65; color: var(--c-soft); margin: 0 0 14px; }
.pr-link { display: inline-block; margin-top: 4px; font-weight: 700; color: var(--c-accent); }
.pr-blok-beeld { display: grid; gap: 18px; }
.pr-rij { display: flex; gap: 14px; justify-content: center; align-items: flex-end; }
.pr-rij:empty { display: none; }
.pr-fig { margin: 0; }
.pr-fig img { display: block; width: 100%; }
.pr-breed img { border-radius: 18px; box-shadow: 0 30px 60px -34px rgba(23, 26, 36, .5); }
.pr-tel { flex: 1 1 0; max-width: 210px; aspect-ratio: 1170 / 2532; border: 7px solid #12162a; border-radius: 30px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -30px rgba(23, 26, 36, .55); }
.pr-tel img { height: 100%; object-fit: cover; object-position: top; }
.pr-los { flex: 1 1 0; max-width: 210px; }
.pr-los img { filter: drop-shadow(0 26px 30px rgba(23, 26, 36, .35)); }
.pr-keuzes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 28px; }
.pr-keuze { background: #fff; border-radius: 22px; padding: 24px 26px; box-shadow: var(--sh-card); }
.pr-keuze b { display: block; font-size: 19px; letter-spacing: -.01em; margin-bottom: 8px; color: var(--c-ink); }
.pr-keuze p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--c-soft); }
.pr-res-kaart { position: relative; border-radius: var(--r-band); padding: clamp(36px, 6vw, 80px); background: var(--hk, var(--c-accent)); color: #fff; overflow: hidden; }
.pr-res-kaart .h2 { color: #fff; }
.pr-res-kaart .h2 span { color: rgba(255, 255, 255, .7); }
.pr-cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; margin: 30px 0; }
.pr-cijfer b { display: block; font-size: clamp(56px, 7vw, 96px); line-height: .95; font-weight: 900; letter-spacing: -.05em; }
.pr-cijfer span { display: block; margin-top: 10px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .8); max-width: 26ch; }
.pr-res-tekst { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .88); max-width: 64ch; margin: 0 0 26px; }
.pr-quote { margin: 0; padding: 26px 28px; border-radius: 22px; background: rgba(255, 255, 255, .1); }
.pr-quote blockquote { margin: 0 0 12px; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.25; font-weight: 800; letter-spacing: -.02em; }
.pr-quote figcaption { font-size: 15px; color: rgba(255, 255, 255, .8); }
.pr-quote figcaption b { color: #fff; }
.pr-gal-raster { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 18px; align-items: end; }
.pr-gal-raster .pr-tel { max-width: none; }
.pr-faq-raster { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 70px); align-items: start; }
.pr-faq-item { background: #fff; border-radius: 18px; padding: 0 22px; margin-bottom: 10px; box-shadow: var(--sh-card); }
.pr-faq-item summary { cursor: pointer; list-style: none; padding: 18px 30px 18px 0; position: relative; font-weight: 700; font-size: 16px; color: var(--c-ink); }
.pr-faq-item summary::-webkit-details-marker { display: none; }
.pr-faq-item summary::after { content: "+"; position: absolute; right: 0; top: 14px; font-size: 22px; color: var(--c-accent); }
.pr-faq-item[open] summary::after { content: "–"; }
.pr-faq-item p { margin: 0; padding: 0 0 18px; font-size: 15.5px; line-height: 1.6; color: var(--c-soft); }
.pr-links { padding-top: 0; }
@media (max-width: 960px) {
.pr-situatie, .pr-blok, .pr-faq-raster { grid-template-columns: 1fr; }
.pr-blok.pr-om .pr-blok-tekst { order: 0; }
.pr-keuzes { grid-template-columns: 1fr; }
.pr-gal-raster { grid-template-columns: 1fr 1fr; }
.pr-gal-raster .pr-breed { grid-column: 1 / -1; }
.pr-rij { gap: 10px; }
.pr-tel { border-width: 5px; border-radius: 22px; }
}
.pkop-rijk .hero-foto::before { background: linear-gradient(90deg, var(--hk, #24397a) 0%, var(--hk, #24397a) 30%, transparent 72%); opacity: .94; mix-blend-mode: normal; }
.pkop-rijk .hero-foto::after { background: linear-gradient(0deg, rgba(0, 0, 0, .35), transparent 45%); }
@media (max-width: 960px) {
.pkop-rijk .hero-foto::before { background: linear-gradient(0deg, var(--hk, #24397a) 0%, var(--hk, #24397a) 45%, transparent 95%); opacity: .95; }
}
.pr-wissel { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.pr-w { margin: 0; display: grid; gap: 16px; justify-items: center; text-align: center; }
.pr-w figcaption { font-size: 15px; line-height: 1.5; color: var(--c-soft); max-width: 24ch; }
.pr-w figcaption b { color: var(--c-ink); }
.pr-w-voor figcaption b { color: var(--c-soft); }
.pr-w-na img { width: min(100%, 230px); filter: drop-shadow(0 26px 30px rgba(23, 26, 36, .3)); transform: rotate(2deg); }
.pr-w-pijl svg { width: 30px; height: 30px; fill: none; stroke: var(--hk, var(--c-accent)); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pr-papier { position: relative; display: block; width: min(100%, 220px); aspect-ratio: 1 / 1.15; }
.pr-bon { position: absolute; width: 46%; height: 70%; background: #fff repeating-linear-gradient(0deg, transparent 0 11px, #e5e1d8 11px 13px); background-clip: content-box; padding: 14px 10px; box-sizing: border-box; box-shadow: 0 10px 22px -12px rgba(23, 26, 36, .35); border-radius: 2px; }
.pr-bon.b1 { left: 2%; top: 4%; transform: rotate(-12deg); }
.pr-bon.b2 { right: 0; top: 0; transform: rotate(9deg); }
.pr-skaart { position: absolute; left: 6%; right: 6%; bottom: 4%; padding: 14px 14px 16px; background: #f1e6d4; border-radius: 6px; transform: rotate(-4deg); box-shadow: 0 18px 30px -16px rgba(23, 26, 36, .45); filter: grayscale(.25); }
.pr-skaart b { display: block; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: #8a7a64; margin-bottom: 10px; text-align: left; }
.pr-skaart > span { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.pr-skaart i { aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed #b9a88f; }
.pr-skaart i.vol { border: 0; background: radial-gradient(circle, rgba(126, 0, 52, .55) 0 45%, rgba(126, 0, 52, .25) 46% 60%, transparent 62%); }
.pr-punten { list-style: none; margin: 4px 0 16px; padding: 0; display: grid; gap: 8px; }
.pr-punten li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.5; font-weight: 600; color: var(--c-ink); }
.pr-punten li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--hk, var(--c-accent)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat; }
.pr-aanpak .pr-blok { margin-top: clamp(48px, 6vw, 84px); }
.pr-keuzes { grid-template-columns: repeat(4, 1fr); }
.pr-keuze b { font-size: 18px; }
.pr-res-kaart.met-chat { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.pr-res-kaart .pr-cijfers { grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 26px 0 24px; }
.pr-res-kaart .pr-cijfer b { font-size: clamp(48px, 5.4vw, 80px); }
.pr-res-kaart .pr-cijfer span { font-size: 14.5px; }
.pr-res-tekst { margin: 0; }
.pr-chat { margin: 0; border-radius: 26px; overflow: hidden; background: #efeae2; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .55); color: #111b21; transform: rotate(1.5deg); }
.pr-chat-kop { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #fff; }
.pr-chat-kop b { display: block; font-size: 16px; }
.pr-chat-kop small { display: block; font-size: 12.5px; color: #667781; }
.pr-chat-av { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--hk, var(--c-accent)); display: grid; place-items: center; overflow: hidden; color: #fff; font-weight: 800; }
.pr-chat-av img { width: 74%; height: 74%; object-fit: contain; }
.pr-chat-body { margin: 0; padding: 22px 18px 26px; display: grid; gap: 6px; justify-items: start; background-image: radial-gradient(rgba(0, 0, 0, .05) 1px, transparent 1.4px); background-size: 16px 16px; }
.pr-bub { position: relative; margin: 0; max-width: 92%; background: #fff; padding: 9px 14px; border-radius: 4px 16px 16px 16px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.35; font-weight: 500; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.pr-bub + .pr-bub { border-radius: 16px; }
.pr-bub-reply { display: block; margin: 0 -6px 8px; padding: 6px 10px; border-left: 4px solid #53bdeb; border-radius: 6px; background: #f2f2f2; font-size: 13px; line-height: 1.4; color: #667781; font-weight: 400; }
.pr-bub-reply b { display: block; color: #1f8fbf; font-size: 13px; }
.pr-bub-reply svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; vertical-align: -3px; margin-right: 4px; }
@media (max-width: 1100px) { .pr-keuzes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 960px) {
.pr-res-kaart.met-chat { grid-template-columns: 1fr; }
.pr-chat { transform: none; }
.pr-keuzes.swipe { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(var(--gutter, 20px) * -1); padding: 4px var(--gutter, 20px) 18px; scrollbar-width: none; }
.pr-keuzes.swipe > * { flex: 0 0 72%; scroll-snap-align: start; }
}
@media (max-width: 560px) {
.pr-wissel { gap: 6px; }
.pr-w-pijl svg { width: 22px; height: 22px; }
.pr-w figcaption { font-size: 13.5px; }
.pr-res-kaart .pr-cijfers { gap: 10px; }
.pr-res-kaart .pr-cijfer b { font-size: 44px; }
.pr-res-kaart .pr-cijfer span { font-size: 13px; }
}
.prijk .pr-verhaal .grad, .prijk .pr-start .grad, .prijk .pr-aanpak .grad, .prijk .pr-waarom .grad, .prijk .pr-faq .grad { background: none; -webkit-text-fill-color: currentColor; color: var(--hk); }
.prijk .pr-nr, .prijk .pr-link, .prijk .pr-faq-item summary::after { color: var(--hk); }
.prijk .pr-knoppen { margin-top: 26px; }
.prijk .pr-knoppen .pcredits { margin: 0 0 14px; }
.prijk .pr-knoppen .btn-primary { background: var(--hk); box-shadow: none; }
.pr-w-na img { width: min(100%, 190px); }
.pr-chat-av img { filter: brightness(0) invert(1); }
@media (max-width: 960px) {
.prijk .pr-feiten { grid-template-columns: 1fr 1fr; margin-bottom: 36px; }
.prijk .pr-feiten > div { padding: 12px 12px 12px 0; }
.prijk .pr-feiten dt { font-size: 11px; margin-bottom: 3px; }
.prijk .pr-feiten dd { font-size: 14.5px; }
.prijk .pr-tel { max-width: 30vw; }
.prijk .pr-blok-beeld { gap: 12px; }
.prijk .pr-blok { gap: 22px; }
}
.pr-tel { position: relative; container-type: inline-size; background: var(--bk, #fff); border: 6px solid #1b1c20; border-radius: 34px; box-shadow: 0 0 0 1.5px #4a4d55, 0 30px 60px -30px rgba(23, 26, 36, .55); }
.pr-tel img { position: absolute; left: 0; top: 12cqw; width: 100%; height: calc(100% - 12cqw); object-fit: cover; object-position: top; }
.pr-sb { position: absolute; z-index: 2; inset: 0 0 auto; height: 12cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 7cqw 0 9cqw; color: #111; background: var(--bk, #fff); }
.pr-sb b { font-size: 4.6cqw; font-weight: 600; letter-spacing: -.01em; font-family: -apple-system, "SF Pro Text", Roboto, sans-serif; }
.pr-sb > span { display: flex; gap: 1.6cqw; align-items: center; }
.pr-sb svg { height: 3.4cqw; width: auto; fill: currentColor; }
.pr-sb svg:last-child { height: 3.7cqw; }
.pr-di { position: absolute; left: 50%; top: 2.6cqw; width: 30cqw; height: 8.4cqw; margin-left: -15cqw; border-radius: 5cqw; background: #000; }
.pr-home { position: absolute; z-index: 2; left: 50%; bottom: 2.2cqw; width: 34cqw; height: 1.3cqw; margin-left: -17cqw; border-radius: 1cqw; background: #111; opacity: .85; }
@media (max-width: 960px) { .prijk .pr-tel { border-width: 4px; border-radius: 20px; } }
.prijk .pr-knoppen { margin-top: clamp(40px, 5vw, 64px); }
.pr-situatie .lead + .lead { margin-top: 14px; }
.pr-par { flex: 1 1 0; max-width: 210px; display: block; }
.pr-par > .reveal { display: block; }
.pr-par .pr-fig { max-width: none; }
.pr-tilt { transition: transform .4s var(--ease-out, ease); transform-style: preserve-3d; }
.pr-cijfer b { font-variant-numeric: tabular-nums; }
.pr-bon.b1 { --r: -12deg; } .pr-bon.b2 { --r: 9deg; }
@keyframes pr-bon-val { from { opacity: 0; transform: translateY(-60px) rotate(calc(var(--r) * -1.5)); } to { opacity: 1; transform: rotate(var(--r)); } }
@keyframes pr-stempel { 0% { opacity: 0; transform: scale(1.8); } 60% { opacity: 1; transform: scale(.85); } 100% { opacity: 1; transform: scale(1); } }
@keyframes pr-wallet-in { from { opacity: 0; transform: translateY(70px) rotate(10deg); } 70% { transform: translateY(-6px) rotate(1deg); } to { opacity: 1; transform: rotate(2deg); } }
@keyframes pr-pijl { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } }
.pr-wissel .pr-bon, .pr-wissel .pr-skaart i.vol, .pr-wissel .pr-w-na img { opacity: 0; }
.pr-wissel.in-view .pr-bon { animation: pr-bon-val .8s cubic-bezier(.2, 1.2, .4, 1) forwards; }
.pr-wissel.in-view .pr-bon.b2 { animation-delay: .18s; }
.pr-wissel.in-view .pr-skaart i.vol { animation: pr-stempel .35s ease-out forwards; }
.pr-wissel.in-view .pr-skaart i.vol:nth-child(1) { animation-delay: .6s; }
.pr-wissel.in-view .pr-skaart i.vol:nth-child(2) { animation-delay: .75s; }
.pr-wissel.in-view .pr-skaart i.vol:nth-child(3) { animation-delay: .9s; }
.pr-wissel.in-view .pr-skaart i.vol:nth-child(4) { animation-delay: 1.05s; }
.pr-wissel.in-view .pr-skaart i.vol:nth-child(5) { animation-delay: 1.2s; }
.pr-wissel.in-view .pr-w-pijl svg { animation: pr-pijl 1s 1.4s ease-in-out 3; }
.pr-wissel.in-view .pr-w-na img { animation: pr-wallet-in 1s 1.6s cubic-bezier(.2, 1.1, .4, 1) forwards; }
@keyframes pr-bub-in { from { opacity: 0; transform: translateY(12px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes pr-typ-uit { to { height: 0; width: 0; opacity: 0; } }
@keyframes pr-tekst-in { to { max-width: 600px; max-height: 300px; opacity: 1; } }
@keyframes pr-bolletje { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.pr-chat .pr-bub { opacity: 0; transform-origin: left top; }
.pr-chat.in-view .pr-bub { animation: pr-bub-in .4s var(--d) cubic-bezier(.2, 1.4, .4, 1) forwards; }
.pr-typ { display: flex; gap: 4px; align-items: center; height: 22px; width: 40px; overflow: hidden; }
.pr-typ i { width: 7px; height: 7px; border-radius: 50%; background: #8696a0; animation: pr-bolletje 1s infinite; }
.pr-typ i:nth-child(2) { animation-delay: .15s; } .pr-typ i:nth-child(3) { animation-delay: .3s; }
.pr-bub-in { display: block; max-width: 0; max-height: 0; overflow: hidden; opacity: 0; }
.pr-chat.in-view .pr-typ { animation: pr-typ-uit .15s calc(var(--d) + 1s) forwards; }
.pr-chat.in-view .pr-bub-in { animation: pr-tekst-in .35s calc(var(--d) + 1s) ease-out forwards; }
@media (max-width: 960px) { .pr-par { max-width: 30vw; } .prijk .pr-tel { max-width: none; } }
@media (prefers-reduced-motion: reduce) {
.pr-wissel .pr-bon, .pr-wissel .pr-skaart i.vol, .pr-wissel .pr-w-na img, .pr-chat .pr-bub, .pr-bub-in { opacity: 1; animation: none !important; max-width: none; max-height: none; }
.pr-typ { display: none; }
}
.pr-intro { padding-bottom: clamp(30px, 4vw, 56px); }
.pr-intro-raster { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(32px, 6vw, 100px); align-items: start; }
.pr-samen { margin: 0; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.35; font-weight: 700; letter-spacing: -.02em; color: var(--c-ink); }
.pr-gegevens { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.pr-gegevens > div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.pr-gegevens dt { font-size: 14px; color: var(--c-soft); }
.pr-gegevens dd { margin: 0; font-size: 15px; font-weight: 700; color: var(--c-ink); }
.pr-gegevens a { color: var(--hk, var(--c-accent)); text-decoration: underline; text-underline-offset: 3px; }
.pr-groot .pr-breed img { border-radius: var(--r-band, 28px); }
.pr-tekstkolom { max-width: 720px; }
.pr-tekstkolom p, .pr-blok-tekst p { font-size: 17.5px; line-height: 1.7; color: var(--c-soft); margin: 16px 0 0; }
.pr-verhaal .h2, .pr-aanpak .h2 { margin-bottom: 4px; }
.pr-blok-tekst h3 { margin-bottom: 4px; }
.pr-res-tekst p { margin: 0 0 12px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.pr-chat-intro { margin: 0 0 12px; font-size: 15px; color: rgba(255, 255, 255, .85); }
.pr-blok.pr-zonder { grid-template-columns: 1fr; max-width: 720px; }
@media (max-width: 960px) {
.pr-intro-raster { grid-template-columns: 1fr; }
.pr-samen { font-size: 22px; }
.pr-tekstkolom p, .pr-blok-tekst p { font-size: 16.5px; }
}
.jtekst .jtabel { overflow-x: auto; margin: 8px 0 22px; border-radius: 16px; box-shadow: 0 0 0 1px rgba(var(--shadow-rgb), .08); }
.jtekst table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; color: #33373f; }
.jtekst th { text-align: left; font-weight: 700; color: var(--c-ink); background: var(--c-accent-soft); padding: 12px 16px; }
.jtekst td { padding: 12px 16px; vertical-align: top; border-top: 1px solid rgba(var(--shadow-rgb), .08); }
.jtekst td:first-child { font-weight: 600; color: var(--c-ink); min-width: 180px; }
.jtekst { min-width: 0; }
@media (max-width: 640px) {
.jtekst .jtabel { overflow: visible; }
.jtekst thead { display: none; }
.jtekst table, .jtekst tbody, .jtekst tr, .jtekst td { display: block; width: auto; }
.jtekst tr { padding: 12px 16px; }
.jtekst tr + tr { border-top: 1px solid rgba(var(--shadow-rgb), .08); }
.jtekst td { padding: 0; border: 0; min-width: 0; }
.jtekst td:first-child { margin-bottom: 2px; }
.jtekst td + td + td { color: var(--c-soft); font-size: 14px; }
}