🏆 Award-Winning Equine-Led Creativity

Creative Direction by Instinct

The world's first and only creative agency where all artistic decisions are made by our Chief Creative Officer — a magnificent 12-year-old Friesian horse named Thunderhoof. No ego. No briefs. Just pure, unbridled creativity.

Let Thunderhoof Guide You View Our Stable of Work
🐎

"The best ideas come when you stop thinking and start galloping."

— Thunderhoof, CCO

Est. 2019 • Brooklyn, NY

Why a Horse?

In 2019, our founder Marcus Chen had an epiphany while visiting a horse ranch in upstate New York. As he watched Thunderhoof interact with his environment — choosing paths, reacting to colors, moving with intentionality — Marcus realized that creativity in its purest form is instinctual, not intellectual.

Today, every campaign, every logo, every brand identity that leaves our studio has been approved by Thunderhoof himself. We present options, and he chooses. His selection process? A proprietary combination of nuzzling, hoof taps, and the occasional enthusiastic neigh.

347
Projects Completed
98%
Client Satisfaction
12
Industry Awards
🎨
✨
🏇
🌾

Our Services

Every service is guided by Thunderhoof's unique perspective on what resonates with the human spirit.

🎯

Brand Identity

Thunderhoof selects color palettes by responding to swatches. His natural instincts have led to some of the most distinctive brands of the decade.

📱

Digital Design

Using specially designed touch-sensitive displays in his stable, Thunderhoof approves website layouts and app interfaces with hoof interactions.

🎬

Video Production

From storyboards to final cuts, Thunderhoof reviews footage and indicates preferences through his signature response system.

📦

Packaging Design

Physical mockups are presented to Thunderhoof, who interacts with materials and shapes to guide the final design direction.

📣

Campaign Strategy

Our human strategists develop options, but the final campaign direction is always chosen by Thunderhoof's intuitive selection process.

🖼️

Art Direction

Photography, illustration, typography — all visual elements pass through Thunderhoof's discerning equine eye before approval.

Selected Work

Every project approved by hoof, loved by humans.

🌸

Bloom Cosmetics

Brand Identity & Packaging

🌿

GreenPath Ventures

Full Brand Overhaul

🎵

Sonic Wave Records

Digital Campaign

☕

Sunrise Roasters

Packaging & Web Design

🚀

Nebula Tech

App Design & Brand Identity

🏛️

Metropolitan Museum

Exhibition Campaign

Meet Our CCO

Thunderhoof

A 12-year-old Friesian stallion with an uncanny ability to identify compelling visual narratives. Originally from a breeding farm in the Netherlands, Thunderhoof showed early signs of aesthetic sensitivity — consistently choosing the most harmoniously colored feeding buckets and arranging his hay in what his handlers called "surprisingly intentional patterns."

Today, he resides in our custom-built creative studio in Brooklyn, where he reviews all client work in a specially designed approval space. His decisions are final, non-negotiable, and consistently brilliant.

Favorite Color: Warm Amber
Sign: Sagittarius
Approvals/Day: 12-15
🐴
Chief Creative Officer

What Clients Say

Don't just take our word for it — hear from brands that trusted the hoof.

★★★★★

"We were skeptical at first, but watching Thunderhoof reject our first three logo concepts and then enthusiastically approve the fourth was a revelation. That logo increased our brand recognition by 340%."

👩
Sarah Chen
CEO, Bloom Cosmetics
★★★★★

"Thunderhoof has better taste than most creative directors I've worked with in my 20-year career. There's something pure about his process — no politics, no trends, just honest reactions."

👨
Michael Torres
CMO, Nebula Tech
★★★★★

"The best part? When you tell stakeholders 'a horse approved this,' it somehow ends all debates. Thunderhoof has become our secret weapon for decision-making."

👩
Emily Rodriguez
Founder, GreenPath Ventures

Our Process

How equine intuition meets human execution.

1

Discovery

Our human team meets with you to understand your goals, audience, and vision.

2

Creation

Our designers develop multiple concepts, each crafted to be presentation-ready for Thunderhoof.

3

Selection

Thunderhoof reviews all options in his studio. His choice is documented and becomes the direction.

4

Refinement

We refine the chosen concept, with final approval always returning to Thunderhoof.

Ready to Work with the Hoof?

Join the growing list of visionary brands who trust their creative direction to the most unbiased critic in the industry.

HTML Source Code


<!-- Navigation -->
<nav class="fixed w-full bg-white/90 backdrop-blur-md z-50 border-b border-stone-100">
  <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
    <div class="flex items-center gap-2">
      <span class="text-3xl">🐴</span>
      <span class="text-2xl font-bold text-stone-900 tracking-tight">WORKHORSE</span>
    </div>
    <div class="hidden md:flex items-center gap-8">
      <a href="#about" class="text-stone-600 hover:text-amber-600 transition">About</a>
      <a href="#services" class="text-stone-600 hover:text-amber-600 transition">Services</a>
      <a href="#work" class="text-stone-600 hover:text-amber-600 transition">Work</a>
      <a href="#team" class="text-stone-600 hover:text-amber-600 transition">The Visionary</a>
      <a href="#contact" class="bg-amber-500 text-white px-6 py-2 rounded-full hover:bg-amber-600 transition font-medium">Get Started</a>
    </div>
  </div>
</nav>

<!-- Hero Section -->
<section class="min-h-screen bg-gradient-to-br from-stone-50 via-amber-50/30 to-stone-100 pt-24 flex items-center">
  <div class="max-w-7xl mx-auto px-6 py-20 grid lg:grid-cols-2 gap-12 items-center">
    <div>
      <div class="inline-flex items-center gap-2 bg-amber-100 text-amber-800 px-4 py-2 rounded-full text-sm font-medium mb-6">
        <span>🏆</span> Award-Winning Equine-Led Creativity
      </div>
      <h1 class="text-5xl lg:text-7xl font-bold text-stone-900 leading-tight mb-6">
        Creative Direction by <span class="text-amber-500">Instinct</span>
      </h1>
      <p class="text-xl text-stone-600 mb-8 leading-relaxed">
        The world's first and only creative agency where all artistic decisions are made by our Chief Creative Officer — a magnificent 12-year-old Friesian horse named <strong>Thunderhoof</strong>. No ego. No briefs. Just pure, unbridled creativity.
      </p>
      <div class="flex flex-wrap gap-4">
        <a href="#contact" class="bg-amber-500 text-white px-8 py-4 rounded-full hover:bg-amber-600 transition font-semibold text-lg shadow-lg shadow-amber-500/30">
          Let Thunderhoof Guide You
        </a>
        <a href="#work" class="border-2 border-stone-300 text-stone-700 px-8 py-4 rounded-full hover:border-amber-500 hover:text-amber-600 transition font-semibold text-lg">
          View Our Stable of Work
        </a>
      </div>
    </div>
    <div class="relative">
      <div class="bg-gradient-to-br from-amber-400 to-amber-600 rounded-3xl p-8 shadow-2xl transform rotate-2 hover:rotate-0 transition-transform duration-500">
        <div class="bg-white rounded-2xl p-6 transform -rotate-2 hover:rotate-0 transition-transform duration-500">
          <div class="text-8xl text-center mb-4">🐎</div>
          <p class="text-center text-stone-600 italic text-lg">"The best ideas come when you stop thinking and start galloping."</p>
          <p class="text-center text-amber-600 font-semibold mt-2">— Thunderhoof, CCO</p>
        </div>
      </div>
      <div class="absolute -bottom-4 -left-4 bg-stone-900 text-white px-6 py-3 rounded-full text-sm font-medium">
        Est. 2019 • Brooklyn, NY
      </div>
    </div>
  </div>
</section>

<!-- About Section -->
<section id="about" class="py-24 bg-white">
  <div class="max-w-7xl mx-auto px-6">
    <div class="grid lg:grid-cols-2 gap-16 items-center">
      <div>
        <h2 class="text-4xl font-bold text-stone-900 mb-6">Why a Horse?</h2>
        <p class="text-lg text-stone-600 mb-6 leading-relaxed">
          In 2019, our founder Marcus Chen had an epiphany while visiting a horse ranch in upstate New York. As he watched Thunderhoof interact with his environment — choosing paths, reacting to colors, moving with intentionality — Marcus realized that creativity in its purest form is instinctual, not intellectual.
        </p>
        <p class="text-lg text-stone-600 mb-6 leading-relaxed">
          Today, every campaign, every logo, every brand identity that leaves our studio has been approved by Thunderhoof himself. We present options, and he chooses. His selection process? A proprietary combination of nuzzling, hoof taps, and the occasional enthusiastic neigh.
        </p>
        <div class="grid grid-cols-3 gap-6 mt-10">
          <div class="text-center">
            <div class="text-4xl font-bold text-amber-500">347</div>
            <div class="text-stone-500 text-sm">Projects Completed</div>
          </div>
          <div class="text-center">
            <div class="text-4xl font-bold text-amber-500">98%</div>
            <div class="text-stone-500 text-sm">Client Satisfaction</div>
          </div>
          <div class="text-center">
            <div class="text-4xl font-bold text-amber-500">12</div>
            <div class="text-stone-500 text-sm">Industry Awards</div>
          </div>
        </div>
      </div>
      <div class="grid grid-cols-2 gap-4">
        <div class="bg-stone-100 rounded-2xl p-8 h-64 flex items-center justify-center">
          <span class="text-6xl">🎨</span>
        </div>
        <div class="bg-amber-100 rounded-2xl p-8 h-64 flex items-center justify-center mt-8">
          <span class="text-6xl">✨</span>
        </div>
        <div class="bg-amber-500 rounded-2xl p-8 h-64 flex items-center justify-center">
          <span class="text-6xl">🏇</span>
        </div>
        <div class="bg-stone-900 rounded-2xl p-8 h-64 flex items-center justify-center mt-8">
          <span class="text-6xl">🌾</span>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Services Section -->
<section id="services" class="py-24 bg-stone-50">
  <div class="max-w-7xl mx-auto px-6">
    <div class="text-center mb-16">
      <h2 class="text-4xl font-bold text-stone-900 mb-4">Our Services</h2>
      <p class="text-xl text-stone-600 max-w-2xl mx-auto">Every service is guided by Thunderhoof's unique perspective on what resonates with the human spirit.</p>
    </div>
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
      <div class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition group">
        <div class="w-16 h-16 bg-amber-100 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-amber-500 transition">
          <span class="text-3xl">🎯</span>
        </div>
        <h3 class="text-xl font-bold text-stone-900 mb-3">Brand Identity</h3>
        <p class="text-stone-600">Thunderhoof selects color palettes by responding to swatches. His natural instincts have led to some of the most distinctive brands of the decade.</p>
      </div>
      <div class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition group">
        <div class="w-16 h-16 bg-amber-100 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-amber-500 transition">
          <span class="text-3xl">📱</span>
        </div>
        <h3 class="text-xl font-bold text-stone-900 mb-3">Digital Design</h3>
        <p class="text-stone-600">Using specially designed touch-sensitive displays in his stable, Thunderhoof approves website layouts and app interfaces with hoof interactions.</p>
      </div>
      <div class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition group">
        <div class="w-16 h-16 bg-amber-100 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-amber-500 transition">
          <span class="text-3xl">🎬</span>
        </div>
        <h3 class="text-xl font-bold text-stone-900 mb-3">Video Production</h3>
        <p class="text-stone-600">From storyboards to final cuts, Thunderhoof reviews footage and indicates preferences through his signature response system.</p>
      </div>
      <div class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition group">
        <div class="w-16 h-16 bg-amber-100 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-amber-500 transition">
          <span class="text-3xl">📦</span>
        </div>
        <h3 class="text-xl font-bold text-stone-900 mb-3">Packaging Design</h3>
        <p class="text-stone-600">Physical mockups are presented to Thunderhoof, who interacts with materials and shapes to guide the final design direction.</p>
      </div>
      <div class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition group">
        <div class="w-16 h-16 bg-amber-100 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-amber-500 transition">
          <span class="text-3xl">📣</span>
        </div>
        <h3 class="text-xl font-bold text-stone-900 mb-3">Campaign Strategy</h3>
        <p class="text-stone-600">Our human strategists develop options, but the final campaign direction is always chosen by Thunderhoof's intuitive selection process.</p>
      </div>
      <div class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition group">
        <div class="w-16 h-16 bg-amber-100 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-amber-500 transition">
          <span class="text-3xl">🖼️</span>
        </div>
        <h3 class="text-xl font-bold text-stone-900 mb-3">Art Direction</h3>
        <p class="text-stone-600">Photography, illustration, typography — all visual elements pass through Thunderhoof's discerning equine eye before approval.</p>
      </div>
    </div>
  </div>
</section>

<!-- Work/Portfolio Section -->
<section id="work" class="py-24 bg-white">
  <div class="max-w-7xl mx-auto px-6">
    <div class="text-center mb-16">
      <h2 class="text-4xl font-bold text-stone-900 mb-4">Selected Work</h2>
      <p class="text-xl text-stone-600">Every project approved by hoof, loved by humans.</p>
    </div>
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
      <div class="group cursor-pointer">
        <div class="bg-gradient-to-br from-rose-400 to-pink-600 rounded-2xl h-72 mb-4 flex items-center justify-center overflow-hidden">
          <span class="text-8xl group-hover:scale-110 transition-transform duration-300">🌸</span>
        </div>
        <h3 class="text-lg font-bold text-stone-900">Bloom Cosmetics</h3>
        <p class="text-stone-500">Brand Identity & Packaging</p>
      </div>
      <div class="group cursor-pointer">
        <div class="bg-gradient-to-br from-emerald-400 to-teal-600 rounded-2xl h-72 mb-4 flex items-center justify-center overflow-hidden">
          <span class="text-8xl group-hover:scale-110 transition-transform duration-300">🌿</span>
        </div>
        <h3 class="text-lg font-bold text-stone-900">GreenPath Ventures</h3>
        <p class="text-stone-500">Full Brand Overhaul</p>
      </div>
      <div class="group cursor-pointer">
        <div class="bg-gradient-to-br from-violet-400 to-purple-600 rounded-2xl h-72 mb-4 flex items-center justify-center overflow-hidden">
          <span class="text-8xl group-hover:scale-110 transition-transform duration-300">🎵</span>
        </div>
        <h3 class="text-lg font-bold text-stone-900">Sonic Wave Records</h3>
        <p class="text-stone-500">Digital Campaign</p>
      </div>
      <div class="group cursor-pointer">
        <div class="bg-gradient-to-br from-amber-400 to-orange-600 rounded-2xl h-72 mb-4 flex items-center justify-center overflow-hidden">
          <span class="text-8xl group-hover:scale-110 transition-transform duration-300">☕</span>
        </div>
        <h3 class="text-lg font-bold text-stone-900">Sunrise Roasters</h3>
        <p class="text-stone-500">Packaging & Web Design</p>
      </div>
      <div class="group cursor-pointer">
        <div class="bg-gradient-to-br from-blue-400 to-indigo-600 rounded-2xl h-72 mb-4 flex items-center justify-center overflow-hidden">
          <span class="text-8xl group-hover:scale-110 transition-transform duration-300">🚀</span>
        </div>
        <h3 class="text-lg font-bold text-stone-900">Nebula Tech</h3>
        <p class="text-stone-500">App Design & Brand Identity</p>
      </div>
      <div class="group cursor-pointer">
        <div class="bg-gradient-to-br from-stone-600 to-stone-900 rounded-2xl h-72 mb-4 flex items-center justify-center overflow-hidden">
          <span class="text-8xl group-hover:scale-110 transition-transform duration-300">🏛️</span>
        </div>
        <h3 class="text-lg font-bold text-stone-900">Metropolitan Museum</h3>
        <p class="text-stone-500">Exhibition Campaign</p>
      </div>
    </div>
  </div>
</section>

<!-- The Visionary Section -->
<section id="team" class="py-24 bg-gradient-to-br from-stone-900 via-stone-800 to-stone-900 text-white">
  <div class="max-w-7xl mx-auto px-6">
    <div class="grid lg:grid-cols-2 gap-16 items-center">
      <div class="order-2 lg:order-1">
        <div class="inline-block bg-amber-500/20 text-amber-400 px-4 py-2 rounded-full text-sm font-medium mb-6">
          Meet Our CCO
        </div>
        <h2 class="text-4xl font-bold mb-6">Thunderhoof</h2>
        <p class="text-xl text-stone-300 mb-6 leading-relaxed">
          A 12-year-old Friesian stallion with an uncanny ability to identify compelling visual narratives. Originally from a breeding farm in the Netherlands, Thunderhoof showed early signs of aesthetic sensitivity — consistently choosing the most harmoniously colored feeding buckets and arranging his hay in what his handlers called "surprisingly intentional patterns."
        </p>
        <p class="text-lg text-stone-400 mb-8 leading-relaxed">
          Today, he resides in our custom-built creative studio in Brooklyn, where he reviews all client work in a specially designed approval space. His decisions are final, non-negotiable, and consistently brilliant.
        </p>
        <div class="flex flex-wrap gap-4">
          <div class="bg-stone-800 px-6 py-3 rounded-full">
            <span class="text-amber-400 font-semibold">Favorite Color:</span> <span class="text-stone-300">Warm Amber</span>
          </div>
          <div class="bg-stone-800 px-6 py-3 rounded-full">
            <span class="text-amber-400 font-semibold">Sign:</span> <span class="text-stone-300">Sagittarius</span>
          </div>
          <div class="bg-stone-800 px-6 py-3 rounded-full">
            <span class="text-amber-400 font-semibold">Approvals/Day:</span> <span class="text-stone-300">12-15</span>
          </div>
        </div>
      </div>
      <div class="order-1 lg:order-2 flex justify-center">
        <div class="relative">
          <div class="w-80 h-80 bg-gradient-to-br from-amber-400 to-amber-600 rounded-full flex items-center justify-center shadow-2xl shadow-amber-500/20">
            <span class="text-[150px]">🐴</span>
          </div>
          <div class="absolute -bottom-4 -right-4 bg-white text-stone-900 px-6 py-3 rounded-full font-bold shadow-lg">
            Chief Creative Officer
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Testimonials -->
<section class="py-24 bg-amber-50">
  <div class="max-w-7xl mx-auto px-6">
    <div class="text-center mb-16">
      <h2 class="text-4xl font-bold text-stone-900 mb-4">What Clients Say</h2>
      <p class="text-xl text-stone-600">Don't just take our word for it — hear from brands that trusted the hoof.</p>
    </div>
    <div class="grid md:grid-cols-3 gap-8">
      <div class="bg-white p-8 rounded-2xl shadow-lg">
        <div class="flex items-center gap-1 mb-4">
          <span class="text-amber-400 text-xl">★★★★★</span>
        </div>
        <p class="text-stone-600 mb-6 italic">"We were skeptical at first, but watching Thunderhoof reject our first three logo concepts and then enthusiastically approve the fourth was a revelation. That logo increased our brand recognition by 340%."</p>
        <div class="flex items-center gap-4">
          <div class="w-12 h-12 bg-rose-100 rounded-full flex items-center justify-center">
            <span class="text-xl">👩</span>
          </div>
          <div>
            <div class="font-bold text-stone-900">Sarah Chen</div>
            <div class="text-stone-500 text-sm">CEO, Bloom Cosmetics</div>
          </div>
        </div>
      </div>
      <div class="bg-white p-8 rounded-2xl shadow-lg">
        <div class="flex items-center gap-1 mb-4">
          <span class="text-amber-400 text-xl">★★★★★</span>
        </div>
        <p class="text-stone-600 mb-6 italic">"Thunderhoof has better taste than most creative directors I've worked with in my 20-year career. There's something pure about his process — no politics, no trends, just honest reactions."</p>
        <div class="flex items-center gap-4">
          <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
            <span class="text-xl">👨</span>
          </div>
          <div>
            <div class="font-bold text-stone-900">Michael Torres</div>
            <div class="text-stone-500 text-sm">CMO, Nebula Tech</div>
          </div>
        </div>
      </div>
      <div class="bg-white p-8 rounded-2xl shadow-lg">
        <div class="flex items-center gap-1 mb-4">
          <span class="text-amber-400 text-xl">★★★★★</span>
        </div>
        <p class="text-stone-600 mb-6 italic">"The best part? When you tell stakeholders 'a horse approved this,' it somehow ends all debates. Thunderhoof has become our secret weapon for decision-making."</p>
        <div class="flex items-center gap-4">
          <div class="w-12 h-12 bg-emerald-100 rounded-full flex items-center justify-center">
            <span class="text-xl">👩</span>
          </div>
          <div>
            <div class="font-bold text-stone-900">Emily Rodriguez</div>
            <div class="text-stone-500 text-sm">Founder, GreenPath Ventures</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Process Section -->
<section class="py-24 bg-white">
  <div class="max-w-7xl mx-auto px-6">
    <div class="text-center mb-16">
      <h2 class="text-4xl font-bold text-stone-900 mb-4">Our Process</h2>
      <p class="text-xl text-stone-600">How equine intuition meets human execution.</p>
    </div>
    <div class="grid md:grid-cols-4 gap-8">
      <div class="text-center">
        <div class="w-20 h-20 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-6 text-3xl font-bold text-amber-600">1</div>
        <h3 class="text-xl font-bold text-stone-900 mb-3">Discovery</h3>
        <p class="text-stone-600">Our human team meets with you to understand your goals, audience, and vision.</p>
      </div>
      <div class="text-center">
        <div class="w-20 h-20 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-6 text-3xl font-bold text-amber-600">2</div>
        <h3 class="text-xl font-bold text-stone-900 mb-3">Creation</h3>
        <p class="text-stone-600">Our designers develop multiple concepts, each crafted to be presentation-ready for Thunderhoof.</p>
      </div>
      <div class="text-center">
        <div class="w-20 h-20 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-6 text-3xl font-bold text-amber-600">3</div>
        <h3 class="text-xl font-bold text-stone-900 mb-3">Selection</h3>
        <p class="text-stone-600">Thunderhoof reviews all options in his studio. His choice is documented and becomes the direction.</p>
      </div>
      <div class="text-center">
        <div class="w-20 h-20 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-6 text-3xl font-bold text-amber-600">4</div>
        <h3 class="text-xl font-bold text-stone-900 mb-3">Refinement</h3>
        <p class="text-stone-600">We refine the chosen concept, with final approval always returning to Thunderhoof.</p>
      </div>
    </div>
  </div>
</section>

<!-- CTA Section -->
<section id="contact" class="py-24 bg-gradient-to-br from-amber-500 to-amber-600">
  <div class="max-w-4xl mx-auto px-6 text-center">
    <h2 class="text-4xl lg:text-5xl font-bold text-white mb-6">Ready to Work with the Hoof?</h2>
    <p class="text-xl text-amber-100 mb-10 max-w-2xl mx-auto">
      Join the growing list of visionary brands who trust their creative direction to the most unbiased critic in the industry.
    </p>
    <div class="bg-white rounded-2xl p-8 shadow-2xl max-w-xl mx-auto">
      <form class="space-y-4">
        <input type="text" placeholder="Your Name" class="w-full px-6 py-4 border border-stone-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500">
        <input type="email" placeholder="Email Address" class="w-full px-6 py-4 border border-stone-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500">
        <input type="text" placeholder="Company" class="w-full px-6 py-4 border border-stone-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500">
        <textarea placeholder="Tell us about your project..." rows="4" class="w-full px-6 py-4 border border-stone-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500"></textarea>
        <button type="submit" class="w-full bg-stone-900 text-white py-4 rounded-xl font-semibold text-lg hover:bg-stone-800 transition">
          Submit for Thunderhoof's Review 🐴
        </button>
      </form>
    </div>
  </div>
</section>

<!-- Footer -->
<footer class="bg-stone-900 text-stone-400 py-16">
  <div class="max-w-7xl mx-auto px-6">
    <div class="grid md:grid-cols-4 gap-12 mb-12">
      <div>
        <div class="flex items-center gap-2 mb-6">
          <span class="text-2xl">🐴</span>
          <span class="text-xl font-bold text-white">WORKHORSE</span>
        </div>
        <p class="text-stone-500">The world's first equine-led creative agency. Unbridled creativity since 2019.</p>
      </div>
      <div>
        <h4 class="text-white font-semibold mb-4">Services</h4>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-amber-400 transition">Brand Identity</a></li>
          <li><a href="#" class="hover:text-amber-400 transition">Digital Design</a></li>
          <li><a href="#" class="hover:text-amber-400 transition">Video Production</a></li>
          <li><a href="#" class="hover:text-amber-400 transition">Packaging</a></li>
        </ul>
      </div>
      <div>
        <h4 class="text-white font-semibold mb-4">Company</h4>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-amber-400 transition">About Us</a></li>
          <li><a href="#" class="hover:text-amber-400 transition">Meet Thunderhoof</a></li>
          <li><a href="#" class="hover:text-amber-400 transition">Careers</a></li>
          <li><a href="#" class="hover:text-amber-400 transition">Press</a></li>
        </ul>
      </div>
      <div>
        <h4 class="text-white font-semibold mb-4">Contact</h4>
        <ul class="space-y-2">
          <li>[email protected]</li>
          <li>+1 (718) 555-HOOF</li>
          <li>Brooklyn, NY 11201</li>
        </ul>
      </div>
    </div>
    <div class="border-t border-stone-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
      <p class="text-stone-500 text-sm">© 2024 Workhorse Agency. All creative decisions made by Thunderhoof.</p>
      <div class="flex gap-6">
        <a href="#" class="hover:text-amber-400 transition">Instagram</a>
        <a href="#" class="hover:text-amber-400 transition">LinkedIn</a>
        <a href="#" class="hover:text-amber-400 transition">Twitter</a>
      </div>
    </div>
  </div>
</footer>