.home-page {
    --home-editorial-width: 1180px;
    --home-editorial-line: #dce5eb;
    --home-editorial-radius: 20px;
}

/* De hero blijft breed; vanaf de inhoud ontstaat één rustige leeslijn. */
.home-page .home-routes > .wrap,
.home-page .swipe-head,
.home-page .websection > .wrap,
.home-page .one-call-grid,
.home-page .daily > .wrap,
.home-page .timeline-story > .wrap,
.home-page .contact > .wrap,
.home-page .entrepreneur-focus-shell {
    width: min(var(--home-editorial-width), calc(100% - 9vw));
}

.home-page .home-routes,
.home-page .swipe,
.home-page .websection,
.home-page .entrepreneur-focus,
.home-page .one-call,
.home-page .daily,
.home-page .timeline-story {
    padding-block: 110px;
}

.home-page .home-routes-intro,
.home-page .swipe-head,
.home-page .web-head,
.home-page .daily-head {
    gap: 7vw;
}

.home-page .home-routes-intro h2,
.home-page .swipe h2,
.home-page .layers h2,
.home-page .websection h2,
.home-page .daily h2,
.home-page .timeline-story h2,
.home-page .one-call-copy h2,
.home-page .entrepreneur-focus h2 {
    font-size: clamp(2.8rem, 5.4vw, 5.6rem);
    line-height: .88;
    letter-spacing: -.06em;
}

/* De drie bedrijfsroutes vormen de inhoudelijke ruggengraat. */
.home-page .home-route-card {
    min-height: 390px;
    padding: 30px;
    border-radius: var(--home-editorial-radius);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.home-page .home-route-card h3 {
    margin-top: 58px;
    font-size: clamp(2rem, 3vw, 2.8rem);
}

.home-page .home-route-card:hover,
.home-page .home-route-card:focus-visible {
    border-color: var(--route-color);
    box-shadow: 0 18px 42px rgba(6, 24, 48, .09);
    transform: translateY(-4px);
}

.home-page .home-route-card:focus-visible {
    outline: 2px solid var(--route-color);
    outline-offset: 3px;
}

/* De dienstenrail blijft breed, maar de kaarten worden beheerster. */
.home-page .service-rail {
    gap: 16px;
    padding-top: 42px;
}

.home-page .rail-card {
    flex-basis: min(410px, 78vw);
    min-height: 430px;
    border: 1px solid rgba(6, 24, 48, .12);
    border-radius: var(--home-editorial-radius);
}

.home-page .rail-card:hover {
    transform: translateY(-4px);
}

.home-page .rail-card h3 {
    font-size: clamp(2.3rem, 4vw, 3.6rem);
    overflow-wrap: normal;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
}

/* Dit interactieve voorbeeld mag gecontroleerd buiten de tekstkolom treden. */
.home-page .web-compare {
    width: min(1320px, calc(100vw - 4vw));
    margin-left: 50%;
    border-radius: var(--home-editorial-radius);
    transform: translateX(-50%);
}

.home-page .entrepreneur-focus {
    background: #eff6d8;
}

.home-page .entrepreneur-focus-shell {
    grid-template-columns: .82fr 1.18fr;
    gap: 8vw;
}

.home-page .entrepreneur-focus-copy {
    max-width: 680px;
}

.home-page .entrepreneur-focus-copy p {
    font-size: clamp(1rem, 1.15vw, 1.16rem);
}

.home-page .one-call-grid {
    grid-template-columns: .9fr 1.1fr;
    gap: 8vw;
}

.home-page .promise-list li {
    min-height: 94px;
}

.home-page .task-console,
.home-page .old-school,
.home-page .okko-relationship-routes a,
.home-page .okko-relationship-routes > div {
    border-radius: var(--home-editorial-radius);
}

.home-page .old-school {
    gap: 7vw;
}

.home-page .time-item {
    min-height: 370px;
    gap: 10vw;
}

.home-page .time-copy::before {
    width: 10vw;
}

.home-page .time-item:nth-of-type(even) .time-copy::before {
    right: -10vw;
}

.home-page .time-item:nth-of-type(odd) .time-copy::before {
    left: -10vw;
}

.home-page .okko-relationship {
    margin-top: 60px;
    padding-top: 55px;
}

.home-page .okko-relationship-routes a,
.home-page .okko-relationship-routes > div {
    min-height: 285px;
}

.home-page .contact {
    min-height: 72vh;
    padding-block: 110px 90px;
}

.home-page .contact h2 {
    max-width: 950px;
    margin: 25px auto 38px;
    font-size: clamp(4.4rem, 8vw, 7rem);
    line-height: .8;
}

@media (max-width: 900px) {
    .home-page .home-routes > .wrap,
    .home-page .swipe-head,
    .home-page .websection > .wrap,
    .home-page .one-call-grid,
    .home-page .daily > .wrap,
    .home-page .timeline-story > .wrap,
    .home-page .contact > .wrap,
    .home-page .entrepreneur-focus-shell {
        width: min(100% - 40px, var(--home-editorial-width));
    }

    .home-page .home-routes,
    .home-page .swipe,
    .home-page .websection,
    .home-page .entrepreneur-focus,
    .home-page .one-call,
    .home-page .daily,
    .home-page .timeline-story {
        padding-block: 85px;
    }

    .home-page .entrepreneur-focus-shell,
    .home-page .one-call-grid {
        grid-template-columns: 1fr;
    }

    .home-page .web-compare {
        width: 100%;
        margin-left: 0;
        transform: none;
    }
}

@media (max-width: 560px) {
    .home-page .home-routes > .wrap,
    .home-page .swipe-head,
    .home-page .websection > .wrap,
    .home-page .one-call-grid,
    .home-page .daily > .wrap,
    .home-page .timeline-story > .wrap,
    .home-page .contact > .wrap,
    .home-page .entrepreneur-focus-shell {
        width: min(100% - 34px, var(--home-editorial-width));
    }

    .home-page .home-route-card {
        min-height: 0;
    }

    .home-page .rail-card {
        min-height: 400px;
    }

    .home-page .contact h2 {
        font-size: clamp(3.8rem, 17vw, 5.5rem);
    }
}