@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,500;0,600;0,700;1,600&family=Karla:wght@400;500;700&display=swap');
#brx-header,#brx-footer,.hentry>h1{display:none!important}
html{scroll-behavior:smooth}
body{background:#fff!important;margin:0}
body>article,body>main,body>#brx-content,.hentry{width:100%!important;flex:1 1 100%!important}
#brx-content,main,.hentry{background:#fff!important;padding:0!important;max-width:none!important;margin:0!important}
.hentry section,section.hentry{margin:0!important}

.vg{--ink:#1B2430;--ink2:#454B5E;--zacht:#6E7488;--zand:#F4F3F0;--zand2:#E9E7E2;
    --lijn:#E2E1DD;--brons:#A9762F;--brons2:#C08F45;--vuur:#E9A13B;--vuur2:#F2B357;
    --diep:#111922;
    font-family:'Karla','Segoe UI',system-ui,sans-serif;color:var(--ink);
    font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
.vg *{box-sizing:border-box}
/* Rasterkolommen krimpen standaard niet onder de breedte van hun inhoud
   (min-width:auto). Een tabel met min-width:520px duwde daardoor de hele kolom
   en dus de pagina breder dan het scherm; de scrollbalk om de tabel deed dan
   niets meer. Gemeten op 19 aug: 158 tot 295 pixels overloop op bijna elke
   pagina bij 390px breed. Dit is de vaste oplossing. */
.vg .duo>*,.vg .wij>*,.vg .rondwerk>*,.vg .revwerk>*,.vg .hero .in>*,
.vg .kantlijn>*,.vg .titelrij>*,.vg .tegels>*,.vg .prijzen>*,.vg .routes>*,
.vg .vkaarten>*,.vg .teamrij>*,.vg .erkrij>*,.vg .strip>*,.vg .cases>*,
.vg .stappenrij>*,.vg .band>*,.vg .springnav .in>*{min-width:0}
.vg .tabelwrap{max-width:100%;min-width:0}
.vg .springnav .in{min-width:0}
/* ── vertrouwensband boven de voet ─────────────────────────────────────── */
.vg .vtband{background:var(--zand);border-top:1px solid var(--lijn);padding:38px 0}
.vg .vtrij{display:grid;grid-template-columns:repeat(6,1fr);gap:26px}
.vg .vtrij>*{min-width:0}
.vg .vt{border-left:3px solid var(--vuur);padding-left:14px}
.vg .vt b{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;
    letter-spacing:-.02em;color:var(--ink);margin-bottom:5px}
.vg .vt span{display:block;font-size:13.5px;line-height:1.5;color:var(--ink2)}

/* ── de voet: donkere grond, dus witte tekst ───────────────────────────── */
.vg .voet{background:var(--diep);color:#E8EAEE;padding:0 0 30px;margin-top:0}
.vg .voet a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22)}
.vg .voet a:hover{border-bottom-color:var(--vuur);color:var(--vuur)}

/* contactblok met formulier */
.vg .voetkop-blok{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;
    padding:68px 0 56px;border-bottom:1px solid rgba(255,255,255,.13)}
.vg .voetkop-blok>*{min-width:0}
.vg .voet .oog{color:var(--vuur)!important}
.vg .voet .vk-links h2{color:#fff!important;font-size:clamp(28px,3.2vw,40px)!important;
    line-height:1.1!important;margin:10px 0 18px!important}
.vg .voet .vk-lood{font-size:17px!important;line-height:1.6!important;color:#BFC5CF!important;
    max-width:44ch;margin:0 0 26px!important}
.vg .vk-direct{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.vg .voet .vk-groot{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(24px,2.6vw,32px);
    letter-spacing:-.02em;color:#fff;border-bottom:0}
.vg .voet .vk-groot:hover{color:var(--vuur)}
.vg .vk-tijd{font-size:14px;color:#98A0AC}
.vg .vk-knoppen{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.vg .voet .knop.rand{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.32)}
.vg .voet .knop.rand:hover{border-color:var(--vuur);color:var(--vuur)}
.vg .voet .knop{border-bottom:0}
.vg .voet .vk-adres{font-size:14.5px!important;color:#98A0AC!important;line-height:1.6!important;
    margin:0!important}

/* het formulier */
.vg .vk-form{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
    border-radius:16px;padding:28px}
.vg .voet .vf-kop{font-family:'Archivo',sans-serif;font-weight:700;font-size:18px!important;
    color:#fff!important;margin:0 0 18px!important}
.vg .vk-form .veld{margin-bottom:13px}
.vg .vk-form label{display:block;font-size:12.5px;font-weight:600;color:#BFC5CF;
    margin-bottom:5px;letter-spacing:.02em}
.vg .vk-form label span{font-weight:400;color:#7F8794}
.vg .voet .vk-form input,.vg .voet .vk-form select,.vg .voet .vk-form textarea{
    width:100%;padding:12px 14px;border-radius:9px;border:1px solid rgba(255,255,255,.28);
    background:#fff;color:var(--ink);font-family:'Karla',sans-serif;font-size:15px;
    resize:vertical;box-shadow:none}
.vg .voet .vk-form input::placeholder,.vg .voet .vk-form textarea::placeholder{color:#8A909C}
.vg .voet .vk-form input:focus,.vg .voet .vk-form select:focus,
.vg .voet .vk-form textarea:focus{outline:0;background:#fff;color:var(--ink);
    border-color:var(--vuur);box-shadow:0 0 0 3px rgba(233,161,59,.28)}
.vg .voet .vk-form select option{background:#fff;color:var(--ink)}
.vg .knop.breed{width:100%;justify-content:center;margin-top:4px}
.vg .voet .vf-fout{display:none;font-size:13.5px!important;color:#FFB4A8!important;
    margin:0 0 10px!important}
.vg .voet .vf-fout.aan{display:block}
.vg .voet .vf-melding{display:none;margin:14px 0 0!important;font-size:14.5px!important;
    color:#BFC5CF!important;line-height:1.5!important}
.vg .voet .vf-melding.aan{display:block}
.vg .voet .vf-melding b{display:block;color:var(--vuur);font-family:'Archivo',sans-serif;
    font-size:16px;margin-bottom:3px}
.vg .voet .vf-fijn{font-size:12.5px!important;color:#79818E!important;line-height:1.5!important;
    margin:14px 0 0!important}

/* linkkolommen */
.vg .voet .kol{display:grid;grid-template-columns:repeat(5,1fr);gap:34px;padding:48px 0 40px;
    border-bottom:1px solid rgba(255,255,255,.13)}
.vg .voet .kol>*{min-width:0}
.vg .voet .voetkop{font-family:'Archivo',sans-serif;font-weight:700;font-size:13px!important;
    letter-spacing:.08em;text-transform:uppercase;color:var(--vuur)!important;
    margin:0 0 14px!important}
.vg .voet .kol ul{list-style:none;margin:0;padding:0}
.vg .voet .kol li{margin-bottom:9px;font-size:14.5px!important;line-height:1.45!important}
.vg .voet .kol a{color:#C6CCD5;border-bottom:0}
.vg .voet .kol a:hover{color:var(--vuur)}

/* onderbalk */
.vg .onderbalk{display:grid;grid-template-columns:1fr 1.25fr;gap:44px;padding-top:26px}
.vg .onderbalk>*{min-width:0}
.vg .voet .onderbalk p{font-size:13px!important;line-height:1.6!important;color:#79818E!important;
    margin:0!important}
.vg .voet .onderbalk b{color:#BFC5CF}

@media(max-width:1180px){
.vg .vtrij{grid-template-columns:repeat(3,1fr);gap:22px}
.vg .voet .kol{grid-template-columns:repeat(3,1fr);gap:28px}
}
@media(max-width:900px){
.vg .voetkop-blok{grid-template-columns:1fr;gap:36px;padding:48px 0 40px}
.vg .onderbalk{grid-template-columns:1fr;gap:16px}
}
@media(max-width:640px){
.vg .vtband{padding:30px 0}
.vg .vtrij{grid-template-columns:1fr 1fr;gap:18px}
.vg .vt{padding-left:11px}
.vg .vt b{font-size:15.5px}
.vg .vt span{font-size:12.5px}
.vg .voet .kol{grid-template-columns:1fr 1fr;gap:24px;padding:36px 0 30px}
.vg .vk-form{padding:22px}
}
@media(max-width:420px){
.vg .vtrij{grid-template-columns:1fr}
.vg .voet .kol{grid-template-columns:1fr}
}

.vg .vk-beeld{margin:30px 0 0}
.vg .vk-beeld img{width:100%;height:230px;object-fit:cover;object-position:55% 36%;
    border-radius:14px;display:block}
.vg .voet .vk-beeld figcaption{font-size:13px!important;color:#79818E!important;
    margin:10px 0 0!important;line-height:1.5!important}
@media(max-width:900px){.vg .vk-beeld img{height:190px}}

@media(max-width:760px){
.vg .hero .heroFoto{object-position:48% 26%!important}
}

.vg .taalwissel{font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;
    letter-spacing:.06em;border:1px solid var(--lijn);border-radius:999px;padding:5px 11px}
.vg .kop.opFoto .taalwissel{border-color:rgba(255,255,255,.35)}

/* ── zoeken ────────────────────────────────────────────────────────────── */
.vg .zoekbalk{position:relative;margin:0 0 10px}
.vg .zoekbalk input{width:100%;padding:20px 22px 20px 56px;font-size:19px;
    font-family:'Karla',sans-serif;color:var(--ink);background:#fff;
    border:2px solid var(--lijn);border-radius:14px}
.vg .zoekbalk input:focus{outline:0;border-color:var(--vuur);
    box-shadow:0 0 0 4px rgba(233,161,59,.2)}
.vg .zoekbalk svg{position:absolute;left:20px;top:50%;transform:translateY(-50%);
    color:var(--zacht);pointer-events:none}
.vg .zsnelrij{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.vg .zsnel{font-size:14px;padding:7px 14px;border:1px solid var(--lijn);border-radius:999px;
    background:#fff;color:var(--ink2);text-decoration:none;cursor:pointer}
.vg .zsnel:hover{border-color:var(--vuur);color:var(--ink)}
.vg .ztel{font-size:14.5px!important;color:var(--zacht)!important;margin:0 0 18px!important}
.vg .zuit{display:grid;gap:12px}
.vg .ztreffer{display:block;padding:18px 20px;border:1px solid var(--lijn);border-radius:13px;
    background:#fff;text-decoration:none;transition:border-color .15s}
.vg .ztreffer:hover{border-color:var(--vuur)}
.vg .ztreffer b{display:block;font-family:'Archivo',sans-serif;font-size:18px;
    letter-spacing:-.015em;color:var(--ink);margin-bottom:5px}
.vg .ztaal{display:inline-block;margin-left:9px;font-family:'Karla',sans-serif;font-size:11.5px;
    font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brons);
    border:1px solid var(--lijn);border-radius:999px;padding:2px 8px;vertical-align:middle}
.vg .zom{display:block;font-size:15px;line-height:1.5;color:var(--ink2);margin-bottom:7px}
.vg .zurl{display:block;font-size:12.5px;color:var(--zacht)}
@media(max-width:600px){
.vg .zoekbalk input{padding:16px 16px 16px 48px;font-size:17px}
.vg .zoekbalk svg{left:16px}
.vg .ztreffer{padding:15px 16px}
}

.vg .topzoek{display:inline-flex;align-items:center;gap:6px;margin-right:16px}

.vg .topzoek svg{opacity:.85}

/* De kaarttitel is de link; .lees is nu alleen nog een visueel duwtje en de
   .dek-laag vangt de klik op de hele kaart. */
.vg .vkaart h3 a{color:inherit;text-decoration:none}
.vg .vkaart:hover h3 a{color:var(--brons)}

/* ── eigendomstabel: onze kolom springt eruit ──────────────────────────── */
.vg table.eigendom td.wij,.vg table.eigendom th.wij{background:rgba(233,161,59,.13)}
.vg table.eigendom th.wij{color:var(--ink)}
.vg table.eigendom td:first-child{font-weight:600;color:var(--ink2)}

.vg .auteur.geenfoto{padding-left:0}
.vg .auteur.geenfoto:before{content:"";display:block;width:3px;align-self:stretch;
    background:var(--vuur);border-radius:2px;margin-right:16px}

/* ── megamenu in kolommen ──────────────────────────────────────────────── */
.vg .sub.breed{width:min(1080px,calc(100vw - 48px));left:50%;transform:translateX(-50%)}
.vg .subkolommen{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 26px}
.vg .subkolommen>*{min-width:0}
.vg .subkop{font-family:'Archivo',sans-serif;font-size:11.5px!important;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:var(--brons)!important;
    margin:0 0 6px!important;padding:0 12px}
.vg .subkolom ul{margin:0;padding:0;list-style:none}
.vg .sub.breed li a span{font-size:12.5px}
@media(max-width:1180px){.vg .subkolommen{grid-template-columns:repeat(2,1fr)}}
.vg .msubkop{font-family:'Archivo',sans-serif;font-size:11.5px!important;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:var(--brons)!important;
    margin:16px 0 4px!important}

/* ── hero: hij paste niet in het venster ───────────────────────────────── */
/* was 1087px bij een venster van 900. Nu blijft hij eronder, zodat je ziet  */
/* dat er meer volgt. Dat is precies wat een eerste sectie moet doen.        */
.vg .hero .in{padding-top:58px;padding-bottom:58px}
.vg .hero.licht .in{padding-top:52px;padding-bottom:52px}
.vg .hero h1{font-size:clamp(30px,4.4vw,50px)!important}
.vg .hero .lood{font-size:17.5px!important;max-width:52ch}
.vg .hero .heroBeeld img{max-height:400px}
@media(max-width:980px){
.vg .hero .in{padding-top:40px;padding-bottom:40px}
.vg .hero .heroBeeld img{max-height:260px}
}

/* ── monteursquote: een gezicht tussen de tekst ────────────────────────── */
.vg .quoteband{padding:38px 0}
.vg .mquote{display:flex;gap:26px;align-items:center;margin:0;
    background:var(--zand);border-left:4px solid var(--vuur);
    border-radius:0 16px 16px 0;padding:26px 30px}
.vg .mquote>*{min-width:0}
.vg .mquote img{width:104px;height:104px;border-radius:50%;object-fit:cover;
    flex:none;background:#fff;border:3px solid #fff;box-shadow:0 2px 10px rgba(27,36,48,.1)}
.vg .mquote blockquote{margin:0}
.vg .mquote p{font-family:'Archivo',sans-serif;font-size:20px!important;line-height:1.4!important;
    letter-spacing:-.015em;color:var(--ink)!important;margin:0 0 10px!important;max-width:52ch}
.vg .mquote figcaption{font-size:13.5px;color:var(--zacht);letter-spacing:.02em}
@media(max-width:680px){
.vg .mquote{flex-direction:column;align-items:flex-start;gap:16px;padding:22px}
.vg .mquote img{width:78px;height:78px}
.vg .mquote p{font-size:17.5px!important}
}

/* ── kleurband: even iets anders voor het oog ──────────────────────────── */
.vg .kleurband{background:var(--vuur);padding:34px 0;margin:0}
.vg .kleurband p{font-family:'Archivo',sans-serif;font-weight:700;
    font-size:clamp(20px,2.6vw,29px)!important;line-height:1.25!important;letter-spacing:-.02em;
    color:#1B2430!important;margin:0!important;max-width:34ch}
.vg .kleurband span{display:block;margin-top:9px;font-size:15px;color:#5a4a2c}

/* ── thema-reset ───────────────────────────────────────────────────────────
   Bricks zet met "section > div:where(...)" elke sectie-container in een
   flexbox met align-items:flex-start en een eigen gap. Dat sloopt de breedte
   van alles met een min-width erin (tabellen) en voegt ruimte toe die wij
   nergens vragen. Hun selector weegt 0,0,2; deze weegt 0,1,2 en wint dus,
   terwijl al onze eigen .hero .in / .top .in / .rail .in (0,3,0) er overheen
   blijven gaan. Daarom staat hier geen !important. */
.vg section>div{display:block;align-items:normal;gap:0}
.vg .in{max-width:1200px;margin:0 auto;padding:0 26px}
.vg .in-s{max-width:830px;margin:0 auto;padding:0 26px}
.vg h1,.vg h2,.vg h3,.vg h4{font-family:'Archivo','Segoe UI',system-ui,sans-serif!important;
    font-weight:700!important;letter-spacing:-0.025em!important;line-height:1.06!important;
    margin:0 0 .5em!important;text-wrap:balance;color:var(--ink)}
.vg h1{font-size:clamp(36px,5vw,72px)!important;line-height:1.02!important;
    letter-spacing:-0.032em!important}
.vg h2{font-size:clamp(26px,2.6vw,34px)!important}
/* kernsecties krijgen een grotere kop dan tussensecties */
.vg .sec.kern h2,.vg .slot h2{font-size:clamp(30px,3.8vw,52px)!important;
    letter-spacing:-0.032em!important}
.vg h3{font-size:clamp(19px,1.5vw,23px)!important;letter-spacing:-0.014em!important}
.vg h1 em,.vg h2 em{font-style:italic;font-weight:600!important}
.vg p,.vg li{font-size:17px!important;line-height:1.62!important;font-family:'Karla','Segoe UI',sans-serif!important}
.vg p{margin:0 0 1.05em!important}
.vg a{color:inherit}
.vg .oog{font-family:'Archivo',sans-serif!important;font-size:12px!important;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;color:var(--brons);margin:0 0 15px;display:block}
.vg .oog:before{content:"";display:inline-block;width:22px;height:2px;
    background:currentColor;vertical-align:middle;margin-right:11px;transform:translateY(-1px)}
.vg .lood{font-size:18.5px!important;line-height:1.62!important;color:var(--ink2);max-width:60ch}

/* knoppen - leisteen als hoofdactie, Varel houdt het monochroom */
.vg .knop{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;
    text-decoration:none;font-family:'Archivo',sans-serif;font-weight:600;font-size:16px;
    padding:15px 28px;border-radius:8px;border:1px solid var(--ink);transition:.18s;cursor:pointer}
.vg .knop:hover{background:#3B4256;border-color:#3B4256}
.vg .knop.rand{background:#fff;color:var(--ink);border-color:#C9C7C1}
.vg .knop.rand:hover{border-color:var(--ink)}
.vg .knop.vuur{background:var(--vuur);color:#20180A;border-color:var(--vuur);font-weight:700}
.vg .knop.vuur:hover{background:var(--vuur2);border-color:var(--vuur2)}
.vg .knop.glas{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);font-weight:600}
.vg .knop.glas:hover{background:rgba(255,255,255,.12);border-color:#fff}
.vg .knop.groot{padding:18px 34px;font-size:17px}
.vg .knop.wit{background:#fff;color:var(--ink);border-color:#fff}
.vg .knop.wit:hover{background:var(--zand)}
.vg .knop.vol{width:100%;justify-content:center}
.vg .knop.klein{padding:11px 20px;font-size:15px}
.vg .knop:after{content:"\2192";font-size:15px;opacity:.72}
.vg .knop.geen:after{content:none}

/* kop */
.vg .top{background:var(--ink);color:#B7BBC7;font-size:13.5px}
.vg .top .in{display:flex;justify-content:space-between;align-items:center;min-height:40px;gap:20px}
.vg .top .pt{color:var(--brons2);margin-right:8px}
.vg .top a{color:#fff;text-decoration:none;font-weight:700}
.vg .topacties{display:flex;align-items:center;gap:16px}
.vg .top .wa{display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:600;
    background:#1E8E4E;padding:5px 12px;border-radius:999px;font-size:12.5px}
.vg .top .wa:hover{background:#23A25A}
.vg .top .wa svg{flex:none}
.vg .kop{background:#fff;border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:60}
.vg .kop.opFoto{background:transparent;border-bottom-color:rgba(255,255,255,.16);position:absolute;
    left:0;right:0;top:40px;z-index:40}
.vg .kop.opFoto .merk{color:#fff}
.vg .kop.opFoto .merk i{color:var(--vuur)}
.vg .kop.opFoto .nav a{color:#E4E8EE}
.vg .kop.opFoto .nav a:hover,.vg .kop.opFoto .nav a.nu{color:#fff;border-color:var(--vuur)}
.vg .kop.opFoto .knop{background:var(--vuur);border-color:var(--vuur);color:#20180A;font-weight:700}
.vg .kop.opFoto .knop:hover{background:var(--vuur2);border-color:var(--vuur2)}
.vg .metFoto{position:relative}
.vg .kop .in{display:flex;align-items:center;gap:28px;height:76px}
.vg .merk{font-family:'Archivo',sans-serif;font-weight:700;font-size:21px;letter-spacing:-.035em;
    text-decoration:none;color:var(--ink);white-space:nowrap}
.vg .merk i{font-style:italic;font-weight:600;color:var(--brons)}
.vg .nav{display:flex;gap:24px;margin-left:auto}
.vg .nav a{text-decoration:none;font-size:15.5px;color:var(--ink2);font-weight:500;padding:5px 0;
    border-bottom:2px solid transparent;white-space:nowrap}
.vg .nav a:hover,.vg .nav a.nu{color:var(--ink);border-color:var(--brons)}
.vg .hamb{display:none;margin-left:auto;background:none;border:1px solid var(--lijn);
    border-radius:9px;width:46px;height:44px;cursor:pointer;padding:0;align-items:center;
    justify-content:center;flex-direction:column;gap:5px}
.vg .hamb i{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.vg .kop.opFoto .hamb{border-color:rgba(255,255,255,.4)}
.vg .kop.opFoto .hamb i{background:#fff}
.vg .mobmenu{display:none;position:fixed;inset:0;z-index:200;background:rgba(17,25,34,.55)}
.vg .mobmenu.aan{display:block}
.vg .mobmenu .vak{position:absolute;top:0;right:0;bottom:0;width:min(340px,86vw);background:#fff;
    padding:22px;overflow-y:auto;display:flex;flex-direction:column}
.vg .mobmenu .sluit{align-self:flex-end;background:none;border:0;font-size:30px;line-height:1;
    cursor:pointer;color:var(--ink);padding:4px 8px}
.vg .mobmenu nav{display:flex;flex-direction:column;margin:10px 0 20px}
.vg .mobmenu nav a{padding:15px 4px;border-bottom:1px solid var(--lijn);text-decoration:none;
    font-family:'Archivo',sans-serif;font-weight:600;font-size:18px;color:var(--ink)}
.vg .mobmenu .knop{margin-bottom:10px}
.vg .mobmenu .mfijn{font-size:14px;color:var(--zacht);margin-top:auto;padding-top:18px}
.vg .mobmenu .mfijn a{color:var(--ink);font-weight:700;text-decoration:none}

/* een vaste balk onderaan op mobiel: de volgende stap altijd binnen duimbereik */
.vg .mobbalk{display:none;position:fixed;left:0;right:0;bottom:0;z-index:120;background:#fff;
    border-top:1px solid var(--lijn);padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px rgba(17,25,34,.14)}
.vg .mobbalk .rijtje{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.vg .mobbalk a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    padding:9px 4px;border-radius:10px;text-decoration:none;font-family:'Archivo',sans-serif;
    font-size:11.5px;font-weight:600;color:var(--ink);background:var(--zand);border:1px solid var(--lijn);
    line-height:1.15;text-align:center;min-height:56px}
.vg .mobbalk a svg{width:19px;height:19px;flex:none}
.vg .mobbalk a.hoofd{background:var(--vuur);border-color:var(--vuur);color:#20180A}
.vg .mobbalk a.wa{background:#1E8E4E;border-color:#1E8E4E;color:#fff}
.vg .mobbalk a:active{transform:scale(.97)}

/* hero - schermvullende foto met onze eigen mensen erin.
   Marc: "niet het stoere en opvallende zoals CameraInstallatie wel heeft".
   Dat komt daar van vol-bleed beeld, een witte kop eroverheen en een knop die
   knalt. Hier hetzelfde principe, maar warmer: geen koud marineblauw maar een
   diepe warme schaduw, en onze monteurs levensgroot in beeld. */
.vg .hero{position:relative;background:var(--diep);color:#fff;overflow:hidden;isolation:isolate;
    min-height:min(760px,86vh);display:flex;align-items:center}
.vg .heroFoto{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;
    object-position:60% 45%}
.vg .hero:before{content:"";position:absolute;inset:0;z-index:-2;
    background:linear-gradient(96deg,rgba(17,25,34,.93) 0%,rgba(17,25,34,.86) 38%,
    rgba(17,25,34,.55) 62%,rgba(17,25,34,.30) 100%)}
.vg .hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:-2;
    background:linear-gradient(to top,rgba(17,25,34,.72),rgba(17,25,34,0))}
.vg .hero .in{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;
    align-items:end;padding-top:118px;padding-bottom:0;width:100%}
.vg .hero h1{color:#fff;margin-bottom:.42em!important}
.vg .hero .lood{color:#DDE2E9;font-size:19px!important;max-width:52ch}
.vg .hero .oog{color:var(--vuur)}
.vg .hero .oog:before{background:var(--vuur);width:26px}
.vg .hero .acties{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px}
.vg .heroTekst{padding-bottom:52px}
/* de vier claims staan IN de hero, niet in een balk eronder */
.vg .heroClaims{display:grid;grid-template-columns:1fr 1fr;gap:16px 26px;margin-top:34px;
    padding-top:26px;border-top:1px solid rgba(255,255,255,.2)}
.vg .heroClaims div{display:flex;gap:11px;font-size:14.5px;line-height:1.4;color:#DDE2E9}
.vg .heroClaims b{color:#fff;font-weight:700}
.vg .heroClaims i{flex:none;width:19px;height:10px;margin-top:5px;border-left:2.5px solid var(--vuur);
    border-bottom:2.5px solid var(--vuur);transform:rotate(-45deg)}
/* onze monteurs, uitgeknipt, levensgroot rechts in beeld */
.vg .heroMensen{align-self:end;display:block;margin:0}
.vg .heroMensen img{width:100%;max-height:600px;object-fit:contain;object-position:bottom;
    display:block;filter:drop-shadow(0 24px 44px rgba(0,0,0,.55))}

/* beoordeling, massief - geen matglas */
.vg .beoordeling{display:inline-flex;align-items:center;gap:13px;background:var(--zand);
    border:1px solid var(--lijn);border-radius:10px;padding:11px 18px;margin-top:26px;text-decoration:none}
.vg .hero .beoordeling{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24)}
.vg .hero .beoordeling .cijfer{color:#fff}
.vg .hero .beoordeling .sterren{color:var(--vuur)}
.vg .hero .beoordeling small{color:#B9C0CA}
.vg .beoordeling .cijfer{font-family:'Archivo',sans-serif;font-weight:700;font-size:20px;
    color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.vg .beoordeling .sterren{color:var(--vuur);font-size:13px;letter-spacing:2px;line-height:1}
.vg .beoordeling small{display:block;font-size:12.5px;color:var(--zacht);margin-top:3px}

/* claimrail */
.vg .rail{background:var(--zand);border-bottom:1px solid var(--lijn)}
.vg .rail .in{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;padding-top:30px;padding-bottom:30px}
.vg .rail b{display:block;font-family:'Archivo',sans-serif;font-size:15.5px;margin-bottom:3px}
.vg .rail span{font-size:14px;color:var(--zacht);line-height:1.45;display:block}
.vg .rail b:before{content:"";display:inline-block;width:14px;height:7px;margin-right:11px;
    border-left:2.5px solid var(--brons);border-bottom:2.5px solid var(--brons);
    transform:rotate(-45deg) translateY(-2px)}

/* secties */
.vg .sec{padding:84px 0;overflow-x:clip}
.vg .sec.kern{padding:124px 0}
.vg .sec.krap{padding:60px 0}
.vg .sec.zand{background:var(--zand)}
.vg .sec.donker{background:var(--ink);color:#fff}
.vg .sec.donker h2,.vg .sec.donker h3{color:#fff}
.vg .sec.donker .lood,.vg .sec.donker p,.vg .sec.donker li{color:#C8CBD4}
.vg .sec.donker .oog{color:var(--brons2)}
.vg .titelrij{display:flex;justify-content:space-between;align-items:flex-end;gap:34px;margin-bottom:46px}
.vg .titelrij .lood{margin:0!important}
.vg .titelrij h2{margin-bottom:0!important}

/* keuzehulp-schakelaar: laat de bezoeker zichzelf meteen herkennen */
.vg .schakel{display:inline-flex;background:#fff;border:1px solid var(--lijn);border-radius:10px;padding:4px;gap:4px;flex-wrap:wrap}
.vg .schakel button{border:0;background:none;font-family:'Archivo',sans-serif;font-weight:600;font-size:15px;
    padding:10px 20px;border-radius:7px;cursor:pointer;color:var(--ink2);transition:.15s}
.vg .schakel button.nu{background:var(--ink);color:#fff}

/* fototegels */
.vg .tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.vg .tegel{position:relative;background:#fff;border:1px solid var(--lijn);border-radius:14px;
    overflow:hidden;display:flex;flex-direction:column;color:inherit;transition:.2s}
.vg .tegel:hover{border-color:#C3C1BA;transform:translateY(-3px);box-shadow:0 16px 30px -22px rgba(44,49,64,.45)}
.vg .tegel .beeld{aspect-ratio:4/3;overflow:hidden;background:var(--zand)}
.vg .tegel .beeld img{width:100%;height:100%;object-fit:cover;display:block}
.vg .tegel .tekst{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column}
.vg .tegel h3{margin-bottom:8px!important}
.vg .tegel p{font-size:15.5px!important;color:var(--ink2);margin:0 0 14px!important;flex:1}
.vg .tegel .lees{font-family:'Archivo',sans-serif;font-weight:600;font-size:14.5px;
    color:var(--ink);text-decoration:none;align-self:flex-start}
.vg .dek:after{content:"";position:absolute;inset:0;z-index:1}
.vg .tegel:focus-within{outline:2px solid var(--brons);outline-offset:2px}
.vg .tegel .lees:after{content:" \2192";color:var(--brons)}

/* realisaties: groot beeld, massief label op een verloop */
.vg .cases{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.vg .case{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/11;display:block;
    background:var(--zand)}
.vg .case:focus-within{outline:2px solid var(--brons);outline-offset:3px}
.vg .case img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.vg .case:hover img{transform:scale(1.04)}
.vg .case .band{position:absolute;left:0;right:0;bottom:0;padding:56px 22px 20px;color:#fff;
    background:linear-gradient(to top,rgba(28,32,42,.88),rgba(28,32,42,.44) 55%,rgba(28,32,42,0))}
.vg .case .band b{display:block;font-family:'Archivo',sans-serif;font-size:18px;font-weight:600;line-height:1.2}
.vg .case .band span{font-size:13.5px;color:rgba(255,255,255,.85)}
.vg .case.breed{grid-column:span 2;aspect-ratio:21/8}

/* beeld naast tekst */
.vg .duo{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
.vg .duo.om .fig{order:2}
.vg .fig{margin:0}
.vg .fig img{width:100%;display:block;border-radius:14px}
.vg .fig figcaption{font-size:13.5px;color:var(--zacht);margin-top:11px;padding-left:13px;
    border-left:2px solid var(--brons)}
.vg .sec.donker .fig figcaption{color:#9EA3B1}

/* lijstjes */
.vg .vink{list-style:none;padding:0;margin:0 0 22px}
.vg .vink li{padding-left:30px;position:relative;margin-bottom:11px;font-size:16.5px!important}
.vg .vink li:before{content:"";position:absolute;left:1px;top:8px;width:15px;height:8px;
    border-left:2.5px solid var(--brons);border-bottom:2.5px solid var(--brons);transform:rotate(-45deg)}
.vg .sec.donker .vink li:before{border-color:var(--brons2)}

/* pakketten */
.vg .prijzen{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.vg .prijs{background:#fff;border:1px solid var(--lijn);border-radius:14px;overflow:hidden;
    display:flex;flex-direction:column;position:relative}
.vg .prijs.uit{border-color:var(--ink);box-shadow:0 18px 36px -26px rgba(44,49,64,.5)}
.vg .prijs .pbeeld{height:168px;background:#fff;border-bottom:1px solid var(--lijn);display:flex;align-items:center;justify-content:center;padding:18px}
.vg .prijs .pbeeld img{max-height:100%;max-width:100%;object-fit:contain}
.vg .prijs .pin{padding:24px;display:flex;flex-direction:column;flex:1}
.vg .prijs .merk2{font-size:12px!important;letter-spacing:.12em;text-transform:uppercase;
    color:var(--zacht);font-family:'Archivo',sans-serif;margin:0 0 6px!important}
.vg .prijs .bedrag{display:block;font-family:'Archivo',sans-serif;font-size:52px;
    font-weight:700;letter-spacing:-.04em;margin:14px 0 0;font-variant-numeric:tabular-nums;
    line-height:.95}
.vg .prijs .bedrag small{display:block;font-size:13px;font-weight:500;color:var(--zacht);
    letter-spacing:.02em;margin-top:8px;line-height:1.3}
.vg .prijs .vink{flex:1;margin-bottom:18px}
.vg .prijs .vink li{font-size:15.5px!important;margin-bottom:8px}
.vg .lint{position:absolute;top:14px;right:14px;z-index:2;background:var(--brons);color:#fff;
    font-family:'Archivo',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;padding:6px 12px;border-radius:6px}

/* middelenstrip - product groot en scherp op een rustige grond */
.vg .strip{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.vg .mid{position:relative;background:#fff;border:1px solid var(--lijn);border-radius:12px;
    padding:18px 14px 18px;text-align:center;color:inherit;transition:.18s}
.vg .mid a{text-decoration:none}
.vg .mid:focus-within{outline:2px solid var(--brons);outline-offset:2px}
.vg .mid:hover{border-color:var(--ink);transform:translateY(-2px)}
.vg .mid img{width:100%;height:92px;object-fit:contain;margin-bottom:11px}
.vg .mid b{display:block;font-family:'Archivo',sans-serif;font-size:14.5px;margin-bottom:3px}
.vg .mid span{font-size:13px;color:var(--zacht);line-height:1.35;display:block}

/* wie wij zijn */
.vg .wij{display:grid;grid-template-columns:.78fr 1.22fr;gap:52px;align-items:center}
.vg .wij .port img{width:100%;max-height:460px;object-fit:contain;object-position:bottom;display:block}
.vg .cijfers{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:36px;
    padding-top:26px;border-top:1px solid rgba(255,255,255,.18)}
.vg .cijfers b{display:block;font-family:'Archivo',sans-serif;font-size:60px;color:#fff;font-weight:700;
    letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1}
.vg .cijfers span{font-size:13.5px;color:#9EA3B1;display:block;margin-top:7px;line-height:1.4}

/* vraag en antwoord */
.vg .qa{border-top:1px solid var(--lijn)}
.vg .qa details{border-bottom:1px solid var(--lijn)}
.vg .qa summary{cursor:pointer;padding:21px 46px 21px 0;font-family:'Archivo',sans-serif;
    font-weight:600;font-size:17.5px;position:relative;list-style:none}
.vg .qa summary::-webkit-details-marker{display:none}
.vg .qa summary:after{content:"+";position:absolute;right:8px;top:16px;font-size:26px;
    color:var(--brons);font-weight:500;line-height:1}
.vg .qa details[open] summary:after{content:"\2013"}
.vg .qa .antw{padding:0 46px 22px 0;color:var(--ink2)}
.vg .qa .antw p{margin:0 0 .8em!important}
.vg .qa .antw p:last-child{margin-bottom:0!important}

/* de check */
.vg .kaart{background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:30px}
.vg .kaart.diep{box-shadow:0 18px 40px -30px rgba(44,49,64,.55)}
.vg .veld{margin-bottom:15px}
.vg .veld label{display:block;font-size:13.5px;font-weight:700;margin-bottom:7px;color:var(--ink2)}
.vg .veld input,.vg .veld select,.vg .veld textarea{width:100%;padding:12px 14px;border:1px solid #D6D4CE;
    border-radius:8px;font-family:inherit;font-size:15.5px;background:#fff;color:var(--ink)}
.vg .veld textarea{min-height:88px;resize:vertical}
.vg input:focus,.vg select:focus,.vg textarea:focus,.vg .knop:focus-visible,
.vg .nav a:focus-visible,.vg summary:focus-visible,.vg .schakel button:focus-visible,
.vg .keus:focus-within{outline:2px solid var(--brons);outline-offset:2px}
.vg .tweeop{display:grid;grid-template-columns:1.35fr 1fr;gap:12px}
.vg .keuzes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.vg .keus{display:flex;align-items:center;gap:11px;border:1px solid #D6D4CE;border-radius:9px;
    padding:13px 15px;cursor:pointer;font-size:15.5px;transition:.15s;background:#fff}
.vg .keus:hover{border-color:var(--ink)}
.vg .keus input{width:auto;margin:0;accent-color:var(--brons)}
.vg .keus.aan{border-color:var(--ink);background:var(--zand)}
.vg .stap{display:none}
.vg .stap.aan{display:block}
.vg .stappen{display:flex;gap:6px;margin-bottom:20px}
.vg .stappen i{height:3px;flex:1;background:var(--lijn);border-radius:2px}
.vg .stappen i.aan{background:var(--brons)}
.vg .terug{background:none;border:0;color:var(--zacht);font-size:13.5px;cursor:pointer;
    padding:12px 0 0;font-family:inherit;text-decoration:underline}
.vg .uitslag{display:none}
.vg .uitslag.aan{display:block}
.vg .uitslag .vak{background:var(--zand);border-left:3px solid var(--brons);border-radius:0 10px 10px 0;
    padding:20px 22px;margin-bottom:20px}
.vg .uitslag .vak b{display:block;font-family:'Archivo',sans-serif;font-size:20px;margin-bottom:6px}
.vg .uitslag .vak .bed{font-family:'Archivo',sans-serif;font-size:29px;font-weight:700;
    letter-spacing:-.03em;margin:12px 0 2px;font-variant-numeric:tabular-nums;display:block}
.vg .fout{color:#9B2C2C;font-size:14px;margin-top:8px;display:none}
.vg .fout.aan{display:block}

/* meelopende subnavigatie voor lange pagina's */
.vg .springnav{position:sticky;top:76px;z-index:50;background:#fff;border-bottom:1px solid var(--lijn)}
.vg .springnav .in{display:flex;gap:6px;overflow-x:auto;padding-top:10px;padding-bottom:10px;scrollbar-width:none}
.vg .springnav .in::-webkit-scrollbar{display:none}
.vg .springnav a{white-space:nowrap;text-decoration:none;font-family:'Archivo',sans-serif;
    font-size:14.5px;font-weight:500;color:var(--ink2);padding:8px 15px;border-radius:7px;transition:.15s}
.vg .springnav a:hover{background:var(--zand);color:var(--ink)}
.vg .springnav a.nu{background:var(--ink);color:#fff}
.vg [id^="deel-"]{scroll-margin-top:142px}

/* merkenstrip */
.vg .merken{display:flex;flex-wrap:wrap;gap:14px 38px;align-items:center;justify-content:center}
.vg .merken span{font-family:'Archivo',sans-serif;font-weight:600;font-size:16.5px;color:#8E8C86}
.vg .merken em{font-style:normal;font-size:12px;color:var(--zacht);width:100%;text-align:center;
    font-family:'Karla',sans-serif;letter-spacing:.12em;text-transform:uppercase;margin-bottom:2px}

/* afsluiter */
.vg .slot{background:var(--ink);color:#fff;text-align:center}
.vg .slot .in-s{padding-top:78px;padding-bottom:78px}
.vg .slot h2{color:#fff}
.vg .slot p{color:#C8CBD4}
.vg .slot .acties{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* auteur en voet */
.vg .auteur{display:flex;gap:16px;align-items:flex-start;padding:22px;background:var(--zand);
    border-radius:12px;font-size:14.5px;color:var(--ink2);line-height:1.55}
.vg .auteur img{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:top;flex:none;background:#fff}
.vg .auteur b{color:var(--ink)}

/* ── het rondje om je huis ─────────────────────────────────────────────── */
.vg .rondje{background:var(--zand);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.vg .rondwerk{display:grid;grid-template-columns:1fr 1.18fr;gap:46px;align-items:start}
.vg .plattegrond{position:relative;background:#fff;border:1px solid var(--lijn);border-radius:16px;
    padding:20px;position:sticky;top:104px;box-shadow:0 18px 40px -32px rgba(27,36,48,.6)}
.vg .plat{width:100%;height:auto;display:block}
.vg .punt{position:absolute;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;
    border:2.5px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;padding:0;
    font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;transition:.18s;
    box-shadow:0 4px 12px -2px rgba(27,36,48,.4)}
.vg .punt span{display:block;line-height:1}
.vg .punt:hover{transform:translate(-50%,-50%) scale(1.12)}
.vg .punt.nu{background:var(--ink);color:#fff}
.vg .punt.nu:after{content:"";position:absolute;inset:-7px;border-radius:50%;
    border:2.5px solid var(--vuur);opacity:.95}
.vg .punt:focus-visible{outline:3px solid var(--brons);outline-offset:3px}

.vg .tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.vg .tab{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--lijn);background:#fff;
    border-radius:999px;padding:8px 16px 8px 9px;cursor:pointer;font-family:'Karla',sans-serif;
    font-size:14.5px;color:var(--ink2);transition:.15s}
.vg .tab i{font-style:normal;width:23px;height:23px;border-radius:50%;background:var(--zand2);
    color:var(--ink);display:grid;place-items:center;font-family:'Archivo',sans-serif;
    font-weight:700;font-size:12.5px}
.vg .tab:hover{border-color:#C3C1BA}
.vg .tab.nu{background:var(--ink);border-color:var(--ink);color:#fff}
.vg .tab.nu i{background:var(--vuur);color:#20180A}

.vg .paneel{display:none;background:#fff;border:1px solid var(--lijn);border-radius:14px;overflow:hidden}
.vg .paneel.aan{display:grid;grid-template-columns:.9fr 1.1fr}
.vg .pfoto{background:var(--zand)}
.vg .pfoto.render{background:#fff;display:grid;place-items:center;padding:26px}
.vg .pfoto.render img{object-fit:contain;min-height:0;max-height:290px;width:auto;max-width:100%}
.vg .pfoto img{width:100%;height:100%;min-height:300px;object-fit:cover;display:block}
.vg .ptekst{padding:26px}
.vg .pnr{display:block;font-family:'Archivo',sans-serif;font-size:11.5px;font-weight:600;
    letter-spacing:.13em;text-transform:uppercase;color:var(--brons);margin-bottom:10px}
.vg .punt:focus-visible{outline:3px solid var(--vuur);outline-offset:3px}
.vg .paneel h3{margin-bottom:12px!important}
.vg .paneel p{font-size:15.5px!important;color:var(--ink2);margin:0 0 14px!important}
.vg .paneel p b{color:var(--ink)}
.vg .pvoet{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    border-top:1px solid var(--lijn);padding-top:16px;margin-top:4px}
.vg .pvanaf{font-size:14px;color:var(--zacht)}
.vg .pvanaf b{font-family:'Archivo',sans-serif;font-size:21px;color:var(--ink);
    letter-spacing:-.02em;font-variant-numeric:tabular-nums}

@media(max-width:980px){
 .vg .rondwerk{grid-template-columns:1fr;gap:26px}
 .vg .plattegrond{position:relative;top:auto;max-width:520px;margin:0 auto}
 .vg .paneel.aan{grid-template-columns:1fr}
 .vg .pfoto img{min-height:220px;max-height:280px}
}
@media(max-width:640px){
 .vg .punt{width:32px;height:32px;font-size:13.5px}
 .vg .tab{font-size:13.5px;padding:7px 13px 7px 8px}
}
@media(prefers-reduced-motion:reduce){
 .vg .punt,.vg .tab,.vg .tegel,.vg .case img{transition:none!important}
 .vg .case:hover img{transform:none}
}

/* ── werkwijze: vier stappen met echt beeld ────────────────────────────── */
/* Marc: "dit is onze brochure, mensen zien dit, dit is het eerste moment van
   spreken". Dus niet vier iconen met een zin, maar vier foto's van ons eigen
   werk met wat er die stap ��cht gebeurt. De nummers kloppen: het is een volgorde. */
.vg .stappenrij{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:stap}
.vg .stapkaart{background:#fff;border:1px solid var(--lijn);border-radius:14px;overflow:hidden;
    display:flex;flex-direction:column}
.vg .stapkaart .sbeeld{position:relative;aspect-ratio:5/4;overflow:hidden;background:var(--zand)}
.vg .stapkaart .sbeeld img{width:100%;height:100%;object-fit:cover;display:block}
.vg .stapkaart .snr{position:absolute;left:14px;top:14px;width:38px;height:38px;border-radius:50%;
    background:var(--vuur);color:#20180A;display:grid;place-items:center;
    font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;
    box-shadow:0 4px 12px -2px rgba(0,0,0,.35)}
.vg .stapkaart .stekst{padding:20px 20px 22px}
.vg .stapkaart h3{font-size:18px!important;margin-bottom:7px!important}
.vg .stapkaart p{font-size:15px!important;color:var(--ink2);margin:0!important}
.vg .stapkaart .wanneer{display:block;font-family:'Archivo',sans-serif;font-size:11.5px;
    font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--brons);margin-bottom:8px}

/* ── fotoband: vol-bleed strook eigen werk ─────────────────────────────── */
.vg .band{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.vg .band figure{position:relative;margin:0;aspect-ratio:1/1;overflow:hidden}
.vg .band img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.vg .band figure:hover img{transform:scale(1.05)}
.vg .band figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 15px;color:#fff;
    font-size:13.5px;line-height:1.35;
    background:linear-gradient(to top,rgba(17,25,34,.9),rgba(17,25,34,0))}
@media(max-width:980px){.vg .stappenrij{grid-template-columns:1fr 1fr}.vg .band{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.vg .stappenrij{grid-template-columns:1fr}}

/* ── de echte prijsladder van CameraInstallatie ────────────────────────── */
.vg .ladder{margin-top:40px;background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:30px}
.vg .ladderkop{max-width:62ch;margin-bottom:24px}
.vg .ladderkop h3{margin-bottom:8px!important}
.vg .ladderkop p{font-size:15.5px!important;color:var(--ink2);margin:0!important}
.vg .ladderrij{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;background:var(--lijn);
    border:1px solid var(--lijn);border-radius:10px;overflow:hidden}
.vg .trede{background:#fff;padding:16px 10px;text-align:center}
.vg .trede b{display:block;font-size:12.5px;font-weight:600;color:var(--zacht);
    font-family:'Archivo',sans-serif;margin-bottom:6px;letter-spacing:.02em}
.vg .trede span{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:19px;
    letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.vg .ladderfijn{font-size:14px!important;color:var(--zacht);margin:18px 0 0!important}
.vg .ladderfijn a{color:var(--ink);font-weight:700}
@media(max-width:980px){.vg .ladderrij{grid-template-columns:repeat(4,1fr)}}
@media(max-width:520px){.vg .ladderrij{grid-template-columns:repeat(2,1fr)}}

/* ── vier routes naar contact ──────────────────────────────────────────── */
.vg .routes{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.vg .route{background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:26px 24px;
    display:flex;flex-direction:column}
.vg .route.uit{border-color:var(--ink);box-shadow:0 18px 36px -26px rgba(27,36,48,.55)}
.vg .rnr{display:block;font-family:'Archivo',sans-serif;font-size:11.5px;font-weight:600;
    letter-spacing:.13em;text-transform:uppercase;color:var(--brons);margin-bottom:9px}
.vg .route h3{margin-bottom:9px!important}
.vg .route p{font-size:15px!important;color:var(--ink2);margin:0 0 16px!important}
.vg .route .vink{flex:1;margin-bottom:18px}
.vg .route .vink li{font-size:14.5px!important;margin-bottom:7px;padding-left:26px}
.vg .route .vink li:before{top:7px;width:13px;height:7px}
.vg .route .veld{margin-bottom:11px}
.vg .route .veld label{font-size:12.5px}
.vg .route .veld input,.vg .route .veld select{padding:10px 12px;font-size:14.5px}
.vg .routesvoet{text-align:center;margin:30px 0 0!important;font-size:15.5px!important;color:var(--ink2)}
.vg .routesvoet a{color:var(--ink)}

/* ── erkenningen en partnerschappen ────────────────────────────────────── */
.vg .erkrij{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.vg .erk{background:#fff;border:1px solid var(--lijn);border-radius:12px;padding:20px 22px}
.vg .erk b{display:block;font-family:'Archivo',sans-serif;font-size:17px;letter-spacing:-.015em;
    margin-bottom:5px}
.vg .erk em{display:block;font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.11em;
    text-transform:uppercase;color:var(--brons);margin-bottom:9px}
.vg .erk p{font-size:14.5px!important;color:var(--ink2);margin:0!important}
@media(max-width:900px){.vg .erkrij{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.vg .erkrij{grid-template-columns:1fr}}

/* ── merkkaarten ───────────────────────────────────────────────────────── */
.vg .merk-k{display:grid;grid-template-columns:250px 1fr;gap:30px;background:#fff;
    border:1px solid var(--lijn);border-radius:16px;padding:26px 30px;margin-bottom:18px;
    align-items:start}
.vg .merk-k>*{min-width:0}
.vg .mk-beeld{background:var(--zand);border-radius:12px;padding:20px;display:grid;place-items:center;
    min-height:170px}
.vg .mk-beeld img{max-width:100%;max-height:150px;object-fit:contain;display:block}
.vg .mk-soort{display:block;font-family:'Archivo',sans-serif;font-size:11.5px;font-weight:700;
    letter-spacing:.11em;text-transform:uppercase;color:var(--brons);margin-bottom:7px}
.vg .merk-k h3{margin:0 0 11px!important;font-size:26px!important}
.vg .merk-k>.mk-tekst>p{font-size:16px!important;color:var(--ink2);margin:0 0 18px!important}
.vg .mk-twee{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:18px;
    border-top:1px solid var(--lijn)}
.vg .mk-twee>*{min-width:0}
.vg .mk-twee p{font-size:14.5px!important;color:var(--ink2);margin:0!important;line-height:1.55!important}
.vg .merk-k .lees{display:inline-block;margin-top:16px;font-family:'Archivo',sans-serif;
    font-weight:600;font-size:14.5px;color:var(--ink);text-decoration:none}
.vg .merk-k .lees:hover{color:var(--brons)}
@media(max-width:860px){
 .vg .merk-k{grid-template-columns:1fr;gap:20px;padding:22px 22px}
 .vg .mk-beeld{min-height:130px}
 .vg .mk-twee{grid-template-columns:1fr;gap:16px}
}

/* ── contenthub ────────────────────────────────────────────────────────── */
.vg .hubgroep{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start}
.vg .hubgroep>*{min-width:0}
.vg .hubkop{position:sticky;top:104px}
.vg .hubkop h2{margin-bottom:12px!important}
.vg .hubkop p{font-size:15.5px!important;color:var(--ink2);margin:0!important}
.vg .hubrij{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vg .hubitem{display:block;background:#fff;border:1px solid var(--lijn);border-radius:12px;
    padding:20px 22px;text-decoration:none;transition:.18s}
.vg .hubitem:hover{border-color:var(--ink);transform:translateY(-2px);
    box-shadow:0 14px 28px -22px rgba(27,36,48,.5)}
.vg .hubitem b{display:block;font-family:'Archivo',sans-serif;font-size:17px;font-weight:600;
    color:var(--ink);margin-bottom:6px;letter-spacing:-.012em}
.vg .hubitem b:after{content:" 92";color:var(--brons);opacity:0;transition:.18s}
.vg .hubitem:hover b:after{opacity:1}
.vg .hubitem span{display:block;font-size:14.5px;color:var(--ink2);line-height:1.5}
@media(max-width:1000px){
 .vg .hubgroep{grid-template-columns:1fr;gap:24px}
 .vg .hubkop{position:static}
}
@media(max-width:620px){.vg .hubrij{grid-template-columns:1fr}}

@media(max-width:1080px){.vg .routes{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.vg .routes{grid-template-columns:1fr}}

/* ── ingesloten agenda ─────────────────────────────────────────────────── */
.vg .agenda{background:#fff;border:1px solid var(--lijn);border-radius:14px;overflow:hidden}
.vg .agenda iframe{display:block;width:100%;border:0;min-height:1400px}

/* ── inhoudspagina's ───────────────────────────────────────────────────── */
.vg .hero.licht{background:#fff;color:var(--ink);min-height:0;display:block;border-bottom:1px solid var(--lijn)}
.vg .hero.licht:before,.vg .hero.licht:after{content:none}
.vg .hero.licht .in{grid-template-columns:1.05fr .95fr;align-items:center;
    padding-top:56px;padding-bottom:56px;gap:52px}
.vg .hero.licht h1{color:var(--ink)}
.vg .hero.licht .lood{color:var(--ink2)}
.vg .hero.licht .oog{color:var(--brons)}
.vg .hero.licht .oog:before{content:none}
.vg .hero.licht .heroBeeld{aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--zand)}

.vg .kruimel{font-size:13.5px;color:var(--zacht);margin-bottom:18px}
.vg .kruimel a{color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--lijn)}
.vg .kruimel a:hover{border-color:var(--ink)}
.vg .kruimel span{margin:0 7px;color:#C0BEB8}
.vg .kruimel b{color:var(--ink);font-weight:600}

.vg .sec .in-s h2{margin-top:0!important}
.vg .sec .in-s h3{margin-top:1.6em!important;margin-bottom:.5em!important}
.vg .sec .in-s p:last-child{margin-bottom:0!important}
.vg .sec .in-s .duo{margin:30px 0}
.vg .sec .in-s ol{padding-left:22px;margin:0 0 1.1em}
.vg .sec .in-s ol li{margin-bottom:9px}

/* tabellen: op mobiel schuiven ze zelf, de pagina nooit */
.vg .tabelwrap{overflow-x:auto;border:1px solid var(--lijn);border-radius:12px;margin:0 0 12px}
.vg .tabelveeg{display:none}
@media(max-width:575px){
.vg .tabelveeg{display:block;margin:-4px 0 12px;font-size:12.5px;color:var(--zacht);
    letter-spacing:.02em}
.vg .tabelveeg::before{content:'94';margin-right:6px;opacity:.75}
}
.vg table{width:100%;border-collapse:collapse;min-width:520px;background:#fff}
.vg th{text-align:left;font-family:'Archivo',sans-serif;font-size:13px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--zacht);padding:14px 16px;border-bottom:1px solid var(--lijn);
    white-space:nowrap}
.vg td{padding:14px 16px;border-bottom:1px solid var(--lijn);font-size:15.5px;vertical-align:top}
.vg tbody tr:last-child td{border-bottom:0}
.vg td:last-child,.vg th:last-child{font-variant-numeric:tabular-nums}
.vg .tabelvoet{font-size:13.5px!important;color:var(--zacht);margin:0 0 1.1em!important}

/* uitgelicht kader */
.vg .kader{border-radius:12px;padding:20px 22px;margin:26px 0;background:var(--zand);
    border-left:3px solid var(--brons)}
.vg .kader b{display:block;font-family:'Archivo',sans-serif;font-size:16px;margin-bottom:6px}
.vg .kader div{font-size:15.5px;color:var(--ink2);line-height:1.6}
.vg .kader div p{font-size:15.5px!important;margin:0 0 .7em!important}
.vg .kader div p:last-child{margin-bottom:0!important}
.vg .kader.let{border-left-color:var(--vuur);background:#FDF6EA}
.vg .kader.mis{border-left-color:#9B7B5B;background:#F6F1EA}

/* doorverwijzingen */
.vg .vkaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.vg .vkaart{position:relative;background:#fff;border:1px solid var(--lijn);border-radius:14px;
    padding:24px;display:flex;flex-direction:column;transition:.18s}
.vg .vkaart:hover{border-color:#C3C1BA;transform:translateY(-3px)}
.vg .vkaart h3{margin-bottom:8px!important}
.vg .vkaart p{font-size:15px!important;color:var(--ink2);flex:1;margin:0 0 14px!important}
.vg .vkaart .lees{font-family:'Archivo',sans-serif;font-weight:600;font-size:14.5px;
    color:var(--ink);text-decoration:none;align-self:flex-start}
.vg .vkaart .lees:after{content:" 92";color:var(--brons)}
.vg .vkaart:focus-within{outline:2px solid var(--brons);outline-offset:2px}

.vg .fig.render{background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:26px;
    display:grid;place-items:center}
.vg .fig.render img{max-height:300px;width:auto;max-width:100%;border-radius:0}
.vg .fig.render figcaption{grid-column:1;margin-top:16px;text-align:left;justify-self:start}

@media(max-width:980px){
 .vg .hero.licht .in{grid-template-columns:1fr;gap:30px;padding-top:38px;padding-bottom:38px}
 .vg .vkaarten{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){.vg .vkaarten{grid-template-columns:1fr}}

/* ── beoordelingen ─────────────────────────────────────────────────────── */
.vg .revwerk{display:grid;grid-template-columns:.78fr 1.22fr;gap:44px;align-items:start}
.vg .revcijfer{background:var(--zand);border-radius:14px;padding:30px;position:sticky;top:104px}
.vg .revcijfer>b{display:block;font-family:'Archivo',sans-serif;font-size:78px;font-weight:700;
    line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.vg .revcijfer .sterren{display:block;color:var(--vuur);font-size:19px;letter-spacing:3px;margin:10px 0 6px}
.vg .revuit{display:block;font-size:14.5px;color:var(--ink2)}
.vg .revuit b{color:var(--ink)}
.vg .revfijn{font-size:14.5px!important;color:var(--ink2);margin:18px 0 20px!important;
    padding-left:14px;border-left:2px solid var(--vuur)}
.vg .revlijst{display:flex;flex-direction:column;gap:18px}
.vg .rev{margin:0;background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:26px 28px}
.vg .rev blockquote{margin:0 0 12px;font-size:17px;line-height:1.6;color:var(--ink)}
.vg .rev figcaption{font-size:13.5px;color:var(--zacht);padding-left:13px;border-left:2px solid var(--vuur)}
@media(max-width:980px){
 .vg .revwerk{grid-template-columns:1fr;gap:26px}
 .vg .revcijfer{position:static}
 .vg .revcijfer>b{font-size:60px}
}

/* ── drie tekstpatronen om af te wisselen ──────────────────────────────── */
/* Fable: "maximaal twee blokken van hetzelfde patroon per pagina, en nooit
   twee dezelfde achter elkaar". Dat is wat veel content van eenheidsworst
   scheidt. Drie patronen, elk voor een ander soort tekst. */

/* 1. Kantlijn - voor uitleg en wetgeving. Leest als een naslagwerk. */
.vg .kantlijn{display:grid;grid-template-columns:184px minmax(0,62ch);gap:0 40px;margin:0 0 34px}
.vg .kantlijn>.tk{grid-column:2}
.vg .kantlijn>aside{grid-column:1;font-size:14px;line-height:1.5;color:var(--zacht);
    text-align:right;padding-top:5px}
.vg .kantlijn>aside b{display:block;font-family:'Archivo',sans-serif;font-size:30px;
    font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.03em;
    font-variant-numeric:tabular-nums;margin-bottom:6px}
.vg .kantlijn>.tk p:last-child{margin-bottom:0!important}

/* 2. Vraagreeks - voor tips en kosten. Geen accordeon: alles meteen leesbaar,
      en precies het formaat dat AI-zoekmachines letterlijk citeren. */
.vg .reeks h3{font-size:21px!important;border-top:1px solid var(--lijn);padding-top:26px;
    margin:32px 0 10px!important;letter-spacing:-.012em!important}
.vg .reeks h3:first-child{border-top:0;padding-top:0;margin-top:0!important}
.vg .reeks p{max-width:64ch}

/* 3. Genummerde gang - alleen waar de volgorde echt informatie draagt. */
.vg .gang{counter-reset:g;list-style:none;padding:0;margin:0 0 30px}
.vg .gang li{counter-increment:g;position:relative;padding:0 0 28px 62px;font-size:16.5px!important}
.vg .gang li:before{content:counter(g);position:absolute;left:0;top:-3px;width:38px;height:38px;
    border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;
    font-family:'Archivo',sans-serif;font-weight:700;font-size:16px}
.vg .gang li:after{content:"";position:absolute;left:18px;top:42px;bottom:0;width:2px;background:var(--lijn)}
.vg .gang li:last-child{padding-bottom:0}
.vg .gang li:last-child:after{display:none}
.vg .gang li b{display:block;font-family:'Archivo',sans-serif;font-size:17.5px;margin-bottom:5px}

/* een citaat van een monteur: eigen waarneming, dus amber lijn */
.vg blockquote.monteur{margin:26px 0;padding:0 0 0 18px;border-left:2px solid var(--vuur);
    font-size:19px;line-height:1.55;color:var(--ink)}
.vg blockquote.monteur cite{display:block;font-style:normal;font-size:14px;color:var(--zacht);
    margin-top:10px}
@media(max-width:900px){
 .vg .kantlijn{display:block}
 .vg .kantlijn>aside{text-align:left;border-left:2px solid var(--vuur);padding:2px 0 2px 14px;
     margin:0 0 20px}
 .vg .kantlijn>aside b{display:inline;font-size:20px;margin-right:8px}
}

/* ── het team met gezichten ────────────────────────────────────────────── */
.vg .teamrij{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin:8px 0 30px}
.vg .persoon{background:#fff;border:1px solid var(--lijn);border-radius:14px;overflow:hidden;
    display:flex;flex-direction:column}
.vg .persoon .pf{background:#fff;aspect-ratio:4/5;overflow:hidden;display:flex;
    align-items:flex-end;justify-content:center;border-bottom:1px solid var(--lijn)}
.vg .persoon.werkfoto .pf{background:var(--zand)}
.vg .persoon .pf img{width:100%;height:100%;object-fit:contain;object-position:bottom;display:block}
.vg .persoon.werkfoto .pf img{object-fit:cover;object-position:50% 28%}
.vg .persoon .pt{padding:20px 22px 22px}
.vg .persoon b{display:block;font-family:'Archivo',sans-serif;font-size:19px;letter-spacing:-.02em}
.vg .persoon em{display:block;font-style:normal;font-size:12.5px;font-weight:700;
    letter-spacing:.11em;text-transform:uppercase;color:var(--brons);margin:4px 0 9px}
.vg .persoon p{font-size:15px!important;color:var(--ink2);margin:0!important}
@media(max-width:1100px){.vg .teamrij{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.vg .teamrij{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.vg .teamrij{grid-template-columns:1fr}}



/* ── kort antwoord: het blok dat AI-zoekmachines citeren ───────────────── */
.vg .kort{background:var(--zand);border-left:3px solid var(--vuur);border-radius:0 12px 12px 0;
    padding:24px 26px;margin:0 0 34px}
.vg .kort b{display:block;font-family:'Archivo',sans-serif;font-size:12px;font-weight:700;
    letter-spacing:.13em;text-transform:uppercase;color:var(--brons);margin-bottom:10px}
.vg .kort p{font-size:18px!important;line-height:1.55!important;color:var(--ink);margin:0!important}

/* ── bronvermelding ────────────────────────────────────────────────────── */
.vg .bron{border-top:1px solid var(--lijn);margin-top:34px;padding-top:20px}
.vg .bron h3{font-size:15px!important;letter-spacing:.06em!important;text-transform:uppercase;
    color:var(--zacht);margin-bottom:12px!important}
.vg .bron ol{padding-left:20px;margin:0}
.vg .bron li{font-size:14.5px!important;color:var(--ink2);margin-bottom:9px}
.vg .bron a{color:var(--ink)}

/* ── situatieblokken ───────────────────────────────────────────────────── */
.vg .situatie{background:#fff;border:1px solid var(--lijn);border-radius:16px;padding:28px 30px;
    margin-bottom:22px}
.vg .skop{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.vg .schip{display:inline-block;background:var(--zand2);color:var(--ink);border-radius:999px;
    padding:7px 15px;font-family:'Archivo',sans-serif;font-size:11.5px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.vg .skop h3{margin:0!important;flex:1;min-width:240px}
.vg .skolommen{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
    padding-bottom:22px;border-bottom:1px solid var(--lijn)}
.vg .slabel{display:block;font-family:'Archivo',sans-serif;font-size:11px;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;color:var(--zacht);margin-bottom:8px}
.vg .skolommen p{font-size:15px!important;color:var(--ink2);margin:0!important;line-height:1.55!important}
.vg .skolommen .sgoed{color:#1F6B45;font-weight:500}
.vg .cijferrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:20px}
.vg .cijfertegel{background:var(--zand);border-radius:10px;padding:14px 16px}
.vg .cijfertegel b{display:block;font-family:'Archivo',sans-serif;font-size:26px;font-weight:700;
    letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.vg .cijfertegel span{display:block;font-size:13px;color:var(--zacht);margin-top:6px;line-height:1.3}
.vg .situatievoet{font-size:14px!important;color:var(--zacht);margin:18px 0 0!important;
    padding-left:14px;border-left:2px solid var(--vuur)}
@media(max-width:900px){
 .vg .skolommen{grid-template-columns:1fr 1fr;gap:20px}
 .vg .cijferrij{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
 .vg .situatie{padding:22px 20px}
 .vg .skolommen{grid-template-columns:1fr}
}

/* ── cta-band midden in de pagina ──────────────────────────────────────── */
.vg .ctaband{background:var(--ink);color:#fff;border-radius:16px;padding:30px 34px;
    display:grid;grid-template-columns:1.3fr auto;gap:28px;align-items:center}
.vg .ctaband h3{color:#fff;margin:0 0 7px!important}
.vg .ctaband p{color:#C8CBD4;margin:0!important;font-size:15.5px!important;max-width:58ch}
.vg .ctaknoppen{display:flex;gap:11px;flex-wrap:wrap}
.vg .ctaband .knop.glas{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.vg .ctaband .knop.glas:hover{background:rgba(255,255,255,.1);border-color:#fff}
@media(max-width:820px){.vg .ctaband{grid-template-columns:1fr;padding:26px 24px}}

/* ── eigen illustraties ────────────────────────────────────────────────── */
.vg .illwrap{margin:30px 0;background:#fff;border:1px solid var(--lijn);border-radius:16px;
    padding:16px 16px 0;overflow:hidden}
.vg .ill{width:100%;height:auto;display:block;border-radius:10px}
.vg .illwrap figcaption{font-size:14px;color:var(--ink2);padding:16px 6px 18px;line-height:1.55;
    border-left:2px solid var(--vuur);margin:16px 0 0;padding-left:14px}
.vg .illmerk{display:block;font-size:12.5px;color:var(--zacht);margin-top:6px}

/* ── uitklapmenu in de vaste balk ──────────────────────────────────────── */
.vg .nav ul{list-style:none;display:flex;gap:2px;margin:0;padding:0}
.vg .nav li{position:relative}
.vg .nav li>a{display:flex;align-items:center;gap:6px;padding:10px 13px;border-radius:8px;
    border-bottom:0}
.vg .nav li>a:hover,.vg .nav li>a.nu{background:var(--zand);color:var(--ink);border-color:transparent}
.vg .kop.opFoto .nav li>a:hover,.vg .kop.opFoto .nav li>a.nu{background:rgba(255,255,255,.14);color:#fff}
.vg .pijl{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-2px);opacity:.55;transition:.18s}
.vg .heeftsub:hover .pijl,.vg .heeftsub:focus-within .pijl{opacity:1;transform:rotate(225deg) translateY(-2px)}
.vg .sub{position:absolute;top:100%;left:-8px;z-index:70;min-width:520px;background:#fff;
    border:1px solid var(--lijn);border-radius:14px;padding:14px;margin-top:8px;
    box-shadow:0 26px 50px -26px rgba(27,36,48,.55);opacity:0;visibility:hidden;
    transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s}
.vg .heeftsub:hover .sub,.vg .heeftsub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.vg .sub ul{display:grid;grid-template-columns:1fr 1fr;gap:2px;list-style:none;margin:0;padding:0}
.vg .sub li>a{display:block;padding:11px 13px;border-radius:9px;text-decoration:none}
.vg .sub li>a:hover{background:var(--zand)}
.vg .sub b{display:block;font-family:'Archivo',sans-serif;font-size:14.5px;font-weight:600;
    color:var(--ink);margin-bottom:2px}
.vg .sub span{display:block;font-size:12.5px;color:var(--zacht);line-height:1.35}
.vg .suballes{display:block;margin:10px 4px 2px;padding-top:12px;border-top:1px solid var(--lijn);
    font-family:'Archivo',sans-serif;font-size:13.5px;font-weight:600;color:var(--brons);
    text-decoration:none}
.vg .suballes:hover{color:var(--ink)}

/* mobiel menu met groepen */
.vg .mnav{display:flex;flex-direction:column;margin:10px 0 20px}
.vg .mnav .mhoofd{padding:15px 4px 12px;border-bottom:1px solid var(--lijn);text-decoration:none;
    font-family:'Archivo',sans-serif;font-weight:700;font-size:18px;color:var(--ink)}
.vg .msub{display:flex;flex-direction:column;padding:8px 0 12px 14px;
    border-left:2px solid var(--vuur);margin:8px 0 10px 4px}
.vg .msub a{padding:8px 0;text-decoration:none;font-size:15.5px;color:var(--ink2)}
.vg .msub a:hover{color:var(--ink)}

@media(max-width:1180px){.vg .nav li>a{padding:10px 9px;font-size:14.5px}.vg .sub{min-width:440px}}
@media(max-width:980px){
 .vg .hero{min-height:0}
 .vg .hero .in{grid-template-columns:1fr;gap:0;padding-top:132px;padding-bottom:0}
 .vg .heroTekst{padding-bottom:44px}
 .vg .heroMensen{display:none}
 .vg .heroClaims{grid-template-columns:1fr}
 .vg .tegels,.vg .prijzen{grid-template-columns:1fr 1fr}
 .vg .duo,.vg .wij{grid-template-columns:1fr;gap:34px}
 .vg .duo.om .fig{order:0}
 .vg .rail .in{grid-template-columns:1fr 1fr;gap:24px}
 .vg .strip{grid-template-columns:repeat(3,1fr)}
 .vg .voet .kol{grid-template-columns:1fr 1fr}
 .vg .nav{display:none}
 .vg .hamb{display:flex}
 .vg .cases{grid-template-columns:1fr}
 .vg .case.breed{grid-column:span 1;aspect-ratio:16/11}
}
@media(max-width:760px){
 .vg .mobbalk{display:flex}
 .vg .voet{padding-bottom:70px}
}
@media(max-width:640px){
 .vg .sec{padding:58px 0}
 .vg .kop .in{gap:12px;height:66px}
 .vg .merk{font-size:19px}
 .vg .kop .knop.klein{display:none}
 .vg .tegels,.vg .prijzen{grid-template-columns:1fr}
 .vg .strip{grid-template-columns:1fr 1fr}
 .vg .titelrij{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:32px}
 .vg .top .cl{display:none}
 .vg .cijfers{grid-template-columns:1fr;gap:18px}
 .vg .voet .kol{grid-template-columns:1fr;gap:28px}
 .vg .rail .in{grid-template-columns:1fr}
 .vg .tweeop,.vg .keuzes{grid-template-columns:1fr}
}

/* ══ HERO KLEINER ═══════════════════════════════════════════════════════ */
/* Gemeten: 1087px bij een venster van 900, mobiel 1214 bij 844. Je zag de   */
/* onderkant niet en dus ook niet dat er meer volgde. Deze regels staan      */
/* bewust achteraan: eerder in het blad verloren ze van .vg .hero hierboven. */
.vg .hero{min-height:min(560px,72vh)}
.vg .hero .in{padding-top:96px;padding-bottom:0}
.vg .heroTekst{padding-bottom:30px}
.vg .hero h1{font-size:clamp(30px,4.2vw,46px)!important;margin-bottom:14px!important}
.vg .hero .lood{font-size:17px!important;max-width:50ch;margin-bottom:22px!important}
.vg .heroClaims{margin-top:18px;padding-top:16px;gap:6px 26px}
.vg .heroClaims li,.vg .heroClaims div{font-size:14px!important}
.vg .heroMensen{max-height:340px}
.vg .heroMensen img{max-height:340px;object-fit:contain;object-position:bottom}
@media(max-width:980px){
.vg .hero .in{padding-top:92px;padding-bottom:0}
.vg .heroTekst{padding-bottom:28px}
.vg .hero .lood{font-size:16px!important}
.vg .heroClaims{display:none}
}

/* ══ SCHUINE VLAKKEN ════════════════════════════════════════════════════ */
/* De vormtaal van MegaSnel, in onze eigen kleur. Hun oranje en onze amber   */
/* liggen dicht bij elkaar, dus dezelfde vorm leest als hetzelfde huis.      */

/* de donkere laag over de heldfoto loopt nu schuin weg in plaats van te
   verlopen; daardoor komt de foto rechts echt vrij te staan */
.vg .hero:before{
    background:linear-gradient(96deg,rgba(17,25,34,.95) 0%,rgba(17,25,34,.92) 34%,
        rgba(17,25,34,.72) 50%,rgba(17,25,34,.10) 68%,rgba(17,25,34,0) 100%);
    clip-path:polygon(0 0, 72% 0, 54% 100%, 0 100%)}
/* de amber naad op de diagonaal */
.vg .heroNaad{position:absolute;inset:0;z-index:0;pointer-events:none;
    background:var(--vuur);
    clip-path:polygon(72% 0, 72.9% 0, 54.9% 100%, 54% 100%);
    /* pas onder de menubalk opkomen, anders kruist de lijn het logo */
    -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 118px,#000 210px,
        #000 82%,transparent 97%);
    mask-image:linear-gradient(180deg,transparent 0,transparent 118px,#000 210px,
        #000 82%,transparent 97%)}
@media(max-width:980px){
.vg .hero:before{clip-path:none;
    background:linear-gradient(180deg,rgba(17,25,34,.94) 0%,rgba(17,25,34,.86) 55%,
        rgba(17,25,34,.72) 100%)}
.vg .heroNaad{display:none}
}

/* schuine overgang onder een gekleurd vlak: drie graden, geen zigzag */
.vg .kleurband{position:relative;padding:44px 0 52px}
.vg .kleurband:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:46px;
    background:var(--papier,#FBFAF7);clip-path:polygon(0 100%, 100% 34%, 100% 100%)}
.vg .sec.zand{position:relative}
.vg .slot{position:relative}
.vg .slot:before{content:"";position:absolute;left:0;right:0;top:-1px;height:40px;
    background:var(--zand);clip-path:polygon(0 0, 100% 0, 0 100%)}

/* ══ ZWEVENDE KNOPPEN OP DESKTOP ════════════════════════════════════════ */
/* Wij hadden ze alleen op mobiel. MegaSnel laat ze rechtsonder staan en dat  */
/* werkt: de telefoon is altijd binnen bereik zonder terug te scrollen.       */
.vg .zweef{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;
    flex-direction:column;gap:10px;align-items:flex-end}
.vg .zweef a{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;
    border-radius:999px;font-family:'Archivo',sans-serif;font-weight:700;font-size:14.5px;
    text-decoration:none;box-shadow:0 4px 16px rgba(17,25,34,.22);white-space:nowrap;
    transition:transform .15s}
.vg .zweef a:hover{transform:translateY(-2px)}
.vg .zweef .zwa{background:#25D366;color:#0b2b16}
.vg .zweef .zbel{background:var(--diep);color:#fff}
@media(max-width:980px){.vg .zweef{display:none}}

/* ── openheid over prijs, zonder bedrag in de etalage ──────────────────── */
.vg .prijsopen{display:flex;gap:30px;align-items:center;justify-content:space-between;
    flex-wrap:wrap;margin-top:34px;padding:26px 30px;background:var(--diep);
    border-radius:16px;color:#C6CCD5}
.vg .prijsopen>div{min-width:0;max-width:62ch}
.vg .prijsopen p{margin:0!important;font-size:15.5px!important;line-height:1.6!important}
.vg .popenkop{font-family:'Archivo',sans-serif;font-weight:700;font-size:19px!important;
    color:#fff!important;margin:0 0 6px!important}
.vg .prijsopen .knop.rand{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);
    flex:none}
.vg .prijsopen .knop.rand:hover{border-color:var(--vuur);color:var(--vuur)}

/* ══ HET BREDE HUBMENU ══════════════════════════════════════════════════ */
/* Zie _menufix.py: drie fouten die samen het menu onleesbaar maakten.      */

/* 1 een hubkolom is een lijst onder elkaar, geen raster van twee */
.vg .subkolommen ul,.vg .subkolom ul{display:block;grid-template-columns:none}

/* 2+3 het brede paneel hoort onder de kopbalk te hangen, gecentreerd op de
   pagina en niet op het menu-item waar de muis toevallig boven staat */
.vg .nav li.heeftsub:has(.sub.breed){position:static}
.vg .sub.breed{left:50%;margin-left:0;
    transform:translateX(-50%) translateY(-6px)}
.vg .heeftsub:hover .sub.breed,
.vg .heeftsub:focus-within .sub.breed{transform:translateX(-50%)}

/* de regels in een hubkolom mogen wat compacter; er passen er vier naast elkaar */
.vg .sub.breed .subkolom li>a{padding:7px 10px}
.vg .sub.breed .subkolom li>a b{font-size:14px}

/* ══ EEN LAGERE, RUSTIGERE HERO ═════════════════════════════════════════ */
/* Zie _herolager.py. Was 853px met zes blokken erin; dat leest als een      */
/* folder. Voor het soort woning waar wij komen hoort de eerste indruk rustig */
/* te zijn: kop, een zin, twee knoppen, en een regel die het afmaakt.        */
.vg .hero{min-height:min(600px,74vh)}
.vg .hero .in{padding-top:58px;padding-bottom:0}
.vg .heroTekst{padding-bottom:34px}
.vg .hero h1{font-size:clamp(30px,4.1vw,46px)!important}
.vg .hero .lood{font-size:18px!important;max-width:46ch}
.vg .hero .acties{margin-top:26px}
.vg .heroMensen img{max-height:440px}

/* de regel onder de knoppen: dezelfde feiten, een kwart van de ruimte */
.vg .heroRegel{display:flex;align-items:center;flex-wrap:wrap;gap:0 14px;
    margin:22px 0 0!important;font-size:14px!important;color:#B9C0CB!important;
    line-height:1.5!important}
.vg .heroRegel i{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.4);
    display:inline-block}
.vg .heroRegel a{color:#DDE2E9;text-decoration:none;border-bottom:1px solid rgba(233,161,59,.5)}
.vg .heroRegel a:hover{color:#fff;border-color:var(--vuur)}
@media(max-width:980px){
.vg .hero{min-height:0}
.vg .hero .in{padding-top:44px}
.vg .heroTekst{padding-bottom:22px}
.vg .heroRegel{gap:0 10px;font-size:13px!important}
}

/* ══ VAKWERK: LATEN ZIEN IN PLAATS VAN BEWEREN ══════════════════════════ */
/* Twee kolommen, niet vier: vier maakt er een productgrid van. De tekst      */
/* staat onder de foto en niet eroverheen - rustiger, en beter te lezen.      */
.vg .vakwerk{padding:74px 0 84px}
.vg .vakband{display:grid;grid-template-columns:1fr 1fr;gap:52px 48px;margin-top:46px}
.vg .vakblok{margin:0;min-width:0}
.vg .vakblok img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
    border-radius:14px;background:var(--zand)}
.vg .vakblok figcaption{padding:20px 2px 0;text-align:left}
.vg .vakblok figcaption b{display:block;font-family:'Archivo',sans-serif;font-weight:700;
    font-size:20px;line-height:1.25;color:var(--ink);margin-bottom:9px;letter-spacing:-.01em}
.vg .vakblok figcaption span{display:block;font-size:15.5px;line-height:1.62;color:var(--ink2);
    max-width:52ch}
@media(max-width:900px){
.vg .vakwerk{padding:52px 0 58px}
.vg .vakband{grid-template-columns:1fr;gap:38px;margin-top:32px}
.vg .vakblok figcaption b{font-size:18.5px}
}

/* de merkenrij hoort niet bovenaan als eerste indruk; hij staat nu onderin */
.vg .merken{opacity:.85}
.vg .merken em{letter-spacing:.14em}

/* ══ DE TELEFOON: 47% VAN HET VERKEER ═══════════════════════════════════ */
@media(max-width:640px){
/* 1 het nummer uit de topbalk: het past niet en staat onderaan al */
.vg .topacties{gap:10px}
.vg .top .in{gap:10px}
.vg .topacties>a[href^="tel"],.vg .topacties{font-size:12.5px}
.vg .top .in>.topacties{white-space:nowrap}
.vg .topbel{display:none}

/* 2 n aanbod boven de vouw. Bellen en WhatsApp staan in de vaste balk
   onderaan, binnen duimbereik; ze hoeven er niet ook nog eens boven te staan.
   Op de klasse selecteren werkte niet: de binnenhero gebruikt een andere knop
   dan de voorpagina. Nu: wat er ook staat, alleen de eerste blijft. */
.vg .hero .acties>a:not(:first-child){display:none}
.vg .hero .acties{margin-top:22px}
.vg .hero .acties .knop{width:100%;justify-content:center}

/* 4 de ooglijn is een ooglijn, geen tweede kop */
.vg .hero .oog{font-size:10.5px!important;letter-spacing:.09em!important}
.vg .hero .lood{font-size:16.5px!important;line-height:1.55!important}
}

/* 3 op een telefoon moet je het huis kunnen zien; de laag houdt bovenin
   genoeg dekking voor de kop en loopt daaronder ver open */
@media(max-width:980px){
.vg .hero:before{clip-path:none;
    background:linear-gradient(180deg,rgba(17,25,34,.92) 0%,rgba(17,25,34,.88) 42%,
        rgba(17,25,34,.62) 74%,rgba(17,25,34,.34) 100%)}
}

/* op een telefoon wordt de heldfoto smal uitgesneden. Met het standaardbrandpunt
   hield je een witte gevelpijler over: geen riet, geen camera's, geen villa.
   Naar links opgeschoven zodat de rieten kap en beide camera's in beeld blijven -
   dat is waar de foto over gaat. */
@media(max-width:640px){
.vg .hero .heroFoto{object-position:32% 30%!important}
}

/* ══ BINNENPAGINA'S ═════════════════════════════════════════════════════ */
/* Zie _binnenfix.py. Drie dingen die op elke binnenpagina fout stonden.     */

/* 1 de knop in de kopbalk mag niet afbreken; hij past prima op een regel */
.vg .kop .knop{white-space:nowrap;flex:none}

/* 2 het beeldblok volgt de foto in plaats van hem in een 4:3-kader te dwingen */
.vg .hero.licht .heroBeeld{aspect-ratio:auto;background:transparent;
    display:flex;align-items:center;justify-content:center}
.vg .hero.licht .heroBeeld img{width:auto;max-width:100%;height:auto;max-height:330px;
    border-radius:14px;object-fit:contain;align-self:center}

/* het bijschrift hoort ONDER de foto, niet als tweede kolom ernaast */
.vg .hero.licht .heroBeeld{flex-direction:column;align-items:stretch}
.vg .hero.licht .heroBeeld figcaption{margin-top:12px;text-align:left}

/* 3 een binnenhero is zo hoog als wat erin staat.
   De sectie had 60px lucht boven en onder BOVENOP de 44/52 van de binnenrand;
   samen 216px leegte om 434px inhoud. Dat is geen rust maar een gat. */
.vg .hero.licht{min-height:0;padding-top:16px;padding-bottom:24px}
.vg .hero.licht .in{padding-top:34px;padding-bottom:40px}