:root {

    --black:
        #050505;

    --black-soft:
        #090909;

    --blue:
        #00a8ff;

    --red:
        #ff1744;

    --white:
        #ffffff;

    --grey:
        #777777;

}


/* =====================================================
   RESET
===================================================== */

* {

    margin:
        0;

    padding:
        0;

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

}


body {

    margin:
        0;

    background:
        var(--black);

    color:
        var(--white);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow-x:
        hidden;

}


body.menu-open {

    overflow:
        hidden;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


button {

    font-family:
        inherit;

}


/* =====================================================
   NAVBAR
===================================================== */

.sports-navbar {

    position:
        fixed;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        90px;

    z-index:
        1000;

    background:
        rgba(5,5,5,0.94);

    border-bottom:
        1px solid #181818;

    backdrop-filter:
        blur(10px);

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

}


.sports-navbar-inner {

    width:
        min(1400px,90%);

    height:
        100%;

    margin:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

}


.sports-logo {

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        18px;

    font-weight:
        900;

    letter-spacing:
        0.12em;

    white-space:
        nowrap;

    z-index:
        1102;

}


.sports-logo span {

    color:
        #777777;

    font-weight:
        500;

}


/* =====================================================
   DESKTOP NAV
===================================================== */

.sports-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        34px;

    margin-left:
        auto;

    margin-right:
        30px;

}


.sports-nav a {

    position:
        relative;

    color:
        #777777;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.22em;

    white-space:
        nowrap;

    transition:
        color 0.3s ease;

}


.sports-nav a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -8px;

    width:
        0;

    height:
        1px;

    background:
        var(--blue);

    transition:
        width 0.3s ease;

}


.sports-nav a:hover {

    color:
        #ffffff;

}


.sports-nav a:hover::after {

    width:
        100%;

}


/* =====================================================
   BACK HOME
===================================================== */

.sports-back {

    padding:
        12px 20px;

    border:
        1px solid #292929;

    color:
        #aaaaaa;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        0.18em;

    white-space:
        nowrap;

    transition:
        0.3s ease;

}


.sports-back:hover {

    color:
        #ffffff;

    border-color:
        var(--blue);

    background:
        rgba(0,168,255,0.04);

}


/* =====================================================
   HAMBURGER
===================================================== */

.menu-button {

    display:
        none;

    width:
        42px;

    height:
        42px;

    padding:
        8px;

    border:
        1px solid
        rgba(255,255,255,0.20);

    background:
        transparent;

    cursor:
        pointer;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    z-index:
        1103;

}


.menu-button span {

    display:
        block;

    width:
        22px;

    height:
        1px;

    margin:
        3px 0;

    background:
        #ffffff;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;

}


.menu-button.active
span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);

}


.menu-button.active
span:nth-child(2) {

    opacity:
        0;

}


.menu-button.active
span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);

}


/* =====================================================
   HERO
===================================================== */

.sports-hero {

    position:
        relative;

    min-height:
        780px;

    padding:
        180px 5%
        100px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

}


.hero-grid {

    position:
        absolute;

    inset:
        0;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        );

    background-size:
        80px 80px;

}


.hero-glow {

    position:
        absolute;

    width:
        650px;

    height:
        650px;

    right:
        -250px;

    top:
        50%;

    transform:
        translateY(-50%);

    background:
        radial-gradient(
            circle,
            rgba(0,168,255,0.09),
            transparent 70%
        );

}


.sports-hero-content {

    position:
        relative;

    z-index:
        2;

    width:
        min(1400px,100%);

    margin:
        auto;

}


.hero-eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    color:
        #666666;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        0.4em;

}


.hero-eyebrow span {

    width:
        40px;

    height:
        1px;

    background:
        #444444;

}


.sports-hero h1 {

    margin-top:
        30px;

    display:
        flex;

    flex-direction:
        column;

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        clamp(
            70px,
            11vw,
            155px
        );

    line-height:
        0.78;

    letter-spacing:
        -0.08em;

}


.sports-hero h1 span {

    color:
        #555555;

}


.sports-hero h1 strong {

    color:
        var(--blue);

}


.sports-hero-content > p {

    margin-top:
        38px;

    color:
        #777777;

    font-size:
        12px;

    line-height:
        1.8;

}


.hero-line {

    width:
        100px;

    height:
        2px;

    margin-top:
        38px;

    background:
        var(--red);

}


.hero-meta {

    display:
        flex;

    gap:
        55px;

    margin-top:
        40px;

}


.hero-meta div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.hero-meta strong {

    font-size:
        18px;

}


.hero-meta span {

    font-size:
        6px;

    color:
        #555555;

    font-weight:
        700;

    letter-spacing:
        0.2em;

}


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

.sports-intro {

    width:
        min(1400px,90%);

    margin:
        auto;

    padding:
        110px 0;

}


.section-eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    color:
        #555555;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        0.35em;

}


.section-eyebrow span {

    width:
        35px;

    height:
        1px;

    background:
        #333333;

}


.intro-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        100px;

    margin-top:
        45px;

}


.intro-heading h2 {

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        clamp(
            55px,
            7vw,
            100px
        );

    line-height:
        0.82;

    letter-spacing:
        -0.07em;

}


.intro-heading h2 span {

    display:
        block;

    color:
        var(--blue);

}


.intro-text p {

    color:
        #777777;

    font-size:
        12px;

    line-height:
        1.85;

    margin-bottom:
        20px;

}


.intro-values {

    display:
        grid;

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

    gap:
        8px;

    margin-top:
        30px;

}


.intro-values div {

    padding:
        16px;

    background:
        #090909;

    border:
        1px solid #191919;

}


.intro-values strong {

    color:
        #ffffff;

    font-size:
        8px;

    letter-spacing:
        0.18em;

}


/* =====================================================
   EVENTS
===================================================== */

.events-section {

    width:
        min(1400px,90%);

    margin:
        auto;

    padding:
        50px 0
        120px;

}


.section-heading {

    margin-bottom:
        45px;

}


.section-heading h2 {

    margin-top:
        18px;

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        clamp(
            55px,
            7vw,
            100px
        );

    line-height:
        0.82;

    letter-spacing:
        -0.07em;

}


.section-heading h2 span {

    color:
        var(--blue);

}


.section-heading p {

    max-width:
        500px;

    margin-top:
        25px;

    color:
        #666666;

    font-size:
        11px;

    line-height:
        1.8;

}


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

.category-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:
        14px;

}


/* =====================================================
   CATEGORY CARD
   FIXED 4:5
===================================================== */

.category-card {

    position:
        relative;

    width:
        100%;

    height:
        auto;

    min-height:
        0;

    aspect-ratio:
        4 / 5;

    overflow:
        hidden;

    background:
        #090909;

    border:
        1px solid #1b1b1b;

    cursor:
        pointer;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease;

}


.category-card:hover {

    transform:
        translateY(-4px);

    border-color:
        var(--blue);

}


.category-image {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

}


.category-image img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    transition:
        transform 0.7s ease;

}


.category-card:hover
.category-image img {

    transform:
        scale(1.05);

}


.category-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to bottom,
            transparent 15%,
            rgba(0,0,0,0.92) 100%
        );

}


.category-number {

    position:
        absolute;

    top:
        22px;

    right:
        24px;

    z-index:
        2;

    color:
        #333333;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.2em;

}


.category-content {

    position:
        absolute;

    left:
        25px;

    right:
        25px;

    bottom:
        24px;

    z-index:
        3;

}


.category-content > span {

    color:
        var(--blue);

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        0.28em;

}


.category-content h3 {

    margin-top:
        10px;

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        32px;

    line-height:
        0.9;

    letter-spacing:
        -0.05em;

}


.category-content h3 strong {

    display:
        block;

    color:
        #ffffff;

}


.category-content p {

    margin-top:
        15px;

    color:
        rgba(255,255,255,0.55);

    font-size:
        8px;

    line-height:
        1.6;

}


.category-arrow {

    margin-top:
        22px;

    color:
        #ffffff;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        0.2em;

}


/* =====================================================
   EVENT PAGE
===================================================== */

.event-page {

    display:
        none;

}


.event-page.active {

    display:
        block;

}


.event-page-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        40px;

    padding-bottom:
        25px;

    border-bottom:
        1px solid #181818;

}


.event-page-header > div {

    text-align:
        right;

}


.event-page-header span {

    display:
        block;

    margin-bottom:
        8px;

    color:
        #666666;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        0.3em;

}


.event-page-header h3 {

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        38px;

    line-height:
        0.9;

    letter-spacing:
        -0.05em;

}


.back-button {

    padding:
        12px 20px;

    border:
        1px solid #292929;

    background:
        transparent;

    color:
        #aaaaaa;

    cursor:
        pointer;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.18em;

    transition:
        0.3s ease;

}


.back-button:hover {

    color:
        #ffffff;

    border-color:
        var(--blue);

}


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

.events-grid {

    display:
        grid;

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

    gap:
        14px;

}


/* =====================================================
   EVENT CARD
   FIXED 4:5
===================================================== */

.event-card {

    position:
        relative;

    width:
        100%;

    height:
        auto;

    min-height:
        0;

    aspect-ratio:
        4 / 5;

    overflow:
        hidden;

    background:
        #090909;

    border:
        1px solid #1b1b1b;

    cursor:
        pointer;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease;

}


.event-card:hover {

    transform:
        translateY(-4px);

    border-color:
        var(--red);

}


.event-card-image {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

}


.event-card-image img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    transition:
        transform 0.65s ease;

}


.event-card:hover
.event-card-image img {

    transform:
        scale(1.05);

}


.event-card-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to bottom,
            transparent 10%,
            rgba(0,0,0,0.95) 100%
        );

}


.event-card-content {

    position:
        absolute;

    left:
        20px;

    right:
        20px;

    bottom:
        20px;

    z-index:
        2;

}


.event-card-content > span {

    color:
        var(--blue);

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        0.2em;

}


.event-card-content h3 {

    margin-top:
        8px;

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        20px;

    line-height:
        1;

    letter-spacing:
        -0.03em;

}


.event-card-action {

    margin-top:
        17px;

    color:
        #ffffff;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        0.18em;

}


.event-card-action b {

    margin-left:
        8px;

    color:
        var(--red);

    font-size:
        11px;

}


/* =====================================================
   DETAILS
===================================================== */

.event-details {

    display:
        none;

}


.event-details.active {

    display:
        block;

}


.details-layout {

    margin-top:
        50px;

    display:
        grid;

    grid-template-columns:
        minmax(350px,0.9fr)
        minmax(350px,1.1fr);

    gap:
        60px;

    align-items:
        start;

}


.details-image {

    position:
        sticky;

    top:
        110px;

    width:
        100%;

    height:
        auto;

    aspect-ratio:
        4 / 5;

    overflow:
        hidden;

    background:
        #090909;

    border:
        1px solid #1b1b1b;

}


.details-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.details-information {

    padding-top:
        10px;

}


.details-label {

    display:
        block;

    color:
        var(--blue);

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        0.3em;

}


.details-information h1 {

    margin-top:
        14px;

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        clamp(
            40px,
            5vw,
            75px
        );

    line-height:
        0.9;

    letter-spacing:
        -0.06em;

}


.details-line {

    width:
        70px;

    height:
        2px;

    margin:
        28px 0;

    background:
        var(--red);

}


.details-information h3 {

    margin-bottom:
        20px;

    color:
        #aaaaaa;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.25em;

}


.rules-list {

    padding-left:
        18px;

}


.rules-list li {

    margin-bottom:
        12px;

    padding-left:
        5px;

    color:
        #aaaaaa;

    font-size:
        11px;

    line-height:
        1.65;

}


.rules-list li::marker {

    color:
        var(--blue);

}


/* =====================================================
   REGISTER
===================================================== */

.register-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        25px;

    margin-top:
        28px;

    padding:
        15px 21px;

    background:
        var(--blue);

    color:
        #050505;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        0.16em;

    transition:
        0.3s ease;

}


.register-button:hover {

    background:
        var(--red);

    color:
        #ffffff;

    transform:
        translateY(-2px);

}


.register-button span {

    font-size:
        13px;

}


/* =====================================================
   BACK TO CATEGORIES
===================================================== */

.back-to-categories {

    display:
        block;

    margin-top:
        14px;

    padding:
        13px 21px;

    border:
        1px solid #292929;

    background:
        transparent;

    color:
        #777777;

    cursor:
        pointer;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.18em;

    transition:
        0.3s ease;

}


.back-to-categories:hover {

    color:
        #ffffff;

    border-color:
        var(--blue);

    background:
        rgba(0,168,255,0.04);

}


/* =====================================================
   CONTACTS
===================================================== */

.details-contacts {

    grid-column:
        1 / -1;

    padding-top:
        35px;

    border-top:
        1px solid #181818;

}


.details-section-label {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        20px;

    color:
        #777777;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        0.3em;

}


.details-section-label span {

    width:
        30px;

    height:
        1px;

    background:
        var(--red);

}


.contacts-grid {

    display:
        grid;

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

    gap:
        12px;

}


.contact-card {

    padding:
        20px;

    background:
        #090909;

    border:
        1px solid #1b1b1b;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

}


.contact-card > div:first-child span {

    display:
        block;

    color:
        #555555;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        0.2em;

}


.contact-card h4 {

    margin-top:
        8px;

    color:
        #ffffff;

    font-size:
        11px;

    letter-spacing:
        0.08em;

}


.contact-buttons {

    display:
        flex;

    gap:
        7px;

}


.contact-buttons a {

    padding:
        9px 12px;

    border:
        1px solid #252525;

    color:
        #777777;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    transition:
        0.3s ease;

}


.contact-buttons a:first-child:hover {

    color:
        #ffffff;

    border-color:
        var(--blue);

}


.contact-buttons a:last-child:hover {

    color:
        #ffffff;

    border-color:
        var(--red);

}


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

.sports-cta {

    padding:
        120px 5%
        110px;

    text-align:
        center;

    border-top:
        1px solid #181818;

}


.cta-inner {

    width:
        min(1200px,100%);

    margin:
        auto;

}


.cta-inner > span {

    color:
        #555555;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        0.35em;

}


.cta-inner h2 {

    margin-top:
        20px;

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        clamp(
            55px,
            9vw,
            120px
        );

    line-height:
        0.82;

    letter-spacing:
        -0.07em;

}


.cta-inner h2 strong {

    color:
        var(--blue);

}


.cta-inner p {

    margin:
        28px auto;

    color:
        #666666;

    font-size:
        10px;

}


.cta-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        30px;

    padding:
        15px 22px;

    border:
        1px solid #ffffff;

    color:
        #ffffff;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        0.2em;

}


.cta-button:hover {

    background:
        #ffffff;

    color:
        #050505;

}


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

.sports-footer {

    padding:
        80px 5%
        30px;

    background:
        #030303;

    border-top:
        1px solid #181818;

    text-align:
        center;

}


.footer-logo {

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        55px;

    font-weight:
        900;

}


.footer-logo span {

    color:
        #666666;

}


.sports-footer p {

    margin-top:
        18px;

    color:
        #444444;

    font-size:
        7px;

    letter-spacing:
        0.25em;

}


.sports-footer > a {

    display:
        inline-block;

    margin-top:
        25px;

    color:
        #777777;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        0.18em;

}


.sports-footer > a:hover {

    color:
        var(--blue);

}


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

@media (max-width:1050px) {

    .category-grid {

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

    }


    .events-grid {

        grid-template-columns:
            repeat(3,minmax(0,1fr));

    }


    .details-layout {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .details-image {

        position:
            relative;

        top:
            auto;

    }

}


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

@media (max-width:700px) {

    .sports-navbar {

        height:
            75px;

    }


    .sports-navbar-inner {

        width:
            90%;

    }


    .sports-logo {

        font-size:
            15px;

    }


    .sports-back {

        display:
            none;

    }


    .menu-button {

        display:
            flex;

    }


    .sports-nav {

        position:
            fixed;

        inset:
            0;

        width:
            100%;

        height:
            100vh;

        height:
            100dvh;

        margin:
            0;

        padding:
            100px 9%
            45px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            center;

        gap:
            0;

        background:
            #050505;

        opacity:
            0;

        visibility:
            hidden;

        transform:
            translateY(-20px);

        transition:
            opacity 0.35s ease,
            transform 0.35s ease,
            visibility 0.35s ease;

        z-index:
            1100;

    }


    .sports-nav.active {

        opacity:
            1;

        visibility:
            visible;

        transform:
            translateY(0);

    }


    .sports-nav a {

        width:
            100%;

        padding:
            15px 0;

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

        color:
            #888888;

        font-size:
            21px;

        letter-spacing:
            0.08em;

        transform:
            translateX(-20px);

        opacity:
            0;

        transition:
            0.35s ease;

    }


    .sports-nav.active a {

        transform:
            translateX(0);

        opacity:
            1;

    }


    .sports-nav a::after {

        display:
            none;

    }


    .sports-hero {

        min-height:
            650px;

        padding:
            130px 6%
            80px;

    }


    .sports-hero-content {

        width:
            88%;

    }


    .hero-eyebrow {

        font-size:
            5px;

        letter-spacing:
            0.22em;

    }


    .hero-eyebrow span {

        width:
            20px;

    }


    .sports-hero h1 {

        font-size:
            62px;

    }


    .sports-hero-content > p {

        font-size:
            10px;

    }


    .hero-meta {

        gap:
            25px;

    }


    .hero-meta strong {

        font-size:
            15px;

    }


    .sports-intro,
    .events-section {

        width:
            88%;

    }


    .sports-intro {

        padding:
            80px 0;

    }


    .intro-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .intro-heading h2 {

        font-size:
            55px;

    }


    .intro-values {

        grid-template-columns:
            1fr;

    }


    .section-heading h2 {

        font-size:
            55px;

    }


    /* CATEGORY 4:5 */

    .category-grid {

        grid-template-columns:
            1fr;

        gap:
            12px;

    }


    .category-card {

        width:
            100%;

        height:
            auto;

        min-height:
            0;

        aspect-ratio:
            4 / 5;

    }


    /* EVENTS 4:5 */

    .events-grid {

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

        gap:
            8px;

    }


    .event-card {

        width:
            100%;

        height:
            auto;

        min-height:
            0;

        aspect-ratio:
            4 / 5;

    }


    .event-page-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            20px;

    }


    .event-page-header > div {

        text-align:
            left;

    }


    .event-page-header h3 {

        font-size:
            28px;

    }


    /* DETAILS */

    .details-layout {

        grid-template-columns:
            1fr;

        gap:
            30px;

    }


    .details-image {

        width:
            100%;

        height:
            auto;

        aspect-ratio:
            4 / 5;

    }


    .details-information h1 {

        font-size:
            48px;

    }


    .contacts-grid {

        grid-template-columns:
            1fr;

    }


    .contact-card {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .contact-buttons {

        width:
            100%;

    }


    .contact-buttons a {

        flex:
            1;

        text-align:
            center;

    }


    .back-to-categories {

        width:
            100%;

        text-align:
            center;

    }


    .venue-grid {

        grid-template-columns:
            1fr;

    }


    .sports-footer {

        flex-direction:
            column;

        gap:
            15px;

    }

}


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

@media (max-width:430px) {

    .sports-hero h1 {

        font-size:
            52px;

    }


    .category-card {

        aspect-ratio:
            4 / 5;

    }

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

}


    .event-card {

        aspect-ratio:
            4 / 5;

    }


    .event-card-content {

        left:
            14px;

        right:
            14px;

        bottom:
            15px;

    }


    .event-card-content h3 {

        font-size:
            17px;

    }


    .details-image {

        aspect-ratio:
            4 / 5;

    }


    .details-information h1 {

        font-size:
            40px;

    }


    .footer-logo {

        font-size:
            43px;

    }

}


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

@media (max-width:380px) {

    .category-card {

        aspect-ratio:
            4 / 5;

    }


    .event-card {

        aspect-ratio:
            4 / 5;

    }


    .events-grid {

        gap:
            7px;

    }

}

/* =========================================================
   SYNAPSE '26 SPORTS — FINAL OVERRIDES
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

/* Fixed navbar */
.sports-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Category cards — fixed 4:5 */
.category-card {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.category-image,
.category-image img {
    width: 100%;
    height: 100%;
}

.category-image img {
    display: block;
    object-fit: cover;
}

/* Event cards — fixed 4:5 */
.event-card {
    position: relative;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    cursor: pointer;
}

.event-card-image,
.event-card-image img {
    width: 100%;
    height: 100%;
}

.event-card-image img {
    display: block;
    object-fit: cover;
}

.event-card-action {
    margin-top: 16px;
    color: #fff;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .18em;
}

.event-card-action b {
    margin-left: 8px;
    color: #ff1744;
    font-size: 11px;
}

/* Details image — fixed 4:5 */
.details-image {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.details-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Register + Back to Categories */
.back-to-categories {
    display: block;
    margin-top: 14px;
    padding: 13px 21px;
    border: 1px solid #292929;
    background: transparent;
    color: #777;
    cursor: pointer;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .18em;
    transition: color .3s ease,
                border-color .3s ease,
                background .3s ease,
                transform .3s ease;
}

.back-to-categories:hover {
    color: #fff;
    border-color: #00a8ff;
    background: rgba(0,168,255,.04);
    transform: translateX(4px);
}

/* Hamburger */
.menu-button {
    display: none;
    width: 42px;
    height: 42px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.2);
    background: transparent;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 1103;
}

.menu-button span {
    display: block;
    width: 22px;
    height: 1px;
    margin: 3px 0;
    background: #fff;
    transition: transform .3s ease, opacity .3s ease;
}

.menu-button.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-button.active span:nth-child(2) {
    opacity: 0;
}

.menu-button.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile */
@media (max-width: 700px) {

    .sports-navbar {
        height: 75px;
    }

    .sports-back {
        display: none;
    }

    .menu-button {
        display: flex;
    }

    .sports-nav {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        margin: 0;
        padding: 100px 9% 45px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0;
        background: #050505;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: opacity .35s ease,
                    transform .35s ease,
                    visibility .35s ease;
        z-index: 1100;
        overflow-y: auto;
    }

    .sports-nav.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .sports-nav a {
        width: 100%;
        padding: 15px 0;
        color: #888;
        font-size: 21px;
        border-bottom: 1px solid rgba(255,255,255,.08);
        transform: translateX(-20px);
        opacity: 0;
        transition: color .25s ease,
                    transform .4s ease,
                    opacity .4s ease;
    }

    .sports-nav.active a {
        transform: translateX(0);
        opacity: 1;
    }

    .sports-nav a::after {
        display: none;
    }

    .category-card,
    .event-card,
    .details-image {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 5;
    }

    .back-to-categories {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 430px) {

    .category-card,
    .event-card,
    .details-image {
        aspect-ratio: 4 / 5;
    }
}
/* =========================================================
   SYNAPSE '26 — FOOTER
========================================================= */

.site-footer {

    position: relative;

    width: 100%;

    padding: 90px 5% 30px;

    background: #030303;

    color: #ffffff;

    border-top: 1px solid #181818;

    overflow: hidden;

}


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

.footer-top {

    position: relative;

    z-index: 2;

    width: min(1400px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.7fr
        1fr
        1fr
        0.8fr;

    gap: 60px;

    padding-bottom: 70px;

    border-bottom: 1px solid #171717;

}


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

.footer-brand {

    max-width: 420px;

}


.footer-logo {

    font-family:
        "Arial Black",
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(40px, 5vw, 65px);

    line-height: 0.9;

    font-weight: 900;

    letter-spacing: -0.06em;

}


.footer-logo span {

    color: #666666;

    font-weight: 300;

}


.footer-brand p {

    max-width: 330px;

    margin-top: 25px;

    color: #555555;

    font-size: 8px;

    line-height: 1.9;

    font-weight: 600;

    letter-spacing: 0.20em;

}


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

.footer-column {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;

}


.footer-heading {

    margin-bottom: 10px;

    color: #555555;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 0.35em;

}


.footer-column a {

    color: #777777;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 0.15em;

    transition:
        color 0.3s ease,
        transform 0.3s ease;

}


.footer-column a:hover {

    color: #ffffff;

    transform: translateX(3px);

}


/* =========================================================
   SOCIAL
========================================================= */

.footer-social a {

    color: #ffffff;

}


.footer-social span {

    color: #444444;

    font-size: 7px;

    letter-spacing: 0.15em;

}


/* =========================================================
   LARGE WORDMARK
========================================================= */

.footer-wordmark {

    width: 100%;

    margin-top: 65px;

    text-align: center;

    font-family:
        "Arial Black",
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(75px, 16vw, 240px);

    line-height: 0.75;

    font-weight: 900;

    letter-spacing: -0.08em;

    color: transparent;

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

    user-select: none;

}


.footer-wordmark span {

    color: #333333;

    -webkit-text-stroke: 0;

}


/* =========================================================
   OLD FOOTER — HIDE
========================================================= */

.sports-footer {

    display: none;

}


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

.footer-bottom {

    width:
        min(1400px, 100%);

    margin:
        50px auto 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        #3f3f3f;

    font-size:
        7px;

    font-weight:
        600;

    letter-spacing:
        0.20em;

}


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

@media (max-width: 1050px) {

    .footer-top {

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

    }


    .footer-brand {

        grid-column:
            1 / -1;

    }

}


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

@media (max-width: 700px) {

    .site-footer {

        padding:
            75px 7% 25px;

    }


    .footer-top {

        grid-template-columns:
            1fr;

        gap:
            40px;

        padding-bottom:
            55px;

    }


    .footer-brand {

        grid-column:
            auto;

    }


    .footer-logo {

        font-size:
            48px;

    }


    .footer-brand p {

        font-size:
            7px;

    }


    .footer-wordmark {

        margin-top:
            45px;

        font-size:
            24vw;

    }


    .footer-bottom {

        flex-direction:
            column;

        text-align:
            center;

        gap:
            12px;

        line-height:
            1.5;

    }

}


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

@media (max-width: 430px) {

    .footer-logo {

        font-size:
            43px;

    }


    .footer-wordmark {

        font-size:
            23vw;

    }

}

/* =========================================================
   SYNAPSE '26 — EVENT DETAILS ACTIONS + REGISTRATION FEE
   FINAL OVERRIDES
========================================================= */

.details-information .registration-fee {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 30px;
    padding: 18px 20px;
    background: #090909;
    border: 1px solid #292929;
}

.details-information .registration-fee span {
    display: block;
    margin: 0;
    color: #555555;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .22em;
}

.details-information .registration-fee strong {
    display: block;
    margin: 0;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-align: right;
}

/* Register Now + Back to Categories side-by-side */
.details-actions {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-top: 14px;
}

.details-actions .register-button,
.details-actions .back-to-categories {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin: 0;
    justify-content: center;
    text-align: center;
}

.details-actions .register-button {
    display: inline-flex;
}

.details-actions .back-to-categories {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* In-charge cards stay below the buttons */
.details-contacts {
    grid-column: 1 / -1;
    margin-top: 0;
}

@media (max-width: 700px) {
    .details-actions {
        gap: 8px;
    }

    .details-actions .register-button,
    .details-actions .back-to-categories {
        padding-left: 10px;
        padding-right: 10px;
    }

    .details-information .registration-fee {
        padding: 16px;
    }

    .details-information .registration-fee strong {
        font-size: 12px;
    }
}

@media (max-width: 380px) {
    .details-actions {
        flex-direction: column;
    }

    .details-actions .register-button,
    .details-actions .back-to-categories {
        width: 100%;
    }
}


/* =========================================================
   FINAL FIX — EVENT IN-CHARGE CARD ALIGNMENT
========================================================= */

.details-contacts {
    width: 100%;
    grid-column: 1 / -1;
    margin-top: 10px;
}

.contacts-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.contact-card {
    width: 100%;
    min-height: 76px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.contact-card > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.contact-card h4 {
    margin-top: 8px;
    line-height: 1.2;
    white-space: normal;
}

.contact-buttons {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
}

.contact-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    white-space: nowrap;
}

/* Mobile */
@media (max-width: 700px) {
    .contacts-grid {
        grid-template-columns: 1fr;
    }

    .contact-card {
        min-height: 0;
        flex-direction: row;
        align-items: center;
        padding: 16px;
    }

    .contact-buttons {
        flex: 0 0 auto;
        width: auto;
    }

    .contact-buttons a {
        min-width: 68px;
        padding: 9px 10px;
    }
}

/* Very narrow screens */
@media (max-width: 430px) {
    .contact-card {
        align-items: flex-start;
        gap: 12px;
    }

    .contact-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-buttons a {
        min-width: 72px;
    }
}