@font-face{font-family:"Gobold";src:url("/ralfdroneartist/font/gobold-bold.otf") format("opentype");font-weight:400 700;font-display:swap}
:root{
  --oranje:#F2842F;--oranje-d:#E0741F;--oranje-t:#C4621A;--oranje-l:#FDF0E6;
  --paars:#30497D;--paars-d:#253C6D;--paars-l:#EDF1F8;--blauw-3:#455B8A;
  --ink:#16223E;--nacht:#253C6D;--tekst:#243049;--grijs:#5A6479;--grijs-2:#8790A3;
  --lijn:#E2E6EE;--grond:#F3F5F9;--wit:#fff;
  --r:16px;--wrap:1240px;--hdr:76px;
  --f:"Montserrat",system-ui,sans-serif;--g:"Gobold","Montserrat",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f);color:var(--tekst);background:#fff;font-size:16px;line-height:1.65;padding-top:var(--hdr);overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--f);color:var(--ink);margin:0;letter-spacing:-.02em}
p{margin:0}
button{font:inherit;cursor:pointer}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
section[id]{scroll-margin-top:calc(var(--hdr) + 10px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- basis-onderdelen ---------- */
.kicker{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--paars);margin-bottom:14px}
.kicker::before{content:"";width:26px;height:1.5px;background:var(--oranje)}
.h2{font-size:clamp(28px,3vw,42px);font-weight:700;line-height:1.14}
.h2 em{font-style:normal;color:var(--paars)}
.lede{font-size:17px;color:var(--grijs);line-height:1.7;max-width:56ch}
.ilink{text-decoration:none;background:linear-gradient(var(--oranje),var(--oranje)) 0 100%/100% 1.5px no-repeat;padding-bottom:1px;transition:background-size .2s}
.ilink:hover{background-size:100% 3px}

.btn{white-space:nowrap;--b:var(--oranje);--t:var(--ink);position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:12px;background:var(--b);color:var(--t);font-weight:600;font-size:16px;text-decoration:none;padding:15px 26px;border-radius:10px;border:0;isolation:isolate;transition:color .3s}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateX(-101%);transition:transform .4s cubic-bezier(.7,0,.2,1);z-index:-1}
.btn:hover{color:#fff}
.btn:hover::before{transform:none}
.btn svg{width:17px;height:17px;transition:transform .3s}
.btn:hover svg{transform:translateX(4px)}
.btn--wit{--b:#fff;--t:var(--ink)}
.btn--wit::before{background:var(--oranje-l)}
.btn--wit:hover{color:var(--ink)}
.tlink{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-size:15px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.tlink svg{width:17px;height:17px;transition:transform .3s}
.tlink:hover svg{transform:translateX(5px)}
.acts{display:flex;align-items:center;flex-wrap:wrap;gap:18px 30px}

/* kader-motief: dunne oranje lijn die links-onder uitsteekt */
.frame{position:relative;isolation:isolate}
.frame::before{content:"";position:absolute;inset:14px 14px -14px -14px;border:1.5px solid var(--oranje);border-radius:var(--r);z-index:-1;pointer-events:none}

/* ---------- header ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--lijn);transform:translateZ(0)}
.hdr-in{max-width:1440px;margin:0 auto;padding:0 40px;height:var(--hdr);display:flex;align-items:center;gap:28px;transition:height .3s}
.hdr.klein .hdr-in{height:66px}
.merk{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.merk img{width:44px;height:34px;transition:width .3s,height .3s}
.hdr.klein .merk img{width:39px;height:30px}
.merk b{font-weight:700;font-size:17px;color:var(--ink);letter-spacing:-.01em}
.merk b span{color:var(--paars)}
.nav{display:flex;gap:4px;margin:0 auto;position:relative;height:100%;align-items:center}
.nav>div{height:100%;display:flex;align-items:center}
.nav-a{display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;font-size:15px;font-weight:500;color:#46506A;text-decoration:none;background:none;border:0;transition:color .2s}
.nav-a:hover,.nav>div.open .nav-a{color:var(--ink)}
.nav-a svg{width:12px;height:12px;transition:transform .25s}
.nav>div.open .nav-a svg{transform:rotate(180deg)}
.nav-ind{position:absolute;bottom:-1px;height:3px;background:var(--oranje);border-radius:3px 3px 0 0;left:0;width:0;opacity:0;transition:left .35s cubic-bezier(.3,.7,.2,1),width .35s cubic-bezier(.3,.7,.2,1),opacity .2s;pointer-events:none}
.hdr-r{display:flex;align-items:center;gap:22px;flex:none}
.tel{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:15px;color:var(--ink)}
.tel i{width:34px;height:34px;border-radius:50%;border:1px solid var(--lijn);display:grid;place-items:center;color:var(--paars)}
.tel i svg{width:15px;height:15px}
.hdr-cta{padding:11px 12px 11px 20px;border-radius:999px;font-size:15px;gap:14px}
.hdr-cta i{width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--oranje);display:grid;place-items:center}
.hdr-cta i svg{width:14px;height:14px}
.hdr-cta:hover i{background:var(--oranje);color:var(--ink)}
.hdr-cta:hover svg{transform:none}
.voortgang{position:absolute;left:0;bottom:-1px;height:2px;background:var(--oranje);width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* mega-menu */
.mega{position:fixed;top:100%;left:0;right:0;background:#fff;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .38s cubic-bezier(.6,0,.2,1),visibility 0s .38s}
.nav>div.open .mega{clip-path:inset(-26px 0 0 0);visibility:visible;transition:clip-path .45s cubic-bezier(.3,.7,.2,1),visibility 0s}
.mega-in{max-width:1440px;margin:0 auto;padding:34px 40px 38px;display:grid;grid-template-columns:320px 1fr 300px;gap:48px}
.mega-feat{text-decoration:none}
.mega-feat .frame::before{inset:12px 12px -12px -12px;border-radius:14px}
.mega-feat img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px}
.mega-feat b{display:block;margin-top:24px;font-size:17px;color:var(--ink);line-height:1.35}
.mega-feat span{display:inline-block;margin-top:8px;font-size:14px;font-weight:600;color:var(--oranje-t)}
.mega-kop{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grijs-2);margin-bottom:10px}
.mega-links{display:grid;grid-template-columns:1fr 1fr;column-gap:36px}
.mega-links a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--lijn);text-decoration:none;font-size:15px;font-weight:600;color:var(--ink);transition:padding .25s}
.mega-links a small{display:block;font-weight:400;font-size:13px;color:var(--grijs)}
.mega-links a i{flex:none;width:26px;height:26px;border-radius:50%;background:var(--oranje-l);color:var(--oranje-t);display:grid;place-items:center;transition:background .2s,color .2s,transform .25s}
.mega-links a i svg{width:12px;height:12px}
.mega-links a:hover{padding-left:5px}
.mega-links a:hover i{background:var(--oranje);color:var(--ink);transform:rotate(-45deg)}
.mega-card{background:var(--grond);border-radius:14px;padding:24px}
.mega-card .big{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;color:var(--ink);text-decoration:none;margin:10px 0 12px}
.mega-card .big i{width:36px;height:36px;border-radius:50%;background:#fff;color:var(--paars);display:grid;place-items:center}
.mega-card .big i svg{width:15px;height:15px}
.mega-card p{font-size:14px;color:var(--grijs);line-height:1.6}
.mega-card a.wa{display:inline-block;margin-top:10px;font-size:14px;font-weight:600;color:var(--paars);text-decoration:none}
.scrim{position:fixed;inset:0;background:rgba(22,34,62,.3);z-index:40;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.scrim.aan{opacity:1;visibility:visible;transition:opacity .3s}

.burger{display:none}
.mnav{display:none}

/* ---------- hero ---------- */
.hero{padding:34px 0 64px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.h1{font-size:clamp(40px,5.1vw,76px);font-weight:800;line-height:1.02;letter-spacing:-.035em;margin:0 0 30px}
.h1 .r{display:block;white-space:nowrap;overflow:hidden;padding-bottom:.06em}
.h1 .r>span{display:inline-block}
.h1 .acc{position:relative;display:inline-block;color:var(--paars)}
.h1 .acc::after{content:"";position:absolute;left:0;right:-.04em;bottom:.02em;height:.2em;background:var(--oranje);z-index:-1;transform-origin:0 50%}
.hero .lede{font-size:18px;margin-bottom:36px;max-width:50ch}
.hero-media{position:relative;padding:0 0 0 16px}
.deck{position:relative;aspect-ratio:4/3.2}
.deck::after{content:"";position:absolute;inset:18px 18px -18px -18px;border:1.5px solid var(--oranje);border-radius:18px;z-index:0;pointer-events:none}
.deck video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:16px;opacity:0;transition:opacity 1s ease;z-index:1;background:var(--nacht)}
.deck video.aan{opacity:1;z-index:2}
.badge{position:absolute;top:-24px;right:-18px;z-index:5;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:12px 18px 12px 12px}
.badge i{width:38px;height:38px;border-radius:10px;background:var(--oranje-l);display:grid;place-items:center;color:var(--oranje-t)}
.badge i svg{width:19px;height:19px}
.badge b{display:block;font-size:15px;color:var(--ink);line-height:1.25}
.badge small{font-size:13px;color:var(--grijs)}
.deck-cap{display:flex;justify-content:space-between;align-items:center;margin-top:36px;padding-right:0;font-size:13px;color:var(--grijs)}
.deck-cap b{color:var(--ink);font-weight:600}
.dots{display:flex;gap:8px}
.dots button{width:30px;height:3px;border:0;padding:0;border-radius:3px;background:var(--lijn);position:relative;overflow:hidden}
.dots button span{position:absolute;inset:0;background:var(--oranje);transform-origin:0 50%;transform:scaleX(0)}
.dots button.klaar span{transform:none}

/* ---------- cijferbalk ---------- */
.stats{background:var(--nacht);color:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:34px 20px 32px;text-align:center;border-left:1px solid rgba(255,255,255,.1)}
.stat:first-child{border-left:0}
.stat b{display:block;font-family:var(--g);font-weight:400;font-size:clamp(40px,4vw,58px);line-height:1.1;color:var(--oranje);letter-spacing:.01em}
.stat span{display:block;margin-top:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82)}

/* ---------- klantenstrook ---------- */
.klanten{border-bottom:1px solid var(--lijn)}
.klanten .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:22px;padding-bottom:22px}
.klanten p{font-size:14px;color:var(--grijs);flex:none}
.klanten p b{color:var(--ink)}
.klanten img{height:40px;width:auto;filter:grayscale(1) contrast(1.1);opacity:.78;transition:opacity .2s,filter .2s}
.klanten img:hover{filter:none;opacity:1}
.klanten .txt{font-size:15px;font-weight:700;color:#4E5972;letter-spacing:.02em;line-height:1.1;text-align:center}
.klanten .txt small{display:block;font-size:10px;letter-spacing:.2em;font-weight:600;color:var(--grijs-2)}

/* ---------- over ---------- */
.over{padding:110px 0}
.over-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.over-media{position:relative;padding-bottom:40px;padding-right:40px}
.over-media .groot{border-radius:var(--r);width:100%;aspect-ratio:4/3;object-fit:cover}
.over-media .klein{position:absolute;right:0;bottom:0;width:42%;aspect-ratio:4/5;object-fit:cover;border-radius:12px;border:6px solid #fff}
.over .lede{margin:22px 0 26px}
.feiten{display:grid;grid-template-columns:1fr 1fr;gap:18px 30px;margin-bottom:34px}
.feiten div{padding-left:14px;border-left:2px solid var(--oranje)}
.feiten b{display:block;font-size:15px;color:var(--ink)}
.feiten span{font-size:14px;color:var(--grijs)}

/* ---------- kies je opname ---------- */
.pick{background:var(--grond);padding:100px 0 110px;overflow:hidden}
.pick-top{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:40px}
.pick-title{font-size:clamp(40px,5vw,66px);font-weight:800;line-height:1.05;letter-spacing:-.035em}
.pick-title em{font-style:normal;color:var(--paars)}
.pick-top .lede{margin-top:14px;font-size:16.5px}
.pijlen{display:flex;gap:10px;flex:none}
.pijlen button{width:52px;height:52px;border-radius:10px;border:1px solid #D3D9E3;background:#fff;display:grid;place-items:center;color:var(--ink);transition:background .2s,border-color .2s}
.pijlen button:hover{background:var(--oranje);border-color:var(--oranje)}
.pijlen svg{width:19px;height:19px}
.track{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 40px 18px calc((100vw - var(--wrap))/2 + 40px);scroll-padding-left:calc((100vw - var(--wrap))/2 + 40px)}
.track::-webkit-scrollbar{display:none}
.kaart{flex:0 0 320px;scroll-snap-align:start;padding:0 0 0 12px;position:relative}
.kaart::before{content:"";position:absolute;left:0;right:12px;top:12px;bottom:-12px;border:1.5px solid var(--oranje);border-radius:var(--r);opacity:.9}
.kaart a{position:relative;display:block;aspect-ratio:320/437;border-radius:var(--r);overflow:hidden;text-decoration:none;background:var(--nacht)}
.kaart img,.kaart video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.kaart a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,26,50,0) 45%,rgba(16,26,50,.82))}
.kaart a:hover img,.kaart a:hover video{transform:scale(1.05)}
.kaart-t{position:absolute;left:22px;right:22px;bottom:22px;z-index:2;color:#fff}
.kaart-t b{display:block;font-size:26px;font-weight:700;line-height:1.1;letter-spacing:-.02em}
.kaart-t span{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--oranje)}
.kaart-t svg{width:14px;height:14px;transition:transform .3s}
.kaart a:hover .kaart-t svg{transform:translateX(4px)}

/* ---------- tijdlijn ---------- */
.tl{padding:110px 0}
.tl-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start}
.tl-kop{position:sticky;top:calc(var(--hdr) + 40px)}
.tl-kop .lede{margin:20px 0 22px}
.vinkjes{list-style:none;padding:0;margin:0 0 32px;display:grid;gap:10px}
.vinkjes li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:var(--ink)}
.vinkjes i{width:20px;height:20px;border-radius:50%;background:var(--oranje);display:grid;place-items:center;flex:none}
.vinkjes svg{width:11px;height:11px;color:var(--ink)}
.tl-kop .acts{flex-direction:column;align-items:flex-start;gap:22px}
.tl-lijst{list-style:none;margin:0;padding:0;position:relative}
.tl-lijst::before,.tl-vul{content:"";position:absolute;left:29px;top:30px;bottom:30px;width:2px;background:var(--lijn)}
.tl-vul{background:var(--oranje);bottom:auto;height:var(--vul,0px);transition:height .15s linear}
.stap{display:grid;grid-template-columns:60px 190px 1fr;gap:20px;padding:0 0 28px;margin-bottom:28px;border-bottom:1px solid var(--lijn);position:relative}
.stap:last-child{border-bottom:0;margin-bottom:0}
.stap .nr{width:60px;height:60px;border-radius:50%;background:#fff;border:1px solid var(--lijn);display:grid;place-items:center;font-weight:700;font-size:17px;color:var(--ink);position:relative;z-index:1;transition:background .3s,border-color .3s}
.stap.langs .nr{background:var(--oranje);border-color:var(--oranje)}
.stap img{width:190px;height:168px!important;object-fit:cover;border-radius:14px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--nacht);color:#fff;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:999px;margin-bottom:10px}
.chip svg{width:12px;height:12px;color:var(--oranje)}
.stap h3{font-size:21px;font-weight:700;margin-bottom:8px}
.stap p{font-size:15px;color:var(--grijs);line-height:1.65}

/* ---------- projecten ---------- */
.proj{padding:100px 0 30px}
.proj-top{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:40px}
.proj-top .lede{margin-top:18px}
.proj-grid{display:grid;grid-template-columns:1.45fr 1fr;grid-template-rows:1fr 1fr;gap:20px;min-height:560px}
.pk{position:relative;border-radius:var(--r);overflow:hidden;text-decoration:none;color:#fff;background:var(--nacht);min-height:270px}
.pk:first-child{grid-row:span 2}
.pk img,.pk video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pk video{opacity:0;transition:opacity .5s,transform .8s cubic-bezier(.2,.7,.2,1)}
.pk.speelt video{opacity:1}
.pk::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,26,50,.18),rgba(16,26,50,0) 30%,rgba(16,26,50,.1) 50%,rgba(16,26,50,.82))}
.pk:hover img,.pk:hover video{transform:scale(1.05)}
.pk-chips{position:absolute;top:18px;left:18px;z-index:2;display:flex;gap:6px}
.pk-chips span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;border-radius:999px;background:#fff;color:var(--ink)}
.pk-chips span:first-child{background:var(--oranje)}
.pk-t{position:absolute;left:26px;right:90px;bottom:24px;z-index:2}
.pk-t small{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;opacity:.92}
.pk-t small svg{width:13px;height:13px;color:var(--oranje)}
.pk-t b{display:block;font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:4px 0 4px}
.pk:first-child .pk-t b{font-size:clamp(34px,3.4vw,46px)}
.pk-t span{font-size:15px;opacity:.92}
.pk-pijl{position:absolute;right:22px;bottom:22px;z-index:2;width:48px;height:48px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;transition:background .25s}
.pk-pijl svg{width:18px;height:18px}
.pk:hover .pk-pijl{background:var(--oranje)}
.balk{margin-top:22px;background:var(--oranje);border-radius:20px;padding:34px 36px;display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center}
.balk-cijfers{display:flex}
.balk-cijfers div{padding:0 32px;border-left:1px solid rgba(22,34,62,.16)}
.balk-cijfers div:first-child{padding-left:0;border:0}
.balk-cijfers b{display:block;font-family:var(--g);font-weight:400;font-size:clamp(34px,3vw,46px);line-height:1.1;color:var(--ink)}
.balk-cijfers span{display:block;margin-top:4px;font-size:13px;line-height:1.4;font-weight:600;color:rgba(22,34,62,.72)}
.balk-r{display:flex;align-items:center;justify-content:flex-end;gap:28px}
.balk-r h3{font-size:22px;font-weight:700;line-height:1.25}
.balk-r .btn{flex:none}
.balk-r p{font-size:14.5px;color:rgba(22,34,62,.75);margin-top:4px}

/* ---------- prijzen ---------- */
.prijs{padding:clamp(56px,6vw,90px) 0}
.prijs .h2{margin-bottom:34px}
.prijs-grid{display:grid;grid-template-columns:1fr 520px;gap:56px;align-items:start}
.pr{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;border-bottom:1px solid var(--lijn);text-decoration:none}
.pr:first-child{padding-top:0}
.pr b{display:block;font-size:19px;color:var(--ink)}
.pr b em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--paars-l);color:var(--paars);padding:3px 8px;border-radius:999px;margin-left:8px;vertical-align:3px}
.pr span{font-size:14.5px;color:var(--grijs)}
.pr .bedrag{flex:none;display:flex;align-items:baseline;gap:8px;font-size:14px;color:var(--grijs)}
.pr .bedrag strong{font-family:var(--g);font-weight:400;font-size:40px;color:var(--ink);letter-spacing:.01em;line-height:1;transition:color .2s}
.pr:hover .bedrag strong{color:var(--paars)}
.prijs-noot{margin-top:22px;font-size:13.5px;color:var(--grijs-2)}
.calc{background:var(--oranje);border-radius:20px;padding:30px 30px 32px;color:var(--ink)}
.calc h3{font-size:20px;font-weight:700;margin-bottom:22px}
.calc-rij{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:12px;margin-bottom:12px}
.calc-rij>span{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(22,34,62,.7)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{border:1.5px solid rgba(22,34,62,.2);background:transparent;border-radius:10px;padding:8px 15px;font-size:14.5px;font-weight:500;color:var(--ink);transition:background .2s,border-color .2s}
.chips button:hover{border-color:rgba(22,34,62,.45)}
.chips button.aan{background:#fff;border-color:#fff;font-weight:600}
.schakel{display:flex;align-items:center;gap:12px;margin:18px 0 22px;background:none;border:0;padding:0;font-size:15px;font-weight:600;color:var(--ink)}
.schakel i{width:44px;height:26px;border-radius:999px;background:rgba(255,255,255,.45);position:relative;transition:background .2s}
.schakel i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .25s}
.schakel[aria-pressed="true"] i{background:#fff}
.schakel[aria-pressed="true"] i::after{transform:translateX(18px);background:var(--paars)}
.calc-uit{border-top:1px solid rgba(22,34,62,.16);padding-top:20px}
.calc-uit small{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(22,34,62,.7)}
.calc-uit strong{display:block;font-family:var(--g);font-weight:400;font-size:52px;line-height:1.1;margin:4px 0 2px;letter-spacing:.01em}
.calc-uit strong span{font-family:var(--f);font-weight:700;font-size:22px;letter-spacing:-.01em;margin-left:10px}
.calc-uit p{font-size:14px;color:rgba(22,34,62,.8);margin-bottom:22px}
.veer{animation:veer .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes veer{from{transform:scale(.94);opacity:.4}}

/* ---------- faq ---------- */
.faq{padding:100px 0}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start}
.faq .lede{margin-top:20px}
.faq details{border:1px solid var(--lijn);border-radius:14px;margin-bottom:10px;transition:border-color .2s}
.faq details[open]{border-color:var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:21px 22px;font-weight:600;font-size:16px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:28px;height:28px;border-radius:50%;background:var(--oranje);display:grid;place-items:center;position:relative}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;width:11px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details p{padding:0 22px 22px;color:var(--grijs);font-size:15px;line-height:1.7}

/* ---------- meer lezen ---------- */
.meer{background:var(--grond);padding:90px 0}
.meer .h2{margin-bottom:34px}
.meer-paneel{background:#fff;border-radius:22px;padding:30px 32px;display:grid;grid-template-columns:repeat(3,1fr)}
.meer-kol{padding:0 32px;border-left:1px solid var(--lijn)}
.meer-kol:first-child{padding-left:0;border:0}
.meer-kol:last-child{padding-right:0}
.meer-kop{display:flex;align-items:center;gap:14px;padding-bottom:20px;border-bottom:1px solid var(--lijn)}
.meer-kop img{width:52px;height:52px;border-radius:10px;object-fit:cover}
.meer-kop b{display:block;font-size:18px;color:var(--ink);line-height:1.2}
.meer-kop span{font-size:13.5px;color:var(--grijs)}
.meer-kol a{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--lijn);font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none;transition:padding .25s}
.meer-kol a:last-child{border-bottom:0}
.meer-kol a i{width:22px;height:22px;border-radius:50%;background:var(--grond);display:grid;place-items:center;color:var(--oranje-t);transition:background .2s,color .2s}
.meer-kol a i svg{width:11px;height:11px}
.meer-kol a:hover{padding-left:4px}
.meer-kol a:hover i{background:var(--oranje);color:var(--ink)}

/* ---------- formulier ---------- */
.aanvraag{padding:clamp(56px,6vw,84px) 0}
.aanvraag-grid{display:grid;grid-template-columns:1fr 520px;gap:56px;align-items:start}
.aanvraag .lede{margin:14px 0 30px;font-size:16px}
.velden{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}
.veld{display:flex;flex-direction:column;gap:7px}
.veld.vol{grid-column:1/-1}
.veld label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#46506A}
.veld label em{font-style:normal;color:var(--oranje-t)}
.veld label small{font-weight:500;letter-spacing:.06em}
.veld input,.veld select,.veld textarea{font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1px solid #D5DBE5;border-radius:10px;padding:12px 14px;width:100%;transition:border-color .2s,outline-color .2s;outline:3px solid transparent}
.veld textarea{min-height:96px;resize:vertical}
.veld input:focus,.veld select:focus,.veld textarea:focus{border-color:var(--paars);outline-color:rgba(48,73,125,.18)}
.verstuur{grid-column:1/-1;justify-content:center;width:100%;margin-top:6px;border-radius:999px;font-size:16px;padding:16px}
.gerust{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--grijs)}
.gerust span{display:flex;align-items:center;gap:6px}
.gerust svg{width:14px;height:14px;color:var(--paars)}
.bedankt{display:none;grid-column:1/-1;background:var(--paars-l);border-radius:14px;padding:22px;font-weight:600;color:var(--ink)}
form.klaar .bedankt{display:block}
.direct{background:var(--nacht);color:#fff;border-radius:20px;padding:32px 30px}
.direct h3{color:#fff;font-size:20px;font-weight:700;margin-bottom:16px}
.direct a{color:#fff;text-decoration:none;display:flex;align-items:center;gap:12px;font-weight:600}
.direct a svg{width:18px;height:18px;color:var(--oranje);flex:none}
.direct .groot{font-family:var(--g);font-weight:400;font-size:34px;letter-spacing:.02em;margin-bottom:12px}
.direct .groot svg{width:22px;height:22px}
.direct .klein{font-size:15.5px;margin-bottom:10px}
.direct .info{font-size:14px;color:rgba(255,255,255,.62);margin-top:14px;line-height:1.6}
.direct hr{border:0;border-top:1px solid rgba(255,255,255,.12);margin:22px 0}
.sterren{display:flex;align-items:center;gap:4px;color:var(--oranje);font-size:13px;font-weight:600}
.sterren svg{width:14px;height:14px}
.sterren span{color:rgba(255,255,255,.7);margin-left:8px}
.direct blockquote{margin:12px 0 8px;font-size:15.5px;line-height:1.6;font-weight:500}
.direct cite{font-style:normal;font-size:13.5px;color:rgba(255,255,255,.6)}

/* ---------- footer ---------- */
.voet{background:var(--nacht);color:rgba(255,255,255,.78);padding:80px 0 30px;font-size:15px}
.voet-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr;gap:40px}
.voet .merk b{color:#fff;font-weight:600}
.voet .merk b span{color:var(--oranje)}
.voet .merk img{background:#fff;border-radius:10px;padding:7px 5px;width:48px;height:44px}
.voet-over p{margin:18px 0 22px;line-height:1.7}
.soc{display:flex;gap:10px}
.soc a{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;color:#fff;transition:background .2s,color .2s,border-color .2s}
.soc a:hover{background:var(--oranje);border-color:var(--oranje);color:var(--ink)}
.soc svg{width:17px;height:17px}
.voet h3{color:#fff;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:8px 0 18px}
.voet ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.voet ul a{text-decoration:none;transition:color .2s}
.voet ul a:hover{color:var(--oranje)}
.voet-onder{margin-top:60px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px;color:rgba(255,255,255,.55)}
.voet-onder a{color:inherit}

/* whatsapp + mobiele balk */
.wa-pill{position:fixed;right:26px;bottom:26px;z-index:30;display:flex;align-items:center;gap:12px;background:var(--oranje);color:var(--ink);text-decoration:none;border-radius:999px;padding:8px 22px 8px 8px;transition:background .2s,color .2s,transform .3s}
.wa-pill i{width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--oranje);display:grid;place-items:center;transition:background .2s,color .2s}
.wa-pill i svg{width:20px;height:20px}
.wa-pill small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.7;line-height:1.2}
.wa-pill b{font-size:15.5px;line-height:1.2}
.wa-pill:hover{background:var(--ink);color:#fff}
.wa-pill:hover i{background:var(--oranje);color:var(--ink)}
.mbalk{display:none}

/* ---------- animatie ---------- */
html.anim .rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
html.anim .rv.in{opacity:1;transform:none}
html.anim .rv.d1{transition-delay:.08s}html.anim .rv.d2{transition-delay:.16s}html.anim .rv.d3{transition-delay:.24s}
html.anim .hdr{animation:hdrIn .8s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes hdrIn{from{transform:translateY(-100%)}}
html.anim .hero .kicker{animation:op .7s .25s both}
html.anim .h1 .r>span{animation:regel 1s cubic-bezier(.2,.75,.2,1) both}
html.anim .h1 .r:nth-child(1)>span{animation-delay:.3s}
html.anim .h1 .r:nth-child(2)>span{animation-delay:.39s}
html.anim .h1 .r:nth-child(3)>span{animation-delay:.48s}
html.anim .h1 .acc::after{animation:streep .7s 1.05s cubic-bezier(.6,0,.2,1) both}
html.anim .hero .lede{animation:scherp .9s .7s both}
html.anim .hero .acts{animation:op .7s .85s both}
html.anim .deck{animation:open 1.1s .35s cubic-bezier(.6,0,.2,1) backwards}
html.anim .deck video.aan{animation:uitzoom 1.6s .35s cubic-bezier(.2,.7,.2,1) backwards}
html.anim .badge{animation:veerIn .8s 1.2s cubic-bezier(.3,1.5,.5,1) both}
html.anim .deck-cap{animation:op .6s 1.35s both}
@keyframes op{from{opacity:0;transform:translateY(16px)}}
@keyframes regel{from{transform:translateY(112%) rotate(4deg)}}
@keyframes streep{from{transform:scaleX(0)}}
@keyframes scherp{from{opacity:0;filter:blur(8px)}}
@keyframes open{from{clip-path:inset(50% 50% 50% 50% round 16px)}}
@keyframes uitzoom{from{transform:scale(1.2)}}
@keyframes veerIn{from{opacity:0;transform:translateY(-10px) scale(.85)}}
@media (prefers-reduced-motion:reduce){html.anim *{animation:none!important;transition:none!important}html.anim .rv{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .tel b{display:none}
  .mega-in{grid-template-columns:260px 1fr 260px;gap:36px}
  .prijs-grid,.aanvraag-grid{grid-template-columns:1fr 440px}
}
@media (max-width:1100px){
  .tl-grid,.faq-grid{gap:50px}
  .stap{grid-template-columns:60px 150px 1fr}
  .stap img{width:150px;height:140px}
  .voet-grid{grid-template-columns:1fr 1fr 1fr}
  .voet-over{grid-column:1/-1}
}
@media (max-width:1024px){
  :root{--hdr:78px}
  .wrap{padding:0 22px}
  .hdr{background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none}
  .hdr-in{pointer-events:auto;height:58px;margin:10px 10px 0;padding:0 8px 0 16px;background:rgba(255,255,255,.95);border:1px solid var(--lijn);border-radius:999px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .hdr.klein .hdr-in{height:58px}
  .merk img{width:39px;height:30px}
  .nav,.tel,.hdr-cta,.voortgang{display:none}
  .burger{display:grid;place-items:center;margin-left:auto;width:44px;height:44px;border-radius:50%;background:var(--oranje);border:0;padding:0;position:relative;transition:background .25s}
  .burger span{position:absolute;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s,width .3s,background .25s}
  .burger span:nth-child(1){width:18px;transform:translateY(-4px)}
  .burger span:nth-child(2){width:12px;transform:translate(-3px,4px)}
  html.menu-open .burger{background:var(--ink)}
  html.menu-open .burger span{background:var(--oranje);width:18px}
  html.menu-open .burger span:nth-child(1){transform:rotate(45deg)}
  html.menu-open .burger span:nth-child(2){transform:rotate(-45deg)}
  html.menu-open .hdr-in{border-color:transparent;background:#fff}
  .mnav{display:flex;flex-direction:column;position:fixed;inset:0;z-index:45;background:#fff;padding:96px 28px 24px;height:100dvh;overflow-y:auto;clip-path:circle(0 at var(--cx,90%) var(--cy,40px));visibility:hidden;transition:clip-path .55s cubic-bezier(.6,0,.2,1),visibility 0s .55s}
  html.menu-open .mnav{clip-path:circle(160vmax at var(--cx,90%) var(--cy,40px));visibility:visible;transition:clip-path .6s cubic-bezier(.3,.7,.2,1),visibility 0s}
  .mnav-lijst{border-top:1px solid var(--lijn)}
  .mnav-item{border-bottom:1px solid var(--lijn);opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s}
  html.menu-open .mnav-item{opacity:1;transform:none}
  html.menu-open .mnav-item:nth-child(1){transition-delay:.18s}html.menu-open .mnav-item:nth-child(2){transition-delay:.23s}html.menu-open .mnav-item:nth-child(3){transition-delay:.28s}html.menu-open .mnav-item:nth-child(4){transition-delay:.33s}html.menu-open .mnav-item:nth-child(5){transition-delay:.38s}
  .mnav-item>a,.mnav-item>button{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:0;padding:16px 0;font-size:21px;font-weight:800;color:var(--ink);text-decoration:none;letter-spacing:-.02em;text-align:left}
  .mnav-item>button i{width:30px;height:30px;border-radius:50%;background:var(--oranje-l);position:relative;flex:none}
  .mnav-item>button i::before,.mnav-item>button i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--ink);border-radius:2px;transition:transform .25s}
  .mnav-item>button i::after{transform:rotate(90deg)}
  .mnav-item.open>button i{background:var(--oranje)}
  .mnav-item.open>button i::after{transform:rotate(0)}
  .mnav-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s}
  .mnav-item.open .mnav-sub{grid-template-rows:1fr}
  .mnav-sub>div{overflow:hidden}
  .mnav-sub a{display:block;padding:9px 0 9px 14px;border-left:2px solid var(--oranje);margin-bottom:6px;font-size:16px;font-weight:600;color:var(--tekst);text-decoration:none}
  .mnav-sub a:last-child{margin-bottom:16px}
  .mnav-voet{margin-top:auto;padding-top:24px;display:grid;gap:10px;opacity:0;transition:opacity .4s .42s}
  html.menu-open .mnav-voet{opacity:1}
  .mnav-voet .btn{justify-content:center;border-radius:999px}
  .mnav-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .mnav-2 a{display:flex;justify-content:center;align-items:center;gap:8px;border:1.5px solid var(--lijn);border-radius:999px;padding:12px;text-decoration:none;font-weight:600;color:var(--ink)}
  .mnav-2 svg{width:16px;height:16px;color:var(--paars)}
  .mnav-voet p{text-align:center;font-size:13px;color:var(--grijs)}
  html.lock .hdr{position:fixed}
  .mega,.scrim{display:none}

  .hero{padding:26px 0 56px}
  .hero-grid{grid-template-columns:1fr;gap:56px}
  .hero-media{max-width:640px;padding-left:18px}
  .badge{right:-4px}
  .stats .wrap{grid-template-columns:1fr 1fr;padding:0}
  .stat{border-top:1px solid rgba(255,255,255,.1);padding:26px 14px}
  .stat:nth-child(odd){border-left:0}
  .stat:nth-child(-n+2){border-top:0}
  .klanten .wrap{flex-wrap:wrap;justify-content:center;gap:18px 34px}
  .klanten p{width:100%;text-align:center}
  .over{padding:80px 0}
  .over-grid,.tl-grid,.faq-grid{grid-template-columns:1fr;gap:48px}
  .over-media{padding-left:14px}
  .tl-kop{position:static}
  .proj-top,.pick-top{flex-direction:column;align-items:flex-start}
  .proj-grid{grid-template-columns:1fr;grid-template-rows:none;min-height:0}
  .pk:first-child{grid-row:auto;min-height:380px}
  .balk{grid-template-columns:1fr;gap:26px}
  .balk-r{justify-content:space-between}
  .prijs-grid,.aanvraag-grid{grid-template-columns:1fr;gap:40px}
  .meer-paneel{grid-template-columns:1fr;padding:12px 24px}
  .meer-kol{padding:22px 0;border-left:0;border-top:1px solid var(--lijn)}
  .meer-kol:first-child{border-top:0}
  .wa-pill{display:none}
  .mbalk{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--lijn);transform:translateY(110%);transition:transform .35s}
  .mbalk.aan{transform:none}
  .mbalk .btn{width:100%;justify-content:center;border-radius:999px;box-sizing:border-box}
  .voet{padding-bottom:100px}
  .track{padding-left:22px;padding-right:22px;scroll-padding-left:22px}
}
@media (max-width:700px){
  .h1{font-size:min(10.4vw,46px)}
  .hero .lede{font-size:16.5px}
  .deck::after{inset:10px 10px -10px -10px}
  .hero-media{padding-left:10px}
  .badge{top:-20px;right:-6px;padding:9px 14px 9px 9px}
  .badge i{width:32px;height:32px}
  .badge b{font-size:14px}
  .deck-cap{margin-top:26px}
  .deck-cap span{display:none}
  .stat b{font-size:40px}
  .stat span{font-size:10.5px}
  .klanten img{height:32px}
  .klanten .anders{display:none}
  .feiten{grid-template-columns:1fr}
  .kaart{flex-basis:78vw}
  .pick,.proj,.tl,.faq,.meer{padding:70px 0}
  .stap{grid-template-columns:44px 1fr;gap:14px}
  .stap .nr{width:44px;height:44px;font-size:15px}
  .stap img{grid-column:2;width:100%;height:auto!important;aspect-ratio:16/9}
  .stap>div{grid-column:2}
  .tl-lijst::before,.tl-vul{left:21px;top:22px}
  .pk{min-height:300px}
  .pk-t{right:76px;left:20px}
  .pk-t b{font-size:26px}
  .balk{padding:26px 22px}
  .balk-cijfers div{padding:0 16px}
  .balk-cijfers b{font-size:30px}
  .balk-cijfers span{font-size:11.5px}
  .balk-r{flex-direction:column;align-items:stretch;gap:18px}
  .balk-r .btn{justify-content:center}
  .pr b{font-size:17px}
  .pr .bedrag strong{font-size:32px}
  .pr .bedrag{flex-direction:column;align-items:flex-end;gap:0}
  .calc{padding:24px 20px}
  .calc-rij{grid-template-columns:1fr;gap:8px;margin-bottom:16px}
  .calc-uit strong{font-size:44px}
  .calc-uit strong span{display:block;margin:0;font-size:18px}
  .calc .btn{width:100%;justify-content:center}
  .velden{grid-template-columns:1fr}
  .direct{padding:26px 22px}
  .direct .groot{font-size:28px}
  .voet-grid{grid-template-columns:1fr 1fr}
}

/* =========================================================
   v2: paarse hero van /ralfdroneartist + Gobold-koppen + beweging
   ========================================================= */
body{padding-top:0}
.merk img{background:#fff;border-radius:9px;padding:5px 4px;box-sizing:content-box;width:36px;height:28px}
.hdr.klein .merk img{width:32px;height:25px}

/* header ligt transparant op het paars zolang je bovenaan staat */
@media (min-width:1025px){
  .hdr{transition:background .35s,border-color .35s}
  .hdr.op-hero{background:transparent;border-bottom-color:rgba(255,255,255,.14);backdrop-filter:none;-webkit-backdrop-filter:none}
  .hdr.op-hero .merk b,.hdr.op-hero .nav-a,.hdr.op-hero .tel{color:#fff}
  .hdr.op-hero .merk b span{color:var(--oranje)}
  .hdr.op-hero .nav-a:hover{color:var(--oranje)}
  .hdr.op-hero .tel i{border-color:rgba(255,255,255,.35);color:#fff}
  .hdr.op-hero .voortgang{opacity:0}
}

/* hero */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--paars);color:#fff;
  padding:calc(var(--hdr) + clamp(34px,4.4vw,76px)) 0 clamp(120px,11vw,190px)}
.hero .vlaag{position:absolute;z-index:-2;pointer-events:none;top:-30%;left:34%;width:min(86vw,1180px);aspect-ratio:1/.92;
  background:radial-gradient(closest-side,rgba(255,255,255,.17),rgba(255,255,255,.06) 58%,rgba(255,255,255,0));
  border-radius:60% 40% 44% 56%/42% 46% 54% 58%}
.hero .golf{position:absolute;left:-1px;bottom:-1px;z-index:-1;width:calc(100% + 2px);height:clamp(64px,7vw,116px);display:block}
.hero .golf path{fill:var(--nacht)}
.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,3.4vw,60px)}
.hero .kicker{color:rgba(255,255,255,.85)}
.h1{font-family:var(--g);font-weight:400;text-transform:uppercase;letter-spacing:.012em;line-height:1.1;
  font-size:clamp(46px,5.6vw,86px);color:#fff;margin:0 0 22px}
.h1 em{font-style:normal;color:var(--oranje)}
.h1 .r{padding-bottom:.02em}
.hero .lede{color:rgba(255,255,255,.88);max-width:46ch;margin-bottom:32px}
.hero .ilink{color:#fff}
.btn--lijn{--b:transparent;--t:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.btn--lijn::before{background:#fff}
.btn--lijn:hover{color:var(--paars)}
.bewijs{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:28px;font-size:13.5px;color:rgba(255,255,255,.8);max-width:52ch}
.bewijs .st{display:flex;gap:2px;color:var(--oranje)}
.bewijs .st svg{width:15px;height:15px}
.bewijs b{color:#fff;font-weight:600}
.blob{position:relative;justify-self:center;width:100%;max-width:520px;margin:0}
.blob::before{content:"";position:absolute;inset:-7%;border:1px solid rgba(255,255,255,.5);border-radius:50%;pointer-events:none}
.blob>video{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;background:var(--nacht)}
.bol{position:absolute;z-index:3;display:block;overflow:hidden;background:var(--nacht);border:3px solid #fff;border-radius:50%;aspect-ratio:1}
.bol video{width:100%;height:100%;object-fit:cover}
.bol--1{width:30%;left:-7%;bottom:5%}
.bol--2{width:21%;right:1%;top:1%}
.blob .badge{top:auto;bottom:-2%;right:-6%;border:0}
.stats{margin-top:-1px}

/* Gobold als koppenletter */
.h2,.pick-title{font-family:var(--g);font-weight:400;text-transform:uppercase;letter-spacing:.012em;line-height:1.12}
.h2{font-size:clamp(34px,3.7vw,54px);line-height:1.16}
.pick-title{font-size:clamp(46px,6vw,88px)}
.h2 em,.pick-title em{color:var(--paars)}
.kaart-t b,.pk-t b{font-family:var(--g);font-weight:400;text-transform:uppercase;letter-spacing:.015em;line-height:1.08}
.kaart-t b{font-size:32px}
.pk-t b{font-size:36px}
.pk:first-child .pk-t b{font-size:clamp(44px,4.4vw,64px)}
.direct h3,.calc h3,.balk-r h3{font-family:var(--g);font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:26px;line-height:1.15}
.stap h3{font-size:20px}
.voet .merk b,.merk b{font-family:var(--g);font-weight:400;text-transform:uppercase;letter-spacing:.03em;font-size:20px}

/* ---------- beweging ---------- */
html.anim .hero .kicker{animation:op .7s .1s both}
html.anim .h1 .r:nth-child(1)>span{animation-delay:.18s}
html.anim .h1 .r:nth-child(2)>span{animation-delay:.3s}
html.anim .hero .lede{animation:scherp .9s .5s both}
html.anim .hero .acts{animation:op .7s .65s both}
html.anim .bewijs{animation:op .7s .8s both}
html.anim .blob>video{animation:lens 1.3s .2s cubic-bezier(.6,0,.2,1) both}
html.anim .blob::before{animation:ring 1.6s .45s cubic-bezier(.2,.7,.2,1) both}
html.anim .bol--1{animation:bolIn .8s 1.05s cubic-bezier(.3,1.5,.5,1) both}
html.anim .bol--2{animation:bolIn .8s 1.2s cubic-bezier(.3,1.5,.5,1) both}
html.anim .blob .badge{animation:veerIn .8s 1.4s cubic-bezier(.3,1.5,.5,1) both}
html.anim .hero .golf{animation:op 1s .2s both}
@keyframes lens{from{clip-path:circle(0 at 50% 50%);transform:scale(1.12)}to{clip-path:circle(50% at 50% 50%)}}
@keyframes ring{from{opacity:0;transform:scale(.86) rotate(-40deg)}}
@keyframes bolIn{from{opacity:0;transform:scale(.3)}}

/* woorden van sectiekoppen komen een voor een omhoog */
html.anim [data-woorden] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
html.anim [data-woorden] .w>span{display:inline-block;transform:translateY(108%);transition:transform .9s cubic-bezier(.2,.75,.2,1);transition-delay:calc(var(--i,0)*55ms)}
html.anim [data-woorden].in .w>span{transform:none}

/* kickerlijn tekent zich */
html.anim .kicker::before{transition:width .7s cubic-bezier(.6,0,.2,1) .1s}
html.anim .rv:not(.in) .kicker::before,html.anim .kicker.wacht::before{width:0}

/* foto's onthullen van links met lichte uitzoom */
html.anim .onthul img,html.anim .stap.rv img,html.anim .pk.rv,html.anim .kaart.rv a{clip-path:inset(0 100% 0 0 round 16px);transition:clip-path 1.1s cubic-bezier(.6,0,.2,1)}
html.anim .onthul.in img,html.anim .stap.rv.in img,html.anim .pk.rv.in,html.anim .kaart.rv.in a{clip-path:inset(0 0 0 0 round 16px)}
html.anim .onthul .klein{transition-delay:.3s}
html.anim .pk.rv img{transform:scale(1.15);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
html.anim .pk.rv.in img{transform:none}
html.anim .pk.rv.in:hover img{transform:scale(1.05)}
html.anim .rv.onthul,html.anim .stap.rv,html.anim .pk.rv,html.anim .kaart.rv{transform:none}
html.anim .kaart.rv::before{opacity:0;transition:opacity .6s .9s}
html.anim .kaart.rv.in::before{opacity:.9}
html.anim .stats .stat.rv{transform:translateY(14px)}

/* rustige zweef van de bolletjes */
@media (prefers-reduced-motion:no-preference){
  .bol--1 video,.bol--2 video{animation:drijf 7s ease-in-out infinite alternate}
  .bol--2 video{animation-duration:9s}
}
@keyframes drijf{from{transform:scale(1.08) translate(0,0)}to{transform:scale(1.08) translate(-3%,3%)}}

@media (max-width:1024px){
  .hero{padding:calc(var(--hdr) + 26px) 0 clamp(96px,16vw,140px)}
  .hero-grid{grid-template-columns:1fr;gap:64px}
  .blob{max-width:440px}
  .hero .vlaag{top:auto;bottom:6%;left:-22%;width:150vw}
  .bol--1{width:27%;left:1%;bottom:2%}
  .bol--2{width:19%;right:4%;top:3%}
  .blob .badge{right:0;bottom:-6%}
}
@media (max-width:700px){
  .h1{font-size:min(13.4vw,56px)}
  .blob{max-width:320px;margin-right:8px}
  .kaart-t b{font-size:28px}
  .pk-t b,.pk:first-child .pk-t b{font-size:34px}
  .bewijs{font-size:13px}
}

/* v3: blauw palet */
.kicker{color:var(--blauw-3)}
.h2 em,.pick-title em{color:var(--blauw-3)}
.hero .kicker{color:rgba(255,255,255,.85)}
.pr:hover .bedrag strong{color:var(--blauw-3)}

/* =========================================================
   v4: serieuzer. Kleinere koppen, navy als basis, oranje alleen
   voor de knoppen, rustige animaties zonder vering.
   ========================================================= */
/* typografie: Gobold alleen voor de hero-kop en de sectiekoppen, kleiner en rustiger */
.h1{font-size:clamp(44px,5vw,76px);letter-spacing:.02em}
.h2{font-size:clamp(30px,2.9vw,42px);letter-spacing:.025em;line-height:1.16}
.pick-title{font-size:clamp(30px,2.9vw,42px);letter-spacing:.025em;line-height:1.16}
.h2 em,.pick-title em{color:var(--paars)}
.kaart-t b,.pk-t b,.pk:first-child .pk-t b{font-family:var(--f);text-transform:none;letter-spacing:-.02em;font-weight:700;line-height:1.15}
.kaart-t b{font-size:22px}
.pk-t b{font-size:26px}
.pk:first-child .pk-t b{font-size:clamp(28px,2.6vw,36px)}
.direct h3,.calc h3,.balk-r h3{font-family:var(--f);text-transform:none;letter-spacing:-.015em;font-weight:700;font-size:20px;line-height:1.3}
.kaart-t span{color:#fff;opacity:.85;letter-spacing:.12em}
.lede{font-size:16.5px}
.tlink{font-size:14px;letter-spacing:.14em;font-weight:600}

/* knoppen: rechthoekig en strak */
.btn{border-radius:6px;font-weight:600}
.hdr-cta{border-radius:6px}
.hdr-cta i{border-radius:4px}
.verstuur{border-radius:6px}
.btn::before{background:var(--nacht)}

/* kaders: dunne navy lijn in plaats van oranje */
.frame::before,.kaart::before{border-color:rgba(48,73,125,.35);border-width:1px}
html.anim .kaart.rv.in::before{opacity:1}

/* hero rustiger */
.bewijs .st{display:none}
.bewijs{padding-top:22px;border-top:1px solid rgba(255,255,255,.18);max-width:48ch}
.bol--1 video,.bol--2 video{animation:none!important}
.blob .badge{border-radius:10px}
.blob .badge i{border-radius:8px}
.hero .vlaag{opacity:.6}

/* vlakken: navy in plaats van oranje */
.balk{background:var(--nacht);color:#fff;border-radius:12px}
.balk-cijfers b{color:var(--oranje)}
.balk-cijfers span{color:rgba(255,255,255,.72)}
.balk-cijfers div{border-left-color:rgba(255,255,255,.14)}
.balk-r h3{color:#fff}
.balk-r p{color:rgba(255,255,255,.72)}
.balk .btn--wit{--b:var(--oranje);--t:var(--ink)}
.balk .btn--wit::before{background:#fff}

.calc{background:var(--nacht);color:#fff;border-radius:12px}
.calc h3{color:#fff}
.calc-rij>span,.calc-uit small{color:rgba(255,255,255,.62)}
.chips button{border-color:rgba(255,255,255,.22);color:#fff;border-radius:6px}
.chips button:hover{border-color:rgba(255,255,255,.5)}
.chips button.aan{background:#fff;border-color:#fff;color:var(--ink)}
.schakel{color:#fff}
.schakel i{background:rgba(255,255,255,.2)}
.schakel[aria-pressed="true"] i{background:var(--oranje)}
.schakel[aria-pressed="true"] i::after{background:#fff}
.calc-uit{border-top-color:rgba(255,255,255,.14)}
.calc-uit strong{color:#fff}
.calc-uit p{color:rgba(255,255,255,.72)}
.calc .btn--wit{--b:var(--oranje);--t:var(--ink)}
.calc .btn--wit::before{background:#fff}
.direct{border-radius:12px}
.meer-paneel{border-radius:12px}
.proj-grid .pk,.kaart a,.deck video,.over-media .groot,.stap img{border-radius:10px}
.pk-chips span{border-radius:4px;font-size:11px;letter-spacing:.1em}
.pk-chips span:first-child{background:var(--nacht);color:#fff}
.chip{border-radius:4px}
.pr b em{border-radius:4px}

/* FAQ en losse accenten */
.faq details{border-radius:8px}
.faq summary i{background:transparent;border:1.5px solid var(--paars)}
.faq summary i::before,.faq summary i::after{background:var(--paars)}
.vinkjes i{background:var(--paars-l)}
.vinkjes svg{color:var(--paars)}
.stap.langs .nr{background:var(--nacht);border-color:var(--nacht);color:#fff}
.tl-vul{background:var(--paars)}
.wa-pill{background:var(--nacht);color:#fff;border-radius:8px;padding:8px 20px 8px 8px}
.wa-pill i{background:#25D366;color:#fff;border-radius:6px}
.wa-pill:hover{background:var(--ink)}
.wa-pill:hover i{background:#25D366;color:#fff}

/* animaties: korter en zonder vering */
html.anim .bol--1,html.anim .bol--2,html.anim .blob .badge{animation-name:op;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
html.anim [data-woorden] .w>span{transition-duration:.7s;transition-delay:calc(var(--i,0)*35ms)}
html.anim .rv{transform:translateY(16px);transition-duration:.7s}
.veer{animation:none}
@media (max-width:1024px){.hdr-in{border-radius:12px}.burger{border-radius:8px}}
@media (max-width:700px){.h2,.pick-title{font-size:30px}.kaart-t b{font-size:20px}.pk-t b,.pk:first-child .pk-t b{font-size:24px}}

/* =========================================================
   v5: samenhangend palet
   navy-schaal (diep → licht) + één warm oranje accent + neutrale grond
   ========================================================= */
:root{
  --ink:#131D33;        /* koppen */
  --tekst:#2A3348;      /* lopende tekst */
  --grijs:#5E6780;      /* bijtekst */
  --grijs-2:#8C94A7;
  --nacht:#172440;      /* donkerste vlakken: cijferbalk, blokken, footer */
  --paars:#22365F;      /* hero-navy */
  --paars-d:#1B2B4D;
  --blauw-3:#4C6A9E;    /* staalblauw accent: kickers, links, accentwoorden */
  --paars-l:#EAF0F8;    /* lichte blauwe tint voor chips */
  --oranje:#EF8A3C;     /* warm oranje, alleen knoppen en cijfers */
  --oranje-d:#DD7627;
  --oranje-t:#B85E1B;
  --oranje-l:#FCEEE2;
  --lijn:#E3E6EC;
  --grond:#F5F6F8;      /* neutraal licht vlak */
}
.hero{background:linear-gradient(165deg,#2A4170 0%,var(--paars) 45%,#1B2C4F 100%)}
.hero .golf path{fill:var(--nacht)}
.hero .vlaag{opacity:.45}
.hero .kicker::before{background:var(--oranje)}
.h1 em{color:var(--oranje)}
.h2 em,.pick-title em{color:var(--blauw-3)}
.kicker{color:var(--blauw-3)}
.hero .kicker{color:rgba(255,255,255,.78)}
.stats{background:var(--nacht)}
.stat b,.balk-cijfers b{color:var(--oranje)}
.stat span{color:rgba(255,255,255,.7)}
.stat{border-left-color:rgba(255,255,255,.08)}
.klanten{background:#fff}
.pick,.meer{background:var(--grond)}
.frame::before,.kaart::before{border-color:rgba(76,106,158,.35)}
.balk,.calc,.direct,.voet{background:var(--nacht)}
.chips button.aan{color:var(--ink)}
.pr b em{background:var(--paars-l);color:var(--blauw-3)}
.pk-chips span:first-child{background:var(--oranje);color:var(--ink)}
.pk::after,.kaart a::after{background:linear-gradient(180deg,rgba(19,29,51,0) 40%,rgba(19,29,51,.85))}
.chip{background:var(--paars-l);color:var(--ink)}
.chip svg{color:var(--blauw-3)}
.stap .nr{color:var(--ink)}
.stap.langs .nr{background:var(--blauw-3);border-color:var(--blauw-3)}
.tl-vul{background:var(--blauw-3)}
.vinkjes i{background:var(--paars-l)}
.vinkjes svg,.gerust svg{color:var(--blauw-3)}
.faq summary i{border-color:var(--blauw-3)}
.faq summary i::before,.faq summary i::after{background:var(--blauw-3)}
.faq details[open]{border-color:var(--blauw-3)}
.meer-kol a i{color:var(--blauw-3)}
.meer-kol a:hover i,.mega-links a:hover i{background:var(--blauw-3);color:#fff}
.mega-links a i{background:var(--paars-l);color:var(--blauw-3)}
.mega-feat span{color:var(--blauw-3)}
.tel i{color:var(--blauw-3)}
.merk b span{color:var(--blauw-3)}
.hdr.op-hero .merk b span{color:var(--oranje)}
.ilink{background-image:linear-gradient(var(--oranje),var(--oranje))}
.veld input:focus,.veld select:focus,.veld textarea:focus{border-color:var(--blauw-3);outline-color:rgba(76,106,158,.18)}
.wa-pill{background:var(--nacht)}
.voet h3{color:rgba(255,255,255,.55)}
.voet{color:rgba(255,255,255,.75)}
.voortgang{background:var(--oranje)}
.nav-ind{background:var(--oranje)}

/* =========================================================
   v6: lichter. Helderder blauw bovenin, donkere blokken worden
   lichtblauw met donkere tekst, alleen de footer blijft donker.
   ========================================================= */
:root{--licht:#EDF2F9;--licht-lijn:#D6E0EE}
.hero{background:linear-gradient(160deg,#5577B0 0%,#43649D 45%,#35548A 100%)}
.hero .vlaag{opacity:.7}
.stats{background:#35548A}
.hero .golf path{fill:#35548A}
.stat{border-left-color:rgba(255,255,255,.14)}
.stat span{color:rgba(255,255,255,.85)}
.stat b{color:#FFB37A}

/* lichte blokken */
.balk,.calc,.direct{background:var(--licht);color:var(--ink);border:1px solid var(--licht-lijn)}
.balk-cijfers b{color:var(--oranje-t)}
.balk-cijfers span,.balk-r p{color:var(--grijs)}
.balk-cijfers div{border-left-color:var(--licht-lijn)}
.balk-r h3,.calc h3,.direct h3{color:var(--ink)}
.calc-rij>span,.calc-uit small{color:var(--grijs)}
.chips button{border-color:var(--licht-lijn);color:var(--ink);background:#fff}
.chips button:hover{border-color:var(--blauw-3)}
.chips button.aan{background:var(--blauw-3);border-color:var(--blauw-3);color:#fff}
.schakel{color:var(--ink)}
.schakel i{background:var(--licht-lijn)}
.schakel[aria-pressed="true"] i{background:var(--blauw-3)}
.calc-uit{border-top-color:var(--licht-lijn)}
.calc-uit strong{color:var(--ink)}
.calc-uit p{color:var(--grijs)}
.balk .btn--wit::before,.calc .btn--wit::before{background:var(--ink)}
.balk .btn--wit:hover,.calc .btn--wit:hover{color:#fff}
.direct a{color:var(--ink)}
.direct a svg{color:var(--blauw-3)}
.direct .info{color:var(--grijs)}
.direct hr{border-top-color:var(--licht-lijn)}
.direct .sterren span{color:var(--grijs)}
.direct cite{color:var(--grijs)}

/* rest iets lichter */
.voet{background:#22365F}
.wa-pill{background:#22365F}
.pk-chips span:first-child{background:var(--oranje)}

/* =========================================================
   v7: witte hero, rest weer donker navy
   ========================================================= */
/* hero wit */
.hero{background:#fff;color:var(--ink)}
.hero .vlaag{opacity:1;background:radial-gradient(closest-side,#E6EDF7,rgba(230,237,247,.5) 60%,rgba(230,237,247,0));top:-18%;left:44%}
.hero .kicker{color:var(--blauw-3)}
.h1{color:var(--ink)}
.h1 em{color:var(--oranje)}
.hero .lede{color:var(--grijs)}
.hero .ilink{color:var(--ink)}
.btn--lijn{--t:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--lijn::before{background:var(--ink)}
.btn--lijn:hover{color:#fff}
.bewijs{color:var(--grijs);border-top-color:var(--lijn)}
.bewijs b{color:var(--ink)}
.blob::before{border-color:rgba(19,29,51,.16)}
.bol{border-color:#fff;outline:1px solid rgba(19,29,51,.12)}
.blob .badge{border:1px solid var(--lijn)}
.hero .golf path{fill:var(--nacht)}

/* header gewoon wit, ook bovenaan */
@media (min-width:1025px){
  .hdr.op-hero{background:rgba(255,255,255,.94);border-bottom-color:var(--lijn);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .hdr.op-hero .merk b,.hdr.op-hero .nav-a,.hdr.op-hero .tel{color:var(--ink)}
  .hdr.op-hero .nav-a{color:#46506A}
  .hdr.op-hero .nav-a:hover{color:var(--ink)}
  .hdr.op-hero .merk b span{color:var(--blauw-3)}
  .hdr.op-hero .tel i{border-color:var(--lijn);color:var(--blauw-3)}
  .hdr.op-hero .voortgang{opacity:1}
}

/* donkere vlakken terug */
.stats{background:var(--nacht)}
.stat b{color:var(--oranje)}
.stat span{color:rgba(255,255,255,.72)}
.stat{border-left-color:rgba(255,255,255,.08)}
.balk,.calc,.direct{background:var(--nacht);color:#fff;border:0}
.balk-cijfers b{color:var(--oranje)}
.balk-cijfers span,.balk-r p{color:rgba(255,255,255,.7)}
.balk-cijfers div{border-left-color:rgba(255,255,255,.14)}
.balk-r h3,.calc h3,.direct h3{color:#fff}
.calc-rij>span,.calc-uit small{color:rgba(255,255,255,.6)}
.chips button{border-color:rgba(255,255,255,.22);color:#fff;background:transparent}
.chips button:hover{border-color:rgba(255,255,255,.5)}
.chips button.aan{background:#fff;border-color:#fff;color:var(--ink)}
.schakel{color:#fff}
.schakel i{background:rgba(255,255,255,.2)}
.schakel[aria-pressed="true"] i{background:var(--oranje)}
.calc-uit{border-top-color:rgba(255,255,255,.14)}
.calc-uit strong{color:#fff}
.calc-uit p{color:rgba(255,255,255,.72)}
.balk .btn--wit::before,.calc .btn--wit::before{background:#fff}
.balk .btn--wit:hover,.calc .btn--wit:hover{color:var(--ink)}
.direct a{color:#fff}
.direct a svg{color:var(--oranje)}
.direct .info,.direct .sterren span,.direct cite{color:rgba(255,255,255,.62)}
.direct hr{border-top-color:rgba(255,255,255,.12)}
.voet,.wa-pill{background:var(--nacht)}

/* =========================================================
   v8: hero-beeld als i-padel2 (rechthoekige videostapel met kader)
   ========================================================= */
.hero-media{position:relative;padding:0 0 0 18px}
.deck{aspect-ratio:4/3.2}
.deck video{border-radius:14px}
.deck::after{inset:18px 18px -18px -18px;border:1.5px solid var(--oranje);border-radius:16px}
.hero-media .badge{top:-26px;right:-18px;border:1px solid var(--lijn);border-radius:12px;background:#fff}
.hero-media .badge i{background:var(--oranje-l);color:var(--oranje-t)}
.deck-cap{margin-top:40px}
.dots button span{background:var(--oranje)}
html.anim .hero-media .badge{animation:op .7s 1.2s cubic-bezier(.2,.7,.2,1) both}
html.anim .deck{animation:open 1.1s .3s cubic-bezier(.6,0,.2,1) backwards}
.hero .vlaag{top:-10%;left:48%;width:min(70vw,900px)}
@media (max-width:1024px){.hero-media{max-width:640px;padding-left:16px}.hero-media .badge{right:-4px}}
@media (max-width:700px){.hero-media{padding-left:10px}.deck::after{inset:10px 10px -10px -10px}.hero-media .badge{top:-20px;right:-6px}}
html.anim .deck video.aan{animation:none}

/* v10: geen cijferbalk en geen golf; ingelijst videobeeld zoals i-padel2 */
.hero{padding-bottom:clamp(72px,7vw,110px)}
.klanten{border-top:1px solid var(--lijn)}
.hero .vlaag{display:none}

/* =========================================================
   v11: lettertype zoals quantiz.nl, Montserrat 700 in zinsvorm
   ========================================================= */
:root{--g:"Montserrat",system-ui,sans-serif}
.h1,.h2,.pick-title,.kaart-t b,.pk-t b,.direct h3,.calc h3,.balk-r h3,.merk b,.voet .merk b{
  font-family:var(--f);text-transform:none;font-weight:700;letter-spacing:-.02em}
.h1{font-size:clamp(40px,4.4vw,66px);line-height:1.08}
.h2,.pick-title{font-size:clamp(28px,2.6vw,38px);line-height:1.18}
.merk b{font-size:18px;letter-spacing:-.01em}
.voet .merk b{font-size:19px}
/* cijfers en prijzen ook in Montserrat */
.stat b,.balk-cijfers b,.pr .bedrag strong,.calc-uit strong,.direct .groot{font-family:var(--f);font-weight:700;letter-spacing:-.02em}
.pr .bedrag strong{font-size:30px}
.calc-uit strong{font-size:40px}
.calc-uit strong span{font-size:18px}
.balk-cijfers b{font-size:clamp(28px,2.4vw,36px)}
.direct .groot{font-size:26px}
@media (max-width:700px){
  .h1{font-size:min(10.6vw,44px)}
  .h2,.pick-title{font-size:26px}
  .pr .bedrag strong{font-size:24px}
  .calc-uit strong{font-size:34px}
  .direct .groot{font-size:22px}
}

/* =========================================================
   v12: lettertype-vergelijker (?font=cabinet|shoulders|tomorrow)
   ========================================================= */
html[data-font] .h1,html[data-font] .h2,html[data-font] .pick-title,html[data-font] .kaart-t b,html[data-font] .pk-t b,
html[data-font] .direct h3,html[data-font] .calc h3,html[data-font] .balk-r h3,html[data-font] .merk b,html[data-font] .stat b,
html[data-font] .balk-cijfers b,html[data-font] .pr .bedrag strong,html[data-font] .calc-uit strong,html[data-font] .direct .groot,
html[data-font] .stap h3,html[data-font] .pr b,html[data-font] .mega-feat b,html[data-font] .mnav-item>a,html[data-font] .mnav-item>button{font-family:var(--kopf)}
html[data-font] body{font-family:var(--f)}

html[data-font="cabinet"]{--kopf:"Cabinet Grotesk",sans-serif;--f:"General Sans",system-ui,sans-serif}
html[data-font="cabinet"] .h1,html[data-font="cabinet"] .h2,html[data-font="cabinet"] .pick-title{font-weight:800;letter-spacing:-.025em}
html[data-font="cabinet"] .h1{font-size:clamp(44px,4.9vw,74px);line-height:1.02}
html[data-font="cabinet"] .h2,html[data-font="cabinet"] .pick-title{font-size:clamp(31px,2.9vw,42px);line-height:1.1}

html[data-font="shoulders"]{--kopf:"Big Shoulders Display",sans-serif;--f:"Instrument Sans",system-ui,sans-serif}
html[data-font="shoulders"] .h1,html[data-font="shoulders"] .h2,html[data-font="shoulders"] .pick-title,html[data-font="shoulders"] .kaart-t b,html[data-font="shoulders"] .pk-t b{font-weight:800;letter-spacing:.005em}
html[data-font="shoulders"] .h1{font-size:clamp(54px,6vw,92px);line-height:.98}
html[data-font="shoulders"] .h2,html[data-font="shoulders"] .pick-title{font-size:clamp(38px,3.6vw,52px);line-height:1.02}
html[data-font="shoulders"] .kaart-t b{font-size:28px}
html[data-font="shoulders"] .pk-t b{font-size:32px}
html[data-font="shoulders"] .pk:first-child .pk-t b{font-size:clamp(38px,3.4vw,48px)}
html[data-font="shoulders"] .stap h3,html[data-font="shoulders"] .pr b,html[data-font="shoulders"] .direct h3,html[data-font="shoulders"] .calc h3,html[data-font="shoulders"] .balk-r h3{font-size:1.3em;letter-spacing:.01em}
html[data-font="shoulders"] .pr .bedrag strong{font-size:40px}
html[data-font="shoulders"] .calc-uit strong{font-size:52px}
html[data-font="shoulders"] .merk b{font-size:22px;letter-spacing:.01em}

html[data-font="tomorrow"]{--kopf:"Tomorrow",sans-serif;--f:"Instrument Sans",system-ui,sans-serif}
html[data-font="tomorrow"] .h1,html[data-font="tomorrow"] .h2,html[data-font="tomorrow"] .pick-title{font-weight:600;letter-spacing:-.02em}
html[data-font="tomorrow"] .h1{font-size:clamp(40px,4.4vw,66px);line-height:1.05}
html[data-font="tomorrow"] .kaart-t b,html[data-font="tomorrow"] .pk-t b,html[data-font="tomorrow"] .merk b{font-weight:600}

/* keuzeknopje */
.fontkeus{position:fixed;left:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--lijn);border-radius:10px;padding:5px;font-family:"Montserrat",sans-serif}
.fontkeus span{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grijs);padding:0 8px 0 6px}
.fontkeus button{border:0;background:transparent;border-radius:7px;padding:8px 12px;font-size:13px;font-weight:600;color:var(--ink)}
.fontkeus button:hover{background:var(--grond)}
.fontkeus button.aan{background:var(--nacht);color:#fff}
@media (max-width:1024px){.fontkeus{left:10px;right:10px;bottom:78px;overflow-x:auto}.fontkeus span{display:none}.fontkeus button{flex:1;padding:8px 6px;font-size:12px;white-space:nowrap}}

/* =========================================================
   v13: linkerkant minder kaal + zwaardere kop
   ========================================================= */
.hero{background:linear-gradient(90deg,#EEF2F8 0%,#F5F7FB 38%,#fff 62%)}
.hero::before{content:"";position:absolute;inset:0 45% 0 0;z-index:-1;pointer-events:none;
  background:url("/ralfdroneartist2/hoogtelijnen.svg") -60px 40px/1000px auto no-repeat;
  -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent);mask-image:linear-gradient(90deg,#000 55%,transparent)}
.hero .kicker::before{background:var(--oranje);height:2px}
/* kop zwaarder en groter */
.h1{font-weight:800;font-size:clamp(48px,5.4vw,84px);line-height:1.02;letter-spacing:-.035em}
html[data-font="cabinet"] .h1{font-weight:800;font-size:clamp(52px,5.9vw,92px);letter-spacing:-.04em;line-height:.98}
html[data-font="shoulders"] .h1{font-weight:800;font-size:clamp(64px,7.2vw,112px);line-height:.94}
html[data-font="tomorrow"] .h1{font-weight:700;font-size:clamp(46px,5.2vw,80px)}
.h2,.pick-title{font-weight:800}
html[data-font="tomorrow"] .h2,html[data-font="tomorrow"] .pick-title{font-weight:700}
.hero .lede{color:#46506A}
@media (max-width:1024px){.hero::before{inset:0;background-position:-120px 0}}
@media (max-width:700px){.h1{font-size:min(12vw,50px)}html[data-font="shoulders"] .h1{font-size:min(15vw,64px)}html[data-font="cabinet"] .h1{font-size:min(12.6vw,54px)}}

/* =========================================================
   v14: nieuwe lettertype-set voor de koppen (body blijft Montserrat)
   ========================================================= */
html[data-font]{--f:"Montserrat",system-ui,sans-serif}
html[data-font="unbounded"]{--kopf:"Unbounded",sans-serif}
html[data-font="archivo"]{--kopf:"Archivo",sans-serif}
html[data-font="bricolage"]{--kopf:"Bricolage Grotesque",sans-serif}
html[data-font="jakarta"]{--kopf:"Plus Jakarta Sans",sans-serif}
html[data-font="sora"]{--kopf:"Sora",sans-serif}
html[data-font="archivo"] .h1,html[data-font="archivo"] .h2,html[data-font="archivo"] .pick-title,html[data-font="archivo"] .kaart-t b,html[data-font="archivo"] .pk-t b,html[data-font="archivo"] .merk b{font-stretch:125%}

/* hero-kop per lettertype */
html[data-font="unbounded"] .h1{font-weight:700;font-size:clamp(38px,4.1vw,62px);letter-spacing:-.03em;line-height:1.08}
html[data-font="archivo"] .h1{font-weight:900;font-size:clamp(40px,4.3vw,66px);letter-spacing:-.03em;line-height:1.02}
html[data-font="bricolage"] .h1{font-weight:800;font-size:clamp(50px,5.6vw,88px);letter-spacing:-.04em;line-height:.98}
html[data-font="jakarta"] .h1{font-weight:800;font-size:clamp(46px,5.2vw,80px);letter-spacing:-.04em;line-height:1.02}
html[data-font="sora"] .h1{font-weight:800;font-size:clamp(42px,4.7vw,72px);letter-spacing:-.045em;line-height:1.04}
/* sectiekoppen */
html[data-font="unbounded"] .h2,html[data-font="unbounded"] .pick-title{font-weight:700;font-size:clamp(24px,2.3vw,34px);letter-spacing:-.02em}
html[data-font="archivo"] .h2,html[data-font="archivo"] .pick-title{font-weight:800;font-size:clamp(26px,2.4vw,36px);letter-spacing:-.02em}
html[data-font="bricolage"] .h2,html[data-font="bricolage"] .pick-title{font-weight:800;font-size:clamp(32px,3vw,46px);letter-spacing:-.03em;line-height:1.05}
html[data-font="jakarta"] .h2,html[data-font="jakarta"] .pick-title{font-weight:800;font-size:clamp(30px,2.8vw,42px);letter-spacing:-.03em}
html[data-font="sora"] .h2,html[data-font="sora"] .pick-title{font-weight:800;font-size:clamp(28px,2.6vw,40px);letter-spacing:-.035em}
html[data-font="unbounded"] .kaart-t b,html[data-font="unbounded"] .pk-t b{font-weight:700;letter-spacing:-.02em;font-size:.85em}
html[data-font="unbounded"] .merk b,html[data-font="archivo"] .merk b{font-size:16px}
@media (max-width:700px){
  html[data-font="unbounded"] .h1{font-size:min(8.8vw,36px)}
  html[data-font="archivo"] .h1{font-size:min(9.4vw,40px)}
  html[data-font="bricolage"] .h1{font-size:min(13vw,56px)}
  html[data-font="jakarta"] .h1{font-size:min(12vw,50px)}
  html[data-font="sora"] .h1{font-size:min(11vw,46px)}
}
.fontkeus{max-width:calc(100vw - 280px);overflow-x:auto}

/* =========================================================
   v15: Gobold terug voor de koppen + blauwe gloed van links
   ========================================================= */
.fontkeus{display:none}
.h1,.h2,.pick-title{font-family:"Gobold","Arial Narrow",Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.015em}
.h1{font-size:clamp(50px,5.8vw,90px);line-height:1.06}
.h2,.pick-title{font-size:clamp(32px,3.1vw,46px);line-height:1.14}
.merk b,.voet .merk b{font-family:"Gobold","Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.03em;font-size:20px}
.pr .bedrag strong,.calc-uit strong,.balk-cijfers b,.direct .groot{font-family:"Gobold","Arial Narrow",sans-serif;font-weight:400;letter-spacing:.02em}
.pr .bedrag strong{font-size:40px}
.calc-uit strong{font-size:54px}
.calc-uit strong span{font-family:var(--f);font-weight:700;font-size:20px;letter-spacing:-.01em}
.balk-cijfers b{font-size:clamp(36px,3vw,46px)}
.direct .groot{font-size:34px}

/* blauwe gloed die van links de hero in komt */
.hero{background:
  radial-gradient(ellipse 58% 95% at -4% 48%,rgba(76,106,158,.42) 0%,rgba(76,106,158,.2) 38%,rgba(76,106,158,.06) 62%,rgba(76,106,158,0) 78%),
  radial-gradient(ellipse 30% 50% at 0% 100%,rgba(239,138,60,.1),rgba(239,138,60,0) 70%),
  #fff}
.hero::before{opacity:.8}
@media (max-width:1024px){
  .hero{background:radial-gradient(ellipse 110% 60% at -10% 20%,rgba(76,106,158,.34),rgba(76,106,158,.1) 50%,rgba(76,106,158,0) 75%),#fff}
}
@media (max-width:700px){
  .h1{font-size:min(14.5vw,62px)}
  .h2,.pick-title{font-size:32px}
  .pr .bedrag strong{font-size:32px}
  .calc-uit strong{font-size:44px}
  .direct .groot{font-size:28px}
}
.hero{background:
  radial-gradient(ellipse 62% 105% at -6% 50%,rgba(64,96,156,.62) 0%,rgba(76,106,158,.34) 34%,rgba(76,106,158,.12) 58%,rgba(76,106,158,0) 80%),
  #fff}
@media (max-width:700px){
  .h1{font-size:min(12.2vw,52px)}
  .h1 .r{white-space:normal}
  .hero .lede{overflow-wrap:break-word}
  .hero{background:radial-gradient(ellipse 120% 55% at -10% 22%,rgba(64,96,156,.5),rgba(76,106,158,.14) 55%,rgba(76,106,158,0) 80%),#fff}
}

/* =========================================================
   v16: typografie precies als i-padel2 (Montserrat 800/700, zinsvorm)
   ========================================================= */
.h1,.h2,.pick-title,.merk b,.voet .merk b,.pr .bedrag strong,.calc-uit strong,.balk-cijfers b,.direct .groot,.kaart-t b,.pk-t b{
  font-family:"Montserrat",system-ui,sans-serif;text-transform:none}
.h1{font-weight:800;font-size:clamp(42px,4.9vw,72px);line-height:1.02;letter-spacing:-.025em;color:var(--ink)}
.h1 em{color:var(--ink);position:relative;display:inline-block}
.h1 .r:nth-child(2) em{color:var(--ink)}
.h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.16em;background:var(--oranje);z-index:-1;border-radius:2px;transform-origin:0 50%}
html.anim .h1 em::after{animation:streep .7s 1.05s cubic-bezier(.6,0,.2,1) both}
.h1 .r{overflow:visible}
.h2,.pick-title{font-weight:700;font-size:clamp(28px,2.6vw,40px);line-height:1.12;letter-spacing:-.01em}
.h2 em,.pick-title em{color:var(--blauw-3)}
.merk b,.voet .merk b{font-weight:700;letter-spacing:-.01em;font-size:18px}
.pr .bedrag strong{font-weight:800;font-size:30px;letter-spacing:-.02em}
.calc-uit strong{font-weight:800;font-size:42px;letter-spacing:-.03em}
.balk-cijfers b{font-weight:800;font-size:clamp(28px,2.4vw,38px);letter-spacing:-.02em}
.direct .groot{font-weight:800;font-size:26px;letter-spacing:-.02em}
.kaart-t b,.pk-t b{font-weight:700;letter-spacing:-.02em}
.hero .lede{color:#3C465E;font-size:17.5px}
@media (max-width:700px){
  .h1{font-size:min(11.2vw,46px)}
  .h2,.pick-title{font-size:26px}
  .pr .bedrag strong{font-size:24px}
  .calc-uit strong{font-size:34px}
  .direct .groot{font-size:22px}
}
.h1 .r:first-child em::after{display:none}

/* =========================================================
   v17: links vol blauw met witte tekst, header blauw
   ========================================================= */
:root{--hblauw:#22365F}
/* header */
.hdr,.hdr.op-hero{background:var(--hblauw)!important;border-bottom-color:rgba(255,255,255,.1)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.hdr .merk b,.hdr .nav-a,.hdr .tel,.hdr.op-hero .merk b,.hdr.op-hero .nav-a,.hdr.op-hero .tel{color:#fff!important}
.hdr .merk b span{color:var(--oranje)!important}
.hdr .nav-a{opacity:.86}
.hdr .nav-a:hover,.hdr .nav>div.open .nav-a{opacity:1}
.hdr .tel i{border-color:rgba(255,255,255,.28)!important;color:#fff!important}
.hdr .merk img{background:#fff;border-radius:8px;padding:5px 4px;box-sizing:content-box;width:34px;height:26px}
.hdr.klein .merk img{width:30px;height:23px}
@media (max-width:1024px){
  .hdr{background:transparent!important;border:0!important}
  .hdr-in{background:var(--hblauw)!important;border-color:rgba(255,255,255,.12)!important}
  html.menu-open .hdr-in{background:var(--hblauw)!important}
}

/* hero: linkerhelft vol blauw */
.hero{background:linear-gradient(90deg,var(--hblauw) 0,var(--hblauw) 60%,#fff 60%)!important}
.hero::before{inset:0 40% 0 0;filter:brightness(0) invert(1);opacity:.55;-webkit-mask-image:none;mask-image:none}
.hero .kicker{color:rgba(255,255,255,.78)}
.hero .kicker::before{background:var(--oranje)}
.h1{color:#fff}
.h1 em{color:#fff}
.h1 .r:nth-child(2) em{color:#fff}
.h1 em::after{z-index:0;bottom:.02em;height:.13em;mix-blend-mode:normal}
.h1 em{isolation:isolate}
.hero .lede{color:rgba(255,255,255,.84)}
.hero .ilink{color:#fff}
.hero .btn--lijn{--t:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.hero .btn--lijn::before{background:#fff}
.hero .btn--lijn:hover{color:var(--hblauw)}
.deck-cap{color:var(--grijs)}
@media (max-width:1024px){
  .hero{background:linear-gradient(180deg,var(--hblauw) 0,var(--hblauw) 72%,#fff 72%)!important}
  .hero::before{inset:0 0 28% 0}
}
.deck-cap>span{display:none}.deck-cap{justify-content:flex-end}

/* =========================================================
   v18: Gobold-koppen + blauw vlak met golvende rand
   ========================================================= */
.h1,.h2,.pick-title{font-family:"Gobold","Arial Narrow",Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.015em}
.h1{font-size:clamp(50px,5.8vw,90px);line-height:1.06}
.h2,.pick-title{font-size:clamp(32px,3.1vw,46px);line-height:1.14}
.merk b,.voet .merk b{font-family:"Gobold","Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.03em;font-size:20px}
.pr .bedrag strong,.calc-uit strong,.balk-cijfers b,.direct .groot{font-family:"Gobold","Arial Narrow",sans-serif;font-weight:400;letter-spacing:.02em}
.pr .bedrag strong{font-size:40px}
.calc-uit strong{font-size:54px}
.balk-cijfers b{font-size:clamp(36px,3vw,46px)}
.direct .groot{font-size:34px}
.h1 em,.h1 .r:nth-child(2) em{color:var(--oranje)}
.h1 em::after{display:none!important}

/* blauw vlak met S-rand */
.hero{background:#fff!important}
.hero .vlaag{display:block!important;position:absolute;inset:0 auto 0 0;width:64%;height:auto;top:0;left:0;z-index:-2;opacity:1;border-radius:0;transform:none;
  background:url("/ralfdroneartist2/vorm.svg") 0 0/100% 100% no-repeat;animation:none}
.hero::before{inset:0 40% 0 0;-webkit-mask-image:url("/ralfdroneartist2/vorm.svg");mask-image:url("/ralfdroneartist2/vorm.svg");-webkit-mask-size:160% 100%;mask-size:160% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
html.anim .hero .vlaag{animation:vormIn 1.1s .1s cubic-bezier(.6,0,.2,1) both}
@keyframes vormIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (max-width:1024px){
  .hero{background:#fff!important}
  .hero .vlaag{width:100%;height:78%;bottom:auto;background-image:url("/ralfdroneartist2/vorm-m.svg")}
  .hero::before{inset:0 0 22% 0;-webkit-mask-image:url("/ralfdroneartist2/vorm-m.svg");mask-image:url("/ralfdroneartist2/vorm-m.svg");-webkit-mask-size:100% 100%;mask-size:100% 100%}
  html.anim .hero .vlaag{animation-name:vormInM}
}
@keyframes vormInM{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@media (max-width:700px){
  .h1{font-size:min(14vw,60px)}
  .h2,.pick-title{font-size:32px}
  .pr .bedrag strong{font-size:32px}
  .calc-uit strong{font-size:44px}
  .direct .groot{font-size:28px}
}
@media (max-width:700px){.h1{font-size:min(12vw,52px)}}

/* =========================================================
   v19: doorlopend blauw lint door de hele pagina (vliegroute)
   ========================================================= */
.lint{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:0;overflow:visible}
.lint path{fill:none;stroke:var(--hblauw,#22365F);stroke-linejoin:round}
@media (min-width:1101px){
  main{position:relative}
  main>section,main>div{position:relative;z-index:1}
  .hero{z-index:2!important}
  .klanten,.over,.pick,.tl,.proj,.prijs,.faq,.meer,.aanvraag{background:transparent!important}
  /* ruimte waar het lint van kant wisselt */
  .over{padding-bottom:160px}.pick{padding-top:150px}
  .tl{padding-bottom:160px}.proj{padding-top:150px}
  .prijs{padding-bottom:160px}.faq{padding-top:150px}
  .meer{padding-bottom:160px}.aanvraag{padding-top:150px}
}
@media (max-width:1100px){.lint{display:none}}
@media (min-width:1101px){.klanten{border:0!important}.klanten .wrap{border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}}

/* =========================================================
   v20: zwevende header, donkerder navy, logo zonder tegel
   ========================================================= */
:root{--hdonker:#131D35}
.hdr .merk img{content:url("/ralfdroneartist2/mark-wit.svg");background:none!important;padding:0!important;width:40px!important;height:31px!important;border-radius:0}
.hdr .merk{gap:12px}
.hdr .merk b{font-size:21px!important;letter-spacing:.04em!important}
@media (min-width:1025px){
  .hdr,.hdr.op-hero{top:14px;background:transparent!important;border:0!important;pointer-events:none}
  .hdr-in{pointer-events:auto;width:calc(100% - 48px);max-width:1360px;margin:0 auto;height:70px;padding:0 10px 0 22px;
    background:var(--hdonker);border:1px solid rgba(255,255,255,.09);border-radius:18px;transition:height .3s,background .3s}
  .hdr.klein .hdr-in{height:62px;background:rgba(19,29,53,.97)}
  .voortgang{display:none}
  .hdr .merk{padding-right:22px;border-right:1px solid rgba(255,255,255,.12);height:34px}
  .hdr-cta{border-radius:12px!important}
  .hdr .tel i{border-color:rgba(255,255,255,.2)!important}
  /* uitklapmenu in dezelfde breedte als de header */
  .mega{top:calc(100% + 10px);left:50%;right:auto;width:calc(100% - 48px);max-width:1360px;transform:translateX(-50%);
    border:1px solid var(--lijn);border-radius:18px;overflow:hidden}
  .mega-in{padding:30px 32px 32px}
  .nav>div.open .mega{clip-path:inset(-30px 0 0 0 round 18px)}
  .nav-ind{display:none}
  .hero{padding-top:calc(var(--hdr) + 14px + clamp(34px,4.4vw,70px))}
}
@media (max-width:1024px){
  .hdr-in,html.menu-open .hdr-in{background:var(--hdonker)!important;border-color:rgba(255,255,255,.09)!important;border-radius:16px}
}
@media (max-width:1024px){.hdr,.hdr.op-hero,.hdr.klein{background:transparent!important;border:0!important}}

/* =========================================================
   v21: breed doorlopend vlak + smallere header met vast uitklapmenu
   ========================================================= */
.lint path{fill:#22365F;stroke:none}
@media (min-width:1101px){
  .hero{background:transparent!important}
  .hero .vlaag,.hero::before{display:none!important}
  .klanten{background:#fff!important;position:relative;z-index:2}
  .proj{padding-bottom:190px}.prijs{padding-top:190px}
  .over{padding-bottom:170px}.pick{padding-top:150px}
  /* rechts-secties: wat op het blauw valt, wordt wit of krijgt een kaart */
  .proj-top .tlink{color:#fff}
  .tl-lijst{background:#fff;border-radius:18px;padding:34px 34px 8px}
  .tl-lijst::before,.tl-vul{left:63px;top:64px}
  .tl-lijst::before{bottom:64px}
  /* links-secties: kolommen omgedraaid zodat tekst op wit staat */
  .prijs .kicker{justify-content:flex-end}
  .prijs .h2{text-align:right}
  .prijs-grid{grid-template-columns:520px 1fr}
  .prijs-grid>div:first-child{order:2}
  .calc{border:1px solid rgba(255,255,255,.12)}
  .faq-grid{grid-template-columns:1.2fr .8fr}
  .faq-grid>div:first-child{order:2}
  .faq details{background:#fff}
  .meer .kicker{justify-content:flex-end}
  .meer .h2{text-align:right}
  .aanvraag-grid{grid-template-columns:520px 1fr}
  .aanvraag-grid>div:first-child{order:2}
  .direct{border:1px solid rgba(255,255,255,.12)}
}
@media (max-width:1100px){.lint{display:none}}

/* header: smaller, en het uitklapmenu zit er vast aan in dezelfde kleur */
@media (min-width:1025px){
  .hdr-in{max-width:1180px;width:calc(100% - 64px)}
  .hdr .tel b{display:none}
  .hdr:has(.nav>div.open) .hdr-in{border-radius:18px 18px 0 0;border-bottom-color:transparent}
  .mega{top:100%;width:calc(100% - 64px);max-width:1180px;background:var(--hdonker);border:1px solid rgba(255,255,255,.09);border-top:1px solid rgba(255,255,255,.08);
    border-radius:0 0 18px 18px;clip-path:inset(0 0 100% 0);transition:clip-path .45s cubic-bezier(.6,0,.2,1),visibility 0s .45s}
  .nav>div.open .mega{clip-path:inset(0 0 0 0);transition:clip-path .5s cubic-bezier(.3,.7,.2,1),visibility 0s}
  .mega-in{padding:26px 28px 30px;grid-template-columns:280px 1fr 250px;gap:36px}
  .mega .mega-kop{color:rgba(255,255,255,.5)}
  .mega-feat b{color:#fff}
  .mega-feat span{color:var(--oranje)}
  .mega-feat .frame::before{border-color:var(--oranje)}
  .mega-links a{color:#fff;border-bottom-color:rgba(255,255,255,.1)}
  .mega-links a small{color:rgba(255,255,255,.55)}
  .mega-links a i{background:rgba(255,255,255,.08);color:var(--oranje)}
  .mega-links a:hover i{background:var(--oranje);color:var(--ink)}
  .mega-card{background:rgba(255,255,255,.06)}
  .mega-card .big{color:#fff}
  .mega-card .big i{background:rgba(255,255,255,.1);color:var(--oranje)}
  .mega-card p{color:rgba(255,255,255,.6)}
  .mega-card a.wa{color:var(--oranje)}
  /* inhoud schuift gestaffeld in bij openen */
  .mega-feat,.mega-in>div,.mega-card{opacity:0;transform:translateY(10px);transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.2,1)}
  .nav>div.open .mega-feat,.nav>div.open .mega-in>div,.nav>div.open .mega-card{opacity:1;transform:none}
  .nav>div.open .mega-feat{transition-delay:.12s}
  .nav>div.open .mega-in>div{transition-delay:.18s}
  .nav>div.open .mega-card{transition-delay:.24s}
}
@media (min-width:1101px){.meer .h2,.prijs .h2{max-width:46%;margin-left:auto}}

/* v22: hero houdt zijn eigen vorm; de vormen eronder zijn losse S-vormen per blok */
@media (min-width:1101px){
  .hero .vlaag{display:block!important}
  .hero::before{display:block!important}
  .hero{background:#fff!important}
}

/* v23: header-hoeken pas rond maken als het uitklapmenu helemaal dicht is */
@media (min-width:1025px){
  .hdr-in{transition:height .3s,background .3s,border-radius 0s .46s,border-bottom-color 0s .46s}
  .hdr:has(.nav>div.open) .hdr-in{transition:height .3s,background .3s,border-radius 0s 0s,border-bottom-color 0s 0s}
  .mega{transition:clip-path .42s cubic-bezier(.6,0,.2,1),visibility 0s .46s}
  .mega-feat,.mega-in>div,.mega-card{transition:opacity .2s,transform .3s}
}
/* v24: minder lege ruimte bij de wissels */
@media (min-width:1101px){
  .over{padding-bottom:120px}.pick{padding-top:110px}
  .proj{padding-bottom:130px}.prijs{padding-top:130px}
}
/* v25: klantenstrook staat nu onder 'over'; hero-blauw loopt door in de volgende sectie */
@media (min-width:1101px){.hero{z-index:2}.klanten{margin-top:0}.over{padding-top:90px}}
/* v26: hero-vorm wordt door dezelfde tekening gemaakt als de rest (één doorlopende rand) */
@media (min-width:1101px){
  .hero{background:transparent!important}
  .hero .vlaag,.hero::before{display:none!important}
}
.lint path[clip-path]{fill:none!important;stroke:#fff!important;stroke-opacity:.085;stroke-width:1}

/* =========================================================
   v27: mobiel menu in de stijl van de header (donker navy)
   ========================================================= */
@media (max-width:1024px){
  .hdr-in{border-radius:16px;padding:0 6px 0 14px}
  .burger{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:12px!important;width:44px;height:44px}
  .burger span{background:#fff!important}
  .burger span:nth-child(1){width:18px;transform:translateY(-4px)}
  .burger span:nth-child(2){width:18px;transform:translateY(4px)}
  html.menu-open .burger{background:var(--oranje)!important;border-color:var(--oranje)!important}
  html.menu-open .burger span{background:var(--ink)!important}
  html.menu-open .burger span:nth-child(1){transform:rotate(45deg)}
  html.menu-open .burger span:nth-child(2){transform:rotate(-45deg)}
  html.menu-open .hdr-in{border-radius:16px 16px 0 0!important;border-bottom-color:rgba(255,255,255,.08)!important}

  .mnav{background:var(--hdonker);top:10px;left:10px;right:10px;bottom:auto;height:auto;max-height:calc(100dvh - 20px);
    padding:68px 22px 22px;border-radius:16px;border:1px solid rgba(255,255,255,.09);
    clip-path:inset(0 0 100% 0 round 16px);transition:clip-path .45s cubic-bezier(.6,0,.2,1),visibility 0s .45s}
  html.menu-open .mnav{clip-path:inset(0 0 0 0 round 16px);transition:clip-path .5s cubic-bezier(.3,.7,.2,1),visibility 0s}
  html.menu-open .scrim,.menu-scrim{display:block}
  .mnav-lijst{border-top:1px solid rgba(255,255,255,.1);margin-top:6px}
  .mnav-item{border-bottom:1px solid rgba(255,255,255,.1)}
  .mnav-item>a,.mnav-item>button{color:#fff!important;font-family:"Gobold","Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.03em;font-size:26px;padding:14px 0}
  .mnav-item>button i{background:rgba(255,255,255,.1)}
  .mnav-item>button i::before,.mnav-item>button i::after{background:#fff}
  .mnav-item.open>button i{background:var(--oranje)}
  .mnav-item.open>button i::before,.mnav-item.open>button i::after{background:var(--ink)}
  .mnav-sub a{color:rgba(255,255,255,.82);border-left-color:var(--oranje);font-size:15.5px;padding:7px 0 7px 14px;margin-bottom:4px}
  .mnav-sub a:last-child{margin-bottom:14px}
  .mnav-voet{margin-top:22px;padding-top:0}
  .mnav-voet .btn{border-radius:12px}
  .mnav-2 a{border-color:rgba(255,255,255,.18);color:#fff;border-radius:12px}
  .mnav-2 svg{color:var(--oranje)}
  .mnav-voet p{color:rgba(255,255,255,.5)}
}

/* v28: 'Over' compacter en dichter op de hero; header in het vaste blauw */
.feitjes{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-wrap:wrap;gap:8px}
.feitjes li{font-size:13.5px;font-weight:600;color:var(--ink);background:var(--grond);border:1px solid var(--lijn);border-radius:999px;padding:7px 14px}
.over .lede{margin:16px 0 20px}
@media (min-width:1101px){
  .hero{padding-bottom:30px!important;min-height:0!important}
  .over{padding-top:10px!important;padding-bottom:110px}
  .over-grid{align-items:start}
  .over-grid>div:last-child{padding-top:30px}
  .over-media{margin-top:40px}
}
@media (max-width:1100px){.over{padding:56px 0 64px}}
:root{--hdonker:#22365F}
@media (min-width:1025px){.hdr.klein .hdr-in{background:rgba(34,54,95,.97)}}

/* =========================================================
   v29: mobiel menu licht, schuift soepel onder de balk uit, responsive
   ========================================================= */
@media (max-width:1024px){
  .mnav,html.menu-open .mnav{clip-path:none!important}
  .mnav{top:68px;left:10px;right:10px;bottom:auto;height:auto;max-height:calc(100dvh - 82px);overflow-y:auto;
    background:#fff;border:1px solid var(--lijn);border-top:0;border-radius:0 0 16px 16px;padding:8px 22px 20px;
    opacity:0;visibility:hidden;transform:translateY(-14px);transform-origin:top;
    transition:opacity .25s ease,transform .35s cubic-bezier(.3,.7,.2,1),visibility 0s .35s}
  html.menu-open .mnav{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .4s cubic-bezier(.3,.7,.2,1),visibility 0s}
  .mnav-lijst{border-top:0;margin-top:0}
  .mnav-item{border-bottom:1px solid var(--lijn)}
  .mnav-item>a,.mnav-item>button{color:var(--ink)!important;font-size:24px;padding:13px 0}
  .mnav-item>button i{background:var(--grond)}
  .mnav-item>button i::before,.mnav-item>button i::after{background:var(--ink)}
  .mnav-item.open>button i{background:var(--oranje)}
  .mnav-sub a{color:var(--tekst)}
  .mnav-2 a{border-color:var(--lijn);color:var(--ink)}
  .mnav-voet p{color:var(--grijs)}
  .mnav-voet{margin-top:18px}
  .mscrim{background:rgba(22,34,62,.28)!important}
}
/* tablet: smal paneel rechts onder de balk */
@media (min-width:600px) and (max-width:1024px){
  .mnav{left:auto;width:400px;right:10px;border-top:1px solid var(--lijn);border-radius:16px;top:76px}
  html.menu-open .hdr-in{border-radius:16px!important}
}

/* v30: hero schermvullend, tweede sectie pas na scrollen in beeld */
@media (min-width:1101px){
  .hero{min-height:100vh!important;min-height:100svh!important;display:flex;align-items:center;padding-bottom:60px!important;box-sizing:border-box}
  .hero>.wrap{width:100%}
  .over{padding-top:70px!important}
}

/* =========================================================
   v31: mobiel menu schermvullend met lens-animatie
   ========================================================= */
@media (max-width:1024px){
  body .mnav{position:fixed!important;inset:0!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:100dvh!important;max-height:none!important;
    border:0!important;border-radius:0!important;padding:96px 26px calc(24px + env(safe-area-inset-bottom))!important;
    background:#22365F url("/ralfdroneartist2/hoogtelijnen-wit.svg") -180px 60px/1300px auto no-repeat!important;
    display:flex!important;flex-direction:column;overflow-y:auto;
    opacity:1!important;transform:none!important;visibility:hidden;
    clip-path:circle(0px at var(--cx,92%) var(--cy,40px))!important;
    transition:clip-path .55s cubic-bezier(.7,0,.25,1),visibility 0s .55s!important}
  html.menu-open body .mnav{visibility:visible;clip-path:circle(150vmax at var(--cx,92%) var(--cy,40px))!important;
    transition:clip-path .75s cubic-bezier(.65,0,.2,1),visibility 0s!important}
  .mscrim{display:none!important}
  html.menu-open .hdr-in{background:transparent!important;border-color:transparent!important}

  /* items: tekst schuift uit een masker omhoog, lijn tekent zich */
  body .mnav-lijst{border:0;margin-top:10px}
  body .mnav-item{border:0!important;position:relative;opacity:1!important;transform:none!important}
  body .mnav-item::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.14);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s cubic-bezier(.6,0,.2,1)}
  html.menu-open body .mnav-item::after{transform:scaleX(1)}
  body .mnav-item>a,body .mnav-item>button{color:#fff!important;font-size:clamp(38px,11vw,56px)!important;line-height:1;padding:14px 0 12px!important;overflow:hidden}
  body .mnav-item>a>span,body .mnav-item>button>span{display:inline-block}
  body .mnav-item>a,body .mnav-item>button{clip-path:inset(0 0 0 0)}
  body .mnav-item .mt{display:inline-block;transform:translateY(105%);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
  html.menu-open body .mnav-item .mt{transform:none}
  body .mnav-item>button i{background:rgba(255,255,255,.1)!important;width:36px;height:36px;opacity:0;transform:scale(.4) rotate(-90deg);transition:opacity .4s,transform .5s cubic-bezier(.3,1.4,.5,1),background .2s}
  html.menu-open body .mnav-item>button i{opacity:1;transform:none}
  body .mnav-item>button i::before,body .mnav-item>button i::after{background:#fff!important}
  body .mnav-item.open>button i{background:var(--oranje)!important}
  body .mnav-item.open>button i::before,body .mnav-item.open>button i::after{background:var(--ink)!important}
  body .mnav-item:hover .mt,body .mnav-item.open .mt{color:var(--oranje)}
  body .mnav-sub a{color:rgba(255,255,255,.85)!important;font-size:17px;border-left:2px solid var(--oranje);padding:8px 0 8px 14px}
  /* gestaffeld */
  html.menu-open body .mnav-item:nth-child(1) .mt,html.menu-open body .mnav-item:nth-child(1)::after,html.menu-open body .mnav-item:nth-child(1)>button i{transition-delay:.28s}
  html.menu-open body .mnav-item:nth-child(2) .mt,html.menu-open body .mnav-item:nth-child(2)::after,html.menu-open body .mnav-item:nth-child(2)>button i{transition-delay:.35s}
  html.menu-open body .mnav-item:nth-child(3) .mt,html.menu-open body .mnav-item:nth-child(3)::after,html.menu-open body .mnav-item:nth-child(3)>button i{transition-delay:.42s}
  html.menu-open body .mnav-item:nth-child(4) .mt,html.menu-open body .mnav-item:nth-child(4)::after{transition-delay:.49s}
  html.menu-open body .mnav-item:nth-child(5) .mt,html.menu-open body .mnav-item:nth-child(5)::after{transition-delay:.56s}
  /* onderkant */
  body .mnav-voet{margin-top:auto!important;padding-top:26px;opacity:0!important;transform:translateY(24px);transition:opacity .4s,transform .6s cubic-bezier(.2,.8,.2,1)!important}
  html.menu-open body .mnav-voet{opacity:1!important;transform:none;transition-delay:.62s!important}
  body .mnav-voet .btn{border-radius:14px;padding:18px}
  body .mnav-2 a{border-color:rgba(255,255,255,.2)!important;color:#fff!important;border-radius:14px}
  body .mnav-voet p{color:rgba(255,255,255,.55)!important}
  /* sluiten: alles snel weg */
  html:not(.menu-open) body .mnav-item .mt{transition-duration:.25s;transition-delay:0s}
}

/* =========================================================
   v32: hero-kop passend, 'Over'-kop groter, hero op telefoon in één scherm
   ========================================================= */
@media (min-width:1101px){
  .h1{font-size:clamp(46px,4.5vw,74px)!important;line-height:1.04}
  .hero .lede{font-size:16.5px;max-width:48ch}
  .over .h2{font-size:clamp(46px,4.4vw,70px)!important;line-height:1.04}
  .over .lede{font-size:18px}
}
@media (min-width:1101px) and (max-height:820px){.h1{font-size:clamp(44px,4.1vw,64px)!important}.hero .lede{font-size:15.5px}}

@media (max-width:1100px){
  .over .h2{font-size:clamp(40px,11vw,60px)!important;line-height:1.04}
}
@media (max-width:700px){
  .hero{min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;padding:calc(78px + 16px) 0 16px!important}
  .hero>.wrap{flex:1;display:flex;flex-direction:column;gap:20px}
  .hero-grid>div:first-child{flex:none}
  .hero .kicker{font-size:10.5px;margin-bottom:10px}
  .h1{font-size:min(10.6vw,46px)!important;margin-bottom:12px;line-height:1.04}
  .hero .lede{font-size:14.5px;line-height:1.55;margin-bottom:18px}
  .hero .acts{flex-wrap:nowrap;gap:10px}
  .hero .acts .btn{padding:13px 14px;font-size:14px;gap:8px;flex:1;justify-content:center}
  .hero-media{flex:1;display:flex;flex-direction:column;min-height:150px;margin:0 -22px 0 -22px!important;padding:0 22px!important}
  .deck{flex:1;aspect-ratio:auto!important;min-height:150px;max-height:300px}
  .deck-cap{margin-top:10px!important}
}
@media (max-width:700px) and (max-height:700px){
  .hero .lede{font-size:13.5px;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
  .h1{font-size:min(9.6vw,40px)!important}
}
@media (max-width:700px){
  .hero>.wrap{align-items:stretch!important}
  .hero-media{margin:0!important;padding:0 0 0 10px!important;width:100%;box-sizing:border-box;align-self:stretch}
  .deck{width:100%}
  .hero .kicker{white-space:normal}
}
@media (min-width:1101px){.over .h2{font-size:clamp(44px,3.9vw,60px)!important;line-height:1.14!important}} @media (max-width:1100px){.over .h2{line-height:1.14!important}}

/* =========================================================
   v33: hero en 'Over' dichter op elkaar; telefoon: tekst in beeld, video pas na scrollen
   ========================================================= */
@media (min-width:1101px){
  .hero{min-height:94vh!important;min-height:94svh!important;padding-bottom:10px!important}
  .over{padding-top:0!important}
  .over-media{margin-top:0!important}
  .over-grid>div:last-child{padding-top:0!important}
}
@media (max-width:700px){
  .hero{min-height:0!important;display:block!important;padding:0 0 28px!important}
  .hero>.wrap{display:block!important}
  /* telefoon: tekst direct onder de header in plaats van gecentreerd in een schermvullend blok (was: min-height 100svh, padding 90px boven) */
  .hero-grid>div:first-child{box-sizing:border-box;padding:34px 0 32px;display:flex;flex-direction:column;justify-content:flex-start}
  .h1{font-size:min(11.4vw,50px)!important;margin-bottom:16px}
  .hero .kicker{font-size:11px;margin-bottom:14px}
  .hero .lede{font-size:15.5px!important;line-height:1.6;margin-bottom:26px;display:block!important;-webkit-line-clamp:unset!important;overflow:visible!important}
  .hero-media{display:block!important;margin-top:0!important}
  .deck{aspect-ratio:4/3!important;max-height:none!important;min-height:0!important;flex:none!important}
  .hero .vlaag{height:calc(100svh + 170px)!important;bottom:auto!important}
  .hero::before{inset:0 0 auto 0!important;height:calc(100svh + 170px)!important}
  .over{padding-top:48px!important}
}
@media (max-width:700px){.h1{font-size:min(10.4vw,46px)!important}}
@media (max-width:700px){.hero .h1{font-size:min(9.8vw,44px)!important}.hero .h1 .r{white-space:nowrap!important}}

/* =========================================================
   v34: 'Over ons' met drie losse foto's + handgeschreven pijlen
   ========================================================= */
.trio{position:relative;height:600px}
.trio-f{position:absolute;margin:0;overflow:hidden;border-radius:14px;background:#2d4474;border:5px solid #fff}
.trio-f img{width:100%;height:100%;object-fit:cover;display:block}
.trio-ralf{left:0;top:70px;width:44%;aspect-ratio:4/5}
.trio-jasper{left:50%;top:0;width:44%;aspect-ratio:4/5}
.trio-werk{left:16%;top:340px;width:62%;aspect-ratio:16/10;z-index:2}
.trio-ph{display:none}
.trio-f.leeg img{display:none}
.trio-f.leeg .trio-ph{display:grid;place-items:center;position:absolute;inset:0;color:rgba(255,255,255,.55);font-weight:600;font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.trio-l{position:absolute;z-index:3;display:flex;align-items:center;gap:4px;font-family:"Caveat",cursive;font-weight:700;font-size:30px;line-height:1;color:#fff;white-space:nowrap}
.trio-l svg{width:62px;height:42px;color:var(--oranje);flex:none}
.trio-l-ralf{left:4%;top:8px;flex-direction:row-reverse}
.trio-l-ralf svg{transform:scaleX(-1) rotate(-8deg)}
.trio-l-jasper{left:66%;top:330px}
.trio-l-jasper svg{transform:rotate(180deg) scaleX(-1)}
.over .h2 em{color:var(--oranje)}
.over-grid{align-items:center}
/* rustige beweging: foto's schuiven los van elkaar in */
html.anim .trio .trio-f,html.anim .trio .trio-l{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .9s cubic-bezier(.2,.75,.2,1)}
html.anim .trio.in .trio-f,html.anim .trio.in .trio-l{opacity:1;transform:none}
html.anim .trio.in .trio-jasper{transition-delay:.12s}html.anim .trio.in .trio-werk{transition-delay:.24s}
html.anim .trio.in .trio-l{transition-delay:.55s}
html.anim .trio.rv{opacity:1!important;transform:none!important;clip-path:none!important}
@media (max-width:1100px){
  .trio{height:auto;aspect-ratio:1/1.02;max-width:560px;margin:0 auto 20px;width:100%}
  .trio-werk{top:57%}
  .trio-l{font-size:24px}
  .trio-l svg{width:46px;height:32px}
  .trio-l-jasper{top:54%;left:62%}
}
@media (max-width:700px){
  .trio-f{border-width:3px;border-radius:10px}
  .trio-l{font-size:21px}
  .trio-l-ralf{left:0;top:0}
  .trio-l-jasper{left:58%;top:53%}
}
@media (min-width:1101px){.over{padding-top:50px!important}}
.trio-l-jasper{left:57%;top:292px;flex-direction:row}
.trio-l-jasper svg{transform:rotate(-12deg) scaleY(-1);width:54px;height:38px}
@media (max-width:1100px){.trio-l-jasper{top:48.5%;left:55%}}
@media (max-width:700px){.trio-l-jasper{top:48%;left:52%}}
.trio-l-jasper svg{transform:rotate(-38deg)!important;margin-top:-18px}
@media (max-width:1100px){.trio-l{color:var(--ink)}.trio-f{border-color:#fff;outline:1px solid var(--lijn)}.trio{margin-top:10px}}

/* v35: echte foto's; drone links, Ralf en Jasper rechts, pijltjes vanaf links */
.trio-werk{left:0;top:40px;width:47%;aspect-ratio:4/5.4;z-index:1}
.trio-werk img{object-position:28% 50%}
.trio-ralf{left:53%;top:0;width:40%;aspect-ratio:4/4.6;z-index:2}
.trio-ralf img{object-position:50% 30%}
.trio-jasper{left:44%;top:290px;width:42%;aspect-ratio:4/4.4;z-index:3}
.trio-jasper img{object-position:50% 35%}
.trio-l-ralf{left:auto;right:-4%;top:-34px;flex-direction:row-reverse}
.trio-l-ralf svg{transform:scaleX(1) rotate(10deg)!important}
.trio-l-jasper{left:auto;right:-8%;top:540px;flex-direction:row}
.trio-l-jasper svg{transform:rotate(-120deg) scaleY(-1)!important;margin:0}
.trio{height:640px}
@media (max-width:1100px){
  .trio{height:auto;aspect-ratio:1/1.14}
  .trio-werk{top:6%}
  .trio-jasper{top:45%}
  .trio-l-ralf{top:-6%;right:0}
  .trio-l-jasper{top:88%;right:0}
}
.trio-l-ralf{left:14%!important;right:auto!important;top:-8px!important;flex-direction:row!important}
.trio-l-ralf svg{transform:scaleX(-1) scaleY(-1) rotate(-10deg)!important}
.trio-l-jasper{left:4%!important;right:auto!important;top:410px!important;flex-direction:row-reverse!important}
.trio-l-jasper svg{transform:rotate(-8deg)!important;margin:-22px 0 0!important}
@media (max-width:1100px){.trio-l-ralf{top:-2%!important}.trio-l-jasper{top:63%!important}}
@media (max-width:1100px){.trio{aspect-ratio:1/1.02!important;margin-top:34px}}
/* v36: labels buiten de foto's; telefoon: tekst eerst, dan foto's */
@media (min-width:1101px){
  .trio-l-ralf{top:-52px!important;left:10%!important}
  .trio-l-jasper{top:432px!important;left:-2%!important}
}
@media (max-width:1100px){
  .over-grid{display:flex!important;flex-direction:column;gap:30px}
  .over-grid>div:last-child{order:-1}
  .over{padding-top:56px!important}
  .trio{margin-top:40px!important}
  .trio-l-ralf{top:-9%!important;left:8%!important}
  .trio-l-jasper{top:66%!important;left:-1%!important}
  .trio-l{font-size:20px!important}
}
@media (max-width:1100px){.trio-l-jasper{top:73%!important;left:0!important}}
/* v37: pijltjes wijzen naar de foto's */
.trio-l{flex-direction:row!important;align-items:flex-start!important}
.trio-l svg{transform:none!important;margin:0!important;width:64px!important;height:44px!important}
.trio-l-ralf svg{margin-top:8px!important}
.trio-l-jasper svg{margin-top:-14px!important}
@media (max-width:1100px){.trio-l svg{width:48px!important;height:33px!important}}
@media (min-width:1101px){.trio-l-ralf{left:34%!important;top:-48px!important}} @media (max-width:1100px){.trio-l-ralf{left:32%!important}}
/* v38: telefoon, kop + foto's + tekst samen in één scherm */
@media (max-width:1100px){
  .over-grid{gap:0!important}
  .over-grid>div:last-child{display:contents!important}
  .over .kicker{order:1;margin-bottom:8px}
  .over .h2{order:2;font-size:clamp(34px,9.6vw,52px)!important;margin-bottom:6px}
  .over .trio{order:3;margin:34px 0 12px!important;max-width:380px;aspect-ratio:1/.9!important}
  .over .lede{order:4;margin:8px 0 14px!important;font-size:15.5px}
  .over .feitjes{order:5;margin-bottom:16px}
  .over .acts{order:6}
  .over{padding-top:44px!important;padding-bottom:50px!important}
  .over .trio-jasper{top:44%!important}
  .over .trio-l-jasper{top:78%!important}
}
@media (max-width:1100px){.over-grid{align-items:stretch!important}.over .kicker{align-self:flex-start}}
/* v39: dun oranje randje i.p.v. witte rand; telefoon kleiner */
.trio-f{border:0!important;outline:1.5px solid var(--oranje)!important;outline-offset:6px;overflow:hidden}
@media (max-width:1100px){
  .over .trio{max-width:310px!important;margin:30px auto 10px!important;aspect-ratio:1/.92!important}
  .over .h2{font-size:clamp(30px,8.4vw,44px)!important}
  .trio-f{outline-offset:4px;border-radius:10px}
  .trio-l{font-size:18px!important}
}
/* v40: kader zoals in de hero: verschoven, steekt alleen links en onder uit */
.trio-f{outline:0!important;overflow:visible!important;background:none!important;isolation:isolate;border-radius:14px}
.trio-f img{border-radius:14px}
.trio-f::before{content:"";position:absolute;inset:12px 12px -12px -12px;border:1.5px solid var(--oranje);border-radius:16px;z-index:-1;pointer-events:none}
@media (max-width:1100px){.trio-f::before{inset:7px 7px -7px -7px;border-radius:12px}.trio-f img{border-radius:10px}}
/* v41: twee alinea's in 'Over ons' */
.over .lede strong{color:var(--ink);font-weight:600}
.over .lede{margin-bottom:12px!important}
.over .lede-2{margin-top:0!important;margin-bottom:22px!important}
@media (max-width:1100px){.over .lede{order:4}.over .lede-2{order:4}}

/* =========================================================
   v42: klantenstrook opnieuw — logo's netjes, doorschuivend, '+100 andere'
   ========================================================= */
.klanten{border:0!important;background:#fff!important;padding:34px 0}
.klanten .wrap.klanten-in{display:grid!important;grid-template-columns:auto 1fr auto;align-items:center;gap:36px;padding-top:26px!important;padding-bottom:26px!important;border-top:1px solid var(--lijn)!important;border-bottom:1px solid var(--lijn)!important;flex-wrap:nowrap}
.klanten-kop{margin:0;display:flex;flex-direction:column;line-height:1.25;width:auto!important;text-align:left!important}
.klanten-kop b{font-family:"Gobold","Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.03em;font-size:22px;color:var(--ink)}
.klanten-kop span{font-size:13px;color:var(--grijs)}
.klanten-rij{overflow:hidden;display:flex;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.klanten-lijst{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:56px;padding-right:56px;flex:none;animation:klantenloop 38s linear infinite}
.klanten-lijst li{flex:none;display:flex;align-items:center;height:44px}
.klanten-lijst img{height:34px!important;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1) brightness(.35);opacity:.75;transition:filter .3s,opacity .3s}
.klanten-lijst img[alt="FALK"],.klanten-lijst img[alt="MontageMarkt"]{height:28px!important}
.klanten-lijst img:hover{filter:none;opacity:1}
.klanten-lijst .txt{font-size:15px;font-weight:700;color:#4E5972;line-height:1.1;text-align:center;flex-direction:column;justify-content:center}
.klanten-lijst .txt small{display:block;font-size:10px;letter-spacing:.2em;font-weight:600;color:var(--grijs-2);text-transform:uppercase}
.klanten-rij:hover .klanten-lijst{animation-play-state:paused}
@keyframes klantenloop{to{transform:translateX(-100%)}}
.klanten-meer{margin:0;font-family:"Gobold","Arial Narrow",sans-serif;font-size:20px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);background:var(--grond);border:1px solid var(--lijn);border-radius:999px;padding:9px 18px;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.klanten-lijst{animation:none}.klanten-lijst[aria-hidden]{display:none}.klanten-rij{flex-wrap:wrap}}
@media (max-width:900px){
  .klanten{padding:20px 0}
  .klanten .wrap.klanten-in{grid-template-columns:1fr auto;gap:16px 14px;padding-top:20px!important;padding-bottom:22px!important}
  .klanten-kop{flex-direction:row;align-items:baseline;gap:8px}
  .klanten-kop b{font-size:20px}
  .klanten-rij{grid-column:1/-1;grid-row:2;margin:0 -22px}
  .klanten-lijst{gap:38px;padding-right:38px;animation-duration:28s}
  .klanten-lijst img{height:28px!important;max-width:120px}
  .klanten-lijst img[alt="FALK"],.klanten-lijst img[alt="MontageMarkt"]{height:22px!important}
  .klanten-meer{font-size:16px;padding:6px 13px}
  .klanten .anders{display:flex!important}
}
.klanten-lijst img[alt^="Eeterij"]{filter:grayscale(1) contrast(1.2)!important;opacity:.8}
@media (max-width:900px){
  .klanten-kop{flex-direction:row!important;white-space:nowrap}
  .klanten-kop span{display:none}
}

/* =========================================================
   v43: klanten als eigen sectie met twee tegengestelde logo-rijen
   ========================================================= */
.klanten{padding:70px 0 64px!important;background:#fff!important;position:relative;z-index:2;border:0!important;overflow:hidden}
.klanten .wrap{display:block!important;text-align:center;border:0!important;padding-top:0!important;padding-bottom:0!important}
.klanten-kop{font-family:"Gobold","Arial Narrow",sans-serif!important;font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(28px,2.6vw,38px);line-height:1.1;color:var(--ink);margin:0 0 8px;display:block!important}
.klanten-kop em{font-style:normal;color:var(--oranje)}
.klanten-sub{margin:0 auto 34px;color:var(--grijs);font-size:15px;max-width:52ch}
.klanten-rij{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);margin:0!important}
.klanten-rij+.klanten-rij{margin-top:14px!important}
.klanten-lijst{list-style:none;margin:0;padding:0 14px 0 0;display:flex;gap:14px;flex:none;animation:klantenloop 55s linear infinite}
.rij-2 .klanten-lijst{animation-direction:reverse;animation-duration:48s}
.klanten-lijst li{flex:none;width:200px;height:88px;display:grid;place-items:center;border:1px solid var(--lijn);border-radius:14px;background:#fff;transition:border-color .3s,transform .3s}
.klanten-lijst img{height:auto!important;max-height:40px;max-width:140px;width:auto;object-fit:contain;filter:grayscale(1) brightness(.42) contrast(1.1);opacity:.85;transition:filter .35s,opacity .35s}
.klanten-lijst li:hover{border-color:var(--oranje)}
.klanten-lijst li:hover img{filter:none;opacity:1}
.klanten-lijst img[alt^="Eeterij"],.klanten-lijst img[alt^="Gemeente Deurne"]{filter:grayscale(1) contrast(1.2)!important}
.klanten-lijst img[alt^="Eeterij"]:hover{filter:none!important}
.klanten-rij:hover .klanten-lijst{animation-play-state:paused}
.klanten-meer,.klanten-in,.klanten .txt{display:none!important}
@media (max-width:900px){
  .klanten{padding:48px 0 44px!important}
  .klanten-sub{font-size:14px;margin-bottom:24px}
  .klanten-lijst{gap:10px;padding-right:10px}
  .klanten-lijst li{width:148px;height:68px;border-radius:12px}
  .klanten-lijst img{max-height:30px;max-width:108px}
  .klanten-rij+.klanten-rij{margin-top:10px!important}
}
/* 'Over' compacter */
@media (min-width:1101px){.over{padding-bottom:90px!important}.trio{height:600px}}
.over .lede{margin-bottom:24px!important}
.klanten .klanten-kop{text-align:center!important;margin-left:auto!important;margin-right:auto!important;max-width:none!important}.klanten-lijst img[alt="FC Straat"],.klanten-lijst img[alt="Navstar"]{filter:brightness(0) opacity(.62)!important}.klanten-lijst li:hover img[alt="FC Straat"]{filter:brightness(0)!important}
@media (max-width:700px){.klanten .klanten-kop{font-size:27px!important;white-space:normal!important;padding:0 10px}}

/* =========================================================
   v44: klanten vloeit mee in de blauwe vorm rechts (start sectie 3)
   ========================================================= */
@media (min-width:1101px){
  .klanten{background:transparent!important;padding:90px 0 40px!important}
  .klanten .wrap{text-align:left!important}
  .klanten .klanten-kop{text-align:left!important;margin-left:0!important;font-size:clamp(34px,3.1vw,46px)!important}
  .klanten-sub{margin-left:0!important;text-align:left}
  .klanten .kicker{justify-content:flex-start}
  .klanten-lijst li{border-color:rgba(34,54,95,.12);box-sizing:border-box}
  .pick{padding-top:70px!important}
}
.klanten-kop em{color:var(--oranje)}
.klanten-lijst li{position:relative}
.klanten-lijst li::after{content:"";position:absolute;inset:6px -6px -6px 6px;border:1px solid var(--oranje);border-radius:14px;z-index:-1;opacity:0;transition:opacity .3s}
.klanten-lijst li:hover::after{opacity:1}
.klanten-lijst{padding-top:4px;padding-bottom:10px}
@media (min-width:1101px){.aanvraag-grid>div:first-child{background:#fff;border-radius:18px;padding:34px 34px 30px;margin-top:-34px}.prijs-grid>div:first-child,.faq-grid>div:first-child{background:#fff;border-radius:18px;padding:24px 28px}}

/* =========================================================
   v45: pick, tijdlijn en projecten volledig op blauw (witte tekst)
   ========================================================= */
@media (min-width:1101px){
  .pick{padding-top:120px!important}
  .pick .pick-title,.tl .h2,.proj .h2{color:#fff}
  .pick .pick-title em,.tl .h2 em,.proj .h2 em{color:var(--oranje)}
  .pick .lede,.tl .lede,.proj .lede{color:rgba(255,255,255,.8)}
  .pick .kicker,.tl .kicker,.proj .kicker{color:rgba(255,255,255,.75)}
  .tl .vinkjes li{color:#fff}
  .tl .vinkjes i{background:rgba(255,255,255,.12)}
  .tl .vinkjes svg{color:var(--oranje)}
  .tl .tlink,.proj .tlink{color:#fff}
  .pick .pijlen button{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
  .pick .pijlen button:hover{background:var(--oranje);border-color:var(--oranje);color:var(--ink)}
  .kaart::before{border-color:rgba(255,255,255,.25)!important}
  .balk{background:#fff!important;color:var(--ink)!important}
  .balk-cijfers b{color:var(--oranje-t)!important}
  .balk-cijfers span,.balk-r p{color:var(--grijs)!important}
  .balk-cijfers div{border-left-color:var(--lijn)!important}
  .balk-r h3{color:var(--ink)!important}
  .proj{padding-bottom:170px!important}
  .prijs{padding-top:170px!important}
  .klanten .klanten-sub{max-width:44ch}
}
@media (min-width:1101px){.pick{padding-top:70px!important}}

/* v46: blauwe band alleen over 'wat wilt u filmen' + tijdlijn; projecten weer op wit */
@media (min-width:1101px){
  .tl{padding-bottom:180px!important}
  .proj{padding-top:70px!important;padding-bottom:90px!important}
  .proj .h2{color:var(--ink)!important}
  .proj .h2 em{color:var(--paars)!important}
  .proj .lede{color:var(--grijs)!important}
  .proj .kicker{color:var(--blauw-3)!important}
  .proj .tlink{color:var(--ink)!important}
  .balk{background:var(--nacht)!important;color:#fff!important}
  .balk-cijfers b{color:var(--oranje)!important}
  .balk-cijfers span,.balk-r p{color:rgba(255,255,255,.7)!important}
  .balk-cijfers div{border-left-color:rgba(255,255,255,.14)!important}
  .balk-r h3{color:#fff!important}
  .prijs{padding-top:120px!important}
  .faq{padding-bottom:140px!important}
  .meer{padding-top:60px!important}
}
/* v47: blauwe band begint direct onder 'over' als spiegel van de bovenste bubbel; klanten op blauw */
@media (min-width:1101px){
  .klanten{padding-top:40px!important}
  .klanten .klanten-kop{color:#fff!important}
  .klanten .klanten-sub{color:rgba(255,255,255,.78)!important}
  .klanten .kicker{color:rgba(255,255,255,.75)!important}
  .klanten-lijst li{border-color:rgba(255,255,255,.15)!important}
}
@media (min-width:1101px){.klanten{padding-top:150px!important}}
@media (min-width:1101px){.klanten{padding-top:60px!important}}
/* v48: klanten direct onder pick */ @media (min-width:1101px){.pick{padding-top:170px!important;padding-bottom:30px!important}.klanten{padding-top:20px!important;padding-bottom:80px!important}} @media (max-width:1100px){.pick{padding-bottom:20px!important}.klanten{padding-top:10px!important}}
@media (min-width:1101px){.pick{padding-top:250px!important}}
@media (min-width:1101px){.pick{padding-top:330px!important}}
/* v49 */ @media (min-width:1101px){.pick{padding-top:210px!important}.pick-top .lede{max-width:62ch}.pick .lede strong{color:#fff;font-weight:600}}
.lint path.bubbel{fill:#fff!important;stroke:none!important}
/* v50 */ @media (min-width:1101px){.pick{padding-top:90px!important}}
@media (min-width:1101px){.pick-top .lede{max-width:540px!important}}
@media (min-width:1101px){.pick{padding-top:150px!important}}
/* v51 */
@media (min-width:1101px){.pick{padding-top:95px!important}}
@media (max-width:1100px){
  .pick,.klanten{background:#22365F url("/ralfdroneartist2/hoogtelijnen-wit.svg") -200px 0/900px auto!important}
  .pick{padding:56px 0 20px!important;border-radius:28px 28px 0 0;margin-top:10px}
  .klanten{padding:20px 0 56px!important;border-radius:0 0 28px 28px}
  .pick .pick-title,.klanten .klanten-kop{color:#fff!important}
  .pick .pick-title em,.klanten .klanten-kop em{color:var(--oranje)!important}
  .pick .lede,.klanten .klanten-sub{color:rgba(255,255,255,.82)!important}
  .pick .lede strong{color:#fff}
  .klanten .kicker,.pick .kicker{color:rgba(255,255,255,.75)!important}
  .klanten .wrap{text-align:left!important}
  .klanten .klanten-kop{text-align:left!important;margin-left:0!important}
  .klanten-sub{margin-left:0!important;text-align:left}
  .pick .pijlen button{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
  .kaart::before{border-color:rgba(255,255,255,.25)!important}
  .klanten-lijst li{border-color:rgba(255,255,255,.15)!important}
}
@media (max-width:1100px){.klanten .klanten-sub{text-align:left!important;margin-left:0!important}}
/* v52 */ @media (min-width:1101px){.pick{padding-top:35px!important}}
.nav-a{white-space:nowrap}@media (max-width:1240px) and (min-width:1025px){.nav-a{padding:9px 10px;font-size:14.5px}}

/* =========================================================
   v53: pick als twee kolommen (tekst links, video's rechts) + groene WhatsApp-knop
   ========================================================= */
@media (min-width:1101px){
  .pick{display:grid!important;grid-template-columns:minmax(340px,calc((100vw - 1240px)/2 + 440px)) minmax(0,1fr);align-items:center;column-gap:34px;padding-bottom:60px!important}
  .pick .pick-top{grid-column:1;max-width:none;margin:0;padding:0 0 0 max(40px,calc((100vw - 1240px)/2 + 40px))!important;flex-direction:column;align-items:flex-start;gap:26px;margin-bottom:0!important}
  .pick .pick-title{font-size:clamp(34px,3.2vw,46px)!important;line-height:1.08}
  .pick-top .lede{max-width:none!important;font-size:15.5px}
  .pick .track{grid-column:2;padding:14px 40px 18px 14px!important;scroll-padding-left:14px!important}
  .kaart{flex-basis:300px}
}
/* WhatsApp-knop: volledig groen */
.wa-pill{background:#25D366!important;color:#fff!important;border-radius:999px!important;padding:10px 24px 10px 10px!important;border:0;transition:transform .25s,background .25s!important}
.wa-pill i{background:#fff!important;color:#25D366!important;border-radius:50%!important;width:44px;height:44px}
.wa-pill i svg{width:24px;height:24px}
.wa-pill small{opacity:.9;color:#fff}
.wa-pill b{color:#fff;font-size:16px}
.wa-pill:hover{background:#1ebe5b!important;transform:translateY(-3px)}
.wa-pill:hover i{background:#fff!important;color:#1ebe5b!important}
.wa-pill::after{content:"";position:absolute;right:14px;top:10px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:waPuls 2.4s infinite}
.wa-pill{position:fixed}
@keyframes waPuls{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@media (prefers-reduced-motion:reduce){.wa-pill::after{animation:none}}
.wa-pill::after{box-shadow:none!important;animation:waPuls2 2.4s infinite}
@keyframes waPuls2{0%{transform:scale(1);opacity:1}70%{transform:scale(2.2);opacity:0}100%{transform:scale(1);opacity:0}}
.wa-pill::before{content:"";position:absolute;right:14px;top:10px;width:10px;height:10px;border-radius:50%;background:#fff}

/* =========================================================
   v54: 'Zo werkt het' in stijl — grote stat + beloftekaart
   ========================================================= */
.tl-stat{display:flex;align-items:center;gap:16px;margin:4px 0 22px}
.tl-stat b{font-family:"Gobold","Arial Narrow",sans-serif;font-weight:400;font-size:92px;line-height:.9;color:var(--oranje)}
.tl-stat span{font-family:"Gobold","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.03em;font-size:30px;line-height:1;color:var(--ink)}
.tl-stat small{display:block;font-family:var(--f);text-transform:none;letter-spacing:0;font-size:13.5px;color:var(--grijs);margin-top:6px;max-width:22ch;line-height:1.4}
.beloftes{list-style:none;margin:0 0 30px;padding:6px 22px;border:1px solid var(--lijn);border-radius:18px;background:#fff}
.beloftes li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--lijn)}
.beloftes li:last-child{border-bottom:0}
.beloftes i{flex:none;width:30px;height:30px;border-radius:50%;background:var(--oranje);display:grid;place-items:center;margin-top:1px}
.beloftes i svg{width:14px;height:14px;color:var(--ink)}
.beloftes b{display:block;font-size:15.5px;color:var(--ink);line-height:1.3}
.beloftes span{display:block;font-size:13.5px;color:var(--grijs);margin-top:2px}
@media (min-width:1101px){
  .tl .tl-stat span{color:#fff}
  .tl .tl-stat small{color:rgba(255,255,255,.7)}
  .tl .beloftes{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
  .tl .beloftes li{border-bottom-color:rgba(255,255,255,.12)}
  .tl .beloftes b{color:#fff}
  .tl .beloftes span{color:rgba(255,255,255,.7)}
  .tl .h2{font-size:clamp(40px,3.6vw,56px)!important;line-height:1.02}
  .tl-lijst{border-radius:22px!important;padding:40px 40px 14px!important}
  .stap{grid-template-columns:60px 170px 1fr!important}
  .stap img{width:170px!important;height:150px!important;border-radius:12px}
  .stap h3{font-family:"Gobold","Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:26px;line-height:1.05}
  .stap .nr{font-family:"Gobold","Arial Narrow",sans-serif;font-weight:400;font-size:22px}
}
@media (max-width:1100px){
  .tl-stat b{font-size:72px}.tl-stat span{font-size:24px}
  .stap h3{font-family:"Gobold","Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:23px}
}
@media (min-width:1101px){.tl .h2{line-height:1.1!important;font-size:clamp(40px,3.4vw,52px)!important}.tl{padding-top:70px!important}.klanten{padding-bottom:40px!important}}
@media (min-width:1101px){.tl .h2{line-height:1.18!important}.tl-stat{margin-top:18px}}
.tl .h2 em{color:var(--oranje)}.tl-stat{align-items:center}.tl-stat b{font-size:84px}.tl-stat span{font-size:28px}.tl-stat small{max-width:30ch}@media (min-width:1101px){.tl-stat{padding:18px 22px;border-radius:18px;background:rgba(253,168,90,.1);border:1px solid rgba(239,138,60,.45)}}
.tl-stat span{line-height:1.1!important}

/* =========================================================
   v55: 'Zo werkt het' rustiger — geen witte kaart, kleiner
   ========================================================= */
@media (min-width:1101px){
  .tl-lijst{background:transparent!important;padding:10px 0 0!important;border-radius:0!important}
  .tl-lijst::before,.tl-vul{left:23px!important;top:24px!important}
  .tl-lijst::before{background:rgba(255,255,255,.18)!important;bottom:24px!important}
  .tl-vul{background:var(--oranje)!important}
  .stap{grid-template-columns:48px 120px 1fr!important;gap:18px!important;padding-bottom:22px!important;margin-bottom:22px!important;border-bottom-color:rgba(255,255,255,.12)!important}
  .stap .nr{width:48px!important;height:48px!important;font-size:18px!important;background:var(--nacht)!important;border:1px solid rgba(255,255,255,.3)!important;color:#fff!important}
  .stap.langs .nr{background:var(--oranje)!important;border-color:var(--oranje)!important;color:var(--ink)!important}
  .stap img{width:120px!important;height:96px!important;border-radius:10px}
  .stap h3{color:#fff!important;font-size:21px!important;margin-bottom:4px}
  .stap p{color:rgba(255,255,255,.72)!important;font-size:14px!important;line-height:1.55}
  .stap .ilink{color:#fff}
  .stap .chip{background:rgba(255,255,255,.1)!important;color:#fff!important;font-size:11.5px;margin-bottom:6px}
  .stap .chip svg{color:var(--oranje)!important}
  .tl .h2{font-size:clamp(34px,2.9vw,44px)!important}
  .tl .lede{font-size:15px}
  .tl-stat{padding:12px 18px!important;margin:14px 0 16px!important}
  .tl-stat b{font-size:56px!important}
  .tl-stat span{font-size:21px!important}
  .tl-stat small{font-size:12.5px!important}
  .beloftes{padding:2px 18px!important;margin-bottom:24px!important}
  .beloftes li{padding:11px 0!important}
  .beloftes i{width:24px;height:24px}
  .beloftes i svg{width:12px;height:12px}
  .beloftes b{font-size:14.5px}
  .beloftes span{font-size:12.5px}
  .tl{padding-bottom:150px!important}
}
@media (min-width:1101px){.tl{padding-bottom:260px!important}}
@media (min-width:1101px){.tl{padding-bottom:230px!important}}

/* =========================================================
   v56: 'Zo werkt het' minimaal — alleen kop, tekst, spoedregel, knop; stappen als lijst
   ========================================================= */
.tl-spoed{margin:18px 0 26px;font-size:15px;color:var(--grijs);padding-left:14px;border-left:3px solid var(--oranje)}
.tl-spoed b{color:var(--oranje-t)}
.stap{display:grid!important;grid-template-columns:44px 1fr auto!important;align-items:center!important;gap:18px!important}
.stap img,.stap .chip{display:none!important}
.stap-tijd{font-size:12.5px;font-weight:600;color:var(--grijs);white-space:nowrap}
.stap h3{margin-bottom:2px!important}
.stap p{margin:0}
@media (min-width:1101px){
  .tl .tl-spoed{color:rgba(255,255,255,.8)}
  .tl .tl-spoed b{color:var(--oranje)}
  .tl-grid{align-items:center!important}
  .tl-kop{position:static!important}
  .tl-lijst{padding-top:0!important}
  .stap{padding:20px 0!important;margin:0!important}
  .stap .nr{width:44px!important;height:44px!important;font-size:17px!important}
  .stap h3{font-size:22px!important}
  .stap p{font-size:14.5px!important;color:rgba(255,255,255,.7)!important}
  .stap-tijd{color:var(--oranje)}
  .tl-lijst::before,.tl-vul{left:21px!important;top:42px!important}
  .tl-lijst::before{bottom:42px!important}
  .tl .lede{font-size:15.5px;max-width:46ch}
  .tl{padding-top:90px!important;padding-bottom:230px!important}
}
@media (max-width:1100px){.stap-tijd{grid-column:2;font-size:12px;color:var(--oranje-t)}.stap{grid-template-columns:44px 1fr!important}}
/* v57: stappen scroll-reveal */
html.stap-anim .stap{opacity:0;transform:translateX(46px);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.75,.2,1)}
html.stap-anim .stap .nr{transform:scale(.4);transition:transform .6s cubic-bezier(.3,1.5,.5,1) .15s,background .3s,border-color .3s}
html.stap-anim .stap .stap-tijd{opacity:0;transform:translateY(8px);transition:opacity .5s .35s,transform .5s .35s}
html.stap-anim .stap::after{content:"";position:absolute;left:62px;right:0;bottom:-1px;height:1px;background:rgba(255,255,255,.12);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s cubic-bezier(.6,0,.2,1) .2s}
html.stap-anim .stap{border-bottom-color:transparent!important}
html.stap-anim .stap.zicht{opacity:1;transform:none}
html.stap-anim .stap.zicht .nr{transform:none}
html.stap-anim .stap.zicht .stap-tijd{opacity:1;transform:none}
html.stap-anim .stap.zicht::after{transform:none}
html.stap-anim .stap:last-child::after{display:none}
@media (prefers-reduced-motion:reduce){html.stap-anim .stap,html.stap-anim .stap *{opacity:1!important;transform:none!important}}

/* =========================================================
   v58: 'Recent gevlogen' als ronde video-carrousel (coverflow)
   ========================================================= */
.flow{position:relative;margin-top:30px}
.flow-stage{position:relative;height:clamp(300px,34vw,470px);perspective:1600px;transform-style:preserve-3d}
.fl-item{position:absolute;left:50%;top:0;width:clamp(260px,40vw,640px);aspect-ratio:16/9;margin:0 0 0 calc(clamp(260px,40vw,640px) / -2);border-radius:18px;overflow:hidden;background:var(--nacht);cursor:pointer;
  transition:transform .8s cubic-bezier(.2,.75,.2,1),opacity .8s,filter .8s;will-change:transform}
.fl-item video{width:100%;height:100%;object-fit:cover;display:block}
.fl-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,29,51,0) 50%,rgba(19,29,51,.85));transition:opacity .6s}
.fl-item figcaption{position:absolute;left:22px;bottom:18px;right:22px;z-index:2;color:#fff;transition:opacity .5s}
.fl-item figcaption span{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--oranje)}
.fl-item figcaption b{font-family:"Gobold","Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(24px,2.4vw,36px);line-height:1.05}
.fl-item:not(.actief) figcaption{opacity:0}
.fl-item.actief{cursor:default}
.fl-item.actief::before{content:"";position:absolute;inset:0;border:2px solid var(--oranje);border-radius:18px;z-index:3;pointer-events:none}
.flow-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:26px}
.flow-nav button{width:48px;height:48px;border-radius:12px;border:1px solid var(--lijn);background:#fff;color:var(--ink);display:grid;place-items:center;transition:background .2s,border-color .2s}
.flow-nav button:hover{background:var(--oranje);border-color:var(--oranje)}
.flow-nav svg{width:18px;height:18px}
.flow-dots{display:flex;gap:8px}
.flow-dots i{width:8px;height:8px;border-radius:50%;background:var(--lijn);transition:width .3s,background .3s}
.flow-dots i.aan{width:26px;border-radius:4px;background:var(--oranje)}
@media (max-width:700px){.flow-stage{height:62vw}.fl-item{width:78vw;margin-left:-39vw}.fl-item figcaption b{font-size:22px}}
.flow-stage{height:calc(min(40vw,640px)*.5625 + 16px)}@media (max-width:700px){.flow-stage{height:calc(78vw*.5625 + 12px)}}
.flow{overflow:hidden;margin-left:-40px;margin-right:-40px;padding:0 40px}@media (max-width:1024px){.flow{margin-left:-22px;margin-right:-22px;padding:0 22px}}.proj{overflow:hidden}
/* v59: oranje kader verschoven naast de actieve video, zoals in de rest van de site */
.fl-item{overflow:visible!important;background:none!important}
.fl-item video{border-radius:16px;background:var(--nacht)}
.fl-item::after{border-radius:16px}
.fl-item.actief::before{inset:14px 14px -14px -14px!important;border:1.5px solid var(--oranje)!important;border-radius:18px!important;z-index:-1!important;opacity:1;transition:opacity .5s .3s}
.fl-item:not(.actief)::before{content:"";opacity:0}
.flow-stage{margin-bottom:14px}
@media (max-width:700px){.fl-item.actief::before{inset:8px 8px -8px -8px!important}}

/* =========================================================
   v60: prijzen als grote, rustige sectie met drie pakketkaarten
   ========================================================= */
.prijs{padding:110px 0 100px!important;background:#fff!important}
.prijs-kop{text-align:center;max-width:760px;margin:0 auto 54px}
.prijs-kop .kicker{justify-content:center!important}
.prijs .prijs-kop .h2{text-align:center!important;max-width:none!important;margin:0 auto 18px!important;font-size:clamp(40px,4vw,60px)!important}
.prijs .h2 em{color:var(--oranje)}
.prijs-kop .lede{margin:0 auto;max-width:62ch;font-size:16.5px;color:var(--grijs)}
.prijs-kop .lede strong{color:var(--ink);font-weight:600}
.pk2-rij{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch;max-width:1080px;margin:0 auto}
.pk2{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--lijn);border-radius:20px;padding:34px 30px 30px}
.pk2 h3{font-family:"Gobold","Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:30px;line-height:1;color:var(--ink)}
.pk2-voor{margin:6px 0 22px;font-size:14px;color:var(--grijs)}
.pk2-prijs{display:flex;align-items:baseline;gap:8px;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--lijn)}
.pk2-prijs strong{font-family:"Gobold","Arial Narrow",sans-serif;font-weight:400;font-size:62px;line-height:.9;color:var(--ink);letter-spacing:.01em}
.pk2-prijs small{font-size:13px;color:var(--grijs)}
.pk2 ul{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:12px;flex:1}
.pk2 li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--tekst)}
.pk2 li i{flex:none;width:20px;height:20px;border-radius:50%;background:var(--oranje-l);display:grid;place-items:center;margin-top:1px}
.pk2 li svg{width:11px;height:11px;color:var(--oranje-t)}
.pk2 .btn{justify-content:center;width:100%}
.btn--lijn2{--b:transparent;--t:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--lijn2::before{background:var(--ink)}
.btn--lijn2:hover{color:#fff}
.pk2--top{background:var(--hblauw,#22365F);border-color:transparent;isolation:isolate;transform:translateY(-14px)}
.pk2--top::before{content:"";position:absolute;inset:14px 14px -14px -14px;border:1.5px solid var(--oranje);border-radius:22px;z-index:-1}
.pk2--top h3,.pk2--top .pk2-prijs strong{color:#fff}
.pk2--top .pk2-voor,.pk2--top .pk2-prijs small{color:rgba(255,255,255,.7)}
.pk2--top .pk2-prijs{border-bottom-color:rgba(255,255,255,.14)}
.pk2--top li{color:#fff}
.pk2--top li i{background:var(--oranje)}
.pk2--top li svg{color:var(--ink)}
.pk2-badge{position:absolute;top:-13px;left:30px;background:var(--oranje);color:var(--ink);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.prijs-uitleg{max-width:1080px;margin:80px auto 0;padding-top:48px;border-top:1px solid var(--lijn)}
.prijs-uitleg h3{font-family:"Gobold","Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:30px;color:var(--ink);margin-bottom:26px}
.pu-rij{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.pu-rij b{display:block;font-size:15.5px;color:var(--ink);margin-bottom:6px;padding-left:12px;border-left:2px solid var(--oranje)}
.pu-rij p{font-size:14px;color:var(--grijs);line-height:1.6}
.prijs .prijs-noot{margin-top:30px;font-size:14px;color:var(--grijs)}
.prijs-grid,.calc{display:none!important}
@media (max-width:1000px){
  .pk2-rij{grid-template-columns:1fr;max-width:460px;gap:34px}
  .pk2--top{transform:none}
  .pu-rij{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .prijs{padding:70px 0!important}
  .pu-rij{grid-template-columns:1fr;gap:18px}
  .pk2{padding:28px 22px 24px}
  .pk2-prijs strong{font-size:52px}
  .pk2--top::before{inset:8px 8px -8px -8px}
  .prijs-uitleg h3{font-size:25px}
}
/* v61: prijzen hoger, badge in de kaart */
@media (min-width:1101px){.prijs{padding-top:40px!important}.proj{padding-bottom:40px!important}}
.prijs-kop{margin-bottom:40px}
.pk2-badge{position:static!important;display:inline-block;align-self:flex-start;margin:-6px 0 14px}
.pk2--top{padding-top:28px}
/* v62: vier pakketten */
.pk2-rij{grid-template-columns:repeat(4,1fr)!important;max-width:1240px!important;gap:22px!important}
.pk2{padding:30px 24px 26px!important}
.pk2 h3{font-size:27px!important}
.pk2-prijs strong{font-size:54px!important}
.pk2-prijs strong.pk2-op{font-size:36px!important;line-height:1.15!important;padding:9px 0 6px}
.pk2 li{font-size:14px!important}
.pk2 .btn{padding:14px 12px;font-size:15px}
.pk2--maat{background:var(--grond)!important;border-style:dashed!important;border-color:#c9d1de!important}
@media (max-width:1200px) and (min-width:1001px){.pk2-rij{grid-template-columns:repeat(2,1fr)!important;max-width:820px!important;row-gap:40px!important}.pk2--top{transform:none}}
@media (max-width:1000px){.pk2-rij{grid-template-columns:1fr!important;max-width:460px!important}}
.pk2-prijs{flex-wrap:wrap;column-gap:6px;row-gap:0}.pk2-prijs strong{white-space:nowrap;font-size:50px!important}.pk2-prijs small{white-space:nowrap}.pk2-prijs small:first-child{flex-basis:100%;margin-bottom:2px}.pk2-prijs strong.pk2-op{font-size:34px!important;text-transform:uppercase}

/* =========================================================
   v63: Premium-kader achter de kaart
   ========================================================= */
.pk2-rij{isolation:isolate}
.pk2--top{isolation:auto!important;transform:none!important;margin-top:-14px;margin-bottom:14px}
.pk2--top::before{z-index:-1!important}
@media (max-width:1200px){.pk2--top{margin-top:0;margin-bottom:0}}

/* =========================================================
   v64: slot van de pagina — FAQ, meer lezen, offerte
   ========================================================= */
.meer,.aanvraag{display:none!important}
.faq#faq{display:block!important;padding:120px 0 90px!important;background:#fff!important}
.faq2{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}
.faq2-kop{position:sticky;top:120px}
.faq2 .h2{font-size:clamp(38px,3.6vw,54px)!important;line-height:1.05;color:var(--ink)!important;text-align:left!important;max-width:none!important;margin:0!important}
.faq2 .h2 em{color:var(--oranje)!important}
.faq2-kop .lede{margin:18px 0 30px;color:var(--grijs)!important}
.faq2-hulp{display:flex;gap:16px;align-items:center;padding:18px;border:1px solid var(--lijn);border-radius:18px;position:relative;isolation:isolate;background:#fff}
.faq2-hulp::before{content:"";position:absolute;inset:10px 10px -10px -10px;border:1.5px solid var(--oranje);border-radius:20px;z-index:-1}
.faq2-hulp img{width:74px;height:74px;border-radius:14px;object-fit:cover;flex:none}
.faq2-hulp b{display:block;font-size:16px;color:var(--ink)}
.faq2-hulp span{display:block;font-size:13.5px;color:var(--grijs);margin:2px 0 12px}
.faq2-knoppen{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.faq2-knoppen .btn{padding:10px 16px;font-size:14px;background:#25D366;color:#fff;gap:8px}
.faq2-knoppen .btn svg{width:17px;height:17px}
.faq2-knoppen .btn::before{background:#1ebe5b}
.faq2-knoppen .tlink{font-size:12.5px}
.faq2-lijst details{border:0!important;border-bottom:1px solid var(--lijn)!important;border-radius:0!important;margin:0!important;background:none!important}
.faq2-lijst details:first-child{border-top:1px solid var(--lijn)!important}
.faq2-lijst summary{display:grid;grid-template-columns:48px 1fr 34px;align-items:center;gap:10px;padding:26px 0!important;cursor:pointer;list-style:none}
.faq2-lijst summary::-webkit-details-marker{display:none}
.faq2-nr{font-family:"Gobold","Arial Narrow",sans-serif;font-size:22px;color:var(--oranje)}
.faq2-v{font-size:18px;font-weight:600;color:var(--ink);transition:color .2s}
.faq2-lijst summary:hover .faq2-v{color:var(--oranje-t)}
.faq2-lijst summary i{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--lijn)!important;background:none!important;position:relative;transition:background .25s,border-color .25s,transform .3s}
.faq2-lijst summary i::before,.faq2-lijst summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:var(--ink)!important;transition:transform .3s}
.faq2-lijst summary i::after{transform:rotate(90deg)}
.faq2-lijst details[open] summary i{background:var(--oranje)!important;border-color:var(--oranje)!important;transform:rotate(180deg)}
.faq2-lijst details[open] summary i::after{transform:rotate(0)}
.faq2-a{padding:0 44px 26px 58px}
.faq2-a p{margin:0;font-size:15.5px;line-height:1.7;color:var(--grijs)}
.faq2-lijst details[open] .faq2-a{animation:faqIn .45s cubic-bezier(.2,.7,.2,1)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}}

.meer2{padding:0 0 90px;background:#fff}
.meer2-in{display:flex;gap:30px;align-items:baseline;border-top:1px solid var(--lijn);padding-top:34px!important}
.meer2-kop{margin:0;flex:none;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grijs-2)}
.meer2-links{display:flex;flex-wrap:wrap;gap:8px}
.meer2-links a{font-size:13.5px;color:var(--ink);text-decoration:none;padding:7px 14px;border:1px solid var(--lijn);border-radius:999px;transition:border-color .2s,background .2s}
.meer2-links a:hover{border-color:var(--oranje);background:var(--oranje-l)}

.aanvraag2{padding:0 0 110px;background:#fff}
.av2{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:60px;background:#22365F;border-radius:28px;padding:64px;isolation:isolate}
.av2::before{content:"";position:absolute;inset:0;border-radius:28px;background:url("/ralfdroneartist2/hoogtelijnen-wit.svg") -120px -40px/1100px auto no-repeat;opacity:.5;z-index:-1}
.av2 .kicker{color:rgba(255,255,255,.75)!important}
.av2 .h2{color:#fff!important;font-size:clamp(38px,3.6vw,56px)!important;line-height:1.05;text-align:left!important;margin:0!important;max-width:none!important}
.av2 .h2 em{color:var(--oranje)!important}
.av2 .lede{color:rgba(255,255,255,.8)!important;margin:18px 0 24px}
.av2-lijst{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:10px}
.av2-lijst li{display:flex;align-items:center;gap:10px;color:#fff;font-weight:600;font-size:15px}
.av2-lijst i{width:22px;height:22px;border-radius:50%;background:var(--oranje);display:grid;place-items:center}
.av2-lijst svg{width:12px;height:12px;color:var(--ink)}
.av2-direct{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:26px}
.av2-direct a{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid rgba(255,255,255,.18);border-radius:14px;color:#fff;text-decoration:none;font-weight:600;font-size:15px;transition:background .2s,border-color .2s}
.av2-direct a:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35)}
.av2-direct i{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;color:var(--oranje);flex:none}
.av2-direct i svg{width:17px;height:17px}
.av2-direct small{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.av2-review{margin:0;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.av2-review .sterren{display:flex;gap:3px;color:var(--oranje);margin-bottom:8px}
.av2-review .sterren svg{width:15px;height:15px}
.av2-review blockquote{margin:0;color:#fff;font-size:15px;line-height:1.6}
.av2-review figcaption{margin-top:6px;font-size:13px;color:rgba(255,255,255,.6)}
.av2-form{background:#fff;border-radius:20px;padding:34px 32px;position:relative;align-self:start}
.av2-form .velden{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}
@media (max-width:1100px){
  .faq2{grid-template-columns:1fr;gap:40px}
  .faq2-kop{position:static}
  .av2{grid-template-columns:1fr;padding:40px 26px;gap:44px}
}
@media (max-width:700px){
  .faq#faq{padding:70px 0 60px!important}
  .faq2-lijst summary{grid-template-columns:34px 1fr 30px;padding:20px 0!important}
  .faq2-v{font-size:16px}
  .faq2-a{padding:0 0 20px 44px}
  .meer2-in{flex-direction:column;gap:14px}
  .av2{border-radius:22px;padding:34px 20px}
  .av2::before{border-radius:22px}
  .av2-direct{grid-template-columns:1fr}
  .av2-form{padding:24px 18px}
  .av2-form .velden{grid-template-columns:1fr}
}
.faq2 .kicker,.av2 .kicker{justify-content:flex-start!important;text-align:left}
/* v65: drie pakketten, Op maat als fotokaart */
.pk2-rij{grid-template-columns:repeat(3,1fr)!important;max-width:1120px!important;gap:28px!important}
.pk2--maat{position:relative;overflow:hidden;background:#172440!important;border:0!important;color:#fff;isolation:isolate}
.pk2--maat .pk2-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.55;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pk2--maat::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(23,36,64,.55),rgba(23,36,64,.92) 55%)}
.pk2--maat:hover .pk2-bg{transform:scale(1.05)}
.pk2--maat h3,.pk2--maat .pk2-op{color:#fff!important}
.pk2--maat .pk2-voor{color:rgba(255,255,255,.75)!important}
.pk2--maat .pk2-prijs{border-bottom-color:rgba(255,255,255,.18)!important}
.pk2--maat .pk2-op{color:var(--oranje)!important}
.pk2--maat li{color:#fff!important}
.pk2--maat li i{background:rgba(255,255,255,.15)!important}
.pk2--maat li svg{color:var(--oranje)!important}
.pk2--maat .btn{--b:#fff;--t:var(--ink);box-shadow:none}
.pk2--maat .btn::before{background:var(--oranje)}
.pk2--maat .btn:hover{color:var(--ink)}
@media (max-width:1200px) and (min-width:1001px){.pk2-rij{grid-template-columns:repeat(3,1fr)!important;max-width:none!important}}

/* v66: Op maat in dezelfde stijl als Standaard */
.pk2--maat{background:#fff!important;border:1px solid var(--lijn)!important;color:var(--tekst)}
.pk2--maat::after,.pk2--maat .pk2-bg{display:none!important}
.pk2--maat h3{color:var(--ink)!important}
.pk2--maat .pk2-voor{color:var(--grijs)!important}
.pk2--maat .pk2-prijs{border-bottom-color:var(--lijn)!important}
.pk2 .pk2-prijs strong.pk2-op{color:var(--ink)!important;font-size:50px!important;text-transform:none;padding:0!important;line-height:.9!important}
.pk2--maat li{color:var(--tekst)!important}
.pk2--maat li i{background:var(--oranje-l)!important}
.pk2--maat li svg{color:var(--oranje-t)!important}
.pk2--maat .btn{--b:transparent;--t:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.pk2--maat .btn::before{background:var(--ink)}
.pk2--maat .btn:hover{color:#fff}

/* v66: nieuwe footer */
.voet{display:none!important}
.voet2{position:relative;overflow:hidden;background:#172440;color:rgba(255,255,255,.72);padding:80px 0 0;isolation:isolate}
.voet2::before{content:"";position:absolute;inset:0;background:url("/ralfdroneartist2/hoogtelijnen-wit.svg") right -200px top -80px/1300px auto no-repeat;opacity:.35;z-index:-1}
.v2-cta{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.12)}
.v2-cta h2{font-family:"Gobold","Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.015em;font-size:clamp(38px,4.4vw,66px);line-height:1.02;color:#fff;margin:0;max-width:14ch}
.v2-cta h2 em{font-style:normal;color:var(--oranje)}
.v2-cta-r{display:flex;flex-direction:column;align-items:flex-start;gap:16px;flex:none}
.v2-wa{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:600}
.v2-wa svg{width:20px;height:20px;color:#25D366}
.v2-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:44px;padding:56px 0}
.v2-merk .merk b{color:#fff;font-family:"Gobold","Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.03em;font-size:22px}
.v2-merk .merk b span{color:var(--oranje)}
.v2-merk .merk img{content:url("/ralfdroneartist2/mark-wit.svg");width:44px;height:34px}
.v2-merk p{margin:18px 0 22px;font-size:14.5px;line-height:1.7;max-width:34ch}
.voet2 .soc{display:flex;gap:10px}
.voet2 .soc a{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;color:#fff;transition:background .2s,border-color .2s,color .2s}
.voet2 .soc a:hover{background:var(--oranje);border-color:var(--oranje);color:var(--ink)}
.voet2 .soc svg{width:17px;height:17px}
.voet2 h3{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:6px 0 18px}
.voet2 nav a,.v2-contact a{display:block;color:rgba(255,255,255,.85);text-decoration:none;font-size:14.5px;padding:5px 0;transition:color .2s,transform .2s}
.voet2 nav a:hover,.v2-contact a:hover{color:var(--oranje);transform:translateX(3px)}
.v2-contact .v2-tel{font-family:"Gobold","Arial Narrow",sans-serif;font-size:30px;letter-spacing:.02em;color:#fff;padding:0 0 6px}
.v2-contact p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.55);margin-top:12px}
.v2-onder{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 0;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:rgba(255,255,255,.5)}
.v2-onder a{color:inherit}
.v2-woord{font-family:"Gobold","Arial Narrow",sans-serif;font-size:clamp(70px,15.5vw,250px);line-height:.8;letter-spacing:.01em;text-align:center;color:rgba(255,255,255,.05);white-space:nowrap;margin-top:6px;user-select:none;transform:translateY(12%)}
@media (max-width:1000px){
  .v2-cta{flex-direction:column;align-items:flex-start}
  .v2-grid{grid-template-columns:1fr 1fr;gap:34px}
  .v2-merk{grid-column:1/-1}
}
@media (max-width:600px){
  .voet2{padding-top:56px;padding-bottom:70px}
  .v2-grid{grid-template-columns:1fr}
  .v2-woord{font-size:17vw}
}
@media (max-width:1000px){.pk2-rij{grid-template-columns:1fr!important;max-width:460px!important}.pk2--top{margin-top:0;margin-bottom:0}}.v2-woord{overflow:hidden;max-width:100%}
.v2-merk .merk img{background:none!important;padding:0!important;border-radius:0!important;box-sizing:border-box!important}.v2-woord{font-size:clamp(60px,12.4vw,200px)!important;transform:translateY(18%)}
/* v67: WhatsApp-knop opvallender: groter, zelfde groen, dikke donkere rand */
@media (min-width:1025px){
  .wa-pill{right:28px!important;bottom:28px!important;padding:12px 30px 12px 12px!important;gap:14px!important;background:#25D366!important;border:3px solid #172440!important}
  .wa-pill i{width:54px!important;height:54px!important;background:#172440!important;color:#25D366!important}
  .wa-pill i svg{width:28px!important;height:28px!important}
  .wa-pill small{font-size:12px!important;color:#0b3d1f!important;opacity:1!important}
  .wa-pill b{font-size:19px!important;color:#0b2a17!important;font-weight:800}
  .wa-pill::before,.wa-pill::after{background:#172440!important;right:18px!important;top:13px!important}
  .wa-pill:hover{background:#1ebe5b!important;transform:translateY(-3px) scale(1.03)}
  .wa-pill:hover i{background:#172440!important;color:#25D366!important}
}
/* v68: WhatsApp-knop zonder zwart: groter, volledig groen, witte details */
@media (min-width:1025px){
  .wa-pill{border:3px solid #fff!important;background:#25D366!important;outline:1px solid rgba(37,211,102,.35)}
  .wa-pill i{background:#fff!important;color:#1faa53!important}
  .wa-pill small{color:rgba(255,255,255,.92)!important}
  .wa-pill b{color:#fff!important}
  .wa-pill::before,.wa-pill::after{background:#fff!important}
  .wa-pill:hover{background:#1fbf5c!important}
  .wa-pill:hover i{background:#fff!important;color:#1faa53!important}
}
/* v69: subteksten beter leesbaar — donkerder en dikker */
:root{--grijs:#3F4A60;--grijs-2:#5E6780}
.lede,.pk2-voor,.pu-rij p,.faq2-a p,.stap p,.meer-kop span,.klanten-sub,.prijs-noot,.pk2 li,.av2 .lede,.v2-merk p,.tl-spoed,.gerust,.beloftes span{font-weight:500!important}
.lede,.faq2-a p,.pu-rij p{color:#3F4A60!important}
.pick .lede,.tl .lede,.av2 .lede,.klanten .klanten-sub{color:rgba(255,255,255,.92)!important}
.stap p{color:rgba(255,255,255,.88)!important}
.pk2-voor,.pk2-prijs small{color:#4A5570!important}
.pk2--top .pk2-voor,.pk2--top .pk2-prijs small{color:rgba(255,255,255,.85)!important}
.voet2,.v2-merk p{color:rgba(255,255,255,.82)!important}
.v2-contact p{color:rgba(255,255,255,.7)!important}
.hero .lede{color:rgba(255,255,255,.95)!important}
.over .lede{color:#3F4A60!important}
.kicker{font-weight:800!important}
.pk2--maat{padding-top:28px!important}
.pk2-voordeel{font-weight:700!important;color:var(--ink)!important}.pk2-voordeel i{background:var(--oranje)!important}.pk2-voordeel svg{color:var(--ink)!important}
.pk2.pk2--maat li.pk2-voordeel{font-weight:700!important;color:var(--ink)!important}.pk2.pk2--maat li.pk2-voordeel i{background:var(--oranje)!important}.pk2.pk2--maat li.pk2-voordeel svg{color:var(--ink)!important}

/* v70: Op maat uitgelicht in het midden */
.pk2--m2 li{color:#fff!important}
.pk2--m2 .pk2-prijs strong.pk2-op{color:#fff!important}
.pk2--m2 .pk2-prijs small{color:rgba(255,255,255,.8)!important}
.pk2.pk2--m2 li.pk2-voordeel,.pk2--m2 li.pk2-voordeel{color:var(--oranje)!important;font-weight:700!important}
.pk2--m2 li.pk2-voordeel svg{color:var(--ink)!important}
.pk2--m2 .pk2-badge{margin-bottom:14px}

/* v70: locatie-strook i.p.v. cijferbalk */
.balk{display:none!important}
.locatie{display:flex;align-items:center;gap:22px;margin-top:40px;padding:22px 26px;border-radius:18px;background:var(--oranje-l);border:1px solid rgba(239,138,60,.35)}
.loc-ico{flex:none;width:52px;height:52px;border-radius:14px;background:var(--oranje);display:grid;place-items:center;color:var(--ink)}
.loc-ico svg{width:24px;height:24px}
.loc-t{flex:1}
.loc-t b{display:block;font-size:19px;color:var(--ink);font-weight:700}
.loc-t span{display:block;font-size:15px;font-weight:500;color:#3F4A60;margin-top:2px}
.locatie .btn{flex:none}
@media (max-width:700px){
  .locatie{flex-direction:column;align-items:flex-start;padding:22px 20px}
  .locatie .btn{width:100%;justify-content:center}
}
@media (max-width:1100px){.tl .lede{color:#3F4A60!important}.tl .lede strong{color:var(--ink)!important}.stap p{color:#3F4A60!important}.stap h3{color:var(--ink)!important}.tl .h2{color:var(--ink)!important}.tl-spoed{color:#3F4A60!important}}

/* v71: FAQ in de stijl van de pakketkaarten */
.faq#faq{padding:110px 0 100px!important}
.faq3-kop{text-align:center;max-width:720px;margin:0 auto 48px}
.faq3-kop .kicker{justify-content:center!important}
.faq3-kop .h2{text-align:center!important;margin:0 auto 16px!important;max-width:none!important;font-size:clamp(40px,4vw,60px)!important;color:var(--ink)!important}
.faq3-kop .h2 em{color:var(--oranje)!important}
.faq3-kop .lede{margin:0 auto;color:#3F4A60!important}
.faq3{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1080px;margin:0 auto;align-items:start}
.faq3-item{position:relative;background:#fff;border:1px solid var(--lijn);border-radius:18px;transition:background .35s,border-color .35s;isolation:isolate}
.faq3-item::before{content:"";position:absolute;inset:12px 12px -12px -12px;border:1.5px solid var(--oranje);border-radius:20px;z-index:-1;opacity:0;transition:opacity .35s}
.faq3-item[open]{background:#22365F;border-color:#22365F}
.faq3-item[open]::before{opacity:1}
.faq3-item summary{display:grid;grid-template-columns:44px 1fr 34px;align-items:center;gap:12px;padding:22px 22px;cursor:pointer;list-style:none}
.faq3-item summary::-webkit-details-marker{display:none}
.faq3-nr{font-family:"Gobold","Arial Narrow",sans-serif;font-size:26px;line-height:1;color:var(--oranje)}
.faq3-v{font-family:"Gobold","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.02em;font-size:21px;line-height:1.15;color:var(--ink);transition:color .3s}
.faq3-item[open] .faq3-v{color:#fff}
.faq3-item summary i{width:34px;height:34px;border-radius:50%;background:var(--oranje-l);position:relative;transition:background .3s,transform .35s}
.faq3-item summary i::before,.faq3-item summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--ink);border-radius:2px;transition:transform .3s}
.faq3-item summary i::after{transform:rotate(90deg)}
.faq3-item[open] summary i{background:var(--oranje);transform:rotate(180deg)}
.faq3-item[open] summary i::after{transform:rotate(0)}
.faq3-a{padding:0 22px 24px 78px}
.faq3-a p{margin:0;font-size:15px;line-height:1.7;font-weight:500;color:rgba(255,255,255,.88)}
.faq3-a .ilink{color:#fff}
.faq3-item[open] .faq3-a{animation:faqIn .45s cubic-bezier(.2,.7,.2,1)}
.faq3-item:not([open]):hover{border-color:var(--oranje)}
.faq3-hulp{display:flex;align-items:center;gap:18px;max-width:1080px;margin:40px auto 0;padding:18px 22px;border-radius:18px;background:var(--oranje-l);border:1px solid rgba(239,138,60,.35)}
.faq3-hulp img{width:58px;height:58px;border-radius:50%;object-fit:cover;flex:none;border:3px solid #fff}
.faq3-hulp-t{flex:1}
.faq3-hulp-t b{display:block;font-size:17px;color:var(--ink)}
.faq3-hulp-t span{display:block;font-size:14.5px;font-weight:500;color:#3F4A60}
.faq3-wa{background:#25D366!important;color:#fff!important;gap:8px;padding:12px 18px;border-radius:10px}
.faq3-wa svg{width:18px;height:18px}
.faq3-wa::before{background:#1ebe5b!important}
@media (max-width:900px){.faq3{grid-template-columns:1fr}}
@media (max-width:700px){
  .faq#faq{padding:70px 0!important}
  .faq3-item summary{grid-template-columns:34px 1fr 30px;padding:18px 16px}
  .faq3-v{font-size:18px}
  .faq3-a{padding:0 16px 20px 62px}
  .faq3-item::before{inset:7px 7px -7px -7px}
  .faq3-hulp{flex-wrap:wrap}
  .faq3-hulp .btn{flex:1;justify-content:center}
}
.faq .faq3-a p{color:rgba(255,255,255,.9)!important;padding:0!important}.faq .faq3-item summary i{border:0!important}.faq .faq3-item summary i::before,.faq .faq3-item summary i::after{background:var(--ink)!important}.faq .faq3-item summary{padding:22px!important}
/* v72: geen oranje randen meer in FAQ en strookjes */ .faq3-item::before{display:none!important}.faq3-hulp,.locatie{background:#F3F5F9!important;border:0!important}.faq3-hulp img{border-color:#fff}

/* v73: FAQ onder elkaar, uitgebreider, met animaties */
.faq4{max-width:860px;margin:0 auto;display:grid;gap:14px;counter-reset:q}
.faq4-item{position:relative;background:#fff;border:1px solid var(--lijn);border-radius:18px;overflow:hidden;transition:background .45s,border-color .45s,transform .35s}
.faq4-item::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--oranje);transform:scaleY(0);transform-origin:50% 0;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.faq4-item:hover{border-color:#cfd6e2;transform:translateX(4px)}
.faq4-item[open]{background:#22365F;border-color:#22365F;transform:none}
.faq4-item[open]::after{transform:scaleY(1)}
.faq4-item summary{display:grid;grid-template-columns:48px 1fr 36px;align-items:center;gap:14px;padding:22px 26px!important;cursor:pointer;list-style:none}
.faq4-item summary::-webkit-details-marker{display:none}
.faq4-item .faq3-nr{transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.faq4-item[open] .faq3-nr{transform:scale(1.15)}
.faq4-item[open] .faq3-v{color:#fff}
.faq4-item summary i{width:36px;height:36px;border-radius:50%;background:var(--oranje-l);position:relative;transition:background .3s,transform .45s cubic-bezier(.3,1.4,.5,1)}
.faq4-item summary i::before,.faq4-item summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--ink);border-radius:2px;transition:transform .35s}
.faq4-item summary i::after{transform:rotate(90deg)}
.faq4-item[open] summary i{background:var(--oranje);transform:rotate(180deg)}
.faq4-item[open] summary i::after{transform:rotate(0)}
.faq4-a{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.faq4-a>div{overflow:hidden}
.faq4-item.dicht .faq4-a{grid-template-rows:0fr}
.faq4-a p{margin:0;padding:0 70px 26px 88px;font-size:15.5px;line-height:1.75;font-weight:500;color:rgba(255,255,255,.9)!important;opacity:1;transform:none;transition:opacity .4s .1s,transform .45s .1s}
.faq4-item.dicht .faq4-a p{opacity:0;transform:translateY(-8px)}
.faq4-a .ilink{color:#fff;background-image:linear-gradient(var(--oranje),var(--oranje))}
.faq4-hulp{max-width:860px!important}
/* instromen bij scrollen */
html.anim .faq4-item{opacity:0;transform:translateY(24px)}
html.anim .faq4.in .faq4-item{opacity:1;transform:none;transition:opacity .6s calc(var(--i)*70ms),transform .7s calc(var(--i)*70ms) cubic-bezier(.2,.75,.2,1),background .45s,border-color .45s}
@media (max-width:700px){
  .faq4-item summary{grid-template-columns:34px 1fr 30px;gap:10px;padding:18px 16px!important}
  .faq4-a p{padding:0 18px 20px 60px}
}
@media (prefers-reduced-motion:reduce){.faq4-item,.faq4-a,.faq4-a p{transition:none!important}html.anim .faq4-item{opacity:1;transform:none}}
.faq .faq4-a p{padding:0 70px 26px 88px!important}.faq .faq4-item summary i{border:0!important}.faq .faq4-item summary i::before,.faq .faq4-item summary i::after{background:var(--ink)!important}@media (max-width:700px){.faq .faq4-a p{padding:0 18px 20px 60px!important}}
/* v74: footer als bubbel */
.voet2{background:transparent!important;padding:0 18px 18px!important;overflow:visible!important}
.voet2::before{display:none!important}
.v2-bubbel{position:relative;isolation:isolate;overflow:hidden;background:#22365F;color:rgba(255,255,255,.82);border-radius:48px 48px 32px 32px;padding:80px 0 0}
.v2-bubbel::before{content:"";position:absolute;inset:0;background:url("/ralfdroneartist2/hoogtelijnen-wit.svg") right -200px top -80px/1300px auto no-repeat;opacity:.45;z-index:-1}
.v2-bubbel::after{content:"";position:absolute;right:-120px;top:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(239,138,60,.22),rgba(239,138,60,0));z-index:-1}
.v2-cta{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:28px;padding:40px 44px!important;border-bottom:1px solid rgba(255,255,255,.1)!important}
.v2-onder{border-top-color:rgba(255,255,255,.14)!important;padding-bottom:28px!important}
.v2-woord{display:none!important}
@media (max-width:700px){
  .voet2{padding:0 10px 90px!important}
  .v2-bubbel{border-radius:32px 32px 24px 24px;padding-top:40px}
  .v2-cta{padding:28px 22px!important;border-radius:22px}
}

/* v75: 'Meer lezen' als drie fotokaarten met linklijst */
.meer3{padding:30px 0 110px!important;background:#fff}
.meer3 .wrap{display:block!important;border:0!important;padding-top:0!important}
.meer3-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:40px;padding-top:50px;border-top:1px solid var(--lijn)}
.meer3-kop .h2{margin:0!important;font-size:clamp(34px,3.2vw,48px)!important;color:var(--ink)!important;text-align:left!important}
.meer3-kop .h2 em{color:var(--oranje)!important}
.meer3-kop .kicker{justify-content:flex-start!important}
.meer3-kop .lede{max-width:44ch;margin:0;color:#3F4A60!important}
.meer3-rij{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.meer3-kaart{background:#fff;border:1px solid var(--lijn);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .3s}
.meer3-kaart:hover{transform:translateY(-6px);border-color:#cfd6e2}
.meer3-foto{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#22365F}
.meer3-foto img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.meer3-kaart:hover .meer3-foto img{transform:scale(1.07)}
.meer3-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,36,64,0) 35%,rgba(23,36,64,.88))}
.meer3-tag{position:absolute;top:16px;left:16px;z-index:2;font-family:"Gobold","Arial Narrow",sans-serif;font-size:20px;color:var(--ink);background:var(--oranje);border-radius:10px;padding:4px 10px}
.meer3-titel{position:absolute;left:20px;right:20px;bottom:16px;z-index:2;color:#fff}
.meer3-titel b{display:block;font-family:"Gobold","Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:30px;line-height:1.05}
.meer3-titel small{display:block;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.85);margin-top:2px}
.meer3-kaart ul{list-style:none;margin:0;padding:8px 20px 14px}
.meer3-kaart li a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--lijn);text-decoration:none;color:var(--ink);font-weight:600;font-size:15px;transition:padding .3s,color .25s}
.meer3-kaart li:last-child a{border-bottom:0}
.meer3-kaart li a i{flex:none;width:30px;height:30px;border-radius:50%;background:var(--oranje-l);display:grid;place-items:center;color:var(--oranje-t);transition:background .25s,color .25s,transform .35s}
.meer3-kaart li a i svg{width:14px;height:14px}
.meer3-kaart li a:hover{padding-left:6px;color:#22365F}
.meer3-kaart li a:hover i{background:var(--oranje);color:var(--ink);transform:rotate(-45deg)}
html.anim .meer3-kaart{opacity:0;transform:translateY(30px)}
html.anim .meer3-rij.in .meer3-kaart{opacity:1;transform:none;transition:opacity .7s calc(var(--i)*120ms),transform .8s calc(var(--i)*120ms) cubic-bezier(.2,.75,.2,1),border-color .3s}
html.anim .meer3-rij.in .meer3-kaart:hover{transform:translateY(-6px)}
@media (max-width:1000px){.meer3-rij{grid-template-columns:1fr;max-width:520px}.meer3-kop{flex-direction:column;align-items:flex-start;gap:14px}}
@media (max-width:700px){.meer3{padding:10px 0 70px!important}.meer3-titel b{font-size:26px}}
/* v76: offerte + footer samen één blauwe bubbel */
.aanvraag2{margin:0 18px!important;padding:96px 0 40px!important;background:#22365F!important;border-radius:48px 48px 0 0;position:relative;isolation:isolate;overflow:hidden}
.aanvraag2::before{content:"";position:absolute;inset:0;background:url("/ralfdroneartist2/hoogtelijnen-wit.svg") -120px -40px/1300px auto no-repeat;opacity:.45;z-index:-1}
.aanvraag2::after{content:"";position:absolute;left:-160px;top:-180px;width:560px;height:560px;border-radius:50%;background:radial-gradient(closest-side,rgba(239,138,60,.18),rgba(239,138,60,0));z-index:-1}
.av2{background:transparent!important;border-radius:0!important;padding:0!important;overflow:visible!important}
.av2::before{display:none!important}
.voet2{padding:0 18px 18px!important}
.v2-bubbel{border-radius:0 0 40px 40px!important;padding-top:40px!important}
.v2-bubbel::before{background-position:right -200px top -300px!important}
.v2-bubbel::after{display:none}
.v2-bubbel>.wrap{border-top:1px solid rgba(255,255,255,.12);padding-top:56px!important}
@media (max-width:700px){
  .aanvraag2{margin:0 10px!important;border-radius:32px 32px 0 0;padding:52px 0 24px!important}
  .aanvraag2 .wrap{padding:0 16px}
  .voet2{padding:0 10px 90px!important}
  .v2-bubbel{border-radius:0 0 28px 28px!important;padding-top:24px!important}
  .v2-bubbel>.wrap{padding-top:36px!important}
}
/* v77: dubbele CTA weg binnen de bubbel */ .v2-cta{display:none!important}.v2-bubbel>.wrap{border-top:1px solid rgba(255,255,255,.12)!important}.v2-bubbel{padding-top:0!important}.aanvraag2{padding-bottom:70px!important}
/* v78: korter offerteformulier */
.av2-keuze{grid-column:1/-1;margin:-2px 0 2px;font-size:13.5px;font-weight:600;color:#3F4A60}
.av2-keuze b{color:var(--ink)}

/* v79: al het blauw als strakke bubbels, net als de footer */
.lint{display:none!important}
.hero{margin:10px 18px 0!important;border-radius:44px!important;overflow:hidden!important;background:#22365F!important;position:relative;isolation:isolate}
.hero::before{content:""!important;display:block!important;position:absolute!important;inset:0!important;-webkit-mask-image:none!important;mask-image:none!important;background:url("/ralfdroneartist2/hoogtelijnen-wit.svg") -180px -80px/1400px auto no-repeat!important;opacity:.4;z-index:-1;pointer-events:none}
.hero .vlaag{display:none!important}
.hero .golf{display:none!important}
.pick{margin:0 18px!important;border-radius:44px 44px 0 0!important;background:#22365F url("/ralfdroneartist2/hoogtelijnen-wit.svg") -220px -40px/1200px auto no-repeat!important;overflow:hidden}
.klanten{margin:0 18px!important;background:#22365F!important;border:0!important}
.tl{margin:0 18px!important;border-radius:0 0 44px 44px!important;background:#22365F url("/ralfdroneartist2/hoogtelijnen-wit.svg") right -260px bottom -120px/1200px auto no-repeat!important;overflow:hidden;padding-bottom:110px!important}
/* witte tekst hoort nu op elk formaat bij de blauwe bubbels */
@media (max-width:1100px){
  .tl .lede{color:rgba(255,255,255,.92)!important}
  .tl .lede strong{color:#fff!important}
  .tl .h2{color:#fff!important}
  .tl-spoed{color:rgba(255,255,255,.8)!important}
  .stap p{color:rgba(255,255,255,.88)!important}
  .stap h3{color:#fff!important}
}
@media (max-width:700px){
  .hero{margin:8px 10px 0!important;border-radius:30px!important}
  .pick{margin:0 10px!important;border-radius:30px 30px 0 0!important}
  .klanten{margin:0 10px!important}
  .tl{margin:0 10px!important;border-radius:0 0 30px 30px!important;padding-bottom:70px!important}
}

/* v80: hero alleen links blauw */
@media (min-width:1025px){
  .hero{background:#fff!important;margin:10px 18px 0!important;border-radius:0!important;overflow:visible!important}
  .hero::before{content:""!important;display:block!important;position:absolute!important;top:0!important;bottom:0!important;left:0!important;right:auto!important;
    width:min(58%,860px)!important;border-radius:44px!important;
    background:#22365F url("/ralfdroneartist2/hoogtelijnen-wit.svg") -180px -80px/1400px auto no-repeat!important;
    opacity:1!important;z-index:-1!important}
  .hero .hero-grid{position:relative;z-index:1}
  .hero .hero-l{padding:0 clamp(28px,3vw,56px) 0 clamp(28px,3vw,52px)}
  .hero .dots{filter:none}
}
@media (min-width:1025px){.hero{background:transparent!important}}
@media (min-width:1025px){.hero::before{z-index:0!important}.hero>.wrap,.hero .hero-grid{position:relative;z-index:1}.hero .deck,.hero-r{position:relative;z-index:1}}
/* v81: blauw hero-paneel via de bestaande .vlaag-span i.p.v. ::before */
@media (min-width:1025px){
  .hero::before{display:none!important}
  .hero .vlaag{display:block!important;position:absolute!important;left:0!important;top:0!important;bottom:0!important;right:auto!important;
    width:min(58%,860px)!important;height:auto!important;aspect-ratio:auto!important;border-radius:44px!important;
    background:#22365F url("/ralfdroneartist2/hoogtelijnen-wit.svg") -180px -80px/1400px auto no-repeat!important;
    opacity:1!important;z-index:0!important;pointer-events:none}
  .hero>.wrap{position:relative;z-index:1}
}

/* v82: bubbels precies zo breed als de header (1180px, gecentreerd) */
.hero,.pick,.klanten,.tl,.aanvraag2{width:min(100% - 36px,1180px)!important;margin-left:auto!important;margin-right:auto!important}
.voet2{padding-left:0!important;padding-right:0!important}
.v2-bubbel{width:min(100% - 36px,1180px);margin:0 auto}
.hero>.wrap,.pick>.wrap,.klanten>.wrap,.tl>.wrap,.aanvraag2>.wrap,.v2-bubbel>.wrap{max-width:100%!important;padding-left:clamp(20px,3vw,46px)!important;padding-right:clamp(20px,3vw,46px)!important}
@media (min-width:1025px){.hero .vlaag{width:min(56%,700px)!important}}
@media (max-width:700px){
  .hero,.pick,.klanten,.tl,.aanvraag2{width:calc(100% - 20px)!important}
  .v2-bubbel{width:calc(100% - 20px)}
  .hero>.wrap,.pick>.wrap,.klanten>.wrap,.tl>.wrap,.aanvraag2>.wrap,.v2-bubbel>.wrap{padding-left:18px!important;padding-right:18px!important}
}

/* v83: hero begint onder de header, zodat de menubalk vrij zweeft */
.hero{margin-top:calc(var(--hdr) + 18px)!important;padding-top:clamp(40px,4vw,70px)!important}
@media (min-width:1025px){
  .hero .vlaag{border-radius:44px!important}
  .hero{background:transparent!important}
}
@media (max-width:1024px){.hero{padding-top:clamp(28px,5vw,48px)!important}}
@media (max-width:700px){.hero{margin-top:calc(var(--hdr) + 12px)!important;padding-top:26px!important}}

/* v84: hero compacter */
@media (min-width:1025px){
  .hero{min-height:0!important;display:block!important;padding:clamp(34px,3vw,52px) 0 clamp(34px,3vw,52px)!important}
  .hero .hero-grid{align-items:center}
  .hero .lede{margin-bottom:24px}
  .hero .deck,.hero .hero-r{max-height:none}
}

/* v85: video overlapt het blauwe paneel bewust, i.p.v. er precies tegenaan */
@media (min-width:1025px){
  .hero [data-deck]{transform:translateX(-72px)}
  .hero .dots{transform:translateX(-72px)}
}

/* v86: header valt samen met de hero-bubbel + blauw blok in 'Over ons' */
@media (min-width:1025px){
  .hero{margin-top:8px!important;padding-top:calc(var(--hdr) + 22px)!important}
  .hero .golf{display:block!important;position:absolute!important;left:0!important;right:0!important;top:0!important;bottom:auto!important;
    width:auto!important;height:calc(var(--hdr) + 8px)!important;background:#22365F!important;border-radius:44px 44px 0 0!important;z-index:0}
  .hero .golf path{display:none}
  .hdr.op-hero .hdr-in{background:transparent!important;box-shadow:none!important;border-color:transparent!important}
  .hdr.op-hero::before{opacity:0!important}
}
/* Over ons: tekstkolom als blauw blok */
.over-grid>.rv.d1{background:#22365F url("/ralfdroneartist2/hoogtelijnen-wit.svg") right -260px top -160px/1100px auto no-repeat;border-radius:44px;padding:clamp(30px,3vw,52px);color:rgba(255,255,255,.9);align-self:center}
.over-grid>.rv.d1 .h2{color:#fff!important}
.over-grid>.rv.d1 .h2 em{color:var(--oranje)!important}
.over-grid>.rv.d1 .lede{color:rgba(255,255,255,.9)!important}
.over-grid>.rv.d1 .lede strong{color:#fff!important}
.over-grid>.rv.d1 .kicker{color:rgba(255,255,255,.78)!important}
.over-grid>.rv.d1 .ilink{color:#fff;background-image:linear-gradient(var(--oranje),var(--oranje))}
.over-grid>.rv.d1 .btn--lijn2{color:#fff!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)!important}
.over-grid>.rv.d1 .btn--lijn2:hover{color:#22365F!important}
@media (max-width:700px){.over-grid>.rv.d1{border-radius:28px;padding:26px 20px}}
/* v87: labels en links leesbaar nu 'Over ons' op wit staat */
.trio-l{color:var(--ink)!important}
.trio-l svg{color:var(--oranje)!important}
.over-grid>.rv.d1 .tlink,.over-grid>.rv.d1 .tlink:visited{color:#fff!important}
.over-grid>.rv.d1 .tlink svg{color:var(--oranje)!important}

/* v88: meer lucht tussen header en hero, en 'Over ons' ruimer */
@media (min-width:1025px){
  .hero{padding-top:calc(var(--hdr) + 58px)!important;padding-bottom:clamp(44px,3.6vw,62px)!important}
}
@media (min-width:1101px){
  .over{padding:130px 0 120px!important}
  .over-grid{grid-template-columns:.92fr 1.08fr!important;gap:clamp(60px,6vw,110px)!important;align-items:center!important}
  .over-grid>.rv.d1{padding:clamp(40px,3.4vw,62px)!important}
  .over-grid>.rv.d1 .h2{margin-bottom:18px!important}
  .over-grid>.rv.d1 .acts{margin-top:30px!important}
}
/* v89: nog meer lucht onder de header, plus een dunne scheiding */
@media (min-width:1025px){
  .hero{padding-top:calc(var(--hdr) + 104px)!important;padding-bottom:clamp(56px,4.4vw,80px)!important}
  .hero .golf{box-shadow:0 1px 0 rgba(255,255,255,.12)}
}
@media (min-width:768px) and (max-width:1024px){.hero{padding-top:calc(var(--hdr) + 60px)!important}}
/* v90: echte navy kopstrook over de volle breedte van de hero-bubbel */
.kopstrook{display:none}
@media (min-width:1025px){
  .kopstrook{display:block;position:absolute;left:0;right:0;top:0;height:calc(var(--hdr) + 10px);
    background:#22365F url("/ralfdroneartist2/hoogtelijnen-wit.svg") -180px -60px/1400px auto no-repeat;
    border-radius:44px 44px 0 0;z-index:0;pointer-events:none;box-shadow:0 1px 0 rgba(255,255,255,.1)}
  .hero .golf{display:none!important}
}

/* v91: hero weer volledig blauw (één bubbel, header bovenin) */
@media (min-width:1025px){
  .hero{background:#22365F url("/ralfdroneartist2/hoogtelijnen-wit.svg") -180px -80px/1400px auto no-repeat!important;
    border-radius:44px!important;overflow:hidden!important}
  .hero .vlaag,.kopstrook{display:none!important}
  .hero [data-deck],.hero .dots{transform:none!important}
  .hero{padding-top:calc(var(--hdr) + 84px)!important;padding-bottom:clamp(60px,4.6vw,86px)!important}
}
/* v92: geen donkere waas bij een open menu (de hero-bubbel werd dan tweekleurig) */
.scrim{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.mega{box-shadow:0 30px 60px rgba(12,20,40,.28)}
/* v93: megamenu als duidelijk eigen paneel, niet één vlak met de hero */
.mega{background:#2C4375!important;border:1px solid rgba(255,255,255,.16)!important;border-top:0!important;
  border-radius:0 0 28px 28px!important;box-shadow:0 34px 70px rgba(8,15,32,.5)!important}
.mega .mega-kop,.mega h3{color:#fff}
.hdr .nav>div.open .nav-a{color:#fff}
/* v94: header en uitklapmenu als eigen, donkerder paneel binnen de hero-bubbel */
@media (min-width:1025px){
  .hdr .hdr-in,.hdr.op-hero .hdr-in{background:#18294B!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 10px 30px rgba(8,15,32,.25)!important}
  .hdr:has(.nav>div.open) .hdr-in{border-bottom-color:transparent!important;box-shadow:none!important}
  .mega{background:#18294B!important;border:1px solid rgba(255,255,255,.08)!important;border-top:0!important;
    border-radius:0 0 18px 18px!important;box-shadow:0 34px 70px rgba(8,15,32,.45)!important}
}
/* v95: uitklapmenu wit, duidelijk leesbaar en duidelijk een eigen paneel */
@media (min-width:1025px){
  .mega{background:#fff!important;border:1px solid rgba(19,29,51,.1)!important;border-top:0!important;
    border-radius:0 0 22px 22px!important;box-shadow:0 30px 60px rgba(8,15,32,.35)!important}
  .mega .mega-kop{color:#5E6780!important}
  .mega-feat b{color:var(--ink)!important}
  .mega-feat span{color:var(--oranje-t)!important}
  .mega-links a{color:var(--ink)!important;border-bottom-color:var(--lijn)!important}
  .mega-links a small{color:#5E6780!important}
  .mega-links a i{background:var(--oranje-l)!important;color:var(--oranje-t)!important}
  .mega-links a:hover i{background:var(--oranje)!important;color:var(--ink)!important}
  .mega-card{background:#F3F5F9!important}
  .mega-card .big{color:var(--ink)!important}
  .mega-card .big i{background:#fff!important;color:var(--hblauw)!important}
  .mega-card p{color:#3F4A60!important}
  .mega-card a.wa{color:#1EA855!important}
}

/* v96 ingetrokken: FAQ blijft wit */

/* v97: header en hero exact dezelfde vorm (radius 44, zelfde rand) */
@media (min-width:1025px){
  .hdr{padding-top:8px}
  .hdr-in{border-radius:44px!important}
  .hdr:has(.nav>div.open) .hdr-in{border-radius:44px 44px 0 0!important}
  .mega{border-radius:0 0 44px 44px!important}
  .hdr.op-hero .hdr-in{border-color:transparent!important;box-shadow:none!important;background:#22365F!important}
  .hdr.klein .hdr-in{border-radius:44px!important}
}

/* v98: header + uitklapmenu zijn één donker paneel over de hero */
@media (min-width:1025px){
  .hdr .hdr-in,.hdr.op-hero .hdr-in,.hdr.klein .hdr-in{background:#152344!important;border:1px solid rgba(255,255,255,.1)!important}
  .hdr:has(.nav>div.open) .hdr-in{border-bottom-color:transparent!important;border-radius:44px 44px 0 0!important}
  .mega{background:#152344!important;border:1px solid rgba(255,255,255,.1)!important;border-top:0!important;
    border-radius:0 0 44px 44px!important;box-shadow:0 40px 80px rgba(6,11,26,.55)!important}
  .mega .mega-kop{color:rgba(255,255,255,.55)!important}
  .mega-feat b{color:#fff!important}
  .mega-feat span{color:var(--oranje)!important}
  .mega-links a{color:#fff!important;border-bottom-color:rgba(255,255,255,.12)!important}
  .mega-links a small{color:rgba(255,255,255,.6)!important}
  .mega-links a i{background:rgba(255,255,255,.1)!important;color:var(--oranje)!important}
  .mega-links a:hover i{background:var(--oranje)!important;color:var(--ink)!important}
  .mega-card{background:rgba(255,255,255,.07)!important}
  .mega-card .big{color:#fff!important}
  .mega-card .big i{background:rgba(255,255,255,.12)!important;color:var(--oranje)!important}
  .mega-card p{color:rgba(255,255,255,.66)!important}
  .mega-card a.wa{color:#3DDC84!important}
}
/* v99: hero start exact op dezelfde hoogte als de headerbalk */
@media (min-width:1025px){.hdr{padding-top:0!important}.hero{margin-top:14px!important}}

/* v100: FAQ-kop redactioneel i.p.v. gecentreerd blok */
.faq3-kop{display:flex!important;justify-content:space-between;align-items:flex-end;gap:48px;
  max-width:1080px!important;margin:0 auto 46px!important;padding-top:6px;text-align:left!important}
.faq3-kop .kicker{justify-content:flex-start!important;margin-bottom:12px}
.faq3-kop .h2{text-align:left!important;margin:0!important;max-width:14ch;font-size:clamp(36px,3.4vw,52px)!important}
.faq3-kop .lede{margin:0!important;max-width:42ch;text-align:left!important;font-size:15.5px}
@media (max-width:900px){.faq3-kop{flex-direction:column;align-items:flex-start;gap:14px}.faq3-kop .h2{max-width:none}}
/* v101: FAQ-kop netjes in twee kolommen (kicker boven de kop) */
.faq3-kop{display:grid!important;grid-template-columns:1.15fr .85fr;column-gap:56px;row-gap:10px;align-items:end}
.faq3-kop .kicker{grid-column:1;grid-row:1}
.faq3-kop .h2{grid-column:1;grid-row:2;max-width:none!important}
.faq3-kop .lede{grid-column:2;grid-row:2;align-self:end;padding-bottom:6px}
@media (max-width:900px){.faq3-kop{grid-template-columns:1fr}.faq3-kop .lede{grid-column:1;grid-row:3;padding-bottom:0}}

/* v102: bovenaan de pagina is er maar één vorm: de hero-bubbel */
@media (min-width:1025px){
  .hdr.op-hero .hdr-in{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
  .hdr.op-hero:has(.nav>div.open) .hdr-in{background:#152344!important;border-color:rgba(255,255,255,.1)!important}
}

/* v103: open menu = dezelfde blauwtint als de hero, dus één doorlopende vorm */
@media (min-width:1025px){
  .hdr.op-hero:has(.nav>div.open) .hdr-in{background:#22365F!important;border-color:transparent!important}
  .hdr.op-hero .mega{background:#22365F!important;border-color:transparent!important;
    box-shadow:0 34px 60px rgba(8,15,32,.45)!important}
}
/* v104: hoogtelijnen lopen door in het open menu, zodat het één vlak lijkt */
@media (min-width:1025px){
  .hdr.op-hero .mega{background:#22365F url("/ralfdroneartist2/hoogtelijnen-wit.svg") -180px -150px/1400px auto no-repeat!important}
}

/* v105: FAQ als blauwe bubbel met sticky linkerkolom */
.faq5{background:#22365F url("/ralfdroneartist2/hoogtelijnen-wit.svg") right -240px top -160px/1300px auto no-repeat!important;
  width:min(100% - 36px,1180px);margin:100px auto;border-radius:44px;padding:74px 0 76px!important}
.faq5>.wrap{max-width:100%!important;padding-left:clamp(22px,3.4vw,52px)!important;padding-right:clamp(22px,3.4vw,52px)!important}
.faq5-grid{display:grid!important;grid-template-columns:.82fr 1.18fr;gap:clamp(40px,5vw,80px);align-items:start}
.faq5-l{position:sticky;top:112px}
.faq5-l .kicker{color:rgba(255,255,255,.72)!important;justify-content:flex-start!important}
.faq5-l .h2{color:#fff!important;text-align:left!important;margin:0 0 16px!important;font-size:clamp(34px,3.2vw,50px)!important;max-width:12ch}
.faq5-l .h2 em{color:var(--oranje)!important}
.faq5-l .lede{color:rgba(255,255,255,.85)!important;text-align:left!important;margin:0;max-width:38ch;font-size:15.5px}
.faq5-l .ilink{color:#fff;background-image:linear-gradient(var(--oranje),var(--oranje))}
.faq5-hulp{display:flex;align-items:center;gap:14px;margin:34px 0 18px;padding:16px;border-radius:18px;background:rgba(255,255,255,.07)}
.faq5-hulp img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;border:2px solid rgba(255,255,255,.25)}
.faq5-hulp b{display:block;color:#fff;font-size:15.5px}
.faq5-hulp span{display:block;color:rgba(255,255,255,.7);font-size:13.5px;font-weight:500}
.faq5-acts{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.faq5-acts .tlink{color:#fff!important}
.faq5-acts .tlink svg{color:var(--oranje)!important}
/* vragen op blauw */
.faq5 .faq4{max-width:none;gap:12px}
.faq5 .faq4-item{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.14)!important}
.faq5 .faq4-item .faq3-v{color:#fff!important}
.faq5 .faq4-item summary i{background:rgba(255,255,255,.14)!important;border:0!important}
.faq5 .faq4-item summary i::before,.faq5 .faq4-item summary i::after{background:#fff!important}
.faq5 .faq4-item:not([open]):hover{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.3)!important}
.faq5 .faq4-item[open]{background:#fff!important;border-color:#fff!important}
.faq5 .faq4-item[open] .faq3-v{color:var(--ink)!important}
.faq5 .faq4-item[open] summary i{background:var(--oranje)!important}
.faq5 .faq4-item[open] summary i::before,.faq5 .faq4-item[open] summary i::after{background:var(--ink)!important}
.faq5 .faq4-a p{color:#3F4A60!important;padding:0 40px 24px 88px!important}
.faq5 .faq4-a .ilink{color:var(--ink)!important}
.faq5 .faq4-item summary{grid-template-columns:44px 1fr 34px;padding:20px 22px!important}
@media (max-width:1000px){
  .faq5-grid{grid-template-columns:1fr;gap:34px}
  .faq5-l{position:static}
  .faq5-l .h2{max-width:none}
}
@media (max-width:700px){
  .faq5{width:calc(100% - 20px);margin:60px auto;border-radius:30px;padding:52px 0 56px!important}
  .faq5>.wrap{padding-left:18px!important;padding-right:18px!important}
  .faq5 .faq4-a p{padding:0 16px 20px 60px!important}
  .faq5 .faq4-item summary{grid-template-columns:34px 1fr 30px;padding:16px 14px!important}
}
/* v105b: id-regel overrulen zodat de FAQ-bubbel blauw is */
.faq5#faq{background:#22365F url("/ralfdroneartist2/hoogtelijnen-wit.svg") right -240px top -160px/1300px auto no-repeat!important;padding:74px 0 76px!important;display:block!important}

/* v106: WhatsApp-knop rechtsonder, groter en converterender */
.wa-hoek{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.wa-pill{position:static!important;display:flex!important;align-items:center;gap:12px;padding:10px 20px 10px 10px!important;
  background:#25D366!important;border-radius:999px!important;text-decoration:none;color:#fff!important;
  box-shadow:0 16px 34px rgba(16,110,55,.38)!important;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,background .3s}
.wa-pill:hover{transform:translateY(-3px) scale(1.02);background:#20c15c!important;box-shadow:0 22px 42px rgba(16,110,55,.46)!important}
.wa-ava{position:relative;flex:none;width:52px;height:52px}
.wa-ava img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.85);display:block}
.wa-ava i{position:absolute;right:-3px;bottom:-3px;width:24px;height:24px;border-radius:50%;background:#fff;color:#25D366;display:grid;place-items:center;border:2px solid #25D366}
.wa-ava i svg{width:14px;height:14px}
.wa-ava::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(255,255,255,.55);animation:waPuls 2.6s ease-out infinite}
@keyframes waPuls{0%{transform:scale(.92);opacity:.8}70%{transform:scale(1.18);opacity:0}100%{opacity:0}}
.wa-t{display:flex;flex-direction:column;line-height:1.15}
.wa-t small{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.92)!important}
.wa-t b{font-family:"Gobold","Arial Narrow",sans-serif;font-weight:400;font-size:19px;letter-spacing:.02em;color:#fff!important;margin-top:3px}
.wa-tip{position:relative;display:flex;gap:12px;max-width:300px;padding:16px 18px;border-radius:20px 20px 4px 20px;background:#fff;
  box-shadow:0 20px 40px rgba(12,20,40,.22);animation:waIn .5s cubic-bezier(.2,.8,.3,1)}
.wa-tip[hidden]{display:none}
.wa-tip img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
.wa-tip b{display:block;font-size:14px;color:var(--ink)}
.wa-tip p{margin:2px 0 0;font-size:13.5px;line-height:1.5;font-weight:500;color:#3F4A60}
.wa-tip-x{position:absolute;top:6px;right:8px;border:0;background:none;font-size:18px;line-height:1;color:#98a1b3;cursor:pointer}
@keyframes waIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:700px){
  .wa-hoek{right:12px;bottom:86px;gap:10px}
  .wa-pill{padding:8px 16px 8px 8px!important}
  .wa-ava,.wa-ava img{width:44px;height:44px}
  .wa-t small{font-size:10.5px}
  .wa-t b{font-size:16px}
  .wa-tip{max-width:min(78vw,280px)}
}
@media (prefers-reduced-motion:reduce){.wa-ava::after{animation:none}}
/* v106b: badge klein houden (oude .wa-pill i-regels overrulen) */
.wa-hoek .wa-pill .wa-ava i{width:24px!important;height:24px!important;min-width:0!important;padding:0!important;right:-3px!important;bottom:-3px!important;left:auto!important;top:auto!important;border-radius:50%!important;background:#fff!important;color:#25D366!important;border:2px solid #25D366!important;box-shadow:none!important}
.wa-hoek .wa-pill .wa-ava i svg{width:13px!important;height:13px!important}
.wa-hoek .wa-pill .wa-ava img{position:relative;z-index:1}
@media (max-width:700px){.wa-hoek .wa-pill .wa-ava i{width:21px!important;height:21px!important}}

/* v107: tekstsectie voor lange SEO-content (CMS-blok) */
.tekst2{padding:90px 0;background:#fff}
.tekst2 .wrap{max-width:100%}
.tekst2 .h2{font-size:clamp(30px,3.2vw,48px);margin:10px 0 22px}
.tekst2-in{max-width:70ch;font-size:16px;line-height:1.75;font-weight:500;color:#3F4A60}
.tekst2-in h2{font-family:"Gobold","Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(24px,2.4vw,34px);color:var(--ink);margin:36px 0 12px}
.tekst2-in h3{font-family:"Gobold","Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;font-size:21px;color:var(--ink);margin:28px 0 10px}
.tekst2-in p{margin:0 0 16px}
.tekst2-in ul{margin:0 0 18px;padding-left:22px}
.tekst2-in li{margin:0 0 8px}
.tekst2-in strong{color:var(--ink)}
.tekst2-in a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--oranje);text-underline-offset:3px}
.tekst2--breed .tekst2-in{max-width:none;column-count:2;column-gap:56px}
.tekst2--donker{background:transparent;padding:0}
.tekst2--donker .wrap{width:min(100% - 36px,1180px);margin:40px auto;padding:70px clamp(22px,3.4vw,52px);border-radius:44px;background:#22365F url("/ralfdroneartist2/hoogtelijnen-wit.svg") right -240px top -160px/1300px auto no-repeat;color:#fff}
.tekst2--donker .h2,.tekst2--donker .tekst2-in strong,.tekst2--donker .tekst2-in h2,.tekst2--donker .tekst2-in h3{color:#fff}
.tekst2--donker .tekst2-in{color:rgba(255,255,255,.88)}
.tekst2--donker .tekst2-in a{color:#fff}
@media (max-width:900px){.tekst2{padding:60px 0}.tekst2--breed .tekst2-in{column-count:1}.tekst2--donker .wrap{padding:44px 20px;border-radius:30px}}

/* v108: langere koppen (SEO-pagina's) mogen afbreken i.p.v. buiten beeld lopen */
.h1--lang{font-size:clamp(30px,3.6vw,52px)!important}
.h1--lang .r{display:block;overflow:visible}
.h1--lang .r span{white-space:normal;display:inline}
@media (max-width:700px){.h1--lang{font-size:min(8.2vw,34px)!important}.h1--lang .r span{white-space:normal!important}}

/* WhatsApp-ballon zweeft boven de knop: bij tonen en verbergen verschuift er niets (CLS); zelfde plek als eerst */
.wa-tip{position:absolute;right:0;bottom:calc(100% + 12px)}
@media (max-width:700px){.wa-tip{bottom:calc(100% + 10px)}}

/* Telefoon: WhatsApp als ronde fotoknop, zodat hij de hero-video en de tekst niet afdekt (de tekst blijft voor schermlezers).
   Bovenaan staat hij laag in de hoek; zodra de offertebalk onderin verschijnt, schuift hij erboven. */
@media (max-width:700px){
  .wa-hoek{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));transition:bottom .35s}
  body:has(.mbalk.aan) .wa-hoek{bottom:calc(92px + env(safe-area-inset-bottom))}
  .wa-hoek .wa-pill{padding:4px!important;gap:0!important}
  .wa-hoek .wa-pill::before,.wa-hoek .wa-pill::after{display:none}
  .wa-hoek .wa-t{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .wa-hoek .wa-ava,.wa-hoek .wa-ava img{width:52px;height:52px}
}
@media (max-width:700px){.wa-hoek .wa-tip{width:min(78vw,280px);box-sizing:border-box}}

/* Over ons tot 1100px: de tekstkolom is daar opgelost in het raster (display:contents) om kop, foto's en tekst te mengen,
   dus het blauwe vlak valt weg. De tekst was nog wit en daardoor onzichtbaar; hier weer donker op wit. */
@media (max-width:1100px){
  .over-grid>.rv.d1 .kicker{color:var(--blauw-3)!important}
  .over-grid>.rv.d1 .h2{color:var(--ink)!important}
  .over-grid>.rv.d1 .lede{color:#3F4A60!important}
  .over-grid>.rv.d1 .lede strong{color:var(--ink)!important}
  .over-grid>.rv.d1 .ilink{color:var(--ink)}
  .over-grid>.rv.d1 .btn--lijn2{color:var(--ink)!important;box-shadow:inset 0 0 0 1.5px var(--ink)!important}
  .over-grid>.rv.d1 .btn--lijn2:hover{color:#fff!important}
  .over-grid>.rv.d1 .tlink,.over-grid>.rv.d1 .tlink:visited{color:var(--ink)!important}
}
/* Zo werkt het tot 1100px: het blok is ook hier blauw, dus dezelfde kleuren als op desktop (waren nog voor wit: donkeroranje en grijsblauw) */
@media (max-width:1100px){
  .tl .tl-kop .kicker{color:rgba(255,255,255,.75)!important}
  .tl .stap-tijd{color:var(--oranje)!important}
  .tl .tl-spoed b{color:var(--oranje)!important}
}

/* Menu (21-9-2026): megamenu zonder contactkaart, dus twee kolommen: fotokaart en lijst */
.mega-in{grid-template-columns:300px 1fr!important}
@media (max-width:1280px){.mega-in{grid-template-columns:260px 1fr!important}}
/* mobiel menu open: de zwevende WhatsApp-knop en ballon weg, het menu heeft zelf al een WhatsApp-knop */
html.menu-open .wa-hoek{opacity:0;visibility:hidden;pointer-events:none}
/* mobiel menu: offerte, bellen en WhatsApp blijven onderin in beeld, ook met een submenu open */
@media (max-width:1024px){
  body .mnav-voet{position:sticky;bottom:0;z-index:1;background:#22365F;margin-left:-26px;margin-right:-26px;padding:18px 26px 6px!important;box-shadow:0 -18px 24px -6px #22365F}
}