The one where the fence builds itself.

The design hypothesis: the site IS a straight line.

Every neighbor sees a crooked fence line forever — there's no hiding a leaning post or a wavy top rail. That makes fence buyers unusually precision-obsessed compared to other trades: they convert on demonstrated straightness, not on urgency or charm. So the design doesn't try to feel warm or handmade. It's engineered.

The aesthetic school here is precision / measurement graphics — think architectural drawings, surveyor's plots, spec sheets. Type is Manrope pushed to its weight extremes (a hairline 200 for labels, an 800 black for headlines), set with font-variant-numeric: tabular-nums everywhere a number appears, so prices and phone numbers line up like a ledger instead of drifting the way proportional numerals do. The palette is committed and cool:

A blueprint grid, a modular layout, and a fence that builds itself.

Alternating section bands sit on a faint blueprint grid — a repeating 40px linear-gradient in both directions at low opacity — so the page reads like it's drafted on graph paper, not laid out by eye. Content columns, card grids, and the service grid all snap to the same rhythm, reinforcing "measured, not eyeballed."

The signature move is the fence-build divider: a thin horizontal string line runs the width of each section break, and JavaScript generates a row of alternating posts and pickets along it. Each picket starts translated down and transparent; an IntersectionObserver flips a class when the divider enters the viewport, and a staggered CSS transition brings pickets up into place left to right, each with a slight spring overshoot — like a crew hanging boards down the line.

.picket{
  transform:translateY(22px); opacity:0;
  transition:transform .55s cubic-bezier(.34,1.56,.64,1),
             opacity .32s ease;
  transition-delay:calc(var(--i, 0) * 42ms);
}
.fence-divider.in-view .picket{ transform:translateY(0); opacity:1; }

The stagger delay is just the picket's index times 42ms, set as a CSS custom property per element — no animation library, no keyframe list to hand-author. The posts (every 7th picket, drawn thicker, in iron) never move; only the cedar pickets between them animate, so the eye reads "posts already planted, pickets going up."

Reduced motion & graceful degradation

The hidden starting state — the translateY and opacity:0 — only exists inside @media (prefers-reduced-motion: no-preference). Under reduced motion, that rule never applies, so every picket simply renders in its final position: a pre-built fence, no animation, same visual result. If JavaScript never runs at all, the divider still shows its string line with no console error — a graceful, if quieter, fallback.

Vanilla, by hand.

This site was hand-coded — plain HTML, CSS, and JavaScript, written line by line. No page builders, no drag-and-drop themes, no off-the-shelf frameworks. Every measurement, from the 40px blueprint grid to the 42ms picket stagger, was chosen on purpose and tuned by eye, engineered specifically to move a homeowner toward one action: requesting a quote.

That's the Tiny Mammoth approach to a client website: a template built to convert, not just to look good.

Precision closes the estimate.

• The phone is never more than a glance away — in the nav, twice in the hero, a sticky call bar on mobile, the form, and the footer.
• Trust before pitch. The 4.9 rating, 400+ fences, licensing, and the "Straight-Line Guarantee" sit directly under the headline, exactly where a homeowner comparing bids looks first.
• The signature earns the premium. Watching a fence assemble itself in perfect alignment is a quiet demonstration of the same precision the crew promises on-site — it makes "we build it straight" a felt experience, not just a claim.
• Every service card ends in an action — a quote link for every one of the six services — so there's no dead end on the page.
• The process section removes fear: walk the line, exact written quote, built in days. It answers "what happens after I call?" before it's asked, and "quotes honored 90 days" removes the fear of a bait-and-switch price.
• The form is short and specific — an optional linear-feet field lets a homeowner who already measured their yard get a faster, more accurate callback.

Different from the earlier templates.

Across the template library, each site deliberately moves on four axes — palette, typography, layout, and signature — so no two feel related. Palisade's coordinates:

• Palette: iron gray and cedar tan against pale sky-blue — a cool, clean-air daylight system, where sibling trades lean toward earthy greens, warm terracottas, or high-saturation brand colors.
• Typography: a single geometric sans (Manrope) pushed to extremes of weight with tabular numerals throughout, instead of pairing a display serif against a body sans the way most of our other templates do.
• Layout: a visible modular grid — a blueprint-style background grid and content aligned to it — rather than a free-floating editorial or full-bleed photographic layout.
• Signature: fence-build dividers — a string line with pickets that assemble themselves in a left-to-right stagger every time a new section begins. It intentionally avoids the moves used elsewhere in the set (wind-swaying canopies, before/after sliders, parallax skylines).

Advantages: the blueprint-and-tabular-numeral system reads as competent and exact before a single word of copy is read, which matches how fence buyers actually shop — by comparing precise, itemized quotes; the signature is a direct visual metaphor for the guarantee, not a generic flourish; and because it's a handful of SVG rects driven by one small script, the "wow" costs nothing extra to load and degrades to a calm static line if motion or JavaScript is off.