/* 
    Eastern Hemlock | Ultra-Luxury Villa Services
    Minimalist Premium Design System
*/

html {
    scroll-behavior: auto !important; /* Reverting to auto - Lenis takes over the engine */
}

:root {
    --black: #111111; /* Midnight Graphite - Deep Mixed Grey/Black */
    --white: #FFFFFF;
    --luxury-bg: #111111; 
    --gold: #888888; /* Monochrome Accent - Mid Gray */
    --beige: #EBEBEB; /* Monochrome Accent - Light Gray instead of Beige */
    --transition-slow: cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-fast: cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    background-color: var(--black);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    -webkit-touch-callout: none !important;
    -webkit-user-drag: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    pointer-events: auto; /* Allow clicks, just not secondary actions */
}

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

/* Lenis Smooth Scroll Mandatory CSS */
html.lenis, html.lenis body {
    height: auto !important;
}

.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;
}

/* Typography Foundation */
h1, h2, h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 200; /* Ultra thin, very luxury */
    text-transform: uppercase;
    letter-spacing: 2px;
}
.logo {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: 6px; /* High tracking matching reference */
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 16px;
}
.brand-icon, .intro-logo-img {
    display: inline-block;
    width: 55px;
    height: 55px;
    background-color: transparent !important; /* Reverting mask background */
    flex-shrink: 0;
    
    /* Using the FINAL clean asset with screen blending for absolute black-transparency */
    mix-blend-mode: screen; 
    object-fit: contain;
    
    margin-right: 15px; 
    z-index: 100;
}

/* Intro specific logo size override */
.intro-logo-img {
    width: 220px; 
    height: 220px;
}
h1 i, h2 i {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
}

h1 { font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1.1; margin-bottom: 2vh; }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); margin-bottom: 3vh; line-height: 1.2; }
h3 { font-size: 1.2rem; margin-bottom: 10px; font-weight: 400; letter-spacing: 3px; }

p { font-weight: 300; font-size: clamp(1rem, 1.2vw, 1.2rem); opacity: 0.8; }

.bg-beige { 
    background-color: var(--beige);
    color: var(--black); 
}
.bg-silk-premium {
    background: radial-gradient(circle at center, #333333 0%, #111111 100%);
    background-size: 100% 100%;
    color: #EBEBEB;
}

@keyframes silkDrift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.bg-black { background-color: var(--black); color: var(--white); }

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

/* Utilities */
.container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 5vw;
}
.text-center { text-align: center; }
.section-spaced { padding: 15vh 0; }

/* Buttons (Premium Minimalist) */
.btn {
    display: inline-flex;
    position: relative;
    padding: 16px 40px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 500;
    overflow: hidden;
    cursor: pointer;
    border-radius: 2px;
    transition: color 0.4s var(--transition-fast);
}

.btn span { position: relative; z-index: 2; transition: color 0.4s; }

/* Data Hover fill animation for luxury feel */
.btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--white);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.6s var(--transition-slow);
    z-index: 1;
}

.btn-outline {
    border: none;
    padding: 10px 0; /* Adjust padding for no-box look */
    color: var(--white);
    background: transparent;
}
.btn-outline span::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--white);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.6s var(--transition-slow);
}
.btn-outline:hover span::after {
    transform: scaleX(1);
    transform-origin: left;
}
.btn-outline:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}
.btn-outline:hover span {
    color: var(--white); /* Keep white since we removed the fill effect for this text-only button */
}

.btn-primary {
    background-color: transparent;
    color: var(--white);
    border: 1px solid var(--white);
    margin-top: 4vh;
}
.btn-primary::before { background-color: var(--white); }
.btn-primary:hover::before { transform: scaleX(1); transform-origin: left; }
.btn-primary:hover span { color: var(--black); }

.bg-beige .btn-primary {
    border-color: var(--black);
    color: var(--black);
}
.bg-beige .btn-primary::before { background-color: var(--black); }
.bg-beige .btn-primary:hover span { color: var(--beige); }

.btn-large {
    padding: 20px 60px;
    font-size: 1rem;
}


/* Minimal Navigation */
.nav-minimal {
    position: fixed;
    top: 0; left: 0; width: 100%;
    padding: 30px 0;
    z-index: 1000;
    transition: all 0.6s var(--transition-slow);
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 100%);
    backdrop-filter: blur(0px);
}


/* Glassmorphism for better visibility when scrolled */
.nav-minimal.scrolled {
    background: rgba(17, 17, 17, 0.8);
    backdrop-filter: blur(20px);
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 5vw;
}
.nav-left {
    display: flex;
    justify-content: flex-start;
}
.nav-center {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.nav-right {
    display: flex;
    justify-content: flex-end;
    gap: 30px;
}
.social-header-icon {
    opacity: 1 !important;
    color: var(--white) !important;
    transition: opacity 0.4s, transform 0.4s;
}
.social-header-icon:hover {
    opacity: 1;
    transform: translateY(-2px);
}
@media (max-width: 900px) {
    .nav-center { display: none; } /* Focus on logo + menu on mobile */
    .nav-container { grid-template-columns: 1fr 1fr; }
}


.nav-minimal .logo { 
    font-size: 1.8rem; 
    font-weight: 500; 
    color: #fff !important; 
    opacity: 1 !important; 
    display: flex !important;
    align-items: center;
    gap: 15px;
}
.nav-minimal .logo span {
    color: #fff !important;
    opacity: 1 !important;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 30px;
}

/* Dark Elements for Subpages (Visible on white/light backgrounds) */
.nav-dark-elements:not(.scrolled) .logo, 
.nav-dark-elements:not(.scrolled) .logo span, 
.nav-dark-elements:not(.scrolled) .back-link {
    color: #111 !important;
}

.nav-dark-elements:not(.scrolled) .hamburger-line {
    background-color: #111 !important;
}

.nav-dark-elements.scrolled .logo, 
.nav-dark-elements.scrolled .logo span, 
.nav-dark-elements.scrolled .back-link {
    color: #fff !important;
}

.nav-dark-elements.scrolled .hamburger-line {
    background-color: #fff !important;
}

.nav-dark-elements:not(.scrolled) .brand-icon {
    mix-blend-mode: multiply !important;
}

.nav-dark-elements.scrolled .brand-icon {
    mix-blend-mode: screen !important;
}

.hamburger, .nav-cta, .back-link {

    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s var(--transition-slow), visibility 0.8s var(--transition-slow);
}


.back-link {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 300;
    color: #fff;
    transition: transform 0.3s var(--transition-fast);
}

.back-link:hover {
    transform: translateX(-5px);
    color: var(--gold);
}

.back-link svg {
    transition: transform 0.3s;
}

@media (max-width: 900px) {
    .back-link span { display: none; } /* Only arrow on mobile to save space */
}



/* Hamburger (Improved Visibility for Desktop) */
.hamburger {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center lines within hitbox */
    gap: 7px;
    z-index: 1001;
    padding: 15px 5px; /* Added hitbox to prevent clipping from slim header */
    height: auto;
    transition: transform 0.3s;
}
.hamburger-line {
    width: 32px;
    height: 1.5px; /* Slightly thicker for premium visibility */
    background-color: var(--white);
    display: block;
    transition: transform 0.4s var(--transition-fast), width 0.4s var(--transition-fast);
}
.hamburger:hover .hamburger-line {
    background-color: var(--gold); /* Signal interaction state */
}
.hamburger:hover .hamburger-line:last-child {
    width: 20px;
}

/* Menu Overlay */
.menu-overlay {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #111111 !important; /* Unified Midnight Graphite */
    color: var(--white);
    z-index: 9999; 
    display: flex;
    flex-direction: column;
    padding: 60px 8vw; 
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Momentum scrolling for iOS */
    transition: top 0.8s var(--transition-slow);
}

.menu-overlay .logo, .menu-overlay .logo span {
    color: var(--white) !important;
}

.menu-overlay .menu-link {
    color: var(--white) !important;
}

.menu-overlay .menu-link:hover {
    color: var(--gold) !important;
}

.menu-overlay .menu-close {
    color: var(--white) !important;
}

.menu-bg {
    position: absolute;
    inset: 0;
    background: var(--black);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.2s var(--transition-slow);
}

.menu-container {
    min-height: 100%; /* Changed from height: 100% to allow content overflow */
    display: flex;
    flex-direction: column;
    gap: 10vh; /* Better spacing for very long menus */
}

/* Menu Top */
.menu-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5vh;
}
.menu-top .logo { color: var(--black); font-size: 1.8rem; }

.menu-top-right {
    display: flex;
    align-items: center;
    gap: 40px;
}

.search-container {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 5px;
}
.search-input {
    background: none;
    border: none;
    padding: 5px 10px;
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    width: 200px;
}
.search-btn {
    background: var(--black);
    border: none;
    cursor: pointer;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%; /* Rounded button */
    transition: background 0.3s;
}
.search-btn:hover {
    background: var(--gold);
}

.menu-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--black);
    transition: transform 0.4s var(--transition-fast);
}
.menu-close:hover {
    transform: rotate(90deg);
}

/* Menu Center */
.menu-center {
    flex: 1;
    display: flex;
    align-items: center;
}
.nav-large-links {
    list-style: none;
}
.nav-large-links li {
    margin-bottom: 12px; /* Tighter vertical spacing */
}
.menu-link {
    font-size: clamp(1.1rem, 2.5vw, 1.6rem); /* Refined, smaller size */
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 6px;
    position: relative;
    display: inline-block;
    transition: color 0.4s var(--transition-fast);
}
.menu-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--white);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.6s var(--transition-slow);
}
.menu-link:hover {
    color: var(--gold);
}
.menu-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Menu Bottom */
.menu-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding-top: 3vh; /* Reduced padding to fit screen */
    border-top: 1px solid rgba(255,255,255,0.05);
}

.menu-col h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    opacity: 0.5;
}
.menu-sub-links {
    list-style: none;
}
.menu-sub-links li {
    margin-bottom: 10px;
}
.menu-sub-links a {
    font-size: 0.95rem;
    font-weight: 300;
    transition: color 0.3s;
}
.menu-sub-links a:hover {
    color: var(--gold);
}

/* ─── 1. Hero Section ──────────────────────────────────── */

.hero-fullscreen {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background: #050505; /* Dark screen for cinematic start */
}

/* Wrapper clips the reveal */
.hero-bg-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    perspective: 1200px;
}

.hero-image-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* img element */
.hero-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.65) contrast(1.05); /* Restored original crisp elegant lighting */
    display: block;
    transform: scale(1);
    opacity: 0; /* Reset state */
    will-change: transform, opacity;
}

/* Dark gradient overlay */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.1) 0%,
        rgba(0,0,0,0.8) 100%
    );
    z-index: 1;
    opacity: 0; /* JS will fade this in */
}

/* Text container */
.hero-content {
    position: relative;
    z-index: 3;
    padding: 0 5vw;
}

.hero-heading {
    opacity: 0;
    transform: translateY(30px);
}

.hero-subheading {
    opacity: 0;
    transform: translateY(20px);
    margin-top: 2vh;
}

.hero-cta {
    opacity: 0;
    transform: translateY(20px);
    margin-top: 5vh;
}

.btn-outline-capsule {
    display: inline-block;
    padding: 18px 50px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50px;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 0.75rem;
    font-weight: 300;
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.btn-outline-capsule:hover {
    background: var(--white);
    color: var(--black);
    border-color: var(--white);
}

/* Scroll Indicator */
.scroll-indicator {
    display: none;
}

/* Floating Animation for Services */
@keyframes serviceFloat {
    0%   { transform: translateY(0px) scale(1); }
    50%  { transform: translateY(-15px) scale(1.01); }
    100% { transform: translateY(0px) scale(1); }
}

.floating-anim {
    animation: serviceFloat 5.5s ease-in-out infinite;
    transform-origin: center bottom;
    will-change: transform;
}

/* 2. Services Section */
.services-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5vw;
    margin-top: 5vh;
}


.service-minimal {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.service-img-wrapper {
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    position: relative;
    clip-path: inset(100% 0 0 0);
}
.service-img-wrapper img {
    /* Image Protection */
    pointer-events: none; /* Prevents dragging and some right-click actions */
    -webkit-user-drag: none;
    -webkit-touch-callout: none; /* Disables the long-press 'Save Image' menu on iOS */
    user-select: none;
    
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.service-hover-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.15);
    opacity: 0;
    transition: opacity 0.6s ease;
}
.service-minimal:hover .service-img-wrapper img { transform: scale(1.03); }
.service-minimal:hover .service-hover-overlay { opacity: 1; }

.service-text { padding-top: 20px; text-align: center; }
.service-text h3 { color: var(--black); font-size: 1.4rem; letter-spacing: 4px; margin-bottom: 8px; }
.service-text p { font-size: 0.9rem; color: rgba(0,0,0,0.6); letter-spacing: 1px; }

/* 3. Feature Showcase Section */
.showcase-split {
    display: flex;
    align-items: center;
    gap: 8vw;
    padding: 10vh 0;
}

.showcase-text { flex: 0.8; }
.showcase-text p { font-size: 1.2rem; letter-spacing: 1px; text-transform: uppercase; margin-top: 20px;}

.showcase-visual {
    flex: 1.2;
    aspect-ratio: 4/5;
    position: relative;
    overflow: hidden;
    clip-path: inset(0 0 0 100%); /* Right mask reveal */
}
.showcase-visual img {
    width: 100%; height: 120%; /* Extra height for parallax */
    object-fit: cover;
    top: -10%; position: absolute;
}

/* 4. Contact / Final Section */
.section-contact {
    padding: 20vh 0;
    position: relative;
    overflow: hidden;
}
.contact-title { font-size: clamp(3rem, 7vw, 6rem); line-height: 1.05; text-transform: none; font-family: 'Playfair Display', serif; font-style: italic; }

.contact-details { 
    margin-top: 10vh; 
    font-size: 1.25rem; 
    letter-spacing: 4px; 
    color: rgba(255,255,255,0.85); 
    text-align: center;
    width: 100%;
}
.contact-details p {
    margin-bottom: 25px;
    text-transform: lowercase;
}

/* Footer */
.footer-minimal { padding: 50px 0; font-size: 0.8rem; letter-spacing: 1px; color: rgba(255,255,255,0.4); text-transform: uppercase; }
.footer-flex { display: flex; justify-content: space-between; align-items: center; }
.footer-minimal .logo { font-size: 1.5rem; color: #fff; }
@media (max-width: 900px) {
    .footer-minimal { 
        text-align: center !important; 
        padding: 40px 20px !important; 
    }
    .footer-flex { 
        flex-direction: column !important; 
        gap: 30px !important; 
        align-items: center !important; 
        justify-content: center !important;
    }
    .footer-minimal .logo { 
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important; 
        align-items: center !important;
        gap: 10px !important; /* Reduced gap */
        margin-bottom: 20px !important;
        width: 100% !important;
        text-align: center !important;
    }
    .footer-minimal .logo span {
        white-space: nowrap !important;
        display: inline-block !important;
        letter-spacing: 3px !important; /* Reduced letter-spacing to prevent overflow */
        font-size: 1.2rem !important; /* Slightly smaller to fit mobile screens */
    }

    .footer-minimal p {
        width: 100% !important;
        text-align: center !important;
        line-height: 1.6 !important;
        margin-bottom: 25px !important;
    }
    .footer-developer {
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 25px !important;
    }
    .contact-details {
        margin-top: 5vh !important;
        font-size: 1rem !important;
        letter-spacing: 2px !important;
        padding: 0 20px !important;
    }
    .contact-details p {
        display: flex !important;
        flex-direction: column !important; /* Stack phone and email on mobile */
        gap: 15px !important;
        text-align: center !important;
        align-items: center !important;
    }
}

/* Initial GSAP States */
.hero-anim, .fade-stagger, .fade-slide-right, .fade-slide-up {
    opacity: 0;
}

/* Contact Background Image enhancements */
.contact-bg-wrapper {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
}
.contact-bg-wrapper img {
    width: 100%; height: 120%;
    object-fit: cover;
    top: -10%; position: absolute;
    filter: brightness(0.4);
}
.contact-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, var(--black), transparent);
}
.contact-content-relative {
    position: relative;
    z-index: 2;
}

/* Mobile Specific Adjustments */
@media (max-width: 768px) {
    .btn {
        padding: 12px 30px;
        font-size: 0.7rem; /* Smaller font on mobile */
        letter-spacing: 2px;
    }
    .btn-large {
        padding: 15px 40px;
        font-size: 0.85rem;
    }
    
    /* Header layout like NSIDE */
    .nav-minimal {
        padding: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }
    .nav-container {
        padding: 0 0 0 5vw;
        height: 70px;
    }
    .nav-minimal .logo {
        font-size: 1.1rem;
        letter-spacing: 2px;
    }
    .nav-cta {
        display: none; /* Hide on mobile to match the clean look */
    }
    .nav-right {
        height: 100%;
        gap: 0;
    }
    .hamburger {
        height: 100%;
        width: 70px;
        border-left: 1px solid rgba(255, 255, 255, 0.15);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
    }
    .hamburger-line {
        width: 24px;
        height: 1px;
    }
}

/* --- New Additions: Story & Portfolio --- */
.story-layout {
    display: flex;
    justify-content: space-between;
    gap: 8vw;
    align-items: center;
}
@media (max-width: 900px) {
    .story-layout { flex-direction: column; text-align: center; }
}
.story-left { flex: 1; }
.story-right { flex: 1; }
.story-right p { font-size: 1.15rem; line-height: 1.8; margin-bottom: 30px; }
.eyebrow { font-size: 0.8rem; letter-spacing: 4px; text-transform: uppercase; color: var(--gold, #888888); display: block; margin-bottom: 20px; font-weight: 500;}
.mt-4 { margin-top: 2rem; }
.mb-5 { margin-bottom: 3rem; }

/* --- Project Promo Section (Reference Match) --- */
.project-promo-section {
    position: relative;
    width: 100%;
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background);
    overflow: hidden;
}
.vertical-lines {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 15vw;
    z-index: 2;
    pointer-events: none;
}
.v-line {
    width: 1px;
    height: 100%;
    background: rgba(255,255,255,0.05);
}
.promo-bg {
    position: absolute;
    top: 10%; left: 0; right: 0; bottom: 10%;
    overflow: hidden;
    z-index: 1;
}
.promo-bg img {
    width: 100%; height: 120%;
    object-fit: cover;
    position: absolute; top: -10%; left: 0;
}
.promo-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.5);
}
.promo-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: var(--white);
    padding: 0 5vw;
}
.promo-title {
    font-size: clamp(2rem, 4vw, 4rem);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    text-transform: none;
    letter-spacing: -1px;
    margin-top: 10px;
}
.project-subnav {
    display: flex;
    justify-content: space-around;
    padding: 30px 10vw;
    border-bottom: 1px solid rgba(255,255,255,0.08); /* Clean modern bar */
    border-top: 1px solid rgba(255,255,255,0.08);
    background: var(--background);
}
.subnav-item {
    font-size: 0.8rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
}
.subnav-item:hover { color: var(--gold); }
.plus-icon { font-size: 1.2rem; font-weight: 300; }

@media(max-width: 900px) {
    .project-subnav { flex-direction: column; gap: 20px; align-items: center; padding: 30px 5vw; }
    .promo-bg { left: 0; right: 0; }
    .vertical-lines { padding: 0 5vw; }
}

/* --- Luxury Gallery Modal --- */
.gallery-modal {
    position: fixed;
    inset: 0;
    background: rgba(5,5,5,0.98);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
    backdrop-filter: blur(20px);
}
.gallery-modal.active {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
}
.gallery-close {
    position: absolute;
    top: 40px; right: 5vw;
    color: var(--white);
    cursor: pointer;
    z-index: 10;
    transition: transform 0.4s;
}
.gallery-close:hover { transform: rotate(90deg); color: var(--gold); }
.gallery-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10vh 5vw 5vh 5vw;
    overflow: hidden;
    position: relative; /* Ensure children can position absolutely */
}

.gallery-nav {
    position: absolute;
    top: 55%; /* Centered around the gallery items */
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    backdrop-filter: blur(10px);
}
.gallery-nav:hover {
    background: rgba(255,255,255,0.15);
    border-color: var(--gold);
    color: var(--gold);
}
.gallery-prev { left: 2vw; }
.gallery-next { right: 2vw; }

@media(max-width: 900px) {
    .gallery-nav { width: 50px; height: 50px; top: auto; bottom: 30px; }
    .gallery-prev { left: 5vw; }
    .gallery-next { right: 5vw; }
}
.gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 6vh;
}
.gallery-filters {
    display: flex;
    gap: 20px;
}
.filter-btn {
    background: none; border: none;
    color: var(--text-muted);
    font-size: 0.8rem; letter-spacing: 3px; text-transform: uppercase;
    cursor: pointer; padding-bottom: 5px;
    position: relative;
    transition: color 0.3s;
    flex-shrink: 0;
}
.filter-btn.active, .filter-btn:hover { color: var(--white); }
.filter-btn::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px;
    background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform 0.4s;
}
.filter-btn.active::after { transform: scaleX(1); transform-origin: left; }

.gallery-track {
    display: flex;
    gap: 0; /* Tight grid matching reference */
    overflow-x: auto;
    padding-bottom: 20px;
    scrollbar-width: none;
    align-items: center;
    height: 100%;
    will-change: scroll-position, transform;
    -webkit-overflow-scrolling: touch;
}
.gallery-track::-webkit-scrollbar { display: none; }

.gallery-item {
    flex: 0 0 30vw; 
    height: 65vh;
    display: flex;
    position: relative;
    cursor: grab;
    border-right: 1px solid rgba(255,255,255,0.15); /* Thin reference lines */
    animation: slowFloat 6s ease-in-out infinite;
}
.gallery-item:nth-child(odd) { animation-duration: 7.5s; animation-delay: -3s; }
.gallery-item:nth-child(3n) { animation-duration: 5.5s; animation-delay: -1.5s; }

@keyframes slowFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0); }
}

@keyframes ambientPan {
    0% { transform: scale(1.02) translate(0, 0); }
    100% { transform: scale(1.08) translate(-1%, 1.5%); }
}
.ambient-pan {
    animation: ambientPan 30s ease-in-out infinite alternate;
}

.gallery-item.hidden { display: none; }

.gallery-img-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.gallery-img-wrap img {
    /* Image Protection */
    pointer-events: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;

    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gallery-item:hover .gallery-img-wrap img {
    transform: scale(1);
}

.card-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.6); /* Deep overlay for text readability */
    transition: background 0.6s ease;
    z-index: 1;
}
.gallery-item:hover .card-overlay {
    background: rgba(0,0,0,0.3); /* Lightens up elegantly on hover */
}

.card-content {
    position: absolute; inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    text-align: center;
    color: var(--white);
}

.card-top {
    transform: translateY(15px);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gallery-item:hover .card-top { transform: translateY(0); }

.card-location {
    font-size: 0.65rem; letter-spacing: 5px; text-transform: uppercase; color: var(--text-muted);
    display: block; margin-bottom: 12px;
}
.card-title {
    font-size: 2rem; font-family: 'Inter', sans-serif; font-weight: 500; letter-spacing: -1px;
}

.card-view-btn {
    width: 90px; height: 90px;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto;
    font-size: 0.7rem; letter-spacing: 3px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    backdrop-filter: blur(25px);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 200;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lightbox-nav:hover {
    background: rgba(255,255,255,0.15);
    border-color: var(--gold);
    color: var(--gold);
}
.lightbox-prev { left: 4vw; }
.lightbox-next { right: 4vw; }

@media(max-width: 900px) {
    .lightbox-nav { width: 45px; height: 45px; }
}

.lightbox-portal.active {
    opacity: 1;
    pointer-events: auto;
}

.gallery-item:hover .card-view-btn {
    opacity: 1; transform: scale(1);
    background: rgba(255,255,255,0.05); /* Slight glass hover */
    border-color: rgba(255,255,255,0.9);
}

.card-bottom {
    font-size: 0.75rem; letter-spacing: 4px; color: var(--text-muted);
    transform: translateY(15px);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gallery-item:hover .card-bottom { transform: translateY(0); }

@media(max-width: 900px) {
    .gallery-header { flex-direction: column; align-items: flex-start; gap: 20px; }
    .gallery-filters { 
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 15px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    /* Mobile Tap Interaction: Show full image and trigger lightbox on first touch */
    .gallery-track {
        scroll-snap-type: x proximity; /* Proximity provides a smoother, less rigid swiping experience */
        -webkit-overflow-scrolling: touch; /* Essential for momentum-based smooth scrolling on iOS */
        scroll-behavior: smooth;
    }
    
    .gallery-item {
        flex: 0 0 85vw; /* Much wider for full image visibility */
        height: 75vh;   /* Taller for better impact on mobile */
        scroll-snap-align: center;
        border-right: none;
    }
    
    .card-view-btn {
        opacity: 1 !important; /* Always visible or visible on first tap? User said same as desktop. 
                                  But desktop shows on hover. On mobile, let's make it more present. 
                                  Actually, if 'touching itself' opens the lightbox, maybe keep it centered. */
        transform: scale(1) !important;
        width: 80px !important;
        height: 80px !important;
        background: rgba(255,255,255,0.15);
        border-color: rgba(255,255,255,0.8);
        font-size: 0.65rem !important;
        pointer-events: none; /* Let the gallery-item handle the click */
    }
    
    .card-overlay {
        background: rgba(0,0,0,0.4) !important; /* Slightly lighter on mobile */
    }
}

/* --- COMPREHENSIVE MOBILE OPTIMIZATION --- */
@media (max-width: 768px) {
    /* Global Overrides */
    body, html { overflow-x: hidden !important; width: 100%; max-width: 100vw; }
    .container { padding-left: 20px !important; padding-right: 20px !important; width: 100% !important; box-sizing: border-box; }
    h1 { font-size: 2.8rem !important; }
    h2 { font-size: 2.2rem !important; }
    p { font-size: 1rem !important; }
    
    /* Dynamic Navigation protection against text overlap */
    .nav-minimal {
        background: transparent;
        backdrop-filter: blur(0px);
        padding: 15px 0 !important;
    }
    .nav-large-links li a { font-size: 2rem !important; }

    /* About Page Mobile Fixes */
    .story-content-box {
        padding: 40px 25px !important;
        margin: 20px !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    
    /* Services Page Mobile Fixes */
    div[style*="flex-direction: row-reverse"] {
        flex-direction: column !important;
    }
    /* Any flex layout gap over 30 needs squishing */
    div[style*="display:flex; align-items:center; gap: 80px"] {
        flex-direction: column !important;
        gap: 30px !important;
    }
    /* Squish the grids */
    div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .img-3d-card {
        height: 250px !important;
        margin-bottom: 20px !important;
    }
    div[style*="min-width: 300px;"] {
        min-width: 100% !important;
    }
    
    /* Contact Page Mobile Fixes */
    #contact-form .container {
        padding-top: 5vh !important;
    }
    .contact-wrapper {
        flex-direction: column !important;
        margin: 15px !important;
        width: auto !important;
    }
    .form-col, .links-col {
        padding: 30px 20px !important;
        min-width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #f0f0f0;
        box-sizing: border-box;
    }
    .luxury-form > div {
        flex-direction: column !important;
        gap: 15px !important;
    }
}

/* --- GLOBAL BACKGROUND GLASSMORPHISM --- */
.bg-black {
    background: rgba(10, 10, 10, 0.6) !important;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-top: 1px solid rgba(255,255,255,0.05);
}
.bg-beige {
    background: rgba(240, 235, 230, 0.75) !important;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-top: 1px solid rgba(255,255,255,0.4);
}
/* Ensure the body doesn't block the fixed bg */
body {
    background: transparent !important;
}

/* --- CINEMATIC INTRO STYLES --- */
.intro-branding-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: var(--black);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Allow scroll through once animated */
    overflow: hidden;
}

/* Restored introductory background asset with high-blur for cleaning */
.intro-bg-blur {
    position: absolute;
    inset: 0;
    background-image: url('assets/intro_blur_bg.png');
    background-size: cover;
    background-position: center;
    filter: blur(100px); /* Increased to 100px to effectively remove asset-level noise/particles */
    opacity: 0.55; /* Refined opacity for cinematic depth */
    transform: scale(1.2); /* Ensure no edge bleed with high blur */
    pointer-events: none;
    z-index: 1;
}

.intro-logo-wrap {
    position: relative; 
    z-index: 10; 
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    will-change: transform, opacity;
}

.intro-logo-text {
    font-family: 'Inter', sans-serif;
    font-weight: 300; /* Slightly thicker to avoid 'particle' text appearance */
    letter-spacing: 18px; /* Slightly tighter for a cleaner look */
    font-size: 2.2rem;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Hide background contrast noise */
}

.nav-minimal {
    opacity: 1; /* Keep nav controls visible */
    transition: opacity 0.8s ease;
}

.nav-minimal .logo {
    opacity: 1; /* PERSISTENT BRANDING: Anchor the identity in top-left */
    transition: opacity 0.6s ease;
}

.nav-minimal .logo.visible {
    opacity: 1;
}

/* ─── 1.5 Scroll-Driven Luxury Showcase (New) ───────────────── */

.scroll-story-section {
    position: relative;
    height: 600vh; /* More height for sequential scroll */
    background: #0d110f; 
}

.scroll-sticky-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, #1a2a22 0%, #0d110f 100%);
}

/* Premium Pastel Ambient Background */
.scroll-story-ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.ambient-glow {
    position: absolute;
    width: 70vw;
    height: 70vw;
    border-radius: 100%;
    filter: blur(160px);
    opacity: 0; /* REMOVED: Users see these as 'particles' */
    mix-blend-mode: soft-light;
    will-change: transform;
}

.glow-1 {
    top: -10%;
    left: -10%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%); /* Soft Platinum */
}

.glow-2 {
    bottom: -15%;
    right: -10%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%); /* Dim White */
}

.nav-minimal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5000;
    background: transparent !important;
    display: flex;
    flex-direction: column;
}

.nav-minimal .logo, .nav-minimal .logo span {
    color: var(--white) !important; /* Restore White for Chocolate contrast */
}

/* Restore Logo Img for Dark Chocolate */
.brand-icon {
    filter: none; 
}

.hamburger-line {
    background-color: var(--white) !important; /* Restore White Lines */
}

.nav-container {
    padding: 0 10px !important; /* Absolute Edge Fringe Activation */
    min-height: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.nav-minimal .brand-icon {
    width: 60px; /* Bolder size for impact */
    height: 60px;
    margin-right: 6px;
}

.logo span {
    font-size: 1.5rem; /* Bolder size for impact */
    letter-spacing: 5px;
    font-weight: 300;
}

.glow-3 {
    top: 30%;
    left: 40%;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
}
/* Grainy Noise Removed for clarity */

.scroll-cards-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    perspective: 1200px; /* Enhanced Depth */
    z-index: 10;
}

.scroll-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(280px, 20vw, 400px);
    height: clamp(400px, 30vw, 580px);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.8);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    will-change: transform, opacity, filter;
    transform: translate(-50%, -50%); /* Initial center position */
    z-index: 1;
}

#lightbox-img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    
    /* Image Protection */
    pointer-events: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
}

.scroll-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(1.05) contrast(0.95); /* Softer aesthetic for light theme */
    transition: transform 0.8s var(--transition-slow);
}

.scroll-card:hover img {
    transform: scale(1.03);
}

/* Card Specific (Z-index layering - Central is top) */
/* Sequential Card Handling via JS */

/* Subtle Sheen & Bottom Shadow for improved text legibility */
.scroll-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
    pointer-events: none;
    z-index: 5;
}
.scroll-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
    pointer-events: none;
    z-index: 6;
}

@media (max-width: 1024px) {
    .scroll-card {
        width: 160px;
        height: 260px;
        border-radius: 15px;
    }
}

.scroll-indicators {
    position: absolute;
    bottom: 5vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 100;
}

.indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.4s ease;
}

.indicator.active {
    background: var(--white);
    transform: scale(1.5);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.card-label {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--white);
    z-index: 10;
    opacity: 0.8;
}


/* --- NEW SECTIONS COMPONENT SYSTEM --- */

/* 1. Statistics Section */
.stats-section {
    padding: 12vh 0;
    background: linear-gradient(to bottom, #0d0d0d 0%, #1a1a1a 50%, #0d0d0d 100%);
    border-top: 1px solid rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px; /* Minimized gap for mobile fit */
}

.stat-item {
    text-align: center;
    border-left: 1px solid rgba(255,255,255,0.05);
    padding-left: 20px;
}

/* Fluid Typography for 4-column Mobile Stats */
.stat-number {
    font-size: clamp(1rem, 4.5vw, 3.5rem);
    font-weight: 200;
    letter-spacing: -2px;
    display: block;
    margin-bottom: 5px;
}

.stat-label {
    font-size: clamp(0.5rem, 1.8vw, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--text-muted);
}

/* Removed mobile stack to ensure layout remains same as desktop */

/* 2. Partner Scroller (Infinite Loop) */
.partners-section {
    padding: 80px 0;
    background: var(--black);
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.02);
}

.partners-track {
    display: flex;
    white-space: nowrap;
    animation: scrollInfinite 60s linear infinite;
    gap: 100px;
    align-items: center;
    width: max-content;
}

.partner-item {
    display: flex;
    align-items: center;
    gap: 15px; /* Tighter gap */
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    font-weight: 300;
}

.partner-logo {
    height: 35px; /* Slightly larger for better clarity */
    width: auto;
    max-width: 130px;
    object-fit: contain;
    filter: none; /* Permanent clarity as requested */
    transition: all 0.4s ease;
}

.partner-item:hover .partner-logo {
    transform: scale(1.1);
}

.partner-item svg {
    width: 24px;
    height: 24px;
    margin-right: 15px;
    opacity: 0.65;
    transition: all 0.3s ease;
    color: var(--white);
}

.partner-item:hover svg {
    opacity: 1;
    transform: scale(1.1);
}

@keyframes scrollInfinite {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* 3. Project Promo Section (Fixed White Gaps) */
.project-promo-header {
    margin-top: -1px; /* Ensure no sub-pixel gaps */
}

.project-promo-section {
    position: relative;
    width: 100%;
    min-height: 85vh; /* Larger coverage to eliminate white gaps */
    height: auto;
    overflow: hidden;
    background: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.promo-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ESSENTIAL: Covers all white space in the container */
    filter: brightness(0.65); /* Maintain luxury dark tone */
}

.promo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, 
        rgba(13, 17, 15, 0.4) 0%, 
        transparent 50%, 
        rgba(0,0,0,0.6) 100%);
    z-index: 2;
}

.promo-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 0 20px;
    max-width: 800px;
}

.promo-title {
    font-size: clamp(2.5rem, 8vw, 5.5rem);
    font-weight: 300;
    line-height: 1.1;
    margin-bottom: 40px;
    color: var(--white);
}

.project-subnav.quote-container {
    display: flex;
    justify-content: center;
    padding: 30px 20px;
    background: #0d110f;
    border-top: 1px solid rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.quote-centered {
    font-family: 'Bodoni Moda', serif;
    font-style: italic;
    font-size: clamp(0.7rem, 2.5vw, 1rem);
    text-transform: uppercase;
    letter-spacing: 15px; /* Maximum luxury tracking */
    color: rgba(255,255,255,0.7);
    text-align: center;
    padding: 0 5vw;
    line-height: 2;
}

/* 4. Social Media Section */

.social-links {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 30px;
}

.social-icon {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--text-muted);
    transition: all 0.4s var(--transition-fast);
    position: relative;
}

.social-icon::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--white);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s var(--transition-slow);
}

.social-icon:hover { color: var(--white); }
.social-icon:hover::after { transform: scaleX(1); transform-origin: left; }

/* 4. WhatsApp & Download Buttons */
.whatsapp-btn, .dl-floating-btn {
    position: fixed;
    bottom: 30px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    transition: all 0.4s var(--transition-fast);
}

.dl-label {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    opacity: 0.7;
    white-space: nowrap;
    pointer-events: none;
    font-weight: 500;
}

.dl-floating-btn:hover .dl-label {
    opacity: 1;
    transform: translateX(-50%) translateY(-3px);
}

.whatsapp-btn {
    right: 30px;
    background: #25D366; /* Original WhatsApp Brand Color */
}

.dl-floating-btn {
    right: 100px; /* Positioned next to WhatsApp */
    background: #222222; /* Monochrome Brochure button */
    border: 1px solid rgba(255,255,255,0.1);
}

.whatsapp-btn svg, .dl-floating-btn svg { width: 28px; height: 28px; fill: white; }
.whatsapp-btn:hover, .dl-floating-btn:hover { transform: scale(1.1); filter: brightness(1.1); }

@media (max-width: 600px) {
    .whatsapp-btn { bottom: 20px; right: 20px; width: 50px; height: 50px; }
    .dl-floating-btn { bottom: 20px; right: 80px; width: 50px; height: 50px; }
}

/* 5. Careers Page / Form styles */
.careers-hero {
    padding: 25vh 0 10vh;
    text-align: center;
}

.form-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 4px;
}

.luxury-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-group.full-width { grid-column: span 2; }

.form-group label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
}

.form-group input, 
.form-group select, 
.form-group textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 12px 0;
    color: var(--white);
    font-family: inherit;
    font-size: 0.9rem;
    transition: border-color 0.4s;
    outline: none;
}

.form-group input:focus, 
.form-group textarea:focus {
    border-bottom-color: var(--white);
}

.file-upload {
    position: relative;
    padding: 30px;
    border: 1px dashed rgba(255,255,255,0.1);
    text-align: center;
    cursor: pointer;
    transition: all 0.4s;
}

.file-upload:hover { border-color: var(--white); background: rgba(255,255,255,0.02); }

@media (max-width: 768px) {
    .luxury-form { grid-template-columns: 1fr; }
    .form-group.full-width { grid-column: span 1; }
    .form-container { padding: 30px 20px; }
}

/* --- CONSOLIDATED RESPONSIVE OVERRIDES (Cascade Top Priority) --- */
@media (max-width: 900px) {
    .nav-minimal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 60px !important;
        background: transparent !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(136, 136, 136, 0.4) !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 10000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        overflow: hidden !important; /* Prevent expansion */
    }
    .nav-minimal .logo {
        margin-left: 5px !important; /* Ultimate left-corner anchor */
        display: flex !important;
        align-items: center !important;
    }
    .hamburger {
        width: 28px !important;
        height: 18px !important;
        background: transparent !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
        border: none !important;
        margin-right: 15px !important; /* Balanced on right fringe */
        z-index: 10001 !important;
    }
    .hamburger-line {
        display: block !important;
        width: 100% !important;
        height: 1px !important; /* Ultimate sharp luxury lines */
        background: #ffffff !important;
        transition: 0.3s ease !important;
    }
    .nav-minimal .brand-icon {
        width: 32px !important;
        height: 32px !important;
        margin-right: -2px !important; /* Forces tighter overlap */
    }
    .nav-minimal .logo span {
        font-size: 0.8rem !important;
        letter-spacing: 2px !important;
        margin-left: 2px !important; /* Absolute minimal gap */
        display: block !important;
        white-space: nowrap !important;
    }
    .nav-cta { 
        margin-left: auto !important;
        margin-right: 15px !important;
        display: flex !important;
        align-items: center !important;
    }
    .nav-cta .btn-outline {
        padding: 4px 8px !important;
        font-size: 0.6rem !important;
        letter-spacing: 1.5px !important;
        border-radius: 4px !important;
        line-height: 1 !important;
    }
    .menu-overlay {
        background-color: #111111 !important; /* Midnight Graphite */
        color: var(--white) !important;
        padding: 50px 30px;
    }
    .nav-minimal .brand-icon {
        width: 45px !important;
        height: 45px !important;
    }
    .menu-top {
        padding: 0 !important;
        margin-bottom: 35px !important;
        display: grid !important;
        grid-template-columns: 1fr 45px !important; /* Physically lock exit utility area */
        align-items: center !important;
        width: 100% !important;
        position: relative !important;
    }
    .menu-top .logo { 
        font-size: 0.5rem !important; 
        margin-left: 0 !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
    }
    .menu-top .logo span { margin-left: 2px !important; letter-spacing: 0 !important; }
    .menu-top .brand-icon { width: 35px !important; height: 35px !important; margin-right: 2px !important; }
    .menu-top-right { display: flex !important; justify-content: flex-end !important; }
    .menu-close {
        position: relative !important;
        padding: 5px !important;
        z-index: 20001 !important;
    }
    .menu-close svg { 
        width: 32px !important; 
        height: 32px !important; 
        stroke: #ffffff !important;
    }
    .search-container { display: none !important; } /* Simplify mobile menu */
    .menu-overlay {
        display: none; /* Forced initial state */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important; /* Use 100% for mobile address bar compatibility */
        background-color: #111111 !important;
        padding: 80px 20px 80px 20px !important; /* Balanced padding including bottom */
        overflow-y: auto !important; /* Native vertical scroll */
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important; /* Momentum scrolling */
        overscroll-behavior: contain !important;
        z-index: 20000 !important;
    }
    .menu-overlay.active {
        display: block !important; 
    }
    .menu-container {
        display: block !important;
        width: 100% !important;
        height: auto !important; /* Allow height to be determined by content */
        min-height: 100% !important;
        padding-bottom: 150px !important; /* Robust clearance for bottom navigation */
    }
    .nav-large-links {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* Left Alignment fringe anchor */
        text-align: left !important;
    }
    .nav-large-links li { margin: 10px 0 !important; text-align: left !important; }
    .nav-large-links li a {
        font-size: 1.8rem !important;
        letter-spacing: 1px !important;
        text-align: left !important;
    }
    .menu-bottom {
        display: flex !important;
        flex-direction: column !important; /* Force single column stacking */
        align-items: flex-start !important; 
        text-align: left !important;
        gap: 40px !important;
        width: 100% !important;
        margin-top: 50px !important;
    }
    .menu-col { text-align: left !important; }
    .menu-col h4 { font-size: 0.7rem !important; margin-bottom: 10px !important; text-align: left !important; }
    .menu-sub-links li { margin-bottom: 5px !important; text-align: left !important; }
    .menu-sub-links li a { font-size: 0.8rem !important; text-align: left !important; }
    .quote-centered {
        letter-spacing: 6px !important; 
        font-size: 0.7rem !important;
        line-height: 1.6;
        text-align: left !important; /* Anchored to left */
    }
    
    .stats-grid {
        grid-template-columns: 1fr !important; /* Stack vertically for clarity */
        gap: 40px;
    }
    .stat-item {
        border-left: none;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        padding: 0 0 25px 0;
    }
    .stat-item:last-child {
        border-bottom: none;
    }
    .services-grid-3 {
        grid-template-columns: 1fr !important; /* Forces Vertical: Design, Build, Maintain */
        gap: 60px;
    }
    .showcase-split {
        flex-direction: column !important; 
        text-align: center;
    }
    .container {
        padding: 0 20px !important;
    }
    
    /* Reveal Masks Mobile Optimization */
    .reveal-mask {
        clip-path: none;
        -webkit-clip-path: none;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1.2s ease, transform 1.2s ease;
    }
    .reveal-mask.gsap-revealed {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Luxury Custom Section --- */
.luxury-section {
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #1a1a1a, #050505);
    text-align: center;
    padding: 0 20px;
}

.luxury-content h2 {
    color: #ffffff;
    font-size: 26px;
    letter-spacing: 6px;
    font-weight: 300;
    margin-bottom: 20px;
}

.luxury-content p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    max-width: 500px;
    margin: auto;
    line-height: 1.8;
}

.luxury-btn {
    display: inline-block;
    margin-top: 30px;
    padding: 10px 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 3px;
    font-size: 12px;
    transition: 0.3s ease;
}

.luxury-btn:hover {
    background: #ffffff;
    color: #000;
}

/* --- Lightbox Styles --- */
.lightbox-portal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    backdrop-filter: blur(15px);
}
.lightbox-portal.active {
    display: flex;
    opacity: 1;
}
.lightbox-content {
    max-width: 90vw;
    max-height: 85vh;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lightbox-portal.active .lightbox-content {
    transform: scale(1);
}
.lightbox-content img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
}
.lightbox-close {
    position: fixed;
    top: 40px;
    right: 40px;
    color: #fff;
    cursor: pointer;
    z-index: 100001;
    transition: transform 0.3s ease;
}
.lightbox-close:hover {
    transform: scale(1.1) rotate(90deg);
}