/* =====================================================================
   Vixx — eigen stylesheet die de look & feel van vixx.nl reproduceert.
   Schoon opgebouwd (geen WordPress-theme-CSS). Huisstijl:
     navy  #002755   ·  teal-accent #36ccc7  ·  geel #f8bb16
     grijs #f6f6f6   ·  muted #667d99         ·  wit  #ffffff
   Lettertype: Mont (licensed) → lokaal gehost Montserrat, gedeclareerd
   onder dezelfde familienamen zodat alles Mont "denkt" te gebruiken.
   ===================================================================== */

@font-face {
    font-family: 'Mont-Regular';
    src: url('../fonts/Montserrat-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Mont-Bold';
    src: url('../fonts/Montserrat-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Mont-Heavy';
    src: url('../fonts/Montserrat-ExtraBold.woff2') format('woff2');
    font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Variable.woff2') format('woff2');
    font-weight: 300 800; font-style: normal; font-display: swap;
}

:root {
    --navy:  #002755;
    --teal:  #36ccc7;
    --yellow:#f8bb16;
    --grey:  #f1f4f7;
    --muted: #667d99;
    --line:  #e2e6eb;
    --maxw:  1290px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--navy);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }

h1, h2, h3, h4, h5, h6 { font-family: 'Mont-Heavy', 'Mont-Bold', sans-serif; color: var(--navy); line-height: 1.2; margin: 0 0 .6em; }
p { margin: 0 0 1em; }
a { color: var(--navy); text-decoration: none; }
img { max-width: 100%; }
strong { font-family: 'Mont-Bold', sans-serif; color: var(--teal); font-weight: 700; }

/* ---------- Grid ---------- */
.row {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}
.col { flex: 1 1 0; min-width: 0; }
.span-2-of-5 { flex: 1 1 42%; }
.span-1-of-3 { flex: 1 1 30%; }
.span-2-of-3 { flex: 2 1 60%; }
.span-1-of-2 { flex: 1 1 44%; }
.span-2-of-2 { flex: 1 1 100%; }
.span-1-of-6 { flex: 1 1 14%; }

.section__padding--default { padding: 80px 0; }
.section__padding--small   { padding: 64px 0; }
.section__color--white { background: #fff; }
.section__color--grey  { background: var(--grey); }
.mb-5 { margin-bottom: 2rem; }
.mt-10 { margin-top: 1.4rem; }
.mt-40 { margin-top: 2rem; }

/* ---------- Knoppen ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px; border-radius: 999px; font-family: 'Mont-Bold', sans-serif;
    font-size: 15px; font-weight: 700; cursor: pointer; transition: all .2s; border: 3px solid transparent;
}
/* Pijl-icoontjes altijd klein (svg's zijn intrinsiek groot) */
.button-arrow { width: 15px; height: auto; display: inline-block; vertical-align: middle; transition: transform .2s; }
.btn:hover .button-arrow { transform: translateX(4px); }
.btn-full { background: var(--yellow); border-color: var(--yellow); color: #fff; }
.btn-full:hover { background: #d59d06; border-color: #d59d06; color: #fff; }
.btn-empty { padding: 6px 0; color: var(--navy); background: transparent; }
.btn-empty:hover { color: var(--yellow); }

/* =====================================================================
   HEADER / NAVIGATIE  (transparant over de hero)
   ===================================================================== */
.vixx-header { position: relative; min-height: 64vh; display: flex; flex-direction: column; }
/* Subpagina-hero (bevat .vixx-hero-page) is compacter dan de homepage-hero,
   zodat content eerder in beeld komt (betere conversie). Beeld iets lager
   uitsnijden zodat het onderwerp binnen de kortere banner in beeld blijft. */
.vixx-header:has(.vixx-hero-page) { min-height: 38vh; }
.vixx-header:has(.vixx-hero-page) .header-overlay { background-position: center top; }
.vixx-header .header-overlay {
    position: absolute; inset: 0; z-index: -1;
    background-size: cover; background-position: center top;
    background-color: var(--navy);
}
/* Foto in een eigen laag: navy vlak eerst, foto fadet in zodra hij binnen is
   (class is-loaded via inline script in header.php; <noscript> toont hem direct). */
.vixx-header .header-overlay::before {
    content: ""; position: absolute; inset: 0;
    background-image: var(--hero); background-size: cover;
    background-position: inherit; background-repeat: no-repeat;
    opacity: 0; transition: opacity .45s ease-out;
}
.vixx-header .header-overlay.is-loaded::before { opacity: 1; }
@media (max-width: 767px) {
    .vixx-header .header-overlay::before { background-image: var(--hero-m, var(--hero)); }
}
@media (prefers-reduced-motion: reduce) {
    .vixx-header .header-overlay::before { transition: none; }
}
/* width/height-attributen (zie vixx_optimize_html) reserveren ruimte; hoogte
   blijft automatisch tenzij een eigen regel iets anders zegt (:where = 0 specificiteit). */
:where(img[width][height]) { height: auto; }
.vixx-header .header-overlay::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,39,85,.55) 0%, rgba(0,39,85,.15) 40%, rgba(0,39,85,.35) 100%);
}

.transparent-nav {
    position: relative; z-index: 20;
    background: linear-gradient(180deg, rgba(0,39,85,.85), rgba(0,39,85,0));
    padding: 20px 0;
}
.transparent-nav .row { align-items: center; gap: 24px; flex-wrap: nowrap; }
.logo__img { height: 44px; width: auto; display: block; }

.menu-vixx-nav-container { margin-left: auto; }
.main-nav { font-family: 'Mont-Regular', sans-serif;
    display: flex; align-items: center; gap: 30px;
    list-style: none; margin: 0; padding: 0;
}
.main-nav > li { position: relative; }
.main-nav > li > a {
    color: #fff; font-family: 'Mont-Regular', sans-serif; font-size: 16px; font-weight: 400;
    white-space: nowrap; transition: color .2s;
}
.main-nav > li > a:hover { color: var(--yellow); }

/* dropdowns */
.main-nav .sub-menu {
    position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px);
    min-width: 210px; background: #fff; border-radius: 10px; box-shadow: 0 16px 40px rgba(0,39,85,.18);
    list-style: none; margin: 0; padding: 8px 0; opacity: 0; visibility: hidden; transition: all .2s; z-index: 30;
}
.main-nav > li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.main-nav .sub-menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.main-nav .sub-menu li a { display: block; padding: 10px 22px; color: var(--navy); font-size: 14px; white-space: nowrap; }
.main-nav .sub-menu li a:hover { background: var(--grey); color: var(--teal); }

/* CTA-knop */
.main-nav .navbar-cta a {
    background: var(--yellow); color: #fff; padding: 11px 22px; border-radius: 999px;
    font-family: 'Mont-Bold', sans-serif;
}
.main-nav .navbar-cta a:hover { background: #fff; color: var(--navy); }

/* Taal-switch (statisch, sfeer van origineel) */
.nav-lang { color: #fff; font-size: 14px; font-family: 'Mont-Bold', sans-serif; white-space: nowrap; }
.nav-lang a { color: rgba(255,255,255,.6); }
.nav-lang a:hover { color: #fff; }
.nav-lang .active { color: #fff; }

/* Burger (mobiel) */
.burger-menu { display: none; cursor: pointer; margin-left: auto; }
.burger-menu .line-menu { width: 26px; height: 2px; background: #fff; display: block; margin: 6px 0; border-radius: 2px; transition: .3s; }

/* Mobiel overlay-menu */
.navik-header-overlay {
    position: fixed; inset: 0; background: var(--navy); z-index: 1000;
    display: flex; align-items: center; justify-content: center; overflow-y: auto; overflow-x: hidden;
    max-width: 100vw;
    /* Dicht: buiten beeld en onzichtbaar, zodat het menu de pagina niet breder maakt (zijwaarts scrollen op mobiel) */
    transform: translateX(100%); visibility: hidden; transition: transform .33s ease, visibility 0s linear .33s;
}
.navik-header-overlay.menu-open { transform: translateX(0); visibility: visible; transition: transform .33s ease, visibility 0s; }
html, body { overflow-x: clip; }
.overlay-nav-list { list-style: none; padding: 0; margin: 0; text-align: center; }
.overlay-nav-list > li { margin: 16px 0; }
.overlay-nav-list > li > a { color: #fff; font-size: 22px; font-family: 'Mont-Bold', sans-serif; }
.overlay-nav-list .sub-menu { list-style: none; padding: 6px 0 0; margin: 0; }
.overlay-nav-list .sub-menu li a { color: #9fb2c9; font-size: 15px; line-height: 2; }
.overlay-nav-list .navbar-cta a { display: inline-block; margin-top: 14px; background: var(--yellow); color: #fff; padding: 12px 26px; border-radius: 999px; }

/* =====================================================================
   HERO-CONTENT
   ===================================================================== */
.vixx-hero-home { flex: 1; display: flex; align-items: center; padding: 40px 0 56px; text-align: center; }
.vixx-hero-home .row { flex-direction: column; align-items: center; }
.vixx-hero-home h1 {
    color: #fff; font-size: clamp(32px, 4vw, 52px); margin: 0 auto 44px;
    text-shadow: 0 2px 18px rgba(0,0,0,.25); max-width: 900px;
}
.vixx-hero-home .services {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: 100%;
}
/* Vijf diensten (sinds belastingaangifte/finance/marketing uit de structuur zijn): één rij van vijf */
@media (min-width: 1101px) {
    .vixx-hero-home .services:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, 1fr); }
}
.vixx-hero-home .service {
    background: rgba(255,255,255,.5);
    border: 1px solid rgba(255,255,255,.65);
    box-shadow: 0 8px 32px rgba(0,20,45,.18);
    backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-radius: 12px; padding: 26px; text-align: left;
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px; transition: all .25s;
}
.vixx-hero-home .service:hover { background: #fff; border-color: #fff; transform: translateY(-3px); }
.vixx-hero-home .service .service-title { font-family: 'Mont-Heavy', 'Mont-Bold', sans-serif; font-size: 24px; color: var(--navy); margin: 0; }
.vixx-hero-home .service .service-link { color: var(--navy); font-size: 14px; padding: 0; background: none; }
.vixx-hero-home .service:hover .service-link { color: var(--yellow); }
.vixx-hero-home .service .service-link svg { width: 15px; height: 15px; }

/* =====================================================================
   OVER VIXX (video + tekst)
   ===================================================================== */
.over-vixx-display { align-items: center; }
.iframe-container { position: relative; padding-top: 56.25%; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,39,85,.12); }
.iframe-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.over-vixx-display h2 { font-size: clamp(24px, 2.4vw, 34px); }
.over-vixx-display p { color: #40566f; font-size: 18px; }

/* =====================================================================
   HYPOTHEEK-CALCULATOR
   ===================================================================== */

.moonsio-iframe-calculator__content {
    /* Geen witte kaart om de sectie heen (blok-in-blok); de navy trigger-kaart
       van de rekentool is het blok zelf */
    background: transparent; border-radius: 0; box-shadow: none;
    padding: 0; margin: 0; width: 100%;
}
.moonsio-iframe-calculator__title { font-size: 30px; }
.moonsio-iframe-calculator__intro { color: #40566f; margin-top: 12px; }
.moonsio-iframe-calculator__disclaimer { margin-top: 24px; color: var(--muted); font-size: 14px; }
.moonsio-iframe-calculator__read-more-link { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 4px; }
.moonsio-iframe-calculator__read-more-link-icon-svg { width: 18px; height: 18px; }

.vixx-calc-placeholder {
    background: linear-gradient(135deg, var(--navy) 0%, #013a7a 100%);
    color: #fff; border-radius: 12px; padding: 48px 40px; text-align: center;
    min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.vixx-calc-placeholder__badge { background: var(--yellow); color: var(--navy); font-family: 'Mont-Bold',sans-serif; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; border-radius: 20px; }
.vixx-calc-placeholder h3 { color: #fff; font-size: 26px; margin: 4px 0 0; }
.vixx-calc-placeholder p { color: #cdd6e2; max-width: 460px; margin: 0; }

/* =====================================================================
   CONTACTFORMULIER "Daag ons uit!" + verhalen-slider
   ===================================================================== */
.section__contactform-gf .row { align-items: flex-start; }
.h1-flex-popup { font-size: clamp(30px, 3.5vw, 46px); margin-bottom: 1.2rem; }

.contactform-intro { color: #40566f; font-size: 17px; margin-bottom: 24px; max-width: 520px; }

/* Formulier als witte kaart, in dezelfde stijl als de rest van de site */
.section__contactform-gf .gf-contactform {
    background: #dbfaf5; border-radius: 14px; padding: 34px;
    box-shadow: 0 10px 30px rgba(0,39,85,.14);
}
.section__contactform-gf .vixx-form input, .section__contactform-gf .vixx-form textarea { background: #fff; border-color: #c3ece9; }
.section__contactform-gf .vixx-form input:focus, .section__contactform-gf .vixx-form textarea:focus { border-color: var(--teal); }
.vixx-form { display: flex; flex-wrap: wrap; gap: 18px 16px; }
.vixx-form__field { display: flex; flex-direction: column; gap: 7px; }
.vixx-form__field--full { flex: 1 1 100%; }
.vixx-form__field--half { flex: 1 1 calc(50% - 8px); }
.vixx-form__field label { font-family: 'Mont-Bold', sans-serif; font-size: 13px; color: var(--navy); }
.vixx-form input, .vixx-form textarea {
    width: 100%; padding: 14px 16px; border: 1.5px solid #e4e8ee; border-radius: 10px;
    background: #fbfcfd; font-size: 15px; font-family: inherit; color: var(--navy); transition: all .2s;
}
.vixx-form input::placeholder, .vixx-form textarea::placeholder { color: #9aa7b6; }
.vixx-form textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.vixx-form input:focus, .vixx-form textarea:focus {
    outline: none; border-color: var(--teal); background: #fff;
    box-shadow: 0 0 0 3px rgba(54,204,199,.18);
}
.vixx-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0; }
.vixx-form__footer { flex: 1 1 100%; display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.vixx-form .gform_button { border: none; cursor: pointer; }
.vixx-form .gform_button:disabled { opacity: .6; cursor: default; }
.vixx-form__msg { font-size: 14px; font-family: 'Mont-Bold', sans-serif; }
.vixx-form__msg--ok { color: #1a7f37; }
.vixx-form__msg--err { color: #cf2e2e; }
@media (max-width: 560px) { .vixx-form__field--half { flex: 1 1 100%; } }

/* Slider */
.glider-contain { position: relative; }
.glider .content-glider { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,39,85,.10); }
.glider .image-glider img { width: 100%; height: 210px; object-fit: cover; display: block; }
.glider .glider-text { padding: 22px 24px 28px; }
.glider .glider-text .testimonial { font-size: 20px; margin: 0 0 10px; }
.glider .glider-text .blue { color: var(--teal); }
.glider .glider-text > div { color: #40566f; font-size: 15px; margin-bottom: 6px; }
.verhaal-button { color: var(--navy); font-family: 'Mont-Bold',sans-serif; }
.verhaal-button .button-arrow { width: 14px; }
.glider-prev, .glider-next { position: absolute; top: 42%; z-index: 5; background: none; border: none; font-size: 30px; color: var(--navy); cursor: pointer; }
.glider-prev { left: -4px; } .glider-next { right: -4px; }
.glider-prev.disabled, .glider-next.disabled { opacity: .3; }
.glider-dots { justify-content: center; margin-top: 16px; }
.glider-dot { background: #c9d3e0; } .glider-dot.active { background: var(--navy); }

/* =====================================================================
   VERHAAL-BLOKKEN (3 kaarten)
   ===================================================================== */
.service-list.service-list__small { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; list-style: none; margin: 0; padding: 0; }
.service-list__small .service-block__content { background: var(--navy); color: #fff; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.service-list__small .service-block__top img:first-child { width: 100%; height: 200px; object-fit: cover; object-position: 50% 22%; display: block; }
.service-list__small .service-block__top h2 { color: #fff; font-size: 20px; padding: 20px 24px 0; }
.service-list__small .service-block__arrow { display: none; }
.service-list__small .service-block__content-wrapper { padding: 12px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.service-list__small .service-block__content-wrapper p { color: #b9c6d8; font-size: 14px; margin: 0; }
.service-list__small .service-block__content-wrapper br { display: none; }
.service-list__small .verhaal-button { margin-top: auto; color: var(--yellow); }

/* =====================================================================
   CONTACT-CTA
   ===================================================================== */
.contact-title { width: 60%; margin: 0 auto 50px; }
.contact-title h2 { font-size: clamp(24px, 2.6vw, 34px); }
/* Witte (en navy) kaart met schaduw; content bepaalt de hoogte (geen height:100%),
   zodat de kaarten kort blijven en de foto ertussenuit kan steken. */
.text-contact {
    background: #fff;
    padding: 40px;
    box-shadow: 2px 0 24px 13px rgba(0,0,0,.07);
    border-radius: 12px;
    position: relative;
    min-height: 210px;
}
.text-contact h2.contact { color: inherit; font-size: 26px; margin-bottom: 1.6rem; }
/* Man-cutout: absoluut rechts-onderin de linker kaart → steekt tussen de
   twee kaarten omhoog (rechterrand linker kaart = midden van de sectie).
   De kaart met beeld krijgt extra ruimte rechts zodat kop en knop nooit
   tegen of onder de foto vallen. */
.contact-img { position: absolute; bottom: 0; right: 6px; height: 300px; width: auto; max-width: none; }
.text-contact:has(.contact-img) { padding-right: 240px; }
.contact-mini-cta { text-align: center; font-size: 17px; margin-top: 20px; color: var(--navy); }
.click { color: var(--yellow); text-decoration: underline; }
@media (max-width: 900px) {
    .contact-title { width: 100%; }
    .contact-img { position: static; height: 220px; display: block; margin: 20px auto 0; }
    .text-contact:has(.contact-img) { padding-right: 40px; }
}

/* =====================================================================
   FAQ
   ===================================================================== */
.dienst { font-size: 28px; }
.container-accordion { border-top: 1px solid var(--line); }
.accordion {
    width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--line);
    padding: 20px 0; font-family: 'Mont-Bold', sans-serif; font-size: 17px; color: var(--navy);
    cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.accordion img.up { width: 16px; height: auto; transition: transform .3s; }
.accordion.active img.up { transform: rotate(180deg); }
.panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.panel p { padding: 4px 0 20px; color: #40566f; margin: 0; }

/* =====================================================================
   POPUPS (verhalen + terugbel) via :target
   ===================================================================== */
.container-flex-popup .flex-up { display: none; }
.container-flex-popup .flex-up:target {
    display: flex; position: fixed; inset: 0; margin: auto; z-index: 9999;
    max-width: 1000px; max-height: 88vh; background: #fff; border-radius: 12px;
    overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.35);
}
.container-flex-popup .flex-up:target::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(0,39,85,.6); }
.container-flex-popup .flex-up .flex-left { flex: 1 1 55%; padding: 44px; overflow-y: auto; }
.container-flex-popup .flex-up .flex-left .uitdaging-title, .container-flex-popup .flex-up .flex-left h1 { margin-bottom: 1rem; }
.container-flex-popup .flex-up .flex-left p { color: #40566f; }
/* Intro-regel in de terugbel-popup ("Laat je naam en nummer achter...") wit */
.container-flex-popup .flex-up .flex-left .flex-form > p { color: #fff; }
.container-flex-popup .flex-up .flex-right { flex: 1 1 45%; background-size: cover; background-position: center; position: relative; min-height: 300px; }
.container-flex-popup .flex-up .close, .container-flex-popup .flex-up .close-1 {
    position: absolute; top: 16px; right: 20px; font-size: 30px; line-height: 1; color: var(--navy); z-index: 3;
}
.container-flex-popup .flex-up .flex-right .close { color: #fff; }
.flex-form .gf-contactform--grey input { background: var(--grey); }

/* =====================================================================
   FOOTER
   ===================================================================== */
footer { background: var(--navy); color: #fff; padding: 64px 0 30px; }
footer .row { gap: 24px; }
footer .row:first-child { border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 34px; }
footer .col { flex: 1 1 150px; }
footer .footer-logo { width: 120px; height: auto; }
footer h6 { color: #fff; font-size: 15px; margin: 0 0 14px; }
footer h6:not(:first-child) { margin-top: 22px; }
footer .menu { list-style: none; padding: 0; margin: 0; }
footer .menu li { margin: 8px 0; }
footer .menu li a { color: #a9b8cc; font-size: 14px; }
footer .menu li a:hover { color: var(--yellow); }
footer .tel-footer a { color: #fff; font-family: 'Mont-Bold',sans-serif; display: inline-flex; align-items: center; }
.icon-telefoon { width: 18px; height: auto; margin-right: 8px; }
.telefoon a { display: inline-flex; align-items: center; }
.telefoon .icon-telefoon { flex: none; }
footer .footer-nav { list-style: none; display: flex; flex-wrap: wrap; gap: 20px; padding: 0; margin: 0; align-items: center; }
footer .footer-nav.nav-left { flex: 1; }
footer .footer-nav li, footer .footer-nav li a { color: #a9b8cc; font-size: 13px; }
footer .footer-nav li a:hover { color: var(--yellow); }

/* =====================================================================
   SUBPAGINA-HERO
   ===================================================================== */
.vixx-hero-page { padding: 30px 0 40px; text-align: left; }
.vixx-hero-page .row { width: 100%; align-items: flex-start; }
.vixx-hero-page .hero-eyebrow { color: var(--teal); font-family: 'Mont-Bold', sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: 14px; margin-bottom: 14px; }
.vixx-hero-page h1 { margin: 0 0 18px; font-size: clamp(28px, 3.2vw, 42px); max-width: 720px; }
.vixx-hero-page .hero-sub { color: #eaf0f7; font-size: 19px; max-width: 640px; margin: 0; text-shadow: 0 1px 10px rgba(0,0,0,.25); text-wrap: pretty; }
.vixx-hero-page h1 { text-wrap: balance; }

/* =====================================================================
   BLOK: TEKST (1–3 kolommen)
   ===================================================================== */
.block-text__row { align-items: center; gap: 40px; }
.block-text__title { flex: 1 1 100%; font-size: clamp(26px, 2.6vw, 34px); margin-bottom: .3em; }
/* Kolommen breken netjes af naar meerdere rijen i.p.v. te versmallen
   (bv. FAQ met 7–8 items → 2–3 per rij i.p.v. 8 piepsmalle kolommetjes). */
.block-text__col { flex: 1 1 300px; min-width: 0; }
.block-text__col h3 { font-size: 21px; margin-bottom: .5em; }
.block-text__body { color: #40566f; }
.block-text__body p { margin: 0 0 1em; }
.block-text__body strong { color: var(--teal); }
.block-text__body a { color: var(--teal); text-decoration: underline; }
.block-text__media { flex: 0 1 34%; min-width: 260px; }
.block-text__media img { width: 100%; height: auto; max-height: 420px; object-fit: cover; object-position: 50% 22%; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,39,85,.12); }
.block-text__media--plain img { object-fit: contain; object-position: center; }

/* =====================================================================
   BLOK: DIENSTEN / USP-KAARTEN
   ===================================================================== */
.block-services__intro { color: #40566f; max-width: 640px; margin: -.4rem auto 8px; }
.block-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; width: 100%; margin-top: 30px; text-align: left; }
.block-service-card {
    background: #fff; border: 1.5px solid #eef1f5; border-radius: 14px; padding: 30px;
    display: flex; flex-direction: column; gap: 12px; box-shadow: 0 10px 30px rgba(0,39,85,.06);
    transition: all .25s; color: var(--navy);
}
a.block-service-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,39,85,.12); border-color: #dfe4ea; }
.block-service-card h3 { font-size: 22px; margin: 0; }
.block-service-card p { color: #40566f; font-size: 15px; margin: 0; flex: 1; }
.block-service-card__link { color: var(--navy); font-family: 'Mont-Bold', sans-serif; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; }
a.block-service-card:hover .block-service-card__link { color: var(--yellow); }

/* =====================================================================
   BLOK: ADVISEURS (slider + grid)
   ===================================================================== */
.block-advisors__head { text-align: center; margin-bottom: 36px; }
.block-advisors__head h2 { font-size: clamp(26px, 2.6vw, 34px); }
.block-advisors__head p { color: #40566f; max-width: 640px; margin: 8px auto 0; }

.adviseur-card { border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,39,85,.10); background: #fff; }
.adviseur-card__photo { position: relative; aspect-ratio: 1/1; background: #dbe4ee; }
.adviseur-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.adviseur-card__initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Mont-Heavy','Mont-Bold',sans-serif; font-size: 44px; color: #7d93ad; }
.adviseur-card__wa { position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.adviseur-card__info { padding: 16px 18px 20px; }
.adviseur-card__info h3 { font-size: 18px; margin: 0 0 2px; }
.adviseur-card__info span { color: var(--muted); font-size: 13px; }

.adviseur-slider { position: relative; min-width: 0; max-width: 100%; }
.adviseur-scroller {
    display: flex; gap: 24px; overflow-x: auto; overflow-y: clip; padding: 12px 4px 30px;
    scroll-snap-type: x proximity;
    min-width: 0; max-width: 100%; scrollbar-width: none;
}
.adviseur-scroller::-webkit-scrollbar { display: none; }
.adviseur-scroller .adviseur-card { flex: 0 0 258px; scroll-snap-align: start; transition: transform .25s, box-shadow .25s; }
.adviseur-scroller .adviseur-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,39,85,.16); }

/* Zachte fade aan de randen (volgt de sectiekleur) zodat kaarten niet hard afsnijden */
.adviseur-slider::before, .adviseur-slider::after {
    content: ""; position: absolute; top: 0; bottom: 12px; width: 56px; z-index: 2; pointer-events: none;
}
.adviseur-slider::before { left: 0; }
.adviseur-slider::after  { right: 0; }
.section__color--white .adviseur-slider::before { background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.section__color--white .adviseur-slider::after  { background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
.section__color--grey  .adviseur-slider::before { background: linear-gradient(90deg, var(--grey), rgba(241,244,247,0)); }
.section__color--grey  .adviseur-slider::after  { background: linear-gradient(270deg, var(--grey), rgba(241,244,247,0)); }

/* Navigatieknoppen */
.adviseur-slider__nav {
    position: absolute; top: 132px; transform: translateY(-50%); z-index: 4;
    width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
    background: #fff; color: var(--navy); box-shadow: 0 6px 22px rgba(0,39,85,.20);
    display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.adviseur-slider__nav:hover { background: var(--navy); color: #fff; }
.adviseur-slider__nav--prev { left: -18px; }
.adviseur-slider__nav--next { right: -18px; }
.adviseur-slider__nav.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 700px) { .adviseur-slider__nav { display: none; } .adviseur-slider::before, .adviseur-slider::after { width: 24px; } }

.adviseur-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; align-items: stretch; }

/* =====================================================================
   BLOK: AFBEELDINGEN-GRID
   ===================================================================== */
.imagegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.imagegrid__item { position: relative; aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; background-size: cover; background-position: center; display: flex; align-items: flex-end; }
.imagegrid__item:nth-child(4n+1) { margin-top: 40px; }
.imagegrid__item:nth-child(4n+3) { margin-top: 60px; }
.imagegrid__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,39,85,.75)); transition: opacity .3s; }
.imagegrid__title { position: relative; z-index: 1; color: #fff; font-family: 'Mont-Heavy','Mont-Bold',sans-serif; font-size: 20px; padding: 18px; line-height: 1.2; }
.imagegrid__item:hover .imagegrid__overlay { background: linear-gradient(180deg, rgba(0,39,85,.2) 0%, rgba(0,39,85,.85)); }

/* =====================================================================
   BLOK: BLAUW CTA
   ===================================================================== */
.block-cta-blue { background: var(--navy); color: #fff; padding: 70px 0; }
.block-cta-blue h2 { color: #fff; font-size: clamp(26px, 2.8vw, 36px); max-width: 760px; }
.block-cta-blue h2 strong { color: var(--teal); }
.block-cta-blue p { color: #cdd6e2; max-width: 620px; margin: 4px 0 22px; }

/* =====================================================================
   BLOK: FULL-WIDTH BEELD
   ===================================================================== */
.block-fwimage { position: relative; background-size: cover; background-position: center; padding: 100px 0; }
.block-fwimage__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,39,85,.85) 0%, rgba(0,39,85,.45) 100%); }
.block-fwimage .row { position: relative; z-index: 1; }
.block-fwimage__content { max-width: 560px; color: #fff; }
.block-fwimage__content h2 { color: #fff; font-size: clamp(26px, 2.8vw, 38px); }
.block-fwimage__content h2 strong { color: var(--teal); }
.block-fwimage__content div { color: #eaf0f7; margin-bottom: 22px; }

/* =====================================================================
   404
   ===================================================================== */
.notfound { max-width: 640px; margin: 0 auto; padding: 0 24px; text-align: center; }
.notfound__code { font-family: 'Mont-Heavy','Mont-Bold',sans-serif; font-size: clamp(80px,12vw,140px); line-height: .9; color: #eef1f5; margin: 0 0 8px; }
.notfound__text { color: #40566f; font-size: 18px; margin: 0 auto 28px; max-width: 460px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1100px) {
    .vixx-hero-home .services { grid-template-columns: repeat(2, 1fr); }
    .service-list.service-list__small { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
    .block-services__grid { grid-template-columns: repeat(2, 1fr); }
    .imagegrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .menu-vixx-nav-container, .nav-lang { display: none; }
    .burger-menu { display: block; }
    .row { flex-direction: column; gap: 28px; }
    .col, .span-2-of-5, .span-1-of-3, .span-2-of-3, .span-1-of-2, .span-1-of-6 { flex: 1 1 100%; }
    /* Gestapelde kolommen altijd schermbreed: anders groeien ze mee met brede inhoud (zoals de verhalen-slider) */
    section .row > .col { width: 100%; max-width: 100%; min-width: 0; align-self: stretch; }
    .glider-contain { width: 100%; max-width: 100%; }
    .moonsio-iframe-calculator__content { margin: 0; padding: 26px; }
    .container-flex-popup .flex-up:target { flex-direction: column-reverse; max-height: 92vh; overflow-y: auto; }
    footer .col { flex: 1 1 45%; }
    .block-text__row { flex-direction: column; }
    .block-services__grid { grid-template-columns: 1fr; }
    .imagegrid__item { margin-top: 0 !important; }
}
@media (min-width: 901px) {
    .navik-header-overlay { display: none; }
}
@media (max-width: 560px) {
    .vixx-hero-home .services { grid-template-columns: 1fr; }
    footer .col { flex: 1 1 100%; }
}

/* =====================================================================
   HYPOTHEEKCALCULATOR  (.hypcalc — eigen rekentool, WFT LTI-toets)
   ===================================================================== */
.hypcalc { --calc-light: #dbfaf5; font-size: 16px; }
.hypcalc__step { display: none; animation: hcFade .4s ease; }
.hypcalc__step.is-active { display: block; }
@keyframes hcFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Voortgangsbalk */
.hypcalc__progress { display: none; margin: 0 48px 22px 0; }
.hypcalc__progress.is-on { display: block; }
.hypcalc__progress-bar { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; }
.hypcalc__progress-fill { height: 100%; background: linear-gradient(90deg, var(--teal), var(--navy)); width: 0; border-radius: 99px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.hypcalc__progress-lbl { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-top: 9px; font-family: 'Mont-Bold', sans-serif; }
.hypcalc__progress-lbl span:last-child { color: var(--navy); }

/* Startscherm: twee panelen */
.hypcalc__split { display: grid; grid-template-columns: 1fr 1.1fr; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,39,85,.10); }
@media (max-width: 820px) { .hypcalc__split { grid-template-columns: 1fr; } }
.hypcalc__split-left { background: #fff; padding: 34px; }
.hypcalc__split-right { background: var(--navy); color: #fff; padding: 34px; display: flex; flex-direction: column; }
.hypcalc__right-cap { color: var(--teal); font-size: 14px; font-family: 'Mont-Bold', sans-serif; margin-bottom: 2px; }
.hypcalc__amount { font-family: 'Mont-Heavy', sans-serif; font-size: clamp(38px, 6vw, 54px); line-height: 1; letter-spacing: -1.5px; margin: 2px 0 18px; }
.hypcalc__result-row { display: flex; flex-direction: column; margin-bottom: 14px; }
.hypcalc__result-row .k { color: #9fb6cf; font-size: 13px; }
.hypcalc__result-row .v { font-family: 'Mont-Bold', sans-serif; font-size: 21px; }
.hypcalc__note { font-size: 13px; color: #9fb6cf; margin: auto 0 0; padding-top: 14px; line-height: 1.5; }
.hypcalc__panel-title { font-family: 'Mont-Bold', sans-serif; color: var(--navy); font-size: 19px; margin: 0 0 20px; }

/* Kaart + koppen per stap */
.hypcalc__card { background: #fff; border-radius: 18px; box-shadow: 0 10px 40px rgba(0,39,85,.10); padding: 30px; }
.hypcalc__eyebrow { display: block; font-family: 'Mont-Bold', sans-serif; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; }
.hypcalc__step-h { font-family: 'Mont-Heavy', sans-serif; font-size: clamp(22px, 3.5vw, 30px); color: var(--navy); letter-spacing: -.5px; margin: 0 0 6px; line-height: 1.1; }
.hypcalc__sub-h { font-family: 'Mont-Bold', sans-serif; color: var(--navy); font-size: 16px; margin: 0 0 14px; }
.hypcalc__intro { color: var(--muted); margin: 0 0 24px; max-width: 560px; }

/* Invoervelden */
.hypcalc__field { display: block; margin-bottom: 16px; }
.hypcalc__cap { display: block; font-family: 'Mont-Bold', sans-serif; font-size: 14px; color: var(--navy); margin-bottom: 6px; }
.hypcalc__hint { font-family: 'Mont-Regular', sans-serif; color: var(--muted); font-size: 13px; }
.hypcalc__euro { position: relative; display: block; }
.hypcalc__euro::before { content: '€'; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; }
.hypcalc input[type=text], .hypcalc input[type=number], .hypcalc input[type=tel] {
    width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 15px;
    font-family: 'Mont-Regular', sans-serif; font-size: 16px; color: var(--navy); background: #fbfcfd;
    transition: border-color .18s, box-shadow .18s;
}
.hypcalc .hypcalc__euro input { padding-left: 30px; }
.hypcalc input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(54,204,199,.18); background: #fff; }
.hypcalc input::placeholder { color: #b6c0ca; }
.hypcalc__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
@media (max-width: 760px) { .hypcalc__grid2 { grid-template-columns: 1fr; } }
.hypcalc__err { display: none; color: #c0392b; font-size: 13px; margin: 6px 0 0; font-family: 'Mont-Bold', sans-serif; }
.hypcalc__err.is-on { display: block; }

/* Keuze-tegels */
.hypcalc__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .hypcalc__choices { grid-template-columns: 1fr; } }
.hypcalc__tile { border: 1.5px solid var(--line); border-radius: 14px; padding: 20px 18px; cursor: pointer; background: #fbfcfd; transition: .16s; display: flex; gap: 14px; align-items: flex-start; text-align: left; font-family: inherit; }
.hypcalc__tile:hover { border-color: var(--teal); background: #fff; }
.hypcalc__tile.is-sel { border-color: var(--teal); background: var(--calc-light); box-shadow: 0 0 0 2px rgba(54,204,199,.25); }
.hypcalc__tile-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--calc-light); display: grid; place-items: center; flex: none; color: var(--navy); }
.hypcalc__tile.is-sel .hypcalc__tile-ic { background: var(--teal); color: #fff; }
.hypcalc__tile-txt b { display: block; font-family: 'Mont-Bold', sans-serif; color: var(--navy); font-size: 16px; }
.hypcalc__tile-txt i { display: block; font-style: normal; font-size: 13px; color: var(--muted); margin-top: 2px; }

/* Werk-/koopblokken + uitleg */
.hypcalc__workblock { padding-top: 20px; }
.hypcalc__partnerblock { border-top: 1px dashed var(--line); margin-top: 20px; padding-top: 20px; }
.hypcalc__explainer { background: var(--calc-light); border-radius: 12px; padding: 14px 16px; font-size: 13.5px; color: var(--navy); margin-top: 8px; line-height: 1.5; }

/* Knoppen: teal = primair; geel (btn-full) = tweede CTA naast teal */
.hypcalc__btn-teal { background: var(--teal); border-color: var(--teal); color: var(--navy); }
.hypcalc__btn-teal:hover { background: #2bb8b3; border-color: #2bb8b3; color: var(--navy); }
.hypcalc__back { background: none; border: none; cursor: pointer; padding: 14px 6px; color: var(--muted); font-family: 'Mont-Bold', sans-serif; font-size: 15px; text-decoration: none; display: inline-block; margin-top: 12px; }
.hypcalc__back:hover { color: var(--navy); }
.hypcalc__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
.hypcalc__convert { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.hypcalc__convert[hidden] { display: none; }
.hypcalc__convert-msg { font-size: 14px; color: var(--muted); max-width: 340px; margin: 0; }
.hypcalc__convert-msg b { color: var(--navy); }
.hypcalc__convert-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* Uitkomstscherm */
.hypcalc__hero { background: var(--navy); border-radius: 18px; padding: 40px; color: #fff; position: relative; overflow: hidden; }
.hypcalc__hero::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(54,204,199,.18); }
.hypcalc__hero-cap { color: var(--teal); font-family: 'Mont-Bold', sans-serif; letter-spacing: 1px; text-transform: uppercase; font-size: 12px; }
.hypcalc__hero-big { font-family: 'Mont-Heavy', sans-serif; font-size: clamp(40px, 8vw, 68px); line-height: 1; letter-spacing: -2px; margin: 8px 0; }
.hypcalc__hero-month { font-size: 17px; color: #cfe9e7; position: relative; z-index: 1; margin: 0; }
.hypcalc__hero-month b { color: #fff; font-family: 'Mont-Bold', sans-serif; }
.hypcalc__hero-disclaimer { font-size: 11.5px; color: #9fb6cf; margin: 18px 0 0; max-width: 560px; position: relative; z-index: 1; line-height: 1.5; }
.hypcalc__how-link { display: inline-block; margin-top: 14px; color: var(--teal); font-family: 'Mont-Bold', sans-serif; text-decoration: none; border-bottom: 2px solid rgba(54,204,199,.4); position: relative; z-index: 1; }
.hypcalc__how-link:hover { border-color: var(--teal); color: var(--teal); }
.hypcalc__breakdown { margin-top: 22px; }
.hypcalc__bd-item { display: flex; justify-content: space-between; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 15px; }
.hypcalc__bd-item .k { color: var(--muted); }
.hypcalc__bd-item .v { font-family: 'Mont-Bold', sans-serif; color: var(--navy); white-space: nowrap; }
.hypcalc__bd-item--total { border-bottom: none; border-top: 2px solid var(--navy); margin-top: 4px; }
.hypcalc__bd-item--total .k, .hypcalc__bd-item--total .v { font-family: 'Mont-Heavy', sans-serif; font-size: 17px; color: var(--navy); }
.hypcalc__extra { background: var(--calc-light); border-radius: 14px; padding: 22px; margin-top: 22px; }
.hypcalc__extra h4 { font-family: 'Mont-Bold', sans-serif; color: var(--navy); margin: 0 0 12px; font-size: 16px; }
.hypcalc__extra .hypcalc__bd-item { border-color: rgba(0,39,85,.08); }
.hypcalc__budget { background: var(--teal); border-radius: 14px; padding: 24px 26px; margin-top: 22px; color: var(--navy); }
.hypcalc__budget-cap { font-family: 'Mont-Bold', sans-serif; letter-spacing: 1px; text-transform: uppercase; font-size: 12px; opacity: .75; }
.hypcalc__budget-big { font-family: 'Mont-Heavy', sans-serif; font-size: clamp(30px, 6vw, 46px); line-height: 1; letter-spacing: -1.5px; margin: 6px 0 4px; }
.hypcalc__budget-sub { font-size: 14px; margin: 0; opacity: .85; }
.hypcalc__budget-sub b { font-family: 'Mont-Bold', sans-serif; opacity: 1; }
.hypcalc__evdrop { margin-top: 14px; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.hypcalc__evdrop summary { cursor: pointer; list-style: none; padding: 14px 18px; font-family: 'Mont-Bold', sans-serif; color: var(--navy); font-size: 15px; display: flex; align-items: center; justify-content: space-between; }
.hypcalc__evdrop summary::-webkit-details-marker { display: none; }
.hypcalc__chev { transition: transform .2s; color: var(--teal); flex: none; }
.hypcalc__evdrop[open] .hypcalc__chev { transform: rotate(180deg); }
.hypcalc__evdrop-body { padding: 0 18px 18px; font-size: 14.5px; line-height: 1.6; color: var(--navy); }
.hypcalc__formula-mini { background: var(--calc-light); border-radius: 10px; padding: 12px 14px; font-family: 'Mont-Bold', sans-serif; color: var(--navy); font-size: 14px; margin-top: 10px; }
.hypcalc__result-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 26px; }
.hypcalc__result-cta { margin-left: auto; font-size: 14px; color: var(--muted); }

/* Pop-ups (pensioen + afspraak) */
.hypcalc__overlay { position: fixed; inset: 0; background: rgba(0,39,85,.55); display: none; place-items: center; padding: 20px; z-index: 70; backdrop-filter: blur(3px); }
.hypcalc__overlay.is-on { display: grid; }
.hypcalc__modal { background: #fff; border-radius: 20px; max-width: 480px; width: 100%; padding: 32px; box-shadow: 0 30px 80px rgba(0,0,0,.3); position: relative; animation: hcPop .3s ease; max-height: 90vh; overflow-y: auto; }
@keyframes hcPop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.hypcalc__modal h3 { font-family: 'Mont-Heavy', sans-serif; color: var(--navy); font-size: 22px; margin: 0 0 10px; letter-spacing: -.4px; }
.hypcalc__modal p { color: var(--muted); font-size: 15px; margin: 0 0 16px; }
.hypcalc__badge { width: 52px; height: 52px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; margin-bottom: 16px; }
.hypcalc__modal-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 24px; color: #9fb6cf; cursor: pointer; line-height: 1; }
.hypcalc__call { font-family: 'Mont-Bold', sans-serif; color: var(--navy); font-size: 17px; }
.hypcalc__call a { color: var(--teal); text-decoration: none; }
.hypcalc__modal-form .vixx-form__field { margin-bottom: 10px; }
.hypcalc__modal-form .hypcalc__grid2 { gap: 0 10px; }
.hypcalc__modal-actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; align-items: center; }

/* Trigger-kaart + lightbox */
.hypcalc__trigger { background: var(--navy); border-radius: 18px; padding: 34px; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; color: #fff; box-shadow: 0 10px 40px rgba(0,39,85,.10); }
.hypcalc__trigger h3 { font-family: 'Mont-Heavy', sans-serif; color: #fff; font-size: clamp(20px, 3vw, 26px); margin: 6px 0 8px; letter-spacing: -.5px; line-height: 1.15; }
.hypcalc__trigger p { color: #9fb6cf; max-width: 540px; margin: 0; font-size: 15px; line-height: 1.5; }
.hypcalc__trigger .btn { flex: none; }
.hypcalc__lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(0,39,85,.6); backdrop-filter: blur(4px); display: none; overflow-y: auto; padding: 32px 16px; }
.hypcalc__lightbox.is-on { display: block; animation: hcFade .3s ease; }
.hypcalc__lightbox-dialog { background: var(--grey); border-radius: 20px; max-width: 1060px; margin: 0 auto; padding: 56px 28px 28px; position: relative; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.hypcalc__lightbox-close { position: absolute; top: 14px; right: 16px; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1.5px solid var(--line); color: var(--navy); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: .16s; z-index: 1; }
.hypcalc__lightbox-close:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
body.hypcalc-noscroll { overflow: hidden; }
@media (max-width: 760px) {
    .hypcalc__lightbox { padding: 10px 8px; }
    .hypcalc__lightbox-dialog { padding: 52px 12px 16px; }
    .hypcalc__trigger { padding: 26px 22px; }
}

/* WhatsApp-bevestigingsmodal (adviseur-kaarten) */
.adviseur-card--wa { cursor: pointer; }
.wa-confirm { position: fixed; inset: 0; background: rgba(0,39,85,.55); display: none; place-items: center; padding: 20px; z-index: 80; backdrop-filter: blur(3px); }
.wa-confirm.is-on { display: grid; animation: hcFade .25s ease; }
.wa-confirm__modal { background: #fff; border-radius: 20px; max-width: 420px; width: 100%; padding: 32px; box-shadow: 0 30px 80px rgba(0,0,0,.3); position: relative; text-align: left; }
.wa-confirm__badge { width: 52px; height: 52px; border-radius: 50%; background: #25d366; display: grid; place-items: center; margin-bottom: 16px; }
.wa-confirm__title { font-family: 'Mont-Heavy', 'Mont-Bold', sans-serif; color: var(--navy); font-size: 22px; margin: 0 0 10px; letter-spacing: -.4px; }
.wa-confirm__text { color: var(--muted); font-size: 15px; margin: 0 0 20px; }
.wa-confirm__close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 24px; color: #9fb6cf; cursor: pointer; line-height: 1; }
.wa-confirm__actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.wa-confirm__yes { background: #25d366; border-color: #25d366; color: #fff; }
.wa-confirm__yes:hover { background: #1eb857; border-color: #1eb857; color: #fff; }
.wa-confirm__no { background: none; border: none; cursor: pointer; padding: 12px 6px; color: var(--muted); font-family: 'Mont-Bold', sans-serif; font-size: 15px; }
.wa-confirm__no:hover { color: var(--navy); }

/* Uitkomstscherm compact: past op desktop/tablet boven de fold.
   Hero smaller, breakdown links + overwaarde/woonbudget rechts in twee
   kolommen; zonder eigen vermogen spant de breakdown de volle breedte. */
#hc_sr .hypcalc__hero { padding: 24px 30px; }
#hc_sr .hypcalc__hero-big { font-size: clamp(32px, 4.5vw, 46px); margin: 6px 0; }
#hc_sr .hypcalc__hero-month { font-size: 15px; }
#hc_sr .hypcalc__hero-disclaimer { margin-top: 10px; font-size: 11px; }
#hc_sr .hypcalc__how-link { margin-top: 10px; font-size: 14px; }
#hc_sr .hypcalc__bd-item { padding: 8px 4px; font-size: 14px; }
#hc_sr .hypcalc__bd-item--total .k, #hc_sr .hypcalc__bd-item--total .v { font-size: 15px; }
#hc_sr .hypcalc__extra { padding: 14px 18px; margin-top: 16px; }
#hc_sr .hypcalc__extra h4 { margin-bottom: 4px; font-size: 15px; }
#hc_sr .hypcalc__budget { padding: 16px 20px; margin-top: 14px; }
#hc_sr .hypcalc__budget-big { font-size: clamp(26px, 3.5vw, 36px); }
#hc_sr .hypcalc__budget-sub { font-size: 13px; }
#hc_sr .hypcalc__evdrop { margin-top: 12px; }
#hc_sr .hypcalc__evdrop summary { padding: 10px 16px; font-size: 14px; }
#hc_sr .hypcalc__result-actions { margin-top: 14px; }
@media (min-width: 900px) {
    #hc_sr.is-active { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; align-items: start; }
    #hc_sr .hypcalc__hero, #hc_sr .hypcalc__result-actions { grid-column: 1 / -1; }
    #hc_sr .hypcalc__breakdown { grid-column: 1; margin-top: 16px; }
    #hc_sr .hypcalc__result-side { grid-column: 2; margin-top: 16px; }
    #hc_sr .hypcalc__extra { margin-top: 0; }
    /* Geen overwaarde/eigen geld? Dan breakdown over de volle breedte. */
    #hc_sr:not(:has(.hypcalc__result-side > :not([hidden]))) .hypcalc__breakdown { grid-column: 1 / -1; }
}

/* Uitkomst: nog compacter + disclaimer onderaan */
#hc_sr .hypcalc__hero { padding: 18px 28px; }
#hc_sr .hypcalc__hero-big { font-size: clamp(30px, 4vw, 42px); margin: 4px 0; }
#hc_sr .hypcalc__hero-month { font-size: 14px; }
#hc_sr .hypcalc__extra .hypcalc__bd-item { padding: 6px 4px; font-size: 13.5px; }
#hc_sr .hypcalc__budget { padding: 14px 18px; }
#hc_sr .hypcalc__result-actions { margin-top: 10px; }
.hypcalc__result-disclaimer { font-size: 11px; color: var(--muted); line-height: 1.45; margin: 8px 0 0; }
@media (min-width: 900px) { #hc_sr .hypcalc__result-disclaimer { grid-column: 1 / -1; } }

/* Uitkomst: finale compact-pass zodat alles boven de fold past (800px hoog) */
#hc_sr .hypcalc__hero { padding: 14px 26px; }
#hc_sr .hypcalc__hero-big { font-size: clamp(28px, 3.6vw, 38px); margin: 3px 0; }
#hc_sr .hypcalc__hero-month { font-size: 13px; }
#hc_sr .hypcalc__how-link { margin-top: 6px; font-size: 13px; }
#hc_sr .hypcalc__extra { padding: 10px 16px; margin-top: 0; }
#hc_sr .hypcalc__extra .hypcalc__bd-item { padding: 4px 4px; }
#hc_sr .hypcalc__budget { padding: 12px 16px; margin-top: 12px; }
#hc_sr .hypcalc__budget-big { font-size: 26px; }
#hc_sr .hypcalc__budget-sub { font-size: 12px; }
#hc_sr .hypcalc__evdrop { margin-top: 10px; }
#hc_sr .hypcalc__evdrop summary { padding: 8px 14px; font-size: 13.5px; }
#hc_sr .hypcalc__bd-item { padding: 7px 4px; }
.hypcalc__result-actions .hypcalc__result-disclaimer { flex: 1; margin: 0; min-width: 200px; font-size: 10.5px; }
.hypcalc__lightbox.is-on:has(#hc_sr.is-active) .hypcalc__lightbox-dialog { padding-top: 44px; }
.hypcalc__lightbox:has(#hc_sr.is-active) .hypcalc__progress { margin-bottom: 12px; }

/* Korte schermen (tablet landscape): lightbox-marges verkleinen */
@media (max-height: 820px) and (min-width: 761px) {
    .hypcalc__lightbox { padding: 10px 16px; }
    .hypcalc__lightbox-dialog { padding-bottom: 20px; }
}

/* =====================================================================
   TABS-BLOK "Waar vixx je mee helpt" (desktop tabs / mobiel accordeon)
   + hero-uitbreidingen (tweede regel blauw, USP's, knoppen)
   ===================================================================== */
.vixx-hero-page h1 .blue, h1 .blue, .blue { color: var(--teal); }
.hero-usps { list-style: none; margin: 18px 0 0; padding: 0; }
.hero-usps li { color: #fff; font-family: 'Mont-Bold', sans-serif; font-size: 15px; }
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.hero-btn-empty { color: #fff; }
.hero-btn-empty:hover { color: var(--yellow); }
.hero-sub p { margin-bottom: .8em; }

.block-tabs h2 { margin-bottom: 10px; }
.block-tabs__wrap { display: flex; gap: 48px; align-items: flex-start; }
.block-tabs__nav { flex: 0 0 340px; display: flex; flex-direction: column; }
.block-tabs__link { text-align: left; background: none; border: none; border-bottom: 1px solid var(--line); padding: 15px 6px; font-family: 'Mont-Bold', sans-serif; font-size: 16px; color: var(--navy); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; transition: color .15s; }
.block-tabs__link .button-arrow { flex: none; opacity: 0; transition: opacity .15s; }
.block-tabs__link:hover, .block-tabs__link.is-active { color: var(--yellow); }
.block-tabs__link:hover .button-arrow, .block-tabs__link.is-active .button-arrow { opacity: 1; }
.block-tabs__panels { flex: 1; min-width: 0; }
.block-tabs__panel { display: none; }
.block-tabs__panel.is-active { display: block; animation: hcFade .3s ease; }
.block-tabs__acc { display: none; }
.block-tabs__img { width: 100%; max-height: 340px; object-fit: cover; object-position: 50% 22%; border-radius: 12px; margin-bottom: 18px; }
.block-tabs__footer { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 28px; }
.block-tabs__tooltip { font-size: 14px; color: var(--muted); max-width: 520px; }
.block-tabs__tooltip b { color: var(--navy); }
@media (max-width: 900px) {
    .block-tabs__nav { display: none; }
    .block-tabs__panel { display: block; border-bottom: 1px solid var(--line); }
    .block-tabs__acc { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; background: none; border: none; text-align: left; padding: 15px 4px; font-family: 'Mont-Bold', sans-serif; font-size: 16px; color: var(--navy); cursor: pointer; }
    .block-tabs__acc img { width: 14px; transition: transform .2s; }
    .block-tabs__panel.is-open .block-tabs__acc img { transform: rotate(180deg); }
    .block-tabs__content { display: none; padding: 0 4px 16px; }
    .block-tabs__panel.is-open .block-tabs__content { display: block; }
    .block-tabs__panel.is-active:not(.is-open) .block-tabs__content { display: none; }
}

/* Services-kaarten met foto */
.block-service-card__img { display: block; margin: -6px -6px 14px; border-radius: 10px; overflow: hidden; }
.block-service-card__img img { width: 100%; height: 160px; object-fit: cover; object-position: 50% 22%; display: block; }

/* Navy content-secties (origineel section__color--blue) */
.section__color--blue { background: var(--navy); color: #fff; }
.section__color--blue h2, .section__color--blue h3, .section__color--blue h4 { color: #fff; }
.section__color--blue p, .section__color--blue li { color: #cfe0f2; }
.section__color--blue strong { color: var(--teal); }

/* Contact-iconen op adviseur-kaarten */
.adviseur-card__contacts { display: flex; gap: 8px; margin-top: 8px; }
.adviseur-card__contacts a { width: 28px; height: 28px; border-radius: 50%; background: var(--grey); color: var(--navy); display: grid; place-items: center; transition: .15s; }
.adviseur-card__contacts a:hover { background: var(--teal); color: #fff; }

/* Services-grid: bij precies 4 kaarten (of 8+) 4 op een rij i.p.v. 3+1 */
@media (min-width: 1101px) {
    .block-services__grid:has(> :nth-child(4):last-child),
    .block-services__grid:has(> :nth-child(8)) { grid-template-columns: repeat(4, 1fr); }
}

/* Adviseurs-wrapper als block-flow: de kolom-flex gaf de grid een indefinite
   breedte tijdens de intrinsieke hoogteberekening, waardoor aspect-ratio-foto's
   de rijen opbliezen tot ~1290px (enorme witruimte onder het team). */
.block-advisors > .row { display: block; }

/* Subpagina-hero: navy overlay zoals origineel (0.4 -> 0.6) zodat witte tekst
   op elke (ook lichte) hero-foto leesbaar is; subtitel volwit. */
.vixx-header:has(.vixx-hero-page) .header-overlay::after {
    background: linear-gradient(rgba(0,39,85,.45), rgba(0,39,85,.62));
}
.vixx-hero-page .hero-sub, .vixx-hero-page .hero-sub p { color: #fff; }
.vixx-hero-page .hero-btn-empty { color: #fff; font-size: 16px; }
.vixx-hero-page .hero-btn-empty:hover { color: var(--yellow); }

/* Video-facade: echte YouTube-thumbnail + play-knop, iframe pas na klik
   (geen zwarte splash meer, en sneller laden) */
.video-facade { position: absolute; inset: 0; cursor: pointer; background: var(--navy); }
.video-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-facade__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 66px; height: 66px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 30px rgba(0,0,0,.35); transition: transform .15s, background .15s; }
.video-facade__play svg { margin-left: 3px; }
.video-facade:hover .video-facade__play, .video-facade:focus-visible .video-facade__play { transform: translate(-50%,-50%) scale(1.1); background: #2bb8b3; }

/* Adviseur-slider: kaarten centreren wanneer ze niet overlopen (bijv. 1 adviseur) */
.adviseur-scroller { justify-content: safe center; }

/* Transparante uitsnedes/collages (expliciet gemarkeerd met image_style "plain"):
   geen kaart-schaduw of afronding om de rechthoek heen - de vorm is het beeld */
.block-text__media--plain img { box-shadow: none; border-radius: 0; }

/* Compacte hero (bijv. contactpagina): alleen titel, minimale hoogte */
.vixx-header:has(.vixx-hero-page--compact) { min-height: auto; }
.vixx-hero-page--compact { padding: 8px 0 30px; }
.vixx-hero-page--compact h1 { font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 0; }

/* Compact contactformulier met info-kolom ernaast */
.contactform--compact .h1-flex-popup { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: .4rem; }
.contactform--compact .contactform-intro { display: none; }
.contactform--compact .vixx-form__field { margin-bottom: 8px; }
.contactform--compact .vixx-form textarea { height: 84px; min-height: 84px; }
.contactform--compact .vixx-form__footer { margin-top: 10px; }
.contact-aside h3 { font-size: 18px; margin: 0 0 10px; }
.contact-aside ul { list-style: none; margin: 0 0 16px; padding: 0; }
.contact-aside li { padding: 3px 0; }
.contact-aside li a { color: var(--navy); border-bottom: 1px solid var(--teal); }
.contact-aside li a:hover { color: var(--teal); }

/* Winkel-tegels: vierkante blokjes naast elkaar met achtergrondkleur */
.block-services--tiles .block-service-card { background: var(--navy); box-shadow: 0 10px 30px rgba(0,39,85,.18); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1 / 1; max-height: 260px; padding: 28px; }
.block-services--tiles .block-service-card h3 { color: #fff; }
.block-services--tiles .block-service-card p { color: #cfe0f2; font-size: 14.5px; }
.block-services--tiles .block-service-card a { color: var(--teal); font-family: 'Mont-Bold', sans-serif; }

/* Compact formulier als 2-koloms grid: alles boven de fold */
.contactform--compact .vixx-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.contactform--compact .vixx-form__field--full:first-of-type,
.contactform--compact .vixx-form__footer { grid-column: 1 / -1; }

/* Uitlijning en kop-hierarchie */
/* Hero-USP-vinkjes: als blok gecentreerd, items zelf links uitgelijnd */
.hero-usps { display: inline-block; text-align: left; }
/* Adviseurs-blokken: koppen links uitlijnen; groepskoppen (grid-variant)
   een niveau kleiner dan de paginakop erboven */
.block-advisors__head { text-align: left; }
.block-advisors:has(.adviseur-grid) .block-advisors__head h2 { font-size: 24px; }
.block-advisors__head p { margin-left: 0; }

/* Vixx-vinkje als opsommingsteken voor alle content-lijstjes
   (teal standaard, goud op navy vlakken) */
.block-text__body ul, .block-tabs__content ul, .container-accordion .panel ul,
.block-service-card ul, .hero-usps { list-style: none; margin-left: 0; padding-left: 0; }
.block-text__body ul li, .block-tabs__content ul li, .container-accordion .panel ul li,
.block-service-card ul li, .hero-usps li {
    position: relative; padding-left: 30px; margin-bottom: 6px;
}
.block-text__body ul li::before, .block-tabs__content ul li::before,
.container-accordion .panel ul li::before, .block-service-card ul li::before,
.hero-usps li::before {
    content: ""; position: absolute; left: 0; top: .18em; width: 18px; height: 18px;
    background: url('../images/check-teal.svg') center / contain no-repeat;
    mask: none; -webkit-mask: none;
}
.section__color--blue .block-text__body ul li::before,
.block-cta-blue ul li::before,
.hero-usps li::before { background-image: url('../images/check-gold.svg'); }
/* hero-USP's: gouden vinkje leest het best op de navy overlay */

/* Contactpagina: formulier-kaart in lichtblauw + navy contact-kaart rechts */
.contactform--compact .gf-contactform { background: #dbfaf5; box-shadow: none; padding: 26px; }
.contactform--compact .vixx-form input, .contactform--compact .vixx-form textarea { background: #fff; border-color: #c3ece9; }
.contactform--compact .vixx-form input:focus, .contactform--compact .vixx-form textarea:focus { border-color: var(--teal); }
.contact-kaart { background: var(--navy); border-radius: 14px; padding: 26px; color: #fff; box-shadow: 0 10px 30px rgba(0,39,85,.18); }
.contact-kaart h3 { color: #fff; font-size: 20px; margin: 0 0 16px; }
.contact-kaart__rij { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12); color: #fff; }
.contact-kaart__rij:hover b { color: var(--teal); }
.contact-kaart__icoon { width: 32px; height: 32px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; flex: none; }
.contact-kaart__tekst { display: flex; flex-direction: column; line-height: 1.5; gap: 2px; }
.contact-kaart__tekst em { font-style: normal; font-size: 12px; color: #9fb6cf; }
.contact-kaart__tekst b { font-family: 'Mont-Bold', sans-serif; font-size: 15px; transition: color .15s; }
.contact-kaart__knop { margin-top: 18px; }

/* Video-blok: video bovenaan uitlijnen naast langere tekst */
.block-video .row { align-items: flex-start; }
.block-video .over-center { align-self: flex-start; }

/* Terugbel-popup: lichtblauw paneel met geel accent, ruimere marges */
.container-flex-popup .flex-up .flex-left { background: #dbfaf5; padding: 52px 64px; border-top: 6px solid var(--yellow); }
.container-flex-popup .flex-up .flex-left .flex-form > p { color: var(--navy); }
.container-flex-popup .flex-up .flex-left .h1-flex { color: var(--navy); }
.container-flex-popup .flex-form .gf-contactform--grey input { background: #fff; border-color: #c3ece9; }
.container-flex-popup .flex-form .gf-contactform--grey input:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(248,187,22,.18); }
@media (max-width: 760px) { .container-flex-popup .flex-up .flex-left { padding: 32px 26px; } }

/* Formulieren: geen labels, alleen placeholders */
.vixx-form__field label { display: none; }

/* Adviseur-kaarten: per kaart zacht infaden bij het in beeld komen */
@media (prefers-reduced-motion: no-preference) {
    .adviseur-card { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
    .adviseur-card.is-in { opacity: 1; transform: translateY(0); }
    .adviseur-scroller .adviseur-card.is-in:hover { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) { .adviseur-card { opacity: 1; } }

/* Calculator-sectie: volledig donkerblauw vlak, opvallend met geel + vinkje */
.moonsio-iframe-calculator.section__color--white,
.moonsio-iframe-calculator.section__color--grey { background: var(--navy); }
.moonsio-iframe-calculator__title { color: #fff; }
.moonsio-iframe-calculator__intro { color: #cfe0f2; }
.moonsio-iframe-calculator__disclaimer { color: #9fb6cf; }
.hypcalc__trigger { background: transparent; box-shadow: none; padding: 8px 0 0; }
.hypcalc__trigger .hypcalc__right-cap { color: var(--yellow); display: inline-flex; align-items: center; gap: 8px; }
.hypcalc__trigger .hypcalc__right-cap::before { content: ""; width: 20px; height: 20px; background: url('../images/check-teal.svg') center / contain no-repeat; }
.hypcalc__trigger .hypcalc__btn-teal { background: var(--yellow); border-color: var(--yellow); color: #fff; }
.hypcalc__trigger .hypcalc__btn-teal:hover { background: #d59d06; border-color: #d59d06; color: #fff; }

/* Contactformulier: meer lucht onder de kop + duidelijke dropshadow */
.contactform--compact .h1-flex-popup { margin-bottom: 20px; }
.section__contactform-gf .gf-contactform { box-shadow: 0 16px 44px rgba(0,39,85,.20); }

/* FAQ-vragen: teal vinkje aan het begin */
.accordion { padding-left: 32px; position: relative; }
.accordion::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: url('../images/check-teal.svg') center / contain no-repeat; }

/* Calculator-blok: hoger en rijker met accentkleuren */
.moonsio-iframe-calculator.section__padding--small { padding: 88px 0; }
.moonsio-iframe-calculator__title { font-size: clamp(28px, 3vw, 38px); display: flex; align-items: center; gap: 14px; }
.moonsio-iframe-calculator__title::before { content: ""; width: 34px; height: 34px; flex: none; background: url('../images/check-teal.svg') center / contain no-repeat; }
.moonsio-iframe-calculator__intro { max-width: 720px; margin-top: 14px; padding-bottom: 22px; position: relative; }
.moonsio-iframe-calculator__intro::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 5px; border-radius: 3px; background: var(--yellow); }
.hypcalc__trigger { padding: 26px 0 0; }
.hypcalc__trigger h3 { color: var(--teal); font-size: clamp(22px, 2.4vw, 30px); }
.hypcalc__trigger p { color: #dbfaf5; }
.hypcalc__trigger .hypcalc__btn-teal { padding: 15px 30px; font-size: 16px; }
.moonsio-iframe-calculator__disclaimer { margin-top: 30px; }

/* Calculator-CTA onder de tekst (niet zwevend rechts) */
.hypcalc__trigger { flex-direction: column; align-items: flex-start; gap: 6px; }
.hypcalc__trigger .hypcalc__btn-teal { margin-top: 16px; }

/* Contactform-kop in geel */
.section__contactform-gf .h1-flex-popup { color: var(--yellow); }

/* Navy vlakken: witte kop met klein lichtblauw (teal) accentbalkje */
.section__color--blue .block-text__title, .section__color--blue h2 { color: #fff; position: relative; padding-bottom: 16px; }
.section__color--blue .block-text__title::after, .section__color--blue h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 52px; height: 4px; border-radius: 2px; background: var(--teal); }
.section__color--blue .block-text__col h3 { color: var(--teal); }

/* Stap 1 inline in de navy calculator-sectie: twee witte kaarten naast elkaar */
.moonsio-iframe-calculator #hc_s1 { margin-top: 24px; }
.moonsio-iframe-calculator #hc_s1 .hypcalc__split { grid-template-columns: 1fr 1.15fr; gap: 24px; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; align-items: start; }
@media (max-width: 820px) { .moonsio-iframe-calculator #hc_s1 .hypcalc__split { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.moonsio-iframe-calculator.section__padding--small { padding: 64px 0; }

/* Geanimeerde wijzer: laat zien waar je begint met invullen */
.hypcalc__wijzer { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 7px; color: var(--yellow); font-family: 'Mont-Bold', sans-serif; font-size: 14px; pointer-events: none; animation: hc-wijzer 1.2s ease-in-out infinite; }
.hypcalc__wijzer svg { flex: none; }
@keyframes hc-wijzer { 0%, 100% { transform: translate(0, -50%); } 50% { transform: translate(-9px, -50%); } }
.hypcalc__wijzer.is-weg { display: none; }
@media (prefers-reduced-motion: reduce) { .hypcalc__wijzer { animation: none; } }
.moonsio-iframe-calculator #hc_s1 .hypcalc__split-left,
.moonsio-iframe-calculator #hc_s1 .hypcalc__split-right { background: #fff; border-radius: 16px; box-shadow: 0 18px 46px rgba(0,20,45,.28); padding: 34px 36px; }
.moonsio-iframe-calculator #hc_s1 .hypcalc__split-right { color: var(--navy); }
.moonsio-iframe-calculator #hc_s1 .hypcalc__right-cap { color: var(--navy); font-size: 18px; margin-bottom: 10px; }
.moonsio-iframe-calculator #hc_s1 .hypcalc__amount { color: var(--navy); }
.moonsio-iframe-calculator #hc_s1 .hypcalc__result-row .k { color: #6b7c90; }
.moonsio-iframe-calculator #hc_s1 .hypcalc__result-row .v { color: var(--navy); }
.moonsio-iframe-calculator #hc_s1 .hypcalc__note { color: #8595a8; border-top: 1px solid #eef1f5; margin-top: 14px; }
.moonsio-iframe-calculator #hc_s1 .hypcalc__actions { justify-content: flex-end; }
.moonsio-iframe-calculator #hc_s1 .hypcalc__actions .btn-full { background: transparent; border-color: transparent; color: var(--navy); padding-left: 0; padding-right: 8px; }
.moonsio-iframe-calculator #hc_s1 .hypcalc__actions .btn-full:hover { color: var(--teal); background: transparent; }
.moonsio-iframe-calculator #hc_s1 .hypcalc__actions .hypcalc__btn-teal { background: var(--yellow); border-color: var(--yellow); color: #fff; }
.moonsio-iframe-calculator #hc_s1 .hypcalc__actions .hypcalc__btn-teal:hover { background: #d59d06; border-color: #d59d06; }

/* Kop boven de verhaal-blokken op home */
.services .verhalen-kop { margin-bottom: 30px; }

/* Calculator-sectie: op desktop maximaal ~80% van de viewport-hoogte */
@media (min-width: 1024px) {
    .moonsio-iframe-calculator.section__padding--small { padding: 40px 0 36px; }
    .moonsio-iframe-calculator__title { font-size: clamp(24px, 2.2vw, 30px); }
    .moonsio-iframe-calculator__title::before { width: 28px; height: 28px; }
    .moonsio-iframe-calculator__intro { margin-top: 8px; padding-bottom: 14px; font-size: 15px; max-width: 640px; }
    .moonsio-iframe-calculator #hc_s1 { margin-top: 16px; }
    .moonsio-iframe-calculator #hc_s1 .hypcalc__split-left,
    .moonsio-iframe-calculator #hc_s1 .hypcalc__split-right { padding: 24px 28px; }
    .moonsio-iframe-calculator #hc_s1 .hypcalc__panel-title { font-size: 18px; margin-bottom: 12px; }
    .moonsio-iframe-calculator #hc_s1 .hypcalc__amount { font-size: clamp(32px, 3.4vw, 42px); margin-bottom: 10px; }
    .moonsio-iframe-calculator #hc_s1 .hypcalc__right-cap { font-size: 16px; margin-bottom: 6px; }
    .moonsio-iframe-calculator #hc_s1 .hypcalc__note { font-size: 12px; padding-top: 10px; margin-top: 10px; }
    .moonsio-iframe-calculator #hc_s1 .hypcalc__actions { margin-top: 14px; }
    .moonsio-iframe-calculator__disclaimer { margin-top: 16px; }
    .moonsio-iframe-calculator__disclaimer p { font-size: 12.5px; }
}

/* Wizard: afspraak = tekstknop, primaire actie = geel */
.hypcalc [data-hc-afspraak] { background: transparent; border-color: transparent; color: var(--navy); padding-left: 0; padding-right: 0; text-decoration: underline; text-underline-offset: 4px; }
.hypcalc [data-hc-afspraak]:hover { color: var(--teal); background: transparent; border-color: transparent; }
.hypcalc .hypcalc__btn-teal { background: var(--yellow); border-color: var(--yellow); color: #fff; }
.hypcalc .hypcalc__btn-teal:hover { background: #d59d06; border-color: #d59d06; color: #fff; }

/* Lightbox compacter zodat elke stap op het scherm past */
.hypcalc__lightbox-dialog { padding: 44px 24px 20px; }
.hypcalc__card { padding: 24px 26px; }
.hypcalc__tile { padding: 14px 16px; }
.hypcalc__step-h { font-size: clamp(20px, 3vw, 26px); }
.hypcalc__lightbox .hypcalc__field { margin-bottom: 10px; }
.hypcalc__sub-h { margin: 12px 0 8px; }
.hypcalc__convert { margin-top: 14px; padding-top: 12px; }
.hypcalc__explainer { padding: 10px 14px; font-size: 12.5px; }
.hypcalc__choices { gap: 12px; }
.hypcalc__intro { margin-bottom: 12px; }

/* Uitkomstscherm: afspraak-CTA juist wel als opvallende gele knop */
#hc_sr [data-hc-afspraak] { background: var(--yellow); border-color: var(--yellow); color: #fff; text-decoration: none; padding: 12px 26px; }
#hc_sr [data-hc-afspraak]:hover { background: #d59d06; border-color: #d59d06; color: #fff; }

/* Popup-formulieren: alles op een linkerlijn, kop met scheidingslijn (zoals origineel) */
.container-flex-popup .flex-left .h1-flex { padding-bottom: 16px; border-bottom: 1px solid rgba(0,39,85,.14); margin-bottom: 18px; }
.container-flex-popup .flex-left .gf-contactform { background: transparent; box-shadow: none; padding: 0; }
.container-flex-popup .flex-left .flex-form > p { margin-bottom: 20px; }

/* Nav-zoekveld: klein rondje met loep, slidet bij klik naar links over het menu */
.nav-zoek { position: relative; width: 38px; height: 38px; flex: none; z-index: 6; }
.nav-zoek__form {
    position: absolute; top: 0; right: 0; height: 38px; width: 38px;
    display: flex; align-items: center; justify-content: flex-end;
    border: 1.5px solid rgba(255,255,255,.75); border-radius: 999px; background: transparent;
    overflow: hidden; max-width: none; transition: width .38s cubic-bezier(.3,.7,.3,1), background .25s, border-color .25s;
}
.nav-zoek.is-open .nav-zoek__form { width: min(560px, 56vw); background: #fff; border-color: #fff; box-shadow: 0 10px 30px rgba(0,20,45,.25); }
.nav-zoek__input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 0 0 20px; font-family: inherit; font-size: 15px; color: var(--navy); opacity: 0; transition: opacity .2s .12s; }
.nav-zoek.is-open .nav-zoek__input { opacity: 1; }
.nav-zoek__input::placeholder { color: #8595a8; }
.nav-zoek__knop { flex: none; width: 35px; height: 35px; display: grid; place-items: center; background: transparent; border: 0; color: #fff; cursor: pointer; border-radius: 50%; transition: color .2s; }
.nav-zoek.is-open .nav-zoek__knop { color: var(--navy); }
.nav-zoek__knop:hover { color: var(--yellow); }
.nav-zoek.is-open .nav-zoek__knop:hover { color: var(--teal); }
@media (max-width: 991px) { .nav-zoek { display: none; } }

/* Zoekpagina */
.zoek-balk { display: flex; gap: 12px; max-width: 640px; margin-bottom: 34px; }
.zoek-balk input { flex: 1; min-width: 0; border: 1.5px solid var(--line); border-radius: 999px; padding: 13px 22px; font-family: inherit; font-size: 16px; color: var(--navy); outline: 0; background: #fbfcfd; }
.zoek-balk input:focus { border-color: var(--teal); background: #fff; }
.zoek-resultaten { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.zoek-resultaten li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.zoek-resultaten__titel { font-family: 'Mont-Bold', sans-serif; font-size: 20px; color: var(--navy); }
.zoek-resultaten__titel:hover { color: var(--teal); }
.zoek-resultaten__snippet { color: #40566f; margin: 6px 0 4px; }
.zoek-resultaten__snippet mark { background: #dbfaf5; color: var(--navy); border-radius: 3px; padding: 0 2px; }
.zoek-resultaten__url { font-size: 13px; color: #8595a8; }
.zoek-leeg { color: #40566f; max-width: 640px; }

/* ─── Engels via Google Vertalen: alle Google-UI verborgen (balk, tooltips, highlights) ─── */
#google_translate_element, .skiptranslate, .goog-te-banner-frame, iframe.goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame,
.goog-tooltip, .goog-te-spinner-pos, .VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .VIpgJd-yAWNEb-L7lbkb { display: none !important; }
html, body { top: 0 !important; }
body { position: static !important; }
.goog-text-highlight, font[style*="background-color"] { background: none !important; box-shadow: none !important; }
.nav-lang a { cursor: pointer; } .nav-lang a.active { color: #fff; }
.nav-lang--mobile { list-style: none; margin-top: 18px; font-size: 18px; }
html.gt-pending body { opacity: 0; }
body { transition: opacity .25s ease; }

/* ─── Blog ─── */
/* Overzicht + "Lees ook": kaarten in een raster (3 / 2 / 1 kolommen) */
.blog-overzicht .row, .blog-leesook .row { display: block; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 1000px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (max-width: 640px)  { .blog-grid { grid-template-columns: 1fr; } }
.blog-kaart { display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 39, 85, .06), 0 10px 30px rgba(0, 39, 85, .07); color: var(--navy);
    transition: transform .2s, box-shadow .2s; }
.blog-kaart:hover { transform: translateY(-4px); box-shadow: 0 4px 10px rgba(0, 39, 85, .08), 0 18px 40px rgba(0, 39, 85, .12); }
.blog-kaart__beeld { display: block; aspect-ratio: 16 / 10; background: var(--grey); overflow: hidden; }
.blog-kaart__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.blog-kaart:hover .blog-kaart__beeld img { transform: scale(1.04); }
.blog-kaart__beeld--leeg { background: linear-gradient(135deg, var(--navy), #0a3d78); }
.blog-kaart__inhoud { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 24px; flex: 1; }
.blog-kaart__datum { font-family: 'Mont-Bold', sans-serif; font-size: 13px; letter-spacing: .04em; color: var(--teal); }
.blog-kaart__titel { font-family: 'Mont-Heavy', 'Mont-Bold', sans-serif; font-size: 20px; line-height: 1.25; color: var(--navy); text-wrap: balance; }
.blog-kaart__tekst { font-size: 15px; line-height: 1.55; color: #40566f; }
.blog-kaart__meer { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Mont-Bold', sans-serif; font-size: 15px; color: var(--navy); }
.blog-kaart__meer svg { color: var(--yellow); transition: transform .2s; }
.blog-kaart:hover .blog-kaart__meer svg { transform: translateX(4px); }

/* Paginering */
.blog-paginering { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 48px; }
.blog-paginering__nr, .blog-paginering__stap { min-width: 44px; height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; border: 1.5px solid var(--line); font-family: 'Mont-Bold', sans-serif; font-size: 15px; color: var(--navy); background: #fff; transition: all .2s; }
.blog-paginering a:hover { border-color: var(--teal); color: var(--teal); }
.blog-paginering__nr.is-actief { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Artikel: één leesbare kolom */
.blog-artikel .row { display: block; }
.blog-artikel__kolom { max-width: 720px; margin: 0 auto; }
.blog-terug { display: inline-flex; align-items: center; gap: 8px; font-family: 'Mont-Bold', sans-serif; font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.blog-terug:hover { color: var(--teal); }
.blog-artikel__beeld { display: block; width: 100%; height: auto; border-radius: 14px; margin: 0 0 36px; }
.blog-tekst { font-size: 17px; line-height: 1.75; color: #22395a; }
.blog-tekst > :first-child { margin-top: 0; }
.blog-tekst p { margin: 0 0 1.15em; }
.blog-tekst h2 { font-size: clamp(23px, 2.4vw, 29px); margin: 1.6em 0 .55em; }
.blog-tekst h3 { font-size: 20px; margin: 1.4em 0 .45em; }
.blog-tekst h2 strong, .blog-tekst h3 strong { color: var(--teal); font-family: inherit; }
.blog-tekst strong { color: var(--navy); }
.blog-tekst a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.blog-tekst a:hover { color: var(--teal); }
.blog-tekst ul, .blog-tekst ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.blog-tekst li { margin-bottom: .4em; }
.blog-tekst ul li::marker { color: var(--teal); }
.blog-tekst ol li::marker { color: var(--teal); font-family: 'Mont-Bold', sans-serif; }
.blog-tekst blockquote { margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--yellow); font-family: 'Mont-Bold', sans-serif; font-size: 19px; line-height: 1.5; color: var(--navy); }
.blog-tekst blockquote p:last-child { margin-bottom: 0; }
.blog-tekst img { display: block; width: 100%; height: auto; border-radius: 12px; margin: 1.6em 0; }
.blog-tekst p > img:only-child { margin: 0; }
.blog-video { position: relative; aspect-ratio: 16 / 9; margin: 1.8em 0; border-radius: 12px; overflow: hidden; background: var(--navy); }
.blog-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 640px) {
    .blog-tekst { font-size: 16px; }
    .blog-artikel__beeld { margin-bottom: 26px; border-radius: 10px; }
}

/* Lees ook */
.blog-leesook__titel { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 28px; }
.blog-leesook__alle { text-align: center; margin: 40px 0 0; }

/* ─── FAQ-inhoudsopgave (veelgestelde-vragen) ─── */
.faq-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: 6px 0 0; }
.faq-chip { display: inline-block; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid #d5e4f2; color: var(--navy); font-family: 'Mont-Bold', sans-serif; font-size: 14px; text-decoration: none; transition: border-color .15s, background .15s; }
.faq-chip:hover { border-color: var(--yellow); background: #fffaf0; }
section[id] { scroll-margin-top: 90px; }

/* ─── Vestiging-landingspagina (templates/vestiging.php) ─────────────────── */
.vlp-info { background: var(--navy); padding: 0 0 34px; margin-top: -1px; }
.vlp-info__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; transform: translateY(-34px); margin-bottom: -34px; }
.vlp-info__item { background: #fff; border-radius: 18px; padding: 20px; display: flex; gap: 14px; box-shadow: 0 18px 40px rgba(0,39,85,.18); }
.vlp-info__item > div { display: flex; flex-direction: column; gap: 3px; font-size: 14.5px; color: #40566f; min-width: 0; }
.vlp-info__item b { font-family: 'Mont-Bold', sans-serif; color: var(--navy); font-size: 15.5px; margin-bottom: 2px; }
.vlp-info__item a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--yellow); overflow-wrap: anywhere; }
.vlp-info__item--accent { background: var(--yellow); } .vlp-info__item--accent > div { color: var(--navy); }
.vlp-ic { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #e9f7f5; color: var(--navy); }
.vlp-info__item--accent .vlp-ic { background: rgba(255,255,255,.55); }
.vlp-row { display: flex; justify-content: space-between; gap: 10px; } .vlp-row em { font-style: normal; color: var(--navy); }
.vlp-intro__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 54px; align-items: center; width: 100%; }
.vlp-eyebrow { display: inline-block; font-family: 'Mont-Bold', sans-serif; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #2bb3a3; margin-bottom: 10px; }
.vlp-intro__text h2 { margin-bottom: 16px; }
.vlp-stats { display: flex; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.vlp-stats div { flex: 1 1 120px; background: #f4f7fa; border-radius: 14px; padding: 14px 16px; }
.vlp-stats b { display: block; font-family: 'Mont-Heavy', sans-serif; font-size: 26px; color: var(--navy); line-height: 1.1; }
.vlp-stats span { font-size: 13.5px; color: #40566f; }
.vlp-video { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #0b2a4a center / cover no-repeat; cursor: pointer; box-shadow: 0 24px 50px rgba(0,39,85,.22); }
.vlp-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,39,85,0) 45%, rgba(0,39,85,.75)); transition: opacity .2s; }
.vlp-video.is-playing::after { display: none; }
.vlp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vlp-video__play { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 74px; height: 74px; border-radius: 50%; background: var(--yellow); color: var(--navy); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: transform .2s; }
.vlp-video:hover .vlp-video__play, .vlp-video:focus-visible .vlp-video__play { transform: translate(-50%, -50%) scale(1.08); }
.vlp-video__label { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 16px; color: #fff; font-family: 'Mont-Bold', sans-serif; font-size: 16px; }
.vlp-video--small .vlp-video__play { width: 54px; height: 54px; }
.vlp-photo { width: 100%; border-radius: 20px; }
.vlp-sub { color: #40566f; margin-top: 6px; }
.vlp-teamvids { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 360px)); gap: 18px; justify-content: center; margin-top: 30px; }
.vlp-center { text-align: center; margin-bottom: 26px; }
.vlp-steps__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: none; }
.vlp-steps__list li { background: #f4f7fa; border-radius: 18px; padding: 24px 22px; position: relative; }
.vlp-steps__list b { display: block; font-family: 'Mont-Bold', sans-serif; color: var(--navy); font-size: 17px; margin: 12px 0 6px; }
.vlp-steps__list p { margin: 0; font-size: 14.5px; color: #40566f; }
.vlp-steps__n { width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-family: 'Mont-Heavy', sans-serif; }
.vlp-steps__list li:last-child .vlp-steps__n { background: var(--yellow); color: var(--navy); }
.vlp-reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.vlp-review { margin: 0; background: #fff; border: 1px solid #e3ebf3; border-radius: 18px; padding: 24px; box-shadow: 0 10px 30px rgba(0,39,85,.06); }
.vlp-stars { color: var(--yellow); display: flex; gap: 2px; margin-bottom: 10px; }
.vlp-review blockquote { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--navy); }
.vlp-review figcaption { font-family: 'Mont-Bold', sans-serif; font-size: 14px; color: #40566f; }
.vlp-area__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; width: 100%; }
.vlp-chips { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vlp-chips li { background: #fff; border: 1px solid #d5e4f2; border-radius: 999px; padding: 7px 14px; font-size: 14px; color: var(--navy); }
.vlp-chips--links li { padding: 0; } .vlp-chips--links a { display: block; padding: 8px 16px; color: var(--navy); text-decoration: none; font-family: 'Mont-Bold', sans-serif; }
.vlp-chips--links li:hover { border-color: var(--yellow); }
.vlp-map { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--navy); border-radius: 20px; padding: 28px; min-height: 200px; justify-content: flex-end;
  background: linear-gradient(135deg, rgba(0,39,85,.92), rgba(0,39,85,.75)), repeating-linear-gradient(45deg, #0f3a66 0 12px, #0b335c 12px 24px); color: #fff; }
.vlp-map .vlp-ic { background: var(--yellow); margin-bottom: auto; }
.vlp-map b { font-family: 'Mont-Bold', sans-serif; font-size: 18px; } .vlp-map span { opacity: .85; font-size: 14px; } .vlp-map em { font-style: normal; color: var(--yellow); font-weight: 600; margin-top: 6px; }
.vlp-docs h3, .vlp-near h3 { font-size: 18px; margin-bottom: 12px; }
.vlp-docs__list { display: flex; flex-wrap: wrap; gap: 10px; }
.vlp-docs__list a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; background: #f4f7fa; color: var(--navy); text-decoration: none; font-size: 14px; }
#vlp-contact { scroll-margin-top: 90px; }
@media (max-width: 1000px) {
  .vlp-info__grid { grid-template-columns: 1fr 1fr; }
  .vlp-intro__grid, .vlp-area__grid { grid-template-columns: 1fr; gap: 28px; }
  .vlp-steps__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .vlp-info__grid, .vlp-steps__list { grid-template-columns: 1fr; }
}
.vlp-info__grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.vlp-team .adviseur-grid { justify-content: center; grid-template-columns: repeat(auto-fit, minmax(190px, 224px)); }
@media (max-width: 700px) { .vlp-video__label, .vlp-video::after { display: none; } .vlp-video__play { width: 60px; height: 60px; } }

/* Vestiging-LP: diensten, verhalen, kom langs, onderwerpkeuze, mobiele actiebalk */
.vlp-services__grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin-top: 30px; }
.vlp-service { display: flex; flex-direction: column; gap: 8px; padding: 24px 22px; border-radius: 20px; background: #f4f6f9; color: var(--navy); text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s; }
.vlp-service:hover { transform: translateY(-4px); background: #fff; box-shadow: 0 20px 44px rgba(0,39,85,.12); }
.vlp-service b { font-family: 'Mont-Bold', sans-serif; font-size: 19px; margin-top: 6px; }
.vlp-service p { margin: 0; font-size: 15px; line-height: 1.55; color: #40566f; flex: 1; }
.vlp-service__who { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; color: #6b7d91; line-height: 1.3; }
.vlp-service__who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--teal); }
.vlp-service__who em { font-style: normal; font-family: 'Mont-Bold', sans-serif; color: var(--navy); font-size: 14px; }
.vlp-service__more { display: inline-flex; align-items: center; gap: 6px; font-family: 'Mont-Bold', sans-serif; font-size: 14px; color: var(--teal); margin-top: 6px; }
.vlp-stories__grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 28px; }
.vlp-story { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 14px 34px rgba(0,39,85,.10); text-decoration: none; transition: transform .2s; }
.vlp-story:hover { transform: translateY(-4px); }
.vlp-story img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.vlp-story > span { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
.vlp-story b { font-family: 'Mont-Bold', sans-serif; color: var(--navy); font-size: 17px; line-height: 1.35; }
.vlp-story em { font-style: normal; font-family: 'Mont-Bold', sans-serif; font-size: 14px; color: var(--teal); }
.vlp-visit__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.vlp-visit__map { position: relative; display: block; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 50px rgba(0,39,85,.16); }
.vlp-visit__map img { display: block; width: 100%; height: auto; transition: transform .4s; }
.vlp-visit__map:hover img { transform: scale(1.03); }
.vlp-visit__pin { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--navy); color: #fff; font-family: 'Mont-Bold', sans-serif; font-size: 14px; }
.vlp-visit__text h2 { margin: 6px 0 12px; }
.vlp-visit__list { list-style: none; padding: 0; margin: 22px 0 26px; display: flex; flex-direction: column; gap: 16px; }
.vlp-visit__list li { display: flex; gap: 14px; align-items: flex-start; }
.vlp-visit__list li > div { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.5; color: #40566f; }
.vlp-visit__list b { font-family: 'Mont-Bold', sans-serif; color: var(--navy); }
.vixx-topics { border: 0; padding: 0; margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 8px; }
.vixx-topics legend { font-family: 'Mont-Bold', sans-serif; color: var(--navy); font-size: 15px; margin-bottom: 10px; padding: 0; }
.section__contactform-gf .vixx-topics label { display: inline-block; position: relative; cursor: pointer; margin: 0; }
.vixx-topics input { position: absolute; opacity: 0; pointer-events: none; }
.vixx-topics span { display: inline-block; padding: 9px 16px; border-radius: 999px; background: #fff; border: 1.5px solid #d5dde6; color: var(--navy); font-size: 14px; transition: all .15s; }
.vixx-topics input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.vixx-topics input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.vlp-bar { display: none; }
@media (max-width: 900px) {
    .vlp-visit__grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 700px) {
    .vlp-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 50; padding: 8px; border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 12px 34px rgba(0,39,85,.25); backdrop-filter: blur(8px); }
    .vlp-bar a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px; border-radius: 12px; color: var(--navy); font-family: 'Mont-Bold', sans-serif; font-size: 12.5px; text-decoration: none; }
    .vlp-bar a.vlp-bar__main { background: var(--yellow); }
    body:has(.vlp-bar) footer { padding-bottom: 90px; }
}
.vlp-services .row, .vlp-stories .row { row-gap: 0; }
.vlp-services h2, .vlp-stories h2 { margin-bottom: 8px; }
.vlp-services .vlp-sub { margin: 0 auto; max-width: 640px; }
.vlp-service__more { align-self: flex-start; }
.vlp-teamvid { margin: 0; }
.vlp-teamvid figcaption { margin-top: 12px; font-family: 'Mont-Bold', sans-serif; color: var(--navy); font-size: 15px; text-align: center; }
.vlp-video--small::after { display: none; }
.vlp-video::after { display: none; }
.vlp-video__caption { margin: 14px 0 0; font-family: 'Mont-Bold', sans-serif; color: var(--navy); font-size: 15px; display: flex; align-items: center; gap: 8px; }
.vlp-video__caption::before { content: ""; width: 22px; height: 2px; background: var(--teal); }
.vixx-topics__list { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 700px) {
    .vlp-services__grid, .vlp-stories__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 18px; margin-left: -16px; margin-right: -16px; width: calc(100% + 32px); scrollbar-width: none; }
    .vlp-services__grid::-webkit-scrollbar, .vlp-stories__grid::-webkit-scrollbar { display: none; }
    .vlp-service, .vlp-story { scroll-snap-align: center; }
}
@media (max-width: 700px) { .vlp-team .adviseur-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.vlp-teamvids { margin-top: 64px; padding-top: 48px; border-top: 1px solid rgba(0,39,85,.08); column-gap: 32px; row-gap: 36px; }
@media (max-width: 700px) { .vlp-teamvids { margin-top: 44px; padding-top: 36px; row-gap: 28px; } }

/* Vestiging-LP: tussen-CTA, uitgelichte review, contact-aside */
.vlp-cta { background: linear-gradient(120deg, var(--navy) 0%, #0b3d6e 55%, #106a7a 100%); padding: 56px 0; color: #fff; }
.vlp-cta__inner { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; }
.vlp-cta__faces { display: flex; padding-left: 14px; }
.vlp-cta__faces img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--teal); border: 3px solid var(--navy); margin-left: -14px; }
.vlp-cta__text { flex: 1; min-width: 260px; }
.vlp-cta__text h2 { color: #fff; margin: 0 0 6px; }
.vlp-cta__text p { margin: 0; color: rgba(255,255,255,.82); font-size: 16px; }
.vlp-cta__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.vlp-cta__link { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-family: 'Mont-Bold', sans-serif; font-size: 15px; text-decoration: none; border-bottom: 2px solid var(--teal); padding-bottom: 2px; }
.vlp-cta__link:hover { color: var(--teal); }
.vlp-review { position: relative; }
.vlp-review__mark { position: absolute; top: 20px; right: 22px; color: var(--teal); opacity: .25; }
.vlp-reviews__grid--single { grid-template-columns: minmax(0, 820px); justify-content: center; margin-top: 28px; }
.vlp-reviews__grid--single .vlp-review { padding: 40px 48px; text-align: center; background: #f4f6f9; border: 0; box-shadow: none; }
.vlp-reviews__grid--single .vlp-stars { justify-content: center; }
.vlp-reviews__grid--single .vlp-review blockquote { font-family: 'Mont-Bold', sans-serif; font-size: 22px; line-height: 1.5; margin-bottom: 18px; }
.vlp-reviews__grid--single .vlp-review__mark { position: static; display: block; margin: 0 auto 10px; opacity: .6; }
.vlp-stories__sub { text-align: center; margin: 64px 0 0; font-size: 22px; color: var(--navy); }
.vlp-visit__area { margin: 0 0 10px; font-size: 15px; color: #40566f; }
.vlp-visit__area b { color: var(--navy); font-family: 'Mont-Bold', sans-serif; }
.vlp-visit .vlp-chips { margin: 0 0 26px; }
.vlp-direct { background: #fff; border-radius: 20px; padding: 28px; box-shadow: 0 18px 40px rgba(0,39,85,.10); }
.vlp-direct .vlp-cta__faces { margin-bottom: 16px; }
.vlp-cta__faces--small img { width: 46px; height: 46px; border-color: #fff; margin-left: -12px; }
.vlp-direct h3 { margin: 0 0 12px; font-size: 20px; color: var(--navy); }
.vlp-direct ul { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; }
.vlp-direct li a { color: var(--navy); font-family: 'Mont-Bold', sans-serif; border-bottom: 2px solid var(--teal); text-decoration: none; }
.vlp-direct p { margin: 0 0 14px; font-size: 15px; color: #40566f; line-height: 1.55; }
.vlp-direct p b { color: var(--navy); }
.vlp-direct__free { display: inline-block; background: rgba(54,204,199,.15); color: var(--navy) !important; font-family: 'Mont-Bold', sans-serif; font-size: 13.5px !important; padding: 7px 12px; border-radius: 999px; margin: 0 !important; }
@media (max-width: 700px) {
    .vlp-cta { padding: 44px 0; }
    .vlp-cta__inner { gap: 20px; }
    .vlp-cta__faces img { width: 52px; height: 52px; }
    .vlp-reviews__grid--single .vlp-review { padding: 28px 22px; }
    .vlp-reviews__grid--single .vlp-review blockquote { font-size: 18px; }
    .vlp-stories__sub { margin-top: 44px; }
}
.vlp-teamvids__head { margin: 64px auto 0; padding-top: 48px; border-top: 1px solid rgba(0,39,85,.08); text-align: center; max-width: 720px; }
.vlp-teamvids__head h3 { margin: 0 0 10px; font-size: 26px; color: var(--navy); }
.vlp-teamvids__head p { margin: 0; font-size: 16px; line-height: 1.6; color: #40566f; }
.vlp-teamvids__head + .vlp-teamvids { margin-top: 32px; padding-top: 0; border-top: 0; }
@media (max-width: 700px) { .vlp-teamvids__head { margin-top: 44px; padding-top: 36px; } .vlp-teamvids__head h3 { font-size: 22px; } }

/* Homepage-hero: glazen dienstpanelen */
.vixx-hero-home .service {
    position: relative; overflow: hidden; isolation: isolate;
    min-height: 196px; padding: 24px 24px 22px; gap: 0; border-radius: 22px;
    background: linear-gradient(150deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.34) 55%, rgba(255,255,255,.22) 100%);
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.12), 0 18px 44px rgba(0,20,45,.24);
    backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .35s, border-color .35s;
}
/* lichtglans die bij hover over het glas schuift */
.vixx-hero-home .service::before {
    content: ""; position: absolute; z-index: -1; top: -60%; left: -80%; width: 60%; height: 220%;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(18deg); transition: left .8s cubic-bezier(.2,.8,.2,1); pointer-events: none;
}
/* zachte gloed linksboven */
.vixx-hero-home .service::after {
    content: ""; position: absolute; z-index: -2; width: 180px; height: 180px; top: -90px; left: -60px; border-radius: 50%;
    background: radial-gradient(circle, rgba(54,204,199,.35), rgba(54,204,199,0) 70%); transition: opacity .35s; opacity: .7;
}
.vixx-hero-home .service:hover {
    transform: translateY(-6px);
    background: linear-gradient(150deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.72) 100%);
    border-color: rgba(255,255,255,.95);
    box-shadow: inset 0 1px 0 #fff, 0 26px 60px rgba(0,20,45,.32);
}
.vixx-hero-home .service:hover::before { left: 130%; }
.vixx-hero-home .service:hover::after { opacity: 1; }
.vixx-hero-home .service-icon {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; margin-bottom: 18px;
    color: var(--navy); background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 6px 16px rgba(0,39,85,.12); transition: background .3s, color .3s;
}
.vixx-hero-home .service:hover .service-icon { background: var(--teal); color: #fff; border-color: var(--teal); }
.vixx-hero-home .service .service-title { font-size: 22px; line-height: 1.2; text-wrap: balance; }
.vixx-hero-home .service .service-link {
    margin-top: auto; padding-top: 18px; width: 100%; display: flex; align-items: center; justify-content: space-between;
    font-family: 'Mont-Bold', sans-serif; font-size: 14px; color: var(--navy);
}
.vixx-hero-home .service .service-arrow {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: var(--navy); color: #fff; transition: background .3s, color .3s, transform .3s;
}
.vixx-hero-home .service:hover .service-link { color: var(--navy); }
.vixx-hero-home .service:hover .service-arrow { background: var(--yellow); color: var(--navy); transform: translateX(3px); }
.vixx-hero-home .service:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .vixx-hero-home .service, .vixx-hero-home .service::before { transition: none; } }
@media (max-width: 1100px) { .vixx-hero-home .service { min-height: 170px; } }
@media (max-width: 560px) {
    .vixx-hero-home .services { gap: 10px; }
    .vixx-hero-home .service { min-height: 0; flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; }
    .vixx-hero-home .service-icon { margin: 0; width: 42px; height: 42px; flex: none; }
    .vixx-hero-home .service .service-title { font-size: 18px; flex: 1; }
    .vixx-hero-home .service .service-link { margin: 0; padding: 0; width: auto; font-size: 0; gap: 0; }
}
/* Lange knopteksten mogen op mobiel afbreken in plaats van uit beeld te lopen */
@media (max-width: 560px) { .btn { max-width: 100%; white-space: normal; } }

/* Glazen dienstpanelen in huisstijl: navy glas, teal accenten, gele pijl */
.vixx-hero-home .service {
    background: linear-gradient(160deg, rgba(0,39,85,.78) 0%, rgba(0,39,85,.52) 60%, rgba(16,106,122,.45) 100%);
    border: 1px solid rgba(54,204,199,.38);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 18px 44px rgba(0,20,45,.35);
    backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
}
.vixx-hero-home .service::before { background: linear-gradient(100deg, rgba(54,204,199,0) 0%, rgba(54,204,199,.28) 50%, rgba(54,204,199,0) 100%); }
.vixx-hero-home .service::after { background: radial-gradient(circle, rgba(54,204,199,.45), rgba(54,204,199,0) 70%); }
.vixx-hero-home .service-icon { background: var(--teal); color: var(--navy); border-color: var(--teal); box-shadow: 0 8px 20px rgba(54,204,199,.35); }
.vixx-hero-home .service .service-title { color: #fff; }
.vixx-hero-home .service .service-link, .vixx-hero-home .service:hover .service-link { color: var(--teal); }
.vixx-hero-home .service .service-arrow { background: var(--yellow); color: var(--navy); }
.vixx-hero-home .service:hover {
    background: linear-gradient(160deg, rgba(0,39,85,.92) 0%, rgba(0,39,85,.8) 100%);
    border-color: var(--teal);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 26px 60px rgba(0,20,45,.45), 0 0 0 1px var(--teal);
}
.vixx-hero-home .service:hover .service-icon { background: var(--yellow); border-color: var(--yellow); color: var(--navy); box-shadow: 0 8px 20px rgba(248,187,22,.35); }
.vixx-hero-home .service:hover .service-arrow { background: var(--yellow); color: var(--navy); }

/* ─── Vlakken-finesse: zelfde afwerking als de glazen dienstpanelen op de homepage ───
   Kleuren blijven zoals ze zijn; alle vlakken krijgen dezelfde ronding, lichtrand, glans,
   gelaagde schaduw en (bij klikbare vlakken) dezelfde hover-beweging. */
:root {
    --fin-radius: 22px;
    --fin-radius-sm: 16px;
    --fin-border: 1px solid rgba(0,39,85,.07);
    --fin-sheen: linear-gradient(160deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 55%);
    --fin-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(0,39,85,.04), 0 18px 44px rgba(0,39,85,.10);
    --fin-shadow-hover: inset 0 1px 0 #fff, 0 2px 6px rgba(0,39,85,.06), 0 26px 60px rgba(0,39,85,.16);
    --fin-ease: cubic-bezier(.2,.8,.2,1);
}

/* Grote vlakken (formulieren, kaarten, info) */
.section__contactform-gf .gf-contactform,
.contactform--compact .gf-contactform,
.glider .content-glider,
.vlp-direct, .vlp-review, .vlp-reviews__grid--single .vlp-review,
.hypcalc__split-left, .moonsio-iframe-calculator #hc_s1 .hypcalc__split-right, .hypcalc__card {
    border-radius: var(--fin-radius); border: var(--fin-border);
    background-image: var(--fin-sheen); box-shadow: var(--fin-shadow);
}
.contactform--compact .gf-contactform { box-shadow: var(--fin-shadow); }
.vlp-info__item { border-radius: var(--fin-radius-sm); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 40px rgba(0,20,45,.28); }
/* Zachte teal gloed in de hoek van het formulier, net als de dienstpanelen */
.section__contactform-gf .gf-contactform { position: relative; overflow: hidden; isolation: isolate; }
.section__contactform-gf .gf-contactform::after {
    content: ""; position: absolute; z-index: -1; width: 320px; height: 320px; top: -160px; right: -120px; border-radius: 50%;
    background: radial-gradient(circle, rgba(54,204,199,.30), rgba(54,204,199,0) 70%); pointer-events: none;
}
/* Velden in de vlakken: zelfde ronding-familie */
.section__contactform-gf .vixx-form input, .section__contactform-gf .vixx-form textarea { border-radius: 12px; box-shadow: inset 0 1px 2px rgba(0,39,85,.04); }

/* Kleine vlakken (cijfers, stappen, documenten, kantoorkaart) */
.vlp-stats div, .vlp-steps__list li, .vlp-docs__list a, .hypcalc__explainer, .hypcalc__extra, .hypcalc__formula-mini {
    border-radius: var(--fin-radius-sm); border: var(--fin-border);
    background-image: var(--fin-sheen); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 22px rgba(0,39,85,.06);
}
.vlp-map { border-radius: var(--fin-radius); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 18px 44px rgba(0,39,85,.22); }
.vlp-visit__map { border-radius: var(--fin-radius); }

/* Klikbare kaarten: zelfde lift, glans-veeg en schaduw als de homepage-panelen */
.vlp-service, .vlp-story, .blog-kaart, .adviseur-card, .vlp-docs__list a {
    position: relative; isolation: isolate; overflow: hidden;
    border-radius: var(--fin-radius); border: var(--fin-border); box-shadow: var(--fin-shadow);
    transition: transform .35s var(--fin-ease), box-shadow .35s var(--fin-ease), border-color .35s, background-color .35s;
}
.vlp-service { background-image: var(--fin-sheen); }
.vlp-docs__list a { border-radius: 12px; }
.vlp-service::before, .vlp-story::before, .blog-kaart::before {
    content: ""; position: absolute; z-index: 2; top: -60%; left: -80%; width: 60%; height: 220%; pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(18deg); transition: left .8s var(--fin-ease);
}
.vlp-service:hover, .vlp-story:hover, .blog-kaart:hover, .adviseur-card:hover, .vlp-docs__list a:hover {
    transform: translateY(-6px); box-shadow: var(--fin-shadow-hover); border-color: rgba(54,204,199,.45);
}
.vlp-service:hover::before, .vlp-story:hover::before, .blog-kaart:hover::before { left: 130%; }

/* Icoonvakjes: zelfde vorm als op de homepage (afgerond vierkant, lichtrand, schaduw) */
.vlp-ic, .hypcalc__tile-ic {
    border-radius: 14px; border: 1px solid rgba(255,255,255,.9);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 6px 16px rgba(0,39,85,.10);
    transition: background .3s, color .3s, border-color .3s;
}
.vlp-service:hover .vlp-ic { background: var(--teal); border-color: var(--teal); color: #fff; }

/* Pijl in rondje, zoals "Meer info" op de homepage */
.vlp-service__more { width: 100%; justify-content: space-between; align-self: stretch; }
.vlp-service__more svg { box-sizing: content-box; padding: 9px; border-radius: 50%; background: var(--navy); color: #fff; transition: background .3s, color .3s, transform .3s; }
.vlp-service:hover .vlp-service__more svg { background: var(--yellow); color: var(--navy); transform: translateX(3px); }
.vlp-story em { display: flex; align-items: center; justify-content: space-between; }
.vlp-story em::after {
    content: ""; width: 32px; height: 32px; border-radius: 50%; flex: none; transition: background-color .3s, transform .3s;
    background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.vlp-story:hover em::after { background-color: var(--yellow); transform: translateX(3px); }

/* Onderwerp-keuzes in het formulier: zelfde pil-afwerking */
.vixx-topics span { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(0,39,85,.05); }
.vixx-topics input:checked + span { box-shadow: 0 8px 18px rgba(0,39,85,.22); }

@media (prefers-reduced-motion: reduce) {
    .vlp-service, .vlp-story, .blog-kaart, .adviseur-card, .vlp-docs__list a, .vlp-service::before, .vlp-story::before, .blog-kaart::before { transition: none; }
}
.vlp-story > span { flex: 1; }
.vlp-story em { margin-top: auto; }
.vlp-story img { transition: transform .6s var(--fin-ease); }
.vlp-story:hover img { transform: scale(1.04); }

/* ═══ Kaartsysteem: één afwerking voor de hele site, naar het voorbeeld van de dienstpanelen bovenaan de homepage ═══
   Donkere kaarten: navy-verloop met teal gloed linksboven. Lichte kaarten: eigen kleur + glans en zachte teal gloed rechtsboven.
   Allemaal: 22px ronding, lichtrand, gelaagde schaduw, gele pijl in rondje, zelfde hover. */
:root {
    --card-navy: radial-gradient(circle at 0% 0%, rgba(54,204,199,.34), rgba(54,204,199,0) 46%), linear-gradient(160deg, #002755 0%, #05305f 55%, #0c4a64 100%);
    --card-light: radial-gradient(circle at 100% 0%, rgba(54,204,199,.16), rgba(54,204,199,0) 42%), linear-gradient(160deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 55%);
    --card-shadow-navy: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 6px rgba(0,20,45,.10), 0 22px 50px rgba(0,20,45,.24);
    --card-shadow-navy-hover: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 10px rgba(0,20,45,.12), 0 30px 64px rgba(0,20,45,.32), 0 0 0 1px var(--teal);
    --arrow-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002755' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* — Donkere kaarten — */
.service-list__small .service-block__content, .text-contact--navy, .vlp-map {
    background: var(--card-navy) !important; color: #fff;
    border: 1px solid rgba(54,204,199,.30); border-radius: var(--fin-radius); box-shadow: var(--card-shadow-navy);
}
/* — Lichte kaarten (eigen kleur blijft, glans + gloed erover) — */
.text-contact:not(.text-contact--navy), .glider .content-glider, .blog-kaart, .adviseur-card, .vlp-service, .vlp-story,
.vlp-direct, .vlp-review, .vlp-stats div, .vlp-steps__list li, .section__contactform-gf .gf-contactform, .contactform--compact .gf-contactform {
    background-image: var(--card-light); border: var(--fin-border); border-radius: var(--fin-radius); box-shadow: var(--fin-shadow);
}
.vlp-stats div, .vlp-steps__list li { border-radius: var(--fin-radius-sm); }
/* Mint formulier: iets sterkere gloed, geen losse vlek meer */
.section__contactform-gf .gf-contactform, .contactform--compact .gf-contactform {
    background-image: radial-gradient(circle at 100% 0%, rgba(54,204,199,.30), rgba(54,204,199,0) 48%), linear-gradient(160deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 60%);
    border-color: rgba(54,204,199,.28);
}
.section__contactform-gf .gf-contactform::after { display: none; }

/* — Hover: overal dezelfde lift, schaduw en glans-veeg — */
.service-list__small .service-block, .service-list__small .service-block__content, .text-contact, .glider .content-glider {
    transition: transform .35s var(--fin-ease), box-shadow .35s var(--fin-ease), border-color .35s;
}
.service-list__small .service-block__content, .glider .content-glider { position: relative; isolation: isolate; overflow: hidden; }
.service-list__small .service-block__content::before, .glider .content-glider::before {
    content: ""; position: absolute; z-index: 3; top: -60%; left: -80%; width: 60%; height: 220%; pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(18deg); transition: left .8s var(--fin-ease);
}
.glider .content-glider::before { background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%); }
.service-list__small .service-block:hover .service-block__content { transform: translateY(-6px); box-shadow: var(--card-shadow-navy-hover); border-color: var(--teal); }
.service-list__small .service-block:hover .service-block__content::before, .glider .content-glider:hover::before { left: 130%; }
.glider .content-glider:hover, .text-contact:not(.text-contact--navy):hover { transform: translateY(-6px); box-shadow: var(--fin-shadow-hover); border-color: rgba(54,204,199,.45); }
.text-contact--navy:hover { transform: translateY(-6px); box-shadow: var(--card-shadow-navy-hover); border-color: var(--teal); }
.service-list__small .service-block__top img:first-child, .glider .image-glider img { transition: transform .6s var(--fin-ease); }
.service-list__small .service-block:hover .service-block__top img:first-child, .glider .content-glider:hover .image-glider img { transform: scale(1.04); }
.service-list__small .service-block__top { overflow: hidden; }
.service-list__small .service-block__top h2 { font-family: 'Mont-Heavy', 'Mont-Bold', sans-serif; }

/* — Links met pijl: overal "tekst ... (gele pijl in rondje)", zoals Meer info op de homepage — */
.verhaal-button, .vlp-service__more, .vlp-story em {
    display: flex !important; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
    padding: 0 !important; margin-top: auto; background: none !important; border: 0 !important;
    font-family: 'Mont-Bold', sans-serif; font-size: 14px; text-decoration: none;
}
.verhaal-button .button-arrow, .vlp-service__more svg { display: none !important; }
.verhaal-button::after, .vlp-service__more::after, .vlp-story em::after {
    content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; padding: 0;
    background: var(--yellow) var(--arrow-navy) center / 16px no-repeat; transition: transform .3s;
}
.service-list__small .verhaal-button { color: var(--teal); }
.glider .verhaal-button { color: var(--navy); margin-top: 16px; }
.service-list__small .service-block:hover .verhaal-button::after, .glider .content-glider:hover .verhaal-button::after,
.vlp-service:hover .vlp-service__more::after, .vlp-story:hover em::after, .verhaal-button:hover::after { transform: translateX(3px); }
.vlp-story em::after { background-color: var(--yellow); }
.service-list__small .service-block__content-wrapper { display: flex; flex-direction: column; }
.service-list__small .service-block__content-wrapper p { color: #c4d1e2; }

/* — Schaduwen niet meer afsnijden: ruimte binnen de slider — */
.glider-slide-item { padding: 6px 16px 36px; }
.glider-dots { margin-top: 4px; gap: 6px; }
.glider-dot { width: 9px; height: 9px; margin: 0; border-radius: 999px; transition: width .3s, background .3s; }
.glider-dot.active { width: 24px; background: var(--navy); }

/* — Contactkaarten — */
.text-contact { border-radius: var(--fin-radius); }
.text-contact--navy h2.contact { color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .service-list__small .service-block__content, .text-contact, .glider .content-glider,
    .service-list__small .service-block__content::before, .glider .content-glider::before { transition: none; }
}
/* Verhalenkaart in de slider: schaduw die binnen de slide-ruimte valt (de slider knipt alles daarbuiten af) */
.glider-slide-item { padding: 8px 22px 40px; }
.glider .content-glider { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(0,39,85,.05), 0 12px 24px rgba(0,39,85,.10); }
.glider .content-glider:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(0,39,85,.06), 0 16px 28px rgba(0,39,85,.14); }

/* ─── Rekenmodule (stap 1) op de donkerblauwe band: zelfde glaspanelen als de dienstpanelen op de homepage ─── */
.moonsio-iframe-calculator #hc_s1 .hypcalc__split-left,
.moonsio-iframe-calculator #hc_s1 .hypcalc__split-right {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--card-navy) !important; color: #fff;
    border: 1px solid rgba(54,204,199,.32); border-radius: var(--fin-radius);
    box-shadow: var(--card-shadow-navy);
    backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
}
.moonsio-iframe-calculator #hc_s1 .hypcalc__split-right { background: radial-gradient(circle at 100% 0%, rgba(54,204,199,.34), rgba(54,204,199,0) 46%), linear-gradient(160deg, #002755 0%, #05305f 55%, #0c4a64 100%) !important; }
.moonsio-iframe-calculator #hc_s1 .hypcalc__panel-title,
.moonsio-iframe-calculator #hc_s1 .hypcalc__right-cap { color: #fff; font-family: 'Mont-Heavy', 'Mont-Bold', sans-serif; }
.moonsio-iframe-calculator #hc_s1 .hypcalc__cap { color: #fff; }
.moonsio-iframe-calculator #hc_s1 .hypcalc__hint { color: rgba(255,255,255,.6); }
/* Velden: glas met witte tekst, teal focus */
.moonsio-iframe-calculator #hc_s1 .hypcalc__euro input {
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); color: #fff; border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.moonsio-iframe-calculator #hc_s1 .hypcalc__euro input::placeholder { color: rgba(255,255,255,.45); }
.moonsio-iframe-calculator #hc_s1 .hypcalc__euro input:focus { background: rgba(255,255,255,.12); border-color: var(--teal); box-shadow: 0 0 0 3px rgba(54,204,199,.25); }
.moonsio-iframe-calculator #hc_s1 .hypcalc__euro::before { color: rgba(255,255,255,.7); }
.moonsio-iframe-calculator #hc_s1 .hypcalc__err { color: #ffd27a; }
/* Uitkomst */
.moonsio-iframe-calculator #hc_s1 .hypcalc__amount { color: #fff; }
.moonsio-iframe-calculator #hc_s1 .hypcalc__result-row .k { color: rgba(255,255,255,.7); }
.moonsio-iframe-calculator #hc_s1 .hypcalc__result-row .v { color: var(--teal); }
.moonsio-iframe-calculator #hc_s1 .hypcalc__note { color: rgba(255,255,255,.6); border-top-color: rgba(255,255,255,.14); }
.moonsio-iframe-calculator #hc_s1 .hypcalc__actions .btn-full { color: #fff; text-decoration-color: var(--teal); }
.moonsio-iframe-calculator #hc_s1 .hypcalc__actions .btn-full:hover { color: var(--teal); }
.moonsio-iframe-calculator #hc_s1 .hypcalc__actions .hypcalc__btn-teal { box-shadow: 0 10px 24px rgba(248,187,22,.28); }

/* ─── Video's: zelfde afwerking als de kaarten; afspeelknop geel zoals de pijlen ─── */
.iframe-container { border-radius: var(--fin-radius); box-shadow: 0 0 0 3px var(--teal), var(--fin-shadow); }
/* Sommige thumbnails hebben zelf een dik teal kader: iets inzoomen zodat alleen ons dunne kader overblijft */
.video-facade img { transform: scale(1.07); transition: transform .6s var(--fin-ease); }
.video-facade:hover img { transform: scale(1.1); }
.video-facade__play, .vlp-video__play {
    background: var(--yellow) !important; color: var(--navy) !important;
    box-shadow: 0 0 0 8px rgba(248,187,22,.25), 0 12px 30px rgba(0,20,45,.35);
    transition: transform .3s var(--fin-ease), box-shadow .3s;
}
.video-facade:hover .video-facade__play, .video-facade:focus-visible .video-facade__play {
    background: var(--yellow); box-shadow: 0 0 0 12px rgba(248,187,22,.28), 0 14px 34px rgba(0,20,45,.4);
}
.vlp-video:hover .vlp-video__play { box-shadow: 0 0 0 12px rgba(248,187,22,.28), 0 14px 34px rgba(0,20,45,.4); }
.vlp-video { border-radius: var(--fin-radius); box-shadow: 0 0 0 3px var(--teal), var(--fin-shadow); }
/* Adviseur-slider: ruimte voor de kaartschaduw (de scroller knipt alles daarbuiten af) */
.adviseur-scroller { padding-top: 10px; padding-bottom: 44px; margin-bottom: -30px; }
.adviseur-scroller .adviseur-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(0,39,85,.05), 0 12px 26px rgba(0,39,85,.10); }
.adviseur-scroller .adviseur-card:hover { box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(0,39,85,.06), 0 18px 32px rgba(0,39,85,.15); }

/* ─── Contactformulier: licht vlak in dezelfde stijl als de andere lichte kaarten (wit, glans, gloed, lichtrand) ─── */
.section__contactform-gf .gf-contactform, .contactform--compact .gf-contactform {
    position: relative; overflow: hidden; isolation: isolate;
    background-color: #fff !important; background-image: var(--card-light) !important;
    border: var(--fin-border); border-radius: var(--fin-radius); box-shadow: var(--fin-shadow);
}
.section__contactform-gf .vixx-form input, .section__contactform-gf .vixx-form textarea,
.contactform--compact .vixx-form input, .contactform--compact .vixx-form textarea {
    background: #f4f7fa; border: 1px solid #e2e8ef; color: var(--navy); border-radius: 14px;
    box-shadow: inset 0 1px 2px rgba(0,39,85,.04);
}
.section__contactform-gf .vixx-form input:hover, .section__contactform-gf .vixx-form textarea:hover { border-color: #cfd9e4; }
.section__contactform-gf .vixx-form input:focus, .section__contactform-gf .vixx-form textarea:focus,
.contactform--compact .vixx-form input:focus, .contactform--compact .vixx-form textarea:focus {
    background: #fff; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(54,204,199,.2);
}
.section__contactform-gf .gform_button { box-shadow: 0 10px 24px rgba(248,187,22,.28); }

/* ─── Dienstkaarten (blok "services") in het kaartsysteem: beeld tot de rand, glans, gele pijl, zelfde hover ─── */
.block-service-card {
    position: relative; isolation: isolate; overflow: hidden;
    border: var(--fin-border); border-radius: var(--fin-radius);
    background-color: #fff; background-image: var(--card-light); box-shadow: var(--fin-shadow);
    transition: transform .35s var(--fin-ease), box-shadow .35s var(--fin-ease), border-color .35s;
}
.block-service-card__img { margin: -30px -30px 16px; border-radius: 0; }
.block-service-card__img img { height: 180px; transition: transform .6s var(--fin-ease); }
.block-service-card h3 { font-family: 'Mont-Heavy', 'Mont-Bold', sans-serif; }
a.block-service-card:hover { transform: translateY(-6px); box-shadow: var(--fin-shadow-hover); border-color: rgba(54,204,199,.45); }
a.block-service-card:hover .block-service-card__img img { transform: scale(1.04); }
a.block-service-card::before {
    content: ""; position: absolute; z-index: 2; top: -60%; left: -80%; width: 60%; height: 220%; pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(18deg); transition: left .8s var(--fin-ease);
}
a.block-service-card:hover::before { left: 130%; }
.block-service-card__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; font-size: 14px; color: var(--navy); }
.block-service-card__link .button-arrow { display: none; }
.block-service-card__link::after {
    content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%;
    background: var(--yellow) var(--arrow-navy) center / 16px no-repeat; transition: transform .3s;
}
a.block-service-card:hover .block-service-card__link { color: var(--navy); }
a.block-service-card:hover .block-service-card__link::after { transform: translateX(3px); }
/* Tegels-variant: donkere kaart zoals bovenaan de homepage */
.block-services--tiles .block-service-card { background: var(--card-navy) !important; border: 1px solid rgba(54,204,199,.30); box-shadow: var(--card-shadow-navy); }
.block-services--tiles a.block-service-card:hover { box-shadow: var(--card-shadow-navy-hover); border-color: var(--teal); }
.block-services--tiles .block-service-card__link { color: var(--teal); justify-content: center; }

/* ─── Losse beelden naast tekst en in tabbladen: zelfde ronding en schaduw als de kaarten ─── */
.block-text__media:not(.block-text__media--plain) img, .block-tabs__img {
    border-radius: var(--fin-radius); box-shadow: 0 0 0 1px rgba(0,39,85,.06), 0 18px 44px rgba(0,39,85,.12);
}

/* ─── Video's: ingebakken thumbnail-kaders volledig wegsnijden; alleen ons dunne kader blijft ─── */
.video-facade img { transform: scale(1.11); }
.video-facade:hover img { transform: scale(1.14); }

/* ─── Video-kader: 1px teal, net als de randen van de kaarten en panelen ─── */
.iframe-container, .vlp-video { box-shadow: 0 0 0 1px rgba(54,204,199,.55), var(--fin-shadow); }
.video-facade img { transform: scale(1.09); }
.video-facade:hover img { transform: scale(1.12); }

/* ─── Vixx-diensticonen: eigen duotone set (navy lijn, witte glasvulling, geel accent) in een teal "squircle" ─── */
.vixx-ic .f { fill: rgba(255,255,255,.62); stroke: none; }
.vixx-ic .a { fill: var(--yellow); stroke: var(--navy); stroke-width: 1.6; }
.vixx-hero-home .service-icon {
    width: 54px; height: 54px; border-radius: 17px; margin-bottom: 18px;
    background: linear-gradient(145deg, #6fe6e1 0%, var(--teal) 55%, #22a9a4 100%);
    border: 1px solid rgba(255,255,255,.55); color: var(--navy);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 6px rgba(0,39,85,.12), 0 10px 22px rgba(54,204,199,.35);
}
.vixx-hero-home .service:hover .service-icon {
    background: linear-gradient(145deg, #fff 0%, #eafaf9 100%); border-color: #fff; color: var(--navy);
    box-shadow: inset 0 1px 0 #fff, 0 12px 26px rgba(54,204,199,.45); transform: rotate(-4deg) scale(1.05);
}
.vixx-hero-home .service-icon { transition: background .35s, transform .35s var(--fin-ease), box-shadow .35s; }
.vixx-hero-home .service:hover .vixx-ic .f { fill: rgba(54,204,199,.28); }
/* Zelfde set op lichte vlakken (vestigingspagina's): teal glasvulling i.p.v. wit */
.vlp-ic--svc { width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(145deg, #e9fbfa 0%, #d3f4f2 100%); color: var(--navy); }
.vlp-ic--svc .vixx-ic .f { fill: rgba(54,204,199,.35); }
.vlp-service:hover .vlp-ic--svc { background: linear-gradient(145deg, #6fe6e1 0%, var(--teal) 55%, #22a9a4 100%); color: var(--navy); }
.vlp-service:hover .vlp-ic--svc .vixx-ic .f { fill: rgba(255,255,255,.62); }
@media (max-width: 560px) { .vixx-hero-home .service-icon { width: 44px; height: 44px; border-radius: 14px; } .vixx-hero-home .service-icon .vixx-ic { width: 26px; height: 26px; } }

/* ─── Zoekbalk in de nav: menu fadet weg, balk schuift er rustig overheen, duidelijke sluitknop ─── */
.menu-vixx-nav-container { transition: opacity .25s ease, transform .3s var(--fin-ease), visibility .25s; }
nav.zoek-open .menu-vixx-nav-container { opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; }
.nav-zoek__form {
    top: 50%; transform: translateY(-50%); height: 38px; gap: 4px; padding: 0;
    transition: width .45s var(--fin-ease), height .35s var(--fin-ease), padding .35s, background .3s, border-color .3s, box-shadow .3s;
}
.nav-zoek.is-open .nav-zoek__form {
    width: min(640px, 58vw); height: 50px; padding: 0 6px 0 4px;
    background: rgba(255,255,255,.97); border: 1px solid rgba(255,255,255,.9);
    box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(0,20,45,.10), 0 22px 50px rgba(0,20,45,.32);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.nav-zoek__input { font-size: 16px; transform: translateX(10px); transition: opacity .25s .15s, transform .35s .12s var(--fin-ease); }
.nav-zoek.is-open .nav-zoek__input { transform: none; }
/* Zoekknop: wit icoon in het rondje; open = geel rondje met navy icoon */
.nav-zoek.is-open .nav-zoek__knop { width: 38px; height: 38px; background: var(--yellow); color: var(--navy); box-shadow: 0 6px 16px rgba(248,187,22,.35); }
.nav-zoek.is-open .nav-zoek__knop:hover { color: var(--navy); background: #ffc933; }
/* Sluitknop: pas zichtbaar als de balk open is */
.nav-zoek__sluit {
    flex: none; width: 0; height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--navy);
    display: grid; place-items: center; cursor: pointer; opacity: 0; overflow: hidden;
    transition: width .3s var(--fin-ease), opacity .2s, background .2s;
}
.nav-zoek.is-open .nav-zoek__sluit { width: 38px; opacity: 1; transition-delay: .15s; }
.nav-zoek__sluit:hover { background: #eef3f7; }
.nav-zoek__knop:focus-visible, .nav-zoek__sluit:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .nav-zoek__form, .nav-zoek__input, .menu-vixx-nav-container { transition: none; } }

/* ─── Diensticonen strak: vlak vierkant vakje, dunne teal rand, teal lijnicoon (overschrijft de eerdere zachte versie) ─── */
.vixx-hero-home .service-icon {
    width: 50px; height: 50px; border-radius: 12px; margin-bottom: 18px;
    background: rgba(54,204,199,.12); border: 1px solid rgba(54,204,199,.5); color: var(--teal);
    box-shadow: none; transform: none;
}
.vixx-hero-home .service:hover .service-icon { background: var(--teal); border-color: var(--teal); color: var(--navy); box-shadow: none; transform: none; }
.vlp-ic--svc { width: 50px; height: 50px; border-radius: 12px; background: #fff; border: 1px solid #dbe3ec; color: var(--navy); box-shadow: none; }
.vlp-service:hover .vlp-ic--svc { background: var(--teal); border-color: var(--teal); color: var(--navy); }
@media (max-width: 560px) { .vixx-hero-home .service-icon { width: 42px; height: 42px; border-radius: 10px; } .vixx-hero-home .service-icon .vixx-ic { width: 24px; height: 24px; } }

/* ─── Diensticonen: blauw vakje met wit lijnicoon (zelfde strakke stijl) ─── */
.vixx-hero-home .service-icon { background: var(--navy); border: 1px solid rgba(54,204,199,.45); color: #fff; box-shadow: 0 6px 16px rgba(0,20,45,.30); }
.vixx-hero-home .service:hover .service-icon { background: var(--teal); border-color: var(--teal); color: var(--navy); box-shadow: 0 6px 16px rgba(0,20,45,.25); }
.vlp-ic--svc { background: var(--navy); border-color: var(--navy); color: #fff; }
.vlp-service:hover .vlp-ic--svc { background: var(--teal); border-color: var(--teal); color: var(--navy); }
.vixx-hero-home .service-icon { border-color: var(--navy); } .vixx-hero-home .service:hover .service-icon { border-color: var(--teal); }
/* Diensticonen: geel vakje met navy lijnicoon (zelfde combinatie als de pijlrondjes) */
.vixx-hero-home .service-icon { background: var(--yellow); border-color: var(--yellow); color: var(--navy); box-shadow: 0 6px 16px rgba(0,20,45,.28); }
.vixx-hero-home .service:hover .service-icon { background: var(--teal); border-color: var(--teal); color: var(--navy); }
/* Hero-dienstpanelen: icoonvakje lichtblauw (teal) met navy icoon; pijlknop blijft geel */
.vixx-hero-home .service-icon { background: var(--teal); border-color: var(--teal); color: var(--navy); }
.vixx-hero-home .service:hover .service-icon { background: #fff; border-color: #fff; color: var(--navy); }

/* ─── Contactkaart (contactpagina) in het kaartsysteem: navy verloop + teal gloed, lichtrand, 22px ─── */
.contact-kaart {
    background: var(--card-navy) !important; border: 1px solid rgba(54,204,199,.30);
    border-radius: var(--fin-radius); box-shadow: var(--card-shadow-navy);
}
.contact-kaart__icoon { box-shadow: 0 6px 14px rgba(0,20,45,.25); }
/* Zoekrondje: in gesloten stand geen tussenruimte (het verborgen kruisje duwde het vergrootglas uit het midden) */
.nav-zoek:not(.is-open) .nav-zoek__form { gap: 0; justify-content: center; }
.nav-zoek:not(.is-open) .nav-zoek__sluit { display: none; }
.nav-zoek:not(.is-open) .nav-zoek__knop { width: 100%; height: 100%; }
.nav-zoek__knop svg { transform: translate(.5px, .5px); }
.nav-zoek:not(.is-open) .nav-zoek__input { flex: 0 0 0; width: 0; padding: 0; }
/* Hero-icoon: witte lijn op het lichtblauwe vakje; bij hover (wit vakje) navy */
.vixx-hero-home .service-icon { color: #fff; } .vixx-hero-home .service:hover .service-icon { color: var(--navy); }

/* ─── Hele tegel klikbaar: de link in de kaart rekt onzichtbaar uit over de hele kaart ─── */
.service-list__small .service-block__content, .glider .content-glider { position: relative; cursor: pointer; }
.service-list__small .verhaal-button, .glider .verhaal-button { position: static !important; }
.service-list__small .verhaal-button::before, .glider .verhaal-button::before { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
.service-list__small .verhaal-button:focus-visible, .glider .verhaal-button:focus-visible { outline: none; }
.service-list__small .service-block__content:has(.verhaal-button:focus-visible),
.glider .content-glider:has(.verhaal-button:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* ─── Mobiel: compacter en netjes uitgelijnd ─── */
@media (max-width: 700px) {
    /* Rekenmodule: kop links uitgelijnd met vinkje bovenaan, kleinere letter, minder binnenruimte */
    .moonsio-iframe-calculator__title { font-size: 24px; line-height: 1.2; align-items: flex-start; gap: 10px; }
    .moonsio-iframe-calculator__title::before { width: 26px; height: 26px; margin-top: 1px; }
    .moonsio-iframe-calculator__intro { font-size: 15px; }
    .moonsio-iframe-calculator__content { padding: 0 !important; }
    .moonsio-iframe-calculator #hc_s1 .hypcalc__split-left,
    .moonsio-iframe-calculator #hc_s1 .hypcalc__split-right { padding: 20px 18px; border-radius: 18px; }
    .moonsio-iframe-calculator #hc_s1 .hypcalc__panel-title, .moonsio-iframe-calculator #hc_s1 .hypcalc__right-cap { font-size: 18px; margin-bottom: 12px; }
    .moonsio-iframe-calculator #hc_s1 .hypcalc__actions { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
    .moonsio-iframe-calculator #hc_s1 .hypcalc__actions .btn { justify-content: center; }
}
@media (max-width: 560px) {
    /* Homepage-hero: kleinere kop en compacte dienstrijen, zodat er meer in beeld past */
    .vixx-hero-home { padding: 16px 0 28px; }
    .vixx-hero-home h1 { font-size: 28px; margin-bottom: 22px !important; }
    .vixx-hero-home .services { gap: 8px; }
    .vixx-hero-home .service { padding: 10px 12px; gap: 12px; border-radius: 16px; min-height: 0; }
    .vixx-hero-home .service-icon { width: 36px; height: 36px; border-radius: 10px; }
    .vixx-hero-home .service-icon .vixx-ic { width: 20px; height: 20px; }
    .vixx-hero-home .service .service-title { font-size: 16px; }
    .vixx-hero-home .service .service-arrow { width: 30px; height: 30px; }
    .vixx-hero-home .service .service-arrow svg { width: 14px; height: 14px; }
}

/* ─── Blogkaarten: zelfde pijl-in-rondje als overal (kaart is al volledig klikbaar) ─── */
.blog-kaart__meer { display: flex; align-items: center; justify-content: space-between; width: 100%; color: var(--navy); font-size: 14px; }
.blog-kaart__meer svg { display: none; }
.blog-kaart__meer::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--yellow) var(--arrow-navy) center / 16px no-repeat; transition: transform .3s; }
.blog-kaart:hover .blog-kaart__meer::after { transform: translateX(3px); }
.blog-kaart__titel { font-family: 'Mont-Heavy', 'Mont-Bold', sans-serif; }

/* ─── Beeldtegels (/werk): kaartronding, lichtrand en dezelfde lift ─── */
.imagegrid__item { border-radius: var(--fin-radius); box-shadow: 0 0 0 1px rgba(0,39,85,.06), var(--fin-shadow); transition: transform .35s var(--fin-ease), box-shadow .35s var(--fin-ease); }
.imagegrid__item:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(54,204,199,.45), var(--fin-shadow-hover); }

/* ─── Blogartikel: beelden en video's in de tekst zelfde ronding/schaduw als de kaarten ─── */
.blog-artikel__beeld, .blog-artikel__kolom img, .blog-artikel__kolom iframe, .blog-artikel__kolom video {
    border-radius: var(--fin-radius); box-shadow: 0 0 0 1px rgba(0,39,85,.06), 0 18px 44px rgba(0,39,85,.12);
}
.blog-artikel__kolom iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }

/* ─── Mobiel-fixes uit de volledige controle ─── */
@media (max-width: 700px) {
    /* Zoekpagina: formulier en resultaten binnen het scherm */
    .row > .zoek-balk, .row > .zoek-resultaten, .row > .zoek-leeg { width: 100%; min-width: 0; align-self: stretch; }
    .zoek-balk .btn { padding-left: 18px; padding-right: 18px; }
    /* Beeldtegels: titel past in de tegel */
    .imagegrid { gap: 12px; }
    .imagegrid__item { min-width: 0; }
    .imagegrid__title { font-size: 15px; padding: 12px; overflow-wrap: anywhere; hyphens: auto; }
    /* Contacticoontjes op adviseurkaarten: groter tikvlak */
    .adviseur-card__contacts a { width: 34px; height: 34px; }
}
/* Slider-bolletjes: zelfde look, maar een vinger-groot tikvlak */
.glider-dot { position: relative; }
.glider-dot::after { content: ""; position: absolute; inset: -14px -6px; }
@media (max-width: 700px) {
    .imagegrid__title { font-size: 13.5px; padding: 12px 10px; hyphens: manual; overflow-wrap: normal; word-break: normal; }
    .block-service-card { padding: 22px; }
    .block-service-card__img { margin: -22px -22px 14px; }
    .block-service-card__img img { height: 150px; }
    .block-service-card h3 { font-size: 20px; }
}
.vixx-hero-home .service-icon .vixx-ic { stroke-width: 3.3; }
/* Gecentreerde tekstblokken (row in kolomrichting): kolom niet uitrekken tot 300px hoogte */
.block-text__row[style*="flex-direction:column"] > .col { flex: 0 0 auto; width: 100%; max-width: 760px; }

/* ─── Mobiel menu: sluitknop, links uitgelijnde items met accordeon, CTA + bellen + NL/EN onderaan ─── */
.navik-header-overlay { display: block; align-items: initial; justify-content: initial;
    background: radial-gradient(circle at 0% 0%, rgba(54,204,199,.22), rgba(54,204,199,0) 45%), linear-gradient(170deg, #002755 0%, #032f63 60%, #0a4566 100%); }
.mnav { min-height: 100%; display: flex; flex-direction: column; padding: 18px 22px calc(24px + env(safe-area-inset-bottom)); max-width: 520px; margin: 0 auto; }
.mnav__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mnav__top .logo__img { height: 38px; }
.mnav__close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.06); color: #fff; display: grid; place-items: center; cursor: pointer; }
.mnav__close:active { background: rgba(255,255,255,.15); }
.navik-menu-overlay { flex: 1; }
.overlay-nav-list { text-align: left; }
.overlay-nav-list > li { margin: 0; border-bottom: 1px solid rgba(255,255,255,.10); }
.overlay-nav-list > li > a, .mnav__toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 2px;
    color: #fff; font-size: 21px; font-family: 'Mont-Bold', sans-serif; background: none; border: 0; text-align: left; cursor: pointer;
}
.mnav__toggle svg { color: var(--teal); transition: transform .3s var(--fin-ease); }
.mnav__item.is-open .mnav__toggle svg { transform: rotate(180deg); }
.mnav__item .sub-menu { display: block; max-height: 0; transition: max-height .35s var(--fin-ease), padding .3s; }
.mnav__item.is-open .sub-menu { max-height: 600px; padding: 0 0 14px; }
.overlay-nav-list .sub-menu li a { display: block; padding: 9px 0 9px 14px; border-left: 2px solid rgba(54,204,199,.35); color: #c4d1e2; font-size: 16px; line-height: 1.4; }
.overlay-nav-list .sub-menu li a:active { color: #fff; border-left-color: var(--teal); }
.mnav__bottom { padding-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.mnav__cta { justify-content: center; width: 100%; padding: 15px 24px; font-size: 16px; box-shadow: 0 10px 24px rgba(248,187,22,.28); }
.mnav__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mnav__tel { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-family: 'Mont-Bold', sans-serif; font-size: 15px; }
.mnav__tel svg { color: var(--teal); }
/* Taalkeuze als schakelaar (was op mobiel verborgen door .nav-lang { display:none }) */
@media (max-width: 900px) {
    .nav-lang.nav-lang--mobile { display: inline-flex; margin: 0; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.2); }
}
.nav-lang--mobile a { padding: 7px 14px; border-radius: 999px; font-size: 14px; color: rgba(255,255,255,.75); }
.nav-lang--mobile a.active { background: var(--teal); color: var(--navy); }
.mnav__item .sub-menu { overflow: hidden; }