/* ---------------ROOT VARIABLES--------------- */
:root {
    /* Base variables */
    --panel-width: 320px;
    --bg: #151515;
    --accent: #000;
    
    /* Responsive variables */
    --spacing-scale: 1;
    --font-scale: 1;
    --base-unit: 1rem;
    
    /* Responsive base sizes */
    --container-width: min(90%, 1400px);
    --section-padding: clamp(2rem, 5vw, 6rem);
    --grid-gap: clamp(1rem, 2vw, 3rem);
    
    /* Typography */
    --h1-size: clamp(2.5rem, 5vw, 4rem);
    --h2-size: clamp(2rem, 4vw, 3rem);
    --h3-size: clamp(1.75rem, 3vw, 2.5rem);
    --body-size: clamp(1rem, 1.5vw, 1.25rem);
    
    /* Component Sizes */
    --card-width: clamp(280px, 30vw, 400px);
    --image-max-height: clamp(300px, 50vh, 600px);
    
    /* Hamburger positioning */
    --hamburger-top: 55px;
    --hamburger-right: 55px;
    --hamburger-size: 56px;
    
    /* Navigation orbit */
    --label-orbit-radius: 100px;
}

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

/* Smooth transitions between breakpoints */
* {
    transition: font-size 0.2s ease, padding 0.2s ease, margin 0.2s ease;
}

/* Prevent layout shift */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-padding-top: 20px;
    height: 100%;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: calc(1rem * var(--font-scale));
    line-height: 1.5;
    overflow-x: hidden;
    background: var(--bg);
    background-image: url("../ASSETS/IMGS/Background.webp");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #fff;
    position: relative;
}

/* Ensure sections don't overlap and footer stays at bottom */
body > section {
    flex-shrink: 0;
}

body > footer {
    margin-top: auto;
    flex-shrink: 0;
}

/* ---------------RESPONSIVE UTILITIES--------------- */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 calc(20px * var(--spacing-scale));
}

/* ---------------TYPOGRAPHY--------------- */
h1 { 
    font-size: calc(2.5rem * var(--font-scale)); 
    line-height: 1.2;
}
h2 { 
    font-size: calc(2rem * var(--font-scale)); 
    line-height: 1.3;
}
h3 { 
    font-size: calc(1.75rem * var(--font-scale)); 
    line-height: 1.4;
}
h4 { 
    font-size: calc(1.5rem * var(--font-scale)); 
    line-height: 1.4;
}
p { 
    font-size: calc(1rem * var(--font-scale)); 
    line-height: 1.6;
}

/* ===============================================
   MOBILE SPLASH SCREEN STYLES
   =============================================== */

.mobile-splash-screen {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    z-index: 99999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-splash-screen.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.splash-content {
    text-align: center;
    padding: 40px 30px;
    max-width: 500px;
    width: 100%;
    animation: fadeInUp 0.6s ease-out;
}

.splash-icon {
    color: #ffffff;
    margin-bottom: 30px;
    animation: float 3s ease-in-out infinite;
}

.splash-title {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: 20px;
    line-height: 1.2;
}

.splash-message {
    color: #b8b8b8;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    margin-bottom: 40px;
}

.splash-divider {
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ffffff33, transparent);
    margin: 40px auto;
}

.splash-contact {
    margin-bottom: 30px;
}

.splash-contact h2 {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.contact-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 300;
    text-decoration: none;
    padding: 12px 20px;
    margin: 10px auto;
    border: 1px solid #ffffff33;
    border-radius: 8px;
    transition: all 0.3s ease;
    max-width: 320px;
}

.contact-link:hover {
    background: #ffffff11;
    border-color: #ffffff66;
    transform: translateY(-2px);
}

.contact-link svg {
    color: #ffffff;
    flex-shrink: 0;
}

.splash-socials {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 25px;
}

.social-link {
    display: block;
    transition: transform 0.3s ease;
}

.social-link:hover {
    transform: scale(1.15);
}

.social-link img {
    width: 32px;
    height: 32px;
}

.splash-continue-btn {
    background: transparent;
    color: #888;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 300;
    padding: 10px 24px;
    border: 1px solid #ffffff22;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 30px;
    letter-spacing: 0.5px;
}

.splash-continue-btn:hover {
    background: #ffffff11;
    color: #aaa;
    border-color: #ffffff33;
}

/* Splash Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}


/* ===============================================
   NAVIGATION MENU (HAMBURGER)
   =============================================== */

.hamburger {
    position: fixed;
    top: var(--hamburger-top);
    right: var(--hamburger-right);
    width: var(--hamburger-size);
    height: var(--hamburger-size);
    border-radius: 50%;
    border: 1px solid rgb(255, 255, 255);
    background: #ffffff00;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1001;
    transition: transform 0.3s ease;
}

.hamburger:hover {
    transform: scale(1.05);
}

.hamburger:focus {
    outline: 1px solid #ffffff5e;
    outline-offset: 10px;
}

.hamburger .bar {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(22px * var(--spacing-scale));
    height: calc(2px * var(--spacing-scale));
    background: #ffffff;
    border-radius: 2px;
    transform-origin: center center;
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.18s ease;
    display: block;
}

.hamburger .bar-middle {
    transform: translate(-50%, -50%);
}

.hamburger .bar-top {
    transform: translate(-50%, -50%) translateY(calc(-8px * var(--spacing-scale)));
}

.hamburger .bar-bottom {
    transform: translate(-50%, -50%) translateY(calc(8px * var(--spacing-scale)));
}

/* Transform to X when open */
.hamburger.open .bar-top {
    transform: translate(-50%, -50%) rotate(45deg);
}

.hamburger.open .bar-middle {
    opacity: 0;
    transform: translate(-50%, -50%);
}

.hamburger.open .bar-bottom {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Side Panel */
.side-panel {
    position: fixed;
    top: calc(200px * var(--spacing-scale));
    right: 0;
    height: 100vh;
    width: var(--panel-width);
    max-width: 100%;
    background: #ffffff19;
    backdrop-filter: blur(10px);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    transition: transform 0.36s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.28s ease;
    z-index: 1000;
    padding: calc(48px * var(--spacing-scale)) calc(28px * var(--spacing-scale));
    transform: translateX(110%);
    opacity: 0;
    pointer-events: none;
}

.side-panel[aria-hidden="false"] {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.menu-list {
    list-style: none;
    margin: 4px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: calc(18px * var(--spacing-scale));
}

.menu-list a {
    display: inline-block;
    text-decoration: none;
    color: #ffffff;
    font-weight: 300;
    font-size: calc(20px * var(--font-scale));
    font-family: 'Montserrat', sans-serif;
    transition: transform 0.18s ease, font-weight 0.18s ease, color 0.18s ease;
}

.menu-list a:hover,
.menu-list a:focus {
    transform: scale(1.12);
    font-weight: 500;
}

.menu-list a.active,
.menu-list a[aria-current="page"] {
    transform: scale(1.12);
    font-weight: 500;
}

/* Button label (menu / close) */
.button-label {
    position: fixed;
    top: calc(85px * var(--spacing-scale));
    right: calc(40px * var(--spacing-scale));
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: calc(16px * var(--font-scale));
    color: #ffffff;
    cursor: default;
    z-index: 1001;
    pointer-events: none;
    transform-origin: center center;
    transform: rotate(0deg) translateX(calc(-1 * var(--label-orbit-radius))) translateY(-50%);
    transition: transform 0.48s cubic-bezier(0.2, 0.9, 0.2, 1), color 0.18s ease, font-weight 0.18s ease;
}

.button-label.open {
    font-weight: 500;
    transform: rotate(-90deg) translateX(calc(-70px * var(--spacing-scale))) translateY(-50%);
}


/* ===============================================
   PAGE NAVIGATION (SIDE DOTS)
   =============================================== */

.main-menu {
    padding-left: 5%;
}

.nav-container {
    position: fixed;
    left: calc(80px * var(--spacing-scale));
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
}

.nav-line {
    position: absolute;
    left: calc(2px * var(--spacing-scale));
    top: calc(40px * var(--spacing-scale));
    bottom: 0;
    width: calc(2px * var(--spacing-scale));
    height: calc(260px * var(--spacing-scale));
    border-left: calc(2px * var(--spacing-scale)) dashed #666;
    background: transparent;
}

.nav-bullet-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(6px * var(--spacing-scale));
    height: calc(20px * var(--spacing-scale));
    background: white;
    border-radius: calc(3px * var(--spacing-scale));
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

.nav-list {
    list-style: none;
    position: relative;
    padding-left: 0;
}

.nav-item {
    display: flex;
    align-items: center;
    margin: calc(30px * var(--spacing-scale)) 0;
    cursor: pointer;
}

.nav-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
    cursor: pointer;
    transition: all 0.3s ease;
    padding-left: calc(30px * var(--spacing-scale));
}

.nav-text {
    color: #666;
    font-size: calc(14px * var(--font-scale));
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-item.active .nav-text {
    color: white;
    font-size: calc(18px * var(--font-scale));
}

.nav-item:hover .nav-text {
    color: #aaa;
}


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

.social-icons {
    position: fixed;
    display: flex;
    gap: 0;
    align-items: center;
    justify-content: flex-start;
    top: 92%;
    left: 1%;
    z-index: 1004;
}

.social-icons a {
    display: block;
    transition: transform 0.3s ease;
}

.social-icons img {
    width: 70%;
    height: auto;
    max-width: 450px;
}

.social-icons a:hover {
    transform: scale(1.1);
}


/* ===============================================
   SECTIONS (BASE)
   =============================================== */

.section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    padding: 0;
    overflow: visible;
}


/* ===============================================
   SECTION 1 (HEADER)
   =============================================== */

.novaheader-section {
    background: none;
    padding: 0 0;
    min-height: 100vh;
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.header-container {
    position: absolute;
    left: calc(50% - 9rem);
    top: 60%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: min(90%, 1400px);
    z-index: 2;
    pointer-events: none;
}

.header-container h2 {
    opacity: 0;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: calc(1.1rem * var(--font-scale));
    font-weight: 100;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.header-container h2.show {
    opacity: 1;
    transform: translateY(0);
    animation: glitchText 0.3s ease 0.5s;
}

@keyframes glitchText {
    0% { transform: translateX(0); }
    25% { transform: translateX(-3px); text-shadow: -2px 0 rgb(0, 255, 242), 2px 0 cyan; }
    50% { transform: translateX(3px); text-shadow: 2px 0 rgb(0, 255, 242), -2px 0 cyan; }
    75% { transform: translateX(-2px); text-shadow: -1px 0 rgb(0, 255, 242), 1px 0 cyan; }
    100% { transform: translateX(0); text-shadow: none; }
}

#section1 video {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* ===============================================
   SECTION 2 (OVERVIEW)
   =============================================== */

.nova-overview-section {
    position: relative;
    min-height: 140vh;
    height: auto;
    width: 100%;
    overflow: visible;
    margin-bottom: 0;
    padding-bottom: 0;
}

.future-container {
    position: absolute;
    top: clamp(8%, 12%, 15%);
    left: calc(clamp(30%, 34%, 38%) + 3rem);
    text-align: left;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
}

.future-container h1 {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: calc(5rem * var(--font-scale));
    letter-spacing: calc(3px * var(--font-scale));
    line-height: 0.85;
    white-space: nowrap;
    display: inline-block;
    transform: scaleY(1.5);
    transform-origin: center;
}

.nova-overview-container {
    position: absolute;
    top: clamp(30%, 35%, 40%);
    left: calc(clamp(30%, 34%, 38%) + 3rem);
    text-align: left;
    width: clamp(45%, 50%, 60%);
    max-width: 800px;
}

.nova-overview-container p {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: calc(16px * var(--font-scale));
    font-weight: 300;
    line-height: 1.6;
}

.skills-container {
    position: absolute;
    top: clamp(3rem, 3.6rem, 5vh);
    right: clamp(5%, 10%, 15%);
    text-align: left;
    width: auto;
}

.skills-container h2 {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: calc(1rem * var(--font-scale));
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: calc(0.5rem * var(--spacing-scale));
}

.future-rectangle-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 70%;
    max-width: calc(1400px * var(--spacing-scale));
    height: auto;
    z-index: -1;
    overflow: visible;
    margin: 0;
    padding: 0;
}

.future-rectangle-container img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: right center;
    margin: 0;
    padding: 0;
}

/* ---------------TAB BUTTONS--------------- */

.tab-buttons-container {
    position: absolute;
    top: 72vh;
    left: calc(34% - 2rem);
    display: flex;
    gap: 2vw;
    width: auto;
    max-width: 90vw;
    z-index: 10;
}

.tab-button {
    position: relative;
    width: clamp(160px, 12vw, 200px);
    height: clamp(65px, 5vw, 80px);
    background: none;
    border: none;
    cursor: pointer;
    overflow: visible;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* The actual button image */
.tab-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../ASSETS/IMGS/Proj1/TabButton.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: filter 0.3s ease, transform 0.3s ease;
    z-index: 0;
}

/* Glow effect on hover */
.tab-button:hover::before {
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.6)) 
            drop-shadow(0 0 15px rgba(0, 255, 255, 0.4))
            brightness(1.1);
    transform: scale(1.02);
}

/* Active state glow */
.tab-button.active::before {
    filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.8)) 
            drop-shadow(0 0 14px rgba(0, 255, 255, 0.5))
            brightness(1.10);
}

.tab-text {
    position: relative;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: calc(0.875rem * var(--font-scale));
    font-weight: 500;
    letter-spacing: calc(1.5px * var(--font-scale));
    text-transform: uppercase;
    z-index: 1;
    transition: all 0.3s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

.tab-button:hover .tab-text {
    color: rgba(0, 255, 255, 1);
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8);
}

.tab-button.active .tab-text {
    color: rgba(0, 255, 255, 1);
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.8);
}

.tab-content-container {
    position: absolute;
    top: 70vh;
    left: calc(34% - 2rem);
    width: 60%;
    min-height: auto;
    height: auto;
    z-index: 9;
    margin-bottom: 0;
    padding: 2vh 0;
}

.tab-content {
    display: none;
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

.tab-content.active {
    display: flex;
    gap: 3rem;
    align-items: center;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-text {
    flex: 1;
    position: relative;
    min-height: auto;
    height: auto;
    width: 100%;
}

/* ---------------RESPONSIVE ADJUSTMENTS FOR TABS--------------- */

@media screen and (max-width: 1600px) {
    .tab-button {
        width: clamp(170px, 12vw, 180px);
        height: clamp(65px, 5.5vw, 70px);
    }

    .tab-text {
        font-size: clamp(13px, 1vw, 14px);
    }

    .tab-buttons-container {
        gap: clamp(1.2rem, 1.5vw, 1.5rem);
    }

    .tab-content-container {
        width: clamp(58%, 60%, 62%);
        left: calc(34% - 2rem);
    }
}

@media screen and (max-width: 1440px) {
    .header-container {
        left: calc(50% - 8rem);
    }

    /* Position future-container similar to 2560px but scaled for 1440px */
    .future-container {
        top: 5.5rem;
        left: calc(30% + 3.5rem);
        height: auto;
        align-items: flex-start;
    }

    .future-container h1 {
        line-height: 1;
        font-size: calc(5rem * 1.1);
    }

    /* Move nova-overview-container similar to 2560px but scaled */
    .nova-overview-container {
        top: calc(35% - 4.5rem);
        left: calc(30% + 3.5rem);
    }

    /* Increase nova-overview-container p font size */
    .nova-overview-container p {
        font-size: calc(16px * 1.15);
    }

    /* Move skills-container down */
    .skills-container {
        top: calc(3.6rem + 0.5rem);
    }
}

@media screen and (max-width: 1366px) {
    .tab-button {
        width: clamp(150px, 12vw, 160px);
        height: clamp(60px, 5.5vw, 65px);
    }

    .tab-text {
        font-size: clamp(12px, 1vw, 13px);
        letter-spacing: clamp(0.8px, 0.1vw, 1px);
    }

    .tab-content-container {
        width: clamp(55%, 60%, 65%);
        left: calc(34% - 2rem);
    }
}

@media screen and (max-width: 1024px) {
    .tab-buttons-container,
    .tab-content-container {
        display: none; /* Hide on mobile, shown by splash screen instead */
    }

    .header-container {
        left: calc(50% - 7rem);
        top: 95vh;
    }
}

/* 1441px to 1920px range (includes 1536px) */
@media screen and (min-width: 1441px) and (max-width: 1920px) {
    /* Tab content container positioning for 1536 view */
    .tab-content-container {
        top: calc(70vh + 3rem);
    }

    /* Research header container reveal active positioning */
    .research-header-container.reveal.active {
        transform: translateY(10rem);
    }

    /* Grid container 2 reveal active positioning */
    .grid-container2.reveal.active {
        transform: translateY(10rem);
    }

    /* Persona instruct container positioning */
    .persona-instruct-container {
        top: calc(-11rem + 10rem);
    }

    /* Image gallery container reveal active positioning */
    .image-gallery-container.reveal.active {
        transform: translateY(10rem);
    }

    /* Nova materials section - add padding at top and center content */
    .nova-materials-section {
        padding-top: 3rem;
        margin-left: auto;
        margin-right: auto;
    }

    /* Material container - center with equal margins */
    .material-container {
        left: 0;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;
    }

    /* Nova wireframes section - add margins to center content */
    .nova-wireframes-section {
        padding-top: 5rem;
        padding-left: 0;
        padding-right: 0;
        margin-left: 16rem;
        margin-right: auto;
    }

    /* Gallery header - remove margins and center */
    .gallery-header.reveal.active {
        margin-top: 5rem;
        margin-left: 5rem;
        margin-right: auto;
        margin-bottom: 0;
        padding-bottom: 3rem;
    }

    /* Expandable gallery - remove margins and center */
    .expandable-gallery.reveal.active {
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
    }

    /* Slider images - move to the right */
    .slider-images {
        margin-left: 15rem;
    }

    /* Features container - bring into view on left side */
    .features-container.reveal.active {
        left: 29%;
    }

    /* Nova app section - add margins and padding */
    .nova-app-section {
        margin-left: 10rem;
        margin-right: 4rem;
        padding-top: 5rem;
    }

    /* Nova onboarding section - add margins and padding */
    .nova-onboarding-section {
        margin-left: 5rem;
        margin-right: 4rem;
        padding-top: 9rem;
    }

    /* Onboarding container - center content */
    .onboarding-container {
        margin-left: auto;
        margin-right: auto;
    }

    /* Phone images - center in section */
    .phone-images {
        left: 0;
        justify-content: center;
    }
}

.grid-container {
    position: relative;
    margin-left: 0;
    margin-top: 0;
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: clamp(5%, 7%, 9%);
    width: 100%;
    max-width: clamp(1200px, 90vw, 1400px);
}

.column-item1 h2 {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: calc(18px * var(--font-scale));
    font-weight: 100;
}

.column-item2 p {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: calc(16px * var(--font-scale));
    font-weight: 300;
    line-height: 1.5;
}

.column-item3 h2 {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: calc(18px * var(--font-scale));
    font-weight: 100;
}

.column-item4 p {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: calc(16px * var(--font-scale));
    font-weight: 300;
    line-height: 1.5;
}

.research-header-container {
    position: relative;
    margin-top: clamp(-18%, -15%, -12%);
    margin-left: clamp(-3rem, -2.5rem, -2rem);
    margin-bottom: clamp(12vh, 14vh, 16vh);
    text-align: left;
    width: auto;
    z-index: 1;
}

.research-header-container h1 {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: calc(107px * var(--font-scale));
    letter-spacing: 4.64px;
    line-height: 0.85;
    white-space: nowrap;
    display: inline-block;
    transform: scaleY(1.5);
}

.grid-container2 {
    position: relative;
    margin-top: clamp(-32%, -29%, -26%);
    margin-left: clamp(-12%, -10%, -8%);
    margin-right: clamp(3%, 5%, 7%);
    margin-bottom: clamp(10vh, 12vh, 14vh);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: clamp(3rem, 4vw, 4rem);
    width: clamp(60vw, 63vw, 70vw);
    max-width: clamp(1200px, 90vw, 1400px);
    align-items: start;
}

.column-item5,
.column-item6,
.column-item7 {
    display: flex;
    flex-direction: column;
}

.column-item5 h2,
.column-item6 h2,
.column-item7 h2 {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: calc(18px * var(--font-scale));
    font-weight: 100;
    margin-top: 2rem;   /* small, sensible top spacing */
    margin-bottom: 0.6rem;
    margin-left: 0.99rem;
    z-index: 1;
}

.column-item5 p,
.column-item6 p,
.column-item7 p {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: calc(16px * var(--font-scale));
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    margin-top: 0;
    margin-left: 2rem;
    z-index: 1;
}

.column-item5 img,
.column-item6 img,
.column-item7 img {
    width: clamp(180px, 20vw, 220px);
    max-width: 100%;
    height: auto;
    display: block;
    margin-top: 1rem;      /* small spacing above the image */
    margin-left: 0;
    margin-right: 0;
}

/*Persona's*/
.image-gallery-container {
    display: flex;
    margin-left: 0;
    margin-top: clamp(-8rem, -6vw, -6rem);
    gap: clamp(1rem, 2vw, 2rem);
    flex-wrap: wrap; /* Responsive: wrap on smaller screens */
    justify-content: center;
}

.gallery-item {
    position: relative;
    width: clamp(180px, 15vw, 237px);
    height: clamp(180px, 15vw, 237px);
    overflow: hidden;
    cursor: pointer;
    border-radius: 30px; /* rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

/* Make research images sit behind the text inside each column */
.column-item5,
.column-item6,
.column-item7 {
    position: relative; /* create stacking context */
    padding-top: 14rem; /* reserve vertical space for the image (adjust as needed) */
    overflow: visible;
}

.column-item5 img,
.column-item6 img,
.column-item7 img {
    position: absolute;
    top: 12rem;
    left: 2.5rem; /* align image left edge with text block indentation */
    transform: none;
    width: calc(120% - 2rem); /* match the text block width (accounts for 2rem left margin) */
    max-width: none;
    height: auto;
    z-index: 0; /* behind text */
    pointer-events: none;
}

.column-item5 h2,
.column-item6 h2,
.column-item7 h2,
.column-item5 p,
.column-item6 p,
.column-item7 p {
    position: relative; /* keep text in flow and above the image */
    z-index: 2;
    margin-top: 0.5rem; /* small spacing so text doesn't sit flush on the image */
    text-shadow: 0 6px 18px rgba(0,0,0,0.6); /* improves legibility over image */
    left: 13%;
}

/* Responsive fallbacks: on smaller screens stack naturally and remove absolute positioning */
@media (max-width: 1024px) {
    .column-item5,
    .column-item6,
    .column-item7 {
        padding-top: 10rem;
    }
    .column-item5 img,
    .column-item6 img,
    .column-item7 img {
        width: calc(100% - 2rem);
        max-width: none;
    }
}

@media (max-width: 768px) {
    .column-item5,
    .column-item6,
    .column-item7 {
        padding-top: 0; /* no reserved space on mobile */
    }
    .column-item5 img,
    .column-item6 img,
    .column-item7 img {
        position: relative; /* return image to normal flow */
        transform: none;
        left: auto;
        display: block;
        margin: 0 0 1rem 0;
        width: 100%;
        max-width: 100%;
    }
    .column-item5 h2,
    .column-item6 h2,
    .column-item7 h2,
    .column-item5 p,
    .column-item6 p,
    .column-item7 p {
        text-shadow: none;
    }
}

.gallery-item.middle-item {
    transform: translateY(-40px);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* Hover: Slightly zoom image */
.gallery-item:hover img {
    transform: scale(1.05);
}

/* Overlay (hidden by default) */
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75); /* Grey opaque overlay */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: clamp(0.75rem, 2vw, 1.5rem);
    opacity: 0;
    transition: opacity 0.3s ease;
    text-align: center;
    overflow: hidden;
}

/* Show overlay on hover */
.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.persona-instruct-container {
    position: relative;
    top: clamp(-13rem, -11rem, -9rem);
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(0.5rem, 1vw, 0.7rem);
    color: #ffffff;
    text-align: center;
    z-index: 10;
    width: max-content;
}

/* Overlay text styling */
.gallery-overlay h2 {
    color: #ffffff;
    font-family: 'Montserrat Medium', sans-serif;
    font-size: clamp(0.7rem, 1.2vw, 1rem);
    font-weight: 500;
    margin-bottom: 1rem;
    transform: translateY(20px);
    transition: transform 0.3s ease 0.1s;
    line-height: 1.2;
}

.gallery-overlay p {
    color: #e0e0e0;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(0.55rem, 0.9vw, 0.75rem);
    font-weight: 300;
    line-height: 1;
    transform: translateY(20px);
    transition: transform 0.3s ease 0.15s;
    max-height: 100%;
    overflow-y: auto;
    /* Hide scrollbar but keep scrolling functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.gallery-overlay p::-webkit-scrollbar {
    display: none;
}

/* Animate text on hover */
.gallery-item:hover .gallery-overlay h2,
.gallery-item:hover .gallery-overlay p {
    transform: translateY(0);
}

/* Scale effect on hover */
.gallery-item:hover {
    transform: translateY(-5px) scale(1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Keep middle item elevated even on hover */
.gallery-item.middle-item:hover {
    transform: translateY(-45px) scale(1);
}


/* ===============================================
   SECTION 3 (MATERIALS)
   =============================================== */

.nova-materials-section {
    position: relative;
    min-height: auto;
    height: auto;
    padding: 0;
    margin: 0 60px 0 80px;
    display: block;
    transition: transform 0.5s ease, margin-top 0.5s ease;
}

.nova-materials-section.tab3-active {
    transform: translateY(100vh);
}

/* -------Materials------ */

.material-container {
    position: relative;
    left: 10%;
    width: 60%;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.material-container img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    z-index: 0;
}


/* ===============================================
   SECTION 4 (WIREFRAMES)
   =============================================== */

.nova-wireframes-section {
    padding-top: 10vh;
    padding-bottom: 10vh;
    min-height: 100vh;
    justify-content: flex-start;
    align-items: flex-start;
}

/* Gallery Section Container */
.expandable-gallery-section {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 3rem 0;
    background: #000000;
}

/* Gallery Header */
.gallery-header {
    max-width: 768px;
    text-align: center;
    margin-top: calc(10rem * var(--spacing-scale));
    margin-left: calc(15rem * var(--spacing-scale));
    padding: 0 1rem;
    margin-bottom: 2.5rem;
}

.gallery-header h1 {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: calc(130px * var(--font-scale));
    letter-spacing: 4.64px;
    line-height: 0.85;
    white-space: nowrap;
    display: inline-block;
    transform: scaleY(1.5);
}

/* Expandable Gallery Container */
.expandable-gallery {
    display: flex;
    margin-left: clamp(8rem, 14vw, 18rem);
    margin-top: 7rem;
    align-items: center;
    gap: clamp(0.3rem, 0.5vw, 0.5rem);
    height: clamp(300px, 40vh, 500px);
    width: clamp(60%, 70%, 80%);
    max-width: 1200px;
    padding: 0 1rem;
}

/* Gallery Items - Compressed State (Image 1) */
.gallery-wireframe {
    position: relative;
    flex: 1; /* Equal distribution when not hovered */
    min-width: 80px; /* Minimum compressed width */
    height: 500px;
    border-radius: 1rem;
    overflow: hidden;
    transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    background-color: #e0e0e0;
}

/* Hover Effect - Expand to reveal full image (Image 2) */
.gallery-wireframe:hover {
    flex: 4; /* Expands to 4x width, revealing full image */
}

/* Compress non-hovered items when one is hovered */
.expandable-gallery:hover .gallery-wireframe:not(:hover) {
    flex: 0.5; /* Compress to half, showing just a strip */
}

/* Gallery Images - START ZOOMED IN */
.gallery-wireframe img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: scale(2);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ZOOM OUT on hover to reveal full image */
.gallery-wireframe:hover img {
    transform: scale(1);
}

/* Media Queries */
@media screen and (max-width: 1024px) {
    .expandable-gallery {
        height: 400px;
        max-width: 900px;
    }
    
    .gallery-wireframe {
        height: 400px;
    }
    
    .gallery-header h1 {
        font-size: 2rem;
    }
}

@media screen and (max-width: 768px) {
    .expandable-gallery {
        flex-direction: column;
        height: auto;
        gap: 0.5rem;
        max-width: 100%;
    }
    
    .gallery-wireframe {
        width: 100%;
        height: 150px;
        min-height: 150px;
        flex: none;
    }
    
    .gallery-wireframe:hover {
        height: 300px;
        flex: none;
    }
    
    .expandable-gallery:hover .gallery-wireframe:not(:hover) {
        height: 100px;
        flex: none;
    }
    
    .gallery-header h1 {
        font-size: 1.75rem;
    }

    /* Mobile - images also start zoomed in */
    .gallery-wireframe img {
        transform: scale(1.5);
    }
    
    .gallery-wireframe:hover img {
        transform: scale(1);
    }
}

/* Optional: Smooth entrance animation */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gallery-wireframe {
    animation: slideIn 0.6s ease-out backwards;
}

.gallery-wireframe:nth-child(1) { animation-delay: 0.05s; }
.gallery-wireframe:nth-child(2) { animation-delay: 0.1s; }
.gallery-wireframe:nth-child(3) { animation-delay: 0.15s; }
.gallery-wireframe:nth-child(4) { animation-delay: 0.2s; }
.gallery-wireframe:nth-child(5) { animation-delay: 0.25s; }
.gallery-wireframe:nth-child(6) { animation-delay: 0.3s; }

/* ===============================================
   SECTION 5 (FEATURES)
   =============================================== */

/* Section 5 - Slider Container */
.nova-features-section {
    position: relative;
    min-height: 40vh;  /* Further reduced */
    height: auto;      /* Let it shrink to fit content */
    margin-bottom: -70vh;
    padding-bottom: 0;
    overflow: hidden;  /* Prevent content overflow */
}

.slider-container {
    display: flex;
    top: -80vh;
    left: 10rem;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 60vh;  /* Reduced from 100vh */
    position: relative;
    margin-bottom: 0;
}

/* Left Side: Slider Controls */
.slider-controls {
    position: relative;
    top: 12rem;
    left: 35%;
    width: 20%;
    max-width: 500px;
    z-index: 10;
}

.slider-title {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-size:3rem;
    font-weight: 400;
    letter-spacing: 3px;
    margin-bottom: 1rem;
    transform: scaleY(1.5);
    transform-origin: left;
}

.slider-description {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 3rem;
}

/* Custom Slider */
.custom-slider {
    position: relative;
    width: 100%;
    height: 60px;
    margin: 2rem 0;
}

/* Slider Track */
.slider-track {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%);
    border-radius: 2px;
}

/* Slider Progress */
.slider-progress {
    position: absolute;
    top: 50%;
    left: 0;
    height: 4px;
    background: rgba(0, 255, 255, 0.8);
    transform: translateY(-50%);
    border-radius: 2px;
    width: 0%;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

/* Slider Points (4 stops) */
.slider-point {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1;
}

.slider-point:nth-child(3) { left: 0%; }
.slider-point:nth-child(4) { left: 33.33%; }
.slider-point:nth-child(5) { left: 66.66%; }
.slider-point:nth-child(6) { left: 100%; }

.slider-point:hover {
    background: rgba(0, 255, 255, 0.5);
    border-color: rgba(0, 255, 255, 0.8);
    transform: translate(-50%, -50%) scale(1.2);
}

.slider-point.active {
    background: rgba(0, 255, 255, 1);
    border-color: rgba(0, 255, 255, 1);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.7);
}

/* Point Labels */
.point-label {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 1px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.slider-point:hover .point-label,
.slider-point.active .point-label {
    opacity: 1;
}

/* Draggable Handle */
.slider-handle {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    background: rgba(0, 255, 255, 1);
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    cursor: grab;
    z-index: 2;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.8), 
                0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.1s ease, box-shadow 0.3s ease;
}

.slider-handle:active {
    cursor: grabbing;
    box-shadow: 0 0 30px rgba(0, 255, 255, 1), 
                0 6px 16px rgba(0, 0, 0, 0.4);
}

.slider-handle:hover {
    transform: translate(-50%, -50%) scale(1.15);
}

/* Image Labels Below Slider */
.image-labels {
    display: flex;
    justify-content: space-between;
    margin-top: -2rem;
    padding: 0 10px;
}

.image-labels .label {
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
}

.image-labels .label:hover {
    color: rgba(255, 255, 255, 0.7);
}

.image-labels .label.active {
    color: rgba(0, 255, 255, 1);
    font-weight: 500;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

/* Nova Color Images */
.slider-images {
    position: absolute;
    left: 5%;
    top: 75%;
    transform: translateY(-50%);
    width: 100%;
    height: 130%;
    z-index: 1;
}

.slider-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    pointer-events: none;
}

.slider-image.active {
    opacity: 1;
    z-index: 2;
}

/* Fade transition effect */
.slider-image.fading-out {
    opacity: 0;
    z-index: 1;
}

.slider-image.fading-in {
    opacity: 1;
    z-index: 2;
}

/* Responsive Design */
@media screen and (max-width: 1366px) {
    .slider-controls {
        width: 45%;
    }
    
    .slider-images {
        right: -30%;
        width: 55%;
    }
}

@media screen and (max-width: 1024px) {
    .slider-container {
        flex-direction: column;
        justify-content: center;
    }
    
    .slider-controls {
        left: 0;
        width: 80%;
        margin-bottom: 2rem;
    }
    
    .slider-images {
        position: relative;
        right: 0;
        width: 80%;
        height: 50vh;
        transform: none;
    }
    
    .slider-title {
        font-size: 3rem;
    }
}

.features-container {
    position: relative;
    left: -20%;
    margin-top: 6rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    z-index: 20; /* above slider */
    pointer-events: none; /* Click-through to slider below */
    margin-bottom: 5vh;
}

.feature-badge {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.8;
    z-index: 0;
    animation: pulseGlow 3s ease-in-out infinite;
}

.badge-content {
    position: relative;
    text-align: center;
    z-index: 1;
}

.badge-content h2 {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
}

.badge-content p {
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: 1px;
}

/* Pulse animation for glow */
@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.05);
    }
}

/* Stagger animation delays */
.feature-badge:nth-child(1) .badge-glow { animation-delay: 0s; }
.feature-badge:nth-child(2) .badge-glow { animation-delay: 0.3s; }
.feature-badge:nth-child(3) .badge-glow { animation-delay: 0.6s; }

/* Responsive positioning */
@media screen and (max-width: 1366px) {
    .features-badges {
        top: 8%;
        left: 8%;
        gap: 3rem;
    }
    
    .feature-badge {
        width: 150px;
        height: 150px;
    }
    
    .badge-content h2 {
        font-size: 1.6rem;
    }
}

@media screen and (max-width: 1024px) {
    .features-badges {
        top: 5%;
        left: 50%;
        transform: translateX(-50%);
        gap: 2rem;
        justify-content: center;
    }
    
    .feature-badge {
        width: 120px;
        height: 120px;
    }
    
    .badge-content h2 {
        font-size: 1.4rem;
    }
    
    .badge-content p {
        font-size: 0.8rem;
    }
}

@media screen and (max-width: 768px) {
    .features-badges {
        flex-direction: column;
        gap: 1.5rem;
        top: 3%;
    }
    
    .feature-badge {
        width: 100px;
        height: 100px;
    }
}

/* Spacer */
.section-spacer {
    height: calc(7rem * var(--spacing-scale));
    background: transparent;
    width: 100%;
}

/* ===============================================
   SECTION 6 (NOVA APP)
   =============================================== */
.nova-app-section {
    background: none;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 6rem;
    margin-top: 0; /* Added top margin */
}

.split-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    max-width: 1400px;
    width: 90%;
    margin: 0 auto;
    padding: 1rem 2rem;
}

.split-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.split-image img {
    width: 100%;
    max-width: 300px;
    height: auto;
    object-fit: contain;
}

.split-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.split-text h2 {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-size: calc(130px * var(--font-scale));
    font-weight: 400;
    letter-spacing: 6px;
    margin: 0;
    transform: scaleY(1.5);
    transform-origin: left;
}

.split-text p {
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.8;
    margin: 0;
    max-width: 600px;
}

/* Responsive Design */
@media screen and (max-width: 1024px) {
    .section6 {
        padding: 8rem 0 4rem 0;
        margin-top: 6rem;
    }
    
    .split-layout {
        gap: 3rem;
    }
    
    .split-text h2 {
        font-size: 3rem;
    }
    
    .split-text p {
        font-size: 1rem;
    }
}

@media screen and (max-width: 768px) {
    .section6 {
        padding: 5rem 0 3rem 0;
        margin-top: 4rem;
    }
    
    .split-layout {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }
    
    .split-image img {
        max-width: 300px;
    }
    
    .split-text h2 {
        font-size: 2.5rem;
        transform-origin: center;
    }
    
    .split-text p {
        max-width: 100%;
    }
}

/* ===============================================
   SECTION 7 (BREAK IT DOWN)
   =========================================== */

.nova-breakdown-section {
    background: none;
    margin-top: 0;
}

.split-layout2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    max-width: 1400px;
    width: 90%;
    margin: 0 auto;
    padding: 2rem 2rem;
    margin-top: -5rem;
}

.split-image2 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.split-image2 img {
    width: 100%;
    max-width: 400px;
    height: auto;
    object-fit: contain;
}

.split-image3 img {
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: contain;
}

.breakdown-container {
    display: flex;
    align-items: left;
    justify-content: left;
    gap: 5rem;
    max-width: 1400px;
    width: 90%;
    margin: 0 auto;
    padding: 10rem 2rem;
    margin-top: -5rem;
}

.breakdown-container h2 {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-size: calc(130px * var(--font-scale));
    font-weight: 400;
    letter-spacing: 6px;
    margin: 0;
    margin-left: 10rem;
    transform: scaleY(1.5);
    transform-origin: left;
}

/* Responsive Design */
@media screen and (max-width: 1024px) {
    .section7 {
        margin-top: -8rem;
    }
    
    .breakdown-container {
        margin-top: -5rem;
    }
    
    .split-layout2 {
        gap: 3rem;
        margin-top: -3rem;
    }
}

@media screen and (max-width: 768px) {
    .section7 {
        margin-top: -5rem;
    }
    
    .breakdown-container {
        margin-top: -3rem;
    }
    
    .split-layout2 {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
        margin-top: -2rem;
    }
    
    .split-image2 img {
        max-width: 300px;
    }
    
    .split-image3 img {
        max-width: 300px;
    }
}

/* ===============================================
   SECTION 8 (ONBOARDING)
   =============================================== */

.nova-onboarding-section {
    background: none;
}

/* ---------------ONBOARDING SECTION - TEXT WITH OVERLAPPING IMAGES--------------- */

.onboarding-section {
    position: relative;
    background: #000;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    padding: 3rem 2rem;
}

/* Container */
.onboarding-container {
    position: relative;
    width: 100%;
    max-width: 1400px;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

/* Large Background Text */
.background-text {
    position: absolute;
    top: auto;
    bottom: 0%;
    left: 14%;
    transform: translateX(-50%);
    font-family: "Bebas Neue", sans-serif;
    font-size: 16rem;
    font-weight: 700;
    letter-spacing: 20px;
    color: rgba(255, 255, 255, 0.771);
    margin: 0;
    white-space: nowrap;
    z-index: 1;
    user-select: none;
    pointer-events: none;
    transform: scaleY(1.5);
}

/* Phone Images Container */
.phone-images {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 6rem;
    gap: 2rem;
    z-index: 2;
    width: 100%;
    height: 100%;
    transform: translateY(-90px);
}

/* Individual Phone Items */
.phone-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
}

.phone-item img {
    height: 500px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
}

/* Left Phone - Slightly Tilted */
.phone-left {
    transform: rotate(-8deg) translateY(10px);
}

.phone-left:hover {
    transform: rotate(-8deg) translateY(-10px) scale(1.05);
}

/* Center Phone - Larger and Forward */
.phone-center {
    transform: scale(1.1) translateY(-20px);
    z-index: 3;
}

.phone-center:hover {
    transform: scale(1.15) translateY(-30px);
}

/* Right Phone - Slightly Tilted */
.phone-right {
    transform: rotate(8deg) translateY(10px);
}

.phone-right:hover {
    transform: rotate(8deg) translateY(-10px) scale(1.05);
}

/* Responsive Design */
@media screen and (max-width: 1200px) {
    .background-text {
        font-size: 10rem;
        letter-spacing: 15px;
    }
    
    .phone-item img {
        height: 400px;
    }
}

@media screen and (max-width: 900px) {
    .background-text {
        font-size: 8rem;
        letter-spacing: 10px;
    }
    
    .phone-images {
        gap: 1rem;
    }
    
    .phone-item img {
        height: 350px;
    }
}

@media screen and (max-width: 768px) {
    .onboarding-container {
        height: 500px;
    }
    
    .background-text {
        font-size: 5rem;
        letter-spacing: 5px;
        writing-mode: horizontal-tb;
    }
    
    .phone-images {
        flex-direction: row;
        gap: 0.5rem;
    }
    
    .phone-item img {
        height: 280px;
    }
    
    .phone-left,
    .phone-right {
        transform: rotate(0) translateY(0);
    }
    
    .phone-center {
        transform: scale(1.05) translateY(-10px);
    }
}

@media screen and (max-width: 480px) {
    .background-text {
        font-size: 3.5rem;
        letter-spacing: 3px;
    }
    
    .phone-item img {
        height: 200px;
    }
}

/* ------------------Section9-------------------- */

.features-showcase-section {
    background: none;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 0;
}

.features-showcase-container {
    position: relative;
    width: 90%;
    max-width: 1600px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
}

/* Left Side: Content Area */
.showcase-content {
    flex: 1;
    position: relative;
    min-height: 600px;
    width: 100%;
    max-width: 80%;
    padding-left: 76rem;
}

.showcase-item {
    position: absolute;
    top: 0;
    left: 8rem;
    /* keep the showcase item contained within the parent (.showcase-content)
       instead of stretching to the viewport */
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 2rem;
    align-items: center;
    padding-left: 6rem;
}

.showcase-item.active {
    opacity: 1;
    visibility: visible;
}

/* Layout 1: HOME PAGE (Title left, phone right) */
.showcase-item[data-showcase="1"] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

.showcase-text-left {
    grid-column: 1;
    margin-left: 5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-right: 1rem;
    z-index: 1;
}

/* container keeps a constant footprint in the grid/row */
.showcase-phone-single {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 360px;       /* reserve width for the phone/video */
  max-width: 100%;     /* responsive cap; adjust to layout */
  height: 510px;      /* reserve height so row doesn't expand */
  overflow: hidden;   /* hide any video overflow when transforming */
  position: relative; /* safe if you later absolutely position inner content */
  z-index: 0;
}

/* video fits inside container; scaling doesn't change container size */
.showcase-phone-video {
  width: auto;
  height: 250%;
  max-width: 250%;
  object-fit: contain;
  display: block;
  transform-origin: center center; /* safe for transforms */
  z-index: 0;
}

@media (max-width: 1024px) {
  .showcase-phone-single { width: 280px; height: 420px; }
  .showcase-phone-video { height: 100%; }
}
@media (max-width: 768px) {
  .showcase-phone-single { width: 100%; height: auto; }
  .showcase-phone-video { position: relative; height: 400px; width: auto; max-width: 100%; }
}

/* Layout 2 & 4: BIOSENSORS & LINK YOUR APPS*/
.showcase-item[data-showcase="2"] {
    grid-template-columns: 320px 1fr 480px;
    /* grid-template-rows: 1fr; */
    gap: 2rem;
}

/* Two-column layout for showcase item 4 */
.showcase-item[data-showcase="4"] {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.showcase-phone-left {
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 700px;
    max-width: 100%;
    height: 950px;
    overflow: hidden;
    position: relative;
    margin-left: 1rem;
    top:-10rem;
    z-index: 0;
}

.showcase-biosensor-video {
    width: auto;
    height: 85%;
    max-width: 100%;
    object-fit: contain;
    display: block;
    transform-origin: center center;
    z-index: 0;
    transform: scale(0.85);
}

.showcase-biosensor-video2 {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
    transform-origin: center center;
    z-index: 0;
}

/* Larger video container for showcase item 4 */
.showcase-item[data-showcase="4"] .showcase-phone-left {
    width: 100%;
    height: auto;
    min-height: 900px;
    max-height: 1400px;
    margin-left: 0;
}

/* Make the video itself larger */
.showcase-item[data-showcase="4"] .showcase-biosensor-video2 {
    width: 110%;
    height: auto;
    max-width: none;
    transform: scale(1.5);
}

.showcase-boxes-grid {
    grid-column: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1.5rem;
    margin-top:-20rem;
    padding: 0 2rem;
    z-index: 1;
}

.info-box {
    width: 150px;
    height: 150px;
    border-radius: 12px;
    transition: all 0.3s ease;
    z-index: 1;
}

.info-box:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(0, 255, 255, 0.4);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
}

.showcase-text-right {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-left: 0;
    margin-right: 12rem;
    margin-top:-20rem;
    z-index: 1;
}

/* Override for showcase item 4 - position text in right column */
.showcase-item[data-showcase="4"] .showcase-text-right {
    grid-column: 2;
    margin-right: 2rem;
    justify-content: center;
}

/* Hide boxes grid for showcase item 4 */
.showcase-item[data-showcase="4"] .showcase-boxes-grid {
    display: none;
}

/* Layout 3: AI INSIGHTS (Title top-left, phones center, text bottom-right) */
.showcase-item[data-showcase="3"] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
}

.showcase-item[data-showcase="3"] .showcase-text-left {
    grid-column: 1;
    grid-row: 1;
    padding-bottom: 0;
}

.showcase-phones-dual {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 380px;
    max-width: 100%;
    height: 530px;
    overflow: hidden;
    position:relative;
    gap: 3rem;
    margin-top: -3rem;
    padding-left: 1rem;
    z-index: 0;
}

.insights{
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    display: block;
    transform-origin: center center;
    z-index: 0;
}

.reports {
    height: 100%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
    transform: rotate(-8deg) translateY(-20px);
    transition: transform 0.3s ease;
}

.insights-left:hover {
    transform: rotate(-8deg) translateY(-30px) scale(1.05);
}

.reports-right {
    height: 450px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
    transform: rotate(8deg) translateY(20px);
    transition: transform 0.3s ease;
}

.reports-right:hover {
    transform: rotate(8deg) translateY(10px) scale(1.05);
}

.showcase-text-right-dual {
    grid-column: 2;
    grid-row: 1;
    padding-top: 5rem;
    padding-left: 2rem;
    padding-right: 5rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Typography */
.showcase-title {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-size: calc(60px * var(--font-scale));
    font-weight: 400;
    letter-spacing: 2px;
    margin: 0;
    top: -10rem;
    transform: scaleY(1.5);
    transform-origin: left;
    padding-right: 10rem;
}

.showcase-description {
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Montserrat', sans-serif;
    font-size: calc(16px * var(--font-scale));
    font-weight: 300;
    line-height: 1.5;
    margin: 0;
}

/* Right Side: Circle Buttons */
.showcase-buttons {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding-left: 2rem;
    padding-right: 4rem;
    z-index: 1;
}

.circle-btn {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(0, 255, 255, 0.1);
    border: 2px solid rgba(0, 255, 255, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    overflow: hidden;
}

.circle-btn:hover {
    background: rgba(0, 255, 255, 0.15);
    border-color: rgba(0, 255, 255, 0.6);
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
}

.circle-btn.active {
    background: rgba(0, 255, 255, 0.2);
    border-color: rgba(0, 255, 255, 0.8);
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.5);
}

.btn-number {
    position: relative;
    color: rgba(255, 255, 255, 0.7);
    font-family: "Bebas Neue", sans-serif;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 2px;
    z-index: 2;
    transition: all 0.3s ease;
}

.circle-btn:hover .btn-number,
.circle-btn.active .btn-number {
    color: rgba(0, 255, 255, 1);
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
}

/* Button Glow Effect */
.btn-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 50%;
    z-index: 1;
}

.circle-btn:hover .btn-glow,
.circle-btn.active .btn-glow {
    opacity: 1;
}

/* Responsive Design */
@media screen and (max-width: 1366px) {
    .showcase-title {
        font-size: 3rem;
    }
    
    .circle-btn {
        width: 80px;
        height: 80px;
    }
    
    .btn-number {
        font-size: 1.6rem;
    }
}

@media screen and (max-width: 1024px) {
    .features-showcase-container {
        flex-direction: column;
        gap: 3rem;
    }
    
    .showcase-buttons {
        flex-direction: row;
        padding-left: 0;
        gap: 2rem;
    }
    
    .showcase-item {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        position: relative;
    }
    
    .showcase-phone-single img,
    .showcase-phone-left img {
        height: 400px;
    }
}

@media screen and (max-width: 768px) {
    .showcase-title {
        font-size: 2rem;
        transform: scaleY(1.3);
    }
    
    .showcase-description {
        font-size: 0.85rem;
    }
    
    .showcase-phone-single img,
    .showcase-phone-left img {
        height: 300px;
    }
    
    .phone-tilted-left,
    .phone-tilted-right {
        height: 300px;
        transform: rotate(0) translateY(0);
    }
    
    .info-box {
        width: 100px;
        height: 100px;
    }
    
    .circle-btn {
        width: 60px;
        height: 60px;
    }
    
    .btn-number {
        font-size: 1.3rem;
    }
}

/* Section10 */

.image-grid-section {
    background: none;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
    margin-top: -5rem; /* Adjust spacing from section above*/
}

.image-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: clamp(1rem, 1.5vw, 1.5rem);
    width: clamp(75%, 80%, 85%);
    margin-left: clamp(8rem, 10vw, 14rem);
    max-width: 1400px;
    padding: clamp(1.5rem, 2vw, 2rem);
}

.grid-image-item {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /*Maintains consistent ratio */
    overflow: hidden;
    border-radius: 12px;
    border: 2px solid rgba(0, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.5);
    transition: all 0.4s ease;
    cursor: pointer;
}

.grid-image-item:hover {
    border-color: rgba(0, 255, 255, 0.6);
    transform: scale(1.02);
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.3);
}

.grid-image-item img,
.grid-image-item video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.4s ease;
}

.grid-image-item:hover img {
    transform: scale(1.05);
}

/* Overlay Effect */
.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(0, 255, 255, 0.1) 0%,
        transparent 50%,
        rgba(0, 255, 255, 0.1) 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.grid-image-item:hover .image-overlay {
    opacity: 1;
}

/* Glow Effect on Hover */
.overlay-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(
        circle,
        rgba(0, 255, 255, 0.2) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
}

.grid-image-item:hover .overlay-glow {
    opacity: 1;
}

/* Staggered Animation on Load */
.grid-image-item {
    opacity: 0;
    animation: gridFadeIn 0.6s ease-out forwards;
}

.grid-image-item:nth-child(1) { animation-delay: 0.1s; }
.grid-image-item:nth-child(2) { animation-delay: 0.2s; }
.grid-image-item:nth-child(3) { animation-delay: 0.3s; }
.grid-image-item:nth-child(4) { animation-delay: 0.4s; }

@keyframes gridFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media screen and (max-width: 1200px) {
    .image-grid-container {
        gap: 1rem;
        max-width: 1200px;
    }
}

@media screen and (max-width: 900px) {
    .image-grid-section {
        padding: 3rem 0;
    }
    
    .image-grid-container {
        gap: 0.75rem;
    }
}

@media screen and (max-width: 768px) {
    .image-grid-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 1rem;
    }
    
    .grid-image-item {
        aspect-ratio: 16 / 9;
    }
}

/* ---------------SECTION 11 VIDEO REVEAL--------------- */

.video-reveal-section {
    position: relative;
    background: #000;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6rem 0;
    overflow: hidden;
}

.video-reveal-container {
    position: relative;
    width: 100%;
    max-width: 1800px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-2%); /* Move slightly left */
}

/* Large Background Text */
.reveal-bg-text {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-family: "Bebas Neue", sans-serif;
    font-size: 12rem;
    font-weight: 700;
    letter-spacing: 20px;
    color: rgba(255, 255, 255, 0.08);
    margin: 0;
    white-space: nowrap;
    z-index: 1;
    user-select: none;
    pointer-events: none;
    line-height: 1;
}

/* Video Wrapper */
.reveal-video-wrapper {
    position: relative;
    width: 100%;
    max-width: clamp(800px, 70vw, 1000px);
    margin-left: auto;
    margin-right: clamp(5%, 9%, 12%);
    border-radius: clamp(15px, 1.5vw, 20px);
    overflow: hidden;
    border: clamp(2px, 0.2vw, 3px) solid rgba(0, 255, 255, 0.3);
    box-shadow: 0 clamp(15px, 2vw, 20px) clamp(40px, 5vw, 60px) rgba(0, 0, 0, 0.6);
    z-index: 2;
    transition: all 0.4s ease;
}

.reveal-video-wrapper:hover {
    border-color: rgba(0, 255, 255, 0.6);
    box-shadow: 0 clamp(20px, 3vw, 30px) clamp(60px, 7vw, 80px) rgba(0, 0, 0, 0.8),
                0 0 clamp(40px, 5vw, 60px) rgba(0, 255, 255, 0.3);
    transform: translateY(clamp(-8px, -1vw, -10px));
}

/* Video Element */
.reveal-video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Optional Video Overlay Effect */
.video-overlay-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(0, 255, 255, 0.05) 0%,
        transparent 50%,
        rgba(0, 255, 255, 0.05) 100%
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.reveal-video-wrapper:hover .video-overlay-effect {
    opacity: 1;
}

/* Entrance Animation */
.reveal-bg-text {
    animation: textSlideIn 1s ease-out;
}

.reveal-video-wrapper {
    animation: videoSlideIn 1s ease-out 0.3s backwards;
}

@keyframes textSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

@keyframes videoSlideIn {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive Design */
@media screen and (max-width: 1200px) {
    .reveal-bg-text {
        font-size: 9rem;
        letter-spacing: 15px;
    }
    
    .reveal-video-wrapper {
        width: 75%;
    }
}

@media screen and (max-width: 900px) {
    .reveal-bg-text {
        font-size: 6rem;
        letter-spacing: 10px;
    }
    
    .reveal-video-wrapper {
        width: 80%;
    }
}

@media screen and (max-width: 768px) {
    .video-reveal-section {
        padding: 4rem 0;
    }
    
    .reveal-bg-text {
        font-size: 4rem;
        letter-spacing: 5px;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin-bottom: 2rem;
        text-align: center;
    }
    
    .reveal-video-wrapper {
        width: 90%;
        margin: 0 auto;
    }
    
    .video-reveal-container {
        flex-direction: column;
    }
}

@media screen and (max-width: 480px) {
    .reveal-bg-text {
        font-size: 3rem;
        letter-spacing: 3px;
    }
    
    .reveal-video-wrapper {
        width: 95%;
        border-radius: 12px;
    }
}

/* ---------------SCROLL INDICATOR--------------- */

.scroll-indicator {
    position: fixed;
    bottom: calc(30px * var(--spacing-scale));
    left: 55%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
    z-index: 1001;
    width: auto;
    display: flex;
    justify-content: center;
}

.scroll-indicator img {
    width: calc(60px * var(--spacing-scale));
    max-width: calc(80px * var(--spacing-scale));
    height: auto;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}


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

.cyberpunk-footer {
    position: relative;
    width: 100%;
    background: rgba(26, 26, 26, 0.73); /* Dark grey, 73% opacity */
    backdrop-filter: blur(10px);
    border-top: 2px solid rgba(0, 255, 255, 0.3);
    overflow: hidden;
    margin-top: auto;
    flex-shrink: 0;
}

/* Glitch Overlay */
.footer-glitch-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    animation: footerGlitch 5s infinite;
    z-index: 1;
}

@keyframes footerGlitch {
    0%, 90%, 100% {
        opacity: 0;
    }
    91% {
        opacity: 0.1;
        transform: translateX(-2px);
        filter: hue-rotate(90deg);
    }
    92% {
        opacity: 0.2;
        transform: translateX(2px);
    }
    93% {
        opacity: 0;
        transform: translateX(0);
    }
}

/* Footer Container */
.footer-container {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 4rem 5%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4rem;
    z-index: 2;
}

/* Footer Brand Section */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-logo {
    color: #00ffff;
    font-family: "Bebas Neue", sans-serif;
    font-size: 2.5rem;
    font-weight: 400;
    letter-spacing: 4px;
    margin: 0;
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
    transform: scaleY(1.3);
    transform-origin: left;
}

.footer-tagline {
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 2px;
    margin: 0;
}

.footer-divider {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, 
        rgba(0, 255, 255, 0.8), 
        transparent
    );
    margin-top: 0.5rem;
}

/* Footer Links Section */
.footer-links {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.footer-heading {
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 2px;
    margin: 0;
    text-transform: uppercase;
}

.footer-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.footer-nav li a {
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 300;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    position: relative;
    padding-left: 15px;
}

.footer-nav li a::before {
    content: '▸';
    position: absolute;
    left: 0;
    opacity: 0;
    transition: all 0.3s ease;
    color: rgba(0, 255, 255, 0.8);
}

.footer-nav li a:hover {
    color: rgba(0, 255, 255, 1);
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    padding-left: 20px;
}

.footer-nav li a:hover::before {
    opacity: 1;
}

/* Footer Contact Section */
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.footer-contact-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-link {
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.link-icon {
    color: rgba(0, 255, 255, 0.6);
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.footer-link:hover {
    color: rgba(0, 255, 255, 1);
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.footer-link:hover .link-icon {
    color: rgba(0, 255, 255, 1);
    transform: translateX(3px);
}

/* Social Buttons */
.footer-socials {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.social-btn {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 8px;
    color: rgba(0, 255, 255, 0.7);
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-btn:hover {
    background: rgba(0, 255, 255, 0.2);
    border-color: rgba(0, 255, 255, 0.8);
    color: rgba(0, 255, 255, 1);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
    transform: translateY(-3px);
}

.social-btn svg {
    width: 24px;
    height: 24px;
}

/* Footer Bottom Bar */
.footer-bottom {
    position: relative;
    border-top: 1px solid rgba(0, 255, 255, 0.2);
    padding: 1.5rem 5%;
    z-index: 2;
}

.footer-bottom-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.copyright {
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: 1px;
    margin: 0;
}

/* Tech Badge */
.footer-tech-badge {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 4px;
}

.tech-text {
    color: rgba(0, 255, 255, 0.7);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 1px;
}

.tech-pulse {
    width: 8px;
    height: 8px;
    background: rgba(0, 255, 255, 0.8);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

/* Corner Accent */
.footer-corner-accent {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 150px;
    height: 150px;
    border-right: 2px solid rgba(0, 255, 255, 0.3);
    border-bottom: 2px solid rgba(0, 255, 255, 0.3);
    z-index: 1;
}

.footer-corner-accent::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: rgba(0, 255, 255, 0.2);
    border-radius: 2px;
}

/* Responsive Design */
@media screen and (max-width: 1024px) {
    .cyberpunk-footer {
        margin-top: auto;
    }

    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media screen and (max-width: 768px) {
    .cyberpunk-footer {
        margin-top: auto;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 3rem 5%;
    }

    .footer-bottom-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .footer-logo {
        font-size: 2rem;
    }

    .footer-socials {
        justify-content: center;
    }

    .footer-corner-accent {
        width: 100px;
        height: 100px;
    }
}

@media screen and (max-width: 480px) {
    .cyberpunk-footer {
        margin-top: auto;
    }

    .footer-container {
        padding: 2rem 5%;
        gap: 2rem;
    }

    .footer-logo {
        font-size: 1.75rem;
    }

    .footer-heading {
        font-size: 1rem;
    }

    .footer-nav li a,
    .footer-link {
        font-size: 0.875rem;
    }

    .social-btn {
        width: 40px;
        height: 40px;
    }

    .footer-corner-accent {
        width: 80px;
        height: 80px;
    }
}

/* ===============================================
   CRT EFFECTS
   =============================================== */

.crt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 200vh;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 0, 0, 0.5) 4px,
        rgba(0, 0, 0, 0.5) 6px
    );
    animation: scanlineMove 8s linear infinite, scanlineFlicker 0.1s infinite;
}

.glitch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    animation: glitchScreen 4s infinite;
}

.flicker {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.02);
    animation: flicker 0.12s infinite alternate;
}

.vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        rgba(0, 0, 0, 0.5) 100%
    );
}

.glitch-lines {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background: transparent;
}

.glitch-line {
    position: absolute;
    left: 0;
    width: 100vw;
    height: 1px;
    background: rgba(255, 255, 255, 0.8);
    opacity: 0;
}

.glitch-line:nth-child(1) {
    top: 15%;
    animation: glitchLine1 3s infinite;
}

.glitch-line:nth-child(2) {
    top: 45%;
    animation: glitchLine2 4s infinite;
}

.glitch-line:nth-child(3) {
    top: 70%;
    animation: glitchLine3 5s infinite;
}

.glitch-line:nth-child(4) {
    top: 85%;
    animation: glitchLine4 3.5s infinite;
}

.screen-tear {
    position: absolute;
    width: 100vw;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 0, 0, 0.5), 
        rgba(0, 255, 0, 0.5), 
        rgba(0, 0, 255, 0.5), 
        transparent
    );
    animation: screenTear 6s infinite;
    opacity: 0;
}

.chromatic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    animation: chromatic 3s infinite;
}

/* CRT Animations */
@keyframes scanlineMove {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

@keyframes scanlineFlicker {
    0%, 100% {
        opacity: 0.95;
    }
    50% {
        opacity: 0.85;
    }
}

@keyframes glitchScreen {
    0%, 80%, 100% {
        transform: translate(0, 0);
        filter: none;
    }
    81% {
        transform: translate(-2px, 2px);
    }
    82% {
        transform: translate(2px, -2px);
    }
    83% {
        transform: translate(-1px, 1px);
    }
    84% {
        transform: translate(1px, -1px);
    }
    85% {
        transform: translate(0, 0);
        filter: hue-rotate(90deg);
    }
}

@keyframes flicker {
    0% {
        opacity: 0.1;
    }
    100% {
        opacity: 0.3;
    }
}

@keyframes glitchLine1 {
    0%, 88%, 100% {
        opacity: 0;
        transform: translateX(0);
    }
    89% {
        opacity: 1;
        transform: translateX(-50px);
    }
    90% {
        opacity: 0.8;
        transform: translateX(50px);
    }
    91% {
        opacity: 0;
    }
}

@keyframes glitchLine2 {
    0%, 75%, 100% {
        opacity: 0;
        transform: translateX(0) scaleY(1);
    }
    76% {
        opacity: 1;
        transform: translateX(30px) scaleY(3);
    }
    77% {
        opacity: 0.7;
        transform: translateX(-30px) scaleY(2);
    }
    78% {
        opacity: 0;
    }
}

@keyframes glitchLine3 {
    0%, 92%, 100% {
        opacity: 0;
        transform: translateX(0);
    }
    93% {
        opacity: 1;
        transform: translateX(100px);
    }
    94% {
        opacity: 0.5;
        transform: translateX(-80px);
    }
    95% {
        opacity: 0;
    }
}

@keyframes glitchLine4 {
    0%, 70%, 100% {
        opacity: 0;
        transform: translateX(0) scaleY(1);
    }
    71% {
        opacity: 0.9;
        transform: translateX(-60px) scaleY(4);
    }
    72% {
        opacity: 0.6;
        transform: translateX(40px) scaleY(2);
    }
    73% {
        opacity: 0;
    }
}

@keyframes screenTear {
    0%, 85%, 100% {
        opacity: 0;
        top: 20%;
    }
    86% {
        opacity: 1;
        top: 20%;
    }
    87% {
        opacity: 0.8;
        top: 60%;
    }
    88% {
        opacity: 0;
        top: 80%;
    }
}

@keyframes chromatic {
    0%, 94%, 100% {
        opacity: 0;
    }
    95% {
        opacity: 1;
        filter: drop-shadow(-2px 0 red) drop-shadow(2px 0 cyan);
    }
    96% {
        opacity: 0.8;
        filter: drop-shadow(2px 0 red) drop-shadow(-2px 0 cyan);
    }
    97% {
        opacity: 0;
    }
}

/* ===============================================
   SCROLL REVEAL ANIMATIONS
   =============================================== */

/* Hide elements initially */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Show elements when in view */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Optional: Add staggered delays for multiple elements */
.reveal:nth-child(1) { transition-delay: 0s; }
.reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal:nth-child(4) { transition-delay: 0.3s; }
.reveal:nth-child(5) { transition-delay: 0.4s; }

/* Alternative: Faster reveal for quicker effect */
.reveal-fast {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-fast.active {
    opacity: 1;
    transform: translateY(0);
}

/* =====================================================
   RESPONSIVE BREAKPOINTS
   Desktop-optimized with adjustments for large screens
   ===================================================== */

/* ---------------TABLET LANDSCAPE (1024px - Show splash)--------------- */
@media screen and (max-width: 1024px) {
    /* Hide main content when splash is active */
    body.splash-active {
        overflow: hidden;
    }
    
    body.splash-active > *:not(.mobile-splash-screen) {
        filter: blur(5px);
        pointer-events: none;
    }
}

/* ---------------STANDARD LAPTOP (1366px)--------------- */
@media screen and (min-width: 1366px) {
    :root {
        --spacing-scale: 1.05;
        --font-scale: 1.05;
        --hamburger-top: 50px;
        --hamburger-right: 50px;
    }
    
    html {
        font-size: 16.5px;
    }
}

/* ---------------FULL HD DESKTOP (1920px)--------------- */
@media screen and (min-width: 1920px) and (max-width: 1920px) {
    :root {
        --spacing-scale: 1.15;
        --font-scale: 1.1;
        --hamburger-top: 55px;
        --hamburger-right: 55px;
    }
    
    .menu-list a {
        font-size: calc(22px * var(--font-scale));
    }
}

/* ---------------2K DESKTOP (2560px)--------------- */
@media screen and (min-width: 2560px) and (max-width: 2560px) {
    :root {
        --spacing-scale: 2.2;
        --font-scale: 2.0;
        --base-unit: 2.2px;
    }

    .future-container h1 {
        font-size: calc(150px * var(--font-scale));
    }

    .tools-container img {
        width: calc(110px * var(--spacing-scale));
    }

    /* Ensure section1 covers full width on larger screens */
    .section {
        max-width: 100%;
    }

    #section1, .section1 {
        width: 100vw;
        max-width: 100vw;
    }

    #nova-header-video {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}

/* ---------------4K DESKTOP (3840px)--------------- */
@media screen and (min-width: 3840px) {
    :root {
        --spacing-scale: 1.8;
        --font-scale: 1.4;
        --base-unit: 2px;
    }

    html {
        font-size: 20px;
    }

    .menu-list a {
        font-size: calc(24px * var(--font-scale));
    }

    .future-container h1 {
        font-size: calc(180px * var(--font-scale));
    }

    .hamburger {
        width: calc(70px * var(--spacing-scale));
        height: calc(70px * var(--spacing-scale));
    }

    /* Ensure section1 covers full width on 4K */
    .section {
        max-width: 100%;
    }

    #section1, .section1 {
        width: 100vw;
        max-width: 100vw;
    }

    #nova-header-video {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}


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

/* Hero Section Base Styles */
.hero-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: clamp(100vh, 100vh, 120vh);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg);
}

.hero-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(1.02); /* Slight scale to prevent white edges during transitions */
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease-out;
    will-change: transform; /* Optimizes performance for transform animations */
    transform: scale(1);
}

.hero-image:hover {
    transform: scale(1.02);
}

.hero-content {
    position: relative;
    z-index: 2;
    width: min(90%, 1200px);
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 6rem);
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
}

.hero-content h1 {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: clamp(0.2em, 1vw, 0.4em);
    text-shadow: 
        2px 2px 0 rgba(0, 0, 0, 0.5),
        -2px -2px 0 rgba(0, 255, 255, 0.3);
    transform: translateY(0);
    opacity: 1;
    animation: heroTextReveal 1s ease-out forwards;
}

/* Gradient overlay for better text contrast */
.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.4) 0%,
        rgba(0,0,0,0.3) 40%,
        rgba(0,0,0,0.5) 100%
    );
    pointer-events: none;
    opacity: 0.8;
    mix-blend-mode: multiply;
}

/* Hero Animations */
@keyframes heroTextReveal {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive Design for Hero Section */
@media screen and (max-width: 1023px) {
    .hero-section {
        height: clamp(80vh, 90vh, 100vh);
    }

    .hero-content {
        padding: clamp(1.5rem, 4vw, 4rem);
    }

    .hero-content h1 {
        font-size: clamp(2.5rem, 6vw, 4rem);
        letter-spacing: 0.2em;
    }
}

@media screen and (min-width: 1920px) {
    .hero-section {
        height: clamp(100vh, 100vh, 130vh);
    }

    .hero-content {
        max-width: 1600px;
    }

    .hero-content h1 {
        font-size: clamp(4rem, 6vw, 8rem);
    }
}

/* Ultra-wide screen optimizations */
@media screen and (min-aspect-ratio: 21/9) {
    .hero-section {
        height: clamp(100vh, 110vh, 140vh);
    }

    .hero-image-container {
        width: min(100%, 2400px);
        margin: 0 auto;
    }

    .hero-content {
        max-width: min(80%, 2000px);
    }
}

/* High DPI Screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-image {
        image-rendering: -webkit-optimize-contrast;
    }

    .hero-content h1 {
        text-shadow: 
            4px 4px 0 rgba(0, 0, 0, 0.5),
            -4px -4px 0 rgba(0, 255, 255, 0.3);
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .hero-section::after {
        opacity: 0.7;
    }
}


/* ===============================================
   RUN OVERVIEW SECTION
   =============================================== */

.run-overview-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: clamp(100vh, 100vh, 120vh);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.run-overview-container {
    position: absolute;
    top: 15%;
    left: 34%;
    text-align: left;
    width: 100vw;
}

.run-overview-container h1 {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(80px, 7vw, 107px);
    letter-spacing: clamp(3px, 0.3vw, 4.64px);
    line-height: 0.85;
    white-space: nowrap;
    display: inline-block;
    transform: scaleY(1.5);
    transform-origin: center;
}

.run-overview-container p {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 300;
    line-height: 1.6;
}

.role-genre-container {
    position: absolute;
    top: clamp(2.5rem, 4vh, 3.6rem);
    right: 10%;
    text-align: left;
    width: auto;
}

.role-genre-container h2 {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: clamp(6px, 0.5vw, 8px);
}

.run-rectangle-container {
    position: absolute;
    top: 1rem;
    right: 0;
    width: 70%;
    max-width: clamp(1200px, 90vw, 1400px);
    height: auto;
    z-index: -1;
    overflow: visible;
    margin: 0;
    padding: 0;
}

.run-rectangle-container img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: right center;
    margin: 0;
    padding: 0;
}

/* --------------- TAB STYLES --------------- */
.run-tab-buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    padding: 0 clamp(1rem, 3vw, 2rem);
    width: 100%;
    max-width: clamp(800px, 90vw, 1200px);
    position: relative;
    top: 13rem;
    margin-left: auto;
    margin-right: auto;
    left: clamp(10rem, 13vw, 13rem);
    z-index: 10;
}

.run-tab-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: clamp(0.5rem, 2vw, 1rem);
    transition: transform 0.3s ease;
    opacity: 0.6;
}

.run-tab-button:hover {
    transform: translateY(-5px);
    opacity: 1;
}

.run-tab-button.active {
    opacity: 1;
}

.run-tab-icon {
    width: clamp(120px, 16vw, 150px);
    height: clamp(120px, 16vw, 150px);
    margin-bottom: 0;
    background: none;
    border-radius: 50%;
    padding: clamp(1.25rem, 3vw, 2rem);
    transition: background-color 0.3s ease;
}

.run-tab-button:hover .tab-icon {
    background: rgba(255, 255, 255, 0.2);
}

.run-tab-button.active .tab-icon {
    background: rgba(0, 255, 255, 0.2);
}

.run-tab-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.run-tab-text {
    color: #00edff;
    font-size: clamp(0.75rem, 1.5vw, 0.9rem);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: clamp(0.5px, 0.15vw, 1px);
    margin-top: 0;
}

.run-tab-content-container {
    max-width: clamp(650px, 85vw, 800px);
    padding: clamp(1.5rem, 2vw, 2rem);
    background: rgba(0, 0, 0, 0.3);
    border-radius: clamp(6px, 0.8vw, 8px);
    border: clamp(0.8px, 0.08vw, 1px) solid rgba(255, 255, 255, 0.1);
    margin-top: clamp(-22rem, -30vh, -25rem);
    margin-left: 2rem;
    position: relative;
    z-index: 9;
}

.run-tab-content {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.run-tab-content.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.run-tab-content h3 {
    color: #fff;
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    margin-bottom: clamp(0.75rem, 1.2vh, 1rem);
    font-weight: 300;
}

.run-tab-content p {
    color: #fff;
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.6;
    margin-bottom: clamp(0.75rem, 1.2vh, 1rem);
}

/* Tab Responsive Styles */
@media (max-width: 768px) {
    .run-tab-buttons-container {
        flex-wrap: wrap;
        gap: clamp(0.75rem, 2vw, 1rem);
        margin: clamp(1.5rem, 3vh, 2rem) auto;
        padding: 0 clamp(0.75rem, 2vw, 1rem);
        justify-content: space-around;
    }

    .run-tab-button {
        width: calc(50% - clamp(0.5rem, 1vw, 1rem));
        min-width: 120px;
        padding: clamp(0.5rem, 1.5vw, 0.75rem);
    }

    .run-tab-icon {
        width: clamp(100px, 20vw, 120px);
        height: clamp(100px, 20vw, 120px);
        padding: clamp(1rem, 2.5vw, 1.5rem);
    }

    .run-tab-text {
        font-size: clamp(0.7rem, 2vw, 0.8rem);
        letter-spacing: clamp(0.3px, 0.1vw, 0.5px);
    }
}

@media (max-width: 480px) {
    .run-tab-buttons-container {
        gap: clamp(0.5rem, 1.5vw, 0.75rem);
        margin: clamp(1rem, 2vh, 1.5rem) auto;
    }

    .run-tab-button {
        width: calc(50% - clamp(0.25rem, 0.5vw, 0.5rem));
        min-width: 100px;
    }

    .run-tab-icon {
        width: clamp(90px, 24vw, 100px);
        height: clamp(90px, 24vw, 100px);
    }

    .run-tab-text {
        font-size: clamp(0.65rem, 2.5vw, 0.75rem);
    }
}

/* Run Overview Section Responsive Styles */
@media (max-width: 1024px) {
    .run-rectangle-container {
        top: clamp(0.8rem, 1.2vh, 1rem);
        width: clamp(60%, 70vw, 75%);
        max-width: clamp(1000px, 85vw, 1200px);
    }

    .role-genre-container {
        right: clamp(5%, 8vw, 10%);
        top: clamp(2rem, 4vh, 3.6rem);
    }

    .run-overview-container {
        left: clamp(20%, 30vw, 34%);
        top: clamp(12%, 15vh, 15%);
    }

    .run-tab-buttons-container {
        margin-top: clamp(2.5rem, 3.5vh, 3rem);
        left: clamp(8rem, 11vw, 10rem);
    }
}

@media (max-width: 768px) {
    .run-rectangle-container {
        width: clamp(70%, 80vw, 85%);
        position: relative;
        right: auto;
        top: auto;
        margin: clamp(1rem, 2vh, 2rem) auto;
    }

    .run-overview-container {
        position: relative;
        left: auto;
        top: auto;
        width: 90%;
        margin: 0 auto;
        text-align: center;
        padding: clamp(1rem, 2vw, 2rem);
    }

    .run-overview-container h1 {
        font-size: clamp(3rem, 10vw, 5rem);
    }

    .role-genre-container {
        position: relative;
        right: auto;
        top: auto;
        text-align: center;
        margin: clamp(1.5rem, 3vh, 2rem) auto;
        width: 90%;
    }

    .run-tab-buttons-container {
        margin-top: clamp(2rem, 2.8vh, 2.5rem);
        left: clamp(5rem, 8vw, 7rem);
    }
}

@media (max-width: 480px) {
    .run-rectangle-container {
        width: 95%;
    }

    .run-overview-container h1 {
        font-size: clamp(2.5rem, 12vw, 4rem);
        letter-spacing: clamp(2px, 0.5vw, 4px);
    }

    .run-tab-buttons-container {
        margin-top: clamp(1.5rem, 2.5vh, 2rem);
        left: clamp(2rem, 5vw, 4rem);
    }
}


/* ===============================================
   RUN BRIEF SECTION
   =============================================== */

.run-role-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: clamp(100vh, 100vh, 120vh);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: none;
}

/* ------RUN BRIEF BUTTONS WITH IMAGE GLOW------ */

.runbrief-buttons-container {
    position: absolute;
    bottom: 40%;
    left: clamp(28%, 34vw, 34%);
    display: flex;
    gap: clamp(1.5rem, 2.5vw, 2rem);
    width: 100vw;
    z-index: 1;
}

.runbrief-button {
    position: relative;
    width: clamp(180px, 12vw, 200px);
    height: clamp(70px, 5vw, 80px);
    background: none;
    border: none;
    cursor: pointer;
    overflow: visible;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* The actual button image */
.runbrief-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../ASSETS/IMGS/Proj1/TabButton.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: filter 0.3s ease, transform 0.3s ease;
    z-index: 0;
}

/* Glow effect on hover */
.runbrief-button:hover::before {
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.6)) 
            drop-shadow(0 0 15px rgba(0, 255, 255, 0.4))
            brightness(1.1);
    transform: scale(1.02);
}

/* Active state glow */
.runbrief-button.active::before {
    filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.8)) 
            drop-shadow(0 0 14px rgba(0, 255, 255, 0.5))
            brightness(1.10);
}

.runbrief-button-text {
    position: relative;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 500;
    letter-spacing: clamp(1.2px, 0.12vw, 1.5px);
    text-transform: uppercase;
    z-index: 1;
    transition: all 0.3s ease;
    text-shadow: 0 clamp(1.5px, 0.2vw, 2px) clamp(3px, 0.3vw, 4px) rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

.runbrief-button:hover .tab-text {
    color: rgba(0, 255, 255, 1);
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8);
}

.runbrief-button.active .tab-text {
    color: rgba(0, 255, 255, 1);
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.8);
}

.runbrief-content-container {
    position: relative;
    top: 50vh;
    left: clamp(-18rem, -15vw, -15rem);
    width: 55%;
    min-height: clamp(220px, 30vh, 250px);
    z-index: 9;
    margin-bottom: clamp(1.5rem, 2vh, 2rem);
    padding: 0;
}

.runbrief-content {
    display: none;
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

.runbrief-content.active {
    display: flex;
    gap: 3rem;
    align-items: center;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.runbrief-content-text {
    flex: 1;
}

.runbrief-grid-container {
    position: relative;
    margin-left: 0;
    margin-bottom: clamp(10vh, 12vh, 14vh);
    margin-top: clamp(-18%, -15%, -12%);
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 7%;
    width: 100%;
    max-width: clamp(1200px, 90vw, 1400px);
}

.runbrief-column-item1 h2 {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(16px, 1.2vw, 18px);
    font-weight: 100;
}

.runbrief-column-item2 p {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 300;
    line-height: 1.5;
}

.runbrief-column-item3 h2 {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(16px, 1.2vw, 18px);
    font-weight: 100;
}

.runbrief-column-item4 p {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 300;
    line-height: 1.5;
}

.runbrief-column-item5 h2 {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(16px, 1.2vw, 18px);
    font-weight: 100;
}

.runbrief-column-item6 p {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 300;
    line-height: 1.5;
}

.runbrief-column-item7 h2 {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(16px, 1.2vw, 18px);
    font-weight: 100;
}

.runbrief-column-item8 p {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 300;
    line-height: 1.5;
}

/* ===========================
   RUN SECTION MEDIA QUERIES
   =========================== */

@media (max-width: 1024px) {
    .run-tab-content-container {
        margin-top: clamp(-20rem, -25vh, -18rem);
        left: clamp(20rem, 25vw, 25rem);
        max-width: 700px;
        padding: 1.75rem;
    }

    .runbrief-buttons-container {
        bottom: 38%;
        left: 30%;
        gap: 1.5rem;
    }

    .runbrief-content-container {
        top: 48vh;
        left: clamp(-12rem, -15vw, -10rem);
        width: 60%;
    }
}

@media (max-width: 768px) {
    .run-tab-content-container {
        margin-top: clamp(-15rem, -20vh, -12rem);
        left: clamp(10rem, 15vw, 15rem);
        max-width: 600px;
        padding: 1.5rem;
    }

    .runbrief-buttons-container {
        bottom: 35%;
        left: 20%;
        gap: 1rem;
    }

    .runbrief-content-container {
        top: 45vh;
        left: clamp(-8rem, -10vw, -5rem);
        width: 70%;
    }
}

@media (max-width: 480px) {
    .run-tab-content-container {
        margin-top: clamp(-10rem, -15vh, -8rem);
        left: clamp(2rem, 5vw, 5rem);
        max-width: 90%;
        padding: 1rem;
    }

    .runbrief-buttons-container {
        bottom: 30%;
        left: 10%;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .runbrief-content-container {
        top: 40vh;
        left: clamp(-2rem, -5vw, 0rem);
        width: 85%;
    }
}


/* ===============================================
   RUN BREAKDOWN SECTION
   =============================================== */

.run-visual-development-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: clamp(100vh, 100vh, 120vh);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: none;
    padding: clamp(2rem, 5vh, 4rem) clamp(1rem, 3vw, 2rem);
}

/* Visual Development Grid Styles */
.visual-dev-grid-wrapper {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 80%;
    max-width: clamp(1200px, 90vw, 1600px);
    margin: 0 auto;
    margin-left: clamp(15rem, 20vw, 20rem);
    align-items: center;
}

.visual-dev-image-block {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: clamp(8px, 1vw, 12px);
    position: relative;
}

.visual-dev-image-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* More specific selector for TV image to override above */
.visual-dev-image-block img.tv {
    width: clamp(800px, 100%, 1700px);
    height: auto;
    top: 3rem;
    object-fit: contain;  /* Shows full image without cropping */
    z-index: 0;
}

/* .visual-dev-image-block:hover img {
    transform: scale(1.02);
} */

.visual-dev-text-block {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: rgba(0, 0, 0, 0.3);
    border-radius: clamp(8px, 1vw, 12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.visual-dev-text-block h2 {
    color: #00edff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1rem, 2.25vw, 1.50rem);
    font-weight: 500;
    margin-bottom: clamp(1rem, 2vh, 1.5rem);
    letter-spacing: clamp(1px, 0.2vw, 2px);
    text-transform: uppercase;
}

.visual-dev-text-block p {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.875rem, 0.5vw, 1rem);
    font-weight: 300;
    line-height: 1.6;
}

.color-grading {
    position: absolute;
    top: clamp(6.5rem, 10vh, 7.9rem);
    left: 12%;
    width: 69%;
    height: auto;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.color-grading.active {
    opacity: 1;
    pointer-events: auto;
}

.tv {
    position: relative;
    margin-bottom: clamp(5rem, 8vh, 6rem);
    left: 0%;
    width: 60%;
    height: auto;
    z-index: 0;
}

.color-grading img{
    width: 100%;
    height: auto;
    object-fit: contain;
    z-index: 1;
}

.tv img{
    width: 100%;
    height: auto;
    object-fit: contain;
    z-index: 0;
}

/* Visual Dev Content Switching Styles */
.visual-dev-content {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.visual-dev-content.active {
    display: block;
    opacity: 1;
}

.visual-dev-buttons {
    display: flex;
    gap: clamp(0.75rem, 2vw, 1rem);
    margin-top: clamp(1.5rem, 3vh, 2rem);
    flex-wrap: wrap;
}

.visual-dev-btn {
    flex: 1;
    min-width: clamp(80px, 20%, 120px);
    padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(1rem, 2vw, 1.5rem);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(0, 237, 255, 0.3);
    border-radius: clamp(4px, 0.5vw, 6px);
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: clamp(0.5px, 0.1vw, 1px);
    cursor: pointer;
    transition: all 0.3s ease;
}

.visual-dev-btn:hover {
    background: rgba(0, 237, 255, 0.2);
    border-color: rgba(0, 237, 255, 0.6);
    transform: translateY(-2px);
}

.visual-dev-btn.active {
    background: rgba(0, 237, 255, 0.3);
    border-color: #00edff;
    color: #00edff;
}

/* TV Press Button */
.tv-press-button {
    position: absolute;
    top: 74%;
    left: 85%;
    transform: translate(-50%, -50%);
    padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem);
    background: rgba(0, 237, 255, 0.8);
    border: 2px solid #00edff;
    border-radius: clamp(25px, 3vw, 35px);
    color: #000;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.875rem, 1.5vw, 1.125rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: clamp(1px, 0.2vw, 2px);
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    animation: flash 2s ease-in-out infinite;
}

.tv-press-button:hover {
    background: #00edff;
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 0 clamp(15px, 2vw, 25px) rgba(0, 237, 255, 0.6);
}

@keyframes flash {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 clamp(10px, 1.5vw, 15px) rgba(0, 237, 255, 0.4);
    }
    50% {
        opacity: 0.7;
        box-shadow: 0 0 clamp(20px, 3vw, 30px) rgba(0, 237, 255, 0.8);
    }
}

/* TV Popup */
.tv-popup {
    position: absolute;
    top: 43%;
    left: 47%;
    transform: translate(-50%, -50%);
    width: clamp(100px, 40%, 400px);
    max-height: 45%;
    background: rgba(80, 80, 80, 0.70);
    border: 2px solid rgba(0, 237, 255, 0.5);
    border-radius: clamp(12px, 1.5vw, 20px);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    z-index: 15;
    display: none;
    overflow-y: auto;
    box-shadow: 0 0 clamp(30px, 5vw, 50px) rgba(0, 0, 0, 0.8);
}

.tv-popup.active {
    display: block;
}

.tv-popup-close {
    position: absolute;
    top: clamp(0.5rem, 1vw, 1rem);
    right: clamp(0.5rem, 1vw, 1rem);
    width: clamp(30px, 4vw, 40px);
    height: clamp(30px, 4vw, 40px);
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    color: #ffffff;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.tv-popup-close:hover {
    background: rgba(0, 237, 255, 0.8);
    border-color: rgba(0, 237, 255, 0.8);
    transform: rotate(90deg);
}

.tv-popup-content {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vh, 1.5rem);
}

.tv-popup-image {
    width: clamp(10px, 1%, 40px);
    height: auto;
    border-radius: clamp(8px, 1vw, 12px);
    border: 1px solid rgba(0, 237, 255, 0.3);
    margin: 0 auto;
    display: block;
}

.tv-popup-text {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    font-weight: 300;
    line-height: 1.6;
    margin: 0;
}

/* Visual Development Responsive Styles */
@media (max-width: 1024px) {
    .visual-dev-grid-wrapper {
        grid-template-columns: 2fr 1fr;
        gap: clamp(1rem, 2vw, 2rem);
    }

    .visual-dev-text-block {
        padding: clamp(1rem, 2vw, 1.5rem);
    }
}

@media (max-width: 768px) {
    .run-visual-development-section {
        height: auto;
        min-height: auto;
        padding: clamp(2rem, 4vh, 3rem) clamp(1rem, 2vw, 1.5rem);
    }

    .visual-dev-grid-wrapper {
        grid-template-columns: 1fr;
        gap: clamp(1.5rem, 3vh, 2rem);
    }

    .visual-dev-image-block {
        min-height: clamp(300px, 50vh, 400px);
    }

    .visual-dev-text-block {
        padding: clamp(1.5rem, 3vw, 2rem);
    }

    .visual-dev-text-block h2 {
        font-size: clamp(1.5rem, 4vw, 2rem);
        text-align: center;
    }

    .visual-dev-text-block p {
        font-size: clamp(0.9rem, 2.5vw, 1rem);
        text-align: center;
    }
}

@media (max-width: 480px) {
    .visual-dev-grid-wrapper {
        gap: clamp(1rem, 2vh, 1.5rem);
    }

    .visual-dev-image-block {
        min-height: clamp(250px, 40vh, 300px);
        border-radius: clamp(6px, 1vw, 8px);
    }

    .visual-dev-text-block {
        padding: clamp(1rem, 2vw, 1.5rem);
    }

    .visual-dev-text-block h2 {
        font-size: clamp(1.25rem, 5vw, 1.5rem);
        margin-bottom: clamp(0.75rem, 1.5vh, 1rem);
    }

    .visual-dev-text-block p {
        font-size: clamp(0.85rem, 3vw, 0.9rem);
    }
}

/* ===============================================
   RESPONSIVE DESIGN SYSTEM
   =============================================== */
/* --------------- RESPONSIVE DESIGN SYSTEM --------------- */

/* Breakpoint Indicator Styles */
#breakpoint-indicator {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.875rem;
    z-index: 9999;
    pointer-events: none;
}

/* Base styles (mobile first) */
:root {
    --content-width: 90vw;
    --grid-columns: 1;
}

/* Tablet (< 1024px) */
@media screen and (max-width: 1023px) {
    :root {
        --spacing-scale: 0.85;
        --font-scale: 0.9;
        --grid-columns: 2;
    }
    
    .grid-container {
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
    
    .showcase-section {
        flex-direction: column;
    }
}

/* Small Laptop (1024px - 1365px) */
@media screen and (min-width: 1024px) and (max-width: 1365px) {
    :root {
        --spacing-scale: 0.9;
        --font-scale: 0.95;
        --content-width: 85vw;
        --grid-columns: 2;
    }
}

/* Full HD (1366px - 1919px) */
@media screen and (min-width: 1366px) and (max-width: 1919px) {
    :root {
        --spacing-scale: 1;
        --font-scale: 1;
        --content-width: 80vw;
        --grid-columns: 3;
    }
}

/* 2K (1920px - 2559px) */
@media screen and (min-width: 1920px) and (max-width: 2559px) {
    :root {
        --spacing-scale: 1.1;
        --font-scale: 1.1;
        --content-width: 75vw;
        --grid-columns: 3;
    }
    
    .container {
        max-width: 1800px;
    }

    /* Tab buttons container positioning for 1920 view */
    .tab-buttons-container {
        top: 72vh;
    }
}

/* 3K (2560px - 3839px) */
@media screen and (min-width: 2560px) and (max-width: 3839px) {
    :root {
        --spacing-scale: 2.2;
        --font-scale: 2.0;
        --content-width: 70vw;
        --grid-columns: 4;
    }

    .container {
        max-width: 2400px;
    }

    /* Explicitly scale nav-container elements for 2560px */
    .nav-container {
        left: calc(80px * 2.2);
    }

    .nav-line {
        left: calc(2px * 2.2);
        top: calc(40px * 2.2);
        width: calc(2px * 2.2);
        height: calc(260px * 2.2);
        border-left-width: calc(2px * 2.2);
    }

    .nav-bullet-slider {
        width: calc(6px * 2.2);
        height: calc(20px * 2.2);
        border-radius: calc(3px * 2.2);
    }

    .nav-item {
        margin: calc(30px * 2.2) 0;
    }

    .nav-link {
        padding-left: calc(30px * 2.2);
    }

    .nav-text {
        font-size: calc(14px * 2.0);
    }

    .nav-item.active .nav-text {
        font-size: calc(18px * 2.0);
    }

    /* Position future-container relative to future-rectangle-container */
    .future-container {
        top: 7rem;
        left: calc(30% + 5rem);
        height: auto;
        align-items: flex-start;
    }

    .future-container h1 {
        line-height: 1;
    }

    /* Move skills-container down */
    .skills-container {
        top: calc(3.6rem + 1rem);
    }

    /* Move nova-overview-container up and adjust styling */
    .nova-overview-container {
        top: calc(35% - 6rem + 3rem);
        left: calc(34% + 3rem - 2rem);
    }

    /* Match nova-overview-container p font size to column-item2 */
    .nova-overview-container p {
        font-size: calc(16px * 2.0);
    }

    /* Hide BR tags in nova-overview-container for 2560px */
    .nova-overview-container p br {
        display: none;
    }

    /* Scale up tab-button size for 2560px */
    .tab-button {
        width: calc(200px * 1.5);
        height: calc(80px * 1.5);
    }

    /* Tab buttons container positioning for 2560 view */
    .tab-buttons-container {
        top: 62vh;
    }

    /* Scale grid-container elements for 2560px */
    .grid-container {
        gap: calc(7% * 1.5);
    }

    .column-item1 h2,
    .column-item3 h2 {
        font-size: calc(18px * 2.0);
    }

    .column-item2 p,
    .column-item4 p {
        font-size: calc(16px * 2.0);
    }

    /* Scale research-header-container for 2560px */
    .research-header-container {
        margin-top: 2rem;
        margin-left: calc(-2.5rem * 1.5);
        margin-bottom: 3rem;
    }

    .research-header-container h1 {
        font-size: calc(5rem * 2.0);
        letter-spacing: calc(4.64px * 2.0);
    }

    /* Scale grid-container2 for 2560px */
    .grid-container2 {
        margin-top: 0;
        margin-left: -2rem;
        margin-right: 2rem;
        margin-bottom: calc(12vh * 1.2);
        gap: calc(3rem * 1.0);
        width: 65vw;
        max-width: 68vw;
    }

    .column-item5,
    .column-item6,
    .column-item7 {
        padding: 0 0.8rem;
        margin: 0;
        position: relative;
        box-sizing: border-box;
    }

    .column-item5 img,
    .column-item6 img,
    .column-item7 img {
        width: calc(100% + 1.6rem);
        max-width: calc(100% + 1.6rem);
        position: absolute;
        top: 0;
        left: calc(-0.8rem + 2rem);
        z-index: 0;
    }

    .column-item5 h2,
    .column-item6 h2,
    .column-item7 h2 {
        font-size: calc(18px * 2.0);
        margin-top: calc(1rem * 2.0);
        margin-bottom: calc(0.6rem * 2.0);
        margin-left: 0;
        margin-right: 0;
        padding: 0;
        position: relative;
        z-index: 1;
        word-wrap: break-word;
        overflow-wrap: break-word;
        width: 100%;
        box-sizing: border-box;
    }

    .column-item5 p,
    .column-item6 p,
    .column-item7 p {
        font-size: calc(16px * 2.0);
        line-height: 1.5;
        margin-top: 0;
        margin-bottom: calc(1.5rem * 2.0);
        margin-left: 0;
        margin-right: 0;
        padding: 0;
        position: relative;
        z-index: 1;
        word-wrap: break-word;
        overflow-wrap: break-word;
        width: 100%;
        box-sizing: border-box;
    }

    /* Scale persona-instruct-container for 2560px */
    .persona-instruct-container {
        position: relative;
        top: -1rem !important;
        margin-top: 0;
        font-size: calc(0.7rem * 3.0);
    }

    /* Scale image-gallery-container for 2560px */
    .image-gallery-container {
        margin-top: 8rem;
        margin-left: 0;
        gap: calc(2rem * 2.0);
        justify-content: center;
        flex-wrap: nowrap;
    }

    /* Scale gallery-item for 2560px */
    .gallery-item {
        width: 400px !important;
        height: 400px !important;
        min-width: 400px;
        min-height: 400px;
        border-radius: calc(30px * 3.5);
        flex-shrink: 0;
        overflow: hidden;
        position: relative;
        cursor: pointer;
    }

    .gallery-item.middle-item {
        transform: translateY(calc(-40px * 3.5));
    }

    /* Scale gallery-overlay for 2560px */
    .gallery-overlay {
        padding: calc(1.5rem * 3.0);
        overflow-y: auto;
        overflow-x: hidden;
        pointer-events: auto;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    /* Ensure hover works at 2560px */
    .gallery-item:hover .gallery-overlay {
        opacity: 1 !important;
        display: flex !important;
    }

    .gallery-overlay h2 {
        font-size: calc(1rem * 3.0);
        margin-bottom: calc(1rem * 3.0);
        flex-shrink: 0;
    }

    .gallery-overlay p {
        font-size: calc(0.75rem * 3.0);
        overflow-y: auto;
        max-height: 100%;
        padding-right: 1rem;
    }

    /* Keep nova-overview-section height for 2560px */
    .nova-overview-section {
        min-height: 130vh;
    }

    /* Scale nova-materials-section for 2560px */
    .nova-materials-section {
        margin: 0 60px 0 500px;
        padding-top: 12vh;
    }

    /* Center material-container for 2560px */
    .material-container {
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
    }

    /* Scale nova-wireframes-section for 2560px */
    .nova-wireframes-section {
        margin: 0 60px 0 500px;
        padding-top: 12vh;
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Position gallery-header for 2560px */
    .gallery-header {
        margin: 0;
        margin-left: 0;
        padding: 0 0 calc(2rem * 2.0) 0;
        text-align: left;
        width: 85%;
        height: auto;
        display: block;
        align-self: flex-start;
    }

    .gallery-header h1 {
        font-size: calc(5rem * 2.0);
        letter-spacing: calc(4.64px * 2.0);
        line-height: 1.2;
        width: 100%;
        height: auto;
    }

    /* Move gallery-header reveal active to the right for 2560px */
    .gallery-header.reveal.active {
        margin-left: 6rem;
    }

    /* Fix expandable-gallery hover for 2560px - reset all base styles */
    .expandable-gallery {
        display: flex !important;
        flex-direction: row !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: center !important;
        gap: calc(0.5rem * 2.0) !important;
        height: calc(500px * 2.0) !important;
        width: 85% !important;
        max-width: none !important;
        overflow: visible !important;
        transform: translateY(0) !important;
        opacity: 1 !important;
    }

    /* Override reveal class completely for expandable-gallery at 2560px */
    .nova-wireframes-section .expandable-gallery.reveal,
    .nova-wireframes-section .expandable-gallery.reveal.active {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }

    /* Scale gallery-wireframe for 2560px */
    .gallery-wireframe {
        position: relative !important;
        height: calc(500px * 2.0) !important;
        min-width: calc(80px * 2.0) !important;
        border-radius: calc(1rem * 2.0) !important;
        flex: 1 !important;
        cursor: pointer !important;
        transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow: hidden !important;
        pointer-events: auto !important;
        background-color: #e0e0e0 !important;
        z-index: 1 !important;
    }

    /* Ensure hover functionality works at 2560px */
    .nova-wireframes-section .gallery-wireframe:hover {
        flex: 4 !important;
        z-index: 2 !important;
    }

    .nova-wireframes-section .expandable-gallery:hover .gallery-wireframe:not(:hover) {
        flex: 0.5 !important;
    }

    /* Scale gallery-wireframe images for 2560px */
    .gallery-wireframe img {
        pointer-events: none !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
        transform: scale(2) !important;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .nova-wireframes-section .gallery-wireframe:hover img {
        transform: scale(1) !important;
    }

    /* Scale nova-features-section for 2560px */
    .nova-features-section {
        margin: 0 60px 0 500px;
        padding-top: 12vh;
        padding-bottom: 0;
        overflow: visible;
        position: relative;
        min-height: auto;
        height: auto;
    }

    /* Scale features-container for 2560px */
    .features-container {
        left: 0;
        position: relative;
        margin-top: calc(6rem * 2.0);
        gap: calc(2rem * 2.0);
        margin-bottom: calc(5vh * 2.0);
        width: fit-content;
        z-index: 1;
    }

    /* Scale feature-badge for 2560px */
    .feature-badge {
        width: calc(140px * 2.0);
        height: calc(140px * 2.0);
    }

    .badge-content h2 {
        font-size: calc(1.5rem * 2.0);
        margin-bottom: calc(0.5rem * 2.0);
    }

    .badge-content p {
        font-size: calc(0.8rem * 2.0);
    }

    /* Fix slider-container positioning for 2560px */
    .slider-container {
        position: absolute;
        top: calc(6rem * 2.0);
        left: 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
        height: calc(60vh * 2.0);
        z-index: 1;
    }

    /* Scale slider elements for 2560px */
    .slider-controls {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 45%;
        z-index: 3;
        margin-top: 12rem;
    }

    .slider-title {
        font-size: calc(2rem * 2.0);
    }

    .slider-description {
        font-size: calc(16px * 2.0);
    }

    .slider-images {
        position: absolute;
        right: 5%;
        top: 40%;
        transform: translateY(-50%);
        width: 900px;
        height: 900px;
        z-index: 1;
        margin-left: 45rem;
    }

    /* Scale custom slider for 2560px */
    .custom-slider {
        height: calc(60px * 2.0);
        margin: calc(2rem * 2.0) 0;
    }

    .slider-track {
        height: calc(4px * 2.0);
    }

    .slider-progress {
        height: calc(4px * 2.0);
    }

    .slider-point {
        width: calc(16px * 2.0);
        height: calc(16px * 2.0);
        border-width: calc(2px * 2.0);
    }

    .slider-handle {
        width: calc(24px * 2.0);
        height: calc(24px * 2.0);
    }

    /* Scale slider-image for 2560px */
    .slider-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        opacity: 0 !important;
        transition: opacity 0.6s ease-in-out;
        pointer-events: none;
    }

    .slider-image.active {
        opacity: 1 !important;
        z-index: 2;
    }

    .slider-image.fading-out {
        opacity: 0 !important;
        z-index: 1;
    }

    .slider-image.fading-in {
        opacity: 1 !important;
        z-index: 2;
    }

    /* Nova app section - match margins with nova-features-section */
    .nova-app-section {
        margin: 0 60px 0 500px;
        align-items: flex-start;
        padding-top: 3rem;
        min-height: auto;
        height: auto;
        padding-bottom: 0;
    }

    /* Split layout - remove margins and move to top */
    .split-layout {
        margin: 0 auto;
        margin-top: 0;
    }

    /* Split image - scale up slightly */
    .split-image img {
        max-width: calc(300px * 1.5);
    }

    /* Hide section spacer */
    .section-spacer {
        display: none;
    }

    /* Nova breakdown section - match margins with nova-app-section */
    .nova-breakdown-section {
        margin: 0 60px 0 500px;
        padding-top: 9rem;
        padding-bottom: 0;
    }

    /* Breakdown container - remove all margins and padding */
    .breakdown-container {
        margin: 0;
        padding: 0;
    }

    /* Breakdown container H2 - remove left margin and move left */
    .breakdown-container h2 {
        margin-left: 6rem;
    }

    /* Split layout 2 - remove margins and increase max-width */
    .split-layout2 {
        margin: 0;
        max-width: none;
        width: 100%;
        padding: 0;
        justify-content: flex-start;
        padding-left: 3rem;
    }

    /* Split image 2 - scale up proportionately and move left */
    .split-image2 {
        justify-content: flex-start;
    }

    .split-image2 img {
        width: auto;
        max-width: calc(400px * 2.5);
        transform: translateX(3rem);
    }

    /* Split image 3 - scale up proportionately and move left */
    .split-image3 img {
        width: auto;
        max-width: calc(500px * 2.5);
        transform: translateX(-3rem);
    }

    /* Nova onboarding section - match margins and padding with nova-app-section */
    .nova-onboarding-section {
        margin: 0 60px 0 500px;
        padding-top: 12rem;
        padding-bottom: 0;
    }

    /* Onboarding container - center content */
    .onboarding-container {
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
    }

    /* Phone images - center in section */
    .phone-images {
        left: 0;
        justify-content: center;
    }

    /* Phone item images - scale up */
    .phone-item img {
        height: calc(300px * 2.0);
        width: auto;
    }

    /* Onboarding background text - move left */
    .onboarding-container .background-text {
        left: calc(14% - 14rem);
    }

    /* Features showcase section - remove padding and justify-content, add margins */
    .features-showcase-section {
        padding-top: 0;
        padding-bottom: 0;
        justify-content: flex-start;
        margin: 0 60px 0 500px;
        padding-top: 3rem;
    }

    /* Showcase text left - scale up */
    .showcase-text-left {
        margin-left: calc(5rem * 2.0);
        gap: calc(2rem * 2.0);
        padding-right: calc(1rem * 2.0);
        transform: translateY(-7rem);
    }

    /* Showcase phone single - scale up and center vertically */
    .showcase-phone-single {
        width: calc(360px * 2.0);
        height: calc(510px * 2.0);
        align-self: center;
        transform: translateY(-8rem);
    }

    /* Showcase text left h2 - match split text h2 size */
    .showcase-text-left h2 {
        font-size: calc(130px * var(--font-scale));
        transform: scaleY(1.5);
        transform-origin: left;
        line-height: 1;
    }

    /* Showcase text left p - match split text p size */
    .showcase-text-left p {
        font-size: 1.1rem;
        line-height: 1.8;
        max-width: 600px;
    }

    /* Showcase text right h2 - match showcase text left h2 size */
    .showcase-item[data-showcase="2"] .showcase-text-right h2 {
        font-size: calc(130px * var(--font-scale));
        transform: scaleY(1.5);
        transform-origin: left;
    }

    /* Showcase text right p - match showcase text left p size */
    .showcase-item[data-showcase="2"] .showcase-text-right p {
        font-size: 1.1rem;
        line-height: 1.8;
        max-width: 600px;
    }

    /* Showcase text right - remove right margin */
    .showcase-item[data-showcase="2"] .showcase-text-right {
        margin-right: 0;
    }

    /* Showcase text right h2 - move left */
    .showcase-item[data-showcase="2"] .showcase-text-right h2 {
        margin-left: -6rem;
    }

    /* Info box - scale up */
    .info-box {
        width: calc(140px * 2.0);
        height: calc(140px * 2.0);
    }

    /* Showcase phone left - scale up */
    .showcase-phone-left {
        width: calc(700px * 2.5);
        height: calc(550px * 2.5);
        max-width: none;
        transform: translateY(-5rem);
    }

    /* Showcase item showcase 2 phone left - move left */
    .showcase-item[data-showcase="2"] .showcase-phone-left {
        margin-left: -25rem;
    }

    /* Showcase phone left img - allow scaling */
    .showcase-phone-left img {
        height: auto;
        max-height: none;
    }

    /* Showcase boxes grid - move up, remove padding, and reduce size */
    .showcase-boxes-grid {
        transform: translateY(-10rem) scale(0.7);
        padding-left: 0;
        padding-right: 0;
    }

    /* Showcase item showcase 2 boxes grid - remove padding and reduce size */
    .showcase-item[data-showcase="2"] .showcase-boxes-grid {
        padding-left: 0;
        padding-right: 0;
        transform: translateY(-10rem) translateX(5.5rem) scale(0.7);
    }

    /* Showcase text right - move down */
    .showcase-text-right {
        transform: translateY(-10rem);
    }

    /* Showcase buttons - scale up */
    .showcase-buttons {
        gap: calc(3rem * 2.0);
        padding-left: calc(2rem * 2.0);
        padding-right: calc(2rem * 2.0);
        transform: translateX(3rem);
    }

    /* Circle button - scale up */
    .circle-btn {
        width: calc(100px * 2.0);
        height: calc(100px * 2.0);
    }

    /* Showcase item 3 title - remove right padding */
    .showcase-item[data-showcase="3"] .showcase-title {
        padding-right: 0;
    }

    /* Showcase item 3 text left - reduce left margin */
    .showcase-item[data-showcase="3"] .showcase-text-left {
        margin-left: calc(5rem * 1.5);
    }

    /* Showcase item 4 text right title - match showcase text left h2 size */
    .showcase-item[data-showcase="4"] .showcase-text-right .showcase-title {
        font-size: calc(130px * var(--font-scale));
        transform: scaleY(1.5);
        transform-origin: left;
        padding-right: 0;
        letter-spacing: 0;
    }

    /* Showcase item 4 text right title br - hide line break */
    .showcase-item[data-showcase="4"] .showcase-text-right .showcase-title br {
        display: none;
    }

    /* Showcase item 4 text right description - match showcase text left p size */
    .showcase-item[data-showcase="4"] .showcase-text-right .showcase-description {
        font-size: 1.1rem;
        line-height: 1.8;
        max-width: 600px;
    }

    /* Showcase item 4 text right - increase width */
    .showcase-item[data-showcase="4"] .showcase-text-right {
        width: auto;
        max-width: 1300px;
    }

    /* Video reveal container - increase size and move right */
    .video-reveal-container {
        max-width: calc(1800px * 2.0);
        transform: translateX(-7rem);
    }
}

/* 4K and above (≥ 3840px) */
@media screen and (min-width: 3840px) {
    :root {
        --spacing-scale: 1.5;
        --font-scale: 1.3;
        --content-width: 65vw;
        --grid-columns: 4;
    }
    
    .container {
        max-width: 3000px;
    }
}

/* Ultra-wide screen optimizations */
@media screen and (min-aspect-ratio: 21/9) {
    :root {
        --ultra-wide-padding: max(4rem, 8vw);
        --content-max-width: 2400px;
    }

    .full-width-section {
        padding-left: var(--ultra-wide-padding);
        padding-right: var(--ultra-wide-padding);
    }
    
    .grid-container {
        grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
        max-width: var(--content-max-width);
        margin: 0 auto;
    }

    .showcase-section {
        gap: clamp(2rem, 4vw, 6rem);
    }

    .text-content {
        max-width: 70ch;
        margin: 0 auto;
    }
}

/* Super Ultra-wide (32:9 and wider) */
@media screen and (min-aspect-ratio: 32/9) {
    :root {
        --ultra-wide-padding: max(6rem, 12vw);
    }

    .container {
        max-width: 2800px;
        margin: 0 auto;
        padding: 0 var(--ultra-wide-padding);
    }

    .text-rich-content {
        column-count: 2;
        column-gap: 4rem;
        max-width: 140ch;
    }
}

/* High pixel density screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .image-container img,
    .grid-image-item img,
    .background-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }

    html {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    .border-element {
        border-width: 0.5px;
    }
}

/* 5K and higher resolution displays */
@media screen and (min-width: 5120px) {
    :root {
        --spacing-scale: 1.75;
        --font-scale: 1.5;
        --content-width: 60vw;
        --grid-columns: 5;
    }

    .container {
        max-width: 4000px;
    }

    img[srcset] {
        image-rendering: crisp-edges;
    }
}

/* Print styles */
@media print {
    #breakpoint-indicator {
        display: none;
    }

    .hamburger,
    .side-panel,
    .nav-container,
    .social-icons,
    .scroll-indicator,
    .crt-overlay,
    .mobile-splash-screen {
        display: none !important;
    }
    
    .section {
        page-break-inside: avoid;
    }
}
/* ===============================================
   FALLBACK FOR OLDER BROWSERS
   =============================================== */
/* ---------------FALLBACK FOR OLDER BROWSERS--------------- */
@supports not (gap: 1px) {
    .image-gallery > * {
        margin-right: calc(6px * var(--spacing-scale));
    }
    .image-gallery > *:last-child {
        margin-right: 0;
    }
    .image-column > * {
        margin-bottom: calc(6px * var(--spacing-scale));
    }
    .image-column > *:last-child {
        margin-bottom: 0;
    }
}

/* ===============================================
   CAST & CREW CAROUSEL SECTION
   =============================================== */

.castcrew-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: clamp(4rem, 8vh, 6rem) 0;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.castcrew-header {
    text-align: center;
    margin-bottom: clamp(2rem, 4vh, 3rem);
    padding: 0 clamp(1rem, 3vw, 2rem);
}

.castcrew-header h2 {
    color: white;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(80px, 7vw, 107px);
    letter-spacing: clamp(3px, 0.3vw, 4.64px);
    line-height: 0.85;
    white-space: nowrap;
    display: inline-block;
    transform: scaleY(1.5);
    transform-origin: center;
    text-transform: uppercase;
}

.carousel-container {
    position: relative;
    width: 80%;
    max-width: clamp(1200px, 90vw, 1400px);
    overflow: hidden;
    cursor: grab;
    padding: clamp(1.2rem, 2vh, 1.5rem) 0;
    z-index: 10;
    pointer-events: auto;
}

.carousel-container:active {
    cursor: grabbing;
}

.carousel-track {
    display: flex;
    gap: clamp(1.5rem, 2.5vw, 2rem);
    will-change: transform;
    pointer-events: none;
}

.carousel-item {
    flex: 0 0 auto;
    width: clamp(220px, 16vw, 240px);
    text-align: center;
    pointer-events: none;
}

.carousel-item img {
    width: 100%;
    height: clamp(280px, 25vw, 400px);
    object-fit: cover;
    border-radius: clamp(8px, 1vw, 12px);
    border: clamp(1.5px, 0.15vw, 2px) solid rgba(0, 237, 255, 0.3);
    transition: all 0.3s ease;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.carousel-item:hover img {
    border-color: #00edff;
    transform: scale(1.02);
    box-shadow: 0 0 clamp(15px, 2vw, 25px) rgba(0, 237, 255, 0.4);
}

.carousel-item h3 {
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    font-weight: 500;
    margin-top: clamp(0.75rem, 1.5vh, 1rem);
    margin-bottom: clamp(0.25rem, 0.5vh, 0.5rem);
    letter-spacing: clamp(0.5px, 0.1vw, 1px);
    pointer-events: none;
}

.carousel-item p {
    color: #00edff;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(0.75rem, 1.2vw, 0.875rem);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: clamp(0.5px, 0.1vw, 1px);
    pointer-events: none;
}

/* Cast & Crew Responsive Styles */
@media (max-width: 1024px) {
    .carousel-container {
        width: clamp(75%, 80vw, 90%);
    }

    .carousel-item {
        width: clamp(180px, 22vw, 250px);
    }

    .carousel-item img {
        height: clamp(250px, 30vw, 350px);
    }
}

@media (max-width: 768px) {
    .castcrew-section {
        padding: clamp(3rem, 6vh, 4rem) 0;
    }

    .carousel-container {
        width: 90%;
    }

    .carousel-track {
        gap: clamp(1rem, 2vw, 1.5rem);
    }

    .carousel-item {
        width: clamp(150px, 35vw, 200px);
    }

    .carousel-item img {
        height: clamp(210px, 50vw, 280px);
    }

    .carousel-item h3 {
        font-size: clamp(0.85rem, 2.5vw, 1rem);
    }

    .carousel-item p {
        font-size: clamp(0.7rem, 2vw, 0.8rem);
    }
}

@media (max-width: 480px) {
    .carousel-container {
        width: 95%;
    }

    .carousel-track {
        gap: clamp(0.75rem, 1.5vw, 1rem);
    }

    .carousel-item {
        width: clamp(130px, 40vw, 170px);
    }

    .carousel-item img {
        height: clamp(180px, 55vw, 240px);
    }
}

/* ===============================================
   FINAL LOOK SECTION
   =============================================== */

.final-look-section {
    position: relative;
    min-height: 100vh;
    width: 100vw;
    max-width: clamp(1600px, 95vw, 1920px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: clamp(4rem, 8vh, 6rem) 0;
    padding-top: clamp(34rem, 40vh, 40rem);
    overflow: visible;
    margin-bottom: clamp(1.5rem, 2vh, 2rem);
    justify-content: flex-start;
    align-items: center;
}

.behindscenes-container h2 {
    color: white;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(80px, 12vw, 150px);
    letter-spacing: clamp(3px, 0.3vw, 4.64px);
    line-height: 0.85;
    white-space: nowrap;
    display: inline-block;
    transform: scaleY(1.5);
    transform-origin: center;
    text-transform: uppercase;
    margin-bottom: clamp(2rem, 4vh, 4rem);
    margin-left: clamp(10rem, 13vw, 13rem);
}

/* Final Look Carousel */
.finallook-carousel-wrapper {
    display: flex;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: clamp(80%, 85vw, 90%);
    max-width: clamp(1200px, 90vw, 1400px);
    margin: 0 auto;
    margin-left: clamp(12rem, 15vw, 15rem);
    align-items: center;
    justify-content: center;
}

.finallook-main-image {
    flex: 1;
    max-width: clamp(500px, 60%, 900px);
    height: clamp(400px, 60vh, 700px);
    overflow: hidden;
    border-radius: clamp(12px, 1.5vw, 20px);
    border: clamp(1.5px, 0.15vw, 2px) solid rgba(0, 237, 255, 0.3);
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.finallook-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}

.finallook-thumbnail-container {
    position: relative;
    width: clamp(100px, 12vw, 180px);
    height: clamp(400px, 60vh, 700px);
    overflow: hidden;
    cursor: grab;
    border-radius: clamp(8px, 1vw, 12px);
    background: rgba(0, 0, 0, 0.3);
}

.finallook-thumbnail-container:active {
    cursor: grabbing;
}

.finallook-thumbnail-track {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.5vh, 1.25rem);
    padding: clamp(0.75rem, 1.5vh, 1.25rem);
    transition: transform 0.3s ease-out;
    will-change: transform;
}

.finallook-thumbnail {
    flex: 0 0 auto;
    width: 100%;
    height: clamp(80px, 12vh, 140px);
    border-radius: clamp(6px, 0.8vw, 10px);
    border: clamp(1.5px, 0.15vw, 2px) solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    pointer-events: auto;
}

.finallook-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.finallook-thumbnail:hover {
    border-color: rgba(0, 237, 255, 0.6);
    transform: scale(1.05);
    box-shadow: 0 0 clamp(10px, 1.5vw, 15px) rgba(0, 237, 255, 0.3);
}

.finallook-thumbnail.active {
    border-color: #00edff;
    box-shadow: 0 0 clamp(15px, 2vw, 20px) rgba(0, 237, 255, 0.5);
}
/* ===============================================
   TV POPUP & BUTTON RESPONSIVE STYLES
   =============================================== */
@media (max-width: 1024px) {
    .tv-press-button {
        padding: clamp(0.6rem, 1.2vw, 0.8rem) clamp(1.2rem, 2.5vw, 1.5rem);
        font-size: clamp(0.75rem, 1.3vw, 0.95rem);
    }

    .tv-popup {
        width: clamp(280px, 70%, 550px);
        max-height: 85%;
        padding: clamp(1.25rem, 2.5vw, 2rem);
    }

    .tv-popup-close {
        width: clamp(28px, 3.5vw, 35px);
        height: clamp(28px, 3.5vw, 35px);
        font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    }

    .tv-popup-text {
        font-size: clamp(0.8rem, 1.3vw, 0.9rem);
    }
}

@media (max-width: 768px) {
    .tv-press-button {
        top: 50%;
        padding: clamp(0.5rem, 1vw, 0.7rem) clamp(1rem, 2vw, 1.3rem);
        font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    }

    .tv-popup {
        width: clamp(250px, 80%, 450px);
        max-height: 90%;
        padding: clamp(1rem, 2vw, 1.5rem);
    }

    .tv-popup-image {
        width: clamp(180px, 70%, 350px);
    }

    .tv-popup-text {
        font-size: clamp(0.75rem, 1.2vw, 0.85rem);
        line-height: 1.5;
    }
}

@media (max-width: 480px) {
    .tv-press-button {
        padding: clamp(0.4rem, 0.8vw, 0.6rem) clamp(0.8rem, 1.5vw, 1.1rem);
        font-size: clamp(0.65rem, 1vw, 0.75rem);
        border-radius: clamp(20px, 2.5vw, 28px);
    }

    .tv-popup {
        width: 90%;
        max-height: 92%;
        padding: clamp(0.75rem, 1.5vw, 1.25rem);
        border-radius: clamp(10px, 1.2vw, 16px);
    }

    .tv-popup-close {
        width: clamp(25px, 3vw, 30px);
        height: clamp(25px, 3vw, 30px);
        font-size: clamp(1rem, 1.5vw, 1.3rem);
    }

    .tv-popup-image {
        width: clamp(150px, 80%, 300px);
    }

    .tv-popup-text {
        font-size: clamp(0.7rem, 1vw, 0.8rem);
        line-height: 1.4;
    }
}

/* ===============================================
   FINAL LOOK CAROUSEL RESPONSIVE STYLES
   =============================================== */
@media (max-width: 1024px) {
    .final-look-section {
        padding-top: clamp(25rem, 30vh, 32rem);
        padding-bottom: clamp(3rem, 6vh, 5rem);
    }

    .behindscenes-container h2 {
        font-size: clamp(70px, 10vw, 120px);
        margin-bottom: clamp(1.5rem, 3vh, 3rem);
    }

    .finallook-carousel-wrapper {
        width: clamp(85%, 88vw, 92%);
        gap: clamp(1.25rem, 2.5vw, 2.5rem);
    }

    .finallook-main-image {
        max-width: clamp(500px, 65%, 850px);
        height: clamp(350px, 50vh, 600px);
    }

    .finallook-thumbnail-container {
        width: clamp(90px, 11vw, 160px);
        height: clamp(350px, 50vh, 600px);
    }

    .finallook-thumbnail {
        height: clamp(70px, 11vh, 120px);
    }

    .finallook-thumbnail-track {
        gap: clamp(0.6rem, 1.2vh, 1rem);
        padding: clamp(0.6rem, 1.2vh, 1rem);
    }
}

@media (max-width: 768px) {
    .final-look-section {
        padding-top: clamp(20rem, 25vh, 28rem);
        padding-bottom: clamp(2.5rem, 5vh, 4rem);
        min-height: auto;
    }

    .behindscenes-container h2 {
        font-size: clamp(60px, 8vw, 100px);
        margin-bottom: clamp(1.25rem, 2.5vh, 2.5rem);
    }

    .finallook-carousel-wrapper {
        flex-direction: column;
        width: 90%;
        gap: clamp(1.5rem, 3vh, 2rem);
    }

    .finallook-main-image {
        max-width: 100%;
        width: 100%;
        height: clamp(300px, 45vh, 500px);
    }

    .finallook-thumbnail-container {
        width: 100%;
        height: clamp(100px, 15vh, 140px);
        overflow-x: auto;
        overflow-y: hidden;
    }

    .finallook-thumbnail-track {
        flex-direction: row;
        gap: clamp(0.75rem, 1.5vw, 1.25rem);
        padding: clamp(0.75rem, 1.5vw, 1.25rem);
    }

    .finallook-thumbnail {
        width: clamp(80px, 18vw, 120px);
        height: 100%;
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    .final-look-section {
        padding-top: clamp(15rem, 20vh, 22rem);
        padding-bottom: clamp(2rem, 4vh, 3rem);
    }

    .behindscenes-container h2 {
        font-size: clamp(50px, 7vw, 80px);
        margin-bottom: clamp(1rem, 2vh, 2rem);
    }

    .finallook-carousel-wrapper {
        width: 95%;
        gap: clamp(1rem, 2vh, 1.5rem);
    }

    .finallook-main-image {
        height: clamp(250px, 40vh, 400px);
        border-radius: clamp(10px, 1.2vw, 16px);
    }

    .finallook-thumbnail-container {
        height: clamp(80px, 12vh, 110px);
        border-radius: clamp(6px, 0.8vw, 10px);
    }

    .finallook-thumbnail {
        width: clamp(70px, 16vw, 100px);
        border-radius: clamp(5px, 0.6vw, 8px);
    }

    .finallook-thumbnail-track {
        gap: clamp(0.5rem, 1vw, 0.85rem);
        padding: clamp(0.5rem, 1vw, 0.85rem);
    }

    .finallook-thumbnail:hover {
        transform: scale(1.02);
    }
}

/* ===============================================
   RUN LARGE BREAKPOINT MEDIA QUERIES
   =============================================== */

/* 1440px Breakpoint */
@media screen and (min-width: 1025px) and (max-width: 1440px) {
    .run-overview-container h1 {
        font-size: clamp(95px, 6.8vw, 107px);
        letter-spacing: clamp(3.5px, 0.28vw, 4.64px);
    }

    .run-rectangle-container {
        top: clamp(0.9rem, 1.1vh, 1rem);
        max-width: clamp(1250px, 88vw, 1350px);
    }

    .run-tab-buttons-container {
        margin-top: clamp(2.8rem, 3.2vh, 3rem);
        left: clamp(11rem, 12vw, 12rem);
    }

    .run-tab-content-container {
        left: clamp(26rem, 28vw, 28rem);
    }

    .runbrief-buttons-container {
        left: clamp(30%, 32vw, 33%);
    }

    .visual-dev-grid-wrapper {
        margin-left: clamp(17rem, 18vw, 19rem);
    }

    .castcrew-header h2 {
        font-size: clamp(95px, 6.8vw, 107px);
    }

    .behindscenes-container h2 {
        margin-left: clamp(11rem, 12vw, 12rem);
    }

    .finallook-carousel-wrapper {
        margin-left: clamp(13rem, 14vw, 14rem);
    }
}

/* 1920px (1080p) Breakpoint */
@media screen and (min-width: 1441px) and (max-width: 1920px) {
    .run-overview-container h1 {
        font-size: clamp(100px, 6.5vw, 120px);
        letter-spacing: clamp(4px, 0.25vw, 5px);
    }

    .run-rectangle-container {
        top: clamp(0.95rem, 1.05vh, 1rem);
        max-width: clamp(1350px, 85vw, 1500px);
    }

    .run-tab-buttons-container {
        margin-top: clamp(2.9rem, 3.1vh, 3rem);
        left: clamp(12rem, 13vw, 13rem);
    }

    .run-tab-content-container {
        max-width: clamp(700px, 82vw, 850px);
        left: clamp(27rem, 28vw, 29rem);
    }

    .runbrief-buttons-container {
        left: clamp(32%, 33vw, 34%);
        gap: clamp(1.75rem, 2.3vw, 2rem);
    }

    .runbrief-button {
        width: clamp(190px, 11.5vw, 210px);
        height: clamp(75px, 4.8vw, 85px);
    }

    .visual-dev-grid-wrapper {
        margin-left: clamp(18rem, 19vw, 20rem);
        max-width: clamp(1400px, 88vw, 1700px);
    }

    .castcrew-header h2 {
        font-size: clamp(100px, 6.5vw, 120px);
    }

    .carousel-container {
        max-width: clamp(1350px, 88vw, 1500px);
    }

    .carousel-item {
        width: clamp(230px, 15vw, 250px);
    }

    .behindscenes-container h2 {
        font-size: clamp(120px, 11vw, 160px);
        margin-left: clamp(12rem, 12.5vw, 13rem);
    }

    .finallook-carousel-wrapper {
        margin-left: clamp(14rem, 14.5vw, 15rem);
        max-width: clamp(1350px, 88vw, 1500px);
    }

    .finallook-main-image {
        max-width: clamp(650px, 58%, 950px);
        height: clamp(500px, 58vh, 750px);
    }

    .finallook-thumbnail-container {
        height: clamp(500px, 58vh, 750px);
    }
}

/* 2560px (2K) Breakpoint */
@media screen and (min-width: 1921px) and (max-width: 2560px) {
    .run-overview-container h1 {
        font-size: clamp(110px, 6vw, 140px);
        letter-spacing: clamp(4.5px, 0.22vw, 6px);
    }

    .run-rectangle-container {
        top: clamp(0.97rem, 1.02vh, 1rem);
        max-width: clamp(1500px, 82vw, 1700px);
    }

    .run-tab-buttons-container {
        margin-top: clamp(2.95rem, 3.05vh, 3rem);
        left: clamp(12.5rem, 12.5vw, 14rem);
        gap: clamp(3rem, 4.5vw, 5.5rem);
    }

    .run-tab-icon {
        width: clamp(140px, 15vw, 160px);
        height: clamp(140px, 15vw, 160px);
    }

    .run-tab-content-container {
        max-width: clamp(750px, 80vw, 900px);
        left: clamp(28rem, 28vw, 30rem);
    }

    .runbrief-buttons-container {
        left: clamp(33%, 33.5vw, 34%);
    }

    .runbrief-button {
        width: clamp(200px, 11vw, 220px);
        height: clamp(80px, 4.5vw, 90px);
    }

    .visual-dev-grid-wrapper {
        margin-left: clamp(19rem, 19.5vw, 21rem);
        max-width: clamp(1600px, 86vw, 1800px);
    }

    .castcrew-header h2 {
        font-size: clamp(110px, 6vw, 140px);
    }

    .carousel-container {
        max-width: clamp(1500px, 86vw, 1700px);
    }

    .carousel-item {
        width: clamp(240px, 14vw, 260px);
    }

    .carousel-item img {
        height: clamp(350px, 24vw, 450px);
    }

    .behindscenes-container h2 {
        font-size: clamp(140px, 10vw, 180px);
        margin-left: clamp(13rem, 12.5vw, 14rem);
    }

    .finallook-carousel-wrapper {
        margin-left: clamp(15rem, 14.5vw, 16rem);
        max-width: clamp(1500px, 86vw, 1700px);
    }

    .finallook-main-image {
        max-width: clamp(700px, 56%, 1000px);
        height: clamp(550px, 56vh, 800px);
    }

    .finallook-thumbnail-container {
        width: clamp(140px, 11.5vw, 200px);
        height: clamp(550px, 56vh, 800px);
    }
}

/* 3840px (4K) Breakpoint */
@media screen and (min-width: 2561px) and (max-width: 3840px) {
    .run-overview-container h1 {
        font-size: clamp(130px, 5.5vw, 170px);
        letter-spacing: clamp(5px, 0.2vw, 7px);
    }

    .run-rectangle-container {
        top: clamp(0.98rem, 1.01vh, 1rem);
        max-width: clamp(1700px, 78vw, 2000px);
    }

    .run-tab-buttons-container {
        margin-top: clamp(2.97rem, 3.02vh, 3rem);
        left: clamp(14rem, 12vw, 16rem);
        gap: clamp(4rem, 4vw, 6rem);
    }

    .run-tab-icon {
        width: clamp(150px, 14vw, 180px);
        height: clamp(150px, 14vw, 180px);
    }

    .run-tab-content-container {
        max-width: clamp(850px, 75vw, 1000px);
        left: clamp(30rem, 27vw, 32rem);
    }

    .run-tab-content h3 {
        font-size: clamp(1.4rem, 1.6vw, 1.8rem);
    }

    .run-tab-content p {
        font-size: clamp(16px, 0.95vw, 18px);
    }

    .runbrief-buttons-container {
        left: clamp(33.5%, 34vw, 34.5%);
    }

    .runbrief-button {
        width: clamp(210px, 10.5vw, 240px);
        height: clamp(85px, 4.2vw, 95px);
    }

    .visual-dev-grid-wrapper {
        margin-left: clamp(20rem, 19vw, 23rem);
        max-width: clamp(1800px, 84vw, 2100px);
    }

    .castcrew-header h2 {
        font-size: clamp(130px, 5.5vw, 170px);
    }

    .carousel-container {
        max-width: clamp(1700px, 84vw, 2000px);
    }

    .carousel-item {
        width: clamp(250px, 13vw, 280px);
    }

    .carousel-item img {
        height: clamp(400px, 22vw, 500px);
    }

    .behindscenes-container h2 {
        font-size: clamp(160px, 9vw, 200px);
        margin-left: clamp(14rem, 12vw, 16rem);
    }

    .finallook-carousel-wrapper {
        margin-left: clamp(16rem, 14vw, 18rem);
        max-width: clamp(1700px, 84vw, 2000px);
    }

    .finallook-main-image {
        max-width: clamp(800px, 54%, 1100px);
        height: clamp(600px, 54vh, 900px);
    }

    .finallook-thumbnail-container {
        width: clamp(160px, 11vw, 220px);
        height: clamp(600px, 54vh, 900px);
    }

    .finallook-thumbnail {
        height: clamp(100px, 11vh, 160px);
    }
}

/* 3841px+ (Beyond 4K) Breakpoint */
@media screen and (min-width: 3841px) {
    .run-overview-container h1 {
        font-size: clamp(145px, 5vw, 200px);
        letter-spacing: clamp(6px, 0.18vw, 8px);
    }

    .run-rectangle-container {
        top: clamp(0.99rem, 1.005vh, 1rem);
        max-width: clamp(2000px, 75vw, 2400px);
    }

    .run-tab-buttons-container {
        margin-top: clamp(2.98rem, 3.01vh, 3rem);
        left: clamp(16rem, 11vw, 18rem);
        gap: clamp(5rem, 3.8vw, 7rem);
    }

    .run-tab-icon {
        width: clamp(170px, 13vw, 200px);
        height: clamp(170px, 13vw, 200px);
    }

    .run-tab-content-container {
        max-width: clamp(950px, 70vw, 1200px);
        left: clamp(32rem, 26vw, 35rem);
    }

    .run-tab-content h3 {
        font-size: clamp(1.6rem, 1.5vw, 2rem);
    }

    .run-tab-content p {
        font-size: clamp(17px, 0.9vw, 20px);
    }

    .runbrief-buttons-container {
        left: clamp(34%, 34.5vw, 35%);
    }

    .runbrief-button {
        width: clamp(220px, 10vw, 260px);
        height: clamp(90px, 4vw, 100px);
    }

    .visual-dev-grid-wrapper {
        margin-left: clamp(22rem, 18vw, 26rem);
        max-width: clamp(2000px, 82vw, 2500px);
    }

    .castcrew-header h2 {
        font-size: clamp(145px, 5vw, 200px);
    }

    .carousel-container {
        max-width: clamp(2000px, 82vw, 2400px);
    }

    .carousel-item {
        width: clamp(260px, 12vw, 300px);
    }

    .carousel-item img {
        height: clamp(450px, 20vw, 550px);
    }

    .behindscenes-container h2 {
        font-size: clamp(180px, 8.5vw, 230px);
        margin-left: clamp(16rem, 11.5vw, 18rem);
    }

    .finallook-carousel-wrapper {
        margin-left: clamp(18rem, 13.5vw, 20rem);
        max-width: clamp(2000px, 82vw, 2400px);
    }

    .finallook-main-image {
        max-width: clamp(900px, 52%, 1300px);
        height: clamp(700px, 52vh, 1000px);
    }

    .finallook-thumbnail-container {
        width: clamp(180px, 10.5vw, 240px);
        height: clamp(700px, 52vh, 1000px);
    }

    .finallook-thumbnail {
        height: clamp(120px, 10vh, 180px);
    }
}

/* ===============================================
   FINAL FILM CLIPS SECTION
   =============================================== */

/* Final Film Clips Header */
.finalfilmclips-container {
    width: 100%;
    margin-top: clamp(8rem, 12vh, 10rem);
    margin-bottom: clamp(2rem, 4vh, 4rem);
}

.finalfilmclips-container h2 {
    color: white;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(80px, 12vw, 150px);
    letter-spacing: 4.64px;
    line-height: 0.85;
    white-space: nowrap;
    display: inline-block;
    transform: scaleY(1.5);
    transform-origin: center;
    text-transform: uppercase;
    margin-left: 23.5rem;
}

/* Film Clips Grid */
.filmclips-grid-wrapper {
    width: 78%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 clamp(1rem, 3vw, 2rem);
    margin-left: 16rem;
}

.filmclips-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: clamp(0.25rem, 0.5vw, 0.5rem);
    width: clamp(80%, 85vw, 90%);
    max-width: 1400px;
}

.filmclip-item {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

.filmclip-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.filmclip-item:hover img {
    transform: scale(1.05);
}

/* ===============================================
   FINAL FILM CLIPS RESPONSIVE STYLES
   =============================================== */
@media (max-width: 1024px) {
    .finalfilmclips-container {
        margin-top: clamp(6rem, 10vh, 8rem);
        margin-bottom: clamp(1.5rem, 3vh, 3rem);
    }

    .finalfilmclips-container h2 {
        font-size: clamp(70px, 10vw, 120px);
        margin-left: clamp(18rem, 20vw, 22rem);
    }

    .filmclips-grid-wrapper {
        width: clamp(75%, 78vw, 82%);
        margin-left: clamp(12rem, 15vw, 15rem);
    }

    .filmclips-grid {
        width: clamp(85%, 88vw, 92%);
        gap: clamp(0.2rem, 0.4vw, 0.4rem);
    }
}

@media (max-width: 768px) {
    .finalfilmclips-container {
        margin-top: clamp(4rem, 8vh, 6rem);
        margin-bottom: clamp(1.25rem, 2.5vh, 2.5rem);
    }

    .finalfilmclips-container h2 {
        font-size: clamp(60px, 8vw, 100px);
        margin-left: clamp(10rem, 15vw, 18rem);
    }

    .filmclips-grid-wrapper {
        width: 85%;
        margin-left: clamp(8rem, 12vw, 12rem);
    }

    .filmclips-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
        width: 90%;
        gap: clamp(0.3rem, 0.6vw, 0.6rem);
    }

    .filmclip-item:hover img {
        transform: scale(1.03);
    }
}

@media (max-width: 480px) {
    .finalfilmclips-container {
        margin-top: clamp(3rem, 6vh, 5rem);
        margin-bottom: clamp(1rem, 2vh, 2rem);
    }

    .finalfilmclips-container h2 {
        font-size: clamp(50px, 7vw, 80px);
        margin-left: clamp(3rem, 8vw, 8rem);
    }

    .filmclips-grid-wrapper {
        width: 90%;
        margin-left: clamp(2rem, 5vw, 5rem);
        padding: 0 clamp(0.5rem, 1.5vw, 1rem);
    }

    .filmclips-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(8, 1fr);
        width: 95%;
        gap: clamp(0.4rem, 0.8vw, 0.8rem);
    }

    .filmclip-item {
        aspect-ratio: 16 / 9;
    }

    .filmclip-item:hover img {
        transform: scale(1.02);
    }
}

/* ===========================
   YOUTUBE CALL-TO-ACTION
   =========================== */

.youtube-cta-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: clamp(6rem, 10vh, 10rem);
    margin-bottom: clamp(4rem, 6vh, 6rem);
    margin-left: 16rem;
    padding: 0 clamp(1rem, 3vw, 2rem);
}

.youtube-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 1.5vw, 1.5rem);
    padding: clamp(1.25rem, 2.5vw, 2rem) clamp(2.5rem, 5vw, 4rem);
    background: rgba(0, 237, 255, 0.15);
    border: 3px solid #00edff;
    border-radius: clamp(50px, 6vw, 60px);
    color: #00edff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: clamp(2px, 0.3vw, 3px);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.4s ease;
    box-shadow: 0 0 clamp(20px, 3vw, 30px) rgba(0, 237, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.youtube-cta-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(0, 237, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.youtube-cta-button:hover::before {
    width: 400px;
    height: 400px;
}

.youtube-cta-button:hover {
    background: rgba(0, 237, 255, 0.25);
    border-color: #00edff;
    box-shadow: 0 0 clamp(30px, 5vw, 50px) rgba(0, 237, 255, 0.6);
    transform: scale(1.05);
}

.cta-text {
    position: relative;
    z-index: 1;
    transform: scaleY(1.5);
    transform-origin: center;
}

.cta-arrow {
    position: relative;
    z-index: 1;
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    transition: transform 0.3s ease;
}

.youtube-cta-button:hover .cta-arrow {
    transform: translateX(clamp(5px, 1vw, 10px));
}

/* ===========================
   YOUTUBE CTA MEDIA QUERIES
   =========================== */

@media (max-width: 1024px) {
    .youtube-cta-container {
        margin-top: clamp(5rem, 8vh, 8rem);
        margin-bottom: clamp(3rem, 5vh, 5rem);
        margin-left: clamp(12rem, 15vw, 14rem);
    }

    .youtube-cta-button {
        padding: clamp(1rem, 2vw, 1.5rem) clamp(2rem, 4vw, 3rem);
        font-size: clamp(1.25rem, 2.5vw, 2rem);
        border-width: 2.5px;
    }

    .cta-arrow {
        font-size: clamp(1.5rem, 3vw, 2.5rem);
    }
}

@media (max-width: 768px) {
    .youtube-cta-container {
        margin-top: clamp(4rem, 6vh, 6rem);
        margin-bottom: clamp(2.5rem, 4vh, 4rem);
        margin-left: clamp(8rem, 12vw, 10rem);
        padding: 0 clamp(1.5rem, 4vw, 2rem);
    }

    .youtube-cta-button {
        padding: clamp(1rem, 2vw, 1.25rem) clamp(1.75rem, 4vw, 2.5rem);
        font-size: clamp(1.125rem, 2.5vw, 1.5rem);
        gap: clamp(0.5rem, 1vw, 1rem);
        border-width: 2px;
        border-radius: clamp(40px, 5vw, 50px);
    }

    .cta-arrow {
        font-size: clamp(1.25rem, 2.5vw, 2rem);
    }

    .youtube-cta-button:hover {
        transform: scale(1.03);
    }
}

@media (max-width: 480px) {
    .youtube-cta-container {
        margin-top: clamp(3rem, 5vh, 4rem);
        margin-bottom: clamp(2rem, 3vh, 3rem);
        margin-left: clamp(2rem, 5vw, 4rem);
        padding: 0 1rem;
    }

    .youtube-cta-button {
        padding: clamp(0.875rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2rem);
        font-size: clamp(1rem, 2.5vw, 1.25rem);
        gap: clamp(0.375rem, 1vw, 0.75rem);
        border-width: 2px;
        border-radius: 35px;
        width: 95%;
        max-width: 320px;
    }

    .cta-arrow {
        font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    }

    .youtube-cta-button:hover {
        transform: scale(1.02);
    }

    .youtube-cta-button:hover .cta-arrow {
        transform: translateX(5px);
    }
}


/* Footer section */
.overlay-footer {
    text-align: center;
}

.footer-divider {
    width: 200px;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(0, 255, 255, 0.5), 
        transparent
    );
    margin: 0 auto 2rem auto;
}

/* Close/Enter button */
.close-overlay-btn {
    position: relative;
    padding: 1rem 3rem;
    background: rgba(0, 255, 255, 0.1);
    border: 2px solid rgba(0, 255, 255, 0.5);
    border-radius: 4px;
    color: rgba(0, 255, 255, 1);
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.close-overlay-btn:hover {
    background: rgba(0, 255, 255, 0.2);
    border-color: rgba(0, 255, 255, 1);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.4);
    transform: translateY(-2px);
}

.btn-text {
    position: relative;
    z-index: 1;
}

.btn-arrow {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.close-overlay-btn:hover .btn-arrow {
    transform: translateX(5px);
}

/* Button scanline effect */
.btn-scanline {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    animation: btnScan 2s linear infinite;
}

@keyframes btnScan {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}


/* ===========================
   FOOTER HINT STYLES
   =========================== */

.footer-hint {
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 300;
    margin-top: 1rem;
}

/* Corner accents */
.corner-accent {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid rgba(0, 255, 255, 0.3);
    pointer-events: none;
}

.corner-accent.corner-tl {
    top: 20px;
    left: 20px;
    border-right: none;
    border-bottom: none;
    animation: cornerGlow 3s ease-in-out infinite;
}

.corner-accent.corner-tr {
    top: 20px;
    right: 20px;
    border-left: none;
    border-bottom: none;
    animation: cornerGlow 3s ease-in-out infinite 0.75s;
}

.corner-accent.corner-bl {
    bottom: 20px;
    left: 20px;
    border-right: none;
    border-top: none;
    animation: cornerGlow 3s ease-in-out infinite 1.5s;
}

.corner-accent.corner-br {
    bottom: 20px;
    right: 20px;
    border-left: none;
    border-top: none;
    animation: cornerGlow 3s ease-in-out infinite 2.25s;
}

@keyframes cornerGlow {
    0%, 100% {
        opacity: 0.3;
        box-shadow: 0 0 0 rgba(0, 255, 255, 0);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
    }
}



/* ===============================================
   CONSTANTINE HERO SECTION 1
   =============================================== */

.constantine-hero-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: clamp(100vh, 100vh, 120vh);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.constantine-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(1.02); /* Slight scale to prevent white edges during transitions */
}

.constantine-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease-out;
    will-change: transform; /* Optimizes performance for transform animations */
    transform: scale(1);
}

.constantine-content {
    position: relative;
    z-index: 2;
    width: min(90%, 1200px);
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 6rem);
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
}

.constantine-content h1 {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: clamp(0.2em, 1vw, 0.4em);
    text-shadow: 
        2px 2px 0 rgba(0, 0, 0, 0.5),
        -2px -2px 0 rgba(0, 255, 255, 0.3);
    transform: translateY(0);
    opacity: 1;
    animation: constantineTextReveal 1s ease-out forwards;
}


/* ===============================================
   CONSTANTINE SECTION 2
   =============================================== */

.constantine-overview-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: auto;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.constantine-title-container {
    position: absolute;
    top: 15%;
    left: 34%;
    text-align: left;
    width: auto;
    z-index: 1;
}

.constantine-title-container h1 {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(80px, 7vw, 107px);
    letter-spacing: clamp(3px, 0.3vw, 4.64px);
    line-height: 0.85;
    white-space: nowrap;
    display: inline-block;
    transform: scaleY(1.5);
    transform-origin: center;
}

.constantine-title-container p {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 300;
    line-height: 1.6;
}

.constantine-description-container {
    position: absolute;
    top: 50%;
    left: 34%;
    text-align: left;
    width: 50%;
    z-index: 1;
}

.constantine-description-container p {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: calc(16px * var(--font-scale));
    font-weight: 300;
    line-height: 1.6;
}

.constantine-skills-container {
    position: absolute;
    top: clamp(4rem, 4.6vh, 4.6rem);
    margin-right: clamp(-8rem, -6vw, -6rem);
    text-align: left;
    width: auto;
    z-index: 1;
}

.constantine-skills-container h2 {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: clamp(6px, 0.5vw, 8px);
}

.constantine-rectangle-container {
    position: absolute;
    top: 0;
    left: clamp(20rem, 27vw, 27rem);
    width: 72%;
    max-width: clamp(1200px, 90vw, 1400px);
    height: auto;
    z-index: -1;
    overflow: visible;
    margin: 0;
    padding: 0;
}

.constantine-rectangle-container img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: right center;
    margin: 0;
    padding: 0;
}

/* ---------------TAB BUTTONS WITH IMAGE GLOW--------------- */

.constbrief-buttons-container {
    position: absolute;
    left: 34%;
    display: flex;
    gap: clamp(1.5rem, 2vw, 2rem);
    width: auto;
    z-index: 1;
}

.constbrief-button {
    position: relative;
    width: clamp(180px, 12vw, 200px);
    height: clamp(70px, 5vw, 80px);
    top: clamp(1.5rem, 2vh, 2rem);
    background: none;
    border: none;
    cursor: pointer;
    overflow: visible;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* The actual button image */
.constbrief-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../ASSETS/IMGS/Proj1/TabButton.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: filter 0.3s ease, transform 0.3s ease;
    z-index: 0;
}

/* Glow effect on hover */
.constbrief-button:hover::before {
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.6)) 
            drop-shadow(0 0 15px rgba(0, 255, 255, 0.4))
            brightness(1.1);
    transform: scale(1.02);
}

/* Active state glow */
.constbrief-button.active::before {
    filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.8)) 
            drop-shadow(0 0 14px rgba(0, 255, 255, 0.5))
            brightness(1.10);
}

.constbrief-button-text {
    position: relative;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 500;
    letter-spacing: clamp(1px, 0.1vw, 1.5px);
    text-transform: uppercase;
    z-index: 1;
    transition: all 0.3s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

.constbrief-button:hover .constbrief-button-text {
    color: rgba(0, 255, 255, 1);
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8);
}

.constbrief-button.active .constbrief-button-text {
    color: rgba(0, 255, 255, 1);
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* ===========================
   CONSTANTINE SECTION MEDIA QUERIES
   =========================== */

@media (max-width: 1024px) {
    .constantine-title-container {
        top: 12%;
        left: 25%;
    }

    .constantine-description-container {
        top: 38%;
        left: 25%;
        width: 55%;
    }

    .constantine-skills-container {
        top: 3rem;
        right: 8%;
    }

    .constbrief-buttons-container {
        bottom: 38%;
        left: 25%;
    }
}

@media (max-width: 768px) {
    .constantine-title-container {
        top: 10%;
        left: 10%;
        width: 80%;
    }

    .constantine-title-container h1 {
        font-size: calc(80px * var(--font-scale));
    }

    .constantine-description-container {
        top: 32%;
        left: 10%;
        width: 70%;
    }

    .constantine-skills-container {
        top: 60%;
        right: auto;
        left: 10%;
        width: 80%;
    }

    .constantine-rectangle-container {
        width: 90%;
        opacity: 0.5;
    }

    .constbrief-buttons-container {
        bottom: 15%;
        left: 10%;
        gap: clamp(1.2rem, 2.5vw, 1.5rem);
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .constantine-title-container {
        top: 8%;
        left: 5%;
        width: 90%;
    }

    .constantine-title-container h1 {
        font-size: calc(60px * var(--font-scale));
    }

    .constantine-description-container {
        top: 28%;
        left: 5%;
        width: 85%;
    }

    .constantine-description-container p {
        font-size: calc(14px * var(--font-scale));
    }

    .constantine-skills-container {
        top: 55%;
        left: 5%;
        width: 90%;
    }

    .constantine-skills-container h2 {
        font-size: calc(14px * var(--font-scale));
    }

    .constantine-rectangle-container {
        width: 100%;
        opacity: 0.3;
    }

    .constbrief-buttons-container {
        bottom: 8%;
        left: 5%;
        gap: clamp(0.8rem, 2vw, 1rem);
        flex-wrap: wrap;
    }

    .constbrief-button {
        width: clamp(150px, 40vw, 160px);
        height: clamp(65px, 18vw, 70px);
    }
}


/* ===============================================
   CONSTANTINE SECTION 3
   =============================================== */

   .constbrief-content-container {
    position: relative;
    margin-top: 20vh;
    margin-left: 21rem;
    width: clamp(50%, 55%, 60%);
    min-height: clamp(200px, 20vh, 250px);
    z-index: 9;
    margin-bottom: clamp(1.5rem, 2vh, 2rem);
    padding: 0;
}

.constbrief-content {
    display: none;
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

.constbrief-content.active {
    display: flex;
    gap: clamp(2rem, 3vw, 3rem);
    align-items: center;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.constbrief-content-text {
    flex: 1;
}

.constbrief-grid-container {
    position: relative;
    margin-left: clamp(-22rem, -15vw, -18rem);
    margin-bottom: clamp(10vh, 12vh, 15vh);
    margin-top: clamp(-40%, -37%, -34%);
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: clamp(5%, 7%, 9%);
    width: 100%;
    max-width: clamp(1200px, 90vw, 1400px);
}

.constbrief-column-item1 h2 {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(16px, 1.1vw, 18px);
    font-weight: 100;
}

.constbrief-column-item2 p {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 300;
    line-height: 1.5;
}

.constbrief-column-item3 h2 {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(16px, 1.1vw, 18px);
    font-weight: 100;
}

.constbrief-column-item4 p {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 300;
    line-height: 1.5;
}

.constbrief-column-item5 h2 {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(16px, 1.1vw, 18px);
    font-weight: 100;
}

.constbrief-column-item6 p {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 300;
    line-height: 1.5;
}

.constbrief-column-item7 h2 {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(16px, 1.1vw, 18px);
    font-weight: 100;
}

.constbrief-column-item8 p {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 300;
    line-height: 1.5;
}

/* ===========================
   CONSTANTINE SECTION MEDIA QUERIES
   =========================== */

@media (max-width: 1024px) {
    .constbrief-content-container {
        top: clamp(8vh, 10vh, 12vh);
        left: clamp(18rem, 24vw, 25rem);
        width: clamp(55%, 60%, 65%);
        max-width: clamp(650px, 85vw, 700px);
        padding: clamp(1.5rem, 2vw, 1.75rem);
        min-height: clamp(180px, 18vh, 220px);
    }

    .constbrief-buttons-container {
        bottom: clamp(36%, 38%, 40%);
        left: clamp(28%, 30%, 32%);
        gap: clamp(1.2rem, 1.5vw, 1.5rem);
    }

    .constbrief-grid-container {
        margin-top: clamp(-18%, -15%, -12%);
        gap: clamp(5%, 6%, 7%);
    }
}

@media (max-width: 768px) {
    .constbrief-content-container {
        top: clamp(6vh, 8vh, 10vh);
        left: clamp(8rem, 12vw, 15rem);
        width: clamp(65%, 70%, 75%);
        max-width: clamp(550px, 85vw, 600px);
        padding: clamp(1.2rem, 1.8vw, 1.5rem);
        min-height: clamp(160px, 16vh, 200px);
    }

    .constbrief-buttons-container {
        bottom: clamp(33%, 35%, 37%);
        left: clamp(18%, 20%, 22%);
        gap: clamp(0.8rem, 1.2vw, 1rem);
    }

    .constbrief-grid-container {
        margin-top: clamp(-20%, -17%, -14%);
        gap: clamp(4%, 5%, 6%);
    }
}

@media (max-width: 480px) {
    .constbrief-content-container {
        top: clamp(4vh, 6vh, 8vh);
        left: clamp(2rem, 5vw, 8rem);
        width: clamp(80%, 85%, 90%);
        max-width: 90%;
        padding: clamp(0.8rem, 1.2vw, 1rem);
        min-height: clamp(140px, 14vh, 180px);
    }

    .constbrief-buttons-container {
        bottom: clamp(28%, 30%, 32%);
        left: clamp(8%, 10%, 12%);
        gap: clamp(0.6rem, 0.9vw, 0.75rem);
        flex-wrap: wrap;
    }

    .constbrief-grid-container {
        margin-top: clamp(-22%, -19%, -16%);
        gap: clamp(3%, 4%, 5%);
        grid-template-columns: 1fr;
    }
}

/* ===============================================
   CONSTANTINE SECTION 4 - STORYBOARD
   =============================================== */

.constantine-storyboard-section {
    position: relative;
    top: clamp(-28rem, -18vw, -22rem);
    width: 100%;
    min-height: 100vh;
    padding: clamp(6rem, 10vh, 8rem) clamp(2rem, 5vw, 6rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
}

.storyboard-header {
    text-align: center;
    margin-bottom: clamp(1rem, 4vh, 3rem);
    margin-top: -10%;
    width: 100%;
}

.storyboard-header h2 {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(7rem, 10vw, 9rem);
    font-weight: 400;
    letter-spacing: clamp(3px, 0.5vw, 6px);
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    transform: translateY(clamp(15px, 2vh, 20px));
    z-index: 1;
}

.storyboard-header h2::after {
    content: '';
    position: relative;
    bottom: clamp(9rem, 11vh, 11rem);
    margin-left: clamp(-8rem, -6vw, -6rem);
    transform: translateX(-50%);
    width: clamp(60px, 15vw, 100px);
    height: clamp(1.5px, 0.15vw, 2px);
    background: linear-gradient(90deg, transparent, #00ffff, transparent);
}

.storyboard-grid-wrapper {
    width: clamp(65%, 70%, 75%);
    max-width: clamp(1400px, 90vw, 1600px);
    margin: 0 auto;
    margin-top: 0rem;
    z-index: 0;
}

.storyboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.8rem, 0.9vw, 0.9rem);
    width: 100%;
    margin-left: clamp(8rem, 12vw, 12rem);
    z-index: 0;
}

.storyboard-item {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: clamp(8px, 1vw, 12px);
    border: clamp(0.8px, 0.08vw, 1px) solid rgba(0, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.storyboard-item:hover {
    border-color: rgba(0, 255, 255, 0.6);
    box-shadow: 0 0 clamp(15px, 2vw, 20px) rgba(0, 255, 255, 0.3);
    transform: translateY(-5px);
}

.storyboard-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.storyboard-item:hover img {
    transform: scale(1.05);
}

/* Interactive Content Grid with Buttons */
.interactive-content-wrapper {
    width: clamp(65%, 70%, 75%);
    max-width: clamp(1400px, 90vw, 1600px);
    margin: clamp(6rem, 10vh, 10rem) auto 0;
    padding: 0 clamp(1rem, 2vw, 2rem);
}

.interactive-grid {
    display: grid;
    grid-template-columns: 75% 25%;
    gap: clamp(2rem, 4vw, 4rem);
    width: 100%;
    align-items: center;
    margin-left: clamp(6rem, 10vw, 10rem);
}

/* Content Area (Left 75%) */
.content-area {
    position: relative;
    width: 110%;
    min-height: clamp(400px, 50vh, 500px);
}

.content-block {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    display: grid;
    grid-template-columns: 40% 60%;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
}

.content-block.active {
    opacity: 1;
    visibility: visible;
    position: relative;
}

.content-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: clamp(8px, 1vw, 12px);
    border: clamp(1.5px, 0.15vw, 2px) solid rgba(0, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 clamp(15px, 2vw, 20px) rgba(0, 255, 255, 0.2);
}

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

.content-text {
    padding: clamp(1rem, 2vw, 2rem);
}

.content-text h3 {
    color: #00ffff;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(2rem, 3.5vw, 3.5rem);
    font-weight: 400;
    letter-spacing: clamp(2px, 0.3vw, 4px);
    text-transform: uppercase;
    margin-bottom: clamp(1rem, 2vh, 1.5rem);
    position: relative;
    display: inline-block;
}

.content-text h3::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    width: clamp(40px, 8vw, 60px);
    height: clamp(1.5px, 0.15vw, 2px);
    background: linear-gradient(90deg, #00ffff, transparent);
}

.content-text p {
    color: rgba(255, 255, 255, 0.8);
    font-family: "Montserrat", sans-serif;
    font-size: clamp(0.9rem, 1.1vw, 1.1rem);
    line-height: 1.8;
    font-weight: 300;
}

/* Button Controls (Right 25%) */
.button-controls {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vh, 2.5rem);
    align-items: center;
    justify-content: center;
}

.round-btn {
    width: clamp(80px, 8vw, 120px);
    height: clamp(80px, 8vw, 120px);
    border-radius: 50%;
    border: clamp(1.5px, 0.15vw, 2px) solid rgba(0, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.7);
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(1.5rem, 2vw, 2rem);
    letter-spacing: clamp(0.8px, 0.1vw, 1px);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.round-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(0, 255, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.round-btn:hover {
    border-color: rgba(0, 255, 255, 0.8);
    color: #00ffff;
    box-shadow: 0 0 clamp(20px, 2.5vw, 25px) rgba(0, 255, 255, 0.4);
    transform: scale(1.05);
}

.round-btn:hover::before {
    opacity: 1;
}

.round-btn.active {
    border-color: #00ffff;
    color: #00ffff;
    background: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 clamp(25px, 3vw, 30px) rgba(0, 255, 255, 0.5),
                inset 0 0 clamp(15px, 2vw, 20px) rgba(0, 255, 255, 0.1);
}

.round-btn.active::before {
    opacity: 1;
}

.btn-number {
    position: relative;
    z-index: 1;
}

/* Media Queries for Storyboard Section */

@media (max-width: 1024px) {
    .constantine-storyboard-section {
        padding: clamp(5rem, 8vh, 6rem) clamp(1.5rem, 4vw, 4rem);
    }

    .storyboard-header {
        margin-top: -10%;
        margin-bottom: clamp(1rem, 3vh, 2rem);
    }

    .storyboard-header h2 {
        font-size: clamp(5rem, 8vw, 7rem);
        transform: translateY(clamp(12px, 1.8vh, 15px));
    }

    .storyboard-header h2::after {
        bottom: clamp(7rem, 8vh, 8rem);
        margin-left: clamp(-7rem, -5vw, -5rem);
        height: clamp(1.5px, 0.15vw, 2px);
    }

    .storyboard-grid-wrapper {
        width: 75%;
        margin-top: -4rem;
    }

    .storyboard-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(0.7rem, 1vw, 1rem);
        margin-left: 8rem;
    }

    /* Interactive Content Grid - 1024px */
    .interactive-content-wrapper {
        width: 80%;
        margin-top: clamp(5rem, 8vh, 8rem);
    }

    .interactive-grid {
        gap: clamp(1.5rem, 3vw, 3rem);
    }

    .content-block {
        grid-template-columns: 45% 55%;
        gap: clamp(1.2rem, 2.5vw, 2.5rem);
    }

    .content-text h3 {
        font-size: clamp(1.8rem, 3vw, 3rem);
    }

    .content-text p {
        font-size: clamp(0.85rem, 1vw, 1rem);
    }

    .round-btn {
        width: clamp(70px, 7vw, 100px);
        height: clamp(70px, 7vw, 100px);
        font-size: clamp(1.3rem, 1.8vw, 1.8rem);
    }

    .button-controls {
        gap: clamp(1.2rem, 2.5vh, 2rem);
    }
}

@media (max-width: 768px) {
    .constantine-storyboard-section {
        padding: clamp(4rem, 6vh, 5rem) clamp(1rem, 3vw, 2rem);
    }

    .storyboard-header {
        margin-top: -8%;
        margin-bottom: clamp(0.75rem, 2vh, 1.5rem);
    }

    .storyboard-header h2 {
        font-size: clamp(3.5rem, 6vw, 5rem);
        letter-spacing: clamp(2px, 0.4vw, 4px);
        transform: translateY(clamp(8px, 1.5vh, 10px));
    }

    .storyboard-header h2::after {
        bottom: clamp(4rem, 5vh, 5rem);
        margin-left: clamp(-5rem, -4vw, -4rem);
        height: clamp(1.5px, 0.15vw, 2px);
        width: clamp(50px, 12vw, 80px);
    }

    .storyboard-grid-wrapper {
        width: 85%;
        margin-top: -3rem;
    }

    .storyboard-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(0.6rem, 0.9vw, 0.9rem);
        margin-left: 4rem;
    }

    .storyboard-item {
        border-radius: clamp(6px, 0.8vw, 10px);
    }

    /* Interactive Content Grid - 768px */
    .interactive-content-wrapper {
        width: 90%;
        margin-top: clamp(4rem, 6vh, 6rem);
    }

    .interactive-grid {
        grid-template-columns: 1fr;
        gap: clamp(2rem, 4vh, 3rem);
    }

    .content-area {
        min-height: auto;
    }

    .content-block {
        grid-template-columns: 1fr;
        gap: clamp(1.5rem, 3vh, 2rem);
    }

    .content-image {
        max-width: 400px;
        margin: 0 auto;
    }

    .content-text {
        text-align: center;
        padding: clamp(0.8rem, 1.5vw, 1.5rem);
    }

    .content-text h3 {
        font-size: clamp(1.6rem, 2.8vw, 2.5rem);
    }

    .content-text h3::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .content-text p {
        font-size: clamp(0.85rem, 1vw, 1rem);
    }

    .button-controls {
        flex-direction: row;
        gap: clamp(1.5rem, 4vw, 2rem);
        justify-content: center;
    }

    .round-btn {
        width: clamp(60px, 10vw, 80px);
        height: clamp(60px, 10vw, 80px);
        font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    }
}

@media (max-width: 480px) {
    .constantine-storyboard-section {
        padding: clamp(3rem, 5vh, 4rem) clamp(0.75rem, 2vw, 1.5rem);
    }

    .storyboard-header {
        margin-top: -5%;
        margin-bottom: clamp(0.5rem, 1.5vh, 1rem);
    }

    .storyboard-header h2 {
        font-size: clamp(2.5rem, 5vw, 3.5rem);
        letter-spacing: clamp(1.5px, 0.3vw, 3px);
        transform: translateY(clamp(6px, 1.2vh, 8px));
    }

    .storyboard-header h2::after {
        bottom: clamp(2.5rem, 3vh, 3rem);
        margin-left: clamp(-4rem, -3vw, -3rem);
        height: clamp(1.5px, 0.15vw, 2px);
        width: clamp(40px, 10vw, 60px);
    }

    .storyboard-grid-wrapper {
        width: 95%;
        margin-top: -2rem;
    }

    .storyboard-grid {
        grid-template-columns: 1fr;
        gap: clamp(0.5rem, 0.8vw, 0.8rem);
        margin-left: 0;
    }

    .storyboard-item {
        aspect-ratio: 16 / 10;
        border-radius: clamp(4px, 0.6vw, 8px);
    }

    /* Interactive Content Grid - 480px */
    .interactive-content-wrapper {
        width: 95%;
        margin-top: clamp(3rem, 5vh, 5rem);
        padding: 0 clamp(0.5rem, 1vw, 1rem);
    }

    .interactive-grid {
        gap: clamp(1.5rem, 3vh, 2rem);
    }

    .content-block {
        gap: clamp(1rem, 2vh, 1.5rem);
    }

    .content-image {
        max-width: 100%;
    }

    .content-text {
        padding: clamp(0.5rem, 1vw, 1rem);
    }

    .content-text h3 {
        font-size: clamp(1.4rem, 2.5vw, 2rem);
        margin-bottom: clamp(0.8rem, 1.5vh, 1.2rem);
    }

    .content-text h3::after {
        width: clamp(30px, 6vw, 50px);
    }

    .content-text p {
        font-size: clamp(0.8rem, 0.95vw, 0.95rem);
        line-height: 1.6;
    }

    .button-controls {
        gap: clamp(1rem, 3vw, 1.5rem);
    }

    .round-btn {
        width: clamp(50px, 12vw, 70px);
        height: clamp(50px, 12vw, 70px);
        font-size: clamp(1rem, 1.5vw, 1.3rem);
    }
}

/* ===============================================
   CONSTANTINE SECTION 5 - STYLE FRAMES
   =============================================== */

.constantine-styleframes-section {
    position: relative;
    top: clamp(-35rem, -21vw, -29rem);
    width: 100vw;
    min-height: 70vh;
    padding: clamp(6rem, 10vh, 8rem) clamp(2rem, 5vw, 6rem);
    flex-direction: column;
}

.styleframes-header {
    text-align: center;
    margin-bottom: clamp(4rem, 7vh, 6rem);
    width: 100%;
}

.styleframes-header h2 {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(6rem, 9vw, 8rem);
    font-weight: 400;
    letter-spacing: clamp(3px, 0.5vw, 6px);
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    left: clamp(5rem, 7vw, 7rem);
}

.styleframes-header h2::after {
    content: '';
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(60px, 15vw, 100px);
    height: clamp(1.5px, 0.15vw, 2px);
    background: linear-gradient(90deg, transparent, #00ffff, transparent);
}

.styleframes-grid-wrapper {
    width: clamp(65%, 70%, 75%);
    max-width: clamp(1400px, 90vw, 1600px);
    margin: 0 auto;
    margin-left: clamp(15rem, 21vw, 21rem);
}

.styleframes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.9rem, 1vw, 1rem);
    width: 100%;
}

.styleframes-item {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: clamp(8px, 1vw, 12px);
    border: clamp(0.8px, 0.08vw, 1px) solid rgba(0, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.styleframes-item:hover {
    border-color: rgba(0, 255, 255, 0.6);
    box-shadow: 0 0 clamp(15px, 2vw, 20px) rgba(0, 255, 255, 0.3);
    transform: translateY(-5px);
}

.styleframes-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.styleframes-item:hover img {
    transform: scale(1.05);
}

/* Media Queries for Style Frames Section */

@media (max-width: 1024px) {
    .constantine-styleframes-section {
        padding: clamp(5rem, 8vh, 6rem) clamp(1.5rem, 4vw, 4rem);
    }

    .styleframes-header {
        margin-bottom: clamp(2.5rem, 5vh, 4rem);
    }

    .styleframes-header h2 {
        font-size: clamp(3.5rem, 6vw, 5rem);
        left: clamp(3rem, 5vw, 5rem);
    }

    .styleframes-header h2::after {
        bottom: clamp(0.3rem, 0.5vh, 0.5rem);
        height: clamp(1.5px, 0.15vw, 2px);
    }

    .styleframes-grid-wrapper {
        width: 90%;
    }

    .styleframes-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(1.2rem, 2vw, 2rem);
    }
}

@media (max-width: 768px) {
    .constantine-styleframes-section {
        padding: clamp(4rem, 6vh, 5rem) clamp(1rem, 3vw, 2rem);
    }

    .styleframes-header {
        margin-bottom: clamp(2rem, 4vh, 3rem);
    }

    .styleframes-header h2 {
        font-size: clamp(3rem, 5vw, 4rem);
        letter-spacing: clamp(2px, 0.4vw, 4px);
        left: clamp(2rem, 4vw, 4rem);
    }

    .styleframes-header h2::after {
        bottom: clamp(0.3rem, 0.5vh, 0.5rem);
        height: clamp(1.5px, 0.15vw, 2px);
        width: clamp(50px, 12vw, 80px);
    }

    .styleframes-grid-wrapper {
        width: 95%;
    }

    .styleframes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(1rem, 1.5vw, 1.5rem);
    }

    .styleframes-item {
        border-radius: clamp(6px, 0.8vw, 10px);
    }
}

@media (max-width: 480px) {
    .constantine-styleframes-section {
        padding: clamp(3rem, 5vh, 4rem) clamp(0.75rem, 2vw, 1.5rem);
    }

    .styleframes-header {
        margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
    }

    .styleframes-header h2 {
        font-size: clamp(2.5rem, 4.5vw, 3.5rem);
        letter-spacing: clamp(1.5px, 0.3vw, 3px);
        left: clamp(1rem, 3vw, 2rem);
    }

    .styleframes-header h2::after {
        bottom: clamp(0.2rem, 0.4vh, 0.4rem);
        height: clamp(1.5px, 0.15vw, 2px);
        width: clamp(40px, 10vw, 60px);
    }

    .styleframes-grid-wrapper {
        width: 100%;
    }

    .styleframes-grid {
        grid-template-columns: 1fr;
        gap: clamp(0.8rem, 1.2vw, 1.2rem);
    }

    .styleframes-item {
        aspect-ratio: 16 / 10;
        border-radius: clamp(4px, 0.6vw, 8px);
    }
}

/* ===============================================
   CONSTANTINE SECTION 6 - FINAL LOOK (VIDEO)
   =============================================== */

.constantine-final-look-section {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    padding: clamp(6rem, 10vh, 8rem) clamp(2rem, 5vw, 6rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
    top: clamp(-35rem, -21vw, -29rem);
}

.const-finallook-header {
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: clamp(10rem, 15vw, 15rem);
    margin-right: 0;
    width: 100%;
}

.const-finallook-header h2 {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(4rem, 7vw, 6rem);
    font-weight: 400;
    letter-spacing: clamp(3px, 0.5vw, 6px);
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    margin: 0;
}

.const-finallook-header h2::after {
    content: '';
    position: absolute;
    bottom: clamp(0.3rem, 0.5vh, 0.5rem);
    right: clamp(5rem, 7vw, 7rem);
    transform: translateX(-50%);
    width: clamp(60px, 15vw, 100px);
    height: clamp(1.5px, 0.15vw, 2px);
    background: linear-gradient(90deg, transparent, #00ffff, transparent);
}

.video-embed-wrapper {
    width: clamp(65%, 70%, 75%);
    max-width: clamp(1200px, 90vw, 1400px);
    margin: 0 auto;
}

.video-container {
    position: relative;
    left: clamp(6rem, 9vw, 9rem);
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: clamp(8px, 1vw, 12px);
    border: clamp(2px, 0.15vw, 3px) solid rgba(0, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 clamp(20px, 3vw, 30px) rgba(0, 255, 255, 0.2);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Media Queries for Final Look Section */

@media (max-width: 1024px) {
    .constantine-final-look-section {
        padding: clamp(5rem, 8vh, 6rem) clamp(1.5rem, 4vw, 4rem);
    }

    .const-finallook-header {
        margin-bottom: clamp(2.5rem, 5vh, 4rem);
    }

    .const-finallook-header h2 {
        font-size: clamp(3.5rem, 6vw, 5rem);
    }

    .video-embed-wrapper {
        width: 85%;
    }
}

@media (max-width: 768px) {
    .constantine-final-look-section {
        padding: clamp(4rem, 6vh, 5rem) clamp(1rem, 3vw, 2rem);
    }

    .const-finallook-header {
        margin-bottom: clamp(2rem, 4vh, 3rem);
    }

    .const-finallook-header h2 {
        font-size: clamp(3rem, 5vw, 4rem);
        letter-spacing: clamp(2px, 0.4vw, 4px);
    }

    .const-finallook-header h2::after {
        width: clamp(50px, 12vw, 80px);
    }

    .video-embed-wrapper {
        width: 90%;
    }

    .video-container {
        border-radius: clamp(6px, 0.8vw, 10px);
    }
}

@media (max-width: 480px) {
    .constantine-final-look-section {
        padding: clamp(3rem, 5vh, 4rem) clamp(0.75rem, 2vw, 1.5rem);
    }

    .const-finallook-header {
        margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
    }

    .const-finallook-header h2 {
        font-size: clamp(2.5rem, 4.5vw, 3.5rem);
        letter-spacing: clamp(1.5px, 0.3vw, 3px);
    }

    .const-finallook-header h2::after {
        width: clamp(40px, 10vw, 60px);
    }

    .video-embed-wrapper {
        width: 95%;
    }

    .video-container {
        border-radius: clamp(4px, 0.6vw, 8px);
    }
}

/* ===========================
   CONSTANTINE DESKTOP MEDIA QUERIES (1440px - 1920px)
   =========================== */

@media (min-width: 1440px) and (max-width: 1919px) {
    /* Section 2 - Overview */
    .constantine-title-container {
        top: 16%;
        left: 36%;
    }

    .constantine-title-container h1 {
        font-size: clamp(107px, 7.5vw, 115px);
        letter-spacing: clamp(4.5px, 0.35vw, 5px);
    }

    .constantine-description-container {
        top: 51%;
        left: 36%;
        width: 48%;
    }

    .constantine-description-container p {
        font-size: clamp(16px, 1.1vw, 17px);
    }

    .constantine-skills-container {
        top: clamp(3.6rem, 4vh, 4rem);
        right: 11%;
    }

    .constantine-skills-container h2 {
        font-size: clamp(16px, 1.1vw, 17px);
    }

    .constantine-rectangle-container {
        max-width: clamp(1400px, 88vw, 1500px);
    }

    /* Tab Buttons */
    .constbrief-buttons-container {
        bottom: 18%;
        left: 36%;
        gap: clamp(2rem, 2.5vw, 2.2rem);
    }

    .constbrief-button {
        width: clamp(200px, 13vw, 215px);
        height: clamp(80px, 5.5vw, 85px);
    }

    .constbrief-button-text {
        font-size: clamp(16px, 1.1vw, 17px);
    }

    /* Section 3 - Content */
    .constbrief-content-container {
        top: 11vh;
        left: clamp(31rem, 23vw, 35rem);
        width: 53%;
    }

    .constbrief-grid-container {
        gap: clamp(7%, 7.5%, 8%);
        max-width: clamp(1400px, 88vw, 1500px);
    }

    .constbrief-column-item1 h2,
    .constbrief-column-item3 h2,
    .constbrief-column-item5 h2,
    .constbrief-column-item7 h2 {
        font-size: clamp(18px, 1.25vw, 19px);
    }

    .constbrief-column-item2 p,
    .constbrief-column-item4 p,
    .constbrief-column-item6 p,
    .constbrief-column-item8 p {
        font-size: clamp(16px, 1.1vw, 17px);
    }

    /* Section 4 - Storyboard */
    .storyboard-header h2 {
        font-size: clamp(7.5rem, 10vw, 9.5rem);
    }

    .storyboard-header h2::after {
        bottom: clamp(10.5rem, 11.5vh, 11.5rem);
        width: clamp(70px, 15vw, 110px);
    }

    .storyboard-grid-wrapper {
        width: clamp(66%, 68%, 70%);
        max-width: clamp(1600px, 88vw, 1700px);
    }

    .storyboard-grid {
        gap: clamp(0.9rem, 1vw, 1rem);
        margin-left: clamp(12rem, 13vw, 13rem);
    }

    /* Interactive Content */
    .interactive-content-wrapper {
        width: clamp(66%, 68%, 70%);
        max-width: clamp(1600px, 88vw, 1700px);
        margin-top: clamp(7rem, 10vh, 11rem);
    }

    .interactive-grid {
        margin-left: clamp(10rem, 11vw, 11rem);
        gap: clamp(2.5rem, 4vw, 4.5rem);
    }

    .content-area {
        min-height: clamp(500px, 55vh, 550px);
    }

    .content-block {
        gap: clamp(2rem, 3vw, 3.5rem);
    }

    .content-text h3 {
        font-size: clamp(2.2rem, 3.5vw, 3.8rem);
    }

    .content-text p {
        font-size: clamp(1rem, 1.15vw, 1.2rem);
    }

    .round-btn {
        width: clamp(90px, 8vw, 130px);
        height: clamp(90px, 8vw, 130px);
        font-size: clamp(1.6rem, 2vw, 2.2rem);
    }

    /* Section 5 - Style Frames */
    .styleframes-header h2 {
        font-size: clamp(6.5rem, 9vw, 8.5rem);
        left: clamp(7rem, 8vw, 8rem);
    }

    .styleframes-grid-wrapper {
        width: clamp(66%, 68%, 70%);
        max-width: clamp(1600px, 88vw, 1700px);
        margin-left: clamp(21rem, 23vw, 23rem);
    }

    .styleframes-grid {
        gap: clamp(1rem, 1vw, 1.1rem);
    }

    /* Section 6 - Final Look */
    .const-finallook-header {
        margin-top: 0;
        margin-left: clamp(15rem, 17vw, 17rem);
    }

    .const-finallook-header h2 {
        font-size: clamp(4.5rem, 7vw, 6.5rem);
    }

    .video-embed-wrapper {
        width: clamp(66%, 68%, 70%);
        max-width: clamp(1400px, 88vw, 1500px);
    }

    .video-container {
        left: clamp(9rem, 10vw, 10rem);
    }
}

/* ===========================
   CONSTANTINE LARGE DESKTOP MEDIA QUERIES (1920px - 2560px)
   =========================== */

@media (min-width: 1920px) and (max-width: 2559px) {
    /* Section 2 - Overview */
    .constantine-title-container {
        top: 17%;
        left: 37%;
    }

    .constantine-title-container h1 {
        font-size: clamp(115px, 7.8vw, 125px);
        letter-spacing: clamp(5px, 0.36vw, 5.5px);
    }

    .constantine-description-container {
        top: 52%;
        left: 37%;
        width: 46%;
    }

    .constantine-description-container p {
        font-size: clamp(17px, 1.15vw, 18px);
        line-height: 1.7;
    }

    .constantine-skills-container {
        top: clamp(4rem, 4.5vh, 4.5rem);
        right: 12%;
    }

    .constantine-skills-container h2 {
        font-size: clamp(17px, 1.15vw, 18px);
    }

    .constantine-rectangle-container {
        max-width: clamp(1500px, 88vw, 1600px);
    }

    /* Tab Buttons */
    .constbrief-buttons-container {
        bottom: 19%;
        left: 37%;
        gap: clamp(2.2rem, 2.6vw, 2.5rem);
    }

    .constbrief-button {
        width: clamp(215px, 13.5vw, 230px);
        height: clamp(85px, 5.8vw, 90px);
    }

    .constbrief-button-text {
        font-size: clamp(17px, 1.15vw, 18px);
        letter-spacing: clamp(1.8px, 0.13vw, 2px);
    }

    /* Section 3 - Content */
    .constbrief-content-container {
        top: 12vh;
        left: clamp(34rem, 42vw, 36rem);
        width: 52%;
    }

    .constbrief-grid-container {
        gap: clamp(7.5%, 8%, 8.5%);
        max-width: clamp(1600px, 88vw, 1700px);
    }

    .constbrief-column-item1 h2,
    .constbrief-column-item3 h2,
    .constbrief-column-item5 h2,
    .constbrief-column-item7 h2 {
        font-size: clamp(19px, 1.3vw, 20px);
    }

    .constbrief-column-item2 p,
    .constbrief-column-item4 p,
    .constbrief-column-item6 p,
    .constbrief-column-item8 p {
        font-size: clamp(17px, 1.15vw, 18px);
        line-height: 1.6;
    }

    /* Section 4 - Storyboard */
    .storyboard-header {
        margin-top: -10%;
    }

    .storyboard-header h2 {
        font-size: clamp(8rem, 10vw, 10rem);
        transform: translateY(clamp(18px, 2.2vh, 20px));
    }

    .storyboard-header h2::after {
        bottom: clamp(11rem, 12vh, 12rem);
        margin-left: clamp(-9rem, -7vw, -7rem);
        height: clamp(1.5px, 0.15vw, 2px);
        width: clamp(80px, 15vw, 120px);
    }

    .storyboard-grid-wrapper {
        width: clamp(64%, 66%, 68%);
        max-width: clamp(1700px, 88vw, 1800px);
    }

    .storyboard-grid {
        gap: clamp(1rem, 1vw, 1.1rem);
        margin-left: clamp(14rem, 16vw, 15rem);
    }

    .storyboard-item {
        border-radius: clamp(10px, 1vw, 14px);
    }

    /* Interactive Content */
    .interactive-content-wrapper {
        width: clamp(64%, 66%, 68%);
        max-width: clamp(1700px, 88vw, 1800px);
        margin-top: clamp(8rem, 10vh, 12rem);
    }

    .interactive-grid {
        margin-left: clamp(12rem, 14vw, 13rem);
        gap: clamp(3rem, 4vw, 5rem);
    }

    .content-area {
        min-height: clamp(550px, 60vh, 600px);
    }

    .content-block {
        gap: clamp(2.5rem, 3vw, 4rem);
    }

    .content-image {
        border-radius: clamp(10px, 1vw, 14px);
        border-width: clamp(2px, 0.2vw, 2.5px);
    }

    .content-text h3 {
        font-size: clamp(2.5rem, 3.5vw, 4rem);
        letter-spacing: clamp(3px, 0.3vw, 5px);
    }

    .content-text p {
        font-size: clamp(1.1rem, 1.2vw, 1.3rem);
        line-height: 1.9;
    }

    .round-btn {
        width: clamp(100px, 8vw, 140px);
        height: clamp(100px, 8vw, 140px);
        font-size: clamp(1.8rem, 2vw, 2.4rem);
        border-width: clamp(2px, 0.2vw, 2.5px);
    }

    .button-controls {
        gap: clamp(2rem, 3vh, 3rem);
    }

    /* Section 5 - Style Frames */
    .styleframes-header h2 {
        font-size: clamp(7rem, 9vw, 9rem);
        left: clamp(8rem, 10vw, 9rem);
    }

    .styleframes-header h2::after {
        bottom: 0.5rem;
        height: clamp(1.5px, 0.15vw, 2px);
    }

    .styleframes-grid-wrapper {
        width: clamp(64%, 66%, 68%);
        max-width: clamp(1700px, 88vw, 1800px);
        margin-left: clamp(24rem, 27vw, 25rem);
    }

    .styleframes-grid {
        gap: clamp(1.1rem, 1vw, 1.2rem);
    }

    .styleframes-item {
        border-radius: clamp(10px, 1vw, 14px);
    }

    /* Section 6 - Final Look */
    .const-finallook-header {
        margin-top: 0;
        margin-left: clamp(18rem, 20vw, 19rem);
        margin-bottom: clamp(4rem, 6vh, 6rem);
    }

    .const-finallook-header h2 {
        font-size: clamp(5rem, 7vw, 7rem);
        letter-spacing: clamp(4px, 0.5vw, 7px);
    }

    .const-finallook-header h2::after {
        bottom: clamp(0.3rem, 0.5vh, 0.5rem);
        right: clamp(5rem, 7vw, 7rem);
        height: clamp(1.5px, 0.15vw, 2px);
        width: clamp(70px, 15vw, 110px);
    }

    .video-embed-wrapper {
        width: clamp(64%, 66%, 68%);
        max-width: clamp(1500px, 88vw, 1600px);
    }

    .video-container {
        left: clamp(10rem, 12vw, 11rem);
        border-radius: clamp(10px, 1vw, 14px);
        border-width: 2.5px;
    }
}

/* ===========================
   CONSTANTINE 4K DISPLAY MEDIA QUERIES (2560px - 3840px)
   =========================== */

@media (min-width: 2560px) and (max-width: 3840px) {
    /* Section 2 - Overview */
    .constantine-title-container {
        top: 12%;
        left: 31%;
    }

    .constantine-title-container h1 {
        font-size: clamp(130px, 8.2vw, 140px);
        letter-spacing: clamp(5.5px, 0.38vw, 6px);
    }

    .constantine-description-container {
        top: 34%;
        left: 31%;
        width: 44%;
    }

    .constantine-description-container p {
        font-size: clamp(28px, 9.2vw, 28px);
        line-height: 1.8;
    }

    .constantine-skills-container {
        top: clamp(5.5rem, 6vh, 6rem);
        right: 15%;
    }

    .constantine-skills-container h2 {
        font-size: clamp(19px, 1.2vw, 20px);
        line-height: 1.6;
    }

    .constantine-rectangle-container {
        max-width: clamp(1700px, 88vw, 1800px);
    }

    /* Tab Buttons */
    .constbrief-buttons-container {
        bottom: 40%;
        left: 31%;
        gap: clamp(2.8rem, 3vw, 3rem);
    }

    .constbrief-button {
        width: clamp(240px, 14vw, 250px);
        height: clamp(95px, 6vw, 100px);
    }

    .constbrief-button-text {
        font-size: clamp(19px, 1.2vw, 20px);
        letter-spacing: clamp(2.2px, 0.15vw, 2.5px);
    }

    /* Section 3 - Content */

    .constbrief-content-container {
        top: -20vh;
        left: clamp(31rem, 39vw, 33rem);
        width: 50%;
    }

    .constbrief-grid-container {
        gap: clamp(8%, 8.5%, 9%);
        max-width: clamp(1800px, 88vw, 1900px);
    }

    .constbrief-column-item1 h2,
    .constbrief-column-item3 h2,
    .constbrief-column-item5 h2,
    .constbrief-column-item7 h2 {
        font-size: clamp(21px, 1.35vw, 22px);
    }

    .constbrief-column-item2 p,
    .constbrief-column-item4 p,
    .constbrief-column-item6 p,
    .constbrief-column-item8 p {
        font-size: clamp(19px, 1.2vw, 20px);
        line-height: 1.7;
    }

    /* Section 4 - Storyboard */
    .storyboard-header {
        margin-top: -10%;
    }

    .storyboard-header h2 {
        font-size: clamp(9rem, 10vw, 11rem);
        letter-spacing: clamp(4px, 0.5vw, 7px);
        transform: translateY(clamp(19px, 2.3vh, 22px));
    }

    .storyboard-header h2::after {
        bottom: clamp(12rem, 13vh, 13rem);
        margin-left: clamp(-10rem, -8vw, -8rem);
        height: clamp(1.5px, 0.15vw, 2px);
        width: clamp(90px, 15vw, 130px);
    }

    .storyboard-grid-wrapper {
        width: clamp(62%, 64%, 66%);
        max-width: clamp(1900px, 88vw, 2000px);
    }

    .storyboard-grid {
        gap: clamp(1.1rem, 1vw, 1.3rem);
        margin-left: clamp(17rem, 19vw, 18rem);
    }

    .storyboard-item {
        border-radius: clamp(12px, 1vw, 16px);
        border-width: clamp(1px, 0.1vw, 1.5px);
    }

    /* Interactive Content */
    .interactive-content-wrapper {
        width: clamp(62%, 64%, 66%);
        max-width: clamp(1900px, 88vw, 2000px);
        margin-top: clamp(9rem, 10vh, 13rem);
    }

    .interactive-grid {
        margin-left: clamp(15rem, 17vw, 16rem);
        gap: clamp(3.5rem, 4vw, 5.5rem);
    }

    .content-area {
        min-height: clamp(650px, 68vh, 700px);
    }

    .content-block {
        gap: clamp(3rem, 3vw, 4.5rem);
    }

    .content-image {
        border-radius: clamp(12px, 1vw, 16px);
        border-width: clamp(2.5px, 0.25vw, 3px);
    }

    .content-text h3 {
        font-size: clamp(2.8rem, 3.5vw, 4.5rem);
        letter-spacing: clamp(4px, 0.3vw, 6px);
        margin-bottom: clamp(1.5rem, 2vh, 2rem);
    }

    .content-text p {
        font-size: clamp(1.2rem, 1.25vw, 1.5rem);
        line-height: 2;
    }

    .round-btn {
        width: clamp(110px, 8vw, 160px);
        height: clamp(110px, 8vw, 160px);
        font-size: clamp(2rem, 2vw, 2.8rem);
        border-width: clamp(2.5px, 0.25vw, 3px);
    }

    .button-controls {
        gap: clamp(2.5rem, 3vh, 3.5rem);
    }

    /* Section 5 - Style Frames */
    .styleframes-header h2 {
        font-size: clamp(8rem, 9vw, 10rem);
        left: clamp(10rem, 12vw, 11rem);
        letter-spacing: clamp(4px, 0.5vw, 7px);
    }

    .styleframes-header h2::after {
        bottom: 0.5rem;
        height: clamp(1.5px, 0.15vw, 2px);
    }

    .styleframes-grid-wrapper {
        width: clamp(62%, 64%, 66%);
        max-width: clamp(1900px, 88vw, 2000px);
        margin-left: clamp(27rem, 30vw, 28rem);
    }

    .styleframes-grid {
        gap: clamp(1.2rem, 1vw, 1.4rem);
    }

    .styleframes-item {
        border-radius: clamp(12px, 1vw, 16px);
        border-width: clamp(1px, 0.1vw, 1.5px);
    }

    /* Section 6 - Final Look */
    .const-finallook-header {
        margin-top: 0;
        margin-left: clamp(21rem, 24vw, 22rem);
        margin-bottom: clamp(5rem, 6vh, 7rem);
    }

    .const-finallook-header h2 {
        font-size: clamp(5.5rem, 7vw, 8rem);
        letter-spacing: clamp(5px, 0.5vw, 8px);
    }

    .const-finallook-header h2::after {
        bottom: clamp(0.3rem, 0.5vh, 0.5rem);
        right: clamp(5rem, 7vw, 7rem);
        height: clamp(1.5px, 0.15vw, 2px);
        width: clamp(80px, 15vw, 120px);
    }

    .video-embed-wrapper {
        width: clamp(62%, 64%, 66%);
        max-width: clamp(1700px, 88vw, 1800px);
    }

    .video-container {
        left: clamp(12rem, 14vw, 13rem);
        border-radius: clamp(12px, 1vw, 16px);
        border-width: clamp(2.5px, 0.25vw, 3px);
    }
}

/* ===========================
   CONSTANTINE 4K+ MEDIA QUERIES (3840px+)
   =========================== */

@media (min-width: 3841px) {
    /* Section 2 - Overview */
    .constantine-title-container {
        top: 19%;
        left: 39%;
    }

    .constantine-title-container h1 {
        font-size: clamp(140px, 8vw, 170px);
        letter-spacing: clamp(6px, 0.4vw, 8px);
    }

    .constantine-description-container {
        top: 54%;
        left: 39%;
        width: 42%;
    }

    .constantine-description-container p {
        font-size: clamp(20px, 1.2vw, 24px);
        line-height: 1.9;
    }

    .constantine-skills-container {
        top: clamp(5rem, 6vh, 6rem);
        right: 14%;
    }

    .constantine-skills-container h2 {
        font-size: clamp(20px, 1.2vw, 24px);
        line-height: 1.7;
    }

    .constantine-rectangle-container {
        max-width: clamp(1800px, 85vw, 2200px);
    }

    /* Tab Buttons */
    .constbrief-buttons-container {
        bottom: 21%;
        left: 39%;
        gap: clamp(3rem, 3.5vw, 4rem);
    }

    .constbrief-button {
        width: clamp(250px, 15vw, 300px);
        height: clamp(100px, 6vw, 120px);
    }

    .constbrief-button-text {
        font-size: clamp(20px, 1.2vw, 24px);
        letter-spacing: clamp(2.5px, 0.2vw, 3px);
    }

    /* Section 3 - Content */
    .constbrief-content-container {
        top: 14vh;
        left: clamp(40rem, 48vw, 50rem);
        width: 48%;
    }

    .constbrief-grid-container {
        gap: clamp(8.5%, 9%, 10%);
        max-width: clamp(1900px, 90vw, 2400px);
    }

    .constbrief-column-item1 h2,
    .constbrief-column-item3 h2,
    .constbrief-column-item5 h2,
    .constbrief-column-item7 h2 {
        font-size: clamp(22px, 1.3vw, 26px);
    }

    .constbrief-column-item2 p,
    .constbrief-column-item4 p,
    .constbrief-column-item6 p,
    .constbrief-column-item8 p {
        font-size: clamp(20px, 1.2vw, 24px);
        line-height: 1.8;
    }

    /* Section 4 - Storyboard */
    .storyboard-header {
        margin-top: -10%;
    }

    .storyboard-header h2 {
        font-size: clamp(11rem, 11vw, 14rem);
        letter-spacing: clamp(7px, 0.5vw, 9px);
        transform: translateY(clamp(22px, 2.5vh, 25px));
    }

    .storyboard-header h2::after {
        bottom: clamp(13rem, 14vh, 16rem);
        margin-left: clamp(-11rem, -9vw, -9rem);
        height: clamp(1.5px, 0.15vw, 2px);
        width: clamp(130px, 15vw, 160px);
    }

    .storyboard-grid-wrapper {
        width: clamp(60%, 64%, 68%);
        max-width: clamp(2000px, 90vw, 2600px);
    }

    .storyboard-grid {
        gap: clamp(1.3rem, 1.2vw, 1.6rem);
        margin-left: clamp(18rem, 22vw, 24rem);
    }

    .storyboard-item {
        border-radius: clamp(16px, 1.2vw, 20px);
        border-width: clamp(1.5px, 0.15vw, 2px);
    }

    /* Interactive Content */
    .interactive-content-wrapper {
        width: clamp(60%, 64%, 68%);
        max-width: clamp(2000px, 90vw, 2600px);
        margin-top: clamp(13rem, 12vh, 16rem);
    }

    .interactive-grid {
        margin-left: clamp(16rem, 20vw, 22rem);
        gap: clamp(5.5rem, 5vw, 7rem);
    }

    .content-area {
        min-height: clamp(700px, 70vh, 900px);
    }

    .content-block {
        gap: clamp(4.5rem, 4vw, 6rem);
    }

    .content-image {
        border-radius: clamp(16px, 1.2vw, 20px);
        border-width: clamp(3px, 0.3vw, 4px);
    }

    .content-text h3 {
        font-size: clamp(4.5rem, 4vw, 6rem);
        letter-spacing: clamp(6px, 0.4vw, 8px);
        margin-bottom: clamp(2rem, 2.5vh, 2.5rem);
    }

    .content-text p {
        font-size: clamp(1.5rem, 1.4vw, 1.8rem);
        line-height: 2.1;
    }

    .round-btn {
        width: clamp(160px, 10vw, 200px);
        height: clamp(160px, 10vw, 200px);
        font-size: clamp(2.8rem, 2.5vw, 3.5rem);
        border-width: clamp(3px, 0.3vw, 4px);
    }

    .button-controls {
        gap: clamp(3.5rem, 4vh, 4.5rem);
    }

    /* Section 5 - Style Frames */
    .styleframes-header h2 {
        font-size: clamp(10rem, 10vw, 13rem);
        left: clamp(11rem, 14vw, 16rem);
        letter-spacing: clamp(7px, 0.5vw, 9px);
    }

    .styleframes-header h2::after {
        bottom: 0.5rem;
        height: clamp(1.5px, 0.15vw, 2px);
    }

    .styleframes-grid-wrapper {
        width: clamp(60%, 64%, 68%);
        max-width: clamp(2000px, 90vw, 2600px);
        margin-left: clamp(28rem, 34vw, 38rem);
    }

    .styleframes-grid {
        gap: clamp(1.4rem, 1.2vw, 1.8rem);
    }

    .styleframes-item {
        border-radius: clamp(16px, 1.2vw, 20px);
        border-width: clamp(1.5px, 0.15vw, 2px);
    }

    /* Section 6 - Final Look */
    .const-finallook-header {
        margin-top: 0;
        margin-left: clamp(22rem, 28vw, 30rem);
        margin-bottom: clamp(7rem, 8vh, 9rem);
    }

    .const-finallook-header h2 {
        font-size: clamp(8rem, 8vw, 10rem);
        letter-spacing: clamp(8px, 0.5vw, 10px);
    }

    .const-finallook-header h2::after {
        bottom: clamp(0.3rem, 0.5vh, 0.5rem);
        right: clamp(5rem, 7vw, 7rem);
        height: clamp(1.5px, 0.15vw, 2px);
        width: clamp(120px, 15vw, 160px);
    }

    .video-embed-wrapper {
        width: clamp(60%, 64%, 68%);
        max-width: clamp(1800px, 85vw, 2400px);
    }

    .video-container {
        left: clamp(13rem, 16vw, 18rem);
        border-radius: clamp(16px, 1.2vw, 20px);
        border-width: clamp(3px, 0.3vw, 4px);
    }
}


/* ===============================================
   DECAY HERO SECTION 1
   =============================================== */

.decay-hero-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: clamp(100vh, 100vh, 120vh);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg);
}

.decay-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(1.02); /* Slight scale to prevent white edges during transitions */
}

.decay-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease-out;
    will-change: transform; /* Optimizes performance for transform animations */
    transform: scale(1);
}

/* ===============================================
   DECAY SECTION 2
   =============================================== */

.decay-overview-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: clamp(100vh, 100vh, 120vh);
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.decay-title-container {
    position: absolute;
    top: 15%;
    left: 34%;
    text-align: left;
    width: auto;
    z-index: 1;
}

.decay-title-container h1 {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(80px, 7vw, 107px);
    letter-spacing: clamp(3px, 0.3vw, 4.64px);
    line-height: 0.85;
    white-space: nowrap;
    display: inline-block;
    transform: scaleY(1.5);
    transform-origin: center;
}

.decay-title-container p {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 300;
    line-height: 1.6;
}

.decay-description-container {
    position: absolute;
    top: 50%;
    left: 34%;
    text-align: left;
    width: 50%;
    z-index: 1;
}

.decay-description-container p {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 300;
    line-height: 1.6;
}

.decay-skills-container {
    position: absolute;
    top: clamp(3rem, 3.6vh, 3.6rem);
    right: 10%;
    text-align: left;
    width: auto;
    z-index: 1;
}

.decay-skills-container h2 {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: clamp(6px, 0.5vw, 8px);
}

.decay-rectangle-container {
    position: absolute;
    top: 0;
    left: clamp(24rem, 28vw, 28rem);
    width: 70%;
    max-width: clamp(1200px, 90vw, 1400px);
    height: auto;
    z-index: -1;
    overflow: visible;
    margin: 0;
    padding: 0;
}

.decay-rectangle-container img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: right center;
    margin: 0;
    padding: 0;
}

/* ---------------TAB BUTTONS WITH IMAGE GLOW--------------- */

.decay-buttons-container {
    position: absolute;
    bottom: 17%;
    left: 34%;
    display: flex;
    gap: clamp(1.5rem, 2vw, 2rem);
    width: auto;
    z-index: 1;
}

.decay-button {
    position: relative;
    width: clamp(180px, 12vw, 200px);
    height: clamp(70px, 5vw, 80px);
    background: none;
    border: none;
    cursor: pointer;
    overflow: visible;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* The actual button image */
.decay-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../ASSETS/IMGS/Proj1/TabButton.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: filter 0.3s ease, transform 0.3s ease;
    z-index: 0;
}

/* Glow effect on hover */
.decay-button:hover::before {
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.6)) 
            drop-shadow(0 0 15px rgba(0, 255, 255, 0.4))
            brightness(1.1);
    transform: scale(1.02);
}

/* Active state glow */
.decay-button.active::before {
    filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.8)) 
            drop-shadow(0 0 14px rgba(0, 255, 255, 0.5))
            brightness(1.10);
}

.decay-button-text {
    position: relative;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 500;
    letter-spacing: clamp(1.2px, 0.12vw, 1.5px);
    text-transform: uppercase;
    z-index: 1;
    transition: all 0.3s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

.decay-button:hover .decay-button-text {
    color: rgba(0, 255, 255, 1);
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8);
}

.decay-button.active .decay-button-text {
    color: rgba(0, 255, 255, 1);
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* ===========================
   DECAY SECTION MEDIA QUERIES
   =========================== */

@media (max-width: 1024px) {
    .decay-title-container {
        top: 12%;
        left: 25%;
    }

    .decay-description-container {
        top: 38%;
        left: 25%;
        width: 55%;
    }

    .decay-skills-container {
        top: 3rem;
        right: 8%;
    }

    .decay-buttons-container {
        bottom: 38%;
        left: 25%;
    }

    .decay-rectangle-container {
        left: clamp(18rem, 22vw, 22rem);
        width: 75%;
    }
}

@media (max-width: 768px) {
    .decay-title-container {
        top: 10%;
        left: 10%;
        width: 80%;
    }

    .decay-title-container h1 {
        font-size: clamp(60px, 6vw, 80px);
    }

    .decay-description-container {
        top: 32%;
        left: 10%;
        width: 70%;
    }

    .decay-skills-container {
        top: 60%;
        right: auto;
        left: 10%;
        width: 80%;
    }

    .decay-rectangle-container {
        left: clamp(8rem, 12vw, 12rem);
        width: 90%;
        opacity: 0.5;
    }

    .decay-buttons-container {
        bottom: 15%;
        left: 10%;
        gap: 1.5rem;
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .decay-title-container {
        top: 8%;
        left: 5%;
        width: 90%;
    }

    .decay-title-container h1 {
        font-size: clamp(48px, 5vw, 60px);
    }

    .decay-description-container {
        top: 28%;
        left: 5%;
        width: 85%;
    }

    .decay-description-container p {
        font-size: clamp(13px, 0.95vw, 14px);
    }

    .decay-skills-container {
        top: 55%;
        left: 5%;
        width: 90%;
    }

    .decay-skills-container h2 {
        font-size: clamp(13px, 0.95vw, 14px);
    }

    .decay-rectangle-container {
        left: clamp(2rem, 5vw, 5rem);
        width: 100%;
        opacity: 0.3;
    }

    .decay-buttons-container {
        bottom: 8%;
        left: 5%;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .decay-button {
        width: 160px;
        height: 70px;
    }
}


/* ===============================================
   DECAY SECTION 3
   =============================================== */

   .decay-content-container {
    position: relative;
    top: 10vh;
    left: 31rem;
    width: 55%;
    min-height: 250px;
    z-index: 9;
    margin-bottom: 2rem;
    padding: 0;
}

.decay-content {
    display: none;
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

.decay-content.active {
    display: flex;
    gap: clamp(2rem, 3vw, 3rem);
    align-items: center;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.decay-content-text {
    flex: 1;
}

.decay-grid-container {
    position: relative;
    margin-left: 0;
    margin-bottom: clamp(10vh, 12vh, 14vh);
    margin-top: clamp(-18%, -15%, -12%);
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: clamp(5%, 7%, 9%);
    width: 100%;
    max-width: clamp(1200px, 90vw, 1400px);
}

.decay-column-item1 h2 {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(16px, 1.1vw, 18px);
    font-weight: 100;
}

.decay-column-item2 p {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 300;
    line-height: 1.5;
}

.decay-column-item3 h2 {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(16px, 1.1vw, 18px);
    font-weight: 100;
}

.decay-column-item4 p {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 300;
    line-height: 1.5;
}

.decay-column-item5 h2 {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(16px, 1.1vw, 18px);
    font-weight: 100;
}

.decay-column-item6 p {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 300;
    line-height: 1.5;
}

.decay-column-item7 h2 {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(16px, 1.1vw, 18px);
    font-weight: 100;
}

.decay-column-item8 p {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 300;
    line-height: 1.5;
}

/* ===========================
   DECAY SECTION MEDIA QUERIES
   =========================== */

@media (max-width: 1024px) {
    .decay-content-container {
        margin-top: clamp(-20rem, -25vh, -18rem);
        top: 48vh;
        left: clamp(-12rem, -15vw, -10rem);
        width: 60%;
        max-width: clamp(650px, 85vw, 700px);
        padding: clamp(1.5rem, 2vw, 1.75rem);
    }

    .decay-buttons-container {
        bottom: 38%;
        left: 30%;
        gap: clamp(1.25rem, 2vw, 1.5rem);
    }
}

@media (max-width: 768px) {
    .decay-content-container {
        margin-top: clamp(-15rem, -20vh, -12rem);
        top: 45vh;
        left: clamp(-8rem, -10vw, -5rem);
        width: 70%;
        max-width: clamp(550px, 90vw, 600px);
        padding: clamp(1.25rem, 1.8vw, 1.5rem);
    }

    .decay-buttons-container {
        bottom: 35%;
        left: 20%;
        gap: clamp(0.875rem, 1.5vw, 1rem);
    }
}

@media (max-width: 480px) {
    .decay-content-container {
        margin-top: clamp(-10rem, -15vh, -8rem);
        top: 40vh;
        left: clamp(-2rem, -5vw, 0rem);
        width: 85%;
        max-width: 90%;
        padding: clamp(0.875rem, 1.2vw, 1rem);
    }

    .decay-buttons-container {
        bottom: 30%;
        left: 10%;
        gap: clamp(0.625rem, 1vw, 0.75rem);
        flex-wrap: wrap;
    }
}


/* ===============================================
   DECAY INTERACTIVE GRID - SECTION 3
   =============================================== */
/* Interactive Content Grid with Buttons */
.decay-interactive-content-wrapper {
    width: clamp(65%, 70%, 75%);
    max-width: clamp(1400px, 90vw, 1600px);
    margin: clamp(6rem, 10vh, 10rem) auto 0;
    padding: 0 clamp(1rem, 2vw, 2rem);
}

.decay-interactive-grid {
    display: grid;
    grid-template-columns: 75% 25%;
    gap: clamp(2rem, 4vw, 4rem);
    width: 100%;
    align-items: center;
    margin-left: clamp(6rem, 10vw, 10rem);
}

/* Content Area (Left 75%) */
.decay-content-area {
    position: relative;
    width: 100%;
    min-height: clamp(400px, 50vh, 500px);
}

.decay-content-block {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    display: grid;
    grid-template-columns: 40% 60%;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
}

.decay-content-block.active {
    opacity: 1;
    visibility: visible;
    position: relative;
}

.decay-content-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: clamp(8px, 1vw, 12px);
    border: clamp(1.5px, 0.15vw, 2px) solid rgba(0, 255, 255, 0.3);
    /* background: rgba(0, 0, 0, 0.4); */
    box-shadow: 0 0 clamp(15px, 2vw, 20px) rgba(0, 255, 255, 0.2);
}

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

.decay-content-text {
    padding: clamp(1rem, 2vw, 2rem);
}

.decay-content-text h3 {
    color: #00ffff;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(2rem, 3.5vw, 3.5rem);
    font-weight: 400;
    letter-spacing: clamp(2px, 0.3vw, 4px);
    text-transform: uppercase;
    margin-bottom: clamp(1rem, 2vh, 1.5rem);
    position: relative;
    display: inline-block;
}

.decay-content-text h3::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    width: clamp(40px, 8vw, 60px);
    height: clamp(1.5px, 0.15vw, 2px);
    background: linear-gradient(90deg, #00ffff, transparent);
}

.decay-content-text p {
    color: rgba(255, 255, 255, 0.8);
    font-family: "Montserrat", sans-serif;
    font-size: clamp(0.9rem, 1.1vw, 1.1rem);
    line-height: 1.8;
    font-weight: 300;
}

/* Button Controls (Right 25%) */
.decay-button-controls {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vh, 2.5rem);
    align-items: center;
    justify-content: center;
}

.decay-round-btn {
    width: clamp(80px, 8vw, 120px);
    height: clamp(80px, 8vw, 120px);
    border-radius: 50%;
    border: clamp(1.5px, 0.15vw, 2px) solid rgba(0, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.7);
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(1.5rem, 2vw, 2rem);
    letter-spacing: clamp(0.8px, 0.1vw, 1px);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.decay-round-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(0, 255, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.decay-round-btn:hover {
    border-color: rgba(0, 255, 255, 0.8);
    color: #00ffff;
    box-shadow: 0 0 clamp(20px, 2.5vw, 25px) rgba(0, 255, 255, 0.4);
    transform: scale(1.05);
}

.decay-round-btn:hover::before {
    opacity: 1;
}

.decay-round-btn.active {
    border-color: #00ffff;
    color: #00ffff;
    background: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 clamp(25px, 3vw, 30px) rgba(0, 255, 255, 0.5),
                inset 0 0 clamp(15px, 2vw, 20px) rgba(0, 255, 255, 0.1);
}

.decay-round-btn.active::before {
    opacity: 1;
}

.decay-btn-number {
    position: relative;
    z-index: 1;
}

/* ===========================
   DECAY INTERACTIVE GRID MEDIA QUERIES
   =========================== */

@media (max-width: 1024px) {
    .decay-interactive-content-wrapper {
        width: clamp(75%, 80%, 85%);
        margin: clamp(5rem, 8vh, 8rem) auto 0;
    }

    .decay-interactive-grid {
        grid-template-columns: 70% 30%;
        gap: clamp(1.5rem, 3vw, 3rem);
        margin-left: clamp(4rem, 8vw, 8rem);
    }

    .decay-content-area {
        min-height: clamp(350px, 45vh, 450px);
    }
}

@media (max-width: 768px) {
    .decay-interactive-content-wrapper {
        width: clamp(85%, 90%, 92%);
        margin: clamp(4rem, 6vh, 6rem) auto 0;
        padding: 0 clamp(0.75rem, 1.5vw, 1.5rem);
    }

    .decay-interactive-grid {
        grid-template-columns: 1fr;
        gap: clamp(2rem, 4vw, 3rem);
        margin-left: clamp(2rem, 4vw, 4rem);
    }

    .decay-button-controls {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: clamp(0.75rem, 1.5vw, 1rem);
        justify-content: center;
    }

    .decay-content-area {
        min-height: clamp(300px, 40vh, 400px);
    }
}

@media (max-width: 480px) {
    .decay-interactive-content-wrapper {
        width: 95%;
        margin: clamp(3rem, 5vh, 5rem) auto 0;
        padding: 0 clamp(0.5rem, 1vw, 1rem);
    }

    .decay-interactive-grid {
        grid-template-columns: 1fr;
        gap: clamp(1.5rem, 3vw, 2rem);
        margin-left: clamp(1rem, 2vw, 2rem);
    }

    .decay-button-controls {
        gap: clamp(0.5rem, 1vw, 0.75rem);
    }

    .decay-grid-button {
        width: clamp(40px, 10vw, 50px);
        height: clamp(40px, 10vw, 50px);
        font-size: clamp(14px, 3.5vw, 16px);
    }

    .decay-content-area {
        min-height: clamp(250px, 35vh, 350px);
    }
}

/* ===============================================
   DECAY SECTION 4 - STORYBOARD SECTION
   =============================================== */

.decay-wireframes-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: auto;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(4rem, 8vh, 8rem) 0;
}

.decay-storyboard-wrapper {
    width: clamp(65%, 70vw, 70%);
    max-width: clamp(1400px, 90vw, 1600px);
    margin: 0 auto;
    margin-left: clamp(15rem, 21vw, 24rem);
    padding: 0 clamp(1rem, 2vw, 2rem);
}

.decay-storyboard-header {
    text-align: center;
    margin-bottom: clamp(3rem, 6vh, 6rem);
    position: relative;
}

.decay-storyboard-header h2 {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(70px, 10vw, 120px);
    letter-spacing: clamp(2px, 0.3vw, 4px);
    line-height: 1;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}

.decay-storyboard-header h2::after {
    content: '';
    position: absolute;
    bottom: clamp(-18px, -1.2vh, -12px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(60px, 12vw, 100px);
    height: clamp(1.5px, 0.15vw, 2px);
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 255, 255, 0.8) 50%,
        transparent 100%);
    box-shadow: 0 0 clamp(8px, 1vw, 10px) rgba(0, 255, 255, 0.5);
}

.decay-storyboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 2vw, 2rem);
    width: 100%;
}

.decay-storyboard-item {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: clamp(4px, 0.5vw, 8px);
    /* background: rgba(0, 0, 0, 0.4); */
    border: clamp(0.8px, 0.08vw, 1px) solid rgba(0, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.decay-storyboard-item:hover {
    border-color: rgba(0, 255, 255, 0.6);
    box-shadow: 0 0 clamp(15px, 2vw, 20px) rgba(0, 255, 255, 0.3);
    transform: translateY(clamp(-3px, -0.4vh, -5px));
}

.decay-storyboard-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.decay-storyboard-item:hover img {
    transform: scale(1.05);
}

/* ===========================
   DECAY STORYBOARD MEDIA QUERIES
   =========================== */

/* Tablets and smaller laptops */
@media (max-width: 1024px) {
    .decay-storyboard-section {
        padding: clamp(3rem, 6vh, 6rem) 0;
    }

    .decay-storyboard-wrapper {
        width: 90%;
    }

    .decay-storyboard-header {
        margin-bottom: clamp(2.5rem, 5vh, 5rem);
    }

    .decay-storyboard-header h2 {
        font-size: clamp(42px, 5.5vw, 70px);
    }

    .decay-storyboard-grid {
        gap: clamp(0.875rem, 1.75vw, 1.75rem);
    }
}

/* Tablets portrait */
@media (max-width: 768px) {
    .decay-storyboard-section {
        padding: clamp(2.5rem, 5vh, 5rem) 0;
    }

    .decay-storyboard-wrapper {
        width: 92%;
    }

    .decay-storyboard-header {
        margin-bottom: clamp(2rem, 4vh, 4rem);
    }

    .decay-storyboard-header h2 {
        font-size: clamp(36px, 5vw, 60px);
        letter-spacing: clamp(1.5px, 0.25vw, 3px);
    }

    .decay-storyboard-header h2::after {
        width: clamp(50px, 10vw, 80px);
        bottom: -12px;
    }

    .decay-storyboard-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(0.75rem, 1.5vw, 1.5rem);
    }

    .decay-storyboard-item {
        border-radius: clamp(3px, 0.4vw, 6px);
    }

    .decay-storyboard-item:hover {
        transform: translateY(-3px);
    }
}

/* Mobile devices */
@media (max-width: 480px) {
    .decay-storyboard-section {
        padding: clamp(2rem, 4vh, 4rem) 0;
    }

    .decay-storyboard-wrapper {
        width: 95%;
    }

    .decay-storyboard-header {
        margin-bottom: clamp(1.5rem, 3vh, 3rem);
    }

    .decay-storyboard-header h2 {
        font-size: clamp(28px, 7vw, 48px);
        letter-spacing: clamp(1px, 0.2vw, 2px);
    }

    .decay-storyboard-header h2::after {
        width: clamp(40px, 8vw, 60px);
        bottom: -10px;
        height: 1.5px;
    }

    .decay-storyboard-grid {
        grid-template-columns: 1fr;
        gap: clamp(0.75rem, 1.5vw, 1.25rem);
    }

    .decay-storyboard-item {
        aspect-ratio: 16 / 9;
        border-radius: 4px;
    }

    .decay-storyboard-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
    }
}

/* Extra small mobile devices */
@media (max-width: 360px) {
    .decay-storyboard-section {
        padding: clamp(1.5rem, 3vh, 3rem) 0;
    }

    .decay-storyboard-wrapper {
        width: 96%;
    }

    .decay-storyboard-header h2 {
        font-size: clamp(24px, 6.5vw, 40px);
    }

    .decay-storyboard-header h2::after {
        width: clamp(35px, 7vw, 50px);
        bottom: -8px;
    }

    .decay-storyboard-grid {
        gap: clamp(0.625rem, 1.25vw, 1rem);
    }
}


/* ===============================================
   DECAY SECTION 5 - PROCESS SECTION
   =============================================== */

.decay-process-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: auto;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(4rem, 8vh, 8rem) 0;
    margin-bottom: clamp(3rem, 4vw, 4rem);
}

.decay-process-wrapper {
    width: clamp(65%, 70vw, 70%);
    max-width: clamp(1400px, 90vw, 1600px);
    margin: 0 auto;
    margin-left: clamp(15rem, 21vw, 24rem);
    padding: 0 clamp(1rem, 2vw, 2rem);
}

.decay-process-header {
    text-align: center;
    margin-bottom: clamp(3rem, 6vh, 6rem);
    position: relative;
}

.decay-process-header h2 {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(70px, 10vw, 120px);
    letter-spacing: clamp(2px, 0.3vw, 4px);
    line-height: 1;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}

.decay-process-header h2::after {
    content: '';
    position: absolute;
    bottom: clamp(-18px, -1.2vh, -12px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(60px, 12vw, 100px);
    height: clamp(1.5px, 0.15vw, 2px);
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 255, 255, 0.8) 50%,
        transparent 100%);
    box-shadow: 0 0 clamp(8px, 1vw, 10px) rgba(0, 255, 255, 0.5);
}

.decay-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%;
}

.decay-process-item {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: clamp(6px, 0.8vw, 12px);
    background: rgba(0, 0, 0, 0.4);
    border: clamp(1.5px, 0.15vw, 2px) solid rgba(0, 255, 255, 0.3);
    transition: all 0.4s ease;
}

.decay-process-item:hover {
    border-color: rgba(0, 255, 255, 0.8);
    box-shadow: 0 0 clamp(25px, 3vw, 30px) rgba(0, 255, 255, 0.4),
                inset 0 0 clamp(15px, 2vw, 20px) rgba(0, 255, 255, 0.1);
    transform: translateY(clamp(-6px, -0.8vh, -8px)) scale(1.02);
}

.decay-process-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.decay-process-item:hover img {
    transform: scale(1.08);
}

/* ===========================
   DECAY PROCESS MEDIA QUERIES
   =========================== */

/* Tablets and smaller laptops */
@media (max-width: 1024px) {
    .decay-process-section {
        padding: clamp(3rem, 6vh, 6rem) 0;
    }

    .decay-process-wrapper {
        width: 90%;
    }

    .decay-process-header {
        margin-bottom: clamp(2.5rem, 5vh, 5rem);
    }

    .decay-process-header h2 {
        font-size: clamp(42px, 5.5vw, 70px);
    }

    .decay-process-grid {
        gap: clamp(1.25rem, 2.5vw, 2.5rem);
    }

    .decay-process-item:hover {
        transform: translateY(-6px) scale(1.02);
    }
}

/* Tablets portrait */
@media (max-width: 768px) {
    .decay-process-section {
        padding: clamp(2.5rem, 5vh, 5rem) 0;
    }

    .decay-process-wrapper {
        width: 92%;
    }

    .decay-process-header {
        margin-bottom: clamp(2rem, 4vh, 4rem);
    }

    .decay-process-header h2 {
        font-size: clamp(36px, 5vw, 60px);
        letter-spacing: clamp(1.5px, 0.25vw, 3px);
    }

    .decay-process-header h2::after {
        width: clamp(50px, 10vw, 80px);
        bottom: -12px;
    }

    .decay-process-grid {
        grid-template-columns: 1fr;
        gap: clamp(1.5rem, 3vw, 2rem);
    }

    .decay-process-item {
        aspect-ratio: 16 / 9;
        border-radius: clamp(4px, 0.6vw, 8px);
    }

    .decay-process-item:hover {
        transform: translateY(-4px) scale(1.01);
        box-shadow: 0 0 25px rgba(0, 255, 255, 0.4);
    }
}

/* Mobile devices */
@media (max-width: 480px) {
    .decay-process-section {
        padding: clamp(2rem, 4vh, 4rem) 0;
    }

    .decay-process-wrapper {
        width: 95%;
    }

    .decay-process-header {
        margin-bottom: clamp(1.5rem, 3vh, 3rem);
    }

    .decay-process-header h2 {
        font-size: clamp(28px, 7vw, 48px);
        letter-spacing: clamp(1px, 0.2vw, 2px);
    }

    .decay-process-header h2::after {
        width: clamp(40px, 8vw, 60px);
        bottom: -10px;
        height: 1.5px;
    }

    .decay-process-grid {
        grid-template-columns: 1fr;
        gap: clamp(1.25rem, 2.5vw, 1.75rem);
    }

    .decay-process-item {
        aspect-ratio: 4 / 3;
        border-radius: 6px;
        border-width: 1.5px;
    }

    .decay-process-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
    }

    .decay-process-item:hover img {
        transform: scale(1.05);
    }
}

/* Extra small mobile devices */
@media (max-width: 360px) {
    .decay-process-section {
        padding: clamp(1.5rem, 3vh, 3rem) 0;
    }

    .decay-process-wrapper {
        width: 96%;
    }

    .decay-process-header h2 {
        font-size: clamp(24px, 6.5vw, 40px);
    }

    .decay-process-header h2::after {
        width: clamp(35px, 7vw, 50px);
        bottom: -8px;
    }

    .decay-process-grid {
        gap: clamp(1rem, 2vw, 1.5rem);
    }

    .decay-process-item {
        border-radius: 4px;
    }
}


/* ===============================================
   CONSTANTINE SECTION 6 - FINAL LOOK (VIDEO)
   =============================================== */

.decay-final-look-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: clamp(6rem, 10vh, 8rem) clamp(2rem, 5vw, 6rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;
    margin-top: clamp(12%, 15%, 18%);
}

.decay-finallook-header {
    text-align: center;
    /* margin-bottom: clamp(3rem, 6vh, 5rem); */
    margin-top: clamp(25rem, 35vh, 35rem);
    margin-left: clamp(10rem, 15vw, 15rem);
    width: 100%;
}

.decay-finallook-header h2 {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(4rem, 7vw, 6rem);
    font-weight: 400;
    letter-spacing: clamp(3px, 0.5vw, 6px);
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}

.decay-finallook-header h2::after {
    content: '';
    position: absolute;
    bottom: clamp(0.3rem, 0.5vh, 0.5rem);
    right: clamp(5rem, 7vw, 7rem);
    transform: translateX(-50%);
    width: clamp(60px, 15vw, 100px);
    height: clamp(1.5px, 0.15vw, 2px);
    background: linear-gradient(90deg, transparent, #00ffff, transparent);
}

.decay-video-embed-wrapper {
    width: clamp(65%, 70%, 75%);
    max-width: clamp(1200px, 90vw, 1400px);
    margin: 0 auto;
}

.decay-video-container {
    position: relative;
    left: clamp(6rem, 9vw, 9rem);
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: clamp(8px, 1vw, 12px);
    border: clamp(2px, 0.15vw, 3px) solid rgba(0, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 clamp(20px, 3vw, 30px) rgba(0, 255, 255, 0.2);
}

.decay-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ===========================
   DECAY LARGE SCREEN OPTIMIZATIONS
   =========================== */

/* Large Desktop - 1440px to 1920px */
@media screen and (min-width: 1025px) and (max-width: 1440px) {
    .decay-title-container h1 {
        font-size: clamp(95px, 6.8vw, 107px);
    }

    .decay-rectangle-container {
        left: clamp(25rem, 27vw, 27rem);
        width: 72%;
    }

    .decay-interactive-content-wrapper {
        width: clamp(68%, 70%, 72%);
        max-width: clamp(1350px, 88vw, 1500px);
    }

    .decay-storyboard-wrapper,
    .decay-process-wrapper {
        width: clamp(68%, 70vw, 72%);
        max-width: clamp(1350px, 88vw, 1500px);
    }
}

/* Extra Large Desktop - 1920px to 2560px */
@media screen and (min-width: 1441px) and (max-width: 1920px) {
    .decay-title-container h1 {
        font-size: clamp(102px, 6.5vw, 115px);
    }

    .decay-rectangle-container {
        left: clamp(26rem, 27vw, 29rem);
        width: 70%;
    }

    .decay-interactive-content-wrapper {
        width: clamp(66%, 70%, 74%);
        max-width: clamp(1400px, 85vw, 1700px);
        margin-left: clamp(8rem, 11vw, 12rem);
    }

    .decay-interactive-grid {
        gap: clamp(3rem, 3.5vw, 4.5rem);
        margin-left: clamp(8rem, 11vw, 12rem);
    }

    .decay-storyboard-wrapper {
        max-width: clamp(1400px, 85vw, 1700px);
        margin-left: clamp(20rem, 23vw, 26rem);
    }

    .decay-process-wrapper {
        max-width: clamp(1400px, 85vw, 1700px);
        margin-left: clamp(20rem, 23vw, 26rem);
    }

    .decay-video-embed-wrapper {
        max-width: clamp(1300px, 85vw, 1500px);
    }
}

/* 2K Displays - 2560px to 3840px */
@media screen and (min-width: 1921px) and (max-width: 2560px) {
    .decay-title-container h1 {
        font-size: clamp(110px, 6vw, 130px);
        letter-spacing: clamp(4px, 0.25vw, 5.5px);
    }

    .decay-description-container p,
    .decay-skills-container h2 {
        font-size: clamp(16px, 0.9vw, 18px);
    }

    .decay-rectangle-container {
        left: clamp(27rem, 28vw, 32rem);
        width: 68%;
    }

    .decay-interactive-content-wrapper {
        width: clamp(64%, 68%, 72%);
        max-width: clamp(1600px, 80vw, 1900px);
        margin-left: clamp(10rem, 12vw, 14rem);
    }

    .decay-interactive-grid {
        gap: clamp(3.5rem, 4vw, 5rem);
        margin-left: clamp(10rem, 12vw, 14rem);
    }

    .decay-content-area {
        min-height: clamp(500px, 48vh, 600px);
    }

    .decay-storyboard-wrapper {
        max-width: clamp(1600px, 80vw, 1900px);
        margin-left: clamp(22rem, 25vw, 28rem);
    }

    .decay-storyboard-header h2,
    .decay-process-header h2 {
        font-size: clamp(100px, 8vw, 140px);
    }

    .decay-process-wrapper {
        max-width: clamp(1600px, 80vw, 1900px);
        margin-left: clamp(22rem, 25vw, 28rem);
    }

    .decay-video-embed-wrapper {
        max-width: clamp(1400px, 80vw, 1600px);
    }

    .decay-video-container {
        left: clamp(8rem, 10vw, 11rem);
    }
}

/* 4K Displays - 2560px to 3840px - Scaled from 1440px base view */
@media screen and (min-width: 2560px) and (max-width: 3840px) {
    /* Section 2 - Overview */
    .decay-title-container {
        top: calc(15% - 3rem);
        left: 34%;
    }

    .decay-title-container h1 {
        font-size: calc(107px * 2.0);
        letter-spacing: calc(4.64px * 2.0);
    }

    .decay-title-container p {
        font-size: calc(16px * 2.0);
    }

    .decay-description-container {
        top: calc(50% - 8rem);
        left: 34%;
        width: 50%;
    }

    .decay-description-container p {
        font-size: calc(16px * 2.0);
        line-height: 1.6;
    }

    .decay-skills-container {
        top: calc(3.6rem * 2.2 - 4rem);
        right: calc(10% - 6rem);
    }

    .decay-skills-container h2 {
        font-size: calc(16px * 2.0);
        line-height: 1.5;
        margin-bottom: calc(8px * 2.2);
    }

    .decay-rectangle-container {
        left: auto;
        right: 0;
        width: 70%;
        max-width: calc(1400px * 2.2);
    }

    /* Tab Buttons */
    .decay-buttons-container {
        bottom: calc(22% + 9rem);
        left: 34%;
        gap: calc(2rem * 1.5);
    }

    .decay-button {
        width: calc(200px * 1.5);
        height: calc(80px * 1.5);
    }

    .decay-button-text {
        font-size: calc(16px * 2.0);
        letter-spacing: calc(1.5px * 2.0);
    }

    /* Section 3 - Content */
    .decay-content-container {
        top: calc(10vh * 1.0 - 15rem);
        left: 34%;
        width: 65%;
        min-height: 150px;
        margin-bottom: calc(2rem * 2.2);
    }

    .decay-content.active {
        gap: calc(3rem * 2.2);
    }

    .decay-grid-container {
        margin-left: 0;
        margin-bottom: calc(14vh * 1.0);
        margin-top: -12%;
        gap: 9%;
        max-width: calc(1400px * 2.2);
    }

    .decay-column-item1 h2,
    .decay-column-item3 h2,
    .decay-column-item5 h2,
    .decay-column-item7 h2 {
        font-size: calc(18px * 2.0);
    }

    .decay-column-item2 p,
    .decay-column-item4 p,
    .decay-column-item6 p,
    .decay-column-item8 p {
        font-size: calc(16px * 2.0) !important;
        line-height: 1.5;
    }

    /* Interactive Grid */
    .decay-interactive-content-wrapper {
        width: 70%;
        max-width: calc(1600px * 2.2);
        margin-top: -15rem;
        padding: 0 calc(2rem * 2.2);
    }

    .decay-interactive-grid {
        gap: calc(4rem * 2.2);
        margin-left: calc(10rem * 2.2 - 3rem);
    }

    .decay-content-area {
        min-height: calc(500px * 2.2);
    }

    .decay-content-block {
        gap: calc(3rem * 2.2);
    }

    .decay-content-image {
        border-radius: calc(12px * 2.2);
        border-width: calc(2px * 2.2);
        box-shadow: 0 0 calc(20px * 2.2) rgba(0, 255, 255, 0.2);
    }

    .decay-content-text {
        padding: calc(2rem * 2.2);
    }

    .decay-content-text h3 {
        font-size: calc(3.5rem * 2.0);
        letter-spacing: calc(4px * 2.0);
        margin-bottom: calc(1.5rem * 2.2);
    }

    .decay-content-text h3::after {
        bottom: calc(-0.5rem * 2.2);
        width: calc(60px * 2.2);
        height: calc(2px * 2.2);
    }

    .decay-content-text p {
        font-size: calc(16px * 2.0);
        line-height: 1.8;
    }

    .decay-button-controls {
        gap: calc(2.5rem * 1.5);
    }

    .decay-round-btn {
        width: calc(120px * 1.5);
        height: calc(120px * 1.5);
        font-size: calc(2rem * 1.5);
        border-width: calc(2px * 1.5);
        letter-spacing: calc(1px * 1.5);
    }

    .decay-round-btn:hover {
        box-shadow: 0 0 calc(25px * 2.2) rgba(0, 255, 255, 0.4);
    }

    .decay-round-btn.active {
        box-shadow: 0 0 calc(30px * 2.2) rgba(0, 255, 255, 0.5),
                    inset 0 0 calc(20px * 2.2) rgba(0, 255, 255, 0.1);
    }

    /* Section 4 - Wireframes */
    .decay-wireframes-section {
        padding: calc(8rem * 2.2) 0 calc(4rem * 2.2) 0;
        margin-left: 18%;
        margin-right: 3%;
    }

    .decay-storyboard-wrapper {
        width: 75%;
        max-width: calc(1600px * 1.5);
        margin-left: 0;
        margin-right: auto;
        padding: 0 calc(2rem * 1.5);
    }

    .decay-storyboard-header {
        margin-bottom: calc(4rem * 2.2);
    }

    .decay-storyboard-header h2 {
        font-size: calc(120px * 2.0);
        letter-spacing: calc(4px * 2.0);
    }

    .decay-storyboard-header h2::after {
        bottom: calc(-12px * 2.2);
        width: calc(100px * 2.2);
        height: calc(2px * 2.2);
        box-shadow: 0 0 calc(10px * 2.2) rgba(0, 255, 255, 0.5);
    }

    .decay-storyboard-grid {
        gap: calc(2rem * 1.3);
    }

    .decay-storyboard-item {
        border-radius: calc(8px * 1.5);
        border-width: calc(1px * 1.5);
    }

    .decay-storyboard-item:hover {
        box-shadow: 0 0 calc(20px * 1.5) rgba(0, 255, 255, 0.3);
        transform: translateY(calc(-5px * 1.5));
    }

    /* Section 5 - Process */
    .decay-process-section {
        padding: calc(4rem * 2.2) 0 calc(4rem * 2.2) 0;
        margin-left: 18%;
        margin-right: 3%;
        margin-bottom: 0;
    }

    .decay-process-wrapper {
        width: 80%;
        max-width: calc(1600px * 1.5);
        margin-left: 0;
        margin-right: auto;
        padding: 0 calc(2rem * 1.5);
    }

    .decay-process-header {
        margin-bottom: calc(6rem * 2.2);
        width: 100%;
    }

    .decay-process-header h2 {
        font-size: calc(120px * 2.0);
        letter-spacing: calc(4px * 2.0);
    }

    .decay-process-header h2::after {
        bottom: calc(-12px * 2.2);
        width: calc(100px * 2.2);
        height: calc(2px * 2.2);
        box-shadow: 0 0 calc(10px * 2.2) rgba(0, 255, 255, 0.5);
    }

    .decay-process-grid {
        gap: calc(3rem * 1.5);
    }

    .decay-process-item {
        border-radius: calc(12px * 1.5);
        border-width: calc(2px * 1.5);
    }

    .decay-process-item:hover {
        box-shadow: 0 0 calc(30px * 1.5) rgba(0, 255, 255, 0.4),
                    inset 0 0 calc(20px * 1.5) rgba(0, 255, 255, 0.1);
        transform: translateY(calc(-8px * 1.5)) scale(1.02);
    }

    /* Section 6 - Final Look */
    .decay-final-look-section {
        padding: calc(4rem * 2.2) calc(6rem * 2.2) calc(3rem * 2.2) calc(10rem * 2.2);
        margin-top: 0;
    }

    .finallook-header {
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }

    .decay-finallook-header {
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }

    .finallook-header h2 {
        font-size: calc(6rem * 2.0);
        letter-spacing: calc(6px * 2.0);
    }

    .finallook-header h2::after {
        bottom: calc(0.5rem * 2.2);
        right: calc(7rem * 2.2);
        width: calc(100px * 2.2);
        height: calc(2px * 2.2);
    }

    .decay-video-embed-wrapper {
        width: 85%;
        max-width: calc(1400px * 2.5);
        margin: 0;
    }

    .decay-video-container {
        left: 0;
        border-radius: calc(12px * 2.5);
        border-width: calc(3px * 2.5);
        box-shadow: 0 0 calc(30px * 2.5) rgba(0, 255, 255, 0.2);
    }
}

/* Ultra-wide and 8K Displays - Above 3840px */
@media screen and (min-width: 3841px) {
    .decay-title-container h1 {
        font-size: clamp(145px, 5vw, 180px);
        letter-spacing: clamp(6px, 0.2vw, 8px);
    }

    .decay-description-container p,
    .decay-skills-container h2 {
        font-size: clamp(19px, 0.75vw, 24px);
    }

    .decay-rectangle-container {
        left: clamp(32rem, 30vw, 45rem);
        width: 64%;
    }

    .decay-buttons-container {
        gap: clamp(2.5rem, 2vw, 3rem);
    }

    .decay-button {
        width: clamp(220px, 10vw, 260px);
        height: clamp(90px, 4vw, 110px);
    }

    .decay-interactive-content-wrapper {
        width: clamp(60%, 64%, 68%);
        max-width: clamp(2000px, 70vw, 2600px);
        margin-left: clamp(14rem, 14vw, 20rem);
    }

    .decay-interactive-grid {
        gap: clamp(5rem, 5vw, 7rem);
        margin-left: clamp(14rem, 14vw, 20rem);
    }

    .decay-content-area {
        min-height: clamp(650px, 42vh, 850px);
    }

    .decay-grid-button {
        width: clamp(75px, 3vw, 90px);
        height: clamp(75px, 3vw, 90px);
        font-size: clamp(20px, 0.9vw, 24px);
    }

    .decay-storyboard-wrapper {
        max-width: clamp(2000px, 70vw, 2600px);
        margin-left: clamp(28rem, 30vw, 40rem);
    }

    .decay-storyboard-header h2,
    .decay-process-header h2 {
        font-size: clamp(140px, 7vw, 200px);
        letter-spacing: clamp(4px, 0.22vw, 6px);
    }

    .decay-storyboard-grid {
        gap: clamp(2rem, 2.5vw, 3rem);
    }

    .decay-process-wrapper {
        max-width: clamp(2000px, 70vw, 2600px);
        margin-left: clamp(28rem, 30vw, 40rem);
    }

    .decay-process-grid {
        gap: clamp(2.5rem, 3vw, 4rem);
    }

    .decay-video-embed-wrapper {
        max-width: clamp(1800px, 70vw, 2200px);
    }

    .decay-video-container {
        left: clamp(12rem, 12vw, 16rem);
        border: clamp(3px, 0.1vw, 4px) solid rgba(0, 255, 255, 0.3);
        box-shadow: 0 0 clamp(30px, 3.5vw, 45px) rgba(0, 255, 255, 0.2);
    }

    .finallook-header {
        margin-left: clamp(16rem, 18vw, 24rem);
    }

    .finallook-header h2 {
        font-size: clamp(6rem, 6vw, 9rem);
        letter-spacing: clamp(4px, 0.6vw, 8px);
    }
}

/* ===============================================
   DSK HERO SECTION 1
   =============================================== */

.dsk-hero-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: clamp(100vh, 100vh, 120vh);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dsk-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(1.02); /* Slight scale to prevent white edges during transitions */
}

.dsk-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease-out;
    will-change: transform; /* Optimizes performance for transform animations */
    transform: scale(1);
}

.dsk-content {
    position: relative;
    z-index: 2;
    width: min(90%, 1200px);
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 6rem);
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
}

.dsk-content h1 {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: clamp(0.2em, 1vw, 0.4em);
    text-shadow: 
        2px 2px 0 rgba(0, 0, 0, 0.5),
        -2px -2px 0 rgba(0, 255, 255, 0.3);
    transform: translateY(0);
    opacity: 1;
    animation: dskTextReveal 1s ease-out forwards;
}

/* ===============================================
   DSK SECTION 2
   =============================================== */

.dsk-overview-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: clamp(100vh, 100vh, 120vh);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dsk-title-container {
    position: absolute;
    top: 15%;
    left: 34%;
    text-align: left;
    width: auto;
    z-index: 1;
}

.dsk-title-container h1 {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(80px, 7vw, 107px);
    letter-spacing: clamp(3px, 0.3vw, 4.64px);
    line-height: 0.85;
    white-space: nowrap;
    display: inline-block;
    transform: scaleY(1.5);
    transform-origin: center;
}

.dsk-title-container p {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 300;
    line-height: 1.6;
}

.dsk-description-container {
    position: absolute;
    top: 48%;
    left: 34%;
    text-align: left;
    width: 50%;
    z-index: 1;
}

.dsk-description-container p {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 300;
    line-height: 1.6;
}

.dsk-skills-container {
    position: absolute;
    top: clamp(3rem, 3.6vh, 3.6rem);
    right: 10%;
    text-align: left;
    width: auto;
    z-index: 1;
}

.dsk-skills-container h2 {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: clamp(6px, 0.5vw, 8px);
}

.dsk-rectangle-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 70%;
    max-width: clamp(1200px, 90vw, 1400px);
    height: auto;
    z-index: -1;
    overflow: visible;
    margin: 0;
    padding: 0;
}

.dsk-rectangle-container img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: right center;
    margin: 0;
    padding: 0;
}

/* ---------------TAB BUTTONS WITH IMAGE GLOW--------------- */

.dsk-buttons-container {
    position: absolute;
    bottom: 17%;
    left: 34%;
    display: flex;
    gap: clamp(1.5rem, 2vw, 2rem);
    width: auto;
    z-index: 1;
}

.dsk-button {
    position: relative;
    width: clamp(180px, 12vw, 200px);
    height: clamp(70px, 5vw, 80px);
    background: none;
    border: none;
    cursor: pointer;
    overflow: visible;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* The actual button image */
.dsk-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../ASSETS/IMGS/Proj1/TabButton.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: filter 0.3s ease, transform 0.3s ease;
    z-index: 0;
}

/* Glow effect on hover */
.dsk-button:hover::before {
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.6)) 
            drop-shadow(0 0 15px rgba(0, 255, 255, 0.4))
            brightness(1.1);
    transform: scale(1.02);
}

/* Active state glow */
.dsk-button.active::before {
    filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.8)) 
            drop-shadow(0 0 14px rgba(0, 255, 255, 0.5))
            brightness(1.10);
}

.dsk-button-text {
    position: relative;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 500;
    letter-spacing: clamp(1.2px, 0.12vw, 1.5px);
    text-transform: uppercase;
    z-index: 1;
    transition: all 0.3s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

.dsk-button:hover .dsk-button-text {
    color: rgba(0, 255, 255, 1);
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8);
}

.dsk-button.active .dsk-button-text {
    color: rgba(0, 255, 255, 1);
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* ===========================
   DECAY SECTION MEDIA QUERIES
   =========================== */

@media (max-width: 1024px) {
    .dsk-title-container {
        top: 12%;
        left: 25%;
    }

    .dsk-description-container {
        top: 38%;
        left: 25%;
        width: 55%;
    }

    .dsk-skills-container {
        top: 3rem;
        right: 8%;
    }

    .dsk-buttons-container {
        bottom: 38%;
        left: 25%;
    }
}

@media (max-width: 768px) {
    .dsk-title-container {
        top: 10%;
        left: 10%;
        width: 80%;
    }

    .dsk-title-container h1 {
        font-size: clamp(60px, 6vw, 80px);
    }

    .dsk-description-container {
        top: 32%;
        left: 10%;
        width: 70%;
    }

    .dsk-skills-container {
        top: 60%;
        right: auto;
        left: 10%;
        width: 80%;
    }

    .dsk-rectangle-container {
        width: 90%;
        opacity: 0.5;
    }

    .dsk-buttons-container {
        bottom: 15%;
        left: 10%;
        gap: clamp(1.25rem, 1.8vw, 1.5rem);
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .dsk-title-container {
        top: 8%;
        left: 5%;
        width: 90%;
    }

    .dsk-title-container h1 {
        font-size: clamp(48px, 5vw, 60px);
    }

    .dsk-description-container {
        top: 28%;
        left: 5%;
        width: 85%;
    }

    .dsk-description-container p {
        font-size: clamp(13px, 0.95vw, 14px);
    }

    .dsk-skills-container {
        top: 55%;
        left: 5%;
        width: 90%;
    }

    .dsk-skills-container h2 {
        font-size: clamp(13px, 0.95vw, 14px);
    }

    .dsk-rectangle-container {
        width: 100%;
        opacity: 0.3;
    }

    .dsk-buttons-container {
        bottom: 8%;
        left: 5%;
        gap: clamp(0.875rem, 1.2vw, 1rem);
        flex-wrap: wrap;
    }

    .dsk-button {
        width: clamp(150px, 11vw, 160px);
        height: clamp(65px, 4.8vw, 70px);
    }
}


/* ===============================================
   DSK SECTION 3
   =============================================== */

   .dsk-content-container {
    position: relative;
    top: 0;
    left: clamp(18rem, 21vw, 21rem);
    width: 60%;
    min-height: clamp(220px, 20vh, 250px);
    z-index: 9;
    margin-bottom: clamp(1.5rem, 2vw, 2rem);
    padding: 0;
}

.dsk-content {
    display: none;
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

.dsk-content.active {
    display: flex;
    gap: clamp(2rem, 3vw, 3rem);
    align-items: center;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dsk-content-text {
    flex: 1;
}

.dsk-grid-container {
    position: relative;
    margin-left: 0;
    margin-bottom: clamp(10vh, 12vh, 14vh);
    margin-top: clamp(-18%, -15%, -12%);
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: clamp(5%, 7%, 9%);
    width: 100%;
    max-width: clamp(1200px, 90vw, 1400px);
}

.dsk-column-item1 h2 {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(16px, 1.1vw, 18px);
    font-weight: 100;
}

.dsk-column-item2 p {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 300;
    line-height: 1.5;
    text-align: left;
}

.dsk-column-item3 h2 {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(16px, 1.1vw, 18px);
    font-weight: 100;
}

.dsk-column-item4 p {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 300;
    line-height: 1.5;
    text-align: left;
}

.dsk-column-item5 h2 {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(16px, 1.1vw, 18px);
    font-weight: 100;
}

.dsk-column-item6 p {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 300;
    line-height: 1.5;
    text-align: left;
}

.dsk-column-item7 h2 {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(16px, 1.1vw, 18px);
    font-weight: 100;
}

.dsk-column-item8 p {
    color: #ffffff;
    font-family: 'Montserrat Light', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 300;
    line-height: 1.5;
    text-align: left;
}

/* ===========================
   DSK SECTION MEDIA QUERIES
   =========================== */

@media (max-width: 1024px) {
    .dsk-content-container {
        margin-top: clamp(-20rem, -25vh, -18rem);
        left: clamp(20rem, 25vw, 25rem);
        max-width: 700px;
        padding: 1.75rem;
    }

    .dsk-buttons-container {
        bottom: 38%;
        left: 30%;
        gap: 1.5rem;
    }

    .dsk-content-container {
        top: 48vh;
        left: clamp(-12rem, -15vw, -10rem);
        width: 60%;
    }
}

@media (max-width: 768px) {
    .dsk-content-container {
        margin-top: clamp(-15rem, -20vh, -12rem);
        left: clamp(10rem, 15vw, 15rem);
        max-width: 600px;
        padding: 1.5rem;
    }

    .dsk-buttons-container {
        bottom: 35%;
        left: 20%;
        gap: 1rem;
    }

    .dsk-content-container {
        top: 45vh;
        left: clamp(-8rem, -10vw, -5rem);
        width: 70%;
    }
}

@media (max-width: 480px) {
    .dsk-content-container {
        margin-top: clamp(-10rem, -15vh, -8rem);
        left: clamp(2rem, 5vw, 5rem);
        max-width: 90%;
        padding: 1rem;
    }

    .dsk-buttons-container {
        bottom: 30%;
        left: 10%;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .dsk-content-container {
        top: 40vh;
        left: clamp(-2rem, -5vw, 0rem);
        width: 85%;
    }
}


/* ===============================================
   DSK SECTION 4 - STORYBOARD SECTION
   =============================================== */

.dsk-storyboard-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: auto;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(4rem, 8vh, 8rem) 0;
    background-color: var(--bg);
}

.dsk-storyboard-wrapper {
    width: clamp(65%, 70vw, 75%);
    max-width: clamp(1400px, 90vw, 1600px);
    margin: 0 auto;
    margin-left: clamp(20rem, 25vw, 25rem);
    padding: 0 clamp(1rem, 2vw, 2rem);
}

.dsk-storyboard-header {
    text-align: center;
    margin-bottom: clamp(3rem, 6vh, 6rem);
    position: relative;
}

.dsk-storyboard-header h2 {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(80px, 8vw, 107px);
    letter-spacing: clamp(3px, 0.3vw, 4.64px);
    line-height: 0.85;
    white-space: nowrap;
    display: inline-block;
    transform: scaleY(1.5);
}

.dsk-storyboard-header h2::after {
    content: '';
    position: absolute;
    bottom: clamp(-18px, -1.2vh, -12px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(60px, 12vw, 100px);
    height: clamp(1.5px, 0.15vw, 2px);
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 255, 255, 0.8) 50%,
        transparent 100%);
    box-shadow: 0 0 clamp(8px, 1vw, 10px) rgba(0, 255, 255, 0.5);
}

.dsk-storyboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2vw, 2rem);
    width: 100%;
}

.dsk-storyboard-item {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: clamp(4px, 0.5vw, 8px);
    background: rgba(0, 0, 0, 0.4);
    border: clamp(0.8px, 0.08vw, 1px) solid rgba(0, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.dsk-storyboard-item:hover {
    border-color: rgba(0, 255, 255, 0.6);
    box-shadow: 0 0 clamp(15px, 2vw, 20px) rgba(0, 255, 255, 0.3);
    transform: translateY(clamp(-3px, -0.4vh, -5px));
}

.dsk-storyboard-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.dsk-storyboard-item:hover img {
    transform: scale(1.05);
}

/* ===========================
   DSK STORYBOARD MEDIA QUERIES
   =========================== */

/* Tablets and smaller laptops */
@media (max-width: 1024px) {
    .dsk-storyboard-section {
        padding: clamp(3rem, 6vh, 6rem) 0;
    }

    .dsk-storyboard-wrapper {
        width: clamp(70%, 75vw, 80%);
        margin-left: clamp(15rem, 20vw, 20rem);
    }

    .dsk-storyboard-header {
        margin-bottom: clamp(2.5rem, 5vh, 5rem);
    }

    .dsk-storyboard-header h2 {
        font-size: clamp(42px, 5.5vw, 70px);
    }

    .dsk-storyboard-grid {
        gap: clamp(0.875rem, 1.75vw, 1.75rem);
    }
}

/* Tablets portrait */
@media (max-width: 768px) {
    .dsk-storyboard-section {
        padding: clamp(2.5rem, 5vh, 5rem) 0;
    }

    .dsk-storyboard-wrapper {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .dsk-storyboard-header {
        margin-bottom: clamp(2rem, 4vh, 4rem);
    }

    .dsk-storyboard-header h2 {
        font-size: clamp(36px, 5vw, 60px);
        letter-spacing: clamp(1.5px, 0.25vw, 3px);
    }

    .dsk-storyboard-header h2::after {
        width: clamp(50px, 10vw, 80px);
        bottom: -12px;
    }

    .dsk-storyboard-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(0.75rem, 1.5vw, 1.5rem);
    }

    .dsk-storyboard-item {
        border-radius: clamp(3px, 0.4vw, 6px);
    }

    .dsk-storyboard-item:hover {
        transform: translateY(-3px);
    }
}

/* Mobile devices */
@media (max-width: 480px) {
    .dsk-storyboard-section {
        padding: clamp(2rem, 4vh, 4rem) 0;
    }

    .dsk-storyboard-wrapper {
        width: 92%;
        margin-left: auto;
        margin-right: auto;
    }

    .dsk-storyboard-header {
        margin-bottom: clamp(1.5rem, 3vh, 3rem);
    }

    .dsk-storyboard-header h2 {
        font-size: clamp(28px, 7vw, 48px);
        letter-spacing: clamp(1px, 0.2vw, 2px);
    }

    .dsk-storyboard-header h2::after {
        width: clamp(40px, 8vw, 60px);
        bottom: -10px;
        height: 1.5px;
    }

    .dsk-storyboard-grid {
        grid-template-columns: 1fr;
        gap: clamp(0.75rem, 1.5vw, 1.25rem);
    }

    .dsk-storyboard-item {
        aspect-ratio: 16 / 9;
        border-radius: 4px;
    }

    .dsk-storyboard-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
    }
}

/* Extra small mobile devices */
@media (max-width: 360px) {
    .dsk-storyboard-section {
        padding: clamp(1.5rem, 3vh, 3rem) 0;
    }

    .dsk-storyboard-wrapper {
        width: 94%;
        margin-left: auto;
        margin-right: auto;
    }

    .dsk-storyboard-header h2 {
        font-size: clamp(24px, 6.5vw, 40px);
    }

    .dsk-storyboard-header h2::after {
        width: clamp(35px, 7vw, 50px);
        bottom: -8px;
    }

    .dsk-storyboard-grid {
        gap: clamp(0.625rem, 1.25vw, 1rem);
    }
}


/* ===============================================
   DSK SECTION 5 - VISUAL TREATMENT SECTION
   =============================================== */

.dsk-visual-treatment-section {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.dsk-visual-treatment-wrapper {
    width: 70%;
    max-width: 1600px;
    height: 65vh;
    margin: 0 auto;
    margin-left: 24rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dsk-visual-treatment-grid {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: clamp(2rem, 3vw, 3rem);
    width: 100%;
    height: 100%;
    align-items: center;
}

.dsk-visual-treatment-text {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 1.5vh, 1.5rem);
    padding: clamp(1rem, 1.5vw, 1.5rem);
    justify-content: center;
}

.dsk-visual-treatment-text h2 {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(28px, 3.5vw, 48px);
    letter-spacing: clamp(1.5px, 0.2vw, 3px);
    line-height: 1.1;
    text-transform: uppercase;
    position: relative;
    margin-bottom: clamp(0.5rem, 1vh, 1rem);
}

.dsk-visual-treatment-text h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: clamp(40px, 8vw, 60px);
    height: 2px;
    background: linear-gradient(90deg,
        rgba(0, 255, 255, 0.8) 0%,
        transparent 100%);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
}

.dsk-visual-treatment-text p {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(13px, 1.1vw, 15px);
    font-weight: 300;
    line-height: 1.6;
    opacity: 0.9;
}

.dsk-visual-treatment-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: clamp(6px, 0.8vw, 12px);
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(0, 255, 255, 0.3);
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dsk-visual-treatment-image:hover {
    border-color: rgba(0, 255, 255, 0.8);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.4),
                inset 0 0 20px rgba(0, 255, 255, 0.1);
    transform: translateY(-5px);
}

.dsk-visual-treatment-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.4s ease;
}

.dsk-visual-treatment-image:hover img {
    transform: scale(1.03);
}

/* ===========================
   DSK VISUAL TREATMENT MEDIA QUERIES
   =========================== */

/* Tablets and smaller laptops */
@media (max-width: 1024px) {
    .dsk-visual-treatment-wrapper {
        width: 88%;
        height: 60vh;
        margin-left: 18rem;
    }

    .dsk-visual-treatment-grid {
        gap: clamp(1.5rem, 2.5vw, 2.5rem);
    }

    .dsk-visual-treatment-text h2 {
        font-size: clamp(24px, 3vw, 40px);
    }

    .dsk-visual-treatment-text p {
        font-size: clamp(12px, 1vw, 14px);
    }
}

/* Tablets portrait */
@media (max-width: 768px) {
    .dsk-visual-treatment-section {
        height: auto;
        min-height: 100vh;
        padding: clamp(3rem, 6vh, 6rem) 0;
    }

    .dsk-visual-treatment-wrapper {
        width: 90%;
        height: auto;
        margin-left: auto;
    }

    .dsk-visual-treatment-grid {
        grid-template-columns: 1fr;
        gap: clamp(2rem, 4vh, 3rem);
        height: auto;
    }

    .dsk-visual-treatment-text {
        padding: 0;
        text-align: center;
        height: auto;
    }

    .dsk-visual-treatment-text h2 {
        font-size: clamp(32px, 5vw, 48px);
    }

    .dsk-visual-treatment-text h2::after {
        left: 50%;
        transform: translateX(-50%);
        width: clamp(50px, 10vw, 70px);
    }

    .dsk-visual-treatment-text p {
        font-size: clamp(14px, 1.3vw, 16px);
        text-align: center;
    }

    .dsk-visual-treatment-image {
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: clamp(5px, 0.6vw, 10px);
    }

    .dsk-visual-treatment-image:hover {
        transform: translateY(-3px);
    }
}

/* Mobile devices */
@media (max-width: 480px) {
    .dsk-visual-treatment-section {
        padding: clamp(2rem, 4vh, 4rem) 0;
    }

    .dsk-visual-treatment-wrapper {
        width: 92%;
    }

    .dsk-visual-treatment-grid {
        gap: clamp(1.5rem, 3vh, 2.5rem);
    }

    .dsk-visual-treatment-text h2 {
        font-size: clamp(28px, 6vw, 40px);
        letter-spacing: clamp(1px, 0.15vw, 2px);
    }

    .dsk-visual-treatment-text h2::after {
        width: clamp(40px, 8vw, 60px);
    }

    .dsk-visual-treatment-text p {
        font-size: clamp(13px, 1.2vw, 15px);
        line-height: 1.6;
    }

    .dsk-visual-treatment-image {
        aspect-ratio: 4 / 3;
        border-radius: 6px;
        border-width: 1.5px;
    }

    .dsk-visual-treatment-image:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
    }

    .dsk-visual-treatment-image:hover img {
        transform: scale(1.02);
    }
}

/* Extra small mobile devices */
@media (max-width: 360px) {
    .dsk-visual-treatment-section {
        padding: clamp(1.5rem, 3vh, 3rem) 0;
    }

    .dsk-visual-treatment-wrapper {
        width: 94%;
    }

    .dsk-visual-treatment-grid {
        gap: clamp(1.25rem, 2.5vh, 2rem);
    }

    .dsk-visual-treatment-text h2 {
        font-size: clamp(24px, 5.5vw, 36px);
    }

    .dsk-visual-treatment-text h2::after {
        width: clamp(35px, 7vw, 50px);
    }

    .dsk-visual-treatment-text p {
        font-size: clamp(12px, 1.1vw, 14px);
    }

    .dsk-visual-treatment-image {
        border-radius: 4px;
    }
}


/* ===============================================
   DSK SECTION 6 - CHARACTER DESIGN SECTION
   =============================================== */

.dsk-character-design-section {
    position: relative;
    width: 100%;
    height: 100vh;
    top: 31rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.dsk-character-design-wrapper {
    width: 70%;
    max-width: 1600px;
    height: 65vh;
    margin: 0 auto;
    margin-left: 26rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dsk-character-design-grid {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: clamp(2rem, 3vw, 3rem);
    width: 100%;
    height: 100%;
    align-items: center;
}

.dsk-character-design-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: clamp(6px, 0.8vw, 12px);
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(0, 255, 255, 0.3);
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dsk-character-design-image:hover {
    border-color: rgba(0, 255, 255, 0.8);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.4),
                inset 0 0 20px rgba(0, 255, 255, 0.1);
    transform: translateY(-5px);
}

.dsk-character-design-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.4s ease;
}

.dsk-character-design-image:hover img {
    transform: scale(1.03);
}

.dsk-character-design-text {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 1.5vh, 1.5rem);
    padding: clamp(1rem, 1.5vw, 1.5rem);
    justify-content: center;
}

.dsk-character-design-text h2 {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(28px, 3.5vw, 48px);
    letter-spacing: clamp(1.5px, 0.2vw, 3px);
    line-height: 1.1;
    text-transform: uppercase;
    position: relative;
    margin-bottom: clamp(0.5rem, 1vh, 1rem);
}

.dsk-character-design-text h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: clamp(40px, 8vw, 60px);
    height: 2px;
    background: linear-gradient(90deg,
        rgba(0, 255, 255, 0.8) 0%,
        transparent 100%);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
}

.dsk-character-design-text p {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(13px, 1.1vw, 15px);
    font-weight: 300;
    line-height: 1.6;
    opacity: 0.9;
}

/* ===========================
   DSK CHARACTER DESIGN MEDIA QUERIES
   =========================== */

/* Tablets and smaller laptops */
@media (max-width: 1024px) {
    .dsk-character-design-section {
        top: 24rem;
    }

    .dsk-character-design-wrapper {
        width: 88%;
        height: 60vh;
        margin-left: 19.5rem;
    }

    .dsk-character-design-grid {
        gap: clamp(1.5rem, 2.5vw, 2.5rem);
    }

    .dsk-character-design-text h2 {
        font-size: clamp(24px, 3vw, 40px);
    }

    .dsk-character-design-text p {
        font-size: clamp(12px, 1vw, 14px);
    }
}

/* Tablets portrait */
@media (max-width: 768px) {
    .dsk-character-design-section {
        height: auto;
        min-height: 100vh;
        padding: clamp(3rem, 6vh, 6rem) 0;
        top: 0;
    }

    .dsk-character-design-wrapper {
        width: 90%;
        height: auto;
        margin-left: auto;
    }

    .dsk-character-design-grid {
        grid-template-columns: 1fr;
        gap: clamp(2rem, 4vh, 3rem);
        height: auto;
    }

    .dsk-character-design-text {
        padding: 0;
        text-align: center;
        height: auto;
    }

    .dsk-character-design-text h2 {
        font-size: clamp(32px, 5vw, 48px);
    }

    .dsk-character-design-text h2::after {
        left: 50%;
        transform: translateX(-50%);
        width: clamp(50px, 10vw, 70px);
    }

    .dsk-character-design-text p {
        font-size: clamp(14px, 1.3vw, 16px);
        text-align: center;
    }

    .dsk-character-design-image {
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: clamp(5px, 0.6vw, 10px);
    }

    .dsk-character-design-image:hover {
        transform: translateY(-3px);
    }
}

/* Mobile devices */
@media (max-width: 480px) {
    .dsk-character-design-section {
        padding: clamp(2rem, 4vh, 4rem) 0;
    }

    .dsk-character-design-wrapper {
        width: 92%;
    }

    .dsk-character-design-grid {
        gap: clamp(1.5rem, 3vh, 2.5rem);
    }

    .dsk-character-design-text h2 {
        font-size: clamp(28px, 6vw, 40px);
        letter-spacing: clamp(1px, 0.15vw, 2px);
    }

    .dsk-character-design-text h2::after {
        width: clamp(40px, 8vw, 60px);
    }

    .dsk-character-design-text p {
        font-size: clamp(13px, 1.2vw, 15px);
        line-height: 1.6;
    }

    .dsk-character-design-image {
        aspect-ratio: 4 / 3;
        border-radius: 6px;
        border-width: 1.5px;
    }

    .dsk-character-design-image:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
    }

    .dsk-character-design-image:hover img {
        transform: scale(1.02);
    }
}

/* Extra small mobile devices */
@media (max-width: 360px) {
    .dsk-character-design-section {
        padding: clamp(1.5rem, 3vh, 3rem) 0;
    }

    .dsk-character-design-wrapper {
        width: 94%;
    }

    .dsk-character-design-grid {
        gap: clamp(1.25rem, 2.5vh, 2rem);
    }

    .dsk-character-design-text h2 {
        font-size: clamp(24px, 5.5vw, 36px);
    }

    .dsk-character-design-text h2::after {
        width: clamp(35px, 7vw, 50px);
    }

    .dsk-character-design-text p {
        font-size: clamp(12px, 1.1vw, 14px);
    }

    .dsk-character-design-image {
        border-radius: 4px;
    }
}


/* ===============================================
   DSK SECTION 7 - PROCESS SECTION
   =============================================== */

.dsk-process-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    top: 23rem;
    left: 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(3rem, 5vh, 5rem) 0;
}

.dsk-process-wrapper {
    width: 70%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0;
}

.dsk-process-header {
    margin-bottom: clamp(2rem, 3vh, 3rem);
    text-align: center;
}

.dsk-process-header h2 {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: calc(107px * var(--font-scale));
    letter-spacing: 4.64px;
    line-height: 0.85;
    white-space: nowrap;
    display: inline-block;
    transform: scaleY(1.5);
}

.dsk-process-header h2::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(60px, 10vw, 80px);
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 255, 255, 0.8) 50%,
        transparent 100%);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.dsk-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 2.5vw, 2.5rem);
    width: 100%;
}

.dsk-process-item {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: clamp(8px, 1vw, 12px);
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(0, 255, 255, 0.3);
    transition: all 0.4s ease;
}

.dsk-process-item:hover {
    border-color: rgba(0, 255, 255, 0.8);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.4),
                inset 0 0 20px rgba(0, 255, 255, 0.1);
    transform: translateY(-8px);
}

.dsk-process-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.dsk-process-item:hover img {
    transform: scale(1.05);
}

/* ===========================
   DSK PROCESS MEDIA QUERIES
   =========================== */

/* Tablets and smaller laptops */
@media (max-width: 1024px) {
    .dsk-process-wrapper {
        width: 88%;
    }

    .dsk-process-header h2 {
        font-size: clamp(32px, 3.5vw, 48px);
    }

    .dsk-process-grid {
        gap: clamp(1.25rem, 2vw, 2rem);
    }
}

/* Tablets portrait */
@media (max-width: 768px) {
    .dsk-process-section {
        padding: clamp(2.5rem, 5vh, 4rem) 0;
    }

    .dsk-process-wrapper {
        width: 90%;
    }

    .dsk-process-header {
        margin-bottom: clamp(1.5rem, 2.5vh, 2.5rem);
    }

    .dsk-process-header h2 {
        font-size: clamp(28px, 4vw, 40px);
    }

    .dsk-process-grid {
        grid-template-columns: 1fr;
        gap: clamp(1.5rem, 3vh, 2rem);
    }

    .dsk-process-item {
        aspect-ratio: 16 / 9;
    }

    .dsk-process-item:hover {
        transform: translateY(-5px);
    }
}

/* Mobile devices */
@media (max-width: 480px) {
    .dsk-process-section {
        padding: clamp(2rem, 4vh, 3rem) 0;
    }

    .dsk-process-wrapper {
        width: 92%;
    }

    .dsk-process-header {
        margin-bottom: clamp(1.25rem, 2vh, 2rem);
    }

    .dsk-process-header h2 {
        font-size: clamp(24px, 5vw, 36px);
        letter-spacing: clamp(1.5px, 0.25vw, 3px);
    }

    .dsk-process-header h2::after {
        width: clamp(50px, 8vw, 70px);
        height: 2px;
    }

    .dsk-process-grid {
        gap: clamp(1.25rem, 2.5vh, 1.75rem);
    }

    .dsk-process-item {
        aspect-ratio: 4 / 3;
        border-radius: 6px;
        border-width: 1.5px;
    }

    .dsk-process-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
    }

    .dsk-process-item:hover img {
        transform: scale(1.03);
    }
}

/* Extra small mobile devices */
@media (max-width: 360px) {
    .dsk-process-section {
        padding: clamp(1.5rem, 3vh, 2.5rem) 0;
    }

    .dsk-process-wrapper {
        width: 94%;
    }

    .dsk-process-header {
        margin-bottom: clamp(1rem, 1.5vh, 1.5rem);
    }

    .dsk-process-header h2 {
        font-size: clamp(22px, 4.5vw, 32px);
    }

    .dsk-process-header h2::after {
        width: clamp(40px, 7vw, 60px);
    }

    .dsk-process-grid {
        gap: clamp(1rem, 2vh, 1.5rem);
    }

    .dsk-process-item {
        border-radius: 4px;
    }
}

/* ===============================================
   DSK SECTION 8 - ENVIRONMENTS SECTION
   =============================================== */

.dsk-environments-section {
    position: relative;
    width: 83%;
    top: 17rem;
    left: 20rem;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(3rem, 5vh, 5rem) 0;
}

.dsk-environments-wrapper {
    width: 85%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0;
}

.dsk-environments-header {
    margin-bottom: clamp(2rem, 3vh, 3rem);
    text-align: center;
}

.dsk-environments-header h2 {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: calc(107px * var(--font-scale));
    letter-spacing: 4.64px;
    line-height: 0.85;
    white-space: nowrap;
    display: inline-block;
    transform: scaleY(1.5);
}

.dsk-environments-header h2::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(60px, 10vw, 80px);
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 255, 255, 0.8) 50%,
        transparent 100%);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.dsk-environments-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 2.5vw, 2.5rem);
    width: 100%;
}

.dsk-environments-item {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: clamp(8px, 1vw, 12px);
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(0, 255, 255, 0.3);
    transition: all 0.4s ease;
}

.dsk-environments-item:hover {
    border-color: rgba(0, 255, 255, 0.8);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.4),
                inset 0 0 20px rgba(0, 255, 255, 0.1);
    transform: translateY(-8px);
}

.dsk-environments-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.dsk-environments-item:hover img {
    transform: scale(1.05);
}

/* ===========================
   DSK ENVIRONMENTS MEDIA QUERIES
   =========================== */

/* Tablets and smaller laptops */
@media (max-width: 1024px) {
    .dsk-environments-wrapper {
        width: 88%;
    }

    .dsk-environments-header h2 {
        font-size: clamp(32px, 3.5vw, 48px);
    }

    .dsk-environments-grid {
        gap: clamp(1.25rem, 2vw, 2rem);
    }
}

/* Tablets portrait */
@media (max-width: 768px) {
    .dsk-environments-section {
        padding: clamp(2.5rem, 5vh, 4rem) 0;
    }

    .dsk-environments-wrapper {
        width: 90%;
    }

    .dsk-environments-header {
        margin-bottom: clamp(1.5rem, 2.5vh, 2.5rem);
    }

    .dsk-environments-header h2 {
        font-size: clamp(28px, 4vw, 40px);
    }

    .dsk-environments-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(1.25rem, 2.5vh, 1.75rem);
    }

    .dsk-environments-item:hover {
        transform: translateY(-5px);
    }
}

/* Mobile devices */
@media (max-width: 480px) {
    .dsk-environments-section {
        padding: clamp(2rem, 4vh, 3rem) 0;
    }

    .dsk-environments-wrapper {
        width: 92%;
    }

    .dsk-environments-header {
        margin-bottom: clamp(1.25rem, 2vh, 2rem);
    }

    .dsk-environments-header h2 {
        font-size: clamp(24px, 5vw, 36px);
        letter-spacing: clamp(1.5px, 0.25vw, 3px);
    }

    .dsk-environments-header h2::after {
        width: clamp(50px, 8vw, 70px);
        height: 2px;
    }

    .dsk-environments-grid {
        grid-template-columns: 1fr;
        gap: clamp(1.25rem, 2.5vh, 1.75rem);
    }

    .dsk-environments-item {
        border-radius: 6px;
        border-width: 1.5px;
    }

    .dsk-environments-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
    }

    .dsk-environments-item:hover img {
        transform: scale(1.03);
    }
}

/* Extra small mobile devices */
@media (max-width: 360px) {
    .dsk-environments-section {
        padding: clamp(1.5rem, 3vh, 2.5rem) 0;
    }

    .dsk-environments-wrapper {
        width: 94%;
    }

    .dsk-environments-header {
        margin-bottom: clamp(1rem, 1.5vh, 1.5rem);
    }

    .dsk-environments-header h2 {
        font-size: clamp(22px, 4.5vw, 32px);
    }

    .dsk-environments-header h2::after {
        width: clamp(40px, 7vw, 60px);
    }

    .dsk-environments-grid {
        gap: clamp(1rem, 2vh, 1.5rem);
    }

    .dsk-environments-item {
        border-radius: 4px;
    }
}


/* ===============================================
   DSK SECTION 9 - STYLE FRAMES SECTION
   =============================================== */

.dsk-styleframes-section {
    position: relative;
    width: 83%;
    top: 17rem;
    left: 20rem;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(3rem, 5vh, 5rem) 0;
}

.dsk-styleframes-wrapper {
    width: 85%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0;
}

.dsk-styleframes-header {
    margin-bottom: clamp(2rem, 3vh, 3rem);
    text-align: center;
}

.dsk-styleframes-header h2 {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: calc(107px * var(--font-scale));
    letter-spacing: 4.64px;
    line-height: 0.85;
    white-space: nowrap;
    display: inline-block;
    transform: scaleY(1.5);
}

.dsk-styleframes-header h2::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(60px, 10vw, 80px);
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 255, 255, 0.8) 50%,
        transparent 100%);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.dsk-styleframes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 2.5vw, 2.5rem);
    width: 100%;
}

.dsk-styleframes-item {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: clamp(8px, 1vw, 12px);
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(0, 255, 255, 0.3);
    transition: all 0.4s ease;
}

.dsk-styleframes-item:hover {
    border-color: rgba(0, 255, 255, 0.8);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.4),
                inset 0 0 20px rgba(0, 255, 255, 0.1);
    transform: translateY(-8px);
}

.dsk-styleframes-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.dsk-styleframes-item:hover img {
    transform: scale(1.05);
}

/* ===========================
   DSK STYLE FRAMES MEDIA QUERIES
   =========================== */

/* Tablets and smaller laptops */
@media (max-width: 1024px) {
    .dsk-styleframes-wrapper {
        width: 88%;
    }

    .dsk-styleframes-header h2 {
        font-size: clamp(32px, 3.5vw, 48px);
    }

    .dsk-styleframes-grid {
        gap: clamp(1.25rem, 2vw, 2rem);
    }
}

/* Tablets portrait */
@media (max-width: 768px) {
    .dsk-styleframes-section {
        padding: clamp(2.5rem, 5vh, 4rem) 0;
    }

    .dsk-styleframes-wrapper {
        width: 90%;
    }

    .dsk-styleframes-header {
        margin-bottom: clamp(1.5rem, 2.5vh, 2.5rem);
    }

    .dsk-styleframes-header h2 {
        font-size: clamp(28px, 4vw, 40px);
    }

    .dsk-styleframes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(1.25rem, 2.5vh, 1.75rem);
    }

    .dsk-styleframes-item:hover {
        transform: translateY(-5px);
    }
}

/* Mobile devices */
@media (max-width: 480px) {
    .dsk-styleframes-section {
        padding: clamp(2rem, 4vh, 3rem) 0;
    }

    .dsk-styleframes-wrapper {
        width: 92%;
    }

    .dsk-styleframes-header {
        margin-bottom: clamp(1.25rem, 2vh, 2rem);
    }

    .dsk-styleframes-header h2 {
        font-size: clamp(24px, 5vw, 36px);
        letter-spacing: clamp(1.5px, 0.25vw, 3px);
    }

    .dsk-styleframes-header h2::after {
        width: clamp(50px, 8vw, 70px);
        height: 2px;
    }

    .dsk-styleframes-grid {
        grid-template-columns: 1fr;
        gap: clamp(1.25rem, 2.5vh, 1.75rem);
    }

    .dsk-styleframes-item {
        border-radius: 6px;
        border-width: 1.5px;
    }

    .dsk-styleframes-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
    }

    .dsk-styleframes-item:hover img {
        transform: scale(1.03);
    }
}

/* Extra small mobile devices */
@media (max-width: 360px) {
    .dsk-styleframes-section {
        padding: clamp(1.5rem, 3vh, 2.5rem) 0;
    }

    .dsk-styleframes-wrapper {
        width: 94%;
    }

    .dsk-styleframes-header {
        margin-bottom: clamp(1rem, 1.5vh, 1.5rem);
    }

    .dsk-styleframes-header h2 {
        font-size: clamp(22px, 4.5vw, 32px);
    }

    .dsk-styleframes-header h2::after {
        width: clamp(40px, 7vw, 60px);
    }

    .dsk-styleframes-grid {
        gap: clamp(1rem, 2vh, 1.5rem);
    }

    .dsk-styleframes-item {
        border-radius: 4px;
    }
}


/* ===============================================
   DSK SECTION 10 - FINAL LOOK (VIDEO)
   =============================================== */

.dskvideo-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: clamp(6rem, 10vh, 8rem) clamp(2rem, 5vw, 6rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;
    
    /* margin-bottom: 4rem; spacing before footer */
}

.finallook-header {
    text-align: center;
    margin-bottom: clamp(3rem, 6vh, 5rem);
    margin-top: clamp(25rem, 35vh, 35rem);
    margin-left: clamp(10rem, 15vw, 15rem);
    width: 100%;
}

.finallook-header h2 {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(4rem, 7vw, 6rem);
    letter-spacing: clamp(3px, 0.5vw, 6px);
    line-height: 0.85;
    white-space: nowrap;
    display: inline-block;
    transform: scaleY(1.5);
}

.finallook-header h2::after {
    content: '';
    position: absolute;
    bottom: clamp(0.3rem, 0.5vh, 0.5rem);
    right: clamp(5rem, 7vw, 7rem);
    transform: translateX(-50%);
    width: clamp(60px, 15vw, 100px);
    height: clamp(1.5px, 0.15vw, 2px);
    background: linear-gradient(90deg, transparent, #00ffff, transparent);
}

.dskvideo-embed-wrapper {
    width: clamp(65%, 70%, 75%);
    max-width: clamp(1200px, 90vw, 1400px);
    margin: 0 auto;
}

.dskvideo-container {
    position: relative;
    left: clamp(6rem, 9vw, 9rem);
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: clamp(8px, 1vw, 12px);
    border: clamp(2px, 0.15vw, 3px) solid rgba(0, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 clamp(20px, 3vw, 30px) rgba(0, 255, 255, 0.2);
}

.dskvideo-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ===========================
   DSK LARGE SCREEN OPTIMIZATIONS
   =========================== */

/* Large Desktop - 1440px to 1920px */
@media screen and (min-width: 1025px) and (max-width: 1440px) {
    .dsk-title-container h1 {
        font-size: clamp(95px, 6.8vw, 107px);
    }

    .dsk-storyboard-wrapper {
        width: clamp(68%, 70vw, 72%);
        max-width: clamp(1350px, 88vw, 1500px);
        margin-left: clamp(22rem, 24vw, 24rem);
    }

    .dsk-content-container {
        left: clamp(19rem, 20vw, 20rem);
    }
}

/* Extra Large Desktop - 1920px to 2560px */
@media screen and (min-width: 1441px) and (max-width: 1920px) {
    .dsk-title-container h1 {
        font-size: clamp(102px, 6.5vw, 115px);
    }

    .dsk-storyboard-wrapper {
        max-width: clamp(1400px, 85vw, 1700px);
        margin-left: clamp(23rem, 25vw, 26rem);
    }

    .dsk-content-container {
        left: clamp(20rem, 21vw, 22rem);
        width: 62%;
    }

    .dskvideo-embed-wrapper {
        max-width: clamp(1300px, 85vw, 1500px);
    }
}

/* 2K Displays - 2560px to 3840px */
@media screen and (min-width: 1921px) and (max-width: 2560px) {
    .dsk-title-container h1 {
        font-size: clamp(110px, 6vw, 130px);
        letter-spacing: clamp(4px, 0.25vw, 5.5px);
    }

    .dsk-description-container p,
    .dsk-skills-container h2 {
        font-size: clamp(16px, 0.9vw, 18px);
    }

    .dsk-storyboard-wrapper {
        max-width: clamp(1600px, 80vw, 1900px);
        margin-left: clamp(24rem, 26vw, 28rem);
    }

    .dsk-storyboard-header h2 {
        font-size: clamp(100px, 8vw, 140px);
    }

    .dsk-content-container {
        left: clamp(21rem, 22vw, 24rem);
        width: 60%;
    }

    .dskvideo-embed-wrapper {
        max-width: clamp(1400px, 80vw, 1600px);
    }

    .dskvideo-container {
        left: clamp(8rem, 10vw, 11rem);
    }
}

/* 4K Displays - 3840px and above */
@media screen and (min-width: 2561px) and (max-width: 3840px) {
    .dsk-title-container h1 {
        font-size: clamp(125px, 5.5vw, 150px);
        letter-spacing: clamp(5px, 0.22vw, 6.5px);
    }

    .dsk-description-container p,
    .dsk-skills-container h2 {
        font-size: clamp(17px, 0.8vw, 20px);
    }

    .dsk-buttons-container {
        gap: clamp(2rem, 2.2vw, 2.5rem);
    }

    .dsk-button {
        width: clamp(200px, 11vw, 220px);
        height: clamp(80px, 4.5vw, 90px);
    }

    .dsk-storyboard-wrapper {
        max-width: clamp(1800px, 75vw, 2200px);
        margin-left: clamp(26rem, 28vw, 32rem);
    }

    .dsk-storyboard-header h2 {
        font-size: clamp(120px, 7.5vw, 160px);
        letter-spacing: clamp(3.5px, 0.25vw, 5px);
    }

    .dsk-storyboard-grid {
        gap: clamp(1.75rem, 2.2vw, 2.5rem);
    }

    .dsk-content-container {
        left: clamp(22rem, 23vw, 26rem);
        width: 58%;
    }

    .dskvideo-embed-wrapper {
        max-width: clamp(1600px, 75vw, 1800px);
    }

    .dskvideo-container {
        left: clamp(10rem, 11vw, 13rem);
        border: clamp(2.5px, 0.12vw, 3.5px) solid rgba(0, 255, 255, 0.3);
        box-shadow: 0 0 clamp(25px, 3.2vw, 35px) rgba(0, 255, 255, 0.2);
    }

    .finallook-header {
        margin-left: clamp(12rem, 16vw, 18rem);
    }

    .finallook-header h2 {
        font-size: clamp(5rem, 6.5vw, 7rem);
    }
}

/* Ultra-wide and 8K Displays - Above 3840px */
@media screen and (min-width: 3841px) {
    .dsk-title-container h1 {
        font-size: clamp(145px, 5vw, 180px);
        letter-spacing: clamp(6px, 0.2vw, 8px);
    }

    .dsk-description-container p,
    .dsk-skills-container h2 {
        font-size: clamp(19px, 0.75vw, 24px);
    }

    .dsk-buttons-container {
        gap: clamp(2.5rem, 2vw, 3rem);
    }

    .dsk-button {
        width: clamp(220px, 10vw, 260px);
        height: clamp(90px, 4vw, 110px);
    }

    .dsk-storyboard-wrapper {
        max-width: clamp(2000px, 70vw, 2600px);
        margin-left: clamp(30rem, 32vw, 40rem);
    }

    .dsk-storyboard-header h2 {
        font-size: clamp(140px, 7vw, 200px);
        letter-spacing: clamp(4px, 0.22vw, 6px);
    }

    .dsk-storyboard-grid {
        gap: clamp(2rem, 2.5vw, 3rem);
    }

    .dsk-content-container {
        left: clamp(24rem, 25vw, 30rem);
        width: 56%;
    }

    .dskvideo-embed-wrapper {
        max-width: clamp(1800px, 70vw, 2200px);
    }

    .dskvideo-container {
        left: clamp(12rem, 12vw, 16rem);
        border: clamp(3px, 0.1vw, 4px) solid rgba(0, 255, 255, 0.3);
        box-shadow: 0 0 clamp(30px, 3.5vw, 45px) rgba(0, 255, 255, 0.2);
    }

    .finallook-header {
        margin-left: clamp(16rem, 18vw, 24rem);
    }

    .finallook-header h2 {
        font-size: clamp(6rem, 6vw, 9rem);
        letter-spacing: clamp(4px, 0.6vw, 8px);
    }
}

/* ===============================================
   COMPREHENSIVE RESPONSIVE MEDIA QUERIES
   Optimized for all screen sizes from mobile to 4K
   =============================================== */

/* ===== BREAKPOINT: 480px (Mobile Portrait) ===== */
@media screen and (max-width: 480px) {
    :root {
        --spacing-scale: 0.7;
        --font-scale: 0.85;
        --hamburger-top: 20px;
        --hamburger-right: 20px;
        --hamburger-size: 48px;
    }

    .gallery-item {
        width: clamp(140px, 90vw, 200px);
        height: clamp(140px, 90vw, 200px);
    }

    .image-gallery-container {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .gallery-item.middle-item {
        transform: translateY(0);
    }

    .nav-container {
        left: 20px;
    }

    /* Persona instruction container */
    .persona-instruct-container {
        top: -5rem;
        font-size: clamp(0.6rem, 2vw, 0.75rem);
        left: 50%;
    }

    /* Showcase item 4 stacks vertically on mobile */
    .showcase-item[data-showcase="4"] {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .showcase-item[data-showcase="4"] .showcase-phone-left {
        min-height: 400px;
    }

    .showcase-item[data-showcase="4"] .showcase-text-right {
        grid-column: 1;
        margin-right: 0;
        padding: 0 1rem;
    }

    /* Biomarkers video adjustment for mobile */
    .showcase-biosensor-video {
        height: 70%;
        transform: scale(0.7);
    }

    /* Layout adjustments for mobile */
    .header-container {
        top: 40vh;
        width: 95%;
    }

    .future-container {
        top: 15%;
        left: 50%;
        transform: translateX(-50%) scaleY(1.5);
    }

    .future-container h1 {
        font-size: clamp(2rem, 8vw, 3rem);
        text-align: center;
    }

    .nova-overview-container {
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        text-align: center;
    }

    .skills-container {
        position: relative;
        top: auto;
        right: auto;
        margin: 2rem auto;
        text-align: center;
    }

    .tab-buttons-container {
        bottom: 5%;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .material-container {
        left: 0;
        width: 95vw;
        margin: 0 auto;
    }

    .grid-container3 {
        grid-template-columns: 1fr;
        margin-left: 5%;
        margin-right: 5%;
        gap: 1.5rem;
    }

    .expandable-gallery {
        flex-direction: column;
        height: auto;
        width: 90%;
        margin-left: 0;
        margin: 0 auto;
    }

    /* Gallery header adjustments for mobile */
    .gallery-header {
        margin-top: clamp(3rem, 5vh, 5rem);
        margin-left: 0;
        margin-right: 0;
        width: 90%;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    .gallery-header h1 {
        font-size: clamp(2.5rem, 8vw, 4rem);
    }

    /* Image grid adjustments for mobile */
    .image-grid-container {
        grid-template-columns: 1fr;
        width: 95%;
        margin-left: 2.5%;
        padding: 1rem;
        gap: 1rem;
    }

    /* Video reveal adjustments for mobile */
    .reveal-video-wrapper {
        width: 95%;
        margin: 0 auto;
        border-radius: 12px;
        max-width: none;
    }
}

/* ===== BREAKPOINT: 768px (Tablet Portrait) ===== */
@media screen and (min-width: 481px) and (max-width: 768px) {
    :root {
        --spacing-scale: 0.85;
        --font-scale: 0.9;
        --hamburger-top: 30px;
        --hamburger-right: 30px;
        --hamburger-size: 52px;
    }

    .gallery-item {
        width: clamp(160px, 18vw, 220px);
        height: clamp(160px, 18vw, 220px);
    }

    .image-gallery-container {
        justify-content: space-around;
        gap: 1.5rem;
    }

    .nav-container {
        left: 30px;
    }

    /* Persona instruction container */
    .persona-instruct-container {
        top: -7rem;
        font-size: clamp(0.55rem, 1.5vw, 0.7rem);
    }

    /* Showcase item 4 adjustments for tablet */
    .showcase-item[data-showcase="4"] {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .showcase-item[data-showcase="4"] .showcase-phone-left {
        min-height: 500px;
    }

    .showcase-item[data-showcase="4"] .showcase-text-right {
        grid-column: 1;
        margin-right: 0;
        padding: 0 2rem;
    }

    /* Biomarkers video adjustment for tablet */
    .showcase-biosensor-video {
        height: 80%;
        transform: scale(0.8);
    }

    /* Layout adjustments for tablet */
    .header-container {
        top: 45vh;
        width: 90%;
    }

    .future-container h1 {
        font-size: clamp(2.5rem, 7vw, 4rem);
    }

    .nova-overview-container {
        width: 70%;
    }

    .material-container {
        left: 5%;
        width: 85vw;
    }

    .grid-container3 {
        grid-template-columns: 1fr 1fr;
        margin-left: 8%;
        margin-right: 8%;
    }

    .expandable-gallery {
        height: clamp(350px, 45vh, 450px);
        width: 85%;
        margin-left: clamp(3rem, 5vw, 8rem);
    }

    /* Gallery header adjustments for tablet */
    .gallery-header {
        margin-top: clamp(5rem, 7vh, 7rem);
        margin-left: clamp(2rem, 4vw, 5rem);
        width: 85%;
    }

    .gallery-header h1 {
        font-size: clamp(3rem, 7vw, 5rem);
    }

    /* Image grid adjustments for tablet */
    .image-grid-container {
        grid-template-columns: 1fr;
        width: 90%;
        margin-left: 5%;
        padding: 1.5rem;
        gap: 1rem;
    }

    /* Video reveal adjustments for tablet */
    .reveal-video-wrapper {
        width: 90%;
        margin: 0 auto;
        max-width: 900px;
    }
}

/* ===== BREAKPOINT: 1024px (Tablet Landscape / Small Laptop) ===== */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    :root {
        --spacing-scale: 0.9;
        --font-scale: 0.95;
        --hamburger-top: 40px;
        --hamburger-right: 40px;
        --hamburger-size: 54px;
    }

    .gallery-item {
        width: clamp(170px, 15vw, 230px);
        height: clamp(170px, 15vw, 230px);
    }

    .nav-container {
        left: 50px;
    }

    /* Persona instruction container */
    .persona-instruct-container {
        top: -9rem;
        font-size: clamp(0.5rem, 1.2vw, 0.7rem);
    }

    /* Showcase item 4 keeps two-column on small laptop */
    .showcase-item[data-showcase="4"] .showcase-phone-left {
        min-height: 700px;
    }

    .showcase-item[data-showcase="4"] .showcase-biosensor-video2 {
        transform: scale(1.3);
    }

    /* Layout adjustments for small laptop */
    .header-container {
        top: clamp(46vh, 50vh, 52vh);
    }

    .material-container {
        left: 6%;
        width: 70vw;
    }

    .expandable-gallery {
        margin-left: clamp(8rem, 12vw, 12rem);
    }

    /* Gallery header adjustments for small laptop */
    .gallery-header {
        margin-top: clamp(6rem, 8vh, 8rem);
        margin-left: clamp(5rem, 8vw, 10rem);
    }

    .gallery-header h1 {
        font-size: clamp(4rem, 6vw, 6rem);
    }

    /* Image grid adjustments for small laptop */
    .image-grid-container {
        width: 85%;
        margin-left: clamp(8rem, 10vw, 12rem);
        gap: 1.25rem;
    }

    /* Video reveal adjustments for small laptop */
    .reveal-video-wrapper {
        max-width: 950px;
        margin-right: 8%;
    }
}

/* ===== BREAKPOINT: 1440px (Standard Desktop) ===== */
@media screen and (min-width: 1025px) and (max-width: 1440px) {
    :root {
        --spacing-scale: 1;
        --font-scale: 1;
        --hamburger-top: 55px;
        --hamburger-right: 55px;
        --hamburger-size: 56px;
    }

    .gallery-item {
        width: clamp(180px, 15vw, 237px);
        height: clamp(180px, 15vw, 237px);
    }

    .gallery-overlay h2 {
        font-size: clamp(0.75rem, 1.2vw, 1rem);
    }

    .gallery-overlay p {
        font-size: clamp(0.6rem, 0.9vw, 0.8rem);
    }

    /* Persona instruction container */
    .persona-instruct-container {
        top: -11rem;
        font-size: clamp(0.5rem, 1vw, 0.7rem);
    }

    /* Expandable gallery adjustments for 1440px */
    .expandable-gallery {
        height: clamp(450px, 50vh, 550px);
        gap: clamp(0.4rem, 0.6vw, 0.6rem);
    }
}

/* ===== BREAKPOINT: 1920px (Full HD) ===== */
@media screen and (min-width: 1441px) and (max-width: 1920px) {
    :root {
        --spacing-scale: 1.1;
        --font-scale: 1.05;
        --hamburger-top: 60px;
        --hamburger-right: 60px;
        --hamburger-size: 58px;
    }

    .gallery-item {
        width: clamp(200px, 14vw, 260px);
        height: clamp(200px, 14vw, 260px);
    }

    .gallery-overlay h2 {
        font-size: clamp(0.8rem, 1.1vw, 1.1rem);
    }

    .gallery-overlay p {
        font-size: clamp(0.65rem, 0.85vw, 0.85rem);
    }

    /* Persona instruction container */
    .persona-instruct-container {
        top: calc(-12rem + 12rem);
        font-size: clamp(0.55rem, 0.95vw, 0.75rem);
    }

    /* Link video scaling for 1920px */
    .showcase-item[data-showcase="4"] .showcase-biosensor-video2 {
        transform: scale(1.6);
    }

    .showcase-item[data-showcase="4"] .showcase-phone-left {
        min-height: 1000px;
    }

    /* Image grid and video for 1920px */
    .image-grid-container {
        gap: 1.6rem;
        padding: 2.2rem;
    }

    .reveal-video-wrapper {
        max-width: 1050px;
    }

    /* Expandable gallery adjustments for 1920px */
    .expandable-gallery {
        height: clamp(500px, 52vh, 600px);
        gap: clamp(0.45rem, 0.65vw, 0.7rem);
        margin-left: clamp(10rem, 15vw, 20rem);
    }
}

/* ===== BREAKPOINT: 2560px (2K / QHD) ===== */
@media screen and (min-width: 1921px) and (max-width: 2559px) {
    :root {
        --spacing-scale: 1.15;
        --font-scale: 1.15;
        --hamburger-top: 65px;
        --hamburger-right: 65px;
        --hamburger-size: 64px;
    }

    .gallery-item {
        width: clamp(220px, 13vw, 280px);
        height: clamp(220px, 13vw, 280px);
    }

    .gallery-overlay h2 {
        font-size: clamp(0.9rem, 1vw, 1.2rem);
    }

    .gallery-overlay p {
        font-size: clamp(0.7rem, 0.8vw, 0.9rem);
    }

    /* Persona instruction container */
    .persona-instruct-container {
        top: -13rem;
        font-size: clamp(0.6rem, 0.9vw, 0.8rem);
    }

    /* Link video scaling for 2K */
    .showcase-item[data-showcase="4"] .showcase-biosensor-video2 {
        transform: scale(1.7);
    }

    .showcase-item[data-showcase="4"] .showcase-phone-left {
        min-height: 1100px;
    }

    /* Image grid and video for 2K */
    .image-grid-container {
        gap: 1.7rem;
        padding: 2.4rem;
        margin-left: clamp(10rem, 11vw, 16rem);
    }

    .reveal-video-wrapper {
        max-width: 1100px;
        border-width: 4px;
    }

    /* Expandable gallery adjustments for 2K */
    .expandable-gallery {
        height: clamp(550px, 55vh, 650px);
        gap: clamp(0.5rem, 0.7vw, 0.8rem);
        margin-left: clamp(12rem, 16vw, 22rem);
    }
}

/* ===== BREAKPOINT: 3K (2560px - 3840px) ===== */
@media screen and (min-width: 2560px) and (max-width: 3840px) {
    :root {
        --spacing-scale: 1.3;
        --font-scale: 1.2;
        --hamburger-top: 75px;
        --hamburger-right: 75px;
        --hamburger-size: 68px;
    }

    .gallery-item {
        width: clamp(280px, 12vw, 350px);
        height: clamp(280px, 12vw, 350px);
    }

    .gallery-overlay h2 {
        font-size: clamp(1rem, 0.9vw, 1.4rem);
    }

    .gallery-overlay p {
        font-size: clamp(0.8rem, 0.7vw, 1rem);
    }

    .gallery-overlay {
        padding: clamp(1.5rem, 2.5vw, 2.5rem);
    }

    /* Ensure all elements scale proportionally */
    .container {
        max-width: 3200px;
    }

    /* Persona instruction container */
    .persona-instruct-container {
        top: -15rem;
        font-size: clamp(0.7rem, 0.85vw, 0.9rem);
    }

    /* Link video scaling for 4K */
    .showcase-item[data-showcase="4"] .showcase-biosensor-video2 {
        transform: scale(2);
    }

    .showcase-item[data-showcase="4"] .showcase-phone-left {
        min-height: 1300px;
    }

    /* Biomarkers video for 4K */
    .showcase-biosensor-video {
        height: 90%;
        transform: scale(0.9);
    }

    /* Image grid and video for 4K */
    .image-grid-container {
        gap: 2rem;
        padding: 3rem;
        margin-left: clamp(12rem, 12vw, 18rem);
        max-width: 1800px;
    }

    .grid-image-item {
        border-radius: 16px;
        border-width: 3px;
    }

    .reveal-video-wrapper {
        max-width: 1400px;
        border-width: 5px;
        border-radius: 25px;
    }

    /* Expandable gallery adjustments for 4K */
    .expandable-gallery {
        height: clamp(650px, 60vh, 750px);
        gap: clamp(0.6rem, 0.8vw, 1rem);
        margin-left: clamp(15rem, 18vw, 25rem);
    }

    .gallery-wireframe {
        border-radius: 1.5rem;
    }
}

/* ===== BREAKPOINT: 5K and above ===== */
@media screen and (min-width: 3841px) {
    :root {
        --spacing-scale: 2;
        --font-scale: 1.6;
        --hamburger-top: 100px;
        --hamburger-right: 100px;
        --hamburger-size: 80px;
    }

    .gallery-item {
        width: clamp(350px, 11vw, 450px);
        height: clamp(350px, 11vw, 450px);
    }

    .gallery-overlay h2 {
        font-size: clamp(1.2rem, 0.8vw, 1.6rem);
    }

    .gallery-overlay p {
        font-size: clamp(0.9rem, 0.65vw, 1.2rem);
    }

    .gallery-overlay {
        padding: clamp(2rem, 3vw, 3rem);
    }

    .container {
        max-width: 5000px;
    }

    /* Persona instruction container */
    .persona-instruct-container {
        top: -18rem;
        font-size: clamp(0.8rem, 0.8vw, 1rem);
    }

    /* Link video scaling for 5K+ */
    .showcase-item[data-showcase="4"] .showcase-biosensor-video2 {
        transform: scale(2.2);
    }

    .showcase-item[data-showcase="4"] .showcase-phone-left {
        min-height: 1500px;
    }

    /* Biomarkers video for 5K */
    .showcase-biosensor-video {
        height: 95%;
        transform: scale(0.95);
    }

    /* Image grid and video for 5K+ */
    .image-grid-container {
        gap: 2.5rem;
        padding: 4rem;
        margin-left: clamp(15rem, 13vw, 20rem);
        max-width: 2400px;
    }

    .grid-image-item {
        border-radius: 20px;
        border-width: 4px;
    }

    .reveal-video-wrapper {
        max-width: 1800px;
        border-width: 6px;
        border-radius: 30px;
    }

    /* Expandable gallery adjustments for 5K+ */
    .expandable-gallery {
        height: clamp(750px, 65vh, 850px);
        gap: clamp(0.7rem, 0.9vw, 1.2rem);
        margin-left: clamp(18rem, 20vw, 28rem);
    }

    .gallery-wireframe {
        border-radius: 2rem;
        min-width: 120px;
    }
}

/* ===== ULTRA-WIDE DISPLAYS (21:9 and wider) ===== */
@media screen and (min-aspect-ratio: 21/9) {
    .container {
        max-width: 90vw;
    }

    .image-gallery-container {
        max-width: 80vw;
        margin: 0 auto;
    }

    .nav-container {
        left: clamp(50px, 5vw, 100px);
    }
}

/* ===== HIGH DPI DISPLAYS (Retina) ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper text rendering */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Slightly smaller borders look better on high DPI */
    .gallery-item {
        border-radius: clamp(20px, 2vw, 30px);
    }
}

/* ===== LANDSCAPE ORIENTATION (Mobile/Tablet) ===== */
@media screen and (max-width: 1024px) and (orientation: landscape) {
    .nav-container {
        left: 20px;
        transform: translateY(-50%) scale(0.8);
    }

    .hamburger {
        top: 20px;
        right: 20px;
    }

    .image-gallery-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .gallery-item {
        width: clamp(150px, 20vw, 200px);
        height: clamp(150px, 20vw, 200px);
    }
}

/* ===== PRINT OPTIMIZATION ===== */
@media print {
    .hamburger,
    .nav-container,
    .social-icons,
    .scroll-indicator,
    .crt-overlay {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .gallery-overlay {
        position: relative;
        opacity: 1;
        background: white;
        color: black;
    }
}


/* ===============================================
   SHOWREEL SECTION 1 - (VIDEO)
   =============================================== */

.showreel-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: clamp(6rem, 10vh, 8rem) clamp(2rem, 5vw, 6rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;
    top: clamp(-28rem, -30vh, -25rem);
}

.showreel-header {
    text-align: center;
    margin-top: clamp(25rem, 35vh, 35rem);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.showreel-header h2 {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(80px, 7vw, 107px);
    letter-spacing: clamp(3px, 0.3vw, 4.64px);
    line-height: 0.85;
    white-space: nowrap;
    display: inline-block;
    transform: scaleY(1.5);
}

.showreel-header h2::after {
    content: '';
    position: absolute;
    bottom: clamp(0.3rem, 0.5vh, 0.5rem);
    right: clamp(5rem, 7vw, 7rem);
    transform: translateX(-50%);
    width: clamp(60px, 15vw, 100px);
    height: clamp(1.5px, 0.15vw, 2px);
    background: linear-gradient(90deg, transparent, #00ffff, transparent);
}

.showreel-video-embed-wrapper {
    width: clamp(65%, 70%, 75%);
    max-width: clamp(1200px, 90vw, 1400px);
    margin: 0 auto;
}

.showreel-video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: clamp(8px, 1vw, 12px);
    border: clamp(2px, 0.15vw, 3px) solid rgba(0, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 clamp(20px, 3vw, 30px) rgba(0, 255, 255, 0.2);
}

.showreel-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ===============================================
   SHOWREEL RESPONSIVE MEDIA QUERIES
   =============================================== */

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    .showreel-section {
        top: clamp(-32rem, -35vh, -28rem);
        padding: clamp(4rem, 8vh, 6rem) clamp(1rem, 3vw, 2rem);
    }

    .showreel-header {
        margin-top: clamp(20rem, 28vh, 25rem);
    }

    .showreel-header h2 {
        font-size: clamp(50px, 12vw, 70px);
        letter-spacing: clamp(2px, 0.4vw, 3px);
    }

    .showreel-header h2::after {
        right: clamp(2rem, 4vw, 3rem);
        width: clamp(40px, 12vw, 60px);
    }

    .showreel-video-embed-wrapper {
        width: 95%;
    }

    .showreel-video-container {
        border-radius: clamp(6px, 0.8vw, 8px);
        border: clamp(1.5px, 0.12vw, 2px) solid rgba(0, 255, 255, 0.3);
        box-shadow: 0 0 clamp(15px, 2.5vw, 20px) rgba(0, 255, 255, 0.2);
    }
}

/* Tablet (768px) */
@media (max-width: 768px) {
    .showreel-section {
        top: clamp(-30rem, -33vh, -26rem);
        padding: clamp(5rem, 9vh, 7rem) clamp(1.5rem, 4vw, 4rem);
    }

    .showreel-header {
        margin-top: clamp(22rem, 32vh, 28rem);
    }

    .showreel-header h2 {
        font-size: clamp(60px, 10vw, 85px);
        letter-spacing: clamp(2.5px, 0.35vw, 3.5px);
    }

    .showreel-header h2::after {
        right: clamp(3rem, 5vw, 5rem);
        width: clamp(50px, 13vw, 80px);
    }

    .showreel-video-embed-wrapper {
        width: clamp(80%, 85%, 90%);
    }

    .showreel-video-container {
        border-radius: clamp(7px, 0.9vw, 10px);
        border: clamp(1.8px, 0.13vw, 2.5px) solid rgba(0, 255, 255, 0.3);
        box-shadow: 0 0 clamp(18px, 2.8vw, 25px) rgba(0, 255, 255, 0.2);
    }
}

/* Laptop (1024px) */
@media (max-width: 1024px) {
    .showreel-section {
        top: clamp(-27rem, -31vh, -25rem);
    }

    .showreel-header {
        margin-top: clamp(24rem, 33vh, 30rem);
    }

    .showreel-header h2 {
        font-size: clamp(75px, 8vw, 95px);
        letter-spacing: clamp(2.8px, 0.32vw, 4px);
    }

    .showreel-header h2::after {
        right: clamp(4rem, 6vw, 6rem);
        width: clamp(55px, 14vw, 90px);
    }

    .showreel-video-embed-wrapper {
        width: clamp(70%, 75%, 80%);
        max-width: clamp(1000px, 85vw, 1200px);
    }
}

/* ===============================================
   SHOWREEL LARGE BREAKPOINT MEDIA QUERIES
   =============================================== */

/* 1440px Breakpoint */
@media screen and (min-width: 1025px) and (max-width: 1440px) {
    .showreel-section {
        top: clamp(-26rem, -29vh, -24rem);
    }

    .showreel-header {
        margin-top: clamp(26rem, 34vh, 32rem);
    }

    .showreel-header h2 {
        font-size: clamp(95px, 6.8vw, 107px);
        letter-spacing: clamp(3.5px, 0.28vw, 4.64px);
    }

    .showreel-header h2::after {
        right: clamp(5.5rem, 6.8vw, 6.5rem);
        width: clamp(65px, 14.5vw, 95px);
    }

    .showreel-video-embed-wrapper {
        width: clamp(68%, 70%, 72%);
        max-width: clamp(1250px, 88vw, 1350px);
    }

    .showreel-video-container {
        border-radius: clamp(9px, 1.05vw, 12px);
        border: clamp(2.2px, 0.16vw, 2.8px) solid rgba(0, 255, 255, 0.3);
        box-shadow: 0 0 clamp(22px, 3.2vw, 28px) rgba(0, 255, 255, 0.2);
    }
}

/* 1920px (1080p) Breakpoint */
@media screen and (min-width: 1441px) and (max-width: 1920px) {
    .showreel-section {
        top: clamp(-25rem, -28vh, -23rem);
    }

    .showreel-header {
        margin-top: clamp(28rem, 35vh, 34rem);
    }

    .showreel-header h2 {
        font-size: clamp(100px, 6.5vw, 120px);
        letter-spacing: clamp(4px, 0.25vw, 5px);
    }

    .showreel-header h2::after {
        right: clamp(6rem, 7.2vw, 7rem);
        width: clamp(70px, 14.8vw, 100px);
        height: clamp(1.8px, 0.16vw, 2.2px);
    }

    .showreel-video-embed-wrapper {
        width: clamp(67%, 70%, 73%);
        max-width: clamp(1350px, 85vw, 1500px);
    }

    .showreel-video-container {
        border-radius: clamp(10px, 1.1vw, 13px);
        border: clamp(2.3px, 0.17vw, 3px) solid rgba(0, 255, 255, 0.3);
        box-shadow: 0 0 clamp(24px, 3.3vw, 32px) rgba(0, 255, 255, 0.2);
    }
}

/* 2560px (2K) Breakpoint */
@media screen and (min-width: 1921px) and (max-width: 2560px) {
    .showreel-section {
        top: clamp(-24rem, -27vh, -22rem);
        padding: clamp(7rem, 11vh, 9rem) clamp(3rem, 5.5vw, 7rem);
    }

    .showreel-header {
        margin-top: clamp(30rem, 36vh, 36rem);
    }

    .showreel-header h2 {
        font-size: clamp(110px, 6vw, 140px);
        letter-spacing: clamp(4.5px, 0.22vw, 6px);
    }

    .showreel-header h2::after {
        right: clamp(6.5rem, 7.5vw, 7.5rem);
        width: clamp(80px, 15vw, 110px);
        height: clamp(2px, 0.17vw, 2.5px);
    }

    .showreel-video-embed-wrapper {
        width: clamp(66%, 70%, 74%);
        max-width: clamp(1500px, 82vw, 1700px);
    }

    .showreel-video-container {
        border-radius: clamp(11px, 1.2vw, 15px);
        border: clamp(2.5px, 0.18vw, 3.2px) solid rgba(0, 255, 255, 0.3);
        box-shadow: 0 0 clamp(28px, 3.5vw, 38px) rgba(0, 255, 255, 0.2);
    }
}

/* 3840px (4K) Breakpoint */
@media screen and (min-width: 2561px) and (max-width: 3840px) {
    .showreel-section {
        top: clamp(-23rem, -26vh, -21rem);
        padding: clamp(8rem, 12vh, 10rem) clamp(4rem, 6vw, 8rem);
    }

    .showreel-header {
        margin-top: clamp(32rem, 37vh, 38rem);
    }

    .showreel-header h2 {
        font-size: clamp(130px, 5.5vw, 170px);
        letter-spacing: clamp(5px, 0.2vw, 7px);
    }

    .showreel-header h2::after {
        right: clamp(7rem, 7.8vw, 8rem);
        width: clamp(90px, 15.5vw, 120px);
        height: clamp(2.2px, 0.18vw, 2.8px);
    }

    .showreel-video-embed-wrapper {
        width: clamp(65%, 70%, 75%);
        max-width: clamp(1700px, 78vw, 2000px);
    }

    .showreel-video-container {
        border-radius: clamp(12px, 1.3vw, 18px);
        border: clamp(2.8px, 0.19vw, 3.5px) solid rgba(0, 255, 255, 0.3);
        box-shadow: 0 0 clamp(32px, 3.8vw, 45px) rgba(0, 255, 255, 0.2);
    }
}

/* 3841px+ (Beyond 4K) Breakpoint */
@media screen and (min-width: 3841px) {
    .showreel-section {
        top: clamp(-22rem, -25vh, -20rem);
        padding: clamp(9rem, 13vh, 12rem) clamp(5rem, 6.5vw, 10rem);
    }

    .showreel-header {
        margin-top: clamp(35rem, 38vh, 42rem);
    }

    .showreel-header h2 {
        font-size: clamp(145px, 5vw, 200px);
        letter-spacing: clamp(6px, 0.18vw, 8px);
    }

    .showreel-header h2::after {
        right: clamp(7.5rem, 8vw, 9rem);
        width: clamp(100px, 16vw, 140px);
        height: clamp(2.5px, 0.19vw, 3.2px);
    }

    .showreel-video-embed-wrapper {
        width: clamp(64%, 70%, 76%);
        max-width: clamp(2000px, 75vw, 2400px);
    }

    .showreel-video-container {
        border-radius: clamp(14px, 1.4vw, 20px);
        border: clamp(3px, 0.2vw, 4px) solid rgba(0, 255, 255, 0.3);
        box-shadow: 0 0 clamp(38px, 4vw, 55px) rgba(0, 255, 255, 0.2);
    }
}