How It's Made — Hawkeye Home Inspections

01 · The concept

You're not hiring a person. You're buying a document.

Most home-inspector marketing sells a face: a friendly headshot, a folksy tagline, a stock photo of a house with a checklist emoji. But the buyer landing on this page isn't shopping for a personality — they're about to sign the largest check of their life based substantially on one document they haven't seen yet. What they're actually buying is confidence in the rigor of that document, before it exists.

So this template doesn't sell warmth. It sells method. The whole site is typeset like the inspection report itself: numbered sections instead of a marketing nav, a file number and report type in the hero instead of a slogan, margin notes in italic the way a real inspector annotates a finding, hairline rules instead of drop shadows. Paper #F7F4ED and ink #1C2530 read as a printed page, not a screen. Stamp green #1F6E5C and a warm manila #E4D6B8 read as an official record — a folder you'd trust with a $900,000 decision.

The message underneath every pixel is: this is what my actual report looks like — methodical, numbered, documented, and impartial. That's the confidence a scared buyer is shopping for, three weeks before closing.

02 · The techniques

Four moving parts, one job.

Every interaction points at the same outcome — demonstrate thoroughness fast, then make booking effortless. Here's how each piece is built.

The INSPECTED stamp reveal

Each numbered section heading carries a small circular rubber-stamp SVG — a checkmark ringed by "INSPECTED" in mono type. It sits scaled up and rotated off-axis, invisible, until an IntersectionObserver sees the section cross into view; then a single class toggle drives a CSS keyframe that overshoots past its resting rotation and settles, like a stamp actually landing on paper. It's a literal picture of the site's promise: this section has been checked.

Only the class changes in JavaScript; every visual beat is a CSS keyframe with an easing curve tuned for a small punch of overshoot, not a bounce.

/* rests scaled up and rotated, off until it enters view */
.stamp{opacity:0;transform:rotate(-9deg) scale(2.4)}
.stamp.stamped{animation:stampIn .6s cubic-bezier(.19,1.32,.4,1) forwards}
@keyframes stampIn{ 55%{ transform:rotate(-5deg) scale(.9) } 100%{ transform:rotate(-9deg) scale(1) } }

The 247-point counter

The hero carries a small badge, styled like a stamped exhibit tag, that counts up from zero to 247 on page load — an eased requestAnimationFrame tween, not a linear tick, so it decelerates into its final number the way a real gauge would settle. It's a small, honest flex: the exact scope of the inspection, quantified, before the visitor reads a word of copy.

function tick(ts){
  const eased = 1 - Math.pow(1 - progress, 3);
  counterEl.textContent = Math.round(eased * target);
}

The dossier layout

Instead of a marketing nav, the header reads like a table of contents — 01 Scope, 02 Process, 03 Field Notes, 04 Coverage, 05 Contact — because a report's structure is the trust signal. Margin-note asides run alongside the process section in italic serif, the way a real inspector annotates a callout in the margin of a printed report, and the process photo is captioned like a report exhibit ("Exhibit A") rather than a hero glamour shot.

The sticky mobile call bar

On phones — where a buyer standing in an escrow office is most likely to be looking this up — a fixed bar pins "Call Now" and "Free Quote" to the bottom of the screen. The body reserves matching bottom padding so it never covers content, and it stays out of the way entirely above 768px, where the header's phone button already does that job.

03 · Why this converts

Every choice serves the booking.

The tel: phone number leads every hero and header state, paired with a same-visit "Book an Inspection" button, so both a ready-to-call visitor and a still-comparing one have an obvious next step.
The trust strip answers the real objection first — 5.0★ across 350+ inspections, certified & insured, same-day report — before the visitor has to scroll to find out whether this inspector is credible.
The sticky mobile call bar keeps both CTAs one thumb-tap away through the entire scroll, because escrow deadlines get looked up from a phone in a parking lot, not a desktop.
The quote form asks for exactly what's needed to call back — name, phone, address, service, message — with property address included because scheduling literally depends on the location.
Demonstrated rigor out-converts personality for this purchase decision: numbered sections, a stamped checklist, and a same-day-report promise read as competence, which is the actual product being sold.
The stamp interaction doubles as proof of thoroughness — a site this considered about its own presentation signals an inspector who will be equally considered about a $900k house.

04 · Why this one is unique

The axes it moves on.

Set against our other service templates, this one stakes out ground none of the others touch:

It's the only light, paper-toned template in the library built around a document metaphor. Where other trades lean dark-and-urgent or bright-and-friendly, this one is deliberately quiet, bookish, and typeset — because the emotional register a home inspector needs is calm authority, not excitement.
The design hypothesis is explicitly about what's being purchased: not a person, a document. Every layout decision — numbered sections, margin notes, exhibit captions, a table-of-contents nav — reinforces that the visitor is pre-viewing the actual report format, not a brand personality.
The stamp-reveal is a literal brand-to-interaction mapping, the same device the locksmith template uses for its tumbler-unlock, but rendered in a completely different register: rubber-stamp ink instead of hardware mechanics, subordinate to the CTA rather than a hero centerpiece.
It's the only template using a serif body face (Spectral) at reading size — a deliberate bet that a report-reading typeface, not a marketing sans-serif, is what signals "this business writes documents for a living."
The 247-point counter quantifies the promise instead of just asserting it — a concrete, countable number standing in for the vaguer "thorough" or "detailed" language most inspector sites default to.

A site typeset like the document it's selling.