Interactive FAQ Accordion Section (Tailwind)

<section id="faq" class="max-w-7xl sm:px-6 sm:mt-20 mt-8 mr-auto mb-8 ml-auto pr-4 pl-4">
  <div
    class="relative overflow-hidden rounded-[40px] border border-white/20 bg-white shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)]">
    <div class="absolute inset-0 pointer-events-none">
      <div class="absolute inset-0 bg-gradient-to-b from-white/10 via-white/5 to-transparent"></div>
    </div>

    <div class="relative sm:p-8 pt-6 pr-6 pb-6 pl-6">
      <div class="grid grid-cols-1 md:grid-cols-12 gap-8 items-start">
        <!-- Intro -->
        <div class="md:col-span-5">
          <h2 class="text-[56px] sm:text-[80px] leading-none font-semibold text-gray-900 tracking-tighter font-geist">
            Questions.</h2>
          <p class="mt-3 text-sm sm:text-base text-gray-600 font-geist">
            Find answers to common questions about our services, processes, and how we can help transform your brand.
          </p>
          <a href="#contact"
            class="mt-5 inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium tracking-tight text-gray-700 bg-gray-100 hover:bg-gray-200 border border-white/20">
            <span class="font-geist">Get in touch</span>
            <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="message-circle" class="lucide lucide-message-circle w-4 h-4 stroke-1.5">
              <path
                d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719">
              </path>
            </svg>
          </a>
        </div>

        <!-- Accordion -->
        <div class="md:col-span-7">
          <div class="space-y-3">
            <!-- Item 1 (open) -->
            <div class="rounded-2xl border border-white/20 bg-white shadow-sm" data-accordion-item="" data-open="true">
              <button type="button" class="w-full flex items-center justify-between gap-4 p-5 text-left" aria-expanded="true" data-accordion="faq">
                <span class="text-base sm:text-lg font-semibold tracking-tight text-gray-900 font-geist">What's your design process like?</span>
                <span class="shrink-0">
                  <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="plus" data-icon="plus" class="lucide lucide-plus w-5 h-5 stroke-1.5 hidden"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
                  <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-lucideminus="" w-5="" h-5="" stroke-1.5"=""><path d="M5 12h14"></path></svg>
                </span>
              </button>
              <div class="px-5 pb-5 text-sm text-gray-600 font-geist" data-qa="a">
                We start with discovery to understand your goals and audience. Then we move through strategy, concept
                development, design iterations, and final delivery. You'll be involved at every key milestone with
                regular check-ins and feedback sessions.
              </div>
            </div>

            <!-- Item 2 -->
            <div class="rounded-2xl border border-white/20 bg-white shadow-sm" data-accordion-item="">
              <button type="button" class="w-full flex items-center justify-between gap-4 p-5 text-left" aria-expanded="false" data-accordion="faq">
                <span class="text-base sm:text-lg font-semibold tracking-tight text-gray-900 font-geist">Can you work with our existing brand guidelines?</span>
                <span class="shrink-0">
                  <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="plus" data-icon="plus" class="lucide lucide-plus w-5 h-5 stroke-1.5"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
                  <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="minus" data-icon="minus" class="lucide lucide-minus w-5 h-5 stroke-1.5 hidden"><path d="M5 12h14"></path></svg>
                </span>
              </button>
              <div class="px-5 pb-5 text-sm text-gray-600 font-geist hidden" data-qa="a">
                Absolutely. We can work within your current brand framework or help evolve it if needed. We'll audit
                your existing assets and either adapt them for new applications or recommend strategic updates to better
                serve your goals.
              </div>
            </div>

            <!-- Item 3 -->
            <div class="rounded-2xl border border-white/20 bg-white shadow-sm" data-accordion-item="">
              <button type="button" class="w-full flex items-center justify-between gap-4 p-5 text-left" aria-expanded="false" data-accordion="faq">
                <span class="text-base sm:text-lg font-semibold tracking-tight text-gray-900 font-geist">Do you offer revisions and feedback rounds?</span>
                <span class="shrink-0">
                  <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="plus" data-icon="plus" class="lucide lucide-plus w-5 h-5 stroke-1.5"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
                  <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="minus" data-icon="minus" class="lucide lucide-minus w-5 h-5 stroke-1.5 hidden"><path d="M5 12h14"></path></svg>
                </span>
              </button>
              <div class="px-5 pb-5 text-sm text-gray-600 font-geist hidden" data-qa="a">
                Yes, each phase includes structured feedback rounds. We typically allow 2–3 rounds of revisions per
                milestone to ensure the work meets your expectations. Major scope changes are discussed separately to
                maintain project timelines.
              </div>
            </div>

            <!-- Item 4 -->
            <div class="rounded-2xl border border-white/20 bg-white shadow-sm" data-accordion-item="">
              <button type="button" class="w-full flex items-center justify-between gap-4 p-5 text-left" aria-expanded="false" data-accordion="faq">
                <span class="text-base sm:text-lg font-semibold tracking-tight text-gray-900 font-geist">What industries do you specialize in?</span>
                <span class="shrink-0">
                  <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="plus" data-icon="plus" class="lucide lucide-plus w-5 h-5 stroke-1.5"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
                  <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="minus" data-icon="minus" class="lucide lucide-minus w-5 h-5 stroke-1.5 hidden"><path d="M5 12h14"></path></svg>
                </span>
              </button>
              <div class="px-5 pb-5 text-sm text-gray-600 font-geist hidden" data-qa="a">
                We work across technology, healthcare, finance, retail, and B2B services. Our approach is
                industry-agnostic but insight-driven—we dive deep into your market, competitors, and customer needs
                regardless of sector.
              </div>
            </div>

            <!-- Item 5 -->
            <div class="rounded-2xl border border-white/20 bg-white shadow-sm" data-accordion-item="">
              <button type="button" class="w-full flex items-center justify-between gap-4 p-5 text-left" aria-expanded="false" data-accordion="faq">
                <span class="text-base sm:text-lg font-semibold tracking-tight text-gray-900 font-geist">How do you handle project communication?</span>
                <span class="shrink-0">
                  <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="plus" data-icon="plus" class="lucide lucide-plus w-5 h-5 stroke-1.5"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
                  <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="minus" data-icon="minus" class="lucide lucide-minus w-5 h-5 stroke-1.5 hidden"><path d="M5 12h14"></path></svg>
                </span>
              </button>
              <div class="px-5 pb-5 text-sm text-gray-600 font-geist hidden" data-qa="a">
                You'll have a dedicated project lead as your main point of contact. We use shared workspaces for file
                sharing and feedback, plus scheduled check-ins via video calls. Updates are provided weekly or at each
                milestone.
              </div>
            </div>

            <!-- Item 6 -->
            <div class="rounded-2xl border border-white/20 bg-white shadow-sm" data-accordion-item="">
              <button type="button" class="w-full flex items-center justify-between gap-4 p-5 text-left" aria-expanded="false" data-accordion="faq">
                <span class="text-base sm:text-lg font-semibold tracking-tight text-gray-900 font-geist">What happens after project completion?</span>
                <span class="shrink-0">
                  <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="plus" data-icon="plus" class="lucide lucide-plus w-5 h-5 stroke-1.5"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
                  <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="minus" data-icon="minus" class="lucide lucide-minus w-5 h-5 stroke-1.5 hidden"><path d="M5 12h14"></path></svg>
                </span>
              </button>
              <div class="px-5 pb-5 text-sm text-gray-600 font-geist hidden" data-qa="a">
                We provide 30 days of complimentary support for any technical issues or minor adjustments. Beyond that,
                we offer ongoing partnerships for continuous updates, new campaigns, or additional design needs as your
                business grows.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      // Initialize open states
      document.querySelectorAll('#faq [data-accordion-item]').forEach(item => {
        const open = item.hasAttribute('data-open');
        const btn = item.querySelector('[data-accordion="faq"]');
        const a = item.querySelector('[data-qa="a"]');
        const plus = item.querySelector('[data-icon="plus"]');
        const minus = item.querySelector('[data-icon="minus"]');
        btn.setAttribute('aria-expanded', open ? 'true' : 'false');
        a.classList.toggle('hidden', !open);
        plus.classList.toggle('hidden', open);
        minus.classList.toggle('hidden', !open);
      });

      // Toggle behavior
      document.querySelectorAll('#faq [data-accordion="faq"]').forEach(btn => {
        btn.addEventListener('click', () => {
          const item = btn.closest('[data-accordion-item]');
          const content = item.querySelector('[data-qa="a"]');
          const plus = item.querySelector('[data-icon="plus"]');
          const minus = item.querySelector('[data-icon="minus"]');
          const expanded = btn.getAttribute('aria-expanded') === 'true';
          btn.setAttribute('aria-expanded', String(!expanded));
          content.classList.toggle('hidden');
          plus.classList.toggle('hidden');
          minus.classList.toggle('hidden');
        });
      });

      // Render icons (safe to call multiple times)
      if (window.lucide && typeof lucide.createIcons === 'function') {
        lucide.createIcons();
      }
    });
  </script>
</section>