backgrou/* =========================================================
   RETIRED TO RIDE TOURING AWARDS
   PREMIUM CINEMATIC ROAD THEME
   ========================================================= */

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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

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

background: #242424;
color: #f5f5f5;

    line-height: 1.6;

    overflow-x: hidden;
}


/* =========================================================
   COLOUR PALETTE
   ========================================================= */

:root {
    --black: #050505;
    --charcoal: #0d0d0d;
    --dark-grey: #161616;
    --grey: #252525;
    --light-grey: #888888;

    --white: #f5f5f5;

    --red: #c62828;
    --dark-red: #8f1818;

    --gold: #d4af37;
    --gold-light: #f0d878;

    --shadow: rgba(0, 0, 0, 0.7);
}


/* =========================================================
   LINKS
   ========================================================= */

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

a:hover {
    color: var(--gold);
}


/* =========================================================
   IMAGES
   ========================================================= */

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

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


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

header {
    position: relative;
    z-index: 100;

    width: 100%;
    box-sizing: border-box;

    padding: 10px 25px;

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

    background:
        radial-gradient(
            ellipse at 20% 0%,
            rgba(255, 255, 255, 0.12) 0%,
            transparent 32%
        ),
        radial-gradient(
            ellipse at 80% 100%,
            rgba(212, 175, 55, 0.10) 0%,
            transparent 35%
        ),
        linear-gradient(
            115deg,
            #171717 0%,
            #353535 18%,
            #202020 35%,
            #454545 52%,
            #242424 68%,
            #111111 100%
        );

    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(212, 175, 55, 0.55);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6),
        0 12px 35px rgba(0, 0, 0, 0.45);
}


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

header img {
    width: 85px;
    height: 85px;

    object-fit: contain;
    flex-shrink: 0;

    filter:
        drop-shadow(
            0 8px 18px rgba(212, 175, 55, 0.25)
        );

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

header img:hover {
    transform: scale(1.03);

    filter:
        drop-shadow(
            0 10px 25px rgba(212, 175, 55, 0.5)
        );
}


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

nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex-wrap: nowrap;

    gap: 18px;

    margin-left: auto;
}

nav a {
    position: relative;

    margin-left: 0;

    color: #ffffff;

    font-size: 14px;
    font-weight: bold;

    letter-spacing: 0.5px;

    white-space: nowrap;

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

nav a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 0;
    height: 2px;

    background: var(--gold);

    transition: width 0.3s ease;
}

nav a:hover {
    color: var(--gold);

    transform: translateY(-2px);
}

nav a:hover::after {
    width: 100%;
}

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

.hero {
    position: relative;

    min-height: 80vh;

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

    text-align: center;

    background-size: cover;
    background-position: center;

    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 5;

    width: 100%;
    max-width: 1100px;

    padding: 50px 30px;
}

.hero h1 {
    margin: 0;

    font-size: clamp(45px, 7vw, 90px);

    line-height: 0.95;

    text-transform: uppercase;

    letter-spacing: 3px;

    text-shadow:
        0 5px 25px rgba(0, 0, 0, 0.8),
        0 0 30px rgba(212, 175, 55, 0.2);
}

.hero h2 {
    margin: 30px 0 15px;

    font-size: clamp(25px, 4vw, 42px);

    font-weight: normal;
}

.tagline {
    max-width: 800px;

    margin: 25px auto;

    color: #dddddd;

    font-size: 20px;

    line-height: 1.7;
}


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

.hero.awards-hero {
    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.55),
            rgba(0, 0, 0, 0.8)
        ),
        url("../images/retired-to-ride-logo.png");
}

.hero.about-hero {
    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.55),
            rgba(0, 0, 0, 0.8)
        ),
        url("../images/retired-to-ride-about-hero.jpg");
}

.hero.music-hero {
    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.8)
        ),
        url("../images/retired-to-ride-music-hero.jpg");
}


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

.adventures-hero {
    position: relative;

    min-height: calc(100vh - 90px);

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

    background-image:
        url("../images/retired-to-ride-world-map-dots.jpg");

    background-size: cover;
    background-position: center;

    overflow: hidden;
}


/* CINEMATIC DARK METAL OVERLAY */

.adventures-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(5, 5, 5, 0.25) 0%,
            rgba(8, 8, 8, 0.42) 45%,
            rgba(5, 5, 5, 0.82) 100%
        ),
        linear-gradient(
            115deg,
            rgba(255, 255, 255, 0.05) 0%,
            transparent 30%,
            rgba(212, 175, 55, 0.05) 55%,
            transparent 80%
        );

    z-index: 1;
}


/* GOLD ATMOSPHERE */

.adventures-hero::before {
    content: "";

    position: absolute;

    width: 750px;
    height: 750px;

    top: -350px;
    right: -250px;

    background:
        radial-gradient(
            ellipse,
            rgba(255, 225, 140, 0.16) 0%,
            rgba(212, 175, 55, 0.12) 32%,
            transparent 72%
        );

    filter: blur(35px);

    z-index: 2;

    pointer-events: none;
}


/* WARM RED ATMOSPHERE */

.adventures-hero::after {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    bottom: -300px;
    left: -200px;

    background:
        radial-gradient(
            ellipse,
            rgba(150, 50, 35, 0.14) 0%,
            rgba(212, 175, 55, 0.06) 40%,
            transparent 72%
        );

    filter: blur(45px);

    z-index: 2;

    pointer-events: none;
}


/* HERO CONTENT */

.adventures-hero .hero-content {
    position: relative;

    z-index: 5;

    max-width: 1200px;

    padding: 60px 30px;

    text-align: center;
}


/* SMALL TOP LINE */

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

    color: #ffffff;

    font-size: 14px;

    font-weight: bold;

    letter-spacing: 6px;

    text-transform: uppercase;

    text-shadow:
        0 0 15px rgba(255, 255, 255, 0.25);
}


/* BIG ADVENTURES TITLE */

.adventures-hero h1 {
    margin: 0;

    color: #ffffff;

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

    line-height: 0.85;

    letter-spacing: 2px;

    text-transform: uppercase;

    text-shadow:
        0 8px 30px rgba(0, 0, 0, 0.85),
        0 0 35px rgba(255, 255, 255, 0.08);
}

.adventures-hero h1 span {
    display: block;

    margin-top: 18px;

    color: var(--gold);

    font-size: 0.68em;

    text-shadow:
        0 0 25px rgba(212, 175, 55, 0.22);
}


/* COMPASS DIVIDER */

.compass-divider {
    display: flex;

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

    gap: 20px;

    max-width: 650px;

    margin: 35px auto;
}

.compass-divider::before,
.compass-divider::after {
    content: "";

    width: 42%;

    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(212, 175, 55, 0.75)
        );
}

.compass-divider::after {
    background:
        linear-gradient(
            to left,
            transparent,
            rgba(212, 175, 55, 0.75)
        );
}

.compass-divider span {
    color: var(--gold);

    font-size: 36px;

    text-shadow:
        0 0 20px rgba(212, 175, 55, 0.65);
}


/* SUBTITLE */

.adventures-hero h2 {
    margin: 0 0 20px;

    color: #ffffff;

    font-size: clamp(28px, 4vw, 48px);

    font-weight: normal;

    text-shadow:
        0 5px 20px rgba(0, 0, 0, 0.8);
}


/* DESCRIPTION */

.adventures-hero .tagline {
    max-width: 760px;

    margin: 20px auto 30px;

    color: #eeeeee;

    font-size: 19px;

    line-height: 1.7;

    text-shadow:
        0 3px 15px rgba(0, 0, 0, 0.8);
}


/* GOLD OUTLINED ADVENTURES BUTTON */

.adventure-button {
    padding: 16px 34px;

    background:
        rgba(15, 15, 15, 0.45);

    border:
        1px solid rgba(212, 175, 55, 0.85);

    border-radius: 4px;

    color: var(--gold);

    box-shadow:
        inset 0 0 20px rgba(212, 175, 55, 0.04),
        0 0 20px rgba(212, 175, 55, 0.10);

    letter-spacing: 2px;
}

.adventure-button:hover {
    background:
        rgba(212, 175, 55, 0.12);

    color: #ffffff;

    box-shadow:
        0 0 30px rgba(212, 175, 55, 0.25);
}


/* =========================================================
   ADVENTURES SUNLIGHT
   ========================================================= */

.adventures-hero .sunlight {
    position: absolute;

    top: -180px;
    right: -180px;

    width: 650px;
    height: 650px;

    background:
        radial-gradient(
            circle,
            rgba(255, 245, 190, 0.85) 0%,
            rgba(255, 210, 90, 0.30) 12%,
            rgba(212, 175, 55, 0.16) 28%,
            transparent 62%
        );

    filter: blur(8px);

    opacity: 0.9;

    z-index: 3;

    pointer-events: none;
}

.adventures-hero .sunlight::before {
    content: "";

    position: absolute;

    top: 140px;
    right: 110px;

    width: 500px;
    height: 2px;

    background:
        linear-gradient(
            to left,
            rgba(255, 245, 190, 0.9),
            transparent
        );

    transform: rotate(-28deg);

    transform-origin: right center;

    box-shadow:
        0 0 12px rgba(255, 215, 100, 0.7);
}

.adventures-hero .sunlight::after {
    content: "";

    position: absolute;

    top: 220px;
    right: 60px;

    width: 580px;
    height: 2px;

    background:
        linear-gradient(
            to left,
            rgba(255, 225, 130, 0.7),
            transparent
        );

    transform: rotate(-42deg);

    transform-origin: right center;

    box-shadow:
        0 0 12px rgba(255, 215, 100, 0.5);
}





/* =========================================================
   ADVENTURES MAP SPARKLES
   ========================================================= */

.sparkle {
    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 8px #ffffff,
        0 0 18px var(--gold),
        0 0 30px rgba(212, 175, 55, 0.8);

    z-index: 3;

    opacity: 0;

    animation: sparkle 4s infinite ease-in-out;
}


.sparkle-1 {
    top: 24%;
    left: 48%;
    animation-delay: 0s;
}

.sparkle-2 {
    top: 30%;
    left: 53%;
    animation-delay: 0.8s;
}

.sparkle-3 {
    top: 42%;
    left: 46%;
    animation-delay: 1.6s;
}

.sparkle-4 {
    top: 55%;
    left: 58%;
    animation-delay: 2.4s;
}

.sparkle-5 {
    top: 38%;
    left: 65%;
    animation-delay: 1.2s;
}

.sparkle-6 {
    top: 62%;
    left: 34%;
    animation-delay: 3s;
}

.sparkle-7 {
    top: 27%;
    left: 76%;
    animation-delay: 2s;
}

.sparkle-8 {
    top: 48%;
    left: 84%;
    animation-delay: 3.5s;
}


@keyframes sparkle {

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

    25% {
        opacity: 1;
        transform: scale(1.4);
    }

    50% {
        opacity: 0.35;
        transform: scale(0.8);
    }

    75% {
        opacity: 1;
        transform: scale(1.2);
    }
}


/* =========================================================
   ADVENTURES HERO CONTENT
   ========================================================= */

.adventures-hero .hero-content {
    position: relative;

    z-index: 5;

    max-width: 1150px;

    padding: 50px 30px;

    text-align: center;
}


/* TOP EYEBROW */

.adventure-eyebrow {
    margin-bottom: 22px;

    color: var(--gold);

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 5px;

    text-transform: uppercase;

    text-shadow:
        0 0 15px rgba(212, 175, 55, 0.35);
}


/* MAIN TITLE */

.adventures-hero h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(55px, 8vw, 110px);

    line-height: 0.88;

    letter-spacing: 3px;

    text-transform: uppercase;

    text-shadow:
        0 8px 30px rgba(0, 0, 0, 0.8),
        0 0 35px rgba(212, 175, 55, 0.15);
}


/* AROUND THE WORLD */

.adventures-hero h1 span {
    display: block;

    margin-top: 18px;

    color: var(--gold);

    font-size: clamp(28px, 4vw, 55px);

    letter-spacing: 8px;
}


/* GOLD DIVIDER */

.adventure-divider {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    max-width: 480px;

    margin: 32px auto;
}

.divider-line {
    width: 180px;

    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            var(--gold),
            transparent
        );

    box-shadow:
        0 0 12px rgba(212, 175, 55, 0.6);
}

.compass-star {
    color: var(--gold);

    font-size: 24px;

    line-height: 1;

    text-shadow:
        0 0 15px rgba(212, 175, 55, 0.8);
}


/* HERO HEADING */

.adventures-hero h2 {
    margin: 0 0 22px;

    color: #ffffff;

    font-size: clamp(24px, 3vw, 38px);

    font-weight: normal;
}


/* HERO DESCRIPTION */

.adventures-hero .tagline {
    max-width: 780px;

    margin: 0 auto;

    color: #e0e0e0;

    font-size: 18px;

    line-height: 1.7;
}


/* EXPLORE BUTTON */

.adventure-explore-button {
    display: inline-flex;

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

    gap: 20px;

    margin-top: 35px;

    padding: 18px 34px;

    color: var(--gold);

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 3px;

    text-decoration: none;

    border: 1px solid var(--gold);

    border-radius: 6px;

    background:
        linear-gradient(
            135deg,
            rgba(212, 175, 55, 0.08),
            rgba(0, 0, 0, 0.25)
        );

    box-shadow:
        0 0 18px rgba(212, 175, 55, 0.18),
        inset 0 0 15px rgba(212, 175, 55, 0.05);

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}

.adventure-explore-button:hover {
    transform: translateY(-4px);

    background:
        rgba(212, 175, 55, 0.12);

    box-shadow:
        0 0 30px rgba(212, 175, 55, 0.45),
        inset 0 0 20px rgba(212, 175, 55, 0.12);
}

.adventure-explore-button span {
    font-size: 22px;

    line-height: 0;

    transition:
        transform 0.3s ease;
}

.adventure-explore-button:hover span {
    transform: translateX(6px);
}


/* =========================================================
   ADVENTURES HERO CONTENT
   ========================================================= */

/* EYEBROW */

.adventure-eyebrow {
    margin-bottom: 22px;

    color: var(--gold);

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 5px;

    text-transform: uppercase;

    text-shadow:
        0 0 12px rgba(212, 175, 55, 0.45);
}


/* MAIN TITLE */

.adventures-hero h1 {
    color: #ffffff;

    font-size: clamp(52px, 8vw, 105px);

    line-height: 0.9;

    letter-spacing: 4px;

    text-transform: uppercase;
}

.adventures-hero h1 span {
    display: block;

    margin-top: 16px;

    color: var(--gold);

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

    letter-spacing: 10px;

    text-shadow:
        0 0 18px rgba(212, 175, 55, 0.35);
}


/* GOLD COMPASS DIVIDER */

.adventure-divider {
    display: flex;

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

    gap: 18px;

    margin: 32px auto;

    width: 100%;
}

.divider-line {
    width: min(180px, 22vw);

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );

    box-shadow:
        0 0 12px rgba(212, 175, 55, 0.45);
}

.compass-star {
    color: var(--gold);

    font-size: 26px;

    line-height: 1;

    text-shadow:
        0 0 15px rgba(212, 175, 55, 0.8);

    animation: compassTwinkle 2.5s infinite ease-in-out;
}

@keyframes compassTwinkle {

    0%,
    100% {
        transform: scale(0.85) rotate(0deg);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.2) rotate(45deg);
        opacity: 1;
    }
}


/* HERO SUBHEADING */

.adventures-hero h2 {
    margin: 0 0 20px;

    color: #ffffff;

    font-size: clamp(24px, 3.5vw, 42px);

    font-weight: normal;

    text-shadow:
        0 4px 20px rgba(0, 0, 0, 0.8);
}


/* HERO DESCRIPTION */

.adventures-hero .tagline {
    max-width: 780px;

    margin: 0 auto;

    color: #e0e0e0;

    font-size: 18px;

    line-height: 1.7;
}


/* EXPLORE BUTTON */

.adventure-explore-button {
    display: inline-flex;

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

    gap: 20px;

    margin-top: 35px;

    padding: 18px 34px;

    color: var(--gold);

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 3px;

    text-decoration: none;

    border: 1px solid var(--gold);

    border-radius: 6px;

    background:
        linear-gradient(
            135deg,
            rgba(212, 175, 55, 0.08),
            rgba(0, 0, 0, 0.25)
        );

    box-shadow:
        0 0 18px rgba(212, 175, 55, 0.18),
        inset 0 0 15px rgba(212, 175, 55, 0.05);

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}

.adventure-explore-button:hover {
    transform: translateY(-4px);

    background:
        rgba(212, 175, 55, 0.12);

    box-shadow:
        0 0 30px rgba(212, 175, 55, 0.45),
        inset 0 0 20px rgba(212, 175, 55, 0.12);
}

.adventure-explore-button span {
    font-size: 22px;

    line-height: 0;

    transition: transform 0.3s ease;
}

.adventure-explore-button:hover span {
    transform: translateX(6px);
}




/* =========================================================
   CINEMATIC HOME HERO
   ========================================================= */

.home-hero {
    position: relative;

    min-height: calc(100vh - 90px);

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

    background-image:
        url("../images/retired-to-ride-bike.jpg");

    background-size: cover;
    background-position: center;

    background-attachment: fixed;

    overflow: hidden;
}


/* Dark cinematic overlay */

.home-hero .hero-overlay {
    position: absolute;

    inset: 0;

background:
    linear-gradient(
        180deg,
        rgba(20, 20, 20, 0.25) 0%,
        rgba(35, 35, 35, 0.40) 45%,
        rgba(8, 8, 8, 0.82) 100%
    ),
    linear-gradient(
        115deg,
        rgba(255, 255, 255, 0.06) 0%,
        transparent 28%,
        rgba(255, 255, 255, 0.03) 52%,
        transparent 75%
    );

    z-index: 1;
}


/* Gold atmosphere */

.home-hero::before {
    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    top: -350px;
    right: -200px;

background:
    radial-gradient(
        ellipse,
        rgba(255, 230, 150, 0.12) 0%,
        rgba(212, 175, 55, 0.16) 28%,
        rgba(120, 120, 120, 0.08) 52%,
        transparent 72%
    );

    filter: blur(30px);

    z-index: 2;

    pointer-events: none;
}


/* Red atmosphere */

.home-hero::after {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    bottom: -300px;
    left: -200px;

background:
    radial-gradient(
        ellipse,
        rgba(140, 70, 55, 0.14) 0%,
        rgba(90, 90, 90, 0.10) 35%,
        rgba(255, 255, 255, 0.04) 55%,
        transparent 75%
    );

    filter: blur(40px);

    z-index: 2;

    pointer-events: none;
}



/* =========================================================
   HOME HERO CONTENT
   ========================================================= */

.home-hero .hero-content {
    position: relative;
    z-index: 5;

    max-width: 1150px;

    padding: 50px 30px;

    text-align: center;
}

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

    color: var(--gold);

    font-size: 14px;

    font-weight: bold;

    letter-spacing: 5px;

    text-transform: uppercase;
}

.home-hero h1 {
    color: #ffffff;

    font-size: clamp(45px, 7vw, 90px);

    line-height: 0.95;

    letter-spacing: 3px;

    text-transform: uppercase;
}

.home-hero h1 span {
    display: block;

    margin-top: 12px;

    color: var(--gold);
}

.home-hero h2 {
    margin-top: 35px;

    color: #ffffff;

    font-size: clamp(25px, 4vw, 42px);

    font-weight: normal;
}

.home-hero .tagline {
    max-width: 800px;

    margin: 25px auto;

    color: #eeeeee;

    font-size: 20px;

    line-height: 1.7;
}


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

.buttons {
    margin-top: 30px;
}

.btn {
    position: relative;

    display: inline-block;

    margin: 10px;

    padding: 15px 38px;

    border-radius: 60px;

    font-weight: bold;

    letter-spacing: 0.5px;

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        opacity 0.35s ease;
}

.btn:hover {
    transform: translateY(-5px);

    opacity: 0.95;

    box-shadow:
        0 0 20px rgba(212, 175, 55, 0.25),
        0 15px 35px rgba(0, 0, 0, 0.5);
}

.btn.red {
    background: var(--red);

    color: #ffffff;

    box-shadow:
        0 8px 25px rgba(198, 40, 40, 0.25);
}

.btn.white {
    background: #ffffff;

    color: #111111;
}


/* =========================================================
   BUTTON SHINE
   ========================================================= */

.home-hero .btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.35),
            transparent
        );

    transform: skewX(-20deg);

    transition: left 0.7s ease;
}

.home-hero .btn:hover::before {
    left: 140%;
}


/* =========================================================
   SCROLL INDICATOR
   ========================================================= */

.scroll-indicator {
    margin-top: 60px;

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

    font-size: 11px;

    letter-spacing: 4px;
}

.scroll-line {
    width: 1px;

    height: 60px;

    margin: 15px auto 0;

    background:
        linear-gradient(
            to bottom,
            var(--gold),
            transparent
        );
}


/* =========================================================
   SECTION EYEBROWS
   ========================================================= */

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

    color: var(--gold);

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 4px;

    text-transform: uppercase;
}


/* =========================================================
   GENERAL CONTENT SECTIONS
   ========================================================= */

.intro {
    max-width: 1000px;

    margin: 80px auto;

    padding: 70px 30px;

    text-align: center;
}

.intro h2 {
    margin-bottom: 30px;

    color: var(--gold);

    font-size: 36px;
}

.intro p {
    font-size: 18px;

    line-height: 1.8;
}


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

.home-intro {
    position: relative;

    max-width: 1000px;

    margin: 55px auto;

    padding: 55px 40px;

    text-align: center;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(255, 255, 255, 0.07) 0%,
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(212, 175, 55, 0.08) 0%,
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #3b3b3b 0%,
            #292929 45%,
            #1f1f1f 100%
        );

    border: 1px solid rgba(212, 175, 55, 0.25);
    border-top: 4px solid rgba(212, 175, 55, 0.8);

    border-radius: 28px;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.25);
}

.home-intro::before {
    content: "";


    position: absolute;

    top: 0;
    left: 50%;

    width: 180px;
    height: 2px;

    transform: translateX(-50%);

    background: var(--gold);

    box-shadow:
        0 0 20px rgba(212, 175, 55, 0.6);
}

.home-intro h2 {
    margin-bottom: 35px;

    color: #ffffff;

    font-size: clamp(35px, 5vw, 58px);
}

.home-intro p {
    max-width: 800px;

    margin: 20px auto;

    color: #cccccc;

    font-size: 18px;

    line-height: 1.8;
}


/* =========================================================
   STORY LINE
   ========================================================= */

.story-line {
    display: flex;

    justify-content: center;

    gap: 35px;

    flex-wrap: wrap;

    margin-top: 50px;
}

.story-line span {
    color: var(--gold);

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;
}

.story-line span::before {
    content: "✦";

    margin-right: 10px;

    color: var(--red);
}


/* =========================================================
   ROAD DIVIDER
   ========================================================= */

.road-divider {
    margin: 50px 0;

    color: var(--gold);

    font-size: 28px;

    text-align: center;
}


/* =========================================================
   INTERACTIVE SECTION
   ========================================================= */

.interactive-section {
padding: 55px 30px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255, 255, 255, 0.025),
            transparent
        );
}

.section-heading {
    max-width: 800px;

margin: 0 auto 35px;

    text-align: center;
}

.section-heading h2 {
    margin: 10px 0 20px;

    color: #ffffff;

    font-size: clamp(35px, 5vw, 58px);
}

.section-heading p {
    color: #aaaaaa;

    font-size: 18px;

    line-height: 1.7;
}


/* =========================================================
   EXPERIENCE CARDS
   ========================================================= */

.experience-grid {
    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

    gap: 30px;
}

.experience-card {
    position: relative;

    display: block;

    min-height: 430px;

    overflow: hidden;

    border-radius: 25px;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(255, 255, 255, 0.10) 0%,
            transparent 25%
        ),
        radial-gradient(
            circle at 85% 85%,
            rgba(212, 175, 55, 0.10) 0%,
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #3d3d3d 0%,
            #242424 35%,
            #151515 70%,
            #303030 100%
        );

    border: 1px solid rgba(212, 175, 55, 0.30);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -2px 0 rgba(0, 0, 0, 0.45),
        0 20px 50px rgba(0, 0, 0, 0.55);

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease,
        border-color 0.45s ease;
}

.experience-card:hover {
    transform: translateY(-14px);

    border-color:
        rgba(212, 175, 55, 0.65);

    box-shadow:
        0 0 35px rgba(212, 175, 55, 0.2),
        0 30px 70px rgba(0, 0, 0, 0.75);
}

.experience-image {
    position: absolute;

    inset: 0;
}

.experience-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

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

.experience-card:hover .experience-image img {
    transform: scale(1.08);

    filter:
        brightness(0.65)
        contrast(1.08)
        saturate(0.9);
}

.experience-card::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(10, 10, 10, 0.98) 0%,
            rgba(25, 25, 25, 0.92) 28%,
            rgba(45, 45, 45, 0.45) 52%,
            transparent 75%
        ),
        linear-gradient(
            115deg,
            transparent 20%,
            rgba(255, 255, 255, 0.06) 48%,
            transparent 75%
        );
}

.experience-content {
    position: absolute;

    z-index: 2;

    right: 0;
    bottom: 0;
    left: 0;

    padding: 35px;
}

.experience-content span {
    color: var(--gold);

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 3px;
}

.experience-content h3 {
    margin: 12px 0;

    color: #ffffff;

    font-size: 32px;
}

.experience-content p {
    color: #cccccc;

    line-height: 1.6;
}

.experience-content strong {
    display: inline-block;

    margin-top: 15px;

    color: var(--gold);

    font-size: 12px;

    letter-spacing: 2px;
}


/* =========================================================
   AWARDS FEATURE
   ========================================================= */

.home-awards {
    position: relative;

    min-height: 600px;

    margin: 100px 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-radius: 40px;

    text-align: center;

    background:
        radial-gradient(
            circle at 18% 15%,
            rgba(255, 255, 255, 0.10) 0%,
            transparent 28%
        ),
        radial-gradient(
            circle at 82% 80%,
            rgba(212, 175, 55, 0.12) 0%,
            transparent 38%
        ),
        linear-gradient(
            115deg,
            #151515 0%,
            #383838 22%,
            #202020 42%,
            #454545 60%,
            #1b1b1b 78%,
            #0d0d0d 100%
        );

    border: 1px solid rgba(212, 175, 55, 0.45);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -2px 0 rgba(0, 0, 0, 0.50),
        0 0 45px rgba(212, 175, 55, 0.12),
        0 30px 70px rgba(0, 0, 0, 0.6);
}

.award-content {
    position: relative;
    z-index: 2;

    max-width: 850px;

    padding: 60px 40px;
}

.award-content h2 {
    margin: 20px 0 30px;

    color: #ffffff;

    font-size: clamp(48px, 6vw, 76px);

    line-height: 1.05;
}

.award-content > p {
    max-width: 750px;

    margin: 0 auto;

    color: #dddddd;

    font-size: clamp(19px, 2vw, 24px);

    line-height: 1.7;
}

.award-buttons {
    margin-top: 40px;
}

/* =========================================================
   MUSIC
   ========================================================= */

.home-music {
    padding: 110px 30px;
}

.music-feature-grid {
    max-width: 1100px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

    gap: 30px;
}

.music-feature-card {
    position: relative;

    min-height: 230px;

    padding: 40px 30px;

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            #333333,
            #151515
        );

    border:
        1px solid rgba(212, 175, 55, 0.18);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.5);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.music-feature-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 0 30px rgba(212, 175, 55, 0.22),
        0 25px 55px rgba(0, 0, 0, 0.7);
}

.music-feature-card h3 {
    color: var(--gold);

    font-size: 25px;
}

.music-feature-card p {
    color: #bbbbbb;

    line-height: 1.6;
}

.music-feature-card a {
    position: absolute;

    bottom: 30px;

    color: #ffffff;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 2px;
}

.music-feature-card a:hover {
    color: var(--gold);
}


/* =========================================================
   MUSIC PAGE
   ========================================================= */

.music-grid {
    max-width: 1200px;

    margin: 40px auto;

    padding: 0 20px;

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

    gap: 35px;
}

.music-card {
    position: relative;

    min-height: 260px;

    padding: 35px 25px;

    overflow: hidden;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #3a3a3a,
            #181818
        );

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

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.45);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.music-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: var(--gold);
}

.music-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 0 30px rgba(212, 175, 55, 0.25),
        0 25px 55px rgba(0, 0, 0, 0.65);
}

.music-card h3 {
    color: #ffffff;

    font-size: 26px;
}

.music-card p {
    color: #cccccc;

    line-height: 1.7;
}

.music-card .btn {
    margin-top: 25px;
}


/* =========================================================
   MUSIC ARTWORK
   ========================================================= */

.music-artwork {
    width: 280px;
    height: 280px;

    margin: 0 auto 25px;

    object-fit: cover;

    border-radius: 25px;

    border:
        3px solid rgba(212, 175, 55, 0.6);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.6);
}


/* =========================================================
   FEATURED MUSIC
   ========================================================= */

.featured-track {
    position: relative;

    max-width: 1050px;

    margin: 70px auto;

    padding: 60px 40px;

    overflow: hidden;

    text-align: center;

    border-radius: 35px;

    background:
        linear-gradient(
            145deg,
            rgba(70, 70, 70, 0.95),
            rgba(20, 20, 20, 0.95)
        );

    border:
        1px solid rgba(212, 175, 55, 0.5);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.55);
}

.featured-track::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: var(--gold);
}

.featured-content {
    position: relative;

    z-index: 2;
}

.featured-content h2 {
    color: var(--gold);

    font-size: 22px;

    letter-spacing: 3px;

    text-transform: uppercase;
}

.featured-content h1 {
    margin: 25px 0;

    font-size: 48px;
}

.featured-content p {
    max-width: 750px;

    margin: 20px auto;

    color: #dddddd;

    font-size: 19px;

    line-height: 1.8;
}


/* =========================================================
   STORY SECTION
   ========================================================= */

.story-section {
    max-width: 900px;

    margin: 80px auto;

    padding: 60px 40px;

    border-radius: 35px;

    background:
        linear-gradient(
            145deg,
            #303030,
            #181818
        );

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.45);
}


/* =========================================================
   JOURNEY BOX
   ========================================================= */

.journey-box {
    position: relative;

    max-width: 1000px;

    margin: 80px auto;

    padding: 60px 40px;

    text-align: center;

    border-radius: 35px;

    background:
        linear-gradient(
            145deg,
            #444444,
            #222222
        );

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.5);
}

.journey-box:hover {
    transform: translateY(-8px);

    box-shadow:
        0 0 30px rgba(212, 175, 55, 0.25),
        0 25px 60px rgba(0, 0, 0, 0.7);
}

.journey-box h2 {
    color: var(--gold);

    font-size: 40px;
}

.journey-box p {
    font-size: 20px;

    margin-bottom: 35px;
}


/* =========================================================
   SPONSORS
   ========================================================= */

.sponsors-section {
    padding: 120px 30px;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            #101010,
            #1c1c1c,
            #101010
        );
}

.current-sponsor {
    max-width: 850px;

    margin: 70px auto;

    padding: 60px 40px;

    border-radius: 35px;

    background:
        linear-gradient(
            145deg,
            #303030,
            #151515
        );

    border:
        1px solid rgba(212, 175, 55, 0.45);

    box-shadow:
        0 0 40px rgba(212, 175, 55, 0.13),
        0 25px 60px rgba(0, 0, 0, 0.65);
}

.current-sponsor > p:first-child {
    color: var(--gold);

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 4px;
}

.sponsor-logo {
    margin: 30px 0;
}

.sponsor-logo a {
    color: #ffffff;

    font-size: clamp(45px, 8vw, 90px);

    font-weight: 900;

    letter-spacing: 4px;

    text-shadow:
        0 0 20px rgba(255, 255, 255, 0.18);
}

.sponsor-logo a:hover {
    color: var(--gold);
}

.current-sponsor h3 {
    color: #ffffff;

    font-size: 25px;
}

.current-sponsor > p {
    color: #aaaaaa;

    line-height: 1.7;
}


/* =========================================================
   FUTURE SPONSORS
   ========================================================= */

.future-sponsors {
    max-width: 1100px;

    margin: 100px auto 0;
}

.future-sponsors h3 {
    color: #ffffff;

    font-size: 38px;
}

.future-sponsors > p {
    max-width: 750px;

    margin: 20px auto 50px;

    color: #aaaaaa;

    font-size: 18px;

    line-height: 1.7;
}

.sponsor-opportunities {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 20px;

    margin-bottom: 45px;
}

.sponsor-card {
    padding: 30px 20px;

    border-radius: 20px;

    background: #181818;

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

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.sponsor-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(212, 175, 55, 0.5);

    box-shadow:
        0 0 25px rgba(212, 175, 55, 0.14);
}

.sponsor-card span {
    display: block;

    margin-bottom: 15px;

    font-size: 35px;
}

.sponsor-card h4 {
    margin: 10px 0;

    color: var(--gold);

    font-size: 20px;
}

.sponsor-card p {
    color: #999999;

    font-size: 14px;

    line-height: 1.6;
}


/* =========================================================
   FINAL JOURNEY
   ========================================================= */

.final-journey {
    position: relative;

    max-width: 1000px;

    margin: 100px auto;

    padding: 100px 40px;

    text-align: center;

    border-radius: 35px;

    background:
        linear-gradient(
            145deg,
            #292929,
            #111111
        );

    border:
        1px solid rgba(212, 175, 55, 0.25);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.6);
}

.final-journey h2 {
    margin: 20px 0;

    color: #ffffff;

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

.final-journey > p:not(.section-eyebrow) {
    max-width: 700px;

    margin: auto;

    color: #bbbbbb;

    font-size: 19px;

    line-height: 1.7;
}


/* =========================================================
   HALL OF FAME
   ========================================================= */

.hall-grid {
    max-width: 1200px;

    margin: auto;

    padding: 30px;

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(300px, 1fr));

    gap: 40px;
}

.hall-card {
    position: relative;

    padding: 30px;

    overflow: hidden;

    text-align: center;

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            #333333,
            #1b1b1b
        );

    border-top: 5px solid var(--gold);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.5);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.hall-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 0 35px rgba(212, 175, 55, 0.25),
        0 25px 60px rgba(0, 0, 0, 0.7);
}

.hall-card img {
    width: 100%;

    max-width: 350px;

    margin: auto;

    border-radius: 15px;
}

.hall-card h3 {
    color: var(--gold);

    font-size: 30px;
}


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

.award-details {
    position: relative;

    max-width: 700px;

    margin: 40px auto;

    padding: 35px;

    border-radius: 20px;

    background: #202020;

    border:
        2px solid var(--gold);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.5);
}

.award-details h2 {
    color: var(--gold);
}

.award-details p {
    line-height: 1.7;
}


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

.photo-placeholder {
    height: 280px;

    max-width: 700px;

    margin: 30px auto;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 20px;

    background: #222222;

    border:
        2px dashed #555555;

    color: #999999;
}


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

.reveal {
    opacity: 1;
    transform: none;
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

/* =========================================================
   PREMIUM GLOW
   ========================================================= */

h1,
h2 {
    text-shadow:
        0 0 15px rgba(212, 175, 55, 0.18);
}

a:hover {
    text-shadow:
        0 0 10px rgba(212, 175, 55, 0.4);
}


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

   footer {
    margin-top: 80px;

    padding: 50px 20px;

    text-align: center;

    color: #b5b5b5;

    background:
        radial-gradient(
            ellipse at 15% 0%,
            rgba(255, 255, 255, 0.06) 0%,
            transparent 30%
        ),
        radial-gradient(
            ellipse at 85% 100%,
            rgba(212, 175, 55, 0.08) 0%,
            transparent 35%
        ),
        linear-gradient(
            115deg,
            #111111 0%,
            #292929 22%,
            #1b1b1b 45%,
            #303030 65%,
            #101010 100%
        );

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

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.04),
        0 -1px 0 rgba(212, 175, 55, 0.45);
}



/* =========================================================
   ABOUT PAGE STORY CARDS
   ========================================================= */

body.about-page .intro {
    max-width: 1000px;
    margin: 50px auto;

    padding: 50px 55px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(255, 255, 255, 0.07) 0%,
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(212, 175, 55, 0.08) 0%,
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #3b3b3b 0%,
            #292929 45%,
            #1f1f1f 100%
        );

    border: 1px solid rgba(212, 175, 55, 0.25);
    border-top: 4px solid rgba(212, 175, 55, 0.8);

    border-radius: 28px;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.25);
}

body.about-page .intro h2 {
    margin-top: 0;
    text-align: center;
}

body.about-page .intro p {
    max-width: 850px;
    margin: 22px auto;

    text-align: center;
    font-size: 17px;
}


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

@media (max-width: 768px) {

    header {
        flex-direction: column;
        align-items: center;

        padding: 20px;
        gap: 15px;
    }

    header img {
        width: 130px;

        margin-bottom: 0;
    }

nav {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 14px;
}

    nav a {
        display: inline-block;

        margin: 0px;

        font-size: 13px;
    }

    .home-hero {
        min-height: 90vh;

        background-attachment: scroll;
    }

    .home-hero .hero-content {
        padding: 40px 20px;
    }

    .home-hero h1 {
        letter-spacing: 1px;
    }

    .home-hero .tagline {
        font-size: 17px;
    }

    .scroll-indicator {
        margin-top: 45px;
    }

    .home-intro {
        margin: 50px auto;

        padding: 70px 25px;
    }

    .interactive-section,
    .home-music,
    .sponsors-section {
        padding: 80px 20px;
    }

    .home-awards {
        margin: 60px 15px;

        min-height: 500px;
    }

    .award-content {
        padding: 35px 25px;
    }

    .current-sponsor {
        padding: 45px 25px;
    }

    .final-journey {
        margin: 60px 15px;

        padding: 70px 25px;
    }

    .featured-track {
        margin: 50px 20px;

        padding: 45px 20px;
    }

    .featured-content h1 {
        font-size: 34px;
    }

    .music-section h2 {
        font-size: 30px;
    }

    .story-section,
    .journey-box {
        margin: 50px 20px;

        padding: 45px 25px;
    }

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

        padding: 20px;
    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    nav a {
        margin: 6px;

        font-size: 12px;
    }

    .home-hero h1 {
        font-size: 42px;
    }

    .home-hero h2 {
        font-size: 25px;
    }

    .btn {
        display: block;

        width: fit-content;

        margin: 12px auto;
    }

    .story-line {
        gap: 15px;
    }

}

.home-hero h1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.home-hero h1 span {
    display: block;
    font: inherit;
    font-size: 1em;
    font-weight: inherit;
    line-height: 0.9;
}

/* =========================================
   ABOUT PAGE IMAGE PAIRS
========================================= */

.story-bikes,
.story-journey {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin: 35px 0;
}

.story-bikes img,
.story-journey img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

/* Stack images neatly on smaller screens */
@media (max-width: 700px) {

    .story-bikes,
    .story-journey {
        grid-template-columns: 1fr;
    }

    .story-bikes img,
    .story-journey img {
        height: 280px;
    }

}


/* =========================================================
   A LIFETIME WITHOUT BORDERS MAP
   ========================================================= */

.lifetime-map-section {
    position: relative;

    padding: 110px 30px 100px;

    overflow: hidden;

    text-align: center;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(212, 175, 55, 0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(150, 40, 30, 0.10),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #111111,
            #191919,
            #101010
        );
}


/* MAP INTRO */

.lifetime-map-intro {
    position: relative;

    z-index: 2;

    max-width: 850px;

    margin: 0 auto 55px;
}

.map-eyebrow {
    margin-bottom: 22px;

    color: var(--gold);

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 5px;

    text-transform: uppercase;
}

.lifetime-map-intro h2 {
    margin: 0 0 25px;

    color: #ffffff;

    font-size: clamp(42px, 6vw, 68px);

    line-height: 1;
}

.lifetime-map-intro p:last-child {
    max-width: 700px;

    margin: 25px auto 0;

    color: #cfcfcf;

    font-size: 18px;

    line-height: 1.8;
}


/* MAP FRAME */

.lifetime-map-frame {
    position: relative;

    z-index: 2;

    max-width: 1250px;

    margin: 0 auto;

    padding: 12px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(212, 175, 55, 0.85),
            rgba(120, 30, 25, 0.85),
            rgba(212, 175, 55, 0.35)
        );

    box-shadow:
        0 0 25px rgba(212, 175, 55, 0.15),
        0 0 55px rgba(130, 25, 20, 0.18),
        0 30px 80px rgba(0, 0, 0, 0.75);
}

.lifetime-map-frame::before {
    content: "";

    position: absolute;

    inset: 3px;

    border-radius: 15px;

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

    pointer-events: none;

    z-index: 2;
}

.lifetime-map-frame img {
    display: block;

    width: 100%;

    height: auto;

    border-radius: 10px;

    filter:
        contrast(1.05)
        saturate(1.08);

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

.lifetime-map-frame:hover img {
    transform: scale(1.015);

    filter:
        contrast(1.1)
        saturate(1.15)
        brightness(1.04);
}


/* MAP CAPTION */

.lifetime-map-caption {
    position: relative;

    z-index: 2;

    margin: 32px auto 0;

    color: #d8d8d8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;

    line-height: 2;

    text-transform: uppercase;
}

.lifetime-map-caption span {
    margin: 0 12px;

    color: var(--gold);

    font-size: 16px;

    text-shadow:
        0 0 12px rgba(212, 175, 55, 0.7);
}


/* =========================================================
   EXPLORE ADVENTURES SECTION
   ========================================================= */

.adventure-explore-section {
    padding: 100px 30px 90px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #2b2b2b 0%,
            #242424 50%,
            #1b1b1b 100%
        );

    border-top: 1px solid rgba(212, 175, 55, 0.15);
}


/* SECTION HEADING */

.adventure-section-heading {
    width: 100%;
    max-width: 950px;

    margin: 0 auto;

    text-align: center;
}


.adventure-section-heading .section-eyebrow {
    margin: 0 0 25px;

    color: var(--gold);

    font-size: 14px;

    font-weight: bold;

    letter-spacing: 6px;

    text-transform: uppercase;
}


.adventure-section-heading h2 {
    margin: 0;

    color: #ffffff;

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

    line-height: 1.05;

    text-align: center;
}


.adventure-section-heading h2 span {
    display: block;

    margin-top: 8px;

    color: var(--gold);
}


/* DIVIDER */

.adventure-section-heading .adventure-divider {
    display: flex;

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

    gap: 22px;

    width: 100%;

    margin: 35px auto;
}


.adventure-section-heading .divider-line {
    display: block;

    width: 180px;
    max-width: 25vw;

    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            var(--gold)
        );
}


.adventure-section-heading .divider-line:last-child {
    background:
        linear-gradient(
            to left,
            transparent,
            var(--gold)
        );
}


.adventure-section-heading .compass-star {
    color: var(--gold);

    font-size: 28px;

    text-shadow:
        0 0 10px rgba(212, 175, 55, 0.7),
        0 0 25px rgba(212, 175, 55, 0.35);
}


/* DESCRIPTION */

.adventure-section-heading > p:last-child {
    max-width: 850px;

    margin: 0 auto;

    color: #d8d8d8;

    font-size: 19px;

    line-height: 1.8;

    text-align: center;
}


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

.journey-stats {
    display: flex;

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

    flex-wrap: wrap;

    gap: 25px;

    width: 100%;
    max-width: 1100px;

    margin: 70px auto 0;
}


.journey-stat {
    display: flex;

    flex-direction: column;

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

    width: 280px;
    min-height: 140px;

    padding: 25px 20px;

    text-align: center;

    border: 1px solid rgba(212, 175, 55, 0.28);

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            rgba(212, 175, 55, 0.08),
            rgba(0, 0, 0, 0.18)
        );

    box-shadow:
        0 0 20px rgba(0, 0, 0, 0.2),
        inset 0 0 20px rgba(212, 175, 55, 0.03);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.journey-stat:hover {
    transform: translateY(-6px);

    border-color: var(--gold);

    box-shadow:
        0 0 25px rgba(212, 175, 55, 0.18),
        inset 0 0 20px rgba(212, 175, 55, 0.06);
}


.journey-stat strong {
    display: block;

    margin-bottom: 15px;

    font-size: 30px;
}


.journey-stat span {
    color: #ffffff;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 2px;

    text-align: center;
}


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

@media (max-width: 700px) {

    .adventure-explore-section {
        padding: 75px 20px;
    }

    .adventure-section-heading .section-eyebrow {
        font-size: 11px;

        letter-spacing: 4px;
    }

    .adventure-section-heading > p:last-child {
        font-size: 17px;
    }

    .journey-stats {
        margin-top: 50px;
    }

    .journey-stat {
        width: 100%;
        max-width: 340px;
    }

}

/* =========================================================
   A LIFETIME WITHOUT BORDERS MAP
   ========================================================= */

.lifetime-map-section {
    position: relative;

    padding: 110px 30px 100px;

    text-align: center;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at top right,
            rgba(212, 175, 55, 0.08),
            transparent 45%
        ),
        linear-gradient(
            180deg,
            #171717 0%,
            #0b0b0b 100%
        );

    border-top: 1px solid rgba(212, 175, 55, 0.12);
}


/* MAP INTRO */

.lifetime-map-intro {
    position: relative;

    z-index: 2;

    max-width: 900px;

    margin: 0 auto 65px;
}


.map-eyebrow {
    margin: 0 0 25px;

    color: var(--gold);

    font-size: 14px;

    font-weight: bold;

    letter-spacing: 6px;

    text-transform: uppercase;
}


.lifetime-map-intro h2 {
    margin: 0;

    color: #ffffff;

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

    line-height: 1.05;

    text-transform: uppercase;
}


.lifetime-map-intro h2 br {
    display: block;
}


.lifetime-map-intro > p:last-child {
    max-width: 780px;

    margin: 0 auto;

    color: #d5d5d5;

    font-size: 18px;

    line-height: 1.8;
}


/* MAP FRAME */

.lifetime-map-frame {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1450px;

    margin: 0 auto;

    padding: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(212, 175, 55, 0.18),
            rgba(255, 255, 255, 0.03),
            rgba(212, 175, 55, 0.08)
        );

    border: 1px solid rgba(212, 175, 55, 0.4);

    border-radius: 10px;

    box-shadow:
        0 0 30px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(212, 175, 55, 0.08);
}


.lifetime-map-frame img {
    display: block;

    width: 100%;

    height: auto;

    border-radius: 5px;

    box-shadow:
        0 0 35px rgba(0, 0, 0, 0.5);
}


/* GOLD GLOW BEHIND MAP */

.lifetime-map-frame::before {
    content: "";

    position: absolute;

    width: 70%;

    height: 70%;

    top: 15%;

    left: 15%;

    background:
        radial-gradient(
            ellipse,
            rgba(212, 175, 55, 0.12),
            transparent 70%
        );

    filter: blur(40px);

    z-index: -1;

    pointer-events: none;
}


/* MAP CAPTION */

.lifetime-map-caption {
    margin: 35px auto 0;

    color: var(--gold);

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 3px;

    line-height: 1.8;

    text-align: center;
}


.lifetime-map-caption span {
    display: inline-block;

    margin: 0 12px;

    color: #ffffff;

    font-size: 18px;

    text-shadow:
        0 0 12px rgba(212, 175, 55, 0.8);
}


/* =========================================================
   MOBILE MAP SECTION
   ========================================================= */

@media (max-width: 700px) {

    .lifetime-map-section {
        padding: 80px 20px 75px;
    }

    .map-eyebrow {
        font-size: 11px;

        letter-spacing: 4px;
    }

    .lifetime-map-intro {
        margin-bottom: 45px;
    }

    .lifetime-map-intro > p:last-child {
        font-size: 16px;
    }

    .lifetime-map-frame {
        padding: 8px;
    }

    .lifetime-map-caption {
        font-size: 10px;

        letter-spacing: 1.5px;
    }

    .lifetime-map-caption span {
        display: block;

        margin: 8px 0;
    }

}


/* =========================================================
   INTERACTIVE WORLD MAP
   ========================================================= */

.lifetime-map-frame {
    position: relative;
}

.map-hotspot {
    position: absolute;

    width: 18px;
    height: 18px;

    padding: 0;

    border: 2px solid #ffffff;
    border-radius: 50%;

    cursor: pointer;

    z-index: 5;

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

    animation: map-pulse 2.5s infinite ease-in-out;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* =========================================================
   RED = LIVED & WORKED
   ========================================================= */

.map-hotspot[data-country="New Zealand"],
.map-hotspot[data-country="Morocco"],
.map-hotspot[data-country="Spain"],
.map-hotspot[data-country="South Africa"],
.map-hotspot[data-country="Namibia"] {
    background: #e53935;

    box-shadow:
        0 0 8px #ffffff,
        0 0 18px #e53935,
        0 0 30px rgba(229, 57, 53, 0.8);
}


/* =========================================================
   BLUE = VISITED & EXPLORED
   ========================================================= */

.map-hotspot[data-country="Italy"],
.map-hotspot[data-country="Norway"],
.map-hotspot[data-country="Denmark"],
.map-hotspot[data-country="Germany"],
.map-hotspot[data-country="France"] {
    background: #2da8ff;

    box-shadow:
        0 0 8px #ffffff,
        0 0 18px #2da8ff,
        0 0 30px rgba(45, 168, 255, 0.8);
}


/* HOVER EFFECT */

.map-hotspot:hover {
    transform: translate(-50%, -50%) scale(1.5);
}


/* PULSING ANIMATION */

@keyframes map-pulse {

    0%,
    100% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.25);
    }
}

/* =========================================================
   HOTSPOT POSITIONS
   ========================================================= */

/* 🔴 NEW ZEALAND */

.hotspot-new-zealand {

    top: 88%;

    left: 89.8%;

}


/* 🔴 MOROCCO */

.hotspot-morocco {

    top: 47.5%;

    left: 43%;

}


/* 🔴 SPAIN */

.hotspot-spain {

    top: 39.5%;

    left: 45.5%;

}


/* 🔵 ITALY */

.hotspot-italy {

    top: 39%;

    left: 51%;

}


/* 🔵 NORWAY */

.hotspot-norway {

    top: 21%;

    left: 50%;

}


/* 🔵 DENMARK */

.hotspot-denmark {

    top: 27.5%;

    left: 49.5%;

}


/* 🔵 GERMANY */

.hotspot-germany {

    top: 31%;

    left: 49%;

}


/* 🔵 FRANCE */

.hotspot-france {

    top: 33.5%;

    left: 47%;

}


/* 🔴 SOUTH AFRICA */

.hotspot-south-africa {

    top: 81%;

    left: 52%;

}


/* 🔴 NAMIBIA */

.hotspot-namibia {

    top: 75%;

    left: 48.8%;

}


/* =========================================================
   INTERACTIVE COUNTRY POPUP
   ========================================================= */

.country-modal {

    display: none;

    position: fixed;

    inset: 0;

    z-index: 9999;

    background: rgba(0, 0, 0, 0.82);

    backdrop-filter: blur(8px);

    align-items: center;

    justify-content: center;

    padding: 25px;

}


.country-modal.active {

    display: flex;

}


.country-modal-box {

    position: relative;

    width: 100%;

    max-width: 650px;

    padding: 55px 45px 45px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            rgba(35, 35, 35, 0.98),
            rgba(10, 10, 10, 0.98)
        );

    border: 1px solid rgba(201, 162, 39, 0.75);

    border-radius: 18px;

    box-shadow:
        0 0 40px rgba(201, 162, 39, 0.12),
        0 0 80px rgba(0, 0, 0, 0.8);

    animation: countryModalAppear 0.35s ease;

}


@keyframes countryModalAppear {

    from {

        opacity: 0;

        transform: translateY(25px) scale(0.97);

    }

    to {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}


.country-modal-close {

    position: absolute;

    top: 15px;

    right: 18px;

    width: 40px;

    height: 40px;

    border: none;

    background: transparent;

    color: #c9a227;

    font-size: 2rem;

    line-height: 1;

    cursor: pointer;

    transition: 0.25s ease;

}


.country-modal-close:hover {

    color: #ffffff;

    transform: rotate(90deg);

}


.country-modal-eyebrow {

    margin: 0 0 12px;

    color: #c9a227;

    font-size: 0.7rem;

    font-weight: 700;

    letter-spacing: 4px;

}


#modalCountryName {

    margin: 0;

    color: #ffffff;

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

    text-transform: uppercase;

}


.country-modal-type {

    margin: 25px 0 12px;

    color: #c9a227;

    font-size: 0.8rem;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}


.country-modal-text {

    max-width: 520px;

    margin: 0 auto 30px;

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

    font-size: 1rem;

    line-height: 1.8;

}


.country-explore-button {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 24px;

    border: 1px solid #c9a227;

    border-radius: 50px;

    background: transparent;

    color: #ffffff;

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 1.5px;

    cursor: pointer;

    transition: 0.25s ease;

}


.country-explore-button:hover {

    background: #c9a227;

    color: #111111;

    transform: translateY(-2px);

}


.country-explore-button span {

    font-size: 1.1rem;

}


@media (max-width: 600px) {

    .country-modal-box {

        padding: 50px 25px 35px;

    }


    .country-modal-eyebrow {

        letter-spacing: 2px;

    }

}


/* =========================================
   HALL OF FAME HERO
========================================= */

.hall-of-fame-hero {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    min-height: auto;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.18),
            rgba(0, 0, 0, 0.28)
        ),
        url("../images/retired-to-ride-touring-awards-map.jpg");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}


/* =========================================================
   HALL OF FAME HERO CONTENT
   ========================================================= */

.hall-of-fame-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 850px;

    padding: 70px 30px;

    text-align: center;

    /* No visible box */
    background: transparent;

    /* Very subtle darkening only behind the content */
    filter: drop-shadow(0 8px 25px rgba(0, 0, 0, 0.35));
}


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

.hall-of-fame-eyebrow {
    margin: 0 0 16px;

    color: var(--gold);

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

    letter-spacing: 5px;

    text-transform: uppercase;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.95);
}


/* =========================================================
   MAIN TITLE
   ========================================================= */

.hall-of-fame-content h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(52px, 6vw, 92px);

    line-height: 1;

    letter-spacing: 4px;

    text-transform: uppercase;

    text-shadow:
        0 4px 18px rgba(0, 0, 0, 0.95),
        0 0 35px rgba(0, 0, 0, 0.6);
}


/* =========================================================
   DIVIDER
   ========================================================= */

.adventure-divider {
    display: flex;

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

    gap: 14px;

    margin: 22px auto 20px;
}


.divider-line {
    display: block;

    width: 105px;
    height: 1px;

    background: linear-gradient(
        to right,
        transparent,
        var(--gold),
        transparent
    );

    opacity: 0.9;
}


.compass-star {
    color: var(--gold);

    font-size: 20px;

    line-height: 1;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.9);
}


/* =========================================================
   TAGLINE
   ========================================================= */

.hall-of-fame-tagline {
    max-width: 650px;

    margin: 0 auto 30px;

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

    font-size: clamp(17px, 1.5vw, 22px);

    font-weight: 500;

    line-height: 1.5;

    text-shadow:
        0 3px 12px rgba(0, 0, 0, 0.95);
}


/* =========================================================
   HALL OF FAME – MEET THE RIDERS BUTTON
   ========================================================= */

.adventure-explore-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    margin-top: 32px;
    padding: 16px 28px;

    background: #1f1f1f;

    color: var(--gold);

    border: 1px solid var(--gold);

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

    letter-spacing: 4px;

    text-transform: uppercase;
    text-decoration: none;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.5);

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.adventure-explore-button span {
    font-size: 18px;
    line-height: 1;
}


.adventure-explore-button:hover {
    background: #2d2d2d;

    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.65);
}



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

@media (max-width: 768px) {

    .hall-of-fame-hero {
        min-height: 75vh;

        background-position: center;
    }


    .hall-of-fame-content {
        max-width: 100%;

        padding: 55px 20px;
    }


    .hall-of-fame-eyebrow {
        font-size: 10px;

        letter-spacing: 3px;

        margin-bottom: 14px;
    }


    .hall-of-fame-content h1 {
        font-size: clamp(45px, 12vw, 70px);

        letter-spacing: 2px;
    }


    .divider-line {
        width: 65px;
    }


    .hall-of-fame-tagline {
        max-width: 500px;

        font-size: 17px;

        margin-bottom: 25px;
    }


    .adventure-explore-button {
        padding: 13px 18px;

        font-size: 10px;

        letter-spacing: 3px;
    }

}

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

.contact-hero {
    position: relative;

    width: 100%;
    min-height: 760px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background-image: url("../images/retired-to-ride-contact-hero.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}


/* DARKEN LEFT SIDE FOR TEXT */

.contact-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.52) 32%,
            rgba(0, 0, 0, 0.18) 58%,
            rgba(0, 0, 0, 0.03) 100%
        );

    z-index: 1;
}


/* HERO CONTENT */

.contact-hero-content {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 680px;

    margin-left: clamp(35px, 9vw, 150px);

    padding: 50px 30px;

    text-align: left;
}


/* EYEBROW */

.contact-eyebrow {
    margin: 0 0 18px;

    color: var(--gold);

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

    letter-spacing: 5px;

    text-transform: uppercase;

    text-shadow:
        0 3px 10px rgba(0, 0, 0, 0.9);
}


/* MAIN HEADING */

.contact-hero-content h1,
.contact-hero-content h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(42px, 5vw, 76px);

    line-height: 1;

    letter-spacing: 2px;

    text-transform: uppercase;

    text-shadow:
        0 5px 22px rgba(0, 0, 0, 0.9);
}


/* SECOND LINE */

.contact-hero-content h2 {
    color: var(--gold);

    margin-top: 6px;
}


/* DIVIDER */

.contact-divider {
    display: flex;

    align-items: center;

    gap: 14px;

    width: 100%;
    max-width: 380px;

    margin: 28px 0;
}


.contact-divider .divider-line {
    flex: 1;

    height: 1px;

    background: var(--gold);
}


.contact-divider .compass-star {
    color: var(--gold);

    font-size: 18px;
}


/* TAGLINE */

.contact-tagline {
    max-width: 560px;

    margin: 0 0 32px;

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

    font-size: clamp(17px, 1.4vw, 21px);

    line-height: 1.6;

    text-shadow:
        0 3px 12px rgba(0, 0, 0, 0.9);
}


/* SEND MESSAGE BUTTON */

.contact-hero-button {
    display: inline-flex;

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

    gap: 14px;

    padding: 16px 26px;

    background: #1f1f1f;

    border: 1px solid var(--gold);

    color: var(--gold);

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

    letter-spacing: 3px;

    text-decoration: none;

    text-transform: uppercase;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.5);

    transition: 0.3s ease;
}


.contact-hero-button:hover {
    background: #2d2d2d;

    color: #ffffff;

    transform: translateY(-3px);
}


.contact-hero-button span {
    font-size: 18px;
}


/* =========================================================
   CONTACT HERO MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .contact-hero {
        min-height: 700px;

        background-position: 60% center;
    }


    .contact-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.78) 0%,
                rgba(0, 0, 0, 0.60) 58%,
                rgba(0, 0, 0, 0.20) 100%
            );
    }


    .contact-hero-content {
        max-width: 100%;

        margin-left: 0;

        padding: 50px 30px;
    }


    .contact-eyebrow {
        font-size: 10px;

        letter-spacing: 3px;
    }


    .contact-hero-content h1,
    .contact-hero-content h2 {
        font-size: clamp(38px, 10vw, 60px);
    }


    .contact-tagline {
        font-size: 16px;
    }


    .contact-divider {
        max-width: 280px;
    }

}

/* =========================================================
   CONTACT PAGE – MAIN SECTIONS
   ========================================================= */


/* =========================================================
   SHARED CONTACT SECTIONS
   ========================================================= */

.contact-intro,
.contact-options {

    padding: 100px 30px;

    text-align: center;

}


.contact-community {

    padding: 75px 30px 90px;

    text-align: center;

}

.contact-intro {
    max-width: 850px;
    margin: 0 auto;
}


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

.contact-intro .section-eyebrow,
.contact-options .section-eyebrow,
.contact-community .section-eyebrow {
    margin: 0 0 14px;

    color: var(--gold);

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

    letter-spacing: 5px;

    text-transform: uppercase;
}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.contact-intro h2,
.contact-options h2,
.contact-community h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(34px, 4vw, 56px);

    line-height: 1.1;

    text-transform: uppercase;
}


/* =========================================================
   GOLD DIVIDER
   ========================================================= */

.section-divider {
    display: flex;

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

    gap: 14px;

    max-width: 320px;

    margin: 25px auto 32px;
}


.section-divider span:first-child,
.section-divider span:last-child {
    flex: 1;

    height: 1px;

    background: linear-gradient(
        to right,
        transparent,
        var(--gold)
    );
}


.section-divider span:last-child {
    background: linear-gradient(
        to left,
        transparent,
        var(--gold)
    );
}


.section-divider span:nth-child(2) {
    color: var(--gold);

    font-size: 17px;
}


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

.contact-intro p:not(.section-eyebrow),
.contact-community p {
    max-width: 700px;

    margin: 0 auto 18px;

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

    font-size: 18px;

    line-height: 1.8;
}


/* =========================================================
   THREE WAYS TO CONNECT
   ========================================================= */

.contact-options {
    max-width: 1400px;

    margin: 0 auto;

    padding-top: 110px;
    padding-bottom: 110px;

    border-top: 1px solid rgba(201, 162, 39, 0.12);
    border-bottom: 1px solid rgba(201, 162, 39, 0.12);
}


.contact-options-intro {
    max-width: 620px;

    margin: 0 auto 50px;

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

    font-size: 17px;

    line-height: 1.7;
}


/* =========================================================
   CONTACT CARDS
   ========================================================= */

.contact-cards {
    display: grid;

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

    gap: 25px;

    max-width: 1200px;

    margin: 0 auto;
}


.contact-card {
    display: flex;

    flex-direction: column;

    align-items: center;

    min-height: 390px;

    padding: 45px 32px 35px;

    background:
        linear-gradient(
            145deg,
            rgba(40, 40, 40, 0.96),
            rgba(18, 18, 18, 0.98)
        );

    border: 1px solid rgba(201, 162, 39, 0.28);

    border-radius: 18px;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.22);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.contact-card:hover {
    transform: translateY(-8px);

    border-color: rgba(201, 162, 39, 0.7);

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.35);
}


/* =========================================================
   CARD ICON
   ========================================================= */

.contact-card-icon {
    display: flex;

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

    width: 58px;
    height: 58px;

    margin-bottom: 24px;

    border: 1px solid var(--gold);

    border-radius: 50%;

    color: var(--gold);

    font-size: 24px;

    font-weight: 700;
}


/* =========================================================
   CARD TEXT
   ========================================================= */

.contact-card h3 {
    margin: 0 0 18px;

    color: #ffffff;

    font-size: 22px;

    text-transform: uppercase;
}


.contact-card p {
    margin: 0;

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

    font-size: 16px;

    line-height: 1.7;
}


/* =========================================================
   CARD BUTTONS
   ========================================================= */

.contact-card-button {
    display: inline-flex;

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

    margin-top: auto;

    min-height: 48px;

    padding: 12px 20px;

    border: 1px solid var(--gold);

    background: #1f1f1f;

    color: var(--gold);

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

    letter-spacing: 2px;

    text-decoration: none;

    text-transform: uppercase;

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


.contact-card-button:hover {
    background: var(--gold);

    color: #111111;

    transform: translateY(-2px);
}


/* =========================================================
   COMMUNITY SECTION
   ========================================================= */

.contact-community {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.015),
            rgba(0, 0, 0, 0.12)
        );
}


.contact-community-content {
    max-width: 800px;

    margin: 0 auto;
}


.contact-community-button {
    display: inline-flex;

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

    margin-top: 25px;

    padding: 15px 26px;

    border: 1px solid var(--gold);

    background: #1f1f1f;

    color: var(--gold);

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

    letter-spacing: 3px;

    text-decoration: none;

    text-transform: uppercase;

    transition: 0.3s ease;
}


.contact-community-button:hover {
    background: var(--gold);

    color: #111111;

    transform: translateY(-2px);
}


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

@media (max-width: 900px) {

    .contact-cards {
        grid-template-columns: 1fr;

        max-width: 550px;
    }


    .contact-card {
        min-height: 360px;
    }

}


@media (max-width: 768px) {

    .contact-intro,
    .contact-options,
    .contact-community {
        padding: 75px 20px;
    }


    .contact-intro .section-eyebrow,
    .contact-options .section-eyebrow,
    .contact-community .section-eyebrow {
        font-size: 10px;

        letter-spacing: 3px;
    }


    .contact-intro h2,
    .contact-options h2,
    .contact-community h2 {
        font-size: 34px;
    }


    .contact-intro p:not(.section-eyebrow),
    .contact-community p {
        font-size: 16px;

        line-height: 1.7;
    }


    .contact-options-intro {
        font-size: 16px;

        margin-bottom: 35px;
    }


    .contact-card {
        padding: 38px 25px 30px;
    }


    .section-divider {
        margin: 20px auto 28px;
    }

}

/* =========================================================
   CONTACT PAGE – MOBILE EXPERIENCE
   ========================================================= */

@media (max-width: 768px) {


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

    .contact-hero {
        min-height: 78vh;

        background-position: 68% center;
    }


    .contact-hero-content {
        width: 100%;

        max-width: 100%;

        padding: 70px 22px 45px;
    }


    .contact-eyebrow {
        margin-bottom: 14px;

        font-size: 10px;

        letter-spacing: 3px;
    }


    .contact-hero-content h1 {
        font-size: clamp(38px, 11vw, 52px);

        line-height: 1;

        letter-spacing: 1px;
    }


    .contact-hero-content h2 {
        margin-top: 8px;

        font-size: clamp(30px, 8vw, 42px);

        line-height: 1.05;
    }


    .contact-divider {
        max-width: 220px;

        margin: 22px auto;
    }


    .contact-tagline {
        max-width: 340px;

        margin: 0 auto 25px;

        font-size: 16px;

        line-height: 1.6;
    }


    .contact-hero-button {
        min-height: 52px;

        padding: 15px 22px;

        font-size: 10px;

        letter-spacing: 2px;

        background: #1f1f1f;
    }



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

    .contact-intro {
        padding: 60px 22px;
    }


    .contact-intro .section-eyebrow {
        margin-bottom: 12px;

        font-size: 10px;

        letter-spacing: 3px;
    }


    .contact-intro h2 {
        font-size: clamp(32px, 9vw, 42px);

        line-height: 1.1;
    }


    .contact-intro p:not(.section-eyebrow) {
        margin-bottom: 14px;

        font-size: 16px;

        line-height: 1.65;
    }



    /* =====================================================
       THREE WAYS TO CONNECT
       ===================================================== */

    .contact-options {
        padding: 60px 18px;
    }


    .contact-options h2 {
        font-size: clamp(32px, 9vw, 42px);

        line-height: 1.1;
    }


    .contact-options-intro {
        margin: 0 auto 28px;

        font-size: 16px;

        line-height: 1.6;
    }


    .contact-cards {
        grid-template-columns: 1fr;

        gap: 14px;

        max-width: 500px;
    }


    /* Make cards much shorter on phones */

    .contact-card {
        display: grid;

        grid-template-columns: 48px 1fr;

        grid-template-areas:
            "icon title"
            "icon text"
            "button button";

        align-items: start;

        min-height: auto;

        padding: 22px 20px 18px;

        border-radius: 14px;
    }


    .contact-card-icon {
        grid-area: icon;

        width: 42px;
        height: 42px;

        margin: 0;

        font-size: 18px;
    }


    .contact-card h3 {
        grid-area: title;

        margin: 2px 0 8px;

        text-align: left;

        font-size: 17px;

        line-height: 1.2;
    }


    .contact-card p {
        grid-area: text;

        margin: 0;

        text-align: left;

        font-size: 14px;

        line-height: 1.5;
    }


    .contact-card-button {
        grid-area: button;

        width: 100%;

        min-height: 46px;

        margin-top: 18px;

        padding: 12px 15px;

        font-size: 9px;

        letter-spacing: 1.8px;
    }



    /* =====================================================
       SHARE YOUR STORY
       ===================================================== */

    .contact-community {
        padding: 65px 22px 75px;
    }


    .contact-community .section-eyebrow {
        margin-bottom: 12px;

        font-size: 10px;

        letter-spacing: 3px;
    }


    .contact-community h2 {
        font-size: clamp(32px, 9vw, 42px);

        line-height: 1.1;
    }


    .contact-community p {
        margin-bottom: 14px;

        font-size: 16px;

        line-height: 1.65;
    }


    .contact-community-button {
        width: 100%;

        max-width: 320px;

        min-height: 52px;

        margin-top: 12px;

        padding: 15px 20px;

        font-size: 10px;

        letter-spacing: 2px;
    }



    /* =====================================================
       SHARED DIVIDERS
       ===================================================== */

    .section-divider {
        max-width: 220px;

        margin: 20px auto 25px;

        gap: 10px;
    }


    .section-divider span:nth-child(2) {
        font-size: 14px;
    }

}


/* =========================================
   CONTACT PAGE MOBILE HERO
   ========================================= */

@media (max-width: 768px) {

    .contact-hero {
        min-height: 620px;
        background-size: cover;
        background-position: 72% center;
        background-repeat: no-repeat;
    }

    .contact-hero .hero-content {
        padding: 70px 28px 45px;
        text-align: left;
        align-items: flex-start;
    }

}


    /* Dark gradient so text remains readable,
       while keeping both riders visible */

    .contact-hero::before {
        content: "";

        position: absolute;

        inset: 0;

        background:
            linear-gradient(
                90deg,
                rgba(8, 8, 8, 0.78) 0%,
                rgba(8, 8, 8, 0.55) 42%,
                rgba(8, 8, 8, 0.18) 72%,
                rgba(8, 8, 8, 0.08) 100%
            ),
            linear-gradient(
                180deg,
                rgba(8, 8, 8, 0.15) 0%,
                rgba(8, 8, 8, 0.05) 50%,
                rgba(8, 8, 8, 0.65) 100%
            );
    }


    .contact-hero-content {
        position: relative;

        z-index: 2;

        width: 100%;

        padding: 70px 34px 50px;

        text-align: left;
    }


    /* -----------------------------------------------------
       EYEBROW
       ----------------------------------------------------- */

    .contact-hero-eyebrow {
        font-size: 12px;

        letter-spacing: 5px;

        line-height: 1.4;

        margin: 0 0 24px;
    }


    /* -----------------------------------------------------
       MAIN TITLE
       ----------------------------------------------------- */

    .contact-hero-content h1 {
        max-width: 500px;

        font-size: clamp(52px, 14vw, 72px);

        line-height: 1.08;

        letter-spacing: 0;

        margin: 0 0 20px;
    }


    /* Gold emphasis */

    .contact-hero-script {
        display: block;

        color: var(--gold);

        font-size: clamp(48px, 13vw, 68px);

        line-height: 1.05;

        margin-top: 8px;

        margin-bottom: 28px;
    }


    /* -----------------------------------------------------
       DIVIDER
       ----------------------------------------------------- */

    .contact-hero .adventure-divider {
        width: 100%;

        max-width: 300px;

        margin: 28px 0 32px;
    }


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

    .contact-hero-tagline {
        max-width: 420px;

        margin: 0 0 40px;

        font-size: 19px;

        line-height: 1.65;

        color: #f4f4f4;
    }


    /* -----------------------------------------------------
       BUTTON
       ----------------------------------------------------- */

    .contact-explore-button {
        display: inline-flex;

        align-items: center;

        justify-content: center;

        min-width: 310px;

        padding: 21px 24px;

        background: rgba(15, 15, 15, 0.92);

        border: 1px solid var(--gold);

        color: var(--gold);

        font-size: 11px;

        font-weight: 700;

        letter-spacing: 4px;

        text-decoration: none;
    }


    .contact-explore-button span {
        margin-left: 18px;

        font-size: 22px;
    }


    /* -----------------------------------------------------
       THREE WAYS TO CONNECT
       ----------------------------------------------------- */

    .contact-options {
        padding: 75px 20px 65px;
    }


    .contact-options h2 {
        font-size: clamp(38px, 11vw, 56px);

        line-height: 1.05;

        margin-bottom: 22px;
    }


    .contact-options-grid {
        display: grid;

        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: 40px;
    }


    .contact-option-card {
        min-height: 145px;

        padding: 25px 22px;

        display: flex;

        align-items: center;

        text-align: left;
    }


    /* -----------------------------------------------------
       SHARE YOUR STORY
       ----------------------------------------------------- */

    .contact-community {
        padding: 75px 28px;
    }


    .contact-community h2 {
        font-size: clamp(38px, 11vw, 56px);

        line-height: 1.08;
    }


    .contact-community p {
        font-size: 18px;

        line-height: 1.65;
    }

/* =========================================================
   HOME PAGE MOBILE
   ========================================================= */

@media (max-width: 768px) {

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

.home-hero {
    min-height: 560px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

    .home-hero .hero-content {
        padding: 95px 28px 45px;
        text-align: left;
        align-items: flex-start;
        justify-content: flex-end;
    }


    .home-hero .eyebrow {
        font-size: 0.75rem;
        letter-spacing: 4px;
        margin-bottom: 18px;
    }


    .home-hero h1 {
        font-size: clamp(3rem, 15vw, 5.2rem);
        line-height: 0.92;
        margin-bottom: 22px;
    }


    .home-hero h2 {
        font-size: 1.05rem;
        line-height: 1.4;
        margin-bottom: 16px;
    }


    .home-hero .tagline {
        font-size: 1rem;
        line-height: 1.65;
        max-width: 100%;
        margin-bottom: 28px;
    }


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

    .home-hero .buttons {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }


    .home-hero .btn {
        width: 100%;
        min-height: 58px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 14px 18px;
        font-size: 0.75rem;
        letter-spacing: 1.5px;
    }


    /* Hide this on mobile because
       people already know they can scroll */

    .home-hero .scroll-indicator {
        display: none;
    }


    /* -----------------------------------------
       WELCOME SECTION
    ----------------------------------------- */

    .home-intro {
        padding: 65px 28px;
    }


    .home-intro h2 {
        font-size: 2.2rem;
        line-height: 1.1;
    }


    .home-intro p {
        font-size: 1rem;
        line-height: 1.7;
    }


    .story-line {
        flex-direction: column;
        gap: 12px;
        margin-top: 35px;
    }


    /* -----------------------------------------
       SECTION HEADINGS
    ----------------------------------------- */

    .section-heading {
        padding-left: 28px;
        padding-right: 28px;
    }


    .section-heading h2 {
        font-size: 2.2rem;
        line-height: 1.1;
    }


    .section-heading p {
        font-size: 1rem;
        line-height: 1.6;
    }


    /* -----------------------------------------
       EXPERIENCE CARDS
    ----------------------------------------- */

    .interactive-section {
        padding: 65px 0;
    }


    .experience-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 20px;
        margin-top: 35px;
    }


    .experience-card {
        min-height: auto;
    }


    .experience-image {
        height: 220px;
    }


    .experience-content {
        padding: 25px;
    }


    /* -----------------------------------------
       TOURING AWARDS
    ----------------------------------------- */

    .home-awards {
        padding: 80px 28px;
    }


    .home-awards h2 {
        font-size: 2.4rem;
        line-height: 1.05;
    }


    .award-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }


    .award-buttons .btn {
        width: 100%;
        text-align: center;
    }


    /* -----------------------------------------
       MUSIC
    ----------------------------------------- */

    .home-music {
        padding: 65px 0;
    }


    .music-feature-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 0 20px;
        margin-top: 35px;
    }


    .music-feature-card {
        padding: 25px;
    }


    /* -----------------------------------------
       SPONSORS
    ----------------------------------------- */

    .sponsors-section {
        padding: 70px 20px;
    }


    .current-sponsor,
    .future-sponsors {
        padding: 35px 22px;
    }


    .sponsor-opportunities {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }


    .sponsor-card {
        padding: 20px 12px;
    }


    .sponsor-card span {
        font-size: 1.5rem;
    }


    /* -----------------------------------------
       FINAL JOURNEY
    ----------------------------------------- */

    .final-journey {
        padding: 75px 28px;
    }


    .final-journey h2 {
        font-size: 2.4rem;
        line-height: 1.1;
    }


    .final-journey .buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }


    .final-journey .btn {
        width: 100%;
        text-align: center;
    }


    /* -----------------------------------------
       FOOTER
    ----------------------------------------- */

    footer {
        padding: 35px 20px;
        text-align: center;
    }

}

/* =========================================================
   MOBILE HOME HERO - FULL MOTORCYCLE IMAGE
   ========================================================= */

.mobile-hero-photo {
    display: none;
}


@media (max-width: 768px) {

.home-hero {
    min-height: 1000px;
    background-size: contain;
    background-position: center -8px;
    background-repeat: no-repeat;
}


    /* Full photo layer */

    .mobile-hero-photo {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 0;
    }


    .mobile-hero-photo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center center;
        display: block;
    }


    /* Dark cinematic overlay */

    .hero.home-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;

        background:
            linear-gradient(
                to bottom,
                rgba(8, 8, 8, 0.35) 0%,
                rgba(8, 8, 8, 0.25) 35%,
                rgba(8, 8, 8, 0.55) 65%,
                rgba(8, 8, 8, 0.92) 100%
            );
    }


    /* Keep hero content above image */

    .home-hero .hero-content {
        position: relative;
        z-index: 3;
    }


    .home-hero .hero-overlay {
        z-index: 2;
    }


    .home-hero .hero-particles {
        z-index: 2;
    }

}

/* =========================================================
   ABOUT PAGE MOBILE
   ========================================================= */

@media (max-width: 768px) {

.about-page .about-hero {
    min-height: 520px;
    background-size: contain;
    background-position: center -8px;
    background-repeat: no-repeat;
}

    .about-hero .hero-content {
        padding: 80px 28px 55px;
        text-align: left;
        align-items: flex-start;
        justify-content: flex-end;
    }

    .about-hero h1 {
        font-size: clamp(3rem, 14vw, 5rem);
        line-height: 0.95;
        margin-bottom: 22px;
    }

    .about-hero h2 {
        font-size: 1.15rem;
        line-height: 1.4;
        max-width: 95%;
    }

}

/* -----------------------------------------
   ABOUT STORY INTRO
----------------------------------------- */

.about-page .intro {
    padding: 70px 28px;
    text-align: center;
}

.about-page .intro .section-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 3px;
    margin-bottom: 18px;
}

.about-page .intro h2 {
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1.05;
    margin-bottom: 25px;
}

.about-page .intro p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 20px;
}



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

    .adventures-hero {
        min-height: 1050px;
        background-size: contain;
        background-position: center -8px;
        background-repeat: no-repeat;
        position: relative;
    }


    .adventures-hero .hero-content {
        position: relative;
        z-index: 10;

        padding: 520px 25px 55px;

        text-align: center;
        align-items: center;
        justify-content: flex-start;
    }


    .adventures-hero .adventure-eyebrow {
        font-size: 0.72rem;
        letter-spacing: 3px;
        line-height: 1.5;
        margin-bottom: 18px;
    }


    .adventures-hero h1 {
        font-size: clamp(2.8rem, 9vw, 4.2rem);
        line-height: 0.95;
        margin-bottom: 22px;
        width: 100%;
        text-align: center;
    }


    .adventures-hero h1 span {
        display: block;
        font-size: 0.62em;
        line-height: 1;
        margin-top: 10px;
    }


    .adventures-hero h2 {
        font-size: 1.1rem;
        line-height: 1.4;
        margin-bottom: 18px;
    }


    .adventures-hero .tagline {
        font-size: 1rem;
        line-height: 1.6;
        max-width: 100%;
        margin-bottom: 28px;
    }


    /* -----------------------------------------
       ADVENTURE BUTTON
    ----------------------------------------- */

    .adventures-hero .adventure-explore-button {
        width: 100%;
        max-width: 340px;
        padding: 16px 20px;
        font-size: 0.85rem;
    }


    /* -----------------------------------------
       DIVIDER
    ----------------------------------------- */

    .adventures-hero .adventure-divider {
        width: 80%;
        max-width: 320px;
        margin: 18px auto;
    }


    /* =========================================================
       EXPLORE ADVENTURES SECTION
       ========================================================= */

    .adventure-explore-section {
        padding: 75px 25px 70px;
        text-align: center;
    }


    .adventure-section-heading {
        max-width: 100%;
        margin: 0 auto;
    }


    .adventure-section-heading .section-eyebrow {
        font-size: 0.7rem;
        letter-spacing: 3px;
        line-height: 1.5;
        margin-bottom: 18px;
    }


    .adventure-section-heading h2 {
        font-size: clamp(2.2rem, 9vw, 3.4rem);
        line-height: 1.05;
        margin-bottom: 22px;
    }


    .adventure-section-heading h2 span {
        display: block;
        color: #d8ad2d;
        margin-top: 8px;
    }


    .adventure-section-heading > p {
        font-size: 1rem;
        line-height: 1.65;
        max-width: 100%;
        margin: 0 auto;
    }


    /* -----------------------------------------
       JOURNEY STATS
    ----------------------------------------- */

    .journey-stats {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-top: 38px;
    }


    .journey-stat {
        padding: 22px 18px;
        width: 100%;
    }


    .journey-stat strong {
        font-size: 1.8rem;
        display: block;
        margin-bottom: 8px;
    }


    .journey-stat span {
        font-size: 0.72rem;
        letter-spacing: 2px;
    }

/* =========================================================
   ADVENTURES PAGE - MOBILE HERO
   ========================================================= */

@media (max-width: 768px) {

.adventures-hero {
    position: relative !important;
    display: block !important;

    min-height: 900px !important;
    height: 900px !important;

    background-size: 100% auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;

    overflow: visible !important;
}


    /* -----------------------------------------
       BACKGROUND EFFECTS
    ----------------------------------------- */

    .adventures-hero .adventures-overlay,
    .adventures-hero .sunlight,
    .adventures-hero .sparkle {
        z-index: 1 !important;
    }


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

    .adventures-hero .hero-content {
        position: absolute !important;

        top: 270px !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        max-width: none !important;

        box-sizing: border-box !important;

        display: block !important;

        padding: 20px 25px 50px !important;
        margin: 0 !important;

        z-index: 99999 !important;

        text-align: center !important;

        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;

        color: #ffffff !important;
    }


    /* -----------------------------------------
       EYEBROW
    ----------------------------------------- */

    .adventures-hero .adventure-eyebrow {
        display: block !important;

        color: #d8ad2d !important;

        font-size: 11px !important;
        line-height: 1.5 !important;

        letter-spacing: 3px !important;

        margin: 0 0 15px !important;
    }


    /* -----------------------------------------
       MAIN TITLE
    ----------------------------------------- */

    .adventures-hero h1 {
        display: block !important;

        color: #ffffff !important;

        font-size: 48px !important;
        line-height: 0.95 !important;

        margin: 0 0 20px !important;
    }


    .adventures-hero h1 span {
        display: block !important;

        color: #d8ad2d !important;

        font-size: 30px !important;
        line-height: 1 !important;

        margin-top: 10px !important;
    }


    /* -----------------------------------------
       DIVIDER
    ----------------------------------------- */

    .adventures-hero .adventure-divider {
        display: flex !important;

        width: 80% !important;
        max-width: 320px !important;

        margin: 18px auto !important;
    }


    /* -----------------------------------------
       SUBTITLE
    ----------------------------------------- */

    .adventures-hero h2 {
        display: block !important;

        color: #ffffff !important;

        font-size: 22px !important;
        line-height: 1.4 !important;

        margin: 20px 0 18px !important;
    }


    /* -----------------------------------------
       DESCRIPTION
    ----------------------------------------- */

    .adventures-hero .tagline {
        display: block !important;

        color: #eeeeee !important;

        font-size: 16px !important;
        line-height: 1.6 !important;

        max-width: 100% !important;

        margin: 0 auto 25px !important;
    }


    /* -----------------------------------------
       EXPLORE BUTTON
    ----------------------------------------- */

    .adventures-hero .adventure-explore-button {
        display: inline-flex !important;

        width: 100% !important;
        max-width: 320px !important;

        box-sizing: border-box !important;

        padding: 15px 20px !important;
    }

}