# Recommendation — Sir Box-A-Lot Visual Direction

## Bottom line

**Lead with Variant 3 (Bold Mover Energy), with two specific structural grafts from Variant 2 and one spacing graft from Variant 1.** Not "take the best of each" in the abstract — the exact elements are listed below.

## Why Variant 3 as the base

The existing, already-strong brand line — *"Strong backs. Careful hands. We hustle."* — is a blue-collar, confident, physical-labor promise. Variant 3 is the only one of the three that visually *is* that line before a visitor reads a word of copy: condensed industrial type, high contrast, hard-edged shadows, a full-bleed dark hero. Variant 1 (warm editorial) undersells that energy — it reads more like a boutique furniture restorer than a crew that hustles. Variant 2 (structured confidence) is the safest, broadest-appeal option, but it's also the one most likely to blend into the same navy/orange home-services template every competitor already uses; it doesn't give the business anything to be *remembered* for.

Bold Mover Energy is the higher-risk, higher-reward pick — it needs disciplined execution (real crew photography, no gimmicky overuse) to land, but it's the direction most likely to make Sir Box-A-Lot look different from every other local mover, not just competent.

## Exact hybrid elements to graft in

1. **Replace Variant 3's horizontal step-chip row on `/quote/details` (desktop) with Variant 2's sticky left-rail vertical stepper**, re-skinned in Variant 3's palette (black rail, orange "current" dot, hard 2px border instead of Variant 2's soft shadow). A 4-step detail flow benefits from a persistent "you are here" rail more than a chip row that scrolls out of view — and this directly serves the audit's core finding that the site's multiple quote experiences currently feel disconnected. A rail reinforces "you're still in one continuous process," which matters more here than in the shorter 3-step homepage form (where Variant 3's chip row is fine as-is).

2. **Keep Variant 3's already-separated calm form-input treatment** (thin neutral border, standard focus ring — not the hard-shadow/neubrutalist treatment applied to marketing buttons and cards). This was a deliberate choice in the V3 prototype already; the recommendation is to preserve it explicitly rather than let a future implementer "complete the bold look" by applying hard shadows to every input, which would fight the customer for attention while they're filling out a quote.

3. **Borrow Variant 1's more generous spacing rhythm** (32/48/64px section padding, hairline dividers instead of heavy borders) for lower-urgency, trust-building content — the About page, testimonials, FAQ — while keeping Variant 3's tighter rhythm and hard borders for the hero, pricing, and CTA bands. Full-page Neubrutalist density (V3 as shipped) is effective in short bursts but would fatigue a visitor scrolling a long About or Services page; V1's calmer rhythm is the better fit for read-heavy sections that aren't trying to convert on that scroll.

## What NOT to change

- Do not soften Variant 3's palette toward pastel or reduce border weight "to be safe" — the whole point of this direction is committing to the contrast. A watered-down version of V3 loses the differentiation that justifies picking it over Variant 2 in the first place.
- Do not carry Variant 1's serif display font into the hybrid — mixing Oswald (V3) and Fraunces (V1) headline type in the same system would undercut the industrial character that makes V3 work.

## If Daryl prefers the lower-risk path instead

Variant 2 (Structured Confidence) is the correct fallback if the priority is broad, fast-scanning credibility over memorability — for example, if paid search/ads traffic and immediate trust-at-a-glance matter more than brand differentiation right now. It needs the least "execution discipline" to look right and would be the safer pick for a team without strong photography/content resources yet.

## What Daryl should compare first

1. Open all three at `index.html`, then look at each prototype's `/quote/details` continuation screen specifically (tab 2) — that's the more consequential screen for conversion, not the homepage hero.
2. Compare Variant 2's sidebar stepper against Variant 3's chip row side-by-side — this is the one piece of this recommendation most worth a second opinion, since it's a judgment call about how much structural weight a 4-step optional-detail flow needs.
3. Decide primary direction first; the specific hybrid grafts above are refinements, not a prerequisite to choosing.

## Not decided here

This recommendation is visual system only. Copy voice, the `/contact` vs. `/quote` vs. homepage-flow consolidation, and the "Needs estimator review" field-exposure question are covered by the separate, still-pending `WEBSITE-INTEGRATED-COPY-FORM-RECOMMENDATION.md` and are out of scope for this deliverable.