/* 
  Enso 8 - Design System
  Optimized for Grid-Stacked Cinematic Hero
*/

:root {
    --deep-black: #141E30;
    --dark-blue-grad: #3577D0;
    --neon-blue: #00f0ff;
    --deep-blue: #0066ff;
    --text-white: rgba(255, 255, 255, 0.9);
    --text-dim: rgba(255, 255, 255, 0.4);
    --font-main: 'Montserrat', sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif !important;
}

/* Fix Boxicons overriding global font-family */
.bx, .bxs, .bxl, .bx-chevron-down, .bxs-heart, .bxs-message-rounded, .bx-show {
    font-family: 'boxicons' !important;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    -webkit-text-size-adjust: 100%; /* Prevent font scale on orientation change */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
}

html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}

body {
    background-color: #000;
    color: var(--text-white);
    overflow: hidden;
    font-family: var(--font-main);
    -webkit-font-smoothing: antialiased;
    height: 100vh;
    width: 100vw;
}

.site-loader {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 32px;
    background: #000;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.46s ease, visibility 0s linear 0s;
}

.site-loader-line {
    width: min(184px, 42vw);
    height: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.14);
    transform: translateZ(0);
}

.site-loader-fill {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(var(--loader-progress, 0.04));
    transform-origin: left center;
    background: rgba(255, 255, 255, 0.86);
    transition: transform 0.38s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
}

body:not(.app-loading) .site-loader,
body.loader-hidden .site-loader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.46s ease, visibility 0s linear 0.46s;
}

@media (prefers-reduced-motion: reduce) {
    .site-loader,
    .site-loader-fill {
        transition: none;
    }
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 56;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(126, 54, 190, 0.18) 0%, rgba(69, 20, 118, 0.10) 24%, transparent 52%),
        radial-gradient(ellipse at 0% 100%, rgba(0, 174, 239, 0.10) 0%, rgba(72, 18, 128, 0.08) 26%, transparent 54%),
        linear-gradient(135deg, rgba(90, 22, 150, 0.045) 0%, transparent 34%, rgba(0, 174, 239, 0.035) 100%);
    opacity: 0.86;
}

body.blog-article-open #blogs-section .blog-social-icons {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#bg-video,
#handoff-video-buffer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    mix-blend-mode: screen;
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    will-change: opacity, transform, filter;
}

#bg-video {
    z-index: 1;
}

body.about-team-focus #bg-video {
    opacity: 0 !important;
    transform: translateY(-36vh) scale(0.92) !important;
    transition: opacity 0.34s ease, transform 0.56s ease;
}

@media (min-width: 769px) {
    #bg-video {
        opacity: 0;
        transform: scale(0.68);
    }
}

/* Team responsive split: desktop keeps portrait overlays, mobile separates labels from faces. */
@media (min-width: 769px) {
    .about-team-inline .member .info,
    #team-section .member .info {
        position: absolute !important;
        left: 18px !important;
        right: 18px !important;
        bottom: 18px !important;
        margin-top: 0 !important;
        text-align: center !important;
    }
}

@media (max-width: 768px) {
    #about-section .about-team-inline {
        --team-mobile-photo-size: clamp(104px, 34vw, 132px);
        --team-mobile-label-height: 48px;
        padding: 28px 18px 112px !important;
        overflow-x: hidden !important;
    }

    #about-section .about-team-inline .team-composition {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: min(100%, 314px) !important;
        max-width: 314px !important;
        gap: 18px 12px !important;
        margin: 0 auto !important;
    }

    #about-section .about-team-inline .team-composition-row {
        display: contents !important;
    }

    #about-section .about-team-inline .team-word {
        display: none !important;
    }

    #about-section .about-team-inline .member {
        width: 100% !important;
        max-width: 138px !important;
        height: calc(var(--team-mobile-photo-size) + var(--team-mobile-label-height)) !important;
        min-height: calc(var(--team-mobile-photo-size) + var(--team-mobile-label-height)) !important;
        flex: none !important;
        justify-self: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        transform: none !important;
    }

    #about-section .about-team-inline .member .avatar {
        width: var(--team-mobile-photo-size) !important;
        height: var(--team-mobile-photo-size) !important;
        flex: 0 0 var(--team-mobile-photo-size) !important;
        margin: 0 auto !important;
        border-radius: 50% !important;
        background-size: var(--team-avatar-size, cover) !important;
        background-position: var(--team-avatar-x, center) var(--team-avatar-y, top) !important;
    }

    #about-section .about-team-inline .member .info {
        position: static !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        z-index: auto !important;
        width: 100% !important;
        min-height: var(--team-mobile-label-height) !important;
        margin: 8px 0 0 !important;
        padding: 0 2px !important;
        text-align: center !important;
        text-shadow: none !important;
    }

    #about-section .about-team-inline .member .name-text {
        font-size: clamp(0.68rem, 3.5vw, 0.82rem) !important;
        line-height: 1.08 !important;
        font-weight: 700 !important;
        letter-spacing: 0.01em !important;
        color: rgba(255, 255, 255, 0.92) !important;
    }

    #about-section .about-team-inline .member .info span {
        display: block !important;
        margin-top: 3px !important;
        font-size: clamp(0.48rem, 2.45vw, 0.58rem) !important;
        line-height: 1.15 !important;
        letter-spacing: 0.03em !important;
        color: rgba(230, 224, 246, 0.62) !important;
    }

    #about-section .about-team-inline .member[data-member="thaha"] .avatar,
    #about-section .about-team-inline .member[data-member="bharath"] .avatar {
        --team-avatar-size: cover;
        --team-avatar-x: center;
        --team-avatar-y: top;
    }

    #about-section .about-team-inline .member[data-member="prince"] .avatar {
        --team-avatar-size: 104% auto;
        --team-avatar-x: center;
        --team-avatar-y: 4px;
    }

    #about-section .about-team-inline .member[data-member="mr"] .avatar {
        --team-avatar-size: 102% auto;
        --team-avatar-x: center;
        --team-avatar-y: 2px;
    }

    #about-section .about-team-inline .member[data-member="amal"] .avatar {
        --team-avatar-size: 116% auto;
        --team-avatar-x: center;
        --team-avatar-y: -14px;
    }

    #about-section .about-team-inline .member[data-member="adith"] .avatar {
        --team-avatar-size: 132% auto;
        --team-avatar-x: center;
        --team-avatar-y: -34px;
    }

    #about-section .about-team-inline .member[data-member="akhil"] .avatar,
    #about-section .about-team-inline .member[data-member="sanjay"] .avatar,
    #about-section .about-team-inline .member[data-member="nibu"] .avatar,
    #about-section .about-team-inline .member[data-member="akshay"] .avatar {
        --team-avatar-size: 112% auto;
        --team-avatar-x: center;
        --team-avatar-y: -14px;
    }

    #about-section .about-team-inline .member[data-member="athul_s"] .avatar {
        --team-avatar-size: 102% auto;
        --team-avatar-x: center;
        --team-avatar-y: -4px;
    }

    #about-section .about-team-inline .member[data-member="gokul"] .avatar,
    #about-section .about-team-inline .member[data-member="nandagopan"] .avatar {
        --team-avatar-size: 116% auto;
        --team-avatar-x: center;
        --team-avatar-y: -14px;
    }

    #about-section .about-team-inline .member[data-member="athul_p"] .avatar {
        --team-avatar-size: 116% auto;
        --team-avatar-x: calc(50% - 5px);
        --team-avatar-y: -14px;
    }
}

/* Final mobile team fit correction: overrides older member-level sizing. */
@media (max-width: 768px) {
    #about-section .about-team-inline {
        overflow: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #about-section .about-team-inline .team-composition {
        --team-bubble-size: clamp(34px, 10vw, 42px) !important;
        --team-gap: clamp(2px, 1vw, 4px) !important;
        --team-word-width: calc(var(--team-bubble-size) * 1.55) !important;
        --team-the-width: calc(var(--team-bubble-size) * 1.22) !important;
        --team-word-size: clamp(1.38rem, 7vw, 1.95rem) !important;
        --team-grid-width: calc(var(--team-word-width) + (var(--team-bubble-size) * 5) + (var(--team-gap) * 5)) !important;
        width: min(calc(100vw - 24px), var(--team-grid-width)) !important;
        max-width: calc(100vw - 24px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transform: none !important;
    }

    #about-section .about-team-inline .team-composition-row {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        gap: var(--team-gap) !important;
        overflow: visible !important;
        transform: none !important;
    }

    #about-section .about-team-inline .member {
        --team-bubble-size: clamp(34px, 10vw, 42px) !important;
        width: var(--team-bubble-size) !important;
        height: var(--team-bubble-size) !important;
        flex: 0 0 var(--team-bubble-size) !important;
        min-width: 0 !important;
        max-width: var(--team-bubble-size) !important;
    }

    #about-section .about-team-inline .team-word {
        flex: 0 0 var(--team-word-width) !important;
        width: var(--team-word-width) !important;
        min-width: 0 !important;
        max-width: var(--team-word-width) !important;
        font-size: var(--team-word-size) !important;
        line-height: 0.82 !important;
        overflow: visible !important;
    }

    #about-section .about-team-inline .team-word-the {
        flex-basis: var(--team-the-width) !important;
        width: var(--team-the-width) !important;
        max-width: var(--team-the-width) !important;
    }
}

/* Mobile team fit correction: keep the desktop-copy rows inside narrow screens. */
@media (max-width: 768px) {
    #about-section .about-team-inline {
        overflow: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #about-section .about-team-inline .team-composition {
        --team-bubble-size: clamp(34px, 10vw, 42px) !important;
        --team-gap: clamp(2px, 1vw, 4px) !important;
        --team-word-width: calc(var(--team-bubble-size) * 1.55) !important;
        --team-the-width: calc(var(--team-bubble-size) * 1.22) !important;
        --team-word-size: clamp(1.38rem, 7vw, 1.95rem) !important;
        --team-grid-width: calc(var(--team-word-width) + (var(--team-bubble-size) * 5) + (var(--team-gap) * 5)) !important;
        width: min(calc(100vw - 24px), var(--team-grid-width)) !important;
        transform: none !important;
    }

    #about-section .about-team-inline .team-composition-row {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        gap: var(--team-gap) !important;
        overflow: visible !important;
    }

    #about-section .about-team-inline .member {
        --team-bubble-size: clamp(34px, 10vw, 42px) !important;
        width: var(--team-bubble-size) !important;
        height: var(--team-bubble-size) !important;
        flex: 0 0 var(--team-bubble-size) !important;
        min-width: 0 !important;
    }

    #about-section .about-team-inline .team-word {
        flex: 0 0 var(--team-word-width) !important;
        width: var(--team-word-width) !important;
        min-width: 0 !important;
        font-size: var(--team-word-size) !important;
        line-height: 0.82 !important;
        overflow: visible !important;
    }

    #about-section .about-team-inline .team-word-the {
        flex-basis: var(--team-the-width) !important;
        width: var(--team-the-width) !important;
    }
}

#handoff-video-buffer {
    z-index: 0;
}

body.contact-video-foreground #video-container {
    z-index: 55 !important;
    background: transparent !important;
    pointer-events: none;
    mix-blend-mode: screen;
}

body.contact-video-foreground #bg-video {
    opacity: 0.96;
    filter: brightness(1.06) contrast(1.035) saturate(1.02);
    object-position: 62% center;
}

#canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Experience Trigger Overlay */
#experience-trigger {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.hero-nav-ready #experience-trigger {
    pointer-events: none;
}

/* Interaction Prompt */
#interaction-prompt {
    position: absolute;
    bottom: 50px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8em;
    color: var(--neon-blue);
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 1s ease;
    animation: pulse 3s infinite ease-in-out;
}

@keyframes pulse {
    0%, 100% { opacity: 0.2; transform: translateY(0); }
    50% { opacity: 0.6; transform: translateY(-5px); }
}

/* --- THE STACKED HERO CENTER --- */
.hero-center {
    display: grid;
    place-items: center; /* Centers both children exactly on top of each other */
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform-origin: 50% 50%;
    will-change: opacity, transform, filter;
}

/* The Navigation Links */
.navbar-links {
    grid-area: 1 / 1; 
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px; /* User's tighter gap request */
    opacity: 0; /* Animated by GSAP */
    transform: scale(0.95);
    transition: opacity 3s cubic-bezier(0.165, 0.84, 0.44, 1), transform 3s cubic-bezier(0.165, 0.84, 0.44, 1);
    pointer-events: none; /* Allows clicks to pass through empty space */
}

.nav-item {
    pointer-events: auto; /* Makes the actual words clickable */
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    color: white; 
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    font-family: var(--font-main);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    padding: 10px;
    white-space: nowrap;
}

.nav-item:hover {
    color: var(--neon-blue);
    text-shadow: 0 0 20px rgba(0, 240, 255, 0.8);
    letter-spacing: 5px;
}

/* Aesthetic Glows */
#center-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: min(620px, 50vw);
    height: min(600px, 56vh);
    background:
        radial-gradient(ellipse at 35% 70%, rgba(166, 0, 255, 0.661) 0%, rgba(84, 23, 130, 0.18) 34%, transparent 68%),
        radial-gradient(ellipse at 68% 34%, rgba(45, 60, 174, 0.22) 0%, rgba(38, 23, 98, 0.12) 42%, transparent 72%);
    z-index: 6;
    pointer-events: none;
    filter: blur(72px);
    opacity: 0.38;
    will-change: transform, opacity;
    mix-blend-mode: screen;
    animation: ensoGlowBreath 12s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

#mouse-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    z-index: 9;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0.08;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle, rgba(204, 96, 255, 0.08) 0%, rgba(126, 36, 210, 0.05) 36%, rgba(0, 240, 255, 0.025) 52%, transparent 74%);
    filter: blur(24px) saturate(1.02);
    mix-blend-mode: screen;
    will-change: left, top, opacity;
}

.grain,
.mob-bg-overlay {
    display: none !important;
    opacity: 0 !important;
    background: transparent !important;
}

@keyframes ensoPurpleFlow {
    0%,
    100% {
        transform: translate3d(-2.8vw, 2.2vh, 0) scale(1.08);
        background-position: 0% 50%, 70% 46%, 35% 50%;
    }

    34% {
        transform: translate3d(2.4vw, -1.5vh, 0) scale(1.14);
        background-position: 44% 44%, 36% 54%, 62% 50%;
    }

    68% {
        transform: translate3d(4vw, 2.8vh, 0) scale(1.1);
        background-position: 86% 52%, 18% 48%, 96% 50%;
    }
}

@keyframes ensoGlowBreath {
    0%,
    100% {
        opacity: 0.36;
        filter: blur(76px) brightness(0.94);
    }

    50% {
        opacity: 0.44;
        filter: blur(68px) brightness(1.04);
    }
}

@keyframes ensoServicesGradientFlow {
    0%,
    100% {
        background-position: 12% 78%, 74% 34%, 50% 50%;
    }

    50% {
        background-position: 22% 70%, 64% 42%, 58% 50%;
    }
}

.services-gradient-overlay {
    display: block !important;
    background:
        radial-gradient(ellipse at 16% 78%, rgba(132, 18, 178, 0.48) 0%, rgba(70, 18, 122, 0.24) 28%, transparent 58%),
        radial-gradient(ellipse at 72% 34%, rgba(30, 96, 190, 0.26) 0%, rgba(26, 18, 96, 0.15) 34%, transparent 62%),
        linear-gradient(90deg, transparent 0%, rgba(126, 28, 174, 0.18) 36%, transparent 52%, rgba(42, 126, 188, 0.12) 68%, transparent 84%) !important;
    background-size: 140% 140%, 130% 130%, 190% 100%;
    background-repeat: no-repeat;
    mix-blend-mode: screen;
    will-change: opacity, transform, filter, background-position;
    animation: ensoServicesGradientFlow 24s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

#about-section,
#services-section,
#portfolios-section,
#team-section,
#blogs-section,
#contact-section,
#blog-article-overlay {
    isolation: isolate;
}

#about-section::after,
#services-section::after,
#portfolios-section::after,
#team-section::after,
#blogs-section::after,
#contact-section::after,
#blog-article-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: transparent;
    filter: none;
    opacity: 0;
    mix-blend-mode: normal;
    will-change: auto;
    transition: none;
    animation: none;
}

#about-section.active::after,
#portfolios-section.active::after,
#team-section.active::after,
#blogs-section.active::after,
#contact-section.active::after,
#blog-article-overlay.active::after {
    opacity: 0;
}

#about-section::after,
#team-section::after {
    filter: blur(32px);
    mix-blend-mode: normal;
    will-change: opacity;
    animation: none;
}

#about-section > *:not(video):not(.mob-bg-overlay),
#portfolios-section > *,
#team-section > *,
#blogs-section > *,
#contact-section > *:not(video):not(.mob-bg-overlay):not(.contact-background-stack),
#blog-article-overlay > * {
    position: relative;
    z-index: 2;
}

#contact-section .contact-background-stack {
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    #about-section::after,
    #services-section::after,
    #portfolios-section::after,
    #team-section::after,
    #blogs-section::after,
    #contact-section::after,
    #blog-article-overlay::after {
        animation: none;
    }

    #center-glow,
    .services-gradient-overlay {
        animation: none;
    }
}

@media (max-width: 768px) {
	    #center-glow,
	    #about-section::after,
    #services-section::after,
    #portfolios-section::after,
    #team-section::after,
    #blogs-section::after,
    #contact-section::after,
    #blog-article-overlay::after {
        display: none !important;
    }
}

@media (max-width: 768px) {
    body {
        overscroll-behavior: none;
    }

	    #center-nav,
	    #home-wordmark,
	    .central-navigation,
    #about-section > header,
    #services-section .services-text-overlay > header,
    #portfolios-section > header,
    #team-section > header,
    #blogs-section > header,
    #contact-section > header {
        display: none !important;
    }

    #mobile-brand-home {
        position: fixed;
        top: calc(36px + env(safe-area-inset-top));
        left: 31px;
        z-index: 5200;
        display: none;
        font-family: 'Montserrat', sans-serif;
        font-size: 1.34rem;
        line-height: 1;
        font-weight: 300;
        letter-spacing: 0.06em;
        color: rgba(255, 255, 255, 0.92);
        text-decoration: none;
        text-transform: lowercase;
        pointer-events: auto;
    }

    #mobile-brand-home.visible {
        display: block !important;
    }

    #mobile-hamburger {
        top: calc(31px + env(safe-area-inset-top)) !important;
        right: 25px !important;
        z-index: 5200 !important;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        gap: 5px !important;
        padding: 0 !important;
        background: transparent !important;
    }

    #mobile-hamburger span {
        width: 23px !important;
        height: 2px !important;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.62) !important;
    }

    body.mobile-home-nav #mobile-hamburger.visible {
        display: flex !important;
    }

    body.show-mobile-nav #mobile-brand-home,
    body.show-mobile-nav #mobile-hamburger,
    body.intro-active #mobile-brand-home,
    body.intro-active #mobile-hamburger,
    body.intro-active #home-audio-toggle {
        display: none !important;
    }

    body.mobile-home-nav #mobile-nav-overlay {
        background: transparent !important;
        padding: 0 !important;
    }

    body.mobile-home-nav .mobile-nav-close {
        display: none !important;
    }

    body.mobile-home-nav .mobile-nav-links {
        gap: 18px !important;
    }

    body.mobile-home-nav .mobile-nav-item {
        font-size: 1.38rem !important;
        line-height: 1.1 !important;
        font-weight: 300 !important;
        letter-spacing: 0.02em !important;
        color: rgba(255, 255, 255, 0.92) !important;
        text-transform: none !important;
        text-shadow: 0 0 18px rgba(0, 0, 0, 0.45);
    }

    #mobile-nav-overlay {
        padding: 32px 24px;
        background: #000 !important;
    }

    #mobile-nav-overlay::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: var(--mobile-nav-gradient-opacity, 0);
        background:
            linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.92) 0%,
                rgba(0, 0, 0, 0.54) 34%,
                rgba(0, 0, 0, 0.48) 62%,
                rgba(0, 0, 0, 0.9) 100%
            ),
            radial-gradient(circle at 50% 52%, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.72) 78%);
    }

    body.mobile-home-nav #mobile-nav-overlay::before {
        background:
            linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.48) 0%,
                rgba(0, 0, 0, 0.18) 34%,
                rgba(0, 0, 0, 0.14) 62%,
                rgba(0, 0, 0, 0.46) 100%
            ),
            radial-gradient(circle at 50% 52%, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.36) 78%);
    }

    .mobile-nav-links,
    .mobile-nav-close {
        position: relative;
        z-index: 1;
    }

    .mobile-nav-close {
        top: calc(26px + env(safe-area-inset-top)) !important;
        right: 24px !important;
        color: rgba(255, 255, 255, 0.68) !important;
    }

    .mobile-nav-item {
        font-size: 1.34rem !important;
        letter-spacing: 0.16em !important;
    }

    #services-section {
        padding: 0 !important;
        overflow: hidden !important;
        background: #000 !important;
        --service-mobile-scale: 1.3;
    }

    #srv-mob-intro,
    #srv-mob-loop,
    #srv-mob-reverse {
        object-fit: contain !important;
        object-position: center center !important;
        opacity: 0.96;
        transform-origin: 50% 50% !important;
    }

    #srv-mob-intro,
    #srv-mob-reverse,
    #srv-mob-loop {
        transform: scale(var(--service-mobile-scale)) !important;
    }

    #services-section .mob-bg-overlay {
        opacity: 0 !important;
        background: transparent !important;
    }

    #services-section .services-gradient-overlay,
    #services-section .services-tagline {
        display: none !important;
    }

    #services-section .services-text-overlay {
        z-index: 12 !important;
        pointer-events: none !important;
        padding: 0 !important;
    }

    #services-section .service-item,
    #services-section .service-item.left-col,
    #services-section .service-item.right-col {
        left: 30vw !important;
        right: auto !important;
        width: min(64vw, 255px) !important;
        transform: translateY(-50%) !important;
        text-align: left !important;
        white-space: normal !important;
        font-size: clamp(0.68rem, 2.75vw, 0.92rem) !important;
        line-height: 1.25 !important;
        font-weight: 400 !important;
        letter-spacing: 0.015em !important;
        color: rgba(232, 240, 255, 0.78) !important;
        text-shadow: 0 0 18px rgba(55, 207, 235, 0.24);
    }

    #services-section .service-item {
        pointer-events: auto !important;
        cursor: pointer;
        transition: color 0.28s ease, opacity 0.28s ease, text-shadow 0.28s ease, transform 0.28s ease;
    }

    #services-section .service-item:hover,
    #services-section .service-item:focus-visible {
        color: rgba(255, 255, 255, 0.96) !important;
        text-shadow: 0 0 18px rgba(0, 240, 255, 0.32);
        outline: none;
    }

    #services-section .service-item.left-col {
        left: 30vw !important;
        right: auto !important;
        width: min(64vw, 255px) !important;
        text-align: left !important;
    }

    #services-section .service-item.right-col {
        left: 30vw !important;
        right: auto !important;
        width: min(64vw, 255px) !important;
        text-align: left !important;
    }

    #services-section .service-item .line {
        display: block !important;
        width: clamp(18px, 7vw, 30px) !important;
        height: 1px !important;
        margin-top: 7px !important;
        opacity: 0.58 !important;
        background: linear-gradient(90deg, transparent, rgba(57, 213, 239, 0.86)) !important;
    }

    #services-section .service-item.left-col .line {
        margin-left: 0 !important;
        margin-right: auto !important;
        background: linear-gradient(90deg, rgba(57, 213, 239, 0.86), transparent) !important;
    }

    #services-section .service-item.right-col .line {
        margin-left: 0 !important;
        margin-right: auto !important;
        background: linear-gradient(90deg, rgba(57, 213, 239, 0.86), transparent) !important;
    }

    #services-section .item-concept { top: 27.6% !important; }
    #services-section .item-cinema  { top: 36.7% !important; }
    #services-section .item-editing { top: 44.8% !important; }
    #services-section .item-sound   { top: 53.8% !important; }
    #services-section .item-vfx     { top: 62.7% !important; }
    #services-section .item-3d      { top: 70.6% !important; }
    #services-section .item-colour  { top: 80.8% !important; }

    #contact-section {
        overflow: hidden !important;
        background: #000 !important;
    }

    #contact-mob-vid {
        object-fit: contain !important;
        object-position: center bottom !important;
        transform: none !important;
        opacity: 0.95;
        mix-blend-mode: screen;
    }

    #contact-section .mob-bg-overlay {
        opacity: 0 !important;
        background: transparent !important;
    }

    #contact-section .contact-background-stack,
    #contact-section .contact-form-block,
    #contact-section .contact-info-grid,
    #contact-section .contact-social-row {
        display: none !important;
    }

    #contact-section .contact-main {
        position: relative !important;
        z-index: 10 !important;
        height: 100svh !important;
        min-height: 100svh !important;
        display: block !important;
        padding: calc(168px + env(safe-area-inset-top)) 46px 0 !important;
    }

    #contact-section .contact-content-left {
        width: 100% !important;
        max-width: 245px !important;
        height: auto !important;
        padding: 0 !important;
        display: block !important;
    }

    #contact-section .contact-text-block {
        width: 100% !important;
        max-width: 245px !important;
        padding: 0 !important;
    }

    #contact-section .contact-text-block::before {
        content: "CONTACT US";
        display: block;
        margin: 0 0 19px;
        font-size: 0.8rem;
        line-height: 1.1;
        font-weight: 700;
        letter-spacing: 0;
        color: rgba(255, 255, 255, 0.96);
    }

    #contact-section .contact-lead {
        margin: 0 0 17px !important;
        font-size: 0.86rem !important;
        line-height: 1.13 !important;
        font-weight: 300 !important;
        letter-spacing: 0 !important;
        color: rgba(255, 255, 255, 0.98) !important;
    }

    #contact-section .contact-question {
        margin: 0 0 8px !important;
        font-size: 0.84rem !important;
        line-height: 1.35 !important;
        font-weight: 300 !important;
        letter-spacing: 0 !important;
        color: rgba(255, 255, 255, 0.96) !important;
    }

    #contact-section .contact-cta {
        margin: 0 !important;
        font-size: 0.83rem !important;
        line-height: 1.35 !important;
        font-weight: 300 !important;
        font-style: normal !important;
        letter-spacing: 0 !important;
        color: rgba(255, 255, 255, 0.96) !important;
        text-shadow: none !important;
    }
}

/* Grain utility */
.grain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    pointer-events: none;
    opacity: 0.04;
    background-image: url('https://grainy-gradients.vercel.app/noise.svg');
    mix-blend-mode: overlay;
}

/* Status Label */
#status-label {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    letter-spacing: 0.4em;
    color: var(--text-dim);
    z-index: 20;
    text-transform: uppercase;
}

.home-audio-toggle {
    position: fixed;
    right: calc(30px + env(safe-area-inset-right));
    bottom: calc(25px + env(safe-area-inset-bottom));
    z-index: 1120;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(6, 12, 20, 0.38);
    color: rgba(255, 255, 255, 0.82);
    opacity: 0;
    pointer-events: none;
    transform: translateY(7px) scale(0.96);
    cursor: pointer;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 0 22px rgba(0, 240, 255, 0.08);
    transition:
        opacity 0.48s ease,
        transform 0.48s ease,
        color 0.24s ease,
        border-color 0.24s ease,
        background 0.24s ease;
}

.home-audio-toggle img {
    width: 18px;
    height: 18px;
    display: block;
    opacity: 0.9;
    filter: brightness(0) invert(1);
}

body.home-audio-control-visible .home-audio-toggle {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.home-audio-toggle:hover,
.home-audio-toggle:focus-visible {
    color: #fff;
    border-color: rgba(0, 240, 255, 0.48);
    background: rgba(10, 24, 34, 0.58);
    outline: none;
}

body.audio-muted .home-audio-toggle {
    color: rgba(255, 255, 255, 0.58);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

/* --- ABOUT MOBILE VIDEO BACKGROUND --- */
.about-mobile-bg-video {
    display: none; /* hidden on desktop */
}

.about-mobile-overlay {
    display: none; /* hidden on desktop */
}

@media (max-width: 768px) {
    .about-mobile-bg-video {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }

    .about-mobile-overlay {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.55);
        z-index: 1;
    }

    #about-section header,
    #about-section .about-content {
        position: relative;
        z-index: 2;
    }
}

/* --- ABOUT US LITERARY EXPERIENCE --- */

#about-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    z-index: 50; 
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    scrollbar-width: none; /* Firefox */
}

#about-section::-webkit-scrollbar { 
    display: none; 
}

/* Global Scroll Section Styles */
.scroll-section {
    scrollbar-width: none; /* Hide for Firefox */
    -ms-overflow-style: none; /* Hide for IE/Edge */
}

.scroll-section::-webkit-scrollbar {
    display: none; /* Hide for Chrome/Safari/Opera */
}

.scroll-section.loco-ready,
#blog-article-overlay.loco-ready {
    overflow: hidden !important;
}

.loco-scroll-shell {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.loco-active .loco-scroll-shell {
    overflow-y: hidden !important;
}

.loco-scroll-content {
    width: 100%;
    min-height: 100%;
    display: flow-root;
}

.loco-scroll-shell::-webkit-scrollbar {
    display: none;
}

#about-section .loco-scroll-content,
#portfolios-section .loco-scroll-content,
#team-section .loco-scroll-content,
#blogs-section .loco-scroll-content,
#blog-article-overlay .loco-scroll-content {
    min-height: 100vh;
}

#blog-article-overlay .loco-scroll-shell {
    position: absolute;
}

#about-section.active {
    pointer-events: auto;
}

@media (min-width: 769px) {
    #about-section > header {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
    }
}

.about-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 60px;
    width: 100%;
    min-height: 100px;
    position: sticky;
    top: 0;
    z-index: 60;
}

.header-logo {
    font-family: var(--font-main);
    font-size: 16px;
    letter-spacing: 3px;
    color: var(--text-white);
}

.hamburger {
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
}

.hamburger .line {
    width: 35px;
    height: 2px;
    background: rgba(255, 255, 255, 0.8);
    transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hamburger:hover .line:nth-child(2) {
    width: 20px;
}

.about-content {
    margin-top: clamp(86px, 12vh, 132px);
    padding-bottom: 20vh;
    display: flex;
    justify-content: center; /* Center horizontally */
    width: 100%;
    position: relative;
    z-index: 10;
}

.about-scroll-cue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 56px;
    margin: 34px auto 0;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 999px;
    opacity: 0.86;
    text-decoration: none;
    position: relative;
    background: rgba(255, 255, 255, 0.035);
    box-shadow:
        0 0 18px rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: opacity 0.32s ease, border-color 0.32s ease, transform 0.32s ease, box-shadow 0.32s ease;
}

.about-scroll-cue::before {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.12);
    animation: aboutScrollCuePulse 2.15s ease-in-out infinite;
}

.about-scroll-cue span {
    width: 11px;
    height: 11px;
    border-right: 2px solid rgba(255, 255, 255, 0.92);
    border-bottom: 2px solid rgba(255, 255, 255, 0.92);
    transform: rotate(45deg);
    animation: aboutScrollCue 1.7s ease-in-out infinite;
}

.about-scroll-cue:hover {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.72);
    transform: translateY(2px);
    box-shadow:
        0 0 28px rgba(255, 255, 255, 0.16),
        inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.mobile-section-title {
    display: none;
}

@keyframes aboutScrollCue {
    0%,
    100% {
        transform: translateY(-7px) rotate(45deg);
        opacity: 0.42;
    }

    50% {
        transform: translateY(7px) rotate(45deg);
        opacity: 1;
    }
}

@keyframes aboutScrollCuePulse {
    0%,
    100% {
        transform: scale(0.96);
        opacity: 0.24;
    }

    50% {
        transform: scale(1.08);
        opacity: 0.54;
    }
}

.about-team-inline {
    --about-team-header-space: clamp(72px, 8svh, 92px);
    --about-team-bottom-space: clamp(48px, 7svh, 84px);
    --about-team-row-gap: clamp(10px, 1.2svh, 16px);
    --about-team-fit-bubble: calc((100svh - var(--about-team-header-space) - var(--about-team-bottom-space) - (var(--about-team-row-gap) * 3)) / 4);
    width: 100%;
    min-height: 100svh;
    padding: 0;
    position: relative;
    z-index: 12;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-shadow: none;
}

/* --- TEAM SCATTER GRID --- */
.member {
    text-align: center;
    position: relative;
    cursor: pointer;
}
.member .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(144,80,210,0.5), rgba(40,10,80,0.8));
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.member:hover .avatar {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(188, 120, 255, 0.4);
}
.member .info {
    margin-top: 15px;
    color: white;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.4;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
.member .info span {
    font-size: 0.55rem;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
}

.manifesto {
    max-width: 700px; /* Editorial width constraint */
    font-family: var(--font-main);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    line-height: 2.2;
    font-weight: 300;
    padding: 0 40px;
    text-align: left;
}

/* Scroll Trigger Animation Classes */
.manifesto .reveal-text {
    margin-bottom: 50px;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s cubic-bezier(0.165, 0.84, 0.44, 1), transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.manifesto .reveal-text.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* The Head Icon ending */
.manifesto-end.reveal-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 120px;
    opacity: 0;
    transform: translateY(40px);
}

.manifesto-end.reveal-text.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.about-label {
    font-family: var(--font-main);
    letter-spacing: 0.5em;
    font-size: 13px;
    margin-bottom: 30px;
    color: var(--text-white);
}

.about-footer {
    position: fixed;
    bottom: 50px;
    left: 60px;
    z-index: 60;
}

.socials {
    display: flex;
    gap: 20px;
}

.social-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: background 0.4s, transform 0.4s;
    cursor: pointer;
}

.social-dot:hover {
    background: var(--neon-blue);
    transform: scale(1.6);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

/* The state after clicking About Us */
.anti-gravity-active #canvas-container canvas {
    filter: blur(10px);
    opacity: 0.7;
    transition: all 2s ease-in-out;
}

/* User's Exact Snipet Overlay logic */
.navbar {
    position: absolute;
    z-index: 999; /* Put text on the very top */
    pointer-events: none; /* Let clicks pass through empty space */
}

/* Top Right Navigation Menu */
#center-nav {
    position: fixed !important;
    top: 36px !important;
    right: 56px !important;
    left: auto !important;
    transform: none !important;
    display: flex;
    flex-direction: row;
    gap: 28px;
    align-items: center;
    justify-content: flex-end;
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    width: auto !important;
    padding: 9px 0;
    isolation: isolate;
    --nav-corner-plum: rgba(122, 42, 176, 0.34);
    --nav-corner-violet: rgba(64, 16, 112, 0.26);
    --nav-corner-ink: rgba(8, 2, 20, 0.36);
}

#center-nav::before,
#center-nav::after {
    content: "";
    z-index: -1;
    pointer-events: none;
}

#center-nav::before {
    position: fixed;
    top: 0;
    right: 0;
    width: min(900px, 70vw);
    height: 250px;
    background:
        radial-gradient(ellipse at 100% 0%, var(--nav-corner-plum) 0%, rgba(88, 24, 132, 0.20) 30%, rgba(18, 4, 42, 0.10) 54%, transparent 78%),
        radial-gradient(ellipse at 74% 18%, var(--nav-corner-violet) 0%, rgba(28, 8, 58, 0.16) 42%, transparent 80%),
        linear-gradient(180deg, var(--nav-corner-ink) 0%, rgba(7, 1, 18, 0.18) 45%, transparent 100%),
        linear-gradient(270deg, rgba(12, 3, 30, 0.38) 0%, rgba(10, 2, 22, 0.12) 44%, transparent 100%);
    filter: blur(20px) saturate(1.06);
    opacity: 0.84;
    mix-blend-mode: normal;
}

#center-nav::after {
    display: none;
}

#center-nav:hover::before {
    opacity: 0.88;
}

#center-nav:hover::after {
    opacity: 0;
}

.nav-item {
    font-family: var(--font-main);
    color: rgba(246, 240, 255, 0.88);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    pointer-events: auto;
    opacity: 0.86;
}

#center-nav .nav-item {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    line-height: 1;
    position: relative;
    padding: 6px 0;
}

#center-nav .nav-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(190, 84, 255, 0.46), rgba(0, 240, 255, 0.28), transparent);
    opacity: 0;
    transform: scaleX(0.42);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.nav-item:hover {
    color: rgba(255, 255, 255, 0.98);
    opacity: 1;
    letter-spacing: 0.20em;
    text-shadow: 0 0 14px rgba(156, 66, 220, 0.28);
}

#center-nav .nav-item:hover::after,
#center-nav .nav-item:focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
}

#center-nav .nav-item:focus-visible {
    color: rgba(255, 255, 255, 0.98);
    opacity: 1;
    outline: none;
    text-shadow: 0 0 14px rgba(156, 66, 220, 0.32);
}

#home-wordmark {
    position: fixed;
    top: 38px;
    left: 56px;
    z-index: 1100;
    font-family: var(--font-main);
    font-size: 1.02rem;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.28em;
    color: rgba(255, 255, 255, 0.84);
    opacity: 0;
    pointer-events: none;
    text-decoration: none;
    text-shadow: 0 0 22px rgba(0, 240, 255, 0.14);
    transition: opacity 0.42s ease, transform 0.42s ease, color 0.42s ease;
    transform: translateY(-3px);
}

body.hero-nav-ready #home-wordmark {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

body.hero-nav-ready #home-wordmark:hover {
    color: #fff;
}

@media (min-width: 769px) {
    .scroll-section > header,
    #services-section .services-text-overlay > header {
        display: none !important;
    }

    /* Desktop services: keep the copy readable and balanced around the hero visuals. */
    #services-section .services-text-overlay {
        overflow: hidden;
    }

    #services-section .services-tagline {
        top: 16.2% !important;
        font-size: clamp(1.12rem, 1.55vw, 1.6rem) !important;
        letter-spacing: 0.14em !important;
        color: rgba(255, 255, 255, 0.66) !important;
    }

    #services-section .service-item,
    #services-section .service-item.left-col,
    #services-section .service-item.right-col {
        max-width: min(26vw, 360px) !important;
        font-size: clamp(0.9rem, 1.2vw, 1.08rem) !important;
        line-height: 1.16 !important;
        letter-spacing: 0.08em !important;
        white-space: normal !important;
    }

    #services-section .service-item.left-col {
        right: auto !important;
    }

    #services-section .service-item.right-col {

        left: auto !important;
        text-align: right !important;
    }

    #services-section .service-item.right-col .line {
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    #services-section .item-concept { top: 26.2% !important; }
    #services-section .item-cinema  { top: 33.5% !important; }
    #services-section .item-editing { top: 42.0% !important; }
    #services-section .item-sound   { top: 51.5% !important; }
    #services-section .item-vfx     { top: 60% !important; }
    #services-section .item-3d      { top: 67.0% !important; }
    #services-section .item-colour  { top: 77.8% !important; }
}

/* Team Hover Effect */
.team-member:hover .member-info {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
.team-member:hover .member-photo {
    transform: scale(1.05) !important;
    box-shadow: 0 0 50px rgba(0, 240, 255, 0.4) !important;
}

/* Custom Cursor - Premium Level */
#custom-cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 7px;
    height: 7px;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.96) 0%, rgba(220, 147, 255, 0.74) 42%, rgba(0, 240, 255, 0.34) 100%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10001;
    opacity: 0.78;
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 10px rgba(193, 78, 255, 0.48),
        0 0 18px rgba(0, 240, 255, 0.18);
    mix-blend-mode: screen;
    will-change: left, top, opacity, transform;
}

#custom-cursor-dot,
#custom-cursor-ring {
    display: none !important;
}

#custom-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(210, 132, 255, 0.36);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    opacity: 0.46;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle, rgba(188, 70, 255, 0.10) 0%, rgba(0, 240, 255, 0.04) 42%, transparent 68%);
    box-shadow:
        0 0 20px rgba(170, 62, 255, 0.20),
        inset 0 0 14px rgba(0, 240, 255, 0.08);
    transition: width 0.3s cubic-bezier(0.23, 1, 0.32, 1), height 0.3s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    mix-blend-mode: screen;
    will-change: left, top, opacity, width, height;
}

body.cursor-hover #custom-cursor-ring {
    width: 64px;
    height: 64px;
    border-color: rgba(0, 240, 255, 0.48);
    border-width: 1px;
    box-shadow:
        0 0 26px rgba(0, 240, 255, 0.18),
        0 0 34px rgba(188, 70, 255, 0.16),
        inset 0 0 18px rgba(188, 70, 255, 0.12);
}

body.cursor-hover #custom-cursor-dot {
    transform: translate(-50%, -50%) scale(2);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.96) 0%, rgba(0, 240, 255, 0.78) 54%, rgba(188, 70, 255, 0.44) 100%);
}

@media (max-width: 768px) {
    #mouse-glow,
    #custom-cursor-dot,
    #custom-cursor-ring {
        display: none !important;
    }
}

/* Sparkle Particle */
.sparkle {
    position: fixed;
    top: 0;
    left: 0;
    width: 4px;
    height: 4px;
    background-color: white;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    box-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue);
    transform: translate(-50%, -50%);
}


/* Meet the team */

#services-section .service-item {
    pointer-events: auto !important;
    cursor: pointer;
    transition: color 0.28s ease, opacity 0.28s ease, text-shadow 0.28s ease, transform 0.28s ease;
}

#services-section .service-item:hover,
#services-section .service-item:focus-visible {
    color: rgba(255, 255, 255, 0.96) !important;
    text-shadow: 0 0 18px rgba(0, 240, 255, 0.32);
    outline: none;
}

#team-section {
    background:
        linear-gradient(90deg, rgba(92, 58, 150, 0.12) 0%, rgba(92, 58, 150, 0.05) 30%, rgba(7, 10, 24, 0) 58%),
        #06070d;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-items: center !important;
    justify-content: center !important;
    isolation: isolate;
}

.team-section-header {
    background: rgba(6, 7, 13, 0.66);
    backdrop-filter: none;
}

#team-section .loco-scroll-content {
    position: relative;
    background: transparent;
}

.team-atmosphere {
    display: none;
}

.team-shell {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 100vh;
    padding: 84px clamp(18px, 2vw, 34px) 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-team-inline .team-shell {
    min-height: 100svh;
    padding: var(--about-team-header-space) clamp(18px, 2vw, 34px) var(--about-team-bottom-space);
    align-items: center;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.about-team-heading {
    margin: 0 0 var(--about-team-heading-gap);
    font-family: var(--font-main);
    font-size: var(--about-team-heading-size);
    font-weight: 250;
    line-height: 0.85;
    letter-spacing: 0;
    color: rgba(236, 231, 255, 0.9);
    text-align: center;
    pointer-events: none;
}

.team-composition {
    --team-bubble-size: clamp(132px, 10.2vw, 198px);
    --team-gap: clamp(8px, 0.65vw, 14px);
    --team-word-width: calc(var(--team-bubble-size) * 2.9);
    --team-the-width: calc(var(--team-bubble-size) * 1.9);
    --team-word-size: clamp(7.8rem, 10vw, 12rem);
    --team-grid-width: calc(var(--team-word-width) + (var(--team-bubble-size) * 5) + (var(--team-gap) * 5));
    width: min(100%, var(--team-grid-width));
    max-width: calc(100vw - 48px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 160px);
    gap: var(--team-gap);
}

.about-team-inline .team-composition {
    --team-bubble-size: clamp(132px, 10.2vw, 198px);
    --team-gap: clamp(8px, 0.65vw, 14px);
    max-width: min(var(--team-grid-width), calc(100vw - 56px));
    min-height: calc(100svh - var(--about-team-header-space) - var(--about-team-bottom-space));
    gap: var(--team-gap);
}

.about-team-inline .team-composition-row {
    justify-content: center;
    width: 100%;
}

.about-team-inline .team-composition-row-rest {
    padding-left: var(--team-word-width);
}

.about-team-inline .team-composition-row-meet {
    transform: none;
}

.about-team-inline .team-composition-row-the {
    transform: none;
}

.about-team-inline .team-composition-row-team {
    transform: none;
}

.about-team-inline .team-composition-row-rest {
    transform: none;
}

.team-composition-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--team-gap);
    min-height: var(--team-bubble-size);
    width: 100%;
}

.team-word {
    flex: 0 0 var(--team-word-width);
    color: rgba(236, 231, 255, 0.88);
    font-size: var(--team-word-size);
    font-weight: 250;
    line-height: 0.78;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    pointer-events: none;
}

.team-word::before,
.team-word::after,
.team-composition::before,
.team-composition::after,
.team-shell::before,
.team-shell::after {
    content: none !important;
    display: none !important;
}

.team-word-the {
    flex-basis: var(--team-the-width);
    text-align: center;
    margin: 0 6px;
}

.team-composition-row-meet {
    padding-left: 0;
}

.team-composition-row-the {
    padding-left: 0;
}

.team-composition-row-team {
    padding-left: 0;
}

.team-composition-row-rest {
    padding-left: var(--team-word-width);
    margin-top: 0;
}

.member {
    position: relative !important;
    width: var(--team-bubble-size) !important;
    height: var(--team-bubble-size);
    flex: 0 0 var(--team-bubble-size);
    display: block;
    cursor: pointer;
    transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.member:hover {
    transform: translateY(-10px) scale(1.02);
    z-index: 50 !important;
}

.about-team-inline .member {
    transform: none;
}

.about-team-inline .member:hover {
    transform: translateY(-10px) scale(1.02);
}

.about-team-inline .member[data-member="thaha"] {
    --member-y: 12px;
    --member-scale: 0.96;
}

.about-team-inline .member[data-member="bharath"] {
    --member-y: -8px;
    --member-scale: 1.02;
}

.about-team-inline .member[data-member="prince"] {
    --member-y: 18px;
    --member-scale: 1.08;
}

.about-team-inline .member[data-member="mr"] {
    --member-y: -14px;
    --member-scale: 0.98;
}

.about-team-inline .member[data-member="amal"] {
    --member-y: 10px;
    --member-scale: 0.94;
}

.about-team-inline .member[data-member="adith"] {
    --member-y: -10px;
    --member-scale: 0.96;
}

.about-team-inline .member[data-member="sanjay"] {
    --member-y: 16px;
    --member-scale: 1;
}

.about-team-inline .member[data-member="nibu"] {
    --member-y: -6px;
    --member-scale: 0.97;
}

.about-team-inline .member[data-member="akhil"] {
    --member-y: 12px;
    --member-scale: 1.03;
}

.about-team-inline .member[data-member="akshay"] {
    --member-y: -12px;
    --member-scale: 0.96;
}

.about-team-inline .member[data-member="athul_s"] {
    --member-y: 14px;
    --member-scale: 1.02;
}

.about-team-inline .member[data-member="gokul"] {
    --member-y: -8px;
    --member-scale: 0.95;
}

.about-team-inline .member[data-member="nandagopan"] {
    --member-y: 18px;
    --member-scale: 1.02;
}

.about-team-inline .member[data-member="athul_p"] {
    --member-y: -14px;
    --member-scale: 0.96;
}

.member .avatar {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    background-size: var(--team-avatar-size, cover);
    background-position: var(--team-avatar-x, center) var(--team-avatar-y, top);
    background-repeat: no-repeat;
    position: relative !important;
    overflow: hidden !important;
    background-color: #6552a4 !important;
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.26),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    filter: none;
}

.member[data-member="thaha"] .avatar {
    --team-avatar-size: cover;
    --team-avatar-y: top;
}

.member[data-member="bharath"] .avatar {
    --team-avatar-size: cover;
    --team-avatar-y: top;
}

.member[data-member="prince"] .avatar {
    --team-avatar-size: 103% auto;
    --team-avatar-y: 6px;
}

.member[data-member="mr"] .avatar {
    --team-avatar-size: 100% auto;
    --team-avatar-y: 4px;
}

.member[data-member="amal"] .avatar {
    --team-avatar-size: 128% auto;
    --team-avatar-y: -28px;
}

.member[data-member="adith"] .avatar {
    --team-avatar-size: 150% auto;
    --team-avatar-y: -60px;
}

.member[data-member="sanjay"] .avatar {
    --team-avatar-size: 120% auto;
    --team-avatar-y: -30px;
}

.member[data-member="nibu"] .avatar {
    --team-avatar-size: 120% auto;
    --team-avatar-y: -30px;
}

.member[data-member="akhil"] .avatar {
    --team-avatar-size: 120% auto;
    --team-avatar-y: -30px;
}

.member[data-member="akshay"] .avatar {
    --team-avatar-size: 120% auto;
    --team-avatar-y: -30px;
}

.member[data-member="athul_s"] .avatar {
    --team-avatar-size: 99% auto;
    --team-avatar-y: -10px;
}

.member[data-member="gokul"] .avatar {
    --team-avatar-size: 130% auto;
    --team-avatar-y: -30px;
}

.member[data-member="nandagopan"] .avatar {
    --team-avatar-size: 130% auto;
    --team-avatar-y: -28px;
}

.member[data-member="athul_p"] .avatar {
    --team-avatar-size: 130% auto;
    --team-avatar-x: calc(50% - 10px);
    --team-avatar-y: -28px;
}

.member .avatar::before,
.member .avatar::after {
    content: none !important;
    display: none !important;
}

.member .info {
    position: absolute !important;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 10;
    pointer-events: none;
    text-align: center;
}

.member .info span {
    display: block;
    margin-top: 3px !important;
    font-size: 9px !important;
    line-height: 1.25;
    letter-spacing: 0.08em !important;
    color: rgba(240, 233, 255, 0.76) !important;
    text-transform: none !important;
}

.member .name-text {
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.social-icons-team {
    position: fixed;
    bottom: 34px;
    left: 56px;
    display: flex;
    gap: 10px;
    z-index: 10;
}

.social-icons-team a {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
    font-size: 12px;
    text-decoration: none;
    transition: transform 0.3s ease, opacity 0.3s ease, border-color 0.3s ease;
}

.social-icons-team a:hover {
    opacity: 1;
    transform: translateY(-2px);
    border-color: rgba(185, 154, 255, 0.58);
}

@media (max-width: 1280px) {
    .team-shell {
        padding-left: 22px;
        padding-right: 22px;
    }

    .team-composition {
        --team-bubble-size: clamp(118px, 10.2vw, 132px);
        --team-gap: 8px;
        --team-word-size: clamp(6.8rem, 9vw, 8rem);
    }
}

	@media (max-width: 1180px) {
	    .team-shell {
	        padding-top: 108px;
	        padding-bottom: 92px;
    }

    .team-composition-row {
        justify-content: center;
        flex-wrap: wrap;
    }

    .team-composition {
        width: 100%;
        max-width: none;
        min-height: auto;
        justify-content: flex-start;
    }

    .team-word {
        flex: 0 0 100%;
        text-align: center;
        font-size: 5.2rem;
    }

    .team-word-the {
        order: -1;
        margin: 0;
    }

    .team-composition-row-rest {
        padding-left: 0;
    }

	    .member {
	        --team-bubble-size: 144px;
	    }

	    .about-team-inline .team-shell {
	        padding-top: 58px;
	        padding-bottom: 52px;
	    }
	
	    .social-icons-team {
	        left: 34px;
        bottom: 24px;
    }
}

/* Detail Overlay */
#team-detail-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#team-detail-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.detail-close-btn {
    position: absolute;
    font-family: var(--font-main);
    font-size: 0.85rem;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: color 0.3s;
    z-index: 1010;
}

.detail-close-btn:hover {
    color: white;
}

.detail-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 80px;
    max-width: 1000px;
    width: 90%;
    transform: translateY(30px);
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#team-detail-overlay .detail-close-btn {
    top: -78px;
    left: 2px;
}

#team-detail-overlay.active .detail-content {
    transform: translateY(0);
}

.detail-visual {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.detail-avatar-circle {
    width: 350px;
    height: 350px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(0, 240, 255, 0.3);
    box-shadow: 0 0 60px rgba(0, 240, 255, 0.1);
}

.detail-avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-info {
    flex: 1.5;
    font-family: 'Outfit', sans-serif;
}

#detail-name {
    font-family: var(--font-main);
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: white;
    letter-spacing: 2px;
}

#detail-role {
    font-size: 0.8rem;
    letter-spacing: 0.4em;
    color: var(--neon-blue);
    text-transform: uppercase;
    margin-bottom: 40px;
    font-weight: 300;
}

#detail-bio {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.6);
    max-width: 500px;
    font-weight: 300;
}

/* --- BLOGS SECTION --- */
.blogs-container {
    padding: 0 5%;
    width: 100%;
    margin-top: 80px;
}

.blogs-container h1 {
    font-family: var(--font-main);
    font-size: 2.75rem;
    font-weight: 300;
    text-align: center;
    margin-bottom: 35px;
    letter-spacing: 0.25em;
    text-transform: capitalize;
}

.blogs-container h1,
.blog-card,
.blog-social-icons,
#blog-article-overlay .detail-close-btn,
#blog-article-overlay .blog-article-content > * {
    will-change: opacity, transform;
}

#blog-article-overlay .detail-close-btn {
    position: fixed !important;
    top: 74px !important;
    left: 56px !important;
    z-index: 1110 !important;
}

#blog-article-overlay .blog-article-content {
    padding-top: 110px !important;
    padding-bottom: 110px !important;
}

#blog-article-overlay .blog-article-content h3 {
    font-family: var(--font-main, 'Montserrat', sans-serif);
    font-size: clamp(1.35rem, 1.8vw, 1.75rem);
    font-weight: 500;
    color: #ffffff;
    margin-top: 52px;
    margin-bottom: 22px;
    line-height: 1.35;
    letter-spacing: -0.015em;
}

#blog-article-overlay .blog-article-content p {
    font-size: clamp(1.0rem, 1.15vw, 1.12rem);
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.76);
    font-weight: 300;
    margin-bottom: 28px;
}

@media (max-width: 768px) {
    #blog-article-overlay .detail-close-btn {
        top: calc(74px + env(safe-area-inset-top)) !important;
        left: 24px !important;
        font-size: 0.62rem !important;
        letter-spacing: 0.18em !important;
    }
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: 20px;
    max-width: 950px;
    margin: 0 auto;
}

.blog-card {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    color: #1a1a1a;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 240, 255, 0.2);
}

/* Image-only card with title gradient overlay */
.blog-card.blog-img-only {
    position: relative;
    overflow: hidden;
}

.blog-card.blog-img-only .blog-image {
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    display: block;
}

.blog-img-overlay-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 15px 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    font-family: var(--font-main);
}

/* Dark editorial card */
.blog-card.blog-editorial {
    grid-column: span 2;
    background: #000;
}

.blog-card.blog-editorial .blog-content {
    padding: 35px 40px;
}

.blog-image {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.blog-content {
    position: relative;
    padding: 30px 20px 15px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Circular avatar - uses the card's own image, no person photo */
.blog-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 3px solid #fff;
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: #ddd;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    overflow: hidden;
}

.blog-title {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 15px;
    color: #000;
}

.blog-tag {
    font-size: 0.7rem;
    color: #888;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: 600;
}

.blog-desc {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

.blog-author-row {
    display: flex;
    align-items: center;
    margin-top: auto;
}

.blog-author-info {
    display: flex;
    flex-direction: column;
}

.blog-author-name {
    font-weight: 700;
    font-size: 0.85rem;
}

.blog-author-date {
    font-size: 0.75rem;
    color: #888;
}

.blog-footer {
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
    margin-top: auto;
    border-top: 1px solid #eee;
    color: #888;
    font-size: 0.8rem;
    padding: 15px 15px 0 15px;
}

.blog-footer i {
    margin-right: 5px;
}

.blog-social-icons {
    position: fixed;
    bottom: 40px;
    left: 60px;
    display: flex;
    gap: 15px;
    z-index: 100;
}

.blog-social-icons a {
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s;
}

.blog-social-icons a:hover {
    color: white;
    background: var(--neon-blue);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

/* Restored blog layout with shared site atmosphere */
#blogs-section {
    isolation: isolate;
    background:
        radial-gradient(ellipse at 18% 78%, rgba(125, 16, 167, 0.24) 0%, rgba(80, 16, 122, 0.12) 24%, transparent 52%),
        radial-gradient(ellipse at 70% 34%, rgba(60, 38, 172, 0.16) 0%, rgba(34, 25, 100, 0.10) 30%, transparent 58%),
        linear-gradient(180deg, #02040d 0%, #03020b 54%, #05020d 100%) !important;
}

#blogs-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, transparent 42%, rgba(0, 0, 0, 0.18) 100%),
        radial-gradient(circle at 45% 46%, rgba(42, 7, 94, 0.22) 0%, transparent 48%);
}

#blogs-section .loco-scroll-shell {
    z-index: 1;
}

.blogs-container {
    width: 100%;
    min-height: 100vh;
    margin-top: 0;
    padding: 118px 5% 120px;
    display: block;
    position: relative;
    z-index: 1;
}

.blogs-container h1 {
    font-size: 2.75rem;
    line-height: 1.05;
    margin: 0 0 35px;
    letter-spacing: 0.25em;
    color: rgba(255, 255, 255, 0.93);
    text-shadow: 0 14px 42px rgba(255, 255, 255, 0.14);
}

.blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
}

.blog-card {
    background: #fbfbff;
    border-radius: 6px;
    color: #151623;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.46);
    cursor: pointer;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px rgba(74, 20, 130, 0.36);
}

.blog-image {
    display: block;
    height: 160px;
    filter: grayscale(1) sepia(0.18) hue-rotate(212deg) saturate(0.64) brightness(1.04) contrast(0.95);
}

.blog-card--compact .blog-image {
    height: 160px;
}

.blog-card--compact .blog-content {
    min-height: 124px;
    padding: 36px 22px 16px;
    background: #fbfbff;
}

.blog-avatar {
    width: 42px;
    height: 42px;
    top: -21px;
}

.blog-title {
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.36;
    margin: 0 0 14px;
    color: #10111b;
}

.blog-footer {
    border-top: 1px solid #e7e7ef;
    color: #8b8c96;
    font-size: 0.68rem;
    padding: 12px 8px 0;
    gap: 12px;
}

.blog-footer i {
    margin-right: 4px;
    font-size: 0.64rem;
}

.blog-card--feature {
    grid-column: auto;
    display: flex;
    min-height: auto;
}

.blog-card--feature .blog-image {
    height: 160px;
    min-height: 0;
}

.blog-card--feature .blog-content {
    padding: 30px 20px 15px;
    background: #fbfbff;
}

.blog-tag {
    font-size: 0.62rem;
    color: #767889;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

.blog-card--feature .blog-title {
    text-align: center;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.blog-desc {
    font-size: 0.72rem;
    color: #646573;
    line-height: 1.55;
    margin-bottom: 20px;
}

.blog-author-row {
    gap: 10px;
}

.blog-author-name {
    font-size: 0.76rem;
    color: #20212c;
}

.blog-author-date {
    font-size: 0.66rem;
    color: #8a8b96;
}

.blog-author-avatar {
    position: static;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    transform: none;
    border-width: 2px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

.blog-social-icons {
    display: flex;
}

@media (max-width: 768px) {
    .blogs-container {
        min-height: 100dvh;
        padding: 172px 0 96px;
    }

    .blogs-container h1 {
        font-size: 3rem;
        line-height: 0.95;
        margin-bottom: 35px;
        letter-spacing: 0.06em;
        position: relative;
        left: -14px;
    }

    .blog-grid {
        width: min(81vw, 242px);
        max-width: 242px;
        gap: 15px 14px;
        position: relative;
        left: -14px;
    }

    .blog-card {
        box-shadow: 0 9px 18px rgba(0, 0, 0, 0.5);
    }

    .blog-card:hover {
        transform: none;
    }

    .blog-card--compact {
        min-height: 136px;
    }

    .blog-card--compact .blog-image {
        height: 64px;
    }

    .blog-card--compact .blog-content {
        min-height: 72px;
        padding: 17px 7px 5px;
    }

    .blog-avatar {
        width: 25px;
        height: 25px;
        top: -13px;
        border-width: 2px;
    }

    .blog-title {
        font-size: 0.42rem;
        line-height: 1.36;
        margin-bottom: 5px;
    }

    .blog-footer {
        font-size: 0.36rem;
        padding: 5px 4px 0;
        gap: 5px;
    }

    .blog-footer i {
        margin-right: 2px;
        font-size: 0.35rem;
    }

    .blog-card--feature {
        min-height: 115px;
    }

    .blog-card--feature .blog-image {
        min-height: 115px;
    }

    .blog-card--feature .blog-content {
        min-height: 115px;
        padding: 10px 10px 8px;
    }

    .blog-tag {
        font-size: 0.32rem;
        letter-spacing: 0.1em;
        margin-bottom: 5px;
    }

    .blog-card--feature .blog-title {
        font-size: 0.4rem;
        line-height: 1.32;
        margin-bottom: 5px;
    }

    .blog-desc {
        font-size: 0.32rem;
        line-height: 1.5;
        margin-bottom: 6px;
    }

    .blog-author-row {
        gap: 5px;
    }

    .blog-author-avatar {
        width: 16px;
        height: 16px;
        border-width: 1px;
    }

    .blog-author-name {
        font-size: 0.33rem;
    }

    .blog-author-date {
        font-size: 0.29rem;
    }
}

/* --- PORTFOLIO REDESIGN (Masonry Style) --- */
.client-marquee-section {
    position: relative;
    width: 100%;
    padding: 86px 0 78px;
    overflow: hidden;
    contain: layout paint;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(63, 217, 255, 0.08) 0%, rgba(63, 217, 255, 0) 48%),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(22, 0, 30, 0.42) 48%, rgba(0, 0, 0, 0) 100%);
}

.client-marquee {
    position: relative;
    width: min(100%, 1500px);
    margin: 0 auto;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}

.client-marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: client-marquee-scroll 72s linear infinite;
    will-change: transform;
}

.client-marquee-group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: clamp(48px, 4.6vw, 86px);
    padding-right: clamp(48px, 4.6vw, 86px);
}

.client-marquee-logo {
    display: block;
    width: clamp(112px, 8.2vw, 166px);
    height: 62px;
    object-fit: contain;
    opacity: 0.44;
    filter: drop-shadow(0 0 8px rgba(89, 210, 255, 0.06));
}

.about-team-inline .member .info {
    display: block !important;
    bottom: 16px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.82);
}

.about-team-inline .member .name-text {
    font-size: 12px;
}

.about-team-inline .member .info span {
    font-size: 9px !important;
}

@keyframes client-marquee-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
    gap: 20px;
    padding: 40px 0;
}

.portfolio-item {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0a0a0a;
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.portfolio-item.span-2 {
    grid-column: span 2;
    aspect-ratio: 16 / 9;
}

.portfolio-item.tall {
    grid-row: span 1;
    aspect-ratio: 16 / 9;
}

.portfolio-item.large {
    grid-column: span 2;
    grid-row: span 1;
    aspect-ratio: 16 / 9;
}

.portfolio-media {
    position: relative;
    width: 100%;
    height: 100%;
    transform: none;
}

.portfolio-item:hover .portfolio-media {
    transform: none;
}

.portfolio-image,
.portfolio-video-shell,
.portfolio-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.72s ease, opacity 0.72s ease, transform 1.05s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.portfolio-image {
    z-index: 0;
    opacity: 0.72;
    filter: brightness(0.72);
    pointer-events: none;
}

.portfolio-video-shell {
    z-index: 1;
    opacity: 0;
    background: #080808;
}

.portfolio-video-shell.is-mounted {
    opacity: 1;
}

.portfolio-video {
    z-index: 1;
    filter: brightness(1);
    opacity: 1;
    background: #080808;
}

.portfolio-item.is-playing .portfolio-image {
    opacity: 0;
    transform: none;
}

.portfolio-item.video-unavailable .portfolio-image {
    z-index: 2;
    opacity: 1;
    transform: none;
}

.portfolio-item.video-unavailable .portfolio-video,
.portfolio-item.video-unavailable .portfolio-video-shell {
    opacity: 0;
    pointer-events: none;
}

.portfolio-item:hover .portfolio-video,
.portfolio-item.is-playing .portfolio-video {
    filter: brightness(1);
}

.portfolio-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    padding: 24px;
    opacity: 0;
    transform: translateY(12px) scale(0.986);
    transition: opacity 0.32s ease, transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    overflow: hidden;
}

.portfolio-overlay::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 58%;
    background:
        linear-gradient(180deg, rgba(2, 4, 10, 0) 0%, rgba(3, 7, 16, 0.12) 18%, rgba(3, 7, 16, 0.78) 66%, rgba(2, 5, 12, 0.96) 100%),
        radial-gradient(circle at 18% 100%, rgba(0, 194, 255, 0.2), transparent 44%),
        radial-gradient(circle at 82% 110%, rgba(122, 64, 184, 0.18), transparent 38%);
    backdrop-filter: blur(16px) saturate(1.14);
    -webkit-backdrop-filter: blur(16px) saturate(1.14);
    mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
}

.portfolio-overlay::after {
    content: "";
    position: absolute;
    left: 24px;
    bottom: 24px;
    width: min(108px, 24%);
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(104, 226, 255, 0.96), rgba(104, 226, 255, 0.14));
    box-shadow: 0 0 18px rgba(72, 214, 255, 0.34);
    transform: scaleX(0.72);
    transform-origin: left center;
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-info {
    position: relative;
    z-index: 1;
    width: min(100%, 460px);
    padding: 18px 18px 8px 0;
}

.project-category {
    display: none;
}

.project-title {
    margin: 0;
    color: rgba(248, 251, 255, 0.98);
    font-family: var(--font-main);
    font-size: clamp(0.94rem, 1.08vw, 1.12rem);
    font-weight: 650;
    letter-spacing: 0.12em;
    line-height: 1.28;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.44),
        0 0 22px rgba(0, 174, 239, 0.12);
}

.project-desc {
    display: none;
}

.portfolio-item:hover .portfolio-overlay,
.portfolio-item:focus-visible .portfolio-overlay,
.portfolio-item:focus-within .portfolio-overlay {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.portfolio-item:hover .portfolio-overlay::after,
.portfolio-item:focus-visible .portfolio-overlay::after,
.portfolio-item:focus-within .portfolio-overlay::after {
    transform: scaleX(1);
}

.portfolio-case-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: clamp(18px, 3.6vw, 52px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.portfolio-case-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.portfolio-case-modal__scrim {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 28%, rgba(0, 194, 255, 0.11), transparent 24%),
        radial-gradient(circle at 86% 12%, rgba(126, 68, 188, 0.12), transparent 24%),
        rgba(2, 4, 10, 0.82);
    backdrop-filter: blur(16px) saturate(1.08);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
}

.portfolio-case-modal__panel {
    position: relative;
    width: min(1340px, 94vw);
    height: min(92vh, 960px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(88, 210, 255, 0.16);
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(8, 22, 39, 0.97) 0%, rgba(4, 8, 17, 0.988) 46%, rgba(2, 4, 10, 0.996) 100%);
    box-shadow:
        0 40px 120px rgba(0, 0, 0, 0.56),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 46px rgba(0, 174, 239, 0.08);
    color: #fff;
    transform: translateY(16px) scale(0.986);
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-case-modal__details {
    display: grid;
    grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
    flex: 1 1 45%;
    min-height: 0;
    width: 100%;
}

.portfolio-case-modal__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(122deg, rgba(86, 214, 255, 0.08), transparent 18%, transparent 58%, rgba(152, 91, 255, 0.05) 100%);
}

.portfolio-case-modal.is-open .portfolio-case-modal__panel {
    transform: translateY(0) scale(1);
}

.portfolio-case-modal__meta {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    min-height: 0;
    overflow: hidden;
    padding: clamp(24px, 2.5vw, 36px) clamp(18px, 2vw, 28px);
    border-right: 1px solid rgba(88, 210, 255, 0.1);
    background:
        radial-gradient(circle at 14% 12%, rgba(0, 194, 255, 0.18), transparent 32%),
        linear-gradient(180deg, rgba(4, 18, 31, 0.96), rgba(2, 9, 17, 0.98));
}

.portfolio-case-modal__meta::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(95, 217, 255, 0.3), rgba(255,255,255,0));
}

/* video strip – top ~55% of panel */
.portfolio-case-modal__media {
    position: relative;
    width: 100%;
    flex: 0 0 55%;
    min-height: 0;
    background:
        radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.06), transparent 28%),
        linear-gradient(180deg, rgba(4, 7, 14, 0.96), rgba(2, 4, 10, 0.98));
    border-bottom: 1px solid rgba(88, 210, 255, 0.1);
    overflow: hidden;
}

.portfolio-case-modal__media:empty {
    display: none;
}

/* bottom strip – meta left + body right */
.portfolio-case-modal__details {
    display: grid;
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

/* hide old __content wrapper (not used any more) */
.portfolio-case-modal__content {
    display: none;
}

.portfolio-case-modal__player {
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: block;
    background: transparent;
    --media-object-fit: contain;
    --media-object-position: center;
    --controls-backdrop-color: rgba(5, 7, 14, 0.42);
    --controls-border-radius: 18px;
}

.portfolio-case-modal__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
    color: rgba(210, 233, 246, 0.72);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.portfolio-case-modal__eyebrow::before {
    content: "";
    width: 30px;
    height: 1px;
    background: linear-gradient(90deg, rgba(88, 214, 255, 0.92), rgba(88, 214, 255, 0.18));
    box-shadow: 0 0 16px rgba(88, 214, 255, 0.28);
}

.portfolio-case-modal__title {
    margin: 0;
    color: #f8fbff;
    font-family: var(--font-main);
    font-size: clamp(1.48rem, 2.14vw, 2.9rem);
    line-height: 1;
    font-weight: 760;
    letter-spacing: -0.035em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.portfolio-case-modal__role {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}

.portfolio-case-modal__role-chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 14px;
    border: 1px solid rgba(114, 219, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(218, 232, 243, 0.7);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.portfolio-case-modal__body {
    position: relative;
    padding: clamp(24px, 2.2vw, 32px) clamp(28px, 3vw, 42px);
    overflow-y: auto;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-gutter: stable both-edges;
    padding: clamp(30px, 3vw, 44px);
    border: 1px solid rgba(88, 210, 255, 0.1);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(5, 8, 15, 0.92), rgba(3, 6, 12, 0.86));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 16px 36px rgba(0, 0, 0, 0.16);
    scrollbar-width: auto;
    scrollbar-color: rgba(92, 214, 255, 0.36) rgba(255, 255, 255, 0.025);
}

.portfolio-case-modal__body::before {
    content: "Case Notes";
    display: inline-block;
    margin: 0 0 20px;
    color: rgba(196, 227, 242, 0.56);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.portfolio-case-modal__body p {
    margin: 0 0 18px;
    color: rgba(230, 237, 246, 0.86);
    font-size: clamp(0.96rem, 1vw, 1.04rem);
    line-height: 1.95;
    letter-spacing: 0.004em;
}

.portfolio-case-modal__body p:last-child {
    margin-bottom: 0;
}

.portfolio-case-modal__body::-webkit-scrollbar {
    width: 12px;
}

.portfolio-case-modal__body::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(84, 212, 255, 0.5), rgba(84, 212, 255, 0.18));
    background-clip: padding-box;
}

.portfolio-case-modal__body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 999px;
}

.portfolio-case-modal__close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(4, 8, 15, 0.58);
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.26rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.portfolio-case-modal__close:hover,
.portfolio-case-modal__close:focus-visible {
    border-color: rgba(83, 208, 255, 0.72);
    background: rgba(0, 174, 239, 0.16);
    transform: scale(1.04);
    outline: none;
}

@media (max-width: 768px) {
    .portfolio-overlay {
        opacity: 1;
        transform: none;
        padding: 16px;
    }

    .portfolio-overlay::before {
        height: 58%;
    }

    .portfolio-overlay::after {
        left: 16px;
        bottom: 16px;
        width: 72px;
    }

    .portfolio-info {
        width: 100%;
        padding: 12px 12px 6px 0;
    }

    .project-title {
        font-size: 0.84rem;
        letter-spacing: 0.1em;
    }

    .portfolio-case-modal {
        padding: 12px;
    }

    .portfolio-case-modal__panel {
        width: 100%;
        height: 90svh;
        max-height: 90svh;
        border-radius: 18px;
    }

    .portfolio-case-modal__details {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }

    .portfolio-case-modal__meta {
        justify-content: flex-start;
        gap: 18px;
        padding: 30px 22px 18px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .portfolio-case-modal__meta::before {
        display: none;
    }

    .portfolio-case-modal__title {
        max-width: none;
        font-size: clamp(1.34rem, 7.2vw, 2.14rem);
    }

    .portfolio-case-modal__role-chip {
        min-height: 30px;
        padding: 0 12px;
        font-size: 0.62rem;
        letter-spacing: 0.12em;
    }

    .portfolio-case-modal__content {
        display: none;
    }

    .portfolio-case-modal__media {
        flex: 0 0 38%;
        border-radius: 18px 18px 0 0;
    }

    .portfolio-case-modal__body {
        padding: 22px 18px 24px;
        border-radius: 0;
        overflow: visible;
    }

    .portfolio-case-modal__body p {
        font-size: 0.92rem;
        line-height: 1.84;
    }

    .portfolio-case-modal__close {
        top: 14px;
        right: 14px;
        width: 40px;
        height: 40px;
    }
}

/* Portfolio Footer */
.portfolio-footer {
    width: 100%;
    background: #1a0b2e; /* Dark purple from screenshot */
    padding: 25px 60px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    margin-top: 60px;
}

.footer-socials {
    display: flex;
    gap: 15px;
}

.footer-socials a {
    color: white;
    opacity: 0.7;
    font-size: 1.1rem;
    text-decoration: none;
    transition: opacity 0.3s;
}

.footer-socials a:hover {
    opacity: 1;
}

/* --- CONTACT SECTION --- */
#contact-section.contact-scene {
    isolation: isolate;
    overflow: hidden !important;
}

.contact-background-stack {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.contact-base-wash,
.contact-plum-glow,
.contact-deep-fade {
    position: absolute;
    inset: 0;
}

.contact-base-wash {
    background:
        linear-gradient(90deg,
            rgba(5, 7, 19, 0.78) 0%,
            rgba(4, 6, 18, 0.58) 34%,
            rgba(4, 6, 18, 0.14) 56%,
            rgba(4, 6, 18, 0.03) 70%,
            rgba(4, 6, 18, 0) 80%
        ),
        linear-gradient(180deg,
            rgba(5, 7, 19, 0.10) 0%,
            rgba(2, 2, 8, 0.16) 100%
        );
}

.contact-plum-glow {
    inset: -18%;
    --contact-glow-x: 12%;
    --contact-glow-y: 84%;
    --contact-cyan-x: 78%;
    --contact-cyan-y: 52%;
    background:
        radial-gradient(circle at var(--contact-glow-x) var(--contact-glow-y),
            rgba(116, 20, 119, 0.52) 0%,
            rgba(84, 15, 96, 0.34) 17%,
            rgba(27, 10, 50, 0.10) 35%,
            rgba(0, 0, 0, 0) 58%
        ),
        radial-gradient(circle at var(--contact-cyan-x) var(--contact-cyan-y),
            rgba(10, 112, 182, 0.08) 0%,
            rgba(0, 0, 0, 0) 33%
        );
    filter: blur(30px);
    transform: scale(1.04);
    opacity: 0.5;
    will-change: opacity, filter, transform;
}

.contact-deep-fade {
    background:
        linear-gradient(90deg,
            rgba(3, 5, 18, 0.36) 0%,
            rgba(4, 6, 22, 0.24) 32%,
            rgba(4, 6, 20, 0.10) 52%,
            rgba(5, 7, 18, 0.02) 70%,
            rgba(5, 7, 18, 0) 82%
        ),
        linear-gradient(180deg,
            rgba(5, 7, 18, 0.04) 0%,
            rgba(4, 6, 18, 0.14) 100%
        );
}

body.contact-video-foreground #contact-section.active .contact-background-stack,
body.contact-video-foreground #contact-section.active .contact-base-wash,
body.contact-video-foreground #contact-section.active .contact-plum-glow,
body.contact-video-foreground #contact-section.active .contact-deep-fade {
    display: block !important;
}

body.contact-video-foreground #contact-section.active .contact-background-stack {
    opacity: 1 !important;
    background: transparent !important;
    mix-blend-mode: screen;
}

body.contact-video-foreground #contact-section.active .contact-base-wash {
    opacity: 0.54 !important;
    background:
        linear-gradient(90deg,
            rgba(5, 7, 19, 0.68) 0%,
            rgba(4, 6, 18, 0.42) 34%,
            rgba(4, 6, 18, 0.10) 56%,
            rgba(4, 6, 18, 0.02) 74%,
            rgba(4, 6, 18, 0) 84%
        ),
        linear-gradient(180deg,
            rgba(5, 7, 19, 0.06) 0%,
            rgba(2, 2, 8, 0.12) 100%
        ) !important;
}

body.contact-video-foreground #contact-section.active .contact-plum-glow {
    opacity: 0.52;
    background:
        radial-gradient(circle at var(--contact-glow-x) var(--contact-glow-y),
            rgba(116, 20, 119, 0.30) 0%,
            rgba(84, 15, 96, 0.20) 17%,
            rgba(27, 10, 50, 0.08) 35%,
            rgba(0, 0, 0, 0) 58%
        ),
        radial-gradient(circle at var(--contact-cyan-x) var(--contact-cyan-y),
            rgba(10, 112, 182, 0.10) 0%,
            rgba(0, 0, 0, 0) 34%
        ) !important;
}

body.contact-video-foreground #contact-section.active .contact-deep-fade {
    opacity: 0.88;
    background:
        linear-gradient(90deg,
            rgba(3, 5, 18, 0.28) 0%,
            rgba(4, 6, 22, 0.18) 32%,
            rgba(4, 6, 20, 0.08) 52%,
            rgba(5, 7, 18, 0.01) 74%,
            rgba(5, 7, 18, 0) 86%
        ),
        linear-gradient(180deg,
            rgba(5, 7, 18, 0.02) 0%,
            rgba(4, 6, 18, 0.10) 100%
        ) !important;
}

.contact-main {
    position: relative;
    z-index: 20;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    align-items: flex-start;
    padding: 104px 48px 52px;
    box-sizing: border-box;
    overflow: hidden;
}

.contact-content-left {
    flex: 0 0 54%;
    max-width: 720px;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px 0 24px;
}

.contact-text-block {
    color: #ffffff;
    max-width: 680px;
    width: 100%;
}

.contact-form-block {
    /* form sits at the bottom of the left column */
    max-width: 520px;
    width: 100%;
}

.contact-reveal {
    opacity: 0;
    transform: translateY(24px);
}

.contact-lead {
    margin: 0 0 28px;
    font-size: clamp(1.05rem, 1.22vw, 1.25rem);
    line-height: 1.85;
    font-weight: 300;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.78);
}

.contact-question,
.contact-cta {
    margin: 0 0 8px;
    font-size: clamp(1.05rem, 1.22vw, 1.25rem);
    line-height: 1.85;
    letter-spacing: 0.01em;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.78);
}

.contact-question {
    display: block;
}

.contact-cta {
    margin: 0;
    display: block;
    align-items: initial;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 300;
    transition: none;
}

.contact-cta:hover {
    color: rgba(255, 255, 255, 0.78);
    text-shadow: none;
}

.contact-visual-anchor {
    flex: 1 1 auto;
    min-width: 32%;
    min-height: 100%;
}

.contact-social-row {
    position: absolute;
    left: 20px;
    bottom: 18px;
    z-index: 30;
    display: flex;
    gap: 7px;
}

.contact-social-link {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.58);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.contact-social-link:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.36);
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

.contact-divider {
    width: 40px;
    height: 1px;
    background: rgba(255,255,255,0.25);
    margin: 36px 0 32px;
}

.contact-form-label {
    font-size: 0.64rem;
    letter-spacing: 0.32em;
    color: rgba(255,255,255,0.45);
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 0;
}

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contact-input {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 16px 20px;
    color: rgba(255,255,255,0.9);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
    width: 100%;
}

.contact-input::placeholder {
    color: rgba(255,255,255,0.28);
}

.contact-input:focus {
    border-color: rgba(255,255,255,0.32);
    background: rgba(255,255,255,0.07);
}

.contact-textarea {
    min-height: 140px;
    resize: none;
}

.contact-send-btn {
    width: auto;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.32);
    border-radius: 30px;
    color: rgba(255,255,255,0.9);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    padding: 16px 42px;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    text-align: center;
}

.contact-send-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.65);
    color: #fff;
}

.contact-info-grid {
    position: absolute;
    bottom: 48px;
    left: 58%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-info-label {
    font-size: 0.58rem;
    letter-spacing: 0.28em;
    color: rgba(255,255,255,0.38);
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 500;
}

.contact-info-text {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.72);
    font-weight: 300;
}

/* Fragment Canvas Style */
#fragment-canvas {
    width: 1000px;
    height: 1000px;
    pointer-events: none;
}

@media (max-width: 1024px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile Nav Overlay & Hamburger - hidden on desktop */
@media (max-width: 768px) {
    #portfolios-section {
        -webkit-overflow-scrolling: touch;
    }

    #portfolios-section .portfolio-container {
        padding: 0 18px !important;
    }

    #portfolios-section .portfolio-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
        padding: 24px 0 36px;
    }

    #portfolios-section .portfolio-item,
    #portfolios-section .portfolio-item.span-2,
    #portfolios-section .portfolio-item.large {
        grid-column: span 1;
        grid-row: span 1;
        aspect-ratio: 16 / 10;
    }

    #portfolios-section .portfolio-item.tall {
        grid-column: span 1;
        grid-row: span 1;
        aspect-ratio: 4 / 5;
    }

    #portfolios-section .portfolio-hero-full {
        height: 62svh !important;
        min-height: 420px;
    }

    #portfolios-section .portfolio-hero-title {
        font-size: clamp(2rem, 13vw, 3.1rem) !important;
        letter-spacing: 0 !important;
    }

    #contact-section .contact-main {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    #contact-section .contact-content-left,
    #contact-section .contact-text-block {
        max-width: 280px !important;
    }

    #contact-section .contact-lead {
        line-height: 1.22 !important;
    }
}

#mobile-nav-overlay {
    display: none;
}

#mobile-hamburger {
    display: none;
}

#mobile-brand-home {
    display: none;
}

#mobile-intro-container {
    display: none;
}

@media (max-width: 768px) {
    /* ── Mobile Nav Overlay ── */
    #mobile-nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 5000;
        --mobile-nav-gradient-opacity: 0;
        background: rgba(0, 0, 0, 0.88);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transition: none;
        will-change: opacity;
    }

    body.show-mobile-nav #mobile-nav-overlay {
        display: flex;
        opacity: 1;
        pointer-events: auto;
    }

    body.mobile-home-nav #mobile-nav-overlay {
        background: rgba(0, 0, 0, 0.14);
    }

    .mobile-nav-close {
        position: absolute;
        top: 28px;
        right: 28px;
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.55);
        font-size: 1.1rem;
        cursor: pointer;
        font-family: 'Montserrat', sans-serif;
        letter-spacing: 0.1em;
        padding: 8px;
        transition: color 0.3s;
    }

    .mobile-nav-close:hover {
        color: #fff;
    }

    body.mobile-home-nav .mobile-nav-close {
        opacity: 0;
        pointer-events: none;
    }

    body.mobile-home-nav .mobile-nav-links {
        transform: translateY(31vh);
        gap: clamp(12px, 2.4vh, 18px);
    }

    body.mobile-home-nav .mobile-nav-item {
        font-size: clamp(1rem, 5.4vw, 1.35rem);
        color: rgba(255, 255, 255, 0.74);
    }

    .mobile-nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(18px, 3.6vh, 30px);
    }

    .mobile-nav-item {
        font-family: 'Montserrat', sans-serif;
        font-size: clamp(1.45rem, 7.6vw, 2rem);
        font-weight: 300;
        letter-spacing: 0.01em;
        color: rgba(255, 255, 255, 0.9);
        text-decoration: none;
        text-transform: none;
        transition: color 0.3s ease;
    }

    .mobile-nav-item:hover,
    .mobile-nav-item:active {
        color: var(--neon-blue);
    }

    /* ── Mobile Hamburger ── */
    #mobile-hamburger {
        position: fixed;
        top: 22px;
        right: 22px;
        z-index: 4500;
        background: none;
        border: none;
        cursor: pointer;
        flex-direction: column;
        gap: 6px;
        padding: 10px;
        pointer-events: auto;
    }

    #mobile-hamburger.visible {
        display: flex;
    }

    #mobile-hamburger span {
        display: block;
        width: 22px;
        height: 1.5px;
        background: rgba(255, 255, 255, 0.85);
        transition: opacity 0.3s ease;
    }

    body.mobile-home-nav #mobile-hamburger {
        display: none !important;
    }


    body.intro-active #mobile-intro-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 99999 !important;
        background: #000 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        transform: none !important;
    }

    body.mobile-home-nav #mobile-intro-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 4990 !important;
        background: #000 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    #mobile-intro-video {
        width: 100vw !important;
        height: 100vh !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center center !important;
        position: relative !important;
        border-radius: 0 !important;
        transform: scale(1.14);
        transform-origin: center center;
        opacity: 1;
        transition: opacity 1.1s cubic-bezier(0.37, 0, 0.63, 1);
        will-change: opacity;
    }

    body.mobile-home-nav #mobile-intro-video {
        opacity: 0.84;
    }

    /* Hide all other elements from mobile view */
    body.intro-active #center-nav,
    body.intro-active #experience-trigger,
    body.intro-active #status-label,
    body.intro-active #custom-cursor-dot,
    body.intro-active #custom-cursor-ring,
    body.intro-active #mouse-glow,
    body.intro-active #center-glow,
    body.intro-active .scroll-section,
    body.intro-active #team-detail-overlay,
    body.intro-active #blog-article-overlay,
    body.intro-active #video-container,
    body.intro-active .contact-social-row,
    body.intro-active #mobile-nav-overlay,
    body.intro-active #mobile-hamburger,
    body.intro-active #home-audio-toggle {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .home-audio-toggle {
        right: calc(24px + env(safe-area-inset-right));
        bottom: calc(24px + env(safe-area-inset-bottom));
        z-index: 5210;
        width: 42px;
        height: 42px;
        background: rgba(4, 9, 16, 0.34);
    }

    body.show-mobile-nav:not(.mobile-home-nav) .home-audio-toggle {
        opacity: 0;
        pointer-events: none;
        transform: translateY(7px) scale(0.96);
    }
}

/* Mobile cinematic art direction final overrides
   Last mobile owner: keep this aligned with ai-context/mobile_reference. */
@media (max-width: 768px) {
    :root {
        --mobile-lock-w: 100vw;
        --mobile-lock-h: 100svh;
        --mobile-lock-vw: 1vw;
        --mobile-lock-vh: 1svh;
    }

    body.mobile-composition-locked {
        width: var(--mobile-lock-w) !important;
        min-width: var(--mobile-lock-w) !important;
        height: var(--mobile-lock-h) !important;
        min-height: var(--mobile-lock-h) !important;
        overflow: hidden !important;
    }

    body.mobile-composition-locked #mobile-intro-container,
    body.mobile-composition-locked #mobile-nav-overlay,
    body.mobile-composition-locked .scroll-section {
        width: var(--mobile-lock-w) !important;
        height: var(--mobile-lock-h) !important;
        min-height: var(--mobile-lock-h) !important;
        max-height: var(--mobile-lock-h) !important;
    }

    body.mobile-composition-locked #mobile-intro-video,
    body.mobile-composition-locked .mob-bg-vid,
    body.mobile-composition-locked #bg-video {
        width: var(--mobile-lock-w) !important;
        height: var(--mobile-lock-h) !important;
        min-height: var(--mobile-lock-h) !important;
        max-height: var(--mobile-lock-h) !important;
    }

    body.mobile-composition-locked .loco-scroll-shell,
    body.mobile-composition-locked .loco-scroll-content {
        min-height: var(--mobile-lock-h) !important;
    }

    body.mobile-home-nav #mobile-intro-video {
        transform: translateY(calc(var(--mobile-lock-vh) * 3)) scale(1.30) !important;
        opacity: 0.92 !important;
    }

    body.mobile-home-nav .mobile-nav-links {
        transform: translateY(calc(var(--mobile-lock-vh) * 4.5)) !important;
        gap: clamp(12px, calc(var(--mobile-lock-vh) * 2.2), 18px) !important;
    }

    body.mobile-home-nav .mobile-nav-item {
        font-size: clamp(1.03rem, 4.8vw, 1.18rem) !important;
        line-height: 1.08 !important;
        font-weight: 300 !important;
        letter-spacing: 0.01em !important;
        color: rgba(255, 255, 255, 0.92) !important;
        text-shadow: 0 0 16px rgba(0, 0, 0, 0.7) !important;
    }

    body.show-mobile-nav:not(.mobile-home-nav) #mobile-nav-overlay {
        background:
            radial-gradient(circle at 50% 34%, rgba(22, 126, 156, 0.16), transparent 34%),
            linear-gradient(180deg, rgba(0, 0, 0, 0.96), rgba(2, 0, 10, 0.96)) !important;
    }

    body.show-mobile-nav:not(.mobile-home-nav) .mobile-nav-links {
        transform: translateY(calc(var(--mobile-lock-vh) * -3)) !important;
        gap: 22px !important;
    }

    body.show-mobile-nav:not(.mobile-home-nav) .mobile-nav-item {
        font-size: 1.62rem !important;
        line-height: 1.05 !important;
        color: rgba(255, 255, 255, 0.88) !important;
    }

    body #services-section {
        --service-mobile-scale: 0.96 !important;
        background:
            radial-gradient(circle at 45% 48%, rgba(17, 68, 157, 0.26), transparent 34%),
            radial-gradient(circle at 34% 75%, rgba(115, 0, 118, 0.34), transparent 42%),
            #000 !important;
    }

    #srv-mob-intro,
    #srv-mob-loop,
    #srv-mob-reverse {
        object-fit: contain !important;
        object-position: center center !important;
        transform: translate(calc(var(--mobile-lock-vw) * 28), calc(var(--mobile-lock-vh) * -4)) scale(var(--service-mobile-scale)) !important;
        opacity: 0.96 !important;
    }

    #services-section .services-text-overlay {
        z-index: 14 !important;
        opacity: 0 !important;
        transition: opacity 0.42s ease !important;
        transition-delay: 0s !important;
    }

    #services-section.services-text-live .services-text-overlay {
        opacity: 1 !important;
    }

    #services-section.active .services-text-overlay {
        opacity: 1 !important;
        transition-delay: 2.05s !important;
    }

    #services-section .service-item,
    #services-section .service-item.left-col,
    #services-section .service-item.right-col {
        left: clamp(76px, 22vw, 110px) !important;
        right: 14px !important;
        width: min(72vw, 270px) !important;
        max-width: none !important;
        padding: 0 !important;
        text-align: left !important;
        white-space: normal !important;
        font-size: clamp(0.58rem, 2.85vw, 0.78rem) !important;
        line-height: 1.12 !important;
        font-weight: 300 !important;
        letter-spacing: 0.01em !important;
        color: rgba(225, 232, 247, 0.78) !important;
        text-shadow: 0 0 10px rgba(30, 210, 235, 0.18) !important;
        transform: translateY(-50%) !important;
    }

    #services-section .service-item .line {
        display: none !important;
    }

    #services-section .item-concept { top: 23.2% !important; }
    #services-section .item-cinema  { top: 32.0% !important; }
    #services-section .item-editing { top: 41.2% !important; }
    #services-section .item-sound   { top: 50.9% !important; }
    #services-section .item-vfx     { top: 60.8% !important; }
    #services-section .item-3d      { top: 70.7% !important; }
    #services-section .item-colour  { top: 80.6% !important; }

    #about-section {
        background:
            radial-gradient(circle at 50% 28%, rgba(15, 119, 152, 0.14), transparent 28%),
            linear-gradient(180deg, #000 0%, #020006 100%) !important;
    }

    #about-mob-vid {
        object-position: center 42% !important;
    }

    #about-section .about-content {
        align-items: flex-start !important;
        justify-content: flex-start !important;
        margin-top: calc(var(--mobile-lock-vh) * 30) !important;
        padding: 0 30px calc(var(--mobile-lock-vh) * 18) !important;
    }

    #about-section .manifesto-container {
        width: 100% !important;
        max-width: 306px !important;
        text-align: left !important;
        margin: 0 auto !important;
    }

    #about-section .manifesto-container::before {
        content: "ABOUT US";
        display: block;
        margin: 0 0 18px;
        font-size: 0.66rem;
        line-height: 1;
        font-weight: 600;
        letter-spacing: 0.22em;
        color: rgba(255, 255, 255, 0.78);
    }

    #about-section .manifesto-container > p.reveal-text {
        max-height: calc(var(--mobile-lock-vh) * 30);
        overflow-y: auto;
        padding: 0 8px 24px 0;
        margin: 0 0 26px !important;
        font-size: 0.82rem !important;
        line-height: 1.68 !important;
        letter-spacing: 0 !important;
        text-align: left !important;
        color: rgba(238, 242, 248, 0.72) !important;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
    }

    #about-section .manifesto-container > p.reveal-text::-webkit-scrollbar {
        display: none;
    }


    #meet-team-btn {
        font-size: 0.64rem !important;
        letter-spacing: 0.20em !important;
        color: rgba(255, 255, 255, 0.62) !important;
    }

    .about-scroll-cue {
        width: 38px;
        height: 52px;
        margin-top: 24px;
    }

    #about-section .about-team-inline {
        display: flex !important;
        min-height: auto !important;
        padding: 26px 16px 96px !important;
        background: transparent !important;
    }

    #about-section .about-team-inline .team-shell {
        min-height: auto !important;
        padding: 0 !important;
    }

    #about-section .about-team-heading {
        margin-bottom: 24px !important;
        font-size: clamp(2.2rem, 14vw, 4.1rem) !important;
        line-height: 0.9 !important;
    }

    #about-section .about-team-inline .team-composition {
        width: 100% !important;
        max-width: 360px !important;
        gap: 12px !important;
    }

    #about-section .about-team-inline .team-composition-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        min-height: 0 !important;
        transform: none !important;
    }

    #about-section .about-team-inline .team-word {
        display: none !important;
    }

    #about-section .about-team-inline .member {
        --team-bubble-size: min(42vw, 142px);
        width: var(--team-bubble-size) !important;
        height: var(--team-bubble-size) !important;
        justify-self: center;
    }

    #about-section .about-team-inline .member:hover {
        transform: translate(var(--member-x, 0), var(--member-y, 0)) scale(var(--member-scale, 1));
    }

    #portfolios-section {
        background:
            radial-gradient(circle at 32% 86%, rgba(120, 0, 140, 0.34), transparent 42%),
            linear-gradient(180deg, #00000b 0%, #020012 46%, #190020 100%) !important;
    }

    #portfolios-section .portfolio-hero-full {
        display: none !important;
    }

    #portfolios-section .portfolio-container {
        padding: calc(92px + env(safe-area-inset-top)) 10px 72px !important;
        max-width: none !important;
        margin: 0 !important;
    }

    #portfolios-section .portfolio-grid {
        width: calc(var(--mobile-lock-w) + 24px) !important;
        margin-left: -12px !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-auto-flow: dense !important;
        gap: 7px !important;
        padding: 0 0 48px !important;
    }

    #portfolios-section .portfolio-item,
    #portfolios-section .portfolio-item.tall,
    #portfolios-section .portfolio-item.large,
    #portfolios-section .portfolio-item.span-2 {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
        aspect-ratio: 1.45 / 1 !important;
        border-radius: 2px !important;
    }

    #portfolios-section .portfolio-item.span-2,
    #portfolios-section .portfolio-item.large,
    #portfolios-section .portfolio-item:nth-child(5n + 1) {
        grid-column: span 1 !important;
    }

    #blogs-section {
        background:
            radial-gradient(circle at 39% 87%, rgba(124, 0, 138, 0.36), transparent 44%),
            linear-gradient(180deg, #00000b 0%, #040018 50%, #16001f 100%) !important;
    }

    #blogs-section .blogs-container {
        padding: calc(112px + env(safe-area-inset-top)) 0 88px !important;
    }

    #blogs-section .blogs-container h1 {
        left: 0 !important;
        font-size: clamp(2.35rem, 12vw, 3.05rem) !important;
        line-height: 1 !important;
        margin-bottom: 28px !important;
        text-align: center !important;
    }

    #blogs-section .blog-grid {
        left: 0 !important;
        width: min(82vw, 312px) !important;
        max-width: 312px !important;
        gap: 8px !important;
    }

    #contact-section {
        background:
            radial-gradient(circle at 34% 78%, rgba(120, 0, 136, 0.38), transparent 44%),
            linear-gradient(180deg, #00000b 0%, #030018 54%, #17001f 100%) !important;
    }

    #contact-section .contact-main {
        padding: calc(112px + env(safe-area-inset-top)) 27px 0 !important;
    }

    #contact-section .contact-content-left,
    #contact-section .contact-text-block {
        max-width: 250px !important;
    }

    #contact-section .contact-text-block::before {
        margin-bottom: 16px !important;
        font-size: clamp(0.58rem, 2.85vw, 0.72rem) !important;
        line-height: 1.06 !important;
        font-weight: 700 !important;
        letter-spacing: 0.04em !important;
    }

    #contact-section .contact-lead {
        max-width: 250px !important;
        margin-bottom: 16px !important;
        font-size: clamp(0.58rem, 2.85vw, 0.76rem) !important;
        line-height: 1.12 !important;
        font-weight: 700 !important;
    }

    #contact-section .contact-question {
        margin-bottom: 8px !important;
        font-size: clamp(0.56rem, 2.75vw, 0.72rem) !important;
        line-height: 1.28 !important;
        font-weight: 300 !important;
    }

    #contact-section .contact-cta {
        font-size: clamp(0.56rem, 2.75vw, 0.72rem) !important;
        line-height: 1.28 !important;
        font-weight: 300 !important;
        font-style: normal !important;
        text-shadow: none !important;
    }

    #contact-mob-vid {
        object-fit: contain !important;
        object-position: center bottom !important;
        transform: translateY(calc(var(--mobile-lock-vh) * 14)) scale(0.74) !important;
        transform-origin: 50% 50% !important;
    }
}

/* Mobile desktop-cinematic preservation layer.
   Motion ownership stays with the same global videos and route graph as desktop;
   this layer only reframes the shared system inside a vertical viewport. */
@media (max-width: 768px) {
    .mob-bg-vid,
    .mob-bg-overlay,
    #srv-mob-intro,
    #srv-mob-loop,
    #srv-mob-reverse,
    #about-mob-vid,
    #contact-mob-vid {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    #video-container {
        display: flex !important;
        width: var(--mobile-lock-w, 100vw) !important;
        height: var(--mobile-lock-h, 100svh) !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    #bg-video {
        width: var(--mobile-lock-w, 100vw) !important;
        height: var(--mobile-lock-h, 100svh) !important;
        object-fit: contain !important;
        object-position: center center !important;
        transform-origin: 50% 50% !important;
    }

    #about-section,
    #contact-section {
        background: transparent !important;
    }

    #services-section {
        background: #000 !important;
        overflow: hidden !important;
    }

    :root {
        --mobile-services-media-scale: 1.24;
    }

    #services-bg-video,
    #services-loop-video {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
        transform: scale(var(--mobile-services-media-scale)) !important;
    }

    #services-bg-video {
        z-index: 1 !important;
    }

    #services-loop-video {
        z-index: 1 !important;
    }

    body:not(.show-mobile-nav) #mobile-hamburger.visible,
    body:not(.show-mobile-nav) #mobile-brand-home.visible {
        display: flex !important;
    }

    body:not(.show-mobile-nav) #mobile-brand-home.visible {
        display: block !important;
    }
}

/* Mobile refactor: desktop cinematic system, mobile-only layout adaptation. */
@media (max-width: 768px) {
    body.hero-nav-ready .scroll-section:not(.active) {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    #mobile-intro-container,
    #mobile-intro-video,
    body.intro-active #mobile-intro-container,
    body.mobile-home-nav #mobile-intro-container {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    body.mobile-home-nav #video-container {
        z-index: 0 !important;
    }

    body.mobile-home-nav #bg-video {
        opacity: 1 !important;
        filter: brightness(0.76) contrast(1.08) saturate(1.02) !important;
    }

    body.mobile-home-nav #mobile-nav-overlay,
    body.show-mobile-nav #mobile-nav-overlay {
        background:
            radial-gradient(circle at 50% 48%, rgba(5, 151, 172, 0.10), transparent 34%),
            linear-gradient(180deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.42) 44%, rgba(0, 0, 0, 0.76)) !important;
    }

    body.mobile-home-nav #mobile-nav-overlay::before,
    body.show-mobile-nav #mobile-nav-overlay::before {
        background:
            radial-gradient(ellipse at 50% 50%, rgba(12, 172, 196, 0.10), rgba(0, 0, 0, 0.34) 48%, rgba(0, 0, 0, 0.82) 100%),
            linear-gradient(180deg, rgba(0, 0, 0, 0.82), rgba(1, 0, 8, 0.52) 46%, rgba(0, 0, 0, 0.88)) !important;
    }

    body.mobile-home-nav .mobile-nav-close {
        display: none !important;
    }

    .mobile-nav-close {
        top: calc(30px + env(safe-area-inset-top)) !important;
        right: 30px !important;
        font-size: 0 !important;
        width: 42px;
        height: 42px;
        color: rgba(255, 255, 255, 0.74) !important;
    }

    .mobile-nav-close::before {
        content: "x";
        font-size: 1.25rem;
        font-weight: 300;
        letter-spacing: 0;
    }

    body.mobile-home-nav .mobile-nav-links,
    body.show-mobile-nav .mobile-nav-links {
        transform: translateY(0) !important;
        gap: clamp(16px, 3.1svh, 24px) !important;
    }

    body.mobile-home-nav .mobile-nav-item,
    body.show-mobile-nav .mobile-nav-item {
        min-width: 0;
        text-align: center !important;
        font-size: clamp(1.28rem, 6.2vw, 1.72rem) !important;
        line-height: 1.05 !important;
        font-weight: 300 !important;
        letter-spacing: 0.08em !important;
        color: rgba(255, 255, 255, 0.88) !important;
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.82) !important;
    }

    body.mobile-home-nav.show-mobile-nav #mobile-hamburger.visible,
    body.mobile-home-nav.show-mobile-nav #mobile-brand-home.visible {
        display: none !important;
    }

    #mobile-brand-home {
        top: calc(34px + env(safe-area-inset-top)) !important;
        left: 32px !important;
        font-size: 1.34rem !important;
        font-weight: 300 !important;
        letter-spacing: 0.06em !important;
    }

    #mobile-hamburger {
        top: calc(27px + env(safe-area-inset-top)) !important;
        right: 28px !important;
    }

    #mobile-hamburger span {
        width: 26px !important;
        height: 2px !important;
        background: rgba(255, 255, 255, 0.68) !important;
    }

    #services-section {
        isolation: isolate;
        /* Manual tuning knobs for the mobile services stack. */
        --services-item-left: clamp(86px, 23vw, 124px);
        --services-item-width: min(64vw, 250px);
        --services-item-font-size: clamp(0.7rem, 2.9vw, 0.9rem);
        --services-item-line-width: 22px;
        --services-concept-top: 25.5%;
        --services-cinema-top: 34.3%;
        --services-editing-top: 43.2%;
        --services-sound-top: 52.9%;
        --services-vfx-top: 62.2%;
        --services-3d-top: 70.6%;
        --services-colour-top: 80.6%;
        background: #000 !important;
        overflow: hidden !important;
    }

    #services-bg-video,
    #services-loop-video {
        z-index: 1 !important;
        filter: brightness(0.92) contrast(1.06) saturate(1.08) !important;
    }

    #services-section .services-text-overlay {
        z-index: 4 !important;
        opacity: 0 !important;
        transition: opacity 0.42s ease !important;
        transition-delay: 0s !important;
    }

    #services-section.services-text-live .services-text-overlay {
        opacity: 1 !important;
    }

    #services-section.active .services-text-overlay {
        opacity: 1 !important;
        transition-delay: 2.05s !important;
    }

    #services-section .service-item,
    #services-section .service-item.left-col,
    #services-section .service-item.right-col {
        left: var(--services-item-left) !important;
        right: 16px !important;
        width: var(--services-item-width) !important;
        max-width: none !important;
        padding: 0 !important;
        text-align: left !important;
        white-space: normal !important;
        font-size: var(--services-item-font-size) !important;
        line-height: 1.12 !important;
        font-weight: 300 !important;
        letter-spacing: 0.02em !important;
        color: rgba(244, 248, 255, 0.94) !important;
        text-shadow: 0 0 14px rgba(18, 202, 224, 0.18), 0 1px 14px rgba(0, 0, 0, 0.78) !important;
        transform: translateY(-50%) !important;
        display: block !important;
    }

    #services-section .service-item .line {
        display: block !important;
        width: var(--services-item-line-width) !important;
        height: 1px !important;
        margin-top: 6px !important;
        opacity: 0.55 !important;
        background: linear-gradient(90deg, rgba(57, 213, 239, 0.82), transparent) !important;
    }

    #services-section .item-concept { top: var(--services-concept-top) !important; }
    #services-section .item-cinema  { top: var(--services-cinema-top) !important; }
    #services-section .item-editing { top: var(--services-editing-top) !important; }
    #services-section .item-sound   { top: var(--services-sound-top) !important; }
    #services-section .item-vfx     { top: var(--services-vfx-top) !important; }
    #services-section .item-3d      { top: var(--services-3d-top) !important; }
    #services-section .item-colour  { top: var(--services-colour-top) !important; }

    #portfolios-section {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background:
            radial-gradient(circle at 36% 92%, rgba(104, 0, 132, 0.28), transparent 42%),
            linear-gradient(180deg, #00000b 0%, #030014 48%, #16001d 100%) !important;
    }

    #portfolios-section .portfolio-hero-full {
        height: 36svh !important;
        min-height: 250px !important;
        margin-bottom: 0 !important;
    }

    #portfolios-section .portfolio-hero-caption {
        left: 28px !important;
        bottom: 34px !important;
    }

    #portfolios-section .portfolio-hero-title {
        font-size: clamp(1.8rem, 9vw, 2.7rem) !important;
        letter-spacing: 0 !important;
    }

    #portfolios-section .client-marquee-section {
        padding: 28px 0 24px !important;
    }

    #portfolios-section .client-marquee-group {
        gap: 30px !important;
        padding-right: 30px !important;
    }

    #portfolios-section .client-marquee-logo {
        width: 86px !important;
        height: 36px !important;
        opacity: 0.42 !important;
    }

    #portfolios-section .portfolio-container {
        padding: 16px 18px 64px !important;
        max-width: none !important;
    }

    #portfolios-section .portfolio-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #portfolios-section .portfolio-item,
    #portfolios-section .portfolio-item.tall,
    #portfolios-section .portfolio-item.large,
    #portfolios-section .portfolio-item.span-2 {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
        aspect-ratio: 1 / 1.05 !important;
        border-radius: 2px !important;
    }

    #portfolios-section .portfolio-media {
        background: rgba(0, 0, 0, 0.72) !important;
    }

    #portfolios-section .portfolio-image {
        z-index: 2 !important;
        opacity: 1 !important;
        filter: brightness(0.9) contrast(1.04) saturate(0.92) !important;
        transform: scale(1.01) !important;
    }

    #portfolios-section .portfolio-video-shell {
        z-index: 1 !important;
        opacity: 0.46 !important;
    }

    #portfolios-section .portfolio-video-shell.is-mounted {
        opacity: 0.52 !important;
    }

    #portfolios-section .portfolio-item.is-playing .portfolio-image,
    #portfolios-section .portfolio-item.is-selected .portfolio-image {
        opacity: 0.62 !important;
    }

    #portfolios-section .portfolio-footer-full {
        height: 52svh !important;
        margin-top: 36px !important;
    }

    #blogs-section {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background:
            radial-gradient(circle at 38% 88%, rgba(108, 0, 130, 0.28), transparent 42%),
            linear-gradient(180deg, #00000b 0%, #030014 50%, #15001e 100%) !important;
    }

    #blogs-section .blogs-container {
        min-height: auto !important;
        padding: calc(106px + env(safe-area-inset-top)) 24px 96px !important;
    }

    #blogs-section .blogs-container h1 {
        left: 0 !important;
        margin: 0 0 28px !important;
        font-size: clamp(2.5rem, 13vw, 3.25rem) !important;
        line-height: 0.98 !important;
        letter-spacing: 0.04em !important;
        text-align: left !important;
    }

    #blogs-section .blog-grid {
        width: 100% !important;
        max-width: 360px !important;
        left: 0 !important;
        margin: 0 auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    #blogs-section .blog-card,
    #blogs-section .blog-card--compact,
    #blogs-section .blog-card--feature {
        min-height: 0 !important;
        border-radius: 6px !important;
    }

    #blogs-section .blog-image,
    #blogs-section .blog-card--compact .blog-image,
    #blogs-section .blog-card--feature .blog-image {
        height: 152px !important;
        min-height: 0 !important;
    }

    #blogs-section .blog-content,
    #blogs-section .blog-card--compact .blog-content,
    #blogs-section .blog-card--feature .blog-content {
        min-height: 0 !important;
        padding: 32px 22px 18px !important;
    }

    #blogs-section .blog-title {
        font-size: 0.86rem !important;
        line-height: 1.38 !important;
        margin-bottom: 14px !important;
    }

    #blogs-section .blog-desc {
        display: block !important;
        font-size: 0.76rem !important;
        line-height: 1.55 !important;
    }

    #blogs-section .blog-tag,
    #blogs-section .blog-footer,
    #blogs-section .blog-author-name,
    #blogs-section .blog-author-date {
        font-size: 0.66rem !important;
    }

    #blogs-section .blog-social-icons {
        display: none !important;
    }

    #about-section {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background:
            radial-gradient(circle at 50% 30%, rgba(12, 128, 150, 0.10), transparent 32%),
            linear-gradient(180deg, #000 0%, #020006 100%) !important;
    }

    #about-section::after,
    #about-section.active::after {
        content: "" !important;
        opacity: 0 !important;
    }

    #about-section .mobile-about-title {
        display: block !important;
        position: absolute;
        z-index: 12;
        top: calc(128px + env(safe-area-inset-top));
        left: 30px;
        font-size: 0.68rem;
        line-height: 1;
        font-weight: 600;
        letter-spacing: 0.26em;
        color: rgba(255, 255, 255, 0.74);
        opacity: 1 !important;
        pointer-events: none;
    }

    #about-section .about-content {
        align-items: center !important;
        justify-content: flex-start !important;
        margin-top: calc(46svh + env(safe-area-inset-top)) !important;
        padding: 0 28px 120px !important;
    }

    #about-section .manifesto-container {
        max-width: 330px !important;
        text-align: left !important;
        margin: 0 auto !important;
    }

    #about-section .manifesto-container::before {
        content: none !important;
        display: none !important;
    }

    #about-section .manifesto-container > p.reveal-text {
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 0 18px !important;
        font-size: 0.92rem !important;
        line-height: 1.72 !important;
        letter-spacing: 0 !important;
        text-align: left !important;
        color: rgba(238, 242, 248, 0.72) !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    #meet-team-btn {
        display: inline-flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin-top: 22px !important;
        font-size: 0.68rem !important;
        letter-spacing: 0.24em !important;
    }

    .about-scroll-cue {
        width: 42px !important;
        height: 56px !important;
        margin: 24px auto 0 !important;
        display: flex !important;
    }

    #about-section .about-team-inline {
        padding: 52px 18px 110px !important;
        min-height: auto !important;
        align-items: flex-start !important;
    }

    #about-section .about-team-inline .team-shell {
        width: 100% !important;
        padding: 0 !important;
    }

    #about-section .about-team-heading {
        margin-bottom: 26px !important;
        font-size: clamp(2.35rem, 14vw, 4.15rem) !important;
        line-height: 0.92 !important;
    }

    #about-section .about-team-inline .team-composition {
        width: 100% !important;
        max-width: 360px !important;
        gap: 14px !important;
        margin: 0 auto !important;
    }

    #about-section .about-team-inline .team-composition-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        min-height: 0 !important;
        transform: none !important;
    }

    #about-section .about-team-inline .team-word {
        display: none !important;
    }

    #about-section .about-team-inline .member {
        --team-bubble-size: min(42vw, 142px);
        width: var(--team-bubble-size) !important;
        height: var(--team-bubble-size) !important;
        justify-self: center !important;
    }
}

/* Requested mobile polish: larger synced logo, desktop-inspired portfolio/team, stable about title, uniform contact type. */
@media (max-width: 768px) {
    body.mobile-home-nav #bg-video {
        transform-origin: 50% 50% !important;
    }

    #services-bg-video,
    #services-loop-video {
        transform: scale(var(--mobile-services-media-scale)) !important;
        transform-origin: 50% 50% !important;
    }

    #about-section .mobile-about-title {
        display: block !important;
        position: sticky !important;
        top: calc(92px + env(safe-area-inset-top)) !important;
        left: auto !important;
        width: max-content !important;
        margin: calc(92px + env(safe-area-inset-top)) 0 0 30px !important;
        z-index: 18 !important;
        font-family: var(--font-main) !important;
        font-size: 0.68rem !important;
        line-height: 1 !important;
        font-weight: 600 !important;
        letter-spacing: 0.26em !important;
        color: rgba(255, 255, 255, 0.76) !important;
        opacity: 1 !important;
        pointer-events: none !important;
        isolation: isolate !important;
    }

    #about-section.active::before {
        content: "" !important;
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(176px + env(safe-area-inset-top)) !important;
        margin-bottom: 0 !important;
        z-index: 17 !important;
        pointer-events: none !important;
        background:
            linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.98) 60%, rgba(0, 0, 0, 0) 100%) !important;
    }

    #about-section .mobile-about-title::before {
        content: "" !important;
        position: absolute !important;
        z-index: -1 !important;
        top: -24px !important;
        left: -30px !important;
        width: 100vw !important;
        height: 72px !important;
        background:
            linear-gradient(180deg, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.88) 58%, rgba(0, 0, 0, 0) 100%) !important;
    }

    #about-section .about-content {
        margin-top: calc(24svh + env(safe-area-inset-top)) !important;
    }

    #about-section .about-team-inline {
        overflow-x: hidden !important;
        min-height: calc(100svh - 132px) !important;
        padding: 20px 0 76px !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
    }

    #about-section .about-team-inline .team-shell {
        width: 100% !important;
        min-height: auto !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    #about-section .about-team-inline .team-composition {
        --team-bubble-size: clamp(25px, 7.8vw, 34px);
        --team-gap: clamp(2px, 0.8vw, 4px);
        --team-word-width: calc(var(--team-bubble-size) * 2.9);
        --team-the-width: calc(var(--team-bubble-size) * 1.9);
        --team-word-size: clamp(1.55rem, 8.2vw, 2.15rem);
        --team-grid-width: calc(var(--team-word-width) + (var(--team-bubble-size) * 5) + (var(--team-gap) * 5));
        display: flex !important;
        width: min(calc(100vw - 32px), var(--team-grid-width)) !important;
        max-width: none !important;
        min-height: auto !important;
        gap: var(--team-gap) !important;
        margin: 8px auto 0 !important;
    }

    #about-section .about-team-inline .team-composition-row {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--team-gap) !important;
        min-height: var(--team-bubble-size) !important;
        width: 100% !important;
    }

    #about-section .about-team-inline .team-word {
        display: block !important;
        flex: 0 0 var(--team-word-width) !important;
        font-size: var(--team-word-size) !important;
        line-height: 0.78 !important;
        font-weight: 250 !important;
        letter-spacing: 0 !important;
        color: rgba(236, 231, 255, 0.88) !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    #about-section .about-team-inline .team-word-the {
        flex-basis: var(--team-the-width) !important;
        text-align: center !important;
        order: 0 !important;
        margin: 0 3px !important;
    }

    #about-section .about-team-inline .member {
        width: var(--team-bubble-size) !important;
        height: var(--team-bubble-size) !important;
        flex: 0 0 var(--team-bubble-size) !important;
        justify-self: auto !important;
        transform: none !important;
    }

    #about-section .about-team-inline .member .info {
        display: none !important;
    }

    #about-section .about-team-inline .member .name-text {
        font-size: clamp(0.34rem, 1.75vw, 0.46rem) !important;
        line-height: 1.05 !important;
    }

    #about-section .about-team-inline .member .info span {
        margin-top: 1px !important;
        font-size: clamp(0.25rem, 1.35vw, 0.34rem) !important;
        line-height: 1.05 !important;
        letter-spacing: 0.02em !important;
    }

    #team-detail-overlay {
        align-items: flex-start !important;
        justify-content: center !important;
        padding: calc(150px + env(safe-area-inset-top)) 22px 24px !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    #team-detail-overlay .detail-close-btn {
        top: -56px !important;
        left: 0 !important;
        max-width: calc(100vw - 142px) !important;
        font-size: 0.65rem !important;
        line-height: 1 !important;
        letter-spacing: 0.24em !important;
        color: rgba(255, 255, 255, 0.66) !important;
        white-space: nowrap !important;
    }

    #team-detail-overlay .detail-content {
        width: min(100%, 304px) !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 28px !important;
        transform: none !important;
    }

    #team-detail-overlay .detail-visual {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
    }

    #team-detail-overlay .detail-avatar-circle {
        width: clamp(160px, 50vw, 220px) !important;
        height: clamp(160px, 50vw, 220px) !important;
        border-width: 2px !important;
        box-shadow: 0 0 36px rgba(0, 240, 255, 0.12) !important;
    }

    #team-detail-overlay .detail-info {
        width: 100% !important;
        flex: 0 0 auto !important;
        text-align: center !important;
        font-family: var(--font-main) !important;
    }

    #team-detail-overlay #detail-name {
        font-size: clamp(1.4rem, 8vw, 1.8rem) !important;
        line-height: 1.08 !important;
        margin: 0 0 12px !important;
        letter-spacing: 0.04em !important;
    }

    #team-detail-overlay #detail-role {
        font-size: 0.72rem !important;
        line-height: 1.25 !important;
        letter-spacing: 0.22em !important;
        margin: 0 0 24px !important;
    }

    #team-detail-overlay #detail-bio {
        max-width: 100% !important;
        font-size: 0.88rem !important;
        line-height: 1.65 !important;
        color: rgba(235, 239, 248, 0.68) !important;
        margin: 0 !important;
        text-align: left !important;
    }

    #blogs-section {
        scroll-padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #blogs-section .blogs-container {
        min-height: auto !important;
        padding: calc(94px + env(safe-area-inset-top)) 22px 44px !important;
    }

    #blogs-section .blogs-container h1 {
        margin: 0 0 18px !important;
        font-size: clamp(1.58rem, 8.5vw, 2.1rem) !important;
        line-height: 1 !important;
        letter-spacing: 0.12em !important;
    }

    #blogs-section .blog-grid {
        width: 100% !important;
        max-width: 306px !important;
        gap: 10px !important;
    }

    #blogs-section .blog-image,
    #blogs-section .blog-card--compact .blog-image,
    #blogs-section .blog-card--feature .blog-image {
        height: 86px !important;
    }

    #blogs-section .blog-content,
    #blogs-section .blog-card--compact .blog-content,
    #blogs-section .blog-card--feature .blog-content {
        padding: 20px 16px 12px !important;
    }

    #blogs-section .blog-title {
        font-size: 0.68rem !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }

    #blogs-section .blog-desc {
        font-size: 0.62rem !important;
        line-height: 1.38 !important;
        margin-bottom: 10px !important;
    }

    #blogs-section .blog-footer,
    #blogs-section .blog-tag,
    #blogs-section .blog-author-name,
    #blogs-section .blog-author-date {
        font-size: 0.52rem !important;
    }

    #blogs-section .blog-avatar {
        width: 28px !important;
        height: 28px !important;
        top: -14px !important;
    }

    #blogs-section .blog-author-row {
        gap: 8px !important;
    }

    #portfolios-section .client-marquee-section,
    #portfolios-section .portfolio-footer-full {
        display: none !important;
    }

    #portfolios-section .portfolio-hero-full {
        display: block !important;
        position: relative !important;
        width: calc(100% - 44px) !important;
        max-width: 360px !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 9 !important;
        margin: calc(100px + env(safe-area-inset-top)) auto 18px !important;
        overflow: hidden !important;
        border-radius: 2px !important;
        background: #050509 !important;
    }

    #portfolios-section .portfolio-hero-full .bg-fill,
    #portfolios-section .portfolio-hero-full mux-player {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    #portfolios-section .portfolio-hero-caption,
    #portfolios-section .portfolio-hero-full > div:not(.portfolio-hero-caption) {
        display: none !important;
    }

    #portfolios-section .portfolio-container {
        padding: 0 22px 92px !important;
        max-width: none !important;
        margin: 0 !important;
    }

    #portfolios-section .portfolio-grid {
        display: block !important;
        width: 100% !important;
        max-width: 360px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    #portfolios-section .portfolio-item,
    #portfolios-section .portfolio-item.tall,
    #portfolios-section .portfolio-item.large,
    #portfolios-section .portfolio-item.span-2 {
        display: block !important;
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        margin: 0 auto 18px !important;
        border-radius: 2px !important;
        overflow: hidden !important;
        background: #050509 !important;
    }

    #portfolios-section .portfolio-item:nth-child(3n + 1) {
        width: 100% !important;
        margin-left: auto !important;
    }

    #portfolios-section .portfolio-item:nth-child(3n + 2) {
        width: 100% !important;
        margin-left: auto !important;
    }

    #portfolios-section .portfolio-item:nth-child(3n) {
        width: 100% !important;
        margin-left: auto !important;
    }

    #portfolios-section .portfolio-video-shell,
    #portfolios-section .portfolio-video-shell.is-mounted,
    #portfolios-section .portfolio-video {
        opacity: 1 !important;
        z-index: 2 !important;
        filter: brightness(0.96) contrast(1.04) saturate(1.02) !important;
    }

    #portfolios-section .portfolio-image {
        opacity: 0.42 !important;
        z-index: 3 !important;
        filter: brightness(0.72) contrast(1.04) saturate(0.92) !important;
    }

    #portfolios-section .portfolio-item.is-playing .portfolio-image {
        opacity: 0.22 !important;
    }

    #portfolios-section .portfolio-item.has-video-mounted:not(.video-unavailable) .portfolio-image,
    #portfolios-section .portfolio-item.is-playing .portfolio-image,
    #portfolios-section .portfolio-item.is-selected .portfolio-image {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: none !important;
    }

    #contact-section .contact-main {
        padding: calc(118px + env(safe-area-inset-top)) 30px 0 !important;
        z-index: 60 !important;
    }

    body.contact-video-foreground #video-container,
    body:has(#contact-section.active) #video-container {
        z-index: 18 !important;
    }

    body.contact-video-foreground #bg-video,
    body:has(#contact-section.active) #bg-video {
        transform-origin: 50% 50% !important;
    }

    #contact-section .contact-content-left,
    #contact-section .contact-text-block {
        max-width: 304px !important;
    }

    #contact-section .contact-text-block::before {
        margin-bottom: 16px !important;
        font-family: var(--font-main) !important;
        font-size: 0.56rem !important;
        line-height: 1 !important;
        font-weight: 600 !important;
        letter-spacing: 0.24em !important;
        color: rgba(255, 255, 255, 0.76) !important;
    }

    #contact-section .contact-lead,
    #contact-section .contact-question,
    #contact-section .contact-cta {
        font-family: var(--font-main) !important;
        font-size: 0.92rem !important;
        line-height: 1.62 !important;
        font-weight: 300 !important;
        letter-spacing: 0 !important;
        color: rgba(238, 242, 248, 0.74) !important;
    }

    #contact-section .contact-lead {
        max-width: 304px !important;
        margin-bottom: 20px !important;
    }

    #contact-section .contact-question {
        margin-bottom: 8px !important;
    }

    #contact-section .contact-cta {
        font-style: normal !important;
        font-weight: 300 !important;
        color: rgba(238, 242, 248, 0.74) !important;
        text-shadow: none !important;
    }
}

/* True final mobile team fit correction: keep all desktop-copy members inside 320px. */
@media (max-width: 768px) {
    #about-section .about-team-inline {
        overflow: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #about-section .about-team-inline .team-composition {
        --team-bubble-size: clamp(34px, 10vw, 42px) !important;
        --team-gap: clamp(2px, 1vw, 4px) !important;
        --team-word-width: calc(var(--team-bubble-size) * 1.55) !important;
        --team-the-width: calc(var(--team-bubble-size) * 1.22) !important;
        --team-word-size: clamp(1.38rem, 7vw, 1.95rem) !important;
        --team-grid-width: calc(var(--team-word-width) + (var(--team-bubble-size) * 5) + (var(--team-gap) * 5)) !important;
        width: min(calc(100vw - 24px), var(--team-grid-width)) !important;
        max-width: calc(100vw - 24px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transform: none !important;
    }

    #about-section .about-team-inline .team-composition-row {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        gap: var(--team-gap) !important;
        overflow: visible !important;
        transform: none !important;
    }

    #about-section .about-team-inline .member {
        --team-bubble-size: clamp(34px, 10vw, 42px) !important;
        width: var(--team-bubble-size) !important;
        height: var(--team-bubble-size) !important;
        flex: 0 0 var(--team-bubble-size) !important;
        min-width: 0 !important;
        max-width: var(--team-bubble-size) !important;
    }

    #about-section .about-team-inline .team-word {
        flex: 0 0 var(--team-word-width) !important;
        width: var(--team-word-width) !important;
        min-width: 0 !important;
        max-width: var(--team-word-width) !important;
        font-size: var(--team-word-size) !important;
        line-height: 0.82 !important;
        overflow: visible !important;
    }

    #about-section .about-team-inline .team-word-the {
        flex-basis: var(--team-the-width) !important;
        width: var(--team-the-width) !important;
        max-width: var(--team-the-width) !important;
    }
}

/* Restore normal mobile team portraits: large centered circles, no compressed desktop rows. */
@media (max-width: 768px) {
    #about-section .about-team-inline {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        padding: 28px 18px 110px !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    #about-section .about-team-inline .team-shell {
        width: 100% !important;
        padding: 0 !important;
        align-items: center !important;
    }

    #about-section .about-team-inline .team-composition {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: min(100%, 320px) !important;
        max-width: 320px !important;
        gap: 14px !important;
        margin: 0 auto !important;
        transform: none !important;
    }

    #about-section .about-team-inline .team-composition-row {
        display: contents !important;
        min-height: 0 !important;
        width: auto !important;
        max-width: none !important;
        gap: 0 !important;
        transform: none !important;
    }

    #about-section .about-team-inline .team-word {
        display: none !important;
    }

    #about-section .about-team-inline .member {
        --team-bubble-size: clamp(118px, 38vw, 142px) !important;
        width: var(--team-bubble-size) !important;
        height: var(--team-bubble-size) !important;
        max-width: var(--team-bubble-size) !important;
        flex: none !important;
        justify-self: center !important;
        transform: none !important;
    }

    #about-section .about-team-inline .member .avatar {
        width: 100% !important;
        height: 100% !important;
        background-size: cover !important;
    }

    #about-section .about-team-inline .member .info {
        display: block !important;
        left: 8px !important;
        right: 8px !important;
        bottom: 12px !important;
    }

    #about-section .about-team-inline .member .name-text {
        font-size: clamp(0.72rem, 3.8vw, 0.9rem) !important;
        line-height: 1.08 !important;
    }

    #about-section .about-team-inline .member .info span {
        font-size: clamp(0.52rem, 2.6vw, 0.66rem) !important;
        line-height: 1.18 !important;
        letter-spacing: 0.05em !important;
    }
}

/* Final team responsive split: desktop overlays, mobile labels below photos. */
@media (min-width: 769px) {
    .about-team-inline .member .info,
    #team-section .member .info {
        position: absolute !important;
        left: 18px !important;
        right: 18px !important;
        bottom: 18px !important;
        margin-top: 0 !important;
        text-align: center !important;
    }
}

@media (max-width: 768px) {
    #about-section .about-team-inline {
        --team-mobile-photo-size: clamp(104px, 34vw, 132px);
        --team-mobile-label-height: 48px;
        padding: 28px 18px 112px !important;
        overflow-x: hidden !important;
    }

    #about-section .about-team-inline .team-composition {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: min(100%, 314px) !important;
        max-width: 314px !important;
        gap: 18px 12px !important;
        margin: 0 auto !important;
    }

    #about-section .about-team-inline .team-composition-row {
        display: contents !important;
    }

    #about-section .about-team-inline .team-word {
        display: none !important;
    }

    #about-section .about-team-inline .member {
        width: 100% !important;
        max-width: 138px !important;
        height: calc(var(--team-mobile-photo-size) + var(--team-mobile-label-height)) !important;
        min-height: calc(var(--team-mobile-photo-size) + var(--team-mobile-label-height)) !important;
        flex: none !important;
        justify-self: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        transform: none !important;
    }

    #about-section .about-team-inline .member .avatar {
        width: var(--team-mobile-photo-size) !important;
        height: var(--team-mobile-photo-size) !important;
        flex: 0 0 var(--team-mobile-photo-size) !important;
        margin: 0 auto !important;
        border-radius: 50% !important;
        background-size: var(--team-avatar-size, cover) !important;
        background-position: var(--team-avatar-x, center) var(--team-avatar-y, top) !important;
    }

    #about-section .about-team-inline .member .info {
        position: static !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        z-index: auto !important;
        width: 100% !important;
        min-height: var(--team-mobile-label-height) !important;
        margin: 8px 0 0 !important;
        padding: 0 2px !important;
        text-align: center !important;
        text-shadow: none !important;
    }

    #about-section .about-team-inline .member .name-text {
        font-size: clamp(0.68rem, 3.5vw, 0.82rem) !important;
        line-height: 1.08 !important;
        font-weight: 700 !important;
        letter-spacing: 0.01em !important;
        color: rgba(255, 255, 255, 0.92) !important;
    }

    #about-section .about-team-inline .member .info span {
        display: block !important;
        margin-top: 3px !important;
        font-size: clamp(0.48rem, 2.45vw, 0.58rem) !important;
        line-height: 1.15 !important;
        letter-spacing: 0.03em !important;
        color: rgba(230, 224, 246, 0.62) !important;
    }
}

/* Final mobile-only portrait crop tuning: desktop crop variables remain untouched. */
@media (max-width: 768px) {
    #about-section .about-team-inline .member[data-member="thaha"] .avatar,
    #about-section .about-team-inline .member[data-member="bharath"] .avatar {
        --team-avatar-size: cover;
        --team-avatar-x: center;
        --team-avatar-y: top;
    }

    #about-section .about-team-inline .member[data-member="prince"] .avatar {
        --team-avatar-size: 104% auto;
        --team-avatar-x: center;
        --team-avatar-y: 4px;
    }

    #about-section .about-team-inline .member[data-member="mr"] .avatar {
        --team-avatar-size: 102% auto;
        --team-avatar-x: center;
        --team-avatar-y: 2px;
    }

    #about-section .about-team-inline .member[data-member="amal"] .avatar {
        --team-avatar-size: 116% auto;
        --team-avatar-x: center;
        --team-avatar-y: -14px;
    }

    #about-section .about-team-inline .member[data-member="adith"] .avatar {
        --team-avatar-size: 132% auto;
        --team-avatar-x: center;
        --team-avatar-y: -34px;
    }

    #about-section .about-team-inline .member[data-member="akhil"] .avatar,
    #about-section .about-team-inline .member[data-member="sanjay"] .avatar,
    #about-section .about-team-inline .member[data-member="nibu"] .avatar,
    #about-section .about-team-inline .member[data-member="akshay"] .avatar {
        --team-avatar-size: 112% auto;
        --team-avatar-x: center;
        --team-avatar-y: -14px;
    }

    #about-section .about-team-inline .member[data-member="athul_s"] .avatar {
        --team-avatar-size: 102% auto;
        --team-avatar-x: center;
        --team-avatar-y: -4px;
    }

    #about-section .about-team-inline .member[data-member="gokul"] .avatar,
    #about-section .about-team-inline .member[data-member="nandagopan"] .avatar {
        --team-avatar-size: 116% auto;
        --team-avatar-x: center;
        --team-avatar-y: -14px;
    }

    #about-section .about-team-inline .member[data-member="athul_p"] .avatar {
        --team-avatar-size: 116% auto;
        --team-avatar-x: calc(50% - 5px);
        --team-avatar-y: -14px;
    }
}

/* Final mobile About gap trim: keep the team portraits close to the intro cue. */
@media (max-width: 768px) {
    #about-section .about-content {
        padding-bottom: 16px !important;
    }

    #about-section .about-team-inline {
        padding-top: 6px !important;
    }
}


.about-team-hint {
    display: none;
}

@media (max-width: 768px) {
    #about-section .about-team-bridge {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        margin-top: 10px !important;
    }

    #about-section .about-team-hint {
        display: block !important;
        margin: 0 !important;
        max-width: 260px !important;
        font-size: clamp(0.78rem, 3.45vw, 0.95rem) !important;
        line-height: 1.45 !important;
        font-weight: 300 !important;
        letter-spacing: 0.02em !important;
        text-align: center !important;
        color: rgba(238, 244, 255, 0.78) !important;
        text-shadow: 0 0 20px rgba(24, 206, 230, 0.18) !important;
    }

    #about-section #meet-team-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 196px !important;
        min-height: 42px !important;
        margin-top: 0 !important;
        padding: 0 18px !important;
        border: 1px solid rgba(145, 231, 255, 0.34) !important;
        border-radius: 999px !important;
        border-bottom: 1px solid rgba(145, 231, 255, 0.34) !important;
        background: linear-gradient(135deg, rgba(10, 188, 218, 0.12), rgba(255, 255, 255, 0.035)) !important;
        box-shadow: 0 0 24px rgba(0, 200, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.045) !important;
        color: rgba(255, 255, 255, 0.86) !important;
        text-align: center !important;
        animation: aboutTeamInviteBreath 2.8s ease-in-out infinite !important;
    }

    #about-section .about-scroll-cue {
        margin-top: 18px !important;
        border-color: rgba(145, 231, 255, 0.38) !important;
        box-shadow: 0 0 22px rgba(0, 200, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    }
}

@keyframes aboutTeamInviteBreath {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 0 20px rgba(0, 200, 255, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.045);
    }

    50% {
        transform: translateY(3px);
        box-shadow: 0 0 34px rgba(0, 200, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.095);
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    #about-section #meet-team-btn {
        animation: none !important;
    }
}

/* Final mobile contact form: reuse desktop form, adapted for phone screens. */
@media (max-width: 768px) {
    #contact-section {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #contact-section .contact-main {
        height: auto !important;
        min-height: 100svh !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        padding: calc(116px + env(safe-area-inset-top)) 26px 118px !important;
        box-sizing: border-box !important;
    }

    #contact-section .contact-content-left,
    #contact-section .contact-text-block,
    #contact-section .contact-form-block {
        width: 100% !important;
        max-width: 342px !important;
        margin: 0 auto !important;
    }

    #contact-section .contact-text-block {
        margin-bottom: 250px !important;
    }

    #contact-section .contact-form-block,
    #contact-section .contact-info-grid,
    #contact-section .contact-social-row {
        display: block !important;
    }

    #contact-section .contact-form-block {
        position: relative !important;
        z-index: 70 !important;
        padding: 22px 0 0 !important;
    }

    #contact-section .contact-form-label {
        margin: 0 0 14px !important;
        font-size: 0.58rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        letter-spacing: 0.28em !important;
        text-transform: uppercase !important;
        color: rgba(235, 229, 246, 0.68) !important;
    }

    #contact-section .contact-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    #contact-section .contact-form-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    #contact-section .contact-input {
        width: 100% !important;
        height: 46px !important;
        padding: 0 16px !important;
        border: 1px solid rgba(216, 205, 235, 0.22) !important;
        border-radius: 8px !important;
        background: rgba(24, 17, 35, 0.72) !important;
        color: rgba(255, 255, 255, 0.88) !important;
        font-size: 0.78rem !important;
        letter-spacing: 0.01em !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 14px 34px rgba(0, 0, 0, 0.20) !important;
        backdrop-filter: blur(10px) !important;
    }

    #contact-section .contact-input::placeholder {
        color: rgba(223, 215, 235, 0.42) !important;
    }

    #contact-section .contact-input:focus {
        border-color: rgba(0, 240, 255, 0.54) !important;
        background: rgba(31, 22, 45, 0.82) !important;
        box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.15), 0 0 28px rgba(0, 188, 220, 0.12) !important;
    }

    #contact-section .contact-textarea {
        height: 118px !important;
        min-height: 118px !important;
        padding-top: 14px !important;
        resize: vertical !important;
    }

    #contact-section .contact-form form,
    #contact-section #contactForm > div:last-child {
        width: 100% !important;
    }

    #contact-section #contactForm > div:last-child {
        justify-content: stretch !important;
        align-items: stretch !important;
        margin-top: 6px !important;
        flex-direction: column !important;
    }

    #contact-section .contact-send-btn {
        width: 100% !important;
        min-height: 48px !important;
        border-radius: 999px !important;
        border-color: rgba(235, 229, 246, 0.40) !important;
        background: rgba(255, 255, 255, 0.035) !important;
        color: rgba(255, 255, 255, 0.86) !important;
        font-size: 0.62rem !important;
        letter-spacing: 0.28em !important;
        box-shadow: 0 0 28px rgba(0, 188, 220, 0.08) !important;
    }

    #contact-section .contact-info-grid {
        display: grid !important;
        position: static !important;
        width: 100% !important;
        max-width: 342px !important;
        margin: 4px auto 0 !important;
        padding: 0 !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    #contact-section .contact-info-label {
        font-size: 0.56rem !important;
        letter-spacing: 0.28em !important;
        color: rgba(235, 229, 246, 0.52) !important;
    }

    #contact-section .contact-info-text {
        font-size: 0.76rem !important;
        line-height: 1.5 !important;
        color: rgba(238, 242, 248, 0.70) !important;
    }

    #contact-section .contact-social-row {
        display: flex !important;
        gap: 12px !important;
        position: static !important;
        width: 100% !important;
        max-width: 342px !important;
        margin: -88px auto 78px !important;
        padding: 0 26px !important;
        box-sizing: border-box !important;
        text-align: left !important;
        z-index: 70 !important;
    }
}

/* Final mobile blogs title alignment. */
@media (max-width: 768px) {
    #blogs-section .blogs-container h1 {
        left: auto !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }
}

/* Final mobile portfolio closing showreel: mirror desktop footer feature. */
@media (max-width: 768px) {
    #portfolios-section .portfolio-footer-full {
        display: block !important;
        position: relative !important;
        width: calc(100% - 44px) !important;
        max-width: 360px !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 9 !important;
        margin: 8px auto 96px !important;
        overflow: hidden !important;
        border-radius: 2px !important;
        background: #050509 !important;
    }

    #portfolios-section .portfolio-footer-full .bg-fill,
    #portfolios-section .portfolio-footer-full mux-player {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        opacity: 0.82 !important;
    }

    #portfolios-section .portfolio-footer-full > div {
        display: none !important;
    }
}

/* Final mobile portfolio closing reel spacing and label. */
@media (max-width: 768px) {
    #portfolios-section .portfolio-container {
        padding-bottom: 18px !important;
    }

    #portfolios-section .portfolio-footer-full {
        margin: 0 auto 54px !important;
    }

    #portfolios-section .portfolio-footer-full > div:first-of-type {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 100% !important;
        padding: 0 22px !important;
        text-align: center !important;
        color: white !important;
        z-index: 10 !important;
        box-sizing: border-box !important;
    }

    #portfolios-section .portfolio-footer-full > div:first-of-type h2 {
        margin: 0 0 8px !important;
        font-size: clamp(1.48rem, 9vw, 2.35rem) !important;
        line-height: 0.95 !important;
        font-weight: 900 !important;
        letter-spacing: 0.08em !important;
    }

    #portfolios-section .portfolio-footer-full > div:first-of-type div {
        width: 42px !important;
        height: 2px !important;
        margin: 14px auto !important;
        background: var(--neon-blue) !important;
    }

    #portfolios-section .portfolio-footer-full > div:first-of-type p {
        margin: 0 !important;
        font-size: clamp(0.46rem, 2.5vw, 0.66rem) !important;
        line-height: 1 !important;
        letter-spacing: 0.42em !important;
        color: rgba(255, 255, 255, 0.72) !important;
    }

    #portfolios-section .portfolio-footer-full > div:last-of-type {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 4 !important;
        pointer-events: none !important;
        background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.58) 100%) !important;
    }
}

/* Final mobile portfolio footer reel clarity: smaller label, clear video. */
@media (max-width: 768px) {
    #portfolios-section .portfolio-footer-full .bg-fill,
    #portfolios-section .portfolio-footer-full mux-player {
        opacity: 1 !important;
        filter: none !important;
    }

    #portfolios-section .portfolio-footer-full > div:first-of-type h2 {
        font-size: clamp(0.92rem, 5.6vw, 1.35rem) !important;
        letter-spacing: 0.10em !important;
        text-shadow: 0 1px 10px rgba(0, 0, 0, 0.48) !important;
    }

    #portfolios-section .portfolio-footer-full > div:first-of-type div {
        width: 26px !important;
        margin: 8px auto !important;
    }

    #portfolios-section .portfolio-footer-full > div:first-of-type p {
        font-size: clamp(0.34rem, 1.8vw, 0.48rem) !important;
        letter-spacing: 0.34em !important;
        color: rgba(255, 255, 255, 0.66) !important;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45) !important;
    }

    #portfolios-section .portfolio-footer-full > div:last-of-type {
        display: none !important;
        background: transparent !important;
    }
}

/* Final mobile top showreel caption: small bottom-left label. */
@media (max-width: 768px) {
    #portfolios-section .portfolio-hero-caption {
        display: block !important;
        position: absolute !important;
        left: 16px !important;
        bottom: 14px !important;
        z-index: 10 !important;
        color: white !important;
        text-align: left !important;
        pointer-events: none !important;
    }

    #portfolios-section .portfolio-hero-caption p {
        margin: 0 0 5px !important;
        font-size: clamp(0.34rem, 1.8vw, 0.48rem) !important;
        line-height: 1 !important;
        letter-spacing: 0.34em !important;
        opacity: 0.68 !important;
        text-transform: uppercase !important;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45) !important;
    }

    #portfolios-section .portfolio-hero-title {
        margin: 0 !important;
        font-size: clamp(0.92rem, 5.6vw, 1.35rem) !important;
        line-height: 0.95 !important;
        font-weight: 800 !important;
        letter-spacing: 0.10em !important;
        text-transform: uppercase !important;
        text-shadow: 0 1px 10px rgba(0, 0, 0, 0.48) !important;
    }
}

/* Final mobile contact scroll flow: intro first, form after scroll. */
@media (max-width: 768px) {
    #contact-section {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-padding-top: 0 !important;
    }

    #contact-section .contact-main {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        min-height: 100svh !important;
        overflow: visible !important;
        padding: calc(116px + env(safe-area-inset-top)) 26px 118px !important;
        box-sizing: border-box !important;
    }

    #contact-section .contact-content-left {
        display: block !important;
        width: 100% !important;
        max-width: 342px !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    #contact-section .contact-text-block {
        width: 100% !important;
        max-width: 342px !important;
        min-height: calc(100svh - 116px - env(safe-area-inset-top)) !important;
        margin: 0 auto !important;
        padding: 0 0 42svh !important;
        box-sizing: border-box !important;
    }

    #contact-section .contact-form-block {
        display: block !important;
        width: 100% !important;
        max-width: 342px !important;
        margin: 0 auto !important;
        padding: 34px 0 0 !important;
        position: relative !important;
        z-index: 70 !important;
    }

    #contact-section .contact-info-grid {
        display: grid !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 342px !important;
        margin: 28px auto 0 !important;
        padding: 0 !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        z-index: 70 !important;
    }

    #contact-section .contact-social-row {
        display: flex !important;
        gap: 12px !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 342px !important;
        margin: -92px auto 72px !important;
        padding: 0 26px !important;
        box-sizing: border-box !important;
        z-index: 70 !important;
    }
}

/* Final mobile contact scroll unlock: override composition lock for contact only. */
@media (max-width: 768px) {
    body.mobile-composition-locked #contact-section.active,
    #contact-section.active {
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior-y: contain !important;
    }

    body.mobile-composition-locked #contact-section.active .contact-main,
    #contact-section.active .contact-main {
        min-height: 190svh !important;
        padding-bottom: 150px !important;
    }
}

/* Final mobile contact form focus: hide hand graphic when the form is reached. */
@media (max-width: 768px) {
    body.contact-form-focus.contact-video-foreground #bg-video,
    body.contact-form-focus:has(#contact-section.active) #bg-video {
        opacity: 0 !important;
        filter: none !important;
        transition: opacity 0.38s ease !important;
    }

    body.contact-form-focus #contact-section.active .contact-form-block {
        padding-top: 42px !important;
    }

    body.contact-form-focus #contact-section.active .contact-form-block::before {
        content: "";
        display: block;
        width: 42px;
        height: 2px;
        margin: 0 0 22px;
        background: rgba(0, 240, 255, 0.55);
        box-shadow: 0 0 18px rgba(0, 240, 255, 0.22);
    }
}

/* Final mobile contact social position: keep icons below contact info. */
@media (max-width: 768px) {
    #contact-section .contact-social-row {
        justify-content: flex-start !important;
        margin: 34px auto 96px !important;
        padding: 0 !important;
    }
}

.contact-form-cue {
    display: none;
}

/* Final mobile contact scroll cue: make the form discoverable. */
@media (max-width: 768px) {
    #contact-section .contact-form-cue {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        min-height: 38px !important;
        margin: 22px 0 0 !important;
        padding: 0 16px !important;
        border: 1px solid rgba(145, 231, 255, 0.34) !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.035) !important;
        color: rgba(255, 255, 255, 0.82) !important;
        font-family: var(--font-main) !important;
        font-size: 0.58rem !important;
        line-height: 1 !important;
        font-weight: 600 !important;
        letter-spacing: 0.22em !important;
        text-transform: uppercase !important;
        box-shadow: 0 0 22px rgba(0, 200, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
        animation: contactCuePulse 2.4s ease-in-out infinite !important;
    }

    #contact-section .contact-form-cue span {
        display: inline-block !important;
        animation: contactCueArrow 1.35s ease-in-out infinite !important;
    }

    body.contact-form-focus #contact-section .contact-form-cue {
        opacity: 0 !important;
        pointer-events: none !important;
        animation: none !important;
    }
}

@keyframes contactCuePulse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

@keyframes contactCueArrow {
    0%, 100% { transform: translateY(-2px); opacity: 0.55; }
    50% { transform: translateY(3px); opacity: 1; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    #contact-section .contact-form-cue,
    #contact-section .contact-form-cue span {
        animation: none !important;
    }
}

/* Final mobile contact motion polish: cue belongs to handshake, graphic slides away on form focus. */
@media (max-width: 768px) {
    #contact-section.active {
        position: fixed !important;
    }

    #contact-section.active .contact-form-cue {
        position: absolute !important;
        left: 50% !important;
        top: calc(100svh - 118px) !important;
        z-index: 92 !important;
        margin: 0 !important;
        transform: translate3d(-50%, 0, 0) !important;
        transition: opacity 0.46s ease, translate 0.46s ease, filter 0.46s ease !important;
    }

    body.contact-form-focus #contact-section.active .contact-form-cue {
        opacity: 0 !important;
        translate: -32vw 0 !important;
        filter: blur(3px) !important;
        pointer-events: none !important;
    }

    body.contact-video-foreground #bg-video,
    body:has(#contact-section.active) #bg-video {
        translate: 0 0 !important;
        opacity: 1 !important;
        transition: opacity 0.58s cubic-bezier(0.22, 1, 0.36, 1), translate 0.68s cubic-bezier(0.22, 1, 0.36, 1), filter 0.58s ease !important;
    }

    body.contact-form-focus.contact-video-foreground #bg-video,
    body.contact-form-focus:has(#contact-section.active) #bg-video {
        opacity: 0 !important;
        translate: -22vw 0 !important;
        filter: saturate(0.86) contrast(0.92) !important;
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    #contact-section.active .contact-form-cue,
    body.contact-video-foreground #bg-video,
    body:has(#contact-section.active) #bg-video {
        transition: none !important;
    }
}

/* Final mobile contact cue refinement: motion belongs to the cue, not the hand graphic. */
@media (max-width: 768px) {
    body.contact-form-focus.contact-video-foreground #bg-video,
    body.contact-form-focus:has(#contact-section.active) #bg-video,
    body.contact-video-foreground #bg-video,
    body:has(#contact-section.active) #bg-video {
        opacity: 1 !important;
        translate: 0 0 !important;
        filter: none !important;
    }

    #contact-section.active .contact-form-cue {
        min-width: 104px !important;
        min-height: 54px !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 8px 16px 9px !important;
        border-color: rgba(145, 231, 255, 0.24) !important;
        background: rgba(0, 0, 0, 0.18) !important;
        backdrop-filter: blur(8px) !important;
        animation: contactScrollCueFloat 1.9s cubic-bezier(0.22, 1, 0.36, 1) infinite !important;
    }

    #contact-section .contact-cue-text {
        font-size: 0.52rem !important;
        line-height: 1 !important;
        letter-spacing: 0.26em !important;
        text-transform: uppercase !important;
        color: rgba(255, 255, 255, 0.66) !important;
    }

    #contact-section .contact-cue-arrow {
        font-size: 1.42rem !important;
        line-height: 0.85 !important;
        color: rgba(255, 255, 255, 0.88) !important;
        animation: contactScrollArrowDrop 1.25s ease-in-out infinite !important;
    }

    body.contact-form-focus #contact-section.active .contact-form-cue {
        opacity: 0 !important;
        translate: 0 20px !important;
        filter: blur(2px) !important;
        pointer-events: none !important;
    }
}

@keyframes contactScrollCueFloat {
    0%, 100% { transform: translate3d(-50%, 0, 0); }
    50% { transform: translate3d(-50%, 7px, 0); }
}

@keyframes contactScrollArrowDrop {
    0%, 100% { transform: translateY(-3px); opacity: 0.5; }
    50% { transform: translateY(5px); opacity: 1; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    #contact-section.active .contact-form-cue,
    #contact-section .contact-cue-arrow {
        animation: none !important;
    }
}

/* Final mobile contact form foreground: blur the graphic behind the form. */
@media (max-width: 768px) {
    body.contact-form-focus.contact-video-foreground #bg-video,
    body.contact-form-focus:has(#contact-section.active) #bg-video {
        opacity: 0.26 !important;
        translate: 0 0 !important;
        filter: blur(10px) brightness(0.58) saturate(0.72) !important;
        transition: opacity 0.42s ease, filter 0.42s ease !important;
    }

    body.contact-form-focus #contact-section.active .contact-form-block {
        position: relative !important;
        z-index: 140 !important;
        padding: 24px 18px 20px !important;
        border: 1px solid rgba(180, 230, 255, 0.18) !important;
        border-radius: 18px !important;
        background:
            linear-gradient(180deg, rgba(13, 11, 24, 0.82), rgba(5, 8, 16, 0.76)) !important;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.46), 0 0 38px rgba(0, 190, 220, 0.10) !important;
        backdrop-filter: blur(18px) saturate(1.08) !important;
    }

    body.contact-form-focus #contact-section.active .contact-form-block::before {
        margin-bottom: 18px !important;
    }

    body.contact-form-focus #contact-section.active .contact-input {
        background: rgba(255, 255, 255, 0.07) !important;
        border-color: rgba(216, 229, 245, 0.22) !important;
    }
}

/* Final mobile contact form smooth layer: no animated blur, no glitch. */
@media (max-width: 768px) {
    body.contact-form-focus.contact-video-foreground #bg-video,
    body.contact-form-focus:has(#contact-section.active) #bg-video {
        opacity: 0.18 !important;
        translate: 0 0 !important;
        filter: brightness(0.5) saturate(0.82) !important;
        transition: opacity 0.34s ease !important;
    }

    body.contact-form-focus #contact-section.active .contact-form-block {
        background: linear-gradient(180deg, rgba(8, 8, 16, 0.94), rgba(4, 8, 14, 0.92)) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: translateZ(0) !important;
        will-change: auto !important;
    }
}

/* Final mobile contact: remove special form overlay panel, keep original design language. */
@media (max-width: 768px) {
    body.contact-form-focus.contact-video-foreground #bg-video,
    body.contact-form-focus:has(#contact-section.active) #bg-video {
        opacity: 1 !important;
        translate: 0 0 !important;
        filter: none !important;
        transition: none !important;
    }

    body.contact-form-focus #contact-section.active .contact-form-block {
        padding: 34px 0 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: none !important;
    }

    body.contact-form-focus #contact-section.active .contact-form-block::before {
        display: none !important;
    }

    body.contact-form-focus #contact-section.active .contact-input {
        background: rgba(24, 17, 35, 0.72) !important;
        border-color: rgba(216, 205, 235, 0.22) !important;
    }
}

/* Tablet services polish: keep the cinematic overlay readable without the cramped phone proportions. */
@media (min-width: 769px) and (max-width: 1024px) {
    #services-section .services-text-overlay {
        z-index: 14 !important;
    }

    #services-section .services-tagline {
        top: 12.4% !important;
        font-size: clamp(1.08rem, 1.9vw, 1.4rem) !important;
        letter-spacing: 0.16em !important;
        color: rgba(255, 255, 255, 0.62) !important;
    }

    #services-section .service-item,
    #services-section .service-item.left-col,
    #services-section .service-item.right-col {
        max-width: min(30vw, 280px) !important;
        font-size: clamp(0.8rem, 1.45vw, 1rem) !important;
        line-height: 1.14 !important;
        letter-spacing: 0.06em !important;
    }

    #services-section .service-item.left-col {
        left: 20.5% !important;
    }

    #services-section .service-item.right-col {
        right: 20.5% !important;
    }

    #services-section .service-item .line {
        width: 28px !important;
    }
}

/* Final services mobile fit: use viewport-height tiers instead of one exact iPhone size.
   This keeps the services names stable across short phones, mid-height phones, and taller phones. */
@media (max-width: 768px) and (max-height: 700px) {
    #services-section {
        --services-item-left: clamp(70px, 19vw, 88px);
        --services-item-width: min(66vw, 226px);
        --services-item-font-size: clamp(0.6rem, 2.55vw, 0.78rem);
        --services-item-line-width: 18px;
        --services-concept-top: 23.2%;
        --services-cinema-top: 32.1%;
        --services-editing-top: 41.0%;
        --services-sound-top: 50.2%;
        --services-vfx-top: 59.7%;
        --services-3d-top: 69.2%;
        --services-colour-top: 78.7%;
    }
}

@media (max-width: 768px) and (min-height: 701px) and (max-height: 809px) {
    #services-section {
        --services-item-left: clamp(76px, 21vw, 104px);
        --services-item-width: min(64vw, 242px);
        --services-item-font-size: clamp(0.66rem, 2.8vw, 0.84rem);
        --services-item-line-width: 20px;
        --services-concept-top: 25.4%;
        --services-cinema-top: 34.2%;
        --services-editing-top: 43.1%;
        --services-sound-top: 52.8%;
        --services-vfx-top: 62.0%;
        --services-3d-top: 70.5%;
        --services-colour-top: 80.4%;
    }
}

@media (max-width: 768px) and (min-height: 810px) {
    #services-section {
        --services-item-left: clamp(84px, 22vw, 118px);
        --services-item-width: min(60vw, 250px);
        --services-item-font-size: clamp(0.7rem, 2.85vw, 0.9rem);
        --services-item-line-width: 22px;
        --services-concept-top: 26.5%;
        --services-cinema-top: 35.4%;
        --services-editing-top: 44.5%;
        --services-sound-top: 53.9%;
        --services-vfx-top: 63.3%;
        --services-3d-top: 72.4%;
        --services-colour-top: 81.8%;
    }
}

@media (max-width: 768px) {
    #services-section .service-item,
    #services-section .service-item.left-col,
    #services-section .service-item.right-col {
        padding-left: 6px !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }
}

/* Exact viewport map for the phone sizes you asked to verify. */
@media (width: 360px) and (height: 800px) {
    #services-section {
        --services-item-left: 72px;
        --services-item-width: 232px;
        --services-item-font-size: 0.66rem;
        --services-item-line-width: 18px;
        --services-concept-top: 29%;
        --services-cinema-top: 33.6%;
        --services-editing-top: 42.6%;
        --services-sound-top: 52.0%;
        --services-vfx-top: 61.1%;
        --services-3d-top: 70.2%;
        --services-colour-top: 78.4%;
    }
}

@media (width: 375px) and (height: 667px) {
    #services-section {
        --services-item-left: 74px;
        --services-item-width: 224px;
        --services-item-font-size: 0.6rem;
        --services-item-line-width: 18px;
        --services-concept-top: 20%;
        --services-cinema-top: 31.1%;
        --services-editing-top: 41.6%;
        --services-sound-top: 53.8%;
        --services-vfx-top: 65.0%;
        --services-3d-top: 75.2%;
        --services-colour-top: 87.4%;
    }
}

@media (width: 390px) and (height: 844px) {
    #services-section {
        --services-item-left: 82px;
        --services-item-width: 244px;
        --services-item-font-size: 0.74rem;
        --services-item-line-width: 20px;
        --services-concept-top: 26.1%;
        --services-cinema-top: 34.9%;
        --services-editing-top: 44.0%;
        --services-sound-top: 53.3%;
        --services-vfx-top: 62.5%;
        --services-3d-top: 71.7%;
        --services-colour-top: 81.0%;
    }
}

@media (width: 393px) and (height: 873px) {
    #services-section {
        --services-item-left: 86px;
        --services-item-width: 246px;
        --services-item-font-size: 0.76rem;
        --services-item-line-width: 20px;
        --services-concept-top: 25.3%;
        --services-cinema-top: 34.7%;
        --services-editing-top: 43%;
        --services-sound-top: 53.3%;
        --services-vfx-top: 61.9%;
        --services-3d-top: 70.9%;
        --services-colour-top: 80.8%;
    }
}

@media (width: 401px) and (height: 773px) {
    #services-section {
        --services-item-left: 106px;
        --services-item-width: 252px;
        --services-item-font-size: 0.84rem;
        --services-item-line-width: 20px;
        --services-concept-top: 25.3%;
        --services-cinema-top: 34.3%;
        --services-editing-top: 42.5%;
        --services-sound-top: 53.1%;
        --services-vfx-top: 62.1%;
        --services-3d-top: 70.8%;
        --services-colour-top: 80.7%;
    }
}

@media (width: 412px) and (height: 915px) {
    #services-section {
        --services-item-left: 92px;
        --services-item-width: 250px;
        --services-item-font-size: 0.78rem;
        --services-item-line-width: 22px;
        --services-concept-top: 26.2%;
        --services-cinema-top: 35.1%;
        --services-editing-top: 43.2%;
        --services-sound-top: 53.1%;
        --services-vfx-top: 62.2%;
        --services-3d-top: 70%;
        --services-colour-top: 80%;
    }
}

@media (width: 428px) and (height: 926px) {
    #services-section {
        --services-item-left: 96px;
        --services-item-width: 254px;
        --services-item-font-size: 0.8rem;
        --services-item-line-width: 22px;
        --services-concept-top: 25.4%;
        --services-cinema-top: 34.6%;
        --services-editing-top: 43.0%;
        --services-sound-top: 52.99%;
        --services-vfx-top: 62.4%;
        --services-3d-top: 71%;
        --services-colour-top: 80.9%;
    }
}
@media (width: 430px) and (height: 932px) {
    #services-section {
        --services-item-left: 96px;
        --services-item-width: 254px;
        --services-item-font-size: 0.8rem;
        --services-item-line-width: 22px;
        --services-concept-top: 25.4%;
        --services-cinema-top: 34.6%;
        --services-editing-top: 43.0%;
        --services-sound-top: 52.99%;
        --services-vfx-top: 62.4%;
        --services-3d-top: 71%;
        --services-colour-top: 80.9%;
    }
}
@media (width: 400px) and (height: 645px) {
    #services-section {
        --services-item-left: 96px;
        --services-item-width: 254px;
        --services-item-font-size: 0.8rem;
        --services-item-line-width: 22px;
        --services-concept-top: 20.4%;
        --services-cinema-top: 31.6%;
        --services-editing-top: 42.0%;
        --services-sound-top: 53.99%;
        --services-vfx-top: 65.4%;
        --services-3d-top: 75%;
        --services-colour-top: 87.3%;
    }
}

/* Narrow Android phone family: keep the services text locked to the video framing
   on 360x780 / 360x800-style viewports without changing the larger phone layouts. */
@media (max-width: 380px) and (min-height: 770px) and (max-height: 809px) {
    #services-section {
        --service-mobile-scale: 0.92 !important;
        --services-item-left: clamp(68px, 19vw, 82px);
        --services-item-width: min(68vw, 228px);
        --services-item-font-size: clamp(0.62rem, 2.6vw, 0.76rem);
        --services-item-line-width: 18px;
        --services-concept-top: 24.8%;
        --services-cinema-top: 33.6%;
        --services-editing-top: 42.7%;
        --services-sound-top: 52.0%;
        --services-vfx-top: 61.4%;
        --services-3d-top: 70.6%;
        --services-colour-top: 79.8%;
    }

    #srv-mob-intro,
    #srv-mob-loop,
    #srv-mob-reverse {
        transform: translate(calc(var(--mobile-lock-vw) * 24), calc(var(--mobile-lock-vh) * -2.5)) scale(var(--service-mobile-scale)) !important;
    }
}

/* ── SERVICE ITEM MOBILE FINE-TUNE (pixel nudges to align with video) ── */
@media (max-width: 768px) {
    #services-section .item-concept {
        top: calc(var(--services-concept-top) + 10px) !important;
    }
    #services-section .item-cinema {
        top: calc(var(--services-cinema-top) + 5px) !important;
    }
    #services-section .item-vfx {
        top: calc(var(--services-vfx-top) - 2px) !important;
    }
    #services-section .item-3d {
        top: calc(var(--services-3d-top) - 5px) !important;
    }
    #services-section .item-colour {
        top: calc(var(--services-colour-top) - 5px) !important;
    }
}