<%- include('../layouts/top') %>

<%- include('../components/page-hero', {
  heroTitle: 'Transportation services built around your cargo',
  heroLead: 'Truck and road transport services for every kind of consignment, planned around what is being moved, where it has to go and when it has to arrive.',
  heroEyebrow: 'Our services',
  heroImage: 'container-trailer-highway',
  heroCtas: { primary: 'Get a Quote', secondary: 'Contact Us' }
}) %>

<section class="section" aria-labelledby="all-services-title">
  <div class="container">
    <div class="section-head">
      <h2 id="all-services-title">Road and rail-cum-road goods transportation</h2>
      <p>From a single full truck load to a multi-vehicle project programme, every movement has a single point of contact at HK Logistics.</p>
    </div>
    <div class="grid grid--4 grid--services">
      <% services.forEach(function (s) { %><%- include('../components/service-card', { s: s }) %><% }) %>
      <div class="card service-card service-card--cta reveal">
        <span class="icon-tile icon-tile--soft"><%- icon('message') %></span>
        <h3>Not sure which service fits?</h3>
        <p>Describe the cargo and route, and we will recommend the right approach.</p>
        <a class="btn btn--light btn--sm" href="/quote">Ask our team<%- icon('arrow-right', 'icon--arrow') %></a>
      </div>
    </div>
  </div>
</section>

<section class="section section--alt" aria-labelledby="multimodal-title">
  <div class="container split">
    <div class="media-frame reveal">
      <%- img('port-container-handling-navi-mumbai', { alt: 'Container handling at JNPT, Navi Mumbai', sizes: '(min-width: 960px) 50vw, 100vw' }) %>
    </div>
    <div class="reveal">
      <p class="eyebrow">Multimodal</p>
      <h2 id="multimodal-title">One point of contact, whichever mode the cargo needs</h2>
      <p>Most consignments move on a single service. A project programme rarely does. The same customer may need a chemical tanker this month, a containerised distribution run the next, and a hydraulic trailer for the vessel at the centre of the whole erection schedule.</p>
      <p>We offer solutions for customers with multimodal logistics requirements, so the mode is chosen to suit the cargo and the route rather than whatever is standing in a yard. Whichever combination a movement needs, it stays on one file with a single point of contact.</p>
      <a class="btn btn--outline" href="/fleet">See the equipment behind these services<%- icon('arrow-right', 'icon--arrow') %></a>
    </div>
  </div>
</section>

<section class="section" aria-labelledby="process-title">
  <div class="container">
    <div class="section-head section-head--center">
      <p class="eyebrow">How it works</p>
      <h2 id="process-title">From enquiry to safe delivery</h2>
    </div>
    <%- include('../components/process', { steps: content.processSteps }) %>
  </div>
</section>

<%- include('../components/cta-band') %>

<%- include('../layouts/bottom') %>
