Gov Hero

<!-- Section 1: Hero (Pillar Page Header) -->
<section class="overflow-hidden lg:pb-10 lg:pt-10 pt-8 pb-12 relative bg-sky-500" style="">
  <div class="z-10 max-w-7xl mr-auto ml-auto pr-6 pl-6 relative">
    <div class="flex flex-col lg:flex-row items-center gap-12 lg:gap-20">
      <div class="flex-1 lg:text-left text-center max-w-2xl">
        <div
          class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 border border-white/20 text-xs text-white mb-8 font-sans">
          <span class="w-1.5 h-1.5 rounded-full bg-white"></span>
          GSA Compliant Services
        </div>

        <h1
          class="sm:text-5xl lg:text-6xl leading-[1.05] text-4xl tracking-tight mb-6 font-quicksand font-semibold text-white"
          style="">
          Government Moving Services &amp; Logistics in Utah
        </h1>

        <p class="leading-relaxed lg:mx-0 text-lg max-w-lg mx-auto mb-10 font-sans text-sky-50" style="">
          Specialized relocation solutions for federal, state, and local
          agencies. We provide secure chain-of-custody, asset management,
          and NAICS-compliant labor.
        </p>

        <div class="flex flex-wrap lg:justify-center pt-4 pb-4 gap-x-3 gap-y-3 justify-center">
          <div
            class="inline-flex items-center gap-2 px-3 py-1.5 border rounded-lg text-xs text-white font-sans bg-white/10 border-white/20"
            style="">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="text-emerald-300">
              <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
              <path d="m9 12 2 2 4-4"></path>
            </svg>
            SAM.gov Registered
          </div>
          <div
            class="inline-flex gap-2 text-xs text-white bg-white/10 border-white/20 border rounded-lg pt-1.5 pr-3 pb-1.5 pl-3 gap-x-2 gap-y-2 items-center">
            CAGE: 9LUL4</div>
          <div
            class="inline-flex text-xs text-white bg-white/10 border-white/20 border rounded-lg pt-1.5 pr-3 pb-1.5 pl-3 gap-x-2 gap-y-2 items-center">
            UEI: WDDVSDDHAU89</div>
        </div>

        <div
          class="flex flex-wrap lg:justify-center text-xs font-medium mt-3 mb-10 gap-x-8 gap-y-3 justify-center text-sky-100"
          style="">
          <div class="flex items-center gap-2 font-sans" style="">
            <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"
              class="w-[16px] h-[16px] text-sky-200" data-icon-replaced="true" style="width: 16px; height: 16px;">
              <path
                d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
                class=""></path>
              <path d="m9 12 2 2 4-4" class=""></path>
            </svg>
            Fully Insured &amp; Bonded
          </div>
          <div class="flex gap-2 gap-x-2 gap-y-2 items-center font-sans" style="">
            <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" class="">
              <path
                d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
                class=""></path>
              <circle cx="12" cy="10" r="3" class=""></circle>
            </svg>
            Utah &amp; Nationwide
          </div>
        </div>

        <div class="flex flex-col sm:flex-row lg:justify-center gap-x-4 gap-y-4 justify-center">
          <button onclick="openModal()" class="inline-flex items-center justify-center h-12 px-8 rounded-full transition-all w-full sm:w-auto font-sans hover:scale-105 active:scale-95 transition-transform duration-200 shadow-lg shadow-stone-900/20 bg-white text-sky-600 hover:bg-sky-50 hover:text-sky-700 shadow-sky-900/20" style="">
                Request Capabilities Statement
              </button>
          <a href="#compliance"
            class="inline-flex items-center justify-center h-12 px-8 rounded-full border transition-all w-full sm:w-auto font-sans bg-transparent border-white/40 text-white hover:bg-white/10 hover:border-white"
            style="">
            Verify Compliance
          </a>
        </div>
      </div>

      <!-- Hero Graphic: Clean UI representation -->
      <div class="flex-1 w-full max-w-lg lg:max-w-none">
        <div class="relative group">
          <!-- Main Card -->
          <div class="relative bg-white rounded-xl shadow-xl border border-stone-200 overflow-hidden" style="">
            <!-- Browser Header -->
            <div class="h-10 bg-stone-50 border-b border-stone-100 flex items-center px-4 gap-2" style="">
              <div class="w-3 h-3 rounded-full bg-sky-400" style=""></div>
              <div class="w-3 h-3 rounded-full bg-sky-400" style=""></div>
              <div class="ml-4 h-5 w-32 bg-stone-200/50 rounded-md" style=""></div>
            </div>
            <!-- Content Image -->
            <div class="relative">
              <img src="https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&amp;fit=crop&amp;q=80&amp;w=1200" alt="Government office relocation" class="w-full h-auto grayscale-[10%] opacity-90">

              <!-- Overlay UI Element -->
              <div
                class="absolute bottom-6 left-6 right-6 bg-white/95 backdrop-blur rounded-lg p-4 shadow-sm border border-stone-100"
                style="">
                <div class="flex items-center justify-between mb-2">
                  <span class="text-xs text-stone-900 font-sans" style="">
                        Project Status
                      </span>
                  <span class="text-[10px] uppercase text-sky-500 bg-sky-50 px-2 py-0.5 rounded font-sans" style="">
                        Active
                      </span>
                </div>
                <div class="w-full bg-stone-100 h-1.5 rounded-full overflow-hidden" style="">
                  <div class="bg-sky-500 h-full w-[75%]" style=""></div>
                </div>
                <div class="flex justify-between mt-2 text-[10px] text-stone-500 font-mono" style="">
                  <span class="font-sans" style="">
                        Phase 3: Deployment
                      </span>
                  <span class="font-sans" style="">NAICS: 484210</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="bg-white border-stone-200 border-b pt-0 pb-0" style=""></section>
<!-- Hub Navigation: Neutral, Uniform -->
<section class="z-50 bg-white border-stone-200 pt-6 pb-6 top-0 shadow-sm">
  <div
    class="overflow-x-auto no-scrollbar [mask-image:linear-gradient(to_right,transparent,black_5%,black_95%,transparent)] max-w-7xl mr-auto ml-auto pr-6 pl-6">
    <div
      class="flex flex-wrap md:flex-wrap whitespace-nowrap md:text-sm md:gap-3 md:justify-left text-xs font-medium w-full gap-x-2 gap-y-2 items-left">
      <a href="#"
        class="bg-white border border-stone-200 text-stone-600 hover:border-stone-300 hover:text-stone-900 py-1.5 px-3 md:py-2 md:px-4 rounded-full transition-colors font-sans"
        style="">
        Capabilities
      </a>
      <a href="#"
        class="bg-white border border-stone-200 text-stone-600 hover:border-stone-300 hover:text-stone-900 py-1.5 px-3 md:py-2 md:px-4 rounded-full transition-colors font-sans"
        style="">
        NAICS Codes
      </a>
      <a href="#"
        class="bg-white border border-stone-200 text-stone-600 hover:border-stone-300 hover:text-stone-900 py-1.5 px-3 md:py-2 md:px-4 rounded-full transition-colors font-sans"
        style="">
        Relocation Services
      </a>
      <a href="#"
        class="bg-white border border-stone-200 text-stone-600 hover:border-stone-300 hover:text-stone-900 py-1.5 px-3 md:py-2 md:px-4 rounded-full transition-colors font-sans"
        style="">
        Assembly &amp; Install
      </a>
      <a href="#"
        class="bg-white border border-stone-200 text-stone-600 hover:border-stone-300 hover:text-stone-900 py-1.5 px-3 md:py-2 md:px-4 rounded-full transition-colors font-sans"
        style="">
        Secure Storage
      </a>
      <a href="#"
        class="hover:border-stone-300 hover:text-stone-900 md:py-2 md:px-4 transition-colors text-stone-600 bg-white border-stone-200 border rounded-full pt-1.5 pr-3 pb-1.5 pl-3">
        Packing
      </a>
      <a href="/Past Performance"
        class="hover:border-stone-300 hover:text-stone-900 md:py-2 md:px-4 transition-colors text-stone-600 bg-white border-stone-200 border rounded-full pt-1.5 pr-3 pb-1.5 pl-3">
        Secure Storage
      </a>
      <a href="#"
        class="bg-white border border-stone-200 text-stone-600 hover:border-stone-300 hover:text-stone-900 py-1.5 px-3 md:py-2 md:px-4 rounded-full transition-colors font-sans"
        style="">
        Contact Procurement
      </a>
    </div>
  </div>
</section>