/* Bouw of koop? advisor. Namespaced .md-bvk__*, built on the site's md-tokens and type classes.
   No bordered cards: content sits on the section, structure comes from type, spacing and surfaces. */

/* One accent for the whole tool: the primary blue. */
.md-bvk, .md-bvk__dialog { --md-bvk-accent: var(--md-color-primary); --md-bvk-accent-soft: rgba(var(--md-color-primary-rgb), .08); }

.md-bvk {
    font-family: var(--md-font-body);
    color: var(--md-color-text-body);
    scroll-margin-top: var(--md-space-6);
}
.md-bvk__narrow { max-width: 600px; margin: 0 auto; }
.md-bvk__narrow--wide { max-width: 820px; }
.md-bvk__progress { margin-bottom: var(--md-space-6) !important; }

.md-bvk__card fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.md-bvk__eyebrow { font-family: var(--md-font-accent); font-size: var(--md-font-size-lg); color: var(--md-color-text-eyebrow); margin: 0 0 var(--md-space-1); }
.md-bvk__title { color: var(--md-color-text-heading); margin: 0 0 var(--md-space-3); padding: 0; float: none; width: auto; }
.md-bvk__title:focus, .md-bvk__verdict:focus { outline: none; }
.md-bvk__lead { margin: 0 0 var(--md-space-6); }
.md-bvk__help { color: var(--md-color-text-subtle); margin: 0 0 var(--md-space-6); }

.md-bvk__usps { list-style: none; padding: 0; margin: 0 0 var(--md-space-8); display: flex; flex-wrap: wrap; gap: var(--md-space-2) var(--md-space-6); }
.md-bvk__usps li, .md-bvk__checks li { position: relative; padding-left: var(--md-space-8); }
.md-bvk__usps li { font-weight: var(--md-font-weight-semibold); padding-left: var(--md-space-6); }
.md-bvk__usps li::before, .md-bvk__checks li::before {
    content: ''; position: absolute; left: 2px; top: 0.4em;
    width: 13px; height: 7px;
    border-left: 3px solid var(--md-bvk-accent); border-bottom: 3px solid var(--md-bvk-accent);
    transform: rotate(-45deg);
}

/* Progress */
.md-bvk__progress { margin-bottom: var(--md-space-8); }
.md-bvk__progress-label { display: block; font-size: var(--md-font-size-meta); font-weight: var(--md-font-weight-semibold); color: var(--md-color-text-subtle); margin-bottom: var(--md-space-2); }
.md-bvk__progress-bar { height: 4px; border-radius: var(--md-radius-pill); background: var(--md-color-gray-150); overflow: hidden; }
.md-bvk__progress-bar span { display: block; height: 100%; background: var(--md-bvk-accent); border-radius: inherit; transition: width .3s ease; }

/* Options: form controls keep their outline, that is the design system's input style */
.md-bvk__options { display: grid; grid-template-columns: 1fr; gap: var(--md-space-2); }
.md-bvk__option { position: relative; }
.md-bvk__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.md-bvk__option label {
    display: flex; align-items: center;
    cursor: pointer;
    padding: 12px var(--md-space-12) 12px var(--md-space-5);
    border: 2px solid var(--md-color-border);
    border-radius: var(--md-radius-md);
    background: var(--md-color-bg);
    line-height: 1.35;
    position: relative;
    transition: border-color .15s ease, background-color .15s ease;
}
.md-bvk__option label::after {
    content: ''; position: absolute; right: var(--md-space-5); top: 50%;
    width: 18px; height: 18px; margin-top: -9px;
    border: 2px solid var(--md-color-border-strong);
    border-radius: 50%;
}
.md-bvk__input[type="checkbox"] + label::after { border-radius: var(--md-radius-xs); }
.md-bvk__option label:hover { border-color: var(--md-bvk-accent); }
.md-bvk__input:checked + label { border-color: var(--md-bvk-accent); background: var(--md-bvk-accent-soft); font-weight: var(--md-font-weight-semibold); }
.md-bvk__input:checked + label::after {
    border-color: var(--md-bvk-accent);
    background: var(--md-bvk-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center / 10px no-repeat;
}
/* Single choice: a real radio, a filled dot in the ring. The checkmark stays for multiple choice. */
.md-bvk__input[type="radio"]:checked + label::after {
    background: radial-gradient(circle, var(--md-bvk-accent) 0 4px, transparent 4.5px);
}
.md-bvk__input:focus-visible + label { box-shadow: 0 0 0 3px rgba(var(--md-color-primary-rgb), .3); }

.md-bvk__other { margin-top: var(--md-space-3); }
.md-bvk__other label, .md-bvk__field > label, .md-bvk__field-label { display: block; font-weight: var(--md-font-weight-semibold); font-size: var(--md-font-size-meta); margin-bottom: var(--md-space-1); }

.md-bvk__fields { display: grid; gap: var(--md-space-5); }
.md-bvk__field input { max-width: 220px; }
.md-bvk__field small { display: block; color: var(--md-color-text-subtle); margin-top: var(--md-space-1); }

.md-bvk__nav { display: flex; justify-content: space-between; gap: var(--md-space-3); margin-top: var(--md-space-8); }
.md-bvk__nav .md-bvk__next:only-child { margin-left: auto; }
.md-bvk__next:disabled { opacity: .35; cursor: not-allowed; }

/* ---------------- Result: one column ---------------- */
.md-bvk__verdict { margin-bottom: var(--md-space-4); }


.md-bvk__basis { font-size: var(--md-font-size-meta); color: var(--md-color-text-subtle); margin: var(--md-space-4) 0 0; }
.md-bvk__basis strong { color: var(--md-color-text-body); font-weight: var(--md-font-weight-semibold); }

/* Numbers: one card per figure. Filled surface, no border. */
.md-bvk { --md-bvk-card-bg: var(--md-color-bg-secondary); }

/* Icon: the site's md-icon-rounded (dark circle, white glyph); only the spacing is set here. */
.md-bvk__number .card-body { display: flex; flex-direction: column; align-items: flex-start; }
.md-bvk__number-label { display: block; font-size: var(--md-font-size-meta); line-height: var(--md-line-height-body); color: var(--md-color-text-subtle); margin-bottom: var(--md-space-1); }
.md-bvk__number-value {
    font-family: var(--md-font-display);
    font-size: var(--md-font-size-2xl);
    line-height: var(--md-line-height-heading);
    color: var(--md-color-text-heading);
}
.md-bvk__number-sub { font-size: var(--md-font-size-meta); line-height: var(--md-line-height-body); color: var(--md-color-text-subtle); margin-top: var(--md-space-2); }

.md-bvk__fte { display: flex; gap: 6px; margin-top: var(--md-space-3); }
.md-bvk__fte-dot { position: relative; width: 20px; height: 20px; border-radius: 50%; background: var(--md-color-gray-150); overflow: hidden; }
.md-bvk__fte-dot i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--md-bvk-accent); }

.md-bvk__bar { width: 100%; margin-top: var(--md-space-3); }
.md-bvk__bar-track { position: relative; height: 6px; border-radius: var(--md-radius-pill); background: var(--md-color-gray-150); }
.md-bvk__bar-fill { position: absolute; top: 0; bottom: 0; border-radius: var(--md-radius-pill); background: var(--md-bvk-accent); }
.md-bvk__bar--save .md-bvk__bar-fill { background: var(--md-color-primary); }
.md-bvk__bar-ticks { display: flex; justify-content: space-between; font-size: var(--md-font-size-meta); color: var(--md-color-text-fade); margin-top: var(--md-space-1); }

.md-bvk__note { font-weight: var(--md-font-weight-semibold); }
.md-bvk__assumptions { font-size: var(--md-font-size-meta); color: var(--md-color-text-subtle); margin: 0 0 var(--md-space-4); }

.md-bvk__h3 { margin: var(--md-space-10) 0 var(--md-space-3); }
.md-bvk__checks { list-style: none; padding: 0; margin: 0 0 var(--md-space-4); }
.md-bvk__checks li { margin-bottom: var(--md-space-3); }
.md-bvk__tipline { color: var(--md-color-text-subtle); }
.md-bvk__tipline strong { color: var(--md-color-text-heading); }

/* Report */
.md-bvk__demo { background: var(--md-color-bg-accent); padding: var(--md-space-2) var(--md-space-4); font-size: var(--md-font-size-meta); font-weight: var(--md-font-weight-semibold); }

/* Time saving per kans: a white pill on the gray kans card. */
.md-bvk__kans-meta { display: inline-flex; align-items: center; gap: var(--md-space-1); font-size: var(--md-font-size-meta); font-weight: var(--md-font-weight-semibold); background: var(--md-color-white); color: var(--md-color-text-heading); border-radius: var(--md-radius-pill); padding: 2px var(--md-space-3); }
.md-bvk__kans-meta i { color: var(--md-bvk-accent); }

/* Unlocked report: site sections (stats, vertical steps, case panel). Only the extras live here. */
/* md-section--gray/--blue only set --md-color-bg; each section paints it itself (like .md-bvk-band). */
.md-bvk-report-case { background: var(--md-color-bg); }
.md-bvk__restart-row { margin-top: var(--md-space-10); }

/* Kansen as light gray cards in columns: round icon, title, text (the features block's content, on a card).
   A .row (for the section-stack spacing above it) used as a grid: no Bootstrap gutters. One column per kans, max 3. */
.md-bvk-kansen.row { --bs-gutter-x: 0; margin-left: 0; margin-right: 0; }
.md-bvk-kansen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--md-space-6); }
.md-bvk-kansen--2 { grid-template-columns: repeat(2, 1fr); }
.md-bvk-kansen--1 { grid-template-columns: minmax(0, 66%); }
.md-bvk-kansen > * { width: auto; max-width: none; padding: 0; }
.md-bvk-kans-card { background: var(--md-color-bg-secondary); border-radius: var(--md-radius-xl); padding: var(--md-space-8); }
.md-bvk-kans-card > .md-icon-rounded { margin-bottom: var(--md-space-5); }
.md-bvk-kans-card p:last-child { margin-bottom: 0; }

/* Locked: kans 1 free; the other kansen and a preview of the stappenplan and checklists are blurred
   placeholder, fading out at the bottom, with the teaser on top of the preview. */
/* Blur the card's content, not the card: the gray card keeps its crisp rounded edge, and the blur stays inside its padding. */
.md-bvk-kans-card--blur { user-select: none; pointer-events: none; }
.md-bvk-kans-card--blur > * { filter: blur(5px); }
.md-bvk-more.row { --bs-gutter-x: 0; margin-left: 0; margin-right: 0; position: relative; display: block; }
/* The mask clips at the element's box, so the box bleeds 48px past the content on every side:
   the blur fades out inside that margin instead of being cut off at a hard edge. */
.md-bvk-more__blur {
    filter: blur(5px); user-select: none; pointer-events: none;
    margin: calc(var(--md-space-12) * -1);
    padding: var(--md-space-12);
    min-height: 560px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--md-space-12), #000 45%, transparent 100%), linear-gradient(to right, transparent 0, #000 var(--md-space-12), #000 calc(100% - var(--md-space-12)), transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to bottom, transparent 0, #000 var(--md-space-12), #000 45%, transparent 100%), linear-gradient(to right, transparent 0, #000 var(--md-space-12), #000 calc(100% - var(--md-space-12)), transparent 100%);
            mask-composite: intersect;
}
@media (max-width: 767.98px) {
    /* Phone: only 12px of side gutter, so the bleed is narrower and stays on screen. */
    .md-bvk-more__blur { margin: calc(var(--md-space-12) * -1) calc(var(--md-space-3) * -1); padding: var(--md-space-12) var(--md-space-3); }
}
.md-bvk-more__steps { margin: var(--md-space-6) 0 var(--md-space-12); }
.md-bvk-more__step { display: flex; gap: var(--md-space-6); max-width: 640px; margin-bottom: var(--md-space-8); }
.md-bvk-more__step > i { font-size: 40px; color: var(--md-color-text-heading); }
.md-bvk-more__lists { display: grid; grid-template-columns: 1fr 1fr; gap: var(--md-space-12); }

@media (max-width: 991.98px) {
    .md-bvk-kansen { grid-template-columns: 1fr 1fr; }
    .md-bvk-kansen--1 { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .md-bvk-kansen, .md-bvk-kansen--1, .md-bvk-kansen--2 { grid-template-columns: 1fr; }
    .md-bvk-more__lists { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .md-bvk-kans-card { padding: var(--md-space-6); }
}

/* Kansen with numbers: Nu and Straks bars for the process's hours (same colours as the e-mail),
   then a line per kans. */
.md-bvk-week { max-width: 860px; }
.md-bvk-week h3 { margin-bottom: var(--md-space-5); }
.md-bvk-week__row { display: flex; align-items: center; gap: var(--md-space-4); margin-bottom: var(--md-space-3); }
.md-bvk-week__key { width: 64px; flex: none; font-size: var(--md-font-size-meta); color: var(--md-color-text-subtle); }
.md-bvk-week__track { flex: 1; }
.md-bvk-week__fill { display: flex; align-items: center; min-width: max-content; height: 44px; padding: 0 var(--md-space-4); border-radius: var(--md-radius-sm); font-weight: var(--md-font-weight-semibold); white-space: nowrap; }
.md-bvk-week__fill--now { background: var(--md-color-primary); color: var(--md-color-white); }
.md-bvk-week__fill--later { background: var(--md-color-accent); color: var(--md-color-black); }
.md-bvk-week__list { list-style: none; padding: 0; margin: var(--md-space-5) 0 0; display: flex; flex-wrap: wrap; gap: var(--md-space-2) var(--md-space-10); }
.md-bvk-week__list li { margin: 0; }
.md-bvk-week__note { font-size: var(--md-font-size-sm); color: var(--md-color-text-subtle); margin: var(--md-space-4) 0 0; }
@media (max-width: 575.98px) {
    .md-bvk-week__key { width: 48px; }
    .md-bvk-week__list { flex-direction: column; }
}

/* The teaser over the locked kansen */
.md-bvk__teaser {
    position: absolute; left: 50%; top: var(--md-space-12); transform: translateX(-50%);
    width: min(440px, 100%);
    background: var(--md-color-bg);
    border-radius: var(--md-radius-2xl);
    box-shadow: 0 16px 48px rgba(17, 22, 27, .14);
    padding: var(--md-space-8);
    text-align: center;
}
.md-bvk__gate-title { font-family: var(--md-font-display); font-size: var(--md-font-size-xl); color: var(--md-color-text-heading); margin: 0 0 var(--md-space-2); }

/* Gate dialog */
.md-bvk-noscroll { overflow: hidden; }
.md-bvk__dialog {
    width: min(500px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    overflow: auto;
    border: 0;
    border-radius: var(--md-radius-2xl);
    padding: 0;
    box-shadow: 0 24px 80px rgba(17, 22, 27, .3);
    font-family: var(--md-font-body);
    color: var(--md-color-text-body);
}
.md-bvk__dialog::backdrop { background: rgba(17, 22, 27, .55); }
.md-bvk__dialog-close {
    position: absolute; top: var(--md-space-3); right: var(--md-space-3);
    width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: var(--md-color-gray-150); color: var(--md-color-text-heading);
    display: grid; place-items: center; cursor: pointer;
}
.md-bvk__gate { padding: var(--md-space-8); }
.md-bvk__gate .md-bvk__gate-title { padding-right: var(--md-space-10); }
.md-bvk__gate > p, .md-bvk__gate-fields > p { font-size: var(--md-font-size-meta); }
.md-bvk__gate .md-form-control { margin-bottom: var(--md-space-2); }
.md-bvk__gate-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--md-space-2); }
.md-bvk__check { margin: var(--md-space-2) 0; }
.md-bvk__check label { font-size: var(--md-font-size-meta); line-height: 1.4; }
.md-bvk__privacy, .md-bvk__gate > .md-bvk__privacy { font-size: var(--md-font-size-meta); color: var(--md-color-text-subtle); margin: var(--md-space-3) 0 0; }
.md-bvk__gate .btn { width: 100%; margin-top: var(--md-space-3); }
.md-bvk__gate-status { font-weight: var(--md-font-weight-semibold); color: var(--md-color-error); margin: var(--md-space-2) 0 0; min-height: 1.2em; font-size: var(--md-font-size-meta); }

/* CTA: the site's dark surface, no border */
.md-bvk__cta { background: var(--md-color-bg-dark); color: var(--md-color-text-on-dark); border-radius: var(--md-radius-2xl); padding: var(--md-space-10); margin-top: var(--md-space-12); }
.md-bvk__cta p { margin: 0 0 var(--md-space-6); }

.md-bvk__restart { background: none; border: 0; padding: 0; margin-top: var(--md-space-6); color: var(--md-color-text-subtle); text-decoration: underline; cursor: pointer; }

@media (max-width: 767.98px) {
    .md-bvk__teaser { top: var(--md-space-8); padding: var(--md-space-6); }
    .md-bvk__gate { padding: var(--md-space-6); }
    .md-bvk__gate-row { grid-template-columns: 1fr; }
    .md-bvk__cta { padding: var(--md-space-6); }
}

.md-bvk__restart { font-size: var(--md-font-size-meta); }

/* ---------------- Result layout ---------------- */

/* Blue band with white cards, then two panels */

@media (max-width: 767.98px) {
}

/* Booking dialog */
.md-bvk__dialog--wide { width: min(560px, calc(100% - 32px)); }
.md-bvk__booking { padding: var(--md-space-8); }
.md-bvk__booking .md-bvk__gate-title { padding-right: var(--md-space-10); }
/* Google's booking page as on dev, in a slightly wider pop-up. Our title is hidden (Google shows Adriaan and the call). */
.md-bvk__booking-frame { position: relative; display: block; width: 100%; height: 600px; border: 0; }
.md-bvk__dialog--wide:has(.md-bvk__booking-frame) { width: min(640px, calc(100% - 32px)); }
/* While Google's page loads: the smiley and a line of text on white, over the frame. Google draws its page with
   script after the load event, so bvk.js keeps this up a moment longer before fading it out. */
/* Without our title row the close button needs its own strip above the frame. */
.md-bvk__booking:has(.md-bvk__booking-frame) { padding-top: var(--md-space-14); }
.md-bvk__booking-load { position: relative; }
.md-bvk__booking-wait { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 96px; gap: var(--md-space-4); text-align: center; background: var(--md-color-white); transition: opacity .3s ease; }
.md-bvk__booking-wait .md-bvk__booking-smiley { width: 88px; height: auto; }
.md-bvk__booking-wait p { margin: 0; font-size: var(--md-font-size-lg); font-weight: var(--md-font-weight-semibold); color: var(--md-color-text-heading); }
/* Who you will talk to, on the loading screen only: a light-blue banner, person left, the call right. */
.md-bvk__booking-host { display: flex; align-items: center; gap: var(--md-space-4); align-self: stretch; margin-top: var(--md-space-6); padding: var(--md-space-4) var(--md-space-5); text-align: left; background: var(--md-color-bg-tertiary); border-radius: var(--md-radius-lg); }
.md-bvk__booking-host img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--md-color-white); flex: none; }
.md-bvk__booking-host strong { display: block; color: var(--md-color-text-heading); }
.md-bvk__booking-host span { display: block; font-size: var(--md-font-size-meta); color: var(--md-color-text-fade); }
.md-bvk__booking-host-facts { margin: 0 0 0 auto; padding: 0; list-style: none; text-align: right; font-size: var(--md-font-size-meta); font-weight: var(--md-font-weight-semibold); color: var(--md-color-text-heading); }
@media (max-width: 575.98px) { .md-bvk__booking-host { flex-wrap: wrap; } .md-bvk__booking-host-facts { flex-basis: 100%; margin: 0; text-align: left; display: flex; flex-wrap: wrap; gap: 0 var(--md-space-3); } }
/* Under the calendar: phone, mail or the form for people who don't want to book through it. */
.md-bvk__booking-alt { margin-top: var(--md-space-4); padding-top: var(--md-space-4); border-top: 1px solid var(--md-color-gray-150); font-size: var(--md-font-size-sm); }
.md-bvk__booking-alt strong { color: var(--md-color-text-heading); }
.md-bvk__booking-alt p { margin: var(--md-space-1) 0 0; color: var(--md-color-text-fade); }
.md-bvk__booking-load.is-loaded .md-bvk__booking-wait { opacity: 0; pointer-events: none; }
.md-bvk__slots .md-bvk__demo { margin-bottom: var(--md-space-4); }
.md-bvk__slot-day { margin-bottom: var(--md-space-4); }
.md-bvk__slot-date { font-weight: var(--md-font-weight-semibold); color: var(--md-color-text-heading); margin: 0 0 var(--md-space-2); }
.md-bvk__slot-times { display: flex; flex-wrap: wrap; gap: var(--md-space-2); }
.md-bvk__slot {
    min-width: 96px; padding: 10px var(--md-space-4);
    border: 2px solid var(--md-color-border); border-radius: var(--md-radius-md);
    background: var(--md-color-bg); color: var(--md-color-text-heading); font-weight: var(--md-font-weight-semibold);
    cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.md-bvk__slot:hover, .md-bvk__slot:focus-visible { border-color: var(--md-bvk-accent); background: var(--md-bvk-accent-soft); outline: none; }
.md-bvk__slot-done { background: var(--md-bvk-accent-soft); border-radius: var(--md-radius-md); padding: var(--md-space-4) var(--md-space-5); }
.md-bvk__slot-done p:last-child { margin: 0; font-size: var(--md-font-size-meta); }
.md-cta-alt-actions .md-bvk__cta-alt-link { display: block; margin-top: var(--md-space-4); font-size: var(--md-font-size-meta); color: var(--md-color-text-subtle); text-decoration: underline; width: auto; text-align: left; }
@media (max-width: 767.98px) { .md-bvk__booking { padding: var(--md-space-6); } .md-cta-alt-actions .md-bvk__cta-alt-link { text-align: center; } }

/* Service action: the site's regular link with chevron */
.md-bvk__action { display: inline-block; margin-top: var(--md-space-2); line-height: var(--md-line-height-body); }

/* Trust strip: logos in grey, like the site's client-logos block, compact on one line */
.md-bvk-trust { padding: var(--md-space-12) 0; border-top: 1px solid var(--md-color-border-light); background: var(--md-color-bg); }
/* On the result page the logos follow "Waarom dit advies" directly: no divider, and less space above them. */
.md-text-and-image.md-bvk-why { padding-bottom: var(--md-space-12); }
.md-bvk-why + .md-bvk-trust { border-top: 0; padding-top: 0; }
@media (max-width: 767.98px) {
    .md-text-and-image.md-bvk-why { padding-bottom: var(--md-space-8); }
}
.md-bvk-trust__title { font-size: var(--md-font-size-base); color: var(--md-color-text-subtle); text-align: center; margin: 0 0 var(--md-space-8); }
.md-bvk-trust__title strong { color: var(--md-color-text-heading); }
.md-bvk-trust__logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--md-space-8) var(--md-space-12); }
.md-bvk-trust__logos li { margin: 0; }
.md-bvk-trust__logos img { display: block; max-height: 40px; max-width: 130px; width: auto; filter: grayscale(100%); opacity: .75; transition: filter .2s ease, opacity .2s ease; }
.md-bvk-trust__logos img:hover { filter: grayscale(0%); opacity: 1; }
@media (max-width: 767.98px) {
    .md-bvk-trust__logos { gap: var(--md-space-6) var(--md-space-8); }
    .md-bvk-trust__logos img { max-height: 32px; max-width: 100px; }
}


/* Small print in the dialogs: the opt-in and the privacy line at the small token, like the footer */
.md-bvk__check label, .md-bvk__dialog .md-bvk__privacy { font-size: var(--md-font-size-sm); }
.md-bvk__check .form-check-input { width: 16px; height: 16px; }

/* Step 7: the hours choice sits above the two number fields */
.md-bvk__field-label { color: var(--md-color-text-heading); }
.md-bvk__field .md-bvk__options { margin-top: var(--md-space-2); }

/* ---------------- Page hero (intro and result) ---------------- */
/* The site's carousel-page-top, with the stripe animation off and a smaller title. */
.md-bvk-hero .carousel-item::before { animation: none; }
.md-bvk-hero__trust { list-style: none; margin: var(--md-space-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--md-space-2) var(--md-space-6); }
.md-bvk-hero__trust li { margin: 0; font-size: var(--md-font-size-meta); font-weight: var(--md-font-weight-semibold); color: var(--md-color-text-heading); }
.md-bvk-hero__trust i { color: var(--md-color-text-eyebrow); margin-right: var(--md-space-2); }

/* Result hero: the homepage swirls (md-animations.css positions them for #carouselHomepageHeader only).
   Same player and rotation, scoped to this hero. The homepage offsets leave both swirls outside this
   shorter hero, so here one peeks in at the top left and one sweeps up behind the gauge.
   Like the homepage, the item drops isolation so the caption (z 3) sits above the swirls (z 2). */
.md-bvk-hero--swirls { position: relative; }
.md-bvk-hero--swirls .carousel-item { isolation: auto; }
.md-bvk-hero--swirls .md-swirls-animated { inset: 0; pointer-events: none; }
.md-bvk-hero--swirls .md-swirls-animated dotlottie-player:first-of-type { top: -560px; position: relative; left: -940px; transform: rotate(53deg); min-width: 1500px; }
.md-bvk-hero--swirls .md-swirls-animated dotlottie-player:last-of-type { bottom: -440px; position: absolute; right: -780px; transform: rotate(53deg); min-width: 1500px; }

/* Result hero: the scale and the basis line on the dark surface */

/* Questions start below the fixed navbar */
.md-bvk-section.md-bvk-section--first { padding-top: calc(var(--md-bvk-nav-h, 96px) + var(--md-space-12)); }

/* How it works */

/* Gate dialog: tips opt-in centred on its checkbox, in the tool's blue; no empty status line at the bottom */
.md-bvk__check.form-check { display: flex; align-items: center; gap: var(--md-space-2); padding-left: 0; min-height: 0; }
.md-bvk__check .form-check-input { float: none; flex-shrink: 0; margin: 0; }
.md-bvk__check .form-check-input:checked { background-color: var(--md-bvk-accent); border-color: var(--md-bvk-accent); }
.md-bvk__check .form-check-input:focus { border-color: var(--md-bvk-accent); box-shadow: 0 0 0 3px rgba(var(--md-color-primary-rgb), .3); }
.md-bvk__check label { line-height: var(--md-line-height-body); margin: 0; }
.md-bvk__gate-status:empty { display: none; }
.md-bvk__field-error { margin: var(--md-space-2) 0 0; font-size: var(--md-font-size-meta); font-weight: var(--md-font-weight-semibold); color: var(--md-color-error); }
.md-bvk__field-error:empty { display: none; }

/* Confirmation after the unlock: bottom centre, slides up, closes itself. */
.md-bvk-toast { position: fixed; left: 50%; bottom: var(--md-space-6); z-index: var(--md-z-modal); display: flex; align-items: flex-start; gap: var(--md-space-3); width: min(440px, calc(100% - 32px)); padding: var(--md-space-4) var(--md-space-5); background: var(--md-color-white); border-radius: var(--md-radius-lg); box-shadow: var(--md-shadow-lg); transform: translate(-50%, 24px); opacity: 0; transition: transform .3s ease, opacity .3s ease; }
.md-bvk-toast.is-shown { transform: translate(-50%, 0); opacity: 1; }
.md-bvk-toast__icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--md-color-success-bg); color: var(--md-color-success); font-weight: var(--md-font-weight-bold); }
.md-bvk-toast strong { display: block; color: var(--md-color-text-heading); }
.md-bvk-toast p { margin: var(--md-space-1) 0 0; font-size: var(--md-font-size-meta); color: var(--md-color-text-fade); overflow-wrap: anywhere; }
.md-bvk-toast__close { flex: none; margin-left: auto; border: 0; background: none; padding: 0 var(--md-space-1); font-size: 22px; line-height: 1; color: var(--md-color-text-fade); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .md-bvk-toast { transition: none; } }


/* Band with the cards: same pattern as the site big_numbers block (md-sections.css), .md-section--blue re-binds --md-color-bg. */
.md-bvk-band { background: var(--md-color-bg); }
/* Heading to cards: the plain h2 margin, the same gap as in the text_and_image blocks. The grid gap spaces the cards, so no card margin. */
.md-bvk-band .md-card { margin-bottom: 0; }
/* Band with the cards: the card's 20px bottom margin is reset by md-section-stack. */
.md-bvk-band .md-bvk__note { margin: var(--md-space-6) 0 0; }

/* ---------------- Loader between the last question and the advice ---------------- */
.md-bvk-loader { text-align: center; min-height: calc(100vh - var(--md-bvk-top, 0px)); display: flex; align-items: center; }
.md-bvk-loader .container { display: flex; flex-direction: column; align-items: center; }
.md-bvk-loader__smiley.md-sticker-smiley-sm { max-width: 128px; margin-top: 0; margin-bottom: var(--md-space-6); }
.md-bvk-loader h2 { margin-bottom: var(--md-space-6); }
.md-bvk-loader__steps { list-style: none; margin: 0; padding: 0; text-align: left; }
.md-bvk-loader__steps li { position: relative; padding-left: var(--md-space-8); margin-bottom: var(--md-space-3); color: var(--md-color-text-fade); transition: color .3s ease; }
.md-bvk-loader__steps li::before { content: ''; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--md-color-border); }
.md-bvk-loader__steps li.is-active { color: var(--md-color-text-heading); }
.md-bvk-loader__steps li.is-active::before { border-color: var(--md-bvk-accent); border-right-color: transparent; animation: md-bvk-spin .8s linear infinite; }
.md-bvk-loader__steps li.is-done { color: var(--md-color-text-body); }
.md-bvk-loader__steps li.is-done::before { border-color: var(--md-bvk-accent); background: var(--md-bvk-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center / 10px no-repeat; }
@keyframes md-bvk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .md-bvk-loader__smiley, .md-bvk-loader__steps li.is-active::before { animation: none; } }

/* ---------------- Result hero: text left, gauge right ---------------- */
.md-bvk-hero__split { flex-wrap: wrap; gap: var(--md-space-10); }
.md-bvk-hero__split .carousel-caption { flex: 1 1 480px; }
.md-bvk-gauge { position: relative; z-index: var(--md-z-caption); flex: 0 1 340px; margin-left: auto; }
.md-bvk-gauge__svg { display: block; width: 100%; height: auto; overflow: visible; }
.md-bvk-gauge { --md-bvk-step: .45s; }
.md-bvk-gauge__arc, .md-bvk-gauge__fill { fill: none; stroke-width: 22; stroke-linecap: butt; }
.md-bvk-gauge__arc { stroke: rgba(255, 255, 255, .18); }
/* Three shades, muted to bright: each step reads as one level further towards maatwerk. */
.md-bvk-gauge__fill--1 { stroke: rgba(var(--md-color-primary-rgb), .55); }
.md-bvk-gauge__fill--2 { stroke: var(--md-color-primary); }
.md-bvk-gauge__fill--3 { stroke: var(--md-color-primary-hover); }
/* The steps fill one after the other; the needle travels along with them. */
/* --to: how far the outcome's own step fills (where the needle points); earlier steps fill fully. */
.md-bvk-gauge__fill { stroke-dasharray: var(--to, 1) 2; stroke-dashoffset: 0; animation: md-bvk-fill calc(var(--to, 1) * var(--md-bvk-step)) linear calc(.2s + var(--i) * var(--md-bvk-step)) both; }
@keyframes md-bvk-fill { from { stroke-dashoffset: var(--to, 1); } }
.md-bvk-gauge__needle { fill: var(--md-color-white); transform-origin: 150px 150px; transform: rotate(var(--md-bvk-needle)); animation: md-bvk-needle calc(var(--steps) * var(--md-bvk-step)) cubic-bezier(.4, 0, .4, 1.15) .2s both; }
/* Final position is the default; the animation only swings it in from the left. */
@keyframes md-bvk-needle { from { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { .md-bvk-gauge__needle, .md-bvk-gauge__fill { animation: none; } }
.md-bvk-gauge__labels { display: flex; justify-content: space-between; margin-top: var(--md-space-3); }
.md-bvk-gauge__label { font-size: var(--md-font-size-meta); color: var(--md-color-text-on-dark-fade); }
.md-bvk-gauge__label.is-active { color: var(--md-color-white); font-weight: var(--md-font-weight-bold); }
@media (max-width: 991.98px) { .md-bvk-gauge { margin-left: 0; flex-basis: 300px; } }

/* "Zo helpt Modus" sits on the light grey surface so the two text_and_image sections read as separate blocks. */
.md-bvk-modus { background: var(--md-color-bg-secondary); }
.md-bvk-modus .md-bvk__action { margin-top: 0; }

/* "Op basis van" sits faded at the bottom of the cards block. */
.md-bvk-band .md-bvk__basis { margin: var(--md-space-8) 0 0; max-width: 670px; color: var(--md-color-text-fade); }
.md-bvk-band .md-bvk__basis strong { color: inherit; }


/* ---------------------------------------------------------------
   Landing page shell: the page around the tool has no site component
   of its own (no menu, a one-line footer), so it lives here.
   --------------------------------------------------------------- */
body.page-bouw-of-koop { display: flex; flex-direction: column; min-height: 100vh; }
body.page-bouw-of-koop > #md-bvk { flex: 1 0 auto; }

.md-lp-footer { padding: var(--md-space-10) 0; background: var(--md-color-bg); font-size: var(--md-font-size-sm); color: var(--md-color-text-subtle); }
.md-lp-footer .container { display: flex; flex-wrap: wrap; align-items: center; gap: var(--md-space-4) var(--md-space-10); }
.md-lp-footer a { color: inherit; }
.md-lp-footer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--md-space-2) var(--md-space-8); }
.md-lp-footer__contact li { margin: 0; font-size: var(--md-font-size-sm); }
.md-lp-footer__contact i { color: var(--md-color-primary); margin-right: var(--md-space-2); }
.md-lp-footer__contact a { text-decoration: none; }
.md-lp-footer__legal { display: flex; gap: var(--md-space-6); margin-left: auto; }
@media (max-width: 767.98px) { .md-lp-footer .container { flex-direction: column; align-items: flex-start; } .md-lp-footer__contact { flex-direction: column; } .md-lp-footer__legal { margin-left: 0; } }

/* The e-mail form waits here until the gate opens; bvk.js moves it in and back. */
#bvk-form-holder[hidden], #bvk-turnstile[hidden] { display: none; }
/* On the website the gate IS the ExpressionEngine form, so its visible fields sit in a wrapper
   next to the hidden fields. The selectors that need it carry .md-bvk__gate-fields too. */
.md-bvk__turnstile { margin: var(--md-space-4) 0 0; }

/* Results: a price link under the investment figure, and a second button in the final CTA. */
.md-bvk__cta-actions { display: flex; flex-wrap: wrap; gap: var(--md-space-3); }
/* The secondary button matches the pink one: pill shape, same height. */
.md-bvk__cta-actions .btn-outline-dark { border-radius: var(--md-radius-pill); border-width: 1px; }
@media (max-width: 767.98px) { .md-bvk__cta-actions { flex-direction: column; } }
.md-bvk__quote-link { display: inline-block; margin-top: var(--md-space-4); font-weight: var(--md-font-weight-semibold); color: var(--md-color-primary); text-decoration: none; }
.md-bvk__quote-link:hover { text-decoration: underline; }
.md-bvk__quote-link i { font-size: .75em; margin-left: var(--md-space-1); }