/* =========================================================
   BERKSHIRE RUGBY REFEREES
   Main Stylesheet
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {
    --black: #080d0d;
    --dark: #07110e;
    --green: #0d2018;

    --white: #ffffff;
    --off-white: #f6f6f3;

    --red: #ef233c;
    --red-hover: #d91f35;

    --text: #171a19;

    --header-height: 98px;

    --container: 1600px;
}


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

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

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

    color: var(--text);
    background: var(--off-white);

    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
}


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

.container {
    width: min(calc(100% - 100px), var(--container));
    margin-inline: auto;
}


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

.site-header {
    position: relative;

    width: 100%;

    background: #fafaf8;

    z-index: 1000;
}


.header-inner {
    min-height: var(--header-height);

    display: flex;
    align-items: center;
}


/* =========================================================
   LOGO
========================================================= */

.site-logo {
    display: flex;
    align-items: center;

    flex-shrink: 0;
}


.site-logo img {
    width: auto;
    height: 72px;
    object-fit: contain;
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.desktop-nav {
    display: flex;
    align-items: center;

    gap: clamp(25px, 2.5vw, 48px);

    margin-left: auto;
}


.desktop-nav a {
    position: relative;

    display: flex;
    align-items: center;

    gap: 8px;

    font-size: 15px;
    font-weight: 700;

    white-space: nowrap;

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

transition:
    color 0.2s ease,
    opacity 0.2s ease;
}


.desktop-nav a:hover,
.desktop-nav a.active {
    color: #ffffff;
    opacity: 1;
}


.desktop-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: -10px;

    height: 2px;

    background: var(--red);

    transform: scaleX(0);

    transform-origin: left;

    transition: transform 0.2s ease;
}


.desktop-nav a:hover::after,
.desktop-nav a.active::after {
    transform: scaleX(1);
}


.nav-chevron {
    position: relative;

    top: -1px;

    font-size: 16px;
}


/* =========================================================
   MEMBERS AREA
========================================================= */

.header-members {
    align-self: stretch;

    display: flex;
    align-items: center;

    margin-left: clamp(30px, 4vw, 70px);

    padding-left: clamp(25px, 3vw, 42px);

    border-left: 1px solid #d7d7d2;
}


.header-members a {
    display: flex;
    align-items: center;

    gap: 18px;

    font-size: 15px;
    font-weight: 700;

    white-space: nowrap;
}


.header-members a span {
    font-size: 21px;
    font-weight: 400;

    transition: transform 0.2s ease;
}


.header-members a:hover span {
    transform: translate(3px, -3px);
}


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

.hero {
    position: relative;

    width: 100%;

    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;

    overflow: hidden;

    border-radius: 0 0 26px 26px;

    background-image: url("../images/hero.png");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;
}


/* =========================================================
   HERO DARK GRADIENT
========================================================= */

.hero-shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3, 11, 10, 0.97) 0%,
            rgba(3, 11, 10, 0.91) 20%,
            rgba(3, 11, 10, 0.72) 38%,
            rgba(3, 11, 10, 0.30) 56%,
            rgba(3, 11, 10, 0.04) 75%
        ),
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.28) 0%,
            rgba(0, 0, 0, 0) 45%
        );
}


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

.hero-inner {
    position: relative;

    z-index: 2;

    padding-top: 55px;
    padding-bottom: 55px;
}


.hero-content {
    width: min(690px, 55vw);
}


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

.hero-eyebrow {
    display: flex;
    align-items: center;

    gap: 17px;

    margin-bottom: 30px;

    color: var(--white);

    font-family: "Oswald", sans-serif;

    font-size: 13px;
    font-weight: 600;

    letter-spacing: 3px;
}


.hero-line {
    display: block;

    width: 49px;
    height: 3px;

    background: var(--red);
}


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

.hero-title {
    margin: 0;

    color: var(--white);
}


.hero-block {
    display: block;

    font-family: "Oswald", sans-serif;

    font-size: clamp(78px, 7vw, 136px);

    line-height: 0.88;

    font-weight: 700;

    letter-spacing: -3px;

    white-space: nowrap;
}


/*
   This row contains:
   A game.
   A whistle.
*/

.hero-feature {
    display: flex;

    align-items: baseline;

    height: clamp(88px, 7.2vw, 136px);
}


.hero-feature strong {
    font-family: "Oswald", sans-serif;

    font-size: clamp(78px, 7vw, 136px);

    line-height: 0.88;

    font-weight: 700;

    letter-spacing: -3px;
}


.hero-feature em {
    position: relative;

    margin-left: 20px;

    font-family: "Playfair Display", Georgia, serif;

    font-size: clamp(65px, 6vw, 115px);

    line-height: 1;

    font-weight: 500;

    letter-spacing: -5px;
}


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

.hero-description {
    max-width: 560px;

    margin: 24px 0 0;

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

    font-size: 17px;

    line-height: 1.65;
}


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

.hero-actions {
    display: flex;

    gap: 18px;

    margin-top: 26px;
}


.button {
    min-width: 260px;

    min-height: 61px;

    padding: 0 30px;

    display: inline-flex;

    align-items: center;
    justify-content: space-between;

    gap: 35px;

    font-family: "Oswald", sans-serif;

    font-size: 13px;
    font-weight: 600;

    letter-spacing: 2px;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.button:hover {
    transform: translateY(-2px);
}


.button-primary {
    background: var(--red);

    color: var(--white);

    border: 1px solid var(--red);
}


.button-primary:hover {
    background: var(--red-hover);

    border-color: var(--red-hover);
}


.button-outline {
    background: rgba(0, 0, 0, 0.08);

    color: var(--white);

    border: 1px solid rgba(255, 255, 255, 0.8);
}


.button-outline:hover {
    background: var(--white);

    color: var(--black);
}


.button-arrow {
    font-family: Arial, sans-serif;

    font-size: 24px;

    font-weight: 300;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-button {
    display: none;

    width: 44px;
    height: 44px;

    padding: 9px;

    margin-left: auto;

    background: none;

    border: 0;

    cursor: pointer;
}


.mobile-menu-button span {
    display: block;

    width: 100%;
    height: 2px;

    margin: 6px 0;

    background: var(--black);

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}


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


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


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


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

.mobile-nav {
    display: none;

    position: absolute;

    left: 0;
    right: 0;

    top: 100%;

    padding: 20px 30px 30px;

    background: #fafaf8;

    box-shadow:
        0 20px 30px rgba(0, 0, 0, 0.08);
}


.mobile-nav.open {
    display: flex;

    flex-direction: column;
}


.mobile-nav a {
    padding: 16px 0;

    border-bottom: 1px solid #deded9;

    font-size: 16px;
    font-weight: 700;
}


.mobile-members {
    display: flex;

    justify-content: space-between;
}


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

@media (max-width: 1100px) {

    :root {
        --header-height: 82px;
    }


    .container {
        width: calc(100% - 50px);
    }


    .site-logo img {
        height: 55px;
    }


    .desktop-nav,
    .header-members {
        display: none;
    }


    .mobile-menu-button {
        display: block;
    }


    .hero-content {
        width: min(650px, 75vw);
    }


    .hero {
        background-position: 60% center;
    }

}


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

@media (max-width: 700px) {

    :root {
        --header-height: 75px;
    }


    .container {
        width: calc(100% - 36px);
    }


    .site-logo img {
        height: 48px;
    }


    .hero {
        min-height:
            calc(100svh - var(--header-height));

        align-items: center;

        border-radius:
            0 0 18px 18px;

        background-position:
            62% center;
    }


    .hero-shade {
        background:
            linear-gradient(
                90deg,
                rgba(3, 11, 10, 0.94) 0%,
                rgba(3, 11, 10, 0.72) 65%,
                rgba(3, 11, 10, 0.30) 100%
            ),
            linear-gradient(
                0deg,
                rgba(3, 11, 10, 0.92) 0%,
                rgba(3, 11, 10, 0.35) 65%,
                rgba(3, 11, 10, 0.12) 100%
            );
    }


    .hero-inner {
        padding-top: 20px;
        padding-bottom: 45px;
    }


    .hero-content {
        width: 100%;
    }


    .hero-eyebrow {
        margin-bottom: 25px;

        font-size: 10px;

        letter-spacing: 2px;
    }


    .hero-block {
    font-size: clamp(36px, 10.5vw, 52px);
    line-height: 0.9;
    letter-spacing: -1px;
}

.hero-feature {
    height: clamp(44px, 13vw, 60px);
}

.hero-feature strong {
    font-size: clamp(36px, 10.5vw, 52px);
    line-height: 0.9;
    letter-spacing: -1px;
}

.hero-feature em {
    margin-left: 7px;
    font-size: clamp(36px, 10vw, 50px);
    line-height: 0.9;
    letter-spacing: -2px;
}


    .hero-description {
        margin-top: 25px;

        max-width: 440px;

        font-size: 15px;

        line-height: 1.6;
    }


    .hero-actions {
        flex-direction: column;

        gap: 12px;

        margin-top: 24px;
    }


    .button {
        width: 100%;

        min-width: 0;

        min-height: 56px;

        padding: 0 22px;
    }

}


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

@media (max-width: 390px) {

    .hero-block,
    .hero-feature strong {
        font-size: 15.5vw;
    }


    .hero-feature em {
        font-size: 14vw;
    }

}

/* =========================================================
   SECTION 2
   SOCIETY INTRODUCTION
========================================================= */

.society-intro {
    position: relative;

    padding: 70px 0 80px;

    background: #f4f3ef;

    overflow: hidden;
}


/* =========================================================
   SHARED SECTION EYEBROW
========================================================= */

.section-eyebrow {
    display: flex;
    align-items: center;

    gap: 17px;

    margin-bottom: 48px;

    font-family: "Oswald", sans-serif;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 3px;
}


.section-eyebrow.dark {
    color: #161a18;
}


.section-eyebrow.light {
    color: rgba(255,255,255,0.75);
}


.section-line {
    display: block;

    width: 48px;
    height: 3px;

    background: var(--red);
}


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

.intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(320px, 0.75fr);

    gap: clamp(70px, 9vw, 160px);

    align-items: center;
}


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

.intro-heading h2 {
    margin: 0;

    font-family: "Oswald", sans-serif;

    font-size: clamp(72px, 7.5vw, 145px);

    line-height: 0.88;

    font-weight: 700;

    letter-spacing: -4px;

    color: #111614;
}


.intro-heading em {
    font-family: "Playfair Display", Georgia, serif;

    font-weight: 500;

    letter-spacing: -5px;
}


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

.intro-copy {
    max-width: 530px;

    padding-bottom: 7px;
}


.intro-lead {
    margin: 0 0 26px;

    font-size: clamp(21px, 1.55vw, 27px);

    line-height: 1.42;

    font-weight: 600;

    color: #111614;
}


.intro-copy > p:not(.intro-lead) {
    margin: 0;

    font-size: 16px;

    line-height: 1.75;

    color: #5a605d;
}


/* =========================================================
   TEXT LINK
========================================================= */

.text-link {
    display: inline-flex;

    align-items: center;

    gap: 30px;

    margin-top: 35px;

    padding-bottom: 8px;

    border-bottom: 1px solid #1a1e1c;

    font-family: "Oswald", sans-serif;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 2px;
}


.text-link span {
    font-family: Arial, sans-serif;

    font-size: 21px;

    transition: transform 0.2s ease;
}


.text-link:hover span {
    transform: translateX(5px);
}


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

.society-stats {
    display: grid;

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

    margin-top: 100px;

    border-top: 1px solid #cbc9c2;

    border-bottom: 1px solid #cbc9c2;
}


.stat {
    position: relative;

    padding: 38px 35px 34px;
}


.stat:first-child {
    padding-left: 0;
}


.stat:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 0;
    top: 25px;
    bottom: 25px;

    width: 1px;

    background: #cbc9c2;
}


.stat-number {
    display: block;

    font-family: "Oswald", sans-serif;

    font-size: clamp(46px, 4vw, 70px);

    line-height: 1;

    font-weight: 700;

    letter-spacing: -2px;

    color: #111614;
}


.stat-label {
    display: block;

    margin-top: 12px;

    font-family: "Oswald", sans-serif;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 2px;

    color: #707572;
}


/* =========================================================
   FIXTURES SECTION
========================================================= */

.fixtures-section {
    position: relative;

    padding: 115px 0 120px;

    background: #07110e;

    color: #ffffff;

    overflow: hidden;
}


/* Subtle background decoration */

.fixtures-section::after {
    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    right: -280px;
    top: -300px;

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

    border-radius: 50%;

    box-shadow:
        0 0 0 100px rgba(255,255,255,0.018),
        0 0 0 200px rgba(255,255,255,0.012);

    pointer-events: none;
}


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

.fixtures-header {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(300px, 0.7fr);

    gap: 100px;

    align-items: end;

    margin-bottom: 40px;
}


.fixtures-header .section-eyebrow {
    margin-bottom: 35px;
}


.fixtures-header h2 {
    margin: 0;

    font-family: "Oswald", sans-serif;

    font-size: clamp(70px, 7vw, 130px);

    line-height: 0.87;

    font-weight: 700;

    letter-spacing: -4px;
}


.fixtures-header h2 em {
    display: inline-block;

    font-family: "Playfair Display", Georgia, serif;

    font-weight: 500;

    letter-spacing: -5px;
}


.fixtures-intro {
    max-width: 430px;

    padding-bottom: 8px;
}


.fixtures-intro p {
    margin: 0;

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

    font-size: 16px;

    line-height: 1.7;
}


.light-link {
    color: #ffffff;

    border-color: rgba(255,255,255,0.6);
}


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

.fixture-list {
    position: relative;

    z-index: 2;

    border-top: 1px solid rgba(255,255,255,0.18);
}


.fixture-row {
    display: grid;

    grid-template-columns:
        115px
        100px
        minmax(330px, 1fr)
        minmax(190px, 0.4fr)
        60px;

    align-items: center;

    min-height: 115px;

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

    transition:
        background 0.25s ease,
        padding 0.25s ease;
}


.fixture-row:hover {
    background: rgba(255,255,255,0.045);

    padding-left: 15px;
}


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

.fixture-date {
    display: grid;

    grid-template-columns: auto auto;

    width: 75px;
}


.fixture-date strong {
    grid-row: 1 / span 2;

    grid-column: 1;

    margin-right: 8px;

    font-family: "Oswald", sans-serif;

    font-size: 48px;

    line-height: 0.9;

    font-weight: 600;
}


.fixture-date span {
    grid-column: 2;

    font-family: "Oswald", sans-serif;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 1px;

    color: rgba(255,255,255,0.52);
}


.fixture-day {
    align-self: end;
}


/* =========================================================
   TIME
========================================================= */

.fixture-time {
    font-family: "Oswald", sans-serif;

    font-size: 13px;

    letter-spacing: 1px;

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


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

.fixture-match {
    display: flex;

    align-items: center;

    gap: 18px;

    font-family: "Oswald", sans-serif;

    font-size: clamp(20px, 1.8vw, 29px);

    font-weight: 600;
}


.fixture-v {
    font-family: "Playfair Display", Georgia, serif;

    font-size: 23px;

    font-style: italic;

    font-weight: 400;

    color: var(--red);
}


/* =========================================================
   REFEREE
========================================================= */

.fixture-ref span {
    display: block;

    margin-bottom: 7px;

    font-family: "Oswald", sans-serif;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 2px;

    color: rgba(255,255,255,0.42);
}


.fixture-ref strong {
    font-size: 14px;

    font-weight: 600;
}


/* =========================================================
   FIXTURE ARROW
========================================================= */

.fixture-arrow {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    margin-left: auto;

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

    border-radius: 50%;

    font-size: 18px;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


.fixture-arrow:hover {
    background: var(--red);

    border-color: var(--red);

    transform: rotate(5deg);
}


/* =========================================================
   FIXTURE NOTE
========================================================= */

.fixtures-note {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 24px;

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

    font-size: 11px;
}


.fixtures-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--red);
}


/* =========================================================
   SECTION 2 - TABLET
========================================================= */

@media (max-width: 1000px) {

    .society-intro,
    .fixtures-section {
        padding:
            90px 0;
    }


    .intro-grid,
    .fixtures-header {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .intro-copy,
    .fixtures-intro {
        max-width: 650px;
    }


    .society-stats {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .stat {
        border-bottom:
            1px solid #cbc9c2;
    }


    .stat:nth-child(2)::after {
        display: none;
    }


    .fixture-row {
        grid-template-columns:
            90px
            80px
            1fr
            170px
            50px;
    }

}


/* =========================================================
   SECTION 2 - MOBILE
========================================================= */

@media (max-width: 700px) {

    .society-intro {
        padding:
            75px 0 70px;
    }


    .section-eyebrow {
        margin-bottom: 32px;

        font-size: 10px;

        letter-spacing: 2px;
    }


    .section-line {
        width: 30px;
    }


    .intro-grid {
        gap: 38px;
    }


    .intro-heading h2 {
        font-size: clamp(54px, 17vw, 82px);

        letter-spacing: -2px;
    }


    .intro-lead {
        font-size: 20px;
    }


    .society-stats {
        margin-top: 65px;
    }


    .stat {
        padding:
            25px 15px;
    }


    .stat:first-child {
        padding-left: 15px;
    }


    .stat-number {
        font-size: 42px;
    }


    .stat-label {
        font-size: 9px;

        letter-spacing: 1.3px;
    }


    /* FIXTURES */

    .fixtures-section {
        padding:
            75px 0 80px;
    }


    .fixtures-header {
        gap: 35px;

        margin-bottom: 50px;
    }


    .fixtures-header h2 {
        font-size: clamp(54px, 17vw, 82px);

        letter-spacing: -2px;
    }


    .fixture-row {
        position: relative;

        grid-template-columns:
            70px 1fr;

        gap: 15px 20px;

        padding:
            25px 55px 25px 0;

        min-height: 0;
    }


    .fixture-row:hover {
        padding-left: 0;
    }


    .fixture-date {
        grid-row:
            1 / span 3;
    }


    .fixture-date strong {
        font-size: 40px;
    }


    .fixture-time {
        grid-column: 2;
    }


    .fixture-match {
        grid-column: 2;

        flex-wrap: wrap;

        gap: 7px;

        font-size: 20px;
    }


    .fixture-ref {
        grid-column: 2;
    }


    .fixture-arrow {
        position: absolute;

        right: 0;
        top: 50%;

        width: 38px;
        height: 38px;

        transform:
            translateY(-50%);
    }


    .fixture-arrow:hover {
        transform:
            translateY(-50%)
            rotate(5deg);
    }

}

/* =========================================================
   MEET THE REFEREES
========================================================= */

.referees-section {
    position: relative;

    padding: 120px 0 55px;

    background: #f4f3ef;

    overflow: hidden;
}


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

.referees-heading-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(320px, 0.55fr);

    gap: clamp(70px, 10vw, 180px);

    align-items: end;

    margin-bottom: 90px;
}


.referees-heading-grid .section-eyebrow {
    margin-bottom: 38px;
}


.referees-title {
    margin: 0;

    font-family: "Oswald", sans-serif;

    font-size: clamp(70px, 7vw, 132px);

    line-height: 0.86;

    font-weight: 700;

    letter-spacing: -4px;

    color: #111614;
}


.referees-title em {
    font-family: "Playfair Display", Georgia, serif;

    font-weight: 500;

    letter-spacing: -6px;
}


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

.referees-heading-copy {
    max-width: 470px;

    padding-bottom: 5px;
}


.referees-lead {
    margin: 0 0 28px;

    font-size: clamp(22px, 1.7vw, 29px);

    line-height: 1.35;

    font-weight: 700;

    color: #111614;
}


.referees-heading-copy > p:not(.referees-lead) {
    margin: 0;

    color: #626764;

    font-size: 16px;

    line-height: 1.75;
}


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

.referee-grid {
    display: grid;

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

    gap: clamp(22px, 2.5vw, 42px);

    align-items: start;
}


.referee-card {
    display: block;
}


.referee-card-offset {
    margin-top: 75px;
}


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

.referee-image {
    position: relative;

    aspect-ratio: 0.76;

    overflow: hidden;

    background: #17201c;
}


/*
    These backgrounds are temporary.
    Later we'll replace them with actual photographs.
*/

.referee-image-one {
    background:
        linear-gradient(
            145deg,
            #25342d,
            #0b1511
        );
}


.referee-image-two {
    background:
        linear-gradient(
            145deg,
            #1c2923,
            #07110e
        );
}


.referee-image-three {
    background:
        linear-gradient(
            145deg,
            #29362f,
            #0d1713
        );
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.referee-placeholder {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    opacity: 0.35;

    transition:
        transform 0.45s ease,
        opacity 0.45s ease;
}


.referee-placeholder::before {
    content: "";

    position: absolute;

    width: 45%;
    aspect-ratio: 1;

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

    border-radius: 50%;
}


.referee-placeholder span {
    position: relative;

    z-index: 2;

    font-family: "Oswald", sans-serif;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 3px;

    color: rgba(255,255,255,0.65);
}


.referee-card:hover .referee-placeholder {
    transform: scale(1.04);

    opacity: 0.48;
}


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

.referee-card-number {
    position: absolute;

    left: 25px;
    top: 25px;

    font-family: "Oswald", sans-serif;

    font-size: 11px;

    letter-spacing: 2px;

    color: rgba(255,255,255,0.5);
}


/* =========================================================
   CARD ARROW
========================================================= */

.referee-card-arrow {
    position: absolute;

    right: 24px;
    bottom: 24px;

    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

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

    border-radius: 50%;

    color: #ffffff;

    font-size: 19px;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


.referee-card:hover .referee-card-arrow {
    background: var(--red);

    border-color: var(--red);

    transform: rotate(6deg);
}


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

.referee-info {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding: 23px 0 0;
}


.referee-info h3 {
    margin: 0 0 7px;

    font-family: "Oswald", sans-serif;

    font-size: clamp(25px, 2vw, 34px);

    line-height: 1;

    font-weight: 600;

    letter-spacing: -0.5px;

    color: #111614;
}


.referee-role {
    font-family: "Oswald", sans-serif;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 2px;

    color: #858985;
}


.referee-level {
    padding-top: 4px;

    font-family: "Oswald", sans-serif;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 1.5px;

    color: var(--red);

    white-space: nowrap;
}


/* =========================================================
   BOTTOM MESSAGE
========================================================= */

.referees-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-top: 105px;

    padding-top: 30px;

    border-top: 1px solid #cbc9c2;
}


.referees-bottom p {
    margin: 0;

    font-family: "Playfair Display", Georgia, serif;

    font-size: clamp(26px, 2.3vw, 38px);

    font-style: italic;
}


.referees-bottom a {
    display: flex;

    align-items: center;

    gap: 28px;

    font-family: "Oswald", sans-serif;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 2px;
}


.referees-bottom a span {
    font-family: Arial, sans-serif;

    font-size: 22px;

    transition: transform 0.2s ease;
}


.referees-bottom a:hover span {
    transform: translateX(5px);
}


/* =========================================================
   REFEREES - TABLET
========================================================= */

@media (max-width: 1000px) {

    .referees-section {
        padding: 90px 0;
    }


    .referees-heading-grid {
        grid-template-columns: 1fr;

        gap: 45px;

        margin-bottom: 70px;
    }


    .referees-heading-copy {
        max-width: 650px;
    }


    .referee-card-offset {
        margin-top: 45px;
    }

}


/* =========================================================
   REFEREES - MOBILE
========================================================= */

@media (max-width: 700px) {

    .referees-section {
        padding: 75px 0;
    }


    .referees-heading-grid {
        gap: 38px;

        margin-bottom: 55px;
    }


    .referees-title {
        font-size: clamp(54px, 17vw, 82px);

        letter-spacing: -2px;
    }


    .referee-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .referee-card-offset {
        margin-top: 0;
    }


    .referee-image {
        aspect-ratio: 0.88;
    }


    .referee-info h3 {
        font-size: 28px;
    }


    .referees-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 25px;

        margin-top: 70px;
    }

}

/* =========================================================
   REFEREE PHOTOGRAPHS
========================================================= */

.referee-photo {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform 0.6s ease,
        filter 0.6s ease;
}


/* Individual crop adjustments */

.referee-image-one .referee-photo {
    object-position: 5% center;
}

.referee-image-two .referee-photo {
    object-position: 48% center;
}

.referee-image-three .referee-photo {
    object-position: 50% center;
}


/* Subtle dark overlay so the card controls remain visible */

.referee-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.08) 40%,
            rgba(0,0,0,0.42) 100%
        );

    pointer-events: none;

    z-index: 1;
}


/* Keep numbers and arrows above photograph */

.referee-card-number,
.referee-card-arrow {
    z-index: 2;
}


/* Photo hover */

.referee-card:hover .referee-photo {
    transform: scale(1.035);

    filter: brightness(0.9);
}

/* =========================================
   BECOME A REFEREE
========================================= */

.become-referee {
    background: #07140d;
    color: #fff;
    padding: 110px 0;
    position: relative;
    overflow: hidden;
}

/* Large subtle circle graphic */
.become-referee::after {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 50%;
    right: -220px;
    top: -260px;
    pointer-events: none;
}

.become-referee-inner {
    width: calc(100% - 106px);
    max-width: 1430px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 100px;
    align-items: center;

    position: relative;
    z-index: 2;
}

/* EYEBROW */

.become-referee .section-eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 42px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #fff;
}

.become-referee .section-eyebrow > span {
    display: block;
    width: 50px;
    height: 3px;
    background: #f5233f;
}

/* MAIN HEADING */

.become-referee-heading h2 {
    margin: 0;

    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: clamp(64px, 7vw, 112px);
    line-height: 0.84;
    letter-spacing: -4px;
    font-weight: 900;
    text-transform: uppercase;
}

.become-referee-heading h2 em {
    display: inline-block;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.82em;
    line-height: 0.95;

    font-weight: 400;
    text-transform: none;
    letter-spacing: -5px;
}

/* RIGHT CONTENT */

.become-referee-content {
    max-width: 500px;
}

.become-referee-content h3 {
    margin: 0 0 28px;

    font-size: 34px;
    line-height: 1.08;
    font-weight: 700;
}

.become-referee-content > p {
    margin: 0 0 38px;

    color: rgba(255,255,255,0.68);
    font-size: 18px;
    line-height: 1.65;
}

/* BENEFITS */

.become-referee-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;

    padding: 24px 0;
    margin-bottom: 34px;

    border-top: 1px solid rgba(255,255,255,0.18);
    border-bottom: 1px solid rgba(255,255,255,0.18);
}

.become-referee-benefits span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.78);
}

/* CTA */

.become-referee-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;

    min-width: 280px;
    padding: 0 13px 14px;

    color: #fff;
    text-decoration: none;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;

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

    transition: all 0.25s ease;
}

.become-referee-link span {
    font-size: 22px;
    transition: transform 0.25s ease;
}

.become-referee-link:hover {
    color: #f5233f;
    border-color: #f5233f;
}

.become-referee-link:hover span {
    transform: translateX(6px);
}


/* =========================================
   BECOME A REFEREE - MOBILE
========================================= */

@media (max-width: 900px) {

    .become-referee {
        padding: 75px 0;
    }

    .become-referee-inner {
        width: calc(100% - 40px);
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .become-referee-heading h2 {
        font-size: clamp(52px, 14vw, 82px);
        letter-spacing: -3px;
    }

    .become-referee-content {
        max-width: 600px;
    }

}

@media (max-width: 520px) {

    .become-referee-heading h2 {
        font-size: 49px;
        line-height: 0.88;
        letter-spacing: -2px;
    }

    .become-referee-heading h2 em {
        letter-spacing: -2px;
    }

    .become-referee-content h3 {
        font-size: 28px;
    }

    .become-referee-content > p {
        font-size: 16px;
    }

    .become-referee-benefits {
        flex-direction: column;
        gap: 12px;
    }

}
/* =========================================================
   SITE FOOTER
========================================================= */

.site-footer {
    background: #0C2116;
    color: #fff;
    padding: 85px 0 30px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.site-footer-inner {
    width: calc(100% - 110px);
    max-width: 1425px;
    margin: 0 auto;
}


/* TOP AREA */

.footer-top {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 100px;
    padding-bottom: 70px;
}


/* BRAND */

.footer-eyebrow {
    color: #f5233f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    margin-bottom: 22px;
}

.footer-brand h2 {
    margin: 0 0 25px;

    font-size: clamp(42px, 4vw, 66px);
    line-height: 0.92;
    font-weight: 800;
    letter-spacing: -2px;
}

.footer-brand h2 span {
    color: rgba(255,255,255,0.35);
}

.footer-brand p {
    max-width: 520px;
    margin: 0;

    color: rgba(255,255,255,0.55);
    font-size: 16px;
    line-height: 1.7;
}


/* NAVIGATION */

.footer-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 70px;
}

.footer-nav-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-nav-column > span {
    color: rgba(255,255,255,0.35);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.5px;
    margin-bottom: 22px;
}

.footer-nav-column a {
    color: #fff;
    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    padding: 7px 0;

    transition: color 0.2s ease,
                transform 0.2s ease;
}

.footer-nav-column a:hover {
    color: #f5233f;
    transform: translateX(4px);
}


/* BOTTOM BAR */

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-top: 25px;
    border-top: 1px solid rgba(255,255,255,0.12);
}

.footer-bottom p {
    margin: 0;

    color: rgba(255,255,255,0.4);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* MOBILE */

@media (max-width: 900px) {

    .site-footer {
        padding: 65px 0 25px;
    }

    .site-footer-inner {
        width: calc(100% - 40px);
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 55px;
        padding-bottom: 50px;
    }

    .footer-nav {
        gap: 35px;
    }

    .footer-brand h2 {
        font-size: 42px;
    }
}

@media (max-width: 550px) {

    .footer-nav {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* =========================================================
   NEW DARK HEADER DESIGN
   ========================================================= */

.site-header {
    background: #071b12;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.header-inner {
    min-height: 100px;
}

/* Main navigation */
.desktop-nav a {
    color: rgba(255,255,255,0.72);
}

.desktop-nav a:hover,
.desktop-nav a.active {
    color: #ffffff;
}

/* Members area */
.header-members a {
    color: #ffffff;
    border-color: rgba(255,255,255,0.25);
}

.header-members a:hover {
    color: #ff234f;
    border-color: #ff234f;
}

/* Hamburger */
.mobile-menu-button span {
    background: #ffffff;
}

/* Mobile dropdown */
.mobile-nav {
    background: #071b12;
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 30px rgba(0,0,0,0.25);
}

.mobile-nav a {
    color: #ffffff;
    border-bottom-color: rgba(255,255,255,0.10);
}

.mobile-nav a:hover {
    color: #ff234f;
}

/* =========================================================
   FULL FIXTURES PAGE
========================================================= */

.fixtures-page {
    background: #071b12;
    color: #ffffff;
    min-height: 100vh;
    padding: 90px 0 120px;
}

.fixtures-page-inner {
    width: min(1420px, calc(100% - 80px));
    margin: 0 auto;
}


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

.fixtures-page-header {
    max-width: 900px;
    margin-bottom: 80px;
}

.fixtures-page-header .section-eyebrow {
    margin-bottom: 28px;
}

.fixtures-page-header h1 {
    margin: 0 0 30px;

    font-family: "Oswald", sans-serif;
    font-size: clamp(64px, 8vw, 120px);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.035em;
    text-transform: uppercase;

    color: #ffffff;
}

.fixtures-page-header h1 em {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: -0.04em;
}

.fixtures-page-header p {
    max-width: 720px;
    margin: 0 0 12px;

    font-size: 18px;
    line-height: 1.65;

    color: rgba(255,255,255,0.65);
}

.fixtures-page-header strong {
    color: #ffffff;
}


/* =========================================================
   FIXTURE DATE GROUP
========================================================= */

.fixture-date-group {
    margin-bottom: 75px;
}

.fixture-date-heading {
    margin: 0;
    padding: 0 0 24px;

    font-family: "Oswald", sans-serif;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;

    color: #ffffff;

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


/* =========================================================
   INDIVIDUAL FIXTURE
========================================================= */

.full-fixture-row {
    display: grid;

    grid-template-columns:
        130px
        minmax(350px, 1.3fr)
        minmax(260px, 0.8fr);

    gap: 45px;
    align-items: center;

    min-height: 135px;

    padding: 28px 20px;

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

    transition:
        background 0.25s ease,
        padding 0.25s ease;
}

.full-fixture-row:hover {
    background: rgba(255,255,255,0.035);
    padding-left: 30px;
    padding-right: 30px;
}


/* =========================================================
   KICK OFF
========================================================= */

.full-fixture-time span {
    display: block;

    margin-bottom: 7px;

    font-family: "Oswald", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.20em;

    color: rgba(255,255,255,0.45);
}

.full-fixture-time strong {
    display: block;

    font-family: "Oswald", sans-serif;
    font-size: 30px;
    font-weight: 600;

    color: #ffffff;
}


/* =========================================================
   TEAMS
========================================================= */

.full-fixture-match strong {
    display: block;

    font-family: "Oswald", sans-serif;
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 600;
    line-height: 1.2;

    color: #ffffff;
}

.full-fixture-match strong span {
    margin: 0 10px;

    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
    font-weight: 400;

    color: #ff234f;
}


/* =========================================================
   COMPETITION
========================================================= */

.full-fixture-competition {
    margin-top: 9px;

    font-size: 13px;
    line-height: 1.4;

    color: rgba(255,255,255,0.45);
}


/* =========================================================
   REFEREE
========================================================= */

.full-fixture-ref span {
    display: block;

    margin-bottom: 7px;

    font-family: "Oswald", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;

    color: rgba(255,255,255,0.4);
}

.full-fixture-ref strong {
    font-size: 16px;
    font-weight: 600;

    color: #ffffff;
}


/* TBC / unappointed fixture */

.full-fixture-ref strong.tbc {
    color: #ff234f;
}


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

@media (max-width: 1000px) {

    .fixtures-page {
        padding: 70px 0 90px;
    }

    .fixtures-page-inner {
        width: min(100% - 50px, 1420px);
    }

    .full-fixture-row {
        grid-template-columns:
            100px
            minmax(0, 1fr)
            190px;

        gap: 25px;
    }

}


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

@media (max-width: 700px) {

    .fixtures-page {
        padding: 55px 0 70px;
    }

    .fixtures-page-inner {
        width: calc(100% - 36px);
    }

    .fixtures-page-header {
        margin-bottom: 55px;
    }

    .fixtures-page-header h1 {
        font-size: clamp(55px, 18vw, 82px);
    }

    .fixtures-page-header p {
        font-size: 16px;
    }

    .fixture-date-group {
        margin-bottom: 55px;
    }

    .fixture-date-heading {
        font-size: 23px;
        padding-bottom: 18px;
    }

    .full-fixture-row {
        grid-template-columns: 72px 1fr;
        gap: 10px 18px;

        min-height: auto;

        padding: 24px 0;
    }

    .full-fixture-row:hover {
        padding-left: 0;
        padding-right: 0;
    }

    .full-fixture-time {
        grid-column: 1;
        grid-row: 1;
    }

    .full-fixture-match {
        grid-column: 2;
        grid-row: 1;
    }

    .full-fixture-ref {
        grid-column: 2;
        grid-row: 2;

        padding-top: 10px;
    }

    .full-fixture-time strong {
        font-size: 24px;
    }

    .full-fixture-match strong {
        font-size: 21px;
    }

}

/* =========================================================
   FULL FIXTURES PAGE
========================================================= */

.fixtures-page-hero,
.full-fixtures {
    background: #06150f;
    color: #ffffff;
}

.fixtures-page-hero {
    padding: 90px 0 55px;
}

.fixtures-page-inner {
    width: calc(100% - 100px);
    max-width: 1430px;
    margin: 0 auto;
}


/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.fixtures-page-hero .section-eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 35px;

    color: rgba(255,255,255,.72);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.fixtures-page-hero .section-eyebrow span {
    display: block;
    width: 50px;
    height: 3px;
    background: #ff234f;
}

.fixtures-page-hero h1 {
    margin: 0;
    color: #ffffff;

    font-size: clamp(58px, 7vw, 110px);
    line-height: .82;
    font-weight: 900;
    letter-spacing: -3px;
    text-transform: uppercase;
}

.fixtures-page-hero h1 em {
    display: block;
    margin-top: 12px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: .88em;
    font-weight: 400;
    line-height: .9;
    letter-spacing: -5px;
    text-transform: lowercase;
}

.fixtures-page-intro {
    max-width: 680px;
    margin-top: 45px;

    color: rgba(255,255,255,.65);
    font-size: 17px;
    line-height: 1.65;
}

.fixtures-page-intro p {
    margin: 0 0 8px;
}

.fixtures-page-intro strong {
    color: #ffffff;
}


/* ---------------------------------------------------------
   FIXTURE LIST
--------------------------------------------------------- */

.full-fixtures {
    padding: 20px 0 100px;
}

.fixture-date-group {
    margin-bottom: 65px;
}

.fixture-date-heading {
    display: flex;
    align-items: center;
    gap: 22px;

    padding: 25px 0 20px;
    border-bottom: 1px solid rgba(255,255,255,.18);
}

.fixture-date-line {
    display: block;
    width: 45px;
    height: 2px;
    flex: 0 0 auto;

    background: #ff234f;
}

.fixture-date-heading h2 {
    margin: 0;

    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   INDIVIDUAL FIXTURE
--------------------------------------------------------- */

.full-fixture-row {
    position: relative;

    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 270px;
    align-items: center;
    gap: 35px;

    min-height: 125px;
    padding: 24px 10px;

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

    transition:
        background .2s ease,
        padding .2s ease;
}

.full-fixture-row:hover {
    background: rgba(255,255,255,.025);
    padding-left: 20px;
    padding-right: 20px;
}


/* KICK-OFF */

.full-fixture-time span,
.full-fixture-ref span {
    display: block;
    margin-bottom: 7px;

    color: rgba(255,255,255,.42);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.full-fixture-time strong {
    color: #ffffff;
    font-size: 24px;
    font-weight: 800;
}


/* TEAMS */

.full-fixture-teams {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    color: #ffffff;
    font-size: clamp(21px, 2vw, 29px);
    line-height: 1.2;
}

.full-fixture-teams strong {
    font-weight: 800;
}

.fixture-v {
    color: #ff234f;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: .8em;
}

.full-fixture-competition {
    margin-top: 9px;

    color: rgba(255,255,255,.48);
    font-size: 13px;
    line-height: 1.4;
}


/* REFEREE */

.full-fixture-ref strong {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}


/* ---------------------------------------------------------
   TBC / REFEREE NEEDED
--------------------------------------------------------- */

.full-fixture-row.referee-needed::before {
    content: "";
    position: absolute;
    left: 0;
    top: 28px;
    bottom: 28px;

    width: 3px;
    background: #ff234f;
}

.full-fixture-ref strong.tbc {
    color: #ff234f;
}

.full-fixture-row.referee-needed .full-fixture-ref span {
    color: rgba(255,35,79,.7);
}


/* ---------------------------------------------------------
   NO FIXTURES
--------------------------------------------------------- */

.fixtures-empty {
    padding: 80px 0 120px;
    color: #ffffff;
}

.fixtures-empty h2 {
    margin-bottom: 12px;
    font-size: 32px;
}

.fixtures-empty p {
    color: rgba(255,255,255,.6);
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 900px) {

    .fixtures-page-inner {
        width: calc(100% - 40px);
    }

    .fixtures-page-hero {
        padding: 65px 0 40px;
    }

    .fixtures-page-hero h1 {
        font-size: clamp(50px, 15vw, 80px);
        letter-spacing: -2px;
    }

    .fixtures-page-hero h1 em {
        letter-spacing: -3px;
    }

    .full-fixture-row {
        grid-template-columns: 90px minmax(0, 1fr);
        gap: 20px;

        padding: 25px 0;
    }

    .full-fixture-ref {
        grid-column: 2;
    }

    .full-fixture-time strong {
        font-size: 20px;
    }

    .full-fixture-teams {
        font-size: 20px;
    }

}


@media (max-width: 600px) {

    .fixtures-page-inner {
        width: calc(100% - 30px);
    }

    .fixtures-page-hero {
        padding: 50px 0 30px;
    }

    .fixtures-page-hero h1 {
        font-size: 50px;
        line-height: .9;
    }

    .fixtures-page-intro {
        margin-top: 30px;
        font-size: 15px;
    }

    .fixture-date-group {
        margin-bottom: 45px;
    }

    .fixture-date-heading {
        gap: 14px;
    }

    .fixture-date-line {
        width: 30px;
    }

    .fixture-date-heading h2 {
        font-size: 16px;
        letter-spacing: 1.5px;
    }

    .full-fixture-row {
        display: block;
        min-height: 0;
        padding: 25px 5px 25px 15px;
    }

    .full-fixture-time {
        margin-bottom: 14px;
    }

    .full-fixture-time span {
        display: inline;
        margin-right: 7px;
    }

    .full-fixture-time strong {
        font-size: 17px;
    }

    .full-fixture-teams {
        display: block;
        font-size: 20px;
    }

    .fixture-v {
        display: inline-block;
        margin: 0 5px;
    }

    .full-fixture-competition {
        margin-top: 8px;
    }

    .full-fixture-ref {
        margin-top: 18px;
    }

    .full-fixture-row.referee-needed::before {
        top: 22px;
        bottom: 22px;
    }

}

/* ==========================================================
   MEET THE REFS PAGE
   ========================================================== */

.refs-page-inner {
    width: min(1400px, calc(100% - 80px));
    margin: 0 auto;
}


/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */

.refs-hero {
    background: #071b12;
    color: #ffffff;
    padding: 90px 0 100px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.refs-hero .section-eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 65px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;

    color: rgba(255,255,255,0.7);
}

.refs-hero .section-eyebrow span {
    display: block;
    width: 50px;
    height: 3px;
    background: #ff234f;
}


.refs-hero-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 100px;
    align-items: end;
}


.refs-hero-title h1 {
    margin: 0;

    font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(72px, 9vw, 145px);
    font-weight: 900;
    line-height: 0.78;
    letter-spacing: -6px;
    text-transform: uppercase;
}


.refs-hero-title h1 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.92em;
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: -6px;
    line-height: 0.95;
}


.refs-hero-copy {
    max-width: 500px;
    padding-bottom: 10px;

    font-size: 18px;
    line-height: 1.7;

    color: rgba(255,255,255,0.68);
}

.refs-hero-copy p {
    margin: 0 0 20px;
}

.refs-hero-copy p:first-child {
    color: #ffffff;
    font-size: 22px;
    font-weight: 600;
}


/* ----------------------------------------------------------
   REFEREE LIST
   ---------------------------------------------------------- */

.refs-list {
    background: #071b12;
    padding: 0 0 120px;
}


.refs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-left: 1px solid rgba(255,255,255,0.12);
}


.ref-card {
    position: relative;
    display: block;

    color: #ffffff;
    text-decoration: none;

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

    overflow: hidden;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.ref-card-image {
    position: relative;
    aspect-ratio: 4 / 5;

    background:
        linear-gradient(
            135deg,
            #10271d,
            #0a2016
        );

    overflow: hidden;
}


.ref-image-placeholder {
    width: 100%;
    height: 100%;

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

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(255,255,255,0.07),
            transparent 35%
        );

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

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
}


.ref-card-number {
    position: absolute;
    left: 25px;
    top: 25px;

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

    width: 48px;
    height: 48px;

    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;

    color: #ffffff;
}


.ref-card-info {
    min-height: 210px;
    padding: 30px;

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

    background: #071b12;

    transition: background 0.3s ease;
}


.ref-level {
    display: block;
    margin-bottom: 15px;

    color: #ff234f;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
}


.ref-card h2 {
    margin: 0;

    color: #ffffff;

    font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(35px, 3.3vw, 55px);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -2px;
    text-transform: uppercase;
}


.ref-card-arrow {
    flex: 0 0 auto;

    width: 52px;
    height: 52px;

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

    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 50%;

    color: #ffffff;

    font-size: 24px;
    font-weight: 300;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


/* Card hover */

.ref-card:hover .ref-card-info {
    background: #0d291d;
}

.ref-card:hover .ref-card-arrow {
    background: #ff234f;
    border-color: #ff234f;
    color: #ffffff;
    transform: rotate(45deg);
}


/* ----------------------------------------------------------
   BECOME A REFEREE CARD
   ---------------------------------------------------------- */

.ref-card-join {
    min-height: 100%;
    background: #ff234f;

    display: flex;
    align-items: stretch;
}


.ref-join-inner {
    width: 100%;
    min-height: 100%;

    padding: 55px 45px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}


.ref-card-join .ref-level {
    color: rgba(255,255,255,0.7);
}


.ref-card-join h2 {
    font-size: clamp(42px, 4vw, 68px);
    margin-bottom: 30px;
}


.ref-card-join p {
    max-width: 340px;

    margin: 0 0 45px;

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

    font-size: 17px;
    line-height: 1.6;
}


.ref-join-link {
    padding-top: 22px;

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

    display: flex;
    justify-content: space-between;
    align-items: center;

    color: #ffffff;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}


.ref-join-link span {
    font-size: 26px;
    transition: transform 0.25s ease;
}


.ref-card-join:hover .ref-join-link span {
    transform: translateX(8px);
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width: 1050px) {

    .refs-page-inner {
        width: min(100% - 50px, 1400px);
    }

    .refs-hero-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .refs-hero-copy {
        max-width: 650px;
    }

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

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 650px) {

    .refs-page-inner {
        width: calc(100% - 30px);
    }

    .refs-hero {
        padding: 55px 0 65px;
    }

    .refs-hero .section-eyebrow {
        margin-bottom: 45px;
    }

    .refs-hero-title h1 {
        font-size: 64px;
        letter-spacing: -4px;
    }

    .refs-hero-title h1 em {
        letter-spacing: -4px;
    }

    .refs-hero-copy {
        font-size: 16px;
    }

    .refs-grid {
        grid-template-columns: 1fr;
    }

    .ref-card-info {
        min-height: 170px;
        padding: 25px;
    }

    .ref-card h2 {
        font-size: 42px;
    }

    .ref-join-inner {
        min-height: 480px;
        padding: 40px 30px;
    }

}

/* =========================================
   REFEREE CARD PHOTOS
========================================= */

.ref-card-image {
    position: relative;
    overflow: hidden;
}

.ref-card-photo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 25%;
}

/* =========================================
   REFEREE CARD PHOTOS
========================================= */

.ref-card-image {
    position: relative;
    overflow: hidden;
}

.ref-card-photo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Dave is positioned on the left of his photo */
/* Dave's wide action photo */
.ref-card-image--dave {
    background: #071d14;
}

.ref-card-image--dave .ref-card-photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

/* ==========================================================
   MEET THE REFS - PHOTO CROPPING
   ========================================================== */

.ref-card-image {
    position: relative;
    width: 100%;
    height: 430px;
    overflow: hidden;
    background: #061d14;
}

.ref-card-photo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Dave - wide action photograph */
.ref-card-image--dave .ref-card-photo {
    object-position: 18% center;
}

/* Bruce - portrait photograph */
.ref-card-image--bruce .ref-card-photo {
    object-position: center 30%;
}

/* Mike - action photograph */
.ref-card-image--mike .ref-card-photo {
    object-position: center 35%;
}

/* Nick */
.ref-card-image--nick .ref-card-photo {
    object-position: center 25%;
}

/* =========================================================
   REFEREE PROFILE PAGE
   ========================================================= */

.referee-profile {
    background: #061f16;
    color: #ffffff;
    min-height: 100vh;
}


/* ---------------------------------------------------------
   BACK LINK
   --------------------------------------------------------- */

.referee-back {
    max-width: 1450px;
    margin: 0 auto;
    padding: 35px 42px 0;
}

.referee-back a {
    color: #a9b5af;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.referee-back a:hover {
    color: #ff2851;
}


/* ---------------------------------------------------------
   PROFILE HERO
   --------------------------------------------------------- */

.referee-hero {
    max-width: 1450px;
    margin: 0 auto;
    padding: 70px 42px 90px;

    display: grid;
    grid-template-columns: 1fr 0.85fr;
    gap: 90px;
    align-items: center;
}


/* HERO TEXT */

.referee-hero-content {
    max-width: 680px;
}

.referee-eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 40px;

    color: #c5cec9;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.referee-eyebrow::before {
    content: "";
    width: 52px;
    height: 3px;
    background: #ff2851;
}


/* LEVEL */

.referee-level {
    display: block;
    margin-bottom: 18px;

    color: #ff2851;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
}


/* NAME */

.referee-hero h1 {
    margin: 0 0 25px;

    color: #ffffff;
    font-size: clamp(58px, 7vw, 108px);
    line-height: 0.86;
    letter-spacing: -4px;
    text-transform: uppercase;
}


/* ROLE */

.referee-role {
    margin: 0;

    color: #aab6b0;
    font-size: 20px;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   HERO IMAGE
   --------------------------------------------------------- */

.referee-hero-image {
    position: relative;
    height: 620px;
    overflow: hidden;
    background: #0b2b20;
}

.referee-hero-image img {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;
    object-position: center;
}


/* NUMBER BADGE */

.referee-number {
    position: absolute;
    top: 28px;
    left: 28px;

    width: 54px;
    height: 54px;

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

    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 50%;

    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}


/* ---------------------------------------------------------
   ABOUT SECTION
   --------------------------------------------------------- */

.referee-about {
    border-top: 1px solid rgba(255,255,255,0.12);
    background: #f4f4f0;
    color: #172019;
}

.referee-about-inner {
    max-width: 1450px;
    margin: 0 auto;
    padding: 110px 42px 120px;

    display: grid;
    grid-template-columns: 0.55fr 1fr;
    gap: 110px;
}


/* ABOUT LEFT COLUMN */

.referee-about-title {
    position: sticky;
    top: 40px;
    align-self: start;
}

.referee-about-number {
    display: block;
    margin-bottom: 40px;

    color: #ff2851;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
}

.referee-about-label {
    display: block;
    margin-bottom: 18px;

    color: #536058;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.referee-about-title h2 {
    margin: 0;

    color: #10241b;
    font-size: clamp(46px, 5vw, 78px);
    line-height: 0.95;
    letter-spacing: -3px;
    text-transform: uppercase;
}

.referee-about-title h2 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: -2px;
}


/* ABOUT COPY */

.referee-about-copy {
    max-width: 820px;
}

.referee-about-copy p {
    margin: 0 0 28px;

    color: #39443e;
    font-size: 18px;
    line-height: 1.8;
}


/* QUOTE */

.referee-quote {
    margin: 55px 0;
    padding: 10px 0 10px 34px;

    border-left: 4px solid #ff2851;

    color: #10241b;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    line-height: 1.45;
    font-style: italic;
}


/* ---------------------------------------------------------
   BECOME A REFEREE CTA
   --------------------------------------------------------- */

.referee-cta {
    background: #ff2851;
    color: #ffffff;
}

.referee-cta-inner {
    max-width: 1450px;
    margin: 0 auto;
    padding: 90px 42px;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 50px;
}

.referee-cta-label {
    display: block;
    margin-bottom: 22px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.referee-cta h2 {
    margin: 0;

    font-size: clamp(48px, 6vw, 90px);
    line-height: 0.9;
    letter-spacing: -3px;
    text-transform: uppercase;
}

.referee-cta a {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 74px;
    height: 74px;

    border: 1px solid rgba(255,255,255,0.65);
    border-radius: 50%;

    color: #ffffff;
    font-size: 30px;
    text-decoration: none;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.referee-cta a:hover {
    background: #ffffff;
    color: #ff2851;
    transform: translateX(4px);
}


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

@media (max-width: 1000px) {

    .referee-hero {
        grid-template-columns: 1fr 1fr;
        gap: 45px;
        padding-top: 55px;
    }

    .referee-hero-image {
        height: 520px;
    }

    .referee-about-inner {
        grid-template-columns: 0.7fr 1fr;
        gap: 60px;
    }

}


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

@media (max-width: 760px) {

    .referee-back {
        padding: 25px 22px 0;
    }

    .referee-hero {
        grid-template-columns: 1fr;
        gap: 45px;
        padding: 50px 22px 65px;
    }

    .referee-eyebrow {
        margin-bottom: 30px;
    }

    .referee-hero h1 {
        font-size: 58px;
        letter-spacing: -2px;
    }

    .referee-hero-image {
        height: 500px;
    }


    /* ABOUT */

    .referee-about-inner {
        grid-template-columns: 1fr;
        gap: 55px;
        padding: 75px 22px 85px;
    }

    .referee-about-title {
        position: static;
    }

    .referee-about-title h2 {
        font-size: 50px;
    }

    .referee-about-copy p {
        font-size: 17px;
        line-height: 1.7;
    }

    .referee-quote {
        margin: 40px 0;
        padding-left: 22px;
        font-size: 25px;
    }


    /* CTA */

    .referee-cta-inner {
        padding: 70px 22px;
        align-items: center;
    }

    .referee-cta h2 {
        font-size: 48px;
    }

    .referee-cta a {
        width: 60px;
        height: 60px;
    }

}

/* =========================================================
   INDIVIDUAL REFEREE PROFILE
========================================================= */

.ref-profile {
    background: #031d13;
    color: #ffffff;
    min-height: 100vh;
}

/* ---------------------------------------------------------
   SHARED INNER WIDTH
--------------------------------------------------------- */

.profile-page-inner {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding-left: 42px;
    padding-right: 42px;
}


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

.profile-hero {
    background: #031d13;
    color: #ffffff;
    padding: 38px 0 80px;
}

.profile-back-link {
    display: inline-block;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 55px;
    transition: color 0.2s ease;
}

.profile-back-link:hover {
    color: #ff244f;
}


/* ---------------------------------------------------------
   HERO GRID
--------------------------------------------------------- */

.profile-hero-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 70px;
    align-items: center;
}


/* ---------------------------------------------------------
   HERO TEXT
--------------------------------------------------------- */

.profile-eyebrow {
    display: block;
    color: #ff244f;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 24px;
}

.profile-hero-copy h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(64px, 7vw, 110px);
    line-height: 0.84;
    letter-spacing: -5px;
    text-transform: uppercase;
    font-weight: 800;
}

.profile-role {
    margin-top: 35px;
    color: rgba(255,255,255,0.65);
    font-size: 17px;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   HERO IMAGE
--------------------------------------------------------- */

.profile-hero-image {
    position: relative;
    overflow: hidden;
    min-height: 650px;
    background: #08271b;
}

.profile-hero-image img {
    width: 100%;
    height: 650px;
    display: block;
    object-fit: cover;
    object-position: center;
}

.profile-number {
    position: absolute;
    top: 28px;
    left: 28px;
    z-index: 2;

    width: 56px;
    height: 56px;

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

    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 50%;

    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
   ABOUT SECTION
========================================================= */

.profile-about {
    background: #f3f2ed;
    color: #171717;
    padding: 110px 0 120px;
}

.profile-about-grid {
    display: grid;
    grid-template-columns: 0.65fr 1.35fr;
    gap: 100px;
    align-items: start;
}

.profile-section-number {
    display: block;
    color: #ff244f;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
    margin-bottom: 18px;
}

.profile-section-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 25px;
}

.profile-about-heading h2 {
    margin: 0;
    font-size: clamp(48px, 5vw, 78px);
    line-height: 0.92;
    letter-spacing: -3px;
    text-transform: uppercase;
}

.profile-about-heading h2 em {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    text-transform: lowercase;
}


/* ---------------------------------------------------------
   ABOUT COPY
--------------------------------------------------------- */

.profile-about-copy {
    max-width: 820px;
}

.profile-about-copy p {
    margin: 0 0 28px;
    font-size: 18px;
    line-height: 1.75;
    color: #333333;
}

.profile-about-copy blockquote {
    margin: 50px 0;
    padding: 0 0 0 30px;
    border-left: 3px solid #ff244f;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    line-height: 1.45;
    font-style: italic;
    color: #111111;
}


/* =========================================================
   BECOME A REFEREE CTA
========================================================= */

.profile-cta {
    background: #ff244f;
    color: #ffffff;
    padding: 90px 0;
}

.profile-cta-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 50px;
}

.profile-cta .profile-section-label {
    color: rgba(255,255,255,0.75);
}

.profile-cta h2 {
    margin: 0;
    font-size: clamp(52px, 6vw, 90px);
    line-height: 0.9;
    letter-spacing: -4px;
    text-transform: uppercase;
}

.profile-cta p {
    margin: 25px 0 0;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
}

.profile-cta-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 30px;

    padding: 20px 0;

    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 800;

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

.profile-cta-link:hover {
    border-color: #ffffff;
}


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

@media (max-width: 1000px) {

    .profile-hero-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .profile-hero-image,
    .profile-hero-image img {
        min-height: 520px;
        height: 520px;
    }

    .profile-about-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .profile-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}


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

@media (max-width: 650px) {

    .profile-page-inner {
        padding-left: 22px;
        padding-right: 22px;
    }

    .profile-hero {
        padding-top: 25px;
        padding-bottom: 50px;
    }

    .profile-back-link {
        margin-bottom: 40px;
    }

    .profile-hero-copy h1 {
        font-size: 56px;
        letter-spacing: -3px;
    }

    .profile-hero-image,
    .profile-hero-image img {
        min-height: 430px;
        height: 430px;
    }

    .profile-about {
        padding: 75px 0;
    }

    .profile-about-heading h2 {
        font-size: 48px;
    }

    .profile-about-copy p {
        font-size: 16px;
        line-height: 1.7;
    }

    .profile-about-copy blockquote {
        margin: 38px 0;
        font-size: 23px;
    }

    .profile-cta {
        padding: 70px 0;
    }

    .profile-cta h2 {
        font-size: 52px;
    }
}

/* =========================================================
   REFEREE PROFILE – FORCE CORRECT SECTION BACKGROUNDS
========================================================= */

.ref-profile .profile-about {
    background: #f4f3ef;
    color: #222;
}

.ref-profile .profile-about-copy,
.ref-profile .profile-about-copy p {
    color: #333;
}

.ref-profile .profile-about-heading,
.ref-profile .profile-about-heading h2 {
    color: #111;
}

.ref-profile .profile-cta {
    background: #ff234d;
    color: #fff;
}

.ref-profile .profile-cta h2,
.ref-profile .profile-cta p,
.ref-profile .profile-cta a,
.ref-profile .profile-cta span {
    color: #fff;
}

/* =========================================================
   REFEREE PROFILE – FACTS
========================================================= */

.profile-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    margin-top: 55px;
    padding-top: 30px;
    border-top: 1px solid rgba(0, 0, 0, 0.18);
}

.profile-fact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-fact-label {
    display: block;
    color: #ff234d;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.profile-fact-value {
    display: block;
    color: #111;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
}

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

    .profile-facts {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 40px;
    }

    .profile-fact-value {
        font-size: 19px;
    }
}

/* ==========================================================
   BECOME A REFEREE PAGE
   ========================================================== */


/* HERO
---------------------------------------------------------- */

.become-hero {
    position: relative;
    min-height: 620px;
    background: #001f15;
    color: #ffffff;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Large subtle circle on right */

.become-hero::after {
    content: "";
    position: absolute;
    width: 720px;
    height: 720px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50%;
    right: -180px;
    top: -260px;
    pointer-events: none;
}


/* Inner container */

.become-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 100px 45px;
}


/* Small heading */

.become-eyebrow {
    display: block;
    margin-bottom: 28px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;

    color: #ff2449;
}


/* Main title */

.become-hero h1 {
    margin: 0;

    font-size: clamp(72px, 9vw, 145px);
    line-height: 0.82;
    letter-spacing: -5px;
    font-weight: 800;

    color: #ffffff;
}


/* Intro text */

.become-hero-intro {
    margin: 45px 0 35px;
    max-width: 620px;

    font-size: 23px;
    line-height: 1.5;

    color: rgba(255,255,255,0.72);
}


/* CTA */

.become-hero-link {
    display: inline-block;

    color: #ffffff;
    text-decoration: none;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;

    border-bottom: 1px solid rgba(255,255,255,0.5);
    padding-bottom: 8px;

    transition: 0.2s ease;
}

.become-hero-link:hover {
    color: #ff2449;
    border-color: #ff2449;
}


/* MOBILE
---------------------------------------------------------- */

@media (max-width: 768px) {

    .become-hero {
        min-height: 560px;
    }

    .become-hero-inner {
        padding: 80px 24px;
    }

    .become-hero h1 {
        font-size: clamp(58px, 18vw, 90px);
        line-height: 0.86;
        letter-spacing: -3px;
    }

    .become-hero-intro {
        margin-top: 35px;
        font-size: 19px;
    }

    .become-hero::after {
        width: 500px;
        height: 500px;
        right: -300px;
        top: -100px;
    }

}

/* ==========================================================
   REFEREE JOURNEY
   ========================================================== */

.referee-journey {
    background: #f3f1eb;
    color: #111111;
    padding: 120px 0 130px;
}

.journey-inner {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 45px;
}


/* INTRO
---------------------------------------------------------- */

.journey-heading {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 100px;
    padding-bottom: 110px;
}

.journey-heading-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.journey-number {
    font-size: 15px;
    margin-bottom: 4px;
}

.journey-eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 35px;
}

.journey-heading h2 {
    margin: 0;
    font-size: clamp(55px, 5.5vw, 90px);
    line-height: 0.91;
    letter-spacing: -4px;
    font-weight: 800;
    color: #111111;
}

.journey-heading h2 em {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.05em;
    font-weight: 400;
    letter-spacing: -3px;
}

.journey-heading-right {
    max-width: 700px;
    padding-top: 50px;
}

.journey-heading-right p {
    margin: 0 0 28px;
    font-size: 19px;
    line-height: 1.7;
    color: #393939;
}

.journey-heading-right .journey-lead {
    font-size: 27px;
    line-height: 1.45;
    color: #111111;
}


/* FOUR STAGES
---------------------------------------------------------- */

.journey-stages {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #b9b6ae;
    border-bottom: 1px solid #b9b6ae;
}

.journey-card {
    position: relative;
    min-height: 440px;
    padding: 35px 30px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid #b9b6ae;
}

.journey-card:first-child {
    border-left: 1px solid #b9b6ae;
}

.journey-card-number {
    display: block;
    font-size: 64px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -3px;
    color: #c8c5bd;
}

.journey-card-label {
    display: block;
    margin-bottom: 12px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #ff2449;
}

.journey-card h3 {
    margin: 0 0 20px;

    font-size: clamp(25px, 2.2vw, 36px);
    line-height: 1;
    letter-spacing: -1px;
    color: #111111;
}

.journey-card p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #4a4a4a;
}


/* Give each stage a subtle interaction */

.journey-card {
    transition: background 0.25s ease;
}

.journey-card:hover {
    background: #ffffff;
}


/* TABLET
---------------------------------------------------------- */

@media (max-width: 1050px) {

    .journey-heading {
        grid-template-columns: 1fr 1fr;
        gap: 60px;
    }

    .journey-stages {
        grid-template-columns: repeat(2, 1fr);
    }

    .journey-card:nth-child(2) {
        border-right: 1px solid #b9b6ae;
    }

    .journey-card:nth-child(3),
    .journey-card:nth-child(4) {
        border-top: 1px solid #b9b6ae;
    }

}


/* MOBILE
---------------------------------------------------------- */

@media (max-width: 768px) {

    .referee-journey {
        padding: 80px 0;
    }

    .journey-inner {
        padding: 0 24px;
    }

    .journey-heading {
        display: block;
        padding-bottom: 70px;
    }

    .journey-heading h2 {
        font-size: 55px;
        letter-spacing: -3px;
    }

    .journey-heading-right {
        padding-top: 50px;
    }

    .journey-heading-right .journey-lead {
        font-size: 22px;
    }

    .journey-stages {
        display: block;
        border-bottom: 0;
    }

    .journey-card,
    .journey-card:first-child {
        min-height: 330px;
        border-left: 1px solid #b9b6ae;
        border-right: 1px solid #b9b6ae;
        border-bottom: 1px solid #b9b6ae;
    }

    .journey-card-number {
        font-size: 50px;
    }

}

/* ==========================================================
   REFEREE ACADEMY
   ========================================================== */

.referee-academy {
    background: #002b1e;
    color: #ffffff;
    padding: 120px 0 130px;
}

.academy-inner {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 45px;
}


/* HEADING
---------------------------------------------------------- */

.academy-heading {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 100px;
    padding-bottom: 90px;
}

.academy-heading-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.academy-number {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.75);
}

.academy-eyebrow {
    display: block;
    margin-bottom: 38px;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #ff2449;
}

.academy-heading h2 {
    margin: 0;
    font-size: clamp(65px, 7vw, 110px);
    line-height: 0.84;
    letter-spacing: -5px;
    color: #ffffff;
}

.academy-heading h2 em {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -4px;
}


/* RIGHT SIDE
---------------------------------------------------------- */

.academy-heading-right {
    width: 100%;
    max-width: 700px;
    padding-top: 48px;
}

.academy-heading-right p {
    margin: 0 0 28px;
    font-size: 19px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
}

.academy-heading-right .academy-lead {
    margin-bottom: 28px;
    font-size: 32px;
    line-height: 1.3;
    color: #ffffff;
}


/* MONTHLY SESSION
---------------------------------------------------------- */

.academy-session {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    gap: 25px;

    margin-top: 48px;
    padding: 28px 0;

    border-top: 1px solid rgba(255, 255, 255, 0.22);
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.academy-session-label {
    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ff2449;
}

.academy-session strong {
    font-size: 18px;
    line-height: 1.4;
    color: #ffffff;
}

.academy-session > span:last-child {
    text-align: right;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.65);
}


/* TOPICS
---------------------------------------------------------- */

.academy-topics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.academy-topic {
    min-width: 0;
    min-height: 280px;
    padding: 32px 30px;

    border-right: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.academy-topic:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.academy-topic > span {
    display: block;
    margin-bottom: 65px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
}

.academy-topic h3 {
    margin: 0 0 18px;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: #ffffff;
}

.academy-topic p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
}


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

@media (max-width: 1050px) {

    .referee-academy {
        padding: 100px 0;
    }

    .academy-inner {
        padding: 0 35px;
    }

    .academy-heading {
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        padding-bottom: 75px;
    }

    .academy-heading h2 {
        font-size: clamp(58px, 8vw, 85px);
    }

    .academy-heading-right {
        padding-top: 40px;
    }

    .academy-heading-right .academy-lead {
        font-size: 27px;
    }

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

    .academy-topic:nth-child(3) {
        border-left: 1px solid rgba(255, 255, 255, 0.18);
    }
}


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

@media (max-width: 768px) {

    .referee-academy {
        padding: 75px 0 80px;
    }

    .academy-inner {
        padding: 0 24px;
    }

    .academy-heading {
        display: block;
        padding-bottom: 60px;
    }

    .academy-eyebrow {
        margin-bottom: 28px;
    }

    .academy-heading h2 {
        font-size: clamp(54px, 17vw, 72px);
        line-height: 0.88;
        letter-spacing: -3px;
    }

    .academy-heading h2 em {
        letter-spacing: -2px;
    }

    .academy-heading-right {
        max-width: none;
        padding-top: 45px;
    }

    .academy-heading-right .academy-lead {
        font-size: 26px;
        line-height: 1.35;
    }

    .academy-heading-right p {
        font-size: 17px;
        line-height: 1.65;
    }


    /* MONTHLY SESSION */

    .academy-session {
        display: block;
        margin-top: 38px;
        padding: 24px 0;
    }

    .academy-session > * {
        display: block;
        margin-bottom: 12px;
    }

    .academy-session > *:last-child {
        margin-bottom: 0;
    }

    .academy-session > span:last-child {
        text-align: left;
    }


    /* TOPICS */

    .academy-topics {
        display: block;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }

    .academy-topic,
    .academy-topic:first-child,
    .academy-topic:nth-child(3) {
        min-height: auto;
        padding: 28px 24px;
        border-left: 1px solid rgba(255, 255, 255, 0.18);
        border-right: 1px solid rgba(255, 255, 255, 0.18);
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    }

    .academy-topic > span {
        margin-bottom: 35px;
    }
}

/* ==========================================================
   BECOME A REFEREE — CONTACT / RECRUITMENT
   ========================================================== */

.referee-contact {
    background: #f3f1eb;
    color: #111111;
    padding: 120px 0 0;
}

.referee-contact-inner {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 45px;
}


/* TOP
---------------------------------------------------------- */

.referee-contact-top {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 100px;
    padding-bottom: 110px;
}

.referee-contact-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.contact-number {
    display: block;
    margin-bottom: 6px;

    font-size: 15px;
    color: #111111;
}

.contact-eyebrow {
    display: block;
    margin-bottom: 38px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;

    color: #ff2449;
}

.referee-contact-heading h2 {
    margin: 0;

    font-size: clamp(55px, 5.8vw, 90px);
    line-height: 0.89;
    letter-spacing: -4px;

    color: #111111;
}

.referee-contact-heading h2 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -3px;
}


/* COPY
---------------------------------------------------------- */

.referee-contact-copy {
    max-width: 700px;
    padding-top: 48px;
}

.referee-contact-copy p {
    margin: 0 0 28px;

    font-size: 19px;
    line-height: 1.7;

    color: #454545;
}

.referee-contact-copy .contact-lead {
    font-size: 30px;
    line-height: 1.4;

    color: #111111;
}


/* ACTION BAR
---------------------------------------------------------- */

.referee-contact-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;

    margin-left: -45px;
    margin-right: -45px;
    padding: 50px 45px;

    background: #ff2449;
    color: #ffffff;
}

.contact-action-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-action-text > span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;

    color: rgba(255,255,255,0.75);
}

.contact-action-text strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 400;
}


/* BUTTON
---------------------------------------------------------- */

.contact-action-button {
    display: inline-flex;
    align-items: center;
    gap: 35px;

    padding: 18px 0;

    color: #ffffff;
    text-decoration: none;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;

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

    transition: 0.2s ease;
}

.contact-action-button strong {
    font-size: 25px;
    line-height: 1;
}

.contact-action-button:hover {
    gap: 45px;
    border-color: #ffffff;
}


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

@media (max-width: 1050px) {

    .referee-contact-top {
        grid-template-columns: 1fr 1fr;
        gap: 60px;
    }

    .referee-contact-heading h2 {
        font-size: clamp(50px, 7vw, 72px);
    }

}


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

@media (max-width: 768px) {

    .referee-contact {
        padding-top: 80px;
    }

    .referee-contact-inner {
        padding: 0 24px;
    }

    .referee-contact-top {
        display: block;
        padding-bottom: 70px;
    }

    .referee-contact-heading h2 {
        font-size: clamp(48px, 14vw, 65px);
        letter-spacing: -3px;
    }

    .referee-contact-copy {
        padding-top: 50px;
    }

    .referee-contact-copy .contact-lead {
        font-size: 24px;
    }

    .referee-contact-copy p {
        font-size: 17px;
    }

    .referee-contact-action {
        display: block;

        margin-left: -24px;
        margin-right: -24px;
        padding: 40px 24px;
    }

    .contact-action-button {
        margin-top: 35px;
    }

}

/* ==========================================================
   TRAINING PAGE
   ========================================================== */


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

.training-hero {
    position: relative;
    overflow: hidden;

    min-height: 700px;

    background: #002b1e;
    color: #ffffff;
}

.training-hero-inner {
    position: relative;

    width: 100%;
    max-width: 1450px;
    min-height: 700px;

    margin: 0 auto;
    padding: 0 45px;

    display: flex;
    align-items: center;
}

.training-hero-content {
    position: relative;
    z-index: 2;

    max-width: 850px;
}

.training-hero-eyebrow {
    display: block;

    margin-bottom: 35px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;

    color: #ff2449;
}

.training-hero h1 {
    margin: 0;

    font-size: clamp(75px, 8.5vw, 135px);
    line-height: 0.82;
    letter-spacing: -7px;

    color: #ffffff;
}

.training-hero h1 span {
    color: rgba(255,255,255,0.28);
}

.training-hero p {
    max-width: 570px;

    margin: 48px 0 35px;

    font-size: 23px;
    line-height: 1.55;

    color: rgba(255,255,255,0.68);
}

.training-hero-link {
    display: inline-block;

    padding: 12px 0;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #ffffff;
    text-decoration: none;

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

.training-hero-link:hover {
    border-color: #ffffff;
}


/* DECORATIVE CIRCLE
---------------------------------------------------------- */

.training-hero-circle {
    position: absolute;

    width: 650px;
    height: 650px;

    right: -190px;
    top: -120px;

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50%;
}

.training-hero-circle::after {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    left: -150px;
    bottom: -180px;

    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 50%;
}


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

.training-development {
    background: #f3f1eb;
    color: #111111;

    padding: 120px 0 130px;
}

.training-development-inner {
    width: 100%;
    max-width: 1450px;

    margin: 0 auto;
    padding: 0 45px;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;

    gap: 100px;
}

.training-development-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.training-section-number {
    display: block;

    margin-bottom: 6px;

    font-size: 15px;
    color: #111111;
}

.training-section-eyebrow {
    display: block;

    margin-bottom: 38px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;

    color: #ff2449;
}

.training-development-heading h2 {
    margin: 0;

    font-size: clamp(65px, 6.5vw, 100px);
    line-height: 0.86;
    letter-spacing: -5px;

    color: #111111;
}

.training-development-heading h2 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -4px;
}

.training-development-copy {
    max-width: 700px;

    padding-top: 48px;
}

.training-development-copy p {
    margin: 0 0 28px;

    font-size: 19px;
    line-height: 1.7;

    color: #454545;
}

.training-development-copy .training-lead {
    font-size: 31px;
    line-height: 1.4;

    color: #111111;
}


/* ==========================================================
   TRAINING — TABLET
   ========================================================== */

@media (max-width: 1050px) {

    .training-hero,
    .training-hero-inner {
        min-height: 620px;
    }

    .training-hero h1 {
        font-size: clamp(70px, 10vw, 105px);
    }

    .training-development-inner {
        grid-template-columns: 1fr 1fr;
        gap: 60px;
    }

}


/* ==========================================================
   TRAINING — MOBILE
   ========================================================== */

@media (max-width: 768px) {

    .training-hero,
    .training-hero-inner {
        min-height: 600px;
    }

    .training-hero-inner {
        padding: 0 24px;
    }

    .training-hero h1 {
        font-size: clamp(58px, 18vw, 78px);
        line-height: 0.86;
        letter-spacing: -4px;
    }

    .training-hero p {
        margin-top: 35px;
        font-size: 19px;
    }

    .training-hero-circle {
        width: 450px;
        height: 450px;

        right: -260px;
        top: -80px;
    }


    /* DEVELOPMENT */

    .training-development {
        padding: 80px 0;
    }

    .training-development-inner {
        display: block;
        padding: 0 24px;
    }

    .training-development-heading h2 {
        font-size: clamp(55px, 17vw, 75px);
        letter-spacing: -3px;
    }

    .training-development-copy {
        padding-top: 50px;
    }

    .training-development-copy .training-lead {
        font-size: 25px;
    }

    .training-development-copy p {
        font-size: 17px;
    }

}

/* ==========================================================
   TRAINING — DEVELOPMENT SUPPORT
   ========================================================== */

.training-support {
    background: #002b1e;
    color: #ffffff;
    padding: 120px 0 130px;
}

.training-support-inner {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 45px;
}


/* HEADING
---------------------------------------------------------- */

.training-support-heading {
    display: grid;
    grid-template-columns: 0.65fr 1.35fr 1fr;
    gap: 70px;
    align-items: end;

    padding-bottom: 85px;
}

.support-number {
    display: block;

    margin-bottom: 8px;

    font-size: 15px;
    color: rgba(255,255,255,0.7);
}

.support-eyebrow {
    display: block;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;

    color: #ff2449;
}

.training-support-heading h2 {
    margin: 0;

    font-size: clamp(50px, 5vw, 78px);
    line-height: 0.9;
    letter-spacing: -4px;

    color: #ffffff;
}

.training-support-heading h2 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -3px;
}

.training-support-heading > p {
    margin: 0;

    max-width: 420px;

    font-size: 19px;
    line-height: 1.6;

    color: rgba(255,255,255,0.65);
}


/* SUPPORT CARDS
---------------------------------------------------------- */

.training-support-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    border-top: 1px solid rgba(255,255,255,0.18);
}

.training-support-card {
    min-width: 0;
    min-height: 340px;

    padding: 35px 30px;

    border-right: 1px solid rgba(255,255,255,0.18);
    border-bottom: 1px solid rgba(255,255,255,0.18);
}

.training-support-card:first-child {
    border-left: 1px solid rgba(255,255,255,0.18);
}

.support-card-number {
    display: block;

    margin-bottom: 90px;

    font-size: 15px;

    color: rgba(255,255,255,0.35);
}

.training-support-card h3 {
    margin: 0 0 20px;

    font-size: 22px;
    letter-spacing: -0.5px;

    color: #ffffff;
}

.training-support-card p {
    margin: 0;

    font-size: 15px;
    line-height: 1.65;

    color: rgba(255,255,255,0.62);
}


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

@media (max-width: 1050px) {

    .training-support-heading {
        grid-template-columns: 0.6fr 1.4fr;
        gap: 50px;
    }

    .training-support-heading > p {
        grid-column: 2;
    }

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

    .training-support-card:nth-child(3) {
        border-left: 1px solid rgba(255,255,255,0.18);
    }

}


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

@media (max-width: 768px) {

    .training-support {
        padding: 80px 0;
    }

    .training-support-inner {
        padding: 0 24px;
    }

    .training-support-heading {
        display: block;
        padding-bottom: 60px;
    }

    .training-support-heading h2 {
        margin-top: 35px;

        font-size: clamp(48px, 14vw, 65px);
        letter-spacing: -3px;
    }

    .training-support-heading > p {
        margin-top: 35px;
        font-size: 17px;
    }

    .training-support-grid {
        display: block;
    }

    .training-support-card,
    .training-support-card:first-child,
    .training-support-card:nth-child(3) {
        min-height: auto;

        padding: 28px 24px;

        border-left: 1px solid rgba(255,255,255,0.18);
        border-right: 1px solid rgba(255,255,255,0.18);
        border-bottom: 1px solid rgba(255,255,255,0.18);
    }

    .support-card-number {
        margin-bottom: 45px;
    }

}

/* ==========================================================
   TRAINING — TRAINING SESSIONS
   ========================================================== */

.training-sessions {
    background: #f3f1eb;
    color: #111111;
    padding: 125px 0 130px;
}

.training-sessions-inner {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 45px;
}


/* HEADING
---------------------------------------------------------- */

.training-sessions-heading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 120px;

    padding-bottom: 110px;
}

.sessions-number {
    display: block;
    margin-bottom: 7px;

    font-size: 15px;
    color: #333333;
}

.sessions-eyebrow {
    display: block;
    margin-bottom: 40px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;

    color: #ff2449;
}

.training-sessions-title h2 {
    margin: 0;

    font-size: clamp(65px, 7vw, 110px);
    line-height: 0.84;
    letter-spacing: -5px;

    color: #111111;
}

.training-sessions-title h2 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -4px;
}


.training-sessions-copy {
    max-width: 650px;
    padding-top: 60px;
}

.training-sessions-copy p {
    margin: 0 0 28px;

    font-size: 19px;
    line-height: 1.7;

    color: #4b4b4b;
}

.training-sessions-copy .sessions-lead {
    font-size: 31px;
    line-height: 1.35;

    color: #111111;
}


/* BOTTOM STRIP
---------------------------------------------------------- */

.training-sessions-bottom {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 80px;
    align-items: end;

    padding-top: 45px;

    border-top: 1px solid #c9c6be;
}

.sessions-statement {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 35px;
}

.sessions-statement span {
    font-size: clamp(30px, 3.2vw, 52px);
    font-weight: 800;
    letter-spacing: -2px;
}

.sessions-action {
    border-left: 1px solid #c9c6be;
    padding-left: 35px;
}

.sessions-action p {
    margin: 0 0 24px;

    font-size: 16px;
    color: #555555;
}

.sessions-action a {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-bottom: 12px;

    border-bottom: 1px solid #111111;

    color: #111111;
    text-decoration: none;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.sessions-action a span {
    font-size: 21px;
    font-weight: 400;
}


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

@media (max-width: 1050px) {

    .training-sessions-heading {
        gap: 70px;
    }

    .training-sessions-bottom {
        grid-template-columns: 1.5fr 1fr;
        gap: 50px;
    }

}


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

@media (max-width: 768px) {

    .training-sessions {
        padding: 80px 0;
    }

    .training-sessions-inner {
        padding: 0 24px;
    }

    .training-sessions-heading {
        display: block;
        padding-bottom: 70px;
    }

    .training-sessions-title h2 {
        font-size: clamp(52px, 15vw, 72px);
        letter-spacing: -3px;
    }

    .training-sessions-copy {
        padding-top: 55px;
    }

    .training-sessions-copy .sessions-lead {
        font-size: 25px;
    }

    .training-sessions-copy p {
        font-size: 17px;
    }

    .training-sessions-bottom {
        display: block;
    }

    .sessions-statement {
        gap: 10px 20px;
        padding-bottom: 45px;
    }

    .sessions-action {
        border-left: 0;
        border-top: 1px solid #c9c6be;

        padding: 35px 0 0;
    }

}

/* ==========================================================
   TRAINING — YOUR NEXT STEP
   ========================================================== */

.training-next-step {
    background: #002b1e;
    color: #ffffff;
    padding-top: 120px;
}

.training-next-inner {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 45px 120px;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 100px;
}


/* HEADING
---------------------------------------------------------- */

.training-next-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.training-next-number {
    display: block;
    margin-bottom: 6px;

    font-size: 15px;
    color: rgba(255,255,255,0.7);
}

.training-next-eyebrow {
    display: block;
    margin-bottom: 38px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;

    color: #ff2449;
}

.training-next-heading h2 {
    margin: 0;

    font-size: clamp(58px, 6vw, 92px);
    line-height: 0.88;
    letter-spacing: -5px;

    color: #ffffff;
}

.training-next-heading h2 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -3px;
}


/* COPY
---------------------------------------------------------- */

.training-next-copy {
    max-width: 700px;
    padding-top: 48px;
}

.training-next-copy p {
    margin: 0 0 28px;

    font-size: 19px;
    line-height: 1.7;

    color: rgba(255,255,255,0.68);
}

.training-next-copy .training-next-lead {
    font-size: 31px;
    line-height: 1.4;

    color: #ffffff;
}


/* FINAL ACTION BAR
---------------------------------------------------------- */

.training-next-action {
    background: #ff2449;
}

.training-next-action-inner {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 48px 45px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.training-next-action-inner > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.training-next-action-inner > div span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;

    color: rgba(255,255,255,0.75);
}

.training-next-action-inner > div strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 400;

    color: #ffffff;
}

.training-next-action a {
    display: inline-flex;
    align-items: center;
    gap: 35px;

    padding: 18px 0;

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

    color: #ffffff;
    text-decoration: none;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;

    transition: 0.2s ease;
}

.training-next-action a strong {
    font-size: 25px;
}

.training-next-action a:hover {
    gap: 45px;
    border-color: #ffffff;
}


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

@media (max-width: 768px) {

    .training-next-step {
        padding-top: 80px;
    }

    .training-next-inner {
        display: block;
        padding: 0 24px 75px;
    }

    .training-next-heading h2 {
        font-size: clamp(50px, 15vw, 68px);
        letter-spacing: -3px;
    }

    .training-next-copy {
        padding-top: 50px;
    }

    .training-next-copy .training-next-lead {
        font-size: 25px;
    }

    .training-next-copy p {
        font-size: 17px;
    }

    .training-next-action-inner {
        display: block;
        padding: 40px 24px;
    }

    .training-next-action a {
        margin-top: 35px;
    }

}

/* ==========================================================
   REFEREE RESOURCES
   ========================================================== */


/* HERO
---------------------------------------------------------- */

.resources-hero {
    background: #f2f0e9;
    color: #111111;
    padding: 110px 0 125px;
}

.resources-hero-inner {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 45px;
}


/* SMALL LABELS
---------------------------------------------------------- */

.resources-number {
    display: block;
    margin-bottom: 8px;

    font-size: 15px;
    color: rgba(0,0,0,0.55);
}

.resources-eyebrow {
    display: block;
    margin-bottom: 45px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;
    color: #ff2449;
}


/* MAIN HEADING
---------------------------------------------------------- */

.resources-hero h1 {
    margin: 0;

    font-size: clamp(70px, 9vw, 145px);
    line-height: 0.78;
    letter-spacing: -7px;
    color: #111111;
}

.resources-hero h1 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -6px;
}


/* INTRO TEXT
---------------------------------------------------------- */

.resources-intro {
    width: 48%;
    margin-left: 52%;
    margin-top: 75px;
}

.resources-intro p {
    margin: 0 0 24px;

    font-size: 19px;
    line-height: 1.7;
    color: rgba(0,0,0,0.68);
}

.resources-intro .resources-lead {
    font-size: 31px;
    line-height: 1.3;
    color: #111111;
}


/* MOBILE
---------------------------------------------------------- */

@media (max-width: 768px) {

    .resources-hero {
        padding: 80px 0;
    }

    .resources-hero-inner {
        padding: 0 24px;
    }

    .resources-eyebrow {
        margin-bottom: 35px;
    }

    .resources-hero h1 {
        font-size: 68px;
        letter-spacing: -4px;
    }

    .resources-hero h1 em {
        letter-spacing: -3px;
    }

    .resources-intro {
        width: 100%;
        margin-left: 0;
        margin-top: 55px;
    }

    .resources-intro .resources-lead {
        font-size: 27px;
    }

}

/* ==========================================================
   REFEREE RESOURCES — MATCH DAY
   ========================================================== */

.resources-matchday {
    background: #002b1e;
    color: #ffffff;
    padding: 120px 0 130px;
}

.resources-section-inner {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 45px;
}


/* HEADING
---------------------------------------------------------- */

.resources-section-heading {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 100px;
    padding-bottom: 90px;
}

.resources-section-heading-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.resources-section-number {
    display: block;
    margin-bottom: 6px;

    font-size: 15px;
    color: rgba(255,255,255,0.7);
}

.resources-section-eyebrow {
    display: block;
    margin-bottom: 38px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;

    color: #ff2449;
}

.resources-section-heading h2 {
    margin: 0;

    font-size: clamp(65px, 7vw, 105px);
    line-height: 0.85;
    letter-spacing: -5px;

    color: #ffffff;
}

.resources-section-heading h2 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -4px;
}


/* INTRO COPY
---------------------------------------------------------- */

.resources-section-heading-right {
    max-width: 680px;
    padding-top: 48px;
}

.resources-section-heading-right p {
    margin: 0 0 28px;

    font-size: 19px;
    line-height: 1.7;

    color: rgba(255,255,255,0.68);
}

.resources-section-heading-right .resources-section-lead {
    font-size: 31px;
    line-height: 1.4;

    color: #ffffff;
}


/* RESOURCE CARDS
---------------------------------------------------------- */

.resource-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top: 1px solid rgba(255,255,255,0.18);
    border-left: 1px solid rgba(255,255,255,0.18);
}

.resource-card {
    position: relative;

    min-height: 300px;
    padding: 32px 34px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    color: #ffffff;
    text-decoration: none;

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

    transition:
        background 0.25s ease,
        color 0.25s ease;
}

.resource-card:hover {
    background: #ff2449;
}


/* CARD NUMBER
---------------------------------------------------------- */

.resource-card-number {
    display: block;

    font-size: 14px;
    color: rgba(255,255,255,0.4);
}


/* CARD CONTENT
---------------------------------------------------------- */

.resource-card-content {
    max-width: 470px;
}

.resource-card h3 {
    margin: 0 0 18px;

    font-size: clamp(24px, 2.2vw, 34px);
    line-height: 1.05;
    letter-spacing: -1px;

    color: #ffffff;
}

.resource-card p {
    margin: 0;

    max-width: 390px;

    font-size: 16px;
    line-height: 1.6;

    color: rgba(255,255,255,0.62);
}

.resource-card:hover p {
    color: rgba(255,255,255,0.88);
}


/* ARROW
---------------------------------------------------------- */

.resource-card-arrow {
    position: absolute;
    right: 32px;
    top: 28px;

    font-size: 25px;
    font-weight: 300;

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

    transition: transform 0.2s ease;
}

.resource-card:hover .resource-card-arrow {
    transform: translateX(6px);
    color: #ffffff;
}


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

@media (max-width: 1050px) {

    .resources-section-heading {
        grid-template-columns: 1fr 1fr;
        gap: 60px;
    }

}


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

@media (max-width: 768px) {

    .resources-matchday {
        padding: 80px 0;
    }

    .resources-section-inner {
        padding: 0 24px;
    }

    .resources-section-heading {
        display: block;
        padding-bottom: 65px;
    }

    .resources-section-heading h2 {
        font-size: clamp(55px, 17vw, 75px);
        letter-spacing: -3px;
    }

    .resources-section-heading-right {
        padding-top: 50px;
    }

    .resources-section-heading-right .resources-section-lead {
        font-size: 25px;
    }

    .resources-section-heading-right p {
        font-size: 17px;
    }

    .resource-card-grid {
        display: block;
    }

    .resource-card {
        min-height: 260px;
        padding: 28px 24px;
    }

    .resource-card-arrow {
        right: 24px;
        top: 25px;
    }

}

/* ==========================================================
   REFEREE RESOURCES — LAWS & REGULATIONS
   ========================================================== */

.resources-laws {
    background: #f3f1eb;
    color: #111111;
    padding: 120px 0 130px;
}

.resources-laws-inner {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 45px;
}


/* HEADING
---------------------------------------------------------- */

.resources-laws-heading {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 100px;
    padding-bottom: 95px;
}

.resources-laws-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.laws-number {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    color: #555555;
}

.laws-eyebrow {
    display: block;
    margin-bottom: 38px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;

    color: #ff2449;
}

.resources-laws-title h2 {
    margin: 0;

    font-size: clamp(65px, 7vw, 105px);
    line-height: 0.85;
    letter-spacing: -5px;

    color: #111111;
}

.resources-laws-title h2 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -4px;
}


/* COPY
---------------------------------------------------------- */

.resources-laws-copy {
    max-width: 680px;
    padding-top: 48px;
}

.resources-laws-copy p {
    margin: 0 0 28px;

    font-size: 19px;
    line-height: 1.7;

    color: #4b4b4b;
}

.resources-laws-copy .laws-lead {
    font-size: 31px;
    line-height: 1.4;

    color: #111111;
}


/* RESOURCE ROWS
---------------------------------------------------------- */

.resources-link-list {
    border-top: 1px solid #c8c5bd;
}

.resources-link-row {
    position: relative;

    display: grid;
    grid-template-columns: 90px 1fr 60px;
    gap: 30px;
    align-items: center;

    min-height: 175px;
    padding: 30px 25px;

    color: #111111;
    text-decoration: none;

    border-bottom: 1px solid #c8c5bd;

    transition:
        background 0.2s ease,
        padding 0.2s ease;
}

.resources-link-row:hover {
    background: #ffffff;
    padding-left: 35px;
}

.resources-link-number {
    font-size: 15px;
    color: #8b8983;
}

.resources-link-content {
    max-width: 720px;
}

.resources-link-label {
    display: block;
    margin-bottom: 9px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;

    color: #ff2449;
}

.resources-link-row h3 {
    margin: 0 0 10px;

    font-size: clamp(23px, 2.2vw, 32px);
    line-height: 1.1;
    letter-spacing: -1px;

    color: #111111;
}

.resources-link-row p {
    margin: 0;

    font-size: 15px;
    line-height: 1.55;

    color: #626262;
}

.resources-link-arrow {
    text-align: right;

    font-size: 26px;
    color: #111111;

    transition: transform 0.2s ease;
}

.resources-link-row:hover .resources-link-arrow {
    transform: translateX(6px);
}


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

@media (max-width: 768px) {

    .resources-laws {
        padding: 80px 0;
    }

    .resources-laws-inner {
        padding: 0 24px;
    }

    .resources-laws-heading {
        display: block;
        padding-bottom: 65px;
    }

    .resources-laws-title h2 {
        font-size: clamp(55px, 17vw, 75px);
        letter-spacing: -3px;
    }

    .resources-laws-copy {
        padding-top: 50px;
    }

    .resources-laws-copy .laws-lead {
        font-size: 25px;
    }

    .resources-laws-copy p {
        font-size: 17px;
    }

    .resources-link-row {
        grid-template-columns: 40px 1fr 30px;
        gap: 15px;

        min-height: 160px;
        padding: 25px 5px;
    }

    .resources-link-row:hover {
        padding-left: 5px;
    }

    .resources-link-row p {
        font-size: 14px;
    }

}

/* ==========================================================
   REFEREE RESOURCES — DEVELOPMENT
   ========================================================== */

.resources-development {
    background: #002b1e;
    color: #ffffff;
    padding: 120px 0 125px;
}

.resources-development-inner {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 45px;
}


/* HEADING
---------------------------------------------------------- */

.resources-development-heading {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 100px;

    padding-bottom: 100px;
}

.resources-development-heading > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.development-number {
    display: block;
    margin-bottom: 6px;

    font-size: 15px;
    color: rgba(255,255,255,0.7);
}

.development-eyebrow {
    display: block;
    margin-bottom: 38px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;

    color: #ff2449;
}

.resources-development-heading h2 {
    margin: 0;

    font-size: clamp(65px, 7vw, 105px);
    line-height: 0.85;
    letter-spacing: -5px;

    color: #ffffff;
}

.resources-development-heading h2 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -4px;
}


/* COPY
---------------------------------------------------------- */

.resources-development-copy {
    max-width: 680px;
    padding-top: 48px;
}

.resources-development-copy p {
    margin: 0 0 28px;

    font-size: 19px;
    line-height: 1.7;

    color: rgba(255,255,255,0.68);
}

.resources-development-copy .development-lead {
    font-size: 31px;
    line-height: 1.4;

    color: #ffffff;
}


/* LINK
---------------------------------------------------------- */

.development-link {
    display: inline-flex;
    align-items: center;
    gap: 35px;

    margin-top: 18px;
    padding: 14px 0;

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

    color: #ffffff;
    text-decoration: none;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;

    transition: gap 0.2s ease;
}

.development-link span {
    font-size: 22px;
    font-weight: 400;
}

.development-link:hover {
    gap: 45px;
}


/* STATEMENT
---------------------------------------------------------- */

.development-statement {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 35px;

    padding-top: 45px;

    border-top: 1px solid rgba(255,255,255,0.18);
}

.development-statement span {
    font-size: clamp(27px, 3vw, 47px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -2px;

    color: rgba(255,255,255,0.92);
}


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

@media (max-width: 768px) {

    .resources-development {
        padding: 80px 0;
    }

    .resources-development-inner {
        padding: 0 24px;
    }

    .resources-development-heading {
        display: block;
        padding-bottom: 65px;
    }

    .resources-development-heading h2 {
        font-size: clamp(55px, 17vw, 75px);
        letter-spacing: -3px;
    }

    .resources-development-copy {
        padding-top: 50px;
    }

    .resources-development-copy .development-lead {
        font-size: 25px;
    }

    .resources-development-copy p {
        font-size: 17px;
    }

    .development-statement {
        gap: 12px 20px;
    }

}

/* ==========================================================
   REFEREE RESOURCES — MEMBERS AREA
   ========================================================== */

.resources-members {
    background: #111111;
    color: #ffffff;
    padding-top: 120px;
}

.resources-members-inner {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 45px 110px;
}


/* HEADING
---------------------------------------------------------- */

.resources-members-heading {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 100px;
    padding-bottom: 95px;
}

.resources-members-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.members-number {
    display: block;
    margin-bottom: 6px;

    font-size: 15px;
    color: rgba(255,255,255,0.55);
}

.members-eyebrow {
    display: block;
    margin-bottom: 38px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;

    color: #ff2449;
}

.resources-members-title h2 {
    margin: 0;

    font-size: clamp(65px, 7vw, 105px);
    line-height: 0.85;
    letter-spacing: -5px;

    color: #ffffff;
}

.resources-members-title h2 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -4px;

    color: rgba(255,255,255,0.7);
}


/* COPY
---------------------------------------------------------- */

.resources-members-copy {
    max-width: 680px;
    padding-top: 48px;
}

.resources-members-copy p {
    margin: 0 0 28px;

    font-size: 19px;
    line-height: 1.7;

    color: rgba(255,255,255,0.65);
}

.resources-members-copy .members-lead {
    font-size: 31px;
    line-height: 1.4;

    color: #ffffff;
}


/* MEMBERS LINK
---------------------------------------------------------- */

.members-login-link {
    display: inline-flex;
    align-items: center;
    gap: 35px;

    margin-top: 18px;
    padding: 14px 0;

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

    color: #ffffff;
    text-decoration: none;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;

    transition: gap 0.2s ease;
}

.members-login-link span {
    font-size: 22px;
    font-weight: 400;
}

.members-login-link:hover {
    gap: 45px;
}


/* PRIVATE RESOURCE STRIP
---------------------------------------------------------- */

.members-resource-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    border-top: 1px solid rgba(255,255,255,0.16);
    border-left: 1px solid rgba(255,255,255,0.16);
}

.members-resource-strip > div {
    min-height: 155px;
    padding: 28px 25px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border-right: 1px solid rgba(255,255,255,0.16);
    border-bottom: 1px solid rgba(255,255,255,0.16);
}

.members-resource-strip span {
    font-size: 13px;
    color: rgba(255,255,255,0.35);
}

.members-resource-strip strong {
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 1px;

    color: #ffffff;
}


/* FINAL ACTION BAR
---------------------------------------------------------- */

.members-action {
    background: #ff2449;
}

.members-action-inner {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 48px 45px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.members-action-inner > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.members-action-inner > div span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;

    color: rgba(255,255,255,0.75);
}

.members-action-inner > div strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 400;

    color: #ffffff;
}

.members-action a {
    display: inline-flex;
    align-items: center;
    gap: 35px;

    padding: 18px 0;

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

    color: #ffffff;
    text-decoration: none;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;

    transition: gap 0.2s ease;
}

.members-action a strong {
    font-size: 25px;
}

.members-action a:hover {
    gap: 45px;
    border-color: #ffffff;
}


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

@media (max-width: 1050px) {

    .resources-members-heading {
        grid-template-columns: 1fr 1fr;
        gap: 60px;
    }

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

}


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

@media (max-width: 768px) {

    .resources-members {
        padding-top: 80px;
    }

    .resources-members-inner {
        padding: 0 24px 75px;
    }

    .resources-members-heading {
        display: block;
        padding-bottom: 65px;
    }

    .resources-members-title h2 {
        font-size: clamp(55px, 17vw, 75px);
        letter-spacing: -3px;
    }

    .resources-members-copy {
        padding-top: 50px;
    }

    .resources-members-copy .members-lead {
        font-size: 25px;
    }

    .resources-members-copy p {
        font-size: 17px;
    }

    .members-resource-strip {
        display: block;
    }

    .members-resource-strip > div {
        min-height: 125px;
    }

    .members-action-inner {
        display: block;
        padding: 40px 24px;
    }

    .members-action a {
        margin-top: 35px;
    }

}

/* ==========================================================
   MEMBER ACCOUNT PAGES
   ========================================================== */

.account-page {
    min-height: 75vh;
    background: #f3f1eb;
    color: #111111;
    padding: 110px 0 130px;
}

.account-page-inner {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 45px;

    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 120px;
}


/* HEADING
---------------------------------------------------------- */

.account-heading {
    padding-top: 10px;
}

.account-eyebrow {
    display: block;
    margin-bottom: 40px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;

    color: #ff2449;
}

.account-heading h1 {
    margin: 0;

    font-size: clamp(65px, 7vw, 105px);
    line-height: 0.85;
    letter-spacing: -5px;

    color: #111111;
}

.account-heading h1 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -4px;
}


/* ACCOUNT PANEL
---------------------------------------------------------- */

.account-panel {
    max-width: 600px;

    padding: 48px;

    background: #002b1e;
    color: #ffffff;
}

.account-panel h2 {
    margin: 0 0 22px;

    font-size: 27px;
    letter-spacing: -1px;

    color: #ffffff;
}

.account-panel > p {
    margin: 0 0 35px;

    font-size: 17px;
    line-height: 1.7;

    color: rgba(255,255,255,0.7);
}


/* FORM
---------------------------------------------------------- */

.account-form {
    margin-top: 40px;
}

.account-field {
    margin-bottom: 28px;
}

.account-field label {
    display: block;
    margin-bottom: 10px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;

    color: rgba(255,255,255,0.75);
}

.account-field input {
    width: 100%;
    box-sizing: border-box;

    padding: 15px 16px;

    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 0;

    background: rgba(255,255,255,0.06);

    color: #ffffff;

    font-family: inherit;
    font-size: 17px;

    outline: none;
}

.account-field input:focus {
    border-color: #ffffff;
    background: rgba(255,255,255,0.1);
}

.account-field small {
    display: block;
    margin-top: 9px;

    font-size: 12px;

    color: rgba(255,255,255,0.5);
}


/* BUTTON
---------------------------------------------------------- */

.account-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;

    min-width: 210px;

    padding: 16px 0;

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

    background: transparent;

    color: #ffffff;
    text-decoration: none;

    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;

    cursor: pointer;

    transition: gap 0.2s ease;
}

.account-button span {
    font-size: 22px;
    font-weight: 400;
}

.account-button:hover {
    gap: 45px;
    border-color: #ffffff;
}


/* MESSAGES
---------------------------------------------------------- */

.account-message {
    margin-bottom: 30px;
    padding: 15px 18px;

    font-size: 14px;
    line-height: 1.5;
}

.account-message.error {
    border: 1px solid #ff2449;
    color: #ffffff;
}

.account-message.success {
    border: 1px solid rgba(255,255,255,0.45);
    color: #ffffff;
}


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

@media (max-width: 768px) {

    .account-page {
        padding: 75px 0 90px;
    }

    .account-page-inner {
        display: block;
        padding: 0 24px;
    }

    .account-heading h1 {
        font-size: clamp(52px, 16vw, 72px);
        letter-spacing: -3px;
    }

    .account-panel {
        max-width: none;
        margin-top: 60px;
        padding: 35px 25px;
    }

}

/* ==========================================================
   MEMBERS DASHBOARD
   ========================================================== */

.members-dashboard {
    min-height: 75vh;
    padding: 110px 0 130px;

    background: #002b1e;
    color: #ffffff;
}

.members-dashboard-inner {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 45px;
}


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

.members-dashboard-heading {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 100px;

    padding-bottom: 100px;
}

.members-dashboard-eyebrow {
    display: block;
    margin-bottom: 38px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;

    color: #ff2449;
}

.members-dashboard-heading h1 {
    margin: 0;

    font-size: clamp(65px, 7vw, 105px);
    line-height: 0.85;
    letter-spacing: -5px;

    color: #ffffff;
}

.members-dashboard-heading h1 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -4px;

    color: rgba(255,255,255,0.72);
}


/* ==========================================================
   WELCOME
   ========================================================== */

.members-welcome {
    max-width: 620px;
    padding-top: 45px;
}

.members-welcome > span {
    display: block;
    margin-bottom: 14px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;

    color: #ff2449;
}

.members-welcome h2 {
    margin: 0 0 22px;

    font-size: clamp(35px, 4vw, 58px);
    line-height: 1;

    color: #ffffff;
}

.members-welcome p {
    max-width: 540px;
    margin: 0 0 30px;

    font-size: 18px;
    line-height: 1.7;

    color: rgba(255,255,255,0.67);
}

.members-logout {
    display: inline-flex;
    align-items: center;
    gap: 30px;

    padding: 12px 0;

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

    color: #ffffff;
    text-decoration: none;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;

    transition: gap 0.2s ease;
}

.members-logout span {
    font-size: 20px;
    font-weight: 400;
}

.members-logout:hover {
    gap: 40px;
}


/* ==========================================================
   DASHBOARD CARDS
   ========================================================== */

.members-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top: 1px solid rgba(255,255,255,0.18);
    border-left: 1px solid rgba(255,255,255,0.18);
}

.members-dashboard-card {
    position: relative;

    min-height: 290px;
    padding: 30px 34px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

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

    color: #ffffff;
    text-decoration: none;

    transition:
        background 0.25s ease,
        color 0.25s ease;
}

.members-dashboard-card:hover {
    background: #f3f1eb;
    color: #111111;
}


/* NUMBER
---------------------------------------------------------- */

.members-card-number {
    font-size: 14px;

    color: rgba(255,255,255,0.4);
}

.members-dashboard-card:hover .members-card-number {
    color: #88857e;
}


/* CARD CONTENT
---------------------------------------------------------- */

.members-dashboard-card > div {
    max-width: 470px;
}

.members-card-label {
    display: block;
    margin-bottom: 10px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;

    color: #ff2449;
}

.members-dashboard-card h3 {
    margin: 0 0 16px;

    font-size: clamp(24px, 2.2vw, 34px);
    line-height: 1.05;
    letter-spacing: -1px;

    color: #ffffff;
}

.members-dashboard-card:hover h3 {
    color: #111111;
}

.members-dashboard-card p {
    max-width: 390px;
    margin: 0;

    font-size: 15px;
    line-height: 1.6;

    color: rgba(255,255,255,0.6);
}

.members-dashboard-card:hover p {
    color: #626262;
}


/* ARROW
---------------------------------------------------------- */

.members-card-arrow {
    position: absolute;
    top: 27px;
    right: 32px;

    font-size: 25px;
    font-weight: 300;

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

    transition: transform 0.2s ease;
}

.members-dashboard-card:hover .members-card-arrow {
    transform: translateX(6px);
    color: #111111;
}


/* ==========================================================
   ADMIN CARD
   ========================================================== */

.members-admin-card {
    background: #ff2449;
}

.members-admin-card .members-card-label {
    color: rgba(255,255,255,0.75);
}

.members-admin-card:hover {
    background: #ffffff;
}

.members-admin-card:hover .members-card-label {
    color: #ff2449;
}


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

@media (max-width: 1050px) {

    .members-dashboard-heading {
        grid-template-columns: 1fr 1fr;
        gap: 60px;
    }

}


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

@media (max-width: 768px) {

    .members-dashboard {
        padding: 75px 0 90px;
    }

    .members-dashboard-inner {
        padding: 0 24px;
    }

    .members-dashboard-heading {
        display: block;
        padding-bottom: 65px;
    }

    .members-dashboard-heading h1 {
        font-size: clamp(52px, 16vw, 72px);
        letter-spacing: -3px;
    }

    .members-welcome {
        padding-top: 50px;
    }

    .members-welcome h2 {
        font-size: 38px;
    }

    .members-welcome p {
        font-size: 17px;
    }

    .members-dashboard-grid {
        display: block;
    }

    .members-dashboard-card {
        min-height: 250px;
        padding: 28px 24px;
    }

    .members-card-arrow {
        top: 25px;
        right: 24px;
    }

}

/* ==========================================================
   MEMBER ADMINISTRATION
   ========================================================== */

.member-admin-page {
    min-height: 75vh;
    padding: 110px 0 130px;

    background: #f3f1eb;
    color: #111111;
}

.member-admin-inner {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 45px;
}


/* HEADING
---------------------------------------------------------- */

.member-admin-heading {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 100px;

    padding-bottom: 90px;
}

.member-admin-eyebrow {
    display: block;
    margin-bottom: 38px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;

    color: #ff2449;
}

.member-admin-heading h1 {
    margin: 0;

    font-size: clamp(65px, 7vw, 105px);
    line-height: 0.85;
    letter-spacing: -5px;

    color: #111111;
}

.member-admin-heading h1 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -4px;
}


/* INTRO
---------------------------------------------------------- */

.member-admin-intro {
    max-width: 620px;
    padding-top: 45px;
}

.member-admin-intro > span {
    display: block;
    margin-bottom: 14px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;

    color: #ff2449;
}

.member-admin-intro h2 {
    margin: 0 0 20px;

    font-size: clamp(30px, 3vw, 45px);
    line-height: 1.1;

    color: #111111;
}

.member-admin-intro p {
    max-width: 540px;
    margin: 0 0 30px;

    font-size: 18px;
    line-height: 1.7;

    color: #5e5e5e;
}

.member-admin-intro .members-logout {
    color: #111111;
    border-color: rgba(0,0,0,0.4);
}


/* ==========================================================
   SUMMARY
   ========================================================== */

.member-admin-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    margin-bottom: 70px;

    border-top: 1px solid #c8c5bd;
    border-left: 1px solid #c8c5bd;
}

.member-admin-summary > div {
    min-height: 145px;
    padding: 25px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border-right: 1px solid #c8c5bd;
    border-bottom: 1px solid #c8c5bd;
}

.member-admin-summary span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #77746d;
}

.member-admin-summary strong {
    font-size: clamp(38px, 4vw, 58px);
    line-height: 1;

    color: #111111;
}


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

.member-admin-list {
    border-top: 1px solid #bbb8b0;
}

.member-admin-list-heading {
    min-height: 70px;
    padding: 0 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid #bbb8b0;
}

.member-admin-list-heading span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;

    color: #ff2449;
}

.member-admin-list-heading strong {
    font-size: 11px;
    letter-spacing: 2px;

    color: #77746d;
}


/* MEMBER ROW
---------------------------------------------------------- */

.member-admin-row {
    display: grid;
    grid-template-columns:
    minmax(280px, 2fr)
    minmax(90px, 0.7fr)
    minmax(110px, 0.8fr)
    minmax(140px, 1fr)
    70px;

    gap: 25px;
    align-items: center;

    min-height: 95px;
    padding: 15px 20px;

    border-bottom: 1px solid #cbc8c0;
}

.member-admin-row:hover {
    background: #ffffff;
}


/* NAME / EMAIL
---------------------------------------------------------- */

.member-admin-name {
    min-width: 0;
}

.member-admin-name strong {
    display: block;
    margin-bottom: 6px;

    font-size: 17px;
    color: #111111;
}

.member-admin-name span {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;

    font-size: 13px;
    color: #737373;
}


/* ROLE
---------------------------------------------------------- */

.member-admin-role {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: #77746d;
}


/* STATUS
---------------------------------------------------------- */

.member-status {
    display: inline-block;

    padding: 7px 10px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.member-status-active {
    background: #002b1e;
    color: #ffffff;
}

.member-status-pending {
    border: 1px solid #b9b5ac;
    color: #66635d;
}

.member-status-disabled {
    background: #111111;
    color: #ffffff;
}


/* LAST LOGIN
---------------------------------------------------------- */

.member-admin-login {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;

    color: #77746d;
}


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

@media (max-width: 1050px) {

    .member-admin-heading {
        grid-template-columns: 1fr 1fr;
        gap: 60px;
    }

    .member-admin-row {
        grid-template-columns:
            minmax(220px, 2fr)
            80px
            100px
            120px;

        gap: 15px;
    }

}


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

@media (max-width: 768px) {

    .member-admin-page {
        padding: 75px 0 90px;
    }

    .member-admin-inner {
        padding: 0 24px;
    }

    .member-admin-heading {
        display: block;
        padding-bottom: 65px;
    }

    .member-admin-heading h1 {
        font-size: clamp(52px, 16vw, 72px);
        letter-spacing: -3px;
    }

    .member-admin-intro {
        padding-top: 50px;
    }

    .member-admin-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 55px;
    }

    .member-admin-summary > div {
        min-height: 120px;
    }

    .member-admin-row {
        display: block;
        padding: 22px 5px;
    }

    .member-admin-name {
        margin-bottom: 18px;
    }

    .member-admin-role,
    .member-admin-status,
    .member-admin-login {
        display: inline-block;
        margin-right: 15px;
        margin-bottom: 8px;
    }

}

/* MEMBER ADMIN ACTION
---------------------------------------------------------- */

.member-admin-action {
    text-align: right;
}

.member-admin-action a {
    display: inline-block;

    padding: 8px 0;

    border-bottom: 1px solid #aaa69d;

    color: #111111;
    text-decoration: none;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.member-admin-action a:hover {
    border-color: #ff2449;
    color: #ff2449;
}


@media (max-width: 768px) {

    .member-admin-action {
        display: inline-block;
        margin-top: 10px;
        text-align: left;
    }

}

/* ==========================================================
   EDIT MEMBER
   ========================================================== */

.member-edit-page {
    min-height: 75vh;
    padding: 110px 0 130px;
    background: #f3f1eb;
    color: #111111;
}

.member-edit-inner {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 45px;
}


/* HEADING
---------------------------------------------------------- */

.member-edit-heading {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 100px;
    padding-bottom: 90px;
}

.member-edit-heading h1 {
    margin: 0;

    font-size: clamp(65px, 7vw, 105px);
    line-height: 0.85;
    letter-spacing: -5px;

    color: #111111;
}

.member-edit-heading h1 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -4px;
}


/* INTRO
---------------------------------------------------------- */

.member-edit-intro {
    max-width: 620px;
    padding-top: 45px;
}

.member-edit-intro > span {
    display: block;
    margin-bottom: 14px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;

    color: #ff2449;
}

.member-edit-intro h2 {
    margin: 0 0 20px;

    font-size: clamp(30px, 3vw, 45px);
    line-height: 1.1;

    color: #111111;
}

.member-edit-intro p {
    max-width: 540px;
    margin: 0 0 30px;

    font-size: 18px;
    line-height: 1.7;

    color: #5e5e5e;
}

.member-edit-intro .members-logout {
    color: #111111;
    border-color: rgba(0,0,0,0.4);
}


/* ==========================================================
   EDIT PANEL
   ========================================================== */

.member-edit-panel {
    max-width: 950px;
    margin-left: auto;

    padding: 50px;

    background: #002b1e;
    color: #ffffff;
}


/* MESSAGE
---------------------------------------------------------- */

.member-edit-message {
    margin-bottom: 35px;
    padding: 16px 18px;

    font-size: 14px;
    line-height: 1.5;
}

.member-edit-message.success {
    border: 1px solid rgba(255,255,255,0.5);
    color: #ffffff;
}

.member-edit-message.error {
    border: 1px solid #ff2449;
    color: #ffffff;
}


/* ==========================================================
   FORM
   ========================================================== */

.member-edit-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

.member-edit-field-full {
    grid-column: 1 / -1;
}

.member-edit-field label {
    display: block;
    margin-bottom: 10px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;

    color: rgba(255,255,255,0.65);
}

.member-edit-field input,
.member-edit-field select {
    width: 100%;
    box-sizing: border-box;

    min-height: 52px;
    padding: 13px 15px;

    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 0;

    background: rgba(255,255,255,0.06);
    color: #ffffff;

    font-family: inherit;
    font-size: 16px;

    outline: none;
}

.member-edit-field input:focus,
.member-edit-field select:focus {
    border-color: #ffffff;
    background: rgba(255,255,255,0.1);
}

.member-edit-field select option {
    color: #111111;
    background: #ffffff;
}

.member-edit-field select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}


/* ==========================================================
   ACCOUNT META
   ========================================================== */

.member-edit-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    margin: 45px 0;

    border-top: 1px solid rgba(255,255,255,0.2);
    border-left: 1px solid rgba(255,255,255,0.2);
}

.member-edit-meta > div {
    min-height: 95px;
    padding: 20px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border-right: 1px solid rgba(255,255,255,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.member-edit-meta span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;

    color: rgba(255,255,255,0.5);
}

.member-edit-meta strong {
    font-size: 15px;
    color: #ffffff;
}


/* ==========================================================
   SAVE BUTTON
   ========================================================== */

.member-edit-save {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;

    min-width: 220px;
    padding: 16px 0;

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

    background: transparent;
    color: #ffffff;

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;

    cursor: pointer;
}

.member-edit-save span {
    font-size: 21px;
    font-weight: 400;

    transition: transform 0.2s ease;
}

.member-edit-save:hover span {
    transform: translateX(7px);
}


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

@media (max-width: 768px) {

    .member-edit-page {
        padding: 75px 0 90px;
    }

    .member-edit-inner {
        padding: 0 24px;
    }

    .member-edit-heading {
        display: block;
        padding-bottom: 60px;
    }

    .member-edit-heading h1 {
        font-size: clamp(52px, 16vw, 72px);
        letter-spacing: -3px;
    }

    .member-edit-intro {
        padding-top: 50px;
    }

    .member-edit-panel {
        padding: 32px 24px;
    }

    .member-edit-form-grid {
        display: block;
    }

    .member-edit-field {
        margin-bottom: 25px;
    }

    .member-edit-meta {
        grid-template-columns: 1fr;
    }

}

/* ADD MEMBER BUTTON
---------------------------------------------------------- */

.member-admin-list-actions {
    display: flex;
    align-items: center;
    gap: 30px;
}

.member-admin-list-actions a {
    display: inline-block;

    padding: 9px 13px;

    background: #002b1e;
    color: #ffffff;

    text-decoration: none;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.member-admin-list-actions a:hover {
    background: #ff2449;
}


@media (max-width: 768px) {

    .member-admin-list-actions {
        gap: 12px;
    }

    .member-admin-list-actions strong {
        display: none;
    }

}

/* MEMBER ACTIVATION BUTTON
---------------------------------------------------------- */

.member-admin-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
}

.member-activation-form {
    margin: 0;
}

.member-activation-form button {
    padding: 8px 0;

    border: 0;
    border-bottom: 1px solid #002b1e;

    background: transparent;
    color: #002b1e;

    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;

    cursor: pointer;
    white-space: nowrap;
}

.member-activation-form button:hover {
    border-color: #ff2449;
    color: #ff2449;
}

@media (max-width: 768px) {

    .member-admin-action {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 18px;
    }

}

/* ==========================================================
   MEMBER ADMIN MESSAGES
   ========================================================== */

.member-admin-page .member-edit-message {
    margin-bottom: 35px;
    padding: 16px 18px;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.member-admin-page .member-edit-message.success {
    background: #002b1e;
    border: 1px solid #002b1e;
    color: #ffffff;
}

.member-admin-page .member-edit-message.error {
    background: #ff2449;
    border: 1px solid #ff2449;
    color: #ffffff;
}

/* FORGOT PASSWORD LINK
---------------------------------------------------------- */

.account-forgot {
    margin-top: 12px;
    text-align: right;
}

.account-forgot a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;

    font-size: 12px;
}

.account-forgot a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* ==========================================================
   MEMBER DELETE / DANGER ZONE
   ========================================================== */

.member-danger-zone {
    margin-top: 50px;
    padding-top: 35px;

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

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.member-danger-copy {
    max-width: 560px;
}

.member-danger-copy span {
    display: block;
    margin-bottom: 8px;

    color: #ff2449;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.member-danger-copy h3 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 20px;
}

.member-danger-copy p {
    margin: 0;

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

    font-size: 13px;
    line-height: 1.6;
}

.member-danger-zone form {
    flex-shrink: 0;
    margin: 0;
}

.member-danger-zone button {
    padding: 13px 18px;

    border: 1px solid #ff2449;
    background: transparent;
    color: #ff2449;

    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;

    cursor: pointer;
}

.member-danger-zone button:hover {
    background: #ff2449;
    color: #ffffff;
}

@media (max-width: 768px) {

    .member-danger-zone {
        align-items: flex-start;
        flex-direction: column;
    }

}

/* ==========================================================
   MEMBER INVITATION STATUS
   ========================================================== */

.member-status-invited {
    background: #ff2449;
    color: #ffffff;
}

.member-invited-date {
    display: block;
    margin-top: 7px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;

    color: #77746d;
}

/* ==========================================================
   MEMBER ADMIN SEARCH + FILTERS
   ========================================================== */

.member-admin-tools {
    padding: 25px 20px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 35px;

    border-bottom: 1px solid #bbb8b0;
}

.member-admin-search {
    width: 100%;
    max-width: 380px;
}

.member-admin-search label {
    display: block;
    margin-bottom: 9px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #77746d;
}

.member-admin-search input {
    width: 100%;
    padding: 11px 0;

    border: 0;
    border-bottom: 1px solid #9e9b94;
    border-radius: 0;

    background: transparent;
    color: #111111;

    font-family: inherit;
    font-size: 15px;

    outline: none;
}

.member-admin-search input:focus {
    border-color: #ff2449;
}

.member-admin-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.member-filter {
    padding: 9px 11px;

    border: 1px solid #aaa69d;

    background: transparent;
    color: #66635d;

    font-family: inherit;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;

    cursor: pointer;
}

.member-filter:hover {
    border-color: #002b1e;
    color: #002b1e;
}

.member-filter.active {
    border-color: #002b1e;
    background: #002b1e;
    color: #ffffff;
}


@media (max-width: 850px) {

    .member-admin-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .member-admin-search {
        max-width: none;
    }

}

/* ==========================================================
   EXPIRED MEMBER INVITATION
   ========================================================== */

.member-status-expired {
    background: #111111;
    color: #ffffff;
}

/* ==========================================================
   DOCUMENT ADMIN
   ========================================================== */

.document-admin-panel,
.document-list-panel {
    margin-top: 45px;
    border: 1px solid #bbb8b0;
    background: #f5f3ee;
}

.document-admin-panel {
    padding: 35px;
}

.document-admin-panel-heading {
    margin-bottom: 35px;
}

.document-admin-panel-heading > span {
    display: block;
    margin-bottom: 8px;

    color: #ff2449;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.document-admin-panel-heading h2 {
    margin: 0 0 10px;

    color: #002b1e;

    font-size: 27px;
}

.document-admin-panel-heading p {
    margin: 0;

    color: #68655f;

    font-size: 14px;
    line-height: 1.6;
}

.document-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px 30px;
}

.document-field {
    display: flex;
    flex-direction: column;
}

.document-field-full {
    grid-column: 1 / -1;
}

.document-field label {
    margin-bottom: 9px;

    color: #5f5c56;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.document-field label span {
    margin-left: 5px;
    opacity: 0.55;
}

.document-field input[type="text"],
.document-field select,
.document-field textarea {
    width: 100%;
    padding: 12px;

    border: 1px solid #aaa69d;
    border-radius: 0;

    background: #ffffff;
    color: #111111;

    font: inherit;
}

.document-field textarea {
    resize: vertical;
}

.document-field input:focus,
.document-field select:focus,
.document-field textarea:focus {
    outline: none;
    border-color: #002b1e;
}

.document-field input[type="file"] {
    padding: 12px 0;
}

.document-field small {
    margin-top: 7px;

    color: #77746d;
    font-size: 11px;
}

.document-upload-button {
    margin-top: 30px;
    padding: 14px 18px;

    border: 1px solid #002b1e;

    background: #002b1e;
    color: #ffffff;

    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;

    cursor: pointer;
}

.document-upload-button:hover {
    background: transparent;
    color: #002b1e;
}


/* DOCUMENT LIST */

.document-list-panel {
    overflow: hidden;
}

.document-admin-row {
    display: grid;

    grid-template-columns:
    minmax(220px, 2fr)
    minmax(140px, 1fr)
    90px
    110px
    90px
    260px;

    align-items: center;
    gap: 20px;

    padding: 20px;

    border-top: 1px solid #d1cec6;
}

.document-admin-name strong {
    display: block;

    color: #002b1e;
    font-size: 14px;
}

.document-admin-name span {
    display: block;
    margin-top: 5px;

    color: #77746d;
    font-size: 11px;
}

.document-admin-category,
.document-admin-size,
.document-admin-date {
    color: #5f5c56;

    font-size: 11px;
    line-height: 1.5;
}

.document-empty {
    padding: 40px 20px;
}

.document-empty strong {
    color: #002b1e;
}

.document-empty p {
    margin: 7px 0 0;

    color: #77746d;
    font-size: 13px;
}


@media (max-width: 850px) {

    .document-form-grid {
        grid-template-columns: 1fr;
    }

    .document-field-full {
        grid-column: auto;
    }

    .document-admin-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

}

/* DOCUMENT ADMIN DOWNLOAD
---------------------------------------------------------- */

.document-admin-action {
    text-align: right;
}

.document-admin-action a {
    color: #002b1e;
    text-decoration: none;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.document-admin-action a:hover {
    color: #ff2449;
}

/* ==========================================================
   MEMBER DOCUMENT LIBRARY
   ========================================================== */

.member-documents-page {
    background: #f5f3ee;
    min-height: 70vh;
}

.member-documents-inner {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 70px 0 90px;
}


/* HEADING
---------------------------------------------------------- */

.member-documents-heading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;

    margin-bottom: 70px;
}

.member-documents-eyebrow,
.member-documents-intro > span {
    display: block;
    margin-bottom: 15px;

    color: #ff2449;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.member-documents-heading h1 {
    margin: 0;

    color: #002b1e;

    font-size: clamp(48px, 7vw, 90px);
    line-height: 0.88;
    letter-spacing: -3px;
}

.member-documents-heading h1 em {
    font-weight: 400;
}

.member-documents-intro {
    align-self: end;
    max-width: 480px;
}

.member-documents-intro h2 {
    margin: 0 0 15px;

    color: #002b1e;

    font-size: 28px;
    line-height: 1.15;
}

.member-documents-intro p {
    margin: 0 0 25px;

    color: #68655f;

    font-size: 14px;
    line-height: 1.7;
}


/* LIBRARY
---------------------------------------------------------- */

.member-document-library {
    border-top: 1px solid #aaa69d;
}

.member-document-category {
    margin-bottom: 55px;
}

.member-document-category-heading {
    padding: 17px 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid #aaa69d;
}

.member-document-category-heading span {
    color: #002b1e;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;

    text-transform: uppercase;
}

.member-document-category-heading strong {
    color: #77746d;

    font-size: 9px;
    letter-spacing: 1.2px;
}


/* DOCUMENT ROW
---------------------------------------------------------- */

.member-document-row {
    display: grid;

    grid-template-columns:
        minmax(300px, 1fr)
        180px
        120px;

    align-items: center;
    gap: 30px;

    padding: 25px 0;

    border-bottom: 1px solid #d1cec6;
}

.member-document-main {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.member-document-type {
    min-width: 45px;
    padding: 7px 5px;

    border: 1px solid #002b1e;

    color: #002b1e;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;

    text-align: center;
}

.member-document-main h3 {
    margin: 0;

    color: #002b1e;

    font-size: 17px;
    line-height: 1.25;
}

.member-document-main p {
    max-width: 620px;
    margin: 7px 0 0;

    color: #77746d;

    font-size: 12px;
    line-height: 1.6;
}

.member-document-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;

    color: #77746d;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.member-document-download {
    text-align: right;
}

.member-document-download a {
    color: #002b1e;

    text-decoration: none;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.member-document-download a:hover {
    color: #ff2449;
}


/* EMPTY LIBRARY
---------------------------------------------------------- */

.member-documents-empty {
    padding: 60px 0;
}

.member-documents-empty > span {
    display: block;
    margin-bottom: 10px;

    color: #ff2449;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.member-documents-empty h2 {
    margin: 0 0 10px;

    color: #002b1e;
}

.member-documents-empty p {
    margin: 0;

    color: #77746d;
}


/* MOBILE
---------------------------------------------------------- */

@media (max-width: 800px) {

    .member-documents-inner {
        padding-top: 45px;
    }

    .member-documents-heading {
        grid-template-columns: 1fr;
        gap: 40px;

        margin-bottom: 50px;
    }

    .member-document-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .member-document-meta {
        padding-left: 65px;
    }

    .member-document-download {
        padding-left: 65px;
        text-align: left;
    }

}

/* DOCUMENT SHOW / HIDE
---------------------------------------------------------- */

.document-admin-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.document-admin-action form {
    margin: 0;
}

.document-admin-action button {
    padding: 0;

    border: 0;
    background: transparent;
    color: #77746d;

    font-family: inherit;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;

    cursor: pointer;
}

.document-admin-action button:hover {
    color: #ff2449;
}

/* DOCUMENT DELETE
---------------------------------------------------------- */

.document-admin-action .document-delete-button {
    color: #ff2449;
}

.document-admin-action .document-delete-button:hover {
    color: #b40020;
}

/* ==========================================================
   TRAINING ADMIN
   ========================================================== */

.training-admin-panel,
.training-list-panel {
    margin-top: 45px;

    border: 1px solid #bbb8b0;

    background: #f5f3ee;
}

.training-admin-panel {
    padding: 35px;
}


/* HEADING
---------------------------------------------------------- */

.training-admin-panel-heading {
    margin-bottom: 35px;
}

.training-admin-panel-heading > span {
    display: block;
    margin-bottom: 8px;

    color: #ff2449;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.training-admin-panel-heading h2 {
    margin: 0 0 10px;

    color: #002b1e;

    font-size: 27px;
}

.training-admin-panel-heading p {
    max-width: 650px;
    margin: 0;

    color: #68655f;

    font-size: 14px;
    line-height: 1.6;
}


/* FORM
---------------------------------------------------------- */

.training-form-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 25px 30px;
}


/* VISIBILITY
---------------------------------------------------------- */

.training-visibility-field > label {
    display: block;
}

.training-visibility-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.training-visibility-options > label {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 18px;

    border: 1px solid #aaa69d;

    background: #ffffff;

    cursor: pointer;
}

.training-visibility-options input {
    margin-top: 3px;
}

.training-visibility-options span {
    color: #68655f;

    font-size: 12px;
    line-height: 1.5;
}

.training-visibility-options strong {
    display: block;
    margin-bottom: 4px;

    color: #002b1e;

    font-size: 10px;
    letter-spacing: 1px;
}


/* SESSION LIST
---------------------------------------------------------- */

.training-list-panel {
    overflow: hidden;
}

.training-admin-row {
    display: grid;

    grid-template-columns:
    90px
    minmax(300px, 1fr)
    110px
    100px
    110px;

    align-items: center;
    gap: 25px;

    padding: 20px;

    border-top: 1px solid #d1cec6;
}

.training-admin-date span {
    display: block;

    color: #002b1e;

    font-size: 25px;
    font-weight: 700;
    line-height: 1;
}

.training-admin-date strong {
    display: block;
    margin-top: 5px;

    color: #77746d;

    font-size: 8px;
    letter-spacing: 1px;
}

.training-admin-name > strong {
    display: block;

    color: #002b1e;

    font-size: 14px;
}

.training-admin-name > span {
    display: block;

    max-width: 600px;
    margin-top: 6px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #77746d;

    font-size: 11px;
}

.training-resource-yes,
.training-resource-none {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.training-resource-yes {
    color: #002b1e;
}

.training-resource-none {
    color: #99958c;
}


/* MOBILE
---------------------------------------------------------- */

@media (max-width: 800px) {

    .training-form-grid {
        grid-template-columns: 1fr;
    }

    .training-visibility-options {
        grid-template-columns: 1fr;
    }

    .training-admin-row {
        grid-template-columns: 70px 1fr;
        gap: 15px;
    }

    .training-admin-resources,
    .training-admin-status {
        grid-column: 2;
    }

}

/* ==========================================================
   TRAINING SESSION RESOURCES
   ========================================================== */

.training-resource-list {
    border-top: 1px solid #bbb8b0;
}

.training-resource-item {
    display: grid;
    grid-template-columns: 25px 1fr 90px;
    align-items: center;
    gap: 15px;

    padding: 18px 5px;

    border-bottom: 1px solid #d1cec6;

    cursor: pointer;
}

.training-resource-item:hover {
    background: rgba(0, 43, 30, 0.03);
}

.training-resource-item > input {
    width: 16px;
    height: 16px;
    margin: 0;

    cursor: pointer;
}

.training-resource-info strong {
    display: block;

    color: #002b1e;

    font-size: 14px;
}

.training-resource-info span {
    display: block;
    margin-top: 5px;

    color: #77746d;

    font-size: 10px;
    line-height: 1.5;
}

.training-resource-status {
    text-align: right;
}

.training-resource-admin-link {
    display: inline-block;
    margin-top: 20px;

    color: #002b1e;

    text-decoration: none;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.training-resource-admin-link:hover {
    color: #ff2449;
}


@media (max-width: 700px) {

    .training-resource-item {
        grid-template-columns: 25px 1fr;
    }

    .training-resource-status {
        grid-column: 2;
        text-align: left;
    }

}

.training-admin-actions {
    text-align: right;
}

.training-admin-actions a {
    color: #002b1e;
    text-decoration: none;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.training-admin-actions a:hover {
    color: #ff2449;
}

/* ==========================================================
   TRAINING CATCH-UP
   ========================================================== */

.training-catchup-page {
    background: #f5f3ee;
    min-height: 70vh;
}

.training-catchup-inner {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 70px 0 90px;
}


/* PAGE HEADING
---------------------------------------------------------- */

.training-catchup-heading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;

    margin-bottom: 70px;
}

.training-catchup-eyebrow,
.training-catchup-intro > span {
    display: block;
    margin-bottom: 15px;

    color: #ff2449;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.training-catchup-heading h1 {
    margin: 0;

    color: #002b1e;

    font-size: clamp(48px, 7vw, 90px);
    line-height: 0.88;
    letter-spacing: -3px;
}

.training-catchup-heading h1 em {
    font-weight: 400;
}

.training-catchup-intro {
    align-self: end;
    max-width: 480px;
}

.training-catchup-intro h2 {
    margin: 0 0 15px;

    color: #002b1e;

    font-size: 28px;
    line-height: 1.15;
}

.training-catchup-intro p {
    margin: 0 0 25px;

    color: #68655f;

    font-size: 14px;
    line-height: 1.7;
}


/* SESSION
---------------------------------------------------------- */

.training-catchup-list {
    border-top: 1px solid #aaa69d;
}

.training-catchup-session {
    display: grid;
    grid-template-columns: 115px 1fr;
    gap: 40px;

    padding: 45px 0;

    border-bottom: 1px solid #aaa69d;
}

.training-catchup-date span {
    display: block;

    color: #002b1e;

    font-size: 46px;
    font-weight: 700;
    line-height: 0.9;
}

.training-catchup-date strong {
    display: block;
    margin-top: 10px;

    color: #77746d;

    font-size: 9px;
    letter-spacing: 1.4px;
}

.training-catchup-label {
    display: block;
    margin-bottom: 8px;

    color: #ff2449;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.training-catchup-content > h2 {
    margin: 0;

    color: #002b1e;

    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.05;
}

.training-catchup-summary {
    max-width: 760px;
    margin: 15px 0 0;

    color: #68655f;

    font-size: 14px;
    line-height: 1.7;
}


/* VIDEO
---------------------------------------------------------- */

.training-catchup-video {
    margin-top: 25px;
}

.training-catchup-video a {
    display: inline-block;

    padding: 12px 15px;

    border: 1px solid #002b1e;

    background: #002b1e;
    color: #ffffff;

    text-decoration: none;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.training-catchup-video a:hover {
    background: transparent;
    color: #002b1e;
}


/* SESSION RESOURCES
---------------------------------------------------------- */

.training-catchup-resources {
    margin-top: 30px;

    border-top: 1px solid #bbb8b0;
}

.training-catchup-resources-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 13px 0;

    border-bottom: 1px solid #d1cec6;
}

.training-catchup-resources-heading span {
    color: #002b1e;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.training-catchup-resources-heading strong {
    color: #77746d;

    font-size: 8px;
    letter-spacing: 1px;
}

.training-catchup-resource {
    display: grid;

    grid-template-columns:
        50px
        minmax(250px, 1fr)
        90px
        110px;

    align-items: center;
    gap: 20px;

    padding: 18px 0;

    border-bottom: 1px solid #d1cec6;
}

.training-catchup-filetype {
    padding: 6px 4px;

    border: 1px solid #002b1e;

    color: #002b1e;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;

    text-align: center;
}

.training-catchup-resource-name strong {
    display: block;

    color: #002b1e;

    font-size: 13px;
}

.training-catchup-resource-name span {
    display: block;
    margin-top: 5px;

    color: #77746d;

    font-size: 11px;
    line-height: 1.5;
}

.training-catchup-resource-size {
    color: #77746d;

    font-size: 9px;
    font-weight: 700;
}

.training-catchup-download {
    text-align: right;
}

.training-catchup-download a {
    color: #002b1e;

    text-decoration: none;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.training-catchup-download a:hover {
    color: #ff2449;
}


/* EMPTY STATE
---------------------------------------------------------- */

.training-catchup-empty {
    padding: 60px 0;
}

.training-catchup-empty > span {
    display: block;
    margin-bottom: 10px;

    color: #ff2449;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.training-catchup-empty h2 {
    margin: 0 0 10px;

    color: #002b1e;
}

.training-catchup-empty p {
    margin: 0;

    color: #77746d;
}


/* MOBILE
---------------------------------------------------------- */

@media (max-width: 800px) {

    .training-catchup-inner {
        padding-top: 45px;
    }

    .training-catchup-heading {
        grid-template-columns: 1fr;
        gap: 40px;

        margin-bottom: 50px;
    }

    .training-catchup-session {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .training-catchup-resource {
        grid-template-columns: 45px 1fr;
    }

    .training-catchup-resource-size {
        grid-column: 2;
    }

    .training-catchup-download {
        grid-column: 2;
        text-align: left;
    }

}

/* TRAINING CATCH-UP BACK LINK
---------------------------------------------------------- */

.training-catchup-intro .members-logout {
    color: #002b1e;
    opacity: 1;
}

.training-catchup-intro .members-logout:hover {
    color: #ff2449;
}

/* TRAINING ADMIN ACTIONS
---------------------------------------------------------- */

.training-admin-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.training-admin-actions form {
    margin: 0;
}

.training-admin-actions button {
    padding: 0;
    border: 0;
    background: transparent;

    color: #77746d;

    font-family: inherit;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;

    cursor: pointer;
}

.training-admin-actions button:hover {
    color: #ff2449;
}

/* TRAINING EDIT
---------------------------------------------------------- */

.training-edit-buttons {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 30px;
}

.training-edit-resources {
    color: #002b1e;
    text-decoration: none;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.training-edit-resources:hover {
    color: #ff2449;
}

@media (max-width: 600px) {

    .training-edit-buttons {
        align-items: flex-start;
        flex-direction: column;
    }

}

/* TRAINING DELETE
---------------------------------------------------------- */

.training-admin-actions .training-delete-button {
    color: #ff2449;
}

.training-admin-actions .training-delete-button:hover {
    color: #b40020;
}

/* ==========================================================
   GAME RECORDING ADMIN
   ========================================================== */

.recording-admin-panel,
.recording-list-panel {
    margin-top: 45px;

    border: 1px solid #bbb8b0;

    background: #f5f3ee;
}

.recording-admin-panel {
    padding: 35px;
}


/* HEADING
---------------------------------------------------------- */

.recording-admin-panel-heading {
    margin-bottom: 35px;
}

.recording-admin-panel-heading > span {
    display: block;
    margin-bottom: 8px;

    color: #ff2449;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.recording-admin-panel-heading h2 {
    margin: 0 0 10px;

    color: #002b1e;

    font-size: 27px;
}

.recording-admin-panel-heading p {
    max-width: 650px;
    margin: 0;

    color: #68655f;

    font-size: 14px;
    line-height: 1.6;
}


/* FORM
---------------------------------------------------------- */

.recording-form-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 25px 30px;
}


/* RECORDING LIST
---------------------------------------------------------- */

.recording-list-panel {
    overflow: hidden;
}

.recording-admin-row {
    display: grid;

    grid-template-columns:
    90px
    minmax(280px, 1fr)
    90px
    100px
    80px;

    align-items: center;
    gap: 25px;

    padding: 20px;

    border-top: 1px solid #d1cec6;
}

.recording-admin-date span {
    display: block;

    color: #002b1e;

    font-size: 25px;
    font-weight: 700;
    line-height: 1;
}

.recording-admin-date strong {
    display: block;
    margin-top: 5px;

    color: #77746d;

    font-size: 8px;
    letter-spacing: 1px;
}

.recording-admin-name > strong {
    display: block;

    color: #002b1e;

    font-size: 14px;
}

.recording-admin-name > span {
    display: block;
    margin-top: 5px;

    color: #77746d;

    font-size: 10px;
    line-height: 1.4;
}

.recording-admin-video a {
    color: #002b1e;

    text-decoration: none;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.recording-admin-video a:hover {
    color: #ff2449;
}


/* MOBILE
---------------------------------------------------------- */

@media (max-width: 800px) {

    .recording-form-grid {
        grid-template-columns: 1fr;
    }

    .recording-admin-row {
        grid-template-columns: 70px 1fr;
        gap: 15px;
    }

    .recording-admin-video,
    .recording-admin-status {
        grid-column: 2;
    }

}

/* RECORDING ADMIN ACTIONS
---------------------------------------------------------- */

.recording-admin-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.recording-admin-actions form {
    margin: 0;
}

.recording-admin-actions button {
    padding: 0;
    border: 0;
    background: transparent;

    color: #002b1e;

    font-family: inherit;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;

    cursor: pointer;
}

.recording-admin-actions button:hover {
    color: #ff2449;
}

@media (max-width: 800px) {

    .recording-admin-actions {
        grid-column: 2;
        text-align: left;
    }

}

/* ==========================================================
   GAME RECORDINGS
   ========================================================== */

.game-recordings-page {
    min-height: 70vh;
    background: #f5f3ee;
}

.game-recordings-inner {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 70px 0 90px;
}


/* PAGE HEADING
---------------------------------------------------------- */

.game-recordings-heading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;

    margin-bottom: 70px;
}

.game-recordings-eyebrow,
.game-recordings-intro > span {
    display: block;
    margin-bottom: 15px;

    color: #ff2449;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.game-recordings-heading h1 {
    margin: 0;

    color: #002b1e;

    font-size: clamp(48px, 7vw, 90px);
    line-height: 0.88;
    letter-spacing: -3px;
}

.game-recordings-heading h1 em {
    font-weight: 400;
}

.game-recordings-intro {
    align-self: end;
    max-width: 480px;
}

.game-recordings-intro h2 {
    margin: 0 0 15px;

    color: #002b1e;

    font-size: 28px;
    line-height: 1.15;
}

.game-recordings-intro p {
    margin: 0 0 25px;

    color: #68655f;

    font-size: 14px;
    line-height: 1.7;
}

/* Fix back link on light background */

.game-recordings-intro .members-logout {
    color: #002b1e;
    opacity: 1;
}

.game-recordings-intro .members-logout:hover {
    color: #ff2449;
}


/* RECORDING
---------------------------------------------------------- */

.game-recordings-list {
    border-top: 1px solid #aaa69d;
}

.game-recording {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 55px;

    padding: 50px 0;

    border-bottom: 1px solid #aaa69d;
}

.game-recording-info {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 25px;
}

.game-recording-date span {
    display: block;

    color: #002b1e;

    font-size: 46px;
    font-weight: 700;
    line-height: 0.9;
}

.game-recording-date strong {
    display: block;
    margin-top: 10px;

    color: #77746d;

    font-size: 9px;
    letter-spacing: 1.4px;
}

.game-recording-label {
    display: block;
    margin-bottom: 8px;

    color: #ff2449;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.game-recording-details h2 {
    margin: 0;

    color: #002b1e;

    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.05;
}


/* META
---------------------------------------------------------- */

.game-recording-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;

    margin-top: 20px;
}

.game-recording-meta span {
    color: #68655f;

    font-size: 11px;
}

.game-recording-meta strong {
    display: block;
    margin-bottom: 4px;

    color: #002b1e;

    font-size: 8px;
    letter-spacing: 1px;
}

.game-recording-notes {
    margin: 22px 0 0;

    color: #68655f;

    font-size: 13px;
    line-height: 1.7;
}


/* YOUTUBE LINK
---------------------------------------------------------- */

.game-recording-youtube {
    display: inline-block;
    margin-top: 25px;

    color: #002b1e;

    text-decoration: none;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.game-recording-youtube:hover {
    color: #ff2449;
}


/* VIDEO
---------------------------------------------------------- */

.game-recording-video {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #002b1e;
}

.game-recording-video iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}

.game-recording-video-error {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 250px;
    padding: 35px;

    background: #002b1e;
}

.game-recording-video-error span {
    color: #ff2449;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.game-recording-video-error p {
    max-width: 300px;

    color: #ffffff;

    font-size: 14px;
    line-height: 1.6;
}


/* EMPTY
---------------------------------------------------------- */

.game-recordings-empty {
    padding: 60px 0;
}

.game-recordings-empty > span {
    display: block;
    margin-bottom: 10px;

    color: #ff2449;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.game-recordings-empty h2 {
    margin: 0 0 10px;

    color: #002b1e;
}

.game-recordings-empty p {
    margin: 0;

    color: #77746d;
}


/* MOBILE
---------------------------------------------------------- */

@media (max-width: 850px) {

    .game-recordings-heading {
        grid-template-columns: 1fr;
        gap: 40px;

        margin-bottom: 50px;
    }

    .game-recording {
        grid-template-columns: 1fr;
        gap: 30px;
    }

}

@media (max-width: 550px) {

    .game-recordings-inner {
        padding-top: 45px;
    }

    .game-recording-info {
        grid-template-columns: 1fr;
    }

}

.recording-admin-actions a {
    color: #002b1e;
    text-decoration: none;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.recording-admin-actions a:hover {
    color: #ff2449;
}


/* RECORDING EDIT
---------------------------------------------------------- */

.recording-edit-buttons {
    display: flex;
    align-items: center;
    gap: 25px;

    margin-top: 30px;
}

.recording-edit-watch {
    color: #002b1e;
    text-decoration: none;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.recording-edit-watch:hover {
    color: #ff2449;
}

@media (max-width: 600px) {

    .recording-edit-buttons {
        align-items: flex-start;
        flex-direction: column;
    }

}

/* RECORDING DELETE
---------------------------------------------------------- */

.recording-admin-actions .recording-delete-button {
    color: #ff2449;
}

.recording-admin-actions .recording-delete-button:hover {
    color: #b40020;
}

/* DOCUMENTS PAGE BACK LINK
---------------------------------------------------------- */

.member-documents-intro .members-logout {
    color: #002b1e;
    opacity: 1;
}

.member-documents-intro .members-logout:hover {
    color: #ff2449;
}

/* ==========================================================
   ABOUT PAGE
========================================================== */

.about-inner {
    width: min(1430px, calc(100% - 110px));
    margin: 0 auto;
}

.about-hero,
.about-what,
.about-people,
.about-history,
.about-join {
    padding: 120px 0;
}


/* SHARED EYEBROW
---------------------------------------------------------- */

.section-eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 45px;

    color: #111713;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.section-eyebrow > span:first-child {
    display: block;

    width: 52px;
    height: 3px;

    background: #ff2449;
}


/* HERO
---------------------------------------------------------- */

.about-hero {
    background: #f4f2ed;
}

.about-hero-grid {
    display: grid;
    grid-template-columns: 1.35fr .75fr;
    gap: 120px;
    align-items: end;
}

.about-hero-title h1 {
    margin: 0;

    color: #101612;

    font-size: clamp(80px, 8vw, 145px);
    line-height: .78;
    letter-spacing: -5px;
    text-transform: uppercase;
}

.about-hero-title h1 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-size: .82em;
    font-weight: 400;
    line-height: .95;
    letter-spacing: -5px;
    text-transform: lowercase;
}

.about-hero-copy {
    max-width: 500px;
    padding-bottom: 12px;
}

.about-hero-copy h2,
.about-section-copy h3,
.about-join-copy h3 {
    margin: 0 0 28px;

    color: #101612;

    font-size: 31px;
    line-height: 1.15;
}

.about-hero-copy p,
.about-section-copy p,
.about-history-copy p,
.about-join-copy p {
    margin: 0 0 18px;

    color: #6d6d68;

    font-size: 17px;
    line-height: 1.75;
}


/* WHAT WE DO
---------------------------------------------------------- */

.about-what {
    background: #ffffff;
}

.about-section-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 140px;
    align-items: start;
}

.about-large-heading {
    margin: 0;

    color: #101612;

    font-size: clamp(60px, 6.5vw, 110px);
    line-height: .83;
    letter-spacing: -4px;
    text-transform: uppercase;
}

.about-large-heading em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-size: .72em;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -3px;
    text-transform: lowercase;
}

.about-section-copy {
    max-width: 500px;
    padding-top: 75px;
}


/* SERVICES
---------------------------------------------------------- */

.about-services {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    margin-top: 110px;

    border-top: 1px solid #cbc8c0;
    border-bottom: 1px solid #cbc8c0;
}

.about-service {
    min-height: 310px;
    padding: 35px 35px 40px;

    border-right: 1px solid #cbc8c0;
}

.about-service:first-child {
    padding-left: 0;
}

.about-service:last-child {
    border-right: 0;
}

.about-service-number {
    display: block;

    margin-bottom: 55px;

    color: #ff2449;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.about-service h3 {
    margin: 0 0 22px;

    color: #101612;

    font-size: 25px;
    line-height: 1;
}

.about-service p {
    max-width: 230px;
    margin: 0;

    color: #77756f;

    font-size: 14px;
    line-height: 1.65;
}


/* PEOPLE
---------------------------------------------------------- */

.about-people {
    background: #f4f2ed;
}

.about-text-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 260px;

    margin-top: 40px;
    padding: 16px 0;

    border-bottom: 1px solid #101612;

    color: #101612;
    text-decoration: none;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.about-text-link:hover {
    color: #ff2449;
    border-color: #ff2449;
}


/* HISTORY
---------------------------------------------------------- */

.about-history {
    overflow: hidden;

    background: #071b14;
}

.about-history-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 140px;
    align-items: center;
}

.about-history-year span {
    display: block;

    margin-bottom: 10px;

    color: #ff2449;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
}

.about-history-year strong {
    display: block;

    color: #ffffff;

    font-size: clamp(130px, 18vw, 280px);
    line-height: .8;
    letter-spacing: -12px;
}

.about-history-copy {
    max-width: 530px;
}

.about-history-copy .section-eyebrow {
    color: #ffffff;
}

.about-history-copy h2 {
    margin: 0 0 30px;

    color: #ffffff;

    font-size: 45px;
    line-height: 1.05;
}

.about-history-copy p {
    color: #a6aaa7;
}

.about-history-link {
    color: #ffffff;
    border-color: #657069;
}

.about-history-link:hover {
    color: #ff2449;
    border-color: #ff2449;
}


/* JOIN CTA
---------------------------------------------------------- */

.about-join {
    background: #06150f;
}

.about-join-grid {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 140px;
    align-items: end;
}

.about-light-eyebrow {
    color: #ffffff;
}

.about-join h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(70px, 7vw, 125px);
    line-height: .8;
    letter-spacing: -5px;
}

.about-join h2 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-size: .8em;
    font-weight: 400;
    letter-spacing: -4px;
    text-transform: lowercase;
}

.about-join-copy {
    max-width: 450px;
}

.about-join-copy h3 {
    color: #ffffff;
}

.about-join-copy p {
    color: #9da49f;
}

.about-join-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 300px;

    margin-top: 38px;
    padding: 17px 0;

    border-bottom: 1px solid #718078;

    color: #ffffff;
    text-decoration: none;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.about-join-link:hover {
    color: #ff2449;
    border-color: #ff2449;
}


/* ==========================================================
   ABOUT PAGE — TABLET
========================================================== */

@media (max-width: 1000px) {

    .about-inner {
        width: min(100% - 60px, 900px);
    }

    .about-hero-grid,
    .about-section-grid,
    .about-history-grid,
    .about-join-grid {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .about-section-copy {
        padding-top: 0;
    }

    .about-services {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-service:nth-child(2) {
        border-right: 0;
    }

    .about-service:nth-child(-n+2) {
        border-bottom: 1px solid #cbc8c0;
    }

}


/* ==========================================================
   ABOUT PAGE — MOBILE
========================================================== */

@media (max-width: 650px) {

    .about-inner {
        width: calc(100% - 40px);
    }

    .about-hero,
    .about-what,
    .about-people,
    .about-history,
    .about-join {
        padding: 75px 0;
    }

    .section-eyebrow {
        margin-bottom: 32px;

        font-size: 9px;
        letter-spacing: 2.5px;
    }

    .section-eyebrow > span:first-child {
        width: 38px;
    }

    .about-hero-grid,
    .about-section-grid,
    .about-history-grid,
    .about-join-grid {
        gap: 50px;
    }

    .about-hero-title h1 {
        font-size: clamp(58px, 19vw, 90px);
        letter-spacing: -3px;
    }

    .about-large-heading {
        font-size: clamp(52px, 16vw, 80px);
        letter-spacing: -3px;
    }

    .about-hero-copy h2,
    .about-section-copy h3,
    .about-join-copy h3 {
        font-size: 26px;
    }

    .about-hero-copy p,
    .about-section-copy p,
    .about-history-copy p,
    .about-join-copy p {
        font-size: 16px;
    }

    .about-services {
        grid-template-columns: 1fr;
        margin-top: 70px;
    }

    .about-service,
    .about-service:first-child {
        min-height: 0;
        padding: 30px 0;

        border-right: 0;
        border-bottom: 1px solid #cbc8c0;
    }

    .about-service:last-child {
        border-bottom: 0;
    }

    .about-service-number {
        margin-bottom: 30px;
    }

    .about-history-year strong {
        font-size: 37vw;
        letter-spacing: -8px;
    }

    .about-history-copy h2 {
        font-size: 37px;
    }

    .about-join h2 {
        font-size: clamp(58px, 18vw, 90px);
        letter-spacing: -3px;
    }

    .about-text-link,
    .about-join-link {
        width: 100%;
    }

}

/* ==========================================================
   HISTORY PAGE
========================================================== */

.history-inner {
    width: min(1430px, calc(100% - 110px));
    margin: 0 auto;
}


/* HERO
---------------------------------------------------------- */

.history-hero {
    padding: 120px 0 135px;
    background: #f4f2ed;
}

.history-hero-grid {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 120px;
    align-items: end;
}

.history-hero h1 {
    margin: 0;

    color: #101612;

    font-size: clamp(80px, 8vw, 145px);
    line-height: .78;
    letter-spacing: -5px;
}

.history-hero h1 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-size: .82em;
    font-weight: 400;
    line-height: .95;
    letter-spacing: -5px;
    text-transform: lowercase;
}

.history-hero-copy {
    max-width: 480px;
}

.history-since {
    display: block;
    margin-bottom: 20px;

    color: #ff2449;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

.history-hero-copy h2 {
    margin: 0 0 25px;

    color: #101612;

    font-size: 31px;
    line-height: 1.15;
}

.history-hero-copy p {
    margin: 0 0 18px;

    color: #6d6d68;

    font-size: 17px;
    line-height: 1.75;
}


/* 1948 INTRO
---------------------------------------------------------- */

.history-intro {
    padding: 120px 0;
    background: #ffffff;
}

.history-intro-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 140px;
    align-items: center;
}

.history-big-year {
    color: #101612;

    font-size: clamp(150px, 20vw, 310px);
    font-weight: 700;
    line-height: .72;
    letter-spacing: -16px;
}

.history-intro-copy {
    max-width: 500px;
}

.history-intro-copy > span {
    display: block;
    margin-bottom: 18px;

    color: #ff2449;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
}

.history-intro-copy h2 {
    margin: 0 0 28px;

    color: #101612;

    font-size: 45px;
    line-height: 1.05;
}

.history-intro-copy p {
    margin: 0 0 18px;

    color: #6d6d68;

    font-size: 16px;
    line-height: 1.75;
}


/* TIMELINE
---------------------------------------------------------- */

.history-timeline {
    padding: 130px 0;
    background: #071b14;
}

.history-light-eyebrow {
    color: #ffffff;
}

.history-timeline-heading {
    margin-bottom: 120px;
}

.history-timeline-heading h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(70px, 7vw, 125px);
    line-height: .8;
    letter-spacing: -5px;
}

.history-timeline-heading h2 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-size: .8em;
    font-weight: 400;
    letter-spacing: -4px;
    text-transform: lowercase;
}


/* ERA ROWS
---------------------------------------------------------- */

.history-era {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 120px;

    padding: 75px 0;

    border-top: 1px solid #425149;
}

.history-era:last-child {
    border-bottom: 1px solid #425149;
}

.history-era-year > span {
    display: block;
    margin-bottom: 18px;

    color: #ff2449;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.history-era-year strong {
    display: block;

    color: #ffffff;

    font-size: clamp(65px, 7vw, 115px);
    line-height: .85;
    letter-spacing: -5px;
}

.history-era-content {
    max-width: 650px;
}

.history-era-label {
    display: block;
    margin-bottom: 18px;

    color: #ff2449;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
}

.history-era-content h3 {
    margin: 0 0 30px;

    color: #ffffff;

    font-size: 42px;
    line-height: 1.05;
}

.history-era-content p {
    max-width: 600px;
    margin: 0 0 18px;

    color: #a6aaa7;

    font-size: 16px;
    line-height: 1.75;
}


/* ERA STAT
---------------------------------------------------------- */

.history-era-stat {
    display: flex;
    align-items: flex-end;
    gap: 25px;

    margin-top: 45px;
    padding-top: 30px;

    border-top: 1px solid #34433b;
}

.history-era-stat strong {
    color: #ffffff;

    font-size: 72px;
    line-height: .8;
    letter-spacing: -3px;
}

.history-era-stat span {
    color: #8f9993;

    font-size: 9px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 1.5px;
}


/* TODAY
---------------------------------------------------------- */

.history-today {
    padding: 130px 0;
    background: #f4f2ed;
}

.history-today-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 140px;
}

.history-today h2 {
    margin: 0;

    color: #101612;

    font-size: clamp(75px, 8vw, 135px);
    line-height: .78;
    letter-spacing: -5px;
}

.history-today h2 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-size: .8em;
    font-weight: 400;
    letter-spacing: -4px;
    text-transform: lowercase;
}

.history-today-copy {
    max-width: 500px;
    padding-top: 70px;
}

.history-today-copy h3 {
    margin: 0 0 28px;

    color: #101612;

    font-size: 31px;
    line-height: 1.15;
}

.history-today-copy p {
    margin: 0 0 18px;

    color: #6d6d68;

    font-size: 16px;
    line-height: 1.75;
}


/* CREDIT
---------------------------------------------------------- */

.history-credit {
    padding: 55px 0;
    background: #ffffff;
}

.history-credit .history-inner {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 60px;
}

.history-credit span {
    color: #ff2449;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
}

.history-credit p {
    max-width: 750px;
    margin: 0;

    color: #77756f;

    font-size: 13px;
    line-height: 1.7;
}

.history-credit strong {
    color: #101612;
}


/* ==========================================================
   HISTORY — TABLET
========================================================== */

@media (max-width: 1000px) {

    .history-inner {
        width: min(100% - 60px, 900px);
    }

    .history-hero-grid,
    .history-intro-grid,
    .history-era,
    .history-today-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .history-era {
        gap: 40px;
    }

    .history-today-copy {
        padding-top: 0;
    }

}


/* ==========================================================
   HISTORY — MOBILE
========================================================== */

@media (max-width: 650px) {

    .history-inner {
        width: calc(100% - 40px);
    }

    .history-hero,
    .history-intro,
    .history-timeline,
    .history-today {
        padding: 75px 0;
    }

    .history-hero-grid {
        gap: 50px;
    }

    .history-hero h1 {
        font-size: clamp(58px, 19vw, 90px);
        letter-spacing: -3px;
    }

    .history-big-year {
        font-size: 34vw;
        letter-spacing: -8px;
    }

    .history-intro-copy h2 {
        font-size: 36px;
    }

    .history-timeline-heading {
        margin-bottom: 70px;
    }

    .history-timeline-heading h2 {
        font-size: clamp(58px, 18vw, 90px);
        letter-spacing: -3px;
    }

    .history-era {
        padding: 55px 0;
    }

    .history-era-year strong {
        font-size: 70px;
        letter-spacing: -3px;
    }

    .history-era-content h3 {
        font-size: 34px;
    }

    .history-era-stat strong {
        font-size: 58px;
    }

    .history-today h2 {
        font-size: clamp(62px, 19vw, 95px);
        letter-spacing: -3px;
    }

    .history-credit .history-inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}

/* ==========================================================
   HEADER — ABOUT DROPDOWN
========================================================== */

.nav-dropdown {
    position: relative;
}


/* DROPDOWN PANEL
---------------------------------------------------------- */

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;

    z-index: 1000;

    width: 290px;
    padding: 12px 0;

    background: #071b14;

    opacity: 0;
    visibility: hidden;

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

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;

    box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
}


/* Keeps dropdown reachable when moving mouse down */

.nav-dropdown-menu::before {
    content: "";

    position: absolute;
    left: 0;
    bottom: 100%;

    width: 100%;
    height: 20px;
}


/* SHOW */

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;

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


/* DROPDOWN LINKS */

.desktop-nav .nav-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 18px;

    padding: 16px 22px;

    color: #ffffff;
    text-decoration: none;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;

    white-space: nowrap;

    border: 0;
}

.desktop-nav .nav-dropdown-menu a span {
    color: #ff2449;

    font-size: 9px;
    letter-spacing: 1px;
}

.desktop-nav .nav-dropdown-menu a:hover {
    color: #ff2449;

    background: rgba(255, 255, 255, .04);
}


/* CHEVRON */

.nav-dropdown:hover .nav-chevron {
    transform: rotate(180deg);
}

.nav-chevron {
    display: inline-block;

    margin-left: 4px;

    transition: transform .2s ease;
}

/* ==========================================================
   FIX ABOUT US DESKTOP DROPDOWN
========================================================== */

.desktop-nav .nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.desktop-nav .nav-dropdown > a {
    display: flex;
    align-items: center;
    height: 100%;
}


/* Force submenu to behave as dropdown */

.desktop-nav .nav-dropdown .nav-dropdown-menu {
    position: absolute !important;

    top: 100% !important;
    left: 0 !important;

    display: block !important;

    width: 290px;
    height: auto !important;

    padding: 12px 0;

    background: #071b14;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(10px);

    z-index: 9999;
}


/* Open menu */

.desktop-nav .nav-dropdown:hover .nav-dropdown-menu,
.desktop-nav .nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}


/* Submenu links */

.desktop-nav .nav-dropdown .nav-dropdown-menu > a {
    display: flex !important;
    align-items: center;

    width: 100%;
    height: auto !important;

    padding: 16px 22px;

    color: #ffffff;

    white-space: nowrap;
}


/* Numbers */

.desktop-nav .nav-dropdown .nav-dropdown-menu > a > span {
    margin: 0;

    color: #ff2449;
}

/* ==========================================================
   MOBILE NAV — ABOUT / HISTORY
========================================================== */

.mobile-nav .mobile-sub-link {
    display: flex;
    align-items: center;
    gap: 12px;

    padding-left: 28px;

    font-size: 0.9em;
}

.mobile-nav .mobile-sub-link span {
    color: #ff2449;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* ==========================================================
   TRAINING & DEVELOPMENT PAGE
========================================================== */

.training-page-inner {
    width: min(1430px, calc(100% - 110px));
    margin: 0 auto;
}


/* HERO
---------------------------------------------------------- */

.training-hero {
    padding: 125px 0 140px;
    background: #f4f2ed;
}

.training-hero-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 120px;
    align-items: end;
}

.training-hero h1 {
    margin: 0;

    color: #101612;

    font-size: clamp(82px, 8vw, 145px);
    line-height: .79;
    letter-spacing: -6px;
}

.training-hero h1 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-size: .78em;
    font-weight: 400;
    line-height: .95;
    letter-spacing: -5px;
    text-transform: lowercase;
}

.training-hero-copy {
    max-width: 500px;
}

.training-kicker,
.training-red-label {
    display: block;
    margin-bottom: 20px;

    color: #ff2449;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
}

.training-hero-copy h2 {
    margin: 0 0 26px;

    color: #101612;

    font-size: 32px;
    line-height: 1.15;
}

.training-hero-copy p {
    margin: 0 0 18px;

    color: #6d6d68;

    font-size: 17px;
    line-height: 1.75;
}


/* DEVELOPMENT
---------------------------------------------------------- */

.training-development {
    padding: 130px 0;
    background: #ffffff;
}

.training-development-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 140px;
    align-items: end;

    margin-bottom: 100px;
}

.training-development h2 {
    margin: 0;

    color: #101612;

    font-size: clamp(75px, 7vw, 125px);
    line-height: .8;
    letter-spacing: -5px;
}

.training-development h2 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-size: .82em;
    font-weight: 400;
    letter-spacing: -4px;
    text-transform: lowercase;
}

.training-development-copy {
    max-width: 500px;
}

.training-development-copy h3 {
    margin: 0 0 25px;

    color: #101612;

    font-size: 31px;
    line-height: 1.15;
}

.training-development-copy p {
    margin: 0 0 18px;

    color: #6d6d68;

    font-size: 16px;
    line-height: 1.75;
}


/* DEVELOPMENT PILLARS
---------------------------------------------------------- */

.training-pillars {
    border-top: 1px solid #cfcfc8;
}

.training-pillar {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 45px;

    padding: 45px 0;

    border-bottom: 1px solid #cfcfc8;
}

.training-number {
    color: #ff2449;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.training-pillar > div {
    display: grid;
    grid-template-columns: 230px 320px 1fr;
    gap: 55px;
    align-items: start;
}

.training-pillar-label {
    color: #6d6d68;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.training-pillar h3 {
    margin: -5px 0 0;

    color: #101612;

    font-size: 29px;
    line-height: 1.1;
}

.training-pillar p {
    max-width: 520px;
    margin: 0;

    color: #74746f;

    font-size: 15px;
    line-height: 1.7;
}


/* MONTHLY TRAINING
---------------------------------------------------------- */

.training-monthly {
    padding: 130px 0;

    background: #071b14;
}

.training-monthly-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 140px;
    align-items: center;
}

.training-monthly-date span {
    display: block;

    color: #ffffff;

    font-size: 15px;
    font-weight: 700;
    letter-spacing: 5px;
}

.training-monthly-date strong {
    display: block;
    margin: 8px 0 14px;

    color: #ffffff;

    font-size: clamp(180px, 20vw, 310px);
    line-height: .72;
    letter-spacing: -15px;
}

.training-monthly-copy {
    max-width: 550px;
}

.training-monthly-copy h2 {
    margin: 0 0 30px;

    color: #ffffff;

    font-size: 52px;
    line-height: 1.02;
}

.training-monthly-copy p {
    margin: 0 0 18px;

    color: #a6aaa7;

    font-size: 16px;
    line-height: 1.75;
}


/* COACHING
---------------------------------------------------------- */

.training-coaching {
    padding: 130px 0;

    background: #071b14;

    border-top: 1px solid #34433b;
}

.training-light-eyebrow {
    color: #ffffff;
}

.training-coaching-heading {
    margin-bottom: 100px;
}

.training-coaching-heading h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(75px, 8vw, 135px);
    line-height: .78;
    letter-spacing: -6px;
}

.training-coaching-heading h2 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-size: .78em;
    font-weight: 400;
    letter-spacing: -4px;
    text-transform: lowercase;
}

.training-coaching-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;

    border-top: 1px solid #425149;
    border-bottom: 1px solid #425149;
}

.training-coaching-grid article {
    padding: 60px 70px 60px 0;
}

.training-coaching-grid article + article {
    padding-left: 70px;

    border-left: 1px solid #425149;
}

.training-coaching-grid article > span {
    display: block;
    margin-bottom: 30px;

    color: #ff2449;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.training-coaching-grid h3 {
    max-width: 450px;
    margin: 0 0 28px;

    color: #ffffff;

    font-size: 42px;
    line-height: 1.05;
}

.training-coaching-grid p {
    max-width: 520px;
    margin: 0 0 17px;

    color: #a6aaa7;

    font-size: 16px;
    line-height: 1.75;
}


/* FITNESS
---------------------------------------------------------- */

.training-fitness {
    padding: 130px 0;

    background: #f4f2ed;
}

.training-fitness-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 140px;
}

.training-fitness h2 {
    margin: 0;

    color: #101612;

    font-size: clamp(85px, 8vw, 140px);
    line-height: .78;
    letter-spacing: -6px;
}

.training-fitness h2 em {
    font-family: Georgia, "Times New Roman", serif;
    font-size: .8em;
    font-weight: 400;
    letter-spacing: -4px;
    text-transform: lowercase;
}

.training-fitness-copy {
    max-width: 500px;
    padding-top: 50px;
}

.training-fitness-copy h3 {
    margin: 0 0 25px;

    color: #101612;

    font-size: 31px;
    line-height: 1.15;
}

.training-fitness-copy p {
    margin: 0 0 18px;

    color: #6d6d68;

    font-size: 16px;
    line-height: 1.75;
}

.training-fitness-stat {
    display: flex;
    align-items: flex-end;
    gap: 25px;

    margin-top: 45px;
    padding-top: 30px;

    border-top: 1px solid #c8c6bf;
}

.training-fitness-stat strong {
    color: #101612;

    font-size: 68px;
    line-height: .8;
    letter-spacing: -3px;
}

.training-fitness-stat span {
    color: #77756f;

    font-size: 9px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 1.5px;
}


/* COMMUNITY
---------------------------------------------------------- */

.training-community {
    padding: 130px 0;

    background: #ffffff;
}

.training-community-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 140px;
}

.training-community h2 {
    margin: 0;

    color: #101612;

    font-size: clamp(70px, 7vw, 125px);
    line-height: .79;
    letter-spacing: -5px;
}

.training-community h2 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-size: .8em;
    font-weight: 400;
    letter-spacing: -4px;
    text-transform: lowercase;
}

.training-community-copy {
    max-width: 500px;
    padding-top: 60px;
}

.training-community-copy h3 {
    margin: 0 0 26px;

    color: #101612;

    font-size: 31px;
    line-height: 1.15;
}

.training-community-copy p {
    margin: 0 0 18px;

    color: #6d6d68;

    font-size: 16px;
    line-height: 1.75;
}


/* MEMBER CATCH-UP
---------------------------------------------------------- */

.training-members {
    padding: 110px 0;

    background: #ff2449;
}

.training-members-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 140px;
    align-items: center;
}

.training-members-label {
    display: block;
    margin-bottom: 22px;

    color: #071b14;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
}

.training-members h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(75px, 7vw, 125px);
    line-height: .8;
    letter-spacing: -5px;
}

.training-members h2 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-size: .8em;
    font-weight: 400;
    letter-spacing: -4px;
    text-transform: lowercase;
}

.training-members-copy {
    max-width: 500px;
}

.training-members-copy h3 {
    margin: 0 0 20px;

    color: #ffffff;

    font-size: 31px;
    line-height: 1.15;
}

.training-members-copy p {
    margin: 0 0 35px;

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

    font-size: 16px;
    line-height: 1.75;
}


/* ACTION LINKS
---------------------------------------------------------- */

.training-action-link {
    display: flex;
    justify-content: space-between;
    align-items: center;

    max-width: 320px;

    padding: 17px 0;

    color: #ffffff;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-decoration: none;

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

.training-action-link span {
    font-size: 22px;

    transition: transform .2s ease;
}

.training-action-link:hover span {
    transform: translateX(7px);
}


/* JOIN
---------------------------------------------------------- */

.training-join {
    padding: 130px 0;

    background: #f4f2ed;
}

.training-join-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 140px;
}

.training-join h2 {
    margin: 0;

    color: #101612;

    font-size: clamp(70px, 7vw, 120px);
    line-height: .8;
    letter-spacing: -5px;
}

.training-join h2 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-size: .82em;
    font-weight: 400;
    letter-spacing: -4px;
    text-transform: lowercase;
}

.training-join-copy {
    max-width: 500px;
    padding-top: 60px;
}

.training-join-copy h3 {
    margin: 0 0 24px;

    color: #101612;

    font-size: 32px;
}

.training-join-copy p {
    margin: 0 0 35px;

    color: #6d6d68;

    font-size: 16px;
    line-height: 1.75;
}

.training-dark-link {
    color: #101612;

    border-color: #101612;
}


/* ==========================================================
   TRAINING — TABLET
========================================================== */

@media (max-width: 1000px) {

    .training-page-inner {
        width: min(100% - 60px, 900px);
    }

    .training-hero-grid,
    .training-development-grid,
    .training-monthly-grid,
    .training-fitness-grid,
    .training-community-grid,
    .training-members-grid,
    .training-join-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .training-pillar > div {
        grid-template-columns: 180px 250px 1fr;
        gap: 30px;
    }

    .training-fitness-copy,
    .training-community-copy,
    .training-join-copy {
        padding-top: 0;
    }

}


/* ==========================================================
   TRAINING — MOBILE
========================================================== */

@media (max-width: 700px) {

    .training-page-inner {
        width: calc(100% - 40px);
    }

    .training-hero,
    .training-development,
    .training-monthly,
    .training-coaching,
    .training-fitness,
    .training-community,
    .training-members,
    .training-join {
        padding: 75px 0;
    }

    .training-hero h1 {
        font-size: clamp(58px, 18vw, 90px);
        letter-spacing: -3px;
    }

    .training-development-grid {
        margin-bottom: 60px;
    }

    .training-development h2,
    .training-coaching-heading h2,
    .training-fitness h2,
    .training-community h2,
    .training-members h2,
    .training-join h2 {
        font-size: clamp(58px, 17vw, 88px);
        letter-spacing: -3px;
    }

    .training-pillar {
        grid-template-columns: 45px 1fr;
        gap: 15px;

        padding: 35px 0;
    }

    .training-pillar > div {
        display: block;
    }

    .training-pillar-label {
        display: block;
        margin-bottom: 12px;
    }

    .training-pillar h3 {
        margin: 0 0 15px;

        font-size: 26px;
    }

    .training-monthly-date strong {
        font-size: 48vw;
        letter-spacing: -10px;
    }

    .training-monthly-copy h2 {
        font-size: 39px;
    }

    .training-coaching-heading {
        margin-bottom: 60px;
    }

    .training-coaching-grid {
        grid-template-columns: 1fr;
    }

    .training-coaching-grid article,
    .training-coaching-grid article + article {
        padding: 45px 0;

        border-left: 0;
    }

    .training-coaching-grid article + article {
        border-top: 1px solid #425149;
    }

    .training-coaching-grid h3 {
        font-size: 34px;
    }

    .training-fitness-stat strong {
        font-size: 56px;
    }

}

/* ==========================================================
   BECOME A REFEREE
========================================================== */

.become-page-inner {
    width: min(1430px, calc(100% - 110px));
    margin: 0 auto;
}

.become-red-label {
    display: block;
    margin-bottom: 20px;

    color: #ff2449;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
}


/* HERO
---------------------------------------------------------- */

.become-hero {
    padding: 125px 0 140px;

    background: #f4f2ed;
}

.become-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 130px;
    align-items: end;
}

.become-hero h1 {
    margin: 0;

    color: #101612;

    font-size: clamp(82px, 8vw, 145px);
    line-height: .79;
    letter-spacing: -6px;
}

.become-hero h1 em {
    font-family: Georgia, "Times New Roman", serif;
    font-size: .8em;
    font-weight: 400;
    letter-spacing: -5px;
    text-transform: lowercase;
}

.become-hero-copy {
    max-width: 510px;
}

.become-hero-copy h2 {
    margin: 0 0 26px;

    color: #101612;

    font-size: 34px;
    line-height: 1.12;
}

.become-hero-copy p {
    margin: 0 0 18px;

    color: #6d6d68;

    font-size: 17px;
    line-height: 1.75;
}


/* ACTION LINKS
---------------------------------------------------------- */

.become-action-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    max-width: 370px;
    margin-top: 34px;
    padding: 18px 0;

    color: #ffffff;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-decoration: none;

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

.become-action-link span {
    margin-left: 25px;

    font-size: 21px;

    transition: transform .2s ease;
}

.become-action-link:hover span {
    transform: translateX(7px);
}

.become-dark-link {
    color: #101612;

    border-color: #101612;
}


/* WHY REFEREE
---------------------------------------------------------- */

.become-why {
    padding: 130px 0;

    background: #ffffff;
}

.become-why-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 140px;
    align-items: end;

    margin-bottom: 100px;
}

.become-why h2,
.become-never-alone h2 {
    margin: 0;

    color: #101612;

    font-size: clamp(70px, 7vw, 125px);
    line-height: .79;
    letter-spacing: -5px;
}

.become-why h2 em,
.become-never-alone h2 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-size: .78em;
    font-weight: 400;
    letter-spacing: -4px;
    text-transform: lowercase;
}

.become-why-copy,
.become-never-copy {
    max-width: 510px;
}

.become-why-copy h3,
.become-never-copy h3 {
    margin: 0 0 26px;

    color: #101612;

    font-size: 31px;
    line-height: 1.15;
}

.become-why-copy p,
.become-never-copy p {
    margin: 0 0 18px;

    color: #6d6d68;

    font-size: 16px;
    line-height: 1.75;
}


/* BENEFITS
---------------------------------------------------------- */

.become-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid #d0cec7;
    border-bottom: 1px solid #d0cec7;
}

.become-benefits article {
    padding: 45px 45px 50px 0;
}

.become-benefits article + article {
    padding-left: 45px;

    border-left: 1px solid #d0cec7;
}

.become-benefits article > span {
    display: block;
    margin-bottom: 40px;

    color: #ff2449;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.become-benefits h3 {
    margin: 0 0 18px;

    color: #101612;

    font-size: 28px;
}

.become-benefits p {
    max-width: 330px;
    margin: 0;

    color: #72726d;

    font-size: 15px;
    line-height: 1.7;
}


/* JOURNEY
---------------------------------------------------------- */

.become-journey {
    padding: 130px 0;

    background: #071b14;
}

.become-light-eyebrow {
    color: #ffffff;
}

.become-journey-heading {
    max-width: 900px;
    margin-bottom: 90px;
}

.become-journey-heading h2 {
    margin: 0 0 40px;

    color: #ffffff;

    font-size: clamp(75px, 8vw, 135px);
    line-height: .78;
    letter-spacing: -6px;
}

.become-journey-heading h2 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-size: .75em;
    font-weight: 400;
    letter-spacing: -4px;
    text-transform: lowercase;
}

.become-journey-heading > p {
    max-width: 540px;
    margin: 0;

    color: #a6aaa7;

    font-size: 17px;
    line-height: 1.7;
}


/* STAGES */

.become-stages {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid #425149;
    border-bottom: 1px solid #425149;
}

.become-stage {
    min-height: 510px;
    padding: 38px 35px 45px;
}

.become-stage + .become-stage {
    border-left: 1px solid #425149;
}

.become-stage-number {
    margin-bottom: 85px;

    color: #ff2449;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.become-stage-content > span {
    display: block;
    margin-bottom: 18px;

    color: #929b96;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.become-stage h3 {
    margin: 0 0 28px;

    color: #ffffff;

    font-size: 32px;
    line-height: 1.05;
}

.become-stage p {
    margin: 0 0 16px;

    color: #a6aaa7;

    font-size: 15px;
    line-height: 1.7;
}

.become-stage-featured {
    background: rgba(255,255,255,.045);
}


/* ACADEMY
---------------------------------------------------------- */

.become-academy {
    padding: 130px 0;

    background: #f4f2ed;
}

.become-academy-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 140px;
    align-items: end;

    margin-bottom: 100px;
}

.become-academy h2 {
    margin: 0;

    color: #101612;

    font-size: clamp(70px, 7vw, 125px);
    line-height: .79;
    letter-spacing: -5px;
}

.become-academy h2 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-size: .78em;
    font-weight: 400;
    letter-spacing: -4px;
    text-transform: lowercase;
}

.become-academy-copy {
    max-width: 510px;
}

.become-academy-copy h3 {
    margin: 0 0 25px;

    color: #101612;

    font-size: 32px;
    line-height: 1.15;
}

.become-academy-copy p {
    margin: 0 0 18px;

    color: #6d6d68;

    font-size: 16px;
    line-height: 1.75;
}


/* ACADEMY TIME */

.become-academy-time {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid #c8c6bf;
    border-bottom: 1px solid #c8c6bf;
}

.become-academy-time > div {
    padding: 45px 45px 48px 0;
}

.become-academy-time > div + div {
    padding-left: 45px;

    border-left: 1px solid #c8c6bf;
}

.become-academy-time span {
    display: block;
    margin-bottom: 28px;

    color: #77756f;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.become-academy-time strong {
    display: block;

    color: #101612;

    font-size: clamp(55px, 6vw, 90px);
    line-height: .85;
    letter-spacing: -4px;
}

.become-academy-time small {
    display: block;
    margin-top: 15px;

    color: #ff2449;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}


/* ACADEMY SUPPORT
---------------------------------------------------------- */

.become-support {
    padding: 130px 0;

    background: #ffffff;
}

.become-support-heading {
    margin-bottom: 80px;
}

.become-support-heading h2 {
    margin: 0;

    color: #101612;

    font-size: clamp(75px, 7vw, 125px);
    line-height: .8;
    letter-spacing: -5px;
}

.become-support-heading h2 em {
    font-family: Georgia, "Times New Roman", serif;
    font-size: .8em;
    font-weight: 400;
    letter-spacing: -4px;
    text-transform: lowercase;
}

.become-support-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    border-top: 1px solid #d0cec7;
}

.become-support-grid article {
    padding: 55px 70px 55px 0;

    border-bottom: 1px solid #d0cec7;
}

.become-support-grid article:nth-child(even) {
    padding-left: 70px;

    border-left: 1px solid #d0cec7;
}

.become-support-grid article > span {
    display: block;
    margin-bottom: 28px;

    color: #ff2449;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.become-support-grid h3 {
    margin: 0 0 20px;

    color: #101612;

    font-size: 32px;
}

.become-support-grid p {
    max-width: 510px;
    margin: 0;

    color: #6d6d68;

    font-size: 15px;
    line-height: 1.75;
}


/* NEVER ALONE
---------------------------------------------------------- */

.become-never-alone {
    padding: 130px 0;

    background: #f4f2ed;
}

.become-never-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 140px;
    align-items: end;
}


/* FINAL CTA
---------------------------------------------------------- */

.become-start {
    padding: 115px 0;

    background: #ff2449;
}

.become-start-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 140px;
    align-items: center;
}

.become-start-label {
    display: block;
    margin-bottom: 20px;

    color: #071b14;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
}

.become-start h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(80px, 8vw, 135px);
    line-height: .78;
    letter-spacing: -6px;
}

.become-start h2 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-size: .8em;
    font-weight: 400;
    letter-spacing: -4px;
    text-transform: lowercase;
}

.become-start-copy {
    max-width: 520px;
}

.become-start-copy h3 {
    margin: 0 0 22px;

    color: #ffffff;

    font-size: 32px;
}

.become-start-copy p {
    margin: 0 0 18px;

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

    font-size: 16px;
    line-height: 1.7;
}


/* ==========================================================
   BECOME A REFEREE — TABLET
========================================================== */

@media (max-width: 1000px) {

    .become-page-inner {
        width: min(100% - 60px, 900px);
    }

    .become-hero-grid,
    .become-why-grid,
    .become-academy-grid,
    .become-never-grid,
    .become-start-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .become-stages {
        grid-template-columns: 1fr 1fr;
    }

    .become-stage:nth-child(3) {
        border-left: 0;
        border-top: 1px solid #425149;
    }

    .become-stage:nth-child(4) {
        border-top: 1px solid #425149;
    }

}


/* ==========================================================
   BECOME A REFEREE — MOBILE
========================================================== */

@media (max-width: 700px) {

    .become-page-inner {
        width: calc(100% - 40px);
    }

    .become-hero,
    .become-why,
    .become-journey,
    .become-academy,
    .become-support,
    .become-never-alone,
    .become-start {
        padding: 75px 0;
    }

    .become-hero h1 {
        font-size: clamp(58px, 18vw, 90px);
        letter-spacing: -3px;
    }

    .become-why h2,
    .become-journey-heading h2,
    .become-academy h2,
    .become-support-heading h2,
    .become-never-alone h2,
    .become-start h2 {
        font-size: clamp(57px, 16vw, 86px);
        letter-spacing: -3px;
    }

    .become-why-grid,
    .become-academy-grid {
        margin-bottom: 60px;
    }


    /* BENEFITS */

    .become-benefits {
        grid-template-columns: 1fr;
    }

    .become-benefits article,
    .become-benefits article + article {
        padding: 35px 0;

        border-left: 0;
    }

    .become-benefits article + article {
        border-top: 1px solid #d0cec7;
    }

    .become-benefits article > span {
        margin-bottom: 20px;
    }


    /* JOURNEY */

    .become-journey-heading {
        margin-bottom: 60px;
    }

    .become-stages {
        grid-template-columns: 1fr;
    }

    .become-stage,
    .become-stage + .become-stage,
    .become-stage:nth-child(3),
    .become-stage:nth-child(4) {
        min-height: 0;

        padding: 38px 0;

        border-left: 0;
    }

    .become-stage + .become-stage {
        border-top: 1px solid #425149;
    }

    .become-stage-featured {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .become-stage-number {
        margin-bottom: 35px;
    }


    /* ACADEMY TIME */

    .become-academy-time {
        grid-template-columns: 1fr;
    }

    .become-academy-time > div,
    .become-academy-time > div + div {
        padding: 35px 0;

        border-left: 0;
    }

    .become-academy-time > div + div {
        border-top: 1px solid #c8c6bf;
    }


    /* SUPPORT */

    .become-support-heading {
        margin-bottom: 55px;
    }

    .become-support-grid {
        grid-template-columns: 1fr;
    }

    .become-support-grid article,
    .become-support-grid article:nth-child(even) {
        padding: 40px 0;

        border-left: 0;
        border-bottom: 1px solid #d0cec7;
    }

}
/* Fix Academy stage alignment on mobile */
@media (max-width: 700px) {

    .become-stage-featured {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

}

/* ==========================================================
   REFEREE RECRUITMENT ENQUIRY
========================================================== */

.recruitment-page {
    padding: 120px 0 140px;
    background: #f4f2ed;
}

.recruitment-inner {
    width: min(1430px, calc(100% - 110px));
    margin: 0 auto;
}


/* INTRO
---------------------------------------------------------- */

.recruitment-heading {
    padding-bottom: 100px;
}

.recruitment-heading-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 140px;
    align-items: end;
}

.recruitment-heading h1 {
    margin: 0;

    color: #101612;

    font-size: clamp(75px, 8vw, 135px);
    line-height: .79;
    letter-spacing: -6px;
}

.recruitment-heading h1 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-size: .72em;
    font-weight: 400;
    letter-spacing: -4px;
    text-transform: lowercase;
}

.recruitment-intro {
    max-width: 520px;
}

.recruitment-intro h2 {
    margin: 0 0 25px;

    color: #101612;

    font-size: 32px;
    line-height: 1.15;
}

.recruitment-intro p {
    margin: 0 0 18px;

    color: #6d6d68;

    font-size: 16px;
    line-height: 1.75;
}


/* FORM AREA
---------------------------------------------------------- */

.recruitment-form-wrap {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 100px;

    padding-top: 75px;

    border-top: 1px solid #c8c6bf;
}

.recruitment-form-intro > span {
    display: block;
    margin-bottom: 20px;

    color: #ff2449;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
}

.recruitment-form-intro h2 {
    max-width: 390px;
    margin: 0 0 20px;

    color: #101612;

    font-size: 42px;
    line-height: 1.05;
}

.recruitment-form-intro p {
    color: #77756f;

    font-size: 13px;
}


/* FORM
---------------------------------------------------------- */

.recruitment-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 30px;
}

.recruitment-field-full {
    grid-column: 1 / -1;
}

.recruitment-field label {
    display: block;
    margin-bottom: 12px;

    color: #101612;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.recruitment-field input,
.recruitment-field select,
.recruitment-field textarea {
    width: 100%;

    padding: 15px 0;

    color: #101612;
    background: transparent;

    font-family: inherit;
    font-size: 16px;

    border: 0;
    border-bottom: 1px solid #aaa8a1;
    border-radius: 0;

    outline: none;
}

.recruitment-field textarea {
    min-height: 130px;
    resize: vertical;
}

.recruitment-field input:focus,
.recruitment-field select:focus,
.recruitment-field textarea:focus {
    border-bottom-color: #ff2449;
}

.recruitment-field textarea::placeholder {
    color: #9b9993;
}


/* CONSENT
---------------------------------------------------------- */

.recruitment-consent {
    padding-top: 5px;
}

.recruitment-consent label {
    display: flex;
    gap: 15px;
    align-items: flex-start;

    cursor: pointer;
}

.recruitment-consent input {
    width: 18px;
    height: 18px;
    margin-top: 2px;

    flex: 0 0 auto;
}

.recruitment-consent span {
    max-width: 650px;

    color: #65655f;

    font-size: 14px;
    line-height: 1.6;
}


/* SUBMIT
---------------------------------------------------------- */

.recruitment-submit {
    margin-top: 10px;
}

.recruitment-submit button {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    max-width: 470px;

    padding: 24px 28px;

    color: #ffffff;
    background: #ff2449;

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;

    border: 0;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}

.recruitment-submit button span {
    font-size: 22px;

    transition: transform .2s ease;
}

.recruitment-submit button:hover {
    background: #071b14;
}

.recruitment-submit button:hover span {
    transform: translateX(6px);
}

.recruitment-submit p {
    margin: 16px 0 0;

    color: #85837d;

    font-size: 12px;
}


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

@media (max-width: 1000px) {

    .recruitment-inner {
        width: min(100% - 60px, 900px);
    }

    .recruitment-heading-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .recruitment-form-wrap {
        grid-template-columns: 1fr;
        gap: 55px;
    }

}


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

@media (max-width: 700px) {

    .recruitment-page {
        padding: 75px 0 90px;
    }

    .recruitment-inner {
        width: calc(100% - 40px);
    }

    .recruitment-heading {
        padding-bottom: 65px;
    }

    .recruitment-heading h1 {
        font-size: clamp(56px, 17vw, 84px);
        letter-spacing: -3px;
    }

    .recruitment-intro h2 {
        font-size: 27px;
    }

    .recruitment-form-wrap {
        padding-top: 55px;
    }

    .recruitment-form-intro h2 {
        font-size: 34px;
    }

    .recruitment-form {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .recruitment-field-full {
        grid-column: auto;
    }

    .recruitment-submit button {
        max-width: none;
    }

}

/* ==========================================================
   RECRUITMENT FORM — MESSAGES / SPAM FIELD
========================================================== */

.recruitment-honeypot {
    position: absolute !important;
    left: -9999px !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;
}

.recruitment-message {
    grid-column: 1 / -1;

    margin-bottom: 10px;
    padding: 24px 26px;
}

.recruitment-message strong {
    display: block;
    margin-bottom: 10px;

    font-size: 11px;
    letter-spacing: 2px;
}

.recruitment-message p {
    margin: 0;

    font-size: 14px;
    line-height: 1.65;
}

.recruitment-success {
    color: #ffffff;
    background: #071b14;
}

.recruitment-success strong {
    color: #ff2449;
}

.recruitment-error {
    color: #101612;
    background: #ffffff;

    border-left: 4px solid #ff2449;
}

/* ==========================================================
   MY REFEREE PROFILE
========================================================== */

.member-profile-page {
    padding: 110px 0 130px;
    background: #f4f2ed;
}

.member-profile-inner {
    width: min(1430px, calc(100% - 110px));
    margin: 0 auto;
}

.member-profile-heading {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 140px;
    align-items: end;

    padding-bottom: 90px;
}

.member-profile-eyebrow,
.member-profile-label,
.member-profile-small {
    display: block;
    margin-bottom: 18px;

    color: #ff2449;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
}

.member-profile-heading h1 {
    margin: 0;

    color: #101612;

    font-size: clamp(75px, 7vw, 125px);
    line-height: .8;
    letter-spacing: -5px;
}

.member-profile-heading h1 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-size: .78em;
    font-weight: 400;
    letter-spacing: -4px;
    text-transform: lowercase;
}

.member-profile-intro {
    max-width: 520px;
}

.member-profile-intro h2 {
    margin: 0 0 24px;

    color: #101612;

    font-size: 31px;
    line-height: 1.15;
}

.member-profile-intro p {
    margin: 0 0 17px;

    color: #6d6d68;

    font-size: 16px;
    line-height: 1.7;
}


/* STATUS
---------------------------------------------------------- */

.member-profile-status {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 25px 0;

    border-top: 1px solid #c8c6bf;
    border-bottom: 1px solid #c8c6bf;
}

.member-profile-status span {
    color: #77756f;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.member-profile-status strong {
    color: #ff2449;

    font-size: 12px;
    letter-spacing: 2px;
}


/* FORM SECTION
---------------------------------------------------------- */

.member-profile-form-section {
    padding: 80px 0;
}

.member-profile-form-heading {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 30px;

    max-width: 850px;
    margin-bottom: 65px;
}

.member-profile-number {
    color: #ff2449;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.member-profile-form-heading h2 {
    margin: 0 0 15px;

    color: #101612;

    font-size: 42px;
    line-height: 1.05;
}

.member-profile-form-heading p {
    max-width: 600px;
    margin: 0;

    color: #6d6d68;

    font-size: 15px;
    line-height: 1.7;
}


/* FORM
---------------------------------------------------------- */

.member-profile-form {
    max-width: 900px;
    margin-left: 120px;
}

.member-profile-field {
    margin-bottom: 45px;
}

.member-profile-field label {
    display: block;
    margin-bottom: 10px;

    color: #101612;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.member-profile-field > p {
    margin: 0 0 12px;

    color: #85837d;

    font-size: 13px;
    line-height: 1.5;
}

.member-profile-field input,
.member-profile-field textarea {
    width: 100%;

    padding: 14px 0;

    color: #101612;
    background: transparent;

    font-family: inherit;
    font-size: 16px;
    line-height: 1.65;

    border: 0;
    border-bottom: 1px solid #aaa8a1;
    border-radius: 0;

    outline: none;
}

.member-profile-field textarea {
    min-height: 110px;
    resize: vertical;
}

.member-profile-field input:focus,
.member-profile-field textarea:focus {
    border-bottom-color: #ff2449;
}

.member-profile-two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}


/* SAVE
---------------------------------------------------------- */

.member-profile-save {
    padding-top: 10px;
}

.member-profile-save button {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    max-width: 390px;

    padding: 22px 26px;

    color: #ffffff;
    background: #ff2449;

    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;

    border: 0;
    cursor: pointer;
}

.member-profile-save button span {
    font-size: 21px;
}

.member-profile-save button:hover {
    background: #071b14;
}

.member-profile-save p {
    margin: 15px 0 0;

    color: #85837d;

    font-size: 12px;
}


/* MESSAGE
---------------------------------------------------------- */

.member-profile-message {
    max-width: 900px;
    margin: 0 0 45px 120px;
    padding: 20px 24px;

    font-size: 14px;
}

.member-profile-message.success {
    color: #ffffff;
    background: #071b14;
}

.member-profile-message.error {
    color: #101612;
    background: #ffffff;

    border-left: 4px solid #ff2449;
}


/* BACK
---------------------------------------------------------- */

.member-profile-back {
    display: inline-block;

    margin-top: 25px;

    color: #101612;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-decoration: none;
}


/* MOBILE
---------------------------------------------------------- */

@media (max-width: 700px) {

    .member-profile-page {
        padding: 75px 0 90px;
    }

    .member-profile-inner {
        width: calc(100% - 40px);
    }

    .member-profile-heading {
        grid-template-columns: 1fr;
        gap: 50px;

        padding-bottom: 60px;
    }

    .member-profile-heading h1 {
        font-size: clamp(57px, 17vw, 85px);
        letter-spacing: -3px;
    }

    .member-profile-status {
        align-items: flex-start;
        gap: 20px;
    }

    .member-profile-form-section {
        padding: 60px 0;
    }

    .member-profile-form-heading {
        grid-template-columns: 40px 1fr;
        gap: 15px;

        margin-bottom: 50px;
    }

    .member-profile-form-heading h2 {
        font-size: 32px;
    }

    .member-profile-form,
    .member-profile-message {
        margin-left: 0;
    }

    .member-profile-two-columns {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .member-profile-save button {
        max-width: none;
    }

}

.member-profile-save .member-profile-submit {
    margin-top: 12px;

    color: #ffffff;
    background: #071b14;
}

.member-profile-save .member-profile-submit:hover {
    background: #ff2449;
}

/* ==========================================================
   REFEREE PROFILE ADMIN
========================================================== */

.profile-admin-page {
    padding: 110px 0 130px;
    background: #f4f2ed;
}

.profile-admin-inner {
    width: min(1430px, calc(100% - 110px));
    margin: 0 auto;
}

.profile-admin-heading {
    max-width: 900px;
    margin-bottom: 80px;
}

.profile-admin-eyebrow {
    display: block;
    margin-bottom: 20px;

    color: #ff2449;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
}

.profile-admin-heading h1 {
    margin: 0;

    color: #101612;

    font-size: clamp(75px, 7vw, 125px);
    line-height: .8;
    letter-spacing: -5px;
}

.profile-admin-heading h1 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-size: .78em;
    font-weight: 400;
    letter-spacing: -4px;
    text-transform: lowercase;
}

.profile-admin-heading p {
    max-width: 530px;
    margin: 35px 0 0;

    color: #6d6d68;

    font-size: 16px;
    line-height: 1.7;
}


/* SUMMARY
---------------------------------------------------------- */

.profile-admin-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 24px 0;

    border-top: 1px solid #c8c6bf;
    border-bottom: 1px solid #c8c6bf;
}

.profile-admin-summary span {
    color: #77756f;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.profile-admin-summary strong {
    color: #ff2449;

    font-size: 20px;
}


/* PROFILE ROWS
---------------------------------------------------------- */

.profile-admin-list {
    margin-top: 25px;
}

.profile-admin-row {
    display: grid;
    grid-template-columns: 1.3fr 1fr 120px;
    gap: 50px;
    align-items: center;

    padding: 35px 0;

    border-bottom: 1px solid #cfcdc6;
}

.profile-admin-status {
    display: block;
    margin-bottom: 9px;

    color: #ff2449;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.profile-admin-person h2 {
    margin: 0 0 5px;

    color: #101612;

    font-size: 26px;
}

.profile-admin-person p {
    margin: 0;

    color: #7a7973;

    font-size: 13px;
}

.profile-admin-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
}

.profile-admin-meta span {
    display: block;
    margin-bottom: 7px;

    color: #8a8881;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
}

.profile-admin-meta strong {
    color: #101612;

    font-size: 13px;
}

.profile-admin-action {
    display: flex;
    justify-content: space-between;
    align-items: center;

    color: #101612;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.profile-admin-action strong {
    color: #ff2449;

    font-size: 21px;
}


/* EMPTY / BACK
---------------------------------------------------------- */

.profile-admin-empty {
    padding: 60px 0;
}

.profile-admin-empty h2 {
    margin: 0 0 10px;

    color: #101612;
}

.profile-admin-empty p {
    color: #77756f;
}

.profile-admin-back {
    display: inline-block;
    margin-top: 50px;

    color: #101612;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-decoration: none;
}


/* MOBILE
---------------------------------------------------------- */

@media (max-width: 700px) {

    .profile-admin-page {
        padding: 75px 0 90px;
    }

    .profile-admin-inner {
        width: calc(100% - 40px);
    }

    .profile-admin-heading {
        margin-bottom: 55px;
    }

    .profile-admin-heading h1 {
        font-size: clamp(57px, 17vw, 85px);
        letter-spacing: -3px;
    }

    .profile-admin-row {
        grid-template-columns: 1fr;
        gap: 25px;

        padding: 30px 0;
    }

    .profile-admin-meta {
        gap: 20px;
    }

    .profile-admin-action {
        justify-content: flex-start;
        gap: 15px;
    }

}

.profile-admin-action {
    text-decoration: none;
}

.profile-admin-action:hover {
    color: #ff2449;
}

/* ==========================================================
   REFEREE PROFILE REVIEW
========================================================== */

.profile-review-page {
    padding: 90px 0 130px;
    background: #f4f2ed;
}

.profile-review-inner {
    width: min(1200px, calc(100% - 110px));
    margin: 0 auto;
}

.profile-review-back {
    display: inline-block;
    margin-bottom: 70px;

    color: #101612;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-decoration: none;
}

.profile-review-back:hover {
    color: #ff2449;
}


/* HEADING
---------------------------------------------------------- */

.profile-review-heading {
    padding-bottom: 55px;

    border-bottom: 1px solid #c8c6bf;
}

.profile-review-eyebrow {
    display: block;
    margin-bottom: 18px;

    color: #ff2449;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
}

.profile-review-heading h1 {
    margin: 0 0 35px;

    color: #101612;

    font-size: clamp(55px, 6vw, 95px);
    line-height: .9;
    letter-spacing: -4px;
}

.profile-review-status {
    display: flex;
    align-items: center;
    gap: 25px;
}

.profile-review-status span {
    color: #77756f;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.profile-review-status strong {
    color: #ff2449;

    font-size: 11px;
    letter-spacing: 2px;
}


/* DETAILS
---------------------------------------------------------- */

.profile-review-details {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 50px;

    padding: 35px 0;

    border-bottom: 1px solid #c8c6bf;
}

.profile-review-details span,
.profile-review-section > span {
    display: block;
    margin-bottom: 9px;

    color: #8a8881;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.profile-review-details strong {
    color: #101612;

    font-size: 14px;
}


/* ANSWERS
---------------------------------------------------------- */

.profile-review-content {
    max-width: 900px;

    padding-top: 30px;
}

.profile-review-section {
    padding: 35px 0;

    border-bottom: 1px solid #d3d1ca;
}

.profile-review-section p {
    margin: 0;

    color: #292e2a;

    font-size: 17px;
    line-height: 1.75;
}


/* MOBILE
---------------------------------------------------------- */

@media (max-width: 700px) {

    .profile-review-page {
        padding: 65px 0 90px;
    }

    .profile-review-inner {
        width: calc(100% - 40px);
    }

    .profile-review-back {
        margin-bottom: 50px;
    }

    .profile-review-heading h1 {
        font-size: clamp(48px, 14vw, 72px);
        letter-spacing: -2px;
    }

    .profile-review-details {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .profile-review-section p {
        font-size: 16px;
    }

}

.profile-review-actions {
    padding: 35px 0;

    border-bottom: 1px solid #c8c6bf;
}

.profile-review-actions button {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    max-width: 300px;

    padding: 18px 22px;

    color: #ffffff;
    background: #071b14;

    font-family: inherit;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;

    border: 0;
    cursor: pointer;
}

.profile-review-actions button:hover {
    background: #ff2449;
}

.profile-review-actions p {
    max-width: 500px;
    margin: 12px 0 0;

    color: #77756f;

    font-size: 12px;
    line-height: 1.6;
}

/* ADMIN REFEREE DETAILS
---------------------------------------------------------- */

.profile-review-admin-details {
    padding: 45px 0;

    border-bottom: 1px solid #c8c6bf;
}

.profile-review-admin-label {
    display: block;
    margin-bottom: 10px;

    color: #ff2449;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.profile-review-admin-details h2 {
    margin: 0 0 8px;

    color: #101612;

    font-size: 28px;
}

.profile-review-admin-details > p {
    margin: 0 0 30px;

    color: #77756f;

    font-size: 13px;
}

.profile-review-admin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;

    max-width: 700px;
    margin-bottom: 25px;
}

.profile-review-admin-grid label {
    display: block;
    margin-bottom: 9px;

    color: #101612;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.profile-review-admin-grid input {
    width: 100%;

    padding: 13px 0;

    color: #101612;
    background: transparent;

    font-family: inherit;
    font-size: 15px;

    border: 0;
    border-bottom: 1px solid #aaa8a1;
    border-radius: 0;
    outline: none;
}

.profile-review-admin-grid input:focus {
    border-bottom-color: #ff2449;
}

.profile-review-admin-details button {
    padding: 17px 22px;

    color: #ffffff;
    background: #071b14;

    font-family: inherit;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;

    border: 0;
    cursor: pointer;
}

.profile-review-admin-details button:hover {
    background: #ff2449;
}

@media (max-width: 700px) {

    .profile-review-admin-grid {
        grid-template-columns: 1fr;
    }

}

.profile-review-actions .profile-publish-button {
    margin-bottom: 12px;
    background: #ff2449;
}

.profile-review-actions .profile-publish-button:hover {
    background: #071b14;
}

/* REFEREE PROFILE PHOTO PREVIEW
---------------------------------------------------------- */

.member-profile-photo-preview {
    width: 220px;
    margin: 20px 0 25px;
}

.member-profile-photo-preview img {
    display: block;

    width: 100%;
    aspect-ratio: 4 / 5;

    object-fit: cover;
    object-position: center;

    border-radius: 2px;
}

.member-profile-photo-preview span {
    display: block;
    margin-top: 9px;

    color: #85837d;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
}

/* ADMIN PROFILE PHOTO
---------------------------------------------------------- */

.profile-review-photo {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 45px;
    align-items: center;

    padding: 40px 0;

    border-bottom: 1px solid #c8c6bf;
}

.profile-review-photo-image img {
    display: block;

    width: 100%;
    aspect-ratio: 4 / 5;

    object-fit: cover;
    object-position: center;
}

.profile-review-photo-info span,
.profile-review-no-photo span {
    display: block;
    margin-bottom: 10px;

    color: #ff2449;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.profile-review-photo-info h2 {
    margin: 0 0 10px;

    color: #101612;

    font-size: 28px;
}

.profile-review-photo-info p {
    max-width: 450px;
    margin: 0;

    color: #77756f;

    font-size: 13px;
    line-height: 1.6;
}

.profile-review-no-photo {
    padding: 35px 0;

    border-bottom: 1px solid #c8c6bf;
}

.profile-review-no-photo strong {
    color: #101612;

    font-size: 15px;
}

@media (max-width: 700px) {

    .profile-review-photo {
        grid-template-columns: 130px 1fr;
        gap: 25px;
    }

    .profile-review-photo-info h2 {
        font-size: 22px;
    }

}

/* ==========================================================
   REFEREE PHOTO FALLBACK
========================================================== */

.ref-card-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
    min-height: 420px;

    background: #071b14;
}

.ref-card-photo-placeholder span {
    color: rgba(255, 255, 255, .16);

    font-size: 55px;
    font-weight: 700;
    letter-spacing: 5px;
}

/* ==========================================================
   PUBLIC REFEREE PROFILE
========================================================== */

.public-ref-hero {
    padding: 70px 0 110px;
    background: #f4f2ed;
}

.public-ref-inner {
    width: min(1430px, calc(100% - 110px));
    margin: 0 auto;
}

.public-ref-back {
    display: inline-block;
    margin-bottom: 60px;

    color: #101612;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-decoration: none;
}

.public-ref-back:hover {
    color: #ff2449;
}


/* HERO
---------------------------------------------------------- */

.public-ref-hero-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 100px;
    align-items: center;
}

.public-ref-photo {
    overflow: hidden;
}

.public-ref-photo img,
.public-ref-photo-empty {
    display: block;

    width: 100%;
    aspect-ratio: 4 / 5;

    object-fit: cover;
    object-position: center;
}

.public-ref-photo-empty {
    display: flex;
    align-items: center;
    justify-content: center;

    background: #071b14;
}

.public-ref-photo-empty span {
    color: rgba(255,255,255,.15);

    font-size: 80px;
    font-weight: 700;
    letter-spacing: 8px;
}

.public-ref-eyebrow {
    display: block;
    margin-bottom: 25px;

    color: #ff2449;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
}

.public-ref-heading h1 {
    margin: 0;

    color: #101612;

    font-size: clamp(75px, 8vw, 135px);
    line-height: .77;
    letter-spacing: -6px;
}

.public-ref-heading h1 em {
    font-family: Georgia, "Times New Roman", serif;
    font-size: .82em;
    font-weight: 400;
    letter-spacing: -5px;
    text-transform: none;
}

.public-ref-meta {
    display: flex;
    gap: 70px;

    margin-top: 65px;
    padding-top: 25px;

    border-top: 1px solid #c8c6bf;
}

.public-ref-meta span {
    display: block;
    margin-bottom: 8px;

    color: #898780;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
}

.public-ref-meta strong {
    color: #101612;

    font-size: 15px;
}


/* STORY
---------------------------------------------------------- */

.public-ref-story {
    padding: 120px 0 130px;
    background: #ffffff;
}

.public-ref-story .public-ref-inner {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 120px;
}

.public-ref-story-heading {
    position: sticky;
    top: 130px;
    align-self: start;
}

.public-ref-story-heading h2 {
    margin: 35px 0 0;

    color: #101612;

    font-size: clamp(50px, 5vw, 78px);
    line-height: .9;
    letter-spacing: -4px;
}

.public-ref-story-heading h2 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

.public-ref-story-content {
    max-width: 760px;
}

.public-ref-section {
    padding: 0 0 42px;
    margin-bottom: 42px;

    border-bottom: 1px solid #d4d2cc;
}

.public-ref-section > span {
    display: block;
    margin-bottom: 16px;

    color: #ff2449;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.public-ref-section p {
    margin: 0;

    color: #292e2a;

    font-size: 18px;
    line-height: 1.8;
}


/* CTA
---------------------------------------------------------- */

.public-ref-cta {
    padding: 90px 0;

    color: #ffffff;
    background: #071b14;
}

.public-ref-cta .public-ref-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 60px;
}

.public-ref-cta > .public-ref-inner > div > span {
    display: block;
    margin-bottom: 15px;

    color: #ff2449;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.public-ref-cta h2 {
    max-width: 700px;
    margin: 0;

    font-size: clamp(45px, 5vw, 75px);
    line-height: .95;
    letter-spacing: -3px;
}

.public-ref-cta h2 em {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

.public-ref-cta a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;

    min-width: 280px;
    padding: 22px 25px;

    color: #ffffff;
    background: #ff2449;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-decoration: none;
}

.public-ref-cta a:hover {
    background: #ffffff;
    color: #071b14;
}


/* NOT FOUND
---------------------------------------------------------- */

.public-ref-not-found {
    min-height: 60vh;
    padding: 120px 0;
    background: #f4f2ed;
}

.public-ref-not-found span {
    color: #ff2449;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.public-ref-not-found h1 {
    margin: 20px 0;

    color: #101612;
    font-size: 60px;
}

.public-ref-not-found a {
    display: inline-block;
    margin-top: 25px;

    color: #101612;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-decoration: none;
}


/* MOBILE
---------------------------------------------------------- */

@media (max-width: 700px) {

    .public-ref-hero {
        padding: 55px 0 80px;
    }

    .public-ref-inner {
        width: calc(100% - 40px);
    }

    .public-ref-back {
        margin-bottom: 40px;
    }

    .public-ref-hero-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .public-ref-photo {
        max-width: 100%;
    }

    .public-ref-heading h1 {
        font-size: clamp(62px, 20vw, 95px);
        letter-spacing: -4px;
    }

    .public-ref-meta {
        gap: 35px;
        margin-top: 45px;
    }

    .public-ref-story {
        padding: 80px 0;
    }

    .public-ref-story .public-ref-inner {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .public-ref-story-heading {
        position: static;
    }

    .public-ref-story-heading h2 {
        font-size: 52px;
    }

    .public-ref-section p {
        font-size: 16px;
    }

    .public-ref-cta {
        padding: 70px 0;
    }

    .public-ref-cta .public-ref-inner {
        display: block;
    }

    .public-ref-cta h2 {
        font-size: 48px;
    }

    .public-ref-cta a {
        width: 100%;
        min-width: 0;

        margin-top: 45px;
    }

}

/* ==========================================================
   REFEREE PROFILE FINAL REFINEMENTS
========================================================== */

.public-ref-section {
    padding-bottom: 32px;
    margin-bottom: 32px;
}

/* ============================================================
   COMMITTEE ADMIN - FORM TEXT FIX
   ============================================================ */

.member-edit-form {
    color: #0b2118;
}

.member-edit-form label {
    color: #0b2118;
}

.member-edit-form input,
.member-edit-form textarea,
.member-edit-form select {
    color: #0b2118;
    background: #ffffff;
    border: 1px solid #c9c7bf;
}

.member-edit-form input::placeholder,
.member-edit-form textarea::placeholder {
    color: #777777;
    opacity: 1;
}

.member-edit-form select option {
    color: #0b2118;
    background: #ffffff;
}

/* ============================================================
   PUBLIC COMMITTEE PAGE
============================================================ */

.committee-inner {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}


/* HERO
------------------------------------------------------------ */

.committee-hero {
    background: #f3efe6;
    padding: 110px 0 120px;
}

.committee-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 100px;
    align-items: end;
}

.committee-hero h1 {
    margin: 28px 0 0;
    color: #0b2118;
    font-size: clamp(64px, 7vw, 112px);
    line-height: .82;
    letter-spacing: -5px;
    font-weight: 900;
}

.committee-hero h1 em {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    text-transform: none;
    letter-spacing: -5px;
}

.committee-hero-copy {
    max-width: 520px;
    padding-bottom: 5px;
}

.committee-hero-copy h2 {
    margin: 0 0 25px;
    color: #0b2118;
    font-size: 32px;
    line-height: 1.1;
}

.committee-hero-copy p {
    margin: 0 0 18px;
    color: #536057;
    font-size: 17px;
    line-height: 1.75;
}


/* SECTIONS
------------------------------------------------------------ */

.committee-section {
    padding: 110px 0 125px;
    background: #ffffff;
}

.committee-section-alt {
    background: #f3efe6;
}

.committee-section-heading {
    margin-bottom: 55px;
}

.committee-section-heading h2 {
    margin: 26px 0 0;
    color: #0b2118;
    font-size: clamp(48px, 5vw, 76px);
    line-height: .9;
    letter-spacing: -3px;
    font-weight: 900;
}

.committee-section-heading h2 em {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    text-transform: none;
}


/* CARDS
------------------------------------------------------------ */

.committee-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.committee-card {
    background: #fff;
    min-width: 0;
}

.committee-section:not(.committee-section-alt) .committee-card {
    background: #f3efe6;
}

.committee-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #0b2118;
}

.committee-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
}

.committee-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.2);
    font-size: 64px;
    font-weight: 900;
    letter-spacing: -3px;
}

.committee-card-content {
    padding: 30px 30px 34px;
}

.committee-role {
    display: block;
    margin-bottom: 10px;
    color: #c82d2d;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.committee-card h3 {
    margin: 0;
    color: #0b2118;
    font-size: 29px;
    line-height: 1;
    letter-spacing: -1px;
}

.committee-description {
    margin: 18px 0 0;
    color: #536057;
    font-size: 15px;
    line-height: 1.65;
}

.committee-contact {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(11,33,24,.15);
}

.committee-contact a {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: 7px;
    color: #0b2118;
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.committee-contact a:first-child {
    margin-top: 0;
}

.committee-contact a:hover {
    color: #c82d2d;
}


/* CTA
------------------------------------------------------------ */

.committee-cta {
    padding: 105px 0 115px;
    background: #0b2118;
    color: #fff;
}

.committee-cta-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 100px;
    align-items: end;
}

.committee-light-eyebrow {
    color: rgba(255,255,255,.65);
}

.committee-light-eyebrow span {
    background: #c82d2d;
}

.committee-cta h2 {
    margin: 28px 0 0;
    color: #fff;
    font-size: clamp(50px, 5.5vw, 82px);
    line-height: .87;
    letter-spacing: -4px;
}

.committee-cta h2 em {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    text-transform: none;
}

.committee-cta-copy {
    max-width: 500px;
}

.committee-cta-copy h3 {
    margin: 0 0 18px;
    color: #fff;
    font-size: 30px;
}

.committee-cta-copy p {
    margin: 0 0 30px;
    color: rgba(255,255,255,.7);
    font-size: 16px;
    line-height: 1.7;
}

.committee-cta-copy a {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-decoration: none;
}

.committee-cta-copy a span {
    color: #c82d2d;
    font-size: 20px;
}


/* TABLET
------------------------------------------------------------ */

@media (max-width: 900px) {

    .committee-hero-grid,
    .committee-cta-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

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

}


/* MOBILE
------------------------------------------------------------ */

@media (max-width: 600px) {

    .committee-inner {
        width: min(100% - 32px, 1180px);
    }

    .committee-hero {
        padding: 70px 0 80px;
    }

    .committee-hero-grid {
        gap: 42px;
    }

    .committee-hero h1 {
        font-size: clamp(55px, 18vw, 76px);
        letter-spacing: -3px;
    }

    .committee-hero-copy h2 {
        font-size: 27px;
    }

    .committee-section {
        padding: 75px 0 85px;
    }

    .committee-section-heading {
        margin-bottom: 38px;
    }

    .committee-section-heading h2 {
        font-size: 50px;
        letter-spacing: -2px;
    }

    .committee-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .committee-card-content {
        padding: 25px 24px 28px;
    }

    .committee-card h3 {
        font-size: 27px;
    }

    .committee-cta {
        padding: 75px 0 85px;
    }

    .committee-cta-grid {
        gap: 45px;
    }

    .committee-cta h2 {
        font-size: 54px;
        letter-spacing: -2px;
    }

}

/* ==========================================================
   FIXTURE FILTERS
========================================================== */

.fixture-filters {
    margin: 0 0 70px;
    padding: 34px 0 38px;
    border-top: 1px solid rgba(17, 17, 17, 0.22);
    border-bottom: 1px solid rgba(17, 17, 17, 0.22);
}


/* ----------------------------------------------------------
   FILTER HEADING
---------------------------------------------------------- */

.fixture-filters-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 28px;
}

.fixture-filters-heading span {
    display: block;
    margin-bottom: 7px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #666;
}

.fixture-filters-heading h2 {
    margin: 0;

    font-size: clamp(28px, 3vw, 42px);
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.035em;
    color: #111;
}


/* ----------------------------------------------------------
   CLEAR FILTERS
---------------------------------------------------------- */

.fixture-filter-clear {
    flex-shrink: 0;

    padding-bottom: 5px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #111;
    text-decoration: none;

    border-bottom: 1px solid #111;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.fixture-filter-clear:hover {
    opacity: 0.55;
}


/* ----------------------------------------------------------
   FILTER GRID
---------------------------------------------------------- */

.fixture-filter-form {
    display: grid;

    /*
    Date | Team | Competition | Referee | Button
    Competition gets extra room because WTR competition
    names can be quite long.
    */
    grid-template-columns:
        minmax(130px, 0.8fr)
        minmax(190px, 1.15fr)
        minmax(260px, 1.8fr)
        minmax(190px, 1.15fr)
        auto;

    gap: 14px;

    align-items: end;
}


/* ----------------------------------------------------------
   FIELD
---------------------------------------------------------- */

.fixture-filter-field {
    min-width: 0;
}

.fixture-filter-field label {
    display: block;

    margin: 0 0 8px;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;

    color: #111;
}


/* ----------------------------------------------------------
   INPUTS + SELECTS
---------------------------------------------------------- */

.fixture-filter-field select,
.fixture-filter-field input {
    display: block;

    width: 100%;
    height: 54px;

    margin: 0;
    padding: 0 42px 0 16px;

    border: 1px solid rgba(17, 17, 17, 0.25);
    border-radius: 0;

    background-color: #fff;

    color: #111;

    font-family: inherit;
    font-size: 14px;
    font-weight: 500;

    outline: none;

    box-sizing: border-box;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}


/* Team search doesn't need room for dropdown arrow */

.fixture-filter-field input {
    padding-right: 16px;
}


/* Browser select */

.fixture-filter-field select {
    cursor: pointer;
}


/* Placeholder */

.fixture-filter-field input::placeholder {
    color: #777;
    opacity: 1;
}


/* Focus */

.fixture-filter-field select:focus,
.fixture-filter-field input:focus {
    border-color: #111;
    background-color: #fff;
}


/* ----------------------------------------------------------
   APPLY BUTTON
---------------------------------------------------------- */

.fixture-filter-submit {
    display: flex;
}

.fixture-filter-submit button {
    height: 54px;

    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;

    border: 1px solid #111;
    border-radius: 0;

    background: #111;
    color: #fff;

    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.fixture-filter-submit button span {
    font-size: 17px;
    line-height: 1;
}

.fixture-filter-submit button:hover {
    background: transparent;
    color: #111;
}


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

@media (max-width: 1100px) {

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

    .fixture-filter-submit {
        grid-column: 1 / -1;
    }

    .fixture-filter-submit button {
        width: 100%;
    }
}


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

@media (max-width: 650px) {

    .fixture-filters {
        margin-bottom: 45px;
        padding: 26px 0 30px;
    }

    .fixture-filters-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 24px;
    }

    .fixture-filter-form {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .fixture-filter-submit {
        grid-column: auto;
        margin-top: 3px;
    }

    .fixture-filter-field select,
    .fixture-filter-field input,
    .fixture-filter-submit button {
        height: 56px;
    }

}

/* Keep Apply Filters visible on hover */

.fixture-filter-submit button:hover {
    background: #ffffff;
    color: #111111;
    border-color: #ffffff;
}

/* ==========================================================
   COMMITTEE ADMIN - ORDER CONTROLS
========================================================== */

.committee-order-controls form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.committee-move-button {
    appearance: none;
    border: 1px solid rgba(17, 17, 17, 0.22);
    background: transparent;
    color: #111;

    padding: 8px 10px;

    font-family: inherit;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.committee-move-button:hover {
    background: #111;
    color: #fff;
    border-color: #111;
}

.committee-move-button:focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;
}

/* ==========================================================
   MEMBERS AREA - ADMINISTRATION SECTION
========================================================== */

.members-admin-section {
    margin-top: 90px;
    padding-top: 60px;
    border-top: 1px solid rgba(17, 17, 17, 0.18);
}


/* ----------------------------------------------------------
   ADMIN HEADING
---------------------------------------------------------- */

.members-admin-heading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    margin-bottom: 45px;
}

.members-admin-heading .members-dashboard-eyebrow {
    grid-column: 1 / -1;
    margin-bottom: 20px;
}

.members-admin-heading h2 {
    margin: 0;

    font-size: clamp(38px, 5vw, 68px);
    line-height: 0.95;
    letter-spacing: -0.045em;
    font-weight: 600;

    color: #111;
}

.members-admin-heading h2 em {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

.members-admin-heading p {
    align-self: end;

    max-width: 420px;
    margin: 0;

    font-size: 16px;
    line-height: 1.6;

    color: #555;
}


/* ----------------------------------------------------------
   ADMIN GRID
---------------------------------------------------------- */

.members-admin-grid {
    margin-top: 0;
}


/* Give admin cards a subtle visual difference */

.members-admin-grid .members-admin-card {
    position: relative;
    border-top: 2px solid #111;
}


/* ADMIN label */

.members-admin-grid .members-card-label {
    letter-spacing: 0.15em;
}


/* ----------------------------------------------------------
   ADMIN CARD NUMBERS
---------------------------------------------------------- */

.members-admin-grid .members-dashboard-card:nth-child(1)
.members-card-number::after {
    content: " 01";
}

.members-admin-grid .members-dashboard-card:nth-child(2)
.members-card-number::after {
    content: " 02";
}

.members-admin-grid .members-dashboard-card:nth-child(3)
.members-card-number::after {
    content: " 03";
}

.members-admin-grid .members-dashboard-card:nth-child(4)
.members-card-number::after {
    content: " 04";
}

.members-admin-grid .members-dashboard-card:nth-child(5)
.members-card-number::after {
    content: " 05";
}

.members-admin-grid .members-dashboard-card:nth-child(6)
.members-card-number::after {
    content: " 06";
}


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

@media (max-width: 800px) {

    .members-admin-section {
        margin-top: 60px;
        padding-top: 45px;
    }

    .members-admin-heading {
        grid-template-columns: 1fr;
        gap: 22px;
        margin-bottom: 35px;
    }

    .members-admin-heading .members-dashboard-eyebrow {
        grid-column: auto;
        margin-bottom: 0;
    }

    .members-admin-heading p {
        max-width: 520px;
    }

}

/* ==========================================================
   MEMBERS ADMIN - LIVE STATS
========================================================== */

.members-admin-stat {
    display: flex;
    align-items: baseline;
    gap: 10px;

    margin: 16px 0 18px;
    padding: 12px 0;

    border-top: 1px solid rgba(17, 17, 17, 0.14);
    border-bottom: 1px solid rgba(17, 17, 17, 0.14);
}

.members-admin-stat strong {
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
}

.members-admin-stat span {
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}


/* ----------------------------------------------------------
   SOMETHING NEEDS ATTENTION
---------------------------------------------------------- */

.members-admin-stat-attention {
    background: #111;
    color: #fff;

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

    padding-left: 12px;
    padding-right: 12px;

    border-color: #111;
}

.members-admin-stat-attention strong {
    color: #fff;
}

.members-admin-stat-attention span {
    color: #fff;
}

/* ==========================================================
   NEWS & UPDATES PAGE
========================================================== */

.news-page-inner {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}


/* ----------------------------------------------------------
   HERO
---------------------------------------------------------- */

.news-page-hero {
    padding: 110px 0 90px;
    background: #f3f1ec;
}

.news-page-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 80px;
    align-items: end;

    margin-top: 35px;
}

.news-page-hero h1 {
    margin: 0;

    font-size: clamp(64px, 8vw, 118px);
    line-height: 0.82;
    letter-spacing: -0.06em;
    font-weight: 700;

    color: #111;
}

.news-page-hero h1 em {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

.news-page-hero-copy {
    max-width: 480px;
    padding-bottom: 5px;
}

.news-page-hero-copy h2 {
    margin: 0 0 20px;

    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.news-page-hero-copy p {
    margin: 0;

    font-size: 16px;
    line-height: 1.7;
    color: #555;
}


/* ----------------------------------------------------------
   NEWS LIST
---------------------------------------------------------- */

.news-page-list {
    padding: 90px 0 120px;
}

.news-page-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 45px 28px;
}


/* ----------------------------------------------------------
   CARD
---------------------------------------------------------- */

.news-page-card {
    min-width: 0;
}

.news-page-image {
    position: relative;

    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: #e8e6e1;
    text-decoration: none;
}

.news-page-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.45s ease;
}

.news-page-card:hover .news-page-image img {
    transform: scale(1.025);
}


/* No-image placeholder */

.news-page-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    background: #111;
    color: #fff;
}

.news-page-image-placeholder span {
    font-size: clamp(32px, 5vw, 60px);
    font-weight: 700;
    letter-spacing: -0.05em;
}


/* External-link symbol */

.news-page-external {
    position: absolute;
    top: 16px;
    right: 16px;

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

    width: 42px;
    height: 42px;

    background: #fff;
    color: #111;

    font-size: 18px;
}


/* ----------------------------------------------------------
   CARD CONTENT
---------------------------------------------------------- */

.news-page-card-content {
    padding-top: 20px;
}

.news-page-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 16px;
}

.news-page-category,
.news-page-date {
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.14em;
}

.news-page-category {
    color: #111;
}

.news-page-date {
    color: #777;
    white-space: nowrap;
}

.news-page-card h2 {
    margin: 0 0 15px;

    font-size: clamp(22px, 2.3vw, 31px);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.news-page-card h2 a {
    color: #111;
    text-decoration: none;
}

.news-page-card h2 a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.news-page-card-content > p {
    margin: 0;

    font-size: 14px;
    line-height: 1.65;

    color: #5c5c5c;
}


/* ----------------------------------------------------------
   CARD FOOTER
---------------------------------------------------------- */

.news-page-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;

    margin-top: 24px;
    padding-top: 15px;

    border-top: 1px solid rgba(17, 17, 17, 0.15);
}

.news-page-source {
    font-size: 9px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.12em;

    color: #777;
}

.news-page-read {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    flex-shrink: 0;

    color: #111;
    text-decoration: none;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.news-page-read span {
    font-size: 15px;

    transition: transform 0.2s ease;
}

.news-page-read:hover span {
    transform: translateX(3px);
}


/* ----------------------------------------------------------
   EMPTY NEWS
---------------------------------------------------------- */

.news-page-empty {
    max-width: 650px;
    padding: 30px 0 70px;
}

.news-page-empty > span {
    display: block;

    margin-bottom: 20px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.news-page-empty h2 {
    margin: 0 0 25px;

    font-size: clamp(45px, 6vw, 78px);
    line-height: 0.95;
    letter-spacing: -0.05em;
}

.news-page-empty h2 em {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

.news-page-empty p {
    max-width: 440px;

    font-size: 16px;
    line-height: 1.7;

    color: #555;
}


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

@media (max-width: 950px) {

    .news-page-hero-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .news-page-hero-copy {
        max-width: 600px;
    }

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

}


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

@media (max-width: 650px) {

    .news-page-inner {
        width: min(100% - 30px, 1180px);
    }

    .news-page-hero {
        padding: 75px 0 60px;
    }

    .news-page-hero-grid {
        margin-top: 25px;
        gap: 35px;
    }

    .news-page-hero h1 {
        font-size: clamp(54px, 18vw, 82px);
    }

    .news-page-list {
        padding: 60px 0 85px;
    }

    .news-page-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .news-page-meta {
        align-items: flex-start;
    }

}

/* ==========================================================
   INDIVIDUAL NEWS ARTICLE
========================================================== */

.news-article {
    background: #fff;
}

.news-article-inner,
.news-article-body {
    width: min(900px, calc(100% - 48px));
    margin: 0 auto;
}


/* ----------------------------------------------------------
   HEADER
---------------------------------------------------------- */

.news-article-header {
    padding: 80px 0 70px;
    background: #f3f1ec;
}

.news-article-back {
    display: inline-block;

    margin-bottom: 65px;

    color: #111;
    text-decoration: none;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.13em;
}

.news-article-back:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}


.news-article-meta {
    display: flex;
    align-items: center;
    gap: 22px;

    margin-bottom: 25px;
}

.news-article-meta span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.news-article-meta span:last-child {
    color: #777;
}


.news-article-header h1 {
    max-width: 850px;
    margin: 0;

    font-size: clamp(48px, 7vw, 92px);
    line-height: 0.95;
    letter-spacing: -0.055em;
    font-weight: 650;

    color: #111;
}


.news-article-intro {
    max-width: 700px;

    margin: 35px 0 0;

    font-size: clamp(19px, 2vw, 24px);
    line-height: 1.5;

    color: #555;
}


.news-article-source {
    margin-top: 30px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;

    color: #777;
}


/* ----------------------------------------------------------
   FEATURE IMAGE
---------------------------------------------------------- */

.news-article-image {
    width: 100%;
    background: #e8e6e1;
}

.news-article-image img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 750px;

    object-fit: contain;
    object-position: center;

    margin: 0 auto;
}


/* ----------------------------------------------------------
   ARTICLE CONTENT
---------------------------------------------------------- */

.news-article-body {
    padding: 75px 0 110px;
}

.news-article-copy {
    max-width: 720px;

    font-size: 18px;
    line-height: 1.85;

    color: #333;
}

.news-article-copy p {
    margin: 0 0 28px;
}


/* ----------------------------------------------------------
   ARTICLE END
---------------------------------------------------------- */

.news-article-end {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    margin-top: 75px;
    padding-top: 25px;

    border-top: 1px solid rgba(17, 17, 17, 0.18);
}

.news-article-end > span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.news-article-end a {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: #111;
    text-decoration: none;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.news-article-end a span {
    font-size: 16px;

    transition: transform 0.2s ease;
}

.news-article-end a:hover span {
    transform: translateX(4px);
}


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

@media (max-width: 650px) {

    .news-article-inner,
    .news-article-body {
        width: min(100% - 30px, 900px);
    }

    .news-article-header {
        padding: 60px 0 55px;
    }

    .news-article-back {
        margin-bottom: 45px;
    }

    .news-article-header h1 {
        font-size: clamp(44px, 14vw, 68px);
    }

    .news-article-image-wrap {
        width: min(100% - 30px, 1180px);
        margin-top: 45px;
    }

    

    .news-article-body {
        padding: 55px 0 80px;
    }

    .news-article-copy {
        font-size: 17px;
        line-height: 1.75;
    }

    .news-article-end {
        align-items: flex-start;
        flex-direction: column;
    }

}

.news-article-copy {
    margin-bottom: 60px;
}

.news-article-end {
    margin-top: 0;
}

/* ==========================================================
   HOMEPAGE - LATEST NEWS
========================================================== */

.home-news {
    padding: 110px 0 120px;
    background: #ebe8e1;
}


/* ----------------------------------------------------------
   HEADING
---------------------------------------------------------- */

.home-news-heading {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 80px;
    align-items: end;

    margin-bottom: 70px;
}

.home-news-heading h2 {
    margin: 30px 0 0;

    font-size: clamp(58px, 7vw, 96px);
    line-height: 0.88;
    letter-spacing: -0.055em;
    font-weight: 700;

    color: #111;
}

.home-news-heading h2 em {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}


/* ----------------------------------------------------------
   INTRO
---------------------------------------------------------- */

.home-news-intro {
    max-width: 430px;
    padding-bottom: 5px;
}

.home-news-intro p {
    margin: 0 0 28px;

    font-size: 16px;
    line-height: 1.7;

    color: #555;
}


/* ----------------------------------------------------------
   NEWS GRID
---------------------------------------------------------- */

.home-news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}


/* ----------------------------------------------------------
   NEWS CARD
---------------------------------------------------------- */

.home-news-card {
    min-width: 0;
}


/* ----------------------------------------------------------
   IMAGE
---------------------------------------------------------- */

.home-news-image {
    position: relative;

    display: block;
    width: 100%;
    height: 310px;

    overflow: hidden;

    background: #111;
    text-decoration: none;
}

.home-news-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 0.45s ease;
}

.home-news-card:hover .home-news-image img {
    transform: scale(1.025);
}


/* ----------------------------------------------------------
   NO IMAGE
---------------------------------------------------------- */

.home-news-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    background: #071f17;
    color: #fff;
}

.home-news-placeholder span {
    font-size: 52px;
    font-weight: 700;
    letter-spacing: -0.05em;
}


/* ----------------------------------------------------------
   IMAGE ARROW
---------------------------------------------------------- */

.home-news-arrow {
    position: absolute;
    right: 16px;
    bottom: 16px;

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

    width: 44px;
    height: 44px;

    background: #fff;
    color: #111;

    font-size: 18px;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.home-news-card:hover .home-news-arrow {
    transform: translate(2px, -2px);
}


/* ----------------------------------------------------------
   CARD INFORMATION
---------------------------------------------------------- */

.home-news-info {
    padding-top: 20px;
}

.home-news-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 17px;
}

.home-news-meta span {
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.14em;
}

.home-news-meta span:first-child {
    color: #111;
}

.home-news-meta span:last-child {
    color: #777;
    white-space: nowrap;
}


/* ----------------------------------------------------------
   TITLE
---------------------------------------------------------- */

.home-news-info h3 {
    margin: 0 0 16px;

    font-size: clamp(23px, 2.2vw, 31px);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.home-news-info h3 a {
    color: #111;
    text-decoration: none;
}

.home-news-info h3 a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}


/* ----------------------------------------------------------
   SUMMARY
---------------------------------------------------------- */

.home-news-info > p {
    margin: 0;

    font-size: 14px;
    line-height: 1.65;

    color: #5c5c5c;
}


/* ----------------------------------------------------------
   READ LINK
---------------------------------------------------------- */

.home-news-read {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    margin-top: 25px;
    padding-top: 15px;

    border-top: 1px solid rgba(17, 17, 17, 0.15);

    color: #111;
    text-decoration: none;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.home-news-read span {
    font-size: 15px;

    transition: transform 0.2s ease;
}

.home-news-read:hover span {
    transform: translateX(4px);
}


/* ----------------------------------------------------------
   EMPTY
---------------------------------------------------------- */

.home-news-empty {
    padding: 35px 0;

    border-top: 1px solid rgba(17, 17, 17, 0.15);
    border-bottom: 1px solid rgba(17, 17, 17, 0.15);
}

.home-news-empty p {
    margin: 0;

    font-size: 15px;
    color: #555;
}


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

@media (max-width: 950px) {

    .home-news-heading {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .home-news-intro {
        max-width: 600px;
    }

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

}


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

@media (max-width: 650px) {

    .home-news {
        padding: 75px 0 85px;
    }

    .home-news-heading {
        margin-bottom: 50px;
    }

    .home-news-heading h2 {
        font-size: clamp(52px, 17vw, 76px);
    }

    .home-news-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .home-news-image {
        height: auto;
        aspect-ratio: 16 / 10;
    }

}

/* ==========================================================
   HOMEPAGE NEWS - ADAPT TO NUMBER OF STORIES
========================================================== */

.home-news-grid.home-news-count-1 {
    grid-template-columns: minmax(0, 1fr);
    max-width: 720px;
}

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

.home-news-grid.home-news-count-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* Tablet */

@media (max-width: 950px) {

    .home-news-grid.home-news-count-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* Mobile */

@media (max-width: 650px) {

    .home-news-grid.home-news-count-1,
    .home-news-grid.home-news-count-2,
    .home-news-grid.home-news-count-3 {
        grid-template-columns: 1fr;
        max-width: none;
    }

}

/* ==========================================================
   DEVELOPMENT PAGE
========================================================== */


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

.development-hero {
    padding: 120px 0 125px;
    background: #071f17;
    color: #fff;
}


/* Eyebrow */

.development-hero .section-eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 65px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;

    color: rgba(255, 255, 255, 0.65);
}

.development-hero .section-eyebrow > span {
    display: block;

    width: 48px;
    height: 3px;

    background: #ff1744;
}


/* Hero layout */

.development-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 100px;

    align-items: end;
}


/* Main title */

.development-hero-title h1 {
    margin: 0;

    font-size: clamp(80px, 10vw, 150px);
    line-height: 0.79;
    letter-spacing: -0.065em;
    font-weight: 700;

    color: #fff;
}

.development-hero-title h1 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -0.055em;

    color: #fff;
}


/* Hero copy */

.development-hero-copy {
    max-width: 470px;
    padding-bottom: 5px;
}

.development-hero-copy > span {
    display: block;

    margin-bottom: 20px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;

    color: #ff1744;
}

.development-hero-copy h2 {
    margin: 0 0 25px;

    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.05;
    letter-spacing: -0.035em;

    color: #fff;
}

.development-hero-copy p {
    margin: 0;

    max-width: 440px;

    font-size: 17px;
    line-height: 1.7;

    color: rgba(255, 255, 255, 0.68);
}


/* ==========================================================
   INTRODUCTION
========================================================== */

.development-intro {
    padding: 120px 0 130px;

    background: #f3f1ec;
    color: #111;
}


.development-intro-grid {
    display: grid;

    grid-template-columns:
        90px
        minmax(320px, 0.95fr)
        minmax(320px, 0.8fr);

    gap: 60px;

    align-items: start;
}


/* Number */

.development-intro-number {
    padding-top: 5px;
}

.development-intro-number span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;

    color: #ff1744;
}


/* Heading */

.development-small-label {
    display: block;

    margin-bottom: 25px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;

    color: #777;
}


.development-intro-heading h2 {
    margin: 0;

    font-size: clamp(55px, 6vw, 88px);
    line-height: 0.88;
    letter-spacing: -0.055em;

    color: #111;
}

.development-intro-heading h2 em {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}


/* Copy */

.development-intro-copy {
    max-width: 480px;

    padding-top: 36px;
}


.development-intro-copy p {
    margin: 0 0 22px;

    font-size: 16px;
    line-height: 1.75;

    color: #5b5b5b;
}


.development-intro-copy .development-lead {
    margin-bottom: 28px;

    font-size: 24px;
    line-height: 1.35;
    letter-spacing: -0.02em;
    font-weight: 600;

    color: #111;
}


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

@media (max-width: 950px) {

    .development-hero {
        padding: 95px 0 105px;
    }

    .development-hero-grid {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .development-hero-copy {
        max-width: 600px;
    }


    .development-intro {
        padding: 95px 0 105px;
    }

    .development-intro-grid {
        grid-template-columns: 60px 1fr;
        gap: 45px;
    }

    .development-intro-copy {
        grid-column: 2;

        max-width: 600px;
        padding-top: 0;
    }

}


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

@media (max-width: 650px) {

    .development-hero {
        padding: 75px 0 85px;
    }

    .development-hero .section-eyebrow {
        margin-bottom: 45px;
    }

    .development-hero-title h1 {
        font-size: clamp(70px, 23vw, 105px);
    }

    .development-hero-grid {
        gap: 55px;
    }

    .development-hero-copy p {
        font-size: 16px;
    }


    .development-intro {
        padding: 80px 0 90px;
    }

    .development-intro-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .development-intro-number,
    .development-intro-copy {
        grid-column: auto;
    }

    .development-intro-heading h2 {
        font-size: clamp(55px, 17vw, 76px);
    }

    .development-intro-copy {
        padding-top: 10px;
    }

    .development-intro-copy .development-lead {
        font-size: 21px;
    }

}

/* ==========================================================
   DEVELOPMENT - PATHWAY
========================================================== */

.development-pathway {
    padding: 120px 0 130px;

    background: #071f17;
    color: #fff;
}


/* ----------------------------------------------------------
   HEADER
---------------------------------------------------------- */

.development-pathway-header {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 90px;
    align-items: end;

    margin-bottom: 80px;
}


.development-pathway-header h2 {
    margin: 30px 0 0;

    font-size: clamp(58px, 7vw, 98px);
    line-height: 0.88;
    letter-spacing: -0.055em;

    color: #fff;
}


.development-pathway-header h2 em {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}


.development-pathway-intro {
    max-width: 470px;
}


.development-pathway-intro > span {
    display: block;

    margin-bottom: 22px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.17em;

    color: #ff1744;
}


.development-pathway-intro p {
    margin: 0;

    font-size: 16px;
    line-height: 1.7;

    color: rgba(255, 255, 255, 0.67);
}


/* ----------------------------------------------------------
   PATHWAY LIST
---------------------------------------------------------- */

.development-pathway-list {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}


.development-pathway-row {
    display: grid;

    grid-template-columns:
        65px
        minmax(240px, 0.85fr)
        minmax(300px, 1fr)
        100px;

    gap: 35px;
    align-items: center;

    min-height: 155px;
    padding: 30px 0;

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


/* Number */

.development-pathway-number {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;

    color: #ff1744;
}


/* Level */

.development-pathway-level span {
    display: block;

    margin-bottom: 9px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;

    color: rgba(255, 255, 255, 0.48);
}


.development-pathway-level strong {
    display: block;

    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.05;
    letter-spacing: -0.025em;

    color: #fff;
}


/* Description */

.development-pathway-copy p {
    max-width: 470px;
    margin: 0;

    font-size: 14px;
    line-height: 1.65;

    color: rgba(255, 255, 255, 0.62);
}


/* Marker */

.development-pathway-marker {
    justify-self: end;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.13em;

    color: rgba(255, 255, 255, 0.45);
}


/* ----------------------------------------------------------
   HOVER
---------------------------------------------------------- */

.development-pathway-row {
    transition:
        padding-left 0.25s ease,
        background-color 0.25s ease;
}


.development-pathway-row:hover {
    padding-left: 15px;

    background: rgba(255, 255, 255, 0.035);
}


.development-pathway-row:hover
.development-pathway-marker {
    color: #ff1744;
}


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

@media (max-width: 950px) {

    .development-pathway {
        padding: 95px 0 105px;
    }

    .development-pathway-header {
        grid-template-columns: 1fr;
        gap: 45px;

        margin-bottom: 60px;
    }

    .development-pathway-intro {
        max-width: 600px;
    }


    .development-pathway-row {
        grid-template-columns:
            45px
            minmax(220px, 0.8fr)
            1fr;

        gap: 25px;
    }

    .development-pathway-marker {
        display: none;
    }

}


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

@media (max-width: 650px) {

    .development-pathway {
        padding: 80px 0 90px;
    }

    .development-pathway-header h2 {
        font-size: clamp(52px, 17vw, 76px);
    }


    .development-pathway-row {
        grid-template-columns: 40px 1fr;

        gap: 15px 20px;

        padding: 30px 0;
    }


    .development-pathway-level {
        grid-column: 2;
    }


    .development-pathway-copy {
        grid-column: 2;
    }


    .development-pathway-row:hover {
        padding-left: 0;
    }

}

/* ==========================================================
   DEVELOPMENT - SUPPORT
========================================================== */

.development-support {
    padding: 120px 0 130px;
    background: #ebe8e1;
    color: #111;
}


/* Header */

.development-support-header {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 90px;
    align-items: end;

    margin-bottom: 75px;
}


.development-support-header h2 {
    margin: 25px 0 0;

    font-size: clamp(55px, 6.5vw, 92px);
    line-height: 0.88;
    letter-spacing: -0.055em;

    color: #111;
}


.development-support-header h2 em {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}


.development-support-intro {
    max-width: 470px;
    padding-bottom: 5px;
}


.development-support-intro p {
    margin: 0;

    font-size: 17px;
    line-height: 1.7;

    color: #555;
}


/* ----------------------------------------------------------
   SUPPORT GRID
---------------------------------------------------------- */

.development-support-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top: 1px solid rgba(17, 17, 17, 0.18);
    border-left: 1px solid rgba(17, 17, 17, 0.18);
}


.development-support-card {
    position: relative;

    min-height: 330px;
    padding: 35px 40px 40px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border-right: 1px solid rgba(17, 17, 17, 0.18);
    border-bottom: 1px solid rgba(17, 17, 17, 0.18);

    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}


.development-support-number {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;

    color: #ff1744;
}


.development-support-label {
    display: block;

    margin-bottom: 10px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.17em;

    color: #777;
}


.development-support-card h3 {
    margin: 0 0 20px;

    font-size: clamp(30px, 3vw, 45px);
    line-height: 0.95;
    letter-spacing: -0.04em;

    color: #111;
}


.development-support-card p {
    max-width: 440px;
    margin: 0;

    font-size: 14px;
    line-height: 1.7;

    color: #5b5b5b;
}


/* Hover */

.development-support-card:hover {
    background: #071f17;
}


.development-support-card:hover h3 {
    color: #fff;
}


.development-support-card:hover p {
    color: rgba(255, 255, 255, 0.68);
}


.development-support-card:hover
.development-support-label {
    color: rgba(255, 255, 255, 0.48);
}


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

@media (max-width: 950px) {

    .development-support {
        padding: 95px 0 105px;
    }

    .development-support-header {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .development-support-intro {
        max-width: 600px;
    }

}


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

@media (max-width: 650px) {

    .development-support {
        padding: 80px 0 90px;
    }

    .development-support-header {
        margin-bottom: 50px;
    }

    .development-support-header h2 {
        font-size: clamp(52px, 16vw, 74px);
    }

    .development-support-grid {
        grid-template-columns: 1fr;
    }

    .development-support-card {
        min-height: 285px;
        padding: 30px 25px;
    }

}

/* ==========================================================
   DEVELOPMENT - FINAL CTA
========================================================== */

.development-cta {
    padding: 120px 0 130px;

    background: #fff;
    color: #111;
}


/* ----------------------------------------------------------
   HEADING
---------------------------------------------------------- */

.development-cta-heading {
    margin-bottom: 70px;
}


.development-cta-label {
    display: block;

    margin-bottom: 25px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;

    color: #777;
}


.development-cta-heading h2 {
    max-width: 900px;
    margin: 0;

    font-size: clamp(58px, 7vw, 100px);
    line-height: 0.88;
    letter-spacing: -0.055em;

    color: #111;
}


.development-cta-heading h2 em {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}


/* ----------------------------------------------------------
   CTA GRID
---------------------------------------------------------- */

.development-cta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top: 1px solid rgba(17, 17, 17, 0.18);
    border-left: 1px solid rgba(17, 17, 17, 0.18);
}


/* ----------------------------------------------------------
   CTA CARD
---------------------------------------------------------- */

.development-cta-card {
    position: relative;

    min-height: 440px;
    padding: 38px 42px 40px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border-right: 1px solid rgba(17, 17, 17, 0.18);
    border-bottom: 1px solid rgba(17, 17, 17, 0.18);

    color: #111;
    text-decoration: none;

    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}


.development-cta-number {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;

    color: #ff1744;
}


.development-cta-content {
    max-width: 470px;
}


.development-cta-card-label {
    display: block;

    margin-bottom: 15px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.17em;

    color: #777;
}


.development-cta-card h3 {
    margin: 0 0 25px;

    font-size: clamp(37px, 4vw, 58px);
    line-height: 0.9;
    letter-spacing: -0.045em;

    color: inherit;
}


.development-cta-card p {
    max-width: 400px;
    margin: 0;

    font-size: 14px;
    line-height: 1.7;

    color: #5b5b5b;
}


.development-cta-arrow {
    position: absolute;
    right: 38px;
    top: 35px;

    font-size: 27px;

    transition: transform 0.2s ease;
}


.development-cta-card:hover .development-cta-arrow {
    transform: translateX(6px);
}


/* ----------------------------------------------------------
   MEMBERS CARD HOVER
---------------------------------------------------------- */

.development-cta-card:hover {
    background: #071f17;
    color: #fff;
}


.development-cta-card:hover p {
    color: rgba(255, 255, 255, 0.68);
}


.development-cta-card:hover
.development-cta-card-label {
    color: rgba(255, 255, 255, 0.48);
}


/* ----------------------------------------------------------
   BECOME A REFEREE CARD
---------------------------------------------------------- */

.development-cta-card-accent {
    background: #071f17;
    color: #fff;
}


.development-cta-card-accent p {
    color: rgba(255, 255, 255, 0.68);
}


.development-cta-card-accent
.development-cta-card-label {
    color: rgba(255, 255, 255, 0.48);
}


.development-cta-card-accent:hover {
    background: #0b2b20;
}


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

@media (max-width: 950px) {

    .development-cta {
        padding: 95px 0 105px;
    }

    .development-cta-card {
        min-height: 400px;
        padding: 35px 30px;
    }

}


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

@media (max-width: 650px) {

    .development-cta {
        padding: 80px 0 90px;
    }

    .development-cta-heading {
        margin-bottom: 50px;
    }

    .development-cta-heading h2 {
        font-size: clamp(52px, 16vw, 76px);
    }

    .development-cta-grid {
        grid-template-columns: 1fr;
    }

    .development-cta-card {
        min-height: 360px;
        padding: 30px 25px;
    }

    .development-cta-arrow {
        top: 27px;
        right: 25px;
    }

}

/* ============================================================
   MEMBER ADMIN - DELETE MEMBER TEXT FIX
   ============================================================ */

.member-danger-copy h3 {
    color: #111111;
}

.member-danger-copy p {
    color: #666666;
}

.member-danger-copy > span {
    color: #ff1744;
}

/* ============================================================
   MEMBER ADMIN - GRADING COMMITTEE PERMISSION
   ============================================================ */

.member-permission-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;

    margin-top: 30px;
    margin-bottom: 30px;
    padding: 28px 22px;

    border: 1px solid rgba(255,255,255,0.18);
}

.member-permission-text {
    max-width: 620px;
}

.member-permission-label {
    display: block;
    margin-bottom: 10px;

    color: #ff1744;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
}

.member-permission-text h3 {
    margin: 0 0 8px;

    color: #ffffff;
    font-size: 22px;
}

.member-permission-text p {
    margin: 0;

    color: rgba(255,255,255,0.68);
    font-size: 15px;
    line-height: 1.6;
}

.member-permission-toggle {
    display: flex;
    align-items: center;
    gap: 12px;

    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;

    cursor: pointer;
    white-space: nowrap;
}

.member-permission-toggle input {
    width: 20px;
    height: 20px;
    accent-color: #ff1744;
    cursor: pointer;
}

@media (max-width: 700px) {
    .member-permission-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

/* Grading committee permission badge */

.member-admin-role {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

.member-role-name {
    display: block;
}

.member-grading-badge {
    display: inline-block;
    color: #ff1744;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1.5px;
    white-space: nowrap;
}

/* =========================================================
   HOMEPAGE LIGHT / DARK THEME (from home-blue-test.php)
   ========================================================= */

/* =========================================================
   THEME SWITCH
========================================================= */

.home-theme-switch {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9999;

    display: flex;
    align-items: center;
    gap: 4px;

    padding: 5px;

    background: #ffffff;
    border: 1px solid rgba(0, 43, 30, 0.15);
    border-radius: 50px;

    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.home-theme-button {
    border: 0;
    background: transparent;

    padding: 10px 14px;

    border-radius: 40px;

    font: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;

    color: #002b1e;

    cursor: pointer;
}

.home-theme-button.active {
    background: #002b1e;
    color: #ffffff;
}


/* =========================================================
   LIGHT THEME
========================================================= */

html[data-home-theme="light"] .fixtures-section,
html[data-home-theme="light"] .become-referee {
    background: #dce8ee !important;
}


/* HEADINGS / BODY TEXT */

html[data-home-theme="light"] .fixtures-section h2,
html[data-home-theme="light"] .fixtures-section h2 em,
html[data-home-theme="light"] .fixtures-section p,
html[data-home-theme="light"] .fixtures-section .section-eyebrow,

html[data-home-theme="light"] .become-referee h2,
html[data-home-theme="light"] .become-referee h2 em,
html[data-home-theme="light"] .become-referee h3,
html[data-home-theme="light"] .become-referee p,
html[data-home-theme="light"] .become-referee .section-eyebrow {
    color: #002b1e !important;
}


/* FIXTURE CONTENT */

html[data-home-theme="light"] .fixture-date,
html[data-home-theme="light"] .fixture-time,
html[data-home-theme="light"] .fixture-match,
html[data-home-theme="light"] .fixture-team,
html[data-home-theme="light"] .fixture-ref,
html[data-home-theme="light"] .fixture-ref strong,
html[data-home-theme="light"] .fixtures-note {
    color: #002b1e !important;
}


/* DIVIDING LINES */

html[data-home-theme="light"] .fixture-row {
    border-color: rgba(0, 43, 30, 0.18) !important;
}


/* LINKS */

html[data-home-theme="light"] .fixtures-section .text-link,
html[data-home-theme="light"] .fixture-arrow,
html[data-home-theme="light"] .become-referee-link {
    color: #002b1e !important;
}


/* SMALL DECORATIVE LINES */

html[data-home-theme="light"] .fixtures-section .section-line,
html[data-home-theme="light"] .become-referee .section-eyebrow span {
    background: #002b1e !important;
}

/* =========================================================
   LIGHT THEME — ADDITIONAL HOMEPAGE SECTIONS
========================================================= */


/* ---------------------------------------------------------
   FIXTURES — SMALL LABELS
--------------------------------------------------------- */

html[data-home-theme="light"] .fixtures-section .fixture-ref::before,
html[data-home-theme="light"] .fixtures-section .fixture-ref-label {
    color: rgba(0, 43, 30, 0.55) !important;
}


/* Make fixture separators slightly clearer */

html[data-home-theme="light"] .fixtures-section .fixture-row {
    border-color: rgba(0, 43, 30, 0.22) !important;
}


/* ---------------------------------------------------------
   REFEREES SECTION
   Keep this warm/light rather than blue
--------------------------------------------------------- */

html[data-home-theme="light"] .referees-section {
    background: #f5f3ee !important;
}

html[data-home-theme="light"] .referees-section h2,
html[data-home-theme="light"] .referees-section h2 em,
html[data-home-theme="light"] .referees-section h3,
html[data-home-theme="light"] .referees-section p,
html[data-home-theme="light"] .referees-section .section-eyebrow,
html[data-home-theme="light"] .referees-section .text-link {
    color: #002b1e !important;
}


/* ---------------------------------------------------------
   NEWS SECTION
--------------------------------------------------------- */

html[data-home-theme="light"] .home-news {
    background: #f5f3ee !important;
}

html[data-home-theme="light"] .home-news h2,
html[data-home-theme="light"] .home-news h2 em,
html[data-home-theme="light"] .home-news h3,
html[data-home-theme="light"] .home-news p,
html[data-home-theme="light"] .home-news .section-eyebrow,
html[data-home-theme="light"] .home-news .text-link {
    color: #002b1e !important;
}


/* ---------------------------------------------------------
   BECOME A REFEREE
--------------------------------------------------------- */

html[data-home-theme="light"] .become-referee {
    background: #dce8ee !important;
}

html[data-home-theme="light"] .become-referee * {
    border-color: rgba(0, 43, 30, 0.20);
}

/* =========================================================
   LIGHT MODE — FORCE READABLE TEXT ON PALE SECTIONS
========================================================= */

/* FIXTURES */

html[data-home-theme="light"] .fixtures-section,
html[data-home-theme="light"] .fixtures-section * {
    color: #003c2f !important;
}

/* Keep the pink/red accents */

html[data-home-theme="light"] .fixtures-section em,
html[data-home-theme="light"] .fixtures-section .fixture-v,
html[data-home-theme="light"] .fixtures-section .accent {
    color: #ff3158 !important;
}


/* REFEREES */

html[data-home-theme="light"] .referees-section,
html[data-home-theme="light"] .referees-section * {
    color: #003c2f !important;
}


/* NEWS */

html[data-home-theme="light"] .home-news,
html[data-home-theme="light"] .home-news * {
    color: #003c2f !important;
}


/* BECOME A REFEREE */

html[data-home-theme="light"] .become-referee,
html[data-home-theme="light"] .become-referee * {
    color: #003c2f !important;
}


/* Restore pink/red italic/accent text */

html[data-home-theme="light"] .become-referee em,
html[data-home-theme="light"] .referees-section em,
html[data-home-theme="light"] .home-news em {
    color: #ff3158 !important;
}

/* =========================================================
   LIGHT MODE — REFEREE CARD ARROW
========================================================= */

html[data-home-theme="light"] .referee-card-arrow {
    background: #003c2f !important;
    border-color: #003c2f !important;
    color: #ffffff !important;
}

/* MOBILE */

@media (max-width: 700px) {

    .home-theme-switch {
        right: 12px;
        bottom: 12px;
    }

    .home-theme-button {
        padding: 9px 11px;
        font-size: 10px;
    }

}


/* =========================================
   TRAINING PAGE — LIGHT THEME
========================================= */

html[data-home-theme="light"] .training-monthly {
    background: #dce8ee;
}

html[data-home-theme="light"] .training-monthly-date span,
html[data-home-theme="light"] .training-monthly-date strong,
html[data-home-theme="light"] .training-monthly-copy h2 {
    color: #101612;
}

html[data-home-theme="light"] .training-monthly-copy p {
    color: #52605b;
}

html[data-home-theme="light"] .training-coaching {
    background: #f5f3ee;
    border-top-color: #d4d6d0;
}

html[data-home-theme="light"] .training-light-eyebrow,
html[data-home-theme="light"] .training-coaching-heading h2,
html[data-home-theme="light"] .training-coaching-grid h3 {
    color: #101612;
}

html[data-home-theme="light"] .training-coaching-grid p {
    color: #626764;
}

html[data-home-theme="light"] .training-coaching-grid {
    border-top-color: #cbd1cb;
    border-bottom-color: #cbd1cb;
}

html[data-home-theme="light"] .training-coaching-grid article + article {
    border-left-color: #cbd1cb;
}

/* =========================================
   FIXTURES PAGE — LIGHT THEME
========================================= */

html[data-home-theme="light"] .fixtures-page-hero {
    background: #dce8ee;
    color: #101612;
}

html[data-home-theme="light"] .full-fixtures {
    background: #f5f3ee;
    color: #101612;
}

/* Hero */

html[data-home-theme="light"] .fixtures-page-hero h1,
html[data-home-theme="light"] .fixtures-page-intro strong {
    color: #101612;
}

html[data-home-theme="light"] .fixtures-page-hero .section-eyebrow,
html[data-home-theme="light"] .fixtures-page-intro {
    color: #52605b;
}

/* Date headings and fixture rows */

html[data-home-theme="light"] .fixture-date-heading,
html[data-home-theme="light"] .full-fixture-row {
    border-bottom-color: #cbd1cb;
}

html[data-home-theme="light"] .fixture-date-heading h2,
html[data-home-theme="light"] .full-fixture-time strong,
html[data-home-theme="light"] .full-fixture-teams,
html[data-home-theme="light"] .full-fixture-ref strong:not(.tbc) {
    color: #101612;
}

html[data-home-theme="light"] .full-fixture-time span,
html[data-home-theme="light"] .full-fixture-ref span,
html[data-home-theme="light"] .full-fixture-competition {
    color: #59645f;
}

html[data-home-theme="light"] .full-fixture-row:hover {
    background: rgba(0, 60, 47, 0.045);
}

/* Filters */

html[data-home-theme="light"] .fixture-filters {
    border-top-color: #cbd1cb;
    border-bottom-color: #cbd1cb;
}

/* Empty fixture message */

html[data-home-theme="light"] .fixtures-empty,
html[data-home-theme="light"] .fixtures-empty p {
    color: #52605b;
}

html[data-home-theme="light"] .fixtures-empty h2 {
    color: #101612;
}

/* =========================================
   FIXTURES — LIGHT THEME TEAM NAME FIX
========================================= */

html[data-home-theme="light"] .full-fixture-teams strong {
    color: #101612;
}

/* =========================================
   LARGER SECTION EYEBROW HEADINGS
========================================= */

.section-eyebrow {
    font-size: 14px;
    letter-spacing: 3px;
}

@media (max-width: 700px) {
    .section-eyebrow {
        font-size: 12px;
        letter-spacing: 2px;
    }
}
/* Member Add/Edit form label visibility */

.member-edit-form .member-edit-field > label {
    color: #ffffff;
    opacity: 1;
}

/* ==========================================
   NEWS EDITOR FORM FIXES
========================================== */

.member-admin-page .member-edit-form .member-edit-field > label {
    color: #173b2e;
    opacity: 1;
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
}

.member-admin-page .member-edit-form input[type="text"],
.member-admin-page .member-edit-form input[type="url"],
.member-admin-page .member-edit-form select,
.member-admin-page .member-edit-form textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    color: #173b2e;
    background: #ffffff;
    font-family: inherit;
    font-size: 16px;
}

.member-admin-page .member-edit-form textarea {
    min-height: 120px;
    padding: 14px;
    resize: vertical;
}

.member-admin-page .member-edit-form textarea[name="content"] {
    min-height: 260px;
}

.member-admin-page .member-edit-form input::placeholder,
.member-admin-page .member-edit-form textarea::placeholder {
    color: #737b77;
    opacity: 1;
}