/* =========================================================
ELEMENTOR PROTECTION
========================================================= */

.dis-why-v3,
.dis-why-v3 *,
.dis-why-v3 *::before,
.dis-why-v3 *::after {
    box-sizing: border-box;
}

.dis-why-v3 {

    --dis-dark: #22282c;
    --dis-dark-2: #171c1f;
    --dis-gold: #d1a34e;
    --dis-gold-light: #e2b75f;
    --dis-bg: #f5f2ec;
    --dis-card: #fbfaf7;
    --dis-text: #242a2e;
    --dis-body: #60666a;

    position: relative;

    width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #f5f2ec;

    font-family: "Montserrat", Arial, sans-serif;

    color: #242a2e;
}


/* =========================================================
FORCE FONT AWESOME
========================================================= */

.dis-why-v3 .fa-solid,
.dis-why-v3 .fas {

    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-variant: normal;

    font-weight: 900;

    line-height: 1;

    text-rendering: auto;

    -webkit-font-smoothing: antialiased;
}


/* =========================================================
SUBTLE TOP LINE
========================================================= */

.dis-why-v3::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background: rgba(34, 40, 44, 0.12);
}


/* =========================================================
1400PX CONTAINER
========================================================= */

.dis-why-v3__container {

    position: relative;

    width: calc(100% - 64px);
    max-width: 1400px;

    margin: 0 auto;

    padding: 105px 0 115px;
}


/* =========================================================
HEADER
========================================================= */

.dis-why-v3__header {

    width: 100%;

    margin: 0 0 58px;
    padding: 0 0 31px;

    border-bottom: 1px solid rgba(34, 40, 44, 0.17);
}


/* ACCENT */

.dis-why-v3__heading-accent {

    display: flex;

    align-items: center;

    gap: 9px;

    margin: 0 0 21px;
    padding: 0;
}

.dis-why-v3__line {

    display: block;

    width: 84px;
    height: 2px;

    background: #d1a34e;
}

.dis-why-v3__line--short {

    width: 29px;
}

.dis-why-v3__diamond {

    display: block;

    width: 8px;
    height: 8px;

    border: 1px solid #d1a34e;

    transform: rotate(45deg);
}


/* HEADING ROW */

.dis-why-v3__heading-row {

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;

    width: 100%;
}


/* H2 */

.dis-why-v3 .dis-why-v3__title,
.dis-why-v3 h2.dis-why-v3__title {

    width: 100%;

    max-width: 1080px;

    margin: 0;
    padding: 0;

    color: #242a2e;

    font-family: "Oswald", Arial, sans-serif;

    font-size: clamp(48px, 4vw, 64px);

    font-weight: 600;
    font-style: normal;

    line-height: 1.08;

    letter-spacing: -0.6px;

    text-align: left;

    text-transform: none;
    text-decoration: none;
}


/* HEADING ICON */

.dis-why-v3__heading-icon {

    flex: 0 0 68px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 68px;
    height: 68px;

    margin: 0 3px 3px 0;

    border: 1px solid rgba(205, 157, 75, 0.55);

    transform: rotate(45deg);
}

.dis-why-v3__heading-icon i {

    color: #c89643;

    font-size: 24px;

    transform: rotate(-45deg);
}


/* =========================================================
FEATURE BLOCK
========================================================= */

.dis-why-v3__feature {

    display: grid;

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

    width: 100%;

    margin: 0 0 24px;
    padding: 0;

    min-height: 510px;

    background: #22282c;

    border: 1px solid #22282c;
}


/* =========================================================
FEATURE IMAGE
========================================================= */

.dis-why-v3__feature-image {

    position: relative;

    width: 100%;
    min-height: 510px;

    overflow: hidden;

    background: #d9d7d2;
}

.dis-why-v3__feature-image img {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    margin: 0;
    padding: 0;

    object-fit: cover;

    /*
    Important:
    Current team image is portrait-heavy.
    This position prevents the heads from being cut awkwardly.
    */
    object-position: center 32%;

    border: 0;
    border-radius: 0;

    transform: scale(1.002);

    transition:
        transform 700ms cubic-bezier(.2,.75,.25,1);
}

.dis-why-v3__feature:hover
.dis-why-v3__feature-image img {

    transform: scale(1.025);
}


/* IMAGE SHADE */

.dis-why-v3__image-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(16, 20, 22, 0) 52%,
            rgba(16, 20, 22, 0.28) 100%
        );
}


/* CORNERS */

.dis-why-v3__image-corner {

    position: absolute;

    z-index: 4;

    width: 78px;
    height: 78px;

    pointer-events: none;
}

.dis-why-v3__image-corner--tl {

    top: 30px;
    left: 30px;

    border-top: 2px solid #d7a64f;
    border-left: 2px solid #d7a64f;
}

.dis-why-v3__image-corner--br {

    right: 30px;
    bottom: 30px;

    border-right: 2px solid #d7a64f;
    border-bottom: 2px solid #d7a64f;
}


/* SMALL IMAGE MARK */

.dis-why-v3__image-mark {

    position: absolute;

    z-index: 5;

    right: 0;
    bottom: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 78px;
    height: 78px;

    background: #d1a34e;

    color: #22282c;
}

.dis-why-v3__image-mark i {

    color: #22282c;

    font-size: 24px;
}


/* =========================================================
FEATURE CONTENT
========================================================= */

.dis-why-v3__feature-content {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    width: 100%;

    min-height: 510px;

    padding: 52px 55px 42px;

    overflow: hidden;

    background: #22282c;
}


/* GOLD VERTICAL LINE */

.dis-why-v3__feature-content::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 3px;
    height: 100%;

    background: #d1a34e;
}


/* SUBTLE LARGE SHAPE */

.dis-why-v3__feature-content::after {

    content: "";

    position: absolute;

    right: -185px;
    bottom: -235px;

    width: 470px;
    height: 470px;

    border: 1px solid rgba(216, 171, 91, 0.11);

    border-radius: 50%;

    pointer-events: none;
}


/* TOP */

.dis-why-v3__feature-top {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;

    width: 100%;

    margin: 0 0 45px;
}


/* NUMBER */

.dis-why-v3__number {

    color: #d7aa59;

    font-family: "Oswald", Arial, sans-serif;

    font-size: 16px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: 2px;
}


/* FEATURE ICON */

.dis-why-v3__feature-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 61px;
    height: 61px;

    border: 1px solid rgba(217, 173, 94, 0.48);

    color: #e0b35e;
}

.dis-why-v3__feature-icon i {

    color: #e0b35e;

    font-size: 21px;
}


/* FEATURE COPY */

.dis-why-v3__feature-copy {

    position: relative;

    z-index: 2;

    width: 100%;

    margin: auto 0;
}


/* FEATURE TITLE */

.dis-why-v3 .dis-why-v3__feature-title,
.dis-why-v3 h3.dis-why-v3__feature-title {

    width: 100%;

    margin: 0 0 19px;
    padding: 0;

    color: #ffffff;

    font-family: "Oswald", Arial, sans-serif;

    font-size: 38px;

    font-weight: 500;

    line-height: 1.15;

    letter-spacing: -0.25px;

    text-align: left;

    text-transform: none;
    text-decoration: none;
}


/* FEATURE BODY */

.dis-why-v3 .dis-why-v3__feature-text,
.dis-why-v3 p.dis-why-v3__feature-text {

    width: 100%;

    margin: 0;
    padding: 0;

    color: rgba(255,255,255,0.79);

    font-family: "Montserrat", Arial, sans-serif;

    font-size: 17px;

    font-weight: 400;

    line-height: 1.75;

    letter-spacing: 0;

    text-align: left;

    text-transform: none;
}


/* BOTTOM DECORATION */

.dis-why-v3__feature-bottom {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 8px;

    width: 100%;

    margin: 40px 0 0;
}

.dis-why-v3__feature-bottom span {

    display: block;

    height: 1px;

    background: rgba(219, 174, 95, 0.55);
}

.dis-why-v3__feature-bottom span:nth-child(1) {

    width: 60px;
}

.dis-why-v3__feature-bottom span:nth-child(2) {

    width: 24px;
}

.dis-why-v3__feature-bottom i {

    margin-left: auto;

    color: #d7aa58;

    font-size: 11px;
}


/* =========================================================
BOTTOM GRID
========================================================= */

.dis-why-v3__grid {

    display: grid;

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

    gap: 24px;

    width: 100%;

    margin: 0;
    padding: 0;
}


/* =========================================================
CARD
========================================================= */

.dis-why-v3__card {

    position: relative;

    display: flex;

    flex-direction: column;

    width: 100%;

    min-height: 330px;

    margin: 0;

    padding: 34px 36px 37px;

    overflow: hidden;

    background: #fbfaf7;

    border: 1px solid rgba(34, 40, 44, 0.14);

    transition:
        transform 280ms ease,
        background-color 280ms ease,
        border-color 280ms ease,
        box-shadow 280ms ease;
}


/* CARD TOP */

.dis-why-v3__card-top {

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 25px;

    width: 100%;

    margin: 0 0 37px;
    padding: 0;
}


/* CARD NUMBER */

.dis-why-v3__card-number {

    color: #b98739;

    font-family: "Oswald", Arial, sans-serif;

    font-size: 16px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: 1.8px;
}


/* CARD ICON */

.dis-why-v3__card-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 54px;

    width: 54px;
    height: 54px;

    border: 1px solid rgba(202, 151, 68, 0.48);

    transition:
        background-color 260ms ease,
        border-color 260ms ease,
        transform 260ms ease;
}

.dis-why-v3__card-icon i {

    color: #c6903d;

    font-size: 19px;
}


/* COPY */

.dis-why-v3__card-copy {

    width: 100%;

    margin: 0;
    padding: 0;
}


/* CARD TITLE */

.dis-why-v3 .dis-why-v3__card-title,
.dis-why-v3 h3.dis-why-v3__card-title {

    width: 100%;

    margin: 0 0 15px;
    padding: 0;

    color: #272d31;

    font-family: "Oswald", Arial, sans-serif;

    font-size: 29px;

    font-weight: 500;

    line-height: 1.18;

    letter-spacing: -0.2px;

    text-align: left;

    text-transform: none;
    text-decoration: none;
}


/* CARD BODY */

.dis-why-v3 .dis-why-v3__card-text,
.dis-why-v3 p.dis-why-v3__card-text {

    width: 100%;

    margin: 0;
    padding: 0;

    color: #5e6569;

    font-family: "Montserrat", Arial, sans-serif;

    font-size: 17px;

    font-weight: 400;

    line-height: 1.7;

    letter-spacing: 0;

    text-align: left;

    text-transform: none;
}


/* GOLD HOVER LINE */

.dis-why-v3__card-rule {

    position: absolute;

    left: 36px;
    bottom: 0;

    width: 54px;
    height: 3px;

    background: #d1a34e;

    transition:
        width 320ms ease;
}


/* CARD HOVER */

.dis-why-v3__card:hover {

    transform: translateY(-4px);

    background: #ffffff;

    border-color: rgba(194, 142, 56, 0.38);

    box-shadow:
        0 18px 38px rgba(31, 37, 41, 0.07);
}

.dis-why-v3__card:hover
.dis-why-v3__card-icon {

    background: #22282c;

    border-color: #22282c;

    transform: translateY(-2px);
}

.dis-why-v3__card:hover
.dis-why-v3__card-icon i {

    color: #deb15b;
}

.dis-why-v3__card:hover
.dis-why-v3__card-rule {

    width: calc(100% - 72px);
}


/* =========================================================
1200PX
========================================================= */

@media (max-width: 1200px) {

    .dis-why-v3__container {

        width: calc(100% - 48px);

        padding: 90px 0 100px;
    }

    .dis-why-v3__feature {

        grid-template-columns:
            minmax(0, 0.88fr)
            minmax(0, 1.12fr);
    }

    .dis-why-v3__feature-content {

        padding:
            44px
            42px
            38px;
    }

}


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

@media (max-width: 900px) {

    .dis-why-v3__container {

        width: calc(100% - 40px);

        padding: 78px 0 85px;
    }

    .dis-why-v3__heading-icon {

        display: none;
    }

    .dis-why-v3 .dis-why-v3__title,
    .dis-why-v3 h2.dis-why-v3__title {

        font-size: 49px;
    }

    .dis-why-v3__feature {

        grid-template-columns: 1fr;
    }

    .dis-why-v3__feature-image {

        min-height: 500px;
    }

    .dis-why-v3__feature-content {

        min-height: auto;

        padding:
            44px
            40px
            40px;
    }

    .dis-why-v3__grid {

        grid-template-columns: 1fr;
    }

    .dis-why-v3__card {

        min-height: auto;
    }

}


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

@media (max-width: 767px) {

    .dis-why-v3__container {

        width: calc(100% - 36px);

        padding: 68px 0 72px;
    }

    .dis-why-v3__header {

        margin-bottom: 38px;

        padding-bottom: 25px;
    }

    .dis-why-v3__heading-accent {

        margin-bottom: 17px;
    }

    .dis-why-v3__line {

        width: 55px;
    }

    .dis-why-v3__line--short {

        width: 18px;
    }

    .dis-why-v3 .dis-why-v3__title,
    .dis-why-v3 h2.dis-why-v3__title {

        font-size: 40px;

        line-height: 1.08;

        letter-spacing: -0.3px;
    }


    /* IMAGE */

    .dis-why-v3__feature-image {

        min-height: 420px;
    }

    .dis-why-v3__feature-image img {

        object-position: center 30%;
    }

    .dis-why-v3__image-corner {

        width: 55px;
        height: 55px;
    }

    .dis-why-v3__image-corner--tl {

        top: 18px;
        left: 18px;
    }

    .dis-why-v3__image-corner--br {

        right: 18px;
        bottom: 18px;
    }

    .dis-why-v3__image-mark {

        width: 60px;
        height: 60px;
    }

    .dis-why-v3__image-mark i {

        font-size: 19px;
    }


    /* FEATURE */

    .dis-why-v3__feature-content {

        padding:
            32px
            25px
            31px;
    }

    .dis-why-v3__feature-top {

        margin-bottom: 29px;
    }

    .dis-why-v3__feature-icon {

        width: 52px;
        height: 52px;
    }

    .dis-why-v3 .dis-why-v3__feature-title,
    .dis-why-v3 h3.dis-why-v3__feature-title {

        font-size: 30px;

        line-height: 1.16;
    }

    .dis-why-v3 .dis-why-v3__feature-text,
    .dis-why-v3 p.dis-why-v3__feature-text {

        font-size: 16.5px;

        line-height: 1.7;
    }


    /* GRID */

    .dis-why-v3__grid {

        gap: 16px;
    }

    .dis-why-v3__card {

        min-height: auto;

        padding:
            27px
            24px
            31px;
    }

    .dis-why-v3__card-top {

        margin-bottom: 28px;
    }

    .dis-why-v3__card-icon {

        flex-basis: 49px;

        width: 49px;
        height: 49px;
    }

    .dis-why-v3__card-icon i {

        font-size: 17px;
    }

    .dis-why-v3 .dis-why-v3__card-title,
    .dis-why-v3 h3.dis-why-v3__card-title {

        font-size: 26px;

        line-height: 1.2;
    }

    .dis-why-v3 .dis-why-v3__card-text,
    .dis-why-v3 p.dis-why-v3__card-text {

        font-size: 16.5px;

        line-height: 1.68;
    }

    .dis-why-v3__card-rule {

        left: 24px;
    }

}


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

@media (max-width: 420px) {

    .dis-why-v3__container {

        width: calc(100% - 30px);
    }

    .dis-why-v3 .dis-why-v3__title,
    .dis-why-v3 h2.dis-why-v3__title {

        font-size: 36px;
    }

    .dis-why-v3__feature-image {

        min-height: 370px;
    }

    .dis-why-v3 .dis-why-v3__feature-title,
    .dis-why-v3 h3.dis-why-v3__feature-title {

        font-size: 28px;
    }

    .dis-why-v3 .dis-why-v3__card-title,
    .dis-why-v3 h3.dis-why-v3__card-title {

        font-size: 25px;
    }

    .dis-why-v3 .dis-why-v3__feature-text,
    .dis-why-v3 p.dis-why-v3__feature-text,
    .dis-why-v3 .dis-why-v3__card-text,
    .dis-why-v3 p.dis-why-v3__card-text {

        font-size: 16px;
    }

}


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

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

    .dis-why-v3__feature-image img,
    .dis-why-v3__card,
    .dis-why-v3__card-icon,
    .dis-why-v3__card-rule {

        transition: none;
    }

}




/* Client feedback 01/02: clean heading breaks and four equally light cards. */
.dis-why-v3 .dis-why-v3__heading-row { gap: 18px; }
.dis-why-v3 .dis-why-v3__title-treatment { display: inline; white-space: normal; }
@media (min-width: 1120px) {
  .dis-why-v3 .dis-why-v3__title,
  .dis-why-v3 h2.dis-why-v3__title {
    max-width: none;
    font-size: clamp(43px, 3.35vw, 52px);
    white-space: nowrap;
    letter-spacing: -0.8px;
  }
}
@media (min-width: 768px) and (max-width: 1119px) {
  .dis-why-v3 .dis-why-v3__title-treatment { display: block; white-space: nowrap; }
  .dis-why-v3 .dis-why-v3__title,
  .dis-why-v3 h2.dis-why-v3__title { font-size: clamp(38px, 4.4vw, 49px); }
}
@media (max-width: 767px) {
  .dis-why-v3 .dis-why-v3__title-treatment { display: block; white-space: nowrap; }
  .dis-why-v3 .dis-why-v3__title,
  .dis-why-v3 h2.dis-why-v3__title { font-size: clamp(30px, 7.7vw, 40px); letter-spacing: -0.8px; }
}
@media (max-width: 359px) {
  .dis-why-v3 .dis-why-v3__title-treatment { white-space: normal; }
  .dis-why-v3 .dis-why-v3__title,
  .dis-why-v3 h2.dis-why-v3__title { font-size: 32px; }
}
.dis-why-v3 .dis-why-v3__grid > .dis-why-v3__card {
  background: #fbfaf7;
  border-color: rgba(34,40,44,.14);
}
.dis-why-v3 .dis-why-v3__grid > .dis-why-v3__card:hover {
  background: #fff;
  border-color: rgba(194,142,56,.38);
}
.dis-why-v3 .dis-why-v3__grid .dis-why-v3__card-title { color: #272d31; }
.dis-why-v3 .dis-why-v3__grid .dis-why-v3__card-text { color: #5e6569; }