Responsive Process Overview & Timeline Section

<section
  class="sm:px-6 lg:px-8 sm:mt-24 lg:mt-32 sm:mb-24 lg:mb-32 sm:pt-12 lg:pt-16 sm:pr-6 sm:pb-12 lg:pb-16 sm:pl-6 mt-16 mr-auto mb-16 ml-auto pt-8 pr-4 pb-8 pl-4">
  <div
    class="relative overflow-hidden sm:p-8 lg:p-12 bg-neutral-900 max-w-7xl ring-white/10 ring-1 rounded-2xl sm:rounded-3xl mx-auto pt-6 sm:pt-8 pr-4 sm:pr-8 pb-6 sm:pb-8 pl-4 sm:pl-8">
    <div class="flex flex-col gap-6 sm:gap-8 mb-8 sm:mb-12">
      <div class="text-center sm:text-left">
        <p
          class="text-[10px] sm:text-[11px] uppercase tracking-[0.16em] sm:tracking-[0.18em] text-neutral-400 font-geist">
          Method</p>
        <h2
          class="mt-2 sm:mt-3 text-2xl sm:text-4xl lg:text-5xl text-white tracking-tight sm:tracking-tighter font-geist font-medium">A practical path to shipping</h2>
      </div>
      <p
        class="text-sm sm:text-base lg:text-lg text-neutral-300 max-w-full sm:max-w-[42ch] font-geist text-center sm:text-left mx-auto sm:mx-0">
        Small surface area, rapid feedback, and clear tradeoffs—so we always know what's next and why.
      </p>
    </div>

    <!-- Process Overview -->
    <div class="mb-12 sm:mb-16">
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6 lg:gap-8 mb-8 sm:mb-12">
        <div class="text-center">
          <div class="relative p-4 sm:p-6 rounded-xl sm:rounded-2xl bg-white/5 ring-1 ring-white/10 backdrop-blur-sm">
            <div class="text-2xl sm:text-3xl font-medium text-emerald-400 mb-2 font-geist">01</div>
            <h3 class="text-base sm:text-lg font-medium text-white mb-2 font-geist">Strategy</h3>
            <p class="text-xs sm:text-sm text-neutral-400 font-geist">Define goals, scope, and success metrics</p>
          </div>
        </div>
        <div class="text-center">
          <div class="relative p-4 sm:p-6 rounded-xl sm:rounded-2xl bg-white/5 ring-1 ring-white/10 backdrop-blur-sm">
            <div class="text-2xl sm:text-3xl font-medium text-indigo-400 mb-2 font-geist">02</div>
            <h3 class="text-base sm:text-lg font-medium text-white mb-2 font-geist">Execution</h3>
            <p class="text-xs sm:text-sm text-neutral-400 font-geist">Build with precision and continuous feedback</p>
          </div>
        </div>
        <div class="text-center">
          <div class="relative p-4 sm:p-6 rounded-xl sm:rounded-2xl bg-white/5 ring-1 ring-white/10 backdrop-blur-sm">
            <div class="text-2xl sm:text-3xl font-medium text-emerald-400 mb-2 font-geist">03</div>
            <h3 class="text-base sm:text-lg font-medium text-white mb-2 font-geist">Delivery</h3>
            <p class="text-xs sm:text-sm text-neutral-400 font-geist">Launch, monitor, and iterate for success</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Timeline -->
    <div class="mt-6 sm:mt-8">
      <h3 class="text-lg sm:text-xl font-medium text-white font-geist mb-8 sm:mb-12 lg:mb-16 text-center sm:text-left">
        Development Timeline</h3>

      <!-- Mobile Timeline (vertical) -->
      <div class="sm:hidden space-y-6">
        <div class="flex items-start gap-4">
          <div class="relative">
            <div class="w-12 h-12 rounded-full overflow-hidden ring-2 ring-emerald-500/50 bg-neutral-800 flex-shrink-0">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6739d5c9-2ec9-43c0-94be-ec961704a2e0_800w.jpg" alt="Discovery phase" class="w-full h-full object-cover">
            </div>
          </div>
          <div class="flex-1">
            <div class="flex items-center gap-2 text-[10px] text-neutral-300 mb-2">
              <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
              DISCOVERY
            </div>
            <p class="text-sm text-neutral-400 mb-2 font-geist">Research &amp; planning phase with stakeholder alignment
            </p>
            <div class="text-xs text-neutral-500 font-geist">1-2 weeks</div>
          </div>
        </div>

        <div class="flex items-start gap-4">
          <div class="relative">
            <div class="w-12 h-12 rounded-full overflow-hidden ring-2 ring-emerald-500/50 bg-neutral-800 flex-shrink-0">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/3393b787-4136-4ac8-915d-4b7a5185821d_800w.jpg" alt="Architecture phase" class="w-full h-full object-cover">
            </div>
          </div>
          <div class="flex-1">
            <div class="flex items-center gap-2 text-[10px] text-neutral-300 mb-2">
              <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
              ARCHITECTURE
            </div>
            <p class="text-sm text-neutral-400 mb-2 font-geist">System design &amp; technical foundation</p>
            <div class="text-xs text-neutral-500 font-geist">1-2 weeks</div>
          </div>
        </div>

        <div class="flex items-start gap-4">
          <div class="relative">
            <div class="w-12 h-12 rounded-full overflow-hidden ring-2 ring-indigo-400/50 bg-neutral-800 flex-shrink-0">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/31acf2d9-1bfb-4a1c-8b2c-708955038c1c_800w.jpg" alt="Build phase" class="w-full h-full object-cover">
            </div>
          </div>
          <div class="flex-1">
            <div class="flex items-center gap-2 text-[10px] text-neutral-300 mb-2">
              <span class="h-1.5 w-1.5 rounded-full bg-indigo-400"></span>
              BUILD
            </div>
            <p class="text-sm text-neutral-400 mb-2 font-geist">Active development with iterative feedback</p>
            <div class="text-xs text-neutral-500 font-geist">4-8 weeks</div>
          </div>
        </div>

        <div class="flex items-start gap-4">
          <div class="relative">
            <div class="w-12 h-12 rounded-full overflow-hidden ring-2 ring-neutral-600/50 bg-neutral-700 flex-shrink-0">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fb6b509f-d7d6-4c5a-ab4e-9cc3661e184b_800w.jpg" alt="QA phase" class="w-full h-full object-cover opacity-60">
            </div>
          </div>
          <div class="flex-1">
            <div class="flex items-center gap-2 text-[10px] text-neutral-300 mb-2">
              <span class="h-1.5 w-1.5 rounded-full bg-neutral-600"></span>
              QA
            </div>
            <p class="text-sm text-neutral-400 mb-2 font-geist">Testing &amp; quality assurance</p>
            <div class="text-xs text-neutral-500 font-geist">1-2 weeks</div>
          </div>
        </div>

        <div class="flex items-start gap-4">
          <div class="relative">
            <div class="w-12 h-12 rounded-full overflow-hidden ring-2 ring-neutral-600/50 bg-neutral-700 flex-shrink-0">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f60cb04d-11d0-4cc7-941b-2d6c15a14f36_800w.jpg" alt="Launch phase" class="w-full h-full object-cover opacity-60">
            </div>
          </div>
          <div class="flex-1">
            <div class="flex items-center gap-2 text-[10px] text-neutral-300 mb-2">
              <span class="h-1.5 w-1.5 rounded-full bg-neutral-600"></span>
              LAUNCH
            </div>
            <p class="text-sm text-neutral-400 mb-2 font-geist">Deployment &amp; go-live support</p>
            <div class="text-xs text-neutral-500 font-geist">1 week</div>
          </div>
        </div>
      </div>

      <!-- Desktop Timeline (horizontal) -->
      <div class="hidden sm:block relative">
        <div class="absolute top-6 sm:top-8 left-0 right-0 h-px bg-gradient-to-r from-white/0 via-white/15 to-white/0">
        </div>

        <div class="grid grid-cols-5 gap-3 sm:gap-4 lg:gap-6">
          <div class="flex flex-col gap-3 sm:gap-4 font-geist text-center items-center">
            <div class="relative">
              <div
                class="w-12 h-12 sm:w-16 sm:h-16 rounded-full overflow-hidden ring-2 sm:ring-3 ring-emerald-500/50 bg-neutral-800">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6739d5c9-2ec9-43c0-94be-ec961704a2e0_800w.jpg" alt="Discovery phase" class="w-full h-full object-cover">
              </div>
            </div>
            <div class="flex items-center gap-2 text-[10px] sm:text-[11px] text-neutral-300">
              <span class="h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-emerald-500"></span>
              DISCOVERY
            </div>
            <p class="leading-relaxed text-xs sm:text-sm text-neutral-400 px-1 sm:px-2 font-geist">Research &amp;
              planning phase with stakeholder alignment</p>
            <div class="text-xs text-neutral-500 font-geist">1-2 weeks</div>
          </div>

          <div class="flex flex-col items-center gap-3 sm:gap-4 font-geist text-center">
            <div class="relative">
              <div
                class="w-12 h-12 sm:w-16 sm:h-16 rounded-full overflow-hidden ring-2 sm:ring-3 ring-emerald-500/50 bg-neutral-800">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/3393b787-4136-4ac8-915d-4b7a5185821d_800w.jpg" alt="Architecture phase" class="w-full h-full object-cover">
              </div>
            </div>
            <div class="flex items-center gap-2 text-[10px] sm:text-[11px] text-neutral-300">
              <span class="h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-emerald-500"></span>
              ARCHITECTURE
            </div>
            <p class="leading-relaxed text-xs sm:text-sm text-neutral-400 px-1 sm:px-2 font-geist">System design &amp;
              technical foundation</p>
            <div class="text-xs text-neutral-500 font-geist">1-2 weeks</div>
          </div>

          <div class="flex flex-col items-center gap-3 sm:gap-4 font-geist text-center">
            <div class="relative">
              <div
                class="w-12 h-12 sm:w-16 sm:h-16 rounded-full overflow-hidden ring-2 sm:ring-3 ring-indigo-400/50 bg-neutral-800">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/31acf2d9-1bfb-4a1c-8b2c-708955038c1c_800w.jpg" alt="Build phase" class="w-full h-full object-cover">
              </div>
            </div>
            <div class="flex items-center gap-2 text-[10px] sm:text-[11px] text-neutral-300">
              <span class="h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-indigo-400"></span>
              BUILD
            </div>
            <p class="leading-relaxed text-xs sm:text-sm text-neutral-400 px-1 sm:px-2 font-geist">Active development
              with iterative feedback</p>
            <div class="text-xs text-neutral-500 font-geist">4-8 weeks</div>
          </div>

          <div class="flex flex-col items-center gap-3 sm:gap-4 font-geist text-center">
            <div class="relative">
              <div
                class="w-12 h-12 sm:w-16 sm:h-16 rounded-full overflow-hidden ring-2 sm:ring-3 ring-neutral-600/50 bg-neutral-700">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fb6b509f-d7d6-4c5a-ab4e-9cc3661e184b_800w.jpg" alt="QA phase" class="w-full h-full object-cover opacity-60">
              </div>
            </div>
            <div class="flex items-center gap-2 text-[10px] sm:text-[11px] text-neutral-300">
              <span class="h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-neutral-600"></span>
              QA
            </div>
            <p class="leading-relaxed text-xs sm:text-sm text-neutral-400 px-1 sm:px-2 font-geist">Testing &amp; quality
              assurance</p>
            <div class="text-xs text-neutral-500 font-geist">1-2 weeks</div>
          </div>

          <div class="flex flex-col items-center gap-3 sm:gap-4 font-geist text-center">
            <div class="relative">
              <div
                class="w-12 h-12 sm:w-16 sm:h-16 rounded-full overflow-hidden ring-2 sm:ring-3 ring-neutral-600/50 bg-neutral-700">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f60cb04d-11d0-4cc7-941b-2d6c15a14f36_800w.jpg" alt="Launch phase" class="w-full h-full object-cover opacity-60">
              </div>
            </div>
            <div class="flex items-center gap-2 text-[10px] sm:text-[11px] text-neutral-300">
              <span class="h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-neutral-600"></span>
              LAUNCH
            </div>
            <p class="leading-relaxed text-xs sm:text-sm text-neutral-400 px-1 sm:px-2 font-geist">Deployment &amp;
              go-live support</p>
            <div class="text-xs text-neutral-500 font-geist">1 week</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Success Metrics -->
    <div class="mt-12 sm:mt-16 lg:mt-20 pt-6 sm:pt-8 border-t border-white/10">
      <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6 lg:gap-8">
        <div class="text-center">
          <div class="text-xl sm:text-2xl font-medium text-emerald-400 mb-1 font-geist">40%</div>
          <div class="text-xs text-neutral-400 font-geist">Faster delivery</div>
        </div>
        <div class="text-center">
          <div class="text-xl sm:text-2xl font-medium text-indigo-400 mb-1 font-geist">95%</div>
          <div class="text-xs text-neutral-400 font-geist">Performance score</div>
        </div>
        <div class="text-center">
          <div class="text-xl sm:text-2xl font-medium text-emerald-400 mb-1 font-geist">60%</div>
          <div class="text-xs text-neutral-400 font-geist">Reduced bugs</div>
        </div>
        <div class="text-center">
          <div class="text-xl sm:text-2xl font-medium text-indigo-400 mb-1 font-geist">24h</div>
          <div class="text-xs text-neutral-400 font-geist">Response time</div>
        </div>
      </div>
    </div>
  </div>
</section>