:root {
    --tw-editorial-width: 1180px;
    --tw-editorial-line: #dce5eb;
    --tw-editorial-radius: 20px;
}

/* Eén rustige inhoudsmaat voor de publieke informatie- en dienstpagina's. */
.shell,
.services-shell,
.starter-shell,
.contact-shell,
.support-shell,
.transfer-shell,
.compliance-shell,
.magazine-shell,
.php-shell,
.incident-shell,
.choice-shell,
.standard-footer-shell {
    width: min(var(--tw-editorial-width), calc(100% - 9vw));
}

/* Dienstpagina's: dezelfde redactionele rust als de drie hoofdroutes. */
body[class*="service-"] .service-hero {
    min-height: auto;
    padding-top: 130px;
}

body[class*="service-"] .hero-grid {
    min-height: 690px;
    grid-template-columns: 1.08fr .92fr;
    gap: 7vw;
}

body[class*="service-"] .hero-copy h1 {
    max-width: 720px;
    font-size: clamp(4rem, 7vw, 7rem);
}

body[class*="service-"] .hero-visual {
    height: min(520px, 48vw);
}

body[class*="service-"] .orbit-one {
    width: 360px;
    height: 360px;
}

body[class*="service-"] .orbit-two {
    width: 490px;
    height: 490px;
}

body[class*="service-"] .hero-promise {
    min-height: 120px;
    grid-template-columns: .35fr 1.65fr;
    margin-top: clamp(30px, 3vw, 46px);
}

@media (max-width: 640px) {
    body[class*="service-"] .hero-promise {
        margin-top: 26px;
    }
}

body[class*="service-"] .section-heading {
    grid-template-columns: .35fr 1.65fr;
    margin-bottom: 48px;
}

body[class*="service-"] .section-heading h2,
body[class*="service-"] .process-intro h2,
body[class*="service-"] .technical-intro h2,
body[class*="service-"] .contact h2 {
    max-width: 820px;
    font-size: clamp(2.8rem, 5.4vw, 5.6rem);
}

body[class*="service-"] .outcomes,
body[class*="service-"] .process,
body[class*="service-"] .related {
    box-shadow: 0 0 0 100vmax var(--cream);
    clip-path: inset(0 -100vmax);
}

body[class*="service-"] .outcome-grid {
    gap: 14px;
    border: 0;
}

body[class*="service-"] .outcome-grid article {
    min-height: 270px;
    padding: 30px;
    border: 1px solid var(--tw-editorial-line);
    border-radius: var(--tw-editorial-radius);
    background: #fff;
}

body[class*="service-"] .outcome-grid article + article {
    padding-left: 30px;
}

body[class*="service-"] .option-grid {
    gap: 16px;
}

body[class*="service-"] .option-card {
    min-height: 390px;
    border: 1px solid var(--tw-editorial-line);
    border-radius: var(--tw-editorial-radius);
}

body[class*="service-"] .option-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px rgba(7, 23, 47, .10);
}

body[class*="service-"] .process {
    grid-template-columns: .8fr 1.2fr;
    gap: 9vw;
}

body[class*="service-"] .technical-grid,
body[class*="service-"] .nerdy-grid {
    grid-template-columns: .8fr 1.2fr;
    gap: 9vw;
}

body[class*="service-"] .related-rail {
    gap: 14px;
}

body[class*="service-"] .related-rail a {
    min-height: 230px;
    padding: 26px;
    border: 1px solid var(--tw-editorial-line);
    border-radius: var(--tw-editorial-radius);
}

body[class*="service-"] .related-rail a:hover {
    transform: translateY(-4px);
}

/* Dienstenoverzicht: rijk van kleur, maar niet langer breder dan de verhaallijn. */
.services-mosaic {
    width: min(var(--tw-editorial-width), calc(100% - 9vw));
    gap: 16px;
}

.service-tile {
    min-height: 360px;
    border-radius: var(--tw-editorial-radius);
}

.service-tile--website,
.service-tile--webshop {
    min-height: 420px;
}

.service-tile:hover {
    transform: translateY(-4px);
}

.services-heading h2,
.services-route-intro h2,
.services-contact h2 {
    font-size: clamp(3rem, 5.6vw, 5.8rem);
}

.services-index {
    min-height: 360px;
    border-radius: var(--tw-editorial-radius);
}

.services-specialism-group,
.services-footer-magazine {
    border-radius: var(--tw-editorial-radius);
}

/* Losse commerciële pagina's volgen dezelfde maat en kaarttaal. */
.contact-hero h1,
.request-hero h1,
.starter-copy h1,
.carefree-hero .hero-copy h1 {
    max-width: 850px;
    font-size: clamp(4rem, 7vw, 7rem);
}

.contact-routes > div {
    gap: 14px;
    padding-block: 22px;
}

.contact-routes a {
    min-height: 215px;
    border: 1px solid var(--tw-editorial-line);
    border-radius: var(--tw-editorial-radius);
}

.contact-form-grid form,
.request-item,
.request-success,
.request-error {
    border: 1px solid var(--tw-editorial-line);
    border-radius: var(--tw-editorial-radius);
    box-shadow: 0 18px 50px rgba(6, 24, 48, .07);
}

.delivery-grid,
.extra-grid,
.route-grid {
    gap: 16px;
}

.delivery article,
.extra-grid a,
.route {
    border-radius: var(--tw-editorial-radius);
}

.delivery article {
    min-height: 430px;
}

.route {
    min-height: 570px;
}

.support-card,
.choice-card,
.incident-card,
.package-card {
    border-radius: var(--tw-editorial-radius);
}

@media (max-width: 1000px) {
    body[class*="service-"] .hero-grid,
    body[class*="service-"] .process,
    body[class*="service-"] .technical-grid,
    body[class*="service-"] .nerdy-grid {
        grid-template-columns: 1fr;
    }

    body[class*="service-"] .hero-visual {
        height: 420px;
    }
}

@media (max-width: 640px) {
    /* Dienstpagina's kregen hier bovenop de hero-ruimte nog rasterruimte.
       Houd de breadcrumb vrij van het vaste menu, zonder de grote lege strook. */
    body[class*="service-"] .service-hero {
        padding-top: 90px;
    }

    body[class*="service-"] .hero-grid {
        padding-top: 20px;
    }

    .shell,
    .services-shell,
    .starter-shell,
    .contact-shell,
    .support-shell,
    .transfer-shell,
    .compliance-shell,
    .magazine-shell,
    .php-shell,
    .incident-shell,
    .choice-shell,
    .standard-footer-shell,
    .services-mosaic {
        width: min(100% - 34px, var(--tw-editorial-width));
    }

    body[class*="service-"] .hero-grid {
        min-height: 0;
    }

    body[class*="service-"] .hero-visual {
        display: none;
    }

    body[class*="service-"] .section-heading {
        grid-template-columns: 1fr;
    }

    body[class*="service-"] .outcome-grid,
    body[class*="service-"] .related-rail {
        grid-template-columns: 1fr;
    }

    .contact-routes > div {
        gap: 10px;
    }

    .contact-routes a {
        min-height: 160px;
        border: 1px solid var(--tw-editorial-line);
    }
}