/* =========================================================
   AutoChipper — dark stylesheet
   ========================================================= */

:root{
  --blauw:#12a7d9;
  --blauw-dark:#0e86ae;
  --blauw-licht:#5fd0f5;
  --blauw-soft:rgba(18,167,217,.14);

  --geel:#c7ff00;          /* WhatsApp-knop kleur */
  --geel-dark:#a8d900;
  --geel-ink:#131a00;

  --bg:#04080D;            /* basis */
  --bg-2:#14202E;          /* afwisselende sectie */
  --bg-3:#07182A;          /* footer / diep */
  --kaart:#1B2939;
  --kaart-hover:#1B2939;

  --wit:#ffffff;
  --tekst:rgba(255,255,255,.70);
  --tekst-licht:rgba(255,255,255,.50);
  --lijn:rgba(255,255,255,.09);
  --lijn-sterk:rgba(255,255,255,.18);

  --radius:14px;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.34);
  --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 30px 66px rgba(0,0,0,.5);
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--bg)}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16.5px;
  line-height:1.75;
  color:var(--tekst);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blauw-licht);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--blauw);color:#fff}

h1,h2,h3,h4{
  color:var(--wit);font-weight:700;line-height:1.14;margin:0 0 .55em;
  text-transform:uppercase;
}
h1{font-size:clamp(2.05rem,1.3rem + 3.1vw,3.8rem);font-weight:800;letter-spacing:-.015em}
h2{font-size:clamp(1.55rem,1.15rem + 1.6vw,2.45rem);font-weight:800;letter-spacing:-.01em}
h3{font-size:clamp(1rem,.95rem + .4vw,1.18rem);font-weight:700;letter-spacing:.02em}
h4{font-size:.8rem;font-weight:700;letter-spacing:.12em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
strong{color:rgba(255,255,255,.92)}

.c{color:var(--blauw)}
.nowrap{white-space:nowrap}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mt-32{margin-top:32px}
.center{text-align:center;margin-left:auto;margin-right:auto}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
a:focus-visible,button:focus-visible{outline:2px solid var(--blauw);outline-offset:3px;border-radius:6px}
.sr-only:focus{
  position:fixed;top:12px;left:12px;width:auto;height:auto;clip:auto;
  padding:12px 18px;background:var(--kaart);color:#fff;z-index:9999;border-radius:8px;
}

.eyebrow{
  display:inline-block;
  font-size:.735rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blauw-licht);margin-bottom:14px;
}

.lead{font-size:clamp(1.02rem,.97rem + .3vw,1.16rem);color:rgba(255,255,255,.78);line-height:1.72}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;justify-content:center;
  padding:14px 26px;border-radius:10px;border:1.5px solid transparent;
  font-size:.9rem;font-weight:700;letter-spacing:.04em;line-height:1.2;
  text-transform:uppercase;
  cursor:pointer;text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn svg{flex:none}
.btn--primary{background:var(--blauw);color:#fff;box-shadow:none}
.btn--primary:hover{background:var(--blauw-dark);box-shadow:none}
.btn--secondary{background:rgba(255,255,255,.05);color:#fff;border-color:var(--lijn-sterk)}
.btn--secondary:hover{border-color:var(--blauw);color:#fff;background:var(--blauw-soft)}
.btn--wa{background:var(--geel);color:var(--geel-ink);border-color:transparent;box-shadow:none}
.btn--wa:hover{background:var(--geel-dark);color:#160e02;box-shadow:none}
.btn--sm{padding:10px 16px;font-size:.82rem;border-radius:9px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:60;
  background:var(--header-bg,rgba(8,11,13,.94));
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--lijn);
}
.header__inner{display:flex;align-items:center;gap:16px;min-height:76px;max-width:1460px}
.brand{flex:none;display:block;line-height:0}
.brand img{width:172px;height:auto}
.nav{display:flex;flex:1;flex-wrap:nowrap;gap:1px;justify-content:center}
.nav a{
  color:rgba(255,255,255,.72);font-size:.715rem;font-weight:600;
  letter-spacing:.02em;text-transform:uppercase;
  padding:8px 6px;border-radius:8px;text-decoration:none;white-space:nowrap;
  transition:color .15s ease,background .15s ease;
}
.nav a:hover{color:#fff;background:rgba(255,255,255,.08);text-decoration:none}
.nav a[aria-current="page"]{color:var(--blauw-licht);background:var(--blauw-soft)}
.header__actions{display:flex;align-items:center;gap:9px;flex:none}
.social{display:flex;gap:6px}
.social a{
  width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
  color:rgba(255,255,255,.65);border:1px solid var(--lijn-sterk);transition:.15s;
}
.social a:hover{color:#fff;background:var(--blauw);border-color:var(--blauw)}
.burger{
  display:none;width:44px;height:44px;border:1px solid var(--lijn-sterk);background:transparent;
  border-radius:10px;padding:0;cursor:pointer;flex-direction:column;gap:5px;
  align-items:center;justify-content:center;
}
.burger span{display:block;width:19px;height:2px;background:#fff;border-radius:2px;transition:.22s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Mobile menu ---------- */
.mobile-menu{
  display:none;position:fixed;inset:76px 0 0;z-index:55;
  background:var(--bg);overflow-y:auto;padding:24px 0 120px;
  border-top:1px solid var(--lijn);
}
.mobile-menu.open{display:block}
.mobile-menu .container{display:flex;flex-direction:column;gap:2px}
.mobile-menu a:not(.btn){
  color:rgba(255,255,255,.86);font-weight:600;font-size:.95rem;
  letter-spacing:.05em;text-transform:uppercase;
  padding:15px 4px;border-bottom:1px solid var(--lijn);text-decoration:none;
}
.mobile-menu a:not(.btn):hover{color:var(--blauw-licht)}
.mobile-menu .btn{margin-top:20px}
.mobile-menu .social{margin-top:18px;justify-content:center}

/* ---------- Hero ---------- */
.hero{
  position:relative;isolation:isolate;
  background-size:cover;background-position:center 46%;background-repeat:no-repeat;
  color:#fff;padding:126px 0 176px;overflow:hidden;
  /* iedere pagina dezelfde hero-hoogte als versnellingsbak-tuning */
  min-height:748px;display:flex;align-items:center;
}
.hero > .container{width:100%}
/* Standaardsluier: exact zoals op de homepage (niet gewijzigd) */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:rgba(6,9,10,.64);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:none;
}

/* Op de overige pagina's (niet de homepage) trekken we de sluier gelijk aan het
   lichtere, consistente gevoel van de homepage — los van hoe donker de eigen
   hero-foto van elke pagina is. Homepage blijft ongewijzigd. */
body:not(.pagina-home) .hero::before{
  background:rgba(6,9,10,.64);
}
body:not(.pagina-home) .hero::after{
  background:none;
}
body:not(.pagina-home) .hero h1,
body:not(.pagina-home) .hero .sub,
body:not(.pagina-home) .hero .eyebrow,
body:not(.pagina-home) .hero .trust{text-shadow:0 2px 14px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.45)}
.hero h1{color:#fff;margin-bottom:20px}
.hero__text{max-width:840px}
.hero .sub{font-size:clamp(1.02rem,.96rem + .4vw,1.2rem);color:rgba(255,255,255,.84);max-width:58ch;margin-bottom:32px}
.trust{
  display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:34px;
  font-size:.84rem;color:rgba(255,255,255,.78);
}
@media(min-width:861px){.trust{flex-wrap:nowrap;white-space:nowrap}}
.trust span{display:inline-flex;align-items:center;gap:8px}
.trust svg{color:var(--blauw);flex:none}
.trust a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---------- Crispy: gescheurde bovenrand op de sectie zelf ----------
   Het element krijgt zijn EIGEN achtergrond (kleur, verloop of foto)
   met een gescheurde bovenkant, en schuift over de sectie erboven heen.
   Zo loopt de scheur altijd naadloos over in de kleur eronder.        */
.torn{
  --th:clamp(22px,2.8vw,46px);
  position:relative;z-index:2;
  margin-top:calc(var(--th) * -1);
  -webkit-mask-image:var(--crispy,url(../img/crispy-1.svg)), linear-gradient(#000,#000);
          mask-image:var(--crispy,url(../img/crispy-1.svg)), linear-gradient(#000,#000);
  -webkit-mask-size:100% var(--th), 100% calc(100% - var(--th) + 1px);
          mask-size:100% var(--th), 100% calc(100% - var(--th) + 1px);
  -webkit-mask-position:top left, bottom left;
          mask-position:top left, bottom left;
  -webkit-mask-repeat:no-repeat, no-repeat;
          mask-repeat:no-repeat, no-repeat;
}
.section.torn{padding-top:clamp(66px,7vw,108px)}
.footer.torn{padding-top:90px}
.cta.torn{padding-top:clamp(66px,7vw,108px)}

/* ---------- Sections ---------- */
.section{padding:clamp(66px,7vw,108px) 0;position:relative;background:var(--bg)}
.section--alt{background:var(--bg-2)}
.section--donker{background:var(--bg-3)}
.section-head{max-width:760px;margin-bottom:52px}
.section-head.center{text-align:center;margin-left:auto;margin-right:auto}
.section-head p{color:var(--tekst-licht)}

.grid{display:grid;gap:26px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2-1{grid-template-columns:1.45fr 1fr;gap:56px;align-items:center}
.grid--1-2{grid-template-columns:1fr 1.7fr;gap:40px;align-items:start}

.card{
  background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:30px 28px;box-shadow:var(--shadow);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(18,167,217,.45);background:var(--kaart-hover)}
.card h3{margin-bottom:10px}
.card p{color:var(--tekst);font-size:.96rem;margin-bottom:0}
.card__nr{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:var(--blauw-soft);color:var(--blauw-licht);
  font-size:.8rem;font-weight:700;margin-bottom:16px;
}
.card__icoon{
  width:58px;height:58px;object-fit:contain;margin-bottom:18px;
  filter:none;opacity:1;
}

/* ---------- Mogelijkheden: vierkante icoonkaarten ---------- */
.feat-list{
  max-width:880px;margin:0 auto;display:grid;gap:18px;
}
.feat{
  display:grid;grid-template-columns:84px 1fr;gap:24px;align-items:flex-start;
  padding:28px;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--radius);
}
.feat__num{
  width:84px;height:84px;flex:none;
  background:none;border:none;border-radius:0;
  display:grid;place-items:center;
}
.feat__num img{width:72px;height:72px;object-fit:contain;filter:none;opacity:1}
.feat__body h3{margin-bottom:8px}
.feat__body p{color:var(--tekst);font-size:.96rem;margin-bottom:0}

.beeld{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--lijn)}
.beeld img{width:100%;height:100%;object-fit:cover;display:block}
.beeld--icon{max-width:200px;box-shadow:none;border:none;background:none;padding:0}
.beeld--icon img{object-fit:contain;aspect-ratio:1/1}
.beeld--icon-inline{max-width:96px;box-shadow:none;border:none;background:none;padding:0;margin-bottom:22px}
.beeld--icon-inline img{object-fit:contain;aspect-ratio:1/1}

.card__icoon--img{width:62px;height:62px;margin-bottom:18px;border-radius:0;overflow:visible;background:none;display:block;padding:0;filter:none;opacity:1}
.card__icoon--img img{width:100%;height:100%;object-fit:contain}

.brands-strip .eyebrow{display:block;text-align:center;margin-bottom:28px;font-size:.95rem;letter-spacing:.06em}
.brands-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px 24px;padding:8px 0}
.brands-row .brand-badge{background:none;border:none;border-radius:0;padding:10px 20px;display:flex;align-items:center;justify-content:center;box-shadow:none;transition:opacity .2s ease,transform .2s ease}
.brands-row .brand-badge:hover{transform:translateY(-3px)}
.brands-row .brand-badge{opacity:1}
.brands-row .brand-badge:hover{opacity:1}
.brands-row img{height:32px;width:auto;object-fit:contain;display:block}

/* ---------- Opties: compacte kaartengrid ---------- */
.opt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.opt{
  background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:26px 24px;box-shadow:var(--shadow);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;
}
.opt:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(18,167,217,.45);background:var(--kaart-hover)}
.opt__icon{width:56px;height:56px;object-fit:contain;margin-bottom:16px;display:block}
.opt h3{margin-bottom:10px;font-size:1.08rem}
.opt p{color:var(--tekst);font-size:.93rem;margin-bottom:0}

.ticks{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.ticks li{position:relative;padding-left:32px;font-size:.98rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:.42em;width:19px;height:19px;border-radius:50%;
  background:var(--blauw-soft);
}
.ticks li::after{
  content:"";position:absolute;left:6px;top:.72em;width:7px;height:4px;
  border-left:2px solid var(--blauw-licht);border-bottom:2px solid var(--blauw-licht);
  transform:rotate(-45deg);
}

.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.chips span{
  font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--lijn-sterk);color:rgba(255,255,255,.8);
}

/* ---------- CTA band ---------- */
.cta{
  background:var(--kaart-alt);
  color:#fff;position:relative;overflow:hidden;
}
.cta .container{position:relative;z-index:1}
.cta h2{color:#fff}
.cta p{color:rgba(255,255,255,.78);max-width:60ch}
.cta__inner{display:flex;flex-wrap:wrap;gap:36px;align-items:center;justify-content:space-between}
.cta__inner > div:first-child{max-width:640px}

/* ---------- Reviews ---------- */
.review{
  background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:32px 28px;text-align:center;box-shadow:var(--shadow);
}
.review__score{font-size:3.1rem;font-weight:800;color:#fff;line-height:1}
.stars{display:flex;gap:3px;color:var(--geel);justify-content:center;margin:8px 0 12px}
.review p{font-size:.9rem;color:var(--tekst-licht)}
blockquote.card{margin:0}
blockquote.card .stars{justify-content:flex-start;margin-top:0}
blockquote.card p{font-size:.97rem;color:var(--tekst)}
blockquote.card footer{margin-top:14px;font-size:.86rem;color:var(--tekst-licht)}
blockquote.card footer strong{color:#fff}

/* ---------- Contact ---------- */
.info-list{list-style:none;padding:0;margin:0;display:grid;gap:12px;font-size:.98rem}
.info-list li{display:flex;gap:12px;align-items:flex-start}
.info-list svg{color:var(--blauw);flex:none;margin-top:5px}
.info-list a{color:rgba(255,255,255,.82)}
.info-list li > div{display:flex;flex-direction:column;gap:2px}
.info-list li > div strong{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:700}
#contact .section-head{margin-bottom:16px}
.phone-big{
  font-size:clamp(1.5rem,1.2rem + 1.3vw,2.1rem);font-weight:800;
  color:#fff;letter-spacing:-.01em;text-decoration:none;display:inline-block;
}
.phone-big:hover{color:var(--blauw-licht);text-decoration:none}

/* ---------- Footer ---------- */
.footer{background:var(--bg-3);color:var(--tekst-licht);padding:70px 0 28px;font-size:.9rem;position:relative}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.footer__brand img{width:190px;margin-bottom:16px}
.footer__brand p{color:rgba(255,255,255,.5);font-size:.88rem}
.footer .social a{border-color:var(--lijn-sterk);color:rgba(255,255,255,.65)}
.footer .social a:hover{background:var(--blauw);border-color:var(--blauw);color:#fff}
.footer h4{color:#fff;margin-bottom:14px;font-size:.76rem;letter-spacing:.14em}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.footer a{color:rgba(255,255,255,.58)}
.footer a:hover{color:var(--blauw-licht);text-decoration:none}
.footer__bottom{
  margin-top:46px;padding-top:22px;border-top:1px solid var(--lijn);
  font-size:.82rem;color:rgba(255,255,255,.4);text-align:center;
}

/* ---------- Projecten: before/after kaarten ---------- */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.proj{
  background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:22px 22px 24px;box-shadow:var(--shadow);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;
}
.proj:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(18,167,217,.45);background:var(--kaart-hover)}
.proj h3{font-size:.92rem;margin-bottom:16px;min-height:2.4em;color:rgba(255,255,255,.92)}
.proj__photo{margin:-22px -22px 18px;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;aspect-ratio:4/3}
.proj__photo img{width:100%;height:100%;object-fit:cover;display:block}
.proj__compare{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.proj__before,.proj__after{display:flex;flex-direction:column;gap:2px}
.proj__after{align-items:flex-end;text-align:right}
.proj__label{font-size:.62rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tekst-licht)}
.proj__before strong{font-size:1.3rem;font-weight:800;color:rgba(255,255,255,.75)}
.proj__after strong{font-size:1.3rem;font-weight:800;color:var(--blauw-licht)}
.proj__nm{font-size:.72rem;color:var(--tekst-licht)}
.proj__arrow{color:var(--blauw);flex:none}

/* ---------- FAQ accordion ---------- */
.faq-list{max-width:840px;margin:0 auto;display:grid;gap:12px}
.faq{
  background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--radius);
  overflow:hidden;transition:border-color .2s ease,background .2s ease;
}
.faq:hover{border-color:rgba(18,167,217,.35)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 26px;background:none;border:0;cursor:pointer;text-align:left;
  font-family:inherit;font-size:1rem;font-weight:700;color:#fff;
}
.faq__q .faq__icon{flex:none;color:var(--blauw-licht);transition:transform .25s ease}
.faq[open] .faq__q .faq__icon{transform:rotate(180deg)}
.faq__a{padding:0 26px 24px;color:var(--tekst);font-size:.96rem;line-height:1.7}
.faq summary{list-style:none}
.faq summary::-webkit-details-marker{display:none}

/* ---------- Garantie clausules ---------- */
.garantie-list{max-width:880px;margin:0 auto;display:grid;gap:18px}
.garantie-item{
  display:grid;grid-template-columns:56px 1fr;gap:22px;align-items:flex-start;
  padding:30px 28px;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--radius);
}
.garantie-item__icon{
  width:56px;height:56px;border-radius:14px;flex:none;background:var(--blauw-soft);
  display:grid;place-items:center;color:var(--blauw-licht);
}
.garantie-item h3{margin-bottom:10px;font-size:1.05rem}
.garantie-item p{color:var(--tekst);font-size:.96rem;margin-bottom:0}

/* ---------- Sticky mobile bar ---------- */
.mobile-bar{display:none}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn:hover,.card:hover{transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1700px){
  .header__actions .btn--wa span{display:none}
}
@media (max-width:1560px){
  .header__actions .social{display:none}
}
@media (max-width:1400px){
  .nav a{font-size:.685rem;padding:8px 5px;letter-spacing:0}
  .brand img{width:150px}
  .header__actions .btn span{display:none}
  .header__actions .btn--sm{padding:11px 13px}
}
@media (max-width:1200px){
  .nav{display:none}
  .header__actions .social{display:none}
  .header__actions .btn span{display:inline}
  .header__actions .btn--wa span{display:none}
  .header__actions .btn--sm{padding:11px 16px}
  .brand img{width:172px}
  .burger{display:flex}
}
@media (max-width:980px){
  .grid--2-1,.grid--1-2{grid-template-columns:1fr;gap:40px}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .opt-grid{grid-template-columns:repeat(2,1fr)}
  .proj-grid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero{padding:78px 0 100px;background-position:65% center}
  /* lichtere sluier: de hero-foto moet op mobiel zichtbaar blijven */
  .hero::before{background:rgba(6,9,10,.64)}
  .hero::after{background:none}
  .hero h1,.hero .sub,.hero .eyebrow,.trust{text-shadow:0 2px 14px rgba(0,0,0,.72),0 1px 3px rgba(0,0,0,.6)}
  .grid--2,.grid--3{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .feat{grid-template-columns:56px 1fr;gap:16px;padding:20px}
  .feat__num{width:56px;height:56px}
  .feat__num img{width:52px;height:52px}
  .btn{width:100%}
  .btn--sm{width:auto}
  .btn-row{gap:11px}
  .header__actions .btn span{display:none}
  .header__actions .btn--sm{padding:10px 12px}
  .card{padding:26px 22px}
  .opt-grid{grid-template-columns:1fr}
  .opt{padding:22px 20px}
  .proj-grid{grid-template-columns:1fr}
  .garantie-item{grid-template-columns:1fr;gap:14px}
  .faq__q{padding:18px 20px;font-size:.92rem}
  .faq__a{padding:0 20px 20px}
  main{padding-bottom:66px}
  .mobile-bar{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:rgba(0,0,0,.5);
    box-shadow:0 -6px 22px rgba(0,0,0,.5);
  }
  .mobile-bar a{
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:15px 8px;font-size:.86rem;font-weight:700;letter-spacing:.05em;
    text-transform:uppercase;text-decoration:none;
  }
  .mobile-bar a:first-child{background:var(--blauw);color:#fff}
  .mobile-bar a:last-child{background:var(--geel);color:var(--geel-ink)}
  .mobile-menu{inset:70px 0 0}
}

/* =========================================================
   Kleurtinten (site-breed toepasbaar via body-class)
   Kleurtinten i.p.v. helderheidssprong: de secties houden
   ongeveer dezelfde donkerte als het oorspronkelijke ontwerp,
   maar krijgen een andere kleurtoon. Daardoor springen de
   crispy kartels eruit zonder dat de pagina lichter wordt.
   Varianten: .tint-petrol .tint-indigo .tint-grafiet .tint-staal
   ========================================================= */

/* 1. Petrol — koel zwart tegen diep blauwgroen (dichtst bij de huisstijl) */
.tint-petrol{
  --bg:#04080D;        /* koel zwart, licht groenblauw */
  --bg-2:#14202E;      /* petrol, duidelijk andere toon, amper lichter */
  --bg-3:#07182A;      /* footer: dieper petrol */
  --kaart:#1B2939;
  --kaart-alt:#1B2939;
  --cta:#192839;
}

/* 2. Indigo — zwart tegen blauwviolet */
.tint-indigo{
  --bg:#04080D;
  --bg-2:#14202E;
  --bg-3:#07182A;
  --kaart:#1B2939;
  --kaart-alt:#1B2939;
}

/* 3. Grafiet — koel zwart tegen warm grafiet (kleurtegenstelling warm/koud) */
.tint-grafiet{
  --bg:#04080D;
  --bg-2:#14202E;
  --bg-3:#07182A;
  --kaart:#1B2939;
  --kaart-alt:#1B2939;
}

/* 4. Staal — zwart tegen koel staalblauw, laagste verzadiging */
.tint-staal{
  --bg:#04080D;
  --bg-2:#14202E;
  --bg-3:#07182A;
  --kaart:#1B2939;
  --kaart-alt:#1B2939;
}

body[class*="tint-"]{background:var(--bg)}
body[class*="tint-"] .section{background:var(--bg)}
body[class*="tint-"] .section--alt{background:var(--bg-2)}
body[class*="tint-"] .footer{background:var(--bg-3)}

/* kaarten meenemen in de toon van hun sectie */
body[class*="tint-"] .card,body[class*="tint-"] .feat,body[class*="tint-"] .review,body[class*="tint-"] blockquote.card,body[class*="tint-"] .opt,body[class*="tint-"] .faq,body[class*="tint-"] .garantie-item,body[class*="tint-"] .proj,body[class*="tint-"] .svc{background:var(--kaart)}
body[class*="tint-"] .section--alt .card,
body[class*="tint-"] .section--alt .feat,
body[class*="tint-"] .section--alt .review,
body[class*="tint-"] .section--alt .opt,
body[class*="tint-"] .section--alt .faq,
body[class*="tint-"] .section--alt .proj,
body[class*="tint-"] .section--alt .svc,
body[class*="tint-"] .section--alt blockquote.card{background:var(--kaart-alt)}

/* =========================================================
   Homepage-blokken — opbouw 1:1 uit de bijgeleverde broncode,
   maar alles ONDER ELKAAR (nooit tekst naast tekst/beeld)
   ========================================================= */

/* gestapeld blok: kop -> beeld -> tekst, alles op volle breedte */
.blok{max-width:900px;margin:0 auto}
.blok .eyebrow{display:block;margin-bottom:14px}
.blok h2{margin-bottom:26px}
.blok .beeld{margin:0 0 34px}
.blok .beeld img{max-height:460px;width:100%;object-fit:cover}
.blok p{max-width:none}
.blok--breed{max-width:1040px}

/* configurator-strook */
.configurator{text-align:center}
.configurator .inner{max-width:760px;margin:0 auto}
.conf-link{
  display:inline-flex;align-items:center;gap:18px;margin-top:30px;
  padding:18px 26px;border-radius:999px;text-decoration:none;
  background:var(--blauw-soft);border:1px solid rgba(18,167,217,.42);
  color:#fff;font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:.9rem;
  transition:background .2s ease,transform .2s ease,border-color .2s ease;
}
.conf-link:hover{background:rgba(18,167,217,.24);border-color:var(--blauw);transform:translateY(-3px);text-decoration:none}
.conf-link img{width:38px;height:38px;flex:none}

/* voordelen-kaarten (SNELHEID / PRESTATIE / BRANDSTOF) */
.voordeel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.voordeel{
  position:relative;background:var(--kaart);border:1px solid var(--lijn);
  border-radius:var(--radius);padding:34px 28px;box-shadow:var(--shadow);
  transition:transform .22s ease,border-color .22s ease;
}
.voordeel:hover{transform:translateY(-4px);border-color:rgba(18,167,217,.45)}
.voordeel__nr{
  position:absolute;top:22px;right:24px;font-size:1.5rem;font-weight:800;
  color:rgba(255,255,255,.08);letter-spacing:-.02em;
}
.voordeel img{width:66px;height:66px;object-fit:contain;margin-bottom:22px}
.voordeel h3{margin-bottom:16px;color:var(--wit)}
.voordeel ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.voordeel li{position:relative;padding-left:22px;font-size:.95rem;color:var(--tekst)}
.voordeel li::before{
  content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;
  background:var(--blauw);
}

/* diensten-accordeon met de eigen iconen van de site */
.svc-list{display:grid;gap:14px;max-width:1000px;margin:0 auto}
.svc{
  background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--radius);
  overflow:hidden;transition:border-color .2s ease;
}
.svc[open],.svc:hover{border-color:rgba(18,167,217,.38)}
.svc__q{
  display:grid;grid-template-columns:44px 64px 1fr 30px;align-items:center;gap:20px;
  padding:20px 24px;cursor:pointer;list-style:none;
  font-weight:700;color:var(--wit);text-transform:uppercase;
  font-size:.98rem;letter-spacing:.02em;word-spacing:.12em;line-height:1.35;
}
.svc__q::-webkit-details-marker{display:none}
.svc__nr{font-size:.82rem;font-weight:700;color:var(--blauw-licht);letter-spacing:.06em}
.svc__ic{width:64px;height:64px;display:grid;place-items:center}
.svc__ic img{width:100%;height:100%;object-fit:contain}
.svc__pijl{
  position:relative;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--lijn-sterk);justify-self:end;
}
.svc__pijl::before,.svc__pijl::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--blauw-licht);
  transform:translate(-50%,-50%);transition:opacity .2s ease;
}
.svc__pijl::before{width:11px;height:2px}
.svc__pijl::after{width:2px;height:11px}
.svc[open] .svc__pijl::after{opacity:0}
.svc__a{padding:0 24px 26px;border-top:1px solid var(--lijn);margin-top:2px;padding-top:22px}
.svc__a p{color:var(--tekst);font-size:.97rem}
.svc__a ul{margin:18px 0 0}

@media (max-width:980px){
  .voordeel-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .blok .beeld img{max-height:300px}
  .svc__q{grid-template-columns:34px 46px 1fr 26px;gap:12px;padding:16px 18px;font-size:.88rem}
  .svc__ic{width:46px;height:46px}
  .svc__a{padding:20px 18px 22px}
  .conf-link{width:100%;justify-content:center;font-size:.8rem;padding:16px 18px}
  .hero{min-height:0}
}

/* ---- SPLIT: afbeelding en tekst naast elkaar, om en om ---- */
.split{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:center;gap:clamp(40px,6vw,96px);
}
.split--rev{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.split--rev .split__beeld{order:2}
.split--rev .split__tekst{order:1}
.split__beeld img{
  display:block;width:100%;max-width:460px;height:auto;margin:0 auto;
}
.split__tekst h2{margin-bottom:18px}
.split__tekst p{margin-bottom:16px}
.split__tekst p:last-child{margin-bottom:0}
@media(max-width:900px){
  .split,.split--rev{grid-template-columns:1fr;gap:32px}
  .split--rev .split__beeld{order:0}
  .split--rev .split__tekst{order:0}
  .split__beeld img{max-width:380px}
}

/* ---- TOPMERKEN groter ---- */
.brands-row{gap:clamp(20px,2.4vw,36px)}
.brands-row .brand-badge{padding:10px 6px}
.brands-row .brand-badge img{height:54px}
@media(max-width:640px){.brands-row .brand-badge img{height:44px}}

/* ---- Kartelvarianten: elke scheur anders, geen herhalend patroon ---- */
.torn--1{--crispy:url(../img/crispy-1.svg);--th:clamp(24px,3vw,48px)}
.torn--2{--crispy:url(../img/crispy-2.svg);--th:clamp(18px,2.2vw,36px)}
.torn--3{--crispy:url(../img/crispy-3.svg);--th:clamp(28px,3.6vw,58px)}
.torn--4{--crispy:url(../img/crispy-4.svg);--th:clamp(20px,2.5vw,40px)}
.torn--5{--crispy:url(../img/crispy-5.svg);--th:clamp(26px,3.3vw,52px)}
.torn--6{--crispy:url(../img/crispy-6.svg);--th:clamp(16px,2vw,30px)}

/* CTA-band: één egale kleur, ook binnen de tint-varianten */
body[class*="tint-"] .cta,
body[class*="tint-"] .section.cta{background:var(--cta,var(--kaart-alt))}

/* =========================================================
   Nieuwe paletten — diepere, verzadigde tonen in plaats van
   grijsblauwe modder. Elke laag een duidelijke stap:
   bg  <  bg-2  <  kaart  <  kaart-alt, cta als eigen accentband.
   ========================================================= */

/* A. Nachtblauw — inktzwart met echt blauw, CTA in diep brandteal */
.tint-nacht{
  --bg:#04080D;
  --bg-2:#14202E;
  --bg-3:#07182A;
  --kaart:#1B2939;
  --kaart-alt:#1B2939;
  --cta:#192839;
  --kaart-hover:#1B2939;
  --header-bg:#050B12;
  --lijn:rgba(120,190,235,.10);
  --lijn-sterk:rgba(120,190,235,.20);
}

/* B. Oceaan — donkerder groenblauw, CTA duidelijk cyaan-geladen */
.tint-oceaan{
  --bg:#04080D;
  --bg-2:#14202E;
  --bg-3:#07182A;
  --kaart:#1B2939;
  --kaart-alt:#1B2939;
  --cta:#192839;
  --kaart-hover:#1B2939;
  --header-bg:#050B12;
  --lijn:rgba(110,205,225,.10);
  --lijn-sterk:rgba(110,205,225,.20);
}

/* C. Kobalt — neutrale antraciet met kobaltblauwe band */
.tint-kobalt{
  --bg:#04080D;
  --bg-2:#14202E;
  --bg-3:#07182A;
  --kaart:#1B2939;
  --kaart-alt:#1B2939;
  --cta:#192839;
  --kaart-hover:#1B2939;
  --header-bg:#050B12;
  --lijn:rgba(150,180,220,.10);
  --lijn-sterk:rgba(150,180,220,.20);
}

/* =========================================================
   MOBIEL — verfijning (homepage als uitgangspunt)
   ========================================================= */
@media (max-width:640px){

  /* leesbaarheid: iets compacter, minder muur-van-tekst */
  body{font-size:15.5px;line-height:1.68}
  p{margin:0 0 15px}
  .container{padding-left:20px;padding-right:20px}
  .section{padding:54px 0}
  .section.torn,.cta.torn{padding-top:58px}
  .section-head{margin-bottom:34px}
  .section-head h2{font-size:1.52rem;line-height:1.22}
  .hero h1{font-size:2.02rem;line-height:1.1}
  .hero .sub{font-size:1rem;margin-bottom:26px}

  /* knoppenrijen overal naast elkaar i.p.v. volle balken onder elkaar */
  .btn-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px}
  .btn-row .btn{width:100%;padding:14px 8px;font-size:.78rem;letter-spacing:.03em}
  .btn-row .btn svg{width:14px;height:14px}
  .btn-row .btn--sm{width:auto;justify-self:center}
  .trust{gap:8px 18px;margin-top:26px;font-size:.8rem}

  /* beeld in split-secties niet meer beeldvullend */
  .split,.split--rev{gap:26px}
  .split__beeld{display:flex;justify-content:center}
  .split__beeld img{max-width:268px}

  /* topmerken: raster i.p.v. één lange kolom */
  .brands-row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 10px;justify-items:center}
  .brands-row .brand-badge{padding:12px 4px;width:100%}
  .brands-row .brand-badge img{height:40px}
  .brands-row .brand-badge:nth-child(5){grid-column:1 / -1}

  /* projectkaarten: vergelijking leesbaar houden */
  .proj{padding:18px}
  .proj__photo{margin:-18px -18px 14px}
  .proj h3{font-size:.86rem;min-height:0;margin-bottom:14px}
  .proj__compare{gap:8px}
  .proj__label{font-size:.55rem;letter-spacing:.04em;line-height:1.3}
  .proj__before strong,.proj__after strong{font-size:1.16rem}
  .proj__nm{font-size:.66rem}

  /* CTA-band: kop en knoppen netjes onder elkaar met lucht */
  .cta__inner{gap:24px}
  .cta__inner > div:first-child{max-width:none}
  .cta .btn-row{width:100%}

  /* reviews en contactblok wat compacter */
  .review{padding:22px 20px}
  .phone-big{font-size:1.85rem}

  /* de vaste belbalk mag de footer niet afdekken */
  main{padding-bottom:0}
  .footer{padding-bottom:84px}
  .footer__grid{gap:26px}

  /* voordeelkaarten compacter */
  .voordeel{padding:24px 20px}
  .voordeel img{width:54px;height:54px;margin-bottom:16px}
  .voordeel h3{font-size:1rem;margin-bottom:12px}
  .voordeel li{font-size:.9rem;padding-left:20px}
  .voordeel__nr{top:16px;right:18px;font-size:1.25rem}
  .voordeel-grid{gap:16px}

  /* ankers niet onder de vaste header */
  [id]{scroll-margin-top:86px}

  /* header: logo wat kleiner zodat de knoppen niet aanplakken */
  .header__logo img,.header .logo img{max-height:30px}

  /* mobiel menu: knoppen naast elkaar, belbalk eronder weg */
  .mobile-menu .container{padding-bottom:40px}
  .mobile-menu .btn{margin-top:18px}
  .mobile-menu .btn{width:100%}
  .mobile-menu .social{margin-top:22px}
  body.menu-open .mobile-bar,
  body:has(.mobile-menu.open) .mobile-bar{display:none}

  /* diensten-accordeon: icoon iets groter, tekst ademt */
  .svc__q{grid-template-columns:28px 44px 1fr 24px;gap:11px;padding:15px 16px;font-size:.85rem}
  .svc__ic{width:44px;height:44px}
  .svc__nr{font-size:.72rem}
}

/* Afstemming van de testsite */
/* De footer begint hoger: het donkerblauwe vlak wordt groter. */
main > .section:last-child{padding-bottom:clamp(150px,12vw,200px)}
main > .contact-band:last-child{padding-top:clamp(72px,6vw,96px)}
.contact-band .reveal.center{max-width:700px!important}
.contact-band .lead,.contact-band .section-head p{margin-inline:auto}
.contact-band .phone-big{margin-top:4px}
.contact-band .btn-row{justify-content:center}
#contact .section-head{margin-bottom:22px}
@media (max-width:640px){
  main > .section:last-child{padding-bottom:132px}
  main > .contact-band:last-child{padding-top:66px}
}

/* Vijf merken in één rij op grotere schermen. */
@media (min-width:761px){
  .brands-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.6vw,24px)}
  .brands-row .brand-badge{min-width:0;padding:10px 0;width:100%}
  .brands-row .brand-badge img{max-width:100%;height:auto;max-height:54px;object-fit:contain}
}
@media (min-width:641px) and (max-width:760px){
  .brands-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
  .brands-row .brand-badge{min-width:0;padding:6px 0}
  .brands-row .brand-badge img{max-width:100%;height:auto;max-height:44px}
}

/* Ruimer desktopmenu en een duidelijker logo. */
@media (min-width:1401px){
  .header__inner{max-width:1860px;min-height:96px;gap:22px}
  .brand img{width:218px}
  .nav{gap:clamp(5px,.6vw,11px)}
  .nav a{font-size:.735rem;letter-spacing:.02em;padding:10px 7px}
}
@media (max-width:1400px) and (min-width:1201px){
  .header__inner{min-height:88px}
  .brand img{width:196px}
  .nav{display:none}
  .burger{display:flex}
  .mobile-menu{inset:88px 0 0}
}
@media (max-width:1200px) and (min-width:641px){
  .header__inner{min-height:86px}
  .brand img{width:192px}
  .mobile-menu{inset:86px 0 0}
}
@media (max-width:640px){
  .header__inner{min-height:80px}
  .brand img{width:clamp(152px,41vw,186px)}
  .mobile-menu{inset:80px 0 0}
}

.database-view{padding-top:clamp(62px,7vw,100px);padding-bottom:120px;background:#04080d}
.database-view .section-head{margin:0 auto 18px;text-align:center;max-width:850px}
.database-view .database-intro{font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;color:#fff}
.database-frame{display:block;width:100%;min-height:900px;border:0;background:#04080d;border-radius:0;box-shadow:none;outline:0}
@media(max-width:640px){.database-view{padding-top:56px}.database-frame{border-radius:0}}

/* De footer trekt omhoog over de extra ruimte van de laatste sectie.
   Alleen de footer krijgt deze grotere overlap; de overige overgangen
   houden hun eigen hoogte. */
.footer.torn{
  --th:clamp(30px,3vw,52px);
  margin-top:calc(-1 * clamp(112px,10vw,150px));
  padding-top:clamp(150px,12vw,182px);
}
@media(max-width:640px){
  .footer.torn{--th:34px;margin-top:-110px;padding-top:138px}
}

/* Contactgegevens evenwichtig naast de belinformatie plaatsen. */
.contact-info-grid{align-items:center}

.review__secondary-link{display:block;margin-top:14px;font-size:.84rem}
/* AutoChipper — rustige kleuren en gerichte weergave, 21 oktober 2026 */
:root{--bg:#04080D;--bg-2:#14202E;--bg-3:#07182A;--kaart:#1B2939;--kaart-alt:#1B2939;--kaart-hover:#1B2939;--cta:#192839;--header-bg:#050B12}
.hero::after,body:not(.pagina-home) .hero::after{background:none}
.header{backdrop-filter:none}
.btn--secondary,.conf-link,.conf-link:hover{background:var(--kaart)}
.btn--secondary:hover{background:var(--kaart)}
.btn--primary,.btn--primary:hover,.btn--wa,.btn--wa:hover{box-shadow:none}
main > .section:last-child{padding-bottom:90px}
.footer.torn{margin-top:calc(-1 * var(--th));padding-top:calc(var(--th) + 32px)}
.svc__q{grid-template-columns:28px 64px minmax(0,1fr) 30px;gap:28px}
.gearbox-visual{position:relative;width:100%;max-width:460px;margin:0 auto;padding:14px;background:none;border:0;border-radius:0;overflow:visible;box-shadow:none}
.gearbox-visual img{display:block;width:100%;height:auto;border-radius:14px;object-fit:contain}
.gearbox-visual::before,.gearbox-visual::after{content:"";position:absolute;width:30%;height:23%;pointer-events:none;border:3px solid var(--blauw);border-radius:14px}
.gearbox-visual::before{left:0;top:0;border-right:0;border-bottom:0}
.gearbox-visual::after{right:0;bottom:0;border-left:0;border-top:0}
@media(max-width:900px){.gearbox-visual{max-width:380px}}
@media(max-width:640px){
 .btn, .btn-row .btn, .mobile-menu .btn{width:auto;max-width:100%;flex:0 1 auto;padding:10px 16px;font-size:.82rem;line-height:1.3;align-self:flex-start}
 .btn-row{display:flex;flex-wrap:wrap;gap:10px}
 .mobile-menu .btn{align-self:center}
 .conf-link{width:auto;max-width:100%;padding:10px 16px;gap:10px;border-radius:9px;font-size:.82rem;letter-spacing:.04em;line-height:1.3;margin-top:22px}
 .conf-link img{width:22px;height:22px}
 .proj__compare{grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);gap:10px}
 .proj__before,.proj__after{min-width:0;gap:5px}
 .proj__label{font-size:.8rem;letter-spacing:.02em;line-height:1.45;color:rgba(255,255,255,.8);overflow-wrap:anywhere}
 .proj__before strong,.proj__after strong{font-size:1.5rem;line-height:1.3}
 .proj__nm{font-size:.88rem;line-height:1.45;color:rgba(255,255,255,.78)}
 .proj__arrow{width:18px}
 .svc__q{grid-template-columns:16px 44px minmax(0,1fr) 24px;gap:17px}
 .torn{--th:24px;-webkit-mask-size:1240px var(--th),100% calc(100% - var(--th) + 1px);mask-size:1240px var(--th),100% calc(100% - var(--th) + 1px);-webkit-mask-position:top center,bottom left;mask-position:top center,bottom left}
 .torn--2{--th:18px}.torn--3{--th:28px}.torn--4{--th:20px}.torn--5{--th:26px}.torn--6{--th:16px}
 .section.torn,.cta.torn{padding-top:calc(var(--th) + 30px)}
 main > .section:last-child{padding-bottom:72px}
 .footer.torn{--th:34px;margin-top:calc(-1 * var(--th));padding-top:calc(var(--th) + 28px)}
 .gearbox-visual{max-width:268px;padding:10px}
 .heading-punctuation{display:none}
}

/* Navigatie binnen de beschikbare desktopbreedte houden. */
@media(min-width:1401px) and (max-width:1560px){.header__inner{gap:14px}.brand img{width:196px}.nav{gap:2px}.nav a{padding-left:5px;padding-right:5px;font-size:.69rem}}

/* Footerlogo en fotokader gelijk aan de homepagebeelden. */
.footer__brand img{width:340px;max-width:100%;height:auto;margin-bottom:24px}
.gearbox-visual{aspect-ratio:529 / 721;padding:0;display:block}
.gearbox-visual img{position:absolute;z-index:1;left:3.7807%;top:4.1609%;width:90.5482%;height:94.1748%;max-width:none;border-radius:5px;object-fit:cover;margin:0}
.gearbox-visual::before{left:7.7505%;top:1.3870%;width:90.5482%;height:94.1748%;border:2.5px solid var(--blauw);border-radius:5px}
.gearbox-visual::after{content:none}
@media(max-width:640px){.gearbox-visual{padding:0}.gearbox-visual::before{border-width:1.5px}}


/* AutoChipper: consistente verfijning, 23 oktober 2026 */
.footer,body[class*="tint-"] .footer{background:var(--bg-2)}
.footer__brand img{width:260px;margin-bottom:20px}
.feat__body p + p{margin-top:12px}
.faq__q{
 font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
 font-size:clamp(1rem,.95rem + .4vw,1.18rem);font-weight:700;
 line-height:1.35;letter-spacing:.02em;text-transform:uppercase;color:var(--wit);
}
@media(max-width:640px){
 .header__inner{position:relative;justify-content:flex-end}
 .header .brand{position:absolute;left:50%;transform:translateX(-50%)}
 .header__actions{margin-left:auto}
 .header__actions > .btn,.header__actions > .social{display:none}
 .hero{padding:64px 0 84px;background-position:center center}
 .hero::before,body:not(.pagina-home) .hero::before{background:rgba(6,9,10,.54)}
 .hero .trust{flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:8px}
 .hero .trust > span{max-width:100%}
 .proj__label{font-size:.75rem}
 .proj__before strong,.proj__after strong{font-size:1.4rem}
 .proj__nm{font-size:.82rem}
 .proj__photo--roomy{padding:7px;background:var(--kaart)}
 .proj__photo--roomy img{object-fit:contain}
 .gearbox-torque .grid--1-2{gap:14px}
 .gearbox-torque h2{margin-bottom:0}
 .feat{grid-template-columns:minmax(0,1fr);gap:0;padding:22px 20px}
 .feat__num{width:56px;height:56px;margin-bottom:16px}
 .feat__num img{width:56px;height:56px}
 .feat__body h3{font-size:1.08rem;margin-bottom:10px}
 .feat__body p{font-size:.93rem}
}

@media(max-width:360px){.mobile-bar a{font-size:.78rem;letter-spacing:.03em;gap:6px;padding-left:6px;padding-right:6px}}

/* Stage 1-aanbieding en openingstijden — 24 oktober 2026 */
.openingstijden strong{font-weight:600;white-space:nowrap}
.stage-offer{background:#04080D;text-align:center}
.stage-offer__inner{max-width:820px;margin:0 auto}
.stage-offer h2{font-size:clamp(2rem,4.2vw,3.8rem);line-height:1.12;letter-spacing:-.025em;margin-bottom:24px}
.stage-offer__price{color:var(--blauw);white-space:nowrap;display:inline-block}
.stage-offer p{max-width:58ch;margin:0 auto 28px;font-size:clamp(1rem,.96rem + .3vw,1.12rem);line-height:1.75}
.stage-offer .btn{width:auto;max-width:100%;white-space:normal}
@media(max-width:640px){
  .stage-offer h2{margin-bottom:20px}
  .stage-offer p{margin-bottom:24px}
  .stage-offer .btn{gap:7px;letter-spacing:.02em}
}

@media(max-width:360px){
  .stage-offer h2{font-size:1.65rem}
  .stage-offer .btn{font-size:.78rem;letter-spacing:0;gap:6px;padding-left:12px;padding-right:12px}
}

/* Toegankelijkheid en vaste kopstijl, 28 oktober 2026. */
.footer .footer__heading{color:#fff;margin:0 0 14px;font-size:.76rem;font-weight:700;line-height:1.14;letter-spacing:.14em;text-transform:uppercase}
.footer__bottom{color:rgba(255,255,255,.72)}
@media(max-width:767px){.mobile-bar a:first-child{color:#052633}}