@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
@import url("https://use.typekit.net/krv6cin.css");
@import url("https://use.typekit.net/hsq7unp.css");
*, ::after, ::before {
    border-width: 1px;
    border-color: #030916;
}

.modal-overlay {
    display: none;
}

.credit-role.no-italics {
    width: 60%;
    margin-right: 10px;
    font-style: normal !important;
}

/**Footer Signup**/
footer #hsForm_316dbb6e-381f-4515-9b4c-1e82a0bf93c0 input {
    border: 1px solid #1CA9E0 !important;
    border-radius: 0px;
    padding: 10px 14px;
    background: transparent;
    color: #efefef !important;
    width: 100%;
}
.hero-text .hero-step p {
    font-family: 'dharma-gothic-m', 'Oswald', sans-serif !important;
    font-size: 130px;
    font-weight: 700 !important;
    line-height: 1;
    color: #fff;
    margin: 0;
    transition: all 1.5s ease;
    text-transform: uppercase;
}
.hs_recaptcha.hs-recaptcha.field.hs-form-field {
    display: none;
}

footer #hsForm_316dbb6e-381f-4515-9b4c-1e82a0bf93c0 .hs_email {
    max-width: 230px;
}

footer #hsForm_316dbb6e-381f-4515-9b4c-1e82a0bf93c0 .form-columns-1:nth-child(2) {
    max-width: 215px;
    float: left;
}

footer #hsForm_316dbb6e-381f-4515-9b4c-1e82a0bf93c0 label {
    display: none;
}

footer #hsForm_316dbb6e-381f-4515-9b4c-1e82a0bf93c0 fieldset {
    margin-bottom: 10px;
}

footer #hsForm_316dbb6e-381f-4515-9b4c-1e82a0bf93c0 .hs_submit input {
    background: #00a9e0 !important;
    border-radius: 30px !important;
    font-size: 12px;
    font-weight: 300 !important;
}

footer #hsForm_316dbb6e-381f-4515-9b4c-1e82a0bf93c0 .hs_submit.hs-submit {
    width: 40%;
    float: left;
}

footer #hsForm_316dbb6e-381f-4515-9b4c-1e82a0bf93c0 .form-columns-1 {
    width: 60%;
}
/*HUBSPOT Newsletter Styles FIN*/


/*Consolidated Font Imports for Tide*/
@font-face {
    font-family: 'TideSans';
    src: url('fontface/TideSans-100LilBunny-webfont.woff2') format('woff2'), url('fontface/TideSans-100LilBunny-webfont.woff') format('woff'), url('fontface/TideSans-100LilBunny.ttf') format('ttf');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'TideSans';
    src: url('fontface/TideSans-100LilBunnyItalic-webfont.woff2') format('woff2'), url('fontface/TideSans-100LilBunnyItalic-webfont.woff') format('woff'), url('fontface/TideSans-100LilBunnyItalic.ttf') format('ttf');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'TideSans';
    src: url('fontface/TideSans-200LilMondo-webfont.woff2') format('woff2'), url('fontface/TideSans-200LilMondo-webfont.woff') format('woff'), url('fontface/TideSans-200LilMondo.ttf') format('ttf');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'TideSans';
    src: url('fontface/TideSans-200LilMondoItalic-webfont.woff2') format('woff2'), url('fontface/TideSans-200LilMondoItalic-webfont.woff') format('woff'), url('fontface/TideSans-200LilMondoItalic.ttf') format('ttf');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'TideSans';
    src: url('fontface/TideSans-300LilKahuna-webfont.woff2') format('woff2'), url('fontface/TideSans-300LilKahuna-webfont.woff') format('woff'), url('fontface/TideSans-300LilKahuna.ttf') format('ttf');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'TideSans';
    src: url('fontface/TideSans-300LilKahunaItalic-webfont.woff2') format('woff2'), url('fontface/TideSans-300LilKahunaItalic-webfont.woff') format('woff'), url('fontface/TideSans-300LilKahunaItalic.ttf') format('ttf');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'TideSans';
    src: url('fontface/TideSans-400LilDude-webfont.woff2') format('woff2'), url('fontface/TideSans-400LilDude-webfont.woff') format('woff'), url('fontface/TideSans-400LilDude.ttf') format('ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'TideSans';
    src: url('fontface/TideSans-400LilDudeItalic-webfont.woff2') format('woff2'), url('fontface/TideSans-400LilDudeItalic-webfont.woff') format('woff'), url('fontface/TideSans-400LilDudeItalic.ttf') format('ttf');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'TideSans';
    src: url('fontface/TideSans-500Dudette-webfont.woff2') format('woff2'), url('fontface/TideSans-500Dudette-webfont.woff') format('woff'), url('fontface/TideSans-500Dudette.ttf') format('ttf');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'TideSans';
    src: url('fontface/TideSans-500DudetteItalic-webfont.woff2') format('woff2'), url('fontface/TideSans-500DudetteItalic-webfont.woff') format('woff'), url('fontface/TideSans-500DudetteItalic.ttf') format('ttf');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'TideSans';
    src: url('fontface/TideSans-600Bunny-webfont.woff2') format('woff2'), url('fontface/TideSans-600Bunny-webfont.woff') format('woff'), url('fontface/TideSans-600Bunny.ttf') format('ttf');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'TideSans';
    src: url('fontface/TideSans-600BunnyItalic-webfont.woff2') format('woff2'), url('fontface/TideSans-600BunnyItalic-webfont.woff') format('woff'), url('fontface/TideSans-600BunnyItalic.ttf') format('ttf');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'TideSans';
    src: url('fontface/TideSans-700Mondo-webfont.woff2') format('woff2'), url('fontface/TideSans-700Mondo-webfont.woff') format('woff'), url('fontface/TideSans-700Mondo.ttf') format('ttf');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'TideSans';
    src: url('fontface/TideSans-700MondoItalic-webfont.woff2') format('woff2'), url('fontface/TideSans-700MondoItalic-webfont.woff') format('woff'), url('fontface/TideSans-700MondoItalic.ttf') format('ttf');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'TideSans';
    src: url('fontface/TideSans-800Kahuna-webfont.woff2') format('woff2'), url('fontface/TideSans-800Kahuna-webfont.woff') format('woff'), url('fontface/TideSans-800Kahuna.ttf') format('ttf');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'TideSans';
    src: url('fontface/TideSans-800KahunaItalic-webfont.woff2') format('woff2'), url('fontface/TideSans-800KahunaItalic-webfont.woff') format('woff'), url('fontface/TideSans-800KahunaItalic.ttf') format('ttf');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'TideSans';
    src: url('fontface/TideSans-900Dude-webfont.woff2') format('woff2'), url('fontface/TideSans-900Dude-webfont.woff') format('woff'), url('fontface/TideSans-900Dude.ttf') format('ttf');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'TideSans';
    src: url('fontface/TideSans-900DudeItalic-webfont.woff2') format('woff2'), url('fontface/TideSans-900DudeItalic-webfont.woff') format('woff'), url('fontface/TideSans-900DudeItalic.ttf') format('ttf');
    font-weight: 900;
    font-style: italic;
}


/* ==========================================
   BASE STYLES & RESET
   ========================================== */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: #ffffff;
    color: #000000;
    font-family: 'TideSans','Red Hat Display', 'Helvetica', Arial, Tahoma, sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.55;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    color: #fff;
    font-family: 'TideSans','Red Hat Display', 'Helvetica', Arial, Tahoma, sans-serif;
    font-weight: 500 !important;
    line-height: 1.4;
    text-transform: none;
    margin: 0;
}

.campaign-top {
    z-index: 10;
    position: relative;
}

.join-campaign .sub-offset {
    margin-top: -20px;
    padding-top: 20px;
    left: 4px;
    width: 222px;
    z-index: 2;
}


/* ==========================================
   CUSTOM SCROLLBAR
   ========================================== */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

/* Hide scrollbar on mobile for cleaner look */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 0px;
        display: none;
    }
}

/* ==========================================
   ANIMATIONS
   ========================================== */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.animate-bounce {
    animation: bounce 2s infinite;
}

/* ==========================================
   HEADER SCROLL ANIMATION
   ========================================== */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: var(--sbw, 0px);
    z-index: 999;
    transition: transform 0.3s ease-in-out;
}
/* ===== Chrome / Edge / Safari ===== */
#app::-webkit-scrollbar {
    width: var(--sbw, 12px);
}

#app::-webkit-scrollbar-track {
    background: #fff;
}

#app::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 6px;
    border: 2px solid #fff;
}

/* ===== Firefox ===== */
/* Firefox � force always-visible white track */
#app {
    background-color: #fff;
    scrollbar-width: thin;
    scrollbar-color: #888 #ffffff;
}
.no-mobile {
display:none;
}

@-moz-document url-prefix() {
    #app {
        scrollbar-width: thin;
        padding-right: var(--sbw, 12px);
        scrollbar-color: #888 #ffffff !important;
    }
}

/* Global scrollbars (fallback when NOT inside #app) */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #fff;
}

::-webkit-scrollbar-thumb {
    background: #3388ff;
    border-radius: 6px;
    border: 2px solid #fff;
}

/* Firefox global fallback */
* {
    scrollbar-width: thin;
    scrollbar-color: #3388ff #fff;
}



#main-header.header-hidden {
    transform: translateY(-105%);
}

/* Mobile header adjustments */
@media (max-width: 768px) {
    #main-header {
        padding-top: env(safe-area-inset-top);
    }
}

/* ==========================================
   HEADER NAVIGATION - RESPONSIVE LAYOUT
   ========================================== */

/* Base navigation spacing and styling */
#main-header nav {
    gap: 0.25rem;
}

    /* Navigation item padding and font size */
    #main-header nav .group > a,
    #main-header nav .group > button {
        padding-left: 0.625rem;
        padding-right: 0.625rem;
        font-size: 0.9125rem;
        white-space: nowrap;
    }

    /* Adjust JOIN THE CAMPAIGN button spacing */
    #main-header nav > a[href*="join-the-campaign"],
    #main-header nav > div:last-child > a {
        margin-left: 0.25rem;
        padding-left: 0.875rem;
        padding-right: 0.875rem;
    }

/* Adjust header container to give more room */
#main-header .max-w-7xl {
    max-width: 90rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* BREAKPOINT 1: Mobile menu at 960px and below */
@media (max-width: 960px) {
    #main-header nav {
        display: none !important;
    }

    #mobile-menu-button {
        display: block !important;
    }

    .flex.logo {
        display: block !important;
    }

    #campaign-logo img {
        margin-top: 3px !important;
    }
}

/* Ensure mobile menu button is hidden above 960px */
@media (min-width: 961px) {
    #mobile-menu-button {
        display: none !important;
    }
}

/* BREAKPOINT 2: Increased padding on larger screens (1280px+) */
@media (min-width: 1280px) {
    #main-header nav .group > a,
    #main-header nav .group > button {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }

    #main-header nav > a[href*="join-the-campaign"],
    #main-header nav > div:last-child > a {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* BREAKPOINT 3: At 1480px and below - Move menu under logos */
@media (min-width: 961px) and (max-width: 1410px) {
    /* Header container - stack vertically */
    #main-header > div > div {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .flex.logo {
        margin: auto;
    }
    /* Logo section - keep side by side, full size */
    #main-header .flex.items-center.gap-4 {
        width: 100%;
        justify-content: flex-start;
        max-width: max-content;
        margin: auto;
    }

    #main-header .h-12,
    #main-header .md\:h-14 {
        height: 3rem;
    }

    #main-header .h-14,
    #main-header .md\:h-16 {
        height: 3.5rem;
    }

    /* Navigation - full width below logos */
    #main-header nav {
        width: 100%;
        justify-content: space-between;
        padding-left: 0;
        gap: 0.125rem;
        max-width: fit-content;
        margin: 20px auto 0px;
    }

        /* Tighter spacing for navigation items when in full-width mode */
        #main-header nav .group > a,
        #main-header nav .group > button {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            font-size: 0.875rem;
        }

        /* Adjust JOIN button margin */
        #main-header nav > div:last-child > a {
            margin-left: auto;
        }
}

/* BREAKPOINT 4: Between 1481px and 1580px - Shrink logos, normal layout */
@media (min-width: 1411px) and (max-width: 1580px) {
    #main-header .h-12 {
        height: 2.5rem;
    }

    #main-header .h-14 {
        height: 3rem;
    }

    #main-header .md\:h-14 {
        height: 2.5rem;
    }

    #main-header .md\:h-16 {
        height: 3rem;
    }
}
/* Hide specific rows on laptop/tablet ONLY (not on large desktop) */
@media (min-width: 768px) and (max-width: 1024px) {
    .hidden-desktop {
        display: none !important;
    }
}
/* BREAKPOINT 5: Large desktops (1581px+) - Full size everything */
@media (min-width: 1581px) {
    #main-header .h-12 {
        height: 3rem;
    }

    #main-header .h-14 {
        height: 3.5rem;
    }

    #main-header .md\:h-14 {
        height: 3.5rem;
    }

    #main-header .md\:h-16 {
        height: 4rem;
    }
}

/* ==========================================
   MOBILE MENU STYLING - SLIDE DOWN VERSION
   ========================================== */

/* Mobile menu slides down from header */
#mobile-menu {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

    /* When menu is open */
    #mobile-menu.menu-open {
        max-height: calc(100vh - var(--header-height, 80px)) !important;
    }

/* Mobile menu items */
.mobile-menu-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.75rem;
}

    .mobile-menu-item:last-of-type {
        border-bottom: none;
    }

    /* Mobile menu parent links */
    .mobile-menu-item > div > a,
    .mobile-menu-item > a {
        text-decoration: none;
        display: block;
    }

/* Mobile menu toggle buttons */
.mobile-menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

/* Submenu styling */
.mobile-submenu {
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

    .mobile-submenu.hidden {
        max-height: 0;
        display: block;
        opacity: 0;
    }

    .mobile-submenu:not(.hidden) {
        max-height: 500px;
        opacity: 1;
    }

/* Arrow rotation animation */
.mobile-menu-toggle svg {
    transition: transform 0.3s ease;
}

    .mobile-menu-toggle svg.rotate-180 {
        transform: rotate(180deg);
    }

/* Submenu links */
.mobile-submenu a {
    font-size: 0.9375rem;
    text-decoration: none;
}

/* Prevent body scroll when mobile menu is open */
body.mobile-menu-open {
    overflow: hidden;
}

/* ==========================================
   HAMBURGER TO X ANIMATION - PRECISE VERSION
   ========================================== */
#mobile-menu.menu-open nav {
    display: block !important;
}

#mobile-menu-button {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    /* Smooth transitions for all lines */
    #mobile-menu-button svg {
        overflow: visible;
    }

        #mobile-menu-button svg path {
            transition: all 0.35s cubic-bezier(0.65, 0.05, 0.36, 1);
            transform-origin: 24px 24px; /* Center of the 24x24 viewBox */
        }

    /* Hamburger state (default) */
    #mobile-menu-button .hamburger-top {
        transform: translate(0, 0) rotate(0deg);
    }

    #mobile-menu-button .hamburger-middle {
        opacity: 1;
        transform: scale(1);
    }

    #mobile-menu-button .hamburger-bottom {
        transform: translate(0, 0) rotate(0deg);
    }

    /* X state (menu open) */
    #mobile-menu-button.menu-open .hamburger-top {
        transform: translate(12px, -8px) rotate(-45deg);
    }

    #mobile-menu-button.menu-open .hamburger-middle {
        opacity: 0;
        transform: scale(0.8);
    }

    #mobile-menu-button.menu-open .hamburger-bottom {
        transform: translate(-5px, 0px) rotate(45deg);
    }

/* ==========================================
   SNAP SCROLLING
   ========================================== */
.snap-container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
}

/* Disabled snap state for footer transition */
#app.snap-disabled {
    scroll-snap-type: none;
    transition: scroll-snap-type 0.3s ease;
}

.snap-section {
    scroll-snap-align: start;
}

@media (max-width: 768px) {
    .snap-container {
        scroll-snap-type: none !important;
    }

    .snap-section {
        scroll-snap-align: none !important;
    }
}

/* Disable snap on smaller mobile devices for better control */
@media (max-width: 480px) {
    .snap-container {
        scroll-snap-type: none;
    }
}

/* ==========================================
   NAVIGATION DOTS
   ========================================== */
.nav-dot {
    transition: all 0.3s ease;
    cursor: pointer;
    touch-action: manipulation;
}

    .nav-dot:hover .dot {
        transform: scale(1.3);
    }

    .nav-dot.active .dot {
        background-color: currentColor;
        transform: scale(1.2);
    }

    .nav-dot .dot {
        transition: all 0.3s ease;
    }

.nav-label {
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.nav-dot:hover .nav-label {
    opacity: 1;
    transform: translateX(0);
}

/* Hide navigation dots on mobile and tablets */
@media (max-width: 1024px) {
    #sectionNav {
        display: none !important;
    }

}

/* Adjust positioning on smaller desktop screens */
@media (min-width: 1025px) and (max-width: 1280px) {
    #sectionNav {
        left: 1rem;
    }
}

/* ==========================================
   HERO SECTION - SCROLL SCRUBBING
   ========================================== */
#hero01.hero-section {
    position: relative;
    min-height: 350vh;
    background-color: #030916;
}

#app #hero01-video {
    transition: all 1.5s ease, transform 1.5s ease;
}

.header-hidden ~ #app #hero01-video {
    margin-top: 0px !important;
    left: -5%;
    /*transform: scale(120%);*/
}


/* Pinned video background */
#hero01 .hero-graphic {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #030916;
}

#hero01 video {
    display: flex;
    width: 100%;
    height: auto;
    object-fit: cover;
    opacity: 1;
    visibility: visible;
    /*max-width: 1334px;*/
}

/* Text overlay container - PINNED */
#hero01 .hero-text {
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1;
    margin-top: -100vh;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Container for all text steps */
#hero01 .hero-stack {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Individual text steps */
#hero01 .hero-step {
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 100%;
    max-width: 1000px;
    text-align: center;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    padding: 0 2rem;
    opacity: 0;
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

    /* INTRO TEXT - Medium fade in, fast fade out */
    #hero01 .hero-step.step-intro.visible {
        opacity: 1;
        /* Slower fade-in when .visible is added */
        transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out;
    }

    /* REVEAL TEXT - Quick fade in, fast fade out */
    #hero01 .hero-step.step-reveal.visible {
        opacity: 1;
        /* Fade-in timing */
        transition: opacity 0.9s ease-out, transform 1.8s cubic-bezier(0.33, 0.01, 0, 1), font-size 0.8s ease-in-out;
    }

    /* When reveal becomes small - smooth size transition */
    #hero01 .hero-step.step-reveal.small {
        transition: opacity 0.9s ease-out, transform 1.8s cubic-bezier(0.33, 0.01, 0, 1), font-size 0.8s ease-in-out;
    }

    /* SUPPORT TEXT - Dramatic but fast entrance, fast exit */
    #hero01 .hero-step.step-support.visible {
        opacity: 1;
        /* Fade-in timing */
        transition: opacity 1.4s ease-out, transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Enhanced support text styling for extra impact */
    #hero01 .hero-step.step-support h1 {
        letter-spacing: 0.05em;
        font-weight: 700 !important;
    }


    #hero01 .hero-step h1, #hero01 .hero-step > p {
        font-family: 'dharma-gothic-m', 'Oswald', sans-serif !important;
        font-size: 130px;
        font-weight: 700 !important;
        line-height: 1;
        color: #fff;
        margin: 0;
        transition: all 1.5s ease;
        text-transform: uppercase;
    }

    /* Visible state */
    #hero01 .hero-step.visible {
        opacity: 1;
    }

    /* Sweep-up animation states */
    /*#hero01 .hero-step.step-reveal,
#hero01 .hero-step.step-support {
    transform: translate(-50%, 100vh);
}

#hero01 .hero-step.step-reveal.visible,
#hero01 .hero-step.step-support.visible {
    transform: translate(-50%, 0%);
}*/

    /* Small state for reveal text */
    #hero01 .hero-step.step-reveal.small h1, #hero01 .hero-step.step-reveal.small > p {
        /* font-size: 32px;*/
        opacity: 0;
    }

/* Group container for reveal + support */
#hero01 .hero-group {
    position: relative;
    width: 100%;
    height: 100%;
}

    #hero01 .hero-group .hero-step {
        position: absolute;
    }

/* Support text positioning */
/*#hero01 .hero-step.step-support {
    top: calc(50% + 80px);
}*/

#hero01 .hero-step.step-support.visible {
    transform: translate(-50%, 0%);
}

/* Down arrow positioning */
#heroDownArrow {
    z-index: 10;
}

/* ==========================================
   HERO SECTION - MOBILE RESPONSIVE
   ========================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    #videoContainer #videosWrapper video,
    #videoContainer #videosWrapper iframe {
        object-fit: contain !important;
        transform: scale(1.8);
        transform-origin: center;
        left: -35px;
    }

    #videoContainer {
        overflow-x: hidden;
    }
}
/* Tablets and below */
@media (max-width: 1024px) {
    #hero01 .hero-step {
        padding: 0 1.5rem;
    }

        #hero01 .hero-step h1, #hero01 .hero-step > p {
            font-size: 12vw;
        }

        #hero01 .hero-step.step-reveal.small h1, #hero01 .hero-step.step-reveal.small > p {
            font-size: 28px;
        }

        #hero01 .hero-step.step-support {
            top: calc(50% + 60px);
        }
}

@media (max-width: 960px) {
    #hero01-video {
        position: absolute;
        top: 88px;
    }

    #hero01 .hero-step {
        top: inherit !important;
        bottom: 19%;
    }
    .hero-step.step-support {
        top: inherit !important;
        bottom: 32% !important;
    }
}

/* Mobile landscape and portrait */
@media (max-width: 768px) {

    #main-header .max-w-9xl.mx-auto.px-10.py-9 {
        padding: 1rem;
    }

        #main-header .max-w-9xl.mx-auto.px-10.py-9 .flex.items-center.gap-4.flex-shrink-0 .block img {
            height: 2.5rem;
            width: auto;
        }

    #hero01.hero-section {
        min-height: 250vh; /* Slightly shorter scroll on mobile */
    }

    #hero01 .hero-step {
        padding: 0 1.25rem;
    }

        #hero01 .hero-step h1, #hero01 .hero-step > p {
            font-size: 40px;
            line-height: 1.2;
        }

        #hero01 .hero-step.step-reveal.small h1, #hero01 .hero-step.step-reveal.small > p {
            font-size: 24px;
        }

        #hero01 .hero-step.step-support {
            top: calc(50% + 50px);
        }

    #heroDownArrow {
        bottom: 1.5rem;
    }

        #heroDownArrow svg {
            width: 2.5rem;
            height: 2.5rem;
        }
}

/* Small mobile devices */
@media (max-width: 548px) {
    #hero01 .hero-step {
        padding: 0 1rem;
    }

        #hero01 .hero-step h1, #hero01 .hero-step > p {
            font-size: 15vw;
            line-height: 1.2;
        }

        #hero01 .hero-step.step-reveal.small h1, #hero01 .hero-step.step-reveal.small > p {
            font-size: 10vw;
        }

        #hero01 .hero-step.step-support {
            top: calc(50% + 12vw);
        }
}

/* Extra small devices */
@media (max-width: 375px) {
    #hero01 .hero-step {
        padding: 0 0.75rem;
    }

    #heroDownArrow svg {
        width: 2rem;
        height: 2rem;
    }
}

/* ==========================================
   LAST PINNED SECTION - BACKGROUND IMAGE
   ========================================== */

#last-pinned-section {
    background-image: url('https://www.whoi.edu/wp-content/uploads/2025/10/SpilhausPattern-all-simple_watercolor.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    position: relative;
}

    /* Optional: Add a dark overlay to ensure text readability */
    #last-pinned-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(3, 8, 21, 0.7); /* Adjust opacity (0.5) to control darkness */
        z-index: 0;
    }

    /* Ensure content stays above the overlay */
    #last-pinned-section > div {
        position: relative;
        z-index: 1;
    }

/* ==========================================
   CONTENT SECTIONS - MOBILE LAYOUT
   ========================================== */




/* Base section spacing */
.snap-section {
    min-height: 100vh;
}

@media (max-width: 1042px) {

    .md\:pl-28 {
        padding-left: 3rem !important;
        padding-right: 2rem !important;
    }
}


    /* Mobile optimizations for subtitle sections */
    @media (max-width: 768px) {
        .snap-section h2 {
            font-size: 2rem !important;
            line-height: 1.3 !important;
        }
        .hero-text .hero-step p {
            font-size: 15vw !important;
        }
        .snap-section p {
            font-size: 1.125rem !important;
        }
        #sectionsContainer p  .md\:text-base {
    font-size: 0.9rem;
    line-height: 1.5rem;
  }
        
    }

    @media (max-width: 480px) {
        .snap-section h2 {
            font-size: 1.75rem !important;
        }
        #last-pinned-section h2 {
            font-size: 2.5rem !important;
        }
        .snap-section p {
            font-size: 1rem !important;
        }
    }


    /* ==========================================
   MOBILE SECTIONS - SEPARATE MOBILE EXPERIENCE
   ========================================== */

    /* Hide mobile sections on desktop, show desktop sections */
    @media (min-width: 769px) {
        #mobile-sections-container {
            display: none !important;
        }
    }

    /* Show mobile sections on mobile, hide desktop sections */
    @media (max-width: 768px) {
        /* Hide desktop version */
        #videoContainer,
        #sectionsContainer {
            display: none !important;
        }

        /* Show mobile version */
        #mobile-sections-container {
            display: block;
        }

        .second-last {
            min-height: 60vh !important;
        }
    }

    /* Mobile Sections Container */
    .mobile-sections-wrapper {
        width: 100%;
        background: -webkit-linear-gradient(180deg,rgba(3, 9, 22, 1) 0%, rgba(4, 30, 66, 1) 13%, rgba(4, 30, 66, 1) 87%, rgba(3, 9, 22, 1) 100%);
        background: -moz-linear-gradient(180deg,rgba(3, 9, 22, 1) 0%, rgba(4, 30, 66, 1) 13%, rgba(4, 30, 66, 1) 87%, rgba(3, 9, 22, 1) 100%);
        background: linear-gradient(180deg,rgba(3, 9, 22, 1) 0%, rgba(4, 30, 66, 1) 13%, rgba(4, 30, 66, 1) 87%, rgba(3, 9, 22, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#030916", endColorstr="#030916", GradientType=0 );
        scroll-snap-type: none !important;
        overflow-y: visible;
        height: auto;
    }

    /* Individual Mobile Section - Full Screen */
    .mobile-section {
        width: 100%;
        display: flex;
        flex-direction: column;
        scroll-snap-align: none !important;
        position: relative;
        padding: 0;
        min-height: auto;
    }

    /* Mobile Video Container - Takes 55% of viewport */
    .mobile-video-container {
        width: 100%;
        position: relative;
        overflow: hidden;
        flex-shrink: 0;
    }

    /* Mobile Video Embed - 16:9 ratio maintained */
    .mobile-video-embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
        object-fit: cover;
    }

    .mobile-section:not(.mobile-section:first-child) {
        margin-top: 30px;
    }
    /* Mobile Content Card - Takes remaining 45% */
    .mobile-content-card {
        /*background: linear-gradient(180deg, #030916 0%, #041E42 100%);*/
        padding: 2.5rem 1.5rem 2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1rem;
        position: relative;
        /* Subtle animation on scroll */
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Content visible state */
    .mobile-section.visible .mobile-content-card {
        opacity: 1;
        transform: translateY(0);
    }

    /* Mobile Section Title */
    .mobile-section-title {
        font-size: 2.5rem;
        font-weight: 700;
        line-height: 1.1;
        color: #fff;
        margin: 0 0 0.75rem 0;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    /* Mobile Section Text */
    .mobile-section-text {
        font-family: 'TideSans', 'Red Hat Display', sans-serif;
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.9);
        margin: 0 0 0.5rem 0;
    }

        .mobile-section-text:last-child {
            margin-bottom: 0;
        }



    /* ==========================================
   MOBILE SECTIONS - RESPONSIVE ADJUSTMENTS
   ========================================== */


    /* Small mobile devices */
    @media (max-width: 480px) {
        .mobile-section.visible .mobile-video-container {
            min-height: 200px;
        }

        .video-wrapper {
            width: 75%;
            max-width: 500px;
            margin: 0 auto;
            position: relative;
            padding-top: 135.78%;
            border-radius: 20px;
            overflow: hidden;
        }

            .video-wrapper iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: none;
                border-radius: 20px;
                --tw-ring-offset-color: none !important;
                --tw-ring-color: none !important;
            }



        .mobile-video-container {
        }

        .mobile-content-card {
        }

        .mobile-content-card {
            padding: 2rem 1.25rem 1.75rem;
            gap: 0.875rem;
            text-align: center;
        }

        .mobile-section-title {
            font-size: 9vw;
            margin-bottom: 0.625rem;
            text-align: center;
        }

        .mobile-section-text {
            font-size: 0.9375rem;
            line-height: 1.45;
        }

        .mobile-sections-wrapper {
            scroll-snap-type: none;
            overflow-y: initial;
        }
    }

    /* Very small devices */
    @media (max-width: 375px) {
        .mobile-video-container {
        }

        .mobile-content-card {
            padding: 1.75rem 1rem 1.5rem;
        }

        .mobile-section-title {
            font-size: 2.5rem;
        }

        .mobile-section-text {
            font-size: 0.875rem;
        }
    }

    /* Landscape mobile orientation */
    @media (max-width: 768px) and (orientation: landscape) {
        .mobile-section {
            min-height: auto;
            height: auto;
        }

        .mobile-video-container {
            height: 70vh;
        }

        .mobile-content-card {
            padding: 1.5rem 1.25rem;
            gap: 0.75rem;
            margin-top: 15vh;
        }

        .mobile-section-title {
            font-size: 2.5rem;
            text-align: center;
        }

        .mobile-section-text {
            font-size: 0.875rem;
            line-height: 1.4;
            text-align: center;
        }
    }

    /* ==========================================
   MOBILE SECTIONS - SCROLL ENHANCEMENTS
   ========================================== */

    /* Smooth scroll for mobile sections */
    .mobile-sections-wrapper {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* Progress indicator dots (optional) */
    .mobile-section-indicator {
        position: fixed;
        bottom: 1.5rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 100;
        display: flex;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: rgba(3, 8, 21, 0.8);
        backdrop-filter: blur(10px);
        border-radius: 50px;
    }

    .mobile-section-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transition: all 0.3s ease;
    }

        .mobile-section-dot.active {
            background: #18C5BF;
            width: 24px;
            border-radius: 4px;
        }


    /* ==========================================
   HERO VIDEO - MOBILE SCALING
   ========================================== */

    @media (max-width: 768px) {
        /* Custom scrollbar for modal */
        .modal-container::-webkit-scrollbar {
            width: inherit;
        }

        .modal-container::-webkit-scrollbar-track {
            background: inherit;
            border-radius: inherit;
        }

        .modal-container::-webkit-scrollbar-thumb {
            background: inherit;
            border-radius: inherit;
        }

            .modal-container::-webkit-scrollbar-thumb:hover {
                background: inherit;
            }
        /* Hero video container - allow scaling */
        #hero01 .hero-graphic {
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden; /* Ensure scaled video doesn't overflow */
        }

        /* Video element - enable smooth scaling */
        #hero01 video {
            transform-origin: center center;
            transition: transform 0.1s linear; /* Smooth scaling with scroll */
            will-change: transform; /* Optimize performance */
        }

        /* Optional: Slightly adjust initial positioning for better framing */
        #hero01 .hero-graphic video {
            object-fit: contain; /* Ensure entire video is visible */
        }
    }


    /* ==========================================
   VIDEO CONTAINER - RESPONSIVE
   ========================================== */
    #videoContainer {
        transition: opacity 0.7s ease;
        z-index: 0;
    }

    /* Stack videos on mobile - they're embedded in each section */
    @media (max-width: 768px) {
        #videoContainer {
            display: none !important; /* Hide desktop video container on mobile */
        }
    }

    /* ==========================================
   VIDEO & TEXT CONTAINER - LAPTOP/TABLET OPTIMIZATION
   ========================================== */

    /* Tablets and small laptops (768px to 1299px) - Give more space to text */
    @media (min-width: 768px) and (max-width: 1299px) {
        #videoContainer {
            width: 50% !important; /* Reduce video to 45% */
        }

        #sectionsContainer {
            width: 50% !important; /* Increase text to 55% */
        }

            #sectionsContainer h2.md\:text-\[3\.25rem\] {
                font-size: 2.5rem;
            }
    }




    /* ==========================================
   SECTIONS CONTAINER - RESPONSIVE
   ========================================== */
    #sectionsContainer {
        width: 100%;
    }

    @media (min-width: 768px) {
        #sectionsContainer {
            width: 40%; /* md:w-2/5 */
        }
    }

    /* Adjust padding for mobile sections */
    @media (max-width: 768px) {
        #sectionsContainer .max-w-5xl {
            padding-left: 1.5rem !important;
            padding-right: 1.5rem !important;
        }
    }

    @media (max-width: 480px) {
        #sectionsContainer .max-w-5xl {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }
    }

    /* ==========================================
   MOBILE VIDEO EMBEDS
   ========================================== */
    @media (max-width: 768px) {
        .md\:hidden {
            display: block !important;
        }

        /* Mobile video container styling */
        #sectionsContainer video,
        #sectionsContainer iframe {
            border-radius: 1rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
    }

    /* ==========================================
   TYPOGRAPHY - MOBILE SCALING
   ========================================== */

    /* Section titles */
    @media (max-width: 1024px) {
        #sectionsContainer h2 {
            font-size: 2.4rem !important;
        }
    }

    @media (max-width: 768px) {
        #sectionsContainer h2 {
            font-size: 2.25rem !important;
            margin-bottom: 1rem !important;
        }

        #sectionsContainer .text-xl,
        #sectionsContainer .text-2xl {
            font-size: 1.125rem !important;
        }
    }

    @media (max-width: 480px) {
        #sectionsContainer h2 {
            font-size: 1.875rem !important;
        }

        #sectionsContainer .text-lg {
            font-size: 1rem !important;
        }

        .down-arrow {
            left: 45% !important;
        }
    }

    /* ==========================================
   BUTTONS & INTERACTIVE ELEMENTS
   ========================================== */
    .fl-button {
        display: inline-block;
        padding: 0.75rem 1.5rem;
        margin-top: 1rem;
        background-color: #041E42;
        color: white;
        text-decoration: none;
        border-radius: 0.5rem;
        transition: background-color 0.3s ease;
        touch-action: manipulation;
    }

        .fl-button .fl-button-text {
            font-size: 16px;
            line-height: 1;
            top: -1px;
            position: relative;
        }

    .fl-button {
        padding: 13px 30px 15px 30px !important;
    }

    a.bg-blue {
        background-color: #00a9e0;
        border-radius: 50px;
    }

    .fl-button.text-drkblue {
        color: #041e42;
    }

    .fl-button.rounded-lg {
        border-radius: 50px;
    }

    .fl-button:hover {
        background-color: #052956;
    }

#sectionsContainer button, .creditsCTA {
    background: transparent;
    font-weight: 400;
    font-size: 16px;
    padding: 0pc;
    color: #1BD6D0;
    text-transform: uppercase;
    cursor: pointer;
}

        #sectionsContainer button i, .creditsCTA i, .fl-button .fl-button-icon {
            display: inline-block;
            /* ensure transform applies correctly */
        }

        #sectionsContainer button:hover i, .creditsCTA:hover i, .fl-button:hover .fl-button-icon {
            animation: bounceBall 0.7s cubic-bezier(.25,.1,.25,1) forwards;
        }

    .creditsCTA {
        position: absolute;
        bottom: 10px;
        left: 0;
        right: 0;
    }

    @keyframes bounceBall {
        0% {
            transform: translateX(0);
        }

        30% {
            transform: translateX(12px);
        }
        /* max right */
        50% {
            transform: translateX(0);
        }
        /* fall back */
        70% {
            transform: translateX(6px);
        }
        /* first bounce */
        85% {
            transform: translateX(0);
        }
        /* settle */
        95% {
            transform: translateX(3px);
        }
        /* second bounce */
        100% {
            transform: translateX(0);
        }
        /* final reset */
    }


    /* Mobile button adjustments */
    @media (max-width: 768px) {
        .fl-button {
            padding: 0.625rem 1.25rem;
            font-size: 0.9375rem;
            width: 100%;
            text-align: center;
            display: block;
            max-width: 300px;
            margin-left: auto;
            margin-right: auto;
        }
    }

    /* ==========================================
   FOOTER - MOBILE OPTIMIZATION
   ========================================== */
    @media (max-width: 768px) {
        footer .grid {
            gap: 2rem !important;
        }

        footer h3,
        footer h4 {
            font-size: 1rem !important;
            margin-bottom: 0.75rem !important;
        }

        footer .text-sm {
            font-size: 0.875rem !important;
        }

        footer .space-y-2 > * + * {
            margin-top: 0.5rem !important;
        }
    }

    @media (max-width: 480px) {
        .credits-section {
            width: 100%;
            max-width: 78vw;
        }

        .credit-name {
            font-size: 0.738rem;
        }

        .credit-role {
            font-size: 0.6rem;
        }

        footer img {
            height: 3rem !important;
        }

        .socia_media a img {
            width: 100% !important;
            height: 25px !important;
        }

        footer .space-y-2 > * + * {
            margin-top: 0.375rem !important;
        }
    }

    /* ==========================================
   SPACING & LAYOUT UTILITIES
   ========================================== */

    /* Consistent section spacing */
    @media (max-width: 768px) {
        .space-y-8 > * + * {
            margin-top: 1.5rem !important;
        }
    }

    /* Safe area insets for notched devices */
    @supports (padding: env(safe-area-inset-top)) {
        body {
            padding-top: env(safe-area-inset-top);
        }

        #app {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }

    /* ==========================================
   PERFORMANCE OPTIMIZATIONS
   ========================================== */

    /* Use GPU acceleration for animations */
    #hero01 .hero-step,
    #videoContainer,
    .nav-dot,
    #main-header {
        will-change: transform, opacity;
    }

    #videoContainer {
        background-color: #030916;
    }
    /* Disable animations on very low-end devices */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* ==========================================
   BACK TO TOP BUTTON
   ========================================== */
    #backToTop {
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

        #backToTop.visible {
            opacity: 1;
            visibility: visible;
        }

        #backToTop:active {
            transform: scale(0.95);
        }

    /* Mobile optimizations */
    @media (max-width: 768px) {
        #backToTop {
            bottom: 1.5rem;
            right: 1.5rem;
            width: 3rem;
            height: 3rem;
        }

            #backToTop svg {
                width: 1.5rem;
                height: 1.5rem;
            }
    }

    /* Extra small devices */
    @media (max-width: 480px) {
        #backToTop {
            bottom: 1rem;
            right: 1rem;
        }
    }

    /* Ensure button doesn't interfere with footer content */
    @media (max-height: 600px) {
        #backToTop {
            bottom: 1rem;
        }
    }

    /* ==========================================
   MODAL SYSTEM
   ========================================== */

    /* Modal Overlay - Hidden by default */
    .modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 9999;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
            display: flex;
        }

    /* Backdrop with blur effect */
    .modal-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(3, 8, 21, 0.85);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    /* Modal Container */
    .modal-container {
        position: relative;
        width: 100%;
        max-width: 1000px;
        max-height: 90vh;
        overflow-y: auto;
        transform: scale(0.95) translateY(20px);
        transition: transform 0.3s ease;
    }

    #modal-credits .modal-container {
        max-width: 900px;
    }

    .modal-overlay:not(#modal-credits) .modal-content {
        overflow-y: inherit !important;
    }

    .modal-content {
        overflow-y: scroll;
        max-height: 80vh;
        border-radius: 1rem;
    }

    .modal-overlay.active .modal-container {
        transform: scale(1) translateY(0);
    }

    /* Modal Content */
    .modal-content .modal-body {
        position: relative;
        background: black;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    }

    #modal-credits .modal-content .modal-body {
        background: white;
    }


    /* Close Button */
    .modal-close {
        position: absolute;
        top: -1rem;
        right: -1rem;
        z-index: 10;
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
        border: none;
        border-radius: 50%;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: all 0.2s ease;
        color: #374151;
    }

        .modal-close:hover {
            background: #f3f4f6;
            transform: scale(1.1);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
        }

        .modal-close:active {
            transform: scale(0.95);
        }

    /* Modal Header */
    .modal-header {
        padding: 2rem 2rem 1.5rem;
        background: #1BD6D0;
        color: #030916;
    }

    .modal-title {
        font-size: 1.875rem;
        font-weight: 700;
        line-height: 1.2;
        margin: 0 0 0.5rem 0;
        text-align: center;
        color: #030916;
    }

    .modal-subtitle {
        font-size: 1.125rem;
        font-weight: 300;
        opacity: 0.9;
        margin: 0;
    }

    /* Modal Body */
    #modal-credits .modal-body {
        padding: 2rem;
    }

    /* Video Wrapper with 16:9 aspect ratio */
    .modal-video-wrapper {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        background: #000;
        border-radius: 0.5rem;
        overflow: hidden;
        margin-bottom: 1.5rem;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
    }

    .modal-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* Text Content */
    .modal-text {
        line-height: 1.6;
    }

    .text-ltblue {
        color: #49A6DA !important;
    }


    /* Modal Footer */
    .modal-footer {
        padding: 1.5rem 2rem 2rem;
        display: flex;
        gap: 1rem;
        justify-content: flex-end;
        background: #f9fafb;
        border-top: 1px solid #e5e7eb;
    }


    /* Modal Buttons */
    .modal-button {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
        font-weight: 500;
        border-radius: 0.5rem;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-block;
        text-align: center;
    }

    .modal-button-primary {
        background: #041E42;
        color: white;
    }

        .modal-button-primary:hover {
            background: #052956;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(4, 30, 66, 0.3);
        }

    .modal-button-secondary {
        background: white;
        color: #374151;
        border: 2px solid #e5e7eb;
    }

        .modal-button-secondary:hover {
            background: #f9fafb;
            border-color: #d1d5db;
        }

    .modal-button:active {
        transform: translateY(0);
    }

    /* ==========================================
   MODAL RESPONSIVE DESIGN
   ========================================== */

    /* Tablets */
    @media (max-width: 768px) {
        .modal-container {
            max-width: 95%;
            max-height: 85vh;
        }

        .modal-header {
            padding: 1.5rem 1.5rem 1.25rem;
        }

        .modal-title {
            font-size: 1.5rem;
        }

        .modal-subtitle {
            font-size: 1rem;
        }

        .modal-body {
            padding: 1.5rem;
        }

        .modal-footer {
            padding: 1rem 1.5rem 1.5rem;
            flex-direction: column;
        }

        .modal-button {
            width: 100%;
        }
    }

    /* Mobile */
    @media (max-width: 480px) {
        .modal-overlay {
            padding: 0.5rem;
        }

        .modal-content .modal-body {
            border-radius: 0.75rem;
        }

        .modal-header {
            padding: 1.25rem 1rem 1rem;
        }

        .modal-title {
            font-size: 1.25rem;
        }

        .modal-subtitle {
            font-size: 0.9375rem;
        }

        .modal-body {
            padding: 1rem;
        }

        .modal-close {
            top: 0.75rem;
            right: 0.75rem;
            width: 2rem;
            height: 2rem;
        }

            .modal-close svg {
                width: 1.25rem;
                height: 1.25rem;
            }
    }

    /* Prevent body scroll when modal is open */
    body.modal-open {
        overflow: hidden;
    }

    /* Smooth scrolling for modal content */
    .modal-container {
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }

        /* Custom scrollbar for modal */
        .modal-container::-webkit-scrollbar {
            width: 8px;
        }

        .modal-container::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 0 1rem 1rem 0;
        }

        .modal-container::-webkit-scrollbar-thumb {
            background: #cbd5e0;
            border-radius: 4px;
        }

            .modal-container::-webkit-scrollbar-thumb:hover {
                background: #a0aec0;
            }

    /* ==========================================
   CREDITS MODAL SPECIFIC STYLES
   ========================================== */

    /* Credits Introduction */
    .credits-intro {
        max-width: 900px;
        margin: 0 auto;
    }

    /* Credits Grid Layout */
    .credits-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        margin-top: 2rem;
    }

    /* Individual Credits Section */
    .credits-section {
        background: #f9fafb;
        border-radius: 0.75rem;
        padding: 1.5rem;
        border: 1px solid #e5e7eb;
    }

    /* Section Title */
    .credits-section-title {
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #041E42;
        margin: 0 0 1rem 0;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid #041E42;
    }

    /* Credits List */
    .credits-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    /* Individual Credit Item */
    .credit-item {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    /* Credit Name */
    .credit-name {
        font-size: 1rem;
        font-weight: 500;
        color: #1f2937;
        line-height: 1.3;
    }

    /* Credit Role */
    .credit-role {
        font-size: 0.875rem;
        color: #6b7280;
        line-height: 1.4;
        font-style: italic;
    }

    /* Credits Footer Note */
    .credits-footer-note {
        margin-top: 2rem;
    }

    /* ==========================================
   CREDITS MODAL RESPONSIVE
   ========================================== */

    /* Tablets */
    @media (max-width: 1024px) {
        .credits-grid {
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }
    }

    /* Mobile */
    @media (max-width: 768px) {
        .credits-grid {
            gap: 1.25rem;
        }

        .credits-section {
            padding: 1.25rem;
        }

        .credits-section-title {
            font-size: 0.9375rem;
        }

        .credit-name {
            font-size: 0.9375rem;
        }

        .credit-role {
            font-size: 0.8125rem;
        }
    }

    @media (max-width: 480px) {
        .credits-intro p {
            font-size: 0.9375rem;
        }

        .credits-section {
            padding: 1rem;
        }

        .credits-list {
            gap: 0.875rem;
        }
    }