/* =========================================================
   TK WHY US v1.0
   ========================================================= */

.tk-why {
    position: relative;

    padding: 56px 0;

    background: #f7f8f5;
}


/* =========================================================
   WIDE CONTENT
   ========================================================= */

.tk-why > .tk-container {
    width: calc(100% - 80px);
    max-width: 1560px;

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   LAYOUT
   ========================================================= */

.tk-why__layout {
    display: grid;

    grid-template-columns: minmax(360px, .85fr) minmax(0, 1.15fr);

    gap: 56px;

    align-items: center;
}


/* =========================================================
   INTRO
   ========================================================= */

.tk-why__intro {
    max-width: 520px;
}

.tk-why__eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    color: #9a1f20;

    font-size: 12px;
    line-height: 1.3;
    font-weight: 800;

    letter-spacing: .12em;
}

.tk-why__intro h2 {
    margin: 0;

    color: #153d34;

    font-size: clamp(34px, 3.4vw, 48px);
    line-height: 1.08;
    font-weight: 800;

    letter-spacing: -.035em;
}

.tk-why__intro h2 span {
    display: block;

    color: #153d34;
}

.tk-why__intro > p {
    max-width: 500px;

    margin: 16px 0 0;

    color: #68746f;

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   CTA
   ========================================================= */

.tk-why__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: 22px;
    padding: 13px 21px;

    border-radius: 7px;

    background: #9a1f20;
    color: #ffffff;

    font-size: 14px;
    font-weight: 750;

    text-decoration: none;

    transition:
        background .2s ease,
        transform .2s ease;
}

.tk-why__cta:hover {
    background: #7f1819;
    color: #ffffff;
    transform: translateY(-2px);
}


/* =========================================================
   LIST
   ========================================================= */

.tk-why__list {
    border-top: 1px solid rgba(21, 61, 52, .12);
}


/* =========================================================
   ITEM
   ========================================================= */

.tk-why-item {
    display: grid;

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

    gap: 24px;

    padding: 18px 0;

    border-bottom: 1px solid rgba(21, 61, 52, .12);
}

.tk-why-item__number {
    padding-top: 2px;

    color: rgba(21, 61, 52, .38);

    font-size: 13px;
    line-height: 1.3;
    font-weight: 800;

    letter-spacing: .08em;
}

.tk-why-item__content h3 {
    margin: 0;

    color: #153d34;

    font-size: 20px;
    line-height: 1.35;
    font-weight: 750;
}

.tk-why-item__content p {
    max-width: 650px;

    margin: 8px 0 0;

    color: #68746f;

    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
   HOVER
   ========================================================= */

.tk-why-item {
    transition: padding-left .25s ease;
}

.tk-why-item:hover {
    padding-left: 8px;
}

.tk-why-item:hover .tk-why-item__number {
    color: #9a1f20;
}


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

@media (max-width: 991px) {

    .tk-why {
        padding: 40px 0;
    }

    .tk-why__layout {
        grid-template-columns: 1fr;

        gap: 32px;
    }

    .tk-why__intro {
        max-width: 700px;
    }

}


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

@media (max-width: 575px) {

    .tk-why {
        padding: 32px 0;
    }

    .tk-why__layout {
        gap: 26px;
    }

    .tk-why__intro h2 {
        font-size: 32px;
    }

    .tk-why__intro > p {
        font-size: 14px;
    }

    .tk-why-item {
        grid-template-columns: 42px minmax(0, 1fr);

        gap: 14px;

        padding: 16px 0;
    }

    .tk-why-item__content h3 {
        font-size: 18px;
    }

    .tk-why-item__content p {
        font-size: 13px;
    }

}