# Variant 3 — Bold Mover Energy

## Design stance and emotional goal

The hardworking, job-site-honest version of the brand — high contrast, condensed industrial type, hard-edged shadows. The goal is to make "Strong backs. Careful hands. We hustle." feel true on sight, before a single word is read. Best-fit customer perception: *"These people will actually show up and outwork the job."*

## Color tokens

| Token | Hex | Use | Contrast note |
|---|---|---|---|
| `--bg` | `#FAFAF7` | Page background (warm paper) | |
| `--ink` | `#111111` | Header/footer, structural borders, primary text | ~21:1 on white (max AAA) |
| `--text-secondary` | `#3F3F3F` | Secondary text | ~10.9:1 on `--bg` (AAA) |
| `--accent` | `#EA580C` | Primary CTA fill, highlighted headline word | Verified for large-text/UI (3:1+) with white bold text — **not used for small body text** |
| `--steel` | `#1E3A5F` | Reserved secondary accent (badges) | |
| `--error` | `#DC2626` | Error state | 4.8:1 on `--error-bg` |
| `--border` (chrome) | `#111111` | Thick 2–3px structural borders on marketing chrome | |
| `--border-soft` | `#D9D9D2` / `#C9C9C2` | Form input borders (deliberately lighter — see below) | |

## Typography

**Oswald** (500–700, condensed) for headings, set in uppercase — reads as industrial/job-site rather than fashion-poster. **Barlow** (400–700) for body copy — a humanist grotesque workhorse that keeps long-form text readable despite the bold shell around it. Type scale: H1 `clamp(2.3rem,5vw,3.8rem)` / H2 `clamp(1.6rem,3vw,2.3rem)` / H3 `1.05rem`, tight 1.05 heading line-height for a stacked, punchy hero.

## Layout

Container max-width 1180px. The signature structural difference from Variants 1–2: a **full-bleed black hero band** with the quote card rendered as a white card that physically overlaps the section boundary below it (negative margin), so it reads as a distinct object breaking out of the dark hero rather than sitting inside a light page. Tighter 8/16/24/32/48 spacing rhythm than the other two variants.

## Borders, radius, shadow

Radius is deliberately minimal: 0–4px everywhere. Shadows are **hard-offset, not blurred** (`4px 4px 0 #111111`), a Neubrutalist/Bauhaus-derived token — pressed/active states shift the element `translate(2–3px, 2–3px)` and collapse the shadow to zero, rather than just darkening the fill. This is applied to marketing chrome (buttons, cards) only.

## Buttons and form controls

Primary CTA: safety-orange fill, black border, hard shadow, uppercase bold label, snaps flat on press (no elastic motion — an instant `0ms`-feeling snap is the style's signature, not a bounce). **Deliberately excluded from the hard-shadow treatment: the form's actual text inputs**, which use a calmer thin border and standard focus ring — so the bold marketing shell doesn't fight the customer for attention while they're filling out the quote form. Labels are uppercase with letter-spacing to match the display type; body copy inside fields stays normal case for legibility.

## Cards and sections

Info cards and pricing cards use 2.5px solid borders and hard-offset shadows; the featured pricing card inverts to a solid black card with white text for maximum contrast rather than an accent-color border.

## Icons

Heavier stroke weight (2–2.6px) than the other two variants, sized slightly larger (18–22px) — the one variant where a bolder icon weight is intentional and matches the type's boldness.

## Motion

Kept to Subtle/Standard tiers despite the bold visual language — press states are instant snaps, not bounces or elastic overshoot, which satisfies "bold energy" without violating the no-decorative-motion constraint. Fully disabled under `prefers-reduced-motion: reduce`.

## Mobile

Single breakpoint at 900px. The overlapping hero card's negative margin is reduced (not removed) to avoid excessive overlap on short viewports; the step-chip progress row wraps to a 2×2 grid instead of a single row. All interactive controls verified ≥44×44px.

## Strengths

- Most memorable and ownable of the three — hardest for a competitor to casually copy.
- Directly visualizes the existing brand line ("Strong backs. Careful hands. We hustle.") instead of just stating it.
- High contrast is inherently accessible-friendly for body text (black-on-white ≈ 21:1).

## Trade-offs

- Highest risk of feeling "loud" if not paired with restrained, high-quality photography — bold type + hard shadows can tip into gimmicky without disciplined execution.
- The uppercase display type needs a careful eye on line length; very long headline copy would need a smaller size than shown here.

## Best fit

Customers who respond to directness and physical-labor honesty over polish — likely to perform well in geographic/local-competitive markets where "we actually work hard" is a real differentiator against slicker, more corporate movers.