.kf-customer {
    --max-width: 1280px;
    --padding-x: 40px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.kf-customer-header-container {
    width: 100%;
    
    background-color: #1A1A1A;

    border-radius: 0 0 60px 60px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.kf-customer-header {
    color: #fff;

    padding: clamp(30px, 9.28px + 5.52vw, 80px);
    gap: 0px clamp(30px, -74.66px + 13.65vw, 100px);


    width: 100%;
    max-width: calc(var(--max-width) + (var(--padding-x) * 2));
    padding-right: var(--padding-x);
    padding-left: var(--padding-x);

    grid-template-columns: clamp(375px, 225.49px + 19.49vw, 475px) 1fr;

    display: grid;
    grid-template-areas:
        "logo image"
        "title image"
        "subtitle image";
}

.kf-customer-logo {
    grid-area: logo;

    width: var(--width);

    padding-bottom: clamp(20px, -3.92px + 3.12vw, 36px);
}

.kf-customer-header .kf-customer-title {
    grid-area: title;
    color: #fff;
    font-weight: 500;
    font-size: clamp(clamp(clamp(30px, 0.05vw + 29.81px, 30.15px), 0.74vw + 25.11px, 32.39px), 5.17vw + -18.15px, 48px);

    line-height: 100%;

    text-wrap-style: pretty;

    margin-bottom: 16px;
}

.kf-customer-subtitle {
    grid-area: subtitle;
}

.kf-customer-header .kf-customer-subtitle,
.kf-customer-header .kf-customer-subtitle p {
    color: #fff;
    font-family: NT Bau, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: var(--wp--preset--font-size--default);
    line-height: 130%;

    text-wrap-style: pretty;
}

.kf-customer-header .kf-customer-subtitle p:first-child {
    margin-top: 0;
}

.kf-customer-video,
.kf-customer-image {
    grid-area: image;

    display: flex;
    align-items: center;
    justify-content: center;
}

.kf-customer-image img {
    border-radius: 20px;
}

.kf-customer-video .kf-customer-video__link {
    position: relative;

    transition: all 0.3s ease;
}

.kf-customer-video .kf-customer-video__link {
    border-radius: 20px;
    overflow: hidden;

    box-shadow: 0px 10px 40px 0px #19191940;
    border: 1px solid;
    border-image-source: linear-gradient(107.57deg, rgba(25, 25, 25, 0.2) 0.03%, rgba(25, 25, 25, 0) 100.03%);

    transition: all 0.3s ease;
}

.kf-customer-video .kf-customer-video__link img {

    transition: all 0.3s ease;
}

.kf-customer-video .kf-customer-video__link:hover img {
    transform: scale(1.05);
}

.kf-customer-video .kf-customer-video__link::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url('data:image/svg+xml,<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" fill="%235F61FF"/><path d="M50 0C40.111 0 30.444 2.93245 22.2215 8.42652C13.9991 13.9206 7.59043 21.7295 3.80605 30.8658C0.0216642 40.0021 -0.968502 50.0555 0.960758 59.7545C2.89002 69.4536 7.65206 78.3627 14.6447 85.3553C21.6373 92.3479 30.5465 97.11 40.2455 99.0393C49.9445 100.969 59.9979 99.9783 69.1342 96.194C78.2705 92.4096 86.0794 86.001 91.5735 77.7785C97.0676 69.556 100 59.8891 100 50C100 43.4339 98.7067 36.9321 96.194 30.8658C93.6812 24.7995 89.9983 19.2876 85.3553 14.6447C80.7124 10.0017 75.2005 6.31876 69.1342 3.80602C63.0679 1.29329 56.5661 0 50 0ZM40 72.5V27.5L70 50L40 72.5Z" fill="white"/></svg>') no-repeat center / contain;
    width: clamp(50px, 37.57px + 3.31vw, 80px);
    aspect-ratio: 1;
    background-size: 100%;
}

.kf-customer-summary-container,
.kf-customer-main {
    width: 100%;
    max-width: calc(var(--max-width) + (var(--padding-x) * 2));
    padding-right: var(--padding-x);
    padding-left: var(--padding-x);
}

.kf-customer-summary.kf-customer-summary h1,
.kf-customer-summary.kf-customer-summary h2,
.kf-customer-summary.kf-customer-summary h3 {
    font-weight: 500;
    font-size: 32px;
    line-height: 36px;
    vertical-align: middle;

    margin-top: clamp(clamp(clamp(30px, 0.23vw + 29.13px, 30.7px), 1.55vw + 20.22px, 35.36px), 4.19vw + -5.57px, 48px);
    margin-bottom: clamp(clamp(clamp(12px, 0.05vw + 11.81px, 12.16px), 0.34vw + 9.83px, 13.19px), 0.93vw + 4.09px, 16px);
}

.kf-customer-summary-container {
    --gap: clamp(60px, 30.10px + 3.90vw, 80px);
    display: grid;
    align-items: center;
    grid-template-columns: clamp(214px, -176.23px + 50.88vw, 475px) 1fr;
    gap: 10px var(--gap); 
    width: 100%;

    margin-top: clamp(30px, -14.85px + 5.85vw, 60px);
    margin-bottom: clamp(40px, -19.81px + 7.80vw, 80px);
}

.kf-customer-summary-container > * {
    position: relative;
}

.kf-customer-summary-container > *:not(:first-child)::before {
    content: "";
    display: block;
    width: 1px;
    position: absolute;
    top: 5%;
    bottom: 0;
    left: calc(var(--gap) / -2);
    /* transform: scaleY(0.8); */
    background: url('data:image/svg+xml,<svg width="1" height="316" viewBox="0 0 1 316" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0V316" stroke="url(%23paint0_radial_1_742)"/><defs><radialGradient id="paint0_radial_1_742" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1 158) rotate(90) scale(158 0.5)"><stop stop-color="%23191919"/><stop offset="1" stop-color="%23191919" stop-opacity="0"/></radialGradient></defs></svg>') no-repeat center / cover;
}

.kf-customer-numbers {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.kf-customer-number__numbers {
    font-family: Degular;
    font-weight: 500;
    font-size: 48px;
    line-height: 100%;
    color: #5F61FF;
    margin-bottom: 2px;
}

.kf-customer-number__description {
    font-family: Degular;
    font-weight: 500;
    font-size: 24px;
    line-height: 28px;
    vertical-align: middle;
    color: #191919;
}


.kf-customer-main {
    display: grid;
    grid-template-areas: "article sidebar";
    grid-template-columns: 1fr 290px;
    gap: clamp(20px, -69.71px + 11.70vw, 80px);
}
.kf-customer-article {
    grid-area: article;
}
.kf-customer-sidebar {
    grid-area: sidebar;
}

.kf-customer-article.kf-customer-article {
    padding-left: 0;
    padding-right: 0;
}

.kf-customer-article h2 {
    font-size: var(--wp--preset--font-size--x-48);
    /* margin-top: 70px; */
    position: relative;
}

.kf-customer-article h2::after {
    content: "";
    display: block;
    width: calc(100% - 7em);
    height: 1px;
    position: absolute;
    top: 50%;
    right: 0;
    background: url('data:image/svg+xml,<svg width="588" height="1" viewBox="0 0 588 1" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0.5H588" stroke="url(%23paint0_linear_1_912)"/><defs><linearGradient id="paint0_linear_1_912" x1="588" y1="0.312248" x2="7.44764e-10" y2="0.312246" gradientUnits="userSpaceOnUse"><stop stop-color="%23191919"/><stop offset="1" stop-color="%23191919" stop-opacity="0"/></linearGradient></defs></svg>') no-repeat center / cover;
    background-position: left;
}

.kf-customer-article h2:first-child {
    margin-top: 0;
}

.kf-customer-article h3 {
    font-size: var(--wp--preset--font-size--x-32);

    /* margin-top: 40px;
    margin-bottom: 20px; */
}

.kf-customer-sidebar__customer {
    background-color: #F5F5F5;
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 26px;

    color: #191919;
}

.kf-customer-sidebar__customer .kf-customer-sidebar__title.kf-customer-sidebar__title {
    font-family: Degular;
    font-weight: 500;
    font-size: 24px;
    line-height: 100%;

    margin-top: 0;
    margin-bottom: 2px;
}

.kf-customer-sidebar__customer .kf-customer-sidebar__item {
    display: grid;
    grid-template-areas: "icon title" "icon content";
    grid-template-columns: auto 1fr;
    gap: 4px 16px;
    align-items: flex-start;

    position: relative;
}

.kf-customer-sidebar__customer .kf-customer-sidebar__item .kf-customer-sidebar__icon {
    grid-area: icon;
}

.kf-customer-sidebar__customer .kf-customer-sidebar__item .kf-customer-sidebar__label {
    grid-area: title;

    font-family: Degular;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    vertical-align: middle;
}

.kf-customer-sidebar__customer .kf-customer-sidebar__item .kf-customer-sidebar__value {
    grid-area: content;

    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0%;
    vertical-align: middle;

    word-break: break-word;
}

.kf-customer-sidebar__customer .kf-customer-sidebar__item:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 0;
    right: 0;
    height: 2px;
    width: 100%;
    transform: scaleX(.9);
    background: url('data:image/svg+xml,<svg width="230" height="1" viewBox="0 0 230 1" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0.5H230" stroke="url(%23paint0_radial_1_1024)"/><defs><radialGradient id="paint0_radial_1_1024" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(115 1) rotate(90) scale(0.5 115)"><stop stop-color="%23191919"/><stop offset="1" stop-color="%23191919" stop-opacity="0"/></radialGradient></defs></svg>') no-repeat center / contain;
}

.kf-customer-sidebar-ctas {
    position: sticky;
    top: var(--header-height, 117px);
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 40px;
}

.kf-customer-sidebar-cta {
    background-color: var(--background-color, #191919);
    color: var(--text-color, #191919);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;

    aspect-ratio: 1;
}

.kf-customer-sidebar-cta > * {
    position: relative;
}

.kf-customer-sidebar-cta__bg-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.kf-customer-sidebar-ctas__title {
    font-family: Degular;
    font-weight: 500;
    font-size: 30px;
    line-height: 34px;
    text-align: center;
    margin-bottom: 0;
    text-wrap-style: balance;
}

.kf-customer-sidebar-ctas__button {
    background-color: #5F61FF;
    color: #FFFFFF;

    border-radius: 100px;
    padding-top: 15px;
    padding-right: 30px;
    padding-bottom: 15px;
    padding-left: 30px;

    font-family: Degular;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    text-align: center;

    transition: all 0.3s ease;
}

.kf-customer-sidebar-ctas__button:hover {
    background-color: #5255e8;
    color: #FFFFFF;
}




.kf-customer-footer-ctas {
    display: flex;
    flex-direction: column;
    gap: 50px;
    margin-top: 30px;
    margin-bottom: 90px;

    width: 100%;
    max-width: calc(var(--max-width) + (var(--padding-x) * 2));
    padding-right: var(--padding-x);
    padding-left: var(--padding-x);
}

.kf-customer-footer-cta {
    background-color: var(--background-color, #191919);
    color: var(--text-color, #191919);
    border-radius: 60px;
    padding: clamp(30px, 17.57px + 3.31vw, 60px) clamp(60px, 35.14px + 6.63vw, 120px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 10px;
    position: relative;
    overflow: hidden;

    min-height: 400px;
}

.kf-customer-footer-cta > * {
    position: relative;
}

.kf-customer-footer-cta__bg-image_left,
.kf-customer-footer-cta__bg-image_right {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 100%;
}

.kf-customer-footer-cta__bg-image_left {
    right: 50%;
    object-fit: none;
    object-position: left bottom;
}

.kf-customer-footer-cta__bg-image_right {
    left: 50%;
    object-fit: cover;
    mask-image: linear-gradient(to right, transparent 0%, black 30%);
}

.kf-customer-footer-ctas__title {
    font-family: Degular;
    font-weight: 500;
    font-size: clamp(clamp(clamp(40px, 0.39vw + 38.55px, 41.17px), 2.58vw + 23.7px, 48.93px), 6.98vw + -19.29px, 70px);
    line-height: 1.06;

    max-width: 510px;

    margin-top: 0;
    margin-bottom: 20px;
    text-wrap-style: balance;
}

.kf-customer-footer-ctas__button {
    background-color: #5F61FF;
    color: #FFFFFF;

    border-radius: 100px;
    padding-top: 15px;
    padding-right: 30px;
    padding-bottom: 15px;
    padding-left: 30px;

    font-family: Degular;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    text-align: center;

    transition: all 0.3s ease;
}

.kf-customer-footer-ctas__button:hover {
    background-color: #5255e8;
    color: #FFFFFF;
}


.kf-customer-related {
    background-color: #F5F5F5;
    padding: clamp(40px, 15.14px + 6.63vw, 100px) 0px;

    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.kf-customer-related__container {
    width: 100%;
    max-width: calc(var(--max-width) + (var(--padding-x) * 2));
    padding-right: var(--padding-x);
    padding-left: var(--padding-x);
}

.kf-customer-related__title {
    margin: 0;

    font-family: Degular;
    font-weight: 500;
    font-size: var(--wp--preset--font-size--x-48);
    line-height: 100%;
}

@media (max-width: 767px) {
    .kf-customer {
        --padding-x: 20px;
    }

    .kf-customer-header {
        grid-template-areas: "logo"
        "title"
        "subtitle"
        "image";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        text-align: center;
    }

    .kf-customer-logo {
        margin: 0 auto;
    }

    .kf-customer-header .kf-customer-title{
        margin: 10px 0 40px;
    }

    .kf-customer-video, 
    .kf-customer-image {
        margin-top: 30px;
    }

    .kf-customer-summary-container {
        grid-template-columns: 1fr;
    }

    .kf-customer-summary-container > *:not(:first-child)::before {
        content: "";
        position: absolute;
        top: 10px;
        bottom: auto;
        left: 0;
        right: 0;
        height: 2px;
        width: 100%;
        transform: scaleX(.9);
        background: url('data:image/svg+xml,<svg width="230" height="1" viewBox="0 0 230 1" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0.5H230" stroke="url(%23paint0_radial_1_1024)"/><defs><radialGradient id="paint0_radial_1_1024" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(115 1) rotate(90) scale(0.5 115)"><stop stop-color="%23191919"/><stop offset="1" stop-color="%23191919" stop-opacity="0"/></radialGradient></defs></svg>') no-repeat center / contain;
    }

    .kf-customer-main {
        grid-template-areas: "sidebar"
            "article";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    .kf-customer-sidebar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        
        max-width: 400px;
        margin: 0 auto;
    }

    .kf-customer-sidebar-ctas {
        position: static;
        gap: 20px;
        margin-top: 0;
    }

    .kf-customer-footer-cta {
        border-radius: 30px;
    }
}