# Section catalogue & image map

The single page runs top to bottom in this order. Each section is in the canonical
`templates/index.html`; this is the map, not a rebuild instruction.

| # | Section | What it is | Images |
|---|---|---|---|
| 1 | Top nav | Centred logo, deep links left, utility links right; collapses to a hamburger drawer ≤ 1240px | `logo.png` |
| 2 | Hero | Up to 10-slide JS rotator with a slow Ken-Burns push-in (reduced-motion holds slide 1); floating info-card with tag, name, strapline, tagline, four credential cells, links, CTA | `hero-01..10.webp` |
| 3 | Sticky sub-nav | Reveals after the hero scrolls past | — |
| 4 | About (Story) | Eyebrow + headline + two drop-capped paragraphs | grid after: `grid-01..04` |
| 5 | What we do | Headline + three paragraphs (each a `<strong>` lead-in) | grids: `grid-05..08` |
| 6 | How we work | Headline + three paragraphs | full-bleed `fullbleed-01`; grid `grid-09..12` |
| 7 | Founder / team-lead | Portrait + intro + quote + ethos; a feature image and a second figure, bottom-aligned; three "latest update" cards. Optional — drop when there is no single figurehead | `founder-portrait`, `feature-project`, `gift` |
| 8 | Testimonial | Dark band: an image + verbatim client quote (highlight clause) + small avatar | `testimonial`, `founder-avatar` |
| 9 | Services | 3×2 grid of up to six services (name + one-line description) | — |
| 10 | Why-us / key facts | 3-column grid of six key/value facts + footnote | — |
| 11 | FAQ | Answer-first Q/A (matched by `FAQPage` JSON-LD) — answer-engine lift targets | — |
| 12 | CTA strip | Accent band: tagline eyebrow, headline, phone / mobile / enquiry | — |
| 13 | Footer | Contact column + legal paragraph (bottom-aligned) + colophon with the icon | `icon.png` |
| — | Back-to-top | Fixed button, fades in past the hero | — |

The section anchors are `#story` (About), `#offer` (What we do), `#how` (How we
work), `#founder`, `#words` (Testimonial), `#services`, `#facts`, `#faq`.

## Image-naming convention

Curate the operator's photos into these names under `site/images/` (webp):

- `hero-01..hero-10` — rotator. Pick varied, strong shots; lead with the best
  "arrive here" image. The rotator cycles however many `.hero-slide` elements
  exist, so fewer than 10 is fine — just delete the surplus slides.
- `grid-01..grid-12` — photo grids, in document order.
- `fullbleed-01` — the one full-width intermission image (a wide, strong shot).
- `founder-portrait` (tall) and `founder-avatar` (square crop) — the person, if
  the business has a figurehead.
- `feature-project`, `gift` — the founder-section feature image and second figure.
- `testimonial` — the image beside the client quote.
- `logo.png`, `icon.png` — from `brand-extract`.

A photo of a **person** belongs only in the founder/testimonial slots and the
portrait social tile. It is never a hero-rotator landscape crop (the head gets cut).

## Honesty notes

- The 10-slide hero and the full grid set assume a reasonably deep photo library.
  With fewer photos, reduce slides and drop grids rather than repeating images.
- Alts must describe the actual photo. The template ships alt **tokens**, not
  sentences — every `{{ *_ALT }}` is filled from the real image, verified by eye,
  never trusted from a filename.
- The founder section, the testimonial, and any service cell can be dropped when
  the business does not have that thing. A shorter honest page beats a padded one.