# equinoxbusinesslaw — handoff > Append-only, **newest first**. What the last session did, what the next should > pick up, what is blocked. Read this second (after `brief.md`) when orienting. > Clear-after-read: once an entry is acted on it can be trimmed. --- ## 2026-09-18 — DIRECTION CHOSEN: Home A v1. Step 1 is closed. **The client chose Direction A** (`home-A-v1.html`). Reported in session by Adi on 2026-09-18; no client document has been filed for it yet, so if an email or call note exists it should be digested into `notes/client-correspondence.md` and this line corrected to cite it. **What this unblocks.** `agents.md` gated inner pages, the pattern library and the Kadence build on a direction being chosen AND recorded here. That condition is now met by this entry. Step 2 and the build may proceed against Direction A. **What it retires.** Direction B is no longer a candidate. `home-B-v1.html` and `home-B-v2.html` stay on disk as the record of what was shown, and every B option sheet (`section2-` through `section12-B-options.html`, the hero, eyebrow and badge sheets) is now history rather than an open question. Nothing should be merged into B again. **Carried over, still open against A:** - `home-A-v4.html` must be regenerated from `home-A-v1.html` whenever v1 moves (the Easel pair). - `home-A-v1-1.html` appeared 2026-09-18 and is newer than `home-A-v1.html`. Which of the two is production has never been recorded. Settle this before any inner page copies from either. - The final CTA photograph `cta-47103.jpg` is a stock image containing a person, which the client's 2026-08-27 instruction rules out. Still unresolved, still on the page. - Footer option not chosen (`footer-options.html`); `—` entities there still to be replaced. **Service page started.** `notes/mockups/services-A-v1/services-A-v1.html`, Contract Negotiation and Maintenance, built from real copy only (the live site's own paragraph for that service, AISV's home-page inclusions and questions) plus one drafted section. Header, closing band, newsletter and footer are A's, taken from `home-A-v1-1.html`; the middle sections were first built in B's language and rebuilt in A's once the direction was settled. Named `inner-service.html` at first, then renamed to `services-A-v1.html` (Adi, 2026-09-18) to sit in the same A/B convention as the rest of the prototype. There is no `services-B-v1.html` and there is not meant to be: B is retired. The old name is dead on disk and on the server, so any link to `/wp-content/mockups/inner-service.html` now 404s. **The testimonial module was removed (2026-09-18) and the three questions under it are still open.** The asset was fine - Sam Koeppen, Alliance Partition Systems, verbatim from the live Testimonials page as crawled 2026-09-03. It came out because nothing under it was settled: brief §8 bars a testimonial band on the HOME page and nobody has decided whether that reaches a service page; Washington's RPC 7.1 constrains how a firm presents client statements; and the one live testimonial that actually discusses contracts (Darwin's) is barred by the project's pricing rule because it talks about fees. **Rian still owes an answer on the first two** - they will come back the moment any page wants a client quote, which most of them eventually do. A note where it stood in `services-A-v1.html` carries the same detail. **ACTION BEFORE THIS FILE GOES TO ANYONE: two blocks on the page are our copy and the page no longer says so.** They are **What Working With Us Looks Like** (four paragraphs) and **all five FAQ items** (question, concession and answer in each). Everything else on the page is the firm's own published wording or AISV's. The marking was reduced three times on 2026-09-18 at Adi's direction: an amber block with a pill label and a footnote, then square brackets alone, then no visible marking at all. Each step was a reasonable call about the look. The cumulative effect is that agents.md's rule - *"label every draft DRAFT, and never present it as final"* - is no longer satisfied by anything a client can see. The rule is now carried only by this entry and by the HTML comments above each block. So whoever sends or presents `services-A-v1.html` says in the covering note which two sections are ours and unapproved. The page will not say it for them. When AISV approves or replaces the wording, update the two comments and delete this paragraph. **A trap worth keeping.** Importing CSS by copying from the newline before a selector clips rules that are preceded by multi-line comments: the comment tail glues onto the selector and the browser silently drops the whole rule. Seven rules died that way in this page and the symptom looked like missing CSS rather than unparseable CSS. Strip comments BEFORE extracting rules. ## 2026-09-08 07:41 — session ended without a handoff entry Left in flight (1 files changed). The next session should confirm whether this work is finished before building on it: - `notes/easel-walkthrough-home-B.md` ## 2026-09-06 (brand-guide audit) — Adi + Claude — v1 is production, v3 is the proof **Decision.** `home-A-v1.html` is the production direction. `home-A-v3.html` is a literal application of the 2023 brand guide, kept as evidence that the deviations in v1 are deliberate. It is not a candidate. **The audit finding worth carrying forward: the brand guide is a deck spec, not a web design system.** 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; and there is nothing at all about buttons, forms, links, navigation, hover, focus or a responsive scale. The client conversation is therefore not "we broke your rules" but "the guide covers logo, palette and a presentation hierarchy; a website needs a system the guide never wrote". **Deviations in v1 to declare, with reasons** (full list in `notes/design-notes.md` §29): 1. Heading voice. The guide gives H2 to ExtraBold ALL CAPS and H3 to Light ALL CAPS; v1 uses sentence case throughout and inverts their weights. Eleven h2s, several two lines: caps cost width and reading speed, and pull toward the "visually busy" the client asked us away from. 2. Body leading 1.62 against the guide's 1.2. 3. Palette extension: the guide names no neutrals, and v1 uses roughly a dozen greys plus hand-mixed tints. **Easel pairing (Adi, 2026-09-06):** **Base = `home-A-v1.html`**, **Brand = `home-A-v4.html`** (v1 plus four cropped brand rings, one per band, alternating sides). They differ by exactly one thing so the pair asks the client one question. `home-A-v3.html` stays out of that pair: it is evidence, not a candidate. **v4 must be regenerated from v1 whenever v1 moves**, or the comparison stops being like-for-like. **Open for Adi:** port v3's colour discipline into v1 (six brand colours plus white, neutrals as NIGHT at alpha). It is better on its own merits and would cut the declared deviations from three to two. **Also settled this session** (details in `design-notes.md` §27–§30): the social-proof band under the hero with the stepped logo carousel using the client's real logos; both footer credentials confirmed real after an incorrect first reading; the offset-shadow scale made square and proportional; sticky header and its shrink actually working after two silent CSS-scoper faults; grain and greyscale across all imagery; three flat marks taken out of layout flow. --- ## 2026-09-05 (A: the navy panel button) — Adi + Claude — option 5 merged into `home-A-v1.html` **Adi:** *"the button here is off, i think we should have outline button or use yellow button in here."* Section 3b, the navy panel that closes the problem argument. **It was not off, it was invisible.** `.nightbox` is NIGHT `#003B53` and `.btn.secondary` fills with NIGHT `#003B53`. Only the white label survived, so it read as one more bold sentence rather than a control. **The cause was a missing class.** The button system switches to its dark-ground colours through one hook, `.on-dark`. Every other dark surface carries it — the three mega-menu CTA panels, the closing section. `.nightbox` never got it, so `.on-dark .btn.secondary { background:#fff; color:#003B53 }` never fired and the light-ground rule won by default. **The rule that leaves behind: any element given a dark background is given `.on-dark` in the same edit.** A dark ground is a mode, not a colour — buttons, focus rings and outline borders all key off it. This fault renders as "looks a bit flat", not as an error, which is how it survived a full page review. **Options sheet:** `notes/mockups/nightbox-cta-A-v1/` → `.../mockups/nightbox-cta-A-v1.html`. Six treatments (the fault, white outline, CONFIDENCE gold, solid white, gold outline, white outline + icon), each shown in the real section. Contrast did not decide it — gold on NIGHT 8.46:1, white 12:1, ink on gold 9.85:1, all comfortably past AA. Hierarchy did: filled gold is *Book a Consultation*'s colour page-wide, and spending it here would rank the assessment equally. **Adi picked 5 — white outline with the clipboard icon.** Merged. **One deviation from the board, flagged:** the merged button is `.btn.outline.sm`, not the default size the board showed. The page's own rule is *icons on the small size only* (Adi, 2026-09-05), and the two other icon-bearing assessment CTAs — the mega menu and step one of *How It Works* — are both `secondary sm` with the same clipboard. Default size with an icon would have been the only one of its kind. Say so if the smaller button is not wanted. Recorded as `notes/design-notes.md` §14. Verified: div balance 0, one `

`, no `#004963` drift, no currency symbol, no social names, deployed copy byte-identical to source. --- ## 2026-09-05 (Direction B drafted) — Adi + Claude — `home-B-v1.html`, a first pass to iterate on `notes/mockups/home-B-v1/` (source `src/Main.dc.html`, built with `buildB.py` exactly as A is), deployed to `https://equinoxbusinesslaw.demoing.info/wp-content/mockups/home-B-v1.html` (45,824 bytes). **A draft to iterate on, not a finished direction.** **B's idea in one sentence** (the brief requires each direction to state one): *a page you can scan — every section is a bounded card on its own band, so a reader who never reads a paragraph still leaves knowing what Equinox does, who it is for and what to do next.* ### What B is, per `.logs/planning/homepage-mockup-brief.md` §7 The brief already defines B as **modular and structured**: bands and cards, library iconography, more signposting for a scanner, the four new patterns as bounded modules, "a modern product company that happens to practise law". It also sets a **minimum structural difference** — the two directions must differ on at least three of five axes. **B differs on all five:** | Axis | A | B | |---|---|---| | Hero | Text left, 1:1 image right, offset shadow | H1 in a bounded card on the brand gradient; no image | | Sectioning | Rhythm and scale, mostly white | Full-bleed bands (white / warm / tint / NIGHT), no two neighbours alike | | The four patterns | Typographic: accordion list, large numerals, paired rows, rule-separated list | Bounded modules: 2x2 group cards, three step cards, two comparison panels, icon accordion | | Imagery | Six slots, objects with a cream offset shadow | Two slots, each a wall of a module or the ground of a band | | Header | One CTA, working mega menus, sticky + shrink | Both CTAs, nav drawn closed, not sticky | **Cards in B have a hard 1px border and no shadow.** The offset shadow is A's device and B must not borrow it. **The icon budget is exactly the brief's eleven** — one per value group (4), one per step (3), one per objection (4) — and nowhere else. Verified in the build: 11. They are labelled as stand-ins for the Kadence Blocks set. **B is measurably shorter: ~10,120px against A's ~12,020px**, about two laptop screens less, with identical copy. That is the brief's own answer to the length problem — "density and hierarchy, not cutting". ### What B does NOT do, and this matters **B does not fix the copy-structure problems parked for it.** Reading the brief before building changed the plan here. §6 is explicit: *"Body copy is used verbatim, as DRAFT, and is not rewritten, trimmed or reordered by the designer"*, and §7 requires both directions to carry **identical copy**. So B may not merge sections 7 and 8, may not drop their five duplicated statements, and may not add the missing answer to *"What happens if a client does not pay?"* Those stay proposals to AISV (design note 6), not design moves. **What B does instead is separate them by pattern**: §7 is a checklist module, §8 is two bounded panels. Two sections making the same argument at least stop looking like the same section doing it. ### The deviation list — A has drifted from the brief, and B is drawn to it Building B against §6 surfaced this. Each item below is a decision already made in A that the brief rules out; **none is wrong on its own, and all were deliberate**, but they are Rian's to accept, not ours to leave unrecorded: | Built in A | What the brief says | |---|---| | §10 headed "Frequently Asked Questions" | *"carries the labelled placeholder heading in both directions; no working heading is written"* (§6 row 10) | | Footer newsletter form (Name / Email / Subscribe) | *"a newsletter sign-up text link ... never a third button"*, and *"no sign-up form anywhere on the home page"* | | Working mega menus | *"The nav is drawn closed, once; no dropdown, mega-menu or hover state"* | | Sticky + shrink header | Scroll behaviour is on the scope fence's not-drawn list; *"do not draw that state"* | | Three credential rows in the footer | Not in the footer specification | | Footer placeholder badges removed | *"Every draft or placeholder is visibly labelled in the mockup"* | **B follows the brief on the first five.** That is deliberate: it gives Rian the specified page and the departed page side by side, which is a more useful question than either alone. **On the sixth, B departs too, by Adi's decision the same day.** Placeholder badges are off B's boards as well - *"these notes can go into designer note"*. Two placeholders remain on the page because they stand in for missing copy rather than annotate the mockup (the revenue figure, and the objection section's heading), both now set as quiet neutral text. The full register of what is unresolved and who resolves it is design note 12. **A still carries its badges**, so the two directions now differ on this; that difference has not been chosen and should be. ### Next Iterate on B. The obvious first passes: the §5 cards are uneven in height because group four has three items and the others seven; §3's six tiles could carry more weight; and the two image slots may be too few for a direction whose brief says imagery does the sectioning. --- ## 2026-09-05 (brand.html) — Adi + Claude — ten circle derivations, plus a control `notes/mockups/brand/brand.html`, deployed to `https://equinoxbusinesslaw.demoing.info/wp-content/mockups/brand.html` (27,841 bytes). Adi's brief: ten variations the client cannot answer with *"that is not my shape"*, ranging down to a single circle, all inside the brand. **The finding the sheet is built on, and it is one sentence: their circles are DIFFERENT SIZES and they are OFFSET.** They share a lower-left origin and grow up and to the right; they are not concentric. That single relationship is what a viewer recognises long before they could say how many rings there are - which is why variation 4, just two offset circles, already reads as theirs. **An eleventh figure is drawn to be rejected.** The same four radii sharing one centre: a target, a dartboard, anything but Equinox. It is the mistake anyone redrawing the mark from memory makes, and putting it beside variation 4 turns the offset from a detail into the argument. | # | Variation | What it takes from the mark | |---|---|---| | 1 | One ring | The least it can be. Safe, and the most deniable | | 2 | One ring, gold, fading | The mark's own fade - more specific than one plain ring | | 3 | One ring as a band | Stroke weight, exaggerated; the mark's slate is already its heaviest | | 4 | **Two rings, offset** | **The minimum that is recognisably theirs** | | 5 | Three rings | Drops only the inner detail circle | | 6 | Four rings (what v2 carries) | The full arrangement, flat colour | | 7 | Four rings with the mark's gradients | The most literal - and closest to becoming a second logo | | 8 | Arcs, not circles | Only what survives the crop; cannot appear whole on a wide screen | | 9 | Discs, not rings | Keeps sizes and offsets, drops the outline entirely. The quietest | | 10 | One disc, two rings | The most composed; makes a design of the mark rather than quoting it | | ! | Concentric - the control | Drawn to fail | Each is shown twice: the figure alone at a legible size, and in place at the page edge at the opacity it would actually run at, using the same content-column anchoring as `home-A-v2.html`. **Two cautions recorded on the sheet.** The Brand Kit's mark uses a slate lighter than NIGHT and a gold lighter than CONFIDENCE - **the mark and the palette are not quite the same set** - so everything drawn from the palette reads slightly cooler than the logo file. And the more faithful an option is, the nearer it comes to the line where a decoration becomes a second logo: 6 and 7 are the ones to watch. **If one thing has to be defended to the client, defend the offset.** Ring count, stroke weight, gradient, fill and arc can all move without the shape ceasing to be theirs. Drop the offset and it stops immediately. --- ## 2026-09-05 (A v2: brand rings) — Adi + Claude — the mark as an edge decoration `home-A-v2.html` (82,131 bytes). Three soft ring figures at the outer edges, at Adi's direction: use the logo's circle shape as a background decoration on the far left or right, subtle, around 20% opacity. **What was drawn, and what deliberately was not.** The Brand Kit mark is **four circles of different sizes sharing a lower-left origin and growing up-right** - not concentric rings, which is the thing everyone gets wrong when they redraw it. That *relationship* is what the figure echoes: four offset stroke-only circles, brand colours, at `opacity:.20`. **The lockup itself is never reproduced**, and cropped at a band edge at one fifth strength it cannot be mistaken for one - which is the standing rule from design note 5 and the Brand Kit's own "sparingly and large, never behind text it would compete with". **Placement is anchored to the content column, not the viewport.** `calc(50% + 656px)` is exactly where `.wrap`'s text begins (1312px of content, halved), so **the ring cannot sit behind a word at any window width**. The band clips whatever falls outside. Three bands carry one - sections 2 (right), 5 (left) and 11 (right) - alternating sides, at most one per band. **One bug, found by rendering at 1440 rather than assuming.** Anchoring the SVG *box* to the content edge put the ring completely off-screen on a 1440 screen: the drawing sits inside a 400-unit viewBox with empty margin on every side, so the ink began 153px inside its own box. **Anchored to the ink instead** - 66px on the right-hand side, 84px on the left, measured off the circle geometry. It now behaves at both widths. | Window | What shows | |---|---| | 1440 | a soft arc in the 64px gutter | | 1920 | roughly 300px of ring | | below 1100 | nothing - the decoration is hidden rather than crowding the text | **Then extended to the hero the same day**, because the decoration was not visible in a client's first screen - which is the screen that decides whether they think the page has a personality. The hero ring differs from the other three on purpose, and both changes are the same problem: - **Larger: 1180px against 720px.** A bigger circle crosses the same gutter as a *longer, flatter arc*, so it reads at 1440 without moving one pixel closer to the text. That is the lever - size, not position. - **Lighter and stronger: white and gold at 42%, not slate at 20%.** The hero gradient's outer edge is FREEDOM blue; a slate ring at 20% on it is invisible. This is a deliberate departure from the 20% Adi specified, and it is one number to change if it reads as too much. **Moved to the right edge** (Adi, same day), and **the other three re-alternated to follow it** - hero right, then left, right, left down the page. Only the hero was asked for, but leaving section 2 on the right would have put two right-hand rings in a row at the top of the page, which reads as a mistake rather than a rhythm. The right-hand anchor is a different number from the left one and had to be measured, not mirrored: the ink starts 46.5/400 of the way into the viewBox, which is **137px** at the hero's 1180px size against 108px for the left-hand offset. Anchoring by the box instead of the ink is the same bug that made the ring invisible at 1440 the first time. **v1 is untouched.** This is what v2 is for. --- ## 2026-09-05 (v2 opened) — Adi + Claude — `home-A-v2.html` forked from v1, unchanged `notes/mockups/home-A-v2/` (source `src/Main.dc.html`, built with `build.py` in the same folder), deployed to `https://equinoxbusinesslaw.demoing.info/wp-content/mockups/home-A-v2.html` (79,740 bytes). **It is v1, byte for byte, apart from the browser-tab title** - verified by diffing the built files with the title normalised, not by assumption. v1 stays where it is and keeps working; v2 is the branch to iterate on. **The build script now lives with the project**, at `notes/mockups/home-A-v2/build.py`, rather than in the session scratchpad as v1's does. Run it from that folder. A later session should move v1's and B's the same way - a build step that only exists in a temporary directory is a build step that disappears. Verification of the fork: div balance 0, 1 h1 / 11 h2 / 13 h3, 8 `
`, 7 button icons - identical to v1 on every count. **`home-B-v2.html` is not created yet.** Adi asked to start with A only. --- ## 2026-09-05 (B headings) — Adi + Claude — thin/bold applied to Direction B, then reverted **Reverted the same day.** Adi saw it rendered and chose the uniform Bold 700 B had before: *"lets not use thin bold just use bold please like before."* `.h1` and `.h2` are back to 700, the `` wrappers are out of all 12 headings, and the markup is flat again - no redundant tags left behind carrying no weight. **So the two directions now differ on heading treatment, and that is the outcome, not an accident:** A's thin-setup/bold-payload against B's uniform bold. It reads as the difference between an editorial page and a product page, which is what the two directions are for. Worth knowing before anyone "harmonises" them again. The record of what was applied and why is below, kept because the splits are reusable if the question comes back. --- ### What was applied before the revert `home-B-v1.html` rebuilt (64,656 bytes). B's headings were a uniform Bold 700; they now use A's system - **thin 300 is the setup, bold 700 is the payload** - on the H1 and all 11 H2s. Twelve headings, all matched. **The splits are copied from Direction A verbatim, not re-decided.** Which words carry the emphasis is a *copy* decision, so both directions now emphasise the same ones and only the layout around them differs. That was the point of extracting them from A's source rather than choosing again: *Your Business Has Grown.* **Has Your Legal Protection Grown With It?** reads identically in both, so the client compares layouts rather than two different readings of the same sentence. **Checked on the dark bands specifically**, because thin white type is where this system fails if it is going to: 34px Light on NIGHT holds at both the Plan band and the closing band. No adjustment needed. **On whether this blurs the directions:** it does not touch any of the brief's five differentiating axes - hero composition, sectioning device, the four patterns, the role of imagery, header. A and B still differ on all five. What it removes is an *accidental* difference (two weights for the same heading) that was never a design decision in the first place. Verification: div balance 0, 1 h1 / 11 h2 / 15 h3 unchanged, 12 headings carrying ``. --- ## 2026-09-05 (B §10 heading) — Adi + Claude — "Frequently Asked Questions" in Direction B `home-B-v1.html` rebuilt. The objection section's `[Section heading]` placeholder is replaced with **Frequently Asked Questions**, matching Direction A. **The placeholder is now off both pages** - zero occurrences in either file. **This is a recorded departure from the mockup brief**, which requires the labelled placeholder heading *in both directions* and says no working heading is written (section 6, row 10). A departed on 2026-09-04; B now does too, so at least the two directions agree rather than differing by accident. The section comment in `Main.dc.html` says so, and says the heading is ours - the line AISV's would replace if they ever supply one. Design note 12's placeholder register updated: the objection heading moves from "still on the page" to resolved. **The revenue threshold is now the only placeholder left on either page.** The tension already recorded still stands: the four items are objections in the reader's own voice, not questions, so if the section is ever re-cut structurally the heading should be re-decided with it. Verification: div balance 0, heading outline unchanged (1 h1 / 11 h2 / 15 h3), spelling checked. --- ## 2026-09-05 (button icon audit) — Adi + Claude — every button checked; three typographic arrows replaced Audited every button element in both built pages, class by class. **Board 5 is applied correctly**: every small button carries its icon and no full-size button does. | | Small buttons with an icon | Full-size with an icon | |---|---|---| | A | 5 of 5 | 0 of 9 | | B | 5 of 5 | 0 of 8 | Icon mapping is consistent across both: calendar on *Book a Consultation*, clipboard on the assessment, envelope on *Contact Us*. **What the audit did find: three arrows that were typographic, not icons.** `→` characters left over from before the icon system existed - A's *Our Team* button and both directions' "View all Practice Areas & Industries" link in the mega-menu footer. A text arrow sits at the label's own weight and baseline and reads as punctuation; the drawn arrow is a mark. All three are now the real icon at 17px, aligned on the flex centre line rather than the text baseline. **Zero text arrows remain in either file.** **This does not break board 5, and the distinction is worth keeping straight.** A trailing arrow on a route is not the same thing as a subject icon on a conversion - it is a *direction*, which is board 4's rule and the reason *Our Team* and the practice-areas link were already drawing arrows for themselves. Nothing gained an icon here; three things that were pretending to have one now do. Verification both files: div balance 0, heading outlines unchanged (A 1/11/13, B 1/11/15), 0 text arrows. --- ## 2026-09-05 (buttons: smaller + board 5) — Adi + Claude — implemented in both directions `home-A-v1.html` (78,740 bytes) and `home-B-v1.html` (63k). Two changes, both live in both directions. ### 1. The default button size comes down a notch **16px / 13-28 padding -> 15px / 12-24.** The small size (header and mega panels) is unchanged at 14.5px / 10-20, so there are still two sizes and "icons on the small size" still means something. **It buys a measurable win on the problem we could not otherwise solve.** The paired CTAs: | | Book a Consultation | The assessment | The pair | |---|---|---|---| | Before | 214px | 395px | 623px | | After | 196px | 366px | **576px** | **The pair now fits a 640px column on one line**, which it did not at the old size. It still wraps on a 375px phone - 366px against ~335px available - so the two-line construction stays. The stack breakpoint moved 760px -> **720px** to match. ### 2. Board 5: icons on the small size only Calendar on *Book a Consultation*, clipboard on the assessment, envelope on *Contact Us*, people on *Our Team*. Five icons per page. Full-size buttons stay bare: the header is scanned rather than read and two buttons sit side by side there with nothing else to tell them apart, while in the body the label has room to do its own work. Every icon is `aria-hidden` and inherits `currentColor`. ### Three bugs found by rendering rather than assuming 1. **The sweep painted over the icons.** The system had `z-index` on `.btn > span` but not on `.btn > svg`, so the hover fill covered every icon. Fixed. 2. **B's header buttons wrapped to two lines** - "Book a / Consultation" in a header. The flex row was shrinking them. Both directions now carry a guard: header buttons are `white-space:nowrap; flex:none`. 3. **B's header then overflowed.** Measured rather than guessed: logo 144 + nav 663 + buttons 455 = 1262 plus gaps, against 1184 available. **B's header now uses its own wider container** (`.wrapwide`, 1440) as Direction A's already did, with nav gap 28->24 and header gap 36->32. A header is not a text measure. The mega panels and their footer bar moved to the same measure, which also fixed a misalignment between the panel columns and the "View all Practice Areas" bar that predates this change. Verification both files: div balance 0, heading outlines unchanged (A 1/11/13, B 1/11/15), 5 button icons each, no currency symbol. --- ## 2026-09-05 (button icons) — Adi + Claude — six icon treatments, none chosen `notes/mockups/buttons/buttons-icons.html`, deployed to `https://equinoxbusinesslaw.demoing.info/wp-content/mockups/buttons-icons.html` (21,622 bytes). Icons drawn in Direction B's language - single-weight stroke, rounded caps, monochrome, inheriting `currentColor` so they work on every ground and every hover state without a rule of their own. | # | Treatment | The bet | |---|---|---| | 0 | No icon, as it is now | The labels are long and explicit; a button whose words say what happens needs no picture | | 1 | Leading subject icon | Says what the thing IS - booking, assessing and searching are three different actions | | 2 | Trailing arrow on everything | Consistent, but says the same thing three times | | 3 | The arrow appears on hover | Rides the fill sweep - same gesture, no extra idea. Invisible to touch | | 4 | Subject icon on conversions, arrow on the route | The only board where the icon carries what the colour does not | | 5 | Icons on the small size only | The header is scanned, not read - the one place a mark earns its width | **The distinction the sheet is really making: a leading icon says what the thing is, a trailing arrow says where you are going.** They are different sentences and putting both on one button is two. Board 4 says the choice follows the role - Main and Secondary are things you *do*, Outline is somewhere you *go*. **Measured cost:** a leading icon adds **29px** (18px mark + 11px gap). On *Book a Consultation* that is 214 -> 243px, comfortable. On the assessment it is **395 -> 424px** - already the widest object on the page, and on a phone it wraps either way, which is why the button is centre-aligned rather than top-aligned so the icon sits beside a two-line label properly. **The short form at 220 -> 247px is where an icon costs least and helps most**, which is the argument for board 5. **Sizing:** 18px against a 16px label is the optical match. 16px reads small beside caps-height letters; 20px competes with the word. **The budget, again.** Direction B is already at 19 icons against the brief's 11. Button icons are arguably interface affordances rather than library iconography - the same argument that lets a chevron or an arrow off the count - but that reading is Rian's to accept, not ours to assume. **Rules recorded on the sheet if icons are adopted:** one icon per button, never two; every icon `aria-hidden` because the label already names the action; icons inherit `currentColor`; and the same action takes the same icon everywhere, or it is decoration rather than a system. --- ## 2026-09-05 (A radius) — Adi + Claude — Direction B's corner radius applied to Direction A `home-A-v1.html` rebuilt (76,786 bytes). Adi asked for A to pick up the softer corners B uses on images and boxes. A was entirely sharp except its buttons and two mega-menu elements. **The rule applied, and it is written into the CSS so it survives:** > **Bounded objects carry 4px; small controls carry 3px; full-bleed bands never carry one.** > A rounded band is a box pretending to be a page. What changed in A: every image slot, the offset shadow behind each one, the warm question panel, the NIGHT box, the locator band and its slot, and the mega-menu image (which was 3px while the card beside it was 4px). Untouched: the full-bleed bands (`sec3band`, `closerband`, `transband`, `finalcta`), the rule-separated accordion and the credential bar - none of those is an object. **The shadow had to move with the slot.** The offset cream shadow sits behind each image, so if only the image were rounded its exposed corner would stay square against a rounded edge. Both take the same 4px. That is the one detail worth knowing before touching this again, and it is in the comment. **This does not blur the two directions.** The brief's minimum difference is three of five axes - hero, sectioning device, the four patterns, the role of imagery, header - and radius is none of them. A and B still differ on all five. Verification: div balance 0, 1 h1 / 11 h2 / 13 h3 unchanged, radii now 2px (placeholder tag) / 3px (controls) / 4px (objects) / 50% (the bulb badge). --- ## 2026-09-05 (B §11 merged) — Adi + Claude — icons in tinted holders, into Direction B **Chosen: board 9, the icon in a tinted holder.** Merged into `home-B-v1.html` (61,011 bytes). Eight areas, each with its icon in a 38px FREEDOM-tinted square above the label, inside the same bounded field with hairline dividers and no radius - so nothing in the section still reads as a button except the button. **Why the holder beat the bare icon**, recorded because it is the non-obvious part: it gives every cell an identical anchor, so the field reads evenly whatever the label length. Without it the two two-line labels pull their cells out of alignment with the six one-line ones. That reasoning is in the CSS comment. The *Client and vendor relationships* icon is the chain link chosen earlier the same day. ### The cost, stated plainly **This takes Direction B to 19 icons.** The mockup brief allows **11** - one per value group, per step and per objection - and all 11 were already spent before these 8. It is a **recorded departure and Rian's to accept**, noted in the section comment in `Main.dc.html` so it cannot be lost. It joins the header mega menu and the placeholder-badge removal on B's departure list. Two of the eight icons remain weak on their own terms, unchanged by the holder: *Contracts* and *Business policies and documentation* are both a sheet of paper, and *Corporate governance* falls back on classical columns for a concept with no object. The holder makes the field look even; it does not make those three legible. If the icon count is ever cut back, those are the ones to cut. Verification: 8 area cells, 8 holders, div balance 0, heading outline unchanged (1 h1 / 11 h2 / 15 h3), no currency symbol. --- ## 2026-09-05 (B §11 typography) — Adi + Claude — six settings of the eight areas, none chosen `notes/mockups/areas-field-B-v1/areas-field-B-v1.html`, deployed to `https://equinoxbusinesslaw.demoing.info/wp-content/mockups/areas-field-B-v1.html` (36,125 bytes). Copy verbatim; **the cell field itself does not change** - one bounded panel, hairline dividers, no radius, so nothing on the sheet can be mistaken for a button. Only the setting of the labels varies. **The problem is register, not legibility.** The baseline sets the eight in the same case and nearly the same size as the paragraph directly above them, so they read as prose in boxes. They are a taxonomy. | # | Setting | The bet | |---|---|---| | 0 | Baseline, sentence case | What is live. Correct, and the thing Adi flagged | | 1 | **The Brand Guide's own H3: Light 300, all caps** | On-brand, not invented. Light at caps reads as classification | | 2 | The page's label idiom, letterspaced caps | The most unambiguous; risks reading as a menu | | 3 | A quiet index numeral, 01-08 | The count becomes visible without adding a word | | 4 | A gold hairline in each cell | The most subtle and most brand-native; typography untouched | | 5 | Caps and the hairline together | Two devices for one job - drawn so it can be judged, not assumed | **Option 1 is the finding worth carrying.** The Brand Guide's type scale already specifies **H3 as Montserrat Light 300, all caps, tracking 0** - a caps style the brand owns and that nothing else on this page uses. So the answer to Adi's instinct ("test capitals so the client knows it is not a paragraph") is already in the client's own guide rather than being a designer's preference. **One constraint the type options respect.** Caps add roughly 12% width, so the two long labels - *Client and vendor relationships*, *Business policies and documentation* - are the ones to judge; both wrap to two lines in options 1, 2 and 5. ### Boards 6-10 added the same day — icons, at Adi's request | # | Setting | The bet | |---|---|---| | 6 | Numeral with an icon beside it | The most information any cell carries; the numeral already does most of the work | | 7 | Icon only, above the label | **The board to judge the icons on**, with nothing to prop them up | | 8 | Icon with the brand caps | Icon says "an item", caps say "a label" - the same message twice | | 9 | Icon in a tinted holder | Most product-like, most consistent with B's feel; also the busiest | | 10 | **One repeated mark, not eight icons** | The budget-safe answer - a marker is not iconography | **These cost something specific and it is Rian's call, not a detail.** The mockup brief allows Direction B **eleven** icons - one per value group, per step and per objection - and all eleven are used. Eight more takes the page to nineteen. **Board 10 is the way to get the effect without spending the budget**: one repeated glyph is a bullet, not library iconography. **And the harder question is whether these eight can be drawn at all.** Judged on board 7, where the icons carry the cell alone: *Contracts* and *Business policies and documentation* are both a sheet of paper, and *Corporate governance* has no literal object behind it and falls back on classical columns. **An icon a reader has to decode is worse than no icon**, which is an argument for board 10, or for accepting icons only where they are unambiguous. **The weakest one is fixed.** *Client and vendor relationships* was an abstract exchange squiggle that read as nothing in particular. Adi flagged it; four replacements are now drawn in a strip at the top of the sheet, each at 22px and enlarged beside it, with **the chain link applied on every board**: | Candidate | Reads as | |---|---| | **Chain link** (applied) | Connection. Legible at 22px, and says "linked" without saying "deal", which *Contracts* already owns | | Cycle loop | Legible, but it is the refresh/sync glyph - it says "repeating", not "relationship" | | Two-way exchange | Precise for clients and vendors, flows in both directions; slightly generic | | Two parties joined | Legible and simple, but close to the standard "share" mark | **A handshake was drawn first and abandoned** - at 22px in a 1.5px stroke it collapses into a tangle. Worth recording, because it is the obvious thing to ask for and it does not survive the size. Icons are stand-ins; the final set comes from the Kadence Blocks library, monochrome within the palette. --- ## 2026-09-05 (B §11) — Adi + Claude — the eight areas stop looking like buttons `home-B-v1.html` rebuilt (57,091 bytes). In the assessment section the eight areas were drawn as bordered pills with a radius - **the shape of a button** - and the section has a real button directly underneath them. Adi flagged it: the client would read nine clickable things where there is one. **They are now one bounded field subdivided by hairlines**, four across and two down: a single outer border, 1px dividers, no radius, no individual edge per item. That reads as coverage of a domain, which is what the copy says they are (*"can help you identify potential gaps involving:"*), rather than as eight things to click. The only button-shaped object left in the section is the button. The reasoning is written into the CSS comment, because the pill is the obvious thing to reach for again. **It also keeps B distinct from A**, which matters more than it looks: A's section 11 is the flowing run of areas at 27px, so B needed a treatment that was not a text run. The cell field is the option that was drawn for A and not chosen - it belongs to B now. Verification: 8 area cells, 0 chips, div balance 0, heading outline unchanged (1 h1 / 11 h2 / 15 h3). --- ## 2026-09-05 (buttons merged) — Adi + Claude — one button system, live in both directions **Chosen: hover treatment 3, the sweep** (Adi). Implemented in `home-A-v1.html` (76,306 bytes) and `home-B-v1.html` (56,517 bytes), and `buttons.html` updated to record the decision. Copy is unchanged in both directions - the full labels stay exactly as the brief instructs; only the button system changed. **Both pages now speak one vocabulary.** Every button is `.btn.main`, `.btn.secondary` or `.btn.outline`; the ad-hoc classes (`btnA`, `btnB`, `btnBlight`, `hdrcta`, `ctabtn`, `nlbtn`) are gone from both files - 0 remaining, verified. Change a button in the spec and it changes on both pages. | Role | A | B | |---|---|---| | Main | 6 | 6 | | Secondary | 7 | 6 | | Outline | 2 | 1 | **A's inconsistency is fixed as a side effect.** *Book a Consultation* was gold twice and outline once, and the assessment was gold twice and outline three times. Both now have exactly one treatment wherever they appear, so the page stops telling the reader different things about which action matters. **What went in with it:** - **The sweep animates `transform` on a pseudo-element**, never `width`, and carries a `prefers-reduced-motion` guard. - **The Main label stays ink on hover.** White on DAY gold is 2.71:1 and fails AA; A shipped that combination in its header CTA until now. - **`:focus-visible` rings** - BUSINESS blue on light, gold on NIGHT, because blue does not separate from a NIGHT ground. - **Buttons are built for two lines** (`line-height:1.3`, symmetric padding, `text-wrap:balance`). The 395px label cannot fit a 375px phone at any size, so it must be allowed to wrap. - **The paired CTAs share width** (`flex:1` inside `.btnrow`, capped at 660px) and **stack below 760px**. The 395px secondary no longer dwarfs the 214px primary. - **`.on-dark`** is set on A's final CTA and mega cards and B's NIGHT bands, so the secondary flips to a white fill and the focus ring to gold. **Two bugs caught while merging.** A's button rows were inline-styled flex containers, so the equal-width rule did not reach them until they were given `.btnrow`. And B's single-button rows were tagged `.single` by their margin value, which caught the hero pair too - re-derived from the actual number of buttons in each row. **Still open, unchanged:** the wording question (design note 13/13b) goes to Rian - the name, and whether the short form may be used in body CTAs. Until then the long labels stay and the system copes with them. --- ## 2026-09-05 (buttons) — Adi + Claude — a three-role button system, drafted with hover `notes/mockups/buttons/buttons.html`, deployed to `https://equinoxbusinesslaw.demoing.info/wp-content/mockups/buttons.html` (18,416 bytes). **A build spec sheet, not a Step 1 artboard** - the mockup brief puts hover and focus on the not-drawn list because they are Kadence build decisions, which is exactly what this records. **The brand guide specifies no buttons.** It gives CTA wording and nothing about appearance, so the system is our judgement from the palette and the one-accent rule. Nothing here invents a colour. ### What the audit of A and B found **Three jobs, two styles.** Gold-filled and dark-outline are the whole vocabulary today, so *Take the Business Legal Health Assessment* - a real conversion - and *Our Team →* - a navigation link - are drawn identically. **And Direction A contradicts itself about which button is primary.** Counted, not eyeballed: *Book a Consultation* is gold twice and outline once; *Take the Business Legal Health Assessment* is gold twice and outline three times. Four places on one page tell the reader a different thing about which action matters. **Direction B is already consistent** - gold is always Book a Consultation. ### The system | Role | Treatment | Belongs to | |---|---|---| | **Main** | CONFIDENCE `#FFD457` fill, ink label | *Book a Consultation* alone - the action that earns money | | **Secondary** | Solid NIGHT `#003B53` fill, white label | The assessment - weight without a second accent, because NIGHT is structural, not an accent | | **Outline** | Border only, NIGHT | Routes and non-conversions | Three hover treatments to choose between: **tone only**, **tone + a 1px lift**, **fill sweeps in**. All animate only `background-color`, `border-color`, `color` and `transform`; the sweep uses a pseudo-element so it animates `transform`, never `width`, which would relayout every frame. Both motion options carry a `prefers-reduced-motion` guard. ### One real defect found, and fixed here **The obvious gold hover fails contrast, and Direction A ships it today.** DAY gold `#D98D00` with a white label is **2.71:1** - fails AA for normal text and for large text too. A's `.hdrcta:hover` is exactly that combination. The fix is to keep the ink label on hover: the same gold at **5.16:1**. Every other state passes AA as drawn, and the sheet carries the measured table. **A's header CTA should be corrected when the chosen hover is merged.** Two sizes only (default, and small for the header and mega panels), plus a large drawn for testing that nothing currently needs. Focus is `:focus-visible`, gold on NIGHT grounds because BUSINESS blue does not separate from them. Disabled exists only for the newsletter submit. **Rules that ride along:** one Main per screen wherever the layout allows; paired CTAs always Main then Secondary, in the brand story's order; Outline never carries a conversion; no third accent, ever - a new button need is answered with weight, not a new hue. ### Long labels — Adi flagged it, and the measurement is worse than it looks Measured at the system's own size: **"Take the Business Legal Health Assessment" renders at 395px** (347px at the small size). "Book a Consultation" is 214px. Two problems fall out, and only one is a layout problem: 1. **It cannot fit on a phone at any size.** A 375px viewport with the page's side padding leaves ~335px, so the label must wrap - there is no setting that avoids it. **The base button was rebuilt for two lines**: `line-height:1.3` and symmetric padding instead of `line-height:1`, plus `text-wrap:balance`. A button built for one line puts two lines on top of each other, and the first draft of this sheet had that bug. 2. **The secondary is nearly twice the width of the primary** - 395 against 214. The largest object in the row is the action we do *not* want taken first, which contradicts what the colours are doing. No amount of wrapping fixes this one. Three treatments are drawn at full width, 640px and 375px: **wrap** (the floor, not optional), **equal-width pair** (`flex:1` - the one that answers problem 2), and **capped secondary** (tidier wide, but hard-codes a width to one string). **Below ~760px the pair stacks** and both go full width - not a choice, since the pair needs 623px plus side padding. **The thing worth saying out loud: 41 characters is not a button label, it is a sentence.** The short form exists and is 220px; with it the pair is 434px, fits a 640px column on one line, nearly balances the primary, and the wrapping question disappears. **That is not ours to change** - the brief reserves the short form for the header and mobile drawer and requires the full label on the hero, plan, assessment section and final band. So it goes to Rian as a question, and it is a good one to ask now because the same decision settles the assessment's name, which is still unconfirmed. **Until it is answered the build carries fix 1 plus fix 2.** --- ## 2026-09-05 (B header) — Adi + Claude — mega menus ported into Direction B `home-B-v1.html` rebuilt (53,370 bytes). Working CSS-only mega menus on **Services**, **Our Approach** and **About Us**, same three as Direction A, same hover-bridge construction (padding on `.navwrap` with an equal negative margin, so the pointer travels from the label into the panel without crossing a dead gap - the bug that had to be fixed in A). **Ported, then rebuilt in B's language rather than copied.** A's panel has a 52px drop shadow; B's is a bounded surface with a hard 1px border top and bottom and no shadow, because the no-shadow card is B's whole structural idea and borrowing A's device would blur the two directions. The CTA column is a NIGHT card, the same object as the step cards in section 6. **Panel copy is navigation labels and the real phone number only.** A's panels carry invented marketing headlines - *"Not sure where to start?"*, *"Bring us the thing that is keeping you up at night."*, *"Nine attorneys, paralegals and operations staff..."* - which the brief bans (section 6: the only words on the page are the brand story's copy, nav and footer labels, and UI labels). B's CTA columns carry a short uppercase label, the button, and the phone number, so **the mega menu adds no copy to B**. The team-count sentence in particular was left out on purpose: the count is generated from the team post type at build, never typed. **Two bugs found and fixed while porting.** The panel was anchored to `.navwrap` rather than `.hdr`, so it opened 300px wide with the hero showing through it - `position:relative` belongs on the header, not the nav item. And the header needed `z-index:50` to sit above the hero band. **This is a recorded departure from the mockup brief**, which specifies the nav drawn closed with no dropdown, mega menu or hover state (section 6; also the scope fence's not-drawn list). Direction A already departs the same way. Both directions now do - so on the header the deviation is no longer a difference between them, and Rian sees a consistent choice rather than an accident. Verification: div balance 0, 1 h1 / 11 h2 / 15 h3, 3 mega panels, 11 icons, 0 placeholder badges, no currency symbol. --- ## 2026-09-04 (footer merged) — Adi + Claude — gold-band footer into the homepage; the page is complete **Chosen: board 2, gold band with the credentials given a row.** Merged into `Main.dc.html` -> `home-A-v1.html` (73,883 bytes). **The whole page — header, twelve sections and footer — is now on chosen designs. Nothing is left on the original scaffold.** What the merge changed against the old footer: - **The subscribe form is a band of its own at the top**, in CONFIDENCE with dark text and a NIGHT button. It was previously a single word ("Newsletter") buried in the contact column. Gold is the page's action colour, so the one thing in the footer anyone is meant to act on now wears it. - **Phone and email carry icons.** They were two more same-sized lines in a column of links. - **The three third-party credentials get their own row** above the legal bar - WBENC, PSBJ 100 Fastest-Growing, 425 Best in Business. They are the only lines in the footer that someone other than the firm said about the firm, and they were not in the footer at all before this project recovered them. - **The placeholder badges are gone** (Brand Kit logo, street address, canonical name), following the clean- board decision made on the footer sheet. Contact shows phone and email only. **It also fixes the dark-on-dark stack flagged when §12 was merged.** The closing section ran straight into the footer with only a small tonal step; the gold band now separates them, and does it with an element that has a job rather than a divider. Verification: 1 h1 / 11 h2 / 13 h3 unchanged, div balance 0, 8 `
`, 1 `
`, no `#004963`, no currency symbol, no cut social networks. **Two things now differ from the rest of the page and should be settled deliberately:** 1. **The footer has no labelled placeholders; the twelve sections still do** (revenue threshold, six image slots, assessment name). One convention or the other should win before anything goes to the client. 2. **The `.nlform` is the page's only real form control.** Nothing else on the mockup is an ``. If the mockup is ever shown live, the field states (focus, error, filled) are undesigned. **What remains is the page-wide work, unchanged:** the cream double-duty problem, the padding scale (96/104, 104/110, 108/112, 112/116, 128/136 -> three steps), and the six unaudited heading `max-width` caps. --- ## 2026-09-04 (footer options) — Adi + Claude — five footers, newsletter lifted to a band of its own `notes/mockups/footer-A-v1/footer-A-v1.html`, deployed to `https://equinoxbusinesslaw.demoing.info/wp-content/mockups/footer-A-v1.html` (59,134 bytes). **Nothing chosen yet.** Supersedes the earlier `footer-options.html` sheet, which tested six *structures*; this one starts from three decisions Adi made and varies what is left. **The three fixed decisions, on all five boards:** - **The newsletter is a horizontal band at the top of the footer.** It is the only interactive thing the footer has, and the live site buries it inside a link column. - **Phone and email carry icons.** They are the only two lines a visitor might act on immediately, and in a column of same-sized text they currently look like two more links. - **No skewed or angled edges** (Adi, 2026-09-04, corrected mid-build). Every edge on the page is square and the footer keeps it that way. Two boards had been drawn with a skewed band; both were rebuilt square. | # | Layout | The bet it makes | |---|---|---| | 1 | Four columns, band on NIGHT | The live structure cleaned. Safest, least to build | | 2 | Gold band, credentials given a row | Gold is the page's action colour, so the one actionable thing wears it | | 3 | Image band above the newsletter | A horizon before the link grid. Full-width image | | 4 | Image inside the newsletter band | A picture without a second strip; the image belongs to the form | | 5 | Credentials lead, band on LAW | Third-party proof before navigation; the warm band also breaks the dark-on-dark stack | **Boards 3 and 4 are the open question, and the argument against them is on the page already.** The closing section directly above now carries an image, so a footer image stacks two photographs with only a form between them, and it adds a second asset to source before the first one is chosen. Boards 1, 2 and 5 have no image at all. **Board 5 also answers something already logged as a live issue:** §12 (NIGHT) currently runs straight into the footer with only a small tonal step. A warm newsletter band between them separates the two. **Content is the live site's real footer, not invented** - the subscribe form and consent line, phone, email, Explore, Community Involvement, the four legal links, and the three third-party credentials (WBENC, PSBJ 100 Fastest-Growing, 425 Best in Business). Client cuts applied: the two social networks cut on 2026-08-27 are gone, and so are EO Portland and Women in Finance. Placeholders stay labelled - street address unconfirmed, entity name on the copyright line a working assumption. **The boards carry no placeholder badges** (Adi, 2026-09-04) - they read as finished footers. The four unconfirmed things moved to the sheet header instead of the artwork: the logo is the Brand Kit raster with vector files still to request; there is no street address and whether a public office address exists is unconfirmed, so Contact shows phone and email only; the entity name on the copyright line is a working assumption; and the newsletter heading and subhead are the only invented copy on the sheet, which is AISV's to write. **Nothing was lost, it moved** - a clean board with the caveats recorded beside it. **The homepage mockup still carries its labelled placeholders** (revenue threshold, image slots, street address, assessment name), which was not part of this instruction. The two files now differ in convention - worth settling deliberately before either goes to the client. --- ## 2026-09-04 (§12 merged) — Adi + Claude — closing section built; all twelve sections now designed **Chosen: board 2, photograph as an object with the text alongside.** Merged into `Main.dc.html` -> `home-A-v1.html` (70,745 bytes). **Every section of the page is now on a chosen design; nothing is left on the original scaffold.** The section is the hero's shadow-box device on a dark ground, so the page opens and closes the same way. Image slot is 4:3, labelled, no people. It needs a far less heroic photograph than a full-bleed band would: nothing sits on top of it, so any crop works and no wash has to be tuned for white text. **The offset shadow is a FREEDOM tint, not the hero's cream** — written into the CSS comment because it is a trap: gold or cream at low alpha over NIGHT reads olive and muddy, so the hero's device cannot be ported to a dark ground unchanged. **Two consequences of this choice worth flagging to the next session:** - **The standalone swirl is now gone from the page** (0 references; the old §12 was its only use). The emblem still appears inside the footer's reverse lockup, so the brand mark is not absent — but the page no longer uses the swirl as a graphic device anywhere. If that is wanted, the footer or a mid-page band is where it would go, and boards 3 to 5 of `pre-footer-A-v1.html` show how it behaves at size. - **Two dark bands now stack.** §12 (NIGHT) runs straight into the footer with only a small tonal step between them. Worth a look on the built page — the swirl was previously doing some of the work of separating them. Verification: 1 h1 / 11 h2 / 13 h3 unchanged, div balance 0, 8 `
`, no `#004963`, no currency symbol. **What is left is no longer section work.** The review's two page-wide fixes are now the whole remaining list: the cream double-duty problem (`#FFFAEB` in 12 rules, 6 of them image shadows, which undercuts "warm panel = reader addressed"), and the padding scale (96/104, 104/110, 108/112, 112/116, 128/136 should be three steps). Then the six unaudited heading `max-width` caps. --- ## 2026-09-04 (§12 options) — Adi + Claude — closing section, image tested against emblem `notes/mockups/pre-footer-A-v1/pre-footer-A-v1.html`, deployed to `https://equinoxbusinesslaw.demoing.info/wp-content/mockups/pre-footer-A-v1.html` (38,514 bytes). Copy verbatim — heading, all three paragraphs, both CTAs in AISV's order. **Nothing chosen yet.** | # | Device | The bet it makes | |---|---|---| | 1 | Photograph as the ground, NIGHT over it | The conventional closing band. Needs an asset that does not exist | | 2 | Photograph as an object, text alongside | The hero's shadow-box device again, so the page opens and closes the same way | | 3 | Emblem cropped at the edge, large | The brand rule followed exactly: large, sparing, nowhere near the text | | 4 | Emblem as a watermark behind the text | Deliberately breaks the rule to show what it costs | | 5 | Emblem in colour, on a light ground | The guide's own preference. Costs the page its only dark beat | **The real decision the sheet forces is whether this section has an asset dependency at all.** A photograph is content and needs a subject the client has approved; the swirl is already owned and cleared in the Brand Kit. With the no-people rule in force (client decision 2026-08-27) the only photographic subjects available are place, architecture or object — and none of those is in the kit, so boards 1 and 2 both open a sourcing question that boards 3 to 5 do not. Every image slot is a labelled outline; no people appear anywhere. **Board 4 exists to fail, or to surprise us.** The brand guide's rule is "sparingly and large, never behind text it would compete with", and board 4 breaks the second half on purpose. Judge it on the paragraphs, not the heading — 18px white text over a shape carrying its own light and dark is where a watermark stops being atmosphere. Board 5 departs the other way: it is the only board on a light ground, which is what the guide prefers for the logo, at the cost of the page's only dark beat before the footer. Two things fixed during the build, both worth remembering as class-of-error notes: - **A full-bleed image slot's centred label lands behind the copy.** Board 1's placeholder caption was sitting in the middle of the paragraphs. Any `inset:0` slot needs its label pushed to a corner. - **Gold at low alpha over NIGHT reads olive, not gold.** Board 2's offset shadow — the hero's device translated to a dark ground — came out muddy at `rgba(255,212,87,.22)`. It is now a FREEDOM tint. The hero's cream-on-white shadow does not survive being ported to NIGHT unchanged. --- ## 2026-09-04 (§11 merged) — Adi + Claude — "the eight areas, at size" into the homepage **Chosen: board 0, the baseline with phrases kept whole.** Merged into `Main.dc.html` -> `home-A-v1.html` (69,742 bytes), replacing the old eight-cell tick grid. What changed in the section, beyond the setting: - **The check marks are gone.** A tick claims something has been confirmed; nothing here has been answered yet, and the eight items are what the assessment *covers*. Same affordance mismatch already caught in the "you may be wondering" panel. - **The eight areas are unbreakable.** `.ba` is `white-space:nowrap` and an explicit `` follows each separator - adjacent spans with no whitespace give the browser no break opportunity of its own, so without the `` the run either overflows or splits phrases. Verified in the build: 8 area spans, 7 ``. The reason is written into the CSS comment so a later session does not "tidy" it away. - **The H2 cap went 700px -> 820px**, which was the orphaned-"Business?" fix carried over from the sheet. - **The name placeholder is now the standard labelled note**, not a grey aside: three names in circulation, one may ship, in navigation, CTAs, title, URL and schema alike. The section is now the shortest on the page, which was the point of the direction - by §11 the page has argued for nine sections and a doorway does not need to persuade. The whole page got shorter, not longer. Verification: 1 h1 / 11 h2 / 13 h3 unchanged, div balance 0, 8 `
`, no `#004963`, no currency symbol. **Only §12 (Final CTA) is still on the original scaffold.** The review's two page-wide fixes still stand and are now the last structural work before the page is whole: the cream double-duty problem, and the padding scale (96/104, 104/110, 108/112, 112/116, 128/136 should be three steps, not five). --- ## 2026-09-04 (§11 direction chosen) — Adi + Claude — "the eight areas, at size" expanded into six settings **Adi's current favourite from the first §11 sheet is option 5, "The eight areas, at size."** Expanded into `notes/mockups/assessment-areas-A-v1/assessment-areas-A-v1.html`, deployed to `https://equinoxbusinesslaw.demoing.info/wp-content/mockups/assessment-areas-A-v1.html` (40,921 bytes). Board 0 is the favourite as approved; boards 1-5 vary it. Copy verbatim throughout. **Nothing final yet.** | # | Setting | What holds the eight together | |---|---|---| | 0 | Baseline, phrases kept whole | Gold middots. The most neutral; nothing competes with heading or button | | 1 | Justified: a block of scope | Justification. Becomes an object, a measurable amount of ground | | 2 | Numbered 01-08 | A count. Eight is finite and checkable, and it reads as an instrument | | 3 | One per line, button alongside | Nothing - the eight are unambiguously eight. Tallest; risks reading as nav | | 4 | The run ends in the button | The CTA itself, inline at the end of the last line | | 5 | Rules, not dots | Gold uprights. A boundary reads as fields, not punctuation | **A defect in the approved baseline was found and is fixed on every board.** The run was breaking phrases across lines - *Intellectual / property*, *Client and vendor / relationships* - turning eight things into eleven fragments. Each area is now unbreakable (`white-space:nowrap` plus an explicit `` after each separator, since adjacent spans with no whitespace give the browser no break opportunity). **This carries across whichever board wins, and it is the one change that must not be lost in the merge.** Two further things learned in the build, worth keeping: - **` ` does not resist justification in Chrome** - it stretches like any space, so board 1's first attempt pulled *Employment  and  HR* apart. The fix is to make each area an atomic `display:inline-block`: justification can then only open the gaps *between* areas. - **An inline-block separator strands at line starts.** Board 5's uprights jumped to the beginning of the next line because two adjacent atomic boxes are themselves a break opportunity. The rule now travels inside the span of the area before it. What the six are really testing is what carries the eight once they are set at 27px: at that size the choice of punctuation, justification, count or rule is not decoration - it decides whether the reader sees one object or eight items. --- ## 2026-09-04 (§11 options) — Adi + Claude — five treatments of the assessment section, none chosen `notes/mockups/assessment-A-v1/assessment-A-v1.html`, deployed to `https://equinoxbusinesslaw.demoing.info/wp-content/mockups/assessment-A-v1.html` (41,840 bytes). Copy verbatim from `notes/source/aisv-brand-story.md` — heading, both lead paragraphs, the eight areas in AISV's order, the CTA and the supporting line. **Nothing chosen yet.** | # | Treatment | The bet it makes | |---|---|---| | 1 | A coverage grid, no ticks | Smallest change: same section, check marks dropped, areas as a 4×2 cell grid | | 2 | The assessment starts here | The Typeform embed sits in the section; the copy compresses to make room | | 3 | One dark band | NIGHT ground so it reads as an instrument, not another content block | | 4 | What you get back | The eight areas as the rows of the result, not the questions | | 5 | The eight areas, at size | Shortest on the page; a doorway, not another argument | **The problem this section has is repetition, not layout.** "Take the Business Legal Health Assessment" already appears five times before a reader reaches here, so this section's job is not to ask again — it is to be the one place that says what the thing *is*. Each option is a different answer to that. **The check marks on the live section are probably wrong, and they are what is on the page now.** A tick means answered, done, confirmed — the same affordance mismatch already caught in the "you may be wondering" panel. Nothing has been answered yet; the eight items are what the assessment *covers*. Four of the five options drop them; option 2 drops the list device entirely. **Option 4 carries a claim the others do not** and cannot ship until it is checked: it shows the assessment reporting per area. What the Typeform actually returns is unconfirmed — the empty states are drawn as placeholders deliberately, and the question goes to AISV with the hidden/UTM field list already open from `agents.md`. **Option 2 is buildable today.** The embed (widget `QIIINVqG`) carries over as-is, so the assessment can start in the section rather than behind a button — one click off the transitional conversion path that `.logs/planning/tracking-conversion.md` measures separately from Book a Consultation. The name stays a labelled placeholder on all five boards: three names are in circulation and the site may carry only one, in navigation, CTAs, title, URL and schema alike. **One fix already applied to the heading:** at `max-width:700px` the H2 orphaned "Business?" onto a second line. Widened to 820px so it sets on one line. **The same cap is still on the homepage's live §11** and should be corrected there whichever option wins. --- ## 2026-09-04 (§10 merged) — Adi + Claude — FAQ option 1 into the homepage, heading named **Chosen: option 1, accordion with the first item open.** Merged into `Main.dc.html` → `home-A-v1.html` (70,555 bytes), replacing the old scaffold section. The four fake plus/minus rows are gone; these are real native `
` with no JavaScript, so all four answers sit in the served HTML whether open or shut. Styling is exactly what was on board 1 — 20px/600 objections, the concession at 18px/500 in NIGHT, the argument at 17px in ink, CSS chevron, 900px measure, hairline rules. **The section now has a heading: "Frequently Asked Questions"** — Adi's call, not waiting on AISV. Set in the page's thin/bold system as *Frequently Asked* **Questions**. The `[Section heading] AISV to confirm` placeholder is gone from the page and no longer appears anywhere in the build. Two things worth carrying: - **The heading is ours, and it is the one piece of §10 copy AISV did not write.** If AISV later supplies a heading, this is the line it replaces. Noted in the section comment in `Main.dc.html` so it is not mistaken for sourced copy. - **The items are objections, not questions.** They are in the reader's own voice and in quote marks, and each answers in three beats. "Frequently Asked Questions" is the label readers know and scan for, so it earns its place — but the mismatch is real, and if the section is ever re-cut structurally (Direction B) the heading should be re-decided with it. Page verification after the merge: 1 h1 / 11 h2 / 13 h3 (unchanged), div balance 0, 8 `
` (4 services + 4 FAQ), no `#004963`, no placeholder string, no currency symbol. Remaining on the old scaffold: §11 Assessment and §12 Final CTA. Before those, the review's two page-wide fixes still stand — the cream double-duty problem and the padding scale. --- ## 2026-09-04 (objections + sticky header) — Adi + Claude — FAQ options sheet built, header made sticky ### `faq-home-A-v1.html` — five treatments of the objection-handling section (§10) `notes/mockups/faq-home-A-v1/faq-home-A-v1.html`, deployed to `https://equinoxbusinesslaw.demoing.info/wp-content/mockups/faq-home-A-v1.html` (37,700 bytes). Copy verbatim from `notes/source/aisv-brand-story.md` in all five boards. **Nothing chosen yet.** | # | Treatment | The bet it makes | |---|---|---| | 1 | Accordion, first open | The planned build. Compact — but the page would then carry two accordions | | 2 | Everything visible | Costs height, never leaves an objection on screen with its answer hidden | | 3 | Objection left, answer right | Reuses the paired-row structure already working in §7 | | 4 | The concession, at size | Weights the sentence that *agrees* with the reader | | 5 | As things people say | Treats the objections as quotations, which is how the copy writes them | **The finding worth carrying forward: the copy is a three-beat structure, not a Q&A.** Every item is objection → *concession* → argument (*"We only call a lawyer when something comes up."* → *That approach may have worked when the business was smaller.* → the reasoning). The middle beat does the persuading. A flat question-and-answer layout discards it; options 3 and 4 give it weight. **And the accordion argument runs the other way here than it does for services.** A collapsed objection leaves the objection visible and its answer hidden — four reasons not to buy, no reasons to. That is the case option 2 exists to make. Whatever wins, the panels are native `
` with no JavaScript, so the answers are in the served HTML: Google indexes collapsed content only when it is there on load, and AI answer engines read only what is served. **Still no section heading, and that is not a gap** — AISV never wrote one. It stays a labelled placeholder on every board, like the revenue threshold and the assessment's name. ### The header is now sticky (Adi's call, 2026-09-04) `Main.dc.html` → `home-A-v1.html` rebuilt (69,996 bytes). `.hdr` is `position:sticky; top:0; z-index:60`, and it **condenses once the page has moved**: over the first 140px of scroll the row padding goes 24px → 13px, the wordmark 52px → 38px, and a soft shadow fades in. Pure CSS scroll-driven animation (`animation-timeline: scroll(root)`), no JavaScript, wrapped in `@supports` so a browser without scroll-timeline gets a plain sticky header instead. Verified supported in the render browser (Chrome 143). Two details that came with it: `html { scroll-padding-top:116px }` so in-page anchors do not land under the bar, and `z-index:60` sits above the mega panels' `40` so they still open over the page correctly. **This is buildable as drawn** — Kadence Pro's header has sticky + shrink natively. It only reads properly when scrolled, so it cannot be judged from a static board — scroll `https://equinoxbusinesslaw.demoing.info/wp-content/mockups/home-A-v1.html`. Page verification after the rebuild: heading outline unchanged (1 h1 / 11 h2 / 13 h3), div balance 0, no `#004963` drift, no Twitter/Facebook, no currency symbol. --- ## 2026-09-03 (footer) — Adi + Claude — six footer layout options on the sheet, none chosen `notes/mockups/footer-options/footer-options.html`, deployed to `https://equinoxbusinesslaw.demoing.info/wp-content/mockups/footer-options.html` (33,131 bytes). **Internal working sheet, not a client deliverable.** Six *structural* layouts, one content set, Brand Kit palette and Montserrat throughout. | # | Layout | Badge | The bet it makes | |---|---|---|---| | 1 | Four-column classic | Sourced | The live footer's own structure, cleaned. Safest | | 2 | Conversion band on top | Sourced | Footer is the last conversion surface. Costs height, repeats a CTA | | 3 | Newsletter split | Sourced | The list matters more than the link grid | | 4 | Credentials first | Sourced | Third-party facts lead. Only lines someone else said about the firm | | 5 | Minimal | Stretch | A footer is not a navigation surface. Drops newsletter + credentials | | 6 | Full sitemap | Stretch | Every practice area, function and industry as crawlable text | **The footer content was rebuilt from the live site's real footer, not invented.** Recovered from the saved page source: the subscribe form and its consent line, phone `425-250-0205`, `contact@equinoxbusinesslaw.com`, the Explore column, Community Involvement, the four legal links, and — new to this project — **three third-party credentials the live footer already carries**: WBENC Certified Women's Business Enterprise, Puget Sound Business Journal 100 Fastest-Growing Private Companies, and 425 Business Best in Business. Those had not been recorded anywhere before. They are facts a third party asserted, which makes them the strongest material in the footer. **Client cuts applied.** Facebook and Twitter icons gone (five social icons become two: LinkedIn and YouTube). EO Portland and Women in Finance out of Community Involvement, leaving five. **Two things this surfaced for the review list.** 1. **The live site contradicts itself on the entity name.** Its copyright line reads "Equinox *Law* Group PLLC"; its own newsletter consent line, on the same page, reads "Equinox *Business* Law Group PLLC". The sheets use the full name. This feeds the canonical-name question already open. 2. **Still no street address anywhere in the live footer.** None is drawn. If the firm wants a LocalBusiness entity, the address is required and has to come from the client. **Placeholders in the sheet:** credential badges are set as type, not the client's badge images (never supplied); the logo is the Brand Kit raster, vector still requested. **Next:** Adi picks a direction, or asks for a merge of two. Nothing here is wired into `home-A-v1` yet — the artboard still ends without a footer. --- ## 2026-09-03 (evening) — RIAN'S DIRECTION TO ADI: stay on task. Read this before doing anything. **This entry overrides any plan, note or idea in this project that says otherwise, including anything already drawn. It stands until Rian records the chosen direction here.** Rian's instruction, 2026-09-03: **do not go outside the mockup.** Work that serves the presentation of the two home-page variations is fine. Building anything else is not permitted. ### Do these three things, in this order, and then stop 1. **Incorporate the Brand Kit.** It arrived 2026-09-03 and is filed at `notes/source/brand-kit/`. Read `notes/source/brand-kit/README.md`, then `notes/mockups/shared-v1/design-system.md`. Apply it to Direction A, which is currently off-brand in two ways: - **Colour.** The artboard is built on `#004963`, which is live-site drift and is **not a brand colour**. Swap it to NIGHT `#003B53` (about 356 occurrences). Gold `#FFD457` is already correct. The other brand colours available to you are BUSINESS `#027CA1`, FREEDOM `#93BCCD`, DAY `#D98D00` and LAW `#FFFAEB`. Nothing outside those six. - **Type.** The artboard uses Libre Franklin and Source Serif 4 and contains **no Montserrat at all**. Montserrat is the confirmed brand face, at the guide's weights (H1 Bold 700 sentence case, H2 ExtraBold 800 caps, H3 Light 300 caps, H4 SemiBold 600, body Regular 400). Direction A ships brand-compliant Montserrat. If you still want to argue for a companion text face for long-form body only, that goes in the direction statement as a proposal with its reason, for the client to accept or refuse at the review. It is not the default. - **Logo.** The placeholder is cleared. Use `Equinox__Logo_SLCTag_B_RGB.png` on white, the reverse lockup on dark, the swirl as favicon. Do not trace, redraw or restyle the mark. - The Brand Kit also unlocks **brand gradients** as a hero and section ground. They are a named brand element, they are free as CSS, and they solve the no-photography problem. 2. **Finish Direction A** to the definition of done in `.logs/planning/homepage-mockup-brief.md` section 2. 3. **Build Direction B.** It does not exist. The deliverable is two directions and there is currently nothing to compare. The five declared axes are in `notes/mockups/shared-v1/directions-and-placeholders.md`. Then run the pre-flight checklist, file both under `notes/mockups/`, write your handoff entry, and hand back to Rian. **Nothing beyond that.** ### Not permitted, and this is not a judgement call No inner pages or templates of any kind. No pattern library. No Kadence or WordPress build. No coded or interactive prototypes. No third direction and no variants inside a direction. No new brand work. No brand collateral. No new copy — copy is the deck in `notes/mockups/shared-v1/copy-deck.md`, verbatim, with the two sanctioned substitutions, and copywriting belongs to AISV. No sections the brand story does not contain. The full list is `.logs/planning/homepage-mockup-brief.md` section 8, and it has not moved. **Copy invention specifically.** The mega-menu panels contain four lines that appear in no source: "Bring us the thing that is keeping you up at night", "Meet the people who would actually be handling your work", "Find out which legal gaps are costing you money", "Not sure where to start?". Checked 2026-09-03 against the copy deck, the brand story, the AISV deck and the live-site crawl — none of them is in any of those. Either source each line, mark it visibly as a placeholder, or remove it. This is your own rule from `notes/design-notes.md` note 2. ### If you think something outside this is worth doing Write it in `notes/design-notes.md` or raise it in the requests table in `.logs/planning/step1-execution.md`, and carry on with the three tasks above. **Do not build it first and log it afterwards.** Asking twice and then proceeding is not approval. The one channel to Rian is the request; his answer is the permission. ### Open item for Rian, not for Adi to decide The three-panel mega menu is already built and is **in the client-facing export** (`notes/mockups/home-A-v1/home-A-v1.html`, roughly 18% of the desktop artboard, with hover and JavaScript). Whether it ships to the client or is trimmed back to the closed nav is Rian's call and is still open. Do not build on it further either way. --- ## 2026-09-03 (evening) — Rian + Claude — Brand Kit received and built into the plan; Direction A needs a palette swap **What arrived.** Rian dropped the client's **Brand Kit** and the **2026 Brand Photo Shoot** into `notes/inbox/`. Both are filed: `notes/source/brand-kit/` and `notes/source/photos/`. The email Rian pasted is the same 2026-08-27 message already recorded verbatim in `.memory/client-decisions-2026-08-27.md`, `.logs/planning/design-direction.md` section 4 and `agents.md`; nothing in it was new, and nothing was changed on account of it. **The kit is a real brand system, and it corrects the live site.** A 76-slide guide (2022-06-24), plus a 92-slide 2023 build and an 8-slide short version — palette, typography and logo identical in all three, verified. Digest written to **`notes/source/brand-kit/README.md`** (read this before any design work); the working set is **`notes/mockups/shared-v1/design-system.md`** (renamed from `design-system-provisional.md`, which is now superseded). - **Six named brand colours:** NIGHT `#003B53`, BUSINESS `#027CA1`, FREEDOM `#93BCCD`, CONFIDENCE `#FFD457`, DAY `#D98D00`, LAW `#FFFAEB`. - **Montserrat is confirmed brand**, at the guide's weights. The live site's Black 900 headings are not brand; the maximum is ExtraBold 800 and H1 is Bold 700. - **The logo** is the wordmark with the swirl as the O, tagline "Strategic Legal Counsel for All". - **Brand gradients and the swirl are named brand elements** — the on-brand way to carry a screen with no photograph, which is exactly the hole the no-people-photography rule left. **Action required on work already drawn.** The Direction A artboard is built on `#004963`, which is **not a brand colour** — it is live-site drift. Swap it to NIGHT `#003B53` (356 occurrences in the current HTML), and clear the logo placeholder: `Equinox__Logo_SLCTag_B_RGB.png` on white (its tagline is the readable BUSINESS blue; the `SLCTag_RGB` variant's pale tagline fails contrast), the reverse lockup on dark, the swirl as favicon. Gold `#FFD457` was already correct. **One earlier verdict reversed.** Adi's "braver header colour" request was answered on the basis that brand blue and green were not brand. With the kit open, **`#027CA1` BUSINESS is a real brand blue** and `#93BCCD` FREEDOM is its light partner; green is still not in the system. The row in `.logs/planning/step1-execution.md` is re-answered in full. The guide's own rule is that the logo belongs on "white or bright brand gradient backgrounds", so a dark or saturated header is a declared departure using the reverse lockup, and the export notes must say so. **One conflict, resolved in the client's favour.** The 2022 guide makes people photography one of its five brand bricks and prescribes stock imagery of people. The client's 2026-08-27 instruction rules that out. The client's instruction is newer, specific to this build, and binding; the gradients and the swirl take over that job. Recorded in `notes/source/brand-kit/README.md` and in the design direction's photography policy. **Open questions the kit closed:** "Go boldly" (not "Go Boldy" — the live URL and email signature carry a typo); the tagline wording; whether a brand guide existed at all. **New asks for Rian:** - **Vector logo files (SVG/EPS/AI)** from Alicia Wimmer. Every kit logo is raster at about 3300px. Fine for a mockup, not for launch, and the mark must not be traced or redrawn. - **Which one or two team photographs** may be used, and where. The shoot is in hand; the selection is not made. None appears on the home page either way. - **The companion body face question.** The guide assigns Montserrat Regular to body; Montserrat is tiring across 513 migrated posts. Both directions ship brand-compliant Montserrat body, and Direction A's statement proposes a companion text face for long-form body only as a declared deviation. The client accepts or refuses it at the review. **Still outstanding from the previous entry:** the two Step 1 dates; the re-ask for examples of sites the client likes; the assessment name and the Fractional General Counsel go/no-go for the review call agenda. **Files touched:** `notes/source/brand-kit/README.md` (new), `notes/mockups/shared-v1/design-system.md` (rewritten, renamed), `.memory/brand-kit.md` (new), `.logs/planning/design-direction.md`, `.logs/planning/homepage-mockup-brief.md`, `.logs/planning/step1-execution.md`, `notes/mockups/shared-v1/directions-and-placeholders.md`, `notes/README.md`, `notes/source/README.md`. --- ## 2026-09-04 (section 9 merged) — Adi + Claude — the panel returns with a trophy Merged into `home-A-v1.html`: **the section 2 panel reused with a trophy badge**, eight criteria inside it, a 1:1 image on the right. Served, HTTP 200, 69,119 bytes; `h1=1 h2=11 h3=13`, div balance clean, greps clean, three badges on the page (two panels plus the section 8 head). **The page now has a rule, which is the real gain here.** A warm LAW panel with a dark corner badge means **the reader is being addressed directly**. Section 2 asks what is worrying them; section 9 asks whether this is them. Same device, different icon, different job. That is a system, and it is the opposite of the repetition problem in sections 7 and 8 — those repeat an *argument*, this repeats a *device* on purpose. **Implementation note:** the panel is the same CSS, with `.qpanel.tight` dropping the items from 21px to 17.5px, because there are eight of them and they sit beside an image rather than filling the column. **The trophy caveat stands and is recorded rather than re-argued.** Adi chose it knowing the risk: law firm sites are saturated with award badges, so a trophy here may read as *our accolades* before *your achievement*. The grounding is genuine — the section's own lead is addressed to owners "who have built a successful company" — and it is a judgement call the client's reaction will settle faster than we can. Swapping it for the rising line or the checklist is one SVG path if it lands wrong. **Sections still on the original scaffold: 10 (objection handling, which still shows a `[Section heading]` placeholder), 11 (assessment), 12 (final CTA).** --- ## 2026-09-04 (who it is for) — Adi + Claude — a test the reader runs on themselves New sheet: `notes/mockups/who-its-for-A-v1/who-its-for-A-v1.html`, served at `https://equinoxbusinesslaw.demoing.info/wp-content/mockups/who-its-for-A-v1.html` (HTTP 200, 40,563 bytes). Copy verbatim in all five; currency grep clean. **The observation the options are built on: this section does something no other section does.** Every other list on the page is a claim about the firm. This one is **a test the reader applies to themselves** — eight times checking whether they are the person being described. That changes what form serves it. **Adi's call after two exploratory rounds: reuse the "You may be wondering" pattern — the LAW panel with a badge on its corner — with a different icon, and an image on the right.** Layout is now identical on every board; the badge icon is the only variable. **Why repeating the panel is a system rather than repetition.** These are the only two places on the page that address the reader directly: one asks what is worrying them, the other asks whether this is them. Same device, different icon. The page gains a rule — **a warm panel means the reader is being spoken to** — which is the opposite of the problem in sections 7 and 8, where what repeats is an *argument*, not a device. | # | Badge | Note | |---|---|---| | 1 | A rising line — growth | The only icon that repeats the section's own word, *growing* | | 2 | A target — fit | Clear and slightly generic; the stock icon for "audience" | | 3 | A checklist — the test | Closest in meaning to the content, and closest in *form* to the bulb it replaces, so the two panels stay siblings | | 4 | A person — who | Permitted (the client's rule bars photographs of people, not drawings), but worth checking if people are sensitive on this site | | 5 | **A trophy** — Adi's suggestion | Grounded: the lead says this is for owners *who have built a successful company*, and flattery is what the copy is doing. **But law firm sites are full of award badges**, so here a trophy is likely read as *our accolades* before *your achievement* — and then the panel stops being about the reader | **The honest read on the trophy:** the instinct is right about the content — the section *is* flattering the reader's success. The risk is contextual rather than conceptual: on a law firm's page, that specific icon has an established competing meaning. Options 1 and 3 make the same point with no competing reading. **The revenue threshold stays a labelled placeholder in every option and must.** The brief bars figures of any kind and names this one explicitly; AISV's own documents disagree on the number. It is drawn prominently rather than hidden so the decision is visible to whoever makes it — option 5 puts it where nobody can miss it. **Option 2 is worth noting as a system decision, not a section one.** It settles that the check-box affordance is not banned on this page, only misapplied earlier: it is wrong where the content is not answerable and right where it is. That distinction is reusable. --- ## 2026-09-04 (section 8 merged) — Adi + Claude — seven pairs, with the movement drawn Merged into `home-A-v1.html`: **seven aligned rows with an arrow in the gutter**, the client's logo at 50px heading the "with" column, an **evenly dashed ring** heading the "without". Served, HTTP 200, 69,834 bytes; `h1=1 h2=11 h3=13`, div balance clean, greps clean. **Three reasons this build, recorded so they are not undone later:** - **Rows, not columns.** The two lists are seven pairs in order — every "without" line has its answer at the same position. A conventional two-column before-and-after discards that and leaves the reader to work it out; aligning the rows costs nothing and makes the comparison readable. - **The arrow, because the heading is a movement.** *Move from* uncertainty *to* confidence — this is the only arrangement where the section's shape and its title say the same thing. - **Even dashes, not a single gap.** A ring with one gap reads as a loading spinner at 46px; three of the five options proofed had that problem and it only appeared once rendered. Uniform dashes are a border idiom, not a progress one. **The logo earns its position**: putting the client's real mark at the head of the "with" column stops the comparison being generic good-versus-bad and makes it with-them-versus-without. It is their own file, never a redraw — the rule that ended the hero experiment. **Another heading-outline regression caught by the h3 count**, the second time in this session: rebuilding the section turned the two column titles from `

` into spans and the page dropped 13 to 11. Restored. **Worth treating as a standing check** — every time a section is rebuilt, compare the heading counts before and after, because the outline breaks silently. --- ## 2026-09-04 (uncertainty to confidence) — Adi + Claude — the two lists are seven pairs New sheet: `notes/mockups/uncertainty-to-confidence-A-v1/uncertainty-to-confidence-A-v1.html`, served at `https://equinoxbusinesslaw.demoing.info/wp-content/mockups/uncertainty-to-confidence-A-v1.html` (HTTP 200, 35,561 bytes). Copy verbatim in all five. **The finding, checked pair by pair before drawing anything: the two columns are not two lists — they are seven pairs, in order.** Every "without" line has its answer at the same position on the other side: | Without | With | |---|---| | Legal issues are handled only when they become urgent | Legal risks are identified earlier | | Contracts are signed without enough review | Contracts and policies support the business | | Employment documents may be missing or outdated | Important documentation is organized and current | | Leadership avoids calling a lawyer because of cost concerns | Leadership has a trusted legal resource | | Legal fees are unpredictable | Legal costs are easier to predict | | Risks go unnoticed until something happens | Decisions are made with greater confidence | | The owner feels exposed and unsupported | The owner feels supported and protected | **The conventional before-and-after layout throws that away.** Two free-flowing columns leave the reader to work out which line answers which, and most will not. That is option 1, kept as the control. | # | Treatment | Note | |---|---|---| | 1 | Two columns, unaligned | The conventional build. Discards the pairing | | 2 | Aligned rows | Nothing added — the rows simply line up, and the comparison becomes readable | | 3 | Rows with an arrow in the gutter | Each pair reads as a transition. **The only option whose shape says what the heading says** — *move from* uncertainty *to* confidence | | 4 | Two tonal bands | Pairing lost, but the *feeling* of the change is strongest; you move out of one ground into another. Costs the most height | | 5 | The past struck through | One column, the "without" small and struck above each "with". Most opinionated — **check it does not read as mocking the reader**; these are their circumstances, not their mistakes | **Round 2 (Adi, 2026-09-04): arrow rows settled; marks added above the column heads.** The rows are now identical on every board and the variable is the mark. The right-hand mark is **the client's own logo file, never a redraw** — the rule that ended the hero experiment applies here too. **Why the logo earns its place there:** putting the real mark at the head of the "with" column does something the words cannot. It makes the right-hand side *theirs*, so the comparison stops being generic good-versus-bad and becomes with-them-versus-without. | # | Left mark | Right mark | Note | |---|---|---|---| | 1 | Labelled placeholder | Wordmark + tagline lockup | What Adi asked for. The lockup carries the tagline, so the column head states the offer as well as the name | | 2 | Muted circle | The swirl alone | Two states of one thing; quieter, keeps the heads as labels rather than a masthead | | 3 | Nothing | Wordmark + tagline | **The asymmetry is the argument** — the section is about Equinox, not a rival, and an emblem for the "without" state gives it a status it should not have. Also the only option with nothing left to decide | | 4 | Placeholder in a frame | Logo in a matching frame | Even-handed and the most corporate; watch that a box around the client's logo does not read as a badge | | 5 | Greyed swirl | The swirl | Elegant, and **it needs the client's blessing**: greying their own mark to represent absence is a use no brand guide anticipates and some brands would refuse outright | **Round 4 (Adi, 2026-09-04): the unclosed ring chosen, proofed five ways** — dashed (provisional), one gap (nearly there), fading (running out), ghost (barely present), displaced (out of place). Layout and the logo are identical on every board. **A problem visible only once rendered, and it affects three of the five.** At 46px, a ring with a gap in it is the universal loading-spinner idiom. Options 2, 3 and 5 all read as *loading* before they read as *incomplete* — 5 most of all, because a displaced arc looks like a spinner mid-rotation. On a web page that is a costly misread: a visitor waits for it to finish instead of understanding it. **The two that escape it:** the **evenly dashed** ring (1), because uniform dashes are a border idiom rather than a progress one, and the **ghost** ring (4), because nothing is missing — it is simply faint. 4 has its own version of the problem: a complete pale ring can read as a disabled or unloaded element. **So the honest ranking is 1, then 4.** Adi's original pick survives the test, and it survives it for a reason the sheet could not show until it was drawn. **Round 3 (Adi, 2026-09-04): logo enlarged to 50px, and the left-hand mark proofed.** The wrapper's min-height rose with it so both column heads reserve the same space and the two labels stay on one line. Layout and right-hand mark are now fixed on every board; the variable is what stands opposite the logo. **The constraints on that slot are real and they narrow it hard.** It represents the state a visitor is in now, so: **no competitor may be implied** — a law firm pointing at a rival by symbol is a needless risk; **no people**, per the client's 2026-08-27 instruction; and it must carry **no more weight than the logo opposite**, or the section starts arguing for the wrong side. | # | Left mark | Note | |---|---|---| | 1 | Nothing | The asymmetry is the argument. Nothing to decide, license, or misread | | 2 | A muted disc | Balances the head without meaning anything — safest and emptiest | | 3 | **Rings apart** | Uses the client's own idea: the guide calls the swirl "day and night becoming one together", so alignment is the concept and *without* is alignment not yet happened. Three plain circles — not a reproduction of the mark | | 4 | **An unclosed ring** | Says *partial* rather than *absent*, which is closer to the truth: these visitors have some legal support, just not proactive support. Reads better at small size than three rings | | 5 | A non-people photograph | Permitted today. But it would be the page's fifth image, and a photograph at 50px is a texture, not a subject | **3 and 4 are the two that mean something rather than merely occupy the slot**, and both are derived from the brand's own concept rather than a borrowed visual language. The mark itself still only ever appears as the client's file, on the right. **It also has to look unlike section 7, which now precedes it** and shares five near-identical statements. Section 7 is one column on the hero gradient with an image; none of these repeat that. --- ## 2026-09-04 (section 7 merged, final) — Adi + Claude — one column with an image on the side Merged into `home-A-v1.html`: **one column of eight statements with BUSINESS ticks, a 1:1 image on the right, on the hero's gradient ground**, closing line beneath. Served, HTTP 200; `h1=1 h2=11 h3=13`, div balance clean. **Three decisions carried into the page with their reasons:** - **One column, not two.** Two columns made the eye zig-zag, which is the wrong motion for statements meant to accumulate. The track is wide enough that the longest statement (70 characters) never wraps. - **The gradient ground stays.** Five of these eight statements have a near-twin in section 8, the copy is not ours to change, so the separation comes from the ground: section 7 on the hero's gradient, section 8 on white. - **Row rules dropped to 10% NIGHT** rather than the flat grey used elsewhere, because a neutral hairline goes muddy on a blue gradient. **Worth a look when Adi is next on:** this is now the **fourth image slot** on the page (hero, section 3, section 4, section 7), and the third of those is a square. The page is developing an image rhythm that nobody has decided on — worth checking whether four is right before the remaining sections are built, since sections 8 to 12 are still on the original scaffold and could easily add more. --- ## 2026-09-04 (transformation, one column) — Adi + Claude — the eye reads down, and the side gets a job Adi: the two-column list made the eye zig-zag — left, right, down, left — which is the wrong motion for statements meant to accumulate. `transformation-A-v1.html` re-cut as **one column, one statement per line**, in a track wide enough that the longest (70 characters, about 670px at this size) never wraps. The variable is now what occupies the space that frees up on the right. Served, HTTP 200, 42,880 bytes. | # | On the side | Note | |---|---|---| | 1 | Nothing | The control and a real candidate. The page has no other quiet moment and this is the section about relief. Everything else has to earn that space | | 2 | An image | The section finally has an easy subject — but it would be the fourth image on the page | | 3 | The closing line as a NIGHT card with the CTA | Turns a summary into a destination: statements accumulate down the left and resolve into an offer. Reuses the device that holds the way out in the Stakes section | | 4 | The important statement, pulled out | AISV flag the last line as the important one; it leaves the column and sits at display size. **Nothing is edited — one line is moved.** The section becomes seven pieces of evidence for one claim | | 5 | The heading | The list becomes the section's spine and the heading a caption to it. The only option that puts no new object on the right | **The mark is held constant and is still open.** Every board uses the single BUSINESS tick so only the side varies. Whether it stays a tick, becomes the eight subject icons, the swirl or nothing is a separate decision from the previous round — and better made after this one, because **a single column changes how much work the mark has to do**: in one column the rhythm of the rows already separates the items, so the mark carries less than it did across two. --- ## 2026-09-04 (transformation, icons) — Adi + Claude — the gold marker off, a mark on `transformation-A-v1.html` re-cut: same copy, same two-column layout as the version merged into `home-A-v1.html`, with the gold highlight removed. Only the mark beside each statement varies. Served, HTTP 200, 39,879 bytes. | # | Mark | Note | |---|---|---| | 1 | None | The control. If this reads well enough, every mark below is decoration — worth establishing before adding one | | 2 | A single BUSINESS tick | The honest mark: these are things that are now true. One shape used eight times, costs nothing from the icon budget | | 3 | Tick in a NIGHT disc | Turns the mark into an object rather than a notation. Watch that eight dark discs are not the loudest thing in the section | | 4 | Eight subject icons | The only option where the mark carries meaning — the eye finds *the cost one* without reading. **Spends most of the icon budget** | | 5 | The client's own swirl as the bullet | Their actual file at 18px, not a redraw. Ties the section to the identity rather than a generic set | **What removing the highlight costs, stated because it is a real loss.** The marker tied this section to the questions panel: same device, questions marked, answers marked — that is what made it read as their answer without a word being added. An icon breaks that link and makes a different claim: a tick says *done*, a subject icon says *this is the thing*. Whichever wins, the page loses a connection, and it is worth choosing knowing that rather than discovering it later. **Icons and the two directions.** `shared-v1/design-system.md` assigns icons to **Direction B** (Kadence set, inline SVG, at most eleven, monochrome). Direction A already carries the bulb on the questions panel. **Option 4's set of eight would spend most of that budget and pull a B device into A**, narrowing the contrast the mockup round exists to show Rian. Options 2, 3 and 5 use a single repeated mark and cost nothing from it. All icons here are hand-drawn inline SVG within the palette, replaceable by the Kadence set without redrawing anything. **Option 5 respects the rule that ended the hero experiment:** the swirl appears as the client's own file, never a reconstruction, at any size. --- ## 2026-09-04 (section 7 merged) — Adi + Claude — follow the copy in A, park the suggestion for B **Adi's ruling: the copy is not ours to change, so Direction A follows it exactly and styles it as well as it can — even where the result is imperfect. Structural suggestions go to Direction B, later.** That is the right split: a built page shows the problem better than an argument does, and AISV can then see the overlap in situ rather than in a memo. Merged into `home-A-v1.html`: **the hero's gradient returns as the ground for section 7**, with the eight statements in two columns and the gold marker on each gist. Served, HTTP 200, 65,380 bytes; `h1=1 h2=11 h3=13`, greps clean. **Ground, not structure, is what separates 7 from 8.** Five of section 7's eight statements have a near-twin in section 8's "With Equinox" column and the words cannot move, so the differentiation has to come from somewhere else. Section 7 takes the gradient used once at the top of the page and not since; section 8 stays on white. The page opens on that ground with the promise and lands on it with the promise kept — a device the page already owns, spent deliberately. **The gold marker is doing quiet double duty.** It is the same device the questions panel uses, so the section reads as their answer without a word being added to say so. ### Parked for Direction B — do not lose 1. **Sections 7 and 8 make the same argument.** Five of eight statements duplicate the after column. Either 7 is the emotional version and 8 the operational one and they should be written to differ, or one is redundant. **Show AISV the built page**, not the analysis. 2. **The page raises seven worries and resolves six.** "What happens if a client does not pay?" has no answer in the transformation list. Either the answer is missing or the question is. 3. Structural options already drawn and costed in `transformation-A-v1.html`: air, one-line-and-the-rest, continuous prose, a status board. Any of them is a B candidate if the copy ever opens up. --- ## 2026-09-04 (the transformation) — Adi + Claude — and a finding about the page's shape New sheet: `notes/mockups/transformation-A-v1/transformation-A-v1.html`, served at `https://equinoxbusinesslaw.demoing.info/wp-content/mockups/transformation-A-v1.html` (HTTP 200, 37,461 bytes). Copy verbatim; the variable is how the eight statements are set. ### The finding, checked line by line before designing to it **This section is the answer sheet to the "You may be wondering" panel near the top of the page.** Six of the seven questions get a direct answer here, in the same order, in AISV's own copy: | Question (section 2) | Answer (section 7) | |---|---| | Are our employment documents current and complete? | Your employment documents are organized and current. | | Are our client contracts protecting us? | Your contracts clearly define expectations and protect your interests. | | Are our terms and conditions strong enough? | Your terms and conditions are in place. | | Are we prepared for AI, privacy, or cybersecurity risks? | Your AI, privacy, and cybersecurity concerns are being addressed. | | Who do we call when a legal question comes up? | Your leadership team knows where to turn when legal questions arise. | | How much will it cost just to get an answer? | You understand what your legal support will cost. | **One question goes unanswered: "What happens if a client does not pay?"** Two statements arrive without a question, including the one the copy itself calls the important one — *you no longer feel alone*. **Worth telling AISV**, because it is their copy and their structure: the page raises seven worries and resolves six, and the gap is the money one. Either the answer is missing or the question is. ### The repetition is partly in the copy, not only the design Adi's read: "we need to invest something new here... it is repeating." Checking why turned up a second finding. **Five of section 7's eight statements have a near-twin in section 8's "With Equinox" column:** | Section 7 | Section 8, after column | |---|---| | Your employment documents are organized and current | Important documentation is organized and current | | You understand what your legal support will cost | Legal costs are easier to predict | | Your leadership team knows where to turn | Leadership has a trusted legal resource | | Most importantly, you no longer feel alone | The owner feels supported and protected | | Your contracts clearly define expectations | Contracts and policies support the business | **Two consecutive sections make the same argument.** No amount of styling fixes that. For AISV: 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 already done. Both are in the brand story's 13-element structure, so it is a structural question about their own outline. ### The five treatments — none of them a list variation Everything on the page so far is a panel, a stacked list, or an image beside a column. Each option uses a device the page has **not** used, because the section that has to feel like relief cannot be built the same way as the sections that build tension. | # | Device | Note | |---|---|---| | 1 | **Air** | Mostly empty, centred, generously spaced. Every section before this is dense; this is the first that is not, and the copy is about no longer being under pressure | | 2 | **The hero gradient returns** | Full-bleed on the ground used once at the top and not since. The page opens on it with the promise and lands on it with the promise kept | | 3 | **One line, and the rest** | The statement AISV flag as most important at display size, the other seven as a quiet column. One claim with seven pieces of evidence, not eight equal claims | | 4 | **One continuous sentence** | The eight run together as prose. Words untouched; only the punctuation of the layout changes. A list invites checking off; a paragraph invites recognising your own business | | 5 | **A board of what is in place** | Eight cells on a hairline grid — a status board rather than a list. The only grid on the page | **The design question is not "how do we list eight good things".** It is whether this section should *visibly* answer the panel above it. Options 1 and 4 say yes without adding a word; the rest treat the section on its own terms. --- ## 2026-09-04 (section 6 merged) — Adi + Claude — the Plan section, step one carrying the CTA Merged into `home-A-v1.html`: **2:3 portrait left, three steps right, step one on a LAW panel carrying the assessment button**, and the section closing on "Book a Consultation" alone. Served, HTTP 200, 66,883 bytes; `h1=1 h2=11 h3=13`, div balance clean, drift/pricing/social greps clean. **Why this one works, recorded because it is the argument rather than the styling.** Steps two and three are not possible without step one, so step one is an *action* and the others are descriptions of what follows. Putting the assessment button inside step one says that; three equal rows with a shared CTA pair at the bottom said the opposite. **A side effect worth noticing: the two asks are now at different levels.** The assessment sits inside step one, the consultation closes the section. Previously they were a matched pair competing at the same weight. This is the first place on the page where the transitional and direct CTAs are visibly ranked rather than offered side by side — which is closer to how AISV's funnel actually works, and worth mentioning to them. **The 2:3 portrait runs taller than the three steps**, per Adi's instruction that it need not balance. The text column is centred rather than top-aligned so the difference reads as intentional. **If that gap ever needs closing the lever is the column ratio, not the image ratio** — the portrait is the decided element. **CTA count on the page is now four before the Transformation section** (hero pair, section 2's "Find Out Where Your Business Is Exposed", section 3's assessment button, section 6's pair-at-different-levels), and three of those point at the assessment. Still a funnel question for AISV, now with one more instance. --- ## 2026-09-04 (section 5 merged, and the steps sheet) — Adi + Claude ### Section 5 merged into the home page Chosen and built: **eyebrow + credential bar + locator band + the four-row accordion**. Served, HTTP 200, 65,775 bytes; `h1=1 h2=11 h3=13`, div balance clean, 24 items in the DOM. **A heading-outline regression caught and fixed.** Moving the four service groups into `` turned them from `

` into spans and the page's h3 count dropped 13 to 9. `` may legally contain one heading element, so they are `

` again — the outline is structure that search and AI answer engines read, and the mockup brief's pre-flight checks it. Worth remembering whenever content moves into a new wrapper. Two build requirements are now written into `.logs/planning/build-plan.md` rather than left in a handoff: **the team count is generated, never typed** (the team post type `bw-ai-schema-pro` already requires makes it a query), and **the accordion must render its panels server-side**. ### New sheet: the three steps `notes/mockups/steps-home-A-v1/steps-home-A-v1.html`, served at `https://equinoxbusinesslaw.demoing.info/wp-content/mockups/steps-home-A-v1.html` (HTTP 200, 32,253 bytes). Copy verbatim; the variable is where the image sits. **Placement is not a stylistic choice in this section, and that shapes the five.** Three numbered steps are a *sequence*, and a sequence has a direction — an image on the left is read **before** the steps and sets the process up; on the right it is read **after** and rewards finishing; in the middle it interrupts them. | # | Placement | What it does | |---|---|---| | 1 | Image left | Sets the process up. Tidiest — numbers stack in one column. Makes a **third** consecutive image-left section | | 2 | Image right | Reads as the outcome of the three steps; suits a section ending on "Protect and Grow", and breaks the left-image run | | 3 | Between steps two and three | Gives the section a breath, but **breaking a sequence in half is the one thing a sequence should not do** | | 4 | Spanning above, steps in a row | Shortest section by a distance; the trade is that side-by-side steps read as options rather than a sequence | | 5 | Beside step one only | The only option where the picture has a defined job — it shows what *the assessment* is, which is also the step carrying the transitional CTA | **Round 2 (Adi, 2026-09-04): image-left chosen, and step one tested as the load-bearing step.** Ten boards now. **1–5** hold the chosen layout and vary only how hard step one is emphasised; **6–10** break it out structurally. Adi's argument, which is the right one: steps two and three are impossible without step one and close to useless without it — the assessment is the door, the plan and the ongoing work are what happens after you walk through it. **Three equal numbered rows say the opposite**, that these are three comparable things. So the question is not whether to emphasise step one but how far, and what is lost when a sequence stops looking like a sequence. | # | Emphasis | Note | |---|---|---| | 1 | Equal steps | The control — makes the claim Adi disagrees with | | 2 | Filled numeral | Lightest possible: nothing moves, nothing is added, sequence intact. If this is enough the rest are unnecessary | | 3 | Step one on a LAW panel | Says "this one is different" without saying anything about the other two | | 4 | Two and three quietened | Emphasis by removal — the move that worked on the questions panel. Risk: makes later steps look optional rather than subsequent | | 5 | **Step one carries the CTA** | **Adi's pick (2026-09-04), image now 2:3 portrait.** Turns step one from a description into an action; the section then ends on one CTA rather than the pair | | 6 | Step one beside the image | The picture illustrates *the assessment* rather than the section | | 7 | Step one as a NIGHT card | Most emphatic — a dark card is a different kind of object, not a heavier version of the same one. Uses the page's existing device: the NIGHT box above holds the way out, this one holds the way in | | 8 | One full width, two and three paired | Says one comes first and the other two follow together — closer to how the process actually works than a 1-2-3 ladder | | 9 | Step one labelled | A word does what styling has to imply | | 10 | Step one as the section's subject | The furthest this can be pushed — **judge whether it still reads as three steps** | **Board 5 updated to a 2:3 portrait (Adi, 2026-09-04).** At the current column split the image runs noticeably taller than the three steps beside it. Adi's instruction was that it does not need to balance, so the columns were left as they are; the text column is centred rather than top-aligned so the height difference reads as intentional instead of leaving a void under the steps. If the imbalance ever needs closing, the lever is the column ratio, not the image ratio. **Two boards carry a drafted label ("Start here") and both are tagged on the page.** Adi asked whether copy could mark the difference; it can, but those words are a **suggestion for AISV, not a decision** — the brand story writes no such label and content is their lane. Tagged so a mockup is never mistaken for an approval. **Worth settling before choosing: what the picture is for.** Unlike the hero, this section has no obvious subject — the steps are a process, not a person or a place. If the image is decoration, option 1 wastes the least on it; if it is meant to make the process concrete, option 5 is the only one that ties it to something specific. --- ## 2026-09-04 (experience + states) — Adi + Claude — eyebrow and credential bar combined, five ways to show the states Adi liked the eyebrow (option 1) and the credential bar (option 3) and asked for both, plus a "legal map" showing the states in brand colour. Both are now on every board; the variable is how the states are shown. Served, HTTP 200, 45,586 bytes. | # | States shown as | Note | |---|---|---| | 1 | Text | The control. Nothing to draw, nothing to keep accurate. Everything else must beat this | | 2 | Three silhouettes in the bar, 48px | Shape recognition beats reading three names, and the section gains no height | | 3 | WA / OR / CO chips in the brand blues | Visual, with no cartography to get wrong and nothing to replace later | | 4 | A locator band beneath the bar | The version Adi described — drawn as a labelled slot beside the schematic shapes, because it needs a real vector asset | | 5 | Silhouettes at 104px on their own band | Reads as geography without claiming to be a map of the country | **Two constraints were surfaced rather than designed around, because both are real.** **The states cannot yet be labelled a licensing claim.** The live Legal Health Check disclaimer names *Washington, Idaho and Oregon*; the client's 2026-08-27 decision names *Washington, Oregon and Colorado*. Four states, two sets, and the standing rule in `agents.md` is that no "licensed to practise in" wording is written until Michelle Bomberger resolves it. **A map asserts that claim harder than a sentence does**, so every board is captioned **service area, not licensure**, with a draft tag naming who answers. **The maps are schematic, not cartographic.** Simplified silhouettes drawn to read at 48–104px — Colorado genuinely is a rectangle, the other two are not this tidy. A real vector map is a launch dependency and the caption says so on the page rather than only here. **On the nine — Adi's concern, and the right one.** A headcount goes stale the moment someone joins or leaves. **In the build it must be generated, not typed:** if the team is a custom post type — which `bw-ai-schema-pro` already requires for Person schema — the number is a query and is never wrong again. The board carries the tag *"generate this, do not type it"* so the instruction survives into the build. Any phrase describing what those nine *are* remains AISV's copy. --- ## 2026-09-04 (the experience claim) — Adi + Claude — five UI treatments for "21 years" The accordion is settled and held constant on every board (four native `
` rows, descriptions visible when closed, first row open). **How many rows open by default is parked** — Adi's call, to be decided after this. The only variable here is how the firm's experience is stated. Served, HTTP 200, 40,272 bytes. **Adi's argument for the accordion, worth recording because it is the reason to keep it:** if a group is not relevant to a visitor they never click, so nothing is hidden from them that they wanted — and the page keeps its length. The trade is fair against a long scroll, given the alternative was 24 stacked rows that nobody reads in full either. | # | Treatment | Read | |---|---|---| | 1 | Eyebrow above the heading | Most restrained. Experience as *context* for what follows, ~30px, never competes. The one that survives the number being wrong | | 2 | Numeral as display type | Large figure on the warm ground. Unmissable; the risk is that a big bare number is the most generic move a professional-services site can make | | 3 | **Credential bar** | Three facts across one band — the years, the three states, the nine people. **Specificity is what reads as professional**: anyone can claim years; a firm naming its states and headcount is describing itself rather than advertising | | 4 | Built on the date | "Since 2005" — says the same thing and never needs editing. Lands softer because the reader does the subtraction | | 5 | A seal | The classic credential device, echoing the brand's circular mark. Also the one most likely to read as a badge bought off a shelf | **Which strings are sourced:** the three states are the client's decision of 2026-08-27; the nine is the agreed roster (8 live bios plus Nicole Farahdel), though any phrase describing what those nine *are* is a draft and is tagged as such on the board. **The 21 is not confirmed** — 2004, 2005 and 2009 all appear on the client's own site, and `foundingDate` stays empty until Michelle settles it. **A count expires; a date does not.** The client has just retired their 20th-anniversary logo for exactly that reason, so "21 years" needs editing every April while "Since 2005" never does. Option 4 exists to put that trade on the table rather than in a footnote. Every treatment is drawn so the number can be swapped for a date without a redraw. --- ## 2026-09-04 (services as an accordion) — Adi + Claude — four rows, and one build requirement the research changed Adi called it: **four accordion rows**. Independent web research agreed — an expand/collapse accordion is the pattern named first for exactly this problem in the law-firm-specific literature, alongside multi-column grids, tabs, sector grouping and jump links. `experienced-and-services-A-v1.html` re-cut as five accordion variants. Served, HTTP 200, 37,311 bytes; 20 `
` elements, all 120 item spans present in the DOM. **The research changed HOW to build it, and this is the part that matters for this project.** Google indexes accordion content **provided it is in the HTML on page load** — not injected by JavaScript on click — and practitioners consistently observe it carries less weight than visible copy. AI answer engines see only what is in the served HTML at all. Since AI search visibility is the point of this rebuild, that makes the build method a requirement, not a preference: > **Every variant is native `
`/`` markup with no JavaScript.** All 24 items sit in the > DOM whether a row is open or shut. An accordion built the usual way — content fetched or injected on > expand — would quietly cost the thing the site is being rebuilt for. **Carry this into the Kadence > build**: check whatever accordion block is used renders its panels server-side. **The five differ in one thing: what a closed row says.** | # | Closed state | Trade | |---|---|---| | 1 | Descriptions visible, first row open | Shows what expanding does; without an open row an accordion can read as a list of links | | 2 | Descriptions visible, all closed | ~300px and still says four propositions | | 3 | Headings only | ~200px, and a visitor who does not click learns only that four categories exist | | 4 | Descriptions visible, open rows in two columns | Keeps the section short when two or three rows are open, which is what actually happens | | 5 | All rows open, collapse to dismiss | Nothing hidden from reader or crawler; gives back most of the height the accordion was for | **The real question the sheet asks:** most visitors will never open anything, so how much should the section say fully collapsed? Option 3 is the compact answer, option 2 the informative one. **A CSS bug fixed in passing:** `calc()` cannot take an `fr` unit, so the open items were falling back to the left edge instead of aligning under the description column. The body now repeats the summary's grid. **Sources consulted:** PaperStreet's practice-area pattern survey; Search Engine Roundtable and Varn on Google indexing accordion and tab content; Arc Intermedia on collapsible content and AEO/GEO; UXPin, LogRocket and IxDF on progressive disclosure. --- ## 2026-09-04 (experience and services) — Adi + Claude — 24 items without the overwhelm, and the 21 years problem New sheet: `notes/mockups/experienced-and-services-A-v1/experienced-and-services-A-v1.html`, served at `https://equinoxbusinesslaw.demoing.info/wp-content/mockups/experienced-and-services-A-v1.html` (HTTP 200, 34,013 bytes). Service copy verbatim — four groups, their descriptions and all 24 items. **The problem, stated so the options can be judged against it:** 24 items in four groups stacked as seven-row lists runs well past a fold, and nobody reads 24 things. Cutting items is not available — they are the actual services and they are what people search for. So every option keeps all 24 visible and works on arrangement and hierarchy instead. | # | Treatment | The move | |---|---|---| | 1 | Four columns, shallow | All four groups side by side; the section becomes wide and short. Four columns of six or seven — the depth a single group had before | | 2 | Two columns, items paired | The 2x2 kept, each group's items in two sub-columns. Cheapest change: nothing moves but the lists folding in half | | 3 | Items as a run | Seven rows become two lines of middot-separated items. Most compact by a distance; the risk is turning 24 findable things into a paragraph nobody parses | | 4 | Hierarchy, not arrangement | Same grid, same height — items drop in size and weight so the group names are what the eye lands on. **Tests whether the overwhelm is about height at all, or about everything having the same voice** | | 5 | Four columns + "Since 2005" | Option 1 with the durable form of the claim, so the two forms compare directly | **Nothing is hidden behind a click, deliberately.** An accordion would fix the height in one line and is the wrong answer: these items are what people and AI answer engines search for, and content behind an interaction may not be read by a machine. Height is the cheaper price. **The 21 years is on every board and it is NOT confirmed.** Recorded again because it is now being designed around: the client's own site gives **three** founding years — 2004 on `/about-us/`, 2005 in Michelle's bio, 2009 for the Equinox rebrand — and `.memory/naming-conflicts.md` holds `foundingDate` empty until she settles it. Two further problems: **a count expires** (the client has just retired their 20th-anniversary logo for exactly that reason, so "21 years" needs editing every April while "Since 2005" does not), and **any wording around it is new copy**, which is AISV's. The element is drawn with a dashed gold edge on every board to keep that visible, and option 5 shows the durable form so the trade is seen rather than argued. --- ## 2026-09-04 (section 4 merged) — Adi + Claude — the Guide section lands, with a standfirst Chosen and merged into `home-A-v1.html`: **55/45, 1:1 image on the left, opening paragraph at 23px** — about 1.28x the 18px body, so it sits between the heading and the body rather than at the top of it. Button reads "Our Team →". Served, HTTP 200, 60,849 bytes; `h1=1 h2=11 h3=13`, greps clean. **A page-level rhythm question this creates, worth Adi's eye rather than a silent fix.** Section 3 leads with an image on the left, and section 4 now does the same. Two consecutive image-left sections build a column down the left side of the page. That either reads as rhythm or as repetition — it was exactly the question option 4 of the first team-intro round was built to test, and the layout chosen since happens to land on the same side. Flipping section 4 to image-right is a one-line change if it reads as repetition. **The standfirst is now a page-wide pattern, not a section decision.** The brand story opens several sections with a summary sentence followed by detail, so `.lead` at 23px/1.5 should be applied to those too rather than left as a one-off here. Sections 5, 7 and 9 are the candidates. Not applied yet — worth doing in one pass so the page stays consistent. **Still blocked on the client:** the slot says *1:1, workplace or office — permitted today*, and notes that a team photograph here needs their nod. This remains the one image on the page that could be filled without an exception. --- ## 2026-09-04 (team intro, lead paragraph) — Adi + Claude — 55/45 chosen; five lead sizes tested **55/45 with a 1:1 image is the chosen layout.** `home-team-intro.html` now holds that layout fixed and varies one thing: how much larger the opening paragraph should be. Served, HTTP 200, 26,961 bytes. Body is 18px, so each option is a step on that ladder: | # | Lead | Ratio to body | Read | |---|---|---|---| | 1 | 20px | 1.1x | A nudge. The eye starts on the right line without the paragraph announcing itself | | 2 | 21.5px | 1.2x | A clear lead — close to the ratio most editorial systems use for a standfirst | | 3 | 23px | 1.28x | Sits between the heading and the body rather than at the top of the body. Watch the step down to paragraph two | | 4 | 25px | 1.4x | Close to the hero's supporting line; takes four lines in a 560px column and starts competing with the heading | | 5 | 21.5px at **Light 300** | 1.2x, lighter | Tests whether the lead can be made by **weight** instead of size | **Option 5 is the one with a consequence beyond this section.** The headings on this page already work by weight — thin is the setup, bold is the payload. If a Light 300 lead reads as well as a larger Regular one, **the page gains one system instead of two**: weight carries hierarchy everywhere, and size is reserved for structural levels. That would be worth applying to the other lead paragraphs Adi mentioned rather than setting a second scale of paragraph sizes. Whatever wins here becomes a reusable pattern: the brand story opens several sections with a summary sentence followed by detail, so this is a page-wide decision wearing a section-sized disguise. --- ## 2026-09-04 (team intro) — Adi + Claude — five treatments of the Guide section, now routing to the team page New sheet: `notes/mockups/home-team-intro/home-team-intro.html`, served at `https://equinoxbusinesslaw.demoing.info/wp-content/mockups/home-team-intro.html` (HTTP 200, 27,270 bytes). Copy verbatim in all five — heading and the five paragraphs exactly as the brand story writes them. What varies is where the 16:9 image sits and how the button is presented. | # | Treatment | The idea | |---|---|---| | 1 | Copy left, image right | Closest to what is on the page today; the image aligns to the heading rather than floating mid-text | | 2 | Button on the image | A LAW card overlapping the image's corner — the same device as the closing block in section 3, so image and invitation are one object | | 3 | Image across the top | The full-width 16:9 is the ratio's natural home, copy in two columns beneath. **The only option that gives the section a different shape from the two two-column sections above it** | | 4 | Image left, copy right | Tests whether image-left twice in a row reads as rhythm or repetition, now that section 3 leads with an image on the left | | 5 | Image plus a NIGHT invitation box | The last paragraph travels with the button instead of ending the left column — it is the line that earns the click | **All images on this sheet moved to 1:1 (Adi, 2026-09-04), and it fixes the failure above.** A wide crop got wider without getting taller, so past about 60% the text became the tall element and left an empty field under the picture. **A square grows in both directions at once**: about 690px tall at 55% against roughly 640px of copy, and about 880px at 70% against 900px. The two columns now finish together at every share, so **the remaining question is the measure, not the balance** — 55 gives ~65 characters a line, 65 gives ~48, 70 gives ~42 and starts reading as a caption. **A CSS bug found by measuring the render rather than trusting the rule.** The squares were coming out 692x480. The base `.imgwrap` is the hero's and sets `height:clamp(260px, 40vh, 480px)`; the sheets overrode `aspect-ratio` and `width` but not `height`, and **`aspect-ratio` only governs the axis that is not otherwise set** — so the clamp kept winning and every "square" was a rectangle. Both this sheet and `problem-2-prevent-A-v1.html` now reset `height:auto` (and the 4:5 portrait option with it), so the prevention sheet's images were subtly wrong too and are fixed. **Lesson worth keeping: a shared base stylesheet means an override has to neutralise every property that competes, not just the one being changed.** **One thing to know before asking the client for a team photograph here:** a square crop of a group is a harder crop than a wide one. If a team image is the intent for this slot, that is an argument for revisiting the ratio in this section specifically. **Iteration (Adi, 2026-09-04): the image takes more than half the row.** The sheet is now five shares — **55 / 60 / 65 / 70**, plus 65 with the heading spanning the full width above the narrow column. **What the extreme actually shows, which is why it was worth building.** At 70/30 the image is roughly 900px wide and, at 16:9, about 500px tall — while five paragraphs in a 380px column run closer to 900px. **Past about 60% the image stops being the tall element and the text becomes it**, so giving the image more room makes the whole section *taller* and leaves a large empty field beneath the picture. The constraint is not the image's share; it is that this section carries five paragraphs. Option 5 is the mitigation: pulling the heading out of the narrow column buys back roughly two lines and keeps the thin/bold split on two lines rather than stacking it into four. **Practical read:** 55 holds a comfortable measure (~65 characters a line); 60 is about the last share where the copy still reads as prose; 65 is ~48 characters, below the comfortable range; 70 is a demonstration. **The button label is "Our Team", and that is deliberate rather than flat.** It is the exact label the target page already carries in `.logs/planning/site-architecture.md`, so nothing new is written. A warmer label would be better and is **AISV's to supply** — button copy is still copy. Flagged, not invented. **This is the one image slot on the page the client could fill today.** The section introduces the firm and points at the team, so a workplace or office photograph fits it naturally and is already permitted — the client's rule bars *people* on the home page, not imagery. Worth asking separately whether a single team photograph belongs here, since the client allows one or two site-wide and this is the most obvious place for one. **Option 3 carries a page-level argument, not just a section one.** By this point the page has run the hero, section 2 and section 3 as side-by-side compositions; a full-width band here changes the rhythm. Judge it against the page, not against options 1 and 4. --- ## 2026-09-04 (section 3 merged) — Adi + Claude — "Image runs the full column" lands on the home page Option 5 chosen and merged into `home-A-v1.html`. Served, HTTP 200, 60,351 bytes; `h1=1 h2=11 h3=13`, drift/pricing/social greps clean. **The section as built:** the image column stretches to whatever height the copy beside it takes; heading and lead sit to its right with the six incidents in two columns beneath. Then a separate band — LAW `#FFFAEB` — carries the turn and the diagnosis on the left and a **NIGHT `#003B53` box** on the right holding the way out and the CTA. **The hero H1 now uses the same thin/bold system (Adi, 2026-09-04):** "Grow Your Business" at Light 300, "Without Growing Your Legal Anxiety" at Bold 700. Two notes. It is a **declared departure from the brand guide**, which specifies H1 as Bold 700 throughout — the weights are both brand weights and the system is now consistent from the hero down, but it should be named as a deviation rather than presented as compliance. And it happens to break the line where the meaning breaks: the thin clause sits on line one, the bold promise on lines two and three, without any `max-width` doing the work. **Three decisions carried over with their reasons, so they are not re-litigated:** - **The stacking bold is scoped, not global.** `.h2.stack b { display:block }` applies to this heading only. Applied page-wide it would break *"How **Legally Healthy** Is Your Business?"* into three lines, because there the bold sits mid-sentence rather than trailing. - **The box is NIGHT, not BUSINESS.** White on NIGHT measures **11.8:1** against 4.72:1 on BUSINESS, so the type here carries no contrast floor — on the lighter blue the hope line could not have gone below 19px. NIGHT is also the page's structural dark, so the box belongs to the same system as the header wordmark and the final CTA band rather than introducing a third blue. - **The emphasis on the dark box is a gold underline, not the translucent marker** used on the questions panel: a yellow band over a dark ground goes muddy. Same device, adapted to its ground. **Ground rhythm now reads white (§2, with its cream questions panel) → `#FAFAFA` (§3) → LAW (the closer).** Section 3's upper half is grey rather than white so it separates from §2; the closer is the page's second warm moment, rhyming with the questions panel above it. **The CTA count is worth watching.** The home page now asks three times before the Plan section, and two of the three point at the assessment. That is a funnel question for AISV, not a design one, and it is recorded for `.logs/planning/tracking-conversion.md`. **Still blocked on the client:** the image slot says what it wants to hold — *person, thinking / concerned* — and the crop is set by the copy. The client's 2026-08-27 instruction bars people imagery on the home page from either source, so this needs their explicit exception before it can be filled. --- ## 2026-09-04 (problem to prevention, round 2) — Adi + Claude — "Image leads" chosen, five layouts inside it Adi chose **Image leads** and asked for an iteration exploring the direction rather than a decision. `problem-2-prevent-A-v1.html` re-cut: the image is on the left in all five; what varies is where the heading sits, how tall the image runs, how the incidents are distributed, and where the hope resolves. Served, HTTP 200, 28,861 bytes. Copy verbatim throughout. | # | Layout | The variable | |---|---|---| | 1 | Baseline, tightened | The chosen option, tuned. Heading and lead in the right column beside a square image | | 2 | Heading spans the page | Heading and lead full width at the top, so the heading fits **one line at 46px**; the image arrives as the second beat instead of competing for the first | | 3 | Tall image, one column | 4:5 portrait running taller than the text, incidents reading straight down. Most editorial; the image gets to be a portrait rather than a crop | | 4 | Hope bound to the image | No strip — the hope in a LAW card overlapping the image's lower-right corner, so the section resolves where the eye already is. Shortest, and leans hardest on the photograph | | 5 | Image runs the full column | The image stretches to whatever height the copy takes. Most committed reading of "image leads", **with a real dependency: the crop is decided by the copy**, so it needs a photograph that survives an unpredictable aspect ratio | **Round 3 (Adi, 2026-09-04): the hope line comes back to body size and ends on a button.** It had been raised to 26-29px to carry the lift; Adi's call is that the lift should come from the CTA, not the type. The line is now 19px with the gold marker still on "before they become emergencies", followed by a gold `btnA`. In option 4 the button sits inside the LAW card on the image, at a smaller size so the card does not outgrow the photograph. **The CTA label is not invented copy, but adding a CTA here is a structural decision worth naming.** The brand story's Stakes section carries no call to action — the label used is **"Take the Business Legal Health Assessment"**, the transitional CTA the brand story already defines, chosen because it is the one that actually answers "identify risks before they become emergencies". Two things follow for the page as a whole: the home page now asks three times before the Plan section (section 2's "Find Out Where Your Business Is Exposed", this one, and the hero pair), and **two of those three point at the assessment**. Worth checking against `.logs/planning/tracking-conversion.md` when the CTA events are specified, and worth a line to AISV, since CTA placement is a funnel decision as much as a design one. **Round 4 (Adi, 2026-09-04): option 5's closing block splits in two.** The turn and the diagnosis take the left; the way out sits on the right in a **BUSINESS `#027CA1` box** carrying the hope line and the button. The band behind it stays **white**, so the blue box is the only colour event — a cream strip under a blue box would have given the closing moment two grounds. Two details that are decisions rather than defaults: - **White on BUSINESS measures 4.72:1**, computed rather than assumed. That clears AA for normal text, but with almost no margin, so the hope line must not drop below 19px in this treatment. The Brand Kit README is more conservative ("passes at large sizes only"); the measured figure is the one to work from, and it is tight enough that the caution is fair. - **The gold marker becomes a gold underline on blue.** A translucent yellow band over `#027CA1` goes muddy, so on the blue box the emphasis is a 3px CONFIDENCE rule under the phrase instead. Same device, adapted to its ground rather than reused blindly. **Two answers to the same heading problem are now on the sheet.** Options 1, 3, 4 and 5 rely on the block-level bold (thin line / bold line); option 2 gives the heading the full page width so it fits on one line. Both are structural — neither depends on a `max-width` that happens to break well at one viewport. **A bug caught in the render:** `.stripband`, `.padsm` and `.hope.big` had been defined per-option in round 1 and were lost when the options block was replaced, so the closing LAW strip rendered white and the lift disappeared. They are shared overrides now, since four of five options use the strip. The photo constraint is unchanged and still the blocking question: this section wants **one person**, not a stock crowd, and only the client can grant that exception. --- ## 2026-09-04 (problem to prevention) — Adi + Claude — five treatments, and a photo request the client has to answer New sheet: `notes/mockups/problem-2-prevent-A-v1/problem-2-prevent-A-v1.html`, served at `https://equinoxbusinesslaw.demoing.info/wp-content/mockups/problem-2-prevent-A-v1.html` (HTTP 200, 29,370 bytes). Copy verbatim and identical in all five; heading size and break, image placement, and how far the section lifts at the end are what vary. **The orphaned "Repair" is fixed structurally, not by tuning a width.** The bold half of the heading is set as its own block, so it always reads *Legal Problems Are* / *Easier to Prevent Than Repair*. Nudging `max-width` until it happens to break well only holds at one viewport. **The thin/bold split turns out to be a line-break system as well as an emphasis one** — worth carrying to every long heading on the page. | # | Treatment | The idea | |---|---|---| | 1 | Image right, hope in gold | 46px heading, incidents in two columns, hope marked with the same gold marker as the questions panel so the page's warm moments rhyme | | 2 | Dark to light | Incidents on a NIGHT band, then the section opens onto LAW for the turn and the hope. Literal tunnel-then-light; the heaviest, and the one to weigh against "elevated, simplified" | | 3 | Image leads | Face first, at full section height; the hope gets its own full-width LAW strip | | 4 | The hope is the biggest thing | Size inversion carries the arc — incidents drop to 17px grey, hope rises to 34px NIGHT. Cheapest to build, least decorative | | 5 | Hope bound to the image | The hope in a LAW card overlapping the image's corner, so the face and the way out are one object | **The image is a real blocker, not a placeholder convenience, and the ask is now specific.** Adi's intent is a person, thinking and concerned — the pain made human. The client's 2026-08-27 instruction removes team photos from the home page *and* adds "no stock photos of people", which between them rule out a person in this slot from either source; and all 95 images in the brand shoot are people photographs, so nothing there fills it either. The slots are drawn at the intended size and crop and say what they want to hold, so the layout is judgeable and **the question to put to the client is narrow: this section wants one person, not a stock crowd — is that the exception they would make?** Until they answer, it stays an outline. The slot copies the hero's treatment (square, LAW block the same size offset behind) so the two read as one system. --- ## 2026-09-04 (headings + section 3) — Adi + Claude — a thin/bold heading system, and cause -> result Two changes to `home-A-v1.html`. Served, HTTP 200, 58,532 bytes; `h1=1 h2=11 h3=13`, greps clean. ### The heading system: thin setup, bold payload `.h2` drops from Bold 700 to **Light 300**, and a `` inside carries **Bold 700**. Both are brand weights — the guide sets H1 Bold 700 and "headlines short" Light 300 — so the split uses the real scale rather than inventing one. **The rule, applied consistently:** thin is the setup, the lead-in, the supplement; bold is the issue, the result, or the thing the reader must take away. | Section | Thin | Bold | |---|---|---| | 2 | Your Business Has Grown. | Has Your Legal Protection Grown With It? | | 3 | Legal Problems Are | Easier to Prevent Than Repair | | 4 | You Do Not Need to | Navigate This Alone | | 5 | Experienced Legal Counsel | Without the Full-Time Legal Department | | 6 | Protecting Your Business Starts With | Three Simple Steps | | 7 | Imagine Feeling | Confident About the Legal Side of Your Business | | 8 | Move From Legal Uncertainty to | Legal Confidence | | 9 | Built for | Entrepreneurs Leading Growing Companies | | 11 | How … Is Your Business? | Legally Healthy | | 12 | and Prepare for What Comes Next | Protect What You Have Built | Two of these deliberately break thin-then-bold, because the rule is about meaning, not position: **11** bolds mid-sentence (the payload is "Legally Healthy", not the question frame), and **12** leads with the bold (the promise is what you have built, not what comes next). **The hero H1 is untouched** — the guide specifies H1 as Bold 700 and it is the one heading with no setup clause. ### Section 3 rebuilt as cause -> result - **The cause**: the six incidents in a 3x2 grid, each under a FREEDOM rule, at equal weight and with no ordering — a reader finds the one that is theirs rather than reading a list. - **The turn**: "By then, the issue may already be **expensive, stressful, and disruptive**" set apart above a full-width rule, at 26px Light with the consequence bold. - **The result**: the two closing paragraphs in two columns beneath it. **The ground moved from LAW `#FFFAEB` to neutral `#FAFAFA`** — this resolves the clash flagged when the question panel landed: a cream panel running straight into a cream band made the panel stop reading as an aside. Cream is now reserved for the questions, so the colour means something. --- ## 2026-09-04 (under-hero, round 3) — Adi + Claude — highlight + large setting + a bulb Adi picked two things from round 2 and asked for them combined: **the gold highlight behind the gist** and **the larger "read, not scanned" sizing**, plus a lightbulb. `under-hero-A-v1.html` is now six boards of that combination, differing only in how the bulb is used. Served, HTTP 200, ~31.6KB. | # | Bulb | Character | |---|---|---| | 0 | none | The two liked things combined. The control every bulb has to beat | | 1 | 22px beside the label | Marks the panel as a thought prompt, then gets out of the way | | 2 | In a NIGHT disc straddling the panel corner | Strongest signal; also the most decorative | | 3 | Large, low opacity, top right | Texture rather than an icon; fills the panel's empty corner | | 4 | Above the label, as a masthead | Formal and calm; costs about 40px of height | | 5 | Very large watermark bled off the right edge | Most atmospheric, riskiest — the outline crosses the text | **Two real bugs found by rendering, not by reading the CSS:** 1. **The "highlight" was rendering as a thin underline.** `box-shadow: inset` on an inline span paints only across the font's content box, so at 21-22px it came out as a band under the words rather than behind them. Replaced with a gradient background plus `box-decoration-break: clone`, which paints a real marker band **and** repeats correctly on each line fragment if a question ever wraps. 2. **22px reintroduced wrapping** on the two longest questions, breaking the marked phrase across lines. Settled at **21px with 1.55 leading**, where all seven sit on one line at the current column ratio. **A note for the direction check.** `shared-v1/design-system.md` assigns icons to **Direction B** ("the set bundled with Kadence Blocks, inline SVG, at most 11, monochrome within the palette"). Putting an icon into Direction A narrows the contrast between the two directions, which the mockup round exists to show. The bulb here is a single hand-drawn inline SVG in brand colours, so it respects the icon rules — but whether Direction A carries icons at all is a direction decision, not a section decision, and it should be settled before the pattern library is built. --- ## 2026-09-04 (under-hero, LAW panel) — Adi + Claude — six settings of the questions, and the "not clickable" constraint `under-hero-A-v1.html` narrowed to one direction: **the questions on a LAW `#FFFAEB` panel**, six ways of setting them inside it. Header and hero stripped so the six compare without a screen between each. Padding up from 84/88 to **128/136** so the section breathes; still inside one fold. Served, HTTP 200, 27,065 bytes. **The constraint Adi named, which shapes all of it: these questions are not there to be answered.** They are read and recognised — food for thought, not a form. Two design consequences follow, and both are now applied rather than assumed: 1. **Row rules come off in options 1–5.** A hairline under every row reads as a list of tappable items. Spacing separates just as well and implies nothing. Option 0 keeps the rules precisely so the affordance problem is visible rather than argued. 2. **No underline in the text colour.** That is the one decoration a reader is trained to click. Where option 2 underlines, it is a 3px CONFIDENCE rule set clear of the baseline — marking, not linking. **Options** — 0 control (rules, no emphasis) · 1 bold gist, no rules · 2 bold gist + gold underline · 3 gold highlight behind the gist · 4 quiet frame, full-strength gist (framing words lightened, only the gist at full NIGHT) · 5 read-not-scanned (23px, more leading, more panel). **The gist phrases are Adi's**, marked in the copy without changing a word: *documents current and complete · contracts protecting us · client does not pay · terms and conditions strong enough · prepared for AI, privacy, or cybersecurity risks · Who do we call · just to get an answer*. Worth naming: emphasis directs how a sentence is read, so this is a light **editorial** act on AISV's copy even though the words are untouched. It is a decision AISV and the client may have a view on; it is not ours to settle silently. **A CSS bug worth remembering.** The sheet's column override was emitted *before* the scoped base CSS, so at equal specificity the base won and the questions column never widened — the long questions kept wrapping and the emphasised gist broke across two lines, which is the one thing the emphasis must not do. I widened the ratio twice chasing it before spotting that the ordering was the fault, not the ratio. Overrides are now emitted after the base, and the ratio went back to a value the heading can live with (1.12 / .88). --- ## 2026-09-04 (under-hero sheet) — Adi + Claude — five treatments of the Problem section New sheet: `notes/mockups/under-hero-A-v1/under-hero-A-v1.html`, served at `https://equinoxbusinesslaw.demoing.info/wp-content/mockups/under-hero-A-v1.html` (HTTP 200, 74,137 bytes). Generated from `home-A-v1/src/Main.dc.html`, so each board carries the **real header and the real hero** above the section — it is judged where it actually sits, not in isolation. **Copy is verbatim and identical in all six boards**: heading, both opening paragraphs, all seven questions, closing line and CTA exactly as the brand story writes them. Only form changes. | # | Treatment | The idea | |---|---|---| | 0 | Base | The current home-page version, kept to measure against | | 1 | Numbered 01–07 | The numerals tell the reader there are seven before one is read — the section's argument stated as form rather than copy | | 2 | Unchecked list | Empty check boxes reframe seven worries as an audit with nothing ticked, which is exactly what the adjacent CTA offers. Risk: an empty box can read as a form control | | 3 | LAW panel | The list on `#FFFAEB` with real padding — a held field rather than a run of rules. Flat tint, no border or shadow, so it stays clear of the "boxed cards with drop shadows" fence | | 4 | Sandwich | Heading and intro on top, questions across the full container in two columns, closing line and CTA beneath. Questions become the centre of the section and can carry 21px again | | 5 | One rule, larger type | A single gold rule down the whole list instead of a hairline per row, questions back to 23px. One rule says "these belong together"; seven said "these are seven separate items" | **Option 5 exists because of a trade recorded earlier**: the base dropped the questions from 27px to 18.5px to fit the fold, which cost them weight. 5 recovers most of it and still fits, so the fold constraint and the emphasis are not actually in conflict. **Option 4 is the only one that changes the section's shape** rather than its texture — worth judging separately, because it also changes how the section reads against the two-column hero above it. All six stay inside the fences: one accent per screen, no boxed cards with shadows, nothing hidden behind an accordion, no invented copy, no imagery. --- ## 2026-09-04 (section 2) — Adi + Claude — the Problem section brought under one fold **Measured before changing anything:** section 2 ran to roughly **1190px** — about 1.3 folds on a 900px laptop, so the seven "You may be wondering" questions kept arriving as the reader scrolled, which is exactly what Adi reported. Now roughly **660px**, comfortably inside one screen. No copy was cut: all seven questions, both opening paragraphs, the closing line and the CTA are still there. **How.** Two columns. The prose keeps the left column (capped 640px) in the order the brand story writes it — heading, two paragraphs, the closing line, then the CTA. The questions move to the right as a scannable hairline list at 18.5px instead of a full-width editorial list at 27px. That is where the height went: seven rows at 27px with 19px padding was over 460px on its own. **What the change trades.** At 27px the questions were the loudest thing on the page after the hero; at 18.5px they are a list to scan rather than a statement to read. The pain hierarchy Adi argued for still leads the section, but it now reads as "here are seven things you cannot answer" rather than seven separate declarations. If that loses too much weight, the middle position is to keep two columns and raise the questions to 21-22px — the column can carry it and the section would still fit. **One thing built and immediately removed:** the questions first carried an alternating gold left rule. It looked like a decorative rhythm but it implies two categories that do not exist in the content, so it went. Consistent hairlines only. --- ## 2026-09-04 (home hero) — Adi + Claude — the square-image hero lands on home-A-v1 The chosen treatment from `hero-B-options.html` — **40vh square image, LAW block behind** — is now the hero of `home-A-v1.html`. Served, HTTP 200, 56,211 bytes; `h1=1 h2=11 h3=13`, drift/tracking/pricing greps all clean. **What moved from the options sheet into the real page:** - Copy left in its own flex track, capped at 660px; square image right, both inside the site container (1440/64), so the composition's right edge lines up with the header's *Contact Us* button. - `height:clamp(260px, 40vh, 480px)` with `aspect-ratio:1/1` — viewport-relative but ceilinged, so a tall monitor cannot make the square wide enough to crush the copy. - The block behind is the image's own footprint in LAW `#FFFAEB`, offset 30px right and 24px down; the wrapper shifts 30px left so the **shadow's** right edge meets the container edge. **Type came down to match the narrower column.** The hero H1 moved 60px -> 52px, subhead 22px -> 19px, supporting line 17px -> 16px. The brand scale is unchanged (Bold 700, sentence case, tracking .005em); only the size steps down, because the copy now lives in a 660px column rather than the full width. This is the same set of values the approved hero-B options used. **The image slot is a labelled outline and says why on its face** — "no people, per the client's photo rule". That keeps the reason visible to anyone opening the file, rather than only in the handoff. --- ## 2026-09-04 (hero B) — Adi + Claude — text left, square image right, inside the container `hero-B-options.html` proofs one treatment: **text left, portrait image right, both inside the site container.** Served, HTTP 200, 52,764 bytes. Five options: 30 / 35 / 40vh with a LAW block behind, plus 35vh with no block and 35vh with a BUSINESS border. **The hero now uses the same container as the header** — 1440px max-width, 64px gutters — so the image's right edge lines up exactly with the right edge of the *Contact Us* button above it, and the copy starts on the same left edge as the logo. Nothing bleeds off the viewport. (This only works because `.wrap` and `.wrapwide` were unified at 1440/64 earlier in the session; before that the header sat 176px wider than the body and the alignment would have been off by 24px.) **Ratio changed to 1:1 (Adi, 2026-09-04).** The 3:4 portrait left too much empty space between the copy and the image; a square is wider at the same height, so it closes the gap without making the hero taller. Height is set in `vh` and clamped; the width comes from `aspect-ratio`, so the square stays square at every viewport size. Heights stay in `vh` deliberately — they track the visitor's own screen, so 30vh is a genuinely different object on a short laptop than a tall monitor; judge at your own window height. **Copy and image are separate flex tracks**, copy capped at 660px. Changing the image height cannot narrow the text. In the earlier two-column grid they competed for the same row, which is what made the copy feel squeezed. **Revised (Adi, 2026-09-04): the block behind is a same-size offset shadow, not a larger panel.** It is now exactly the image's footprint, translated 30px right and 24px down, in LAW `#FFFAEB`. The image wrapper shifts 30px left so the *shadow's* right edge — not the image's — lands on the container edge, keeping the whole composition inside the site width. Applied to all three block options, not just the 40vh one, because height is the only variable that set is meant to test. **And a real robustness bug the render exposed.** The image height was pure `vh` with the width computed from it, so on a tall portrait monitor 40vh would make the image wide enough to crush the copy column — visible immediately in a tall screenshot, invisible at laptop height. Height is now clamped (`clamp(260px, 40vh, 480px)`) and the width comes from `aspect-ratio:3/4`, so the proportion holds at whatever the clamp settles on. Worth carrying into the Kadence build: a viewport-relative image dimension needs a ceiling. **Two bugs caught by rendering rather than reading**, across this and the previous pass: the image layer had no offsets so the box landed at the *left* edge over the headline; and a box drawn portrait *before* a crop ends up a sliver after it — the earlier bleed version had to be 1.05x its height wide for the visible remainder to be 3:4. Both looked plausible in code. **The image slot remains a labelled outline** — all 95 brand-shoot images are people photographs and the client bars both team photos on the home page and stock photos of people. A short landscape-ish portrait band does change what could fill it: a workplace or office detail crops naturally to this shape, where the tall 3:4 panel wanted a person in it. --- ## 2026-09-04 (hero B) — Adi + Claude — circle art dropped; image treatments instead **The animated-mark direction is rejected.** Adi's call, and it is right: a redrawn mark never matches the client's artwork exactly, so a recognisable version invites a comparison it loses, and a safe version is not worth the effort. Written up as a rejected direction in `notes/design-notes.md` note 5, with what is worth salvaging (the measured geometry, and `logo_pair()`) so the ground is not covered a third time. All the hero-A circle sheets remain served but are superseded. **New sheet: `notes/mockups/hero-B-options/hero-B-options.html`**, served at `https://equinoxbusinesslaw.demoing.info/wp-content/mockups/hero-B-options.html` (HTTP 200, 52,833 bytes). Same hero copy and type; five ways to frame an image in the right-hand field: boxed no border · boxed with a BUSINESS border · circle crop with a DAY gold ring · circle crop clean · box bleeding off the band edge with a LAW block behind it. **A finding that closes an open input.** All **95 images** in `notes/source/photos/` were reviewed frame by frame: **every one is a people photograph of the team** — meetings, the office, the marina. There is no non-people workplace shot in the set. Combined with the client's 2026-08-27 instruction (no team photos on the home page, no stock photos of people), **nothing in the brand shoot can be used in this hero.** The slots are therefore labelled outlines, as `shared-v1/design-system.md` specifies. **So the image question needs an answer from the client**, and it is now a specific question rather than a vague one: the hero image can be a non-people workplace or office photograph (**which the client would have to supply — the shoot has none**), non-people stock imagery (already permitted), or an abstract brand ground. Put it to them with the mockup. **One option earns a note.** The circle crop is not only a style: it crops a group photograph down to one or two faces, which is the only shape in which people imagery could ever appear in this hero within the client's rules. If the client ever reopens the photo decision, option 3 is the one that is ready for it. --- ## 2026-09-04 (hero, the logo pair) — Adi + Claude — two circles held in the mark's own geometry Adi's call: keep two circles, but position them exactly as they sit inside the logo rather than as an arrangement of our own. `hero-A-options.html` now shows the gold and slate rings in the mark's real relationship — slate low and to the left of the gold — cut by the right edge, at three scales. Served, HTTP 200, 43,356 bytes. **The relationship is derived, not eyeballed**, which is what lets it scale without drifting. From the measured mark (gold outer r191/stroke18 at (200,200); slate r118/stroke32 at (172,240)), expressed as ratios of the gold radius: | Property | Ratio of gold radius | |---|---| | Slate radius | 0.618 | | Gold stroke | 0.094 | | Slate stroke | 0.168 | | Slate offset from gold centre | (−0.147, +0.209) | `swirl.logo_pair(R, cy)` computes a pair at any radius from those numbers; `swirl.PAIR` holds the three on the sheet (gold radius 190 / 250 / 330). **What each scale costs:** at 190 the pair is a quiet corner mark and the slate stroke sits near the header rule's weight. At 250 the relationship is legible without dominating — the recommended start. At 330 the slate stroke scales to about 55px, a heavy dark mass beside the headline, which is the one to weigh against the client's "visually busy" complaint. The gold circle's centre remains on the band edge, so it is cut exactly in half at any viewport width; the slate follows it inward. Still `aria-hidden`; the real logo still appears once, in the header. **Generator note:** the sheet's intro copy now lives in `scratchpad/intro.txt` and is read at build time, because escaping prose inside nested Python string literals had broken the generator twice. --- ## 2026-09-03 (hero, two circles) — Adi + Claude — a second, larger circle below the first Step 2 of building the right-hand field. `hero-A-options.html` now shows the gold circle with a second, larger circle beneath it; both centres sit on `cx=1440`, the band's right edge, so both are cut exactly in half. Served, HTTP 200, 43,030 bytes. The gold circle is held at **radius 230** — the scale that read best alone — so only the second circle varies: | # | Variant | Character | |---|---|---| | 0 | Gold above, dark blue below | The arcs cross around the middle of the band. Slate is the mark's other dominant ring, so the pair covers both brand anchors without copying the logo's arrangement | | 1 | Both gold | Quieter and warmer; the larger arc reads as an echo rather than a second voice. Weaker against the blue ground — possibly the point, possibly too little | | 2 | Further apart | Smaller gold high, larger slate low and mostly off the band. Most air, least incident | **Adi did not specify the second circle's colour**, so the variants make that the decision rather than assuming it. Slate is the grounded default: it is the colour he himself named next when he first described the composition ("big gradient golden and dark blue"). Both strokes keep the mark's 0.094 radius-to-stroke ratio, so weight stays in the family as the radii change. `swirl.TWO` in the generator holds the three arrangements. --- ## 2026-09-03 (hero, one circle) — Adi + Claude — stripped back to a single gold arc Adi's call: build the right-hand field **one step at a time**. `hero-A-options.html` now shows a single gold circle cut exactly in half by the right edge of the hero band, at three scales — nothing else. Served, HTTP 200, 42,294 bytes. The five-circle placements are retired from the sheet, not lost; their layouts stay in `scratchpad/swirl.py` as `LAYOUTS` if the field is built back up. | # | Scale | Character | |---|---|---| | 0 | radius 300 | Sweeps the whole right field; its arc passes close to the CTA row | | 1 | radius 230 | Clear of the copy at every width, still deliberate. The recommended start | | 2 | radius 165 | Quiet accent; risks reading as an artefact rather than a choice | **Two details that keep it in the brand rather than near it:** - **Stroke weight is derived, not chosen.** The logo's outer ring is radius 191 with an 18px stroke — a ratio of 0.094. Each circle keeps that ratio, so the weight reads as the same family at any size. - **The gold is the mark's own gradient** (`#D59F0F` at the left, fading to white), not a flat fill. The circle's centre sits precisely on the band edge, so exactly half shows at any viewport width. It carries `aria-hidden`; the real logo still appears once, in the header, from the client's file. --- ## 2026-09-03 (hero circle placement) — Adi + Claude — the group breaks apart into five cut circles `hero-A-options.html` is now a **placement** sheet, not a motion sheet: four static heroes, no animation. Motion returns once a placement is chosen — deciding both at once was making each harder to judge. Served, HTTP 200, 56,693 bytes. Adi's direction: not one nested group cut in half, but **circles spread across the right field, cut by the edge** — roughly two in one cluster and three in another. Four options: | # | Placement | Character | |---|---|---| | 0 | Control — one group, cut in half | Where we were; reads as a single object | | 1 | Two above, three below | Two large rings cut high, three smaller cut low. Widest clear field beside the headline | | 2 | Cascade | Five falling down the edge, sizes stepping down. Busiest — check against the client's "visually busy" complaint | | 3 | Pair and trio | A nested pair holding the middle, three small rings as punctuation top and bottom. Most air | **Technique that matters for the build:** the artwork is now **one SVG spanning the whole band** with `preserveAspectRatio="xMaxYMid slice"`, so the circles stay pinned to the right edge and keep their crop at any viewport width rather than drifting into the text. The earlier version positioned a fixed 820px element with a negative offset, which only held at one width. **Ring set unchanged from the previous decision:** light-blue dropped, white introduced, so five circles drawn in gold gradient, light-gold gradient, white and slate. Still `aria-hidden`; the real logo still appears once, in the header, from the client's file. **Recorded honestly: Adi's instruction had two plausible readings** and rather than pick one silently, 1, 2 and 3 are the readings that seemed sensible, with the previous version kept as 0 to compare against. The sheet says so on its face. --- ## 2026-09-03 (hero art) — Adi + Claude — the mark becomes a composition, deliberately not the logo Adi's call, and it resolves the fidelity problem rather than fighting it: **a redrawn mark will never match the client's artwork exactly, and a near-miss reproduction of a logo is worse than no logo — it invites the comparison and loses it.** So the hero no longer attempts the logo at all. Three changes, any one of which breaks the reading as a logo; together they make it plainly a composition: 1. **The light-blue ring is removed.** What remains is the large gold gradient ring, the dark slate ring and the small light-gold ring. 2. **A white ring is added** in the blue ring's place, on the same geometry, with a white-to- translucent gradient so it belongs to the family rather than sitting on top as a flat shape. 3. **It is cropped in half.** The element is 820px wide, pushed out by exactly half of that at the right edge of the full-bleed hero band, so only its left side is ever on screen. Implemented as `swirl.art()` alongside `swirl.svg()`; the logo-accurate rebuild is kept for provenance only and is used nowhere on a page. Class names are unchanged, so all five animation sequences work on the composition without edits. **Accessibility follows from the decision:** the composition carries `aria-hidden` and is not announced to a screen reader. The real logo appears once, correctly, in the header, from the client's own file. **The sheet's first block now shows three things side by side** — the client's PNG, our SVG rebuild of it, and the art composition on the hero's gradient ground. Read 2 against 1 to judge the rebuild; read 3 against 1 to confirm the composition cannot be mistaken for the mark. **A sixth option was added and placed first: "Static, no motion".** Once the mark is background art rather than a logo reveal, not moving at all is a legitimate answer, and every animated option now has to beat it. **Open dial, deliberately not turned:** the composition's opacity. At full strength the slate ring is heavy against the light gradient and competes with the headline. Muting the client's own colours is a design decision for Adi, not a default to pick silently. Also worth watching: the hero ground is the brand's blue gradient and the composition is largely blue — possibly one blue too many, with a LAW or white ground as the alternative. --- ## 2026-09-03 (hero swirl) — Adi + Claude — the mark rebuilt as SVG, five animation options New sheet: `notes/mockups/hero-A-options/hero-A-options.html`, served at `https://equinoxbusinesslaw.demoing.info/wp-content/mockups/hero-A-options.html` (HTTP 200, 65,472 bytes). Adi's concept: fill the hero's empty right-hand area with the brand's own mark assembling, instead of a face or a stock photograph. **The swirl was measured, not traced.** `Equinox__Swirl_Color_RGB.png` was analysed by scanline crossing and circumference sampling. It is **four non-concentric stroked rings** on a 400x400 field — the offset centres are what make it a swirl rather than a target: | Ring | Centre | Radius | Stroke | Colour behaviour | |---|---|---|---|---| | Gold outer | (200, 200) | 191 | 18 | `#D59F0F` at the left, fading to white at the right | | Blue | (185, 227) | 135 | 23.5 | `#CCE0E8` upper-left -> `#93BCCD` -> `#267F98` -> `#004C66` lower-right | | Slate | (172, 240) | 118 | 32 | flat `#3D5867` | | Gold inner | (199, 252) | 75 | 22 | near-white upper-left -> `#E3BA63` lower-right | **Paint order matters and the first version had it wrong (Adi caught it, 2026-09-03).** The slate ring is painted **last**, over the inner gold — in the client's file the gold is visibly interrupted where the slate crosses it, and the first SVG ran the gold straight over the top. Confirmed by measuring the overlaps in the original: slate covers blue in **94%** of their shared pixels and gold outer in **65%** of theirs; blue and inner gold never meet. Verified again by rendering the corrected SVG and zooming the crossing beside the client's PNG at 4x. The blue ring's stroke was also trimmed about 10% (26 -> 23.5) on Adi's eye. Order is now: gold outer, gold inner, blue, slate. Class names stay semantic (`r1` outer gold, `r2` blue, `r3` slate, `r4` inner gold) so the animation sequences are unaffected by paint order. Encoded as inline SVG in `scratchpad/swirl.py` (the generator). **This is why it can animate at all — a PNG cannot come apart.** It is also a few kilobytes and stays sharp at any size, which matters because the kit ships only raster logos. **Verified rather than asserted.** The rebuilt SVG was rendered in headless Chrome and composed side by side with the client's PNG. Structure, offsets, stroke weights and gradient directions all match; it is a close reproduction, not pixel-identical. The sheet carries the same comparison as its first block ("Fidelity check") so Adi can judge it directly. **If exactness matters more than weight, the resting frame can cross-fade to the client's actual PNG** — worth deciding before this goes near the client. **Five options, all ending on exactly the logo:** 1 draw-and-assemble (rings write themselves in sequence) · 2 beam then orbit-in (a bright arc travels the outer path, then the others rotate into alignment — the most literal reading of Adi's brief) · 3 ripple outward · 4 converge from four directions · 5 draw, then a permanent slow counter-rotation. **Two bugs the verification render caught**, both fixed: the screenshot harness was clipping (a viewport artefact, not the SVG), and more importantly **a plain circle rotated or scaled about its own centre shows no movement at all** — options 2, 3 and 5 were transforming about each ring's own centre, so their rotations would have been invisible. They now transform about the mark's centre (200, 215 in the viewBox), which is what makes the offset rings actually orbit. **Motion policy, already built in:** each option loops every 8 seconds *on the sheet* so it can be watched repeatedly; on the real page it plays once, on load. All five honour `prefers-reduced-motion` — a visitor who has asked for less motion sees the finished mark, static. --- ## 2026-09-03 (page width) — Adi + Claude — the boxing was an artboard artefact, not brand Adi asked whether the boxed look came from the branding. **It does not. The Brand Kit specifies no grid, no margins and no page width at all** — the guide covers logo, colour, type, gradients, photography and the brand bricks, and stops there. Verified by searching the full 76-slide extraction: the only "margin" in the document is the phrase "no margin for errors". Page width is entirely our decision. The boxing had two separate causes, only one of which was real: 1. **The artboard.** `Main.dc.html` is a fixed 1440px canvas because a design canvas needs one, and the generated preview inherited that width. On a wider display the whole page sat centred with dead space either side. **Fixed in the generator, not the artboard:** the served preview is now fluid (`width:100%`, `min-width:1180px`), so section grounds run edge to edge and content is capped by `.wrap` / `.wrapwide` — the way the built site will behave. The `.dc.html` artboard keeps its fixed canvas. 2. **Two different container widths.** The header used `.wrapwide` (1440/56px) while the page body used `.wrap` (1280/64px), so header content was 176px wider than body content. Invisible on a 1440 board, obvious once the page goes full-bleed — the nav would sit outside the hero's left edge. **Both containers are now 1440 max-width with 64px gutters**, so the header and the page share one left edge. The header loses 16px of its earlier width; the body gains 160px. The option sheets (`header-options`, `hero-options`) deliberately keep the fixed 1440 board, because their whole purpose is comparing variants at an identical width. --- ## 2026-09-03 (homepage on brand) — Adi + Claude — home-A-v1 rebuilt against the confirmed system `home-A-v1.html` now renders the Brand Kit's own type scale, colour roles and brand elements, not an approximation of them. Served, HTTP 200, 54,382 bytes; `h1=1 h2=11 h3=13` unchanged, drift colour count zero. **Type scale, from the guide's slide 8.** H1 is Bold **700**, sentence case, line-height 1.1, tracking `.005em`, and the size came down 74px -> 60px because Bold reads far larger than the Light 300 it replaced. Body is Regular 400 with tracking `.005em` (line-height opened to 1.62 for long-form, per `design-system.md`). Card titles now follow the guide's **H4** sub-headline — SemiBold 600, sentence case, line-height 1.3. Eyebrows now follow the guide's **CALLOUT** — Bold 700, all caps, tracking `.25em`. **The heading-weight tension resolved by reading the guide more carefully, not by overruling it.** The guide's caps/ExtraBold-800 style is labelled "HEADLINES **SHORT** H2" — it is for short labels, not for full-sentence section headings. Every section heading on this page is a sentence ("Your Business Has Grown. Has Your Legal Protection Grown With It?"), so those take the H1 treatment at section scale: **Bold 700, sentence case, 36px**. A `.h2short` class carries the true caps-800 style for genuinely short headings when one appears. This removes the conflict with the client's "elevated, simplified" brief without deviating from the guide — the guide never asked for long sentences in caps. **Colour roles, from the six brand colours.** Links use **BUSINESS `#027CA1`** (the active blue); eyebrows too. The alternating tinted section now uses **LAW `#FFFAEB`**, the brand's warm near-white, instead of a neutral grey. Image placeholders sit on a FREEDOM tint with a `#93BCCD` dashed edge. Gold hover uses **DAY `#D98D00`**. Panel shadows were mixed from the retired drift colour and are now mixed from NIGHT. **Two brand elements now actually present, both from the kit rather than invented:** - **The hero sits on the brand's blue radial gradient**, written in CSS (not the kit's 3300px PNG). This is the guide's sanctioned ground and its stated preference for the logo ("on white or bright brand gradient backgrounds"), and it is the answer to a hero that may carry no people photography. - **The swirl appears once, large**, as a low-opacity device on the NIGHT final-CTA band — the guide's rule is "sparingly and large, never a repeated decoration". **Not yet done:** the H2 short style has no use on this page; the mega-panel image slots are still labelled outlines (correct per `design-system.md`); vector logo files are still outstanding, so the header mark is a trimmed raster. --- ## 2026-09-03 (Brand Kit read) — Adi + Claude — three source extractions, and four findings that change plans Adi asked for the kit's *message* material in a form an agent can actually read. The kit ships as PDF and PowerPoint; the Core Values PDF is letterspaced badly enough that text extraction corrupts it, so its pages were rendered to images and read visually. Three new files in `notes/source/brand-kit/`, all **verbatim, no interpretation**, indexed in that folder's README: - `brand-guide-messaging.md` — the message from the 76-slide guide - `brand-guide-short.md` — the 8-slide deck (logo rule, colour spec, type scale) - `core-values-and-behaviors.md` — the 3-page internal culture document **Interpretation is kept separate, in `notes/design-notes.md` note 4**, so the extractions stay quotable as evidence. Four findings there change other plans: 1. **Two three-step plans now exist.** AISV's brand story says Assess -> Prioritize -> Protect and Grow. The client's brand guide says Take the assessment -> Create a plan -> Boldly go. Hero option 5 renders AISV's. **Using both across one site would be wrong**; AISV and the client choose, before any page renders a three-step pattern. 2. **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. Three of four sources now agree; only AISV's brand story inserts "Legal". Recorded in `.memory/naming-conflicts.md` section 2 as a recommendation, not a decision. 3. **A fourth cut of the service taxonomy** (Corporate Governance, Employment, Contracts, Leases, Trademarks and Copyrights, M&A, Data Privacy, Insurance). Four cuts, none authoritative. The Services mega panel keeps the live-site structure as the right default; AISV owes the reconciliation. 4. **The competitive field is named by the client**: Strategic Business Consultancies, Managed Services Providers, General Counsel Business Law, FTE In-House — and the MSP analogy is written out in full. That is a far better answer to "who are the competitors" than anything in AISV's deck, and it reframes the comparison as against in-house counsel and MSPs, not other law firms. **Also worth carrying to the review:** the guide's own voice is markedly bolder than the copy written for the site ("Straight-talk, no BS or pretention"; Sage and Rebel archetypes; "Mega corps aren't the only ones with an army of attorneys"). The register gap noted earlier is now evidenced from the client's own side. And the guide already describes the brand as a modular, brick-by-brick system — the same idea as the pattern-library build, in the client's words. **Pricing handled per the project rule:** the guide states a monthly starting figure twice; both are `[figure redacted]` in the extraction and no figure entered any project file. One currency symbol remains in `brand-guide-messaging.md` and is a podcast title in the Adjacencies list, not a figure — noted in that file's header so a pre-checkpoint grep has its explanation. **Source faults recorded rather than silently corrected:** the colour table writes NIGHT as `#003b53ff` (alpha, not colour), gives CONFIDENCE an HSB of `0, 0, 73` (a grey — a typo; the hex is authoritative), punctuates BUSINESS's CMYK with a full stop, and labels the pale cream LAW "bright yellow". The type scale prints `.08` line heights for H2 and H3, which cannot be right at any size. --- ## 2026-09-03 (Brand Kit applied) — Adi + Claude — mockups swapped onto the real brand system Rian filed the Brand Kit at `notes/source/brand-kit/` with a full digest in its `README.md`, and rewrote `notes/mockups/shared-v1/design-system.md` as the confirmed system. **Applied to every mockup the same day.** All three sheets re-generated from `home-A-v1/src/Main.dc.html` and redeployed; `#004963` count is now zero in all three. | What was in the mockups | What the kit says | Done | |---|---|---| | Primary dark `#004963` | **`#003B53` NIGHT** — `#004963` is live-site drift, not in the brand system | Swapped, 63 occurrences | | Libre Franklin + Source Serif 4 | **Montserrat** is the brand face; both directions render it as the compliant default | Swapped throughout | | Text wordmark "Equinox" | Real lockups exist | Header uses `Equinox__Logo_SLCTag_B_RGB` (tagline in BUSINESS, legible); footer uses the reverse lockup. Trimmed and resized into `wp-content/mockups/assets/` | | Gold `#ffd457` | `#FFD457` CONFIDENCE | Already correct | **Header sheet, variants 6–10 rebuilt.** The old 6 and 7 (Midnight Navy `#112337`, Ink Blue `#0d3050`) and 8 (Signal Blue `#0b5aa5`) were guesses made while the kit was unopened. The kit names real blues, so the guesses are retired rather than left standing beside the truth. Now: **6 Business Blue** `#027CA1` (brand), **7 Freedom tint** `#93BCCD` (brand), **8 Brand gradient ground** (the kit's own blue radial, in CSS — and the guide's stated preference for the logo). 9 and 10 stay green and stay badged **Outside the plan**: the kit confirms green is not in the system, so that is now certain rather than inferred. **Hero sheet gained option 12, Brand gradient ground.** With people photography ruled out by the client, the brand's own gradients are the answer to a hero that would otherwise be type alone — on-brand, weightless as CSS, no licence, no photograph. Hero 7's panel also moved from an invented tint to LAW `#FFFAEB`. **NOT changed, and it needs Adi's call: heading weight.** The guide sets H1 Bold **700**, H2 ExtraBold **800 all caps**, H3 Light **300 all caps**. The mockup's H1 is Light **300** — off brand. But an 800-weight all-caps H2 at 44px is close to the "visually busy" the client named as the problem in 2026, and the guide is a 2022 deck-typography spec. That tension is real and is a design decision, not a mechanical swap, so nothing was applied. Options: follow the guide exactly; follow it for H1 only and set H2/H3 optically; or propose the deviation to the client with a reason, the way the body-face question is already being handled. **Also now settled by the kit:** the tagline is **"Strategic Legal Counsel for All."**; the spelling is **"boldly"**, so `/go-boldy-with-equinox/` is a typo and a redirect question for `.logs/planning/site-architecture.md`, not a copy decision; and a real brand blue exists, which answers Adi's earlier "is brand blue allowed" question with yes — `#027CA1`. **Still open:** vector logo files (everything is raster ~3300px, requested from the client); which one or two team photographs may be used; the body-face recommendation; heading weight above. **Housekeeping:** `wp-content/mockups/` still serves `home-A-v1-mobile.html` and `home-A-v1-notes.html` from 06:06 — unmaintained, pre-kit, wrong colours and wrong typeface. They should be deleted before anything is shown to Rian so nobody opens a stale board. --- ## 2026-09-03 (hero options) — Adi + Claude — eleven hero options, copy untouched New internal sheet: `notes/mockups/hero-options/hero-options.html`, served at `https://equinoxbusinesslaw.demoing.info/wp-content/mockups/hero-options.html` (HTTP 200, 102,811 bytes; 11 options). Generated from `home-A-v1/src/Main.dc.html`, so the header is the real one and each hero is judged as a **first screen**, not in isolation. Internal working sheet. **The words are verbatim and identical in all six** — headline, subhead, supporting line and both CTAs exactly as written in the brand story's HERO SECTION. Nothing on the sheet proposes copy; what varies is structure. | # | Layout | What it tests | |---|---|---| | 1 | Typographic left | The control (current home-A-v1 hero) | | 2 | Split with image | Whether a non-people image block earns its half. Photo policy rules out stock people | | 3 | Centred editorial | Drops the supporting line entirely — is the third sentence doing any work? | | 4 | Hero + the questions | The brand story's own "You may be wondering" questions pulled above the fold. Adi's pain-first argument made structural | | 5 | Hero + the three steps | Assess · Prioritize · Protect and Grow from the Plan, so "what happens if I click" is answered without scrolling | | 6 | Teal ground | The hero as a full-bleed brand block; the furthest from the current site | | 7 | Tinted panel, rounded | Colour and a 14px radius carry the shape; no ornament | | 8 | Hairline system | 1px rules used *structurally* — opening and closing the block, holding the measure | | 9 | Pattern field | A low-contrast diagonal hairline texture as ground. **The one to judge hardest** — closest to the "busy" the client named | | 10 | Duotone split | Teal block bleeding off the right edge; the two brand colours as grounds, not accents | | 11 | Accented headline | One move only — a gold highlight behind "Grow Your Business" in the H1 | **Fence check on 7–11 (Adi, 2026-09-03).** `.logs/planning/design-direction.md` bars "decorative dividers", "gradient overlays on photos" and "more than one accent colour per screen" as part of the busy-and-dated problem the client named. None of the five uses an ornament, a gradient or a second accent — gold stays the single accent and teal stays structural. Option 8's rules are structural rather than decorative, which is the distinction the fence actually draws. Option 9 is flagged on the sheet itself as the one closest to the line. **A dashed rule marks the approximate fold on a 1440×900 laptop** in every option. That is the instrument the sheet exists for: options 4 and 5 are the only ones that put anything beyond the headline and the CTA pair above it, and 1 and 6 are the only ones where the supporting line survives above the fold. Every option respects the fences: two CTAs only, one accent colour, no carousel, no video, no parallax, no people imagery. Options 4 and 5 use brand-story copy from sections 2 and 6 that already appears further down the page in `home-A-v1` — they move it, they do not add it. --- ## 2026-09-03 (copy provenance) — Adi + Claude — for Rian to raise with AISV; NOT acted on in Step 1 Parked, not actioned: copy is AISV's lane and nothing here changes the mockup. Recorded so it is not re-derived. Three findings, all checkable: 1. **The brand story's `.docx` carries no document properties at all** — no `docProps/core.xml`, no `docProps/app.xml`, nine files all stamped `2026-07-27 09:35`. Word and Google Docs always write those. That is characteristic of a programmatically generated file. It proves the *file* was machine-generated, not that the prose was. (The strategy deck, by contrast, is a genuine Google Slides export.) AISV's stated method is AI-assisted, so this is not an accusation. 2. **The client writes measurably warmer than the copy written for them.** Real contractions per 1,000 words: **live site 4.60** (318 in 69,090 words across 98 crawled pages — `don't` 33, `you're` 31, `doesn't` 20, `we're` 19) versus **brand story 0.85** (2 in 2,363 words). Same beat, two registers: their own blog says "You don't have to figure it out alone. Let's build the legal foundation your business deserves"; the brand story says "You Do Not Need to Navigate This Alone". This matters because the positioning is "legal support becomes a normal part of running your business" — formal register fights that promise. 3. **Twenty options, none chosen.** The brand story ships 10 headlines and 10 taglines with no selection marked. The mockup currently uses headline 1 for the H1 and the SHORT FOOTER MESSAGE in the footer, by default rather than by decision. Note that "Proactive protection. Predictable costs." exists as tagline 2 — the two-beat version of the line Adi found cheesy as a three-beat. **The question nothing in the project answers: has the client approved this copy, or only received it?** `notes/client-correspondence.md` does not say. That is the difference between "the hero copy is decided" and "the hero copy is drafted", and it changes what the mockup round is asking for. **Design consequence, and the only thing acted on:** do not amplify flat lines by setting them large. The H1 survives display size; most supporting lines do not. Argues for less text at large size in the hero — which is where the layout was going anyway. --- ## 2026-09-03 (header colour sheet) — Adi + Claude — 10 header variations, and the Brand Kit is now the blocking item New internal sheet: `notes/mockups/header-options/header-options.html`, served at `https://equinoxbusinesslaw.demoing.info/wp-content/mockups/header-options.html` (HTTP 200, 92,916 bytes). Ten cosmetic treatments of the same header — identical structure, labels and all three mega panels in every one, so the comparison is weight, colour and voice only. Built from `home-A-v1/src/Main.dc.html`, so it stays in sync with the real mockup. **Internal working sheet, not a client deliverable.** 1–5 are palette-safe (ivory & gold, deep teal bar, editorial serif, warm paper, quiet minimal). 6–10 answer Adi's request for braver colour, each badged with its provenance: | # | Treatment | Verdict | |---|---|---| | 6 | Midnight Navy `#112337` | **Sourced** — already in the live CSS for dark bands and overlays | | 7 | Ink Blue `#0d3050` | **Stretch** — same navy family, further than anything on the site | | 8 | Signal Blue `#0b5aa5` | **Outside the plan** — the live site's only blue is `#0098f4`, logged as incidental | | 9 | Forest Green `#10493a` | **Outside the plan** — no green anywhere in the live palette | | 10 | Sage Light `#eef4ef` | **Outside the plan** — same objection, lighter treatment | Three things in `.logs/planning/design-direction.md` rule 8–10 out as they stand: "no new palette invented from scratch" (a rebrand was not sold), "more than one accent colour per screen" in the **Do not** list, and the proposal's promise of "a clear step up, without asking you to relearn your own website". **The finding that matters more than the sheet:** the **Brand Kit has never been pulled from SharePoint**, so there is no confirmed brand colour on this project at all — every value in every mockup is live-site reference, labelled provisional. That makes "pull the Brand Kit" the blocking question, not "which colour do we like". It has been an open input since 2026-08-27; the links are in Alicia Wimmer's email, which Adi does not have. **Rian forwards the SharePoint links to whoever pulls it (Rian, Rob or Adi).** If the kit holds a real brand guide it may widen the palette and settle the blue/green question without a client conversation; if it holds only logo files, the design system is our judgement and is signed off in the mockup round. Also refactored in `home-A-v1`: the wordmark and header row are now `.wordmark` and `.hdrrow` classes instead of inline styles (inline styles cannot be overridden by a variant). No visual change; redeployed. --- ## 2026-09-03 (header, Direction A) — Adi + Claude — mega menu drawn open, wordmark shortened, one header CTA Three header changes are now live in the Direction A artboard and the served page. **All three cross the Step 1 fence and Rian decides whether they survive into the client-facing export.** Detail and the argument for each is in `.logs/planning/step1-execution.md`, requests table. 1. **Mega menu, Services, drawn open.** §6 and §8 both bar dropdown/mega-menu states from Step 1 ("the nav is drawn closed, once"). Adi asked three times, escalating each time (static open state -> real content -> "I would like to see working mega menu not just one shoot", 2026-09-03). What is now in the page is a **working CSS-only nav**, no JavaScript: hover or keyboard-focus a nav item and its panel opens; `:focus-within` makes it keyboard reachable; the nav item's hit area is padded to bridge the gap to the panel so hover never flickers. Two panel types, which is what real sites do: - **Services** — a full-width mega panel: the 6 real practice areas, the 5 real function groups with their real counts (Corporate Strategy 21, Human Resources 11, Sales 7, Property 4, Purchasing & Vendor Management 4), the 5 real industries recovered from the crawl (Manufacturing, Construction, Hospitality/Retail, Professional Services, Software Development — which retires the audit's `[TBC: names]` placeholder), a teal assessment CTA card, and a footer strip with "View all Practice Areas & Industries" and the phone number. **Compacted on Adi's note that it was too dense:** the grey sub-item lists and the per-area descriptors are gone; the panel is scannable links only. - **Our Approach** and **About Us** — two more full-width mega panels on the same three-column grid (Adi, 2026-09-03): sub-menu links only on the left (no descriptors — Adi cut the grey text as unnecessary), a 16:9 image placeholder in the middle, a CTA card on the right. Our Approach lists Our Approach / A La Carte Solutions / Business Legal Health Assessment / Testimonials; About Us lists About Us / Our Team / Events. The narrow-dropdown pattern is gone — all three panels are now mega panels, one system. **CTA distribution across the panels, and its one limit:** Services carries the assessment (transitional path); Our Approach and About Us carry Book a Consultation (direct path), with different framing but the same destination. Only the two sold CTAs exist, so panels reuse them rather than inventing a third. Both paired CTAs are therefore reachable from the header again, which softens — but does not remove — the cost noted in item 3 below: they are visible on hover, not persistently. **One number to verify before this is shown:** the About Us CTA card says "Nine attorneys, paralegals and operations staff across Washington, Oregon and Colorado." The nine is the agreed roster (8 live bios plus Nicole Farahdel) and the three states are the client's 2026-08-27 decision, so both are sourced — but "attorneys, paralegals and operations staff" is a DRAFT gloss on the roster, and §8 bars stat counters, so treat the count as copy for AISV to confirm rather than a design element. Nav is General Counsel · Services · Our Approach · About Us · Blog, exactly the top level in `.logs/planning/site-architecture.md`; General Counsel stays top-level and is deliberately not duplicated inside the Our Approach dropdown. Every label is live-site text or already in `site-architecture.md` — nothing invented; the dropdown descriptors are DRAFT. **The strongest argument for keeping it:** the sold requirement is "a navigation structure that surfaces your services and the general counsel offer", and the crawl proved the General Counsel page is orphaned (zero inbound internal links across 98 pages, absent from the 5-item nav, `/general-counsel/` 301s to the parent). A closed six-label nav cannot show that offer's shape. 2. **Wordmark now reads "Equinox"** in header (30px) and footer (26px), not "Equinox Business Law Group". Provisional either way — the Brand Kit logo replaces every mark. The full legal name stays in the footer copyright line. A brand decision for the client, not ours; worth raising because the firm's own signature already points at `equinox.law`. 3. **One header CTA: "Contact Us"** (gold), replacing the paired "Take the Assessment" + "Book a Consultation". The assessment moved into the mega-menu CTA card; the hero still carries both paired CTAs. **If this stands, two plans need amending:** `.logs/planning/site-architecture.md` (specifies both CTAs in the header on every page) and `.logs/planning/tracking-conversion.md` (the transitional CTA loses its persistent placement — the one thing AISV's funnel leans on). Not amended yet, pending Rian. Header was also widened earlier the same day: `.wrapwide` 1440/56px gutters, replacing the 1120/80px container, because the nav read as cramped. **Served and verified:** `https://equinoxbusinesslaw.demoing.info/wp-content/mockups/home-A-v1.html` — HTTP 200, 53,720 bytes, `h1=1 h2=11 h3=13`, draft=0, twitter/facebook=0, currency=0. Source of truth is `notes/mockups/home-A-v1/src/Main.dc.html`; the standalone page is generated from it, so edit the artboard and regenerate, never the served file. **Next:** the DRAFT label still has to be reinstated on the filed export (pre-flight item 6) before anything reaches Rian or the client, and the footer still carries a "Brand Kit logo to follow" tag. --- ## 2026-09-03 (founding year) — Adi + Claude — longevity request triaged; THREE founding years found on the client's own site **Request (Adi):** state the firm's longevity — "20+ years, started 2005, so 21 years". **Not in Step 1** (§8 bars stats and number counters and any copy outside the brand story), but chasing it turned up something that matters more than the mockup: **the live site gives three different founding years.** | Live page | Says | Implies | |---|---|---| | `/about-us/` | "We began in **2004** as Small Business Legal Services" | 2004, predecessor name | | Michelle's bio | "In **2005**, after years in business, Michelle decided it was time to launch her firm" | 2005 | | `/blog/20-years-strong-…/` | "the Great Recession hit in **2009** … That year, I rebranded to Equinox and launched our … General Counsel Services (GCS) model" | The Equinox brand dates from 2009 | The client's own anniversary campaign counts from 2005 — "20 Years, 20 Lessons" (2025-04-14) and "Closing Out Twenty Years with Purpose" (2026-04-13) closing a twentieth year that ran April 2025 to April 2026. So Adi's 2005 matches the client's own maths and the About page disagrees with it. **Why it matters beyond copy.** `foundingDate` is a factual claim in structured data about a PLLC whose formation date is public record — a wrong value is checkable and worse than an absent one. The schema plan already said "do not infer a founding year from the anniversary logo; ask", which was the right instinct; that row now carries the evidence and the field stays empty until **Michelle Bomberger** confirms **which entity the date describes** — the predecessor practice (2004/2005) or Equinox Business Law Group PLLC (rebrand 2009). Recorded as `.memory/naming-conflicts.md` §5, alongside the firm-name, assessment-name, Alicia-slug and licensed-states conflicts. **A recommendation worth carrying into the review call: never hard-code a year count.** The client has just lived this failure — they retired the 20th-anniversary logo *because the number expired*, in the same 2026-08-27 email that gave us the design brief, and they are deliberately moving away from anniversary framing. "21 years" needs editing every April; "since " never does. If a longevity signal is wanted, that is the form, and the wording is AISV's to write. **For Rian:** add the founding-year question to the same list as the canonical legal name, the street address and whether an office exists — all four are Michelle/Alicia questions and all four block parts of the entity layer. ## 2026-09-03 (Phase 0 done) — Adi + Claude — shared groundwork built; five design requests triaged; 4 need Rian **Phase 0 of Step 1 is complete.** `notes/mockups/shared-v1/` now holds the groundwork both directions render from: `copy-deck.md` (all 13 sections, generated mechanically from the brand story — **1386 of 1400 source words verified carried**, the 14 absences being the source's own 7 annotation labels and the revenue figure, which is correctly the placeholder); `design-system-provisional.md` (palette and type extracted from live CSS, labelled provisional until the Brand Kit lands, plus the asset and licence positions); and `directions-and-placeholders.md` (the five-axis declaration and a 9-row placeholder register). `.logs/planning/step1-execution.md` has Phase 0 ticked. **Design-system findings.** Live palette is deep teal `#004963` (53 uses) plus gold `#ffd457` (60) on `#2c2c2c` text; both directions keep the pair, gold as the single accent, teal structural. **Montserrat does everything** — headings and body, both `!important`, headings at weight 900 — and **Roboto is loaded from Google Fonts on every page and then entirely overridden**, a wasted font load on the performance baseline. Since the type chosen here carries 513 migrated posts, both directions pair a real text face for body with a sans for UI, open-licence and self-hosted, both labelled provisional (the kit names no faces, so §7 puts both pairings in our judgement). **Zero licence exposure by design:** no photograph is placed in either direction (images are outlined slots), Direction B's icons come from the set Kadence Blocks already ships, and both typefaces are open-licence. Nothing requires a purchase after approval. **A and B differ on all five structural axes** (§7 needs three): hero composition, sectioning device, construction of the four patterns, role of imagery, header composition. Declared before drawing so pre-flight item 3 is checkable rather than argued afterwards. **Five requests from Adi, triaged — full table in `.logs/planning/step1-execution.md`.** One accepted, two already covered, two are fence crossings for Rian: 1. **Pain points must lead — ACCEPTED, as hierarchy not copy.** The brand story already carries 13 concrete pain lines in sections 2 and 3 directly under the hero; the risk was design burying them. Both directions now give those sections real visual weight. No copy changed. 2. **A dedicated FAQ section — already sold.** Section 10 *is* the FAQ section. 3. **A lawyer grid — already planned**, as the team index of 9 headshots (a headshot is the bio, not a team photo). Just not on Home. 4. **Lawyer faces on the home page — RIAN.** Contradicts the client's written decision of 2026-08-27, whose stated reason was maintenance burden. That is answerable (headshots on bios change rarely), so it is worth putting to them at the review call — but never added unilaterally, because the mockup is the client's first look at whether we heard them. 5. **Google reviews section (4.5 / 14) — RIAN.** A §8 fence crossing. Also two risks to settle first: self-serving `AggregateRating` markup is against Google's structured-data guidelines for `LocalBusiness`/`Organization` (display is fine, markup is not — verify against current guidance), and Washington RPC 7.1 constrains a law firm's use of testimonials. The rating needs a dated verified source. 6. **Phone easy to reach — RIAN.** §6 fixes the header contents and bars a header phone number; §7 bars a phone button as a third ask. Real point on mobile, where a `tel:` link costs no visual weight and is trackable; a question for the review round, and if accepted `.logs/planning/tracking-conversion.md` gains a `tel:` click event. **Next: Phase 1, Direction A** — desktop full length, mobile views, direction statement, callouts. Then Phase 2 (Direction B), then the 29-item pre-flight, exports and handoff. Still owed by Rian: the Brand Kit, the two Step 1 dates, and a re-ask on sites the client likes. ## 2026-09-03 (later) — Adi + Claude — 98-page crawl filed and digested; 3 new findings, 2 crawler errors caught **Filed.** `notes/crawl/` created with filing rules and indexed in `notes/README.md`; Adi's Context Crawler capture (98 URLs, 64,065 words, 2026-09-03T11:53Z) filed there. Digest written into `notes/site-audit-2026-07.md` **2.7**. Every claim re-verified against raw page source before being written down — two of the crawler's own summary fields are wrong about the site and are recorded as quirks in `notes/crawl/README.md` so nobody trusts them later. **The one that matters: the General Counsel page is effectively orphaned.** `/our-approach/general-counsel/` returns 200 with a real description, but it is not in the navigation, has **zero inbound internal links across all 98 crawled pages**, was never reached by a link-following crawl, and the legacy `/general-counsel/` shortcut **301s to `/our-approach/`, the parent — not to the page**. One blog post links that shortcut, so a reader who clicks it never sees the offer. The firm's core service, and the subject of AISV's entire 12-month plan, is unreachable to anyone who does not already know its URL. **This is the hardest evidence yet for the sold nav restructure, and it sharpens the Fractional GC add-on conversation: AISV wants that offer "moved high on the homepage" while today it cannot be reached at all.** For Rian, at the review call. **Also new.** (a) **Every title on the site** ends "- Equinox Law Group", not just the home page — the whole title layer carries the non-canonical name, which is the strongest evidence for the canonical-entity deliverable. (b) **The four policy pages are Termageddon JavaScript embeds** (21-23 words of HTML; "Please wait while the policy is loaded"), so the sold "4 policy pages migrated directly" means **re-embedding Termageddon, not copying text** — there is no text in the database to copy. (c) The primary nav is five items (About Us, Our Approach, Our Team, Blog, Legal Health Check); neither practice areas nor general counsel appear in it. **Two crawler errors caught before they entered the plans.** Its `pages_with_description: 0` and `pages_with_schema: 0` are both artifacts. The real metadata finding is the opposite and worse in an interesting way: **every page emits two `` tags — an empty one from the `html5blank` theme, then Yoast's populated one.** The sold "unique meta description per URL" therefore means removing a duplicate, not writing copy. Its heading counts also over-count (259 H1s claimed; raw source shows two per page, three on `/contact/`), so audit 2.1 stands unchanged. **Redirect-map material found in the live link graph**, all in audit 2.7: `/about-us/team` is a **404 linked from the assessment page**; `/events/` 301s to home; `/blog-archive/` is a second blog index with all 57 pagination pages linked; `/our-approach/a-la-carte-solutions/`, `/eula/` and `/newsletter-sign-up/` return 200 but are linked from nothing in the crawl (orphan candidates, confirm from the exported site). **One open question closed.** `.memory/naming-conflicts.md` item 3 asked whether both of Alicia's bio URLs resolve. They do, and `alicia-megrath` **already 301s to `alicia-wimmer`** — so the live site has already chosen the canonical slug and the working default is now confirmed for the bio. The team index still links the old URL and the author slug is still `aliciam`; the redirect map carries the 301 forward so it is not lost at cutover. **Effect on Step 1: almost none, deliberately.** The crawl confirms the nav labels and the header strapline ("Strategic Legal Counsel for Businesses located in WA, OR, CO, VA & DC!", still live 2026-09-03, which is the "before" the mockup answers). It supplies no palette or type — the crawl carries no CSS — so task 0.1 still needs its own extraction. Step 1 is unchanged and unstarted. ## 2026-09-03 — Adi + Claude — live-site review; four findings documented; Step 1 not yet started **What this session did.** Orientation read of the whole workspace, then a read-only pass over the live site (`/`, `/contact/`, `/our-approach/general-counsel/`, `/practice-areas-industry/`) to check four things Adi flagged. All four confirmed and written into the plans; nothing was built and Step 1 (the two home-page directions) has not started. **1. Direct CTA should be an on-site form, not the Outlook link (Adi's recommendation).** Re-verified 2026-09-03: the home page still has exactly one CTA, "Schedule a Meeting" → `outlook.office.com/bookwithme/...`. An outbound link is measurable only as a click; the booking completes on Microsoft's domain, so there is no thank-you page, no confirmed-conversion event, and no way to separate a click that booked from one that bounced. An on-site consultation form gives a real conversion on the Gravity Forms confirmation, plus the source field and light qualification already sold for clean Pipedrive routing — which is what AISV's "Instrument the pipeline" needs. Cost to the client: they lose Outlook's self-serve calendar picker. Recorded in `.logs/planning/tracking-conversion.md` (Direct CTA destination + open question 4) and `notes/site-audit-2026-07.md` 4.1. **Rian: put this to Alicia Wimmer / Michelle Bomberger at the mockup review call.** No effect on Step 1 — the button is drawn the same either way. **2. No address — and possibly no office at all.** Verified: `/contact/` has no street address in the page and no `PostalAddress`/`streetAddress`/`postalCode` in its JSON-LD; the only "Bellevue" is the footer's Bellevue LifeSpring link. Every plan so far assumed the address was merely unsupplied. **New question: does the firm have a client-facing office?** If it is remote-first or appointment-only there is none to publish, which changes whether the Contact page gets an address block and map at all and whether the entity carries `address` + `geo` or `areaServed` only. Recorded in `notes/site-audit-2026-07.md` 4.3 and the Firm entity address row of `.logs/planning/schema-entity-plan.md`. **Rian: ask it with the canonical legal name and billing address, all outstanding since 2026-08-24.** Never invent a street. No effect on Step 1 (the footer address is a labelled placeholder either way). **3. No visible breadcrumbs, but Yoast emits `BreadcrumbList` anyway.** Checked on four pages: no breadcrumb element, no `aria-label="breadcrumb"`, nothing rendered — yet the JSON-LD graph carries a correct trail on every page. The structured data describes a navigation aid the site does not have. Breadcrumbs are already sold and planned (visible Kadence trail on every template except Home; `BreadcrumbList` from `bw-ai-schema-pro`, Yoast's graph off), so this is the measured "before", now in `notes/site-audit-2026-07.md` 2.6. No action, no scope change. **4. Thin inner pages / no per-service URLs.** Confirmed the structural version of it: the six services are `h4`s and the five groups `h3`s inside the single `/practice-areas-industry/` URL, so no service has its own URL, title, meta description, link target or schema node — one door for a dozen buying intents. (That page's own title is an `h2`; the `h1` is the logo link rendering as `-->`.) Per-service pages are the **Practice Area and Topic Hub Architecture add-on, which was not accepted**, so the base scope rebuilds this as one page and surfaces services through the nav. Written into `notes/site-audit-2026-07.md` 3.5. **For Rian:** this is the structural reason the site cannot carry AISV's keyword and persona-hub plans; if it becomes the blocker it is a scope conversation with the client, never a quiet addition. **Related tension worth raising at the same call** (not new, but now sharpened): AISV's Phase 01 names the Fractional GC landing page "moved high on the homepage" as a priority move, while that add-on is still pending and the Step 1 fence bars any GC/tiers teaser from the home page. The mockup will therefore not show the thing AISV's own plan calls the priority. Closing that go/no-go at the review call is the clean fix (`.memory/add-on-status.md`). **Still next, unchanged:** Step 1 — two home-page mockups (A and B), home page only, to `.logs/planning/homepage-mockup-brief.md`. Still owed by Rian before/at that step: the Brand Kit (nothing pulled; start provisional), the two Step 1 dates, and a re-ask for sites the client likes. ## 2026-09-02 — Rian + Claude — v8 scaffold and full reference-doc set; NEXT: two home-page mockups (Adi, home page only) **State.** The project is accepted and onboarded (proposal accepted 2026-08-13; onboarding email 2026-08-27). Staging is still an untouched Kadence template clone: nothing designed, nothing built. The workspace was scaffolded to the v8 shape today and every reference document was written from the proposal, the client thread, AISV's strategy deck and brand story, and a same-day measurement of the live site. Pricing has been scrubbed from the project; the originals that carry it were moved out. **Next, in this order (Adi; first session):** 1. Read `agents.md` → `brief.md` → `.logs/planning/homepage-mockup-brief.md` → `.logs/planning/design-direction.md`. The brief is the contract for this step. 2. Deliver **two home-page mockups showing two design directions (A and B), home page only**, to Rian first. No inner pages, no second page of any kind, no pattern library, no Kadence build, no third direction, until Rian has chosen a direction and recorded it here. 3. Run the brief's pre-flight checklist (section 10); file the exports under `notes/mockups/home-A-v1/` and `home-B-v1/`; write the next handoff entry (what was delivered, the one-sentence direction statements, every placeholder used, open questions). **Rian owes before or during Step 1:** - Forward Alicia Wimmer's 2026-08-27 email (Brand Kit and 2026 Brand Photo Shoot SharePoint links) to Adi, or pull the kit into `notes/source/brand-kit/` and the selected photos into `notes/source/photos/`. The new logo is in that kit. Until then the live palette is a labelled provisional reference and the logo slot is a labelled placeholder. - Set and record here the two Step 1 dates (directions to Rian; mockup to the client), and decide whether the one-week mockup clock promised 2026-08-24 started on 2026-08-27. - Ask Alicia Wimmer again for examples of sites they like (asked 2026-08-24, unanswered); do not block on it. - Put the assessment's single name and the Fractional General Counsel landing page go/no-go on the review call agenda. - Decide in Phase 2 whether the header sticks; the Step 1 decision (2026-09-02) is that the header carries both paired CTAs and no state list. **Open decisions carried in the plans (not blocking Step 1):** migration route A (restore the live database) vs B (import into the clone) — Rian, before Phase 3; Yoast graph off vs aligned; canonical legal name and street address; author roster keep/reassign/retire; licence transfer (Gravity Forms, Search & Filter Pro, Termageddon); Cloudflare and registrar access; GTM access (granted from the GA4 admin, not the Tag page); newsletter platform (Constant Contact inferred); Pipedrive transport; the Outlook booking link; the licensing wording (WA/ID/OR on the live disclaimer vs the client's WA/OR/CO). **Where the removed originals are.** `/home/rian/equinoxbusinesslaw-removed-2026-09-02/` (Rian-only): the proposal, the pre-quote strategy notes, both Vercel-vs-WordPress replies, the first planning session's transcript, the `.eml` thread, and four other clients' proposals that had been copied here (those four also sit in `/srv/apps/leaguelaw/notes/`). They carry pricing and do not come back into the project; `notes/inbox/README.md` says how new material is filed. **Substrate friction logged** in `.logs/v8-feedback.md` (scaffolder creates `main/` for a WordPress project; gateway-generated `CLAUDE.md` blocks the symlink).