/* ==========================================================================
   PREMIUM CINEMATIC DESIGN SYSTEM & DESIGN TOKENS
   Inspired by Apple, A24, and state-of-the-art creative storytelling interfaces.
   ========================================================================== */

@font-face {
    font-family: 'Hanson';
    src: url('./assets/fonts/hanson/Hanson-Bold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Delirium';
    src: url('./assets/fonts/Delirium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi';
    src: url('./assets/fonts/satoshi/Satoshi-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

:root {
    /* --------------------------------------------------------
       CORE EXISTING TOKENS
       -------------------------------------------------------- */
    --color-bg-base: #050506;
    --color-text-main: #ffffff;
    --color-text-muted: rgba(255, 255, 255, 0.65);
    --color-text-faint: rgba(255, 255, 255, 0.35);
    --color-accent-soft: #e2e2e8;

    --font-hero: 'Syncopate', sans-serif;
    --font-body: 'Satoshi', system-ui, -apple-system, sans-serif;

    --overlay-color: rgba(0, 0, 0, 0.50);
    --dock-bg: rgba(12, 12, 14, 0.55);
    --dock-border: rgba(255, 255, 255, 0.08);
    --menu-panel-bg: rgba(8, 8, 10, 0.72);

    --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    /* --------------------------------------------------------
       GLOBAL DESIGN FOUNDATION SYSTEM (NEW)
       -------------------------------------------------------- */
    /* Cinematic Monochrome Luxury Palette */
    --color-black-deep: #020203;
    --color-graphite: #0a0a0c;
    --color-glass-base: rgba(12, 12, 16, 0.42);
    --color-glass-light: rgba(255, 255, 255, 0.03);
    --color-glass-border: rgba(255, 255, 255, 0.06);
    --color-ambient-blue: rgba(16, 32, 64, 0.08);

    /* Typography System Hierarchy */
    --text-h1: clamp(3rem, 8vw, 8rem);
    --text-h2: clamp(2.5rem, 6vw, 5.5rem);
    --text-h3: clamp(2rem, 4vw, 3.5rem);
    --text-h4: clamp(1.5rem, 3vw, 2.5rem);
    --text-p-large: clamp(1.1rem, 1.5vw, 1.5rem);
    --text-p-base: clamp(0.95rem, 1vw, 1.1rem);
    --text-label: 0.75rem;

    /* Motion/Easing System */
    --ease-cinematic: cubic-bezier(0.76, 0, 0.24, 1);
    --ease-hover: cubic-bezier(0.25, 1, 0.5, 1);
    --duration-fast: 0.3s;
    --duration-base: 0.6s;
    --duration-slow: 1.2s;

    /* Global Spacing System */
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 48px;
    --space-xl: 80px;
    --space-2xl: 120px;
    --space-3xl: 200px;

    /* Section Rhythm & Containers */
    --section-gap: clamp(120px, 15vh, 240px);
    --container-max-width: 1600px;
    --container-padding: clamp(24px, 5vw, 80px);

    /* Border & Radius System */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;
    --border-thin: 1px solid var(--color-glass-border);

    /* Blur System */
    --blur-sm: blur(8px);
    --blur-md: blur(16px);
    --blur-lg: blur(28px);

    /* Shadow / Depth System */
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.15);
    --shadow-deep: 0 20px 60px rgba(0, 0, 0, 0.4);
    --shadow-glass: inset 0 1px 1px rgba(255, 255, 255, 0.08);

    /* Z-Index Hierarchy */
    --z-background: -10;
    --z-hero: 1;
    --z-content: 10;
    --z-navbar: 20;
    --z-dock: 30;
    --z-menu: 40;
    --z-modal: 50;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent !important;
}

/* ==========================================================================
   GLOBAL PREMIUM RESET (Kills all default browser styling)
   ========================================================================== */

/* Kills the desktop blue focus outline on all clickable things */
*:focus {
    outline: none !important;
}

/* 3. Global Premium Squish (Optional but recommended) */
/* This makes ALL buttons and links feel tactile when clicked */
button:active,
a:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
}

body,
html {
    width: 100%;
    min-height: 100vh;
    background-color: var(--color-bg-base);
    color: var(--color-text-main);
    font-family: var(--font-body);
    /* Using clip instead of hidden to prevent breaking position: sticky */
    overflow-x: clip;
    overscroll-behavior-y: none;
    /* Disables the native bounce effect to hide the video on overscroll */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   FULLSCREEN IMMERSIVE VIDEO BACKGROUND
   ========================================================================== */
.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: var(--z-background);
    overflow: hidden;
    background-color: var(--color-bg-base);
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    transform: scale(1.02);
    /* Avoids any micro border gaps */
    transition: transform 3s ease-out;
}

/* Soft black overlay letting the video breathe visually */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-color);
    z-index: 2;
    pointer-events: none;

}

/* ==========================================================================
   MAIN HERO CONTENT ARCHITECTURE
   ========================================================================== */
.hero-content {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    padding: 0 5vw;
    text-align: center;
    pointer-events: none;
    /* Let clicks pass through to dock/video if needed */
}

/* Premium Tagline / Sub-label */
.hero-label-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 16px;
    border-radius: 100px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-bottom: 3vh;
    animation: fadeInDown 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.status-dot {
    width: 6px;
    height: 6px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    animation: pulseGlow 3s infinite ease-in-out;
}

.hero-sublabel {
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    font-weight: 500;
}

/* Massive Akira / Hanson Inspired Cinematic Headline */
.hero-title {
    font-family: var(--font-hero);
    font-size: clamp(2.8rem, 8.5vw, 9.5rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--color-text-main);
    text-transform: uppercase;
    margin-bottom: 4vh;
    max-width: 90vw;
    text-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    animation: scaleUpFade 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;

}

/* Elegant minimal description */
.hero-description {
    font-size: clamp(1.1rem, 1.45vw, 1.6rem);
    line-height: 1.5;
    color: var(--color-text-muted);
    max-width: 650px;
    font-weight: 300;
    letter-spacing: 0.01em;
    animation: fadeInUp 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;


}

/* Ambient bottom shadow to gracefully host the floating dock */
.bottom-ambient-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 12vh;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.15) 0%, transparent 100%);
    z-index: -1;
    pointer-events: none;
}

/* ==========================================================================
   FLOATING DOCK (FUTURISTIC CINEMATIC OS PANEL)
   ========================================================================== */
.floating-dock {
    position: fixed;
    overflow: hidden;
    bottom: 2vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-dock);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background:
        linear-gradient(180deg,
            rgba(12, 12, 16, 0.342) 0%,
            rgba(6, 6, 10, 0.404) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 8px;
    border-radius: 12px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.55),
        0 0 40px rgba(255, 255, 255, 0.03),
        inset 0 1px 1px rgba(255, 255, 255, 0.08);
    transition: var(--transition-smooth);
    pointer-events: auto;
    min-width: 380px;
    max-height: 60px;

    /* Enable mouse interaction */
}

.floating-dock::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.04));

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
}

.floating-dock:hover {
    background: rgba(18, 18, 22, 0.65);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6),
        inset 0 1px 1px rgba(255, 255, 255, 0.12);
    transform: translateX(-50%) translateY(-2px);
}

.dock-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dock-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;

    width: 100%;

    padding: 8px;

    border-radius: 16px;

    background:
        linear-gradient(180deg,
            rgba(12, 12, 16, 0.92),
            rgba(6, 6, 10, 0.88));

    border: 1px solid rgba(255, 255, 255, 0.06);

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

.avatar-ring {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background:
        radial-gradient(circle at top left,
            rgba(255, 255, 255, 0.08),
            transparent 60%),
        linear-gradient(180deg,
            #17171d 0%,
            #0b0b10 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.05);
}

.avatar-text {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--color-text-main);
    font-family: var(--font-hero);
}

.dock-logo-symbol {

    width: 36px;

    height: 36px;

    object-fit: contain;
    opacity: 0.96;

    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.06));
    transform: translateY(-0.5px);
}

.dock-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dock-title {
    position: relative;

    font-size: 0.95rem;
    font-weight: 500;

    color: rgba(255, 255, 255, 0.92);

    letter-spacing: 0.02em;

    line-height: 1.2;

    overflow: hidden;

    display: inline-flex;

    align-items: center;
}

/* luxury looping text carousel container */
.dock-name-carousel {
    position: relative;
    display: inline-block;
    width: 136px;
    height: 19px;
    overflow: hidden;
}

.carousel-text {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    will-change: transform, opacity, clip-path;
    backface-visibility: hidden;
    transform: translateZ(0);
    filter: blur(0.15px);
}

.text-primary {
    animation: flowTextPrimary 7.5s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

.text-secondary {
    animation: flowTextSecondary 7.5s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

/* @keyframes flowTextPrimary & flowTextSecondary — see lines ~1004-1056 */

.dock-subtitle {
    font-size: 0.7rem;
    color: var(--color-text-faint);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 400;
}


/* Menu Trigger Button inside Dock */
.menu-trigger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    cursor: pointer;
    color: var(--color-text-main);
    transition: var(--transition-fast);

    overflow: hidden;
    padding: 0;

    background: rgba(255, 255, 255, 0.025);

    border: 1px solid rgba(255, 255, 255, 0.05);
}

.menu-trigger-btn:hover {
    background: #ffffff;
    color: #000000;
}

.menu-text {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    transition: var(--transition-fast);
}

.menu-lottie-wrap {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid rgba(255, 255, 255, 0.06);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

#menu-lottie {
    width: 22px;
    height: 22px;

    opacity: .88;
    display: flex;
    align-items: center;
    justify-content: center;
}

#menu-lottie svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Animated 3-Line Icon Flowing Wave (Reference Video Inspired) */
.cinematic-menu-svg {
    width: 26.5px;
    height: 16.5px;
    display: block;
    overflow: visible;
}

.svg-menu-line {
    stroke-dasharray: 20;
    stroke-dashoffset: 20;

    opacity: 0;

    animation: premiumLineFlow 3.6s cubic-bezier(0.76, 0, 0.24, 1) infinite;

    will-change: stroke-dashoffset, opacity;

    transform-origin: center;

    filter: blur(0.2px);
}

/* Perfect stagger timing */
.line-top {
    animation-delay: 0s;
}

.line-mid {
    animation-delay: 0.22s;
}

.line-bot {
    animation-delay: 0.44s;
}

/* Ultra smooth cinematic flow */
@keyframes premiumLineFlow {

    0% {
        stroke-dashoffset: 20;
        opacity: 0;
    }

    8% {
        opacity: 0;
    }

    20% {
        opacity: 0.35;
    }

    42% {
        opacity: 1;
    }

    65% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    82% {
        opacity: 0.35;
    }

    100% {
        stroke-dashoffset: -20;
        opacity: 0;
    }
}

/* ==========================================================================
   EXPANDED PREMIUM FLOATING CINEMATIC MENU PANEL
   ========================================================================== */
.menu-overlay-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%) scale(0.96);
    width: clamp(320px, 85vw, 1000px);
    height: auto;
    min-height: 570px;
    max-height: 88vh;
    background: var(--menu-panel-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 32px;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    z-index: var(--z-menu);
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px 56px;
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.8),
        0 0 80px rgba(255, 255, 255, 0.03),
        inset 0 1px 2px rgba(255, 255, 255, 0.12);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Active Class toggled via JS */
.menu-overlay-panel.active {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

/* Menu Header */
.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 24px;
}

.menu-system-label {
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    color: var(--color-text-faint);
    font-weight: 500;
}

/* .close-btn / .close-line — see canonical definition in WHATSAPP MODAL section */

/* Menu Body / Navigation Links */
.menu-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    padding: 20px 0;
}

.cinematic-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.nav-link {
    display: flex;
    align-items: baseline;
    gap: 24px;
    text-decoration: none;
    color: var(--color-text-muted);
    transition: var(--transition-fast);
    padding: 8px 0;
    position: relative;
}

.nav-num {
    font-family: var(--font-hero);
    font-size: 0.85rem;
    color: var(--color-text-faint);
    transition: var(--transition-fast);
}

.nav-label {
    font-family: var(--font-hero);
    font-size: clamp(1.3rem, 2.8vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: var(--transition-fast);
}

.nav-link:hover {
    color: var(--color-text-main);
    transform: translateX(12px);
}

.nav-link:hover .nav-num {
    color: var(--color-text-main);
}

/* ==========================================================================
   MENU FOOTER (Overlap Fix)
   ========================================================================== */
.menu-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    /* Allows columns to drop down if they run out of space */
    justify-content: space-between !important;
    gap: clamp(24px, 4vw, 48px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding-top: 28px !important;
    width: 100% !important;
}

.footer-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    /* THE FIX: Tells the column to take up available space, but wrap if it gets smaller than 220px */
    flex: 1 1 220px !important;
    min-width: 200px !important;
}

.footer-value,
.footer-link,
.social-link {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: var(--transition-fast);
    letter-spacing: 0.03em;

    /* THE FIX: Forces long emails to break onto a new line instead of overlapping! */
    word-break: break-word !important;
    white-space: normal !important;
}

.footer-title {
    font-size: 0.65rem;
    color: var(--color-text-faint);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.footer-link:hover,
.social-link:hover {
    color: var(--color-text-main);
}

.social-links {
    display: flex;
    gap: 16px;
}

/* ==========================================================================
   MENU ICON ALIGNMENT & HOVER EFFECTS (👇 NEW CODE STARTS HERE 👇)
   ========================================================================== */

/* Aligns the icon perfectly next to the text for Phone & Email */
.footer-link.with-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Places Social Links (WA/Insta) side-by-side with nice spacing */
.social-links-icon-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

/* Styles the individual Social Links */
.social-icon-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: var(--transition-fast);
    font-size: 0.85rem;
    letter-spacing: 0.03em;
}

/* Base state for the SVGs: slightly dimmed */
.footer-link.with-icon svg,
.social-icon-link svg {
    opacity: 0.65;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* Hover state: text turns white, icon pops scaling up slightly */
.footer-link.with-icon:hover,
.social-icon-link:hover {
    color: var(--color-text-main);
}

.footer-link.with-icon:hover svg,
.social-icon-link:hover svg {
    opacity: 1;
    transform: scale(1.15);
    /* Premium slight pop effect */
}

/* 👆 NEW CODE ENDS HERE 👆 */

/* Hide Dock smoothly when Menu opens */
.floating-dock.hidden-by-menu {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(20px);
}

/* ==========================================================================
   KEYFRAME ANIMATIONS
   ========================================================================== */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes scaleUpFade {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.85);
    }
}

/* Premium Cinematic Keyframe Micro-interactions */
@keyframes flowTextPrimary {

    0%,
    40% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
        transform: translateX(0);
    }

    48%,
    89% {
        clip-path: inset(0 0 0 100%);
        opacity: 0;
        transform: translateX(8px);
    }

    90% {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
        transform: translateX(-8px);
    }

    98%,
    100% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes flowTextSecondary {

    0%,
    40% {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
        transform: translateX(-8px);
    }

    48%,
    90% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
        transform: translateX(0);
    }

    98%,
    100% {
        clip-path: inset(0 0 0 100%);
        opacity: 0;
        transform: translateX(8px);
    }
}

@keyframes svgLineFlow {
    0% {
        stroke-dashoffset: 15;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    50% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        stroke-dashoffset: -15;
        opacity: 0;
    }
}

/* ==========================================================================
   PREMIUM STUDIO BRANDING LOGO (TASK 1)
   ========================================================================== */
/* scroll-behavior: smooth removed — JS scrollIntoView handles anchor navigation.
   CSS scroll-behavior causes Chrome scroll jitter when combined with JS scroll handlers. */

.logo-brand-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Premium glass circle */
.logo-icon-wrap {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 25%;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.03));

    border: 1px solid rgba(255, 255, 255, 0.10);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.08),
        0 4px 20px rgba(0, 0, 0, 0.18);

    position: relative;

    overflow: hidden;
}

/* subtle cinematic highlight */
.logo-icon-wrap::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:
        radial-gradient(circle at top left,
            rgba(255, 255, 255, 0.053),
            transparent 68%);

    pointer-events: none;
}

.logo-symbol {
    width: 40px;
    height: 40px;

    object-fit: contain;

    opacity: 0.96;

    position: relative;
    z-index: 2;
}



.logo-text-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.studio-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: clamp(14px, 2vw, 22px) clamp(16px, 2.5vw, 28px);
    z-index: var(--z-hero);
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-cinematic);
}

.premium-studio-logo {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-decoration: none;
    pointer-events: auto;
    opacity: 0;
    animation: studioLogoFadeIn 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.premium-studio-logo:hover {
    transform: translateY(-1px);
    opacity: 1;
}

.logo-main {
    font-family: var(--font-hero);
    font-size: clamp(0.9rem, 1.25vw, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1;
    text-transform: uppercase;
}

.logo-sub {
    font-family: var(--font-body);
    font-size: clamp(0.65rem, 0.8vw, 0.75rem);
    font-weight: 300;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1;
}

@keyframes studioLogoFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

/* ==========================================================================
   FULL RESPONSIVE OPTIMIZATION (TASK 2)
   Tailored intentionally for Mobile, Tablet, Laptop, and Desktop
   ========================================================================== */

/* Laptop & Small Desktop Optimization */
@media (max-width: 1440px) {
    .hero-content {
        padding: 0 6vw;
    }
}

/* Tablet Optimization */
@media (max-width: 1024px) {
    .studio-header {
        padding: 28px 36px;
    }

    .hero-title {

        font-size: clamp(3rem, 7vw, 5.4rem);

        line-height: 0.94;

        letter-spacing: -0.035em;

        margin-bottom: 2.5vh;

        max-width: 92%;

        text-align: center;
    }


    .hero-description {
        font-size: 1.3rem;
        max-width: 550px;
    }

    .floating-dock {
        min-width: 340px;
        bottom: 2.5vh;
    }
}

/* Premium Intentionally-Designed Mobile Experience */
@media (max-width: 768px) {
    .studio-header {
        padding: 24px 28px;
        /* account for safe areas gracefully */
        padding-top: max(24px, env(safe-area-inset-top));
        padding-left: max(28px, env(safe-area-inset-left));
    }

    .hero-content {
        padding: 0 7vw;
        justify-content: center;
        /* Slight vertical shift to keep hierarchy extremely balanced above dock */
        transform: translateY(-2vh);
    }

    .hero-label-wrapper {
        padding: 5px 14px;
        margin-bottom: 2.5vh;
    }

    .hero-sublabel {
        font-size: 0.68rem;
    }

    /* Properly scale hero headline for stunning mobile impact without breaking words aggressively */
    .hero-title {

        font-size: clamp(2rem, 8vw, 3.4rem);

        line-height: 0.96;

        letter-spacing: -0.03em;

        max-width: 100%;

        padding: 0 5vw;

        text-align: center;
    }

    .hero-description {
        font-size: 1.05rem;
        line-height: 1.45;
        max-width: 90vw;
        padding: 0 10px;
    }

    /* Optimize dock size, padding, gaps, and safe-area for iPhone/Android swipe areas */
    .floating-dock {
        width: min(350px, 92vw);
        max-width: 360px;
        min-width: auto;
        gap: 12px;
        padding: 8px 10px 8px 10px;
        bottom: max(3vh, env(safe-area-inset-bottom, 24px));
        border-radius: 14px;
    }

    .dock-left {
        gap: 10px;
    }

    .avatar-ring {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .dock-title {
        font-size: 0.9rem;
    }

    .dock-name-carousel {
        width: 126px;
    }

    .menu-trigger-btn {
        width: 38px;
        height: 36px;
    }

    .menu-overlay-panel {
        width: 90vw;
        height: max(420px, 75vh);
        padding: 32px 24px;
        border-radius: 24px;
    }

    .cinematic-nav-list {
        gap: 16px;
    }

    .nav-label {
        font-size: 1.6rem;
    }

    .nav-link {
        gap: 16px;
    }

    .menu-footer {
        gap: 16px;
    }
}

/* Extra Small Phone Viewports */
@media (max-width: 360px) {
    .floating-dock {
        width: 94vw;
        padding: 7px 8px;
        gap: 8px;
    }

    .dock-name-carousel {
        width: 120px;
    }

    .dock-title {
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   GLOBAL DESIGN FOUNDATION UTILITIES (NEW)
   Reusable classes for future sections
   ========================================================================== */

/* Layout & Containers */
.g-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    width: 100%;
}

.g-section {
    padding-top: var(--section-gap);
    padding-bottom: var(--section-gap);
    position: relative;
    z-index: var(--z-content);
}

.g-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.g-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.g-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

@media (max-width: 1024px) {
    .g-grid-2 {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
}

/* Glassmorphism System */
.g-glass-panel {
    background: linear-gradient(180deg, rgba(12, 12, 16, 0.42) 0%, rgba(6, 6, 10, 0.48) 100%);
    border: var(--border-thin);
    border-radius: var(--radius-lg);
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
    box-shadow: var(--shadow-deep), var(--shadow-glass);
    transition: background var(--duration-base) var(--ease-cinematic),
        transform var(--duration-base) var(--ease-cinematic),
        box-shadow var(--duration-base) var(--ease-cinematic);
}

.g-glass-panel:hover {
    background: rgba(18, 18, 22, 0.65);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

.g-glass-card {
    background: rgba(255, 255, 255, 0.02);
    border: var(--border-thin);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    transition: background var(--duration-fast) var(--ease-hover);
}

.g-glass-card:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* Typography Hierarchy System */
.g-h1 {
    font-family: var(--font-hero);
    font-size: var(--text-h1);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--color-text-main);
    text-transform: uppercase;
}

.g-h2 {
    font-family: var(--font-hero);
    font-size: var(--text-h2);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-text-main);
    text-transform: uppercase;
}

.g-h3 {
    font-family: var(--font-hero);
    font-size: var(--text-h3);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--color-text-main);
    text-transform: uppercase;
}

.g-h4 {
    font-family: var(--font-body);
    font-size: var(--text-h4);
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-text-main);
}

.g-p-large {
    font-size: var(--text-p-large);
    line-height: 1.5;
    color: var(--color-text-muted);
    font-weight: 300;
}

.g-p-base {
    font-size: var(--text-p-base);
    line-height: 1.6;
    color: var(--color-text-muted);
    font-weight: 300;
}

.g-label {
    font-size: var(--text-label);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    font-weight: 500;
}

/* Motion & Interaction System */
.g-fade-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--duration-slow) var(--ease-cinematic),
        transform var(--duration-slow) var(--ease-cinematic);
}

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

.g-float-ambient {
    animation: gFloating 6s ease-in-out infinite;
}

@keyframes gFloating {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.g-hover-lift {
    transition: transform var(--duration-base) var(--ease-hover);
}

.g-hover-lift:hover {
    transform: translateY(-4px);
}

/* Safe-Area Spacing System */
.g-safe-padding-bottom {
    padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
}

.g-safe-padding-top {
    padding-top: max(var(--space-md), env(safe-area-inset-top));
}

/* ==========================================================================
   GLOBAL NAVBAR SYSTEM (RESTORED & UPDATED)
   ========================================================================== */

/* 1. Main Navbar Container (Slightly Taller!) */
.g-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* THE FIX: Increased vertical padding from 8px to 14px for a slightly taller, more premium feel */
    padding: max(14px, env(safe-area-inset-top)) clamp(20px, 5vw, 40px) 14px !important;
    z-index: 999 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border-bottom: 1px solid transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.2s ease, background 1.2s ease, backdrop-filter 1.2s ease;
}

/* ==========================================================================
   NEW: NAVBAR PREMIUM GLASS LOGO WRAP
   ========================================================================== */
.g-navbar-glass-wrap {
    width: 40px;
    /* Slightly smaller than hero (40px) to fit the navbar perfectly */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25%;

    /* The exact premium glass texture from your hero page */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 4px 20px rgba(0, 0, 0, 0.18);

    position: relative;
    overflow: hidden;
}

/* Subtle cinematic top-left highlight reflection */
.g-navbar-glass-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.053), transparent 68%);
    pointer-events: none;
}

/* 2. Scrolled State (Triggered by your JS) */
.g-navbar.is-scrolled {
    opacity: 1;
    pointer-events: auto;
    background: linear-gradient(180deg, rgba(10, 10, 12, 0.4) 0%, rgba(10, 10, 12, 0) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* 3. Logo Elements */
.g-navbar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}


/* Adjust the S icon to sit perfectly inside the new glass box */
.g-navbar-symbol {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    opacity: 0.96;
    position: relative;
    z-index: 2;
    /* Scales the S icon down just a tiny bit so it doesn't hit the edges of the glass */
    transform: scale(0.85);
}

.g-navbar-wordmark {
    font-family: var(--font-hero), sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #ffffff;
    text-transform: uppercase;
}

/* ==========================================================================
   4. NEW INTERACTIVE AVATAR BUTTON
   ========================================================================== */
.g-navbar-cta.avatar-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body), sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
    padding: 4px 18px 4px 4px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Update the wrapper to center the icon and remove the black background */
.nav-avatar-wrapper {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}

/* Base state for the WhatsApp Icon (Subtle frosted white) */
.nav-wa-icon {
    width: 16px;
    height: 16px;
    fill: rgba(255, 255, 255, 0.7);
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.2));
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.g-navbar-cta.avatar-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

/* HOVER STATE: The icon pops and glows in Spangea Orange! */
.g-navbar-cta.avatar-btn:hover .nav-wa-icon {
    fill: #25D366;
    filter: drop-shadow(0 0 10px rgba(37, 211, 102, 0.8));
    transform: scale(1.15);
}

/* ==========================================================================
   BUTTON TEXT HOVER TRANSITION (Cinematic Roll)
   ========================================================================== */

/* 1. Wrap the text to hide the overflow outside the box */
.g-navbar-cta.avatar-btn .btn-text-wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
}

/* 2. The visible text you see normally */
.g-navbar-cta.avatar-btn .btn-text-inner {
    display: inline-block;
    font-size: 0.72rem;
    font-family: var(--font-body), sans-serif;
    letter-spacing: 0.05em;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 3. The hidden duplicate text waiting just below the button */
.g-navbar-cta.avatar-btn .btn-text-wrapper::after {
    content: attr(data-text);
    position: absolute;
    top: 100%;
    left: 0;
    font-size: 0.72rem;
    font-family: var(--font-body), sans-serif;
    letter-spacing: 0.05em;
    color: #ffffff;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 4. THE HOVER ANIMATION */
/* Pushes the original text up and out of sight */
.g-navbar-cta.avatar-btn:hover .btn-text-inner {
    transform: translateY(-100%);
}

/* Pulls the hidden text up into the exact center */
.g-navbar-cta.avatar-btn:hover .btn-text-wrapper::after {
    transform: translateY(-100%);
}

/* ==========================================================================
   SCROLLING CONTENT LAYER (STAGE 1 TRANSITION)
   ========================================================================== */
.hero-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: var(--z-hero);
    pointer-events: none;
    /* Prevents hero from blocking scroll/touch interactions */
}

#scrolling-content-layer {
    position: relative;
    z-index: var(--z-content);
    isolation: isolate;
    margin-top: 100vh;
    /* Starts exactly below the fixed hero */
    background: #ece7ec;
    color: var(--color-black-deep);
    min-height: 200vh;
    /* Physical Emergence Layering */
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15), 0 -2px 10px rgba(0, 0, 0, 0.05);
    pointer-events: auto;
    /* Stacking context isolation — prevents video bleed-through during transitions */
    isolation: isolate;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.transition-gradient-cap {
    display: none;
}

/* ==========================================================================
   SECTION 2: EDITORIAL FOUNDATION (WHY BUSINESSES GET IGNORED)
   ========================================================================== */
.editorial-section {
    padding-top: clamp(120px, 20vh, 240px);
    padding-bottom: clamp(100px, 15vh, 200px);
    display: flex;
    flex-direction: column;
    gap: clamp(150px, 25vh, 350px);
    /* Massive cinematic breathing room */
}

.editorial-act {
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    opacity: 0.95;
}

.editorial-heading-small {
    font-family: var(--font-body);
    font-size: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(2, 2, 3, 0.45);
    font-weight: 600;
}

.editorial-statement {
    font-family: var(--font-hero);
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.15;
    font-weight: 400;
    color: var(--color-black-deep);
    letter-spacing: -0.03em;
}

.editorial-heading-large {
    font-family: var(--font-hero);
    font-size: clamp(2.5rem, 6.5vw, 5.5rem);
    line-height: 1.05;
    font-weight: 500;
    color: var(--color-black-deep);
    letter-spacing: -0.04em;
    max-width: 1000px;
}

.editorial-body {
    font-family: var(--font-body);
    font-size: var(--text-p-large);
    line-height: 1.6;
    color: rgba(2, 2, 3, 0.7);
    max-width: 600px;
}

.editorial-transformation-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: var(--space-md) 0;
}

.transformation-word {
    font-family: var(--font-hero);
    font-size: clamp(3.5rem, 9vw, 8rem);
    font-weight: 700;
    color: var(--color-black-deep);
    text-transform: uppercase;
    letter-spacing: -0.05em;
    line-height: 0.95;
}

/* Structural Storytelling Positioning */
@media (min-width: 768px) {
    .editorial-act.act-2 {
        align-items: center;
        text-align: center;
    }

    .editorial-act.act-2 .editorial-body {
        margin: 0 auto;
    }

    .editorial-act.act-3 {
        align-items: flex-end;
        text-align: right;
    }


}

/* ==========================================================================
   SECTION 2: CINEMATIC POSITIONING (SCROLL SYNC SYSTEM)
   ========================================================================== */
.cinematic-positioning {
    width: 100%;
    background-color: transparent;
    /* Your section background */
    margin: 0;
    padding: 0;

    /* Makes the section tall enough to allow a smooth, premium scroll entry */
    min-height: 150vh;
    position: relative;
}

.pos-sticky-container {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.pos-container {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    max-width: 100%;

    margin: 0;

    padding-left: clamp(20px, 3vw, 40px);
    padding-right: clamp(20px, 3vw, 40px);
}

@media (min-width: 1024px) {
    .pos-container {
        flex-direction: row-reverse;
        align-items: center;

        justify-content: flex-start;
        display: flex;

        gap: clamp(10px, 2vw, 30px);


        /* Make the container sticky so it stays fixed while scrolling the section */
        position: sticky;

        /* Adjust this to match the EXACT height of your global navbar! */
        top: 64px;

        height: calc(100vh - 80px);
        /* Increased for a premium, spacious editorial look */
        padding-left: clamp(8px, 3vw, 20px);

        padding-right: 0;
    }
}

/* --- LEFT SIDE: Sticky Typography System --- */
.pos-left {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    z-index: 20;
    pointer-events: auto;
}

@media (min-width: 1024px) {
    .pos-left {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: clamp(20px, 3vw, 40px);
        padding-right: 0;
        overflow: visible;
        z-index: 30;
    }
}

.contact-cta-btn {
    font-family: var(--font-body);
    font-size: 0.60rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    padding: 10px 20px 10px 24px;
    margin-right: 36px;
    border-radius: var(--radius-full);
    background:
        linear-gradient(180deg,
            rgb(12, 12, 16) 0%,
            rgb(6, 6, 10) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.55),
        0 0 40px rgba(255, 255, 255, 0.03),
        inset 0 1px 1px rgba(255, 255, 255, 0.08);

    transition: all var(--duration-fast) var(--ease-hover);
    margin-top: clamp(20px, 3vh, 30px);

    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    align-self: flex-end;

    border-radius: 18px;
    -webkit-tap-highlight-color: transparent;
}

.contact-cta-btn::after {
    content: '→';
    font-size: 1.2em;
    /* Uses em so it perfectly scales with the fluid font size */
    transition: transform var(--duration-fast) var(--ease-hover);
}

.contact-cta-btn:hover {
    background: linear-gradient(180deg,
            rgba(18, 18, 22, 0.88) 0%,
            rgba(10, 10, 14, 0.95) 100%);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.25),
        inset 0 1px 1px rgba(255, 255, 255, 0.12);
    transform: translateX(4px);
}

.contact-cta-btn:hover::after {
    transform: translateX(4px);
}

/* --- PREMIUM MOBILE TAP EFFECT --- */
.contact-cta-btn:active {
    /* Shrinks the button slightly to mimic a real physical button press */
    transform: scale(0.96) !important;
    transition: transform 0.1s ease-out;
    /* Ultra-fast response time */
}

.sticky-typo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: 150px;

}

@media (min-width: 1024px) {
    .sticky-typo-wrapper {
        margin-bottom: 60px;
    }
}

.typo-line {
    font-family: var(--font-hero);
    font-size: clamp(8rem, 6vw, 4rem);
    color: rgba(2, 2, 3, 0.190);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    line-height: 0.8;
}

.typo-dynamic-mask {
    overflow: hidden;
    height: clamp(5.5rem, 5vw, 2rem);
    position: relative;
    width: 100%;
}

.dynamic-word-list {
    list-style: none;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.dynamic-word {
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--font-hero);
    font-size: clamp(5.5rem, 6vw, 5rem);
    font-weight: 700;
    color: var(--color-black-deep);
    text-transform: uppercase;
    letter-spacing: -0.085em;
    line-height: 1;
    white-space: nowrap;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 1.5s cubic-bezier(0.76, 0, 0.24, 1),
        opacity 1.5s cubic-bezier(0.76, 0, 0.24, 1);

    margin-left: 6px;
}

.dynamic-word.active {
    opacity: 1;
    transform: translateY(0);
}

.dynamic-word.exiting {
    opacity: 0;
    transform: translateY(-100%);
}

/* Left Bottom Micro-Story */
.pos-micro-story-wrapper {

    display: flex;

    align-items: flex-start;

    gap: 24px;

    margin-top: 2vh;

    max-width: 460px;
}

/* Editorial Progress Rail */
.editorial-rail {
    display: none;
    position: relative;
    width: 1px;
    height: 180px;
    background: rgba(2, 2, 3, 0.1);
    margin-top: -8px;
}

@media (min-width: 1024px) {
    .editorial-rail {
        display: block;
    }
}

.rail-line {
    width: 100%;
    height: 100%;
}

.rail-dot {
    position: absolute;
    top: 0;
    left: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-black-deep);
    /* Transition driven by JS translation */
    transition: transform 0.1s linear;
}

/* Micro Story Content */
.micro-story-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    flex: 1;
}

@media (min-width: 1024px) {
    .micro-story-content {
        gap: 24px;
    }
}

.micro-story-list {
    list-style: none;
    position: relative;
    height: 100px;
    /* Fixed to prevent layout shift */
}

@media (min-width: 1024px) {
    .micro-story-list {
        height: 120px;
    }
}

.micro-story-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(20px);
    transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1),
        opacity 1s cubic-bezier(0.76, 0, 0.24, 1);
    pointer-events: none;
}

.micro-story-item.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.ms-title {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-black-deep);
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

@media (min-width: 1024px) {
    .ms-title {
        font-size: 0.85rem;
        margin-bottom: 12px;
    }
}

.ms-caption {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.4;
    color: rgba(2, 2, 3, 0.65);
    font-weight: 400;
}

@media (min-width: 1024px) {
    .ms-caption {
        font-size: 1.05rem;
        line-height: 1.5;
    }
}

/* Pagination Desktop/Mobile */
.desktop-pagination {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-dot {
    font-family: var(--font-body);
    font-size: 0.80rem;
    font-weight: 380;
    color: rgba(2, 2, 3, 0.3);
    transition: color 0.4s ease, font-weight 0.4s ease;
}

.page-dot.active {
    color: var(--color-black-deep);
    font-weight: 580;
}


/* --- RIGHT SIDE: Real Image Ecosystem --- */
.pos-right {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 15;
    position: relative;
    margin-top: 4vh;
}

@media (min-width: 1024px) {
    .pos-right {
        flex-shrink: 0;
        margin-top: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        overflow: hidden;
        flex: 0 0 30%;
        max-width: 30%;
    }
}

.visual-atmosphere {
    display: none;
}

.visual-ecosystem {
    position: relative;
    width: 100%;
    max-width: 680px;
    height: 50vh;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    padding-top: 6vh;
    border-radius: 32px;

}

@media (min-width: 1024px) {
    .visual-ecosystem {
        height: 90vh;
        max-height: 100%;
        width: 100%;
        padding-top: 0;
        margin: 0;
        justify-content: flex-end;
        align-items: center;
        overflow: hidden;
    }
}

.visual-ecosystem::before {
    display: none;
}

.ecosystem-image {
    position: absolute;
    width: min(100%, 420px);
    aspect-ratio: 3 / 4;
    height: auto;
    border-radius: 20px;
    overflow: hidden;
    background: transparent;
    border: 1px solid transparent;
    padding: 12px;
    box-shadow: none;

    /* Card stays fixed — only image inside moves */
    opacity: 1;
    transform: none;
    transition: all 1.2s cubic-bezier(0.76, 0, 0.24, 1);
    z-index: 1;

}

@media (min-width: 1024px) {
    .ecosystem-image {
        aspect-ratio: 3 / 4;
        height: 70vh;
        max-height: 780px;
        width: auto;
        max-width: none;
        border-radius: 20px;
        padding: 8px;
        transform: none;
    }
}

.ecosystem-image.active {
    opacity: 1;
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
    z-index: 2;
}




.eco-img-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    aspect-ratio: 0.78 / 1;
    max-height: 72vh;

}

/* ── Crossfade only — no slide, no movement ── */
.eco-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: none;
    transition: opacity 1.2s cubic-bezier(0.76, 0, 0.24, 1);
    will-change: opacity;
}

.ecosystem-image.active .eco-img-wrapper img {
    opacity: 1;
    transform: none;
}

/* Soft glass overlays & thin glass borders */
.eco-glass-overlay {
    position: absolute;
    inset: 0;
    /* Soft cinematic gradient */
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.02) 0%,
            rgba(2, 2, 3, 0.12) 45%,
            rgba(2, 2, 3, 0.58) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: inherit;
    pointer-events: none;
}

/* Subtle UI Fragments / Info Panels */
.eco-info-panel {
    position: absolute;
    display: none;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 10px 18px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    opacity: 0;
    z-index: 10;
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

.ecosystem-image.active .eco-info-panel {
    opacity: 1;
}

/* Panel positions for asymmetrical cinematic framing */
.eco-info-panel.pos-top-left {
    top: 24px;
    left: 24px;
    transform: translateY(-10px);
}

.ecosystem-image.active .eco-info-panel.pos-top-left {
    transform: translateY(0);
}

.eco-info-panel.pos-bottom-right {
    bottom: 24px;
    right: 24px;
    transform: translateY(10px);
}

.ecosystem-image.active .eco-info-panel.pos-bottom-right {
    transform: translateY(0);
}

.eco-info-panel.pos-top-right {
    top: 24px;
    right: 24px;
    transform: translateY(-10px);
}

.ecosystem-image.active .eco-info-panel.pos-top-right {
    transform: translateY(0);
}

.eco-info-panel.pos-bottom-left {
    bottom: 24px;
    left: 24px;
    transform: translateY(10px);
}

.ecosystem-image.active .eco-info-panel.pos-bottom-left {
    transform: translateY(0);
}

@media (max-width: 1024px) {
    .eco-info-panel {
        left: 32px !important;
        right: auto !important;
        bottom: 32px !important;
        top: auto !important;
    }
}

.panel-dot {
    width: 6px;
    height: 6px;
    background: var(--color-black-deep);
    border-radius: 50%;
}

.panel-label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-black-deep);
}

@media (max-width: 768px) {

    .hero-video {
        transform: scale(1.01);
    }

    .ecosystem-image,
    .dynamic-word,
    .micro-story-item {
        transition-duration: 0.45s !important;
    }

    .menu-overlay-panel {
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .floating-dock {
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

}

/* ==========================================================================


/* ─── Mobile: keep snappier but still controlled ──────────────────────── */
@media (max-width: 768px) {

    .dynamic-word,
    .micro-story-item {
        transition-duration: 0.9s !important;
    }

    /* ecosystem-image intentionally excluded — card must never transition */
}

/* ─── FIX: Remove ghost box artifacts from inactive ecosystem images ─── */


/* ─── FIX: Stop pos-right from clipping the dynamic word text ─────────── */
.pos-right {
    overflow: visible;
}

.visual-ecosystem {
    overflow: visible;
}



/* ==========================================================================
   SECTION 3: VELOCITY MARQUEE & SCROLL SHIFT
   ========================================================================== */
.brands-section {
    width: 100%;
    /* Starts out matching your current light theme */
    background-color: transparent !important;
    color: var(--color-black-deep);
    min-height: auto;
    position: relative;
    z-index: 10;
    /* Unlinks the padding so we can crush the top and bottom independently! */
    padding-top: 10px !important;
    padding-bottom: 20px !important;

    /* THE FADE: This makes the color change smooth instead of instant */
    transition: background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

/* JavaScript will inject this class when the user scrolls down */
.brands-section.scrolled-dark {
    background-color: #161616;
    /* Deep dark grey/black */
    color: #ffffff;
    /* Flips text to white */
}

.brands-container {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 1.8vw, 26px) !important;
    ;
}

.brands-headline {
    font-family: var(--font-hero);
    font-size: clamp(2rem, 5vw, 4rem);
    /* Massive scaling typography */
    line-height: 0.9;
    text-align: left;
    text-transform: capitalize;
    letter-spacing: -0.02em;
    /* Inherits the color transition from the parent section */
    color: inherit;
    padding: 0 5vw;
    /* Keeps it aligned with your left edges */

}

/* ==========================================================================
   EDITORIAL BRANDS HEADER (Line & Typography)
   ========================================================================== */

.editorial-brands-header {
    width: 100%;
    padding: 0 5vw;
    /* Aligns perfectly with your site edges */
    display: flex;
    flex-direction: column;

    /* The exact gap between the top line and the tiny text */


    gap: clamp(8px, 1.2vw, 12px) !important;

    /* ▼ THIS IS YOUR RED ARROW GAP ▼ */
    /* Change 20px to 0px if you want them to physically touch! */
    margin-bottom: 20px !important;

}

/* The razor-thin horizontal line */
.editorial-line {
    width: 0%;
    height: 1.2px;

    /* Magic Trick: 'currentColor' makes the line automatically flip 
       from black to white when the section enters dark mode! */
    background-color: currentColor;

    /* Keeps the line subtle and premium so it doesn't overpower the text */
    opacity: 0.15;
}

/* The tiny section title */
.editorial-title {
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;

    /* Inherits black or white from the dark mode transition */
    color: inherit;
    opacity: 0.7;
    /* Keeps it quiet and secondary to the logos */
}

.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    /* Still needed for the horizontal scrolling */
    position: relative;

    -webkit-mask-image: linear-gradient(to right, transparent, rgb(46, 46, 46) 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);

    /* ▼ THE CLIPPING FIX ▼ */

    /* 1. Expands the internal height so the zoomed logo has plenty of room */
    padding-top: 40px !important;
    padding-bottom: 40px !important;

    /* 2. Pulls the surrounding elements back in so we don't ruin your tight spacing! */
    margin-top: -40px !important;
    margin-bottom: -40px !important;
}

.marquee-track {
    display: flex;
    width: max-content;
    /* Prepares the browser for high-speed JS movement */
    will-change: transform;
}

.marquee-content {
    display: flex;
    align-items: center;
    gap: clamp(40px, 6vw, 100px);
    padding-right: clamp(40px, 6vw, 100px);
    /* Ensures the loop connects flawlessly */
    flex: 0 0 auto !important;
}

/* Container for the image */
/* Container for both text and image logos */
.brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    /* Image Height Control */
    height: clamp(16px, 2.6vw, 24px);

    /* Text Logo Styling (Restored!) */
    font-family: var(--font-hero);
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 700;
    text-transform: uppercase;

    opacity: 0.35;
    transition: opacity 0.4s ease;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    cursor: default;
}

.brand-logo:hover {
    opacity: 1;
}

/* The actual image inside the container */
.brand-logo img {
    height: 100%;
    width: auto;
    object-fit: contain;
    flex-shrink: 0 !important;
    max-width: none !important;
    transition: filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Visually enlarges specific logos that have too much empty padding */
/* Visually enlarges PNGs AND removes their invisible side spacing */
.balance-logo {
    /* 1. Makes the logo look bigger */
    transform: scale(1.6) !important;

    /* 2. THE FIX: Pulls the neighboring logos closer, destroying the invisible walls! */
    margin-left: 26px !important;
    margin-right: 26px !important;
}

/* For logos that have an EXTREME amount of invisible side space */
.balance-logo-max {
    transform: scale(2.2) !important;
    margin-left: 42px !important;
    margin-right: 42px !important;
}

/* ==========================================================================
   MEGA-SECTION DARK MODE TRANSITION (PREMIUM CONTROLLED SYNC)
   ========================================================================== */

/* 1. The Master Background Fade (The Dimmer Switch)
   Uses 'ease-in-out' over 1.2s. It starts slow, moves steady, and ends soft.
   This completely eliminates the sudden "flash" or "jerk" effect. */
#scrolling-content-layer {
    transition: background-color 1.2s ease-in-out !important;
    will-change: background-color;
}

/* 2. The Text Transition (The Anti-Muddy Fix) */
#scrolling-content-layer,
#scrolling-content-layer .typo-line,
#scrolling-content-layer .ms-title,
#scrolling-content-layer .page-dot,
#scrolling-content-layer .ms-caption,
#scrolling-content-layer .brands-headline,
#scrolling-content-layer .editorial-title {
    transition: color 0.5s ease-out !important;
    will-change: color;
}

/* THE FIX: Isolating the dynamic words to RESTORE the original 1.5s slide-up animation */
#scrolling-content-layer .dynamic-word {
    transition: color 0.5s ease-out,
        transform 1.5s cubic-bezier(0.76, 0, 0.24, 1),
        opacity 1.5s cubic-bezier(0.76, 0, 0.24, 1) !important;
    will-change: color, transform, opacity;
}

/* 3. The Dark Mode Triggers */
#scrolling-content-layer.scrolled-dark {
    /* THE FIX: Reverted to your previous black shade (#161616). 
       (If you want it to perfectly match your site's absolute darkest background, 
       you can also change this to var(--color-bg-base) instead!) */
    background-color: #161616 !important;
    color: #ffffff !important;
}

#scrolling-content-layer.scrolled-dark .dynamic-word,
#scrolling-content-layer.scrolled-dark .ms-title,
#scrolling-content-layer.scrolled-dark .page-dot.active {
    color: #ffffff !important;
}

#scrolling-content-layer.scrolled-dark .typo-line {
    color: rgba(255, 255, 255, 0.15) !important;
}

#scrolling-content-layer.scrolled-dark .ms-caption {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* 4. Smooth Elements & Buttons (Perfectly synced to the background) */
#scrolling-content-layer .contact-cta-btn,
#scrolling-content-layer .brand-logo img {
    transition: background 1.2s ease-in-out,
        color 0.5s ease-out,
        border-color 1.2s ease-in-out,
        box-shadow 1.2s ease-in-out,
        filter 1.2s ease-in-out !important;
}

/* THE FIX: Isolating the ecosystem images to RESTORE the original 1.2s crossfade */
#scrolling-content-layer .ecosystem-image,
#scrolling-content-layer .ecosystem-image.active {
    transition: all 1.2s cubic-bezier(0.76, 0, 0.24, 1),
        background 1.2s ease-in-out,
        border-color 1.2s ease-in-out,
        box-shadow 1.2s ease-in-out !important;
}

#scrolling-content-layer .eco-img-wrapper img {
    transition: opacity 1.2s cubic-bezier(0.76, 0, 0.24, 1) !important;
}

/* 5. Inverted Button Styling */
#scrolling-content-layer.scrolled-dark .contact-cta-btn {
    background: #ffffffaa !important;
    color: var(--color-black-deep) !important;
    border: 1px solid rgba(255, 255, 255, 0.295) !important;
    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.12) !important;
}

#scrolling-content-layer.scrolled-dark .contact-cta-btn:hover {
    background: #e2e2e865 !important;
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.25) !important;
}

/* 6. Image Card Stealth Border */
#scrolling-content-layer.scrolled-dark .ecosystem-image.active {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6) !important;
}

/* 7. Magically invert logos */
#scrolling-content-layer.scrolled-dark .brand-logo img {
    filter: invert(1) brightness(2) !important;
}

/* ==========================================================================
   CINEMATIC CHAPTER BREAK (MARGIN LEAK FIX)
   ========================================================================== */

/* 1. STITCH THE SECTIONS TOGETHER */
.reviews-section {
    margin-bottom: 0 !important;
    /* We move the breathing room INSIDE the black section so it stays dark */
    padding-bottom: clamp(40px, 6vh, 80px) !important;
}

.process-section {
    margin-top: 0 !important;
    /* Creates the space below the line */
    padding-top: clamp(40px, 6vh, 80px) !important;
    /* Guarantees the background matches perfectly */
    background-color: #020203 !important;
}

/* 2. THE 1PX LINE PERFECTED */
.cinematic-chapter-break {
    width: 75% !important;
    max-width: 1000px !important;
    height: 1px !important;

    /* THE FIX: margin: 0 kills the transparent gap causing the grey box! */
    margin: 0 auto !important;

    background: linear-gradient(to right, transparent, rgba(2, 2, 3, 0.150), transparent) !important;
    transition: background 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;

    /* Ensures the line sits ABOVE the dark backgrounds */
    position: relative !important;
    z-index: 50 !important;
}

/* 3. DARK MODE GLOW */
#scrolling-content-layer.scrolled-dark .cinematic-chapter-break {
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.15), transparent) !important;
}

/* ==========================================================================
   SECTION 4: OUR SERVICES (HORIZONTAL SCROLL)
   ========================================================================== */
.services-section {
    position: relative;
    width: 100%;
    background: var(--color-black-deep);
    z-index: 10;
}

.services-scroll-wrapper {
    /* This creates the massive vertical scrolling space. 
       400vh means it takes 4 full screen heights to scroll through the cards */
    height: 400vh;
    position: relative;
}

.services-sticky-container {
    position: sticky;
    top: 0;
    width: 100%;
    height: 85vh;
    overflow: hidden;
    align-items: center;


    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 48px;
    /* Accounts for navbar */
}

.services-header {
    padding: 0 clamp(24px, 5vw, 80px);
    margin-bottom: clamp(40px, 6vh, 80px);
}

.services-title {
    color: var(--color-text-main);
}

/* The horizontal track that holds the cards */
.services-track {
    will-change: transform;
    transform: translateZ(0);
    display: flex;
    gap: clamp(24px, 4vw, 40px);
    padding: 0 clamp(24px, 5vw, 80px);
    padding-right: 56vw !important;
    width: max-content;

    /* THE FIX: Forces the cards to slide OVER the capsule, not under it */
    position: relative;
    z-index: 30;
}

/* Individual Card Styling */
.service-card {
    width: clamp(300px, 40vw, 480px);
    /* Massive, premium width */
    flex-shrink: 0;
}

.service-card-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 420px;
    padding: clamp(32px, 4vw, 48px);
    border-radius: 24px;

    /* THE FIX: Solid dark background instead of transparent glass */
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.5s var(--ease-hover);

    /* Added a shadow to make it pop off the background text */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);

    /* Keeps the card above the background */
    position: relative;
    z-index: 20;
}

.service-card-inner:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-8px);
}

.card-icon {
    font-family: var(--font-hero);
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.2);
    margin-bottom: 40px;
}

.service-card-inner h3 {
    font-family: var(--font-hero);
    font-size: clamp(1.5rem, 2vw, 2.2rem);
    color: #ffffff;
    margin-bottom: 20px;
    line-height: 1.1;
    text-transform: uppercase;
}

.service-card-inner p {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
    margin-bottom: 30px;

}

/* Tag Pills */
.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0px 8px;
    margin-top: auto;
}

.service-tags span {
    font-size: 0.56rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 12px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.03);
    margin-bottom: 24px;
}



/* ==========================================================================
   SECTION 5: PREMIUM PORTFOLIO (CINEMATIC GLOW UI)
   ========================================================================== */
.portfolio-section {
    position: relative;
    width: 100%;
    background: var(--color-black-deep);
    color: #ffffff;
    z-index: 10;
}

.port-scroll-wrapper {
    height: 400vh;
    position: relative;
}

.port-sticky-container {
    will-change: transform;
    transform: translateZ(0);
    position: sticky;
    top: 0;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 48px;
}

.port-header {
    margin-bottom: clamp(30px, 5vh, 60px);
}

.port-track {
    display: flex;
    gap: clamp(9px, 2vw, 18px);
    padding: 0 clamp(24px, 5vw, 80px);
    width: max-content;
    will-change: transform;
}

/* --- THE CARD STRUCTURE --- */
/* --- 1. THE OUTER BACKGROUND CARD (The Thick Frame) --- */
.port-card {
    width: clamp(300px, 28vw, 400px);
    flex-shrink: 0;
    cursor: pointer;
    position: relative;

    /* 1. Changed from the bright grey to a premium, deep elevated dark tone */
    background: #2b2b30a8;

    /* 2. Slightly stronger border to define the hard edge of the outer frame */
    border: 1px solid rgba(255, 255, 255, 0.050);
    border-radius: 16px;
    /* Smooth outer corners */
}

/* --- 2. THE INNER D-SHAPE CONTAINER --- */
.port-card-inner {
    position: absolute;

    /* 3. THE MAGIC TRICK: This pulls the inner card away from the edge, 
       creating that thick 14px outer frame on ALL sides! */
    inset: 6px;

    /* Mathematically perfect concentric corners (32px outer - 14px inset = 18px inner) */
    border-radius: 12px 12px 108px 12px;
    overflow: hidden;
}

/* The Spinning Orange Light */
.port-card-inner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent 70%, #ff4d00 100%);
    opacity: 0;
    animation: rotateGlow 3s linear infinite;
    transition: opacity 0.5s var(--ease-hover);
    z-index: 0;
}

@keyframes rotateGlow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* The solid inner face that creates the thin glowing track */
.port-card-bg {
    position: absolute;
    inset: 1.5px;
    background: #050506;
    /* Pure deep black inside the D-shape */
    /* Adjusted to match the new 18px/110px base */
    border-radius: 12px 12px 108.5px 12px;
    z-index: 1;
}

.port-card:hover .port-card-inner::before,
.port-card.touch-active .port-card-inner::before {
    opacity: 1;
}

/* --- THE VISIBLE IMAGE --- */
.port-image-wrap {
    position: absolute;
    inset: 1.5px;
    /* Adjusted to match the new base */
    border-radius: 12px 12px 108.5px 12px;
    z-index: 2;
    overflow: hidden;
}

.port-image-wrap img {
    width: 85%;
    height: 85%;
    object-fit: contain;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(1) !important;

    /* Adds a heavy 3D drop shadow so the devices pop off the screen */
    filter: drop-shadow(0px 30px 50px rgba(0, 0, 0, 0.9)) !important;

    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* The Cinematic Zoom Hover */
.port-card:hover .port-image-wrap img,
.port-card.touch-active .port-image-wrap img {
    /* Zooms slightly toward you, but STAYS perfectly centered */
    transform: translate(-50%, -50%) scale(1.08) !important;
}

/* --- THE 50% FLOATING GLASS PANEL REVEAL --- */
.port-glass-overlay {
    position: absolute;

    /* 1. The Gaps: This creates the breathing room on the left, top, and bottom */
    top: 8px;
    bottom: 8px;
    left: 8px;

    /* 2. The Coverage: Covers exactly 55%, leaving that massive clear gap on the right */
    width: 68%;

    /* 3. The Physical Shape: Gives the floating panel its own sleek rounded corners */
    border-radius: 12px;
    z-index: 3;

    /* 4. The Glass Material: A rich, dark frosted tint instead of a faded gradient */
    background: rgba(12, 12, 14, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    /* 5. The Outline: A subtle light reflection to define the edge of the glass */
    border: 1px solid rgba(255, 255, 255, 0.08);

    /* Adds a drop shadow onto the project image underneath to separate the layers */
    box-shadow: 20px 0 40px rgba(0, 0, 0, 0.6);

    /* Smooth animation engine */
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

/* Cinematic micro-interaction: The glass slides left as it melts away */
.port-card:hover .port-glass-overlay,
.port-card.touch-active .port-glass-overlay {
    opacity: 0;
    transform: translateX(-15px);
}

/* Make sure the text on top of the glass ALSO slides left and fades out */
.port-text-top {
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);

    /* Pushes the text slightly down and right to sit perfectly centered in the glass */
    margin-top: 10px;
    margin-right: 12px;
}

.port-text-top h3 {
    font-family: var(--font-hero);
    /* Applies your premium wide font */
    text-transform: uppercase;
    font-size: clamp(0.9rem, 1.4vw, 1.4rem);
    font-weight: 600;
    color: #ffffffd3;
    margin-bottom: 8px;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.port-text-top p {
    font-family: var(--font-body);
    /* Applies your clean secondary font */
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.50);
    letter-spacing: 0.03em;
    font-weight: 400;
    margin-top: -4px;
}


.port-card:hover .port-text-top,
.port-card.touch-active .port-text-top {
    opacity: 0;
    transform: translateX(-15px);
}

/* --- TEXT & CONTENT LAYOUT --- */
.port-content {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    padding: clamp(16px, 2vw, 24px);
    pointer-events: none;

}

.port-vertical-text {
    position: absolute;
    right: 24px;
    top: 18%;
    transform: translateY(-50%) rotate(0deg);
    writing-mode: vertical-rl;
    font-size: 0.42rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    transition: color 0.5s ease;
}

.port-card:hover .port-vertical-text,
.port-card.touch-active .port-vertical-text {
    color: rgba(255, 255, 255, 0.8);
}

/* --- THE OUTER FOOTER (Where the + Button Lives) --- */
.port-footer {
    position: absolute;
    bottom: clamp(18px, 2vw, 26px);
    left: clamp(24px, 3vw, 32px);
    right: clamp(10px, 1.2vw, 16px);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: 10;
    pointer-events: none;
}

.port-year {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.1em;
}

.port-plus {
    font-family: var(--font-body);
    font-size: 1.8rem;
    line-height: 0.8;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.5s var(--ease-hover);
    pointer-events: auto;
    /* Makes button clickable */
}

.port-card:hover .port-plus,
.port-card.touch-active .port-plus {
    color: #ff4d00;
    transform: rotate(90deg);
}

/* --- MOBILE / TABLET PATCHES FOR NEW UI --- */
@media (min-width: 768px) and (max-width: 1024px) {
    .port-card {
        width: 340px !important;
    }
}

@media (max-width: 767px) {
    .port-sticky-container {
        will-change: transform;
        transform: translateZ(0);
        height: 100vh !important;
        padding-top: 24px !important;
    }

    .port-card {
        width: 82vw !important;
    }

    .port-image-wrap {
        /* Makes image slightly visible on mobile since there is no hover */
        opacity: 0.3 !important;
        transform: scale(1) !important;
    }
}

/* ==========================================================================
   MASTER FIX: LAPTOP SPLICING INTEGRATION (SERVICES -> PORTFOLIO)
   ========================================================================== */

/* 1. Global defaults for everyone (Mobile and Tablet) */
.services-scroll-wrapper {
    margin-bottom: 0 !important;
}



/* ==========================================================================
   ULTIMATE LAPTOP FIX: SERVICES CARD CLIPPING & LAYER HIERARCHY
   ========================================================================== */

/* 1. Force the Services section to be the highest layer on the page */
.services-section {
    position: relative !important;
}

/* 2. Fix the sticky container so it stops chopping the bottom of your cards */
.services-sticky-container {
    /* overflow: hidden chops all 4 sides. This new rule ONLY hides the 
       left/right scroll, allowing the bottom of your cards to stay fully visible! */
    overflow-x: clip !important;
    overflow-y: visible !important;

    /* Slightly reduces the top padding so the cards are perfectly centered 
       and clear the floating dock on shorter laptop screens */
    padding-top: clamp(20px, 4vh, 60px) !important;
}

/* 3. Keep the cards slightly more compact on medium laptop screens */
@media (min-width: 1025px) and (max-height: 800px) {
    .service-card-inner {
        min-height: 380px !important;
        padding: clamp(24px, 3vw, 32px) !important;
    }

    .card-icon {
        margin-bottom: 24px !important;
    }
}

/* 4. Ensure Portfolio respects the new hierarchy and slides UNDER the services */
.portfolio-section {
    position: relative !important;
    transform: translateZ(0) !important;
    background: #020203 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    box-shadow: none !important;
    margin-top: 0 !important;
}

@media (min-width: 1025px) {
    .portfolio-section {
        padding-top: clamp(20px, 4vh, 30px) !important;
    }

    .port-header {
        padding-top: 0 !important;
    }
}


/* ==========================================================================
   SPANGEA — MOBILE & TABLET CINEMATIC PATCH
   This strictly targets screens smaller than a desktop monitor (1023px and below)
   ========================================================================== */

@media (max-width: 1024px) {

    /* ─── 1. HERO SECTION CENTERING FIX ─── */
    .hero-content {
        padding: 0 5vw;
        justify-content: center !important;
        /* Forces perfect vertical centering */
        transform: none !important;
        /* Removes the vertical shift that pushed it off-center */
    }

    .hero-title {
        /* Dynamically scales the massive headline so words don't awkwardly break */
        font-size: clamp(2.2rem, 9vw, 3.5rem) !important;
        line-height: 1.1 !important;
    }


    /* ─── 2. SECTION 2: MOBILE/TABLET SCROLL LOCK RESTORATION ─── */
    .cinematic-positioning {
        /* Gives the section enough vertical scroll depth on mobile/tab 
           to let the time-loop and active layers lock and breathe */
        min-height: 160vh !important;
        position: relative !important;
        background: transparent !important;
        margin-bottom: -12vh !important;
    }

    .pos-sticky-container {
        /* RESTORE THE LOCK: This fixes the scrolling bug shown in the video */
        position: sticky !important;
        top: 52px !important;
        height: 100vh !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .pos-container {
        position: relative !important;
        height: 100% !important;
        display: flex !important;

        /* Stacks the image nicely on top, and text directly below it */
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: clamp(20px, 4vh, 40px) !important;

        padding-left: clamp(16px, 6vw, 36px) !important;
        padding-right: clamp(16px, 6vw, 36px) !important;
        padding-top: max(56px, env(safe-area-inset-top)) !important;
        padding-bottom: max(0px, env(safe-area-inset-bottom)-100px) !important;

    }


    /* ─── 3. TEXT OVERFLOW & ALIGNMENT FIX ─── */
    .pos-left {
        align-items: flex-start !important;
        /* Changed to left */
        text-align: left !important;
        /* Changed to left */
        padding-left: 4px;

    }

    .sticky-typo-wrapper {
        padding-top: 0 !important;
        align-items: flex-start !important;
        /* Perfectly centers the text block */
        width: 100%;
        margin-bottom: 0 !important;

        ;
    }

    /* Prevents the big text from blowing out the screen width */
    .typo-line {
        font-size: clamp(3rem, 14vw, 6rem) !important;

        margin: 0 !important;

    }


    .dynamic-word {
        /* Scales the biggest word ('ECOMMERCE') safely for an iPhone mini */
        font-size: clamp(2.2rem, 10vw, 4rem) !important;
        width: 100%;
        text-align: left;
        margin-left: 2px;
    }

    .typo-dynamic-mask {
        height: clamp(2.6rem, 9.5vw, 8rem) !important;
        justify-content: center !important;
    }

    .contact-cta-btn {
        align-self: flex-start !important;
        /* Centers the button under the text */
        margin-left: 4px !important;
        margin-top: 12px !important;
        font-size: clamp(0.4rem, 1vw, 0.8rem) !important;
        padding: 6px 12px 6px 16px;
        border-radius: 50px;
    }

    .contact-cta-btn::after {
        content: '→';
        font-size: 0.8rem;
        transition: transform var(--duration-fast) var(--ease-hover);
    }


    /* ─── 4. IMAGE CARD PROPORTION FIX ─── */
    .pos-right {
        margin-top: 0 !important;
        display: flex;
        justify-content: flex-start !important;
        width: 100%;

    }

    .visual-ecosystem {
        height: auto !important;
        padding-top: 0 !important;

        /* 1. Control the overall height right here! 
           4/5 is a slightly shorter rectangle. 
           Change to 1/1 if you want a perfect, shorter square */
        aspect-ratio: 1/ 1 !important;

        width: min(100%, 420px) !important;
    }

    .ecosystem-image {
        width: 100% !important;
        height: 100% !important;
        /* 2. Force it to match the parent height */
        position: absolute;
        aspect-ratio: auto !important;
        /* 3. Turn off the stubborn desktop ratio */
    }

    .eco-img-wrapper {
        width: 100% !important;
        height: 100% !important;
        /* Force image wrapper to match parent */
        aspect-ratio: auto !important;
        /* Turn off the stubborn desktop ratio */
        max-height: none !important;
    }

    .eco-img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;

        /* --- ADD THIS LINE --- */
        object-position: 50% 25%;
        ;
        /* Pushes the focus to the top of the image */

        opacity: 0;
        transform: none;
        transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: opacity;
    }

    .pos-left,
    .pos-right {
        flex: none !important;
        height: auto !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .brands-section {
        margin-bottom: -4vh;
    }

    /* --- SECTION 4: OUR SERVICES (MOBILE) --- */
    .services-sticky-container {
        /* Uses svh to prevent mobile browser URL bar glitching */
        height: 100vh !important;
        padding-top: 24px !important;
        /* Reduces top gap */
        justify-content: flex-start !important;


    }

    .services-header {
        padding: 0 5vw !important;
        margin-bottom: 24px !important;
        /* Tighter gap above cards */
    }

    .services-track {
        will-change: transform;
        transform: translateZ(0);
        padding: 0 5vw !important;
        gap: 16px !important;
        /* Keeps cards closer together */
    }

    .service-card {
        /* 82vw means the card takes up most of the screen, 
           but the next card slightly peeks in to hint at scrolling */
        width: 82vw !important;
    }

    .service-card-inner {
        min-height: 320px !important;
        /* Prevents cards from being too tall */
        padding: 24px !important;
        /* Tighter internal breathing room */
        border-radius: 20px !important;
    }

    .card-icon {
        font-size: 1.4rem !important;
        margin-bottom: 24px !important;
    }

    .service-card-inner h3 {
        font-size: 1.4rem !important;
        margin-bottom: 12px !important;
    }

    .service-card-inner p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin-bottom: 24px !important;
    }

    .service-tags {
        gap: 8px !important;
        /* Tighter gap between tags */
    }

    .service-tags span {
        font-size: 0.65rem !important;
        /* Smaller text for tags */
        padding: 6px 12px !important;
        /* Tighter pill shape */
    }



}

/* ==========================================================================
   SPANGEA — DEDICATED TABLET & IPAD OPTIMIZATION
   Strictly targets portrait tablets (768px wide up to 1023px wide)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

    /* ─── 1. HERO SECTION TABLET BALANCE ─── */
    .hero-content {
        padding: 0 10vw !important;
    }

    .hero-title {
        font-size: 4.8rem !important;
        /* Perfectly proportioned for iPad screens */
        line-height: 1.05 !important;
        max-width: 85vw !important;
    }

    .hero-description {
        font-size: 1.3rem !important;
        max-width: 550px !important;
    }


    /* ─── 2. SECTION 2: CONTAINER & GRID RHYTHM ─── */
    .pos-container {
        /* Generous left alignment padding matching high-end look */
        padding-left: 64px !important;
        padding-right: 64px !important;


        /* Sets a beautiful fixed window spacing below the tablet navbar */
        padding-top: 40px !important;

        /* Increases breathing room between the square image and text block */
        gap: 40px !important;
    }


    /* ─── 3. TYPOGRAPHY TABLET SCALING ─── */
    .typo-line {
        font-size: 5.4rem !important;
        /* Bold, upscale presentation */
        line-height: 0.85 !important;
    }

    .dynamic-word {
        font-size: 5rem !important;
        /* Massive focal point */
        line-height: 0.85 !important;
    }

    .typo-dynamic-mask {
        /* Slightly taller window to perfectly clear the animated text */
        height: 4.2rem !important;
    }

    .contact-cta-btn {
        margin-top: 20px !important;
        padding: 14px 28px 14px 32px !important;
        /* Slightly larger premium touch target */
        font-size: 0.75rem !important;
    }


    /* ─── 4. IMAGE CARD TABLET PROPORTIONS ─── */
    .visual-ecosystem {
        /* Scales the 1:1 square card up so it doesn't look tiny on a wide screen */
        width: 680px !important;
        aspect-ratio: 1 / 1 !important;
        justify-content: flex-start;
        height: auto !important;
        max-height: 48vh !important;
    }

    /* --- SECTION 3: TABLETS & IPADS --- */

    .brands-section {
        padding-top: 40px !important;
        padding-bottom: 100px !important;
    }

    .cinematic-chapter-break {
        margin-top: 50px !important;
        width: 85% !important;
        background: linear-gradient(to right, transparent, rgba(2, 2, 3, 0.2), transparent) !important;
    }

    #scrolling-content-layer.scrolled-dark .cinematic-chapter-break {
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.25), transparent) !important;
    }

    .brands-headline {
        font-size: 4.5rem !important;
    }

    /* --- SECTION 4: OUR SERVICES (TABLET) --- */
    .services-header {
        margin-bottom: 40px !important;
    }

    .services-track {
        will-change: transform;
        transform: translateZ(0);
        gap: 24px !important;
    }

    .service-card {
        width: 380px !important;
        /* Perfect mid-size for tablets */
    }

    .service-card-inner {
        min-height: 380px !important;
        padding: 32px !important;
    }

    .service-card-inner h3 {
        font-size: 1.8rem !important;
    }
}

/* ==========================================================================
   SPANGEA — LANDSCAPE TABLET & SMALL LAPTOP OVERRIDE
   Perfect for Nest Hub, Nest Hub Max, iPad Landscape, and 13" Laptops
   (1024px to 1440px wide)
   ========================================================================== */

@media (min-width: 1025px) and (max-width: 1440px) {

    /* 1. Container Balance & Spacing */
    .pos-container {

        padding-left: clamp(32px, 5vw, 64px) !important;
        padding-right: clamp(32px, 5vw, 64px) !important;

        /* Ensures the container respects the short screen height */
        height: calc(100vh - 80px) !important;
        margin-left: 18px;
    }

    /* 2. Scale Typography to prevent vertical cramping */
    .typo-line {
        font-size: clamp(6rem, 9vw, 9.5rem) !important;
        line-height: 0.85 !important;
    }

    .dynamic-word {
        font-size: clamp(4.5rem, 5.8vw, 5.5rem) !important;
        line-height: 0.85 !important;
    }

    .typo-dynamic-mask {
        /* Shrinks the mask window to tightly wrap the scaled-down text */
        height: clamp(4rem, 6vw, 5.2rem) !important;
    }

    /* 3. FIX: Tuck the Contact button cleanly under the text */
    .contact-cta-btn {
        align-self: flex-end !important;
        /* Pulls it from the right to the left */
        margin-right: 18px !important;
        margin-top: 24px !important;

    }

    /* 4. Prevent the image card from hitting the top/bottom of short screens */
    .visual-ecosystem {
        max-width: 45vw !important;
        align-self: flex-start;
        height: auto !important;
        max-height: 65vh !important;
        /* Keeps it perfectly framed vertically */
        aspect-ratio: 3 / 4 !important;
    }

    /* --- SECTION 3: SMALL LAPTOPS & SMART DISPLAYS --- */
    .brands-section {
        padding: 12vh 0 !important;
        /* Uses viewport height so it doesn't cramp short screens */
    }

    .brands-headline {
        font-size: 1.5rem !important;
    }
}

/* ==========================================================================
   SPANGEA — STRICT MOBILE PHONE HERO FIX (Prevents Text Cutoff)
   ========================================================================== */

@media (max-width: 767px) {
    .hero-content {
        /* Gives the text the maximum possible width on a small screen */
        padding: 0 4vw !important;
        justify-content: center !important;
    }

    .hero-title {
        /* THE FIX: Lowered the minimum size to 1.2rem and relies on 8.5vw. 
           This guarantees "REMEMBERED" will seamlessly shrink to fit ANY phone width. */
        font-size: clamp(1.2rem, 8.5vw, 2.8rem) !important;
        line-height: 1.1 !important;
        letter-spacing: -0.02em !important;
        padding: 0 !important;
        width: 100% !important;

        /* Optional: Centers the text perfectly */
        text-align: center !important;
    }

    .hero-description {
        /* Refines the sub-text so it balances cleanly under the new title size */
        font-size: 0.95rem !important;
        margin-top: 16px !important;
        padding: 0 10px !important;
        line-height: 1.5 !important;
    }

    /* --- SLEEK PREMIUM HERO SUB-LABEL --- */
    .hero-label-wrapper {
        /* Makes the glass pill thinner and more delicate */
        padding: 4px 12px !important;
        gap: 8px !important;
        margin-bottom: 2.5vh !important;
    }

    .hero-sublabel {
        /* Scales perfectly on any mobile width without ever looking clunky */
        font-size: clamp(0.45rem, 2.3vw, 0.55rem) !important;
        /* Keeps the wide, luxurious tracking but controls the scale */
        letter-spacing: 0.18em !important;
        font-weight: 500 !important;
    }

    .status-dot {
        /* Shrinks the glowing dot slightly to match the new, refined text size */
        width: 5px !important;
        height: 5px !important;
    }

    /* --- SECTION 3: MOBILE PHONES --- */
    /* 1. Tighten the space below the line */
    .brands-section {
        padding-top: 20px !important;
        padding-bottom: 60px !important;
    }

    /* 2. Tighten the space above the line & boost visibility */
    .cinematic-chapter-break {
        margin-top: 0px !important;
        width: 90% !important;
        /* Makes the line a bit wider on phones */
        /* Boosts the dark line contrast for light mode */
        background: linear-gradient(to right, transparent, rgba(2, 2, 3, 0.25), transparent) !important;
    }

    /* 3. Boost the glowing white line contrast for dark mode */
    #scrolling-content-layer.scrolled-dark .cinematic-chapter-break {
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.35), transparent) !important;
    }

    .brands-headline {
        font-size: clamp(2.2rem, 8vw, 3rem) !important;
        line-height: 1 !important;
    }

    /* ======================================================= */
    /* --- SECTION 5: PORTFOLIO (MOBILE VERTICAL SCROLL) ---   */
    /* ======================================================= */

    /* 1. Turn off the massive 400vh scrolling space */
    .port-scroll-wrapper {
        height: auto !important;
    }

    /* 2. Turn off sticky positioning so the section flows naturally */
    .port-sticky-container {
        will-change: transform;
        transform: translateZ(0);
        position: relative !important;
        height: auto !important;
        padding-top: 20px !important;
        padding-bottom: 80px !important;
        overflow: visible !important;
    }

    /* 3. Stack the cards vertically */
    .port-track {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        /* Beautiful breathing room between stacked cards */
        width: 100% !important;
        padding: 0 5vw !important;
        transform: none !important;
        /* Stops any JS interference */
        will-change: auto !important;
    }

    /* 4. FIX THE HEIGHT PROPORTIONS */
    .port-card {
        width: 100% !important;
        max-width: 320px !important;
        /* Use min-height instead of fixed height to prevent overflow */
        min-height: 400px !important;
        height: auto !important;
    }

    .port-card-inner {
        overflow: hidden !important;
    }

    .port-image-wrap {
        opacity: 1 !important;
        transform: scale(1) !important;
    }
}

/* ==========================================================================
   FLOATING DOCK & MENU Z-INDEX FIX (Prevents overlapping)
   ========================================================================== */

/* 1. Elevate the Floating Dock above the Services Section (which is at 60) */
.floating-dock {
    z-index: 90 !important;
}

/* 2. Elevate the Cinematic Menu so it always opens on top of everything */
.menu-overlay-panel {
    z-index: 100 !important;
}

/* 3. Ensure the global top navbar also stays on top if needed */
.g-navbar {
    z-index: 80 !important;
}


/* ==========================================================================
   PROJECT DETAIL MODAL (CINEMATIC OVERLAY)
   ========================================================================== */

/* The Background Blur Overlay */
.project-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 150 !important;
    /* Forces it above EVERYTHING (Dock, Nav, Menu) */
    background: rgba(2, 2, 3, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(16px, 3vw, 40px);
    /* 2. Push it down by exactly 100px to safely clear the Spangea Navbar */
    padding-top: clamp(90px, 12vh, 120px) !important;

    /* 3. Give it beautiful breathing room at the bottom of the screen */
    padding-bottom: clamp(24px, 4vh, 40px) !important;

    /* Animation Engine */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* The Main Glass Container */
.project-modal-content {
    position: relative;
    width: 100%;
    max-width: 1400px;
    height: 100% !important;
    max-height: calc(100vh - 140px) !important;
    background: #060608;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.1);
    display: flex;
    overflow: hidden;

    /* Slide & Scale entrance animation */
    transform: translateY(40px) scale(0.98);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-modal-overlay.active .project-modal-content {
    transform: translateY(0) scale(1);
}

/* Left Side: Image */
.modal-left-visual {
    flex: 1;
    position: relative;
    background: #020203;
    overflow: hidden;
    display: none;
    /* Hidden on phones, visible on desktop */
}

@media (min-width: 1025px) {
    .modal-left-visual {
        display: block;
    }
}

.modal-left-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.modal-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 50%, #060608 100%);
}

/* Right Side: Data */
.modal-right-data {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: clamp(32px, 5vw, 64px);
    overflow-y: auto;
}

/* Meta Data List (Like your reference image, but dark and premium) */
.modal-meta-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 48px;
    margin-bottom: 48px;
}

.meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: background 0.3s ease;
}

.meta-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

.meta-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
}

.meta-value {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 400;
    color: #ffffff;
    text-align: right;
}

/* Close Button */
.modal-close-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s ease;
}

.modal-close-btn:hover {
    background: #ffffff;
    transform: rotate(90deg);
}

.modal-close-btn:hover .close-line {
    background: #000000;
}

/* Mobile & Tablet Overrides */
@media (max-width: 1024px) {
    .project-modal-content {
        flex-direction: column;
        max-height: 90vh;
        border-radius: 24px;
    }

    .meta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 16px;
    }

    .meta-value {
        text-align: left;
    }
}

/* ==========================================================================
   MODAL MOBILE & TABLET REDESIGN (PREMIUM CINEMATIC STACK)
   ========================================================================== */

@media (max-width: 1024px) {

    /* 1. Structure the glass box to stack vertically and allow scrolling */
    .project-modal-content {
        flex-direction: column !important;
        height: auto !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        /* Lets users scroll down the card */
        border-radius: 16px !important;
    }

    /* 2. BRING BACK THE IMAGE: Make it a stunning cinematic header */
    .modal-left-visual {
        display: block !important;
        width: 100% !important;
        height: 35vh !important;
        /* Cinematic widescreen crop */
        min-height: 240px !important;
        flex: none !important;
        /* Stops it from shrinking */
    }

    /* 3. The Magic Fade: Change the shadow so it fades DOWN into the text */
    .modal-image-overlay {
        background: linear-gradient(to bottom, transparent 30%, #060608 100%) !important;
    }

    /* 4. Adjust the Text Area so it flows naturally below the image */
    .modal-right-data {
        padding: 0px 24px 32px 24px !important;
        overflow-y: visible !important;
    }

    /* 5. Upgrade the Close Button to a premium floating glass circle */
    .modal-close-btn {
        top: 16px !important;
        right: 16px !important;
        background: rgba(0, 0, 0, 0.4) !important;
        /* Dark glass to pop against bright images */
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        /* Lock it to the screen so it doesn't scroll away */
        position: sticky !important;
        margin-left: auto;
        margin-bottom: -48px;
        /* Pulls it over the image */
        z-index: 100 !important;
    }

    /* 6. Refine the Data Rows for a sleek mobile reading experience */
    .modal-meta-list {
        margin-top: 32px !important;
        margin-bottom: 32px !important;
        gap: 8px !important;
    }

    .meta-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 14px 16px !important;
        gap: 6px !important;
        background: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(255, 255, 255, 0.04) !important;
    }

    .meta-value {
        text-align: left !important;
        font-size: 0.95rem !important;
        font-weight: 500 !important;
    }

    /* 7. Center the Live Website Button on mobile */
    #modal-live-link {
        align-self: stretch !important;
        justify-content: center !important;
        text-align: center !important;
        margin-right: 0 !important;
    }
}

/* ==========================================================================
   SECTION 6: STEP BY STEP PROCESS (Massive Horizontal Typography)
   ========================================================================== */

.process-section {
    position: relative;
    width: 100%;
    background: var(--color-black-deep);
    color: #ffffff;
    z-index: 10;
}

/* The vertical runway that allows the user to scroll for a long time */
.process-scroll-wrapper {
    height: 400vh;
    position: relative;
}

/* The camera that locks onto the screen */
.process-sticky-container {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* --- Top Header Area --- */
.process-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: clamp(60px, 11vh, 120px);
    width: 100%;
}

.process-header-left {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Styling the title specifically to match the reference's lowercase look */
.process-title {
    font-family: var(--font-body) !important;
    /* Uses the clean Satoshi font */
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: -0.03em !important;
    font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
}

.process-btn {
    align-self: flex-start !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
}

.process-header-right {
    max-width: 320px;
    padding-top: 12px;
}

.process-header-right p {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.4);
}

/* --- Bottom Massive Typography Track --- */
.process-track-container {
    width: 100%;
    padding-bottom: clamp(110px, 17vh, 220px);
    padding-left: 8vw;
}

.process-track {
    display: flex;
    align-items: flex-end;
    /* Aligns words to the bottom */
    gap: clamp(80px, 10vw, 180px);
    padding: 0 5vw;
    width: max-content;
    will-change: transform;
}

.process-step {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: opacity 0.4s ease;
}

/* Cinematic Hover Effect: Dims other words when you hover the track */
.process-track:hover .process-step {
    opacity: 0.25;
}

.process-track .process-step:hover {
    opacity: 1;
}

.step-num {
    font-family: var(--font-body);
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    font-weight: 100;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: -6px;
    /* Pulls the number tightly against the word */
    margin-left: 4px;
}

.step-name {
    font-family: var(--font-body);
    font-size: clamp(2rem, 6.2vw, 5rem);
    /* MASSIVE text size */
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: #ffffff;
    white-space: nowrap;
}

/* --- Mobile & Tablet Overrides --- */
@media (max-width: 1024px) {
    .process-header {
        flex-direction: column;
        gap: 40px;
        padding-top: 120px;
    }


    .process-header-right {
        max-width: 100%;
    }

    .step-name {
        font-size: clamp(4.5rem, 15vw, 8rem);
    }

}

/* ==========================================================================
   PROCESS SECTION: SCROLL PROGRESS LINE
   ========================================================================== */

/* 1. Ensure the container holds the line correctly */
.process-track-container {
    position: relative !important;
}

/* 2. The faint background track line */
.process-progress-bg {
    position: absolute;
    /* Positions it perfectly below the massive text */
    bottom: -32px;
    left: 32px;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    margin-left: 32px;
}

/* 3. The solid white fill line that grows */
.process-progress-fill {
    height: 100%;
    width: 100%;
    background: #ffffff;

    /* Starts the line from the left edge at 0% width */
    transform-origin: left;
    transform: scaleX(0);

    /* Hardware acceleration for ultra-smooth buttery scrolling */
    will-change: transform;
}

/* ==========================================================================
   PORTFOLIO TO PROCESS SECTION FIX (Clipping & Spacing)
   ========================================================================== */

/* 1. Stop the container from chopping the bottom of the portfolio cards! */
.port-sticky-container {
    will-change: transform;
    transform: translateZ(0);
    overflow-x: clip !important;
    overflow-y: visible !important;
}

/* 2. Create a massive, premium gap between Portfolio and Step-by-Step */
.port-scroll-wrapper {
    margin-bottom: clamp(120px, 20vh, 240px) !important;
}

/* 3. Safely scale the cards down ONLY on short laptop screens 
      so they fit perfectly between the navbar and the dock */
@media (min-width: 1025px) and (max-height: 800px) {
    .port-card {
        min-height: 420px !important;
    }
}

/* ==========================================================================
   GRAY BOX FIX (Margin Collapse Resolution)
   ========================================================================== */

/* 1. Stop the margin from leaking out of the section and causing the gray gap */
.port-scroll-wrapper {
    margin-bottom: 0 !important;
}

/* 2. Add the massive gap as PADDING to the section itself instead. 
      This forces the deep black background to cover the entire empty space! */
.portfolio-section {
    padding-bottom: clamp(120px, 20vh, 240px) !important;
}

/* ==========================================================================
   REVIEWS SECTION (CINEMATIC STACKING CARDS)
   ========================================================================== */

.reviews-section {
    position: relative;
    width: 100%;
    background: var(--color-black-deep);
    z-index: 10;
    padding-top: clamp(80px, 10vh, 120px);
    /* Massive bottom padding ensures the last card has room to scroll and stick */
    padding-bottom: clamp(180px, 28vh, 300px);

}

.reviews-stack {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 60px;
    margin-bottom: 64px;
}

/* Base Card Styling */
.review-card {
    position: sticky;
    width: 100%;
    max-width: 680px;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: clamp(20px, 3vw, 32px);

    /* Adds a deep drop shadow so cards cast shadows on the cards below them */
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.6),
        inset 0 1px 1px rgba(255, 255, 255, 0.06);

    display: flex;
    flex-direction: column;
    gap: 24px;
    transform-origin: top center;
    will-change: transform;
}

/* The Magic Stacking Math (Offsets & Rotations) */
.card-1 {
    top: 15vh;
    /* We added var(--scroll-shift) so JS can push it left smoothly! */
    transform: translateX(var(--scroll-shift, 0px)) rotate(-1.5deg);
    z-index: 1;
}

.card-2 {
    top: 18vh;
    margin-top: 50vh;
    transform: translateX(var(--scroll-shift, 0px)) rotate(1deg);
    z-index: 2;
}

.card-3 {
    top: 21vh;
    margin-top: 50vh;
    transform: translateX(var(--scroll-shift, 0px)) rotate(-0.5deg);
    z-index: 3;
}

.card-4 {
    top: 24vh;
    margin-top: 50vh;
    transform: translateX(var(--scroll-shift, 0px)) rotate(1.5deg);
    z-index: 4;
}

/* Card Content Typography */


/* Authentic Review Stars */
.stars {
    display: flex;
    gap: 4px;
    /* Tiny gap between stars, just like Google */
    align-items: center;
}

.star-icon {
    width: 22px;
    height: 22px;
    /* This is the EXACT official Google Review Gold color! */
    fill: #fbbc04;

    /* Optional: Adds a tiny glow to make them pop against your dark background */
    filter: drop-shadow(0px 2px 6px rgba(251, 188, 4, 0.2));
}


.review-heading {
    font-family: var(--font-hero);
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: #000000;
}

.review-text {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.6;
    color: rgba(61, 60, 60, 0.65);
    font-weight: 300;

}

/* Author Section */
.review-author {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding-top: 24px;
    border-top: 1px solid rgba(2, 2, 2, 0.05);
}


/* Premium Circular Author Image */
.author-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;

    /* THE MAGIC TRICK: This forces horizontal or rectangular photos 
       to zoom and crop perfectly into the circle without squishing the face! */
    object-fit: cover;

    /* Keeps that premium subtle border */
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #08080a;
    /* Fills the background in case of transparent PNGs */

}

.author-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.author-name {
    font-family: 'Arial';

    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #000000;

}

.author-role {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .review-card {
        padding: 28px 24px;
        width: 90vw;

    }

    /* Mobile needs the scroll-shift variable added to it as well! */
    .card-1 {
        top: 10vh;
        transform: translateX(var(--scroll-shift, 0px)) rotate(-1deg);
    }

    .card-2 {
        top: 12vh;
        transform: translateX(var(--scroll-shift, 0px)) rotate(1deg);
        margin-top: 40vh;
    }

    .card-3 {
        top: 14vh;
        transform: translateX(var(--scroll-shift, 0px)) rotate(-0.5deg);
        margin-top: 40vh;
    }

    .card-4 {
        top: 16vh;
        transform: translateX(var(--scroll-shift, 0px)) rotate(1deg);
        margin-top: 40vh;
    }
}



/* ==========================================================================
   MOBILE STRICT OPTIMIZATION: TRUSTED BRANDS SECTION
   ========================================================================== */

@media (max-width: 767px) {

    /* 1. Perfect the Header Text & Line Alignment */
    .editorial-brands-header {
        padding: 0 5vw !important;
        margin-bottom: 30px !important;
        /* Perfect space between text and logos */
        gap: 8px !important;
        /* Space between the line and the text */
    }

    .editorial-title {
        font-size: 0.48rem !important;
        /* Slightly smaller, more elegant for phones */
        text-align: center !important;
        /* Forces it to perfectly align with your site margins */
        letter-spacing: 0.12em !important;
        opacity: 0.6 !important;
    }

    /* 2. Scale down the Moving Logos */
    .brand-logo {
        font-size: 2.2rem !important;
        /* Prevents logos from being overwhelmingly huge */
        letter-spacing: -0.02em !important;
    }

    /* 3. Tighten the horizontal gaps between the logos */
    .marquee-content {
        gap: 40px !important;
        /* Keeps the logos closer together on small screens */
        padding-right: 40px !important;
        /* Ensures the seamless loop doesn't skip */
    }

    /* 4. Fix the overall Section Padding */
    .brands-section {
        padding-top: 16px !important;
        /* Breathing room below the image card */
        padding-bottom: 55px !important;
        /* Breathing room before "WE ENGINEER" */
    }

    .brands-container {


        gap: clamp(1px, 0.3vw, 4px) !important;
        ;
    }
}

/* ==========================================================================
   ULTIMATE SERVICES OPTIMIZATION: CINEMATIC SPLIT-SCREEN (DESKTOP)
   ========================================================================== */

@media (min-width: 1025px) {

    /* 1. Switch from Stacked (Top/Bottom) to Split (Left/Right) */
    .services-sticky-container {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding-top: 64px !important;
        padding-left: clamp(24px, 5vw, 80px) !important;
        gap: 7vw !important;
        /* Creates a beautiful gap between text and cards */
    }

    /* 2. Lock the Header to the Left Side */
    .services-header {
        flex: 0 0 32% !important;
        /* Text takes up exactly 32% of the screen */
        padding: 0 !important;
        margin-bottom: 0 !important;
        z-index: 10;
    }

    /* 3. Scale the typography to fit the new left column perfectly */
    .services-header h2,
    .services-title {
        font-size: clamp(3.5rem, 5vw, 5.5rem) !important;
        line-height: 0.9 !important;
        margin-top: 4px !important;
    }

    /* 4. Optimize the Cards for Widescreen (More vertical, elegant proportions) */
    .services-track {
        will-change: transform;
        transform: translateZ(0);
        padding-left: 0 !important;
        align-items: center !important;
    }

    .service-card {
        /* Makes them narrower and taller, like a premium movie poster */
        width: clamp(390px, 27vw, 450px) !important;
        max-height: 600px !important;
    }

    .service-card-inner {
        height: 100% !important;
        min-height: 100% !important;
        justify-content: space-between !important;
    }

    /* 1. Force the massive text to the absolute BACK */
    .services-header {
        position: relative !important;
    }

    /* 2. Force the scrolling cards to the absolute FRONT */
    .services-track {
        will-change: transform;
        transform: translateZ(0);
        position: relative !important;
    }

    /* 3. The Cinematic Glass Card Styling */
    .service-card-inner {
        /* A deep, premium frosted glass tint */
        background: rgba(18, 18, 22, 0.75) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;

        /* Casts a heavy shadow to the left, separating the cards from the text */
        box-shadow: -30px 0 80px rgba(0, 0, 0, 0.8) !important;

        /* Prevents anything from spilling out of the card */
        overflow: hidden !important;

        /* Cinematic vertical proportions */
        height: 48vh !important;
        max-height: 600px !important;
        min-height: 400px !important;
        padding: clamp(16px, 2vw, 24px) !important;
    }

    /* 4. Elegant Text Control (The Overflow Fix) */
    .service-card-inner p {
        /* This magic trick limits the text to EXACTLY 4 lines. 
           If it's longer, it adds "..." and prevents it from breaking the card! */
        display: -webkit-box !important;
        -webkit-line-clamp: 4 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;

        /* Pushes the tags neatly to the absolute bottom of the card */
        margin-bottom: auto !important;
        padding-bottom: 26px !important;
    }

    .pos-sticky-container {
        /* Removes the harsh "scissors" effect so the shadow can bleed naturally */
        overflow-y: visible !important;

        /* Keeps the left/right sides locked so it doesn't cause horizontal scroll bugs */
        overflow-x: clip !important;
    }
}

/* ==========================================================================
   SERVICES: FLAWLESS 3-LINE RECTANGLE
   ========================================================================== */

/* 1. The Master Container */
.services-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    /* THE MASTER SCALE: Change this clamp to make the entire block bigger or smaller */
    font-size: clamp(2rem, 3.5vw, 3.8rem) !important;

    font-family: var(--font-hero) !important;
    text-transform: uppercase !important;
    margin-top: 24px !important;
    width: max-content !important;
}

/* 2. The Unbreakable Rule */
.services-title span {
    display: block !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    /* Cinematic, ultra-tight vertical stacking */
}

/* 3. The Golden Ratio Math (Locks the right edges together) */

/* "YOUR VISION" (11 characters) */
.services-title .line-1 {
    font-size: 0.905em !important;
    letter-spacing: 0.02em !important;
    /* Hides the solid color so we can build the glass */
    color: transparent !important;

    /* 1. The Glass Edge: Creates a subtle, semi-transparent outline */
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15) !important;

    /* 2. The Frosted Reflection: A faint diagonal shine across the text */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;

    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}

/* "OUR DESIGN" (10 characters) */
.services-title .line-2 {
    font-size: 0.944em !important;
    /* Dialed down significantly so it doesn't overflow! */
    letter-spacing: 0.02em !important;
    /* Hides the solid color so we can build the glass */
    color: transparent !important;

    /* 1. The Glass Edge: Creates a subtle, semi-transparent outline */
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15) !important;

    /* 2. The Frosted Reflection: A faint diagonal shine across the text */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;

    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* "MASTERPIECE." (12 characters - acts as the 1em baseline) */
.services-title .line-3 {
    font-size: 0.85em !important;
    letter-spacing: 0em !important;
}

.services-title:hover .text-dim {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* 4. Mobile Override */
@media (max-width: 1024px) {
    .services-title {
        /* Makes the overall rectangle slightly wider on phones */
        font-size: clamp(2.5rem, 8vw, 4.5rem) !important;
    }
}



/* ==========================================================================
   SPANGEA — ULTIMATE MOBILE & TABLET FIX: OUR SERVICES
   Fixes the scroll jump bug and cinematic card sizing
   ========================================================================== */

/* --- MOBILE PHONES (max-width: 767px) --- */
@media (max-width: 767px) {

    /* 1. Reset the wrapper positioning so the JS math starts exactly at Card 1 */
    .services-section {
        margin-top: 2vh !important;
        /* Restores breathing room, fixing the negative margin jump */
        padding-top: 0 !important;
    }

    .services-scroll-wrapper {
        height: 340vh !important;
        /* Slightly shorter scroll duration for a snappier mobile feel */
        margin-bottom: 0 !important;
    }

    .services-sticky-container {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        padding-top: max(32px, env(safe-area-inset-top)) !important;
        padding-bottom: 40px !important;
        ;
    }

    .services-header {
        padding: 0 5vw !important;
        margin-bottom: 20px !important;
        width: 100% !important;
    }

    .hero-label-wrapper {
        /* Forces the capsule to sit tightly against the text */
        margin-bottom: 0px !important;
    }

    .services-title {
        font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
    }

    .services-track {
        will-change: transform;
        transform: translateZ(0);
        padding-left: 5vw !important;
        padding-right: 5vw !important;
        /* Adds a stop buffer at the end */
        gap: 16px !important;
        align-items: stretch !important;
        margin-left: 0 !important;
        align-self: flex-start !important;
    }

    /* 2. The Cinematic Mobile Card Architecture */
    .service-card {
        width: 75.1vw !important;
        /* Slightly narrower so the next card visually peeks onto the screen */
        max-width: 380px !important;
        height: auto !important;
    }

    .service-card-inner {
        /* Makes the card sleeker and entirely stops massive vertical stretching */
        min-height: auto !important;
        height: 100% !important;
        padding: 24px 20px !important;
        border-radius: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    /* 3. Refined Mobile Typography */
    .card-icon {
        font-size: 1.2rem !important;
        margin-bottom: 12px !important;
    }

    .service-card-inner h3 {
        font-size: 1.2rem !important;
        margin-bottom: 8px !important;
    }

    .service-card-inner p {
        font-size: 0.85rem !important;
        line-height: 1.45 !important;
        margin-bottom: 20px !important;
        color: rgba(255, 255, 255, 0.7) !important;

        /* MAGIC TRICK: Limits text to exactly 4 lines to preserve perfect card height */
        display: -webkit-box !important;
        -webkit-line-clamp: 4 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .service-tags {
        margin-top: auto !important;
        /* Pushes tags flush to the absolute bottom */
        gap: 10px 7px !important;
    }

    .service-tags span {
        font-size: 0.45rem !important;
        padding: 4px 6px !important;
        margin-bottom: 0 !important;
    }

    .balance-logo {


        /* 2. THE FIX: Pulls the neighboring logos closer, destroying the invisible walls! */
        margin-left: 16px !important;
        margin-right: 16px !important;
    }
}

/* --- TABLETS (768px to 1024px) --- */
@media (max-width: 1024px) {

    .services-section {
        margin-top: 4vh !important;
    }

    .services-scroll-wrapper {
        height: 360vh !important;
    }

    .services-sticky-container {
        height: 70vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        padding-top: max(40px, env(safe-area-inset-top)) !important;
    }

    .service-card {
        width: 340px !important;
        height: auto !important;
    }

    .service-card-inner {
        min-height: auto !important;
        height: 100% !important;
        padding: 32px !important;
        border-radius: 20px !important;
        justify-content: flex-start !important;
    }

    .service-card-inner p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin-bottom: 24px !important;

        /* Limits text to exactly 4 lines to preserve height */
        display: -webkit-box !important;
        -webkit-line-clamp: 4 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .service-tags {
        margin-top: auto !important;
    }
}

/* ==========================================================================
   ULTIMATE PORTFOLIO FIX: GAPS, CLIPPING, AND GREY BOXES
   ========================================================================== */

/* 1. FIX THE UPPER GAP (Removes the massive 260px void) */


/* 2. FIX THE "CENTER CUT" SCROLLING EFFECT */
/* Forces the section to break out of any invisible boxes and stretch to the true edge of your monitor */
.portfolio-section {
    width: 110vw !important;
    max-width: 110vw !important;
    margin-left: calc(-55vw + 55%) !important;
    overflow: visible !important;
}

/* Keeps the text perfectly aligned with your layout even though the section is now full-screen */
.port-header {
    padding-left: clamp(24px, 5vw, 80px) !important;
    padding-right: clamp(24px, 5vw, 80px) !important;
    margin-bottom: clamp(30px, 5vh, 60px);
    gap: 16px !important;
}

.port-sticky-container {
    will-change: transform;
    transform: translateZ(0);
    width: 100vw !important;
    max-width: 100vw !important;
    top: -8vw;
    /* Keeps the cards flowing safely to the physical edge of the monitor without cutting them early! */
    overflow-x: clip !important;
    overflow-y: visible !important;
    padding-top: 8px;
}

/* 3. FIX THE BOTTOM GREY BOX (The Margin Leak) */
/* Crushes the transparent margins to 0 so the grey background stops showing through */
.port-scroll-wrapper {
    margin-bottom: 0 !important;
}

.portfolio-section {
    margin-bottom: 0 !important;
    /* Uses solid black padding instead of transparent margins to push the next section away */
    padding-bottom: clamp(100px, 15vh, 180px) !important;
    background: var(--color-black-deep) !important;
}

.process-section {
    margin-top: 0 !important;
}

/* ==========================================================================
   MOBILE ONLY: CRUSH PORTFOLIO TOP & BOTTOM GAPS
   ========================================================================== */

@media (max-width: 767px) {

    /* 1. TOP GAP: Space above "PROVEN RESULTS" */
    .portfolio-section {
        /* Reduces the massive desktop padding to a tight mobile gap */
        padding-top: 60px !important;

        /* Kills excess bottom space so it hugs the next section */
        padding-bottom: 0px !important;
    }

    /* 2. CARD BOTTOM GAP: Space below the last 2025 card */
    .port-sticky-container {
        will-change: transform;
        transform: translateZ(0);
        /* Dialed down from 80px to pull the sections closer */
        padding-bottom: 20px !important;
    }

    /* 3. SEAM GAP: Space above "CLIENT FEEDBACK" */
    .reviews-section {
        /* Overrides the massive 100px+ clamp value */
        padding-top: 60px !important;
    }

    /* ==========================================================================
   MOBILE ONLY: PROCESS SECTION DOCK COLLISION & PREMIUM FIX
   ========================================================================== */



    /* 1. THE DOCK COLLISION FIX */
    .process-sticky-container {
        /* This is the magic lock! It forces the bottom of the container to 
           stop 140px early, pushing the massive text completely above your dock! */
        padding-bottom: 120px !important;
        top: 32vw;

        /* Uses 'svh' to account for the Safari/Chrome mobile address bar popping up */
        height: 100vh !important;
    }


    /* 2. THE TOP TYPOGRAPHY & SPACING FIX */
    .process-header {
        padding-top: 24px !important;
        /* Perfect breathing room from the top */
        gap: 24px !important;
        /* Pulls the paragraph closer to the button */
    }

    .process-header-left {
        gap: 20px !important;
    }

    .process-title {
        /* A tight, cinematic font size for the headline */
        font-size: clamp(2.2rem, 8vw, 3rem) !important;
        line-height: 1.05 !important;
        max-width: 95% !important;
    }

    .process-header-right p {
        /* Dims and scales the paragraph so it doesn't fight the headline */
        font-size: 0.55rem !important;
        line-height: 1.5 !important;
        color: rgba(255, 255, 255, 0.5) !important;
        max-width: 70% !important;
    }

    /* 3. THE MASSIVE SCROLLING TEXT FIX */
    .process-track-container {
        /* Removes desktop padding so our new container padding controls the gap */
        padding-bottom: 28vw !important;
        padding-left: 16vw !important;

    }

    .process-track {
        /* Brings the massive words slightly closer together for mobile swiping */
        gap: 60px !important;
    }

    .step-name {
        /* Uses Viewport Width (vw) so the text perfectly hugs the phone screen! */
        font-size: 12vw !important;
        letter-spacing: -0.02em !important;



    }


    .step-num {
        font-size: 1rem !important;
        margin-bottom: 0px !important;
        margin-left: 4px !important;

    }

    /* 4. THE SCROLL LINE FIX */
    .process-progress-bg {
        /* Ensures the white line doesn't crash into the text */
        bottom: -24px !important;
        left: -8px !important;
        padding-left: 0 !important;
    }

    /* ==========================================================================
   MOBILE SPECIFIC: RESTORE SLIDE-UP & IMAGE CROSSFADE
   ========================================================================== */



    /* 1. THE REAL-DEVICE HARDWARE ACCELERATOR FIX */
    #scrolling-content-layer .dynamic-word,
    #scrolling-content-layer .dynamic-word.active,
    #scrolling-content-layer .dynamic-word.exiting {

        /* Forces the real phone's Graphics Card (GPU) to take over the animation */
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        -webkit-perspective: 1000;
        perspective: 1000;

        /* Uses -webkit- prefixes because real iOS Safari is very stubborn */
        -webkit-transition: color 0.5s ease-out,
            -webkit-transform 0.9s cubic-bezier(0.76, 0, 0.24, 1),
            opacity 0.9s cubic-bezier(0.76, 0, 0.24, 1) !important;

        transition: color 0.5s ease-out,
            transform 0.9s cubic-bezier(0.76, 0, 0.24, 1),
            opacity 0.9s cubic-bezier(0.76, 0, 0.24, 1) !important;

        will-change: transform, opacity !important;
    }

    /* 2. Restores the flawless 0.9s crossfade for the images */
    #scrolling-content-layer .ecosystem-image,
    #scrolling-content-layer .ecosystem-image.active {
        transition: all 0.9s cubic-bezier(0.76, 0, 0.24, 1),
            background 0.9s ease-in-out,
            border-color 0.9s ease-in-out,
            box-shadow 0.9s ease-in-out !important;
    }

    #scrolling-content-layer .eco-img-wrapper img {
        transition: opacity 0.9s cubic-bezier(0.76, 0, 0.24, 1) !important;
    }
}

/* ==========================================================================
   MOBILE SCROLL PHYSICS & NATIVE MOMENTUM FIX (Zero Design Changes)
   ========================================================================== */

@media (max-width: 767px) {

    /* 1. THE NATIVE MOMENTUM ENGINE */
    html,
    body {
        /* Forces iOS to use its native, buttery-smooth momentum scrolling */
        -webkit-overflow-scrolling: touch !important;

        /* THE FIX: Changed 'none' back to 'auto' so Pull-to-Refresh works again! */
        overscroll-behavior-y: auto !important;
    }

    /* 2. SAFE GPU PROMOTION FOR STICKY CONTAINERS */
    /* Tells the phone to prepare the graphics card for your sticky sections, 
       but uses 'will-change' instead of 'translateZ' so it NEVER breaks your layout */
    .pos-sticky-container,
    .services-sticky-container,
    .process-sticky-container {
        will-change: transform !important;
    }

    /* 3. HARDWARE ACCELERATION FOR HEAVY TEXT */
    /* Keeps the massive text sharp and prevents it from jittering while swiping */
    .dynamic-word,
    .typo-line {
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
}

/* ==========================================================================
   THE "LOWER BASE" ARCHITECTURE (Protects Design & Stops Glitches)
   ========================================================================== */

/* 1. The Glitch-Proof Lower Wall */
/* Covers Portfolio, Reviews, and Process with solid black, without touching Services */
#solid-base-layer {
    background-color: #020203 !important;
    position: relative;
    z-index: 20 !important;
    width: 100%;

    /* Hardware acceleration to prevent tearing */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    contain: paint;

    /* THE FIX: Extends the black wall deep into the floor. 
       This seals the video gap AND gives your users room to scroll 
       the text up so it doesn't hide behind the floating dock! */
    padding-bottom: 20vh !important;
}

/* 2. Safety Net for the Services Section */
/* Blocks the video from bleeding through Services, WITHOUT forcing a background color. 
   Your JS color fades will still work perfectly! */
.services-section {
    contain: paint layout !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* 3. CRUSH ALL TRANSPARENT GAPS */
/* Ensures no empty margins exist between sections for the video to peek through */
.services-section,
.portfolio-section,
.reviews-section,
.process-section {
    margin-bottom: 0 !important;
}

/* hero-wrapper/video GPU compositing — see canonical declaration at end of file */

/* 5. THE BOUNCE KILLER */
/* Stops iOS/Android from pulling the page up past the content */
html,
body {
    overscroll-behavior-y: auto !important;
}

/* ==========================================================================
   HERO HEADER ALIGNMENT FIX (Logo Left, Button Right)
   ========================================================================== */
.studio-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;

    /* Ensure it has proper padding so it doesn't touch the exact edges of the screen */
    padding-right: clamp(24px, 5vw, 40px) !important;
}

/* ==========================================================================
   MOBILE HEADER, NAVBAR & AVATAR BUTTON REFINEMENT
   ========================================================================== */

@media (max-width: 768px) {

    /* --- 1. SPANGEA LOGO REFINEMENTS --- */
    /* Bring the navbar edges in to match the premium tight feel */
    .g-navbar {
        padding-left: 14px !important;
        padding-right: 20px !important;
    }

    /* Shrink the Spangea Logo & Wordmark */
    .g-navbar-logo {
        gap: 8px !important;
        /* Tighter spacing between icon and text */
    }

    .g-navbar-symbol {
        width: 28px !important;
        /* Smaller logo icon */
        height: 28px !important;
    }

    .g-navbar-wordmark {
        font-size: 1rem !important;
        /* Smaller, sharper text */
        letter-spacing: 0.08em !important;
    }

    /* --- 2. HERO HEADER ALIGNMENT --- */
    /* Give the hero header proper breathing room from the phone's edges */
    .studio-header {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 36px !important;
    }

    /* --- 3. AVATAR BUTTON REFINEMENTS --- */
    /* Shrink the button structure so it matches the new logo size */
    .g-navbar-cta.avatar-btn {
        padding: 3px 12px 3px 3px !important;
        gap: 8px !important;
    }

    /* Scale down the avatar image to match the Spangea symbol perfectly */
    .nav-avatar-wrapper {
        width: 16px !important;
        height: 16px !important;
        border-radius: 4px !important;
    }

    /* Make the button text perfectly proportioned */
    .g-navbar-cta.avatar-btn .btn-text {
        font-size: 0.6rem !important;
        letter-spacing: 0.05em !important;
    }

    /* 1. ADDS GAP BETWEEN LABEL AND HEADLINE */
    .hero-label-wrapper {
        padding: 4px 12px;
        /* INCREASED: Pushes the "Built to be Remembered" text further down */
        margin-bottom: 3vh !important;
    }

    /* 2. PUSHES THE DOCK CLOSER TO THE BOTTOM EDGE */
    .floating-dock {
        width: min(350px, 92vw);
        max-width: 360px;
        min-width: auto;
        gap: 12px;
        padding: 8px 10px 8px 10px;
        /* DECREASED: Lowers the dock while still protecting it from the iPhone swipe bar */
        bottom: max(1.4vh, env(safe-area-inset-bottom, 12px)) !important;
        border-radius: 14px;
    }
}

/* PASTE THIS NEW CODE */
.dock-avatar-img {
    width: 110%;
    height: 110%;
    object-fit: cover;
    border-radius: 6px;
    filter: grayscale(100%);
    transition: filter 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-dock:hover .dock-avatar-img {
    filter: grayscale(0%);
    transform: scale(1.08);
}


/* ==========================================================================
   CTA CINEMATIC SCROLL REVEAL (Ultra-Premium Studio Lighting)
   ========================================================================== */

/* 1. THE SPOTLIGHT WALL */
.cta-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: #020203;

    /* THE FIX: A massive, soft Spangea Orange spotlight glowing from behind the card */
    background-image: radial-gradient(circle at center, rgba(255, 94, 26, 0.12) 0%, rgba(2, 2, 3, 1) 55%);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-bottom: 12vh;
    z-index: 25;
    margin-top: -20vh !important;
    padding-top: 12vh;
}

/* 2. THE POLISHED GLASS CARD */
.cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    opacity: 1;

    width: 90%;
    max-width: 1200px;
    transform: translate3d(0, 150px, 0) scale(0.6, 0.8);
    will-change: transform;

    /* THE FIX: Richer gradient, razor-sharp top edge, and massive depth */
    background: linear-gradient(180deg, rgba(25, 25, 30, 0.9), rgba(10, 10, 12, 0.98));

    /* The Polished Silver Edges */
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 40px;
    padding: 10vh 4vw;

    box-shadow:
        0 50px 100px -20px rgba(0, 0, 0, 1),
        /* Drops massive shadow onto the spotlight */
        0 -10px 30px rgba(255, 255, 255, 0.03),
        /* Subtle top ambient light */
        inset 0 1px 1px rgba(255, 255, 255, 0.2);
    /* Glossy inner reflection */

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}


/* 2. The revealed state: triggered by JavaScript */
.cta-section.is-revealed .cta-content {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* The small "OUR TEAM" style text from the video */
.cta-sublabel {
    font-family: var(--font-body), sans-serif;
    color: #888888;
    /* Premium muted grey */
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 500;
}


/* 3. METALLIC TYPOGRAPHY */
.cta-title {
    font-family: var(--font-hero), sans-serif;
    font-size: clamp(3rem, 10vw, 8rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0;

    /* THE FIX: Metallic silver gradient instead of flat white text */
    background: linear-gradient(180deg, #ffffff 0%, #888890 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    /* Fallback */
}

/* The Action Button */
.cta-big-btn {
    margin-top: 4vh;
    padding: 16px 40px;
    background-color: #ff5e1a;
    /* Assuming your Spangea Orange color */
    color: #ffffff;
    font-family: var(--font-body), sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 50px;
    /* Pill shape */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.4s ease,
        box-shadow 0.4s ease;
}

.cta-big-btn:hover {
    transform: scale(1.05);
    background-color: #ff753a;
    box-shadow: 0 10px 30px rgba(255, 94, 26, 0.3);
}


/* ==========================================================================
   CTA SECTION: TABLET & MOBILE OPTIMIZATIONS (Premium Polish)
   ========================================================================== */

/* TABLETS */
@media (max-width: 1024px) {
    .cta-title {
        font-size: clamp(3.5rem, 8vw, 5rem) !important;
        line-height: 1.1 !important;
    }
}

/* MOBILE PHONES */
@media (max-width: 767px) {

    /* 2. Give the section proper full-screen height to breathe */
    .cta-section {
        min-height: auto !important;
        /* Removes the giant screen-filling void */
        padding-top: 0vh !important;
        /* Brings the text way up closer to the previous section! */
        padding-bottom: 10vh !important;
        /* Leaves safe room for your floating dock */
        justify-content: center !important;
        /* Forces the content to sit at the top, not the bottom */
    }

    .cta-content {
        width: 92% !important;
        /* Gives a beautiful 4% gap on the left and right */
        padding: 3vh 10px !important;
        /* Tighter padding for small screens */
        border-radius: 16px !important;
        /* Slightly sharper corners for phones */
        justify-content: center !important;
        /* Aligns content to the top for better mobile flow */
    }

    /* 3. Flawless Auto-Scaling Typography */
    .cta-title {
        /* Mathematically scales perfectly on ANY phone size */
        font-size: clamp(2.6rem, 11vw, 3.8rem) !important;
        line-height: 1.05 !important;
        letter-spacing: -0.04em !important;
        /* Tighter letter spacing = more premium */
    }

    /* 4. Elegant Sub-label */
    .cta-sublabel {
        font-size: 0.7rem !important;
        letter-spacing: 0.25em !important;
        margin-bottom: 2.5vh !important;
        color: #888 !important;
    }

    /* 5. Sleek Mobile Button */
    .cta-big-btn {
        margin-top: 5vh !important;
        padding: 16px 36px !important;
        font-size: 0.85rem !important;
        border-radius: 100px !important;
    }
}


/* ==========================================================================
   AGENCY FOOTER (Exact Reference Match)
   ========================================================================== */

.agency-footer {
    position: relative;
    width: 100%;
    background-color: #020203;
    color: #ffffff;
    padding: 8vh 4vw 3vh 4vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 10;
    /* This shadow prevents the background video from peeking through on iOS mobile rubber-band overscroll */
    box-shadow: 0 50vh 0 #020203;
}

/* 1. THE MISSING TOP LINE */
.agency-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 4vw;
    right: 4vw;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.500);
    /* Sleek, subtle white line */
    z-index: 5;
}

/* 2. THE SUNSET HORIZON GLOW */
.footer-glow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 42vh;
    /* THE FIX: Linear gradient that stretches flat across the entire bottom */

    background: linear-gradient(to top,
            rgba(255, 100, 31, 0.95) 0%,
            rgba(255, 100, 31, 0.75) 15%,
            rgba(255, 100, 31, 0.45) 32%,
            rgba(255, 100, 31, 0.18) 52%,
            rgba(255, 100, 31, 0.06) 68%,
            rgba(255, 100, 31, 0.00) 100%);

    filter: blur(4px);


    z-index: 1;
    pointer-events: none;
}

/* 3. GRID ALIGNMENT FIX */
.footer-top-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* THE FIX: Forces every column to lock to the absolute top line */
    align-items: start;
    gap: 40px;
    position: relative;
    z-index: 2;
    margin-bottom: 8vh;
    margin-top: 4vh;
    /* Breathes under the top line */
}

.footer-col {
    display: flex;
    flex-direction: row;
    gap: 40px;
}

/* 4. SAY HELLO COLUMN FIX */
.say-hello-col {
    /* THE FIX: Stacks the label on top of the email, just like the reference */
    flex-direction: column;
    align-items: flex-end;
    /* Pushes them both strictly to the right edge */
    gap: 8px;
}

.footer-label {
    font-family: var(--font-body), sans-serif;
    font-size: 0.8rem;
    color: #888888;
    min-width: 80px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    font-family: var(--font-body), sans-serif;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #ff6c00;
}

/* 5. THE GIANT BLACK SILHOUETTE TEXT */
.footer-giant-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: center;

    /* THE FIX 1: Removed 'overflow: hidden' so it stops slicing the text */
    /* THE FIX 2: Added padding to give the text room to bend and wave */
    padding-top: 4vh;
    padding-bottom: 1vh;
}

.footer-giant-text {
    font-family: 'Delirium', sans-serif;

    /* THE FIX 2: Delirium is skinny, so we can make it massive again! (13vw) */
    font-size: clamp(4rem, 16vw, 18rem);

    /* THE FIX 3: Increased line-height from 0.85 to 1.0 to restore the bottom of the letters */
    line-height: 1.0;

    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    will-change: transform;
}

.footer-giant-text span {
    background: linear-gradient(180deg, #ffffff 0%, #888890 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;

    /* Prepares the browser GPU for the wave animation */
    will-change: transform;
}

/* Sub Footer */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #000000;
    position: relative;
    z-index: 2;
    margin-top: 0vh;
    padding-top: 0vh;
    /* Removed the border line here to match reference perfectly */
}

/* ==========================================================================
   THE FLOATING DOCK HIDE RULE
   ========================================================================== */
.floating-dock {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease !important;
}

.floating-dock.hidden-by-footer {
    transform: translateX(-50%) translateY(150px) !important;
    pointer-events: none;
}


/* ==========================================================================
   WHATSAPP MODAL FORM
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 2, 3, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.modal-card {
    background: #0d0d11;
    /* Very dark slate, matching reference */
    width: 90%;
    max-width: 650px;
    border-radius: 16px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
    position: relative;
    transform: translateY(30px) scale(0.95);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-overlay.active .modal-card {
    transform: translateY(0) scale(1);
}

/* ==========================================================================
   THE PREMIUM CLOSE BUTTON
   ========================================================================== */
.close-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.close-btn:hover {
    background: #ffffff;
    transform: rotate(90deg);
}

.close-line {
    position: absolute;
    width: 16px;
    height: 1.5px;
    background-color: #ffffff;
    transition: all 0.3s ease;
}

.close-btn:hover .close-line {
    background-color: #000000;
}

.close-line-1 {
    transform: rotate(45deg);
}

.close-line-2 {
    transform: rotate(-45deg);
}



.modal-header h2 {
    font-family: var(--font-hero), sans-serif;
    font-size: 2.2rem;
    margin: 0 0 8px 0;
    color: #fff;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.modal-header p {
    color: #a0a0a5;
    font-size: 1rem;
    margin-bottom: 30px;
}

/* Quick Contact Neon Cards */
.quick-contact-cards {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
}

.contact-card {
    flex: 1;
    background: #15151a;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    transition: all 0.3s ease;
}

.contact-card:hover {
    background: rgba(255, 94, 26, 0.05);
    border-color: rgba(255, 94, 26, 0.3);
    transform: translateY(-4px);
}

.icon-glow {
    margin: 0 auto 12px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The Spangea Orange Neon Effect */
.icon-glow svg {
    width: 32px;
    height: 32px;
    fill: #ff5e1a;
    filter: drop-shadow(0 0 12px rgba(255, 94, 26, 0.8));
    /* Pure Neon Glow */
    transition: transform 0.3s ease, filter 0.3s ease;
}

.contact-card:hover .icon-glow svg {
    transform: scale(1.1);
    filter: drop-shadow(0 0 16px rgba(255, 94, 26, 1));
}

.contact-card h3 {
    font-family: var(--font-body), sans-serif;
    font-size: 1.1rem;
    margin: 0 0 4px 0;
}

.contact-card p {
    font-size: 0.8rem;
    color: #a0a0a5;
    margin: 0;
}

/* "Or send a message" Divider line */
.form-divider {
    text-align: center;
    margin-bottom: 24px;
    position: relative;
}

.form-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
}

.form-divider span {
    background: #0d0d11;
    /* Matches the dark modal background so the line breaks cleanly */
    padding: 0 16px;
    color: #888;
    font-size: 0.85rem;
    position: relative;
    z-index: 2;
}

/* Inputs */
.input-row {
    display: flex;
    gap: 16px;
}

.input-group {
    margin-bottom: 20px;
    flex: 1;
}

.group-label {
    display: block;
    color: #fff;
    font-weight: bold;
    margin-bottom: 12px;
    font-size: 1.1rem;
}

.project-form input[type="text"],
.project-form input[type="email"],
.project-form input[type="tel"],
.project-form select,
.project-form textarea {
    width: 100%;
    background: #1a1a20;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 16px;
    color: #fff;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.project-form input:focus,
.project-form select:focus,
.project-form textarea:focus {
    outline: none;
    border-color: #ff5e1a;
}

/* Service Chips */
.service-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chip input {
    display: none;
}

.chip span {
    display: inline-block;
    padding: 12px 24px;
    background: #1a1a20;
    border-radius: 100px;
    font-size: 0.9rem;
    color: #a0a0a5;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid transparent;
}

.chip input:checked+span {
    background: rgba(255, 94, 26, 0.1);
    color: #ff5e1a;
    border-color: #ff5e1a;
}

/* Submit Button */
.submit-btn {
    width: 100%;
    background: #ff5e1a;
    color: #fff;
    border: none;
    padding: 18px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    margin-top: 10px;
}

.submit-btn:hover {
    background: #e04d12;
    transform: scale(0.98);
}

/* tap-highlight & focus ring — see global * reset at top of file */

/* The Premium "Squish": Elements shrink slightly when physically clicked */
.submit-btn:active,
.contact-card:active,
.close-btn:active {
    transform: scale(0.94) !important;
    transition: transform 0.1s ease !important;
}

/* Mobile fixes for form */
@media (max-width: 767px) {
    .input-row {
        flex-direction: column;
        gap: 0;
    }

    .modal-card {
        padding: 30px 20px;
    }

    .modal-header h2 {
        font-size: 1.8rem;
    }
}

/* ==========================================================================
   MOBILE RESPONSIVENESS (Editorial Split Layout & Premium Modal)
   ========================================================================== */
@media (max-width: 767px) {

    /* --- FOOTER FIXES --- */
    .agency-footer {
        padding: 4vh 6vw 2vh 6vw !important;
    }

    .footer-top-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        margin-bottom: 6vh !important;
    }

    /* Force the columns to sit side-by-side (Left / Right) */
    .footer-col {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        gap: 20px !important;
    }

    .footer-links {
        align-items: flex-end !important;
        text-align: right !important;
    }

    /* Keep Say Hello stacked on the left safely */
    .say-hello-col {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .say-hello-col .footer-links {
        align-items: flex-start !important;
        text-align: left !important;
    }

    .footer-giant-wrapper {
        padding-top: 2vh !important;
    }

    .footer-giant-text {
        font-size: 21vw !important;
        letter-spacing: 0.02em !important;
    }

    .footer-bottom {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        font-size: 0.4rem !important;
        margin-top: 0vh !important;
        padding-top: 0vh !important;
    }

    .footer-bottom span:last-child {
        text-align: right !important;
    }

    /* --- PREMIUM MODAL FIXES --- */
    .modal-card {
        width: 95% !important;
        padding: 28px 20px 24px 20px !important;
        max-height: 85vh !important;
        border-radius: 24px !important;
    }

    .modal-header h2 {
        font-size: 1.8rem !important;
        letter-spacing: -0.03em !important;
        margin-bottom: 4px !important;
    }

    .modal-header p {
        font-size: 0.9rem !important;
        margin-bottom: 24px !important;
    }

    .quick-contact-cards {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
    }

    .contact-card {
        padding: 16px 8px !important;
        border-radius: 16px !important;
    }

    .icon-glow svg {
        width: 28px !important;
        height: 28px !important;
    }

    .input-row {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .project-form input[type="text"],
    .project-form input[type="email"],
    .project-form input[type="tel"],
    .project-form select,
    .project-form textarea {
        padding: 16px !important;
        font-size: 1rem !important;
        margin-bottom: 12px !important;
        border-radius: 12px !important;
    }

    .group-label {
        font-size: 1rem !important;
        margin-bottom: 10px !important;
        margin-top: 8px !important;
    }

    .service-chips {
        gap: 8px !important;
    }

    .chip span {
        padding: 10px 16px !important;
        font-size: 0.85rem !important;
    }

    .submit-btn {
        padding: 18px !important;
        font-size: 1.05rem !important;
        border-radius: 100px !important;
        margin-top: 16px !important;
        margin-bottom: 8px !important;
    }

    .close-btn {
        top: 16px !important;
        right: 16px !important;
        font-size: 28px !important;
        padding: 8px !important;
        width: 40px !important;
        height: 40px !important;
    }

    /* =========================================================
    CLEAN CINEMATIC MOBILE NAV LAYOUT
    ========================================================= */

    /* Whole menu panel */
    .menu-overlay-panel {
        width: 90vw;

        max-height: unset;

        height: auto;

        overflow: hidden;

        padding: 22px 18px 20px;

        border-radius: 28px;
    }

    /* Navigation list */
    .cinematic-nav-list {
        display: flex;

        flex-direction: column;

        gap: 14px;

        margin-top: 8px;
    }

    /* Each nav row */
    .nav-link {
        display: grid;

        grid-template-columns: 34px 1fr;

        align-items: center;

        gap: 10px;

        padding: 2px 0;

        transform: none !important;
    }

    /* Numbers */
    .nav-num {
        font-size: 0.9rem;

        opacity: 0.55;

        min-width: unset;
    }

    /* Headlines */
    .nav-label {
        font-size: clamp(1.55rem, 6vw, 2rem);

        line-height: 0.9;

        letter-spacing: -0.05em;

        max-width: unset;
    }

    /* Remove huge hover movement */
    .nav-link:hover {
        transform: none;
    }

    /* Compact menu body */
    .menu-body {
        padding: 14px 0;
    }

    /* Compact footer */
    .menu-footer {
        margin-top: 12px;

        padding-top: 18px !important;

        gap: 10px !important;
    }

    /* Footer columns */
    .footer-col {
        gap: 16px !important;

    }

    /* Footer titles */
    .footer-title {
        font-size: 0.42rem;
    }

    /* Footer text */
    .footer-value,
    .footer-link {
        font-size: 0.52rem;
        justify-content: flex-end !important;
    }

    .social-icon-link {
        font-size: 1rem !important;
    }

    /* Social row */
    .social-links-icon-row {
        gap: 10px;
    }

    /* ==========================================================================
       MOBILE FIX: WHATSAPP ICON ONLY & HIDE IN HERO
       ========================================================================== */

    /* 1. Hide the button entirely when it's inside the Hero header */
    .studio-header .g-navbar-cta {
        display: none !important;
    }

    /* 2. Completely remove the "LET'S START" text on mobile */
    .g-navbar-cta.avatar-btn .btn-text-wrapper {
        display: none !important;
    }

    /* 3. Reshape the remaining button into a perfect premium circle */
    .g-navbar-cta.avatar-btn {
        padding: 6px !important;
        border-radius: 25% !important;
        /* Perfect circle */
        gap: 0 !important;
        width: 32px !important;
        height: 32px !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* 4. Ensure the neon WhatsApp icon fits perfectly in the new circle */
    .g-navbar-cta.avatar-btn .nav-avatar-wrapper {
        width: 20px !important;
        height: 20px !important;
        margin: 0 !important;
        background: transparent !important;
    }

    .g-navbar-cta.avatar-btn .nav-wa-icon {
        width: 100% !important;
        height: 100% !important;
    }

    /* Bring the navbar edges in to match the premium tight feel */
    .g-navbar {
        /* Increased mobile vertical padding */
        padding-top: max(14px, env(safe-area-inset-top)) !important;
        padding-bottom: 12px !important;
        padding-left: 12px !important;
        padding-right: 20px !important;
    }

    /* 1. The Glass Box (Increase these numbers if you want the whole box bigger) */
    .g-navbar-glass-wrap {
        width: 32px !important;
        height: 32px !important;
    }

    /* 2. THE FIX: The 'S' Logo Image */
    .g-navbar-symbol {
        /* Change this number to grow or shrink the S! 
           1 = 100% size. 1.2 = 120% size. */
        transform: scale(1.05) !important;
    }

    .g-navbar-wordmark {
        font-size: 0.7rem !important;
        letter-spacing: 0.1em !important;
    }

    .services-sticky-container {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        padding-top: max(32px, env(safe-area-inset-top)) !important;

        /* THE FIX: Increased from 40px to 120px to create a premium cinematic gap! */
        padding-bottom: 60px !important;
    }

    /* ==========================================================================
       MOBILE RESPONSIVE LOCK (CONSISTENCY ACROSS ALL PHONES)
       ========================================================================== */

    /* 1. LOCK THE PROCESS TRACK TO THE DOCK */
    .process-track-container {
        /* Replaces 28vw! 120px guarantees exact physical clearance for the floating dock on EVERY phone */
        padding-bottom: 120px !important;
        padding-left: 32px !important;
    }

    /* 2. LOCK THE HERO IMAGE "CHAPTER BREAK" */
    /* THE FIX: We removed '.studio-header img' so it stops blowing up your tiny logo! */
    .hero-image-wrapper {
        max-height: 55vh !important;
        min-height: 380px !important;
        margin-bottom: 48px !important;
        border-radius: 24px !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* 3. PROTECT THE BRANDS SECTION */
    .trusted-brands-container {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }


    /* ==========================================================================
       MOBILE FIX: MAIN NAVIGATION SPACING (Leaves Footer Untouched)
       ========================================================================== */

    /* If your 5 links are inside a flexbox container (like .menu-links): */
    .menu-links {
        gap: 36px !important;
        /* Increase this number for more space between the 5 items */
    }

    /* OR, if you are spacing them out using margins on the individual links: */
    .menu-link {
        margin-bottom: 28px !important;
        /* Increase this number to spread them out */
    }

    /* This ensures the very last link doesn't push the footer away! */
    .menu-link:last-child {
        margin-bottom: 0 !important;
    }



}

/* This safely closes the entire Mobile media query! */


/* ==========================================================================
   DESKTOP ONLY: SIDE-BY-SIDE MENU/FOOTER TITLES (MAIN FOOTER ONLY!)
   ========================================================================== */
@media (min-width: 1024px) {

    /* 1. Target the first two columns ONLY inside the main agency footer */
    .agency-footer .footer-col:nth-child(1),
    .agency-footer .footer-col:nth-child(2) {
        display: grid !important;
        grid-template-columns: 80px 1fr !important;
        /* 80px for the title, 1fr for the links */
        column-gap: 32px !important;
        row-gap: 16px !important;
        align-items: start !important;
    }

    /* 2. Pin the titles to the left column */
    .agency-footer .footer-col:nth-child(1) .footer-label,
    .agency-footer .footer-col:nth-child(2) .footer-label {
        grid-column: 1 !important;
        margin-top: 0 !important;
    }

    /* 3. Push all links into the right column */
    .agency-footer .footer-col:nth-child(1) .footer-links,
    .agency-footer .footer-col:nth-child(2) .footer-links {
        grid-column: 2 !important;
        margin-top: 0 !important;
    }

    /* 4. Force Social Links to stack vertically like the menu links */
    .agency-footer .social-links-icon-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }

    /* 5. Target the third column (Say Hello) to right-align exactly like the reference */
    .agency-footer .say-hello-col,
    .agency-footer .footer-col:nth-child(3) {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        text-align: right !important;
        gap: 16px !important;
    }
}



/* ==========================================================================
   PERFORMANCE FIX: ANTI-GLITCH & HARDWARE ACCELERATION
   ========================================================================== */

/* GPU compositing for hero video layer — single canonical declaration */
.hero-wrapper,
.hero-video {
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    will-change: transform !important;
    pointer-events: none !important;
}

/* scrolling-content-layer GPU layer — isolation:isolate already set in base declaration */

/* ==========================================================================
   DARK MODE COLOR FIXES (BUTTONS & LOGOS)
   ========================================================================== */

/* 1. Fix the Contact Us Button (White text, glass background) */
#scrolling-content-layer.scrolled-dark .contact-cta-btn {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    /* Pure white text so it is readable! */
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

/* On hover, it turns solid white with dark text */
#scrolling-content-layer.scrolled-dark .contact-cta-btn:hover {
    background-color: #ffffff !important;
    color: #121212 !important;
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.25) !important;
}

/* 2. Fix the Black Logos (Turn them White in Dark Mode) */
#scrolling-content-layer.scrolled-dark .brand-logo img {
    /* This forces all dark/black logos to become pure, bright white */
    filter: brightness(0) invert(1) !important;
    opacity: 0.9 !important;
}