<?php include'header.php'?>

<!-- ===== SYSTEM BREADCRUMB WITH BACKGROUND ===== -->
<nav class="breadcrumb-nav bg-overlay" style="background-image: url('assets/img/breadcrumb.png');">
  <div class="wrap">
    <ol class="breadcrumb-list">
      <li class="breadcrumb-item">
        <a href="#">Services</a>
      </li>
    </ol>
  </div>
</nav>

<!-- ===== SECTION 2: SERVICES / WHY CHOOSE US ===== -->
<section id="why-choose-us" class="wash-teal services-section">
  <div class="wrap">
    <div class="section-head">
      <div class="eyebrow">Why Choose Us</div>
      <h2>What Sets Our<br>Service Apart</h2>
    </div>
    
    <div class="line-items-grid">
      <!-- Item 01 -->
      <div class="services-card">
        <h3>Corporate Moves</h3>
        <p class="card-desc">Dedicated account handling and scheduled pickups make office relocations and bulk business shipments simple.</p>
        <ul class="card-sub-services">
          <li class="sub-service-item">Office Asset Relocation</li>
          <li class="sub-service-item">Bulk Business Shipments</li>
          <li class="sub-service-item">Dedicated Account Desks</li>
          <li class="sub-service-item">Scheduled Priority Pickups</li>
        </ul>
      </div>
      
      <!-- Item 02 -->
      <div class="services-card">
        <h3>Maximum Cargo Flexibility</h3>
        <p class="card-desc">From a single parcel to full truckloads, our fleet scales to match your exact structural delivery footprint.</p>
        <ul class="card-sub-services">
          <li class="sub-service-item">LTL & FTL Fleet Access</li>
          <li class="sub-service-item">Scalable Volumetric Matrix</li>
          <li class="sub-service-item">Zero Last-Minute Surcharges</li>
          <li class="sub-service-item">Intermodal Asset Linking</li>
        </ul>
      </div>
      
      <!-- Item 03 -->
      <div class="services-card">
        <h3>Custom Logistics</h3>
        <p class="card-desc">Tailored routing, specialized packaging matrices, and strict delivery windows built directly around your business flow.</p>
        <ul class="card-sub-services">
          <li class="sub-service-item">Dynamic Route Optimization</li>
          <li class="sub-service-item">Specialized Climate Packing</li>
          <li class="sub-service-item">Strict-Window Time slots</li>
          <li class="sub-service-item">API Integration Hubs</li>
        </ul>
      </div>

      <!-- Item 04 -->
      <div class="services-card">
        <h3>Warehousing & Storage</h3>
        <p class="card-desc">Secure, climate-controlled, and strategized distribution nodes to house high-value inventory close to target markets.</p>
        <ul class="card-sub-services">
          <li class="sub-service-item">Cross-Docking Protocols</li>
          <li class="sub-service-item">24/7 Monitored Inventory</li>
          <li class="sub-service-item">Just-In-Time Fulfillment</li>
          <li class="sub-service-item">SKU-Level Auditing</li>
        </ul>
      </div>

      <!-- Item 05 -->
      <div class="services-card">
        <h3>Cold Chain Networks</h3>
        <p class="card-desc">End-to-end temperature preservation for highly critical biological, food-grade, or chemical hardware shipments.</p>
        <ul class="card-sub-services">
          <li class="sub-service-item">Continuous Thermal Logging</li>
          <li class="sub-service-item">Redundant Cooling Fleet</li>
          <li class="sub-service-item">Regulatory Health Compliance</li>
          <li class="sub-service-item">Rapid Air-to-Ground Transfer</li>
        </ul>
      </div>

      <!-- Item 06 -->
      <div class="services-card">
        <h3>Express Direct Routing</h3>
        <p class="card-desc">High-priority point-to-point transit systems optimized for critical operational deadlines with real-time positioning.</p>
        <ul class="card-sub-services">
          <li class="sub-service-item">Next-Flight-Out dispatch</li>
          <li class="sub-service-item">Hot-Shot dedicated vans</li>
          <li class="sub-service-item">Continuous telemetry feeds</li>
          <li class="sub-service-item">Guaranteed ETA Window</li>
        </ul>
      </div>
    </div>
  </div>
</section>

<style>
    /* --- EXPANDED 6-CARD SERVICES GRID --- */
.line-items-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}

.services-card {
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 32px;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  box-sizing: border-box;
}

.services-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 10px 10px 0 var(--ink);
}

.services-card h3{
    padding-bottom: 10px;
}

.services-card p.card-desc {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 24px 0;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 16px;
  width: 100%;
  flex-grow: 1; /* Aligns the list sections if text lengths vary */
}

/* Internal Services Sub-list */
.card-sub-services {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sub-service-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  text-transform: uppercase;
}

.sub-service-item::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--ink);
  border: 1px solid var(--paper);
  box-shadow: 1px 1px 0 var(--ink);
}

/* Extended Color Array for 6 Cards */
.services-card .code-green { background: var(--green); }
.services-card .code-teal { background: var(--teal); }
.services-card .code-amber { background: var(--amber); }
.services-card .code-blue { background: #a2c2e8; }      /* Placeholder accent colors */
.services-card .code-purple { background: #cbb2e8; }    /* matching the brand's */
.services-card .code-orange { background: #f1b292; }    /* ink/wash structure */

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .line-items-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 640px) {
  .line-items-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
</style>
<?php include'footer.php'?>