Responsive Services Section with CTA (Tailwind)

<section id="services" class="max-w-7xl sm:px-6 sm:mt-20 mt-14 px-4">
  <div class="ring-1 ring-white/10 overflow-hidden bg-white/5 rounded-2xl">
    <div class="flex items-end justify-between p-6 border-b border-white/10">
      <h2 class="text-2xl sm:text-3xl tracking-tight font-semibold text-white">Services</h2>
      <div class="hidden sm:flex items-center gap-2">
        <a href="#"
          class="inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium tracking-tight text-white bg-white/10 hover:bg-white/20 ring-1 ring-white/10">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="download"
            class="lucide lucide-download w-3.5 h-3.5">
            <path d="M12 15V3" class=""></path>
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
            <path d="m7 10 5 5 5-5" class=""></path>
          </svg>
          <span>Services Deck</span>
        </a>
      </div>
    </div>

    <!-- Row 1 -->
    <div class="p-6 sm:p-8 border-b border-white/10">
      <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-start">
        <div class="md:col-span-1">
          <div class="text-3xl sm:text-4xl font-medium tracking-tight text-white/70 tabular-nums">1</div>
        </div>
        <div class="md:col-span-8">
          <ul class="space-y-2">
            <li class="flex items-start gap-2 text-sm text-neutral-300">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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-3.5 h-3.5 mt-0.5 text-emerald-400">
                <path d="M20 6 9 17l-5-5" class=""></path>
              </svg>
              <span>Logo Design</span>
            </li>
            <li class="flex items-start gap-2 text-sm text-neutral-300">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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-3.5 h-3.5 mt-0.5 text-emerald-400">
                <path d="M20 6 9 17l-5-5" class=""></path>
              </svg>
              <span>Typography &amp; Color Systems</span>
            </li>
            <li class="flex items-start gap-2 text-sm text-neutral-300">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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-3.5 h-3.5 mt-0.5 text-emerald-400">
                <path d="M20 6 9 17l-5-5" class=""></path>
              </svg>
              <span>Brand Guidelines &amp; Visual Systems</span>
            </li>
          </ul>

          <div class="mt-4 flex items-center gap-3">
            <div class="aspect-[4/3] w-24 sm:w-28 rounded-md overflow-hidden ring-1 ring-white/10">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b870108f-3551-40b3-bb97-ae4fc783d1df_320w.jpg" alt="Brand stationery set with bold colors" class="w-full h-full object-cover">
            </div>
            <div class="aspect-[4/3] w-24 sm:w-28 rounded-md overflow-hidden ring-1 ring-white/10">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/4d5175fe-2aa3-4ef3-8a6f-44a752f57930_320w.jpg" alt="Business cards and patterns" class="w-full h-full object-cover">
            </div>
            <div class="aspect-[4/3] w-24 sm:w-28 rounded-md overflow-hidden ring-1 ring-white/10">
              <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/2d210766-5c9f-4df0-873c-edb4557202b7_320w.jpg" alt="Stationery mockups on yellow background" class="w-full h-full object-cover">
            </div>
            <div class="aspect-[4/3] w-24 sm:w-28 rounded-md overflow-hidden ring-1 ring-white/10">
              <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/781b233e-9c54-40fc-8c11-186d4ce76914_320w.jpg" alt="Colorful brand collateral" class="w-full h-full object-cover">
            </div>
          </div>
        </div>
        <div class="md:col-span-3 md:text-right">
          <h3 class="text-lg sm:text-xl tracking-tight font-semibold text-white">Brand Identity</h3>
          <p class="text-xs text-neutral-400 mt-1">Logos, visual systems, guidelines</p>
        </div>
      </div>
    </div>

    <!-- Row 2 -->
    <div class="p-6 sm:p-8 border-b border-white/10">
      <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-start">
        <div class="md:col-span-1">
          <div class="text-3xl sm:text-4xl font-medium tracking-tight text-white/70 tabular-nums">2</div>
        </div>
        <div class="md:col-span-8">
          <ul class="space-y-2">
            <li class="flex items-start gap-2 text-sm text-neutral-300">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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-3.5 h-3.5 mt-0.5 text-emerald-400">
                <path d="M20 6 9 17l-5-5" class=""></path>
              </svg>
              <span>Brand Positioning</span>
            </li>
            <li class="flex items-start gap-2 text-sm text-neutral-300">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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-3.5 h-3.5 mt-0.5 text-emerald-400">
                <path d="M20 6 9 17l-5-5" class=""></path>
              </svg>
              <span>Messaging &amp; Tone of Voice</span>
            </li>
            <li class="flex items-start gap-2 text-sm text-neutral-300">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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-3.5 h-3.5 mt-0.5 text-emerald-400">
                <path d="M20 6 9 17l-5-5" class=""></path>
              </svg>
              <span>Design Consultation &amp; Audit</span>
            </li>
          </ul>

          <div class="mt-4 flex items-center gap-3">
            <div class="aspect-[16/10] w-28 sm:w-32 rounded-md overflow-hidden ring-1 ring-white/10">
              <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/7c7c0abe-b3bf-4f26-92a0-126405775d17_320w.jpg" alt="Workshop desk" class="w-full h-full object-cover grayscale">
            </div>
            <div class="aspect-[16/10] w-28 sm:w-32 rounded-md overflow-hidden ring-1 ring-white/10">
              <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/1c79362c-952e-4a16-b043-e48fb1f55728_320w.jpg" alt="Strategy notes and artifacts" class="w-full h-full object-cover grayscale">
            </div>
          </div>
        </div>
        <div class="md:col-span-3 md:text-right">
          <h3 class="text-lg sm:text-xl tracking-tight font-semibold text-white">Creative Strategy</h3>
          <p class="text-xs text-neutral-400 mt-1">Positioning, messaging, audits</p>
        </div>
      </div>
    </div>

    <!-- Row 3 -->
    <div class="p-6 sm:p-8">
      <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-start">
        <div class="md:col-span-1">
          <div class="text-3xl sm:text-4xl font-medium tracking-tight text-white/70 tabular-nums">3</div>
        </div>
        <div class="md:col-span-8">
          <ul class="space-y-2">
            <li class="flex items-start gap-2 text-sm text-neutral-300">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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-3.5 h-3.5 mt-0.5 text-emerald-400">
                <path d="M20 6 9 17l-5-5" class=""></path>
              </svg>
              <span class="">Responsive Web Design</span>
            </li>
            <li class="flex items-start gap-2 text-sm text-neutral-300">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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-3.5 h-3.5 mt-0.5 text-emerald-400">
                <path d="M20 6 9 17l-5-5" class=""></path>
              </svg>
              <span>Design Systems &amp; UI Kits</span>
            </li>
            <li class="flex items-start gap-2 text-sm text-neutral-300">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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-3.5 h-3.5 mt-0.5 text-emerald-400">
                <path d="M20 6 9 17l-5-5" class=""></path>
              </svg>
              <span>High‑fidelity Prototypes</span>
            </li>
            <li class="flex items-start gap-2 text-sm text-neutral-300">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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-3.5 h-3.5 mt-0.5 text-emerald-400">
                <path d="M20 6 9 17l-5-5" class=""></path>
              </svg>
              <span>SEO &amp; Performance Pass</span>
            </li>
          </ul>

          <div class="mt-4 flex items-center gap-3">
            <div class="aspect-[16/10] w-32 sm:w-40 rounded-md overflow-hidden ring-1 ring-white/10">
              <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/237ae1f5-edc0-48a4-bb60-1eb41e314e05_320w.jpg" alt="Designing interface on laptop" class="w-full h-full object-cover">
            </div>
            <div class="aspect-[16/10] w-32 sm:w-40 rounded-md overflow-hidden ring-1 ring-white/10">
              <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/79fd2860-1afb-406f-b9d8-56f13319c7c7_320w.jpg" alt="Team collaborating over wireframes" class="w-full h-full object-cover">
            </div>
          </div>
        </div>
        <div class="md:col-span-3 md:text-right">
          <h3 class="text-lg sm:text-xl tracking-tight font-semibold text-white">Web Design</h3>
          <p class="text-xs text-neutral-400 mt-1">Interfaces, systems, prototypes</p>
        </div>
      </div>
    </div>

    <!-- CTA -->
    <div
      class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 p-6 sm:p-8 border-t border-white/10">
      <p class="text-sm text-neutral-300">Need something tailored? Get a scoped proposal in 24 hours.</p>
      <div class="flex items-center gap-3">
        <a href="#contact"
          class="inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium tracking-tight text-white bg-emerald-500/90 hover:bg-emerald-500">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="calendar"
            class="lucide lucide-calendar w-4 h-4">
            <path d="M8 2v4" class=""></path>
            <path d="M16 2v4" class=""></path>
            <rect width="18" height="18" x="3" y="4" rx="2" class=""></rect>
            <path d="M3 10h18" class=""></path>
          </svg>
          <span>Book Intro Call</span>
        </a>
        <a href="#"
          class="inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium tracking-tight text-white bg-white/10 hover:bg-white/20 ring-1 ring-white/10">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            data-lucide="file-text" class="lucide lucide-file-text w-4 h-4">
            <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" class=""></path>
            <path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path>
            <path d="M10 9H8" class=""></path>
            <path d="M16 13H8" class=""></path>
            <path d="M16 17H8" class=""></path>
          </svg>
          <span class="">Request Estimate</span>
        </a>
      </div>
    </div>
  </div>
</section>