.elementor-kit-3012{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-3c573ee3:#4054B2;--e-global-color-7bdb4f11:#23A455;--e-global-color-35fddd88:#000;--e-global-color-42614e9e:#FFF;--e-global-color-5e4af31:#000000;--e-global-color-72171a6:#000000;--e-global-color-ee5245e:#000000;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500}.elementor-kit-3012 e-page-transition{background-color:#FFBC7D}.elementor-section.elementor-section-boxed>.elementor-container{max-width:1140px}.e-con{--container-max-width:1140px}.elementor-widget:not(:last-child){--kit-widget-spacing:50px}.elementor-element{--widgets-spacing:50px 50px;--widgets-spacing-row:50px;--widgets-spacing-column:50px}{}h1.entry-title{display:var(--page-title-display)}@media(max-width:1024px){.elementor-section.elementor-section-boxed>.elementor-container{max-width:1024px}.e-con{--container-max-width:1024px}}@media(max-width:767px){.elementor-section.elementor-section-boxed>.elementor-container{max-width:767px}.e-con{--container-max-width:767px}}<!DOCTYPE html><html class="dark" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width, initial-scale=1.0" name="viewport"/><title>Routehunters - Automotive Lifestyle</title><script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script><link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@100;300;400;500;700;900&amp;display=swap" rel="stylesheet"/><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/><script>tailwind.config={darkMode:"class",theme:{extend:{colors:{primary:"#144e2a","background-light":"#f6f8f7","background-dark":"#131f18","surface-dark":"#2a1a1a","accent-gold":"#d4af37"},fontFamily:{display:"Be Vietnam Pro",sans:[""Be Vietnam Pro"","sans-serif"]},borderRadius:{DEFAULT:"0.25rem",lg:"0.5rem",xl:"0.75rem",full:"9999px"}}}};</script><style>.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.red-line{height:2px;background:linear-gradient(90deg,#f20d0d 0%,transparent 100%)}.gold-line{height:2px;background:linear-gradient(90deg,#d4af37 0%,transparent 100%)}</style></head><body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-white font-display overflow-x-hidden transition-colors duration-300"><!-- Header --><header class="sticky top-0 z-50 w-full bg-background-light/95 dark:bg-background-dark/95 backdrop-blur-sm border-b border-gray-200 dark:border-[#492222]"><div class="max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-8"><div class="flex items-center justify-between h-20"><!-- Logo & Nav --><div class="flex items-center gap-8 xl:gap-12"><a class="flex items-center gap-3 text-slate-900 dark:text-white group" href="#"><div class="size-8 text-primary group-hover:scale-110 transition-transform"><svg fill="none" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M4 42.4379C4 42.4379 14.0962 36.0744 24 41.1692C35.0664 46.8624 44 42.2078 44 42.2078L44 7.01134C44 7.01134 35.068 11.6577 24.0031 5.96913C14.0971 0.876274 4 7.27094 4 7.27094L4 42.4379Z" fill="currentColor"></path></svg></div><h2 class="text-xl font-black uppercase tracking-tight">Routehunters</h2></a><nav class="hidden lg:flex items-center gap-6 xl:gap-8"><a class="text-sm font-bold uppercase tracking-wide hover:text-primary transition-colors" href="#">Lifestyle</a><a class="text-sm font-bold uppercase tracking-wide hover:text-primary transition-colors" href="#">Drives</a><a class="text-sm font-bold uppercase tracking-wide hover:text-primary transition-colors" href="#">News</a><a class="text-sm font-bold uppercase tracking-wide hover:text-primary transition-colors" href="#">Garage</a><a class="text-sm font-bold uppercase tracking-wide hover:text-primary transition-colors" href="#">Shop</a><a class="text-sm font-bold uppercase tracking-wide hover:text-primary transition-colors text-accent-gold" href="#">PRLab</a></nav></div><!-- Actions --><div class="flex items-center gap-4"><div class="hidden md:flex items-center bg-gray-100 dark:bg-[#2a1a1a] rounded-full px-3 py-1.5 border border-transparent focus-within:border-primary transition-colors"><span class="material-symbols-outlined text-gray-500 dark:text-gray-400 text-[20px]">search</span><input class="bg-transparent border-none text-sm w-32 focus:ring-0 text-slate-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400" placeholder="Search..." type="text"/></div><button class="hidden sm:flex bg-primary hover:bg-red-700 text-white text-sm font-bold py-2 px-6 rounded-lg uppercase tracking-wider transition-colors">Sign In </button><button class="lg:hidden text-slate-900 dark:text-white"><span class="material-symbols-outlined text-3xl">menu</span></button></div></div></div></header><!-- Hero Section --><section class="relative min-h-[85vh] flex items-center justify-center overflow-hidden"><!-- Background Image with Overlay --><div class="absolute inset-0 z-0 bg-cover bg-center" data-alt="Dark moody sports car on a wet road at night" style="background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuCoWdhPjL45qaZuBOVOj8_8jjPDNxTGTepN7HY8bSff8iXzYxAnxttTGWBNCzQqeAyi11pZ9bYis6S75volBIfr5Yaibe4EhCaBwXh1s8e6_jb_x6XPDXvQTrOqXqHl6vgY6T_FR1qILpgp-gQHqP1rslukmCzvE4K3_pk0XyHr2caEhK778Wz5Td0yZq1nn1dJGtK1GksXnluYPLcmSRF6IqnIMLJ3LgpIGvyFaOV5a1n2GXxlOwOQfICHInZ2tDazxCR-Z7Vpfzc);"><div class="absolute inset-0 bg-gradient-to-t from-background-dark via-background-dark/60 to-transparent"></div><div class="absolute inset-0 bg-gradient-to-r from-background-dark/90 via-transparent to-transparent"></div></div><div class="relative z-10 w-full max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-8 flex flex-col justify-center h-full pt-20 pb-12"><div class="max-w-3xl"><div class="flex items-center gap-3 mb-6"><span class="h-0.5 w-12 bg-primary"></span><span class="text-primary font-bold tracking-[0.2em] uppercase text-sm">Automotive Lifestyle</span></div><h1 class="text-5xl md:text-7xl lg:text-8xl font-black text-white leading-[0.9] tracking-tight mb-8">JOIN THE <br/><span class="text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-500">HUNT.</span></h1><p class="text-lg md:text-xl text-gray-300 max-w-xl mb-10 font-light leading-relaxed">Exclusive access to Hunters and Habitats. Experience the thrill of the drive and the community that drives it. </p><div class="flex flex-col sm:flex-row gap-4"><button class="bg-primary hover:bg-red-700 text-white text-base font-bold py-4 px-8 rounded-lg uppercase tracking-wider transition-all transform hover:translate-x-1">Become a Member </button><button class="group flex items-center justify-center gap-2 bg-white/10 hover:bg-white/20 backdrop-blur-sm border border-white/20 text-white text-base font-bold py-4 px-8 rounded-lg uppercase tracking-wider transition-all"><span class="material-symbols-outlined group-hover:text-primary transition-colors">play_circle</span>Watch Latest Drive </button></div></div></div><!-- Decorative bottom line --><div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-primary via-primary/50 to-transparent"></div></section><!-- Hunters & Habitats (Features) --><section class="py-20 bg-background-light dark:bg-background-dark relative"><div class="max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-8"><div class="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12"><!-- Card 1 --><div class="group relative overflow-hidden rounded-xl h-[400px] cursor-pointer"><div class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110" data-alt="Group of friends leaning on a classic car during sunset" style="background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuBjWohKuR9jU5-2GV-DHMNw8F7eu4hY4BWidEf5BXuPxOpcL8aqhLaGZrkamrVXAZIWV_tpj1Xx8i_5ydUMP7qPyZzeqaLT-7agp-XUH5gfVmNXCj6BxLdFd5_OTY81zCQNzVV8O90a9zfZGTDkxffVQO0NkBZV1gXo5rugXqqg4yBjv-ZYyJfhIbQsvTNogV4sZibiCw6-IwCzOyojdQcQg6Lex0BNkadQG6-hI39b5ncAFnqT-01fyva97nbVOn8DbnSDTZd0ins);"></div><div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent"></div><div class="absolute bottom-0 left-0 p-8 w-full"><div class="h-1 w-12 bg-primary mb-4 transform origin-left transition-all duration-300 group-hover:w-24"></div><h3 class="text-3xl font-black text-white uppercase mb-2">Hunters</h3><p class="text-gray-300 text-sm md:text-base opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300">Join a community of passionate enthusiasts. Share your journey. </p><div class="mt-4 flex items-center text-primary font-bold uppercase text-sm tracking-wider opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-75">Explore Community <span class="material-symbols-outlined text-sm ml-1">arrow_forward</span></div></div></div><!-- Card 2 --><div class="group relative overflow-hidden rounded-xl h-[400px] cursor-pointer"><div class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110" data-alt="Scenic winding mountain road view from inside a car" style="background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuCZLMymHg9sShSbhHkcF6wGo_OJWIXgIBOdDi_yZOwJ37xmaMBctt_FLjfCHO_a0rDapAJ9g10fTXrKOOiXhZkRh8PgPmDwWsfWgHjQrCwcmYY2wRbHmiy82jbOReyZyttXQoF700S8HFo5AqZI0K28Colwbo51CLehzbzlLjCBat5ZalCCyYI_V6zkw7EAOETx5oIRH63Qp8sk97RNeeMqWOWJ7AtoMhvOiHy4ZicR0CQ0ScR7qzOURa3adihrqBnH0PTCVyhx-80);"></div><div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent"></div><div class="absolute bottom-0 left-0 p-8 w-full"><div class="h-1 w-12 bg-accent-gold mb-4 transform origin-left transition-all duration-300 group-hover:w-24"></div><h3 class="text-3xl font-black text-white uppercase mb-2">Habitats</h3><p class="text-gray-300 text-sm md:text-base opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300">Discover the world's most breathtaking driving routes and locations.
                        </p>
<div class="mt-4 flex items-center text-accent-gold font-bold uppercase text-sm tracking-wider opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-75">
                            View Locations <span class="material-symbols-outlined text-sm ml-1">arrow_forward</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Episode Drives Carousel -->
<section class="py-16 border-t border-gray-200 dark:border-[#2a1a1a]">
<div class="max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-end mb-10">
<div>
<h2 class="text-3xl md:text-4xl font-black uppercase text-slate-900 dark:text-white mb-2">Our Episode Drives</h2>
<div class="red-line w-24"></div>
</div>
<a class="hidden md:flex items-center text-sm font-bold uppercase text-gray-500 dark:text-gray-400 hover:text-primary transition-colors" href="#">
                    View All Episodes <span class="material-symbols-outlined ml-1">arrow_right_alt</span>
</a>
</div>
<div class="flex overflow-x-auto gap-6 pb-8 scrollbar-hide snap-x snap-mandatory">
<!-- Episode 1 -->
<div class="min-w-[300px] md:min-w-[380px] snap-start">
<div class="relative rounded-lg overflow-hidden aspect-video group cursor-pointer mb-4">
<img alt="Sports car driving on coastal highway" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" data-alt="Silver sports car driving on coastal highway" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBXRl-mEEzqzlhUwZHsUpX2r5YZUQGLwNaE8SqnypC9K2-4gIzJXSEi0qHKFS8n2Hs6K9w166Q1nKlHdbDD5whMsLvBSOel74A1flkAw-upP65RxfZg127FQP4XwJGNFCo381vskwCnS8Onvgbs2gMQZFy5muuCycKcXqOrfxIztnDpi3P_uO8GQvvUKMLDdSIALydrr2DD5B0_yo65LlWYZP1Fd4niY_494Ldx996bxaAPnVwB_zrAi83b9yHBMEkjFYwImouN83Y"/>
<div class="absolute inset-0 bg-black/40 group-hover:bg-black/20 transition-colors flex items-center justify-center">
<div class="size-12 rounded-full bg-primary/90 text-white flex items-center justify-center transform scale-90 group-hover:scale-100 transition-transform shadow-lg">
<span class="material-symbols-outlined fill-1">play_arrow</span>
</div>
</div>
<div class="absolute bottom-3 right-3 bg-black/80 px-2 py-1 rounded text-xs font-bold text-white">45:20</div>
</div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-1 group-hover:text-primary transition-colors">The Alpine Route</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Season 2 • Episode 12</p>
</div>
<!-- Episode 2 -->
<div class="min-w-[300px] md:min-w-[380px] snap-start">
<div class="relative rounded-lg overflow-hidden aspect-video group cursor-pointer mb-4">
<img alt="Supercar parked in neon lit city street" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" data-alt="Supercar parked in neon lit city street at night" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBA0qxM66AeRsPE7zRUjSXPruXHEc6sCNQSxvZZf1nFbQ89CuQkryGS7WHXvIMhjeHb1bNuYon3SgUaOEhdo3_sAOCkZEfVLcgt5cq4a3ETqqV463mrVmOVI6FBcTKs3lajwfJY9TqGxGkPTruxqPe_Qkuey4vs2ufKG7cnAxAduELQKbacDAIrWK5oQaMuQO1iQob-rZ9hzqr4Aa4H6Ga3VTpWxmk067fnRYxJrmtWq3z7TfBAW7TxFilw34x41hR9R8hJUxtBHs0"/>
<div class="absolute inset-0 bg-black/40 group-hover:bg-black/20 transition-colors flex items-center justify-center">
<div class="size-12 rounded-full bg-primary/90 text-white flex items-center justify-center transform scale-90 group-hover:scale-100 transition-transform shadow-lg">
<span class="material-symbols-outlined fill-1">play_arrow</span>
</div>
</div>
<div class="absolute bottom-3 right-3 bg-black/80 px-2 py-1 rounded text-xs font-bold text-white">32:15</div>
</div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-1 group-hover:text-primary transition-colors">Neon Tokyo Drift</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Season 2 • Episode 13</p>
</div>
<!-- Episode 3 -->
<div class="min-w-[300px] md:min-w-[380px] snap-start">
<div class="relative rounded-lg overflow-hidden aspect-video group cursor-pointer mb-4">
<img alt="Classic muscle car on desert road" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" data-alt="Blue classic muscle car on a dusty desert road" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDquUgNBV8ICUWIVoJr7Qrck30rqwaYtHPXxEZA9bDEduEIOzlPyME1tb7pOxq6QFTnIrP-FKaM8nrOt9D6zRuIMj_bRkDZ88giJOJUm5iuEvBBhj8A-MBSuQu1O5oL2QZ-hfOGr4NBcZ5DRUzpjX5lD_HmpKcuf3LNoQnWiKhdMGFT06g3oMErc8NM3K4nu0aThcFz3zkM1I2WMqBQdOMRKnzCFiDOY9Vpe0LTyV8q1IVDDt05JzYYyj6iC9i3hmqUZS2dezuFY_Y"/>
<div class="absolute inset-0 bg-black/40 group-hover:bg-black/20 transition-colors flex items-center justify-center">
<div class="size-12 rounded-full bg-primary/90 text-white flex items-center justify-center transform scale-90 group-hover:scale-100 transition-transform shadow-lg">
<span class="material-symbols-outlined fill-1">play_arrow</span>
</div>
</div>
<div class="absolute bottom-3 right-3 bg-black/80 px-2 py-1 rounded text-xs font-bold text-white">50:00</div>
</div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-1 group-hover:text-primary transition-colors">Desert Heat Run</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Season 2 • Episode 14</p>
</div>
<!-- Episode 4 -->
<div class="min-w-[300px] md:min-w-[380px] snap-start">
<div class="relative rounded-lg overflow-hidden aspect-video group cursor-pointer mb-4">
<img alt="Electric vehicle charging station scenic view" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" data-alt="Futuristic electric car charging with scenic mountain backdrop" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDcXChZMmIHth-vyop4dq9NiXL0lIaiqcRQQSmUrWHBzi00gm8ULYTOicMSTbalkoGbicKf22fhMA5ZXHyxFYaMqVbp2G2tDQ4FhduXYNYwBduTMkLDlTPza0xsafLJry9LlexLobFdmnSxVPnREDsvMQQ_tx2A9szjHhUbgD1ejY_o-pCkwnFxycmdixx9GpnuHL02449w4GXhluJFQZ2QnzT7bFCsYTBX46xRk8IQycIAJ2YUurCsRUUsAM7aYN45oCX_EYWC8hk"/>
<div class="absolute inset-0 bg-black/40 group-hover:bg-black/20 transition-colors flex items-center justify-center">
<div class="size-12 rounded-full bg-primary/90 text-white flex items-center justify-center transform scale-90 group-hover:scale-100 transition-transform shadow-lg">
<span class="material-symbols-outlined fill-1">play_arrow</span>
</div>
</div>
<div class="absolute bottom-3 right-3 bg-black/80 px-2 py-1 rounded text-xs font-bold text-white">28:45</div>
</div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-1 group-hover:text-primary transition-colors">Silent Power</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Season 2 • Episode 15</p>
</div>
</div>
</div>
</section>
<!-- News & Reviews (Grid) -->
<section class="py-16 bg-white dark:bg-[#1f1212]">
<div class="max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl md:text-4xl font-black uppercase text-slate-900 dark:text-white mb-8">Latest News &amp; Reviews</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Featured News (Large) -->
<div class="md:col-span-2 relative group rounded-xl overflow-hidden min-h-[400px]">
<img alt="Modern luxury car interior" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="Close up of a luxury car steering wheel and dashboard" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBdJwy9C6uSHBCR6TXoY0oj2hlUI9rxYWEm8gXHomIg-7eXCJAVAGe66MibG9sxGlIsQf7hj_n1DsvBsuVLDem6I8asLRYD_HeaxR3d7Z4HSW16o1Un6h7eNiv5GGsBn2f_H59-jzY2w2dnyU5UF8_HpUAVCf2z7sVQtFvxouYxRXNNxGJh8OR9jwX0zb_lOar4thR67wY0sWJpXts3o2P99DBgM5ISEqu7Qc_1i33a_a0jEFXSonNrL1v5xE1bxhmc28TFyeFMJ3I"/>
<div class="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent"></div>
<div class="absolute bottom-0 p-8">
<span class="inline-block px-3 py-1 bg-primary text-white text-xs font-bold uppercase rounded mb-3">Review</span>
<h3 class="text-3xl md:text-4xl font-bold text-white mb-3 leading-tight group-hover:underline decoration-primary decoration-4 underline-offset-4">The Future of Grand Touring is Here</h3>
<p class="text-gray-300 mb-4 line-clamp-2 max-w-xl">We take the latest GT prototype for a spin across the continent to test its limits, comfort, and sheer driving pleasure.</p>
<span class="text-sm text-gray-400">Oct 24, 2023 • By Alex Hunter</span>
</div>
</div>
<!-- Side News 1 -->
<div class="flex flex-col gap-6">
<article class="flex flex-col h-full bg-gray-50 dark:bg-[#2a1a1a] rounded-xl overflow-hidden transition-shadow hover:shadow-lg">
<div class="h-48 overflow-hidden">
<img alt="Car engine detail" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500" data-alt="Detailed view of a high performance car engine bay" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDU_g70j9yiQll1oCKVA79qJIm4NXD7G1HCWVAQZVKIgsI0NqH2YbwAKIwF6VoHIUPaywCRY00PwPquCfwdNPDDHtRnerFiwJFOZ8k5EhWGq520Gwe0Ap4CkvofyfQcCy8_7ExEXT5DPQnYy-ISoHuZJaa_CmjMsJHROofIpBxGdZp6BensLfIhkUytxQAw7YsiQ7yk-yuOFWJMOa9TQCBjutfqv7_fdyx0Op8Ick5xTHo1c1pNfe2xClk0X2MyrZUAcgnOnBpUHAc"/>
</div>
<div class="p-6 flex flex-col flex-1">
<span class="text-xs font-bold text-primary uppercase mb-2">Tech</span>
<h4 class="text-xl font-bold text-slate-900 dark:text-white mb-2 leading-tight hover:text-primary cursor-pointer">V12 vs EV: The Sound Debate</h4>
<p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-3 mb-4">Can synthesized sound ever replace the roar of a naturally aspirated engine? We investigate.</p>
<div class="mt-auto pt-4 border-t border-gray-200 dark:border-gray-700">
<a class="text-sm font-bold text-slate-900 dark:text-white hover:text-primary" href="#">Read Article</a>
</div>
</div>
</article>
<article class="flex flex-col h-full bg-gray-50 dark:bg-[#2a1a1a] rounded-xl overflow-hidden transition-shadow hover:shadow-lg">
<div class="p-6 flex flex-col flex-1 justify-center">
<span class="text-xs font-bold text-accent-gold uppercase mb-2">Lifestyle</span>
<h4 class="text-xl font-bold text-slate-900 dark:text-white mb-2 leading-tight hover:text-accent-gold cursor-pointer">5 Essentials for Your Next Road Trip</h4>
<p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-4">From navigation tools to the perfect playlist, here is what you need.</p>
<a class="text-sm font-bold text-slate-900 dark:text-white hover:text-accent-gold mt-auto" href="#">Read Listicle</a>
</div>
</article>
</div>
</div>
</div>
</section>
<!-- The Garage -->
<section class="py-20 bg-background-light dark:bg-background-dark overflow-hidden">
<div class="max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row md:items-end justify-between mb-12">
<div>
<h2 class="text-5xl md:text-6xl font-black text-slate-900 dark:text-white/10 uppercase mb-[-20px] ml-[-4px]">Garage</h2>
<h3 class="text-3xl font-bold text-slate-900 dark:text-white relative z-10">Member Builds</h3>
</div>
<button class="mt-4 md:mt-0 px-6 py-2 border border-slate-900 dark:border-white text-slate-900 dark:text-white font-bold uppercase text-sm hover:bg-slate-900 hover:text-white dark:hover:bg-white dark:hover:text-black transition-colors rounded">
                    Submit Your Build
                </button>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- Garage Item 1 -->
<div class="group relative aspect-[3/4] rounded-lg overflow-hidden cursor-pointer">
<img alt="Red Ferrari" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110 grayscale group-hover:grayscale-0" data-alt="Red Ferrari parked on a cobblestone street" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCsR3Wg7kpIfehyZFEvm2u6XwGw1PrqFE-pakMcXw5kIT8HrLXDSkz-g5btZK1UrPItXgLT5I1oClGSuhezvPYPNd-8ADiFGItkZcNuQ4gu6KkLbg_gNLH89Y4SQIGFhEa3b_lIt3Ky5chPnY42lmCBdEiYx8Vw2hjpaf2TZRXfGwvI9VurdMVdhejApy6JqFBMMIlTd2gU002LqLnGGCIAa4cZSl3h9f8Uafm1Lb_BA_-e0yr-RTwc_Xx0Fe_y4izPs_VShDMuRR0"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div class="absolute bottom-0 left-0 p-6">
<p class="text-primary font-bold text-xs uppercase mb-1">1987 Classic</p>
<h4 class="text-white text-xl font-bold">The Red Stallion</h4>
<div class="flex gap-4 mt-2 text-xs text-gray-300 font-mono">
<span>478 HP</span>
<span>|</span>
<span>V8 Turbo</span>
</div>
</div>
</div>
</div>
<!-- Garage Item 2 -->
<div class="group relative aspect-[3/4] rounded-lg overflow-hidden cursor-pointer">
<img alt="Porsche 911" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110 grayscale group-hover:grayscale-0" data-alt="Rear view of a Porsche 911 on a track" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC2W6LtZ3dJwGsHBI5-I0ItGXmCAYOD74y91_3w9TKcqIq2mKuepMghT4zZMBq2tt0T9PJhB0aiOF6cM4M1bmbljP7wr-Yla8ETWUJwivzyJEs4H1UtMwb_90KZ2JvwOrkA5q4E3-N9Q2LLs6SnYNxcUyVIUU1vx4h8nabfiOzU3rsjxIRcZ6AhWMtMhMinzFL9wmgFCQiuHXCOFAsv9WSpiGeQT0HVSUhwVuKKQ1z6ULQkutRDbWQiYWgXg9yyrrCni6olvrGSiJQ"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div class="absolute bottom-0 left-0 p-6">
<p class="text-primary font-bold text-xs uppercase mb-1">Track Spec</p>
<h4 class="text-white text-xl font-bold">GT3 RS Widowmaker</h4>
<div class="flex gap-4 mt-2 text-xs text-gray-300 font-mono">
<span>520 HP</span>
<span>|</span>
<span>Flat-6</span>
</div>
</div>
</div>
</div>
<!-- Garage Item 3 -->
<div class="group relative aspect-[3/4] rounded-lg overflow-hidden cursor-pointer">
<img alt="Audi R8" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110 grayscale group-hover:grayscale-0" data-alt="Silver Audi R8 parked in a modern garage" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDROi_QVt3SY_s0Fo1y3_lGiWCj6bk5Mu-SJ9ypOWaI1GsiQktHJhFTK3Y_P9bZ_umODSbLRG-NH2m9nAV2Lhzy_MFGXCQMs7b6akXu_OEBUQUjAhRcGJljIoZXxPhSOF3c5044hC5eyXM14VgOzSqhev5YLetf5NOjNFofVbnqvtctLy6hbDlV0OwIp-U5pRMn33CTfR8-zqd-2yi6DpzbGfRtI_-J2oKZ55K9_OtSjemA7l_gnN0cGLaznGEidF7iwQuIeV_Jox0"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div class="absolute bottom-0 left-0 p-6">
<p class="text-primary font-bold text-xs uppercase mb-1">Daily Driver</p>
<h4 class="text-white text-xl font-bold">V10 Plus Quattro</h4>
<div class="flex gap-4 mt-2 text-xs text-gray-300 font-mono">
<span>602 HP</span>
<span>|</span>
<span>V10 NA</span>
</div>
</div>
</div>
</div>
<!-- Garage Item 4 -->
<div class="group relative aspect-[3/4] rounded-lg overflow-hidden cursor-pointer bg-gray-200 dark:bg-surface-dark flex items-center justify-center border-2 border-dashed border-gray-400 dark:border-gray-700">
<div class="text-center p-6">
<div class="size-16 bg-gray-300 dark:bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-primary group-hover:text-white transition-colors">
<span class="material-symbols-outlined text-3xl">add</span>
</div>
<h4 class="text-slate-900 dark:text-white text-lg font-bold">Add Your Car</h4>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Join the digital garage.</p>
</div>
</div>
</div>
</div>
</section>
<!-- PRLab & Eco Park (Split Section) -->
<section class="grid grid-cols-1 lg:grid-cols-2">
<!-- PRLab -->
<div class="relative py-24 px-8 lg:px-16 bg-zinc-900 border-r border-zinc-800 flex flex-col justify-center overflow-hidden">
<!-- Background Pattern -->
<div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(#d4af37 1px, transparent 1px); background-size: 20px 20px;"></div>
<div class="relative z-10 max-w-lg">
<span class="text-accent-gold font-bold tracking-[0.2em] uppercase text-sm mb-4 block">Agency Services</span>
<h2 class="text-4xl lg:text-5xl font-black text-white mb-6 uppercase">Routehunters <span class="text-accent-gold">PRLab</span></h2>
<div class="gold-line w-20 mb-6"></div>
<p class="text-gray-400 text-lg mb-8 leading-relaxed">
                    Amplifying automotive stories. We are a specialized PR agency connecting brands with the petrolhead community through authentic storytelling and digital excellence.
                </p>
<button class="text-white border-2 border-accent-gold hover:bg-accent-gold hover:text-black font-bold uppercase py-3 px-8 rounded transition-colors duration-300">
                    Consult with Us
                </button>
</div>
</div>
<!-- RH Eco Park -->
<div class="relative py-24 px-8 lg:px-16 bg-emerald-950 flex flex-col justify-center overflow-hidden">
<!-- Background Image Overlay -->
<div class="absolute inset-0 opacity-30 bg-cover bg-center mix-blend-overlay" data-alt="Dense green forest canopy from above" style="background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuAYkruBW2sjqv-gq7MpGnWrHPBJeOy5O5SBUBtPx8beDZNsf63g1ZHtZCCRoAvcrT0X30w94yMZM9on4aXyFm7IBFG9xXtzi-tE9CJi0JZmQYsABzYRf4k0T6liYl_U8giB5yW6fmzGuzJpxS0a8R18rTVvXtRDB2jQX4wD30avGbkbKbe9_J1MzBpPdRqQBjGiX5P1XA1tIFKA42K2jCPVeR-R1sgtxX4xqGez7CJkz7XuGpWTMcIYQKJHfE2wrrUWPdwPNtX-tyU);"></div>
<div class="relative z-10 max-w-lg lg:ml-auto">
<span class="text-emerald-400 font-bold tracking-[0.2em] uppercase text-sm mb-4 block">Sustainability</span>
<h2 class="text-4xl lg:text-5xl font-black text-white mb-6 uppercase">RH <span class="text-emerald-500">Eco Park</span></h2>
<div class="h-[2px] w-20 bg-emerald-500 mb-6"></div>
<p class="text-gray-300 text-lg mb-8 leading-relaxed">
                    Driving sustainably doesn't mean stopping. We offset our carbon footprint through our dedicated Eco Park initiatives,preserving the habitats we drive through. </p><button class="text-white bg-emerald-700 hover:bg-emerald-600 font-bold uppercase py-3 px-8 rounded transition-colors duration-300 shadow-lg shadow-emerald-900/50">Learn More </button></div></div></section><!-- Footer --><footer class="bg-black text-white pt-20 pb-10 border-t border-zinc-900"><div class="max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-8"><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16"><!-- Brand --><div><div class="flex items-center gap-2 mb-6 text-white"><svg class="size-8 text-primary" fill="none" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M4 42.4379C4 42.4379 14.0962 36.0744 24 41.1692C35.0664 46.8624 44 42.2078 44 42.2078L44 7.01134C44 7.01134 35.068 11.6577 24.0031 5.96913C14.0971 0.876274 4 7.27094 4 7.27094L4 42.4379Z" fill="currentColor"></path></svg><h2 class="text-xl font-black uppercase">Routehunters</h2></div><p class="text-gray-500 text-sm leading-relaxed mb-6">The ultimate destination for automotive lifestyle,driving adventures,and petrolhead community. Join the hunt today. </p><div class="flex gap-4"><a class="size-10 rounded-full bg-zinc-900 flex items-center justify-center text-gray-400 hover:bg-primary hover:text-white transition-colors" href="#"><!-- Social icon placeholder --><span class="font-bold">IG</span></a><a class="size-10 rounded-full bg-zinc-900 flex items-center justify-center text-gray-400 hover:bg-primary hover:text-white transition-colors" href="#"><!-- Social icon placeholder --><span class="font-bold">YT</span></a><a class="size-10 rounded-full bg-zinc-900 flex items-center justify-center text-gray-400 hover:bg-primary hover:text-white transition-colors" href="#"><!-- Social icon placeholder --><span class="font-bold">TW</span></a></div></div><!-- Explore --><div><h3 class="text-lg font-bold uppercase mb-6 border-l-4 border-primary pl-3">Explore</h3><ul class="space-y-3 text-gray-400 text-sm"><li><a class="hover:text-white hover:pl-2 transition-all" href="#">Lifestyle</a></li><li><a class="hover:text-white hover:pl-2 transition-all" href="#">Drives &amp;Episodes</a></li><li><a class="hover:text-white hover:pl-2 transition-all" href="#">News &amp;Reviews</a></li><li><a class="hover:text-white hover:pl-2 transition-all" href="#">The Garage</a></li><li><a class="hover:text-white hover:pl-2 transition-all" href="#">Routehunters Shop</a></li></ul></div><!-- Company --><div><h3 class="text-lg font-bold uppercase mb-6 border-l-4 border-accent-gold pl-3">Company</h3><ul class="space-y-3 text-gray-400 text-sm"><li><a class="hover:text-white hover:pl-2 transition-all" href="#">About Us</a></li><li><a class="hover:text-white hover:pl-2 transition-all" href="#">PRLab Agency</a></li><li><a class="hover:text-white hover:pl-2 transition-all" href="#">Eco Park Initiatives</a></li><li><a class="hover:text-white hover:pl-2 transition-all" href="#">Careers</a></li><li><a class="hover:text-white hover:pl-2 transition-all" href="#">Contact</a></li></ul></div><!-- Newsletter --><div><h3 class="text-lg font-bold uppercase mb-6">Join the Inner Circle</h3><p class="text-gray-500 text-sm mb-4">Get the latest episodes and exclusive invites straight to your inbox.</p><form class="flex flex-col gap-3"><input class="bg-zinc-900 border-none rounded px-4 py-3 text-white placeholder-gray-600 focus:ring-1 focus:ring-primary" placeholder="Enter your email" type="email"/><button class="bg-primary hover:bg-red-700 text-white font-bold uppercase py-3 rounded transition-colors" type="submit">Subscribe</button></form></div></div><div class="border-t border-zinc-900 pt-8 flex flex-col md:flex-row justify-between items-center gap-4"><p class="text-gray-600 text-xs">© 2024 Routehunters. All rights reserved.</p><div class="flex gap-6 text-gray-600 text-xs"><a class="hover:text-white" href="#">Privacy Policy</a><a class="hover:text-white" href="#">Terms of Service</a></div></div></div></footer></body></html>