Creativity, Unbridled.

<div class="bg-zinc-950 text-zinc-100 font-sans selection:bg-amber-500 selection:text-black">
    <!-- Navigation -->
    <nav class="fixed w-full z-50 bg-zinc-950/80 backdrop-blur-md border-b border-zinc-800/50">
        <div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <div class="w-8 h-8 bg-amber-500 rounded-sm flex items-center justify-center">
                    <svg class="w-6 h-6 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
                    </svg>
                </div>
                <span class="text-xl font-bold tracking-tighter uppercase">Workhorse</span>
            </div>
            <div class="hidden md:flex space-x-8 text-sm font-medium tracking-widest uppercase text-zinc-400">
                <a href="#philosophy" class="hover:text-amber-500 transition-colors">Philosophy</a>
                <a href="#director" class="hover:text-amber-500 transition-colors">The Director</a>
                <a href="#work" class="hover:text-amber-500 transition-colors">Output</a>
                <a href="#contact" class="px-4 py-2 border border-zinc-700 hover:border-amber-500 hover:text-amber-500 transition-all">Stall Hire</a>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="relative h-screen flex items-center justify-center overflow-hidden">
        <div class="absolute inset-0 z-0">
            <div class="absolute inset-0 bg-gradient-to-b from-transparent to-zinc-950"></div>
            <img src="https://images.unsplash.com/photo-1553284965-83fd3e82fa5a?auto=format&fit=crop&q=80&w=2000" alt="Majestic Horse" class="w-full h-full object-cover opacity-40 grayscale hover:grayscale-0 transition-all duration-1000">
        </div>
        
        <div class="relative z-10 text-center max-w-4xl px-6">
            <span class="inline-block py-1 px-3 mb-6 border border-amber-500/30 text-amber-500 text-xs font-bold tracking-[0.3em] uppercase animate-pulse">
                Pure Instinctive Direction
            </span>
            <h1 class="text-6xl md:text-9xl font-black uppercase leading-none tracking-tighter mb-8">
                Creativity, <span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-amber-700 italic">Unbridled.</span>
            </h1>
            <p class="text-lg md:text-xl text-zinc-400 max-w-2xl mx-auto leading-relaxed mb-10">
                A contemporary creative agency where every campaign, every pixel, and every strategy is dictated by the raw, intuitive power of a 1,200-pound Dutch Warmblood.
            </p>
            <div class="flex flex-col md:flex-row items-center justify-center gap-4">
                <a href="#work" class="bg-amber-500 text-black px-10 py-4 font-bold uppercase tracking-widest hover:bg-white transition-colors w-full md:w-auto">View the Pasture</a>
                <a href="#philosophy" class="bg-transparent border border-zinc-700 text-white px-10 py-4 font-bold uppercase tracking-widest hover:border-amber-500 transition-colors w-full md:w-auto">Our Why</a>
            </div>
        </div>
    </section>

    <!-- The Philosophy -->
    <section id="philosophy" class="py-24 bg-zinc-900">
        <div class="max-w-7xl mx-auto px-6">
            <div class="grid md:grid-cols-2 gap-16 items-center">
                <div>
                    <h2 class="text-4xl font-bold uppercase mb-8">Human Logic is <span class="text-amber-500">Overrated.</span></h2>
                    <p class="text-zinc-400 text-lg mb-6 leading-relaxed">
                        The modern agency landscape is bogged down by committees, focus groups, and data-driven paralysis. At Workhorse, we’ve eliminated the noise. We’ve replaced the Creative Director’s turtleneck with a coat of hair and the ego with pure, equine instinct.
                    </p>
                    <p class="text-zinc-400 text-lg mb-8 leading-relaxed">
                        When Barnaby—our Chief Creative Stallion—stamps his hoof, it isn't just a movement. It's a binary decision on brand positioning. When he neighs toward a specific Pantone swatch, we listen. Why? Because instinct doesn't have a bias.
                    </p>
                    <div class="grid grid-cols-2 gap-8 py-8 border-t border-zinc-800">
                        <div>
                            <div class="text-3xl font-bold text-amber-500">0%</div>
                            <div class="text-xs uppercase tracking-widest text-zinc-500">Human Interference</div>
                        </div>
                        <div>
                            <div class="text-3xl font-bold text-amber-500">100%</div>
                            <div class="text-xs uppercase tracking-widest text-zinc-500">Raw Intuition</div>
                        </div>
                    </div>
                </div>
                <div class="relative">
                    <div class="absolute -inset-4 border border-amber-500/20 translate-x-8 translate-y-8"></div>
                    <img src="https://images.unsplash.com/photo-1598974357801-cbca100e65d3?auto=format&fit=crop&q=80&w=1200" alt="Minimalist Stable" class="relative z-10 grayscale brightness-75">
                </div>
            </div>
        </div>
    </section>

    <!-- The Director -->
    <section id="director" class="py-24">
        <div class="max-w-7xl mx-auto px-6 text-center">
            <h2 class="text-sm font-bold tracking-[.4em] text-amber-500 uppercase mb-4">The Mind Behind The Method</h2>
            <h3 class="text-5xl font-black uppercase mb-16">Meet Barnaby</h3>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="p-8 bg-zinc-900 border border-zinc-800 hover:border-amber-500 transition-all group">
                    <div class="w-16 h-16 bg-zinc-800 mb-6 flex items-center justify-center group-hover:bg-amber-500 transition-colors">
                        <svg class="w-8 h-8 text-amber-500 group-hover:text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                    </div>
                    <h4 class="text-xl font-bold uppercase mb-4">Visual Instinct</h4>
                    <p class="text-zinc-400 text-sm leading-relaxed">Barnaby selects color palettes based on seasonal pasture fluctuations and the electromagnetic frequency of carrots.</p>
                </div>
                <div class="p-8 bg-zinc-900 border border-zinc-800 hover:border-amber-500 transition-all group">
                    <div class="w-16 h-16 bg-zinc-800 mb-6 flex items-center justify-center group-hover:bg-amber-500 transition-colors">
                        <svg class="w-8 h-8 text-amber-500 group-hover:text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                    </div>
                    <h4 class="text-xl font-bold uppercase mb-4">Spatial Layout</h4>
                    <p class="text-zinc-400 text-sm leading-relaxed">Compositional balance is achieved through the 'Gallop-Grid' method—a layout system derived from hoof patterns in soft mud.</p>
                </div>
                <div class="p-8 bg-zinc-900 border border-zinc-800 hover:border-amber-500 transition-all group">
                    <div class="w-16 h-16 bg-zinc-800 mb-6 flex items-center justify-center group-hover:bg-amber-500 transition-colors">
                        <svg class="w-8 h-8 text-amber-500 group-hover:text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.407 2.665 1L12 14M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.407-2.665-1L12 8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                    </div>
                    <h4 class="text-xl font-bold uppercase mb-4">Pricing Strategy</h4>
                    <p class="text-zinc-400 text-sm leading-relaxed">We don't do hourly rates. Barnaby stares at your budget and either starts eating hay (accepted) or walks away (declined).</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Portfolio Grid -->
    <section id="work" class="py-24 bg-black">
        <div class="max-w-7xl mx-auto px-6">
            <div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
                <div>
                    <h2 class="text-4xl font-black uppercase">Recent Stampings</h2>
                    <p class="text-zinc-500 mt-2">Projects directed entirely by Barnaby's movements.</p>
                </div>
                <div class="text-zinc-600 text-sm tracking-widest uppercase">Scroll to explore</div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-zinc-800 border border-zinc-800">
                <div class="aspect-square bg-zinc-900 relative overflow-hidden group">
                    <img src="https://images.unsplash.com/photo-1517404215738-15263e9f9178?auto=format&fit=crop&q=80&w=800" class="w-full h-full object-cover grayscale opacity-50 group-hover:scale-105 group-hover:opacity-100 group-hover:grayscale-0 transition-all duration-700">
                    <div class="absolute inset-0 p-8 flex flex-col justify-end bg-gradient-to-t from-black/80 to-transparent">
                        <p class="text-amber-500 font-bold text-xs uppercase tracking-widest mb-2">Tech Rebrand</p>
                        <h5 class="text-2xl font-bold uppercase leading-none">Oats & Silicon</h5>
                    </div>
                </div>
                <div class="aspect-square bg-zinc-900 relative overflow-hidden group">
                    <img src="https://images.unsplash.com/photo-1493246507139-91e8bef99c02?auto=format&fit=crop&q=80&w=800" class="w-full h-full object-cover grayscale opacity-50 group-hover:scale-105 group-hover:opacity-100 group-hover:grayscale-0 transition-all duration-700">
                    <div class="absolute inset-0 p-8 flex flex-col justify-end bg-gradient-to-t from-black/80 to-transparent">
                        <p class="text-amber-500 font-bold text-xs uppercase tracking-widest mb-2">Fashion Campaign</p>
                        <h5 class="text-2xl font-bold uppercase leading-none">The Mane Event</h5>
                    </div>
                </div>
                <div class="aspect-square bg-zinc-900 relative overflow-hidden group">
                    <img src="https://images.unsplash.com/photo-1449034446853-66c86144b0ad?auto=format&fit=crop&q=80&w=800" class="w-full h-full object-cover grayscale opacity-50 group-hover:scale-105 group-hover:opacity-100 group-hover:grayscale-0 transition-all duration-700">
                    <div class="absolute inset-0 p-8 flex flex-col justify-end bg-gradient-to-t from-black/80 to-transparent">
                        <p class="text-amber-500 font-bold text-xs uppercase tracking-widest mb-2">Beverage Design</p>
                        <h5 class="text-2xl font-bold uppercase leading-none">Trough Water 001</h5>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials -->
    <section class="py-24 border-y border-zinc-800 bg-zinc-950">
        <div class="max-w-4xl mx-auto px-6 text-center">
            <svg class="w-12 h-12 text-amber-500 mx-auto mb-8" fill="currentColor" viewBox="0 0 24 24"><path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H11.017V4H21.017C22.1216 4 23.017 4.89543 23.017 6V15C23.017 18.866 19.883 22 16.017 22H14.017V21ZM1.017 21L1.017 18C1.017 16.8954 1.91243 16 3.017 16H6.017C6.56928 16 7.017 15.5523 7.017 15V9C7.017 8.44772 6.56928 8 6.017 8H2.017C1.46472 8 1.017 8.44772 1.017 9V11C1.017 11.5523 0.56928 12 0.017 12H-1.983V4H8.017C9.12157 4 10.017 4.89543 10.017 6V15C10.017 18.866 6.883 22 3.017 22H1.017V21Z"></path></svg>
            <p class="text-2xl md:text-3xl font-medium leading-relaxed mb-8 text-zinc-300 italic">
                "We were skeptical when the pitch deck consisted of three pieces of partially chewed alfalfa. But Barnaby was right. Our luxury candle brand is now the #1 choice for stable hands worldwide. He sees what we cannot."
            </p>
            <div class="font-bold uppercase tracking-widest text-amber-500">Julius Thorne</div>
            <div class="text-xs text-zinc-500 uppercase tracking-widest mt-1">CEO, Ember & Ash</div>
        </div>
    </section>

    <!-- Call to Action -->
    <section id="contact" class="py-32 relative overflow-hidden">
        <div class="max-w-7xl mx-auto px-6 text-center relative z-10">
            <h2 class="text-6xl md:text-8xl font-black uppercase mb-10 leading-tight">Ready to <br><span class="text-amber-500">Break Free?</span></h2>
            <p class="text-xl text-zinc-400 mb-12 max-w-xl mx-auto">
                Barnaby is currently available for Q4 creative sprints. Slots fill up based on grazing patterns.
            </p>
            <form class="max-w-lg mx-auto flex flex-col gap-4">
                <input type="email" placeholder="YOUR EMAIL" class="bg-zinc-900 border border-zinc-800 p-5 text-zinc-100 focus:outline-none focus:border-amber-500 transition-colors uppercase tracking-widest text-xs font-bold">
                <button class="bg-amber-500 text-black p-5 font-black uppercase tracking-[.2em] hover:bg-white transition-colors">Request a Whinny</button>
            </form>
        </div>
        <!-- Decorative texture background -->
        <div class="absolute inset-0 opacity-5 pointer-events-none">
            <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')]"></div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-zinc-950 border-t border-zinc-900 py-12">
        <div class="max-w-7xl mx-auto px-6">
            <div class="flex flex-col md:flex-row justify-between items-center gap-8">
                <div class="flex items-center space-x-2">
                    <div class="w-6 h-6 bg-amber-500 flex items-center justify-center">
                        <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
                    </div>
                    <span class="text-lg font-bold tracking-tighter uppercase">Workhorse</span>
                </div>
                
                <div class="flex space-x-12">
                    <div>
                        <h6 class="text-xs font-bold text-zinc-500 uppercase tracking-widest mb-4 text-center md:text-left">Stables</h6>
                        <ul class="text-sm space-y-2 text-zinc-400 text-center md:text-left">
                            <li>Amsterdam HQ</li>
                            <li>The Kentucky Outpost</li>
                            <li>Virtual Pasture</li>
                        </ul>
                    </div>
                    <div>
                        <h6 class="text-xs font-bold text-zinc-500 uppercase tracking-widest mb-4 text-center md:text-left">Connect</h6>
                        <ul class="text-sm space-y-2 text-zinc-400 text-center md:text-left">
                            <li class="hover:text-amber-500 transition-colors cursor-pointer">Instagram</li>
                            <li class="hover:text-amber-500 transition-colors cursor-pointer">StableLink</li>
                            <li class="hover:text-amber-500 transition-colors cursor-pointer">Barn.fm</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="mt-12 pt-8 border-t border-zinc-900 text-center text-[10px] text-zinc-600 uppercase tracking-[0.5em]">
                &copy; 2024 Workhorse Agency. No horses were overworked in the making of this brand. Just inspired.
            </div>
        </div>
    </footer>
</div>