@font-face{font-family:Inter;src:url("assets/fonts/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}




:root {
  --ink: #0f110f;
  --white: #fff;
  --green: #02cd31;
  --mint: #d0f2d9;
  --mint-bg: #f0fcf3;
  --line: #e5ebe7;
  --sub: #353635;
  --sub2: #606060;
  --sub3: #8c8c8c;
  --dark-sub: #dae1dc;
  --night: #1a1c1a;
  --night-line: #262a27;

  
  --ease: cubic-bezier(.25, .1, .25, 1);
  --out-quart: cubic-bezier(.165, .84, .44, 1);
  --out-cubic: cubic-bezier(.215, .61, .355, 1);
  --in-out: cubic-bezier(.42, 0, .58, 1);

  /* Urbanist loopt ca. 3,5 % smaller dan het origineel; deze letterafstand houdt de regelval gelijk */
  --ls: 0em;

  --wrap: 1200px;
  --gut: 48px;
  --sec: 124px;
  --half: 62px;

  --h1: 64px;
  --h2: 56px;
  --h3: 40px;
  --h4: 32px;
  --h5: 24px;
  --h6: 20px;
  --body: 18px;
  --large: 18px;
  --small: 16px;
  --xsmall: 16px;

  --s4: 4px;
  --s8: 8px;
  --s12: 12px;
  --s16: 16px;
  --s20: 20px;
  --s24: 24px;
  --s32: 32px;
  --s40: 40px;
  --s48: 48px;
  --s50: 50px;
  --s80: 80px;

  --g4: 4px;
  --g8: 8px;
  --g10: 10px;
  --g12: 12px;
  --g16: 16px;
  --g20: 20px;
  --g24: 24px;
  --g32: 32px;
  --g40: 40px;
  --g44: 44px;
  --g52: 52px;
  --g56: 56px;
  --g60: 60px;
  --g64: 64px;
  --g80: 80px;
  --g92: 92px;

  --arrow: 36px;
}

@media (max-width: 991px) {
  :root {
    --wrap: 720px; --gut: 40px; --sec: 80px; --half: 40px;
    --h1: 56px; --h2: 42px; --h3: 36px; --h4: 28px; --body: 16px;
    --s16: 12px; --s24: 16px; --s32: 24px; --s40: 32px; --s48: 32px; --s50: 32px; --s80: 64px;
    --g16: 12px; --g32: 24px; --g40: 32px; --g44: 32px; --g52: 40px; --g56: 40px; --g64: 52px; --g80: 72px; --g92: 80px;
  }
}

@media (max-width: 767px) {
  :root {
    --wrap: 540px; --gut: 20px; --sec: 60px; --half: 30px;
    --h2: 36px; --h3: 32px; --h4: 26px; --h5: 22px; --large: 16px; --xsmall: 14px;
    --s24: 12px; --s32: 16px; --s40: 24px; --s48: 24px; --s50: 24px; --s80: 48px;
    --g20: 16px; --g24: 16px; --g32: 16px; --g40: 24px; --g44: 24px; --g52: 32px; --g56: 32px; --g64: 40px; --g80: 64px; --g92: 72px;
    --arrow: 32px;
  }
}

@media (max-width: 479px) {
  :root {
    --wrap: 100%;
    --h1: 42px; --h2: 32px; --h3: 28px; --h4: 24px; --h6: 18px;
    --g64: 32px; --g80: 52px; --g92: 64px;
  }
}

/* Basis */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family:"Inter",Arial,sans-serif;
  font-size: var(--body);
  font-weight: 400;
  line-height: normal;
  letter-spacing: var(--ls);
}
img, svg { display: block; max-width: 100%; }
p, h1, h2, h3, h4, h5, h6, figure, blockquote { margin: 0; }
a { color: inherit; }
button { font-family:"Inter",Arial,sans-serif; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.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;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 8px; background: var(--ink); color: var(--white);
  font-size: 16px; font-weight: 600; text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: 12px; }

.concept-bar {
  margin: 0; padding: 6px 16px; background: var(--ink); color: var(--dark-sub);
  font-size: 12px; line-height: 18px; text-align: center;
}
.concept-bar a { margin-left: 10px; color: var(--white); text-underline-offset: 3px; white-space: nowrap; }
.concept-bar a:hover { color: var(--green); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

/* Typografische schaal */
.t-h1 { font-size: var(--h1); line-height: 109%; font-weight: 600; }
.t-h2 { font-size: var(--h2); line-height: 114%; font-weight: 600; }
.t-h3 { font-size: var(--h3); line-height: 120%; font-weight: 600; }
.t-h4 { font-size: var(--h4); line-height: 125%; font-weight: 600; }
.t-h5 { font-size: var(--h5); line-height: 133%; font-weight: 600; }
.t-h6 { font-size: var(--h6); line-height: 140%; font-weight: 600; }
.t-p { font-size: var(--body); line-height: 156%; font-weight: 400; }
.t-large { font-size: var(--large); line-height: 156%; font-weight: 500; }
.t-small { font-size: var(--small); line-height: 150%; font-weight: 500; }
.t-xsmall { font-size: var(--xsmall); line-height: 143%; font-weight: 400; }
.on-dark { color: var(--white); }
.kicker { color: var(--sub); }
.kicker-dark { color: var(--dark-sub); }
.kicker.on-dark { color: var(--white); }

.kicker-head { display: flex; flex-direction: column; gap: var(--g16); overflow: hidden; }
.head-desc { display: flex; flex-direction: column; gap: var(--g24); }
.center { width: 100%; margin-left: auto; margin-right: auto; text-align: center; }
.w-410 { max-width: 410px; }
.w-458 { max-width: 458px; }
.w-520 { max-width: 520px; }
.btn-row { display: flex; }

/* Knoppen */
.btn-dark,
.btn-inner {
  display: flex; align-items: center; gap: var(--g16);
  padding: var(--s4) var(--s4) var(--s4) var(--s16);
  border-radius: 40px; text-decoration: none;
}
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark { display: inline-flex; }
.btn-light {
  position: relative; z-index: 1; display: inline-flex;
  padding: 1px; border-radius: 40px; overflow: hidden; text-decoration: none;
}
.btn-ring::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); pointer-events: none; }
.btn-inner { background: var(--white); color: var(--ink); }
.btn-label { display: block; height: 16px; overflow: hidden; }
.btn-roll { display: flex; flex-direction: column; transition: transform .3s linear; }
.btn-roll > span { display: block; font-size: var(--small); line-height: 1; font-weight: 500; white-space: nowrap; }
.btn-arrow { flex: none; width: var(--arrow); height: var(--arrow); transition: transform .3s var(--in-out); }
.btn-dark:hover .btn-roll { transform: translateY(-16px); }
.btn-dark:hover .btn-arrow { transform: rotate(-45deg); }
@media (min-width: 992px) {
  .btn-light:hover .btn-roll { transform: translateY(-16px); }
  .btn-light:hover .btn-arrow { transform: rotate(-45deg); }
}

.btn-mint { position: relative; z-index: 1; display: block; padding: 1px; border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--ink); }
.mint-inner { display: block; padding: var(--s12) var(--s24); border-radius: 200px; background: var(--mint); text-align: center; }
.btn-mint-white .mint-inner { background: var(--white); }
.mint-roll { position: relative; display: block; overflow: hidden; }
.mint-roll > span { display: block; transition: transform .3s linear; }
.mint-roll > span + span { position: absolute; left: 0; top: 100%; width: 100%; }
.btn-mint:hover .mint-roll > span { transform: translateY(-100%); }

/* Zoom op beeld bij hover */
.zoom { width: 100%; height: 100%; overflow: hidden; }
.zoom-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--out-cubic); }
.zoom:hover .zoom-img { transform: scale(1.05); }

/* Hero */
.hero { position: relative; isolation: isolate; overflow: hidden; padding-bottom: var(--s50); }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: 0 0 32px 32px; }
.hero-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
/* Alleen donker waar tekst staat (links en onder); de badkamer rechts blijft zichtbaar. */
.hero-shade { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(15,17,15,.72) 0%, rgba(15,17,15,.52) 38%, rgba(15,17,15,.12) 68%, rgba(15,17,15,0) 100%), linear-gradient(180deg, rgba(15,17,15,.4) 0%, rgba(15,17,15,0) 18%, rgba(15,17,15,0) 70%, rgba(15,17,15,.45) 100%); }
@media (max-width: 767px) {
  .hero-bg-img { object-position: 70% 50%; }
  .hero-shade { background-image: linear-gradient(180deg, rgba(15,17,15,.55) 0%, rgba(15,17,15,.5) 45%, rgba(15,17,15,.72) 100%); }
}
.hero-stack { display: flex; flex-direction: column; gap: var(--g92); }

.topbar { display: flex; justify-content: space-between; align-items: center; padding: var(--s16) 0; }
.brand { display: flex; align-items: center; gap: 8px; height: 40px; color: var(--white); text-decoration: none; }
.brand-mark { width: 40px; height: 40px; }
.brand-word { font-size: 24px; line-height: 1; font-weight: 700; letter-spacing: -.01em; }

.navpill {
  display: flex; align-items: center; gap: var(--g32);
  padding: var(--s8) var(--s8) var(--s8) var(--s32);
  border-radius: 32px; background: var(--white);
}
.navclip { position: relative; }
.navlist { display: flex; align-items: center; gap: var(--g32); }
.navlink {
  font-size: var(--xsmall); line-height: 143%; font-weight: 400; color: var(--ink);
  text-decoration: none; transition: all .3s var(--ease);
}
.navlink:hover { color: var(--green); }
.menu-btn { display: none; }

.pages-toggle {
  display: flex; justify-content: space-between; align-items: center; gap: var(--g8);
  padding: 0; border: 0; background: none; cursor: pointer;
  font-size: var(--xsmall); line-height: 143%; color: var(--ink);
}
.pages-text { transition: color .3s linear; }
.pages-chevron { position: relative; width: 20px; height: 20px; transition: transform .3s linear; }
.chev { width: 20px; height: 20px; transition: opacity .3s linear; }
.chev-dark { color: var(--ink); }
.chev-green { position: absolute; inset: 0; color: var(--green); opacity: 0; }
.pages-toggle:hover .pages-text,
.pages.is-open .pages-text { color: var(--green); }
.pages-toggle:hover .pages-chevron,
.pages.is-open .pages-chevron { transform: rotate(180deg); transition-duration: .5s; }
.pages-toggle:hover .chev-dark,
.pages.is-open .chev-dark { opacity: 0; }
.pages-toggle:hover .chev-green,
.pages.is-open .chev-green { opacity: 1; }

.pages-panel {
  position: absolute; left: 58px; top: 100%; z-index: 30; padding-top: var(--s24);
  opacity: 0; transform: translateY(30px) scale(.9);
  transition: opacity .3s ease-in, transform .3s ease-in;
}
.pages-panel.is-open { opacity: 1; transform: none; transition-timing-function: ease-out; }
.pages-card { padding: var(--s4); border-radius: 12px; background: var(--white); box-shadow: 0 2px 5px rgba(0, 0, 0, .2); }
.pages-grid { display: grid; grid-template-columns: repeat(3, auto); gap: var(--g64); padding: var(--s32) var(--s24); }
.pages-col { display: flex; flex-direction: column; gap: var(--g8); white-space: nowrap; }
.pages-head { margin-bottom: 4px; font-size: var(--h6); line-height: 140%; font-weight: 600; }
.pages-link { font-size: var(--xsmall); line-height: 143%; color: var(--ink); text-decoration: none; transition: color .2s var(--ease); }
.pages-link:hover { color: var(--green); }

.hero-grid { display: grid; grid-template-columns: 1.75fr 1fr; align-items: end; outline: none; }
.hero-text { display: flex; flex-direction: column; gap: var(--g64); }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--g40); }
.hero-head { display: flex; flex-direction: column; gap: var(--g24); }
.hero-title { color: var(--white); }
.hero-lead { width: 100%; max-width: 584px; color: var(--white); }
.stars { display: flex; flex-direction: column; align-items: flex-start; gap: var(--g12); }
.stars-row { display: flex; gap: 4.5px; }
.stars-row svg { width: 16px; height: 16px; }
.stars-text { color: var(--white); }

.count-card {
  display: flex; flex-direction: column; gap: var(--g24); padding: var(--s24);
  border: 1px solid #979797; border-radius: 24px; background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.count-top { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--g12); }
.count-big { display: flex; color: var(--white); }
.count-desc { color: var(--white); }
.count-bottom { display: flex; justify-content: space-between; align-items: center; }
.faces { display: flex; width: 130px; }
.faces img { width: 40px; height: 40px; margin-left: -10px; border-radius: 10px; object-fit: cover; }
.faces img:first-child { margin-left: 0; }

/* Logo's */
.logos { padding: var(--s80) 0 var(--half); }
.logos-stack { display: flex; flex-direction: column; align-items: center; gap: var(--g32); }
.logos-title { text-align: center; }
.logos-row { display: flex; align-items: stretch; }
.logo-pill {
  display: flex; justify-content: center; align-items: center; padding: 20px 60px;
  border: 1px solid var(--line); border-radius: 40px; background: var(--mint-bg);
}
.logo-svg { width: 79px; height: 32px; }

/* Over ons */
.about { padding: var(--half) 0; }
.about-stack { display: flex; flex-direction: column; gap: var(--g56); }
.about-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--g80); }
.about-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--g32); overflow: hidden; }
.about-lead { width: 100%; max-width: 535px; color: var(--sub); }
.about-media { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 16px; }
.about-media .zoom { position: absolute; inset: 0; }
.counts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g40);
  padding-top: var(--s48); border-top: 1px solid var(--line);
}
.count-num { display: flex; justify-content: center; }
.count-label { text-align: center; }

/* Waarom wij */
.why { padding: var(--half) 0 var(--sec); }
.why-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--g24); }
.why-text { display: flex; flex-direction: column; gap: var(--g32); }
.why-head { width: 100%; max-width: 482px; }
.why-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g16); }
.feature {
  display: flex; flex-direction: column; gap: var(--g20); padding: var(--s24);
  border: 1px solid var(--line); border-radius: 16px;
}
.feature-icon { width: 32px; height: 32px; color: var(--ink); }
.feature-text { display: flex; flex-direction: column; gap: var(--g12); }
.feature-dark {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--g24);
  padding: var(--s24); border-radius: 16px; background: var(--ink); color: var(--white);
}
.why-media { width: 100%; height: 100%; overflow: hidden; border-radius: 16px; }

/* Werkwijze */
.steps { padding: var(--s80) 0; border-radius: 32px; background: var(--ink); }
.steps-track { position: relative; height: 250vh; }
.steps-grid { position: sticky; top: 10vh; display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--g60); }
.steps-intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--g40); }
.steps-intro .t-h3, .steps-intro .head-desc .t-p { color: var(--white); }
.steps-body { display: flex; gap: var(--g40); }
.steps-line { position: relative; display: flex; height: 98%; margin: auto 0; }
.steps-dots { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.dot { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--green); }
.steps-rail { display: flex; justify-content: center; align-items: stretch; height: 100%; margin-left: -9px; }
.steps-fill { display: block; width: 1px; height: 100%; background: var(--green); }
.steps-cards { display: flex; flex-direction: column; gap: var(--g16); height: 100%; margin: 0; padding: 0; list-style: none; }
.feature-night { border-color: var(--night-line); background: var(--night); }
.feature-night .feature-icon { color: var(--green); }
.feature-night .t-h5, .feature-night .t-p { color: var(--white); }

/* Diensten */
.services { padding: var(--sec) 0 var(--half); }
.services-stack { display: flex; flex-direction: column; gap: var(--g56); }
.svc-list { display: flex; flex-direction: column; gap: var(--g24); }
.svc { position: relative; }
.svc-toggle {
  display: flex; width: 100%; padding: 0; border: 0; background: none;
  color: inherit; text-align: left; cursor: pointer;
}
.svc-head { display: flex; flex-direction: column; gap: var(--g8); width: 100%; max-width: 372px; }
.svc-title, .svc-text { display: block; }
.svc-media {
  position: absolute; top: 0; right: 0; bottom: 0; width: 100%; max-width: calc(100% - 400px);
  overflow: hidden; border-radius: 12px; pointer-events: none;
}
.svc-media img { width: 100%; max-width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.svc-panel { height: 0; overflow: hidden; }
.svc[data-open] .svc-panel { height: auto; }
.svc-panel-inner { display: flex; flex-direction: column; align-items: flex-start; padding-top: var(--s32); }
.svc-photo { display: none; width: 100%; overflow: hidden; border-radius: 12px; }
.svc-photo img { width: 100%; height: auto; aspect-ratio: 350 / 283; object-fit: cover; object-position: 50% 0%; }
.svc-spacer { display: block; height: 145px; }
.svc-rule { display: block; width: 100%; height: 1px; background: var(--line); }

/* Prijzen */
.pricing { padding: var(--half) 0 var(--sec); }
.pricing-stack { display: flex; flex-direction: column; gap: var(--g24); }
.tabs { display: flex; flex-direction: column; align-items: center; }
.tab-list { display: flex; margin-bottom: var(--g56); padding: var(--s4); border: 1px solid var(--line); border-radius: 12px; }
.tab {
  padding: var(--s8) var(--s20); border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  color: var(--ink); font-size: var(--small); line-height: 150%; font-weight: 500;
}
.tab[aria-selected="true"] { background: var(--ink); color: var(--white); }
.tab-panels, .tab-panel { width: 100%; }
.tab-panel { transition: opacity .3s var(--ease); }
.tab-panel.is-leaving { opacity: 0; transition-duration: .1s; }
.tab-panel.is-entering { opacity: 0; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; }
.plan {
  display: flex; flex-direction: column; gap: var(--g32); padding: var(--s24);
  border: 1px solid var(--line); border-radius: 16px; background: var(--mint-bg);
}
.plan-dark { background: var(--ink); color: var(--white); }
.plan-top { display: flex; flex-direction: column; gap: var(--g24); }
.plan-name-row { display: flex; justify-content: space-between; align-items: center; }
.plan-name { font-weight: 500; }
.plan-badge { padding: var(--s4) var(--s12); border-radius: 14px; background: var(--white); color: var(--ink); font-size: 14px; }
.plan-price { display: flex; align-items: center; gap: var(--g8); }
.plan-amount { display: flex; gap: var(--g4); }
.plan-cur { font-weight: 500; }
.plan-per { font-size: 14px; }
.plan-list { display: flex; flex-direction: column; gap: var(--g12); }
.plan-list-head { color: var(--sub3); }
.plan-item { display: flex; align-items: center; gap: var(--g10); }
.plan-item svg { flex: none; width: 20px; height: 20px; color: var(--ink); }
.plan-dark .plan-item svg { color: var(--white); }

/* Projecten */
.work { padding: var(--sec) 0; border-radius: 32px; background: var(--ink); }
.work-stack { display: flex; flex-direction: column; gap: var(--g56); }
.work-track { position: relative; width: 100%; height: 250vh; }
.work-sticky { position: sticky; top: 10vh; overflow: hidden; }
.work-row { display: flex; align-items: center; gap: var(--g40); }
.work-item { flex: none; width: 100%; height: 100%; }
.work-card { position: relative; width: 100%; height: 617px; overflow: hidden; border-radius: 32px; }
.work-img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease-in; }
.work-card:hover .work-img { transform: scale(1.1); transition-timing-function: ease-out; }
.work-over {
  position: absolute; inset: 0; display: grid; align-items: end; padding: var(--s32);
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, .5));
}
.work-text { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; width: 100%; height: 100%; }
.work-title { width: 100%; max-width: 390px; color: var(--white); }
.work-side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--g24); width: 100%; max-width: 465px; }

/* Reviews */
.reviews { padding: var(--sec) 0; }
.reviews-stack { display: flex; flex-direction: column; gap: var(--g56); }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g24); }
.review { display: flex; flex-direction: column; gap: var(--g24); width: 100%; height: 100%; }
.review-flip { flex-flow: row-reverse wrap-reverse; }
.review-box { display: flex; flex-direction: column; gap: var(--g24); padding: var(--s24); border-radius: 16px; background: var(--mint-bg); }
.review-who { display: flex; gap: var(--g12); }
.review-face { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.review-name { display: flex; flex-direction: column; }
.review-role { color: var(--sub); font-size: 14px; }
.review-quote { margin: 0; }
.review-media {
  position: relative; display: flex; justify-content: center; align-items: center;
  width: 100%; height: 440px; overflow: hidden; border-radius: 16px;
}
.review-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.review-media.is-playing .review-img { animation: beeldbeweging 9s ease-in-out infinite alternate; }
@keyframes beeldbeweging { from { transform: scale(1); } to { transform: scale(1.06); } }
.review-btn-wrap { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; pointer-events: none; }
.review-btn { width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; pointer-events: auto; }
.review-btn svg { width: 56px; height: 56px; }
.review-btn .ico-play { display: none; }
.review-btn[aria-pressed="false"] .ico-play { display: block; }
.review-btn[aria-pressed="false"] .ico-pause { display: none; }
@media (min-width: 992px) {
  .review-btn svg { opacity: 0; transform: scale(.8); transition: opacity .3s linear, transform .3s linear; }
  .review-media:hover .review-btn svg,
  .review-btn:focus-visible svg { opacity: 1; transform: none; }
}

/* Blog */
.blog { padding: 0 0 var(--sec); }
.blog-stack { display: flex; flex-direction: column; gap: var(--g56); }
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g24); }
.post {
  display: flex; flex-direction: column; gap: var(--g24); width: 100%; height: 100%; padding: var(--s24);
  border: 1px solid var(--line); border-radius: 20px; background: var(--mint-bg); color: var(--ink); text-decoration: none;
}
.post-title { color: var(--ink); transition: color .3s ease-in; }
.post:hover .post-title { color: var(--green); transition-timing-function: ease-out; }
.post-media { overflow: hidden; border-radius: 16px; }
.post-img { width: 100%; height: 237px; object-fit: cover; transition: transform .3s ease-in; }
.post:hover .post-img { transform: scale(1.1); transition-timing-function: ease-out; }
.post-meta { display: flex; flex-direction: column; gap: var(--g8); }
.post-date { color: var(--sub2); font-size: 14px; }

/* Oproep */
.cta { padding: var(--sec) 0; border-radius: 32px; background: var(--ink); }
.cta-grid { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: var(--g56); }
.cta-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--g44); }
.cta-head { overflow: hidden; }
.cta-list { display: flex; flex-direction: column; gap: var(--g12); margin: 0; padding: 0; list-style: none; }
.cta-list li { display: flex; align-items: center; gap: var(--g10); }
.cta-list svg { flex: none; width: 20px; height: 20px; color: var(--green); }
.cta-media { width: 100%; height: 504px; overflow: hidden; border-radius: 24px; }

/* Veelgestelde vragen */
.faq { padding: var(--sec) 0; }
.faq-stack { display: flex; flex-direction: column; gap: var(--g56); }
.faq-list {
  display: flex; flex-direction: column; gap: var(--g16); width: 100%; max-width: 900px; margin: 0 auto;
  padding: var(--s16); border: 1px solid var(--line); border-radius: 24px;
}
.qa { position: relative; padding: var(--s20) var(--s24); border-radius: 16px; background: var(--white); transition: background-color .5s var(--in-out); }
.qa.is-open { background: var(--mint-bg); }
.qa-toggle {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer;
}
.qa-icon {
  display: flex; flex: none; justify-content: center; align-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: var(--mint-bg); transition: background-color .5s var(--in-out);
}
.qa-icon svg { width: 20px; height: 20px; transition: transform .5s var(--in-out); }
.qa.is-open .qa-icon { background: var(--white); }
.qa.is-open .qa-icon svg { transform: rotate(180deg); }
.qa-rule { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transition: opacity .1s var(--in-out) .3s; }
.qa.is-open .qa-rule { opacity: 0; transition-delay: 0s; }
.qa-panel { height: 0; overflow: hidden; }
.qa-body { padding-top: var(--s12); }

/* Voet */
.footer { padding: var(--half) 0; background: var(--ink); }
.footer-stack { display: flex; flex-direction: column; gap: var(--g64); }
.footer-cols { display: flex; justify-content: space-between; gap: 16px; }
.footer-col { display: flex; flex-direction: column; gap: var(--g20); }
.footer-links { display: flex; flex-direction: column; gap: var(--g12); }
.footer-link { color: var(--white); text-decoration: none; transition: color .2s var(--ease); }
.footer-link:hover { color: var(--green); }
.footer-base { display: flex; justify-content: space-between; align-items: center; padding-top: var(--s24); border-top: 1px solid var(--sub); }
.footer-under { color: var(--white); text-underline-offset: 4px; transition: all .4s var(--ease); }
.footer-under:hover { color: var(--green); }

/* Beginstanden voor animaties (alleen met JavaScript) */
html.js [data-slide] { opacity: 0; transform: translate3d(0, 100px, 0); }
html.js [data-slide].is-in {
  opacity: 1; transform: none;
  transition: opacity 1s var(--out-quart), transform 1s var(--out-quart);
  transition-delay: var(--d, 0ms);
}
html.js .rv-card { opacity: 0; }

/* Tablet en kleiner (≤ 991) */
@media (max-width: 991px) {
  .hero-stack { gap: var(--g52); }
  .topbar { position: relative; }
  .navpill { padding: 0; border-radius: 0; background: transparent; }
  .navclip {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 20; overflow: hidden;
    visibility: hidden; pointer-events: none; transition: visibility 0s linear .4s;
  }
  .navclip.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .navlist {
    display: block; padding: var(--s24) var(--s40);
    border-radius: 12px; background: var(--white); box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
    transform: translateY(-100%); transition: transform .4s var(--ease);
  }
  .navclip.is-open .navlist { transform: none; }
  .navlink { display: block; margin-bottom: var(--s24); }
  .pages { margin-bottom: var(--s24); }
  .pages-toggle { width: 100%; }
  .pages-panel { position: static; padding-top: 0; }
  .pages-card { padding: 0; border-radius: 0; box-shadow: none; }
  .pages-grid { padding-left: 0; padding-right: 0; }
  .nav-cta { display: none; }
  .menu-btn {
    display: flex; justify-content: center; align-items: center; width: 28px; height: 28px; padding: 4px;
    border: 0; border-radius: 4px; background: var(--mint); cursor: pointer;
  }
  .menu-icon { position: relative; display: block; width: 20px; height: 20px; }
  .menu-icon span {
    position: absolute; left: 2px; right: 2px; height: 1.6px; border-radius: 2px; background: var(--ink);
    transition: transform .5s var(--ease), opacity .5s var(--ease), top .5s var(--ease);
  }
  .menu-icon span:nth-child(1) { top: 4.6px; }
  .menu-icon span:nth-child(2) { top: 9.2px; }
  .menu-icon span:nth-child(3) { top: 13.8px; }
  .menu-btn[aria-expanded="true"] .menu-icon span:nth-child(1) { top: 9.2px; transform: rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-icon span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] .menu-icon span:nth-child(3) { top: 9.2px; transform: rotate(-45deg); }

  .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: var(--g40); }
  .hero-text { gap: var(--g40); }
  .count-top { grid-template-columns: 1fr; }
  .count-bottom { justify-content: flex-start; gap: var(--g40); }

  .logos-row { display: grid; grid-template-columns: 1fr 1fr; }

  .about-stack { gap: var(--g40); }
  .about-grid { grid-template-columns: 1fr; gap: var(--g40); }
  .about-media { height: auto; aspect-ratio: 640 / 515; }
  .counts { grid-template-columns: 1fr 1fr; padding-top: var(--s40); }

  .why-grid { grid-template-columns: 1fr; }
  .why-media { height: 550px; }

  .steps-track { height: auto; }
  .steps-grid { position: static; grid-template-columns: 1fr; gap: var(--g40); }
  .steps-line { display: none; }

  .services-stack { gap: var(--g52); }
  .svc-media { max-width: 234px; }
  .svc-media img { max-width: 250px; height: 250px; }
  .svc-spacer { height: 70px; }

  .tab-list { margin-bottom: var(--g40); }
  .plans { display: flex; flex-wrap: wrap; justify-content: center; }
  .plan-cell, .plan-dark { width: calc(100% - 55%); }

  .work-track { height: auto; }
  .work-sticky { position: static; }
  .work-row { flex-direction: column; }
  .work-card { height: 450px; }
  .work-title { max-width: none; }
  .work-text { flex-direction: column; justify-content: flex-end; align-items: stretch; }
  .work-side { max-width: none; }

  .review-grid { display: flex; flex-wrap: wrap; justify-content: center; }
  .review { width: 45%; }

  .blog-stack { gap: var(--g40); }
  .posts { display: flex; flex-wrap: wrap; justify-content: center; }
  .post-cell { width: calc(100% - 55%); }

  .faq-stack { gap: var(--g40); }
  .footer-stack { gap: var(--g64); }

  html.js .work-card[data-slide-md] { opacity: 0; transform: translate3d(0, 100px, 0); }
  html.js .work-card[data-slide-md].is-in {
    opacity: 1; transform: none;
    transition: opacity 1s var(--out-quart) .2s, transform 1s var(--out-quart) .2s;
  }
}

/* Mobiel liggend en kleiner (≤ 767) */
@media (max-width: 767px) {
  .pages-head { font-size: var(--large); font-weight: 500; }
  .svc-head { max-width: 250px; }
  .svc-media { max-width: 174px; }
  .svc-media img { max-width: 180px; }
  .plan-name-row { flex-wrap: wrap; gap: var(--g10); }
  .qa-icon { min-width: 32px; min-height: 32px; }
  .posts { flex-direction: column; }
  .post-cell { width: auto; }
  .cta-grid { display: flex; flex-direction: column; }
  .cta-media { height: 450px; }
  .review { flex-flow: row-reverse wrap-reverse; }
  .review-media { height: 350px; }
  .work-card { display: flex; flex-direction: column; gap: var(--g40); height: auto; overflow: visible; border-radius: 0; }
  .work-img { height: 350px; border-radius: 20px; }
  .work-over { position: static; padding: 0; background: none; }
  .work-text { align-items: stretch; }
  .why-media { height: 450px; }
  .footer-cols { display: grid; grid-template-columns: 1fr 1fr; }
}

/* Telefoon (≤ 479) */
@media (max-width: 479px) {
  .hero { overflow: visible; }
  .pages-grid { grid-template-columns: 1fr; }
  .count-top { display: flex; flex-direction: column; align-items: flex-start; }
  .count-bottom { flex-direction: column; align-items: flex-start; gap: var(--g16); }
  .logos-row { grid-template-columns: 1fr; }
  .counts { grid-template-columns: 1fr; }
  .why-media { height: 250px; }
  .why-cards { grid-template-columns: 1fr; }
  .svc-head { max-width: none; }
  .svc-panel-inner { gap: var(--g32); }
  .svc-media { display: none; }
  .svc-spacer { display: none; }
  .svc-photo { display: block; }
  .plans { flex-direction: column; }
  .plan-cell, .plan-dark { width: auto; }
  .qa-icon { width: 24px; height: 24px; min-width: 24px; min-height: 24px; }
  .qa-icon svg { width: 16px; height: 16px; }
  .cta-media { height: 250px; }
  .review-grid { flex-direction: column; }
  .review { width: auto; }
  .review-media { height: 250px; }
  .work-img { height: 250px; border-radius: 12px; }
}

/* Minder beweging: alles direct zichtbaar, geen scrollgestuurde opbouw */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html.js [data-slide], html.js .rv-card, html.js .work-card[data-slide-md] { opacity: 1 !important; transform: none !important; }
  .steps-track, .work-track { height: auto; }
  .steps-grid, .work-sticky { position: static; }
  .work-row { flex-direction: column; }
}

/* 2026-10-23: focused reference corrections, Claude layout retained. */
.original-brand{width:130px;height:40px;display:block}.faces img{width:130px;height:40px;margin:0;border-radius:0}.footer-brand{width:100%;height:auto;display:block}.review-media video.review-img{object-fit:cover;animation:none!important}

/* Source footer wordmark is present but display:none in the live preview. */
.footer-brand{display:none}

/* Exact source letter spacing is set per text size, not inherited in pixels. */
.t-h1,.t-h2,.t-h3,.t-h4,.t-h5,.t-h6,.t-p,.t-large,.t-small,.t-xsmall,.btn-roll>span,.mint-roll>span,.navlink,.pages-toggle,.pages-link,.pages-head,.tab{letter-spacing:-.01em}

.stars-row svg{width:96px;height:16px}

.logo-svg{width:auto;height:auto;max-width:none}.svc-photo img{aspect-ratio:auto}.menu-icon span{left:0;right:0}

.reference-promo{position:fixed;right:24px;bottom:24px;display:flex;flex-direction:column;gap:8px;z-index:100}
.reference-promo-slides{position:relative;width:140px;height:60px;padding:4px 4px 5px;background:#000;border-radius:12px;overflow:hidden}
.reference-promo-slides img{position:absolute;left:4px;top:4px;width:132px;height:54px;object-fit:cover;border-radius:8px;opacity:0;transition:opacity .5s ease-in-out}
.reference-promo-slides img.is-current{opacity:1}
.reference-promo-buy{width:140px;height:36px;padding:8px 13px 8px 12px;border:0;border-radius:10px;background:#000;color:white;display:flex;align-items:center;justify-content:space-between;gap:8px;font:500 14px/1.2857 Figtree,sans-serif;cursor:default}
.reference-promo-label{position:relative;display:block;height:18.0035px;overflow:hidden;line-height:18.0035px}
.reference-promo-label>span{display:block}
.reference-promo-buy .reference-promo-label{transform:none}
.reference-promo-label{font-size:0}.reference-promo-label>span{font-size:14px}
.reference-promo-icon{width:17px;height:17px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.reference-promo-icon img{width:11px;height:11px}

.reference-promo-label{font-size:14px}

html.js.gsap-slides [data-slide],html.js.gsap-slides .work-card[data-slide-md]{transition:none!important}
.reference-promo-label>span{line-height:18.0035px}.reference-promo-tip{position:absolute;top:-35px;left:0;background:#000;color:#fff;border-radius:8px;padding:5px 16px;white-space:nowrap;font:400 14px/1.5 Figtree,sans-serif;opacity:0;transition:opacity .25s ease-in-out;pointer-events:none}.reference-promo-tip.is-on{opacity:1}

.menu-icon svg{display:block;width:100%;height:100%}

@media(max-width:991px){.about-media{aspect-ratio:944/760}}

.topbar{z-index:50}
html.js.gsap-zoom .zoom-img{transition:none}html.js.gsap-zoom .zoom:hover .zoom-img{transform:none}
@media(prefers-reduced-motion:reduce){.zoom:hover .zoom-img{transform:none!important}}

.pages-panel{overflow:hidden}.pages-card{background:transparent;box-shadow:none}.pages-grid{background:#fff;border-radius:12px;box-shadow:0 2px 5px rgba(0,0,0,.2)}.pages-link.is-current{color:var(--green)}.pages-mobile-cta{display:none}
@media(max-width:991px){.pages-grid{border-radius:0;box-shadow:none}.pages-mobile-cta{display:flex;justify-content:flex-start;align-items:center}}
.reference-promo-slides img{width:134px;clip-path:inset(0 2px 0 0)}

.reference-promo-slides img{width:132px;clip-path:none}


.hero{isolation:auto}.topbar{z-index:1000}.qa{z-index:900}.reference-promo{z-index:auto}

/* 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}}

.menu-btn [data-menu-icon]{position:relative;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat;transition:background .5s,border-color .5s}.menu-btn [data-menu-icon]:before,.menu-btn [data-menu-icon]:after{content:'';position:absolute;left:0;top:6px;width:24px;border-top:2px solid;margin:0;transition:transform .5s,opacity .5s;opacity:0}.menu-btn[aria-expanded=true] [data-menu-icon]{background:none;border-color:transparent}.menu-btn[aria-expanded=true] [data-menu-icon]:before{opacity:1;transform:rotate(45deg)}.menu-btn[aria-expanded=true] [data-menu-icon]:after{opacity:1;transform:rotate(-45deg)}

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

.logo-svg{width:90px;height:32px;max-width:100%;object-fit:contain}

/* Compacte dienstbeelden op telefoons, met behoud van het paneel. */
@media(max-width:767px){.svc-photo img{width:100%;aspect-ratio:4/3;max-height:280px;object-fit:cover}.svc-panel-inner{gap:24px}.svc-spacer{display:none}}

/* Lay-outronde 29-10-2026 */
/* Vaste maten voor deze ronde: sectieruimte en afstand kop -> inhoud. */
:root { --lay-sec: 96px; --lay-head: 48px; --lay-gap: 24px; }
@media (max-width: 991px) { :root { --lay-sec: 64px; --lay-head: 40px; } }
@media (max-width: 767px) { :root { --lay-sec: 48px; --lay-head: 32px; --lay-gap: 16px; --xsmall: 15px; } }

/* Regel 1 en 2: inhoud wacht nooit onzichtbaar op scrollen. Geen beginstand met opacity 0;
   alleen een korte verschuiving van 24 px (transform, 0,5 s) voor blokken die onder de vouw starten. */
html.js [data-slide], html.js [data-slide].is-in, html.js .rv-card,
html.js .work-card[data-slide-md], html.js .work-card[data-slide-md].is-in { opacity: 1; transform: none; transition: none; }
html.js .lay-pre:not(.lay-in) { transform: translate3d(0, 24px, 0); }
html.js .lay-pre.lay-in { transform: none; transition: transform .5s var(--out-quart); }
@media (prefers-reduced-motion: reduce) {
  html.js .lay-pre:not(.lay-in), html.js .lay-pre.lay-in { transform: none; transition: none; }
}

/* Regel 5: label bovenaan minimaal 12 px (tekst ongewijzigd). */
.eigen-concept { font-size: 12px; }

/* Regel 4: sectieruimte. Witte secties: ruimte boven; vóór een sectie met volle achtergrond ook onder.
   Secties met volle achtergrond: binnenruimte boven en onder. */
.logos, .about, .services, .reviews { padding: var(--lay-sec) 0 0; }
.why, .pricing, .blog, .faq { padding: var(--lay-sec) 0; }
.steps, .work, .cta { padding: var(--lay-sec) 0; }
.demo-form { padding-top: var(--lay-sec); padding-bottom: var(--lay-sec); }
.footer { padding: var(--lay-sec) 0 0; }
.footer-stack { gap: var(--lay-head); }
.about-stack, .services-stack, .work-stack, .reviews-stack, .blog-stack, .faq-stack, .pricing-stack { gap: var(--lay-head); }
.tab-list { margin-bottom: var(--lay-gap); }
.kicker-head.center { max-width: 640px; }
.logos-row { gap: 12px; }

/* Regel 1: werkwijze statisch (geen 250vh-spoor, geen sticky). */
.steps-track { height: auto; }
.steps-grid { position: static; align-items: start; }
.step { transform: none; opacity: 1; }
.dot { opacity: 1; }
.steps-body { align-items: stretch; }
.steps-line { height: auto; margin: 0; padding: 28px 0; }
.steps-dots, .steps-rail { height: auto; }
.steps-fill { height: auto; }

/* Regel 1 en 3: projecten statisch als raster in plaats van een vastgezette horizontale strook. */
.work-track { height: auto; }
.work-sticky { position: static; overflow: visible; }
.work-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--lay-gap); transform: none; }
.work-item { width: auto; height: auto; }
.work-card { display: flex; flex-direction: column; gap: var(--lay-gap); height: auto; overflow: visible; border-radius: 0; }
.work-img { height: 260px; border-radius: 20px; }
.work-card:hover .work-img { transform: none; }
.work-over { position: static; padding: 0; background: none; }
.work-text { flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 16px; }
.work-title { max-width: none; font-size: var(--h5); line-height: 133%; }
.work-side { max-width: none; gap: var(--lay-gap); }

/* Regel 3: extreme hoogtes terug naar maat. */
.svc-spacer { height: 32px; }
.svc-panel-inner { padding-top: 24px; }
.svc-list { gap: 16px; }
/* Review 29-10: dichte diensten tonen geen afgesneden fotostrook meer; de foto verschijnt pas bij het open item
   (opacity en transform, 0,3 s). Onder 480 px staat de foto al in het paneel zelf. */
@media (min-width: 480px) {
  .svc .svc-media { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .3s var(--out-cubic), transform .3s var(--out-cubic); }
  .svc[data-open] .svc-media { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .svc .svc-media { transition: none; transform: none; } }
.plan { gap: 24px; }
.why-text { gap: 24px; }
.faq-list { gap: 8px; }
.footer-col { gap: 16px; }
.footer-links { gap: 8px; }
.counts { padding-top: 32px; }
.review-media { height: 220px; }
.why-head { max-width: none; }

/* Desktop: sectiekoppen in twee kolommen (kicker en kop links, inleiding rechts) en vragen naast de kop.
   Zelfde opbouw als over-ons, waarom en werkwijze; scheelt per sectie een blok witruimte. */
@media (min-width: 992px) {
  :is(.services, .pricing, .work, .reviews, .blog) .kicker-head.center {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; row-gap: 16px;
    max-width: none; margin: 0; text-align: left; align-items: end;
  }
  :is(.services, .pricing, .work, .reviews, .blog) .kicker-head.center .head-desc { display: contents; }
  :is(.services, .pricing, .work, .reviews, .blog) .kicker-head.center .kicker { grid-column: 1; grid-row: 1; }
  :is(.services, .pricing, .work, .reviews, .blog) .kicker-head.center h2 { grid-column: 1; grid-row: 2; }
  :is(.services, .pricing, .work, .reviews, .blog) .kicker-head.center h2 + p { grid-column: 2; grid-row: 2; max-width: 520px; }
  .tabs { align-items: flex-start; }
  .faq-stack { display: grid; grid-template-columns: 4fr 7fr; gap: 48px; align-items: start; }
  .faq .kicker-head.center { max-width: none; margin: 0; text-align: left; }
  .faq-list { max-width: none; margin: 0; }
  /* Werkwijze: kop in twee kolommen, de drie stappen naast elkaar. */
  .steps-grid { grid-template-columns: 1fr; gap: var(--lay-head); }
  .steps-intro { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; row-gap: 16px; align-items: end; }
  .steps-intro .kicker-head, .steps-intro .head-desc { display: contents; }
  .steps-intro .kicker { grid-column: 1; grid-row: 1; }
  .steps-intro h2 { grid-column: 1; grid-row: 2; }
  .steps-intro h2 + p { grid-column: 2; grid-row: 1 / span 2; max-width: 520px; }
  .steps-intro .btn-row { grid-column: 2; grid-row: 3; }
  .steps-line { display: none; }
  .steps-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lay-gap); }
  .steps-cards .feature { height: 100%; }
  .post-img { height: 180px; }
}

/* Herstel 1 (review 29-10): desktop korter zonder inhoud weg te halen. */
@media (min-width: 992px) {
  /* Hero rond 640 px: minder lucht tussen navigatie, kop en onderregel; laag en foto ongewijzigd. */
  .hero-stack { gap: 32px; }
  .hero-text { gap: 40px; }
  .hero { padding-bottom: 40px; }
  /* Aandachtspunten: titel en vier punten op één regel. */
  .logos-stack { flex-direction: row; justify-content: space-between; gap: 32px; }
  .logos-title { text-align: left; max-width: 260px; }
  /* Uitgangspunten: de drie kaarten naast elkaar in plaats van twee plus één. */
  .why-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .why-cards .feature-dark { grid-column: auto; }
  .why-grid { grid-template-columns: 8fr 4fr; }
  /* Werkwijze: inleiding naast de kicker, knop naast de kop (geen derde rij). */
  .steps-intro h2 + p { grid-row: 1; align-self: end; }
  .steps-intro .btn-row { grid-row: 2; align-self: end; }
  /* Kennis: bredere kopkolom, kop op één regel. */
  .blog .kicker-head.center { grid-template-columns: 3fr 2fr; }
  /* Lagere beeldhoogtes. */
  .work-img { height: 220px; }
  .post-img { height: 160px; }
  .review-media { height: 200px; }
  .cta-media { height: 320px; }
  .svc-spacer { height: 16px; }
  .plan-list { gap: 8px; }
  .plan-top { gap: 16px; }
  .tab-list { margin-bottom: 16px; }
  /* Vaste binnenafstanden in kaarten en lijsten: 16 px. */
  .qa { padding: 16px 24px; }
  .post, .review { gap: 16px; }
  .work-side { gap: 16px; }
  .cta-text { gap: 24px; }
  .svc-panel-inner { padding-top: 16px; }
  .footer-stack { gap: 32px; }
  .hero-stack { gap: 24px; }
  .hero-text { gap: 32px; }
  .hero { padding-bottom: 32px; }
  .about-text { gap: 24px; }
  .counts { padding-top: 24px; }
  .feature, .plan { padding: 20px; }
  .logo-pill { padding: 14px 48px; }
  .footer-base { padding-top: 16px; }
}
/* Lege statusregel van het demoformulier neemt geen ruimte in tot er een melding staat. */
.demo-status:empty { display: none; }

/* Herstel 1: FAQ-pijl dicht omlaag, open omhoog. */
.qa-icon svg { transform: rotate(180deg); }
.qa.is-open .qa-icon svg { transform: none; }

/* Herstel 1: beeld bij de gesprekskaarten staat stil; de pauzeknop voor die beweging vervalt daarmee. */
.review-media .review-img, .review-media.is-playing .review-img { animation: none !important; transform: none; }
.review-btn-wrap { display: none; }
.post-img { height: 200px; }
.cta-media { height: 360px; }
.cta-text { gap: 32px; }

/* Formulier in hetzelfde systeem: kopmaat, letter en knopmaat zoals de rest (gedrag ongewijzigd). */
.demo-form h2 { font-size: var(--h3); line-height: 120%; font-weight: 600; letter-spacing: -.01em; }
.demo-form p { font-size: var(--body); line-height: 156%; }
.demo-form label { display: grid; gap: 8px; font-size: var(--small); font-weight: 500; }
.demo-form input, .demo-form textarea, .demo-form button { font: inherit; font-size: var(--small); }
@media (min-width: 992px) {
  .demo-form form { grid-template-columns: 5fr 7fr; column-gap: 48px; max-width: var(--wrap); padding: 0 var(--gut); align-items: start; }
  .demo-form form > h2 { grid-column: 1; grid-row: 1; align-self: end; }
  .demo-form form > p:not([role="status"]) { grid-column: 1; grid-row: 2 / span 3; }
  .demo-form form > label, .demo-form form > button, .demo-form form > [role="status"] { grid-column: 2; }
  .demo-form form > label:first-of-type { grid-row: 1; }
}

/* Tablet (768-991): twee kolommen waar de breedte het toelaat. */
@media (min-width: 768px) and (max-width: 991px) {
  .about-grid { grid-template-columns: 7fr 5fr; gap: 32px; }
  .about-media { height: auto; aspect-ratio: auto; min-height: 320px; }
  .counts { grid-template-columns: repeat(4, 1fr); }
  .why-media { height: 300px; }
  .plans { flex-direction: column; gap: var(--lay-gap); }
  .plan-cell, .plan-dark { width: 100%; }
  .plan { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; align-items: start; }
  .plan > .plan-top { grid-column: 1; grid-row: 1; }
  .plan > .btn-mint { grid-column: 1; grid-row: 2; }
  .plan > .plan-list { grid-column: 2; grid-row: 1 / span 2; }
  .work-row { grid-template-columns: 1fr; gap: 32px; }
  .work-card { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px; }
  .work-img { height: 280px; }
  .steps-grid { grid-template-columns: .8fr 1.2fr; gap: 32px; align-items: start; }
  .review-grid { display: grid; grid-template-columns: 1fr; gap: var(--lay-gap); }
  .review { width: auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--lay-gap); align-items: stretch; }
  .review-flip .review-box { order: 2; }
  .review-media { height: auto; min-height: 240px; }
  .cta-media { height: 360px; }
}

/* Tablet en mobiel: kennisitems als compacte rij met beeld links, alle drie direct zichtbaar. */
@media (max-width: 991px) {
  .posts { display: grid; grid-template-columns: 1fr; gap: var(--lay-gap); }
  .post-cell, .post-cell:nth-child(n) { width: auto; }
  .post { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr; column-gap: var(--lay-gap); row-gap: 8px; align-items: start; }
  .post-media { grid-column: 1; grid-row: 1 / span 2; height: 100%; min-height: 140px; }
  .post-img { height: 100%; }
  .post-title { grid-column: 2; grid-row: 1; }
  .post-meta { grid-column: 2; grid-row: 2; }
}

/* Mobiel (≤ 767). */
@media (max-width: 767px) {
  /* Voorbeeldsituaties en gesprekskaarten als veegrij: elke kaart volledig opgebouwd, de volgende kijkt in beeld. */
  .work-row, .review-grid {
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 16px; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-padding: 0 var(--gut); scrollbar-width: thin;
    margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) 12px;
  }
  .work-item, .review { flex: 0 0 84%; width: 84%; scroll-snap-align: start; }
  /* Aanvraagroutes als dezelfde veegrij. */
  .plans {
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 16px; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-padding: 0 var(--gut); scrollbar-width: thin;
    width: auto; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) 12px; align-items: stretch;
  }
  .plan-cell, .plans > .plan-dark { flex: 0 0 84%; width: 84%; scroll-snap-align: start; }
  .plan-cell > .plan { height: 100%; }
  .work-img { height: 220px; border-radius: 16px; }
  .review-media { height: 220px; }
  .cta-media { height: 260px; }
  .post { grid-template-columns: 112px 1fr; }
  .post-media { min-height: 112px; border-radius: 12px; }
  .demo-form { padding-left: var(--gut); padding-right: var(--gut); }
}
@media (max-width: 479px) {
  .logos-row { grid-template-columns: 1fr 1fr; }
  .logo-pill { padding: 16px 12px; }
  .counts { grid-template-columns: 1fr 1fr; }
  .work-img { height: 220px; }
  .review-grid { flex-direction: row; }
  .review { width: 84%; }
}

/* Audit 2026-10-30: keep the third principles-card CTA inside its narrow desktop column. */
@media (min-width: 992px) {
 .why-cards .feature-dark .btn-inner { gap:8px; padding:4px 4px 4px 12px; }
 .why-cards .feature-dark .btn-arrow { width:24px; height:24px; }
 .why-cards .feature-dark .btn-roll > span { font-size:14px; line-height:16px; height:16px; overflow:hidden; }
}

/* 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; }
}

/* Mobiele kwaliteitsronde: Vliet — leidingritme en leesbare servicegroepen. */
@media(max-width:991px){.menu-btn{width:44px;height:44px;border-radius:12px}.qa-toggle{min-height:44px;gap:16px}}
@media(max-width:767px){
 .why-cards{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
 .why-cards .feature{display:grid;grid-template-columns:32px minmax(0,1fr);gap:20px;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:24px 0}
 .why-cards .feature-dark{margin-top:24px;padding:24px;border-radius:4px 24px 24px 24px}
 .faq-list{padding:0;border:0;gap:0}.qa{padding:16px 0;border-radius:0;border-bottom:1px solid var(--line)}
 .qa.is-open{padding-inline:16px}.qa-toggle{font-size:16px;line-height:1.45}
 .steps-cards{border-left:1px solid var(--green);padding-left:20px;gap:24px}
 .steps-cards>li{border-radius:4px 20px 20px 4px}
}