Responsive About Us Section with Image & Stats

<section id="about" class="max-w-7xl sm:px-6 sm:mt-20 mt-8 mr-auto mb-8 ml-auto pr-4 pl-4">
        <div class="relative overflow-hidden shadow-[0_8px_30px_rgba(0,0,0,0.08)] shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),_0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)] bg-white border-white/20 border rounded-[40px]">
            <div class="absolute inset-0 pointer-events-none">
                <div class="absolute inset-0 bg-gradient-to-b from-white/10 via-white/5 to-transparent"></div>
            </div>
            <div class="relative">
                <div class="flex border-white/10 border-b pt-6 pr-6 pb-6 pl-6 items-end justify-between">
                    <h2 class="text-2xl sm:text-3xl text-gray-900 font-geist tracking-tighter">About Studio</h2>
                    <p class="hidden sm:block text-xs text-gray-500 font-geist">Story, team, achievements</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-12 border-t border-black/5">
                    <!-- Studio Info -->
                    <div class="md:col-span-3 md:border-b-0 md:border-r border-white/10 border-b pt-6 pr-6 pb-6 pl-6">
                        <p class="text-sm text-gray-500 font-geist">Creative Design Studio</p>
                        <p class="mt-1 text-lg font-medium tracking-tight text-gray-900 font-geist">Studio Meridian</p>
                        <div class="mt-4 flex items-center gap-2 text-xs text-gray-500">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="map-pin" class="lucide lucide-map-pin w-4 h-4 stroke-1.5"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg>
                            <span class="font-geist">San Francisco, CA • Remote‑friendly</span>
                        </div>
                    </div>

                    <!-- Team Image -->
                    <div class="relative md:col-span-6 md:row-span-2 md:border-b-0 md:border-r border-white/10 border-b">
    <div class="relative aspect-[16/10] md:aspect-[9/10] lg:aspect-[16/10]">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/3bbbf364-3029-4f9e-9987-eb90d946b1b1_1600w.jpg" alt="Creative team collaborating in modern studio space" class="absolute inset-0 w-full h-full object-cover">
        <div class="absolute inset-0 bg-gradient-to-tr from-black/20 via-transparent to-transparent pointer-events-none"></div>

        <!-- Glass overlay stats -->
        <div class="hidden md:block absolute inset-0 pointer-events-none">
            <div class="absolute top-5 right-5 rounded-xl bg-white/10 border border-white/20 backdrop-blur-sm p-4 ring-1 ring-white/10">
                <div class="text-2xl lg:text-3xl text-white font-geist tracking-tighter drop-shadow-sm">200+</div>
                <p class="text-[11px] text-white/80 mt-0.5 font-geist">Projects Delivered</p>
            </div>
            <div class="absolute bottom-5 left-5 rounded-xl bg-white/10 border border-white/20 backdrop-blur-sm p-4 ring-1 ring-white/10">
                <div class="text-2xl lg:text-3xl text-white font-geist tracking-tighter drop-shadow-sm">8</div>
                <p class="text-[11px] text-white/80 mt-0.5 font-geist">Years in Business</p>
            </div>
            <div class="absolute bottom-5 left-1/2 -translate-x-1/2 rounded-xl bg-white/10 border border-white/20 backdrop-blur-sm p-4 ring-1 ring-white/10">
                <div class="text-2xl lg:text-3xl text-white font-geist tracking-tighter drop-shadow-sm">12</div>
                <p class="text-[11px] text-white/80 mt-0.5 font-geist">Team Members</p>
            </div>
        </div>
    </div>
</div>

                    <!-- Right stat (top) -->
                    <div class="p-6 md:col-span-3 border-b md:border-b-0">
                        <div class="text-3xl text-gray-900 font-geist tracking-tighter">15+</div>
                        <p class="text-xs text-gray-500 mt-1 font-geist">Industry Awards</p>
                    </div>

                    <!-- Studio Bio -->
                    <div class="md:col-span-3 md:border-t md:border-r border-black/5 border-t pt-6 pr-6 pb-6 pl-6">
                        <p class="text-sm text-gray-600 leading-relaxed font-geist">
                            We're a passionate team of designers, strategists, and creative problem-solvers. We help brands tell their stories through thoughtful design and digital experiences that connect with audiences.
                        </p>
                        <div class="mt-4 inline-flex items-center gap-2 text-sm font-medium tracking-tight text-white bg-gray-900 hover:bg-gray-800 rounded-full px-3 py-1.5 border border-white/10">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="users" class="lucide lucide-users w-4 h-4 stroke-1.5"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg>
                            <span class="font-geist">Meet the Team</span>
                        </div>
                    </div>

                    <!-- Right stat (bottom) -->
                    <div class="md:col-span-3 border-black/5 border-t pt-6 pr-6 pb-6 pl-6">
                        <div class="text-3xl text-gray-900 font-geist tracking-tighter">50+</div>
                        <p class="text-xs text-gray-500 mt-1 font-geist">Happy Clients</p>
                    </div>
                </div>

                <!-- Mobile stats -->
                <div class="md:hidden border-t border-white/10 grid grid-cols-3">
                    <div class="p-4 text-center border-r border-white/10">
                        <div class="text-xl font-semibold tracking-tight text-gray-900 font-geist">200+</div>
                        <p class="text-[11px] text-gray-500 mt-0.5 font-geist">Projects</p>
                    </div>
                    <div class="p-4 text-center border-r border-white/10">
                        <div class="text-xl font-semibold tracking-tight text-gray-900 font-geist">8</div>
                        <p class="text-[11px] text-gray-500 mt-0.5 font-geist">Years</p>
                    </div>
                    <div class="p-4 text-center">
                        <div class="text-xl font-semibold tracking-tight text-gray-900 font-geist">12</div>
                        <p class="text-[11px] text-gray-500 mt-0.5 font-geist">Team</p>
                    </div>
                </div>
            </div>
        </div>
    </section>