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%;

css/style.css

@@ -70,6 +70,12 @@ a {
     box-shadow: var(--shadow);
 }
 
+.nav-left {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+}
+
 .nav-logo {
     font-family: var(--mono);
     font-weight: 800;
@@ -78,6 +84,18 @@ a {
     color: var(--accent);
 }
 
+.nav-back {
+    font-family: var(--mono);
+    font-size: 1rem;
+    color: var(--white);
+    opacity: 0.5;
+    transition: opacity 0.15s;
+}
+
+.nav-back:hover {
+    opacity: 1;
+}
+
 .nav-links {
     display: flex;
     gap: 2rem;
@@ -132,6 +150,10 @@ a {
     color: var(--white);
 }
 
+.hero h1 .h1-sub {
+    font-size: 0.6em;
+}
+
 .hero-sub {
     font-size: 1.25rem;
     color: var(--white);