:root{--ink:#18231d;--cream:#f4f0e8;--lime:#d8f05b;--coral:#ff6949;--blue:#a4c7e9;--line:rgba(24,35,29,.18)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',sans-serif}.grain{position:fixed;inset:0;opacity:.15;z-index:20;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E")}a{color:inherit;text-decoration:none}.site-header{height:90px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid var(--line);position:relative;z-index:3}.brand{font:600 27px 'DM Sans';letter-spacing:-1.8px;position:relative}.brand span{font-family:Fraunces;font-weight:600}.brand i{display:inline-block;width:7px;height:7px;background:var(--coral);border-radius:50%;margin-left:3px}.site-header nav{display:flex;align-items:center;gap:30px;font:500 13px 'DM Mono'}.site-header nav>a:not(.nav-cta){opacity:.62}.site-header nav>a.active,.site-header nav>a:hover{opacity:1}.nav-cta{border:1px solid var(--ink);border-radius:30px;padding:10px 15px;margin-left:10px}.nav-cta b{font-size:17px;margin-left:5px}.menu-toggle{display:none;border:0;background:none;font:500 13px 'DM Mono';color:var(--ink)}.hero{min-height:660px;padding:58px 8vw 0;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}.eyebrow,.section-tag{font:500 11px 'DM Mono';letter-spacing:.04em;text-transform:uppercase}.eyebrow{display:flex;align-items:center;gap:9px}.eyebrow span{background:var(--coral);width:8px;height:8px;border-radius:50%}.hero h1{font:600 clamp(64px,9vw,132px)/.9 Fraunces;margin:80px 0 30px;letter-spacing:-.07em;position:relative;z-index:1}.hero h1 em,h2 em{font-weight:500}.hero-bottom{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;max-width:680px}.hero-bottom p{font-size:16px;line-height:1.45;max-width:280px}.round-link{width:112px;height:112px;border-radius:50%;background:var(--lime);display:flex;align-items:center;justify-content:center;position:relative;font:500 11px/1.25 'DM Mono';text-transform:uppercase}.round-link b{position:absolute;right:15px;bottom:16px;font-size:23px}.hero-art{position:absolute;width:50vw;height:100%;right:0;top:0;overflow:hidden}.sun{background:var(--lime);width:330px;height:330px;border-radius:50%;position:absolute;right:-20px;bottom:-55px}.orbit{position:absolute;border:1px solid var(--ink);border-radius:50%;opacity:.55}.orbit-a{width:700px;height:290px;right:-180px;top:120px;transform:rotate(-27deg)}.orbit-b{width:500px;height:180px;right:-100px;top:230px;transform:rotate(32deg)}.hero-card{position:absolute;background:var(--coral);width:255px;height:250px;right:17%;top:145px;padding:20px;transform:rotate(10deg);z-index:1}.hero-card span,.project span{font:500 10px 'DM Mono';text-transform:uppercase}.hero-card strong{font:600 31px/.95 Fraunces;display:block;letter-spacing:-.06em;margin-top:46px}.hero-card i{position:absolute;right:19px;bottom:12px;font-style:normal;font-size:37px}.section-pad{padding:120px 8vw}.intro{display:grid;grid-template-columns:25% 1fr;border-bottom:1px solid var(--line)}.intro-copy h2,.section-head h2{font:500 clamp(42px,5.4vw,76px)/.98 Fraunces;letter-spacing:-.06em;margin:0;max-width:800px}.text-link{display:inline-block;font:500 12px 'DM Mono';text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:8px;margin-top:38px}.text-link b{font-size:20px;margin-left:14px}.services-strip{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}.services-strip article{padding:46px 4vw 40px;border-right:1px solid var(--line);min-height:380px;position:relative}.services-strip article:last-child{border:0}.services-strip span{font:11px 'DM Mono'}.service-icon{font-size:41px;margin:32px 0 20px;color:var(--coral)}.services-strip h3{font:600 35px/.95 Fraunces;letter-spacing:-.06em;margin:0}.services-strip p{font-size:14px;line-height:1.45;max-width:250px;margin:18px 0 28px}.services-strip a{font:500 11px 'DM Mono';text-transform:uppercase}.services-strip a b{margin-left:9px;font-size:17px}.featured{background:#e8e2d5}.section-head{position:relative}.section-head h2{margin-top:35px}.section-head>.text-link{position:absolute;right:0;bottom:0}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:68px}.project{height:475px;padding:27px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.project h3{font:600 44px/.86 Fraunces;letter-spacing:-.06em;margin:9px 0}.project-orange{background:#ef855c}.project-blue{background:var(--blue);position:relative}.project-mark{font:600 300px/.8 Fraunces;letter-spacing:-.15em;margin-left:-20px}.project-shape{position:absolute;top:30px;right:12%;width:270px;height:270px;border:19px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center}.project-shape i{background:var(--ink);width:35px;height:120px;display:block;border-radius:30px;transform:rotate(45deg);margin:7px}.project-shape i:nth-child(2){transform:rotate(-45deg)}.project-blue div:last-child{position:relative;z-index:1}.statement{background:var(--ink);color:var(--cream);min-height:590px;padding:105px 8vw;position:relative;overflow:hidden}.statement-inner{max-width:770px;position:relative;z-index:1}.statement h2{font:500 clamp(47px,6.4vw,89px)/.95 Fraunces;letter-spacing:-.065em;margin:36px 0}.statement p{font-size:17px;line-height:1.5;max-width:435px}.button{display:inline-block;border:1px solid currentColor;border-radius:30px;padding:14px 18px;font:500 12px 'DM Mono';text-transform:uppercase;margin-top:24px}.button b{font-size:17px;margin-left:10px}.statement-star{font-size:500px;position:absolute;right:-90px;top:-80px;color:var(--lime);line-height:1}.testimonial{padding-left:23vw;position:relative}.quote-mark{font:100px/.5 Fraunces;color:var(--coral)}blockquote{font:500 clamp(31px,4.2vw,59px)/1.06 Fraunces;letter-spacing:-.05em;margin:20px 0 38px;max-width:850px}.quote-by{display:flex;gap:12px;align-items:center;font-size:13px;line-height:1.5}.avatar{width:42px;height:42px;border-radius:50%;background:var(--blue);display:grid;place-items:center;font:11px 'DM Mono'}.cta{padding:100px 8vw;background:var(--lime);position:relative;min-height:430px}.cta h2{font:500 clamp(57px,8vw,108px)/.88 Fraunces;letter-spacing:-.07em;margin:45px 0}.big-arrow{position:absolute;right:10vw;bottom:90px;border:1px solid var(--ink);border-radius:50%;height:100px;width:100px;display:grid;place-items:center;font-size:48px}footer{display:flex;justify-content:space-between;align-items:center;padding:30px 5vw;background:var(--ink);color:var(--cream);font-size:11px}footer p{opacity:.65}footer div{display:flex;gap:18px;font:11px 'DM Mono';text-transform:uppercase}
/* Inner pages */.page-hero{padding:100px 8vw 80px;border-bottom:1px solid var(--line);min-height:430px}.page-hero h1{font:500 clamp(58px,8vw,115px)/.88 Fraunces;letter-spacing:-.07em;margin:50px 0 0;max-width:950px}.page-hero p{font-size:17px;line-height:1.5;max-width:450px;margin:30px 0 0}.service-list{padding:0 8vw}.service-row{display:grid;grid-template-columns:14% 28% 1fr;gap:20px;padding:55px 0;border-bottom:1px solid var(--line)}.service-row>span{font:12px 'DM Mono'}.service-row h2{font:500 38px/.95 Fraunces;letter-spacing:-.06em;margin:0}.service-row p{font-size:16px;line-height:1.55;max-width:450px;margin:0}.service-row ul{grid-column:3;margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}.service-row li{border:1px solid var(--line);border-radius:20px;padding:7px 10px;font:10px 'DM Mono';text-transform:uppercase}.work-grid{padding:50px 8vw 110px;display:grid;grid-template-columns:1fr 1fr;gap:22px}.work-card{height:480px;padding:25px;display:flex;justify-content:flex-end;flex-direction:column}.work-card h2{font:500 42px/.9 Fraunces;letter-spacing:-.06em;margin:8px 0}.work-card:nth-child(1){background:#f08a61}.work-card:nth-child(2){background:var(--blue)}.work-card:nth-child(3){background:#b6ceaa}.work-card:nth-child(4){background:#e6c4d0}.about-grid{display:grid;grid-template-columns:1fr 1fr}.about-panel{padding:100px 8vw;min-height:490px}.about-panel:first-child{background:var(--blue)}.about-panel h2{font:500 60px/.93 Fraunces;letter-spacing:-.06em;margin:0}.about-panel p{font-size:16px;line-height:1.55;max-width:440px;margin-top:30px}.about-panel:last-child{background:var(--coral);display:flex;align-items:flex-end}.values{padding:100px 8vw}.values h2{font:500 65px/.94 Fraunces;letter-spacing:-.06em}.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.value-grid h3{font:500 28px Fraunces;margin-bottom:10px}.value-grid p{font-size:14px;line-height:1.5}.contact-main{padding:95px 8vw;display:grid;grid-template-columns:1fr 1fr;gap:12vw}.contact-main h1{font:500 76px/.88 Fraunces;letter-spacing:-.07em;margin:35px 0}.contact-main p{font-size:16px;line-height:1.5;max-width:360px}.contact-form label{display:block;font:11px 'DM Mono';text-transform:uppercase;margin:0 0 11px}.contact-form input,.contact-form textarea{display:block;width:100%;background:transparent;border:0;border-bottom:1px solid var(--ink);padding:11px 0 15px;font:17px 'DM Sans';margin-bottom:28px;outline:0}.contact-form textarea{height:88px;resize:none}.contact-form button{border:0;border-radius:30px;background:var(--ink);color:var(--cream);padding:15px 21px;font:12px 'DM Mono';text-transform:uppercase;cursor:pointer}
@media(max-width:720px){.site-header{height:73px;padding:0 6vw}.site-header nav{display:none}.site-header nav.open{display:flex;position:absolute;top:72px;left:0;right:0;background:var(--cream);padding:25px 6vw;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line);gap:20px}.menu-toggle{display:block}.hero{padding:38px 7vw 0;min-height:650px}.hero h1{margin-top:66px;font-size:61px}.hero-art{width:100%;height:310px;top:auto;bottom:0}.hero-card{width:180px;height:180px;right:11%;top:45px;padding:15px}.hero-card strong{font-size:23px;margin-top:26px}.sun{width:240px;height:240px}.orbit-a{width:500px;top:65px}.orbit-b{top:140px}.hero-bottom{align-items:flex-end}.hero-bottom p{font-size:14px;width:190px}.round-link{width:87px;height:87px;font-size:9px}.section-pad{padding:76px 7vw}.intro{display:block}.intro-copy h2{margin-top:34px}.services-strip{display:block}.services-strip article{border-right:0;border-bottom:1px solid var(--line);min-height:0;padding:36px 7vw}.service-icon{margin:17px 0}.featured{padding-top:72px}.section-head>.text-link{position:static}.project-grid,.work-grid{grid-template-columns:1fr;gap:15px;margin-top:45px}.project{height:360px}.project-mark{font-size:225px}.statement{padding:75px 7vw;min-height:530px}.statement-star{font-size:330px;right:-55px;bottom:-80px;top:auto}.testimonial{padding-left:7vw}.cta{padding:75px 7vw;min-height:365px}.big-arrow{right:7vw;bottom:55px;width:75px;height:75px;font-size:35px}footer{display:block;padding:30px 7vw}footer p{margin:20px 0}footer div{margin-top:16px}.page-hero{padding:72px 7vw 60px}.page-hero h1{font-size:58px}.service-list{padding:0 7vw}.service-row{display:block;padding:38px 0}.service-row h2{margin:19px 0}.service-row ul{margin-top:20px}.work-grid{padding:35px 7vw 70px}.work-card{height:340px}.about-grid{display:block}.about-panel{padding:70px 7vw;min-height:360px}.about-panel h2{font-size:51px}.values{padding:70px 7vw}.values h2{font-size:52px}.value-grid{display:block}.value-grid article{margin:35px 0}.contact-main{padding:70px 7vw;display:block}.contact-main h1{font-size:58px}.contact-form{margin-top:60px}}

/* Motion */
@keyframes rise{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:translateY(0)}}
@keyframes swipe{from{clip-path:inset(0 100% 0 0);transform:translateX(-20px)}to{clip-path:inset(0 0 0 0);transform:translateX(0)}}
@keyframes float{0%,100%{transform:rotate(10deg) translateY(0)}50%{transform:rotate(7deg) translateY(-16px)}}
@keyframes orbit{to{transform:rotate(333deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes starspin{to{transform:rotate(360deg)}}
.site-header{animation:rise .7s both}.hero .eyebrow{animation:rise .7s .18s both}.hero h1{animation:swipe 1.05s .32s cubic-bezier(.2,.75,.25,1) both}.hero-bottom{animation:rise .7s .7s both}.hero-card{animation:float 5s 1.1s ease-in-out infinite}.sun{animation:pulse 5s ease-in-out infinite}.orbit-a{animation:orbit 26s linear infinite}.orbit-b{animation:orbit 19s linear infinite reverse}.hero-art{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.reveal{opacity:0;transform:translateY(42px);transition:opacity .75s var(--delay,0ms) ease,transform .85s var(--delay,0ms) cubic-bezier(.16,.8,.25,1)}.reveal.is-visible{opacity:1;transform:translateY(0)}
.text-reveal{opacity:1;transform:none!important}.word-reveal{display:inline-block;opacity:0;transform:translateY(20px);filter:blur(4px);transition:opacity .55s var(--word-delay) ease,transform .65s var(--word-delay) cubic-bezier(.16,.8,.25,1),filter .55s var(--word-delay) ease}.text-reveal.is-visible .word-reveal{opacity:1;transform:translateY(0);filter:blur(0)}
.services-strip article{transition:border-color .3s,background .35s,color .35s}.services-strip article:hover{background:var(--ink);color:var(--cream)}.services-strip article:hover .service-icon{color:var(--lime);transform:rotate(90deg)}.service-icon{transition:transform .45s cubic-bezier(.2,.8,.2,1),color .35s}
.project,.work-card{transition:transform .5s cubic-bezier(.2,.75,.2,1),box-shadow .5s}.project:hover,.work-card:hover{transform:translateY(-10px) rotate(-1deg);box-shadow:14px 16px 0 rgba(24,35,29,.18)}.project:hover .project-mark{transform:scale(1.08) rotate(5deg)}.project-mark{transition:transform .65s cubic-bezier(.2,.8,.2,1)}.project:hover .project-shape{animation:starspin 5s linear infinite}
.round-link,.big-arrow{transition:transform .4s cubic-bezier(.2,.8,.2,1),background .35s,color .35s}.round-link:hover,.big-arrow:hover{transform:rotate(16deg) scale(1.12);background:var(--coral);color:var(--cream)}.button,.nav-cta{transition:transform .25s,background .25s,color .25s}.button:hover,.nav-cta:hover{background:var(--ink);color:var(--cream);transform:translateY(-3px)}.statement .button:hover{background:var(--lime);color:var(--ink)}
.text-link{transition:letter-spacing .3s}.text-link:hover{letter-spacing:.08em}.text-link b{display:inline-block;transition:transform .3s}.text-link:hover b{transform:translateX(7px)}.brand{transition:transform .3s}.brand:hover{transform:rotate(-3deg) scale(1.04)}.service-row{transition:background .35s,padding-left .35s}.service-row:hover{background:rgba(216,240,91,.25);padding-left:20px}.value-grid article{transition:transform .35s}.value-grid article:hover{transform:translateY(-8px)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}
:root{--cream:#f7f8fa}.about-panel:first-child{background:#eaf2ff!important}.about-panel:last-child{background:#f2f6fc!important}.post-it{--move-x:0px;--move-y:0px;position:absolute;right:13%;top:115px;width:235px;min-height:200px;padding:22px;background:#dce7ff;box-shadow:9px 11px 0 rgba(17,19,24,.15);transform:translate(var(--move-x),var(--move-y)) rotate(7deg);transition:transform .55s cubic-bezier(.2,.75,.2,1);z-index:2}.post-it span{display:block;font:500 10px 'DM Mono';text-transform:uppercase;margin-bottom:54px}.post-it strong{font:700 26px/.98 'DM Sans';letter-spacing:-.055em}.post-it::after{content:'';position:absolute;top:-8px;left:42%;width:54px;height:16px;background:rgba(255,255,255,.65);transform:rotate(-5deg)}@media(max-width:720px){.post-it{right:8%;top:auto;bottom:30px;width:165px;min-height:145px;padding:16px;transform:rotate(5deg)}.post-it span{margin-bottom:30px}.post-it strong{font-size:19px}.hero{min-height:600px}}
:root{--block-gray:#f1f3f6}.hero,.services-strip,.testimonial,.service-list,.work-grid,.values{background:var(--block-gray)}.intro,.featured,.page-hero,.contact-main{background:#fff}.about-grid{background:var(--block-gray)}.featured{background:#fff!important}.work-card:nth-child(1),.work-card:nth-child(3){background:#fff!important}.work-card:nth-child(2),.work-card:nth-child(4){background:#eaf2ff!important}@media(max-width:720px){.hero{min-height:700px}.post-it{right:7%;bottom:38px;z-index:1}.hero-bottom{position:relative;z-index:2}.round-link{position:relative;z-index:3}}
/* Persoonlijke, rustige huisstijl */
body .project-orange .training-preview{inset:auto!important;top:22px!important;left:50%!important;width:auto!important;height:calc(100% - 152px)!important;max-width:calc(100% - 44px)!important;aspect-ratio:1!important;object-fit:cover!important;transform:translateX(-50%)!important}body .project-orange>div:last-child h3{white-space:nowrap;font-size:clamp(28px,3vw,42px)!important}
/* Training by Shad is a text project again, without the image preview. */
body .project-orange{padding:27px!important;background:#b9d0f5!important}body .project-orange .project-mark{display:block!important;position:static!important;margin-left:-20px!important}body .project-orange>div:last-child{position:static!important;left:auto!important;right:auto!important;bottom:auto!important;height:auto!important;margin:0!important;padding:0!important;background:transparent!important}body .project-orange>div:last-child h3{white-space:normal!important;font-size:44px!important}
/* De linkerkolom op de Werk-pagina gebruikt dezelfde warme roodtint. */
.work-card:nth-child(1),.work-card:nth-child(3){background:#b9d0f5!important}
body .project-orange{padding:0!important;background:#fff!important;overflow:hidden}body .project-orange .training-preview{inset:0 0 108px 0!important;width:100%!important;height:calc(100% - 108px)!important;box-shadow:none!important;object-fit:cover}body .project-orange>div:last-child{position:absolute!important;left:0;right:0;bottom:0;margin:0!important;padding:22px 27px!important;height:108px;background:#fff!important}
.personal-story{align-items:center}.personal-story>p{margin:0}.work-hero{text-align:center}.work-hero h1{margin-left:auto;margin-right:auto}
.about-hero{text-align:center}.about-hero h1{margin-left:auto;margin-right:auto}
.project-orange{position:relative}.training-preview{position:absolute;inset:22px 22px 126px;width:calc(100% - 44px);height:calc(100% - 148px);object-fit:cover;object-position:top;box-shadow:0 8px 20px rgba(17,19,24,.13)}.project-orange>div:last-child{position:relative;z-index:2;background:linear-gradient(transparent,rgba(233,238,252,.94) 42%);padding-top:52px;margin:-27px;padding:72px 27px 27px}
/* Keep the Home CTA's layout fixed; only its colours change on hover. */
body .hero-bottom .round-link{transform:none!important;margin-bottom:12px;background:#a9c3ed!important;color:var(--ink)!important;transition:background-color .25s ease,color .25s ease!important}body .hero-bottom .round-link:hover{transform:none!important;margin-bottom:12px;background:var(--ink)!important;color:#fff!important}
@media(min-width:721px){body .round-link{transform:translateY(-12px)!important}body .round-link:hover{transform:translateY(-12px)!important;background:#ece3ff!important;color:var(--ink)!important}}
@media(min-width:721px){body .round-link:hover{transform:translateY(-12px)!important}body .service-list + .cta .big-arrow:hover,body .testimonial + .cta .big-arrow:hover{transform:translateY(-50%)!important}}
body .round-link,body .big-arrow,body .button,body .nav-cta,body .contact-form button{transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease!important;will-change:auto}body .round-link:hover,body .big-arrow:hover,body .button:hover,body .nav-cta:hover,body .contact-form button:hover{transform:none!important}
.personal-story{display:grid;grid-template-columns:1fr 1fr;gap:8vw;background:#fff}.personal-story h2{font-size:clamp(35px,4.5vw,62px);line-height:1.02;margin:20px 0 0}.personal-story>p{font-size:18px;line-height:1.6;max-width:480px;margin:60px 0 0}
.hero .post-it:not(.post-it-secondary){right:calc(2% + 245px)!important;top:145px!important}.hero .post-it-secondary{right:2%!important;top:155px!important;background:#b9d0f5!important;mix-blend-mode:normal!important;z-index:3!important}.hero .post-it-secondary::before{display:none!important}
.hero .post-it-secondary{background:#b9d0f5!important;mix-blend-mode:normal!important;color:var(--ink);z-index:3!important}.hero .post-it-secondary::before{content:'';position:absolute;left:0;top:0;bottom:0;width:36%;background:rgba(133,166,217,.30);z-index:0;pointer-events:none}.hero .post-it-secondary span,.hero .post-it-secondary strong{position:relative;z-index:2}
body main .service-list .service-row:hover>*{transform:none}
body main .service-list .service-row{box-shadow:inset 0 0 0 #eaf2ff;transition:box-shadow 1s cubic-bezier(.2,.75,.2,1)!important}body main .service-list .service-row:hover{box-shadow:inset 100vw 0 0 #eaf2ff}
main .service-list .service-row{box-shadow:inset 0 0 0 #eaf2ff;transition:box-shadow 1s cubic-bezier(.2,.75,.2,1)!important}main .service-list .service-row:hover{box-shadow:inset 100vw 0 0 #eaf2ff}
main .service-list .service-row{position:relative;overflow:hidden;background:transparent!important;transition:none!important}main .service-list .service-row::before{content:'';position:absolute;inset:0;background:#eaf2ff;opacity:0;transform:translateX(-9%);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.75,.2,1);pointer-events:none}main .service-list .service-row>*{position:relative;z-index:1;transition:transform 1s cubic-bezier(.2,.75,.2,1)}main .service-list .service-row:hover{background:transparent!important;padding-left:0!important}main .service-list .service-row:hover::before{opacity:1;transform:translateX(0)}main .service-list .service-row:hover>*{transform:translateX(20px)}
main .services-strip article{position:relative;overflow:hidden;background:transparent!important;transition:color 1s ease!important}main .services-strip article::before{content:'';position:absolute;inset:0;background:#eaf2ff;opacity:0;transform:translateX(-12%);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.75,.2,1);z-index:0}main .services-strip article>*{position:relative;z-index:1}main .services-strip article:hover{background:transparent!important;color:var(--ink)!important}main .services-strip article:hover::before{opacity:1;transform:translateX(0)}
.service-row{position:relative;overflow:hidden}.service-row::before{content:'';position:absolute;inset:0;background:#eaf2ff;opacity:0;transform:translateX(-7%);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.75,.2,1);pointer-events:none}.service-row>*{position:relative;z-index:1}.service-row:hover::before{opacity:1;transform:translateX(0)}.intro{display:flex;justify-content:center}.intro-copy{width:min(800px,100%);text-align:center}.featured .section-head h2{max-width:none;width:100%}.featured .section-head h2 br{display:none}
.page-hero{padding-top:62px;min-height:360px}.intro-copy{grid-column:2}.services-strip article{transition:background 1s ease,color 1s ease,border-color 1s ease}.service-row{transition:background 1s ease,padding-left 1s ease}.service-row:hover{padding-left:20px}.service-list + .cta .big-arrow,.testimonial + .cta .big-arrow{right:13vw;bottom:auto;top:50%;transform:translateY(-50%);transition:transform .35s ease,background .35s ease,color .35s ease}.service-list + .cta .big-arrow:hover,.testimonial + .cta .big-arrow:hover{transform:translateY(-50%) scale(1.07);background:var(--ink);color:#fff}.about-panel:last-child{display:block;align-items:initial}.about-panel:last-child h2{margin-top:0}.round-link{transform:translateY(-12px)}.round-link:hover{transform:translateY(-12px) scale(1.08)}@media(max-width:720px){.page-hero{padding-top:48px;min-height:300px}.intro-copy{grid-column:auto}.service-list + .cta .big-arrow,.testimonial + .cta .big-arrow{right:7vw;top:50%;bottom:auto}.round-link{transform:translateY(-18px)}.round-link:hover{transform:translateY(-18px) scale(1.06)}}
:root{--ink:#111318;--cream:#fff;--lime:#eef1f5;--coral:#2c68ff;--blue:#2c68ff;--line:#d9dde5}.grain,.hero-art,.statement-star,.service-icon,.quote-mark{display:none!important}.brand i{display:none!important}.brand span{font-family:'DM Sans',sans-serif!important;font-weight:400!important}h1,h2,h3,.hero h1,.intro-copy h2,.section-head h2,.statement h2,blockquote,.page-hero h1,.about-panel h2,.values h2,.contact-main h1,.hero-card strong{font-family:'DM Sans',sans-serif!important;font-style:normal!important;font-weight:700!important;letter-spacing:-.065em!important}.hero h1 em,h2 em{font-style:normal!important;font-weight:700!important}.hero{min-height:510px}.hero h1{margin-top:100px}.project-shape{display:none!important}.project{background:#eef1f5!important}.project-orange{background:#e9eefc!important}.project-blue{background:#dce7ff!important}.project-mark{font-family:'DM Sans',sans-serif!important;font-size:230px;color:var(--blue)}.statement{background:var(--ink)}.cta{background:#dce7ff}.round-link{background:var(--blue);color:#fff}.round-link:hover,.big-arrow:hover{background:var(--ink)}.big-arrow{width:auto;height:auto;min-width:160px;padding:16px 22px;border-radius:30px;font:600 12px 'DM Mono';text-transform:uppercase}.service-row:hover,.services-strip article:hover{background:#f0f4ff;color:var(--ink)}.services-strip article:hover .service-icon{color:var(--ink)}footer{background:var(--ink)}
:root{--ink:#111318;--cream:#fff;--lime:#eef1f5;--coral:#2c68ff;--blue:#2c68ff;--line:#d9dde5}.grain,.hero-art,.statement-star,.service-icon,.quote-mark{display:none!important}.brand i{display:none!important}.brand span{font-family:'DM Sans',sans-serif!important;font-weight:400!important}h1,h2,h3,.hero h1,.intro-copy h2,.section-head h2,.statement h2,blockquote,.page-hero h1,.about-panel h2,.values h2,.contact-main h1,.hero-card strong{font-family:'DM Sans',sans-serif!important;font-style:normal!important;font-weight:700!important;letter-spacing:-.065em!important}.hero h1 em,h2 em{font-style:normal!important;font-weight:700!important}.hero{min-height:540px}.hero h1{margin-top:100px;line-height:1.03!important;padding-bottom:.12em}.project-shape{display:none!important}.project{background:#eef1f5!important}.project-orange{background:#e9eefc!important}.project-blue{background:#dce7ff!important}.project-mark{font-family:'DM Sans',sans-serif!important;font-size:230px;color:var(--blue)}.statement{background:var(--ink)}.cta{background:#dce7ff}.round-link{background:var(--blue);color:#fff}.round-link:hover,.big-arrow:hover{background:var(--ink)}.big-arrow{width:auto;height:auto;min-width:160px;padding:16px 22px;border-radius:30px;font:600 12px 'DM Mono';text-transform:uppercase}.service-row:hover,.services-strip article:hover{background:#f0f4ff;color:var(--ink)}.services-strip article:hover .service-icon{color:var(--ink)}footer{background:var(--ink)}
:root{--ink:#111318;--cream:#fff;--lime:#eef1f5;--coral:#2c68ff;--blue:#2c68ff;--line:#d9dde5}.grain,.hero-art,.statement-star,.service-icon,.quote-mark{display:none!important}.brand i{display:none!important}.brand span{font-family:'DM Sans',sans-serif!important;font-weight:400!important}h1,h2,h3,.hero h1,.intro-copy h2,.section-head h2,.statement h2,blockquote,.page-hero h1,.about-panel h2,.values h2,.contact-main h1,.hero-card strong{font-family:'DM Sans',sans-serif!important;font-style:normal!important;font-weight:700!important;letter-spacing:-.065em!important}.hero h1 em,h2 em{font-style:normal!important;font-weight:700!important}.hero{min-height:540px}.hero h1{margin-top:100px;line-height:1.03!important;padding-bottom:.12em}.project-shape{display:none!important}.project{background:#eef1f5!important}.project-orange{background:#e9eefc!important}.project-blue{background:#dce7ff!important}.project-mark{font-family:'DM Sans',sans-serif!important;font-size:230px;color:var(--blue)}.statement{background:var(--ink)}.cta{background:#dce7ff}.round-link{background:var(--blue);color:#fff}.round-link:hover,.big-arrow:hover{background:var(--ink)}.big-arrow{width:auto;height:auto;min-width:160px;padding:16px 22px;border-radius:30px;font:600 12px 'DM Mono';text-transform:uppercase}.service-row:hover,.services-strip article:hover{background:#f0f4ff;color:var(--ink)}.services-strip article:hover .service-icon{color:var(--ink)}footer{background:var(--ink)}.post-it-secondary{right:5%!important;top:195px!important;background:rgba(239,225,255,.84)!important;mix-blend-mode:multiply;z-index:1;transform:translate(var(--move-x),var(--move-y)) rotate(-6deg)!important}
/* Final homepage project colour. */
main .project-grid .project-orange{background:#b9d0f5!important}

/* Subtiele kleurzweem in het eerste blok: grotendeels wit met zachte blauwe en rode overgangen. */
main .hero{background:radial-gradient(ellipse at 82% 22%,rgba(174,210,255,.42) 0%,rgba(174,210,255,0) 35%),radial-gradient(ellipse at 68% 88%,rgba(185,208,245,.34) 0%,rgba(185,208,245,0) 34%),linear-gradient(135deg,#fff 0%,#fff 56%,#f8fbff 100%)!important}

/* Elk eerste blok heeft een eigen, rustige kleurovergang. */
body:has(.service-list) .page-hero{background:radial-gradient(ellipse at 16% 88%,rgba(185,208,245,.36) 0%,rgba(185,208,245,0) 34%),radial-gradient(ellipse at 85% 18%,rgba(189,220,255,.46) 0%,rgba(189,220,255,0) 38%),#fff!important}
body:has(.work-grid) .page-hero{background:radial-gradient(ellipse at 78% 82%,rgba(169,195,237,.42) 0%,rgba(169,195,237,0) 36%),radial-gradient(ellipse at 14% 20%,rgba(213,235,255,.48) 0%,rgba(213,235,255,0) 34%),#fff!important}
body:has(.about-grid) .page-hero{background:radial-gradient(ellipse at 18% 82%,rgba(197,224,255,.52) 0%,rgba(197,224,255,0) 38%),radial-gradient(ellipse at 88% 24%,rgba(185,208,245,.38) 0%,rgba(185,208,245,0) 34%),#fff!important}
body:has(.contact-main) .contact-main{background:radial-gradient(ellipse at 84% 84%,rgba(189,220,255,.46) 0%,rgba(189,220,255,0) 38%),radial-gradient(ellipse at 15% 16%,rgba(185,208,245,.32) 0%,rgba(185,208,245,0) 32%),#fff!important}

/* Accent in de kop van Diensten, in dezelfde zachte diepblauwe familie als de post-it. */
body:has(.service-list) .page-hero h1 em{color:#6f91c8!important}
body:has(.service-list) .page-hero h1 em{display:block}

/* De recensie op de homepage krijgt zichtbare aanhalingstekens. */
.testimonial blockquote::before{content:'“'}.testimonial blockquote::after{content:'”'}

/* Rode versie van het palet: wit en zwart blijven rustig, alle blauwe accenten worden rood. */
:root{--coral:#aa3f4a!important;--blue:#aa3f4a!important}
.post-it{background:#f2c6ca!important}.hero .post-it-secondary{background:#e8aeb5!important}.hero .post-it-secondary::before{background:rgba(170,63,74,.16)!important}
body .hero-bottom .round-link{background:#dda2aa!important}
.cta,.project-blue,.work-card:nth-child(2),.work-card:nth-child(4){background:#f2c6ca!important}
main .project-grid .project-orange,.work-card:nth-child(1),.work-card:nth-child(3){background:#e8aeb5!important}
.about-panel:first-child{background:#f4d1d5!important}.about-panel:last-child{background:#fbe9eb!important}
.avatar{background:#dda2aa!important}
body:has(.service-list) .page-hero h1 em{color:#aa3f4a!important}
main .hero{background:radial-gradient(ellipse at 82% 22%,rgba(235,174,181,.43) 0%,rgba(235,174,181,0) 35%),radial-gradient(ellipse at 68% 88%,rgba(212,112,124,.27) 0%,rgba(212,112,124,0) 34%),linear-gradient(135deg,#fff 0%,#fff 56%,#fff9f9 100%)!important}
body:has(.service-list) .page-hero{background:radial-gradient(ellipse at 16% 88%,rgba(232,174,181,.40) 0%,rgba(232,174,181,0) 34%),radial-gradient(ellipse at 85% 18%,rgba(245,207,211,.55) 0%,rgba(245,207,211,0) 38%),#fff!important}
body:has(.work-grid) .page-hero{background:radial-gradient(ellipse at 78% 82%,rgba(221,162,171,.40) 0%,rgba(221,162,171,0) 36%),radial-gradient(ellipse at 14% 20%,rgba(248,215,218,.55) 0%,rgba(248,215,218,0) 34%),#fff!important}
body:has(.about-grid) .page-hero{background:radial-gradient(ellipse at 18% 82%,rgba(244,203,208,.52) 0%,rgba(244,203,208,0) 38%),radial-gradient(ellipse at 88% 24%,rgba(232,174,181,.38) 0%,rgba(232,174,181,0) 34%),#fff!important}
body:has(.contact-main) .contact-main{background:radial-gradient(ellipse at 84% 84%,rgba(244,203,208,.46) 0%,rgba(244,203,208,0) 38%),radial-gradient(ellipse at 15% 16%,rgba(232,174,181,.32) 0%,rgba(232,174,181,0) 32%),#fff!important}
main .service-list .service-row::before,main .services-strip article::before{background:#f4d1d5!important}main .service-list .service-row{box-shadow:inset 0 0 0 #f4d1d5!important}main .service-list .service-row:hover{box-shadow:inset 100vw 0 0 #f4d1d5!important}

/* Sterker rood contrast. */
:root{--coral:#d80f29!important;--blue:#d80f29!important}
.post-it{background:#ffd9dd!important}.hero .post-it-secondary{background:#f36b78!important}.hero .post-it-secondary::before{background:rgba(216,15,41,.16)!important}
body .hero-bottom .round-link{background:#ee5162!important;color:#fff!important}
.cta,.project-blue,.work-card:nth-child(2),.work-card:nth-child(4){background:#ffd9dd!important}
main .project-grid .project-orange,.work-card:nth-child(1),.work-card:nth-child(3){background:#f36b78!important}
.about-panel:first-child{background:#ffd1d6!important}.about-panel:last-child{background:#fff0f1!important}.avatar{background:#ee5162!important}
body:has(.service-list) .page-hero h1 em{color:#d80f29!important}
main .hero{background:radial-gradient(ellipse at 82% 22%,rgba(255,185,193,.54) 0%,rgba(255,185,193,0) 35%),radial-gradient(ellipse at 68% 88%,rgba(234,58,79,.30) 0%,rgba(234,58,79,0) 34%),linear-gradient(135deg,#fff 0%,#fff 56%,#fff8f8 100%)!important}
body:has(.service-list) .page-hero{background:radial-gradient(ellipse at 16% 88%,rgba(255,171,181,.48) 0%,rgba(255,171,181,0) 34%),radial-gradient(ellipse at 85% 18%,rgba(255,216,220,.66) 0%,rgba(255,216,220,0) 38%),#fff!important}
body:has(.work-grid) .page-hero{background:radial-gradient(ellipse at 78% 82%,rgba(238,81,98,.36) 0%,rgba(238,81,98,0) 36%),radial-gradient(ellipse at 14% 20%,rgba(255,216,220,.66) 0%,rgba(255,216,220,0) 34%),#fff!important}
body:has(.about-grid) .page-hero{background:radial-gradient(ellipse at 18% 82%,rgba(255,203,210,.55) 0%,rgba(255,203,210,0) 38%),radial-gradient(ellipse at 88% 24%,rgba(243,107,120,.42) 0%,rgba(243,107,120,0) 34%),#fff!important}
body:has(.contact-main) .contact-main{background:radial-gradient(ellipse at 84% 84%,rgba(255,203,210,.52) 0%,rgba(255,203,210,0) 38%),radial-gradient(ellipse at 15% 16%,rgba(243,107,120,.36) 0%,rgba(243,107,120,0) 32%),#fff!important}
main .service-list .service-row::before,main .services-strip article::before{background:#ffd9dd!important}main .service-list .service-row{box-shadow:inset 0 0 0 #ffd9dd!important}main .service-list .service-row:hover{box-shadow:inset 100vw 0 0 #ffd9dd!important}

/* Granaatappelpalet: diep rood als hoofdkleur, warm oranjerood als tweede accent. */
:root{--coral:#a71935!important;--blue:#a71935!important}
.post-it{background:#fde1d7!important}.hero .post-it-secondary{background:#f26a3d!important}.hero .post-it-secondary::before{background:rgba(167,25,53,.15)!important}
body .hero-bottom .round-link{background:#a71935!important;color:#fff!important}
.cta,.project-blue,.work-card:nth-child(2),.work-card:nth-child(4){background:#fde1d7!important}
main .project-grid .project-orange,.work-card:nth-child(1),.work-card:nth-child(3){background:#f26a3d!important}
.about-panel:first-child{background:#f9c7bd!important}.about-panel:last-child{background:#fff0ea!important}.avatar{background:#a71935!important}
body:has(.service-list) .page-hero h1 em{color:#a71935!important}
main .hero{background:radial-gradient(ellipse at 82% 22%,rgba(248,179,163,.48) 0%,rgba(248,179,163,0) 35%),radial-gradient(ellipse at 68% 88%,rgba(242,106,61,.32) 0%,rgba(242,106,61,0) 34%),linear-gradient(135deg,#fff 0%,#fff 56%,#fff8f5 100%)!important}
body:has(.service-list) .page-hero{background:radial-gradient(ellipse at 16% 88%,rgba(242,106,61,.36) 0%,rgba(242,106,61,0) 34%),radial-gradient(ellipse at 85% 18%,rgba(253,225,215,.72) 0%,rgba(253,225,215,0) 38%),#fff!important}
body:has(.work-grid) .page-hero{background:radial-gradient(ellipse at 78% 82%,rgba(167,25,53,.25) 0%,rgba(167,25,53,0) 36%),radial-gradient(ellipse at 14% 20%,rgba(253,225,215,.72) 0%,rgba(253,225,215,0) 34%),#fff!important}
body:has(.about-grid) .page-hero{background:radial-gradient(ellipse at 18% 82%,rgba(249,199,189,.58) 0%,rgba(249,199,189,0) 38%),radial-gradient(ellipse at 88% 24%,rgba(242,106,61,.36) 0%,rgba(242,106,61,0) 34%),#fff!important}
body:has(.contact-main) .contact-main{background:radial-gradient(ellipse at 84% 84%,rgba(249,199,189,.54) 0%,rgba(249,199,189,0) 38%),radial-gradient(ellipse at 15% 16%,rgba(242,106,61,.30) 0%,rgba(242,106,61,0) 32%),#fff!important}
main .service-list .service-row::before,main .services-strip article::before{background:#fde1d7!important}main .service-list .service-row{box-shadow:inset 0 0 0 #fde1d7!important}main .service-list .service-row:hover{box-shadow:inset 100vw 0 0 #fde1d7!important}

/* Eenvoudig granaatappelsilhouet voor de homepageknop. */
body .hero-bottom .round-link{width:118px!important;height:126px!important;border-radius:48% 48% 52% 52% / 42% 42% 58% 58%!important;overflow:visible!important}
body .hero-bottom .round-link::before{content:'';position:absolute;z-index:0;top:-11px;left:50%;width:30px;height:18px;background:inherit;clip-path:polygon(0 100%,22% 18%,50% 58%,78% 18%,100% 100%);transform:translateX(-50%)}
body .hero-bottom .round-link span{position:relative;z-index:1}

/* Het afsluitende Diensten-blok is iets warmer en donkerder. */
body:has(.service-list) .cta{background:#f8c5b7!important}
body .hero .post-it-secondary{background:#ec4d4d!important}

/* Het eigen granaatappel-icoon uit het logo, los van de woordmark. */
.site-header .brand{display:flex;align-items:center;gap:10px;letter-spacing:0!important}.site-header .brand .brand-mark{display:block;width:38px;height:42px;flex:0 0 38px;object-fit:contain}.site-header .brand .brand-name{font-family:'DM Sans',sans-serif!important;font-size:27px;font-weight:500;letter-spacing:-1.8px}
.form-notice{margin:0 0 24px;padding:13px 15px;background:#fde1d7;color:var(--ink);font-size:14px;line-height:1.4}.form-notice-error{background:#f9c7bd}

/* Extra onderdelen op de Diensten-pagina. */
.website-options{background:#fff}.maintenance{background:#fde1d7}.service-section-intro{display:grid;grid-template-columns:minmax(260px,1fr) minmax(260px,.78fr);gap:8vw;align-items:end;margin-bottom:58px}.service-section-intro .section-tag{grid-column:1/-1}.service-section-intro h2{font:700 clamp(46px,5.4vw,74px)/.96 'DM Sans',sans-serif;letter-spacing:-.065em;margin:0}.service-section-intro p{font-size:16px;line-height:1.55;margin:0;max-width:440px}.website-option-grid,.maintenance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.website-option-grid article,.maintenance-grid article{padding:31px;min-height:340px;border:1px solid var(--line);display:flex;flex-direction:column}.website-option-grid article>span,.maintenance-grid article>span{font:500 11px 'DM Mono';text-transform:uppercase;letter-spacing:.04em}.website-option-grid h3{font:700 34px/.95 'DM Sans',sans-serif;letter-spacing:-.06em;margin:47px 0 14px}.website-option-grid p,.maintenance-grid p{font-size:14px;line-height:1.5;margin:0 0 23px}.website-option-grid ul,.maintenance-grid ul{list-style:none;margin:auto 0 0;padding:0;border-top:1px solid var(--line)}.website-option-grid li,.maintenance-grid li{padding:10px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.35}.service-footnote{font-size:13px;line-height:1.45;max-width:540px;margin:26px 0 0;opacity:.72}.maintenance-grid article{background:#fff;border:0}.maintenance-grid strong{display:block;font:700 46px/.95 'DM Sans',sans-serif;letter-spacing:-.07em;margin:45px 0 17px}.maintenance-grid strong small{font:500 14px 'DM Mono';letter-spacing:0}.maintenance-grid .maintenance-featured{background:#a71935;color:#fff}.maintenance-grid .maintenance-featured ul{border-color:rgba(255,255,255,.35)}.maintenance-grid .maintenance-featured li{border-color:rgba(255,255,255,.22)}
.website-option-grid article{transition:background-color 1.2s ease,color 1.2s ease}.website-option-grid article:hover{background:#fde1d7}.maintenance-grid article:first-child{background:#fde1d7}.maintenance-grid article:last-child{background:#f9c7bd}
/* Alle onderhoudspakketten blijven rustig wit. */
.maintenance-grid article,.maintenance-grid .maintenance-featured{background:#fff!important;color:var(--ink)!important}.maintenance-grid .maintenance-featured ul{border-color:var(--line)}.maintenance-grid .maintenance-featured li{border-color:var(--line)}
/* Onderhoud: rustig oplopend van wit naar granaatappelrood. */
.maintenance-grid article:first-child{background:#fff!important}
.maintenance-grid article.maintenance-featured{background:#f7c9bf!important}
.maintenance-grid article:last-child{background:#c62836!important;color:#fff!important}
.maintenance-grid article:last-child ul{border-color:rgba(255,255,255,.42)!important}
.maintenance-grid article:last-child li{border-color:rgba(255,255,255,.27)!important}
/* Langzame, zichtbare fade op de drie websitevormen. */
body .website-option-grid article{background-color:#fff!important;transition:background-color 1.35s cubic-bezier(.2,.75,.2,1)!important}body .website-option-grid article:hover{background-color:#fde1d7!important}
@media(max-width:720px){.service-section-intro{display:block;margin-bottom:36px}.service-section-intro .section-tag{display:block;margin-bottom:25px}.service-section-intro h2{font-size:46px;line-height:1.01}.service-section-intro p{margin-top:23px}.website-option-grid,.maintenance-grid{grid-template-columns:1fr;gap:12px}.website-option-grid article,.maintenance-grid article{min-height:0;padding:27px}.website-option-grid h3{margin:34px 0 13px}.maintenance-grid strong{margin:32px 0 16px}.service-footnote{margin-top:20px}.website-options,.maintenance{padding-top:72px;padding-bottom:72px}}
@media(max-width:720px){.site-header .brand{gap:9px}.site-header .brand .brand-mark{width:34px;height:38px;flex-basis:34px}.site-header .brand .brand-name{font-size:26px}}
/* Op telefoon krijgen de websitevormen direct een zachte granaatappeltint. */
@media(max-width:720px){body .website-option-grid article{background-color:#fde1d7!important}}

/* De diensttermen lopen rustig en oneindig door onder iedere dienst. */
@keyframes service-ticker{to{transform:translateX(-50%)}}
body:has(.service-list) .service-row h2{grid-column:2}
body:has(.service-list) .service-row p{grid-column:3}
@media(max-width:720px){body:has(.service-list) .service-row ul.service-ticker{display:flex;flex-wrap:nowrap;gap:8px;width:max-content;min-width:0;animation:service-ticker 20s linear infinite;will-change:transform}}
@media(max-width:720px) and (prefers-reduced-motion:reduce){body:has(.service-list) .service-row ul.service-ticker{animation:none}}

/* Werkblokken blijven op hun plek bij hover, zodat de rand niet kan flikkeren. */
body .project,body .project:hover,body .work-card,body .work-card:hover{transform:none!important}
body .project:hover,body .work-card:hover{box-shadow:12px 14px 0 rgba(17,19,24,.14)}

/* Training by Shad: het project is nu een klikbare website-preview. */
body .project-training{display:block!important;padding:0!important;overflow:hidden;background:#fff!important;border:2px solid var(--ink)!important}
body .project-training img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;transition:transform .5s cubic-bezier(.2,.75,.2,1)}
body .project-training:hover img{transform:scale(1.025)}

/* Grote schermen: dezelfde compositie, maar met een passende schaal. */
@media(min-width:1600px){
  .site-header{height:clamp(96px,5.5vw,120px)!important;max-height:none!important}
  .site-header .brand .brand-mark{width:46px!important;height:51px!important;flex-basis:46px!important}
  .site-header .brand .brand-name{font-size:32px!important}
  .site-header nav{gap:38px!important;font-size:15px!important}
  .nav-cta{padding:12px 20px!important}
  .hero{min-height:clamp(780px,47vw,1020px)!important}
  .hero h1{font-size:clamp(144px,10vw,220px)!important;margin-top:clamp(100px,7vw,145px)!important}
  .hero-bottom{max-width:50vw!important}
  .hero-bottom p{max-width:320px!important;font-size:18px!important}
  body .hero-bottom .round-link{width:130px!important;height:130px!important}
  .hero .post-it{width:clamp(250px,14vw,310px)!important;min-height:clamp(215px,13vw,270px)!important;padding:clamp(24px,1.5vw,32px)!important}
  .hero .post-it strong{font-size:clamp(28px,1.7vw,34px)!important}
  .hero .post-it:not(.post-it-secondary){right:calc(4% + 17vw)!important;top:clamp(150px,10vw,205px)!important}
  .hero .post-it-secondary{right:4%!important;top:clamp(160px,10.7vw,220px)!important}
  .section-pad{padding:clamp(120px,8vw,180px) 8vw!important}
  .intro-copy h2,.section-head h2{font-size:clamp(64px,5vw,105px)!important}
  .services-strip article{min-height:clamp(410px,24vw,500px)!important;padding:clamp(48px,3vw,66px) 4vw!important}
  .services-strip h3{font-size:clamp(38px,2.6vw,54px)!important}
  .services-strip p{font-size:16px!important;max-width:290px!important}
  .project,.work-card{height:clamp(475px,28vw,575px)!important}
  .project h3,.work-card h2{font-size:clamp(46px,3vw,62px)!important}
  .statement{min-height:clamp(620px,34vw,720px)!important;padding:clamp(115px,8vw,180px) 8vw!important}
  .statement h2{font-size:clamp(64px,6vw,120px)!important}
  .statement p{font-size:19px!important;max-width:500px!important}
  blockquote{font-size:clamp(42px,4.2vw,78px)!important;max-width:1050px!important}
  .cta{min-height:clamp(460px,26vw,560px)!important;padding:clamp(105px,8vw,175px) 8vw!important}
  .cta h2{font-size:clamp(70px,8vw,145px)!important}
  .big-arrow{min-width:200px!important;padding:19px 26px!important;font-size:14px!important}
  .page-hero{min-height:clamp(400px,24vw,500px)!important;padding:clamp(95px,6vw,130px) 8vw clamp(75px,5vw,110px)!important}
  .page-hero h1{font-size:clamp(76px,7.5vw,145px)!important}
  .service-row{padding:clamp(64px,4vw,85px) 0!important}
  .service-row h2{font-size:clamp(42px,3vw,58px)!important}
  .service-row p{font-size:18px!important;max-width:520px!important}
  .about-panel{min-height:clamp(510px,29vw,610px)!important;padding:clamp(105px,8vw,175px) 8vw!important}
  .about-panel h2{font-size:clamp(64px,5vw,105px)!important}
  .about-panel p,.contact-main p{font-size:18px!important;max-width:500px!important}
  .values{padding:clamp(105px,8vw,175px) 8vw!important}
  .values h2{font-size:clamp(70px,5.4vw,112px)!important}
  .value-grid h3{font-size:34px!important}
  .value-grid p{font-size:16px!important}
  .contact-main{padding:clamp(105px,8vw,175px) 8vw!important;gap:12vw!important}
  .contact-main h1{font-size:clamp(76px,7vw,140px)!important}
  footer{padding:40px 5vw!important;font-size:13px!important}
}

/* Contactknop in het Diensten-blok precies gecentreerd. */
body:has(.service-list) .cta .big-arrow{left:75%!important;right:auto!important;top:50%!important;bottom:auto!important;transform:translate(-50%,-50%)!important}
body:has(.service-list) .cta .big-arrow:hover{transform:translate(-50%,-50%)!important}
html:not(.brand-ready) .site-header .brand{visibility:hidden}

/* Dezelfde rustige glass-header op laptop en desktop. */
@media(min-width:721px){
  .site-header{position:sticky!important;top:0!important;z-index:100!important;transition:background-color .55s cubic-bezier(.2,.75,.2,1),box-shadow .55s cubic-bezier(.2,.75,.2,1),border-color .55s cubic-bezier(.2,.75,.2,1),border-radius .55s cubic-bezier(.2,.75,.2,1)!important}
  .site-header.header-glass{background:rgba(255,255,255,.84)!important;-webkit-backdrop-filter:blur(16px) saturate(130%)!important;backdrop-filter:blur(16px) saturate(130%)!important;border-bottom-color:rgba(17,19,24,.10)!important;border-radius:20px!important;box-shadow:0 8px 24px rgba(17,19,24,.07)!important}
}

/* Minimalistische hero: een rustige lijnvorm en een paar bewegende kleuraccenten. */
.hero{isolation:isolate}
.hero-orbit{position:absolute;right:clamp(-100px,2vw,65px);top:clamp(50px,7vw,135px);width:clamp(300px,31vw,600px);aspect-ratio:1.25;border:1px solid rgba(167,25,53,.42);border-radius:50%;transform:rotate(-20deg);z-index:0;pointer-events:none}
.hero-orbit::before{content:'';position:absolute;inset:13%;border:1px solid rgba(242,106,61,.32);border-radius:50%}
.hero-orbit span,.hero-orbit i,.hero-orbit b{position:absolute;display:block;border-radius:50%;background:#a71935;box-shadow:0 9px 22px rgba(167,25,53,.18)}
.hero-orbit span{width:clamp(18px,1.8vw,32px);height:clamp(18px,1.8vw,32px);left:10%;bottom:8%;animation:kneba-drift 7s ease-in-out infinite}
.hero-orbit i{width:clamp(9px,1vw,16px);height:clamp(9px,1vw,16px);right:12%;top:13%;background:#f26a3d;animation:kneba-drift 6s .7s ease-in-out infinite reverse}
.hero-orbit b{width:clamp(6px,.65vw,11px);height:clamp(6px,.65vw,11px);left:37%;top:4%;background:#f26a3d;animation:kneba-drift 5s 1.2s ease-in-out infinite}
@keyframes kneba-drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(9px,-13px,0)}}
main .project-grid .project-blue{overflow:hidden}
main .project-grid .project-blue::before{content:'';position:absolute;width:58%;aspect-ratio:1;border:1px solid rgba(167,25,53,.45);border-radius:47% 53% 58% 42%;right:-12%;top:-16%;transform:rotate(24deg);transition:transform .8s cubic-bezier(.2,.75,.2,1)}
main .project-grid .project-blue::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#a71935;right:18%;bottom:17%;transition:transform .8s cubic-bezier(.2,.75,.2,1)}
main .project-grid .project-blue:hover::before{transform:rotate(52deg) scale(1.08)}
main .project-grid .project-blue:hover::after{transform:translate(-14px,-20px)}
body .project-training{position:relative}
body .project-training::after{content:'Bekijk website  ↗';position:absolute;left:18px;bottom:18px;padding:10px 13px;border-radius:20px;background:rgba(255,255,255,.92);color:var(--ink);font:500 10px 'DM Mono';text-transform:uppercase;letter-spacing:.02em;opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.75,.2,1)}
body .project-training:hover::after{opacity:1;transform:translateY(0)}
@media(max-width:720px){.hero-orbit{width:255px;right:-95px;top:160px;opacity:.72}.hero-orbit::before{inset:16%}body .project-training::after{opacity:1;transform:none;font-size:9px;left:12px;bottom:12px}}

/* Kneba details: meer karakter, zonder dat de pagina druk wordt. */
.intro,.featured,.statement,.cta,.page-hero,.contact-main,.values,.about-panel,.work-card{position:relative;overflow:hidden}
.intro::before{content:'';position:absolute;width:clamp(130px,15vw,250px);aspect-ratio:1;border:1px solid rgba(167,25,53,.26);border-radius:50%;right:7vw;top:-48%;transform:rotate(-18deg)}
.intro::after{content:'';position:absolute;width:13px;height:13px;border-radius:50%;background:#f26a3d;right:15vw;top:31%;box-shadow:-42px 35px 0 rgba(167,25,53,.82)}
.intro-copy{position:relative;z-index:1}
.services-strip article{overflow:hidden}
.services-strip article::after{content:'';position:absolute;width:110px;height:110px;border-radius:50%;right:-58px;bottom:-58px;border:1px solid currentColor;opacity:.22;transition:transform .8s cubic-bezier(.2,.75,.2,1)}
.services-strip article:nth-child(2)::after{border-radius:30% 70% 65% 35%;transform:rotate(25deg)}
.services-strip article:nth-child(3)::after{width:92px;height:92px;border-radius:0;transform:rotate(45deg)}
.services-strip article:hover::after{transform:translate(-20px,-22px) rotate(70deg) scale(1.15)}
.featured::before{content:'';position:absolute;width:clamp(220px,25vw,460px);height:clamp(220px,25vw,460px);border:1px solid rgba(167,25,53,.24);border-radius:48% 52% 62% 38%;left:-11vw;bottom:-12vw;transform:rotate(32deg)}
.featured .section-head,.featured .project-grid{position:relative;z-index:1}
.statement::before{content:'';position:absolute;width:clamp(310px,38vw,680px);aspect-ratio:1;border:1px solid rgba(255,255,255,.32);border-radius:50%;right:-13vw;bottom:-24vw}
.statement::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#f26a3d;right:19vw;top:24%;box-shadow:33px 39px 0 rgba(253,225,215,.9),-50px 52px 0 rgba(242,106,61,.82)}
.statement-inner{position:relative;z-index:1}
.cta::before{content:'';position:absolute;width:clamp(230px,29vw,540px);aspect-ratio:1;border:1px solid rgba(167,25,53,.34);border-radius:50%;right:-8vw;top:-16vw}
.cta::after{content:'';position:absolute;width:clamp(120px,13vw,220px);aspect-ratio:1;border-radius:48% 52% 42% 58%;background:rgba(242,106,61,.18);right:16vw;bottom:-7vw;transform:rotate(25deg)}
.cta h2,.cta .big-arrow{position:relative;z-index:1}
.page-hero::before{content:'';position:absolute;width:clamp(170px,23vw,410px);aspect-ratio:1;border:1px solid rgba(167,25,53,.35);border-radius:47% 53% 40% 60%;right:8vw;top:-42%;transform:rotate(-28deg)}
.page-hero::after{content:'';position:absolute;width:12px;height:12px;border-radius:50%;background:#f26a3d;right:24vw;top:44%;box-shadow:32px -29px 0 rgba(167,25,53,.88)}
.page-hero h1{position:relative;z-index:1}
.work-card:not(.project-training)::before{content:'';position:absolute;width:62%;aspect-ratio:1;border:1px solid rgba(17,19,24,.45);border-radius:50%;right:-24%;top:-20%;transition:transform .9s cubic-bezier(.2,.75,.2,1)}
.work-card:nth-child(2)::before{border-radius:34% 66% 53% 47%;transform:rotate(24deg)}
.work-card:nth-child(3)::before{border-radius:0;transform:rotate(45deg)}
.work-card:nth-child(4)::before{border-radius:62% 38% 43% 57%}
.work-card h2{position:relative;z-index:1}
.work-card:not(.project-training):hover::before{transform:translate(-24px,26px) rotate(70deg) scale(1.12)}
.about-panel::before{content:'';position:absolute;width:clamp(130px,16vw,270px);aspect-ratio:1;border:1px solid rgba(167,25,53,.34);border-radius:50%;right:-7vw;top:-9vw}
.about-panel:nth-child(2)::before{border-radius:34% 66% 58% 42%;transform:rotate(35deg)}
.about-panel>*{position:relative;z-index:1}
.values::before{content:'';position:absolute;width:clamp(240px,28vw,480px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(242,106,61,.20) 0 3px,transparent 3.5px);background-size:28px 28px;right:-9vw;top:-12vw;opacity:.9}
.value-grid{position:relative;z-index:1}
.value-grid article{border-top:1px solid rgba(167,25,53,.32);padding-top:17px}
.contact-main::before{content:'';position:absolute;width:clamp(260px,31vw,560px);aspect-ratio:1;border:1px solid rgba(167,25,53,.35);border-radius:50%;right:-12vw;bottom:-18vw}
.contact-main::after{content:'';position:absolute;width:clamp(100px,12vw,210px);aspect-ratio:1;background:rgba(242,106,61,.19);border-radius:44% 56% 58% 42%;right:16vw;top:8%;transform:rotate(25deg)}
.contact-main>*,.contact-form{position:relative;z-index:1}
footer{position:relative;overflow:hidden}
footer::before{content:'kneba';position:absolute;right:4vw;bottom:-40px;font:700 clamp(90px,13vw,220px)/1 'DM Sans';letter-spacing:-.1em;color:rgba(255,255,255,.045);pointer-events:none}
@media(max-width:720px){.intro::before,.featured::before,.statement::before,.cta::before,.page-hero::before,.contact-main::before{opacity:.65}.intro::after,.statement::after,.page-hero::after{transform:scale(.75)}.services-strip article::after{right:-45px;bottom:-45px}.values::before{opacity:.45}.work-card:not(.project-training)::before{width:55%}}

/* Intro boven de voorbeelden op de werkpagina. */
.work-intro{background:#fff;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.55fr);gap:8vw;align-items:end;border-bottom:1px solid var(--line)}
.work-intro h2{margin:0;font:700 clamp(46px,5.3vw,86px)/.96 'DM Sans';letter-spacing:-.07em;max-width:850px}
.work-intro p{margin:0;max-width:360px;font-size:17px;line-height:1.5}
@media(max-width:720px){.work-intro{display:block;padding-top:78px!important;padding-bottom:72px!important;text-align:center}.work-intro h2{font-size:42px}.work-intro p{margin:26px auto 0;font-size:16px}}
@media(min-width:1600px){.work-intro h2{font-size:clamp(68px,5.5vw,112px)!important}.work-intro p{font-size:19px!important;max-width:430px!important}}

/* Vier demo-blokken vóór de eigen projecten. */
.demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;padding:42px 8vw 110px;background:var(--block-gray)}
.demo-card{min-height:330px;padding:clamp(28px,3vw,52px);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;border:1px solid rgba(17,19,24,.18);background:#fff;transition:box-shadow .5s ease,transform .5s cubic-bezier(.2,.75,.2,1)}
.demo-card h3{position:relative;z-index:1;margin:0;font:700 clamp(34px,3.5vw,58px)/.94 'DM Sans';letter-spacing:-.065em;max-width:500px}
.demo-card p{position:relative;z-index:1;margin:0;max-width:310px;font-size:15px;line-height:1.45}
.demo-card::before{content:'';position:absolute;width:58%;aspect-ratio:1;border:1px solid rgba(167,25,53,.45);border-radius:50%;right:-18%;top:-25%;transition:transform .8s cubic-bezier(.2,.75,.2,1)}
.demo-card:nth-child(2){background:#fde1d7}.demo-card:nth-child(2)::before{border-radius:35% 65% 48% 52%;transform:rotate(28deg)}
.demo-card:nth-child(3){background:#f9c7bd}.demo-card:nth-child(3)::before{border-radius:0;transform:rotate(45deg)}
.demo-card:nth-child(4){background:#fff0ea}.demo-card:nth-child(4)::before{border-radius:56% 44% 34% 66%;transform:rotate(-18deg)}
.demo-card:hover{transform:translateY(-8px);box-shadow:12px 14px 0 rgba(17,19,24,.13)}
.demo-card:hover::before{transform:translate(-22px,24px) rotate(65deg) scale(1.1)}
.demo-card.demo-shop,.demo-card.demo-garage,.demo-card.demo-stay{padding:0!important;background:#2a060b!important}
.demo-card.demo-shop::before,.demo-card.demo-garage::before,.demo-card.demo-stay::before{display:none!important}
.demo-card.demo-shop img,.demo-card.demo-stay img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.75,.2,1)}
.demo-card.demo-shop:hover img,.demo-card.demo-stay:hover img{transform:scale(1.045)}
.demo-card.demo-stay img{position:absolute;inset:0;transform:scale(1.06)}
.demo-card.demo-stay:hover img{transform:scale(1.11)}
.work-card.project-training img{object-fit:cover!important}
.demo-card.demo-garage iframe{position:absolute;inset:0;width:220%;height:220%;border:0;pointer-events:none;transform:scale(.455);transform-origin:top left;background:#111318}
.demo-card.demo-garage .demo-live-link{position:absolute;inset:0;z-index:2}
.work-title{display:flex;align-items:end;justify-content:space-between;gap:8vw;padding-bottom:45px!important;background:#fff}
.work-title h2{margin:0;font:700 clamp(52px,6vw,98px)/.9 'DM Sans';letter-spacing:-.07em}
.work-title p{margin:0;max-width:340px;font-size:16px;line-height:1.5}
.work-title + .work-grid{padding-top:0!important;background:#fff}
@media(max-width:720px){.demo-grid{grid-template-columns:1fr;gap:14px;padding:28px 7vw 76px}.demo-card{min-height:260px;padding:30px}.demo-card h3{font-size:38px}.demo-card p{font-size:14px}.work-title{display:block;padding:70px 7vw 32px!important;text-align:center}.work-title h2{font-size:54px}.work-title p{margin:22px auto 0}.work-title + .work-grid{padding-top:22px!important}}
@media(min-width:1600px){.demo-grid{padding-top:55px;padding-bottom:145px}.demo-card{min-height:clamp(370px,25vw,510px)}.demo-card p{font-size:17px}.work-title p{font-size:18px!important;max-width:420px!important}}

/* Iets stevigere grafische lijnen: helder op ieder scherm. */
.hero-orbit,.hero-orbit::before,.intro::before,.services-strip article::after,.featured::before,.statement::before,.cta::before,.page-hero::before,.work-card:not(.project-training)::before,.about-panel::before,.contact-main::before,.demo-card::before{border-width:3px}

/* Homepage-contact: een heldere knop zonder botsing met de decoratie. */
.testimonial + .cta .big-arrow{display:none!important}
/* Diensten: eigen, compacte contactknop zonder oude big-arrow-stijlen. */
body:has(.service-list) .cta .service-contact-button{display:grid!important;place-items:center!important;width:150px!important;height:48px!important;padding:0!important;margin:0!important;border:1px solid #111318!important;border-radius:999px!important;background:#111318!important;color:#fff!important;font:600 11px/1 'DM Mono'!important;text-transform:uppercase!important;white-space:nowrap!important;letter-spacing:0!important;line-height:1!important;box-shadow:none!important;transform:none!important;transition:background-color .25s ease,color .25s ease!important}
body:has(.service-list) .cta .service-contact-button:hover{background:#fff!important;color:#111318!important;transform:none!important;box-shadow:none!important}
@media(min-width:721px){body:has(.service-list) .cta{display:grid!important;grid-template-columns:1fr 1fr!important;align-items:center!important}body:has(.service-list) .cta h2{margin:0!important}body:has(.service-list) .cta .service-contact-button{justify-self:center!important}}
@media(max-width:720px){body:has(.service-list) .cta .service-contact-button{position:absolute!important;left:50%!important;bottom:58px!important;transform:translateX(-50%)!important}}
/* Dezelfde contactknop onderaan elke relevante pagina. */
.cta .service-contact-button{display:grid!important;place-items:center!important;width:150px!important;height:48px!important;padding:0!important;margin:0!important;border:1px solid #111318!important;border-radius:999px!important;background:#111318!important;color:#fff!important;font:600 11px/1 'DM Mono'!important;text-transform:uppercase!important;white-space:nowrap!important;letter-spacing:0!important;line-height:1!important;box-shadow:none!important;transform:none!important;transition:background-color .25s ease,color .25s ease!important}
.cta .service-contact-button:hover{background:#fff!important;color:#111318!important;transform:none!important;box-shadow:none!important}
@media(min-width:721px){.cta:has(.service-contact-button){display:grid!important;grid-template-columns:1fr 1fr!important;align-items:center!important}.cta:has(.service-contact-button) h2{margin:0!important}.cta:has(.service-contact-button) .service-contact-button{justify-self:center!important}}
.cta .keep-together{white-space:nowrap!important}
@media(max-width:720px){.cta:has(.service-contact-button){padding-bottom:138px!important}.cta:has(.service-contact-button) .service-contact-button{position:absolute!important;left:50%!important;bottom:58px!important;transform:translateX(-50%)!important}}
@media(min-width:721px){
  .testimonial + .cta::after{display:none}
  .testimonial + .cta{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:clamp(70px,8vw,150px)!important;min-height:430px!important}
  .testimonial + .cta h2{flex:0 1 auto!important;margin:0!important}
  .testimonial + .cta .homepage-contact-button{display:grid!important;place-items:center!important;flex:0 0 132px!important;width:132px!important;height:42px!important;margin:0!important;padding:0!important;border:1px solid #111318!important;border-radius:999px!important;background:#111318!important;color:#fff!important;font:600 10px/1 'DM Mono'!important;text-align:center!important;text-transform:uppercase!important;letter-spacing:0!important;line-height:1!important;white-space:nowrap!important;transform:none!important;box-shadow:none!important;transition:background-color .25s ease,color .25s ease!important}
  .testimonial + .cta .homepage-contact-button:hover{background:#fff!important;color:#111318!important;transform:none!important;box-shadow:none!important}
}

/* Zachte kleurvelden vervangen alle losse lijnen, stippen en vormen. */
.hero-orbit,.orbit,.project-shape{display:none!important}
.intro::before,.intro::after,.services-strip article::after,.featured::before,.statement::before,.statement::after,.cta::before,.cta::after,.page-hero::before,.page-hero::after,.work-card:not(.project-training)::before,.about-panel::before,.values::before,.contact-main::before,.contact-main::after,main .project-grid .project-blue::before,main .project-grid .project-blue::after,.demo-card::before{content:none!important;display:none!important}
.hero{background-image:radial-gradient(circle at 88% 38%,rgba(242,106,61,.23),transparent 25%),radial-gradient(circle at 70% 78%,rgba(167,25,53,.14),transparent 33%)}
.intro{background-image:radial-gradient(circle at 82% 18%,rgba(242,106,61,.16),transparent 28%)}
.services-strip article{background-image:radial-gradient(circle at 90% 90%,rgba(242,106,61,.16),transparent 40%)!important}
.featured{background-image:radial-gradient(circle at 8% 88%,rgba(167,25,53,.12),transparent 29%)}
.statement{background-image:radial-gradient(circle at 88% 80%,rgba(242,106,61,.36),transparent 31%),radial-gradient(circle at 70% 18%,rgba(253,225,215,.13),transparent 26%)}
.cta{background-image:radial-gradient(circle at 88% 18%,rgba(242,106,61,.27),transparent 28%),radial-gradient(circle at 68% 82%,rgba(167,25,53,.14),transparent 31%)}
.page-hero{background-image:radial-gradient(circle at 86% 22%,rgba(242,106,61,.23),transparent 30%),radial-gradient(circle at 70% 78%,rgba(167,25,53,.10),transparent 34%)}
.work-card:not(.project-training),.demo-card:not(.demo-shop):not(.demo-garage):not(.demo-stay){background-image:radial-gradient(circle at 88% 16%,rgba(255,255,255,.46),transparent 28%),radial-gradient(circle at 12% 92%,rgba(167,25,53,.11),transparent 34%)}
.demo-grid > article:nth-of-type(1){display:none}
.about-panel{background-image:radial-gradient(circle at 85% 14%,rgba(242,106,61,.19),transparent 30%),radial-gradient(circle at 12% 94%,rgba(167,25,53,.10),transparent 34%)}
.values{background-image:radial-gradient(circle at 90% 14%,rgba(242,106,61,.17),transparent 28%)}
.contact-main{background-image:radial-gradient(circle at 89% 78%,rgba(242,106,61,.22),transparent 31%),radial-gradient(circle at 72% 18%,rgba(167,25,53,.10),transparent 28%)}