@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&display=swap');
/* ==========================================
   MOSTPLAY PARTNERS — HERO VERSION 2
========================================== */

.mp-new-hero {
    --mp-hero-yellow: #ffea00;
    --mp-hero-navy: #031b42;
    --mp-new-hero-desktop-bg: none;
    --mp-new-hero-mobile-bg: none;

    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: clamp(650px, 54vw, 850px);

    overflow: hidden;
    background-color: var(--mp-hero-navy);
    color: #fff;
}

.mp-new-hero *,
.mp-new-hero *::before,
.mp-new-hero *::after {
    box-sizing: border-box;
}

/* ==========================================
   STADIUM BACKGROUND
========================================== */

.mp-new-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background-image: var(--mp-new-hero-desktop-bg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ==========================================
   INNER LAYOUT
========================================== */

.mp-new-hero__inner {
    position: relative;
    width: min(100%, 1640px);
    min-height: inherit;
    margin: 0 auto;
}

/* ==========================================
   CRICKET PLAYERS — DESKTOP RIGHT
========================================== */

.mp-new-hero__players {
    position: absolute;
    z-index: 1;

    right: 0;
    bottom: 0;

    width: 56%;
    height: 96%;

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

    pointer-events: none;
}

.mp-new-hero__players-image {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: right bottom;
}

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

.mp-new-hero__content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 48%;
    padding:
        clamp(95px, 8vw, 145px)
        0
        75px
        clamp(40px, 5vw, 85px);
}

/* Heading */

.mp-new-hero__heading {
    max-width: 590px;
    margin: 0;

    color: #ffffff;
    font-family: inherit;
    font-size: clamp(35px, 3.3vw, 56px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -1.2px;
}

/* Short yellow line */

.mp-new-hero__underline {
    display: block;
    width: 75px;
    height: 4px;

    margin-top: 30px;

    background: var(--mp-hero-yellow);
}

/* ==========================================
   COMMISSION AREA
========================================== */

.mp-new-hero__commission {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: 100%;
    margin-top: 50px;
}

/* Large editable 50% */

.mp-new-hero__percentage {
    display: block;
    flex: 0 0 auto;

    color: var(--mp-hero-yellow);
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: clamp(115px, 13.2vw, 220px);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -8px;
    white-space: nowrap;
}

/* Thin vertical yellow divider */

.mp-new-hero__commission-divider {
    display: block;
    flex: 0 0 3px;

    width: 3px;
    height: clamp(105px, 10vw, 155px);
    margin-left: clamp(8px, 1.6vw, 25px);
    margin-right: clamp(12px, 1.7vw, 27px);

    background: var(--mp-hero-yellow);
}

/* AFFILIATE COMMISSION text */

.mp-new-hero__commission-label {
    display: block;
    min-width: 0;
    max-width: 205px;

    color: #ffffff;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: clamp(24px, 2.8vw, 45px);
    font-weight: 800;
    line-height: 1.08;
    text-transform: uppercase;
    overflow-wrap: normal;
}

/* ==========================================
   YELLOW CTA BUTTON
========================================== */

.mp-new-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 25px;

    min-width: 390px;
    min-height: 78px;

    margin-top: 42px;
    padding: 18px 35px;

    border: none;
    border-radius: 13px;

    background: var(--mp-hero-yellow);
    color: #05183a;

    font-size: clamp(20px, 1.9vw, 30px);
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;

    transition:
        background-color 250ms ease,
        transform 250ms ease,
        box-shadow 250ms ease;
}

.mp-new-hero__cta:hover {
    background: #ffdb00;
    color: #05183a;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.mp-new-hero__cta:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 5px;
}

.mp-new-hero__cta-arrow {
    display: block;
    flex: 0 0 28px;
}

/* ==========================================
   SMALLER DESKTOP
========================================== */

@media (min-width: 901px) and (max-width: 1250px) {
    .mp-new-hero {
        min-height: 650px;
    }

    .mp-new-hero__content {
        width: 52%;
        padding-left: 45px;
        padding-top: 105px;
    }

    .mp-new-hero__players {
        width: 55%;
    }

    .mp-new-hero__heading {
        font-size: clamp(35px, 3.6vw, 46px);
    }

    .mp-new-hero__percentage {
        font-size: clamp(115px, 12vw, 155px);
        letter-spacing: -5px;
    }

    .mp-new-hero__commission-label {
        font-size: clamp(24px, 2.65vw, 34px);
        max-width: 165px;
    }

    .mp-new-hero__commission-divider {
        height: 115px;
        margin-left: 12px;
        margin-right: 14px;
    }

    .mp-new-hero__cta {
        min-width: 305px;
        min-height: 65px;
        font-size: 21px;
    }
}

/* ==========================================
   MOBILE / TABLET — ARTWORK ON TOP
========================================== */

@media (max-width: 900px) {

    .mp-new-hero {
        min-height: 0;
    }

    .mp-new-hero::before {
        background-image: var(--mp-new-hero-mobile-bg);
        background-position: center top;
        background-size: cover;
    }

    .mp-new-hero__inner {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    /* Players now appear above the text */

    .mp-new-hero__players {
        position: relative;
        inset: auto;

        order: 1;
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 0.95 / 1;

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

    .mp-new-hero__players-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center bottom;
    }

    /* Heading, commission, CTA underneath */

    .mp-new-hero__content {
        order: 2;
        align-items: center;

        width: 100%;
        padding: 25px 26px 70px;

        text-align: center;
    }

    .mp-new-hero__heading {
        max-width: 720px;

        font-size: clamp(35px, 6.4vw, 58px);
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -1px;
    }

    .mp-new-hero__underline {
        width: 90px;
        height: 4px;
        margin-top: 28px;
    }

    /* Same horizontal 50% / divider / label
       composition as the reference */

    .mp-new-hero__commission {
        justify-content: center;
        width: 100%;
        margin-top: 45px;
    }

    .mp-new-hero__percentage {
        font-size: clamp(100px, 25vw, 205px);
        letter-spacing: -6px;
    }

    .mp-new-hero__commission-divider {
        height: clamp(93px, 20vw, 165px);
        margin-left: 12px;
        margin-right: 17px;
    }

    .mp-new-hero__commission-label {
        max-width: 190px;
        font-size: clamp(23px, 5vw, 43px);
        text-align: left;
    }

    .mp-new-hero__cta {
        width: 100%;
        max-width: 740px;
        min-width: 0;
        min-height: 76px;

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

        font-size: clamp(20px, 4.5vw, 38px);
    }
}

/* ==========================================
   PHONE SCREENS
========================================== */

@media (max-width: 600px) {

    .mp-new-hero__players {
        aspect-ratio: 0.95 / 1;
    }

    .mp-new-hero__content {
        padding: 22px 18px 50px;
    }

    .mp-new-hero__heading {
        font-size: clamp(30px, 7.2vw, 41px);
        letter-spacing: -0.6px;
    }

    .mp-new-hero__underline {
        width: 72px;
        height: 3px;
        margin-top: 21px;
    }

    .mp-new-hero__commission {
        margin-top: 34px;
    }

    .mp-new-hero__percentage {
        font-size: clamp(80px, 24vw, 145px);
        letter-spacing: -4px;
    }

    .mp-new-hero__commission-divider {
        height: clamp(75px, 18vw, 108px);
        width: 2px;
        flex-basis: 2px;
        margin-left: 7px;
        margin-right: 10px;
    }

    .mp-new-hero__commission-label {
        max-width: 112px;
        font-size: clamp(18px, 4.5vw, 27px);
        line-height: 1.07;
    }

    .mp-new-hero__cta {
        min-height: 58px;
        margin-top: 36px;
        padding: 13px 14px;
        gap: 16px;

        border-radius: 9px;

        font-size: clamp(17px, 4.5vw, 23px);
    }

    .mp-new-hero__cta-arrow {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
    }
}

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

@media (max-width: 370px) {

    .mp-new-hero__content {
        padding-left: 12px;
        padding-right: 12px;
    }

    .mp-new-hero__percentage {
        font-size: 22vw;
    }

    .mp-new-hero__commission-divider {
        margin-left: 5px;
        margin-right: 8px;
    }

    .mp-new-hero__commission-label {
        font-size: 4.5vw;
        max-width: 100px;
    }
}

/* ==========================================
   OPTIONAL REVEAL ANIMATION
========================================== */

/* JS adds this class only when ready. */

.mp-new-hero.mp-new-hero--animate
.mp-new-hero__content {
    opacity: 0;
    transform: translateY(24px);

    transition:
        opacity 800ms ease,
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mp-new-hero.mp-new-hero--animate
.mp-new-hero__players {
    opacity: 0;
    transform: translateX(25px);

    transition:
        opacity 900ms ease,
        transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mp-new-hero.mp-new-hero--animate
.mp-new-hero__content.is-visible,
.mp-new-hero.mp-new-hero--animate
.mp-new-hero__players.is-visible {
    opacity: 1;
    transform: none;
}

/* ==========================================
   ACCESSIBILITY
========================================== */

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

    .mp-new-hero__cta,
    .mp-new-hero.mp-new-hero--animate
    .mp-new-hero__content,
    .mp-new-hero.mp-new-hero--animate
    .mp-new-hero__players {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}



/* ==========================================
   HERO V2 - CLEAR COMMISSION TYPOGRAPHY
========================================== */

@media (min-width: 901px) {

    .mp-new-hero__commission {
        display: flex;
        align-items: center;
        gap: 0;
        width: max-content;
        max-width: none;
    }

    .mp-new-hero__percentage {
        flex: 0 0 auto;
        font-family: Impact, "Arial Narrow", sans-serif;
        font-size: clamp(105px, 11vw, 175px);
        font-weight: 900;
        line-height: 1;
        letter-spacing: -2px;
        white-space: nowrap;
        font-kerning: normal;
        font-variant-numeric: lining-nums;
    }

    .mp-new-hero__commission-divider {
        flex: 0 0 3px;
        width: 3px;
        height: 115px;
        margin-left: 20px;
        margin-right: 20px;
    }

    .mp-new-hero__commission-label {
        display: block;
        width: max-content;
        max-width: none;
        font-family: Impact, "Arial Narrow", sans-serif;
        font-size: clamp(25px, 2.5vw, 40px);
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: 0;
        white-space: nowrap;
    }
}

@media (max-width: 900px) {

    .mp-new-hero__commission {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .mp-new-hero__percentage {
        font-family: Impact, "Arial Narrow", sans-serif;
        font-size: clamp(75px, 22vw, 160px);
        line-height: 1;
        letter-spacing: -2px;
        white-space: nowrap;
    }

    .mp-new-hero__commission-divider {
        flex: 0 0 2px;
        width: 2px;
        height: clamp(70px, 17vw, 125px);
        margin-left: 12px;
        margin-right: 12px;
    }

    .mp-new-hero__commission-label {
        width: max-content;
        max-width: none;
        font-family: Impact, "Arial Narrow", sans-serif;
        font-size: clamp(19px, 4.4vw, 35px);
        line-height: 1.1;
        letter-spacing: 0;
        white-space: nowrap;
        text-align: left;
    }
}

@media (max-width: 400px) {

    .mp-new-hero__percentage {
        font-size: 20vw;
    }

    .mp-new-hero__commission-divider {
        margin-left: 7px;
        margin-right: 7px;
    }

    .mp-new-hero__commission-label {
        font-size: 4.2vw;
    }
}


/* ==========================================
   NEW HERO V2 — CLEAN COMMISSION DESIGN
   Reference-matched condensed typography
========================================== */

/* Desktop */

@media (min-width: 901px) {

    .mp-new-hero__commission {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0;

        width: max-content;
        max-width: none;
        margin-top: 48px;
    }

    /* Large yellow 50% */

    .mp-new-hero__percentage {
        display: block;
        flex: 0 0 auto;

        color: #FFEA00;

        font-family: "Barlow Condensed", sans-serif;
        font-size: clamp(135px, 13.5vw, 220px);
        font-weight: 900;
        font-style: normal;

        line-height: 0.85;
        letter-spacing: -3px;
        white-space: nowrap;

        font-kerning: normal;
        font-variant-numeric: lining-nums;
        text-shadow: none;
    }

    /* Yellow vertical divider */

    .mp-new-hero__commission-divider {
        display: block;
        flex: 0 0 3px;

        width: 3px;
        height: clamp(115px, 10vw, 165px);

        margin-left: 22px;
        margin-right: 24px;

        background: #FFEA00;
        border-radius: 2px;
    }

    /* AFFILIATE COMMISSION */

    .mp-new-hero__commission-label {
        display: block;

        width: max-content;
        max-width: none;

        color: #FFFFFF;

        font-family: "Barlow Condensed", sans-serif;
        font-size: clamp(34px, 3.5vw, 57px);
        font-weight: 700;
        font-style: normal;

        line-height: 0.95;
        letter-spacing: 0.2px;
        text-transform: uppercase;
        white-space: nowrap;
        text-align: left;

        text-shadow: none;
    }
}

/* Tablet */

@media (min-width: 601px) and (max-width: 900px) {

    .mp-new-hero__commission {
        justify-content: center;
        gap: 0;
        width: 100%;
    }

    .mp-new-hero__percentage {
        font-family: "Barlow Condensed", sans-serif;
        font-size: clamp(130px, 22vw, 200px);
        font-weight: 900;
        line-height: 0.85;
        letter-spacing: -2px;
        white-space: nowrap;
    }

    .mp-new-hero__commission-divider {
        flex: 0 0 3px;
        width: 3px;
        height: 125px;
        margin-left: 15px;
        margin-right: 20px;
    }

    .mp-new-hero__commission-label {
        font-family: "Barlow Condensed", sans-serif;
        font-size: clamp(35px, 5.5vw, 50px);
        font-weight: 700;
        line-height: 0.95;
        letter-spacing: 0;
        white-space: nowrap;
        max-width: none;
        text-align: left;
    }
}

/* Mobile */

@media (max-width: 600px) {

    .mp-new-hero__commission {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0;

        width: 100%;
        margin-top: 35px;
    }

    .mp-new-hero__percentage {
        flex: 0 0 auto;

        font-family: "Barlow Condensed", sans-serif;
        font-size: clamp(90px, 25vw, 150px);
        font-weight: 900;

        color: #FFEA00;
        line-height: 0.85;
        letter-spacing: -1px;
        white-space: nowrap;
    }

    .mp-new-hero__commission-divider {
        flex: 0 0 2px;
        width: 2px;
        height: clamp(75px, 19vw, 115px);

        margin-left: 10px;
        margin-right: 12px;

        background: #FFEA00;
    }

    .mp-new-hero__commission-label {
        display: block;

        width: max-content;
        max-width: none;

        font-family: "Barlow Condensed", sans-serif;
        font-size: clamp(24px, 5.4vw, 38px);
        font-weight: 700;

        line-height: 0.95;
        letter-spacing: 0;
        text-transform: uppercase;
        white-space: nowrap;
        text-align: left;
    }
}

/* Small phones */

@media (max-width: 380px) {

    .mp-new-hero__percentage {
        font-size: 24vw;
    }

    .mp-new-hero__commission-divider {
        margin-left: 7px;
        margin-right: 8px;
    }

    .mp-new-hero__commission-label {
        font-size: 5vw;
    }
}





/* ==========================================
   NEW HERO V2 — MOVE CONTENT FURTHER LEFT
   Desktop only
========================================== */

@media (min-width: 992px) {

    .mp-new-hero__content {
        padding-left: clamp(0px, 1vw, 10px);
    }

}



/* ==========================================
   HERO V2 — TALLER, NARROWER 50%
   Match reference image
========================================== */

@media (min-width: 901px) {

    .mp-new-hero__percentage {
        font-family: "Barlow Condensed", Impact, sans-serif;
        font-size: clamp(135px, 13.5vw, 220px);
        font-weight: 900;

        line-height: 0.9;
        letter-spacing: -4px;
        white-space: nowrap;

        /* Taller and slightly narrower */
        transform: scaleX(0.91) scaleY(1.16);
        transform-origin: left center;

        color: #ffea00;
        text-shadow: none;

        /* Compensate for visual width reduction */
        margin-right: -25px;
    }
}