/* ==========================================================
   BRANDING & CREATIVE
   SECTION 01 — HERO
========================================================== */

.bc-hero {
    position: relative;
    overflow: hidden;

    padding: 55px 0 45px;

    background: #f8f6f3;
}


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

.bc-hero-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 53%)
        minmax(400px, 47%);

    align-items: center;

    gap: 60px;
}


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

.bc-hero-content {
    position: relative;

    z-index: 4;
}


/* ==========================================================
   EYEBROW
========================================================== */

.bc-hero-eyebrow {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 12px;

    color: var(--tdc-orange, #f26322);
}


.bc-hero-line {
    width: 38px;
    height: 2px;

    flex: 0 0 38px;

    background: var(--tdc-orange, #f26322);
}


/* ==========================================================
   H1
========================================================== */

.bc-hero-content h1 {
    max-width: 750px;

    margin: 0;

    color: var(--tdc-black, #111111);
}


.bc-hero-content h1 span {
    display: block;

    color: var(--tdc-orange, #f26322);
}


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

.bc-hero-intro {
    max-width: 660px;

    margin: 17px 0 0;

    color: var(--tdc-text-muted, #66615e);
}


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

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

    gap: 8px;

    margin-top: 22px;
}


/* PRIMARY */

.bc-hero-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 50px;

    padding: 0 20px;

    border-radius: 50px;

    background: var(--tdc-orange, #f26322);

    text-decoration: none;

    color: #ffffff;

    transition:
        transform .3s ease,
        gap .3s ease,
        box-shadow .3s ease;
}


.bc-hero-primary:hover {
    transform: translateY(-2px);

    gap: 12px;

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

    color: #ffffff;
}


/* SECONDARY */

.bc-hero-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 50px;

    padding: 0 20px;

    border: 1px solid #dcd6d1;
    border-radius: 50px;

    background: #ffffff;

    text-decoration: none;

    color: #111111;

    transition:
        border-color .3s ease,
        color .3s ease,
        transform .3s ease;
}


.bc-hero-secondary:hover {
    transform: translateY(-2px);

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

    color: var(--tdc-orange, #f26322);
}


/* ==========================================================
   SERVICE TAGS
========================================================== */

.bc-hero-services {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 18px;
}


.bc-hero-services span {
    padding: 7px 10px;

    border: 1px solid #dfd9d4;
    border-radius: 50px;

    background: rgba(255,255,255,.65);

    color: #6d6661;
}


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

.bc-hero-message {
    display: grid;
    grid-template-columns:
        42px
        minmax(0, 1fr);

    align-items: center;

    gap: 11px;

    max-width: 600px;

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

    border-top: 1px solid #ded8d3;
}


.bc-hero-message-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 10px;

    background: #111111;

    color: #ffffff;
}


.bc-hero-message > div > span {
    display: block;

    margin-bottom: 2px;

    color: var(--tdc-orange, #f26322);
}


.bc-hero-message strong {
    display: block;

    color: #111111;
}


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

.bc-hero-visual {
    position: relative;

    min-height: 520px;
}


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

.bc-hero-main-image {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 45px;
    left: 35px;

    overflow: hidden;

    border-radius: 24px;

    background: #ddd8d4;

    box-shadow:
        0 24px 55px rgba(17,17,17,.12);
}


.bc-hero-main-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .8s ease;
}


.bc-hero-visual:hover
.bc-hero-main-image img {
    transform: scale(1.035);
}


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

.bc-hero-color-card {
    position: absolute;

    z-index: 5;

    left: 0;
    bottom: 0;

    width: 255px;

    padding: 15px;

    border: 1px solid rgba(17,17,17,.08);
    border-radius: 15px;

    background: rgba(255,255,255,.96);

    box-shadow:
        0 18px 40px rgba(17,17,17,.13);

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


.bc-hero-card-label {
    display: block;

    margin-bottom: 4px;

    color: var(--tdc-orange, #f26322);
}


.bc-hero-color-card strong {
    display: block;

    color: #111111;
}


/* COLORS */

.bc-hero-colors {
    display: flex;

    gap: 6px;

    margin-top: 10px;
}


.bc-hero-colors span {
    display: block;

    height: 28px;

    flex: 1;

    border-radius: 6px;
}


.bc-color-black {
    background: #111111;
}


.bc-color-orange {
    background: var(--tdc-orange, #f26322);
}


.bc-color-white {
    border: 1px solid #ded8d3;

    background: #ffffff;
}


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

.bc-hero-creative-card {
    position: absolute;

    z-index: 5;

    top: 28px;
    right: -15px;

    width: 155px;

    padding: 15px;

    border-radius: 14px;

    background: #111111;

    box-shadow:
        0 18px 40px rgba(17,17,17,.18);
}


.bc-hero-creative-card > span {
    display: block;

    margin-bottom: 8px;

    color: var(--tdc-orange, #f26322);
}


.bc-hero-creative-card strong {
    display: block;

    padding: 5px 0;

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

    color: rgba(255,255,255,.80);
}


.bc-hero-creative-card strong:last-child {
    border-bottom: 0;
}


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

.bc-hero-brand-card {
    position: absolute;

    z-index: 6;

    right: 15px;
    bottom: 28px;

    padding: 13px 16px;

    border-radius: 12px;

    background: var(--tdc-orange, #f26322);

    box-shadow:
        0 16px 35px rgba(242,99,34,.24);

    color: #ffffff;
}


.bc-hero-brand-card > span {
    display: block;

    margin-bottom: 2px;

    opacity: .72;
}


.bc-hero-brand-card strong {
    display: flex;
    align-items: center;

    gap: 6px;

    color: #ffffff;
}


.bc-hero-brand-card strong span {
    opacity: .55;
}


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

.bc-hero-journey {
    display: grid;
    grid-template-columns:
        minmax(240px, 30%)
        minmax(0, 70%);

    align-items: center;

    gap: 25px;

    margin-top: 28px;
    padding: 17px 20px;

    border-radius: 16px;

    background: #111111;
}


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

.bc-hero-journey-intro > span {
    display: block;

    margin-bottom: 3px;

    color: var(--tdc-orange, #f26322);
}


.bc-hero-journey-intro strong {
    display: block;

    color: #ffffff;
}


/* ==========================================================
   JOURNEY FLOW
========================================================== */

.bc-hero-journey-flow {
    display: grid;
    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    gap: 5px;
}


.bc-hero-journey-flow > div {
    padding: 9px 6px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;

    background: rgba(255,255,255,.05);

    text-align: center;
}


.bc-hero-journey-flow > div > span {
    display: block;

    margin-bottom: 2px;

    color: var(--tdc-orange, #f26322);
}


.bc-hero-journey-flow strong {
    display: block;

    color: rgba(255,255,255,.80);
}


.bc-hero-journey-flow > i {
    color: rgba(255,255,255,.28);
}


.bc-hero-journey-result {
    border-color: rgba(242,99,34,.25) !important;

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


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

@media (max-width: 1023px) {

    .bc-hero {
        padding: 42px 0 36px;
    }


    .bc-hero-grid {
        grid-template-columns:
            minmax(0, 52%)
            minmax(340px, 48%);

        gap: 35px;
    }


    .bc-hero-visual {
        min-height: 500px;
    }


    .bc-hero-journey {
        grid-template-columns: 1fr;

        gap: 12px;
    }

}


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

@media (max-width: 767px) {

    .bc-hero {
        padding: 32px 0 30px;
    }


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

        gap: 27px;
    }


    /* ACTIONS */

    .bc-hero-actions {
        align-items: stretch;
    }


    .bc-hero-primary,
    .bc-hero-secondary {
        width: 100%;
    }


    /* ======================================================
       VISUAL — NORMAL FLOW PREVENTS OVERLAPPING
    ====================================================== */

    .bc-hero-visual {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;

        min-height: 0;
    }


    .bc-hero-main-image {
        position: relative;

        grid-column: 1 / -1;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width: 100%;
        height: 400px;
    }


    .bc-hero-color-card,
    .bc-hero-creative-card,
    .bc-hero-brand-card {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width: auto;

        box-shadow: none;
    }


    .bc-hero-color-card {
        grid-column: 1 / -1;
    }


    .bc-hero-creative-card,
    .bc-hero-brand-card {
        min-height: 130px;
    }


    /* JOURNEY */

    .bc-hero-journey-flow {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));
    }


    .bc-hero-journey-flow > i {
        display: none;
    }

}


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

@media (max-width: 480px) {

    .bc-hero-main-image {
        height: 340px;
    }


    .bc-hero-visual {
        grid-template-columns: 1fr;
    }


    .bc-hero-color-card,
    .bc-hero-creative-card,
    .bc-hero-brand-card {
        grid-column: auto;

        min-height: auto;
    }


    .bc-hero-journey-flow {
        grid-template-columns: 1fr;

        gap: 5px;
    }


    .bc-hero-journey-flow > div {
        display: flex;
        align-items: center;

        gap: 8px;

        text-align: left;
    }


    .bc-hero-journey-flow > div > span {
        margin-bottom: 0;
    }

}


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

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

    .bc-hero-main-image img,
    .bc-hero-primary,
    .bc-hero-secondary {
        transition: none !important;
    }

}
/* ==========================================================
   BRANDING & CREATIVE
   SECTION 02 — WHY BRANDING MATTERS
========================================================== */

.bc-value {
    position: relative;
    overflow: hidden;

    padding: 50px 0;

    background: #ffffff;
}


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

.bc-value-header {
    display: grid;
    grid-template-columns:
        minmax(0, 60%)
        minmax(300px, 40%);

    align-items: end;

    gap: 55px;

    margin-bottom: 28px;
}


.bc-section-eyebrow {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 9px;

    color: var(--tdc-orange, #f26322);
}


.bc-section-line {
    width: 36px;
    height: 2px;

    flex: 0 0 36px;

    background: var(--tdc-orange, #f26322);
}


.bc-value-header h2 {
    max-width: 800px;

    margin: 0;

    color: var(--tdc-black, #111111);
}


.bc-value-header h2 span {
    display: block;

    color: var(--tdc-orange, #f26322);
}


.bc-value-header-copy {
    max-width: 490px;
}


.bc-value-header-copy p {
    margin: 0;

    color: var(--tdc-text-muted, #66615e);
}


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

.bc-value-layout {
    display: grid;
    grid-template-columns:
        minmax(390px, 46%)
        minmax(0, 54%);

    align-items: center;

    gap: 60px;
}


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

.bc-value-visual {
    position: relative;

    min-height: 570px;
}


.bc-value-image {
    position: absolute;

    inset: 0 40px 65px 0;

    overflow: hidden;

    border-radius: 23px;

    background: #ddd8d4;

    box-shadow:
        0 22px 50px rgba(17,17,17,.10);
}


.bc-value-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .7s ease;
}


.bc-value-visual:hover
.bc-value-image img {
    transform: scale(1.035);
}


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

.bc-value-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(17,17,17,.02) 25%,
            rgba(17,17,17,.10) 55%,
            rgba(17,17,17,.82) 100%
        );
}


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

.bc-value-image-copy {
    position: absolute;

    z-index: 3;

    left: 22px;
    right: 22px;
    bottom: 88px;
}


.bc-value-image-copy span {
    display: block;

    margin-bottom: 5px;

    color: var(--tdc-orange, #f26322);
}


.bc-value-image-copy strong {
    display: block;

    max-width: 390px;

    color: #ffffff;
}


/* ==========================================================
   FLOATING BRAND CARD
========================================================== */

.bc-value-brand-card {
    position: absolute;

    z-index: 5;

    left: 35px;
    right: 0;
    bottom: 0;

    padding: 15px;

    border: 1px solid rgba(17,17,17,.08);
    border-radius: 16px;

    background: rgba(255,255,255,.97);

    box-shadow:
        0 20px 45px rgba(17,17,17,.13);

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


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

.bc-value-brand-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding-bottom: 10px;

    border-bottom: 1px solid #e7e1dc;
}


.bc-value-brand-card-top > span:first-child {
    color: var(--tdc-orange, #f26322);
}


.bc-value-status {
    padding: 5px 8px;

    border-radius: 50px;

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

    color: var(--tdc-orange, #f26322);
}


/* ==========================================================
   BRAND ELEMENTS
========================================================== */

.bc-value-brand-elements {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 6px;

    margin-top: 10px;
}


.bc-value-brand-elements > div {
    display: flex;
    align-items: center;

    gap: 7px;

    padding: 9px;

    border-radius: 9px;

    background: #f8f6f3;
}


.bc-value-brand-elements span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    border-radius: 7px;

    background: #111111;

    color: #ffffff;
}


.bc-value-brand-elements strong {
    color: #111111;
}


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

.bc-value-content {
    max-width: 700px;
}


.bc-value-label {
    display: block;

    margin-bottom: 7px;

    color: var(--tdc-orange, #f26322);
}


.bc-value-content h3 {
    max-width: 650px;

    margin: 0;

    color: #111111;
}


.bc-value-content > p {
    max-width: 670px;

    color: var(--tdc-text-muted, #66615e);
}


.bc-value-content h3 + p {
    margin: 13px 0 0;
}


.bc-value-content > p + p {
    margin: 9px 0 0;
}


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

.bc-value-principles {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;

    margin-top: 20px;
}


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

.bc-value-principle {
    display: grid;
    grid-template-columns:
        38px
        minmax(0, 1fr);

    gap: 10px;

    padding: 14px;

    border: 1px solid #e4ded9;
    border-radius: 12px;

    background: #faf9f7;

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


.bc-value-principle:hover {
    transform: translateY(-3px);

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

    background: #ffffff;
}


.bc-value-principle-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 9px;

    background: #111111;

    color: #ffffff;

    transition: background .3s ease;
}


.bc-value-principle:hover
.bc-value-principle-number {
    background: var(--tdc-orange, #f26322);
}


.bc-value-principle strong {
    display: block;

    color: #111111;
}


.bc-value-principle p {
    margin: 4px 0 0;

    color: #77706b;
}


/* ==========================================================
   BRAND BUILDING FLOW
========================================================== */

.bc-value-flow {
    display: grid;
    grid-template-columns:
        minmax(240px, 28%)
        minmax(0, 72%);

    align-items: center;

    gap: 24px;

    margin-top: 25px;
    padding: 18px 20px;

    border-radius: 16px;

    background: #111111;
}


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

.bc-value-flow-intro > span {
    display: block;

    margin-bottom: 3px;

    color: var(--tdc-orange, #f26322);
}


.bc-value-flow-intro strong {
    display: block;

    color: #ffffff;
}


/* ==========================================================
   FLOW STEPS
========================================================== */

.bc-value-flow-steps {
    display: grid;
    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    gap: 5px;
}


.bc-value-flow-steps > div {
    padding: 9px 6px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;

    background: rgba(255,255,255,.05);

    text-align: center;
}


.bc-value-flow-steps > div > span {
    display: block;

    margin-bottom: 2px;

    color: var(--tdc-orange, #f26322);
}


.bc-value-flow-steps strong {
    display: block;

    color: rgba(255,255,255,.80);
}


.bc-value-flow-steps > i {
    color: rgba(255,255,255,.28);
}


.bc-value-flow-result {
    border-color: rgba(242,99,34,.24) !important;

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


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

@media (max-width: 1023px) {

    .bc-value {
        padding: 38px 0;
    }


    .bc-value-header {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .bc-value-header-copy {
        max-width: 680px;
    }


    .bc-value-layout {
        grid-template-columns:
            minmax(340px, 44%)
            minmax(0, 56%);

        gap: 35px;
    }


    .bc-value-flow {
        grid-template-columns: 1fr;

        gap: 12px;
    }

}


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

@media (max-width: 767px) {

    .bc-value {
        padding: 30px 0;
    }


    .bc-value-layout {
        grid-template-columns: 1fr;

        gap: 26px;
    }


    /* ======================================================
       VISUAL — NORMAL FLOW PREVENTS OVERLAP
    ====================================================== */

    .bc-value-visual {
        display: flex;
        flex-direction: column;

        gap: 8px;

        min-height: 0;
    }


    .bc-value-image {
        position: relative;

        inset: auto;

        width: 100%;
        height: 400px;
    }


    .bc-value-image-copy {
        bottom: 20px;
    }


    .bc-value-brand-card {
        position: relative;

        left: auto;
        right: auto;
        bottom: auto;

        width: 100%;

        box-shadow: none;
    }


    /* PRINCIPLES */

    .bc-value-principles {
        grid-template-columns: 1fr;
    }


    /* FLOW */

    .bc-value-flow-steps {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));
    }


    .bc-value-flow-steps > i {
        display: none;
    }

}


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

@media (max-width: 480px) {

    .bc-value-image {
        height: 340px;
    }


    .bc-value-brand-elements {
        grid-template-columns: 1fr;
    }


    .bc-value-flow-steps {
        grid-template-columns: 1fr;
    }


    .bc-value-flow-steps > div {
        display: flex;
        align-items: center;

        gap: 8px;

        text-align: left;
    }


    .bc-value-flow-steps > div > span {
        margin-bottom: 0;
    }

}


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

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

    .bc-value-image img,
    .bc-value-principle,
    .bc-value-principle-number {
        transition: none !important;
    }

}
/* ==========================================================
   BRANDING & CREATIVE
   SECTION 03 — SERVICES
========================================================== */

.bc-services {
    position: relative;
    overflow: hidden;
    padding: 50px 0;
    background: #f8f6f3;
}


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

.bc-services-header {
    display: grid;
    grid-template-columns: minmax(0, 60%) minmax(300px, 40%);
    align-items: end;
    gap: 55px;
    margin-bottom: 28px;
}

.bc-services-header h2 {
    max-width: 780px;
    margin: 0;
    color: var(--tdc-black, #111111);
}

.bc-services-header h2 span {
    display: block;
    color: var(--tdc-orange, #f26322);
}

.bc-services-header-copy {
    max-width: 490px;
}

.bc-services-header-copy p {
    margin: 0;
    color: var(--tdc-text-muted, #66615e);
}


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

.bc-services-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 10px;
}


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

.bc-service-card {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    border: 1px solid #e3ddd8;
    border-radius: 18px;
    background: #ffffff;
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.bc-service-card:hover {
    transform: translateY(-3px);
    border-color: rgba(242,99,34,.25);
    box-shadow: 0 16px 35px rgba(17,17,17,.07);
}


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

.bc-service-large {
    grid-column: span 7;
    min-height: 470px;
}

.bc-service-identity {
    grid-column: span 5;
}

.bc-service-guidelines,
.bc-service-social,
.bc-service-collateral {
    grid-column: span 4;
}

.bc-service-advertising {
    grid-column: span 12;
}


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

.bc-service-card-top {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bc-service-large .bc-service-card-top {
    position: absolute;
    top: 18px;
    left: 18px;
    right: 18px;
}

.bc-service-card-top > span {
    padding: 6px 9px;
    border-radius: 50px;
    background: rgba(17,17,17,.38);
    color: #ffffff;
}

.bc-service-card-top-light > span {
    background: #f1ede9;
    color: #6f6863;
}

.bc-service-card-top-light > span:first-child {
    background: #111111;
    color: #ffffff;
}


/* ==========================================================
   FEATURED BRAND STRATEGY
========================================================== */

.bc-service-large {
    background: #111111;
}

.bc-service-image {
    position: absolute;
    inset: 0;
}

.bc-service-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}

.bc-service-large:hover .bc-service-image img {
    transform: scale(1.035);
}

.bc-service-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(17,17,17,.05) 15%,
            rgba(17,17,17,.30) 50%,
            rgba(17,17,17,.94) 100%
        );
}

.bc-service-large-content {
    position: absolute;
    z-index: 4;
    left: 22px;
    right: 22px;
    bottom: 22px;
}

.bc-service-large-content > span {
    display: block;
    margin-bottom: 5px;
    color: var(--tdc-orange, #f26322);
}

.bc-service-large-content h3 {
    max-width: 500px;
    margin: 0;
    color: #ffffff;
}

.bc-service-large-content p {
    max-width: 580px;
    margin: 8px 0 0;
    color: rgba(255,255,255,.68);
}

.bc-service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 12px;
}

.bc-service-tags span {
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50px;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.75);
}


/* ==========================================================
   STANDARD CARDS
========================================================== */

.bc-service-identity,
.bc-service-guidelines,
.bc-service-social,
.bc-service-collateral {
    padding: 17px;
}

.bc-service-label {
    display: block;
    margin-bottom: 5px;
    color: var(--tdc-orange, #f26322);
}

.bc-service-card h3 {
    margin: 0;
    color: #111111;
}

.bc-service-card > p {
    margin: 7px 0 0;
    color: #756e69;
}


/* ==========================================================
   MINI IMAGES
========================================================== */

.bc-service-mini-image {
    height: 160px;
    margin: 13px 0;
    overflow: hidden;
    border-radius: 12px;
    background: #ded9d5;
}

.bc-service-mini-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.bc-service-card:hover .bc-service-mini-image img {
    transform: scale(1.04);
}


/* ==========================================================
   SERVICE FOOTER
========================================================== */

.bc-service-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px solid #e9e4df;
}

.bc-service-footer span {
    padding: 5px 7px;
    border-radius: 6px;
    background: #f6f3f0;
    color: #756e69;
}


/* ==========================================================
   GUIDELINE PREVIEW
========================================================== */

.bc-guideline-preview {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 10px;
    margin-top: 18px;
    padding: 12px;
    border-radius: 12px;
    background: #f6f3f0;
}

.bc-guideline-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    border-radius: 9px;
    background: #111111;
}

.bc-guideline-logo span {
    color: #ffffff;
}

.bc-guideline-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}

.bc-guideline-colors {
    display: flex;
    gap: 5px;
}

.bc-guideline-colors span {
    display: block;
    flex: 1;
    height: 30px;
    border-radius: 6px;
}

.bc-guideline-colors span:nth-child(1) {
    background: #111111;
}

.bc-guideline-colors span:nth-child(2) {
    background: var(--tdc-orange, #f26322);
}

.bc-guideline-colors span:nth-child(3) {
    border: 1px solid #ddd7d2;
    background: #ffffff;
}

.bc-guideline-lines {
    display: grid;
    gap: 5px;
}

.bc-guideline-lines span {
    display: block;
    height: 5px;
    border-radius: 10px;
    background: #d8d2cd;
}

.bc-guideline-lines span:nth-child(2) {
    width: 75%;
}

.bc-guideline-lines span:nth-child(3) {
    width: 55%;
}


/* ==========================================================
   SERVICE GOAL
========================================================== */

.bc-service-goal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 11px;
    border-top: 1px solid #e9e4df;
}

.bc-service-goal span {
    color: #958d87;
}

.bc-service-goal strong {
    color: var(--tdc-orange, #f26322);
}


/* ==========================================================
   ADVERTISING CREATIVE
========================================================== */

.bc-service-advertising {
    display: grid;
    grid-template-columns: minmax(300px, 38%) minmax(0, 62%);
    align-items: center;
    gap: 35px;
    padding: 22px;
    background: #111111;
    border-color: #111111;
}

.bc-service-advertising .bc-service-card-top {
    position: absolute;
    top: 20px;
    right: 20px;
    left: 20px;
}

.bc-service-advertising .bc-service-label {
    margin-top: 55px;
}

.bc-service-advertising h3 {
    color: #ffffff;
}

.bc-service-advertising > p {
    color: rgba(255,255,255,.60);
}

.bc-service-advertising > .bc-service-label,
.bc-service-advertising > h3,
.bc-service-advertising > p {
    grid-column: 1;
}

.bc-ad-creative {
    grid-column: 2;
    grid-row: 1 / span 4;

    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(150px, .7fr);
    gap: 8px;

    margin-top: 48px;
}


/* MOCK AD */

.bc-ad-visual {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 260px;
    padding: 18px;
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            rgba(242,99,34,.92),
            rgba(242,99,34,.55)
        );
}

.bc-ad-visual > span:first-child {
    margin-bottom: auto;
    color: rgba(255,255,255,.75);
}

.bc-ad-visual strong {
    display: block;
    color: #ffffff;
}

.bc-ad-visual strong em {
    display: block;
    opacity: .70;
}

.bc-ad-button {
    align-self: flex-start;
    margin-top: 13px;
    padding: 7px 11px;
    border-radius: 50px;
    background: #111111;
    color: #ffffff;
}


/* AD DATA */

.bc-ad-data {
    padding: 14px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    background: rgba(255,255,255,.05);
}

.bc-ad-data > span {
    display: block;
    margin-bottom: 10px;
    color: var(--tdc-orange, #f26322);
}

.bc-ad-data > div {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.bc-ad-data > div:last-child {
    border-bottom: 0;
}

.bc-ad-data strong,
.bc-ad-data > div > span {
    display: block;
}

.bc-ad-data strong {
    color: var(--tdc-orange, #f26322);
}

.bc-ad-data > div > span {
    margin-top: 2px;
    color: rgba(255,255,255,.70);
}


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

.bc-services-bottom {
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;

    margin-top: 12px;
    padding: 17px 20px;

    border: 1px solid #e2dcd7;
    border-radius: 15px;
    background: #ffffff;
}

.bc-services-bottom-mark {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    border-radius: 11px;
    background: rgba(242,99,34,.10);
}

.bc-services-bottom-mark span {
    width: 12px;
    height: 12px;

    border: 3px solid var(--tdc-orange, #f26322);
    border-radius: 50%;

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

.bc-services-bottom > div:nth-child(2) > span {
    display: block;
    margin-bottom: 2px;
    color: var(--tdc-orange, #f26322);
}

.bc-services-bottom strong {
    display: block;
    color: #111111;
}

.bc-services-bottom p {
    margin: 3px 0 0;
    color: #77706b;
}

.bc-services-bottom > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 46px;
    padding: 0 17px;

    border-radius: 50px;
    background: #111111;

    text-decoration: none;
    white-space: nowrap;
    color: #ffffff;

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

.bc-services-bottom > a:hover {
    transform: translateY(-2px);
    background: var(--tdc-orange, #f26322);
    color: #ffffff;
}


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

@media (max-width: 1023px) {

    .bc-services {
        padding: 38px 0;
    }

    .bc-services-header {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .bc-services-header-copy {
        max-width: 680px;
    }

    .bc-service-large {
        grid-column: span 12;
    }

    .bc-service-identity,
    .bc-service-guidelines,
    .bc-service-social,
    .bc-service-collateral {
        grid-column: span 6;
    }

    .bc-service-advertising {
        grid-template-columns: 1fr 1fr;
    }

    .bc-services-bottom {
        grid-template-columns: 45px minmax(0, 1fr);
    }

    .bc-services-bottom > a {
        grid-column: 1 / -1;
        width: 100%;
    }

}


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

@media (max-width: 767px) {

    .bc-services {
        padding: 30px 0;
    }

    .bc-services-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .bc-service-large,
    .bc-service-identity,
    .bc-service-guidelines,
    .bc-service-social,
    .bc-service-collateral,
    .bc-service-advertising {
        grid-column: auto;
    }

    .bc-service-large {
        min-height: 470px;
    }

    .bc-service-card {
        min-height: auto;
    }


    /* ADVERTISING */

    .bc-service-advertising {
        display: block;
        padding: 17px;
    }

    .bc-service-advertising .bc-service-card-top {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
    }

    .bc-service-advertising .bc-service-label {
        margin-top: 18px;
    }

    .bc-ad-creative {
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 18px;
    }

    .bc-ad-visual {
        min-height: 250px;
    }

}


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

@media (max-width: 480px) {

    .bc-service-large {
        min-height: 500px;
    }

    .bc-service-mini-image {
        height: 145px;
    }

    .bc-guideline-preview {
        grid-template-columns: 75px minmax(0, 1fr);
    }

    .bc-services-bottom {
        grid-template-columns: 1fr;
        padding: 15px;
    }

}


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

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

    .bc-service-card,
    .bc-service-image img,
    .bc-service-mini-image img,
    .bc-services-bottom > a {
        transition: none !important;
    }

}
/* ==========================================================
   BRANDING & CREATIVE
   SECTION 04 — DIGITAL CREATIVE
========================================================== */

.bc-digital {
    position: relative;
    overflow: hidden;

    padding: 50px 0;

    background: #ffffff;
}


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

.bc-digital-header {
    display: grid;
    grid-template-columns:
        minmax(0, 60%)
        minmax(300px, 40%);

    align-items: end;

    gap: 55px;

    margin-bottom: 28px;
}


.bc-digital-header h2 {
    max-width: 800px;

    margin: 0;

    color: var(--tdc-black, #111111);
}


.bc-digital-header h2 span {
    display: block;

    color: var(--tdc-orange, #f26322);
}


.bc-digital-header-copy {
    max-width: 500px;
}


.bc-digital-header-copy p {
    margin: 0;

    color: var(--tdc-text-muted, #66615e);
}


/* ==========================================================
   MAIN SHOWCASE
========================================================== */

.bc-digital-showcase {
    display: grid;
    grid-template-columns:
        minmax(0, 58%)
        minmax(350px, 42%);

    gap: 10px;
}


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

.bc-digital-main {
    position: relative;

    min-height: 560px;

    overflow: hidden;

    border-radius: 20px;

    background: #111111;
}


.bc-digital-main-image {
    position: absolute;

    inset: 0;
}


.bc-digital-main-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .8s ease;
}


.bc-digital-main:hover
.bc-digital-main-image img {
    transform: scale(1.035);
}


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

.bc-digital-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(17,17,17,.04) 20%,
            rgba(17,17,17,.18) 45%,
            rgba(17,17,17,.92) 100%
        );
}


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

.bc-digital-main-content {
    position: absolute;

    z-index: 4;

    left: 24px;
    right: 24px;
    bottom: 25px;

    max-width: 600px;
}


.bc-digital-main-content > span {
    display: block;

    margin-bottom: 6px;

    color: var(--tdc-orange, #f26322);
}


.bc-digital-main-content h3 {
    margin: 0;

    color: #ffffff;
}


.bc-digital-main-content h3 em {
    display: block;

    color: var(--tdc-orange, #f26322);
}


.bc-digital-main-content p {
    max-width: 540px;

    margin: 9px 0 0;

    color: rgba(255,255,255,.68);
}


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

.bc-digital-floating {
    position: absolute;

    z-index: 5;

    top: 20px;
    left: 20px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 10px 13px;

    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50px;

    background: rgba(17,17,17,.68);

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


.bc-digital-floating-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background: var(--tdc-orange, #f26322);

    box-shadow:
        0 0 0 5px rgba(242,99,34,.15);
}


.bc-digital-floating div span {
    display: block;

    color: rgba(255,255,255,.48);
}


.bc-digital-floating strong {
    display: block;

    color: #ffffff;
}


/* ==========================================================
   PLATFORM COLUMN
========================================================== */

.bc-digital-platforms {
    display: grid;
    grid-template-columns: 1fr;

    gap: 10px;
}


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

.bc-platform-card {
    padding: 15px;

    border: 1px solid #e4ded9;
    border-radius: 18px;

    background: #f8f6f3;

    transition:
        transform .3s ease,
        border-color .3s ease;
}


.bc-platform-card:hover {
    transform: translateY(-3px);

    border-color: rgba(242,99,34,.30);
}


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

.bc-platform-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 10px;
}


.bc-platform-top span:first-child {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border-radius: 8px;

    background: #111111;

    color: #ffffff;
}


.bc-platform-top span:last-child {
    color: var(--tdc-orange, #f26322);
}


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

.bc-platform-image {
    height: 150px;

    overflow: hidden;

    border-radius: 11px;

    background: #ddd8d4;
}


.bc-platform-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .6s ease;
}


.bc-platform-card:hover
.bc-platform-image img {
    transform: scale(1.04);
}


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

.bc-platform-content {
    padding-top: 11px;
}


.bc-platform-content strong {
    display: block;

    color: #111111;
}


.bc-platform-content p {
    margin: 5px 0 0;

    color: #756e69;
}


/* ==========================================================
   SECONDARY TOUCHPOINTS
========================================================== */

.bc-digital-touchpoints {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;

    margin-top: 10px;
}


/* ==========================================================
   TOUCHPOINT
========================================================== */

.bc-touchpoint {
    position: relative;

    min-height: 330px;

    padding: 17px;

    overflow: hidden;

    border: 1px solid #e4ded9;
    border-radius: 17px;

    background: #f8f6f3;

    transition:
        transform .3s ease,
        border-color .3s ease;
}


.bc-touchpoint:hover {
    transform: translateY(-3px);

    border-color: rgba(242,99,34,.28);
}


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

.bc-touchpoint-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 8px;

    background: #111111;

    color: #ffffff;
}


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

.bc-touchpoint-content {
    margin-top: 14px;
}


.bc-touchpoint-content > span {
    display: block;

    margin-bottom: 4px;

    color: var(--tdc-orange, #f26322);
}


.bc-touchpoint-content strong {
    display: block;

    color: #111111;
}


.bc-touchpoint-content p {
    margin: 5px 0 0;

    color: #756e69;
}


/* ==========================================================
   PREVIEW AREA
========================================================== */

.bc-touchpoint-preview {
    position: absolute;

    left: 17px;
    right: 17px;
    bottom: 17px;

    height: 115px;
}


/* ==========================================================
   WEBSITE MOCKUP
========================================================== */

.bc-web-browser {
    height: 100%;

    overflow: hidden;

    border: 1px solid #d8d2cd;
    border-radius: 10px;

    background: #ffffff;

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


.bc-web-browser-top {
    display: flex;

    gap: 4px;

    padding: 7px;

    background: #efebe8;
}


.bc-web-browser-top span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #bbb3ad;
}


.bc-web-browser-content {
    padding: 12px;
}


.bc-web-line {
    display: block;

    width: 75%;
    height: 6px;

    margin-bottom: 6px;

    border-radius: 10px;

    background: #ded8d3;
}


.bc-web-line-small {
    width: 30%;

    background: var(--tdc-orange, #f26322);
}


.bc-web-line-large {
    width: 90%;
    height: 10px;

    background: #111111;
}


.bc-web-button {
    display: block;

    width: 60px;
    height: 18px;

    margin-top: 9px;

    border-radius: 50px;

    background: var(--tdc-orange, #f26322);
}


/* ==========================================================
   PRINT MOCKUP
========================================================== */

.bc-touchpoint-print {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}


.bc-print-sheet {
    position: absolute;

    width: 105px;
    height: 110px;

    border-radius: 7px;
}


.bc-print-sheet-back {
    transform: rotate(8deg) translate(15px, 5px);

    background: #d9d3ce;
}


.bc-print-sheet-front {
    z-index: 2;

    padding: 10px;

    transform: rotate(-4deg);

    background: #111111;

    box-shadow:
        0 12px 25px rgba(17,17,17,.15);
}


.bc-print-sheet-front > span {
    color: var(--tdc-orange, #f26322);
}


.bc-print-sheet-front > div {
    width: 25px;
    height: 3px;

    margin: 9px 0;

    background: var(--tdc-orange, #f26322);
}


.bc-print-sheet-front strong {
    color: #ffffff;
}


/* ==========================================================
   PRESENTATION MOCKUP
========================================================== */

.bc-slide-preview {
    height: 100%;

    padding: 12px;

    border-radius: 10px;

    background: #111111;

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


.bc-slide-preview > span {
    display: block;

    margin-bottom: 6px;

    color: var(--tdc-orange, #f26322);
}


.bc-slide-preview strong {
    display: block;

    color: #ffffff;
}


.bc-slide-preview strong em {
    color: var(--tdc-orange, #f26322);
}


.bc-slide-bars {
    display: flex;
    align-items: flex-end;

    gap: 5px;

    height: 30px;

    margin-top: 9px;
}


.bc-slide-bars span {
    display: block;

    width: 13px;

    border-radius: 3px 3px 0 0;

    background: rgba(255,255,255,.28);
}


.bc-slide-bars span:nth-child(1) {
    height: 35%;
}


.bc-slide-bars span:nth-child(2) {
    height: 65%;

    background: var(--tdc-orange, #f26322);
}


.bc-slide-bars span:nth-child(3) {
    height: 100%;
}


/* ==========================================================
   BRAND SYSTEM STRIP
========================================================== */

.bc-digital-system {
    display: grid;
    grid-template-columns:
        minmax(210px, 25%)
        minmax(0, 75%);

    align-items: center;

    gap: 20px;

    margin-top: 10px;
    padding: 17px 20px;

    border-radius: 16px;

    background: #111111;
}


.bc-digital-system-intro > span {
    display: block;

    margin-bottom: 3px;

    color: var(--tdc-orange, #f26322);
}


.bc-digital-system-intro strong {
    display: block;

    color: #ffffff;
}


/* ==========================================================
   SYSTEM FLOW
========================================================== */

.bc-digital-system-flow {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 7px;
}


.bc-digital-system-flow > div {
    min-width: 85px;

    padding: 8px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;

    background: rgba(255,255,255,.05);

    text-align: center;
}


.bc-digital-system-flow > div span {
    display: block;

    color: var(--tdc-orange, #f26322);
}


.bc-digital-system-flow > div strong {
    display: block;

    color: rgba(255,255,255,.80);
}


.bc-digital-system-flow > i {
    color: rgba(255,255,255,.30);
}


.bc-digital-system-result {
    border-color: rgba(242,99,34,.28) !important;

    background: rgba(242,99,34,.13) !important;
}


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

@media (max-width: 1023px) {

    .bc-digital {
        padding: 38px 0;
    }


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

        gap: 12px;
    }


    .bc-digital-header-copy {
        max-width: 680px;
    }


    .bc-digital-showcase {
        grid-template-columns:
            minmax(0, 55%)
            minmax(300px, 45%);
    }


    .bc-digital-system {
        grid-template-columns: 1fr;
    }


    .bc-digital-system-flow {
        justify-content: flex-start;

        flex-wrap: wrap;
    }

}


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

@media (max-width: 767px) {

    .bc-digital {
        padding: 30px 0;
    }


    .bc-digital-showcase {
        grid-template-columns: 1fr;
    }


    .bc-digital-main {
        min-height: 470px;
    }


    .bc-digital-platforms {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .bc-digital-touchpoints {
        grid-template-columns: 1fr;
    }


    .bc-touchpoint {
        min-height: 310px;
    }


    .bc-digital-system-flow {
        display: grid;
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 5px;
    }


    .bc-digital-system-flow > i {
        display: none;
    }


    .bc-digital-system-flow > div {
        min-width: 0;
    }

}


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

@media (max-width: 480px) {

    .bc-digital-main {
        min-height: 440px;
    }


    .bc-digital-platforms {
        grid-template-columns: 1fr;
    }


    .bc-platform-image {
        height: 175px;
    }


    .bc-digital-system-flow {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .bc-digital-system-result {
        grid-column: 1 / -1;
    }

}


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

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

    .bc-digital-main-image img,
    .bc-platform-card,
    .bc-platform-image img,
    .bc-touchpoint {
        transition: none !important;
    }

}
/* ==========================================================
   BRANDING & CREATIVE
   SECTION 05 — CREATIVE PROCESS
========================================================== */

.bc-process {
    position: relative;
    overflow: hidden;

    padding: 50px 0;

    background: #f8f6f3;
}


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

.bc-process-header {
    display: grid;
    grid-template-columns:
        minmax(0, 60%)
        minmax(300px, 40%);

    align-items: end;

    gap: 55px;

    margin-bottom: 27px;
}


.bc-process-header h2 {
    max-width: 800px;

    margin: 0;

    color: var(--tdc-black, #111111);
}


.bc-process-header h2 span {
    display: block;

    color: var(--tdc-orange, #f26322);
}


.bc-process-header-copy {
    max-width: 500px;
}


.bc-process-header-copy p {
    margin: 0;

    color: var(--tdc-text-muted, #66615e);
}


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

.bc-process-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 52%)
        minmax(350px, 48%);

    min-height: 320px;

    overflow: hidden;

    border-radius: 20px;

    background: #111111;
}


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

.bc-process-intro-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 30px;
}


.bc-process-label {
    display: block;

    margin-bottom: 6px;

    color: var(--tdc-orange, #f26322);
}


.bc-process-intro-content h3 {
    max-width: 570px;

    margin: 0;

    color: #ffffff;
}


.bc-process-intro-content h3 span {
    display: block;

    color: var(--tdc-orange, #f26322);
}


.bc-process-intro-content > p {
    max-width: 570px;

    margin: 10px 0 0;

    color: rgba(255,255,255,.65);
}


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

.bc-process-intro-bottom {
    display: flex;
    align-items: center;

    gap: 12px;

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

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


.bc-process-intro-bottom > div {
    flex: 1;
}


.bc-process-intro-bottom span {
    display: block;

    margin-bottom: 2px;

    color: var(--tdc-orange, #f26322);
}


.bc-process-intro-bottom strong {
    display: block;

    color: rgba(255,255,255,.82);
}


.bc-process-intro-bottom > i {
    color: rgba(255,255,255,.28);
}


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

.bc-process-intro-image {
    position: relative;

    min-height: 320px;

    overflow: hidden;
}


.bc-process-intro-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .8s ease;
}


.bc-process-intro:hover
.bc-process-intro-image img {
    transform: scale(1.035);
}


.bc-process-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(17,17,17,.03),
            rgba(17,17,17,.30)
        );
}


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

.bc-process-image-tag {
    position: absolute;

    right: 16px;
    bottom: 16px;

    padding: 10px 13px;

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 10px;

    background: rgba(17,17,17,.75);

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


.bc-process-image-tag span {
    display: block;

    margin-bottom: 2px;

    color: var(--tdc-orange, #f26322);
}


.bc-process-image-tag strong {
    display: block;

    color: #ffffff;
}


/* ==========================================================
   PROCESS JOURNEY
========================================================== */

.bc-process-journey {
    display: grid;

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

    align-items: stretch;

    margin-top: 12px;
}


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

.bc-process-step {
    display: flex;
    flex-direction: column;

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

    padding: 15px;

    border: 1px solid #e1dbd6;
    border-radius: 14px;

    background: #ffffff;

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


.bc-process-step:hover {
    transform: translateY(-3px);

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

    box-shadow:
        0 14px 30px rgba(17,17,17,.06);
}


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

.bc-process-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    padding-bottom: 11px;

    border-bottom: 1px solid #ece7e3;
}


.bc-process-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border-radius: 8px;

    background: #111111;

    color: #ffffff;

    transition: background .3s ease;
}


.bc-process-step:hover
.bc-process-number {
    background: var(--tdc-orange, #f26322);
}


.bc-process-stage {
    color: var(--tdc-orange, #f26322);
}


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

.bc-process-step-content {
    padding-top: 13px;
}


.bc-process-step-content h3 {
    margin: 0;

    color: #111111;
}


.bc-process-step-content p {
    margin: 7px 0 0;

    color: #756e69;
}


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

.bc-process-step-footer {
    display: flex;
    flex-wrap: wrap;

    gap: 4px;

    margin-top: auto;
    padding-top: 13px;
}


.bc-process-step-footer span {
    padding: 5px 7px;

    border-radius: 50px;

    background: #f4f1ee;

    color: #746d68;
}


/* ==========================================================
   CONNECTOR
========================================================== */

.bc-process-connector {
    position: relative;

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


.bc-process-connector > span {
    position: absolute;

    left: 0;
    right: 0;

    height: 1px;

    background: #d9d2cd;
}


.bc-process-connector > i {
    position: relative;

    z-index: 2;

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

    width: 22px;
    height: 22px;

    border-radius: 50%;

    background: #f8f6f3;

    color: var(--tdc-orange, #f26322);
}


/* ==========================================================
   FEATURED DESIGN STEP
========================================================== */

.bc-process-step-featured {
    border-color: rgba(242,99,34,.25);

    background: #111111;
}


.bc-process-step-featured
.bc-process-step-top {
    border-color: rgba(255,255,255,.10);
}


.bc-process-step-featured
.bc-process-number {
    background: var(--tdc-orange, #f26322);
}


.bc-process-step-featured
.bc-process-step-content h3 {
    color: #ffffff;
}


.bc-process-step-featured
.bc-process-step-content p {
    color: rgba(255,255,255,.60);
}


.bc-process-step-featured
.bc-process-step-footer span {
    background: rgba(255,255,255,.07);

    color: rgba(255,255,255,.68);
}


/* ==========================================================
   DESIGN PREVIEW
========================================================== */

.bc-process-design-preview {
    display: grid;
    grid-template-columns:
        55px
        minmax(0, 1fr)
        62px;

    gap: 5px;

    margin-top: 12px;
}


.bc-process-design-a,
.bc-process-design-b,
.bc-process-design-c {
    min-height: 55px;

    border-radius: 7px;
}


/* TYPE */

.bc-process-design-a {
    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--tdc-orange, #f26322);

    color: #ffffff;
}


/* COLORS */

.bc-process-design-b {
    display: flex;

    gap: 3px;

    padding: 5px;

    background: rgba(255,255,255,.06);
}


.bc-process-design-b span {
    flex: 1;

    border-radius: 4px;
}


.bc-process-design-b span:nth-child(1) {
    background: #ffffff;
}


.bc-process-design-b span:nth-child(2) {
    background: var(--tdc-orange, #f26322);
}


.bc-process-design-b span:nth-child(3) {
    background: #393939;
}


/* BRAND */

.bc-process-design-c {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 6px;

    background: #ffffff;
}


.bc-process-design-c > span {
    display: block;

    width: 18px;
    height: 3px;

    margin-bottom: 5px;

    background: var(--tdc-orange, #f26322);
}


.bc-process-design-c strong {
    color: #111111;
}


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

.bc-process-step-final {
    border-color: rgba(242,99,34,.25);
}


.bc-process-step-final
.bc-process-number {
    background: var(--tdc-orange, #f26322);
}


/* ==========================================================
   RESULT BAR
========================================================== */

.bc-process-result {
    display: grid;
    grid-template-columns:
        minmax(250px, .8fr)
        minmax(0, 1.3fr)
        auto;

    align-items: center;

    gap: 20px;

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

    border: 1px solid #e1dbd6;
    border-radius: 14px;

    background: #ffffff;
}


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

.bc-process-result-left {
    display: flex;
    align-items: center;

    gap: 10px;
}


.bc-process-result-dot {
    width: 12px;
    height: 12px;

    flex: 0 0 12px;

    border-radius: 50%;

    background: var(--tdc-orange, #f26322);

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


.bc-process-result-left > div > span {
    display: block;

    margin-bottom: 2px;

    color: var(--tdc-orange, #f26322);
}


.bc-process-result-left strong {
    display: block;

    color: #111111;
}


.bc-process-result > p {
    margin: 0;

    color: #756e69;
}


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

.bc-process-result > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 46px;

    padding: 0 17px;

    border-radius: 50px;

    background: #111111;

    text-decoration: none;
    white-space: nowrap;

    color: #ffffff;

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


.bc-process-result > a:hover {
    transform: translateY(-2px);

    gap: 11px;

    background: var(--tdc-orange, #f26322);

    color: #ffffff;
}


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

@media (max-width: 1100px) {

    .bc-process-journey {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));

        gap: 8px;
    }


    .bc-process-connector {
        display: none;
    }


    .bc-process-step {
        min-height: 330px;
    }

}


@media (max-width: 1023px) {

    .bc-process {
        padding: 38px 0;
    }


    .bc-process-header {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .bc-process-header-copy {
        max-width: 680px;
    }


    .bc-process-intro {
        grid-template-columns:
            minmax(0, 52%)
            minmax(300px, 48%);
    }


    .bc-process-result {
        grid-template-columns:
            minmax(220px, .8fr)
            minmax(0, 1.2fr);
    }


    .bc-process-result > a {
        grid-column: 1 / -1;

        width: 100%;
    }

}


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

@media (max-width: 767px) {

    .bc-process {
        padding: 30px 0;
    }


    /* INTRO */

    .bc-process-intro {
        grid-template-columns: 1fr;
    }


    .bc-process-intro-content {
        padding: 22px 18px;
    }


    .bc-process-intro-image {
        min-height: 280px;
    }


    /* PROCESS */

    .bc-process-journey {
        position: relative;

        display: grid;
        grid-template-columns: 1fr;

        gap: 7px;

        padding-left: 20px;
    }


    /* VERTICAL JOURNEY LINE */

    .bc-process-journey::before {
        content: "";

        position: absolute;

        top: 20px;
        bottom: 20px;
        left: 6px;

        width: 1px;

        background: #d8d1cc;
    }


    .bc-process-step {
        position: relative;

        min-height: 0;
    }


    .bc-process-step::before {
        content: "";

        position: absolute;

        top: 25px;
        left: -19px;

        width: 9px;
        height: 9px;

        border: 3px solid #f8f6f3;
        border-radius: 50%;

        background: var(--tdc-orange, #f26322);
    }


    .bc-process-step-footer {
        margin-top: 15px;
    }


    /* RESULT */

    .bc-process-result {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .bc-process-result > a {
        grid-column: auto;
    }

}


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

@media (max-width: 480px) {

    .bc-process-intro-bottom {
        align-items: flex-start;
        flex-direction: column;
    }


    .bc-process-intro-bottom > i {
        transform: rotate(90deg);
    }


    .bc-process-intro-image {
        min-height: 240px;
    }


    .bc-process-design-preview {
        grid-template-columns:
            50px
            minmax(0, 1fr)
            58px;
    }

}


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

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

    .bc-process-intro-image img,
    .bc-process-step,
    .bc-process-number,
    .bc-process-result > a {
        transition: none !important;
    }

}
/* ==========================================================
   BRANDING & CREATIVE
   SECTION 06 — WHY CHOOSE THE DIGITAL CAFE
========================================================== */

.bc-why {
    position: relative;
    overflow: hidden;

    padding: 50px 0;

    background: #ffffff;
}


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

.bc-why-header {
    display: grid;
    grid-template-columns:
        minmax(0, 60%)
        minmax(300px, 40%);

    align-items: end;

    gap: 55px;

    margin-bottom: 28px;
}


.bc-why-header h2 {
    max-width: 800px;

    margin: 0;

    color: var(--tdc-black, #111111);
}


.bc-why-header h2 span {
    display: block;

    color: var(--tdc-orange, #f26322);
}


.bc-why-header-copy {
    max-width: 500px;
}


.bc-why-header-copy p {
    margin: 0;

    color: var(--tdc-text-muted, #66615e);
}


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

.bc-why-layout {
    display: grid;
    grid-template-columns:
        minmax(390px, 44%)
        minmax(0, 56%);

    align-items: stretch;

    gap: 12px;
}


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

.bc-why-visual {
    position: relative;

    min-height: 650px;

    overflow: hidden;

    border-radius: 20px;

    background: #111111;
}


.bc-why-image {
    position: absolute;

    inset: 0;
}


.bc-why-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .8s ease;
}


.bc-why-visual:hover
.bc-why-image img {
    transform: scale(1.035);
}


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

.bc-why-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(17,17,17,.03) 20%,
            rgba(17,17,17,.20) 48%,
            rgba(17,17,17,.92) 100%
        );
}


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

.bc-why-image-content {
    position: absolute;

    z-index: 4;

    left: 22px;
    right: 22px;
    bottom: 90px;
}


.bc-why-image-content > span {
    display: block;

    margin-bottom: 5px;

    color: var(--tdc-orange, #f26322);
}


.bc-why-image-content h3 {
    max-width: 420px;

    margin: 0;

    color: #ffffff;
}


.bc-why-image-content h3 em {
    display: block;

    color: var(--tdc-orange, #f26322);
}


.bc-why-image-content p {
    max-width: 440px;

    margin: 8px 0 0;

    color: rgba(255,255,255,.68);
}


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

.bc-why-floating {
    position: absolute;

    z-index: 5;

    left: 20px;
    right: 20px;
    bottom: 20px;

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

    align-items: center;

    gap: 11px;

    padding: 11px;

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

    background: rgba(17,17,17,.76);

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


.bc-why-floating-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 55px;
    height: 55px;

    border-radius: 10px;

    background: var(--tdc-orange, #f26322);

    color: #ffffff;
}


.bc-why-floating div > span {
    display: block;

    margin-bottom: 2px;

    color: var(--tdc-orange, #f26322);
}


.bc-why-floating strong {
    display: block;

    color: #ffffff;
}


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

.bc-why-points {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;
}


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

.bc-why-point {
    display: grid;
    grid-template-columns:
        42px
        minmax(0, 1fr);

    align-content: start;

    gap: 11px;

    padding: 17px;

    border: 1px solid #e3ddd8;
    border-radius: 15px;

    background: #f8f6f3;

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


.bc-why-point:hover {
    transform: translateY(-3px);

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

    background: #ffffff;
}


/* LAST CARD SPANS WIDTH */

.bc-why-point-last {
    grid-column: 1 / -1;
}


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

.bc-why-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 9px;

    background: #111111;

    color: #ffffff;

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


.bc-why-point:hover
.bc-why-number {
    transform: rotate(-4deg);

    background: var(--tdc-orange, #f26322);
}


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

.bc-why-point-content > span {
    display: block;

    margin-bottom: 4px;

    color: var(--tdc-orange, #f26322);
}


.bc-why-point-content h3 {
    margin: 0;

    color: #111111;
}


.bc-why-point-content p {
    margin: 6px 0 0;

    color: #756e69;
}


/* ==========================================================
   LAST CARD SPECIAL LAYOUT
========================================================== */

.bc-why-point-last {
    grid-template-columns:
        42px
        minmax(0, 1fr);

    background: #111111;

    border-color: #111111;
}


.bc-why-point-last
.bc-why-number {
    background: var(--tdc-orange, #f26322);
}


.bc-why-point-last
.bc-why-point-content h3 {
    color: #ffffff;
}


.bc-why-point-last
.bc-why-point-content p {
    max-width: 680px;

    color: rgba(255,255,255,.62);
}


/* ==========================================================
   EQUATION STRIP
========================================================== */

.bc-why-equation {
    display: grid;
    grid-template-columns:
        minmax(250px, 28%)
        minmax(0, 72%);

    align-items: center;

    gap: 20px;

    margin-top: 12px;
    padding: 17px 20px;

    border-radius: 16px;

    background: #111111;
}


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

.bc-why-equation-intro > span {
    display: block;

    margin-bottom: 3px;

    color: var(--tdc-orange, #f26322);
}


.bc-why-equation-intro strong {
    display: block;

    color: #ffffff;
}


/* ==========================================================
   EQUATION FLOW
========================================================== */

.bc-why-equation-flow {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 7px;
}


.bc-why-equation-flow > div {
    min-width: 82px;

    padding: 8px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;

    background: rgba(255,255,255,.05);

    text-align: center;
}


.bc-why-equation-flow > div > span {
    display: block;

    color: var(--tdc-orange, #f26322);
}


.bc-why-equation-flow > div > strong {
    display: block;

    color: rgba(255,255,255,.80);
}


.bc-why-symbol {
    color: rgba(255,255,255,.28);
}


.bc-why-equation-flow > i {
    margin: 0 3px;

    color: var(--tdc-orange, #f26322);
}


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

.bc-why-equation-flow
.bc-why-equation-result {
    min-width: 155px;

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

    background: rgba(242,99,34,.13);
}


.bc-why-equation-result strong {
    color: #ffffff !important;
}


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

@media (max-width: 1023px) {

    .bc-why {
        padding: 38px 0;
    }


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

        gap: 12px;
    }


    .bc-why-header-copy {
        max-width: 680px;
    }


    .bc-why-layout {
        grid-template-columns:
            minmax(320px, 40%)
            minmax(0, 60%);
    }


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


    .bc-why-point-last {
        grid-column: auto;
    }


    .bc-why-equation {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .bc-why-equation-flow {
        justify-content: flex-start;

        flex-wrap: wrap;
    }

}


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

@media (max-width: 767px) {

    .bc-why {
        padding: 30px 0;
    }


    .bc-why-layout {
        grid-template-columns: 1fr;

        gap: 8px;
    }


    .bc-why-visual {
        min-height: 520px;
    }


    .bc-why-points {
        gap: 7px;
    }


    /* EQUATION */

    .bc-why-equation-flow {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 5px;
    }


    .bc-why-symbol,
    .bc-why-equation-flow > i {
        display: none;
    }


    .bc-why-equation-flow > div {
        min-width: 0;
    }


    .bc-why-equation-flow
    .bc-why-equation-result {
        grid-column: 1 / -1;

        min-width: 0;
    }

}


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

@media (max-width: 480px) {

    .bc-why-visual {
        min-height: 500px;
    }


    .bc-why-image-content {
        bottom: 105px;
    }


    .bc-why-floating {
        grid-template-columns:
            48px
            minmax(0, 1fr);
    }


    .bc-why-floating-number {
        width: 48px;
        height: 48px;
    }


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


    .bc-why-number {
        width: 38px;
        height: 38px;
    }

}


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

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

    .bc-why-image img,
    .bc-why-point,
    .bc-why-number {
        transition: none !important;
    }

}
/* ==========================================================
   BRANDING & CREATIVE
   SECTION 07 — FAQ
========================================================== */

.bc-faq {
    position: relative;
    padding: 50px 0;
    background: #f8f6f3;
}


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

.bc-faq-header {
    display: grid;
    grid-template-columns:
        minmax(0, 60%)
        minmax(300px, 40%);

    align-items: end;
    gap: 55px;

    margin-bottom: 28px;
}


.bc-faq-header h2 {
    max-width: 800px;
    margin: 0;

    color: var(--tdc-black, #111111);
}


.bc-faq-header h2 span {
    display: block;
    color: var(--tdc-orange, #f26322);
}


.bc-faq-header-copy {
    max-width: 500px;
}


.bc-faq-header-copy p {
    margin: 0;
    color: var(--tdc-text-muted, #66615e);
}


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

.bc-faq-layout {
    display: grid;
    grid-template-columns:
        minmax(300px, 31%)
        minmax(0, 69%);

    align-items: start;
    gap: 12px;
}


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

.bc-faq-side {
    position: sticky;
    top: 100px;

    padding: 23px;

    border-radius: 18px;

    background: #111111;
}


.bc-faq-side-label {
    display: block;

    margin-bottom: 7px;

    color: var(--tdc-orange, #f26322);
}


.bc-faq-side h3 {
    margin: 0;
    color: #ffffff;
}


.bc-faq-side > p {
    margin: 9px 0 0;
    color: rgba(255,255,255,.62);
}


/* DIVIDER */

.bc-faq-side-divider {
    height: 1px;

    margin: 19px 0;

    background: rgba(255,255,255,.10);
}


/* ==========================================================
   SIDE POINTS
========================================================== */

.bc-faq-side-point {
    display: grid;
    grid-template-columns:
        36px
        minmax(0, 1fr);

    gap: 10px;

    margin-bottom: 14px;
}


.bc-faq-side-point > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border-radius: 8px;

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

    color: var(--tdc-orange, #f26322);
}


.bc-faq-side-point strong {
    display: block;
    color: #ffffff;
}


.bc-faq-side-point p {
    margin: 3px 0 0;
    color: rgba(255,255,255,.55);
}


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

.bc-faq-side-cta {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 48px;

    margin-top: 20px;
    padding: 0 17px;

    border-radius: 50px;

    background: var(--tdc-orange, #f26322);

    text-decoration: none;

    color: #ffffff;

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


.bc-faq-side-cta:hover {
    transform: translateY(-2px);
    gap: 11px;

    color: #ffffff;
}


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

.bc-faq-list {
    display: grid;
    gap: 7px;
}


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

.bc-faq-item {
    overflow: hidden;

    border: 1px solid #e1dbd6;
    border-radius: 13px;

    background: #ffffff;

    transition:
        border-color .3s ease,
        box-shadow .3s ease;
}


.bc-faq-item:hover {
    border-color: rgba(242,99,34,.25);
}


.bc-faq-item.active {
    border-color: rgba(242,99,34,.30);

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


/* ==========================================================
   QUESTION
========================================================== */

.bc-faq-question {
    display: grid;
    grid-template-columns:
        38px
        minmax(0, 1fr)
        34px;

    align-items: center;

    gap: 11px;

    width: 100%;

    padding: 13px 15px;

    border: 0;

    background: transparent;

    text-align: left;
    cursor: pointer;

    color: #111111;
}


/* NUMBER */

.bc-faq-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 8px;

    background: #f4f1ee;

    color: #746d68;

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


.bc-faq-item.active
.bc-faq-number {
    background: #111111;
    color: #ffffff;
}


/* ==========================================================
   TOGGLE
========================================================== */

.bc-faq-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: #f4f1ee;

    color: #111111;

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


.bc-faq-item.active
.bc-faq-toggle {
    background: var(--tdc-orange, #f26322);
    color: #ffffff;
}


/* ==========================================================
   ANSWER
========================================================== */

.bc-faq-answer {
    display: grid;
    grid-template-rows: 0fr;

    transition: grid-template-rows .35s ease;
}


.bc-faq-item.active
.bc-faq-answer {
    grid-template-rows: 1fr;
}


.bc-faq-answer-inner {
    overflow: hidden;
}


.bc-faq-answer-inner p {
    margin: 0;

    padding:
        0
        60px
        17px
        64px;

    color: #756e69;
}


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

@media (max-width: 1023px) {

    .bc-faq {
        padding: 38px 0;
    }


    .bc-faq-header {
        grid-template-columns: 1fr;
        gap: 12px;
    }


    .bc-faq-header-copy {
        max-width: 680px;
    }


    .bc-faq-layout {
        grid-template-columns:
            minmax(260px, 32%)
            minmax(0, 68%);
    }

}


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

@media (max-width: 767px) {

    .bc-faq {
        padding: 30px 0;
    }


    .bc-faq-layout {
        grid-template-columns: 1fr;
    }


    .bc-faq-side {
        position: relative;
        top: auto;
    }


    .bc-faq-question {
        grid-template-columns:
            34px
            minmax(0, 1fr)
            32px;

        gap: 8px;

        padding: 11px;
    }


    .bc-faq-number {
        width: 34px;
        height: 34px;
    }


    .bc-faq-toggle {
        width: 32px;
        height: 32px;
    }


    .bc-faq-answer-inner p {
        padding:
            0
            52px
            14px
            53px;
    }

}


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

@media (max-width: 480px) {

    .bc-faq-side {
        padding: 18px;
    }


    .bc-faq-question {
        grid-template-columns:
            30px
            minmax(0, 1fr)
            30px;
    }


    .bc-faq-number,
    .bc-faq-toggle {
        width: 30px;
        height: 30px;
    }


    .bc-faq-answer-inner p {
        padding:
            0
            12px
            14px
            49px;
    }

}


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

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

    .bc-faq-answer,
    .bc-faq-number,
    .bc-faq-toggle,
    .bc-faq-side-cta {
        transition: none !important;
    }

}
/* ==========================================================
   BRANDING & CREATIVE
   SECTION 08 — FINAL CTA
========================================================== */

.bc-final-cta {
    position: relative;
    overflow: hidden;

    padding: 50px 0;

    background: #f8f6f3;
}


/* ==========================================================
   MAIN WRAPPER
========================================================== */

.bc-final-wrap {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0, 57%)
        minmax(360px, 43%);

    align-items: center;

    gap: 50px;

    min-height: 480px;

    padding: 45px;

    overflow: hidden;

    border-radius: 24px;

    background: #111111;
}


/* ==========================================================
   DECORATIVE SHAPES
========================================================== */

.bc-final-shape {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.bc-final-shape-one {
    width: 350px;
    height: 350px;

    top: -230px;
    left: 30%;

    border: 70px solid rgba(242,99,34,.05);
}


.bc-final-shape-two {
    width: 260px;
    height: 260px;

    right: -170px;
    bottom: -120px;

    border: 55px solid rgba(255,255,255,.025);
}


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

.bc-final-content {
    position: relative;

    z-index: 4;
}


/* ==========================================================
   EYEBROW
========================================================== */

.bc-final-eyebrow {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 10px;

    color: var(--tdc-orange, #f26322);
}


.bc-final-eyebrow-line {
    width: 38px;
    height: 2px;

    flex: 0 0 38px;

    background: var(--tdc-orange, #f26322);
}


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

.bc-final-content h2 {
    max-width: 700px;

    margin: 0;

    color: #ffffff;
}


.bc-final-content h2 span {
    display: block;

    color: var(--tdc-orange, #f26322);
}


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

.bc-final-content > p {
    max-width: 640px;

    margin: 14px 0 0;

    color: rgba(255,255,255,.63);
}


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

.bc-final-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 22px;
}


/* PRIMARY */

.bc-final-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 50px;

    padding: 0 20px;

    border-radius: 50px;

    background: var(--tdc-orange, #f26322);

    text-decoration: none;

    color: #ffffff;

    transition:
        transform .3s ease,
        gap .3s ease,
        box-shadow .3s ease;
}


.bc-final-primary:hover {
    transform: translateY(-2px);

    gap: 12px;

    box-shadow:
        0 12px 30px rgba(242,99,34,.20);

    color: #ffffff;
}


/* SECONDARY */

.bc-final-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 50px;

    padding: 0 20px;

    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50px;

    background: rgba(255,255,255,.06);

    text-decoration: none;

    color: #ffffff;

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


.bc-final-secondary:hover {
    transform: translateY(-2px);

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

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

    color: #ffffff;
}


/* ==========================================================
   SERVICE TAGS
========================================================== */

.bc-final-services {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;

    margin-top: 18px;
}


.bc-final-services span {
    padding: 6px 9px;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 50px;

    background: rgba(255,255,255,.04);

    color: rgba(255,255,255,.58);
}


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

.bc-final-visual {
    position: relative;

    z-index: 3;

    min-height: 380px;
}


/* ==========================================================
   BRAND BOARD
========================================================== */

.bc-final-board {
    position: absolute;

    top: 15px;
    right: 10px;
    bottom: 35px;
    left: 20px;

    padding: 20px;

    border-radius: 18px;

    background: #ffffff;

    transform: rotate(2deg);

    box-shadow:
        0 25px 60px rgba(0,0,0,.25);

    transition: transform .5s ease;
}


.bc-final-visual:hover
.bc-final-board {
    transform: rotate(0deg) translateY(-3px);
}


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

.bc-final-board-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding-bottom: 12px;

    border-bottom: 1px solid #e6e0dc;
}


.bc-final-board-top > span:first-child {
    color: #111111;
}


.bc-final-board-status {
    padding: 5px 8px;

    border-radius: 50px;

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

    color: var(--tdc-orange, #f26322);
}


/* ==========================================================
   BRAND MESSAGE
========================================================== */

.bc-final-brand-message {
    padding: 30px 0 20px;
}


.bc-final-brand-message > span {
    display: block;

    margin-bottom: 6px;

    color: var(--tdc-orange, #f26322);
}


.bc-final-brand-message strong {
    display: block;

    color: #111111;
}


.bc-final-brand-message strong em {
    display: block;

    color: var(--tdc-orange, #f26322);
}


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

.bc-final-colors {
    display: grid;
    grid-template-columns:
        1.4fr
        1fr
        .7fr;

    gap: 5px;

    height: 45px;
}


.bc-final-colors span {
    display: block;

    border-radius: 7px;
}


.bc-final-colors span:nth-child(1) {
    background: #111111;
}


.bc-final-colors span:nth-child(2) {
    background: var(--tdc-orange, #f26322);
}


.bc-final-colors span:nth-child(3) {
    border: 1px solid #ddd7d2;

    background: #f8f6f3;
}


/* ==========================================================
   BRAND SYSTEM
========================================================== */

.bc-final-board-system {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 5px;

    margin-top: 14px;
}


.bc-final-board-system > div {
    padding: 9px;

    border-radius: 8px;

    background: #f6f3f0;
}


.bc-final-board-system span {
    display: block;

    margin-bottom: 2px;

    color: var(--tdc-orange, #f26322);
}


.bc-final-board-system strong {
    display: block;

    color: #111111;
}


/* ==========================================================
   FLOATING CREATIVE
========================================================== */

.bc-final-floating {
    position: absolute;

    z-index: 6;

    top: 0;
    right: -5px;

    width: 135px;

    padding: 13px;

    border-radius: 12px;

    background: var(--tdc-orange, #f26322);

    transform: rotate(-4deg);

    box-shadow:
        0 16px 35px rgba(242,99,34,.22);
}


.bc-final-floating > span {
    display: block;

    margin-bottom: 5px;

    color: rgba(255,255,255,.65);
}


.bc-final-floating strong {
    display: block;

    color: #ffffff;
}


.bc-final-floating strong em {
    display: block;

    color: #111111;
}


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

.bc-final-result {
    position: absolute;

    z-index: 7;

    left: 0;
    bottom: 0;

    display: flex;
    align-items: center;

    gap: 10px;

    min-width: 210px;

    padding: 11px 13px;

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

    background: rgba(17,17,17,.92);

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


.bc-final-result-dot {
    width: 11px;
    height: 11px;

    flex: 0 0 11px;

    border-radius: 50%;

    background: var(--tdc-orange, #f26322);

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


.bc-final-result div > span {
    display: block;

    color: var(--tdc-orange, #f26322);
}


.bc-final-result strong {
    display: block;

    color: #ffffff;
}


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

.bc-final-journey {
    display: grid;
    grid-template-columns:
        minmax(230px, 27%)
        minmax(0, 73%);

    align-items: center;

    gap: 20px;

    margin-top: 10px;
    padding: 16px 20px;

    border: 1px solid #e2dcd7;
    border-radius: 15px;

    background: #ffffff;
}


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

.bc-final-journey-title > span {
    display: block;

    margin-bottom: 2px;

    color: var(--tdc-orange, #f26322);
}


.bc-final-journey-title strong {
    display: block;

    color: #111111;
}


/* ==========================================================
   JOURNEY STEPS
========================================================== */

.bc-final-journey-steps {
    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    gap: 5px;
}


.bc-final-journey-steps > div {
    padding: 8px;

    border-radius: 8px;

    background: #f6f3f0;

    text-align: center;
}


.bc-final-journey-steps > div span {
    display: block;

    color: var(--tdc-orange, #f26322);
}


.bc-final-journey-steps > div strong {
    display: block;

    color: #111111;
}


.bc-final-journey-steps > i {
    color: #c7c0bb;
}


.bc-final-journey-result {
    background: #111111 !important;
}


.bc-final-journey-result strong {
    color: #ffffff !important;
}


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

@media (max-width: 1023px) {

    .bc-final-cta {
        padding: 38px 0;
    }


    .bc-final-wrap {
        grid-template-columns:
            minmax(0, 55%)
            minmax(320px, 45%);

        gap: 30px;

        padding: 35px;
    }


    .bc-final-journey {
        grid-template-columns: 1fr;

        gap: 10px;
    }

}


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

@media (max-width: 767px) {

    .bc-final-cta {
        padding: 30px 0;
    }


    .bc-final-wrap {
        grid-template-columns: 1fr;

        gap: 30px;

        padding: 26px 18px;
    }


    .bc-final-actions {
        align-items: stretch;
    }


    .bc-final-primary,
    .bc-final-secondary {
        width: 100%;
    }


    /* VISUAL */

    .bc-final-visual {
        min-height: 350px;
    }


    .bc-final-board {
        left: 10px;
        right: 10px;
    }


    /* JOURNEY */

    .bc-final-journey-steps {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));
    }


    .bc-final-journey-steps > i {
        display: none;
    }

}


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

@media (max-width: 480px) {

    .bc-final-wrap {
        border-radius: 18px;
    }


    .bc-final-visual {
        min-height: 390px;
    }


    .bc-final-board {
        top: 25px;
        left: 0;
        right: 0;

        padding: 15px;
    }


    .bc-final-floating {
        right: 0;

        width: 120px;
    }


    .bc-final-result {
        left: 5px;

        min-width: 190px;
    }


    .bc-final-board-system {
        grid-template-columns: 1fr;
    }


    .bc-final-journey-steps {
        grid-template-columns: 1fr;
    }


    .bc-final-journey-steps > div {
        display: flex;
        align-items: center;

        gap: 8px;

        text-align: left;
    }

}


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

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

    .bc-final-board,
    .bc-final-primary,
    .bc-final-secondary {
        transition: none !important;
    }

}