Accolades Section with Awards and Stats Card

<section class="lg:px-12 text-[#0F0F11] bg-white border-gray-100 border-b pt-24 pr-6 pb-24 pl-6">
    <div class="max-w-7xl mx-auto grid lg:grid-cols-2 gap-20 items-center">
        
        <!-- Left Column: Typography & Awards -->
        <div class="">
            <span class="text-xs font-bold uppercase tracking-widest text-[#A1A1AA] mb-4 flex items-center gap-2 font-geist" style="transition: outline 0.1s ease-in-out;">
                <iconify-icon icon="solar:cup-star-bold-duotone" class="text-lg text-[#0F0F11]"></iconify-icon>
                Accolades
            </span>
            <h2 class="text-5xl lg:text-6xl mb-6 text-[#0F0F11] leading-[1.1] font-playfair font-medium tracking-tight" style="">
                Recognition &amp; Impact
            </h2>
            <p class="text-[#A1A1AA] text-lg leading-relaxed font-light mb-12 max-w-md font-geist" style="transition: outline 0.1s ease-in-out;">
                Our designs shape skylines and communities. We are honored when our commitment to spatial integrity resonates with the global design industry.
            </p>

            <!-- Awards List -->
            <div class="w-full">
                <div class="flex justify-between text-[10px] font-bold text-[#A1A1AA]/60 uppercase tracking-widest mb-6 border-b border-gray-100 pb-2">
                    <span class="font-geist" style="transition: outline 0.1s ease-in-out;">Organization</span>
                    <span class="font-geist" style="transition: outline 0.1s ease-in-out;">Year</span>
                </div>

                <!-- Award 1 -->
                <div class="group flex items-center justify-between py-5 border-b border-gray-100 hover:bg-gray-50/50 transition-colors cursor-default -mx-2 px-2 rounded-lg">
                   <div class="flex flex-col gap-1.5">
                     <div class="flex items-center gap-3 text-[#0F0F11] font-semibold text-lg">
                        <iconify-icon icon="simple-icons:archdaily" class="text-xl"></iconify-icon>
                        <span class="font-geist" style="transition: outline 0.1s ease-in-out;">ArchDaily</span>
                     </div>
                     <span class="text-xs text-[#A1A1AA] font-geist" style="transition: outline 0.1s ease-in-out;">Building of the Year — Cultural</span>
                   </div>
                   <span class="font-mono text-sm text-[#0F0F11]/60 font-geist" style="transition: outline 0.1s ease-in-out;">2025</span>
                </div>

                <!-- Award 2 -->
                <div class="group flex items-center justify-between py-5 border-b border-gray-100 hover:bg-gray-50/50 transition-colors cursor-default -mx-2 px-2 rounded-lg">
                   <div class="flex flex-col gap-1.5">
                     <div class="flex items-center gap-3 text-[#0F0F11] font-semibold text-lg">
                        <iconify-icon icon="simple-icons:dezeen" class="text-xl"></iconify-icon>
                        <span class="font-geist" style="transition: outline 0.1s ease-in-out;">Dezeen Awards</span>
                     </div>
                     <span class="text-xs text-[#A1A1AA] font-geist" style="transition: outline 0.1s ease-in-out;">Sustainable Studio of the Year</span>
                   </div>
                   <span class="font-mono text-sm text-[#0F0F11]/60 font-geist" style="transition: outline 0.1s ease-in-out;">2024</span>
                </div>

                <!-- Award 3 -->
                <div class="group flex items-center justify-between py-5 border-b border-gray-100 hover:bg-gray-50/50 transition-colors cursor-default -mx-2 px-2 rounded-lg">
                   <div class="flex flex-col gap-1.5">
                     <div class="flex items-center gap-3 text-[#0F0F11] font-semibold text-lg">
                        <iconify-icon icon="ph:trophy-fill" class="text-xl"></iconify-icon>
                        <span class="font-geist" style="transition: outline 0.1s ease-in-out;">Pritzker Prize</span>
                     </div>
                     <span class="text-xs text-[#A1A1AA] font-geist" style="transition: outline 0.1s ease-in-out;">Laureate — Lifetime Achievement</span>
                   </div>
                   <span class="font-mono text-sm text-[#0F0F11]/60 font-geist" style="transition: outline 0.1s ease-in-out;">2024</span>
                </div>

                <!-- Award 4 -->
                <div class="group flex items-center justify-between py-5 border-b border-gray-100 hover:bg-gray-50/50 transition-colors cursor-default -mx-2 px-2 rounded-lg">
                   <div class="flex flex-col gap-1.5">
                     <div class="flex items-center gap-3 text-[#0F0F11] font-semibold text-lg">
                        <iconify-icon icon="mdi:decagram" class="text-xl"></iconify-icon>
                        <span class="font-geist" style="transition: outline 0.1s ease-in-out;">Mies van der Rohe</span>
                     </div>
                     <span class="text-xs text-[#A1A1AA] font-geist" style="transition: outline 0.1s ease-in-out;">European Union Prize</span>
                   </div>
                   <span class="font-mono text-sm text-[#0F0F11]/60 font-geist" style="transition: outline 0.1s ease-in-out;">2023</span>
                </div>
            </div>
        </div>

        <!-- Right Column: Card -->
        <div class="bg-[#FAFAFA] rounded-[2rem] overflow-hidden border border-gray-100 shadow-xl shadow-gray-200/50">
            <!-- Image Area -->
            <div class="h-72 w-full overflow-hidden relative group">
                <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/92fa848d-fed5-4735-b284-fe79a795072d_1600w.webp" class="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105" alt="Award Winning Project">
                <div class="absolute inset-0 bg-gradient-to-t from-[#0F0F11]/80 to-transparent"></div>
                <div class="absolute bottom-6 left-8 text-white">
                    <span class="text-[10px] font-bold uppercase tracking-widest bg-white/20 backdrop-blur-md px-3 py-1 rounded-full mb-3 inline-block border border-white/10 font-geist" style="transition: outline 0.1s ease-in-out;">Project of the Year</span>
                    <h3 class="text-3xl font-playfair font-medium tracking-tight" style="">The Helix Tower</h3>
                </div>
            </div>

            <!-- Stats Content -->
            <div class="p-8 lg:p-10">
                <div class="mb-10">
                    <h4 class="text-2xl text-[#0F0F11] mb-3 font-playfair font-medium tracking-tight" style="">Urban Regeneration 2024</h4>
                    <p class="text-[#A1A1AA] text-sm leading-relaxed font-geist" style="transition: outline 0.1s ease-in-out;">
                        Our flagship restoration project in Oslo set unprecedented standards for adaptive reuse, achieving net-zero status within six months of operation.
                    </p>
                </div>

                <div class="space-y-8">
                    <!-- Stat Row 1 -->
                    <div class="flex items-center justify-between group">
                        <div class="flex items-center gap-4">
                            <div class="w-10 h-10 rounded-full bg-[#E4E4E7]/30 flex items-center justify-center text-[#0F0F11] group-hover:bg-[#0F0F11] group-hover:text-white transition-colors">
                                <iconify-icon icon="solar:leaf-bold-duotone" class="text-xl"></iconify-icon>
                            </div>
                            <div class="flex flex-col">
                                <span class="text-sm font-semibold text-[#0F0F11] font-geist" style="transition: outline 0.1s ease-in-out;">Carbon Offset</span>
                                <span class="text-xs text-[#A1A1AA] font-geist" style="transition: outline 0.1s ease-in-out;">Annual reduction</span>
                            </div>
                        </div>
                        <span class="text-4xl text-[#0F0F11] font-playfair font-medium tracking-tight" style="">84%</span>
                    </div>

                    <!-- Stat Row 2 -->
                    <div class="flex items-center justify-between group">
                        <div class="flex items-center gap-4">
                            <div class="w-10 h-10 rounded-full bg-[#E4E4E7]/30 flex items-center justify-center text-[#0F0F11] group-hover:bg-[#0F0F11] group-hover:text-white transition-colors">
                                <iconify-icon icon="solar:users-group-rounded-bold-duotone" class="text-xl"></iconify-icon>
                            </div>
                            <div class="flex flex-col">
                                <span class="text-sm font-semibold text-[#0F0F11] font-geist" style="transition: outline 0.1s ease-in-out;">Community</span>
                                <span class="text-xs text-[#A1A1AA] font-geist" style="transition: outline 0.1s ease-in-out;">Daily visitors</span>
                            </div>
                        </div>
                        <span class="text-4xl text-[#0F0F11] font-playfair font-medium tracking-tight" style="">2.5M</span>
                    </div>

                    <!-- Stat Row 3 -->
                    <div class="flex items-center justify-between group">
                        <div class="flex items-center gap-4">
                            <div class="w-10 h-10 rounded-full bg-[#E4E4E7]/30 flex items-center justify-center text-[#0F0F11] group-hover:bg-[#0F0F11] group-hover:text-white transition-colors">
                                <iconify-icon icon="solar:graph-up-bold-duotone" class="text-xl"></iconify-icon>
                            </div>
                            <div class="flex flex-col">
                                <span class="text-sm font-semibold text-[#0F0F11] font-geist" style="transition: outline 0.1s ease-in-out;">Efficiency</span>
                                <span class="text-xs text-[#A1A1AA] font-geist" style="transition: outline 0.1s ease-in-out;">Energy surplus</span>
                            </div>
                        </div>
                        <span class="text-4xl text-[#0F0F11] font-playfair font-medium tracking-tight" style="">165%</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>