/* ================================
   WORLD CUP 26 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 Hero ---------- */
.wc-hero {
  position: relative;
  height: 90vh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.wc-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wc-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(6, 21, 45, 0.95) 0%,
    rgba(6, 21, 45, 0.55) 45%,
    rgba(6, 21, 45, 0.2) 75%
  );
}

.wc-hero__content {
  position: relative;
  z-index: 10;
  max-width: 640px;
}

.wc-hero__eyebrow {
  margin-bottom: var(--space-3);
}

.wc-hero__heading {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 32px;
  line-height: 1.05;
  color: var(--white);
}

@media (min-width: 768px) {
  .wc-hero__heading { font-size: 56px; }
}

.wc-hero__stat-line {
  margin-top: var(--space-3);
  font-size:30px;
  color: #ffd447;
}

.wc-hero__cta {
  margin-top: var(--space-5);
  display: inline-flex;
}

/* =========================================================
   02 EVENT SCALE
   Modern editorial statistics section
========================================================= */

.event-scale {

    position: relative;

    overflow: hidden;

    padding: 150px 0 160px;

    background: var(--navy);

}


/* =========================================================
   SUBTLE BACKGROUND WORD
========================================================= */

.event-scale::before {

    content: "RIFA";

    position: absolute;

    top: 40px;

    left: 50%;

    transform: translateX(-50%);

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

    font-size: clamp(150px, 24vw, 360px);

    font-weight: 900;

    line-height: 1;

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

    white-space: nowrap;

    pointer-events: none;

}


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

.event-scale__top {

    position: relative;

    z-index: 2;

    max-width: 900px;

}


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

.event-scale__eyebrow {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 34px;

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

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 4px;

    text-transform: uppercase;

}


.event-scale__eyebrow span:first-child {

    color: #FFC83D;

    letter-spacing: 2px;

}


.event-scale__line {

    width: 60px;

    height: 1px;

    background: #FFC83D;

}


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

.event-scale__heading {

    margin: 0;

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

    color: #ffffff;

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

    font-weight: 900;

    line-height: .85;

    letter-spacing: -.065em;

    text-transform: uppercase;

}


/* Second line */

.event-scale__heading span {

    display: block;

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

    color: transparent;

    -webkit-text-fill-color: transparent;

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

}


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

.event-scale__grid {

    position: relative;

    z-index: 3;

    display: grid;

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

    margin-top: 120px;

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

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

}


/* =========================================================
   STAT BLOCK
========================================================= */

.event-scale .stat-block {

    position: relative;

    min-height: 270px;

    padding: 35px 30px 40px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    text-align: left;

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

    transition:
        background .4s ease,
        transform .4s ease;

}


.event-scale .stat-block:last-child {

    border-right: none;

}


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

.event-scale .stat-block__index {

    color: #FFC83D;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 3px;

}


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

.event-scale .stat-block__number {

    display: block;

    margin-top: auto;

    color: #ffffff;

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

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

    font-weight: 900;

    line-height: .8;

    letter-spacing: -.07em;

    white-space: nowrap;

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

}


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

.event-scale .stat-block__label {

    display: block;

    margin-top: 22px;

    color: #ffd447;

    font-size: 20px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

}


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

.event-scale .stat-block:hover {

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

}


.event-scale .stat-block:hover .stat-block__number {

    transform: translateX(8px);

    color: #FFC83D;

}


/* =========================================================
   YELLOW CORNER DETAIL
========================================================= */

.event-scale .stat-block::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 0;

    height: 2px;

    background: #FFC83D;

    transition: width .45s ease;

}


.event-scale .stat-block:hover::before {

    width: 70px;

}


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

@media (max-width: 991px) {

    .event-scale {

        padding: 110px 0 120px;

    }


    .event-scale__heading {

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

    }


    .event-scale__grid {

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

        margin-top: 80px;

    }


    .event-scale .stat-block {

        min-height: 240px;

    }


    .event-scale .stat-block:nth-child(2) {

        border-right: none;

    }


    .event-scale .stat-block:nth-child(-n+2) {

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

    }

}


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

@media (max-width: 600px) {

    .event-scale {

        padding: 90px 22px 100px;

    }


    .event-scale::before {

        font-size: 140px;

        top: 30px;

    }


    .event-scale__eyebrow {

        gap: 9px;

        margin-bottom: 28px;

        font-size: 8px;

        letter-spacing: 2.5px;

    }


    .event-scale__line {

        width: 35px;

    }


    .event-scale__heading {

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

        line-height: .87;

    }


    .event-scale__heading span {

        margin-left: 14px;

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

    }


    .event-scale__grid {

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

        margin-top: 65px;

    }


    .event-scale .stat-block {

        min-height: 175px;

        padding: 20px 14px 25px;

    }


    .event-scale .stat-block__index {

        font-size: 7px;

        letter-spacing: 2px;

    }


    .event-scale .stat-block__number {

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

        letter-spacing: -.06em;

    }


    .event-scale .stat-block__label {

        margin-top: 14px;

        font-size: 7px;

        letter-spacing: 1.5px;

    }

}
/* =========================================================
   03 THE FINAL — CINEMATIC CHAMPIONSHIP MOMENT
========================================================= */

.the-final {

    position: relative;

    min-height: 850px;

    height: 92vh;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background: #081C3B;

}


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

.the-final__media {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

    transform: scale(1.04);

    filter:
        brightness(.50)
        saturate(.68)
        contrast(1.08);

    animation: finalCamera 18s ease-in-out infinite alternate;

}


@keyframes finalCamera {

    from {
        transform: scale(1.04);
    }

    to {
        transform: scale(1.09);
    }

}


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

.the-final__scrim {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            90deg,
            rgba(8,28,59,.88) 0%,
            rgba(8,28,59,.40) 50%,
            rgba(8,28,59,.88) 100%
        ),

        linear-gradient(
            0deg,
            rgba(8,28,59,.96) 0%,
            rgba(8,28,59,.10) 45%,
            rgba(8,28,59,.70) 100%
        );

}


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

.the-final__watermark {

    position: absolute;

    z-index: 2;

    top: 50%;

    left: 50%;

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

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

    font-size: clamp(12rem, 32vw, 34rem);

    font-weight: 900;

    line-height: .8;

    letter-spacing: -.08em;

    color: transparent;

    -webkit-text-fill-color: transparent;

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

    white-space: nowrap;

    pointer-events: none;

}


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

.the-final__content {

    position: relative;

    z-index: 5;

    width: min(1100px, 90%);

    display: flex;

    flex-direction: column;

    align-items: center;

}


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

.the-final__eyebrow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin-bottom: 38px;

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

    font-size: 20px;

    font-weight: 700;

    letter-spacing: 5px;

    text-transform: uppercase;

}


.the-final__eyebrow span:first-child {

    color: #FFC83D;

    letter-spacing: 2px;

}


.the-final__line {

    width: 100px;

    height: 1px;

    background: #FFC83D;

}


/* =========================================================
   DATE
========================================================= */

.the-final__title {

    display: flex;

    flex-direction: column;

    align-items: center;

    margin: 0;

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

    font-weight: 900;

    text-transform: uppercase;

    line-height: .76;

    letter-spacing: -.075em;

}


/* 24 APRIL — OUTLINE */

.the-final__date-outline {

    color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-text-stroke: 2px rgba(255,255,255,.95);

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

}


/* 2027 — SOLID */

.the-final__date-solid {

    margin-top: 12px;

    color: #ffffff;

    font-size: clamp(6rem, 16vw, 16rem);

}


/* Yellow detail */

.the-final__date-solid::after {

    content: "";

    display: block;

    width: 110px;

    height: 3px;

    margin: 30px auto 0;

    background: #FFC83D;

}


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

.the-final__body {

    max-width: 650px;

    margin: 42px auto 0;

    color: #D7E3F2;

    font-size: 25px;

    font-weight: 400;

    line-height: 1.8;

    letter-spacing: .01em;

}


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

.the-final__cta {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    margin-top: 32px;

    padding: 18px 28px;

    background: #FFC83D;

    border: 1px solid #FFC83D;

    color: #081C3B;

    font-size:15px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

    text-decoration: none;

    transition:

        transform .35s ease,

        background .35s ease,

        box-shadow .35s ease;

}


.the-final__cta:hover {

    background: #ffffff;

    border-color: #ffffff;

    color: #081C3B;

    transform: translateY(-4px);

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

}


.the-final__cta .btn-arrow {

    font-size: 20px;

    transition: transform .3s ease;

}


.the-final__cta:hover .btn-arrow {

    transform: translateX(7px);

}


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

.the-final__bottom-meta {

    position: absolute;

    z-index: 6;

    left: 6vw;

    bottom: 35px;

    display: flex;

    align-items: center;

    gap: 14px;

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

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 3px;

}


.the-final__bottom-meta span {

    width: 35px;

    height: 1px;

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

}


/* =========================================================
   RIGHT SIDE META
========================================================= */

.the-final::after {

    content: "ONE WORLD CHAMPION";

    position: absolute;

    z-index: 6;

    right: 6vw;

    bottom: 35px;

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

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 3px;

}


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

@media (max-width: 991px) {

    .the-final {

        min-height: 780px;

        height: 820px;

    }


    .the-final__date-outline {

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

    }


    .the-final__date-solid {

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

    }

}


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

@media (max-width: 600px) {

    .the-final {

        min-height: 720px;

        height: 720px;

    }


    .the-final__media {

        object-position: center;

        filter:
            brightness(.40)
            saturate(.60)
            contrast(1.08);

    }


    .the-final__scrim {

        background:

            linear-gradient(
                180deg,
                rgba(8,28,59,.75),
                rgba(8,28,59,.30) 45%,
                rgba(8,28,59,.96)
            );

    }


    .the-final__watermark {

        font-size: 45vw;

    }


    .the-final__eyebrow {

        gap: 9px;

        margin-bottom: 27px;

        font-size: 8px;

        letter-spacing: 3px;

    }


    .the-final__line {

        width: 35px;

    }


    .the-final__date-outline {

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

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

    }


    .the-final__date-solid {

        margin-top: 8px;

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

    }


    .the-final__date-solid::after {

        width: 65px;

        height: 2px;

        margin-top: 18px;

    }


    .the-final__body {

        max-width: 330px;

        margin-top: 30px;

        font-size: 13px;

        line-height: 1.7;

    }


    .the-final__cta {

        margin-top: 25px;

        padding: 16px 20px;

        font-size: 8px;

        letter-spacing: 1.5px;

    }


    .the-final__bottom-meta {

        left: 22px;

        bottom: 22px;

        font-size: 6px;

        letter-spacing: 2px;

    }


    .the-final::after {

        right: 22px;

        bottom: 22px;

        font-size: 6px;

        letter-spacing: 2px;

    }

}

/* =========================================================
   04 KEY DATES
   Clean editorial list — NOT a timeline
========================================================= */

.key-dates {

    position: relative;

    overflow: hidden;

    padding: 150px 0 160px;

    background: var(--navy);

}


/* =========================================================
   SUBTLE BACKGROUND TEXT
========================================================= */

.key-dates::before {

    content: "2027";

    position: absolute;

    top: 80px;

    right: -40px;

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

    font-size: clamp(180px, 30vw, 420px);

    font-weight: 900;

    line-height: .8;

    letter-spacing: -.08em;

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

    pointer-events: none;

}


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

.key-dates__header {

    position: relative;

    z-index: 2;

    margin-bottom: 90px;

}


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

.key-dates__eyebrow {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 35px;

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

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 4px;

    text-transform: uppercase;

}


.key-dates__eyebrow span:first-child {

    color: #FFC83D;

    letter-spacing: 2px;

}


.key-dates__line {

    width: 60px;

    height: 1px;

    background: #FFC83D;

}


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

.key-dates__heading {

    margin: 0;

    max-width: 900px;

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

    color: #ffffff;

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

    font-weight: 900;

    line-height: .82;

    letter-spacing: -.065em;

    text-transform: uppercase;

}


.key-dates__heading span {

    display: block;

    margin-left: clamp(30px, 8vw, 110px);

    color: transparent;

    -webkit-text-fill-color: transparent;

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

}


/* =========================================================
   LIST
========================================================= */

.key-dates__list {

    position: relative;

    z-index: 2;

    width: 100%;

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

}


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

.key-dates__row {

    position: relative;

    min-height: 145px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    padding: 30px 0;

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

    transition:

        padding .4s ease,

        background .4s ease;

}


/* =========================================================
   PHASE
========================================================= */

.key-dates__phase {

    display: flex;

    align-items: center;

    gap: 28px;

    color: #ffffff;

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

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

    font-weight: 700;

    letter-spacing: -.02em;

    text-transform: uppercase;

}


.key-dates__index {

    color: #FFC83D;

    font-family: Arial, sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

}


/* =========================================================
   DATE
========================================================= */

.key-dates__date {

    display: flex;

    align-items: baseline;

    justify-content: flex-end;

    gap: 12px;

    min-width: 380px;

    color: #ffffff;

    text-align: right;

}


/* BIG DAY */

.key-dates__day {

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

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

    font-weight: 900;

    line-height: .8;

    letter-spacing: -.06em;

}


/* MONTH */

.key-dates__month {

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

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

}


/* YEAR */

.key-dates__year {

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

    font-size: 15px;

    font-weight: 700;

    color: #FFC83D;

}


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

.key-dates__row:hover {

    padding-left: 18px;

    padding-right: 18px;

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

}


.key-dates__row:hover .key-dates__day {

    color: #FFC83D;

}


/* =========================================================
   FINAL ROW
========================================================= */

.key-dates__row--final {

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

}


.key-dates__row--final .key-dates__phase {

    color: #FFC83D;

}


.key-dates__row--final .key-dates__day {

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

}


/* Yellow indicator */

.key-dates__row--final::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 3px;

    height: 0;

    background: #FFC83D;

    transition: height .45s ease;

}


.key-dates__row--final:hover::before {

    height: 100%;

}


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

.key-dates__cta-wrap {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 75px;

    padding-top: 35px;

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

}


.key-dates__cta-label {

    margin: 0;

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

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

}


.key-dates__cta {

    display: inline-flex;

    align-items: center;

    gap: 25px;

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

    text-decoration: none;

    transition: color .3s ease;

}


.key-dates__arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

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

    border-radius: 50%;

    font-size: 20px;

    transition:

        transform .35s ease,

        background .35s ease,

        border-color .35s ease,

        color .35s ease;

}


.key-dates__cta:hover {

    color: #FFC83D;

}


.key-dates__cta:hover .key-dates__arrow {

    transform: translateX(6px);

    background: #FFC83D;

    border-color: #FFC83D;

    color: #081C3B;

}


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

@media (max-width: 991px) {

    .key-dates {

        padding: 110px 0 120px;

    }


    .key-dates__header {

        margin-bottom: 65px;

    }


    .key-dates__heading {

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

    }


    .key-dates__row {

        min-height: 125px;

    }


    .key-dates__date {

        min-width: 300px;

    }

}


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

@media (max-width: 600px) {

    .key-dates {

        padding: 90px 22px 100px;

    }


    .key-dates::before {

        top: 30px;

        right: -20px;

        font-size: 150px;

    }


    .key-dates__eyebrow {

        gap: 9px;

        margin-bottom: 28px;

        font-size: 8px;

        letter-spacing: 2.5px;

    }


    .key-dates__line {

        width: 35px;

    }


    .key-dates__heading {

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

        line-height: .87;

    }


    .key-dates__heading span {

        margin-left: 14px;

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

    }


    .key-dates__header {

        margin-bottom: 55px;

    }


    .key-dates__row {

        min-height: 115px;

        display: grid;

        grid-template-columns: 1fr auto;

        align-items: center;

        gap: 15px;

        padding: 25px 0;

    }


    .key-dates__phase {

        gap: 12px;

        font-size: 13px;

        line-height: 1.15;

    }


    .key-dates__index {

        font-size: 7px;

    }


    .key-dates__date {

        min-width: auto;

        gap: 5px;

    }


    .key-dates__day {

        font-size: 2.6rem;

    }


    .key-dates__month {

        display: none;

    }


    .key-dates__year {

        font-size: 9px;

        letter-spacing: 1px;

    }


    .key-dates__row--final .key-dates__day {

        font-size: 3.2rem;

    }


    .key-dates__row:hover {

        padding-left: 8px;

        padding-right: 8px;

    }


    .key-dates__cta-wrap {

        align-items: flex-start;

        flex-direction: column;

        gap: 25px;

        margin-top: 55px;

    }


    .key-dates__cta {

        gap: 18px;

        font-size: 9px;

    }


    .key-dates__arrow {

        width: 42px;

        height: 42px;

    }

}

/* ---------- Closing CTA ---------- */
.wc-closing-cta {
  background: var(--navy);
  padding: 0 0 var(--space-8);
  text-align: center;
}

.wc-closing-cta .btn-primary {
  display: inline-flex;
}