/* =========================================================
   De VisZaeck — section and widget styles.

   Every selector below targets markup this theme renders itself
   (dvz- prefixed) or a WooCommerce class. Nothing targets
   Elementor's generated markup, and nothing uses !important:
   this file is enqueued after Elementor's frontend CSS, so it
   wins on load order.

   Tokens come from style.css, which maps them onto the Elementor
   global colours, so a palette change in Site Settings flows
   through here automatically.
   ========================================================= */

/* ---------------------------------------------------- shell */
.dvz-sec__inner {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 24px;
}

.dvz-sec__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

/* Wide enough that a two-word section title stays on one line, with the
   right-hand link pulled onto the same baseline as the mockup shows. */
.dvz-sec__headtext { max-width: 62ch; flex: 1 1 auto; }

.dvz-eyebrow {
    margin: 0 0 10px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    /* Was --dvz-lucht, lichtblauw. Op wit haalt dat ongeveer 2:1 aan contrast
       en dat is voor een regel van 13 pixels in kapitalen te weinig om
       prettig te lezen. Diepblauw houdt het een merkkleur en is wel leesbaar. */
    color: var(--dvz-diepblauw);
}

.dvz-sec__title {
    margin: 0;
    font-family: Lora, Georgia, serif;
    font-size: clamp(28px, 3.1vw, 40px);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.5px;
    color: var(--dvz-marine);
    text-wrap: balance;
}

/* --------------------------------------------------- buttons */
.dvz-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border-radius: 999px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.22s ease, color 0.22s ease,
                border-color 0.22s ease, transform 0.22s ease,
                box-shadow 0.22s ease;
}

.dvz-btn--sm { padding: 12px 22px; font-size: 15px; }

.dvz-btn--solid {
    background: var(--dvz-diepblauw);
    color: #fff;
    border: 1px solid var(--dvz-diepblauw);
}

.dvz-btn--solid:hover {
    background: var(--dvz-marine);
    border-color: var(--dvz-marine);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(11, 36, 85, 0.18);
}

.dvz-btn--ghost {
    background: #fff;
    color: var(--dvz-marine);
    border: 1px solid var(--dvz-lijn);
}

.dvz-btn--ghost:hover {
    background: var(--dvz-diepblauw);
    border-color: var(--dvz-diepblauw);
    color: #fff;
    transform: translateY(-1px);
}

.dvz-btn__arrow {
    width: 15px;
    height: 9px;
    flex: none;
    background: currentColor;
    /* Arrow drawn as a mask so it always matches the text colour. */
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'><path d='M0 6h16.2L12 1.6 13.4 0 20 6l-6.6 6L12 10.4 16.2 6z' fill='%23000'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'><path d='M0 6h16.2L12 1.6 13.4 0 20 6l-6.6 6L12 10.4 16.2 6z' fill='%23000'/></svg>") no-repeat center / contain;
    transition: transform 0.22s ease;
}

.dvz-btn:hover .dvz-btn__arrow { transform: translateX(3px); }

.dvz-round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--dvz-lijn);
    background: #fff;
    color: var(--dvz-marine);
    transition: background-color 0.22s ease, color 0.22s ease,
                border-color 0.22s ease, transform 0.22s ease;
}

.dvz-round:hover {
    background: var(--dvz-diepblauw);
    border-color: var(--dvz-diepblauw);
    color: #fff;
    transform: translateY(-1px);
}

/* ----------------------------------------------------- chips */
/* ---------------------------------------------------------------
   Pagina niet gevonden (404.php in het thema).
   --------------------------------------------------------------- */
/* Hello beperkt .site-main tot 1140px; het vlak moet van rand tot rand, dus
   de kleur staat op de body en het blok zelf blijft doorzichtig. */
body.error404 { background: var(--dvz-ijs); }

.dvz-404 {
    padding: 96px 0 110px;
    background: transparent;
}

.dvz-404__inner { max-width: 760px; text-align: center; }

.dvz-404 .dvz-eyebrow { color: var(--dvz-azuur); }

.dvz-404__title {
    margin: 12px 0 0;
    font-family: Lora, Georgia, serif;
    font-size: clamp(38px, 6vw, 64px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -1.2px;
    color: var(--dvz-marine);
    text-wrap: balance;
}

.dvz-404__title em { display: block; font-style: normal; color: var(--dvz-azuur); }

.dvz-404__lead {
    margin: 22px auto 0;
    max-width: 52ch;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: var(--dvz-tekst);
}

.dvz-404__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 560px;
    margin: 34px auto 0;
    padding: 6px 6px 6px 18px;
    border: 1px solid var(--dvz-lijn);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(11, 36, 85, 0.08);
}

.dvz-404__searchicon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background: var(--dvz-azuur);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.dvz-404__search .dvz-404__input,
.dvz-404__search input.dvz-404__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 0;
    border: 0;
    background: transparent;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 16px;
    color: var(--dvz-marine);
    box-shadow: none;
    outline: none;
}

.dvz-404__search .dvz-404__input::-webkit-search-cancel-button { display: none; }

.dvz-404__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 26px;
}

/* De basisknop heeft geen eigen vulling; die komt elders van de context. */
.dvz-404__actions .dvz-btn { padding: 15px 28px; font-size: 16px; }
.dvz-404 a.dvz-btn { text-decoration: none; }

.dvz-404 .dvz-btn--ghost {
    border-color: var(--dvz-lijn);
    background: #fff;
    color: var(--dvz-diepblauw);
}

.dvz-404__or {
    margin: 44px 0 14px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dvz-tekst);
}

.dvz-chips--404 { justify-content: center; }

@media (max-width: 700px) {
    .dvz-404 { padding: 60px 0 70px; }
    .dvz-404__search .dvz-btn { padding-inline: 16px; }
}

/* ---------------------------------------------------------------
   Subpagina's: tegels, stappen, veelgestelde vragen, formulier.
   De opbouw zelf is native Elementor (containers dragen deze
   klassen via hun CSS-klasse-veld); hier staat alleen wat Elementor
   niet als instelling heeft: de zweefbeweging van een tegel, de
   lijnen tussen de stappen en de maat van de accordeon.
   --------------------------------------------------------------- */
.dvz-tile {
    transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease;
}

.dvz-tile:hover {
    transform: translateY(-4px);
    border-color: #cfe0f2;
    box-shadow: 0 16px 34px rgba(11, 36, 85, 0.1);
}

.dvz-tile .elementor-widget-image img { width: 100%; height: 200px; object-fit: cover; }

/* Stappen: elke kolom een lijn erboven, die de sectie al tekent;
   op een telefoon krijgt elke stap zijn eigen lijn. */
.dvz-steps > .e-con { padding-top: 28px; }

@media (max-width: 767px) {
    .dvz-steps > .e-con + .e-con { border-top: 1px solid var(--dvz-lijn); }
}

/* Accordeon: een kaart per vraag, zoals de referentie. */
.dvz-faq .elementor-accordion .elementor-accordion-item {
    margin-bottom: 10px;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.dvz-faq .elementor-accordion .elementor-accordion-item + .elementor-accordion-item { border-top-width: 1px; }
.dvz-faq .elementor-tab-title { transition: background-color 0.2s ease; }
.dvz-faq .elementor-tab-title:hover { background: var(--dvz-ijs); }
.dvz-faq .elementor-tab-title .elementor-accordion-icon { font-size: 12px; }

/* Formulier: velden in de huisstijl, ook waar het thema input[type] zet. */
.dvz-form .elementor-field-group .elementor-field-textual { border-radius: 12px; padding: 12px 16px; }
.dvz-form .elementor-field-group .elementor-field-textual:focus {
    border-color: var(--dvz-azuur);
    box-shadow: 0 0 0 3px rgba(74, 155, 245, 0.16);
    outline: none;
}

.dvz-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dvz-chips__item { display: flex; }

.dvz-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid var(--dvz-lijn);
    background: #fff;
    color: var(--dvz-marine);
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.22s ease, color 0.22s ease,
                border-color 0.22s ease, transform 0.22s ease,
                box-shadow 0.22s ease;
}

.dvz-chip:hover {
    border-color: var(--dvz-azuur);
    color: var(--dvz-diepblauw);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(11, 36, 85, 0.08);
}

.dvz-chip__icon {
    display: inline-flex;
    font-size: 15px;
    color: var(--dvz-azuur);
    transition: color 0.22s ease;
}

.dvz-chip__icon svg { width: 1em; height: 1em; fill: currentColor; }
.dvz-chip:hover .dvz-chip__icon { color: var(--dvz-diepblauw); }

/* ----------------------------------------------------- cards */
.dvz-grid {
    display: grid;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dvz-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dvz-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dvz-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }

.dvz-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--dvz-lijn);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.26s ease, box-shadow 0.26s ease,
                border-color 0.26s ease;
}

.dvz-card:hover {
    transform: translateY(-5px);
    border-color: #cfe0f2;
    box-shadow: 0 16px 34px rgba(11, 36, 85, 0.10);
}

.dvz-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--dvz-ijs);
}

.dvz-card__media .dvz-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.dvz-card:hover .dvz-card__img { transform: scale(1.04); }

.dvz-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 11px;
    border-radius: 999px;
    background: #fff;
    color: var(--dvz-marine);
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(11, 36, 85, 0.10);
}

.dvz-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 24px 26px;
}

.dvz-grid--compact .dvz-card__body { padding: 20px 20px 22px; gap: 16px; }

.dvz-card__title {
    margin: 0 0 9px;
    font-family: Lora, Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.2px;
    color: var(--dvz-marine);
}

.dvz-grid--compact .dvz-card__title { font-size: 19px; margin-bottom: 7px; }

.dvz-card__link { color: inherit; text-decoration: none; }
.dvz-card__link:hover { color: var(--dvz-diepblauw); }

.dvz-card__desc {
    margin: 0;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 15.5px;
    line-height: 1.62;
    color: var(--dvz-tekst);
}

.dvz-grid--compact .dvz-card__desc { font-size: 14px; }

.dvz-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.dvz-card__price { margin: 0; display: flex; flex-direction: column; gap: 2px; }

.dvz-card__pricelabel {
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 14px;
    color: var(--dvz-tekst);
}

.dvz-card__amount {
    font-family: Lora, Georgia, serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.05;
    color: var(--dvz-marine);
    font-variant-numeric: tabular-nums;
}

.dvz-grid--compact .dvz-card__price { flex-direction: row; align-items: baseline; gap: 8px; }
.dvz-grid--compact .dvz-card__amount { font-size: 21px; }

/* ------------------------------------------------------ usps */
.dvz-usps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 34px 12px;
    list-style: none;
    background: var(--dvz-ijs);
    border-radius: 16px;
}

.dvz-usp {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 4px 26px;
    border-left: 1px solid #dbe7f4;
}

.dvz-usp:first-child { border-left: 0; }

.dvz-usp__icon {
    display: inline-flex;
    flex: none;
    margin-top: 2px;
    font-size: 24px;
    color: var(--dvz-azuur);
}

.dvz-usp__icon svg { width: 1em; height: 1em; fill: currentColor; }

.dvz-usp__title {
    margin: 0 0 4px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--dvz-marine);
}

.dvz-usp__desc {
    margin: 0;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--dvz-tekst);
}

/* ----------------------------------------------- breakpoints */
@media (max-width: 1024px) {
    .dvz-grid--3,
    .dvz-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .dvz-usps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
    .dvz-usp:nth-child(3) { border-left: 0; }
}

@media (max-width: 700px) {
    .dvz-sec__inner { padding-inline: 20px; }
    .dvz-sec__head { margin-bottom: 28px; }

    .dvz-grid--2,
    .dvz-grid--3,
    .dvz-grid--4 { grid-template-columns: minmax(0, 1fr); }

    .dvz-usps { grid-template-columns: minmax(0, 1fr); padding: 26px 8px; }
    .dvz-usp { border-left: 0; padding: 4px 18px; }

    .dvz-chips {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 4px;
        /* Let the row bleed to the screen edges so it reads as scrollable. */
        margin-inline: -20px;
        padding-inline: 20px;
    }

    .dvz-chips::-webkit-scrollbar { display: none; }
    .dvz-chips__item { flex: none; }

    /* Vervaging aan de kant waar nog chips staan; chips.js houdt de klassen bij. */
    .dvz-chips.is-scrollable:not(.at-end) {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
                mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
    }

    .dvz-chips.is-scrollable:not(.at-start):not(.at-end) {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 56px), transparent);
                mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 56px), transparent);
    }

    .dvz-chips.is-scrollable.at-end:not(.at-start) {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 40px);
                mask-image: linear-gradient(to right, transparent, #000 40px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dvz-btn,
    .dvz-chip,
    .dvz-card,
    .dvz-card__img,
    .dvz-round,
    .dvz-btn__arrow { transition: none; }

    .dvz-card:hover { transform: none; }
    .dvz-card:hover .dvz-card__img { transform: none; }
}

/* ---------------------------------------------------- footer */
.dvz-footer {
    background: var(--dvz-ijs);
    border-top: 1px solid var(--dvz-lijn);
    padding: 66px 0 26px;
}

.dvz-footer__top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 44px;
    border-bottom: 1px solid #dbe7f4;
}

.dvz-footer__logo { width: 232px; height: auto; display: block; margin-bottom: 20px; }

.dvz-footer__tagline {
    margin: 0 0 20px;
    max-width: 34ch;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.62;
    color: var(--dvz-tekst);
}

.dvz-footer__contact,
.dvz-footer__links,
.dvz-footer__legal { margin: 0; padding: 0; list-style: none; }

.dvz-footer__contact { display: flex; flex-direction: column; gap: 10px; }

.dvz-footer__contactitem {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 15px;
    color: var(--dvz-marine);
}

.dvz-footer__contactitem a { color: inherit; text-decoration: none; }
.dvz-footer__contactitem a:hover { color: var(--dvz-diepblauw); text-decoration: underline; }

.dvz-footer__icon { display: inline-flex; margin-top: 3px; font-size: 14px; color: var(--dvz-azuur); }
.dvz-footer__icon svg { width: 1em; height: 1em; fill: currentColor; }

.dvz-footer__coltitle {
    margin: 0 0 16px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    /* Zelfde reden als bij het bovenkopje: lichtblauw op ijsblauw is geen kopje
       maar een vlek. */
    color: var(--dvz-tekst);
}

.dvz-footer__links { display: flex; flex-direction: column; gap: 11px; }

.dvz-footer__links a {
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 15px;
    color: var(--dvz-marine);
    text-decoration: none;
    transition: color 0.2s ease;
}

.dvz-footer__links a:hover { color: var(--dvz-diepblauw); }

.dvz-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 24px;
}

.dvz-footer__copy,
.dvz-footer__legal a {
    margin: 0;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 14.5px;
    color: var(--dvz-tekst);
}

.dvz-footer__legal { display: flex; gap: 20px; flex-wrap: wrap; }
.dvz-footer__legal a { text-decoration: none; transition: color 0.2s ease; }
.dvz-footer__legal a:hover { color: var(--dvz-diepblauw); }

@media (max-width: 1024px) {
    .dvz-footer__top { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 700px) {
    .dvz-footer { padding-top: 46px; }
    .dvz-footer__top { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .dvz-footer__bottom { justify-content: flex-start; }
}

/* ----------------------------------------------------- bands */
.dvz-band {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: 540px;
}

.dvz-band--media-right .dvz-band__media { order: 2; }

.dvz-band__media { position: relative; overflow: hidden; background: var(--dvz-ijs); }

/* Sized from the inset offsets rather than height:100%. The media panel is a
   grid item whose height property stays `auto`, so a percentage height would
   resolve to zero even though the panel is visually stretched. */
/* Two classes, not one, on purpose. Elementor ships `.elementor img { height:
   auto }` at specificity (0,1,1), which outranks a single class no matter how
   late this file loads. Scoping to the parent gives (0,2,0) and wins on
   specificity using only our own classes, so no !important is needed.
   The img is also a replaced element, so width and height must be explicit or
   it takes its intrinsic size and ignores the inset offsets. */
.dvz-band__media .dvz-band__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s ease;
}

.dvz-band:hover .dvz-band__img { transform: scale(1.03); }

.dvz-band__body {
    display: flex;
    align-items: center;
    padding: 72px 64px;
}

.dvz-band--ice   .dvz-band__body { background: var(--dvz-ijs); }
.dvz-band--white .dvz-band__body { background: #fff; }
.dvz-band--navy  .dvz-band__body { background: var(--dvz-diepblauw); }

.dvz-band__inner { max-width: 46ch; }

.dvz-band__title {
    margin: 0 0 18px;
    font-family: Lora, Georgia, serif;
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.6px;
    color: var(--dvz-marine);
    text-wrap: balance;
}

.dvz-band__accent { display: block; color: var(--dvz-azuur); }

.dvz-band__text { color: var(--dvz-tekst); }

.dvz-band__text p {
    margin: 0 0 14px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 16.5px;
    line-height: 1.68;
}

.dvz-band__text p:last-child { margin-bottom: 0; }

.dvz-band__list {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dvz-band__list li {
    position: relative;
    padding-left: 26px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 16px;
    color: var(--dvz-marine);
}

.dvz-band__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.52em;
    width: 12px;
    height: 8px;
    background: var(--dvz-azuur);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'><path d='M6 8.6 1.4 4 0 5.4l6 6 10-10L14.6 0z' fill='%23000'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'><path d='M6 8.6 1.4 4 0 5.4l6 6 10-10L14.6 0z' fill='%23000'/></svg>") no-repeat center / contain;
}

.dvz-band__cta { margin-top: 30px; }

.dvz-band--navy .dvz-band__title,
.dvz-band--navy .dvz-band__list li { color: #fff; }

.dvz-band--navy .dvz-band__text p { color: rgba(255, 255, 255, 0.82); }
.dvz-band--navy .dvz-eyebrow { color: var(--dvz-sky, #9CD7FF); }

/* -------------------------------------------------- cta band */
.dvz-cta {
    background: var(--dvz-diepblauw);
    padding: 104px 24px;
    text-align: center;
}

.dvz-cta__inner { max-width: 720px; margin-inline: auto; }

.dvz-cta__eyebrow {
    margin: 0 0 16px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

.dvz-cta__title {
    margin: 0 0 20px;
    font-family: Lora, Georgia, serif;
    font-size: clamp(36px, 5.4vw, 68px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -1.2px;
    color: #fff;
    text-wrap: balance;
}

.dvz-cta__line { display: block; }
.dvz-cta__line--accent { color: var(--dvz-azuur); }

.dvz-cta__text {
    margin: 0 auto 34px;
    max-width: 48ch;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.62;
    color: rgba(255, 255, 255, 0.8);
}

.dvz-cta__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.dvz-btn--onnavy {
    padding: 16px 32px;
    font-size: 16px;
    background: #fff;
    color: var(--dvz-diepblauw);
    border: 1px solid #fff;
}

.dvz-btn--onnavy:hover {
    background: var(--dvz-azuur);
    border-color: var(--dvz-azuur);
    color: #fff;
    transform: translateY(-1px);
}

.dvz-btn--onnavy-ghost {
    padding: 16px 32px;
    font-size: 16px;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.42);
}

.dvz-btn--onnavy-ghost:hover {
    background: #fff;
    border-color: #fff;
    color: var(--dvz-diepblauw);
    transform: translateY(-1px);
}

.dvz-cta__note {
    margin: 0;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 14.5px;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 900px) {
    .dvz-band { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .dvz-band__media { order: 2; min-height: 320px; }
    .dvz-band--media-right .dvz-band__media { order: 2; }
    .dvz-band__body { order: 1; padding: 52px 24px; }
    .dvz-band__inner { max-width: none; }
    .dvz-cta { padding: 72px 24px; }
}

@media (max-width: 560px) {
    .dvz-cta__actions { flex-direction: column; align-items: stretch; }
    .dvz-btn--onnavy,
    .dvz-btn--onnavy-ghost { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .dvz-band__img { transition: none; }
    .dvz-band:hover .dvz-band__img { transform: none; }
    .dvz-btn--onnavy,
    .dvz-btn--onnavy-ghost { transition: none; }
}

/* ---------------------------------------------------- USP-strook
   De vier items stonden in Elementor elk op 25% breed in een rij met
   tussenruimte. Vier keer 25% plus drie tussenruimtes is meer dan honderd
   procent, dus viel de laatste eronder en bleef er een gat naast staan.
   Een raster van vier verdeelt de ruimte inclusief de tussenruimte, en dat
   kan geen optelfout meer maken.

   Elk item is zelf weer een rij: een icoon en daarnaast een kolom met kop en
   tekst. Die kolom moet de rest van de breedte pakken, anders krimpt hij tot
   een woord per regel. */
.dvz-usps-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}

.dvz-usps-row > .e-con {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 14px;
    width: auto;
    max-width: none;
    padding: 4px 26px;
    border-left: 1px solid #dbe7f4;
}

.dvz-usps-row > .e-con:first-child { border-left: 0; }

/* het icoon links, vaste maat */
.dvz-usps-row > .e-con > .elementor-widget-icon { flex: 0 0 auto; width: auto; }

/* de tekstkolom ernaast, de rest van de ruimte */
.dvz-usps-row > .e-con > .e-con {
    /* Kop boven de tekst, niet ernaast. De rij eromheen staat op row en dat
       werkte door, waardoor de kop naast zijn eigen omschrijving belandde. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
    gap: 2px;
    padding: 0;
    border-left: 0;
}

.dvz-usps-row .elementor-widget-heading { margin-bottom: 2px; }

@media (max-width: 900px) {
    .dvz-usps-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
    .dvz-usps-row > .e-con:nth-child(odd) { border-left: 0; }
}

@media (max-width: 520px) {
    .dvz-usps-row { grid-template-columns: 1fr; }
    .dvz-usps-row > .e-con { border-left: 0; padding-left: 0; padding-right: 0; }
}

/* ------------------------------------------------- social in de voettekst
   De pictogrammen verschijnen alleen als er in Instellingen -> De VisZaeck
   een adres is ingevuld. Zonder adres staat er dus niets, in plaats van een
   knop die nergens heen gaat. */
.dvz-footer__social {
    display: flex;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.dvz-footer__socialicon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--dvz-lijn);
    border-radius: 50%;
    background: #fff;
    color: var(--dvz-diepblauw);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.dvz-footer__socialicon::before {
    content: "";
    width: 19px;
    height: 19px;
    background: currentColor;
}

.dvz-footer__socialicon--instagram::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M17.5 6.5h.01'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M17.5 6.5h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

.dvz-footer__socialicon--facebook::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M14 9h3V6h-3a4 4 0 0 0-4 4v2H8v3h2v7h3v-7h3l1-3h-4v-2a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M14 9h3V6h-3a4 4 0 0 0-4 4v2H8v3h2v7h3v-7h3l1-3h-4v-2a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.dvz-footer__socialicon--tiktok::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12.53.02C13.84 0 15.14.01 16.44 0c.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12.53.02C13.84 0 15.14.01 16.44 0c.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.dvz-footer__socialicon:hover,
.dvz-footer__socialicon:focus-visible {
    background: var(--dvz-diepblauw);
    border-color: var(--dvz-diepblauw);
    color: #fff;
}

/* KvK en btw onderaan: wettelijk verplicht, dus geen los weetje maar
   onderdeel van de onderbalk. */
.dvz-footer__legalnums {
    margin: 0;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 14px;
    color: var(--dvz-tekst);
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .dvz-footer__socialicon { transition: none; }
}

/* ------------------------------------------------- usp-paneel (Elementor-versie)
   De tekstkolom naast het icoon groeit mee, maar mag nooit breder worden
   dan er ruimte is. Zonder min-width: 0 pakt hij op een telefoon zijn
   inhoudsbreedte en schuift de hele pagina 17 px opzij. */
.dvz-usps-panel { max-width: 100%; }
.dvz-usp > .dvz-usp__text.e-con { min-width: 0; flex: 1 1 0%; width: auto; }