:root {
            color-scheme: dark;
            --bg: #020204; --text-main: #ffffff; --text-muted: #8892b0;
            --accent: #d8b4fe; --accent-dim: rgba(216, 180, 254, 0.15);
            --font-head: 'Syncopate', sans-serif;
            --font-body: 'Rajdhani', sans-serif;
            --font-num: 'Orbitron', sans-serif;
            --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* cursor:none is gated on .wt-cursor-ready — see the matching rule and comment in
           Gallery.html. Hiding the system pointer before the replacement exists leaves anyone whose
           JS or CDN failed with no visible cursor at all. */
        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; }
        html.wt-cursor-ready, html.wt-cursor-ready * { cursor: none; }

        /* Keep hidden overlays OUT OF THE TAB ORDER.
           Every overlay on this page is hidden with opacity:0 + pointer-events:none, which stops the
           mouse but does nothing about the keyboard — the elements are still rendered, still
           focusable, and still announced. Roughly fifteen invisible controls (the whole mobile menu,
           the detail modal, the case drawer, the cookie banner, the scroll-top button) sat in the tab
           order at all times, so a keyboard user tabbing through the homepage fell into a long run of
           focus stops on things that are not on screen, with no way to tell where they were.
           `visibility: hidden` removes them from the tab order and still animates, because it is a
           discrete-but-transitionable property: the reveal rules below set it back to visible in the
           same rule that raises opacity, so the fade is unaffected. */
        #detail-modal, #case-drawer, #drawer-backdrop, #mobile-menu, #scroll-top-btn { visibility: hidden; }
        #detail-modal.active, #case-drawer.open, #drawer-backdrop.open,
        #mobile-menu.open, #scroll-top-btn.visible { visibility: visible; }
        #cookie-banner { visibility: hidden; }
        #cookie-banner.show { visibility: visible; }
        html { scroll-behavior: auto; }
        ::selection { background: rgba(216,180,254,0.28); color: #fff; }

        /* --- Accessibility --- */
        .skip-link { position: fixed; top: -100%; left: 50%; transform: translateX(-50%); background: var(--accent); color: #000; padding: 0.8rem 2rem; border-radius: 0 0 10px 10px; font-family: var(--font-body); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; z-index: 100000; transition: top 0.3s; }
        .skip-link:focus { top: 0; }
        *:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
        input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }
        .custom-select:focus-visible { outline: none; }
        .custom-select-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
        .custom-select-option.kb-focus { background: rgba(168,85,247,0.1); color: #fff; padding-left: 1.6rem; }
        /* `clip`, not `hidden` — the same fix Assets/site.css and Gallery.html already carry, which
           this page missed because it is standalone and loads neither. `overflow-x: hidden` on body
           promotes body to a scroll container, and on iOS that makes momentum scrolling STICK on a
           down -> up -> down reversal until the finger is lifted. The duplicate `hidden` first is the
           fallback for browsers without `clip`. html needs it too or the declaration propagates. */
        html { overflow-x: hidden; overflow-x: clip; }
        body { background-color: var(--bg); color: var(--text-main); font-family: var(--font-body); overflow-x: hidden; overflow-x: clip; font-size: 18px; }
        /* Hide the scrollbar VISUALLY only — the page still scrolls by wheel, trackpad, touch,
           keyboard, spacebar and programmatic scrollTo, and the scroll position is unchanged. Three
           declarations because no single one covers every engine:
             scrollbar-width      Firefox
             -ms-overflow-style   legacy Edge / IE
             ::-webkit-scrollbar  Chrome, Edge, Safari, and every iOS browser
           This does not cause a layout shift: it applies from first paint, so nothing reflows later.
           It also cannot introduce horizontal overflow — removing the gutter makes the viewport
           slightly WIDER, which is the direction that relieves 100vw-vs-100% overhang rather than
           creating it. `overflow-x: clip` above still guards that case regardless. */
        html { scrollbar-width: none; -ms-overflow-style: none; }
        html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
        body.modal-open { overflow: hidden; }

        /* --- Cinematic Grain ---
           Two measured problems, both fixed here, neither of which was the "low-res texture" it looked
           like. Isolated by compositing the layer over flat grey at full opacity and measuring run
           lengths and autocorrelation:

           1. COLOUR SPECKLE. feTurbulence generates R, G and B independently, so the result was
              chromatic noise — visible red/green/blue fringing at DPR 3 — where film grain is
              essentially monochrome luminance variation. feColorMatrix saturate 0 flattens it.
           2. DPR UPSCALING. The tile is authored in CSS pixels, so on a 2x or 3x display every grain
              cell was painted as a 2x2 or 3x3 block of device pixels. Measured autocorrelation at
              DPR 3 was 0.95 at lag 1 and still 0.55 at lag 4 — i.e. features 3-4 device pixels wide.
              Dividing background-size by the device ratio maps one noise cell to one DEVICE pixel, so
              the grain stays equally fine on any screen.

           Tile size is chosen so one noise feature lands on ~2 DEVICE pixels. The viewBox is 200 units
           and baseFrequency 0.85 gives a period of 1.176 units, so painting the tile at T css px makes
           a feature 0.00588 * T * dpr device pixels wide. T = 340/dpr therefore lands at ~2.0 device px
           at every ratio. That number matters: dividing straight to 1 device px was measured and made
           the grain UNCORRELATED (autocorrelation -0.05 at lag 1) — technically finer, but it stops
           clumping and reads as digital white noise instead of film. ~2px keeps the clumping.

           Deliberately unchanged: opacity 0.04, the fractalNoise type, baseFrequency, octave count and
           stitchTiles. Strength is the same; only the colour, and the scale-per-device-pixel, change. */
        .grain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9998; opacity: 0.04; background-repeat: repeat; background-size: 340px 340px; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); }
        /* Ladder, not two buckets. 2dppx/3dppx alone missed every fractional Windows scaling
           factor — 1.25, 1.5, 1.75 — which fell back to the DPR-1 size and stayed coarse. */
        @media (min-resolution: 1.25dppx) { .grain { background-size: 272px 272px; } }
        @media (min-resolution: 1.5dppx) { .grain { background-size: 226.67px 226.67px; } }
        @media (min-resolution: 1.75dppx) { .grain { background-size: 194.29px 194.29px; } }
        @media (min-resolution: 2dppx) { .grain { background-size: 170px 170px; } }
        @media (min-resolution: 2.5dppx) { .grain { background-size: 136px 136px; } }
        @media (min-resolution: 3dppx) { .grain { background-size: 113.33px 113.33px; } }
        @media (min-resolution: 4dppx) { .grain { background-size: 85px 85px; } }

        /* --- Cinematic Letterbox Bars --- */
        .letterbox { position: fixed; left: 0; width: 100%; pointer-events: none; z-index: 9996; background: #000; height: 0; transition: height 0.35s ease; }
        .letterbox-top { top: 0; }
        .letterbox-bottom { bottom: 0; }
        body.fast-scroll .letterbox { height: 28px; }

        /* --- WebGL Canvas --- */
        #webgl-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

        /* ===== Lite / fallback mode (no heavy 3D) — preview via ?lite=1 ===== */
        .wt-lite #webgl-canvas, .wt-lite #god-rays, .wt-lite #scene-vignette, .wt-lite .grain, .wt-lite .letterbox { display: none !important; }
        .wt-lite #preloader { display: none !important; }
        .wt-lite body {
            background-color: #020204;
            background-image:
                radial-gradient(ellipse 95% 55% at 50% 22%, rgba(139,92,246,0.22) 0%, transparent 60%),
                linear-gradient(180deg, rgba(2,2,4,0.55) 0%, rgba(2,2,4,0.92) 70%),
                url('/Assets/generated/pricing-hero.webp');
            background-repeat: no-repeat;
            background-position: center top;
            background-size: cover;
            background-attachment: scroll;
        }
        .wt-lite .fade-up, .wt-lite .decode-text, .wt-lite .hero-center-label,
        .wt-lite .h-project, .wt-lite .h-project-inner { opacity: 1 !important; transform: none !important; }
        #main-content { position: relative; z-index: 10; width: 100%; }

        /* --- Fluid Cursor --- */
        #cursor-dot { position: fixed; top: 0; left: 0; width: 6px; height: 6px; background: #fff; border-radius: 50%; pointer-events: none; z-index: 10000; transform: translate(-50%, -50%); mix-blend-mode: difference; transition: opacity 0.3s; }
        #cursor-ring { position: fixed; top: 0; left: 0; width: 40px; height: 40px; border: 1px solid rgba(216, 180, 254, 0.6); border-radius: 50%; pointer-events: none; z-index: 9999; transform-origin: center; will-change: transform; mix-blend-mode: difference; transition: border-color 0.3s, background 0.3s, width 0.2s, height 0.2s; }
        body.hovering #cursor-ring { width: 65px; height: 65px; background: rgba(255,255,255,1); border-color: transparent; mix-blend-mode: exclusion; }
        body.hovering #cursor-dot { opacity: 0; }

        /* --- Preloader --- */
        #preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg); z-index: 99999; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 1.2s var(--ease-out), visibility 1.2s; overflow:hidden; }
        .preloader-overlay { position:absolute; inset:0; pointer-events:none; }
        .loader-brand, #loader-progress, .loader-line { position:relative; z-index:1; }
        .loader-brand { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.5em; margin-bottom: 3vh; color: var(--text-muted); text-transform: uppercase; }
        #loader-progress { font-family: var(--font-num); font-size: clamp(4rem, 8vw, 8rem); font-weight: 700; color: #fff; width: 200px; text-align: center; letter-spacing: 0.1em; }
        .loader-line { width: 200px; height: 1px; background: rgba(255,255,255,0.1); margin-top: 20px; position: relative; overflow: hidden; }
        .loader-line-inner { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: var(--accent); transition: width 0.2s; }

        /* --- Sound Toggle --- */
        #sound-toggle { position: fixed; bottom: calc(2.5rem + 54px + 0.75rem); right: 2.5rem; z-index: 500; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); color: #fff; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(12px); transition: background 0.3s, border-color 0.3s; pointer-events: auto; flex-direction: column; gap: 4px; }
        #sound-toggle:hover { background: var(--accent-dim); border-color: var(--accent); }
        .sound-bars { display: flex; gap: 2px; align-items: flex-end; height: 14px; }
        .sound-bar { width: 2px; background: var(--accent); border-radius: 1px; }
        .sound-bar:nth-child(1) { height: 4px;  animation: sp 0.8s 0.00s ease-in-out infinite alternate; }
        .sound-bar:nth-child(2) { height: 10px; animation: sp 0.8s 0.15s ease-in-out infinite alternate; }
        .sound-bar:nth-child(3) { height: 7px;  animation: sp 0.8s 0.30s ease-in-out infinite alternate; }
        .sound-bar:nth-child(4) { height: 12px; animation: sp 0.8s 0.10s ease-in-out infinite alternate; }
        .sound-bar:nth-child(5) { height: 5px;  animation: sp 0.8s 0.25s ease-in-out infinite alternate; }
        @keyframes sp { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }
        #sound-toggle.muted .sound-bar { animation: none; transform: scaleY(0.3); opacity: 0.25; }
        .sound-label { font-family: var(--font-num); font-size: 0.42rem; letter-spacing: 0.15em; color: var(--text-muted); }

        /* --- Parallax Floating Elements --- */
        .parallax-el { position: fixed; pointer-events: none; z-index: 2; will-change: transform; }
        .p-line-v { width: 1px; background: linear-gradient(to bottom, transparent, rgba(216,180,254,0.1), transparent); }
        .p-line-h { height: 1px; background: linear-gradient(to right, transparent, rgba(216,180,254,0.07), transparent); }
        .p-circle  { border: 1px solid rgba(216,180,254,0.05); border-radius: 50%; }

        /* --- Typography & Reveals --- */
        .fade-up { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
        .fade-up.in-view { opacity: 1; transform: translateY(0); }
        .decode-text { opacity: 0; transition: opacity 0.1s; }
        .decode-text.in-view { opacity: 1; }

        /* --- Navigation --- */
        nav { position: fixed; top: 0; left: 0; width: 100%; padding: 2rem 5vw; display: flex; justify-content: space-between; align-items: center; z-index: 100; transition: background 0.5s, transform 0.5s var(--ease-out); mix-blend-mode: difference; }
        nav.scrolled { background: rgba(3, 3, 5, 0.7); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.05); padding: 1.5rem 5vw; }
        nav.hidden { transform: translateY(-100%); }
        /* The accent dot that used to sit before the wordmark was removed deliberately. `gap` is kept
           because a flex container with a single anonymous text item ignores it, so it costs nothing
           and is there if an icon is ever added back. */
        .logo { font-family: var(--font-head); font-weight: 700; font-size: clamp(1rem, 2vw, 1.2rem); letter-spacing: 0.15em; display: flex; align-items: center; gap: 12px; text-transform: uppercase; }
        .nav-links { display: none; }
        .nav-link { font-size: 0.85rem; font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; position: relative; padding-bottom: 4px; text-decoration: none; color: inherit; }
        .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 1px; background: #fff; transition: width 0.3s var(--ease-out); }
        .nav-link:hover::after { width: 100%; }

        /* --- Typed Text Effect --- */
        .typed-cursor { font-weight: 300; color: var(--accent); animation: cursorBlink 0.7s infinite; }
        @keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
        #typed-heading { min-height: 1.2em; }

        /* --- Sections Core --- */
        section { padding: 15vh 6vw; display: flex; flex-direction: column; justify-content: center; position: relative; }
        .kicker { font-family: var(--font-body); font-weight: 600; color: var(--accent); font-size: 0.85rem; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 2rem; display: inline-block; border: 1px solid var(--accent-dim); padding: 0.6rem 1.5rem; border-radius: 50px; background: rgba(216, 180, 254, 0.05); backdrop-filter: blur(5px); }
        h2 { font-family: var(--font-head); font-size: clamp(2rem, 5vw, 4.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; text-transform: uppercase; }
        h2.in-view::after { content:''; display:block; height:2px; background:linear-gradient(to right, var(--accent), transparent); margin-top:1rem; animation: lineWipe 0.8s var(--ease-out) 0.3s both; }
        @keyframes lineWipe { from { width:0; opacity:0; } to { width:clamp(60px, 12vw, 120px); opacity:1; } }

        /* 1. Hero */
        #hero { min-height: 100vh; padding: 0 6vw 6vh; justify-content: flex-end; pointer-events: none; gap: 0; }
        #hero::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(139,92,246,0.1) 0%, transparent 68%); animation: heroBreath 6s ease-in-out infinite alternate; pointer-events:none; z-index:0; }
        #hero > * { position: relative; z-index: 1; }
        @keyframes heroBreath { from { opacity:0.5; transform:scale(1); } to { opacity:1; transform:scale(1.06); } }
        .reel-play-btn { display:none; }

        /* Hero center label — anchors the W logo */
        .hero-center-label { position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 1.2rem; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 1s 1.2s; }
        .hero-center-label.in-view { opacity: 1; }
        .hero-center-label span { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.45em; text-transform: uppercase; color: rgba(255,255,255,0.28); font-weight: 600; white-space: nowrap; }
        .hero-cl-line { width: 36px; height: 1px; background: rgba(255,255,255,0.15); flex-shrink: 0; }

        /* Hero bottom 2-column bar */
        .hero-bottom { width: 100%; display: grid; grid-template-columns: 1fr 1fr; align-items: flex-end; gap: 4vw; padding-top: 3vh; border-top: 1px solid rgba(255,255,255,0.06); }
        h1, #typed-heading { font-family: var(--font-head); font-weight: 700; line-height: 0.95; font-size: clamp(2.8rem, 7vw, 8rem); letter-spacing: -0.03em; text-transform: uppercase; }
        .hero-right { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 2rem; padding-bottom: 0.3rem; }
        .hero-desc { max-width: 480px; font-size: clamp(0.95rem, 1.4vw, 1.15rem); line-height: 1.65; color: var(--text-muted); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; margin: 0; }
        .hero-scroll-hint { position: relative; bottom: auto; left: auto; display: flex; align-items: center; gap: 1rem; color: rgba(255,255,255,0.3); font-size: 0.72rem; letter-spacing: 0.35em; text-transform: uppercase; font-weight: 600; }
        .scroll-line { width: 36px; height: 1px; background: currentColor; flex-shrink: 0; }
        @keyframes scrollPulse { 0%,100%{opacity:0.3} 50%{opacity:0.7} }
        .hero-scroll-hint { animation: scrollPulse 2.5s ease infinite; }

        /* 2. About */
        #about-1 { min-height: 80vh; align-items: center; text-align: center; }
        .manifesto-text { font-family: var(--font-head); font-size: clamp(1.5rem, 3.5vw, 3.5rem); line-height: 1.4; font-weight: 400; max-width: 1200px; margin: 0 auto; }
        #about-2 { min-height: 80vh; align-items: flex-start; }
        .core-text { font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.7; font-weight: 500; max-width: 800px; color: #ddd; margin-top: 2rem; }

        /* --- Cinematic Reel Section --- */
        #reel { min-height: 75vh; padding: 0; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; }
        .reel-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; opacity: 0.62; }
        .reel-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 25%, var(--bg) 100%); z-index: 1; pointer-events: none; }
        .reel-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px); z-index: 2; pointer-events: none; }
        .reel-content { position: relative; z-index: 3; text-align: center; padding: 6vw; pointer-events: none; }
        .reel-headline { font-family: var(--font-head); font-size: clamp(2.5rem, 6vw, 6rem); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.05; }
        /* Suppress the per-heading underline on the reel headlines — the single centered .reel-divider sits between the two words instead. */
        .reel-headline::after { content: none !important; }
        .reel-divider { width: 140px; height: 2px; background: linear-gradient(to right, transparent, var(--accent), transparent); margin: 1.4rem auto; opacity: 0.7; border-radius: 2px; }
        .reel-sub { font-size: 0.85rem; letter-spacing: 0.45em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }

        /* 3. Bento Box Services */
        #services { min-height: 100vh; margin-top: 5vh; }
        .bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, minmax(280px, auto)); gap: 1rem; margin-top: 4rem; }
        .bento-item { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 16px; padding: 2.5rem; display: flex; flex-direction: column; justify-content: space-between; transition: background 0.4s, border-color 0.4s; position: relative; overflow: hidden; pointer-events: auto; opacity:0; transform:translateY(30px); }
        .bento-item.in-view { animation: bentoReveal 0.8s var(--ease-out) forwards; }
        .bento-item:nth-child(1).in-view { animation-delay: 0ms; }
        .bento-item:nth-child(2).in-view { animation-delay: 120ms; }
        .bento-item:nth-child(3).in-view { animation-delay: 240ms; }
        .bento-item:nth-child(4).in-view { animation-delay: 360ms; }
        @keyframes bentoReveal { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
        .bento-item:hover { background: rgba(255,255,255,0.04); border-color: var(--accent-dim); }
        .bento-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.18; z-index: 0; pointer-events: none; transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); }
        .bento-item:hover .bento-bg { opacity: 0.34; transform: scale(1.05); }
        .bento-item > div, .bento-item > p, .bento-item h3, .bento-item p, .bento-num { position: relative; z-index: 2; }
        .bento-item h3 { font-family: var(--font-head); font-size: clamp(1.2rem, 2vw, 1.8rem); font-weight: 700; z-index: 2; margin-top: 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
        .bento-item p { color: var(--text-muted); line-height: 1.6; font-size: 1.1rem; z-index: 2; font-weight: 500; margin-top: 1rem; }
        .bento-num { font-family: var(--font-num); font-size: 1.2rem; font-weight: 700; color: var(--accent); z-index: 2; letter-spacing: 0.1em; }
        .bento-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
        .bento-item:nth-child(2) { grid-column: span 2; }
        .bento-item:nth-child(3) { grid-column: span 1; }
        .bento-item:nth-child(4) { grid-column: span 1; }

        /* 4. Horizontal Scroll Projects */
        #work-wrapper { height: 500vh; position: relative; margin-top: 10vh; }
        .work-sticky { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; display: flex; align-items: center; touch-action: pan-y; }
        .work-header { position: absolute; top: 15vh; left: 6vw; z-index: 2; pointer-events: none; }
        .work-track { display: flex; gap: 8vw; padding: 0 50vw 0 6vw; height: 65vh; align-items: center; will-change: transform; pointer-events: auto; }

        .h-project { flex: 0 0 500px; height: 100%; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 2rem; overflow: hidden; border-radius: 14px; }
        .h-project-click { position: absolute; inset: 0; z-index: 5; }
        .h-project-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; opacity: 0; transition: opacity 0.7s var(--ease-out); pointer-events: none; z-index: 1; }
        .h-project:hover .h-project-video { opacity: 0.7; }
        .h-project-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 65%; background: linear-gradient(to top, rgba(2,2,4,0.95) 0%, transparent 100%); z-index: 2; border-radius: 0 0 14px 14px; }
        .h-num { font-family: var(--font-num); font-weight: 700; color: var(--accent); font-size: 1.5rem; margin-bottom: 1rem; letter-spacing: 0.1em; position: relative; z-index: 3; }
        .h-title { font-family: var(--font-head); font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 700; transition: color 0.3s; line-height: 1.15; text-transform: uppercase; position: relative; z-index: 3; }
        .h-project:hover .h-title { color: var(--accent); }
        .h-cat { text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.2em; font-weight: 600; color: var(--text-muted); margin-top: 0.6rem; position: relative; z-index: 3; }

        /* --- Cursor View Label --- */
        #cursor-view-label { position:fixed; top:0; left:0; pointer-events:none; z-index:10001; opacity:0; transition:opacity 0.25s; background:var(--accent); color:#000; font-family:var(--font-body); font-weight:700; font-size:0.78rem; letter-spacing:0.2em; text-transform:uppercase; padding:0.5rem 1rem; border-radius:100px; transform:translate(-50%,-140%); white-space:nowrap; }
        #cursor-view-label.visible { opacity:1; }

        /* --- Project card backgrounds --- */
        .h-project[data-bg] { background-size: cover; background-position: center top; background-repeat: no-repeat; }
        .h-project[data-bg]::before { content:''; position:absolute; inset:0; background: rgba(2,2,4,0.45); border-radius:14px; z-index:0; transition: background 0.5s; }
        .h-project[data-bg]:hover::before { background: rgba(2,2,4,0.25); }

        /* 5. Contact & Footer */
        #contact { min-height: 100vh; display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 5vw; padding-bottom: 10vh; margin-top: 10vh; pointer-events: auto; }
        .form-panel { background: rgba(255,255,255,0.01); backdrop-filter: blur(25px); border: 1px solid rgba(255,255,255,0.05); padding: 3rem; border-radius: 16px; }
        .input-group { margin-bottom: 3rem; position: relative; }
        .input-group input, .input-group textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.2); padding: 1rem 0; color: #fff; font-size: 1.2rem; font-family: var(--font-body); font-weight: 500; transition: border-color 0.4s; }
        .input-group input:focus, .input-group textarea:focus { outline: none; border-bottom-color: var(--accent); }
        .input-group label { position: absolute; top: 1rem; left: 0; color: var(--text-muted); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; font-size: 0.85rem; pointer-events: none; transition: 0.4s var(--ease-out); }
        .input-group input:focus ~ label, .input-group input:not(:placeholder-shown) ~ label, .input-group textarea:focus ~ label, .input-group textarea:not(:placeholder-shown) ~ label { transform: translateY(-30px); color: var(--accent); font-size: 0.75rem; }

        /* ── Phone country selector (Assets/wt-phone.js mountSelector) ──────────────────────────────
           THIS PAGE IS STANDALONE: it inlines its CSS and never loads Assets/site.css, so the
           selector's styles have to be duplicated here. They were not, and the button rendered as a
           raw 74x21 user-agent grey box that real clicks could not even reach. Keep this block in
           sync with the .wt-cc-* rules in Assets/site.css by hand. */
        .wt-cc-wrap { display: flex; align-items: stretch; gap: 0.5rem; width: 100%; }
        .wt-cc-wrap > input[type=tel] { flex: 1 1 auto; min-width: 0; }
        .input-group.wt-cc-host > label { transform: translateY(-30px); color: var(--accent); font-size: 0.75rem; }
        .wt-cc { position: relative; flex: 0 0 auto; }
        .wt-cc-btn { display: inline-flex; align-items: center; gap: 0.45rem; height: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.2); color: #fff; font-family: var(--font-body); font-size: 1rem; font-weight: 600; padding: 1rem 0.4rem 1rem 0; cursor: pointer; white-space: nowrap; transition: border-color 0.4s, color 0.25s; }
        .wt-cc-btn:hover, .wt-cc.open .wt-cc-btn { border-bottom-color: var(--accent); color: var(--accent); }
        .wt-cc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .wt-cc-dial { font-variant-numeric: tabular-nums; }
        .wt-cc-caret { flex: 0 0 auto; opacity: 0.6; transition: transform 0.3s var(--ease-out); }
        .wt-cc.open .wt-cc-caret { transform: rotate(180deg); }
        /* Height is DEFINITE, not capped — with only max-height the list collapses to nothing, which is
           how this panel once rendered as a search box with no rows under it. Keep it in sync with
           Assets/site.css: this page is standalone and never loads that file. */
        /* max-height, not height — the panel adapts to the number of visible rows and only stops
           growing at the cap, so one search match gives a one-row panel. */
        .wt-cc-pop { position: absolute; z-index: 200; top: calc(100% + 6px); left: 0; width: 15rem; max-height: min(20rem, 60vh); display: flex; flex-direction: column; background: #0b0b11; border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,0.65); overflow: hidden; }
        /* LOAD-BEARING, whole subtree: .wt-cc-pop sets display:flex and .wt-cc-opt sets display:grid,
           and an author `display` beats the browser's `[hidden] { display: none }`. Without this,
           el.hidden = true changes the attribute and nothing on screen — which is why the panel shipped
           permanently open, and why filtering then failed to hide rows while typing. */
        .wt-cc [hidden] { display: none; }
        .wt-cc-search { flex: 0 0 auto; width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.05); border: none; border-bottom: 1px solid rgba(255,255,255,0.1); color: #fff; font-family: var(--font-body); font-size: 0.9rem; padding: 0.75rem 0.9rem; }
        .wt-cc-search::placeholder { color: var(--text-muted); }
        .wt-cc-search:focus { outline: none; background: rgba(255,255,255,0.08); }
        .wt-cc-list { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
        .wt-cc-opt { display: grid; grid-template-columns: 2.4rem 1fr; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem; cursor: pointer; font-size: 0.95rem; color: #fff; }
        .wt-cc-opt:hover, .wt-cc-opt:focus { background: rgba(216,180,254,0.12); }
        .wt-cc-opt[aria-selected="true"] { background: rgba(216,180,254,0.18); }
        .wt-cc-opt .wt-cc-iso { font-size: 0.8rem; letter-spacing: 0.06em; opacity: 0.65; }
        .wt-cc-opt .wt-cc-dial { color: var(--accent); }
        .wt-cc-sep { height: 1px; margin: 0.35rem 0.9rem; background: rgba(255,255,255,0.12); }
        .wt-cc-none { padding: 1rem 0.9rem; color: var(--text-muted); font-size: 0.9rem; }
        @media (max-width: 520px) { .wt-cc-pop { width: min(15rem, 82vw); } }
        .cf-turnstile { min-height: 65px; }
        form .cf-turnstile { margin: 1.25rem 0; }

        .magnetic { display: inline-block; position: relative; transition: transform 0.1s; }
        .submit-btn { background: #fff; color: #000; padding: 1.2rem 3rem; border: none; border-radius: 100px; font-family: var(--font-body); font-weight: 700; font-size: 1rem; letter-spacing: 0.2em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; transition: transform 0.1s; }
        .select-group { margin-bottom: 3rem; }
        .select-group select { display: none; }
        /* Custom Dropdown */
        .custom-select { position: relative; width: 100%; cursor: pointer; }
        .custom-select-trigger { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.2); transition: border-color 0.4s; }
        .custom-select.open .custom-select-trigger { border-bottom-color: var(--accent); }
        .custom-select-trigger span { color: var(--text-muted); font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; transition: color 0.3s, font-size 0.3s, letter-spacing 0.3s; }
        .custom-select.has-value .custom-select-trigger span { color: #fff; font-size: 1.15rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
        .custom-select-arrow { width: 12px; height: 12px; display: flex; align-items: center; justify-content: center; transition: transform 0.35s var(--ease-out); color: var(--accent); }
        .custom-select-arrow svg { width: 12px; height: 8px; }
        .custom-select.open .custom-select-arrow { transform: rotate(180deg); }
        .custom-select-options { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: rgba(10,10,18,0.95); backdrop-filter: blur(30px); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 0.5rem 0.5rem 0.6rem; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-8px); transition: max-height 0.4s var(--ease-out), opacity 0.3s, transform 0.3s var(--ease-out); z-index: 50; box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(168,85,247,0.05); }
        .custom-select.open .custom-select-options { max-height: 350px; opacity: 1; transform: translateY(0); overflow-y: auto; }
        .custom-select-option { padding: 0.85rem 1.2rem; color: rgba(255,255,255,0.6); font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; border-radius: 8px; transition: background 0.2s, color 0.2s, padding-left 0.25s; cursor: pointer; position: relative; }
        .custom-select-option:hover { background: rgba(168,85,247,0.1); color: #fff; padding-left: 1.6rem; }
        .custom-select-option:hover::before { content: ''; position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
        .custom-select-option.selected { color: var(--accent); font-weight: 600; }
        .custom-select-options::-webkit-scrollbar { width: 4px; }
        .custom-select-options::-webkit-scrollbar-track { background: transparent; }
        .custom-select-options::-webkit-scrollbar-thumb { background: rgba(168,85,247,0.3); border-radius: 4px; }



        /* --- Glassmorphism Modal --- */
        #detail-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background: rgba(2, 2, 4, 0.88); backdrop-filter: blur(40px); display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease-out); }
        #detail-modal.active { opacity: 1; pointer-events: all; }
        .modal-content { position: relative; width: 90vw; max-width: 1200px; height: 80vh; display: grid; grid-template-columns: 1fr 1.2fr; gap: 0; transform: translateY(40px) scale(0.98); transition: transform 0.6s var(--ease-out); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; background: rgba(255,255,255,0.03); overflow: hidden; }
        #detail-modal.active .modal-content { transform: translateY(0) scale(1); }
        .modal-media { width: 100%; height: 100%; background: #000; overflow: hidden; position: relative; display: none; }
        .modal-media img  { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transition: transform 10s ease-out; transform: scale(1.08); border-radius: 16px 0 0 16px; display: none; }
        .modal-media video { width: 100%; height: 100%; object-fit: cover; border-radius: 16px 0 0 16px; display: none; }
        #detail-modal.active .modal-media img { transform: scale(1); }
        .modal-text-wrap { padding: 4rem 3rem; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; }
        .modal-kicker { font-family: var(--font-body); font-weight: 600; color: var(--accent); font-size: 0.85rem; letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 1rem; }
        .modal-title { font-family: var(--font-head); font-size: clamp(2rem, 3.5vw, 3.5rem); font-weight: 700; line-height: 1.1; margin-bottom: 1.5rem; text-transform: uppercase; }
        .modal-desc { font-size: 1.1rem; line-height: 1.7; font-weight: 500; color: #ddd; margin-bottom: 2.5rem; }
        .close-btn-wrap { position: absolute; top: 1.5rem; right: 2rem; z-index: 1001; grid-column: 1 / -1; }
        .close-btn { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: #fff; border-radius: 50px; padding: 0.8rem 2rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; font-size: 0.85rem; transition: background 0.3s, color 0.3s; }
        .close-btn:hover { background: #fff; color: #000; }

        /* --- Stats Band --- */
        #stats { padding: 8vh 6vw; min-height: unset; }
        .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); padding: 5vh 0; }
        .stat-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; position: relative; }
        .stat-value { display: flex; align-items: baseline; gap: 3px; }
        .stat-num { font-family: var(--font-num); font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 700; color: #fff; line-height: 1; letter-spacing: -0.02em; }
        .stat-suffix { font-family: var(--font-num); font-size: clamp(1.5rem, 3vw, 3rem); font-weight: 700; color: var(--accent); line-height: 1; }
        .stat-label { font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
        .stat-item::after { content:''; position:absolute; right:0; top:20%; height:60%; width:1px; background: rgba(255,255,255,0.06); }
        .stat-item:last-child::after { display:none; }

        /* --- Work Counter --- */
        .work-counter { position:absolute; bottom:8vh; right:6vw; font-family:var(--font-num); font-size:clamp(0.9rem,1.5vw,1.1rem); letter-spacing:0.2em; color:rgba(255,255,255,0.3); z-index:2; pointer-events:none; transition:color 0.3s; }
        .work-counter-sep { color:rgba(255,255,255,0.1); margin:0 2px; }
        .work-counter-total { color:rgba(255,255,255,0.15); }
        .body.in-work-section .work-counter { color:rgba(255,255,255,0.6); }

        /* --- Work Progress Bar --- */
        #work-progress-bar { position: fixed; bottom: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(to right, var(--accent), #fff); z-index: 200; pointer-events: none; transition: opacity 0.4s; opacity: 0; box-shadow: 0 0 8px var(--accent); }
        body.in-work-section #work-progress-bar { opacity: 1; }

        /* --- Footer Upgrade --- */
        footer { padding: 5rem 6vw 3rem; border-top: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; gap: 3rem; pointer-events: auto; position: relative; overflow: visible; }
        .footer-wm { position: absolute; bottom: -2rem; left: 0; width: 100%; text-align: center; font-family: var(--font-head); font-size: clamp(4rem, 9vw, 9rem); font-weight: 700; color: rgba(255,255,255,0.025); white-space: nowrap; pointer-events: none; letter-spacing: 0.1em; user-select: none; overflow: hidden; }
        .footer-wm .retro-char { display: inline-block; position: relative; }
        .footer-wm .retro-char .retro-pixel { position: absolute; width: 4px; height: 4px; border-radius: 1px; pointer-events: none; opacity: 0; }
        @keyframes pixelRise { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 12% { opacity: 1; } 60% { opacity: 0.7; } 100% { opacity: 0; transform: translateY(-1.4em) scale(0.15); } }
        .footer-inner { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1; }
        .footer-copy { font-size: 0.9rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; }
        .footer-top { display: flex; align-items: center; gap: 0.6rem; color: var(--text-muted); text-decoration: none; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; transition: color 0.3s; }
        .footer-top:hover { color: var(--accent); }
        .social-links { display: flex; gap: 2rem; }
        .social-links a { color: var(--text-muted); text-decoration: none; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.85rem; transition: color 0.3s; }
        .social-links a:hover { color: #fff; }

        /* --- Scroll Velocity Indicator --- */
        #scroll-vel-line { position:fixed; right:0; top:50%; transform:translateY(-50%); width:2px; height:0px; background:linear-gradient(to bottom, transparent, var(--accent), transparent); border-radius:1px; pointer-events:none; z-index:300; transition:height 0.15s ease, opacity 0.4s; opacity:0; box-shadow:0 0 6px var(--accent); }

        /* --- Cross-Page Transition Wipe --- */
        #wt-page-wipe { position: fixed; inset: 0; background: #020204; z-index: 99998; transform: translateY(100%); pointer-events: none; transition: transform 0.7s cubic-bezier(0.7, 0, 0.2, 1); }
        #wt-page-wipe.cover { transform: translateY(0); }
        #wt-page-wipe.uncover { transform: translateY(-100%); }
        #wt-page-wipe::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(216,180,254,0.08) 0%, transparent 60%); }
        /* Full-width line box: `left:50%` caps the shrink-to-fit width at half the viewport
           and wraps the wordmark on phones. text-indent cancels the trailing letter-space. */
        #wt-page-wipe::after { content: 'KIASA'; --wipe-ls: clamp(0.16em, 1.1vw, 0.4em); position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; white-space: nowrap; font-family: var(--font-head); font-size: clamp(0.78rem, 3.4vw, 2rem); font-weight: 700; letter-spacing: var(--wipe-ls); text-indent: var(--wipe-ls); color: var(--accent); opacity: 0; transition: opacity 0.4s; }
        #wt-page-wipe.cover::after { opacity: 1; transition-delay: 0.3s; }

        /* --- Page Transition Wipe (in-page section nav) --- */
        #page-wipe { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 99998; transform: scaleY(0); transform-origin: top; pointer-events: none; }
        @keyframes wipeIn  { 0%{transform:scaleY(0);transform-origin:top}    50%{transform:scaleY(1);transform-origin:top}    50.01%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }
        .page-wipe-active { animation: wipeIn 0.7s var(--ease-out) forwards !important; }

        .nav-link span { display: inline-block; transition: transform 0.2s var(--ease-out); }

        /* --- Nav center badge --- */

        /* --- Global Scroll Progress Bar --- */
        #global-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(to right, var(--accent), #fff, var(--accent)); z-index: 99997; pointer-events: none; transition: width 0.1s linear; box-shadow: 0 0 6px var(--accent); }

        /* --- Bento Gradient Border --- */
        .bento-item::before { content:''; position:absolute; inset:0; border-radius:16px; padding:1px; background: conic-gradient(from var(--bento-angle, 0deg), transparent 60%, rgba(216,180,254,0.4) 80%, transparent 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity:0; transition: opacity 0.4s; pointer-events:none; }
        .bento-item:hover::before { opacity:1; animation: bentoSpin 3s linear infinite; }
        @keyframes bentoSpin { to { --bento-angle: 360deg; } }
        @property --bento-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

        /* The "Available for Projects" badge and its pulsing green dot were removed from the header;
           their rules (.available-badge / .available-dot / @keyframes pulse-dot) went with them, as
           nothing else on the page used them. */

        /* --- Hamburger Menu --- */
        /* 44px hit area. .nav-links is display:none at every width, so this is the ONLY navigation
           control on a phone, and at 4px padding around three 24px bars it rendered about 32x22 CSS
           px — under the 24x24 WCAG 2.5.8 minimum and well under the 44px platform guideline. The
           bars are unchanged; the padding grows the target, and centring keeps it looking identical. */
        .hamburger { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; min-width: 44px; min-height: 44px; margin: -11px -10px; z-index: 201; }
        .hamburger span { display: block; width: 24px; height: 1.5px; background: #fff; border-radius: 2px; transition: transform 0.4s var(--ease-out), opacity 0.3s; transform-origin: center; }
        .hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
        .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
        .hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
        .mobile-menu { position: fixed; inset: 0; background: rgba(2,2,4,0.98); backdrop-filter: blur(30px); z-index: 200; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 6rem 2rem 3rem; opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease-out); overflow-y: auto; }
        .mobile-menu.open { opacity: 1; pointer-events: all; }
        .mobile-menu-brand { font-family: var(--font-head); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); opacity: 0.6; margin-bottom: 1rem; }
        .mobile-menu-links { display: flex; flex-direction: column; align-items: center; gap: 0; flex: 1; justify-content: center; width: 100%; }
        .mobile-menu .m-link { font-family: var(--font-head); font-size: clamp(1.4rem, 4vw, 3rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; text-decoration: none; transition: color 0.3s, transform 0.3s; padding: 1rem 0; display: block; width: 100%; text-align: center; position: relative; opacity: 0; transform: translateY(20px); }
        .mobile-menu.open .m-link { opacity: 1; transform: translateY(0); }
        .mobile-menu.open .m-link:nth-child(1) { transition: opacity 0.5s 0.1s var(--ease-out), transform 0.5s 0.1s var(--ease-out), color 0.3s; }
        .mobile-menu.open .m-link:nth-child(2) { transition: opacity 0.5s 0.15s var(--ease-out), transform 0.5s 0.15s var(--ease-out), color 0.3s; }
        .mobile-menu.open .m-link:nth-child(3) { transition: opacity 0.5s 0.2s var(--ease-out), transform 0.5s 0.2s var(--ease-out), color 0.3s; }
        .mobile-menu.open .m-link:nth-child(4) { transition: opacity 0.5s 0.25s var(--ease-out), transform 0.5s 0.25s var(--ease-out), color 0.3s; }
        .mobile-menu.open .m-link:nth-child(5) { transition: opacity 0.5s 0.3s var(--ease-out), transform 0.5s 0.3s var(--ease-out), color 0.3s; }
        .mobile-menu.open .m-link:nth-child(6) { transition: opacity 0.5s 0.35s var(--ease-out), transform 0.5s 0.35s var(--ease-out), color 0.3s; }
        .mobile-menu.open .m-link:nth-child(7) { transition: opacity 0.5s 0.4s var(--ease-out), transform 0.5s 0.4s var(--ease-out), color 0.3s; }
        .mobile-menu .m-link::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 1px; background: rgba(255,255,255,0.06); }
        .mobile-menu .m-link:last-child::after { display: none; }
        .mobile-menu .m-link:hover, .mobile-menu .m-link:active { color: var(--accent); }
        .mobile-menu-footer { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding-top: 2rem; opacity: 0; transform: translateY(15px); }
        .mobile-menu.open .mobile-menu-footer { opacity: 1; transform: translateY(0); transition: opacity 0.5s 0.5s var(--ease-out), transform 0.5s 0.5s var(--ease-out); }
        .mobile-menu-socials { display: flex; gap: 2rem; }
        .mobile-menu-socials a { color: var(--text-muted); text-decoration: none; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; transition: color 0.3s; }
        .mobile-menu-socials a:hover { color: #fff; }
        .mobile-menu-whatsapp { display: flex; align-items: center; gap: 8px; color: #4ade80; font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; }
        .mobile-menu-whatsapp::before { content: ''; display: block; width: 6px; height: 6px; background: #4ade80; border-radius: 50%; box-shadow: 0 0 8px #4ade80; }

        /* --- Marquee Ticker --- */
        .marquee-section { overflow: hidden; border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); padding: 1.4rem 0; background: rgba(255,255,255,0.01); pointer-events: none; }
        .marquee-track { display: flex; gap: 0; width: max-content; animation: marqueeScroll 28s linear infinite; }
        .marquee-track:hover { animation-play-state: paused; }
        @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        .marquee-item { display: flex; align-items: center; gap: 2.5rem; padding: 0 2.5rem; white-space: nowrap; }
        .marquee-item span { font-family: var(--font-body); font-size: 0.88rem; font-weight: 600; letter-spacing: 0.35em; text-transform: uppercase; color: rgba(255,255,255,0.35); }
        .marquee-item .marquee-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

        /* --- Testimonials --- */
        #testimonials { min-height: 70vh; align-items: center; text-align: center; overflow: hidden; }
        .testimonial-slider { width: 100%; max-width: 900px; margin: 4rem auto 0; position: relative; min-height: 280px; }
        .testimonial-slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); pointer-events: none; }
        .testimonial-slide.active { opacity: 1; transform: translateY(0); pointer-events: all; }
        .testimonial-quote { font-family: var(--font-head); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.45; font-weight: 400; color: #fff; }
        .testimonial-quote::before { content: '\201C'; color: var(--accent); }
        .testimonial-quote::after  { content: '\201D'; color: var(--accent); }
        .testimonial-author { font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
        .testimonial-author strong { color: var(--accent); display: block; margin-bottom: 0.3rem; font-size: 1rem; letter-spacing: 0.15em; }
        .testimonial-dots { display: flex; gap: 1rem; justify-content: center; align-items: center; position: relative; }
        .t-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.2); border: none; cursor: pointer; transition: background 0.3s, transform 0.3s, box-shadow 0.3s; padding: 8px; background-clip: content-box; }
        .t-dot.active { background: var(--accent); transform: scale(1.3); box-shadow: 0 0 10px rgba(168,85,247,0.4); background-clip: content-box; }

        /* --- Process Timeline --- */
        #process { padding: 15vh 6vw; }
        .process-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-top: 5rem; background: rgba(255,255,255,0.05); border-radius: 16px; overflow: hidden; }
        .process-step { background: var(--bg); padding: 2.5rem 2rem; display: flex; flex-direction: column; gap: 1.2rem; position: relative; transition: background 0.4s; cursor: default; }
        .process-step:hover { background: rgba(216,180,254,0.04); }
        .process-step-num { font-family: var(--font-num); font-size: 0.8rem; color: var(--accent); letter-spacing: 0.2em; font-weight: 700; }
        .process-step-title { font-family: var(--font-head); font-size: clamp(1rem, 1.5vw, 1.4rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.2; }
        .process-step-desc { font-family: var(--font-body); font-size: 1rem; color: var(--text-muted); line-height: 1.6; font-weight: 500; max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease-out), opacity 0.4s; opacity: 0; }
        .process-step:hover .process-step-desc { max-height: 200px; opacity: 1; }
        .process-connector { position: absolute; top: 2.8rem; right: -8px; width: 16px; height: 1px; background: rgba(216,180,254,0.3); z-index: 2; }
        .process-step:last-child .process-connector { display: none; }

        /* --- FAQ Accordion --- */
        #faq { padding: 15vh 6vw; }
        .faq-list { margin-top: 4rem; max-width: 860px; }
        .faq-item { border-bottom: 1px solid rgba(255,255,255,0.06); }
        .faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 2rem 0; background: none; border: none; color: #fff; text-align: left; font-family: var(--font-head); font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; cursor: pointer; gap: 2rem; transition: color 0.3s; }
        .faq-question:hover { color: var(--accent); }
        .faq-icon { width: 28px; height: 28px; border: 1px solid rgba(255,255,255,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; line-height: 1; transition: transform 0.4s var(--ease-out), border-color 0.3s, background 0.3s; color: var(--accent); }
        .faq-item.open .faq-icon { transform: rotate(45deg); border-color: var(--accent); background: var(--accent-dim); }
        .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease-out), padding 0.4s; }
        .faq-answer-inner { padding-bottom: 2rem; font-family: var(--font-body); font-size: 1.1rem; line-height: 1.7; color: var(--text-muted); font-weight: 500; max-width: 700px; }
        .faq-item.open .faq-answer { max-height: 400px; }

        /* --- Cookie Banner --- */
        #cookie-banner { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(120%); z-index: 9997; background: rgba(10,10,18,0.92); border: 1px solid rgba(255,255,255,0.06); backdrop-filter: blur(30px); border-radius: 16px; padding: 1.5rem 2rem; display: flex; align-items: center; gap: 1.5rem; max-width: 640px; width: calc(100% - 2rem); transition: transform 0.6s var(--ease-out), opacity 0.4s; box-shadow: 0 12px 50px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04); }
        #cookie-banner.show { transform: translateX(-50%) translateY(0); }
        .cookie-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: rgba(168,85,247,0.1); border: 1px solid rgba(168,85,247,0.15); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
        .cookie-body { flex: 1; }
        .cookie-title { font-family: var(--font-head); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin-bottom: 0.3rem; }
        .cookie-text { font-family: var(--font-body); font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; font-weight: 500; }
        .cookie-text a { color: var(--accent); text-decoration: none; }
        .cookie-actions { display: flex; gap: 0.6rem; flex-shrink: 0; }
        .cookie-accept { background: #fff; color: #000; border: none; border-radius: 100px; padding: 0.55rem 1.4rem; font-family: var(--font-body); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: transform 0.2s, box-shadow 0.2s; }
        .cookie-accept:hover { transform: scale(1.05); box-shadow: 0 4px 20px rgba(167,139,250,0.2); }
        .cookie-decline { background: transparent; border: 1px solid rgba(255,255,255,0.1); color: var(--text-muted); border-radius: 100px; padding: 0.55rem 1.2rem; font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: border-color 0.2s, color 0.2s; }
        .cookie-decline:hover { border-color: rgba(255,255,255,0.25); color: #fff; }

        /* --- Floating Scroll-to-Top --- */
        #scroll-top-btn { position: fixed; bottom: 2.5rem; left: 2.5rem; z-index: 500; width: 50px; height: 50px; border-radius: 50%; background: rgba(10,10,18,0.7); border: none; color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s, transform 0.3s; backdrop-filter: blur(16px); cursor: pointer; padding: 0; }
        #scroll-top-btn.visible { opacity: 1; pointer-events: auto; }
        #scroll-top-btn:hover { transform: scale(1.1); }
        #scroll-top-btn:hover .scroll-arrow { transform: translateY(-2px); }
        .scroll-arrow { transition: transform 0.3s; z-index: 2; position: absolute; }
        .scroll-progress-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
        .scroll-progress-ring circle { fill: none; stroke-width: 2; }
        .scroll-progress-track { stroke: rgba(255,255,255,0.08); }
        .scroll-progress-fill { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 0.15s; filter: drop-shadow(0 0 4px rgba(168,85,247,0.5)); }

        @media (max-width: 1024px) {
            nav { padding: 1.5rem 5vw; }
            .nav-links { gap: 1.5rem; }
            h1, #typed-heading { font-size: clamp(2.2rem, 9vw, 4.5rem); }
            section { padding: 10vh 5vw; }
            .bento-grid { grid-template-columns: 1fr; grid-template-rows: auto; gap: 1rem; margin-top: 3rem; }
            .bento-item { padding: 2rem; min-height: 220px; }
            .bento-item:nth-child(n) { grid-column: span 1; grid-row: span 1; }
            .bento-item h3 { font-size: 1.3rem; }
            .bento-item p { font-size: 0.98rem; }
            #contact { grid-template-columns: 1fr; gap: 3rem; }
            .modal-content { grid-template-columns: 1fr; gap: 0; }
            .form-panel { padding: 2.5rem; }
            .modal-content { height: auto; max-height: 85vh; overflow-y: auto; display: flex; flex-direction: column; border-radius: 20px; width: 92vw; align-items: center; }
            .modal-text-wrap { padding: 3.5rem 2rem 1.5rem; text-align: center; align-items: center; justify-content: center; flex: 1; display: flex; flex-direction: column; }
            .modal-kicker { text-align: center; }
            .modal-title { text-align: center; font-size: clamp(1.6rem, 6vw, 2.5rem); }
            .modal-desc { text-align: center; font-size: 1rem; margin-bottom: 0; }
            .modal-media { display: none !important; }
            .close-btn-wrap { position: relative; top: auto; right: auto; order: 10; display: flex; justify-content: center; padding: 1.5rem 0 2.5rem; }
            .close-btn { padding: 0.8rem 2.5rem; font-size: 0.8rem; }
            /* --- Mobile Work Section: same scroll-driven horizontal as desktop, adjusted sizing --- */
            #work-wrapper { margin-top: 5vh; }
            .work-header { left: 5vw; top: 12vh; }
            .work-track { gap: 4vw; padding: 0 50vw 0 5vw; }
            .h-project { flex: 0 0 75vw; height: 55vh; }
            .swipe-hint { display: none !important; }
            #cursor-dot, #cursor-ring, #cursor-view-label { display: none; } * { cursor: auto; }
            footer { flex-direction: column; gap: 2rem; text-align: center; padding: 3rem 5vw; }
            .footer-inner { flex-direction: column; gap: 1.5rem; align-items: center; }
            .parallax-el { display: none; }
            #sound-toggle { bottom: calc(1.5rem + 54px + 0.75rem + env(safe-area-inset-bottom, 0px)); right: 1.5rem; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .stat-item::after { display:none; }
            .h-project[data-bg] { background-size: cover; background-position: center; }
            .reel-content { padding: 3rem 5vw; }
            #reel { min-height: 50vh; }
            .hero-scroll-hint { display: none; }
            .process-grid { grid-template-columns: 1fr; }
            .process-connector { display: none; }
            #testimonials { min-height: auto; padding: 10vh 5vw; }
            .testimonial-slider { min-height: 320px; }
            #cookie-banner { flex-direction: column; align-items: stretch; gap: 1rem; bottom: 1rem; padding: 1.2rem 1.5rem; }
            .cookie-icon { align-self: flex-start; }
            .cookie-actions { justify-content: stretch; }
            .cookie-accept, .cookie-decline { flex: 1; text-align: center; }
            #scroll-top-btn { bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); left: 1.5rem; }
            .hero-bottom { grid-template-columns: 1fr; gap: 2rem; }
            .hero-center-label { top: 42%; }
            #hero { padding: 0 5vw 5vh; padding-bottom: max(5vh, env(safe-area-inset-bottom, 0px)); }
            /* Reduce expensive backdrop-filter on mobile GPUs */
            nav.scrolled { backdrop-filter: blur(10px); }
            .form-panel, .case-modal-inner { backdrop-filter: blur(10px); }
            #detail-modal { backdrop-filter: blur(15px); }
            #drawer-backdrop { backdrop-filter: blur(15px); }
            .mobile-menu { backdrop-filter: blur(15px); }
            /* Disable non-essential backdrop-filters entirely */
            .kicker, .drawer-close-btn, #cursor-view-label.cursor-play { backdrop-filter: none; }
            /* Reduce box-shadow complexity */
            .case-modal-inner { box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
            #cursor-trail-glow { display: none !important; }
            /* Static hero glow — no animation but keeps atmospheric depth */
            #hero::before { animation: none !important; opacity: 0.85; }
            /* Disable letterbox fast-scroll effect */
            .letterbox { display: none !important; }
            /* Simpler marquee — reduce composite layer */
            .marquee-track { animation-duration: 40s; }
            /* Promote canvas to its own layer and hint the browser */
            #webgl-canvas { will-change: contents; contain: strict; }
            /* Contain layout recalculations within sections */
            section { contain: content; }
        }

        /* --- UPGRADE 2: 3D tilt on project cards --- */
        .h-project { perspective: 800px; transform-style: preserve-3d; }
        .h-project-inner { transform-style: preserve-3d; transition: transform 0.1s ease; width:100%; height:100%; }

        /* --- UPGRADE 4: Shimmer highlight on project cards --- */
        .h-project::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0) 100%); opacity:0; transition:opacity 0.4s; z-index:4; border-radius:14px; pointer-events:none; }
        .h-project:hover::after { opacity:1; }

        /* --- UPGRADE 5: Awards badges --- */
        .awards-row { display:flex; flex-wrap:wrap; gap:1rem; margin-top:3rem; }
        .award-badge { display:flex; align-items:center; gap:0.6rem; border:1px solid rgba(216,180,254,0.2); border-radius:100px; padding:0.6rem 1.4rem; font-family:var(--font-body); font-size:0.82rem; font-weight:600; letter-spacing:0.15em; text-transform:uppercase; color:rgba(255,255,255,0.6); background:rgba(216,180,254,0.04); }
        .award-icon { color:var(--accent); font-size:0.9rem; }

        /* --- UPGRADE 7: Modal results bullets --- */
        .modal-results { list-style:none; margin-bottom:1.5rem; display:flex; flex-direction:column; gap:0.6rem; }
        .modal-results li { font-family:var(--font-body); font-size:1rem; color:rgba(255,255,255,0.65); font-weight:500; padding-left:1.2rem; position:relative; }
        .modal-results li::before { content:'→'; position:absolute; left:0; color:var(--accent); }

        /* --- UPGRADE 9: Manifesto word-by-word reveal --- */
        .m-word { display:inline; opacity:0; transition: opacity 0.6s var(--ease-out) calc(var(--i)*0.05s); }
        .manifesto-text.revealed .m-word { opacity:1; }

        /* --- Cinematic Project Modal --- */
        /* pointer-events on the PANEL, not on this full-screen flex wrapper. The wrapper is inset:0
           at z-index 5000, so `pointer-events:all` on it covered #drawer-backdrop (4999) completely
           and the backdrop's click-to-close could never fire — the only way out was the X button. */
        #case-drawer { position:fixed; inset:0; z-index:5000; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.5s var(--ease-out); }
        #case-drawer.open { opacity:1; pointer-events:none; }
        #case-drawer.open .case-modal-inner { pointer-events:auto; }
        #drawer-backdrop { position:fixed; inset:0; background:rgba(2,2,4,0.92); backdrop-filter:blur(50px); z-index:4999; opacity:0; pointer-events:none; transition:opacity 0.5s; }
        #drawer-backdrop.open { opacity:1; pointer-events:all; }

        .case-modal-inner { width:90vw; max-width:1200px; height:75vh; display:grid; grid-template-columns:1.1fr 1fr; border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,0.06); background:rgba(10,10,15,0.85); backdrop-filter:blur(30px); transform:scale(0.92) translateY(30px); transition:transform 0.7s var(--ease-out); position:relative; box-shadow: 0 40px 120px rgba(0,0,0,0.7), 0 0 1px rgba(216,180,254,0.2), inset 0 1px 0 rgba(255,255,255,0.04); }
        #case-drawer.open .case-modal-inner { transform:scale(1) translateY(0); }

        /* Animated corner accents */
        .case-modal-inner::before, .case-modal-inner::after { content:''; position:absolute; width:60px; height:60px; border:1px solid rgba(216,180,254,0.15); pointer-events:none; z-index:10; opacity:0; transition:opacity 0.6s 0.3s; }
        .case-modal-inner::before { top:12px; left:12px; border-right:none; border-bottom:none; border-radius:4px 0 0 0; }
        .case-modal-inner::after { bottom:12px; right:12px; border-left:none; border-top:none; border-radius:0 0 4px 0; }
        #case-drawer.open .case-modal-inner::before, #case-drawer.open .case-modal-inner::after { opacity:1; }

        .drawer-close { position:absolute; top:1.2rem; right:1.5rem; z-index:10; padding:0; background:none; border:none; }
        .drawer-close-btn { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#fff; border-radius:50%; width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-family:var(--font-body); font-weight:600; font-size:1rem; cursor:pointer; transition:background 0.3s, border-color 0.3s, transform 0.3s; backdrop-filter:blur(10px); }
        .drawer-close-btn:hover { background:rgba(255,255,255,0.1); border-color:var(--accent); transform:rotate(90deg); }

        /* Left: media with overlay */
        .drawer-media { position:relative; overflow:hidden; background:#000; }
        .drawer-media img, .drawer-media video { width:100%; height:100%; object-fit:cover; display:block; opacity:0; transform:scale(1.08); animation:none; }
        #case-drawer.open .drawer-media img, #case-drawer.open .drawer-media video { animation: caseMediaReveal 1s var(--ease-out) 0.2s forwards; }
        @keyframes caseMediaReveal { to { opacity:0.85; transform:scale(1); } }
        .drawer-media::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, transparent 40%, rgba(2,2,4,0.7) 100%); pointer-events:none; }

        /* Right: content with staggered reveals */
        .drawer-body { padding:3.5rem 3rem; display:flex; flex-direction:column; justify-content:center; gap:1.8rem; overflow-y:auto; }
        .drawer-kicker { font-family:var(--font-num); font-size:0.68rem; font-weight:700; letter-spacing:0.4em; text-transform:uppercase; color:var(--accent); opacity:0; transform:translateY(15px); transition:opacity 0.5s 0.3s var(--ease-out), transform 0.5s 0.3s var(--ease-out); }
        .drawer-title { font-family:var(--font-head); font-size:clamp(1.6rem,3.2vw,2.8rem); font-weight:700; text-transform:uppercase; letter-spacing:-0.02em; line-height:1.08; opacity:0; transform:translateY(15px); transition:opacity 0.5s 0.4s var(--ease-out), transform 0.5s 0.4s var(--ease-out); }
        .drawer-desc { font-family:var(--font-body); font-size:1rem; line-height:1.8; color:rgba(255,255,255,0.6); font-weight:500; opacity:0; transform:translateY(15px); transition:opacity 0.5s 0.5s var(--ease-out), transform 0.5s 0.5s var(--ease-out); }
        .drawer-results { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:0.5rem 1.5rem; opacity:0; transform:translateY(15px); transition:opacity 0.5s 0.6s var(--ease-out), transform 0.5s 0.6s var(--ease-out); }
        .drawer-results li { font-family:var(--font-body); font-size:0.88rem; color:rgba(255,255,255,0.55); font-weight:500; padding-left:1.2rem; position:relative; line-height:1.5; }
        .drawer-results li::before { content:'→'; position:absolute; left:0; color:var(--accent); font-size:0.8rem; }
        .drawer-divider { height:1px; background:linear-gradient(to right, var(--accent-dim), transparent); opacity:0; transition:opacity 0.5s 0.7s; }
        .drawer-tag { font-family:var(--font-num); font-size:0.62rem; letter-spacing:0.25em; color:rgba(255,255,255,0.15); text-transform:uppercase; opacity:0; transition:opacity 0.5s 0.8s; }

        #case-drawer.open .drawer-kicker,
        #case-drawer.open .drawer-title,
        #case-drawer.open .drawer-desc,
        #case-drawer.open .drawer-results,
        #case-drawer.open .drawer-divider,
        #case-drawer.open .drawer-tag { opacity:1; transform:translateY(0); }

        /* Project number watermark */
        .drawer-project-num { position:absolute; bottom:2rem; left:2rem; font-family:var(--font-num); font-size:clamp(5rem, 10vw, 10rem); font-weight:700; color:rgba(255,255,255,0.02); line-height:1; pointer-events:none; z-index:0; }

        @media (max-width:1024px) {
            .case-modal-inner { grid-template-columns:1fr; height:90vh; width:95vw; }
            .drawer-media { height:35vh; }
            .drawer-body { padding:2rem 1.8rem; }
            .drawer-results { grid-template-columns:1fr; }
        }
        @media (max-width:600px) {
            .case-modal-inner { height:95vh; width:100%; border-radius:0; }
            .drawer-body { padding:1.5rem 1.2rem; gap:1.2rem; }
        }

        /* --- UPGRADE 6: Scene vignette pulse --- */
        #scene-vignette { position:fixed; inset:0; pointer-events:none; z-index:3; background:radial-gradient(ellipse at center, transparent 40%, rgba(2,2,4,0.85) 100%); transition:opacity 0.1s; }

        /* --- UPGRADE 8: God rays --- */
        #god-rays { position:fixed; top:-20%; left:50%; transform:translateX(-50%); width:120%; height:130%; pointer-events:none; z-index:2; opacity:0.04; background: conic-gradient(from 270deg at 50% -10%, rgba(216,180,254,0.8) 0deg, transparent 15deg, transparent 30deg, rgba(216,180,254,0.5) 33deg, transparent 48deg, transparent 70deg, rgba(216,180,254,0.6) 73deg, transparent 88deg, transparent 120deg, rgba(216,180,254,0.4) 123deg, transparent 138deg, transparent 360deg); animation: godRayRotate 12s linear infinite; }
        @keyframes godRayRotate { from{transform:translateX(-50%) rotate(0deg);} to{transform:translateX(-50%) rotate(360deg);} }

        /* --- Cursor Click Ripple --- */
        .cursor-ripple { position:fixed; pointer-events:none; z-index:99999; border-radius:50%; border:1.5px solid rgba(216,180,254,0.8); transform:translate(-50%,-50%) scale(0); animation:rippleOut 0.65s var(--ease-out) forwards; }
        @keyframes rippleOut { 0%{width:0px;height:0px;opacity:1;transform:translate(-50%,-50%) scale(1);} 100%{width:120px;height:120px;opacity:0;transform:translate(-50%,-50%) scale(1);} }

        @media (max-width: 600px) {
            h1, #typed-heading { font-size: clamp(1.7rem, 9vw, 2.8rem); }
            #typed-heading { font-size: clamp(1.5rem, 8vw, 2.4rem); word-break: break-word; overflow-wrap: break-word; }
            .hero-right { display: flex; padding-bottom: 0; gap: 1.2rem; }
            .hero-desc { font-size: 0.78rem; line-height: 1.55; letter-spacing: 0.03em; max-width: 100%; }
            .hero-bottom { gap: 1.2rem; padding-top: 1.5rem; }
            .hero-center-label { top: 36%; }
            .hero-center-label span { font-size: 0.55rem; letter-spacing: 0.3em; }
            .hero-cl-line { width: 18px; }
            h2 { font-size: clamp(1.6rem, 8vw, 2.6rem); }
            .nav-links { gap: 1rem; font-size: 0.75rem; }
            .logo { font-size: 0.85rem; }
            .kicker { font-size: 0.7rem; padding: 0.5rem 1rem; letter-spacing: 0.22em; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; padding: 4vh 0; }
            .stat-num { font-size: clamp(2rem, 11vw, 3.5rem); }
            .stat-label { font-size: 0.7rem; letter-spacing: 0.18em; }
            .h-project { flex: 0 0 80vw; height: 50vh; }
            .modal-content { height: 95vh; }
            .modal-title { font-size: clamp(1.4rem, 6vw, 2rem); }
            section { padding: 8vh 5vw; }
            .form-panel { padding: 1.8rem 1.5rem; }
            .input-group { margin-bottom: 2.2rem; }
            #stats { padding: 5vh 5vw; }
            .reel-headline { font-size: clamp(1.9rem, 9vw, 3.5rem); }
            .manifesto-text { font-size: clamp(1.3rem, 6vw, 2rem); line-height: 1.45; }
            .work-header { padding: 0 5vw 2rem; }
        }
        @media (max-width: 380px) {
            h1, #typed-heading { font-size: clamp(1.5rem, 8.5vw, 2.2rem); }
            #typed-heading { font-size: clamp(1.3rem, 7.5vw, 2rem); }
            .hero-desc { font-size: 0.72rem; letter-spacing: 0.02em; }
            .hero-center-label span { font-size: 0.5rem; letter-spacing: 0.25em; }
            .hero-center-label { top: 34%; }
        }
        /* --- Reduced Motion Accessibility --- */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
            .parallax-el, #god-rays, #scene-vignette, .grain, .letterbox { display: none !important; }
            #webgl-canvas { opacity: 0.3; }
            .marquee-track { animation: none !important; }
            .split-char, .m-word { opacity: 1 !important; transform: none !important; }
            .fade-up { opacity: 1 !important; transform: none !important; }
            .h-project { transform: none !important; }
        }

        /* --- Text Split Letter Animation --- */
        .split-char { display: inline-block; opacity: 0; transform: translateY(35px) rotateX(-60deg); transition: opacity 0.45s var(--ease-out), transform 0.55s var(--ease-out); transform-origin: center bottom; }
        .split-char.sp { width: 0.35em; }
        .split-revealed .split-char { opacity: 1; transform: translateY(0) rotateX(0deg); }

        /* --- Section Background Mood Gradients --- */
        #about-1 { background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(139,92,246,0.03) 0%, transparent 70%); }
        #reel { background: radial-gradient(ellipse at center, rgba(88,28,135,0.08) 0%, transparent 70%); }
        #capabilities { background: radial-gradient(ellipse 60% 40% at 30% 50%, rgba(99,102,241,0.04) 0%, transparent 70%); }
        .work-sticky { background: radial-gradient(ellipse at 70% 50%, rgba(139,92,246,0.04) 0%, transparent 70%); }
        #contact { background: radial-gradient(ellipse 70% 50% at 60% 60%, rgba(216,180,254,0.04) 0%, transparent 70%); }
        #testimonials { background: radial-gradient(ellipse at center, rgba(129,140,248,0.03) 0%, transparent 70%); }
        #process { background: radial-gradient(ellipse at 40% 50%, rgba(216,180,254,0.03) 0%, transparent 60%); }
        #faq { background: radial-gradient(ellipse at 60% 40%, rgba(99,102,241,0.02) 0%, transparent 60%); }

        /* --- Enhanced Preloader SVG Logo Draw --- */
        .preloader-logo-svg { position: relative; z-index: 1; margin-bottom: 2rem; }
        .preloader-logo-svg path { stroke-dasharray: 300; stroke-dashoffset: 300; animation: logoStrokeDraw 2.5s cubic-bezier(0.16,1,0.3,1) forwards; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
        @keyframes logoStrokeDraw { to { stroke-dashoffset: 0; } }
        .preloader-logo-svg .logo-fill { fill: var(--accent); fill-opacity: 0; animation: logoFillIn 1s ease 2s forwards; }
        @keyframes logoFillIn { to { fill-opacity: 0.15; } }

        /* --- Nav Magnetic Hover Glow --- */
        .nav-link { position: relative; }
        .nav-link::before { content:''; position:absolute; inset:-8px -14px; border-radius:8px; background:radial-gradient(ellipse at center, rgba(216,180,254,0.1) 0%, transparent 70%); opacity:0; transition:opacity 0.35s; pointer-events:none; z-index:-1; }
        .nav-link:hover::before { opacity:1; }

        /* --- Acquire CTA link --- */
        .nav-link.nav-cta { color: var(--accent); letter-spacing: 0.25em; }
        .nav-link.nav-cta::after { background: var(--accent); }
        .nav-link.nav-cta::before { background: radial-gradient(ellipse at center, rgba(216,180,254,0.18) 0%, transparent 70%); }
        .mobile-menu .m-link.m-link-cta { color: var(--accent); }

        /* --- Touch Swipe Hint (mobile) --- */
        .swipe-hint { display: none; position: absolute; bottom: 4vh; left: 50%; transform: translateX(-50%); font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.35em; text-transform: uppercase; color: rgba(255,255,255,0.25); pointer-events: none; z-index: 2; white-space: nowrap; }
        .swipe-hint::after { content: ''; display: inline-block; width: 24px; height: 1px; background: rgba(255,255,255,0.2); vertical-align: middle; margin-left: 0.8rem; animation: swipeSlide 1.8s ease-in-out infinite; }
        @keyframes swipeSlide { 0%,100%{transform:translateX(0);opacity:0.3} 50%{transform:translateX(8px);opacity:0.8} }
        @media (max-width: 1024px) { .swipe-hint { display: block; } }

        /* --- Cursor Section Morphing --- */
        #cursor-view-label.cursor-play { background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.2); color: #fff; }
        #cursor-view-label.cursor-arrow { background: transparent; border: none; color: rgba(255,255,255,0.5); font-size: 1.4rem; padding: 0; }
        #cursor-view-label.cursor-hand { background: transparent; border: none; color: var(--accent); font-size: 1.1rem; padding: 0; }

        /* --- Project Card Staggered Entrance --- */
        .h-project { opacity: 0; transform: perspective(800px) translateY(60px) rotateY(15deg); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
        .h-project.card-visible { opacity: 1; transform: perspective(800px) translateY(0) rotateY(0deg); }
        .h-project:nth-child(even) { transform: perspective(800px) translateY(60px) rotateY(-15deg); }
        .h-project:nth-child(even).card-visible { transform: perspective(800px) translateY(0) rotateY(0deg); }


        /* --- Singapore Clock in Nav --- */
        .nav-clock { font-family: var(--font-num); font-size: 0.65rem; letter-spacing: 0.2em; color: rgba(255,255,255,0.35); white-space: nowrap; margin-left: auto; margin-right: 2rem; }
        .nav-clock-label { color: rgba(255,255,255,0.2); margin-right: 0.4em; }
        @media (max-width: 1024px) { .nav-clock { display: none; } }

        /* --- Testimonial Arrows --- */
        .testimonial-nav { display: flex; align-items: center; gap: 2rem; justify-content: center; margin-top: 4rem; }
        .testimonial-arrow { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.3s, color 0.3s, transform 0.3s, background 0.3s; font-size: 1.2rem; }
        .testimonial-arrow:hover { border-color: var(--accent); color: var(--accent); background: rgba(168,85,247,0.08); transform: scale(1.1); }

        /* --- Mobile Menu Close Button --- */
        .mobile-close { position: absolute; top: 2rem; right: 2rem; background: none; border: 1px solid rgba(255,255,255,0.15); color: #fff; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.4rem; transition: border-color 0.3s, color 0.3s, transform 0.3s; z-index: 201; }
        .mobile-close:hover { border-color: var(--accent); color: var(--accent); transform: rotate(90deg) scale(1.1); }

        /* --- Cursor Trail Glow --- */
        #cursor-trail-glow { position: fixed; pointer-events: none; z-index: 9998; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, rgba(216,180,254,0.15) 0%, transparent 70%); transform: translate(-50%, -50%); filter: blur(8px); opacity: 0; transition: opacity 0.3s; }
        body:not(.hovering) #cursor-trail-glow.active { opacity: 1; }


        /* =============== CLIENT LOGOS TRUST BAR =============== */
        .trust-bar { padding: 6vh 6vw; text-align: center; }
        .trust-bar .kicker { margin-bottom: 3rem; }
        /* --- Client Marquee Slider --- */
        .client-marquee-section { padding: 8vh 0; overflow: hidden; position: relative; }
        .client-marquee-section::before, .client-marquee-section::after { content:''; position: absolute; top: 0; bottom: 0; width: 12vw; z-index: 2; pointer-events: none; }
        .client-marquee-section::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
        .client-marquee-section::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
        .client-marquee-track { display: flex; gap: 0; width: max-content; will-change: transform; }
        .client-marquee-track.row-1 { animation: clientScroll 45s linear infinite; }
        .client-marquee-track.row-2 { animation: clientScroll 45s linear infinite reverse; margin-top: 1.2rem; }
        @keyframes clientScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        .client-marquee-track:hover { animation-play-state: paused; }
        .client-name { display: flex; align-items: center; gap: 2.5rem; padding: 0 2.5rem; white-space: nowrap; font-family: var(--font-head); font-size: clamp(0.72rem, 1.2vw, 0.95rem); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.3); transition: color 0.3s; cursor: default; }
        .client-name:hover { color: var(--accent); }
        .client-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; opacity: 0.5; box-shadow: 0 0 8px rgba(168,85,247,0.3); }
        @media (max-width: 1024px) {
            .client-marquee-track.row-1 { animation-duration: 35s; }
            .client-marquee-track.row-2 { animation-duration: 35s; }
            .client-name { font-size: 0.65rem; padding: 0 1.5rem; gap: 1.5rem; }
        }

        /* =============== CTA BANNER =============== */
        .cta-banner { padding: 12vh 6vw; text-align: center; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; }
        .cta-banner::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(139,92,246,0.08) 0%, transparent 70%); pointer-events:none; }
        .cta-banner h2 { position: relative; z-index: 1; }
        .cta-sub { font-family: var(--font-body); font-size: clamp(1rem, 1.5vw, 1.3rem); color: var(--text-muted); font-weight: 500; max-width: 600px; line-height: 1.7; position: relative; z-index: 1; }
        .cta-btn { display: inline-flex; align-items: center; gap: 12px; background: #fff; color: #000; padding: 1.2rem 3rem; border: none; border-radius: 100px; font-family: var(--font-body); font-weight: 700; font-size: 1rem; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; transition: transform 0.3s, box-shadow 0.3s; position: relative; z-index: 1; }
        .cta-btn:hover { transform: scale(1.05); box-shadow: 0 8px 40px rgba(168,85,247,0.3); }
        .cta-btn svg { transition: transform 0.3s; }
        .cta-btn:hover svg { transform: translateX(4px); }
        .cta-divider { width: 1px; height: 60px; background: linear-gradient(to bottom, transparent, var(--accent), transparent); opacity: 0.4; }
        @media (max-width: 600px) { .cta-banner { padding: 8vh 5vw; } .cta-btn { padding: 1rem 2rem; font-size: 0.85rem; } }

        /* =============== ENHANCED FOOTER =============== */
        .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; position: relative; z-index: 1; }
        .footer-brand { display: flex; flex-direction: column; gap: 1.2rem; }
        .footer-brand-name { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.1em; }
        .footer-brand-desc { font-family: var(--font-body); font-size: 0.95rem; color: var(--text-muted); line-height: 1.7; font-weight: 500; max-width: 320px; }
        .footer-col h4 { font-family: var(--font-head); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.5rem; }
        .footer-col a { display: block; font-family: var(--font-body); font-size: 0.95rem; color: var(--text-muted); text-decoration: none; font-weight: 500; padding: 0.4rem 0; transition: color 0.3s, padding-left 0.3s; }
        .footer-col a:hover { color: #fff; padding-left: 0.5rem; }
        .footer-newsletter { display: flex; gap: 0; margin-top: 1.2rem; }
        .footer-newsletter input { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-right: none; border-radius: 100px 0 0 100px; padding: 0.8rem 1.2rem; color: #fff; font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; }
        .footer-newsletter input::placeholder { color: var(--text-muted); }
        .footer-newsletter input:focus { outline: none; border-color: var(--accent); }
        .footer-newsletter button { background: var(--accent); color: #000; border: none; border-radius: 0 100px 100px 0; padding: 0.8rem 1.5rem; font-family: var(--font-body); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: background 0.3s; white-space: nowrap; }
        .footer-newsletter button:hover { background: #c084fc; }
        .footer-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 2rem; position: relative; z-index: 1; }
        .footer-bottom-links { display: flex; gap: 2rem; }
        .footer-bottom-links a { color: var(--text-muted); text-decoration: none; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.3s; }
        .footer-bottom-links a:hover { color: #fff; }
        .footer-whatsapp { display: inline-flex; align-items: center; gap: 8px; background: rgba(37,211,102,0.1); border: 1px solid rgba(37,211,102,0.2); color: #25d366; border-radius: 100px; padding: 0.6rem 1.4rem; font-family: var(--font-body); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; transition: background 0.3s, border-color 0.3s; }
        .footer-whatsapp:hover { background: rgba(37,211,102,0.2); border-color: rgba(37,211,102,0.4); }
        @media (max-width: 1024px) {
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
            .footer-bottom { flex-direction: column; gap: 1.5rem; text-align: center; }
            .footer-bottom-links { flex-wrap: wrap; justify-content: center; }
            .footer-col { text-align: center; }
            .footer-col a:hover { padding-left: 0; }
            .footer-brand { align-items: center; text-align: center; }
            .footer-brand-desc { max-width: 100%; }
            .footer-wm { font-size: clamp(1.8rem, 11vw, 4rem); letter-spacing: 0.05em; }
            footer { overflow: visible; }
        }
        @media (max-width: 600px) {
            .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
        }

        /* =============== SHARED PAGE STYLES (multi-page) =============== */
        .page-hero { min-height: 60vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 6vw 8vh; position: relative; }
        .page-hero::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(139,92,246,0.08) 0%, transparent 68%); pointer-events:none; }
        .page-hero > * { position: relative; z-index: 1; }
        .page-hero h1 { font-family: var(--font-head); font-size: clamp(2.5rem, 6vw, 6rem); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.1; }
        .page-hero .page-desc { font-family: var(--font-body); font-size: clamp(1rem, 1.4vw, 1.2rem); color: var(--text-muted); font-weight: 500; max-width: 600px; line-height: 1.7; margin-top: 1.5rem; }
        .breadcrumb { font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 2rem; }
        .breadcrumb a { color: var(--accent); text-decoration: none; transition: color 0.3s; }
        .breadcrumb a:hover { color: #fff; }

        /* --- Floating WhatsApp button (sits above #sound-toggle) --- */
        #wa-float { position: fixed; bottom: calc(2.5rem + 2 * (54px + 0.75rem)); right: 2.5rem; z-index: 500; width: 54px; height: 54px; border-radius: 50%; background: rgba(37,211,102,0.10); border: 1px solid rgba(37,211,102,0.35); color: #25d366; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); text-decoration: none; transition: background 0.3s, border-color 0.3s, transform 0.3s; pointer-events: auto; }
        #wa-float:hover { background: rgba(37,211,102,0.22); border-color: rgba(37,211,102,0.65); transform: scale(1.06); }
        #wa-float svg { width: 26px; height: 26px; display: block; }
        #wa-float::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid rgba(37,211,102,0.4); animation: waPulse 2.4s ease-out infinite; pointer-events: none; }
        @keyframes waPulse { 0% { transform: scale(0.95); opacity: 0.7; } 100% { transform: scale(1.45); opacity: 0; } }
        @media (max-width: 1024px) { #wa-float { bottom: calc(1.5rem + 2 * (54px + 0.75rem) + env(safe-area-inset-bottom, 0px)); right: 1.5rem; } }
        /* Floating package-builder button. THIS PAGE DOES NOT LOAD Assets/site.css — it inlines
           everything — so the rule has to live here or the markup below renders as a bare inline link
           in the page flow. (A grep for "Assets/site.css" in this file matches only comments.)
           Slot 2: #sound-toggle sits at 2.5rem, #wa-float one 54px slot above it, this one above that.
           A pill rather than a third identical circle — the destination is not guessable from an icon,
           and three matching circles read as clutter. The label drops on small screens. */
        #wt-calc-float { position: fixed; bottom: 2.5rem; right: 2.5rem; z-index: 500; height: 54px; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0 1.15rem; border-radius: 100px; background: rgba(216,180,254,0.10); border: 1px solid var(--accent-dim); color: var(--accent); text-decoration: none; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-family: var(--font-body); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; transition: background 0.3s, border-color 0.3s, transform 0.3s, color 0.3s; pointer-events: auto; }
        #wt-calc-float:hover { background: rgba(216,180,254,0.2); border-color: var(--accent); color: #fff; transform: scale(1.04); }
        #wt-calc-float:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
        #wt-calc-float svg { width: 20px; height: 20px; display: block; flex-shrink: 0; }
        @media (max-width: 1024px) { #wt-calc-float { bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); right: 1.5rem; width: 54px; padding: 0; justify-content: center; gap: 0; } #wt-calc-float .wt-calc-label { display: none; } }
        @media (prefers-reduced-motion: reduce) { #wt-calc-float:hover { transform: none; } }
        @media (prefers-reduced-motion: reduce) { #wa-float::after { animation: none; } }