/* ======================================================== */
/* 1. DESIGN SYSTEM & TOKENS                                */
/* ======================================================== */

html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

:root {
    --font-header: 'Impact', 'Arial Narrow Bold', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    
    --color-bg: #ffffff;
    --color-text-main: #000000;
    --color-text-muted: #000000;
    --color-accent: #01FF70;
    --color-border: #e5e5e5;
    
    --site-max-width: 1100px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text-main);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Desktop vs Mobile Display Toggles */
.mobile-only-slider {
    display: none;
}

/* ======================================================== */
/* 2. TYPOGRAPHY & LAYOUT UTILITIES                         */
/* ======================================================== */

h1, h2, h3, h4 {
    font-family: var(--font-header);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 0.85;
    font-weight: 900;
}

p {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-text-muted);
    letter-spacing: -0.01em;
}

.container {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.section-padding {
    padding: 5rem 0;
}

.text-center {
    text-align: center;
}

hr {
    border: 0;
    border-top: 2px solid var(--color-accent);
    margin: 4rem 0;
}

/* ======================================================== */
/* 3. NAVIGATION BAR                                        */
/* ======================================================== */

.site-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    padding: 2.5rem 0;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.nav-logo {
    display: flex;
    align-items: center;
}

.nav-links a {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
    margin-left: 2.5rem;
    letter-spacing: 0.05em;
    transition: opacity 0.2s ease;
}

.nav-links a:hover {
    opacity: 0.7;
    color: #01FF70;
}

.nav-toggle,
.hamburger-btn {
    display: none;
}

/* ======================================================== */
/* 4. HERO SECTION                                          */
/* ======================================================== */

.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 8rem;
    padding-bottom: 4rem;
    overflow: hidden;
    background-color: #000000;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    color: #ffffff;
}

.hero h1 {
    font-size: 7.5rem;
    margin-bottom: 1.5rem;
    color: #ffffff;
    word-spacing: 0.05em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.hero-eyebrow {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    font-size: 1.8rem;
    letter-spacing: 0.02em;
    color: #ffffff;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

/* ======================================================== */
/* 5. INTRO & FEATURED CONTAINERS                           */
/* ======================================================== */

#about.section-padding {
    padding-top: 2.5rem;
    padding-bottom: 0rem;
}

.intro-block {
    max-width: 1250px;
    margin: 0 auto;
    padding: 1rem 2rem 0rem 2rem;
}

.intro-p {
    font-size: 2rem;
    line-height: 1.45;
    text-align: center;
    color: var(--color-text-main);
    font-weight: 500;
    letter-spacing: 0.01em;
}

#about + hr, 
.intro-block + hr {
    margin-top: 1.5rem;
    margin-bottom: 3rem;
}

/* Shared Full-Width Block Styling */
.venue-feature-block,
.form-section-block,
#video-production-section,
#boring-stuff-section,
.lost-talk-feature-block,
.nature-walk-feature-block,
.jaj-feature-block,
.cyclethon-feature-block,
.credits-table-section {
    margin: 1.5rem 1.5rem;
    padding: 3.5rem 3rem;
    border-radius: 4px;
}

.venue-feature-block { background-color: #FF4F4F; }
.form-section-block { background-color: #C18980; }
#video-production-section,
#boring-stuff-section,
.lost-talk-feature-block,
.jaj-feature-block,
.credits-table-section { background-color: #2B3A2F; color: #ffffff; }
.nature-walk-feature-block { background-color: #5F5A48; color: #000000; }
.cyclethon-feature-block { background-color: #1B415A; color: #000000; }

.venue-feature-block a,
.lost-talk-feature-block a,
.nature-walk-feature-block a,
.jaj-feature-block a,
#video-production-section .video-lead a,
.custom-credits-table a {
    color: #01FF70;
    text-decoration: underline;
}

.cyclethon-feature-block a {
    color: var(--color-accent);
    text-decoration: underline;
}

.venue-feature-block a:hover,
.lost-talk-feature-block a:hover,
.nature-walk-feature-block a:hover,
.jaj-feature-block a:hover,
.cyclethon-feature-block a:hover,
.custom-credits-table a:hover {
    opacity: 0.8;
}

/* Inner Layout Blocks */
.venue-block-inner,
.lost-talk-block-inner,
.nature-walk-block-inner,
.jaj-block-inner,
.cyclethon-block-inner {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 4rem;
}

.media-feature-text { flex: 0 0 340px; }
.media-feature-display { flex: 1; display: flex; gap: 1.5rem; }

.media-feature-text p + p { margin-top: 1.2rem; }

.media-feature-text h2,
#video-production-section .video-intro h2,
#boring-stuff-section .boring-intro h2,
.highlights-intro h2,
.credits-table-section h2,
.form-header h2 {
    font-size: 4.5rem;
    line-height: 0.85;
    margin-bottom: 0.8rem;
}

.venue-feature-block .media-feature-text h2,
.venue-feature-block .media-feature-text .feature-sub,
.venue-feature-block .media-feature-text p,
.lost-talk-feature-block .media-feature-text h2,
.lost-talk-feature-block .media-feature-text .feature-sub,
.lost-talk-feature-block .media-feature-text p,
.nature-walk-feature-block .media-feature-text h2,
.nature-walk-feature-block .media-feature-text .feature-sub,
.nature-walk-feature-block .media-feature-text p,
.jaj-feature-block .media-feature-text h2,
.jaj-feature-block .media-feature-text .feature-sub,
.jaj-feature-block .media-feature-text p,
.cyclethon-feature-block .media-feature-text h2,
.cyclethon-feature-block .media-feature-text .feature-sub,
.cyclethon-feature-block .media-feature-text p {
    color: #ffffff;
}

.media-feature-text .feature-sub {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
}

/* Descriptive Text Leads */
.video-lead, .video-lead p,
.boring-lead, .boring-lead p,
.highlights-lead p,
.history-lead {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.4;
    color: #ffffff;
}

.history-lead { color: var(--color-text-muted); max-width: 750px; margin: 0 auto; }
.highlights-lead p { color: #000000; margin: 40px auto; }

/* ======================================================== */
/* 6. SLIDERS & CAROUSELS                                   */
/* ======================================================== */

.venue-slider-container,
.lost-talk-slider-container,
.nature-walk-slider-container,
.jaj-slider-container,
.cyclethon-slider-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    background-color: #1f2922;
}

.venue-slider-container input[type="radio"],
.lost-talk-slider-container input[type="radio"],
.nature-walk-slider-container input[type="radio"],
.jaj-slider-container input[type="radio"],
.cyclethon-slider-container input[type="radio"] {
    display: none;
}

.venue-slider-container .slider-track,
.lost-talk-slider-container .lost-talk-slider-track,
.nature-walk-slider-container .nature-walk-slider-track {
    display: flex;
    width: 600%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.jaj-slider-container .jaj-slider-track { display: flex; width: 100%; height: 100%; }
.cyclethon-slider-container .cyclethon-slider-track { display: flex; width: 300%; height: 100%; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }

.venue-slider-container .slide,
.lost-talk-slider-container .lost-talk-slide,
.nature-walk-slider-container .nature-walk-slide { width: 16.6666%; height: 100%; position: relative; }
.jaj-slider-container .jaj-slide { width: 100%; height: 100%; position: relative; }
.cyclethon-slider-container .cyclethon-slide { width: 33.3333%; height: 100%; position: relative; }

/* Slide Translation Bindings */
#slide-1:checked ~ .slider-track, #talk-slide-1:checked ~ .lost-talk-slider-track, #walk-slide-1:checked ~ .nature-walk-slider-track, #cycle-slide-1:checked ~ .cyclethon-slider-track { transform: translateX(0%); }
#slide-2:checked ~ .slider-track, #talk-slide-2:checked ~ .lost-talk-slider-track, #walk-slide-2:checked ~ .nature-walk-slider-track { transform: translateX(-16.6666%); }
#slide-3:checked ~ .slider-track, #talk-slide-3:checked ~ .lost-talk-slider-track, #walk-slide-3:checked ~ .nature-walk-slider-track { transform: translateX(-33.3332%); }
#slide-4:checked ~ .slider-track, #talk-slide-4:checked ~ .lost-talk-slider-track, #walk-slide-4:checked ~ .nature-walk-slider-track { transform: translateX(-49.9998%); }
#slide-5:checked ~ .slider-track, #talk-slide-5:checked ~ .lost-talk-slider-track, #walk-slide-5:checked ~ .nature-walk-slider-track { transform: translateX(-66.6664%); }
#slide-6:checked ~ .slider-track, #talk-slide-6:checked ~ .lost-talk-slider-track, #walk-slide-6:checked ~ .nature-walk-slider-track { transform: translateX(-83.3330%); }

#cycle-slide-2:checked ~ .cyclethon-slider-track { transform: translateX(-33.3333%); }
#cycle-slide-3:checked ~ .cyclethon-slider-track { transform: translateX(-66.6666%); }

.media-asset {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 2;
    cursor: pointer;
}

/* Slider Controls */
.slider-nav-dots {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.75rem;
    z-index: 5;
}

.dot-btn {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.venue-slider-container input:checked ~ .slider-nav-dots label,
.lost-talk-slider-container input:checked ~ .slider-nav-dots label,
.nature-walk-slider-container input:checked ~ .slider-nav-dots label,
.cyclethon-slider-container input:checked ~ .slider-nav-dots label {
    background-color: #ffffff;
}

.slider-arrow-controls {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 1.5rem;
    z-index: 10;
    pointer-events: none;
}

.arrow-btn {
    pointer-events: auto;
    width: 55px;
    height: 55px;
    background-color: var(--color-accent);
    color: #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease;
    user-select: none;
}

.arrow-btn:hover {
    background-color: #ffffff;
    transform: scale(1.1);
}

.arrow-btn.is-disabled {
    opacity: 0.3 !important;
    pointer-events: none !important;
    cursor: default !important;
}

/* Multi-Slider Track */
.multi-slider-wrapper { position: relative; width: 100%; }
.highlights-carousel-viewport { overflow: hidden; }
.highlights-multi-track { display: flex; gap: 1.5rem; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }

.highlight-card-slide {
    flex: 0 0 calc((100% - 3rem) / 3);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.highlight-card-slide:hover { transform: translateY(-6px); }

/* Embedded Video */
.nature-walk-slide .youtube-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.nature-walk-slide .youtube-background iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.77vh;
    height: 100%;
    min-width: 100%;
    min-height: 56.25vw;
    transform: translate(-50%, -50%);
    pointer-events: none !important;
}

/* ======================================================== */
/* 7. GRID, CARDS & BUTTONS                                 */
/* ======================================================== */

.wide-history-block,
.wide-highlights-block {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0.5rem 3rem 0rem 3rem;
}

.wide-highlights-block { padding-bottom: 4rem; }
.history-intro, .highlights-intro { margin-bottom: 4rem; }
.history-grid { display: flex; gap: 1.5rem; }

.history-card {
    flex: 1;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.history-card:hover { transform: translateY(-4px); }

.history-frame {
    width: 100%;
    aspect-ratio: 4 / 5;
    background-color: #000000;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.2rem;
}

#video-production-section .history-frame { aspect-ratio: 16 / 10; }

.history-asset {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s ease;
}

.history-card:hover .history-asset { opacity: 0.85; }
.history-card-body h3 { font-size: 2.2rem; line-height: 1.0; margin-bottom: 0.4rem; color: var(--color-text-main); }
#video-production-section .history-card-body h3 { color: #ffffff; }

.history-card-body h4 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666666;
}

#video-production-section .history-card-body h4 { color: #cccccc; }

/* Buttons */
.video-credits-btn-container { margin-top: 3rem; }

.video-credits-btn,
.credits-expand-btn {
    display: inline-block;
    font-family: var(--font-header);
    font-size: 2rem;
    text-transform: uppercase;
    background-color: var(--color-accent);
    color: #ffffff !important;
    border: 2px solid var(--color-accent);
    padding: 1rem 3rem;
    border-radius: 6px;
    text-decoration: none;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.video-credits-btn:hover,
.credits-expand-btn:hover {
    background-color: #ffffff;
    color: #000000 !important;
    border-color: #ffffff;
    transform: scale(1.02);
}

/* ======================================================== */
/* 8. FORMS, TABLES & FOOTER                                */
/* ======================================================== */

.form-block-inner { max-width: 900px; margin: 0 auto; }
.form-header { margin-bottom: 4rem; }
.form-header h2 { color: #ffffff; }
.form-header p { font-size: 1.3rem; font-weight: 500; color: #ffffff; }

.application-form { display: flex; flex-direction: column; gap: 2rem; }
.form-row-dual { display: flex; gap: 2rem; }
.form-row-dual .form-group { flex: 1; }

.form-group { display: flex; flex-direction: column; gap: 0.6rem; }
.form-group label {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1.1rem 1.2rem;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 500;
    border: 2px solid #000000;
    border-radius: 6px;
    background-color: #ffffff;
    color: #000000;
}

.cta-submit-btn {
    font-family: var(--font-header);
    font-size: 2.2rem;
    text-transform: uppercase;
    background-color: #000000;
    color: #ffffff;
    border: 2px solid #000000;
    padding: 1rem 4rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
    letter-spacing: 0.02em;
    margin-bottom: 0.8rem;
}

.cta-submit-btn:hover { background-color: #ffffff; color: #000000; }

/* Table */
.table-responsive { width: 100%; overflow-x: auto; }
.custom-credits-table { width: 100%; border-collapse: collapse; text-align: left; font-family: var(--font-body); }
.custom-credits-table th {
    font-family: var(--font-body);
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--color-accent);
    padding: 1rem 1.2rem;
    color: #ffffff;
}
.custom-credits-table td {
    padding: 1rem 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    font-weight: 500;
    color: #ffffff;
}
.custom-credits-table tr:hover td { background-color: rgba(255, 255, 255, 0.03); }

/* Footer */
.site-footer { background-color: #111111; padding: 4rem 0; }
.footer-content { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 2rem; }
.site-footer .copyright { font-size: 0.95rem; font-weight: 500; color: #888888; letter-spacing: 0.05em; text-transform: uppercase; margin: 0; }
.footer-signature-link { display: inline-block; transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); max-width: 220px; width: 100%; }
.footer-signature-img { width: 100%; height: auto; display: block; }

/* ======================================================== */
/* 9. LIGHTBOX MODAL                                        */
/* ======================================================== */

.lightbox-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.95);
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.lightbox-content {
    max-width: 95%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.8);
}

.lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    color: #ffffff;
    font-size: 3rem;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    user-select: none;
    z-index: 10000;
}

.lightbox-close:hover {
    color: var(--color-accent);
}

/* ======================================================== */
/* 10. GLOBAL MOBILE RESPONSIVE STYLES (≤ 900px)           */
/* ======================================================== */

@media (max-width: 900px) {

    /* --- SLIDER TOGGLES --- */
    .desktop-only-slider {
        display: none !important;
    }
    .mobile-only-slider {
        display: block !important;
    }

    /* --- MOBILE TEXT CENTRALIZATION --- */
    body,
    p,
    h1, h2, h3, h4,
    .hero,
    .hero-content,
    .intro-p,
    .media-feature-text,
    .media-feature-text p,
    .video-lead,
    .video-lead p,
    .boring-lead,
    .boring-lead p,
    .highlights-lead,
    .highlights-lead p,
    .history-card-body,
    .history-card-body h3,
    .history-card-body h4,
    .form-header,
    .form-header p,
    .form-group label {
        text-align: center !important;
    }

    .hero-content,
    .media-feature-text,
    .video-intro,
    .boring-intro,
    .highlights-intro {
        align-items: center !important;
        justify-content: center !important;
    }

    .video-lead p,
    .boring-lead p,
    .highlights-lead p,
    .media-feature-text p {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* --- NAVIGATION --- */
    .nav-container { padding: 0 1.5rem; }
    .hamburger-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 21px;
        cursor: pointer;
        z-index: 1001;
    }
    .hamburger-btn span {
        display: block;
        height: 3px;
        width: 100%;
        background-color: #ffffff;
        border-radius: 3px;
        transition: all 0.3s ease-in-out;
    }
    .nav-toggle:checked ~ .hamburger-btn span:nth-child(1) { transform: translateY(9px) rotate(45deg); background-color: var(--color-accent); }
    .nav-toggle:checked ~ .hamburger-btn span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked ~ .hamburger-btn span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); background-color: var(--color-accent); }
    
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background-color: #111111;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1.8rem;
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.5);
        transition: right 0.4s cubic-bezier(0.77, 0.2, 0.05, 1);
        z-index: 1000;
    }
    .nav-links a { margin-left: 0; font-size: 1.2rem; }
    .nav-toggle:checked ~ .nav-links { right: 0; }

    /* --- HERO --- */
    .hero { padding-top: 6rem; padding-bottom: 2rem; }
    .hero-content { padding: 0 1.5rem !important; }
    .hero h1 {
        font-size: clamp(3rem, 11vw, 5rem);
        line-height: 0.95;
        margin-bottom: 1rem;
        word-break: break-word;
        hyphens: auto;
    }
    .hero-eyebrow { font-size: 1.2rem; line-height: 1.3; margin-top: 0.75rem; }

    /* --- TYPOGRAPHY & HEADINGS --- */
    h2,
    .media-feature-text h2,
    #video-production-section .video-intro h2,
    .highlights-intro h2,
    #boring-stuff-section .boring-intro h2,
    .lost-talk-feature-block .media-feature-text h2,
    .nature-walk-feature-block .media-feature-text h2,
    .jaj-feature-block .media-feature-text h2,
    .cyclethon-feature-block .media-feature-text h2,
    .credits-table-section h2,
    .form-header h2 {
        font-size: clamp(2.2rem, 8vw, 2.8rem) !important;
        line-height: 0.95;
        margin-bottom: 0.75rem;
    }

    .media-feature-text .feature-sub,
    .history-card-body h4 {
        font-size: 0.85rem !important;
        margin-bottom: 1rem;
    }

    .video-lead, .video-lead p,
    .boring-lead, .boring-lead p,
    .highlights-lead p,
    .media-feature-text p {
        font-size: 1.05rem !important;
        line-height: 1.5 !important;
    }

    p + p,
    .media-feature-text p + p,
    .video-lead p + p,
    .boring-lead p + p {
        margin-top: 1.2rem !important;
    }

    /* --- SECTION CONTAINERS & SPACING --- */
    hr {
        margin: 1.5rem 0 !important;
    }

    #about + hr, 
    .intro-block + hr,
    div.container + hr {
        margin-top: 0.75rem !important;
        margin-bottom: 2rem !important;
    }

    .venue-feature-block,
    .form-section-block,
    #video-production-section,
    .lost-talk-feature-block,
    .nature-walk-feature-block,
    .jaj-feature-block,
    .cyclethon-feature-block,
    .credits-table-section {
        margin-left: 0.75rem;
        margin-right: 0.75rem;
        padding: 2.5rem 1.25rem;
    }

    #boring-stuff-section {
        margin-left: 0.75rem;
        margin-right: 0.75rem;
        padding: 2rem 1.25rem !important;
    }

    #boring-stuff-section .boring-intro {
        margin-bottom: 0 !important;
    }

    .wide-highlights-block {
        padding-top: 1rem !important;
    }

    .highlights-intro {
        margin-bottom: 2rem !important;
    }

    .highlights-lead p {
        margin-top: 1rem !important;
        margin-bottom: 1.5rem !important;
    }

    .venue-block-inner,
    .lost-talk-block-inner,
    .nature-walk-block-inner,
    .jaj-block-inner,
    .cyclethon-block-inner,
    .form-row-dual {
        flex-direction: column;
        gap: 2rem;
    }

    .media-feature-text,
    .media-feature-display {
        flex: 0 0 100%;
        width: 100%;
    }

    .container,
    .wide-history-block,
    .wide-highlights-block {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #about.section-padding { padding-top: 2rem !important; padding-bottom: 0 !important; }
    .intro-block { padding: 0 0.5rem; }
    .intro-p { font-size: clamp(1.15rem, 4.5vw, 1.35rem); line-height: 1.5; }

    #video-production-section .video-intro,
    #boring-stuff-section .boring-intro {
        padding: 0;
        margin-bottom: 2rem;
    }

    /* --- FEATURE SLIDERS: 4/5 ASPECT RATIO & ARROWS --- */
    .venue-slider-container,
    .lost-talk-slider-container,
    .nature-walk-slider-container,
    .jaj-slider-container,
    .cyclethon-slider-container {
        aspect-ratio: 4 / 5 !important;
    }

    .venue-slider-container .slider-arrow-controls,
    .lost-talk-slider-container .slider-arrow-controls,
    .nature-walk-slider-container .slider-arrow-controls,
    .cyclethon-slider-container .slider-arrow-controls {
        display: flex !important;
        padding: 0 0.75rem !important;
    }

    .slider-arrow-controls .arrow-btn {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.2rem !important;
        background-color: rgba(1, 255, 112, 0.9) !important;
    }

    /* --- HISTORICAL GRID & CARDS --- */
    .history-grid {
        flex-direction: column;
        gap: 2.5rem;
        margin-top: 2rem;
    }

    .history-card-body h3 {
        font-size: 1.6rem;
        line-height: 1.1;
        margin-bottom: 0.3rem;
    }

    /* --- MOBILE FUN STUFF SLIDER ENGINE (WITH TITLES) --- */
    .fun-slider-container {
        position: relative;
        width: 100%;
        padding-bottom: 3rem;
    }

    .fun-slider-container input[type="radio"] {
        display: none;
    }

    .fun-slider-container .fun-slider-track {
        display: flex;
        width: 700%;
        transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .fun-slider-container .fun-slide {
        width: 14.2857%;
        position: relative;
        padding: 0 0.25rem;
    }

    .fun-slide .history-frame {
        position: relative;
        width: 100%;
        aspect-ratio: 4 / 5;
        border-radius: 12px;
        overflow: hidden;
        background-color: #000000;
        margin-bottom: 0.8rem;
    }

    .fun-slide .history-card-body h3 {
        text-align: center;
        font-size: 1.6rem;
        color: #000000;
        margin: 0;
    }

    .fun-slider-container .slider-nav-dots {
        bottom: 0.5rem;
    }

    #fun-slide-1:checked ~ .fun-slider-track { transform: translateX(0%); }
    #fun-slide-2:checked ~ .fun-slider-track { transform: translateX(-14.2857%); }
    #fun-slide-3:checked ~ .fun-slider-track { transform: translateX(-28.5714%); }
    #fun-slide-4:checked ~ .fun-slider-track { transform: translateX(-42.8571%); }
    #fun-slide-5:checked ~ .fun-slider-track { transform: translateX(-57.1428%); }
    #fun-slide-6:checked ~ .fun-slider-track { transform: translateX(-71.4285%); }
    #fun-slide-7:checked ~ .fun-slider-track { transform: translateX(-85.7142%); }

    #fun-slide-1:checked ~ .slider-nav-dots label[for="fun-slide-1"],
    #fun-slide-2:checked ~ .slider-nav-dots label[for="fun-slide-2"],
    #fun-slide-3:checked ~ .slider-nav-dots label[for="fun-slide-3"],
    #fun-slide-4:checked ~ .slider-nav-dots label[for="fun-slide-4"],
    #fun-slide-5:checked ~ .slider-nav-dots label[for="fun-slide-5"],
    #fun-slide-6:checked ~ .slider-nav-dots label[for="fun-slide-6"],
    #fun-slide-7:checked ~ .slider-nav-dots label[for="fun-slide-7"] {
        background-color: #000000;
        transform: scale(1.2);
    }

    /* --- FORM SPACING & BUTTON FIXES --- */
    .form-header {
        margin-bottom: 1.75rem !important;
    }

    .cta-submit-btn {
        font-size: clamp(1.4rem, 6vw, 1.8rem) !important;
        padding: 0.85rem 2rem !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: nowrap !important;
    }

    /* --- BUTTONS & FOOTER --- */
    .video-credits-btn-container { margin-top: 2.5rem; }
    .video-credits-btn {
        display: block;
        width: 100%;
        font-size: 1.25rem;
        padding: 0.85rem 1.5rem;
        border-radius: 6px;
    }

    .footer-content {
        flex-direction: column;
        gap: 1.5rem;
    }
}
@media (max-width: 900px) {

    /* --- MOBILE RESPONSIVE CREDITS TABLE (STACKED CARDS) --- */
    .custom-credits-table, 
    .custom-credits-table tbody, 
    .custom-credits-table tr, 
    .custom-credits-table td {
        display: block !important;
        width: 100% !important;
    }

    /* Hide table header row on mobile */
    .custom-credits-table thead {
        display: none !important;
    }

    /* Format each row into a distinct stacked card block */
    .custom-credits-table tr {
        background-color: rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 1rem 1.25rem;
        margin-bottom: 1.25rem;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }

    /* Style individual field rows within each card block */
    .custom-credits-table td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.6rem 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        font-size: 0.95rem !important;
        text-align: right !important;
    }

    .custom-credits-table td:last-child {
        border-bottom: none !important;
    }

    /* Dynamically display field labels on the left */
    .custom-credits-table td::before {
        content: attr(data-label);
        font-family: var(--font-body);
        font-weight: 700;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-accent);
        text-align: left;
        padding-right: 1rem;
        flex-shrink: 0;
    }

    /* Special styling for the Video Title cell inside card */
    .custom-credits-table td[data-label="Video Title"] {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding-bottom: 0.8rem !important;
        margin-bottom: 0.4rem !important;
        border-bottom: 2px solid var(--color-accent) !important;
    }

    .custom-credits-table td[data-label="Video Title"]::before {
        display: none; /* Hide 'VIDEO TITLE' label for cleaner title focus */
    }

    .custom-credits-table td[data-label="Video Title"] a {
        font-size: 1.15rem;
        font-weight: 700;
        line-height: 1.35;
    }
}
/* --- UNIVERSAL HIDDEN ROW CLASS --- */
tr.video-row.is-hidden {
    display: none !important;
}
@media (max-width: 900px) {

    /* --- MOBILE EXPAND BUTTON SCALING --- */
    .credits-expand-btn {
        font-size: 1.1rem !important;
        padding: 0.75rem 1.75rem !important;
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
        display: inline-block !important;
    }

}
/* Shift focal point to the left on mobile for Cyclethon Event 5 */
@media (max-width: 900px) {
    img.media-asset[alt="Cyclethon Live Stage"] {
        object-position: 80% center !important; /* Adjust 25% down to 15% or 10% if you need to push it further left */
    }
    img.media-asset[alt="Cyclethon Event 4"] {
        object-position: 75% center !important; /* Adjust 25% down to 15% or 10% if you need to push it further left */
    }
    img.media-asset[alt="Cyclethon Event 5"] {
        object-position: 75% center !important; /* Adjust 25% down to 15% or 10% if you need to push it further left */
    }
}

@media (max-width: 900px) {

    /* --- MOBILE HERO SIZE REDUCTION --- */
    .hero {
        height: 60vh !important; /* Reduces hero height from 100vh to 60vh */
        min-height: 380px !important; /* Prevents overflow/clipping on very small screens */
        padding-top: 4rem !important;
        padding-bottom: 2rem !important;
    }

}
/* Hide mobile line breaks by default on desktop */
.mobile-br {
    display: none;
}

/* Enable mobile line breaks inside your mobile media query */
@media (max-width: 900px) {
    .mobile-br {
        display: inline !important;
    }
}
@media (max-width: 900px) {

    /* --- CREDITS TABLE TITLE SPACING --- */
    .credits-table-section h2 {
        margin-bottom: 2rem !important; /* Increases gap below 'VIDEO CREDITS' title */
    }

}
@media (max-width: 900px) {

    /* --- CONTACT FORM TEXT SCALING --- */
    .form-header p {
        font-size: 1.05rem !important;
        line-height: 1.45 !important;
        font-weight: 400 !important;
    }

    .form-group label {
        font-size: 0.8rem !important;
        letter-spacing: 0.04em !important;
    }

}
/* Center card text titles and subheadings */
.history-card-body {
    text-align: center;
}

.highlight-card-slide .history-card-body {
    text-align: center;
}

/* --- VIDEO PRODUCTION SECTION SPACING --- */
#video-production-section .video-intro h2 {
    margin-bottom: 2rem !important; /* Increases gap below 'VIDEO PRODUCTION' title */
}

#video-production-section .video-lead p + p {
    margin-top: 1.5rem !important; /* Creates a clear break between paragraph 1 and paragraph 2 */
}

/* --- THE BORING STUFF SECTION SPACING --- */
#boring-stuff-section .boring-intro h2 {
    margin-bottom: 2rem !important; /* Increases gap below 'THE BORING STUFF' title */
}

#boring-stuff-section .boring-lead p + p {
    margin-top: 1.5rem !important; /* Creates a clear break between paragraph 1 and paragraph 2 */
}

@media (max-width: 900px) {

    /* --- MOBILE FOOTER SIDE-BY-SIDE LAYOUT --- */
    .footer-content {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 1rem !important;
    }

    .site-footer .copyright {
        font-size: 0.72rem !important;
        text-align: left !important;
        letter-spacing: 0.02em !important;
    }

    .footer-signature-link {
        max-width: 110px !important;
        flex-shrink: 0 !important;
    }

}

@media (max-width: 900px) {

    /* --- FIXED STATIONARY SLIDER ARROWS (MOBILE) --- */
    .slider-arrow-controls {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        transform: translateY(-50%);
        z-index: 10;
        pointer-events: none;
        display: flex !important;
        padding: 0 0.75rem !important;
    }

    /* Hide all arrow sets by default */
    .slider-arrow-controls .arrow-set {
        display: none;
        width: 100%;
        justify-content: space-between;
    }

    /* Un-hide arrow set corresponding to active slide input */
    #cycle-slide-1:checked ~ .slider-arrow-controls .set-1,
    #cycle-slide-2:checked ~ .slider-arrow-controls .set-2,
    #cycle-slide-3:checked ~ .slider-arrow-controls .set-3,
    #slide-1:checked ~ .slider-arrow-controls .set-1,
    #slide-2:checked ~ .slider-arrow-controls .set-2,
    #slide-3:checked ~ .slider-arrow-controls .set-3,
    #slide-4:checked ~ .slider-arrow-controls .set-4,
    #slide-5:checked ~ .slider-arrow-controls .set-5,
    #slide-6:checked ~ .slider-arrow-controls .set-6,
    #talk-slide-1:checked ~ .slider-arrow-controls .set-1,
    #talk-slide-2:checked ~ .slider-arrow-controls .set-2,
    #talk-slide-3:checked ~ .slider-arrow-controls .set-3,
    #talk-slide-4:checked ~ .slider-arrow-controls .set-4,
    #talk-slide-5:checked ~ .slider-arrow-controls .set-5,
    #talk-slide-6:checked ~ .slider-arrow-controls .set-6,
    #walk-slide-1:checked ~ .slider-arrow-controls .set-1,
    #walk-slide-2:checked ~ .slider-arrow-controls .set-2,
    #walk-slide-3:checked ~ .slider-arrow-controls .set-3,
    #walk-slide-4:checked ~ .slider-arrow-controls .set-4,
    #walk-slide-5:checked ~ .slider-arrow-controls .set-5,
    #walk-slide-6:checked ~ .slider-arrow-controls .set-6,
    #fun-slide-1:checked ~ .slider-arrow-controls .set-1,
    #fun-slide-2:checked ~ .slider-arrow-controls .set-2,
    #fun-slide-3:checked ~ .slider-arrow-controls .set-3,
    #fun-slide-4:checked ~ .slider-arrow-controls .set-4,
    #fun-slide-5:checked ~ .slider-arrow-controls .set-5,
    #fun-slide-6:checked ~ .slider-arrow-controls .set-6,
    #fun-slide-7:checked ~ .slider-arrow-controls .set-7 {
        display: flex;
    }

    .slider-arrow-controls .arrow-btn {
        pointer-events: auto;
        width: 42px !important;
        height: 42px !important;
        font-size: 1.2rem !important;
        background-color: rgba(1, 255, 112, 0.9) !important;
    }

}
/* --- STATIONARY SLIDER ARROW SET CONTROL (DESKTOP & MOBILE) --- */
.slider-arrow-controls .arrow-set {
    display: none;
    width: 100%;
    justify-content: space-between;
}

/* Un-hide only the active arrow set based on checked radio button */
#cycle-slide-1:checked ~ .slider-arrow-controls .set-1,
#cycle-slide-2:checked ~ .slider-arrow-controls .set-2,
#cycle-slide-3:checked ~ .slider-arrow-controls .set-3,
#slide-1:checked ~ .slider-arrow-controls .set-1,
#slide-2:checked ~ .slider-arrow-controls .set-2,
#slide-3:checked ~ .slider-arrow-controls .set-3,
#slide-4:checked ~ .slider-arrow-controls .set-4,
#slide-5:checked ~ .slider-arrow-controls .set-5,
#slide-6:checked ~ .slider-arrow-controls .set-6,
#talk-slide-1:checked ~ .slider-arrow-controls .set-1,
#talk-slide-2:checked ~ .slider-arrow-controls .set-2,
#talk-slide-3:checked ~ .slider-arrow-controls .set-3,
#talk-slide-4:checked ~ .slider-arrow-controls .set-4,
#talk-slide-5:checked ~ .slider-arrow-controls .set-5,
#talk-slide-6:checked ~ .slider-arrow-controls .set-6,
#walk-slide-1:checked ~ .slider-arrow-controls .set-1,
#walk-slide-2:checked ~ .slider-arrow-controls .set-2,
#walk-slide-3:checked ~ .slider-arrow-controls .set-3,
#walk-slide-4:checked ~ .slider-arrow-controls .set-4,
#walk-slide-5:checked ~ .slider-arrow-controls .set-5,
#walk-slide-6:checked ~ .slider-arrow-controls .set-6,
#fun-slide-1:checked ~ .slider-arrow-controls .set-1,
#fun-slide-2:checked ~ .slider-arrow-controls .set-2,
#fun-slide-3:checked ~ .slider-arrow-controls .set-3,
#fun-slide-4:checked ~ .slider-arrow-controls .set-4,
#fun-slide-5:checked ~ .slider-arrow-controls .set-5,
#fun-slide-6:checked ~ .slider-arrow-controls .set-6,
#fun-slide-7:checked ~ .slider-arrow-controls .set-7 {
    display: flex;
}
@media (max-width: 900px) {

    /* Stationary Arrow Vertical Positioning for Fun Slider */
    .fun-slider-container .slider-arrow-controls {
        top: 38% !important; /* Centers arrows over the image height, above the title */
    }

    /* --- FUN SLIDER GREY & NEON GREEN DOT STYLING --- */
    .fun-slider-container .dot-btn {
        background-color: #cccccc !important; /* Inactive dots: soft neutral grey */
        border: 1px solid #bbbbbb;
    }

    /* Active Dot: Neon Green (#01FF70) with slight scale up */
    #fun-slide-1:checked ~ .slider-nav-dots label[for="fun-slide-1"],
    #fun-slide-2:checked ~ .slider-nav-dots label[for="fun-slide-2"],
    #fun-slide-3:checked ~ .slider-nav-dots label[for="fun-slide-3"],
    #fun-slide-4:checked ~ .slider-nav-dots label[for="fun-slide-4"],
    #fun-slide-5:checked ~ .slider-nav-dots label[for="fun-slide-5"],
    #fun-slide-6:checked ~ .slider-nav-dots label[for="fun-slide-6"],
    #fun-slide-7:checked ~ .slider-nav-dots label[for="fun-slide-7"] {
        background-color: #01FF70 !important;
        border-color: #01FF70 !important;
        transform: scale(1.3);
    }

}

/* --- DESKTOP FUN STUFF NAVIGATION DOTS --- */
.highlights-nav-dots {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.highlights-nav-dots .desktop-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #cccccc;
    border: 1px solid #bbbbbb;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, border-color 0.3s ease;
}

/* Active Dot State: Signature Neon Green */
.highlights-nav-dots .desktop-dot.is-active {
    background-color: #01FF70;
    border-color: #01FF70;
    transform: scale(1.3);
}

/* --- DESKTOP FUN STUFF SECTION BOTTOM SPACING FIX --- */
.wide-highlights-block {
    padding-bottom: 1rem !important; /* Reduces the large default bottom padding */
}

.highlights-nav-dots {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem; /* Keeps dots close to the titles without extra push */
}

/* Reduces gap specifically above the horizontal line after the Fun gallery */
#fun + .container hr,
#highlights-gallery + .container hr {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}

/* --- FUN STUFF CARD TITLES STYLING --- */
.highlight-card-slide .history-card-body h3,
.fun-slide .history-card-body h3 {
    font-family: var(--font-body) !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    padding-top: 15px;
    letter-spacing: -0.01em !important;
    text-decoration: none !important;
    border-bottom: none !important;
    color: var(--color-text-main) !important;
}

.highlight-card-link {
    text-decoration: none !important;
}

/* --- BUTTON TYPOGRAPHY UNIFICATION --- */
.video-credits-btn,
.credits-expand-btn,
.cta-submit-btn {
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important; /* Set to uppercase if you prefer all caps */
    text-decoration: none !important;
}

/* Adjust submit button text scaling slightly for desktop/mobile consistency */
.cta-submit-btn {
    font-size: 1.25rem !important;
}

/* --- GLOBAL UPPERCASE BUTTONS --- */
button,
.video-credits-btn,
.credits-expand-btn,
.cta-submit-btn,
.arrow-btn {
    text-transform: uppercase !important;
}
@media (max-width: 900px) {
    .video-credits-btn {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        font-size: 1.15rem !important;
        letter-spacing: -0.02em !important;
        white-space: nowrap !important;
    }
}
/* --- PREVENT AUTOMATIC MOBILE HYPHENATION --- */
h1, h2, h3, .hero-title, span {
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}