feat: add 'Our Work' gallery with real photos, hide old Before/After

css/style.css

@@ -873,6 +873,42 @@ img {
     font-size: 0.9rem;
 }
 
+/* --- Our Work --- */
+.our-work {
+    padding: 100px 0;
+    background: var(--off-white);
+}
+
+.work-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 24px;
+    margin-bottom: 24px;
+}
+
+.work-item {
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    box-shadow: var(--shadow);
+    background: var(--white);
+}
+
+.work-item img {
+    width: 100%;
+    height: 240px;
+    object-fit: cover;
+    display: block;
+}
+
+.work-caption {
+    padding: 14px 18px;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 600;
+    font-size: 0.9rem;
+    color: var(--text-dark);
+    text-align: center;
+}
+
 /* --- Testimonials --- */
 .testimonials {
     padding: 100px 0;

index.html

@@ -218,8 +218,8 @@
         </div>
     </section>
 
-    <!-- Before & After Gallery -->
-    <section class="gallery" id="gallery">
+    <!-- Before & After Gallery — hidden until we have Walter's photos -->
+    <section class="gallery" id="gallery" style="display:none;">
         <div class="container">
             <h2 class="section-title">Before & <span class="accent">After</span></h2>
             <p class="section-subtitle">See the difference professional pressure washing makes</p>
@@ -256,6 +256,36 @@
         </div>
     </section>
 
+    <!-- Our Work -->
+    <section class="our-work">
+        <div class="container">
+            <h2 class="section-title">See Our <span class="accent">Work</span></h2>
+            <p class="section-subtitle">Real jobs, real results — no stock photos</p>
+            <div class="work-grid">
+                <div class="work-item">
+                    <img src="img/work-1-truck-setup.jpg" alt="Williams Pressure Washing truck fleet washing setup" loading="lazy">
+                    <p class="work-caption">Fleet Washing — On-site Setup</p>
+                </div>
+                <div class="work-item">
+                    <img src="img/work-2-action-washing.jpg" alt="Worker pressure washing the truck — showing the real work" loading="lazy">
+                    <p class="work-caption">In Action — Pressure Washing in Progress</p>
+                </div>
+                <div class="work-item">
+                    <img src="img/work-3-clean-white-truck.jpg" alt="Clean white semi-truck after professional washing" loading="lazy">
+                    <p class="work-caption">Clean Result — White Semi-Truck</p>
+                </div>
+                <div class="work-item">
+                    <img src="img/work-4-clean-wheels.jpg" alt="Clean truck wheels and chassis" loading="lazy">
+                    <p class="work-caption">Attention to Detail — Wheels & Chassis</p>
+                </div>
+                <div class="work-item">
+                    <img src="img/work-5-clean-side-view.jpg" alt="Clean truck from the side — professional fleet result" loading="lazy">
+                    <p class="work-caption">Final Result — Side View</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
     <!-- Testimonials -->
     <section class="testimonials">
         <div class="container">