diff --git a/src/styles/cards.css b/src/styles/cards.css
index 046f598..8071f2b 100644
--- a/src/styles/cards.css
+++ b/src/styles/cards.css
@@ -173,3 +173,37 @@
     clip-path: inset(-40px -40px -40px -40px);
   }
 }
+
+/* ---------- Infrastructure diagram: Operations is the base rail ----------
+   Operations sustains the whole route, so on wide screens it runs under all
+   four stages as one slim rail instead of a fifth card hanging below the
+   last, which left three empty cells beside it. Its connector still drops
+   from Containerized services: the centre of the fourth column is
+   87.5% of the row plus three-eighths of one column gap. */
+@media (min-width: 768px) {
+  .infrastructure-flow {
+    --route-gap: clamp(1.9rem, 3vw, 3rem);
+    padding-block-end: 1.25rem;
+  }
+  .infrastructure-flow__route {
+    column-gap: var(--route-gap);
+    row-gap: 2rem;
+  }
+  .infrastructure-node.infrastructure-node--operations {
+    grid-column: 1 / -1;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0.35rem 1.1rem;
+    min-block-size: 0;
+    padding-block: 0.9rem;
+  }
+  .infrastructure-node--operations .infrastructure-node__connector--vertical {
+    inset-inline-start: calc(87.5% + 0.375 * var(--route-gap));
+    inline-size: 1px;
+    block-size: 2rem;
+  }
+}
+@media (min-width: 768px) and (max-width: 1100px) {
+  .infrastructure-flow { --route-gap: 20px; }
+}