/* ==========================================================
   ABOUT PAGE — SECTION 01
   ABOUT HERO
========================================================== */

.tdc-about-hero {
    position: relative;

    min-height: 680px;

    display: flex;
    align-items: center;

    padding: 85px 0;

    background:
        radial-gradient(
            circle at 82% 45%,
            rgba(242, 99, 34, 0.08),
            transparent 28%
        ),
        #f8f7f4;

    overflow: hidden;
}


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

.tdc-about-hero-container {
    position: relative;
    z-index: 2;

    width: min(90%, 1400px);

    margin: 0 auto;
}


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

.tdc-about-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(500px, 1.05fr);

    align-items: center;

    gap: 70px;
}


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

.tdc-about-hero-content {
    position: relative;
    z-index: 5;

    max-width: 650px;
}


/* ==========================================================
   LABEL
========================================================== */

.tdc-about-hero-label {
    position: relative;

    display: inline-flex;

    align-items: center;

    margin-bottom: 16px;

    padding-left: 34px;

    color: #6f6964;

    font-size: 14px;
    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


.tdc-about-hero-label::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 24px;
    height: 2px;

    background: #f26322;

    transform: translateY(-50%);
}


/* ==========================================================
   HEADING — H1
========================================================== */

.tdc-about-hero-heading {
    max-width: 650px;

    margin: 0 0 20px;

    color: #111111;

    font-size: 40px;
    line-height: 1.2;

    font-weight: 700;

    letter-spacing: -1px;
}


.tdc-about-hero-heading span {
    display: block;

    color: #f26322;
}


/* ==========================================================
   MAIN TEXT
========================================================== */

.tdc-about-hero-text {
    max-width: 600px;

    margin: 0;

    color: #6f6964;

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


/* ==========================================================
   BRAND STATEMENT
========================================================== */

.tdc-about-hero-statement {
    max-width: 610px;

    margin-top: 25px;

    padding: 17px 20px;

    display: grid;

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

    align-items: center;

    gap: 14px;

    background: #ffffff;

    border: 1px solid #e9e4de;

    border-radius: 12px;
}


/* Icon */

.tdc-about-statement-icon {
    width: 42px;
    height: 42px;

    display: flex;

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

    background: #fff0e7;

    border-radius: 50%;

    color: #f26322;

    font-size: 15px;
}


.tdc-about-hero-statement p {
    margin: 0;

    color: #625d58;

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


.tdc-about-hero-statement strong {
    color: #111111;

    font-weight: 700;
}


/* ==========================================================
   MINI NAVIGATION
========================================================== */

.tdc-about-hero-links {
    margin-top: 23px;

    display: flex;

    align-items: center;

    gap: 17px;
}


.tdc-about-hero-links > span {
    width: 1px;
    height: 17px;

    background: #d8d2cc;
}


.tdc-about-hero-links a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #111111;

    font-size: 14px;
    line-height: 1.4;

    font-weight: 700;

    text-decoration: none;

    transition: color 0.3s ease;
}


.tdc-about-hero-links a i {
    color: #f26322;

    font-size: 10px;

    transition: transform 0.3s ease;
}


.tdc-about-hero-links a:hover {
    color: #f26322;
}


.tdc-about-hero-links a:hover i {
    transform: translateY(3px);
}


/* ==========================================================
   RIGHT VISUAL
========================================================== */

.tdc-about-hero-visual {
    position: relative;

    width: 100%;
    height: 510px;

    display: flex;

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


/* ==========================================================
   ORBITS
========================================================== */

.tdc-about-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

    transform: translate(-50%, -50%);

    pointer-events: none;
}


.tdc-about-orbit-one {
    width: 430px;
    height: 430px;

    border: 1px solid rgba(17, 17, 17, 0.10);
}


.tdc-about-orbit-two {
    width: 325px;
    height: 325px;

    border: 1px dashed rgba(242, 99, 34, 0.25);
}


/* Orbit dots */

.tdc-about-orbit-one::before,
.tdc-about-orbit-two::before {
    content: "";

    position: absolute;

    border-radius: 50%;
}


.tdc-about-orbit-one::before {
    width: 9px;
    height: 9px;

    top: 45px;
    right: 62px;

    background: #f26322;
}


.tdc-about-orbit-two::before {
    width: 7px;
    height: 7px;

    bottom: 42px;
    left: 50px;

    background: #111111;
}


/* ==========================================================
   CUP
========================================================== */

.tdc-about-cup {
    position: relative;
    z-index: 4;

    width: 235px;

    text-align: center;
}


.tdc-about-cup img {
    position: relative;
    z-index: 3;

    display: block;

    width: 100%;
    height: auto;

    margin: 0 auto;

    user-select: none;

    -webkit-user-drag: none;
}


/* ==========================================================
   CUP GLOW
========================================================== */

.tdc-about-cup-glow {
    position: absolute;

    z-index: 1;

    left: 50%;
    top: 45%;

    width: 260px;
    height: 260px;

    background:
        radial-gradient(
            circle,
            rgba(242, 99, 34, 0.18),
            rgba(242, 99, 34, 0.04) 50%,
            transparent 72%
        );

    border-radius: 50%;

    transform: translate(-50%, -50%);

    pointer-events: none;
}


/* ==========================================================
   CUP CAPTION
========================================================== */

.tdc-about-cup-caption {
    position: relative;
    z-index: 5;

    width: max-content;
    max-width: 240px;

    margin: -4px auto 0;

    padding: 9px 15px;

    background: #111111;

    border-radius: 8px;

    text-align: left;

    box-shadow:
        0 10px 25px
        rgba(17, 17, 17, 0.12);
}


.tdc-about-cup-caption span {
    display: block;

    margin-bottom: 1px;

    color: #f26322;

    font-size: 14px;
    line-height: 1.4;

    font-weight: 700;

    text-transform: uppercase;
}


.tdc-about-cup-caption strong {
    display: block;

    color: #ffffff;

    font-size: 16px;
    line-height: 1.4;

    font-weight: 700;
}


/* ==========================================================
   INGREDIENTS
========================================================== */

.tdc-about-ingredient {
    position: absolute;
    z-index: 5;

    display: flex;

    align-items: center;

    gap: 8px;
}


/* Icon */

.tdc-about-ingredient-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;

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

    background: #ffffff;

    border: 1px solid #e6e1db;

    border-radius: 50%;

    color: #f26322;

    font-size: 13px;

    box-shadow:
        0 8px 20px
        rgba(17, 17, 17, 0.07);

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


/* Name */

.tdc-about-ingredient-name {
    padding: 5px 9px;

    background: rgba(248, 247, 244, 0.90);

    border-radius: 5px;

    color: #4e4945;

    font-size: 14px;
    line-height: 1.4;

    font-weight: 700;
}


/* Hover */

.tdc-about-ingredient:hover
.tdc-about-ingredient-icon {
    background: #f26322;

    border-color: #f26322;

    color: #ffffff;

    transform: translateY(-3px);
}


/* ==========================================================
   INGREDIENT POSITIONS
========================================================== */

.ingredient-strategy {
    left: 7%;
    top: 16%;
}


.ingredient-design {
    right: 8%;
    top: 14%;
}


.ingredient-seo {
    left: 0;
    top: 47%;
}


.ingredient-social {
    right: 0;
    top: 45%;
}


.ingredient-paid {
    left: 12%;
    bottom: 10%;
}


.ingredient-content {
    right: 8%;
    bottom: 12%;
}


/* ==========================================================
   BREWING BADGE
========================================================== */

.tdc-about-brew-badge {
    position: absolute;

    z-index: 6;

    right: 3%;
    bottom: 0;

    padding: 10px 13px;

    display: flex;

    align-items: center;

    gap: 9px;

    background: #ffffff;

    border: 1px solid #e6e1db;

    border-radius: 9px;

    box-shadow:
        0 10px 25px
        rgba(17, 17, 17, 0.07);
}


.tdc-about-brew-badge > i {
    color: #f26322;

    font-size: 18px;
}


.tdc-about-brew-badge span {
    display: block;

    color: #8a847e;

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


.tdc-about-brew-badge strong {
    display: block;

    color: #111111;

    font-size: 16px;
    line-height: 1.4;

    font-weight: 700;
}


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

@media (max-width: 1100px) {

    .tdc-about-hero {
        min-height: auto;

        padding: 70px 0;
    }


    .tdc-about-hero-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(420px, 0.9fr);

        gap: 35px;
    }


    .tdc-about-hero-visual {
        height: 470px;
    }


    .tdc-about-orbit-one {
        width: 380px;
        height: 380px;
    }


    .tdc-about-orbit-two {
        width: 285px;
        height: 285px;
    }


    .tdc-about-cup {
        width: 205px;
    }


    .tdc-about-ingredient-name {
        display: none;
    }

}


/* ==========================================================
   MOBILE — UNDER 768PX
========================================================== */

@media (max-width: 767px) {

    .tdc-about-hero {
        min-height: auto;

        padding: 52px 0 58px;
    }


    .tdc-about-hero-container {
        width: 90%;
    }


    .tdc-about-hero-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    /* ======================================================
       LABEL
    ====================================================== */

    .tdc-about-hero-label {
        margin-bottom: 13px;

        padding-left: 29px;

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


    .tdc-about-hero-label::before {
        width: 19px;
    }


    /* ======================================================
       H1 — MOBILE 30PX
    ====================================================== */

    .tdc-about-hero-heading {
        margin-bottom: 15px;

        font-size: 30px;
        line-height: 1.2;

        letter-spacing: -0.5px;
    }


    /* ======================================================
       BODY — MOBILE 16PX
    ====================================================== */

    .tdc-about-hero-text {
        font-size: 16px;
        line-height: 1.5;
    }


    /* ======================================================
       STATEMENT
    ====================================================== */

    .tdc-about-hero-statement {
        margin-top: 20px;

        padding: 15px;

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

        gap: 12px;
    }


    .tdc-about-statement-icon {
        width: 40px;
        height: 40px;
    }


    .tdc-about-hero-statement p {
        font-size: 16px;
        line-height: 1.5;
    }


    /* ======================================================
       LINKS
    ====================================================== */

    .tdc-about-hero-links {
        margin-top: 19px;

        gap: 13px;
    }


    /* ======================================================
       VISUAL
    ====================================================== */

    .tdc-about-hero-visual {
        width: min(100%, 430px);

        height: 390px;

        margin: 0 auto;
    }


    .tdc-about-orbit-one {
        width: 320px;
        height: 320px;
    }


    .tdc-about-orbit-two {
        width: 235px;
        height: 235px;
    }


    .tdc-about-cup {
        width: 170px;
    }


    .tdc-about-cup-glow {
        width: 200px;
        height: 200px;
    }


    /* Ingredient names remain hidden */

    .tdc-about-ingredient-name {
        display: none;
    }


    .tdc-about-ingredient-icon {
        width: 39px;
        height: 39px;

        flex-basis: 39px;
    }


    /* Reposition */

    .ingredient-strategy {
        left: 7%;
        top: 13%;
    }


    .ingredient-design {
        right: 7%;
        top: 13%;
    }


    .ingredient-seo {
        left: 2%;
        top: 47%;
    }


    .ingredient-social {
        right: 2%;
        top: 47%;
    }


    .ingredient-paid {
        left: 12%;
        bottom: 8%;
    }


    .ingredient-content {
        right: 12%;
        bottom: 8%;
    }


    /* Hide badge on mobile */

    .tdc-about-brew-badge {
        display: none;
    }

}


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

@media (max-width: 420px) {

    .tdc-about-hero-visual {
        height: 350px;
    }


    .tdc-about-orbit-one {
        width: 285px;
        height: 285px;
    }


    .tdc-about-orbit-two {
        width: 210px;
        height: 210px;
    }


    .tdc-about-cup {
        width: 150px;
    }


    .tdc-about-hero-links {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;
    }


    .tdc-about-hero-links > span {
        display: none;
    }

}
/* ==========================================================
   ABOUT — SECTION 02
   WHY THE DIGITAL CAFE?
========================================================== */

.tdc-about-concept {
    position: relative;

    padding: 62px 0;

    background: #ffffff;

    overflow: hidden;
}


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

.tdc-about-concept-container {
    position: relative;
    z-index: 2;

    width: min(90%, 1400px);

    margin: 0 auto;
}


/* ==========================================================
   MAIN GRID
========================================================== */

.tdc-about-concept-grid {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.72fr)
        minmax(0, 1.28fr);

    align-items: center;

    gap: 75px;
}


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

.tdc-about-concept-intro {
    max-width: 470px;
}


/* ==========================================================
   LABEL
========================================================== */

.tdc-about-section-label {
    position: relative;

    display: inline-flex;
    align-items: center;

    margin-bottom: 13px;

    padding-left: 33px;

    color: #77716c;

    font-size: 14px;
    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


.tdc-about-section-label::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 23px;
    height: 2px;

    background: #f26322;

    transform: translateY(-50%);
}


/* ==========================================================
   H2
========================================================== */

.tdc-about-concept-intro h2 {
    margin: 0 0 17px;

    color: #111111;

    font-size: 32px;
    line-height: 1.25;

    font-weight: 700;

    letter-spacing: -0.6px;
}


.tdc-about-concept-intro h2 span {
    color: #f26322;
}


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

.tdc-about-concept-intro > p {
    margin: 0 0 11px;

    color: #706a65;

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


.tdc-about-concept-intro > p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   RIGHT — STEPS
========================================================== */

.tdc-concept-steps {
    position: relative;
}


/*
   Vertical connecting line
*/

.tdc-concept-steps::before {
    content: "";

    position: absolute;

    left: 65px;
    top: 43px;
    bottom: 43px;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            rgba(242, 99, 34, 0.15),
            rgba(242, 99, 34, 0.65),
            rgba(242, 99, 34, 0.15)
        );
}


/* ==========================================================
   INDIVIDUAL STEP
========================================================== */

.tdc-concept-step {
    position: relative;

    min-height: 105px;

    display: grid;

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

    align-items: center;

    gap: 16px;

    padding: 16px 18px 16px 0;

    border-bottom: 1px solid #ece8e4;
}


.tdc-concept-step:first-child {
    padding-top: 0;
}


.tdc-concept-step:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}


/* ==========================================================
   NUMBER
========================================================== */

.tdc-concept-number {
    align-self: start;

    padding-top: 12px;

    color: #aaa39d;

    font-size: 14px;
    line-height: 1.4;

    font-weight: 700;
}


/* ==========================================================
   ICON
========================================================== */

.tdc-concept-icon {
    position: relative;
    z-index: 2;

    width: 58px;
    height: 58px;

    display: flex;

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

    background: #fff7f2;

    border: 1px solid #f2ded1;

    border-radius: 50%;

    color: #f26322;

    font-size: 17px;

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


.tdc-concept-step:hover
.tdc-concept-icon {
    background: #f26322;

    border-color: #f26322;

    color: #ffffff;

    transform: scale(1.06);
}


/* ==========================================================
   STEP CONTENT
========================================================== */

.tdc-concept-step-content {
    display: grid;

    grid-template-columns:
        minmax(200px, 0.72fr)
        minmax(280px, 1.28fr);

    align-items: center;

    gap: 25px;
}


/* ==========================================================
   H3
========================================================== */

.tdc-concept-step-content h3 {
    margin: 0;

    color: #111111;

    font-size: 24px;
    line-height: 1.3;

    font-weight: 700;

    letter-spacing: -0.3px;
}


.tdc-concept-step-content h3 span {
    display: block;

    color: #f26322;
}


/* ==========================================================
   STEP PARAGRAPH
========================================================== */

.tdc-concept-step-content p {
    margin: 0;

    color: #706a65;

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


/* ==========================================================
   CONCLUSION STRIP
========================================================== */

.tdc-concept-conclusion {
    margin-top: 34px;

    min-height: 92px;

    padding: 16px 20px;

    display: grid;

    grid-template-columns:
        50px
        auto
        minmax(250px, 1fr)
        auto;

    align-items: center;

    gap: 18px;

    background: #111111;

    border-radius: 12px;
}


/* ==========================================================
   CONCLUSION MARK
========================================================== */

.tdc-concept-conclusion-mark {
    width: 50px;
    height: 50px;

    display: flex;

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

    background: #f26322;

    border-radius: 50%;

    color: #ffffff;

    font-size: 17px;
}


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

.tdc-concept-conclusion-title {
    padding-right: 18px;

    border-right:
        1px solid
        rgba(255, 255, 255, 0.14);
}


.tdc-concept-conclusion-title span {
    display: block;

    margin-bottom: 1px;

    color: #aaa6a2;

    font-size: 14px;
    line-height: 1.4;

    font-weight: 600;
}


.tdc-concept-conclusion-title strong {
    display: block;

    color: #ffffff;

    font-size: 20px;
    line-height: 1.3;

    font-weight: 700;
}


/* ==========================================================
   CONCLUSION TEXT
========================================================== */

.tdc-concept-conclusion > p {
    max-width: 520px;

    margin: 0;

    color: #b6b1ad;

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


/* ==========================================================
   CONCLUSION LINK
========================================================== */

.tdc-concept-link {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    color: #ffffff;

    font-size: 14px;
    line-height: 1.4;

    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;
}


.tdc-concept-link > span {
    width: 38px;
    height: 38px;

    display: flex;

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

    background: #f26322;

    border-radius: 50%;

    color: #ffffff;

    font-size: 10px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.tdc-concept-link:hover > span {
    background: #ffffff;

    color: #111111;

    transform: translateY(3px);
}


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

@media (max-width: 1100px) {

    .tdc-about-concept-grid {
        grid-template-columns:
            minmax(280px, 0.75fr)
            minmax(0, 1.25fr);

        gap: 45px;
    }


    .tdc-concept-step-content {
        grid-template-columns: 1fr;

        gap: 5px;
    }


    .tdc-concept-conclusion {
        grid-template-columns:
            50px
            auto
            minmax(200px, 1fr);

        gap: 15px;
    }


    .tdc-concept-link {
        grid-column: 2 / -1;

        justify-self: end;
    }

}


/* ==========================================================
   MOBILE — UNDER 768PX
========================================================== */

@media (max-width: 767px) {

    .tdc-about-concept {
        padding: 45px 0;
    }


    .tdc-about-concept-container {
        width: 90%;
    }


    .tdc-about-concept-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .tdc-about-concept-intro {
        max-width: none;
    }


    /* LABEL */

    .tdc-about-section-label {
        margin-bottom: 11px;

        padding-left: 29px;

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


    .tdc-about-section-label::before {
        width: 19px;
    }


    /* H2 — 24PX */

    .tdc-about-concept-intro h2 {
        margin-bottom: 14px;

        font-size: 24px;
        line-height: 1.25;

        letter-spacing: -0.3px;
    }


    /* BODY — NEVER BELOW 16PX */

    .tdc-about-concept-intro > p {
        font-size: 16px;
        line-height: 1.5;
    }


    /* STEPS */

    .tdc-concept-steps::before {
        left: 48px;

        top: 34px;
        bottom: 34px;
    }


    .tdc-concept-step {
        min-height: 0;

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

        gap: 10px;

        padding: 18px 0;
    }


    .tdc-concept-step:first-child {
        padding-top: 0;
    }


    .tdc-concept-step:last-child {
        padding-bottom: 0;
    }


    .tdc-concept-number {
        padding-top: 8px;

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


    .tdc-concept-icon {
        width: 48px;
        height: 48px;

        font-size: 15px;
    }


    .tdc-concept-step-content {
        grid-template-columns: 1fr;

        gap: 5px;
    }


    /* H3 — 20PX */

    .tdc-concept-step-content h3 {
        font-size: 20px;
        line-height: 1.3;
    }


    .tdc-concept-step-content h3 span {
        display: inline;
    }


    .tdc-concept-step-content p {
        font-size: 16px;
        line-height: 1.5;
    }


    /* CONCLUSION */

    .tdc-concept-conclusion {
        margin-top: 28px;

        padding: 18px;

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

        gap: 12px;

        border-radius: 10px;
    }


    .tdc-concept-conclusion-mark {
        width: 44px;
        height: 44px;

        font-size: 15px;
    }


    .tdc-concept-conclusion-title {
        padding-right: 0;

        border-right: 0;
    }


    .tdc-concept-conclusion-title strong {
        font-size: 18px;
        line-height: 1.3;
    }


    .tdc-concept-conclusion > p {
        grid-column: 1 / -1;

        max-width: none;

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


    .tdc-concept-link {
        grid-column: 1 / -1;

        justify-self: start;

        margin-top: 2px;
    }

}
/* ==========================================================
   ABOUT — SECTION 03
   THE DIGITAL CAFE MENU
========================================================== */

.tdc-digital-menu {
    position: relative;

    padding: 55px 0;

    background: #111111;

    overflow: hidden;
}


/* Subtle cafe glow */

.tdc-digital-menu::before {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    right: -220px;
    top: -240px;

    background:
        radial-gradient(
            circle,
            rgba(242, 99, 34, 0.12),
            transparent 70%
        );

    border-radius: 50%;

    pointer-events: none;
}


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

.tdc-digital-menu-container {
    position: relative;
    z-index: 2;

    width: min(90%, 1400px);

    margin: 0 auto;
}


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

.tdc-digital-menu-header {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.9fr)
        minmax(350px, 1.1fr);

    align-items: end;

    gap: 70px;

    margin-bottom: 30px;
}


/* ==========================================================
   LABEL
========================================================== */

.tdc-menu-label {
    position: relative;

    display: inline-flex;
    align-items: center;

    margin-bottom: 10px;

    padding-left: 32px;

    color: #aaa6a2;

    font-size: 14px;
    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


.tdc-menu-label::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 22px;
    height: 2px;

    background: #f26322;

    transform: translateY(-50%);
}


/* ==========================================================
   H2 — DESKTOP 32PX
========================================================== */

.tdc-digital-menu-heading h2 {
    margin: 0;

    color: #ffffff;

    font-size: 32px;
    line-height: 1.25;

    font-weight: 700;

    letter-spacing: -0.6px;
}


.tdc-digital-menu-heading h2 span {
    color: #f26322;
}


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

.tdc-digital-menu-header > p {
    max-width: 620px;

    margin: 0;

    color: #aaa6a2;

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


/* ==========================================================
   MENU BOARD
========================================================== */

.tdc-menu-board {
    display: grid;

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

    border-top:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-left:
        1px solid
        rgba(255, 255, 255, 0.12);
}


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

.tdc-menu-item {
    position: relative;

    min-width: 0;

    padding: 21px 22px 20px;

    border-right:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.12);

    transition:
        background 0.3s ease;
}


.tdc-menu-item:hover {
    background:
        rgba(255, 255, 255, 0.035);
}


/* Orange top indicator */

.tdc-menu-item::before {
    content: "";

    position: absolute;

    left: 22px;
    top: -1px;

    width: 0;
    height: 2px;

    background: #f26322;

    transition: width 0.35s ease;
}


.tdc-menu-item:hover::before {
    width: 50px;
}


/* ==========================================================
   TOP ROW
========================================================== */

.tdc-menu-item-top {
    display: flex;

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

    margin-bottom: 15px;
}


/* ==========================================================
   NUMBER
========================================================== */

.tdc-menu-number {
    color: #6f6b68;

    font-size: 14px;
    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;
}


/* ==========================================================
   ICON
========================================================== */

.tdc-menu-icon {
    width: 38px;
    height: 38px;

    display: flex;

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

    background:
        rgba(242, 99, 34, 0.10);

    border:
        1px solid
        rgba(242, 99, 34, 0.25);

    border-radius: 50%;

    color: #f26322;

    font-size: 13px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.tdc-menu-item:hover
.tdc-menu-icon {
    background: #f26322;

    color: #ffffff;

    transform: rotate(-6deg);
}


/* ==========================================================
   MENU TITLE ROW
========================================================== */

.tdc-menu-title-row {
    width: 100%;

    display: flex;

    align-items: baseline;

    gap: 8px;

    margin-bottom: 7px;
}


/* ==========================================================
   H3
========================================================== */

.tdc-menu-title-row h3 {
    flex-shrink: 0;

    margin: 0;

    color: #ffffff;

    font-size: 24px;
    line-height: 1.3;

    font-weight: 700;

    letter-spacing: -0.3px;
}


/* ==========================================================
   MENU DOTS
========================================================== */

.tdc-menu-dots {
    min-width: 15px;

    flex: 1;

    height: 1px;

    border-bottom:
        1px dotted
        rgba(255, 255, 255, 0.22);
}


/* ==========================================================
   SERVICE LABEL
========================================================== */

.tdc-menu-service {
    flex-shrink: 0;

    color: #8e8985;

    font-size: 14px;
    line-height: 1.4;

    font-weight: 700;

    text-transform: uppercase;
}


/* ==========================================================
   TAGLINE
========================================================== */

.tdc-menu-tagline {
    display: block;

    margin-bottom: 7px;

    color: #f26322;

    font-size: 16px;
    line-height: 1.4;

    font-weight: 700;
}


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

.tdc-menu-item > p {
    margin: 0;

    color: #aaa6a2;

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


/* ==========================================================
   MENU FOOTER
========================================================== */

.tdc-menu-footer {
    min-height: 68px;

    padding: 13px 18px;

    display: flex;

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

    gap: 30px;

    background: #f26322;
}


/* ==========================================================
   FOOTER COPY
========================================================== */

.tdc-menu-footer-copy {
    flex-shrink: 0;
}


.tdc-menu-footer-copy > span {
    display: block;

    margin-bottom: 2px;

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

    font-size: 14px;
    line-height: 1.4;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.6px;
}


.tdc-menu-footer-copy strong {
    display: block;

    color: #ffffff;

    font-size: 16px;
    line-height: 1.4;

    font-weight: 700;
}


.tdc-menu-footer-copy em {
    font-style: normal;
}


/* ==========================================================
   RECIPE
========================================================== */

.tdc-menu-footer-recipe {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 9px;

    color: #ffffff;

    font-size: 14px;
    line-height: 1.4;

    font-weight: 700;
}


.tdc-menu-footer-recipe i {
    font-size: 9px;

    opacity: 0.75;
}


.tdc-menu-footer-recipe
.fa-arrow-right-long {
    margin: 0 5px;

    font-size: 15px;

    opacity: 1;
}


.tdc-menu-footer-recipe strong {
    padding: 5px 10px;

    background: #111111;

    border-radius: 20px;

    color: #ffffff;

    font-size: 14px;
    line-height: 1.4;

    font-weight: 700;
}


/* ==========================================================
   TABLET — 768 TO 1100
========================================================== */

@media (max-width: 1100px) {

    .tdc-digital-menu {
        padding: 50px 0;
    }


    .tdc-digital-menu-header {
        gap: 40px;
    }


    .tdc-menu-board {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .tdc-menu-footer {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;
    }


    .tdc-menu-footer-recipe {
        justify-content: flex-start;

        flex-wrap: wrap;
    }

}


/* ==========================================================
   MOBILE — UNDER 768PX
========================================================== */

@media (max-width: 767px) {

    .tdc-digital-menu {
        padding: 44px 0;
    }


    .tdc-digital-menu-container {
        width: 90%;
    }


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

    .tdc-digital-menu-header {
        grid-template-columns: 1fr;

        gap: 12px;

        margin-bottom: 24px;
    }


    .tdc-menu-label {
        margin-bottom: 9px;

        padding-left: 29px;

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


    .tdc-menu-label::before {
        width: 19px;
    }


    /* H2 — MOBILE 24PX */

    .tdc-digital-menu-heading h2 {
        font-size: 24px;
        line-height: 1.25;

        letter-spacing: -0.3px;
    }


    .tdc-digital-menu-header > p {
        font-size: 16px;
        line-height: 1.5;
    }


    /* ======================================================
       MENU BOARD
    ====================================================== */

    .tdc-menu-board {
        grid-template-columns: 1fr;
    }


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

    .tdc-menu-item {
        padding: 18px;
    }


    .tdc-menu-item::before {
        left: 18px;
    }


    .tdc-menu-item-top {
        margin-bottom: 11px;
    }


    /* H3 — MOBILE 20PX */

    .tdc-menu-title-row h3 {
        font-size: 20px;
        line-height: 1.3;
    }


    .tdc-menu-tagline {
        font-size: 16px;
        line-height: 1.4;
    }


    .tdc-menu-item > p {
        font-size: 16px;
        line-height: 1.5;
    }


    /* ======================================================
       MENU FOOTER
    ====================================================== */

    .tdc-menu-footer {
        min-height: 0;

        padding: 18px;

        align-items: flex-start;

        flex-direction: column;

        gap: 14px;
    }


    .tdc-menu-footer-copy strong {
        font-size: 16px;
        line-height: 1.4;
    }


    .tdc-menu-footer-copy em {
        display: block;
    }


    .tdc-menu-footer-recipe {
        justify-content: flex-start;

        flex-wrap: wrap;

        gap: 7px;
    }

}
/* ==========================================================
   SECTION 04 — HOW YOUR BRAND GETS SERVED
========================================================== */

.tdc-brand-journey {
    position: relative;
    width: 100%;
    padding: 55px 0;
    background: #f8f7f4;
    overflow: hidden;
}

.tdc-brand-journey * {
    box-sizing: border-box;
}


/* ==========================================================
   BACKGROUND DECORATION
========================================================== */

.tdc-brand-journey::before {
    content: "";
    position: absolute;

    width: 400px;
    height: 400px;

    left: -220px;
    bottom: -260px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(242, 99, 34, 0.10),
            transparent 70%
        );

    pointer-events: none;
}


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

.tdc-brand-journey-container {
    position: relative;
    z-index: 2;

    width: min(90%, 1400px);
    margin: 0 auto;
}


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

.tdc-journey-header {
    display: grid;

    grid-template-columns:
        minmax(320px, 0.8fr)
        minmax(400px, 1.2fr);

    align-items: end;

    gap: 70px;

    margin-bottom: 27px;
}


/* LABEL */

.tdc-journey-label {
    position: relative;

    display: inline-flex;
    align-items: center;

    margin-bottom: 9px;
    padding-left: 31px;

    color: #77716c;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.tdc-journey-label::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 21px;
    height: 2px;

    background: #f26322;

    transform: translateY(-50%);
}


/* ==========================================================
   H2
========================================================== */

.tdc-journey-heading h2 {
    margin: 0;

    color: #111111;

    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;

    letter-spacing: -0.5px;
}

.tdc-journey-heading h2 span {
    color: #f26322;
}


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

.tdc-journey-header > p {
    max-width: 650px;

    margin: 0;

    color: #706a65;

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


/* ==========================================================
   START PANEL
========================================================== */

.tdc-journey-start {
    position: relative;

    display: inline-grid;

    grid-template-columns:
        42px
        auto
        38px;

    align-items: center;

    gap: 11px;

    margin-bottom: 15px;

    padding: 8px 10px 8px 8px;

    background: #111111;

    border-radius: 9px;

    color: #ffffff;
}


/* ICON */

.tdc-journey-start-icon {
    width: 42px;
    height: 42px;

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

    background: #f26322;

    border-radius: 7px;

    color: #ffffff;

    font-size: 14px;
}


.tdc-journey-start span {
    display: block;

    color: #aaa6a2;

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


.tdc-journey-start strong {
    display: block;

    color: #ffffff;

    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
}


.tdc-journey-start-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #f26322;

    font-size: 15px;
}


/* ==========================================================
   JOURNEY TRACK
========================================================== */

.tdc-journey-track {
    position: relative;

    display: grid;

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

    width: 100%;

    margin-bottom: 17px;
}


/* Main connecting line */

.tdc-journey-track::before {
    content: "";

    position: absolute;
    z-index: 0;

    left: 7%;
    right: 7%;

    top: 74px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            #f26322 0%,
            #f26322 65%,
            #ddd7d1 100%
        );
}


/* ==========================================================
   STEP
========================================================== */

.tdc-journey-step {
    position: relative;
    z-index: 2;

    min-width: 0;

    padding: 0 13px;

    text-align: center;
}


/* ==========================================================
   TOP META
========================================================== */

.tdc-journey-step-top {
    min-height: 30px;

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

    gap: 6px;

    margin-bottom: 8px;
}


/* NUMBER */

.tdc-journey-number {
    color: #aaa39d;

    font-size: 14px;
    line-height: 1.4;

    font-weight: 700;
}


/* ACTION */

.tdc-journey-action {
    padding: 3px 7px;

    background: #fff0e7;

    border-radius: 20px;

    color: #f26322;

    font-size: 14px;
    line-height: 1.4;

    font-weight: 700;
}


/* ==========================================================
   ICON
========================================================== */

.tdc-journey-icon {
    position: relative;
    z-index: 3;

    width: 62px;
    height: 62px;

    margin: 0 auto 11px;

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

    background: #ffffff;

    border: 2px solid #f26322;

    border-radius: 50%;

    color: #f26322;

    font-size: 17px;

    box-shadow:
        0 6px 18px
        rgba(17, 17, 17, 0.06);

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.tdc-journey-step:hover
.tdc-journey-icon {
    background: #f26322;

    color: #ffffff;

    transform: translateY(-4px);
}


/* ==========================================================
   H3
========================================================== */

.tdc-journey-step h3 {
    margin: 0 0 4px;

    color: #111111;

    font-size: 18px;
    line-height: 1.3;

    font-weight: 700;
}


/* ==========================================================
   STEP TEXT
========================================================== */

.tdc-journey-step p {
    max-width: 165px;

    margin: 0 auto;

    color: #77716c;

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


/* ==========================================================
   RESULT PANEL
========================================================== */

.tdc-journey-result {
    display: grid;

    grid-template-columns:
        minmax(330px, 0.8fr)
        minmax(500px, 1.2fr);

    align-items: center;

    gap: 30px;

    min-height: 76px;

    padding: 12px 17px;

    background: #ffffff;

    border: 1px solid #e6e1db;

    border-radius: 10px;

    box-shadow:
        0 10px 30px
        rgba(17, 17, 17, 0.04);
}


/* ==========================================================
   RESULT LEFT
========================================================== */

.tdc-journey-result-main {
    display: flex;
    align-items: center;

    gap: 13px;
}


.tdc-result-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

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

    background: #111111;

    border-radius: 50%;

    color: #f26322;

    font-size: 16px;
}


.tdc-result-copy > span {
    display: block;

    margin-bottom: 1px;

    color: #88817c;

    font-size: 14px;
    line-height: 1.4;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}


.tdc-result-copy strong {
    display: block;

    color: #111111;

    font-size: 18px;
    line-height: 1.3;

    font-weight: 700;
}


.tdc-result-copy em {
    color: #f26322;

    font-style: normal;
}


/* ==========================================================
   RESULT FLOW
========================================================== */

.tdc-result-flow {
    display: flex;

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

    gap: 10px;

    color: #77716c;

    font-size: 14px;
    line-height: 1.4;

    font-weight: 700;
}


.tdc-result-flow span {
    white-space: nowrap;
}


.tdc-result-flow i {
    color: #c4bdb7;

    font-size: 9px;
}


.tdc-result-flow strong {
    padding: 6px 11px;

    background: #f26322;

    border-radius: 20px;

    color: #ffffff;

    font-size: 14px;
    line-height: 1.4;

    font-weight: 700;
}


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

@media (max-width: 1100px) {

    .tdc-journey-header {
        gap: 40px;
    }


    .tdc-journey-track {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 25px 0;
    }


    .tdc-journey-track::before {
        display: none;
    }


    .tdc-journey-step {
        padding: 0 15px;
    }


    .tdc-journey-result {
        grid-template-columns: 1fr;
        gap: 12px;
    }


    .tdc-result-flow {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

}


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

@media (max-width: 767px) {

    .tdc-brand-journey {
        padding: 44px 0;
    }


    .tdc-brand-journey-container {
        width: 90%;
    }


    /* HEADER */

    .tdc-journey-header {
        grid-template-columns: 1fr;

        gap: 10px;

        margin-bottom: 22px;
    }


    .tdc-journey-label {
        padding-left: 28px;

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


    .tdc-journey-label::before {
        width: 18px;
    }


    /* H2 */

    .tdc-journey-heading h2 {
        font-size: 24px;
        line-height: 1.25;
    }


    .tdc-journey-header > p {
        font-size: 16px;
        line-height: 1.5;
    }


    /* START */

    .tdc-journey-start {
        width: 100%;

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

        margin-bottom: 25px;
    }


    /* TRACK */

    .tdc-journey-track {
        display: grid;

        grid-template-columns: 1fr;

        gap: 0;

        margin-bottom: 24px;
    }


    /* Vertical line */

    .tdc-journey-track::before {
        display: block;

        left: 24px;
        right: auto;

        top: 25px;
        bottom: 25px;

        width: 2px;
        height: auto;

        background:
            linear-gradient(
                to bottom,
                #f26322,
                #ddd7d1
            );
    }


    .tdc-journey-step {
        display: grid;

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

        grid-template-areas:
            "icon meta"
            "icon title"
            "icon text";

        align-items: start;

        gap: 1px 13px;

        padding: 0 0 22px;

        text-align: left;
    }


    .tdc-journey-step:last-child {
        padding-bottom: 0;
    }


    .tdc-journey-step-top {
        grid-area: meta;

        min-height: 0;

        justify-content: flex-start;

        margin: 0 0 2px;
    }


    .tdc-journey-icon {
        grid-area: icon;

        width: 50px;
        height: 50px;

        margin: 0;

        font-size: 14px;
    }


    .tdc-journey-step h3 {
        grid-area: title;

        margin-bottom: 2px;

        font-size: 20px;
        line-height: 1.3;
    }


    .tdc-journey-step p {
        grid-area: text;

        max-width: none;

        margin: 0;

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


    /* RESULT */

    .tdc-journey-result {
        grid-template-columns: 1fr;

        gap: 14px;

        padding: 16px;
    }


    .tdc-result-copy strong {
        font-size: 18px;
        line-height: 1.3;
    }


    .tdc-result-copy em {
        display: block;
    }


    .tdc-result-flow {
        justify-content: flex-start;

        flex-wrap: wrap;

        gap: 7px;
    }

}
/* ==========================================================
   SECTION 05 — PEOPLE BEHIND THE BREW
========================================================== */

.tdc-brew-team {
    position: relative;
    width: 100%;
    padding: 55px 0;
    background: #ffffff;
    overflow: hidden;
}

.tdc-brew-team * {
    box-sizing: border-box;
}

.tdc-brew-team-container {
    position: relative;
    z-index: 2;
    width: min(90%, 1400px);
    margin: 0 auto;
}


/* ==========================================================
   MAIN GRID
========================================================== */

.tdc-brew-team-grid {
    display: grid;
    grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
    align-items: center;
    gap: 70px;
}


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

.tdc-brew-team-intro {
    max-width: 470px;
}

.tdc-brew-team-label {
    position: relative;
    display: inline-flex;
    align-items: center;

    margin-bottom: 10px;
    padding-left: 31px;

    color: #77716c;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    letter-spacing: .8px;
    text-transform: uppercase;
}

.tdc-brew-team-label::before {
    content: "";
    position: absolute;

    left: 0;
    top: 50%;

    width: 21px;
    height: 2px;

    background: #f26322;

    transform: translateY(-50%);
}


/* ==========================================================
   HEADING
========================================================== */

.tdc-brew-team-intro h2 {
    margin: 0 0 14px;

    color: #111111;

    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;

    letter-spacing: -.5px;
}

.tdc-brew-team-intro h2 span {
    color: #f26322;
}

.tdc-brew-team-intro > p {
    margin: 0;

    color: #706a65;

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


/* ==========================================================
   QUOTE
========================================================== */

.tdc-brew-team-quote {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;

    margin-top: 22px;
    padding-top: 19px;

    border-top: 1px solid #ebe6e1;
}

.tdc-brew-quote-mark {
    width: 40px;
    height: 40px;

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

    background: #fff2ea;

    border-radius: 50%;

    color: #f26322;

    font-size: 13px;
}

.tdc-brew-team-quote p {
    margin: 0;

    color: #33302d;

    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
}


/* ==========================================================
   RIGHT — ROLES
========================================================== */

.tdc-brew-roles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top: 1px solid #e8e3de;
    border-left: 1px solid #e8e3de;
}


/* ==========================================================
   ROLE
========================================================== */

.tdc-brew-role {
    position: relative;

    display: grid;
    grid-template-columns: 30px 52px minmax(0, 1fr);
    align-items: center;

    gap: 12px;

    min-height: 150px;
    padding: 19px;

    background: #ffffff;

    border-right: 1px solid #e8e3de;
    border-bottom: 1px solid #e8e3de;

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

.tdc-brew-role:hover {
    background: #fffaf7;
}


/* ==========================================================
   NUMBER
========================================================== */

.tdc-brew-role-number {
    align-self: start;

    color: #aaa39d;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}


/* ==========================================================
   ICON
========================================================== */

.tdc-brew-role-icon {
    width: 52px;
    height: 52px;

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

    background: #111111;

    border-radius: 50%;

    color: #f26322;

    font-size: 15px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.tdc-brew-role:hover .tdc-brew-role-icon {
    background: #f26322;
    color: #ffffff;

    transform: rotate(-6deg);
}


/* ==========================================================
   ROLE CONTENT
========================================================== */

.tdc-brew-role-content > span {
    display: block;

    margin-bottom: 1px;

    color: #f26322;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    text-transform: uppercase;
}

.tdc-brew-role-content h3 {
    margin: 0 0 4px;

    color: #111111;

    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
}

.tdc-brew-role-content p {
    margin: 0;

    color: #77716c;

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


/* ==========================================================
   PHILOSOPHY STRIP
========================================================== */

.tdc-brew-philosophy {
    display: grid;
    grid-template-columns: minmax(270px, .65fr) minmax(500px, 1.35fr);
    align-items: center;

    gap: 30px;

    min-height: 74px;

    margin-top: 27px;
    padding: 12px 18px;

    background: #111111;

    border-radius: 10px;
}


/* LEFT */

.tdc-brew-philosophy-title > span {
    display: block;

    margin-bottom: 1px;

    color: #aaa6a2;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    text-transform: uppercase;
}

.tdc-brew-philosophy-title strong {
    display: block;

    color: #ffffff;

    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
}

.tdc-brew-philosophy-title em {
    color: #f26322;
    font-style: normal;
}


/* ==========================================================
   FORMULA
========================================================== */

.tdc-brew-philosophy-formula {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 9px;

    color: #b9b4af;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}

.tdc-brew-philosophy-formula span {
    white-space: nowrap;
}

.tdc-brew-philosophy-formula i {
    color: #66615d;
    font-size: 9px;
}

.tdc-brew-philosophy-formula .fa-equals {
    color: #f26322;
    font-size: 12px;
}

.tdc-brew-philosophy-formula strong {
    padding: 6px 11px;

    background: #f26322;

    border-radius: 20px;

    color: #ffffff;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    white-space: nowrap;
}


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

@media (max-width: 1050px) {

    .tdc-brew-team-grid {
        grid-template-columns: .75fr 1.25fr;
        gap: 40px;
    }

    .tdc-brew-role {
        grid-template-columns: 45px minmax(0, 1fr);
    }

    .tdc-brew-role-number {
        display: none;
    }

    .tdc-brew-role-icon {
        width: 45px;
        height: 45px;
    }

    .tdc-brew-philosophy {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .tdc-brew-philosophy-formula {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

}


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

@media (max-width: 767px) {

    .tdc-brew-team {
        padding: 44px 0;
    }

    .tdc-brew-team-container {
        width: 90%;
    }

    .tdc-brew-team-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .tdc-brew-team-intro {
        max-width: none;
    }


    /* LABEL */

    .tdc-brew-team-label {
        padding-left: 28px;

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

    .tdc-brew-team-label::before {
        width: 18px;
    }


    /* H2 — FIXED MOBILE SIZE */

    .tdc-brew-team-intro h2 {
        font-size: 24px;
        line-height: 1.25;
    }

    .tdc-brew-team-intro > p,
    .tdc-brew-team-quote p {
        font-size: 16px;
        line-height: 1.5;
    }


    /* ROLES */

    .tdc-brew-roles {
        grid-template-columns: 1fr;
    }

    .tdc-brew-role {
        grid-template-columns: 27px 48px minmax(0, 1fr);

        min-height: auto;

        padding: 16px;
    }

    .tdc-brew-role-number {
        display: block;
    }

    .tdc-brew-role-icon {
        width: 48px;
        height: 48px;
    }

    .tdc-brew-role-content h3 {
        font-size: 20px;
        line-height: 1.3;
    }

    .tdc-brew-role-content p {
        font-size: 16px;
        line-height: 1.5;
    }


    /* PHILOSOPHY */

    .tdc-brew-philosophy {
        display: block;

        margin-top: 24px;
        padding: 17px;
    }

    .tdc-brew-philosophy-title {
        margin-bottom: 13px;
    }

    .tdc-brew-philosophy-title strong {
        font-size: 18px;
        line-height: 1.3;
    }

    .tdc-brew-philosophy-formula {
        justify-content: flex-start;
        flex-wrap: wrap;

        gap: 7px;
    }

}
/* ==========================================================
   SECTION 06 — WHAT MAKES OUR BREW DIFFERENT
========================================================== */

.tdc-difference {
    position: relative;
    width: 100%;
    padding: 55px 0;
    background: #f8f7f4;
    overflow: hidden;
}

.tdc-difference * {
    box-sizing: border-box;
}

.tdc-difference-container {
    width: min(90%, 1400px);
    margin: 0 auto;
}


/* ==========================================================
   MAIN GRID
========================================================== */

.tdc-difference-grid {
    display: grid;
    grid-template-columns: minmax(280px, .62fr) minmax(0, 1.38fr);
    align-items: center;
    gap: 65px;
}


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

.tdc-difference-intro {
    max-width: 420px;
}

.tdc-difference-label {
    position: relative;
    display: inline-flex;
    align-items: center;

    margin-bottom: 10px;
    padding-left: 31px;

    color: #77716c;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    letter-spacing: .8px;
    text-transform: uppercase;
}

.tdc-difference-label::before {
    content: "";

    position: absolute;
    left: 0;
    top: 50%;

    width: 21px;
    height: 2px;

    background: #f26322;

    transform: translateY(-50%);
}


/* ==========================================================
   HEADING
========================================================== */

.tdc-difference-intro h2 {
    margin: 0 0 14px;

    color: #111111;

    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;

    letter-spacing: -.5px;
}

.tdc-difference-intro h2 span {
    display: block;
    color: #f26322;
}

.tdc-difference-intro > p {
    margin: 0;

    color: #706a65;

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


/* ==========================================================
   PHILOSOPHY
========================================================== */

.tdc-difference-highlight {
    margin-top: 20px;
    padding: 15px 17px;

    background: #111111;

    border-left: 3px solid #f26322;

    border-radius: 0 8px 8px 0;
}

.tdc-difference-highlight > span {
    display: block;

    margin-bottom: 4px;

    color: #918c87;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    text-transform: uppercase;
}

.tdc-difference-highlight strong {
    color: #ffffff;

    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
}

.tdc-difference-highlight em {
    color: #f26322;
    font-style: normal;
}


/* ==========================================================
   RIGHT GRID
========================================================== */

.tdc-difference-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    border-top: 1px solid #dfdad5;
    border-left: 1px solid #dfdad5;
}


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

.tdc-difference-point {
    min-width: 0;
    min-height: 175px;

    padding: 17px;

    background: #ffffff;

    border-right: 1px solid #dfdad5;
    border-bottom: 1px solid #dfdad5;

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

.tdc-difference-point:hover {
    background: #fff9f5;
}


/* ==========================================================
   TOP
========================================================== */

.tdc-difference-point-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 10px;
}

.tdc-difference-number {
    color: #aaa39d;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}

.tdc-difference-icon {
    width: 38px;
    height: 38px;

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

    background: #fff0e7;

    border-radius: 50%;

    color: #f26322;

    font-size: 13px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.tdc-difference-point:hover .tdc-difference-icon {
    background: #f26322;
    color: #ffffff;

    transform: rotate(-6deg);
}


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

.tdc-difference-point h3 {
    margin: 0 0 5px;

    color: #111111;

    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
}

.tdc-difference-point p {
    margin: 0;

    color: #77716c;

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


/* ==========================================================
   BOTTOM STRIP
========================================================== */

.tdc-difference-bottom {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;

    gap: 14px;

    margin-top: 26px;
    padding: 11px 14px;

    background: #ffffff;

    border: 1px solid #e3ded9;
    border-radius: 10px;
}

.tdc-difference-bottom-icon {
    width: 44px;
    height: 44px;

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

    background: #f26322;

    border-radius: 50%;

    color: #ffffff;

    font-size: 14px;
}

.tdc-difference-bottom p {
    margin: 0;

    color: #706a65;

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

.tdc-difference-bottom p strong {
    color: #111111;
}


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

.tdc-difference-bottom > a {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    padding: 9px 15px;

    background: #111111;

    border-radius: 6px;

    color: #ffffff;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;

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

.tdc-difference-bottom > a:hover {
    background: #f26322;
    transform: translateY(-2px);
}


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

@media (max-width: 1100px) {

    .tdc-difference-grid {
        grid-template-columns: .65fr 1.35fr;
        gap: 40px;
    }

    .tdc-difference-points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


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

@media (max-width: 767px) {

    .tdc-difference {
        padding: 44px 0;
    }

    .tdc-difference-container {
        width: 90%;
    }

    .tdc-difference-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .tdc-difference-intro {
        max-width: none;
    }


    .tdc-difference-label {
        padding-left: 28px;

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

    .tdc-difference-label::before {
        width: 18px;
    }


    /* H2 */

    .tdc-difference-intro h2 {
        font-size: 24px;
        line-height: 1.25;
    }

    .tdc-difference-intro h2 span {
        display: inline;
    }


    /* BODY */

    .tdc-difference-intro > p,
    .tdc-difference-point p,
    .tdc-difference-bottom p {
        font-size: 16px;
        line-height: 1.5;
    }


    /* POINTS */

    .tdc-difference-points {
        grid-template-columns: 1fr;
    }

    .tdc-difference-point {
        min-height: 0;
        padding: 16px;
    }

    .tdc-difference-point h3 {
        font-size: 20px;
        line-height: 1.3;
    }


    /* BOTTOM */

    .tdc-difference-bottom {
        grid-template-columns: 44px minmax(0, 1fr);

        margin-top: 24px;
        padding: 14px;
    }

    .tdc-difference-bottom > a {
        grid-column: 1 / -1;

        justify-content: center;

        width: 100%;

        margin-top: 3px;
    }

}
/* ==========================================================
   SECTION 07 — WE PRACTICE WHAT WE BREW
========================================================== */

.tdc-own-ventures {
    position: relative;
    width: 100%;
    padding: 55px 0;
    background: #111111;
    overflow: hidden;
}

.tdc-own-ventures * {
    box-sizing: border-box;
}

.tdc-own-ventures::before {
    content: "";
    position: absolute;

    width: 500px;
    height: 500px;

    right: -260px;
    top: -280px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(242, 99, 34, .13),
            transparent 70%
        );

    pointer-events: none;
}


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

.tdc-own-ventures-container {
    position: relative;
    z-index: 2;

    width: min(90%, 1400px);
    margin: 0 auto;
}


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

.tdc-own-ventures-header {
    display: grid;

    grid-template-columns:
        minmax(400px, .9fr)
        minmax(400px, 1.1fr);

    align-items: end;

    gap: 70px;

    margin-bottom: 27px;
}


/* LABEL */

.tdc-own-ventures-label {
    position: relative;

    display: inline-flex;
    align-items: center;

    margin-bottom: 9px;
    padding-left: 31px;

    color: #aaa6a2;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    letter-spacing: .8px;
    text-transform: uppercase;
}

.tdc-own-ventures-label::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 21px;
    height: 2px;

    background: #f26322;

    transform: translateY(-50%);
}


/* ==========================================================
   HEADING
========================================================== */

.tdc-own-ventures-heading h2 {
    margin: 0;

    color: #ffffff;

    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;

    letter-spacing: -.5px;
}

.tdc-own-ventures-heading h2 span {
    display: block;
    color: #f26322;
}


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

.tdc-own-ventures-intro p {
    max-width: 650px;

    margin: 0 0 6px;

    color: #aaa6a2;

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

.tdc-own-ventures-intro > span {
    color: #f26322;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}


/* ==========================================================
   MAIN BOARD
========================================================== */

.tdc-own-ventures-board {
    display: grid;

    grid-template-columns:
        minmax(270px, .55fr)
        minmax(0, 1.45fr);

    border: 1px solid rgba(255,255,255,.12);

    background: #171717;
}


/* ==========================================================
   SOURCE / TEST KITCHEN
========================================================== */

.tdc-venture-source {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;

    padding: 25px;

    border-right: 1px solid rgba(255,255,255,.12);
}

.tdc-venture-source-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
}

.tdc-venture-source-small {
    color: #8e8985;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    text-transform: uppercase;
}

.tdc-venture-source-icon {
    width: 44px;
    height: 44px;

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

    background: #f26322;

    border-radius: 50%;

    color: #ffffff;

    font-size: 15px;
}


/* H3 */

.tdc-venture-source h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
}

.tdc-venture-source h3 span {
    display: block;
    color: #f26322;
}

.tdc-venture-source > p {
    margin: 0;

    color: #aaa6a2;

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


/* ==========================================================
   RECIPE
========================================================== */

.tdc-venture-recipe {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 22px;
}

.tdc-venture-recipe span {
    color: #b3aeaa;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}

.tdc-venture-recipe i {
    color: #5e5a57;
    font-size: 8px;
}

.tdc-venture-recipe strong {
    padding: 4px 9px;

    background: rgba(242,99,34,.12);

    border: 1px solid rgba(242,99,34,.25);
    border-radius: 20px;

    color: #f26322;

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


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

.tdc-venture-list {
    min-width: 0;
}


/* ==========================================================
   VENTURE ROW
========================================================== */

.tdc-venture-row {
    position: relative;

    display: grid;

    grid-template-columns:
        32px
        48px
        minmax(220px, 1fr)
        minmax(210px, .8fr);

    align-items: center;

    gap: 14px;

    min-height: 105px;

    padding: 13px 18px;

    border-bottom: 1px solid rgba(255,255,255,.12);

    transition: background .3s ease;
}

.tdc-venture-row:last-child {
    border-bottom: 0;
}

.tdc-venture-row:hover {
    background: rgba(255,255,255,.035);
}


/* ==========================================================
   INDEX
========================================================== */

.tdc-venture-index {
    color: #66615e;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}


/* ==========================================================
   ICON
========================================================== */

.tdc-venture-symbol {
    width: 48px;
    height: 48px;

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

    background: rgba(242,99,34,.10);

    border: 1px solid rgba(242,99,34,.25);
    border-radius: 50%;

    color: #f26322;

    font-size: 14px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.tdc-venture-row:hover .tdc-venture-symbol {
    background: #f26322;
    color: #ffffff;

    transform: rotate(-6deg);
}


/* ==========================================================
   VENTURE INFO
========================================================== */

.tdc-venture-info > span {
    display: block;

    margin-bottom: 1px;

    color: #f26322;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}

.tdc-venture-info h3 {
    margin: 0 0 2px;

    color: #ffffff;

    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
}

.tdc-venture-info p {
    margin: 0;

    color: #999490;

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


/* ==========================================================
   LEARNING
========================================================== */

.tdc-venture-learning {
    padding-left: 18px;

    border-left: 1px solid rgba(255,255,255,.10);
}

.tdc-venture-learning span {
    display: block;

    margin-bottom: 3px;

    color: #77726e;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    text-transform: uppercase;
}

.tdc-venture-learning strong {
    color: #d3cfcc;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}


/* ==========================================================
   BOTTOM MESSAGE
========================================================== */

.tdc-ventures-message {
    display: grid;

    grid-template-columns:
        minmax(330px, .75fr)
        minmax(500px, 1.25fr);

    align-items: center;

    gap: 30px;

    margin-top: 18px;
    padding: 12px 18px;

    background: #f26322;
}


/* LEFT */

.tdc-ventures-message-left > span {
    display: block;

    margin-bottom: 1px;

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

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    text-transform: uppercase;
}

.tdc-ventures-message-left strong {
    color: #ffffff;

    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
}

.tdc-ventures-message-left em {
    font-style: normal;
}


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

.tdc-ventures-message-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 12px;
}

.tdc-ventures-message-right > div {
    min-width: 0;
}

.tdc-ventures-message-right strong {
    display: block;

    color: #ffffff;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}

.tdc-ventures-message-right span {
    display: block;

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

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

.tdc-ventures-message-right > i {
    color: rgba(255,255,255,.55);

    font-size: 10px;
}

.tdc-ventures-result {
    padding: 6px 10px;

    background: #111111;

    border-radius: 6px;
}


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

@media (max-width: 1100px) {

    .tdc-own-ventures-header {
        gap: 40px;
    }

    .tdc-own-ventures-board {
        grid-template-columns: .6fr 1.4fr;
    }

    .tdc-venture-row {
        grid-template-columns:
            45px
            minmax(0, 1fr);
    }

    .tdc-venture-index {
        display: none;
    }

    .tdc-venture-learning {
        grid-column: 2;

        padding: 5px 0 0;

        border-left: 0;
    }

    .tdc-ventures-message {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .tdc-ventures-message-right {
        justify-content: flex-start;
    }

}


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

@media (max-width: 767px) {

    .tdc-own-ventures {
        padding: 44px 0;
    }

    .tdc-own-ventures-container {
        width: 90%;
    }


    /* HEADER */

    .tdc-own-ventures-header {
        grid-template-columns: 1fr;

        gap: 10px;

        margin-bottom: 22px;
    }

    .tdc-own-ventures-label {
        padding-left: 28px;

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

    .tdc-own-ventures-label::before {
        width: 18px;
    }

    .tdc-own-ventures-heading h2 {
        font-size: 24px;
        line-height: 1.25;
    }

    .tdc-own-ventures-intro p {
        font-size: 16px;
        line-height: 1.5;
    }


    /* BOARD */

    .tdc-own-ventures-board {
        grid-template-columns: 1fr;
    }

    .tdc-venture-source {
        padding: 20px;

        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .tdc-venture-source h3 {
        font-size: 20px;
        line-height: 1.3;
    }

    .tdc-venture-source > p {
        font-size: 16px;
        line-height: 1.5;
    }


    /* VENTURES */

    .tdc-venture-row {
        grid-template-columns:
            26px
            46px
            minmax(0, 1fr);

        gap: 10px;

        padding: 15px;
    }

    .tdc-venture-index {
        display: block;
    }

    .tdc-venture-symbol {
        width: 46px;
        height: 46px;
    }

    .tdc-venture-info h3 {
        font-size: 20px;
        line-height: 1.3;
    }

    .tdc-venture-info p {
        font-size: 16px;
        line-height: 1.5;
    }

    .tdc-venture-learning {
        grid-column: 3;

        padding: 6px 0 0;

        border-left: 0;
    }


    /* BOTTOM */

    .tdc-ventures-message {
        display: block;

        margin-top: 18px;
        padding: 17px;
    }

    .tdc-ventures-message-left {
        margin-bottom: 15px;
    }

    .tdc-ventures-message-left em {
        display: block;
    }

    .tdc-ventures-message-right {
        align-items: flex-start;
        flex-direction: column;

        gap: 8px;
    }

    .tdc-ventures-message-right > i {
        display: none;
    }

    .tdc-ventures-result {
        width: 100%;

        margin-top: 3px;
    }

}
/* ==========================================================
   SECTION 08 — OUR VALUES
========================================================== */

.tdc-values {
    position: relative;
    width: 100%;
    padding: 55px 0;
    background: #ffffff;
    overflow: hidden;
}

.tdc-values * {
    box-sizing: border-box;
}

.tdc-values-container {
    width: min(90%, 1400px);
    margin: 0 auto;
}


/* ==========================================================
   MAIN GRID
========================================================== */

.tdc-values-grid {
    display: grid;
    grid-template-columns: minmax(300px, .7fr) minmax(0, 1.3fr);
    align-items: center;
    gap: 70px;
}


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

.tdc-values-intro {
    max-width: 470px;
}

.tdc-values-label {
    position: relative;

    display: inline-flex;
    align-items: center;

    margin-bottom: 10px;
    padding-left: 31px;

    color: #77716c;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    letter-spacing: .8px;
    text-transform: uppercase;
}

.tdc-values-label::before {
    content: "";

    position: absolute;
    left: 0;
    top: 50%;

    width: 21px;
    height: 2px;

    background: #f26322;

    transform: translateY(-50%);
}


/* ==========================================================
   HEADING
========================================================== */

.tdc-values-intro h2 {
    margin: 0 0 14px;

    color: #111111;

    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;

    letter-spacing: -.5px;
}

.tdc-values-intro h2 span {
    display: block;
    color: #f26322;
}

.tdc-values-intro > p {
    margin: 0;

    color: #706a65;

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


/* ==========================================================
   HOUSE BLEND
========================================================== */

.tdc-values-cup {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);

    align-items: center;
    gap: 13px;

    margin-top: 23px;
    padding-top: 20px;

    border-top: 1px solid #e8e3de;
}

.tdc-values-cup-icon {
    width: 52px;
    height: 52px;

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

    background: #111111;

    border-radius: 50%;

    color: #f26322;

    font-size: 16px;
}

.tdc-values-cup-copy > span {
    display: block;

    margin-bottom: 3px;

    color: #918b86;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    text-transform: uppercase;
}

.tdc-values-cup-copy strong {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    color: #111111;

    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
}

.tdc-values-cup-copy i {
    color: #bbb4ae;
    font-size: 9px;
}

.tdc-values-cup-copy em {
    color: #f26322;
    font-style: normal;
}


/* ==========================================================
   RECIPE
========================================================== */

.tdc-values-recipe {
    border-top: 1px solid #e6e1dc;
}


/* ==========================================================
   VALUE ROW
========================================================== */

.tdc-value-row {
    display: grid;

    grid-template-columns:
        30px
        46px
        minmax(0, 1fr)
        72px;

    align-items: center;

    gap: 13px;

    min-height: 92px;
    padding: 11px 14px;

    border-bottom: 1px solid #e6e1dc;

    transition:
        background .3s ease,
        padding-left .3s ease;
}

.tdc-value-row:hover {
    padding-left: 19px;
    background: #fff9f5;
}


/* ==========================================================
   NUMBER
========================================================== */

.tdc-value-number {
    color: #aaa39d;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}


/* ==========================================================
   ICON
========================================================== */

.tdc-value-icon {
    width: 46px;
    height: 46px;

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

    background: #fff0e7;

    border: 1px solid #f8d9c8;
    border-radius: 50%;

    color: #f26322;

    font-size: 13px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.tdc-value-row:hover .tdc-value-icon {
    background: #f26322;
    color: #ffffff;

    transform: rotate(-6deg);
}


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

.tdc-value-content > span {
    display: block;

    margin-bottom: 1px;

    color: #f26322;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}

.tdc-value-content h3 {
    margin: 0 0 2px;

    color: #111111;

    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
}

.tdc-value-content p {
    margin: 0;

    color: #77716c;

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


/* ==========================================================
   MEASURE
========================================================== */

.tdc-value-measure {
    justify-self: end;

    min-width: 62px;

    padding: 5px 9px;

    background: #111111;

    border-radius: 20px;

    color: #ffffff;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    text-align: center;

    transition:
        background .3s ease,
        color .3s ease;
}

.tdc-value-row:hover .tdc-value-measure {
    background: #f26322;
}


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

.tdc-values-bottom {
    display: grid;

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

    align-items: center;

    gap: 20px;

    margin-top: 25px;
    padding: 13px 17px;

    background: #f26322;

    border-radius: 8px;
}

.tdc-values-bottom > span {
    color: rgba(255,255,255,.75);

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    text-transform: uppercase;

    white-space: nowrap;
}

.tdc-values-bottom h3 {
    margin: 0;

    color: #ffffff;

    font-size: 18px;
    line-height: 1.3;
    font-weight: 500;
}

.tdc-values-bottom h3 strong {
    font-weight: 700;
}


/* ==========================================================
   BOTTOM FLOW
========================================================== */

.tdc-values-bottom-line {
    display: flex;
    align-items: center;

    gap: 7px;

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

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}

.tdc-values-bottom-line i {
    font-size: 8px;
    opacity: .7;
}

.tdc-values-bottom-line strong {
    padding: 5px 10px;

    background: #111111;

    border-radius: 20px;

    color: #ffffff;

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


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

@media (max-width: 1050px) {

    .tdc-values-grid {
        grid-template-columns: .7fr 1.3fr;
        gap: 40px;
    }

    .tdc-value-row {
        grid-template-columns: 46px minmax(0, 1fr) auto;
    }

    .tdc-value-number {
        display: none;
    }

    .tdc-values-bottom {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .tdc-values-bottom-line {
        justify-content: flex-start;
    }

}


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

@media (max-width: 767px) {

    .tdc-values {
        padding: 44px 0;
    }

    .tdc-values-container {
        width: 90%;
    }


    /* MAIN */

    .tdc-values-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .tdc-values-intro {
        max-width: none;
    }


    /* LABEL */

    .tdc-values-label {
        padding-left: 28px;

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

    .tdc-values-label::before {
        width: 18px;
    }


    /* H2 */

    .tdc-values-intro h2 {
        font-size: 24px;
        line-height: 1.25;
    }

    .tdc-values-intro h2 span {
        display: inline;
    }


    .tdc-values-intro > p,
    .tdc-value-content p {
        font-size: 16px;
        line-height: 1.5;
    }


    /* RECIPE */

    .tdc-value-row {
        grid-template-columns:
            25px
            44px
            minmax(0, 1fr);

        gap: 10px;

        min-height: 0;
        padding: 15px 5px;
    }

    .tdc-value-row:hover {
        padding-left: 5px;
    }

    .tdc-value-number {
        display: block;
    }

    .tdc-value-icon {
        width: 44px;
        height: 44px;
    }

    .tdc-value-content h3 {
        font-size: 20px;
        line-height: 1.3;
    }

    .tdc-value-measure {
        grid-column: 3;

        justify-self: start;

        margin-top: 4px;
    }


    /* BOTTOM */

    .tdc-values-bottom {
        display: block;

        margin-top: 22px;
        padding: 16px;
    }

    .tdc-values-bottom > span {
        display: block;
        margin-bottom: 5px;
    }

    .tdc-values-bottom h3 {
        margin-bottom: 12px;

        font-size: 18px;
        line-height: 1.3;
    }

    .tdc-values-bottom-line {
        flex-wrap: wrap;
    }

}
/* ==========================================================
   SECTION 09 — NUMBERS BEHIND THE BREW
========================================================== */

.tdc-about-numbers {
    position: relative;
    width: 100%;
    padding: 55px 0;
    background: #f8f7f4;
    overflow: hidden;
}

.tdc-about-numbers * {
    box-sizing: border-box;
}

.tdc-about-numbers::before {
    content: "";
    position: absolute;

    width: 450px;
    height: 450px;

    left: -260px;
    bottom: -280px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(242, 99, 34, .10),
            transparent 70%
        );

    pointer-events: none;
}


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

.tdc-about-numbers-container {
    position: relative;
    z-index: 2;

    width: min(90%, 1400px);
    margin: 0 auto;
}


/* ==========================================================
   MAIN GRID
========================================================== */

.tdc-about-numbers-grid {
    display: grid;

    grid-template-columns:
        minmax(300px, .62fr)
        minmax(0, 1.38fr);

    align-items: center;

    gap: 65px;
}


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

.tdc-about-numbers-intro {
    max-width: 440px;
}


/* LABEL */

.tdc-about-numbers-label {
    position: relative;

    display: inline-flex;
    align-items: center;

    margin-bottom: 10px;
    padding-left: 31px;

    color: #77716c;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    letter-spacing: .8px;
    text-transform: uppercase;
}

.tdc-about-numbers-label::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 21px;
    height: 2px;

    background: #f26322;

    transform: translateY(-50%);
}


/* ==========================================================
   H2
========================================================== */

.tdc-about-numbers-intro h2 {
    margin: 0 0 14px;

    color: #111111;

    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;

    letter-spacing: -.5px;
}

.tdc-about-numbers-intro h2 span {
    display: block;

    color: #f26322;
}


/* BODY */

.tdc-about-numbers-intro > p {
    margin: 0;

    color: #706a65;

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


/* ==========================================================
   NOTE
========================================================== */

.tdc-numbers-note {
    display: grid;

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

    align-items: center;

    gap: 12px;

    margin-top: 21px;
    padding-top: 18px;

    border-top: 1px solid #dfdad5;
}

.tdc-numbers-note > span {
    width: 42px;
    height: 42px;

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

    background: #111111;

    border-radius: 50%;

    color: #f26322;

    font-size: 13px;
}

.tdc-numbers-note p {
    margin: 0;

    color: #77716c;

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

.tdc-numbers-note strong {
    color: #111111;
}


/* ==========================================================
   STATS GRID
========================================================== */

.tdc-about-stats {
    display: grid;

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

    border-top: 1px solid #ddd7d1;
    border-left: 1px solid #ddd7d1;
}


/* ==========================================================
   STAT
========================================================== */

.tdc-about-stat {
    position: relative;

    min-width: 0;
    min-height: 285px;

    display: flex;
    flex-direction: column;

    padding: 18px;

    background: #ffffff;

    border-right: 1px solid #ddd7d1;
    border-bottom: 1px solid #ddd7d1;

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

.tdc-about-stat:hover {
    background: #fff9f5;
}


/* ==========================================================
   STAT TOP
========================================================== */

.tdc-stat-top {
    display: flex;

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

    margin-bottom: 22px;
}

.tdc-stat-top > span {
    color: #aaa39d;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}

.tdc-stat-top i {
    width: 38px;
    height: 38px;

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

    background: #fff0e7;

    border-radius: 50%;

    color: #f26322;

    font-size: 13px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.tdc-about-stat:hover .tdc-stat-top i {
    background: #f26322;

    color: #ffffff;

    transform: rotate(-6deg);
}


/* ==========================================================
   BIG NUMBER
========================================================== */

.tdc-stat-number {
    display: block;

    margin-bottom: 6px;

    color: #111111;

    font-size: 52px;
    line-height: 1;
    font-weight: 800;

    letter-spacing: -2px;
}

.tdc-stat-number span {
    color: #f26322;
}


/* ==========================================================
   H3
========================================================== */

.tdc-about-stat h3 {
    margin: 0 0 7px;

    color: #111111;

    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
}


/* ==========================================================
   TEXT
========================================================== */

.tdc-about-stat p {
    margin: 0;

    color: #77716c;

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


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

.tdc-about-numbers-bottom {
    display: grid;

    grid-template-columns:
        minmax(270px, .6fr)
        minmax(500px, 1.4fr);

    align-items: center;

    gap: 35px;

    margin-top: 25px;
    padding: 13px 18px;

    background: #111111;

    border-radius: 9px;
}


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

.tdc-numbers-bottom-title > span {
    display: block;

    margin-bottom: 1px;

    color: #8f8a86;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    text-transform: uppercase;
}

.tdc-numbers-bottom-title strong {
    color: #ffffff;

    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
}

.tdc-numbers-bottom-title em {
    color: #f26322;

    font-style: normal;
}


/* ==========================================================
   PROGRESS
========================================================== */

.tdc-numbers-progress {
    display: flex;

    align-items: center;

    width: 100%;
}

.tdc-progress-point {
    flex: 0 0 auto;

    padding: 5px 10px;

    background: #242424;

    border: 1px solid #333333;
    border-radius: 20px;

    color: #bbb6b2;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}

.tdc-progress-line {
    flex: 1;

    min-width: 25px;
    height: 1px;

    background: #45413e;
}

.tdc-progress-final {
    background: #f26322;

    border-color: #f26322;

    color: #ffffff;
}


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

@media (max-width: 1100px) {

    .tdc-about-numbers-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .tdc-about-numbers-intro {
        max-width: 700px;
    }

    .tdc-about-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .tdc-about-stat {
        min-height: 230px;
    }

}


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

@media (max-width: 767px) {

    .tdc-about-numbers {
        padding: 44px 0;
    }

    .tdc-about-numbers-container {
        width: 90%;
    }


    /* LABEL */

    .tdc-about-numbers-label {
        padding-left: 28px;

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

    .tdc-about-numbers-label::before {
        width: 18px;
    }


    /* H2 */

    .tdc-about-numbers-intro h2 {
        font-size: 24px;
        line-height: 1.25;
    }

    .tdc-about-numbers-intro h2 span {
        display: inline;
    }


    /* BODY */

    .tdc-about-numbers-intro > p,
    .tdc-numbers-note p,
    .tdc-about-stat p {
        font-size: 16px;
        line-height: 1.5;
    }


    /* STATS */

    .tdc-about-stats {
        grid-template-columns: 1fr;
    }

    .tdc-about-stat {
        min-height: 0;

        padding: 17px;
    }

    .tdc-stat-top {
        margin-bottom: 12px;
    }

    .tdc-stat-number {
        font-size: 40px;
        line-height: 1;
    }

    .tdc-about-stat h3 {
        font-size: 20px;
        line-height: 1.3;
    }


    /* BOTTOM */

    .tdc-about-numbers-bottom {
        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: 22px;
        padding: 16px;
    }

    .tdc-numbers-bottom-title strong {
        font-size: 18px;
        line-height: 1.3;
    }

    .tdc-numbers-progress {
        flex-wrap: wrap;

        gap: 6px;
    }

    .tdc-progress-line {
        flex: 0 0 14px;
    }

}
/* ==========================================================
   SECTION 10 — FOUNDER STORY
========================================================== */

.tdc-founder-story {
    position: relative;
    width: 100%;
    padding: 55px 0;
    background: #ffffff;
    overflow: hidden;
}

.tdc-founder-story * {
    box-sizing: border-box;
}

.tdc-founder-container {
    width: min(90%, 1400px);
    margin: 0 auto;
}


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

.tdc-founder-grid {
    display: grid;
    grid-template-columns:
        minmax(350px, .82fr)
        minmax(420px, 1.18fr);

    align-items: center;
    gap: 75px;
}


/* ==========================================================
   VISUAL
========================================================== */

.tdc-founder-visual {
    position: relative;
    max-width: 540px;
}


/* IMAGE */

.tdc-founder-image {
    position: relative;

    height: 500px;

    background: #f4f1ee;

    border-radius: 12px;

    overflow: hidden;
}

.tdc-founder-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;
}


/* ==========================================================
   IMAGE TAG
========================================================== */

.tdc-founder-image-tag {
    position: absolute;

    left: 18px;
    bottom: 18px;

    max-width: 270px;

    padding: 11px 14px;

    background: rgba(17, 17, 17, .92);

    border-radius: 7px;
}

.tdc-founder-image-tag span {
    display: block;

    margin-bottom: 2px;

    color: #f26322;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    text-transform: uppercase;
}

.tdc-founder-image-tag strong {
    color: #ffffff;

    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
}


/* ==========================================================
   FLOATING QUOTE
========================================================== */

.tdc-founder-quote {
    position: absolute;

    right: -35px;
    top: 35px;

    width: 235px;

    padding: 15px;

    background: #f26322;

    border-radius: 8px;

    box-shadow: 0 12px 30px rgba(0,0,0,.10);
}

.tdc-founder-quote i {
    margin-bottom: 6px;

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

    font-size: 18px;
}

.tdc-founder-quote p {
    margin: 0;

    color: #ffffff;

    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
}


/* ==========================================================
   RIGHT CONTENT
========================================================== */

.tdc-founder-content {
    max-width: 650px;
}


/* LABEL */

.tdc-founder-label {
    position: relative;

    display: inline-flex;
    align-items: center;

    margin-bottom: 10px;
    padding-left: 31px;

    color: #77716c;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    letter-spacing: .8px;
    text-transform: uppercase;
}

.tdc-founder-label::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 21px;
    height: 2px;

    background: #f26322;

    transform: translateY(-50%);
}


/* ==========================================================
   HEADING
========================================================== */

.tdc-founder-content h2 {
    margin: 0 0 14px;

    color: #111111;

    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;

    letter-spacing: -.5px;
}

.tdc-founder-content h2 span {
    color: #f26322;
}


/* ==========================================================
   TEXT
========================================================== */

.tdc-founder-content > p {
    margin: 0 0 11px;

    color: #706a65;

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

.tdc-founder-content .tdc-founder-lead {
    color: #2b2927;

    font-size: 18px;
    line-height: 1.5;
    font-weight: 600;
}


/* ==========================================================
   CONCEPT BOX
========================================================== */

.tdc-founder-concept {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);

    align-items: center;
    gap: 13px;

    margin-top: 19px;
    padding: 14px 16px;

    background: #f8f7f4;

    border-left: 3px solid #f26322;

    border-radius: 0 8px 8px 0;
}

.tdc-founder-concept-icon {
    width: 48px;
    height: 48px;

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

    background: #111111;

    border-radius: 50%;

    color: #f26322;

    font-size: 15px;
}

.tdc-founder-concept span {
    display: block;

    margin-bottom: 2px;

    color: #918b86;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    text-transform: uppercase;
}

.tdc-founder-concept strong {
    color: #111111;

    font-size: 16px;
    line-height: 1.5;
    font-weight: 700;
}

.tdc-founder-concept em {
    color: #f26322;
    font-style: normal;
}


/* ==========================================================
   SIGNATURE
========================================================== */

.tdc-founder-signature {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 20px;
    padding-top: 17px;

    border-top: 1px solid #e7e2dd;
}

.tdc-founder-name > span {
    display: block;

    color: #99938e;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    text-transform: uppercase;
}

.tdc-founder-name strong {
    display: block;

    margin: 1px 0;

    color: #111111;

    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
}

.tdc-founder-name small {
    display: block;

    color: #77716c;

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


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

.tdc-founder-link {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    padding: 10px 16px;

    background: #111111;

    border-radius: 6px;

    color: #ffffff;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    text-decoration: none;

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

.tdc-founder-link:hover {
    background: #f26322;
    transform: translateY(-2px);
}


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

@media (max-width: 1050px) {

    .tdc-founder-grid {
        grid-template-columns: .85fr 1.15fr;
        gap: 45px;
    }

    .tdc-founder-image {
        height: 460px;
    }

    .tdc-founder-quote {
        right: -20px;
        width: 210px;
    }

}


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

@media (max-width: 767px) {

    .tdc-founder-story {
        padding: 44px 0;
    }

    .tdc-founder-container {
        width: 90%;
    }

    .tdc-founder-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }


    /* IMAGE */

    .tdc-founder-visual {
        max-width: none;
    }

    .tdc-founder-image {
        height: 430px;
    }

    .tdc-founder-image-tag {
        left: 12px;
        bottom: 12px;

        max-width: calc(100% - 24px);
    }


    /* QUOTE */

    .tdc-founder-quote {
        position: relative;

        right: auto;
        top: auto;

        width: calc(100% - 24px);

        margin: -18px auto 0;

        border-radius: 7px;
    }

    .tdc-founder-quote p {
        font-size: 16px;
        line-height: 1.5;
    }


    /* LABEL */

    .tdc-founder-label {
        padding-left: 28px;

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

    .tdc-founder-label::before {
        width: 18px;
    }


    /* HEADING */

    .tdc-founder-content h2 {
        font-size: 24px;
        line-height: 1.25;
    }


    /* TEXT */

    .tdc-founder-content > p {
        font-size: 16px;
        line-height: 1.5;
    }

    .tdc-founder-content .tdc-founder-lead {
        font-size: 16px;
        line-height: 1.5;
    }


    /* CONCEPT */

    .tdc-founder-concept {
        grid-template-columns: 44px minmax(0, 1fr);

        padding: 13px;
    }

    .tdc-founder-concept-icon {
        width: 44px;
        height: 44px;
    }


    /* SIGNATURE */

    .tdc-founder-signature {
        align-items: flex-start;
        flex-direction: column;
    }

    .tdc-founder-link {
        justify-content: center;

        width: 100%;
    }

}
/* ==========================================================
   SECTION 11 — PULL UP A CHAIR
========================================================== */

.tdc-about-closing {
    position: relative;
    width: 100%;
    padding: 55px 0 32px;
    background: #f8f7f4;
    overflow: hidden;
}

.tdc-about-closing * {
    box-sizing: border-box;
}

.tdc-about-closing::before {
    content: "";
    position: absolute;

    width: 450px;
    height: 450px;

    right: -250px;
    top: -280px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(242, 99, 34, .12),
            transparent 70%
        );

    pointer-events: none;
}


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

.tdc-about-closing-container {
    position: relative;
    z-index: 2;

    width: min(90%, 1400px);
    margin: 0 auto;
}


/* ==========================================================
   MAIN BOX
========================================================== */

.tdc-about-closing-box {
    display: grid;

    grid-template-columns:
        minmax(350px, 1fr)
        minmax(300px, .75fr)
        minmax(300px, .75fr);

    align-items: center;

    min-height: 310px;

    background: #111111;

    border-radius: 12px;

    overflow: hidden;
}


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

.tdc-closing-intro {
    padding: 35px;
}


/* LABEL */

.tdc-closing-label {
    position: relative;

    display: inline-flex;
    align-items: center;

    margin-bottom: 10px;
    padding-left: 31px;

    color: #aaa6a2;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    letter-spacing: .8px;
    text-transform: uppercase;
}

.tdc-closing-label::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 21px;
    height: 2px;

    background: #f26322;

    transform: translateY(-50%);
}


/* ==========================================================
   HEADING
========================================================== */

.tdc-closing-intro h2 {
    margin: 0 0 12px;

    color: #ffffff;

    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;

    letter-spacing: -.5px;
}

.tdc-closing-intro h2 span {
    display: block;
    color: #f26322;
}


/* ==========================================================
   TEXT
========================================================== */

.tdc-closing-intro p {
    max-width: 520px;

    margin: 0;

    color: #aaa6a2;

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


/* ==========================================================
   CENTER
========================================================== */

.tdc-closing-conversation {
    position: relative;

    min-height: 310px;

    display: flex;
    flex-direction: column;

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

    padding: 25px;

    background: #181818;

    border-left: 1px solid rgba(255,255,255,.08);
    border-right: 1px solid rgba(255,255,255,.08);

    text-align: center;
}


/* ==========================================================
   CUP
========================================================== */

.tdc-closing-cup {
    position: relative;

    width: 82px;
    height: 82px;

    margin-bottom: 18px;
}

.tdc-closing-cup-icon {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 82px;
    height: 82px;

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

    background: #f26322;

    border-radius: 50%;

    color: #ffffff;

    font-size: 27px;

    box-shadow:
        0 0 0 8px rgba(242,99,34,.08),
        0 0 0 16px rgba(242,99,34,.035);
}


/* ==========================================================
   STEAM
========================================================== */

.tdc-cup-steam {
    position: absolute;

    z-index: 2;

    top: -17px;

    width: 2px;
    height: 23px;

    background: linear-gradient(
        to top,
        rgba(255,255,255,.7),
        transparent
    );

    border-radius: 10px;

    opacity: .6;

    animation: tdcSteam 2.2s ease-in-out infinite;
}

.steam-one {
    left: 27px;
}

.steam-two {
    left: 41px;

    height: 29px;

    animation-delay: .4s;
}

.steam-three {
    left: 55px;

    animation-delay: .8s;
}


@keyframes tdcSteam {

    0% {
        transform: translateY(7px) scaleY(.7);
        opacity: 0;
    }

    35% {
        opacity: .65;
    }

    100% {
        transform: translateY(-10px) scaleY(1.15);
        opacity: 0;
    }

}


/* ==========================================================
   QUESTION
========================================================== */

.tdc-closing-question > span {
    display: block;

    margin-bottom: 4px;

    color: #77726e;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    text-transform: uppercase;
}

.tdc-closing-question strong {
    display: block;

    color: #ffffff;

    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
}

.tdc-closing-question em {
    display: block;

    color: #f26322;

    font-style: normal;
}


/* ==========================================================
   RIGHT ACTION
========================================================== */

.tdc-closing-action {
    padding: 30px;
}

.tdc-closing-action > p {
    margin: 0 0 17px;

    color: #c2bdb9;

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


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

.tdc-closing-btn {
    display: inline-flex;

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

    gap: 10px;

    padding: 11px 17px;

    background: #f26322;

    border: 1px solid #f26322;
    border-radius: 6px;

    color: #ffffff;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    text-decoration: none;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.tdc-closing-btn:hover {
    background: #ffffff;

    border-color: #ffffff;

    color: #111111;

    transform: translateY(-2px);
}

.tdc-closing-btn i {
    font-size: 11px;

    transition: transform .3s ease;
}

.tdc-closing-btn:hover i {
    transform: translateX(3px);
}


/* ==========================================================
   SMALL TEXT
========================================================== */

.tdc-closing-small {
    display: block;

    margin-top: 10px;

    color: #77726e;

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


/* ==========================================================
   BOTTOM LINE
========================================================== */

.tdc-closing-bottom {
    display: flex;

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

    flex-wrap: wrap;

    gap: 12px;

    padding: 18px 15px 0;

    color: #77716c;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}

.tdc-closing-bottom .fa-circle {
    color: #d5cec8;

    font-size: 4px;
}

.tdc-closing-bottom .fa-arrow-right {
    color: #f26322;

    font-size: 10px;
}

.tdc-closing-bottom strong {
    color: #f26322;
}


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

@media (max-width: 1050px) {

    .tdc-about-closing-box {
        grid-template-columns:
            1fr
            1fr;
    }

    .tdc-closing-intro {
        grid-column: 1 / -1;

        padding: 28px;

        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .tdc-closing-conversation {
        min-height: 240px;

        border-left: 0;
    }

}


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

@media (max-width: 767px) {

    .tdc-about-closing {
        padding: 44px 0 28px;
    }

    .tdc-about-closing-container {
        width: 90%;
    }


    /* BOX */

    .tdc-about-closing-box {
        display: block;

        min-height: 0;

        border-radius: 9px;
    }


    /* INTRO */

    .tdc-closing-intro {
        padding: 23px 20px;
    }

    .tdc-closing-label {
        padding-left: 28px;

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

    .tdc-closing-label::before {
        width: 18px;
    }

    .tdc-closing-intro h2 {
        font-size: 24px;
        line-height: 1.25;
    }

    .tdc-closing-intro h2 span {
        display: inline;
    }

    .tdc-closing-intro p {
        font-size: 16px;
        line-height: 1.5;
    }


    /* CENTER */

    .tdc-closing-conversation {
        min-height: 220px;

        padding: 25px 20px;

        border-left: 0;
        border-right: 0;

        border-top: 1px solid rgba(255,255,255,.08);
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .tdc-closing-question strong {
        font-size: 18px;
        line-height: 1.4;
    }


    /* ACTION */

    .tdc-closing-action {
        padding: 22px 20px;
    }

    .tdc-closing-action > p {
        font-size: 16px;
        line-height: 1.5;
    }

    .tdc-closing-btn {
        width: 100%;
    }


    /* BOTTOM */

    .tdc-closing-bottom {
        gap: 8px;

        padding-top: 15px;
    }

}


/* ==========================================================
   ACCESSIBILITY — REDUCE ANIMATION
========================================================== */

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

    .tdc-cup-steam {
        animation: none;
        opacity: .35;
    }

}