/* ================================
   COMPETITION PAGE
================================ */
/* Mobile */

.navbar__mobile-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.menu-toggle{
    width:44px;
    height:44px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
}

.menu-toggle span{
    width:24px;
    height:2px;
    background:#fff;
    border-radius:5px;
}

/* Desktop */

@media(min-width:900px){

    .navbar__mobile-actions{
        display:none;
    }

}
/* =========================================================
   01 COMPETITION HERO
========================================================= */

.comp-hero {

    position: relative;

    min-height: 760px;

    height: 90vh;

    overflow: hidden;

    display: flex;

    align-items: center;

    background: #081C3B;

}


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

.comp-hero__media {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

    transform: scale(1.025);

    filter:
        brightness(.55)
        saturate(.78)
        contrast(1.08);

    animation: compHeroCamera 16s ease-in-out infinite alternate;

}


@keyframes compHeroCamera {

    from {
        transform: scale(1.025);
    }

    to {
        transform: scale(1.07);
    }

}


/* =========================================================
   CINEMATIC SCRIM
========================================================= */

.comp-hero__scrim {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            90deg,
            rgba(8,28,59,.96) 0%,
            rgba(8,28,59,.78) 25%,
            rgba(8,28,59,.38) 53%,
            rgba(8,28,59,.10) 78%,
            rgba(8,28,59,.38) 100%
        ),

        linear-gradient(
            0deg,
            rgba(8,28,59,.92) 0%,
            rgba(8,28,59,.15) 52%,
            rgba(8,28,59,.58) 100%
        );

}


/* =========================================================
   HUGE BACKGROUND WORD
========================================================= */

.comp-hero__watermark {

    position: absolute;

    z-index: 2;

    right: -50px;

    bottom: -30px;

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

    font-size: clamp(12rem, 27vw, 31rem);

    font-weight: 900;

    line-height: .75;

    letter-spacing: -.08em;

    color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-text-stroke: 1px rgba(255,255,255,.055);

    pointer-events: none;

    white-space: nowrap;

}


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

.comp-hero .container {

    position: relative;

    z-index: 5;

    width: 100%;

}


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

.comp-hero__content {

    position: relative;

    max-width: 900px;

    padding: 100px 0;

}


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

.comp-hero__eyebrow {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 38px;

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

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 5px;

    text-transform: uppercase;

}


.comp-hero__eyebrow span:first-child {

    color: #FFC83D;

    letter-spacing: 2px;

}


.comp-hero__line {

    width: 80px;

    height: 2px;

    background: #FFC83D;

}


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

.comp-hero__heading {

    display: flex;

    flex-direction: column;

    margin: 0;

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

    font-size: clamp(4.5rem, 9vw, 9rem);

    font-weight: 900;

    line-height: .82;

    letter-spacing: -.07em;

    text-transform: uppercase;

}


/* =========================================================
   OUTLINE LINE
========================================================= */

.comp-hero__heading-outline {

    color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-text-stroke: 2px #ffffff;

}


/* =========================================================
   SOLID LINE
========================================================= */

.comp-hero__heading-solid {

    margin-left: clamp(35px, 6vw, 90px);

    margin-top: 8px;

    color: #ffffff;

}


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

.comp-hero__body {

    max-width: 480px;

    margin: 42px 0 0;

    color: #D7E3F2;

    font-size: 1.7rem;

    font-weight: 500;

    line-height: 1.7;

    letter-spacing: .015em;

}


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

.comp-hero__cta {

    display: inline-flex;

    align-items: center;

    gap: 20px;

    margin-top: 32px;

    padding: 18px 28px;

    background: #FFC83D;

    border: 1px solid #FFC83D;

    color: #081C3B;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

    text-decoration: none;

    transition:

        transform .35s ease,

        background .35s ease,

        box-shadow .35s ease;

}


.comp-hero__cta:hover {

    background: #ffffff;

    border-color: #ffffff;

    color: #081C3B;

    transform: translateY(-4px);

    box-shadow:
        0 18px 50px rgba(0,0,0,.28);

}


.comp-hero__arrow {

    font-size: 20px;

    transition: transform .3s ease;

}


.comp-hero__cta:hover .comp-hero__arrow {

    transform: translateX(7px);

}


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

.comp-hero__bottom-meta {

    position: absolute;

    z-index: 6;

    right: 6vw;

    bottom: 35px;

    display: flex;

    align-items: center;

    gap: 14px;

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

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 3px;

}


.comp-hero__bottom-meta i {

    width: 35px;

    height: 1px;

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

}


/* =========================================================
   SMALL YELLOW MATCH INDICATOR
========================================================= */

.comp-hero__bottom-meta::before {

    content: "";

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #FFC83D;

    box-shadow: 0 0 0 5px rgba(255,200,61,.08);

    animation: compLivePulse 2s infinite;

}


@keyframes compLivePulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .45;
        transform: scale(.8);
    }

}


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

@media (max-width: 991px) {

    .comp-hero {

        min-height: 700px;

        height: 800px;

    }


    .comp-hero__content {

        padding: 80px 6vw;

    }


    .comp-hero__heading {

        font-size: clamp(4rem, 9vw, 7rem);

    }

}


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

@media (max-width: 600px) {

    .comp-hero {

        min-height: 720px;

        height: 720px;

    }


    .comp-hero__media {

        object-position: 58% center;

        filter:
            brightness(.43)
            saturate(.65)
            contrast(1.08);

    }


    .comp-hero__scrim {

        background:

            linear-gradient(
                90deg,
                rgba(8,28,59,.94),
                rgba(8,28,59,.48)
            ),

            linear-gradient(
                0deg,
                rgba(8,28,59,.94),
                transparent 65%
            );

    }


    .comp-hero__watermark {

        right: -30px;

        bottom: 30px;

        font-size: 45vw;

    }


    .comp-hero__content {

        padding: 70px 22px;

    }


    .comp-hero__eyebrow {

        gap: 10px;

        margin-bottom: 30px;

        font-size: 8px;

        letter-spacing: 3px;

    }


    .comp-hero__line {

        width: 40px;

    }


    .comp-hero__heading {

        font-size: clamp(3.3rem, 14vw, 5.2rem);

        line-height: .86;

        letter-spacing: -.05em;

    }


    .comp-hero__heading-outline {

        -webkit-text-stroke: 1px #ffffff;

    }


    .comp-hero__heading-solid {

        margin-left: 14px;

    }


    .comp-hero__body {

        max-width: 310px;

        margin-top: 30px;

        font-size: .9rem;

        line-height: 1.65;

    }


    .comp-hero__cta {

        margin-top: 26px;

        padding: 16px 21px;

        font-size: 8px;

        letter-spacing: 1.5px;

    }


    .comp-hero__bottom-meta {

        right: 22px;

        bottom: 22px;

        gap: 9px;

        font-size: 6px;

        letter-spacing: 2px;

    }


    .comp-hero__bottom-meta i {

        width: 20px;

    }


    .comp-hero__bottom-meta::before {

        width: 5px;

        height: 5px;

    }

}

/* =========================================================
   02 COMPETITION CATEGORIES
========================================================= */

.comp-categories {

    position: relative;

    background: #081C3B;

    padding: 130px 0;

    overflow: hidden;

}


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

.comp-categories__intro {

    margin-bottom: 60px;

}


.comp-categories__eyebrow {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 28px;

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

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 5px;

    text-transform: uppercase;

}


.comp-categories__eyebrow span:first-child {

    color: #FFC83D;

    letter-spacing: 2px;

}


.comp-categories__line {

    width: 60px;

    height: 1px;

    background: #FFC83D;

}


.comp-categories__heading {

    max-width: 850px;

    margin: 0;

    color: #ffffff;

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

    font-size: clamp(3.5rem, 7vw, 7rem);

    font-weight: 900;

    line-height: .88;

    letter-spacing: -.065em;

    text-transform: uppercase;

}


.comp-categories__heading span {

    display: block;

    margin-left: clamp(25px, 5vw, 80px);

    color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-text-stroke: 1.5px rgba(255,255,255,.7);

}


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

.comp-categories__grid {

    display: grid;

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

    gap: 28px;

}


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

.comp-category {

    position: relative;

    overflow: hidden;

    background: #0A2145;

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

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

}


.comp-category:hover {

    transform: translateY(-6px);

    border-color: rgba(255,200,61,.35);

    box-shadow:
        0 30px 70px rgba(0,0,0,.28);

}


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

.comp-category__image-wrap {

    position: relative;

    height: 430px;

    overflow: hidden;

}


.comp-category__image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform .8s cubic-bezier(.2,.8,.2,1),
        filter .5s ease;

}


.comp-category:hover .comp-category__image {

    transform: scale(1.055);

    filter: saturate(1.05);

}


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

.comp-category__scrim {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            0deg,
            rgba(8,28,59,.85) 0%,
            rgba(8,28,59,.25) 50%,
            rgba(8,28,59,.05) 100%
        );

}


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

.comp-category__number {

    position: absolute;

    top: 24px;

    left: 26px;

    color: var(--yellow);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;

}


/* =========================================================
   MODE
========================================================= */

.comp-category__mode {

    position: absolute;

    top: 22px;

    right: 24px;

    padding: 8px 12px;

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

    background: rgba(8,28,59,.45);

    backdrop-filter: blur(12px);

    color: var(--yellow);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

}


/* =========================================================
   BODY
========================================================= */

.comp-category__body {

    position: relative;

    padding: 30px 30px 0;

}


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

.comp-category__top {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

}


.comp-category__label {

    display: block;

    margin-bottom: 12px;

    color: #FFC83D;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 3px;

}


.comp-category__title {

    margin: 0;

    max-width: 430px;

    color: #ffffff;

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

    font-size: clamp(1.8rem, 3vw, 3rem);

    font-weight: 800;

    line-height: .95;

    letter-spacing: -.035em;

    text-transform: uppercase;

}


.comp-category__title span {

    display: block;

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

}


/* =========================================================
   TOGGLE
========================================================= */

.comp-category__toggle {

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding: 12px 0;

    border: 0;

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

    background: transparent;

    color: #ffffff;

    cursor: pointer;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

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

}


.comp-category__toggle:hover {

    color: #FFC83D;

    border-color: #FFC83D;

}


.comp-category__toggle-icon {

    font-size: 18px;

    line-height: 1;

    transition:
        transform .35s ease,
        color .35s ease;

}


.comp-category__toggle[aria-expanded="true"] {

    color: #FFC83D;

    border-color: #FFC83D;

}


.comp-category__toggle[aria-expanded="true"]
.comp-category__toggle-icon {

    transform: rotate(90deg);

}


/* =========================================================
   ACCORDION
========================================================= */

.accordion-detail {

    display: grid;

    grid-template-rows: 0fr;

    opacity: 0;

    transition:
        grid-template-rows .5s cubic-bezier(.2,.8,.2,1),
        opacity .35s ease;

}


.accordion-detail.is-open {

    grid-template-rows: 1fr;

    opacity: 1;

}


.accordion-detail__inner {

    min-height: 0;

    overflow: hidden;

    padding-top: 0;

    transition:
        padding-top .5s ease,
        padding-bottom .5s ease;

}


.accordion-detail.is-open
.accordion-detail__inner {

    padding-top: 28px;

    padding-bottom: 32px;

}


/* =========================================================
   DETAIL TEXT
========================================================= */

.accordion-detail__inner p {

    max-width: 600px;

    margin: 0 0 12px;

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

    font-size: 19px;

    line-height: 1.75;

}


.accordion-detail__inner p:first-child {

    color: #ffffff;

    font-weight: 600;

}


/* =========================================================
   DETAIL LINK
========================================================= */

.accordion-detail__inner a {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 12px;

    color: #FFC83D;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

    text-decoration: none;

}


.accordion-detail__inner a span {

    font-size: 17px;

    transition: transform .3s ease;

}


.accordion-detail__inner a:hover span {

    transform: translateX(6px);

}


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

@media (max-width: 900px) {

    .comp-categories {

        padding: 100px 0;

    }


    .comp-categories__grid {

        grid-template-columns: 1fr;

    }


    .comp-category__image-wrap {

        height: 500px;

    }

}


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

@media (max-width: 600px) {

    .comp-categories {

        padding: 85px 0;

    }


    .comp-categories__intro {

        margin-bottom: 40px;

    }


    .comp-categories__eyebrow {

        gap: 10px;

        font-size: 8px;

        letter-spacing: 3px;

    }


    .comp-categories__line {

        width: 40px;

    }


    .comp-categories__heading {

        font-size: clamp(3rem, 13vw, 4.5rem);

    }


    .comp-categories__heading span {

        margin-left: 15px;

        -webkit-text-stroke: 1px rgba(255,255,255,.6);

    }


    .comp-category__image-wrap {

        height: 350px;

    }


    .comp-category__body {

        padding: 24px 20px 0;

    }


    .comp-category__top {

        align-items: flex-start;

        flex-direction: column;

        gap: 24px;

    }


    .comp-category__title {

        font-size: 2rem;

    }


    .comp-category__toggle {

        width: 100%;

        justify-content: space-between;

        padding: 14px 0;

    }


    .comp-category__mode {

        top: 18px;

        right: 18px;

        font-size: 6px;

    }

}

/* =========================================================
   03 HOW THE MATCH WORKS
========================================================= */

.match-section {

    position: relative;

    background: #081C3B;

    padding: 140px 0;

    overflow: hidden;

}


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

.match-section__header {

    max-width: 900px;

}


.match-section__eyebrow {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 32px;

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

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 5px;

    text-transform: uppercase;

}


.match-section__eyebrow span:first-child {

    color: #FFC83D;

    letter-spacing: 2px;

}


.match-section__line {

    width: 60px;

    height: 1px;

    background: #FFC83D;

}


.match-section__heading {

    display: flex;

    flex-direction: column;

    margin: 0;

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

    font-size: clamp(4rem, 8vw, 8rem);

    font-weight: 900;

    line-height: .84;

    letter-spacing: -.07em;

    text-transform: uppercase;

}


.match-section__heading span:first-child {

    color: #ffffff;

}


.match-section__heading span:last-child {

    margin-left: clamp(30px, 6vw, 100px);

    color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-text-stroke: 1.5px rgba(255,255,255,.65);

}


.match-section__intro {

    max-width: 560px;

    margin: 42px 0 0;

    color: #D7E3F2;

    font-size: 1.3rem;

    line-height: 1.8;

}


/* =========================================================
   MATCH FLOW
========================================================= */

.match-flow {

    display: grid;

    grid-template-columns: 1fr 120px 1fr;

    align-items: center;

    margin-top: 100px;

}


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

.match-step {

    position: relative;

}


.match-step__top {

    display: flex;

    align-items: center;

    gap: 18px;

    padding-bottom: 20px;

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

}


.match-step__number {

    color: #FFC83D;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

}


.match-step__label {

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

}


/* =========================================================
   GIANT VISUAL WORD
========================================================= */

.match-step__visual {

    position: relative;

    padding: 55px 0 45px;

    overflow: hidden;

}


.match-step__giant {

    display: block;

    color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-text-stroke: 1px rgba(255,255,255,.30);

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

    font-size: clamp(4rem, 8vw, 8rem);

    font-weight: 900;

    line-height: .8;

    letter-spacing: -.07em;

    text-transform: uppercase;

    transition:
        color .4s ease,
        -webkit-text-stroke .4s ease,
        transform .5s ease;

}


.match-step:hover .match-step__giant {

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

    -webkit-text-stroke-color: #FFC83D;

    transform: translateX(8px);

}


.match-step__line {

    display: block;

    width: 100%;

    height: 1px;

    margin-top: 35px;

    background:
        linear-gradient(
            90deg,
            #FFC83D,
            rgba(255,255,255,.08)
        );

}


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

.match-step__description {

    max-width: 390px;

    margin: 0;

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

    font-size: 1.3rem;

    line-height: 1.75;

}


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

.match-flow__connector {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding-top: 40px;

}


.match-flow__connector span {

    width: 22px;

    height: 1px;

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

}


.match-flow__connector strong {

    color: #FFC83D;

    font-size: 28px;

    font-weight: 400;

}


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

.match-section__footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    margin-top: 90px;

    padding-top: 28px;

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

}


.match-section__footer p {

    max-width: 500px;

    margin: 0;

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

    font-size: .78rem;

    line-height: 1.7;

}


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

.match-section__cta {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    flex-shrink: 0;

    padding: 16px 22px;

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

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

    text-decoration: none;

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

}


.match-section__cta strong {

    color: #FFC83D;

    font-size: 18px;

    font-weight: 400;

    transition: transform .3s ease;

}


.match-section__cta:hover {

    background: #FFC83D;

    border-color: #FFC83D;

    color: #081C3B;

    transform: translateY(-3px);

}


.match-section__cta:hover strong {

    color: #081C3B;

    transform: translateX(5px);

}


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

@media (max-width: 850px) {

    .match-section {

        padding: 100px 0;

    }


    .match-flow {

        grid-template-columns: 1fr;

        gap: 50px;

        margin-top: 70px;

    }


    .match-flow__connector {

        justify-content: flex-start;

        padding: 0;

    }


    .match-flow__connector span {

        width: 30px;

    }


    .match-section__footer {

        align-items: flex-start;

        flex-direction: column;

        margin-top: 65px;

    }

}


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

@media (max-width: 600px) {

    .match-section {

        padding: 85px 0;

    }


    .match-section__eyebrow {

        gap: 10px;

        margin-bottom: 27px;

        font-size: 8px;

        letter-spacing: 3px;

    }


    .match-section__line {

        width: 40px;

    }


    .match-section__heading {

        font-size: clamp(3.2rem, 13vw, 4.5rem);

    }


    .match-section__heading span:last-child {

        margin-left: 18px;

        -webkit-text-stroke-width: 1px;

    }


    .match-section__intro {

        margin-top: 30px;

        font-size: .92rem;

        line-height: 1.7;

    }


    .match-flow {

        margin-top: 60px;

        gap: 35px;

    }


    .match-step__visual {

        padding: 38px 0 32px;

    }


    .match-step__giant {

        font-size: clamp(3.5rem, 18vw, 5.5rem);

    }


    .match-step__description {

        font-size: .85rem;

    }


    .match-flow__connector {

        padding: 0;

    }


    .match-flow__connector strong {

        font-size: 22px;

    }


    .match-section__footer {

        margin-top: 55px;

        gap: 25px;

    }


    .match-section__cta {

        width: 100%;

        justify-content: space-between;

    }

}
/* =========================================================
   04 INNOVATION PROJECT
========================================================= */

.innovation-section {

    position: relative;

    background: #081C3B;

    padding: 140px 0;

    overflow: hidden;

}


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

.innovation-section__header {

    max-width: 1000px;

}


.innovation-section__eyebrow {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 32px;

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

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 5px;

    text-transform: uppercase;

}


.innovation-section__eyebrow span:first-child {

    color: #FFC83D;

    letter-spacing: 2px;

}


.innovation-section__line {

    width: 60px;

    height: 1px;

    background: #FFC83D;

}


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

.innovation-section__heading {

    display: flex;

    flex-direction: column;

    margin: 0;

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

    font-size: clamp(4rem, 8vw, 8rem);

    font-weight: 900;

    line-height: .84;

    letter-spacing: -.07em;

    text-transform: uppercase;

}


.innovation-section__heading span:first-child {

    color: #ffffff;

}


.innovation-section__heading span:last-child {

    margin-left: clamp(30px, 6vw, 100px);

    color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-text-stroke: 1.5px rgba(255,255,255,.62);

}


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

.innovation-section__layout {

    display: grid;

    grid-template-columns: .8fr 1.2fr;

    gap: 90px;

    align-items: center;

    margin-top: 90px;

}


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

.innovation-section__content {

    max-width: 480px;

}


.innovation-section__body {

    margin: 0;

    color: #D7E3F2;

    font-size: 1.3rem;

    line-height: 1.85;

}


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

.innovation-section__cta {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    margin-top: 38px;

    padding: 16px 0;

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

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

    text-decoration: none;

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

}


.innovation-section__cta strong {

    color: #FFC83D;

    font-size: 18px;

    font-weight: 400;

    transition: transform .3s ease;

}


.innovation-section__cta:hover {

    color: #FFC83D;

    border-color: #FFC83D;

}


.innovation-section__cta:hover strong {

    transform: translateX(6px);

}


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

.innovation-section__media {

    position: relative;

    height: 520px;

    overflow: hidden;

    border-radius: 24px;

    background: #09152D;

}


.innovation-section__media img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2,.8,.2,1);

}


.innovation-section__media:hover img {

    transform: scale(1.045);

}


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

.innovation-section__media-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            0deg,
            rgba(8,28,59,.75),
            transparent 55%
        );

    pointer-events: none;

}


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

.innovation-section__media-label {

    position: absolute;

    left: 25px;

    bottom: 24px;

    display: flex;

    align-items: center;

    gap: 12px;

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

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 3px;

}


.innovation-section__media-label span:first-child {

    color: #FFC83D;

}


/* =========================================================
   FOUR STEP FLOW
========================================================= */

.innovation-flow {

    display: grid;

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

    margin-top: 100px;

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

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

}


.innovation-step {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 18px;

    min-height: 150px;

    padding: 28px 30px;

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

    transition:
        background .35s ease;

}


.innovation-step:first-child {

    padding-left: 0;

}


.innovation-step:last-child {

    border-right: none;

}


.innovation-step:hover {

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

}


.innovation-step__number {

    color: #FFC83D;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 3px;

}


.innovation-step__title {

    color: #ffffff;

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

    font-size: clamp(1.8rem, 3vw, 3rem);

    font-weight: 800;

    line-height: 1;

    letter-spacing: -.04em;

    text-transform: uppercase;

    transition:
        transform .35s ease;

}


.innovation-step:hover
.innovation-step__title {

    transform: translateX(7px);

}


/* =========================================================
   FINAL DOUBLE CTA
========================================================= */

.competition-final-cta {

    position: relative;

    background: #07182F;

    padding: 75px 0;

}


.competition-final-cta__inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

}


.competition-final-cta__eyebrow {

    display: block;

    margin-bottom: 15px;

    color: #FFC83D;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 4px;

    text-transform: uppercase;

}


.competition-final-cta h2 {

    margin: 0;

    color: #ffffff;

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

    font-size: clamp(2.3rem, 5vw, 5rem);

    font-weight: 900;

    line-height: .9;

    letter-spacing: -.06em;

    text-transform: uppercase;

}


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

.competition-final-cta__actions {

    display: flex;

    align-items: center;

    gap: 15px;

    flex-shrink: 0;

}


.competition-final-cta__secondary,
.competition-final-cta__primary {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding: 17px 22px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.8px;

    text-transform: uppercase;

    text-decoration: none;

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

}


.competition-final-cta__secondary {

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

    color: #ffffff;

}


.competition-final-cta__primary {

    background: #FFC83D;

    border: 1px solid #FFC83D;

    color: #081C3B;

}


.competition-final-cta__secondary span,
.competition-final-cta__primary span {

    font-size: 16px;

    transition: transform .3s ease;

}


.competition-final-cta__secondary:hover {

    border-color: #ffffff;

    background: #ffffff;

    color: #081C3B;

    transform: translateY(-3px);

}


.competition-final-cta__primary:hover {

    background: #ffffff;

    border-color: #ffffff;

    transform: translateY(-3px);

}


.competition-final-cta__secondary:hover span,
.competition-final-cta__primary:hover span {

    transform: translateX(5px);

}


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

@media (max-width: 900px) {

    .innovation-section {

        padding: 100px 0;

    }


    .innovation-section__layout {

        grid-template-columns: 1fr;

        gap: 55px;

        margin-top: 70px;

    }


    .innovation-section__content {

        max-width: 600px;

    }


    .innovation-section__media {

        height: 480px;

    }


    .competition-final-cta__inner {

        align-items: flex-start;

        flex-direction: column;

    }

}


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

@media (max-width: 600px) {

    .innovation-section {

        padding: 85px 0;

    }


    .innovation-section__eyebrow {

        gap: 10px;

        margin-bottom: 27px;

        font-size: 8px;

        letter-spacing: 3px;

    }


    .innovation-section__line {

        width: 40px;

    }


    .innovation-section__heading {

        font-size: clamp(3.2rem, 13vw, 4.6rem);

    }


    .innovation-section__heading span:last-child {

        margin-left: 18px;

        -webkit-text-stroke-width: 1px;

    }


    .innovation-section__layout {

        margin-top: 55px;

        gap: 40px;

    }


    .innovation-section__body {

        font-size: .92rem;

        line-height: 1.7;

    }


    .innovation-section__media {

        height: 350px;

        border-radius: 18px;

    }


    .innovation-flow {

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

        margin-top: 60px;

    }


    .innovation-step {

        min-height: 125px;

        padding: 22px 18px;

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

    }


    .innovation-step:first-child {

        padding-left: 18px;

    }


    .innovation-step:nth-child(2) {

        border-right: none;

    }


    .innovation-step__title {

        font-size: 1.8rem;

    }


    .competition-final-cta {

        padding: 65px 0;

    }


    .competition-final-cta h2 {

        font-size: clamp(2.5rem, 12vw, 4rem);

    }


    .competition-final-cta__actions {

        width: 100%;

        flex-direction: column;

        align-items: stretch;

    }


    .competition-final-cta__secondary,
    .competition-final-cta__primary {

        justify-content: space-between;

        width: 100%;

    }

}

/* ---------- Closing dual CTA ---------- */
.comp-closing-cta {
  background: var(--navy);
  padding: 0 0 var(--space-8);
}

.comp-closing-cta__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 600px) {
  .comp-closing-cta__row {
    flex-direction: row;
  }
}

.comp-closing-cta__row .btn-primary,
.comp-closing-cta__row .btn-secondary {
  justify-content: center;
}

@media (max-width: 599px) {
  .comp-closing-cta__row .btn-primary,
  .comp-closing-cta__row .btn-secondary {
    width: 100%;
  }
}