<!DOCTYPE html>
<!-- ============================================================
     DataYard 404 Page
     Standalone HTML. No JavaScript, no frameworks, no web fonts.
     Brand: #F2A900 American Yellow, #41546D Police Blue, #000000 black
     Fonts: Open Sans, supplied by the DataYard theme
     CSS scoped under .dy-404
     ============================================================ -->
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Not Found | DataYard</title>
  <meta name="robots" content="noindex, follow">

  <style>
    html, body { margin: 0; padding: 0; background: #ffffff; }

    .dy-404 {
      box-sizing: border-box;
      font-family: 'Open Sans', Helvetica, Arial, sans-serif;
      color: #000000;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 40px 24px;
    }

    .dy-404 img { display: block; height: auto; }

    .dy-404__logo { display: inline-block; margin-bottom: 36px; }
    .dy-404__logo img { width: 240px; max-width: 68vw; aspect-ratio: 1300 / 488; }

    .dy-404__code {
      font-weight: 700;
      font-size: clamp(72px, 16vw, 128px);
      line-height: 1;
      letter-spacing: -0.02em;
      color: #000000;
      margin: 0 0 14px 0;
    }

    .dy-404__label {
      display: inline-block;
      background: #F2A900;
      color: #000000;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 5px 14px;
      border-radius: 2px;
      margin: 0 0 24px 0;
    }

    .dy-404__graphic { width: 300px; max-width: 76vw; margin: 0 auto 24px auto; }

    .dy-404__heading {
      font-weight: 700;
      font-size: clamp(26px, 5.5vw, 38px);
      line-height: 1.2;
      margin: 0 0 26px 0;
    }

    .dy-404__text {
      font-size: 18px;
      line-height: 1.7;
      max-width: 500px;
      margin: 0 auto 30px auto;
    }

    .dy-404__btn {
      display: inline-block;
      background: #000000;
      color: #F2A900;
      font-size: 17px;
      font-weight: 700;
      text-decoration: none;
      padding: 16px 24px;
      border-radius: 3px;
      transition: background 0.2s ease, color 0.2s ease;
    }

    .dy-404__btn:hover,
    .dy-404__btn:focus { background: #F2A900; color: #000000; }
    .dy-404__btn:focus-visible { outline: 3px solid #41546D; outline-offset: 2px; }

    @media (max-width: 600px) {
      .dy-404 { padding: 32px 20px; }
      .dy-404__logo { margin-bottom: 26px; }
    }
  </style>
</head>

<body>

<main class="dy-404">

  <a class="dy-404__logo" href="https://www.datayard.us/">
    <img
      src="https://www.datayard.us/wp-content/uploads/2024/05/LOGO.avif"
      alt="DataYard logo with the tagline Make IT Better"
      width="1300"
      height="488"
      fetchpriority="high"
      decoding="async"
    />
  </a>

  <p class="dy-404__code">404</p>
  <p class="dy-404__label">Error</p>

  <h1 class="dy-404__heading">Oops, We Cannot Find That Page</h1>

  <img
    class="dy-404__graphic skip-lazy"
    src="https://www.datayard.us/wp-content/uploads/2026/08/DataYard-Monkey-Call-9-1.png"
    alt="Illustration of a thinking chimp with a question mark above its head"
    width="300"
    height="300"
    fetchpriority="high"
    decoding="async"
    data-no-lazy="1"
    loading="eager"
  />

  <p class="dy-404__text">The page you are looking for moved, changed names, or never existed in the first place. Our chimp is thinking it over. In the meantime, here is a way back.</p>

  <a class="dy-404__btn" href="https://www.datayard.us/">DataYard Homepage →</a>

</main>

</body>
</html>