<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="generator" content="Astro v7.0.6"><title>Zhoot It — Where Light Meets Luxury</title><meta name="description" content="Zhoot It is a Hong Kong-based photography studio specializing in luxury residential properties. Capturing Hong Kong's finest homes through cinematic visuals."><!-- Google Fonts --><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="/_astro/index.Dh8ROSxu.css"></head><body style="background: #0A0A0A;"><canvas id="hero-canvas" class="fixed inset-0 w-full h-full" style="z-index: 0; filter: brightness(0.6);"></canvas><!-- Loading overlay (shown until frames are ready) --><div id="hero-loader" class="fixed inset-0 z-[1] flex items-center justify-center" style="background: #0A0A0A;"><div class="w-8 h-8 border-2 border-white/20 border-t-white rounded-full animate-spin"></div></div><!-- Fixed overlay gradient (stays on top of canvas, behind everything else) --><div class="fixed inset-0 pointer-events-none" style="z-index: 2; background: linear-gradient(135deg, rgba(230,0,18,0.15) 0%, transparent 40%, rgba(0,0,0,0.6) 100%);"></div><!-- Dark bottom fade for hero --><div class="fixed bottom-0 left-0 right-0 pointer-events-none" style="z-index: 2; height: 12rem; background: linear-gradient(to top, #0A0A0A 0%, transparent 100%);"></div><nav id="main-nav" class="fixed top-0 left-0 right-0 z-50 transition-all duration-500 py-5 px-6 md:px-12 flex items-center justify-between" style="background: transparent;" data-astro-cid-wpvy4v7s><a href="#" class="flex items-center gap-3" data-astro-cid-wpvy4v7s><img src="/logo.svg" alt="Zhoot It" class="h-8 w-8 md:h-10 md:w-10" data-astro-cid-wpvy4v7s><span class="text-white font-semibold tracking-widest text-sm md:text-base uppercase" style="font-family: 'Inter', sans-serif;" data-astro-cid-wpvy4v7s>Zhoot It</span></a><a href="#contact" class="hidden md:inline-block px-6 py-2.5 text-sm tracking-widest uppercase font-medium rounded-full transition-all duration-300 hover:shadow-lg hover:shadow-red-600/30" style="background: #E60012; color: white; font-family: 'Inter', sans-serif;" data-astro-cid-wpvy4v7s>Get in Touch</a></nav><section id="hero" class="relative w-full h-screen scroll-snap-align-start"><!-- Hero Content --><div class="relative z-10 flex flex-col items-center justify-center h-full px-6 text-center"><div id="hero-logo" class="mb-8"><img src="/logo.svg" alt="Zhoot It" class="w-24 h-24 md:w-32 md:h-32 opacity-0"></div><h1 id="hero-title" class="section-title text-white mb-4 tracking-widest opacity-0" style="font-size: clamp(2.5rem, 6vw, 5rem);">Zhoot It</h1><p id="hero-tagline" class="text-sm md:text-lg tracking-[0.3em] uppercase text-white/80 mb-10 opacity-0" style="font-family: 'Inter', sans-serif; letter-spacing: 0.3em;">Where Light Meets Luxury</p><a href="#about" id="hero-cta" class="opacity-0 inline-flex items-center gap-2 px-8 py-3.5 rounded-full text-sm tracking-widest uppercase font-medium transition-all duration-300 hover:scale-105" style="background: #E60012; color: white; font-family: 'Inter', sans-serif;">Explore Our Work<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg></a></div><!-- Scroll Indicator --><div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 flex flex-col items-center gap-2 text-white/40"><span class="text-xs tracking-widest uppercase" style="font-family: 'Inter', sans-serif;">Scroll</span><div class="w-5 h-8 border border-white/20 rounded-full flex justify-center"><div class="w-1 h-2 bg-white/50 rounded-full mt-2 animate-bounce"></div></div></div></section><div class="h-[20vh]"></div><section id="about" class="relative scroll-snap-align-start mx-auto w-[90%] max-w-4xl rounded-2xl px-8 md:px-12 py-16 md:py-20" style="background: rgba(0,0,0,0.2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);"><!-- Subtle red accent line --><div class="absolute left-0 top-8 bottom-8 w-1 rounded-full" style="background: linear-gradient(to bottom, transparent, #E60012 30%, #E60012 70%, transparent);"></div><div class="w-full"><!-- Section number --><p class="text-xs tracking-[0.3em] uppercase mb-6" style="color: #E60012; font-family: 'Inter', sans-serif;">01 — About</p><h2 class="section-title text-white mb-10 leading-tight reveal-item">Capturing<br><span style="color: #E60012;">Hong Kong's Finest</span><br>Properties</h2><div class="grid md:grid-cols-2 gap-8 md:gap-16"><p class="text-body text-white/90 reveal-item">Zhoot It is a Hong Kong-based photography studio specializing in luxury residential properties. We believe every home has a story — and our craft is to tell it through light, composition, and cinematic visuals.</p><p class="text-body text-white/90 reveal-item" style="transition-delay: 0.15s;">From sprawling penthouses to serene waterfront estates, we transform spaces into timeless imagery. Our work blends architectural precision with artistic vision, delivering photographs and films that resonate with emotion and elegance.</p></div><!-- Stats --><div class="grid grid-cols-3 gap-8 mt-16 pt-10 border-t border-white/10 reveal-item"><div><p class="text-3xl md:text-4xl font-bold" style="color: #E60012; font-family: 'Playfair Display', serif;" data-count="50">0</p><p class="text-xs tracking-widest uppercase mt-2 text-white/70" style="font-family: 'Inter', sans-serif;">Properties Shot</p></div><div><p class="text-3xl md:text-4xl font-bold" style="color: #E60012; font-family: 'Playfair Display', serif;" data-count="100">0</p><p class="text-xs tracking-widest uppercase mt-2 text-white/70" style="font-family: 'Inter', sans-serif;">Projects Delivered</p></div><div><p class="text-3xl md:text-4xl font-bold" style="color: #E60012; font-family: 'Playfair Display', serif;" data-count="3">0</p><p class="text-xs tracking-widest uppercase mt-2 text-white/70" style="font-family: 'Inter', sans-serif;">Years Crafting</p></div></div></div></section><div class="h-[20vh]"></div><section id="portrait" class="relative scroll-snap-align-start mx-auto w-[90%] max-w-5xl rounded-2xl px-8 md:px-12 py-16 md:py-20" style="background: rgba(0,0,0,0.2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);"><div class="w-full"><!-- Section label --><p class="text-xs tracking-[0.3em] uppercase mb-6" style="color: #E60012; font-family: 'Inter', sans-serif;">02 — Cinematic Reels</p><h2 class="section-title text-white mb-12 reveal-item">Portrait <span style="color: #E60012;">Collection</span></h2><div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8"><div class="video-card group relative aspect-[9/16] rounded-lg overflow-hidden cursor-pointer" style="background: linear-gradient(145deg, #1a1a1a, #0a0a0a); border: 1px solid rgba(255,255,255,0.08);" data-reveal="0"><!-- Placeholder / Video --><video class="absolute inset-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity duration-500" src="/videos/portrait-1.mp4" muted loop playsinline preload="none"></video><!-- Placeholder content (shown when no video) --><div class="absolute inset-0 flex flex-col items-center justify-center video-placeholder"><svg class="w-12 h-12 text-white/20 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><p class="text-xs tracking-widest uppercase text-white/30" style="font-family: 'Inter', sans-serif;">Portrait 01</p></div><!-- Hover overlay --><div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all duration-300"></div><!-- Label on hover --><div class="absolute bottom-4 left-4 right-4 opacity-0 group-hover:opacity-100 transition-all duration-300 translate-y-2 group-hover:translate-y-0"><p class="text-xs tracking-widest uppercase text-white/80" style="font-family: 'Inter', sans-serif;">Click to view</p></div></div><div class="video-card group relative aspect-[9/16] rounded-lg overflow-hidden cursor-pointer" style="background: linear-gradient(145deg, #1a1a1a, #0a0a0a); border: 1px solid rgba(255,255,255,0.08);" data-reveal="1"><!-- Placeholder / Video --><video class="absolute inset-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity duration-500" src="/videos/portrait-2.mp4" muted loop playsinline preload="none"></video><!-- Placeholder content (shown when no video) --><div class="absolute inset-0 flex flex-col items-center justify-center video-placeholder"><svg class="w-12 h-12 text-white/20 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><p class="text-xs tracking-widest uppercase text-white/30" style="font-family: 'Inter', sans-serif;">Portrait 02</p></div><!-- Hover overlay --><div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all duration-300"></div><!-- Label on hover --><div class="absolute bottom-4 left-4 right-4 opacity-0 group-hover:opacity-100 transition-all duration-300 translate-y-2 group-hover:translate-y-0"><p class="text-xs tracking-widest uppercase text-white/80" style="font-family: 'Inter', sans-serif;">Click to view</p></div></div><div class="video-card group relative aspect-[9/16] rounded-lg overflow-hidden cursor-pointer" style="background: linear-gradient(145deg, #1a1a1a, #0a0a0a); border: 1px solid rgba(255,255,255,0.08);" data-reveal="2"><!-- Placeholder / Video --><video class="absolute inset-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity duration-500" src="/videos/portrait-3.mp4" muted loop playsinline preload="none"></video><!-- Placeholder content (shown when no video) --><div class="absolute inset-0 flex flex-col items-center justify-center video-placeholder"><svg class="w-12 h-12 text-white/20 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><p class="text-xs tracking-widest uppercase text-white/30" style="font-family: 'Inter', sans-serif;">Portrait 03</p></div><!-- Hover overlay --><div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all duration-300"></div><!-- Label on hover --><div class="absolute bottom-4 left-4 right-4 opacity-0 group-hover:opacity-100 transition-all duration-300 translate-y-2 group-hover:translate-y-0"><p class="text-xs tracking-widest uppercase text-white/80" style="font-family: 'Inter', sans-serif;">Click to view</p></div></div></div></div></section><div class="h-[20vh]"></div><section id="landscape" class="relative scroll-snap-align-start mx-auto w-[90%] max-w-5xl rounded-2xl px-8 md:px-12 py-16 md:py-20" style="background: rgba(0,0,0,0.2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);"><div class="w-full"><!-- Section label --><p class="text-xs tracking-[0.3em] uppercase mb-6" style="color: #E60012; font-family: 'Inter', sans-serif;">03 — Full Frame</p><h2 class="section-title text-white mb-12 reveal-item">Landscape <span style="color: #E60012;">Showcase</span></h2><div class="space-y-6"><div class="video-card group relative aspect-video md:aspect-[21/9] rounded-lg overflow-hidden cursor-pointer reveal-item" style="background: linear-gradient(135deg, #1a1a1a, #0a0a0a); border: 1px solid rgba(255,255,255,0.08);" data-reveal="0"><!-- Video --><video class="absolute inset-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity duration-500" src="/videos/landscape-1.mp4" muted loop playsinline preload="none"></video><!-- Placeholder --><div class="absolute inset-0 flex flex-col items-center justify-center video-placeholder"><svg class="w-14 h-14 text-white/20 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><p class="text-sm tracking-widest uppercase text-white/30" style="font-family: 'Inter', sans-serif;">Showcase 01</p></div><!-- Hover overlay --><div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all duration-300"></div><!-- Label overlay --><div class="absolute bottom-6 left-6 opacity-0 group-hover:opacity-100 transition-all duration-300 translate-y-2 group-hover:translate-y-0"><p class="text-xs tracking-widest uppercase text-white/60" style="font-family: 'Inter', sans-serif;">Click to preview</p></div></div><div class="video-card group relative aspect-video md:aspect-[21/9] rounded-lg overflow-hidden cursor-pointer reveal-item" style="background: linear-gradient(135deg, #1a1a1a, #0a0a0a); border: 1px solid rgba(255,255,255,0.08);" data-reveal="1"><!-- Video --><video class="absolute inset-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity duration-500" src="/videos/landscape-2.mp4" muted loop playsinline preload="none"></video><!-- Placeholder --><div class="absolute inset-0 flex flex-col items-center justify-center video-placeholder"><svg class="w-14 h-14 text-white/20 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><p class="text-sm tracking-widest uppercase text-white/30" style="font-family: 'Inter', sans-serif;">Showcase 02</p></div><!-- Hover overlay --><div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all duration-300"></div><!-- Label overlay --><div class="absolute bottom-6 left-6 opacity-0 group-hover:opacity-100 transition-all duration-300 translate-y-2 group-hover:translate-y-0"><p class="text-xs tracking-widest uppercase text-white/60" style="font-family: 'Inter', sans-serif;">Click to preview</p></div></div><div class="video-card group relative aspect-video md:aspect-[21/9] rounded-lg overflow-hidden cursor-pointer reveal-item" style="background: linear-gradient(135deg, #1a1a1a, #0a0a0a); border: 1px solid rgba(255,255,255,0.08);" data-reveal="2"><!-- Video --><video class="absolute inset-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity duration-500" src="/videos/landscape-3.mp4" muted loop playsinline preload="none"></video><!-- Placeholder --><div class="absolute inset-0 flex flex-col items-center justify-center video-placeholder"><svg class="w-14 h-14 text-white/20 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><p class="text-sm tracking-widest uppercase text-white/30" style="font-family: 'Inter', sans-serif;">Showcase 03</p></div><!-- Hover overlay --><div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all duration-300"></div><!-- Label overlay --><div class="absolute bottom-6 left-6 opacity-0 group-hover:opacity-100 transition-all duration-300 translate-y-2 group-hover:translate-y-0"><p class="text-xs tracking-widest uppercase text-white/60" style="font-family: 'Inter', sans-serif;">Click to preview</p></div></div></div></div></section><div class="h-[20vh]"></div><section id="contact" class="relative scroll-snap-align-start mx-auto w-[90%] max-w-4xl px-8 md:px-12 py-16 md:py-20"><div class="w-full text-center"><!-- Section label --><p class="text-xs tracking-[0.3em] uppercase mb-6" style="color: #E60012; font-family: 'Inter', sans-serif;">04 — Connect</p><h2 class="section-title text-white mb-6 reveal-item" style="text-shadow: 0 2px 20px rgba(0,0,0,0.8);">Let's <span style="color: #E60012;">Create</span> Together</h2><p class="text-body text-white/90 max-w-xl mx-auto mb-12 reveal-item" style="text-shadow: 0 1px 10px rgba(0,0,0,0.6);">Interested in working with us? Whether it's a single property or an entire portfolio, we'd love to hear about your vision.</p><!-- Contact Cards --><div class="flex flex-col md:flex-row items-center justify-center gap-6 mb-12"><!-- WhatsApp Card --><a href="#" id="contact-whatsapp" class="contact-card group relative w-full md:w-72 px-8 py-10 rounded-xl text-center transition-all duration-500 cursor-pointer" style="background: linear-gradient(145deg, rgba(26,26,26,0.8), rgba(10,10,10,0.8)); border: 1px solid rgba(255,255,255,0.08);" target="_blank" rel="noopener"><div class="text-4xl mb-4 opacity-60 group-hover:opacity-100 transition-opacity duration-300"><svg class="w-10 h-10 mx-auto" style="color: #E60012;" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg></div><p class="text-sm tracking-widest uppercase mb-2" style="color: #E60012; font-family: 'Inter', sans-serif;">WhatsApp</p><p class="text-white/40 text-xs" style="font-family: 'Inter', sans-serif;">Tap to message us</p><div class="absolute inset-0 rounded-xl transition-all duration-300 opacity-0 group-hover:opacity-100" style="box-shadow: 0 0 30px rgba(230,0,18,0.15);"></div></a><!-- Phone Card --><a href="#" id="contact-phone" class="contact-card group relative w-full md:w-72 px-8 py-10 rounded-xl text-center transition-all duration-500 cursor-pointer" style="background: linear-gradient(145deg, rgba(26,26,26,0.8), rgba(10,10,10,0.8)); border: 1px solid rgba(255,255,255,0.08);" target="_blank" rel="noopener"><div class="text-4xl mb-4 opacity-60 group-hover:opacity-100 transition-opacity duration-300"><svg class="w-10 h-10 mx-auto" style="color: #E60012;" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg></div><p class="text-sm tracking-widest uppercase mb-2" style="color: #E60012; font-family: 'Inter', sans-serif;">Phone</p><p class="text-white/40 text-xs" style="font-family: 'Inter', sans-serif;">Give us a call</p><div class="absolute inset-0 rounded-xl transition-all duration-300 opacity-0 group-hover:opacity-100" style="box-shadow: 0 0 30px rgba(230,0,18,0.15);"></div></a></div><!-- Social Links --><div class="flex items-center justify-center gap-8 reveal-item"><a href="#" class="text-white/40 hover:text-white transition-colors duration-300 text-sm tracking-widest uppercase" style="font-family: 'Inter', sans-serif;">Email</a><span class="text-white/10">|</span><a href="#" class="text-white/40 hover:text-white transition-colors duration-300 text-sm tracking-widest uppercase" style="font-family: 'Inter', sans-serif;">Instagram</a></div></div></section><!-- Footer --><footer class="mx-auto w-[90%] max-w-4xl rounded-2xl px-8 md:px-12 py-6 scroll-snap-align-start" style="background: rgba(0,0,0,0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);"><div class="flex flex-col md:flex-row items-center justify-between gap-4"><div class="flex items-center gap-3"><img src="/logo.svg" alt="Zhoot It" class="h-6 w-6 opacity-40"><span class="text-white/30 text-xs tracking-widest uppercase" style="font-family: 'Inter', sans-serif;">Zhoot It</span></div><p class="text-white/20 text-xs" style="font-family: 'Inter', sans-serif;">&copy; 2026 Zhoot It. All rights reserved.</p></div></footer><div class="h-[10vh]"></div></body></html><script type="module" src="/_astro/index.astro_astro_type_script_index_0_lang.DUSST6zC.js"></script>