/* ==========================================================================
   HIGH-CONTRAST EDITORIAL BRUTALIST RESET & TYPOGRAPHY SYSTEM
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-style: normal !important;
}

:root {
    --black: #000000;
    --white: #FFFFFF;
    --grey-text: #888888;
    --grey-light: #666666;
    
    --font-title: 'Anton', sans-serif;
    --font-subtitle: 'Oswald', sans-serif;
    --font-body: 'Inter', -apple-system, sans-serif;
}

html { background-color: var(--black); font-family: var(--font-body); scroll-behavior: smooth; }
body { overflow-x: hidden; font-weight: 300; }

.bg-black { background-color: var(--black); }
.text-white { color: var(--white); }
.text-black { color: var(--black); }
.text-right { text-align: right; }
.mt-medium { margin-top: clamp(30px, 5vw, 60px); }

/* ==========================================================================
   VISUAL ENTRANCE ENGINES
   ========================================================================== */
@keyframes nativeFadeDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nativeFadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

.fade-down-element { opacity: 0; animation: nativeFadeDown 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: calc(var(--delay) * 0.15s); }
.text-fade-up { opacity: 0; animation: nativeFadeUp 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: calc(var(--delay) * 0.15s); }

/* UNIVERSAL PARALLAX WRAPPER */
.js-text-parallax { will-change: transform; display: inline-block; width: 100%; }

/* ==========================================================================
   MASTER TITLES SYSTEM
   ========================================================================== */
.unified-massive-title, .main-title, .big-year, .cap-left, .proj-massive-title {
    font-family: var(--font-title); font-weight: 900; text-transform: uppercase;
}
.unified-massive-title { font-size: clamp(2.6rem, 6.2vw, 6rem); line-height: 0.88; letter-spacing: -0.02em; }

/* ==========================================================================
   HEADER SYSTEM
   ========================================================================== */
.main-header.header-left-aligned {
    position: fixed; top: 0; left: 0; width: auto; height: auto; display: flex; flex-direction: column; 
    align-items: flex-start; padding: 40px 0 0 4%; z-index: 999; mix-blend-mode: difference; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.logo a { font-family: var(--font-title); color: var(--white); text-decoration: none; font-weight: 900; font-size: 1.8rem; letter-spacing: -0.8px; display: block; }
.header-divider { width: 30px; height: 0; border-top: 1px solid rgba(255, 255, 255, 0); margin: 0; transition: all 0.35s ease; }
.main-nav-list { margin-top: 30px; transition: opacity 0.3s ease; }
.main-nav-list ul { list-style: none; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.main-nav-list a { font-family: var(--font-subtitle); color: var(--white); text-decoration: none; font-size: 0.85rem; font-weight: 500; letter-spacing: 2px; transition: opacity 0.3s ease; }
.main-nav-list a:hover { opacity: 0.5; }

.menu-toggle-btn {
    display: none; background: transparent; border: none; cursor: pointer; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px;
    width: 42px; height: 42px; z-index: 1000; opacity: 0; transition: opacity 0.35s ease;
}
.menu-toggle-btn .bar { display: block; width: 30px; height: 2px; background-color: var(--white); }
.main-header.header-left-aligned.is-sticky { padding-top: 30px; }
.main-header.header-left-aligned.is-sticky .main-nav-list { display: none; }
.main-header.header-left-aligned.is-sticky .header-divider { height: 1px; margin: 15px 0 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.7); }
.main-header.header-left-aligned.is-sticky .menu-toggle-btn { display: flex; opacity: 1; }

.menu-fullscreen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.8); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); z-index: 9999;
    display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.main-header.menu-open .menu-fullscreen { opacity: 1; pointer-events: auto; }
.main-header.menu-open { mix-blend-mode: normal !important; }
.fullscreen-nav-list ul { list-style: none; text-align: center; display: flex; flex-direction: column; gap: 40px; }
.fullscreen-nav-list a { font-family: var(--font-title); color: #ffffff !important; text-decoration: none; font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 900; letter-spacing: -1px; transition: opacity 0.3s ease; display: inline-block; }
.fullscreen-nav-list a:hover { opacity: 0.4; }
.menu-close-btn { position: absolute; bottom: 60px; background: transparent; border: none; color: #ffffff !important; font-size: 4rem; font-weight: 200; cursor: pointer; line-height: 1; transition: transform 0.3s ease, opacity 0.3s ease; }
.menu-close-btn:hover { opacity: 0.5; transform: rotate(90deg); }

/* ==========================================================================
   HERO / HOME
   ========================================================================== */
.slideshow-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; }
.slideshow-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--black); opacity: 0.6; z-index: 3; }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; z-index: 2; transform: scale(1.01); transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform, opacity; }
.slide.active-slide { opacity: 1; transform: scale(1.04); transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1), transform 7s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.slide-video { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }

.hero-section { height: 100vh; width: 100%; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 4%; overflow: hidden; }
.hero-container { display: flex; justify-content: space-between; align-items: flex-end; flex-grow: 1; padding-bottom: 6vh; position: relative; z-index: 10; }
.main-title { font-size: clamp(3.2rem, 8.5vw, 7.5rem); line-height: 0.82; letter-spacing: -0.04em; }
.big-year { font-size: clamp(2.8rem, 6vw, 5.5rem); line-height: 0.9; }
.hero-footer { display: flex; justify-content: space-between; align-items: flex-end; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 25px; position: relative; z-index: 12; }
.hero-footer-left p { font-family: var(--font-subtitle); font-size: 0.85rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }
.hero-footer-left .text-muted { color: var(--grey-text); font-weight: 400; margin-top: 3px; }

/* ==========================================================================
   PHILOSOPHY & MANIFESTO
   ========================================================================== */
.philosophy-section { padding: calc(clamp(80px, 12vw, 160px) * 1.5) 4% calc(clamp(80px, 12vw, 160px) * 1.3) 4%; background-color: var(--black); position: relative; z-index: 20; }
.split-layout { display: flex; width: 100%; }
.col-left { width: 25%; }
.col-right { width: 75%; padding-right: 8%; }

.section-tag, .contact-mini-tag, .proj-category { font-family: var(--font-subtitle); font-size: 0.85rem; font-weight: 500; color: var(--grey-light); letter-spacing: 2px; text-transform: uppercase; }
.philosophy-highlight { font-family: var(--font-body); font-size: clamp(1.8rem, 3.8vw, 3.2rem); font-weight: 400; line-height: 1.15; margin-bottom: 45px; letter-spacing: -0.03em; }
.philosophy-text { font-family: var(--font-body); font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 200; color: var(--grey-text); line-height: 1.65; max-width: 850px; }

.why-here-section-block { background-color: var(--white); padding: clamp(160px, 20vw, 260px) 6%; position: relative; z-index: 22; }
.why-here-stack-container { display: flex; flex-direction: column; width: 100%; max-width: 1200px; margin: 0 auto; gap: clamp(50px, 7vw, 90px); }

.js-word-reveal span { opacity: 0.1; display: inline-block; transition: opacity 0.4s ease; transition-delay: calc(var(--word-index) * 0.08s); }
.js-word-reveal span.word-in { opacity: 1; color: var(--black); }

.why-here-content-row { width: 100%; }
.why-here-manifesto-body { font-family: var(--font-body); font-size: clamp(1.3rem, 2.4vw, 2rem); color: #111111; line-height: 1.5; font-weight: 300; text-align: left; letter-spacing: -0.02em; }
.why-here-manifesto-body span { opacity: 0.15; display: inline-block; transform: translateY(5px); transition: opacity 0.5s ease, transform 0.5s ease; transition-delay: calc(var(--caption-index) * 0.04s); }
.why-here-manifesto-body span.caption-in { opacity: 1; transform: translateY(0); color: var(--black); }

/* ==========================================================================
   IMMERSIVE FULLSCREEN SELECTED WORK (STICKY STACK)
   ========================================================================== */
.immersive-work-section {
    position: relative;
    background-color: var(--black);
    z-index: 20;
}

.work-sticky-intro {
    padding: clamp(150px, 15vw, 250px) 4% clamp(100px, 10vw, 150px) 4%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    background-color: var(--black);
    position: relative; z-index: 5;
}
.work-header-line { display: flex; justify-content: space-between; align-items: center; }

/* The Sticky Engine */
.sticky-project-panel {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--black);
}

.project-bg-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    filter: grayscale(100%) brightness(0.35);
    transform: scale(1);
    transition: filter 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

.sticky-project-panel:hover .project-bg-layer {
    filter: grayscale(0%) brightness(0.65);
    transform: scale(1.05);
}

.project-content-layer {
    position: relative; z-index: 2; text-align: center; width: 100%; padding: 0 4%;
}

.project-data {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.proj-massive-title {
    font-size: clamp(4rem, 10vw, 9rem); line-height: 0.85; letter-spacing: -0.04em;
    margin: 20px 0; color: var(--white);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.proj-services {
    font-family: var(--font-subtitle); font-size: 1rem; color: #cccccc; font-weight: 400; 
    letter-spacing: 3px; text-transform: uppercase; margin-bottom: 40px;
}

.immersive-action-btn {
    font-family: var(--font-subtitle); background-color: transparent; color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.3); padding: 15px 40px; font-size: 0.9rem; 
    letter-spacing: 2px; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase;
    backdrop-filter: blur(5px);
}
.immersive-action-btn:hover {
    background-color: var(--white); color: var(--black); border-color: var(--white);
}

/* FULLSCREEN MODAL VIEWER */
.fullscreen-viewer-modal {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--black);
    z-index: 10000; display: flex; flex-direction: column; opacity: 0; pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.fullscreen-viewer-modal.is-open { opacity: 1; pointer-events: auto; }
.fullscreen-viewer-modal iframe { width: 100%; height: 100%; background-color: #050505; }
.modal-close-btn {
    position: absolute; top: 30px; right: 4%; width: 50px; height: 50px; background-color: var(--white);
    color: var(--black); font-size: 2.5rem; font-weight: 300; line-height: 1; display: flex; 
    justify-content: center; align-items: center; border: none; cursor: pointer; border-radius: 50%;
    z-index: 10001; transition: transform 0.3s ease;
}
.modal-close-btn:hover { transform: scale(1.1) rotate(90deg); }

/* ==========================================================================
   EXPERTISE SYSTEMS
   ========================================================================== */
.capabilities-section { background-color: var(--black); position: relative; z-index: 20; }
.capabilities-grid-list { display: flex; flex-direction: column; width: 100%; }
.cap-toggle-group { display: flex; flex-direction: column; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.capabilities-row { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 90px 4%; background-color: var(--black); color: var(--white); cursor: pointer; transition: background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.5s cubic-bezier(0.16, 1, 0.3, 1), padding 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.cap-left { font-size: clamp(1.8rem, 3.8vw, 3.4rem); letter-spacing: -0.04em; transition: transform 0.5s ease; }
.cap-right { font-family: var(--font-subtitle); font-size: 0.95rem; color: var(--grey-text); font-weight: 500; letter-spacing: 2px; transition: color 0.5s ease; }
.capabilities-row:hover, .cap-toggle-group.pane-active .capabilities-row { background-color: var(--white) !important; color: var(--black) !important; padding-top: 110px !important; padding-bottom: 110px !important; justify-content: center !important; }
.capabilities-row:hover .cap-left, .cap-toggle-group.pane-active .capabilities-row .cap-left { transform: scale(1.03); }
.capabilities-row:hover .cap-right, .cap-toggle-group.pane-active .capabilities-row .cap-right { display: none; }
.cap-drawer-pane { width: 100%; height: 0; background-color: var(--white); overflow: hidden; transition: height 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
.cap-drawer-content { padding: 0 15% 60px 15%; text-align: center; background-color: var(--white); color: var(--black); }
.cap-drawer-content p { font-family: var(--font-body); font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 300; line-height: 1.6; max-width: 900px; margin: 0 auto; }
.cap-toggle-group.pane-active .cap-drawer-pane { height: auto; }

/* ==========================================================================
   CONTACT SECTION
   ========================================================================== */
.contact-section { background-color: var(--white); color: var(--black); padding: 140px 4% 40px 4%; position: relative; z-index: 20; }
.contact-container { display: flex; width: 100%; }
.contact-left { width: 50%; }
.contact-right { width: 50%; padding-left: 6%; }
.contact-mini-tag { display: block; margin-bottom: 18px; }
.contact-links-list { list-style: none; }
.contact-links-list li { margin-bottom: 10px; }
.contact-links-list a { font-family: var(--font-title); color: var(--black); text-decoration: none; font-size: 1.6rem; font-weight: 700; border-bottom: 2px solid var(--black); padding-bottom: 2px; display: inline-block; text-transform: uppercase; }
.location-text { font-family: var(--font-title); font-size: 1.6rem; font-weight: 700; text-transform: uppercase; }

.contact-form { width: 100%; }
.input-group { display: flex; flex-direction: column; margin-bottom: 35px; border-bottom: 2px solid var(--black); }
.input-group label { font-family: var(--font-subtitle); font-size: 0.85rem; color: var(--grey-light); font-weight: 500; letter-spacing: 2px; margin-bottom: 5px; text-transform: uppercase; }
.input-group input { background: transparent; border: none; outline: none; font-size: 1.25rem; font-weight: 400; padding: 8px 0; color: var(--black); font-family: var(--font-body); }
.btn-send { font-family: var(--font-subtitle); background-color: var(--black); color: var(--white); border: none; padding: 18px 40px; font-size: 1rem; font-weight: 500; letter-spacing: 2px; cursor: pointer; margin-top: 15px; transition: opacity 0.2s ease; text-transform: uppercase; }
.btn-send:hover { opacity: 0.85; }

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 900px) {
    .main-header.header-left-aligned { position: fixed; padding: 20px 0 0 20px; }
    .main-header.header-left-aligned .main-nav-list { display: none; }
    .main-header.header-left-aligned .header-divider { border-top: 1px solid rgba(255, 255, 255, 0.7); margin: 10px 0 5px 0; }
    .main-header.header-left-aligned .menu-toggle-btn { display: flex; opacity: 1; }
    .hero-section { height: auto; min-height: 100vh; padding-top: 100px; }
    .hero-container { flex-direction: column; align-items: flex-start; gap: 30px; }
    .split-layout, .why-here-stack-container, .contact-container { flex-direction: column !important; height: auto; }
    .col-left, .col-right, .contact-left, .contact-right { width: 100% !important; padding-left: 0 !important; }
    .capabilities-row { flex-direction: column; align-items: center !important; padding: 50px 4% !important; }
    .capabilities-row:hover, .cap-toggle-group.pane-active .capabilities-row { padding-top: 60px !important; padding-bottom: 60px !important; }
    .cap-drawer-content { padding: 0 4% 40px 4%; }
    .contact-right { margin-top: 60px; }
}