@font-face{font-family:"Switzer";src:url("assets/eigen/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}@font-face{font-family:"Inter Display";src:url("assets/eigen/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}@font-face{font-family:"Melodrama";src:url("assets/eigen/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}@font-face{font-family:"Sora";src:url("assets/eigen/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}@font-face{font-family:"Satoshi";src:url("assets/eigen/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}@font-face{font-family:"Instrument Sans";src:url("assets/eigen/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}@font-face{font-family:"General Sans";src:url("assets/eigen/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}@font-face{font-family:"Neue Montreal";src:url("assets/eigen/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}@font-face{font-family:"DM Sans";src:url("assets/eigen/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}@font-face{font-family:"Manrope";src:url("assets/eigen/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}@font-face{font-family:"Inter";src:url("assets/eigen/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}@font-face{font-family:"JetBrains Mono";src:url("assets/eigen/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}








:root{
  --ink:#121212;
  --white:#fff;
  --mist:#f5f5f5;
  --ink-5:rgb(18 18 18 / .05);
  --ink-10:rgb(18 18 18 / .1);
  --ink-20:rgb(18 18 18 / .2);
  --ink-50:rgb(18 18 18 / .5);
  --ink-70:rgb(18 18 18 / .7);
  --ink-75:rgb(18 18 18 / .75);
  --white-10:rgb(255 255 255 / .1);
  --white-30:rgb(255 255 255 / .3);
  --white-50:rgb(255 255 255 / .5);
  --white-70:rgb(255 255 255 / .7);

  --body-font:"Switzer",Arial,sans-serif;
  --heading-font:"Inter Display",Arial,sans-serif;
  --display-font:"Melodrama",Georgia,serif;

  --body:1.125rem;
  --body-xl:1.25rem;
  --body-md:1rem;
  --body-sm:.875rem;
  --h1:5.625rem;
  --h2:3.75rem;
  --h2-lg:10.625rem;
  --h3:2.625rem;
  --h4:2.25rem;
  --h5:1.875rem;
  --h5-sm:1.375rem;
  --h6:1.625rem;

  --gutter:1.875rem;
  --space:9.375rem;
  --top:13.75rem;
  --radius:.25rem;
  --radius-xs:.125rem;
  --page:6px;

  --ease-out:cubic-bezier(.215,.61,.355,1);      /* power2.out */
  --ease-soft:cubic-bezier(.25,.46,.45,.94);     /* power1.out */
  --ease-inout:cubic-bezier(.455,.03,.515,.955); /* power1.inOut */
  --focus:#121212;
}
@media (max-width:991px){:root{--h1:4.375rem;--h2:3.125rem;--h2-lg:6.25rem;--gutter:1.25rem;--space:7.5rem;--top:9.375rem}}
@media (max-width:767px){:root{--h1:3.125rem;--h2:2.5rem;--h2-lg:4.5rem;--h3:2.125rem;--h4:1.875rem;--h5:1.75rem;--h6:1.375rem;--gutter:.9375rem;--space:5rem;--top:6.25rem}}
@media (max-width:479px){:root{--body:1rem;--h1:3rem;--h3:1.75rem;--h4:1.5rem}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:clip}
body{margin:0;background:var(--white);color:var(--ink-75);font-family:var(--body-font);font-size:var(--body);line-height:1.4em;font-weight:400;-webkit-font-smoothing:auto;overflow-x:clip}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.hero,.about-panel,.commitments,.footer,.step-card.is-dark,.menu-media,.stats-media,.cta-media,.inner-hero,.about-hero-left,.project-hero,.error-section,.lightbox,.contact-right{--focus:#fff}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--white);padding:.75rem 1rem;border-radius:var(--radius);text-decoration:none;font-size:var(--body-sm);transition:top .2s}
.skip-link:focus{top:12px}

/* typografie */
.h2,.h3,.h4,.h5,.h6,.service-title,.step-title,.slide-quote p,.slide-name,.footer-title,.footer-subscribe-title,.menu-link,.project-title,.stat-value,.commitment-title,.inner-hero-title,.about-hero-title,.project-hero-title,.article-title,.team-name,.feature-title,.post-feature-title,.project-meta-info,.project-client-name,.error-subtitle,.rich-text h2,.rich-text h3{font-family:var(--heading-font);font-weight:500;color:var(--ink);line-height:1.1em;letter-spacing:0}
.h2{font-size:var(--h2);letter-spacing:-.03em}
.h3{font-size:var(--h3)}
.h4{font-size:var(--h4)}
.h5{font-size:var(--h5)}
.h6{font-size:var(--h6)}
.is-light{color:var(--white)}
.small-caps{font-size:var(--body-sm);line-height:1em;text-transform:uppercase}
.small-caps.is-light{color:var(--white)}

/* hoeklijnen rond kleine kopjes */
.eyebrow{position:relative;display:flex;width:fit-content;align-self:flex-start;padding:1px 9px}
.head-center .eyebrow,.cta-info .eyebrow,.hero-top .eyebrow,.inner-hero-content .eyebrow{align-self:center;margin-inline:auto}
.eyebrow-text{font-size:var(--body-sm);line-height:1em;text-transform:uppercase;color:var(--ink);text-align:center}
.eyebrow.is-light .eyebrow-text{color:var(--white)}
.corner{position:absolute;width:6px;height:6px;border:0 solid var(--ink)}
.eyebrow.is-light .corner{border-color:var(--white)}
.corner-tl{left:0;top:-1px;border-top-width:1px;border-left-width:1px}
.corner-br{right:0;bottom:-1px;border-bottom-width:1px;border-right-width:1px}
.eyebrow-lg .eyebrow-text{font-family:var(--body-font);font-size:var(--body-xl);line-height:1.2em;letter-spacing:-.03em;text-transform:none;font-weight:400}
@media (max-width:479px){.eyebrow-lg .eyebrow-text{font-size:var(--body)}}

/* knoppen */
.button{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--white-30);border-radius:var(--radius);background:var(--ink);color:var(--white);font-size:var(--body-md);line-height:1.4em;font-weight:500;text-align:center;padding:.875rem 1.5rem;text-decoration:none;transition:all .3s ease-in-out;white-space:nowrap}
.button:hover{border-color:var(--white-10);background:var(--ink-50);color:var(--white)}
.button-light{border-color:var(--ink);background:var(--white);color:var(--ink)}
.button-light:hover{border-color:var(--ink-50);background:var(--mist);color:var(--ink)}
.button-sm{font-size:var(--body-sm);line-height:1.2em;padding:.5rem .875rem}
.button-sm:hover{border-color:var(--white-30);background:var(--ink-70)}
.button-block{width:100%}
.button-subscribe{border-color:var(--ink)}
@media (max-width:767px){.button{padding:.625rem 1.25rem}.button-sm{padding:.375rem .875rem}}
@media (max-width:479px){.button{padding-left:1.25rem;padding-right:1.25rem}.button-sm{padding:.375rem .875rem}}

/* containers */
.page{position:relative;padding:var(--page)}
.wrap{max-width:1460px;margin:0 auto;padding:0 var(--gutter)}
.wrap-medium{max-width:1000px;margin:0 auto;padding:0 var(--gutter)}
.wrap-inner{max-width:760px;margin:0 auto;padding:0 var(--gutter)}
.gutter-full{padding:0 var(--gutter)}
.section-pad{padding-top:var(--space);padding-bottom:var(--space)}
.pad-top{padding-top:var(--space)}
.pad-bottom{padding-bottom:var(--space)}
.section-top{padding-top:var(--top)}
.section-head{margin-bottom:2.5rem}
@media (max-width:991px){.section-head{margin-bottom:1.875rem}}
@media (max-width:767px){.section-head{margin-bottom:1.25rem}}
.head-split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px}
.head-split .h2{margin:0}
.head-action{align-self:end}
.head-stack{display:flex;flex-direction:column;gap:20px}
.head-center{display:flex;flex-direction:column;align-items:center;gap:20px;max-width:700px;margin:0 auto;text-align:center}
@media (max-width:767px){.head-split{grid-template-columns:minmax(0,1fr);gap:16px}.head-stack{gap:6px}.head-center{gap:6px}}
@media (max-width:479px){.head-stack{gap:8px}}

/* bovenbalk */
.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 16px;padding:8px var(--gutter);background:var(--mist);color:var(--ink);font-size:.8125rem;line-height:1.3em;text-align:center}
.topbar p{margin:0}
.topbar a{text-underline-offset:3px;font-weight:500}
.topbar a:hover{color:var(--ink-50)}

/* navigatie */
.nav{position:absolute;inset:0 0 auto;z-index:20;padding:1rem}
.nav-bar,.menu-bar{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;gap:16px;background:var(--white);border-radius:var(--radius);padding:.5rem}
.nav-start{justify-self:start}
.nav-end{justify-self:end;display:flex;align-items:center;gap:32px}
.brand{justify-self:center;display:block;color:var(--ink)}
.brand-mark{width:30px;height:30px;fill:currentColor}
.menu-button{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--ink);border-radius:var(--radius);background:var(--white);padding:.375rem .875rem;color:var(--ink)}
.menu-button-text{font-size:var(--body-md);line-height:1.2em}
.plus-icon{position:relative;flex:none;display:flex;align-items:center;justify-content:center;width:16px;height:16px}
.plus-icon i{position:absolute;width:16px;height:2px;border-radius:var(--radius-xs);background:var(--ink)}
.plus-icon i:last-child{width:2px;height:16px}
.plus-icon b{position:relative;z-index:2;width:6px;height:6px;border-radius:50%;background:var(--ink)}
@media (max-width:991px){.nav-end{gap:15px}}
@media (max-width:767px){.nav{padding:.75rem}.nav-end{gap:20px}.menu-button{padding:.25rem .625rem}}
@media (max-width:479px){.nav-bar,.menu-bar{grid-template-columns:1fr 2fr auto}.brand-mark{width:24px;height:24px}.menu-button-text{font-size:var(--body-sm)}.plus-icon{width:12px;height:12px}.plus-icon i{width:12px}.plus-icon i:last-child{width:2px;height:12px}.plus-icon b{width:4px;height:4px}}

/* menu-paneel */
.menu{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;padding:1rem;min-height:100vh}
.menu[hidden]{display:none}
.menu-overlay{position:absolute;inset:0;height:100vh;background:var(--ink-50);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.menu-bar{position:relative;z-index:2}
.menu-panel{position:relative;z-index:2;flex:1;top:10px;padding-top:1.25rem;min-height:0}
.menu-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;height:100%;background:var(--white);border-radius:var(--radius);padding:6px}
.menu-left{display:flex;flex-direction:column;gap:6px;min-height:0}
.menu-links{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:30px;background:var(--mist);border-radius:var(--radius);padding:3.125rem}
.menu-link{font-size:var(--h3);color:var(--ink-50);text-decoration:none;transition:color .3s ease-in-out}
.menu-link:hover,.menu-link.is-current{color:var(--ink)}
.menu-social{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;background:var(--mist);border-radius:var(--radius);padding:1.25rem}
.menu-media{position:relative;height:100%;border-radius:var(--radius);overflow:clip;background:var(--ink)}
@media (max-width:991px){.menu-panel{padding-top:.625rem}.menu-grid{grid-template-columns:minmax(200px,1fr) minmax(200px,1fr)}.menu-links{padding:1.875rem}}
@media (max-width:767px){.menu{padding:.75rem;overflow-y:auto}.menu-grid{grid-template-columns:minmax(0,1fr);align-items:start;height:auto}.menu-left{height:auto}.menu-links{gap:20px;padding:1.25rem;flex:none}.menu-media{height:250px}}

/* sociale items */
.social-item{display:flex;align-items:center;gap:6px;color:var(--white);opacity:.5;line-height:1.4em;transition:all .3s ease-in-out}
.social-item:hover{opacity:1}
.social-item.is-dark{color:var(--ink)}
.social-item svg{width:18px;height:18px;fill:currentColor}

/* bewegend beeld met pauzeknop (vervangt de achtergrondvideo's van het template) */
.media-motion{position:relative;overflow:clip}
.media-motion img{width:100%;height:100%;object-fit:cover;animation:drift 24s ease-in-out infinite alternate;transform-origin:50% 50%}
.media-motion.is-paused img{animation-play-state:paused}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.08) translate3d(-1.5%,-1%,0)}}
.pause-button{position:absolute;right:1.25rem;bottom:1.25rem;z-index:3;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:var(--radius);background:var(--white);color:var(--ink);padding:0}
.pause-button svg{width:14px;height:16px;fill:currentColor}
@media (max-width:479px){.pause-button{width:24px;height:24px}.pause-button svg{width:12px;height:14px}}

/* kleurvlakken waar nog geen beeld is */
.plane{display:flex;align-items:flex-end;width:100%;height:100%;padding:1.25rem;background-color:#d8d2c8;background-image:linear-gradient(160deg,rgb(255 255 255 / .35),rgb(255 255 255 / 0) 55%),repeating-linear-gradient(90deg,rgb(18 18 18 / .035) 0 1px,transparent 1px 64px)}
.plane-stone{background-color:#cfcac2}
.plane-oak{background-color:#c9b49a;background-image:linear-gradient(160deg,rgb(255 255 255 / .3),rgb(255 255 255 / 0) 60%),repeating-linear-gradient(0deg,rgb(18 18 18 / .05) 0 1px,transparent 1px 22px)}
.plane-clay{background-color:#b9a597}
.plane-lime{background-color:#e2ded6}
.plane-label{font-size:var(--body-sm);line-height:1em;text-transform:uppercase;color:var(--ink-50)}

/* hero (home) */
.hero{position:relative;height:100vh;padding:7.5rem 0 1.875rem;border-radius:var(--radius);background:var(--ink);overflow:clip}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-shade{position:absolute;inset:0;background:var(--ink);opacity:.3}
.hero-frame{height:100%}
.hero-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:20px;width:100%;height:100%}
.hero-top{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;width:100%;max-width:1260px;height:100%;margin:0 auto;text-align:center;container-type:inline-size}
.hero-wordmark{width:100%;font-family:var(--display-font);font-weight:500;font-size:12.7cqw;line-height:1.5em;color:var(--white);white-space:nowrap}
.hero-bottom{position:relative;z-index:2;display:flex;justify-content:space-between;gap:20px;width:100%}
@media (max-width:991px){.hero{height:80vh}}
@media (max-width:767px){.hero{height:70vh;padding-top:4.125rem}}

/* manifest */
.about{padding-top:var(--page);overflow:clip}
.about-panel{position:relative;border-radius:var(--radius);background:var(--ink);overflow:clip}
.about-stack{position:relative;z-index:2;display:flex;flex-direction:column;gap:50px}
.about-top{display:flex;flex-direction:column;gap:30px}
.about-mark{align-self:center;color:var(--white)}
.about-mark svg{width:30px;height:30px;fill:currentColor}
.about-title{color:var(--white);font-family:var(--heading-font);font-size:var(--h2);line-height:1.2em;font-weight:400;letter-spacing:-.03em;text-align:center}
.about-actions{display:flex;justify-content:center;gap:20px}
.about-ring{position:absolute;top:0;z-index:1;width:746px;height:746px;border:1px solid var(--white);border-radius:50%;opacity:.05;pointer-events:none}
.ring-1{left:-100px}
.ring-2{left:0;right:0;margin:0 auto}
.ring-3{right:-100px}
@media (max-width:479px){.about-title{font-size:var(--h3)}.about-actions{flex-wrap:wrap}}

/* marquee met voorbeeldlogo's */
.marquee{display:flex;max-width:560px;margin:0 auto;overflow:clip;-webkit-mask-image:linear-gradient(to right,transparent,#000 20% 80%,transparent);mask-image:linear-gradient(to right,transparent,#000 20% 80%,transparent)}
.marquee-item{flex:none;display:flex;align-items:center;gap:30px;padding-right:30px;opacity:.6;animation:marquee 50s linear infinite}
.marquee-item:hover{animation-play-state:paused}
.client-logo{width:auto;height:20px;fill:var(--white)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (max-width:767px){.marquee{max-width:100%}}

/* oprichters */
.founder{padding-top:3.125rem}
.founder-grid{display:grid;grid-template-columns:.66fr auto 1fr;gap:50px;border-radius:var(--radius);background:var(--mist);padding:3.125rem}
.founder-left{display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.founder-frames{position:relative;display:flex;padding:3.125rem 0 4.625rem .688rem}
.frame{position:relative;width:112px;height:132px;padding:.375rem .375rem 1rem;background:var(--ink)}
.frame img{width:100%;height:auto;object-fit:cover}
.frame-1{transform:rotate(-10deg)}
.frame-2{position:absolute;left:80px;bottom:9px;transform:rotate(10deg)}
.founder-divider{width:1px;height:100%;background:var(--ink);opacity:.1}
.founder-right{display:flex;flex-direction:column;gap:200px}
.founder-text{display:flex;flex-direction:column;gap:30px}
.founder-sign{display:flex;flex-direction:column;gap:10px}
.founder-name{color:var(--ink);font-size:var(--body-xl);line-height:1.2em;letter-spacing:-.03em}
@media (max-width:991px){.founder{padding-top:2.25rem}.founder-grid{gap:20px;padding:1.875rem}}
@media (max-width:767px){.founder-grid{grid-template-columns:minmax(0,1fr);padding:1.25rem}.founder-divider{width:100%;height:1px}.founder-right{gap:30px}}

/* projectkaarten */
.project-grid{display:grid;gap:6px}
.project-row,.project-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.project-card{position:relative;display:block;width:100%;aspect-ratio:681/783;border-radius:var(--radius);overflow:clip;text-decoration:none;color:var(--ink);background:var(--mist)}
.project-card.is-wide{aspect-ratio:1368/770}
.project-media{position:absolute;inset:0;display:block;overflow:clip}
.project-media img,.project-media .plane{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease-inout)}
.project-info{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:1.25rem;border-radius:var(--radius);background:var(--white);transition:opacity .35s var(--ease-inout),transform .35s var(--ease-inout)}
.project-text{display:flex;flex-direction:column;gap:6px}
.project-title{font-size:var(--h6)}
.project-place,.project-year{font-size:var(--body-sm);line-height:1.2em;color:var(--ink-75)}
.project-corners{position:absolute;inset:10px;pointer-events:none}
.project-corners::before,.project-corners::after{content:"";position:absolute;width:8px;height:8px;border:0 solid var(--ink)}
.project-corners::before{left:0;top:0;border-top-width:1px;border-left-width:1px}
.project-corners::after{right:0;bottom:0;border-bottom-width:1px;border-right-width:1px}
@media (min-width:768px){
  .project-media img,.project-media .plane{transform:scale(1.05)}
  .project-info{opacity:0;transform:translateY(10px) scale(1.03)}
  .project-card:hover .project-media img,.project-card:hover .project-media .plane,.project-card:focus-visible .project-media img,.project-card:focus-visible .project-media .plane{transform:scale(1.01)}
  .project-card:hover .project-info,.project-card:focus-visible .project-info{opacity:1;transform:none}
}
@media (max-width:991px){.project-title{font-size:var(--body-xl)}}
@media (max-width:767px){.project-info{left:6px;right:6px;bottom:6px;flex-wrap:wrap;padding:.875rem}.project-corners{inset:6px}}
@media (max-width:479px){.project-row,.project-list{grid-template-columns:minmax(0,1fr)}}

/* paginering */
.pagination{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:16px;margin-top:2.5rem}
.page-count{text-align:center}
.pagination-slot.is-end{justify-self:end}
@media (max-width:767px){.pagination{grid-template-columns:1fr auto 1fr}}
@media (max-width:479px){.pagination{margin-top:2rem}}

/* diensten */
.service-list{display:flex;flex-direction:column;gap:6px}
.service{border-bottom:1px solid var(--ink-20);background:transparent;transition:background-color .3s var(--ease-soft),border-color .3s var(--ease-soft)}
.service.is-open{background:var(--mist);border-bottom-color:transparent}
.service-head{font:inherit}
.service-trigger{display:flex;align-items:flex-start;gap:20px;width:100%;padding:1.25rem .625rem;border:0;background:none;text-align:left}
.service-num{flex:0 1 auto;width:200px;padding-top:.375rem;color:var(--ink-50);font-size:var(--body-sm);line-height:1.2em}
.service-title{flex:0 1 auto;width:100%;font-size:var(--h3)}
.plus-lg{flex:none;width:24px;height:24px;margin-top:.563rem;transition:transform .3s var(--ease-inout)}
.plus-lg i{width:24px}
.plus-lg i:last-child{width:2px;height:24px}
.plus-lg b{width:10px;height:10px}
.service.is-open .plus-lg{transform:rotate(135deg)}
.service-body{overflow:hidden}
.js .service:not(.is-open) .service-body{height:0;visibility:hidden}
.service-inner{display:flex;gap:20px}
.service-space{flex:0 1 auto;width:200px}
.service-grid{flex:0 1 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px;width:100%;padding:1.875rem 0}
.service-left{display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.badge-list{display:flex;gap:10px;padding-top:1.875rem}
.badge{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-xs);background:var(--ink-5);color:var(--ink);font-size:var(--body-sm);line-height:1.2em;padding:.375rem .75rem}
.badge-white{background:var(--white)}
.badge-glass{background:var(--white-10);color:var(--white)}
.service-right{padding-right:2.5rem}
.service-right img,.service-right .plane{width:100%;height:auto;aspect-ratio:513/231;object-fit:cover;border-radius:var(--radius)}
@media (max-width:767px){.service-trigger{padding-top:.625rem;padding-bottom:.625rem}.service-num,.service-space{width:30px}.service-num{padding-top:.313rem}.service-title{font-size:var(--h4)}.plus-lg{width:18px;height:18px}.plus-lg i{width:18px}.plus-lg i:last-child{width:2px;height:18px}.plus-lg b{width:6px;height:6px}.service-grid{grid-template-columns:minmax(0,1fr);gap:20px;padding:1.25rem 0}.service-left{gap:8px}.badge-list{padding-top:1rem}}
@media (max-width:479px){.service-trigger{gap:16px}.service-num,.service-space{width:40px}.service-inner{gap:16px}.badge-list{flex-wrap:wrap}}

/* afspraken */
.commitments{position:relative;padding-bottom:1.875rem;border-radius:var(--radius);background:var(--ink);overflow:clip}
.commitments-content{position:relative;z-index:2;display:flex;flex-direction:column;gap:550px}
.commitments-media{position:absolute;inset:0}
.commitments-media img{width:100%;height:100%;object-fit:cover}
.commitments-shade{position:absolute;inset:0;background:var(--ink);opacity:.3;pointer-events:none}
.commitment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.commitment-card{display:flex;flex-direction:column;gap:80px;padding:1.875rem;border-radius:var(--radius);background:var(--white-10);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:clip}
.commitment-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.commitment-title{color:var(--white);font-size:var(--h5)}
.ticks{display:flex;gap:4px;padding:.438rem .188rem 0}
.ticks i{width:1px;height:14px;background:var(--white);opacity:.2;transform:rotate(15deg)}
.commitment-card:nth-child(1) .ticks i:nth-child(-n+1),.commitment-card:nth-child(2) .ticks i:nth-child(-n+2),.commitment-card:nth-child(3) .ticks i:nth-child(-n+3),.commitment-card:nth-child(4) .ticks i:nth-child(-n+4),.commitment-card:nth-child(5) .ticks i:nth-child(-n+5),.commitment-card:nth-child(6) .ticks i{opacity:1}
.commitment-text{max-width:70%;color:var(--white-70)}
@media (max-width:991px){.commitments-content{gap:200px}.commitment-card{padding:1.5rem}.commitment-text{max-width:100%}}
@media (max-width:767px){.commitments-content{gap:100px}.commitment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.commitment-card{gap:50px;padding:1rem}}
@media (max-width:479px){.commitments-content{gap:60px}.commitments .head-center{gap:10px}.commitment-card{gap:30px;padding:.875rem}.commitment-top{flex-direction:column;gap:16px}.ticks{order:-1}.commitment-title{font-size:var(--h6)}.commitment-text{font-size:var(--body-sm)}}

/* cijfers (home en over ons) */
.stats-panel{display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:var(--radius);background:var(--mist)}
.stats-media{height:780px;border-radius:var(--radius);background:var(--ink)}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.stat-card{display:flex;flex-direction:column;gap:30px;padding:1.25rem;border-radius:var(--radius);background:var(--white)}
.stat-value{order:-1;font-size:var(--h3)}
.stat-label{text-align:right}
.stats-note,.steps-note{margin-top:.75rem;font-size:var(--body-sm);line-height:1.3em;color:var(--ink-50)}
/* labels als "voorbeeld" staan buiten de stroom, zodat de maten van het template gelijk blijven */
.wrap:has(>.stats-note),.wrap-inner:has(>.stats-note){position:relative}
.wrap>.stats-note,.wrap-inner>.stats-note{position:absolute;left:var(--gutter);right:var(--gutter);top:100%}
@media (max-width:991px){.stats-media{height:500px}.stat-value{font-size:var(--h5)}}
@media (max-width:767px){.stats-media{height:400px}.stat-card{padding:.625rem}.stat-label{font-size:var(--body-md)}}
@media (max-width:479px){.stats-media{height:300px}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* werkwijze */
.steps{overflow:clip}
.steps-head{display:flex;flex-direction:column;gap:20px;max-width:700px}
.step-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;will-change:transform}
.step-card{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:1.875rem;border-radius:var(--radius);background:var(--mist);overflow:clip}
.step-card.is-dark{background:var(--ink)}
.step-top{display:flex;flex-direction:column;justify-content:center;gap:60px;padding-bottom:3.75rem}
.step-info{display:flex;flex-direction:column;gap:10px}
.step-num{padding-top:.313rem;color:var(--ink-75);font-size:var(--body-sm);line-height:1.2em}
.step-title{font-size:var(--h6)}
.step-drawing{align-self:center;width:auto;height:160px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.step-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.step-card.is-dark .step-num,.step-card.is-dark .step-text{color:var(--white-70)}
.step-card.is-dark .step-title{color:var(--white)}
.step-card.is-dark .step-drawing{stroke:var(--white)}
.steps-note{margin-top:1.25rem}
@media (max-width:991px){.steps-head,.step-grid{gap:16px}.step-card{padding:1rem}.step-top{gap:50px;padding-bottom:2rem}.step-drawing{height:120px}.step-text{font-size:var(--body-md)}}
@media (max-width:767px){.step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479px){.steps-head{gap:10px}.step-grid{grid-template-columns:minmax(0,1fr)}}

/* ervaringen-slider */
.slider{position:relative;background:var(--mist);border-radius:var(--radius);touch-action:pan-y}
.slider-mask{display:grid;overflow:hidden;border-radius:var(--radius)}
.slide{grid-area:1/1;padding:6px;background:var(--mist);visibility:hidden}
.slide.is-active{visibility:visible}
.slide-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:50px;height:100%}
.slide-image{width:100%;height:100%;min-height:100%;aspect-ratio:653/612;object-fit:cover;border-radius:var(--radius)}
.slide-content{display:flex;flex-direction:column;justify-content:space-between;padding:2.75rem 2.75rem 2.75rem 0}
.slide-top{display:flex;flex-direction:column;align-items:flex-start;gap:60px;padding-bottom:3.75rem}
.slide-quote{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.stars{width:auto;height:14px;aspect-ratio:86/14}
.slide-quote blockquote{margin:0;padding:0;background:none}
.slide-quote p{font-size:var(--h5)}
.slide-bottom{display:flex;flex-direction:column;gap:4px;padding-right:8.5rem}
.slide-name{font-size:var(--h6)}
.slider-arrow{position:absolute;bottom:56px;z-index:3;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:var(--radius);background:var(--white);color:var(--ink);padding:0;transition:background-color .3s ease-in-out}
.slider-arrow:hover{background:var(--ink-5)}
.slider-arrow svg{width:40px;height:40px}
.arrow-prev{right:104px}
.arrow-next{right:56px}
@media (max-width:991px){.slide-grid{gap:30px}.slide-content{padding:1.875rem 1.875rem 1.875rem 0}.slide-quote p{font-size:var(--h6)}.slide-bottom{padding-right:5rem}.arrow-prev{right:80px}.arrow-next{right:30px}}
@media (max-width:767px){.slide-grid{grid-template-columns:minmax(0,1fr);gap:16px}.slide-image{height:auto}.slide-content{padding:1.25rem}.slide-top{gap:20px;padding-bottom:1.875rem}.slide-bottom{padding-right:0}.slider-arrow{bottom:30px}.slide-role{font-size:var(--body-sm)}}
@media (max-width:479px){.slide-content{padding-bottom:3rem}.slide-top{padding-bottom:1.25rem}.slide-quote{gap:16px}.slide-quote p,.slide-name{font-size:var(--body-xl)}.slider-arrow{width:32px;height:32px;bottom:20px}.slider-arrow svg{width:32px;height:32px}.arrow-prev{right:60px}.arrow-next{right:20px}}

/* journaalkaarten */
.journal-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px}
.journal-list{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;gap:30px}
.post-card{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:6px;border-radius:var(--radius);background:var(--mist);text-decoration:none;color:var(--ink-75)}
.post-content{display:flex;flex-direction:column;gap:6px;width:100%;height:100%}
.post-media{position:relative;display:block;width:100%;height:100%;border-radius:var(--radius);overflow:clip}
.post-card .post-media{position:relative;flex:1 1 auto;min-height:302px}
.post-media img,.post-media .plane{position:absolute;inset:0}
.post-card.is-small .post-media{min-height:0;height:auto;aspect-ratio:424/212}
.post-media img,.post-media .plane{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease-inout)}
.post-title-wrap{display:block;padding:1.5rem 1.5rem 0}
.post-title{display:block}
.post-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;padding:1.25rem 1.5rem 1.5rem}
.post-left{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:var(--body-sm);line-height:1.2em}
.post-link{align-self:end;border-bottom:1px solid var(--ink);color:var(--ink);font-size:var(--body-sm);line-height:1.2em;padding-bottom:1px;transition:border-color .35s var(--ease-inout)}
.post-inline{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;height:100%;padding:6px;border-radius:var(--radius);background:var(--mist);text-decoration:none;color:var(--ink-75)}
.post-inline .post-media{min-height:12.75rem}
.post-inline-info{display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:1.25rem 1.5rem 1.5rem}
.post-meta-inline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding-top:1.875rem}
.blog-content{display:flex;flex-direction:column;gap:30px}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.post-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;padding:6px;border-radius:var(--radius);background:var(--mist);text-decoration:none;color:var(--ink-75)}
.post-feature .post-media{min-height:368px}
.post-feature-content{display:flex;flex-direction:column;align-items:flex-start;gap:50px;height:100%;padding:2.75rem}
.post-feature-top{display:flex;flex-direction:column;gap:20px;width:100%}
.post-feature-meta{display:flex;align-items:center;gap:20px}
.post-feature-title{max-width:80%;font-size:var(--h4)}
.post-feature-text{max-width:70%;font-size:var(--body-sm);line-height:1.2em}
.post-feature-bottom{margin-top:1.875rem}
@media (min-width:768px){
  .post-media img,.post-media .plane{transform:scale(1.05)}
  [data-card]:hover .post-media img,[data-card]:hover .post-media .plane,[data-card]:focus-visible .post-media img,[data-card]:focus-visible .post-media .plane{transform:scale(1.01)}
  [data-card]:hover .post-link,[data-card]:focus-visible .post-link{border-color:transparent}
}
@media (max-width:991px){.journal-grid,.journal-list{gap:20px}.blog-content,.blog-grid{gap:16px}.post-title-wrap{padding:1rem 1rem 0}.post-meta{grid-template-columns:minmax(0,1fr);justify-items:start;gap:10px;padding:1.25rem 1rem 1rem}.post-inline-info{padding:1rem}.post-meta-inline{grid-template-columns:minmax(0,1fr);justify-items:start;padding-top:1.25rem}.post-feature-content{gap:20px;padding:1.5rem}.post-feature-top{gap:16px}.post-feature-meta{flex-wrap:wrap}.post-feature-title,.post-feature-text{max-width:100%}}
@media (max-width:767px){.journal-grid{grid-template-columns:minmax(0,1fr)}.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.post-card .post-media{min-height:0;height:auto;aspect-ratio:2/1}.post-title-wrap{padding:.75rem .75rem 0}.post-meta{gap:8px;padding:1.25rem .75rem .75rem}.post-inline-info{padding:.75rem}.post-feature-content{padding:1rem}.post-feature-meta{gap:10px}}
@media (max-width:479px){.post-inline,.post-feature{grid-template-columns:minmax(0,1fr)}.blog-grid{grid-template-columns:minmax(0,1fr)}.post-inline .post-media,.post-feature .post-media{min-height:0;height:auto;aspect-ratio:2/1}.post-feature-content{padding:.75rem}}

/* binnenpagina-kop */
.inner-hero{position:relative;padding:11.875rem 0 7.5rem;border-radius:var(--radius);background:var(--ink);overflow:hidden}
.inner-hero-title{color:var(--white);font-size:var(--h1);letter-spacing:-.04em;text-align:center}
.inner-hero-title.is-small{font-size:var(--h2);letter-spacing:-.03em}
.inner-hero-content{display:flex;flex-direction:column;align-items:center;gap:20px}
.inner-hero-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.inner-hero-date{display:flex;gap:8px;color:var(--white-70);font-size:var(--body-sm);line-height:1.2em}
.article-meta-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.article-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;color:var(--white-70);font-size:var(--body-sm);line-height:1.2em}
.article-title{color:var(--white);font-size:var(--h2);letter-spacing:-.03em}
.article-intro{width:70%;color:var(--white-70)}
@media (max-width:991px){.inner-hero{padding:8.5rem 0 5rem}.article-intro{width:80%}}
@media (max-width:767px){.inner-hero{padding:5.625rem 0 3.125rem}.article-intro{width:100%}}

/* over ons */
.about-hero{padding-bottom:6px}
.about-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.about-hero-left{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;padding:13.75rem 3.125rem 9.375rem;border-radius:var(--radius);background:var(--ink);overflow:clip}
.about-hero-title{max-width:80%;color:var(--white);font-size:var(--h2);letter-spacing:-.03em}
.about-hero-text{max-width:90%;color:var(--white-70)}
.about-hero-right{height:920px;border-radius:var(--radius);overflow:clip}
.about-hero-right img{width:100%;height:100%;object-fit:cover}
.stat-section{position:relative;padding:var(--space) 6px 6px;border-radius:var(--radius);background:var(--mist);overflow:clip}
.stat-info{position:relative;z-index:2;display:flex;flex-direction:column;gap:200px}
.stat-intro{display:flex;flex-direction:column;align-items:center;gap:20px;max-width:700px;margin:0 auto;text-align:center}
.stat-title{max-width:60%}
.stat-text{max-width:500px}
.ring{position:absolute;top:0;z-index:1;width:725px;height:725px;border:1px solid var(--ink);border-radius:50%;opacity:.05;pointer-events:none}
.ring-a{left:-100px}
.ring-b{left:0;right:0;margin:0 auto}
.ring-c{right:-100px}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.feature-card{display:flex;flex-direction:column;align-items:center;gap:30px}
.feature-icon{width:auto;height:50px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.feature-info{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.feature-title{font-size:var(--h6)}
.feature-text{max-width:66%}
.team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.team-card{border-radius:var(--radius);background:var(--mist);overflow:clip}
.team-top{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}
.team-avatar{width:100%;height:auto;aspect-ratio:338/371;object-fit:cover}
.team-social{position:absolute;left:0;right:20px;bottom:20px;z-index:2;display:flex;gap:10px;transition:opacity .35s var(--ease-inout),transform .35s var(--ease-inout)}
.team-social-item{display:flex;align-items:center;justify-content:center;width:18px;height:18px;color:var(--white);opacity:.5;transition:opacity .3s}
.team-social-item:hover{opacity:1}
.team-social-item svg{width:18px;height:18px;fill:currentColor}
.team-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent,var(--ink));pointer-events:none;transition:opacity .35s var(--ease-inout)}
.team-bottom{display:flex;flex-direction:column;gap:10px;padding:1.25rem}
.team-name{font-size:var(--h5-sm)}
.team-role{font-size:var(--body-sm);line-height:1.2em}
@media (min-width:768px){
  .team-social{opacity:0;transform:translate(0,20px)}
  .team-overlay{opacity:0}
  .team-card:hover .team-social,.team-card:focus-within .team-social{opacity:1;transform:translate(20px,0)}
  .team-card:hover .team-overlay,.team-card:focus-within .team-overlay{opacity:1}
}
@media (max-width:991px){.about-hero-left{padding:11rem 1.875rem 7.5rem}.about-hero-title,.about-hero-text{max-width:100%}.about-hero-right{height:100%}.stat-info{gap:50px}.ring{width:458px;height:458px}.feature-grid{gap:20px}.feature-text{max-width:100%}}
@media (max-width:767px){.about-hero-grid{grid-template-columns:minmax(0,1fr)}.about-hero-left{padding:5.625rem .875rem 3.125rem}.about-hero-right{height:430px}.stat-title{max-width:100%}.ring{display:none}.feature-text{font-size:var(--body-md)}.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.team-social{left:14px;right:14px;bottom:14px}.team-overlay{opacity:.6}}
@media (max-width:479px){.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.feature-card:nth-child(3){grid-column:span 2}.team-social-item{opacity:1}.team-bottom{padding:.75rem}.team-name{font-size:var(--body-xl)}}

/* projectdetail */
.project-hero{position:relative;height:100vh;padding-top:13.75rem;border-radius:var(--radius);background:var(--ink);overflow:clip}
.project-hero-frame{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;height:100%}
.project-hero-content{display:flex;flex-direction:column;align-items:center;gap:20px}
.project-hero-title{color:var(--white);font-size:var(--h1);letter-spacing:-.04em;text-align:center}
.project-hero-text{max-width:550px;margin:0 auto;color:var(--white-70);text-align:center}
.project-hero-media{position:absolute;inset:0}
.project-hero-media img,.project-hero-media .plane{width:100%;height:100%;object-fit:cover}
.project-hero-shade{position:absolute;inset:0;z-index:1;background:var(--ink);opacity:.6;pointer-events:none}
.project-meta-section{padding-top:6px}
.project-meta-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:6px;border-radius:var(--radius);background:var(--mist);overflow:clip}
.project-meta-card{display:flex;flex-direction:column;gap:20px;padding:1.25rem;border-radius:var(--radius);background:var(--white);overflow:clip}
.project-meta-title{font-size:var(--body-xl);line-height:1.2em;letter-spacing:-.03em}
.project-meta-info{font-size:var(--h5-sm)}
.project-detail{display:flex;flex-direction:column;gap:60px}
.project-rich{max-width:700px;margin:0 auto;width:100%}
.gallery-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.gallery-item{display:block;aspect-ratio:681/789;border-radius:var(--radius);overflow:hidden;cursor:zoom-in}
.gallery-item img,.gallery-item .plane{width:100%;height:100%;object-fit:cover}
div.gallery-item{cursor:default}
.project-quote{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:700px;margin:0 auto;width:100%}
.project-quote-item{display:flex;flex-direction:column;gap:30px;width:100%;padding:3.125rem;border-radius:var(--radius);background:var(--mist);overflow:clip}
.project-quote-text{margin:0;padding:0}
.project-quote-text p{color:var(--ink)}
.project-client{display:flex;align-items:center;gap:16px}
.project-client-avatar{display:flex;align-items:center;justify-content:center;flex:none;width:60px;height:60px;border-radius:var(--radius);background:#cfcac2;color:var(--ink);font-size:var(--body-md);font-weight:500}
.project-client-info{display:flex;flex-direction:column;gap:6px}
.project-client-name{font-size:var(--body-xl)}
.project-client-role{font-size:var(--body-sm);line-height:1.2em}
@media (max-width:991px){.project-hero{height:auto;padding-top:12.375rem}.project-meta-info{font-size:var(--body-xl)}.project-detail{gap:30px}.project-quote-item{padding:2rem}}
@media (max-width:767px){.project-hero{padding-top:7.5rem}.project-hero-text{max-width:100%}.project-meta-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.project-meta-card{gap:16px;padding:1rem}.project-quote-item{gap:20px;padding:1.25rem}}
@media (max-width:479px){.project-meta-title{font-size:var(--body)}}

/* lopende tekst */
.rich-text{color:var(--ink-75)}
.rich-text h2{font-size:var(--h5);margin-bottom:.625rem}
.rich-text h3{font-size:var(--h6);margin:2.5rem 0 .625rem}
.rich-text p{margin-bottom:.75rem}
.rich-text ul{margin-bottom:.75rem;padding-left:1.625rem;list-style:disc}
.rich-text li{margin-bottom:.125rem}
.rich-text a{color:var(--ink)}
.rich-note{font-size:var(--body-sm);color:var(--ink-50)}
.legal-rich h2,.legal-rich h3{font-size:var(--h5);letter-spacing:-.03em;margin:2.5rem 0 .625rem}
.legal-rich .rich-note+h2{margin-top:1.5rem}
.legal-rich p{margin-bottom:.625rem}
.article-image{padding-top:6px}
.article-image img,.article-image .plane{width:100%;aspect-ratio:1428/632;height:auto;object-fit:cover;border-radius:var(--radius)}
.article-body{padding-top:5rem}
.legal-link{color:var(--ink);text-underline-offset:2px}
.legal-link:hover{text-decoration:none}
@media (max-width:991px){.rich-text p{margin-bottom:1.25rem}}
@media (max-width:767px){.rich-text p{margin-bottom:20px}.article-body{padding-top:3.125rem}}

/* contact */
.contact-section{padding-top:6px}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.contact-left{display:flex;flex-direction:column;gap:30px;padding:3.125rem;border-radius:var(--radius);background:var(--mist);overflow:clip}
.contact-form{display:flex;flex-direction:column;gap:20px}
.contact-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px}
.field{display:flex;flex-direction:column;gap:10px}
.field.is-wide{grid-column:span 2}
.field-title{font-size:var(--body-sm);line-height:1.2em}
.form-input,.form-select{width:100%;height:50px;padding:.625rem 1.125rem;border:1px solid var(--ink-20);border-radius:var(--radius);background:var(--white);color:var(--ink);font-size:var(--body-md);line-height:1.2em;transition:border-color .3s ease-in-out}
.form-input::placeholder{color:var(--ink-50)}
.form-input:focus,.form-select:focus{border-color:var(--ink);outline:none}
.form-input:focus-visible,.form-select:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.form-textarea{height:100px;padding:1.125rem;resize:vertical}
[aria-invalid="true"]{border-color:#8f0e0e!important}
.contact-cta{display:flex;flex-direction:column;gap:10px}
.contact-text{font-size:var(--body-sm);line-height:1.2em}
.contact-link{color:var(--ink)}
.contact-link:hover{text-decoration:none}
.contact-right{position:relative;width:100%;height:100%;border-radius:var(--radius);overflow:clip}
.contact-cards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.contact-card{display:flex;flex-direction:column;justify-content:space-between;padding:1.25rem;border-radius:var(--radius);background:var(--mist);overflow:clip}
.contact-list{display:flex;flex-direction:column;gap:10px;padding-top:1.875rem}
.contact-list .contact-link,.contact-line{color:var(--ink)}
.form-success{padding:15px;border-radius:var(--radius);background:#106b3e;color:var(--white);text-align:center}
.form-fail{margin-top:10px;padding:15px;border-radius:var(--radius);background:#8f0e0e;color:var(--white);text-align:center}
@media (max-width:991px){.contact-left{padding:1.875rem}.contact-fields{gap:16px}}
@media (max-width:767px){.contact-grid{grid-template-columns:minmax(0,1fr)}.contact-right{height:300px}.contact-card{padding:.75rem}.contact-list .contact-link,.contact-line{font-size:var(--body-md)}.form-input,.form-select{font-size:16px}}
@media (max-width:479px){.contact-left{padding:1rem}.contact-fields,.contact-cards{grid-template-columns:minmax(0,1fr)}.field.is-wide{grid-column:auto}}

/* 404 */
.error-section{position:relative;height:100vh;margin-bottom:6px;padding-top:13.75rem;border-radius:var(--radius);background:var(--ink);overflow:clip}
.error-frame{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;height:100%}
.error-content{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.error-title{font-family:var(--display-font);font-weight:500;font-size:var(--h2-lg);line-height:.8em;color:var(--white)}
.error-info{display:flex;flex-direction:column;align-items:center;gap:6px}
.error-subtitle{color:var(--white);font-size:var(--h5)}
.error-text{color:var(--white-70)}
.error-media{position:absolute;inset:0}
.error-media img{width:100%;height:100%;object-fit:cover}
.error-shade{position:absolute;inset:0;background:var(--ink);opacity:.6;pointer-events:none}
@media (max-width:991px){.error-section{height:auto;padding-top:12.375rem}}
@media (max-width:767px){.error-section{padding-top:8.25rem}}

/* afsluiter en footer */
.footer{position:relative;padding:6px 6px 1.875rem;border-radius:var(--radius);background:var(--ink);overflow:hidden;color:var(--white-70)}
.cta{position:relative;padding:13.75rem 0;border-radius:var(--radius);background:var(--ink);overflow:clip}
.cta-caption{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px}
.cta-info{display:flex;flex-direction:column;align-items:center;gap:16px}
.cta-title{width:74%;color:var(--white);text-align:center}
.cta-media{position:absolute;inset:0;z-index:1}
.cta-shade{position:absolute;inset:0;background:var(--ink);opacity:.5;pointer-events:none}
.footer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:100px;padding-top:6.25rem}
.footer-brand{display:flex;flex-direction:column;gap:30px;width:100%}
.footer-brand-link{align-self:flex-start;color:var(--white)}
.footer-brand-link svg{width:50px;height:50px;fill:currentColor}
.footer-brand-list{display:flex;flex-direction:column;gap:10px}
.footer-brand-list p{color:var(--white-70)}
.footer-contact{color:var(--white-50);text-decoration:none;transition:color .3s ease-in-out}
.footer-contact:hover{color:var(--white)}
.footer-info{grid-column:span 2;display:grid;grid-template-columns:.8fr 1fr;gap:30px;width:100%}
.footer-subscribe{display:flex;flex-direction:column;gap:30px}
.footer-subscribe-title{color:var(--white);font-size:var(--h6)}
.footer .form-wrap{max-width:450px}
.subscribe-form{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.subscribe-input{width:100%;height:50px;padding:.625rem 1.25rem;border:1px solid var(--white-10);border-radius:var(--radius);background:var(--white-10);color:var(--white);font-size:var(--body);line-height:1.2em;transition:border-color .3s ease-in-out}
.subscribe-input::placeholder{color:var(--white-30)}
.subscribe-input:focus{border-color:var(--white);outline:none}
.subscribe-input:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.footer-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:550px;justify-self:end;width:100%}
.footer-title{margin-bottom:1.875rem;color:var(--white);font-size:var(--h6)}
.footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.footer-link{color:var(--white-50);text-decoration:none;transition:color .3s ease-in-out}
.footer-link:hover,.footer-link.is-current{color:var(--white)}
.footer-copy{align-self:end;color:var(--white);font-size:var(--body-sm);line-height:1.2em}
.footer-copy a{color:var(--white)}
.footer-copy a:hover{color:var(--white-50);text-decoration:none}
.footer-wordmark-wrap{grid-column:span 2;align-self:end;container-type:inline-size}
.footer-wordmark{font-family:var(--display-font);font-weight:500;font-size:12.7cqw;line-height:1.5em;color:var(--white);white-space:nowrap}
@media (max-width:991px){.cta{padding:9.375rem 0}.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:50px;padding-top:5rem}.footer-info{grid-template-columns:.7fr 1fr}.footer-subscribe{order:-1}.footer-menu{justify-self:auto}.footer-title{margin-bottom:1.25rem}.footer-copy{order:9999;grid-column:span 2}}
@media (max-width:767px){.cta{padding:6.25rem 0}.cta-title{width:100%}.footer-grid{padding-top:3.125rem}.footer-brand{grid-column:span 2}.footer-info{grid-template-columns:minmax(0,1fr);gap:50px}.footer-subscribe{gap:20px}.footer .form-wrap{max-width:100%}.footer-menu{max-width:100%}.footer-title{margin-bottom:1rem}}
@media (max-width:479px){.footer-grid{grid-template-columns:minmax(0,1fr);gap:50px 20px}.footer-brand,.footer-info,.footer-copy,.footer-wordmark-wrap{grid-column:span 1}.footer-brand{gap:20px}.footer-brand-list{gap:6px}.footer-menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}.footer-social{grid-column:span 2}.footer-title{margin-bottom:10px}.footer-links{gap:10px}}

/* lightbox */
.lightbox{width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:0;border:0;background:rgb(0 0 0 / .9);color:var(--white)}
.lightbox[open]{display:flex;align-items:center;justify-content:center;animation:fade .3s ease}
.lightbox::backdrop{background:transparent}
.lightbox-figure{display:flex;flex-direction:column;align-items:center;gap:12px}
.lightbox-image{max-width:min(90vw,1400px);max-height:82vh;width:auto;height:auto;object-fit:contain}
.lightbox-count{font-size:var(--body-sm);color:var(--white-70)}
.lightbox-button{position:absolute;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:var(--radius);background:var(--white-10);color:var(--white);padding:0;transition:background-color .3s ease-in-out}
.lightbox-button:hover{background:var(--white-30)}
.lightbox-button svg{width:28px;height:28px}
.lightbox-close{top:16px;right:16px}
.lightbox-prev{left:16px;top:50%;transform:translateY(-50%)}
.lightbox-next{right:16px;top:50%;transform:translateY(-50%)}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* beginstand voor animaties (alleen als script en beweging actief zijn) */
.js-anim [data-intro],.js-anim [data-reveal]{opacity:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .media-motion img,.marquee-item{animation:none!important;transform:none!important}
  .pause-button{display:none}
  .marquee{flex-wrap:wrap;justify-content:center;-webkit-mask-image:none;mask-image:none}
  .marquee-item[aria-hidden="true"]{display:none}
  .marquee-item{flex-wrap:wrap;justify-content:center;padding-right:0}
}

/* Private reference restoration, 23 October 2026. Existing layout rules retained. */
.hero-wordmark,.footer-wordmark{width:100%;height:auto;font:inherit;line-height:normal}
.brand img{width:24px;height:30px}.about-mark img{width:24px;height:30px}
.footer-brand-link img{width:40px;height:50px}
.media-motion video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center}
.media-motion img{animation:none}
.client-logo{width:auto;height:20px}
.project-client-avatar{object-fit:cover}
@media(max-width:479px){.brand img{width:19.2px;height:24px}}

/* Measured source grid uses auto minimum tracks; long headings affect tablet columns. */
.commitment-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:767px){.commitment-grid{grid-template-columns:repeat(2,1fr)}}

.footer-title{letter-spacing:-.03em}
.head-stack .h2{align-self:flex-start}

/* Supplementary reference utilities, built with the inherited shell. */
.u-hero-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:1200px;margin:auto;text-align:center;padding:0 30px}
.u-hero-wrap>p{width:72%;color:var(--white-70)}
.u-section{padding:100px 0}.u-box-list{display:flex;flex-direction:column;gap:60px}
.u-box{border:1px solid var(--ink-20);border-radius:var(--radius);padding:10px 10px 20px}
.u-box-head{background:var(--ink-10);border-radius:var(--radius);margin-bottom:30px;padding:1.25em 20px 20px}
.u-title{font-family:var(--heading-font);color:var(--ink);font-weight:500;font-size:var(--h4);line-height:1.1em;letter-spacing:0;margin:0 0 4px}
.u-box-head p,.u-box-content p{margin-bottom:10px}.u-box-content{display:flex;flex-wrap:wrap;gap:30px;padding:0 10px}
.u-box-content>.u-group,.u-box-content>.u-rich{width:100%}.u-box-content:has(.u-item)>.u-group{width:auto}
.u-item{text-align:center}.u-color{width:150px;height:60px;border:1px solid #cfcfcf;border-radius:var(--radius)}.u-item p{margin-top:10px}
.u-sample{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--ink-20)}.u-last{padding-bottom:0;margin-bottom:0;border:0}
.u-box-content h1,.u-heading-h1{font:500 var(--h1)/1.1em var(--heading-font);letter-spacing:-.04em;color:var(--ink)}
.u-box-content h2,.u-heading-h2{font:500 var(--h2)/1.1em var(--heading-font);letter-spacing:-.03em;color:var(--ink)}
.u-box-content h3,.u-heading-h3{font:500 var(--h3)/1.1em var(--heading-font);color:var(--ink)}
.u-box-content h4,.u-heading-h4{font:500 var(--h4)/1.1em var(--heading-font);color:var(--ink)}
.u-box-content h5,.u-heading-h5{font:500 var(--h5)/1.1em var(--heading-font);color:var(--ink)}
.u-box-content h6,.u-heading-h6{font:500 var(--h6)/1.1em var(--heading-font);color:var(--ink)}
.u-lead{font-size:var(--body-xl)}.u-small{font-size:var(--body-sm)}.u-delete{text-decoration:line-through}.u-underline{text-decoration:underline}.u-center{text-align:center}.u-right{text-align:right}
.u-rich figure{margin:20px 0}.u-rich figure img{width:100%;height:auto}.u-rich figcaption{text-align:center;font-size:14px}.u-rich pre{overflow:auto;padding:20px;background:#f5f5f5;white-space:pre-wrap;word-break:break-word}.u-rich blockquote{margin:20px 0;border-left:5px solid #e2e2e2;padding:10px 20px;font-size:20px;line-height:1.5em}
.u-password-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:0 15px}.u-password{width:600px;max-width:100%;text-align:center}.u-password h1{font:500 var(--h2)/1.1em var(--display-font);letter-spacing:-.03em;color:var(--ink);margin-bottom:10px}.u-password p{margin-bottom:10px}.u-password form{display:flex;flex-direction:column}.u-password label{margin-bottom:5px}.u-password input{margin-bottom:10px;border-color:var(--ink);padding:10px 20px}.u-password button{width:100%}
@media(max-width:991px){.u-section{padding-top:70px}.u-box-list{gap:50px}.u-hero-wrap{padding:0 20px}.u-hero-wrap>p{width:80%}.u-password{padding:40px}}
@media(max-width:767px){.u-section{padding-top:40px}.u-hero-wrap{padding:0 15px}.u-hero-wrap>p{width:100%}.u-password{padding:20px}}
@media(max-width:479px){.u-section{padding-top:30px}}

/* Paragraph line heights resolve against each paragraph font size in the reference. */
p,.stat-label{line-height:1.4em}

.legal-rich>:first-child{margin-top:0}
.contact-section+section .head-center{gap:20px}

/* Source lightbox geometry, measured at 390 and 1440; original dialog and keyboard hooks retained. */
.lightbox[open]{display:block}.lightbox-figure{position:absolute;top:2vh;left:0;width:100%;height:84vh;display:flex;align-items:center;justify-content:center;gap:0}
.lightbox-image{max-width:82.3vw;max-height:84vh;width:auto;height:auto}.lightbox-count{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
.lightbox-button{width:68px;border-radius:0;background:transparent;opacity:.5}.lightbox-button:hover{background:transparent;opacity:1}.lightbox-button:disabled{opacity:0;pointer-events:none}
.lightbox-close{top:2vh;right:0;height:44.2px;opacity:.8}.lightbox-close svg{width:24px;height:24px}
.lightbox-prev,.lightbox-next{top:2vh;transform:none;height:84vh}.lightbox-prev{left:0}.lightbox-next{right:0}.lightbox-prev svg,.lightbox-next svg{width:60px;height:60px}
.lightbox-strip{position:absolute;left:0;right:0;bottom:0;height:14vh;padding:0 1vh;display:flex;justify-content:center;align-items:center;overflow:auto}
.lightbox-thumb{flex:none;display:block;width:12vh;height:14vh;padding:2vh 1vh;background:none;border:0;opacity:1}.lightbox-thumb.is-active{opacity:.3}.lightbox-thumb img{width:10vh;height:10vh;object-fit:cover;background:#222}
.anim-on .project-media img,.anim-on .project-info,.anim-on .post-media img{transition:none}
@media(max-width:767px){.lightbox-figure{top:0;height:86vh}.lightbox-image{max-width:100vw;max-height:86vh}.lightbox-close{top:0;opacity:1}.lightbox-prev,.lightbox-next{display:none}}

.project-rich p{margin-bottom:10px}

/* Gallery intrinsic sizing includes the inline formatting of the source collection cells. */
.gallery-item{display:inline-block;width:100%;height:100%;aspect-ratio:auto;vertical-align:baseline}
.gallery-item img{display:inline-block;width:100%;height:100%;vertical-align:middle}
.post-left>[aria-hidden]{margin-top:-6px}

/* Legal copy has its own paragraph/list breakpoints in the source. */
.legal-rich p{margin-bottom:10px}.legal-rich ul,.article-rich ul{display:flow-root}.article-rich ul{margin-bottom:0}
@media(max-width:767px){.legal-rich p,.legal-rich ul{margin-bottom:20px}}
/* Card media uses the source image's intrinsic size in the article collection. */
.blog-grid .post-card .post-media{height:100%;aspect-ratio:auto;min-height:0}
.blog-grid .post-media img{position:relative;display:inline-block;vertical-align:middle}

/* Inert local reproduction of the visible vendor preview controls; no purchase/navigation. */
.reference-vendor-badge{position:fixed;right:10px;bottom:10px;z-index:1000;display:flex;align-items:center;gap:6px;border:1px solid rgb(0 0 0 / .1);border-radius:16px;padding:1px 10px 1px 2px;background:#fff;color:#000;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:12px;font-weight:700;line-height:inherit}
.reference-vendor-badge img{width:22px;height:22px}
.reference-vendor-card{position:fixed;right:15px;bottom:42px;z-index:1000;width:132px;color:#000;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif}
.reference-vendor-card[hidden]{display:none}
.reference-vendor-inner{border:1px solid rgb(0 0 0 / .03);border-radius:10px;background:#fff;padding:6px;box-shadow:0 0 15px rgb(0 0 0 / .2)}
.reference-vendor-image{width:100%;height:auto;border-radius:7px}
.reference-vendor-title{padding:8px 0;text-align:center;font-size:13px;font-weight:700;line-height:13px}
.reference-vendor-access{display:flex;justify-content:center;align-items:center;gap:4px;width:100%;padding:8px 0;border:0;border-radius:7px;background:#000;color:#fff;font-family:inherit;font-size:12px;font-weight:700;line-height:12px}
.reference-vendor-access img{width:13px;height:13px}
.reference-vendor-close{position:absolute;right:-10px;top:-10px;display:flex;justify-content:center;align-items:center;width:26px;height:26px;padding:0;border:1px solid rgb(0 0 0 / .1);border-radius:20px;background:#fff;box-shadow:0 2px 5px rgb(0 0 0 / .1)}
.reference-vendor-close img{width:16px;height:16px}

/* Utility heading modifiers override the semantic heading tag, as in the reference. */
.u-box-content h1,.u-box-content h2,.u-box-content h3,.u-box-content h4,.u-box-content h5,.u-box-content h6{margin-bottom:10px}
.u-box-content .u-heading-h1{font-size:var(--h1);letter-spacing:-.04em}.u-box-content .u-heading-h2{font-size:var(--h2);letter-spacing:-.03em}
.u-box-content .u-heading-h3{font-size:var(--h3);letter-spacing:0}.u-box-content .u-heading-h4{font-size:var(--h4);letter-spacing:0}.u-box-content .u-heading-h5{font-size:var(--h5);letter-spacing:0}.u-box-content .u-heading-h6{font-size:var(--h6);letter-spacing:0}
.u-box-content .u-sample{margin-bottom:20px}.u-box-content .u-last{margin-bottom:0;padding-bottom:0;border:0}

/* Preserve the existing card, adding the reference's separate metadata wrapper/grid. */
.post-meta{display:flex;flex-direction:column;width:100%;height:100%}
.post-meta-grid{display:grid;grid-template-columns:1fr auto;gap:20px;width:100%;height:100%}
@media(max-width:991px){.post-meta-grid{grid-template-columns:1fr;justify-items:start;gap:10px;height:auto}}
@media(max-width:767px){.post-meta-grid{gap:8px}}

.anim-on .team-social,.anim-on .team-overlay{transition:none}

.u-demo-wrap{display:flex;flex-direction:column;width:100%}.u-demo-wrap>.u-sample{width:100%}.u-demo-heading{display:flex;gap:15px;align-items:center;margin-bottom:10px}.u-class-badge{background:#0073e6;color:#fff;border-radius:3px;padding:0 6px;font-size:12px}.u-style-title{font:500 var(--h6)/1.1em var(--heading-font);color:var(--ink)}
.u-container-demo{width:100%;margin:0 auto;border-radius:var(--radius);background:var(--ink-5);padding:15px 20px;text-align:center}
.u-spacing-demo{width:100%;border-radius:var(--radius);background:var(--ink-5);text-align:center}.u-spacing-both{padding:var(--space) 0}.u-spacing-top{padding-top:var(--space)}.u-spacing-bottom{padding-bottom:var(--space)}
.u-margin-demo{width:100%;display:flex;background:var(--ink-5);border-radius:var(--radius)}.u-guide-wrap{display:flex;gap:30px;align-items:center}.u-guide-divider{width:1px;background:#e5e5e5;align-self:stretch}
.u-input-group{margin-bottom:20px}.u-input-group label{display:block;margin-bottom:5px}
.u-box-content .u-rich p,.u-box-content .u-rich figure,.u-box-content .u-rich blockquote{margin-bottom:40px}.u-box-content .u-rich h2{font-size:var(--h2)}
.u-box-content blockquote{border:0;border-radius:var(--radius);background:var(--ink-5);text-align:center;padding:50px;font-size:20px;line-height:1.4em;margin-bottom:10px}
@media(max-width:991px){.u-item{margin-bottom:30px}.u-box-content blockquote{padding:40px}}
@media(max-width:767px){.u-input-group{font-size:16px}.u-box-content .u-rich p,.u-box-content .u-rich figure,.u-box-content .u-rich blockquote{margin-bottom:20px}.u-box-content blockquote{padding:30px;font-size:16px}}
@media(max-width:479px){.u-box-content blockquote{padding:20px}}

.u-hero-wrap{max-width:1460px;width:100%;padding:0 var(--gutter)}.u-hero-wrap>p{width:60%}
@media(max-width:991px){.u-hero-wrap>p{width:80%}}
@media(max-width:767px){.u-hero-wrap>p{width:100%}.team-overlay{opacity:1}}

/* Embedded control icons measured from the original lightbox. */
.lightbox-prev{background-image:url("assets/eigen/pijl.svg");background-size:24px;background-position:center;background-repeat:no-repeat}
.lightbox-prev svg{display:none}
.lightbox-next{background-image:url("assets/eigen/pijl.svg");background-size:24px;background-position:center;background-repeat:no-repeat}
.lightbox-next svg{display:none}
.lightbox-close{background-image:url("assets/eigen/pijl.svg");background-size:18px;background-position:center;background-repeat:no-repeat}
.lightbox-close svg{display:none}

@media(min-width:480px){.reference-vendor-badge{right:30px;bottom:30px}.reference-vendor-card{right:30px;bottom:70px}}

.post-feature .post-media{min-height:0}
.post-feature-bottom{display:flex}

/* The first journal image retains its original 2:1 intrinsic framing. */
.journal-grid>.post-card .post-media{min-height:0;height:auto;aspect-ratio:2/1;flex:none}
@media(max-width:767px){.journal .head-split{gap:20px}}

.marquee{gap:30px}.marquee-item{padding-right:0}.marquee:hover .marquee-item{animation-play-state:paused}.anim-on .marquee-item{animation:none}

/* Missing introductory content and helper-list roles in the vendor instructions. */
.u-intro-quote blockquote{margin:0;padding:50px;background:var(--ink-5);border:0;border-radius:var(--radius);font-size:20px;line-height:1.4em;text-align:center}
.u-box-list{gap:60px}.u-lists-box .u-box-content{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.u-lists-box .u-box-content ol{list-style:decimal;padding-left:40px;margin:0 0 10px}.u-lists-box .u-box-content ul{list-style:disc;padding-left:40px;margin:0 0 10px}.u-lists-box .u-box-content>ul:last-child{list-style:none;padding-left:0}
@media(max-width:991px){.u-intro-quote blockquote{padding:40px}}
@media(max-width:767px){.u-box-list{gap:50px}.u-intro-quote blockquote{padding:30px;font-size:16px}.u-lists-box .u-box-content{grid-template-columns:1fr}}
@media(max-width:479px){.u-intro-quote blockquote{padding:20px}}

.u-lists-box .u-box-content{display:flex;flex-direction:column;gap:20px}
.u-form label:has(input[type=radio]),.u-form label:has(input[type=checkbox]){display:flex;align-items:center;gap:6px}
.u-form input[type=radio],.u-form input[type=checkbox]{appearance:none;flex:none;min-width:20px;width:20px;min-height:20px;height:20px;border:1px solid var(--ink-20);background:#fff;margin:0;transition:border .3s ease-in-out}
.u-form input[type=radio]{border-radius:50%}.u-form input[type=radio]:checked{border:5px solid var(--ink)}.u-form input[type=checkbox]:checked{background:var(--ink)}

.u-form input[type=checkbox]{border-radius:2px}.u-form input[type=checkbox]:checked{border-color:var(--ink);border-radius:3px;background-image:url("assets/eigen/pijl.svg");background-position:center;background-repeat:no-repeat;background-size:auto}

.u-item p{margin-bottom:0}
.u-box-content .u-heading-h1,.u-box-content .u-heading-h2,.u-box-content .u-heading-h3,.u-box-content .u-heading-h4,.u-box-content .u-heading-h5,.u-box-content .u-heading-h6{margin-bottom:10px}

/* Vendor rich text has different margins from project/article copy. */
.u-box-content .u-rich h3{margin-top:0}.u-box-content .u-code-instructions p{margin-bottom:10px}
.u-box-content .u-rich figure{margin-top:0}.u-box-content .u-rich ul,.u-box-content .u-rich ol{margin-bottom:40px;display:flow-root}.u-box-content .u-rich li{margin-bottom:10px}
.u-box-content .u-rich .u-figure{width:auto}.u-figure.is-center{margin-left:auto;margin-right:auto}
.u-box-content .u-code-instructions pre{width:800px;max-width:100%;margin:0 0 30px;padding:7px;font-size:14px;line-height:inherit;white-space:pre;overflow:auto;word-break:normal}
@media(max-width:767px){.u-box-content .u-rich ul,.u-box-content .u-rich ol{margin-bottom:20px}}

.u-box-content.u-content-form{display:block;gap:0}

.u-form-wrap{margin-bottom:15px}.u-form label:has(input[type=radio]){margin-bottom:5px}

.u-box-content .u-code-instructions pre,.u-box-content .u-code-instructions pre code{background:#2b2b2b;color:#f8f8f2;font-family:monospace;font-size:14px;tab-size:8;word-break:normal;overflow-wrap:normal}
.u-box-content .u-code-instructions pre code{display:block;padding:7px;margin:0 0 30px;line-height:inherit;white-space:pre-wrap;overflow:auto}

.u-container-gutter{padding-left:var(--gutter);padding-right:var(--gutter)}.u-container-demo.is-left{max-width:760px!important;margin-left:0;margin-right:auto}

.u-box-content .u-rich .u-figure{display:table;max-width:60%}.u-figure>div{display:inline-block;max-width:100%}.u-figure img{display:inline-block!important;vertical-align:middle}.u-rich figcaption{font-size:inherit;line-height:inherit}

/* Native utility list/caption spacing, measured independently from article copy. */
.u-lists-box .u-box-content>ol,.u-lists-box .u-box-content>ul{padding-left:20px}.u-lists-box .u-box-content>ul:last-child{padding-left:0}.u-lists-box li{margin-bottom:10px}
.u-rich figcaption{margin-top:5px}.u-box-content .u-rich blockquote{margin-top:0}
@media(max-width:479px){.u-box-content .u-code-instructions pre{width:250px}}

.u-box-list:has(.u-lists-box){margin-bottom:60px}.u-form .form-input{padding:10px 20px;line-height:1.4em}.u-form .form-textarea{display:block;height:132px;margin-bottom:10px;vertical-align:middle}.u-form .form-select{padding:8px 20px}
@media(max-width:767px){.u-box-list:has(.u-lists-box){margin-bottom:50px}}

@media(max-width:767px){.u-box-content .u-code-instructions pre{width:400px;max-width:400px}}@media(max-width:479px){.u-box-content .u-code-instructions pre{width:250px;max-width:250px}}

.project-rich h2{letter-spacing:-.03em}

.article-rich h2{letter-spacing:-.03em}
/* Offline counterparts of the reference's editorial YouTube frames: no third-party requests. */
.article-embed{display:block;position:relative;height:0;max-width:100%;margin:0}.article-embed>div{display:block;width:100%}.article-embed.is-center{width:60%;max-width:60%;margin-left:auto;margin-right:auto}
@media(max-width:991px){.article-embed{margin-bottom:20px}}

.article-embed{clear:both;overflow:hidden}

.lightbox-outgoing{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}

/* Use the reference images' intrinsic proportions, including narrow mobile screens. */
.team-avatar{aspect-ratio:auto}
.u-password-wrap{height:100vh;min-height:0}.u-password{padding:0;margin-bottom:15px}
@media(max-width:767px){.about-hero-right{height:auto}.about-hero-right img{height:auto}.team .head-split{gap:10px}.u-password-wrap{height:auto;padding:15px 15px 0}.u-password{padding:20px}}

.service-grid{grid-template-columns:1fr 1fr}.service-right img{height:100%;aspect-ratio:auto}
.step-grid{grid-template-columns:repeat(4,1fr)}.step-image-wrap{align-self:center}.step-image-wrap .step-drawing{display:inline-block;vertical-align:middle;align-self:auto}
.slide{align-self:start}.slide-image{min-height:auto;aspect-ratio:auto}
@media(max-width:767px){.service-grid{grid-template-columns:1fr}.step-grid{grid-template-columns:1fr 1fr}}
@media(max-width:479px){.step-grid{grid-template-columns:1fr}}

/* Eigen merk en illustratief bewegend beeld, 24oktober2026. */
.concept-credit{padding:16px 4vw;font:12px/1.5 Inter,sans-serif;max-width:100%;color:inherit}.brand img,.footer-brand img{object-fit:contain}.eigen-beweging{animation:eigen-beeld 18s ease-in-out infinite alternate}@keyframes eigen-beeld{to{transform:scale(1.05)}}.is-paused .eigen-beweging{animation-play-state:paused}@media(prefers-reduced-motion:reduce){.eigen-beweging{animation:none}}

.brand .brand-mark{width:150px;height:auto;max-width:100%}.hero-wordmark,.footer-wordmark{font-size:16cqw;line-height:1.05;font-family:Melodrama,serif}.brand{width:160px}.nav-end .button{white-space:nowrap}@media(max-width:479px){.brand{width:120px}.brand .brand-mark{width:112px}.nav-end .button{font-size:12px;padding:10px}.menu-button-text{font-size:13px}}

@media(max-width:479px){.nav-bar,.menu-bar{grid-template-columns:auto minmax(0,1fr) auto;gap:6px;padding:6px}.brand{width:100%;max-width:112px}.brand .brand-mark{width:100%}.nav-end{gap:0}.menu-button{padding:8px}.nav-end .button{padding:9px 8px;font-size:11px}.footer-brand-link img{width:170px;height:auto}}

.reference-vendor-badge,.u-code,code{font-family:"Inter Display",sans-serif}

/* Lay-outronde 29-10-2026 */
/* Doel: niets overlapt of zweeft over de inhoud, geen scroll-gestuurde secties, kortere pagina,
   vaste sectieruimte (96/64/48), twee lettertypefamilies, leesbare tekstmaten, logo 30/28/24/22 px.
   Breekpunten van het template: desktop >= 992, iPad 768-991, mobiel <= 767 (klein <= 479). */

/* Regel 4: sectieruimte. --space (sectie-pad) en --top (over-ons) volgen dezelfde maat. */
:root{--space:96px;--top:96px}
@media(max-width:991px){:root{--space:64px;--top:64px}}
@media(max-width:767px){:root{--space:48px;--top:48px}}

/* Regel 1: de conceptkaart en de knop "Fictief concept" zweven niet meer over de inhoud.
   Herstel 1: beide staan samen als rustige regel in de merkkolom van de footer (op alle pagina's). */
.footer-concept{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:8px}
.footer .reference-vendor-card{position:static!important;width:auto!important;margin:0;padding:0;color:var(--white);font-family:var(--body-font)}
.footer .reference-vendor-inner{display:flex;align-items:center;gap:10px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;opacity:1!important;transform:none!important}
.footer .reference-vendor-image{flex:none;width:32px;height:32px;object-fit:cover;border-radius:var(--radius)}
.footer .reference-vendor-title{padding:0;color:var(--white-70);font-size:14px;font-weight:400;line-height:1.3;text-align:left}
.footer .reference-vendor-access{display:inline;width:auto;padding:0;border-radius:0;background:none;color:var(--white);font-family:var(--body-font);font-size:14px;font-weight:400;line-height:1.3;text-decoration:underline;text-underline-offset:3px}
.footer .reference-vendor-access:hover{color:var(--white-70)}
.reference-vendor-close{display:none!important}
.reference-vendor-badge{position:static!important;align-self:center;margin:0;padding:4px 10px;border:1px solid var(--white-30);border-radius:16px;background:var(--white);color:var(--ink);font-family:var(--body-font)!important;font-size:12px;font-weight:600;line-height:1.3}

/* Regel 6: twee families (Switzer en Inter Display). Geen Arial of monospace meer voor zichtbare tekst. */
.reference-vendor-card,.reference-vendor-access{font-family:var(--body-font)!important}
.u-box-content .u-code-instructions pre,.u-box-content .u-code-instructions pre code{font-family:var(--heading-font)!important}

/* Regel 7: logo blijft vector; hoogte 30 (desktop), 28 (iPad), 24 / 22 px (mobiel).
   Herstel 1: kop, menu, manifest en footer gebruiken logo-kop(-wit).svg (zelfde tekening, zonder de onleesbare
   subregel en met strakke viewBox), zodat de letters groter worden binnen dezelfde hoogte. */
.brand{width:auto!important;max-width:none!important}
.brand .brand-mark,.brand img{width:auto!important;height:30px!important;max-width:none!important}
.about-mark img{width:auto!important;height:30px!important}
.footer-brand-link img{width:auto!important;height:32px!important}
@media(max-width:991px){.brand .brand-mark,.brand img{height:28px!important}}
@media(max-width:767px){.brand .brand-mark,.brand img{height:24px!important}.about-mark img{height:24px!important}.footer-brand-link img{height:28px!important}}
@media(max-width:479px){.brand .brand-mark,.brand img{height:22px!important}}

/* Regel 5: lopende tekst >= 16 px (desktop/iPad) en >= 15 px (mobiel), regelhoogte 1,5; labels >= 12 px. */
:where(main,footer,.menu) p{line-height:1.5}
.footer-copy{font-size:16px;line-height:1.5}
.post-feature-text,.contact-text{font-size:16px;line-height:1.5}
@media(max-width:767px){.footer-copy,.post-feature-text,.contact-text{font-size:15px}}
@media(max-width:479px){.commitment-text{font-size:15px!important}.nav-end .button{font-size:12px!important}}

/* Herstel 1, regel 2: geen scroll-gekoppelde of eindeloze beweging meer.
   Woordenband statisch (één rij, gecentreerd), fotolijsten vast gekanteld (CSS), geen langzame zoom op beelden;
   de pauzeknoppen horen bij die zoom en vervallen daarmee. */
.marquee{flex-wrap:wrap;justify-content:center;max-width:none;gap:12px 30px;-webkit-mask-image:none!important;mask-image:none!important}
.marquee-item[aria-hidden="true"]{display:none!important}
.marquee-item{flex:0 1 auto!important;max-width:100%;flex-wrap:wrap;justify-content:center;gap:12px 30px;padding-right:0;animation:none!important;transform:none!important}
/* "Vraag" heeft een hogere viewBox (onderstok g); zelfde letterhoogte als de andere woorden, bovenkant gelijk. */
.marquee-item{align-items:flex-start!important}
.client-logo[alt="Vraag"]{height:calc(20px * 63.9 / 52.6)!important}
.eigen-beweging,.media-motion img{animation:none!important;transform:none!important}
.media-motion .pause-button{display:none!important}

/* Regel 2: beweging. Inhoud met data-reveal is altijd zichtbaar (geen opacity 0 als beginstand);
   site.js geeft alleen nog een korte verschuiving (transform, 0,5 s). Werkwijze-kaarten schuiven niet meer. */
.js-anim [data-reveal]{opacity:1}
.step-grid{transform:none!important;will-change:auto!important}
/* Projecttitels zijn altijd zichtbaar (ook op iPad zonder hover); alleen het beeld zoomt bij hover. */
@media(min-width:768px){.project-info{opacity:1!important;transform:none!important}}

/* Hero: minder hoog; de foto blijft dezelfde. Regel 9: donkere laag onder de onderregel. */
.hero{height:min(100vh,640px)}
/* Woordmerk (hero-element, geen logo) iets smaller, zodat de onderregel binnen de hero blijft. */
.hero-top{height:auto!important;flex:1 1 auto;min-height:0}
.hero-wordmark{width:min(100%,1100px)!important}
@media(max-width:991px){.hero{height:620px}}
@media(max-width:767px){.hero{height:min(70vh,560px)}}
.hero-shade{opacity:1!important;background:linear-gradient(to bottom,rgb(18 18 18 / .25),rgb(18 18 18 / .3) 60%,rgb(18 18 18 / .55))!important}

/* Manifest: vaste afstanden binnen de sectie. */
.about-stack{gap:32px}
.about-top{gap:24px}
@media(max-width:767px){.about-stack{gap:24px}.about-top{gap:16px}}

/* Werkwijze-intro (founder): sectieruimte boven, geen 200 px gat in de rechterkolom. */
.founder{padding-top:var(--space)!important}
.founder-grid{padding:48px}
.founder-right{gap:48px}
.founder-frames{padding:24px 0 48px 11px}
@media(max-width:991px){.founder-grid{padding:32px}.founder-right{gap:32px}}
@media(max-width:767px){.founder-grid{padding:20px}.founder-right{gap:24px}.founder-frames{padding:24px 0 40px 8px}}

/* Projecten: lagere kaarten (2640 -> ca. 1600 px op desktop). */
.project-card{aspect-ratio:16/9!important}
.project-card.is-wide{aspect-ratio:7/2!important}
@media(max-width:479px){.project-card,.project-card.is-wide{aspect-ratio:4/3!important}}

/* Diensten: beeld in het open paneel 16:9 in plaats van de staande verhouding. */
.service-right img,.service-right .plane{height:auto!important;max-height:220px;aspect-ratio:16/9!important}
@media(min-width:768px){.service-trigger{padding-top:16px;padding-bottom:16px}}
.service-grid{gap:48px}
@media(max-width:767px){.service-grid{gap:16px}.service-right{padding-right:0}}

/* Werkafspraken op foto: minder lege fotohoogte; regel 9: donkere laag bovenaan (kop) en donkere kaarten (tekst). */
.commitments-content{gap:120px!important}
.commitment-card{gap:24px!important;background:rgb(18 18 18 / .38)!important}
.commitment-text{color:rgb(255 255 255 / .82)}
.commitments-shade{opacity:1!important;background:linear-gradient(to bottom,rgb(18 18 18 / .55),rgb(18 18 18 / .2) 40%,rgb(18 18 18 / .2))!important}
@media(max-width:991px){.commitments-content{gap:120px!important}}
@media(max-width:767px){.commitments-content{gap:72px!important}}
@media(max-width:479px){.commitments-content{gap:40px!important}.commitment-card{gap:16px!important}}

/* Cijfers: beeld minder hoog. */
.stats-media{height:360px!important}
@media(max-width:991px){.stats-media{height:360px!important}}
@media(max-width:767px){.stats-media{height:300px!important}}
@media(max-width:479px){.stats-media{height:220px!important}.stat-card{gap:16px}}

/* Werkwijze: statisch raster binnen de paginabreedte, compactere kaarten; op klein mobiel tekening naast de titel. */
.step-grid{max-width:1460px;margin:0 auto;padding:0 var(--gutter)}
.step-top{gap:24px!important;padding-bottom:24px!important}
.step-drawing{height:96px!important}
@media(min-width:992px){.step-card{padding:24px!important}}
@media(max-width:991px){.step-drawing{height:96px!important}}
@media(max-width:479px){.step-top{flex-direction:row!important;justify-content:space-between!important;align-items:flex-start!important;gap:16px!important;padding-bottom:16px!important}.step-image-wrap{align-self:flex-start!important}.step-drawing{height:72px!important}.step-bottom{gap:12px}}

/* Ontwerpafspraken (slider): beeld 4:3, vaste afstanden in de tekstkolom. */
.slide-image{aspect-ratio:4/3!important;height:auto!important}
.slide-top{gap:32px!important;padding-bottom:32px!important}
@media(max-width:767px){.slide-top{gap:16px!important;padding-bottom:16px!important}}

/* Herstel 1: citaat in de slider ruimer gezet (was regelhoogte 1,1). */
.slide-quote p{line-height:1.3!important}

/* Herstel 1: contactpagina, één melding onder de kaarten; contactregels tonen alleen hun soort. */
.contact-note{margin-top:16px;color:var(--ink-50);text-align:center}
.contact-list .contact-line{color:var(--ink)}

/* Herstel 1: footer zonder sjabloonkolommen (Volgen, Overig); menu zonder volglijst. */
.footer-menu{grid-template-columns:minmax(0,1fr)!important;max-width:none}

/* Journaal: kleinere afstand tussen titel en metadata in de rechterlijst. */
.post-meta-inline{padding-top:16px}

/* Afsluiter en footer: binnenruimte volgens de sectiemaat. */
.cta{padding:var(--space) 0!important}
.footer-grid{padding-top:var(--space)!important;gap:48px!important}
/* Groot woordmerk onderaan blijft een beeldelement, maar neemt minder hoogte in. */
@media(min-width:992px){.footer-wordmark-wrap{justify-self:end;width:100%;max-width:600px}}
@media(max-width:991px){.footer-grid{gap:40px!important}}
@media(max-width:479px){.footer-grid{gap:32px 20px!important}}

/* Binnenpagina's: geen extreme kop- en beeldhoogtes. */
.inner-hero{padding-bottom:var(--space)!important}
.about-hero-left{padding:176px 48px 96px!important}
.about-hero-right{height:auto!important;min-height:520px}
.stat-info{gap:96px!important}
@media(max-width:991px){.about-hero-left{padding:150px 30px 64px!important}.stat-info{gap:48px!important}}
@media(max-width:767px){.about-hero-left{padding:90px 14px 48px!important}.about-hero-right{min-height:0;height:320px!important}}
.project-hero{height:min(100vh,760px)!important}
@media(max-width:991px){.project-hero{height:auto!important}}

@media(prefers-reduced-motion:reduce){.step-grid,.project-info,[data-reveal],[data-intro]{transform:none!important;opacity:1!important}}
/* Einde lay-outronde 29-10-2026 */

/* Premium motion · 30-10-2026: alleen aanvullingen; geen verborgen beginstaat. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .premium-hover img[data-premium-motion="image"] { transition: scale .8s cubic-bezier(.16,1,.3,1); }
  .premium-hover:is(:hover,:focus-within) img[data-premium-motion="image"] { scale: 1.035; }
}
@media (prefers-reduced-motion: reduce) {
  [data-premium-motion] { translate: none !important; scale: none !important; clip-path: none !important; }
}

/* Premium audit A: comfortabele bediening zonder wijzigingen aan het compositieraster. */
@media (pointer:coarse) {
  .menu-button { position:relative; }
  .menu-button::after { content:""; position:absolute; inset:-6px 0; }
  .slider-arrow { min-width:44px; min-height:44px; }
}

@media (pointer:coarse) and (max-width:479px) {
  .slide-content { padding-bottom:88px; }
  .arrow-prev { right:72px; }
}

/* Mobiele redactie · 30 oktober 2026. Projecten lezen als een architectuurindex. */
@media(max-width:767px){
  .hero{height:72svh;min-height:480px;max-height:720px}
  .hero-bottom{gap:20px;align-items:flex-end}
  .hero-bottom .small-caps{font-size:12px;line-height:1.4;max-width:46%}
  .hero-bottom .small-caps:last-child{text-align:right}
  .project-card,.project-card.is-wide{aspect-ratio:auto!important;display:flex;flex-direction:column;background:var(--mist);overflow:hidden}
  .project-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;width:100%}
  .project-info{position:relative;inset:auto;padding:16px 2px 20px;background:var(--white);border-radius:0;flex-wrap:nowrap;gap:14px;opacity:1;transform:none}
  .project-title{font-size:22px;line-height:1.16}
  .project-place,.project-year{font-size:14px;line-height:1.45}
  .project-year{align-self:flex-start;padding-top:4px}
  .project-corners{display:none}
  .project-text{gap:6px}
  .project-row{gap:20px}
  .projects-list,.projects-grid{gap:20px}
  .commitment-text,.slide-role,.post-left,.post-link,.step-num,.service-num{font-size:14px;line-height:1.45}
  .slider-arrow{width:48px;height:48px;min-width:48px;min-height:48px;bottom:20px;border:1px solid var(--ink-20)}
  .slider-arrow svg{width:32px;height:32px}
  .arrow-prev{right:80px}.arrow-next{right:20px}
  .slide-content{padding:22px 20px 92px}
  .slide-quote p{font-size:24px;line-height:1.3!important}
  .slide-name{font-size:20px}
  .slide-image{aspect-ratio:3/2!important}
  .service-trigger{min-height:72px}
  .post-meta{padding-top:14px}
}
@media(max-width:359px){.hero-bottom .small-caps{font-size:11px}.slide-quote p{font-size:22px}}
@media(hover:none){.project-card:active .project-media img{filter:brightness(.92)}}

@media(max-width:359px){.hero-bottom{gap:8px}.hero-bottom .small-caps:first-child{max-width:56%;white-space:nowrap}.hero-bottom .small-caps:last-child{max-width:42%}}
/* Onafhankelijke review: metadata past binnen ieder smal projecttegelvak. */
.project-meta-card{min-width:0}
.project-meta-info,.project-meta-title{min-width:0;overflow-wrap:anywhere;hyphens:manual}
@media(max-width:479px){.project-meta-info{font-size:clamp(16px,5vw,18px);line-height:1.4}}