@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Public+Sans:wght@400;500;600;700&family=Caveat:wght@500;600;700&display=swap');

:root {
  --ink: #1c1a16;
  --ink-2: #26241e;
  --ink-3: #131210;
  --paper: #fdf6ea;
  --oranje: #e2622e;
  --petrol: #0f6f68;
  --geel: #f5b93f;
  --roze: #d94f73;
  --mint: #4bbfae;
  --perzik: #fbe7d9;
  --mintlicht: #d8ede9;
  --rozelicht: #f9e3ea;
  --muted: #4a453c;
  --grijs: #6b6458;
  --lijn: #e3dbd0;
  --whatsapp: #25d366;
  --pad: clamp(20px, 5vw, 100px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 92px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  margin: 0;
  letter-spacing: -0.03em;
  font-weight: 800;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--petrol); text-decoration: none; }
a:hover { color: var(--ink); }

.wrap { max-width: 1240px; margin: 0 auto; }
.sectie { padding: clamp(56px, 8vw, 100px) var(--pad); }
.donker { background: var(--ink); color: var(--paper); }
.perzik { background: var(--perzik); }
.geel { background: var(--geel); }
.petrol { background: var(--petrol); color: var(--paper); }

.badge {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 15px; border-radius: 999px; transform: rotate(-2deg);
  background: var(--petrol); color: var(--paper);
}
.badge.oranje { background: var(--oranje); color: #fff; }
.badge.geel { background: var(--geel); color: var(--ink); }
.badge.roze { background: var(--roze); color: #fff; }

.knop {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 30px; border-radius: 999px;
  font-size: 17px; font-weight: 700; border: 2px solid transparent;
  background: var(--oranje); color: #fff; cursor: pointer;
}
.knop:hover { background: #cf5525; color: #fff; }
.knop.lijn { background: transparent; color: var(--ink); border-color: var(--ink); font-weight: 600; }
.knop.lijn:hover { background: var(--ink); color: var(--paper); }
.knop.lijn-licht { background: transparent; color: var(--paper); border-color: rgba(253,246,234,0.32); font-weight: 600; }
.knop.lijn-licht:hover { background: rgba(253,246,234,0.1); color: var(--paper); }
.knop.wa { background: var(--whatsapp); color: #0b2a17; gap: 10px; }
.knop.wa:hover { background: #1fbd5a; color: #0b2a17; }

/* ---------- nav ---------- */
.nav { background: var(--ink); position: sticky; top: 0; z-index: 50; }
.nav-in {
  max-width: 1240px; margin: 0 auto; padding: 0 var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  min-height: 74px; gap: 16px;
}
.merk { display: flex; align-items: center; gap: 9px; }
.logo { display: flex; flex-direction: column; line-height: 0.84; }
.logo-r1, .logo-r2 {
  font-family: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  font-weight: 800; letter-spacing: -0.045em; white-space: nowrap;
}
.logo-r1 { font-size: 20px; color: var(--paper); }
.logo-r2 { font-size: 23px; color: var(--oranje); }
.footer .logo-r1 { font-size: 17px; }
.footer .logo-r2 { font-size: 19.5px; }

.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { color: rgba(253,246,234,0.74); font-size: 15px; }
.nav-links a:hover { color: var(--paper); }
.nav-cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  background: var(--oranje); color: #fff !important; border-radius: 999px;
  font-size: 15px; font-weight: 600;
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(36px, 6vw, 78px) var(--pad) clamp(48px, 7vw, 88px); }
.hero .blob-geel { position: absolute; top: -140px; right: -120px; width: 520px; height: 520px; border-radius: 50%; background: var(--geel); opacity: 0.32; }
.hero .blob-petrol { position: absolute; bottom: -180px; left: -140px; width: 420px; height: 420px; border-radius: 50%; background: var(--petrol); opacity: 0.12; }
.hero-in { position: relative; display: grid; grid-template-columns: 1.25fr 0.9fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(36px, 5.2vw, 62px); line-height: 1.02; }
.hero h1 em { font-style: normal; color: var(--oranje); }
.hero-tekst { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.hero-lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 560px; }
.knoppen { display: flex; flex-wrap: wrap; gap: 14px; }
.punten { display: flex; flex-wrap: wrap; gap: 20px; }
.punt { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--muted); }
.stip { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.portret { position: relative; display: flex; justify-content: center; }
.portret .schaduwblok {
  position: absolute; top: 26px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: min(340px, 78vw); aspect-ratio: 34/43; border-radius: 14px; background: var(--oranje);
}
.portret img {
  position: relative; width: min(340px, 78vw); aspect-ratio: 34/43; object-fit: cover; object-position: 50% 22%;
  border-radius: 14px; transform: rotate(2deg); box-shadow: 0 18px 40px rgba(28,26,22,0.18);
}
.prijssticker {
  position: absolute; bottom: -18px; left: 0; width: 120px; height: 120px; border-radius: 50%;
  background: var(--geel); border: 3px solid var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: rotate(-9deg);
}
.prijssticker b { font-family: "Bricolage Grotesque", sans-serif; font-size: 32px; letter-spacing: -0.04em; line-height: 1; }
.prijssticker small { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 3px; }

/* ---------- cijfers ---------- */
.cijfers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.cijfer b { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(38px, 4.4vw, 54px); letter-spacing: -0.04em; line-height: 1; display: block; }
.cijfer span { font-size: 16px; color: rgba(253,246,234,0.72); }

/* ---------- algemene grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.kop-groot { font-size: clamp(30px, 4vw, 46px); line-height: 1.06; }
.kop-mid { font-size: clamp(26px, 3.2vw, 42px); line-height: 1.08; }

.kaart { border: 2px solid var(--ink); border-radius: 14px; padding: 32px; display: flex; flex-direction: column; gap: 13px; }
.kaart h3 { font-size: 23px; }
.kaart p { font-size: 16px; color: var(--muted); }
.icoon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }

/* ---------- voor en na schuif ---------- */
.schuif-sectie { background: var(--ink); }
.schuif-kop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.schuif-kop h2 { color: var(--paper); font-size: clamp(28px, 3.8vw, 44px); line-height: 1.06; }
.schuif-kop p { color: rgba(253,246,234,0.72); font-size: 17px; max-width: 420px; }

.schuif {
  --x: 50%;
  position: relative; border-radius: 16px; overflow: hidden;
  border: 3px solid var(--ink); background: #fff;
  height: clamp(360px, 40vw, 400px); max-width: 1024px; margin: 0 auto; touch-action: pan-y;
}
.schuif .laag { position: absolute; inset: 0; overflow: hidden; }
.schuif .laag.voor { width: var(--x); border-right: 3px solid var(--ink); }
.schuif .mini { position: absolute; inset: 0; width: 100%; min-width: 320px; }


.schuif-handvat {
  position: absolute; top: 0; bottom: 0; left: var(--x); width: 0; z-index: 3; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.schuif-knop {
  width: 56px; height: 56px; border-radius: 50%; background: var(--geel); border: 3px solid var(--ink);
  display: flex; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.schuif input[type="range"] {
  position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; margin: 0; padding: 0;
}
.schuif input[type="range"]:focus-visible + .schuif-handvat .schuif-knop { outline: 3px solid #fff; outline-offset: 3px; }
.schuif-label {
  position: absolute; top: 16px; z-index: 2;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 999px; border: 2px solid var(--ink);
}
.schuif-label.links { left: 16px; background: var(--geel); color: var(--ink); }
.schuif-label.rechts { right: 16px; background: var(--oranje); color: #fff; }
.schuif-hint { margin-top: 14px; font-size: 15px; color: rgba(253,246,234,0.6); text-align: center; }

/* nep-site: oud, kaal en alleen tekst */
.oud {
  background: #fff; color: #111; font-family: "Times New Roman", Times, serif;
  padding: 54px 20px 20px; height: 100%; overflow: hidden;
}
.oud h3 { font-family: "Times New Roman", Times, serif; font-weight: 700; font-size: clamp(20px, 2.4vw, 28px); color: #111; letter-spacing: 0; margin-bottom: 4px; }
.oud .mini-wrap { max-width: 46ch; }
.oud .ondertitel { font-size: 14px; color: #444; margin-bottom: 14px; }
.oud .menu { font-size: 14px; margin-bottom: 16px; }
.oud .menu span { color: #0000ee; text-decoration: underline; }
.oud hr { border: none; border-top: 1px solid #ccc; margin: 14px 0; }
.oud p { font-size: 14px; line-height: 1.5; margin-bottom: 10px; max-width: 46ch; }
.oud .klein { font-size: 12px; color: #666; }

/* nep-site: nieuw */
.nieuw { background: #14261a; height: 100%; overflow: hidden; padding: 0; }
.nieuw img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }

/* ---------- prijs ---------- */
.prijsgrid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: start; }
.prijskaart { background: var(--paper); color: var(--ink); border-radius: 14px; padding: clamp(26px, 3vw, 44px); }
.zijblok { color: var(--ink); }
.inbegrepen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 34px; }
.item { display: flex; gap: 12px; align-items: flex-start; }
.item svg { flex-shrink: 0; margin-top: 3px; }
.item b { font-size: 16px; display: block; }
.item small { font-size: 15px; line-height: 1.5; color: var(--grijs); display: block; }
.prijsregel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.prijsregel b { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(36px, 4vw, 48px); letter-spacing: -0.04em; }
.scheiding { height: 2px; background: var(--lijn); margin: 30px 0 24px; }

/* ---------- gratis websitecheck ---------- */
.check-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 34px; }
.check-punten { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.check-punt { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; }
.check-punt svg { flex-shrink: 0; margin-top: 3px; }


.sfeer { padding: 4px 22px 2px; border-top: 2px solid var(--lijn); margin-top: 18px; padding-top: 18px; }
.sfeer h4 { font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--grijs); }
.sfeer-grid { margin-top: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sfeer-foto { border-radius: 10px; overflow: hidden; border: 2px solid var(--ink); }
.sfeer-foto img { width: 100%; height: 118px; object-fit: cover; }
.sfeer-kleuren { display: flex; gap: 8px; align-items: center; padding: 4px 2px; }
.sfeer-kleuren i { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); }
.sfeer-type { display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.sfeer-type b { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 16px; line-height: 1.15; letter-spacing: -0.02em; }
.sfeer-type span { font-size: 12.5px; color: var(--grijs); }
.sfeer-krabbel {
  font-family: "Caveat", cursive; font-weight: 600; font-size: 20px; color: var(--oranje);
  margin-top: 12px; transform: rotate(-1.2deg);
}

.scan-houder { position: relative; }
.scan {
  position: relative; background: #fff; border: 3px solid var(--ink); border-radius: 16px;
  overflow: hidden; box-shadow: 0 14px 34px rgba(28,26,22,0.18);
}
.scan-top { background: var(--ink); color: var(--paper); padding: 15px 20px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.scan-top b { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 19px; letter-spacing: -0.03em; }
.scan-top span { font-size: 13px; color: rgba(253,246,234,0.6); }

.scan-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 2px solid var(--lijn); }
.meter { padding: 15px 16px; border-right: 1px solid var(--lijn); }
.meter:last-child { border-right: none; }
.meter span { font-size: 11px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--grijs); }
.meter b { display: flex; align-items: center; gap: 8px; font-size: 16.5px; margin-top: 7px; }
.bolletje { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }

.scan-body { padding: 20px 22px 6px; }
.scan-body h4 { font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--grijs); }
.scan-punt { display: flex; gap: 12px; margin-top: 15px; }
.scan-nr {
  width: 26px; height: 26px; border-radius: 50%; background: var(--oranje); color: #fff;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.scan-punt p { font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.scan-voet {
  margin-top: 20px; border-top: 2px solid var(--lijn); padding: 14px 22px;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; font-size: 13px; color: var(--grijs);
}
.scan-stempel {
  position: absolute; z-index: 2; top: -15px; right: -10px; background: var(--geel); border: 2px solid var(--ink);
  transform: rotate(5deg); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px; box-shadow: 0 4px 12px rgba(28,26,22,0.18);
}

.check-form {
  margin-top: clamp(28px, 4vw, 40px);
  background: var(--paper); border: 2px solid var(--ink); border-radius: 16px;
  padding: clamp(22px, 3vw, 32px);
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: end;
}
.check-form label { font-size: 14px; color: var(--grijs); display: block; margin-bottom: 6px; }
.check-form input {
  font-family: inherit; font-size: 16px; color: var(--ink); background: #fff;
  border: 2px solid var(--lijn); border-radius: 10px; padding: 13px 14px; width: 100%;
}
.check-form input:focus { outline: 2px solid var(--oranje); outline-offset: 1px; border-color: var(--ink); }
.check-klein { grid-column: 1 / -1; font-size: 14px; color: var(--grijs); margin: 0; }

@media (max-width: 1000px) {
  .check-grid { grid-template-columns: 1fr; }
  .check-form { grid-template-columns: 1fr; }
  .check-form .knop { width: 100%; }
}

/* ---------- stappen ---------- */
.stap { display: flex; flex-direction: column; gap: 12px; }
.stapnr {
  font-family: "Bricolage Grotesque", sans-serif; font-size: 20px; font-weight: 800; color: #fff;
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.stap h3 { font-size: 21px; }
.stap p { font-size: 16px; color: var(--muted); }

/* ---------- werk ---------- */
.werkkaart { background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.werkkaart .balk { height: 8px; }
.werkkaart img { width: 100%; aspect-ratio: 680/391; object-fit: cover; object-position: 50% 0; border-bottom: 2px solid var(--ink); }
.werkkaart .body { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 8px; }
.werkkaart .titelrij { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 12px; }
.werkkaart .titelrij a { padding: 6px 0; }
.werkkaart h3 { font-size: 23px; }
.werkkaart .soort { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #7a7164; }
.werkkaart p { font-size: 16px; color: var(--muted); }
.werkcta { background: var(--ink); border-radius: 14px; padding: 40px 34px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; }
.werkcta h3 { font-size: clamp(24px, 2.6vw, 32px); color: var(--paper); line-height: 1.08; }
.werkcta p { font-size: 16px; color: rgba(253,246,234,0.72); }

/* ---------- klik ---------- */
.klikblok { background: var(--ink); border-radius: 18px; padding: clamp(32px, 4vw, 62px) clamp(26px, 4vw, 68px); position: relative; overflow: hidden; }
.klikblok .blob { position: absolute; top: -90px; right: -60px; width: 320px; height: 320px; border-radius: 50%; background: var(--roze); opacity: 0.22; }
.klik-in { position: relative; display: grid; grid-template-columns: auto 1fr; gap: clamp(22px, 3vw, 44px); align-items: center; }
.klik-in img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 4px solid var(--geel); }
.klik-in h2 { color: var(--paper); font-size: clamp(26px, 3.4vw, 42px); line-height: 1.08; }
.klik-in p { color: rgba(253,246,234,0.82); font-size: 18px; max-width: 760px; }

/* ---------- faq ---------- */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 56px; }
.faq h3 { font-size: 20px; }
.faq p { font-size: 16px; color: #4a3f22; }

/* ---------- contact ---------- */
.contactgrid { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.contact-intro { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.contact-intro h2 { color: var(--paper); font-size: clamp(30px, 4.6vw, 50px); line-height: 1.05; }
.contact-intro p { color: rgba(253,246,234,0.78); font-size: 18px; max-width: 560px; }
.metmij { display: flex; align-items: center; gap: 16px; }
.metmij img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; border: 3px solid var(--geel); }
.metmij span { font-size: 17px; font-weight: 600; color: rgba(253,246,234,0.74); }

.contactkaart { background: var(--ink-2); border-radius: 14px; padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; gap: 20px; }
.kaartlabel { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--geel); }
.bubbels { display: flex; flex-direction: column; gap: 10px; }
.bubbel { max-width: 88%; padding: 12px 16px; font-size: 15px; line-height: 1.45; }
.bubbel.hun { align-self: flex-start; background: #37342c; color: rgba(253,246,234,0.92); border-radius: 16px 16px 16px 5px; }
.bubbel.mij { align-self: flex-end; background: var(--whatsapp); color: #0b2a17; border-radius: 16px 16px 5px 16px; font-weight: 600; }
.gegeven { display: flex; flex-direction: column; gap: 4px; }
.gegeven span { font-size: 14px; color: rgba(253,246,234,0.52); }
.gegeven a, .gegeven b { font-size: 18px; font-weight: 700; color: var(--paper); }
.gegeven a:hover { color: var(--geel); }
.dunlijn { height: 1px; background: rgba(253,246,234,0.16); }

form { display: flex; flex-direction: column; gap: 12px; }
form label { font-size: 14px; color: rgba(253,246,234,0.6); }
form input, form textarea {
  font-family: inherit; font-size: 16px; color: var(--paper);
  background: #1c1a16; border: 1px solid rgba(253,246,234,0.2); border-radius: 10px;
  padding: 13px 14px; width: 100%;
}
form input:focus, form textarea:focus { outline: 2px solid var(--oranje); outline-offset: 1px; }
form textarea { min-height: 110px; resize: vertical; }
.verstopt { position: absolute; left: -9999px; }

/* ---------- zwevende whatsapp-knop ---------- */
.wa-zweef {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  height: 58px; padding: 0 22px 0 18px;
  background: var(--whatsapp); color: #0b2a17;
  border: 2px solid #0b2a17; border-radius: 999px;
  font-weight: 700; font-size: 16px;
  box-shadow: 0 8px 22px rgba(11,42,23,0.28);
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.wa-zweef.wa-weg { opacity: 0; transform: translateY(78px) scale(0.85); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .wa-zweef { transition: none; } }
.wa-zweef:hover { background: #1fbd5a; color: #0b2a17; }
.wa-zweef:focus-visible { outline: 3px solid var(--geel); outline-offset: 3px; }

@media (max-width: 760px) {
  .wa-zweef { height: 56px; width: 56px; padding: 0; justify-content: center; gap: 0; }
  .wa-zweef-tekst { display: none; }
}

/* ---------- footer ---------- */
.footer { background: var(--ink-3); padding: 28px var(--pad) calc(28px + 56px); }
.footer-in { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.footer-merk { display: flex; flex-direction: column; gap: 6px; }
.footer-tag { font-size: 14px; color: rgba(253,246,234,0.44); }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.footer-links a, .footer-links span { font-size: 14px; color: rgba(253,246,234,0.55); }
.footer-links a:hover { color: var(--paper); }

/* ---------- juridische pagina's ---------- */
.doc { max-width: 820px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--pad) clamp(56px, 8vw, 96px); }
.doc h1 { font-size: clamp(32px, 5vw, 46px); }
.doc .versie { font-size: 15px; color: var(--grijs); margin-top: 8px; }
.doc h2 { font-size: clamp(20px, 2.2vw, 24px); color: var(--oranje); margin-top: 38px; }
.doc p { font-size: 17px; color: var(--muted); margin-top: 12px; }
.doc .lead { font-style: italic; color: var(--ink); margin-top: 24px; }
.doc table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 15px; }
.doc th, .doc td { border: 1px solid var(--lijn); padding: 10px 12px; text-align: left; vertical-align: top; }
.doc th { background: #f4ece0; font-weight: 700; }
.doc .terug { display: inline-block; margin-top: 44px; font-weight: 600; }
.doc-tabel-wrap { overflow-x: auto; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .hero-in { grid-template-columns: 1fr; }
  .portret { margin-top: 20px; }
  .prijsgrid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contactgrid { grid-template-columns: 1fr; }
  .klik-in { grid-template-columns: 1fr; justify-items: start; }
  .overkaart { grid-template-columns: 1fr; justify-items: start; }
}

@media (max-width: 760px) {
  .portret img, .portret .schaduwblok { width: min(250px, 62vw); }
  .prijssticker { width: 92px; height: 92px; bottom: -14px; }
  .prijssticker b { font-size: 25px; }
  .prijssticker small { font-size: 9.5px; }
  .hero { padding: 24px var(--pad) 34px; }
  .hero .blob-geel { top: -235px; right: -140px; width: 330px; height: 330px; opacity: 0.24; }
  .hero .blob-petrol { display: none; }
  .hero-in { gap: 0; }
  .hero-tekst { gap: 18px; }
  .hero h1 { font-size: clamp(31px, 8.6vw, 40px); }
  .hero-lead { font-size: 17px; }
  .knoppen { gap: 10px; }
  .punten { flex-direction: column; gap: 9px; }
  .punt { font-size: 15.5px; }
  .portret { width: min(250px, 62vw); margin: 26px auto 0; }
  .schuif { height: 260px; }
  .scan-meters { grid-template-columns: 1fr; }
  .meter {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 16px; border-right: none; border-bottom: 1px solid var(--lijn);
  }
  .meter:last-child { border-bottom: none; }
  .meter b { margin-top: 0; }
  .oud { padding: 52px 16px 16px; }
  .oud p { font-size: 13px; margin-bottom: 8px; }
  .nav-links { display: none; }
  .grid-3, .grid-2, .grid-4, .faq, .cijfers, .inbegrepen { grid-template-columns: 1fr; }
  .faq { gap: 28px; }
  .cijfers { gap: 22px; }
  .knoppen { flex-direction: column; align-items: stretch; width: 100%; }
  .knop { width: 100%; }
  .hero .knop.lijn {
    border: none; background: none; min-height: 0; padding: 2px 0;
    font-size: 16px; font-weight: 700; color: var(--ink);
    text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px;
  }
  .hero .knop.lijn:hover { background: none; color: var(--oranje); }
  .hero-tekst { align-items: stretch; }
  .hero .badge, .hero h1, .hero-lead, .punten { align-self: flex-start; }
  .prijssticker { width: 100px; height: 100px; }
  .prijssticker b { font-size: 27px; }
}