:root {
    --bg: #000000;
    --fg: #ffffff;
    --grey: #1a1a1a;
    --transition: cubic-bezier(0.76, 0, 0.24, 1);
}

/* 1. CORE & RESET */
* { cursor: none !important; margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body { 
    background-color: var(--bg); color: var(--fg); 
    font-family: 'Inter', sans-serif; overflow-x: hidden; 
    line-height: 1.5; -webkit-font-smoothing: antialiased;
}

/* Noise & Cursor */
.noise {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: url('https://grainy-gradients.vercel.app/noise.svg');
    opacity: 0.05; pointer-events: none; z-index: 999;
}
.custom-cursor {
    width: 14px; height: 14px; background: #fff; border-radius: 50%;
    position: fixed; pointer-events: none; z-index: 9999;
    mix-blend-mode: difference; transition: transform 0.15s ease-out;
}

/* 2. NAVIGATION */
.navbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 40px 5vw; position: fixed; width: 100%; z-index: 100;
}
.logo { font-weight: 900; letter-spacing: -1px; font-size: 1.6rem; mix-blend-mode: difference; text-transform: uppercase; }
.contact-btn {
    text-decoration: none; color: var(--fg); font-size: 0.65rem; font-weight: 600;
    letter-spacing: 1px; padding: 12px 24px; border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50px; transition: all 0.4s var(--transition); backdrop-filter: blur(10px);
}
.contact-btn:hover { background: #fff; color: #000; }

/* In-Content Buttons */
.content-btn {
    display: inline-block; margin-top: 30px;
    text-decoration: none; color: var(--fg); font-size: 0.7rem; font-weight: 600;
    letter-spacing: 1px; padding: 14px 30px; border: 1px solid rgba(255,255,255,0.5);
    border-radius: 2px; transition: all 0.4s var(--transition);
}
.content-btn:hover { background: #fff; color: #000; border-color: #fff; }

/* 3. HERO SECTION */
.hero { height: 100vh; width: 100vw; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-image-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.hero img { 
    width: 100%; height: 100%; object-fit: cover; filter: brightness(0.4); 
    transform: scale(1.1); transition: transform 0.2s ease-out; 
}
.hero-content { position: relative; z-index: 2; text-align: center; }
.hero-content h1 { 
    font-size: clamp(3rem, 8vw, 6rem); font-weight: 900; text-transform: uppercase; 
    letter-spacing: -0.04em; line-height: 0.9; 
}
.scroll-indicator { position: absolute; bottom: 40px; font-size: 0.6rem; letter-spacing: 4px; opacity: 0.5; }

/* 4. LAYOUTS & GRIDS */
.container { padding: 0 5vw; width: 100%; margin: 0 auto; }
.m-top { margin-top: 3vh; }
.grid-gap { margin-top: 2vw; } /* Tight spacing */

.intro-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10vw; padding: 25vh 0; align-items: center; }
.split-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10vw; padding: 10vh 0; align-items: center; }

.intro-text h2, .split-text h2 { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 400; line-height: 1.2; margin-bottom: 30px; }
.label { font-size: 0.7rem; text-transform: uppercase; color: #666; letter-spacing: 2px; display: block; margin-bottom: 15px; font-weight: 600;}

.project-info { padding: 10vh 0; border-top: 1px solid #1a1a1a; background-color: var(--bg); }
.project-info h3 { font-size: clamp(2rem, 5vw, 4rem); font-weight: 900; margin-bottom: 30px; text-transform: uppercase; letter-spacing: -0.02em; }
.project-desc { max-width: 600px; color: #999; font-size: 1.1rem; line-height: 1.6; }

/* 5. MEDIA & REVEAL ANIMATIONS */
.reveal { 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
    height: auto; 
}

.reveal img, .reveal video { 
    width: 100%; 
    height: auto; 
    object-fit: contain; 
    display: block;
    transform: translateY(100%) scale(1.1); 
    transition: transform 1.2s var(--transition); 
}

.reveal.active img, .reveal.active video { transform: translateY(0) scale(1); }

/* Flexible Aspects (No Cropping) */
.aspect-wide, .aspect-portrait, .aspect-square, .aspect-mobile { 
    width: 100%; aspect-ratio: auto; height: auto;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2vw; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; align-items: start; }

.video-container { position: relative; background: #000; }
.volume-btn {
    position: absolute; bottom: 20px; right: 20px;
    background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.2);
    color: white; padding: 8px 16px; font-size: 0.6rem; border-radius: 50px;
    z-index: 5; transition: 0.3s ease; backdrop-filter: blur(5px); letter-spacing: 1px;
}
.volume-btn:hover { background: #fff; color: #000; }
.volume-btn.small-btn { padding: 5px 10px; bottom: 10px; right: 10px; font-size: 0.5rem; }

/* 6. INSTAGRAM TICKER */
.ticker-section {
    width: 100vw; overflow: hidden; position: relative; padding: 0;
    border-top: 0px solid #1a1a1a; border-bottom: 0px solid #1a1a1a;
}
.ticker-wrapper { display: flex; width: 100%; }
.ticker-track {
    display: flex; gap: 20px; width: max-content; 
    animation: scrollTicker 40s linear infinite; padding-left: 20px;
}
.ticker-item {
    width: 300px; height: auto; flex-shrink: 0; position: relative; overflow: hidden;
}
.ticker-item:hover { opacity: 0.8; }
.ticker-item img { width: 100%; height: auto; object-fit: contain; display: block; }
@keyframes scrollTicker {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 10px)); }
}

/* 7. CAPABILITIES SECTION */
.cap-header h2 {
    font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900; line-height: 1;
    margin-bottom: 60px; text-transform: uppercase;
}
.cap-wrapper {
    display: grid; grid-template-columns: 1.5fr 1fr; gap: 80px; position: relative;
}
.cap-item {
    position: relative; padding: 40px 0; cursor: none; 
    transition: all 0.4s ease; opacity: 0.5;
}
.cap-item:hover { opacity: 1; padding-left: 20px; }
.cap-border {
    position: absolute; top: 0; left: 0; width: 100%; height: 1px;
    background: #333; transition: background 0.4s ease;
}
.cap-border.bottom { top: auto; bottom: 0; }
.cap-item:hover .cap-border { background: #fff; }
.cap-content { display: flex; align-items: baseline; gap: 30px; }
.cap-num { font-size: 0.8rem; font-family: monospace; color: #666; }
.cap-title {
    font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 300; 
    text-transform: uppercase; letter-spacing: -0.02em;
}
.cap-desc {
    margin-left: auto; font-size: 0.8rem; color: #888;
    max-width: 250px; text-align: right; display: block;
}
.cap-images {
    position: relative; width: 100%; height: 100%; min-height: 400px;
    overflow: hidden; border-radius: 2px;
}
.cap-img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; 
    
    /* Default State (Hidden) */
    opacity: 0; 
    transform: scale(1.15); /* Slightly more zoom for drama */
    filter: brightness(0.6);
    z-index: 1; /* Sit behind the active one */
    
    /* THE FIX: Slower duration (0.8s) + Luxury Easing Curve */
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.cap-img.active { 
    /* Active State (Visible) */
    opacity: 1; 
    transform: scale(1); 
    z-index: 2; /* Sit on top of the fading-out image */
}

/* 8. CLIENT LOGO MARQUEE */
.logo-marquee {
    padding: 80px 0; width: 100vw; overflow: hidden;
    background: var(--bg); border-bottom: 1px solid #1a1a1a;
}
.logo-wrapper { width: 100%; display: flex; }
.logo-track {
    display: flex; align-items: center; gap: 120px; width: max-content;
    animation: scrollTicker 40s linear infinite reverse;
}
.client-logo { display: flex; align-items: center; justify-content: center; user-select: none; }
.client-logo img {
    height: 105px; width: auto; display: block;
    filter: grayscale(100%) brightness(0.4); opacity: 0.7;
    transition: all 0.4s ease;
}
.client-logo img:hover { filter: grayscale(0%) brightness(1); opacity: 1; transform: scale(1.05); }

/* 9. EDITORIAL SECTION */
.ed-grid {
    display: grid; grid-template-columns: 1fr 1fr; align-items: center;
    position: relative; padding: 5vh 0;
}
.ed-image-wrapper {
    position: relative; height: auto; min-height: 0; width: 100%;
    overflow: hidden; z-index: 1;
}
.ed-image-wrapper img {
    width: 90%; height: auto; object-fit: contain;
    transform: scale(1.2); transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.curtain {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 3; transition: height 1.2s cubic-bezier(0.8, 0, 0.1, 1);
}
.ed-image-wrapper.active .curtain { height: 0%; }
.ed-image-wrapper.active img { transform: scale(1); }

.ed-content {
    z-index: 2; position: relative; 
    padding-left: 120px; margin-left: -100px;
}


/* GAP FIX: Only applies to Desktop (screens wider than 900px) */
@media (min-width: 901px) {
    .ed-image-wrapper + .ed-content {
        padding-left: 150px; /* The bigger gap */
    }
}

.ed-content h2 {
    font-size: clamp(3rem, 7vw, 4.5rem);
    font-weight: 900;
    line-height: 0.9;
    margin: 20px 0 40px;
    text-transform: uppercase;
    
    /* ADD THIS LINE: */
    overflow-wrap: break-word; 
    hyphens: auto; /* Optional: adds hyphens if it breaks */
}
.ed-desc {
    background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(20px);
    padding: 40px; max-width: 500px;
}
.ed-desc p {
    position: relative; margin-bottom: 30px; font-size: 1.1rem;
    line-height: 1.6; color: #ccc;
}
.ed-desc p::before {
    content: '+'; position: absolute; left: -40px; top: 0;
    color: #fff; font-weight: 300; font-family: 'Inter', sans-serif; opacity: 0.5;
}

/* 10. FOOTER */
.cta-section { padding: 30vh 5vw 15vh; border-top: 1px solid #111; }
.big-link { font-size: clamp(3rem, 10vw, 8rem); font-weight: 900; line-height: 0.9; margin: 30px 0 60px; }
.big-link a { color: #fff; text-decoration: none; transition: color 0.3s ease; }
.big-link a:hover { color: #888; }
.footer-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.meta-item p:first-child { font-size: 0.65rem; color: #555; letter-spacing: 2px; margin-bottom: 15px; font-weight: 600; }
.meta-item p a { color: #fff; text-decoration: none; border-bottom: 1px solid transparent; transition: 0.3s; }
.meta-item p a:hover { border-bottom: 1px solid #fff; }
.footer-bottom { padding: 40px 0; font-size: 0.6rem; color: #333; text-align: center; border-top: 1px solid #111; }


/* 11. RESPONSIVE UTILITIES (Unified) */
@media (max-width: 900px) {
	
	/* ADD THIS: Prevent huge words from cropping on mobile */
    .ed-content h2 {
        font-size: 3rem; /* Force a safe size for mobile */
        word-break: break-word;
    }
    
    /* Global Image Width Fix */
    .ed-image-wrapper img { width: 100%; }

    /* Stack all Grids Vertically */
    .intro-grid, .grid-2, .grid-3, .cap-wrapper { 
        grid-template-columns: 1fr; 
    }
    .footer-meta { grid-template-columns: 1fr; gap: 40px; }

    /* Split Section: Flip so Image is Top (HTML is Text->Image) */
    .split-grid { 
        display: flex; flex-direction: column-reverse; gap: 40px; 
    }

    /* Editorial Section: Ensure Image is Top (Logic for both layouts) */
    .ed-grid {
        display: flex; flex-direction: column; gap: 40px;
    }
    .ed-image-wrapper {
        order: -1; /* THE MAGIC FIX: Always puts image first */
        width: 100%; min-height: 0; margin-bottom: 20px;
    }
    .ed-content {
        order: 1; /* Puts text second */
        width: 100%; margin: 0; padding: 0;
    }
    .ed-desc { background: transparent; backdrop-filter: none; padding: 20px 0; }
    .ed-desc p::before { left: -15px; }

    /* Other Mobile Tweaks */
    .hero-content h1 { font-size: 3.5rem; }
    .grid-gap { margin-top: 40px; gap: 40px; }
    
    /* Ensure every image is full width */
    .reveal {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        /* Removed 'margin: 0' so standard top margins still work */
    }
    
    .cap-images { display: none; }
    .cap-content { flex-direction: column; gap: 10px; }
    .cap-desc { margin-left: 0; text-align: left; }
    .cap-item { opacity: 1; }
    
    .ticker-item { width: 200px; height: auto; }
    .volume-btn { padding: 10px 18px; bottom: 15px; right: 15px; }
}

@media (max-width: 900px) {
    
    /* 1. Hide the white spot cursor */
    .custom-cursor {
        display: none !important;
    }

    /* 2. Restore the default system cursor/touch interaction */
    /* This overrides the "cursor: none" set at the top of the file */
    * { 
        cursor: auto !important; 
    }

    /* ... rest of your mobile styles ... */
}

/* NEW: Laptop/Tablet Adjustment (Fixes the cropping) */
@media (max-width: 1700px) {
    .ed-content {
        /* Reduce the padding from 120px to 60px so text has more room */
        padding-left: 60px; 
        /* Adjust overlap slightly to match */
        margin-left: -50px; 
    }
    
    /* Slightly reduce font scaling in this zone */
    .ed-content h2 {
        font-size: clamp(2.5rem, 6vw, 4rem);
    }
    
    /* Pull the plus symbol in to match the new padding */
    .ed-desc p::before {
        left: -30px; 
    }
}

/* LAPTOP FIX: Prevent "DEVELOPMENT" from breaking */
@media (max-width: 1500px) {
    .ed-content h2 {
        /* Force a smaller size in this specific range */
        font-size: 2.5rem; 
        
        /* Optional: Stop it from breaking word mid-sentence if it still hits edge */
        word-break: normal;
        overflow-wrap: normal;
		    margin: 20px 0 0px;
    }
    
	

	
    /* Adjust padding slightly to give text more room */
    .ed-content {
        padding-left: 40px; 
        margin-left: -30px;
    }
    
    /* Align the plus symbol with new padding */
    .ed-desc p::before {
        left: -20px;
    }
}


/* --- LUXURY UPGRADES --- */

/* 1. LENIS SMOOTH SCROLL REQUIRED CSS */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* 2. TEXT REVEAL UPGRADE */
/* This makes text slide up from invisible, rather than just fading in */
.reveal h2, .reveal p, .reveal .label {
    transform: translateY(30px);
    opacity: 0;
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); /* "The Apple Easing" */
}

.reveal.active h2, .reveal.active p, .reveal.active .label {
    transform: translateY(0);
    opacity: 1;
}

/* 3. MAGNETIC BUTTONS */
/* We will animate these with JS */
.content-btn, .contact-btn, .volume-btn {
    display: inline-block;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- GOD MODE UPGRADES --- */

/* 1. CINEMATIC PRELOADER */
.preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background: #000; z-index: 99999;
    display: flex; justify-content: center; align-items: center;
    transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
}
.preloader.hide { transform: translateY(-100%); }

.loader-content { text-align: center; color: #fff; mix-blend-mode: difference; }
.loader-logo { font-weight: 900; font-size: 2rem; margin-bottom: 20px; letter-spacing: -1px; }
.loader-counter { font-family: 'Inter', monospace; font-size: 0.8rem; color: #666; }

/* 2. ANIMATED NOISE (Alive Background) */
/* Update your existing .noise class with this animation */
.noise {
    animation: noiseAnim 0.5s steps(5) infinite;
}
@keyframes noiseAnim {
    0% { background-position: 0 0; }
    100% { background-position: 100px 100px; }
}

/* 3. STAGGERED REVEALS (Rhythm) */
/* This makes items flow in 1-by-1 instead of a block */
.reveal h2 { transition-delay: 0.1s; }
.reveal p { transition-delay: 0.2s; }
.reveal a, .reveal button { transition-delay: 0.3s; }

/* 4. PARALLAX IMAGE BASE */
/* We reset the scale so JS can handle the movement */
.reveal img {
    /* We will control transform via JS now */
    will-change: transform;
}

/* --- HERO TEXT REVEAL --- */

/* --- HERO TEXT REVEAL (Super Charged) --- */

/* 1. The Mask (The invisible box) */
.line-mask {
    overflow: hidden; 
    display: block;
    line-height: 0.9;
    padding-bottom: 10px; /* Increased buffer */
    margin-bottom: -10px; /* Pull it back tight */
}

/* 2. The Text (The moving part) */
.line-mask span {
    display: block;
    
    /* THE UPGRADE: Start lower, rotated, and invisible */
    transform: translateY(150%) skewY(10deg); 
    transform-origin: bottom left;
    opacity: 0; 
    
    /* "Apple" Easing: Fast start, slow finish */
    transition: all 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 3. The Trigger Class (Added by JS) */
.parallax-text.hero-active .line-mask span {
    /* Snap to perfect position */
    transform: translateY(0) skewY(0deg); 
    opacity: 1;
}

/* 4. The Stagger (Rhythm) */
.line-mask:nth-child(1) span {
    transition-delay: 0.1s; /* Line 1 waits 0.1s */
}
.line-mask:nth-child(2) span {
    transition-delay: 0.25s; /* Line 2 waits longer */
}