Constrain 'Our Work' image grid on desktop

- Add max-width: 900px to work-grid to prevent full-width stretching
- Tighten grid columns from minmax(280px, 1fr) to minmax(220px, 1fr)
- Center grid with margin: 0 auto
- Reduce gap from 24px to 20px

css/style.css

@@ -881,9 +881,10 @@ img {
 
 .work-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-    gap: 24px;
+    gap: 20px;
-    margin-bottom: 24px;
+    max-width: 900px;
+    margin: 0 auto 24px;
 }
 
 .work-item {

progress.md

@@ -26,7 +26,8 @@
 - [ ] **Real favicon** — generate a proper `.ico` / `.png` favicon from a pressure washing logo (currently using inline SVG emoji)
 - [ ] **Google Search Console verification** — add meta tag or HTML file after John purchases the domain
 - [ ] **Google Business Profile** — set up once domain is live (Walter's business listing)
-- [ ] **Alt text review** — ensure all real images have descriptive, keyword-rich alt text
+- [x] **Real photos in gallery** — replaced placeholder before/after slider with 'Our Work' section (5 real photos from Walter)
+- [ ] **Alt text review** — ensure all real images have descriptive, keyword-rich alt text (Walter's input preferred)
 - [ ] **Page load optimization** — compress real images, minify CSS/JS
 - [ ] **Content review** — Walter to review all copy for accuracy before going live
 

screenshot.js

@@ -0,0 +1,34 @@
+const { chromium } = require('playwright');
+
+(async () => {
+  const browser = await chromium.launch({ headless: true });
+  
+  const viewports = [
+    { name: 'desktop-1440', width: 1440, height: 900 },
+    { name: 'desktop-1280', width: 1280, height: 800 },
+    { name: 'tablet-768', width: 768, height: 1024 },
+    { name: 'mobile-375', width: 375, height: 812 },
+    { name: 'mobile-390', width: 390, height: 844 },
+  ];
+
+  for (const vp of viewports) {
+    const page = await browser.newPage({ viewport: { width: vp.width, height: vp.height } });
+    await page.goto('https://williamspressurewashingservices.com', { waitUntil: 'networkidle', timeout: 30000 });
+    // Wait a bit for any lazy-loaded images
+    await page.waitForTimeout(2000);
+    await page.screenshot({ path: `/home/johnny/.openclaw/workspace/Projects/WilliamsPressureWashingServices/screenshots/${vp.name}.png`, fullPage: false });
+    console.log(`Screenshot saved: ${vp.name} (${vp.width}x${vp.height})`);
+    await page.close();
+  }
+
+  // Also take a long full-page screenshot on desktop
+  const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
+  await page.goto('https://williamspressurewashingservices.com', { waitUntil: 'networkidle', timeout: 30000 });
+  await page.waitForTimeout(2000);
+  await page.screenshot({ path: '/home/johnny/.openclaw/workspace/Projects/WilliamsPressureWashingServices/screenshots/full-page-desktop.png', fullPage: true });
+  console.log('Screenshot saved: full-page-desktop (full scroll)');
+  await page.close();
+
+  await browser.close();
+  console.log('Done!');
+})();