/* The shared main wrapper owns the horizontal breathing room. */
    .projecten-v6 > .container {
        max-width: none;
        padding-right: 0;
        padding-left: 0;
    }

    .projecten-v6 > .container.ca8-accent-section--bleed {
        width: calc(100% + clamp(1rem, 2.5vw, 2.5rem) + clamp(1rem, 2.5vw, 2.5rem));
        max-width: none;
        margin-right: 0;
        margin-left: calc(-1 * clamp(1rem, 2.5vw, 2.5rem));
        padding-right: clamp(1rem, 2.5vw, 2.5rem);
        padding-left: clamp(1rem, 2.5vw, 2.5rem);
    }

    .ca8-public-instruction-error {
        --ca8-project-navy: var(--ca8-public-navy);
        --ca8-project-navy-dark: var(--ca8-public-navy-dark);
        --ca8-project-muted: var(--ca8-public-muted);
        align-items: center;
        display: flex;
        justify-content: center;
        min-height: calc(100vh - 260px);
        padding: clamp(3rem, 8vw, 7rem) 1rem;
        width: 100%;
    }

    .ca8-public-instruction-error-card {
        background: linear-gradient(135deg, color-mix(in srgb, var(--ca8-public-navy) 8%, transparent), rgba(255, 255, 255, .98));
        border: 1px solid color-mix(in srgb, var(--ca8-public-navy) 12%, transparent);
        border-radius: 1.75rem;
        box-shadow: 0 22px 55px color-mix(in srgb, var(--ca8-public-navy) 12%, transparent);
        margin: 0 auto;
        max-width: 760px;
        overflow: hidden;
        padding: clamp(2rem, 5vw, 4rem);
        text-align: center;
    }

    .ca8-public-instruction-error-icon {
        align-items: center;
        background: var(--ca8-project-navy);
        border-radius: 50%;
        color: #fff;
        display: inline-flex;
        font-size: 1.75rem;
        height: 4.5rem;
        justify-content: center;
        margin-bottom: 1.5rem;
        width: 4.5rem;
    }

    .ca8-public-instruction-error h1 {
        color: var(--ca8-project-navy-dark);
        font-weight: var(--ca8-weight-heading);
    }

    .ca8-public-instruction-error p {
        color: var(--ca8-project-muted);
        font-size: 1.08rem;
        margin-left: auto;
        margin-right: auto;
        max-width: 560px;
    }


    .projecten-v6 {
        --ca8-case-ink: var(--ca8-public-ink);
        --ca8-case-navy: var(--ca8-public-navy);
        --ca8-case-navy-dark: var(--ca8-public-navy-dark);
        --ca8-case-navy-soft: var(--ca8-public-navy-soft);
        --ca8-case-muted: var(--ca8-public-muted);
        --ca8-case-surface: #ffffff;
        --ca8-case-soft: #f4f7fb;
        --ca8-case-blue: var(--ca8-public-navy);
        --ca8-case-shadow: var(--ca8-public-shadow);
    }

    .projecten-v6 .text-secondary {
        color: var(--ca8-case-muted) !important;
    }

    .projecten-v6 .ca8-accent-section > .d-flex .ca8-section-heading .text-secondary {
        color: rgba(255, 255, 255, 0.86) !important;
    }

.projecten-v6 .portfolio-section--own-designs .ca8-section-heading p {
        max-width: none;
    }

    .projecten-v6 .case-hero {
        background: radial-gradient(circle at top left, color-mix(in srgb, var(--ca8-public-navy) 18%, transparent), transparent 34%),
            linear-gradient(135deg, #ffffff 0%, var(--ca8-case-navy-soft) 100%);
        border-radius: 2rem;
        box-shadow: var(--ca8-case-shadow);
        overflow: hidden;
    }

    .projecten-v6 .case-title {
        color: var(--ca8-case-ink);
        letter-spacing: -.035em;
    }

    .projecten-v6 .case-back-link {
        align-items: center;
        color: var(--ca8-case-navy);
        display: inline-flex;
        font-weight: 700;
        gap: .5rem;
        text-decoration: none;
    }

    .projecten-v6 .case-back-link:hover,
    .projecten-v6 .case-back-link:focus-visible {
        color: var(--ca8-case-navy-dark);
        text-decoration: underline;
        text-underline-offset: .2rem;
    }

    .projecten-v6 .case-hero-image {
        aspect-ratio: 4 / 3;
        object-fit: cover;
        width: 100%;
        min-height: 100%;
    }

    .projecten-v6 .case-card,
    .projecten-v6 .case-design-card {
        background: var(--ca8-case-surface);
        border: 1px solid color-mix(in srgb, var(--ca8-public-navy) 10%, transparent);
        border-radius: 1.25rem;
        box-shadow: 0 12px 30px color-mix(in srgb, var(--ca8-public-navy) 8%, transparent);
    }

    .projecten-v6 .case-section-title {
        color: var(--ca8-case-ink);
        font-size: var(--ca8-text-section);
        font-weight: var(--ca8-weight-heading);
        line-height: var(--ca8-leading-section);
        letter-spacing: -.025em;
    }

    .projecten-v6 .case-design-thumb {
        aspect-ratio: 1 / 1;
        object-fit: cover;
        width: 100%;
    }

    .projecten-v6 .design-switcher {
        background: color-mix(in srgb, var(--ca8-public-navy) 6%, transparent);
        border: 1px solid color-mix(in srgb, var(--ca8-public-navy) 8%, transparent);
        border-radius: 1.25rem;
        padding: .45rem;
    }

    .projecten-v6 .design-switch-button {
        background: transparent;
        border: 0;
        border-radius: 1rem;
        color: var(--ca8-case-navy);
        font-weight: var(--ca8-weight-heading);
        padding: .75rem 1rem;
        transition: background .16s ease, color .16s ease, box-shadow .16s ease;
    }

    .projecten-v6 .design-switch-button:hover,
    .projecten-v6 .design-switch-button.is-active {
        background: #ffffff;
        color: var(--ca8-case-navy-dark);
        box-shadow: 0 8px 22px color-mix(in srgb, var(--ca8-public-navy) 12%, transparent);
    }

    .projecten-v6 .design-panel {
        animation: designPanelIn .18s ease;
    }

    .projecten-v6 .design-panel[hidden] {
        display: none !important;
    }

    .projecten-v6 .design-story {
        background: linear-gradient(135deg, color-mix(in srgb, var(--ca8-public-navy) 6%, transparent), rgba(255, 255, 255, .96));
        border: 1px solid color-mix(in srgb, var(--ca8-public-navy) 8%, transparent);
        border-radius: 1.35rem;
        padding: 1.25rem;
    }

    .projecten-v6 .design-gallery-grid {
        align-items: start;
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .projecten-v6 .design-gallery-grid.is-justified {
        display: flex;
        flex-wrap: wrap;
    }

    .projecten-v6 .design-gallery-item {
        background: #f5f7fb;
        border: 1px solid color-mix(in srgb, var(--ca8-public-navy) 9%, transparent);
        border-radius: 1.15rem;
    }

    .projecten-v6 .gallery-lightbox-link { --ca8-gallery-focus: var(--ca8-public-navy); }

    .projecten-v6 .design-gallery-item:first-child {
        grid-column: span 2;
    }

    .projecten-v6 .design-gallery-grid.is-justified .design-gallery-item {
        flex: 0 0 auto;
    }

    .projecten-v6 .design-gallery-grid.is-justified .design-gallery-item:first-child {
        grid-column: auto;
    }

    .projecten-v6 .design-gallery-image {
        display: block;
        height: auto;
        transition: transform .22s ease;
        width: 100%;
    }

    .projecten-v6 .design-gallery-grid.is-justified .design-gallery-image {
        height: 100%;
        object-fit: cover;
    }

    .projecten-v6 .design-gallery-item:hover .design-gallery-image {
        transform: scale(1.025);
    }



@keyframes designPanelIn {
        from {
            opacity: 0;
            transform: translateY(6px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (max-width: 991.98px) {
        .projecten-v6 .design-gallery-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 575.98px) {
        .projecten-v6 .design-gallery-grid {
            grid-template-columns: 1fr;
        }

        .projecten-v6 .design-gallery-item:first-child {
            grid-column: span 1;
        }
    }

    .projecten-v6 .case-cta {
        background: linear-gradient(135deg, var(--ca8-case-navy-dark) 0%, var(--ca8-case-navy) 100%);
        border-radius: 1.125rem;
        box-shadow: 0 10px 26px color-mix(in srgb, var(--ca8-public-navy) 12%, transparent);
    }

    .projecten-v6 .case-cta-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
        min-height: 6.5rem;
        padding: 1.4rem 1.75rem;
    }

    .projecten-v6 .case-cta-copy {
        color: rgba(255, 255, 255, .72);
    }

    .projecten-v6 .case-cta .btn {
        flex: 0 0 auto;
        padding: .6rem 1rem;
        border-radius: .6rem;
        font-weight: 600;
    }

    .projecten-v6 .portfolio-personal {
        background: var(--ca8-case-surface);
        border: 1px solid color-mix(in srgb, var(--ca8-public-navy) 10%, transparent);
        border-radius: 1.5rem;
        box-shadow: 0 12px 30px color-mix(in srgb, var(--ca8-public-navy) 8%, transparent);
        overflow: hidden;
    }

    .projecten-v6 .portfolio-personal-image {
        height: 100%;
        min-height: 330px;
        object-fit: cover;
        width: 100%;
    }

    .projecten-v6 .portfolio-personal-copy {
        padding: clamp(1.5rem, 3vw, 2.25rem);
    }

    .projecten-v6 .portfolio-personal-copy p {
        color: var(--ca8-case-muted);
        line-height: 1.55;
        margin-bottom: .75rem;
    }

    .projecten-v6 .portfolio-personal-list {
        display: grid;
        gap: .5rem;
        list-style: none;
        margin: 1rem 0;
        padding: 0;
    }

    .projecten-v6 .portfolio-personal-list li {
        align-items: center;
        color: var(--ca8-case-ink);
        display: flex;
        font-weight: 600;
        gap: .65rem;
    }

    .projecten-v6 .portfolio-personal-list i {
        color: var(--ca8-case-navy);
        flex: 0 0 auto;
    }

    @media (max-width: 767.98px) {
        .projecten-v6 .case-cta-inner {
            align-items: flex-start;
            flex-direction: column;
            min-height: 0;
        }

        .projecten-v6 .portfolio-personal-image {
            min-height: 260px;
        }
    }



    .projecten-v6 .portfolio-hero .portfolio-hero-text {
        color: var(--ca8-case-muted);
        max-width: 720px;
    }

    .projecten-v6 .portfolio-hero .portfolio-hero-pill {
        background-color: color-mix(in srgb, var(--ca8-public-navy) 10%, transparent);
        color: var(--ca8-case-navy);
    }

    .projecten-v6 .portfolio-hero-image {
        aspect-ratio: 16 / 10;
        object-fit: cover;
        width: 100%;
        min-height: 100%;
    }

    .projecten-v6 .portfolio-offer-card {
        align-items: center;
        background: var(--ca8-case-surface);
        border: 1px solid color-mix(in srgb, var(--ca8-public-navy) 10%, transparent);
        border-radius: 1.1rem;
        display: grid;
        gap: 1rem;
        grid-template-columns: 124px minmax(0, 1fr);
        height: 100%;
        min-height: 166px;
        padding: 1.25rem;
    }

    .projecten-v6 .portfolio-offer-image {
        background: var(--ca8-case-navy-soft);
        border-radius: .9rem;
        display: grid;
        height: 132px;
        overflow: hidden;
        place-items: center;
        width: 100%;
    }

    .projecten-v6 .portfolio-offer-image img {
        height: 100%;
        object-fit: contain;
        padding: .25rem;
        width: 100%;
    }

    .projecten-v6 .portfolio-offer-card p {
        color: var(--ca8-case-muted);
        line-height: 1.5;
    }

    @media (max-width: 1199.98px) {
        .projecten-v6 .portfolio-offer-card {
            grid-template-columns: 150px minmax(0, 1fr);
        }
    }

    @media (max-width: 575.98px) {
        .projecten-v6 .portfolio-offer-card {
            gap: .8rem;
            grid-template-columns: 96px minmax(0, 1fr);
        }

        .projecten-v6 .portfolio-offer-image {
            height: 104px;
        }
    }

    .projecten-v6 .portfolio-card {
        transition: transform .18s ease, box-shadow .18s ease;
    }

    .projecten-v6 .portfolio-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 48px color-mix(in srgb, var(--ca8-public-navy) 16%, transparent);
    }

    .projecten-v6 .portfolio-card-link:focus-visible {
        outline: none;
    }

    .projecten-v6 .portfolio-card-link:focus-visible .portfolio-card {
        outline: 3px solid var(--ca8-red);
        outline-offset: 4px;
    }

    .projecten-v6 .portfolio-card-image {
        transition: transform .22s ease;
    }

    .projecten-v6 .portfolio-card:hover .portfolio-card-image {
        transform: scale(1.025);
    }

    .projecten-v6 .portfolio-card-placeholder {
        aspect-ratio: 16 / 10;
        background: linear-gradient(135deg, var(--ca8-case-navy-soft) 0%, #ffffff 100%);
        color: var(--ca8-case-muted);
    }

    .projecten-v6 .instruction-card h3 {
        color: var(--ca8-case-ink);
        font-size: var(--ca8-text-card);
        font-weight: var(--ca8-weight-heading);
        line-height: var(--ca8-leading-card);
        letter-spacing: -.025em;
    }

    .projecten-v6 .instruction-card {
        background: #ffffff;
        border: 1px solid color-mix(in srgb, var(--ca8-public-navy) 10%, transparent);
        border-radius: 1.35rem;
        box-shadow: 0 14px 36px color-mix(in srgb, var(--ca8-public-navy) 9%, transparent);
        overflow: hidden;
    }

    .projecten-v6 .instruction-image {
        aspect-ratio: 4 / 3;
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .projecten-v6 .instruction-icon {
        width: 3rem;
        height: 3rem;
        border-radius: 1rem;
        background: color-mix(in srgb, var(--ca8-public-navy) 10%, transparent);
        color: var(--ca8-case-navy);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
    }

    .projecten-v6 .instruction-download {
        color: #ffffff;
        background: linear-gradient(135deg, var(--ca8-public-navy-dark) 0%, var(--ca8-case-navy) 100%);
        border: 0;
        border-radius: 999px;
        font-weight: 700;
        padding: .7rem 1rem;
    }

    .projecten-v6 .instruction-download:hover {
        color: #ffffff;
        background: linear-gradient(135deg, var(--ca8-case-navy) 0%, var(--ca8-case-navy-dark) 100%);
    }

    @media (prefers-reduced-motion: reduce) {
        .projecten-v6 .design-panel { animation: none; }

        .projecten-v6 .design-switch-button,
        .projecten-v6 .design-gallery-image,
        .projecten-v6 .portfolio-card,
        .projecten-v6 .portfolio-card-image { transition: none; }

        .projecten-v6 .design-gallery-item:hover .design-gallery-image,
        .projecten-v6 .portfolio-card:hover,
        .projecten-v6 .portfolio-card:hover .portfolio-card-image { transform: none; }
    }