The phrase had volume in every city. We threw it out.

Kinetic Rebalance is a joint offer from two Northern Kentucky firms. BD-AEC is Scott Mann's fractional business development practice for architecture and engineering firms, based in Florence, and BLDG Brands is Jay Becker's brand and creative strategy company in Covington. Together they help the owners of small architecture and engineering firms get moving again, and they wanted to launch in eleven metros from Toledo to Atlanta at the same time.

One of those two clients is a creative agency. BLDG has a strong print-era editorial identity: chamfered tiles, cream backgrounds, dark brown ink, saturated color blocks. Their own site doesn't express it well. So the brief we wrote for ourselves was blunt: out-express BLDG in BLDG's own visual language, well enough that a branding agency signs off on the result. Designing for designers leaves nowhere to hide.

The build had to match that ambition without eleven budgets. We hand-built one site, kinetic-cincinnati, then forked it ten times with nothing changing but a manifest: city config, that metro's photography, and env. Four days from brief to eleven live sites on Netlify, with Sonor running analytics and a managed form for every city.

• Atlanta, Chattanooga, Chicago, Cincinnati, Columbus, Dayton, Indianapolis, Knoxville, Louisville, Nashville, Toledo
• Ten of the eleven sites are, in code terms, a manifest diff

The hero is a poster wall: a two-by-two grid of color-block posters in the BLDG palette. INERTIA IS THE ENEMY sits top left with the Kinetic Rebalance masthead beside it. GROW DIFFERENTLY sits below, rotated a full 180 degrees because a poster wall with nothing askew isn't a poster wall, and ENERGY FOLLOWS CLARITY completes the grid. Under it runs a data strip: the city, the $1M to $20M revenue band, the I-75 corridor, a form number. None of it is an image. The whole wall is CSS, which is why it's sharp at every width and costs almost nothing to load.

Below the wall the page is one continuous scroll: twelve sections, no traditional boundaries. Holding it together is a dashed SVG we call the energy line. Every section declares where the line enters, where it exits, and what shape it takes in between: a sweep, a cross, a coil, a skirt around a card. Exits and entries meet exactly, so across the whole page it reads as a single conductor, masking itself behind headlines and ducking behind cards instead of crossing them.

On desktop, the cursor is the brand's flywheel. It spins with your scroll velocity and recedes when you reach for anything interactive; on touch it docks in the corner as a companion mark. Headings are set in Fraunces, a variable serif with its optical size pinned at 120 and its SOFT and WONK axes zeroed. They settle as they land: each word animates from weight 330 to 415, like type being pressed into the page. Ghost numerals mark the stations, tinted 10 to 30 percent in each section's own color. Barlow carries the body and JetBrains Mono carries the data. Every font is self-hosted: we've watched a font CDN rotation break a build before, and we don't let a third party hold our typography.

Every detail defers to BLDG's own rules. Chamfered corners at their 5, 10, 15, and 20 pixel scale, cut with clip-path, two layers when the chamfer needs a border. An atmosphere layer fades the page from cream to ink and back as you scroll, and the dark partnership section is dark brown, not black, because BLDG doesn't use black. And every bit of choreography starts below the fold. The first paint is static and server-rendered, never animated. The motion below it is complete by default for crawlers and no-JS visitors, and switched off entirely under reduced motion.

• Sweep, cross, coil, skirt: each section picks its stretch of the line
• Weight 330 to 415, one word at a time, as each heading lands
• On touch, the flywheel cursor docks as a corner companion
• Chamfers cut at BLDG's 5, 10, 15, 20 pixel scale

Before writing a single meta tag we ran a demand study, using the Google suggest endpoint as the oracle. We tested roughly 50 candidate phrasings nationally, then city-modified templates across all eleven metros. The offer's natural vocabulary has zero query presence. Nobody searches 'AEC business coach'. Nobody searches 'kinetic rebalance'. Write the titles in the client's own words and you've optimized for an audience of nobody.

So the first targeting pass went where the data pointed. Two phrasings fired in all eleven markets, 'architecture firms {city}' and 'engineering firms {city}', and the titles were built to catch them: 'Architecture & Engineering Firms in {City}, {ST}: Market Data + Growth'. Then, reviewing the pass, we caught it. The person typing that phrase is trying to hire an architecture firm. Our client sells to the person who owns one. We'd found real volume with the intent pointing the wrong way. That's worse than no volume at all: it fills your analytics with people you'll never serve and teaches the search engine your page is for them.

We retargeted every title before launch: 'Grow Your {City} Architecture or Engineering Firm'. Nobody hiring an engineer searches that. A principal staring at a plateau might. And we documented the reasoning in the code, right next to the titles, so nobody 'fixes' them back toward the bigger number later. Catching your own mistake in review is an unglamorous deliverable, and on this project it was the most important one.

• 'AEC business coach': zero query presence anywhere
• What shipped: 'Grow Your Cincinnati Architecture or Engineering Firm'
• Caught in our own review, fixed before a single visitor arrived

The FAQ does two jobs. Five questions answer the visitor who already landed, in the client's own vocabulary. The other five are the long tail, written in the exact full-form phrasing principals type into a search box: what is an architecture or engineering firm worth, how much do owners actually make, what is the seller-doer model, when should an owner start succession planning. The answers are written to be lifted whole, and FAQPage schema plus speakable markup tells Google, and the AI assistants people now ask instead, that they're allowed to. Each site also serves llms.txt and llms-full.txt through @sonordev/site-kit: a machine-readable contract carrying the business facts, the offer, the FAQ, and the contact. And each renders its own coded OG poster card.

Every market section runs on numbers the Census counted. We pulled U.S. Census County Business Patterns 2022 data for each metro, so the Cincinnati site knows its own market. It counts 638 architecture, engineering, and related design establishments, 373 engineering firms, 114 architecture practices, and 271 establishments in the 5-to-99-person band the offer actually targets. A size-band bar shows the spread, with the target band highlighted. Each of the eleven sites carries its own metro's numbers. When an assistant answers a question about a city's architecture and engineering market, we want the citation to be us.

The schema tells the truth. Two real Organizations, BD-AEC and BLDG Brands. Person schema for Scott Mann and Jay Becker, with knowsAbout. Service, WebSite, FAQPage, SpeakableSpecification. And deliberately no LocalBusiness: these microsites have no local premises, and we won't fake one for a map pin. Same rule in the credibility block: Kroger, P&G, Tire Discounters, and the Florence Y'alls appear as BLDG's clients, attributed as BLDG's clients, never implied to be Kinetic's.

• Five FAQ answers for the visitor, five for the long tail
• Eleven metros, eleven size-band bars, zero shared numbers
• LocalBusiness schema: deliberately absent

Post-launch, mobile Lighthouse said 85. Our bar is 90, so that's a defect. But the report was strange: simulated throttling said LCP was 4.0 seconds, while real devtools throttling said LCP 1.7 seconds with 660 milliseconds of total blocking time. Two modes, two different stories. Guessing at that point wastes a day, so we pulled the Chrome trace instead.

The trace showed exactly one largest-contentful-paint candidate, and it was text, with observed FCP equal to observed LCP at 1278 milliseconds. The static hero was doing precisely what we designed it to do: paint first, paint fast. The simulator was modeling that paint as stuck behind main-thread JavaScript, which pointed at the real defect. 26 reveal animations and 8 kinetic headings had each registered a GSAP ScrollTrigger just to play a one-shot entrance. That forced the entire animation library to evaluate during hydration, in one long task of 638 milliseconds. No relation to Cincinnati's 638 establishments, though we did read that line twice.

The fix respected the design instead of amputating it. Every one-shot entrance became IntersectionObserver plus CSS transitions with identical trigger points, easing, and stagger; GSAP now loads only for the pieces that actually scrub with the scroll. We also instanced Fraunces down to the axis ranges we actually use, taking it from 144KB to 69KB, 53 percent smaller. After: 90 mobile simulated and 99 under real throttling, total blocking time from 660 to 50 milliseconds, zero layout shift, and 100s across Accessibility, Best Practices, and SEO. Verified over three consecutive runs, because one good run is a coin flip.

• Simulated said 4.0s, real throttling said 1.7s, and the trace was the tiebreaker
• 34 one-shot entrances were dragging all of GSAP into hydration
• Same trigger points, same easing, same stagger: the design never felt the fix