/* The Digital Cafe — About Sections 03 & 04 */
/* ==========================================================
   SECTION 03 STARTS HERE
========================================================== */

/* ==========================================================
   SECTION 03 — THE DIGITAL CAFE MENU
   COMPLETE REPLACEMENT CSS
========================================================== */

.tdc-digital-menu {
    position: relative;
    width: 100%;
    padding: 52px 0;
    background: #101010;
    overflow: hidden;
}

.tdc-digital-menu * {
    box-sizing: border-box;
}


/* ==========================================================
   BACKGROUND DETAIL
========================================================== */

.tdc-digital-menu::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    top: -280px;
    right: -200px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(242, 99, 34, 0.15) 0%,
        rgba(242, 99, 34, 0.04) 45%,
        transparent 70%
    );
    pointer-events: none;
}


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

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


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

.tdc-digital-menu-header {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: end;
    gap: 70px;
    margin-bottom: 27px;
}


/* LABEL */

.tdc-menu-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-bottom: 9px;
    padding-left: 31px;

    color: #aaa5a0;

    font-family: inherit;
    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: 21px;
    height: 2px;
    background: #f26322;
    transform: translateY(-50%);
}


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

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

    color: #ffffff;

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

    letter-spacing: -0.5px;
}

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


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

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

    color: #aaa5a0;

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


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

.tdc-menu-board {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    width: 100%;

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


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

.tdc-digital-menu .tdc-menu-item {
    position: relative;
    display: block;

    min-width: 0;
    min-height: 205px;

    padding: 18px 20px;

    background: transparent;

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

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

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


/* Orange hover line */

.tdc-digital-menu .tdc-menu-item::before {
    content: "";
    position: absolute;

    top: -1px;
    left: 20px;

    width: 0;
    height: 2px;

    background: #f26322;

    transition: width 0.3s ease;
}

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


/* ==========================================================
   NUMBER + ICON
========================================================== */

.tdc-digital-menu .tdc-menu-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    margin-bottom: 12px;
}

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

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

    letter-spacing: 1px;
}


/* ICON */

.tdc-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;
    flex: 0 0 36px;

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

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

    color: #f26322;

    font-size: 13px;

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

.tdc-digital-menu .tdc-menu-item:hover .tdc-menu-icon {
    background: #f26322;
    color: #ffffff;
    transform: rotate(-7deg);
}


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

.tdc-menu-title-row {
    display: flex;
    align-items: baseline;

    width: 100%;
    min-width: 0;

    gap: 7px;
    margin-bottom: 6px;
}


/* H3 */

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

    margin: 0;

    color: #ffffff;

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

    white-space: nowrap;
}


/* DOTTED MENU LINE */

.tdc-menu-dots {
    flex: 1;
    min-width: 8px;

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

    transform: translateY(-3px);
}


/* SERVICE TYPE */

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

    color: #8f8984;

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

    text-transform: uppercase;
}


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

.tdc-menu-tagline {
    display: block;

    margin: 0 0 6px;

    color: #f26322;

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


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

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

    color: #aaa5a0;

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


/* ==========================================================
   HOUSE RECOMMENDATION BAR
========================================================== */

.tdc-menu-footer {
    display: grid;

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

    align-items: center;

    gap: 30px;

    min-height: 70px;

    padding: 12px 20px;

    background: #f26322;
}


/* LEFT */

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

    margin-bottom: 1px;

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

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

    letter-spacing: 0.5px;

    text-transform: uppercase;
}

.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;

    flex-wrap: nowrap;

    gap: 8px;

    color: #ffffff;

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

.tdc-menu-footer-recipe > span {
    white-space: nowrap;
}

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

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

    font-size: 15px;

    opacity: 1;
}

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

    border-radius: 20px;

    background: #111111;

    color: #ffffff;

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

    white-space: nowrap;
}


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

@media (max-width: 1200px) {

    .tdc-menu-title-row {
        flex-wrap: wrap;
    }

    .tdc-menu-dots {
        display: none;
    }

    .tdc-menu-service {
        width: 100%;
    }

}


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

@media (max-width: 991px) {

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

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

        margin-bottom: 24px;
    }

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

    .tdc-digital-menu .tdc-menu-item {
        min-height: 195px;
    }

    .tdc-menu-footer {
        grid-template-columns: 1fr;
        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 {
        display: block;
        margin-bottom: 22px;
    }

    .tdc-digital-menu-heading {
        margin-bottom: 10px;
    }

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

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

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


    /* H2 */

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

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


    /* MENU */

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

    .tdc-digital-menu .tdc-menu-item {
        min-height: auto;
        padding: 18px;
    }

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


    /* TITLE */

    .tdc-menu-title-row {
        flex-wrap: nowrap;
    }

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

    .tdc-menu-dots {
        display: block;
    }

    .tdc-menu-service {
        width: auto;

        font-size: 14px;
    }


    /* CONTENT */

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

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


    /* RECOMMENDATION */

    .tdc-menu-footer {
        display: block;

        min-height: auto;

        padding: 17px 18px;
    }

    .tdc-menu-footer-copy {
        margin-bottom: 13px;
    }

    .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;
    }

}


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

@media (max-width: 420px) {

    .tdc-menu-title-row {
        flex-wrap: wrap;
    }

    .tdc-menu-dots {
        display: none;
    }

    .tdc-menu-service {
        width: 100%;
    }

}

/* ==========================================================
   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 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 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;
    }

}