@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/inter-latin.woff2') format('woff2')}
/* Koppenletter. Terugdraaien is één regel: zet --font-display op de Inter-stapel hieronder. */
@font-face{font-family:Bricolage;font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/bricolage-latin.woff2') format('woff2')}
:root{--navy:#0f2044;--navy-light:#1a3162;--gold:#c8952e;--gold-light:#d4a84a;--gold-ink:#805b14;--gold-subtle:#f7f1e6;--bg:#fff;--bg-warm:#f8f7f5;--bg-section:#f1f0ed;--text:#1a1a2e;--text-secondary:#33405a;--text-muted:#4d5a70;--border:#e2e0dc;--radius:12px;--shell:1280px;--header-height:80px;--section-space:clamp(56px,7vw,96px);--label:.75rem;--text-s:.875rem;--text:1rem;--text-l:1.0625rem;--h3:1.15rem;--h3-l:clamp(1.3rem,1.8vw,1.5rem);--h2:clamp(2rem,3.7vw,3.2rem);--h1:clamp(3.1rem,6vw,5rem);--font-text:Inter,system-ui,-apple-system,sans-serif;--font-display:Bricolage,Inter,system-ui,-apple-system,sans-serif;--track-h1:-.035em;--track-h2:-.03em;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 24px);-webkit-text-size-adjust:100%}body{margin:0;font-family:var(--font-text);color:var(--text);background:var(--bg);font-size:1rem;line-height:1.75;-webkit-font-smoothing:antialiased}h1,h2,h3,p,figure,blockquote,ul{margin:0}h1,h2,h3{font-family:var(--font-display)}h1,h2,h3{color:var(--navy);line-height:1.18;text-wrap:pretty}a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;max-width:100%;height:auto}svg{display:block}::selection{background:#ead8b2;color:var(--navy)}:focus-visible{outline:3px solid var(--gold-ink);outline-offset:5px}section{padding:var(--section-space) 0}section[id]:not(#top){scroll-margin-top:calc(-1 * var(--section-space))}.container{width:min(100% - 40px,var(--shell));margin-inline:auto}.skip-link{position:fixed;top:12px;left:12px;z-index:200;padding:12px 20px;background:var(--navy);color:#fff;transform:translateY(-180%)}.skip-link:focus{transform:translateY(0)}.section-label{display:block;font-size:var(--label);font-weight:700;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:18px}.page-contact-bedankt,.page-404{--label:.875rem}.page-contact-bedankt .section-label,.page-404 .section-label{letter-spacing:.12em}.section-title{font-size:var(--h2);font-weight:700;letter-spacing:var(--track-h2);margin-bottom:22px}.section-sub{max-width:58ch;color:var(--text-secondary);font-size:1.0625rem}.page-actions{margin-top:32px}.section-header{max-width:760px;margin-bottom:48px}.section-header.wide,.section-header.wide .section-sub{max-width:none}.section-index{font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--gold-ink)}
/* Persistent, keyboard-accessible navigation. */
#navbar{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--border);transform:translateZ(0)}#navbar.scrolled{box-shadow:0 3px 18px #0f204409}#navbar>.container{min-height:var(--header-height);display:flex;align-items:center;justify-content:space-between;gap:24px}#navbar .logo{min-height:var(--header-height)}.logo{display:inline-flex;align-items:center;min-height:44px;font-size:1.6rem;letter-spacing:-.06em;font-weight:800;line-height:1;color:var(--navy)}.logo span{color:var(--gold)}.nav-links{list-style:none;padding:0;display:flex;gap:clamp(22px,2.9vw,40px);align-items:center}.nav-links a{display:flex;align-items:center;min-height:44px;position:relative;font-size:.875rem;font-weight:600;color:var(--navy)}.nav-links a::after{position:absolute;content:'';height:2px;inset:auto 0 4px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 180ms var(--ease)}.nav-links a[aria-current]::after{transform:scaleX(1)}.nav-links a[aria-current]{color:var(--navy)}.nav-login{padding-left:clamp(18px,2.2vw,28px);border-left:1px solid var(--border)}.nav-links .nav-login a{font-weight:500;color:var(--text-muted)}@media(min-width:768px) and (max-width:1219px){.nav-login{display:none}}.mobile-toggle{display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;width:44px;height:44px;border:1px solid var(--border);border-radius:6px;background:transparent;cursor:pointer}.mobile-toggle span{display:block;height:2px;width:20px;background:var(--navy);transition:transform 180ms var(--ease),opacity 150ms ease}
/* Existing photography and palette, with an editorial composition. */
.hero{position:relative;background:var(--bg-warm);padding:clamp(48px,6vw,88px) 0 clamp(64px,7vw,104px);overflow:clip}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,5vw,76px);align-items:center}.hero-label{display:flex;align-items:center;gap:12px;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--gold-ink);margin-bottom:28px}.hero-label::before{content:'';width:32px;height:2px;background:var(--gold)}.hero h1{font-size:var(--h1);font-weight:750;letter-spacing:var(--track-h1);line-height:1.03;max-width:14ch;margin-bottom:28px}.hero h1 em{font-style:normal;color:var(--gold-ink)}.tagline{max-width:49ch;font-size:1.0625rem;line-height:1.8;color:var(--text-secondary);margin-bottom:32px}.hero-image{position:relative;aspect-ratio:4/3.3;max-height:460px;isolation:isolate;border-radius:var(--radius);background:var(--navy);overflow:hidden}.hero-image>img{width:100%;height:100%;object-fit:cover}.hero-image::after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#0f2044ec);pointer-events:none}.hero-caption{position:absolute;inset:auto 30px 30px;color:#fff;z-index:1}.hero-caption>span{font-size:.6875rem;text-transform:uppercase;letter-spacing:.14em;color:#ead8b2;display:block;margin-bottom:10px}.hero-caption strong{font-weight:600;line-height:1.4;font-size:clamp(1.125rem,2.2vw,1.5rem);letter-spacing:-.02em;display:block}.hero-caption strong span{display:block}.buttons{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 22px;border:1px solid transparent;border-radius:6px;font-size:.875rem;font-weight:600;text-align:center;cursor:pointer;transition:background 150ms ease,border-color 150ms ease,transform 150ms var(--ease)}.btn-primary{background:var(--navy);color:#fff}.btn-outline{border-color:#c1c6cf;color:var(--navy);background:transparent}.btn:active{transform:translateY(1px)}
.trust-bar{padding:26px 0;background:#fff;border-bottom:1px solid var(--border)}@media(min-width:768px) and (max-width:1279px){.trust-items{max-width:780px;margin-inline:auto;gap:10px 0}}.trust-items{list-style:none;padding:0;display:flex;align-items:center;justify-content:center;gap:12px 0;flex-wrap:wrap;font-size:.9rem;font-weight:500;color:var(--navy)}.trust-items li{display:flex;align-items:center}.trust-items li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gold);margin:0 11px 0 clamp(20px,2.6vw,46px)}.trust-items li:first-child::before{margin-left:0}
/* Eén herkenbare kop per pagina: navy blok met label, titel en één korte introzin. */
.page-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);color:#d1d9e6;padding:clamp(44px,5.6vw,72px) 0 clamp(44px,5.6vw,68px)}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#ffffff0f 1px,transparent 1px),linear-gradient(90deg,#ffffff0f 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 78% 46%,#000 10%,transparent 68%);mask-image:radial-gradient(ellipse at 78% 46%,#000 10%,transparent 68%)}
.page-hero::after{content:"";position:absolute;inset:-25%;z-index:-1;background:radial-gradient(ellipse at 82% 26%,#e8c98a1f,transparent 44%);pointer-events:none}
.page-hero .section-label{color:var(--gold-light)}
.page-hero .section-title{color:#fff;margin-bottom:0}
.page-hero .section-sub{color:#c2cbdc;max-width:62ch;margin-top:20px}
.page-hero-copy{max-width:940px}
.page-hero :focus-visible{outline-color:#efd199}
.page-hero+section{padding-top:clamp(40px,4.6vw,64px)}

/* Numbered service chapters. Native details retain a no-JS baseline. */
#diensten{background:var(--bg-warm)}.section-more{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-top:22px;color:var(--navy);font-weight:600;font-size:var(--text-s);border-bottom:1px solid var(--navy)}.section-more .icon{color:var(--gold-ink)}.proof{background:var(--navy);color:#d1d9e6}.proof .section-label{color:var(--gold-light)}.proof .section-title{color:#fff}.proof .section-header{margin-bottom:30px}.proof-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 52px;align-items:start}.proof-item{min-width:0}.proof-shot{display:block;border:1px solid #ffffff40;border-radius:10px;overflow:hidden;background:#f3f6f9}.proof-shot img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:top}.proof-type{font-size:.6875rem;color:var(--gold-light);font-weight:650;text-transform:uppercase;letter-spacing:.12em;margin:18px 0 8px}.proof-item h3{color:#fff;font-size:var(--h3-l);letter-spacing:-.03em;line-height:1.2;margin-bottom:10px}.proof-item p:not(.proof-type){font-size:var(--text);line-height:1.8;max-width:52ch;margin-bottom:6px}.proof .section-more{color:#fff;border-bottom-color:#fff;margin-top:8px}.proof :focus-visible{outline-color:#d4a84a}.contact-band{background:var(--bg-warm);border-top:1px solid var(--border)}.contact-band .container{display:flex;justify-content:space-between;align-items:center;gap:32px}.contact-band .section-label{margin-bottom:10px}.contact-band .section-title{margin:0;font-size:clamp(1.5rem,2.6vw,2.2rem);max-width:36ch;text-wrap:balance}.contact-band .btn{flex-shrink:0}.notfound{position:relative;isolation:isolate;overflow:hidden;background:#0b1932;color:#e0e4ed;min-height:min(78vh,760px);display:flex;align-items:center;padding:calc(var(--section-space) + 8px) 0 var(--section-space)}.notfound::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#ffffff0f 1px,transparent 1px),linear-gradient(90deg,#ffffff0f 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 74% 42%,#000 12%,transparent 70%);mask-image:radial-gradient(ellipse at 74% 42%,#000 12%,transparent 70%)}.notfound::after{content:"";position:absolute;inset:-20%;z-index:-1;background:radial-gradient(ellipse at 78% 24%,#e8c98a2a,transparent 42%);pointer-events:none}.notfound .container{width:min(100% - 40px,var(--shell))}.notfound-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 80px;align-items:center}.notfound .section-label{color:#e3b85e}.notfound .section-title{color:#f7f6f2;font-size:var(--h1);letter-spacing:var(--track-h1);max-width:11ch;margin-bottom:24px}.notfound .section-sub{color:#c2cbdc;max-width:34ch}.notfound-ledger ol{list-style:none;margin:0;padding:0;border-top:1px solid #ffffff2e}.notfound-ledger li{border-bottom:1px solid #ffffff2e}.notfound-ledger a{display:grid;grid-template-columns:3ch minmax(0,1fr) auto;grid-template-areas:"no name note";column-gap:20px;align-items:baseline;min-height:64px;padding:16px 8px;color:#f7f6f2;transition:background 180ms var(--ease)}.notfound-ledger a:hover{background:#ffffff0c}.notfound-ledger a:hover .ledger-no{color:#f7f6f2}.notfound :focus-visible{outline-color:#efd199}.ledger-no{grid-area:no;font-size:.8125rem;font-weight:600;letter-spacing:.06em;color:#e3b85e;transition:color 180ms var(--ease)}.ledger-name{grid-area:name;font-weight:600;font-size:var(--text-l);letter-spacing:-.015em}.ledger-note{grid-area:note;font-size:var(--text-s);color:#a9b4c8;text-align:right}.ledger-no,.ledger-note,.ledger-total{font-variant-numeric:tabular-nums}.ledger-total{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:16px 8px 0;font-size:var(--text-s);color:#c2cbdc}.ledger-total span:first-child{font-size:var(--label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#e3b85e}.page-404 footer{border-top:1px solid #ffffff1f}.handover{background:#fff}.reach{background:var(--bg-warm)}.handover-list{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 48px;border-top:1px solid var(--border)}.handover-list li{padding:26px 0 10px}.handover-list h3{font-size:1.15rem;line-height:1.4;letter-spacing:-.02em;margin-bottom:12px}.handover-list p{font-size:.9375rem;line-height:1.8;color:var(--text-secondary)}.handover-close{margin-top:28px;padding-top:22px;border-top:1px solid var(--border);font-size:1.0625rem;font-weight:600;color:var(--navy);letter-spacing:-.01em}.about-quote{margin:0 0 22px;padding-left:20px;border-left:2px solid var(--gold);font-size:1.15rem;line-height:1.6;letter-spacing:-.02em;color:var(--navy);text-wrap:balance}.services-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;row-gap:40px}.service-card{padding:28px 0 0;border-top:1px solid #cbd0d8;position:relative}.service-number{font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--gold-ink);margin-bottom:20px}.service-card h2,.service-card h3{font-size:1.55rem;font-weight:650;letter-spacing:-.035em;margin-bottom:6px}.service-subtitle{font-size:.875rem;color:var(--gold-ink);font-weight:500;margin-bottom:16px}.service-card>p{font-size:1rem;max-width:55ch;color:var(--text-secondary)}details{border-bottom:1px solid var(--border)}summary{position:relative;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:52px;font-weight:600;color:var(--navy)}summary::-webkit-details-marker{display:none}summary::after{content:'+';font-size:1.3rem;font-weight:400;flex-shrink:0;transition:transform 150ms var(--ease)}details[open]>summary::after{transform:rotate(45deg)}.service-detail{margin-top:18px;border-bottom:0}.service-detail summary{font-size:.9375rem;color:var(--navy);justify-content:flex-start;gap:14px;min-height:44px;width:fit-content}.service-features{padding:0 0 12px;list-style:none;color:var(--text-secondary);font-size:.9375rem}.service-features li{display:flex;gap:10px;margin-top:6px}.service-features li::before{content:'—';color:var(--gold-ink)}
/* Photo and introduction start together; long content has its own grid. */
.about-intro{display:grid;grid-template-columns:340px 1fr;grid-template-areas:"side copy";gap:0 clamp(32px,5vw,64px);align-items:start}.about-side{grid-area:side;display:flex;flex-direction:column;gap:16px;align-self:stretch;contain:size}.about-image{flex:1;min-height:0}.about-intro-copy{grid-area:copy}.about-linkedin{width:100%}.about-linkedin .icon{width:18px;height:18px}.about-image{position:relative;min-width:0}.about-image img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center 22%;border-radius:var(--radius)}.accent-box{position:absolute;right:14px;bottom:28px;display:flex;align-items:center;gap:10px;background:var(--navy);color:white;border-radius:8px;padding:12px 16px}.accent-box .num{font-size:1.6rem;font-weight:750;line-height:1;color:var(--gold-light);font-variant-numeric:tabular-nums}.accent-box .label{font-size:.6875rem;max-width:10ch;line-height:1.45}.about-intro-copy p{font-size:1rem;line-height:1.8;color:var(--text-secondary);margin-bottom:22px}.about-intro-copy strong{color:var(--navy);font-weight:600}.about-ai-note{margin-top:40px;padding:28px 32px;background:var(--gold-subtle);border-radius:var(--radius);color:var(--text-secondary);font-size:.9375rem;line-height:1.8}.about-ai-note strong{color:var(--navy)}.about-details{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;row-gap:36px;margin-top:48px}.about-detail{padding-top:22px;border-top:1px solid var(--border)}.about-detail .section-index{display:block;margin-bottom:12px}.about-detail h2,.about-detail h3{font-size:var(--h3);line-height:1.4;letter-spacing:-.02em;margin-bottom:12px}.about-detail p{font-size:.9375rem;line-height:1.85;color:var(--text-secondary)}.name-story{border-top:1px solid var(--border);padding-top:26px;margin-top:40px;font-size:.875rem;color:var(--text-secondary)}.name-story strong{color:var(--navy)}

.projects-group{font-size:var(--label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin:44px 0 10px}.projects-group:first-of-type{margin-top:0}.project-collage{display:grid;grid-template-columns:minmax(0,.69fr) minmax(0,.69fr) minmax(0,1fr);gap:10px;max-width:640px}.collage-tile{display:flex;flex-direction:column;min-width:0;margin:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg-section);text-decoration:none;color:var(--text-muted);transition:border-color .2s}a.collage-tile:hover,a.collage-tile:focus-visible{border-color:var(--navy);color:var(--navy)}.collage-tile img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}.collage-tile span,.collage-tile figcaption{font-size:.6875rem;font-weight:600;letter-spacing:.02em;padding:6px 10px;border-top:1px solid var(--border)}.collage-tile--tall{grid-row:span 2}.collage-tile--tall img{flex:1;min-height:0;height:100%;aspect-ratio:auto;object-position:center}.project-ledger{border-top:1px solid var(--border)}.project{display:grid;grid-template-columns:.85fr 1.15fr;grid-template-rows:auto 1fr;grid-template-areas:"lead shot" "copy shot";align-items:start;gap:12px clamp(32px,5vw,72px);padding:34px 0;border-bottom:1px solid var(--border)}.project-lead{grid-area:lead}.project-copy{grid-area:copy;align-self:start}.project-shot.dashboard-image-link{border-color:var(--border);cursor:zoom-in}.collage-tile.dashboard-image-link{cursor:zoom-in}.project-media{grid-area:shot;min-width:0;max-width:640px}.project-media .project-tags{margin-top:14px}.project-type{font-size:.6875rem;color:var(--gold-ink);font-weight:650;text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px}.project-lead h3{font-size:var(--h3-l);letter-spacing:-.035em;line-height:1.2;margin-bottom:0}.project-shot{display:block;max-width:640px;margin:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg-section)}.project-shot img{width:100%;height:auto}.project-copy p{color:var(--text-secondary);font-size:.9375rem;line-height:1.8;max-width:58ch;margin-bottom:16px}.project-steps{margin:0 0 16px;max-width:58ch}.project-steps div{padding:8px 0;border-top:1px solid var(--border)}.project-steps div:first-child{border-top:0;padding-top:0}.project-steps dt{font-size:.6875rem;color:var(--gold-ink);font-weight:650;text-transform:uppercase;letter-spacing:.12em;margin-bottom:4px}.project-steps dd{margin:0;color:var(--text-secondary);font-size:.9375rem;line-height:1.8}.project-tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}.project-tags li{font-size:.6875rem;color:var(--text-muted);padding-bottom:3px;border-bottom:1px solid var(--border)}.portfolio-lead{margin:0 0 30px;max-width:82ch;color:var(--text-muted);font-size:var(--text-s);line-height:1.75}.portfolio-note{margin-top:22px;font-size:.9375rem;color:var(--text-secondary)}.portfolio-intro{margin-top:14px;max-width:70ch;color:var(--text-secondary);font-size:1rem;line-height:1.8}

.faq-section{background:white}.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,76px)}.faq-item:first-child{border-top:1px solid var(--border)}.faq-item summary{padding:22px 0;font-size:1rem;line-height:1.5;font-weight:600}.faq-item p{padding:0 28px 24px 0;color:var(--text-secondary);font-size:.9375rem;line-height:1.8}
#contact{background:var(--bg-warm)}.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:start}.contact-info,.contact-aside{min-width:0}.contact-info>p{font-size:1rem;line-height:1.8;color:var(--text-secondary);max-width:52ch;margin-bottom:30px}.contact-info>p+.contact-note{margin-top:-16px;font-size:var(--text-s);line-height:1.75;color:var(--text-muted)}.contact-details{list-style:none;padding:0}.contact-details li{display:flex;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--border);font-size:1rem;color:var(--text)}.address-line{display:block;line-height:1.5}.detail-icon{width:32px;flex-shrink:0;color:var(--gold-ink)}.detail-icon svg{width:20px;height:20px}.contact-details strong{display:block;font-size:.6875rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600;color:var(--text-muted)}.contact-details a{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere;color:var(--navy);text-decoration:underline;text-underline-offset:4px;text-decoration-color:#c0c6ce}.contact-info .btn{margin-top:4px}.letterhead{min-width:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:clamp(22px,3vw,36px) clamp(22px,3vw,40px);box-shadow:0 1px 2px #0f20440a,0 12px 32px #0f204408}.letterhead-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:16px;border-bottom:2px solid var(--navy)}.letterhead-head .logo{font-size:1.75rem;min-height:0}.letterhead-place{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);text-align:right}.letterhead .contact-details li:first-child{border-top:0}.contact-details,.letterhead-head,.footer-col a,.footer-version,.accent-box .num,.service-number,.section-index{font-variant-numeric:tabular-nums}.letterhead-foot{margin-top:6px;padding-top:16px;border-top:1px solid var(--border);font-size:.75rem;line-height:1.7;color:var(--text-muted)}.contact-aside{display:grid;gap:22px;justify-items:start;align-self:start}.contact-form{display:grid;gap:18px;margin-top:4px;max-width:44rem}.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.form-field{display:grid;gap:8px;min-width:0}.form-field label{font-size:var(--label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}.form-field label span{font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-muted)}.contact-form input,.contact-form textarea{width:100%;min-width:0;min-height:48px;padding:10px 14px;font:inherit;font-size:1rem;line-height:1.5;color:var(--text);background:#fff;border:1px solid #c1c6cf;border-radius:6px;transition:border-color 150ms ease}.contact-form textarea{min-height:140px;padding-block:12px;line-height:1.7;resize:vertical}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--navy);outline-offset:2px}.form-consent{display:flex;align-items:center;gap:12px;min-height:44px}.form-consent input{width:22px;height:22px;min-height:0;padding:0;flex-shrink:0;accent-color:var(--navy)}.form-consent label{font-size:var(--text-s);color:var(--text-secondary);cursor:pointer}.contact-form button{justify-self:start}.form-captcha{min-height:78px}.form-captcha:empty{display:none}
.form-privacy{font-size:var(--text-s);line-height:1.7;color:var(--text-muted)}.form-trap{display:none}@media(max-width:767px){.contact-info>p{font-size:.9375rem;line-height:1.7;margin-bottom:20px}.contact-info>p+.contact-note{margin-top:-6px;margin-bottom:26px}.contact-form{gap:12px}.form-field{gap:5px}.contact-form input,.contact-form textarea{min-height:44px;padding:8px 12px}.contact-form textarea{height:120px;min-height:0}.form-consent{min-height:40px}.form-privacy{font-size:.8125rem}}
footer{background:var(--navy);color:#c2cbdc;padding:60px 0 24px}.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px;margin-bottom:28px}.footer-brand .logo{color:white;margin-bottom:16px}.footer-brand p{max-width:34ch;font-size:.875rem}.footer-col h2{color:white;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}.footer-col ul{list-style:none;padding:0}.footer-col a{display:inline-block;min-height:0;font-size:.8125rem;line-height:27px;padding:9px 6px;margin:-9px -6px}.footer-col ul a{line-height:40px}.footer-bottom{border-top:1px solid #ffffff28;padding-top:22px;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 0;font-size:.6875rem}.footer-bottom>span+span::before{content:"·";margin:0 8px;color:#8e9bb3}.footer-bottom a{display:inline-block;padding:10px 6px;margin:-10px -6px}.op-smal{display:none}.footer-version{color:#8e9bb3;letter-spacing:.04em}.footer-address{font-style:normal}.footer-login{display:none;margin-top:10px;font-size:.8125rem}.footer-address p{font-size:.8125rem;line-height:24px;color:#c2cbdc}.footer-address a{display:inline;min-height:0;font-size:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#ffffff40}footer :focus-visible,
/* Content stays readable without JavaScript and before observers run. */
html:not(.js){scroll-padding-top:24px}html:not(.js) #navbar{position:relative}
.reveal{opacity:1}.reveal.is-revealing{animation:reveal-in 360ms var(--ease) both}@keyframes reveal-in{from{opacity:.5;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover){.nav-links a:hover::after{transform:scaleX(1)}.btn-primary:hover{background:var(--navy-light)}.btn-outline:hover{border-color:var(--navy);background:#0f204407}.btn:hover{transform:translateY(-2px)}summary:hover{color:var(--gold-ink)}footer a:hover{color:var(--gold-light)}.contact-details a:hover{text-decoration-color:var(--navy)}}
@media(min-width:1500px){.hero{padding-block:96px 112px}.hero-grid{gap:90px}}
@media(max-width:1100px){.project{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"lead" "shot" "copy";gap:14px}.project-media{max-width:none}}
@media(max-width:1023px){:root{--header-height:72px}.container{width:calc(100% - 48px)}.nav-links{gap:18px}.nav-links a{font-size:.8125rem}.hero-grid{gap:36px}.hero-image{aspect-ratio:4/3.6}.buttons{gap:10px}.btn{padding-inline:18px}.about-intro,.about-details,.services-grid{column-gap:36px}.about-intro{grid-template-columns:260px 1fr}.about-image img{aspect-ratio:4/5}.contact-grid{gap:36px}}
@media(max-width:767px){:root{--header-height:68px;--section-space:56px}.container{width:calc(100% - 40px)}section{padding-block:56px}.section-header{margin-bottom:28px}.nav-links{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:4px 0 18px}.nav-links>li>a{min-height:48px;font-size:1rem;border-top:1px solid var(--border)}.nav-links>li:first-child>a{border-top:0}.nav-login{padding:10px 0 0;border-left:0}.nav-links .nav-login a{min-height:44px;font-size:.875rem;border-top:1px solid var(--border)}#navbar>.container{flex-wrap:wrap;gap:0}.nav-links{flex-basis:100%}.mobile-toggle{order:1}.nav-links{order:2}.js .mobile-toggle{display:flex}.js .nav-links{display:none}.js #navbar.open .nav-links{display:flex}.mobile-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}.mobile-toggle[aria-expanded=true] span:nth-child(2){opacity:0}.mobile-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.nav-links a{font-size:.8125rem}.hero{padding-block:42px 48px}.hero-grid{grid-template-columns:1fr;gap:36px}.hero h1{max-width:none;margin-bottom:24px}.hero-label{font-size:.6875rem;margin-bottom:24px}.tagline{font-size:1rem;margin-bottom:26px}.hero-image{aspect-ratio:1.6;max-height:250px}.hero-image img{object-position:center 55%}.hero-caption{inset:auto 22px 22px}.hero-caption strong{font-size:1.125rem}.trust-items{display:grid;grid-template-columns:1fr;font-size:.875rem;gap:6px 16px}.trust-items li::before{margin:0 11px 0 0}.services-grid{grid-template-columns:1fr;gap:26px}.service-card{padding-top:22px}.service-number{margin-bottom:12px}.service-card h2,.service-card h3{font-size:1.4rem}.about-intro{grid-template-columns:1fr;grid-template-areas:"side" "copy";gap:0}.about-side{margin-bottom:26px;max-width:260px;contain:none;align-self:start}.about-image{flex:none}.about-image img{height:auto}.about-image{max-width:none}.about-image img{aspect-ratio:1/1}.accent-box{bottom:16px;right:12px;padding:10px 12px;gap:8px}.about-intro-copy p{font-size:1rem;line-height:1.8;margin-bottom:18px}.about-ai-note{padding:24px;margin-top:14px}.about-details{grid-template-columns:1fr;gap:26px;margin-top:34px}.name-story{font-size:.875rem;line-height:1.85}.project{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"lead" "shot" "copy";gap:14px;padding:26px 0}.project-collage{grid-template-columns:1fr 1fr;gap:8px}.collage-tile--tall{grid-row:auto}.collage-tile--tall img{flex:none;height:auto;aspect-ratio:auto}.faq-grid{grid-template-columns:1fr;gap:30px}.faq-item summary{font-size:.9375rem}.contact-grid{grid-template-columns:1fr;gap:36px}.form-row{grid-template-columns:1fr}.contact-aside{justify-items:stretch}.footer-grid{grid-template-columns:1fr 1fr;gap:32px 24px}.footer-brand{grid-column:1/-1}.footer-brand p{max-width:43ch}.footer-col a{overflow-wrap:anywhere}.op-breed{display:none}.op-smal{display:inline}.footer-bottom{justify-content:flex-start}.footer-bottom>span+span::before{margin:0 6px}}
@media(max-width:359px){.container{width:calc(100% - 32px)}.buttons{align-items:stretch}.buttons .btn{width:100%}.trust-items{grid-template-columns:1fr}.nav-links{gap:4px 16px}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.about-ai-note{padding:20px}.accent-box{padding:12px 14px}.accent-box .num{font-size:1.7rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1!important;transform:none!important}}
@media(max-width:767px){.handover-list{grid-template-columns:1fr;gap:0;margin-top:0}.handover-list li{padding:18px 0 8px;border-bottom:1px solid var(--border)}.handover-list li:last-child{border-bottom:0}.handover-list h3{font-size:1.05rem}.handover-list p{font-size:.9rem}.handover-close{font-size:1rem;margin-top:20px}.about-quote{font-size:1.05rem}}
@media(max-width:1023px){:root{--h1:clamp(3rem,6.5vw,4rem)}}
@media(max-width:767px){:root{--text:.9375rem;--h2:clamp(1.5rem,6.6vw,2.6rem);--h1:clamp(2.8rem,11.5vw,4.6rem)}.proof-grid{grid-template-columns:1fr;gap:34px}.contact-band .container{flex-direction:column;align-items:flex-start;gap:20px}.contact-band .section-title{max-width:none;font-size:1.3rem}.contact-band .btn{width:100%}}
@media(max-width:359px){:root{--h2:1.875rem;--h1:2.8rem}}
@media(max-width:1023px){.notfound-grid{gap:40px 48px}.notfound-ledger a{grid-template-columns:3ch minmax(0,1fr);grid-template-areas:"no name" "no note";row-gap:2px;padding:14px 6px}.ledger-note{text-align:left}}
@media(max-width:767px){.notfound{min-height:0;padding:48px 0 56px}.notfound-grid{grid-template-columns:1fr;gap:36px}.notfound .section-title{margin-bottom:18px}.notfound-ledger a{min-height:60px}}
/* Formele pagina's (voorwaarden, privacy): een document op briefpapier, op het scherm en op papier. */
.formal{background:var(--bg-warm)}.formal-sheet{max-width:860px;margin-inline:auto;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:clamp(24px,4vw,56px) clamp(22px,5vw,64px);box-shadow:0 1px 2px #0f20440a,0 12px 32px #0f204408}.formal-letterhead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:16px;margin-bottom:34px;border-bottom:2px solid var(--navy)}.formal-letterhead .logo{font-size:1.75rem;min-height:0}.formal-address{font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);text-align:right;font-variant-numeric:tabular-nums}.formal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:34px}.formal-head .section-title{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:14px}.formal-meta{font-size:var(--text-s);line-height:1.7;color:var(--text-muted);max-width:58ch}.formal-print{flex-shrink:0}.formal-body h2{font-size:1.05rem;letter-spacing:-.02em;margin:30px 0 10px}.formal-body h2:first-child{margin-top:0}.formal-body p,.formal-body li{font-size:var(--text-s);line-height:1.8;color:var(--text-secondary)}.formal-body ol{margin:0;padding-left:1.4em}.formal-body li{margin-bottom:6px}.formal-body li::marker{color:var(--gold-ink);font-weight:600}.formal-foot{display:flex;justify-content:space-between;gap:16px;margin-top:40px;padding-top:14px;border-top:1px solid var(--border);font-size:.6875rem;color:var(--text-muted);font-variant-numeric:tabular-nums}
@media(max-width:767px){.formal-letterhead{flex-direction:column;align-items:flex-start;gap:6px}.formal-address{text-align:left;letter-spacing:.04em}.formal-head{flex-direction:column}.formal-print{width:100%}.formal-foot{flex-direction:column;gap:4px}}
/* Cookiemelding en keuze. Een smalle balk onderaan, twee even grote knoppen en
   een link naar de uitleg; hij verschijnt alleen zolang er geen keuze is
   opgeslagen. Onder .melding krijgt de pagina extra ruimte, zodat de balk
   onderaan de pagina niets bedekt. */
.cookiebalk{position:fixed;inset:auto 0 0;z-index:60;background:var(--navy);color:#d1d9e6;border-top:2px solid var(--gold);box-shadow:0 -6px 24px #0f204433}
.cookiebalk-inner{display:flex;align-items:center;justify-content:space-between;gap:14px 36px;padding-block:14px}
.cookiebalk p{margin:0;font-size:var(--text-s);line-height:1.6;max-width:92ch}
.cookiebalk a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#93a3bf;white-space:nowrap}
.cookiebalk-knoppen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;flex-shrink:0}
.cookiebalk .btn{min-height:44px;min-width:8.5rem;padding:10px 18px;background:#fff;color:var(--navy);border-color:#fff;text-wrap:balance}
.cookiebalk-inner{position:relative}
.cookiebalk-sluit{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;margin-right:-10px;padding:0;color:#9fabc4;background:none;border:0;border-radius:6px;cursor:pointer}
.cookiebalk-sluit svg{width:18px;height:18px}
.cookiebalk :focus-visible{outline-color:var(--gold)}
html.melding body{padding-bottom:104px}
.cookiekeuze{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:10px;padding:16px 18px;background:var(--bg-warm);border:1px solid var(--border);border-radius:8px}
.cookiekeuze span{font-size:var(--text-s);line-height:1.6;color:var(--text-secondary)}
.cookiekeuze .btn{min-height:44px;padding:9px 16px;font-size:var(--text-s)}
@media(max-width:767px){.cookiebalk-inner{flex-direction:column;align-items:stretch;gap:10px;padding-block:12px}.cookiebalk p{font-size:.8125rem;line-height:1.55;padding-right:40px}.cookiebalk-sluit{position:absolute;top:2px;right:0;margin:0}.cookiebalk a{white-space:normal}.cookiebalk-knoppen .btn{min-width:0;font-size:.8125rem}html.melding body{padding-bottom:170px}}
@media print{@page{margin:16mm 18mm 16mm}html{scroll-behavior:auto}body{background:#fff;color:#000;font-size:10.5pt}#navbar,body>footer,.contact-band,.skip-link,.formal-print,.hero-motion,.cookiebalk,.cookiekeuze{display:none!important}.formal{background:#fff;padding:0}.formal .container{width:100%}.formal-sheet{display:table;width:100%;max-width:none;border:0;border-radius:0;padding:0;box-shadow:none;border-collapse:collapse}.formal-letterhead{display:table-header-group;margin:0;border:0}.formal-foot{display:table-footer-group;margin:0;border:0}.formal-main{display:table-row-group}.formal-letterhead .logo{display:inline-block;font-size:15pt;color:#0f2044;margin:0 0 1mm}.formal-letterhead .logo span{color:#c8952e}.formal-address{display:block;text-align:left;font-size:7.5pt;color:#4d5a70;padding-bottom:2.5mm;margin-bottom:6mm;border-bottom:1.5pt solid #0f2044}.formal-foot span{display:block;font-size:7.5pt;color:#4d5a70;padding-top:2mm;margin-top:6mm;border-top:.75pt solid #cbd0d8}.formal-foot span+span{border-top:0;padding-top:0;margin-top:0}.formal-head{margin-bottom:6mm}.formal-head .section-title{font-size:18pt;color:#0f2044}.section-label{color:#805b14}.formal-meta{font-size:9pt;color:#33405a}.formal-body h2{font-size:11.5pt;color:#0f2044;margin:6mm 0 2mm;break-after:avoid}.formal-body p,.formal-body li{font-size:10pt;line-height:1.55;color:#1a1a2e;break-inside:avoid}.formal-body ol{padding-left:5mm}a{color:inherit;text-decoration:none}}
/* De Klantlogin staat in het menu; alleen waar het menu er geen ruimte voor heeft (768 tot 1219 px), staat hij in de voet. */
@media(min-width:768px) and (max-width:1219px){.footer-login{display:block}}
/* v1.17: typografie zonder weduwen. Koppen balanceren (de regels worden even lang, nooit één woord alleen),
   lopende tekst wikkelt "pretty" (Chromium voorkomt een los laatste woord). Knoppen en de vertrouwensbalk
   breken nooit binnen hun label. tests/typografie.spec.js meet het op zes breedtes. */
h1,h2,h3,.contact-band .section-title{text-wrap:balance}.tagline,.section-sub,main p,main li{text-wrap:pretty}.btn,.trust-items li{white-space:nowrap}
/* v1.17: "Vraag het uw cijfers" onder de voorbeelden op de startpagina. */
.proof-ask{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 48px;margin-top:52px;padding-top:30px;border-top:1px solid #ffffff29}.proof-ask h3{color:#fff;font-size:var(--h3-l);letter-spacing:-.03em;line-height:1.2;margin-bottom:10px}.proof-ask p{max-width:58ch;font-size:var(--text);line-height:1.8}.proof-ask .section-more{flex-shrink:0;margin-top:0}
@media(max-width:767px){.proof-ask{flex-direction:column;align-items:flex-start;margin-top:40px;padding-top:24px}}
/* v1.17: uitgangspunten op Over mij; rijen zonder teller, want de nummering hoort bij de verhalen erboven. */
.principles{margin-top:56px}.principles-title{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700;letter-spacing:var(--track-h2);margin-bottom:20px}.principles-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--border)}.principles-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:6px 48px;padding:18px 0;border-bottom:1px solid var(--border)}.principles-list h3{font-size:var(--h3);line-height:1.4;letter-spacing:-.02em}.principles-list li:last-child{border-bottom:0}.principles-list p{color:var(--text-secondary);font-size:.9375rem;line-height:1.75}
@media(max-width:767px){.principles{margin-top:40px}.principles-list li{grid-template-columns:1fr;padding:16px 0}}
/* Een losse link in een opsomming: 44px klikvlak zonder dat de regel verspringt. */
.feature-link{display:inline-block;padding-block:10px;margin-block:-10px;color:var(--navy);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
/* Filmpje in een eigen speler (src/video.js). Vóór de klik een kaart: het beginbeeld, een gouden speelknop en de duur. */
.video-blok{margin:28px 0 0}.video-start{position:relative;display:block;aspect-ratio:16/9;border:1px solid #ffffff29;border-radius:12px;overflow:hidden;background:var(--bg-warm);color:#fff;text-decoration:none;isolation:isolate;container-type:inline-size}.video-start img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease)}.video-start::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0f204400 48%,#0f20448c 66%,#0f2044eb 90%);pointer-events:none}.video-start::before{content:attr(data-titel);position:absolute;left:5.5cqi;bottom:calc(5cqi + max(1.25rem,4.4cqi));z-index:1;padding-top:max(10px,2.2cqi);background:linear-gradient(var(--gold),var(--gold)) 0 0/max(28px,6cqi) 3px no-repeat;color:#fff;font-family:var(--font-display);font-size:clamp(1.125rem,5.6cqi,2rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;pointer-events:none}.video-speel{position:absolute;right:4.5cqi;bottom:4.5cqi;z-index:1;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--gold);color:var(--navy);box-shadow:0 10px 30px #0000004d;transition:transform 220ms var(--ease),background-color 220ms var(--ease)}.video-speel svg{width:26px;height:26px;margin-left:3px}.video-speel:before{content:"";position:absolute;inset:-8px;border:2px solid var(--gold);border-radius:50%;opacity:0}.in-beeld .video-speel:before{animation:video-ring 1400ms var(--ease) 300ms 1}@keyframes video-ring{0%{opacity:.9;transform:scale(.85)}to{opacity:0;transform:scale(1.5)}}.video-duur{position:absolute;left:5.5cqi;bottom:5cqi;z-index:1;color:#dfe5f0;font-size:clamp(.75rem,2.7cqi,.9375rem);font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums}@media(hover:hover){.video-start:hover img{transform:scale(1.03)}.video-start:hover .video-speel{transform:scale(1.08);background:var(--gold-light)}}.video-start:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.video-blok figcaption{margin-top:10px;font-size:.8125rem;line-height:1.6;color:#b9c3d6}.video-klein{flex:0 0 min(360px,40%);margin:0}.video-klein .video-speel{width:48px;height:48px}.video-klein .video-speel svg{width:20px;height:20px}.proof-ask:has(.video-klein){align-items:center}@media(max-width:767px){.video-klein{flex-basis:auto;width:100%}}
/* De speler: navy vlak, bediening op een strook die wegvalt tijdens het kijken, ondertiteling in Inter boven de strook. */
.vs{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--navy);color:#fff;container-type:inline-size;font-family:var(--font-text)}.vs video{display:block;width:100%;height:100%;object-fit:contain;background:var(--navy);cursor:pointer}.vs.vol{width:100%;height:100%;aspect-ratio:auto;border-radius:0}.vs.stil,.vs.stil video{cursor:none}.vs-midden{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}.vs-groot{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--gold);color:var(--navy);box-shadow:0 10px 30px #0000004d;opacity:0;transform:scale(.9);transition:opacity 220ms var(--ease),transform 220ms var(--ease)}.vs-groot svg{width:26px;height:26px;margin-left:3px}.vs:not(.speelt) .vs-groot{opacity:1;transform:none}.vs.klaar .vs-groot{opacity:0}
.vs-ondertitel{position:absolute;left:0;right:0;bottom:60px;display:flex;justify-content:center;padding:0 6%;pointer-events:none;transition:bottom 240ms var(--ease)}.vs.stil .vs-ondertitel{bottom:5%}.vs-ondertitel span{max-width:46ch;padding:.3em .75em;border-radius:6px;background:#0f2044e6;color:#fff;font-size:clamp(.8125rem,2.5cqi,1.75rem);font-weight:500;line-height:1.45;text-align:center;white-space:pre-line;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.vs-balk{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:2px;padding:2px 6px;background:#0f2044eb;transition:opacity 240ms var(--ease),transform 240ms var(--ease)}.vs.stil .vs-balk{opacity:0;transform:translateY(8px);pointer-events:none}.vs-knop{position:relative;display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border:0;border-radius:6px;background:none;color:#fff;cursor:pointer;transition:background-color 160ms var(--ease),color 160ms var(--ease)}.vs-knop svg{width:22px;height:22px}.vs-knop:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}@media(hover:hover){.vs-knop:hover{background:#ffffff1a}}.vs-speel{color:var(--gold)}.vs-cc[aria-pressed=true]{color:var(--gold-light)}.vs-cc[aria-pressed=true]:after{content:"";position:absolute;left:13px;right:13px;bottom:7px;height:2px;border-radius:1px;background:var(--gold)}.vs-geluid[aria-pressed=true]{color:#b9c3d6}.vs-snel{flex-basis:auto;width:auto;min-width:44px;padding:0 6px;font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap}.vs-snel.aan{color:var(--gold-light)}.vs-snel.aan:after{content:"";position:absolute;left:10px;right:10px;bottom:7px;height:2px;border-radius:1px;background:var(--gold)}
.vs-tijd{padding:0 6px;color:#dfe5f0;font-size:.8125rem;font-variant-numeric:tabular-nums;white-space:nowrap}.vs-lijn{position:relative;flex:1;min-width:64px;height:44px;margin:0 8px;display:flex;align-items:center}.vs-voortgang{width:100%;height:44px;margin:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}.vs-voortgang::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--gold) var(--pos,0%),#ffffff4d var(--pos,0%))}.vs-voortgang::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--gold) var(--pos,0%),#ffffff4d var(--pos,0%))}.vs-voortgang::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5px;border:2px solid #fff;border-radius:50%;background:var(--gold);-webkit-appearance:none;appearance:none}.vs-voortgang::-moz-range-thumb{width:10px;height:10px;border:2px solid #fff;border-radius:50%;background:var(--gold)}.vs-voortgang:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}.vs-marken{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;pointer-events:none}.vs-marken span{position:absolute;top:0;width:2px;height:4px;margin-left:-1px;background:var(--navy)}@container (max-width:480px){.vs-ondertitel{bottom:54px}.vs-ondertitel span{padding:.2em .6em}}@container (max-width:430px){.vs-geluid{display:none}}@container (max-width:380px){.vs-tot{display:none}.vs-lijn{margin:0 4px}}
/* Hoofdstukken onder het beeld; op een telefoon een strook die zijwaarts scrollt. */
.vs-hoofdstukken{display:flex;gap:6px;margin-top:12px;padding-bottom:2px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}.vs-hoofdstukken::-webkit-scrollbar{display:none}.vs-hoofdstukken button{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid #ffffff29;border-radius:6px;background:#ffffff0a;color:#dfe5f0;font:600 .8125rem/1.2 var(--font-text);cursor:pointer;scroll-snap-align:start;transition:border-color 160ms var(--ease),color 160ms var(--ease)}.vs-hoofdstuk-tijd{color:var(--gold-light);font-variant-numeric:tabular-nums}.vs-hoofdstukken button[aria-current]{border-color:#c8952e99;color:#fff}.vs-hoofdstukken button[aria-current]:after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:1px;background:var(--gold)}.vs-hoofdstukken button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}@media(hover:hover){.vs-hoofdstukken button:hover{border-color:#ffffff66;color:#fff}}@media(min-width:768px){.vs-hoofdstukken{flex-wrap:wrap;overflow:visible}}
/* Theaterweergave op de startpagina: navy laag over de pagina, de speler groot in het midden. */
.video-theater{width:min(1120px,calc(100vw - 32px),calc((100dvh - 168px)*16/9));max-width:none;max-height:none;margin:auto;padding:0;border:0;background:var(--navy);color:#fff;overflow:visible}.video-theater::backdrop{background:var(--navy)}.video-theater[open]{animation:video-in 360ms var(--ease)}@keyframes video-in{0%{opacity:0;transform:translateY(12px) scale(.98)}}.vt-kop{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.vt-titel{margin:0;color:#fff;font-family:var(--font-display);font-size:clamp(1.25rem,2.4vw,1.75rem);font-weight:800;letter-spacing:-.03em}.vt-titel:after{content:"";display:block;width:40px;height:3px;margin-top:8px;background:var(--gold)}.vt-sluit{border:1px solid #ffffff3d}html.vt-open{overflow:hidden}
@media(prefers-reduced-motion:reduce){.video-start img,.video-speel,.vs-groot,.vs-balk,.vs-ondertitel{transition:none}.in-beeld .video-speel:before,.video-theater[open]{animation:none}}

/* Feliro's tactile data workshop: a single spatial signature, not a second theme. */
[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.data-workshop{min-width:0;position:relative;align-self:center}.workshop-heading{display:flex;justify-content:space-between;gap:16px;padding:0 18px;font-size:.625rem;font-weight:650;letter-spacing:.13em;text-transform:uppercase;color:var(--text-muted)}.workshop-edition{color:var(--gold-ink)}.workshop-viewport{position:relative;width:100%;aspect-ratio:1.6;isolation:isolate}.scene-fallback{width:100%;height:100%;object-fit:contain}.workshop-viewport canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 240ms ease}.workshop-viewport[data-state=ready] canvas{opacity:1}.workshop-viewport[data-state=ready] .scene-fallback{visibility:hidden}.scene-turn{position:absolute;right:16px;bottom:12px;display:flex;gap:5px;z-index:2}.scene-turn button{background:#f8f7f5e8;border:1px solid var(--border);color:var(--navy);width:44px;height:44px;border-radius:50%;font-size:1.3rem;cursor:pointer}.workshop-steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #d3d2cf;border-bottom:1px solid #d3d2cf;margin:0 18px}.workshop-steps button{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;border:0;min-height:55px;color:var(--text-secondary);background:transparent;cursor:pointer;font-size:.85rem;font-weight:600}.workshop-steps button span{font-size:.65rem;color:var(--gold-ink);font-weight:500}.workshop-steps button::after{content:'';position:absolute;bottom:-1px;left:10px;right:10px;height:3px;background:var(--gold);transform:scaleX(0);transition:transform 200ms var(--ease)}.workshop-steps button[aria-pressed=true]{color:var(--navy)}.workshop-steps button[aria-pressed=true]::after{transform:scaleX(1)}#workshop-caption{min-height:88px;margin:20px 18px 0;display:flex;flex-direction:column;gap:3px;font-size:.8rem;color:var(--text-secondary);line-height:1.65}#workshop-caption strong{font-size:.95rem;color:var(--navy);font-weight:600}
.dashboard-studio{background:var(--navy);color:#d1d9e6;position:relative;overflow:clip}.dashboard-studio .section-label{color:var(--gold-light)}.studio-heading{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}.studio-copy{min-width:0}.studio-heading .data-workshop{background:var(--bg-warm);border-radius:var(--radius);padding:24px 12px 6px;color:var(--text-secondary)}.studio-heading .data-workshop :focus-visible{outline-color:var(--gold-ink)}.studio-heading .section-title{color:#fff;font-size:var(--h2);line-height:1.12;margin:0 0 26px;letter-spacing:var(--track-h2)}.studio-heading .section-title span,.studio-heading .section-title em{display:block}.studio-heading em{font-style:normal;color:var(--gold-light)}.studio-intro p{font-size:1rem;line-height:1.8;margin-bottom:16px}.studio-link{display:inline-flex;align-items:center;gap:20px;min-height:44px;color:#fff;border-bottom:1px solid #71809d;font-size:.875rem;font-weight:600}.studio-link span{color:var(--gold-light)}.studio-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:76px}.studio-cases article{border-top:1px solid #ffffff29;padding-top:24px}.studio-cases article>span{color:var(--gold-light);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase}.studio-cases h3{color:#fff;font-size:1.3rem;font-weight:550;letter-spacing:-.035em;margin:15px 0 12px}.studio-cases p{font-size:.85rem;line-height:1.8}.studio-data{margin-top:44px;border-top:1px solid #ffffff29;border-bottom:1px solid #ffffff29;padding:8px 0}.studio-data summary{padding:12px 0;color:#fff;font-size:.875rem;font-weight:500;cursor:pointer;min-height:44px}.studio-data p{padding:8px 0 16px;max-width:90ch;font-size:.85rem;line-height:1.85}.studio-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:60px;margin-top:28px;font-size:clamp(1.15rem,2.6vw,1.6rem);font-weight:500;color:#fff;letter-spacing:-.03em}.studio-cta span{color:var(--gold-light)}.dashboard-studio :focus-visible{outline-color:#d4a84a}
@media(hover:hover) and (pointer:fine){.workshop-steps button:hover{background:#eeeae2}.scene-turn button:hover{background:#fff}.studio-link:hover,.studio-cta:hover{color:var(--gold-light)}}
@media(max-width:1100px){.workshop-heading{font-size:.56rem;padding:0 10px}.workshop-edition{display:none}.studio-heading{gap:36px}}
@media(max-width:767px){.data-workshop{max-width:600px;width:100%;margin:auto}.workshop-heading{font-size:.6rem;padding:0 4px}.workshop-edition{display:block}.workshop-viewport{aspect-ratio:1.3}.workshop-steps{margin:0}.workshop-steps button{min-height:52px;font-size:.8rem}.scene-turn{right:0;bottom:8px}#workshop-caption{margin:16px 0 0;min-height:75px;font-size:.75rem}#workshop-caption strong{font-size:.875rem}.studio-heading{grid-template-columns:1fr;gap:26px}.studio-intro p{font-size:.9375rem}.studio-cases{grid-template-columns:1fr;gap:28px;margin-top:54px}.studio-cases h3{font-size:1.35rem;margin-top:10px}.studio-data{margin-top:32px}.studio-cta{font-size:1.15rem}}
@media(prefers-reduced-motion:reduce){.workshop-viewport canvas{transition:none}.workshop-steps button::after{transition:none}}
/* Keep the broad hero intact; the spatial demo belongs to the featured dashboard section. */
/* One compact, legible example beside the overview per function; the link opens the full-size image. */
.dashboard-gallery{scroll-margin-top:110px;margin-top:56px}
.gallery-heading{margin-bottom:26px}
.gallery-heading h3{font-size:var(--h2);line-height:1.15;letter-spacing:-.045em;color:#fff;font-weight:550}
.gallery-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto auto;gap:28px 52px;align-items:stretch}.gallery-copy{display:grid;grid-row:1/3;grid-template-rows:subgrid;min-width:0}.gallery-text{grid-row:1}.gallery-mobile{grid-row:2;display:flex;flex-direction:column;margin:0;min-width:0;contain:size}.gallery-mobile-frame{flex:1;min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:24px;align-items:center}.gallery-mobile-frame img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain}.gallery-mobile-frame p{font-size:.85rem;line-height:1.8;max-width:34ch;margin:0}.gallery-mobile figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:12px;padding:16px 0 0}.gallery-mobile figcaption strong{color:#f8f7f5;font-size:.9375rem;font-weight:550;line-height:1.4;letter-spacing:-.02em}.gallery-mobile figcaption>span{color:var(--gold-light);font-size:.75rem}
.dashboard-image{min-width:0;margin:0;display:flex;flex-direction:column}
.dashboard-image-link{position:relative;display:block;border-radius:10px;overflow:hidden;border:1px solid #ffffff40;background:#f3f6f9}
.dashboard-image img{display:block;width:100%;height:auto}
.image-expand{display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:10px 18px;background:#f8f7f5;color:#203657;font-size:.75rem;font-weight:600;border-top:1px solid #d4dbe4}
.image-expand svg{width:16px;height:16px;flex-shrink:0}
.dashboard-image figcaption{display:flex;gap:14px;padding:16px 0 0}
.dashboard-image h4{font-size:1.05rem;line-height:1.4;color:#fff;font-weight:550;margin:0 0 6px;letter-spacing:-.02em}
.dashboard-image figcaption p{font-size:.8rem;line-height:1.75}
.gallery-copy h4{font-size:1.05rem;line-height:1.4;color:#fff;font-weight:550;margin:0 0 8px;letter-spacing:-.02em}
.gallery-intro{font-size:.85rem;line-height:1.8;margin:0 0 14px;max-width:66ch}
.function-list{list-style:none;padding:0;margin:0 0 18px;border-top:1px solid #ffffff29}
.function-list li{display:grid;grid-template-columns:max-content 1fr;gap:2px 20px;padding:11px 0;border-bottom:1px solid #ffffff29;font-size:.85rem;line-height:1.7}
.function-list strong{color:#fff;font-weight:600}
.gallery-takeaway{font-size:.85rem;line-height:1.8;max-width:66ch}
.scene-hotspots{position:absolute;inset:0;z-index:3;pointer-events:none}
.scene-hotspots button{position:absolute;left:25%;top:52%;transform:translate(-50%,-50%);pointer-events:auto;width:44px;height:44px;border:2px solid #e8ca87;border-radius:50%;background:#0f2044;color:#fff;font-size:.875rem;font-weight:650;box-shadow:0 3px 12px #0f204430;cursor:pointer}
.scene-hotspots button:nth-child(3){left:79%;top:64%}
.scene-hotspots button[aria-expanded=true]{background:#805b14;color:white;border-color:#fff}
.workshop-hint{margin:0 18px 15px;font-size:.72rem;line-height:1.7;color:#3f4c63}
#workshop-caption{margin-top:0;min-height:104px;padding:0 0 16px;gap:5px}
#workshop-caption .scene-kpi-label{font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#58677e}
#workshop-caption .scene-kpi-value{font-size:1.75rem;line-height:1.25;letter-spacing:-.045em;font-weight:600;color:#0f2044}
#workshop-caption small{font-size:.62rem;color:#627188}
.studio-heading .workshop-steps{margin-top:15px}
.scene-hotspots button:nth-child(2){left:52%;top:78%}
.workshop-promise{position:relative;margin:0 18px 18px;padding:18px 52px 20px 18px;border:1px solid #d0b37c;border-left:3px solid #b28026;border-radius:8px;background:#fffdf8;box-shadow:0 6px 18px #0f20440b;animation:promise-appear 160ms ease-out}
.promise-close{position:absolute;right:3px;top:3px;width:44px;height:44px;border:0;background:transparent;color:#253b5d;font-size:1.5rem;font-family:inherit;cursor:pointer;border-radius:4px}
.promise-label{color:#805b14;font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;line-height:1.6;margin:0 0 6px}
.workshop-promise h3{font-size:1rem;font-weight:650;letter-spacing:-.025em;color:#0f2044;margin:0 0 8px;line-height:1.4}
#promise-copy{font-size:.8rem;color:#44516a;line-height:1.8;margin:0}
@keyframes promise-appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover) and (pointer:fine){.dashboard-image-link:hover .image-expand{background:#efe8d8}.scene-hotspots button:hover{background:#805b14}.promise-close:hover{background:#f0ece4}}
@media(max-width:767px){
  .gallery-layout{grid-template-columns:1fr;grid-template-rows:none;gap:26px}.gallery-examples,.gallery-copy{grid-row:auto;grid-template-rows:none}.gallery-text,.gallery-mobile{grid-row:auto}.gallery-mobile{margin-top:8px;contain:none}.gallery-mobile-frame{gap:18px;grid-template-rows:auto}.gallery-mobile-frame img{height:300px}.gallery-mobile-frame p{font-size:.8125rem}.gallery-copy h4{font-size:1rem}
  .function-list li{grid-template-columns:1fr;gap:1px;padding:10px 0;font-size:.8125rem}.gallery-takeaway{font-size:.8125rem}
  .dashboard-image h4{font-size:1rem}.dashboard-image figcaption{gap:10px;padding-top:14px}
  .workshop-hint{margin:0 0 14px;font-size:.7rem;padding-right:0}
  .workshop-promise{margin:0 0 16px;padding:16px 42px 17px 14px}
  .workshop-promise h3{font-size:.95rem}.promise-close{right:0;top:0}#promise-copy{font-size:.875rem}
}
@media(prefers-reduced-motion:reduce){.workshop-promise{animation:none}}
@media(min-width:768px) and (max-width:1023px){.studio-heading{grid-template-columns:1fr;gap:32px}.studio-copy{max-width:640px}.studio-heading .data-workshop{width:100%;max-width:620px;margin-inline:auto}}
@media(max-width:767px){.studio-heading .data-workshop{padding:20px 14px 0}.studio-heading .section-title{margin-bottom:24px}}
/* Native dialog for the full-size dashboard images; the link itself stays the no-JS path. */
.image-dialog{width:min(96vw,1600px);max-width:none;max-height:calc(100vh - 32px);padding:0;border:0;border-radius:12px;background:var(--bg-warm);color:var(--navy);box-shadow:0 30px 80px #0f204466}
.image-dialog::backdrop{background:#0f2044d9}
.image-dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 6px 6px 18px;border-bottom:1px solid var(--border)}
#image-dialog-title{margin:0;font-size:.8125rem;font-weight:600}
.dialog-close{width:44px;height:44px;border:0;border-radius:6px;background:transparent;color:var(--navy);font-size:1.6rem;line-height:1;font-family:inherit;cursor:pointer}
.image-dialog-frame{background:#f3f6f9}
.image-dialog-frame img{display:block;width:100%;height:auto;max-height:calc(100vh - 140px);object-fit:contain}
.image-dialog-note{margin:0;padding:8px 18px 10px;font-size:.7rem;color:var(--text-muted)}
.image-dialog[open]{animation:dialog-in 200ms var(--ease)}
@keyframes dialog-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(hover:hover) and (pointer:fine){.dialog-close:hover{background:#eeeae2}}
@media(prefers-reduced-motion:reduce){.image-dialog[open]{animation:none}}
/* KPI-waarden wisselen per weergave; met gelijke cijferbreedte springt het getal niet. */
.scene-kpi-value,.scene-kpi,.workshop-steps button,.scene-steps button{font-variant-numeric:tabular-nums}
/* Two supplied 2.0 dashboard examples; full-size files load on demand only. */
.gallery-examples { display: grid; grid-row: 1 / 3; grid-template-rows: subgrid; gap: 28px; min-width: 0; }
.gallery-examples .dashboard-image { margin: 0; }
.gallery-examples .dashboard-image img { aspect-ratio: 3 / 2; object-fit: contain; }
.gallery-examples .dashboard-image figcaption { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 12px; }
.gallery-examples .dashboard-image h4 { margin: 0; color: #f8f7f5; font-size: .9375rem; }
.gallery-examples .dashboard-image figcaption > span { color: var(--gold-light); font-size: .75rem; }
.workshop-points { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 18px 18px; border-block: 1px solid #d3d2cf; }
.workshop-points button { min-height: 52px; border: 0; background: transparent; color: var(--navy); font: inherit; cursor: pointer; padding: 8px 2px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.workshop-points button + button { border-left: 1px solid #e0e0dc; }
.workshop-points button:hover { background: #ebe7de; }
.workshop-points span { font-size: .6875rem; color: #4d5a70; }
.workshop-points strong { font-size: .75rem; font-variant-numeric: tabular-nums; }
.workshop-points[hidden] { display: none; }
@media(max-width:767px) { .workshop-points { margin-inline: 0; } }

/* Reserved from the first paint: these controls are hidden only without JavaScript (the js flag is set inline
   before rendering), and the data-point row keeps its height until experience.js fills it. Revealing them
   later shifted everything below by ~100px. */
html:not(.js) .workshop-steps,html:not(.js) .workshop-points,html:not(.js) [data-open-analytics]{display:none}
.workshop-points{min-height:54px}
/* v1.17: Vraag het uw cijfers (MCP) met een demo op dezelfde fictieve cijfers als de dashboards. */
.ask-data{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px 64px;align-items:start;margin-top:76px;padding-top:56px;border-top:1px solid #ffffff29}
.ask-title{font-size:var(--h2);line-height:1.15;letter-spacing:-.045em;color:#fff;font-weight:550;margin-bottom:20px}
.ask-intro{font-size:.9375rem;line-height:1.85;max-width:62ch}
.ask-steps{list-style:none;padding:0;margin:28px 0 0;border-top:1px solid #ffffff29}
.ask-steps li{display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr);gap:4px 24px;padding:14px 0;border-bottom:1px solid #ffffff29}
.ask-steps h3{color:#fff;font-size:1rem;font-weight:600;letter-spacing:-.02em;line-height:1.55}
.ask-steps p{font-size:.875rem;line-height:1.75}
.ask-note{margin-top:20px;max-width:62ch;font-size:.8125rem;line-height:1.8;color:#b9c3d6}
.ask-demo{background:var(--bg-warm);border-radius:var(--radius);padding:22px 22px 20px;color:var(--text-secondary)}
html:not(.js) .ask-demo{display:none}
.ask-demo-label{font-size:.75rem;font-weight:600;line-height:1.5;color:var(--gold-ink);margin-bottom:14px}
.ask-questions{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.ask-questions button{min-height:44px;padding:10px 16px;border:1px solid #c1c6cf;border-radius:22px;background:#fff;color:var(--navy);font-size:.8125rem;font-weight:600;line-height:1.4;text-align:left;white-space:nowrap;cursor:pointer;transition:background 150ms ease,border-color 150ms ease,color 150ms ease}
.ask-questions button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.ask-demo :focus-visible{outline-color:var(--gold-ink);outline-offset:3px}
.ask-chat{display:grid;gap:10px;margin-top:16px;min-height:16rem;align-content:start}
.ask-msg{margin:0}

.ask-a{width:100%;padding:14px 16px 12px;border:1px solid var(--border);border-radius:14px 14px 14px 4px;background:#fff}
.ask-text{font-size:.875rem;line-height:1.7;color:var(--text)}
.ask-figure{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:10px}
.ask-figure strong{font-family:var(--font-display);font-size:1.6rem;font-weight:700;letter-spacing:-.02em;color:var(--navy);font-variant-numeric:tabular-nums}
.ask-figure span{font-size:.75rem;color:var(--text-muted)}
.ask-table{width:100%;margin-top:10px;border-collapse:collapse;font-size:.8125rem;font-variant-numeric:tabular-nums}
.ask-table caption{caption-side:bottom;padding-top:6px;text-align:left;font-size:.72rem;color:var(--text-muted)}
.ask-table th,.ask-table td{padding:6px 0 6px 10px;border-bottom:1px solid var(--border);text-align:right;white-space:nowrap}
.ask-table th:first-child,.ask-table td:first-child{padding-left:0;text-align:left}
.ask-table thead th{font-size:.6875rem;font-weight:600;color:var(--text-muted)}
.ask-table tbody th{font-weight:600;color:var(--navy)}
.ask-source{margin-top:10px;font-size:.72rem;line-height:1.5;color:var(--text-muted)}
.ask-dots{justify-self:start;display:flex;gap:5px;padding:16px 18px;border:1px solid var(--border);border-radius:14px 14px 14px 4px;background:#fff}
.ask-dots span{width:6px;height:6px;border-radius:50%;background:var(--text-muted);animation:ask-dot 900ms ease-in-out infinite both}
.ask-dots span:nth-child(2){animation-delay:150ms}.ask-dots span:nth-child(3){animation-delay:300ms}
@keyframes ask-dot{0%,80%,100%{opacity:.25}40%{opacity:1}}
@keyframes ask-in{from{opacity:0}}
.ask-a.is-typing .ask-word{animation:ask-in 240ms var(--ease) both;animation-delay:calc(var(--i) * 28ms)}
.ask-a.is-typing .ask-figure,.ask-a.is-typing .ask-table,.ask-a.is-typing .ask-source{animation:ask-in 320ms var(--ease) both;animation-delay:calc(var(--words) * 28ms)}
@media(hover:hover) and (pointer:fine){.ask-questions button:hover{border-color:var(--navy)}}
@media(prefers-reduced-motion:reduce){.ask-a.is-typing .ask-word,.ask-a.is-typing .ask-figure,.ask-a.is-typing .ask-table,.ask-a.is-typing .ask-source,.ask-dots span{animation:none}.ask-questions button{transition:none}}
@media(max-width:1023px){.ask-data{grid-template-columns:minmax(0,1fr)}.ask-demo{max-width:620px}}
@media(max-width:767px){.ask-data{margin-top:54px;padding-top:40px;gap:32px}.ask-steps li{grid-template-columns:1fr;gap:2px}.ask-demo{padding:18px 14px 16px}.ask-a{padding:12px 12px 10px}.ask-table{font-size:.75rem}.ask-table th,.ask-table td{padding-left:8px}.ask-chat{min-height:0}}

/* One cinematic opening in the established navy / brass palette. */
.hero{background:#0b1932;min-height:520px;padding:54px 0 60px;isolation:isolate}
.hero-grid{display:block}
.hero-content{position:relative;z-index:2;max-width:660px}
.hero h1{color:#f7f6f2;max-width:14ch}@media(min-width:768px){.hero-line{white-space:nowrap}}
.hero h1 em{color:#e3b85e}
.hero-label{color:#e3b85e}.hero-label::before{background:#e3b85e}
.hero .tagline{color:#e0e4ed;max-width:57ch}

.hero .btn-primary{background:#e3b85e;color:#101f3d}
.hero .btn-outline{color:#f7f6f2;border-color:#9aabc4;background:#0f204460}
/* Both calls to action share one width: the widest label sets it. */
.hero .buttons{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px}
.hero .hero-image{position:absolute;z-index:-1;inset:0;max-height:none;aspect-ratio:auto;border-radius:0;background:#0b1932}
.hero-parallax{position:absolute;inset:0;overflow:hidden;opacity:.74}
.hero-parallax img{width:100%;height:100%;object-fit:cover;object-position:65% 50%;transform:scale(1.06)}
.hero .hero-image::after{inset:0;background:linear-gradient(90deg,#0b1932 2%,#0b1932f5 23%,#0b1932c9 41%,#0b19323b 72%,#0b193226),linear-gradient(0deg,#0b1932de,transparent 36%);z-index:1}
.hero-water{position:absolute;inset:0;pointer-events:none;opacity:.55;background:repeating-linear-gradient(102deg,transparent 0 46px,#e8c98a14 46px 52px,transparent 52px 104px);-webkit-mask-image:linear-gradient(180deg,transparent 56%,#000 76%,#000d 100%);mask-image:linear-gradient(180deg,transparent 56%,#000 76%,#000d 100%)}.hero-water-second{opacity:.4;background:repeating-linear-gradient(78deg,transparent 0 62px,#ffffff0c 62px 65px,transparent 65px 130px)}.hero-light{position:absolute;inset:-30%;background:radial-gradient(ellipse at 74% 30%,#e8c98a30,transparent 46%),linear-gradient(110deg,transparent 48%,#e8c98a16 53%,transparent 65%);opacity:.3;pointer-events:none}
.hero .hero-caption{display:none;left:auto;right:max(40px,calc((100vw - 1280px)/2));bottom:32px;max-width:360px;text-align:right;z-index:2}
.hero .hero-caption strong{font-size:1.125rem;line-height:1.55}
.hero .hero-caption>span{font-size:.625rem;letter-spacing:.17em}
/* Pause/play for the background: icon only, translucent, out of the way in the corner. */
.hero .hero-motion{position:absolute;right:max(24px,calc((100vw - 1280px)/2));bottom:20px;top:auto;z-index:3;width:44px;height:44px;min-height:0;padding:0;gap:0;color:#f7f6f2;background:#0b193266;border:1px solid #ffffff33;border-radius:50%;opacity:.5;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);cursor:pointer;transition:opacity 180ms ease,background 180ms ease}
.hero .hero-motion .icon{width:18px;height:18px;flex-basis:18px}
.hero .hero-motion:focus-visible{opacity:1}
.hero :focus-visible{outline-color:#efd199}
@media(hover:hover){.hero .btn-primary:hover{background:#efcc83}.hero .btn-outline:hover{background:#243853}.hero .hero-motion:hover{opacity:1;background:#0b1932a6}}
@media(min-width:1500px){.hero{padding:60px 0 68px;min-height:560px}}
@media(max-width:1023px){.hero{padding:50px 0 60px;min-height:500px}.hero-content{max-width:570px}.hero .hero-image::after{background:linear-gradient(90deg,#0b1932ed,#0b1932ad 60%,#0b193250),linear-gradient(0deg,#0b1932cf,transparent 40%)}.hero .hero-caption{right:24px}}
@media(max-width:767px){
  .hero{padding:34px 0 38px;min-height:0}
  .hero-content{max-width:100%}.hero h1{max-width:none;margin-bottom:24px}
  .hero-label{font-size:.6875rem;margin-bottom:24px}.hero .tagline{font-size:.9375rem;line-height:1.8;margin-bottom:24px}

  .hero .hero-image{inset:0;height:100%}
  .hero-parallax img{object-position:70% 50%}
  .hero .hero-image::after{background:linear-gradient(90deg,#0b1932c4,#0b193255),linear-gradient(0deg,#0b1932c8,transparent 55%)}
  .hero .hero-caption{inset:auto 20px 24px;text-align:left;max-width:none}
  .hero .hero-caption strong{font-size:1rem}.hero .hero-caption strong span{display:inline}
  .hero .hero-caption>span{margin-bottom:7px}
  .hero .buttons{display:grid;grid-auto-flow:row;grid-auto-columns:auto}
}
/* Phones and touch screens drift too; the control moves to the top right corner, clear of the buttons. */
@media(max-width:767px), (hover:none) and (pointer:coarse){
  .hero{min-height:0}
  .hero .hero-motion{top:14px;right:14px;bottom:auto;opacity:.7}
  .hero-parallax{opacity:.62}
}
@media(prefers-reduced-motion:reduce){.hero-parallax img{transform:none}.hero-light{display:none}.hero-water{display:none}.hero-motion{display:none}}
/* Drag horizontally; vertical gestures and pinch zoom stay with the browser. */
.workshop-viewport,.scene-hotspots button{touch-action:pan-y pinch-zoom}.workshop-viewport canvas{touch-action:pan-y pinch-zoom;cursor:grab}
.workshop-viewport[data-dragging=true] canvas{cursor:grabbing}
.workshop-viewport[data-dragging=true] .scene-hotspots{visibility:hidden}
.scene-turn .scene-reset{font-size:1.05rem}
.scene-play{position:absolute;left:16px;bottom:12px;z-index:2;min-height:44px;padding:0 13px;border:1px solid #c9c5bd;border-radius:5px;color:#34425b;background:#f8f7f5eb;font-size:.6875rem;font-weight:600;cursor:pointer}
.studio-heading .data-workshop{background:radial-gradient(ellipse at 62% 32%,#fff 5%,#f0eee8 100%);border:1px solid #e4ddd1}
@media(max-width:767px){.scene-play{left:0;bottom:8px;padding:0 9px}.scene-turn{gap:3px}.scene-turn button{width:44px;height:44px}.workshop-hint{font-size:.6875rem}}

.about-ai-note a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;color:var(--navy);font-weight:600}

@media(prefers-reduced-motion:reduce){.scene-play{display:none}}

/* Shared interaction language: precise, tactile, and still recognisably Feliro. */
:root {
  --control-size: 48px;
  --control-small: 44px;
  --control-radius: 6px;
  --control-motion: 180ms cubic-bezier(.2,.8,.25,1);
}
.icon { width: 20px; height: 20px; flex: 0 0 20px; pointer-events: none; }
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--control-size); padding: 11px 22px;
  border-radius: var(--control-radius); font-size: .875rem; font-weight: 600; line-height: 1.6;
  transition: transform var(--control-motion), background var(--control-motion), border-color var(--control-motion), box-shadow var(--control-motion);
}
.btn > * { position: relative; z-index: 1; }
.btn::before {
  content: ''; position: absolute; inset: -60% -20%; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, #ffffff28 50%, transparent 65%);
  transform: translateX(-115%); transition: transform 520ms cubic-bezier(.2,.6,.3,1);
}
.buttons .btn { min-width: 176px; }
.btn:focus-visible { box-shadow: 0 4px 14px #0f204421; }
.btn:active { transform: translateY(1px) scale(.98); box-shadow: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn .icon, .studio-link .icon, .studio-cta .icon, .image-expand svg { transition: transform var(--control-motion); }

.scene-turn button, .promise-close, .dialog-close, .mobile-toggle {
  width: var(--control-small); height: var(--control-small); padding: 0;
  align-items: center; justify-content: center; border-radius: var(--control-radius);
  transition: transform var(--control-motion), background var(--control-motion), border-color var(--control-motion), box-shadow var(--control-motion);
}
.scene-turn button, .promise-close, .dialog-close { display: inline-flex; }
.scene-turn button .icon { transition: transform 240ms var(--ease); }
.scene-play, .hero-motion {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-small); border-radius: var(--control-radius); font-weight: 600; line-height: 1.5;
  transition: transform var(--control-motion), background var(--control-motion), border-color var(--control-motion);
}
.scene-play { font-size: .75rem; }
.scene-play .icon, .hero-motion .icon { width: 16px; height: 16px; flex-basis: 16px; }
.hero-motion { font-size: .75rem; }
.motion-pause, .hero-motion[aria-pressed=true] .motion-play { display: none; }
.hero-motion[aria-pressed=true] .motion-pause { display: block; }
.scene-turn button:active, .promise-close:active, .dialog-close:active, .mobile-toggle:active,
.scene-play:active, .hero-motion:active { transform: scale(.94); }
.workshop-steps button { min-height: var(--control-size); transition: background var(--control-motion), color var(--control-motion); }
.workshop-steps button:active { background: #e5dfd2; }
.scene-hotspots button { transition: background var(--control-motion), border-color var(--control-motion), box-shadow var(--control-motion); }
.scene-hotspots button:active { box-shadow: 0 0 0 5px #c8952e25; }
.image-expand { min-height: var(--control-size); font-size: .8125rem; transition: background var(--control-motion); }
.image-expand svg { width: 20px; height: 20px; }
.studio-link { gap: 14px; text-decoration: none; transition: color var(--control-motion), border-color var(--control-motion); }
.studio-link .icon, .studio-cta .icon { color: var(--gold-light); }
.studio-cta .icon { width: 24px; height: 24px; flex-basis: 24px; }
.about-ai-note a, .contact-details a, footer a:not(.logo) {
  text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: transparent; transition: text-decoration-color var(--control-motion), color var(--control-motion);
}
.about-ai-note a, .contact-details a { text-decoration-color: #a6aebb; }
summary::after { display: none; }
summary .summary-icon { width: 18px; height: 18px; flex-basis: 18px; transition: transform var(--control-motion); }
details[open] > summary .summary-icon { transform: rotate(45deg); }
.service-features li::before { content: ''; width: 5px; height: 5px; margin-top: 11px; flex: 0 0 5px; background: var(--gold-ink); border-radius: 50%; }

/* A faint measuring grid and moving light, confined to the image side of the hero. */
.hero-gridlight {
  position: absolute; inset: 0 -8% 0 35%; pointer-events: none; opacity: .22;
  background-image: linear-gradient(#d5c39724 1px, transparent 1px), linear-gradient(90deg, #d5c39724 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at 65% 45%, #000 8%, transparent 68%);
}
.hero-light {
  background: radial-gradient(ellipse at 78% 35%, #e8c98a75, transparent 42%), linear-gradient(110deg, transparent 48%, #e8c98a36 53%, transparent 63%);
}

/* One optional working example, not another full dashboard or lead form. */
.debtor-demo { margin-top: 48px; border: 1px solid #72809a; border-radius: 12px; overflow: clip; }
.debtor-demo > summary { padding: 24px 28px; color: #fff; font-size: clamp(1.1rem,2vw,1.4rem); line-height: 1.5; letter-spacing: -.025em; }
.demo-eyebrow { display: block; color: #e0b963; font-size: .6875rem; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 4px; }
.debtor-demo > summary .icon { width: 24px; height: 24px; flex-basis: 24px; }
.debtor-demo[open] > summary { border-bottom: 1px solid #72809a; }
.demo-content { padding: 28px; background: var(--bg-warm); color: var(--text-secondary); }
.demo-content :focus-visible { outline-color: var(--gold-ink); }
.demo-intro { font-size: .9375rem; max-width: 85ch; margin-bottom: 28px; }
.demo-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 36px; align-items: start; }
.demo-source h3 { font-size: 1.2rem; letter-spacing: -.025em; margin-bottom: 8px; }
.demo-customer { font-size: .75rem; margin-bottom: 22px; }
.invoice-list { padding: 0; margin: 0; border: 0; min-width: 0; }
.invoice { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 12px; padding: 18px 0; border-top: 1px solid #c9cbd0; cursor: pointer; }
.invoice input { appearance: none; width: 20px; height: 20px; border: 1.5px solid #778398; border-radius: 4px; margin: 0; background: #fff; cursor: pointer; position: relative; }
.invoice input:checked { background: var(--navy); border-color: var(--navy); }
.invoice input:checked::after { content: ''; position: absolute; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); top: 5px; left: 4px; }
.invoice strong { display: block; color: var(--navy); font-weight: 600; font-size: .8125rem; }
.invoice small { display: block; font-size: .6875rem; }
.invoice-amount { font-size: .875rem; color: var(--navy); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-total { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; padding-top: 20px; border-top: 1px solid #c9cbd0; font-size: .75rem; }
.demo-total strong { font-size: 1.5rem; letter-spacing: -.04em; color: var(--navy); font-variant-numeric: tabular-nums; }
.demo-tone { margin-top: 28px; }
.demo-tone > p { font-size: .75rem; font-weight: 600; margin-bottom: 10px; }
.tone-options { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid #b8bdc6; border-radius: 8px; gap: 3px; }
.tone-options button { min-height: 44px; border: 0; border-radius: 5px; background: transparent; color: var(--text-secondary); font-size: .8125rem; font-weight: 600; cursor: pointer; transition: background var(--control-motion), color var(--control-motion); }
.tone-options button[aria-pressed=true] { background: var(--navy); color: #fff; }
.demo-data-note { margin-top: 22px; font-size: .75rem; line-height: 1.8; max-width: 46ch; }
.demo-letter { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 24px; box-shadow: 0 6px 24px #0f204408; min-width: 0; }
.demo-letter-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 2px solid var(--navy); }
.demo-letter-head > span:last-child { color: var(--gold-ink); font-size: .625rem; text-align: right; text-transform: uppercase; letter-spacing: .08em; }
.demo-letter-head .logo { font-size: 1.45rem; min-height: auto; }
.demo-envelope { margin: 18px 0; font-size: .75rem; }
.demo-envelope > div { display: grid; grid-template-columns: 75px 1fr; gap: 10px; margin-bottom: 6px; }
.demo-envelope dt { color: var(--text-muted); }
.demo-envelope dd { margin: 0; color: var(--navy); overflow-wrap: anywhere; }
#demo-draft { display: block; width: 100%; min-height: 320px; resize: vertical; border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; padding: 18px 0; color: #34425b; background: #fff; font: .8125rem/1.8 Inter,system-ui,sans-serif; }
.demo-actions { margin-top: 20px; }
.demo-actions .btn { width: 100%; }
.demo-status { min-height: 40px; font-size: .75rem; line-height: 1.6; margin-top: 10px; }

@media (hover:hover) and (pointer:fine) {
  .btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 6px 16px #0f204424; }
  .btn:not(:disabled):hover::before { transform: translateX(115%); }
  .btn:not(:disabled):hover .icon { transform: translateY(-1px) rotate(-5deg); }
  .btn:active { transform: translateY(1px) scale(.98); }
  .scene-turn button:hover { border-color: #aa9061; box-shadow: 0 2px 8px #0f204410; }
  .scene-turn button[data-turn='-1']:hover .icon { transform: rotate(-35deg); }
  .scene-turn button[data-turn='1']:hover .icon { transform: rotate(35deg); }
  .scene-reset:hover .icon { transform: scale(.9); }
  .studio-link:hover .icon { transform: translateY(3px); }
  .studio-cta:hover .icon { transform: translateX(3px); }
  .dashboard-image-link:hover .image-expand svg { transform: scale(1.12); }
  .about-ai-note a:hover, .contact-details a:hover, footer a:not(.logo):hover { text-decoration-color: currentColor; }
  .debtor-demo > summary:hover { color: #f3d18e; background: #ffffff06; }
  .invoice:hover { background: #ede8de70; }
  .tone-options button:not([aria-pressed=true]):hover { background: #e7e3dc; }
}
@media (max-width:767px) {
  .buttons { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .buttons .btn, .contact-info .btn { width: 100%; min-height: 48px; }
  .hero-motion { font-size: .6875rem; }
  .hero-gridlight { inset-inline-start: 15%; opacity: .16; }
  .scene-play { padding-inline: 8px; gap: 6px; font-size: .6875rem; }
  .demo-layout { grid-template-columns: 1fr; gap: 24px; }
  .debtor-demo > summary { padding: 20px 18px; font-size: 1.125rem; }
  .demo-content { padding: 20px 16px; }
  .demo-letter { padding: 20px 16px; }
  .demo-envelope > div { grid-template-columns: 1fr; gap: 0; margin-bottom: 10px; }
  .invoice { gap: 8px; }
  .invoice-amount { font-size: .8125rem; }
  .invoice small { font-size: .625rem; }
}
@media (prefers-reduced-motion:reduce) {
  .btn, .btn .icon, .scene-turn button, .scene-turn button .icon, .promise-close, .dialog-close,
  .scene-play, .hero-motion, .studio-link .icon, .studio-cta .icon, .image-expand svg { transform: none !important; }
  .btn::before, .hero-gridlight { display: none; }
}
/* Bedragen, factuurnummers en totalen staan onder elkaar: cijfers met gelijke breedte. */
.invoice-amount,.demo-total,.demo-letter,.demo-customer,.invoice strong{font-variant-numeric:tabular-nums}

/* Zoeken op de site, in de voet onder de merkregel (DESIGN.md, "Zoeken op de site"). Zonder JavaScript is het veld
   er niet; met JavaScript houdt het zijn plek al vanaf de eerste rendering vast (geen verspringende voet) en wordt
   het zichtbaar zodra zoeken.js draait. */
.zoek { display: none; position: relative; max-width: 22rem; margin-top: 22px; }
.js .zoek { display: block; }
.js .zoek:not(.is-klaar) { visibility: hidden; }
.zoek-veld { position: relative; }
.zoek-veld .icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #c2cbdc; }
.zoek-veld input {
  display: block; width: 100%; min-height: 48px; padding: 10px 14px 10px 42px;
  font: inherit; font-size: 1rem; line-height: 1.5; color: #fff;
  background: #ffffff0d; border: 1px solid #ffffff4d; border-radius: var(--control-radius);
  transition: border-color var(--control-motion), background var(--control-motion);
}
.zoek-veld input::placeholder { color: #a9b4c8; opacity: 1; }
.zoek-veld input:hover { border-color: #ffffff80; }
.zoek-veld input:focus { outline: none; border-color: var(--gold-light); background: #ffffff14; }
.zoek-veld input:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.zoek-paneel {
  position: absolute; z-index: 30; left: 0; top: calc(100% + 6px);
  width: max(100%, min(28rem, calc(100vw - 32px)));
  max-height: var(--zoek-max, none); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; color: var(--navy); border: 1px solid var(--border); border-radius: var(--control-radius);
  box-shadow: 0 10px 28px #0f20441f;
}
.zoek-paneel.zoek-boven { top: auto; bottom: calc(100% + 6px); }
.zoek-lijst { list-style: none; margin: 0; padding: 4px 0; }
.zoek-optie {
  display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 10px 14px 10px 13px;
  border-left: 3px solid transparent; cursor: pointer; line-height: 1.45;
}
.zoek-optie + .zoek-optie { border-top: 1px solid #efede9; }
.zoek-optie[aria-selected=true] { background: var(--gold-subtle); border-left-color: var(--gold); }
.zoek-pagina { order: -1; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.zoek-titel { font-size: .9375rem; font-weight: 600; color: var(--navy); }
.zoek-fragment {
  font-size: .8125rem; color: var(--text-secondary);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.zoek-paneel mark { background: #ead8b2; color: inherit; border-radius: 2px; padding: 0 1px; }
.zoek-leeg { margin: 0; padding: 14px 16px; font-size: .875rem; line-height: 1.6; color: var(--text-secondary); }
.zoek-leeg a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 10px 4px; margin: -10px -4px; }
.zoek-paneel :focus-visible { outline: 3px solid var(--gold-ink); outline-offset: 2px; }
@media (hover:hover) { .zoek-optie:hover { background: var(--bg-warm); } .zoek-optie[aria-selected=true]:hover { background: var(--gold-subtle); } }
@media (max-width:767px) {
  .zoek { max-width: none; }
  .zoek-paneel { width: 100%; }
}
@media print { .zoek { display: none !important; } }

/* A business dashboard: legible labels, coherent totals, no decorative controls. */
/* House style as variables: the three example styles only swap these; every figure and layout rule stays. */
.analytics-dialog { --dash-primary: #0f2044; --dash-primary-soft: #1a3162; --dash-chart: #2d6275; --dash-accent: #a77322; --dash-accent-ink: #805b14; --dash-accent-soft: #f7f4ee; --dash-bg: #f4f5f7; --dash-head-font: var(--font-display); --dash-radius: 8px; width: min(96vw,1600px); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 12px; background: var(--dash-bg); color: var(--text-secondary); box-shadow: 0 30px 80px #0f204466; overscroll-behavior: contain; }
.analytics-dialog[data-theme=groen] { --dash-primary: #173c2f; --dash-primary-soft: #245844; --dash-chart: #2f7a5b; --dash-accent: #b8892e; --dash-accent-ink: #6f5214; --dash-accent-soft: #f4f1e6; --dash-bg: #f2f5f1; --dash-head-font: Georgia,"Times New Roman",serif; --dash-radius: 2px; }
.analytics-dialog[data-theme=bordeaux] { --dash-primary: #4f1d2a; --dash-primary-soft: #6b2a3a; --dash-chart: #8c3a4c; --dash-accent: #c2933d; --dash-accent-ink: #74521a; --dash-accent-soft: #f8f2ea; --dash-bg: #f7f3f0; --dash-head-font: system-ui,-apple-system,"Segoe UI",sans-serif; --dash-radius: 14px; }
.analytics-dialog::backdrop { background: #081630d9; }
.analytics-shell { width: 100%; }
.analytics-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--dash-primary); color: #fff; padding: 22px 28px; border-bottom: 3px solid var(--dash-accent); }
.analytics-brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.analytics-logo { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 6px; background: var(--dash-accent); }
.analytics-dialog[data-theme=groen] .analytics-logo { border-radius: 50%; width: 30px; height: 30px; }
.analytics-dialog[data-theme=bordeaux] .analytics-brand { flex-direction: row-reverse; text-align: right; margin-left: auto; margin-right: 16px; }
.analytics-dialog[data-theme=bordeaux] .analytics-logo { width: 14px; height: 40px; border-radius: 7px; }
.analytics-header p { font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; color: #e3c583; margin-bottom: 6px; }
.analytics-header h2 { color: #fff; font-size: 1.6rem; letter-spacing: -.035em; font-family: var(--dash-head-font); }
.analytics-panel h3, .analytics-kpi strong { font-family: var(--dash-head-font); }
.analytics-header .dialog-close { background: #ffffff0d; color: #fff; border: 1px solid #69768f; flex: 0 0 44px; }
.analytics-dialog :focus-visible { outline-color: #805b14; }
.analytics-header :focus-visible { outline-color: #e3b85e; }
.analytics-toolbar, .analytics-filters { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 28px; border-bottom: 1px solid #d9dce2; background: #fff; }
.analytics-tabs, .analytics-options, .analytics-utilities { display: flex; gap: 8px; flex-wrap: wrap; }
.analytics-tabs button, .analytics-options button, .analytics-utilities button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 1px solid #aab3c0; border-radius: 6px; padding: 9px 16px; background: #fff; color: #34425b; font-size: .8125rem; font-weight: 600; cursor: pointer; transition: background 180ms ease, border-color 180ms ease; }
.analytics-tabs button[aria-pressed=true] { background: var(--dash-primary); border-color: var(--dash-primary); color: #fff; }
.analytics-options button[aria-pressed=true], .analytics-theme button[aria-pressed=true] { background: var(--dash-accent-soft); border-color: var(--dash-accent-ink); color: var(--dash-accent-ink); }
.analytics-theme { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.analytics-theme > span { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #536177; margin-right: 4px; }
.analytics-theme button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid #aab3c0; border-radius: 6px; padding: 9px 14px; background: #fff; color: #34425b; font-size: .8125rem; font-weight: 600; cursor: pointer; }
.analytics-utilities .icon { width: 16px; height: 16px; flex-basis: 16px; }
.analytics-demo-tag { font-size: .6875rem; color: #536177; }
.analytics-filters { background: var(--dash-bg); border: 0; padding-top: 20px; padding-bottom: 0; flex-wrap: wrap; }
.analytics-body { padding: 18px 28px 24px; }
.analytics-context { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; font-size: .75rem; }
.analytics-context strong { margin-left: 12px; font-weight: 600; color: var(--dash-primary); }
.analytics-context > span { font-size: .6875rem; }
.analytics-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 18px; }
.analytics-kpi { background: #fff; padding: 18px 20px; border: 1px solid #d9dce2; border-radius: var(--dash-radius); }
.analytics-kpi > span { display: block; font-size: .6875rem; color: #536177; }
.analytics-kpi strong { display: block; font-size: clamp(1.35rem,2.5vw,2.25rem); line-height: 1.35; letter-spacing: -.055em; color: var(--dash-primary); margin: 8px 0; font-variant-numeric: tabular-nums; }
.analytics-kpi small { display: block; font-size: .625rem; line-height: 1.6; }
.analytics-kpi.key { background: var(--dash-primary); border-color: var(--dash-primary); color: #d8e0ee; }
.analytics-kpi.key > span { color: #e7ca8c; }
.analytics-kpi.key strong { color: #fff; }
.analytics-main { display: grid; grid-template-columns: 1.7fr 1fr; gap: 18px; margin-bottom: 18px; }
.analytics-panel { background: #fff; border: 1px solid #d9dce2; border-radius: var(--dash-radius); padding: 22px; min-width: 0; }
.analytics-panel h3 { font-size: 1rem; letter-spacing: -.025em; font-weight: 650; margin-bottom: 14px; }
.analytics-panel-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.analytics-panel-heading > span { font-size: .6875rem; white-space: nowrap; }
.chart-legend { display: flex; gap: 16px; font-size: .625rem; margin-bottom: 8px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend span::before { content: ''; width: 12px; height: 8px; border-radius: 2px; background: var(--dash-chart); }
.chart-legend span + span::before { background: var(--dash-accent); height: 2px; }
.analytics-chart { width: 100%; height: auto; display: block; overflow: visible; }
.analytics-chart text { font: 12px Inter,system-ui,sans-serif; fill: #536177; }
.analytics-chart .chart-value { fill: #17384b; font-weight: 650; }
.chart-grid { stroke: #e7eaf0; stroke-width: 1; }
.chart-bar, .analytics-chart rect.is-drillable { fill: var(--dash-chart); }
.chart-line { stroke: var(--dash-chart); stroke-width: 3; }
.chart-dot, .analytics-chart circle.is-drillable { stroke: var(--dash-chart); stroke-width: 2; fill: #fff; }
.analytics-chart .is-drillable { cursor: pointer; transition: opacity 150ms ease, fill 150ms ease; }
.analytics-chart .is-drillable:hover { opacity: .8; }
.analytics-chart .is-drillable:focus-visible { outline: 3px solid var(--dash-accent-ink); outline-offset: 3px; }
.analytics-chart rect.is-selected { fill: var(--dash-accent); }
.analytics-chart circle.is-selected { fill: var(--dash-accent); stroke: var(--dash-accent); }
.chart-comparison { stroke: var(--dash-accent); stroke-width: 2; stroke-dasharray: 6 4; }
.analytics-insight { margin-top: 16px; padding: 13px 16px; border-left: 2px solid var(--dash-accent); background: var(--dash-accent-soft); color: #485366; font-size: .75rem; line-height: 1.7; }
.analytics-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; padding-top: 6px; }
.analytics-gauge { text-align: center; min-width: 0; }
.analytics-gauge svg { width: 100%; max-width: 200px; margin: auto; }
.gauge-track { stroke: #e9edf1; }
.gauge-fill { stroke: var(--dash-chart); stroke-linecap: round; }
.analytics-gauge:nth-child(2) .gauge-fill { stroke: var(--dash-accent); }
.analytics-gauge text { font: 650 28px Inter,system-ui,sans-serif; fill: var(--dash-primary); letter-spacing: -1px; }
.analytics-gauge strong { display: block; font-size: .75rem; color: var(--dash-primary); margin-bottom: 6px; }
.analytics-gauge small { display: block; font-size: .625rem; line-height: 1.65; }
.analytics-gauge-note { font-size: .6875rem; line-height: 1.8; margin-top: 24px; padding-top: 16px; border-top: 1px solid #e2e5e9; }
.analytics-bottom { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; }
.analytics-table-scroll { overflow: auto; }
.analytics-table-scroll table { width: 100%; border-collapse: collapse; font-size: .75rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.analytics-table-scroll th, .analytics-table-scroll td { padding: 11px 12px; text-align: right; border-bottom: 1px solid #e3e7ed; }
.analytics-table-scroll th:first-child { text-align: left; }
.analytics-table-scroll thead th { font-size: .625rem; color: #536177; background: #f5f6f8; }
.analytics-table-scroll tbody th { color: var(--dash-primary); font-weight: 600; }
.analytics-table-scroll tfoot th, .analytics-table-scroll tfoot td { font-weight: 700; color: var(--dash-primary); border-top: 2px solid #cdd2db; border-bottom: 0; background: #fbfbfc; }
.analytics-reading p { font-size: .8125rem; margin-bottom: 18px; line-height: 1.85; }
.analytics-reading .analytics-note { font-size: .6875rem; margin-bottom: 0; color: #536177; }
.analytics-source { margin-top: 20px; border-bottom: 1px solid #cdd2db; }
.analytics-source summary { font-size: .75rem; }
.analytics-source table { background: #fff; }
.analytics-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding: 0 28px 18px; font-size: .625rem; color: #536177; }
.purchase-bars { padding-top: 12px; display: grid; gap: 22px; }
.purchase-bars > div { display: grid; grid-template-columns: 70px 1fr 90px; align-items: center; gap: 18px; font-size: .75rem; }
.purchase-bars svg { width: 100%; }
.purchase-bars strong { text-align: right; color: var(--dash-primary); font-weight: 600; }
.purchase-track { fill: #edf0f4; }
.purchase-fill { fill: var(--dash-chart); }
.workshop-overview { padding: 0 18px 18px; }
.analytics-header { position: sticky; top: 0; z-index: 3; }
.analytics-panel .demo-eyebrow { color: var(--dash-accent-ink); }
.analytics-footer { background: var(--dash-bg); }
/* Drill-down to source: a panel under the chart, a path back, and real buttons in the tables. */
.drill-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 8px; margin: -4px -8px; border: 0; border-radius: 4px; background: transparent; color: var(--dash-primary); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #b9c2cf; cursor: pointer; }
.drill-link .drill-icon { width: 14px; height: 14px; flex-basis: 14px; color: var(--dash-accent-ink); }
.drill-link:hover { background: var(--dash-accent-soft); text-decoration-color: var(--dash-accent-ink); }
.purchase-bars .drill-link { justify-self: start; }
.analytics-drill { margin-bottom: 18px; border-left: 3px solid var(--dash-accent); }
.drill-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.drill-head h3 { margin-bottom: 0; }
.drill-head h3:focus-visible { outline-offset: 6px; }
.drill-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: .6875rem; color: #536177; margin-bottom: 8px; }
.drill-crumbs button { border: 0; background: transparent; padding: 6px 4px; margin: -6px -4px; font: inherit; color: var(--dash-accent-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.drill-crumbs [aria-current] { font-weight: 700; color: var(--dash-primary); }
.drill-sep { color: #aab3c0; }
.drill-close { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border: 1px solid #aab3c0; border-radius: 6px; background: #fff; color: #34425b; font-size: .75rem; font-weight: 600; cursor: pointer; flex-shrink: 0; }
.drill-close .icon { width: 16px; height: 16px; flex-basis: 16px; }
.drill-facts { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px 18px; margin: 0 0 16px; padding: 14px 16px; background: var(--dash-bg); border-radius: var(--dash-radius); font-size: .75rem; }
.drill-facts dt { color: #536177; font-size: .625rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 3px; }
.drill-facts dd { margin: 0; font-weight: 600; color: var(--dash-primary); font-variant-numeric: tabular-nums; }
.drill-formula { margin-top: 14px; font-size: .8125rem; line-height: 1.8; color: #34425b; }
.analytics-drill .analytics-note { margin-top: 14px; font-size: .6875rem; color: #536177; }
@media(prefers-reduced-motion:no-preference) {
  .chart-bar { transform-box: fill-box; transform-origin: bottom; animation: chart-bar-in 360ms var(--ease); }
  .gauge-fill { animation: gauge-in 500ms var(--ease); }
  @keyframes chart-bar-in { from { transform: scaleY(.8); opacity: .6; } to { transform: scaleY(1); opacity: 1; } }
  @keyframes gauge-in { from { stroke-dasharray: 0 100; } }
}
.workshop-overview h2, .workshop-overview h3 { font-size: 1rem; letter-spacing: -.025em; margin-bottom: 4px; }
.workshop-overview > p { font-size: .75rem; color: #536177; margin-bottom: 16px; }
.workshop-overview .btn { width: 100%; }
#workshop-caption { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; clip: rect(0,0,0,0); overflow: hidden; }
.workshop-hint { font-size: .625rem; margin-bottom: 12px; color: #606c7d; }
.scene-turn .scene-reset { width: auto; padding: 0 10px; gap: 6px; font-size: .6875rem; }
.scene-reset .icon { width: 16px; height: 16px; flex-basis: 16px; }
#data-scene:focus-visible { outline-offset: -3px; }
@media(hover:hover) and (pointer:fine) {
  .analytics-tabs button:hover:not([aria-pressed=true]), .analytics-utilities button:hover { background: #edf0f4; }
  .analytics-options button:hover:not([aria-pressed=true]) { background: #f1eee7; }
}
@media(max-width:1023px) {
  .analytics-main { grid-template-columns: 1fr; }
  .analytics-toolbar { flex-wrap: wrap; }
  .analytics-filters { flex-wrap: wrap; }
  .analytics-gauges { max-width: 520px; margin-inline: auto; }
}
@media(max-width:767px) {
  .analytics-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 8px; }
  .analytics-header { padding: 18px 16px; }
  .analytics-header h2 { font-size: 1.25rem; }
  .analytics-toolbar, .analytics-filters { padding-inline: 16px; gap: 10px; }
  .analytics-tabs { width: 100%; display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
  .analytics-tabs button { padding-inline: 4px; font-size: .75rem; }
  .analytics-utilities, .analytics-options { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 6px; }
  .analytics-theme { width: 100%; display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: 6px; }
  .analytics-theme button { padding-inline: 6px; font-size: .6875rem; }
  .drill-facts { grid-template-columns: 1fr 1fr; padding: 12px; }
  .drill-head { flex-direction: column; }
  .drill-close { align-self: flex-start; }
  .analytics-utilities button, .analytics-options button { font-size: .6875rem; padding-inline: 6px; }
  .analytics-body { padding: 18px 16px; }
  .analytics-context { display: block; }
  .analytics-context strong { display: block; margin-left: 0; }
  .analytics-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .analytics-kpi { padding: 14px 12px; }
  .analytics-kpi strong { font-size: 1.3rem; overflow-wrap: anywhere; }
  .analytics-kpi > span { font-size: .625rem; }
  .analytics-panel { padding: 16px 12px; }
  .analytics-panel h3 { font-size: .9375rem; }
  .analytics-chart { min-width: 570px; }
  .analytics-chart-wrap { overflow: auto; }
  .analytics-bottom { grid-template-columns: 1fr; }
  .analytics-insight { font-size: .6875rem; }
  .analytics-footer { padding-inline: 16px; }
  .purchase-bars > div { grid-template-columns: 50px 1fr 72px; gap: 10px; font-size: .6875rem; }
  .workshop-overview { padding: 0 0 18px; }
}
.analytics-swipe-hint { display: none; }
@media(max-width:767px) { .analytics-swipe-hint { display: block; font-size: .625rem; color: #536177; margin-top: 6px; } }
/* Dashboard 2.0: meaningful distribution and source-linked exceptions. */
.analytics-attention { margin-bottom: 18px; }
.attention-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.attention-items button { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; padding: 14px 20px; border: 0; border-left: 1px solid #d9dce2; background: transparent; color: #33405a; font: inherit; cursor: pointer; }
.attention-items button:first-child { border-left: 0; padding-left: 0; }
.attention-items button:hover { background: var(--dash-accent-soft); }
.attention-tag { font-size: .625rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dash-accent-ink); font-weight: 650; }
.attention-items strong { font-size: .875rem; color: var(--dash-primary); font-variant-numeric: tabular-nums; }
.attention-items button > span:not(.attention-tag) { font-size: .75rem; }
.attention-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; min-height: 30px; font-weight: 600; }
.attention-link .icon { width: 14px; height: 14px; flex-basis: 14px; }
.analytics-summary { margin-bottom: 18px; }
.distribution-layout { display: grid; grid-template-columns: minmax(130px, .9fr) 1fr; align-items: center; gap: 20px; }
.distribution-layout > svg { width: 100%; max-width: 260px; justify-self: center; }
.distribution-layout svg text { fill: var(--dash-primary); font: 700 19px Inter, sans-serif; }
.distribution-layout svg .distribution-caption { font-size: 10px; font-weight: 500; }
.distribution-layout ul { list-style: none; padding: 0; margin: 0; }
.distribution-layout li { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid #e3e7ed; font-size: .75rem; }
.distribution-layout small { display: block; color: #4d5a70; font-size: .6875rem; margin-top: 3px; }
.distribution-layout strong { font-variant-numeric: tabular-nums; color: var(--dash-primary); }
.distribution-key { width: 9px; height: 9px; border-radius: 50%; }
.distribution-color-0 { stroke: var(--dash-primary); background: var(--dash-primary); }
.distribution-color-1 { stroke: var(--dash-chart); background: var(--dash-chart); }
.distribution-color-2 { stroke: var(--dash-accent); background: var(--dash-accent); }
.distribution-color-3 { stroke: #93acbd; background: #93acbd; }
.receipt-bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 14px 0; }
.receipt-bars > div { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; font-size: .6875rem; }
.receipt-bars strong { font-size: .625rem; font-variant-numeric: tabular-nums; color: var(--dash-primary); white-space: nowrap; }
.receipt-bars svg { width: 100%; max-height: 150px; }
.analytics-receipts .analytics-note { font-size: .6875rem; line-height: 1.7; }
.analytics-panel-heading { flex-wrap: wrap; }
.drill-link, .drill-close, .drill-crumbs button { min-height: 44px; }
@media(max-width:767px) {
  .attention-items { grid-template-columns: 1fr; }
  .attention-items button, .attention-items button:first-child { padding: 16px 0; border-left: 0; border-bottom: 1px solid #e3e7ed; }
  .attention-items button:last-child { border-bottom: 0; }
  .distribution-layout { grid-template-columns: 1fr; gap: 4px; }
  .distribution-layout > svg { max-width: 210px; }
  .receipt-bars { gap: 4px; }
  .receipt-bars strong { font-size: .55rem; }
}

/* v0.29: de werkplaats past naast de tekst. Op desktop is het venster breder dan hoog (1,9),
   staan titel en knop op één regel en zijn de randen krapper; op een telefoon blijft alles
   zoals het was, want daar staat de werkplaats onder de tekst. */
@media(min-width:768px) {
  .studio-heading .data-workshop { padding: 14px 12px 8px; }
  .workshop-viewport { aspect-ratio: 2.1; }
  .workshop-steps { margin-top: 10px; }
  .workshop-steps button { min-height: 46px; }
  .workshop-points { min-height: 46px; margin-bottom: 12px; }
  .workshop-points button { min-height: 46px; padding: 6px 2px; }
  .workshop-overview { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px; padding-bottom: 12px; }
  .workshop-overview > p { margin-bottom: 0; }
  .workshop-overview .btn { width: auto; grid-row: span 2; align-self: center; }
  .workshop-overview h2, .workshop-overview h3 { grid-column: 1; }
  .workshop-overview > p { grid-column: 1; }
}