Operational Capabilities

<section class="overflow-hidden md:pt-24 md:pb-24 text-white bg-stone-950 pt-12 pb-12 relative">
      <!-- Background Accents -->
      <div class="absolute top-0 right-0 w-[600px] h-[600px] blur-[120px] rounded-full pointer-events-none mix-blend-overlay bg-pink-500/10"></div>
      <div class="absolute bottom-0 left-0 w-[600px] h-[600px] bg-pink-500/10 blur-[120px] rounded-full pointer-events-none mix-blend-overlay"></div>

      <div class="sm:px-6 z-10 max-w-7xl mr-auto ml-auto pr-4 pl-4 relative">
        <!-- Header -->
        <div class="flex flex-col md:flex-row md:items-end justify-between mb-8 gap-6">
          <div class="max-w-2xl">
            <h2 class="text-3xl lg:text-4xl text-white tracking-tight mb-3 font-quicksand font-semibold" style="">
              Operational Intelligence
            </h2>
            <p class="text-stone-300 text-lg leading-relaxed max-w-xl font-sans" style="">
              Majesty Moving integrates directly with agency workflows. Fast
              answers, compliant processes, and real-time visibility for
              contracting officers.
            </p>
          </div>
          <!-- Action Button (Light Theme) -->
          <a href="https://majestymoving.com/services/government/contact/" class="hover:bg-stone-100 transition-colors shadow-stone-900/5 flex items-center gap-2 text-sm text-stone-900 bg-white border-white/10 border rounded-full pt-2.5 pr-5 pb-2.5 pl-5 shadow-lg">
            View Service Catalog
            <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="lucide lucide-arrow-right">
              <path d="M5 12h14"></path>
              <path d="m12 5 7 7-7 7"></path>
            </svg>
          </a>
        </div>

        <!-- Compact UI Bento Grid (Light Theme) -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-4 auto-rows-[minmax(200px,auto)] gap-x-4 gap-y-4">
          <!-- ROW 1 -->

          <!-- Item 1: Coverage (Large Map UI) -->
          <div class="col-span-1 md:col-span-2 lg:col-span-6 overflow-hidden group flex flex-col min-h-[240px] bg-white border-stone-200 border rounded-2xl pt-6 pr-6 pb-6 pl-6 relative shadow-xl justify-between" style="">
            <!-- UI Header -->
            <div class="flex justify-between items-start z-10 relative">
              <div class="max-w-lg">
                <div class="flex items-center gap-2 mb-2">
                  <div class="w-2 h-2 rounded-full animate-pulse bg-pink-500"></div>
                  <span class="text-[10px] uppercase font-sans text-pink-500" style="">
                    Active Region
                  </span>
                </div>
                <h3 class="text-2xl text-stone-900 tracking-tight mb-3 font-quicksand font-semibold" style="">
                  Utah Focused.
                  <span class="text-stone-400 font-quicksand font-semibold" style="">
                    Nationwide Scope.
                  </span>
                </h3>
                <p class="text-sm text-stone-500 leading-relaxed font-sans" style="">
                  Based in Utah servicing Salt Lake City, Hill AFB, and remote
                  outposts. Nationwide travel is available for specific
                  relocation scopes.
                </p>
              </div>
              <div class="px-3 py-1 bg-stone-100 rounded-lg border border-stone-200 ml-4 shrink-0" style="">
                <span class="text-[10px] text-stone-500 uppercase font-sans" style="">
                  UT-HQ
                </span>
              </div>
            </div>

            <!-- Abstract Map Graphic -->
            <div class="absolute inset-0 opacity-100 pointer-events-none">
              <svg class="w-full h-full text-stone-100" width="100%" height="100%" style="">
                <pattern id="grid-pattern-light" width="32" height="32" patternUnits="userSpaceOnUse">
                  <path d="M 32 0 L 0 0 0 32" fill="none" stroke="currentColor" stroke-width="1.5"></path>
                </pattern>
                <rect width="100%" height="100%" fill="url(#grid-pattern-light)"></rect>
              </svg>
              <!-- Connecting Lines -->
              <svg class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full h-full overflow-visible" viewBox="0 0 400 300">
                <circle cx="200" cy="150" r="4" fill="#3b82f6"></circle>
                <circle cx="200" cy="150" r="32" fill="#3b82f6" opacity="0.1"></circle>
                <circle cx="260" cy="90" r="3" fill="#d6d3d1"></circle>
                <circle cx="140" cy="190" r="3" fill="#d6d3d1"></circle>
                <circle cx="290" cy="160" r="3" fill="#d6d3d1"></circle>
                <path d="M200 150L260 90" stroke="#3b82f6" stroke-width="1" stroke-dasharray="4 4" opacity="0.2"></path>
                <path d="M200 150L140 190" stroke="#3b82f6" stroke-width="1" stroke-dasharray="4 4" opacity="0.2"></path>
                <path d="M200 150L290 160" stroke="#3b82f6" stroke-width="1" stroke-dasharray="4 4" opacity="0.2"></path>
              </svg>
            </div>

            <!-- Bottom Stats -->
            <div class="grid grid-cols-2 gap-3 mt-6 relative z-10">
              <div class="bg-stone-50 rounded-xl p-3 border border-stone-100 hover:bg-stone-100 transition-colors cursor-default group-hover:border-stone-200" style="">
                <div class="text-[10px] text-stone-400 uppercase mb-1 font-sans" style="">
                  Service Area
                </div>
                <div class="text-sm text-stone-900 font-sans" style="">
                  Salt Lake City &amp; Hill AFB
                </div>
              </div>
              <div class="bg-stone-50 rounded-xl p-3 border border-stone-100 hover:bg-stone-100 transition-colors cursor-default group-hover:border-stone-200" style="">
                <div class="text-[10px] text-stone-400 uppercase mb-1 font-sans" style="">
                  Expansion
                </div>
                <div class="text-sm text-stone-900 font-sans" style="">
                  CONUS Available
                </div>
              </div>
            </div>
          </div>

          <!-- Item 2: Fast Quotes (Speed UI) -->
          <div class="col-span-1 lg:col-span-3 flex flex-col group hover:-translate-y-1 transition-transform duration-300 overflow-hidden bg-white border-stone-200 border rounded-2xl pt-6 pr-6 pb-6 pl-6 relative shadow-md justify-between" style="">
            <div class="absolute top-0 right-0 w-24 h-24 rounded-full blur-2xl -mr-10 -mt-10 pointer-events-none bg-pink-500/5"></div>
            <div class="flex justify-between items-start relative z-10">
              <div class="p-2 rounded-lg border shadow-sm bg-pink-50 text-pink-500 border-pink-100">
                <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" class="lucide lucide-zap">
                  <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
                </svg>
              </div>
              <span class="text-xs text-stone-400 font-sans" style="">02</span>
            </div>
            <div class="relative z-10 mt-4">
              <div class="text-3xl text-stone-900 tracking-tight mb-2 font-quicksand font-semibold" style="">
                &lt;24h
              </div>
              <h3 class="text-stone-900 mb-1 font-sans" style="">
                Fast Quotes
              </h3>
              <p class="text-sm text-stone-500 leading-relaxed font-sans" style="">
                Procurement gets pricing fast. Standard quotes often returned
                within 24 hours.
              </p>
            </div>
            <div class="w-full bg-stone-100 h-1.5 rounded-full overflow-hidden mt-4 border border-stone-100" style="">
              <div class="w-[95%] h-full rounded-full shadow-sm bg-pink-500"></div>
            </div>
          </div>

          <!-- Item 3: Packing (Checklist) -->
          <div class="col-span-1 lg:col-span-3 flex flex-col group hover:-translate-y-1 transition-transform duration-300 overflow-hidden bg-white border-stone-200 border rounded-2xl pt-6 pr-6 pb-6 pl-6 relative shadow-md justify-between">
            <div class="absolute bottom-0 left-0 w-24 h-24 bg-emerald-500/5 rounded-full blur-2xl -ml-10 -mb-10 pointer-events-none"></div>
            <div class="flex z-10 relative items-start justify-between">
              <div class="p-2 bg-pink-50 text-pink-500 border border-pink-100 rounded-lg shadow-sm">
                <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" class="lucide lucide-package-check">
                  <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" class=""></path>
                  <path d="m3.3 7 8.7 5 8.7-5" class=""></path>
                  <path d="M12 22V12" class=""></path>
                </svg>
              </div>
              <span class="text-xs text-stone-400 font-sans" style="">03</span>
            </div>
            <div class="mt-4 relative z-10">
              <h3 class="text-lg text-stone-900 mb-2 font-sans" style="">
                Packing &amp; Crating
              </h3>
              <p class="text-stone-500 text-sm leading-relaxed font-sans" style="">
                Full material supply. Crates for IT, secure bins for files.
                Chain-of-custody maintained.
              </p>
            </div>
          </div>

          <!-- ROW 2 -->

          <!-- Item 4: Storage (Secure - Light Pink Theme) -->
          <div class="col-span-1 md:col-span-2 lg:col-span-4 flex flex-col overflow-hidden group min-h-[220px] bg-sky-500 border-sky-500 border rounded-2xl pt-6 pr-6 pb-6 pl-6 relative shadow-md justify-between">
            <div class="absolute -right-10 -top-10 w-48 h-48 bg-white/40 rounded-full blur-3xl group-hover:bg-white/60 transition-colors pointer-events-none"></div>

            <div class="relative z-10">
              <div class="flex items-center justify-between mb-4">
                <div class="p-2 bg-white rounded-lg text-pink-600 shadow-sm ring-1 ring-pink-100">
                  <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" class="lucide lucide-warehouse">
                    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
                  </svg>
                </div>
                <div class="px-2 py-0.5 rounded bg-white border border-pink-100 text-[9px] text-pink-700 uppercase font-sans" style="">
                  Secure
                </div>
              </div>
              <h3 class="text-xl text-stone-50 mb-2">
                Climate Control Storage
              </h3>
              <p class="leading-relaxed text-sm text-stone-100 max-w-sm">
                Warehousing with active inventory management and audit trails.
              </p>
            </div>
          </div>

          <!-- Item 5: Assembly -->
          <div class="col-span-1 lg:col-span-4 bg-white rounded-2xl p-6 border border-stone-200 shadow-md flex flex-col justify-between group hover:-translate-y-1 transition-transform duration-300 min-h-[220px]" style="">
            <div class="relative z-10">
              <div class="flex justify-between items-start mb-4">
                <div class="p-2 bg-stone-100 rounded-lg text-stone-600 border border-stone-200 shadow-sm" style="">
                  <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" class="lucide lucide-wrench">
                    <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"></path>
                  </svg>
                </div>
                <span class="text-xs text-stone-400 font-sans" style="">
                  05
                </span>
              </div>
              <h3 class="text-lg text-stone-900 mb-2 font-sans" style="">
                Assembly
              </h3>
              <p class="leading-relaxed text-sm text-stone-500 font-sans" style="">
                Disassembly and reassembly according to floor plans. Cubicles,
                desks, and shelving.
              </p>
            </div>
          </div>

          <!-- Item 6: Cleanouts -->
          <div class="col-span-1 lg:col-span-4 bg-white rounded-2xl p-6 border border-stone-200 shadow-md flex flex-col justify-between group hover:-translate-y-1 transition-transform duration-300 min-h-[220px]" style="">
            <div class="flex flex-col gap-3 w-full">
              <div class="w-12 h-12 bg-stone-100 rounded-xl flex items-center justify-center text-stone-500 border border-stone-200 group-hover:rotate-6 transition-transform shadow-sm flex-shrink-0" style="">
                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash-2">
                  <path d="M3 6h18"></path>
                  <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                </svg>
              </div>
              <div class="">
                <h3 class="text-lg text-emerald-600 mb-1 font-sans">
                  Cleanouts
                </h3>
                <p class="text-stone-500 text-sm font-sans" style="">
                  Debris removal.
                </p>
              </div>
            </div>
            <div class="mt-4 w-full px-3 py-2 bg-emerald-50 rounded-lg border border-emerald-100 text-xs text-emerald-700 group-hover:text-emerald-800 transition-colors flex items-center justify-center gap-2 whitespace-nowrap font-sans" 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="lucide lucide-leaf text-emerald-500">
                <path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.77 10-10 10Z"></path>
                <path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"></path>
              </svg>
              Eco-Friendly
            </div>
          </div>
        </div>
      </div>
    </section>