Client results: add before/after screenshots + headshot attributions

Upgrade the text-only #results case studies with the real before/after work
images and client headshots (Fred Hobeyn / Jim Szlabon). Side-by-side on desktop,
stacks on mobile (<=640px). SW (Georgia/steel) styling. Staging branch only.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

index.html

@@ -171,8 +171,22 @@
         <h3>Dealer pricing: from emailed workbook to live catalog</h3>
         <p><strong>Before —</strong> dealer pricing lived in a multi&#8209;tab Excel workbook that was emailed to resellers on request. Dealers had to manually calculate their own pricing, and any discount change meant redistributing the file. Staff spent significant time fielding calls from dealers who couldn't find what they needed.</p>
         <p><strong>After —</strong> a hosted dealer pricing tool with real&#8209;time discount logic, profile&#8209;based pricing tiers, product filtering, and a built&#8209;in order builder with export and email summary. Dealers access it directly — no file to download, no call required.</p>
+        <div class="case-shots">
+          <figure class="case-shot">
+            <figcaption class="case-shot-label">Before — Excel workbook</figcaption>
+            <div class="case-shot-frame"><img src="assets/work/ias-before.png" alt="Dealer pricing before: a multi-tab Excel workbook with manual price columns" width="1735" height="808" loading="lazy" decoding="async"></div>
+          </figure>
+          <figure class="case-shot">
+            <figcaption class="case-shot-label">After — Hosted web app</figcaption>
+            <div class="case-shot-frame"><img src="assets/work/ias-after.png" alt="Dealer pricing after: a filterable product catalog with live discount logic and order export" width="1919" height="953" loading="lazy" decoding="async"></div>
+          </figure>
+        </div>
         <blockquote>
           <p>"We've been imagining something like this for years. Our catalog used to live in a spreadsheet we'd email back and forth — now our dealers can filter products, build orders in their own pricing, and send them through electronically. Mike built exactly what we needed."</p>
+          <footer class="case-cite">
+            <span class="case-headshot"><img src="assets/people/fred-hobeyn.webp" alt="Fred Hobeyn" width="160" height="160" loading="lazy" decoding="async"></span>
+            <span class="case-cite-text"><span class="case-name">Fred Hobeyn</span><span class="case-role">Owner — Innovative Aluminum Systems</span></span>
+          </footer>
         </blockquote>
       </div>
 
@@ -180,8 +194,22 @@
         <h3>Order forms: from printed sheet to guided system</h3>
         <p><strong>Before —</strong> the customer order form was a printed Excel sheet with basic formulas. Sales reps filled it in manually, calculated totals by hand, and emailed or faxed it in. The process was error&#8209;prone, slow, and entirely dependent on one person knowing where everything was.</p>
         <p><strong>After —</strong> a hosted web order form with multiple pricing tiers, a pattern selector with live unit pricing, cut&#8209;length calculators, and a print&#8209;ready summary. Orders are submitted electronically — no phone call, no fax, no manual calculation.</p>
+        <div class="case-shots">
+          <figure class="case-shot">
+            <figcaption class="case-shot-label">Before — Printed Excel sheet</figcaption>
+            <div class="case-shot-frame"><img src="assets/work/ondek-before.png" alt="Order form before: a printed Excel sheet with manual product and quantity columns" width="895" height="715" loading="lazy" decoding="async"></div>
+          </figure>
+          <figure class="case-shot">
+            <figcaption class="case-shot-label">After — Web order form</figcaption>
+            <div class="case-shot-frame"><img src="assets/work/ondek-after.png" alt="Order form after: a web-based order form with price tiers, pattern selector, and live totals" width="1546" height="806" loading="lazy" decoding="async"></div>
+          </figure>
+        </div>
         <blockquote>
           <p>"I've been in this industry long enough to be skeptical of tech promises. This wasn't that. Michael took the time to understand our process first, then built something that fits. It's a massive leap forward for us."</p>
+          <footer class="case-cite">
+            <span class="case-headshot"><img src="assets/people/jim-szlabon.webp" alt="Jim Szlabon" width="160" height="160" loading="lazy" decoding="async"></span>
+            <span class="case-cite-text"><span class="case-name">Jim Szlabon</span><span class="case-role">Senior Sales — OnDek Vinyl Worx</span></span>
+          </footer>
         </blockquote>
       </div>
 

style.css

@@ -160,6 +160,21 @@ blockquote {
   border-left: 4px solid var(--steel); border-radius: 0 6px 6px 0;
 }
 blockquote p { margin: 0; font-style: italic; color: var(--ink-soft); }
+.case-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 22px 0 4px; }
+.case-shot { margin: 0; display: flex; flex-direction: column; gap: 8px; }
+.case-shot-label { font-family: Verdana, Geneva, sans-serif; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--steel-deep); font-weight: bold; }
+.case-shot-frame { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--panel); height: 300px; }
+.case-shot-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
+.case-cite { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
+.case-headshot { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 1px solid var(--line); background: var(--paper); }
+.case-headshot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
+.case-cite-text { display: flex; flex-direction: column; line-height: 1.3; }
+.case-name { font-family: Verdana, Geneva, sans-serif; font-size: 0.86rem; font-weight: bold; color: var(--ink); }
+.case-role { font-family: Verdana, Geneva, sans-serif; font-size: 0.76rem; color: var(--ink-soft); }
+@media (max-width: 640px) {
+  .case-shots { grid-template-columns: 1fr; gap: 16px; }
+  .case-shot-frame { height: 210px; }
+}
 
 /* Process */
 .steps { list-style: none; counter-reset: step; margin: 36px 0 0; padding: 0; }