/* ==========================================================
   SECTION 01 — HERO
   THE DIGITAL CAFE
========================================================== */

.tdc-hero {
    position: relative;
    width: 100%;
    padding: 65px 0 72px;
    background:
        radial-gradient(circle at 82% 45%, rgba(255, 107, 0, 0.055), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #fffdf9 48%, #fff8f1 100%);
    overflow: hidden;
}


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

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

.tdc-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 48%) minmax(0, 52%);
    align-items: center;
    gap: 25px;
}


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

.tdc-hero-content {
    position: relative;
    z-index: 5;
    max-width: 650px;
}


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

.tdc-hero-label {
    position: relative;
    display: inline-block;

    margin-bottom: 18px;
    padding-left: 37px;

    color: #55514c;

    font-family: var(--tdc-body);
    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;

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


/* Orange line */

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

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

    width: 26px;
    height: 2px;

    background: #ff6b00;

    transform: translateY(-50%);
}


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

.tdc-hero-heading {
    margin: 0;

    color: #111111;

    font-family: var(--tdc-heading);

    font-size: clamp(48px, 4.5vw, 68px);

    line-height: 1.07;

    letter-spacing: -3.2px;

    font-weight: 800;
}


/* Orange text */

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


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

.tdc-hero-text {
    max-width: 570px;

    margin: 24px 0 0;

    color: #65615d;

    font-family: var(--tdc-body);

    font-size: 16px;

    line-height: 1.75;

    font-weight: 400;
}


/* ==========================================================
   HERO BUTTON AREA
========================================================== */

.tdc-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 13px;

    margin-top: 28px;
}


/* ==========================================================
   GENERAL BUTTON
========================================================== */

.tdc-hero-btn {
    min-height: 52px;

    padding: 0 22px;

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

    gap: 14px;

    border-radius: 50px;

    text-decoration: none;

    font-family: var(--tdc-body);

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;

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


.tdc-hero-btn i {
    font-size: 11px;

    transition: transform 0.3s ease;
}


.tdc-hero-btn:hover i {
    transform: translateX(4px);
}


/* ==========================================================
   ORANGE BUTTON
========================================================== */

.tdc-hero-btn-primary {
    padding-left: 25px;
    padding-right: 20px;

    background: #f26322;

    color: #ffffff;

    box-shadow:
        0 10px 25px rgba(242, 99, 34, 0.16);
}


.tdc-hero-btn-primary:hover {
    background: #111111;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 13px 30px rgba(0, 0, 0, 0.14);
}


/* ==========================================================
   BLACK BUTTON
========================================================== */

.tdc-hero-btn-dark {
    background: #111111;

    color: #ffffff;

    padding-left: 24px;
    padding-right: 20px;

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


.tdc-hero-btn-dark i {
    color: #f26322;
}


.tdc-hero-btn-dark:hover {
    background: #f26322;

    transform: translateY(-2px);

    box-shadow:
        0 13px 30px rgba(242, 99, 34, 0.18);
}


.tdc-hero-btn-dark:hover i {
    color: #ffffff;
}


/* ==========================================================
   CLIENT TRUST AREA
========================================================== */

.tdc-hero-trust {
    display: flex;
    align-items: flex-end;

    gap: 27px;

    margin-top: 38px;
}


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

.tdc-hero-trust-left {
    display: flex;
    flex-direction: column;

    gap: 10px;
}


.tdc-trust-title {
    color: #6b6762;

    font-family: var(--tdc-body);

    font-size: 11px;

    font-weight: 500;
}


/* ==========================================================
   CLIENT AVATARS
========================================================== */

.tdc-trust-avatars {
    display: flex;
    align-items: center;
}


.tdc-trust-avatars img,
.tdc-trust-avatars > span {
    width: 38px;
    height: 38px;

    margin-left: -8px;

    border: 3px solid #fffaf5;

    border-radius: 50%;
}


.tdc-trust-avatars img:first-child {
    margin-left: 0;
}


.tdc-trust-avatars img {
    display: block;

    object-fit: cover;

    background: #eeeeee;
}


/* 50+ Circle */

.tdc-trust-avatars > span {
    display: flex;
    align-items: center;
    justify-content: center;

    background: #111111;

    color: #ffffff;

    font-size: 9px;

    font-weight: 700;
}


/* ==========================================================
   TRUST TEXT
========================================================== */

.tdc-hero-trust-text {
    position: relative;

    padding-left: 25px;
    padding-bottom: 2px;
}


/* Divider */

.tdc-hero-trust-text::before {
    content: "";

    position: absolute;

    left: 0;
    top: 2px;

    width: 1px;
    height: 37px;

    background: #ddd6cf;
}


.tdc-hero-trust-text strong {
    display: block;

    margin-bottom: 4px;

    color: #1c1c1c;

    font-family: var(--tdc-body);

    font-size: 12px;

    font-weight: 700;
}


.tdc-hero-trust-text span {
    display: block;

    color: #77716c;

    font-size: 11px;

    font-weight: 500;
}


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

.tdc-hero-visual {
    position: relative;

    width: 100%;

    height: 520px;

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

    isolation: isolate;
}


/* ==========================================================
   SUBTLE GLOW BEHIND CUP
========================================================== */

.tdc-hero-visual::before {
    content: "";

    position: absolute;

    z-index: -3;

    left: 50%;
    top: 50%;

    width: 440px;
    height: 440px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 139, 52, 0.09) 0%,
            rgba(255, 139, 52, 0.035) 48%,
            rgba(255, 139, 52, 0) 72%
        );
}


/* ==========================================================
   ORBIT CIRCLES
========================================================== */

.tdc-hero-orbit {
    position: absolute;

    z-index: -1;

    left: 50%;
    top: 50%;

    border-radius: 50%;

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

    pointer-events: none;
}


/* Outer orbit */

.orbit-one {
    width: 455px;
    height: 455px;

    border: 1px dashed rgba(45, 45, 45, 0.10);
}


/* Inner orbit */

.orbit-two {
    width: 345px;
    height: 345px;

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


/* Small center circle */

.tdc-hero-visual::after {
    content: "";

    position: absolute;

    z-index: -1;

    left: 50%;
    top: 50%;

    width: 245px;
    height: 245px;

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

    border: 1px solid rgba(25, 25, 25, 0.055);

    border-radius: 50%;
}


/* ==========================================================
   MAIN COFFEE CUP
========================================================== */

.tdc-hero-cup {
    position: absolute;

    z-index: 5;

    left: 50%;
    top: 50%;

    width: 370px;
    height: 470px;

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

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


.tdc-hero-cup img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 24px 24px
            rgba(0, 0, 0, 0.15)
        );
}


/* ==========================================================
   SERVICE POINT
========================================================== */

.tdc-service-point {
    position: absolute;

    z-index: 15;

    display: flex;
    align-items: center;

    gap: 9px;
}


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

.tdc-service-icon {
    position: relative;

    width: 47px;
    height: 47px;

    min-width: 47px;

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

    border-radius: 50%;

    background: #ffffff;

    font-size: 15px;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.08);
}


/* Outer ring */

.tdc-service-icon::before {
    content: "";

    position: absolute;

    inset: -5px;

    border-radius: 50%;

    border: 1px solid currentColor;

    opacity: 0.18;
}


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

.tdc-service-icon.orange {
    color: #f26322;
    background: #fff7f2;
}


.tdc-service-icon.purple {
    color: #6657df;
    background: #f6f4ff;
}


.tdc-service-icon.green {
    color: #28a66b;
    background: #f1fbf6;
}


.tdc-service-icon.pink {
    color: #e84c71;
    background: #fff4f7;
}


.tdc-service-icon.blue {
    color: #348ac7;
    background: #f2f9fd;
}


/* ==========================================================
   SERVICE NAME
========================================================== */

.tdc-service-name {
    color: #252525;

    font-family: var(--tdc-body);

    font-size: 11px;

    line-height: 1.35;

    font-weight: 700;

    white-space: nowrap;
}


/* ==========================================================
   SERVICE POSITIONS
========================================================== */

/* Top */

.point-marketing {
    top: 27px;
    left: 50%;

    transform: translateX(-15%);
}


/* Left middle */

.point-branding {
    top: 175px;
    left: 8px;
}


/* Right upper */

.point-website {
    top: 150px;
    right: -2px;
}


/* Left lower */

.point-social {
    left: -15px;
    bottom: 95px;
}


/* Right lower */

.point-seo {
    right: 10px;
    bottom: 90px;
}


/* ==========================================================
   OPTIONAL CONNECTOR DOTS
========================================================== */

.tdc-service-point::after {
    content: "";

    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: rgba(242, 99, 34, 0.35);
}


.point-marketing::after {
    left: 22px;
    top: 61px;
}


.point-branding::after {
    right: -24px;
    top: 22px;
}


.point-website::after {
    left: -23px;
    top: 22px;
}


.point-social::after {
    right: -24px;
    top: 22px;
}


.point-seo::after {
    left: -23px;
    top: 22px;
}


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

.tdc-service-point {
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}


.tdc-service-point:hover .tdc-service-icon {
    transform: translateY(-3px);
}


.tdc-service-icon {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.tdc-service-point:hover .tdc-service-icon {
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.12);
}


/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (min-width: 1500px) {

    .tdc-hero {
        padding-top: 75px;
        padding-bottom: 78px;
    }

    .tdc-hero-visual {
        height: 550px;
    }

    .tdc-hero-cup {
        width: 395px;
        height: 495px;
    }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width: 1200px) {

    .tdc-hero {
        padding: 55px 0 65px;
    }


    .tdc-hero-container {
        width: 92%;
    }


    .tdc-hero-grid {
        grid-template-columns:
            minmax(0, 49%)
            minmax(0, 51%);

        gap: 10px;
    }


    .tdc-hero-heading {
        font-size: clamp(45px, 4.6vw, 59px);

        letter-spacing: -2.6px;
    }


    .tdc-hero-text {
        max-width: 520px;

        font-size: 15px;
    }


    .tdc-hero-visual {
        height: 485px;
    }


    .tdc-hero-cup {
        width: 335px;
        height: 430px;
    }


    .orbit-one {
        width: 410px;
        height: 410px;
    }


    .orbit-two {
        width: 315px;
        height: 315px;
    }


    .point-branding {
        left: 0;
    }


    .point-social {
        left: 0;
    }


    .point-website {
        right: 0;
    }


    .point-seo {
        right: 0;
    }

}


/* ==========================================================
   SMALL LAPTOP / LARGE TABLET
========================================================== */

@media (max-width: 1050px) {

    .tdc-hero {
        padding-top: 60px;
    }


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

        gap: 35px;
    }


    .tdc-hero-content {
        max-width: 780px;

        margin: 0 auto;

        text-align: center;
    }


    .tdc-hero-label {
        margin-left: auto;
        margin-right: auto;
    }


    .tdc-hero-heading {
        font-size: clamp(50px, 7vw, 68px);
    }


    .tdc-hero-text {
        max-width: 620px;

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


    .tdc-hero-actions {
        justify-content: center;
    }


    .tdc-hero-trust {
        justify-content: center;
    }


    .tdc-hero-trust-left {
        text-align: left;
    }


    .tdc-hero-trust-text {
        text-align: left;
    }


    .tdc-hero-visual {
        max-width: 650px;

        height: 510px;

        margin: 0 auto;
    }


    .tdc-hero-cup {
        width: 365px;
        height: 460px;
    }


    .orbit-one {
        width: 440px;
        height: 440px;
    }


    .orbit-two {
        width: 335px;
        height: 335px;
    }


    .point-branding {
        left: 20px;
    }


    .point-social {
        left: 5px;
    }


    .point-website {
        right: 15px;
    }


    .point-seo {
        right: 15px;
    }

}


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

@media (max-width: 768px) {

    .tdc-hero {
        padding:
            50px 0
            55px;
    }


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


    .tdc-hero-heading {
        font-size: 51px;

        line-height: 1.08;

        letter-spacing: -2.3px;
    }


    .tdc-hero-text {
        font-size: 15px;

        line-height: 1.7;
    }


    .tdc-hero-visual {
        max-width: 580px;

        height: 470px;
    }


    .tdc-hero-cup {
        width: 330px;
        height: 420px;
    }


    .orbit-one {
        width: 390px;
        height: 390px;
    }


    .orbit-two {
        width: 300px;
        height: 300px;
    }


    .tdc-service-icon {
        width: 42px;
        height: 42px;

        min-width: 42px;

        font-size: 13px;
    }


    .tdc-service-name {
        font-size: 10px;
    }


    .point-marketing {
        top: 15px;
    }


    .point-branding {
        top: 145px;
    }


    .point-website {
        top: 130px;
    }


    .point-social {
        bottom: 80px;
    }


    .point-seo {
        bottom: 75px;
    }

}


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

@media (max-width: 600px) {

    .tdc-hero {
        padding:
            42px 0
            45px;
    }


    .tdc-hero-grid {
        gap: 30px;
    }


    /* Label */

    .tdc-hero-label {
        margin-bottom: 15px;

        padding-left: 30px;

        font-size: 9px;

        letter-spacing: 0.9px;
    }


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


    /* Heading */

    .tdc-hero-heading {
        font-size: clamp(39px, 11vw, 48px);

        line-height: 1.07;

        letter-spacing: -2px;
    }


    /* Description */

    .tdc-hero-text {
        margin-top: 20px;

        font-size: 14px;

        line-height: 1.7;
    }


    /* Buttons */

    .tdc-hero-actions {
        margin-top: 25px;

        flex-direction: column;

        align-items: stretch;

        gap: 10px;
    }


    .tdc-hero-btn {
        width: 100%;

        min-height: 52px;

        padding: 0 20px;
    }


    /* Trust */

    .tdc-hero-trust {
        margin-top: 30px;

        align-items: center;

        justify-content: center;

        gap: 17px;
    }


    .tdc-trust-title {
        font-size: 9px;
    }


    .tdc-trust-avatars img,
    .tdc-trust-avatars > span {
        width: 34px;
        height: 34px;

        margin-left: -8px;
    }


    .tdc-hero-trust-text {
        padding-left: 17px;
    }


    .tdc-hero-trust-text::before {
        height: 34px;
    }


    .tdc-hero-trust-text strong {
        font-size: 10px;
    }


    .tdc-hero-trust-text span {
        font-size: 9px;
    }


    /* Visual */

    .tdc-hero-visual {
        width: 100%;

        height: 390px;

        margin-top: 5px;
    }


    .tdc-hero-cup {
        width: 270px;
        height: 350px;
    }


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


    .orbit-two {
        width: 245px;
        height: 245px;
    }


    .tdc-hero-visual::after {
        width: 185px;
        height: 185px;
    }


    /* Service icons */

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

        min-width: 38px;

        font-size: 12px;
    }


    .tdc-service-name {
        font-size: 9px;
    }


    /* Positioning */

    .point-marketing {
        top: 5px;

        left: 48%;

        transform: translateX(-20%);
    }


    .point-branding {
        top: 115px;

        left: 0;
    }


    .point-website {
        top: 100px;

        right: 0;
    }


    .point-social {
        left: 0;

        bottom: 55px;
    }


    .point-seo {
        right: 0;

        bottom: 55px;
    }


    /* Remove connector dots */

    .tdc-service-point::after {
        display: none;
    }

}


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

@media (max-width: 430px) {

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


    .tdc-hero-heading {
        font-size: 40px;

        letter-spacing: -1.8px;
    }


    .tdc-hero-trust {
        flex-direction: column;

        align-items: center;

        gap: 14px;
    }


    .tdc-hero-trust-left {
        align-items: center;

        text-align: center;
    }


    .tdc-hero-trust-text {
        padding-left: 0;

        text-align: center;
    }


    .tdc-hero-trust-text::before {
        display: none;
    }


    /* Visual */

    .tdc-hero-visual {
        height: 355px;
    }


    .tdc-hero-cup {
        width: 235px;
        height: 310px;
    }


    .orbit-one {
        width: 280px;
        height: 280px;
    }


    .orbit-two {
        width: 215px;
        height: 215px;
    }


    .tdc-hero-visual::after {
        width: 165px;
        height: 165px;
    }


    /* Nodes become more compact */

    .tdc-service-point {
        gap: 5px;
    }


    .tdc-service-icon {
        width: 34px;
        height: 34px;

        min-width: 34px;

        font-size: 10px;
    }


    .tdc-service-icon::before {
        inset: -3px;
    }


    .tdc-service-name {
        font-size: 8px;

        line-height: 1.25;
    }


    .point-marketing {
        top: 2px;
    }


    .point-branding {
        top: 105px;

        left: -2px;
    }


    .point-website {
        top: 90px;

        right: -3px;
    }


    .point-social {
        left: -2px;

        bottom: 42px;
    }


    .point-seo {
        right: -2px;

        bottom: 40px;
    }

}


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

@media (max-width: 360px) {

    .tdc-hero-heading {
        font-size: 36px;

        letter-spacing: -1.5px;
    }


    .tdc-hero-text {
        font-size: 13px;
    }


    .tdc-hero-visual {
        height: 325px;
    }


    .tdc-hero-cup {
        width: 210px;
        height: 285px;
    }


    .orbit-one {
        width: 255px;
        height: 255px;
    }


    .orbit-two {
        width: 195px;
        height: 195px;
    }


    .tdc-service-name {
        display: none;
    }


    .point-branding {
        left: 5px;
    }


    .point-website {
        right: 5px;
    }


    .point-social {
        left: 12px;
    }


    .point-seo {
        right: 12px;
    }

}
/* ==========================================================
   SECTION 02 — SERVICES
========================================================== */

.tdc-services {
    position: relative;

    padding: 82px 0 88px;

    background: #f8f7f4;

    overflow: hidden;
}


/* subtle background detail */

.tdc-services::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -250px;
    right: -160px;

    border-radius: 50%;

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

    pointer-events: none;
}


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

    width: min(90%, 1400px);

    margin: 0 auto;
}


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

.tdc-services-header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(300px, 0.75fr);

    align-items: end;

    gap: 70px;

    margin-bottom: 42px;
}


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

.tdc-section-label {
    position: relative;

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

    padding-left: 35px;

    margin-bottom: 15px;

    color: #625d58;

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

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


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

    position: absolute;

    left: 0;
    top: 50%;

    width: 24px;
    height: 2px;

    background: var(--tdc-orange);

    transform: translateY(-50%);
}


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

.tdc-services-heading {
    max-width: 720px;

    margin: 0;

    color: var(--tdc-black);

    font-family: var(--tdc-heading);

    font-size: clamp(38px, 3.5vw, 52px);

    line-height: 1.08;

    letter-spacing: -2.3px;

    font-weight: 800;
}


.tdc-services-heading span {
    color: var(--tdc-orange);
}


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

.tdc-services-intro {
    max-width: 430px;

    justify-self: end;
}


.tdc-services-intro p {
    margin: 0 0 17px;

    color: var(--tdc-muted);

    font-size: 14px;

    line-height: 1.7;
}


/* ==========================================================
   TEXT LINK
========================================================== */

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

    align-items: center;

    gap: 10px;

    color: var(--tdc-black);

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;
}


.tdc-text-link i {
    color: var(--tdc-orange);

    font-size: 10px;

    transition: transform 0.3s ease;
}


.tdc-text-link:hover {
    color: var(--tdc-orange);
}


.tdc-text-link:hover i {
    transform: translateX(4px);
}


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

.tdc-services-grid {
    display: grid;

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

    gap: 14px;
}


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

.tdc-service-card {
    position: relative;

    min-height: 245px;

    padding: 24px 24px 20px;

    display: flex;

    flex-direction: column;

    background: #ffffff;

    border: 1px solid #ebe8e4;

    border-radius: 16px;

    color: inherit;

    text-decoration: none;

    overflow: hidden;

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


/* orange top line */

.tdc-service-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: var(--tdc-orange);

    transform: scaleX(0);

    transform-origin: left;

    transition: transform 0.35s ease;
}


.tdc-service-card:hover {
    transform: translateY(-5px);

    border-color: rgba(242, 99, 34, 0.20);

    box-shadow:
        0 18px 45px
        rgba(25, 20, 15, 0.07);
}


.tdc-service-card:hover::before {
    transform: scaleX(1);
}


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

.tdc-service-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 22px;
}


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

.tdc-service-card-icon {
    width: 45px;
    height: 45px;

    min-width: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    font-size: 15px;
}


/* icon colours */

.tdc-service-card-icon.orange {
    color: #f26322;
    background: #fff1e9;
}


.tdc-service-card-icon.purple {
    color: #6657df;
    background: #f2f0ff;
}


.tdc-service-card-icon.green {
    color: #269866;
    background: #edf9f3;
}


.tdc-service-card-icon.pink {
    color: #df4f72;
    background: #fff0f4;
}


.tdc-service-card-icon.blue {
    color: #348ac7;
    background: #edf7fd;
}


.tdc-service-card-icon.yellow {
    color: #c58a16;
    background: #fff8e7;
}


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

.tdc-service-number {
    color: #c8c4bf;

    font-family: var(--tdc-heading);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    transition: color 0.3s ease;
}


.tdc-service-card:hover
.tdc-service-number {
    color: var(--tdc-orange);
}


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

.tdc-service-card-content {
    flex: 1;
}


.tdc-service-card-content h3 {
    margin: 0 0 9px;

    color: var(--tdc-black);

    font-family: var(--tdc-heading);

    font-size: 19px;

    line-height: 1.25;

    letter-spacing: -0.6px;

    font-weight: 750;
}


.tdc-service-card-content p {
    max-width: 330px;

    margin: 0;

    color: #716c67;

    font-size: 13px;

    line-height: 1.65;
}


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

.tdc-service-card-bottom {
    margin-top: 20px;

    padding-top: 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    border-top: 1px solid #efedea;
}


.tdc-service-card-bottom > span:first-child {
    color: #918b85;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.4px;

    text-transform: uppercase;
}


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

.tdc-service-arrow {
    width: 29px;
    height: 29px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: #f5f3f0;

    color: var(--tdc-black);

    font-size: 9px;

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


.tdc-service-card:hover
.tdc-service-arrow {
    background: var(--tdc-orange);

    color: #ffffff;

    transform: rotate(-35deg);
}


/* ==========================================================
   SERVICES — TABLET
========================================================== */

@media (max-width: 1050px) {

    .tdc-services {
        padding: 70px 0 75px;
    }


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

        gap: 20px;

        margin-bottom: 35px;
    }


    .tdc-services-intro {
        max-width: 600px;

        justify-self: start;
    }


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

}


/* ==========================================================
   SERVICES — MOBILE
========================================================== */

@media (max-width: 600px) {

    .tdc-services {
        padding: 58px 0 62px;
    }


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


    .tdc-services-header {
        gap: 17px;

        margin-bottom: 29px;
    }


    .tdc-section-label {
        margin-bottom: 12px;

        padding-left: 30px;

        font-size: 9px;
    }


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


    .tdc-services-heading {
        font-size: 36px;

        line-height: 1.1;

        letter-spacing: -1.6px;
    }


    .tdc-services-intro p {
        font-size: 13px;

        line-height: 1.65;
    }


    .tdc-services-grid {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    /*
     Mobile cards become more compact.
    */

    .tdc-service-card {
        min-height: auto;

        padding: 18px;
    }


    .tdc-service-card-top {
        margin-bottom: 15px;
    }


    .tdc-service-card-icon {
        width: 42px;
        height: 42px;

        min-width: 42px;

        font-size: 14px;
    }


    .tdc-service-card-content h3 {
        margin-bottom: 6px;

        font-size: 18px;
    }


    .tdc-service-card-content p {
        font-size: 12px;

        line-height: 1.6;
    }


    .tdc-service-card-bottom {
        margin-top: 15px;

        padding-top: 13px;
    }

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

.tdc-about {
    position: relative;

    padding: 80px 0;

    background: #ffffff;

    overflow: hidden;
}


.tdc-about-container {
    position: relative;

    width: min(90%, 1400px);

    margin: 0 auto;
}


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

.tdc-about-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    align-items: center;

    gap: 70px;
}


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

.tdc-about-visual {
    position: relative;

    width: 100%;
}


.tdc-about-image-wrap {
    position: relative;

    width: 100%;
    height: 460px;

    overflow: visible;
}


/* Main Image */

.tdc-about-image {
    width: calc(100% - 35px);
    height: 100%;

    object-fit: cover;

    border-radius: 22px;
}


/* ==========================================================
   ORANGE DECORATIVE BLOCK
========================================================== */

.tdc-about-image-wrap::before {
    content: "";

    position: absolute;

    z-index: -1;

    left: -16px;
    bottom: -16px;

    width: 145px;
    height: 145px;

    background: #f26322;

    border-radius: 18px;
}


/* ==========================================================
   IMAGE DOT PATTERN
========================================================== */

.tdc-about-image-wrap::after {
    content: "";

    position: absolute;

    z-index: -1;

    top: -20px;
    right: 10px;

    width: 100px;
    height: 100px;

    opacity: 0.35;

    background-image:
        radial-gradient(
            #f26322 1.5px,
            transparent 1.5px
        );

    background-size: 12px 12px;
}


/* ==========================================================
   EXPERIENCE BADGE
========================================================== */

.tdc-about-badge {
    position: absolute;

    right: 0;
    top: 42px;

    width: 125px;
    height: 125px;

    padding: 18px;

    display: flex;
    flex-direction: column;

    justify-content: center;

    background: #111111;

    color: #ffffff;

    border-radius: 50%;

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, 0.16);
}


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

    margin-bottom: 3px;

    color: #f26322;

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

    font-weight: 700;
}


.tdc-about-badge span {
    font-size: 14px;
    line-height: 1.4;

    font-weight: 600;
}


/* ==========================================================
   FLOATING INFORMATION
========================================================== */

.tdc-about-float {
    position: absolute;

    right: 5px;
    bottom: 32px;

    padding: 13px 17px;

    display: flex;
    align-items: center;

    gap: 11px;

    background: #ffffff;

    border: 1px solid #ece8e3;

    border-radius: 12px;

    box-shadow:
        0 14px 35px
        rgba(20, 15, 10, 0.10);

    color: #57524d;

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

    font-weight: 600;
}


.tdc-about-float-icon {
    width: 37px;
    height: 37px;

    flex: 0 0 37px;

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

    background: #fff1e8;

    color: #f26322;

    border-radius: 50%;
}


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

.tdc-about-content {
    max-width: 650px;
}


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

.tdc-about-heading {
    max-width: 630px;

    margin: 0 0 22px;

    color: #111111;

    font-family: inherit;

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

    font-weight: 700;

    letter-spacing: -0.5px;
}


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


/* ==========================================================
   PARAGRAPHS
========================================================== */

.tdc-about-lead,
.tdc-about-description {
    font-size: 16px;
    line-height: 1.6;
}


.tdc-about-lead {
    max-width: 610px;

    margin: 0 0 14px;

    color: #4f4a46;
}


.tdc-about-description {
    max-width: 610px;

    margin: 0;

    color: #716b66;
}


/* ==========================================================
   PRINCIPLES
========================================================== */

.tdc-about-principles {
    display: grid;

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

    gap: 18px;

    margin-top: 28px;

    padding-top: 26px;

    border-top: 1px solid #ebe8e4;
}


/* Principle */

.tdc-about-principle {
    display: flex;

    align-items: flex-start;

    gap: 13px;
}


/* Icon */

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

    flex: 0 0 42px;

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

    background: #fff1e8;

    color: #f26322;

    border-radius: 11px;

    font-size: 15px;
}


/* H3 */

.tdc-about-principle h3 {
    margin: 0 0 5px;

    color: #181818;

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

    font-weight: 700;
}


/* Paragraph remains 16px */

.tdc-about-principle p {
    margin: 0;

    color: #77716c;

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


/* ==========================================================
   ACTION AREA
========================================================== */

.tdc-about-actions {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 22px;

    margin-top: 30px;
}


/* Button */

.tdc-about-btn {
    min-height: 50px;

    padding: 0 22px;

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

    gap: 12px;

    background: #111111;

    color: #ffffff;

    border-radius: 50px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

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


.tdc-about-btn i {
    color: #f26322;

    font-size: 11px;

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


.tdc-about-btn:hover {
    background: #f26322;

    transform: translateY(-2px);
}


.tdc-about-btn:hover i {
    color: #ffffff;

    transform: translateX(4px);
}


/* Note */

.tdc-about-note {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #68625d;

    font-size: 14px;

    font-weight: 600;
}


.tdc-about-note i {
    color: #f26322;
}


/* ==========================================================
   PROOF STRIP
========================================================== */

.tdc-about-proof {
    margin-top: 60px;

    min-height: 105px;

    display: grid;

    grid-template-columns:
        1.6fr
        repeat(3, 1fr);

    align-items: stretch;

    background: #faf8f5;

    border: 1px solid #ebe7e2;

    border-radius: 16px;

    overflow: hidden;
}


/* Intro */

.tdc-about-proof-intro {
    padding: 23px 28px;

    display: flex;
    flex-direction: column;

    justify-content: center;
}


.tdc-about-proof-intro span {
    margin-bottom: 5px;

    color: #f26322;

    font-size: 14px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.6px;
}


.tdc-about-proof-intro strong {
    color: #111111;

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

    font-weight: 700;
}


/* Proof Items */

.tdc-about-proof-item {
    padding: 23px;

    display: flex;
    flex-direction: column;

    justify-content: center;

    border-left: 1px solid #e6e2dd;
}


.tdc-about-proof-item span {
    margin-bottom: 6px;

    color: #f26322;

    font-size: 14px;

    font-weight: 700;
}


.tdc-about-proof-item strong {
    color: #292623;

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

    font-weight: 700;
}


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

@media (max-width: 1050px) {

    .tdc-about {
        padding: 70px 0;
    }


    .tdc-about-grid {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.1fr);

        gap: 45px;
    }


    .tdc-about-image-wrap {
        height: 430px;
    }


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


    .tdc-about-proof {
        grid-template-columns:
            repeat(3, 1fr);
    }


    .tdc-about-proof-intro {
        grid-column: 1 / -1;

        border-bottom: 1px solid #e6e2dd;
    }


    .tdc-about-proof-item:first-of-type {
        border-left: 0;
    }

}


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

@media (max-width: 767px) {

    .tdc-about {
        padding: 58px 0;
    }


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


    /* Stack content */

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

        gap: 38px;
    }


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

    .tdc-about-image-wrap {
        height: 360px;
    }


    .tdc-about-image {
        width: calc(100% - 18px);

        border-radius: 16px;
    }


    .tdc-about-image-wrap::before {
        left: -10px;
        bottom: -10px;

        width: 100px;
        height: 100px;

        border-radius: 14px;
    }


    .tdc-about-image-wrap::after {
        display: none;
    }


    /* Badge */

    .tdc-about-badge {
        right: 0;
        top: 25px;

        width: 105px;
        height: 105px;

        padding: 15px;
    }


    .tdc-about-badge strong {
        font-size: 18px;
        line-height: 1.3;
    }


    .tdc-about-badge span {
        font-size: 14px;
        line-height: 1.4;
    }


    /* Floating box */

    .tdc-about-float {
        right: 0;
        bottom: 22px;

        padding: 10px 12px;

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


    /* ======================================================
       TYPOGRAPHY
    ====================================================== */

    .tdc-about-heading {
        margin-bottom: 18px;

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

        letter-spacing: -0.25px;
    }


    .tdc-about-lead,
    .tdc-about-description {
        font-size: 16px;
        line-height: 1.5;
    }


    /* ======================================================
       PRINCIPLES
    ====================================================== */

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

        gap: 20px;

        margin-top: 24px;

        padding-top: 23px;
    }


    .tdc-about-principle h3 {
        font-size: 20px;
        line-height: 1.3;
    }


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


    /* ======================================================
       ACTIONS
    ====================================================== */

    .tdc-about-actions {
        align-items: flex-start;
        flex-direction: column;

        gap: 16px;

        margin-top: 26px;
    }


    /* ======================================================
       PROOF
    ====================================================== */

    .tdc-about-proof {
        margin-top: 45px;

        grid-template-columns: 1fr;

        min-height: auto;
    }


    .tdc-about-proof-intro {
        grid-column: auto;

        padding: 20px;

        border-bottom: 1px solid #e6e2dd;
    }


    .tdc-about-proof-item {
        padding: 18px 20px;

        flex-direction: row;

        align-items: center;

        justify-content: space-between;

        gap: 20px;

        border-left: 0;

        border-bottom: 1px solid #e6e2dd;
    }


    .tdc-about-proof-item:last-child {
        border-bottom: 0;
    }


    .tdc-about-proof-item span {
        margin-bottom: 0;
    }

}


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

@media (max-width: 430px) {

    .tdc-about-image-wrap {
        height: 320px;
    }


    .tdc-about-badge {
        width: 98px;
        height: 98px;
    }


    .tdc-about-float {
        max-width: 210px;
    }

}
/* ==========================================================
   SECTION 04 — SELECTED WORK
========================================================== */

.tdc-work {
    position: relative;

    padding: 80px 0;

    background: #f8f7f4;

    overflow: hidden;
}


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

    width: min(90%, 1400px);

    margin: 0 auto;
}


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

.tdc-work-header {
    display: grid;

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

    align-items: end;

    gap: 60px;

    margin-bottom: 38px;
}


.tdc-work-heading {
    max-width: 620px;

    margin: 0;

    color: #111111;

    font-family: inherit;

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

    font-weight: 700;

    letter-spacing: -0.5px;
}


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


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

.tdc-work-intro {
    max-width: 460px;

    justify-self: end;
}


.tdc-work-intro p {
    margin: 0 0 16px;

    color: #6d6762;

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


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

.tdc-work-grid {
    display: grid;

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

    gap: 18px;
}


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

.tdc-work-card {
    min-width: 0;

    color: inherit;

    text-decoration: none;
}


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

.tdc-work-image-wrap {
    position: relative;

    height: 320px;

    overflow: hidden;

    background: #eae7e3;

    border-radius: 16px;
}


.tdc-work-image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.6s cubic-bezier(.2,.7,.2,1);
}


.tdc-work-card:hover
.tdc-work-image {
    transform: scale(1.045);
}


/* ==========================================================
   IMAGE OVERLAY
========================================================== */

.tdc-work-image-wrap::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.03) 40%,
            rgba(0, 0, 0, 0.30) 100%
        );

    pointer-events: none;
}


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

.tdc-work-index {
    position: absolute;

    z-index: 3;

    top: 15px;
    left: 15px;

    min-width: 38px;
    height: 38px;

    padding: 0 10px;

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

    background: rgba(255, 255, 255, 0.92);

    color: #111111;

    border-radius: 50px;

    font-size: 14px;

    font-weight: 700;

    backdrop-filter: blur(8px);
}


/* ==========================================================
   VIEW BUTTON
========================================================== */

.tdc-work-view {
    position: absolute;

    z-index: 4;

    right: 15px;
    bottom: 15px;

    width: 48px;
    height: 48px;

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

    background: #ffffff;

    color: #111111;

    border-radius: 50%;

    font-size: 14px;

    transform: translateY(8px);

    opacity: 0;

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


.tdc-work-card:hover
.tdc-work-view {
    opacity: 1;

    transform: translateY(0);
}


.tdc-work-view:hover {
    background: #f26322;

    color: #ffffff;
}


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

.tdc-work-card-content {
    padding: 18px 4px 5px;
}


/* ==========================================================
   CATEGORY
========================================================== */

.tdc-work-category {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 8px;

    color: #77716c;

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

    font-weight: 600;
}


.tdc-work-category > span {
    width: 4px;
    height: 4px;

    flex: 0 0 4px;

    background: #f26322;

    border-radius: 50%;
}


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

.tdc-work-title-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 7px;
}


.tdc-work-title-row h3 {
    margin: 0;

    color: #111111;

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

    font-weight: 700;

    transition: color 0.3s ease;
}


.tdc-work-card:hover
.tdc-work-title-row h3 {
    color: #f26322;
}


/* ==========================================================
   TITLE ARROW
========================================================== */

.tdc-work-arrow {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    display: flex;

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

    color: #111111;

    border: 1px solid #ddd9d4;

    border-radius: 50%;

    font-size: 10px;

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


.tdc-work-card:hover
.tdc-work-arrow {
    background: #f26322;

    border-color: #f26322;

    color: #ffffff;

    transform: rotate(-35deg);
}


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

.tdc-work-card-content p {
    max-width: 390px;

    margin: 0;

    color: #6f6964;

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


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

.tdc-work-footer {
    margin-top: 42px;

    padding-top: 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    border-top: 1px solid #ddd9d4;
}


.tdc-work-footer p {
    margin: 0;

    color: #6d6762;

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


.tdc-work-footer p strong {
    color: #111111;

    font-weight: 700;
}


/* ==========================================================
   BOTTOM CTA LINK
========================================================== */

.tdc-work-footer-link {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

    color: #111111;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;
}


.tdc-work-footer-link > span {
    width: 36px;
    height: 36px;

    display: flex;

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

    background: #111111;

    color: #ffffff;

    border-radius: 50%;

    font-size: 10px;

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


.tdc-work-footer-link:hover > span {
    background: #f26322;

    transform: translateX(4px);
}


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

@media (max-width: 1050px) {

    .tdc-work {
        padding: 70px 0;
    }


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

        gap: 18px;

        margin-bottom: 32px;
    }


    .tdc-work-intro {
        max-width: 620px;

        justify-self: start;
    }


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


    /*
       Third project occupies full width.
    */

    .tdc-work-card:nth-child(3) {
        grid-column: 1 / -1;
    }


    .tdc-work-card:nth-child(3)
    .tdc-work-image-wrap {
        height: 390px;
    }

}


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

@media (max-width: 767px) {

    .tdc-work {
        padding: 58px 0;
    }


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


    /* Heading */

    .tdc-work-heading {
        font-size: 24px;
        line-height: 1.25;

        letter-spacing: -0.25px;
    }


    /* Intro */

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


    /* Grid */

    .tdc-work-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .tdc-work-card:nth-child(3) {
        grid-column: auto;
    }


    /* Image */

    .tdc-work-image-wrap,
    .tdc-work-card:nth-child(3)
    .tdc-work-image-wrap {
        height: 300px;
    }


    /*
       Touch devices do not have hover,
       so keep the view button visible.
    */

    .tdc-work-view {
        width: 44px;
        height: 44px;

        opacity: 1;

        transform: none;
    }


    /* H3 */

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


    /* Paragraph */

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


    /* Footer */

    .tdc-work-footer {
        margin-top: 35px;

        padding-top: 22px;

        align-items: flex-start;

        flex-direction: column;

        gap: 16px;
    }


    .tdc-work-footer p {
        font-size: 16px;
        line-height: 1.5;
    }

}


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

@media (max-width: 430px) {

    .tdc-work-image-wrap,
    .tdc-work-card:nth-child(3)
    .tdc-work-image-wrap {
        height: 260px;
    }


    .tdc-work-card-content {
        padding-top: 15px;
    }

}
/* ==========================================================
   SECTION 05 — OUR VENTURES
========================================================== */

.tdc-ventures {
    position: relative;

    padding: 80px 0;

    background: #111111;

    overflow: hidden;
}


.tdc-ventures-container {
    position: relative;

    z-index: 2;

    width: min(90%, 1400px);

    margin: 0 auto;
}


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

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

    position: absolute;

    top: -300px;
    right: -180px;

    width: 550px;
    height: 550px;

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

    border-radius: 50%;

    pointer-events: none;
}


.tdc-ventures::after {
    content: "";

    position: absolute;

    top: -120px;
    right: -20px;

    width: 300px;
    height: 300px;

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

    border-radius: 50%;

    pointer-events: none;
}


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

.tdc-ventures-header {
    display: grid;

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

    align-items: end;

    gap: 60px;

    margin-bottom: 38px;
}


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

.tdc-ventures-label {
    position: relative;

    display: inline-flex;

    align-items: center;

    margin-bottom: 14px;

    padding-left: 35px;

    color: #aaa49f;

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

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}


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

    position: absolute;

    left: 0;
    top: 50%;

    width: 24px;
    height: 2px;

    background: #f26322;

    transform: translateY(-50%);
}


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

.tdc-ventures-heading {
    max-width: 650px;

    margin: 0;

    color: #ffffff;

    font-family: inherit;

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

    font-weight: 700;

    letter-spacing: -0.5px;
}


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


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

.tdc-ventures-intro {
    max-width: 470px;

    justify-self: end;
}


.tdc-ventures-intro p {
    margin: 0;

    color: #aaa6a2;

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


/* ==========================================================
   VENTURES GRID
   DESKTOP = 4 CARDS
========================================================== */

.tdc-ventures-grid {
    display: grid;

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

    gap: 14px;
}


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

.tdc-venture-card {
    min-width: 0;

    padding: 8px 8px 20px;

    display: flex;
    flex-direction: column;

    background: #181818;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 16px;

    color: inherit;

    text-decoration: none;

    overflow: hidden;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


.tdc-venture-card:hover {
    transform: translateY(-5px);

    background: #1c1c1c;

    border-color: rgba(242, 99, 34, 0.32);

    box-shadow:
        0 22px 45px
        rgba(0, 0, 0, 0.22);
}


/* ==========================================================
   IMAGE WRAPPER
========================================================== */

.tdc-venture-image-wrap {
    position: relative;

    height: 210px;

    flex-shrink: 0;

    overflow: hidden;

    background: #242424;

    border-radius: 11px;
}


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

.tdc-venture-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.6s cubic-bezier(.2, .7, .2, 1);
}


.tdc-venture-card:hover
.tdc-venture-image {
    transform: scale(1.05);
}


/* ==========================================================
   IMAGE GRADIENT
========================================================== */

.tdc-venture-image-wrap::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.02) 35%,
            rgba(0, 0, 0, 0.55) 100%
        );

    pointer-events: none;
}


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

.tdc-venture-number {
    position: absolute;

    z-index: 3;

    top: 12px;
    left: 12px;

    min-width: 36px;
    height: 36px;

    padding: 0 9px;

    display: flex;

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

    background: rgba(17, 17, 17, 0.82);

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

    border-radius: 50px;

    color: #ffffff;

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

    font-weight: 700;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


/* ==========================================================
   INDUSTRY BADGE
========================================================== */

.tdc-venture-industry {
    position: absolute;

    z-index: 3;

    left: 12px;
    bottom: 12px;

    max-width: calc(100% - 70px);

    padding: 7px 11px;

    background: #f26322;

    border-radius: 50px;

    color: #ffffff;

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

    font-weight: 700;

    white-space: nowrap;
}


/* ==========================================================
   EXTERNAL LINK BUTTON
========================================================== */

.tdc-venture-open {
    position: absolute;

    z-index: 3;

    right: 12px;
    bottom: 12px;

    width: 40px;
    height: 40px;

    display: flex;

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

    background: #ffffff;

    border-radius: 50%;

    color: #111111;

    font-size: 12px;

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


.tdc-venture-card:hover
.tdc-venture-open {
    background: #f26322;

    color: #ffffff;

    transform: rotate(8deg);
}


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

.tdc-venture-content {
    padding: 18px 8px 0;

    display: flex;
    flex-direction: column;

    flex: 1;
}


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

.tdc-venture-title-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 8px;
}


/* ==========================================================
   H3
   Desktop = 24px
========================================================== */

.tdc-venture-title-row h3 {
    margin: 0;

    color: #ffffff;

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

    font-weight: 700;

    overflow-wrap: anywhere;

    transition: color 0.3s ease;
}


.tdc-venture-card:hover
.tdc-venture-title-row h3 {
    color: #f26322;
}


/* ==========================================================
   TITLE ARROW
========================================================== */

.tdc-venture-arrow {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    display: flex;

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

    border: 1px solid rgba(255, 255, 255, 0.16);

    border-radius: 50%;

    color: #ffffff;

    font-size: 10px;

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


.tdc-venture-card:hover
.tdc-venture-arrow {
    background: #f26322;

    border-color: #f26322;

    color: #ffffff;

    transform: rotate(-35deg);
}


/* ==========================================================
   CARD PARAGRAPH
   Never below 16px
========================================================== */

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

    color: #aaa6a2;

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


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

.tdc-ventures-bottom {
    margin-top: 34px;

    padding-top: 24px;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.85fr)
        minmax(0, 1.15fr);

    align-items: center;

    gap: 50px;

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


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

.tdc-ventures-bottom-title {
    display: flex;

    align-items: center;

    gap: 14px;
}


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

    flex: 0 0 44px;

    display: flex;

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

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

    border-radius: 50%;

    color: #f26322;

    font-size: 15px;
}


.tdc-ventures-small-text {
    display: block;

    margin-bottom: 2px;

    color: #96918d;

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


.tdc-ventures-bottom-title strong {
    display: block;

    color: #ffffff;

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

    font-weight: 700;
}


/* ==========================================================
   BOTTOM PARAGRAPH
========================================================== */

.tdc-ventures-bottom > p {
    max-width: 650px;

    margin: 0;

    justify-self: end;

    color: #aaa6a2;

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


/* ==========================================================
   TABLET / SMALL DESKTOP
   2 x 2 CARDS
========================================================== */

@media (max-width: 1100px) {

    .tdc-ventures {
        padding: 70px 0;
    }


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

        gap: 18px;

        margin-bottom: 32px;
    }


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

        justify-self: start;
    }


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

        gap: 16px;
    }


    .tdc-venture-image-wrap {
        height: 250px;
    }


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

        gap: 20px;
    }


    .tdc-ventures-bottom > p {
        max-width: 700px;

        justify-self: start;
    }

}


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

@media (max-width: 767px) {

    .tdc-ventures {
        padding: 58px 0;
    }


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


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

    .tdc-ventures-header {
        gap: 16px;

        margin-bottom: 28px;
    }


    .tdc-ventures-label {
        margin-bottom: 12px;

        padding-left: 30px;

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


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


    /* ======================================================
       H2 — MOBILE 24PX
    ====================================================== */

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

        letter-spacing: -0.25px;
    }


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

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


    /* ======================================================
       GRID — 1 CARD PER ROW
    ====================================================== */

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

        gap: 14px;
    }


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

    .tdc-venture-card {
        padding: 8px 8px 18px;

        border-radius: 15px;
    }


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

    .tdc-venture-image-wrap {
        height: 250px;
    }


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

    .tdc-venture-content {
        padding: 17px 8px 0;
    }


    /* ======================================================
       H3 — MOBILE 20PX
    ====================================================== */

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


    /* ======================================================
       PARAGRAPH — MOBILE 16PX
    ====================================================== */

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


    /* ======================================================
       BOTTOM AREA
    ====================================================== */

    .tdc-ventures-bottom {
        margin-top: 28px;

        padding-top: 22px;

        grid-template-columns: 1fr;

        gap: 18px;
    }


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

}


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

@media (max-width: 430px) {

    .tdc-venture-image-wrap {
        height: 220px;
    }


    .tdc-venture-industry {
        max-width: calc(100% - 66px);

        padding: 6px 10px;
    }

}
/* ==========================================================
   SECTION 06 — WHY THE DIGITAL CAFE
========================================================== */

.tdc-why {
    position: relative;

    padding: 80px 0;

    background: #ffffff;

    overflow: hidden;
}


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

    width: min(90%, 1400px);

    margin: 0 auto;
}


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

.tdc-why-header {
    display: grid;

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

    align-items: end;

    gap: 60px;

    margin-bottom: 42px;
}


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

.tdc-why-heading {
    max-width: 650px;

    margin: 0;

    color: #111111;

    font-family: inherit;

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

    font-weight: 700;

    letter-spacing: -0.5px;
}


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


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

.tdc-why-intro {
    max-width: 470px;

    justify-self: end;
}


.tdc-why-intro p {
    margin: 0;

    color: #6f6964;

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


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

.tdc-why-grid {
    display: grid;

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

    border-top: 1px solid #dedad5;
    border-bottom: 1px solid #dedad5;
}


/* ==========================================================
   REASON
========================================================== */

.tdc-why-item {
    position: relative;

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

    padding: 28px 26px 30px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    border-right: 1px solid #dedad5;

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


.tdc-why-item:last-child {
    border-right: 0;
}


.tdc-why-item:hover {
    background: #faf8f5;
}


/* Orange top line */

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

    position: absolute;

    top: -1px;
    left: 0;

    width: 100%;
    height: 3px;

    background: #f26322;

    transform: scaleX(0);

    transform-origin: left;

    transition: transform 0.35s ease;
}


.tdc-why-item:hover::before {
    transform: scaleX(1);
}


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

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

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 45px;
}


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

.tdc-why-number {
    color: #bbb5af;

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

    font-weight: 700;

    letter-spacing: 1px;

    transition: color 0.3s ease;
}


.tdc-why-item:hover
.tdc-why-number {
    color: #f26322;
}


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

.tdc-why-icon {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: flex;

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

    background: #fff1e8;

    border-radius: 50%;

    color: #f26322;

    font-size: 15px;

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


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

    color: #ffffff;

    transform: rotate(-6deg);
}


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

.tdc-why-content h3 {
    margin: 0 0 10px;

    color: #161616;

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

    font-weight: 700;
}


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

.tdc-why-content p {
    margin: 0;

    color: #716b66;

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


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

.tdc-why-bottom {
    margin-top: 32px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}


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

.tdc-why-bottom-label {
    display: block;

    margin-bottom: 5px;

    color: #8a847f;

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

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.7px;
}


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

.tdc-why-bottom-text h3 {
    margin: 0;

    color: #111111;

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

    font-weight: 700;
}


.tdc-why-bottom-text h3 span {
    color: #f26322;
}


/* ==========================================================
   BOTTOM LINK
========================================================== */

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

    align-items: center;

    gap: 13px;

    flex-shrink: 0;

    color: #111111;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;
}


.tdc-why-link > span {
    width: 40px;
    height: 40px;

    display: flex;

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

    background: #111111;

    border-radius: 50%;

    color: #ffffff;

    font-size: 11px;

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


.tdc-why-link:hover > span {
    background: #f26322;

    transform: translateX(4px);
}


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

@media (max-width: 1100px) {

    .tdc-why {
        padding: 70px 0;
    }


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

        gap: 18px;

        margin-bottom: 34px;
    }


    .tdc-why-intro {
        max-width: 650px;

        justify-self: start;
    }


    /* 2 x 2 */

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


    .tdc-why-item {
        min-height: 260px;

        border-bottom: 1px solid #dedad5;
    }


    .tdc-why-item:nth-child(2) {
        border-right: 0;
    }


    .tdc-why-item:nth-child(3),
    .tdc-why-item:nth-child(4) {
        border-bottom: 0;
    }

}


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

@media (max-width: 767px) {

    .tdc-why {
        padding: 58px 0;
    }


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


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

    .tdc-why-header {
        gap: 16px;

        margin-bottom: 28px;
    }


    /* ======================================================
       H2 — 24PX
    ====================================================== */

    .tdc-why-heading {
        font-size: 24px;
        line-height: 1.25;

        letter-spacing: -0.25px;
    }


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


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

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


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

    .tdc-why-item {
        min-height: auto;

        padding: 22px 4px;

        border-right: 0;
        border-bottom: 1px solid #dedad5;
    }


    .tdc-why-item:nth-child(3) {
        border-bottom: 1px solid #dedad5;
    }


    .tdc-why-item:last-child {
        border-bottom: 0;
    }


    .tdc-why-item-top {
        margin-bottom: 24px;
    }


    /* ======================================================
       H3 — 20PX
    ====================================================== */

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


    /* ======================================================
       P — 16PX
    ====================================================== */

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


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

    .tdc-why-bottom {
        margin-top: 28px;

        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }


    .tdc-why-bottom-text h3 {
        font-size: 20px;
        line-height: 1.3;
    }

}
/* ==========================================================
   SECTION 07 — RESULTS / NUMBERS
========================================================== */

.tdc-results {
    position: relative;

    padding: 64px 0;

    background: #f26322;

    overflow: hidden;
}


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

    width: min(90%, 1400px);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(280px, 0.85fr)
        minmax(0, 2.15fr);

    align-items: center;

    gap: 60px;
}


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

.tdc-results::before {
    content: "";

    position: absolute;

    top: -220px;
    left: -180px;

    width: 500px;
    height: 500px;

    border: 1px solid rgba(255, 255, 255, 0.16);

    border-radius: 50%;

    pointer-events: none;
}


.tdc-results::after {
    content: "";

    position: absolute;

    right: -120px;
    bottom: -300px;

    width: 520px;
    height: 520px;

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

    border-radius: 50%;

    pointer-events: none;
}


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

.tdc-results-intro {
    max-width: 390px;
}


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

.tdc-results-label {
    position: relative;

    display: inline-flex;

    align-items: center;

    margin-bottom: 13px;

    padding-left: 34px;

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

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

    font-weight: 700;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


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

    position: absolute;

    left: 0;
    top: 50%;

    width: 23px;
    height: 2px;

    background: #ffffff;

    transform: translateY(-50%);
}


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

.tdc-results-heading {
    margin: 0 0 14px;

    color: #ffffff;

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

    font-weight: 700;

    letter-spacing: -0.5px;
}


.tdc-results-heading span {
    color: #111111;
}


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

.tdc-results-intro p {
    margin: 0;

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

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


/* ==========================================================
   STATISTICS
========================================================== */

.tdc-results-stats {
    display: grid;

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

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


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

.tdc-result-item {
    position: relative;

    min-width: 0;

    padding: 8px 25px;

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


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

.tdc-result-index {
    display: block;

    margin-bottom: 19px;

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

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

    font-weight: 700;

    letter-spacing: 0.8px;
}


/* ==========================================================
   BIG NUMBER
   Display metric, not body/heading typography
========================================================== */

.tdc-result-number {
    margin-bottom: 4px;

    color: #ffffff;

    font-size: 52px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: -2px;
}


.tdc-result-number span {
    color: #111111;
}


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

.tdc-result-item h3 {
    margin: 0 0 7px;

    color: #111111;

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

    font-weight: 700;
}


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

.tdc-result-item p {
    margin: 0;

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

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


/* ==========================================================
   TABLET / SMALL DESKTOP
========================================================== */

@media (max-width: 1100px) {

    .tdc-results-container {
        grid-template-columns: 1fr;

        gap: 38px;
    }


    .tdc-results-intro {
        max-width: 650px;
    }


    .tdc-results-stats {
        border-top: 1px solid rgba(255, 255, 255, 0.25);

        border-left: 0;
    }


    .tdc-result-item {
        padding:
            25px
            20px
            5px;
    }

}


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

@media (max-width: 767px) {

    .tdc-results {
        padding: 52px 0;
    }


    .tdc-results-container {
        width: 90%;

        gap: 30px;
    }


    /* H2 — MOBILE 24PX */

    .tdc-results-heading {
        font-size: 24px;
        line-height: 1.25;

        letter-spacing: -0.25px;
    }


    /* Paragraph */

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


    /* ======================================================
       STATS — 2 x 2
    ====================================================== */

    .tdc-results-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

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


    .tdc-result-item {
        padding: 22px 16px;

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

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


    .tdc-result-item:nth-child(2),
    .tdc-result-item:nth-child(4) {
        border-right: 0;
    }


    .tdc-result-item:nth-child(3),
    .tdc-result-item:nth-child(4) {
        border-bottom: 0;
    }


    /* Number */

    .tdc-result-number {
        font-size: 42px;

        letter-spacing: -1px;
    }


    /* H3 — MOBILE 20PX */

    .tdc-result-item h3 {
        font-size: 20px;
        line-height: 1.3;
    }


    /* Paragraph */

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

}


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

@media (max-width: 480px) {

    /*
       Single column keeps 16px copy comfortable
       on narrow devices.
    */

    .tdc-results-stats {
        grid-template-columns: 1fr;
    }


    .tdc-result-item {
        display: grid;

        grid-template-columns: auto 1fr;

        column-gap: 20px;

        padding:
            20px
            4px;

        border-right: 0;

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


    .tdc-result-item:nth-child(3) {
        border-bottom:
            1px solid
            rgba(255, 255, 255, 0.25);
    }


    .tdc-result-item:last-child {
        border-bottom: 0;
    }


    .tdc-result-index {
        grid-column: 1 / -1;

        margin-bottom: 10px;
    }


    .tdc-result-number {
        grid-row: 2 / 4;

        align-self: center;

        min-width: 82px;
    }


    .tdc-result-item h3 {
        align-self: end;
    }

}
/* ==========================================================
   SECTION 08 — HOW WE WORK
========================================================== */

.tdc-process {
    position: relative;

    padding: 80px 0;

    background: #f8f7f4;

    overflow: hidden;
}


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

    width: min(90%, 1400px);

    margin: 0 auto;
}


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

.tdc-process-header {
    display: grid;

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

    align-items: end;

    gap: 60px;

    margin-bottom: 45px;
}


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

.tdc-process-heading {
    max-width: 650px;

    margin: 0;

    color: #111111;

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

    font-weight: 700;

    letter-spacing: -0.5px;
}


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


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

.tdc-process-intro {
    max-width: 470px;

    justify-self: end;
}


.tdc-process-intro p {
    margin: 0;

    color: #6f6964;

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


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

.tdc-process-grid {
    position: relative;

    display: grid;

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

    gap: 0;
}


/* ==========================================================
   HORIZONTAL CONNECTING LINE
========================================================== */

.tdc-process-grid::before {
    content: "";

    position: absolute;

    top: 64px;
    left: 12.5%;
    right: 12.5%;

    height: 1px;

    background: #d8d3cd;

    z-index: 0;
}


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

.tdc-process-item {
    position: relative;

    min-width: 0;

    padding-right: 32px;
}


.tdc-process-item:last-child {
    padding-right: 0;
}


/* ==========================================================
   MARKER AREA
========================================================== */

.tdc-process-marker {
    position: relative;
    z-index: 2;

    height: 105px;

    margin-bottom: 20px;
}


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

.tdc-process-number {
    display: block;

    margin-bottom: 13px;

    color: #99938e;

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

    font-weight: 700;

    letter-spacing: 1px;
}


/* ==========================================================
   PROCESS DOT
========================================================== */

.tdc-process-dot {
    position: relative;

    width: 58px;
    height: 58px;

    display: flex;

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

    background: #ffffff;

    border: 1px solid #ddd8d2;

    border-radius: 50%;

    color: #f26322;

    font-size: 17px;

    box-shadow:
        0 8px 24px
        rgba(25, 20, 15, 0.06);

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


/* Small orange point */

.tdc-process-dot::after {
    content: "";

    position: absolute;

    right: -5px;
    top: 50%;

    width: 8px;
    height: 8px;

    background: #f26322;

    border: 3px solid #f8f7f4;

    border-radius: 50%;

    transform: translateY(-50%);
}


.tdc-process-item:hover
.tdc-process-dot {
    background: #f26322;

    border-color: #f26322;

    color: #ffffff;

    transform: translateY(-4px);

    box-shadow:
        0 12px 28px
        rgba(242, 99, 34, 0.18);
}


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

.tdc-process-content {
    max-width: 285px;
}


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

.tdc-process-stage {
    display: inline-block;

    margin-bottom: 6px;

    color: #f26322;

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

    font-weight: 700;

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


/* ==========================================================
   H3 — DESKTOP 24PX
========================================================== */

.tdc-process-content h3 {
    margin: 0 0 9px;

    color: #111111;

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

    font-weight: 700;
}


/* ==========================================================
   PARAGRAPH — 16PX
========================================================== */

.tdc-process-content p {
    margin: 0;

    color: #716b66;

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


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

.tdc-process-bottom {
    margin-top: 45px;

    padding-top: 25px;

    display: flex;

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

    gap: 40px;

    border-top: 1px solid #dedad5;
}


/* ==========================================================
   BOTTOM COPY
========================================================== */

.tdc-process-bottom-copy {
    display: flex;

    align-items: center;

    gap: 14px;
}


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

    flex: 0 0 44px;

    display: flex;

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

    background: #fff0e7;

    border-radius: 50%;

    color: #f26322;

    font-size: 15px;
}


.tdc-process-bottom-copy p {
    margin: 0;

    color: #6d6762;

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


.tdc-process-bottom-copy strong {
    color: #111111;

    font-weight: 700;
}


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

.tdc-process-btn {
    min-height: 48px;

    padding: 0 8px 0 20px;

    display: inline-flex;

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

    gap: 14px;

    flex-shrink: 0;

    background: #111111;

    border-radius: 50px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

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


.tdc-process-btn > span {
    width: 34px;
    height: 34px;

    display: flex;

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

    background: #f26322;

    border-radius: 50%;

    color: #ffffff;

    font-size: 10px;

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


.tdc-process-btn:hover {
    background: #f26322;

    transform: translateY(-2px);
}


.tdc-process-btn:hover > span {
    background: #111111;

    transform: translateX(3px);
}


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

@media (max-width: 1100px) {

    .tdc-process {
        padding: 70px 0;
    }


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

        gap: 18px;

        margin-bottom: 38px;
    }


    .tdc-process-intro {
        max-width: 650px;

        justify-self: start;
    }


    /* 2 x 2 */

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

        gap: 38px 30px;
    }


    /*
       Remove single horizontal line because
       process wraps into two rows.
    */

    .tdc-process-grid::before {
        display: none;
    }


    .tdc-process-item {
        padding-right: 20px;
    }


    .tdc-process-marker {
        height: auto;

        margin-bottom: 18px;
    }


    .tdc-process-content {
        max-width: 430px;
    }

}


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

@media (max-width: 767px) {

    .tdc-process {
        padding: 58px 0;
    }


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


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

    .tdc-process-header {
        gap: 16px;

        margin-bottom: 32px;
    }


    /* H2 */

    .tdc-process-heading {
        font-size: 24px;
        line-height: 1.25;

        letter-spacing: -0.25px;
    }


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


    /* ======================================================
       VERTICAL TIMELINE
    ====================================================== */

    .tdc-process-grid {
        position: relative;

        grid-template-columns: 1fr;

        gap: 0;
    }


    .tdc-process-grid::before {
        content: "";

        display: block;

        position: absolute;

        top: 30px;
        bottom: 30px;

        left: 27px;
        right: auto;

        width: 1px;
        height: auto;

        background: #d8d3cd;
    }


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

    .tdc-process-item {
        position: relative;

        display: grid;

        grid-template-columns: 58px 1fr;

        column-gap: 20px;

        padding: 0 0 32px;

        min-height: auto;
    }


    .tdc-process-item:last-child {
        padding-bottom: 0;
    }


    /* ======================================================
       MARKER
    ====================================================== */

    .tdc-process-marker {
        position: relative;

        height: auto;

        margin: 0;
    }


    /* Number sits above circle */

    .tdc-process-number {
        display: none;
    }


    .tdc-process-dot {
        width: 56px;
        height: 56px;

        background: #ffffff;
    }


    .tdc-process-dot::after {
        display: none;
    }


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

    .tdc-process-content {
        max-width: none;

        padding-top: 2px;
    }


    .tdc-process-stage {
        margin-bottom: 4px;
    }


    /* H3 */

    .tdc-process-content h3 {
        margin-bottom: 7px;

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


    /* Paragraph */

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


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

    .tdc-process-bottom {
        margin-top: 34px;

        padding-top: 22px;

        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }


    .tdc-process-bottom-copy {
        align-items: flex-start;
    }


    .tdc-process-bottom-copy p {
        font-size: 16px;
        line-height: 1.5;
    }

}
/* ==========================================================
   SECTION 09 — INDUSTRIES
========================================================== */

.tdc-industries {
    position: relative;

    padding: 80px 0;

    background: #ffffff;

    overflow: hidden;
}


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

    width: min(90%, 1400px);

    margin: 0 auto;
}


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

.tdc-industries-header {
    display: grid;

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

    align-items: end;

    gap: 60px;

    margin-bottom: 40px;
}


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

.tdc-industries-heading {
    max-width: 650px;

    margin: 0;

    color: #111111;

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

    font-weight: 700;

    letter-spacing: -0.5px;
}


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


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

.tdc-industries-intro {
    max-width: 490px;

    justify-self: end;
}


.tdc-industries-intro p {
    margin: 0;

    color: #6f6964;

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


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

.tdc-industries-grid {
    display: grid;

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

    column-gap: 50px;

    border-top: 1px solid #dedad5;
}


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

.tdc-industry-item {
    position: relative;

    min-width: 0;

    padding: 22px 4px;

    display: grid;

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

    align-items: center;

    gap: 15px;

    border-bottom: 1px solid #dedad5;

    color: inherit;

    text-decoration: none;

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


/* ==========================================================
   ORANGE HOVER LINE
========================================================== */

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

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 100%;
    height: 2px;

    background: #f26322;

    transform: scaleX(0);

    transform-origin: left;

    transition: transform 0.35s ease;
}


.tdc-industry-item:hover::before {
    transform: scaleX(1);
}


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

.tdc-industry-number {
    color: #aaa49f;

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

    font-weight: 700;

    letter-spacing: 0.5px;

    transition: color 0.3s ease;
}


.tdc-industry-item:hover
.tdc-industry-number {
    color: #f26322;
}


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

.tdc-industry-icon {
    width: 46px;
    height: 46px;

    display: flex;

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

    background: #faf7f4;

    border: 1px solid #eee9e4;

    border-radius: 50%;

    color: #f26322;

    font-size: 15px;

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


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

    border-color: #f26322;

    color: #ffffff;

    transform: rotate(-5deg);
}


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

.tdc-industry-content {
    min-width: 0;
}


/* H3 */

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

    color: #161616;

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

    font-weight: 700;

    transition: color 0.3s ease;
}


.tdc-industry-item:hover
.tdc-industry-content h3 {
    color: #f26322;
}


/* Paragraph */

.tdc-industry-content p {
    margin: 0;

    color: #77716c;

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


/* ==========================================================
   ARROW
========================================================== */

.tdc-industry-arrow {
    width: 36px;
    height: 36px;

    display: flex;

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

    border: 1px solid #ddd8d2;

    border-radius: 50%;

    color: #111111;

    font-size: 10px;

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


.tdc-industry-item:hover
.tdc-industry-arrow {
    background: #111111;

    border-color: #111111;

    color: #ffffff;

    transform: rotate(-35deg);
}


/* ==========================================================
   BOTTOM AREA
========================================================== */

.tdc-industries-bottom {
    margin-top: 32px;

    padding-top: 2px;

    display: flex;

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

    gap: 40px;
}


/* ==========================================================
   BOTTOM COPY
========================================================== */

.tdc-industries-bottom-copy {
    display: flex;

    align-items: center;

    gap: 14px;
}


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

    flex: 0 0 44px;

    display: flex;

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

    background: #fff0e7;

    border-radius: 50%;

    color: #f26322;

    font-size: 15px;
}


.tdc-industries-bottom-copy p {
    margin: 0;

    color: #6f6964;

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


.tdc-industries-bottom-copy strong {
    color: #111111;

    font-weight: 700;
}


/* ==========================================================
   BOTTOM LINK
========================================================== */

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

    align-items: center;

    gap: 13px;

    flex-shrink: 0;

    color: #111111;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;
}


.tdc-industries-link > span {
    width: 40px;
    height: 40px;

    display: flex;

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

    background: #111111;

    border-radius: 50%;

    color: #ffffff;

    font-size: 10px;

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


.tdc-industries-link:hover > span {
    background: #f26322;

    transform: translateX(4px);
}


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

@media (max-width: 1100px) {

    .tdc-industries {
        padding: 70px 0;
    }


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

        gap: 18px;

        margin-bottom: 34px;
    }


    .tdc-industries-intro {
        max-width: 700px;

        justify-self: start;
    }


    .tdc-industries-grid {
        column-gap: 30px;
    }


    .tdc-industry-item {
        grid-template-columns:
            30px
            44px
            minmax(0, 1fr);

        gap: 12px;
    }


    /*
       Hide arrow on smaller tablets to
       preserve content width.
    */

    .tdc-industry-arrow {
        display: none;
    }

}


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

@media (max-width: 767px) {

    .tdc-industries {
        padding: 58px 0;
    }


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


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

    .tdc-industries-header {
        gap: 16px;

        margin-bottom: 28px;
    }


    /* H2 */

    .tdc-industries-heading {
        font-size: 24px;
        line-height: 1.25;

        letter-spacing: -0.25px;
    }


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


    /* ======================================================
       SINGLE COLUMN
    ====================================================== */

    .tdc-industries-grid {
        grid-template-columns: 1fr;

        column-gap: 0;
    }


    /* ======================================================
       INDUSTRY
    ====================================================== */

    .tdc-industry-item {
        padding: 19px 0;

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

        gap: 12px;
    }


    .tdc-industry-icon {
        width: 42px;
        height: 42px;
    }


    /* H3 */

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


    /* Paragraph */

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


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

    .tdc-industries-bottom {
        margin-top: 27px;

        align-items: flex-start;

        flex-direction: column;

        gap: 19px;
    }


    .tdc-industries-bottom-copy {
        align-items: flex-start;
    }


    .tdc-industries-bottom-copy p {
        font-size: 16px;
        line-height: 1.5;
    }

}
/* ==========================================================
   SECTION 10 — TESTIMONIALS
========================================================== */

.tdc-testimonials {
    position: relative;

    padding: 80px 0;

    background: #f8f7f4;

    overflow: hidden;
}


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

    width: min(90%, 1400px);

    margin: 0 auto;
}


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

.tdc-testimonials-header {
    display: grid;

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

    align-items: end;

    gap: 60px;

    margin-bottom: 40px;
}


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

.tdc-testimonials-heading {
    max-width: 620px;

    margin: 0;

    color: #111111;

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

    font-weight: 700;

    letter-spacing: -0.5px;
}


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


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

.tdc-testimonials-intro {
    max-width: 490px;

    justify-self: end;
}


.tdc-testimonials-intro p {
    margin: 0;

    color: #6f6964;

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


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

.tdc-testimonials-grid {
    display: grid;

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

    gap: 18px;

    align-items: stretch;
}


/* ==========================================================
   FEATURED TESTIMONIAL
========================================================== */

.tdc-testimonial-featured {
    position: relative;

    min-height: 520px;

    padding: 34px;

    display: flex;
    flex-direction: column;

    background: #111111;

    border-radius: 20px;

    overflow: hidden;
}


/* Decorative circle */

.tdc-testimonial-featured::before {
    content: "";

    position: absolute;

    right: -150px;
    top: -170px;

    width: 380px;
    height: 380px;

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

    border-radius: 50%;

    pointer-events: none;
}


.tdc-testimonial-featured::after {
    content: "";

    position: absolute;

    right: -60px;
    top: -80px;

    width: 220px;
    height: 220px;

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

    border-radius: 50%;

    pointer-events: none;
}


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

.tdc-testimonial-featured-top {
    position: relative;
    z-index: 2;

    display: flex;

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

    gap: 20px;
}


/* Label */

.tdc-testimonial-label {
    display: inline-flex;

    align-items: center;

    padding: 7px 12px;

    background: rgba(255, 255, 255, 0.07);

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius: 50px;

    color: #ffffff;

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

    font-weight: 700;
}


/* Quote icon */

.tdc-testimonial-quote-icon {
    color: #f26322;

    font-size: 34px;

    line-height: 1;
}


/* ==========================================================
   STARS
========================================================== */

.tdc-testimonial-stars {
    position: relative;
    z-index: 2;

    display: flex;

    gap: 5px;

    margin-top: 58px;

    color: #f26322;

    font-size: 14px;
}


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

.tdc-testimonial-featured-quote {
    position: relative;
    z-index: 2;

    margin: 20px 0 40px;
}


.tdc-testimonial-featured-quote p {
    max-width: 600px;

    margin: 0;

    color: #ffffff;

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

    font-weight: 600;

    letter-spacing: -0.25px;
}


/* ==========================================================
   FEATURED CLIENT
========================================================== */

.tdc-testimonial-featured-client {
    position: relative;
    z-index: 2;

    margin-top: auto;

    padding-top: 24px;

    display: flex;

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

    gap: 25px;

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


.tdc-testimonial-person {
    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 0;
}


/* Avatar */

.tdc-testimonial-avatar {
    width: 54px;
    height: 54px;

    flex: 0 0 54px;

    object-fit: cover;

    border:
        2px solid
        rgba(255, 255, 255, 0.16);

    border-radius: 50%;
}


/* Client H3 */

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

    color: #ffffff;

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

    font-weight: 700;
}


.tdc-testimonial-person-info p {
    margin: 0;

    color: #aaa6a2;

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


/* Service */

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

    padding: 8px 12px;

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

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

    border-radius: 50px;

    color: #f26322;

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

    font-weight: 700;
}


/* ==========================================================
   RIGHT TESTIMONIAL LIST
========================================================== */

.tdc-testimonials-list {
    display: grid;

    grid-template-rows:
        repeat(3, 1fr);

    gap: 12px;
}


/* ==========================================================
   SMALL TESTIMONIAL
========================================================== */

.tdc-testimonial-small {
    position: relative;

    padding: 23px 24px;

    background: #ffffff;

    border: 1px solid #e5e1dc;

    border-radius: 15px;

    overflow: hidden;

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


.tdc-testimonial-small:hover {
    border-color:
        rgba(242, 99, 34, 0.35);

    transform: translateX(4px);

    box-shadow:
        0 12px 30px
        rgba(20, 15, 10, 0.06);
}


/* Orange edge */

.tdc-testimonial-small::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 3px;
    height: 100%;

    background: #f26322;

    transform: scaleY(0);

    transform-origin: bottom;

    transition: transform 0.3s ease;
}


.tdc-testimonial-small:hover::before {
    transform: scaleY(1);
}


/* ==========================================================
   SMALL MAIN
========================================================== */

.tdc-testimonial-small-main {
    display: grid;

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

    gap: 15px;
}


/* Quote */

.tdc-testimonial-small-quote {
    padding-top: 2px;

    color: #f26322;

    font-size: 22px;

    line-height: 1;
}


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

.tdc-testimonial-small-content blockquote {
    margin: 0 0 17px;
}


.tdc-testimonial-small-content blockquote p {
    margin: 0;

    color: #35312e;

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

    font-weight: 500;
}


/* ==========================================================
   SMALL BOTTOM
========================================================== */

.tdc-testimonial-small-bottom {
    display: flex;

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

    gap: 18px;
}


/* ==========================================================
   SMALL PERSON
========================================================== */

.tdc-testimonial-small-person {
    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;
}


.tdc-testimonial-small-person img {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    object-fit: cover;

    border-radius: 50%;
}


.tdc-testimonial-small-person h3 {
    margin: 0 0 1px;

    color: #111111;

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

    font-weight: 700;
}


.tdc-testimonial-small-person p {
    margin: 0;

    color: #7b756f;

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


/* ==========================================================
   SMALL STARS
========================================================== */

.tdc-testimonial-small-stars {
    display: flex;

    gap: 2px;

    flex-shrink: 0;

    color: #f26322;

    font-size: 10px;
}


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

.tdc-testimonials-bottom {
    margin-top: 30px;

    padding-top: 24px;

    display: flex;

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

    gap: 40px;

    border-top: 1px solid #dedad5;
}


/* ==========================================================
   BOTTOM COPY
========================================================== */

.tdc-testimonials-bottom-copy {
    display: flex;

    align-items: center;

    gap: 14px;
}


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

    flex: 0 0 44px;

    display: flex;

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

    background: #fff0e7;

    border-radius: 50%;

    color: #f26322;

    font-size: 15px;
}


.tdc-testimonials-bottom-copy p {
    margin: 0;

    color: #6f6964;

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


.tdc-testimonials-bottom-copy strong {
    color: #111111;

    font-weight: 700;
}


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

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

    align-items: center;

    gap: 13px;

    flex-shrink: 0;

    color: #111111;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;
}


.tdc-testimonials-link > span {
    width: 40px;
    height: 40px;

    display: flex;

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

    background: #111111;

    border-radius: 50%;

    color: #ffffff;

    font-size: 10px;

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


.tdc-testimonials-link:hover > span {
    background: #f26322;

    transform: translateX(4px);
}


/* ==========================================================
   TABLET — UNDER 1100PX
========================================================== */

@media (max-width: 1100px) {

    .tdc-testimonials {
        padding: 70px 0;
    }


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

        gap: 18px;

        margin-bottom: 34px;
    }


    .tdc-testimonials-intro {
        max-width: 700px;

        justify-self: start;
    }


    .tdc-testimonials-grid {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.1fr);
    }


    .tdc-testimonial-featured {
        min-height: 560px;

        padding: 28px;
    }


    .tdc-testimonial-featured-client {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }


    .tdc-testimonial-small-stars {
        display: none;
    }

}


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

@media (max-width: 767px) {

    .tdc-testimonials {
        padding: 58px 0;
    }


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


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

    .tdc-testimonials-header {
        gap: 16px;

        margin-bottom: 28px;
    }


    .tdc-testimonials-heading {
        font-size: 24px;
        line-height: 1.25;

        letter-spacing: -0.25px;
    }


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


    /* ======================================================
       SINGLE COLUMN
    ====================================================== */

    .tdc-testimonials-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    /* ======================================================
       FEATURED
    ====================================================== */

    .tdc-testimonial-featured {
        min-height: auto;

        padding: 24px;

        border-radius: 16px;
    }


    .tdc-testimonial-stars {
        margin-top: 38px;
    }


    /*
       Featured quote is styled as H3-scale
       editorial copy on mobile.
    */

    .tdc-testimonial-featured-quote {
        margin:
            16px
            0
            35px;
    }


    .tdc-testimonial-featured-quote p {
        font-size: 20px;
        line-height: 1.3;
    }


    .tdc-testimonial-featured-client {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }


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


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


    /* ======================================================
       SMALL TESTIMONIAL
    ====================================================== */

    .tdc-testimonial-small {
        padding: 21px 19px;
    }


    .tdc-testimonial-small-main {
        grid-template-columns:
            27px
            minmax(0, 1fr);

        gap: 11px;
    }


    .tdc-testimonial-small-content blockquote p {
        font-size: 16px;
        line-height: 1.5;
    }


    .tdc-testimonial-small-person h3 {
        font-size: 16px;
        line-height: 1.4;
    }


    .tdc-testimonial-small-person p {
        font-size: 16px;
        line-height: 1.5;
    }


    /* Stars visible again */

    .tdc-testimonial-small-stars {
        display: flex;
    }


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

    .tdc-testimonials-bottom {
        margin-top: 28px;

        padding-top: 22px;

        align-items: flex-start;

        flex-direction: column;

        gap: 19px;
    }


    .tdc-testimonials-bottom-copy {
        align-items: flex-start;
    }


    .tdc-testimonials-bottom-copy p {
        font-size: 16px;
        line-height: 1.5;
    }

}


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

@media (max-width: 480px) {

    .tdc-testimonial-featured {
        padding: 21px;
    }


    .tdc-testimonial-featured-top {
        align-items: flex-start;
    }


    .tdc-testimonial-quote-icon {
        font-size: 28px;
    }


    .tdc-testimonial-small {
        padding:
            19px
            16px;
    }


    /*
       Client info gets full width.
    */

    .tdc-testimonial-small-bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;
    }

}
/* ==========================================================
   FINAL DUAL CTA
========================================================== */

.tdc-dual-cta {
    position: relative;

    padding: 52px 0;

    background: #111111;

    overflow: hidden;
}


/* Subtle Orange Glow */

.tdc-dual-cta::before {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    right: -150px;
    top: -190px;

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

    border-radius: 50%;

    pointer-events: none;
}


/* Decorative Circle */

.tdc-dual-cta::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -100px;
    bottom: -180px;

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

    border-radius: 50%;

    pointer-events: none;
}


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

.tdc-dual-cta-container {
    position: relative;

    z-index: 2;

    width: min(90%, 1400px);

    margin: 0 auto;

    display: grid;

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

    align-items: center;

    gap: 60px;
}


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

.tdc-dual-cta-content {
    max-width: 720px;
}


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

.tdc-dual-cta-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-dual-cta-label::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 22px;
    height: 2px;

    background: #f26322;

    transform: translateY(-50%);
}


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

.tdc-dual-cta-content h2 {
    margin: 0 0 10px;

    color: #ffffff;

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

    font-weight: 700;

    letter-spacing: -0.5px;
}


.tdc-dual-cta-content h2 span {
    color: #f26322;
}


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

.tdc-dual-cta-content p {
    max-width: 650px;

    margin: 0;

    color: #aaa6a2;

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


/* ==========================================================
   ACTIONS
========================================================== */

.tdc-dual-cta-actions {
    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}


/* ==========================================================
   BUTTON BASE
========================================================== */

.tdc-dual-btn {
    min-height: 52px;

    padding: 6px 7px 6px 19px;

    display: inline-flex;

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

    gap: 14px;

    border-radius: 50px;

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

    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;

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


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

.tdc-dual-btn > span {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;

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

    border-radius: 50%;

    font-size: 10px;

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


/* ==========================================================
   PRIMARY — BUSINESS
========================================================== */

.tdc-dual-btn-primary {
    background: #f26322;

    border: 1px solid #f26322;

    color: #ffffff;
}


.tdc-dual-btn-primary > span {
    background: #111111;

    color: #ffffff;
}


.tdc-dual-btn-primary:hover {
    background: #ffffff;

    border-color: #ffffff;

    color: #111111;

    transform: translateY(-2px);
}


.tdc-dual-btn-primary:hover > span {
    background: #f26322;

    color: #ffffff;

    transform: translateX(2px);
}


/* ==========================================================
   SECONDARY — TRAINING
========================================================== */

.tdc-dual-btn-secondary {
    background: transparent;

    border:
        1px solid
        rgba(255, 255, 255, 0.22);

    color: #ffffff;
}


.tdc-dual-btn-secondary > span {
    background: #ffffff;

    color: #111111;
}


.tdc-dual-btn-secondary:hover {
    background: #ffffff;

    border-color: #ffffff;

    color: #111111;

    transform: translateY(-2px);
}


.tdc-dual-btn-secondary:hover > span {
    background: #f26322;

    color: #ffffff;

    transform: translateX(2px);
}


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

@media (max-width: 1100px) {

    .tdc-dual-cta-container {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .tdc-dual-cta-actions {
        justify-content: flex-start;
    }

}


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

@media (max-width: 767px) {

    .tdc-dual-cta {
        padding: 42px 0;
    }


    .tdc-dual-cta-container {
        width: 90%;

        gap: 24px;
    }


    /* Label */

    .tdc-dual-cta-label {
        margin-bottom: 9px;

        padding-left: 29px;

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


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


    /* H2 */

    .tdc-dual-cta-content h2 {
        margin-bottom: 10px;

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

        letter-spacing: -0.25px;
    }


    .tdc-dual-cta-content h2 span {
        display: block;
    }


    /* Paragraph */

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


    /* Buttons */

    .tdc-dual-cta-actions {
        width: 100%;

        flex-direction: column;

        align-items: stretch;

        gap: 9px;
    }


    .tdc-dual-btn {
        width: 100%;

        min-height: 54px;

        justify-content: space-between;

        padding:
            7px
            8px
            7px
            18px;
    }

}