/* Aanpak-blok — achtergrond Figma-beige, max 1520px binnen .boxed */
.approach {
    overflow: hidden;
}

.approach .boxed {
    max-width: 1520px;
    margin-left: auto;
    margin-right: auto;
}

.approach__header {
    text-align: center;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}

@media (max-width: 782px) {
    .approach__header {
        margin-bottom: clamp(28px, 6vw, 40px);
    }
}

.approach__label {
    display: inline-block;
}

.approach__title {
    font-size: 40px;
    line-height: 48px;
    margin-top: 0;
    margin-bottom: 16px;
}

.approach__subtitle {
    margin: 0;
    color: rgba(56, 56, 56, 0.75);
    font-family: DM-400, Inter, sans-serif;
    font-size: 18px;
    line-height: 24px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Waaier — container op ouder zodat cqw niet circulair is op .approach__fan-inner */
.approach__fan {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(56px, 9vw, 70px);
    padding: 0 clamp(12px, 4vw, 40px);
    container-type: inline-size;
    container-name: approach-fan;
}

.approach__fan-inner {
    position: relative;
    width: min(100%, 720px);
    /* ~42% van inner ≈ iets minder dan 42% van fan door padding; midden max 280px, ratio 3/4 */
    min-height: clamp(280px, 58vw, 392px);
    min-height: clamp(260px, calc(min(42cqw, 280px) * 4 / 3 + 20px), 400px);
}

.approach__fan-card {
    position: absolute;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(31, 22, 16, 0.12);
    background: var(--color-beige-light, #ede4db);
}

.approach__fan-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    vertical-align: middle;
}

/* Midden: onderkant op één lijn, rechtop */
.approach__fan-card--center {
    left: 50%;
    bottom: 0;
    top: auto;
    transform: translateX(-50%);
    width: 42%;
    max-width: 280px;
    aspect-ratio: 3 / 4;
    z-index: 3;
}

/* Links: iets hoger dan midden, scharnier rechtsonder */
.approach__fan-card--left {
    right: 50%;
    bottom: clamp(28px, 5vw, 52px);
    top: auto;
    left: auto;
    margin-right: clamp(-40px, -4vw, -22px);
    width: 35%;
    max-width: 220px;
    aspect-ratio: 3 / 4;
    z-index: 1;
    transform-origin: 100% 100%;
    opacity: 0;
    transform: translateX(92px) translateY(-14px) rotate(6deg) scale(0.94);
    will-change: transform, opacity;
}

/* Rechts: iets hoger dan midden, scharnier linksonder */
.approach__fan-card--right {
    left: 50%;
    bottom: clamp(28px, 5vw, 52px);
    top: auto;
    right: auto;
    margin-left: clamp(-40px, -4vw, -22px);
    width: 35%;
    max-width: 220px;
    aspect-ratio: 3 / 4;
    z-index: 2;
    transform-origin: 0% 100%;
    opacity: 0;
    transform: translateX(-92px) translateY(-14px) rotate(-6deg) scale(0.94);
    will-change: transform, opacity;
}

.approach__fan--visible .approach__fan-card--left {
    animation: approach-fan-left 1.15s cubic-bezier(0.2, 0.85, 0.25, 1) forwards;
}

.approach__fan--visible .approach__fan-card--right {
    animation: approach-fan-right 1.15s cubic-bezier(0.2, 0.85, 0.25, 1) 0.1s forwards;
}

@keyframes approach-fan-left {
    0% {
        opacity: 0;
        transform: translateX(92px) translateY(-14px) rotate(6deg) scale(0.94);
    }
    100% {
        opacity: 1;
        transform: translateX(-74px) translateY(0) rotate(-5deg) scale(1);
    }
}

@keyframes approach-fan-right {
    0% {
        opacity: 0;
        transform: translateX(-92px) translateY(-14px) rotate(-6deg) scale(0.94);
    }
    100% {
        opacity: 1;
        transform: translateX(74px) translateY(0) rotate(5deg) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .approach__fan-card--left,
    .approach__fan-card--right {
        animation: none !important;
        opacity: 1 !important;
    }

    .approach__fan-card--left {
        transform: translateX(-74px) translateY(0) rotate(-5deg) scale(1) !important;
    }

    .approach__fan-card--right {
        transform: translateX(74px) translateY(0) rotate(5deg) scale(1) !important;
    }
}

@media (prefers-reduced-motion: reduce) and (max-width: 600px) {
    .approach__fan-card--left {
        transform: translateX(-42px) translateY(0) rotate(-4deg) scale(1) !important;
    }

    .approach__fan-card--right {
        transform: translateX(42px) translateY(0) rotate(4deg) scale(1) !important;
    }
}

@media (max-width: 600px) {
    .approach__fan-inner {
        min-height: clamp(240px, 62vw, 400px);
        min-height: clamp(220px, calc(44cqw * 4 / 3 + 20px), 420px);
    }

    .approach__fan-card--center {
        width: 44%;
        max-width: none;
    }

    .approach__fan-card--left {
        margin-right: -28px;
        width: 36%;
        max-width: none;
        bottom: clamp(22px, 4vw, 40px);
        transform: translateX(56px) translateY(-10px) rotate(5deg) scale(0.94);
    }

    .approach__fan-card--right {
        margin-left: -28px;
        width: 36%;
        max-width: none;
        bottom: clamp(22px, 4vw, 40px);
        transform: translateX(-56px) translateY(-10px) rotate(-5deg) scale(0.94);
    }

    .approach__fan--visible .approach__fan-card--left {
        animation-name: approach-fan-left-sm;
    }

    .approach__fan--visible .approach__fan-card--right {
        animation-name: approach-fan-right-sm;
    }
}

@keyframes approach-fan-left-sm {
    0% {
        opacity: 0;
        transform: translateX(56px) translateY(-10px) rotate(5deg) scale(0.94);
    }
    100% {
        opacity: 1;
        transform: translateX(-42px) translateY(0) rotate(-4deg) scale(1);
    }
}

@keyframes approach-fan-right-sm {
    0% {
        opacity: 0;
        transform: translateX(-56px) translateY(-10px) rotate(-5deg) scale(0.94);
    }
    100% {
        opacity: 1;
        transform: translateX(42px) translateY(0) rotate(4deg) scale(1);
    }
}

/* Drie kolommen — gecentreerd */
.approach__columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(32px, 5vw, 64px);
    margin-bottom: clamp(40px, 6vw, 64px);
    text-align: center;
}

@media (max-width: 900px) {
    .approach__columns {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
}

.approach__column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.approach__column-icon {
    margin-bottom: 16px;
    line-height: 0;
}

.approach__column-icon img {
    width: auto;
    height: 36px;
    max-width: 40px;
    object-fit: contain;
}

.approach__column-title {
    font-size: 18px;
    line-height: 24px;
    color: var(--color-brown-darkest, #1f1610);
    margin: 0 0 14px;
    letter-spacing: 0;
}

.approach__column-body {
    font-family: DM-400, Inter, sans-serif;
    font-size: 18px;
    line-height: 24px;
    color: var(--color-gray-darkest, #383838cc);
    text-align: center;
    width: 100%;
}

.approach__column-body ul {
    margin: 0 auto;
    padding-left: 0;
    list-style: disc;
    list-style-position: inside;
    display: inline-block;
    text-align: center;
    max-width: 100%;
}

.approach__column-body li {
    margin-bottom: 8px;
}

.approach__column-body li:last-child {
    margin-bottom: 0;
}

.approach__column-body p {
    margin: 0 0 8px;
}

/* CTA */
.approach__cta {
    display: flex;
    justify-content: center;
}