/* Why-Collagen-Section — Figma 2001:464, 1440x956 */

.why {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 56px;
    padding: 120px var(--gutter);
    background-color: #E5F3F6;
}

/* --- header --------------------------------------------------------------- */

.why__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    flex-shrink: 0;
}


.why__eyebrow {
    padding: 5px 15px;
    flex-shrink: 0;
}

.why__eyebrow p{
    margin: 0 !important;
}

.why__title {
    width: 100%;
    color: var(--c-text);
    word-break: break-word;
}


.why__lead {
    width: 720px;
    color: var(--c-text-soft);
    word-break: break-word;
}

/* --- cards grid ----------------------------------------------------------- */

.why__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
    width: 100%;
    flex-shrink: 0;
}

.why__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;

    padding: 31px;
    border: 1px solid var(--c-line-mist);
    border-radius: 16px;
    background: var(--c-white);
}


.why__card--c1 {
    grid-column: 1;
    grid-row: 1;
}

.why__card--c2 {
    grid-column: 2;
    grid-row: 1;
}

.why__card--c3 {
    grid-column: 1;
    grid-row: 2;
}

.why__card--c4 {
    grid-column: 2;
    grid-row: 2;
}

/* --- card background: photo + white veil ---------------------------------- */

.why__media {
    position: absolute;
    inset: 0;

    border-radius: 15px;
    overflow: hidden;
    pointer-events: none;
}

.why__photo {
    position: absolute;
    max-width: none;
}

.why__photo--fill {
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: bottom;
}


.why__photo--c1 {
    left: 53.66%;
    top: -24.12%;
    width: 51.43%;
    height: 141.67%;
}

.why__photo--c3 {
    left: 53.02%;
    top: -19.85%;
    width: 47.05%;
    height: 129.6%;
}

.why__veil {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
            201.01975309747837deg,
            rgba(255, 255, 255, 0) 15.086%,
            rgb(255, 255, 255) 45.966%
    );
}

.why__veil--c2 {
    background-image: linear-gradient(
            187.37230857473043deg,
            rgba(255, 255, 255, 0) 7.1334%,
            rgb(255, 255, 255) 82.093%
    );
}

/* --- card content --------------------------------------------------------- */

.why__icon-box {
    position: relative;
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
    padding: 12px;
    border-radius: 100px;
    background: var(--c-primary-tint);
}


.why__icon {
    position: absolute;
    display: block;
}

.why__icon > img {
    width: 100%;
    height: 100%;
    max-width: none;
    position: absolute;
}

.why__icon--flame {
    inset: 0 7.81% 6.34% 7.81%;
}

.why__icon--face-smile,
.why__icon--clock {
    inset: 6.25%;
}

.why__icon--shield {
    inset: 6.25% 6.25% 3.13% 6.25%;
}

.why__card-title {
    position: relative;
    flex-shrink: 0;
    color: var(--c-text);
    white-space: nowrap;
}

.why__card-text {
    position: relative;
    width: 100%;
    color: var(--c-text-body);
    word-break: break-word;
}



.why__card {
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.why__card:hover {
    transform: translateY(var(--lift));
    border-color: var(--c-line-sky);
    box-shadow: var(--shadow-lift-soft);
}

.why__header,
.why__grid {
    max-width: var(--content-w);
    margin-inline: auto;
}

@media (max-width: 767px) {
    .why {
        gap: 40px;
        padding: 60px var(--gutter);
    }


    .why__title {
        font-size: 32px;
        line-height: 40px;
        letter-spacing: -0.64px;
    }


    .why__lead {
        width: 100%;
    }

    .why__grid {
        grid-template-columns: minmax(0, 1fr);
    }


    .why__photo--c3 {
        left: 15.29%;
        top: -37.68%;
        width: 84.71%;
        height: 115.27%;
    }

    .why__photo--c1 {
        left: 16.59%;
        top: -42.54%;
        width: 83.5%;
        height: 125.25%;
    }

    .why__veil,
    .why__veil--c2 {
        background-image: linear-gradient(
                180.65601189952326deg,
                rgba(255, 255, 255, 0) 0.4501%,
                rgb(255, 255, 255) 46.529%
        );
    }

    .why__card--c1,
    .why__card--c2,
    .why__card--c3,
    .why__card--c4 {
        grid-column: 1;
        grid-row: auto;
    }


    .why__card-title {
        white-space: normal;
    }
}