/* --- RESET & BASE --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: none; /* Custom cursor everywhere */
}

:root {
    --bg-color: #0a0a0a;
    --text-color: #ffffff;
    --font-main: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-serif: 'Times New Roman', serif;
    
    /* GLOBAL MARGIN CONTROL - Adjust this value to push content in/out */
    --side-padding: 10vw; 
    --max-width: 1800px; /* Prevents site from getting too wide on huge screens */
}

html { scroll-behavior: smooth; }
/* --- PRELOADER STYLES --- */

/* 1. The Full Screen Container */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0a0a0a; /* Matches your site background */
    z-index: 999999; /* Must be higher than everything else */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Smooth fade out transition */
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* 2. The GIF Size */
.preloader-gif {
    width: 150px; /* Adjust this to make your logo bigger/smaller */
    height: auto;
    object-fit: contain;
}

/* 3. Helper Class to Hide Preloader */
#preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}

/* 4. Lock Scroll while loading */
body.loading {
    overflow: hidden;
}
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    line-height: 1.2;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* --- CUSTOM CURSOR --- */
.cursor {
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    mix-blend-mode: difference;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s, background-color 0.3s;
}
.cursor-grow { width: 50px; height: 50px; background-color: rgba(255, 255, 255, 0.8); }

/* --- UTILITY --- */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    /* This ensures everything aligns with the header */
    padding: 0 var(--side-padding); 
}

/* --- IMPROVED HEADER --- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Use the same variable so logo aligns with content */
    padding: 0px var(--side-padding); 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: padding 0.4s ease, background-color 0.4s ease, backdrop-filter 0.4s ease;
    mix-blend-mode: difference;
}

/* Header "Scrolled" State */
header.scrolled {
    mix-blend-mode: normal;
    background-color: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.logo {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 1px;
    display: flex;
    align-items: flex-start;
}

.trademark {
    font-size: 0.6rem;
    margin-left: 2px;
    font-weight: 400;
}

/* Desktop Nav */
.nav-links { display: flex; gap: 40px; }
.nav-link { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; position: relative; }
.nav-link::after {
    content: ''; position: absolute; width: 100%; height: 1px; bottom: -5px; left: 0;
    background-color: #fff; transform: scaleX(0); transform-origin: bottom right;
    transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: bottom left; }

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 10px;
    cursor: pointer;
}
.bar { width: 100%; height: 2px; background-color: #fff; transition: all 0.3s ease; }

/* --- HERO SECTION (FIXED WAVE ANIMATION) --- */
.hero {
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 140px;
    padding-bottom: 60px;
}

/* 1. Define Keyframes */
@keyframes textWave {
    0% { background-position: 0% center; }
    100% { background-position: -200% center; }
}

@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

.hero-text {
    font-size: 9vw;
    line-height: 0.85;
    text-transform: uppercase;
    letter-spacing: -3px;
    overflow: visible;
}

.hero-text span {
    display: block;
    opacity: 0; /* Hidden initially for entrance */
    transform: translateY(50px);
    
    /* WAVE GRADIENT SETTINGS */
    background: linear-gradient(
        to right,
        #ffffff 20%,
        #9758f1 50%, /* Purple */
        #ffffff 80%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* Makes text see-through */
    
    /* COMBINED ANIMATIONS: Wave (infinite) + Entrance (once) */
    animation: 
        textWave 4s linear infinite, 
        fadeInUp 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}

/* Delays need to apply to the SECOND animation (fadeInUp) in the list */
/* Syntax: animation-delay: wave-delay, fade-delay */
.delay-1 { animation-delay: 0s, 0.2s !important; }
.delay-2 { animation-delay: 0s, 0.4s !important; }
.delay-3 { animation-delay: 0s, 0.6s !important; }

/* Styles for the tagline and rest of hero */
.hero-tagline {
    font-size: 2rem;
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: 400;
    color: #fff;
    max-width: 800px;
    line-height: 1.3;
}
/* Tagline needs standard text styling (no wave) */
.hero-tagline.animate-text {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #fff;
    animation: fadeInUp 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}

.highlight-hero {
    font-family: var(--font-serif);
    font-style: italic;
    color: #ccc;
}

.hero-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 60px;
    flex-wrap: wrap;
    gap: 40px;
}

.hero-sub {
    font-size: 1.1rem;
    max-width: 500px;
    line-height: 1.6;
    color: #888;
}

/* General Animation Class for non-wave elements */
.animate-text:not(.hero-text span) {
    opacity: 0; 
    transform: translateY(50px); 
    animation: fadeInUp 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}
/* --- MARQUEE --- */
.marquee-container {
    padding: 80px 0;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    background-color: var(--bg-color);
    margin-top: 50px;
}
.marquee-content { display: inline-block; animation: scroll 40s linear infinite; }
.marquee-item {
    font-size: 5rem;
    text-transform: uppercase;
    margin-right: 80px;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.4);
    font-weight: 700;
    letter-spacing: -1px;
}
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* --- PORTFOLIO --- */
.portfolio { padding: 120px var(--side-padding); } /* Explicitly use var here if section isn't .container */

/* NOTE: Since .portfolio usually has .container class in HTML, we rely on .container padding. 
   But if you want extra vertical spacing: */
.portfolio.container { padding-top: 120px; padding-bottom: 120px; } 

.section-header { 
    margin-bottom: 80px; 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    border-bottom: 1px solid #222; 
    padding-bottom: 20px; 
}
.section-title { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; color: #888; font-weight: 700; }

.project-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); /* Force 2 columns on desktop */
    gap: 80px 60px; /* Vertical / Horizontal gap */
}
.project-image { width: 100%; aspect-ratio: 4 / 3; background-color: #1a1a1a; margin-bottom: 25px; overflow: hidden; position: relative; }
.project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1), filter 1.2s ease; filter: grayscale(100%) brightness(0.8); }
/* Triggers on desktop hover OR when scrolled into view on mobile */
.project-card:hover .project-image img,
.project-card.mobile-hover .project-image img { 
    transform: scale(1.08); 
    filter: grayscale(0%) brightness(1.1); 
}
.project-info { display: flex; justify-content: space-between; align-items: flex-start; }
.project-title { font-size: 1.8rem; margin-bottom: 5px; letter-spacing: -1px; }
.project-cat { font-size: 0.8rem; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-top: 5px; }

/* --- PHILOSOPHY --- */
.philosophy-section { background-color: #e6e6e6; color: #0a0a0a; padding: 150px 0; position: relative; }
/* Note: Philosophy has .container inside it in HTML, so it inherits --side-padding */

.philosophy-layout { display: grid; grid-template-columns: 250px 1fr; gap: 60px; align-items: start; }
.philosophy-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: #888; position: sticky; top: 120px; display: flex; gap: 10px; }
.big-statement { font-size: 4.5vw; line-height: 1; font-weight: 400; margin-bottom: 80px; letter-spacing: -2px; }
.highlight { font-style: italic; font-family: var(--font-serif); }
.philosophy-details { display: flex; flex-direction: column; gap: 40px; max-width: 650px; margin-left: auto; }
.philosophy-details p { font-size: 1.3rem; line-height: 1.5; color: #333; }
.text-link { font-size: 1rem; text-transform: uppercase; font-weight: 700; border-bottom: 2px solid #0a0a0a; padding-bottom: 5px; display: inline-block; width: fit-content; transition: all 0.3s ease; color: #0a0a0a; position: relative; }
.text-link:hover { color: #555; border-color: #555; transform: translateX(15px); }

/* --- FOOTER --- */
footer { padding: 120px var(--side-padding) 40px; text-align: center; } /* Uses variable */
.cta-big { font-size: 11vw; font-weight: 700; text-transform: uppercase; line-height: 0.9; letter-spacing: -4px; margin-bottom: 80px; display: block; transition: opacity 0.3s; -webkit-text-stroke: 1px rgba(255,255,255,1); color: transparent; }
.cta-big:hover { color: #fff; opacity: 1; }
.footer-links { display: flex; justify-content: center; gap: 50px; margin-bottom: 80px; }
.footer-bottom { display: flex; justify-content: space-between; font-size: 0.8rem; color: #666; text-transform: uppercase; letter-spacing: 1px;margin-bottom: 20px; }

/* --- RESPONSIVE MEDIA QUERIES --- */
@media (max-width: 1400px) {
    /* Slightly less padding on medium laptops */
    :root { --side-padding: 6vw; }
}

@media (max-width: 1024px) {
    .hero-text { font-size: 11vw; }
    .big-statement { font-size: 3.5rem; }
    .project-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    /* MOBILE RESET: Use standard small padding on phones */
    :root { --side-padding: 20px; }

    header { padding: 25px var(--side-padding); }
    
    .nav-links {
        position: fixed; top: 0; right: 0; width: 100%; height: 100vh;
        background-color: #0a0a0a; flex-direction: column; justify-content: center; align-items: center;
        transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: -1;
    }
    .nav-links.active { transform: translateX(0); }
    .nav-link { font-size: 2rem; }
    .menu-toggle { display: flex; z-index: 1001; }
    .menu-toggle.active .bar:nth-child(1) { transform: rotate(45deg) translate(2px, 2px); }
    .menu-toggle.active .bar:nth-child(2) { transform: rotate(-45deg) translate(2px, -2px); }

    * { cursor: auto; }
    .cursor { display: none; }
    .hero { height: auto; padding-top: 140px; padding-bottom: 60px; }
    .hero-text { font-size: 13vw; }
    .marquee-item { font-size: 3rem; margin-right: 40px; }
    .big-statement { font-size: 2.2rem; }
    .cta-big { font-size: 15vw; }
    .footer-links { flex-direction: column; gap: 20px; }
    .philosophy-layout { grid-template-columns: 1fr; gap: 30px; }
    .philosophy-label { position: static; margin-bottom: 20px; }
    .philosophy-details { margin-left: 0; }
}

/* --- ABOUT PAGE STYLES --- */

/* Adjust Hero Height for About Page */
.about-hero {
    height: 70vh; /* Shorter than home hero */
    padding-bottom: 0;
}

/* Story Section (White Background) */
.about-story-section {
    background-color: #f4f4f4;
    color: #111;
    padding: 150px 0;
    margin-bottom: 100px;
}

.story-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 60px;
    align-items: start;
    padding: 0 var(--side-padding); /* Ensure it aligns with global padding */
}

.story-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    color: #888;
    position: sticky;
    top: 120px;
}

.story-details p {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #333;
    max-width: 700px;
}

/* Values Grid Section */
.values-section {
    padding-bottom: 150px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 60px;
}

.value-card {
    border-top: 1px solid #333; /* Technical top border look */
    padding-top: 30px;
    transition: transform 0.3s ease;
}

.value-card:hover {
    transform: translateY(-10px);
}

.value-num {
    display: block;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 20px;
    font-family: monospace;
}

.value-title {
    font-size: 2rem;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.value-desc {
    font-size: 1.1rem;
    color: #aaa;
    line-height: 1.5;
}

/* Responsive for About Page */
@media (max-width: 900px) {
    .story-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .values-grid {
        grid-template-columns: 1fr; /* Stack values on mobile */
        gap: 60px;
    }
    
    .about-hero {
        height: auto;
        padding-top: 150px;
        padding-bottom: 100px;
    }
}

/* --- WORK PAGE STYLES --- */

.work-hero {
    height: 60vh; /* Shorter intro */
    padding-bottom: 0;
}

/* Filter Bar Styling */
.filter-section {
    margin-bottom: 80px;
    border-bottom: 1px solid #222;
    padding-bottom: 30px;
}

.work-filters {
    display: flex;
    gap: 40px;
}

.work-filters li {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
    transition: color 0.3s ease;
    cursor: pointer;
    position: relative;
}

.work-filters li:hover {
    color: #fff;
}

/* Active State for Filter (Dot indicator) */
.work-filters li.active {
    color: #fff;
}

.work-filters li.active::before {
    content: '●';
    position: absolute;
    left: -15px;
    top: -1px;
    font-size: 0.8rem;
    color: #fff;
}

/* Page Spacing */
.portfolio-page {
    padding-bottom: 150px;
}

/* Responsive Filters */
@media (max-width: 768px) {
    .work-filters {
        gap: 20px;
        flex-wrap: wrap; /* Allow wrapping on small phones */
    }
    
    .work-filters li.active::before {
        display: none; /* Hide dot on mobile to save space, use color only */
    }
    
    .work-filters li.active {
        text-decoration: underline;
        text-underline-offset: 5px;
    }
}

/* --- CONTACT PAGE STYLES --- */

.contact-page-section {
    padding-top: 180px; /* Space for fixed header */
    padding-bottom: 100px;
}

.contact-headline {
    font-size: 5vw;
    line-height: 1.1;
    margin-bottom: 100px;
    max-width: 90%;
}

.highlight-contact {
    font-family: var(--font-serif);
    font-style: italic;
    color: #ccc;
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50/50 Split */
    gap: 80px;
    align-items: start;
}

/* Left Column Styling */
.contact-sub {
    font-size: 1.4rem;
    line-height: 1.5;
    margin-bottom: 60px;
    color: #ddd;
    max-width: 400px;
}

.info-block {
    margin-bottom: 40px;
}

.info-label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.info-text {
    font-size: 1.1rem;
    color: #fff;
    line-height: 1.5;
}

.social-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.social-list a {
    font-size: 1.1rem;
    color: #fff;
    width: fit-content;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s;
}

.social-list a:hover {
    border-bottom: 1px solid #fff;
}

/* Form Styling */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.form-group {
    position: relative;
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* Input Fields - Minimal Style */
.contact-form input,
.contact-form textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid #333;
    padding: 10px 0;
    color: #fff;
    font-size: 1.2rem;
    font-family: var(--font-main);
    outline: none;
    transition: border-color 0.3s ease;
    border-radius: 0; /* Removes default IOS styling */
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-bottom: 1px solid #fff;
}

/* Textarea specific resize */
.contact-form textarea {
    resize: vertical;
    min-height: 60px;
}

/* Submit Button */
.submit-btn {
    background: #fff;
    color: #000;
    border: none;
    padding: 20px 40px;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    align-self: flex-start;
    transition: background-color 0.3s, transform 0.3s;
    margin-top: 20px;
}

.submit-btn:hover {
    background-color: #ddd;
    transform: translateY(-2px);
}

/* Footer override for contact page */
.contact-footer {
    padding-top: 0;
}

/* Responsive Contact Page */
@media (max-width: 900px) {
    .contact-layout {
        grid-template-columns: 1fr; /* Stack vertically */
        gap: 60px;
    }

    .contact-headline {
        font-size: 3rem;
        margin-bottom: 60px;
    }
    
    .contact-sub {
        font-size: 1.2rem;
    }
}
/* --- SPOTLIGHT SECTION (UPDATED RATIOS) --- */
.spotlight-section {
    width: 100%;
    /* Remove fixed height, let aspect-ratio handle it */
    height: auto; 
    
    /* DESKTOP RATIO: 16:9 */
    aspect-ratio: 16 / 9;
    
    /* Optional: Limit max height so it doesn't exceed screen on huge monitors */
    max-height: 90vh; 
    
    overflow: hidden;
    position: relative;
    margin-top: 80px;
}

.spotlight-link {
    display: block;
    width: 100%;
    height: 100%;
}

.spotlight-image-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.spotlight-img {
    width: 100%;
    height: 100%;
    
    /* CRITICAL: Fills the ratio box. 
       If your GIF is wide, this will crop the sides on mobile (standard behavior). 
       If you want to see the WHOLE image without cropping, change 'cover' to 'contain', 
       but that will leave empty space. */
    object-fit: cover; 
    object-position: center; /* Keeps the center of the GIF visible */
    
    transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
    filter: brightness(0.8);
}

.spotlight-section:hover .spotlight-img {
    transform: scale(1.05);
    filter: brightness(1);
}

/* Overlay Styling (Kept same as before) */
.spotlight-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 60px var(--side-padding);
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}
.spotlight-title { font-size: 3rem; color: #fff; margin: 0; }
.spotlight-cat { font-size: 1rem; text-transform: uppercase; letter-spacing: 2px; border: 1px solid #fff; padding: 10px 20px; border-radius: 30px; transition: background 0.3s; }
.spotlight-section:hover .spotlight-cat { background: #fff; color: #000; }
@media (max-width: 768px) {
    /* ... existing mobile styles ... */

    /* UPDATE THIS PART FOR SPOTLIGHT */
    .spotlight-section {
        /* MOBILE RATIO: 4:5 (Instagram Portrait Standard) */
        aspect-ratio: 4 / 5;
        
        /* If you prefer TALLER (TikTok style), change above to: aspect-ratio: 9 / 16; */
        
        max-height: none; /* Allow it to grow vertically */
        margin-top: 40px;
    }

    /* Adjust overlay for the vertical layout */
    .spotlight-overlay {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 30px var(--side-padding);
    }
    
    .spotlight-title {
        font-size: 2rem;
    }
}

/* === NEW SERVICES SECTION STYLES (STUDIO SIZE LOOK) === */

.services-section {
    padding: 150px 0;
    position: relative;
    background-color: var(--bg-color); /* Ensure background is dark */
}

.services-layout {
    display: grid;
    /* 45% for image, 55% for text list */
    grid-template-columns: 45% 1fr; 
    gap: 80px;
    align-items: start;
}

/* --- Left Column: Sticky Image Container --- */
.services-visual {
    /* This makes the image stick while the list scrolls */
    position: -webkit-sticky; /* Safari support */
    position: sticky;
    top: 120px; /* Adjust based on your header height */
    height: 60vh; /* Height of the image box */
}

.visual-container {
    width: 100%;
    height: 100%;
    background-color: #1a1a1a; /* Placeholder color */
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #333;
}

.visual-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures GIF fills box without stretch */
    transition: filter 0.3s ease;
}

/* --- Right Column: Typography List --- */
.services-list-container {
    display: flex;
    flex-direction: column;
}

.services-list-container .label-text {
    margin-bottom: 40px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    font-size: 0.8rem;
}

.services-big-list {
    display: flex;
    flex-direction: column;
}

/* The huge typography items */
.service-item {
    /* Responsive font size: massive on desktop, smaller on mobile */
    font-size: 5vw; 
    font-weight: 800; /* Extra bold */
    text-transform: uppercase;
    line-height: 0.85;
    color: #2a2a2a; /* The dark gray "inactive" color */
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
    margin-bottom: 10px; /* Spacing between items */
    letter-spacing: -2px; /* Tight letter spacing for impact */
}

/* Hover and Active State: Turns White */
.service-item:hover,
.service-item.active {
    color: #ffffff;
    transform: translateX(10px); /* Slight push right for emphasis */
}

/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {
    .service-item {
        font-size: 7vw; /* Larger relative font on tablets */
    }
}

@media (max-width: 900px) {
    .services-layout {
        grid-template-columns: 1fr; /* Stack vertically on mobile */
        gap: 40px;
    }

    .services-visual {
        position: relative; /* No longer sticky on mobile */
        top: auto;
        height: 40vh; /* Shorter image on mobile */
        order: 1; /* Keep image on top, or change to 2 to put below text */
        margin-bottom: 40px;
    }

    .services-list-container {
        order: 2;
    }

    .service-item {
        font-size: 3.5rem; /* Fixed large size for mobile phones */
        line-height: 0.9;
        letter-spacing: -1px;
    }
}
/* --- LOGO IMAGE STYLES --- */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none; 
}

.logo-img {
    height: 150px; /* Adjust this to make your logo bigger/smaller */
    width: auto;  /* Keeps the aspect ratio correct */
    object-fit: contain;
    display: block;
}

/* --- RESPONSIVE FIXES (Mobile & Tablet) --- */

@media (max-width: 1024px) {
    /* Tablet Adjustments */
    .hero-text { font-size: 11vw; }
    .project-grid { grid-template-columns: 1fr; }
    
    /* Make services text slightly smaller on tablet so it fits */
    .service-item { font-size: 5vw; }
}

/* --- MOBILE FIXES --- */
@media (max-width: 768px) {
    
    /* GLOBAL MOBILE RESET */
    :root { --side-padding: 20px; }

    /* 1. HEADER FIXES */
    header { 
        padding: 15px var(--side-padding); 
        height: auto; 
        min-height: 80px;
    }

    /* CRITICAL: Disable blend mode when menu is open so it's solid black */
    header.menu-open {
        mix-blend-mode: normal !important;
    }
    
    /* 2. SIDEBAR MENU FIX */
    .nav-links {
        position: fixed; 
        top: 0; 
        right: 0; 
        width: 100%; 
        height: 100vh;
        background-color: #0a0a0a; 
        flex-direction: column; 
        justify-content: center; 
        align-items: center;
        transform: translateX(100%); 
        transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        
        /* High Z-Index to cover everything */
        z-index: 998; 
    }
    
    .nav-links.active { transform: translateX(0); }
    .nav-link { font-size: 2.5rem; margin-bottom: 20px; }
    
    /* MENU BUTTON */
    .menu-toggle { display: flex; z-index: 1001; }
    .menu-toggle.active .bar:nth-child(1) { transform: rotate(45deg) translate(2px, 2px); }
    .menu-toggle.active .bar:nth-child(2) { transform: rotate(-45deg) translate(2px, -2px); }
    
    /* DISABLE CURSOR ON MOBILE */
    * { cursor: auto; }
    .cursor { display: none; }

    /* HERO ADJUSTMENTS */
    .hero { height: auto; padding-top: 140px; padding-bottom: 60px; }
    .hero-text { font-size: 13vw; }
    .marquee-item { font-size: 3rem; margin-right: 40px; }
    .big-statement { font-size: 2.2rem; }
    .cta-big { font-size: 15vw; }
    .footer-links { flex-direction: column; gap: 20px; }
    
    /* SERVICES FIX */
    .services-layout { grid-template-columns: 1fr; gap: 40px; }
    /* Fix image overlap */
    .services-visual { position: relative; top: 0; width: 100%; height: 30vh; margin-bottom: 20px; order: 1; z-index: 1; }
    .services-list-container { order: 2; z-index: 1; }
    .service-item { font-size: clamp(1.8rem, 8vw, 3rem); line-height: 1.1; margin-bottom: 15px; }

    /* LAYOUT STACKING */
    .contact-layout, .philosophy-layout, .story-layout, .values-grid { grid-template-columns: 1fr; gap: 40px; }
    .contact-headline { font-size: 2.5rem; margin-bottom: 40px; }
    .philosophy-label, .story-label { position: static; margin-bottom: 20px; }
    .philosophy-details { margin-left: 0; }
    
    /* SPOTLIGHT */
    .spotlight-section { aspect-ratio: 4 / 5; max-height: none; margin-top: 40px; }
    .spotlight-overlay { flex-direction: column; align-items: flex-start; gap: 20px; padding: 30px var(--side-padding); }
    .spotlight-title { font-size: 2rem; }
    
    /* WORK FILTERS */
    .work-filters { gap: 15px; flex-wrap: wrap; }
    .work-filters li { font-size: 0.8rem; }
    .work-filters li.active::before { display: none; }
    .work-filters li.active { text-decoration: underline; text-underline-offset: 4px; }

    .spotlight-section { 
        /* CHANGED: From 4 / 5 to 16 / 9 to fit the full width */
        aspect-ratio: 16 / 9; 
        
        max-height: none; 
        margin-top: 40px; 
    }
    
    .spotlight-overlay { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 10px; /* Reduced gap slightly for tighter layout */
        padding: 20px var(--side-padding); /* Adjusted padding */
    }
    
    .spotlight-title { 
        font-size: 1.5rem; /* Slightly smaller font to fit landscape view better */
    }
}

/* --- DROPDOWN STYLES --- */
.contact-form select {
    background: transparent;
    border: none;
    border-bottom: 1px solid #333;
    padding: 10px 0;
    color: #fff; /* Text color */
    font-size: 1.2rem;
    font-family: var(--font-main);
    outline: none;
    cursor: pointer;
    border-radius: 0;
    width: 100%;
    
    /* Remove default arrow to keep it minimal (Optional) */
    appearance: none; 
    -webkit-appearance: none; 
}

/* Style the options so they are readable (Dark Background) */
.contact-form select option {
    background-color: #0a0a0a; /* Dark background for the dropdown list */
    color: #fff;
    padding: 10px;
}

/* Add a custom arrow style (Optional) */
.form-group {
    position: relative;
}

/* Changes border color on focus/click */
.contact-form select:focus {
    border-bottom: 1px solid #fff;
}

/* --- CUSTOM CHECKBOX GRID --- */
.checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 Columns */
    gap: 15px;
    margin-top: 10px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
    color: #888;
    position: relative;
    padding: 10px;
    border: 1px solid #333;
    transition: all 0.3s ease;
}

/* Hide the actual ugly browser checkbox */
.checkbox-item input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* The custom box styling */
.checkmark {
    height: 15px;
    width: 15px;
    background-color: transparent;
    border: 1px solid #666;
    margin-right: 15px;
    position: relative;
    transition: all 0.3s ease;
}

/* --- STATES --- */

/* Hover State */
.checkbox-item:hover {
    border-color: #fff;
    color: #fff;
}

/* Checked State (When user selects it) */
.checkbox-item input:checked ~ .checkmark {
    background-color: #fff;
    border-color: #fff;
}

.checkbox-item input:checked ~ .checkmark:after {
    display: block;
}

/* Style the whole box when checked */
.checkbox-item:has(input:checked) {
    border-color: #fff;
    color: #fff;
    background-color: rgba(255,255,255,0.05); /* Slight highlight */
}

/* Mobile: Stack them in 1 column */
@media (max-width: 600px) {
    .checkbox-grid {
        grid-template-columns: 1fr;
    }
}

/* --- FORM MAKEOVER --- */

/* Add spacing between big sections */
.form-group.big-group {
    margin-top: 40px;
}

/* --- 1. THE "TAG" CHECKBOXES --- */
.checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 15px;
}

.tag-checkbox {
    position: relative;
    cursor: pointer;
    /* Prevent text selection */
    user-select: none; 
}

/* Hide the actual ugly browser checkbox */
.tag-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* The visual button */
.tag-text {
    display: inline-block;
    padding: 12px 24px;
    border: 1px solid #333;
    border-radius: 50px; /* Pill shape */
    color: #888;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: transparent;
}

/* Hover State */
.tag-checkbox:hover .tag-text {
    border-color: #666;
    color: #fff;
    transform: translateY(-2px);
}

/* CHECKED STATE (The Magic) */
.tag-checkbox input:checked + .tag-text {
    background-color: #fff;
    color: #000;
    border-color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}


/* --- 2. THE MINIMAL DROPDOWN --- */
.select-wrapper {
    position: relative;
    width: 100%;
    max-width: 400px; /* Don't let it get too wide */
}

.minimal-select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    border-bottom: 1px solid #333;
    border-radius: 0;
    width: 100%;
    padding: 15px 0;
    font-size: 1.5rem; /* Big text */
    color: #fff;
    font-family: var(--font-main);
    cursor: pointer;
    outline: none;
    transition: border-color 0.3s;
}

.minimal-select:focus {
    border-bottom-color: #fff;
}

/* Custom small arrow */
.select-arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: #666;
    pointer-events: none; /* Let clicks pass through to select */
}

/* Style the dropdown options (Dark Mode) */
.minimal-select option {
    background-color: #0a0a0a;
    color: #fff;
    padding: 15px;
    font-size: 1rem;
}


/* --- 3. INPUT POLISH --- */
/* Make inputs just bottom borders to look cleaner */
.contact-form input, 
.contact-form textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid #333;
    padding: 15px 0;
    color: #fff;
    font-size: 1.2rem; /* Consistent size */
    width: 100%;
    outline: none;
    transition: border-color 0.3s;
    border-radius: 0;
}

.contact-form input:focus, 
.contact-form textarea:focus {
    border-bottom-color: #fff;
}

.contact-form label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #666;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

/* Responsive Grid for Name/Email */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .tag-text {
        padding: 10px 18px;
        font-size: 0.8rem;
    }
}

/* --- FIX: REMOVE BLUE BROWSER AUTOFILL BACKGROUND --- */

/* This targets the browser's default autofill style */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    /* Hack: Use a huge internal shadow to cover the blue background */
    -webkit-box-shadow: 0 0 0 30px #0a0a0a inset !important;
    
    /* Force the text to remain white */
    -webkit-text-fill-color: white !important;
    
    /* Prevent the background color from switching */
    transition: background-color 5000s ease-in-out 0s;
}

/* Ensure caret (typing cursor) is white */
input {
    caret-color: white;
}

/* --- SIMPLE PROJECT PAGE STYLES --- */

/* 1. Header Area */
.project-hero-simple {
    padding-top: 220px; /* Space for fixed header */
    padding-bottom: 80px;
    text-align: center;
}

.project-big-title {
    font-size: 13vw; /* Huge, wall-to-wall text */
    line-height: 0.8;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: -4px;
    margin: 0;
    color: #fff;
}

/* 2. Media Stream */
.project-media-stream {
    display: flex;
    flex-direction: column;
    gap: 0; /* Remove gap for seamless look, or set to 20px/40px */
}

/* Full Width Images */
.media-block.full {
    width: 100%;
    margin-bottom: 40px; /* Spacing between rows */
}

.media-block.full img,
.media-block.full video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Grid Images (Side by Side) */
.media-block.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
    padding: 0 var(--side-padding); /* Align with container */
}

.media-item img,
.media-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 3. Next Project Navigation */
.next-project {
    padding: 150px 0;
    text-align: center;
    border-top: 1px solid #222;
    background-color: var(--bg-color);
}

.next-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.3s;
}

.next-label {
    font-size: 0.9rem;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.next-title {
    font-size: 8vw;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.5); /* Outline style */
    font-weight: 700;
    letter-spacing: -2px;
    transition: all 0.4s ease;
}

.next-link:hover .next-title {
    color: #fff; /* Fill in on hover */
    -webkit-text-stroke: 1px #fff;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .project-hero-simple {
        padding-top: 160px;
        padding-bottom: 60px;
    }
    
    .project-big-title {
        font-size: 16vw;
    }

    .media-block.grid {
        grid-template-columns: 1fr; /* Stack images on mobile */
        gap: 20px;
    }
    
    .media-block.full {
        margin-bottom: 20px;
    }
    
    .next-title {
        font-size: 15vw;
    }
}

/* Add this to your CSS if you want the first paragraph to look special */
.project-description .intro-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff; /* Bright white */
    margin-bottom: 30px;
    border-left: 2px solid #fff;
    padding-left: 20px;
}

/* Ensure regular paragraphs have spacing */
.project-description p {
    margin-bottom: 20px;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #ccc;
}

/* --- AL-AJRAB / PROJECT PAGE FIXES --- */

/* 1. Hero Spacing */
.project-hero {
    padding-top: 180px; /* More space from top header */
    padding-bottom: 100px;
}

/* 2. Title Control */
.project-big-title.long-title {
    /* CHANGED: Smaller than the 13vw we used before */
    /* This makes it fit perfectly without screaming */
    font-size: clamp(3rem, 7vw, 6rem); 
    line-height: 1.1;
    margin-bottom: 60px;
    max-width: 90%;
}

/* 3. The Meta Data Grid (The crushed text fix) */
.project-meta {
    display: grid;
    /* Force 3 distinct columns so they don't overlap */
    grid-template-columns: repeat(3, 1fr); 
    gap: 40px;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    padding: 30px 0;
    margin-bottom: 80px;
}

.meta-item {
    display: flex;
    flex-direction: column;
}

.meta-label {
    font-size: 0.8rem;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.meta-value {
    font-size: 1.1rem;
    color: #fff;
    font-weight: 500;
}

/* 4. Description Styling */
.project-description {
    max-width: 900px;
    margin-left: auto; /* Pushes text to the right side */
}

.project-description .intro-text {
    font-size: 1.5rem;
    color: #fff;
    font-weight: 700;
    margin-bottom: 30px;
    padding-left: 20px;
    border-left: 2px solid #fff; /* That cool white line */
}

.project-description p {
    font-size: 1.2rem;
    line-height: 1.7;
    color: #bbb;
    margin-bottom: 25px;
}

/* --- RESPONSIVE FIX (Mobile) --- */
@media (max-width: 768px) {
    .project-big-title.long-title {
        font-size: 3.5rem; /* Readable size on phone */
    }

    .project-meta {
        grid-template-columns: 1fr; /* Stack vertically on mobile */
        gap: 30px;
    }
    
    .project-description .intro-text {
        font-size: 1.2rem;
    }
}

/* --- MOBILE CLICKABLE EFFECTS FOR WORK PAGE --- */

@media (max-width: 768px) {
    
    /* 1. The Visual Cue: Pulsing "Tap to View" text */
    .project-card .project-info::after {
        content: 'Tap to view ↗';
        display: block;
        margin-top: 12px;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: #fff;
        /* Start with opacity 0.5 and animate it */
        animation: mobilePulse 2s infinite ease-in-out; 
    }

    /* The pulsing and sliding animation */
    @keyframes mobilePulse {
        0% { opacity: 0.4; transform: translateX(0); }
        50% { opacity: 1; transform: translateX(5px); color: #a1a1a1; }
        100% { opacity: 0.4; transform: translateX(0); }
    }

    /* 2. The Tactile Press Effect (:active triggers exactly when a finger touches the screen) */
    .project-card:active .project-image img {
        /* Push the image inwards like a physical button */
        transform: scale(0.95) !important; 
        
        /* Flash into full color instantly */
        filter: grayscale(0%) brightness(1.1) !important; 
        
        /* Fast transition so it feels responsive to the touch */
        transition: transform 0.1s ease, filter 0.1s ease !important; 
    }
    
    /* Optional: Since gray images look "disabled" on mobile, you might want to force them to be colored by default */
    /* Uncomment the 3 lines below if you want them always colored on phones */
    /* .project-card .project-image img {
        filter: grayscale(0%) !important;
    } */
}