/* /Components/Pages/HoeWerktHet.razor.rz.scp.css */
/* ==========================================================================
   Hoe werkt het? – styles for /hoe-werkt-het only.
   Measurements follow the Figma frame "02 — Hoe werkt het?" (1728px wide).
   ========================================================================== */

.hwh[b-ws14jiwfn2] {
    width: 100%;
    overflow-x: clip;
}

/* ---- Hero -------------------------------------------------------------- */
.hwh-hero[b-ws14jiwfn2] {
    position: relative;
    height: 930px;
    overflow: hidden;
    color: var(--creme);
}

.hwh-hero__image[b-ws14jiwfn2] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}

/* Figma bakes the darkening into the photo itself: ~42% darker at the top, ~52% at the bottom. */
.hwh-hero__overlay[b-ws14jiwfn2] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 50%, rgba(0, 0, 0, 0.52) 100%);
}

.hwh-hero__content[b-ws14jiwfn2] {
    position: relative;
    padding-top: 195px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
}

.hwh-hero__text[b-ws14jiwfn2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    white-space: nowrap;
}

.hwh-hero__lead[b-ws14jiwfn2] {
    width: 527px;
    max-width: calc(100% - 40px);
    color: var(--wit);
}

/* ---- Stappen ----------------------------------------------------------- */
.steps[b-ws14jiwfn2] {
    position: relative;
    height: 2667px;
    overflow: hidden;
    background: var(--creme);
}

.steps__line[b-ws14jiwfn2] {
    position: absolute;
    top: 87px;
    bottom: 0;
    left: calc(50% - 2px);
    width: 5px;
    background: var(--creme-2);
}

.steps__list[b-ws14jiwfn2] {
    position: relative;
    width: 1286px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 87px;
    display: flex;
    flex-direction: column;
    gap: 120px;
}

.step-row[b-ws14jiwfn2] {
    display: flex;
    align-items: center;
    gap: 74px;
}

.step-card[b-ws14jiwfn2] {
    width: 556px;
    flex-shrink: 0;
    padding: 50px;
    border-radius: 20px;
    background: var(--creme-2);
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.step-card__title[b-ws14jiwfn2] {
    width: 456px;
    font-size: 42px;
    line-height: 52px;
}

.step-card__text[b-ws14jiwfn2] {
    color: #666;
}

.step-row__dot[b-ws14jiwfn2] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--creme-2);
    border: 2px solid var(--wit);
}

.step-row__image[b-ws14jiwfn2] {
    flex-shrink: 0;
    width: 556px;
    height: 394px;
}

/* ---- Zo maak je het ---------------------------------------------------- */
.how[b-ws14jiwfn2] {
    position: relative;
    height: 1751px;
    overflow: hidden;
    background: var(--nachtblauw);
    color: var(--creme);
}

.how__title[b-ws14jiwfn2] {
    position: absolute;
    top: 155px;
    left: 0;
    right: 0;
    font-size: 62px;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}

.how__visual[b-ws14jiwfn2] {
    position: absolute;
    top: 332px;
    left: 76px;
    width: 1594px;
    pointer-events: none;
}

.how__visual img[b-ws14jiwfn2] {
    width: 1594px;
    height: auto;
}

.how__grid[b-ws14jiwfn2] {
    position: absolute;
    top: 1280px;
    left: calc(50% - 472px);
    width: 1020px;
    height: 313px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 40px;
}

.feature__desc--nowrap[b-ws14jiwfn2] {
    white-space: nowrap;
}

/* ---- Kies uw uitvoering ------------------------------------------------ */
.editions[b-ws14jiwfn2] {
    position: relative;
    height: 1367px;
    overflow: hidden;
    background: var(--creme-2);
    padding-top: 121px;
}

.editions__head[b-ws14jiwfn2] {
    width: 630px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
    white-space: nowrap;
}

.editions__lead[b-ws14jiwfn2] {
    color: #666;
}

.editions__cards[b-ws14jiwfn2] {
    position: absolute;
    top: 315px;
    left: calc(50% - 710px);
    display: flex;
    gap: 20px;
}

.edition[b-ws14jiwfn2] {
    position: relative;
    width: 699px;
    height: 943px;
    border-radius: 40px;
    overflow: hidden;
    color: var(--nachtblauw);
}

.edition--soft[b-ws14jiwfn2] {
    background: #b7cdb7;
}

.edition--hard[b-ws14jiwfn2] {
    background: #dccdd2;
}

.edition__image[b-ws14jiwfn2] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 49.05%;
    object-fit: cover;
}

.edition__title[b-ws14jiwfn2] {
    position: absolute;
    top: 491px;
    font-size: 52px;
    line-height: 1.1;
    white-space: nowrap;
}

.edition__desc[b-ws14jiwfn2] {
    position: absolute;
    top: 574px;
    font-size: 20px;
    line-height: 24px;
    white-space: nowrap;
}

.edition__list[b-ws14jiwfn2] {
    position: absolute;
    top: 663px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    white-space: nowrap;
}

.edition__list li[b-ws14jiwfn2] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.edition__check[b-ws14jiwfn2] {
    flex-shrink: 0;
}

.edition__button[b-ws14jiwfn2] {
    position: absolute;
    top: 832px;
    left: 38px;
    width: 623px;
    height: 65px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    font-size: 17.67px;
    font-weight: 600;
    line-height: normal;
    white-space: nowrap;
    transition: background-color .2s ease;
}

.edition__button:hover[b-ws14jiwfn2] {
    background: rgba(255, 255, 255, 0.35);
}

.edition__button--disabled[b-ws14jiwfn2],
.edition__button--disabled:hover[b-ws14jiwfn2] {
    background: rgba(255, 255, 255, 0.3);
    color: rgba(34, 49, 59, 0.3);
    cursor: default;
}

.edition--soft .edition__title[b-ws14jiwfn2],
.edition--soft .edition__desc[b-ws14jiwfn2] {
    left: 50px;
}

.edition--soft .edition__list[b-ws14jiwfn2] {
    left: 58px;
}

.edition--hard .edition__title[b-ws14jiwfn2] {
    left: 65px;
}

.edition--hard .edition__desc[b-ws14jiwfn2] {
    left: 65px;
    width: 601px;
    line-height: 30px;
    white-space: normal;
}

.edition--hard .edition__list[b-ws14jiwfn2] {
    left: 73px;
}

/* ---- Veelgestelde vragen ---------------------------------------------- */
.faq[b-ws14jiwfn2] {
    min-height: 958px;
    background: var(--creme);
    padding-top: 89px;
    padding-bottom: 121px;
}

.faq__head[b-ws14jiwfn2] {
    width: 630px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
}

.faq__title[b-ws14jiwfn2] {
    height: 179px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.faq__list[b-ws14jiwfn2] {
    width: 774px;
    max-width: calc(100% - 40px);
    margin: 54px auto 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq__more[b-ws14jiwfn2] {
    margin: 66px 0 0 calc(50% - 382px);
}

/* ---- Klaar om te beginnen --------------------------------------------- */
.cta[b-ws14jiwfn2] {
    position: relative;
    height: 686px;
    overflow: hidden;
    color: var(--creme);
}

.cta__image[b-ws14jiwfn2] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta__overlay[b-ws14jiwfn2] {
    position: absolute;
    inset: 0;
    background: rgba(34, 49, 59, 0.8);
}

.cta__content[b-ws14jiwfn2] {
    position: relative;
    width: 601px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 229px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 53px;
    text-align: center;
}

.cta__text[b-ws14jiwfn2] {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.cta__title[b-ws14jiwfn2] {
    font-size: 62px;
    line-height: 1.1;
}

.cta__lead[b-ws14jiwfn2] {
    font-size: 20px;
    line-height: 30px;
}

.cta__lead a[b-ws14jiwfn2] {
    text-decoration: underline;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

/* ---- Responsive fallbacks --------------------------------------------- */
@media (max-width: 1500px) {
    .steps[b-ws14jiwfn2],
    .how[b-ws14jiwfn2],
    .editions[b-ws14jiwfn2],
    .faq[b-ws14jiwfn2] {
        height: auto;
        padding-bottom: 100px;
    }

    .steps__line[b-ws14jiwfn2] {
        display: none;
    }

    .steps__list[b-ws14jiwfn2] {
        width: min(1286px, calc(100% - 40px));
    }

    .step-row[b-ws14jiwfn2] {
        flex-wrap: wrap;
        justify-content: center;
        gap: 40px;
    }

    .step-row__dot[b-ws14jiwfn2] {
        display: none;
    }

    .step-card[b-ws14jiwfn2] {
        width: min(556px, 100%);
    }

    .step-card__title[b-ws14jiwfn2] {
        width: auto;
    }

    .step-row__image[b-ws14jiwfn2] {
        width: min(556px, 100%);
        height: auto;
    }

    .how__title[b-ws14jiwfn2] {
        position: relative;
        top: 0;
        padding-top: 120px;
        white-space: normal;
    }

    .how__visual[b-ws14jiwfn2] {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        margin-top: 60px;
    }

    .how__visual img[b-ws14jiwfn2] {
        width: 100%;
    }

    .how__grid[b-ws14jiwfn2] {
        position: relative;
        top: 0;
        left: 0;
        width: min(1020px, calc(100% - 40px));
        height: auto;
        margin: 40px auto 0;
    }

    .editions__cards[b-ws14jiwfn2] {
        position: relative;
        top: 0;
        left: 0;
        margin: 60px auto 0;
        width: min(1418px, calc(100% - 40px));
        flex-wrap: wrap;
        justify-content: center;
    }

    .faq__more[b-ws14jiwfn2] {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 900px) {
    .hwh-hero[b-ws14jiwfn2] {
        height: auto;
        min-height: 620px;
        padding-bottom: 80px;
    }

    .hwh-hero__content[b-ws14jiwfn2] {
        padding-top: 140px;
    }

    .hwh-hero__text[b-ws14jiwfn2],
    .how__title[b-ws14jiwfn2],
    .editions__head[b-ws14jiwfn2],
    .faq__title[b-ws14jiwfn2],
    .edition__title[b-ws14jiwfn2],
    .edition__desc[b-ws14jiwfn2],
    .edition__list[b-ws14jiwfn2] {
        white-space: normal;
    }

    .hwh-hero h1[b-ws14jiwfn2],
    .how__title[b-ws14jiwfn2],
    .editions__head h2[b-ws14jiwfn2],
    .faq__title[b-ws14jiwfn2],
    .cta__title[b-ws14jiwfn2] {
        font-size: 40px;
        line-height: 1.1;
    }

    .faq__title[b-ws14jiwfn2] {
        height: auto;
    }

    .step-card[b-ws14jiwfn2] {
        padding: 30px;
    }

    .step-card__title[b-ws14jiwfn2] {
        font-size: 32px;
        line-height: 40px;
    }

    .how__grid[b-ws14jiwfn2] {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .feature__desc--nowrap[b-ws14jiwfn2] {
        white-space: normal;
    }

    .edition[b-ws14jiwfn2] {
        width: 100%;
        height: auto;
        padding: 0 24px 24px;
    }

    .edition__image[b-ws14jiwfn2] {
        position: relative;
        height: auto;
        aspect-ratio: 3 / 2;
        margin: 0 -24px;
        width: calc(100% + 48px);
    }

    .edition__title[b-ws14jiwfn2],
    .edition__desc[b-ws14jiwfn2],
    .edition__list[b-ws14jiwfn2],
    .edition__button[b-ws14jiwfn2] {
        position: static;
        margin-top: 24px;
        width: auto;
    }

    .edition__title[b-ws14jiwfn2] {
        font-size: 40px;
    }

    .edition--hard .edition__desc[b-ws14jiwfn2] {
        width: auto;
    }

    .cta__content[b-ws14jiwfn2] {
        padding-top: 120px;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ==========================================================================
   Home page – styles for the root path only.
   Measurements follow the Figma frame "01 — Home" (1728px wide).
   ========================================================================== */

.home[b-ytyqv2b66j] {
    width: 100%;
    overflow-x: clip;
}

/* ---- Hero -------------------------------------------------------------- */
.hero[b-ytyqv2b66j] {
    position: relative;
    height: 1118px;
    overflow: hidden;
    color: var(--creme);
}

.hero__video[b-ytyqv2b66j] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__overlay[b-ytyqv2b66j] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
        linear-gradient(180.33deg, rgba(34, 49, 59, 0) 0.43%, rgba(34, 49, 59, 0) 53.23%, #22313b 92.72%);
}

.hero__content[b-ytyqv2b66j] {
    position: relative;
    width: 630px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 175px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
}

.hero__text[b-ytyqv2b66j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.hero__title[b-ytyqv2b66j] {
    white-space: nowrap;
}

.hero__actions[b-ytyqv2b66j] {
    display: flex;
    align-items: center;
    gap: 19px;
}

/* ---- Intro / stappen --------------------------------------------------- */
.intro[b-ytyqv2b66j] {
    height: 1160px;
    overflow: hidden;
    background: var(--nachtblauw);
    color: var(--creme);
}

.intro__container[b-ytyqv2b66j] {
    width: 1421px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 77px;
}

.intro__head[b-ytyqv2b66j] {
    display: flex;
    align-items: flex-start;
    height: 136px;
}

.intro__title[b-ytyqv2b66j] {
    width: 558px;
    flex-shrink: 0;
    font-size: 62px;
    line-height: 1.1;
}

.intro__lead[b-ytyqv2b66j] {
    width: 527px;
    margin-left: 173px;
    margin-top: 25px;
    color: var(--text);
}

.intro__steps[b-ytyqv2b66j] {
    display: flex;
    justify-content: center;
    margin-top: 134px;
}

.step[b-ytyqv2b66j] {
    width: 430.5px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.step__icon[b-ytyqv2b66j] {
    height: 153px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.step__icon--upload[b-ytyqv2b66j] {
    padding-top: 16px;
}

.step__icon--controle[b-ytyqv2b66j] {
    padding-top: 0;
}

.step__icon--locatie[b-ytyqv2b66j] {
    padding-top: 36px;
}

.step__title[b-ytyqv2b66j] {
    width: 248px;
    height: 70px;
    margin-top: 42px;
}

.step__desc[b-ytyqv2b66j] {
    margin-top: 30px;
    line-height: normal;
}

.step__desc--1[b-ytyqv2b66j] {
    width: 261px;
}

.step__desc--2[b-ytyqv2b66j] {
    width: 319px;
}

.step__desc--3[b-ytyqv2b66j] {
    width: 301px;
}

.intro__stats[b-ytyqv2b66j] {
    width: fit-content;
    margin: 186px auto 0;
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 30px 49px;
    border-radius: 10px;
    background: var(--nachtblauw-light);
}

.stat[b-ytyqv2b66j] {
    display: flex;
    align-items: center;
    gap: 20px;
    white-space: nowrap;
}

.stat__value[b-ytyqv2b66j] {
    color: var(--mintgroen);
}

.stat__label[b-ytyqv2b66j] {
    line-height: normal;
}

.stat__divider[b-ytyqv2b66j] {
    width: 1px;
    height: 41px;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

/* ---- Alles geregeld ---------------------------------------------------- */
.features[b-ytyqv2b66j] {
    position: relative;
    height: 1432px;
    overflow: hidden;
    background: var(--creme);
    padding-top: 770px;
}

.features__visual[b-ytyqv2b66j] {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 1585px;
    pointer-events: none;
}

.features__visual img[b-ytyqv2b66j] {
    width: 1585px;
    height: 999px;
}

.features__title[b-ytyqv2b66j] {
    position: relative;
    font-size: 62px;
    line-height: 1.1;
    text-align: center;
}

.features__grid[b-ytyqv2b66j] {
    position: relative;
    width: 1020px;
    height: 431px;
    margin: 70px 0 0 calc(50% - 472px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 40px;
}

/* ---- Aangeboden via uw uitvaartondernemer ------------------------------ */
.audience[b-ytyqv2b66j] {
    height: 968px;
    overflow: hidden;
    background: var(--creme-2);
    padding-top: 89px;
}

.audience__head[b-ytyqv2b66j] {
    width: 630px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    text-align: center;
}

.audience__title[b-ytyqv2b66j] {
    height: 179px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    white-space: nowrap;
}

.audience__lead[b-ytyqv2b66j] {
    width: 477px;
}

.audience__cards[b-ytyqv2b66j] {
    width: 1420px;
    max-width: calc(100% - 40px);
    margin: 78px auto 0;
    display: flex;
    gap: 20px;
}

.audience-card[b-ytyqv2b66j] {
    position: relative;
    width: 700px;
    height: 426px;
    border-radius: 40px;
    overflow: hidden;
    color: var(--creme);
    text-align: center;
}

.audience-card__image[b-ytyqv2b66j] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.audience-card__overlay[b-ytyqv2b66j] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
}

.audience-card__content[b-ytyqv2b66j] {
    position: relative;
    padding-top: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.audience-card__title[b-ytyqv2b66j] {
    white-space: nowrap;
}

.audience-card__text[b-ytyqv2b66j] {
    width: 477px;
    max-width: calc(100% - 40px);
    margin-top: 37px;
}

.audience-card .btn[b-ytyqv2b66j] {
    margin-top: 37px;
}

/* ---- Vanuit uw verzekering -------------------------------------------- */
.insurance[b-ytyqv2b66j] {
    height: 888px;
    overflow: hidden;
    background: var(--creme-2);
}

.insurance__container[b-ytyqv2b66j] {
    position: relative;
    width: 1420px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    height: 100%;
}

.insurance__content[b-ytyqv2b66j] {
    width: 700px;
    padding-top: 133px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.insurance__text[b-ytyqv2b66j] {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.insurance__title[b-ytyqv2b66j] {
    height: 135px;
    white-space: nowrap;
}

.insurance__lead[b-ytyqv2b66j] {
    width: 477px;
}

.insurance__cards[b-ytyqv2b66j] {
    display: flex;
    gap: 30px;
    padding-top: 42px;
    height: 256px;
}

.insurance-card[b-ytyqv2b66j] {
    width: 335px;
    height: 214px;
    border-radius: 10px;
    background: var(--creme);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.insurance-card__title[b-ytyqv2b66j] {
    font-size: 32px;
    line-height: 38px;
    white-space: nowrap;
}

.insurance__image[b-ytyqv2b66j] {
    position: absolute;
    top: 95px;
    left: 777px;
    width: 693px;
    height: 622px;
}

/* ---- Veelgestelde vragen ---------------------------------------------- */
.faq[b-ytyqv2b66j] {
    min-height: 1110px;
    background: var(--creme);
    padding-top: 89px;
    padding-bottom: 177px;
}

.faq__head[b-ytyqv2b66j] {
    width: 630px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
}

.faq__title[b-ytyqv2b66j] {
    height: 179px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.faq__list[b-ytyqv2b66j] {
    width: 774px;
    max-width: calc(100% - 40px);
    margin: 54px auto 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq__more[b-ytyqv2b66j] {
    margin: 95px 0 0 calc(50% - 382px);
}

/* ---- Responsive fallbacks --------------------------------------------- */
@media (max-width: 1500px) {
    .intro__container[b-ytyqv2b66j] {
        max-width: calc(100% - 40px);
    }

    .intro__head[b-ytyqv2b66j] {
        height: auto;
        flex-wrap: wrap;
        gap: 30px;
    }

    .intro__lead[b-ytyqv2b66j] {
        margin-left: 0;
        margin-top: 0;
    }

    .intro__steps[b-ytyqv2b66j] {
        flex-wrap: wrap;
        gap: 40px 0;
    }

    .intro[b-ytyqv2b66j] {
        height: auto;
        padding-bottom: 120px;
    }

    .intro__stats[b-ytyqv2b66j] {
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 100px;
    }

    .features[b-ytyqv2b66j] {
        height: auto;
        padding-top: 0;
        padding-bottom: 100px;
    }

    .features__visual[b-ytyqv2b66j] {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
    }

    .features__visual img[b-ytyqv2b66j] {
        width: 100%;
        height: auto;
    }

    .features__grid[b-ytyqv2b66j] {
        width: min(1020px, calc(100% - 40px));
        height: auto;
        margin: 60px auto 0;
    }

    .audience[b-ytyqv2b66j],
    .insurance[b-ytyqv2b66j],
    .faq[b-ytyqv2b66j] {
        height: auto;
        padding-bottom: 100px;
    }

    .audience__cards[b-ytyqv2b66j] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .insurance__container[b-ytyqv2b66j] {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        align-items: flex-start;
        padding-bottom: 60px;
    }

    .insurance__image[b-ytyqv2b66j] {
        position: static;
        max-width: 100%;
        height: auto;
    }

    .faq__more[b-ytyqv2b66j] {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 900px) {
    .hero[b-ytyqv2b66j] {
        height: auto;
        min-height: 620px;
        padding-bottom: 80px;
    }

    .hero__content[b-ytyqv2b66j] {
        padding-top: 140px;
    }

    .hero__title[b-ytyqv2b66j],
    .audience__title[b-ytyqv2b66j],
    .faq__title[b-ytyqv2b66j],
    .insurance__title[b-ytyqv2b66j],
    .audience-card__title[b-ytyqv2b66j],
    .insurance-card__title[b-ytyqv2b66j] {
        white-space: normal;
    }

    .hero__title[b-ytyqv2b66j],
    .intro__title[b-ytyqv2b66j],
    .features__title[b-ytyqv2b66j],
    .audience__title[b-ytyqv2b66j],
    .insurance__title[b-ytyqv2b66j],
    .faq__title[b-ytyqv2b66j] {
        font-size: 40px;
        line-height: 1.1;
    }

    .audience__title[b-ytyqv2b66j],
    .faq__title[b-ytyqv2b66j],
    .insurance__title[b-ytyqv2b66j] {
        height: auto;
    }

    .hero__actions[b-ytyqv2b66j] {
        flex-direction: column;
    }

    .intro__title[b-ytyqv2b66j],
    .intro__lead[b-ytyqv2b66j] {
        width: 100%;
    }

    .step[b-ytyqv2b66j] {
        width: 100%;
    }

    .step__title[b-ytyqv2b66j] {
        height: auto;
    }

    .intro__stats[b-ytyqv2b66j] {
        width: 100%;
        max-width: 100%;
        padding: 30px 20px;
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .stat[b-ytyqv2b66j] {
        white-space: normal;
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }

    .stat__divider[b-ytyqv2b66j] {
        width: 100%;
        height: 1px;
    }

    .intro__stats .btn[b-ytyqv2b66j] {
        align-self: center;
    }

    .features__grid[b-ytyqv2b66j] {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .audience-card[b-ytyqv2b66j] {
        width: 100%;
        height: auto;
        min-height: 360px;
        padding-bottom: 60px;
    }

    .audience-card__title[b-ytyqv2b66j] {
        font-size: 36px;
        line-height: 1.1;
    }

    .audience__lead[b-ytyqv2b66j] {
        width: 100%;
    }

    .insurance__content[b-ytyqv2b66j] {
        width: 100%;
        padding-top: 80px;
    }

    .insurance__lead[b-ytyqv2b66j] {
        width: 100%;
    }

    .insurance__cards[b-ytyqv2b66j] {
        flex-wrap: wrap;
        height: auto;
    }

    .insurance-card[b-ytyqv2b66j] {
        width: 100%;
    }

    .faq-item__question[b-ytyqv2b66j] {
        width: auto;
    }
}

@media (max-width: 600px) {
    .audience-card__title[b-ytyqv2b66j] {
        font-size: 32px;
    }

    .audience-card__content[b-ytyqv2b66j] {
        padding-left: 24px;
        padding-right: 24px;
    }
}
/* /Components/Pages/Nabestaande.razor.rz.scp.css */
/* ==========================================================================
   Voor nabestaanden – styles for /nabestaande only.
   Measurements follow the Figma frame "04 — Nabestaanden" (1728px wide).
   ========================================================================== */

.nab[b-bzrzi3gmkr] {
    width: 100%;
    overflow-x: clip;
}

/* ---- Hero -------------------------------------------------------------- */
.nab-hero[b-bzrzi3gmkr] {
    position: relative;
    height: 930px;
    overflow: hidden;
    background: var(--nachtblauw);
    color: var(--creme);
}

.nab-hero__backdrop[b-bzrzi3gmkr] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1040px;
    pointer-events: none;
}

.nab-hero__image[b-bzrzi3gmkr] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nab-hero__overlay[b-bzrzi3gmkr] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.nab-hero__content[b-bzrzi3gmkr] {
    position: relative;
    width: 630px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 165px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
}

.nab-hero__text[b-bzrzi3gmkr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    white-space: nowrap;
}

.nab-hero__lead[b-bzrzi3gmkr] {
    width: 590px;
    max-width: 100%;
}

.nab-hero__actions[b-bzrzi3gmkr] {
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 650px;
    max-width: 100%;
}

.nab-hero__ghost[b-bzrzi3gmkr] {
    color: var(--wit);
}

/* ---- Inspiratie -------------------------------------------------------- */
.inspire[b-bzrzi3gmkr] {
    background: var(--creme);
    padding: 120px 240px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    overflow: hidden;
}

.inspire__title[b-bzrzi3gmkr] {
    white-space: nowrap;
}

.inspire__lead[b-bzrzi3gmkr] {
    width: 790px;
    max-width: 100%;
}

.inspire__cards[b-bzrzi3gmkr] {
    width: 1248px;
    max-width: 100%;
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.memory-card[b-bzrzi3gmkr] {
    width: 394px;
    flex-shrink: 0;
    padding: 40px 32px;
    border-radius: 32px;
    background: var(--creme-2);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.memory-card__image[b-bzrzi3gmkr] {
    width: 330px;
    height: 220px;
    border-radius: 20px;
    object-fit: cover;
}

.memory-card__label[b-bzrzi3gmkr] {
    width: 330px;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    white-space: pre-wrap;
}

.memory-card__title[b-bzrzi3gmkr] {
    width: 330px;
    font-size: 26px;
    font-weight: 500;
    line-height: 39px;
}

.memory-card__text[b-bzrzi3gmkr] {
    width: 330px;
    font-size: 18px;
    line-height: 27px;
}

.memory-card__quote[b-bzrzi3gmkr] {
    width: 330px;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
}

/* ---- U hoeft het niet alleen te doen ----------------------------------- */
.together[b-bzrzi3gmkr] {
    position: relative;
    height: 809px;
    overflow: hidden;
    background: var(--nachtblauw);
    color: var(--creme);
}

.together__container[b-bzrzi3gmkr] {
    position: relative;
    z-index: 1;
    width: 1096px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 99px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

.together__head[b-bzrzi3gmkr] {
    width: 781px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    text-align: center;
}

.together__title[b-bzrzi3gmkr] {
    height: 135px;
    width: 686px;
    max-width: 100%;
}

.together__lead[b-bzrzi3gmkr] {
    width: 586px;
    max-width: 100%;
}

.together__cards[b-bzrzi3gmkr] {
    width: 100%;
    height: 227px;
    display: flex;
    align-items: center;
    gap: 30px;
}

.tip-card[b-bzrzi3gmkr] {
    position: relative;
    width: 335px;
    height: 214px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--nachtblauw-light);
    text-align: center;
}

.tip-card__title[b-bzrzi3gmkr] {
    position: absolute;
    top: 45.5px;
    left: 0;
    right: 0;
    font-size: 32px;
    line-height: 38px;
    color: var(--mintgroen);
    white-space: nowrap;
}

.tip-card__text[b-bzrzi3gmkr] {
    position: absolute;
    top: 97px;
    left: 50%;
    transform: translateX(-50%);
    width: 292px;
    color: var(--creme);
}

.together__visual[b-bzrzi3gmkr] {
    position: absolute;
    z-index: 0;
    top: 159px;
    left: calc(50% + 267px);
    width: 637px;
    height: 607px;
    pointer-events: none;
}

/* ---- Wie doet wat ------------------------------------------------------ */
.roles[b-bzrzi3gmkr] {
    background: var(--creme);
    padding: 120px 240px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    overflow: hidden;
}

.roles .tag[b-bzrzi3gmkr] {
    width: 1248px;
    max-width: 100%;
}

.roles__title[b-bzrzi3gmkr] {
    white-space: nowrap;
}

.roles__columns[b-bzrzi3gmkr] {
    width: 1248px;
    max-width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 64px;
}

.role[b-bzrzi3gmkr] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.role--family[b-bzrzi3gmkr] {
    width: 560px;
}

.role--director[b-bzrzi3gmkr] {
    width: 624px;
}

.role__title[b-bzrzi3gmkr] {
    font-size: 26px;
    font-weight: 500;
    line-height: 39px;
}

.role__text[b-bzrzi3gmkr] {
    font-size: 20px;
    line-height: 30px;
}

/* ---- Begin met één herinnering ---------------------------------------- */
.nab-cta[b-bzrzi3gmkr] {
    position: relative;
    height: 686px;
    overflow: hidden;
    color: var(--creme);
}

.nab-cta__image[b-bzrzi3gmkr] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nab-cta__overlay[b-bzrzi3gmkr] {
    position: absolute;
    inset: 0;
    background: rgba(34, 49, 59, 0.8);
}

.nab-cta__content[b-bzrzi3gmkr] {
    position: relative;
    width: 877px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 175px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 53px;
    text-align: center;
}

.nab-cta__text[b-bzrzi3gmkr] {
    height: 158px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.nab-cta__title[b-bzrzi3gmkr] {
    width: 835px;
    max-width: 100%;
    font-size: 62px;
    line-height: 1.1;
}

.nab-cta__lead[b-bzrzi3gmkr] {
    width: 907px;
    max-width: 100vw;
    font-size: 20px;
    line-height: 30px;
}

.nab-cta__actions[b-bzrzi3gmkr] {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.nab-cta__links[b-bzrzi3gmkr] {
    display: flex;
    justify-content: center;
    gap: 32px;
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    white-space: pre-wrap;
}

.nab-cta__links a[b-bzrzi3gmkr] {
    text-decoration: underline;
    text-underline-position: from-font;
}

.nab-cta__links a:first-child[b-bzrzi3gmkr] {
    width: 235px;
}

.nab-cta__links a:last-child[b-bzrzi3gmkr] {
    width: 245px;
}

.nab-cta__links a:hover[b-bzrzi3gmkr] {
    opacity: .75;
}

/* ---- Responsive fallbacks --------------------------------------------- */
@media (max-width: 1500px) {
    .inspire[b-bzrzi3gmkr],
    .roles[b-bzrzi3gmkr] {
        padding: 100px 40px;
    }

    .inspire__cards[b-bzrzi3gmkr] {
        flex-wrap: wrap;
    }

    .together[b-bzrzi3gmkr] {
        height: auto;
        padding-bottom: 100px;
    }

    .together__cards[b-bzrzi3gmkr] {
        height: auto;
        flex-wrap: wrap;
        justify-content: center;
    }

    .together__visual[b-bzrzi3gmkr] {
        display: none;
    }

    .roles__columns[b-bzrzi3gmkr] {
        flex-wrap: wrap;
    }

    .nab-cta__lead[b-bzrzi3gmkr] {
        max-width: 100%;
    }
}

@media (max-width: 900px) {
    .nab-hero[b-bzrzi3gmkr] {
        height: auto;
        min-height: 620px;
        padding-bottom: 80px;
    }

    .inspire[b-bzrzi3gmkr],
    .roles[b-bzrzi3gmkr] {
        padding: 80px 20px;
    }

    .nab-hero__content[b-bzrzi3gmkr] {
        padding-top: 140px;
    }

    .nab-hero__text[b-bzrzi3gmkr],
    .inspire__title[b-bzrzi3gmkr],
    .roles__title[b-bzrzi3gmkr],
    .tip-card__title[b-bzrzi3gmkr] {
        white-space: normal;
    }

    .nab-hero h1[b-bzrzi3gmkr],
    .inspire__title[b-bzrzi3gmkr],
    .together__title[b-bzrzi3gmkr],
    .roles__title[b-bzrzi3gmkr],
    .nab-cta__title[b-bzrzi3gmkr] {
        font-size: 40px;
        line-height: 1.1;
    }

    .together__title[b-bzrzi3gmkr] {
        height: auto;
    }

    .nab-hero__actions[b-bzrzi3gmkr],
    .nab-cta__actions[b-bzrzi3gmkr],
    .nab-cta__links[b-bzrzi3gmkr] {
        flex-direction: column;
        align-items: center;
    }

    .nab-cta__links a[b-bzrzi3gmkr] {
        padding: 9px 0; /* 9 + 27 + 9 = 45px tikdoel */
    }

    .memory-card[b-bzrzi3gmkr] {
        width: 100%;
    }

    .memory-card__image[b-bzrzi3gmkr],
    .memory-card__label[b-bzrzi3gmkr],
    .memory-card__title[b-bzrzi3gmkr],
    .memory-card__text[b-bzrzi3gmkr],
    .memory-card__quote[b-bzrzi3gmkr] {
        width: 100%;
    }

    .memory-card__label[b-bzrzi3gmkr] {
        font-size: 16px;
    }

    .tip-card[b-bzrzi3gmkr] {
        width: 100%;
        height: auto;
        padding: 40px 20px;
    }

    .tip-card__title[b-bzrzi3gmkr],
    .tip-card__text[b-bzrzi3gmkr] {
        position: static;
        transform: none;
        width: 100%;
    }

    .tip-card__text[b-bzrzi3gmkr] {
        margin-top: 12px;
    }

    .role--family[b-bzrzi3gmkr],
    .role--director[b-bzrzi3gmkr] {
        width: 100%;
    }

    .nab-cta__text[b-bzrzi3gmkr] {
        height: auto;
        gap: 30px;
    }

    .nab-cta__content[b-bzrzi3gmkr] {
        padding-top: 120px;
    }
}
/* /Components/Pages/Ondernemer.razor.rz.scp.css */
/* ==========================================================================
   Voor uitvaartondernemers – styles for /ondernemer only.
   Measurements follow the Figma frame "03 — Uitvaartondernemers" (1728px wide).
   ========================================================================== */

.ond[b-gvlepzt78z] {
    width: 100%;
    overflow-x: clip;
}

.visually-hidden[b-gvlepzt78z] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Hero -------------------------------------------------------------- */
.ond-hero[b-gvlepzt78z] {
    position: relative;
    height: 930px;
    overflow: hidden;
    background: var(--nachtblauw);
    color: var(--creme);
}

.ond-hero__video[b-gvlepzt78z] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Calibrated on the Figma render: ~22% darker at the top, running to ~58% at the very bottom. */
.ond-hero__overlay[b-gvlepzt78z] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.22) 45%, rgba(0, 0, 0, 0.35) 75%, rgba(0, 0, 0, 0.58) 100%);
}

.ond-hero__content[b-gvlepzt78z] {
    position: relative;
    width: 630px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 175px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
}

.ond-hero__text[b-gvlepzt78z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    white-space: nowrap;
}

.ond-hero__lead[b-gvlepzt78z] {
    width: 406px;
    max-width: 100%;
    color: var(--wit);
}

/* ---- Zo eenvoudig werkt het ------------------------------------------- */
.flow[b-gvlepzt78z] {
    height: 892px;
    overflow: hidden;
    background: var(--nachtblauw);
    color: var(--creme);
}

.flow__container[b-gvlepzt78z] {
    position: relative;
    width: 1421px;
    height: 738px;
    margin: 77px auto 0;
}

.flow__title[b-gvlepzt78z] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font-size: 62px;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}

.flow__lead[b-gvlepzt78z] {
    position: absolute;
    top: 102px;
    left: 50%;
    transform: translateX(-50%);
    width: 527px;
    text-align: center;
    color: var(--text);
}

.flow__icon[b-gvlepzt78z] {
    position: absolute;
}

.flow__icon--koffie[b-gvlepzt78z] {
    top: 263px;
    left: 71px;
    width: 190px;
    height: 99px;
}

.flow__icon--tafel[b-gvlepzt78z] {
    top: 247px;
    left: 416px;
    width: 196px;
    height: 144px;
}

.flow__icon--bezorgen[b-gvlepzt78z] {
    top: 271px;
    left: 801px;
    width: 157px;
    height: 107px;
}

.flow__icon--meenemen[b-gvlepzt78z] {
    top: 231px;
    left: 1142px;
    width: 190px;
    height: 157px;
}

.flow__line[b-gvlepzt78z] {
    position: absolute;
    top: 449px;
    left: 1px;
    width: 1420px;
    height: 0;
    border-top: 1px dashed var(--mintgroen);
}

.flow__dot[b-gvlepzt78z] {
    position: absolute;
    top: 434px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mintgroen);
}

.flow__dot--1[b-gvlepzt78z] { left: 157px; }
.flow__dot--2[b-gvlepzt78z] { left: 509px; }
.flow__dot--3[b-gvlepzt78z] { left: 878px; }
.flow__dot--4[b-gvlepzt78z] { left: 1237px; }

.flow-step[b-gvlepzt78z] {
    position: absolute;
    top: 465px;
    height: 140px;
    text-align: center;
}

.flow-step--1[b-gvlepzt78z] { left: 0; width: 341px; }
.flow-step--2[b-gvlepzt78z] { left: 363px; width: 319px; }
.flow-step--3[b-gvlepzt78z] { left: 724px; width: 337px; }
.flow-step--4[b-gvlepzt78z] { left: 1081px; width: 340px; }

.flow-step__title[b-gvlepzt78z] {
    position: absolute;
    top: 65.5px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 248px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--creme);
}

.flow-step__text[b-gvlepzt78z] {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 261px;
    color: var(--text);
}

.flow-step--2 .flow-step__text[b-gvlepzt78z] {
    width: 319px;
}

/* ---- Wat gedenkboekje.nl voor u regelt --------------------------------- */
.offer[b-gvlepzt78z] {
    position: relative;
    height: 1751px;
    overflow: hidden;
    background: var(--creme-2);
    color: var(--nachtblauw);
}

.offer__visual[b-gvlepzt78z] {
    position: absolute;
    top: 0;
    left: 76px;
    width: 1594px;
    pointer-events: none;
}

.offer__visual img[b-gvlepzt78z] {
    width: 1594px;
    height: auto;
}

.offer__title[b-gvlepzt78z] {
    position: absolute;
    top: 1064px;
    left: 0;
    right: 0;
    font-size: 62px;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}

.offer__grid[b-gvlepzt78z] {
    position: absolute;
    top: 1280px;
    left: calc(50% - 472px);
    width: 1020px;
    height: 313px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 40px;
}

.offer__desc--narrow[b-gvlepzt78z] {
    width: 422px;
}

/* ---- En wij rijden zelf ------------------------------------------------ */
.delivery[b-gvlepzt78z] {
    position: relative;
    height: 1198px;
    overflow: hidden;
    background: var(--nachtblauw);
    color: var(--creme);
}

.delivery__container[b-gvlepzt78z] {
    position: relative;
    width: 1096px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 99px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

.delivery__head[b-gvlepzt78z] {
    width: 781px;
    max-width: 100%;
    height: 174px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    text-align: center;
}

.delivery__title[b-gvlepzt78z] {
    width: 686px;
    max-width: 100%;
    white-space: nowrap;
}

.delivery__lead[b-gvlepzt78z] {
    width: 586px;
    max-width: 100%;
}

.delivery__points[b-gvlepzt78z] {
    position: relative;
    width: 1122px;
    height: 140px;
    text-align: center;
}

.delivery-point__title[b-gvlepzt78z] {
    position: absolute;
    top: 24px;
    width: 248px;
    transform: translate(-50%, -50%);
    font-size: 32px;
    line-height: 1.1;
}

.delivery-point__title--1[b-gvlepzt78z] { left: calc(50% - 430px); }
.delivery-point__title--2[b-gvlepzt78z] { left: calc(50% + 1px); }
.delivery-point__title--3[b-gvlepzt78z] { left: calc(50% + 431px); top: 24.5px; }

.delivery-point__text[b-gvlepzt78z] {
    position: absolute;
    top: 91px;
    transform: translateX(-50%);
    line-height: normal;
}

.delivery-point__text--1[b-gvlepzt78z] { left: 130.5px; width: 261px; }
.delivery-point__text--2[b-gvlepzt78z] { left: 561.5px; width: 319px; }
.delivery-point__text--3[b-gvlepzt78z] { left: 991.5px; width: 261px; }

.delivery__phones[b-gvlepzt78z] {
    position: absolute;
    top: 474px;
    left: 50%;
    transform: translateX(-50%);
    width: 994px;
    height: 724px;
}

.delivery__car[b-gvlepzt78z] {
    position: absolute;
    top: 625px;
    left: calc(50% + 343px);
    width: 521px;
    height: 486px;
}

/* ---- Veelgestelde vragen ---------------------------------------------- */
.faq[b-gvlepzt78z] {
    min-height: 958px;
    background: var(--creme);
    padding-top: 89px;
    padding-bottom: 121px;
}

.faq__head[b-gvlepzt78z] {
    width: 630px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
}

.faq__title[b-gvlepzt78z] {
    height: 179px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.faq__list[b-gvlepzt78z] {
    width: 774px;
    max-width: calc(100% - 40px);
    margin: 54px auto 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq__more[b-gvlepzt78z] {
    margin: 66px 0 0 calc(50% - 382px);
}

/* ---- Plan een vrijblijvende kennismaking ------------------------------- */
.contact[b-gvlepzt78z] {
    height: 1107px;
    overflow: hidden;
    background: var(--nachtblauw);
    color: var(--creme);
}

.contact__container[b-gvlepzt78z] {
    position: relative;
    width: 1421px;
    max-width: calc(100% - 40px);
    height: 792px;
    margin: 153px auto 0;
}

.contact__intro[b-gvlepzt78z] {
    position: absolute;
    top: 0;
    left: 1px;
    width: 694px;
    height: 792px;
    border-radius: 40px;
    overflow: hidden;
    text-align: center;
}

.contact__image[b-gvlepzt78z] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact__overlay[b-gvlepzt78z] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
}

.contact__title[b-gvlepzt78z] {
    position: absolute;
    top: 234px;
    left: 68px;
    width: 558px;
    font-size: 62px;
    line-height: 1.1;
}

.contact__text[b-gvlepzt78z] {
    position: absolute;
    top: 403px;
    left: 178px;
    width: 338px;
}

.contact__panel[b-gvlepzt78z] {
    position: absolute;
    top: 0;
    left: 723px;
    width: 698px;
    height: 792px;
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.1);
}

.contact__form[b-gvlepzt78z] {
    position: absolute;
    top: 55px;
    left: 59px;
    width: 580px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact__field[b-gvlepzt78z] {
    display: block;
    width: 100%;
}

.contact__input[b-gvlepzt78z] {
    display: block;
    width: 100%;
    height: 67px;
    padding: 0 31px;
    border: 0;
    border-radius: 8px;
    background: var(--nachtblauw);
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 1.1;
    color: var(--wit);
    outline: none;
}

.contact__input[b-gvlepzt78z]::placeholder {
    color: rgba(255, 255, 255, 0.8);
    opacity: 1;
}

.contact__input:focus-visible[b-gvlepzt78z] {
    box-shadow: 0 0 0 2px var(--mintgroen);
}

.contact__textarea[b-gvlepzt78z] {
    height: 210px;
    padding: 26px 24px;
    resize: vertical;
}

.contact__submit[b-gvlepzt78z] {
    width: 100%;
    height: 62px;
    border-radius: 8px;
    background: var(--cta-blue);
    color: var(--creme);
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 600;
    line-height: 20px;
    transition: background-color .2s ease;
}

.contact__submit:hover[b-gvlepzt78z] {
    background: #2f6ef0;
}

.contact__privacy[b-gvlepzt78z] {
    position: absolute;
    top: 729px;
    left: 0;
    right: 0;
    font-size: 13px;
    line-height: 1.1;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
}

.contact__privacy a[b-gvlepzt78z] {
    font-weight: 700;
    color: var(--cta-blue);
}

.contact__error[b-gvlepzt78z] {
    padding: 14px 20px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid var(--mintgroen);
    color: var(--creme);
    font-size: 16px;
    line-height: 24px;
}

.contact__success[b-gvlepzt78z] {
    position: absolute;
    top: 55px;
    left: 59px;
    width: 580px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 200px;
}

.contact__success-title[b-gvlepzt78z] {
    font-size: 42px;
    line-height: 1.1;
}

/* ---- Responsive fallbacks --------------------------------------------- */
@media (max-width: 1500px) {
    .flow[b-gvlepzt78z] {
        height: auto;
        padding-bottom: 80px;
    }

    .flow__container[b-gvlepzt78z] {
        width: min(1421px, calc(100% - 40px));
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .flow__title[b-gvlepzt78z],
    .flow__lead[b-gvlepzt78z],
    .flow-step[b-gvlepzt78z],
    .flow-step__title[b-gvlepzt78z],
    .flow-step__text[b-gvlepzt78z] {
        position: static;
        transform: none;
        width: auto;
        height: auto;
        white-space: normal;
    }

    .flow__lead[b-gvlepzt78z] {
        margin: 0 auto;
        max-width: 527px;
    }

    .flow__icon[b-gvlepzt78z],
    .flow__line[b-gvlepzt78z],
    .flow__dot[b-gvlepzt78z] {
        display: none;
    }

    .flow-step[b-gvlepzt78z] {
        max-width: 420px;
        margin: 0 auto;
    }

    .flow-step__text[b-gvlepzt78z] {
        margin-top: 10px;
    }

    .offer[b-gvlepzt78z] {
        height: auto;
        padding-bottom: 100px;
    }

    .offer__visual[b-gvlepzt78z] {
        position: relative;
        left: 0;
        width: 100%;
    }

    .offer__visual img[b-gvlepzt78z] {
        width: 100%;
    }

    .offer__title[b-gvlepzt78z] {
        position: relative;
        top: 0;
        margin-top: 40px;
        white-space: normal;
    }

    .offer__grid[b-gvlepzt78z] {
        position: relative;
        top: 0;
        left: 0;
        width: min(1020px, calc(100% - 40px));
        height: auto;
        margin: 60px auto 0;
    }

    .offer__desc--narrow[b-gvlepzt78z] {
        width: auto;
    }

    .delivery[b-gvlepzt78z] {
        height: auto;
        padding-bottom: 60px;
    }

    .delivery__head[b-gvlepzt78z] {
        height: auto;
    }

    .delivery__points[b-gvlepzt78z] {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px 30px;
    }

    .delivery-point__title[b-gvlepzt78z],
    .delivery-point__text[b-gvlepzt78z] {
        position: static;
        transform: none;
        width: auto;
    }

    .delivery-point__title--1[b-gvlepzt78z] { grid-area: 1 / 1; }
    .delivery-point__title--2[b-gvlepzt78z] { grid-area: 1 / 2; }
    .delivery-point__title--3[b-gvlepzt78z] { grid-area: 1 / 3; }
    .delivery-point__text--1[b-gvlepzt78z] { grid-area: 2 / 1; }
    .delivery-point__text--2[b-gvlepzt78z] { grid-area: 2 / 2; }
    .delivery-point__text--3[b-gvlepzt78z] { grid-area: 2 / 3; }

    .delivery__phones[b-gvlepzt78z] {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        width: min(994px, 100%);
        height: auto;
        margin: 60px auto 0;
    }

    .delivery__car[b-gvlepzt78z] {
        display: none;
    }

    .faq[b-gvlepzt78z],
    .contact[b-gvlepzt78z] {
        height: auto;
        padding-bottom: 100px;
    }

    .faq__more[b-gvlepzt78z] {
        margin-left: auto;
        margin-right: auto;
    }

    .contact__container[b-gvlepzt78z] {
        height: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 28px;
        margin-top: 100px;
    }

    .contact__intro[b-gvlepzt78z],
    .contact__panel[b-gvlepzt78z] {
        position: relative;
        left: 0;
        width: 100%;
        max-width: 698px;
    }

    .contact__intro[b-gvlepzt78z] {
        height: auto;
        padding: 120px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    /* relative + z-index: anders schuiven de absoluut geplaatste foto en overlay over de tekst heen. */
    .contact__title[b-gvlepzt78z],
    .contact__text[b-gvlepzt78z] {
        position: relative;
        z-index: 1;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        max-width: 558px;
    }

    .contact__text[b-gvlepzt78z] {
        max-width: 338px;
    }

    .contact__panel[b-gvlepzt78z] {
        height: auto;
        padding: 55px 40px 60px;
    }

    .contact__form[b-gvlepzt78z],
    .contact__success[b-gvlepzt78z] {
        position: static;
        width: 100%;
    }

    .contact__privacy[b-gvlepzt78z] {
        position: static;
        margin-top: 24px;
    }
}

@media (max-width: 900px) {
    .ond-hero[b-gvlepzt78z] {
        height: auto;
        min-height: 620px;
        padding-bottom: 80px;
    }

    .contact__privacy[b-gvlepzt78z] {
        font-size: 14px;
    }

    .contact__privacy a[b-gvlepzt78z] {
        display: inline-block;
        padding: 15px 0; /* 15 + 15,4 + 15 = 45px tikdoel */
    }

    .ond-hero__content[b-gvlepzt78z] {
        padding-top: 140px;
    }

    .ond-hero__text[b-gvlepzt78z],
    .delivery__title[b-gvlepzt78z],
    .faq__title[b-gvlepzt78z] {
        white-space: normal;
    }

    .ond-hero h1[b-gvlepzt78z],
    .flow__title[b-gvlepzt78z],
    .offer__title[b-gvlepzt78z],
    .delivery__title[b-gvlepzt78z],
    .faq__title[b-gvlepzt78z],
    .contact__title[b-gvlepzt78z] {
        font-size: 40px;
        line-height: 1.1;
    }

    .faq__title[b-gvlepzt78z] {
        height: auto;
    }

    .delivery__points[b-gvlepzt78z] {
        grid-template-columns: 1fr;
    }

    .delivery-point__title--1[b-gvlepzt78z] { grid-area: 1 / 1; }
    .delivery-point__text--1[b-gvlepzt78z] { grid-area: 2 / 1; }
    .delivery-point__title--2[b-gvlepzt78z] { grid-area: 3 / 1; }
    .delivery-point__text--2[b-gvlepzt78z] { grid-area: 4 / 1; }
    .delivery-point__title--3[b-gvlepzt78z] { grid-area: 5 / 1; }
    .delivery-point__text--3[b-gvlepzt78z] { grid-area: 6 / 1; }

    .delivery-point__text[b-gvlepzt78z] {
        margin-bottom: 30px;
    }

    .offer__grid[b-gvlepzt78z] {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .contact__panel[b-gvlepzt78z] {
        padding: 30px 20px 40px;
    }
}
/* /Components/Pages/Support.razor.rz.scp.css */
/* ==========================================================================
   Support – styles for /support only.
   Measurements follow the Figma frame "05 — Support" (1728px wide).
   ========================================================================== */

.sup[b-g6jmn0wlma] {
    width: 100%;
    overflow-x: clip;
}

/* ---- Hero -------------------------------------------------------------- */
.sup-hero[b-g6jmn0wlma] {
    position: relative;
    height: 368px;
    overflow: hidden;
    background: var(--creme);
    color: var(--nachtblauw);
}

.sup-hero__content[b-g6jmn0wlma] {
    width: 630px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 165px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
}

.sup-hero__text[b-g6jmn0wlma] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    white-space: nowrap;
}

.sup-hero__lead[b-g6jmn0wlma] {
    width: 650px;
    max-width: 100vw;
    height: 47px;
}

/* ---- Tabs + FAQ -------------------------------------------------------- */
.sup-faq[b-g6jmn0wlma] {
    position: relative;
    min-height: 734px;
    background: var(--creme);
    padding-top: 47px;
    padding-bottom: 185px;
}

.sup-tabs[b-g6jmn0wlma] {
    width: 775px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 11px;
}

.sup-tab[b-g6jmn0wlma] {
    flex: 1 0 0;
    min-width: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    border-radius: 8px;
    background: var(--creme-2);
    color: #797979;
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    text-align: center;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
}

.sup-tab:hover[b-g6jmn0wlma] {
    background: #dfdacd;
}

.sup-tab--active[b-g6jmn0wlma],
.sup-tab--active:hover[b-g6jmn0wlma] {
    background: var(--nachtblauw);
    color: var(--wit);
}

.sup-faq__list[b-g6jmn0wlma] {
    width: 774px;
    max-width: calc(100% - 40px);
    margin: 30px auto 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---- Responsive fallbacks --------------------------------------------- */
@media (max-width: 1500px) {
    .sup-hero__lead[b-g6jmn0wlma] {
        max-width: 100%;
    }
}

@media (max-width: 1300px) {
    .sup-faq[b-g6jmn0wlma] {
        height: auto;
        padding-bottom: 120px;
    }
}

@media (max-width: 900px) {
    .sup-hero[b-g6jmn0wlma] {
        height: auto;
        padding-bottom: 40px;
    }

    .sup-hero__content[b-g6jmn0wlma] {
        padding-top: 120px;
    }

    .sup-hero__text[b-g6jmn0wlma] {
        white-space: normal;
    }

    .sup-hero h1[b-g6jmn0wlma] {
        font-size: 40px;
        line-height: 1.1;
    }

    .sup-hero__lead[b-g6jmn0wlma] {
        width: 100%;
        height: auto;
    }

    .sup-tabs[b-g6jmn0wlma] {
        flex-wrap: wrap;
    }

    .sup-tab[b-g6jmn0wlma] {
        flex: 1 1 calc(50% - 11px);
        padding: 15px 12px; /* 15 + 14 + 15 = 44px tikdoel */
    }
}
/* /Components/Shared/LegalPage.razor.rz.scp.css */
/* ==========================================================================
   Legal pages (algemene voorwaarden, privacystatement)
   Dark header band with the site menu, a title in the style of
   "Zo eenvoudig werkt het", a reading column on creme, and the footer.
   ========================================================================== */

.legal[b-arc8guh5da] {
    width: 100%;
    overflow-x: clip;
}

/* ---- Header band ------------------------------------------------------- */
.legal-hero[b-arc8guh5da] {
    position: relative;
    background: var(--nachtblauw);
    color: var(--creme);
    padding: 175px 20px 100px;
    text-align: center;
}

.legal-hero__title[b-arc8guh5da] {
    font-size: 62px;
    line-height: 1.1;
    white-space: nowrap;
}

.legal-hero__subtitle[b-arc8guh5da] {
    margin-top: 24px;
    color: var(--text);
}

/* ---- Body -------------------------------------------------------------- */
.legal__body[b-arc8guh5da] {
    background: var(--creme);
    color: var(--nachtblauw);
    padding: 100px 20px 140px;
}

.legal__content[b-arc8guh5da] {
    width: 790px;
    max-width: 100%;
    margin: 0 auto;
}

/* Content is rendered by the page components, hence ::deep. */
.legal__content[b-arc8guh5da]  h2 {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: 32px;
    line-height: 1.1;
    margin: 56px 0 20px;
}

.legal__content[b-arc8guh5da]  h2:first-child {
    margin-top: 0;
}

.legal__content[b-arc8guh5da]  h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.1;
    margin: 32px 0 12px;
}

.legal__content[b-arc8guh5da]  p {
    margin: 0 0 16px;
}

.legal__content[b-arc8guh5da]  p.legal__intro {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 32px;
}

.legal__content[b-arc8guh5da]  ul,
.legal__content[b-arc8guh5da]  ol {
    margin: 0 0 16px;
    padding-left: 24px;
    list-style: disc;
}

.legal__content[b-arc8guh5da]  ol {
    list-style: decimal;
}

.legal__content[b-arc8guh5da]  li {
    margin-bottom: 8px;
}

.legal__content[b-arc8guh5da]  a {
    text-decoration: underline;
    text-underline-position: from-font;
}

.legal__content[b-arc8guh5da]  a:hover {
    opacity: .75;
}

/* Knoppen in de tekstkolom (404-/foutpagina) volgen de knopstijl, niet de linkstijl. */
.legal__content[b-arc8guh5da]  a.btn {
    text-decoration: none;
    margin-top: 16px;
}

.legal__content[b-arc8guh5da]  a.btn:hover {
    opacity: 1;
}

.legal__content[b-arc8guh5da]  address {
    font-style: normal;
    margin: 0 0 16px;
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
    .legal-hero[b-arc8guh5da] {
        padding: 130px 20px 70px;
    }

    .legal-hero__title[b-arc8guh5da] {
        font-size: 40px;
        white-space: normal;
    }

    .legal__body[b-arc8guh5da] {
        padding: 60px 20px 100px;
    }
}