@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{
  --bg:#f7f5f0;--ink:#2d1f13;--text:#554a41;--sand:#ede6dc;--accent:#d2831a;--white:#fff;--rule:#2d1f131f;
  --h1:72px;--h2:48px;--h3:40px;--b02:22px;--b03:20px;--b04:18px;--b06:14px;
  --ls-3xl:-3px;--ls-2xl:-1.4px;--ls-s:-.4px;
  /* Original Sora is local; no tracking compensation is used. */
  --track:0em;--t5:0em;--t6:0em;
  --g07:24px;--g08:32px;--g09:36px;--g10:40px;--g11:48px;--g12:60px;--g15:100px;--g16:145px;
  --p03:30px;--p05:40px;--p06:48px;--p08:60px;--p09:80px;--p10:120px;--p12:200px;
  --r05:24px;
  --out:cubic-bezier(.25,.46,.45,.94);
}
@media (max-width:991px){:root{
  --h1:62px;--h2:42px;--h3:36px;--ls-2xl:-1.5px;
  --g08:24px;--g09:32px;--g10:36px;--g11:40px;--g12:40px;--g15:60px;--g16:80px;
  --p05:30px;--p06:40px;--p08:50px;--p09:60px;--p10:80px;--p12:140px}}
@media (max-width:767px){:root{
  --h1:52px;--h2:36px;--h3:34px;--ls-3xl:-2px;--ls-2xl:-1px;--ls-s:0px;
  --g09:24px;--g10:32px;--g11:36px;--g12:30px;--g15:40px;--g16:60px;
  --p03:20px;--p06:30px;--p08:40px;--p09:40px;--p10:60px;--p12:120px}}
@media (max-width:479px){:root{
  --h1:42px;--ls-3xl:-1.5px;--b02:18px;--b03:18px;
  --g07:20px;--g09:20px;--g10:24px;--g11:30px;--g16:40px;
  --p05:20px;--p06:20px;--r05:16px}}

*,*::before,*::after{box-sizing:border-box}
*{letter-spacing:calc(var(--ls) + var(--track))}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:auto}}
body{--ls:var(--ls-s);margin:0;background:var(--bg);color:var(--text);font-family:Sora,system-ui,sans-serif;font-size:16px;line-height:170%;font-weight:400;}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
svg{display:block}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip-link{position:absolute;left:12px;top:-60px;z-index:10001;background:var(--ink);color:var(--white);padding:12px 16px;border-radius:8px;font-size:14px;transition:top .2s;line-height:170%}
.skip-link:focus{top:12px}

/* Historical concept-bar component, retained but unused in this private replica. */
.concept-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 16px;padding:8px var(--p03);background:var(--sand);color:var(--ink);font-size:13px;line-height:130%;text-align:center}
.concept-bar a{font-weight:600;text-decoration:underline;text-underline-offset:3px;--track:var(--t6)}
.concept-bar a:hover{color:var(--accent)}
.page{position:relative}

/* knoppen */
.button{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;padding:13px 22px;border:1px solid var(--ink);border-radius:100px;background:var(--ink);text-align:center;overflow:hidden;transition:all .3s ease-in-out}
.button:hover{border-color:var(--ink)}
.button-mask{position:relative;z-index:2;display:flex;flex-direction:column;overflow:hidden}
.button-text{display:block;color:var(--white);font-size:14px;line-height:170%;font-weight:600;white-space:nowrap;--track:var(--t6)}
.button-text.is-next{position:absolute;left:0;right:0;bottom:-100%}
.button.is-white{border-color:var(--white);background:var(--white)}
.button.is-white .button-text{color:var(--ink)}
.button.is-white:hover{border-color:var(--ink)}
.button.is-glass{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff0d;border-color:#ffffff3d}
.button.is-glass:hover{border-color:var(--accent);background:var(--accent)}
.button.is-outline{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff0d;border-color:#dbd9d1}
.button.is-outline .button-text{color:var(--ink)}
.button.is-outline:hover{border-color:var(--ink)}

/* kop en navigatie */
.site-header{position:absolute;top:0;left:0;z-index:999;width:100%}
.nav-bar{position:relative;z-index:9999;width:100%;padding:16px var(--p03)}
.nav-shell{position:relative;z-index:5;width:100%;max-width:1368px;margin:0 auto;padding:8px 12px 8px 20px;border-radius:100px;background:var(--white)}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:6px;flex:none;height:30px;color:var(--ink)}
.brand-mark{width:26px;height:26px;color:var(--ink)}
.brand-name{font-size:17px;line-height:100%;font-weight:700;--ls:-.6px;--track:var(--t6)}
.nav-side{display:flex;align-items:center;justify-content:space-between;gap:36px;width:100%;max-width:910px}
.nav-menu{position:relative;display:flex;align-items:center;justify-content:flex-end;width:100%}
.nav-menu-panel{display:flex;width:100%}
.nav-menu-inner{display:flex;justify-content:flex-end;gap:24px;width:100%}
.nav-links{display:flex;align-items:center;justify-content:center;gap:36px}
.nav-link{display:block;color:var(--ink);font-size:14px;line-height:170%;font-weight:600;transition:all .3s ease-in-out;--track:var(--t6)}
.nav-link:hover{opacity:.8;color:var(--accent)}
.nav-contact{position:relative;display:flex;align-items:center;gap:16px;padding-left:24px}
.nav-divider{position:absolute;left:0;width:1px;height:24px;background:var(--ink);opacity:.2}
.phone-link{position:relative;padding-left:24px;color:var(--ink);font-size:14px;line-height:27.2px;font-weight:600;white-space:nowrap;transition:all .3s ease-in-out;--track:var(--t6)}
.phone-link svg{position:absolute;left:0;top:calc(46% - 8px);width:16px;height:16px;color:var(--accent)}
.phone-link:hover{color:var(--accent)}
.menu-button{display:none;width:30px;height:30px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.menu-button svg{width:30px;height:30px}

/* alle onderdelen (uitklapmenu) */
.pages{position:relative}
.pages-toggle{display:flex;align-items:center;gap:10px;padding:12px 0;border:0;background:none;color:var(--ink);font-size:14px;line-height:104%;font-weight:600;cursor:pointer;--track:var(--t6)}
.pages-toggle-icon{position:relative;display:flex;align-items:center;justify-content:center;width:16px;height:16px}
.pages-icon{width:16px;height:16px}
.pages-icon.is-minus{position:absolute;opacity:0}
.pages-drop{position:absolute;top:100%;left:-108px;z-index:900;display:none;width:742px;padding-top:16px}
.pages.is-open .pages-drop{display:block}
.pages-card{display:flex;gap:60px;padding:40px;overflow:hidden;border-radius:12px;background:var(--white);box-shadow:0 4px 20px #00000040}
.pages-lists{display:flex;justify-content:space-between;gap:32px;flex:1;min-width:0}
.pages-list{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.pages-link{display:block;color:var(--ink);font-size:14px;line-height:160%;font-weight:600;transition:all .3s ease-in-out;--track:var(--t6)}
.pages-link:hover,.pages-link.is-current{color:var(--accent)}
.pages-image{flex:none;width:38%;height:auto;object-fit:cover;border-radius:16px}

/* held */
.hero{position:relative;overflow:hidden;padding:var(--p12) var(--p03) var(--p08)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-image{width:100%;height:100%;object-fit:cover}
.hero-shade{position:absolute;inset:0;z-index:1;background:#2d1f1366;pointer-events:none}
.hero-inner{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--g11);height:100%}
.hero-stack{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--g16);width:100%}
.hero-top{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:var(--g08);max-width:970px;margin:0 auto;text-align:center}
.title-group{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.title-group.is-center{align-items:center;margin:0 auto;text-align:center}
.title-group.is-narrow{max-width:472px}
.hero-title{--ls:var(--ls-3xl);color:var(--white);font-size:var(--h1);line-height:112%;font-weight:600;--track:var(--t6)}
.hero-text{max-width:570px;color:var(--white);opacity:.9}
.hero-buttons{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.hero-ratings{display:flex;align-items:flex-end;justify-content:center;gap:var(--g08)}
.rating{display:flex;flex-direction:column;align-items:center;gap:14px}
.rating-brand{display:flex;align-items:center;gap:6px;color:var(--white);font-size:20px;line-height:25px;font-weight:600;--track:var(--t6)}
.rating-brand svg{width:24px;height:24px}
.rating+.rating .rating-brand{line-height:31px}
.rating-pill{display:flex;align-items:center;gap:4px;padding:7px 10px;border-radius:32px;background:#ffffff12;font-size:16px;line-height:23.8px}
.rating-pill>span{font-size:14px;line-height:170%}
.rating-pill svg{width:18px;height:18px}
.rating-score{color:var(--white);font-weight:600;--track:var(--t6)}
.rating-count{color:var(--white);opacity:.8}

/* beloften onder de held */
.promises{padding:0 var(--p03)}
.promises-inner{padding:var(--p08) 0;border-bottom:1px solid var(--rule)}
.promise-grid{display:flex;justify-content:space-between;gap:var(--g07)}
.promise{display:flex;align-items:flex-start;gap:var(--g07)}
.promise-icon{display:flex;align-items:center;justify-content:center;flex:none;width:52px;height:52px;border-radius:100px;background:var(--white);color:var(--accent)}
.promise-icon svg{width:24px;height:24px}
.promise-body{display:flex;flex-direction:column;gap:8px}
.promise-title{color:var(--ink);font-weight:600;text-transform:uppercase;--track:var(--t6)}
.promise-text{max-width:300px;opacity:.8}

/* gedeelde sectieopbouw */
.wide{position:relative;z-index:5;width:100%;max-width:1400px;margin:0 auto}
.wide.is-small{max-width:1320px}
.pad{padding:var(--p10) var(--p03)}
.pad-bottom{padding:0 var(--p03) var(--p10)}
.stack{display:flex;flex-direction:column;gap:var(--g12);width:100%}
.h2{--ls:var(--ls-2xl);color:var(--ink);font-size:var(--h2);line-height:120%;font-weight:600;--track:var(--t6)}
.h2.is-light{color:var(--white)}
.lead{color:var(--text);opacity:.8}
.lead.is-solid{opacity:1}
.lead.is-light{color:var(--white);opacity:1}
.lead.is-process,.lead.is-blog{max-width:520px}
.lead.is-faq{max-width:315px}
.accent{color:var(--accent)}
.center-row{display:flex;justify-content:center}
.plane{display:flex;align-items:flex-end;width:100%;height:100%;padding:16px}
.plane.is-sand{background:#e6ddcf}
.plane.is-clay{background:#d8c2a4}
.plane.is-stone{background:#d3cdc3}
.plane-label{color:var(--ink);opacity:.7;font-size:13px;line-height:130%;font-weight:500;--track:var(--t5)}

/* kaarten met pijl (diensten en artikelen) */
.arrow-dot{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:42px;height:42px;overflow:hidden;border-radius:100px;background:var(--white)}
.arrow-dot svg{width:16px;height:16px}
.arrow-a{color:var(--ink)}
.arrow-b{position:absolute;left:-20px;bottom:-20px;color:var(--white)}

/* diensten */
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g07)}
.service-card{display:flex;flex-direction:column;align-items:flex-start;gap:20px;width:100%}
.service-media{display:block;width:100%;height:382px;overflow:hidden;border-radius:16px}
.service-media>*{width:100%;height:100%;object-fit:cover}
.service-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--g07);width:100%;padding-bottom:20px}
.service-title{max-width:150px;color:var(--ink);font-size:var(--b02);line-height:130%;font-weight:600;--track:var(--t6)}
.service-line{position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--rule)}
.service-line span{display:block;width:0;height:100%;background:var(--ink)}

/* ons verhaal */
.story{border-radius:var(--r05);background:var(--white)}
.story-row{display:flex;justify-content:center;gap:var(--g07)}
.story-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:var(--g10);width:45%;max-width:634px;padding:var(--p05);overflow:hidden;border-radius:16px;background:var(--ink)}
.story-top{display:flex;flex-direction:column;align-items:flex-start;gap:var(--g08);max-width:505px}
.story-intro{color:var(--white);font-size:var(--b02);line-height:130%;font-weight:600;--track:var(--t6)}
.story-text{color:var(--white);opacity:.8}
.story-media{position:relative;display:flex;width:55%}
.story-image{width:100%;height:auto;min-height:100%;aspect-ratio:1484/1402;object-fit:cover;border-radius:16px}
.counter-grid{position:absolute;left:0;bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:20px;width:100%;padding:var(--p03)}
.counter{display:flex;flex-direction:column;align-items:flex-start;gap:var(--g11);padding:var(--p03);border-radius:16px;background:var(--white)}
.counter-head{display:flex;flex-direction:column}
.counter-number{--ls:var(--ls-2xl);color:var(--ink);font-size:var(--h3);line-height:120%;font-weight:600;--track:var(--t6)}
.counter-plus{color:var(--accent)}
.counter-label{color:var(--ink)}
.counter-text{font-size:14px;line-height:170%}

/* reviews */
.review-columns{column-count:3;column-gap:var(--g07)}
.review{display:flex;flex-direction:column;align-items:flex-start;gap:var(--g10);margin-bottom:var(--g07);padding:var(--p03);border-radius:16px;background:var(--white);break-inside:avoid}
.review-top{display:flex;align-items:center;gap:8px}
.review-mark{width:36px;height:36px}
.stars{display:flex;align-items:center;gap:4px}
.stars svg{width:20px;height:20px}
.review-body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--g07)}
.review-quote{font-size:var(--b04);line-height:170%}
.review-author{display:flex;align-items:center;gap:12px}
.review-photo,.review-initials{flex:none;width:52px;height:52px;border-radius:100px;object-fit:cover;object-position:50% 0}
.review-initials{display:flex;align-items:center;justify-content:center;background:var(--sand);color:var(--ink);font-size:16px;font-weight:600;--track:var(--t6);line-height:170%}
.review-who{display:flex;flex-direction:column;align-items:flex-start}
.review-name{color:var(--ink);font-weight:600;--track:var(--t6)}
.review-role{font-size:14px;line-height:170%}

/* gebouwd op vertrouwen */
.trust{background:var(--white)}
.trust-row{display:flex;align-items:center;justify-content:space-between;gap:var(--g12)}
.trust-media{position:relative;width:52%;max-width:640px}
.trust-image{width:100%;height:auto;aspect-ratio:640/681;object-fit:cover;border-radius:16px}
.trust-stat{position:absolute;left:20px;bottom:20px;display:flex;flex-direction:column;width:100%;max-width:255px;padding:20px;border-radius:16px;background:var(--white)}
.trust-number{--ls:var(--ls-2xl);color:var(--ink);font-size:var(--h3);line-height:120%;font-weight:600;--track:var(--t6)}
.trust-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--g12);width:48%;max-width:536px}
.trust-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:var(--g09)}
.benefits{display:flex;flex-direction:column;align-items:flex-start;gap:var(--g07);max-width:420px}
.benefit{display:flex;align-items:flex-start;gap:20px}
.benefit-icon{flex:none;width:24px;height:24px;margin-top:7px;color:var(--accent)}
.benefit-body{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.benefit-title{color:var(--ink);font-size:var(--b02);line-height:160%;font-weight:600;--track:var(--t6)}
.benefit-text{font-size:14px;line-height:170%}

/* werkwijze */
.process{position:relative;overflow:hidden;background:linear-gradient(#0006,#0006),url("assets/eigen/maatvast-proces-v5.webp") 50%/cover no-repeat}
.steps{display:grid;grid-template-columns:repeat(4,1fr);align-items:start;gap:var(--g07)}
.step{display:flex;flex-direction:column;align-items:flex-start;gap:160px;padding:var(--p03);border-radius:16px;background:var(--white)}
.step.is-low{margin-top:100px}
.step-number{color:var(--accent);font-size:var(--b04);line-height:120%;font-weight:600;--track:var(--t6)}
.step-body{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.step-title{color:var(--ink);font-size:var(--b03);font-weight:600;--track:var(--t6);line-height:170%}
.step-text{color:var(--text);opacity:.8;font-size:14px;line-height:170%}

/* artikelen */
.post-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g07)}
.post-card{display:flex;flex-direction:column;align-items:flex-start;gap:20px;width:100%}
.post-media{display:block;width:100%;height:382px;overflow:hidden;border-radius:16px}
.post-media>*{width:100%;height:100%;object-fit:cover}
.post-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;width:100%}
.post-text{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}
.post-title{color:var(--ink);line-height:130%;font-weight:600;--track:var(--t6)}
.post-date{color:var(--text);opacity:.8;font-size:14px;line-height:170%}

/* vragen */
.faq-area{display:flex;flex-direction:column;align-items:center;gap:var(--g10)}
.faq-list{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:950px;margin:0 auto}
.faq-item{display:flex;flex-direction:column;width:100%}
.faq-heading{font:inherit}
.faq-question{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;width:100%;padding:20px;border:0;border-radius:12px;background:var(--white);text-align:left;cursor:pointer}
.faq-question-text{color:var(--ink);line-height:160%}
.faq-icon{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;overflow:hidden;color:var(--ink)}
.faq-plus{width:28px;height:28px}
.faq-plus.is-active{position:absolute;opacity:0;color:var(--accent)}
.faq-answer{overflow:hidden}
.js .faq-answer{height:0}
.faq-answer-inner{padding:20px 20px 10px}
.faq-answer p{max-width:750px;font-size:14px;line-height:170%}
.faq-more{color:var(--text);font-size:14px;line-height:170%}
.faq-more-link{color:var(--ink);font-weight:600;transition:all .3s ease-in-out;--track:var(--t6)}
.faq-more-link:hover{color:var(--accent)}

/* afsluiter */
.cta-card{overflow:hidden;border-radius:16px}
.cta-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Historical image layer; original background painting overrides it below. */
.cta-card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(#2d1f1359,#2d1f1300 62%),#0000000a}
.cta-content{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--g07);padding:var(--p09) var(--p03) 350px}
.cta-titles{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.cta-text{max-width:440px;color:var(--white);opacity:.8}
.cta-facts{position:relative;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--g07);padding:16px var(--p03);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);background:#2d1f1399;text-align:center}
.cta-facts li{color:var(--white);font-size:14px;font-weight:600;text-transform:uppercase;--track:var(--t6);line-height:170%}
.cta-facts .cta-dot{flex:none;width:6px;height:6px;border-radius:100px;background:var(--white)}

/* voet */
.footer{position:relative;overflow:hidden;padding:0 var(--p03) var(--p06)}
.footer-stack{display:flex;flex-direction:column;justify-content:space-between;gap:var(--g15)}
.footer-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--g12)}
.footer-contact{display:flex;flex-direction:column;align-items:flex-start;gap:var(--g07)}
.footer-call{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.footer-small{font-size:14px;line-height:170%}
.footer-phone{position:relative;padding-left:30px;color:var(--ink);font-size:var(--b03);line-height:27.2px;font-weight:600;transition:all .3s ease-in-out;--track:var(--t6)}
.footer-phone svg{position:absolute;left:0;top:calc(50% - 11px);width:22px;height:22px;color:var(--accent)}
.footer-phone:hover{color:var(--accent)}
.footer-visit{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.footer-address{max-width:250px;color:var(--text)}
.footer-columns{display:flex;justify-content:space-between;gap:var(--g10);width:60%;max-width:725px}
.footer-column{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.footer-heading{color:var(--text);opacity:.7;font-size:14px;text-transform:uppercase;line-height:170%}
.footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.footer-link{display:block;color:var(--ink);opacity:.9;font-size:14px;line-height:170%;font-weight:500;transition:all .3s ease-in-out;--track:var(--t5)}
.footer-link:hover{opacity:1;color:var(--accent)}
.footer-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--g12);border-top:1px solid #ffffff1f}
.footer-brand{display:flex;align-items:center;gap:8px;height:40px;color:var(--ink)}
.footer-brand .brand-mark{width:34px;height:34px}
.footer-brand .brand-name{font-size:23px;--ls:-.8px;line-height:170%}
.footer-end{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.socials{display:flex;align-items:center;gap:16px}
.social{color:var(--ink)}
.social svg{width:14px;height:14px}
.copyright{color:var(--ink);opacity:.7;font-size:14px;line-height:170%}
.copyright-link{transition:all .3s ease-in-out}
.copyright-link:hover{color:var(--accent)}

/* ---- tablet en kleiner (≤ 991 px) ---- */
@media (max-width:991px){
  .nav-bar{position:relative}
  .nav-shell{position:static;padding-right:20px}
  .nav-row{gap:24px}
  .brand{height:35px}
  .brand-mark{width:30px;height:30px}
  .brand-name{font-size:19px;line-height:170%}
  .nav-side{justify-content:flex-end}
  .menu-button{display:flex}
  .nav-menu{position:absolute;left:0;right:0;top:100%;z-index:999;display:none;overflow:hidden}
  .nav-menu.is-open{display:block}
  .nav-menu-panel{padding:10px 30px 0;transform:translateY(-100%);transition:transform .4s ease}
  .nav-menu.is-shown .nav-menu-panel{transform:none}
  .nav-menu-inner{flex-direction:column;align-items:flex-start;gap:24px;padding:30px;border:1px solid #0000001a;border-radius:8px;background:var(--white);box-shadow:0 0 20px #0000001a}
  .nav-links{flex-direction:column;align-items:flex-start;gap:14px;width:100%}
  .nav-links>li{width:100%}
  .pages-toggle{width:100%;padding:0}
  .pages-drop{position:static;width:100%;padding-top:14px}
  .pages-card{flex-direction:column;gap:32px;padding:30px}
  .pages-lists{width:100%}
  .pages-image{width:100%;height:220px}
  .nav-contact{padding-left:0}
  .nav-divider{display:none}

  .hero{background:linear-gradient(#05071e0d,#05071e73 28%,#05071ebf),url("assets/eigen/maatvast-hero-licht-v4.webp") 50%/cover no-repeat}
  .hero-media{display:none}
  .hero-top{max-width:700px}
  .hero-inner{height:auto}

  .promise-grid{display:grid;grid-template-columns:1fr 1fr;justify-content:center;gap:var(--g07)}

  .service-grid,.post-grid{grid-template-columns:1fr 1fr}

  .story-row{flex-direction:column}
  .story-card{width:100%;max-width:none}
  .story-top{max-width:none}
  .story-media{display:block;width:100%}
  .story-image{min-height:0}

  .review-columns{column-count:2}

  .trust-row{flex-direction:column-reverse}
  .trust-media,.trust-content{width:100%;max-width:none}
  .lead.is-wide,.lead.is-blog{max-width:550px}
  .benefits{display:grid;grid-template-columns:1fr 1fr;gap:var(--g07);max-width:none}

  .steps{grid-template-columns:1fr 1fr;align-items:stretch}
  .step{justify-content:space-between;gap:100px;height:100%}
  .step.is-low{margin-top:0}

  .cta-content{padding-bottom:120px}

  .footer-top{flex-direction:column}
  .footer-columns{width:100%;max-width:none}
  .footer-address{max-width:300px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .footer-end{align-items:flex-start}
}

/* ---- telefoon liggend (≤ 767 px) ---- */
@media (max-width:767px){
  .nav-menu-panel{padding:10px 20px 0}
  .nav-menu-inner{padding:20px}
  .nav-contact{flex-wrap:wrap}
  .pages-card{height:400px;padding:20px;overflow:auto}
  .service-media{height:360px}
  .post-media{height:360px}
  .cta-content{padding-bottom:100px}
}

/* ---- telefoon (≤ 479 px) ---- */
@media (max-width:479px){
  .brand{height:30px}
  .brand-mark{width:26px;height:26px}
  .brand-name{font-size:16px;line-height:170%}
  .pages-card{padding:16px}
  .pages-lists{flex-direction:column;gap:12px}
  .pages-image{border-radius:10px}
  .hero-ratings{flex-wrap:wrap}
  .promise-grid{row-gap:var(--g11)}
  .promise{flex-direction:column}
  .promise.is-last{grid-column:span 2}
  .service-grid,.post-grid{grid-template-columns:1fr}
  .service-media,.post-media{height:340px}
  .counter-grid{position:static;grid-template-columns:1fr;padding:var(--p03) 0 0}
  .counter{background:var(--bg)}
  .review-columns{display:grid;grid-template-columns:1fr;gap:var(--g07)}
  .review{margin-bottom:0}
  .benefits,.steps{grid-template-columns:1fr}
  .step{gap:40px}
  .cta-content{padding-bottom:60px}
  .cta-facts .cta-dot{display:none}
  .footer-columns{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--g07);row-gap:var(--g10)}
}

/* laad- en scrollbeweging (JavaScript zet de beginstand; zonder JS is alles zichtbaar) */
.js [data-fade]{opacity:0}
.js.no-anim [data-load],.js.no-anim [data-fade]{opacity:1}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js [data-load],.js [data-fade]{opacity:1}
  .nav-menu-panel{transition:none}
}

/* Measured corrections, 2026-10-23: original Sora, reference assets, no concept banner. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reference-logo{width:100%;height:auto}.brand{width:131px;height:auto}.footer-brand{width:131px;height:auto}
.promise-icon img{width:24px;height:24px}.arrow-dot img{width:16px;height:16px}
.rating-brand{height:auto}.rating-logo{max-width:none}.rating-pill>img{width:auto;height:auto}.rating-score{margin-left:-4px}
.review-top .review-mark{width:36px;height:36px}.stars img{width:20px;height:20px}
.cta-card::before{background:#0000000a}.social-icon{width:14px;height:14px}
.menu-button img{width:30px;height:30px}.pages-icon{width:16px;height:16px}
@media(max-width:991px){.brand{width:150px;height:auto}}
@media(max-width:479px){.brand{width:130px;height:auto}}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}.hero-media{background-position:center;background-size:cover}}

/* Component corrections after comparison */
.review-top .review-mark{width:36px;height:auto}.stars{gap:0}.stars img{width:24px;height:24px}
.footer-brand{width:175px}.menu-button{min-width:30px;flex-shrink:0;font-size:24px;line-height:170%}
.rating-pill{line-height:27.2px}.faq-icon{flex-shrink:1;min-width:0}.faq-plus{max-width:100%}

/* Original phone icons and motion poster */
.phone-link{background:url("assets/eigen/pijl.svg") 0 46% no-repeat}.footer-phone{background:url("assets/eigen/pijl.svg") 0 50% no-repeat}
.hero-media{background-image:url("assets/eigen/maatvast-hero-licht-v4.webp");background-size:cover;background-position:center}

/* Rating text follows its own 14px/170% line box. */
.rating-pill>span{line-height:170%}

.copyright-link{font-size:16px;line-height:inherit}
.copyright-link{font-size:16px;line-height:23.8px}

/* Reference controls retain their appearance, with all external actions disabled. */
.reference-promo{position:fixed;right:24px;bottom:24px;z-index:11;display:flex;flex-direction:column;align-items:stretch;gap:4px;width:auto}
.promo-link{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;background:#112c23;border-radius:12px}
.promo-0{gap:8px;border:1px solid #3b3b3b4d;background:white}.promo-1{background:#ff6c1f}
.promo-label{font-family:Sora,sans-serif;font-size:15px;font-weight:500;line-height:170%;color:white}.promo-0 .promo-label{color:black}
.promo-icons{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:18px;height:18px;overflow:hidden}
.promo-icon{width:auto;height:18px;max-width:none}.promo-icon-next{position:absolute;top:30px}

.badge-mark{width:26px;margin-right:4px}.badge-text{width:118px}

.nav-link.is-current{color:var(--accent)}.social-reference{position:relative;display:flex;align-items:center;justify-content:center}.social-icon-hover{position:absolute;opacity:0;transition:opacity .3s ease-in-out}.social-reference:hover .social-icon-hover,.social-reference:focus-visible .social-icon-hover{opacity:1}

@media(max-width:991px){.nav-menu-panel{transform:translateY(calc(-100% - var(--nav-height, 78px)))}.nav-menu.is-shown .nav-menu-panel{transform:none}}
.menu-button{line-height:27.2px}

/* Match the original background painting and backdrop-filter sampling. */
.cta-card{background-image:linear-gradient(#0000000a,#0000000a),url("assets/eigen/maatvast-oproep-v5.webp");background-position:0 0,50%;background-repeat:repeat,no-repeat;background-size:auto,cover}.cta-image,.cta-card::before{display:none}
/* Responsive source variants have slightly different intrinsic aspect ratios. */
.story-image,.trust-image{aspect-ratio:auto}

/* 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,.footer-brand{width:180px;max-width:45vw}.reference-logo{width:100%;height:auto}.button-text{white-space:nowrap}.phone-link{background:none}@media(max-width:479px){.brand{width:150px}.button{max-width:100%}.button-mask{max-width:100%}.hero-title{overflow-wrap:normal}}

.inner-hero-content,.inner-hero .title-group{min-width:0;max-width:100%;width:100%}.inner-hero .hero-title{overflow-wrap:anywhere}

/* Eigen proceslabels en contactlinks blijven op mobiel leesbaar, zonder inhoud te bedekken. */
.hero-ratings .rating-brand{font-size:12px;line-height:1.4;color:white;opacity:.85;height:auto}
@media(max-width:767px){.reference-promo{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;padding:16px;gap:6px}.promo-link{padding:8px}.promo-label{font-size:13px}}

/* Proefbatch 27-10: compacte, leesbare stappen in de hero. */
body[data-route="/"] .hero-ratings .rating-pill{gap:8px;white-space:nowrap;justify-content:center}
body[data-route="/"] .hero-ratings .rating-pill>img{width:28px;height:16px;object-fit:contain;flex:none}
body[data-route="/"] .hero-ratings .rating-score{margin-left:0}
body[data-route="/"] .hero-ratings .rating-brand{line-height:1.4}

/* Review ronde 3: conceptlinks volgen de homepage, zonder tekst af te dekken. */
body[data-route="/"] .reference-promo{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;padding:16px;gap:8px}

/* Contactroute: dezelfde conceptlinks mogen het formulier niet bedekken. */
body[data-route="/contact"] .reference-promo{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;padding:16px;gap:8px}
/* Beeld/mobielronde27-10: drie leesbare werkafspraken, zonder herhaalde portretten. */
body[data-route="/"] #reviews .review-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-count:auto;gap:20px}
body[data-route="/"] #reviews .review{margin:0;gap:20px;padding:28px}
body[data-route="/"] #reviews .review-top{align-items:flex-start;gap:12px}
body[data-route="/"] .agreement-number{font-size:14px;font-weight:600;color:#9a5915;line-height:1.6}
body[data-route="/"] .agreement-title{font-size:20px;font-weight:600;line-height:1.35;color:var(--ink);margin:0}
body[data-route="/"] #reviews .review-quote{font-size:15px;line-height:1.65}
body[data-route="/"] .trust-stat{max-width:280px}
body[data-route="/"] .trust-number:empty{display:none}
@media(max-width:767px){
 body[data-route="/"] .pad{padding-top:56px;padding-bottom:56px}
 body[data-route="/"] .pad-bottom{padding-bottom:56px}
 body[data-route="/"] .stack{gap:28px}
 body[data-route="/"] #reviews .review-columns{grid-template-columns:1fr;gap:12px}
 body[data-route="/"] #reviews .review{padding:22px;gap:12px}
 body[data-route="/"] .story-card{padding:24px;gap:24px}
 body[data-route="/"] .story-top{gap:16px}
 body[data-route="/"] .counter-grid{grid-template-columns:1fr 1fr;gap:12px}
 body[data-route="/"] .counter{padding:16px;gap:16px}
 body[data-route="/"] .counter-text{display:none}
 body[data-route="/"] .step{gap:24px;padding:22px}
 body[data-route="/"] .steps{gap:12px}
 body[data-route="/"] .step-body{gap:8px}
 body[data-route="/"] #blog .post-grid{grid-template-columns:1fr;gap:20px}
 body[data-route="/"] #blog .post-card{display:grid;grid-template-columns:108px minmax(0,1fr);gap:16px;align-items:center}
 body[data-route="/"] #blog .post-media{height:118px;border-radius:12px}
 body[data-route="/"] #blog .post-row{gap:8px;align-items:center}
 body[data-route="/"] #blog .post-text{gap:8px}
 body[data-route="/"] #blog .post-title{font-size:16px}
 body[data-route="/"] #blog .post-date{font-size:12px}
 body[data-route="/"] #blog .arrow-dot{width:28px;height:28px}
}
@media(max-width:479px){
 body[data-route="/"] #diensten .service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
 body[data-route="/"] #diensten .service-card{gap:12px}
 body[data-route="/"] #diensten .service-media{height:180px;border-radius:12px}
 body[data-route="/"] #diensten .service-row{gap:6px;padding-bottom:12px;align-items:flex-start}
 body[data-route="/"] #diensten .service-title{font-size:14px;line-height:1.4;max-width:100%}
 body[data-route="/"] #diensten .arrow-dot{width:26px;height:26px}
 body[data-route="/"] .hero-ratings{gap:20px}
}
@media(max-width:359px){body[data-route="/"] #diensten .service-media{height:148px}body[data-route="/"] #diensten .service-title{font-size:13px}body[data-route="/"] #blog .post-card{grid-template-columns:86px minmax(0,1fr);gap:12px}body[data-route="/"] #blog .post-media{height:106px}}

/* Alleen hero-v4: zonnige randen behouden, lokale leeszone achter witte tekst. */
body[data-route="/"] .hero-media{background-image:url("assets/eigen/maatvast-hero-licht-v4.webp");background-position:50% 50%}
body[data-route="/"] .hero-video{object-position:50% 50%}
body[data-route="/"] .hero-shade{background:radial-gradient(ellipse at 50% 40%,rgba(35,26,17,.58) 0%,rgba(35,26,17,.40) 34%,rgba(35,26,17,.12) 70%,rgba(35,26,17,.04) 100%)}
body[data-route="/"] .hero-text{color:#fff;opacity:1;text-shadow:0 1px 8px #241b1455}
body[data-route="/"] .hero-title{text-shadow:0 2px 18px #241b1433}
@media(max-width:991px){body[data-route="/"] .hero{background:url("assets/eigen/maatvast-hero-licht-v4.webp") 58% 50%/cover no-repeat}body[data-route="/"] .hero-shade{background:linear-gradient(180deg,rgba(35,26,17,.04),rgba(35,26,17,.54) 20%,rgba(35,26,17,.48) 65%,rgba(35,26,17,.30))}}
body[data-route="/"] .hero-ratings .rating{background:rgba(35,26,17,.68);padding:10px 14px;border-radius:16px;gap:4px}
body[data-route="/"] .hero-ratings .rating-brand{opacity:1}
body[data-route="/"] .hero-ratings .rating-pill{background:transparent;padding:4px 0}

/* Fotocollectie v5: ieder inhoudelijk homepagebeeld een eigen onderwerp. Hero intact. */
body[data-route="/"] .process{background-image:linear-gradient(rgba(35,26,17,.46),rgba(35,26,17,.46)),url("assets/eigen/maatvast-proces-v5.webp");background-position:center;background-size:cover}
body[data-route="/"] .story-image{object-position:52% 45%}
body[data-route="/"] .trust-image{object-position:50% 50%}
body[data-route="/"] .cta-image{object-position:50% 50%}
body[data-route="/"] .cta-card::before{background:linear-gradient(180deg,rgba(25,22,16,.66),rgba(25,22,16,.44) 48%,rgba(25,22,16,.08) 85%)}
/* Deze implementatie presenteert de CTA-foto als CSS-achtergrond, ook op subroutes. */
.cta-card{background-image:linear-gradient(180deg,rgba(25,22,16,.66),rgba(25,22,16,.44) 48%,rgba(25,22,16,.08) 85%),url("assets/eigen/maatvast-oproep-v5.webp");background-position:0 0,50% 50%;background-repeat:no-repeat;background-size:cover}

/* Review: gelijke titelzone per mobiele dienstenrij, ook bij één tekstregel. */
@media(max-width:991px){body[data-route="/"] #diensten .service-title{min-height:2.6em}body[data-route="/"] #diensten .service-row{align-items:center}}
@media(max-width:479px){body[data-route="/"] #diensten .service-title{min-height:2.8em}}

/* Lay-outronde 29-10-2026 */
/* Doel: vaste sectieruimte (96/64/48), leesbare tekstmaten (16/15 px), logo 28/26/24/22 px,
   kortere iPad-pagina zonder inhoud te schrappen, beweging alleen transform/opacity.
   Breekpunten van het template: desktop >= 992, iPad 768-991, mobiel <= 767 (klein <= 479). */

/* Regel 4: sectieruimte. --p10 is de sectiemaat van .pad/.pad-bottom op alle routes. */
:root{--p10:96px;--kop-inhoud:48px}
@media(max-width:991px){:root{--p10:64px;--kop-inhoud:40px}}
@media(max-width:767px){:root{--p10:48px;--kop-inhoud:32px}}
.pad{padding-top:var(--p10)!important;padding-bottom:var(--p10)!important}
.pad-bottom{padding-bottom:var(--p10)!important}
body[data-route^="/blogs/"] .blog.pad{margin-bottom:var(--p10)!important}
/* Vaste afstanden binnen een sectie: kop -> tekst 16 px, kopgroep -> inhoud 48/40/32 px. */
.title-group{gap:16px}
.stack,body[data-route="/"] .stack,.trust-content,.faq-area{gap:var(--kop-inhoud)}

/* Regel 7: logo blijft de vector-svg; hoogte 28 (desktop), 26 (iPad), 24 / 22 / 20 px (mobiel). */
.brand,.footer-brand{width:auto!important;max-width:none!important}
.brand .reference-logo{width:auto;height:28px}
.footer-brand .reference-logo{width:auto;height:28px}
@media(max-width:991px){.brand .reference-logo{height:26px}}
@media(max-width:767px){.brand .reference-logo,.footer-brand .reference-logo{height:24px}}
@media(max-width:479px){.brand .reference-logo{height:22px}}
@media(max-width:359px){.brand .reference-logo{height:20px}}

/* Regel 5: lopende tekst >= 16 px (desktop/iPad) en >= 15 px (mobiel), regelhoogte 1,6.
   Labels, knoppen en metadata blijven 12-14 px. */
.counter-text,.benefit-text,.step-text,.faq-answer p,.faq-more,.footer-small,.copyright,
body[data-route="/"] #reviews .review-quote{font-size:16px!important;line-height:1.6!important}
.concept-credit{font-size:16px;line-height:1.5;padding:16px 0;max-width:1400px;margin-inline:auto}
@media(max-width:767px){
 .counter-text,.benefit-text,.step-text,.faq-answer p,.faq-more,.footer-small,.copyright,
 body[data-route="/"] #reviews .review-quote{font-size:15px!important}
 .concept-credit{font-size:15px}
 /* De uitleg bij de twee tellers was op mobiel verborgen; nu zichtbaar. */
 body[data-route="/"] .counter-text{display:block}
}
@media(max-width:479px){body[data-route="/"] .counter-grid{grid-template-columns:1fr}}

/* Regel 3: lengte. iPad (768-991) had beelden van 382 px hoog in twee kolommen en
   portretfoto's over de volle breedte; zelfde beelden, lagere uitsnede. */
@media(min-width:768px) and (max-width:991px){
 .service-media{height:240px}
 .post-media{height:260px}
 /* Dienstnamen passen hier op één regel; de vaste titelzone van twee regels is voor mobiel. */
 body[data-route="/"] #diensten .service-title{max-width:none;min-height:0}
 .story-image{height:430px;min-height:0}
 .trust-image{height:420px}
 .step{gap:48px}
}
@media(min-width:480px) and (max-width:767px){.service-media,.post-media{height:260px}}

/* Regel 1: de conceptknoppen (Fictief concept / Onze werkwijze / Bespreek je plan) zweefden op
   subpagina's rechtsonder over de inhoud; nu overal een rij onder de footer, zoals op start en contact. */
.reference-promo{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;padding:16px;gap:8px}

/* Regel 4 op artikelpagina's: koppen, alinea's en lijst hadden geen onderlinge ruimte en de
   genummerde lijst stond in twee kolommen met afgesneden nummers. Vaste afstanden, één kolom. */
body[data-route^="/blogs/"] .article-richtext{display:flex;flex-direction:column;gap:16px}
body[data-route^="/blogs/"] .article-richtext :is(h2,h3){margin-top:24px!important}
body[data-route^="/blogs/"] .article-richtext > :first-child{margin-top:0!important}
body[data-route^="/blogs/"] .article-richtext p{margin:0!important}
body[data-route^="/blogs/"] .article-richtext ul{display:block!important;margin:0!important;padding-left:28px!important;list-style:decimal outside!important}
body[data-route^="/blogs/"] .article-richtext li{display:list-item;padding-left:4px!important;margin-bottom:8px!important;line-height:1.6!important}

/* Regel 2: beweging. Inhoud met data-fade is altijd zichtbaar; site.js geeft alleen nog
   een korte verschuiving (transform, 0,5 s). De werkwijzekaarten bewegen niet meer met de scroll.
   De onderlijn van dienstkaarten groeit via transform in plaats van width. */
.js [data-fade]{opacity:1}
.service-line span{width:100%;transform:scaleX(0);transform-origin:left center}

/* Regel 9: donkere laag in de werkwijze alleen achter kop en intro; de witte kaarten dragen
   zelf hun tekst. Zelfde foto. */
body[data-route="/"] .process{background-image:linear-gradient(180deg,rgba(35,26,17,.62) 0,rgba(35,26,17,.52) 300px,rgba(35,26,17,.2) 520px,rgba(35,26,17,.16) 100%),url("assets/eigen/maatvast-proces-v5.webp")}
/* 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; }
}

/* Gerichte polish 30-10-2026: rustige leeslengte voor open FAQ-antwoorden. */
.faq-answer p { max-width: 68ch; }

/* Mobiele kwaliteitsronde: Maatvast — bouwvolgorde als warme, compacte tijdlijn. */
@media(max-width:991px){.menu-button,.menu-btn{min-width:44px;min-height:44px}}
@media(max-width:767px){
 body[data-route="/"] .process .steps{display:block;border-left:1px solid #ffffff80;margin-left:16px;padding-left:24px}
 body[data-route="/"] .process .step{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;border-radius:0 16px 16px 0;padding:22px 18px;margin:0 0 12px}
 body[data-route="/"] .process .step-number{font-size:18px}
 body[data-route="/"] .process .step-body{gap:8px}
 body[data-route="/"] .story-card{border-radius:0 28px 28px 0;border-left:4px solid var(--accent)}
 body[data-route="/"] #reviews .review{border-radius:0;background:transparent;border-top:1px solid #b7ab9c;padding:24px 0}
 body[data-route="/"] #diensten .service-grid{gap:28px 16px}
 body[data-route="/"] #diensten .service-grid > li:first-child{grid-column:1/-1}
 body[data-route="/"] #diensten .service-grid > li:first-child .service-card .service-media{height:230px}
 body[data-route="/"] #diensten .service-grid > li:first-child .service-card .service-title{font-size:20px}
}

/* Reserveer beeldruimte vóór lazy decoding, ook op diensten-subroutes. */
@media(max-width:767px){.trust-image{aspect-ratio:4/5;height:auto}.post-media img{aspect-ratio:4/3}}