services.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Services — DevOps &amp; Cloud Engineering</title>
<meta name="description" content="CI/CD pipelines, infrastructure as code, Kubernetes, observability, DevSecOps, SRE and cloud cost optimisation — delivered as scoped engagements.">
<meta name="theme-color" content="#1b1b30">
<link rel="canonical" href="https://example.com/services.html">

<meta property="og:type" content="website">
<meta property="og:title" content="Services — DevOps &amp; Cloud Engineering">
<meta property="og:description" content="Everything between a commit and production.">
<meta property="og:url" content="https://example.com/services.html">
<meta property="og:image" content="https://example.com/assets/img/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A developer workspace with a laptop showing a deployment pipeline.">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/assets/img/og-image.jpg">

<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%23B8E9E6'/><text y='68' x='50' text-anchor='middle' font-size='52' font-family='sans-serif' font-weight='bold' fill='%23131527'>%E2%9A%99</text></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/styles.css">
</head>

<body data-page="services">
<a class="skip-link" href="#main">Skip to content</a>

<div class="announcement" data-announcement></div>
<header class="header" data-header></header>

<main id="main">

  <section class="page-head page-head--photo">
    <div class="container">
      <p class="breadcrumb"><a href="index.html">Home</a><span>/</span>Services</p>
      <p class="eyebrow">Capabilities</p>
      <h1 class="display" style="font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem)">
        Services built around your <span class="gradient-text">delivery pipeline</span>
      </h1>
      <p class="lead" style="margin-top: 1.25rem">
        <strong data-services-count>40</strong> services, grouped by what they
        actually solve. Every one is delivered as a scoped engagement with written
        deliverables, a named engineer and a handover at the end. Mix and match —
        most clients start with two or three.
      </p>
    </div>
  </section>

  <section class="section section--tight">
    <div class="container">
      <!-- Category jump links, populated from the services data. -->
      <nav class="service-jump" aria-label="Jump to service category" data-services-jump></nav>

      <div data-services-full></div>
    </div>
  </section>

  <!-- ==================================================== TECH WE WORK WITH -->
  <section class="section section--alt section--edge" id="technologies">
    <div class="container">
      <div class="section-head">
        <p class="eyebrow">Tooling</p>
        <h2 class="h2">We work with your stack, not against it</h2>
        <p class="lead">
          <strong data-tech-count>38</strong> platforms and tools we work with
          week to week. If yours isn't listed, it's almost certainly something
          we've used — just ask.
        </p>
      </div>

      <div class="note" style="margin-bottom: 2.5rem; max-width: 46rem">
        <strong>Opinionated where it helps, pragmatic where it matters.</strong>
        We'll recommend a target stack in discovery, but we won't ask you to
        migrate something that is working simply to match our preferences.
      </div>

      <div data-tech-full></div>

      <div class="btn-row" style="margin-top: 2.5rem">
        <a class="btn btn--primary" href="contact.html">Discuss your stack</a>
      </div>
    </div>
  </section>

  <!-- ================================================ PHOTO BAND -->
  <section class="band band--full">
    <img class="band__img" src="assets/img/band-code.jpg" alt=""
         width="1600" height="900" loading="lazy" decoding="async">
    <div class="band__body reveal">
      <p class="eyebrow">Delivery</p>
      <h2 class="h2">Every engagement is scoped in writing before work starts</h2>
      <p class="lead">
        You get a written statement of deliverables, a named engineer, a fixed
        price and a handover date. If we think a service on this page isn't the
        right fit for your problem, we'll say so and point you elsewhere.
      </p>
      <div class="btn-row">
        <a class="btn btn--primary btn--lg" href="contact.html">Describe your problem</a>
        <a class="btn btn--ghost btn--lg" href="index.html#free-offer">See the free audit</a>
      </div>
    </div>
  </section>

  <!-- ==================================================== ENGAGEMENT MODELS -->
  <section class="section">
    <div class="container">
      <div class="section-head section-head--center">
        <p class="eyebrow">Engagement models</p>
        <h2 class="h2">Three ways to work with us</h2>
      </div>
      <div class="grid grid--3" data-plans></div>
    </div>
  </section>

  <section class="section section--tight">
    <div class="container">
      <div data-offer></div>
    </div>
  </section>

</main>

<footer class="footer" data-footer></footer>

<script src="assets/js/config.js"></script>
<script src="assets/js/data.js"></script>
<script src="assets/js/tech.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>