/* =========================================================
   NL Reiniging
   Native CSS, geen framework. Licht thema met twee donkere
   accentbanden als bewuste kleurwissel.
   Vormsysteem: knoppen pil, kaarten 20px, banden 44px, velden 12px.
   ========================================================= */

:root{
  --ink:        #0c1220;
  --ink-2:      #4a5670;
  --ink-3:      #5f6a83;
  --line:       #e2e7f0;
  --line-soft:  #edf1f7;
  --surface:    #ffffff;
  --soft:       #f4f7fc;

  --blue:       #0f62d6;
  --blue-deep:  #0a49a5;
  --blue-tint:  #e9f0fd;
  --mint:       #0f9e8c;
  --mint-deep:  #097a6d;
  --mint-tint:  #e7f7f3;
  --sand:       #c9762a;
  --sand-deep:  #9d5917;
  --sand-tint:  #fdf0e2;
  --navy:       #0a1836;
  --navy-2:     #13285a;

  --r-media: 20px;
  --r-band:  44px;
  --r-field: 12px;
  --r-pill:  999px;

  --shadow-1: 0 1px 2px rgba(12,18,32,.05);
  --shadow-2: 0 12px 30px -14px rgba(12,18,32,.22), 0 2px 6px rgba(12,18,32,.04);
  --shadow-3: 0 36px 70px -34px rgba(12,18,32,.34), 0 10px 24px -16px rgba(12,18,32,.12);

  --ease: cubic-bezier(.16,1,.3,1);
  --header-h: 76px;
  --wrap: 1220px;

  --font-display: "Bricolage Grotesque", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
a, button, summary, input, select, textarea{ -webkit-tap-highlight-color:rgba(15,98,214,.12); }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 24px); -webkit-text-size-adjust:100%; }

body{
  margin:0; background:var(--surface); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:1.06; letter-spacing:-.03em; text-wrap:balance; margin:0 0 .5em; }
h1{ font-size:clamp(2.6rem, 6vw, 4.6rem); }
h2{ font-size:clamp(2rem, 3.6vw, 3rem); }
h3{ font-size:1.16rem; line-height:1.25; letter-spacing:-.02em; }
p{ margin:0 0 1rem; color:var(--ink-2); max-width:66ch; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:6px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,44px); }
.wrap-narrow{ max-width:820px; }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link{ position:fixed; top:12px; left:50%; translate:-50% -200%; z-index:200; background:#fff; padding:10px 18px; border-radius:var(--r-pill); box-shadow:var(--shadow-2); font-weight:600; transition:translate .25s var(--ease); }
.skip-link:focus-visible{ translate:-50% 0; }

/* ---------- Knoppen ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border:0; cursor:pointer; font:inherit; font-weight:600; letter-spacing:-.01em;
  padding:.68rem 1.25rem; border-radius:var(--r-pill); white-space:nowrap;
  transition:transform .18s var(--ease), background-color .2s var(--ease), box-shadow .25s var(--ease);
}
.btn-lg{ padding:.92rem 1.7rem; font-size:1.02rem; }
.btn-block{ width:100%; }
.btn:active{ transform:scale(.98); }
.btn-primary{ background:var(--blue); color:#fff; box-shadow:0 10px 22px -12px rgba(15,98,214,.85); }
.btn-primary:hover{ background:var(--blue-deep); }
.btn-quiet{ background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line), var(--shadow-1); }
.btn-quiet:hover{ box-shadow:inset 0 0 0 1px #d5dce8, var(--shadow-2); }
.btn-glass{ background:rgba(255,255,255,.86); color:var(--ink); box-shadow:inset 0 0 0 1px rgba(12,18,32,.08), var(--shadow-2); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.btn-glass:hover{ background:#fff; }
.btn[aria-busy="true"]{ opacity:.75; pointer-events:none; }

.link-phone{ font-weight:600; font-size:.95rem; color:var(--ink-2); font-variant-numeric:tabular-nums; padding:.4rem .2rem; }
.link-phone:hover{ color:var(--ink); }
.link-arrow{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600; color:var(--blue); margin-top:1.4rem; }
.link-arrow::after{
  content:""; width:18px; height:10px; background:currentColor; transition:transform .25s var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M0 7h20M15 1l6 6-6 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M0 7h20M15 1l6 6-6 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.link-arrow:hover::after{ transform:translateX(4px); }

/* ---------- Pictogrammen in gekleurde cirkels ---------- */
.ic{ display:grid; place-items:center; width:46px; height:46px; border-radius:16px; margin-bottom:16px; }
.ic svg{ width:23px; height:23px; }
.ic-blue{ background:var(--blue-tint); color:var(--blue); }
.ic-mint{ background:var(--mint-tint); color:var(--mint-deep); }
.ic-sand{ background:var(--sand-tint); color:var(--sand-deep); }
.ic-on-dark{ background:rgba(255,255,255,.18); color:#fff; }

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100; pointer-events:none;
  display:flex; flex-direction:column; align-items:center;
  padding:14px clamp(14px,4vw,28px) 0; padding-top:calc(14px + env(safe-area-inset-top));
}
.bar{
  pointer-events:auto; width:min(100%, var(--wrap));
  display:flex; align-items:center; flex-wrap:nowrap; gap:clamp(10px,3vw,26px);
  padding:8px 10px 8px 16px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px);
  box-shadow:inset 0 0 0 1px rgba(12,18,32,.05), var(--shadow-2);
  transition:padding .5s var(--ease), background-color .5s var(--ease), box-shadow .5s var(--ease), width .5s var(--ease);
}
.site-header.at-top .bar, .site-header .bar:hover, .site-header.bar-focus .bar{
  padding:13px 13px 13px 20px; background:rgba(255,255,255,.94);
  box-shadow:inset 0 0 0 1px rgba(12,18,32,.06), var(--shadow-3);
}
.site-header:not(.at-top) .bar{ width:min(100%, 1080px); }
.brand{ display:inline-flex; align-items:center; flex:none; }
.brand-logo{ height:42px; width:auto; object-fit:contain; }
.nav{ display:flex; align-items:center; gap:2px; margin-inline:auto; }
.nav a{ padding:.5rem .78rem; border-radius:var(--r-pill); font-size:.95rem; font-weight:500; color:var(--ink-2); transition:color .2s var(--ease), background-color .2s var(--ease); }
.nav a:hover, .nav a.active{ color:var(--ink); background:var(--soft); }
.bar-actions{ display:flex; align-items:center; gap:10px; }
.menu-toggle{ display:none; width:44px; height:44px; border:0; border-radius:14px; background:var(--soft); cursor:pointer; padding:0; place-items:center; gap:5px; }
.menu-toggle span{ display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease); }
.menu-toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }
.mobile-nav{
  pointer-events:auto; width:min(100%, var(--wrap)); margin-top:10px; padding:10px;
  background:rgba(255,255,255,.97); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-radius:24px; box-shadow:inset 0 0 0 1px rgba(12,18,32,.05), var(--shadow-3);
  display:grid; gap:2px; animation:drop .3s var(--ease) both;
}
.mobile-nav a{ padding:.95rem 1.1rem; border-radius:14px; font-weight:500; font-size:1.05rem; }
.mobile-nav a:hover{ background:var(--soft); }
.mobile-nav .btn{ margin-top:8px; min-height:52px; }
@keyframes drop{ from{ opacity:0; transform:translateY(-8px) } to{ opacity:1; transform:none } }
body.menu-open{ overflow:hidden; }

/* =========================================================
   1. Hero
   ========================================================= */
.hero{ position:relative; height:300vh; background:var(--surface); --p:0; }
.hero-stage{ position:sticky; top:0; height:100vh; height:100dvh; overflow:hidden; }
.hero-video, .hero-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-video{ z-index:1; opacity:0; transition:opacity .4s var(--ease); pointer-events:none; }
.hero-video.klaar{ opacity:1; }
.hero-poster{ z-index:0; }
.hero-scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(96deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 26%, rgba(255,255,255,.42) 46%, rgba(255,255,255,0) 66%),
    linear-gradient(0deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 28%);
}
.hero-copy{
  position:relative; z-index:3; height:100%;
  width:min(100%, var(--wrap)); margin-inline:auto;
  padding:calc(var(--header-h) + 6vh) clamp(20px,5vw,44px) 0;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; max-width:none;
}
/* tijdens het vastgezette deel schuift de tekst weg: zo zie je meteen dat je
   scroll aankomt, ook al staat de pagina zelf nog stil */
.hero-copy > *{
  transform:translateY(calc(var(--p) * -34px));
  opacity:clamp(0, calc(1.05 - var(--p) * 1.7), 1);
  will-change:transform, opacity;
}
.hero-copy h1{ max-width:12ch; margin-bottom:.35em; }
.hero-copy h1 em{
  font-style:normal;
  background:linear-gradient(96deg, var(--blue) 10%, #2b9bf0 55%, var(--mint) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{ font-size:clamp(1.05rem,1.5vw,1.22rem); max-width:34ch; margin-bottom:1.9rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* golf onderaan de hero */
.wave{ position:absolute; left:0; width:100%; z-index:4; pointer-events:none; display:block; }
.wave-hero{ bottom:-1px; height:clamp(56px,7vw,120px); }

/* =========================================================
   2. Cijfers, met zwevende druppels
   ========================================================= */
.stats{ position:relative; overflow:hidden; padding-block:clamp(26px,5vh,54px); }
.stats-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,30px); }
.stat{ padding-inline:clamp(10px,1.6vw,24px); }
.stat + .stat{ border-left:1px solid var(--line-soft); }
.stat > b{ display:block; font-family:var(--font-display); font-size:clamp(1.7rem,2.8vw,2.4rem); letter-spacing:-.035em; line-height:1.05; color:var(--blue-deep); font-variant-numeric:tabular-nums; }
.stat > span{ display:block; margin-top:.4rem; font-size:.9rem; color:var(--ink-3); max-width:24ch; }
.count{ font-variant-numeric:tabular-nums; }

.drop{
  position:absolute; border-radius:50% 50% 50% 8%; opacity:.5; pointer-events:none;
  background:linear-gradient(150deg, #bcdcff, #e8f3ff);
  transition:transform .1s linear;
}
.drop-a{ width:120px; height:120px; right:6%; top:-30px; rotate:-18deg; }
.drop-b{ width:70px; height:70px; left:4%; bottom:-24px; rotate:24deg; opacity:.35; }

/* =========================================================
   Secties, elk met eigen ritme
   ========================================================= */
.section{ padding:clamp(76px,11vh,140px) 0; }
.section-soft{ background:var(--soft); }
.section-mint{ background:var(--mint-tint); padding-block:clamp(60px,8vh,104px); }
.head{ max-width:640px; margin:0 0 clamp(34px,5vh,58px); }
.head-left{ max-width:560px; margin-bottom:0; }
.head p{ font-size:1.06rem; }
.head-plain{ margin:0 0 clamp(30px,4vh,50px); }

/* ---------- 3. Bento ---------- */
.bento{ display:grid; gap:clamp(14px,1.6vw,20px); grid-template-columns:repeat(4,1fr); }
.tile{
  grid-column:span 1; background:var(--surface); border-radius:var(--r-media);
  box-shadow:inset 0 0 0 1px var(--line), var(--shadow-1);
  padding:26px 24px; display:flex; flex-direction:column;
  transition:box-shadow .35s var(--ease), transform .35s var(--ease);
}
.tile:hover{ box-shadow:inset 0 0 0 1px #d7dfec, var(--shadow-2); transform:translateY(-4px); }
.tile p{ font-size:.97rem; margin-bottom:.55rem; }
.tile-price{ margin:auto 0 0; padding-top:.7rem; font-size:.86rem; font-weight:700; color:var(--blue-deep); }
.tile-lg{ grid-column:span 2; grid-row:span 2; padding:0; overflow:hidden; }
.tile-wide{ grid-column:span 2; }
.tile-photo{ padding:0; overflow:hidden; }
.tile-photo img{ width:100%; height:100%; min-height:170px; object-fit:cover; }
.tile-lg img{ min-height:300px; }
.tile-body{ padding:24px; display:flex; flex-direction:column; flex:1; }
.tile-blue{
  grid-row:span 2; color:#fff; box-shadow:0 20px 40px -22px rgba(15,98,214,.8);
  background:linear-gradient(158deg, var(--blue) 0%, #2b8ae8 60%, #35b6cf 100%);
}
.tile-blue h3{ color:#fff; }
.tile-blue p{ color:rgba(255,255,255,.88); }
.tile-blue .tile-price{ color:#fff; }
.tile-mint{ background:var(--mint-tint); box-shadow:inset 0 0 0 1px #cbeae3; }
.tile-mint .tile-price{ color:var(--mint-deep); }
.tile-sand{ background:var(--sand-tint); box-shadow:inset 0 0 0 1px #f3ddc2; }
.tile-sand .tile-price{ color:var(--sand-deep); }

/* ---------- 4. Donkere band met route ---------- */
.band{
  position:relative; overflow:hidden; color:#fff;
  background:radial-gradient(120% 90% at 12% 0%, var(--navy-2) 0%, var(--navy) 55%, #07122a 100%);
  border-radius:var(--r-band); margin-inline:clamp(10px,2.5vw,26px);
  padding-block:clamp(78px,12vh,150px);
}
.band h2, .band h3{ color:#fff; }
.band p{ color:rgba(255,255,255,.72); }
.head-band{ max-width:660px; }
.glow{ position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; transition:transform .1s linear; }
.glow-a{ width:min(420px,52vw); aspect-ratio:1; background:rgba(23,150,255,.42); top:-90px; right:-60px; }
.glow-b{ width:min(320px,44vw); aspect-ratio:1; background:rgba(18,165,148,.34); bottom:-110px; left:-40px; }
.glow-c{ width:min(460px,60vw); aspect-ratio:1; background:rgba(255,255,255,.22); top:-120px; right:-80px; }

.route{ width:100%; height:60px; margin-bottom:-18px; overflow:visible; }
.route-line{ stroke-dasharray:6 12; stroke-dashoffset:600; transition:stroke-dashoffset 1.8s var(--ease); }

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,34px); }
.step{ position:relative; padding-top:22px; }
.step::before{
  content:""; position:absolute; top:0; left:0; width:12px; height:12px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 5px rgba(255,255,255,.14);
}
.step p{ font-size:.98rem; margin:0; }

/* ---------- 5. Resultaat ---------- */
.result-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(26px,4vh,44px); }
.badge{
  margin:0; flex:none; padding:.5rem 1rem; border-radius:var(--r-pill);
  background:var(--sand-tint); color:var(--sand-deep); font-size:.85rem; font-weight:700;
  rotate:-3deg; box-shadow:var(--shadow-1);
}
.compare-visual{ position:relative; border-radius:var(--r-media); overflow:hidden; aspect-ratio:16/7; box-shadow:var(--shadow-3); --split:50%; }
.compare-side{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.compare-after{ clip-path:inset(0 0 0 var(--split)); }
.compare-tag{ position:absolute; top:16px; z-index:2; padding:.34rem .8rem; border-radius:var(--r-pill); background:rgba(255,255,255,.94); font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; box-shadow:var(--shadow-1); }
.compare-tag-before{ left:16px; color:var(--ink-2); }
.compare-tag-after{ right:16px; color:var(--blue-deep); }
.compare-handle{ position:absolute; top:0; bottom:0; left:var(--split); width:2px; z-index:2; background:rgba(255,255,255,.95); }
.compare-handle::after{
  content:""; position:absolute; top:50%; left:50%; translate:-50% -50%; width:46px; height:46px; border-radius:50%;
  background:#fff; box-shadow:var(--shadow-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c1220' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6-5 6 5 6M15 6l5 6-5 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:20px;
}
.compare-range{ display:block; width:100%; margin-top:18px; accent-color:var(--blue); cursor:ew-resize; }

/* ---------- TikTok-promotie ---------- */
.section-tiktok{
  padding-block:clamp(40px,6vh,64px);
  background:linear-gradient(120deg, #0a1836 0%, #1b1030 55%, #3a0f38 100%);
}
.tiktok-band{
  display:flex; align-items:center; gap:clamp(18px,3vw,32px); flex-wrap:wrap;
}
.tiktok-ic{
  flex:none; width:56px; height:56px; border-radius:18px;
  background:rgba(255,255,255,.14);
}
.tiktok-ic svg{ width:28px; height:28px; }
.tiktok-copy{ flex:1 1 320px; min-width:0; }
.tiktok-copy h2{ color:#fff; font-size:clamp(1.3rem,2.4vw,1.7rem); margin-bottom:.3em; }
.tiktok-copy p{ color:rgba(255,255,255,.78); margin:0; max-width:56ch; }
.tiktok-copy p b{ color:#fff; }
.tiktok-btn{ flex:none; }

/* ---------- 6. Citaten ---------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); align-items:start; }
.quote{
  margin:0; background:#fff; border-radius:var(--r-media); padding:30px 28px;
  box-shadow:var(--shadow-2); position:relative;
}
.quote::before{
  content:""; position:absolute; top:-14px; left:26px; width:32px; height:28px; background:var(--mint);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cpath d='M0 28V14C0 6 5 1 13 0v6c-4 1-6 3-6 8h6v14Zm19 0V14C19 6 24 1 32 0v6c-4 1-6 3-6 8h6v14Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cpath d='M0 28V14C0 6 5 1 13 0v6c-4 1-6 3-6 8h6v14Zm19 0V14C19 6 24 1 32 0v6c-4 1-6 3-6 8h6v14Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
}
.quote-lift{ margin-top:clamp(0px,3vw,34px); }
.quote blockquote{ margin:0 0 1.1rem; font-size:1.04rem; line-height:1.5; letter-spacing:-.015em; }
.quote figcaption{ font-size:.88rem; color:var(--ink-3); }
.quote figcaption b{ display:block; color:var(--ink); font-size:.95rem; }

/* ---------- 7. Werkgebied met kaart ---------- */
.region{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(30px,5vw,72px); align-items:center; }
.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:1.4rem; }
.chips li{ padding:.5rem 1rem; border-radius:var(--r-pill); background:var(--soft); box-shadow:inset 0 0 0 1px var(--line); font-size:.92rem; font-weight:500; color:var(--ink-2); }
.map{ margin:0; }
.map svg{ width:100%; max-width:420px; margin-inline:auto; height:auto; overflow:visible; }
.map-dots circle{ fill:var(--blue); opacity:.55; }
.map-home circle{ fill:var(--mint); }
.map-pulse{ fill:var(--mint); opacity:.2; transform-origin:125px 144px; animation:pulse 3s var(--ease) infinite; }
@keyframes pulse{ 0%{ transform:scale(.5); opacity:.34 } 70%{ transform:scale(1.25); opacity:0 } 100%{ opacity:0 } }
.map-label{ font-family:var(--font-body); font-size:11px; font-weight:700; fill:var(--ink); }
.map figcaption{ margin-top:1rem; text-align:center; font-size:.88rem; color:var(--ink-3); }

/* ---------- Prijzen ---------- */
.prices{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px); }
.price{
  background:var(--surface); border-radius:var(--r-media); padding:24px 22px;
  box-shadow:inset 0 0 0 1px var(--line), var(--shadow-1);
  display:flex; flex-direction:column;
}
.price h3{ margin-bottom:.4em; }
.price p{ font-size:.94rem; margin-bottom:1rem; }
.price b{
  margin-top:auto; font-family:var(--font-display); font-size:1.06rem;
  letter-spacing:-.02em; color:var(--blue-deep);
}
.tile-price .excl{ display:block; font-weight:400; font-size:.84em; opacity:.72; }
.price-note{ display:block; margin-top:.3em; font-size:.82rem; color:var(--ink-3, var(--ink-2)); }
.prices-note{
  margin:clamp(20px,3vh,30px) 0 0; max-width:70ch; font-size:.98rem;
  padding:18px 20px; background:var(--blue-tint); border-radius:var(--r-media); color:var(--ink-2);
}

/* ---------- Rekenhulp ---------- */
.calc{
  margin-top:clamp(22px,3.5vh,36px);
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  background:var(--blue-tint); border-radius:var(--r-band); overflow:hidden;
  /* een ring om het geheel, anders valt de witte uitkomsthelft weg tegen de pagina */
  box-shadow:inset 0 0 0 1px #cbdcf7;
}
.calc-in{ padding:clamp(26px,3.4vw,44px); display:grid; gap:16px; align-content:start; }
.calc-in h3{ font-size:clamp(1.3rem,2.2vw,1.7rem); margin-bottom:0; }
.calc-intro{ margin:0; font-size:.98rem; }
.calc-in .field label{ font-size:.9rem; }
.calc-in select, .calc-in input[type="number"]{
  font:inherit; font-size:1rem; color:var(--ink); width:100%;
  padding:.8rem 1rem; border-radius:var(--r-field); border:1px solid #c3d2ea; background:#fff;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.calc-in select:focus, .calc-in input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(15,98,214,.14); }
.calc-in input[aria-invalid="true"]{ border-color:#c0392b; box-shadow:0 0 0 4px rgba(192,57,43,.12); }

.calc-extra{ border:0; padding:0; margin:0; display:grid; gap:9px; }
.calc-extra legend{ padding:0; margin-bottom:9px; font-size:.9rem; font-weight:600; color:var(--ink); }
.calc-extra[hidden]{ display:none; }
.check{
  display:flex; align-items:flex-start; gap:.7rem; cursor:pointer;
  padding:.72rem .9rem; border-radius:var(--r-field); background:rgba(255,255,255,.75);
  box-shadow:inset 0 0 0 1px rgba(12,18,32,.06); font-size:.95rem; color:var(--ink-2);
  transition:background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.check:hover{ background:#fff; }
.check input{ margin:.28rem 0 0; width:18px; height:18px; flex:none; accent-color:var(--blue); }
.check b{ color:var(--ink); font-weight:600; white-space:nowrap; }
.check:has(input:checked){ background:#fff; box-shadow:inset 0 0 0 1.5px var(--blue); }

.calc-out{
  padding:clamp(26px,3.4vw,44px); background:var(--surface);
  display:flex; flex-direction:column; gap:16px;
  box-shadow:inset 1px 0 0 rgba(12,18,32,.07);
}
.calc-label{ margin:0; font-size:.8rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
.calc-total{
  margin:.3rem 0 1rem; font-family:var(--font-display); line-height:1.02;
  font-size:clamp(2.1rem,3.6vw,2.9rem); letter-spacing:-.035em; color:var(--blue-deep);
  font-variant-numeric:tabular-nums;
}
.calc-total small{ display:block; margin-top:.5rem; font-family:var(--font-body); font-size:.86rem; font-weight:500; letter-spacing:0; color:var(--ink-3); }
.calc-total.op-maat{ font-size:clamp(1.5rem,2.6vw,2rem); }
.calc-rows{ display:grid; gap:.5rem; margin:0 0 1rem; font-size:.93rem; }
.calc-rows li{ display:flex; justify-content:space-between; gap:1rem; color:var(--ink-2); }
.calc-rows li b{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.calc-rows li.som{ margin-top:.2rem; padding-top:.6rem; border-top:1px solid var(--line); }
.calc-rows li.enkel{ display:block; color:var(--ink-3); font-size:.88rem; }
.calc-btw{ margin:0 0 auto; font-size:.93rem; color:var(--ink-2); }
.calc-btw b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.calc-note{ margin:0; font-size:.82rem; color:var(--ink-3); }

/* ---------- 8. Vragen ---------- */
.faq{ display:grid; gap:10px; }
.faq details{ background:#fff; border-radius:var(--r-media); padding:2px 22px; box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .3s var(--ease); }
.faq details[open]{ box-shadow:inset 0 0 0 1px #d3ddec, var(--shadow-2); }
.faq summary{ list-style:none; cursor:pointer; position:relative; padding:18px 40px 18px 0; font-weight:600; letter-spacing:-.015em; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:0; top:50%; translate:0 -50%; width:20px; height:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f62d6' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(135deg); }
.faq details p{ margin:0 0 18px; font-size:.98rem; }

/* ---------- 9. Offerte op een blauwe band ---------- */
.offer-band{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(152deg, var(--blue-deep) 0%, var(--blue) 45%, #2aa5cf 100%);
  padding-top:clamp(110px,15vh,190px);
}
.offer-band h2{ color:#fff; }
.offer-band .offer-copy p{ color:rgba(255,255,255,.86); }
.wave-offer{ top:-1px; height:clamp(50px,6vw,110px); }
.offer{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(30px,5vw,70px); align-items:start; position:relative; z-index:2; }
.ticks{ display:grid; gap:.55rem; margin:1.3rem 0 0; }
.ticks li{ display:flex; align-items:center; gap:.6rem; color:rgba(255,255,255,.92); font-size:.99rem; }
.ticks li::before{
  content:""; width:22px; height:22px; flex:none; border-radius:50%;
  background:rgba(255,255,255,.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 5.5 5.5L20 7'/%3E%3C/svg%3E") center/13px no-repeat;
}
.offer-call{ margin-top:1.7rem; font-size:.96rem; }
.offer-call a{ color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px; }

.form{ display:grid; gap:16px; align-content:start; background:#fff; border-radius:24px; padding:clamp(22px,3vw,34px); box-shadow:var(--shadow-3); }
.field{ display:grid; gap:6px; }
.field label{ font-size:.9rem; font-weight:600; color:var(--ink); }
.field-opt{ color:var(--ink-3); font-weight:400; }
.field input, .field select, .field textarea{
  font:inherit; font-size:1rem; color:var(--ink); width:100%; resize:vertical;
  padding:.8rem 1rem; border-radius:var(--r-field); border:1px solid #ccd5e4; background:#fff;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(15,98,214,.14); }
.field input[aria-invalid="true"]{ border-color:#c0392b; box-shadow:0 0 0 4px rgba(192,57,43,.12); }
.field-help{ margin:0; font-size:.84rem; color:var(--ink-3); }
.field-error{ margin:0; font-size:.84rem; font-weight:600; color:#b3271b; }
.form-status{ margin:0; font-size:.88rem; color:var(--ink-3); }
/* Valstrik voor spambots. Niet display:none: sommige bots slaan verborgen
   velden over. Wel volledig weg voor het oog en voor de schermlezer. */
.valstrik{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status.ok{ color:#0a7a55; font-weight:600; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ background:var(--navy); color:rgba(255,255,255,.72); padding:clamp(54px,7vh,88px) 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:clamp(26px,4vw,52px); }
.footer-logo{ height:56px; width:auto; }
.footer-about{ margin-top:1rem; font-size:.95rem; max-width:36ch; color:rgba(255,255,255,.66); }
.footer-grid h3{ font-family:var(--font-body); font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:rgba(255,255,255,.66); margin-bottom:.9rem; }
.footer-grid li{ margin-bottom:.5rem; font-size:.95rem; }
.footer-grid a:hover{ color:#fff; }
.footer-legal{ margin-top:clamp(34px,5vh,56px); padding-top:22px; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-wrap:wrap; gap:6px 26px; }
.footer-legal p{ margin:0; font-size:.85rem; color:rgba(255,255,255,.66); }

/* =========================================================
   404
   ========================================================= */
.oops{ min-height:70vh; display:grid; align-items:center; padding:calc(var(--header-h) + 14vh) 0 clamp(60px,10vh,110px); }
.oops-code{
  margin:0 0 .4rem; font-family:var(--font-display); font-weight:700;
  font-size:clamp(3rem,7vw,4.6rem); line-height:1; letter-spacing:-.04em; color:var(--blue-tint);
}
.oops h1{ font-size:clamp(2rem,4.4vw,3.2rem); }
.oops .hero-actions{ margin-top:1.6rem; }
.oops-links{ margin-top:clamp(40px,6vh,64px); padding-top:26px; border-top:1px solid var(--line); }
.oops-links h2{ font-family:var(--font-body); font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); }
.oops-links ul{ display:flex; flex-wrap:wrap; gap:9px; }
.oops-links a{
  display:block; padding:.5rem 1rem; border-radius:var(--r-pill); background:var(--soft);
  box-shadow:inset 0 0 0 1px var(--line); font-size:.94rem; font-weight:500; color:var(--ink-2);
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.oops-links a:hover{ background:#fff; color:var(--ink); }

/* =========================================================
   Mobiele actiebalk
   ========================================================= */
.mobile-bar{
  display:none; position:fixed; z-index:95; left:0; right:0; bottom:0; gap:10px;
  padding:10px clamp(12px,4vw,18px) calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 -1px 0 rgba(12,18,32,.07); transform:translateY(115%); transition:transform .35s var(--ease);
}
.mobile-bar.show{ transform:none; }
.mobile-bar .btn{ flex:1; min-height:50px; font-size:1rem; }
.mobile-bar .btn-quiet{ flex:0 1 42%; }

/* =========================================================
   Reveal
   ========================================================= */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .5s var(--ease) var(--d,0ms), transform .5s var(--ease) var(--d,0ms); }

/* =========================================================
   Responsief
   ========================================================= */
@media (max-width: 1080px){
  .bento{ grid-template-columns:repeat(2,1fr); }
  .tile-lg{ grid-column:span 2; grid-row:span 1; }
  .tile-blue{ grid-row:span 1; }
  .steps{ grid-template-columns:repeat(2,1fr); row-gap:30px; }
  .route{ display:none; }
  .prices{ grid-template-columns:1fr 1fr; }
  .calc{ grid-template-columns:1fr; }
  .calc-out{ box-shadow:inset 0 1px 0 rgba(12,18,32,.07); }
  .quotes{ grid-template-columns:1fr 1fr; }
  .quotes .quote:last-child{ grid-column:span 2; }
  .quote-lift{ margin-top:0; }
  .region, .offer{ grid-template-columns:1fr; }
  .map svg{ max-width:340px; }
}

/* Vanaf hier passen de menu-items niet meer naast de knoppen. Zonder deze stap
   brak de balk in drie rijen en werd de header ineens heel hoog. */
@media (min-width: 901px) and (max-width: 1100px){
  /* de offerteknop staat al in de balk, dus niet nog een keer in het menu */
  .mobile-nav .btn{ display:none; }
}

@media (max-width: 1100px){
  .nav{ display:none; }
  .link-phone{ display:none; }
  .menu-toggle{ display:grid; flex:none; }
  .bar-actions{ margin-left:auto; }
  .mobile-nav{
    position:fixed; left:0; right:0; top:calc(var(--header-h) + env(safe-area-inset-top) + 14px);
    width:auto; margin:0 clamp(12px,4vw,20px); max-height:calc(100dvh - var(--header-h) - 46px); overflow-y:auto;
  }
}

@media (max-width: 900px){
  :root{ --header-h:68px; --r-band:32px; }
  .tiktok-band{ flex-direction:column; align-items:flex-start; text-align:left; }
  .tiktok-btn{ width:100%; text-align:center; }
  /* zonder de knoppen ernaast heeft niets in de balk nog een auto-marge, dus
     duwt de menuknop zichzelf naar rechts */
  .bar-actions{ display:none; }
  .menu-toggle{ margin-left:auto; }
  .mobile-bar{ display:flex; }
  .site-footer{ padding-bottom:calc(100px + env(safe-area-inset-bottom)); }
  .hero-copy h1{ max-width:14ch; }
  .hero-sub{ max-width:40ch; }
  .stats-row{ grid-template-columns:1fr 1fr; row-gap:26px; }
  .stat:nth-child(odd){ border-left:0; padding-left:0; }
  .stat:nth-child(3){ border-left:0; }
  .result-head{ flex-direction:column; align-items:flex-start; }
  .compare-visual{ aspect-ratio:4/3; touch-action:none; }
  .compare-handle::after{ width:54px; height:54px; }
  .compare-range{ height:36px; }
  .faq summary{ padding-block:20px; }
  .field input, .field select, .field textarea,
  .calc-in select, .calc-in input[type="number"]{ font-size:16px; min-height:50px; }
  .check{ padding:.85rem 1rem; }
  .field textarea{ min-height:112px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid > div:first-child{ grid-column:span 2; }
}

/* Op aanraakapparaten geen scrollreeks maar een gewone sectie met de schone
   oprit: springen in de tijd is daar traag. Dat hangt af van het APPARAAT, niet
   van de vensterbreedte, anders verliest een smal bureaubladvenster of een
   voorbeeldpaneel de scrollanimatie terwijl muis en processor er prima voor
   zijn. De klas zet main.js, de media-query vangt het geval zonder JavaScript. */
.stil-hero .hero{ height:auto; }
.stil-hero .hero-stage{ position:static; height:auto; min-height:94svh; }
.stil-hero .hero-copy > *{ transform:none; opacity:1; }
/* tekst bovenin, de schone bestrating blijft onderin vrij in beeld */
.stil-hero .hero-copy{
  justify-content:flex-start;
  padding-top:calc(var(--header-h) + 5vh);
  padding-bottom:clamp(40px,10vh,80px);
}
.stil-hero .hero-poster{ object-position:50% 60%; }
/* verticale sluier: hoort bij de stilstaande foto, niet bij de lopende video */
.stil-hero .hero-scrim{
  background:
    linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 30%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.1) 68%, rgba(255,255,255,0) 82%),
    linear-gradient(0deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 14%);
}

@media (pointer: coarse){
  .hero{ height:auto; }
  .hero-stage{ position:static; height:auto; min-height:94svh; }
  .hero-copy > *{ transform:none; opacity:1; }
  .hero-copy{
    justify-content:flex-start;
    padding-top:calc(var(--header-h) + 5vh);
    padding-bottom:clamp(40px,10vh,80px);
  }
  .hero-poster{ object-position:50% 60%; }
  .hero-scrim{
    background:
      linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 30%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.1) 68%, rgba(255,255,255,0) 82%),
      linear-gradient(0deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 14%);
  }
}

@media (max-width: 640px){
  body{ font-size:16px; }
  .brand-logo{ height:38px; }
  .section{ padding:clamp(58px,9vh,90px) 0; }
  .band{ padding-block:clamp(58px,10vh,96px); }
  .bento{ grid-template-columns:1fr; }
  .tile-lg, .tile-wide{ grid-column:span 1; }
  .steps{ grid-template-columns:1fr; row-gap:24px; }
  .prices{ grid-template-columns:1fr; }
  .calc{ border-radius:var(--r-media); }
  .quotes{ grid-template-columns:1fr; }
  .quotes .quote:last-child{ grid-column:span 1; }
  .hero-actions{ width:100%; }
  .hero-actions .btn{ flex:1 1 100%; }
  .drop-a{ width:80px; height:80px; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-grid > div:first-child{ grid-column:span 1; }
}

@media (hover: none){
  .bar, .mobile-bar{ -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
  .tile:hover{ transform:none; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  .hero{ height:auto; }
  .hero-stage{ position:static; height:auto; min-height:82vh; }
  .hero-copy > *{ transform:none; opacity:1; }
  .route-line{ stroke-dashoffset:0; }
}

@media (prefers-reduced-transparency: reduce){
  .bar, .mobile-nav, .mobile-bar, .btn-glass{ background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; }
}