.tb-representation {
    --tbr-red: #d20a2e;
    --tbr-hot: #f11b40;
    --tbr-wine: #690018;
    --tbr-dark: #2e000b;
    --tbr-yellow: #ffd100;
    --tbr-cream: #fff8e9;
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    background:
        radial-gradient(circle at 6% 8%, rgba(255, 209, 0, .23), transparent 23%),
        radial-gradient(circle at 93% 52%, rgba(210, 10, 46, .11), transparent 25%),
        linear-gradient(180deg, #fffdf8, var(--tbr-cream));
    color: var(--tbr-dark);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    isolation: isolate;
    overflow: hidden;
}

.tb-representation,
.tb-representation * {
    box-sizing: border-box;
}

.tb-representation::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .37;
    background-image:
        linear-gradient(rgba(105, 0, 24, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(105, 0, 24, .04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(90deg, #000, transparent 34%, transparent 64%, #000);
}

.tb-representation__map {
    position: absolute;
    z-index: -1;
    top: 70px;
    right: -75px;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(210, 10, 46, .11);
    border-radius: 48% 52% 44% 56% / 60% 43% 57% 40%;
    transform: rotate(-12deg);
}

.tb-representation__map::before,
.tb-representation__map::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(210, 10, 46, .09);
    border-radius: inherit;
}

.tb-representation__map::before {
    inset: 35px -20px -16px 29px;
}

.tb-representation__map::after {
    inset: 70px -42px -39px 57px;
}

.tb-representation__map > span {
    position: absolute;
    top: 45%;
    left: 37%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--tbr-red);
    box-shadow: 0 0 0 9px rgba(210, 10, 46, .1), 0 0 0 18px rgba(210, 10, 46, .05);
}

.tb-representation__map > i {
    position: absolute;
    top: calc(45% + 5px);
    right: 44px;
    width: 126px;
    height: 1px;
    background: rgba(210, 10, 46, .18);
    transform: rotate(-11deg);
}

.tb-representation__map > b {
    position: absolute;
    right: 24px;
    bottom: 25px;
    color: rgba(210, 10, 46, .1);
    font-size: 95px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: -.1em;
}

.tb-representation__inner {
    position: relative;
    z-index: 2;
    width: min(1360px, calc(100% - 64px));
    min-height: 910px;
    margin: 0 auto;
    padding: 115px 0 125px;
}

.tb-representation__header {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(420px, .72fr);
    align-items: end;
    gap: clamp(70px, 8vw, 130px);
    margin-bottom: 62px;
}

.tb-representation__heading {
    max-width: 720px;
}

.tb-representation__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 20px;
    color: var(--tbr-red);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.tb-representation__eyebrow span {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 9px 3px 9px 3px;
    background: var(--tbr-yellow);
    font-size: 12px;
    transform: rotate(-7deg);
}

.tb-representation h2 {
    margin: 0;
    color: var(--tbr-dark);
    font-size: clamp(58px, 6vw, 88px);
    font-weight: 900;
    line-height: .91;
    letter-spacing: -.07em;
    text-wrap: balance;
}

.tb-representation h2::after {
    content: "";
    display: block;
    width: 98px;
    height: 7px;
    margin-top: 27px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--tbr-red) 0 72%, var(--tbr-yellow) 72%);
}

.tb-representation__copy {
    max-width: 590px;
    padding-bottom: 5px;
}

.tb-representation__copy p {
    margin: 0 0 18px;
    color: rgba(46, 0, 11, .69);
    font-size: 14px;
    line-height: 1.73;
}

.tb-representation__copy p:last-child {
    margin-bottom: 0;
}

.tb-representation__manifesto {
    position: relative;
    min-height: 470px;
    padding: 32px 37px 27px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 39px;
    background:
        radial-gradient(circle at 83% 18%, rgba(255, 209, 0, .22), transparent 23%),
        radial-gradient(circle at 12% 90%, rgba(255, 255, 255, .11), transparent 26%),
        linear-gradient(135deg, var(--tbr-red), var(--tbr-wine));
    box-shadow: 0 35px 80px rgba(105, 0, 24, .23), inset 0 1px 0 rgba(255, 255, 255, .12);
    color: #fff;
    overflow: hidden;
}

.tb-representation__manifesto::before {
    content: "";
    position: absolute;
    top: -235px;
    right: -155px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    box-shadow: 0 0 0 52px rgba(255, 255, 255, .025), 0 0 0 104px rgba(255, 255, 255, .018);
}

.tb-representation__manifesto::after {
    content: "★";
    position: absolute;
    right: 35px;
    bottom: 22px;
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    background: var(--tbr-yellow);
    clip-path: polygon(50% 0, 61% 29%, 88% 12%, 73% 39%, 100% 50%, 71% 61%, 88% 88%, 61% 72%, 50% 100%, 39% 72%, 12% 88%, 28% 61%, 0 50%, 29% 39%, 12% 12%, 39% 29%);
    color: var(--tbr-wine);
    font-size: 25px;
    transform: rotate(7deg);
}

.tb-representation__manifesto-label,
.tb-representation__manifesto-foot {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
}

.tb-representation__manifesto-label {
    gap: 10px;
}

.tb-representation__manifesto-label > i {
    width: 29px;
    height: 2px;
    border-radius: 99px;
    background: var(--tbr-yellow);
}

.tb-representation__manifesto-label > span,
.tb-representation__manifesto-foot > span {
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.tb-representation__manifesto-label > span {
    color: rgba(255, 255, 255, .65);
}

.tb-representation__manifesto-label > b {
    display: grid;
    place-items: center;
    width: 33px;
    height: 25px;
    margin-left: auto;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: var(--tbr-yellow);
    font-size: 9px;
}

.tb-representation__words {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 5px 35px;
    margin-top: 31px;
}

.tb-representation__word {
    display: block;
    width: max-content;
    max-width: 100%;
    font-size: clamp(55px, 6.7vw, 102px);
    font-weight: 950;
    line-height: .88;
    letter-spacing: -.075em;
    white-space: nowrap;
}

.tb-representation__word i {
    color: var(--tbr-yellow);
    font: inherit;
    font-style: normal;
}

.tb-representation__word--2 {
    color: var(--tbr-yellow);
}

.tb-representation__word--2 i {
    color: #fff;
}

.tb-representation__word--3 {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, .85);
}

.tb-representation__word--4 {
    justify-self: start;
    font-size: clamp(43px, 5.4vw, 82px);
}

.tb-representation__manifesto-foot {
    gap: 14px;
    margin-top: 35px;
    padding-right: 105px;
    color: rgba(255, 255, 255, .52);
}

.tb-representation__manifesto-foot > i {
    flex: 1 1 auto;
    height: 1px;
    background: rgba(255, 255, 255, .17);
}

.tb-representation__manifesto-foot > b {
    color: var(--tbr-yellow);
    font-size: 12px;
}

.tb-representation--motion .tb-representation-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .78s cubic-bezier(.2, .7, .2, 1), transform .78s cubic-bezier(.2, .7, .2, 1);
}

.tb-representation--motion .tb-representation__manifesto.tb-representation-reveal {
    transition-delay: .1s;
}

.tb-representation--motion .tb-representation-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1050px) {
    .tb-representation__header {
        grid-template-columns: minmax(0, 1fr) minmax(360px, .75fr);
        gap: 55px;
    }

    .tb-representation__word {
        font-size: clamp(54px, 7.2vw, 78px);
    }

    .tb-representation__word--4 {
        font-size: clamp(42px, 5.7vw, 63px);
    }
}

@media (max-width: 820px) {
    .tb-representation__inner {
        width: min(100% - 40px, 720px);
        min-height: 0;
        padding: 92px 0 105px;
    }

    .tb-representation__header {
        grid-template-columns: minmax(0, 1fr);
        gap: 37px;
        margin-bottom: 49px;
    }

    .tb-representation__copy {
        max-width: 680px;
    }

    .tb-representation__words {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .tb-representation__word,
    .tb-representation__word--4 {
        font-size: clamp(54px, 11.6vw, 84px);
    }

    .tb-representation__word--2,
    .tb-representation__word--4 {
        justify-self: end;
    }
}

@media (max-width: 560px) {
    .tb-representation__inner {
        width: calc(100% - 30px);
        padding: 75px 0 86px;
    }

    .tb-representation h2 {
        font-size: clamp(47px, 13.4vw, 60px);
    }

    .tb-representation__copy p {
        font-size: 13px;
        line-height: 1.68;
    }

    .tb-representation__manifesto {
        min-height: 450px;
        padding: 25px 20px 22px;
        border-radius: 27px;
    }

    .tb-representation__words {
        margin-top: 38px;
    }

    .tb-representation__word,
    .tb-representation__word--4 {
        max-width: 100%;
        font-size: clamp(43px, 13.8vw, 59px);
        white-space: normal;
    }

    .tb-representation__manifesto-foot {
        margin-top: 41px;
        padding-right: 65px;
    }

    .tb-representation__manifesto::after {
        right: 16px;
        bottom: 17px;
        width: 62px;
        height: 62px;
        font-size: 19px;
    }

    .tb-representation__map {
        opacity: .55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tb-representation *,
    .tb-representation *::before,
    .tb-representation *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .tb-representation--motion .tb-representation-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

