Add LHB Engineering case study with reusable header/footer partials and scrollable hero screenshots

css/portfolio.css

@@ -182,8 +182,8 @@
 .cs-meta-bar {
     list-style: none;
     display: flex;
-    flex-wrap: wrap;
-    gap: 0 2rem;
+    flex-direction: column;
+    gap: 0;
     padding: 0.75rem 1rem;
     background: var(--grey-dark);
     border-left: 6px solid var(--grey-text);
@@ -304,6 +304,37 @@
     border-bottom: 2px solid var(--accent);
 }
 
+.screenshot-hero-scroll {
+    position: relative;
+    max-height: 600px;
+    overflow-y: scroll;
+    scrollbar-width: thin;
+    scrollbar-color: var(--accent) #1a1a1a;
+}
+
+.screenshot-hero-scroll--no-hint::before {
+    display: none;
+}
+
+.screenshot-hero-scroll::before {
+    content: '↓ scroll to view whole page';
+    position: sticky;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding-top: 1.5rem;
+    height: 120px;
+    margin-bottom: -120px;
+    background: linear-gradient(to top, transparent, rgba(10, 10, 10, 0.9));
+    font-family: var(--mono);
+    font-size: 1rem;
+    letter-spacing: 0.12em;
+    color: var(--white);
+    pointer-events: none;
+    z-index: 1;
+}
+
 .screenshot-hero {
     display: block;
     width: 100%;