@font-face{font-family:Inter;src:url("/templates/zonlijn-energie/assets/fonts/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}
/* Existing Claude rebuild, reference content restored 2026-10-23. */












/* Manrope oogt dunner dan de koppenletter van het template: elk gewicht gebruikt optisch de volgende snede */

:root{
  --ink:#0f1013;
  --black:#000;
  --white:#fff;
  --grey-bg:#f2f2f2;
  --line:#d9d9da;
  --muted:#34373f;
  --heading:"Poppins",sans-serif;
  --text:"Rubik",sans-serif;
  --ease:cubic-bezier(.25,.1,.25,1);
  --gutter:2rem;
  --container:73rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:"Inter",Arial,sans-serif;font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,h5,h6,p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:200;background:var(--black);color:var(--white);padding:.75rem 1rem;text-decoration:none;font-size:.875rem;transition:top .2s}
.skip-link:focus{top:12px}
main:focus{outline:none}

/* bovenbalk (verplicht label) */
.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 16px;padding:6px var(--gutter);background:var(--grey-bg);color:var(--ink);font-size:.8125rem;line-height:1.3;text-align:center}
.topbar a{font-weight:500;text-underline-offset:3px}
.topbar a:hover{opacity:.7}

/* opmaak */
.wrap{position:relative;z-index:2;width:100%;max-width:calc(var(--container) + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter)}
.pad{padding-block:5rem}
.section{position:relative;z-index:1;background:var(--white);overflow:hidden}
.clip{overflow:hidden}

.h-hero,.h2,.h3,.h4,.h-big,.price-name,.price-amount,.explore-title,.explore-link,.footer-heading,.loop-word p,.brand-word{letter-spacing:normal}
.h-hero{font-family:"Inter",Arial,sans-serif;font-size:4.4rem;font-weight:400;line-height:1.2;color:var(--white)}
.h2{font-family:"Inter",Arial,sans-serif;font-size:3.5rem;font-weight:500;line-height:1.1;color:var(--ink)}
.h3{font-family:"Inter",Arial,sans-serif;font-size:2.5rem;font-weight:500;line-height:1.2;color:var(--ink)}
.h4{font-family:"Inter",Arial,sans-serif;font-size:1.5rem;font-weight:400;line-height:1.2;color:var(--ink)}
.h-big{font-family:"Inter",Arial,sans-serif;font-size:6rem;font-weight:400;line-height:1;color:var(--ink)}
.t-regular{font-size:1rem;font-weight:400;line-height:1.3}
.t-small{font-size:.85rem;font-weight:400;line-height:1.2}
.t-medium{font-size:1.25rem;font-weight:400;line-height:1.3}
.t-white{color:var(--white)}
.t-grey{color:var(--muted);opacity:.8}
.t-50{opacity:.5}
.eyebrow{font-size:1rem;font-weight:600;line-height:1.2;color:var(--black)}
.eyebrow-gap{margin-bottom:.625rem}
.stack{display:flex;flex-direction:column;gap:10px}
.row-start{display:flex;align-items:flex-start}
.head-sub{margin-top:.5rem}

/* knoppen */
.btn{position:relative;display:flex;align-items:center;justify-content:center;gap:.3rem;border:1px solid var(--black);border-radius:0;padding:.75rem 1rem;font-family:"Inter",Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;transition:filter .4s}
.btn:hover{filter:invert(1)}
.btn-dark{background:var(--black);color:var(--white)}
.btn-light{background:var(--white);color:var(--ink)}
.btn-icon{flex:none;width:1.06rem;height:1.06rem}
.btn-square{padding:.75rem 1rem}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1rem}

/* kop en navigatie */
.site-header{position:sticky;top:0;z-index:99;width:100%;line-height:1.2}
.header-slide{will-change:transform}
.nav{display:flex;align-items:center;width:100%;margin:.6rem 0;padding:0 .6rem}
.nav-bar{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;min-width:43.75rem;height:3.75rem;margin:0 auto;padding:0 .625rem 0 1rem}
.nav-bg{position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.brand{display:flex;align-items:center;gap:.35rem;height:1.5rem;color:var(--white);text-decoration:none;transition:opacity .4s}
.brand:hover{opacity:.8}
.brand-mark{width:1.9rem;height:1.5rem}
.brand-word{font-family:"Inter",Arial,sans-serif;font-size:1.3rem;font-weight:500;letter-spacing:-.01em;line-height:1}
.nav-actions{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:.625rem}
.explore{display:flex}
.explore-chevron{width:.75rem;height:.5rem}
.explore-panel{position:absolute;top:120%;left:0;right:0}
.explore-inner{display:flex;justify-content:center;align-items:flex-start;margin-top:2px;padding:0 2rem}
.explore-menu{width:100%;padding:1rem;background:var(--white);box-shadow:0 0 0 1px var(--line);color:var(--ink)}
.explore-grid{display:grid;grid-template-columns:1fr 1fr 1fr}
.explore-col{display:flex;flex-direction:column;margin-right:1rem;border-right:1px solid var(--line)}
.explore-title{padding-bottom:.6rem;font-family:"Inter",Arial,sans-serif;font-size:1.1rem;font-weight:400;line-height:1.2;opacity:.5}
.explore-link{align-self:flex-start;padding:.5rem .6rem .5rem 0;font-family:"Inter",Arial,sans-serif;font-size:1rem;font-weight:500;line-height:1;text-decoration:none;transition:color .4s}
.explore-link:hover,.explore-link.is-current{color:#111112}
.explore-posts{display:flex;flex-direction:column;gap:1rem}
.explore-post{display:grid;grid-template-columns:.75fr 1fr;gap:.7rem;align-items:stretch;font-size:1rem;font-weight:500;line-height:1;text-decoration:none;transition:opacity .4s}
.explore-post:hover{opacity:.8}
.explore-post img{width:6rem;min-width:6rem;height:6rem;object-fit:cover}
.explore-post-title{display:flex;align-items:center;margin:.3rem 0}

/* hero */
.hero{position:relative;height:100vh;margin-top:-80px;padding-top:80px;overflow:hidden;background:var(--black)}
.hero-content{display:flex;flex-direction:column;align-items:center;gap:.6rem;max-width:90%;margin:0 auto;padding:5rem 0 20rem;text-align:center}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-fade{position:absolute;inset:0;z-index:1;overflow:hidden}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;transform-origin:50% 50%;will-change:transform}
.hero-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(rgba(0,0,0,.58) 0%,rgba(0,0,0,.42) 38%,rgba(0,0,0,.08) 68%,transparent)}
.hero .wrap{z-index:3}
.hero .btn-row{justify-content:center}

/* intro */
.intro-grid{display:grid;grid-template-columns:2fr 1fr;gap:2rem}
.intro-text{display:flex;flex-direction:column;align-items:flex-start;gap:2rem}
.intro-end{align-self:end}

/* productpanelen */
.panels{position:relative;display:flex;gap:2rem;height:40rem}
.panel{position:relative;width:30%;height:100%;background:var(--black);cursor:pointer;transition:width .5s var(--ease)}
.panel.is-open{width:100%}
.panel-inner{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;overflow:hidden;background:var(--black)}
.panel-content{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:.5rem;width:100%;max-width:30rem;padding:2rem;opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility 0s linear .2s}
.panel.is-open .panel-content{opacity:1;visibility:visible;transition:opacity .5s var(--ease) .3s,visibility 0s linear .3s}
.panel-action{margin-top:1rem}
.panel-toggle{position:absolute;inset:0;z-index:0;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;cursor:pointer;opacity:0}
.panel-toggle:focus-visible{opacity:1;outline:2px solid #2563eb;outline-offset:-4px}
.panel-bg{position:absolute;inset:0;z-index:-1}
.panel-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;transition:transform .7s var(--ease)}
.panel-inner:hover .panel-bg img{transform:scale(1.1)}
.panel-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent)}

/* werkwijze */
.process{display:grid;grid-template-columns:1fr 5fr;gap:5rem 2rem}
.process-head{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:end;justify-items:start;margin-bottom:2rem;text-wrap:balance}
.process-intro{margin-top:.5rem}
.process-head-end{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;width:100%}
.process-nav{position:sticky;top:6.25rem;display:flex;flex-direction:column;align-items:flex-start}
.step-links{display:flex;flex-direction:column;align-items:flex-start;min-width:7.55rem;background:var(--white);box-shadow:0 0 0 1px rgba(0,0,0,.05);line-height:1}
.step-link{display:flex;align-items:center;width:100%;padding:.6rem .8rem;font-size:1rem;line-height:1;text-decoration:none;transition:opacity .35s}
.step-link:hover{opacity:.7}
.steps{display:flex;flex-direction:column;gap:5rem}
.step{display:grid;grid-template-columns:2fr 1fr;gap:5rem;scroll-margin-top:6.25rem}
.step-text{display:flex;flex-direction:column;gap:.6rem}
.step-media img{width:100%;aspect-ratio:2/3;object-fit:cover}

/* missie */
.mission{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;justify-items:start}
.mission>div{width:100%}
.mission-text{display:flex;flex-direction:column;justify-content:space-between;height:100%}
.mission-top{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;text-wrap:balance}
.mission-bottom{margin-top:auto;padding-top:2rem}
.mission-bottom .btn-row{margin-top:0}
.mission-media{position:relative;width:100%;aspect-ratio:1;overflow:hidden}
.mission-image{position:absolute;inset:0}
.plane{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#e7e7e7;color:#6b6e75}
.plane-label{font-size:.85rem;line-height:1.3;text-align:center;padding:1rem}

/* tabbladen */
.features{position:relative}
.features-title{position:absolute;top:0;left:0;z-index:2;display:flex;flex-direction:column;gap:.5rem;width:30%}
.tabs{display:grid;grid-template-columns:1.5fr 3fr;gap:2rem;align-items:end;justify-items:start;width:100%}
.tab-list{display:flex;flex-direction:column;align-items:stretch;width:100%;padding-top:10rem;line-height:1;overflow:hidden}
.tab{display:flex;justify-content:flex-start;align-items:flex-start;width:100%;margin:0;padding:1rem .5rem;border:0;border-top:1px solid rgba(0,0,0,.15);background:transparent;color:var(--ink);text-align:left;font-size:1rem;line-height:1;cursor:pointer;transition:all .35s}
.tab:hover{background:var(--grey-bg);color:var(--black)}
.tab.is-active{background:transparent;color:var(--ink);border-top-color:var(--ink)}
.tab-inside{display:flex;flex-direction:column;width:100%}
.tab-head{display:flex;justify-content:space-between;width:100%}
.tab-head .t-regular,.tab-summary .t-small{display:block}
.tab-num{opacity:.5}
.tab-summary{display:block;height:0;width:100%;overflow:hidden}
.tab.is-active .tab-summary{height:auto}
.tab-summary-in{display:block;padding-top:1rem}
.tab-panels{width:100%;height:100%}
.tab-panel{display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.tab-panel[hidden]{display:none}
.tab-card{position:relative;width:100%;background:var(--grey-bg)}
.tab-card-grid{display:grid;grid-template-columns:1fr;gap:2rem;padding:2rem}
.tab-img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* prijzen */
.center-head{display:flex;flex-direction:column;align-items:center;max-width:43rem;margin:0 auto;padding-bottom:3rem;text-align:center;text-wrap:balance}
.price-table{position:relative;background:var(--white);border:1px solid var(--line);line-height:1.4}
.price-head-wrap{position:sticky;top:4.6rem;z-index:101;display:flex;justify-content:flex-end;align-items:flex-start;margin-bottom:-1px;overflow:hidden}
.price-head{display:grid;grid-template-columns:1fr 1fr 1fr;width:75%;background:var(--white)}
.price-col{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;padding:1rem;text-align:center}
.price-col-in{display:flex;flex-direction:column;justify-content:space-between;align-items:center;width:100%;height:100%;min-height:9.3rem}
.price-name-wrap{display:flex;flex-direction:column;align-items:stretch;gap:.3rem}
.price-name{font-family:"Inter",Arial,sans-serif;font-size:2.5rem;font-weight:500;line-height:1.2}
.price-desc{font-size:1rem;line-height:1.3}
.price-amount-wrap{display:flex;justify-content:center;align-items:center;width:100%}
.price-amount-in{display:flex;flex-direction:column;align-items:center;gap:.6rem;width:100%;margin-top:.6rem}
.price-amount{font-family:"Inter",Arial,sans-serif;font-size:3.5rem;font-weight:500;line-height:1.1}
.price-per{opacity:.7}
.cell-line{position:absolute;inset:-1px 0 0 -1px;z-index:-1;pointer-events:none;border:1px solid var(--line);border-right:0}
.cell-grey{position:absolute;inset:0;z-index:-2;background:var(--grey-bg)}
.price-body{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden}
.price-label,.price-cta{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center}
.price-label.is-top{z-index:10}
.price-cta.is-grey{background:var(--grey-bg)}
.cell{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;width:100%;height:100%;padding:1.25rem}
.cell-button{flex-direction:column;align-items:stretch}
.check{display:flex;justify-content:center;align-items:center;width:100%}
.check svg{width:1.37rem;height:1.37rem}
.tip-wrap{position:relative;z-index:120;display:flex;justify-content:center;align-items:center;width:2.5rem;height:2.5rem}
.tip-button{display:flex;margin:0;padding:0;border:0;background:none;cursor:help}
.tip-icon{width:1.5rem;height:1.5rem;color:var(--ink);opacity:.2;transition:opacity .4s var(--ease)}
.tip{position:absolute;top:-25%;left:180%;z-index:100;width:18.75rem;padding:.75rem;background:var(--white);color:var(--ink);visibility:hidden;opacity:0;filter:blur(4px);transform:translateX(-25px) scaleX(.9);transition:opacity .4s var(--ease),transform .4s var(--ease),filter .4s var(--ease),visibility 0s linear .4s}
.tip .t-regular{display:block}
.tip-wrap:hover .tip-icon,.tip-wrap:focus-within .tip-icon{opacity:1;transition-duration:.6s}
.tip-wrap:hover .tip,.tip-wrap:focus-within .tip{visibility:visible;opacity:1;filter:blur(0);transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease),filter .6s var(--ease),visibility 0s}

/* partners */
.logos{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}
.logo-list{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2rem;max-width:34rem}
.logo-card{display:flex;justify-content:center;align-items:center;width:3.5rem;height:3.5rem;padding:1rem;background:var(--grey-bg);color:var(--black)}
.logo-mark{width:1.5rem;height:1.5rem}

/* cijfers */
.stats-head{display:flex;flex-direction:column;align-items:center;max-width:920px;margin:0 auto 20px;text-align:center}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:8rem}
.stats-list{grid-area:1/2/2/3;display:grid;grid-template-columns:1fr;gap:4rem;height:100%}
.stats-media{grid-area:1/1/2/2;align-self:end;justify-self:start}
.stats-image{width:390px;aspect-ratio:1;overflow:hidden}
.stats-image img{width:100%;height:100%;object-fit:cover}
.stat{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:.5rem;height:100%;text-wrap:balance}

/* blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4rem 2rem}
.post{position:relative;display:block;width:100%;height:100%;color:var(--ink);text-decoration:none}
.post-media{position:relative;display:block;aspect-ratio:3/2;overflow:hidden}
.post-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.post:hover .post-media img{transform:scale(1.15)}
.post-body{display:flex;flex-direction:column;gap:.5rem;padding-top:.6rem}
.post-body>span{display:block}
.post-date{opacity:.7}

/* slider */
.slider{position:relative;width:100%;padding-bottom:3.75rem}
.slider:focus-visible{outline-offset:6px}
.slider-mask{position:relative;display:flex;align-items:stretch;width:100%;height:40rem;transition:transform .5s var(--ease)}
.slide{position:relative;flex:0 0 100%;height:100%;margin-right:2rem}
.slide-item{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:2rem;width:100%;height:100%;padding:3rem;overflow:hidden}
.slide-top{position:relative;z-index:1;display:grid;grid-template-columns:1.5fr 1fr;gap:2rem;align-items:end;justify-items:start;width:100%}
.slide-cta{justify-self:end}
.slide-cards{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;width:100%}
.slide-card-col{width:33%}
.slide-card{display:block;padding:1.5rem;background:var(--grey-bg);text-wrap:balance}
.person{display:flex;align-items:center;gap:.75rem;text-align:left}
.person img{width:2.6rem;min-width:2.6rem;height:2.6rem;border-radius:100%;object-fit:cover}
.person-info{display:flex;flex-direction:column}
.person-info>span{display:block}
.quote{margin-top:1rem}
.feature-list{display:flex;flex-direction:column;gap:1.25rem;width:100%}
.feature-list li{display:flex;align-items:flex-start;gap:.6rem}
.feature-icon{flex:none;width:1.5rem;height:1.5rem}
.feature-text{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:1.5rem}
.feature-text>span{display:block}
.slide-bg{position:absolute;inset:0;z-index:-1}
.slide-bg img{width:100%;height:100%;object-fit:cover}
.slider-arrow{position:absolute;bottom:0;left:50%;z-index:3;display:flex;width:2.5rem;height:2.5rem;margin:0;padding:0;border:0;background:transparent;cursor:pointer;transition:opacity .4s}
.slider-arrow:hover{opacity:.7}
.slider-arrow.is-prev{margin-left:-6.25rem}
.slider-arrow.is-next{margin-left:3.75rem}
.slider-arrow-in{display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:2px;border:1px solid var(--line);background:var(--white);color:var(--black)}
.slider-arrow-in svg{width:100%;height:100%;padding:.4rem}
.slider-dots{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;justify-content:center;align-items:center;height:2.5rem;padding-top:4px;font-size:8px;line-height:1}
.slider-dot{width:1em;height:1em;margin:0 3px .5em;padding:0;border:0;border-radius:100%;background:rgba(34,34,34,.4);cursor:pointer;transition:background-color .1s}
.slider-dot.is-active{background:#222}

/* afsluiter */
.cta{position:relative;z-index:1;width:100%;min-height:80vh;overflow:hidden;background:var(--black)}
.cta-content{display:flex;flex-direction:column;align-items:flex-start;padding-bottom:20rem;text-align:left}
.cta-text{width:100%;max-width:49rem}
.cta-title{margin-bottom:.5rem}
.cta .wrap{z-index:3}
.cta-media{position:absolute;inset:0;z-index:0}
.cta-img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:50% 73%}
.cta-media:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.22) 42%,transparent 68%)}

/* footer */
.footer{position:relative;z-index:1;overflow:hidden;background:var(--black);color:var(--white)}
.footer-loop{position:relative;z-index:2;display:flex;align-items:flex-start;width:1250rem;min-width:1250rem;padding:2rem 0}
.loop-word{display:flex;padding-right:4.3rem;color:var(--white);animation:loop 25s linear infinite;animation-play-state:paused}
.footer-loop.is-running .loop-word{animation-play-state:running}
.loop-word p{font-family:"Inter",Arial,sans-serif;font-size:12.5rem;font-weight:600;line-height:1.2;white-space:nowrap}
@keyframes loop{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.footer-top{display:flex;flex-direction:column;align-items:flex-start;gap:2rem;max-width:60%}
.footer-bottom{display:grid;grid-template-columns:.4fr 1fr;margin-top:3rem;text-align:left}
.footer-brand{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:1rem;height:100%;padding-right:2rem}
.footer-credit{opacity:.5}
.footer-credit-link{text-decoration:none;transition:color .35s}
.footer-credit-link:hover{color:rgba(255,255,255,.7)}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem 2rem;justify-items:center;align-items:start;width:100%}
.footer-heading{margin-bottom:1rem;font-family:"Inter",Arial,sans-serif;font-size:1.1rem;font-weight:400;line-height:1.2;color:var(--white);opacity:.7}
.footer-list{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
.footer-list li{display:flex}
.footer-link{font-size:1rem;line-height:1.3;color:var(--white);text-decoration:none}
.footer-link.has-line::after{content:"";display:block;height:1px;margin-top:2px;background:transparent}

/* video */
.video-dialog{width:min(56rem,calc(100% - 2rem));padding:0;border:0;background:transparent;opacity:0;transition:opacity .3s var(--ease)}
.video-dialog[open].is-visible{opacity:1}
.video-dialog::backdrop{background:rgba(0,0,0,.8)}
.video-box{position:relative;aspect-ratio:16/9;background:#111}
.video-plane{height:100%;background:#1b1c20;color:#c9c9c9}
.video-close{position:absolute;top:.75rem;right:.75rem;display:flex;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;padding:.6rem;border:1px solid rgba(255,255,255,.3);background:transparent;color:var(--white);cursor:pointer}
.video-close svg{width:100%;height:100%}

/* binnenkomst en scrollbewegingen (begintoestand alleen met JavaScript) */
.js [data-nav-intro]{transform:translateY(-100%)}
.js [data-nav-intro].is-in{transform:none;transition:transform 1s var(--ease) .7s}
.js [data-reveal="left"]{opacity:0;transform:translate3d(-15px,0,0)}
.js [data-reveal="left"].is-in{opacity:1;transform:none;transition:opacity 1s var(--ease) .1s,transform 1s var(--ease) .1s}
.js [data-reveal="fade"]{opacity:0}
.js [data-reveal="fade"].is-in{opacity:1;transition:opacity .7s var(--ease) .1s}
.js [data-reveal="up"]{opacity:0;transform:translate3d(0,25px,0)}
.js [data-reveal="up"].is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-reveal="zoom"]{opacity:0;transform:scale(1.1)}
.js [data-reveal="zoom"].is-in{opacity:1;transform:none;transition:opacity 1s var(--ease) .1s,transform 1s var(--ease) .1s}
.js [data-reveal="blur"]{opacity:0;filter:blur(5px)}
.js [data-reveal="blur"].is-in{opacity:1;filter:blur(0);transition:opacity 1s var(--ease) .1s,filter 1s var(--ease) .1s}
.js [data-stagger] [data-step]{opacity:0;transform:translate3d(-20px,0,0)}
.js [data-stagger].is-in [data-step]{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-stagger].is-in [data-step="2"]{transition-delay:.2s}
.js [data-stagger].is-in [data-step="3"]{transition-delay:.4s}
.js [data-stagger].is-in [data-step="4"]{transition-delay:.6s}
.js [data-stagger].is-in [data-step="5"]{transition-delay:.8s}
.js [data-stagger].is-in [data-step="6"]{transition-delay:1s}
.js [data-scroll-image] .mission-image{opacity:0;transform:scale(1.1)}
.js [data-scroll-image].is-in .mission-image{opacity:1;transform:none;transition:opacity 2s var(--ease),transform 2s var(--ease)}

/* ≥1440 */
@media (min-width:1440px){
  :root{--container:78rem}
}

/* ≤991 */
@media (max-width:991px){
  .pad{padding-block:4rem}
  .hero-content{padding-top:4rem}
  .h-hero{font-size:3.5rem}
  .h2{font-size:2.2rem}
  .h3{font-size:1.75rem}
  .h-big{font-size:3.7rem}
  .btn{font-weight:500}
  .nav-bar{justify-content:space-between;width:100%;min-width:auto;padding-right:10px}
  .explore-inner{justify-content:flex-start;align-items:stretch;width:100%;padding:0}
  .explore-menu{max-height:90vh;overflow:auto}
  .explore-grid{grid-template-columns:1fr;gap:20px}
  .explore-col{justify-content:flex-start;align-items:flex-start;margin-right:0;padding-bottom:1rem;border-right:0;border-bottom:1px solid var(--line)}
  .explore-post{grid-template-columns:100px 1fr;gap:.5rem;width:100%}
  .mission{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr;gap:3rem;margin-top:3rem}
  .stats-list{grid-area:auto;grid-column:1/2;gap:2.9rem}
  .stats-media{grid-area:auto}
  .loop-word{padding-right:2.5rem}
  .loop-word p{font-size:7.5rem}
  .footer-bottom{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:2rem}
  .footer-cols{gap:1rem;justify-items:start}
  .footer-top{max-width:80%}
  .footer-link{padding-bottom:2px}
  .step{grid-template-columns:1fr;gap:2rem}
  .features-title{position:relative;width:100%;margin-bottom:3rem}
  .tabs{grid-template-columns:1fr}
  .tab-list{padding-top:0}
  .price-col-in{min-height:11.25rem}
  .price-amount-in{gap:2px}
  .cell-button{z-index:3;padding-left:10px;padding-right:10px}
  .price-name{font-size:1.75rem}
  .price-amount{font-size:2.2rem}
  .slide-top{grid-template-columns:1fr}
  .slide-cta{justify-self:auto}
  .slide-card-col{width:45%}
}

/* ≤767 */
@media (max-width:767px){
  :root{--gutter:1rem}
  .pad{padding-block:3rem}
  .hero-content{padding-top:3rem}
  .mission-bottom{padding-top:1.5rem}
  .h-hero{font-size:3.3rem}
  .h2{font-size:2.3rem}
  .h3{font-size:1.7rem}
  .h4{font-size:1.4rem}
  .h-big{font-size:2.5rem}
  .explore-inner{overflow:auto}
  .explore-menu{padding-left:10px;padding-right:10px}
  .explore-post{display:flex}
  .explore-post img{width:4rem;min-width:4rem;height:4rem}
  .explore-title{font-size:.75rem}
  .hero{height:80vh}
  .hero-content{max-width:95%}
  .intro-grid{grid-template-columns:1fr}
  .panels{flex-direction:column;gap:.5rem}
  .panel,.panel.is-open{width:100%}
  .panel-content,.panel.is-open .panel-content{padding:.6rem;opacity:1;visibility:visible;transition:none}
  .panel-toggle{display:none}
  .process{grid-template-columns:1fr;row-gap:2rem}
  .process-head{grid-template-columns:1fr}
  .process-head-end{align-items:flex-start}
  .center-head{padding-bottom:2rem}
  .stats-image{width:100%;aspect-ratio:auto}
  .blog-grid{grid-template-columns:1fr;row-gap:2.5rem}
  .loop-word p{font-size:7.5rem}
  .footer-loop{padding:0}
  .price-body{grid-template-columns:repeat(3,minmax(0,1fr))}
  .price-label{grid-column:span 3}
  .price-col-in{min-height:8.75rem}
  .price-head{width:100%}
  .price-head-wrap{background:var(--white);top:4.3rem}
  .tip{width:60vw;left:auto;right:90%;text-align:right}
  .price-name{font-size:1.3rem}
  .price-amount{font-size:1.7rem}
  .price-desc{font-size:.8rem}
  .logo-list{gap:1.5rem}
  .slide-cards{flex-direction:column;justify-content:flex-end;align-items:flex-start}
  .slide-item{min-height:45rem;padding:1.5rem}
  .slider-mask{height:auto}
  .slide-card-col{width:100%}
}

/* ≤479 */
@media (max-width:479px){
  .h-hero{font-size:2.2rem}
  .h2{font-size:30px}
  .h3{font-size:1.7rem}
  .h4{font-size:1.3rem}
  .h-big{font-size:2.1rem}
  .t-medium{font-size:1.1rem}
  .eyebrow{font-size:14px}
  .btn{padding:.6rem .8rem;font-size:.9rem}
  .btn-icon{width:.8rem;height:.8rem}
  .btn-icon-keep{width:.8rem;height:1.06rem}
  .nav-cta{display:none}
  .nav-actions{gap:0}
  .explore-inner{padding:2px}
  .explore-post{gap:.6rem}
  .explore-title{font-size:1rem}
  .hero{height:70vh}
  .hero-content{max-width:100%}
  .intro-grid{gap:1rem}
  .panels{height:30rem}
  .step-link{padding-left:12px;padding-right:12px}
  .step-links{min-width:7.45rem}
  .blog-grid{row-gap:2rem}
  .footer-loop{padding:1rem 0}
  .loop-word{padding-right:1.25rem}
  .loop-word p{font-size:5rem}
  .footer-top{max-width:90%}
  .footer-cols{grid-template-columns:1fr 1fr}
  .footer-heading{font-size:1rem}
  .logo-item{padding:.6rem 0}
  .logo-list{gap:1rem}
  .logo-mark{width:1.25rem;height:1.25rem}
  .cta{min-height:40vh}
  .tab-card-grid{padding:1.5rem}
  .tab{padding-left:.75rem;padding-right:.75rem}
  .price-table{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}
  .price-head-wrap{top:-2.5px}
  .price-col{padding-left:.6rem;padding-right:.6rem}
  .price-col-in{min-height:8.1rem}
  .price-amount-wrap{flex-direction:column;align-items:flex-start}
  .price-amount{font-size:1.4rem}
  .price-cta{grid-column:span 3}
  .cell-button{align-items:center}
  .tip{width:70vw}
  .slide-card{padding-left:20px;padding-right:20px}
}

/* minder beweging: alles direct zichtbaar, geen animaties */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-nav-intro],.js [data-reveal],.js [data-stagger] [data-step],.js [data-scroll-image] .mission-image{opacity:1!important;transform:none!important;filter:none!important}
  .hero-img{transform:none!important}
}

.brand-original{width:115px;height:auto;display:block}.brand{gap:0}

/* Measured corrections to the retained rebuild */
.reference-badge{position:fixed;right:31px;bottom:11px;z-index:999;padding:8px 12px;border:0;border-radius:4px;background:rgba(255,255,255,.85);font-family:"Inter",Arial,sans-serif;color:#000;font-size:14px;line-height:21px;font-weight:600;cursor:default}.reference-w{color:#146ef5;margin-inline:4px;font-weight:900}
.hero-img{object-position:50% 50%}

/* Exact corrections from browser comparison; existing layout retained. */
.section{overflow:visible}.section.clip{overflow:hidden}
.brand-original{width:auto;height:1.5rem}.btn-bg{position:absolute;inset:0;z-index:-1}
img.btn-icon{object-fit:contain} .btn-dark img.btn-icon{filter:invert(1)}
.panel-bg img{transition:transform .7s var(--ease)}.panel-inner:hover .panel-bg img{transform:scale(1.1)}
.feature-text{align-items:flex-start}.feature-list li{align-items:center}
.footer-link{transition:color .35s}.footer-link:hover{color:rgba(255,255,255,.7)}
.footer-link.has-line{position:relative;overflow:hidden}
.footer-link.has-line::after{background:currentColor;transform:translateX(-101%);transition:transform .8s var(--ease)}
.footer-link.has-line:hover::after{transform:translateX(0);transition-duration:.7s}
.reference-badge{display:flex;align-items:center;gap:5px;right:30px;bottom:30px;border:1px solid #0003;border-radius:6px;padding:8px 12px;background:#fff;color:#000;font-family:"Inter",Arial,sans-serif;font-weight:500;font-size:14px;line-height:21px;height:39px;z-index:20;animation:badge-in 1s var(--ease) 3s both}
.reference-badge strong{font-weight:700}.reference-buy-more{display:flex;align-items:center;white-space:pre}.reference-w{width:20px;height:20px;margin:0 5px 0 0;border-radius:3px}
@keyframes badge-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media(max-width:991px){.reference-badge{right:14px;bottom:14px}}
@media(max-width:479px){.brand-original{height:1.3rem}.nav-actions{padding-right:10px}}
@media(prefers-reduced-motion:reduce){.reference-badge{animation:none!important}}

/* Final image alignment and reference icon sizing. */
.slide-bg img{object-position:50% 100%}.logos{text-align:left}.slider-arrow-in{padding:0}.slider-arrow-in img{width:100%;height:100%;padding:.4rem}.tab-num{align-self:flex-start}
.btn:hover{border-color:#fff}

.slider-arrow-in{padding:2px}.slider-arrow-in img{width:100%;height:100%;padding:.4rem}
.reference-badge{background:transparent;padding:0}.reference-badge-surface{display:flex;align-items:center;gap:5px;padding:8px 12px;background:#fff;opacity:.8;border-radius:5px;transition:opacity .4s,box-shadow .475s}.reference-badge:hover .reference-badge-surface{opacity:1;box-shadow:0 6px 20px #0000003b}
@media(min-width:768px){.reference-badge{right:30px;bottom:30px}}

/* Live initial-load measurement: navbar has no active motion in the original.
   The source's empty IX2 target does not move the navbar. Its continuous hero
   scale overrides the configured entrance scale; only entrance opacity remains. */
.js [data-nav-intro],.js [data-nav-intro].is-in{transform:none;transition:none}
.js [data-reveal="hero-image"]{opacity:0;transform:none}
.js [data-reveal="hero-image"].is-in{opacity:1;transition:opacity 1s var(--ease) .0833s}
.js .hero-content [data-reveal="left"].is-in{transition-delay:.0833s}
@media(prefers-reduced-motion:reduce){.js [data-reveal="hero-image"]{opacity:1!important}}

.check-image{width:1.37rem;height:1.37rem}

/* Live scroll behavior: the source process-link group scrolls away. */
.process-nav{position:static}
/* The CTA uses the source's vertical 20px stagger, 700ms and 200ms steps. */
.js .cta [data-stagger] [data-step]{transform:translate3d(0,20px,0)}
.js .cta [data-stagger].is-in [data-step]{transform:none}
@media(prefers-reduced-motion:reduce){.js .cta [data-stagger] [data-step]{transform:none!important}}

/* Live source price header also scrolls away; only the global navigation sticks. */
.price-head-wrap{position:static}
.btn-dark img[data-reference-colored]{filter:none}

/* The live reference's inline feature SVGs have 0x0 bounds in WebKit.
   Preserve its observed layout in that engine; Chromium renders 24px icons. */
.reference-webkit .feature-icon{width:0;height:0}

.slider{touch-action:pan-y}

/* The live footer nav has white child text and a static black underline.
   Global IX2 underline actions are not active on these links in this page. */
.footer-list .footer-link:hover{color:var(--white)}
.footer-link.has-line::after,.footer-link.has-line:hover::after{background:#000;transform:none;transition:none}

/* Eigen concept 24 oktober 2026 */
.eigen-concept{position:relative;z-index:1100;padding:7px 12px;background:#111;color:#fff;text-align:center;font:11px/1.4 Inter,Arial,sans-serif;letter-spacing:.02em}.brand img,.brand-original,.original-brand{width:190px!important;height:auto!important;max-height:50px;object-fit:contain}.logo-pill img,.partner-logo{max-width:140px}.review-media img{width:100%;height:100%;object-fit:cover}.video-dialog img{max-height:50vh;object-fit:cover}.demo-form{padding:60px max(20px,8vw);background:#e9f0e4;color:#111}.demo-form form{display:grid;gap:16px;max-width:680px;margin:auto}.demo-form input,.demo-form textarea{width:100%;padding:16px;border:1px solid #a7b29e;border-radius:8px;background:white}.demo-form button{padding:16px;background:#111;color:white;border:0;border-radius:8px}.demo-form h2{font-size:clamp(28px,4vw,46px)}.demo-status{min-height:24px}.menu-toggle [data-menu-icon]{display:block;width:24px;height:18px;border-top:2px solid;border-bottom:2px solid}.menu-toggle [data-menu-icon]:after{content:'';display:block;border-top:2px solid;margin-top:6px}

.menu-btn [data-menu-icon]{display:block;width:24px;height:18px;border-top:2px solid;border-bottom:2px solid}.menu-btn [data-menu-icon]:after{content:'';display:block;border-top:2px solid;margin-top:6px}.review-media.is-playing .review-img{animation:eigen-beeld 10s ease-in-out infinite alternate}.review-media:not(.is-playing) .review-img{animation-play-state:paused}@keyframes eigen-beeld{to{transform:scale(1.06)}}@media(prefers-reduced-motion:reduce){.review-media .review-img{animation:none!important}}

.concept-credit{padding:24px;font:12px/1.6 Inter,Arial,sans-serif;color:#b6c0b4;overflow-wrap:anywhere}.concept-credit a{text-decoration:underline}

.price-head{grid-template-columns:repeat(3,minmax(0,1fr))}.price-col,.price-col-in,.price-name-wrap{min-width:0}.price-name,.price-desc{overflow-wrap:anywhere}@media(max-width:479px){.price-col{padding:.6rem .35rem}.price-name{font-size:1.2rem}.price-desc{font-size:.75rem}.logo-card img{width:24px;height:24px}}

/* Portretfoto in de brede gesprekskaarten: gezichten blijven in beeld. */
.slide-bg img{object-position:center 15%}
.slide-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.25) 35%,transparent 58%);pointer-events:none}


/* Lay-outronde 29-10-2026 */
/* Eén ritme: 96 px tussen secties op desktop, 64 op iPad, 48 op mobiel. Volle vlakken: dezelfde binnenruimte. */
:root{--sec:6rem}
@media(max-width:991px){:root{--sec:4rem}}
@media(max-width:767px){:root{--sec:3rem}}
.section>.wrap.pad{padding-block:var(--sec) 0}
.section.clip>.wrap.pad{padding-bottom:var(--sec)}
.cta>.wrap.pad{padding-block:var(--sec)}
.demo-form{padding:var(--sec) max(20px,8vw)}
.demo-form form{gap:12px}
/* Velden in de huisletter (het tekstvak viel terug op een monospace). */
.demo-form input,.demo-form textarea,.demo-form button{font:inherit}
.demo-form input,.demo-form textarea{padding:12px 14px}
.demo-form button{padding:14px}

/* Kop: rustige, bijna dichte inktbalk in plaats van grijs halfdoorzichtig; logo 28 px (mobiel 22 px), vector. */
.nav-bg{background:rgba(15,16,19,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.nav .btn-dark{border-color:rgba(255,255,255,.3)}
.brand img,.brand-original{width:auto!important;height:28px!important;max-height:none}
@media(max-width:479px){.brand img,.brand-original{height:22px!important}}
.eigen-concept{font-size:12px}
/* Leeg zwevend restknopje van de referentie (geen inhoud, geen functie) */
.reference-badge{display:none}
/* Ankers landen onder de vaste kop, niet erachter. */
html{scroll-padding-top:5.5rem}

/* Tekstmaten: lopende tekst 16 px, regelhoogte 1,5; labels en metadata 14 px. */
.t-small{font-size:.875rem;line-height:1.4}
p.t-small,.tab-summary .t-small,.feature-text .t-small{font-size:1rem;line-height:1.5}
p.t-regular,.tip .t-regular,.t-medium{line-height:1.5}
.concept-credit{font-size:1rem;line-height:1.5;max-width:calc(var(--container) + 2 * var(--gutter));margin:0 auto;padding:1.5rem var(--gutter)}

/* Hero: 80% van het scherm (hoogstens 60rem); de volgende sectie kondigt zich aan. */
@media(min-width:768px){.hero{height:min(80vh,60rem)}}

/* Productpanelen: lager, en zonder breedte-animatie. */
.panels{height:32rem}
.panel{transition:none}
@media(max-width:479px){.panels{height:34rem}}
/* Witte paneeltekst: rustige donkere laag onder de tekst (onderkant), boven blijft de foto licht. */
.panel-shade{background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.5) 45%,rgba(0,0,0,.08) 85%)}

/* Aanpak: statisch en compact. Drie stappen naast elkaar, beeld boven de tekst; navigatie als rij. */
.process{grid-template-columns:1fr;gap:1.5rem}
.process-head{margin-bottom:0}
.process-nav{position:static}
.step-links{flex-direction:row;flex-wrap:wrap;min-width:0}
.step-link{width:auto}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-top:.5rem}
.step{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:1.25rem}
.step-media img{aspect-ratio:4/3;object-position:50% 12%}
.step-text{gap:.75rem}
.step .h3{font-size:1.75rem}
@media(max-width:991px){.steps{gap:1.25rem}.step .h3{font-size:1.4rem}}
@media(max-width:767px){.steps{grid-template-columns:1fr;gap:2.5rem}.step-media img{aspect-ratio:3/2}}

/* Missie: beeld vult het eigen vlak (was een vierkant vlak met een lege strook onder de foto). */
.mission-media{aspect-ratio:3/2}
.mission-image{width:100%;height:100%;object-fit:cover}

/* Tabbladen: kaart met tekst en beeld naast elkaar; alle samenvattingen altijd zichtbaar. */
@media(min-width:768px){.tab-card-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:center}.tab-img{aspect-ratio:4/3}}
.tab-summary{height:auto!important}
.js .tab-panel [data-reveal]{opacity:1;transform:none}

/* Gespreksonderwerpen (tabel) */
.center-head{padding-bottom:2rem}
.intro-text{gap:1.25rem}
.cell{padding:.875rem 1.25rem}
@media(max-width:767px){.cell{padding:.5rem .75rem}}

/* Werkwijze in cijfers */
.stats-grid{margin-top:3rem}
@media(min-width:768px){.stats-image{width:22rem}}
.stats-list{gap:1.5rem}
.stats-list .h-big{font-size:4.5rem}
@media(max-width:991px){.stats-list .h-big{font-size:3.25rem}}
@media(max-width:479px){.stats-list .h-big{font-size:2.1rem}}
@media(max-width:991px){.stats-grid{gap:2rem;margin-top:2rem}.stats-list{gap:1.5rem}}

/* Kennis op mobiel: beeld naast de tekst in plaats van drie hoge kaarten onder elkaar; het beeld blijft. */
@media(max-width:767px){.post{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:1rem;align-items:start}.post-media{aspect-ratio:1}.post-body{padding-top:0}.blog-grid{row-gap:1.5rem}}
@media(max-width:479px){.post{grid-template-columns:6.5rem minmax(0,1fr)}.post-body{min-width:0;overflow-wrap:anywhere}}

/* Gespreksslider: lager vlak */
.slider-mask{height:30rem}
@media(max-width:767px){.slider-mask{height:auto}.slide-item{min-height:36rem}}

/* Afsluiter: geen 80vh meer; de foto blijft onder de tekst zichtbaar. */
.cta{min-height:0}
.cta-content{padding-bottom:12rem}
@media(max-width:991px){.cta-content{padding-bottom:11rem}}
@media(max-width:767px){.cta-content{padding-bottom:9rem}}

/* Footer: het woord staat stil en past in beeld (was een looptekst die halverwege afbrak). */
.footer>.footer-loop{width:auto;min-width:0;max-width:calc(var(--container) + 2 * var(--gutter));margin:0 auto;padding:var(--sec) var(--gutter) 0}
.footer .loop-word{padding-right:0;animation:none}
.footer .loop-word+.loop-word{display:none}
.footer .loop-word p{font-size:clamp(4rem,9vw,7.5rem);line-height:1}
.footer>.wrap.pad{padding-block:2rem var(--sec)}
.footer-bottom{margin-top:2rem}

/* ---- Herstel 1 na review A (29-10-2026) ---- */
/* 4. Kop over de volle breedte: rustige inktbalk, inhoud uitgelijnd op de wrap. */
.nav{margin:0;padding:0}
.nav-bar{width:100%;min-width:0;max-width:none;height:4.5rem;margin:0;justify-content:space-between;padding:0 max(var(--gutter),calc((100% - var(--container)) / 2))}
.hero{margin-top:-4.5rem;padding-top:4.5rem}
.explore-panel{top:100%;left:auto;right:max(var(--gutter),calc((100% - var(--container)) / 2));width:min(46rem,calc(100% - 2 * var(--gutter)))}
.explore-inner{padding:0;margin-top:.5rem}
.explore-menu{box-shadow:0 0 0 1px var(--line),0 12px 32px rgba(0,0,0,.18)}

/* 1. Vier onderwerpen in plaats van tien lege ruitvakken. */
.topic-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;width:100%;max-width:none}
.topic-item{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;background:var(--grey-bg);text-align:left}
.topic-mark{flex:none;display:flex;width:1.5rem;height:1.5rem}
.topic-mark img{width:100%;height:100%}
.logos{align-items:stretch}
.logos .t-regular{text-align:center}
@media(max-width:991px){.topic-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:479px){.topic-list{grid-template-columns:1fr;gap:.5rem}.topic-item{padding:.75rem 1rem}}

/* 2. Tabel: ja = ✓, nee = –, met schermlezertekst; tip-knop als rustige i. Op mobiel een kaart per route. */
.check-mark{display:block;width:100%;text-align:center;font-size:1.25rem;line-height:1;font-weight:500;color:var(--ink)}
.check-mark.is-no{color:#8a8d94}
.tip-i{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:1px solid currentColor;border-radius:50%;font-size:.75rem;font-weight:600;font-style:normal;line-height:1;opacity:.45}
.route-cards{display:none}
@media(max-width:767px){
  .price-table{display:none}
  .route-cards{display:grid;gap:1rem}
}
.route-card{display:flex;flex-direction:column;gap:.75rem;padding:1.25rem;border:1px solid var(--line);background:var(--white)}
.route-card.is-grey{background:var(--grey-bg)}
.route-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.route-card .price-name{font-size:1.5rem}
.route-card .price-desc{font-size:1rem;line-height:1.5}
.route-meta{display:flex;flex-direction:column;align-items:flex-end;font-size:.875rem;line-height:1.3}
.route-meta .route-num{font-size:1.5rem;font-weight:500}
.route-meta .route-per{opacity:.7}
.route-list{display:grid;gap:.5rem}
.route-list li{display:flex;align-items:baseline;gap:.6rem;line-height:1.5}
.route-list .check-mark{display:inline;width:auto;font-size:1rem}

/* 3. Slider op mobiel: titel op de foto, kaarten en knop onder de foto. */
@media(max-width:767px){
  .slide-item{display:grid;grid-template-columns:minmax(0,1fr);gap:0;min-height:0;padding:0;background:var(--white)}
  .slide-top{display:contents}
  .slide-top>.stack{grid-area:1/1;align-self:start;position:relative;z-index:1;padding:1.5rem}
  .slide-bg{grid-area:1/1;position:relative;inset:auto;z-index:0;height:28rem}
  .slide-cards{grid-area:2/1;gap:.75rem;margin-top:.75rem}
  .slide-cta{grid-area:3/1;justify-self:start;margin-top:.75rem}
}

/* Beweging: alleen transform en opacity, kort. Geen scroll-gekoppelde zoom of parallax, geen blur, geen hoogte- of breedte-animatie.
   Kleurwissels bij hover (knoppen, links, tabbladen) blijven, kort. */
.hero-img,.cta-img{transform:none!important;will-change:auto}
.js .hero [data-reveal].is-in{transition-duration:.6s}
.tip,.tip-wrap:hover .tip,.tip-wrap:focus-within .tip{filter:none}
.tip{transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
.tip-wrap:hover .tip,.tip-wrap:focus-within .tip{transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s}
.btn{transition:filter .2s}
.tab{transition:background-color .3s,color .3s,border-color .3s}
.skip-link{transition:none;z-index:1200}
.skip-link:focus{top:36px}
.panel-bg img{transition:transform .5s var(--ease)}
/* Inhoud wacht niet op scrollen: buiten de hero is alles direct zichtbaar (de scroll-reveals zetten niets meer op onzichtbaar).
   Alleen de hero heeft nog een korte binnenkomst bij het laden. */
.js main section:not(.hero) [data-reveal],.js footer [data-reveal],.js [data-stagger] [data-step],.js [data-scroll-image] .mission-image{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-stagger] [data-step],.js [data-scroll-image] .mission-image{opacity:1!important;transform:none!important;filter:none!important}
}


/* Dak- en montagebeelden behouden hun context tijdens hover/focus. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .post:is(:hover,:focus-within) .post-media img { transform:scale(1.04); }
}
@media(prefers-reduced-motion:reduce) { .post:hover .post-media img { transform:none; } }

/* Mobiele kwaliteitsronde: een heldere dakcompositie en aanraakbare zonnestippen. */
.tip-button { min-width:44px;min-height:44px;align-items:center;justify-content:center; }
@media(max-width:767px){
 .hero { height:auto;min-height:560px; }
 .hero-content { padding:48px 0 200px;gap:20px;max-width:100%;align-items:flex-start;text-align:left; }
 .h-hero { font-size:clamp(34px,9.8vw,44px);line-height:1.08;letter-spacing:-1.1px;max-width:13ch;text-wrap:balance; }
 .hero-content .t-medium { font-size:17px;line-height:1.5;max-width:31ch; }
 .hero .btn-row { justify-content:flex-start;gap:12px;flex-wrap:wrap; }
 .hero-shade { background:linear-gradient(180deg,rgba(0,0,0,.74),rgba(0,0,0,.35) 62%,transparent); }
 .hero-img { object-position:62% 50%; }
 .slider-dots { height:48px;padding:0;gap:0; }
 .slider-dot { width:44px;height:44px;margin:0;border-radius:0;background:transparent;position:relative; }
 .slider-dot::after { content:'';position:absolute;width:8px;height:8px;border-radius:50%;background:#2226;left:18px;top:18px;transition:background-color .2s,transform .2s; }
 .slider-dot.is-active { background:transparent; }
 .slider-dot.is-active::after { background:#222;transform:scale(1.3); }
 .slider-dot:active::after { background:#b8d746;transform:scale(1.6); }
}
@media(prefers-reduced-motion:reduce){.slider-dot::after{transition:none}}

@media(max-width:767px){.slider-arrow{width:44px;height:44px}.slider-arrow.is-prev{margin-left:-124px}.slider-arrow.is-next{margin-left:80px}}