:root {
  --surface-base: #121114;
  --surface-1:    #1B1A1F;
  --surface-2:    #242229;
  --hairline:     #332F3B;
  --ink:          #181818;
  --text-1:       #F4F2F6;
  --text-2:       #A9A4B3;
  --accent:       #783088;
  --accent-hi:    #9A44AE;
  --accent-txt:   #C07BD1;
  --s1: .5rem;  --s2: 1rem;  --s3: 1.5rem;  --s4: 2rem;
  --s5: 3rem;   --s6: 4rem;  --s7: 6rem;
  --maxw: 1240px;
  --gut: 1.25rem;
  --snede: 56px;
  --font-kop: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-txt: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --trans: .28s cubic-bezier(.4, 0, .2, 1);
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-var.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('fonts/figtree-var.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--surface-base);
  color: var(--text-1);
  font: 400 1.0625rem/1.65 var(--font-txt);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
p { margin: 0 0 var(--s2); }
address { font-style: normal; }
a { color: var(--accent-txt); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--text-1); }
h1, h2, h3 {
  font-family: var(--font-kop);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.06;
  margin: 0 0 var(--s2);
  text-wrap: balance;
}
h1 { font-weight: 800; font-size: clamp(2.25rem, 8vw, 3.75rem); }
h2 { font-size: clamp(1.9rem, 5.4vw, 2.75rem); }
h3 { font-size: 1.25rem; letter-spacing: -.01em; }
:focus-visible { outline: 2px solid var(--accent-txt); outline-offset: 3px; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: var(--s2) var(--s3);
  font-family: var(--font-kop); font-weight: 600;
}
.skip:focus { left: 0; }
.wrap {
  width: 100%; max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.lead {
  font-size: clamp(1.0625rem, 2.4vw, 1.25rem);
  color: var(--text-2);
  max-width: 40ch;
  margin-bottom: 0;
}
.acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0; }
.lead + .acties { margin-top: var(--s4); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem;
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: .75rem 1.75rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--trans), border-color var(--trans), color var(--trans);
}
.btn:active { transform: translateY(1px); }
.btn-primair { background: var(--accent); color: #fff; }
.btn-primair:hover, .btn-primair:focus-visible { background: var(--accent-hi); color: var(--ink); }
.btn-tweede { background: transparent; color: var(--text-1); border-color: var(--text-2); }
.btn-tweede:hover, .btn-tweede:focus-visible { border-color: var(--accent-hi); color: var(--accent-txt); }
.btn-klein { min-height: 2.75rem; padding: .5rem 1rem; font-size: .8125rem; }
.kop {
  position: sticky; top: 0; z-index: 50;
  background: rgba(18, 17, 20, .92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.kop-in {
  display: flex; align-items: center;
  gap: .75rem;
  min-height: 68px;
}
.merk { display: block; line-height: 0; flex: 0 1 auto; min-width: 0; }
.merk img { width: clamp(124px, 34vw, 220px); }
.kop-acties { display: flex; align-items: center; gap: var(--s3); margin-left: auto; order: 1; }
.burger { order: 2; }
.kop-tel { display: none; }
.burger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  flex: 0 0 44px; height: 44px;
  background: none; border: 1px solid var(--hairline);
  cursor: pointer;
}
.burger span {
  display: block; width: 20px; height: 1.5px;
  margin-inline: auto;
  background: var(--text-1);
  transition: transform var(--trans), opacity var(--trans);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav {
  position: absolute; left: 0; right: 0; top: 100%;
  max-height: calc(100svh - 68px); overflow-y: auto;
  background: var(--surface-1);
  border-bottom: 1px solid var(--hairline);
  display: none;
}
.nav.open { display: block; }
.nav > ul > li + li { border-top: 1px solid var(--hairline); }
.nav a {
  display: block;
  padding: var(--s2) var(--gut);
  font-family: var(--font-kop); font-weight: 500; font-size: 1rem;
  color: var(--text-1); text-decoration: none;
}
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"], .nav a.in-pad { color: var(--accent-txt); }
.sub-knop { display: none; }
.sub { padding-bottom: var(--s1); }
.sub a {
  padding: .6rem var(--gut) .6rem calc(var(--gut) + 1.25rem);
  font-weight: 400; font-size: .9375rem; color: var(--text-2);
}
.kop-tel {
  font-family: var(--font-kop); font-weight: 600; font-size: .9375rem;
  color: var(--text-1); text-decoration: none; white-space: nowrap;
}
.kop-tel:hover { color: var(--accent-txt); }
@media (min-width: 1000px) {
  .burger, .nav-tel { display: none; }
  .nav { position: static; display: block; background: none; border: 0; margin-left: auto; max-height: none; overflow: visible; }
  .nav > ul { display: flex; align-items: center; gap: var(--s3); }
  .nav > ul > li + li { border: 0; }
  .nav > ul > li > a { padding: .35rem 0; position: relative; white-space: nowrap; font-size: .9375rem; }
  .kop-acties { margin-left: var(--s3); }
  .nav > ul > li > a::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 100%; height: 2px;
    background: var(--accent-hi);
    clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--trans);
  }
  .nav > ul > li > a:hover::after, .nav > ul > li > a:focus-visible::after,
  .nav > ul > li > a[aria-current="page"]::after, .nav > ul > li > a.in-pad::after { transform: scaleX(1); }
  .heeft-sub { position: relative; display: flex; align-items: center; gap: .15rem; }
  .sub-knop {
    display: grid; place-items: center;
    width: 28px; height: 28px; padding: 0;
    background: none; border: 0; cursor: pointer;
  }
  .sub-knop span {
    width: 7px; height: 7px; margin-top: -4px;
    border-right: 1.5px solid var(--text-1); border-bottom: 1.5px solid var(--text-1);
    transform: rotate(45deg);
    transition: transform var(--trans);
  }
  .sub-knop[aria-expanded="true"] span { transform: rotate(225deg); margin-top: 4px; }
  .sub {
    position: absolute; top: 100%; left: -1.1rem;
    min-width: 15.5rem;
    padding: .5rem 0;
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    display: none;
  }
  .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -1.25rem; height: 1.25rem; }
  .heeft-sub:hover > .sub, .heeft-sub:focus-within > .sub, .sub.open { display: block; }
  .sub a { padding: .55rem 1.1rem; color: var(--text-1); white-space: nowrap; }
  .sub li:first-child a { color: var(--text-2); }
  .sub a:hover, .sub a:focus-visible { background: var(--surface-2); color: var(--accent-txt); }
}
@media (min-width: 1180px) {
  .kop-tel { display: inline-flex; }
}
.fotogat {
  position: relative;
  display: grid; place-items: center;
  width: 100%;
  background-color: var(--surface-1);
  background-image: linear-gradient(135deg,
    transparent calc(50% - .5px), var(--hairline) calc(50% - .5px),
    var(--hairline) calc(50% + .5px), transparent calc(50% + .5px));
  border: 1px dashed var(--hairline);
  color: var(--text-2);
  font: 500 .75rem/1 var(--font-kop);
  letter-spacing: .14em; text-transform: uppercase;
}
.fotogat span { background: var(--surface-1); padding: .45rem .7rem; }
.fotogat--proef, .fotogat--beeld { background-color: var(--surface-1); background-image: none; border: 0; overflow: hidden; }
.fotogat--proef img, .fotogat--beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fotogat--proef span {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 1;
  background: rgba(24, 24, 24, .9); color: #fff;
  font-size: .625rem; letter-spacing: .08em; padding: .4rem .55rem;
}
.fotogat--snede span, .fotogat--snede-groot span { left: auto; right: 1rem; }
.fotogat--32  { aspect-ratio: 3 / 2; }
.fotogat--219 { aspect-ratio: 3 / 2; }
.fotogat--45  { aspect-ratio: 5 / 4; }
.fotogat--hero { aspect-ratio: 4 / 3; }
.fotogat--snede { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--snede) 100%, 0 calc(100% - var(--snede))); }
.fotogat--snede::after, .fotogat--snede-groot::after {
  content: ""; position: absolute; left: -1px; bottom: -1px;
  width: var(--snede); height: var(--snede);
  background: linear-gradient(to top right,
    transparent calc(50% - 1px), var(--hairline) calc(50% - 1px),
    var(--hairline) calc(50% + 1.5px), transparent calc(50% + 1.5px));
}
.fotogat--snede-groot::after { content: none; }
.alleen-breed { display: none; }
@media (min-width: 700px) {
  .fotogat--219 { aspect-ratio: 21 / 9; }
}
@media (min-width: 900px) {
  .fotogat--45 { aspect-ratio: 4 / 5; }
}
@media (min-width: 1100px) {
  .alleen-breed { display: grid; }
  .alleen-smal { display: none; }
}
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
}
.hero-in { position: relative; z-index: 2; padding-block: var(--s6) var(--s4); }
.hero-foto { position: relative; z-index: 2; padding: 0 var(--gut) var(--s5); }
.hero-filigraan {
  position: absolute; z-index: 1;
  right: -18%; top: 4%;
  width: min(78vw, 640px);
  opacity: .07;
  pointer-events: none;
}
.eyebrow {
  font-family: var(--font-kop);
  font-weight: 600; font-size: .8125rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-txt);
  margin-bottom: var(--s3);
}
.hero h1 { font-size: clamp(2.75rem, 12vw, 5.25rem); margin-bottom: var(--s3); }
h1 em { font-style: normal; color: var(--accent-txt); }
.hero .lead { max-width: 36ch; }
@media (min-width: 900px) {
  .hero { display: grid; min-height: min(88svh, 800px); }
  .hero-in { grid-area: 1 / 1; display: flex; align-items: center; padding-block: var(--s6); }
  .hero-tekst { max-width: 47%; }
  .hero-foto { grid-area: 1 / 1; justify-self: end; width: 48%; padding: 0; }
  .hero-foto .fotogat {
    height: 100%; aspect-ratio: auto;
    border-width: 0 0 0 1px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 170px 100%, 0 calc(100% - 170px));
  }
  .hero-foto .fotogat::after { content: ""; width: 170px; height: 170px; }
  .hero-filigraan { right: auto; top: auto; left: -6%; bottom: -30%; width: 460px; }
}
.paginakop {
  position: relative; overflow: hidden;
  padding-block: var(--s6) var(--s5);
  border-bottom: 1px solid var(--hairline);
}
.paginakop .wrap { position: relative; z-index: 1; }
.paginakop h1 { max-width: 16ch; }
.paginakop-diamant::after {
  content: ""; position: absolute;
  right: max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut)));
  bottom: -3.5rem;
  width: 11rem; height: 12rem;
  background: url("assets/diamant.svg") center / contain no-repeat;
  opacity: .1;
  pointer-events: none;
}
.paginakop-hoog { min-height: 26rem; display: flex; align-items: center; }
.paginakop-hoog .wrap { margin-inline: auto; }
.paginakop-hoog .lead { margin-bottom: var(--s4); }
.paginakop-stuk { border-bottom: 0; padding-bottom: 0; overflow: visible; }
@media (min-width: 900px) {
  .paginakop { padding-block: var(--s7) var(--s6); }
  .paginakop-stuk { padding-block: var(--s6) 0; }
  .paginakop-diamant::after { width: 15rem; height: 16.5rem; bottom: -4.5rem; }
}
.paginakop-portret { padding-bottom: 0; }
.portretkop { display: grid; gap: var(--s5); }
.portret .fotogat--proef img { object-position: center top; }
.portret .fotogat--beeld img { object-position: 72% center; }
@media (min-width: 900px) {
  .paginakop-portret { padding-top: var(--s6); }
  .portretkop { grid-template-columns: 7fr 5fr; gap: var(--s6); align-items: end; }
  .portretkop-tekst { padding-bottom: var(--s6); }
  .portret { justify-self: end; width: min(100%, 20rem); }
}
.kruimels { font-size: .875rem; color: var(--text-2); margin-bottom: var(--s3); }
.kruimels a { color: var(--text-2); }
.kruimels a:hover { color: var(--accent-txt); }
.kruimels [aria-current] { color: var(--text-1); }
.blokkop { border-bottom: 0; padding-bottom: 0; }
.blokkop h1 { font-size: clamp(2.75rem, 10vw, 4.5rem); max-width: none; }
.blokkop-in { display: grid; gap: var(--s4); }
.andere { margin-top: var(--s4); }
.andere ul { display: flex; flex-wrap: wrap; gap: .25rem var(--s3); }
.andere a {
  display: inline-block; padding-block: .5rem;
  font-size: 1rem; color: var(--text-2); text-decoration: none;
}
.andere a:hover, .andere a:focus-visible { color: var(--text-1); text-decoration: underline; }
.andere a[aria-current] { font-family: var(--font-kop); font-weight: 700; color: var(--accent-txt); }
@media (min-width: 1100px) {
  .blokkop { padding-top: var(--s6); }
  .blokkop--omvat .blokkop-in { grid-template-columns: 7fr 5fr; gap: var(--s6); align-items: center; }
}
.sectie { position: relative; padding-block: var(--s6); }
.sectie-smal { padding-block: 0; }
.sectie-slot { padding-top: 0; }
.sectie-noot { padding-block: 0 var(--s6); }
.paginakop-stuk + .sectie-stuk { padding-top: var(--s5); }
@media (min-width: 900px) {
  .sectie::before, .voet::before { width: 96px; }
  .sectie { padding-block: var(--s7); }
  .sectie-smal { padding-block: 0; }
  .sectie-slot { padding-top: 0; }
  .sectie-noot { padding-block: 0 var(--s7); }
  .sectie-niveaus { padding-top: var(--s6); }
  .paginakop-stuk + .sectie-stuk { padding-top: var(--s5); }
}
.sectie::before, .voet::before {
  content: ""; position: absolute;
  top: 0; left: max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut)));
  width: 72px; height: 1px;
  background: var(--hairline);
  transform: rotate(-45deg);
  transform-origin: left center;
  pointer-events: none;
}
.sectie-smal::before, .sectie-slot::before, .sectie-noot::before, .sectie-stuk::before,
.sectie-niveaus::before, .sectie-juridisch::before, .blokstuk::before,
.sectie-citaat + .sectie::before, .sectie-smal + .sectie::before,
.paginakop + .sectie::before { content: none; }
.sectie-lead {
  color: var(--text-2);
  max-width: 58ch;
  margin-bottom: var(--s5);
}
.sectie-meer { margin: var(--s5) 0 0; }
p { text-wrap: pretty; }
.sub-scheiding { border-top: 1px solid var(--hairline); margin-top: .5rem; padding-top: .5rem; }
.tekstlink {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: .65rem; color: var(--text-1); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--accent-hi); line-height: 1.4;
}
.tekstlink span { color: var(--accent-txt); font-size: 1.25rem; }
.tekstlink:hover { color: var(--accent-txt); }
.sectiekop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s3); margin-bottom: var(--s4); }
.sectiekop h2 { margin: 0; }
.sectiekop p { color: var(--text-2); margin: var(--s2) 0 0; }
.sectienummer { font: 500 .8125rem/1.5 var(--font-kop); color: var(--accent-txt); margin-bottom: var(--s3); }
.pagina-index { display: flex; flex-wrap: wrap; gap: .5rem var(--s3); margin-top: var(--s4); }
.pagina-index a { padding: .5rem 0; text-decoration: none; color: var(--text-1); border-bottom: 1px solid var(--accent-hi); }
.home-werk-grid { display: grid; gap: var(--s2); }
.home-werk-grid .fotogat { aspect-ratio: 3 / 2; }
.home-werk-grid .fotogat:nth-child(3) { display: none; }
.home-persoon-in { display: grid; }
.home-portret .fotogat { aspect-ratio: 4 / 5; }
.home-persoon .citaat { clip-path: none; padding: var(--s4); }
.persoon-intro { color: var(--text-2); max-width: 36ch; }
.home-persoon .citaat blockquote p { font-size: clamp(2rem, 4vw, 3.5rem); }
.onderhoud-kort { background: var(--surface-1); }
.onderhoud-kort::before { content: none; }
.onderhoud-kort-in { display: grid; gap: var(--s4); }
.onderhoud-kort-beeld .fotogat { aspect-ratio: 16 / 9; }
.onderhoud-foto img { object-position: 55% 0%; }
.onderhoud-foto.fotogat--beeld img { object-position: 55% 72%; }
.onderhoud-kort h2 { font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -.035em; }
.onderhoud-kort p { color: var(--text-2); max-width: 39ch; }
.onderhoud-ritme { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--s4); }
.onderhoud-ritme > div { padding: var(--s2) .5rem var(--s3); border-left: 1px solid var(--hairline); }
.onderhoud-ritme > div:first-child { padding-left: 0; border: 0; }
.onderhoud-ritme dt { font: 600 2.75rem/1.2 var(--font-kop); letter-spacing: -.03em; }
.onderhoud-ritme dt span { display: block; font: 400 .875rem/1.5 var(--font-txt); color: var(--text-2); letter-spacing: 0; }
.onderhoud-ritme dd { color: var(--text-2); font-size: .8125rem; margin-top: var(--s2); }
.onderhoud-ritme dd strong { display: block; color: var(--accent-txt); font: 600 1.25rem/1.4 var(--font-kop); font-variant-numeric: tabular-nums; }
.onderhoud-ritme dd small { display: block; color: var(--text-1); font: 400 .75rem/1.5 var(--font-txt); }
.onderhoud-kort-extra { display: grid; gap: var(--s4); border-top: 1px solid var(--hairline); padding-top: var(--s4); align-items: center; }
.onderhoud-kort-extra > .tekstlink { justify-self: start; }
.home-lease, .home-cadeau { padding-block: var(--s7); }
.home-lease { background: var(--surface-base); border-block: 1px solid var(--hairline); }
.home-lease::before { content: none; }
.home-lease-in { display: grid; gap: var(--s5); align-items: center; }
.home-lease-beeld .fotogat { aspect-ratio: 3 / 2; }
.home-cadeau { border-bottom: 1px solid var(--hairline); }
.cadeau-mini { display: grid; grid-template-columns: 8rem 1fr; align-items: center; gap: var(--s3); text-decoration: none; color: var(--text-2); font-size: .875rem; }
.cadeau-mini strong { display: block; color: var(--text-1); margin-top: .5rem; font-weight: 600; }
.cadeau-mini strong span { color: var(--accent-txt); }
.cadeau-mini small { display: block; margin-top: .75rem; font-size: .75rem; }
.cadeau-mini:hover strong { color: var(--accent-txt); }
.cadeau-mini-beeld { min-width: 0; transition: transform .18s; }
.cadeau-mini:hover .cadeau-mini-beeld { transform: translateY(-3px); }
.extra-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); border-top: 1px solid var(--hairline); padding-top: var(--s3); }
.extra-links a { display: inline-flex; gap: 1rem; color: var(--text-1); text-decoration: none; padding-block: .35rem; }
.extra-links a:hover { color: var(--accent-txt); }
.extra-links span { color: var(--accent-txt); }
.onderhoud { scroll-margin-top: 5rem; }
.onderhoud-compositie { display: grid; gap: var(--s4); }
.onderhoud-beeld .fotogat { aspect-ratio: 4 / 3; }
.onderhoud-kop { margin-bottom: var(--s4); }
.onderhoud-kop h2 { font-size: clamp(2.25rem, 4vw, 3.25rem); letter-spacing: -.035em; }
.onderhoud-kop .sectie-lead { margin: 0; max-width: 40ch; }
.onderhoud-keuzes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.onderhoud-keuze { display: flex; flex-direction: column; gap: .35rem; padding: .75rem .5rem; color: var(--text-2); text-decoration: none; border: 0; transition: background .18s, color .18s; }
.onderhoud-keuze strong { font: 600 2rem/1 var(--font-kop); color: var(--text-1); }
.onderhoud-keuze > span { font-size: .8125rem; font-weight: 600; }
.onderhoud-keuze small { font-size: .75rem; color: var(--text-1); }
.onderhoud-keuze-prijs, .prijs { color: var(--accent-txt); }
.onderhoud-keuze:hover small, .onderhoud-keuze:focus-visible small,
.onderhoud-keuze:hover .onderhoud-keuze-prijs, .onderhoud-keuze:focus-visible .onderhoud-keuze-prijs { color: #fff; }
.onderhoud-keuze[aria-selected="true"] { background: var(--surface-2); color: var(--text-1); }
.onderhoud-keuze[aria-selected="true"] strong { color: var(--accent-txt); }
.onderhoud-keuze:hover, .onderhoud-keuze:focus-visible { background: var(--accent); color: #fff; }
.onderhoud-keuze:hover strong, .onderhoud-keuze:focus-visible strong { color: #fff; }
.onderhoud-keuze:active { transform: translateY(1px); }
.onderhoud-selector-noot { color: var(--text-2); font-size: .75rem; margin: .75rem 0 var(--s4); }
.onderhoud-plannen { display: grid; gap: var(--s4); }
.onderhoud-plan { border-top: 1px solid var(--hairline); padding-top: var(--s3); scroll-margin-top: 6rem; }
.onderhoud-plan[hidden] { display: none; }
.onderhoud-interactief .onderhoud-plan { border: 0; padding-top: 0; min-height: 24rem; }
.onderhoud-maat { display: flex; justify-content: space-between; align-items: center; color: var(--text-2); font-size: .875rem; margin-bottom: var(--s2); }
.onderhoud-plan h3 { font-size: 1.75rem; margin-bottom: var(--s2); }
.onderhoud-frequentie { color: var(--text-2); display: flex; align-items: baseline; gap: .75rem; margin-bottom: var(--s4); }
.onderhoud-frequentie strong { color: var(--text-1); font: 600 4.5rem/.95 var(--font-kop); letter-spacing: -.06em; }
.onderhoud-frequentie strong span { font-size: 2rem; color: var(--accent-txt); margin-left: .2rem; }
.onderhoud-bedrag { font: 600 2.5rem/1.1 var(--font-kop); font-variant-numeric: tabular-nums; margin: 0 0 .4rem; color: var(--accent-txt); }
.onderhoud-bedrag > span { font: 400 .875rem/1.4 var(--font-txt); color: var(--text-1); }
.onderhoud-eenheid { color: var(--text-2); font-size: .875rem; margin-bottom: var(--s3); }
.onderhoud-plan ul { color: var(--text-2); margin-bottom: var(--s3); }
.onderhoud-plan li { position: relative; padding-left: 1rem; margin-bottom: .65rem; font-size: 1rem; line-height: 1.5; }
.onderhoud-plan li::before { content: "/"; position: absolute; left: 0; color: var(--accent-txt); }
.onderhoud-plan .tekstlink { margin-top: auto; align-self: start; }
.onderhoud-regel { color: var(--text-1); text-decoration: underline; text-decoration-color: var(--accent-hi); }
.onderhoud-regel:hover, .onderhoud-regel:focus-visible { color: var(--accent-txt); }
.onderhoud-voet { color: var(--text-2); font-size: .875rem; margin: var(--s4) 0 0; }
.onderhoud-vergelijking { margin-top: var(--s7); border-top: 1px solid var(--hairline); padding-top: var(--s5); }
.onderhoud-vergelijking h3 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: var(--s4); }
.onderhoud-vergelijking-scroll { overflow-x: auto; }
.onderhoud-vergelijking table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.onderhoud-vergelijking th, .onderhoud-vergelijking td { padding: .75rem .3rem; border-bottom: 1px solid var(--hairline); text-align: center; }
.onderhoud-vergelijking thead th { color: var(--text-1); font: 600 .75rem/1.25 var(--font-kop); vertical-align: bottom; }
.onderhoud-vergelijking thead th:not(:first-child) { width: 4.5rem; }
.onderhoud-vergelijking th:first-child { text-align: left; padding-left: 0; }
@media (min-width: 700px) {
  .onderhoud-vergelijking th, .onderhoud-vergelijking td { padding: .85rem .75rem; }
  .onderhoud-vergelijking thead th { font-size: .875rem; }
  .onderhoud-vergelijking thead th:not(:first-child) { width: auto; }
  .onderhoud-vergelijking th:first-child { width: 52%; padding-left: .75rem; }
}
.onderhoud-vergelijking tbody th { color: var(--text-2); font-weight: 400; }
.onderhoud-vergelijking td { color: var(--accent-txt); font: 700 1.25rem/1 var(--font-kop); }
.lease-in { display: grid; gap: var(--s4); align-items: center; }
.lease-tekst { max-width: 35rem; }
.lease-tekst h2 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
.lease-prijs { color: var(--accent-txt); font: 600 1.25rem/1.5 var(--font-kop); margin: var(--s3) 0 var(--s4); }
.cadeau { background: var(--surface-1); overflow: hidden; scroll-margin-top: 5rem; }
.cadeau::before { content: none; }
.cadeau-in { position: relative; display: grid; gap: var(--s4); align-items: center; }
.cadeau-kaart { background: var(--surface-base); border: 1px solid var(--hairline); }
.cadeau-kaart--ontwerp > img { width: 100%; height: auto; object-fit: contain; }
.cadeau-kaart-link { display: block; transition: transform var(--trans); }
.cadeau-kaart-link:hover, .cadeau-kaart-link:focus-visible { transform: translateY(-3px); }
#cadeauform { scroll-margin-top: 6rem; }
@media (prefers-reduced-motion: reduce) { .cadeau-kaart-link { transition: none; } .cadeau-kaart-link:hover { transform: none; } }
.cadeau-logo { padding: 1rem 1.5rem; }
.cadeau-logo img { width: 45%; height: auto; }
.cadeau-kaart .cadeau-auto { aspect-ratio: 1.85; clip-path: none; }
.cadeau-kaart .cadeau-auto img { object-position: 50% 47%; }
.cadeau-band { padding: .75rem 1.5rem; font: 600 clamp(1.25rem, 3vw, 2.25rem)/1.2 var(--font-kop); border-left: .5rem solid var(--accent); }
.cadeau-fotolabel { padding: .4rem 1.5rem; margin: 0; color: var(--text-2); font-size: .75rem; }
.cadeau-voorstel figcaption { font-size: .75rem; color: var(--text-2); margin-top: .75rem; }
.cadeau-kaart--klein .cadeau-logo { padding: .4rem .5rem; }
.cadeau-kaart--klein .cadeau-logo img { width: 65%; }
.cadeau-kaart--klein .cadeau-band { font-size: .75rem; padding: .3rem .5rem; border-left-width: .25rem; }
.cadeau h2 { font-size: 1.25rem; font-weight: 500; color: var(--text-2); }
.cadeau-regel { font: 700 clamp(2.5rem, 4vw, 3.5rem)/1.05 var(--font-kop); letter-spacing: -.04em; margin: var(--s3) 0; }
.cadeau-tekst { max-width: 38ch; }
.cadeau-tekst > p { color: var(--text-2); margin-bottom: var(--s4); }
.cadeau-tekst > .cadeau-regel { color: var(--text-1); }
.formulier-noot { color: var(--text-2); font-size: .875rem; }
#lease { scroll-margin-top: 5rem; }
@media (min-width: 700px) {
  .home-werk-grid { grid-template-columns: 1.4fr 1fr 1fr; align-items: end; }
  .home-werk-grid .fotogat:nth-child(3) { display: grid; }
  .home-werk-grid .fotogat:first-child { aspect-ratio: 4 / 5; }
  .home-werk-grid .fotogat:nth-child(2) { align-self: start; margin-top: var(--s5); aspect-ratio: 4 / 5; }
  .home-werk-grid .fotogat:nth-child(3) { aspect-ratio: 4 / 5; margin-bottom: var(--s5); }
  .onderhoud-frequentie { flex-direction: column; align-items: start; gap: .5rem; }
  .lease-in { grid-template-columns: 1fr 1fr; gap: var(--s5); }
  .home-persoon-in { grid-template-columns: 4fr 7fr; }
  .home-portret .fotogat { height: 100%; aspect-ratio: 4 / 5; }
  .home-persoon .citaat { display: block; padding: var(--s5); }
  .home-persoon .citaat figcaption { flex-direction: row; align-items: baseline; margin-top: var(--s4); }
}
@media (min-width: 900px) {
  .home-lease, .home-cadeau { padding-block: 8rem; }
  .home-lease-in { grid-template-columns: 5fr 7fr; gap: var(--s7); }
  .onderhoud-kort-in { grid-template-columns: 4fr 8fr; column-gap: var(--s5); }
  .onderhoud-kort-beeld .fotogat { height: 100%; aspect-ratio: auto; min-height: 30rem; }
  .onderhoud-kort-extra { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .cadeau-mini { grid-template-columns: 10rem 1fr; }
  .onderhoud-ritme > div { padding-inline: var(--s3); }
  .onderhoud-ritme dt { font-size: 3.5rem; }
  .onderhoud-ritme dd { font-size: .9375rem; }
  .onderhoud-ritme dd strong { font-size: 1.5rem; }
  .onderhoud-compositie { grid-template-columns: 7fr 5fr; gap: var(--s5); align-items: stretch; }
  .onderhoud-beeld .fotogat { height: 100%; min-height: 46rem; aspect-ratio: auto; }
  .onderhoud-kop h2 { margin-bottom: var(--s3); }
  .cadeau-in { grid-template-columns: 2fr 1fr; gap: var(--s5); }
  .onderhoud-frequentie { flex-direction: row; align-items: baseline; }
  .versie-1b .hero { min-height: 570px; }
  .versie-1b .hero h1 { font-size: clamp(3rem, 5vw, 4.5rem); }
  .home-persoon .citaat { padding: var(--s6); }
}
@media (prefers-reduced-motion: no-preference) {
  .onderhoud-interactief .onderhoud-plan:not([hidden]) { animation: onderhoud-wissel .18s ease-out; }
  @keyframes onderhoud-wissel { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}
.prijsnoot { color: var(--text-2); font-size: .9375rem; max-width: 62ch; margin: 0 0 .4rem; }
.terug { margin: var(--s2) 0 0; }
.terug a { display: inline-block; padding-block: .4rem; }
.diamant { width: 100%; height: auto; overflow: visible; }
.diamant--breed { display: none; }
.diamant--smal { max-width: 27rem; }
.diamant-lampje { pointer-events: none; }
.diamant-spoor { transition: opacity .8s; }
.diamant-lampje.aangekomen .diamant-spoor { opacity: 0; }
.diamant-lampje.aangekomen .diamant-lamp--2 { display: none; }
.diamant-lampje.aangekomen .diamant-lamp {
  transform-box: fill-box; transform-origin: center;
  animation: fonkel 1.6s ease-in-out infinite;
}
@keyframes fonkel {
  0%, 100% { opacity: 1; transform: scale(1); }
  20%      { opacity: .35; transform: scale(.7); }
  35%      { opacity: 1; transform: scale(1.5); }
  55%      { opacity: .6; transform: scale(.9); }
}
.stuk-diamant { display: block; }
.d-naam { font-family: var(--font-kop); font-weight: 700; letter-spacing: -.01em; fill: var(--text-1); }
.d-prijs { font-family: var(--font-txt); fill: var(--accent-txt); }
.d-streek { fill: none; stroke: var(--accent-hi); stroke-linejoin: miter; pointer-events: none; }
.facet { cursor: pointer; outline: none; }
.facet polygon {
  fill: var(--surface-1);
  stroke: var(--accent-hi); stroke-width: 2;
  transition: fill var(--trans);
}
.facet .d-prijs { transition: fill var(--trans); }
.facet:hover polygon, .facet:focus-visible polygon, .facet:active polygon { fill: var(--accent); }
.facet:hover .d-prijs, .facet:focus-visible .d-prijs, .facet:active .d-prijs { fill: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .stuk:not(.stuk--paneel) .facet.f3 polygon { animation: hartslag 2.4s ease-in-out infinite; }
  .stuk:not(.stuk--paneel) .facet.f3 .d-prijs { animation: hartslag-prijs 2.4s ease-in-out infinite; }
  .stuk:not(.stuk--paneel) .facet.f3:is(:hover, :focus-visible, :active) :is(polygon, .d-prijs) { animation: none; }
  @keyframes hartslag {
    0%, 36%, 100% { fill: var(--surface-1); }
    9%, 25%       { fill: var(--accent); }
    17%           { fill: #4a2154; }
  }
  @keyframes hartslag-prijs {
    0%, 36%, 100% { fill: var(--accent-txt); }
    9%, 17%, 25%  { fill: #fff; }
  }
}
.d-ring { fill: none; stroke: var(--text-1); stroke-width: 4; stroke-linejoin: miter; visibility: hidden; pointer-events: none; }
.f1:focus-visible ~ .r1, .f2:focus-visible ~ .r2, .f3:focus-visible ~ .r3,
.f4:focus-visible ~ .r4, .f5:focus-visible ~ .r5 { visibility: visible; }
.v-vlak { fill: var(--surface-1); }
.v-haarlijn line { stroke: var(--hairline); stroke-width: 1; }
.v-foto { font-family: var(--font-kop); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; fill: var(--text-2); }
.punt { cursor: pointer; outline: none; }
.punt rect { fill: transparent; stroke: none; }
.punt:focus-visible rect { stroke: var(--text-1); stroke-width: 2; }
.punt .d-naam { transition: fill var(--trans); }
.punt-lijn { stroke: var(--accent-hi); stroke-width: 3; opacity: 0; transition: opacity var(--trans); }
.punt:hover .d-naam, .punt:focus-visible .d-naam, .punt[aria-current] .d-naam { fill: var(--accent-txt); }
.punt:hover .punt-lijn, .punt:focus-visible .punt-lijn, .punt[aria-current] .punt-lijn { opacity: 1; }
.panelen { margin-top: var(--s5); }
.paneel[hidden] { display: none; }
.paneel h2 { font-size: clamp(1.75rem, 4vw, 2.125rem); margin: 0 0 var(--s2); }
.paneel .fotogat { margin-bottom: var(--s4); }
.paneel-zin { color: var(--text-2); max-width: 36ch; margin-bottom: var(--s3); }
.paneel-niveaus { margin-bottom: var(--s4); }
.paneel-niveaus li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .7rem;
  padding-block: .3rem;
}
.paneel-niveaus li:nth-child(2) { margin-left: 1.5rem; }
.paneel-niveaus li:nth-child(3) { margin-left: 3rem; }
.pn-naam { font-family: var(--font-kop); font-weight: 700; font-size: 1.125rem; color: var(--text-1); }
.pn-prijs { color: var(--accent-txt); }
.stuk--paneel + .prijsnoot, .stuk--paneel ~ .prijsnoot { margin-top: 0; }
.stuk--paneel { margin-bottom: var(--s5); }
.stuk--1 .panelen { display: none; }
.stuk--2 .panelen { border-top: 1px solid var(--hairline); padding-top: var(--s4); margin-top: var(--s4); }
.stuk-naast { display: grid; gap: var(--s4); }
.stuk-naast-tekst .sectie-lead { margin-bottom: var(--s4); }
.stuk-naast-tekst h1 { margin-bottom: var(--s3); }
@media (min-width: 700px) {
  .stuk-naast:has(.stuk-naast-meer) { grid-template-rows: auto 1fr; }
  .stuk-naast-tekst { grid-column: 1; grid-row: 1; }
  .stuk-naast:has(.stuk-naast-meer) > .stuk { grid-column: 2; grid-row: 1 / span 2; }
  .stuk-naast:has(.stuk-naast-meer) { row-gap: var(--s4); }
  .stuk-naast-meer { grid-column: 1; grid-row: 2; align-self: start; }
  .stuk-naast:has(.stuk-naast-meer) .sectie-lead { margin-bottom: 0; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .stuk-naast { grid-template-columns: 1fr minmax(0, 27rem); gap: var(--s5); align-items: start; }
  .stuk--paneel.stuk--2 { display: grid; grid-template-columns: minmax(0, 27rem) 1fr; gap: var(--s5); align-items: center; }
  .stuk--paneel.stuk--2 .panelen { border: 0; margin: 0; padding: 0; }
}
@media (min-width: 1100px) {
  .diamant--breed { display: block; }
  .diamant--smal { display: none; }
  .stuk-naast { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s5); align-items: center; }
  .stuk-naast .stuk--1 { justify-self: end; width: min(100%, 45rem); }
  .stuk-naast-tekst { align-self: start; padding-top: var(--s5); }
  .stuk--paneel.stuk--1 {
    display: grid; grid-template-columns: minmax(0, 45rem) minmax(0, 1fr);
    gap: var(--s6); align-items: start;
  }
  .stuk--1 .panelen { display: block; margin: 0; }
  .stuk--paneel .facet[aria-current] polygon { fill: var(--accent); }
  .stuk--paneel .facet[aria-current] .d-prijs { fill: #fff; }
  .stuk--paneel.stuk--2 { position: relative; padding-bottom: var(--s5); }
  .stuk--2 .stuk-diamant { width: min(100%, 58.75rem); margin-inline: auto; }
  .stuk--paneel.stuk--2 .panelen {
    position: absolute; left: 0; bottom: 0;
    width: 21.5rem;
    border: 0; margin: 0; padding: 0;
  }
  .stuk--paneel.stuk--2 .paneel-zin { max-width: 30ch; }
}
.niveaus {
  --w: 3px; --k: 1.24px; --d: 4.24px;
  --g: .75rem;
  --j: 1.5rem;
  --t: 4.5rem;
  --inspring: 0px;
}
.niveau-naam { font-size: 1.5rem; letter-spacing: -.015em; margin: 0 0 .35rem; }
.niveau[id^="pakket-"] { scroll-margin-top: 8rem; }
.niveau-prijs {
  font-family: var(--font-kop); font-weight: 700;
  font-size: 2.125rem; line-height: 1.05; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--s2);
  color: var(--accent-txt);
}
.vanaf-label {
  font-family: var(--font-txt); font-size: .58em; font-weight: 500;
  letter-spacing: 0; color: var(--text-1);
}
.btw {
  font: 400 .8125rem/1 var(--font-txt); letter-spacing: .04em;
  color: var(--text-2); white-space: nowrap; margin-left: .3rem;
}
.niveau-prijs--tekst {
  font-family: var(--font-txt); font-weight: 500; font-size: 1.125rem; letter-spacing: 0;
  color: var(--accent-txt);
}
.niveau-slogan { font-style: italic; color: var(--text-2); max-width: 44ch; margin-bottom: var(--s3); }
.niveau-regels li { color: var(--text-2); font-size: 1rem; line-height: 1.45; margin-bottom: .55rem; max-width: 52ch; }
.niveau-regels li:last-child { margin-bottom: 0; }
.niveau-regels .omvat-regel {
  font-family: var(--font-kop); font-weight: 700; font-size: 1.0625rem;
  color: var(--accent-txt);
  margin-bottom: .8rem;
}
.bouwt-op a { color: var(--text-1); text-decoration: underline; text-decoration-thickness: 1px; }
.bouwt-op a:hover, .bouwt-op a:focus-visible { color: var(--accent-txt); }
.niveau-los-tekst { color: var(--text-2); max-width: 44ch; margin-bottom: var(--s3); }
.lus {
  position: relative;
  padding-left: calc(var(--w) + var(--g));
  background: linear-gradient(var(--accent-hi), var(--accent-hi)) left top / var(--w) 100% no-repeat;
}
.lus--buiten {
  --kap: calc((var(--g) + var(--w) * 2) / 2);
  background-position: left var(--kap);
  background-size: var(--w) calc(100% - var(--kap));
}
.lus .lus { margin-top: calc((var(--g) + var(--w) * 2) / 2); }
.lus .lus::before {
  content: ""; position: absolute;
  left: calc(-1 * (var(--g) + var(--w)));
  top: calc(-1 * (var(--g) + var(--w) * 2) / 2);
  width: calc(var(--g) + var(--w) * 2);
  height: calc((var(--g) + var(--w) * 2) / 2);
  background: var(--accent-hi);
  clip-path: polygon(0 100%, 50% 0, 100% 100%, calc(100% - var(--d)) 100%, 50% var(--d), var(--d) 100%);
}
.lus .niveau { padding: var(--s2) 0 var(--s4) .9rem; }
.lus--midden > .niveau, .omvat--2 .lus--buiten > .niveau { padding-left: calc(.9rem + var(--w) + var(--g)); }
.omvat--3 .lus--buiten > .niveau { padding-left: calc(.9rem + (var(--w) + var(--g)) * 2); }
.trede {
  position: relative;
  padding-left: calc(var(--w) + .9rem + var(--g));
  background: linear-gradient(var(--accent-hi), var(--accent-hi)) left top / var(--w) 100% no-repeat;
}
.trede .niveau { padding: .25rem 0 var(--s3); }
.trede--2 { margin: var(--j) 0 0 var(--j); }
.trede--3 { margin: var(--j) 0 0 calc(var(--j) * 2); }
.trede--2::before, .trede--3::before {
  content: ""; position: absolute;
  left: calc(-1 * var(--j)); top: calc(-1 * var(--j));
  width: calc(var(--j) + var(--d)); height: var(--j);
  background: var(--accent-hi);
  clip-path: polygon(0 0, var(--d) 0, 100% 100%, calc(100% - var(--d)) 100%);
}
.trap--2 { --inspring: var(--j); }
.trap--3 { --inspring: calc(var(--j) * 2); }
.heeft-staart .lus--buiten::after, .heeft-staart .trede--laatste::after {
  content: ""; position: absolute;
  left: 0; top: 100%;
  width: var(--t); height: var(--t);
  background: var(--accent-hi);
  clip-path: polygon(0 0, var(--d) 0, 100% calc(100% - var(--d)), 100% 100%);
}
.niveau--staart {
  margin: calc(var(--t) - 1.9rem) 0 0 var(--inspring);
  padding-left: calc(var(--w) + .9rem + var(--g));
}
.niveaus--omvat .niveau--staart { padding-left: calc(.9rem + (var(--w) + var(--g)) * 2); }
.niveau--staart .niveau-naam, .niveau--staart .niveau-prijs, .niveau--staart .niveau-opties { margin-left: var(--t); }
.niveau--staart .niveau-prijs, .niveau--staart .niveau-opties { margin-bottom: var(--s3); }
.niveau--staart + .niveau--staart { margin-top: var(--s4); }
.niveaus--omvat, .niveaus--trap { position: relative; }
.lampje-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 1; transition: opacity .6s; }
.lampje-svg.uit { opacity: 0; }
.niveaus.tekent .lus::before, .niveaus.tekent .lus::after,
.niveaus.tekent .trede::before, .niveaus.tekent .trede::after { opacity: 0; }
.niveaus.tekent .trede .niveau { border-bottom-color: transparent; }
.niveaus.tekent .lus, .niveaus.tekent .trede { background-image: none; }
.niveaus .niveau { transition: opacity .5s, transform .5s; }
.niveaus .niveau.wacht { opacity: 0; transform: translateY(8px); }
.glans-vak { position: absolute; inset: -.75rem 0; overflow: hidden; pointer-events: none; z-index: 2; }
.glans-band {
  position: absolute; left: 0; top: -5%; width: 200px; height: 110%;
  background: linear-gradient(90deg, transparent, rgba(255, 235, 255, .28), transparent);
  mix-blend-mode: screen; transform: translateX(-260px) skewX(-20deg);
}
@media (min-width: 1100px) {
  .niveaus { --g: 2.25rem; --c: 1.75rem; --t: 8rem; --r: 3.75rem; --inspring: 0px; }
  .niveau-naam { font-size: 1.625rem; }
  .niveau-prijs { font-size: 2.5rem; }
  .niveau-prijs--tekst { font-size: 1.125rem; }
  .omvat--3 .niveau-prijs { font-size: 2rem; }
  .lus {
    display: grid; grid-template-columns: 46% minmax(0, 1fr);
    padding: var(--g) 0 0 var(--g);
    background: none;
  }
  .lus--binnen { display: block; padding: 0; }
  .lus--midden { padding-bottom: var(--g); grid-template-columns: 50% minmax(0, 1fr); }
  .omvat--3 .lus--buiten { grid-template-columns: 67% minmax(0, 1fr); }
  .lus .lus { margin-top: 0; }
  .lus .niveau, .lus--midden > .niveau, .omvat--2 .lus--buiten > .niveau, .omvat--3 .lus--buiten > .niveau {
    padding: var(--g) var(--g) 3rem calc(var(--g) + .5rem);
  }
  .lus--binnen > .niveau { padding-left: var(--g); padding-bottom: 4.75rem; }
  .omvat--3 .lus--buiten > .niveau { padding-top: calc(var(--g) * 2); }
  .lus::before, .lus .lus::before {
    content: ""; position: absolute; inset: 0 0 0 calc(-1 * var(--g));
    width: auto; height: auto;
    background: var(--accent-hi);
    pointer-events: none;
  }
  .lus--binnen::before, .lus .lus--binnen::before {
    --e: calc(100% - 4rem);
    clip-path: polygon(
      var(--g) var(--e),
      var(--g) var(--c),
      calc(var(--g) + var(--c)) 0,
      calc(100% - var(--c)) 0,
      100% var(--c),
      100% calc(100% - var(--c)),
      calc(100% - var(--c)) 100%,
      var(--c) 100%,
      var(--c) calc(100% - var(--w)),
      calc(100% - var(--c) - var(--k)) calc(100% - var(--w)),
      calc(100% - var(--w)) calc(100% - var(--c) - var(--k)),
      calc(100% - var(--w)) calc(var(--c) + var(--k)),
      calc(100% - var(--c) - var(--k)) var(--w),
      calc(var(--g) + var(--c) + var(--k)) var(--w),
      calc(var(--g) + var(--w)) calc(var(--c) + var(--k)),
      calc(var(--g) + var(--w)) var(--e));
  }
  .lus .lus--midden::before {
    --hb: calc(100% - var(--g));
    clip-path: polygon(
      calc(var(--g) + var(--c)) var(--hb),
      var(--g) calc(var(--hb) - var(--c)),
      var(--g) var(--c),
      calc(var(--g) + var(--c)) 0,
      calc(100% - var(--c)) 0,
      100% var(--c),
      100% calc(100% - var(--c)),
      calc(100% - var(--c)) 100%,
      var(--c) 100%,
      var(--c) calc(100% - var(--w)),
      calc(100% - var(--c) - var(--k)) calc(100% - var(--w)),
      calc(100% - var(--w)) calc(100% - var(--c) - var(--k)),
      calc(100% - var(--w)) calc(var(--c) + var(--k)),
      calc(100% - var(--c) - var(--k)) var(--w),
      calc(var(--g) + var(--c) + var(--k)) var(--w),
      calc(var(--g) + var(--w)) calc(var(--c) + var(--k)),
      calc(var(--g) + var(--w)) calc(var(--hb) - var(--c) - var(--k)),
      calc(var(--g) + var(--c) + var(--k)) calc(var(--hb) - var(--w)),
      calc(var(--g) + var(--c)) calc(var(--hb) - var(--w)));
  }
  .lus--buiten::before {
    inset: 0;
    clip-path: polygon(
      var(--c) 100%,
      0 calc(100% - var(--c)),
      0 var(--c),
      var(--c) 0,
      calc(100% - var(--c)) 0,
      100% var(--c),
      100% calc(100% - var(--c)),
      calc(100% - var(--w)) calc(100% - var(--c)),
      calc(100% - var(--w)) calc(var(--c) + var(--k)),
      calc(100% - var(--c) - var(--k)) var(--w),
      calc(var(--c) + var(--k)) var(--w),
      var(--w) calc(var(--c) + var(--k)),
      var(--w) calc(100% - var(--c) - var(--k)),
      calc(var(--c) + var(--k)) calc(100% - var(--w)),
      var(--c) calc(100% - var(--w)));
  }
  .lus--buiten::after, .heeft-staart .lus--buiten::after {
    content: ""; position: absolute;
    left: auto; right: 0; top: calc(100% - var(--c));
    width: var(--t); height: var(--t);
    background: var(--accent-hi);
    clip-path: polygon(calc(100% - var(--d)) 0, 100% 0, 0 100%, 0 calc(100% - var(--d)));
  }
  .niveaus--omvat { padding-bottom: calc(var(--t) - var(--c)); }
  .niveaus--omvat.heeft-staart { padding-bottom: 0; }
  .niveaus--omvat .niveau--staart {
    margin: 4.25rem calc(var(--t) + var(--s3)) 0 0;
    padding-left: calc(var(--g) * 2);
  }
  .niveau--staart .niveau-naam, .niveau--staart .niveau-prijs, .niveau--staart .niveau-opties { margin-left: 0; }
  .niveaus--omvat .niveau--staart .niveau-regels { columns: 2; column-gap: var(--s5); }
  .niveaus--omvat .niveau--staart .niveau-regels li { break-inside: avoid; }
  .trap {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--r); align-items: end;
  }
  .trede { padding: 0; margin: 0; background: none; }
  .trede--2 { margin: 0 0 var(--r); }
  .trede--3 { margin: 0 0 calc(var(--r) * 2); }
  .trede .niveau { padding: 0 0 var(--s3) var(--s4); border-bottom: var(--w) solid var(--accent-hi); }
  .trede .fotogat { margin-bottom: var(--s5); }
  .trede--2 .niveau-prijs { font-size: 2.75rem; }
  .trede--3 .niveau-prijs { font-size: 3rem; }
  .trede--2::before, .trede--3::before {
    left: calc(-1 * var(--r)); top: calc(100% - var(--w));
    width: var(--r); height: calc(var(--r) + var(--w));
    clip-path: polygon(
      0 calc(var(--r) - var(--w) * .2), calc(var(--r) - var(--w) * .2) 0, 100% 0,
      100% calc(var(--w) * 1.2), calc(var(--w) * 1.2) 100%, 0 100%);
  }
  .heeft-staart .trede--laatste::after {
    left: 100%; top: calc(100% - var(--w));
    width: var(--r); height: var(--r);
    clip-path: polygon(0 0, var(--d) 0, 100% calc(100% - var(--d)), 100% 100%);
  }
  .trap > .niveau--staart {
    grid-column: 3; grid-row: 2;
    margin: 0; padding: var(--s3) 0 0 var(--s4);
  }
  .staart-onder .trede--laatste::after {
    left: auto; right: 0; top: 100%;
    width: calc(var(--r) * 2); height: calc(var(--r) * 2);
    clip-path: polygon(calc(100% - var(--d)) 0, 100% 0, 0 100%, 0 calc(100% - var(--d)));
  }
  .trap > .niveau--los {
    grid-column: 1 / -1; grid-row: 2;
    justify-self: end;
    width: min(100%, 30rem);
    margin: var(--s2) calc(var(--r) * 2 + var(--s3)) 0 0; padding: 0;
  }
}
.blokstuk { scroll-margin-top: 4.5rem; padding-top: var(--s4); }
.blokstuk-kop { margin: var(--s4) 0 var(--s4); }
.blokstuk-kop h2 { font-size: clamp(2.25rem, 7vw, 3.5rem); }
.blokstuk-kop .lead { max-width: 56ch; }
.blokkop .lead { max-width: 52ch; }
@media (min-width: 1100px) {
  .blokstuk-kop { margin: var(--s5) 0 var(--s5); }
}
.werkplaats { display: grid; gap: var(--s4); }
.werkplaats-tekst { color: var(--text-2); max-width: 46ch; font-size: 1.125rem; margin: 0; }
.werkplaats-adres { border-top: 1px solid var(--hairline); padding-top: var(--s3); }
.werkplaats-adres address {
  font-family: var(--font-kop); font-weight: 600; font-size: 1.25rem; line-height: 1.35;
  margin-bottom: var(--s3);
}
@media (min-width: 900px) {
  .werkplaats { grid-template-columns: 7fr 5fr; gap: var(--s6); align-items: end; }
}
.werkplaats-sectie--met-foto { position: relative; isolation: isolate; }
.werkplaats-beeld { position: absolute; inset: 0 0 auto; aspect-ratio: 3 / 2; overflow: hidden; z-index: -1;
  mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 72%, transparent 100%); }
.werkplaats-beeld img { width: 100%; height: 100%; object-fit: cover; }
.werkplaats-beeld--wacht { display: grid; place-items: center; background: var(--surface-1);
  color: var(--text-1); font: 600 clamp(1.125rem, 2vw, 1.5rem)/1.35 var(--font-kop); }
.werkplaats-beeld--wacht span { padding: var(--s3); max-width: 20ch; text-align: center; }
.werkplaats-sectie--met-foto .werkplaats { padding-top: calc(100vw * 2 / 3 - 3rem); }
@media (min-width: 900px) {
  .werkplaats-sectie--met-foto { --mozaiek: min(60vw, 1180px);
    min-height: calc(var(--mozaiek) * 2 / 3); display: flex; align-items: center; }
  .werkplaats-beeld { inset: auto; top: 50%; left: 0; width: var(--mozaiek); transform: translateY(-50%);
    mask-image: linear-gradient(to right, #000 74%, transparent 100%),
                linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
  .werkplaats-sectie--met-foto .werkplaats { grid-template-columns: 1fr; gap: var(--s3);
    width: auto; max-width: 31rem; margin-left: calc(var(--mozaiek) - 1vw); margin-right: var(--gut);
    padding-block: var(--s5); padding-inline: 0; }
}
.sectie-citaat { padding-block: 0; }
.sectie-citaat::before { content: none; }
.citaat {
  background: var(--surface-1);
  padding: var(--s5) var(--s3);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--snede) 100%, 0 calc(100% - var(--snede)));
}
.citaat blockquote p {
  font-family: var(--font-kop); font-weight: 700;
  font-size: clamp(2rem, 6.2vw, 4rem);
  line-height: 1.04; letter-spacing: -.025em;
  max-width: 14ch;
  margin: 0;
  text-wrap: balance;
}
.citaat figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem var(--s3);
  margin-top: var(--s4);
  padding-left: var(--s4);
}
.citaat-naam, .motto figcaption { font-family: var(--font-kop); font-weight: 600; color: var(--text-1); }
@media (min-width: 900px) {
  .citaat { padding: var(--s7) var(--s6); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--s5); }
  .citaat figcaption { margin: 0; padding: 0 0 .5rem; flex-direction: column; align-items: flex-end; }
}
.werkplaats { display: grid; gap: var(--s4); }
.werkplaats-tekst { color: var(--text-2); max-width: 46ch; font-size: 1.125rem; margin: 0; }
.werkplaats-adres { border-top: 1px solid var(--hairline); padding-top: var(--s3); }
.werkplaats-adres address {
  font-family: var(--font-kop); font-weight: 600; font-size: 1.25rem; line-height: 1.35;
  margin-bottom: var(--s3);
}
@media (min-width: 900px) {
  .werkplaats { grid-template-columns: 7fr 5fr; gap: var(--s6); align-items: end; }
}
.stappen { display: grid; gap: 1px; background: var(--hairline); border-block: 1px solid var(--hairline); counter-reset: stap; margin-top: var(--s4); }
.stappen li { background: var(--surface-base); padding: var(--s3) 0 var(--s3) var(--s5); position: relative; }
.stappen li::before {
  counter-increment: stap;
  content: counter(stap, decimal-leading-zero);
  position: absolute; left: 0; top: calc(var(--s3) + .2rem);
  font-family: var(--font-kop); font-weight: 700; font-size: .8125rem;
  color: var(--text-2); letter-spacing: .08em;
}
.stappen h3 { font-size: 1.1875rem; margin-bottom: .35rem; }
.stappen p { color: var(--text-2); margin: 0; font-size: 1rem; }
@media (min-width: 900px) {
  .stappen { grid-template-columns: repeat(3, 1fr); }
  .stappen li { padding: var(--s4) var(--s4) var(--s4) 0; }
  .stappen li + li { padding-left: var(--s4); }
  .stappen li::before { position: static; display: block; margin-bottom: var(--s3); }
}
.werk-diamant-houder { position: relative; max-width: 62rem; margin: var(--s4) auto 0; }
.werk-diamant {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  grid-template-rows: repeat(7, minmax(0, 1fr));
  aspect-ratio: 4 / 3;
  gap: 3px;
  clip-path: polygon(25% 0, 75% 0, 100% 33.333%, 50% 100%, 0 33.333%);
}
.d-p1 { grid-area: 3 / 6; }
.d-p2 { grid-area: 4 / 6; }
.d-p3 { grid-area: 3 / 5; }
.d-p4 { grid-area: 3 / 7; }
.d-p5 { grid-area: 4 / 5; }
.d-p6 { grid-area: 4 / 7; }
.d-p7 { grid-area: 2 / 6; }
.d-p8 { grid-area: 5 / 6; }
.d-p9 { grid-area: 2 / 5; }
.d-p10 { grid-area: 2 / 7; }
.d-p11 { grid-area: 5 / 5; }
.d-p12 { grid-area: 5 / 7; }
.d-p13 { grid-area: 3 / 4; }
.d-p14 { grid-area: 3 / 8; }
.d-p15 { grid-area: 4 / 4; }
.d-p16 { grid-area: 4 / 8; }
.d-p17 { grid-area: 2 / 4; }
.d-p18 { grid-area: 2 / 8; }
.d-p19 { grid-area: 5 / 4; }
.d-p20 { grid-area: 5 / 8; }
.d-p21 { grid-area: 1 / 6; }
.d-p22 { grid-area: 6 / 6; }
.d-p23 { grid-area: 3 / 3; }
.d-p24 { grid-area: 3 / 9; }
.d-p25 { grid-area: 4 / 3; }
.d-p26 { grid-area: 4 / 9; }
.d-p27 { grid-area: 1 / 5; }
.d-p28 { grid-area: 1 / 7; }
.d-p29 { grid-area: 6 / 5; }
.d-p30 { grid-area: 6 / 7; }
.d-p31 { grid-area: 2 / 3; }
.d-p32 { grid-area: 2 / 9; }
.d-p33 { grid-area: 5 / 3; }
.d-p34 { grid-area: 5 / 9; }
.d-p35 { grid-area: 1 / 4; }
.d-p36 { grid-area: 1 / 8; }
.d-p37 { grid-area: 6 / 4; }
.d-p38 { grid-area: 6 / 8; }
.d-p39 { grid-area: 3 / 2; }
.d-p40 { grid-area: 3 / 10; }
.d-p41 { grid-area: 4 / 2; }
.d-p42 { grid-area: 4 / 10; }
.d-p43 { grid-area: 7 / 6; }
.d-p44 { grid-area: 1 / 3; }
.d-p45 { grid-area: 1 / 9; }
.d-p46 { grid-area: 2 / 2; }
.d-p47 { grid-area: 2 / 10; }
.d-p48 { grid-area: 3 / 1; }
.d-p49 { grid-area: 3 / 11; }
.d-cel { margin: 0; overflow: hidden; background: var(--surface-1); min-width: 0; min-height: 0; }
.d-cel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s cubic-bezier(.4, 0, .2, 1), filter .35s; }
.werk-groot {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  pointer-events: none; opacity: 0; transition: opacity .2s;
}
.werk-groot.open { opacity: 1; }
@media (max-width: 599px) { .werk-diamant { gap: 2px; } }
.werk-groot img { max-width: 62%; max-height: 92%; object-fit: contain; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .65); }
@media (hover: hover) and (pointer: fine) {
  .werk-diamant:hover .d-cel img { filter: brightness(.55); }
  .werk-diamant .d-cel:hover img { filter: none; transform: scale(1.06); }
}
.werk-diamant-houder.tik .werk-groot {
  position: fixed; z-index: 60; background: rgba(18, 17, 20, .94);
}
.werk-diamant-houder.tik .werk-groot.open { pointer-events: auto; }
.werk-diamant-houder.tik .werk-groot img { max-width: 92vw; max-height: 86vh; }
.klantlogos { padding-block: var(--s5); }
.klantlogos-kop {
  font-family: var(--font-kop);
  font-weight: 600; font-size: .8125rem; line-height: 1.4;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-2);
  text-align: center;
  padding-inline: var(--gut);
  margin-bottom: var(--s4);
}
.klantlogos-band {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.klantlogos-spoor { display: flex; width: max-content; }
.klantlogos-rij {
  display: flex; align-items: center;
  gap: var(--s6); padding-right: var(--s6);
  list-style: none; margin: 0;
}
.klantlogos-rij li { position: relative; }
.klantlogos-rij img {
  display: block; width: auto; height: 34px;
  opacity: .55;
  transition: opacity var(--trans);
}
.klantlogos-rij .klantlogo--blok img { height: 40px; }
.klantlogos-rij .klantlogo--vierkant img { height: 58px; }
.klantlogos-rij img.klantlogo-kleur { position: absolute; inset: 0; opacity: 0; }
.klantlogos-rij li:hover img { opacity: 0; }
.klantlogos-rij li:hover img.klantlogo-kleur { opacity: 1; }
@media (max-width: 599px) {
  .klantlogos-rij { gap: var(--s5); padding-right: var(--s5); }
  .klantlogos-rij img { height: 28px; }
  .klantlogos-rij .klantlogo--blok img { height: 33px; }
  .klantlogos-rij .klantlogo--vierkant img { height: 48px; }
}
@media (prefers-reduced-motion: no-preference) {
  .klantlogos-spoor { animation: klantlogos-loop 105s linear infinite; }
  .klantlogos-band:hover .klantlogos-spoor { animation-play-state: paused; }
  @keyframes klantlogos-loop { to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) {
  .klantlogos-band { -webkit-mask-image: none; mask-image: none; }
  .klantlogos-spoor { width: auto; justify-content: center; }
  .klantlogos-rij { flex-wrap: wrap; justify-content: center; padding: 0 var(--gut); row-gap: var(--s4); }
  .klantlogos-rij[aria-hidden="true"], .klantlogos-rij li:nth-child(n+7) { display: none; }
}
.klanttekst-in { display: grid; gap: var(--s4); }
.klanttekst h2 { max-width: 22ch; line-height: 1.15; }
.klanttekst-tekst { max-width: 68ch; }
.klanttekst-tekst p { color: var(--text-2); line-height: 1.8; margin-bottom: var(--s3); }
.klanttekst-tekst p:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .klanttekst-in { grid-template-columns: 4fr 7fr; gap: var(--s6); align-items: start; }
}
.klantverhaal { max-width: 68ch; margin-inline: auto; }
.klantverhaal p { color: var(--text-2); margin-bottom: var(--s3); line-height: 1.8; }
.klantverhaal h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.15;
  margin-top: var(--s6);
  margin-bottom: var(--s3);
}
.klantverhaal p:last-child { color: var(--text-1); margin-bottom: 0; }
.verhaal { display: grid; gap: var(--s5); }
.verhaal-tekst p { color: var(--text-2); max-width: 56ch; }
.verhaal-tekst p:last-child { margin-bottom: 0; }
.verhaal-tekst .verhaal-groot {
  color: var(--text-1);
  font-size: clamp(1.1875rem, 2.4vw, 1.375rem); line-height: 1.5;
  margin-bottom: var(--s3);
}
.verhaal-tekst h2 { margin-bottom: var(--s4); }
.motto { border-top: 1px solid var(--hairline); padding-top: var(--s4); }
.motto blockquote p {
  font-family: var(--font-kop); font-weight: 700;
  font-size: clamp(1.75rem, 3.6vw, 2.625rem);
  line-height: 1.08; letter-spacing: -.02em;
  max-width: 15ch;
  margin-bottom: var(--s3);
  text-wrap: balance;
}
@media (min-width: 900px) {
  .verhaal { grid-template-columns: 7fr 5fr; gap: var(--s6); align-items: end; }
}
.werkwijze { display: grid; gap: var(--s3); }
.werkwijze-lijst { border-bottom: 1px solid var(--hairline); }
.werkwijze-lijst > div { border-top: 1px solid var(--hairline); padding-block: var(--s3); display: grid; gap: .25rem; }
.werkwijze-lijst dt { font-family: var(--font-kop); font-weight: 600; font-size: 1.1875rem; }
.werkwijze-lijst dd { color: var(--text-2); }
@media (min-width: 700px) {
  .werkwijze-lijst > div { grid-template-columns: 5fr 7fr; gap: var(--s4); align-items: baseline; }
}
@media (min-width: 900px) {
  .werkwijze { grid-template-columns: 4fr 8fr; gap: var(--s5); }
}
.slot { display: grid; gap: var(--s3); }
.slot-regel {
  font-family: var(--font-kop); font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.25rem);
  line-height: 1.12; letter-spacing: -.02em;
  max-width: 22ch; margin: 0;
  text-wrap: balance;
}
.acties-direct { gap: var(--s3); }
.tel-groot {
  font-family: var(--font-kop); font-weight: 700; font-size: 1.375rem;
  color: var(--text-1); text-decoration: none; white-space: nowrap;
}
.tel-groot:hover { color: var(--accent-txt); }
.tel-groot { display: inline-flex; align-items: center; gap: .6rem; }
body:has(#contactform) .paginakop { padding-bottom: var(--s4); }
body:has(#contactform) .sectie { padding-block: var(--s5); }
body:has(#contactform) .paginakop-portret { padding-bottom: 0; }
.portret-contact .fotogat--beeld img { object-position: 50% 30%; }
.kantoor-in { display: grid; gap: var(--s4); }
.kantoor-tekst { display: grid; gap: var(--s4); align-content: start; }
@media (min-width: 900px) {
  .kantoor-in { grid-template-columns: 1fr minmax(0, 30rem); gap: var(--s6); align-items: center; }
  .portretkop:has(.portret-contact) { grid-template-columns: 1fr minmax(0, 30rem); }
  .portret-contact { width: 100%; }
  .portret-contact .fotogat { aspect-ratio: 1 / 1; }
}
.contact { display: grid; gap: var(--s5); }
#bericht { scroll-margin-top: 4rem; }
.veld-rij { display: grid; gap: 0 var(--s3); }
.veld { margin: 0 0 var(--s3); display: flex; flex-direction: column; gap: .4rem; }
.veld label { font-family: var(--font-kop); font-weight: 600; font-size: .9375rem; color: var(--text-1); }
.optioneel { font-weight: 400; color: var(--text-2); }
.veld input, .veld select, .veld textarea {
  font: 400 1rem/1.5 var(--font-txt);
  color: var(--text-1);
  background: var(--surface-2);
  border: 1px solid var(--text-2);
  padding: .8rem 1rem;
  width: 100%;
  transition: border-color var(--trans);
}
.veld input:focus-visible, .veld select:focus-visible, .veld textarea:focus-visible { border-color: var(--accent-txt); outline-offset: 2px; }
.veld [aria-invalid="true"] { border-color: var(--text-1); border-width: 2px; padding: calc(.8rem - 1px) calc(1rem - 1px); }
.veld textarea { resize: vertical; min-height: 8rem; }
.veld-fout { font-size: .9375rem; font-weight: 600; color: var(--text-1); }
.veld-fout:empty { display: none; }
.veld-fout-rij { margin: calc(var(--s2) * -1) 0 var(--s3); }
.veld-actie { margin: var(--s1) 0 0; }
.form-status { margin: var(--s3) 0 0; font-weight: 600; min-height: 1.65em; }
.contactkaart { background: var(--surface-1); padding: var(--s4) var(--s3); align-self: start; }
.contactkaart h2 { font-size: 1.5rem; }
.contactlijst > div { padding-block: var(--s2); border-top: 1px solid var(--hairline); }
.contactlijst > div:last-child { padding-bottom: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.contactkanalen { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.contactkanalen a { display: inline-flex; align-items: center; gap: .6rem; }
.contactkanalen .ico-kanaal { flex: none; color: var(--accent-txt); }
.contactlijst dt { font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); margin-bottom: .15rem; }
@media (min-width: 700px) {
  .veld-rij { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 950px) {
  .contact { grid-template-columns: 1.6fr 1fr; gap: var(--s6); }
  .contactkaart { padding: var(--s4); }
}
.offerte .stappen-balk, .offerte #o-terug { display: none; }
.offerte.offerte-js .stappen-balk { display: block; }
.offerte.offerte-js #o-terug:not(.weg) { display: inline-flex; }
.offerte.offerte-js .stap:not(.actief) { display: none; }
.offerte.offerte-js .lakvragen:not(.aan) { display: none; }
.stappen-balk .stappen { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: .5rem; }
.stappen-balk .stappen span { height: 4px; background: var(--hairline); transition: background .3s; }
.stappen-balk .stappen span.aan { background: var(--accent-hi); }
.stap-label { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 var(--s4);
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.stap-label b { color: var(--text-1); font-weight: 600; }
.stap { border: 0; margin: 0 0 var(--s4); padding: 0; display: grid; gap: var(--s3); min-width: 0; }
.stap legend { font: 600 1.375rem/1.2 var(--font-kop); color: var(--text-1); padding: 0; margin-bottom: var(--s2); }
.vraag { font-family: var(--font-kop); font-weight: 600; font-size: .9375rem; color: var(--text-1); }
.veld-hint { margin: 0; font-size: .875rem; color: var(--text-2); }
.kenteken-plaat { display: flex; max-width: 19rem; border: 2px solid #141414; background: #F2C200; }
.kenteken-nl { display: grid; place-items: center; padding: 0 .6rem; background: #1D3F9A; color: #F2C200; font: 700 .75rem/1 var(--font-txt); letter-spacing: .04em; }
.veld .kenteken-plaat input {
  min-width: 0; width: 100%; border: 0; background: transparent; color: #141414;
  font: 800 1.625rem/1 var(--font-kop); letter-spacing: .1em; text-transform: uppercase; padding: .6rem .75rem;
}
.veld .kenteken-plaat input::placeholder { color: #7D6A1C; }
.veld .kenteken-plaat input:focus-visible { outline: 2px solid var(--accent-txt); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips + .chips { margin-top: .4rem; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .55rem .9rem;
  border: 1px solid var(--hairline); background: var(--surface-2); color: var(--text-1); font-size: .9375rem; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.chip:hover span { border-color: var(--text-2); }
.chip input:checked + span { border-color: var(--accent-hi); background: color-mix(in srgb, var(--accent) 32%, var(--surface-2)); }
.chip input:checked + span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-txt); }
.chip input:focus-visible + span { outline: 2px solid var(--accent-txt); outline-offset: 2px; }
.lakvragen { border-left: 2px solid var(--accent-hi); padding-left: var(--s3); display: grid; gap: var(--s3); }
.foto-drop { position: relative; display: grid; gap: .6rem; justify-items: start; padding: var(--s3); border: 1px dashed var(--hairline); background: var(--surface-2); }
.foto-drop.over { border-color: var(--accent-txt); }
.foto-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.foto-drop:focus-within { outline: 2px solid var(--accent-txt); outline-offset: 2px; }
.foto-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .4rem; width: 100%; font-size: .875rem; color: var(--text-2); }
.foto-lijst li { display: flex; gap: .5rem; align-items: center; }
.foto-lijst li::before { content: ""; width: 14px; height: 14px; border: 1px solid var(--hairline); flex: none; }
.foto-duimen { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); gap: 6px; }
.foto-duimen img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.offerte-fout { margin: 0 0 var(--s2); color: #FF9AA8; font-weight: 600; min-height: 1.5em; }
.offerte-fout:empty { min-height: 0; }
.offerte-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.offerte-belofte { margin: 0; font-size: .875rem; color: var(--text-2); }
.offerte-belofte strong { color: var(--text-1); }
.offerte-waarom { font-size: .875rem; color: var(--text-2); }
.offerte.verzonden .offerteform, .offerte.verzonden .stappen-balk { display: none; }
.offerte-klaar:empty { display: none; }
.offerte-klaar { display: grid; gap: var(--s3); outline: none; }
.offerte-klaar h2 { font-size: clamp(1.5rem, 4vw, 1.75rem); margin: 0; }
.offerte-klaar p { margin: 0; color: var(--text-2); }
.offerte-overzicht { margin: 0; padding: var(--s3); background: var(--surface-1); display: grid; gap: .6rem; font-size: .9375rem; }
.offerte-overzicht div { display: grid; grid-template-columns: 9rem 1fr; gap: .75rem; }
.offerte-overzicht dt { color: var(--text-2); }
.offerte-overzicht dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .offerte-overzicht div { grid-template-columns: 1fr; gap: 2px; } }
@media (prefers-reduced-motion: reduce) { .chip span, .stappen-balk .stappen span { transition: none; } }
.soort-keuze { border: 0; margin: 0 0 var(--s4); padding: 0; display: grid; gap: .7rem; }
.soort-keuze legend {
  font-family: var(--font-kop); font-weight: 600; font-size: .9375rem; color: var(--text-1);
  padding: 0; margin-bottom: .7rem;
}
.soort-optie { display: flex; align-items: center; gap: .75rem; cursor: pointer; color: var(--text-1); }
.soort-optie input { accent-color: var(--accent); width: 1.15rem; height: 1.15rem; margin: 0; flex: none; }
.cadeauform:has(#soort-vraag:checked) .alleen-bestellen,
.cadeauform:has(#soort-bestellen:checked) .alleen-vraag { display: none; }
.bedrag-keuze { border: 0; margin: 0 0 var(--s3); padding: 0; display: grid; gap: .9rem; }
.bedrag-keuze legend { font-family: var(--font-kop); font-weight: 600; font-size: .9375rem; color: var(--text-1); padding: 0; margin-bottom: .7rem; }
.bedrag-eigen { margin: 0; }
.bedrag-keuze .chip span.prijs { color: var(--accent-txt); font-variant-numeric: tabular-nums; }
.bedrag-eigen input { max-width: 12rem; }
.cadeau-bestel-kaart { margin: 0; align-self: start; order: -1; }
@media (min-width: 950px) {
  .cadeau-bestel { grid-template-columns: 1.3fr 1fr; }
  .cadeau-bestel-kaart { order: 0; }
  .cadeau-bestel-kaart { position: sticky; top: 7rem; margin-top: 3.5rem; }
}
.sectie-juridisch { padding-top: var(--s6); }
.juridisch { max-width: 46rem; }
.juridisch h1 { font-size: clamp(2.25rem, 7vw, 3.25rem); margin-bottom: var(--s3); }
.juridisch-kop { color: var(--text-2); padding-bottom: var(--s4); border-bottom: 1px solid var(--hairline); }
.juridisch h2 { font-size: clamp(1.375rem, 3.4vw, 1.625rem); margin: var(--s5) 0 var(--s3); scroll-margin-top: 5rem; }
.juridisch h3 { font-size: 1.125rem; margin: var(--s4) 0 var(--s2); }
.juridisch p { color: var(--text-2); }
.juridisch ul { list-style: square; padding-left: 1.25rem; margin: 0 0 var(--s2); color: var(--text-2); }
.juridisch li { margin-bottom: .4rem; }
.juridisch li::marker { color: var(--accent-hi); }
.juridisch a { overflow-wrap: anywhere; }
.voet { position: relative; border-top: 1px solid var(--hairline); padding-top: var(--s6); }
.voet-in { display: grid; gap: var(--s5); padding-bottom: var(--s6); }
.voet-merk img { width: 200px; }
.voet-merk p { color: var(--text-2); max-width: 23rem; margin: var(--s3) 0 var(--s3); }
.voet-label {
  margin: 0 0 var(--s2); color: var(--text-1);
  font: 600 .75rem/1 var(--font-kop); letter-spacing: .14em; text-transform: uppercase;
}
.voet-nav ul, .voet-contact ul { display: grid; gap: .35rem; }
.voet-in li a {
  display: inline-block; padding-block: .3rem;
  color: var(--text-2); text-decoration: none; font-size: 1rem;
}
.voet-in li a:hover, .voet-in li a:focus-visible { color: var(--accent-txt); }
.voet-in .voet-contact li a { display: inline-flex; align-items: center; gap: .5rem; }
.voet-sociaal, .voet-juridisch, .sociaal-rij { display: flex; flex-wrap: wrap; gap: .25rem var(--s3); }
.voet-in .voet-sociaal a { color: var(--text-1); font-family: var(--font-kop); font-weight: 600; font-size: .9375rem; }
.voet-onder {
  display: grid; gap: .5rem;
  border-top: 1px solid var(--hairline); padding-block: var(--s3);
}
.voet-onder p { margin: 0; color: var(--text-2); font-size: .875rem; }
.voet-juridisch a { display: inline-block; padding-block: .3rem; color: var(--text-2); font-size: .875rem; }
.voet-juridisch a:hover, .voet-juridisch a[aria-current] { color: var(--accent-txt); }
.voet-maker a { display: inline-block; padding-block: .3rem; color: var(--text-2); }
.voet-maker a:hover, .voet-maker a:focus-visible { color: var(--accent-txt); }
@media (min-width: 700px) {
  .voet-in { grid-template-columns: 1fr 1fr 1fr; }
  .voet-merk { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .voet-in { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; align-items: start; gap: var(--s5); }
  .voet-merk { grid-column: auto; }
  .voet-onder { grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s3); }
  .voet-juridisch { justify-content: center; }
  .voet-maker { text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
.kop-tel, .nav-tel a { align-items: center; gap: .45rem; }
.nav-tel a { display: inline-flex; }
.ico-tel { width: 1em; height: 1em; flex: none; color: var(--accent-txt); }
.voet-sociaal, .sociaal-rij { gap: .25rem var(--s2); align-items: center; }
.voet-in .voet-sociaal a, .sociaal-rij a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; color: var(--text-1);
}
.voet-in .voet-sociaal a:hover, .voet-in .voet-sociaal a:focus-visible,
.sociaal-rij a:hover, .sociaal-rij a:focus-visible { color: var(--accent-txt); }
.ico-sociaal { width: 22px; height: 22px; }