From 220c42e90dbcd99417b2041dc82f4bf1792eeaa7 Mon Sep 17 00:00:00 2001
From: Tony Balascio <tonyjbala@gmail.com>
Date: Sun, 9 Aug 2026 03:12:54 +0000
Subject: [PATCH] Add first real before/after stairs photos to gallery

---
 index.html | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 0af58dd..e3368d4 100644
--- a/index.html
+++ b/index.html
@@ -319,18 +319,16 @@ tailwind.config = {
       <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
         <!-- Before 1 -->
         <figure class="group relative overflow-hidden rounded-sm border border-brand-line">
-          <!-- REPLACE: images/before-1.jpg -->
-          <img src="https://images.unsplash.com/photo-1533035353720-f1c6a75cd8ab?q=80&w=800&auto=format&fit=crop" alt="Before: Worn, faded wooden deck with peeling paint and warped boards in Placerville" class="w-full aspect-[4/3] object-cover grayscale group-hover:grayscale-0 transition-all duration-500">
+          <img src="images/stairs-before-1.jpg" alt="Before: Worn wooden stairs with white-painted railing in Placerville" class="w-full aspect-[4/3] object-cover grayscale group-hover:grayscale-0 transition-all duration-500">
           <figcaption class="absolute bottom-0 left-0 right-0 bg-brand-forest/90 text-white text-xs font-bold uppercase tracking-wider p-3 flex items-center gap-2">
-            <span class="bg-brand-stone text-white px-2 py-0.5 rounded-sm">Before</span> Faded & Warped Boards
+            <span class="bg-brand-stone text-white px-2 py-0.5 rounded-sm">Before</span> Worn Wooden Stairs
           </figcaption>
         </figure>
         <!-- After 1 -->
         <figure class="group relative overflow-hidden rounded-sm border border-brand-line">
-          <!-- REPLACE: images/after-1.jpg -->
-          <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=800&auto=format&fit=crop" alt="After: Beautifully restored deck with rich cedar stain and new code-compliant railings" class="w-full aspect-[4/3] object-cover sepia-[.1] group-hover:sepia-0 transition-all duration-500">
+          <img src="images/stairs-after-1.jpg" alt="After: New stairs with black metal railing leading to an elevated deck" class="w-full aspect-[4/3] object-cover sepia-[.1] group-hover:sepia-0 transition-all duration-500">
           <figcaption class="absolute bottom-0 left-0 right-0 bg-brand-rust/90 text-white text-xs font-bold uppercase tracking-wider p-3 flex items-center gap-2">
-            <span class="bg-white text-brand-rust px-2 py-0.5 rounded-sm">After</span> Rich Cedar Restoration
+            <span class="bg-white text-brand-rust px-2 py-0.5 rounded-sm">After</span> New Stairs with Black Railing
           </figcaption>
         </figure>