# equinoxbusinesslaw — designer notes (parked for later phases)

> Design ideas worth doing that are **not** in the current step. Parked deliberately, with the
> dependency that has to clear first. Nothing here is a commitment, an approved scope item, or a
> reason to widen a step — the sold scope is `.logs/planning/scope.md` and the current step's
> fence is `.logs/planning/homepage-mockup-brief.md` §8. Requests raised *during* Step 1 and their
> dispositions live in `.logs/planning/step1-execution.md`; this file is for ideas aimed at later
> phases.

---

## 1. About Us — a history timeline (Adi, 2026-09-03)

**The idea.** The About page carries a visual timeline of the firm's history rather than the
current block of prose.

**Has the client said anything against it?** No. Their seven binding decisions of 2026-08-27
(`.memory/client-decisions-2026-08-27.md`) cover social links, community links, states, the logo,
the team roster, the "elevated, simplified" brief and imagery. None touches About-page structure.
So this is open — but three things shape it:

1. **The founding year is unresolved, and a timeline is made of dates.** The live site gives
   three (`.memory/naming-conflicts.md` §5): "We began in 2004 as Small Business Legal Services"
   (`/about-us/`), "In 2005 … Michelle decided it was time to launch her firm" (her bio), and the
   Equinox brand beginning with the 2009 rebrand. A timeline cannot be drawn until Michelle
   Bomberger settles which entity the dates describe.
2. **The client is moving away from anniversary framing.** They retired the 20th-anniversary logo
   because the number expired ("it is no longer our 20th anniversary", 2026-08-27). A timeline
   that reads as anniversary messaging works against that; one that reads as *how the firm's model
   evolved* does not. Frame it as the story of the service model, not a birthday.
3. **"Elevated, simplified" applies.** A dense dated rail with a marker per year is exactly the
   density the client named as the problem. A restrained timeline is a few meaningful moves, not
   twenty entries.

**The raw material already exists**, in the client's own words on `/blog/20-years-strong-…/`:
founding as Small Business Legal Services; the 2009 Great Recession rebrand to Equinox **and the
launch of the subscription-based fractional General Counsel Services model**; growth through 2010;
a 2023 turning point hiring a lawyer team leader. That 2009 moment is the most useful thing in it
— it is the origin of the exact offer AISV's whole 12-month plan is built to sell.

**Status and dependencies.** About Us is not in the Step 2 mockup set
(`.logs/planning/design-direction.md`, "Pages not in the mockup"); it inherits the design system
and is built from patterns after approval. So this is a **build-phase idea**, and it needs: the
founding year confirmed (Michelle Bomberger), the copy written (AISV — content is their lane), and
a decision on whether a timeline is a new reusable pattern or an arrangement of existing ones
(a new pattern is build cost that nobody has budgeted). Raise it with Rian when About is built,
not before.

---

## 2. The brand story's promise line reads as cheesy (Adi, 2026-09-03)

**The reaction.** "Proactive Protection. Predictable Costs. Greater Peace of Mind." was used as a
caption under the image placeholder in the Our Approach mega panel. Adi's call: too cheesy for a
prominent, decorative placement. Removed from the panel the same day.

**What this is and is not.** The line is the brand story's footer message and it is **AISV's and
the client's copy, not ours** — the standing rule is that we draft placeholders and content
decisions go to AISV (`agents.md`). So this note records a *designer's reaction to a placement*,
not a request to rewrite the line, and the line stays in `notes/mockups/shared-v1/copy-deck.md`
and in the footer where the brand story puts it.

**The design lesson, which is the durable part.** Three abstract benefit nouns in a row
("Protection · Costs · Peace of Mind") land as a slogan when they are set as a standalone
decorative caption with nothing to earn them. The same words work where the brand story actually
uses them — as a summary *after* the specifics, or as a footer sign-off. So: **do not lift
benefit-triple lines out of their context to fill visual space.** If a space needs a line, use
something concrete from the client's own copy (a real service, a real number, a real client
situation) rather than a promise.

**Watch for it in these places** when the pages get built: the hero subhead, section dividers,
image captions, and any pattern that has a "supporting line" slot. If the mockup ever needs a
caption there and no concrete line fits, leave the slot empty rather than reaching for the
promise line — an empty slot is a question for AISV, a cheesy slot is a decision we made for them.

**Also worth raising with Rian at the review:** if the line reads as cheesy to a designer looking
at it cold, it may read that way to the client's buyers too. That is AISV's judgement to make,
not ours, but it is worth putting in front of them once, as an observation rather than a
recommendation.

---

## 3. How Adi works — principles to design against, not preferences (Adi, 2026-09-03)

Stated by Adi after reviewing the header, correcting a wrong reading of his edits. These are
working principles for anyone designing on this project, not personal taste to be humoured.

**1. It is not subtraction, it is making space — and the excess was ours.** Every cut in the
header (the grey sub-item lists, the per-area descriptors, the image caption) was removing text
that should not have been placed there. The cause named: *designing by context, which is
text-first, so text gets poured into a space that needed structure.* Word count is a real goal on
this project, but **it is earned on pages people read, not in the chrome they navigate through.**
A nav panel, a hero, a CTA card and a header are wayfinding surfaces — a human moving through them
is not reading. Put text where reading happens; hold everything else open with structure, image
and whitespace. **Do not fill a space with a sentence because the space looked empty.**

**2. Real content, because micro mistakes compound.** The reason for "use real thing" is not
polish. A wrong service name in a throwaway prototype does not stay in the prototype: it gets
copied into the next artefact, quoted back as if verified, and eventually built. Small invented
details are where hallucination enters a project and where it is hardest to find later, because
nothing about them looks wrong. So: **every label in a mockup is either sourced or visibly marked
as a placeholder — never plausibly invented.** This is also why the crawl earns its keep; working
from real material is what recovered the five industry names the audit had open as `[TBC]`.

**3. Facts persuade; self-claim does not.** Adi is a marketer — the objection to
"Proactive Protection. Predictable Costs. Greater Peace of Mind." was never an objection to
persuasion. It is an objection to **the firm asserting its own virtues**. Everyone is tired of
self-claim; a fact still lands. So a supporting line should be something checkable — a real
service, a real number, a real client situation, a real timeframe — not an adjective about the
firm. Note the pairing: "Bring us the thing that is keeping you up at night" passed without
comment, because it describes the reader's situation rather than the firm's qualities. See note 2
for the placement lesson; this is the voice lesson.

**4. Navigation, hero and the home page get the disproportionate share of attention because they
get the disproportionate share of traffic.** Roughly 80% of traffic lands on home, and the nav and
hero are the first screen of it. Time spent on the header is not gold-plating; it is spending
effort where the traffic is. **The corollary is the important part: you cannot design the doors
without knowing what is behind them.** That is what the inner-page crawl context is for — the nav
labels, the panel groupings and the hero's promise all have to match what the inner pages actually
contain. Read the crawl before designing anything that points into the site.

**5. Adi can see the work; the model cannot.** Reviews run through a terminal, so the model must
reason about layout from structure and metrics rather than describing what it "sees", and must not
narrate a visual impression it has no access to. Adi reports what is actually on screen — the
hover dead zone was found that way, and it was real.

---

## 4. What the Brand Kit's *message* material means for the design (2026-09-03)

Interpretation only. The client's words are transcribed, unaltered and uninterpreted, in
`notes/source/brand-kit/brand-guide-messaging.md`, `brand-guide-short.md` and
`core-values-and-behaviors.md`. Keep the two apart: those files must stay quotable as evidence,
which they stop being the moment our reading is folded into them.

**1. The client's own voice is far bolder than the copy written for them.** The guide's Efficacious
value says, in the client's words, *"Fortune favors the bold. We get stuff done. Straight-talk, no
BS or pretention."* The brand sets itself between **the Sage** and **the Rebel** — "rules are made
to be broken", illustrated with Katniss Everdeen — and states plainly that it does not compete "in
contested red markets of business law as usual". Its own ad copy runs *"Mega corps aren't the only
ones with an army of attorneys"* and *"Don't go at it alone"*. This is explicit licence for a
confident, plainspoken, unlawyerly design, and it is the client's own instruction, not our taste.
It also settles an earlier open observation: the flat, contraction-free register of the brand story
is not the client's register. The gap is now evidenced from the client's side, not inferred.

**2. The brand is already a modular system, in the client's own words.** *"Great brands are built
brick by brick. Like a Lego set, our brand architecture is designed as a modular system."* Five
bricks: BLUE GRADIENTS, YELLOW GRADIENTS, PEOPLE PHOTOGRAPHY, ICON LOGO, WORDMARK. That is the same
idea as the pattern-library build, described by the client before we proposed it — worth saying out
loud at the review, because it means the build method matches how they already think about the
brand. One brick is retired for this site: people photography, by the client's 2026-08-27
instruction. Its job passes to the two gradient bricks.

**3. There are now TWO three-step plans, and they are not the same.** AISV's brand story:
**Assess → Prioritize → Protect and Grow**. The client's brand guide: **Take the assessment →
Create a plan → Boldly go**. Hero option 5 currently renders AISV's. The guide's version is
shorter, more active, and ends on the brand's own signature line. Neither is wrong; **using both
across one site would be**. This is a content decision for AISV with the client, and it should be
raised before any page renders a three-step pattern.

**4. The competitive field is named — by the client, not by us.** The guide's "Neighbourhood" slide
places Equinox among **Strategic Business Consultancies · Managed Services Providers · General
Counsel Business Law · FTE, In-House**. That is a far better answer than anything in AISV's deck,
and it reframes the positioning: the comparison the client draws is against *in-house counsel and
managed-services providers*, not against other law firms. The MSP analogy is written out in full
("just as you may tap into a managed services provider for HR, accounting or IT…"). If a comparison
element is ever built, those are the axes the client already believes in.

**5. A "this, not this" table exists for the tagline** — the client has already ruled out
"For Small Businesses", "Legal Counsel For Entrepreneurs", "General Legal Counsel" and "Fractional
Legal Counsel For Entrepreneurs". Do not reintroduce a rejected variant in a mockup.

**6. A fourth cut of the service taxonomy.** The guide lists Corporate Governance · Employment ·
Contracts · Leases · Trademarks and Copyrights · Mergers and Acquisitions · Data Privacy ·
Insurance. That is neither the live site's 6-plus-5 structure, nor the brand story's 4 groupings,
nor AISV's persona hubs. **Four cuts now exist and none is authoritative.** The Services mega panel
currently renders the live-site structure, which is the right default (it is what the site actually
contains today), but the reconciliation is owed by AISV before any service architecture is built.

**7. The assessment has a name in the client's own brand system: Business Health Assessment** — one
of three named products, with "Business Health Consult" and "Business Health Workshop" beside it.
Recorded as evidence in `.memory/naming-conflicts.md` §2. It does not close the question — AISV and
the client still decide — but three of four sources now agree, and the fourth is the live site we
are replacing.

**8. Pricing exists in the guide and must never enter this project.** The guide states a monthly
starting figure in two places. Both are `[figure redacted]` in the extraction. If a comparison or
tiers page is ever built, the figures come from the client at that time, not from a 2022 deck.

---

## 5. Rejected: the brand mark as animated hero art (Adi, 2026-09-04)

**Dropped. Do not re-propose without new information.** Two sessions went into building the client's
swirl as inline SVG and animating it in the hero's right-hand field. It is recorded here so the ground
already covered is not covered again.

**What was built.** The mark measured from `Equinox__Swirl_Color_RGB.png` — four non-concentric
stroked rings, radii, strokes, gradient directions and paint order all taken by scanline measurement
and circumference sampling — then rebuilt as inline SVG and animated five ways. Then reduced: the
light-blue ring dropped and a white ring added so it could not be read as the logo; then cropped in
half at the band edge; then broken into five scattered circles; then down to one gold circle; then to
two circles held in the mark's own geometry.

**Why it was dropped.** Adi's judgement, and it is sound: a redrawn mark never matches the client's
artwork exactly, so any version close enough to be recognisable invites a comparison it loses, and any
version far enough from it to be safe stops being worth the effort. The successive constraints —
remove a ring, add a ring, crop it, scatter it — were each trying to solve the same problem, and the
problem was the premise.

**What is worth keeping from it.** The measurement itself is real and reusable: the mark's geometry
and colour ramps are documented in the handoff entries of 2026-09-03 and the generator in the session
scratchpad, and `logo_pair()` derives any two-ring pair from the logo's own ratios (slate radius 0.618
of gold, strokes 0.094 and 0.168, offset −0.147/+0.209). If a favicon, a loading state or a section
divider ever needs the mark as vector, that work does not need repeating. **The client's own PNG stays
the only thing ever presented as the logo.**

**The general lesson, which is not about circles.** Reproducing a client's identity asset by hand is a
losing position unless the reproduction can be exact. Ask for the vector file — which this project has
already flagged as missing — rather than rebuilding the mark to design with it.

---

## 6. Held for Direction B: two copy-structure problems the built page will show better than a memo

**The rule Adi set on 2026-09-04, and it is a good one:** copy is AISV's, so Direction A follows it
exactly and styles it as well as it can, *even where the result is imperfect*. The structural suggestions
go to Direction B. A built page shows a problem better than an argument does — AISV can see it in situ
rather than being told.

**1. Sections 7 and 8 make the same argument.** Five of the eight statements in "Imagine Feeling
Confident" have a near-twin in the "With Equinox" column of "Move From Legal Uncertainty to Legal
Confidence": documentation organized and current, costs predictable, leadership has a resource, the owner
feels supported, contracts support the business. Two consecutive sections, one point. Either 7 is the
emotional version and 8 the operational one and they should be written to differ, or one is doing a job
the other has done. Both sit in the brand story's own 13-element structure, so this is a question about
their outline, not about our layout.

**2. The page raises seven worries and resolves six.** The "You may be wondering" panel asks seven
questions; the transformation list answers six of them directly, in order, in AISV's own words. The
unanswered one is *"What happens if a client does not pay?"* — the money question. Two statements arrive
with no matching question, including the one the copy itself calls most important. Either the answer is
missing or the question is.

**What A does about it meanwhile.** Ground rather than structure: section 7 takes the hero's gradient,
section 8 stays white, so two sections making the same argument at least do not look the same doing it.
Alternative structures are already drawn and costed in
`notes/mockups/transformation-A-v1/transformation-A-v1.html` — air, one-line-and-the-rest, continuous
prose, a status board — and any of them is a B candidate the moment the copy opens up.

---

## 7. Placeholders are labelled with one fixed string, not a paraphrase (2026-09-04)

**The rule.** Where a value is unresolved, the mockup shows a **visibly labelled placeholder** — never a
blank, never a plausible-looking stand-in. `.logs/planning/design-direction.md` sets this twice: in the
**Do not** list (*"Any figure of any kind: tier figures on the General Counsel page, a revenue threshold in
'Who It Is For', or anything commercial"*) and in the pre-flight, where item 13 requires that no figure appears
and every placeholder is visibly labelled.

**Why both halves matter.** A blank gets filled in by whoever builds the page, and a plausible number gets
shipped. A loud dashed tag can do neither — it has to be resolved before launch because it is unmissable.

**And the label must be the same string every time.** Caught on 2026-09-04: `home-A-v1.html` used the exact
wording the plan specifies, `revenue threshold: AISV to confirm`, while the `who-its-for` sheet had an
embellished variant. Two wordings for one placeholder is precisely the drift the labelling rule exists to
prevent — a reader cannot tell whether they are two different open questions. Trimmed to the canonical
string; **paraphrasing a placeholder label is a change, not a style choice.**

**The open placeholders on the home page, and who resolves each:**

| Placeholder | Resolved by | Open since |
|---|---|---|
| `revenue threshold: AISV to confirm` | AISV with Michelle Bomberger — their deck and the brand story disagree | the proposal, 2026-07-30 |
| The assessment's name | AISV with the client — three names in circulation | ongoing |
| `21 years` / the founding year | Michelle Bomberger — 2004, 2005 and 2009 all appear on the client's own site | 2026-09-03 |
| The team count | generated from the team post type at build, never typed | 2026-09-04 |
| Every image slot | the client — people imagery is barred on the home page | 2026-08-27 |
| States as a licensing claim | Michelle Bomberger — the live disclaimer and the client's decision name different sets | 2026-09-03 |

---

## 8. What Direction A is for, and the review of it (2026-09-04)

**Adi's framing, and it settles what this build is.** Direction A **follows AISV's copy exactly and styles it
as well as it can, including where the result is wrong**. It is a proof, not a proposal: the page is built so
the problems in the material become visible in situ rather than argued in a memo. Improvements go to a later
version. *"Keep going wrong or right — our goal is to prove the design showing why it is wrong in this v1. But
at least we are aware of it."*

**The consequence worth naming: AISV's copy has not been tested at length.** Written out in full and set at a
readable size, the thirteen-element landing page runs to roughly **10,000px — about eleven laptop
screens**. That is not a styling failure; it is what this much copy measures. It will surprise them, and the
page is the fastest way to show it.

### Review of the built page, 2026-09-04

**Working:** the thin/bold heading system, which is consistent from the hero down and fixes line-breaks as a
side effect; the ground rhythm; and three real systems — the panel-with-badge, the NIGHT box, the gold
marker.

**Problems, measured rather than eyeballed:**

1. **Cream is doing two incompatible jobs.** `#FFFAEB` appears in 12 CSS rules, but six of them are the
   **offset shadow behind every image** and the rest are panels and bands. The claim that a warm panel means
   *the reader is being addressed* does not survive that: the same colour is every drop shadow on the page.
   Either the shadows change or the panels do.
2. **The assessment is asked for five times.** Eleven CTA instances: 5 × the assessment, 3 × Book a
   Consultation, plus Contact Us, the Problem CTA and Our Team. A funnel question for AISV — and a far
   more answerable one with the count attached.
3. **Six image slots** (eight grey boxes including the mega menu), all the same treatment. The mockup therefore
   reads emptier than the finished page would, which affects how it is judged.
4. **Section padding has no scale**: 96/104, 104/110, 108/112, 112/116, 128/136 — five near-identical
   values that read as drift. Should be three steps.
5. **Six heading `max-width` caps are unaudited**, inherited from the scaffold. One was already orphaning a
   word before it was caught.
6. **Sections 10–12 are visibly from the old build**, and section 10 shows a literal `[Section heading]`
   placeholder because AISV never wrote one.

**Sequencing:** fix 1 and 4 before building 10–12, because both are page-wide systems and retrofitting
across twelve sections costs more than three. Items 2 and 3 are decisions for Rian and AISV, not fixes.

---

## 9. Ideas raised during Step 1 and routed elsewhere

Not repeated here — see the requests table in `.logs/planning/step1-execution.md` for the Google
reviews section, lawyer faces on the home page, an easier-to-reach phone number, and the firm's
longevity. Each carries its disposition and who decides.

---

## 10. The objection copy is a three-beat structure, and the accordion question is not settled by the services list

Written 2026-09-04, while building `faq-home-A-v1.html`.

**The structure.** Each objection in the brand story is *objection → concession → argument*, not
question → answer. The concession is the short middle line: *That approach may have worked when the
business was smaller.* / *You may not need to.* / *You are not alone.* / *That is the ideal time to
review your legal foundation.* It agrees with the reader before disagreeing with them, and it is the
beat doing the persuading. A layout that treats each item as a flat Q&A flattens three beats into
two and throws the useful one away. This is the same class of finding as the §8 pairs: the structure
was already in the copy, and only showed up on reading it closely rather than laying it out.

**The accordion question.** The services list further up the page is an accordion and should be —
a catalogue is scanned, and hiding the detail is a courtesy. Objections are the opposite content
type. **A collapsed objection leaves the objection on screen and its answer hidden**, so a reader
skimming the section sees four reasons not to buy and none to buy. The convention (FAQ = accordion)
argues one way; what the content actually does argues the other. Worth deciding on the content, not
the convention.

**Regardless of which wins, the panels stay native `<details>` with no JavaScript.** Google indexes
collapsed content only when it is in the HTML on load, and AI answer engines read the served HTML
only. The built version is the `bw-ai-schema-pro` FAQ module with `FAQPage` markup — for buyers and
answer engines, not for rich results: Google stopped showing FAQ rich snippets on 2026-05-07.

---

## 11. Sticky header: the shrink is the part that matters

Adi's call, 2026-09-04: the header sticks.

The reason it is worth the pixels is note 3's point — navigation is the first thing on the first
screen and the home page takes most of the traffic, so the one element that is always reachable
should be the one that gets people somewhere. A sticky bar that never changes, though, spends the
same band of screen on a 52px logo forever. So it **condenses**: over the first 140px of scroll the
bar tightens and the wordmark comes down to 38px, and a shadow fades in to say it is floating rather
than in the flow. Full presence when the page is at rest, minimum footprint once the reader is
working.

Done with CSS scroll-driven animation (`animation-timeline: scroll(root)`) rather than a JS scroll
listener, so there is no work on the scroll thread, and wrapped in `@supports` so an older browser
degrades to an ordinary sticky header rather than to nothing. It is not an exotic ask of the build
either — Kadence Pro's header does sticky + shrink natively.

Two things that break quietly if forgotten: in-page anchors land underneath a sticky bar unless
`scroll-padding-top` is set, and the sticky bar must out-rank the mega panels in `z-index` or the
panels open behind the page.

---

## 12. The mockups carry no placeholder badges; the open questions live here (Adi, 2026-09-05)

**The decision.** Yellow dashed tags &mdash; *Brand Kit logo to follow*, *Street address to follow*,
*canonical name &mdash; working assumption*, *name to be confirmed*, *icons: stand-ins* &mdash; are off the
boards. They are notes **about** the mockup, and a note about the mockup is a designer's note, not artwork.
Applied to the footer sheet on 2026-09-04 and to `home-B-v1.html` on 2026-09-05.

**Two placeholders stay on the page, and the distinction is the whole point.** A tag that *annotates* the
design comes off. A placeholder that *stands in for copy that does not exist* has to stay, because removing
it would leave a hole or, worse, an invented value:

- `[revenue threshold: AISV to confirm]` &mdash; the brand story's own sentence with the figure taken out.
  Delete it and the sentence breaks; fill it and we have shipped a number nobody approved.
- `[Section heading]` on the objection section &mdash; AISV never wrote one. **Superseded 2026-09-05:** Adi
  named it *Frequently Asked Questions* in Direction B, matching Direction A, so this placeholder is now off
  both pages. The heading is ours, not AISV's, and is the line their heading would replace.

The revenue threshold is set as quiet neutral text rather than a tag, so the board reads clean and the
sentence still reads true.

**This is a deliberate departure from the mockup brief, and it should be surfaced, not buried.**
`.logs/planning/homepage-mockup-brief.md` &sect;6 says *"Every draft or placeholder is visibly labelled in the
mockup"*, and &sect;10's pre-flight item 13 checks for it. The reason the rule exists is real: **a blank gets
filled in by whoever builds the page, and a plausible-looking stand-in gets shipped.** Moving the labels here
answers the first half of that risk but not the second &mdash; nothing on the artwork now shouts. So the
register below is the control, and it has to be checked before launch rather than trusted to memory.

### The open placeholders, with the label removed from the board

| What is unresolved | Where it is on the page | Resolved by |
|---|---|---|
| The logo files | Header and footer lockups | The client &mdash; the Brand Kit ships raster only at ~3300px; vector files still to be requested |
| The street address | Footer contact column (shows phone and email only) | The client &mdash; **whether a public office address exists at all** is unconfirmed; none is on the live site |
| The entity name | Footer copyright line, currently "Equinox Business Law Group PLLC" | The client &mdash; working assumption, never confirmed |
| The assessment's name | Every CTA, and the lead-in line in the assessment section | AISV with the client &mdash; three names are in circulation and only one may ship, in navigation, CTAs, title, URL and schema alike |
| The icon set | The eleven icons in Direction B | The build &mdash; stand-ins; the final set comes from the Kadence Blocks library, monochrome within the palette |
| The image subjects | Two slots in B, six in A | The client &mdash; no people, per the 2026-08-27 decision, so every slot needs a non-people subject nobody has chosen |
| The revenue threshold | **Still on the page**, as neutral text | AISV with Michelle Bomberger &mdash; their deck and the brand story disagree |
| The objection section's heading | **Resolved 2026-09-05** &mdash; *Frequently Asked Questions*, ours, on both directions | Was AISV's; Adi named it instead |

**A and B now differ on this**, and that was not decided: `home-A-v1.html` still carries its badges. Either
convention is defensible &mdash; A labelled and B clean is even a useful contrast for Rian &mdash; but two
conventions across two directions of the same deliverable is drift unless someone chooses it. See
[[note-7-placeholders-are-labelled]] for the rule this supersedes.

---

## 13. Shorter wording for the assessment CTA &mdash; what the sources already offer (Adi, 2026-09-05)

**A note, not a change.** Adi asked whether there is an equivalent, shorter substitute for *&ldquo;Take the
Business Legal Health Assessment&rdquo;* (41 characters, 395px). Copy is AISV's and the name is unconfirmed,
so nothing here is applied anywhere &mdash; this records what the existing sources already say, with the
widths measured, so the question can be put to Rian and AISV with evidence instead of an opinion.

**The finding that matters: we would not be inventing anything.** Every candidate below is already in a source
document. And the label the mockups currently carry is **the longest name, from the only source that invented
it** &mdash; AISV's brand story is the sole place *&ldquo;Legal&rdquo;* is inserted into the product name.

### What each source actually calls it

| Source | The name it uses | Its own CTA wording |
|---|---|---|
| **The client's Brand Guide** (2022, the client's own authority) | **Business Health Assessment** &mdash; defined as a product with a FAQ and two siblings, *Business Health Consult* and *Business Health Workshop* | **&ldquo;Take The Free Assessment&rdquo;**, and **&ldquo;Take the assessment&rdquo;** used three times as the step-one label |
| The live Typeform embed | iframe title *&ldquo;BHA Survey&rdquo;* | &mdash; |
| AISV's strategy deck | Business Health Assessment | &mdash; |
| The live site | Legal Health Check (`/our-approach/legal-health-check/`) | &mdash; |
| AISV's brand story &mdash; **the mockup's source** | **Business Legal Health Assessment** | &ldquo;Take the Business Legal Health Assessment&rdquo; |

So the client's own brand guide already uses the short CTA we are being told we cannot use. **&ldquo;Take the
assessment&rdquo; is the client's wording, not ours.**

### Measured, at the button system's size

| Candidate | Chars | Width | Where it comes from |
|---|---|---|---|
| Take the Business Legal Health Assessment | 41 | **395px** | AISV brand story &mdash; current |
| Take the Business Health Assessment | 35 | 349px | The recommended name, in the brand guide's own form |
| Take the Legal Health Check | 27 | 274px | The live site's name |
| Take the Free Assessment | 24 | 258px | **The Brand Guide's own CTA, verbatim** |
| **Take the Assessment** | 19 | **220px** | The Brand Guide, three times; the mockup brief's short form |
| Start the Assessment | 20 | 221px | &mdash; ours |
| Check Your Legal Health | 23 | 245px | &mdash; ours |
| See Where You Stand | 19 | 222px | Close to the guide's *&ldquo;see where your business stands&rdquo;* |
| *Book a Consultation* | 19 | *214px* | *the primary, for comparison* |

**&ldquo;Take the Assessment&rdquo; is 220px against the primary's 214px.** Six pixels apart: the pair balances
by itself, no equal-width trick needed, fits any column on one line, and never wraps on a phone. Nothing else
comes close to that.

### What this actually asks of Rian

Two decisions that have to be made together, because each makes the other cheaper:

1. **The name.** `.memory/naming-conflicts.md` already recommends **&ldquo;Business Health Assessment&rdquo;**
   &mdash; three of four sources say it, including the client's own guide, and only AISV's brand story inserts
   *Legal*. Dropping that one word takes the CTA from 395px to 349px on its own.
2. **Whether the short form may be used in body CTAs.** The mockup brief reserves it for the header and mobile
   drawer and requires the full label on the hero, the plan, the assessment section and the final band. If it
   were allowed everywhere, the long-label problem in the button sheet disappears entirely rather than being
   coped with. The brief itself already calls the short form *&ldquo;a length variant of the one name, not a
   second name&rdquo;* &mdash; which is the argument for allowing it.

**One caution on &ldquo;Take The Free Assessment.&rdquo;** It is the guide's own line and it is the strongest
of the mid-length options, because *free* removes the reader's main hesitation at the exact moment they
decide. But the guide is from 2022 and says *complimentary, no obligation*; whether that is still true is
unconfirmed, and a &ldquo;free&rdquo; claim on a law firm's site is the firm's to approve, not ours to write in.
Ask before drawing it.

Related: [[note-7-placeholders-are-labelled]], and the button sheet's *Long labels* section, which is where the
widths were measured.

### 13b. A wider set, and the distinction that decides it (Adi, 2026-09-05)

Adi asked specifically about *&ldquo;Start Free Assessment&rdquo;*. It measures **231px** &mdash; 17px from
the primary &mdash; and it is a good candidate. But the choice is not really about length, and sorting the
options by width hides the thing that matters:

**There are two kinds of candidate, and only one kind is safe.** *Consistent naming for the assessment* is a
sold deliverable: one name in navigation, CTAs, page title, URL and structured data. So:

- **Length variants of the one name** keep the product noun and vary only the verb, article or a qualifier.
  The brief already blesses this shape &mdash; it calls the short form *&ldquo;a length variant of the one
  name, not a second name&rdquo;*. These are safe.
- **A different phrase is a second name**, however good it sounds. *See Where You Stand*, *Find Your Legal
  Gaps*, *Get My Results* all test well as buttons and all quietly break the deliverable, because the button
  no longer says what the page, the URL and the schema say.

| Length variants of the one name &mdash; safe | Width | | A different phrase &mdash; a second name | Width |
|---|---|---|---|---|
| Take the Business Health Assessment | 349px | | Check Your Legal Health | 245px |
| Start the Health Check | 229px | | See Where You Stand | 222px |
| Take the Free Assessment | 258px | | Find Your Legal Gaps | 222px |
| **Start Free Assessment** | **231px** | | Assess My Business | 216px |
| Take Free Assessment | 230px | | Get My Results | 174px |
| Begin the Assessment | 229px | | | |
| Get Your Assessment | 222px | | | |
| Start the Assessment | 221px | | | |
| **Take the Assessment** | **220px** | | | |
| Start My Assessment | 219px | | *Book a Consultation, the primary* | *214px* |

**On the verb.** *Take* is the client's own word and reads like a test you complete. *Start* is lower
friction &mdash; it promises a beginning rather than a finished task, which suits a multi-step Typeform and
is the safer verb when the reader does not yet know how long it will take. *Get* implies receiving a
document, which over-promises: the Typeform's output is unconfirmed.

**On dropping the article.** *Start Free Assessment* is button idiom and saves 28px over *Start the Free
Assessment*. The cost is small but real: the brief's sanctioned short form carries the article, so an
article-less version is a third string in a project already tracking three names. Worth deciding once rather
than drifting.

**One constraint that turns out not to exist.** Changing the label does not disturb the tracking plan &mdash;
CTA click events fire on elements, not on text, and the direct path and the transitional path are measured
separately regardless of wording. So the wording is free to move on that axis.

### The recommendation to put to Rian

- **If &ldquo;free&rdquo; is approved by the firm: &ldquo;Start Free Assessment&rdquo;** (231px). It keeps the
  product noun, adds the one word that removes the reader's main hesitation at the moment of decision, and is
  the client's own claim from their guide. 17px from the primary, never wraps above 375px.
- **If it is not: &ldquo;Take the Assessment&rdquo;** (220px). The client's own wording, used three times in
  their guide, already sanctioned by the brief, and 6px from the primary &mdash; the pair balances with no
  equal-width trick at all.
- **Avoid the second-name column entirely**, however well it reads. That is the deliverable, not a preference.

Still not ours to decide, and still applied nowhere.

## 14. A dark panel has to be told it is dark (Adi, 2026-09-05)

**The finding.** The button inside the navy panel in section 3b was NIGHT on NIGHT &mdash;
`.btn.secondary` fills with `#003B53` and `.nightbox` is `#003B53`, so only the white label
survived and it read as one more bold sentence, not a control.

**The cause is a missing class, not a colour choice.** The whole button system flips to its
dark-ground colours through one hook: `.on-dark`. Every other dark surface on the page carries
it &mdash; the three mega-menu CTA panels and the closing section. `.nightbox` never got it, so
`.on-dark .btn.secondary { background:#ffffff; color:#003B53 }` never fired and the light-ground
rule won by default.

**The rule this leaves behind:** *any element given a dark background must be given `.on-dark` in
the same edit.* A dark ground is not a colour, it is a mode &mdash; buttons, focus rings and
outline borders all switch on it. This is the kind of fault that renders as "looks a bit flat"
rather than as an error, which is why it survived a full page review.

Options sheet: `nightbox-cta-A-v1.html`. Six treatments, each shown in the real section.
All four candidate labels clear AA comfortably on NIGHT &mdash; gold 8.46:1, white 12:1,
ink-on-gold 9.85:1 &mdash; so contrast does not decide this one; hierarchy does.

## 15. An image for the turn (section 3b) &mdash; the constraints that decide it (Adi, 2026-09-05)

Adi asked what image could go with *"By then, the issue may already be expensive, stressful, and
disruptive."* Sheet: `turn-image-A-v1.html`, six placements with a subject brief on each.

**Three findings decide this before taste does.**

**a. This band is the page&rsquo;s only gap between images, and the gap is load-bearing.** Direction A
already carries seven image slots. Section 3 above and section 4 below *both* put theirs in the left
column. An eighth image in 3b&rsquo;s left column makes three left-column images in a row with a 74/82px
band between two of them &mdash; it is the one placement to rule out, and it is also the obvious one.
3b is additionally the shortest band on the page (74/82 against 104&ndash;128 elsewhere): the pause is
deliberate.

**b. No people, and this beat is where that bites hardest.** The client&rsquo;s 2026-08-27 rule allows
stock imagery but no stock photographs of people. This copy&rsquo;s natural illustration is a worried
owner at a desk &mdash; the whole genre is unavailable, which is a good thing; it is the most
photographed clich&eacute; in professional services.

**c. The image must not illustrate the problem.** The copy already carries *expensive, stressful,
disruptive*. A photograph of neglect on top of that double-scores the negative and turns the page&rsquo;s
one quiet band into its bleakest moment. If an image goes here its job is to be **the calm the next
sentence is promising** &mdash; which argues for putting it on the hopeful half of the section (the navy
panel), not the problem half.

**The six placements:** 0 nothing &middot; 1 the navy panel becomes photographic (architecture at dusk,
NIGHT wash) &middot; 2 a full-bleed horizon strip beneath the copy &middot; 3 an object beside the copy
(shown to be rejected &mdash; it fails both a and c) &middot; 4 the whole band becomes a washed texture
&middot; 5 a vertical slice as the column divider.

**Build note for whoever merges one:** a slot placed behind content needs the wrapper to carry
`z-index:0`, because the page&rsquo;s base `.slot` rule already sets `z-index:1` and will otherwise paint
straight over the wash. Cost the first render of this sheet a rebuild.

## 16. The hero photograph, and the duotone recipe (Adi, 2026-09-05)

Adi supplied stock into `notes/source/stocks/`. `5785.jpg` &mdash; a vertical upward look at a cluster of
towers &mdash; is in the hero of `home-A-v1.html`. Derivatives live in `notes/mockups/home-A-v1/img/`,
cut to a 900px square centred on the sky gap at 48%/47% of the source.

**It survives the crop, which was the thing to check.** The hero slot is a 360px square (`clamp(260px,
40vh, 480px)`). Most architecture photography turns to mush at that size; this one holds because the
subject is a *convergence*, not a scene &mdash; the lines point at the centre, so shrinking it loses
detail but not composition. **That is the reusable test for any hero candidate: does it have a centre?**

**The open question was colour, not subject.** Three colours meet in this corner and none of them agreed:
a cool neutral-grey photograph, a warm LAW cream offset block, a FREEDOM blue gradient ground. The
photograph read as stock dropped onto a brand.

**The recipe: a NIGHT duotone.** Greyscale, contrast +6%, then map shadows to `#00293A` and highlights to
`#F2F7F9` (`ImageOps.colorize`). The picture is unchanged &mdash; same building, same crop &mdash; but it
now belongs to the palette, and the cream offset reads as deliberate warmth rather than a mismatch.
**This generalises: it is how any future stock photograph is made to look shot for this firm**, and it is
a recipe rather than a per-image edit. Treatments compared in `hero-image-A-v1.html`.

**Flag for the client conversation:** the photograph is the City of London (the ribbed tower is the
Lloyd's building). For a firm whose states are Washington, Oregon and Colorado that wants to be a
conscious choice. It reads as "a city" to most viewers and as "London" to some.

## 17. Section 3 photograph &mdash; and the hand question (Adi, 2026-09-05)

`stocks/55.jpg` (a hand halting a run of falling dominoes) is in section 3 of `home-A-v1.html`. Subject
matches the heading exactly: the intervention happens *before* the fall, not after.

**It contains a hand, and the client's rule is "no stock photographs of people."** A hand with no face
is the standard grey area &mdash; most brands treat it as an object, not a person. This slot's original
brief already said it needed the client's sign-off on people imagery, so **flag it rather than assume**.
If it is refused, the same idea survives without the hand (the dominoes with one tile turned aside).

Real photographs now share one class, `.photo` (was `.heroimg-el`). A NIGHT duotone of this image is
already cut at `img/s3-55-night.jpg` if the duotone recipe in [note 16] is adopted.

## 18. The US locator map is a real vector asset now (Adi, 2026-09-05)

`us-locator-map.html` &mdash; six treatments, then five in-situ boards replacing the stand-in in section 5.
Geometry: US Census state boundaries via **us-atlas**, projected in **Albers equal-area** (the standard
for a US map; a plain lat/long plot splays the country at the edges). Alaska and Hawaii are insets.
Simplified to ~1.1px of the drawing &mdash; invisible at these sizes, and it takes all 51 shapes to about
88KB of path data. **All variations share one copy of that geometry and differ only in CSS**, so the
choice costs the page nothing either way. Generator: `mapgen.py` / `mapsheet.py` / `mapbuild.py`.

**The recommendation is the hierarchy palette:** Washington NIGHT, Oregon BUSINESS, Colorado FREEDOM.
It draws the client's own ranking (*Washington first, Oregon secondary, Colorado retained*, 2026-08-27)
instead of implying three equal offices. That is the only real argument for drawing a map at all &mdash;
a map that says nothing three words could not is decoration.

**Two things only full size revealed:**

**a. The three hand-drawn WA/OR/CO blobs must be deleted.** They stood in for a map. With a map present
they are the same information drawn twice, and the second telling is the less accurate one.

**b. A real map is far taller than the placeholder.** The hatched slot is 170px; the drawing is 1.7:1, so
it stands ~265px in the narrow column, ~440px in the wide one, ~730px at full band width. Dropping the
Alaska and Hawaii insets barely helps &mdash; they tuck under the lower 48 rather than extending the
bounding box &mdash; so **the only lever is how wide the map is allowed to be**. If section 5 must stay
compact, the map goes in the narrow column.

**Do not put "licensed in" wording near this.** It is a service area. The live disclaimer says Washington,
Idaho and Oregon; the client advertises Washington, Oregon and Colorado. Unresolved &mdash; and the
hierarchy variant sharpens the contradiction by ranking the states visually.

### 18a. Merged into Direction A (2026-09-05)

Adi chose **cut below Colorado, faded out**. It is in section 5 of `home-A-v1.html`, replacing the
cream band's hatched slot and the three hand-drawn WA/OR/CO blobs (both deleted, along with the now-dead
`.locslot` / `.sttrio` / `.stshape` / `.stlab` rules and the `wording pending` placeholder tag).

Build decisions worth keeping:

- **Only states with ink above the cut are carried.** Five southern states are never rendered, so they
  are not shipped &mdash; 44 of 49, and a coarser 1.5px tolerance for a ~760px render. The whole asset is
  ~55KB of inline path data.
- **The band loses its bottom padding and the map is bottom-aligned** (`margin-bottom:-1px`). A cropped
  map floating inside padding reads as a rendering fault; running to the edge is what makes the crop
  look like a decision.
- **The fade nearly erased Colorado.** Colorado is both the palest of the three states and the closest
  to the cut, so the first build faded out the very state it was meant to show. Fixed by starting the
  gradient at 82% instead of 68% and dropping the cut from y=316 to y=330. **The general rule: a fade
  applied to the bottom of a graphic must be checked against whatever sits lowest in it, not against
  the graphic as a whole.**

## 19. Puzzle art for section 5 &mdash; which sentence is it illustrating? (Adi, 2026-09-05)

`puzzle-art.html`, five variations shown beside the real section 5 copy.

**A puzzle is the most-used metaphor in professional services, so the only interesting question is which
sentence it illustrates.** *&ldquo;A piece is missing&rdquo;* and *&ldquo;this piece fits&rdquo;* are
different claims. This heading makes the second: not that the business lacks something, but that
experienced counsel can sit inside it **without becoming a department**. Section 2 already made the
problem statement; repeating it here spends a section on an argument the page has finished.

Drawn as real geometry, not clip art: each knob is four cubic curves, tabs and blanks are matched across
shared edges, and the board is generated so a piece can be moved, relabelled or removed without redrawing
anything (`puzzle.py`). **Flat fills only &mdash; no bevels, gradients or drop shadows.** That single
restriction is what separates this from the stock version of the same idea.

**Recommendation: 2, already fitted.** The piece is in, in NIGHT, everything else grey. No gap, no arrow,
no drama.

**3 is the one that earns the metaphor** &mdash; every piece labelled with a business function, the NIGHT
one being Legal, which draws the lead's claim that legal needs run *across the organization*. But the
eight function names are ours, not the client's: that is a content decision for AISV, and a wrong label
dates badly.

### 19a. The map moved above the heading (Adi, 2026-09-05)

Section 5 now opens with the locator band, then the eyebrow, heading and lead. `.mapband` swapped its
`margin-top:34px` for `margin-bottom:52px` so the gap follows it instead of preceding it.

**Two things to watch in that order.** The section now opens with a map that has no caption above it, so
for one beat the reader sees three coloured states with nothing telling them why. And the credential bar
immediately below still reads **&ldquo;3 states &mdash; Washington, Oregon and Colorado&rdquo;** &mdash;
which is now the same information as the map, in the same section, twice. That is the same fault the
three hand-drawn blobs had; the fix is the same one, delete one of the two tellings.

### 19b. Merged &mdash; fitted piece, left middle (Adi, 2026-09-05)

Variation 2 is in section 5 of `home-A-v1.html`, with the NIGHT piece moved from right-middle to
**left-middle**, nearest the copy. Section 5&rsquo;s eyebrow, heading and lead now sit in a
`.s5top` grid with a fixed 400px art column; the heading cap dropped 900&rarr;640 and the lead
760&rarr;600 to make room, so the heading now runs three lines.

**One thing the edge position costs:** a piece at the board&rsquo;s outer edge is interlocked on three
sides, not four. &ldquo;Fits perfectly&rdquo; is very slightly weaker there than in the middle of the
board. What it buys is balance &mdash; the dark mass sits beside the text instead of drifting to the far
right of the page &mdash; which is the better trade at this size.

### 19c. The interlock moved to section 4 (Adi, 2026-09-05)

Section 5&rsquo;s art column is only 400px, which is too small for the 6&times;4 board that made the
proportion argument work. Adi&rsquo;s call: put the **interlock at scale** in section 4 instead, beside
*You Do Not Need to Navigate This Alone*. `.s4intro` became a two-column grid (copy / 360px art).

**The page now carries two puzzle graphics** &mdash; the interlock in section 4 and the 3&times;3 fitted
board in section 5. Same metaphor twice in adjacent sections, which is the same duplication fault as the
map blobs and the &ldquo;3 states&rdquo; credential. **One of them should go**, and the interlock is the
one to keep: it is abstract enough to sit beside a heading without asking to be read, where the fitted
board makes an argument the section below does not need repeated.

Minor, unresolved: the interlock&rsquo;s NIGHT half is on the right, so the dark mass sits at the far
edge of the page rather than next to the copy. Mirroring it would pull the weight back toward the text.

### 12a. Open-placeholder register &mdash; additions (2026-09-05)

Direction A now carries **no** `.phtag` labels; the rule itself is deleted from the stylesheet. Everything
those labels were carrying lives here instead, per Adi&rsquo;s standing instruction that the mockups stay
clean and the notes hold the caveats.

- **The team count on the credential bar is generated, never typed.** The bar reads &ldquo;9 on the
  team&rdquo;. That number must come from the team post type at build time. Typed, it is wrong the first
  time someone joins or leaves &mdash; and this project already has a pending change (Mandy Bowen out,
  Nicole Farahdel in), so it would be stale before launch. Whoever builds the Kadence pattern wires it to
  a query, not a string.
- **&ldquo;21 years of business law&rdquo; is unconfirmed.** The client&rsquo;s own site carries three
  different founding years. It appears twice in section 5 (eyebrow and credential bar), so a correction
  is two edits, not one.
- **The map caption wording is still the client&rsquo;s to settle** &mdash; service area vs licensure,
  WA/ID/OR vs WA/OR/CO. See [note 18].

## 20. Icons on the credential bar (Adi, 2026-09-05)

`stats-proof.html` &mdash; the baseline plus five treatments.

**The icons have one job: let a scanner tell the three cells apart before reading them.** A row of bare
numbers is legible but silent. Every variation keeps the icon subordinate to the figure &mdash; the
number stays the loudest thing in its cell &mdash; because the moment the icon out-weighs the number the
bar stops being evidence and becomes decoration.

All three marks are drawn on the same 24-unit grid at 1.6 stroke with round caps, the **same construction
as the button icons already in the page**, so they read as one family rather than as something fetched
from a different set. A **bullseye** for years (accumulated aim, not a clock &mdash; a clock would say
time passing, which is not the claim), a **map pin** for states, a **group** for the team.

**Recommendation: 2, icon inline before the figure.** Nothing gets taller, so the bar costs the page no
extra height &mdash; the icon takes space the left padding was already wasting. 3 (tinted holder) is the
one to pick if the bar should carry more presence; it is the only version where the three icons line up
as a column and read as a set.

**Two findings worth keeping:**

- **The watermark treatment fails, and it fails for a reason worth remembering.** At the opacity that
  makes an icon feel like texture, a bullseye and a map pin are nearly the same grey blob &mdash; which
  destroys the only thing the icons were added to do. *An icon dropped below the threshold where it can
  be identified is not a subtle icon; it is a smudge.*
- **A US flag is the wrong icon for &ldquo;3 states&rdquo;.** A flag says *the United States*; the claim
  is three specific states, which is nearly the opposite. A pin says *a place*. Shown as variation 5 so
  the choice is made deliberately rather than by default.

## 21. No em dashes (Adi, 2026-09-05)

Adi: *"avoid using em dash, i dont want to use too ai here."* The em dash has become a tell for
machine-written text, and on a law firm site it undermines the impression that a person made the page.

Both directions are clean. Seven in Direction A were replaced (map key, map caption, credential bar,
three image-slot notes, the assessment-name note); Direction B had one, in the page title. **All seven
were ours.** None of AISV's body copy was touched, and none should be: that copy is theirs and is
reproduced verbatim.

Replacements, in order of preference: a comma, a colon, brackets, a full stop.
`Service area, not a licensing claim` &middot; `states: Washington, Oregon and Colorado` &middot;
`Washington (primary)`.

Check before shipping any mockup: `grep -c mdash <file>` should return 0.

### 20a. Merged: the NIGHT credential band (Adi, 2026-09-05)

Variation 5 is in section 5 of `home-A-v1.html`. The credential bar stops being a rule between
paragraphs and becomes an object: a NIGHT band, white figures, CONFIDENCE icons, hairline dividers at
18% white. `.credbar` lost its top and bottom borders and gained a background, a radius and padding.

It carries the **flag** for the states cell, as the variation was drawn. I had argued for a pin (a flag
says *the United States*; the claim is three specific states) and Adi chose the variation anyway, so the
flag stands. Swapping it back is a one-word change in the markup if it ever comes up again.

The page now has three bands stacked through section 5: the cream locator, white copy, then the NIGHT
credentials. That is a lot of surface changes in one section, and it is worth a look at full page scroll
rather than in isolation.

## 22. Telling the accordion list apart from its paragraph (Adi, 2026-09-05)

`accordion-test.html`. The problem is real: `.accdesc` and `.gitem` are both 16px in the same column
with an 8px gap, so an open panel reads as one grey block and nothing marks where prose stops and
inventory starts.

**The finding that decides it: panel four is not the same kind of content as panels one to three.**
Panels one to three hold short noun phrases ("Vendor agreements"). Panel four holds full sentences
("No more waiting until a small concern becomes an expensive problem."). **Every board on the sheet
shows panel one and panel four together for that reason**, because several treatments work beautifully
on labels and fall over on sentences, and that copy is AISV's, not ours to shorten.

- **1 Bullets, two columns.** Marker plus a second column, which halves the height of a seven-item panel.
  On panel four the sentences wrap and the columns stop lining up.
- **2 Tick icons.** A tick says *included*, which is the right claim for a menu of services. Seven in a
  column is a lot of repeated shape, and a tick before "No more wondering whom to call" reads oddly,
  as though an absence were being ticked off.
- **3 Typography only.** Smaller, letterspaced, NIGHT. Quietest and adds no new furniture, which suits
  the brief. Fails hardest on panel four: a full sentence in letterspaced caps is unreadable past about
  six words.
- **4 Hairline rows.** Strongest separation, nobody could mistake it for a paragraph. Also the heaviest:
  four open panels would add roughly twenty rules to a section that already separates accordions with
  hairlines.
- **5 Tinted tags.** Furthest from prose. At the current width the sentences fit on one line so nothing
  wraps, but a sentence-length chip reads as a highlighted sentence rather than a tag, and on a narrower
  column it would wrap into a paragraph with a background.

**Correction worth recording:** the first version of this sheet claimed tags wrap into a column-width
box on panel four. They do not at 1440. The claim was checked against a render and rewritten. *Predicting
a layout failure is not the same as observing one.*

### 22a. Dotted rows (Adi, 2026-09-05)

Second section on `accordion-test.html`. **The reason to prefer a dot over the solid hairline is not
decoration: the section already uses solid hairlines to divide the accordions from each other**, so
using them again inside a panel makes two different jobs look identical. A dotted rule is quieter and
unmistakably subordinate.

- **d1 browser `dotted`.** One character of CSS. Chrome draws these as small squares at a fixed pitch,
  which is dense and slightly mechanical.
- **d2 round dots on a 7px pitch** (repeating radial gradient). Lighter than d1 and more deliberate,
  because the spacing is a choice rather than whatever the engine does. **Recommended.**
- **d3 dot leader running to the right.** The typographic version, the way a contents page sets a list.
  Nothing could be mistaken for a paragraph, because prose never does this. Works on panel one, where
  the labels are short and uneven; on panel four the sentences nearly fill the column so the leader
  shrinks to a stub.
- **d4 leader plus a tick at the right.** Combines the two devices that worked separately: dots that say
  *list*, a tick that says *included*. The ticks align in a column at the right margin.
- **d5 dashed, for comparison.** Worth keeping the distinction: **a dash has direction and reads as a
  broken line; a dot has none and reads as texture.** A dash suggests something interrupted. For a list
  of services the dot is the more neutral mark.

**Build note.** The first build emitted no dot CSS at all: `DOTS` entries are six-tuples and the
stylesheet was assembled from index 4 (the class name) instead of index 5. The boards rendered as plain
rows and looked like a CSS bug in the technique. *When an effect does not appear, check that its rule
reached the output before rewriting the technique.*

## 23. Image treatments: grain and other effects (Adi, 2026-09-05)

`effect-filter-image-test.html`, the hero photograph with seven treatments.

**Two rules bound what belongs on this sheet.** The palette is the brand, not the imagery, so
photographs stay desaturated and colour is left to the gold buttons, the NIGHT panels and the cream
bands. And the client called the current site *visually busy and somewhat dated*, which rules out
anything that announces itself.

**The test is not whether a treatment looks good in isolation. It is whether it survives being applied
to every future photograph by someone who was not in this conversation.** A treatment that needs
judgement each time is not a treatment, it is a one-off.

- **1 Grain, subtle.** Monochrome noise generated in the page by an SVG turbulence filter, 11% on
  multiply. No asset, no extra request, nothing to reapply. Takes the digital cleanness off and gives
  flat areas like the sky something to hold. **Recommended.**
- **2 Grain, heavier.** 22% at a coarser frequency. The outer marker: the eye reads texture before it
  reads the building.
- **3 Split tone.** Cool NIGHT shadows, warm cream highlights, **midtones left neutral**, which is what
  separates it from a duotone. A duotone maps the whole range onto two colours and the picture becomes a
  wash; a split tone keeps the middle grey and stays photographic. On this page it also makes the warm
  highlights agree with the cream offset block instead of arguing with it.
- **4 Split tone with grain.** How film actually looks. Richest option, and the one most likely to decay,
  because two effects means two things to get wrong on the next photograph.
- **5 Lifted contrast.** No effect at all, just a real black point. On the sheet as a check: it is easy
  to reach for a filter when the real problem is that the photograph is flat.
- **6 Halftone.** A true halftone, dot area varying with local luminance, drawn at 3x and downsampled.
  **A CSS dot pattern cannot do this** because its dots are all one size; it can only lay a screen over
  a picture rather than build the picture out of dots.
- **7 Vignette.** Included so it can be ruled out. The most dated effect on the sheet, and dated is the
  exact complaint the client made about the current site.

**Build note, worth keeping for any future halftone.** The first render crushed the shadows to solid
black: at a 7px cell with dots up to 0.72 of the cell, dark cells overlap and merge. Fixed by lifting
the source brightness 16% and capping the dot at 0.58 of the cell. *In a halftone the shadows plug up
long before the maths says they are full.*

### 23a. Grain applied across Direction A (Adi, 2026-09-05)

Grain is on all eleven image surfaces in `home-A-v1.html`: the three real photographs, the four
placeholder slots, and the remaining wrappers. **Opacity 0.5, multiply**, as Adi asked, which is well
above the 0.11 the sheet called subtle.

Two mechanics worth keeping:

- **The grain sits on the wrapper, never the image.** An `<img>` cannot carry a pseudo-element, so the
  overlay goes on `.imgwrap`, `.s3img`, `.s4img` and so on, all of which were already
  `position:relative` for the offset shadow. Placeholders get the same class, so the mockup shows what
  the finished page will look like rather than what it looks like with the pictures missing.
- **The noise is generated in the page** by an inline SVG turbulence filter in a data URI. No asset
  ships, and swapping a photograph needs no second step.

**The finding: multiply grain is not uniform across a page of photographs.** Multiply only darkens, so
grain reads strongly in highlights and nearly disappears in shadows. On the hero, which is mostly white
sky, it is unmistakable at 0.5. On the section 3 photograph, which is dark, the same 0.5 is barely
visible. **If the effect needs to look consistent image to image, the blend has to change to
`overlay` or `soft-light`, which work in both directions.** Multiply at a high opacity is really a
highlight treatment wearing a grain costume.

## 24. Accordion hover (Adi, 2026-09-06)

Both accordion systems in Direction A, the services list and the FAQ, now answer the pointer. Three
things move together at 0.16s: a LAW-cream tint behind the row, the chevron to BUSINESS teal, and the
title one step lighter. Keyboard focus gets the same treatment plus the page-standard 3px teal outline,
so a keyboard user sees what a mouse user sees.

**The tint is a pseudo-element bleeding 18px either side, not a background on the row.** A background
would stop exactly where the hairline stops and read as a second competing rule; a bleeding tint reads
as a surface the row sits on.

**Build note that cost a rebuild.** The tint was first given `z-index:-1` so it would sit behind the
text without positioning every child. Nothing appeared. A negative z-index does not stay inside the
row: it escapes to the nearest stacking context and paints behind the page background. The fix is
`z-index:0` on the tint and `position:relative; z-index:1` on the row content. *If a negative z-index
makes something vanish rather than move behind one element, it has gone further back than intended.*

### 23b. Why the images are greyscale, in Adi's words (Adi, 2026-09-06)

*"I made it filter grain in image because I want to unify images look whether they are colour, or
different hue etc etc. I made them greyscale and they look unified."*

**This is the reason to record, because it is the reason that survives.** The treatment is not a style
preference; it is a solution to a sourcing problem. The photographs on this site come from at least
three places: paid stock, the firm's own shoot, and whatever the client sends later. They will not
share a colour temperature, a white balance or a grade, and nobody is going to grade them by hand
before every upload.

Greyscale removes the variable entirely, and the grain puts a single surface over all of them so they
read as one set rather than as a collection. **Any photograph dropped in later inherits both
automatically**, because `filter:grayscale(1)` sits on `.photo` and the grain sits on the wrapper: no
per-image step, nothing for a future editor to remember or get wrong.

The consequence to keep in view: **colour on this page now belongs entirely to the brand**, the gold
buttons, the NIGHT panels, the cream bands. Nothing else competes for it. That is a strong position and
it holds only as long as nothing reintroduces a colour photograph.

## 25. The header: sticky was declared but never worked (Adi, 2026-09-06)

Adi asked for a sticky header. One was already written into Direction A, `position:sticky; top:0`, with
a scroll-driven shrink. **Neither was working, for two separate reasons, and both were invisible in a
static screenshot.** Found by measuring the header's position after a scripted scroll rather than by
looking at it.

**1. The page wrapper was a scroll container.** The builder wrapped everything in `.stage { overflow-x:auto }`
as a safety for narrow viewports. Any `overflow` other than `visible` makes an element a scroll
container, and a sticky descendant then sticks to *that* box instead of the viewport. Since `.stage` is
exactly as tall as its content, it never scrolls, so the header never stuck. Measured: at `scrollY 1800`
the header's top was `-1800`, meaning it had scrolled away with the page.

**2. The CSS scoper was mangling every at-rule.** The builder prefixes each selector with `.ab-Main` so
the artboard styles cannot leak. It was prefixing at-rules too, emitting `.ab-Main @supports (...) { }`
and `.ab-Main @keyframes hdrlift { }`. Both are invalid, so the browser discarded the whole block and
the shrink animation simply did not exist. Computed `animation-timeline` came back as `auto` and
`document.getAnimations()` returned zero, which is what gave it away.

Both fixed in `build.py`, `buildB.py` and `buildA2.py`; all three pages rebuilt. Now measured at
`scrollY 900`: header pinned at `top 0`, height 101 to 68, wordmark 52 to 38, row padding 24 to 13.

**The lesson worth keeping: a declared behaviour is not a working behaviour.** Both faults rendered as
a perfectly normal-looking page. Scroll behaviour has to be verified by scrolling and measuring, and
at-rules have to be checked in the built output, not the source.

## 26. The assessment mark, and the naming question it displaced (Adi, 2026-09-06)

`how-healthy-is-your-business-check.html`, five marks. Adi chose **4, coverage six of eight**: a ring in
eight segments with two left open and the brand circle at the centre. His reason, which is the right
one: *"it represents complexity of business rather than a single meter."*

**The decision that mattered was not aesthetic. It was whether the assessment returns a score.** A
radar, a dial and a bar profile all promise a measured result per area, which is a claim about the
product rather than a design choice. A ring of coverage promises completeness instead, which is what
the firm actually sells. If the assessment turns out to produce a per-area result, the bar profile is
the one to revisit; the radar and the dial stay rejected either way, the dial because a legal review
does not reduce to one number.

Also rejected on the sheet: **a steadying pulse line reads backwards.** A flat trace is not health, it
is the absence of it.

The page now carries three flat marks, all tilted eight degrees: the interlock in section 4, the speech
forms at the FAQ, the coverage ring here. **Three is the ceiling.** A fourth turns a motif into a
formula.

### 26a. The assessment name, moved out of the mockup

The `nameph` note is deleted from `home-A-v1.html` per Adi&rsquo;s standing rule that mockups carry no
placeholder text. It said, and this is still open:

> **Assessment name to be confirmed:** Legal Health Check / Business Health Assessment / Business Legal
> Health Assessment. **One name**, used in navigation, CTAs, page title, URL and schema.

Three of the four sources drop the word *Legal*: the client&rsquo;s Brand Guide uses **"Take the
assessment"** three times and **"Take The Free Assessment"** once, and the naming memory recommends
**"Business Health Assessment"**. The 41-character label currently in the buttons comes from the only
source that invented it. See [note 13] for the measured button widths this affects.

**Until AISV and the client confirm, the page keeps one name everywhere** rather than a placeholder,
because a mockup showing two names for one product reads as an error rather than as an open question.

### 12b. The newsletter consent line, removed from the mockup (Adi, 2026-09-06)

Removed from the footer of `home-A-v1.html`, along with its `.consent` rule:

> *By subscribing you consent to receive marketing emails from Equinox Business Law Group PLLC.
> Unsubscribe any time.*

**Recorded rather than discarded, because this one is not a placeholder.** The other things pulled out
of the mockups were notes to ourselves. This was functioning copy sitting under a live signup field,
and consent wording under a marketing subscription is a compliance question rather than a design one,
for a firm whose own site already runs a consent manager (Termageddon, per
`.logs/planning/tracking-conversion.md`).

Whoever builds the footer pattern decides, with the client, whether the form ships with consent text,
a link to the privacy policy, or nothing. **It is not a decision the design should make silently by
having deleted the line.**

### 26b. The marks are decoration, so they are out of flow (Adi, 2026-09-06)

All three flat marks were sitting in a grid column beside their heading, which meant **the heading's
measure and the section's spacing depended on whether a mark happened to be there**. Adi: the art
should not add spacing or padding to the heading area.

They are now `position:absolute`, centred on the heading block with `top:50%; transform:translateY(-50%)`,
right-aligned to the content edge, inside a `position:relative` parent that adds nothing of its own.
The grids are gone and the headings and leads are back to their natural measures: section 4's heading
lost the 640px cap the art had forced on it, and its lead lost 600px.

**The rule this sets:** a decorative mark never occupies a layout track. If it did, removing it would
reflow the section, which is the opposite of what decoration means. Headings keep a max-width so text
cannot run under a mark, but that is a reading measure they would have anyway, not spacing added for
the art.

Verified in the browser at 1440: no text box reaches any mark. The tightest case is the assessment
section, where the heading is capped at 820 and the ring starts at 1131.

## 27. Social proof: what Equinox actually has (Adi, 2026-09-06)

Adi asked whether the firm has BBB or any credential, association or standard to carry trust in a US
legal market. Answered from the 2026-09-03 crawl of the live site in `notes/crawl/`, not from memory.

**No BBB, and that is fine.** BBB carries little weight in legal services; US buyers of business law
look at named references, Google reviews, and lawyer-specific directories.

### Firm level, verified on the live site

- **WBENC certification** (Women's Business Enterprise National Council). Stated and linked more than
  once. **The strongest asset on this list and the most under-used.** It is not decoration: WBENC
  certifies 51%+ woman ownership and is a live procurement credential, because corporate buyers with
  supplier-diversity requirements can only count spend with certified suppliers. That makes it a reason
  to hire, not a badge.
- **Six named client testimonials**, each with a full name and company: Architextures, Darwin's Natural
  Pet Products, Qavah Partners, ProMotion Holdings Global, Alliance Partition Systems, Dental
  Professionals. On `/our-approach/testimonials/`.
- **Four named case studies** in the blog: Facet NW, Advaiya, ProMotion Holdings, Alliance Partition
  Systems.
- **Twenty years in practice.** The site marks a 20th anniversary. Note this against the unconfirmed
  **"21 years"** used twice in section 5.

### Founder level (Michelle Bomberger), verified

Puget Sound Business Journal **40 Under 40, 2012** &middot; King County Executive's **Woman Small
Business of the Year, 2013** &middot; Kellogg MBA, Notre Dame BS Finance cum laude &middot; boards at
Bellevue LifeSpring and Youth Theatre Northwest &middot; member of the Center for Advanced Manufacturing
Puget Sound (board and committees), **EO**, **WPO**, Vistage.

**These are the founder's, not the firm's, and they are 2012 and 2013.** On a bio they are assets. On a
homepage credential bar they date the firm.

### Correction: two of the three footer credentials were not real

The `credrow` removed from the footer earlier today listed WBENC, *"Puget Sound Business Journal, 100
Fastest-Growing Private Companies"*, and *"425 Business, Best in Business"*.

**Only WBENC is supported by the source material.** The crawl contains no "100 Fastest-Growing" listing;
the real PSBJ item is Michelle's 40 Under 40. **"425 Business" appears nowhere on the live site at all**
&mdash; the only "425" in the crawl is the phone area code. Both lines appear only in our own mockup
files and handoff.

**For a law firm, an invented award is not a design bug, it is a false claim.** Deleting that row was
right for a reason neither of us knew at the time. *Nothing goes into a credential bar that cannot be
pointed at on a source.*

### What to do

1. **Use the testimonials.** The homepage carries no client voice at all. Six named quotes with real
   companies outrank every badge available here.
2. **Use WBENC**, with the procurement reason attached rather than as a logo.
3. **Ask the client for what we cannot see**: Google Business Profile rating and review count, any
   Super Lawyers / Avvo / Martindale listings, WSBA and Oregon State Bar memberships, EO and WPO at
   firm level, and any supplier-diversity registrations beyond WBENC.

### 27a. Social proof band, drafted under the hero (Adi, 2026-09-06)

A cream band directly under the hero: an eyebrow, six client names, and two credentials at the right,
20 years and WBENC. Directly under the hero because that is where a reader decides whether to keep
reading, and because the page previously offered no proof of any kind before section 5.

**Everything in it is verifiable on the client's own site.** The six companies are published there by
name, five from the testimonials page and Facet NW and Advaiya from the case studies. WBENC is stated
and linked. The figure is **20**, matching the site's own anniversary, not the unconfirmed 21 used
twice in section 5. That inconsistency is now visible on one page and has to be settled.

**Names, not logos, and deliberately.** We have no logo assets, and drawing a WBENC mark would be
reproducing their trademark, so the certification is set as type.

**Two things for the client to approve before this ships:**

1. **Naming clients on the home page is their call, not ours.** These companies are already published
   with attributed quotes, so listing them is consistent with what the firm already does. It is still a
   step up in prominence, and a law firm has confidentiality obligations that a design cannot assume
   away.
2. **A "trusted by" row implies a current relationship.** Some of these testimonials are years old.
   The client should confirm each name is still one they want on the front page.

**If names are refused, the fallback is one attributed quote** rather than an unnamed logo row: an
anonymous testimonial proves nothing, where one named client with a company beside it does.

### 27b. The client row is a carousel (Adi, 2026-09-06)

The six names are now a marquee. **CSS only, no JavaScript**: the list is rendered twice and the track
slides exactly half its own width, so the loop is seamless with no jump and nothing to initialise. The
second copy is `aria-hidden` so a screen reader hears each client once rather than twice.

Motion stops on hover and on focus-within, because a moving list cannot be read, and it is switched off
entirely under `prefers-reduced-motion`. A mask fades both ends so tiles enter and leave rather than
being chopped by the container edge.

**The tiles are stand-ins at logo proportions, not labels.** We have no logo files, and drawing a
client mark would be reproducing someone else's trademark. Swapping in the real assets later is one
`<img>` per tile with no other change.

**Build note.** The first version pushed the two credentials clean off the row. A grid `1fr` track floors
at `max-content`, and the marquee's `width:max-content` child dragged the column open past the viewport.
Fixed with `minmax(0,1fr)` plus `min-width:0`. *Any grid column holding a scroller or a `max-content`
child needs an explicit zero minimum, or the column sizes to its content and the rest of the row is
pushed out.*

**Open:** with placeholder tiles only four fit at this column width, where a logo wall wants five or
six. Real logos are usually wider than tall and shorter than a full company name, so this will improve
on its own. If it does not, the fix is to give the carousel the full band width and move the two
credentials up beside the eyebrow.

### 27c. CORRECTION: both footer credentials were real (2026-09-06)

**Note 27 was wrong, and the error mattered.** I reported that "Puget Sound Business Journal, 100
Fastest-Growing" and "425 Business, Best in Business" appeared nowhere on the live site, and concluded
that two of the three footer credentials were invented.

**Both are on the live homepage, as badge images:**

- `themes/html5blank-child/img/100FastestGrowing-white.png`, alt *"Puget Sound Business Journal Fastest
  Growing Company"*
- `uploads/2025/07/Best-in-Business-200.png`, alt *"425 Business Best in Business logo"*
- `uploads/2025/08/certified-wbenc-logo-2.png`, alt *"Women's Business Enterprise logo"*

**Why the check failed: the crawl in `notes/crawl/` captures text, not images.** A credential shown as a
badge has no text to find, so searching the crawl proved only that the words were absent, not that the
award was. *A text corpus cannot disprove a visual claim.* Fetching the live HTML found all three in
under a minute.

**Consequence:** removing the footer `credrow` deleted real, verified proof rather than a false claim,
and the three badge files are now in `notes/source/logos/` if it is restored.

### 27d. The client row uses the real logos (Adi, 2026-09-06)

Eight client logos pulled from the client's own homepage into `notes/source/logos/`, normalised to a
common source height and greyscaled in CSS so eight brand palettes do not arrive at once. The band is
white with no rules.

**Two of the files are named for nothing:** `DLM-1.jpg` is **Architextures** and `TTM-1.jpg` is
**Tri-Tec Manufacturing**. I first shipped them with alt text reading "DLM" and "TTM", which is a
filename, not a company. *Open the image before you write its alt text.*

**Logos are capped on both axes, and roundels get their own ceiling.** A wordmark is wide and short, a
roundel is square; matching them on height alone gave the wordmark five times the visual weight. Wide
marks cap at 150px wide, square marks at 54px tall.

**Still to check with the client:** whether every one of these eight is a current client they want named
on the front page, and whether the firm has permission to use each mark. They are published on the
client's own homepage already, which is the strongest argument that they do.

### 27e. The logo carousel steps rather than glides (Adi, 2026-09-06)

Adi wanted *slide, pause, slide, pause*, not a continuous marquee. It now holds each position for about
2.6s and slides to the next over roughly 0.65s, eight steps in 26s.

**What makes a stepped loop possible: every tile is the same width.** The tiles are fixed at 180px, so
one step is always the same distance and eight steps land exactly on the duplicate copy, which is what
makes the wrap invisible. With variable-width tiles the maths cannot close and the loop jumps. The holds
are keyframe pairs sharing a value (`0%, 10%`), the moves are the 2.5% gaps between them.

**Build note, and it is the second of its kind today.** The stepped animation shipped as a smooth glide.
The builder's scoper was skipping keyframe selectors by testing the whole string against one percentage,
so `to`, `from` and `50%` were skipped but **`0%, 10%` was not** &mdash; it became
`.ab-Main 0%, .ab-Main 10%`, invalid, and the browser dropped every frame except the lone `100%`. With
one frame left it simply interpolated from wherever it was: a perfectly smooth animation that looked
deliberate.

Fixed by testing each comma-separated part. Same root cause as the `@supports` fault in [note 25]:
**the scoper does not know what a selector is, and invalid CSS fails silently.** Verified this time by
sampling `DOMMatrix.m41` every 350ms and reading the actual numbers: `0 0 0 0 -48 -176 -180 -180 -180
-180 -195 -335 -360 -360`. *A motion bug is a measurement problem, not a looking problem.*

## 28. The offset shadow is a scale, not seven numbers (Adi, 2026-09-06)

Adi spotted that the hero's offset was `translate(30px, 24px)` and asked for the offsets to be square
and proportional to the image.

**Measured before:** the offsets ranged from 4.6% to 9.2% of the image's shorter side, and only one of
seven was square. The hero was the outlier at 9.2%, which is why it looked wrong.

**The rule now: the offset is always square, and it is 4.5% of the image's shorter side, rounded to an
even number.** A small image with a large offset reads as a mistake; a large image with a small offset
reads as a hairline.

| | short side | offset |
|---|---|---|
| hero | 325 to 480 | 18 |
| closing | 389 | 18 |
| the guide | 440 | 20 |
| how it works | 465 | 20 |
| the outcome | 465 | 20 |
| the plan | 507 | 22 |
| the stakes | 549 | 24 |
| who it is for | 546 | 24 |

**Each image's `margin-right` was reset to match its own offset.** That gutter exists to hold the
shadow, so a 26px gutter under a 20px offset leaves a 6px gap that nothing accounts for. They move
together or the alignment drifts.

Measured after: every offset square, the ratio band closed to 4.3&ndash;5.5%. The hero is the only
viewport-sized image, so its ratio moves with window height &mdash; 5.5% at its 325px minimum, 3.8% at
its 480px maximum. 18px is the middle of that.

## 29. Brand guide audit of `home-A-v1.html`, before client review (Adi, 2026-09-06)

Checked against `notes/source/brand-kit/brand-guide-short.md` (the 2023 deck, values matching the 2022
full guide) and the kit README. Ordered by how likely each is to be raised by the client, not by how
much work it is to change.

### High risk: things the guide states and the page contradicts

**1. The whole heading system is inverted.** Adi already flagged thin/bold, but the deviation is wider
than that. The guide is explicit:

| Level | Guide says | Page does |
|---|---|---|
| H1 | Montserrat **Bold**, sentence case | Light 300 with Bold spans |
| H2 | Montserrat **ExtraBold**, **ALL CAPS** | Light 300 with Bold spans, sentence case |
| H3 | Montserrat **Light**, **ALL CAPS** | SemiBold 600, sentence case |
| H4 | SemiBold, sentence case | not used |

**The page does not just re-weight the headings, it swaps H2 and H3's roles and drops all-caps
entirely.** The guide gives its heavy all-caps voice to H2 and its light all-caps voice to H3; the page
uses sentence case for both and makes H3 the heavier of the two. That is defensible &mdash; all-caps H2
at 36px would be shouting, and the client asked for *elevated and simplified* &mdash; but it should be
presented as a deliberate proposal with a reason, not left to be discovered.

**2. `#112337` is a second dark navy that is not in the palette.** It is the footer background, so it is
the single largest off-palette block on the page. NIGHT is `#003B53`. **This is the easiest thing on the
list for a client to spot and the hardest to defend**, because there is no reading of the guide that
produces it. Either change it to NIGHT or state why the footer needs its own darker ground.

**3. Body line height is 1.62; the guide says 1.2.** Ours is right for reading on the web and 1.2 would
be unusable at 18px, but it is a stated number the page does not meet, so it should be raised as a
web-specific correction rather than found later.

**4. Callout tracking is `0.16em`; the guide says `+250`, which is `0.25em`.** Small, easily changed,
and exactly the kind of specific number a brand-conscious reviewer checks.

### Medium risk: extensions the guide does not authorise

**5. The palette has six colours and no neutrals at all.** The page uses roughly a dozen greys (ink
`#2C2C2C`, rules `#E4E4E4`, captions `#8C8C8C` and so on). Every professional site needs neutrals and
the guide simply does not cover them, but **the honest framing is that we extended the palette**, and
that extension should be shown to the client as a small named set rather than as twelve ad-hoc values.

**6. Off-palette tints and shades of brand colours.** `#00546F` and `#002B3D` are hand-mixed NIGHTs for
hover states; `#F0E6CD` is a darkened LAW used as a border; `#C2CED4` is the dotted rule; `#FBF6E8`,
`#E4EDF1`, `#E7EDF0`, `#EEF4F7` are FREEDOM and LAW tints. All are derived and none clash, but none are
in the guide. Same recommendation: name them as a documented tint ramp.

### Low risk: checked and defensible

- **The hero gradient is on-brand.** The kit ships four sanctioned radial grounds, near-white centre
  falling to colour at the edge, and names them as brand elements. Our white-to-FREEDOM radial
  reproduces `Gradient_LtBlue_To_White_Radial` in CSS, which the kit README explicitly recommends over
  shipping the PNG.
- **Logo placement follows the rule.** The guide wants the logo on white or a bright brand gradient;
  the header is white. The footer uses the Reverse lockup on a dark ground, which the README describes
  as a permitted but deliberate departure &mdash; and it is only the *colour* of that ground (item 2)
  that is the problem, not the reverse lockup.
- **Gold on NIGHT, NIGHT on white, ink on gold** all pass AA and were measured earlier.

### Not a brand issue but ships with the same review

**"21 years" appears twice in section 5; the client's own site says 20**, and the new proof band under
the hero now says 20. The page contradicts itself in one scroll. Settle it before it goes out.

## 30. `home-A-v3.html`: the brand guide applied literally (Adi, 2026-09-06)

A copy of A v1 with note 29's findings corrected, so the two can be compared side by side and the
client can be shown the cost of each rule rather than told about it.

**Type, straight from slide 8.** H1 Montserrat Bold sentence case at 48px, no thin/bold pairing
anywhere &mdash; `<b>` inside a heading now inherits its weight rather than jumping to 700. H2
ExtraBold ALL CAPS at 30px with zero tracking (down from 36px, because caps read larger at the same
size). H3 Light ALL CAPS, which reverses v1 entirely: the section headings are now the light ones and
they are the ones shouting. Callout tracking moved from 0.16em to the guide's `+250` = 0.25em. FAQ
questions were left as SemiBold sentence case, read as **H4 sub-headlines** rather than H3 short
headlines, because a two-line question in light all-caps is unreadable and "HEADLINES SHORT" plainly
does not describe them.

**Body line height is now 1.2, as specified.** This is the one change that visibly hurts. At 18px it is
tight enough to read as a fault, and it is almost certainly a print value that was never revisited for
screen. **Shown rather than argued about:** v3 is the evidence for asking the client to relax it.

**Colour: zero off-palette values.** v1 used 37 hexes; v3 uses six brand colours plus white and black.
Everything else is expressed as a brand colour at alpha:

- **The footer's `#112337` is gone** &mdash; it is NIGHT now. That was the worst offender, a second dark
  navy occupying the largest block on the page.
- **Neutrals come from one source.** A dozen unrelated greys became NIGHT at eight alpha steps, from
  `.88` for body text down to `.03` for the palest ground. The guide names no neutrals at all, so this
  is still an extension &mdash; but it is one extension with one logic, which is defensible in a review
  where twelve arbitrary greys are not.
- **Tints come from FREEDOM, LAW and CONFIDENCE at alpha**, not from hand-mixed hexes.
- Hand-mixed hover shades `#00546F` and `#002B3D` became BUSINESS and NIGHT.

**What v3 does not change:** the layout, the imagery, the marks, the copy, the offset-shadow scale, and
the greyscale-plus-grain treatment. It is the same page in the guide's clothes, which is the only way
the comparison is worth anything.

**How to use the pair in the review.** v1 is the recommendation; v3 is the proof that the deviations
are deliberate. The two questions to put to the client are whether the heading voice should be
all-caps ExtraBold, and whether 1.2 body leading was meant for print.

### 30a. Bold removed from the markup, not just from the CSS (Adi, 2026-09-06)

Adi's catch: v3 had neutralised the thin/bold pairing with `font-weight:inherit`, but the `<b>` tags
were still sitting inside the headings. **Rendering identically is not the same as being gone.** A
heading that carries emphasis markup is claiming a distinction the guide's type system does not make,
and it invites the next person to re-style it back.

**Twelve bold tags removed from 25 headings**, and the CSS crutch removed with them.

**Five remain, all in prose, all correct:** two in body paragraphs (`turnline`, `hope`) and three in the
map key. That is emphasis inside a sentence, which the guide does not restrict; the rule is about
heading levels having one weight each, not about banning bold from the page.

*The general point: when a design rule is enforced in CSS but contradicted in the markup, the markup is
what survives the next edit.*

### 30b. Second pass on v3: three things the first pass missed (2026-09-06)

Re-audited rather than assumed, and the first pass had left real deviations.

**1. Montserrat Medium 500 was used eight times and is not in the guide.** The guide names Light,
Regular, SemiBold, Bold and ExtraBold. Medium is a sixth weight nobody authorised. Resolved by pushing
each use to its nearest sanctioned neighbour: prose-like uses (`pb`, `facon`, `g`, `ctahead`) down to
Regular, UI labels (`navitem`, `fttag`, `megalink.plain`, `megacount`) up to SemiBold. **Weights are now
300 / 400 / 600 / 700 / 800 &mdash; exactly the guide's five.**

**2. Ten rules still carried invented tracking.** The guide allows three values: `0`, `+5` (`.005em`)
and `+250` (`.25em`). The page had `.02`, `.03`, `.06`, `.15`, `.16` and `.2em` scattered across
footer headings, mega-menu labels, the CTA eyebrow and the WBENC mark. Every uppercase label is a
CALLOUT by the guide's own definition, so all of them went to `.25em`.

**3. I had invented `.02em` on the caps headings myself**, for legibility, in the version whose entire
purpose is not inventing. Set to `0`, as slide 8 specifies. *A strict-compliance artifact loses its
value the moment it contains one of my own preferences.*

Verified after: no non-brand rgb triplet anywhere, no font but Montserrat, five weights, three tracking
values, no bold inside any heading. **v3 is now literally what the guide describes**, which is what
makes it usable as evidence in the review.

## 31. What v3 actually proved (Adi, 2026-09-06)

Adi, after seeing it: *"if we follow brand guide it will be repeating non converting site because it is
uglier compared to our v1."* He is right, and v3 earned its keep by demonstrating it rather than by
being shippable.

**The finding that reframes the whole audit: the brand guide is a deck spec, not a web design system.**
The evidence is in the guide itself. Body line height `1.2` is a slide value. The `.08` line heights for
H2 and H3 are impossible at any size. Tracking is written in design-software thousandths. There are six
colours and **no neutrals at all**. And there is nothing about buttons, forms, links, navigation, hover,
focus, or a responsive scale &mdash; because a PowerPoint template does not need them.

So the framing for the client is not *we broke your rules*. It is: **the guide defines the logo, the
palette and a heading hierarchy for presentations. A website needs a system the guide never wrote, and
v1 extends it in the guide's own direction.**

### Which rules actually hurt, and why

- **All-caps ExtraBold H2.** Fine on a slide: one line, seen once. On this page there are eleven h2s and
  several run to two lines. Caps cost roughly 10&ndash;15% more width, and they remove the word-shape
  cues readers use to scan, so a long all-caps heading is measurably slower to read than the same words
  in sentence case. It also pulls toward exactly what the client complained about: they called the
  current site *visually busy and somewhat dated* and asked for *elevated, simplified*.
- **Body at 1.2.** The clearest print artifact. 18px body wants roughly 1.5&ndash;1.65; 1.2 reads as a
  fault, not as a style.
- **Light all-caps H3.** Works for one-word headings like ASSESS. Fails on
  "CONTRACTS AND COMMERCIAL AGREEMENTS", where light weight plus caps plus length is the hardest
  combination to read on the page.

### Which parts of v3 are better than v1 and should be kept

**The colour discipline, without question.** v1 uses 37 hex values; v3 uses six brand colours plus white,
with every neutral expressed as NIGHT at alpha and every tint from a brand colour. That is not a
compromise for the guide's sake, it is simply a better-built page, and it is the one part of v3 that
costs nothing to adopt.

### The recommendation

**Do not choose between them. Port v3's colour system into v1 and keep v1's typography.** That gives a
page that is fully on-palette, defensible line by line on colour, and readable &mdash; with exactly two
declared deviations to put to the client: the heading voice, and body leading. Two named deviations with
reasons is a conversation. Thirty-seven colours and a reversed heading hierarchy is a list of mistakes.

**Keep v3 either way.** Its value is not as a candidate; it is proof that the deviations in v1 are
choices. A client who asks *why did you not follow the guide* gets shown the version that did.

**One caveat on my own claim.** The readability points above are well established. Whether any of this
changes conversion on this specific site is not something I can evidence, and it should not be asserted
to the client as if it were measured.

### 31a. DECISION: v1 is production, v3 is evidence (Adi, 2026-09-06)

Adi: *"I would keep this v3 home A, and take it as proof of its ugliness if we blindly follow the
outdated guide. We will use v1 in production."*

**`home-A-v1.html` is the production direction. `home-A-v3.html` is kept, permanently, as the
demonstration of literal compliance.** It is not a candidate and should never be presented as one.

**How to use v3 in the review, and how not to.** It answers exactly one question: *why did you not
follow the brand guide?* The answer is not an opinion, it is a link. Show it only if asked, and show it
as a study rather than as a rejected option &mdash; a client who thinks we designed something ugly on
purpose to win an argument will not thank us for it. The line is: *this is what the guide specifies,
applied literally; here is what each rule costs on a page rather than on a slide.*

**Do not let v3 rot.** It is only proof while it matches v1 structurally. If v1's layout moves and v3
does not, the comparison stops being like-for-like and becomes a straw man. Either update both or retire
v3 and keep the screenshots.

**Still open, and it is the only one worth pressing:** v3's colour system is better than v1's on its own
merits, six brand colours plus white against v1's thirty-seven hexes, with neutrals as NIGHT at alpha.
Porting it into v1 would leave **two** declared deviations for the client instead of a list. Awaiting
Adi's call.

## 32. `home-A-v4.html`: Direction A with the brand circles (Adi, 2026-09-06)

A copy of v1 carrying the ring decoration first tried in v2. **Four rings on the page, one per band at
most, alternating sides** &mdash; hero right, section 2 left, the plan right, who-it-is-for left. That
restraint is the Brand Kit's own rule for the mark: sparingly and large.

**The ring is cropped by the band edge on purpose, so what shows is an arc rather than a logo.** Two
things make that work and both are easy to get wrong:

- **It is anchored to the ink, not to the SVG box.** The drawing sits inside a 400-unit viewBox with
  margin on every side, so anchoring the box puts the ring off-screen at 1440. The offsets are measured
  off the circle geometry: 66px in on the right-hand edge, 84px on the left.
- **The hero ring is larger and lighter than the other three** (1180px at 42%, against 720px at 20%). A
  bigger circle crosses the same gutter as a flatter arc, which is how it reads at 1440 without moving
  closer to the text; and the gradient's outer edge is FREEDOM, on which a slate ring at 20% simply
  disappears. The hero ring is white and gold for the same reason; the three on light grounds use the
  mark's own slate, blue and two golds.

Below 1100px every ring is hidden. **A decoration that would crowd the text does not appear at all.**

Measured at 1440: hero shows ~208px of arc, the three light bands ~120&ndash;155px each.

## 33. Version naming for Easel (Adi, 2026-09-06)

Adi's scheme for the review, to be assembled at `https://easel.bowden.works/`:

| Role | File | What it is |
|---|---|---|
| **Base**, Version A | `home-A-v1.html` | the production direction |
| **Brand**, Version A | `home-A-v4.html` | the same page carrying the mark as decoration: four cropped rings, one per band, alternating sides |

**They differ by exactly one thing.** v4 is v1 plus the ring CSS and four SVGs. Same typography, same
palette, same layout, same imagery, same copy. That is deliberate: the pair asks the client a single
question &mdash; *how much of the mark do you want on the page* &mdash; and nothing else varies to muddy
the answer.

**`home-A-v3.html` is not in this pair and must not be added to it.** It is the literal brand-guide
application, kept as evidence that v1's deviations are choices ([note 31a]). It answers a different
question and only when asked.

**Consequence to keep in view: v4 must track v1.** They are only comparable while the one difference is
the rings. Any change to v1 that does not land in v4 turns the comparison into two unrelated pages, and
the same trap already applies to v3. **Three files now shadow one design.** Before the Easel build, the
cheapest guard is to regenerate v4 from v1 and re-apply the rings, rather than hand-editing both.

## 34. Direction B: placeholders filled from A (Adi, 2026-09-06)

B had four image placeholders left; all are now real photographs, drawn from A so the two directions
show the same pictures and the client is comparing layout rather than art direction.

| Where | Photograph | Why this one |
|---|---|---|
| The guide wall, *You Do Not Need to Navigate This Alone* | the firm's own meeting photograph | **Chosen over A's team photograph for a mechanical reason.** B's wall is a tall portrait crop, and a 3:2 group shot loses the people at both ends. The meeting photograph is square, so it survives the crop with both faces intact. |
| The closing card | the brick wall | matches A's closing image |
| Mega menu, services | the glass tower | portrait source, crops cleanly to 16:9 |
| Mega menu, second panel | the team photograph | the one place in B where the whole team fits, since the menu image is 16:9 |

**B now carries the same treatment as A:** greyscale on `.photo`, grain on the wrapper. Same reasoning
as [note 23b] &mdash; the pictures come from three different sources and will never share a colour
temperature, and both rules are page-wide so anything added later inherits them.

**The grain sits on a wrapper, never the image.** The closing photograph needed a `div` added around it
for exactly that reason; an `<img>` cannot carry a pseudo-element.

**Also worth knowing: A had two of these too.** The mega-menu placeholders are `.megaimg`, not `.slot`,
and they live inside a panel that is `display:none` until hover &mdash; so they never appeared in a
screenshot and the slot count read zero. **A's two are still unfilled.** *A placeholder inside a hidden
element is invisible to every check that looks at the rendered page.*

## 35. Direction B and the cost of fewer images (Adi, 2026-09-06)

Adi's observation: B uses fewer images, and by not showing faces it misses the chance to introduce the
team. **The observation is right, the count supports it, and then the source documents reframe the
whole question.**

### What B actually is, counted

Twelve sections. **Two carry a photograph** (the guide wall, the closing card); ten carry none. Both
directions have eleven h2s, so B is not a shorter page &mdash; it is the same argument with the pictures
taken out and icons put in. B carries **17 icons**; the mockup brief caps icons at 11.

**B has no hero photograph at all.** It opens on type. That is a real editorial choice and it means the
first screen contains nothing human and nothing physical.

**Faces appear once in B**, in the guide wall: two of the nine team members, at 622px. A shows the full
team of nine, plus the meeting photograph, plus a stock figure.

### What the reduction costs, precisely

- **A legal services purchase is a relationship.** Icons say *this is a system*; faces say *these are
  the people you will call*. B says the first and never says the second.
- **Neither direction actually introduces the team.** A gets away with it because a group photograph
  implies it; B has neither the photograph nor a module. There is no place on either page where a
  reader learns a name.
- **B's abstraction is uniform.** The stakes, the plan and the transformation are all diagrams. A gives
  the reader something to look at while reading; B gives them another card.

### The document that reframes it

**The client asked for this.** From `design-direction.md`, their own words:

> *"Regarding images, we'd like to remove the team photos from our homepage, if that works from a
> design standpoint. We're comfortable keeping one or two team [photos site-wide]."*

And the direction we wrote from it: **no team photography on the home page; at most two site-wide;**
and specifically &mdash; *"the brand story's Guide section is the one place a team photo would be
natural; it is still off the home page unless the client reverses this at mockup review."*

**So the gap Adi found is not an oversight in B. It is the client's instruction, and the Guide section
is exactly where the direction predicted it would hurt.** The move is not to add team content to B; it
is to put the case at mockup review, which the direction explicitly anticipates.

### Three findings that matter more than the B-versus-A question

**1. A breaks that instruction right now, and A is the production direction.** The nine-person team
photograph is in A's Guide section on the home page. B breaks it more mildly (two people in the guide
wall, the team photo in a hover menu). Both go to the client carrying something the client asked us to
remove. That is either a deliberate proposal we make out loud, or a mistake we are about to present.

**2. Both directions break the stock-people rule, and one is not a grey area.** The direction says
*"stock imagery is allowed, but never stock photos of people"*, and names placeholder imagery
specifically: *"a stock person in a placeholder slot breaks the rule on the first page the client
sees."* A carries three stock photographs containing people: the hand and dominoes, the hand and
bricks, and &mdash; unambiguously &mdash; **the man with the umbrella, a full figure with a visible
face**. The hands are arguable. The umbrella is not.

**3. B substituted rather than reduced.** Seventeen icons against a brief that allows eleven. B did not
simplify the page, it changed its visual language and increased the count.

### What I would propose

**Do not add photographs to B section by section.** Density and scanning are B's reason to exist;
adding pictures until it feels warm just turns it into A and destroys the comparison.

**Put one question to the client at review, with evidence rather than opinion.** We have two live
mockups that already show what a team photograph does in the Guide section. Show the Guide section with
and without it and ask whether they want to reverse their own instruction for that one slot. That is a
far stronger argument than any case we could write, and the direction document already flagged this as
the decision to reopen.

**Then fix the umbrella photograph regardless of the answer**, because that one is a straightforward
rule break rather than a judgement call.

## 36. The umbrella, and where the no-stock-people rule actually comes from (Adi, 2026-09-06)

Adi wants the umbrella to stay in *Three Simple Steps* because it shows protection on a rainy day,
which is exactly what the section argues, and asks whether a back view would resolve the objection.

**First, the provenance, because it changes the answer.** *"Never a stock human"* is **our derivation,
not the client's words**. What Alicia Wimmer actually said on 2026-08-27 was about **team** photos:

> *"Regarding images, we'd like to remove the team photos from our homepage... We're comfortable
> keeping one or two team photos over the site."*

And the reason recorded for the limit is that **"keeping them current is cumbersome"** &mdash; staff
change and the photograph dates. **That reason does not reach a stock photograph of an anonymous
person, which never goes stale.** Our `design-direction.md` extended a team-photo instruction into a
blanket ban on people, and in doing so retired a brand-guide brick: the 2022 guide makes people
photography one of its five bricks and specifies *"diverse people in their place of business"*.

So the rule as written is **broader than its own justification, and it overrides the client's own brand
guide on an inference.** That should be corrected in the document or confirmed with the client, not
quietly obeyed or quietly broken.

**Second, the real risk with the umbrella, which is not the rule.** On a law firm home page a
photographed person is read as *somebody* &mdash; a lawyer, a client, a staff member. The umbrella
photograph is a smiling man in a coat looking at his phone, and a reader will reasonably take him for
an Equinox person. **The problem is misattribution, not people.** That is also why the hands in the
domino and brick photographs are far less exposed: nobody assumes an anonymous hand is the managing
attorney.

**So Adi's instinct is right and for a better reason than the rule.** A back view, a cropped figure or
a shot from behind removes the identity question while keeping the human warmth and the whole rainy-day
metaphor. Ranked:

1. **Back view under an umbrella.** Keeps the metaphor and the human; removes the face and the
   misattribution.
2. **The umbrella alone**, or umbrellas from above. Fully compliant with the rule as written, and it
   loses the person the section is about.
3. **Rain on glass from a dry interior.** Protection implied rather than shown; the most elevated and
   the least literal.

**Not recommended: dropping the umbrella idea.** It is the best-matched metaphor on the page &mdash;
protection during weather you did not choose, which is precisely what the three steps deliver.

**Unrelated but adjacent:** `stocks/8094.jpg` is a Seattle skyline. The hero is currently the City of
London, which was flagged earlier as odd for a Washington firm. If the hero is ever revisited, that file
is already in the project.

### 36a. Is there a legal reason behind the no-people rule? (Adi, 2026-09-06)

Adi asked whether the rule might be there for a legal reason &mdash; whether the firm could be sued for
putting a stock face on the page. **The honest answer is that it is not one risk, it is three, and all
three are sharper for a law firm than for an ordinary business. None of them is "using a stock face is
illegal".**

**1. The licence, not the law.** A properly licensed stock photograph of a person comes with a model
release, which is what makes commercial use possible in the first place. That part is fine. What is not
automatic is **sensitive-use**: stock licences commonly restrict using a model in connection with
subjects the model might find unflattering, and the categories vary by library and by file. **This page
is close to that line by construction** &mdash; the surrounding copy says *a former employee files a
claim*, *a client refuses to pay*, *expensive, stressful and disruptive*, *the owner feels exposed and
unsupported*. Putting an identifiable face beside that implies the person is in legal trouble. **This
has to be checked against the actual licence for the actual file, not assumed either way.**

**2. False endorsement, which the release does not cover.** A release permits use of the likeness. It
does not permit a false factual claim about the person. If a viewer reasonably reads a photographed
person as *an Equinox client* or *an Equinox attorney*, that is an implied endorsement or an implied
credential, and it is a separate exposure from the licence. It is the same misattribution risk noted
above, with a legal name attached.

**3. Lawyer advertising rules, which is the one specific to this client.** A law firm's website is
attorney advertising. Washington RPC 7.1 prohibits false or misleading communications about a lawyer or
the lawyer's services, and some jurisdictions go further and require disclosure when actors portray
lawyers or clients. **A stock person on a law firm home page can therefore be a professional-conduct
question, not only a licensing one.**

**What follows for this build:**

- **Their own photographs carry none of the three.** The team and meeting images are the client's, of
  real staff, with no licence, no sensitive-use clause and no implied claim. That is a strong practical
  argument for using their own photography where a person is needed, and it lines up with the brand
  guide's people brick without the exposure.
- **Hands and backs are materially lower risk** than a face, on all three counts at once.
- **We do not know the provenance of `notes/source/stocks/`.** The folder is not documented in
  `notes/source/README.md`: no source, no licence, no release status recorded for any of the seven
  files. **Before anything from it ships, that has to exist.**

**And the obvious point: the client is a business law firm.** They are better placed than we are to
judge all three of these, and it is their risk to carry. **Put the question to them rather than deciding
it in a design document** &mdash; which is also the honest fix for [note 36], where we wrote a blanket
rule from a team-photo instruction without recording a reason. If the real reason is legal rather than
maintenance, the rule is right and our stated justification was simply wrong.

*Nothing here is legal advice; it is a list of the questions worth asking the people who can answer
them.*

---

## 36b. Regenerating a stock photo through an AI model does not clear the three risks, and adds two

**The idea (Adi, 2026-09-06):** take a stock photograph, "spin" it through Gemini so the output is a
new image, on the reasoning that the result then belongs to nobody and the licensing problem goes away.

**Held against the three mechanisms in [note 36a], it clears none of them cleanly.**

**1. Sensitive use / the stock licence: not solved, and possibly made worse.** Feeding a licensed asset
into a generative model is *using* the asset. Most major stock licences now carry an explicit clause
prohibiting use of the asset for machine learning or as input to generative AI. So the act of spinning
it can itself be a breach, where simply placing the photograph as licensed would not have been. The
derivative is also arguably a derivative work of the photographer's copyright, which does not evaporate
because pixels were regenerated.

**2. Likeness and false endorsement: not solved, and clearly made worse if the face survives.** Right of
publicity attaches to **recognisability**, not to file provenance. If the output still reads as the same
person, the likeness claim is untouched, and we have now thrown away the one thing that protected us:
**the model release that came with the stock licence.** That is a straight downgrade, from a licensed
likeness with a release to a recognisable likeness with none.

If the output genuinely is a different person, we instead have a synthetic face: no release, no
guarantee it does not resemble a real person by accident, and a disclosure question in some
jurisdictions.

**3. Lawyer advertising: untouched, arguably sharper.** RPC 7.1 is about whether the communication is
false or misleading. A synthetic person on a law firm home page is still a depicted person, and rules
that require disclosure when actors portray lawyers or clients read onto AI-generated people at least as
strongly. **The regeneration changes how the pixels were made; it does not change what the picture
claims.**

**Two problems the idea adds that the stock photo did not have:**

- **"Our own picture that belongs to nobody" is backwards.** In the US, a purely AI-generated image is
  **not copyrightable** (Copyright Office guidance, upheld in *Thaler v. Perlmutter*). We would not own
  it, could not stop anyone else using it, and would be handing the client an asset with no ownership.
  Provider terms and watermarking (SynthID on Gemini output) sit on top of that.
- **It reads as AI, on a page whose product is trust.** Same instinct as the em-dash rule in
  [note 21]: a professional services site loses more from looking generated than it gains from a
  slightly better composition.

**The useful version of the idea.** The risk lives in the **depicted person**, not in the generation
method. Generative tooling is entirely fine for a texture, a ground, an abstract, an object, a street in
the rain with nobody in it. It is the wrong tool for manufacturing a human being to stand in a law
firm's advertising.

**So the ranking stands unchanged from [note 36a]:** their own photography first, then no identifiable
person at all (hands, backs, objects, architecture, which is what most of Direction A already does),
then a properly licensed stock human with the sensitive-use clause actually read. Generated imagery is a
fourth option only where no person appears.

---

## 36c. Correction: the no-stock-people rule IS the client's words, and it is verbatim

**[Note 36] is wrong on its central point and this corrects it.** It says *"never a stock human"* is our
derivation from a team-photo instruction. It reached that conclusion from a **truncated quote**. The
full sentence, recorded verbatim in `.logs/planning/design-direction.md` line 102 from Alicia Wimmer,
2026-08-27, is:

> *"Regarding images, we'd like to remove the team photos from our homepage, if that works from a design
> standpoint. We're comfortable keeping one or two team photos overall across the entire website,
> however keeping them current is cumbersome, we'd like to remove them from other pages as well wherever
> it makes design sense.* **Stock images are fine, just please no stock photos of people***"*

So `design-direction.md` did not extend anything. **It transcribed the instruction.** The client drew
the line themselves, in one sentence, and drew it in exactly the place we thought we had invented:
stock objects yes, stock people no.

**What this changes:**

- The licence, endorsement and RPC analysis in [note 36a] is still true, but it is no longer the
  operative reason. **The operative reason is that the client said so.** We do not need to decide the
  legal question at all; we need to follow the instruction and can raise the legal dimension as support.
- **[Note 36b] gets shorter.** An AI-regenerated person is still a photograph of a person on the page.
  The instruction is about what the reader sees, not about how the file was made. The Gemini idea fails
  on the instruction before any of the copyright or likeness arguments are reached.
- The brand-guide people brick is **overridden by the client's own later instruction**, not by our
  inference. That is a clean, defensible override and needs no correction in the document.

**And a second constraint that "just use the client's photos" does not clear.** The same sentence says
**no team photos on the home page** and **one or two site-wide**. So on the home page the compliant
answer is **no photographed people at all**, client or stock. The client's shoot is the answer for
*inner* pages where a person is genuinely needed, not for the home page.

### Two facts about the current state, both checked

**1. `source/photos/439.jpg` is a stock file sitting in the client-photo folder.** It has **zero EXIF
tags** and a 2000px long edge, which matches every file in `source/stocks/` exactly. The real shoot
files are Canon EOS 850D, 6000x4000, 55 EXIF tags, dated 2026-06-07. **439.jpg is not from the client's
shoot**, and it is the umbrella photograph currently in A's *Three Simple Steps* section as
`s6-439.jpg`. It should be moved to `stocks/`. **A stock human filed among the client's own photographs
is precisely the mechanism by which one ships by accident**, and it already fooled one session.

**2. A still carries the nine-person team photograph on the home page** (`s4-team.jpg`), against the
first half of the same sentence. Unchanged from [note 35]: that is either a deliberate proposal we make
out loud at review, or a mistake we are about to present.

### The move

The home page needs **non-people imagery**, and the best source of it is probably **the client's own
shoot**, not stock. Ninety-eight frames from a real brand shoot will contain office detail, desks,
architecture, hands, and the building. Those are home-page-legal, they are theirs, they carry no licence
question, and they beat stock on the one thing stock can never do: **they are actually Equinox.**

---

## 37. The missing bolt: the Guide section image is now a base plate with one anchor absent

**Adi, 2026-09-07, on variant V5 of [image-generator-prompts.md]: "lifted corner is soul touching."**
Generated in Gemini, merged into `home-A-v1` and `home-A-v4` as `img/s4-baseplate.jpg`, replacing
`s4-team.jpg`, the nine-person team photograph.

**What the image is.** A steel column base plate on a wet concrete pad, four anchor bolts seated with
nuts and washers, and **a fifth position that is an empty hole**. Overcast Pacific Northwest light,
lattice truss and mist behind, everything else in the assembly clean and correct. It arrives already
monochrome, so the page's `grayscale(1)` is a no-op on it and only the grain and the NIGHT offset block
are doing work.

**Why it is the right image and not just a nice one.** The section says *"We work alongside you as part
of your team"* and *"address risks before they become costly problems."* A base plate missing one
anchor is that sentence as a photograph: **the structure is standing, everything looks finished, and one
part that nobody is looking at is not there.** It also resolves the whole imagery problem at once. It
obeys the client's instruction (no people, stock or otherwise), it is the extreme-close-detail rung the
scale ladder wanted, and it makes the building metaphor argue rather than decorate.

**Three build decisions worth keeping:**

- **Cropped from the top, never the bottom.** Source was 2528x1696, a hair taller than the 3:2 slot.
  The excess came off the misted background at the top; the concrete pad at the bottom is what grounds
  the plate and reads as foundation.
- **The filename changed rather than the file.** `s4-team.jpg` still exists on disk. Overwriting a name
  that says "team" with a picture of a bolt is how a later session gets confused about what is on the
  page.
- **The alt text carries the fact, not the metaphor:** *"A steel column base plate bolted to a concrete
  foundation, one anchor bolt position left empty."* A screen reader user gets the image; the argument
  is the surrounding copy's job.

**Two things now out of sync, deliberately, not by oversight:**

1. **`home-A-v3` still has the team photograph.** It is the brand-guide-compliance proof, not a
   candidate, but the comparison is only honest if it differs from v1 on typography and colour alone.
   Regenerate it from v1 before anyone views them side by side. Same standing trap as [note 31a].
2. **The Easel export `wp-content/mockups/easel-home-A/` still ships `s4-team.jpg`.** It is a packaged
   copy taken from v1 and it is now stale. Re-export before the Easel deck is shown.

**And the open item this closes half of.** A no longer carries a team photograph on the home page,
which was the standing breach in [note 35]. **It still carries two stock photographs of people**: the
umbrella man at *Three Simple Steps* and the two-person meeting at *Imagine Feeling Confident*. Those
are the next two slots, and the prompts doc already has the direction for both: scaffolding and netting
for protection, and the only finished building in the set for the transformation.

---

## 38. The umbrella stays, as a back view, and it is a declared deviation

**Adi's decision, 2026-09-07,** after seeing five industrial options for the slot and six variations on
the strongest of them: *"none of them looks logical"*, and the building metaphor is the wrong register
for this section. He generated a back-view umbrella figure in Gemini and chose it. Merged into
`home-A-v1` and `home-A-v4` as `img/s6-umbrella.jpg`, replacing `s6-439.jpg`.

**Recorded as a deviation, not as compliance.** The client's instruction is *"Stock images are fine,
just please no stock photos of people"*, and this is a photograph whose subject is a person filling the
frame. It is generated rather than licensed stock, which is a real distinction but a thin one: the
instruction is plainly about anonymous people standing in for the firm, and arguing the technicality at
review would look like a loophole rather than a decision.

**What the back view does fix, completely.** All three legal mechanisms in [note 36a] are gone. No real
person, so no likeness right and no missing model release. No face, so no reader mistakes him for a
named Equinox attorney or client, which kills the false-endorsement exposure. No stock licence, so no
sensitive-use clause to breach beside copy about claims and disputes. **The remaining objection is the
client's instruction alone, not risk.**

**The design argument for it, which is Adi's and is sound.** The section is the emotional low point of
the page and its job is relief. A face can carry relief and machined steel cannot; the substitute
offered in [note 37a] was *the correct signal*, a centred bubble or a true plumb line, and Adi's
judgement is that reads as a diagram rather than as feeling. He is the designer and this is a design
call, so it is his. **The building metaphor now has one deliberate exception rather than being
abandoned:** hero, Guide, Who It Is For and the closing band all still carry it.

**Two things this costs, stated so they are not discovered later:**

1. **It must be declared at mockup review, out loud, before the client finds it.** Frame it as the one
   slot where the page argues for a human presence, with the reason, and invite them to overrule us.
   A documented, argued deviation is defensible. A silent one damages trust precisely because they
   wrote the instruction themselves.
2. **The homepage still has one more stock person**, the two-person meeting at *Imagine Feeling
   Confident*. That slot is unresolved and is the next one to solve.

**Build notes.** The slot is `aspect-ratio: 5/7` portrait and the source was 3:2 landscape, so the crop
is width-limited: 1203 of 2528 pixels, centred at 53 percent of the width so the canopy stays balanced
above the figure rather than the head sitting dead centre. Output 1000x1400. The umbrella is cut at
both sides by design. Greyscale and grain are applied by the page, so the image was left in colour.

**A process note worth keeping.** Six variations on one subject were generated after the subject had
already failed to convince. **Iterating inside a rejected idea is not the same as testing the idea**,
and the earlier signal was there: Adi asked for variations on S3 rather than saying S3 was right.

---

## 39. Three Simple Steps without a photograph: five layouts

**Adi, 2026-09-07.** After the umbrella went in, the next question was whether the section needs a
photograph at all. Option sheet at `step-layout-home-a.html`, five full-width layouts, AISV copy
verbatim, no image in any of them.

**The two tests every board is judged on, and they pull against each other.**

1. **Does it read as a sequence rather than three parallel options?** Three equal columns are the
   fastest thing on earth to scan and the worst at saying *in this order*. Every layout that improves
   sequence costs scanning speed.
2. **Does step one look more important without the type getting louder?** Ground colour, rule weight
   and position can all carry emphasis. A bigger heading just makes the section shout, and the page
   already has a lot of voice.

**The CTA structure is fixed across all five and should stay fixed:** the assessment button sits
*inside step one*, because steps two and three are not possible until it happens, and *Book a
Consultation* closes the section as the direct path. Two asks at two different levels, which is the
structure `tracking-conversion.md` needs in order to measure them separately.

| | Layout | Sequence | Step-one emphasis | Rendered height |
|---|---|---|---|---|
| 1 | Three across, cream ground on step one | Weak | Ground + rule colour | 748px |
| 2 | The stepped stair, each row indented further | **Strongest** | Ground + position | 880px |
| 3 | Connected rail, dotted line between discs | Strong | Filled disc | **650px** |
| 4 | Step one as the anchor, asymmetric | Implied | **Strongest** | 668px |
| 5 | Editorial rows, 96px tinted numerals | Moderate | Ground + bleed | 998px |

**Board 2 is the one that recovers what the photograph was carrying.** The layout itself descends: each
row starts further right, so the left edges draw a staircase down the page and sequence is felt rather
than labelled. It is the only board where the metaphor is in the structure instead of in a picture.
**Its real cost is responsive:** the indent takes 300px of measure off step three, and on a narrow
screen the stair has to collapse to a flush stack, at which point the entire idea disappears.

**Board 4 is the one that matches the argument Adi has been making all along** ([note 39a] pending: step
two and three do not happen without step one). It is the only layout where step one is structurally
larger rather than merely tinted. Its cost is that it commits: if the client later wants the three
weighted evenly, the design fights them.

**Board 3 is the most efficient and the least distinctive.** It is also the one to check against the
rest of the page before choosing, because the discs would be the third circular device on the homepage
alongside the coverage ring and the numbered badges.

**Unresolved and worth deciding at the same time:** if a board is chosen, the umbrella photograph is
displaced. Those are two decisions, not one, and the second is the one to be explicit about, given
[note 38] recorded the umbrella as a declared deviation from the client's own instruction. **A layout
that needs no photograph makes that deviation unnecessary**, which is a point in favour of every board
on this sheet.

---

## 40. The plan section is now a connected rail, and the umbrella is out

**Adi chose board 3 of the proof set, 2026-09-07:** *Assessment promoted, consultation quietened*.
Merged into `home-A-v1` and `home-A-v4`. The section is full width with no photograph.

**What changed structurally.** `.s6split` is gone: no image column, no `.s6img`, no `.s6shadow`, no
`.steplist` stack. Three equal columns, a 46px numbered disc at the head of each, and a dotted
connector between them, which is the same rule language the services lists and the accordion already
use, so the sequence reads as part of the page rather than as a widget dropped into it.

**The CTA structure, which is the actual decision.** Each step carries its own action where it is
described:

- **Step 1 holds the assessment as the GOLD button.** Inverting the page's usual weighting is
  deliberate. Gold is the primary action colour, so whichever step holds it wins the eye; when Book a
  Consultation had it, the eye landed on step two, which is the opposite of what the section argues.
- **Step 2 holds Book a Consultation as an outline**, because step two *is* meeting Equinox. It stays
  available without competing.
- **Step 3 carries nothing.** It is what Equinox does, not what the reader does next.

**`.ministepcta { margin-top:auto }` inside a flex column is load-bearing, not cosmetic.** Without it
the two buttons stagger at some widths and not others (measured 29px apart at 1360, level at 1300, 1440
and 1500), and intermittent misalignment is worse than constant because it only appears on somebody
else's screen. Verified after merge: button bottoms level at 1300, 1360, 1440 and 1600, and the dotted
connector's right edge lands exactly on the next disc's left edge at all four.

**This retires [note 38] entirely.** The umbrella photograph is displaced by the layout, so the homepage
no longer carries a declared deviation from the client's *"no stock photos of people"* instruction in
this section. **That is the better outcome and it was not the reason for the change** — Adi picked the
layout on its merits and the compliance came free. `s6-umbrella.jpg` stays on disk in case the decision
reverses.

**One stock person remains on the homepage:** the two-person meeting at *Imagine Feeling Confident*.

### The bug worth remembering: a substring match ate half the section

The first merge attempt found the end of the old block by looking for a `</div>` two lines after a line
containing `stepcta`. **`ministepcta` contains `stepcta`**, so it matched inside step one and replaced
only the first third of the section, leaving steps two and three orphaned below the new rail and the
page silently malformed. It looked plausible in a diff and was obvious the moment the file was read
back. **Match on a full token or an anchored pattern, never a bare substring, when the shorter string
is a suffix of a longer class name in the same block.**

---

## 41. The confidence section without a photograph, and a caution about the building metaphor

**Adi, 2026-09-07:** the building idea, pushed across every slot, *"is like impressing me about Equinox
like a building company, like builder or architecture."* **That is the correct read and it is worth
recording as a limit, not just a preference.** A metaphor that appears in one or two images is a
figure of speech; the same metaphor in six images is a claim about what the firm does. The building
idea survives where it argues something specific (the base plate with one anchor missing) and becomes
literal set-dressing when it is merely the house style. **Stop extending it.**

**Options sheet:** `confident-feeling-section-home.html`, five layouts, no image, AISV copy verbatim.

**The design problem is that there are eight statements.** In one column they run to eight rows and the
section becomes a scroll: the reader stops around the fifth, and the last line, which is the best one,
is the one they never reach.

**The insight the boards are testing:** seven of the eight lines are operational and describe documents;
the eighth begins **"Most importantly"** and is about how it feels. AISV put a hierarchy in the text.
**A layout that sets all eight identically discards an instruction the copywriter left behind.**

| | Layout | Height | Notes |
|---|---|---|---|
| 1 | Two columns of four | 672px | The plain fix. Treats all eight as equal |
| 2 | **Seven, then the payoff at 29px** | 791px | Reads the copy rather than formatting it |
| 3 | Completed checklist on a cream panel | 771px | Boxes the payoff of the page, which is a risk |
| 4 | Three columns, closing line in the ninth cell | **559px** | Most compact; items drop to 17px and the longest wraps to three lines (118px against 79px elsewhere), so the grid is visibly ragged |
| 5 | Two columns reversed out on NIGHT | 672px | Would be the page's third dark band |

**Board 2 is the recommendation.** It is the only one that gives the section an emotional landing
point, which is precisely what the photograph was contributing and what a tidy grid of ticks does not.

**Build note.** All three two-column boards first shipped filling left-to-right rather than down each
column, which reads wrongly for a list and also put the `:nth-child(4)` border removal in the wrong
cell. Fixed with `grid-auto-flow:column` plus explicit rows, and verified by measuring that items one
and two share a left offset and that each column ends on an open row.

### 41a. The checklist panel, badged

**Adi, 2026-09-07:** test board 3 with the corner icon the homepage already uses. Four boards appended
to the same sheet.

**It is not a new device, which is the point.** `.qbadge` is a 52px NIGHT disc hung at `-18px/-18px` on
a cream `.qpanel`, and the page already carries it twice: a lightbulb at *"You may be wondering"* and a
trophy at *Built for Entrepreneurs*. **The page states the rule in its own source comment: a warm panel
with a corner badge means the reader is being addressed.** This section is the clearest instance of that
anywhere on the page, so badging it is the page being consistent rather than decorated. Icon is a
shield with a check, distinct from the other two; eyebrow reads *"With Equinox in place:"* so the panel
opens by speaking, as the other two do.

| | | Height | Note |
|---|---|---|---|
| bg1 | Badged, gold rule kept | 801px | Badge and rule do the same job |
| bg2 | Badged, gold rule removed | 798px | **Matches `.qpanel` exactly: one component, not two** |
| bg3 | Badged, ticks back to teal | 798px | Tests whether gold ticks were hierarchy or decoration |
| bg4 | **Badged panel, payoff outside it** | 922px | Boards 2 and 3 combined |

**bg4 is the recommendation.** It resolves the objection to board 3 in [note 41]: the panel holds the
inventory, which is what a panel is good for, and the emotional line is lifted out below it rather than
boxed in with the documents.

**A measured argument for dropping the gold rule.** `border-top:3px` shifts the panel's padding box, so
an absolutely positioned badge at `top:-18px` ends up **15px above the panel's outer edge instead of
18px**. Measured. On the live page that badge would sit 3px lower than the two existing ones, which is
exactly the sort of small inconsistency that makes a page feel not quite made. bg2 and bg4 have no such
rule and measure 18px, identical to `.qpanel`.

### 41b. Merged: the badged panel, teal ticks

**Adi chose bg3, 2026-09-07.** In `home-A-v1` and `home-A-v4`. The two-person meeting photograph is
gone, which was the last stock photograph of a person on the home page.

**It adds no new component.** The section now uses `.qpanel` and `.qbadge` exactly as section 2 and
section 9 do, with a `.cfpanel` modifier for the wider padding and the two-column grid. Verified after
merge: **three badged panels on the page, all three measuring an 18px offset**, so the new one sits on
the same line as the two that were already there.

**One specificity trap worth keeping.** `.qpanel` is declared *later* in the stylesheet than the section
7 rules, so a plain `.cfpanel { margin-top; padding }` loses to it. The override is written
`.qpanel.cfpanel` for that reason, not for tidiness.

Ticks stayed BUSINESS teal, matching every other tick on the page, and the badge supplies the accent
instead. The gold rule from board 3 is dropped: it duplicated the badge's job and it shifted the badge
3px, as measured in [note 41a].

**The homepage now carries no stock photograph of a person anywhere.** That was the last one, and it
happened through layout decisions rather than through a compliance pass.

---

## 42. The firm's age: no count anywhere, "Since 2004" instead

**The page contradicted itself.** The proof band said *20 years*, and two places further down said
*21 years*. A compliance pass on 2026-09-07 caught it; **Adi supplied the actual fact and the better
fix.**

**Verified at source.** The client's own About page says: *"We began in 2004 as Small Business Legal
Services as a firm focused on eliminating the barriers that businesses feel when they need a lawyer."*
**The page states no years count at all.** So neither of our numbers was right: 2004 to 2026 is
twenty-two.

**Adi's point is the important half, and it generalises:** *"the old site is outdated when mentioning
dynamic year."* A hardcoded age is wrong the January after it ships. That is exactly how this page came
to hold two different numbers, each correct on the day somebody typed it.

**The fix, in all three places:**

| Where | Was | Now |
|---|---|---|
| Proof band credential | `20` / years advising business owners | `Since 2004` / advising business owners |
| Value proposition eyebrow | 21 years of business law | Business law since 2004 |
| NIGHT credential bar | `21` / years of business law | `Since 2004` / in business law |

**The rule to keep: never type a derived number.** Anything computed from today's date (an age, a
count of years, "over N years") must either be rendered from the source fact at request time or be
replaced by the source fact itself. `Since 2004` is the source fact and cannot rot. If the client ever
insists on a running count, it is computed in the template, never typed into content.

Verified after merge: zero `NN years` claims remain in visible text, three `Since 2004`, and the longer
strings fit their cells at 1300 and 1440 with no overflow (the proof-band figure grows from about 38px
to 173px and the logo marquee still has 519px at the narrower width).

**Still open from the same compliance pass:** the two empty mega-menu image placeholders, the two footer
social links having no accessible name, the two remaining photographs containing hands, and the
assessment's full name appearing eight times where the naming rule expects it once.

### 42a. Correction: it is 21, and the reason is how the client counts

**[Note 42] resolved the contradiction in the wrong direction.** Adi supplied two pieces of evidence
that settle it, 2026-09-07:

1. **The PLLC's Certificate of Formation was filed 2005-05-16** (Washington filing 448724).
2. **The client published a 20th-anniversary mark in April 2025** — the asset path on their own site is
   dated `2025/04`. Twenty years before April 2025 is 2005.

**So the client counts from 2005, and 2026 is their twenty-first year.** The About page's *"We began in
2004"* refers to the **predecessor firm, Small Business Legal Services**, not to the PLLC. Both dates
are true and they count different things. **The number that matters on the client's own website is the
one the client uses**, which is 2005.

**Reverted to 21 in all three places** in `home-A-v1` and `home-A-v4`; verified that 21 is now the only
year claim on the page and that no `Since 2004` remains. **To confirm with the client** — the evidence
is strong but it is inference from an image filename and a state filing, not something they told us.

**What survives from [note 42] unchanged, and matters more than the number:** this figure is derived
from a date and **will go stale on 2027-05-16.** Carrying 20 and 21 simultaneously is precisely what a
typed derived number does over time. In the WordPress build it is computed from 2005-05-16 at render
time and never typed into content. The source comment on the page now carries the two dates, the
reasoning, the confirm-with-client flag and the staleness date, so the next session cannot repeat
either mistake.

**A note on my own error.** I verified the founding year against the client's About page, treated one
source as settling a question two sources disagreed on, and wrote a rule off the back of it. The About
page was accurate and I read more into it than it said. **Checking a source is not the same as checking
whether that source answers the question being asked.**

---

## 43. The founding year: the question to put to the client

**Adi asked for this to be written down as a question, 2026-09-07.** It is one question with three
parts, and it should go to **Michelle Bomberger** (via Alicia Wimmer), because only she can say which
entity the site is describing.

### The evidence, all of it

| Source | Says | Implies |
|---|---|---|
| `/about-us/` | *"We began in **2004** as Small Business Legal Services"* | 2004, under a predecessor name |
| Michelle Bomberger's bio | *"In **2005**, after years in business, Michelle decided it was time to launch her firm"* | 2005 |
| `/blog/20-years-strong-…/` | *"When the Great Recession hit in **2009** … I rebranded to Equinox"* | The **Equinox brand** dates from 2009 |
| WA Certificate of Formation, filing 448724 | Filed **2005-05-16** for Equinox Business Law Group PLLC | The PLLC is a 2005 entity |
| 20th-anniversary mark, asset path `/2025/04/` | Twenty years as of April 2025 | The client counts from **2005** |
| *"20 Years, 20 Lessons"* 2025-04-14 and *"Closing Out Twenty Years with Purpose"* 2026-04-13 | Year twenty ran April 2025 to April 2026 | Year **21** runs April 2026 to April 2027 |

**So 21 is arithmetically right today and matches how the client counts.** That is why it is on the
page. It expires in **April 2027**, not May — the anniversary campaign is April-dated, which is a more
reliable signal of how they count than the May filing date.

### The three parts of the question

1. **Which date should the site count from?** Your About page, Michelle's bio and the 20-years blog
   give three different answers, for the predecessor practice, the launch of her firm, and the Equinox
   rebrand. We do not want to pick one on your behalf.
2. **Do you want a number of years on the site at all, or "since &lt;year&gt;"?** You retired the
   20th-anniversary logo *because the number expired*. A "21 years" line has exactly the same problem
   every April.
3. **If you do want a count, we will compute it** from the confirmed date at render time, so it is
   never wrong and nobody has to remember to edit it.

### ⚠ This contradicts a standing project rule, and Adi should know before review

`.memory/naming-conflicts.md` §5 records a working default that predates this session:

> **"State no founding year anywhere until Michelle Bomberger confirms one … Never hard-code a year
> count ('21 years of experience', 'two decades'). The client has just lived the failure: they retired
> the 20th-anniversary logo because the number expired, in the same email that gave us the design
> brief, and they are deliberately moving away from anniversary framing."**

The homepage currently carries **21 in three places**, which is that rule inverted. **This is not a
reason to change it back** — Adi's call of 2026-09-07 was explicit and reasoned, and a mockup showing a
real number is easier for a client to react to than a blank. But it must be **said out loud at review**
rather than found: *we have used 21 because it is how you count; you told us you had moved away from
anniversary framing, so tell us if you would rather this read "since 2005" or come out entirely.*

**Either answer is cheap to implement.** All three instances are one figure and one caption each.

**Correction to [note 42a]:** it gives the staleness date as 2027-05-16, from the formation filing.
April 2027 is the better date, on the campaign evidence above.

---

## 44. Direction B brought in line with A's imagery

**Adi, 2026-09-07:** take A's images into B. B was carrying the set A has since replaced, so it held
**both** photographs of people that A no longer has.

| Slot | Was | Now | Why |
|---|---|---|---|
| Guide wall | `s8-meeting` (two people) | **`s4-baseplate`** | The same argument A's Guide section makes, and the same photograph |
| About Us mega panel | `s4-team` (nine-person team) | `mega-towers` | Team photographs are out on the home page, and a mega panel is part of it |
| Our Approach mega panel | `s9-417` | unchanged | Non-people already |
| Closing band | `cta-47103` | unchanged | Non-people already |

**So B now has no photograph of a person either.** The two directions are consistent again, which
matters more than usual here: they go to the client side by side, and an imagery difference between
them would read as a design choice rather than as staleness.

`mega-towers.jpg` is a fresh 16:9 crop from the original 1600x2000 stock rather than a re-crop of A's
900x900 hero, taken from the upper fifth where the towers converge; a 16:9 slice of the middle is flat
facade.

**The base plate is landscape and B's guide wall is a 0.81 portrait column**, so it cover-crops to about
54 percent of its width. Held with `object-position:52% 62%` to keep the plate and the empty hole
rather than drifting into the misted background. Checked against a render, not assumed: it reads
**better** in B than in A, because the tighter crop fills the frame with the plate.

### The bug this uncovered: a grid blowout that was already there

`.guidesplit` was `grid-template-columns:.85fr 1.15fr`. **A grid item's automatic minimum size is its
min-content width, and for an `<img>` that is the file's intrinsic width**, so the photo forced its own
column wider than its share. Measured: **columns 934/256 instead of 503/681, and the row 1851px tall
inside a 624px box that was clipping it.** The text column was a 256px sliver.

This is the third time this project has hit the same rule (the logo marquee and the credentials row
were the first two). **Bare `fr` is unsafe wherever a grid item is a replaced element or can hold
long unbreakable content.** Fixed with `minmax(0,.85fr) minmax(0,1.15fr)` plus `min-width:0` on the
children; now 502/680 at 1440 and 491/664 at 1300, nothing clipped.

**It was pre-existing, not caused by the swap** — the previous 1000x1000 source blew the column out the
same way. It was only visible once a landscape file made the proportions obviously wrong, which is
worth remembering: **a layout bug can sit in plain sight while the content happens to hide it.**

---

## 45. Direction B: brand-circles version and the Easel bundle

**Adi, 2026-09-08.** `home-B-v3.html` is `home-B-v1` plus the brand circles from `home-A-v4`, and
`_easel_ready/home_B/` is the two of them merged into one uploadable bundle.

**The anchors carried over untouched.** A and B both cap `.wrap` at 1440 with 64px padding, so the
content measure is 1312 in both and the `calc(50% + 656px - 66px)` offsets place the rings the same
distance outside the ink in either direction. Four rings, same rhythm as A: hero right, the problem
left, the plan right, who-it-is-for left. One addition B needed: the plan section is NIGHT in B and
white in A, so `.band-night .brandring` drops opacity from .20 to .14.

**The merge follows the documented rule and nothing else.** All of v3's markup is in the bundle; only
its CSS is scoped to `html.v-brand-circles`, with `.ab-Main .brandring { display:none }` as the guard.
**The base is the absence of the class**, so with no class on `<html>` the file is home-B-v1.

### Verified by pixel comparison, not by reading the CSS

Full-page screenshots at 1440 wide, with the animated logo marquee masked out because it is
non-deterministic between renders:

| Comparison | Result |
| --- | --- |
| v1 rendered twice (noise floor) | **0 differing pixels** once the marquee band is masked |
| **Bundle with no class vs `home-B-v1`** | **0 differing pixels. Identical** |
| **Bundle with the class vs `home-B-v3`** | **0 differing pixels. Identical** |
| Bundle base vs bundle variant | 51,726 pixels across y239 to y7545, which is the rings |

**Worth keeping: the unmasked comparison was misleading.** Base against v1 measured 11,397 differing
pixels, which looks like a failed merge, until the same file rendered twice measured **11,795** in the
identical bounding box. The whole difference was the marquee's phase. **Establish the noise floor
before believing a pixel diff**, or an animation will convince you a correct merge is broken.

**Bundle:** 14 files, 1.3 MB, entry `index.html`, every one of its 14 local references resolving
inside the folder, no absolute paths, only the font stylesheet loaded externally.

**Two build slips worth recording.** The first insert matched `<div class="x"` without the closing
bracket, leaving a stray `>` rendering as visible text at four points in the page. Caught by
screenshot, not by reading. And a check for `v-base` reported it present because the phrase appears in
my own explanatory comment; **a grep for a class name matches prose too.**