Responsive Services Grid Section

<section class="max-w-7xl sm:px-6 sm:py-16 text-zinc-900 mr-auto ml-auto pt-12 pr-4 pb-12 pl-4">
  <div class="flex items-end justify-between mb-6 sm:mb-10">
    <div class="">
      <p class="text-[11px] sm:text-xs tracking-widest text-zinc-500 font-geist uppercase">(02) Services</p>
      <h3 class="mt-2 text-3xl sm:text-4xl tracking-tight font-light font-geist">Capabilities that move the needle.</h3>
    </div>
    <a href="#"
      class="hidden sm:inline-flex items-center gap-2 rounded-full bg-white ring-1 ring-zinc-200 px-4 py-2 text-sm text-zinc-700 hover:shadow font-geist">
      View All
      <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="arrow-right"
        class="lucide lucide-arrow-right h-4 w-4">
        <path d="M5 12h14"></path>
        <path d="m12 5 7 7-7 7"></path>
      </svg>
    </a>
  </div>

  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
    <a href="#"
      class="group rounded-2xl bg-white ring-1 ring-zinc-200 p-6 shadow-sm hover:-translate-y-0.5 hover:shadow transition">
      <div class="flex items-center gap-3">
        <span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-zinc-900 text-white">
          <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="palette" class="lucide lucide-palette h-4 w-4"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle></svg>
        </span>
        <h4 class="text-lg tracking-tight font-medium font-geist">Brand &amp; Identity</h4>
      </div>
      <p class="mt-3 text-sm text-zinc-600 font-geist">Strategy-led systems, logos, and visual languages that scale.</p>
      <span class="mt-5 inline-flex items-center gap-2 text-sm text-zinc-700 font-geist">
        Explore
        <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="arrow-right" class="lucide lucide-arrow-right h-4 w-4 transition-transform group-hover:translate-x-0.5"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
      </span>
    </a>

    <a href="#"
      class="group rounded-2xl bg-white ring-1 ring-zinc-200 p-6 shadow-sm hover:-translate-y-0.5 hover:shadow transition">
      <div class="flex items-center gap-3">
        <span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-zinc-900 text-white">
          <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="layout" class="lucide lucide-layout h-4 w-4"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M3 9h18"></path><path d="M9 21V9"></path></svg>
        </span>
        <h4 class="text-lg tracking-tight font-medium font-geist">Product Design</h4>
      </div>
      <p class="mt-3 text-sm text-zinc-600 font-geist">Web and mobile experiences built for clarity, speed, and delight.
      </p>
      <span class="mt-5 inline-flex items-center gap-2 text-sm text-zinc-700 font-geist">
        Explore
        <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="arrow-right" class="lucide lucide-arrow-right h-4 w-4 transition-transform group-hover:translate-x-0.5"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
      </span>
    </a>

    <a href="#"
      class="group rounded-2xl bg-white ring-1 ring-zinc-200 p-6 shadow-sm hover:-translate-y-0.5 hover:shadow transition">
      <div class="flex items-center gap-3">
        <span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-zinc-900 text-white">
          <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="sparkles" class="lucide lucide-sparkles h-4 w-4"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg>
        </span>
        <h4 class="text-lg tracking-tight font-medium font-geist">Motion &amp; Launch</h4>
      </div>
      <p class="mt-3 text-sm text-zinc-600 font-geist">Narratives, micro‑interactions, and launch assets that convert.
      </p>
      <span class="mt-5 inline-flex items-center gap-2 text-sm text-zinc-700 font-geist">
        Explore
        <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="arrow-right" class="lucide lucide-arrow-right h-4 w-4 transition-transform group-hover:translate-x-0.5"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
      </span>
    </a>
  </div>
</section>