@font-face {
    font-family: rejo;
    src: url(./fonts/Rejouice-Headline.ttf);
    font-display: swap;
}
@font-face {
    font-family: nb;
    src: url(./fonts/NBInternationalProBoo.ttf);
    font-display: swap;
}
/* ===( CODE AASHU )=== */
/* ===== UNIVERSAL DEVICE OPTIMIZATION ===== */
/* Supports: iPhone, iPad, Android, Windows, macOS, all screen sizes */

/* Skip to main content link for accessibility */
.skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 100000;
    padding: 12px 24px;
    background: #f53607;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Focus visible styles for keyboard navigation */
:focus-visible {
    outline: 2px solid #f53607;
    outline-offset: 2px;
}

::selection {
    color: #f53607;
}

* {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    font-family: nb;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Prevent text size adjustment on orientation change */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Smooth scrolling for all devices */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Safe area support for iPhone X+ and modern devices with notches */
:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
}

a {
    color: #cfcfcf;
    text-decoration: none;
    /* Better touch response */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

html,
body {
    height: 100%;
    width: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    /* Support for safe areas on iPhones */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Desktop: Lock overflow for Locomotive Scroll */
@media (min-width: 769px) {
    html,
    body {
        overflow: hidden;
        overscroll-behavior: none;
    }
}

/* Mobile: Allow native scrolling */
@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100%;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }
}

body.services {
    background: #fff;
    color: #141414;
}

/* Ensure immediate native scrolling on phone/tablet for key internal pages */
@media (max-width: 768px) {
    /* Force enable scroll on html - no conditions */
    html {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100% !important;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Force enable scroll on body - only lock when overlay is active */
    body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100% !important;
        position: relative !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
    }
    
    /* Lock scroll ONLY when these specific states are active */
    body.loader-active,
    body.modal-open,
    body.showreel-open,
    body.menu-active {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        touch-action: none !important;
    }

    /* Main container - must allow content to flow */
    .main,
    main.main,
    #main-content.main {
        overflow: visible !important;
        height: auto !important;
        min-height: 100% !important;
        transform: none !important;
        position: relative !important;
    }

    /* Emergency mobile scroll recovery class toggled via compat.js */
    html.mobile-scroll-unlocked,
    body.mobile-scroll-unlocked {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100%;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overscroll-behavior-y: auto !important;
    }

    body.mobile-scroll-unlocked .main {
        overflow: visible !important;
        height: auto !important;
        min-height: 100%;
        transform: none !important;
    }

    body.mobile-scroll-unlocked.loader-active,
    body.mobile-scroll-unlocked.modal-open,
    body.mobile-scroll-unlocked.showreel-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100dvh !important;
    }
}

body.services nav {
    color: #000;
}
body.services nav a,
body.services nav h2 a {
    color: #000;
}
body.services nav.nav-light a,
body.services nav.nav-light h2 a {
    color: #fff;
}
body.services nav.nav-dark a,
body.services nav.nav-dark h2 a {
    color: #000;
}
body.services nav a::after {
    background-color: #000;
}
body.services nav.nav-light a::after {
    background-color: #fff;
}
body.services nav a:hover {
    color: #000;
}
body.services nav.nav-light a:hover {
    color: #fff;
}

/* ===== UNIVERSAL MENU STYLING ===== */
/* Ensure menu overlay always has dark background with white text on ALL pages */
/* This overrides any page-specific color inheritance (services, about, contact, work, clients) */
.menu,
.menu.active {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
}

/* Page-specific menu overrides with highest specificity */
body.services .menu,
body.services .menu.active,
body.about .menu,
body.about .menu.active,
body.work .menu,
body.work .menu.active,
body.clients .menu,
body.clients .menu.active,
body.contact .menu,
body.contact .menu.active {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
}

/* Reset all text colors inside menu to white - with page-specific overrides */
.menu *,
.menu a,
.menu h2,
.menu h3,
.menu h4,
.menu button,
.menu span,
.menu .menu-header,
.menu .menu-header a,
.menu .menu-sec,
.menu .menu-sec .links,
.menu .menu-sec .links h3,
.menu .menu-sec .links h3 a,
.menu .menu-sec .links button,
.menu .small-links,
.menu .small-links h3,
.menu .small-links h3 a,
.menu .small-links h4,
.menu .small-links .social,
.menu .small-links .social h3,
.menu .small-links .social h3 a,
#close,
#close a,
body.services .menu *,
body.services .menu a,
body.services .menu h2,
body.services .menu h3,
body.services .menu h4,
body.services .menu-sec .links h3,
body.services .menu-sec .links h3 a,
body.services .menu .small-links h3 a,
body.services .menu .small-links .social h3 a,
body.services #close,
body.services #close a,
body.about .menu *,
body.about .menu a,
body.about .menu h2,
body.about .menu h3,
body.about .menu h4,
body.about .menu-sec .links h3,
body.about .menu-sec .links h3 a,
body.about .menu .small-links h3 a,
body.about .menu .small-links .social h3 a,
body.about #close,
body.about #close a,
body.work .menu *,
body.work .menu a,
body.work .menu h2,
body.work .menu h3,
body.work .menu h4,
body.work .menu-sec .links h3,
body.work .menu-sec .links h3 a,
body.work .menu .small-links h3 a,
body.work .menu .small-links .social h3 a,
body.work #close,
body.work #close a {
    color: #ffffff !important;
}

/* First menu item (Home) slightly dimmed */
.menu .menu-sec .links h3:first-child a,
body.services .menu .menu-sec .links h3:first-child a,
body.about .menu .menu-sec .links h3:first-child a,
body.work .menu .menu-sec .links h3:first-child a {
    color: #b0b0b0 !important;
}

/* All underlines and borders white */
.menu .menu-sec .links h3::after,
.menu .menu-sec .links h3.full-underline::after,
.menu .menu-sec .links h3:first-child::after,
.menu .menu-sec .links button::after,
.menu .menu-border,
.menu .small-links h3 a::after {
    background-color: #ffffff !important;
}

/* Ensure icons are white */
.menu .small-links .social h3 i,
.menu i,
body.services .menu i,
body.about .menu i,
body.work .menu i {
    color: #ffffff !important;
}

body.loader-active {
    overflow: hidden !important;
}
.loader {
    background-color: #000;
    position: absolute;
    height: 100vh;
    width: 100vw;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
}
.loader h2 span {
    display: inline-block;
    color: #fff;
    font-weight: lighter;
}

/* Page Transition Overlay */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0a0a;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hide page transition on mobile by default */
@media (max-width: 768px) {
    .page-transition {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}
.page-transition .transition-text {
    font-size: clamp(24px, 4vw, 48px);
    font-weight: 300;
    letter-spacing: 2px;
    opacity: 0;
    color: #fff;
}
.page1 {
    height: 90vh;
    height: 90dvh; /* Dynamic viewport height for mobile browsers */
    width: 100%;
    background-color: #000;
    position: relative;
    overflow: hidden;
}

.page1-slide-wrapper {
    height: 100%;
    width: 100%;
    transform: translateY(-100%);
    will-change: transform;
}

.scroll-down {
    position: absolute;
    bottom: max(30px, var(--safe-area-bottom, 30px));
    right: max(30px, var(--safe-area-right, 30px));
    font-size: 24px;
    color: #fff;
    animation: bounce 2s infinite;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; /* Minimum touch target size */
    height: 44px;
    /* Better touch response */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}
.cursor {
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: fixed;
    transform: translate(-50%, -50%);
    z-index: 4;
    border: 1px solid rgba(255, 255, 255, 0.5);
}
.cursor h4 {
    font-size: 12px;
    font-weight: normal;
    color: #fff;
    text-align: center;
    line-height: 1;
}
.menu {
    height: 0vh;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 200000;
    overflow: hidden;
}
.menu.active {
    position: fixed;
    z-index: 200000;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: #3a3a3a;
    overflow: visible;
    overflow-y: auto;
}
.menu-header {
    height: 50px;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0vw 3vw;
    margin-top: 4vw;
}
.menu-header a {
    color: #ffffff;
    text-decoration: none;
    font-weight: lighter;
    cursor: pointer;
    font-weight: lighter;
    font-size: clamp(18px, 2.2vw, 32px);
    letter-spacing: -1px;
}
#close {
    position: fixed;
    cursor: pointer;
    padding: 12px;
    z-index: 200001;
    background: none;
    border: none;
    font-size: clamp(20px, 2vw, 30px);
    color: #ffffff;
    top: 3vw;
    right: 3vw;
    font-family: nb;
    font-weight: lighter;
}
.menu-header #close {
    position: fixed;
    cursor: pointer;
    padding: 12px;
    z-index: 200001;
    background: none;
    border: none;
    font-size: clamp(20px, 2vw, 30px);
    color: #ffffff;
    top: 3vw;
    right: 3vw;
}
#close a {
    cursor: pointer;
    text-decoration: none;
    color: #ffffff;
    font-weight: lighter;
    display: inline-block;
    position: relative;
}
.menu-header #close a {
    cursor: pointer;
    text-decoration: none;
    color: #ffffff;
    display: inline-block;
    position: relative;
}
#close a::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: #ffffff;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.35s ease-out;
}
.menu-header #close a::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: #ffffff;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.35s ease-out;
}
#close a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}
.menu-header #close a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}
.menu-sec {
    height: auto;
    min-height: 350px;
    width: 100vw;
    padding: 2vw 3.5vw 0vw 3.5vw;
    margin-top: 2vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.menu-sec .vid {
    height: 250px;
    width: 300px;
    border-radius: 8px;
    position: relative;
}
.menu-sec .vid video {
    width: 300px;
    height: 220px;
    border-radius: 8px;
}
.menu-sec .vid .play {
    display: flex;
    position: absolute;
    left: 0;
    bottom: 5px;
    gap: 5px;
    font-weight: lighter;
}
.menu-sec .vid .play #play {
    position: relative;
}
.menu-sec .vid .play #play::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: #000;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.35s ease-out;
}
.menu-sec .vid .play #play:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}
.menu-sec .vid .play i {
    color: #fff;
}
.menu-sec .vid .play h4 {
    font-weight: lighter;
    font-size: 1.1vw;
    margin-left: 170px;
}
.menu-sec .links {
    display: flex;
    flex-direction: column;
    gap: 3vw;
}
.menu-sec .links h3 {
    font-size: clamp(32px, 6vw, 85px);
    font-weight: lighter;
    margin-right: 18vw;
    margin-bottom: 0;
    cursor: pointer;
    line-height: 1.3;
    position: relative;
}
.menu-sec .links h3 a {
    color: #ffffff;
    text-decoration: none;
    display: block;
}
.menu-sec .links h3 {
    color: #ffffff;
}
.menu-sec .links h3:first-child a {
    color: #b0b0b0;
}
.menu-sec .links h3::after {
    content: "";
    position: absolute;
    height: 3px;
    width: 50%;
    bottom: 0;
    left: 0;
    transform: scaleX(0);
    background-color: #ffffff;
    transform-origin: bottom right;
    transition: transform 0.35s ease-out;
}
.menu-sec .links h3:first-child::after {
    background-color: #ffffff;
    height: 3px;
}
.menu-sec .links h3:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}
.menu-sec .links h3:first-child:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}
.menu-sec .links h3.full-underline::after {
    width: 100%;
    background-color: #ffffff;
}
.menu-sec .links h3.full-underline:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}
.menu-sec .links button {
    background-color: transparent;
    border: none;
    color: #ffffff;
    padding: 0;
    font-size: clamp(32px, 6vw, 85px);
    font-weight: lighter;
    margin: 0;
    margin-right: 18vw;
    cursor: pointer;
    font-family: rejo;
    text-align: left;
    position: relative;
    line-height: 1.3;
}
.menu-sec .links button::after {
    content: "";
    position: absolute;
    height: 3px;
    width: 50%;
    bottom: 0;
    left: 0;
    transform: scaleX(0);
    background-color: #ffffff;
    transform-origin: bottom right;
    transition: transform 0.35s ease-out;
}
.menu-sec .links button:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}
.menu .menu-border {
    height: 2px;
    width: 0vw;
    margin: 8vw 3vw 0vw 3vw;
    background-color: #ffffff;
}
.menu .small-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4vw;
    padding-bottom: 3vw;
}
.menu .small-links h4 {
    font-weight: lighter;
    padding: 1.2vw 3vw;
    font-size: clamp(16px, 1.8vw, 28px);
    color: #ffffff;
}
.menu .small-links h3 {
    font-weight: lighter;
    padding: 1.2vw 3vw;
    font-size: clamp(20px, 2.5vw, 36px);
    cursor: pointer;
    position: relative;
    color: #ffffff;
    margin-bottom: 1vw;
}

.menu .small-links h3 a {
    color: #ffffff;
    text-decoration: none;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.menu .small-links h3 a::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    bottom: 0;
    left: 0;
    transform: scaleX(0);
    background-color: #ffffff;
    transform-origin: bottom right;
    transition: transform 0.35s ease-out;
}

.menu .small-links h3 a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}
.page1 video,
.page1 img {
    height: 90vh;
    width: 100vw;
    object-fit: cover;
    position: absolute;
    z-index: 1;
    background-color: #000;
}
.inner-content {
    height: 100%;
    width: 100%;
    color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    z-index: 5;
}

.show-reel-button {
    display: flex;
    justify-content: center;
    z-index: 10;
}

.reel-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5vw;
    padding: 1vw 2vw;
    color: #fff;
    text-decoration: none;
    font-family: nb;
    font-size: clamp(14px, 1.2vw, 20px);
    letter-spacing: 0.1vw;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    background: transparent;
    border: none;
    outline: none;
}

.reel-btn::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #fff;
    transition: width 0.3s ease;
}

.reel-btn:hover::after {
    width: 100%;
}

.reel-btn i {
    font-size: clamp(12px, 1vw, 18px);
    transition: transform 0.3s ease;
}

.reel-btn:hover i {
    transform: translate(3px, -3px);
}

.agency-text {
    position: absolute;
    bottom: 5vw;
    left: 3vw;
    z-index: 10;
}

.agency-text p {
    color: #fff;
    font-family: nb;
    font-size: clamp(12px, 1vw, 18px);
    letter-spacing: 0.1vw;
    margin: 0;
    opacity: 0.8;
}
nav {
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: nb;
    padding: 3vw;
    font-size: clamp(12px, 1.2vw, 18px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: transparent;
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    will-change: transform, opacity;
}
nav.nav-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Mobile nav scrolled state */
@media (max-width: 768px) {
    nav.nav-scrolled {
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    
    body.services nav.nav-scrolled,
    body.about nav.nav-scrolled {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

.nav.nav-hidden {
    transform: translateY(-120%);
}
nav .nav-links a {
    font-size: clamp(12px, 1vw, 18px);
}
nav h2 {
    margin: 0;
    line-height: 1;
    display: flex;
    align-items: center;
}
nav h2:first-child {
    position: absolute;
    left: 3vw;
    top: 45%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}
nav h2:first-child:hover {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
nav h2 a {
    font-size: clamp(18px, 1.6vw, 27px);
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 2vw;
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
}
.nav-links a {
    color: #cfcfcf;
    text-decoration: none;
    font-weight: lighter;
    position: relative;
    transition: all 0.3s ease;
}
.nav-links a.home {
    color: #9c9c9c;
}
.nav-links a:hover {
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
nav a {
    color: #cfcfcf;
    text-decoration: none;
    font-weight: lighter;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}
nav a:hover {
    color: #fff;
}
nav a::after {
    content: "";
    position: absolute;
    height: 2px;
    width: 100%;
    bottom: -2px;
    left: 0;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition:
        transform 0.35s ease-out,
        background-color 0.3s ease;
}
nav a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}
nav a.nav-cta::after {
    display: none;
}
nav.nav-dark a::after {
    background-color: #000;
}
nav.nav-light a::after {
    background-color: #fff;
}
nav #menu {
    position: relative;
    display: none;
}

/* Nav CTA Button */
.nav-cta {
    position: absolute;
    right: 3vw;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.1em;
    font-size: clamp(14px, 1.1vw, 18px);
    color: #cfcfcf;
    text-decoration: none;
    font-weight: lighter;
    padding: 0;
    transition: all 0.3s ease;
    z-index: 10;
}

.nav-cta-text {
    position: relative;
    z-index: 2;
}

.nav-cta-text::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.35s ease-out;
}

.nav-cta:hover .nav-cta-text::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.nav-cta-arrow {
    font-size: 0.9em;
    transition: transform 0.3s ease;
}

.nav-cta:hover {
    color: #fff;
}

.nav-cta:hover .nav-cta-arrow {
    transform: translate(2px, -2px);
}

nav.nav-dark .nav-cta {
    color: #333;
}

nav.nav-dark .nav-cta:hover {
    color: #000;
}

nav.nav-dark .nav-cta-text::after {
    background-color: #000;
}

/* ===== TABLET LANDSCAPE (1024px - 1366px) ===== */
@media (min-width: 1024px) and (max-width: 1366px) {
    nav .nav-links {
        gap: 1.5vw;
    }
    
    nav .nav-links a {
        font-size: clamp(11px, 1vw, 16px);
    }
    
    .nav-cta {
        font-size: clamp(12px, 1vw, 16px);
    }
}

@media (min-width: 1024px) {
    nav .nav-links {
        display: flex;
        align-items: center;
        gap: 2vw;
        position: absolute;
        left: 50%;
        top: 45%;
        transform: translate(-50%, -50%);
    }
    nav #menu {
        display: none;
    }
}

/* ===== TABLET PORTRAIT & MOBILE (max-width: 1023px) ===== */
@media (max-width: 1023px) {
    nav .nav-links {
        display: none;
    }
    .nav-cta {
        display: none;
    }
    
    /* Hide hamburger menu on mobile */
    nav #menu {
        display: none !important;
    }
    
    #close {
        display: none !important;
    }
    
    .menu {
        display: none !important;
    }
    
    /* Mobile Bottom Navigation Bar */
    .mobile-bottom-nav {
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(10, 10, 10, 0.92);
        backdrop-filter: blur(24px) saturate(1.4);
        -webkit-backdrop-filter: blur(24px) saturate(1.4);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding: 6px 0 max(6px, env(safe-area-inset-bottom));
        z-index: 10000;
        box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.25);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    body.services .mobile-bottom-nav,
    body.about .mobile-bottom-nav {
        background: rgba(255, 255, 255, 0.95);
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
    
    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 12px;
        min-width: 60px;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.6);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        font-family: nb, sans-serif;
    }
    
    body.services .mobile-nav-item,
    body.about .mobile-nav-item {
        color: rgba(0, 0, 0, 0.6);
    }
    
    .mobile-nav-item i {
        font-size: 22px;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .mobile-nav-item span {
        font-size: 10px;
        font-weight: 400;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }
    
    .mobile-nav-item.active {
        color: #f53607;
    }
    
    body.services .mobile-nav-item.active,
    body.about .mobile-nav-item.active {
        color: #f53607;
    }
    
    .mobile-nav-item.active i {
        transform: scale(1.1);
    }
    
    .mobile-nav-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%) scaleX(0);
        width: 30px;
        height: 2px;
        background: #f53607;
        border-radius: 2px;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .mobile-nav-item.active::before {
        transform: translateX(-50%) scaleX(1);
    }
    
    /* Adjust body padding for mobile bottom nav */
    @media (max-width: 1023px) {
        body {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}

/* Mobile Floating Let's Talk Button */
.mobile-lets-talk-btn {
    position: fixed;
    top: 20px;
    right: 5vw;
    background: linear-gradient(135deg, #f53607 0%, #ff6b3d 100%);
    color: #fff;
    padding: 12px 20px;
    border-radius: 50px;
    text-decoration: none;
    display: none;
    align-items: center;
    gap: 8px;
    font-family: nb, sans-serif;
    font-size: 14px;
    font-weight: 500;
    z-index: 9998;
    box-shadow: 0 4px 20px rgba(245, 54, 7, 0.4);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
}

.mobile-lets-talk-btn.mobile-lets-talk-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.mobile-lets-talk-btn span {
    font-size: 13px;
    letter-spacing: 0.03em;
}

.mobile-lets-talk-btn i {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.mobile-lets-talk-btn:active {
    transform: scale(0.95);
}

.mobile-lets-talk-btn:active i {
    transform: translateX(2px) translateY(-2px);
}

@media (max-width: 1023px) {
    .mobile-lets-talk-btn {
        display: flex;
    }
}

/* Hide mobile bottom nav on desktop */
@media (min-width: 1024px) {
    .mobile-bottom-nav {
        display: none;
    }
    
    .mobile-lets-talk-btn {
        display: none !important;
    }
    
    nav #menu {
        display: block;
        position: fixed;
        top: 3vw;
        right: 3vw;
        z-index: 1001;
        background-color: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        padding: 12px 16px;
        border-radius: 8px;
    }
    nav h2:first-child {
        position: absolute;
        left: 3vw;
        right: auto;
        top: 3vw;
        transform: translateY(0);
    }
    #close {
        top: 3vw;
        right: 3vw;
        font-size: clamp(14px, 4vw, 20px);
    }
    .menu-sec .links h3 {
        font-size: clamp(36px, 8vw, 100px);
    }
}
.page1 .inner-content h1 {
    text-align: center;
    letter-spacing: -1.5vw;
    font-size: 22vw;
    font-family: rejo;
}
.page1 .inner-content h1 span {
    display: inline-block;
}
.page2 {
    height: auto;
    width: 100vw;
    background-color: #fff;
    margin-bottom: 20px;
}
.page2 .page2-top {
    height: 100px;
    width: 100vw;
    padding: 0.6vw 3vw;
    margin-top: 10px;
    display: flex;
    align-items: end;
    justify-content: space-between;
}
.page2 .page2-top h3 {
    font-size: clamp(16px, 2vw, 32px);
    font-weight: lighter;
    letter-spacing: -0.5px;
    color: #141414;
}
.page2 .page2-top .first-text {
    overflow: hidden;
}
.page2 .page2-top-border {
    height: 1px;
    width: 0vw;
    margin: 0.6vw 3vw;
    background-color: rgb(71, 71, 71);
    display: none !important;
}
.page2 .page2-bottom {
    height: auto;
    min-height: 450px;
    width: 100vw;
    overflow: visible;
}
.page2 .page2-bottom .btm-text {
    padding: 2vw 3vw;
    overflow: hidden;
}
.page2 .page2-bottom .btm-text h2 .up {
    overflow: hidden;
}
.page2 .page2-bottom .btm-text h2 span {
    font-size: clamp(20px, 4.45vw, 65px);
    font-weight: lighter;
    line-height: 1.2;
    letter-spacing: -1px;
    display: inline-block;
    overflow: visible;
}
.page3 {
    height: 100vh;
    width: 100vw;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.page3 .inner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}
.page3 .page3-text {
    overflow: visible;
    height: auto;
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}
.page3 .page3-text h4 {
    color: #161616;
    font-weight: lighter;
    display: flex;
    align-items: self-start;
    justify-content: center;
    gap: 5px;
    margin-bottom: 15px;
}
.page3 .page3-text h4 span {
    font-size: 0.7vw;
    background-color: #000;
    color: #fff;
    border-radius: 100px;
    padding: 4px 6px;
    text-align: center;
}
.page3 .page3-text h4 i {
    color: #161616;
    margin-top: 2px;
}
.page3 .page3-text h1 {
    cursor: pointer;
    font-size: clamp(28px, 4vw, 60px);
    font-weight: lighter;
    line-height: 1.1;
    position: relative;
    color: #fff;
    letter-spacing: 0.02em;
    transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}
.page3 video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 1;
    backface-visibility: hidden;
    transform: translateZ(0);
    pointer-events: none;
}
.page3 .page3-text h1::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    bottom: -2px;
    transform: scaleX(0);
    transform-origin: bottom right;
    background-color: rgba(255, 255, 255, 0.6);
    transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}
.page3 .page3-text h1:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}
.page4 {
    height: auto;
    width: 100vw;
    background-color: #fff;
    padding-bottom: 20px;
}
.page4 .page4-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1vw 3vw;
}
.page4 .page4-text h2 {
    font-weight: lighter;
    font-size: clamp(16px, 1.7vw, 28px);
    letter-spacing: -1px;
    position: relative;
    cursor: pointer;
}
.page4 .page4-text h2::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    bottom: 0;
    left: 0;
    transform: scaleX(0);
    background-color: #000;
    transform-origin: bottom right;
    transition: transform 0.35s ease-out;
}
.page4 .page4-text h2:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}
.page4 .page4-text h2.hover-text {
    position: relative;
    overflow: hidden;
}
.page4 .page4-text h2.hover-text span {
    display: inline-block;
    transition: transform 0.35s ease-out;
}
.page4 .page4-text h2.hover-text .text-default {
    transform: translateY(0);
}
.page4 .page4-text h2.hover-text .text-hover {
    position: absolute;
    left: 0;
    transform: translateY(100%);
}
.page4 .page4-text h2.hover-text:hover .text-default {
    transform: translateY(-100%);
}
.page4 .page4-text h2.hover-text:hover .text-hover {
    transform: translateY(0);
}
.page4 .page4-text h2 i {
    transition: transform 0.35s ease-out;
}
.page4 .page4-text h2:hover i {
    transform: translate(3px, -3px);
}
.work-button-wrapper {
    display: flex;
    align-items: center;
    gap: 0.1vw;
}
.page4-text a {
    text-decoration: none;
    color: inherit;
}
.work-button-wrapper i {
    font-size: 1.9vw;
    transition: transform 0.35s ease-out;
}
.work-button-wrapper h2:hover ~ i,
.work-button-wrapper:hover i {
    transform: translate(3px, -3px);
}
.page4 .page4-video {
    height: 500px;
    width: 100vw;
    padding: 0vw 3vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.page4 .page4-video .item {
    height: 500px;
    width: 49%;
    position: relative;
}
.page4 .page4-video .item svg {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
}
.page4 .page4-video .item:hover img {
    display: none;
}
.page4 .page4-video .item video,
.page4 .page4-video .item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
    cursor: pointer;
}
.page5 {
    height: 80vh;
    width: 100vw;
    background-color: #fff;
}
.page5 .page5-top {
    height: 100px;
    width: 100vw;
    padding: 0.6vw 3vw;
    margin-top: 10px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
}
.page5 .page5-top h3 {
    font-size: clamp(16px, 2vw, 32px);
    font-weight: lighter;
    letter-spacing: -0.5px;
    color: #141414;
    line-height: 1.5;
}
.page5 .page5-top .top-text {
    overflow: hidden;
}
.page5 .page5-top .top-text div {
    margin-bottom: 4px;
}
.page5 .page5-top .philosophy-cta {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.page5 .page5-top .philosophy-cta a {
    text-decoration: none;
    color: #141414;
    transition: all 0.3s ease;
}
.page5 .page5-top .philosophy-cta h3 {
    font-size: clamp(14px, 1.5vw, 24px);
    font-weight: 400;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    position: relative;
    cursor: pointer;
}
.page5 .page5-top .philosophy-cta h3::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    bottom: 0;
    left: 0;
    transform: scaleX(0);
    background-color: #141414;
    transform-origin: bottom right;
    transition: transform 0.35s ease-out;
}
.page5 .page5-top .philosophy-cta h3:hover::after {
    transform-origin: bottom left;
    transform: scaleX(1);
}
.page5 .page5-top .philosophy-cta .hover-text {
    position: relative;
    overflow: hidden;
}
.page5 .page5-top .philosophy-cta .hover-text span {
    display: inline-block;
    transition: transform 0.35s ease-out;
}
.page5 .page5-top .philosophy-cta .hover-text .text-default {
    transform: translateY(0);
}
.page5 .page5-top .philosophy-cta .hover-text .text-hover {
    position: absolute;
    left: 0;
    transform: translateY(100%);
}
.page5 .page5-top .philosophy-cta .hover-text:hover .text-default {
    transform: translateY(-100%);
}
.page5 .page5-top .philosophy-cta .hover-text:hover .text-hover {
    transform: translateY(0);
}
.page5 .page5-top .philosophy-cta .hover-text i {
    font-size: clamp(16px, 1.8vw, 28px);
    margin-left: 5px;
    transition: transform 0.35s ease-out;
}
.page5 .page5-top .philosophy-cta .hover-text:hover i {
    transform: translate(3px, -3px);
}
.page5 .page5-top-border {
    height: 1px;
    width: 0vw;
    margin: 0.6vw 3vw;
    background-color: rgb(71, 71, 71);
    display: none !important;
}
.page5 .page5-bottom {
    height: auto;
    min-height: 350px;
    width: 100vw;
    overflow: visible;
}
.page5 .page5-bottom .btm-text {
    padding: 2vw 3vw;
    overflow: hidden;
}
.page5 .page5-bottom .btm-text h2 .up {
    overflow: hidden;
}
.page5 .page5-bottom .btm-text h2 span {
    font-size: clamp(20px, 4.45vw, 65px);
    font-weight: lighter;
    line-height: 1.2;
    letter-spacing: -1px;
    display: inline-block;
    overflow: visible;
}
.page6 {
    height: 100vh;
    width: 100vw;
    background-color: #fff;
    position: relative;
}
.page6 video {
    position: absolute;
    height: 150%;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.page6 svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 90%;
}
.page6 .crsr {
    height: 7vw;
    width: 7vw;
    background-color: transparent;
    position: fixed;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* z-index: 99; */
}
.page6 .crsr h2 {
    color: #fff;
    font-weight: lighter;
    font-size: 1.3vw;
}
.page6 .page6-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    flex-direction: column;
    color: #fff;
}
.page6 .page6-text .seat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.page6 .page6-text .seat span {
    font-size: 5vw;
}
.page6 .page6-text .seat h2 {
    font-size: clamp(32px, 5vw, 80px);
    font-weight: lighter;
    letter-spacing: -1.5px;
}
.page6 .page6-text .seat .seat-span {
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 5vw;
    overflow: hidden;
}
.page6 .page6-text .seat .seat-span h2 {
    transition: transform 2s ease-in-out;
}
.page6 .page6-text .seat .seat-span:hover h2 {
    transform: translateY(-900%);
}
.page6 .page6-text .seat:not(:hover) .seat-span h2 {
    transform: translateY(0);
}
.page7 {
    height: 15vh;
    width: 100vw;
    background-color: #fff;
    margin-top: -20vh;
}
.page7 .page7-top {
    height: 100px;
    width: 100vw;
    padding: 0.6vw 3vw;
    margin-top: 30px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
}
.page7 .page7-top h3 {
    font-size: clamp(16px, 2vw, 32px);
    font-weight: lighter;
    letter-spacing: -0.5px;
    color: #141414;
}
.page7 .page7-top .top-text {
    overflow: hidden;
}
.page7 .page7-top .emotions-cta {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.page7 .page7-top .emotions-cta a {
    text-decoration: none;
    color: #141414;
    transition: all 0.3s ease;
}
.page7 .page7-top .emotions-cta h3 {
    font-size: clamp(18px, 2vw, 32px);
    font-weight: 400;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    position: relative;
    cursor: pointer;
}
.page7 .page7-top .emotions-cta h3::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    bottom: 0;
    left: 0;
    transform: scaleX(0);
    background-color: #141414;
    transform-origin: bottom right;
    transition: transform 0.35s ease-out;
}
.page7 .page7-top .emotions-cta h3:hover::after {
    transform-origin: bottom left;
    transform: scaleX(1);
}
.page7 .page7-top .emotions-cta .hover-text {
    position: relative;
    overflow: hidden;
}
.page7 .page7-top .emotions-cta .hover-text span {
    display: inline-block;
    transition: transform 0.35s ease-out;
}
.page7 .page7-top .emotions-cta .hover-text .text-default {
    transform: translateY(0);
}
.page7 .page7-top .emotions-cta .hover-text .text-hover {
    position: absolute;
    left: 0;
    transform: translateY(100%);
}
.page7 .page7-top .emotions-cta .hover-text:hover .text-default {
    transform: translateY(-100%);
}
.page7 .page7-top .emotions-cta .hover-text:hover .text-hover {
    transform: translateY(0);
}
.page7 .page7-top .emotions-cta .hover-text i {
    font-size: clamp(20px, 2.2vw, 34px);
    margin-left: 5px;
    transition: transform 0.35s ease-out;
}
.page7 .page7-top .emotions-cta .hover-text:hover i {
    transform: translate(3px, -3px);
}
.page7 .page7-top-border {
    height: 1px;
    width: 0vw;
    margin: 0.6vw 3vw;
    background-color: rgb(71, 71, 71);
    display: none !important;
}
.page7 .page7-bottom {
    height: auto;
    width: 100vw;
    overflow: visible;
}
.page7 .page7-bottom .btm-text {
    padding: 1vw 3vw;
    overflow: hidden;
}
.page7 .page7-bottom .btm-text h2 .up {
    overflow: hidden;
}
.page7 .page7-bottom .btm-text h2 span {
    font-size: clamp(20px, 4.3vw, 65px);
    font-weight: lighter;
    line-height: 1.2;
    letter-spacing: -1px;
    display: inline-block;
    overflow: visible;
}
.page8 {
    height: 5vh;
    width: 100vw;
    background-color: #fff;
}
.page8 .text {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0vw 3vw;
}
.page8 .text h1 {
    font-size: clamp(48px, 8.5vw, 140px);
    font-family: rejo;
    font-weight: 500;
}
.page8 .text h3 {
    font-size: 2.2vw;
    font-weight: lighter;
    position: relative;
    cursor: pointer;
}
.page8 .text h3::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    bottom: 0;
    left: 0;
    transform: scaleX(0);
    background-color: #000;
    transform-origin: bottom right;
    transition: transform 0.35s ease-out;
}
.page8 .text h3:hover::after {
    transform-origin: bottom left;
    transform: scaleX(1);
}
.page8 .text h3 i {
    font-size: 1.9vw;
    margin-right: 10px;
}
.page8 .contact-link {
    padding: 1vw 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page8 .contact-link h3 {
    font-size: clamp(24px, 3vw, 50px);
    font-weight: lighter;
    position: relative;
    cursor: pointer;
}
.page8 .contact-link h3::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    bottom: 0;
    left: 0;
    transform: scaleX(0);
    background-color: #000;
    transform-origin: bottom right;
    transition: transform 0.35s ease-out;
}
.page8 .contact-link h3:hover::after {
    transform-origin: bottom left;
    transform: scaleX(1);
}
.page8 .contact-link a {
    text-decoration: none;
    color: inherit;
}
.page8 .contact-link h3.hover-text {
    position: relative;
    overflow: hidden;
}
.page8 .contact-link h3.hover-text span {
    display: inline-block;
    transition: transform 0.35s ease-out;
}
.page8 .contact-link h3.hover-text .text-default {
    transform: translateY(0);
}
.page8 .contact-link h3.hover-text .text-hover {
    position: absolute;
    left: 0;
    transform: translateY(100%);
}
.page8 .contact-link h3.hover-text:hover .text-default {
    transform: translateY(-100%);
}
.page8 .contact-link h3.hover-text:hover .text-hover {
    transform: translateY(0);
}
.page8 .contact-link h3.hover-text i {
    font-size: 1.9vw;
    margin-left: 5px;
    transition: transform 0.35s ease-out;
}
.page8 .contact-link h3.hover-text:hover i {
    transform: translate(3px, -3px);
}
.page8 .page8-top-border {
    height: 1px;
    width: 94vw;
    margin: 0.6vw 3vw;
    background-color: rgb(71, 71, 71);
    display: none !important;
}
/* Custom Photo Slider - Rejouice Style */
.photo-slider {
    width: 100%;
    height: 50vh;
    margin-top: 3vw;
    position: relative;
    overflow: hidden;
    background: transparent;
}

.slider-track {
    display: flex;
    gap: 10px;
    animation: slideScroll 12s linear infinite;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
    height: 100%;
}

.slide {
    flex: 0 0 auto;
    width: 19vw;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    user-select: none;
    pointer-events: none;
}

@keyframes slideScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-5 * (19vw + 10px)));
    }
}

@keyframes slideScrollMobile {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-5 * (40vw + 8px)));
    }
}

@keyframes slideScrollTablet {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-5 * (28vw + 10px)));
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .photo-slider {
        height: 42vh;
    }
    
    .slide {
        width: 40vw;
        height: 100%;
    }
    
    .slider-track {
        animation: slideScrollMobile 9s linear infinite;
        gap: 8px;
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1023px) {
    .slide {
        width: 28vw;
    }
    
    .slider-track {
        animation: slideScrollTablet 11s linear infinite;
    }
}

/* Old swiper styles - keeping for compatibility */
.page9 {
    height: 15vh;
    width: 100vw;
    background-color: #fff;
    display: flex;
    justify-content: center;
    text-align: center;
}
.page9 .page9-text {
    overflow: hidden;
    height: 155px;
}
.page9 .page9-text h4 {
    color: #161616;
    font-weight: lighter;
    display: flex;
    align-items: self-start;
    justify-content: center;
    gap: 5px;
    margin-bottom: 10px;
}
.page9 .page9-text h4 i {
    color: #161616;
    margin-top: 2px;
}
.page9 .page9-text h1 {
    cursor: pointer;
    font-size: clamp(28px, 4vw, 60px);
    font-weight: lighter;
    line-height: 1.1;
    position: relative;
}
.page9 .page9-text h1::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
    bottom: 0;
    transform: scaleX(0);
    transform-origin: bottom right;
    background-color: #000000;
    transition: transform 0.4s ease-out;
}
.page9 .page9-text h1:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}
.page9 .page9-text a {
    text-decoration: none;
    color: inherit;
}
.page9 .page9-text h1.hover-text {
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.page9 .page9-text h1.hover-text span {
    display: block;
    transition: transform 0.35s ease-out;
}
.page9 .page9-text h1.hover-text .text-default {
    transform: translateY(0);
}
.page9 .page9-text h1.hover-text .text-hover {
    position: absolute;
    top: 100%;
    left: 0;
    white-space: nowrap;
    transform: translateY(0);
}
.page9 .page9-text h1.hover-text:hover .text-default {
    transform: translateY(-100%);
}
.page9 .page9-text h1.hover-text:hover .text-hover {
    transform: translateY(-100%);
}
footer {
    height: 100vh;
    width: 100vw;
    background-color: #0e0e0e;
    position: relative;
    z-index: 1;
    display: block;
    visibility: visible;
}
footer .footer-top {
    height: 50vh;
    width: 100vw;
    /* background-color: red; */
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.footer-top .first {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8vw;
    padding: 2.5vw;
    color: #fff;
}
.footer-top .first .first-top h2 {
    font-weight: lighter;
    letter-spacing: -0.5px;
}
.footer-top .first .first-top button {
    padding: 15px 20px;
    margin-top: 20px;
    border-radius: 10px;
    border: 1px solid #fff;
    font-size: 1.1vw;
    font-weight: lighter;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.footer-top .first .first-top button:hover {
    background-color: #fff;
    color: #000;
}
.footer-top .first .first-top button:hover {
    background-color: #fff;
    color: #000;
}
.footer-top .first .first-btm h4 {
    font-weight: lighter;
    margin-bottom: 1.5vw;
}

/* Footer CTA Button */
.footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: clamp(14px, 1.2vw, 18px);
    color: #cfcfcf;
    text-decoration: none;
    font-weight: lighter;
    padding: 0.8em 1.5em;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    transition: all 0.3s ease;
    margin-top: 1vw;
}

.footer-cta span {
    position: relative;
}

.footer-cta span::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.35s ease-out;
}

.footer-cta:hover span::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.footer-cta i {
    font-size: 0.9em;
    transition: transform 0.3s ease;
}

.footer-cta:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

.footer-cta:hover i {
    transform: translate(2px, -2px);
}

.footer-top .second {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    margin-top: -2.5vw;
    padding-right: 3vw;
    color: #fff;
}
.second .second-one {
    display: flex;
    flex-direction: column;
    gap: 8vw;
}
.second .second-one .span span {
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
}
.second .second-one .span span a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}
.second .second-one .span span a:hover {
    color: #cfcfcf;
}
.second .second-one .span > span::after,
.second .second-one .span1 > span::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    bottom: 0%;
    left: 0%;
    transform: scaleX(0);
    background-color: #ffffff;
    transform-origin: bottom right;
    transition: transform 0.35s ease-out;
}
.second .second-one .span > span:hover::after,
.second .second-one .span1 > span:hover::after {
    transform-origin: bottom left;
    transform: scaleX(1);
}
.second .second-two {
    display: flex;
    flex-direction: column;
    gap: 10vw;
}
.second .second-two .span span {
    display: flex;
    position: relative;
    cursor: pointer;
}
.second .second-two .span > span::after,
.second .second-two .span1 > span::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    bottom: 0%;
    left: 0%;
    transform: scaleX(0);
    background-color: #ffffff;
    transform-origin: bottom right;
    transition: transform 0.35s ease-out;
}
.second .second-two .span > span:hover::after,
.second .second-two .span1 > span:hover::after {
    transform-origin: bottom left;
    transform: scaleX(1);
}
.second .second-two .span1 {
    position: relative;
    cursor: pointer;
}
.second .second-one .span1 {
    position: relative;
    cursor: pointer;
}
footer .footer-bottom {
    height: auto;
    min-height: 150px;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1vw 0;
    margin: 0;
    overflow: hidden;
    visibility: visible;
}

/* Disable footer entrance animations - keep elements always visible */
footer .footer-top .first,
footer .footer-top .second,
footer .footer-bottom {
    opacity: 1 !important;
}

footer .footer-bottom h1 span {
    display: inline-block;
    font-size: 19vw;
    margin-top: -3.2vw;
    color: #fff;
}

/* Desktop logo display */
footer .footer-logo-pc {
    display: block;
    width: 100%;
    max-width: 1200px;
    height: auto;
    object-fit: contain;
    visibility: visible;
    image-rendering: -webkit-optimize-contrast;
    z-index: 10;
    position: relative;
}

footer .footer-logo-mobile {
    display: none;
    visibility: hidden;
}

/* Mobile footer fade-in transition */
@media (max-width: 768px) {
    .footer-top .first,
    .footer-top .second,
    .footer-bottom {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pop-in animation for logos */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(20px);
    }
    60% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ===== TABLET OPTIMIZATION (769px - 1023px) ===== */
/* Targets: iPad, iPad Mini, Android tablets, Surface */
@media (min-width: 769px) and (max-width: 1023px) {
    /* Enable smooth scrolling on tablets */
    html,
    body {
        overflow: auto;
        overflow-x: hidden;
        height: 100%;
        -webkit-overflow-scrolling: touch;
    }
    
    .main {
        overflow: visible !important;
        height: auto !important;
    }
    
    /* Hide custom cursor on touch devices */
    .cursor {
        display: none !important;
    }
    
    /* Navigation - Tablet optimized */
    nav {
        padding: 2.5vw 4vw;
    }
    
    nav h2 a {
        font-size: clamp(20px, 2.5vw, 28px);
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    nav #menu {
        padding: 14px 20px;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Page 1 - Hero */
    .page1 {
        min-height: 85vh;
        min-height: 85dvh;
    }
    
    .page1 .inner-content h1 {
        font-size: 16vw;
        letter-spacing: -0.8vw;
    }
    
    .agency-text {
        bottom: 6vw;
        left: 4vw;
    }
    
    .agency-text p {
        font-size: clamp(14px, 1.5vw, 18px);
    }
    
    /* Page 2 */
    .page2 .page2-top {
        padding: 3vw 4vw;
    }
    
    .page2 .page2-bottom .btm-text h2 span {
        font-size: clamp(24px, 4.5vw, 50px);
    }
    
    /* Page 3 */
    .page3 {
        min-height: 60vh;
    }
    
    .page3 .page3-text h1 {
        font-size: clamp(32px, 7vw, 56px);
    }
    
    /* Page 4 - Work section */
    .page4 .page4-text {
        padding: 3vw 4vw;
    }
    
    .page4 .page4-video .item {
        height: 40vw;
        min-height: 280px;
    }
    
    /* Page 5 */
    .page5 .page5-bottom .btm-text h2 span {
        font-size: clamp(20px, 4vw, 44px);
    }
    
    /* Page 7 */
    .page7 .page7-bottom .btm-text h2 span {
        font-size: clamp(22px, 4.5vw, 48px);
    }
    
    /* Swiper */
    .swiper {
        height: 45vh;
    }
    
    /* Footer */
    footer .footer-top {
        padding: 4vw;
    }
    
    footer .footer-bottom {
        min-height: 180px;
    }
    
    /* Menu */
    .menu-sec {
        padding: 4vw;
    }
    
    .menu-sec .links h3 {
        font-size: clamp(36px, 7vw, 72px);
        min-height: 54px;
    }
}

/* ===== TABLET PORTRAIT SPECIFIC (768px - 834px) ===== */
/* Targets: iPad Mini portrait, smaller tablets */
@media (min-width: 768px) and (max-width: 834px) and (orientation: portrait) {
    .page1 .inner-content h1 {
        font-size: 14vw;
    }
    
    .page4 .page4-video {
        flex-direction: column;
    }
    
    .page4 .page4-video .item {
        width: 100%;
        height: 45vw;
    }
    
    footer .footer-top {
        flex-direction: column;
        gap: 6vw;
    }
    
    .footer-top .second {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }
}

/* ===== IPAD PRO & LARGE TABLETS (1024px - 1366px) ===== */
@media (min-width: 1024px) and (max-width: 1366px) {
    .page1 .inner-content h1 {
        font-size: 18vw;
    }
    
    .page2 .page2-bottom .btm-text h2 span {
        font-size: clamp(28px, 4.2vw, 58px);
    }
    
    .swiper {
        height: 48vh;
    }
}

/* ===== MOBILE OPTIMIZATION (max-width: 768px) ===== */
/* Targets: iPhone, Android phones, small tablets */
@media (max-width: 768px) {
    /* Enable scrolling on mobile - Smooth native scroll */
    html,
    body {
        overflow: auto;
        overflow-x: hidden;
        height: 100%;
        position: relative;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        /* Safe area padding for iPhone X+ */
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    /* Global mobile smoothness improvements */
    * {
        -webkit-tap-highlight-color: transparent;
    }

    /* Smoother transitions for all interactive elements */
    a, button, .cta-button, .nav-cta, .work-button-wrapper {
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Optimize images and videos for mobile - no blanket GPU layer */
    img, video {
        will-change: auto;
        backface-visibility: hidden;
    }

    /* Smooth section transitions */
    section, .page1, .page2, .page3, .page4, .page5, .page7, .page9, footer {
        contain: layout style;
    }

    .main {
        overflow: visible !important;
        height: auto !important;
        position: relative;
        transform: none !important;
    }

    /* Hide custom cursor on mobile */
    .cursor {
        display: none !important;
    }

    /* Navigation - Mobile optimized with larger tap targets */
    nav {
        padding: 3vw 5vw;
        position: fixed;
        z-index: 9999;
        background: transparent;
        transition: background 0.25s ease, transform 0.25s ease;
    }

    nav.nav-scrolled {
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    nav h2:first-child {
        left: 5vw;
        top: 4vw;
    }

    nav h2 a {
        font-size: clamp(20px, 5vw, 28px);
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    nav #menu {
        right: 5vw;
        top: 4vw;
        padding: 12px 18px;
        min-width: 80px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    nav #menu a {
        font-size: clamp(16px, 4vw, 20px);
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Page 1 - Hero - Mobile optimized */
    .page1 {
        min-height: 100vh;
        min-height: 100dvh; /* Dynamic viewport height for mobile browsers */
        overflow: visible;
        padding: 0;
    }

    .page1 video,
    .page1 img {
        will-change: auto;
        pointer-events: none;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .page1 .inner-content {
        overflow: visible;
        padding: 0 5vw;
    }

    .page1 .inner-content h1 {
        font-size: 14vw;
        letter-spacing: -0.5vw;
        overflow: visible;
        word-wrap: break-word;
        line-height: 1.05;
    }

    .page1 .inner-content h1 span {
        overflow: visible;
        display: inline-block;
    }

    /* Scroll down indicator - better visibility */
    .scroll-down {
        bottom: 25px;
        right: 25px;
        font-size: 28px;
        width: 48px;
        height: 48px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .show-reel-button {
        margin-top: 6vw;
    }

    .reel-btn {
        padding: 4vw 6vw;
        font-size: 4.5vw;
        gap: 2vw;
        min-height: 54px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 8px;
    }

    .reel-btn i {
        font-size: 5vw;
    }

    .agency-text {
        bottom: 10vw;
        left: 5vw;
        right: 5vw;
    }

    .agency-text p {
        font-size: clamp(15px, 3.5vw, 18px);
        line-height: 1.5;
    }

    /* Page 2 - Mobile optimized typography & spacing */
    .page2 {
        height: auto;
        min-height: auto;
        padding: 0;
    }

    .page2 .page2-top {
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 2vw;
        padding: 6vw 5vw 2vw 5vw;
        margin-top: 0;
        overflow: visible;
    }

    .page2 .page2-top h3 {
        font-size: clamp(16px, 5vw, 24px);
        overflow: visible;
        word-wrap: break-word;
        line-height: 1.5;
        margin-bottom: 2px;
    }

    .page2 .page2-top .first-text {
        width: 100%;
        overflow: visible;
    }

    .page2 .page2-top .first-text div {
        overflow: visible;
    }

    .page2 .page2-bottom {
        height: auto;
        min-height: auto;
        overflow: visible;
        padding: 2vw 5vw 2vw 5vw;
    }

    .page2 .page2-bottom .btm-text {
        padding: 0;
        overflow: visible;
    }

    .page2 .page2-bottom .btm-text h2 {
        overflow: visible;
    }

    .page2 .page2-bottom .btm-text h2 span {
        font-size: clamp(20px, 6.5vw, 38px);
        line-height: 1.5;
        word-wrap: break-word;
        overflow-wrap: break-word;
        overflow: visible;
        display: inline;
        margin-bottom: 2px;
    }

    /* Page 3 - Video section mobile */
    .page3 {
        height: 50vh;
        min-height: 50vh;
        padding: 0;
        overflow: visible;
        position: relative;
    }

    .page3 .inner-content {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        padding: 0;
        position: relative;
        z-index: 5;
    }

    .page3 .page3-text {
        height: auto;
        overflow: visible;
        gap: 15px;
    }

    .page3 .page3-text h1 {
        font-size: clamp(28px, 8vw, 48px);
        line-height: 1.2;
        word-wrap: break-word;
        overflow: visible;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .showreel-trigger {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .showreel-play-icon {
        width: 60px;
        height: 60px;
    }

    .showreel-play-icon i {
        font-size: 22px;
    }

    /* Page 4 - Work section mobile */
    .page4 {
        height: auto;
        min-height: auto;
        position: relative;
        z-index: 1;
        padding-bottom: 4vw;
    }

    .page4 .page4-text {
        flex-direction: column;
        gap: 2vw;
        padding: 2vw 5vw 0 5vw;
        margin-bottom: 0;
        align-items: flex-start;
        position: relative;
        z-index: 10;
    }

    .page4 .page4-text h2 {
        font-size: clamp(18px, 5vw, 28px);
        word-wrap: break-word;
        width: 100%;
    }

    .page4 .page4-text a {
        position: relative;
        z-index: 100;
        display: block;
        width: auto;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .work-button-wrapper {
        margin-top: 2vw;
        margin-bottom: -4vw;
        gap: 2vw;
        position: relative;
        z-index: 100;
        cursor: pointer;
        pointer-events: auto;
        touch-action: manipulation;
        padding: 3vw 5vw;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 8px;
        min-height: 54px;
    }

    .work-button-wrapper h2 {
        font-size: clamp(17px, 4.5vw, 26px) !important;
        cursor: pointer;
        pointer-events: auto;
    }

    .work-button-wrapper i {
        font-size: 6vw;
        cursor: pointer;
        pointer-events: auto;
    }

    .page4 .page4-video {
        height: auto;
        flex-direction: column;
        gap: 3vw;
        padding: 2vw 5vw 4vw 5vw;
        margin-top: 0;
        position: relative;
        z-index: 1;
    }

    .page4 .page4-video .item {
        height: 55vw;
        min-height: 220px;
        width: 100%;
        position: relative;
        z-index: 1;
        border-radius: 12px;
        overflow: hidden;
    }

    .page4 .page4-video .item video,
    .page4 .page4-video .item img {
        border-radius: 12px;
    }

    /* Page 5 - Philosophy section mobile */
    .page5 {
        height: auto;
        min-height: auto;
        overflow: visible;
        padding: 0;
    }

    .page5 .page5-top {
        height: auto;
        flex-direction: column;
        gap: 2vw;
        padding: 4vw 5vw 2vw 5vw;
        margin-top: 0;
        overflow: visible;
    }

    .page5 .page5-top h3 {
        font-size: clamp(16px, 5vw, 24px);
        overflow: visible;
        word-wrap: break-word;
        line-height: 1.6;
        margin-bottom: 6px;
    }

    .page5 .page5-top .top-text {
        width: 100%;
        overflow: visible;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .page5 .page5-top .top-text div {
        overflow: visible;
        margin-bottom: 2px;
    }

    .page5 .page5-top .philosophy-cta {
        width: 100%;
        justify-content: flex-start;
        padding-left: 0;
        display: none;
    }

    .page5 .page5-top .philosophy-cta h3 {
        font-size: clamp(15px, 4vw, 20px);
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .page5 .page5-bottom {
        height: auto;
        min-height: auto;
        padding: 2vw 5vw 2vw 5vw;
        overflow: visible;
    }

    .page5 .page5-bottom .btm-text {
        padding: 0;
        overflow: visible;
        text-align: left;
    }

    .page5 .page5-bottom .btm-text h2 {
        margin: 0 0 4px 0;
        padding: 0;
        font-weight: lighter;
        overflow: visible;
    }

    .page5 .page5-bottom .btm-text h2 .up {
        display: block;
        overflow: visible;
    }

    .page5 .page5-bottom .btm-text h2 span {
        font-size: clamp(18px, 5vw, 30px);
        line-height: 1.6;
        display: inline;
        letter-spacing: -0.3px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        overflow: visible;
    }

    /* Page 6 - Visual section mobile */
    .page6 {
        height: auto;
        min-height: 50vh;
        padding: 2vw 5vw;
        margin-bottom: 8vh;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .page6 video {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transform: none;
    }

    .page6 svg {
        display: block;
        position: absolute;
        height: 250px;
        width: 250px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
    }

    .page6 .crsr {
        display: none; /* Hide cursor on mobile */
    }

    .page6 .page6-text {
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        z-index: 15;
        text-align: center;
        width: 90%;
    }

    .page6 .page6-text .seat span {
        font-size: 10vw;
        color: #fff;
    }

    .page6 .page6-text .seat h2 {
        font-size: 10vw;
        color: #fff;
    }

    .page6 .page6-text span {
        color: #fff;
        font-size: 5vw;
    }

    .page6 .page6-text .seat .seat-span {
        height: 10vw;
    }

    /* Page 7 - Emotions section mobile */
    .page7 {
        height: auto;
        min-height: auto;
        overflow: visible;
        padding: 0;
        margin-top: 0;
        margin-bottom: 2vh;
    }

    .page7 .page7-top {
        height: auto;
        flex-direction: column;
        gap: 2vw;
        padding: 4vw 5vw 2vw 5vw;
        margin-top: 0;
        overflow: visible;
    }

    .page7 .page7-top h3 {
        font-size: clamp(16px, 5vw, 24px);
        overflow: visible;
        word-wrap: break-word;
        line-height: 1.4;
    }

    .page7 .page7-top .top-text {
        width: 100%;
        overflow: visible;
    }

    .page7 .page7-top .emotions-cta {
        width: 100%;
        justify-content: flex-start;
        padding-left: 0;
        display: none;
    }

    .page7 .page7-top .emotions-cta h3 {
        font-size: clamp(15px, 4.5vw, 22px);
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .page7 .page7-bottom {
        height: auto;
        min-height: auto;
        overflow: visible;
        padding: 2vw 5vw 2vw 5vw;
    }

    .page7 .page7-bottom .btm-text {
        padding: 0;
        overflow: visible;
    }

    .page7 .page7-bottom .btm-text h2 {
        overflow: visible;
        margin-bottom: 4px;
    }

    .page7 .page7-bottom .btm-text h2 span {
        font-size: clamp(20px, 6.5vw, 38px);
        line-height: 1.5;
        word-wrap: break-word;
        overflow-wrap: break-word;
        overflow: visible;
    }

    /* Page 8 - Contact CTA mobile */
    .page8 {
        height: auto;
        min-height: auto;
        overflow: visible;
        padding: 0;
        margin-top: 0;
    }

    .page8 .text {
        flex-direction: column;
        gap: 2vw;
        padding: 4vw 5vw 2vw 5vw;
        overflow: visible;
        text-align: left;
    }

    .page8 .text h1 {
        font-size: clamp(36px, 12vw, 72px);
        word-wrap: break-word;
        overflow: visible;
        line-height: 1.05;
        text-align: left;
    }

    .page8 .text h3 {
        font-size: clamp(15px, 4vw, 20px);
        overflow: visible;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .page8 .text h3 i {
        font-size: clamp(14px, 3.5vw, 18px);
    }

    .page8 .page8-top-border {
        width: 90vw;
        display: none;
    }

    .page8 .contact-link {
        padding: 4vw 0;
    }

    .page8 .contact-link h3 {
        font-size: clamp(18px, 5vw, 30px);
        word-wrap: break-word;
        overflow: visible;
        min-height: 54px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Hide borders on mobile */
    .page2 .page2-top-border,
    .page5 .page5-top-border,
    .page7 .page7-top-border {
        display: none !important;
    }

    /* Swiper mobile optimization */
    .swiper {
        height: 42vh;
        margin-top: 0;
        overflow: visible;
        position: relative;
        z-index: 1;
    }

    .swiper-slide {
        pointer-events: auto;
        height: 100%;
    }

    .swiper-slide img {
        max-height: 100%;
        height: 100%;
        width: 100%;
        object-fit: contain;
    }

    /* Page 9 - CTA section mobile */
    .page9 {
        height: auto;
        min-height: 10vh;
        overflow: visible;
        padding: 2vw 5vw;
    }

    .page9 .page9-text {
        height: auto;
        overflow: visible;
        padding: 0;
    }

    .page9 .page9-text h1 {
        font-size: clamp(26px, 8vw, 48px);
        line-height: 1.2;
        word-wrap: break-word;
        overflow: visible;
        min-height: 54px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Footer - Mobile optimized & redesigned */
    footer {
        height: auto;
        min-height: auto;
        overflow: visible;
        padding: 0;
        display: block;
        visibility: visible;
        opacity: 1;
        background-color: #0e0e0e;
        position: relative;
        width: 100%;
        /* Clearance for mobile bottom nav */
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }

    footer .footer-top {
        height: auto;
        flex-direction: column;
        gap: 0;
        padding: 10vw 6vw 6vw 6vw;
        overflow: visible;
        display: flex !important;
        width: 100%;
        align-items: stretch;
    }

    /* Footer fade-in on scroll (pure CSS - no JS dependency) */
    .footer-top .first,
    .footer-top .second,
    footer .footer-bottom {
        opacity: 1;
        transform: translateY(0);
    }

    .footer-top .first {
        gap: 4vw;
        padding: 0 0 6vw 0;
        width: 100%;
        overflow: visible;
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .footer-top .first .first-top h2 {
        font-size: clamp(26px, 7vw, 36px);
        overflow: visible;
        word-wrap: break-word;
        line-height: 1.25;
        text-align: left;
        letter-spacing: -0.5px;
    }

    .footer-top .first .first-top button {
        font-size: clamp(14px, 3.5vw, 18px);
        padding: 14px 24px;
        margin-top: 4vw;
        min-height: 54px;
        border-radius: 50px;
    }

    .footer-top .first .first-btm {
        margin-top: 2vw;
    }

    .footer-top .first .first-btm h4 {
        font-size: clamp(13px, 3.2vw, 16px);
        overflow: visible;
        word-wrap: break-word;
        line-height: 1.6;
        text-align: left;
        color: rgba(255, 255, 255, 0.55);
    }

    .footer-cta {
        font-size: clamp(14px, 3.5vw, 18px);
        padding: 14px 24px;
        min-height: 54px;
    }

    .footer-top .second {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0;
        padding: 6vw 0 0 0;
        margin-top: 0;
        width: 100%;
        align-items: flex-start;
        overflow: visible;
    }

    /* Two-column layout for footer links */
    .second .second-one {
        gap: 0;
        width: 50%;
        overflow: visible;
        display: flex;
        flex-direction: column;
    }

    .second .second-one .span {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-bottom: 3vw;
    }

    .second .second-one .span span,
    .second .second-two .span span {
        font-size: clamp(14px, 3.5vw, 18px);
        overflow: visible;
        margin-bottom: 0;
        min-height: 44px;
        display: flex;
        align-items: center;
        color: rgba(255, 255, 255, 0.7);
    }

    .second .second-one .span span a,
    .second .second-two .span span a {
        min-height: 44px;
        display: flex;
        align-items: center;
        color: rgba(255, 255, 255, 0.7);
        transition: color 0.25s ease;
    }

    .second .second-one .span span a:hover,
    .second .second-two .span span a:hover {
        color: #fff;
    }

    /* Hide "Let's talk" (last span) in footer on mobile */
    .second .second-one .span > span:last-child {
        display: none;
    }

    .second .second-one .span1 span,
    .second .second-two .span1 span {
        font-size: clamp(12px, 2.8vw, 14px);
        overflow: visible;
        color: rgba(255, 255, 255, 0.35);
    }

    .second .second-two {
        gap: 0;
        width: 50%;
        overflow: visible;
        display: flex;
        flex-direction: column;
    }

    .second .second-two .span {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-bottom: 3vw;
    }

    /* Social icons - horizontal row */
    .second .second-two .span span i {
        font-size: 18px;
        margin-right: 6px;
        vertical-align: middle;
    }

    /* Copyright & rights row */
    .second .second-one .span1,
    .second .second-two .span1 {
        margin-top: 2vw;
    }

    footer .footer-bottom {
        height: auto;
        min-height: 80px;
        padding: 6vw 6vw 4vw 6vw;
        width: 100%;
        overflow: visible;
        display: flex;
        justify-content: center;
        align-items: center;
        visibility: visible;
        opacity: 1;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    footer .footer-bottom img {
        max-width: 100%;
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }

    footer .footer-logo-pc {
        display: none !important;
        visibility: hidden;
    }

    footer .footer-logo-mobile {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100%;
        max-width: 100%;
    }

    footer .footer-bottom h1 span {
        font-size: 20vw;
        margin-top: 0;
        overflow: visible;
    }

    /* Menu for mobile - Premium touch experience */
    .menu-sec {
        flex-direction: column;
        padding: 6vw 5vw;
        margin-top: 4vw;
    }

    .menu-sec .links {
        gap: 5vw;
    }

    .menu-sec .links h3 {
        margin-right: 0;
        font-size: clamp(28px, 8vw, 48px);
        -webkit-tap-highlight-color: transparent;
        min-height: 54px;
        display: flex;
        align-items: center;
    }

    .menu-sec .links button {
        font-size: clamp(28px, 8vw, 48px);
        -webkit-tap-highlight-color: transparent;
        min-height: 54px;
        display: flex;
        align-items: center;
        padding: 0;
        margin: 0;
        margin-right: 0;
    }

    /* Hide menu border on mobile */
    .menu .menu-border {
        display: none;
    }

    /* Hide social links on mobile */
    .menu .small-links {
        display: none;
    }

    /* Ensure Let's Talk button is visible on mobile */
    .menu.active {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .menu-sec .links .lets-talk-btn {
        display: none !important;
    }
    }

    #close {
        top: 4vw;
        right: 5vw;
        font-size: clamp(18px, 5vw, 24px);
        min-width: 54px;
        min-height: 54px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Remove tap highlight on all interactive elements */
    a,
    button,
    .cursor,
    nav,
    .page4 .page4-video .item,
    input,
    textarea,
    select {
        -webkit-tap-highlight-color: transparent;
    }

    /* Ensure all images scale properly */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Videos - responsive and optimized */
    video {
        max-width: 100%;
        height: auto;
    }
}

/* Extra small devices (phones < 480px) - Fine-tuned mobile experience */
@media (max-width: 480px) {
    /* Global mobile enhancements */
    html, body {
        font-size: 16px; /* Prevent zoom on input focus */
    }

    /* Hero section */
    .page1 .inner-content h1 {
        font-size: 15vw;
        letter-spacing: -0.7vw;
        line-height: 1;
    }

    .agency-text p {
        font-size: 15px;
    }

    /* Page 2 */
    .page2 .page2-top {
        padding: 6vw 5vw 3vw 5vw;
    }

    .page2 .page2-bottom .btm-text h2 span {
        font-size: clamp(18px, 6vw, 34px);
    }

    /* Page 3 */
    .page3 .page3-text h1 {
        font-size: clamp(24px, 9vw, 52px);
        padding: 14px 28px;
    }

    /* Page 5 */
    .page5 .page5-bottom .btm-text h2 span {
        font-size: clamp(16px, 5.5vw, 28px);
    }

    /* Page 7 */
    .page7 .page7-bottom .btm-text h2 span {
        font-size: clamp(18px, 6vw, 34px);
    }

    /* Page 8 */
    .page8 .text h1 {
        font-size: clamp(32px, 13vw, 64px);
        text-align: left;
    }

    .page8 .text h3 {
        font-size: clamp(15px, 4.5vw, 20px);
    }

    .page8 .contact-link h3 {
        font-size: clamp(16px, 5.5vw, 28px);
    }

    /* Page 4 - Work section - Enhanced for small screens */
    .page4 .page4-text {
        gap: 4vw;
        padding: 6vw 5vw 3vw 5vw;
        margin-bottom: 0;
        z-index: 10;
    }

    .page4 .page4-text h2:first-child {
        margin-bottom: 2vw;
    }

    .page4 .page4-text a {
        z-index: 100;
        min-height: 54px;
        display: flex;
        align-items: center;
    }

    .work-button-wrapper {
        margin-top: 4vw;
        margin-bottom: 0;
        gap: 3vw;
        z-index: 100;
        min-height: 54px;
        padding: 4vw 6vw;
    }

    .work-button-wrapper h2 {
        font-size: clamp(16px, 5vw, 24px) !important;
        white-space: nowrap;
        pointer-events: auto;
    }

    .work-button-wrapper i {
        font-size: 7vw;
        pointer-events: auto;
    }

    .page4 .page4-video {
        padding: 4vw 5vw 8vw 5vw;
        margin-top: 0;
        gap: 5vw;
    }

    .page4 .page4-video .item {
        height: 60vw;
        min-height: 200px;
    }

    /* Menu mobile - Compact */
    .menu-sec .links h3 {
        font-size: clamp(26px, 9vw, 44px);
    }

    /* Footer - Compact, clean */
    .footer-top .first .first-top h2 {
        font-size: clamp(22px, 7.5vw, 34px);
        line-height: 1.2;
    }

    .footer-top .first .first-btm h4 {
        font-size: clamp(13px, 3.5vw, 16px);
    }

    .second .second-one .span span,
    .second .second-two .span span {
        font-size: clamp(13px, 3.8vw, 18px);
        margin-bottom: 0;
    }

    .second .second-one .span {
        gap: 0;
        margin-bottom: 4vw;
    }

    .second .second-two .span {
        gap: 0;
        margin-bottom: 4vw;
    }

    footer .footer-logo-pc {
        display: none !important;
    }

    footer .footer-logo-mobile {
        display: block !important;
    }

    /* Improve touch targets - 44px minimum */
    nav #menu {
        padding: 12px 16px;
        min-width: 70px;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .footer-top .first .first-top button {
        padding: 14px 22px;
        min-height: 54px;
    }

    /* Video controls */
    .page4 .page4-video .item {
        height: 55vw;
        min-height: 180px;
    }

    .swiper {
        height: 50vh;
    }

    /* Page 9 */
    .page9 .page9-text h1 {
        font-size: clamp(22px, 9vw, 44px);
    }
}

/* Mobile landscape orientation */
@media (max-width: 896px) and (orientation: landscape) {
    .page1 {
        min-height: 100vh;
    }

    .page1 .inner-content h1 {
        font-size: 10vh;
    }

    .page6 .page6-text .seat span,
    .page6 .page6-text .seat h2 {
        font-size: 6vh;
    }

    .page6 .page6-text span {
        font-size: 3vh;
    }

    footer .footer-bottom h1 span {
        font-size: 15vh;
    }
}

/* ===== WORK PAGE ===== */
body.work {
    background-color: #0b0b0b;
}

.work-hero {
    height: 85vh;
    width: 100vw;
    background: #0b0b0b;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #fff;
    z-index: 5;
}
.work-hero-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1vw;
}
.work-hero .work-title {
    font-family: rejo;
    font-size: clamp(48px, 12vw, 180px);
    letter-spacing: -0.5vw;
    line-height: 1;
    word-wrap: break-word;
    text-align: center;
}
.work-hero .work-sub {
    font-family: nb;
    font-weight: lighter;
    color: #cfcfcf;
    letter-spacing: 0.2vw;
    font-size: clamp(16px, 2vw, 32px);
}
.scroll-indicator {
    height: 34px;
    width: 18px;
    border: 1px solid #fff;
    border-radius: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
}
.scroll-indicator span {
    display: block;
    height: 8px;
    width: 2px;
    background: #fff;
    border-radius: 10px;
    margin-top: 6px;
    animation: scrollDot 1.6s ease-in-out infinite;
}
@keyframes scrollDot {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(12px);
    }
    100% {
        transform: translateY(0);
    }
}

.work-scroller {
    height: 100vh;
    width: 100vw;
    background: #0b0b0b;
    position: relative;
    overflow: hidden;
    z-index: 10;
}
.work-track {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
}
.project {
    flex: 0 0 100vw;
    height: 100vh;
    position: relative;
    cursor: pointer;
}
.project-video {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.project::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.15));
    pointer-events: none;
}

/* ===== ABOUT PAGE ===== */
body.about {
    background: #fff;
    color: #141414;
}
body.about nav h2:first-child {
    display: none;
}
.about-hero {
    height: 60vh;
    width: 100vw;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
}
.about-hero-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1vw;
}
.about-hero .about-sub {
    font-family: rejo;
    font-weight: 500;
    color: #141414;
    letter-spacing: -0.2vw;
    font-size: clamp(32px, 6vw, 90px);
    line-height: 1.05;
    word-wrap: break-word;
}
.about-video {
    width: 100vw;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2vw 3vw;
}
.about-video-inner {
    max-width: 1200px;
    width: 100%;
    will-change: transform;
}
.about-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    will-change: transform, border-radius;
    backface-visibility: hidden;
    transform: translateZ(0);
}
.about-video-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}
.about-intro {
    width: 100vw;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2vw 3vw;
}
.about-intro-inner {
    max-width: 900px;
}
.about-intro-inner p {
    font-size: clamp(18px, 2vw, 32px);
    line-height: 1.5;
    color: #141414;
}
.about-intro-inner p .word {
    display: inline-block;
    overflow: hidden;
}
.about-intro-inner p .word span {
    display: inline-block;
}
.about-principles {
    width: 100vw;
    background: #fff;
    padding: 2vw 3vw;
}
.principles-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2vw;
}
.principles-inner .principle {
    background: #f5f5f5;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 2vw;
}
.principles-inner .principle h3 {
    font-weight: lighter;
    font-size: 2vw;
    letter-spacing: -0.5px;
}
.principles-inner .principle p {
    color: #3a3a3a;
    margin-top: 1vw;
}
.about-awards {
    width: 100vw;
    background: #fff;
    padding: 2vw 3vw;
}
.awards-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2vw;
}
.awards-inner .award {
    flex: 0 0 40%;
}
.awards-inner .award h2 {
    font-weight: lighter;
    font-size: 2.5vw;
}
.awards-inner .award-cards {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1vw;
}
.award-cards .card {
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 1.5vw;
    background: #fafafa;
}
.award-cards .card h4 {
    font-weight: lighter;
}
.award-cards .card span {
    color: #5a5a5a;
}
.about-team {
    width: 100vw;
    background: #fff;
    padding: 2vw 3vw;
}
.team-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2vw;
}
.team-copy {
    flex: 0 0 38%;
    text-align: center;
}
.team-copy h2 {
    font-weight: lighter;
    font-size: 2.5vw;
}
.team-copy p {
    color: #3a3a3a;
    margin-top: 1vw;
}
.team-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1vw;
}
.team-grid .member {
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 1.2vw;
    background: #fafafa;
    min-height: 120px;
}
.team-grid .member h4 {
    font-weight: lighter;
}
.team-grid .member p {
    color: #5a5a5a;
    margin-top: 0.6vw;
}
.team-profile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4vw;
    margin-top: 2vw;
}
.team-profile.reverse {
    flex-direction: row-reverse;
}
.team-profile.deven-profile {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 3vw;
}
.team-profile.pratham-profile {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 3vw;
}
.team-profile.tushar-profile {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 3vw;
}
.team-profile.anirudh-profile {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 3vw;
}
.profile-left {
    flex: 0 0 40%;
}
.profile-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    object-fit: cover;
}
.profile-img.deven-img {
    aspect-ratio: 1/1;
    width: 50vw;
    height: 50vw;
    max-width: 600px;
    max-height: 600px;
}
.profile-img.divyansh-img {
    aspect-ratio: 1/1;
    width: 50vw;
    height: 50vw;
    max-width: 600px;
    max-height: 600px;
}
.profile-img.pratham-img {
    aspect-ratio: 1/1;
    width: 50vw;
    height: 50vw;
    max-width: 600px;
    max-height: 600px;
}
.profile-img.digvijay-img {
    aspect-ratio: 1/1;
    width: 50vw;
    height: 50vw;
    max-width: 600px;
    max-height: 600px;
}
.profile-img.tushar-img {
    aspect-ratio: 1/1;
    width: 50vw;
    height: 50vw;
    max-width: 600px;
    max-height: 600px;
}
.profile-img.isha-img {
    aspect-ratio: 1/1;
    width: 50vw;
    height: 50vw;
    max-width: 600px;
    max-height: 600px;
}
.profile-img.anirudh-img {
    aspect-ratio: 1/1;
    width: 50vw;
    height: 50vw;
    max-width: 600px;
    max-height: 600px;
}
.deven-profile-left {
    flex: 0 0 auto;
}
.divyansh-profile-left {
    flex: 0 0 auto;
}
.pratham-profile-left {
    flex: 0 0 auto;
}
.digvijay-profile-left {
    flex: 0 0 auto;
}
.tushar-profile-left {
    flex: 0 0 auto;
}
.isha-profile-left {
    flex: 0 0 auto;
}
.anirudh-profile-left {
    flex: 0 0 auto;
}
.profile-left .profile-img + .profile-img {
    margin-top: 1vw;
}
.profile-right .profile-img {
    margin-bottom: 1vw;
}
.profile-right {
    flex: 1;
}
.profile-blurb {
    color: #3a3a3a;
    margin-bottom: 1vw;
}
.deven-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5vw;
    margin-top: 2vw;
    text-align: center;
}
.divyansh-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5vw;
    margin-top: 2vw;
    text-align: center;
}
.pratham-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5vw;
    margin-top: 2vw;
    text-align: center;
}
.digvijay-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5vw;
    margin-top: 2vw;
    text-align: center;
}
.tushar-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5vw;
    margin-top: 2vw;
    text-align: center;
}
.isha-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5vw;
    margin-top: 2vw;
    text-align: center;
}
.anirudh-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5vw;
    margin-top: 2vw;
    text-align: center;
}
.profile-meta {
    display: flex;
    align-items: baseline;
    gap: 0.6vw;
    margin-bottom: 0.8vw;
}
.profile-name {
    font-weight: lighter;
    font-size: 1.6vw;
}
.profile-title {
    color: #5a5a5a;
}
.linkedin-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.1vw;
    color: #141414;
    text-decoration: none;
    font-family: nb;
}
.linkedin-btn i {
    font-size: 1.1vw;
}
.link-underline {
    position: relative;
}
.link-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 1px;
    width: 100%;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.link-underline:hover::after {
    transform: scaleX(1);
}

@media (max-width: 768px) {
    .about-intro-inner p {
        font-size: clamp(16px, 5vw, 22px);
        line-height: 1.6;
    }
    .about-hero .about-sub {
        font-size: 10vw;
        letter-spacing: -0.5vw;
        padding: 0 3vw;
    }
    .about-hero {
        min-height: auto;
        padding: 60px 5vw 10px;
    }
    .about-video {
        padding: 0 3vw 2vw;
    }
    .about-video-wrap {
        border-radius: 10px;
    }
    .about-intro {
        padding: 5vw 5vw;
    }
    .principles-inner {
        grid-template-columns: 1fr;
        gap: 3vw;
    }
    .principles-inner .principle {
        padding: 5vw 5vw;
        border-radius: 12px;
    }
    .principles-inner .principle h3 {
        font-size: clamp(18px, 5vw, 24px);
    }
    .principles-inner .principle p {
        font-size: clamp(14px, 4vw, 17px);
        line-height: 1.6;
        margin-top: 2vw;
    }
    .about-principles {
        padding: 5vw 5vw;
    }
    .awards-inner {
        flex-direction: column;
        gap: 4vw;
    }
    .awards-inner .award {
        flex: unset;
    }
    .awards-inner .award h2 {
        font-size: clamp(20px, 6vw, 30px);
    }
    .awards-inner .award-cards {
        grid-template-columns: 1fr 1fr;
        gap: 2vw;
    }
    .award-cards .card {
        padding: 3vw;
        border-radius: 10px;
    }
    .about-awards {
        padding: 5vw 5vw;
    }
    .team-inner {
        flex-direction: column;
        gap: 4vw;
    }
    .team-copy {
        flex: unset;
    }
    .team-copy h2 {
        font-size: clamp(20px, 6vw, 30px);
    }
    .team-copy p {
        font-size: clamp(14px, 4vw, 17px);
        line-height: 1.6;
    }
    .team-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2vw;
    }
    .team-grid .member {
        padding: 3vw;
        border-radius: 10px;
        min-height: 100px;
    }
    .about-team {
        padding: 5vw 5vw;
    }
    .team-profile {
        flex-direction: column;
        gap: 4vw;
    }
    .team-profile.deven-profile {
        flex-direction: column;
        align-items: center;
    }
    .team-profile.pratham-profile {
        flex-direction: column;
        align-items: center;
    }
    .team-profile.tushar-profile {
        flex-direction: column;
        align-items: center;
    }
    .team-profile.anirudh-profile {
        flex-direction: column;
        align-items: center;
    }
    .profile-left {
        flex: unset;
        width: 100%;
    }
    .pratham-profile-left,
    .digvijay-profile-left,
    .tushar-profile-left,
    .isha-profile-left,
    .anirudh-profile-left {
        width: 100%;
    }
    .profile-img.deven-img,
    .profile-img.divyansh-img,
    .profile-img.pratham-img,
    .profile-img.digvijay-img,
    .profile-img.tushar-img,
    .profile-img.isha-img,
    .profile-img.anirudh-img {
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: none;
    }
    .profile-name {
        font-size: clamp(18px, 5vw, 24px);
    }
    .linkedin-btn i {
        font-size: clamp(18px, 5vw, 24px);
    }
    .deven-info,
    .divyansh-info,
    .pratham-info,
    .digvijay-info,
    .tushar-info,
    .isha-info,
    .anirudh-info {
        margin-top: 4vw;
    }
}
.project-meta {
    position: absolute;
    left: 4vw;
    bottom: 6vw;
    color: #fff;
}
.project-title {
    font-family: rejo;
    font-size: 7vw;
    font-weight: 500;
    line-height: 0.9;
}
.project-category {
    font-family: nb;
    font-size: 1.1vw;
    color: #cfcfcf;
    opacity: 0;
    transition: opacity 0.35s ease;
    letter-spacing: 0.12vw;
}
.project-tag {
    font-family: nb;
    font-size: 1vw;
    color: #9c9c9c;
    letter-spacing: 0.2vw;
    margin-top: 0.6vw;
}

.view-cursor {
    position: fixed;
    left: 0;
    top: 0;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: nb;
    font-size: 14px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
}

.project-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    z-index: 10000;
}
.project-overlay .overlay-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #0f0f0f;
    border-radius: 12px;
    max-width: 80vw;
    width: 80vw;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
.project-overlay .overlay-close {
    position: absolute;
    right: 12px;
    top: 12px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}
.project-overlay .overlay-body {
    padding: 2vw;
    color: #fff;
}
.overlay-title {
    font-family: rejo;
    font-size: 4vw;
    margin-bottom: 1vw;
}
.overlay-video {
    width: 100%;
    height: 60vh;
    object-fit: cover;
    border-radius: 8px;
}

.work-footer {
    height: 50vh;
    width: 100vw;
    background: #0b0b0b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #222;
}
.work-footer .footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2vw;
}
.work-footer .cta {
    font-family: rejo;
    font-size: 6vw;
    text-align: center;
}
.work-footer .footer-links {
    display: flex;
    align-items: center;
    gap: 2vw;
}
.work-footer .contact-link {
    font-family: nb;
    color: #cfcfcf;
    text-decoration: none;
    position: relative;
}
.work-footer .socials a {
    color: #cfcfcf;
    font-size: 22px;
}

@media (max-width: 1023px) {
    .work-hero .work-title {
        font-size: 16vw;
        letter-spacing: -0.5vw;
    }
    .project-title {
        font-size: 10vw;
    }
    .project-category {
        font-size: 2.8vw;
    }
    .project-tag {
        font-size: 2.6vw;
    }
}
@media (max-width: 768px) {
    .work-hero {
        height: 70vh;
        height: 70dvh;
        padding: 0 5vw;
    }
    .work-hero-inner {
        gap: 2vw;
    }
    .work-hero .work-title {
        font-size: 18vw;
        letter-spacing: -0.7vw;
        line-height: 0.95;
    }
    .work-hero .work-sub {
        font-size: clamp(14px, 3.5vw, 18px);
        letter-spacing: 0.15vw;
        text-align: center;
    }
    .scroll-indicator {
        height: 30px;
        width: 16px;
    }
    .scroll-indicator span {
        height: 6px;
        margin-top: 5px;
    }
    .work-scroller {
        height: auto;
        overflow: visible;
    }
    .work-track {
        flex-direction: column;
        gap: 0;
    }
    .project {
        flex: 0 0 auto;
        height: 50vh;
        height: 50dvh;
        width: 100%;
    }
    .project-info {
        padding: 3vw 5vw;
    }
    .project-title {
        font-size: 9vw;
        letter-spacing: -0.3vw;
    }
    .project-category {
        font-size: clamp(13px, 3.5vw, 16px);
    }
    .project-tags {
        gap: 2vw;
        margin-top: 2vw;
    }
    .project-tag {
        font-size: clamp(11px, 3vw, 14px);
        padding: 1.5vw 3vw;
    }
    .view-cursor {
        display: none;
    }
    .overlay-title {
        font-size: 10vw;
        letter-spacing: -0.4vw;
    }
    .overlay-close {
        width: 44px;
        height: 44px;
        font-size: 28px;
        top: 15px;
        right: 15px;
    }
    .overlay-video {
        height: 35vh;
        height: 35dvh;
        width: 95%;
    }
    .overlay-info {
        padding: 4vw;
    }
    .overlay-desc {
        font-size: clamp(14px, 3.5vw, 16px);
        line-height: 1.6;
    }
    .work-footer {
        padding: 6vw 5vw;
    }
    .work-footer .cta {
        font-size: 12vw;
        letter-spacing: -0.6vw;
        text-align: left;
    }
    .work-footer .footer-links {
        flex-direction: column;
        gap: 4vw;
        margin-top: 6vw;
        align-items: flex-start;
    }
    .work-footer .contact-link,
    .work-footer .socials a {
        font-size: clamp(14px, 3.5vw, 18px);
        padding: 12px;
    }
}

/* ===== SERVICES PAGE ===== */
.services-intro {
    height: 100vh;
    width: 100vw;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.services-intro .grain {
    position: absolute;
    inset: 0;
    background: radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 3px 3px;
    pointer-events: none;
}
.intro-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.8vw;
    position: relative;
    z-index: 2;
}
.services-intro .intro-inner {
    margin-top: 5vh;
}
.intro-line {
    font-family: nb;
    font-weight: bold;
    font-size: clamp(48px, 10vw, 160px);
    letter-spacing: -0.5vw;
    line-height: 0.9;
    color: #141414;
    text-transform: uppercase;
    white-space: normal;
    word-wrap: break-word;
}
.intro-sub {
    font-family: nb;
    color: #3a3a3a;
    letter-spacing: 0.2vw;
}

.services-presence {
    width: 100vw;
    background: #fff;
    padding: 1vw 3vw 6vw 3vw;
}
.presence-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3vw;
}
.svc-item {
    display: flex;
    align-items: flex-start;
    gap: 2vw;
    color: #141414;
}
.svc-index {
    font-family: nb;
    color: #9c9c9c;
}
.svc-title {
    font-family: nb;
    font-weight: bold;
    font-size: 6vw;
    letter-spacing: -0.4vw;
    line-height: 0.95;
    text-transform: uppercase;
}
.svc-copy {
    font-family: nb;
    color: #3a3a3a;
    max-width: 420px;
}

.service-story {
    width: 100vw;
    background: #fff;
    padding: 6vw 3vw;
}
.service-story .story-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3vw;
}
.service-story.reverse .story-inner {
    flex-direction: row-reverse;
}
.story-copy {
    flex: 0 0 42%;
}
.story-title {
    font-family: nb;
    font-weight: bold;
    font-size: 5vw;
    letter-spacing: -0.3vw;
    line-height: 0.95;
    color: #141414;
    text-transform: uppercase;
}
.story-desc {
    font-family: nb;
    color: #3a3a3a;
    margin-top: 1vw;
}
.story-media {
    flex: 1;
}
.story-media video,
.story-media img {
    width: 100%;
    height: 60vh;
    object-fit: cover;
    border-radius: 12px;
    filter: contrast(1.02);
}
.service-story.story-2 .story-title {
    margin-bottom: 0.2vw;
    white-space: nowrap;
    font-size: 4.2vw;
    letter-spacing: -0.2vw;
}
.service-story.story-2 .story-desc {
    margin-top: 0.2vw;
}
.service-story.story-2 .story-copy {
    flex: 0 0 48%;
}

.services-philosophy {
    width: 100vw;
    background: #fff;
    padding: 0vw 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.philo-inner {
    max-width: 900px;
    text-align: center;
}
.philo-title {
    font-family: nb;
    font-weight: bold;
    font-size: 6vw;
    letter-spacing: -0.3vw;
    color: #141414;
    text-transform: uppercase;
}
.philo-copy {
    font-family: nb;
    color: #3a3a3a;
    margin-top: 1vw;
}

.services-cta {
    width: 100vw;
    background: #fff;
    padding: 0vw 3vw 8vw 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vw;
}
.cta-title {
    font-family: nb;
    font-weight: bold;
    font-size: 10vw;
    letter-spacing: -0.8vw;
    color: #141414;
    text-transform: uppercase;
}
.cta-link {
    font-family: nb;
    color: #141414;
    text-decoration: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.3vw;
}
.cta-link::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #141414;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.35s ease-out;
}
.cta-link:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}
.cta-link .cta-text {
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.cta-link .cta-text span {
    display: inline-block;
    transition: transform 0.35s ease-out;
}
.cta-link .cta-text .text-default {
    transform: translateY(0);
}
.cta-link .cta-text .text-hover {
    position: absolute;
    left: 0;
    transform: translateY(100%);
}
.cta-link:hover .cta-text .text-default {
    transform: translateY(-100%);
}
.cta-link:hover .cta-text .text-hover {
    transform: translateY(0);
}
.cta-link i {
    font-size: 1.2vw;
    transition: transform 0.35s ease-out;
}
.cta-link:hover i {
    transform: translate(3px, -3px);
}

/* Services CTA button highlight - desktop */
.services-cta .cta-link {
    border: 2px solid rgba(20, 20, 20, 0.5);
    padding: 20px 40px;
    border-radius: 50px;
    font-size: 1.5vw;
    gap: 0.5vw;
    transition: all 0.4s ease;
}
.services-cta .cta-link::after {
    display: none;
}
.services-cta .cta-link:hover {
    border-color: #141414;
    background: rgba(20, 20, 20, 0.08);
}
.services-cta .cta-link i {
    font-size: 1.8vw;
}

@media (max-width: 768px) {
    .intro-line {
        font-size: 11vw;
        letter-spacing: -0.5vw;
        line-height: 1;
    }
    .intro-inner {
        gap: 0.3vw;
    }
    .intro-sub {
        margin-top: 0.5vw;
    }
    .services-intro .intro-inner {
        margin-top: 0;
        padding: 0 5vw;
    }
    .services-intro {
        min-height: auto;
        height: auto;
        padding: 12vh 0 8vh 0;
    }
    .svc-title {
        font-size: 9vw;
        letter-spacing: -0.5vw;
    }
    .svc-item {
        flex-direction: column;
        gap: 2vw;
    }
    .svc-copy {
        max-width: 100%;
        font-size: clamp(15px, 4vw, 18px);
        line-height: 1.6;
    }
    .services-presence {
        padding: 4vw 5vw;
    }
    .presence-inner {
        gap: 5vw;
    }
    .service-story .story-inner {
        flex-direction: column;
        gap: 4vw;
    }
    .service-story.reverse .story-inner {
        flex-direction: column;
    }
    .story-copy {
        flex: 0 0 auto;
        width: 100%;
    }
    .story-title {
        font-size: 8vw;
        letter-spacing: -0.5vw;
    }
    .story-desc {
        font-size: clamp(15px, 4vw, 18px);
        line-height: 1.6;
        margin-top: 2vw;
    }
    .story-media video,
    .story-media img {
        height: 45vh;
        border-radius: 10px;
    }
    .philo-title {
        font-size: 8vw;
        letter-spacing: -0.5vw;
    }
    .philo-copy {
        font-size: clamp(15px, 4vw, 18px);
        line-height: 1.6;
    }
    .cta-title {
        font-size: 14vw;
        letter-spacing: -0.8vw;
    }
    .services-philosophy {
        padding: 6vw 5vw;
    }
    .services-cta {
        padding: 6vw 5vw 10vw 5vw;
    }
    .cta-link {
        font-size: clamp(16px, 4.5vw, 22px);
        min-height: 54px;
        display: inline-flex;
        align-items: center;
    }
    .cta-link i {
        font-size: clamp(18px, 5vw, 24px);
    }
}
@media (max-width: 768px) {
    .service-story.story-2 .story-title {
        font-size: 7vw;
        letter-spacing: -0.4vw;
        white-space: nowrap;
    }
}

/* ===== SERVICES CLIENTS ===== */
.services-clients {
    height: auto;
    min-height: 0;
    width: 100vw;
    background: #fff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0vw 0;
}
.services-clients .grain {
    position: absolute;
    inset: 0;
    background: radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 3px 3px;
    pointer-events: none;
}
.clients-inner {
    max-width: 1200px;
    width: 100%;
    padding: 1vw;
    position: relative;
    z-index: 2;
}
.clients-label {
    display: block;
    font-family: nb;
    letter-spacing: 0.4vw;
    color: #5a5a5a;
    text-transform: uppercase;
    margin-bottom: 1vw;
}
.clients-heading {
    font-family: rejo;
    font-size: 6vw;
    letter-spacing: -0.3vw;
    color: #141414;
    line-height: 0.95;
    text-transform: uppercase;
    margin-bottom: 0.6vw;
}
.clients-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2vw;
    align-items: center;
}
.client {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    opacity: 0.3;
    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}
.client img {
    max-width: 100%;
    height: 40px;
    object-fit: contain;
    filter: grayscale(1) brightness(1.2);
    opacity: 1;
}
.client .logo-text {
    font-family: nb;
    color: #141414;
    letter-spacing: 0.2vw;
    text-transform: uppercase;
    font-size: 1.4vw;
}
.client:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

@media (max-width: 1024px) {
    .clients-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .client .logo-text {
        font-size: 2.4vw;
    }
}
@media (max-width: 768px) {
    .clients-heading {
        font-size: 9vw;
        letter-spacing: -0.6vw;
    }
    .clients-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6vw;
    }
    .client {
        min-height: 54px;
    }
    .client .logo-text {
        font-size: 4vw;
        letter-spacing: 0.3vw;
    }
}
body.contact {
    background: #0b0b0b;
    color: #fff;
}
.contact-intro {
    height: 100vh;
    width: 100vw;
    background: #0b0b0b;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.contact-intro .grain {
    position: absolute;
    inset: 0;
    background: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 3px 3px;
    pointer-events: none;
}
.contact-intro .intro-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.8vw;
    position: relative;
    z-index: 2;
    text-align: center;
}
.contact-intro .intro-line {
    font-family: rejo;
    font-size: clamp(42px, 12vw, 180px);
    letter-spacing: -0.6vw;
    line-height: 0.9;
    color: #fff;
    text-transform: uppercase;
    white-space: normal;
    word-wrap: break-word;
}
.contact-methods {
    width: 100vw;
    background: #0b0b0b;
    padding: 6vw 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.methods-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2vw;
}
.method {
    display: flex;
    align-items: baseline;
    gap: 1vw;
    color: #fff;
    text-decoration: none;
    position: relative;
}
.method .method-title {
    font-family: rejo;
    font-size: 6vw;
    letter-spacing: -0.4vw;
    line-height: 0.95;
    text-transform: uppercase;
    position: relative;
}
.method .method-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 1px;
    width: 100%;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.method:hover .method-title::after {
    transform: scaleX(1);
}
.method .method-sub {
    font-family: nb;
    color: #9c9c9c;
    letter-spacing: 0.2vw;
    margin-left: 0.8vw;
}
.contact-form {
    width: 100vw;
    background: #0b0b0b;
    padding: 8vw 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.form-inner {
    max-width: 900px;
    width: 100%;
}
.form-row {
    display: flex;
    flex-direction: column;
    gap: 0.6vw;
    margin-bottom: 2vw;
}
.form-row label {
    font-family: nb;
    color: #cfcfcf;
    letter-spacing: 0.2vw;
}
.form-row input,
.form-row textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid #222;
    color: #fff;
    outline: none;
    font-family: rejo;
    letter-spacing: -0.2vw;
    font-size: 4vw;
    padding: 0.6vw 0;
}
.form-row input::placeholder,
.form-row textarea::placeholder {
    color: #777;
}
.form-row input:focus,
.form-row textarea:focus {
    border-bottom-color: #fff;
}
.submit-wrap {
    margin-top: 2vw;
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.submit-wrap.visible {
    opacity: 1;
    pointer-events: auto;
}
.submit-btn {
    background: #fff;
    color: #000;
    border: none;
    border-radius: 999px;
    padding: 1vw 2vw;
    font-family: nb;
    letter-spacing: 0.2vw;
    cursor: pointer;
}
.contact-presence {
    width: 100vw;
    background: #0b0b0b;
    padding: 10vw 3vw 3vw 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.presence-inner {
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 1vw;
}
.presence-line {
    font-family: rejo;
    font-size: 8vw;
    letter-spacing: -0.5vw;
    line-height: 0.95;
    text-transform: uppercase;
    color: #fff;
}
.contact-closing {
    height: 60vh;
    width: 100vw;
    background: #0b0b0b;
    display: flex;
    align-items: center;
    justify-content: center;
}
.closing-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}
.closing-cta {
    font-family: rejo;
    font-size: 10vw;
    letter-spacing: -0.8vw;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
}

/* Client Testimonial Section */
.client-testimonial {
    width: 100vw;
    min-height: 100vh;
    background: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6vw 3vw;
    position: relative;
    overflow: hidden;
}
.testimonial-inner {
    max-width: 1400px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5vw;
}
.testimonial-left {
    flex: 1;
    height: 80vh;
    position: relative;
}
.testimonial-video-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
}
.testimonial-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.testimonial-video-wrap:hover .play-hint {
    opacity: 1;
}
.video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
}
.play-hint {
    color: #fff;
    font-family: nb;
    font-size: 0.9vw;
    letter-spacing: 0.1vw;
    opacity: 0;
    transition: opacity 0.35s ease-out;
    text-align: center;
    padding: 1vw;
}
.testimonial-right {
    flex: 0 0 35%;
    padding: 3vw 0;
}
.testimonial-content {
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
}
.testimonial-label {
    font-family: nb;
    font-size: 0.85vw;
    letter-spacing: 0.2vw;
    color: #9c9c9c;
    text-transform: uppercase;
    font-weight: normal;
}
.testimonial-brand {
    font-family: nb;
    font-weight: bold;
    font-size: 4vw;
    letter-spacing: -0.2vw;
    color: #fff;
    line-height: 1.1;
    text-transform: uppercase;
}
.testimonial-description {
    font-family: nb;
    font-size: 1.1vw;
    color: #cfcfcf;
    line-height: 1.6;
    font-weight: lighter;
}
.testimonial-quote {
    font-family: nb;
    font-size: 1.3vw;
    color: #fff;
    line-height: 1.6;
    font-weight: lighter;
    margin-top: 1vw;
    padding: 2vw;
    border-left: 3px solid #f53607;
    margin-left: 0;
    font-style: italic;
}

@media (max-width: 1024px) {
    .testimonial-inner {
        flex-direction: column;
        gap: 3vw;
    }
    .testimonial-left {
        height: 65vh;
    }
    .testimonial-right {
        flex: 0 0 auto;
        width: 100%;
    }
    .testimonial-brand {
        font-size: 6vw;
    }
    .testimonial-description {
        font-size: 1vw;
    }
    .testimonial-quote {
        font-size: 1.1vw;
        padding: 1.5vw;
    }
}

@media (max-width: 768px) {
    .client-testimonial {
        min-height: auto;
        padding: 6vw 3vw;
    }
    .testimonial-left {
        height: 70vh;
    }
    .testimonial-brand {
        font-size: 8vw;
    }
    .testimonial-description {
        font-size: 0.9vw;
    }
    .testimonial-quote {
        font-size: 1vw;
    }
    .play-hint {
        font-size: 2.5vw;
    }
}

@media (max-width: 480px) {
    .testimonial-video-wrap {
        border-radius: 12px;
    }
    .testimonial-label {
        font-size: 0.7vw;
    }
    .testimonial-brand {
        font-size: 10vw;
    }
    .testimonial-quote {
        padding: 1vw;
    }
}

@media (max-width: 1024px) {
    .contact-intro .intro-line {
        font-size: 12vw;
        letter-spacing: -0.7vw;
    }
    .method .method-title {
        font-size: 8vw;
        letter-spacing: -0.5vw;
    }
    .presence-line {
        font-size: 9vw;
        letter-spacing: -0.6vw;
    }
    .closing-cta {
        font-size: 12vw;
        letter-spacing: -0.8vw;
    }

    .scroll-down {
        bottom: 20px;
        right: 20px;
        font-size: 20px;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
    }
}
@media (max-width: 768px) {
    /* Hide Let's Talk button on all pages on phone */
    .mobile-lets-talk-btn {
        display: none !important;
    }

    .contact-intro {
        min-height: auto;
        height: auto;
        padding: 60px 5vw 5vw;
        align-items: flex-end;
    }
    .contact-intro .intro-line {
        font-size: 14vw;
        letter-spacing: -0.8vw;
        line-height: 1;
    }
    .contact-methods {
        padding: 5vw 5vw;
    }
    .methods-inner {
        gap: 4vw;
    }
    .method {
        flex-direction: column;
        gap: 2vw;
    }
    .method .method-title {
        font-size: 10vw;
        letter-spacing: -0.6vw;
    }
    .method .method-sub {
        margin-left: 0;
        font-size: clamp(13px, 3.5vw, 16px);
    }
    .contact-form {
        padding: 6vw 5vw;
    }
    .form-inner {
        max-width: 100%;
    }
    .form-row {
        margin-bottom: 4vw;
    }
    .form-row label {
        font-size: clamp(13px, 3.5vw, 16px);
        margin-bottom: 2vw;
    }
    .form-row input,
    .form-row textarea {
        font-size: clamp(24px, 7vw, 36px);
        padding: 2vw 0;
    }
    .submit-wrap {
        margin-top: 4vw;
    }
    .submit-btn {
        padding: 4vw 6vw;
        font-size: clamp(14px, 4vw, 18px);
        min-height: 56px;
        width: 100%;
    }
    .contact-presence {
        padding: 8vw 5vw 5vw 5vw;
    }
    .presence-inner {
        gap: 2vw;
    }
    .presence-line {
        font-size: 10vw;
        letter-spacing: -0.6vw;
        line-height: 1.1;
    }
    .contact-closing {
        height: auto;
        min-height: 40vh;
        padding: 6vw 5vw;
    }
    .closing-cta {
        font-size: 14vw;
        letter-spacing: -0.9vw;
        text-align: center;
    }
}
/* =============================================
   CINEMATIC SHOWREEL EXPERIENCE
   Inspired by Rejouice - Premium, Editorial, Film-like
   ============================================= */

/* Showreel Container */
.showreel-experience {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100000;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

.showreel-experience.active {
    pointer-events: all;
    opacity: 1;
    visibility: visible;
}

/* Dark Overlay */
.showreel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    cursor: pointer;
}

.showreel-experience.active .showreel-overlay {
    opacity: 1;
}

/* Video Container */
.showreel-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.92);
    opacity: 0;
}

/* Video Element */
.showreel-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}

.showreel-video.loaded {
    /* opacity controlled by GSAP */
}

/* Film Grain Overlay */
.film-grain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)" opacity="0.05"/></svg>');
    pointer-events: none;
    opacity: 0.3;
    mix-blend-mode: overlay;
    animation: grain 8s steps(10) infinite;
}

@keyframes grain {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -10%); }
    20% { transform: translate(-15%, 5%); }
    30% { transform: translate(7%, -25%); }
    40% { transform: translate(-5%, 25%); }
    50% { transform: translate(-15%, 10%); }
    60% { transform: translate(15%, 0%); }
    70% { transform: translate(0%, 15%); }
    80% { transform: translate(3%, 35%); }
    90% { transform: translate(-10%, 10%); }
}

/* ===== MINIMAL CONTROLS ===== */
.showreel-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 60px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    opacity: 1;
    pointer-events: all;
    z-index: 150;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
    transition: opacity 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

.showreel-controls.controls-hidden {
    opacity: 0;
    pointer-events: none;
}

.showreel-close.controls-hidden {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

.controls-top {
    width: 100%;
    max-width: 800px;
    display: flex;
    justify-content: center;
}

.controls-bottom {
    display: flex;
    align-items: center;
    gap: 30px;
}

/* Progress Bar Wrapper */
.progress-bar-wrapper {
    width: 100%;
    max-width: 600px;
    position: relative;
}

/* Progress Bar */
.progress-bar {
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: height 0.3s ease;
}

.progress-bar:hover {
    height: 3px;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: #fff;
    border-radius: 2px;
    transition: width 0.1s linear;
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.progress-bar:hover .progress-fill::after {
    opacity: 1;
}

/* Volume Button */
.volume-btn {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1);
    position: relative;
    z-index: 10;
}

.volume-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.4);
}

.volume-btn i {
    font-size: 22px;
    color: #fff;
    position: absolute;
    transition: all 0.3s ease;
}

.volume-on {
    opacity: 1;
    transform: scale(1);
}

.volume-off {
    opacity: 0;
    transform: scale(0.8);
}

.volume-btn.muted .volume-on {
    opacity: 0;
    transform: scale(0.8);
}

.volume-btn.muted .volume-off {
    opacity: 1;
    transform: scale(1);
}

/* Fullscreen Button */
.fullscreen-btn {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1);
    z-index: 10;
}

.fullscreen-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.4);
}

.fullscreen-btn i {
    font-size: 22px;
    color: #fff;
}

/* Play/Pause Button */
.play-pause-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    outline: none;
    position: relative;
    z-index: 10;
    transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1);
}

.play-pause-btn:hover {
    transform: scale(1.15);
}

.btn-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

.play-pause-btn:hover .btn-circle {
    background: #fff;
    box-shadow: 0 15px 60px rgba(0, 0, 0, 0.4);
}

.play-pause-btn i {
    font-size: 28px;
    color: #000;
    position: absolute;
    transition: all 0.3s ease;
}

.play-icon {
    opacity: 1;
    transform: scale(1);
    padding-left: 3px;
}

.pause-icon {
    opacity: 0;
    transform: scale(0.8);
}

.showreel-video.playing ~ .showreel-controls .play-icon {
    opacity: 0;
    transform: scale(0.8);
}

.showreel-video.playing ~ .showreel-controls .pause-icon {
    opacity: 1;
    transform: scale(1);
}

/* Close Button */
.showreel-close {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1);
    z-index: 200;
    gap: 2px;
    opacity: 1;
}

.showreel-close:hover {
    background: rgba(245, 54, 7, 0.9);
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.15);
    box-shadow: 0 10px 40px rgba(245, 54, 7, 0.4);
}

.close-inner {
    transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1);
}

.showreel-close:hover .close-inner {
    transform: rotate(90deg);
}

.showreel-close i {
    font-size: 26px;
    color: #fff;
}

.close-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-top: -2px;
}

/* Showreel Trigger Styles */
.showreel-trigger {
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.showreel-trigger h1 {
    transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

.showreel-trigger:hover h1 {
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.4);
    letter-spacing: 0.05em;
}

.showreel-play-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    position: relative;
    overflow: hidden;
}

.showreel-play-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0);
    transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

.showreel-trigger:hover .showreel-play-icon {
    transform: scale(1.15);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.15);
}

.showreel-trigger:hover .showreel-play-icon::before {
    background: rgba(255, 255, 255, 0.15);
}

.showreel-play-icon i {
    font-size: 28px;
    color: #fff;
    padding-left: 4px;
    transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
    position: relative;
    z-index: 2;
}

.showreel-trigger:hover .showreel-play-icon i {
    transform: scale(1.1);
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet */
@media (max-width: 1024px) {
    .showreel-controls {
        padding: 30px 40px 50px;
        gap: 20px;
    }
    
    .controls-bottom {
        gap: 25px;
    }
    
    .btn-circle {
        width: 65px;
        height: 65px;
    }
    
    .play-pause-btn i {
        font-size: 26px;
    }
    
    .volume-btn,
    .fullscreen-btn {
        width: 45px;
        height: 45px;
    }
    
    .volume-btn i,
    .fullscreen-btn i {
        font-size: 20px;
    }
    
    .showreel-close {
        top: 30px;
        right: 30px;
        width: 55px;
        height: 55px;
    }
    
    .showreel-close i {
        font-size: 24px;
    }
    
    .close-label {
        font-size: 9px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .showreel-controls {
        padding: 20px 20px 40px;
        gap: 15px;
    }
    
    .progress-bar-wrapper {
        max-width: 100%;
    }
    
    .controls-bottom {
        gap: 20px;
    }
    
    .btn-circle {
        width: 60px;
        height: 60px;
    }
    
    .play-pause-btn i {
        font-size: 24px;
    }
    
    .volume-btn,
    .fullscreen-btn {
        width: 42px;
        height: 42px;
    }
    
    .volume-btn i,
    .fullscreen-btn i {
        font-size: 18px;
    }
    
    .showreel-close {
        top: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
    }
    
    .showreel-close i {
        font-size: 22px;
    }
    
    .close-label {
        font-size: 8px;
    }
    
    .film-grain {
        opacity: 0.15;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .showreel-controls {
        padding: 15px 15px 30px;
    }
    
    .btn-circle {
        width: 55px;
        height: 55px;
    }
    
    .play-pause-btn i {
        font-size: 22px;
    }
}

/* ===== ACCESSIBILITY ===== */
.play-pause-btn:focus,
.showreel-close:focus {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 3px;
}

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 2px solid #f53607;
    outline-offset: 2px;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.showreel-experience,
.showreel-container,
.showreel-video,
.btn-circle {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .loader,
    .page-transition {
        display: none !important;
    }
}

/* Hide controls when not hovering (desktop only) */
@media (min-width: 769px) {
    .showreel-experience:not(:hover) .showreel-controls {
        opacity: 0;
        transition-delay: 2s;
    }
    
    .showreel-experience:hover .showreel-controls {
        opacity: 1;
        transition-delay: 0s;
    }
}

/* Cursor Interaction */
@media (min-width: 769px) {
    .showreel-video {
        cursor: auto;
    }
    
    .play-pause-btn,
    .showreel-close,
    .progress-bar {
        cursor: pointer;
    }
}

/* ===== UNIVERSAL DEVICE ENHANCEMENTS ===== */

/* High DPI / Retina displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Print styles */
@media print {
    nav, .menu, .cursor, .loader, .page-transition, footer {
        display: none !important;
    }
    
    body {
        background: #fff !important;
        color: #000 !important;
    }
    
    .main {
        overflow: visible !important;
        height: auto !important;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover effects on touch devices */
    .cursor {
        display: none !important;
    }
    
    /* Larger touch targets */
    a, button {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Faster transitions for touch feedback */
    a, button, .cta-button {
        transition-duration: 0.15s !important;
    }
    
    /* Disable hover-only effects */
    nav a::after {
        transform: scaleX(0) !important;
    }
    
    .work-button-wrapper:hover h2 .text-default,
    .page9 .page9-text h1.hover-text:hover .text-default {
        transform: none;
    }
}

/* Landscape orientation on mobile */
@media (max-width: 896px) and (orientation: landscape) {
    .page1 {
        min-height: 100vh;
        min-height: 100dvh;
    }
    
    .page3 {
        min-height: 80vh;
        min-height: 80dvh;
    }
    
    footer {
        height: auto;
        min-height: auto;
    }
    
    footer .footer-top {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .menu-sec {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .menu-sec .links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 3vw;
    }
    
    .menu-sec .links h3 {
        font-size: clamp(20px, 5vw, 36px);
    }
}

/* Very small devices (320px width) */
@media (max-width: 320px) {
    html {
        font-size: 14px;
    }
    
    nav h2 a {
        font-size: 18px;
    }
    
    nav #menu {
        padding: 10px 14px;
        min-width: 60px;
    }
    
    .page1 .inner-content h1 {
        font-size: 16vw;
    }
    
    .menu-sec .links h3 {
        font-size: clamp(22px, 10vw, 36px);
    }
    
    footer .footer-top .first .first-top h2 {
        font-size: clamp(18px, 8vw, 28px);
    }
}

/* iPhone SE / Small phones (375px or less) */
@media (max-width: 375px) {
    .page2 .page2-bottom .btm-text h2 span {
        font-size: clamp(17px, 5.5vw, 28px);
    }
    
    .page5 .page5-bottom .btm-text h2 span {
        font-size: clamp(15px, 5vw, 26px);
    }
    
    .page7 .page7-bottom .btm-text h2 span {
        font-size: clamp(17px, 5.5vw, 28px);
    }
    
    .swiper {
        height: 35vh;
    }
}

/* iPhone 14 Pro Max / Large phones (430px+) */
@media (min-width: 390px) and (max-width: 430px) {
    .page1 .inner-content h1 {
        font-size: 13vw;
    }
    
    .page2 .page2-bottom .btm-text h2 span {
        font-size: clamp(20px, 6vw, 36px);
    }
    
    .swiper {
        height: 45vh;
    }
}

/* ===== MOBILE-ONLY BUTTON HIGHLIGHTS ===== */
/* Makes tappable elements visually distinct on phones */
@media (max-width: 768px) {
    /* Page 4 — "See the work" / Portfolio CTA */
    .work-button-wrapper {
        border: 1px solid rgba(20, 20, 20, 0.25);
        padding: 10px 20px;
        border-radius: 50px;
        background: rgba(20, 20, 20, 0.05);
        transition: background 0.3s ease;
    }

    /* Page 5 — "get to know us" / About CTA */
    .page5 .page5-top .philosophy-cta h3 {
        border: 1px solid rgba(20, 20, 20, 0.25);
        padding: 8px 18px;
        border-radius: 50px;
        background: rgba(20, 20, 20, 0.05);
    }
    .page5 .page5-top .philosophy-cta h3::after {
        display: none;
    }

    /* Page 7 — "see our work" / Portfolio CTA */
    .page7 .page7-top .emotions-cta h3 {
        border: 1px solid rgba(20, 20, 20, 0.25);
        padding: 8px 18px;
        border-radius: 50px;
        background: rgba(20, 20, 20, 0.05);
    }
    .page7 .page7-top .emotions-cta h3::after {
        display: none;
    }

    /* Page 8 — Contact link */
    .page8 .contact-link h3 {
        border: 1px solid rgba(20, 20, 20, 0.25);
        padding: 10px 24px;
        border-radius: 50px;
        background: rgba(20, 20, 20, 0.05);
    }
    .page8 .contact-link h3::after {
        display: none;
    }

    /* Page 9 — Team member links */
    .page9 .page9-text h1.hover-text {
        border: 1px solid rgba(20, 20, 20, 0.25);
        padding: 6px 18px;
        border-radius: 50px;
        background: rgba(20, 20, 20, 0.05);
    }
    .page9 .page9-text h1::after {
        display: none;
    }

    /* Showreel trigger — play button area */
    .showreel-trigger {
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 20px 30px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.05);
    }

    /* Scroll down indicator */
    .scroll-down {
        border: 1px solid rgba(255, 255, 255, 0.3);
        padding: 8px 16px;
        border-radius: 50px;
        background: rgba(255, 255, 255, 0.08);
    }

    /* Services page — "Begin a conversation" CTA */
    .services-cta .cta-link {
        border: 1px solid rgba(20, 20, 20, 0.25);
        padding: 16px 32px;
        border-radius: 50px;
        background: rgba(20, 20, 20, 0.05);
        font-size: clamp(16px, 4.5vw, 22px);
        min-height: 54px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .services-cta .cta-link i {
        font-size: clamp(18px, 5vw, 24px);
    }
    .services-cta .cta-link::after {
        display: none;
    }
}

/* Mobile button highlights — Dark mode variant */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
    .work-button-wrapper {
        border-color: rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.08);
    }

    .page5 .page5-top .philosophy-cta h3 {
        border-color: rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.08);
    }

    .page7 .page7-top .emotions-cta h3 {
        border-color: rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.08);
    }

    .page8 .contact-link h3 {
        border-color: rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.08);
    }

    .page9 .page9-text h1.hover-text {
        border-color: rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.08);
    }

    .services-cta .cta-link {
        border-color: rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.08);
    }
}

/* Dark mode support - handled automatically via CSS prefers-color-scheme in compat.css */
/* Services and about pages adapt to system dark mode */
@media (prefers-color-scheme: dark) {
    /* === Services Page Dark Mode === */
    body.services {
        background: #0a0a0a;
        color: #ffffff;
    }
    body.services nav {
        color: #fff;
    }
    body.services nav a,
    body.services nav h2 a {
        color: #fff;
    }
    body.services nav a::after {
        background-color: #fff;
    }
    body.services nav a:hover {
        color: #fff;
    }
    body.services nav.nav-dark a,
    body.services nav.nav-dark h2 a {
        color: #fff;
    }
    body.services nav.nav-scrolled {
        background: rgba(10, 10, 10, 0.95);
    }
    body.services .mobile-bottom-nav {
        background: rgba(10, 10, 10, 0.95);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    body.services .mobile-nav-item {
        color: rgba(255, 255, 255, 0.6);
    }
    body.services .services-intro {
        background: #0a0a0a;
    }
    body.services .intro-line {
        color: #ffffff;
    }
    body.services .intro-sub {
        color: #b0b0b0;
    }
    body.services .services-presence {
        background: #0a0a0a;
    }
    body.services .svc-item {
        color: #ffffff;
    }
    body.services .svc-index {
        color: #777;
    }
    body.services .svc-copy {
        color: #b0b0b0;
    }
    body.services .service-story {
        background: #0a0a0a;
    }
    body.services .story-title {
        color: #ffffff;
    }
    body.services .story-desc {
        color: #b0b0b0;
    }
    body.services .services-philosophy {
        background: #0a0a0a;
    }
    body.services .philo-title {
        color: #ffffff;
    }
    body.services .philo-copy {
        color: #b0b0b0;
    }
    body.services .services-cta {
        background: #0a0a0a;
    }
    body.services .cta-title {
        color: #ffffff;
    }
    body.services .cta-link {
        color: #ffffff;
        border: 2px solid rgba(255, 255, 255, 0.5);
        padding: 20px 40px;
        border-radius: 50px;
        font-size: 1.5vw;
        transition: all 0.4s ease;
    }
    body.services .cta-link:hover {
        border-color: #ffffff;
        background: rgba(255, 255, 255, 0.12);
    }
    body.services .cta-link::after {
        display: none;
    }
    body.services .cta-link i {
        font-size: 1.8vw;
    }
    body.services .services-clients {
        background: #0a0a0a;
    }
    body.services .clients-label {
        color: #777;
    }
    body.services .clients-heading {
        color: #ffffff;
    }

    /* === About Page Dark Mode === */
    body.about {
        background: #0a0a0a;
        color: #ffffff;
    }
    body.about nav.nav-scrolled {
        background: rgba(10, 10, 10, 0.95);
    }
    body.about .mobile-bottom-nav {
        background: rgba(10, 10, 10, 0.95);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    body.about .mobile-nav-item {
        color: rgba(255, 255, 255, 0.6);
    }
    body.about .about-hero {
        background: #0a0a0a;
    }
    body.about .about-hero .about-sub {
        color: #ffffff;
    }
    body.about .about-video {
        background: #0a0a0a;
    }
    body.about .about-video-wrap {
        background: #1a1a1a;
    }
    body.about .about-intro {
        background: #0a0a0a;
    }
    body.about .about-intro-inner p {
        color: #ffffff;
    }
    body.about .about-principles {
        background: #0a0a0a;
    }
    body.about .principles-inner .principle {
        background: #1a1a1a;
        border-color: #2a2a2a;
    }
    body.about .principles-inner .principle p {
        color: #b0b0b0;
    }
    body.about .about-awards {
        background: #0a0a0a;
    }
    body.about .award-cards .card {
        border-color: #2a2a2a;
        background: #1a1a1a;
    }
    body.about .award-cards .card span {
        color: #777;
    }
    body.about .about-team {
        background: #0a0a0a;
    }
    body.about .team-copy h2 {
        color: #ffffff;
    }
    body.about .team-copy p {
        color: #b0b0b0;
    }
    body.about .profile-blurb {
        color: #b0b0b0;
    }
    body.about .profile-name {
        color: #ffffff;
    }
    body.about .profile-title {
        color: #777;
    }
    body.about .team-grid .member {
        background: #1a1a1a;
        border-color: #2a2a2a;
    }
    body.about .team-grid .member h4 {
        color: #ffffff;
    }
    body.about .team-grid .member p {
        color: #b0b0b0;
    }
    body.about .deven-info h4,
    body.about .divyansh-info h4,
    body.about .pratham-info h4,
    body.about .digvijay-info h4,
    body.about .tushar-info h4,
    body.about .isha-info h4,
    body.about .anirudh-info h4 {
        color: #ffffff;
    }
    body.about .deven-info .profile-title,
    body.about .divyansh-info .profile-title,
    body.about .pratham-info .profile-title,
    body.about .digvijay-info .profile-title,
    body.about .tushar-info .profile-title,
    body.about .isha-info .profile-title,
    body.about .anirudh-info .profile-title {
        color: #777;
    }
    body.about .linkedin-btn {
        color: #ffffff;
    }

    /* === Index / Home Page Dark Mode === */
    /* Fix grey lines between sections — body bg must match section bg */
    html, body {
        background-color: #0a0a0a;
    }
    .main {
        background-color: #0a0a0a;
    }

    /* Page 2 — "At The Creative Cell, we believe..." */
    .page2 {
        background-color: #0a0a0a;
    }
    .page2 .page2-top h3 {
        color: #ffffff;
    }
    .page2 .page2-top-border {
        background-color: #444;
    }
    .page2 .page2-bottom .btm-text h2 span {
        color: #ffffff;
    }

    /* Page 3 — Show Reel (already dark bg video, but fix text) */
    .page3 {
        background-color: #0a0a0a;
    }
    .page3 .page3-text h4 {
        color: #ffffff;
    }
    .page3 .page3-text h4 i {
        color: #ffffff;
    }

    /* Page 4 — "Transforming visions into brands." / "See the work" */
    .page4 {
        background-color: #0a0a0a;
    }
    .page4 .page4-text h2 {
        color: #ffffff;
    }
    .page4 .page4-text h2::after {
        background-color: #ffffff;
    }
    .page4-text a {
        color: #ffffff;
    }
    .work-button-wrapper i {
        color: #ffffff;
    }

    /* Page 5 — "We operate on a simple philosophy" / "Quality over quantity" */
    .page5 {
        background-color: #0a0a0a;
    }
    .page5 .page5-top h3 {
        color: #ffffff;
    }
    .page5 .page5-top .philosophy-cta a {
        color: #ffffff;
    }
    .page5 .page5-top .philosophy-cta h3::after {
        background-color: #ffffff;
    }
    .page5 .page5-top-border {
        background-color: #444;
    }
    .page5 .page5-bottom .btm-text h2 span {
        color: #ffffff;
    }

    /* Page 6 */
    .page6 {
        background-color: #0a0a0a;
    }

    /* Page 7 — "Harnessing emotions" / "see our work" */
    .page7 {
        background-color: #0a0a0a;
    }
    .page7 .page7-top h3 {
        color: #ffffff;
    }
    .page7 .page7-top .emotions-cta a {
        color: #ffffff;
    }
    .page7 .page7-top .emotions-cta h3::after {
        background-color: #ffffff;
    }
    .page7 .page7-bottom .btm-text h2 span {
        color: #ffffff;
    }

    /* Page 8 */
    .page8 {
        background-color: #0a0a0a;
        color: #ffffff;
    }
    .page8 .text h1 {
        color: #ffffff;
    }
    .page8 .text h3 {
        color: #ffffff;
    }
    .page8 .text h3::after {
        background-color: #ffffff;
    }
    .page8 .contact-link h3::after {
        background-color: #ffffff;
    }
    .page8 .contact-link a {
        color: #ffffff;
    }

    /* Page 9 — "We're uniquely built" / "Our team members" / "Our Creative Team" */
    .page9 {
        background-color: #0a0a0a;
    }
    .page9 .page9-text h4 {
        color: #ffffff;
    }
    .page9 .page9-text h4 i {
        color: #ffffff;
    }
    .page9 .page9-text h1 {
        color: #ffffff;
    }
    .page9 .page9-text h1::after {
        background-color: #ffffff;
    }
    .page9 .page9-text a {
        color: #ffffff;
    }
}

/* Light mode adjustments for system preference */
@media (prefers-color-scheme: light) {
    body.services,
    body.about {
        color-scheme: light;
    }
}

/* Reusable page hero scroll indicator */
.page-scroll-arrow {
    position: absolute;
    left: 50%;
    bottom: max(26px, var(--safe-area-bottom, 26px));
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
    pointer-events: none;
    animation: bounce 2s infinite;
}

.page-scroll-arrow i {
    font-size: 24px;
    line-height: 1;
}

.page-scroll-arrow.dark {
    border-color: rgba(20, 20, 20, 0.35);
    color: #141414;
}