Responsive Contact & Inquiry Form Section

<div id="contact" class="sm:p-6 md:p-8 bg-white border-neutral-200 border rounded-2xl mt-8 pt-5 pr-5 pb-5 pl-5">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">
          <div class="space-y-4">
            <div class="inline-flex items-center gap-2 ring-1 ring-emerald-200 text-xs text-emerald-800 bg-emerald-100 rounded-full pt-1.5 pr-3 pb-1.5 pl-3 font-sans">
              <span class="h-1.5 w-1.5 rounded-full bg-emerald-600 animate-pulse"></span>
              Now booking Q4 2024
            </div>
            <h4 class="text-xl sm:text-2xl text-neutral-900 font-bricolage font-medium tracking-tighter" style="">Ready to ship something great?</h4>
            <ul class="text-sm text-neutral-700 space-y-3">
              <li class="flex items-start gap-2">
                <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="check" class="lucide lucide-check w-4 h-4 text-emerald-600 mt-0.5 flex-shrink-0" style="stroke-width: 1.5"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                <span class="font-sans">Senior-only team on every engagement</span>
              </li>
              <li class="flex items-start gap-2">
                <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="check" class="lucide lucide-check w-4 h-4 text-emerald-600 mt-0.5 flex-shrink-0" style="stroke-width: 1.5"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                <span class="font-sans">Weekly demos and shared roadmaps</span>
              </li>
              <li class="flex items-start gap-2">
                <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="check" class="lucide lucide-check w-4 h-4 text-emerald-600 mt-0.5 flex-shrink-0" style="stroke-width: 1.5"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                <span class="font-sans">Clear pricing, flexible scopes</span>
              </li>
            </ul>
            <div class="flex flex-col sm:flex-row items-start sm:items-center gap-3 pt-2 text-sm">
              <a href="mailto:hello@relay.studio" class="inline-flex items-center gap-2 text-neutral-700 hover:text-emerald-600 transition font-sans">
                <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="mail" class="lucide lucide-mail w-4 h-4" style="stroke-width: 1.5"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" class=""></path><rect x="2" y="4" width="20" height="16" rx="2" class=""></rect></svg>
                hello@relay.studio
              </a>
              <span class="text-neutral-400 hidden sm:inline font-sans">•</span>
              <a href="tel:+1-555-RELAY-01" class="inline-flex items-center gap-2 text-neutral-700 hover:text-emerald-600 transition font-sans">
                <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="phone" class="lucide lucide-phone w-4 h-4" style="stroke-width: 1.5"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384" class=""></path></svg>
                Schedule a call
              </a>
            </div>
          </div>

          <form class="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div class="sm:col-span-1">
              <label class="block text-xs font-medium text-neutral-700 mb-2 font-sans">Name</label>
              <input type="text" required="" placeholder="Your name" class="w-full placeholder-neutral-500 outline-none focus:ring-2 focus:ring-emerald-400/60 focus:border-emerald-300 transition text-sm text-neutral-900 bg-white border-neutral-200 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
            </div>
            <div class="sm:col-span-1">
              <label class="block text-xs font-medium text-neutral-700 mb-2 font-sans">Email</label>
              <input type="email" required="" placeholder="you@company.com" class="w-full placeholder-neutral-500 outline-none focus:ring-2 focus:ring-emerald-400/60 focus:border-emerald-300 transition text-sm text-neutral-900 bg-white border-neutral-200 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
            </div>
            <div class="sm:col-span-1">
              <label class="block text-xs font-medium text-neutral-700 mb-2 font-sans">Company</label>
              <input type="text" placeholder="Company name" class="w-full placeholder-neutral-500 outline-none focus:ring-2 focus:ring-emerald-400/60 focus:border-emerald-300 transition text-sm text-neutral-900 bg-white border-neutral-200 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
            </div>
            <div class="sm:col-span-1">
              <label class="block text-xs font-medium text-neutral-700 mb-2 font-sans">Budget</label>
              <select class="w-full appearance-none outline-none focus:ring-2 focus:ring-emerald-400/60 focus:border-emerald-300 transition text-sm text-neutral-900 bg-white border-neutral-200 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
                <option class="bg-white font-sans" value="25-50k">$25k–$50k</option>
                <option class="bg-white font-sans" value="50-100k">$50k–$100k</option>
                <option class="bg-white font-sans" value="100-250k">$100k–$250k</option>
                <option class="bg-white font-sans" value="custom">Custom</option>
              </select>
            </div>
            <div class="sm:col-span-1">
              <label class="block text-xs font-medium text-neutral-700 mb-2 font-sans">Timeline</label>
              <select class="w-full appearance-none outline-none focus:ring-2 focus:ring-emerald-400/60 focus:border-emerald-300 transition text-sm text-neutral-900 bg-white border-neutral-200 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
                <option class="bg-white font-sans" value="asap">ASAP</option>
                <option class="bg-white font-sans" value="1-2m">1–2 months</option>
                <option class="bg-white font-sans" value="3m+">3+ months</option>
              </select>
            </div>
            <div class="sm:col-span-1">
              <label class="block text-xs font-medium text-neutral-700 mb-2 font-sans">Services</label>
              <select class="w-full appearance-none outline-none focus:ring-2 focus:ring-emerald-400/60 focus:border-emerald-300 transition text-sm text-neutral-900 bg-white border-neutral-200 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
                <option class="bg-white font-sans">Product Design</option>
                <option class="bg-white font-sans">Brand &amp; Identity</option>
                <option class="bg-white font-sans">Web Design &amp; Build</option>
                <option class="bg-white font-sans">Design System</option>
                <option class="bg-white font-sans">Motion &amp; Content</option>
              </select>
            </div>
            <div class="sm:col-span-2">
              <label class="block text-xs font-medium text-neutral-700 mb-2 font-sans">Project details</label>
              <textarea rows="3" placeholder="What are you building? Goals, scope, links…" class="w-full placeholder-neutral-500 outline-none focus:ring-2 focus:ring-emerald-400/60 focus:border-emerald-300 transition text-sm text-neutral-900 bg-white border-neutral-200 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3"></textarea>
            </div>
            <div class="sm:col-span-2 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
              <p class="text-xs text-neutral-600 font-sans">We'll get back to you within 24 hours with next steps.</p>
              <button type="submit" class="inline-flex gap-2 ring-1 ring-emerald-300 hover:bg-emerald-300 transition text-sm font-medium text-white bg-emerald-500 rounded-xl pt-2.5 pr-4 pb-2.5 pl-4 shadow items-center font-sans">
                <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="send" class="lucide lucide-send w-4 h-4" style="stroke-width: 1.5"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" class=""></path><path d="m21.854 2.147-10.94 10.939" class=""></path></svg>
                Send inquiry
              </button>
            </div>
          </form>
        </div>
      </div>