/* Updated: v2 - 2K Alignment FIX (Dark Wrapper Override Corrected) */
/* --- FONTS --- */
@font-face {
    font-family: 'Crit';
    src: url('/fonts/Crit-Regular.woff2') format('woff2'),
        url( '/fonts/Crit-Regular.woff') format('woff'),
        url( '/fonts/Crit-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Crit';
    src: url('/fonts/Crit-Italic.woff2') format('woff2'),
        url( '/fonts/Crit-Italic.woff') format('woff'),
        url( '/fonts/Crit-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

/* --- GLOBAL RESETS --- */
:root {
    --entry-anim-timing: cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* --- ENTRY ANIMATIONS --- */
@keyframes smartEntry {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes heroEntry {
    0% {
        opacity: 0;
        transform: scale(1.1) translateY(20px);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: scale(1.0) translateY(0);
        filter: blur(0);
    }
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Crit', sans-serif;
    background-color: #ffffff;
    color: #000000;
    overflow-x: hidden;
    cursor: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.5s ease, color 0.5s ease;
}


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

/* --- HEADER --- */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    /* Uniform 20px left/right padding */
    z-index: 1100;
    /* Ensure it stays above everything */
    mix-blend-mode: difference;
    color: #fff;
    transition: transform 0.5s ease;
    pointer-events: auto;
}

header.header-hidden nav {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all 0.5s ease;
}

.logo-container {
    width: 45px;
    /* Increased 50% from 30px */
    height: 45px;
    position: relative;
    z-index: 902;
    cursor: pointer;
    /* ENTRY ANIMATION: 0.5s Delay */
    animation: smartEntry 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.5s backwards !important;
}



/* Removed .logo-static (Lottie-only mode) */

/* .logo-anim is the Lottie Container - Hidden by default */
.logo-anim {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
    opacity: 0;
    /* Hidden by default */
    transition: opacity 0.3s ease;
}

/* .logo-anim--visible: Lottie-only mode — always shown, no hover opacity toggle */
.logo-anim--visible {
    opacity: 1 !important;
}

/* Header: Lottie SVG paths color management via filter to preserve geometry */
header .logo-anim {
    filter: brightness(0) invert(1);
}


/* Footer logo: Lottie-only, dark background handled via mix-blend-mode below */

.nav-wrapper {
    display: flex;
    align-items: center;
    gap: 40px;
}

/* Header Links Entry Animation */
@keyframes linkEntry {
    0% {
        opacity: 0;
        transform: translateY(-10px);
        /* Very short distance */
        filter: blur(2px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Apply Entry Animation to the List Item (Parent) */
nav ul li {
    opacity: 0;
    /* Animation creates the entry */
    animation: linkEntry 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Stagger Delays on LI */
nav ul li:nth-child(1) {
    animation-delay: 0.2s;
}

nav ul li:nth-child(2) {
    animation-delay: 0.3s;
}

nav ul li:nth-child(3) {
    animation-delay: 0.4s;
}

nav ul li:nth-child(4) {
    animation-delay: 0.5s;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

nav a {
    font-size: clamp(14px, 1.5vw, 16px);
    /* Fluid: 14px (mobile) → 16px (desktop) */
    letter-spacing: 0.5px;
    color: #fff;
    display: inline-block;
    padding: 0 10px;
    /* Only horizontal padding — vertical padding moved to li for clipping */
    font-weight: 600;
    /* Semi-bold */
    font-family: 'Crit', sans-serif;
}

/* Vertical click area via li padding instead of a padding */
header nav ul li {
    padding: 10px 0;
}

/* === ROLLING TEXT HOVER EFFECT (Header Only) === */
header nav a {
    position: relative;
    overflow: hidden;
    line-height: 1.2;
    padding-top: 0;
    padding-bottom: 0;
}

/* The visible text wrapper */
header nav a span {
    display: block;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Clone text sitting below, hidden by overflow:hidden on the <a> */
header nav a span::after {
    content: attr(data-text);
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
}

/* On hover: slide the span (and its ::after child) upward by one line */
header nav a:hover span {
    transform: translateY(-100%);
}

/* --- BURGER MENU (Standard V2.1) --- */
.menu-icon {
    background: transparent;
    border: none;
    padding: 0;
    width: 60px;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    /* Flush Right to perfectly match visual padding bounds */
    gap: 12px;
    /* Close gap logic: was 4px. User wants 'closer' but lines are now 1px. 
                  Let's see. 60px height. 
                  If gap is large, they are far apart. 
    /* Close gap logic: was 4px. User wants 'closer' but lines are now 1px.
                  Let's see. 60px height.
                  If gap is large, they are far apart.
                  User said "2 lines birbirine yaklaşacak" (get closer).
                  Originally 4px. Maybe 8px?
                  Wait, standard burger is usually ~6-8px gap.
                  Let's try gap: 6px.
                  */
    gap: 2px;
    /* Reduced to 2px per user request (ultra close) */
    cursor: pointer;
    z-index: 901;
    mix-blend-mode: difference;
    color: #fff;
    /* ENTRY ANIMATION: 0.7s Delay */
    animation: smartEntry 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.7s backwards !important;
}

.menu-bar {
    width: 24px;
    height: 1.5px;
    /* 1.5px thickness */
    background-color: #fff;
    /* White for difference mode */
    transition: all 0.2s ease-out;
    transform-origin: center center;
    /* Enforce static rotation origin */
}

/* Hover Effect: Lines expand up/down */
.menu-icon:hover .menu-bar:nth-child(1) {
    transform: translateY(-4px);
    /* Move UP */
}

.menu-icon:hover .menu-bar:nth-child(3) {
    transform: translateY(4px);
    /* Move DOWN */
}

.menu-icon:hover .menu-bar:nth-child(2) {
    opacity: 1;
    /* Middle stays in center */
}

/* Middle Bar Logic: Hidden by default (2 lines total), visible on hover (3 lines) */
.menu-bar:nth-child(2) {
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    /* Soft ease out */
}


/* Active State: Perfect X */
/* 
   Gap is 2px. Height is 1.5px.
   Distance = gap + height = 3.5px.
*/
.menu-icon.active .menu-bar:nth-child(1) {
    transform: translateY(3.5px) rotate(45deg);
}

.menu-icon.active .menu-bar:nth-child(2) {
    opacity: 0;
}

.menu-icon.active .menu-bar:nth-child(3) {
    transform: translateY(-3.5px) rotate(-45deg);
}


/* --- HERO SECTION --- */
.hero {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-visual {
    position: relative;
    width: 400px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* ENTRY ANIMATION: 0.0s Delay (First) */
    animation: heroEntry 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.0s backwards !important;
}

.hero-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 100;
}

/* HTML Media Wrapper (Iframes/Vimeo) */
.html-media-wrapper-hero,
.vimeo-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    z-index: 100;
}

.html-media-wrapper-hero iframe,
.vimeo-wrapper iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    /* 16:9 Aspect Ratio */
    min-height: 100vh;
    min-width: 177.77vh;
    /* 16:9 Aspect Ratio */
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Generic HTML Content Wrapper (Hover videos etc) */
.html-media-wrapper {
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0;
    margin: 0;
}

.html-media-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.hero-ring {
    position: absolute;
    width: 400px;
    height: 400px;
    /* animation: rotateText 20s linear infinite; REMOVED for v2.3 (Ellipse) */
    z-index: 101;
    /* Above bg */
}

@keyframes rotateText {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.ring-text {
    font-size: clamp(14px, 2.5vw, 18px);
    /* Fluid: 14px (mobile) → 18px (desktop) */
    letter-spacing: 0px;
    fill: #000;
    /* text-transform: uppercase; REMOVED per user request (Only 'A' capital) */
}

/* --- WORKS TITLE AREA --- */
.works-title-area {
    text-align: center;
    padding: 100px 0 60px;
    /* Hero'ya yakınlık 250px olarak ayarlandı (Toplam uzaklığı 250px olması için padding 100px'e çekildi çünkü Hero section 100vh) */

    /* Simple Entry Animation Initial State */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.0s ease, transform 1.0s ease;
    /* Sade ve yumuşak */
}

/* Base padding makes it 300px on all pages */

.works-title-area.visible {
    opacity: 1;
    transform: translateY(0);
}

.works-title-area h2 {
    margin: 0 0 10px 0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: clamp(20px, 4vw, 28px);
    /* Fluid: 20px (mobile) → 28px (desktop) */
}

.works-title-area p {
    font-size: clamp(13px, 2vw, 15px);
    /* Fluid: 13px (mobile) → 15px (desktop) */
    color: #999;
    margin: 0;
}

/* --- WORKS GRID --- */
.scroll-anim-item {
    transform: translateY(60px);
    /* Come from bottom */
    transition: transform 1.0s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: auto;
    /* Ensure clickability */
}

.scroll-anim-item.visible {
    transform: translateY(0);
}

/* Works Grid: Column-based delays (2 columns) */
.works-grid .scroll-anim-item:nth-child(even) {
    transition-delay: 0.15s;
    /* Right column - reduced for smoother flow */
}

/* Lab Grid: Column-based delays (3 columns) */
.lab-grid .scroll-anim-item:nth-child(3n+1) {
    transition-delay: 0s;
    /* First column */
}

.lab-grid .scroll-anim-item:nth-child(3n+2) {
    transition-delay: 0.1s;
    /* Second column - reduced */
}

.lab-grid .scroll-anim-item:nth-child(3n) {
    transition-delay: 0.2s;
    /* Third column - reduced */
}

.works-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 2 Columns */
    column-gap: 25px;
    /* Column gap 25px */
    row-gap: 50px;
    /* Vertical gap doubled/increased */
    padding: 0 25px 140px 25px;
    /* Increased to 25px L/R */
    max-width: 100%;
    /* Edge to edge */
    margin: 0;
}

.project-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    /* v5: 3D Transform Support for GSAP Tilt */
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
}

.thumb-wrapper {
    width: 100%;
    overflow: hidden;
    /* Critical for internal zoom */
    margin-bottom: 20px;
    border-radius: 0;
    /* Optional: define if needed, but 0 is default */
    transform: translateZ(0);
    /* Fix for Safari filtering issues during scale */
    aspect-ratio: 697 / 390;
    /* Works Tip 1 Default */
    /* Moved here for parallax */
    position: relative;
    background-color: #EFEFEF;
    /* Placeholder color before image loads */
}

/* --- WORKS EDITORIAL MODIFIERS --- */
.grid-span-2 {
    grid-column: span 2;
}

.grid-span-2 .thumb-wrapper {
    aspect-ratio: 1419 / 390;
    /* Works Tip 2 Wide */
}

.parallax-inner {
    width: 100%;
    height: 115%;
    /* Extra height for parallax movement */
    position: absolute;
    top: -7.5%;
    /* Center the overflow */
    left: 0;
    will-change: transform;
    /* Optimized for animation */
}

.thumb-wrapper img.base-thumb {
    width: 100%;
    height: 100%;
    /* Fill the parallax wrapper */
    object-fit: cover;
    /* Crop oversized images to fit */
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
    /* Restored slower 1.2s ease + added opacity for lazy load */
    display: block;
    /* Removes potential whitespace */
    opacity: 0;
    /* Hidden initially for lazy load */
}

.thumb-wrapper img.base-thumb.img-loaded {
    opacity: 1;
    /* Fade in when loaded */
}

.project-card:hover .thumb-wrapper img.base-thumb {
    transform: scale(1.1);
    /* Restore scale 1.1 */
    /* Only scale changes, transition flows from base */
}

/* Ensure no transform on the card itself */
.project-card:hover {
    transform: none;
}




.project-meta {
    display: flex;
    justify-content: space-between;
    font-size: 19px;
    font-weight: 600;
    /* Semibold */
    margin-top: -5px;
    color: #000;
    overflow: hidden;
    /* For rolling text clip */
}

.project-meta span {
    display: block;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    line-height: 1.2;
}

.project-meta span::after {
    content: attr(data-text);
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    white-space: nowrap;
}

.project-card:hover .project-meta span {
    transform: translateY(-100%);
}

/* --- LAB GRID --- */
.lab-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* 3 Columns for Lab */
    column-gap: 25px;
    row-gap: 50px;
    padding: 0 25px 140px 25px;
    max-width: 100%;
    margin: 0;
}

.lab-card {
    display: flex;
    flex-direction: column;
    cursor: none;
    /* Fix: Force custom cursor here explicitly */
    /* v5: 3D Transform Support for GSAP Tilt */
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
}

.lab-thumb-wrapper {
    width: 100%;
    /* Ensure fluid child width within the strict grid fraction */
    aspect-ratio: 460 / 255;
    /* Lab Tip 1 Default */
    /* Aspect ratio holds the height automatically based on available 1fr width */
    background-color: #EFEFEF;
    /* Placeholder color */
    overflow: hidden;
    margin-bottom: 20px;
    transform: translateZ(0);
    position: relative;
}

/* --- LAB EDITORIAL MODIFIERS --- */
.grid-span-2 .lab-thumb-wrapper {
    aspect-ratio: 945 / 255;
    /* Lab Tip 2 Wide */
}

.grid-span-3 {
    grid-column: span 3;
}

.grid-span-3 .lab-thumb-wrapper {
    aspect-ratio: 1430 / 255;
    /* Lab Tip 3 Ultra-Wide */
}

.lab-meta {
    display: flex;
    justify-content: space-between;
    font-size: 19px;
    font-weight: 600;
    /* Semibold */
    margin-top: -5px;
    color: #000;
    overflow: hidden;
    /* For rolling text clip */
}

.lab-meta span {
    display: block;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    line-height: 1.2;
}

.lab-meta span::after {
    content: attr(data-text);
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    white-space: nowrap;
}

.lab-card:hover .lab-meta span {
    transform: translateY(-100%);
}

/* Hover move: Scale with ease-in-out sine. */



.lab-thumb-wrapper img.base-thumb {
    /* ... existing props ... */
    width: 100%;
    height: 100%;
    /* Fill parallax inner */
    object-fit: cover;
    display: block;
    /* Restore slower 1.2s ease */
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
    opacity: 0;
    /* Hidden initially */
}

.lab-thumb-wrapper img.base-thumb.img-loaded {
    opacity: 1;
}

/* Lab card hover: Scale image same as Works cards */
.lab-card:hover .lab-thumb-wrapper img.base-thumb {
    transform: scale(1.1);
}


/* --- FOOTER --- */
footer {
    display: flex;
    flex-direction: column;
    padding: 100px 40px 40px;
    /* More top padding per ref */
    background-color: #fff;
    /* Footer white background */
    color: #000;
    margin-top: 0;
    border-top: none !important;
    border: none !important;
}

/* Footer Logo Specifics */
.footer-logo-container {
    width: 50px;
    height: 50px;
    display: block;
    position: relative;
    mix-blend-mode: difference;
}

/* Footer logo: Lottie color management via filter to preserve internal masking */
.footer-logo-anim {
    filter: brightness(0) invert(1);
}

/* Ensure Lottie SVG fills the container */
.logo-anim svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.footer-logo-area {
    margin-bottom: 80px;
    /* Increased spacing */
    display: flex;
    justify-content: center;
    /* Center logo */
    width: 100%;
}


.footer-content {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    /* Left, Center (Auto), Right */
    align-items: end;
    /* Align to the BOTTOM of the container (Copyright line) */
    /* Align baselines or flex-end equivalents */
    width: 100%;
    font-size: 12px;
    /* Removed text-transform: uppercase; to allow mixed case */
    letter-spacing: 0.5px;
}

.footer-col-left {
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* Tighten Get in touch & Email */
}

.footer-col-left h3 {
    font-size: 14px;
    /* Slightly larger title */
    font-weight: 700;
    /* Bold */
    color: #000;
    margin: 0;
}

.footer-col-left a {
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    text-transform: lowercase;
    /* Force lowercase for email */
}

.copyright {
    color: #999;
    line-height: 1.4;
    font-size: 9px;
    margin-top: 15px;
    white-space: nowrap;
    text-transform: none;
    /* Reset transform */
}

/* Force "Emirhan Akyüz" to Title Case if it was uppercase elsewhere, mostly standard text now */

.footer-col-center {
    display: flex;
    gap: 40px;
    justify-self: center;
    /* Grid centering */
    /* Wider gap */
}

.footer-col-center a {
    font-weight: 400;
    /* Regular weight */
    font-size: 11px;
    /* Smaller menu links */
    display: inline-block;
    position: relative;
    overflow: hidden;
    line-height: 1.2;
    padding: 0;
}

/* Footer Link Visible Span */
.footer-col-center a span {
    display: block;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Footer Link Pseudo-Clone */
.footer-col-center a span::after {
    content: attr(data-text);
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
}

/* On hover: slide the footer span upward */
.footer-col-center a:hover span {
    transform: translateY(-100%);
}

.footer-col-right {
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: end;
    transition: opacity 0.3s ease;
}

.footer-col-right:hover {
    opacity: 0.7;
}

.footer-col-right:hover .arrow-up-icon {
    transform: translateY(-5px);
}

.arrow-up-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.arrow-up-icon svg {
    display: block;
}


/* --- RESPONSIVE --- */
@media (max-width: 768px) {

    /* === GRID: Force 1 column stacked layout === */
    .works-grid {
        grid-template-columns: 1fr;
        padding: 0 16px 60px 16px;
        row-gap: 35px;
    }

    .lab-grid {
        grid-template-columns: 1fr;
        padding: 0 16px 60px 16px;
        row-gap: 35px;
    }

    /* Reset all editorial spans to single column */
    .grid-span-2,
    .grid-span-3 {
        grid-column: span 1;
    }

    /* === IMAGES: Full visible, no crop === */
    .thumb-wrapper,
    .lab-thumb-wrapper,
    .grid-span-2 .thumb-wrapper,
    .grid-span-2 .lab-thumb-wrapper,
    .grid-span-3 .lab-thumb-wrapper {
        aspect-ratio: auto;
        width: 100%;
        height: auto;
        overflow: visible;
    }

    .thumb-wrapper img.base-thumb,
    .lab-thumb-wrapper img.base-thumb,
    .base-thumb {
        width: 100%;
        height: auto;
        object-fit: contain;
        position: relative;
    }

    /* Parallax inner: disable overflow stretch on mobile */
    .parallax-inner {
        height: 100%;
        top: 0;
        position: relative;
    }

    /* === HERO === */
    .hero {
        padding: 0 16px;
        height: 60vh;
        min-height: 350px;
    }

    .hero-bg {
        object-fit: contain;
        width: 90%;
        height: 90%;
    }

    .hero-ring {
        width: 240px;
        height: 240px;
    }

    .ring-text {
        font-size: 11px;
    }

    /* === HEADER === */
    header {
        padding: 16px;
    }

    nav {
        display: none;
    }

    .logo-container {
        width: 36px;
        height: 36px;
    }

    .menu-icon {
        width: 48px;
        height: 48px;
    }

    /* === WORKS / LAB TITLE === */
    .works-title-area {
        padding: 60px 16px 40px;
    }

    .works-title-area h2 {
        font-size: 20px;
    }

    .works-title-area p {
        font-size: 12px;
    }

    /* === PROJECT / LAB META TEXT === */
    .project-meta,
    .lab-meta {
        font-size: 14px;
        flex-direction: column;
        gap: 4px;
    }

    /* === MENU OVERLAY (Burger) === */
    .menu-overlay nav a {
        font-size: 48px;
        line-height: 1.2;
    }

    .menu-overlay nav {
        padding-bottom: 100px;
    }

    /* === FOOTER: Stack vertically === */
    footer {
        padding: 50px 16px 24px;
    }

    .footer-logo-area {
        margin-bottom: 40px;
    }

    .footer-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
    }

    .footer-col-center {
        gap: 20px;
        flex-wrap: wrap;
    }

    .footer-col-right {
        justify-self: flex-start;
    }

    .copyright {
        white-space: normal;
        font-size: 8px;
    }


    /* === DARK WRAPPER: Match mobile padding === */
    .lab-module-dark-wrapper {
        margin-top: 30px;
    }

    .lab-module-dark-wrapper .lab-grid,
    .lab-module-dark-wrapper .works-title-area {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* === HOVER VIDEO: Hide on mobile (no hover on touch) === */
    .hover-video {
        display: none;
    }
}

/* --- TABLET BREAKPOINT --- */
@media (min-width: 769px) and (max-width: 1024px) {

    /* Works Grid: 2 columns on tablet */
    .works-grid {
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        row-gap: 40px;
        padding: 0 20px 100px 20px;
    }

    /* Lab Grid: 2 columns on tablet (down from 3) */
    .lab-grid {
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        row-gap: 40px;
        padding: 0 20px 100px 20px;
    }

    /* Hero Ring: Medium size */
    .hero-ring {
        width: 320px;
        height: 320px;
    }

    /* Hide desktop nav, show hamburger */
    nav ul {
        display: none;
    }

    .menu-icon {
        display: flex;
        /* Ensure hamburger visible */
    }

    /* Footer: Adjust spacing */
    footer {
        padding: 80px 30px 30px;
    }

    .footer-col-center {
        gap: 30px;
        /* Reduce from 40px */
    }
}

/* --- LARGE DESKTOP OPTIMIZATION (2K and Ultra-wide) --- */
@media (min-width: 1441px) {

    /* Unified Max-Width: Prevent misalignment between sections */
    .works-grid,
    .lab-grid,
    .footer-content {
        max-width: 100%;
        /* Unified: All sections fluid */
        margin: 0;
    }

    /* Enhanced Typography for 2K Displays */
    .works-title-area h2 {
        font-size: 36px;
        /* 28px → 36px (better readability on large screens) */
    }

    .ring-text {
        font-size: 22px;
        /* 18px → 22px (proportional increase) */
    }

    /* Larger Hero Ring */
    .hero-ring {
        width: 500px;
        /* 450px → 500px (more impactful on 2K) */
        height: 500px;
    }
}

/* --- ULTRA-WIDE / 2K MONITOR SUPPORT (2560px+) --- */
@media (min-width: 1921px) {

    .works-grid,
    .lab-grid,
    .footer-content,
    .lab-module-dark-wrapper .lab-grid,
    .lab-module-dark-wrapper .works-title-area {
        max-width: 100% !important;
        /* Force fluid width on 2K */
    }

    /* Ensure footer aligns with wider grid */
    footer {
        padding-left: 0;
        padding-right: 0;
    }

    .footer-content {
        padding: 0 25px;
        /* Match grid padding */
    }
}


/* --- LAB MODULE DARK THEME --- */
.lab-module-dark-wrapper {
    background-color: #0c0c0c;
    color: #fff;
    /* Full-bleed naturally: body has no padding so 100% width covers viewport.
       No vw hack needed — avoids scrollbar-width mismatches with Works grid. */
    width: 100%;
    overflow: hidden;
    padding-bottom: 0;
    margin-top: 50px;
    box-sizing: border-box;
}

/* Adjust Title Colors inside Dark Module */
.lab-module-dark-wrapper .works-title-area h2 {
    color: #fff;
}

.lab-module-dark-wrapper .works-title-area p {
    color: #999;
    /* Maintain grey for subtitle */
}

/* Adjust Grid Meta Colors */
.lab-module-dark-wrapper .lab-meta {
    color: #fff;
}

/* Ensure padding matches main grid */
.lab-module-dark-wrapper .lab-grid,
.lab-module-dark-wrapper .works-title-area {
    max-width: 100%;
    margin: 0;
    /* Add explicit padding to ensure it matches works-grid exactly, since 100vw wrapper resets viewport logic */
    padding-left: 25px;
    padding-right: 25px;
}

/* --- FULL PAGE DARK THEME (for lab.html) --- */
body.dark-page {
    background-color: #0c0c0c;
    color: #fff;
}

body.dark-page footer {
    background-color: #0c0c0c;
    color: #fff;
}

/* Invert Logo for Dark Page (Static SVG needs to be White) */
body.dark-page .logo-static path {
    fill: #fff;
}

body.dark-page .footer-col-left h3,
body.dark-page .footer-col-center a,
body.dark-page .footer-col-left a,
body.dark-page .project-meta,
body.dark-page .lab-meta {
    color: #fff !important;
}

body.dark-page .copyright {
    color: #666;
}

/* Header Handling on Dark Page */
/* Header uses mix-blend-mode: difference. On a black background, it will simply invert the white content to... black? 
   Wait. Difference of White (Header) on Black (BG) = White.
   Difference of White (Header) on White (BG) = Black.
   
   So on a Black background page, the header will appear WHITE. This is correct.
   No extra CSS needed for header unless we want to force something else.
*/
/* --- DARK FOOTER (When Lab is present) --- */
footer.dark-footer {
    background-color: #0c0c0c !important;
    color: #fff !important;
    border-top: none !important;
    margin-top: 0 !important;
}

footer.dark-footer .footer-col-left h3,
footer.dark-footer .footer-col-left a,
footer.dark-footer .footer-col-center a,
footer.dark-footer .arrow-up {
    color: #fff !important;
}





footer.dark-footer .copyright {
    color: #666;
    /* Keep subtle grey */
}

/* Hover Video Styles */
.hover-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
    pointer-events: none;
}

.project-card:hover .hover-video,
.lab-card:hover .hover-video {
    opacity: 1;
}

.base-thumb {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fix burger visibility issues if any overlay conflict */
.menu-overlay nav a span {
    display: block;
    color: #fff;
}