diff --git a/assets/diana_photo-min-1-scaled.webp b/assets/diana_photo-min-1-scaled.webp
new file mode 100644
index 0000000..400b141
Binary files /dev/null and b/assets/diana_photo-min-1-scaled.webp differ
diff --git a/specification/33-frontend-spec.md b/specification/33-frontend-spec.md
new file mode 100644
index 0000000..ef70c0d
--- /dev/null
+++ b/specification/33-frontend-spec.md
@@ -0,0 +1,1393 @@
+# 33 — Frontend Specification
+## HER — Home Enhancement and Renovation
+
+**Version**: 1.0  
+**Phase**: 3 — Themed Specification  
+**Status**: Implementation-ready  
+**Depends on**: `01-requirements.md`, `02-architecture-decisions.md`  
+**Referenced by**: `37-seo-content-spec.md`, `38-lead-capture-spec.md`
+
+---
+
+## Table of Contents
+
+1. [Purpose & Scope](#1-purpose--scope)
+2. [Design Tokens](#2-design-tokens)
+3. [Responsive Breakpoints](#3-responsive-breakpoints)
+4. [Navigation](#4-navigation)
+5. [Page Specifications](#5-page-specifications)
+   - 5.1 [Home (`/`)](#51-home-)
+   - 5.2 [Services Hub (`/services/`)](#52-services-hub-services)
+   - 5.3 [Service Detail Template (`/services/[slug]/`)](#53-service-detail-template-servicesslug)
+   - 5.4 [About Diana (`/about/`)](#54-about-diana-about)
+   - 5.5 [Testimonials (`/testimonials/`)](#55-testimonials-testimonials)
+   - 5.6 [Contact / Request a Quote (`/contact/`)](#56-contact--request-a-quote-contact)
+6. [Component Inventory](#6-component-inventory)
+7. [Animation & Motion](#7-animation--motion)
+8. [Image Treatment](#8-image-treatment)
+9. [Accessibility](#9-accessibility)
+10. [Requirements Traceability](#10-requirements-traceability)
+
+---
+
+## 1. Purpose & Scope
+
+This document specifies the complete frontend design and layout for the HER static website. It is the authoritative reference for page structure, visual language, component behavior, and copy direction. It does not contain implementation code; it constrains and guides the implementation phase.
+
+**Site purpose**: Convert visitors into qualified quote requests through a credible, mobile-first, trustworthy presentation of Diana's handywoman services in the San Francisco Bay Area.
+
+**Primary user flows** (from `00-overview.md`):
+1. Home → scans hero + services → taps "Request a Quote" → submits form.
+2. Service page (organic search) → reads what's included → taps CTA → submits form.
+3. About/Testimonials → validates trust → taps CTA → submits form.
+
+**Technology constraints**: Static HTML/CSS/JS output. No framework assumed. No CMS. Served behind Caddy. (ADR-001)
+
+---
+
+## 2. Design Tokens
+
+All tokens are defined as CSS custom properties on `:root`. Token names are the canonical references throughout this spec. No hardcoded values appear in components.
+
+### 2.1 Color Tokens
+
+| Token | Value | Role |
+|---|---|---|
+| `--col-graphite` | `#252B30` | Headers, nav background, footer background, primary dark surface |
+| `--col-linen` | `#F4F1EB` | Main page background, default section background |
+| `--col-copper` | `#B5622A` | Primary CTA accent, HER wordmark, interactive highlights |
+| `--col-copper-hover` | `#9A4E20` | Button/link hover state; darker variant of copper |
+| `--col-slate` | `#5C7080` | Secondary text, metadata, tags, bylines |
+| `--col-mist` | `#E8ECF0` | Alternating section backgrounds, card surfaces, service card fill |
+| `--col-chalk` | `#EDEDEB` | Borders, dividers, horizontal rules |
+| `--col-ink` | `#1A1A1A` | Body text, primary readable content |
+
+**Contrast compliance** (see §9 Accessibility):
+- `--col-ink` on `--col-linen`: ≥ 12:1 — passes WCAG AA and AAA.
+- `--col-graphite` on `--col-linen`: ≥ 9:1 — passes.
+- `--col-copper` on `--col-linen`: Must be verified; use only for large text or decorative elements if contrast falls below 4.5:1. Copper buttons must have sufficient contrast between white label and `--col-copper` background (verify ≥ 3:1 for large button text).
+- White text on `--col-graphite`: ≥ 10:1 — passes.
+- White text on `--col-copper` CTA band: verify at implementation (white on `#B5622A` is approximately 3.0:1 — meets WCAG AA for large text at ≥ 24px or bold ≥ 18.67px; button label must be at least `--text-base` bold).
+
+### 2.2 Typography
+
+**Font loading**: Both fonts loaded from Google Fonts via a single `<link>` preconnect + stylesheet in `<head>`. Subset to Latin. `font-display: swap` on both.
+
+| Font | Source | Weights / Axes | Usage |
+|---|---|---|---|
+| **Fraunces** | Google Fonts, variable | `opsz` axis, weight 400; style: italic | Display only — H1, H2, hero headline, section headlines, pull quotes, HER wordmark |
+| **DM Sans** | Google Fonts, variable | Weights 400, 500 | All other text: H3, H4, nav, buttons, body, labels, eyebrows, captions |
+
+**Usage rules**:
+- Fraunces is **never** used at sizes smaller than `--text-xl` (22px).
+- Fraunces is **always** set in italic (`font-style: italic`).
+- DM Sans 400 = body, secondary text, form fields.
+- DM Sans 500 = eyebrows, labels, buttons, utility text (uppercase, `letter-spacing: 0.08em`).
+- Do not mix Fraunces and DM Sans on the same line of a heading.
+- Line height for Fraunces headings: 1.1.
+- Line height for DM Sans body: 1.6.
+- Line height for DM Sans small/label: 1.4.
+
+**Eyebrow / Section tag style** (used across all pages):
+- Font: DM Sans 500
+- Size: `--text-xs`
+- Transform: `uppercase`
+- Letter-spacing: `0.08em`
+- Color: `--col-copper`
+- No decorative marks above/below (no rules, no dots) — text only
+
+### 2.3 Type Scale
+
+| Token | rem | px | Role |
+|---|---|---|---|
+| `--text-xs` | 0.75rem | 12px | Captions, tags, card metadata |
+| `--text-sm` | 0.875rem | 14px | Secondary body, form hints, breadcrumbs |
+| `--text-base` | 1rem | 16px | Body copy, paragraph text |
+| `--text-lg` | 1.125rem | 18px | Lead paragraph (first paragraph of section or page hero) |
+| `--text-xl` | 1.375rem | 22px | H4, card headings |
+| `--text-2xl` | 1.75rem | 28px | H3, subsection headings, HER wordmark in nav |
+| `--text-3xl` | 2.25rem | 36px | H2, section headings (mobile) |
+| `--text-4xl` | 3rem | 48px | H1 (mobile), pull quotes |
+| `--text-5xl` | 4rem | 64px | H1 (desktop) |
+
+**Responsive heading rules**:
+- H1 uses `--text-4xl` at mobile, steps up to `--text-5xl` at `lg` breakpoint.
+- H2 uses `--text-3xl` at mobile, stays at `--text-3xl` (no change needed; already impactful).
+- H3 uses `--text-2xl` at all breakpoints.
+- H4 uses `--text-xl` at all breakpoints.
+
+### 2.4 Spacing Scale (8-point grid)
+
+| Token | rem | px | Common use |
+|---|---|---|---|
+| `--space-1` | 0.5rem | 8px | Icon gaps, inline padding, tight label spacing |
+| `--space-2` | 1rem | 16px | Component internal padding, form field gap |
+| `--space-3` | 1.5rem | 24px | Card padding, between stacked elements |
+| `--space-4` | 2rem | 32px | Section sub-element spacing |
+| `--space-6` | 3rem | 48px | Section top/bottom padding (mobile) |
+| `--space-8` | 4rem | 64px | Section top/bottom padding (desktop), hero vertical rhythm |
+| `--space-12` | 6rem | 96px | Large section separators, hero vertical padding (desktop) |
+| `--space-16` | 8rem | 128px | Maximum-impact spacing (above fold hero only) |
+
+**Grid gutters**: `--space-3` (24px) horizontal gutter between columns in all grid layouts.
+
+### 2.5 Other Tokens
+
+| Token | Value | Role |
+|---|---|---|
+| `--radius-sm` | 4px | Input fields, tags, small elements |
+| `--radius-md` | 8px | Cards, buttons |
+| `--radius-lg` | 16px | Image containers, modals |
+| `--shadow-card` | `0 2px 8px rgba(37,43,48,0.08)` | Service cards, testimonial cards, hover lift |
+| `--shadow-card-hover` | `0 6px 20px rgba(37,43,48,0.13)` | Card hover state (elevated) |
+| `--max-width` | 1160px | Maximum content width for all sections |
+| `--nav-height` | 64px (mobile) / 72px (desktop) | Sticky nav height; used for scroll-offset calculations |
+
+---
+
+## 3. Responsive Breakpoints
+
+| Breakpoint | Token | Min-width | Description |
+|---|---|---|---|
+| Mobile (default) | — | 0px | Base styles; single-column |
+| Small | `sm` | 480px | Wider mobile; minor layout adjustments |
+| Medium | `md` | 768px | Tablet; 2-column grids begin |
+| Large | `lg` | 1024px | Desktop; 3-column grids, full nav |
+| Extra large | `xl` | 1160px | Content width cap (`--max-width`) |
+
+All styles are written **mobile-first**: base styles target mobile, breakpoints progressively enhance for larger screens.
+
+---
+
+## 4. Navigation
+
+The navigation bar appears at the top of every page and is **sticky** (fixed to the top on scroll). It has two states: **default** and **scroll-compact**.
+
+### 4.1 Mobile Navigation (below `lg`)
+
+**Default state** (top of page):
+
+```
+┌─────────────────────────────────────────┐
+│  HER (italic copper)   [☎]   [☰]       │  height: 64px
+└─────────────────────────────────────────┘
+```
+
+- **Left**: "HER" wordmark — Fraunces italic, `--text-2xl`, `--col-copper`.
+- **Center-right**: Phone icon — inline SVG phone handset, `--col-graphite`; links to `tel:` URI (click-to-call). Minimum 44×44px touch target.
+- **Right**: Hamburger icon — 3 horizontal lines, `--col-graphite`. Minimum 44×44px touch target. Opens mobile menu overlay.
+- Background: `--col-graphite`.
+- Logo links to `/`.
+
+**Scroll-compact state** (after scrolling down ≥ 80px):
+- Nav height smoothly transitions to 52px.
+- Wordmark + phone icon + hamburger remain visible; no layout change otherwise.
+- Transition: `height 200ms ease`, `background-color 200ms ease` (if background opacity is modified).
+- On scroll-up ≥ 20px: return to default height.
+
+**Mobile menu overlay** (hamburger pressed):
+- Full-screen overlay, `--col-graphite` background, slides down from top (transform: translateY, 250ms ease-out).
+- Close button (×) top-right, same position as hamburger.
+- Links stacked vertically, centered, `--text-2xl`, DM Sans 400, `--col-linen`, with `--space-6` between items:
+  - About
+  - Services
+  - Testimonials
+  - Contact
+  - Request a Quote (copper button, full-width)
+- Phone number and email displayed at the bottom of the overlay, `--col-slate`, `--text-sm`.
+- Pressing any link or the close button dismisses the overlay.
+- Focus trap: keyboard focus must cycle within the overlay while it is open.
+- `aria-expanded` on the hamburger button reflects open/closed state.
+
+### 4.2 Desktop Navigation (at `lg` and above)
+
+```
+┌────────────────────────────────────────────────────────────────────┐
+│  HER (italic copper)    About  Services  Testimonials  Contact    [Request a Quote]  │  height: 72px
+└────────────────────────────────────────────────────────────────────┘
+```
+
+- **Left**: "HER" wordmark — Fraunces italic, `--text-2xl`, `--col-copper`. Links to `/`.
+- **Center**: Nav links — DM Sans 500, `--text-sm`, uppercase, letter-spacing 0.08em, `--col-linen`. Active page link: `--col-copper`. Hover: `--col-copper`. Gap between links: `--space-4`.
+- **Right**: "Request a Quote" button — primary button (copper), `--text-sm`, DM Sans 500, `--radius-md`.
+- Background: `--col-graphite`.
+- Content width constrained to `--max-width`, centered.
+- Nav links: About (`/about/`), Services (`/services/`), Testimonials (`/testimonials/`), Contact (`/contact/`).
+
+**Scroll-compact state** (desktop):
+- Height transitions from 72px to 60px.
+- Logo scales slightly smaller (transform: scale(0.9)).
+- All links remain visible.
+
+### 4.3 Nav Accessibility
+
+- `<nav>` element with `aria-label="Main navigation"`.
+- Landmark nav is the first interactive region after `<body>`.
+- Skip link: `<a href="#main-content" class="skip-link">Skip to main content</a>` — positioned before the nav, visible only on focus. Style: copper background, white text, `--radius-sm`, top-left corner.
+- Current page link has `aria-current="page"`.
+
+---
+
+## 5. Page Specifications
+
+Each page shares the sticky `NavBar` and `Footer` components. The `<main>` element receives `id="main-content"` (skip link target). All sections are padded `--space-6` top/bottom on mobile, `--space-12` on desktop unless noted otherwise.
+
+---
+
+### 5.1 Home (`/`)
+
+**Page goal**: Establish trust, convey service breadth and local relevance, drive quote requests.  
+**FR coverage**: FR-1, FR-6, FR-7, FR-9, FR-10, FR-15, FR-16, FR-17, FR-18 | NFR-1, NFR-2
+
+---
+
+#### Section 1 — Navigation
+
+Sticky nav as specified in §4.
+
+---
+
+#### Section 2 — Hero
+
+**Background**: `--col-linen`  
+**Padding**: `--space-8` top / `--space-6` bottom on mobile; `--space-12` top / `--space-12` bottom on desktop.
+
+**Mobile wireframe**:
+
+```
+╔════════════════════════════════════╗
+║  [HER]           [☎]       [☰]   ║  ← sticky nav (64px)
+╠════════════════════════════════════╣
+║                                    ║
+║  SAN FRANCISCO HANDYWOMAN          ║  ← SectionEyebrow
+║                                    ║
+║  Fix it right.                     ║
+║  The first time.                   ║  ← H1: Fraunces italic, --text-4xl
+║                                    ║
+║  Precise, reliable, and easy to    ║
+║  work with — Diana brings          ║
+║  aerospace-level project           ║  ← Lead: DM Sans 400, --text-lg
+║  coordination to your home         ║     color: --col-ink
+║  improvement project.              ║
+║                                    ║
+║  ┌──────────────────────────────┐  ║
+║  │       Request a Quote        │  ║  ← Button (primary), full-width mobile
+║  └──────────────────────────────┘  ║
+║                                    ║
+║  ☎  (415) XXX-XXXX                ║  ← tel: link, --col-slate, --text-base
+║                                    ║
+╠════════════════════════════════════╣
+║  ┌──────────────────────────────┐  ║
+║  │                              │  ║
+║  │                              │  ║
+║  │    diana_photo-min-1-        │  ║  ← 3:4 aspect ratio, object-fit: cover
+║  │    scaled.webp               │  ║     loading="eager"
+║  │                              │  ║     border-radius: --radius-lg
+║  │  (Diana on sailboat,         │  ║     full bleed to section edges on mobile
+║  │   Golden Gate Bridge)        │  ║
+║  │                              │  ║
+║  └──────────────────────────────┘  ║
+║                                    ║
+╚════════════════════════════════════╝
+```
+
+**Desktop wireframe** (`lg` and above, 2-column layout):
+
+```
+╔══════════════════════════════════════════════════════════════════╗
+║ [HER italic]    About  Services  Testimonials  Contact  [Quote] ║  ← nav (72px)
+╠══════════════════════════════════════════════════════════════════╣
+║                                         ║                        ║
+║  SAN FRANCISCO HANDYWOMAN               ║   ╔════════════════╗  ║
+║                                         ║   ║                ║  ║
+║  Fix it right.                          ║   ║                ║  ║
+║  The first time.                        ║   ║  diana_photo   ║  ║
+║                                         ║   ║  -min-1-       ║  ║
+║  Precise, reliable, and easy to work    ║   ║  scaled.webp   ║  ║
+║  with — Diana brings aerospace-level    ║   ║                ║  ║
+║  project coordination to your home      ║   ║  1:1 aspect    ║  ║
+║  improvement project.                   ║   ║  ratio, square ║  ║
+║                                         ║   ║  --radius-lg   ║  ║
+║  [ Request a Quote ]   ☎ (415) XXX-XXXX║   ║                ║  ║
+║                                         ║   ╚════════════════╝  ║
+║  ←────── ~58% content column ──────────→←── ~42% image col ──→ ║
+╚══════════════════════════════════════════════════════════════════╝
+```
+
+**Layout details**:
+- Desktop: CSS grid, 2 columns, approximately `1fr 0.72fr` ratio. Image column is right-aligned.
+- The desktop image container is a fixed 1:1 (square) aspect-ratio box within the right column. Image fills it with `object-fit: cover`, positioned center-center.
+- On mobile, text stack appears first (top), image appears below, full section width, 3:4 aspect ratio.
+- CTA button on desktop is inline (auto width), followed by the phone number as a secondary `tel:` link on the same line. Phone link: `--col-slate`, DM Sans 400.
+
+**Copy** (exact):
+
+| Element | Content |
+|---|---|
+| Eyebrow | `SAN FRANCISCO HANDYWOMAN` |
+| H1 | `Fix it right. The first time.` |
+| Lead | `Precise, reliable, and easy to work with — Diana brings aerospace-level project coordination to your home improvement project.` |
+| CTA label | `Request a Quote` |
+| Secondary link | Phone number (Diana's actual phone, formatted as `(415) XXX-XXXX`) |
+
+**Image**:
+- File: `assets/diana_photo-min-1-scaled.webp`
+- Alt: `"Diana, San Francisco handywoman, aboard a sailboat with the Golden Gate Bridge in the background"`
+- `loading="eager"` (above the fold on all viewports)
+- `fetchpriority="high"`
+
+---
+
+#### Section 3 — Services Grid
+
+**Background**: `--col-mist`  
+**Section eyebrow**: `OUR SERVICES`  
+**Section heading (H2)**: `"What Diana can do for you"` — Fraunces italic, `--text-3xl`, `--col-graphite`  
+**Layout**: 2-column grid on mobile/`sm`; 3-column grid at `md` and above. Gap: `--space-3`. 9 cards total.
+
+Each card uses the `ServiceCard` component (see §6). Cards are arranged left-to-right, top-to-bottom, in the order below.
+
+**Service card definitions**:
+
+| # | Service Name | URL | Thumbnail | One-line description |
+|---|---|---|---|---|
+| 1 | Painting | `/services/painting/` | `painting-1-min.png` | Interior and exterior painting, trim, and cabinet refinishing. |
+| 2 | Tile Setting | `/services/tile-setting/` | `tile-setting-1-min.png` | Kitchen, bathroom, entryway, and patio tile installation. |
+| 3 | Drywall & Sheetrocking | `/services/drywall/` | `sheetrocking-1-min.png` | Patching, finishing, and full sheetrocking to paint-ready surfaces. |
+| 4 | Minor Plumbing | `/services/plumbing/` | `plumbing-2-min.png` | Faucets, toilets, showers, and under-sink connections. |
+| 5 | Minor Electrical | `/services/electrical/` | `electrical-1-min.jpg` | Fixtures, ceiling fans, outlets, and dimmer switches. |
+| 6 | Carpentry & Mounting | `/services/carpentry-and-mounting/` | *(see note)* | Furniture assembly, TV mounting, shelving, and trim work. |
+| 7 | Flooring & Wood Refinishing | `/services/flooring/` | `wood-refinishing-1-min.png` | Hardwood refinishing, deck restoration, and new flooring. |
+| 8 | Security & Safety Equipment | `/services/security-safety/` | `grab-bar-min.png` | Grab bars, lock upgrades, security cameras, and safety installs. |
+| 9 | Boat Work | `/services/boat-work/` | `boat-work-min-scaled.jpg` | Marine woodwork, painting, and hardware for Bay Area boats. |
+
+> **Note — Card 6 (Carpentry & Mounting)**: No dedicated carpentry image assets exist in the current asset library. Use `wood-refinishing-3-min.png` as a placeholder for v1, and flag with Diana for a dedicated photo shoot. Document as a known gap.
+
+**Section footer**: A "View all services →" text link (DM Sans 500, `--col-copper`) centered below the grid, linking to `/services/`. This is supplementary — all 9 services are already shown.
+
+---
+
+#### Section 4 — Why HER (Trust Pillars)
+
+**Background**: `--col-linen`  
+**Section eyebrow**: `WHY HER`  
+**Section heading (H2)**: `"Built on trust. Delivered with precision."` — Fraunces italic, `--text-3xl`, `--col-graphite`  
+**Layout**: Single column on mobile; 3-column at `md` and above. Each pillar uses the `TrustPillar` component.
+
+**Pillar definitions**:
+
+| Pillar name | Icon | Body copy (2 sentences) |
+|---|---|---|
+| Reliable & Accountable | Shield with checkmark (inline SVG, `--col-copper`, 40×40px) | Diana shows up when she says she will and finishes what she starts. No ghosting, no last-minute cancellations — just dependable work, every time. |
+| Project Coordination | Clipboard with checklist (inline SVG, `--col-copper`, 40×40px) | With an aerospace background managing complex multi-phase projects, Diana coordinates materials, schedules, and trades on your behalf. She keeps your project moving and your stress low. |
+| Honest Communication | Speech bubble with checkmark (inline SVG, `--col-copper`, 40×40px) | You will know the scope, the timeline, and the price before any work begins. If anything changes, Diana tells you immediately — no surprises on your invoice. |
+
+**Icon treatment**: Monochromatic, line-style SVG icons. `--col-copper` stroke. Icons sit above the pillar name; name is DM Sans 500 `--text-xl` `--col-graphite`; body is DM Sans 400 `--text-base` `--col-ink`. Each pillar is center-aligned on mobile, left-aligned at `md` and above.
+
+---
+
+#### Section 5 — Testimonials Strip
+
+**Background**: `--col-mist`  
+**Section eyebrow**: `CLIENT TESTIMONIALS`  
+**Section heading (H2)**: `"Trusted by San Francisco homeowners"` — Fraunces italic, `--text-3xl`, `--col-graphite`  
+**Layout**: Single column on mobile; 2-column at `md` and above.
+
+Displays exactly 2 featured testimonials using the `TestimonialCard` component:
+
+| # | Client name | Attribution / City |
+|---|---|---|
+| 1 | Wendy Brummer | San Francisco, CA |
+| 2 | David Snyder | San Francisco, CA |
+
+> **Copy direction**: Use the testimonial text verbatim from the existing testimonials source (see FR-13, `01-requirements.md`). Do not paraphrase.
+
+**Section footer**: A "Read all testimonials →" text link (DM Sans 500, `--col-copper`) centered below the cards, linking to `/testimonials/`.
+
+---
+
+#### Section 6 — Service Area Callout
+
+**Background**: `--col-linen`  
+**Layout**: Single column, centered, max-width 720px (narrower than `--max-width` for readability).  
+**Section eyebrow**: `SERVICE AREA`  
+**Heading (H2)**: `"Serving San Francisco and the Bay Area"` — Fraunces italic, `--text-3xl`, `--col-graphite`  
+**Lead text**: `"Diana serves San Francisco and surrounding communities within a 50-mile radius. If you are unsure whether you are in the service area, reach out — she will let you know."` — DM Sans 400, `--text-lg`, `--col-ink`
+
+**City/area list**: Displayed as an inline comma-separated list or a compact 2-column flex-wrap pill list (DM Sans 500, `--text-sm`, `--col-slate`):
+
+San Francisco · Oakland · Berkeley · Marin County · Daly City · San Mateo · Palo Alto · Fremont · Hayward · Walnut Creek · Concord · Alameda · Napa · and more
+
+**Cross-reference**: FR-9, NFR-1.
+
+---
+
+#### Section 7 — Final CTA Band
+
+Uses the `CTABand` component.
+
+**Background**: `--col-copper`  
+**Text color**: `#FFFFFF` (white)  
+**Padding**: `--space-8` top/bottom on mobile; `--space-12` top/bottom on desktop.  
+**Layout**: Centered, single column, max-width 640px.
+
+| Element | Content | Style |
+|---|---|---|
+| Heading (H2) | `"Ready to get started?"` | Fraunces italic, `--text-3xl`, white |
+| Subheading | `"Let's talk about your project."` | DM Sans 400, `--text-lg`, white, opacity 0.9 |
+| CTA Button | `Request a Quote` | Button (ghost-white variant): white background, `--col-copper` text, `--radius-md`; hover: white bg darkens slightly (rgba(255,255,255,0.9)), copper text |
+| Button link | `/contact/` | — |
+
+---
+
+#### Section 8 — Footer
+
+Uses the `Footer` component.
+
+**Background**: `--col-graphite`  
+**Text color**: `--col-linen` (primary), `--col-slate` (secondary/metadata)  
+**Padding**: `--space-8` top/bottom.
+
+**Mobile layout** (single column, left-aligned):
+
+```
+[HER wordmark — Fraunces italic, --text-2xl, --col-copper]
+
+About · Services · Testimonials · Contact
+
+☎ (415) XXX-XXXX
+✉ diana@example.com
+
+© 2026 Home Enhancement and Renovation — HER. All rights reserved.
+```
+
+**Desktop layout** (2-column):
+- Left column: HER wordmark + copyright line.
+- Right column: nav links (inline) + contact info (phone, email).
+
+**Nav links in footer**: DM Sans 400, `--text-sm`, `--col-linen`. Hover: `--col-copper`. Separated by `·` or `|` character.
+
+**Contact links**: Phone as `tel:` link, email as `mailto:` link. Both `--col-linen`. Hover: `--col-copper`.
+
+**Copyright**: DM Sans 400, `--text-xs`, `--col-slate`. Exact text: `© 2026 Home Enhancement and Renovation — HER. All rights reserved.`
+
+**FR coverage**: FR-7 (secondary contact in footer), FR-15 (full brand name in footer).
+
+---
+
+### 5.2 Services Hub (`/services/`)
+
+**Page goal**: Provide an indexed overview of all 9 services; funnel visitors to the right detail page.  
+**FR coverage**: FR-10, NFR-3, NFR-4
+
+**`<title>`**: Deferred to `37-seo-content-spec.md`.
+
+#### Section 1 — Nav
+
+Sticky nav, as specified in §4. Active link: "Services".
+
+#### Section 2 — Page Hero
+
+**Background**: `--col-graphite`  
+**Text color**: white / `--col-linen`  
+**Padding**: `--space-8` top/bottom.  
+**Layout**: Single column, centered, max-width 720px.
+
+| Element | Content | Style |
+|---|---|---|
+| Eyebrow | `HANDYWOMAN SERVICES` | SectionEyebrow, `--col-copper` |
+| H1 | `"Services"` | Fraunces italic, `--text-4xl` mobile / `--text-5xl` desktop, white |
+| Lead | `"Diana offers a wide range of home improvement services in San Francisco and the Bay Area. Browse below and tap through to learn what's included in each service — or request a quote directly."` | DM Sans 400, `--text-lg`, `--col-linen` opacity 0.85 |
+
+No hero image on this page. The dark `--col-graphite` hero provides visual contrast with the card grid below.
+
+#### Section 3 — Services Grid
+
+**Background**: `--col-linen`  
+**Padding**: `--space-8` top/bottom.  
+**Layout**: 2-column at mobile/`sm`; 3-column at `md` and above. Gap: `--space-3`. 9 `ServiceCard` components.
+
+Cards on the hub page have **extended description** (1–2 sentences instead of 1 line):
+
+| Service | Extended description |
+|---|---|
+| Painting | Interior and exterior painting, cabinet refinishing, trim work, and deck staining. Clean, precise results on every surface. |
+| Tile Setting | Kitchen backsplashes, bathroom tile, shower surrounds, entryways, and patios — all tile types and rooms. Over 200 satisfied tile customers. |
+| Drywall & Sheetrocking | Full sheetrocking, patching, skim coating, sanding, and texture matching — surfaces left paint-ready. |
+| Minor Plumbing | Faucet, toilet, and shower fixture replacement; garbage disposal installation; and minor leak repair. |
+| Minor Electrical | Light fixture and ceiling fan installation, outlet and switch replacement, dimmer installation, and smoke detector setup. |
+| Carpentry & Mounting | Furniture assembly, TV and shelf mounting, cabinet hardware repair, crown molding, and door adjustment. |
+| Flooring & Wood Refinishing | Hardwood floor refinishing, deck and stair restoration, laminate and vinyl installation, and cabinet refinishing. |
+| Security & Safety Equipment | ADA-compliant grab bars, lock upgrades, security camera installation, and window security reinforcement. |
+| Boat Work | Marine woodwork, painting, hardware installation, and teak deck maintenance for Bay Area boats. |
+
+#### Section 4 — Service Area + CTA
+
+Same service area callout as Homepage §6 (reuses the same component, same copy). Followed immediately by the CTABand (same as Homepage §7).
+
+#### Section 5 — Footer
+
+As specified in §4/5.1.
+
+---
+
+### 5.3 Service Detail Template (`/services/[slug]/`)
+
+**Purpose**: SEO-targeted landing page for each of the 9 services. Content is unique per service (see table in §5.3.6). This document defines the template structure; per-service content is specified in §5.3.6.  
+**FR coverage**: FR-11, NFR-3, NFR-4 | ADR-004
+
+#### Section 1 — Nav
+
+Sticky nav. Active link: "Services".
+
+#### Section 2 — Breadcrumb
+
+Immediately below nav, inside a `<nav aria-label="Breadcrumb">`.
+
+Format: `Home › Services › [Service Name]`
+
+| Segment | Link | Style |
+|---|---|---|
+| Home | `/` | DM Sans 400, `--text-sm`, `--col-copper` |
+| `›` separator | — | `--col-chalk`, `--text-sm` |
+| Services | `/services/` | DM Sans 400, `--text-sm`, `--col-copper` |
+| `›` separator | — | `--col-chalk`, `--text-sm` |
+| [Service Name] | No link (current page) | DM Sans 500, `--text-sm`, `--col-ink`, `aria-current="page"` |
+
+**Background**: `--col-linen`. Padding: `--space-2` top/bottom.
+
+#### Section 3 — Service Hero
+
+**Background**: `--col-linen`  
+**Padding**: `--space-8` top/bottom on mobile; `--space-12` top/bottom on desktop.  
+**Layout**: Single column (centered), max-width 800px.
+
+| Element | Content | Style |
+|---|---|---|
+| Eyebrow | `[CATEGORY LABEL — e.g. "HOME IMPROVEMENT SERVICE"]` | SectionEyebrow |
+| H1 | Service name (see §5.3.6) | Fraunces italic, `--text-4xl` mobile / `--text-5xl` desktop, `--col-graphite` |
+| Lead | One-paragraph description (see §5.3.6) | DM Sans 400, `--text-lg`, `--col-ink`, max 3 sentences |
+| CTA Button | `Request a Quote` | Button (primary), links to `/contact/` |
+
+#### Section 4 — Image Gallery
+
+**Background**: `--col-mist`  
+**Padding**: `--space-8` top/bottom.  
+**Layout**: 2 images side-by-side on mobile (`sm`); 3 images in a row at `md` and above.
+
+Uses the `ImageGallery` component:
+- All images: 4:3 aspect ratio, `object-fit: cover`, `--radius-md`, `loading="lazy"`.
+- No captions required (decorative context).
+- Images separated by `--space-2` gap.
+- Full bleed to section edges on mobile; constrained to `--max-width` on desktop.
+- Each image has descriptive alt text (see §5.3.6 per service).
+
+> On mobile, show 2 images side-by-side if 3 are available; do not use a horizontal scroll carousel. The third image is hidden on mobile (`display: none` below `md`) to avoid a cramped 3-up on small screens.
+
+#### Section 5 — What's Included
+
+**Background**: `--col-linen`  
+**Padding**: `--space-8` top/bottom.  
+**Section heading (H2)**: `"What's included"` — Fraunces italic, `--text-3xl`, `--col-graphite`.  
+**Layout**: Single column, max-width 640px, left-aligned.
+
+Bulleted list (`<ul>`) of specific tasks (see §5.3.6 per service):
+- Bullets: custom `--col-copper` filled circle (CSS `::before` pseudo-element), not browser default.
+- List item text: DM Sans 400, `--text-base`, `--col-ink`.
+- Line height: 1.6.
+- Vertical gap between items: `--space-2`.
+
+**Note box** (below the list, optional): A short `<aside>` box in `--col-mist` background, `--radius-md`, `--space-3` padding, with copy like: `"Not sure if your project is in scope? Describe it in the quote request and Diana will follow up."` — DM Sans 400, `--text-sm`, `--col-slate`.
+
+#### Section 6 — Service Area Mention
+
+**Background**: `--col-mist`  
+**Layout**: Single column, max-width 640px, centered.
+
+Simple inline paragraph — no heading:
+
+> `"Diana serves [Service Name] customers throughout San Francisco and within a 50-mile radius of the city, including Oakland, Berkeley, Marin County, and the Peninsula. Request a quote to confirm your area."` — DM Sans 400, `--text-base`, `--col-slate`, centered.
+
+**FR coverage**: FR-9.
+
+#### Section 7 — Repeated CTA
+
+Same `CTABand` as Homepage §7 (copper background, white text, Request a Quote button).
+
+#### Section 8 — Footer
+
+As specified in §4/5.1.
+
+---
+
+#### 5.3.6 Per-Service Content Table
+
+> **Asset path prefix**: `assets/`. All image paths are relative to site root.
+
+---
+
+**Painting** · `/services/painting/`
+
+| Field | Content |
+|---|---|
+| H1 | `Painting` |
+| Eyebrow | `PAINTING SERVICES — SAN FRANCISCO` |
+| Lead | `From single rooms to full interiors and exteriors, Diana delivers clean, precise paint jobs that transform your San Francisco home. She handles prep, application, and cleanup — so you get professional results without the hassle.` |
+| Gallery images | `painting-1-min.png`, `painting-3-min.jpg`, `painting-5-min.jpg` |
+| Gallery alt text | "Interior wall freshly painted in warm white — San Francisco home" · "Exterior trim painting on a Victorian-style home" · "Painted kitchen cabinets in soft grey" |
+| What's included | Interior wall painting (single rooms or whole-home) · Exterior painting and touch-ups · Trim, baseboard, and door painting · Cabinet painting and refinishing · Deck and fence painting and staining · Texture and color matching |
+
+---
+
+**Tile Setting** · `/services/tile-setting/`
+
+| Field | Content |
+|---|---|
+| H1 | `Tile Setting` |
+| Eyebrow | `TILE SETTING SERVICES — SAN FRANCISCO` |
+| Lead | `With over 200 tile installation customers, Diana brings precision and a practiced eye to every kitchen, bathroom, and entryway project. Whether you need a full shower surround or a single backsplash, the result is level, clean, and built to last.` |
+| Gallery images | `tile-setting-1-min.png`, `tile-setting-3-min.png`, `tile-setting-5-min.png` |
+| Gallery alt text | "Newly installed ceramic tile backsplash in a San Francisco kitchen" · "Bathroom floor tile set in a herringbone pattern" · "Outdoor patio tile installation" |
+| What's included | Kitchen backsplash installation · Bathroom floor and wall tile · Shower surround tile and waterproofing · Entryway and hallway tile · Patio and outdoor tile · Grouting, caulking, and sealing · Tile removal and replacement |
+
+---
+
+**Drywall & Sheetrocking** · `/services/drywall/`
+
+| Field | Content |
+|---|---|
+| H1 | `Drywall & Sheetrocking` |
+| Eyebrow | `DRYWALL SERVICES — SAN FRANCISCO` |
+| Lead | `From patching a nail hole to installing new drywall in a remodeled room, Diana produces smooth, paint-ready surfaces that look like they were never touched. All patching and finishing work is matched to existing texture.` |
+| Gallery images | `sheetrocking-1-min.png`, `sheetrocking-2-min.png`, `sheetrocking-3-min.png` |
+| Gallery alt text | "Freshly installed drywall in a San Francisco home renovation" · "Drywall patch blended seamlessly into existing wall" · "Skim-coated wall surface ready for paint" |
+| What's included | New drywall installation · Drywall patching (holes, cracks, water damage) · Full sheetrocking and taping · Sanding and skim coating · Texture matching (smooth, orange peel, knockdown) · Paint-ready surface prep |
+
+---
+
+**Minor Plumbing** · `/services/plumbing/`
+
+| Field | Content |
+|---|---|
+| H1 | `Minor Plumbing` |
+| Eyebrow | `PLUMBING SERVICES — SAN FRANCISCO` |
+| Lead | `Diana handles the minor plumbing repairs and installations that keep your home running — faucet replacements, toilet installs, shower fixtures, and more. She works cleanly, tests every connection, and leaves no drips.` |
+| Gallery images | `plumbing-2-min.png`, `plumbing-4-min.png`, `plumbing-6-min.png` |
+| Gallery alt text | "New kitchen faucet installed under granite countertop" · "Bathroom vanity plumbing connections" · "Shower fixture replacement in a tiled shower" |
+| What's included | Faucet and fixture replacement · Toilet installation and repair · Shower head and valve replacement · Under-sink plumbing connections · Garbage disposal installation · Minor leak detection and repair |
+
+---
+
+**Minor Electrical** · `/services/electrical/`
+
+| Field | Content |
+|---|---|
+| H1 | `Minor Electrical` |
+| Eyebrow | `ELECTRICAL SERVICES — SAN FRANCISCO` |
+| Lead | `Diana installs and replaces lighting fixtures, ceiling fans, outlets, and switches — the kind of focused electrical work that makes a real difference in how a room looks and functions, done safely and up to code.` |
+| Gallery images | `electrical-1-min.jpg`, `electrical-3-min.jpg`, `electrical-5-min.jpg` |
+| Gallery alt text | "Modern pendant light fixture installed in a San Francisco dining room" · "Ceiling fan installation in a bedroom" · "New dimmer switch installed on painted wall" |
+| What's included | Light fixture installation and replacement · Ceiling fan installation · Outlet and switch replacement · Dimmer switch installation · Under-cabinet and accent lighting · Smoke and carbon monoxide detector installation |
+
+---
+
+**Carpentry & Mounting** · `/services/carpentry-and-mounting/`
+
+| Field | Content |
+|---|---|
+| H1 | `Carpentry & Mounting` |
+| Eyebrow | `CARPENTRY & MOUNTING — SAN FRANCISCO` |
+| Lead | `From assembling flat-pack furniture to mounting a 75-inch TV securely on the wall, Diana handles the installation and carpentry details that turn a space from a work-in-progress to a finished home.` |
+| Gallery images | **No dedicated assets exist.** Use `wood-refinishing-3-min.png` as placeholder for v1. Flag for Diana to supply 2–3 original carpentry/mounting photos before launch. |
+| Gallery alt text (placeholder) | "Wood carpentry detail — placeholder until dedicated photo is supplied" |
+| What's included | Flat-pack furniture assembly (IKEA, and other brands) · TV wall mounting (all wall types and screen sizes) · Shelf, bookcase, and storage installation · Cabinet hardware, hinge, and door adjustment · Crown molding and trim installation · Door installation, hanging, and adjustment |
+
+> **Open item**: Carpentry & Mounting page requires original photography. This is a known gap. Add to pre-launch checklist.
+
+---
+
+**Flooring & Wood Refinishing** · `/services/flooring/`
+
+| Field | Content |
+|---|---|
+| H1 | `Flooring & Wood Refinishing` |
+| Eyebrow | `FLOORING SERVICES — SAN FRANCISCO` |
+| Lead | `Diana brings out the natural beauty of your home's wood surfaces — refinishing hardwood floors, restoring decks and stairs, installing new flooring, and refinishing cabinets. The result is a surface that looks and feels brand new.` |
+| Gallery images | `wood-refinishing-1-min.png`, `wood-refinishing-3-min.png`, `wood-refinishing-5-min.png` |
+| Gallery alt text | "Refinished hardwood floors gleaming in natural light" · "Restored wood deck with fresh finish" · "Refinished wood staircase in a San Francisco home" |
+| What's included | Hardwood floor sanding and refinishing · Deck and stair sanding and refinishing · Cabinet and furniture wood refinishing · Laminate and vinyl plank flooring installation · Flooring repairs, patching, and touch-ups · Surface prep and sealing |
+
+---
+
+**Security & Safety Equipment** · `/services/security-safety/`
+
+| Field | Content |
+|---|---|
+| H1 | `Security & Safety Equipment` |
+| Eyebrow | `SAFETY & SECURITY SERVICES — SAN FRANCISCO` |
+| Lead | `Diana installs safety and security upgrades that help you feel confident and protected at home — from ADA-compliant grab bars for aging-in-place to lock upgrades, cameras, and reinforced windows.` |
+| Gallery images | `grab-bar-min.png`, `security-garage-door-min.png`. A third image is needed; flag as open item. |
+| Gallery alt text | "ADA-compliant grab bar installed in a bathroom — aging-in-place safety" · "Garage door hardware and security upgrade" |
+| What's included | Grab bar installation (ADA-compliant placement guidance) · Window and door lock upgrades · Security camera installation and basic setup · Window security mesh and reinforcement bars · Garage door hardware maintenance and adjustment · Door reinforcement and deadbolt installation |
+
+> **Open item**: Security & Safety page requires a third gallery photo. Request from Diana or substitute with a grab bar in a different setting.
+
+---
+
+**Boat Work** · `/services/boat-work/`
+
+| Field | Content |
+|---|---|
+| H1 | `Boat Work` |
+| Eyebrow | `MARINE SERVICES — SAN FRANCISCO BAY AREA` |
+| Lead | `Diana brings the same precision and attention to detail she applies to homes to Bay Area boats — marine woodwork, painting, hardware installation, and teak deck maintenance. If your boat is docked in the Bay Area, she can help.` |
+| Gallery images | `boat-work-min-scaled.jpg`. Two additional images are needed; flag as open item. |
+| Gallery alt text | "Boat deck woodwork and maintenance — San Francisco Bay Area marine services" |
+| What's included | Marine woodwork repairs and finishing · Boat painting and gel coat touch-up · Hardware installation and replacement · Teak deck cleaning, maintenance, and refinishing · Interior marine finishing and trim · Bilge and storage area work |
+
+> **Open item**: Boat Work page requires 2 additional gallery photos. Request from Diana.
+
+---
+
+### 5.4 About Diana (`/about/`)
+
+**Page goal**: Build personal trust, humanize the brand, communicate credentials.  
+**FR coverage**: FR-12, FR-16, FR-17, FR-18
+
+#### Section 1 — Nav
+
+Sticky nav. Active link: "About".
+
+#### Section 2 — Page Hero
+
+**Background**: `--col-linen`  
+**Layout**: Single column on mobile; 2-column (image left, text right) at `md` and above. Same grid ratio as homepage hero (~58% text, ~42% image).
+
+| Element | Content | Style |
+|---|---|---|
+| Eyebrow | `ABOUT DIANA` | SectionEyebrow |
+| H1 | `"Meet Diana"` | Fraunces italic, `--text-4xl` mobile / `--text-5xl` desktop, `--col-graphite` |
+| Lead | `"Handywoman. Project coordinator. Aerospace veteran. Diana brings precision and reliability to every job — and an honest, easy-to-work-with approach that sets her apart."` | DM Sans 400, `--text-lg`, `--col-ink` |
+
+**Hero image**:
+- File: `assets/diana_photo-min-1-scaled.webp`
+- Alt: `"Diana, San Francisco handywoman, aboard a sailboat with the Golden Gate Bridge in the background"`
+- 3:4 aspect ratio on mobile (below text); 1:1 on desktop (left column).
+- `loading="eager"`, `fetchpriority="high"`.
+
+#### Section 3 — Bio
+
+**Background**: `--col-linen`  
+**Layout**: Single column, max-width 720px, left-aligned.
+
+**Copy direction** (to be written by Diana, lightly edited for web):
+- Paragraph 1: Origin story — what led Diana to handywoman work. Mention aerospace background and what transferable skills she brings (precision, coordination, project management).
+- Paragraph 2: Scale of experience — specifically call out 200+ tile installation customers, multimillion-dollar aerospace projects managed. Make these numbers human: `"Over 200 tile installation customers later..."` not a bullet point list.
+- Paragraph 3: What makes her different — the female handywoman angle, the "easy to work with" reputation, how she communicates and handles scope changes.
+- Paragraph 4: San Francisco connection — why she loves this city, where she works, community aspect.
+
+Each paragraph: DM Sans 400, `--text-base`, `--col-ink`, line-height 1.7.
+
+#### Section 4 — Pull Quote
+
+**Background**: `--col-mist`  
+**Padding**: `--space-12` top/bottom.  
+**Layout**: Single column, centered, max-width 800px.
+
+```
+   ─────────────────────────────────────
+   "Over 200 tile installation customers.
+    Multimillion-dollar aerospace projects.
+    Now she's working on yours."
+   ─────────────────────────────────────
+```
+
+| Element | Style |
+|---|---|
+| Quote text | Fraunces italic, `--text-3xl` mobile / `--text-4xl` desktop, `--col-graphite`, centered |
+| Top rule | 2px solid `--col-chalk`, full width |
+| Bottom rule | 2px solid `--col-chalk`, full width |
+| Padding (above/below text) | `--space-6` |
+
+No attribution line on this pull quote — it is a brand/proof statement, not a client testimonial.
+
+#### Section 5 — Proof Points Grid
+
+**Background**: `--col-linen`  
+**Padding**: `--space-8` top/bottom.  
+**Layout**: 3-column at `sm` and above; single column on mobile.
+
+3 stat-style proof points (not numbered, icon-led):
+
+| Icon | Headline | Subtext |
+|---|---|---|
+| Tool / wrench SVG | 200+ Tile Customers | Installations across San Francisco homes |
+| Aerospace badge SVG | Aerospace Team Lead | Multimillion-dollar project coordination |
+| Star SVG | 4-Star Reviews | From real clients throughout the Bay Area |
+
+Headline: DM Sans 500, `--text-xl`, `--col-graphite`.  
+Subtext: DM Sans 400, `--text-sm`, `--col-slate`.  
+Icon: `--col-copper`, 36×36px inline SVG, centered above headline.
+
+#### Section 6 — CTA
+
+Same `CTABand` component as Homepage §7 (copper background, "Ready to get started?" heading, "Request a Quote" button).
+
+#### Section 7 — Footer
+
+As specified in §4/5.1.
+
+---
+
+### 5.5 Testimonials (`/testimonials/`)
+
+**Page goal**: Social proof — validate trust for hesitant visitors.  
+**FR coverage**: FR-13, FR-17
+
+#### Section 1 — Nav
+
+Sticky nav. Active link: "Testimonials".
+
+#### Section 2 — Page Hero
+
+**Background**: `--col-graphite`  
+**Text color**: White / `--col-linen`  
+**Padding**: `--space-8` top/bottom.  
+**Layout**: Single column, centered, max-width 640px.
+
+| Element | Content | Style |
+|---|---|---|
+| Eyebrow | `CLIENT TESTIMONIALS` | SectionEyebrow, `--col-copper` |
+| H1 | `"What clients say"` | Fraunces italic, `--text-4xl` mobile / `--text-5xl` desktop, white |
+| Lead | `"Diana's clients speak for themselves. Here's what real San Francisco homeowners say about working with HER."` | DM Sans 400, `--text-lg`, `--col-linen` opacity 0.85 |
+
+#### Section 3 — All Testimonials
+
+**Background**: `--col-linen`  
+**Padding**: `--space-8` top/bottom.  
+**Layout**: Single column on mobile; 2-column at `md` and above. Gap: `--space-4`.
+
+All 4 testimonials are displayed using the `TestimonialCard` component.
+
+| # | Client | City | Notes |
+|---|---|---|---|
+| 1 | Wendy Brummer | San Francisco, CA | Featured (appears first) |
+| 2 | E. Blake Davis | San Francisco, CA | — |
+| 3 | David Snyder | San Francisco, CA | Featured (appears in Homepage strip) |
+| 4 | Alice L. Harron | San Francisco, CA | — |
+
+**Ordering**: Wendy Brummer and David Snyder appear first (positions 1 and 2) as the highest-impact testimonials. E. Blake Davis and Alice L. Harron follow (positions 3 and 4).
+
+> **Copy**: Use testimonial text verbatim from the source (`spotlighthis.com/testimonials/`). Do not paraphrase or summarize.
+
+**TestimonialCard anatomy** (on this page, full width):
+- Opening quotation mark: `"` — Fraunces italic, 4rem, `--col-copper`, leading visually.
+- Quote body: DM Sans 400, `--text-base`, `--col-ink`, line-height 1.7.
+- Attribution line: `— [Name], [City]` — DM Sans 500, `--text-sm`, `--col-slate`. City in `--col-slate` with lighter weight if multi-part.
+- Card surface: `--col-mist`, `--shadow-card`, `--radius-md`, `--space-4` padding.
+
+#### Section 4 — CTA
+
+Same `CTABand` as Homepage §7.
+
+#### Section 5 — Footer
+
+As specified in §4/5.1.
+
+---
+
+### 5.6 Contact / Request a Quote (`/contact/`)
+
+**Page goal**: Capture qualified leads. This is the primary conversion page.  
+**FR coverage**: FR-1, FR-2, FR-3, FR-4, FR-5, FR-6, FR-7 | NFR-1, NFR-2
+
+> **Form spec authority**: Field definitions, validation rules, error states, spam protection, and API integration are fully specified in `38-lead-capture-spec.md`. This section defines the page layout and UX context only.
+
+#### Section 1 — Nav
+
+Sticky nav. Active link: "Contact".
+
+#### Section 2 — Page Hero
+
+**Background**: `--col-linen`  
+**Padding**: `--space-8` top / `--space-4` bottom.  
+**Layout**: Single column, max-width 640px, left-aligned.
+
+| Element | Content | Style |
+|---|---|---|
+| Eyebrow | `REQUEST A QUOTE` | SectionEyebrow |
+| H1 | `"Request a Quote"` | Fraunces italic, `--text-4xl` mobile / `--text-5xl` desktop, `--col-graphite` |
+| Lead | `"Tell Diana about your project. She'll follow up within 1–2 business days."` | DM Sans 400, `--text-lg`, `--col-ink` |
+
+#### Section 3 — Contact Form
+
+**Background**: `--col-linen`  
+**Padding**: `--space-4` top / `--space-8` bottom.  
+**Form container**: max-width 560px; left-aligned on desktop (not centered).
+
+**Layout — mobile**: All fields stack vertically, full width. Submit button full width.
+
+**Layout — desktop** (`md` and above):
+- Row 1: Name (50%) + Phone (50%), side by side. Gap: `--space-3`.
+- Row 2: Email (100%).
+- Row 3: Address / service location (100%).
+- Row 4: Description textarea (100%), min-height 140px, resizable vertically only.
+- Row 5: Submit button, right-aligned, auto width, min-width 200px.
+
+**Form fields** (5 required fields per FR-3, OQ-4):
+
+| Field | Label | Type | Placeholder hint | Required |
+|---|---|---|---|---|
+| Name | `Full name` | `text` | `e.g. Jane Smith` | Yes |
+| Phone | `Phone number` | `tel` | `e.g. (415) 555-0123` | Yes |
+| Email | `Email address` | `email` | `e.g. jane@example.com` | Yes |
+| Address | `Service address` | `text` | `e.g. 123 Market St, San Francisco, CA` | Yes |
+| Description | `Describe the work` | `textarea` | `Tell Diana what needs to be done — the more detail, the better.` | Yes |
+
+All fields use the `FormField` component (see §6). Submit button uses Button (primary), label `"Send Request"`.
+
+**FormFeedback states** (see `38-lead-capture-spec.md` for full logic):
+- **Success**: Replace form with `FormFeedback (success)` — green/copper icon, heading `"Request received!"`, body `"Diana will follow up within 1–2 business days. In the meantime, you can also reach her at [phone] or [email]."` Both contact methods are clickable links. (FR-4, FR-7)
+- **Error**: Inline `FormFeedback (error)` above the submit button — `"Something went wrong. Please try again, or contact Diana directly at [phone] or [email]."` (FR-4, FR-7) Form remains filled so user does not lose their input.
+
+#### Section 4 — Secondary Contact Info
+
+**Background**: `--col-mist`  
+**Padding**: `--space-6` top/bottom.  
+**Layout**: Single column, centered, max-width 640px.
+
+**Heading (H3)**: `"Prefer to reach out directly?"` — DM Sans 500, `--text-xl`, `--col-graphite`.
+
+Two contact items displayed vertically (mobile) or inline (desktop):
+
+| Channel | Display | Link |
+|---|---|---|
+| Phone | `(415) XXX-XXXX` | `tel:` URI |
+| Email | `diana@example.com` | `mailto:` URI |
+
+Each item: icon (inline SVG phone/envelope, `--col-copper`) + link text (DM Sans 500, `--text-base`, `--col-copper`). Hover: `--col-copper-hover`.
+
+**FR coverage**: FR-6, FR-7.
+
+#### Section 5 — Footer
+
+As specified in §4/5.1.
+
+---
+
+## 6. Component Inventory
+
+Each component is defined by its visual anatomy, states, and token usage. No code — this is a design and behavior contract.
+
+---
+
+### 6.1 Button
+
+Three variants. All buttons:
+- Font: DM Sans 500, uppercase, letter-spacing 0.05em.
+- Size: `--text-base` label, `--space-2` top/bottom padding, `--space-4` left/right padding.
+- Border-radius: `--radius-md`.
+- Min touch target: 44×44px.
+- Transition: `background-color 150ms ease, transform 100ms ease, box-shadow 150ms ease`.
+- Hover: `transform: scale(1.02)`.
+- Focus: `outline: 2px solid --col-copper; outline-offset: 2px`.
+- Disabled: opacity 0.45, `cursor: not-allowed`, no hover effects.
+
+**Primary Button**:
+- Background: `--col-copper`. Text: white.
+- Hover: background `--col-copper-hover`.
+- Used for all main CTAs: "Request a Quote", "Send Request".
+
+**Secondary Button** (outline):
+- Background: transparent. Border: `2px solid --col-graphite`. Text: `--col-graphite`.
+- Hover: background `--col-graphite`, text white.
+- Used for lower-priority actions: "Learn more", "View all services".
+
+**Ghost-White Button** (for use on copper CTABand):
+- Background: white. Text: `--col-copper`.
+- Hover: background `rgba(255,255,255,0.9)`, text `--col-copper-hover`.
+- Used exclusively inside the `CTABand` component.
+
+---
+
+### 6.2 ServiceCard
+
+Used in the homepage services grid and the Services Hub page.
+
+**Anatomy** (top to bottom):
+1. **Thumbnail**: 4:3 aspect ratio, `object-fit: cover`, `--radius-md` top corners only, `loading="lazy"`.
+2. **Card body**: `--space-3` padding on all sides.
+3. **Service name**: DM Sans 500, `--text-xl`, `--col-graphite`.
+4. **Description**: DM Sans 400, `--text-sm`, `--col-slate`, 1–2 lines.
+5. **Arrow link**: `"Learn more →"` — DM Sans 500, `--text-sm`, `--col-copper`. On hover: underline.
+
+**Card styles**:
+- Background: `--col-mist`.
+- Border-radius: `--radius-md`.
+- Box-shadow: `--shadow-card`.
+- Entire card is a link (wraps in `<a>`). Hover: `box-shadow: --shadow-card-hover`, `transform: translateY(-2px)`.
+- Transition: `box-shadow 200ms ease, transform 200ms ease`.
+
+**Scroll animation** (see §7): fade-up on scroll entry.
+
+---
+
+### 6.3 TestimonialCard
+
+**Anatomy** (top to bottom):
+1. **Opening quotation mark**: `"` — Fraunces italic, 3.5rem, `--col-copper`. Leading decorative only (`aria-hidden="true"`).
+2. **Quote body**: DM Sans 400, `--text-base`, `--col-ink`, line-height 1.7. Wrapped in `<blockquote>`.
+3. **Attribution**: `— [Name], [City]` — DM Sans 500, `--text-sm`, `--col-slate`. Inside `<cite>`.
+
+**Card styles**:
+- Background: white (on `--col-mist` section backgrounds) or `--col-mist` (on `--col-linen` backgrounds).
+- Border-left: `4px solid --col-copper`.
+- Border-radius: `--radius-md`.
+- Box-shadow: `--shadow-card`.
+- Padding: `--space-4`.
+
+---
+
+### 6.4 TrustPillar
+
+**Anatomy** (top to bottom):
+1. **Icon**: 40×40px inline SVG, `--col-copper`. `aria-hidden="true"`.
+2. **Pillar name**: DM Sans 500, `--text-xl`, `--col-graphite`.
+3. **Body copy**: DM Sans 400, `--text-base`, `--col-ink`, 2 sentences, line-height 1.6.
+
+**Layout**:
+- Mobile: centered. Icon → name → body, stacked.
+- Desktop: left-aligned within its grid column.
+- No card surface (transparent background — inherits section background).
+- No border or shadow.
+- Gap between pillar name and body: `--space-1`.
+- Gap between icon and pillar name: `--space-2`.
+
+---
+
+### 6.5 NavBar
+
+See §4 for full specification. Component encapsulates:
+- Desktop layout (wordmark + nav links + CTA button).
+- Mobile layout (wordmark + phone icon + hamburger).
+- Mobile menu overlay (full-screen, animated).
+- Scroll-compact state (JS scroll listener, class toggle).
+- Skip link (always first child).
+
+**States**: Default, scroll-compact, mobile-menu-open.
+
+---
+
+### 6.6 Footer
+
+See §5.1 Section 8 for full specification. Component encapsulates:
+- HER wordmark (links to `/`).
+- Nav links row.
+- Contact info row (phone + email).
+- Copyright line.
+
+Responsive behavior: single column mobile, 2-column desktop.
+
+---
+
+### 6.7 FormField
+
+A labeled input or textarea, paired with optional helper/error message.
+
+**Anatomy**:
+1. `<label>`: DM Sans 500, `--text-sm`, `--col-graphite`. Always visible (never placeholder-only). `for` attribute links to input `id`.
+2. `<input>` or `<textarea>`: DM Sans 400, `--text-base`, `--col-ink`. Background: white. Border: `1px solid --col-chalk`. Padding: `--space-2`. Border-radius: `--radius-sm`. Width: 100%.
+   - Focus: `border-color: --col-copper; outline: 2px solid --col-copper; outline-offset: 2px`.
+   - Error state: `border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192,57,43,0.15)`.
+3. **Error message** (conditionally rendered): DM Sans 400, `--text-xs`, `#C0392B`. Linked via `aria-describedby`. Appears below the input, `--space-1` margin-top.
+
+---
+
+### 6.8 FormFeedback
+
+Two variants, rendered in place of or adjacent to the form:
+
+**Success variant**:
+- Container: `--col-mist` background, `--radius-md`, `--space-4` padding, `border-left: 4px solid --col-copper`.
+- Icon: Checkmark circle SVG, `--col-copper`, 32×32px. `role="img"`, `aria-label="Success"`.
+- Heading: DM Sans 500, `--text-xl`, `--col-graphite`. `"Request received!"`.
+- Body: DM Sans 400, `--text-base`, `--col-ink`. Includes clickable phone and email links.
+- `role="alert"`, `aria-live="polite"` on the container (announced to screen readers on render).
+
+**Error variant**:
+- Container: white background, `--radius-md`, `--space-3` padding, `border-left: 4px solid #C0392B`.
+- Icon: Warning triangle SVG, `#C0392B`, 24×24px.
+- Heading: DM Sans 500, `--text-base`, `#C0392B`. `"Something went wrong."`.
+- Body: DM Sans 400, `--text-sm`, `--col-ink`. Includes clickable phone and email fallback links.
+- `role="alert"`, `aria-live="assertive"` (immediately announced).
+
+---
+
+### 6.9 Breadcrumb
+
+See §5.3 Section 2. Encapsulates `<nav aria-label="Breadcrumb">` with ordered links and `aria-current="page"` on the final segment.
+
+---
+
+### 6.10 SectionEyebrow
+
+Reusable label component placed above section headings.
+
+- Element: `<p>` or `<span>`.
+- Font: DM Sans 500, `--text-xs`, uppercase, letter-spacing 0.08em.
+- Color: `--col-copper`.
+- Margin bottom: `--space-2` (below eyebrow, above heading).
+- No icon, no decorative elements.
+
+---
+
+### 6.11 ImageGallery
+
+Responsive image grid used on Service Detail pages.
+
+- Container: CSS grid, `auto-fill` columns, min 200px, gap `--space-2`.
+- Mobile: 2 images visible (3rd hidden below `md`).
+- Desktop: 3 images in a row.
+- All images: 4:3 aspect ratio, `object-fit: cover`, `--radius-md`, `loading="lazy"`.
+- No lightbox or zoom in v1.
+- Images are decorative context; no captions required, but alt text is mandatory.
+- The gallery section has `role="region"` and `aria-label="[Service Name] project photos"`.
+
+---
+
+### 6.12 CTABand
+
+Full-width section, copper background. Used at the bottom of every page (above footer).
+
+- Background: `--col-copper`.
+- Text: white.
+- Centered content, max-width 640px.
+- Heading (H2): Fraunces italic, `--text-3xl`, white.
+- Subheading: DM Sans 400, `--text-lg`, white 90% opacity.
+- Button: Ghost-White variant (see §6.1).
+- Padding: `--space-8` top/bottom mobile, `--space-12` desktop.
+- No scroll animation on this band (it is a persistent conversion element, not a discovery element).
+
+---
+
+## 7. Animation & Motion
+
+All motion is **subtle and purposeful**. No animation that distracts from content or delays interactivity.
+
+### 7.1 Scroll-triggered Fade-up
+
+Applied to: `ServiceCard`, `TestimonialCard`, `TrustPillar`.
+
+**Behavior**:
+- Cards begin at `opacity: 0; transform: translateY(24px)`.
+- On entering the viewport (IntersectionObserver threshold: 0.1), transition to `opacity: 1; transform: translateY(0)`.
+- Transition: `opacity 400ms ease, transform 400ms ease`.
+- Stagger delay within grid: `0ms`, `80ms`, `160ms` per card (left to right, each row).
+- Implementation: CSS classes toggled by a small JS IntersectionObserver. The observer is added only when `prefers-reduced-motion` is not `reduce`.
+
+**Reduced motion**: When `@media (prefers-reduced-motion: reduce)` applies:
+- Remove all `opacity` and `transform` transition effects.
+- Elements appear immediately at full opacity and correct position.
+- No stagger delays.
+
+### 7.2 Navigation Scroll-compact Transition
+
+- `height` transition on the `<header>` element: `height 200ms ease`.
+- Logo `transform: scale()` transition: `transform 200ms ease`.
+- Only the layout properties transition; no opacity or color animation.
+
+### 7.3 Button Hover
+
+- `background-color`: `150ms ease`.
+- `transform: scale(1.02)`: `100ms ease`.
+- `box-shadow` (for card links): `200ms ease`.
+
+### 7.4 Mobile Menu Overlay
+
+- Entry: `transform: translateY(-100%)` → `transform: translateY(0)`, `250ms ease-out`.
+- Exit: reverse, `200ms ease-in`.
+- Reduced motion: instant show/hide, no transform animation.
+
+### 7.5 Form Error States
+
+- Error borders and messages: no animation. Appear/disappear instantly.
+- FormFeedback success/error: instant render (motion would delay the user's perception of success/failure).
+
+### 7.6 Summary Table
+
+| Element | Property animated | Duration | Reduced motion |
+|---|---|---|---|
+| ServiceCard, TestimonialCard, TrustPillar | opacity, translateY | 400ms | Disabled |
+| Nav scroll-compact | height, scale | 200ms | Disabled |
+| Button hover | background-color, scale | 100–150ms | background-color only |
+| Mobile menu overlay | translateY | 200–250ms | Disabled (instant) |
+| Card hover | box-shadow, translateY | 200ms | box-shadow only |
+
+---
+
+## 8. Image Treatment
+
+### 8.1 Loading Strategy
+
+| Context | `loading` attribute | `fetchpriority` |
+|---|---|---|
+| Hero image (Homepage, About) | `eager` | `high` |
+| All other images | `lazy` | (default) |
+
+### 8.2 Aspect Ratios
+
+| Context | Aspect ratio | `object-fit` | Notes |
+|---|---|---|---|
+| Hero — Diana's photo (mobile) | 3:4 (portrait) | cover | Full-width, stacks below text |
+| Hero — Diana's photo (desktop) | 1:1 (square) | cover | Right column of hero grid |
+| Service card thumbnails | 4:3 | cover | Consistent grid appearance |
+| Service detail gallery | 4:3 | cover | Uniform across 2–3 gallery images |
+
+### 8.3 Border Radius
+
+- Hero image containers: `--radius-lg` (16px).
+- Card thumbnails: `--radius-md` applied to top corners only (card bottom is flush with card body).
+- Gallery images: `--radius-md` on all corners.
+
+### 8.4 Alt Text Requirements
+
+All images must have descriptive alt text. Decorative icons used as `aria-hidden="true"` do not need alt text. The following alt text is specified:
+
+| Asset | Alt text |
+|---|---|
+| `diana_photo-min-1-scaled.webp` | `Diana, San Francisco handywoman, aboard a sailboat with the Golden Gate Bridge in the background` |
+| `painting-1-min.png` | `Interior wall freshly painted in warm white — San Francisco home painting project` |
+| `painting-3-min.jpg` | `Exterior trim painting on a San Francisco Victorian-style home` |
+| `painting-5-min.jpg` | `Painted kitchen cabinets in soft grey — cabinet refinishing project` |
+| `tile-setting-1-min.png` | `Newly installed ceramic tile backsplash in a San Francisco kitchen` |
+| `tile-setting-3-min.png` | `Bathroom floor tile set in a herringbone pattern` |
+| `tile-setting-5-min.png` | `Outdoor patio tile installation in a San Francisco Bay Area home` |
+| `sheetrocking-1-min.png` | `Freshly installed drywall in a San Francisco home renovation` |
+| `sheetrocking-2-min.png` | `Drywall patch blended seamlessly into an existing wall` |
+| `sheetrocking-3-min.png` | `Skim-coated wall surface ready for paint` |
+| `plumbing-2-min.png` | `New kitchen faucet installed under granite countertop` |
+| `plumbing-4-min.png` | `Bathroom vanity plumbing connections` |
+| `plumbing-6-min.png` | `Shower fixture replacement in a tiled bathroom` |
+| `electrical-1-min.jpg` | `Modern pendant light fixture installed in a San Francisco dining room` |
+| `electrical-3-min.jpg` | `Ceiling fan installation in a bedroom` |
+| `electrical-5-min.jpg` | `New dimmer switch installed on a painted wall` |
+| `wood-refinishing-1-min.png` | `Refinished hardwood floors gleaming in natural light` |
+| `wood-refinishing-3-min.png` | `Restored wood deck with fresh finish — Bay Area outdoor woodwork` |
+| `wood-refinishing-5-min.png` | `Refinished wood staircase in a San Francisco home` |
+| `grab-bar-min.png` | `ADA-compliant grab bar installed in a bathroom — aging-in-place safety improvement` |
+| `security-garage-door-min.png` | `Garage door hardware and security upgrade` |
+| `boat-work-min-scaled.jpg` | `Boat deck woodwork and maintenance — San Francisco Bay Area marine services` |
+
+> **Open items**: Alt text for carpentry & mounting placeholder, and any future photos (boat work, security) must be written at the time those images are added.
+
+### 8.5 File Format and Optimization
+
+- All existing `.webp` assets should be served as-is (already optimized format).
+- `.jpg` and `.png` assets: if not already optimized at production time, run through a lossless/lossy compressor targeting <150KB per image.
+- Hero image (`diana_photo-min-1-scaled.webp`): serve a responsive `srcset` with at least two sizes — 600px wide (mobile) and 1000px wide (desktop).
+- Service card thumbnails: serve at 600px wide maximum; no need for retina on cards given their small rendered size.
+
+**FR coverage**: NFR-6.
+
+---
+
+## 9. Accessibility
+
+The site must meet **WCAG 2.1 Level AA** as a minimum.
+
+### 9.1 Color Contrast
+
+| Foreground | Background | Ratio (approx.) | Min required | Pass? |
+|---|---|---|---|---|
+| `--col-ink` (#1A1A1A) | `--col-linen` (#F4F1EB) | ~12:1 | 4.5:1 body | ✓ |
+| `--col-graphite` (#252B30) | `--col-linen` (#F4F1EB) | ~9:1 | 4.5:1 body | ✓ |
+| White (#FFFFFF) | `--col-graphite` (#252B30) | ~11:1 | 4.5:1 body | ✓ |
+| White (#FFFFFF) | `--col-copper` (#B5622A) | ~3.0:1 | 3:1 large text | ✓ (large text only; verify button label size) |
+| `--col-slate` (#5C7080) | `--col-linen` (#F4F1EB) | ~3.8:1 | 4.5:1 body | ⚠ Borderline — use only for secondary/supplemental text (never primary body); or darken `--col-slate` to `#4A5F6D` at implementation |
+| `--col-copper` (#B5622A) | `--col-linen` (#F4F1EB) | ~3.3:1 | 3:1 large text | ✓ for large text / DM Sans 500 ≥ 18.67px; fail for small body text |
+
+> **Rule**: `--col-copper` and `--col-slate` must **never** be used for primary body text on `--col-linen` background. They are acceptable for eyebrows (DM Sans 500, uppercase, ≥12px), large headings (Fraunces ≥24px), and decorative elements only.
+
+### 9.2 Focus Indicators
+
+All interactive elements must display a visible focus ring on keyboard navigation:
+- Style: `outline: 2px solid var(--col-copper); outline-offset: 2px;`
+- Applies to: all `<a>`, `<button>`, `<input>`, `<textarea>`, `<select>`.
+- Never `outline: none` without a custom replacement.
+- The default browser focus ring is overridden with the copper custom style globally.
+
+### 9.3 Touch Targets
+
+- Minimum: 44×44px for all tappable elements.
+- Nav links, hamburger, phone icon, form buttons, card links, footer links — all must meet this minimum.
+- If the visible element is smaller (e.g., an icon), extend the touch target with `padding` or a pseudo-element.
+
+### 9.4 Form Accessibility
+
+- Every field has a `<label>` element with a matching `for`/`id` pair.
+- Error messages are associated via `aria-describedby` linking the input to its error `<span>`.
+- Required fields are indicated with `aria-required="true"` (in addition to HTML `required` attribute).
+- Do not rely on placeholder text as the only label.
+- The form submit button has a descriptive accessible name (`Send Request`, not `Submit`).
+- After form submission, `FormFeedback` uses `role="alert"` so screen readers announce the result.
+
+### 9.5 Semantic HTML
+
+- Landmark regions: `<header>`, `<nav>`, `<main>`, `<footer>`.
+- Section headings follow a logical hierarchy: H1 appears exactly once per page; H2 for sections; H3 for sub-sections; H4 for card headings.
+- `<ul>` / `<li>` for navigation links, service lists, city lists.
+- `<blockquote>` + `<cite>` for testimonials.
+- `<figure>` + `<figcaption>` is optional for gallery images (omit figcaption if no caption is displayed).
+
+### 9.6 Skip Navigation
+
+A skip link `<a href="#main-content">Skip to main content</a>` is the first element in `<body>`. It is visually hidden until focused, at which point it appears in the top-left corner (copper background, white text, `--radius-sm`). The `<main>` element has `id="main-content"` and `tabindex="-1"` to ensure focus is received.
+
+### 9.7 Images
+
+- Decorative icons (inline SVG used for visual purposes only): `aria-hidden="true"`, no `alt` or title.
+- All `<img>` elements must have a descriptive `alt` attribute (see §8.4).
+- Background images (if any are used via CSS): must not convey content that is not otherwise available in the HTML.
+
+---
+
+## 10. Requirements Traceability
+
+| Spec section | Requirement IDs | Requirement summary |
+|---|---|---|
+| §4 Navigation (CTA in nav) | FR-1, NFR-2 | Quote form accessible within 1–2 taps from any page |
+| §4.1 Mobile nav (phone icon) | FR-6 | Phone prominently exposed |
+| §4.3 Nav accessibility | NFR-1, AC-4 | Mobile usability, accessible tap targets |
+| §5.1 Hero CTA | FR-1, NFR-2 | Quote form accessible within 1–2 taps |
+| §5.1 Hero copy | FR-15, FR-16, FR-17 | Brand name HER; female handywoman positioning; trustworthy/easy to work with |
+| §5.1 Hero (Diana photo) | FR-16, FR-18 | Personal credibility, aerospace background |
+| §5.1 Services Grid | FR-10 | Services hub accessible from home |
+| §5.1 Why HER (Trust Pillars) | FR-17, FR-18 | Trustworthy, project coordination proof points |
+| §5.1 Testimonials Strip | FR-13, FR-17 | Social proof from real clients |
+| §5.1 Service Area Callout | FR-9, AC-3 | 50-mile service area clearly stated |
+| §5.1 Final CTA Band | FR-1, NFR-2 | Persistent conversion path |
+| §5.1 Footer (phone + email) | FR-6, FR-7, AC-6 | Secondary contact visible in footer |
+| §5.1 Footer (brand name) | FR-15 | Full brand name in footer |
+| §5.2 Services Hub | FR-10, NFR-3, NFR-4 | Services hub page; SEO-indexable |
+| §5.3 Service Detail Template | FR-11, NFR-3, NFR-4, ADR-004, AC-2 | 9 grouped service pages, unique content, CTA on each |
+| §5.3.2 Breadcrumb | NFR-3 | Navigable structure for search engines and users |
+| §5.3.6 Per-service content | FR-11, NFR-4 | Unique content per service for SEO |
+| §5.4 About Diana | FR-12, FR-16, FR-17, FR-18 | About page with credibility, female handywoman framing, proof points |
+| §5.5 Testimonials | FR-13, FR-17 | Full testimonials page, all 4 clients |
+| §5.6 Contact form | FR-1, FR-2, FR-3 | Lightweight quote form, 5 fields |
+| §5.6 Form confirmation | FR-4, FR-7 | Clear confirmation, secondary contacts in success/error states |
+| §5.6 Form backend | FR-5 | AWS API Gateway + Lambda → SES (ADR-002) |
+| §5.6 Secondary contact | FR-6, FR-7, AC-6 | Phone and email below form |
+| §6 Components | NFR-1 | Mobile-first, touch-friendly controls |
+| §7 Animation | NFR-1, AC-4 | No distraction; reduced-motion respected |
+| §8 Image treatment | NFR-6 | Optimized images, lazy loading, eager for LCP |
+| §8 Alt text | AC-4, WCAG AA | Accessible images |
+| §9 Accessibility | AC-4, NFR-1 | WCAG 2.1 AA; no horizontal scroll; readable text; tap targets |
+| §9.7 Semantic HTML | NFR-3 | Indexable, structured HTML content |
+| All pages — no analytics | ADR-005, NFR-7 | No tracking scripts, no cookie banner |
+| All pages — English only | FR-8 | English-only content |
+| All pages — static output | C-1, ADR-001 | Static HTML/CSS/JS, no client-only rendering |
+
+---
+
+*End of 33-frontend-spec.md*
diff --git a/specification/37-seo-content-spec.md b/specification/37-seo-content-spec.md
new file mode 100644
index 0000000..77bc613
--- /dev/null
+++ b/specification/37-seo-content-spec.md
@@ -0,0 +1,1180 @@
+# 37 — SEO & Content Specification
+
+## HER — Home Enhancement and Renovation
+
+> **Phase 3 Spec** | Static site, no CMS | Placeholder domain: `https://her-sf.com`
+>
+> ⚠️ Replace all placeholder values marked below (telephone, email, postal code, domain) with Diana's actual production values before deployment.
+
+---
+
+## Table of Contents
+
+1. [URL Structure](#1-url-structure)
+2. [Title Tags](#2-title-tags)
+3. [Meta Descriptions](#3-meta-descriptions)
+4. [Heading Structure](#4-heading-structure)
+5. [Schema.org Structured Data (JSON-LD)](#5-schemaorg-structured-data-json-ld)
+6. [Open Graph & Twitter Card](#6-open-graph--twitter-card)
+7. [sitemap.xml](#7-sitemapxml)
+8. [robots.txt](#8-robotstxt)
+9. [Content Requirements Per Service Page](#9-content-requirements-per-service-page)
+10. [Internal Linking Strategy](#10-internal-linking-strategy)
+11. [Image SEO](#11-image-seo)
+12. [Service Area Signals](#12-service-area-signals)
+13. [Page Speed & Technical SEO Notes](#13-page-speed--technical-seo-notes)
+14. [Requirements Traceability](#14-requirements-traceability)
+
+---
+
+## 1. URL Structure
+
+All URLs use **trailing slashes**. Each page declares a `<link rel="canonical">` pointing to itself at the production domain with the trailing slash.
+
+| Page | URL | Canonical |
+|------|-----|-----------|
+| Homepage | `/` | `https://her-sf.com/` |
+| Services Hub | `/services/` | `https://her-sf.com/services/` |
+| Painting | `/services/painting/` | `https://her-sf.com/services/painting/` |
+| Tile Setting | `/services/tile-setting/` | `https://her-sf.com/services/tile-setting/` |
+| Drywall & Sheetrocking | `/services/drywall/` | `https://her-sf.com/services/drywall/` |
+| Minor Plumbing | `/services/plumbing/` | `https://her-sf.com/services/plumbing/` |
+| Minor Electrical | `/services/electrical/` | `https://her-sf.com/services/electrical/` |
+| Carpentry & Mounting | `/services/carpentry-and-mounting/` | `https://her-sf.com/services/carpentry-and-mounting/` |
+| Flooring & Wood Refinishing | `/services/flooring/` | `https://her-sf.com/services/flooring/` |
+| Security & Safety Equipment | `/services/security-safety/` | `https://her-sf.com/services/security-safety/` |
+| Boat Work | `/services/boat-work/` | `https://her-sf.com/services/boat-work/` |
+| About Diana | `/about/` | `https://her-sf.com/about/` |
+| Testimonials | `/testimonials/` | `https://her-sf.com/testimonials/` |
+| Contact / Request a Quote | `/contact/` | `https://her-sf.com/contact/` |
+| Thank You (post-form) | `/thank-you/` | — (noindex; no canonical needed) |
+
+**Implementation notes:**
+
+- The Caddy configuration (or build output) must issue a **301 redirect** from any non-trailing-slash URL (e.g., `/services/painting`) to its trailing-slash equivalent. Inconsistent trailing slashes create duplicate-content signals.
+- The `/thank-you/` page must carry `<meta name="robots" content="noindex, nofollow">` in `<head>`. It is excluded from the sitemap and disallowed in `robots.txt` (see Sections 7 and 8).
+- Total indexable pages: **14** (excluding `/thank-you/`).
+
+---
+
+## 2. Title Tags
+
+### Formula
+
+| Page type | Formula |
+|-----------|---------|
+| Homepage | `HER — Handywoman San Francisco \| Home Enhancement and Renovation` |
+| Services Hub | `Handywoman Services in San Francisco \| HER` |
+| Service detail pages | `[Service] in San Francisco \| HER Handywoman` ¹ |
+| About | `About Diana \| HER — San Francisco Handywoman` |
+| Testimonials | `Client Reviews \| HER — San Francisco Handywoman` |
+| Contact | `Request a Quote \| HER — San Francisco Handywoman` |
+| Thank You | `Thank You \| HER — San Francisco Handywoman` (noindex) |
+
+> ¹ **Formula note — why the suffix is shortened for service pages:**
+> The originally specified formula `[Service] in San Francisco | HER — Home Enhancement and Renovation` produces titles of 65–84 characters for every service page — consistently above Google's ~60-character SERP display threshold. The suffix `| HER — Home Enhancement and Renovation` alone is 40 characters, leaving fewer than 20 characters for the service name and city before truncation. The shortened suffix `| HER Handywoman` (16 chars) preserves the brand acronym and the differentiating keyword "Handywoman" while keeping every title under 56 characters. For the three service pages with longer names (Drywall & Sheetrocking, Flooring & Wood Refinishing, Security & Safety Equipment), even `| HER Handywoman` is dropped to `| HER` to stay comfortably under 60 characters. The full brand name "Home Enhancement and Renovation" appears in the `og:site_name` tag, the footer on every page, and in the `LocalBusiness` schema — it remains fully indexable.
+
+### Final Recommended Title Tags
+
+| Page | Recommended Title Tag | Chars | Status |
+|------|----------------------|------:|--------|
+| Homepage | `HER — Handywoman San Francisco \| Home Enhancement and Renovation` | 64 | ⚠️ See note ² |
+| Services Hub | `Handywoman Services in San Francisco \| HER` | 42 | ✅ |
+| Painting | `Painting in San Francisco \| HER Handywoman` | 42 | ✅ |
+| Tile Setting | `Tile Setting in San Francisco \| HER Handywoman` | 46 | ✅ |
+| Drywall & Sheetrocking | `Drywall & Sheetrocking in San Francisco \| HER` | 45 | ✅ |
+| Minor Plumbing | `Minor Plumbing in San Francisco \| HER Handywoman` | 48 | ✅ |
+| Minor Electrical | `Minor Electrical in San Francisco \| HER Handywoman` | 50 | ✅ |
+| Carpentry & Mounting | `Carpentry & Mounting in San Francisco \| HER` | 43 | ✅ |
+| Flooring & Wood Refinishing | `Flooring & Wood Refinishing in San Francisco \| HER` | 50 | ✅ |
+| Security & Safety Equipment | `Security & Safety Equipment in San Francisco \| HER` | 50 | ✅ |
+| Boat Work | `Boat Work in San Francisco Bay Area \| HER` | 41 | ✅ |
+| About | `About Diana \| HER — San Francisco Handywoman` | 44 | ✅ |
+| Testimonials | `Client Reviews \| HER — San Francisco Handywoman` | 47 | ✅ |
+| Contact | `Request a Quote \| HER — San Francisco Handywoman` | 48 | ✅ |
+| Thank You | `Thank You \| HER — San Francisco Handywoman` | 42 | ✅ (noindex) |
+
+> ² The homepage title at 64 characters is marginally over the 60-character rule. Google's rendering engine measures pixel width (~580px), not raw character count; short words like "HER" and narrow characters in "Renovation" mean it is likely to display in full. Use Google Search Console's "URL Inspection" tool after indexing to confirm no truncation, and shorten if needed (e.g., `HER — Handywoman San Francisco | Home Enhancement & Reno`).
+
+---
+
+## 3. Meta Descriptions
+
+All descriptions target: **service/page keyword + city or Bay Area + trust signal + CTA verb**. Maximum ~155 characters.
+
+| Page | Meta Description | ~Chars |
+|------|-----------------|-------:|
+| Homepage | Diana is San Francisco's trusted female handywoman serving the Bay Area. Painting, plumbing, tile, electrical & more. Get a free quote from HER today. | 150 |
+| Services Hub | Explore all handywoman services by HER in San Francisco and the Bay Area — painting, tile, drywall, plumbing, electrical & more. Request a free quote. | 150 |
+| Painting | Professional interior and exterior painting in San Francisco by HER handywoman Diana. Quality prep, clean finish, Bay Area coverage. Request a quote today. | 155 |
+| Tile Setting | Expert tile installation in San Francisco — bathroom, kitchen backsplash, floor, and shower tile by HER. Serving the Bay Area. Get your free quote. | 147 |
+| Drywall & Sheetrocking | Drywall repair, patching, and sheetrocking in San Francisco by HER handywoman. Bay Area homeowners trust Diana for quality, tidy results. Get a quote. | 150 |
+| Minor Plumbing | Minor plumbing in San Francisco — faucets, toilets, sinks, and fixture installation by HER handywoman Diana. Bay Area coverage. Request a free quote. | 149 |
+| Minor Electrical | Minor electrical work in San Francisco — light fixtures, ceiling fans, outlets, and switches installed by HER. Trusted Bay Area handywoman. Get a quote. | 152 |
+| Carpentry & Mounting | Carpentry, furniture assembly, TV mounting, and shelf installation in San Francisco by HER handywoman. Reliable Bay Area service. Request a quote. | 145 |
+| Flooring & Wood Refinishing | Hardwood floor refinishing, flooring installation, and deck refinishing in San Francisco by HER. Trusted Bay Area handywoman. Get a free quote today. | 149 |
+| Security & Safety Equipment | Grab bars, deadbolts, cameras, and smart locks installed in San Francisco by HER handywoman. Bay Area safety and security upgrades. Request a quote. | 148 |
+| Boat Work | Marine repairs, boat painting, woodwork, and hardware installation in San Francisco Bay by HER handywoman. Serving Bay Area marinas. Get a quote. | 144 |
+| About | Meet Diana — San Francisco's trusted female handywoman and project coordinator. Skilled, reliable, and easy to work with across the Bay Area. | 140 |
+| Testimonials | Read what Bay Area homeowners say about HER handywoman services in San Francisco. Real reviews from real clients who trust Diana's quality work. | 142 |
+| Contact | Ready to get started? Request a free quote from HER — San Francisco's trusted female handywoman. Serving the Bay Area within a 50-mile radius. | 141 |
+| Thank You | (Not indexed — no meta description required.) | — |
+
+> **Verify before deployment:** Run each description through a meta tag length checker (e.g., Sistrix Snippet Generator or Google's own SERP preview tools) at final content-lock, as small wording changes during copywriting can push lengths over the limit.
+
+---
+
+## 4. Heading Structure
+
+### H1 Rule
+
+- **Exactly one `<h1>` per page.** No two pages share the same H1 text.
+- The H1 carries the strongest on-page keyword relevance signal. It must include the primary keyword for that page and, where natural, a geographic reference (city or Bay Area).
+- The H1 does not need to match the `<title>` tag word-for-word but must be thematically aligned.
+- The H1 should be the first visible text element inside the page `<main>` landmark, not buried inside a decorative hero component.
+
+### H1 Per Page
+
+| Page | H1 |
+|------|----|
+| Homepage | `San Francisco's Trusted Female Handywoman` |
+| Services Hub | `Handywoman Services in San Francisco & the Bay Area` |
+| Painting | `Professional Painting Services in San Francisco` |
+| Tile Setting | `Tile Setting & Installation in San Francisco` |
+| Drywall & Sheetrocking | `Drywall Repair & Sheetrocking in San Francisco` |
+| Minor Plumbing | `Minor Plumbing Services in San Francisco` |
+| Minor Electrical | `Minor Electrical Services in San Francisco` |
+| Carpentry & Mounting | `Carpentry & Mounting Services in San Francisco` |
+| Flooring & Wood Refinishing | `Flooring & Wood Refinishing in San Francisco` |
+| Security & Safety Equipment | `Security & Safety Equipment Installation in San Francisco` |
+| Boat Work | `Boat Repairs & Marine Work in San Francisco Bay` |
+| About | `About Diana — San Francisco's Handywoman` |
+| Testimonials | `What Our Clients Say` |
+| Contact | `Request a Free Quote` |
+
+### H2/H3 Structure — Service Detail Page Template
+
+Each of the 9 service detail pages follows this heading hierarchy:
+
+```
+h1  [Service] in San Francisco              ← Primary keyword + city
+  h2  What's Included                       ← Opens the service scope list
+  h2  Why Choose HER for [Service]          ← Trust + differentiation copy
+  h2  Serving San Francisco & the Bay Area  ← Local relevance signal
+  h2  Frequently Asked Questions            ← Optional; only on designated pages
+      h3  [Question 1]
+      h3  [Question 2]
+      h3  [Question 3]
+  h2  Ready to Get Started?                 ← CTA section
+```
+
+**Content guidance for each H2:**
+
+- **"What's Included"** — The list of specific sub-services should be a `<ul>` with `<li>` items, not individual `<h3>` tags. Reserve `<h3>` for meaningful content sub-sections (e.g., splitting "Interior Painting" from "Exterior Painting" if page depth warrants it). Keyword-dense sub-service names belong in the list item text, not forced into heading tags.
+- **"Why Choose HER for [Service]"** — This is the primary location for Diana's differentiating copy: years of experience, aerospace team-lead background, female handywoman positioning, project coordination skills, and trustworthiness (FR-16, FR-17, FR-18). 2–4 sentences minimum.
+- **"Serving San Francisco & the Bay Area"** — Name 4–8 specific cities or SF neighborhoods inline (see Section 12). This adds hyperlocal signals without thin-content pages.
+- **"Frequently Asked Questions"** — Only include this H2 on pages that carry the FAQPage schema (see Section 5.5: Painting, Tile Setting, Minor Plumbing). Do not use this schema on pages without a visible FAQ section.
+
+---
+
+## 5. Schema.org Structured Data (JSON-LD)
+
+### Schema Assignment by Page
+
+| Page | JSON-LD Block(s) |
+|------|-----------------|
+| Homepage (`/`) | `LocalBusiness` |
+| Services Hub (`/services/`) | `LocalBusiness`, `BreadcrumbList` |
+| All 9 service detail pages | `LocalBusiness`, `BreadcrumbList`, `Service` [, `FAQPage`] |
+| About (`/about/`) | `LocalBusiness`, `BreadcrumbList`, `Person` |
+| Testimonials (`/testimonials/`) | `LocalBusiness`, `BreadcrumbList` |
+| Contact (`/contact/`) | `LocalBusiness`, `BreadcrumbList` |
+| Thank You (`/thank-you/`) | None (noindex page) |
+
+Each schema block goes in a separate `<script type="application/ld+json">` element inside `<head>`. Multiple blocks per page are valid and preferred over combining unrelated types into a single object.
+
+---
+
+### 5.1 LocalBusiness — Concrete Example (included on every page)
+
+The `@id` value (`https://her-sf.com/#business`) acts as a stable identifier for this entity. Other schema blocks (Service, Person) reference it by `@id` rather than repeating the full object.
+
+```json
+{
+  "@context": "https://schema.org",
+  "@type": "LocalBusiness",
+  "@id": "https://her-sf.com/#business",
+  "name": "HER — Home Enhancement and Renovation",
+  "url": "https://her-sf.com",
+  "telephone": "+1-415-555-0100",
+  "email": "diana@her-sf.com",
+  "image": "https://her-sf.com/assets/diana_photo-min-1-scaled.webp",
+  "logo": "https://her-sf.com/assets/Group-433.png",
+  "priceRange": "$$",
+  "address": {
+    "@type": "PostalAddress",
+    "addressLocality": "San Francisco",
+    "addressRegion": "CA",
+    "postalCode": "94103",
+    "addressCountry": "US"
+  },
+  "geo": {
+    "@type": "GeoCoordinates",
+    "latitude": 37.7749,
+    "longitude": -122.4194
+  },
+  "areaServed": [
+    { "@type": "City", "name": "San Francisco" },
+    { "@type": "City", "name": "Oakland" },
+    { "@type": "City", "name": "Berkeley" },
+    { "@type": "City", "name": "San Jose" },
+    { "@type": "City", "name": "Palo Alto" },
+    { "@type": "City", "name": "Daly City" },
+    { "@type": "City", "name": "South San Francisco" },
+    { "@type": "City", "name": "Burlingame" },
+    { "@type": "City", "name": "San Mateo" },
+    { "@type": "City", "name": "Redwood City" },
+    { "@type": "City", "name": "Menlo Park" },
+    { "@type": "City", "name": "Fremont" },
+    { "@type": "City", "name": "Alameda" },
+    { "@type": "City", "name": "Tiburon" },
+    { "@type": "City", "name": "Sausalito" },
+    { "@type": "AdministrativeArea", "name": "Marin County" }
+  ],
+  "sameAs": []
+}
+```
+
+> ⚠️ **Placeholders:** Replace `telephone`, `email`, and `postalCode` with Diana's actual values before deployment. Add any verified social/directory profile URLs (Yelp, LinkedIn, Nextdoor, etc.) to the `sameAs` array when they exist.
+
+---
+
+### 5.2 Service Schema (each service detail page)
+
+Place in addition to `LocalBusiness`. The `provider` field references the `LocalBusiness` entity by `@id`. Adapt `name`, `description`, `serviceType`, and `url` for each page.
+
+**Pattern — Painting page:**
+
+```json
+{
+  "@context": "https://schema.org",
+  "@type": "Service",
+  "name": "Painting Services in San Francisco",
+  "description": "Professional interior and exterior painting for homes in San Francisco and the Bay Area, including wall painting, cabinet painting, trim painting, and thorough surface preparation.",
+  "serviceType": "Painting",
+  "provider": {
+    "@id": "https://her-sf.com/#business"
+  },
+  "areaServed": [
+    { "@type": "City", "name": "San Francisco" },
+    { "@type": "City", "name": "Oakland" },
+    { "@type": "City", "name": "Berkeley" },
+    { "@type": "AdministrativeArea", "name": "San Francisco Bay Area" }
+  ],
+  "url": "https://her-sf.com/services/painting/"
+}
+```
+
+**`serviceType` and `name` values per page:**
+
+| Page | `serviceType` | `name` |
+|------|--------------|--------|
+| Painting | `Painting` | `Painting Services in San Francisco` |
+| Tile Setting | `Tile Installation` | `Tile Setting & Installation in San Francisco` |
+| Drywall & Sheetrocking | `Drywall Repair` | `Drywall Repair & Sheetrocking in San Francisco` |
+| Minor Plumbing | `Plumbing` | `Minor Plumbing Services in San Francisco` |
+| Minor Electrical | `Electrical` | `Minor Electrical Services in San Francisco` |
+| Carpentry & Mounting | `Carpentry` | `Carpentry & Mounting Services in San Francisco` |
+| Flooring & Wood Refinishing | `Flooring` | `Flooring & Wood Refinishing in San Francisco` |
+| Security & Safety Equipment | `Security Installation` | `Security & Safety Equipment Installation in San Francisco` |
+| Boat Work | `Marine Repair` | `Boat Repairs & Marine Work in San Francisco Bay` |
+
+---
+
+### 5.3 Person Schema (About page only)
+
+```json
+{
+  "@context": "https://schema.org",
+  "@type": "Person",
+  "name": "Diana",
+  "jobTitle": "Handywoman",
+  "description": "Diana is a professional female handywoman and project coordinator based in San Francisco, serving the Bay Area. With years of hands-on experience and an aerospace team-lead background, she brings expertise, reliability, and clear communication to every project.",
+  "image": "https://her-sf.com/assets/diana_photo-min-1-scaled.webp",
+  "worksFor": {
+    "@id": "https://her-sf.com/#business"
+  },
+  "url": "https://her-sf.com/about/"
+}
+```
+
+---
+
+### 5.4 BreadcrumbList (all inner pages)
+
+**Service detail pages** use a 3-level breadcrumb (Home > Services > [Service]):
+
+```json
+{
+  "@context": "https://schema.org",
+  "@type": "BreadcrumbList",
+  "itemListElement": [
+    {
+      "@type": "ListItem",
+      "position": 1,
+      "name": "Home",
+      "item": "https://her-sf.com/"
+    },
+    {
+      "@type": "ListItem",
+      "position": 2,
+      "name": "Services",
+      "item": "https://her-sf.com/services/"
+    },
+    {
+      "@type": "ListItem",
+      "position": 3,
+      "name": "Painting",
+      "item": "https://her-sf.com/services/painting/"
+    }
+  ]
+}
+```
+
+**Non-service inner pages** (Services Hub, About, Testimonials, Contact) use a 2-level breadcrumb (Home > [Page]):
+
+```json
+{
+  "@context": "https://schema.org",
+  "@type": "BreadcrumbList",
+  "itemListElement": [
+    {
+      "@type": "ListItem",
+      "position": 1,
+      "name": "Home",
+      "item": "https://her-sf.com/"
+    },
+    {
+      "@type": "ListItem",
+      "position": 2,
+      "name": "About Diana",
+      "item": "https://her-sf.com/about/"
+    }
+  ]
+}
+```
+
+**Breadcrumb label reference:**
+
+| URL | Breadcrumb label (`name`) |
+|-----|--------------------------|
+| `/services/` | Services |
+| `/services/painting/` | Painting |
+| `/services/tile-setting/` | Tile Setting |
+| `/services/drywall/` | Drywall & Sheetrocking |
+| `/services/plumbing/` | Minor Plumbing |
+| `/services/electrical/` | Minor Electrical |
+| `/services/carpentry-and-mounting/` | Carpentry & Mounting |
+| `/services/flooring/` | Flooring & Wood Refinishing |
+| `/services/security-safety/` | Security & Safety Equipment |
+| `/services/boat-work/` | Boat Work |
+| `/about/` | About Diana |
+| `/testimonials/` | Client Reviews |
+| `/contact/` | Request a Quote |
+
+The breadcrumb labels must match the visible breadcrumb component rendered on the page (see `33-frontend-spec.md` §6.9).
+
+---
+
+### 5.5 FAQPage Schema (optional; 3 designated pages)
+
+Add `FAQPage` schema **only** when a visible FAQ section exists in the page body. Do not include this schema if the questions are not rendered to the user — Google's quality guidelines explicitly prohibit hidden FAQ schema.
+
+**Recommended on:** Painting, Tile Setting, Minor Plumbing.
+
+**Pattern — Tile Setting example:**
+
+```json
+{
+  "@context": "https://schema.org",
+  "@type": "FAQPage",
+  "mainEntity": [
+    {
+      "@type": "Question",
+      "name": "What types of tile do you install?",
+      "acceptedAnswer": {
+        "@type": "Answer",
+        "text": "HER installs ceramic, porcelain, natural stone, and glass tile for bathroom floors and walls, kitchen backsplashes, shower surrounds, and more throughout San Francisco and the Bay Area."
+      }
+    },
+    {
+      "@type": "Question",
+      "name": "Do you include waterproofing for shower tile work?",
+      "acceptedAnswer": {
+        "@type": "Answer",
+        "text": "Yes. Cement backer board and a waterproofing membrane are always installed in wet areas before tile is set."
+      }
+    },
+    {
+      "@type": "Question",
+      "name": "Can you match and repair existing tile?",
+      "acceptedAnswer": {
+        "@type": "Answer",
+        "text": "Yes. Tile repair and close-match replacement is a core part of HER's tile setting service for San Francisco homeowners."
+      }
+    }
+  ]
+}
+```
+
+**Suggested FAQ questions by page:**
+
+| Page | Question 1 | Question 2 | Question 3 |
+|------|------------|------------|------------|
+| Painting | Do you handle both interior and exterior painting? | Is surface preparation (patching, sanding, priming) included? | Can you paint kitchen cabinets? |
+| Tile Setting | What types of tile do you install? | Do you include waterproofing for shower tile? | Can you match and repair existing tile? |
+| Minor Plumbing | What counts as "minor plumbing"? | Do you pull permits for plumbing work? | Can you install a new toilet or faucet? |
+
+---
+
+## 6. Open Graph & Twitter Card
+
+### Required Meta Tags (every page)
+
+```html
+<!-- Open Graph -->
+<meta property="og:type"        content="website" />
+<meta property="og:site_name"   content="HER — Home Enhancement and Renovation" />
+<meta property="og:url"         content="[canonical URL of current page]" />
+<meta property="og:title"       content="[title tag value for current page]" />
+<meta property="og:description" content="[meta description for current page]" />
+<meta property="og:image"       content="[OG image URL — see table below]" />
+<meta property="og:image:alt"   content="[OG image alt text — see table below]" />
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="630" />
+
+<!-- Twitter Card -->
+<meta name="twitter:card"        content="summary_large_image" />
+<meta name="twitter:title"       content="[title tag value]" />
+<meta name="twitter:description" content="[meta description]" />
+<meta name="twitter:image"       content="[OG image URL]" />
+<meta name="twitter:image:alt"   content="[OG image alt text]" />
+```
+
+- `og:url` must match the canonical URL exactly, including the trailing slash and HTTPS scheme.
+- `og:title` and `og:description` should use the same values as the `<title>` tag and meta description for that page — do not create separate OG-only copy.
+
+### OG Image Per Page
+
+| Page | Asset | Alt Text |
+|------|-------|----------|
+| Homepage | `diana_photo-min-1-scaled.webp` | Diana, professional female handywoman, HER Home Enhancement and Renovation, San Francisco |
+| Services Hub | `diana_photo-min-1-scaled.webp` | Diana, HER handywoman, offering services across San Francisco and the Bay Area |
+| Painting | `painting-1-min.png` | Freshly painted interior wall, professional painting service in San Francisco by HER |
+| Tile Setting | `tile-setting-1-min.png` | Tile installation in a San Francisco bathroom by HER handywoman |
+| Drywall & Sheetrocking | `sheetrocking-1-min.png` | Drywall and sheetrocking work in a San Francisco home by HER |
+| Minor Plumbing | `plumbing-2-min.png` | Plumbing fixture installation by HER handywoman in a San Francisco home |
+| Minor Electrical | `electrical-1-min.jpg` | Light fixture installation by HER handywoman in a San Francisco home |
+| Carpentry & Mounting | `diana_photo-min-1-scaled.webp` | Diana, HER handywoman, carpentry and mounting services in San Francisco |
+| Flooring & Wood Refinishing | `wood-refinishing-1-min.png` | Hardwood floor refinishing in a San Francisco home by HER handywoman |
+| Security & Safety Equipment | `grab-bar-min.png` | Grab bar installation in a San Francisco bathroom, safety upgrade by HER |
+| Boat Work | `boat-work-min-scaled.jpg` | Boat repair and marine work in the San Francisco Bay by HER handywoman |
+| About | `diana_photo-min-1-scaled.webp` | Diana, professional female handywoman serving San Francisco and the Bay Area |
+| Testimonials | `diana_photo-min-1-scaled.webp` | Diana, HER handywoman, trusted by San Francisco Bay Area homeowners |
+| Contact | `diana_photo-min-1-scaled.webp` | Request a free quote from HER — San Francisco handywoman Diana |
+
+**Implementation notes:**
+
+- The `og:image:width` / `og:image:height` values (1200×630) are the required OG dimensions. The existing assets are not necessarily 1200×630px. **Before launch, export or crop an OG-specific version of each asset at 1200×630px** and serve them from a dedicated `/assets/og/` directory. Do not link directly to full-resolution gallery images or thumbnail crops in the OG tag.
+- Some OG crawlers (Facebook, LinkedIn) have inconsistent WebP support. Until a JPG/PNG OG export exists, the existing WebP files are an acceptable fallback — modern crawlers handle them — but plan to produce JPG OG exports in the first post-launch update.
+- The Carpentry & Mounting page has no dedicated photo in the v1 asset library. Diana's portrait (`diana_photo-min-1-scaled.webp`) is the correct fallback until carpentry-specific images are available.
+
+---
+
+## 7. sitemap.xml
+
+The sitemap includes all 14 indexable pages. `/thank-you/` is deliberately excluded. Update `<lastmod>` to the actual build/publish date at deployment; this value can be generated automatically by the build script.
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+
+  <!-- ════════════════════════════════════════ -->
+  <!-- Homepage — priority 1.0                 -->
+  <!-- ════════════════════════════════════════ -->
+  <url>
+    <loc>https://her-sf.com/</loc>
+    <lastmod>2025-01-01</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>1.0</priority>
+  </url>
+
+  <!-- ════════════════════════════════════════ -->
+  <!-- Services Hub — priority 0.9             -->
+  <!-- ════════════════════════════════════════ -->
+  <url>
+    <loc>https://her-sf.com/services/</loc>
+    <lastmod>2025-01-01</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.9</priority>
+  </url>
+
+  <!-- ════════════════════════════════════════ -->
+  <!-- Service Detail Pages — priority 0.8     -->
+  <!-- ════════════════════════════════════════ -->
+  <url>
+    <loc>https://her-sf.com/services/painting/</loc>
+    <lastmod>2025-01-01</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+
+  <url>
+    <loc>https://her-sf.com/services/tile-setting/</loc>
+    <lastmod>2025-01-01</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+
+  <url>
+    <loc>https://her-sf.com/services/drywall/</loc>
+    <lastmod>2025-01-01</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+
+  <url>
+    <loc>https://her-sf.com/services/plumbing/</loc>
+    <lastmod>2025-01-01</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+
+  <url>
+    <loc>https://her-sf.com/services/electrical/</loc>
+    <lastmod>2025-01-01</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+
+  <url>
+    <loc>https://her-sf.com/services/carpentry-and-mounting/</loc>
+    <lastmod>2025-01-01</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+
+  <url>
+    <loc>https://her-sf.com/services/flooring/</loc>
+    <lastmod>2025-01-01</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+
+  <url>
+    <loc>https://her-sf.com/services/security-safety/</loc>
+    <lastmod>2025-01-01</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+
+  <url>
+    <loc>https://her-sf.com/services/boat-work/</loc>
+    <lastmod>2025-01-01</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+
+  <!-- ════════════════════════════════════════ -->
+  <!-- Contact — priority 0.8 (conversion)     -->
+  <!-- ════════════════════════════════════════ -->
+  <url>
+    <loc>https://her-sf.com/contact/</loc>
+    <lastmod>2025-01-01</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+
+  <!-- ════════════════════════════════════════ -->
+  <!-- About & Testimonials — priority 0.7     -->
+  <!-- ════════════════════════════════════════ -->
+  <url>
+    <loc>https://her-sf.com/about/</loc>
+    <lastmod>2025-01-01</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+
+  <url>
+    <loc>https://her-sf.com/testimonials/</loc>
+    <lastmod>2025-01-01</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+
+</urlset>
+```
+
+**Notes:**
+
+- Total: **14 URLs**. `/thank-you/` is excluded.
+- The `<priority>` element signals relative importance within this site only; it does not directly affect ranking. The values above reflect: homepage (highest) → services hub → service pages + contact (conversion focus) → trust pages.
+- Submit `https://her-sf.com/sitemap.xml` via Google Search Console once the domain is live and DNS has propagated.
+- Image sitemap is out of scope for v1 (see Section 11).
+
+---
+
+## 8. robots.txt
+
+```
+User-agent: *
+Allow: /
+
+# Exclude the post-form confirmation page from indexing
+Disallow: /thank-you/
+
+Sitemap: https://her-sf.com/sitemap.xml
+```
+
+**Notes:**
+
+- No other paths need to be disallowed on this static site. All non-`/thank-you/` pages are public and indexable.
+- The `Sitemap:` directive must use the fully-qualified HTTPS URL.
+- If a `/assets/` subdirectory later holds unlisted or private files, add a targeted `Disallow` directive at that time. Do not preemptively block `/assets/` — Google Images discovery of the service photos is a secondary benefit.
+- The `/thank-you/` page is disallowed here as a belt-and-suspenders measure in addition to the `noindex` meta tag on the page itself.
+
+---
+
+## 9. Content Requirements Per Service Page
+
+All 9 service pages use the structural template defined in Section 4. The requirements below specify **keyword targeting and content minimums** for each page individually.
+
+Word count floors are the minimum for genuine SEO value in a competitive local market (San Francisco). They are not targets to hit mechanically — useful, specific copy always outranks padded generic text.
+
+---
+
+### 9.1 Painting (`/services/painting/`)
+
+| | |
+|--|--|
+| **Word count floor** | 400 words |
+| **Primary keyword** | `house painter San Francisco` / `interior painting San Francisco` |
+| **Secondary keywords** | `exterior house painting Bay Area`, `room painting contractor San Francisco`, `cabinet painting San Francisco`, `trim painting Bay Area`, `residential painting service SF` |
+| **Key assets** | `painting-1-min.png` — `painting-8-min.jpg` |
+
+**"What's Included" bullets should cover:**
+- Interior wall and ceiling painting
+- Exterior siding and trim painting
+- Cabinet painting and refinishing
+- Accent walls and color consultation
+- Surface preparation: hole patching, sanding, priming
+- Clean-up and final walkthrough
+
+**FAQPage:** Recommended (see Section 5.5).
+
+**Internal links out:**
+
+| Anchor text | Target page |
+|------------|------------|
+| "Need drywall work before we paint?" | `/services/drywall/` |
+| "Painting trim and baseboards?" or similar | `/services/carpentry-and-mounting/` |
+| "Request a free quote" (CTA) | `/contact/` |
+
+---
+
+### 9.2 Tile Setting (`/services/tile-setting/`)
+
+| | |
+|--|--|
+| **Word count floor** | 400 words |
+| **Primary keyword** | `tile installation San Francisco` |
+| **Secondary keywords** | `bathroom tile installation SF Bay Area`, `kitchen backsplash tile San Francisco`, `floor tile installation Bay Area`, `shower tile San Francisco`, `tile repair and replacement SF` |
+| **Key assets** | `tile-setting-1-min.png` — `tile-setting-8-min.png` |
+
+**"What's Included" bullets should cover:**
+- Bathroom floor and wall tile
+- Kitchen backsplash installation
+- Shower surrounds and wet areas (with backer board and waterproofing)
+- Porcelain, ceramic, natural stone, and glass tile
+- Grout installation and sealing
+- Tile repair, matching, and replacement
+
+**FAQPage:** Recommended (see Section 5.5).
+
+**Internal links out:**
+
+| Anchor text | Target page |
+|------------|------------|
+| "Need flooring beyond tile?" or similar | `/services/flooring/` |
+| "Renovating a bathroom? We also handle minor plumbing." | `/services/plumbing/` |
+| "Request a free quote" (CTA) | `/contact/` |
+
+---
+
+### 9.3 Drywall & Sheetrocking (`/services/drywall/`)
+
+| | |
+|--|--|
+| **Word count floor** | 350 words |
+| **Primary keyword** | `drywall repair San Francisco` |
+| **Secondary keywords** | `sheetrocking contractor San Francisco`, `drywall patching Bay Area`, `drywall installation SF`, `hole repair drywall San Francisco`, `skim coat drywall SF` |
+| **Key assets** | `sheetrocking-1-min.png` — `sheetrocking-5-min.png` |
+
+**"What's Included" bullets should cover:**
+- Drywall installation (new and replacement panels)
+- Patching holes — nail-hole size up to large openings
+- Taping, joint compound (mudding), and finishing
+- Skim coat and surface texturing
+- Smooth finish ready for painting
+- Water-damage and impact repairs
+
+**Internal links out:**
+
+| Anchor text | Target page |
+|------------|------------|
+| "Drywall done? We can paint it too." | `/services/painting/` |
+| "Need trim or woodwork after drywall?" | `/services/carpentry-and-mounting/` |
+| "Request a free quote" (CTA) | `/contact/` |
+
+---
+
+### 9.4 Minor Plumbing (`/services/plumbing/`)
+
+| | |
+|--|--|
+| **Word count floor** | 350 words |
+| **Primary keyword** | `minor plumbing San Francisco` |
+| **Secondary keywords** | `faucet installation San Francisco`, `toilet replacement SF Bay Area`, `sink installation San Francisco`, `shower fixture replacement SF`, `plumbing fixture installation Bay Area` |
+| **Key assets** | `plumbing-2-min.png` — `plumbing-8-min.png` |
+
+**"What's Included" bullets should cover:**
+- Faucet and fixture replacement (kitchen and bathroom)
+- Toilet installation and replacement
+- Sink and vanity hookup
+- Showerhead and tub spout replacement
+- Supply line and drain connection
+- Garbage disposal installation
+
+**Scope boundary — state clearly on-page:** HER handles non-permitted minor plumbing fixture work. Projects requiring a licensed plumber or building permits are referred to a licensed contractor.
+
+**FAQPage:** Recommended (see Section 5.5).
+
+**Internal links out:**
+
+| Anchor text | Target page |
+|------------|------------|
+| "Renovating a bathroom? We also set tile." | `/services/tile-setting/` |
+| "Adding grab bars near the tub?" | `/services/security-safety/` |
+| "Request a free quote" (CTA) | `/contact/` |
+
+---
+
+### 9.5 Minor Electrical (`/services/electrical/`)
+
+| | |
+|--|--|
+| **Word count floor** | 350 words |
+| **Primary keyword** | `minor electrical work San Francisco` |
+| **Secondary keywords** | `light fixture installation SF Bay Area`, `ceiling fan installation San Francisco`, `outlet replacement San Francisco`, `GFCI outlet installation SF`, `switch installation Bay Area` |
+| **Key assets** | `electrical-1-min.jpg` — `electrical-8-min.jpg` |
+
+**"What's Included" bullets should cover:**
+- Light fixture installation and replacement
+- Ceiling fan installation
+- Outlet and switch replacement
+- GFCI outlet installation (kitchens, bathrooms, outdoor areas)
+- Under-cabinet and accent lighting
+- Dimmer switch installation
+
+**Scope boundary — state clearly on-page:** HER handles fixture-level electrical work. Panel upgrades, new circuit runs, and permitted electrical installations require a licensed electrician and are referred accordingly.
+
+**Internal links out:**
+
+| Anchor text | Target page |
+|------------|------------|
+| "Powering security cameras or smart locks?" | `/services/security-safety/` |
+| "Need mounting or assembly alongside electrical?" | `/services/carpentry-and-mounting/` |
+| "Request a free quote" (CTA) | `/contact/` |
+
+---
+
+### 9.6 Carpentry & Mounting (`/services/carpentry-and-mounting/`)
+
+| | |
+|--|--|
+| **Word count floor** | 350 words |
+| **Primary keyword** | `carpentry services San Francisco` / `handywoman mounting San Francisco` |
+| **Secondary keywords** | `furniture assembly San Francisco`, `TV mounting SF Bay Area`, `shelf installation San Francisco`, `door repair SF`, `baseboard and trim installation San Francisco` |
+| **Key assets** | `diana_photo-min-1-scaled.webp` (no dedicated carpentry images in v1) |
+
+**"What's Included" bullets should cover:**
+- Furniture assembly (flat-pack and pre-built)
+- TV mounting and cable management
+- Floating shelf and wall-unit installation
+- Curtain rod and blind installation
+- Door adjustment, hanging, and hardware installation
+- Baseboard, crown molding, and trim installation
+
+**Asset gap note:** No dedicated carpentry or mounting photos are in the v1 asset library. Diana's portrait is the correct fallback for page hero and OG image. Adding 3–5 carpentry-specific photos is recommended before launch or in the first post-launch content update.
+
+**Internal links out:**
+
+| Anchor text | Target page |
+|------------|------------|
+| "Need trim or woodwork painted?" | `/services/painting/` |
+| "Installing baseboards or cabinets alongside new flooring?" | `/services/flooring/` |
+| "Request a free quote" (CTA) | `/contact/` |
+
+---
+
+### 9.7 Flooring & Wood Refinishing (`/services/flooring/`)
+
+| | |
+|--|--|
+| **Word count floor** | 400 words |
+| **Primary keyword** | `hardwood floor refinishing San Francisco` / `flooring installation San Francisco` |
+| **Secondary keywords** | `hardwood floor refinishing Bay Area`, `LVP flooring installation SF`, `deck refinishing San Francisco`, `stair tread refinishing Bay Area`, `wood floor repair SF` |
+| **Key assets** | `wood-refinishing-1-min.png` — `wood-refinishing-9-min.png` |
+
+**"What's Included" bullets should cover:**
+- Hardwood floor sanding and refinishing
+- Stain application and polyurethane sealing
+- LVP (luxury vinyl plank) and laminate installation
+- Subfloor preparation and repair
+- Deck and outdoor wood surface refinishing
+- Stair tread refinishing
+
+**Internal links out:**
+
+| Anchor text | Target page |
+|------------|------------|
+| "Related woodwork and trim?" | `/services/carpentry-and-mounting/` |
+| "Refinishing floors and refreshing the walls?" | `/services/painting/` |
+| "Request a free quote" (CTA) | `/contact/` |
+
+---
+
+### 9.8 Security & Safety Equipment (`/services/security-safety/`)
+
+| | |
+|--|--|
+| **Word count floor** | 350 words |
+| **Primary keyword** | `security equipment installation San Francisco` / `safety equipment installation SF` |
+| **Secondary keywords** | `grab bar installation San Francisco`, `door lock installation Bay Area`, `security camera installation SF`, `smart lock installation San Francisco`, `ADA safety upgrades Bay Area` |
+| **Key assets** | `grab-bar-min.png`, `security-garage-door-min.png` |
+
+**"What's Included" bullets should cover:**
+- Grab bar installation (bathroom, shower, stairway)
+- Deadbolt and door lock installation and replacement
+- Security camera mounting and basic setup
+- Smart lock and keypad entry installation
+- Door reinforcement and peephole installation
+- Motion-sensor and safety lighting installation
+
+**Internal links out:**
+
+| Anchor text | Target page |
+|------------|------------|
+| "Need an outlet for your camera system?" | `/services/electrical/` |
+| "Adding grab bars near the tub or shower?" | `/services/plumbing/` |
+| "Request a free quote" (CTA) | `/contact/` |
+
+---
+
+### 9.9 Boat Work (`/services/boat-work/`)
+
+| | |
+|--|--|
+| **Word count floor** | 300 words |
+| **Primary keyword** | `boat repair San Francisco Bay` / `marine handywoman San Francisco` |
+| **Secondary keywords** | `boat painting San Francisco Bay`, `marine woodwork Bay Area`, `boat hardware installation SF`, `sailboat maintenance Bay Area`, `liveaboard repairs San Francisco` |
+| **Key assets** | `boat-work-min-scaled.jpg` |
+
+**"What's Included" bullets should cover:**
+- Marine paint and gelcoat touch-up and refinishing
+- Teak and wood surface cleaning, oiling, and refinishing
+- Deck hardware installation and replacement
+- Liveaboard interior repairs and improvements
+- Canvas and upholstery minor repairs
+- General boat maintenance and handywork
+
+**Tone note:** This page targets a niche, high-trust market. The copy should emphasize Diana's comfort and experience in marine environments and working on vessels docked at Bay Area marinas. If Diana has worked at specific marinas (e.g., Sausalito, Alameda, South Beach Harbor), naming them adds authenticity and hyperlocal signal.
+
+**Asset note:** Only one boat-work photo is in the v1 library. Adding 2–3 more boat-specific images is recommended to bring the image gallery in line with other service pages.
+
+**Internal links out:**
+
+| Anchor text | Target page |
+|------------|------------|
+| "Marine painting shares a lot with land-side painting — we do both." | `/services/painting/` |
+| "Wood deck refinishing on boats and homes alike." | `/services/flooring/` |
+| "Request a free quote" (CTA) | `/contact/` |
+
+---
+
+## 10. Internal Linking Strategy
+
+### Site Link Graph
+
+```
+/ (Homepage)
+├── /services/            ← hero "View all services" + nav
+│   ├── /services/painting/
+│   ├── /services/tile-setting/
+│   ├── /services/drywall/
+│   ├── /services/plumbing/
+│   ├── /services/electrical/
+│   ├── /services/carpentry-and-mounting/
+│   ├── /services/flooring/
+│   ├── /services/security-safety/
+│   └── /services/boat-work/
+├── /about/
+├── /testimonials/
+└── /contact/
+```
+
+Every page links back to `/` and `/contact/` via the navigation header and footer. The graph above shows content-body links.
+
+### Required Links Per Page Type
+
+| Page | Required body links |
+|------|-------------------|
+| Homepage | `/services/` (hub link), all 9 service cards, `/about/`, `/testimonials/`, `/contact/` |
+| Services Hub | All 9 service page cards, `/contact/` |
+| Each service detail page | `/contact/` (primary CTA, at least twice: inline + CTA band), 2 related service pages (see cross-link table below), `/services/` and `/` via breadcrumb |
+| About | `/contact/` |
+| Testimonials | `/contact/` |
+| Footer (every page) | `/`, `/services/`, all 9 service pages, `/about/`, `/testimonials/`, `/contact/` |
+
+### Cross-Service Link Pairs
+
+Each service page links out to 2 contextually related service pages. Both directions of each pair are shown; implement both ends.
+
+| Page | Related page 1 | Related page 2 |
+|------|---------------|---------------|
+| Painting | Drywall & Sheetrocking | Carpentry & Mounting |
+| Tile Setting | Flooring & Wood Refinishing | Minor Plumbing |
+| Drywall & Sheetrocking | Painting | Carpentry & Mounting |
+| Minor Plumbing | Tile Setting | Security & Safety Equipment |
+| Minor Electrical | Security & Safety Equipment | Carpentry & Mounting |
+| Carpentry & Mounting | Painting | Flooring & Wood Refinishing |
+| Flooring & Wood Refinishing | Carpentry & Mounting | Painting |
+| Security & Safety Equipment | Minor Electrical | Minor Plumbing |
+| Boat Work | Painting | Flooring & Wood Refinishing |
+
+### Anchor Text Guidance
+
+- Use **descriptive, keyword-relevant anchor text** for all content body links. Avoid "click here", "learn more", or bare URLs.
+- Good: `"our painting services in San Francisco"`, `"drywall repair and patching"`, `"request a free quote"`
+- Avoid repeating the same anchor text string for the same target more than once on a single page.
+- CTA buttons may use action-first copy: "Request a Free Quote", "Get in Touch", "Schedule a Visit".
+- Breadcrumb links use short, literal labels ("Services", "Painting") — this is correct and expected for breadcrumbs.
+
+---
+
+## 11. Image SEO
+
+### Alt Text Guidance
+
+Alt text must describe what is **visible** in the image and add useful context — not keyword lists.
+
+**Formula:** `[Subject or action visible in photo], [setting or room], [city/context if natural]`
+
+**Reference table for existing assets:**
+
+| Asset filename | Recommended `alt` text |
+|----------------|------------------------|
+| `diana_photo-min-1-scaled.webp` | Diana, professional female handywoman, HER Home Enhancement and Renovation, San Francisco |
+| `Group-433.png` | HER — Home Enhancement and Renovation logo |
+| `painting-1-min.png` | Interior wall painted in a light neutral color, living room renovation, San Francisco |
+| `painting-3-min.jpg` | White baseboard trim being painted, close-up detail, professional finish |
+| `painting-5-min.jpg` | Exterior house painting in progress, ladder and brushwork on siding |
+| `tile-setting-1-min.png` | Floor tile installation in progress, bathroom renovation, San Francisco |
+| `tile-setting-3-min.png` | Kitchen backsplash tile being installed, white subway tile layout |
+| `tile-setting-6-min.png` | Finished shower tile surround with grout, clean professional result |
+| `sheetrocking-1-min.png` | Drywall panels installed and taped in a San Francisco room under renovation |
+| `sheetrocking-3-min.png` | Drywall joint compound being applied, taping and mudding stage |
+| `plumbing-2-min.png` | Bathroom faucet being installed on a vanity, plumbing fixture replacement |
+| `plumbing-5-min.png` | Toilet installation in a San Francisco bathroom, new fixture hookup |
+| `electrical-1-min.jpg` | Ceiling light fixture installation in a San Francisco home, wiring in progress |
+| `electrical-3-min.jpg` | Ceiling fan installation, fan attached to mounting bracket |
+| `grab-bar-min.png` | Stainless steel grab bar installed on bathroom wall, safety upgrade for SF home |
+| `security-garage-door-min.png` | Garage door security hardware and lock installation, San Francisco home |
+| `wood-refinishing-1-min.png` | Hardwood floor being sanded and refinished in a San Francisco home |
+| `wood-refinishing-5-min.png` | Freshly refinished hardwood floor with new stain coat, polished and smooth |
+| `wood-refinishing-9-min.png` | Wood deck refinishing in progress, sanding on outdoor surface |
+| `boat-work-min-scaled.jpg` | Boat maintenance and repair work, marine woodwork in the San Francisco Bay |
+
+For assets not listed here, apply the same formula. Never use a filename as alt text.
+
+**Decorative rule:** If any image is purely decorative (e.g., a visual spacer or background element with no informational content), set `alt=""`. All photo assets in the current library are content images and require descriptive alt text.
+
+### File Naming Convention
+
+The existing assets follow a consistent, SEO-friendly naming convention (`[subject]-[sequence]-min.[ext]`). **No renaming is necessary.** When adding new assets, follow the same pattern:
+
+- Use lowercase and hyphens only (no spaces, no underscores, no camelCase).
+- Lead with the descriptive subject: `carpentry-shelf-1-min.jpg`, `boat-teak-1-min.jpg`.
+- Append `-min` before the extension to indicate it is an optimized/compressed copy.
+- Never include dimensions in the filename for new assets (the `-768x1165` variant in the library is a WordPress artifact; avoid this pattern going forward).
+
+### Image Sitemap
+
+Image sitemap is **out of scope for v1**. The standard `sitemap.xml` is sufficient at launch. Consider an image sitemap in a future iteration if Google Images referral traffic becomes a goal.
+
+---
+
+## 12. Service Area Signals
+
+### On-Page Minimum Requirements
+
+Every page must reference **San Francisco** and **Bay Area** at minimum — in the H1, body copy, or service area block. Service detail pages and the Contact page must include a dedicated **"Service Area"** section in the page body (see `33-frontend-spec.md` §5.3, Section 6 and §5.6).
+
+**Required service area copy (Homepage and Contact page — full version):**
+
+> HER serves San Francisco and the surrounding Bay Area within a 50-mile radius, including Oakland, Berkeley, San Jose, Palo Alto, Daly City, South San Francisco, Burlingame, San Mateo, Redwood City, Menlo Park, Fremont, Alameda, Tiburon, Sausalito, and Marin County.
+
+**Service detail pages — condensed version (embed in the "Serving San Francisco & the Bay Area" section):**
+
+> Diana serves homeowners and property managers throughout San Francisco and the Bay Area — from Oakland and Berkeley to the Peninsula cities of Palo Alto, Burlingame, and San Mateo, and north into Marin County.
+
+### City Coverage Reference
+
+| City / Area | Type | Notes |
+|-------------|------|-------|
+| San Francisco | Primary market | Mention on every page |
+| Oakland | City | East Bay anchor |
+| Berkeley | City | East Bay |
+| San Jose | City | South Bay anchor |
+| Palo Alto | City | Peninsula |
+| Daly City | City | SF adjacency |
+| South San Francisco | City | SF adjacency |
+| Burlingame | City | Peninsula |
+| San Mateo | City | Peninsula |
+| Redwood City | City | Peninsula |
+| Menlo Park | City | Peninsula |
+| Fremont | City | East Bay |
+| Alameda | City | East Bay; marina proximity for Boat Work |
+| Tiburon | City | Marin; marina proximity |
+| Sausalito | City | Marin; marina proximity; high relevance for Boat Work |
+| Marin County | County | Use as area label, not a city |
+
+### SF Neighborhood Signals
+
+Within San Francisco, weave neighborhood names into 1–2 sentences of body copy on relevant service pages. Do not create separate thin pages per neighborhood.
+
+| Neighborhood cluster | High-relevance service pages |
+|---------------------|------------------------------|
+| The Mission, Castro, Noe Valley, Bernal Heights | Painting, Flooring (older Victorian and Edwardian housing stock) |
+| Pacific Heights, Marina, Cow Hollow | Tile Setting, Flooring, Security & Safety (higher-end renovations) |
+| Outer Sunset, Richmond, Excelsior | General services — all pages |
+| SoMa, Potrero Hill, Dogpatch, Mission Bay | Electrical, Carpentry (condo and loft renovations) |
+| South Beach, Marina District | Boat Work (South Beach Harbor, Marina Green proximity) |
+
+---
+
+## 13. Page Speed & Technical SEO Notes
+
+These notes apply to the static site implementation and must be observed by the implementor. (→ ADR-001, ADR-003, NFR-3, NFR-6)
+
+### Static HTML — Crawlability Baseline
+
+Pages are pre-rendered HTML with no client-side rendering. Content is fully indexable by Googlebot on first request without JavaScript execution. No additional render-budget concerns apply (→ NFR-3).
+
+Caddy serves static files directly from disk; no application server latency. TTFB should be well under 200ms on a typical VPS.
+
+### Canonical and Robots Meta (every page's `<head>`)
+
+```html
+<link rel="canonical" href="https://her-sf.com/[path]/" />
+```
+
+- Use HTTPS, the production domain, and a trailing slash. Matches the URL in the sitemap exactly.
+- All pages: no `<meta name="robots">` needed (default is `index, follow`).
+- `/thank-you/` only: add `<meta name="robots" content="noindex, nofollow" />`.
+
+### Google Fonts
+
+Two options in priority order:
+
+1. **Self-host (preferred):** Download the WOFF2 files and serve from `/assets/fonts/`. Reference via `@font-face` in the CSS. This eliminates the third-party DNS lookup entirely and improves LCP.
+2. **Google CDN with `display=swap`:** Add the following in `<head>` before the stylesheet `<link>`:
+   ```html
+   <link rel="preconnect" href="https://fonts.googleapis.com" />
+   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+   ```
+   Use `&display=swap` on the font URL to prevent render-blocking. This is acceptable but sub-optimal for LCP compared to self-hosting.
+
+### Images
+
+Use `<picture>` elements with a WebP source and JPG/PNG fallback. Always include explicit `width` and `height` attributes to allow the browser to reserve layout space and eliminate Cumulative Layout Shift (CLS):
+
+```html
+<picture>
+  <source srcset="/assets/painting-1-min.webp" type="image/webp" />
+  <img
+    src="/assets/painting-1-min.png"
+    alt="Interior wall painting, San Francisco home"
+    width="800"
+    height="600"
+    loading="lazy"
+  />
+</picture>
+```
+
+**Loading strategy:**
+- **Hero images** (above the fold): omit `loading` attribute or use `loading="eager"`. Add `fetchpriority="high"` to the primary hero `<img>` on each page to improve LCP.
+- **Gallery and below-fold images:** use `loading="lazy"`.
+
+**File size targets:**
+- Gallery images: < 150 KB per file.
+- Hero images: < 300 KB per file.
+- OG images (exported separately): < 200 KB per file.
+
+The existing `*-min.*` assets have been through at least one compression pass. Run through [Squoosh](https://squoosh.app/) or `cwebp` to produce WebP variants if not already present.
+
+**Note on WebP availability:** The current asset library consists of `.png`, `.jpg`, and one `.webp` file (`diana_photo-min-1-scaled.webp`). WebP variants of all other assets should be generated as part of the build/asset pipeline. If build tooling is unavailable, the existing PNG/JPG files are valid for v1 launch; add WebP generation in the first post-launch update.
+
+### Third-Party Scripts
+
+No analytics, ad pixels, tag managers, or external widgets are present in v1 (→ ADR-005, NFR-7). This is a meaningful LCP and Total Blocking Time (TBT) advantage. The AWS form endpoint (→ ADR-002) fires only on form submission and adds zero blocking time to initial page render.
+
+Do not introduce any `<script>` loading pattern that blocks the critical rendering path (i.e., no synchronous `<script src="...">` in `<head>` without `defer` or `async`).
+
+### Core Web Vitals Targets
+
+| Metric | Target | How achieved |
+|--------|--------|-------------|
+| LCP (Largest Contentful Paint) | < 2.5 s (mobile) | `fetchpriority="high"` on hero image; self-hosted fonts; compressed WebP |
+| INP (Interaction to Next Paint) | < 200 ms | Minimal JS; no heavy client-side framework |
+| CLS (Cumulative Layout Shift) | < 0.1 | Explicit `width`/`height` on all images; no late-loading layout elements |
+| TTFB (Time to First Byte) | < 200 ms | Caddy serving static files; no application server |
+
+---
+
+## 14. Requirements Traceability
+
+| Spec Section | Requirement / ADR | Description |
+|-------------|-------------------|-------------|
+| §1 — URL Structure | NFR-3 | Static HTML; no content behind client-side rendering; all URLs indexable |
+| §1 — URL Structure | ADR-004 | 9 grouped service pages; slugs established by ADR |
+| §2 — Title Tags | NFR-4 | Each service page must have unique, descriptive metadata targeting service + location |
+| §3 — Meta Descriptions | NFR-4 | Unique, descriptive metadata per page |
+| §4 — Heading Structure | NFR-4 | H1 per page as primary on-page keyword relevance signal |
+| §5 — Schema.org | NFR-3 | Structured data supports rich results; confirms fully indexable content |
+| §5.1 LocalBusiness `areaServed` | FR-9 | Site must clearly state service area: SF + 50-mile radius |
+| §5.3 Person schema | FR-12, FR-18 | About Diana page; highlights experience and credibility |
+| §6 — Open Graph | NFR-4 | Per-page OG images and descriptions for unique social metadata |
+| §7 — sitemap.xml | NFR-5 | Site must include a sitemap.xml |
+| §8 — robots.txt | NFR-5 | Site must include robots.txt; disallow `/thank-you/` |
+| §9 — Content requirements | ADR-004 | Each grouped page must have sufficient unique content to serve its target keywords |
+| §9 — Content requirements | NFR-4 | Keyword + location targeting per service; primary + secondary keyword coverage |
+| §9 — Scope boundaries (Plumbing, Electrical) | FR-11 | Service page content must accurately represent what HER offers |
+| §10 — Internal linking | NFR-3 | Crawlable link structure ensures all pages are discoverable |
+| §11 — Image SEO | NFR-6 | Images optimized and appropriately sized; alt text for accessibility and indexability |
+| §12 — Service area signals | FR-9 | Service area: SF + 50-mile radius stated on every page |
+| §13 — Page speed | NFR-3 | Static HTML; no rendering issues for crawlers |
+| §13 — Page speed | NFR-6 | Fast mobile loading; images compressed; no blocking scripts |
+| §13 — Page speed | ADR-001 | Static site for SEO-friendly, fast, reliable delivery |
+| §13 — Page speed | ADR-003 | Mobile-first; performance budget mindset throughout |
+| §13 — No tracking scripts | ADR-005 / NFR-7 | No analytics, no tracking, no cookie consent banner in v1 |
diff --git a/specification/38-lead-capture-spec.md b/specification/38-lead-capture-spec.md
new file mode 100644
index 0000000..ab29f16
--- /dev/null
+++ b/specification/38-lead-capture-spec.md
@@ -0,0 +1,680 @@
+# 38 — Lead Capture Specification
+## HER — Home Enhancement and Renovation
+
+**Status**: Phase 3 — implementation-ready  
+**Implements**: FR-1, FR-2, FR-3, FR-4, FR-5, FR-6, FR-7 | AC-1, AC-6 | ADR-002  
+**Authority**: This document is the authoritative spec for all form field definitions, validation rules, error states, spam protection, and API integration. `33-frontend-spec.md` §5.6 governs page layout and visual styling; where the two documents overlap, this document takes precedence for behavior and copy.
+
+---
+
+## Table of Contents
+
+1. [Form Fields](#1-form-fields)
+2. [Validation Rules](#2-validation-rules)
+3. [Form UX States](#3-form-ux-states)
+4. [UX Copy](#4-ux-copy)
+5. [AWS SES Integration](#5-aws-ses-integration)
+6. [Spam Protection](#6-spam-protection)
+7. [Accessibility](#7-accessibility)
+8. [Mobile Considerations](#8-mobile-considerations)
+9. [Thank-You / Confirmation](#9-thank-you--confirmation)
+10. [Requirements Traceability](#10-requirements-traceability)
+
+---
+
+## 1. Form Fields
+
+### 1.1 Field Inventory
+
+The form collects five visible required fields plus one hidden honeypot field. All visible fields use the `FormField` component (see `33-frontend-spec.md` §6.7).
+
+| # | Field name | Label | HTML type | `name` attr | `id` attr | `autocomplete` | Required |
+|---|---|---|---|---|---|---|---|
+| 1 | Full Name | `Full name` | `text` | `name` | `field-name` | `name` | Yes |
+| 2 | Service Address | `Service address` | `text` | `address` | `field-address` | `off` | Yes |
+| 3 | Phone | `Phone number` | `tel` | `phone` | `field-phone` | `tel` | Yes |
+| 4 | Email | `Email address` | `email` | `email` | `field-email` | `email` | Yes |
+| 5 | Project Description | `Describe the work` | `textarea` | `description` | `field-description` | `off` | Yes |
+| — | Honeypot | *(none — hidden)* | `text` | `website` | `field-website` | `off` | No |
+
+> **Note on `autocomplete="off"` for address**: Browser autofill for `street-address` fills a billing/home address, which may differ from the *service location*. Using `off` prevents misplaced autofill. This is intentional.
+
+### 1.2 Field Details
+
+#### Full Name
+- **Label**: `Full name`
+- **Placeholder**: `e.g. Jane Smith`
+- **Help text**: *(none)*
+
+#### Service Address
+- **Label**: `Service address`
+- **Placeholder**: `e.g. 123 Market St, San Francisco, CA`
+- **Help text** (visible below label, above input): `"Where is the work located? City or full address."`
+- **Style**: Help text rendered as `<p class="field-hint">` in DM Sans 400, `--text-sm`, `--col-slate`. Sits between label and input, `--space-1` margin below.
+
+#### Phone Number
+- **Label**: `Phone number`
+- **Placeholder**: `e.g. (415) 555-0123`
+- **Help text**: *(none)*
+- **Input mode**: `inputmode="tel"`
+
+#### Email Address
+- **Label**: `Email address`
+- **Placeholder**: `e.g. jane@example.com`
+- **Help text**: *(none)*
+- **Input mode**: `inputmode="email"`
+
+#### Project Description
+- **Label**: `Describe the work`
+- **Placeholder**: `What needs to be fixed, replaced, or improved? Include any relevant details — size, urgency, or special requirements.`
+- **Help text**: *(none; placeholder is the primary guide)*
+- **Element**: `<textarea>`, resizable vertically only (`resize: vertical`)
+- **Min height**: 120px on mobile, 160px on desktop (`md` and above)
+
+#### Honeypot (hidden)
+- **Label**: None — never rendered in the visible DOM
+- **Name / ID**: `name="website"`, `id="field-website"`
+- **Hidden via CSS** (see §6 for exact CSS; do not use `type="hidden"` — bots fill visible fields, not `type="hidden"` ones)
+- **Expected value at submission**: empty string
+- **Behavior if non-empty**: silently discard on client; Lambda also discards and returns `{ "ok": true }` (see §5)
+
+### 1.3 Field Order
+
+The canonical field order — used as DOM order, mobile stacking order, and keyboard tab order — is:
+
+```
+Full Name → Service Address → Phone → Email → Project Description → [Submit]
+```
+
+**Desktop layout note**: `33-frontend-spec.md` §5.6 specifies a two-column desktop layout where Name and Phone appear side-by-side in Row 1. This visual grouping is achieved with CSS Grid `order` properties, *not* by reordering the DOM. The DOM order defined above must be preserved for correct tab/focus sequence.
+
+Desktop CSS grid layout (at `md` breakpoint and above):
+
+```
+[ Full Name (50%)     ] [ Phone (50%)          ]   ← visual row 1 (CSS order: Name=1, Phone=3)
+[ Service Address (100%)                        ]   ← visual row 2 (CSS order: Address=2)
+[ Email Address (100%)                          ]   ← visual row 3 (CSS order: Email=4)
+[ Project Description (100%)                    ]   ← visual row 4 (CSS order: Description=5)
+[                       Submit →                ]   ← visual row 5
+```
+
+DOM order remains: Name, Address, Phone, Email, Description — so keyboard navigation flows logically even with visual rearrangement.
+
+### 1.4 Submit Button
+
+| Property | Value |
+|---|---|
+| Label | `Send My Request` |
+| Component | `Button` (primary variant — see `33-frontend-spec.md` §6.1) |
+| Mobile width | Full-width (100%) |
+| Desktop width | Auto, min-width 200px, right-aligned within form container |
+| Disabled state | While submitting: `aria-disabled="true"`, shows spinner (see §3) |
+
+---
+
+## 2. Validation Rules
+
+### 2.1 Validation Strategy
+
+- **Client-side**: HTML5 native attributes (`required`, `minlength`, `maxlength`, `pattern`) plus JavaScript for on-blur validation and submit-time validation. Do not rely on browser default validation UI — suppress with `novalidate` on the `<form>` element and handle all error rendering in JavaScript.
+- **Server-side (Lambda)**: Re-validate all fields independently. Never trust client-only validation.
+- **Error display**: Inline error messages rendered below each field, inside a `<p role="alert">` element that is always present in the DOM (even when empty). Field errors appear on blur (after first touch) and on submit attempt.
+
+### 2.2 Per-Field Validation Rules
+
+| Field | Required | Min length | Max length | Pattern | Error message |
+|---|---|---|---|---|---|
+| Full Name | Yes | 2 | 100 | *(none beyond length)* | `"Please enter your name."` |
+| Service Address | Yes | 3 | 200 | *(none beyond length)* | `"Please enter the service address or city."` |
+| Phone | Yes | — | — | US phone (see §2.3) | `"Please enter a valid phone number."` |
+| Email | Yes | — | — | Standard email (see §2.3) | `"Please enter a valid email address."` |
+| Project Description | Yes | 10 | 2000 | *(none beyond length)* | `"Please describe your project (at least 10 characters)."` |
+| Honeypot | No | — | — | Must be empty | *(no error shown — silent discard)* |
+
+### 2.3 Pattern Definitions
+
+**Phone** (`name="phone"`):
+```
+^\+?[\d\s\-().]{7,20}$
+```
+Allows: digits, spaces, hyphens, parentheses, plus sign. Minimum 7 characters (shortest valid phone), maximum 20. Accepts US and international formats:
+- `(415) 555-0123`
+- `415-555-0123`
+- `4155550123`
+- `+1 415 555 0123`
+
+**Email** (`name="email"`):
+Use the `type="email"` browser built-in pattern, supplemented by JS check that the value contains at least one `@` and at least one `.` after the `@`. Do not write an overly strict regex — the AWS SES delivery failure is the ultimate validator for undeliverable addresses.
+
+### 2.4 Validation Timing
+
+| Trigger | Behavior |
+|---|---|
+| First focus (untouched field) | No validation; field is in default state |
+| Blur (after first touch) | Validate field; show error if invalid |
+| Input (after field has been touched and errored) | Re-validate on each keystroke; clear error as soon as valid |
+| Submit button click | Validate all fields; show all errors simultaneously; move focus to first invalid field |
+| Successful submission | No field validation (form is replaced or disabled) |
+
+### 2.5 Character Counter (Description Field)
+
+Display a live character counter below the `description` textarea showing `N / 2000 characters`. Counter updates on every keystroke.
+
+- **Style**: DM Sans 400, `--text-xs`, `--col-slate`, right-aligned below textarea.
+- **Warning state** (≥ 1800 characters): color changes to `#B5622A` (`--col-copper`).
+- **Over-limit state** (> 2000 characters): color `#C0392B` (error red), counter reads `2000 / 2000` — the `maxlength` HTML attribute enforces the hard cap and prevents additional input.
+
+---
+
+## 3. Form UX States
+
+The form operates as a client-side state machine with six distinct states.
+
+### 3.1 State Definitions
+
+#### Default
+- All fields empty, no errors shown.
+- Submit button enabled, label `"Send My Request"`.
+- Character counter shows `0 / 2000`.
+- Form element: `aria-busy="false"`.
+
+#### Touched / Dirty (Per-Field)
+- Validation runs on blur for each field independently.
+- If invalid: inline error message appears below the field (`role="alert"`), field border changes to error red (`#C0392B`), `aria-invalid="true"` set on the input.
+- If valid: error message cleared, border returns to default (`--col-chalk`), `aria-invalid="false"`.
+- Other fields are unaffected.
+
+#### Submitting
+- Triggered when user clicks submit and all fields pass client-side validation.
+- Submit button: spinner replaces button text, `aria-disabled="true"`, visually disabled (opacity 0.7, `cursor: not-allowed`). Do not use `disabled` attribute — this removes the element from tab order.
+- All form fields: `disabled` attribute added (prevents editing during in-flight request).
+- Form element: `aria-busy="true"`.
+- No duplicate submissions possible while in this state.
+- Spinner: 20×20px animated SVG ring, `--col-linen` color on copper button background.
+
+#### Success
+- Triggered on HTTP 200 response with `{ "ok": true }`.
+- The form element is hidden (`display: none` or removed from DOM).
+- The `FormFeedback (success)` component is rendered in its place (see §4.1 for exact copy).
+- Focus is moved programmatically to the success message heading (`<h2>` or `<h3>` within the feedback block).
+- The success component has `role="status"` and `aria-live="polite"` (see §7).
+
+#### Error — Network / Server
+- Triggered on: HTTP non-200 response, network failure, `{ "ok": false }` in response body, or unhandled exception.
+- Form fields are re-enabled (remove `disabled`).
+- Submit button returns to normal state.
+- Form element: `aria-busy="false"`.
+- `FormFeedback (error)` banner is rendered above the submit button (see §4.2 for exact copy). The form itself remains visible and filled — user does not lose their input.
+- Focus is moved programmatically to the error banner heading.
+- The error banner has `role="alert"` and `aria-live="assertive"` (see §7).
+
+#### Partial Error — Field-Level from Server
+- Triggered when Lambda returns `{ "ok": false, "error": "..." }` with a field-level message (e.g., a field failed server-side validation).
+- The specific field is highlighted with error styling and `aria-invalid="true"`.
+- The field-level error message is rendered in that field's error slot.
+- The network/server error banner is also shown (degraded trust signal).
+- Focus is moved to the first affected field.
+
+### 3.2 State Transition Diagram
+
+```
+Default
+  │
+  ├─(user types/tabs)──→ Touched/Dirty (per field)
+  │
+  ├─(submit, valid)────→ Submitting
+  │                           │
+  │                           ├─(200, ok:true)──→ Success  [terminal]
+  │                           │
+  │                           └─(error)─────────→ Error (Network/Server)
+  │                                                    │
+  │                                                    └─(user edits & resubmits)──→ Submitting
+  │
+  └─(submit, invalid)──→ Touched/Dirty (all fields) + focus → first error
+```
+
+---
+
+## 4. UX Copy
+
+All copy is final and must be used verbatim. Placeholders in brackets (`[phone]`, `[email]`) must be replaced with Diana's actual contact details at implementation.
+
+### 4.1 Page Intro Lead
+
+Rendered as the lead paragraph (`<p>`) in the `/contact/` page hero, below the H1. (See `33-frontend-spec.md` §5.6 Section 2.)
+
+> "Tell Diana about your project. She responds within 1–2 business days."
+
+Styling: DM Sans 400, `--text-lg`, `--col-ink`.
+
+### 4.2 Success Message (FormFeedback — success variant)
+
+Shown in place of the form after a successful submission. Component: `FormFeedback (success)` (`33-frontend-spec.md` §6.8).
+
+**Heading**:
+> "Your request is on its way!"
+
+**Body**:
+> "Diana will review your request and get back to you within 1–2 business days. If your project is urgent, you can also reach her directly at [phone] or [email]."
+
+- `[phone]` renders as a `<a href="tel:[phone]">[phone]</a>` link.
+- `[email]` renders as a `<a href="mailto:[email]">[email]</a>` link.
+- Both links use `--col-copper` color, `text-decoration: underline`.
+
+Implementation note — contact detail placeholders:
+- Phone: `(415) XXX-XXXX` (replace at implementation — see §5.6 §4 "Secondary Contact Info" in `33-frontend-spec.md`)
+- Email: `diana@example.com` (replace at implementation)
+
+### 4.3 Network / Server Error Message (FormFeedback — error variant)
+
+Shown as a banner above the submit button while the form remains visible. Component: `FormFeedback (error)` (`33-frontend-spec.md` §6.8).
+
+**Heading**:
+> "Something went wrong."
+
+**Body**:
+> "We couldn't send your request. Please try again, or contact Diana directly at [phone] or [email]."
+
+- Same link treatment as §4.2.
+- Form fields remain filled and editable.
+
+### 4.4 Field-Level Error Copy (reference)
+
+See §2.2 for the authoritative error message text for each field. Reproduced here for convenience:
+
+| Field | Error message |
+|---|---|
+| Full Name | `"Please enter your name."` |
+| Service Address | `"Please enter the service address or city."` |
+| Phone | `"Please enter a valid phone number."` |
+| Email | `"Please enter a valid email address."` |
+| Description | `"Please describe your project (at least 10 characters)."` |
+
+---
+
+## 5. AWS SES Integration
+
+Implements ADR-002. Resolves OQ-3 (endpoint URL and recipient email are deferred to implementation).
+
+### 5.1 Endpoint
+
+| Property | Value |
+|---|---|
+| URL | TBD — provided at implementation (see ADR-002, OQ-3) |
+| Method | `POST` |
+| Content-Type | `application/json` |
+| Auth | None (public endpoint) |
+| CORS | API Gateway must allow the production site origin (e.g. `https://her-home.com`) |
+
+Store the endpoint URL as a build-time environment variable or a configuration constant (e.g. `FORM_ENDPOINT_URL`). Do not hardcode the URL in form markup.
+
+### 5.2 Request Payload
+
+The client sends a single JSON object. All string values are trimmed of leading/trailing whitespace before sending.
+
+```json
+{
+  "name": "string",
+  "address": "string",
+  "phone": "string",
+  "email": "string",
+  "description": "string",
+  "honeypot": "string"
+}
+```
+
+| Field | Type | Notes |
+|---|---|---|
+| `name` | string | Trimmed, non-empty |
+| `address` | string | Trimmed, non-empty |
+| `phone` | string | Trimmed, non-empty |
+| `email` | string | Trimmed, lowercase, non-empty |
+| `description` | string | Trimmed, non-empty, max 2000 chars |
+| `honeypot` | string | Always sent; value is `""` for legitimate submissions |
+
+### 5.3 Lambda Responsibilities
+
+The Lambda function is the authoritative gatekeeper and must enforce all rules independently of client validation.
+
+**Processing order**:
+
+1. **Honeypot check**: If `honeypot` field is a non-empty string, log the discarded submission (for monitoring), return HTTP 200 `{ "ok": true }`. Do not signal to the client that the submission was discarded.
+
+2. **Server-side field validation**: Verify all five required fields (`name`, `address`, `phone`, `email`, `description`) are non-empty strings after trimming. If any fail, return HTTP 200 `{ "ok": false, "error": "Missing required fields." }`.
+
+3. **SES send**: Call AWS SES `SendEmail` with the formatted email (see §5.4).
+
+4. **Success response**: On successful SES send, return HTTP 200 `{ "ok": true }`.
+
+5. **SES error**: On SES failure, log the error (CloudWatch), return HTTP 200 `{ "ok": false, "error": "Failed to send email. Please try again." }`.
+
+### 5.4 Email Formatting
+
+**Recipient**: Diana's inbox (address configured in Lambda environment variable `SES_RECIPIENT` — set at implementation)  
+**Sender**: A verified SES sender identity (e.g. `noreply@her-home.com`) — configured at implementation  
+**Reply-To**: The submitting user's email address (so Diana can reply directly from her email client)
+
+**Subject line**:
+```
+New Quote Request from [name]
+```
+
+**Plain-text body**:
+```
+New quote request received via HER website.
+
+Name:    [name]
+Phone:   [phone]
+Email:   [email]
+Address: [address]
+
+Project Description:
+[description]
+
+---
+Submitted at: [ISO 8601 timestamp in UTC]
+```
+
+**HTML email**: Optional enhancement — not required for v1. Plain-text body is sufficient.
+
+### 5.5 Response Handling (Client)
+
+| Scenario | Client action |
+|---|---|
+| `200 { "ok": true }` | Show success state (§3.1 Success) |
+| `200 { "ok": false, "error": "..." }` | Show error banner (§3.1 Error) |
+| `429 Too Many Requests` (AWS WAF rate limit) | Show error banner with copy: `"Too many requests. Please wait a moment and try again."` |
+| Network error (no response) | Show error banner |
+| Any non-200, non-429 HTTP status | Show error banner |
+
+### 5.6 HTTP Status Code Policy
+
+The Lambda **always returns HTTP 200** to the client, with success/failure detail in the JSON body. This policy:
+
+- Prevents browser retry behavior triggered by 5xx responses.
+- Keeps error handling logic entirely in JavaScript, not in HTTP status handling.
+- Makes CORS error handling simpler.
+
+**Exception**: AWS WAF may return `429 Too Many Requests` before the request reaches Lambda. The client must handle this status code explicitly (see §5.5).
+
+### 5.7 Timeout Handling
+
+- Client-side fetch timeout: **10 seconds**. If no response is received within 10 seconds, abort the request and show the error banner.
+- Implementation: use `AbortController` with a 10-second timeout signal passed to `fetch()`.
+
+---
+
+## 6. Spam Protection
+
+### 6.1 Honeypot Field (Primary)
+
+The honeypot is the primary spam protection mechanism in v1. It requires no third-party service and adds no friction for real users.
+
+**Field definition**:
+- `name="website"`, `id="field-website"`, `type="text"`
+- No `<label>` element rendered in the DOM.
+- Never autofocused or tab-accessible.
+
+**CSS hiding** (applied via a utility class, e.g. `.visually-trap`):
+```css
+.visually-trap {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  tabindex: -1;        /* set as HTML attribute, not CSS */
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+```
+
+> **Do not use `display: none` or `visibility: hidden`** — many bots skip fields with these styles. CSS-based hiding that leaves the element in the normal document flow is more effective.
+
+**Client-side behavior**: Before submitting, check `document.getElementById('field-website').value`. If non-empty, do not call the API — immediately transition to success state (silent discard).
+
+**Server-side behavior**: Lambda checks `honeypot !== ""` → return `{ "ok": true }` without sending email.
+
+### 6.2 AWS WAF Rate Limiting (Recommended)
+
+Configure an AWS WAF Web ACL on the API Gateway with a basic rate-based rule:
+
+| Parameter | Recommended value |
+|---|---|
+| Rule type | Rate-based |
+| Rate limit | 5 requests per IP per 5 minutes |
+| Action | Block (returns 429) |
+| Scope | API Gateway stage |
+
+This is a **recommendation for implementation**, not a blocking requirement for this spec. The client must handle 429 responses gracefully (see §5.5).
+
+### 6.3 No CAPTCHA (v1)
+
+No CAPTCHA or challenge-based verification is used in v1, per FR-2 (form must be lightweight). If spam volume becomes a problem post-launch, the recommended escalation path is:
+
+1. Tighten AWS WAF rate rules.
+2. Add Cloudflare Turnstile (invisible challenge, no user interaction required for most users).
+3. As a last resort, add hCaptcha or reCAPTCHA v3.
+
+---
+
+## 7. Accessibility
+
+All form accessibility requirements conform to WCAG 2.1 AA. These requirements supplement `33-frontend-spec.md` §9.
+
+### 7.1 Labels
+
+- Every visible input and textarea has a corresponding `<label>` element.
+- Labels are associated via matching `for` (on label) and `id` (on input) attributes.
+- Labels are always visible — never hidden, never replaced by placeholder-only patterns.
+- Label text is DM Sans 500, `--text-sm`, `--col-graphite` (see `FormField` component).
+
+### 7.2 Error Message Regions
+
+- Each field has a sibling `<p>` element for its error message (e.g. `id="error-name"`), present in the DOM at all times.
+- When no error: element is empty (`""`) and has `aria-hidden="true"`.
+- When error present: element contains the error text, has `role="alert"`, and `aria-hidden` is removed (or set `"false"`).
+- Error messages are injected — not toggled with CSS `display` — to ensure screen reader announcement.
+
+### 7.3 `aria-describedby` on Fields
+
+Each input/textarea carries `aria-describedby` pointing to both the help text element (if present) and the error element, even when empty:
+
+```html
+<input
+  id="field-address"
+  name="address"
+  type="text"
+  aria-describedby="hint-address error-address"
+  aria-invalid="false"
+  ...
+/>
+<p id="hint-address" class="field-hint">Where is the work located? City or full address.</p>
+<p id="error-address" role="alert" aria-hidden="true"></p>
+```
+
+### 7.4 `aria-invalid`
+
+- Default state: `aria-invalid="false"` on all fields.
+- On validation failure: `aria-invalid="true"`.
+- On validation pass (after error): `aria-invalid="false"` restored.
+
+### 7.5 Submitting State
+
+- Form element: `aria-busy="true"` while request is in-flight.
+- Submit button: `aria-disabled="true"` (not `disabled` — button stays focusable and announces its state).
+- Button label updated to `"Sending…"` (visible text) while in submitting state.
+
+### 7.6 Success State
+
+- Success message container: `role="status"`, `aria-live="polite"`.
+- On render, focus is programmatically moved to the success heading element.
+- Success heading must be a heading element (`<h2>` or `<h3>`) — not a `<p>` or `<div>` — so it is discoverable by screen reader heading navigation.
+
+### 7.7 Error Banner State
+
+- Error banner container: `role="alert"`, `aria-live="assertive"`.
+- On render, focus is programmatically moved to the error banner heading element.
+- The banner must be in the DOM before the error occurs (with empty content), or be inserted immediately before focus is moved — do not rely on `aria-live` alone for focus; use explicit `focus()`.
+
+### 7.8 Focus Management Summary
+
+| State transition | Focus moves to |
+|---|---|
+| Submit with validation errors | First invalid field's `<input>` or `<textarea>` |
+| Submitting → Success | Success message heading |
+| Submitting → Error (network/server) | Error banner heading |
+| Submitting → Partial field error (server) | First errored field's `<input>` |
+
+### 7.9 Keyboard Navigation
+
+- Tab order follows DOM order: Name → Address → Phone → Email → Description → Submit.
+- All interactive elements are reachable via Tab and operable via Enter/Space.
+- No keyboard traps.
+- Submit button is reachable via Tab and activates on Enter.
+
+---
+
+## 8. Mobile Considerations
+
+All requirements here supplement `33-frontend-spec.md` §3 (breakpoints) and ADR-003 (mobile-first).
+
+### 8.1 Layout
+
+- All fields are full-width (100%) on mobile (below `md` breakpoint).
+- Fields stack vertically in DOM order: Name → Address → Phone → Email → Description → Submit.
+- Submit button is full-width on mobile.
+- Gap between stacked fields: `--space-3` (24px).
+
+### 8.2 `inputmode` Attributes
+
+| Field | `inputmode` value | Effect |
+|---|---|---|
+| Phone | `tel` | Numeric keypad with `+`, `-`, `(`, `)` on iOS and Android |
+| Email | `email` | Keyboard with `@` and `.com` shortcut keys |
+| All others | *(not set — default)* | Standard text keyboard |
+
+### 8.3 `autocomplete` Attributes
+
+| Field | `name` attr | `autocomplete` attr |
+|---|---|---|
+| Full Name | `name` | `name` |
+| Phone | `phone` | `tel` |
+| Email | `email` | `email` |
+| Service Address | `address` | `off` |
+| Description | `description` | `off` |
+| Honeypot | `website` | `off` |
+
+> **Address `autocomplete="off"` rationale**: Prevents browser/OS autofill from inserting the user's home or billing address into a field intended for the *service location*. A homeowner in Oakland requesting work at a rental in San Francisco must not have Oakland autofilled. See §1.2.
+
+### 8.4 Textarea Sizing
+
+| Breakpoint | Min height |
+|---|---|
+| Mobile (default) | 120px |
+| Desktop (`md` and above) | 160px |
+
+Textarea is resizable vertically only (`resize: vertical`). Max height is not constrained (user may expand freely).
+
+### 8.5 Touch Targets
+
+- All inputs and the submit button have a minimum tap target height of 44px, per `33-frontend-spec.md` §9.3.
+- Submit button padding: at minimum `--space-2` (16px) top/bottom, `--space-4` (32px) left/right.
+- Field labels tap targets include the input below them (clicking label focuses input via `for`/`id` association).
+
+### 8.6 Viewport and Keyboard Behavior
+
+- The `<meta name="viewport" content="width=device-width, initial-scale=1">` tag must be present (standard; prevents double-tap zoom breaking on iOS).
+- On mobile, when a field is focused, the virtual keyboard pushes the viewport up. The form container must not use `overflow: hidden` in a way that clips the active field below the keyboard.
+- Do not use `position: fixed` on the form or its container on mobile.
+
+---
+
+## 9. Thank-You / Confirmation
+
+### 9.1 Options
+
+Two approaches are available. The choice is flagged as **Open Question OQ-7** (see below).
+
+#### Option A — In-Page Success State (No Redirect)
+
+After successful submission, the form is hidden and the `FormFeedback (success)` component renders in its place on `/contact/`. No navigation occurs.
+
+**Pros**: Simpler implementation, no extra page to maintain, success copy is already on the page.  
+**Cons**: If the user hits browser Back and then Forward, they may see the form in its original empty state. Duplicate submission via Back → Re-submit is prevented by client state (form resets to Success state on remount, or history state is used).
+
+#### Option B — Redirect to `/thank-you/`
+
+After `{ "ok": true }`, the client performs `window.location.href = '/thank-you/'`. The `/thank-you/` page renders the success message as a full page.
+
+**Pros**: Eliminates back-button resubmission (form is gone from history); clean URL for conversion tracking if analytics are added later.  
+**Cons**: Requires a separate HTML page; slightly more complex routing.
+
+**`/thank-you/` page requirements** (if Option B is chosen):
+- Full standalone page with nav and footer.
+- H1: `"Your request is on its way!"`
+- Body copy: same as §4.2 success message.
+- `noindex` meta tag: `<meta name="robots" content="noindex, follow">`.
+- Included in `sitemap.xml` as `changefreq="never"` with no `<priority>` set — or excluded entirely if the sitemap is filtered to indexable pages only (see `37-seo-content-spec.md`).
+- No form on this page.
+
+### 9.2 Open Question — OQ-7
+
+> **OQ-7**: Should successful form submission stay on `/contact/` (Option A — in-page success state) or redirect to `/thank-you/` (Option B — separate page)?
+>
+> **Recommendation**: Option A for v1, given that there is no analytics in v1 (ADR-005) and the redirect's primary benefit (conversion tracking) does not apply. Revisit if analytics are added later.
+>
+> **Decision needed from**: Diana / project owner.  
+> **Blocking**: Implementation of `38-lead-capture-spec.md`.
+
+---
+
+## 10. Requirements Traceability
+
+### 10.1 Functional Requirements
+
+| Requirement | Description | How this spec satisfies it |
+|---|---|---|
+| **FR-1** | Quote form accessible within 1–2 taps from any page | Form lives at `/contact/`; nav CTA "Get a Quote" links there from all pages (persistent nav) |
+| **FR-2** | Form must be lightweight (no file uploads) | Five text fields only; no file input; no CAPTCHA in v1 (§6.3) |
+| **FR-3** | Form collects Name, Address, Phone, Email, Description | All five fields defined in §1.1 with types, labels, and validation |
+| **FR-4** | Clear confirmation and next-steps after submission | Success state (§3.1) and success copy (§4.2) specify exact heading + body with timeline and fallback contact |
+| **FR-5** | Submissions delivered via existing AWS service | API Gateway + Lambda + SES integration fully specified in §5 |
+| **FR-6** | Prominently expose form, email, and phone | Form is the primary channel; email and phone appear in success copy (§4.2) and error copy (§4.3) |
+| **FR-7** | Secondary channels (email, phone) in header/footer and post-submission | Phone and email are clickable links in both success and error messages (§4.2, §4.3); header/footer governed by `33-frontend-spec.md` |
+
+### 10.2 Acceptance Criteria
+
+| Criterion | How this spec satisfies it |
+|---|---|
+| **AC-1** | Visitor can reach the quote form in 1–2 taps from any page | Fulfilled by persistent nav CTA (FR-1 above); this spec defines what happens after the user arrives at `/contact/` |
+| **AC-6** | Secondary contact channels visible in header/footer and post-form confirmation | Success copy (§4.2) and error copy (§4.3) include phone and email as clickable links; requirement is met on form submission regardless of which page section is displayed |
+
+### 10.3 Architecture Decision Records
+
+| ADR | Decision | Relevance to this spec |
+|---|---|---|
+| **ADR-001** | Static website delivery | Form submission requires a dynamic backend; satisfied by API Gateway + Lambda (no server-side rendering required on the static site) |
+| **ADR-002** | Form backend: AWS SES via API Gateway + Lambda | Directly implemented in §5; endpoint URL and SES recipient deferred to implementation per ADR-002 status |
+| **ADR-003** | Mobile-first, performance-first design | §8 specifies mobile layout, `inputmode`, `autocomplete`, touch targets; no heavy JS frameworks; fetch API only |
+| **ADR-005** | No analytics in v1 | Influences §9 recommendation: in-page success state (Option A) preferred since redirect's conversion-tracking benefit doesn't apply without analytics |
+
+### 10.4 Open Questions (from `99-open-questions.md`)
+
+| OQ | Status | Impact on this spec |
+|---|---|---|
+| **OQ-3** | Resolved (endpoint URL deferred) | API endpoint URL is a build-time constant (§5.1); recipient email is a Lambda env var (§5.4) — both set at implementation |
+| **OQ-7** | New — raised by this spec | Thank-you page vs. in-page success (§9); must be decided before implementation |
+
+### 10.5 Cross-Document References
+
+| Document | Relationship |
+|---|---|
+| `33-frontend-spec.md` §5.6 | Defines `/contact/` page layout, hero copy, secondary contact section, and desktop two-column grid; this spec governs behavior and copy within the form |
+| `33-frontend-spec.md` §6.7 `FormField` | Component used by all visible fields |
+| `33-frontend-spec.md` §6.8 `FormFeedback` | Component used for success and error states |
+| `33-frontend-spec.md` §6.1 `Button` | Submit button component |
+| `33-frontend-spec.md` §9 Accessibility | Form accessibility requirements; §7 of this spec extends them |
+| `37-seo-content-spec.md` | `noindex` handling for `/thank-you/` if Option B is chosen |
+| `99-open-questions.md` | OQ-3 (resolved), OQ-7 (new — added by this spec) |
diff --git a/specification/99-open-questions.md b/specification/99-open-questions.md
index bca864c..7bc2c8b 100644
--- a/specification/99-open-questions.md
+++ b/specification/99-open-questions.md
@@ -42,6 +42,16 @@ This log tracks uncertainties and deferred decisions. Each item should be resolv
 
 - **Rationale**: Carpentry and Mounting share the same installation/assembly search intent. Flooring touch-ups and Wood Refinishing share the same surface/finish search intent and existing image assets.
 
+## OQ-7 — Thank-you page vs. in-page success state after form submission
+- **Status**: Open — raised by `38-lead-capture-spec.md`
+- **Question**: After a successful form submission, should the site stay on `/contact/` and show an in-page success state (Option A), or redirect to a dedicated `/thank-you/` page (Option B)?
+- **Options**:
+  - **Option A (recommended for v1)**: In-page success state. Form is replaced by `FormFeedback (success)` component on `/contact/`. Simpler. No redirect. No extra page to maintain. Fits v1 since there is no analytics to track conversion events (ADR-005).
+  - **Option B**: Redirect to `/thank-you/`. Prevents back-button resubmission. Better for conversion tracking when analytics are added later. Requires a separate HTML page with `noindex`.
+- **Recommendation**: Option A for v1. Revisit when/if analytics are added.
+- **Blocking**: Implementation of `38-lead-capture-spec.md`.
+- **Decision needed from**: Diana / project owner.
+
 ## OQ-6 — Brand naming and domain
 - **Status**: Resolved
 - **Resolution**: New public-facing brand name is **"Home Enhancement and Renovation — HER"**.