/* =========================================================
   FINAL CTA
   FULL SCREEN / FULL BLEED
========================================================= */

.kd-about-final {

    width:
        100vw;

    max-width:
        100vw;

    margin-left:
        calc(50% - 50vw);

    margin-right:
        calc(50% - 50vw);

    padding:
        0;

    background:
        #159A9C;

    color:
        #FFFFFF;

    box-sizing:
        border-box;

    overflow:
        hidden;
}


/* =========================================================
   INNER CONTAINER
========================================================= */

.kd-about-final-inner {

    width:
        100%;

    max-width:
        1320px;

    min-width:
        0;

    min-height:
        0;

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    align-items:
        center;

    gap:
        50px;

    margin:
        0 auto;

    padding:
        50px 0;

    box-sizing:
        border-box;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.kd-about-final-content {

    width:
        100%;

    max-width:
        100%;

    min-width:
        0;

    box-sizing:
        border-box;
}


/* =========================================================
   EYEBROW
========================================================= */

.kd-about-final-eyebrow {

    margin:
        0 0 13px;

    color:
        rgba(255,255,255,.76);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        11px;

    line-height:
        1.4;

    font-weight:
        750;

    letter-spacing:
        1.7px;

    text-transform:
        uppercase;

    overflow-wrap:
        break-word;
}


/* =========================================================
   TITLE
========================================================= */

.kd-about-final-title {

    width:
        100%;

    max-width:
        760px;

    margin:
        0;

    color:
        #FFFFFF;

    font-family:
        Manrope,
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            34px,
            4vw,
            50px
        );

    line-height:
        1.06;

    font-weight:
        750;

    letter-spacing:
        -1.1px;

    overflow-wrap:
        break-word;

    box-sizing:
        border-box;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.kd-about-final-text {

    width:
        100%;

    max-width:
        760px;

    margin:
        16px 0 0;

    color:
        rgba(255,255,255,.82);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        15px;

    line-height:
        1.75;

    font-weight:
        400;

    overflow-wrap:
        break-word;

    box-sizing:
        border-box;
}


/* =========================================================
   RIGHT ACTIONS
========================================================= */

.kd-about-final-actions {

    width:
        215px;

    max-width:
        100%;

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        stretch;

    gap:
        11px;

    box-sizing:
        border-box;
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.kd-about-final-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-width:
        0;

    min-height:
        54px;

    padding:
        0 22px;

    background:
        #FFFFFF;

    color:
        #14213D;

    border:
        1px solid #FFFFFF;

    border-radius:
        0;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        13px;

    font-weight:
        750;

    line-height:
        1.3;

    text-align:
        center;

    text-decoration:
        none;

    white-space:
        normal;

    overflow-wrap:
        anywhere;

    box-sizing:
        border-box;

    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


/* =========================================================
   PRIMARY BUTTON HOVER
========================================================= */

.kd-about-final-button:hover {

    background:
        #14213D;

    border-color:
        #14213D;

    color:
        #FFFFFF;

    transform:
        translateY(-2px);
}


/* =========================================================
   ARROW
========================================================= */

.kd-about-final-button span {

    display:
        inline-block;

    margin-left:
        8px;

    font-size:
        16px;

    line-height:
        1;

    transition:
        transform .2s ease;
}


.kd-about-final-button:hover span {

    transform:
        translateX(4px);
}


/* =========================================================
   SECONDARY LINK
========================================================= */

.kd-about-final-secondary {

    display:
        block;

    width:
        100%;

    max-width:
        100%;

    color:
        rgba(255,255,255,.94);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        11px;

    font-weight:
        650;

    line-height:
        1.45;

    text-align:
        center;

    text-decoration:
        none;

    overflow-wrap:
        break-word;

    transition:
        color .2s ease;
}


.kd-about-final-secondary:hover {

    color:
        #14213D;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .kd-about-final {

        width:
            100vw;

        max-width:
            100vw;

        margin-left:
            calc(50% - 50vw);

        margin-right:
            calc(50% - 50vw);
    }


    .kd-about-final-inner {

        width:
            min(
                900px,
                calc(100% - 40px)
            );

        max-width:
            900px;

        grid-template-columns:
            minmax(0,1fr);

        gap:
            28px;

        padding:
            48px 0;
    }


    .kd-about-final-title {

        font-size:
            42px;
    }


    .kd-about-final-actions {

        width:
            auto;

        max-width:
            500px;

        flex-direction:
            row;

        align-items:
            center;
    }


    .kd-about-final-button {

        width:
            auto;

        min-width:
            205px;
    }


    .kd-about-final-secondary {

        width:
            auto;

        min-width:
            170px;

        text-align:
            left;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

    .kd-about-final {

        width:
            100vw;

        max-width:
            100vw;

        margin-left:
            calc(50% - 50vw);

        margin-right:
            calc(50% - 50vw);
    }


    .kd-about-final-inner {

        width:
            calc(100% - 32px);

        max-width:
            100%;

        min-width:
            0;

        grid-template-columns:
            minmax(0,1fr);

        gap:
            25px;

        padding:
            45px 0
            48px;
    }


    .kd-about-final-eyebrow {

        margin-bottom:
            12px;

        font-size:
            10px;

        letter-spacing:
            1.6px;
    }


    .kd-about-final-title {

        width:
            100%;

        max-width:
            100%;

        font-size:
            31px;

        line-height:
            1.10;

        letter-spacing:
            -.7px;
    }


    .kd-about-final-text {

        width:
            100%;

        max-width:
            100%;

        margin-top:
            15px;

        font-size:
            14px;

        line-height:
            1.72;
    }


    .kd-about-final-actions {

        width:
            100%;

        max-width:
            100%;

        min-width:
            0;

        flex-direction:
            column;

        gap:
            11px;
    }


    .kd-about-final-button {

        display:
            flex;

        width:
            100%;

        max-width:
            100%;

        min-width:
            0;

        min-height:
            52px;

        padding:
            0 16px;

        font-size:
            13px;
    }


    .kd-about-final-secondary {

        width:
            100%;

        max-width:
            100%;

        min-width:
            0;

        text-align:
            center;

        font-size:
            11px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .kd-about-final-inner {

        width:
            calc(100% - 28px);

        padding:
            42px 0
            45px;
    }


    .kd-about-final-title {

        font-size:
            29px;
    }


    .kd-about-final-text {

        font-size:
            13px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.kd-about-final-button:focus-visible,
.kd-about-final-secondary:focus-visible {

    outline:
        3px solid
        rgba(255,255,255,.55);

    outline-offset:
        4px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .kd-about-final *,
    .kd-about-final *::before,
    .kd-about-final *::after {

        transition:
            none !important;
    }

}