/* =========================================================
   ONDERSTEUNINGSPAGINA – 1 SCROLL / SWIPE = 1 BANNER
   Banner 2 is opnieuw ontworpen als één rustige zorgcompositie:
   intro links + één samenhangend overzichtsvlak rechts.
   ========================================================= */

html:has(body.page-services),
html.services-banner-page {
    --services-top-offset: calc(var(--announcement-height) + var(--header-height));
    --services-viewport-height: 100svh;
    --services-banner-height: max(1px, calc(var(--services-viewport-height) - var(--services-top-offset)));
    scroll-behavior: auto;
    scroll-padding-top: var(--services-top-offset);
    scroll-snap-type: y mandatory;
    overflow-anchor: none;
}

html.services-banner-page.services-banner-is-snapping {
    scroll-snap-type: none;
}

@supports (height: 100dvh) {
    html:has(body.page-services),
    html.services-banner-page {
        --services-viewport-height: 100dvh;
    }
}

body.page-services {
    overscroll-behavior-y: none;
}

.page-services #main-content {
    position: relative;
    isolation: isolate;
}

.page-services .services-banner,
.page-services .site-footer[data-services-banner] {
    position: relative;
    width: 100%;
    height: var(--services-banner-height);
    min-height: var(--services-banner-height);
    max-height: var(--services-banner-height);
    padding-block: 0;
    overflow: hidden;
    overflow: clip;
    overscroll-behavior: none;
    scroll-margin-top: 0;
    overflow-anchor: none;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    isolation: isolate;
}

.page-services [data-services-banner-content] {
    --services-content-scale: 1;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: min(calc(100% - clamp(24px, 4vw, 48px)), var(--container));
    max-width: calc(100% - clamp(24px, 4vw, 48px));
    margin: 0;
    transform: translate(-50%, -50%) scale(var(--services-content-scale));
    transform-origin: center center;
    will-change: transform;
}

/* Hero blijft inhoudelijk en visueel ongewijzigd. */
.page-services .services-banner--hero .page-hero__grid {
    padding-block: 0;
}

/* =========================================================
   BANNER 2 – NIEUW ONTWERP
   ========================================================= */

.page-services .services-support-row--combined {
    background:
        radial-gradient(circle at 10% 18%, rgba(183, 93, 61, .13) 0 9%, transparent 9.2%),
        radial-gradient(circle at 92% 84%, rgba(145, 169, 157, .24) 0 15%, transparent 15.2%),
        linear-gradient(135deg, #f8f6f0 0%, #eef2ed 58%, #e7eee9 100%);
}

.page-services .services-support-row--combined::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: clamp(280px, 34vw, 560px);
    aspect-ratio: 1;
    top: clamp(-220px, -15vw, -100px);
    right: clamp(-210px, -11vw, -80px);
    border: 1px solid rgba(32, 56, 50, .12);
    border-radius: 50%;
    box-shadow:
        0 0 0 38px rgba(255, 255, 255, .16),
        0 0 0 78px rgba(32, 56, 50, .025);
    pointer-events: none;
}

.page-services .services-support-row--combined::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: clamp(18px, 4vw, 62px);
    bottom: clamp(18px, 4vw, 54px);
    width: clamp(70px, 9vw, 138px);
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--clay) 0 34%, rgba(183, 93, 61, .18) 34% 100%);
    pointer-events: none;
}

.page-services .services-support-layout {
    display: grid;
    grid-template-columns: minmax(250px, .72fr) minmax(0, 1.62fr);
    gap: clamp(34px, 5vw, 78px);
    align-items: center;
}

.page-services .services-support-intro {
    position: relative;
    z-index: 2;
    max-width: 430px;
}

.page-services .services-support-intro .eyebrow {
    margin-bottom: clamp(12px, 1.8vh, 20px);
    color: var(--clay-dark);
}

.page-services .services-support-intro h2 {
    max-width: 9.5ch;
    margin-bottom: clamp(16px, 2.2vh, 24px);
    color: var(--forest-deep);
    font-size: clamp(2.7rem, 4.45vw, 5.15rem);
    line-height: .96;
    letter-spacing: -.045em;
}

.page-services .services-support-intro__body {
    max-width: 39ch;
    margin-bottom: 0;
    color: rgba(20, 42, 37, .72);
    font-size: clamp(.98rem, 1.15vw, 1.15rem);
    line-height: 1.62;
}

.page-services .services-support-intro__rule {
    position: relative;
    display: block;
    width: clamp(78px, 9vw, 120px);
    height: 1px;
    margin-top: clamp(24px, 4vh, 42px);
    background: rgba(20, 42, 37, .24);
}

.page-services .services-support-intro__rule::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--clay);
    transform: translate(50%, -50%);
    box-shadow: -18px 0 0 -2px rgba(183, 93, 61, .36);
}

.page-services .services-support-board {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: clamp(26px, 2.5vw, 38px);
    background:
        radial-gradient(circle at 100% 0%, rgba(145, 169, 157, .20), transparent 33%),
        linear-gradient(145deg, #18322c 0%, #142a25 58%, #10231f 100%);
    box-shadow:
        0 30px 70px rgba(20, 42, 37, .16),
        inset 0 1px 0 rgba(255, 255, 255, .07);
}

.page-services .services-support-board::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: 260px;
    height: 260px;
    right: -110px;
    bottom: -130px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 50%;
    box-shadow: 0 0 0 44px rgba(255, 255, 255, .018);
    pointer-events: none;
}

.page-services .services-support-board .services-detail-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

.page-services .services-support-board .service-detail {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: clamp(12px, 1.25vw, 18px);
    align-items: start;
    min-height: 0;
    padding: clamp(18px, 2.15vh, 25px) clamp(18px, 2vw, 28px);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--white);
}

.page-services .services-support-board .service-detail:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, .11);
}

.page-services .services-support-board .service-detail:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, .11);
}

.page-services .services-support-board .service-detail__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: none;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: rgba(255, 255, 255, .075);
    color: var(--white);
    font-size: 1.18rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

.page-services .services-support-board .service-detail__copy {
    min-width: 0;
}

.page-services .services-support-board .service-detail__index {
    margin: 0 0 4px;
    color: #e5a187;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .15em;
}

.page-services .services-support-board .service-detail h2 {
    margin: 0 0 7px;
    color: var(--white);
    font-size: clamp(1.12rem, 1.38vw, 1.55rem);
    line-height: 1.08;
    letter-spacing: -.025em;
}

.page-services .services-support-board .service-detail__body {
    margin: 0;
    color: rgba(255, 255, 255, .70);
    font-size: clamp(.73rem, .76vw, .84rem);
    line-height: 1.42;
}

.page-services .services-support-board .service-detail ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px clamp(10px, 1vw, 16px);
    margin: 10px 0 0;
    padding-left: 1rem;
    color: rgba(255, 255, 255, .82);
}

.page-services .services-support-board .service-detail li {
    min-width: 0;
    font-size: clamp(.65rem, .66vw, .74rem);
    line-height: 1.32;
}

.page-services .services-support-board .service-detail li::marker {
    color: #e5a187;
}

/* Boundary en CTA centreren binnen hun eigen viewportbanner. */
.page-services .boundary-section__grid,
.page-services .services-banner--cta .cta-panel {
    width: min(calc(100% - clamp(24px, 4vw, 48px)), var(--container));
}

/* Footer blijft de laatste snap-banner. */
.page-services .site-footer[data-services-banner] {
    padding: 0;
    background: var(--forest-deep);
}

.page-services .site-footer__fit {
    display: grid;
    gap: clamp(24px, 5vh, 48px);
}

.page-services .site-footer__fit > .container {
    width: 100%;
    margin-inline: 0;
}

.page-services .site-footer__grid {
    gap: clamp(22px, 4vw, 46px);
}

.page-services .site-footer__bottom {
    margin-top: 0;
}

@media (max-width: 980px) {
    .page-services .services-support-layout {
        grid-template-columns: minmax(210px, .62fr) minmax(0, 1.5fr);
        gap: clamp(24px, 3.5vw, 42px);
    }

    .page-services .services-support-intro h2 {
        font-size: clamp(2.35rem, 4.6vw, 3.5rem);
    }

    .page-services .services-support-board .service-detail {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 16px 17px;
    }

    .page-services .services-support-board .service-detail__icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .page-services .services-support-board .service-detail ul {
        grid-template-columns: 1fr;
        gap: 1px;
        margin-top: 7px;
    }
}

@media (max-width: 840px) {
    .page-services [data-services-banner-content] {
        width: min(calc(100% - 24px), var(--container));
        max-width: calc(100% - 24px);
    }

    .page-services .services-support-layout {
        grid-template-columns: 1fr;
        gap: clamp(18px, 3vh, 26px);
    }

    .page-services .services-support-intro {
        max-width: none;
        text-align: left;
    }

    .page-services .services-support-intro .eyebrow {
        margin-bottom: 8px;
    }

    .page-services .services-support-intro h2 {
        max-width: none;
        margin-bottom: 10px;
        font-size: clamp(2rem, 7vw, 3.05rem);
        line-height: 1;
    }

    .page-services .services-support-intro__body {
        max-width: 64ch;
        font-size: .92rem;
        line-height: 1.48;
    }

    .page-services .services-support-intro__rule {
        width: 72px;
        margin-top: 14px;
    }

    .page-services .services-support-board {
        border-radius: 24px;
    }

    .page-services .services-support-board .service-detail {
        padding: 14px 16px;
    }

    .page-services .services-support-board .service-detail h2 {
        font-size: clamp(1.04rem, 2.7vw, 1.35rem);
    }

    .page-services .services-support-board .service-detail__body {
        font-size: .74rem;
    }

    .page-services .services-support-board .service-detail li {
        font-size: .64rem;
    }

    .page-services .boundary-section__grid,
    .page-services .services-banner--cta .cta-panel {
        width: min(calc(100% - 24px), var(--container));
    }
}

@media (max-width: 600px) {
    .page-services .services-support-row--combined {
        background:
            radial-gradient(circle at 100% 100%, rgba(145, 169, 157, .22), transparent 26%),
            linear-gradient(155deg, #f8f6f0 0%, #edf2ed 100%);
    }

    .page-services .services-support-row--combined::before {
        width: 250px;
        top: -165px;
        right: -145px;
    }

    .page-services .services-support-row--combined::after {
        display: none;
    }

    .page-services .services-support-layout {
        gap: 14px;
    }

    .page-services .services-support-intro h2 {
        font-size: clamp(1.8rem, 8vw, 2.5rem);
    }

    .page-services .services-support-intro__body {
        font-size: .82rem;
        line-height: 1.4;
    }

    .page-services .services-support-intro__rule {
        display: none;
    }

    .page-services .services-support-board {
        border-radius: 20px;
    }

    .page-services .services-support-board .services-detail-grid {
        grid-template-columns: 1fr;
    }

    .page-services .services-support-board .service-detail,
    .page-services .services-support-board .service-detail:nth-child(odd),
    .page-services .services-support-board .service-detail:nth-child(n + 3) {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 10px;
        padding: 10px 12px;
        border-right: 0;
        border-top: 1px solid rgba(255, 255, 255, .10);
    }

    .page-services .services-support-board .service-detail:first-child {
        border-top: 0;
    }

    .page-services .services-support-board .service-detail__icon {
        width: 32px;
        height: 32px;
        font-size: .88rem;
    }

    .page-services .services-support-board .service-detail__index {
        margin-bottom: 2px;
        font-size: .58rem;
    }

    .page-services .services-support-board .service-detail h2 {
        margin-bottom: 4px;
        font-size: clamp(.98rem, 4.1vw, 1.18rem);
        line-height: 1.04;
    }

    .page-services .services-support-board .service-detail__body {
        display: -webkit-box;
        overflow: hidden;
        font-size: .69rem;
        line-height: 1.32;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    /* Op telefoons blijft banner 2 als één scherm leesbaar: de vier
       detailpunten zijn desktop/tablet-informatie; titel + kerntekst blijven
       volledig onderdeel van iedere ondersteuningsvorm. */
    .page-services .services-support-board .service-detail ul {
        display: none;
    }
}

@media (max-width: 390px) {
    .page-services .services-support-intro .eyebrow {
        font-size: .68rem;
    }

    .page-services .services-support-intro h2 {
        font-size: 1.75rem;
    }

    .page-services .services-support-intro__body {
        font-size: .76rem;
    }

    .page-services .services-support-board .service-detail {
        padding-block: 8px;
    }

    .page-services .services-support-board .service-detail h2 {
        font-size: .94rem;
    }

    .page-services .services-support-board .service-detail__body {
        font-size: .64rem;
    }
}

/* =========================================================
   2026-08-31 – BANNER 2: EEN NIEUW ONDERWERP
   "Wat u van ons mag verwachten" krijgt een eigen, rustige
   verhaallijn. Het dienstenoverzicht blijft behouden als de
   volgende banner zodat er geen inhoud uit de pagina verdwijnt.
   ========================================================= */

.page-services .services-promise {
    background:
        radial-gradient(circle at 14% 18%, rgba(183, 93, 61, .16) 0 8%, transparent 8.2%),
        radial-gradient(circle at 88% 78%, rgba(145, 169, 157, .25) 0 18%, transparent 18.2%),
        linear-gradient(128deg, #fbf7f0 0%, #f3f4ee 46%, #e9f0eb 100%);
}

.page-services .services-promise::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 52%;
    width: clamp(360px, 44vw, 700px);
    aspect-ratio: 1;
    border: 1px solid rgba(20, 42, 37, .075);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 0 clamp(34px, 4vw, 64px) rgba(255, 255, 255, .18),
        0 0 0 clamp(72px, 8vw, 124px) rgba(20, 42, 37, .018);
    pointer-events: none;
}

.page-services .services-promise::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: clamp(22px, 5vw, 80px);
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent, rgba(20, 42, 37, .10) 24%, rgba(20, 42, 37, .10) 76%, transparent);
    pointer-events: none;
}

.page-services .services-promise__layout {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(390px, 1.08fr);
    gap: clamp(48px, 7vw, 110px);
    align-items: center;
}

.page-services .services-promise__copy {
    position: relative;
    z-index: 2;
    max-width: 610px;
}

.page-services .services-promise__copy .eyebrow {
    margin-bottom: clamp(14px, 1.8vh, 20px);
    color: var(--clay-dark);
}

.page-services .services-promise__copy h2 {
    max-width: 12ch;
    margin: 0 0 clamp(18px, 2.4vh, 28px);
    color: var(--forest-deep);
    font-size: clamp(2.85rem, 5vw, 5.85rem);
    line-height: .93;
    letter-spacing: -.052em;
}

.page-services .services-promise__body {
    max-width: 52ch;
    margin: 0;
    color: rgba(20, 42, 37, .73);
    font-size: clamp(1rem, 1.17vw, 1.18rem);
    line-height: 1.64;
}

.page-services .services-promise__signature {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: clamp(26px, 4vh, 44px);
}

.page-services .services-promise__signature span {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--clay);
}

.page-services .services-promise__signature span:nth-child(2) {
    width: 44px;
    background: rgba(20, 42, 37, .20);
}

.page-services .services-promise__signature span:nth-child(3) {
    width: 9px;
    background: var(--sage);
}

.page-services .services-promise__journey {
    position: relative;
    z-index: 2;
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: clamp(26px, 2.7vw, 40px);
    background:
        radial-gradient(circle at 100% 0%, rgba(145, 169, 157, .24), transparent 34%),
        linear-gradient(145deg, #18332d 0%, #132a25 58%, #0f231f 100%);
    color: #fff;
    box-shadow: 0 34px 80px rgba(20, 42, 37, .19), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.page-services .services-promise__journey::after {
    content: "";
    position: absolute;
    right: -86px;
    bottom: -112px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 50%;
    box-shadow: 0 0 0 44px rgba(255, 255, 255, .018);
    pointer-events: none;
}

.page-services .services-promise__step {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: clamp(16px, 2vw, 26px);
    align-items: start;
    padding: clamp(23px, 3.2vh, 34px) clamp(24px, 3vw, 38px);
}

.page-services .services-promise__step + .services-promise__step {
    border-top: 1px solid rgba(255, 255, 255, .11);
}

.page-services .services-promise__step-number {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    color: #e6a28a;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.page-services .services-promise__step h3 {
    margin: 1px 0 7px;
    color: #fff;
    font-size: clamp(1.35rem, 1.75vw, 1.85rem);
    line-height: 1.05;
    letter-spacing: -.025em;
}

.page-services .services-promise__step p {
    max-width: 48ch;
    margin: 0;
    color: rgba(255, 255, 255, .70);
    font-size: clamp(.82rem, .9vw, .96rem);
    line-height: 1.52;
}

.page-services .services-promise__note {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: clamp(18px, 2.5vh, 26px) clamp(24px, 3vw, 38px);
    border-top: 1px solid rgba(255, 255, 255, .11);
    background: rgba(255, 255, 255, .035);
    color: rgba(255, 255, 255, .88);
    font-size: clamp(.82rem, .88vw, .95rem);
    font-weight: 600;
    line-height: 1.5;
}

/* Het bestaande dienstenoverzicht is nu een zelfstandige banner. */
.page-services .services-support-row--catalog {
    background:
        radial-gradient(circle at 8% 88%, rgba(183, 93, 61, .10), transparent 19%),
        linear-gradient(145deg, #f8f6f0 0%, #edf2ed 100%);
}

.page-services .services-support-row--catalog::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: clamp(260px, 31vw, 500px);
    aspect-ratio: 1;
    top: clamp(-190px, -11vw, -90px);
    right: clamp(-170px, -9vw, -70px);
    border: 1px solid rgba(32, 56, 50, .09);
    border-radius: 50%;
    pointer-events: none;
}

@media (max-width: 980px) {
    .page-services .services-promise__layout {
        grid-template-columns: minmax(0, .86fr) minmax(350px, 1.14fr);
        gap: clamp(30px, 4.5vw, 54px);
    }

    .page-services .services-promise__copy h2 {
        font-size: clamp(2.45rem, 5vw, 4rem);
    }

    .page-services .services-promise__step {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 15px;
        padding: 19px 22px;
    }

    .page-services .services-promise__step-number {
        width: 43px;
        height: 43px;
    }
}

@media (max-width: 840px) {
    .page-services .services-promise__layout {
        grid-template-columns: 1fr;
        gap: clamp(22px, 3.4vh, 34px);
    }

    .page-services .services-promise__copy {
        max-width: none;
    }

    .page-services .services-promise__copy .eyebrow {
        margin-bottom: 9px;
    }

    .page-services .services-promise__copy h2 {
        max-width: 15ch;
        margin-bottom: 13px;
        font-size: clamp(2.15rem, 7.2vw, 3.35rem);
        line-height: .96;
    }

    .page-services .services-promise__body {
        max-width: 64ch;
        font-size: .94rem;
        line-height: 1.5;
    }

    .page-services .services-promise__signature {
        margin-top: 16px;
    }

    .page-services .services-promise__journey {
        border-radius: 24px;
    }

    .page-services .services-promise__step {
        padding: 16px 18px;
    }

    .page-services .services-promise__note {
        padding: 15px 18px;
    }
}

@media (max-width: 600px) {
    .page-services .services-promise {
        background:
            radial-gradient(circle at 100% 100%, rgba(145, 169, 157, .22), transparent 28%),
            linear-gradient(155deg, #fbf7f0 0%, #edf2ed 100%);
    }

    .page-services .services-promise::before {
        top: 34%;
        left: 88%;
        width: 290px;
    }

    .page-services .services-promise::after {
        display: none;
    }

    .page-services .services-promise__layout {
        gap: 14px;
    }

    .page-services .services-promise__copy h2 {
        max-width: 14ch;
        margin-bottom: 9px;
        font-size: clamp(1.9rem, 8.4vw, 2.55rem);
    }

    .page-services .services-promise__body {
        display: -webkit-box;
        overflow: hidden;
        font-size: .82rem;
        line-height: 1.4;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .page-services .services-promise__signature {
        display: none;
    }

    .page-services .services-promise__journey {
        border-radius: 20px;
    }

    .page-services .services-promise__step {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 10px;
        padding: 12px 13px;
    }

    .page-services .services-promise__step-number {
        width: 34px;
        height: 34px;
        font-size: .62rem;
    }

    .page-services .services-promise__step h3 {
        margin-bottom: 3px;
        font-size: clamp(1.02rem, 4.5vw, 1.22rem);
    }

    .page-services .services-promise__step p {
        display: -webkit-box;
        overflow: hidden;
        font-size: .69rem;
        line-height: 1.34;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .page-services .services-promise__note {
        padding: 10px 13px;
        font-size: .69rem;
        line-height: 1.34;
    }
}

@media (max-width: 390px) {
    .page-services .services-promise__copy .eyebrow {
        font-size: .67rem;
    }

    .page-services .services-promise__copy h2 {
        font-size: 1.78rem;
    }

    .page-services .services-promise__body {
        font-size: .75rem;
        -webkit-line-clamp: 2;
    }

    .page-services .services-promise__step {
        padding-block: 9px;
    }

    .page-services .services-promise__step h3 {
        font-size: .97rem;
    }

    .page-services .services-promise__step p,
    .page-services .services-promise__note {
        font-size: .64rem;
    }
}