sync: auto-sync from GURU-5070 at 2026-06-14 20:04:14

Author: Mike Swanson
Machine: GURU-5070
Timestamp: 2026-06-14 20:04:14

projects/acg-website-showcase/design/final-gemini-light.md

@@ -0,0 +1 @@
+at-written.

projects/acg-website-showcase/design/gemini-weigh-prompt.txt

@@ -0,0 +1,34 @@
+You are the LEAD design authority making the final call on art direction for a website. A second model (Grok) has proposed three directions as INPUT. Your job is to weigh them and decide.
+
+PROJECT: Flagship single-page marketing website for "Arizona Computer Guru" (ACG), a Tucson MSP/IT-services company since 2001. Differentiator: "concierge IT" — go far beyond typical IT companies, genuine client relationships, transparent honest pricing, kind+direct (never condescending), local Tucson presence. Brand cues: warm amber-orange accent oklch(0.70 0.18 55), display font Barlow Condensed, body font Lexend.
+
+HARD REQUIREMENTS: (1) must NOT look like generic AI-slop SaaS template; (2) genuinely beautiful + distinctive; (3) ALL text readable in BOTH light and dark themes (WCAG AA contrast, ~4.5:1 body); (4) interactive IT-cost calculator; (5) sections: hero, concierge story, services, GPS pricing tiers, trust/proof, FAQ, contact. Built as hand-crafted static HTML/CSS/vanilla-JS.
+
+GROK'S THREE PROPOSED DIRECTIONS:
+
+== 1. SONORAN LEDGER ==
+Concept: page feels like a trusted local bookkeeper's ledger for the web — warm paper surfaces, precise horizontal rules, restrained type; pricing/calculator/story treated as permanent records, no marketing theater.
+Light: bg cream #F7F3EB, surface #EDE6D9, text #2A2521, secondary #5A5148, orange accent only on active numbers/underlines/primary button. Dark: bg #1C1814, surface #2A2520, text #E8DFCE, secondary #C4B8A3, desaturated orange.
+Type: Barlow Condensed 600-700 headlines + "Since 2001" lockup; Lexend body; JetBrains Mono for ALL prices/calculator output/endpoint counts (ledger precision).
+Layout: contained hero, long single-column story with subtle rules, services as continuous text with orange underlines (not cards), pricing as a wide ruled rate card, calculator = the largest break (full-width "open ledger page" with live totals), quiet FAQ/contact.
+Signature: faint continuous warm-gray ledger rulings (0.5-1px) behind story/pricing/calculator on a shared baseline grid so the whole scroll reads as one book.
+
+== 2. DESERT THRESHOLD ==
+Concept: site experienced as a sequence of architectural thresholds — moving from bright desert into shaded well-kept rooms; thick walls, deep reveals, Tucson 5pm light.
+Light: bg plaster #F4F0E8, surface sand #E6DFD2, text #24201C, secondary #51463C, orange on door-like details + calculator action. Dark: bg umber #1A1612, surface #25211C, text #EDE3D3, secondary #B8A998.
+Type: Barlow Condensed section titles + big "concierge" word; Lexend body; a quiet condensed geometric (Inter) for nav/buttons/calculator controls only.
+Layout: tall framed hero, story = wide text column vs full-height "wall" image, services as a stepped vertical "hallway" list, pricing tiers as three recessed "openings in a thick wall" (not cards), calculator in its own deep niche, tighter FAQ/contact.
+Signature: every section divider is a thick horizontal "beam/lintel" (CSS border+shadow) like moving under architecture; calculator has the deepest reveal, sits lower.
+
+== 3. THE WORKBENCH ==
+Concept: everything arranged on one long solid workbench; honest materials (wood, metal, paper, warm light); visitor sits across from the craftsman; no theater.
+Light: bg warm gray #F1EDE5, surface wood #D9CDB8, text #2C2621, secondary #5C5146. Dark: bg #1D1914, surface #2E2720, text #E6D9C7, secondary #A99A85.
+Type: Barlow Condensed headlines + pricing tier names only; Lexend everything else; no third face.
+Layout: low wide hero "across the bench top", story two tight columns above a horizontal work-surface band, services as running inventory down left edge, pricing + calculator on widest "continuous bench surface" (tiers left, live calculator right), trust as small object photos.
+Signature: pricing tiers + calculator rendered as physical objects resting on one continuous wooden plane with realistic soft shadows.
+
+YOUR TASK:
+1. For EACH direction: assess (a) how distinctive/anti-generic it truly is, (b) light+dark contrast/readability risk given the proposed palettes — call out ANY pairs that fail ~4.5:1 and give corrected hex, (c) build feasibility in static HTML/CSS, (d) the single biggest risk.
+2. Make the CALL: which direction to build (you may recommend a refined hybrid). Justify against "concierge, premium, Tucson-local, anti-generic" and against readability in both themes.
+3. Give the build 4-5 concrete, non-negotiable design rules to guarantee it's beautiful and NOT AI-slop.
+Keep it tight and decisive, under ~650 words.

projects/acg-website-showcase/design/gemini-weigh-response.md

@@ -0,0 +1,45 @@
+[OK] VERDICT: Build a refined version of **SONORAN LEDGER**. 
+
+This direction captures the "Concierge" and "Since 2001" essence through the lens of precision, longevity, and transparency. It is the strongest antidote to SaaS-slop because it trades "shiny tech" for "trusted record."
+
+---
+
+### 1. DIRECTION ASSESSMENT
+
+**== 1. SONORAN LEDGER ==**
+*   **(a) Distinctiveness:** Very High. It reframes IT as a meticulous craft rather than an abstract cloud service. It feels established and high-end.
+*   **(b) Contrast Risk:** Light Theme: Orange accent `oklch(0.70 0.18 55)` (~#FF8D2E) on Cream `#F7F3EB` is ~2.3:1. **[ERROR]** This fails for text. *Correction:* Darken orange to `#BD5A00` for text links/active numbers. Dark Theme: Orange on `#1C1814` is ~6.2:1 (Pass).
+*   **(c) Build Feasibility:** Extreme. CSS Grid + `repeating-linear-gradient` for ledger lines.
+*   **(d) Biggest Risk:** Looking like a dry accounting firm. Needs high-quality typography and motion to feel "alive."
+
+**== 2. DESERT THRESHOLD ==**
+*   **(a) Distinctiveness:** Medium. Atmospheric but risks feeling like an architecture portfolio.
+*   **(b) Contrast Risk:** Solid. Secondary `#51463C` on `#F4F0E8` is ~6.3:1 (Pass). 
+*   **(c) Build Feasibility:** Moderate. Requires careful box-shadow management to maintain "depth" without performance lag.
+*   **(d) Biggest Risk:** Heavy "beams" and "walls" might make the content feel cramped on mobile.
+
+**== 3. THE WORKBENCH ==**
+*   **(a) Distinctiveness:** High, but dangerously nostalgic.
+*   **(b) Contrast Risk:** Solid. Secondary `#5C5146` on `#F1EDE5` is ~5.7:1 (Pass).
+*   **(c) Build Feasibility:** Low. Success depends entirely on the quality of "wood" assets/textures. If they look like stock photos, the brand dies.
+*   **(d) Biggest Risk:** Falling into the "2012 Skeuomorphism" trap. Hard to execute without looking dated.
+
+---
+
+### 2. THE CALL: SONORAN LEDGER (REFINED)
+
+I am choosing **SONORAN LEDGER** with a hybrid infusion of **DESERT THRESHOLD’s** depth. 
+
+**Justification:** ACG is a concierge service. A ledger represents the "Permanent Record" of a 25-year relationship. It communicates that every endpoint and every dollar is accounted for. It is the ultimate expression of "transparent, honest pricing." By using JetBrains Mono for data and Lexend for the story, we create a "High-End Workshop" feel that is professional yet approachable.
+
+---
+
+### 3. NON-NEGOTIABLE DESIGN RULES (ANTI-SLOP)
+
+1.  **THE INK RULE:** The orange accent is treated as "highlighting ink." Use it ONLY for active data points, underlines, and the primary CTA. Never use it for large background blocks or generic icons.
+2.  **ZERO GENERIC ICONOGRAPHY:** Do not use FontAwesome or Heroicons. If a section needs an icon, use a CSS-drawn geometric shape, a simplified technical schematic, or a high-resolution photo of actual hardware. AI-slop relies on "Friendly 3D People" and "Outline Icons"; we use "Precision Marks."
+3.  **THE LEDGER GRID:** Every element on the page must snap to a strict 24px vertical baseline grid. The "faint rulings" are not just decoration; they must align perfectly with the `line-height` of the Lexend body text.
+4.  **DATA AS DESIGN:** The IT-cost calculator is the centerpiece. Do not hide it in a "Get a Quote" pop-up. Treat the calculator's output with the same typographic dignity as the Hero headline. Large, mono-spaced numbers that feel "stamped" onto the page.
+5.  **NO OVER-SMOOTHED RADIUS:** Standard SaaS uses 12px-16px border-radius. We use 0px (sharp) or a maximum of 2px. Sharp corners communicate "Precise" and "Manual."
+
+[INFO] This direction provides the highest "Trust-per-Pixel" for a local MSP. Proceed with static build.

projects/acg-website-showcase/design/generate-images.sh

@@ -0,0 +1,22 @@
+#!/usr/bin/env bash
+# Generate Sonoran Ledger imagery with Grok. Photographic, anti-AI-slop, warm Tucson palette.
+set -u
+ROOT=/d/ClaudeTools
+GROK="$ROOT/.claude/skills/grok/scripts/ask-grok.sh"
+OUT="$ROOT/projects/acg-website-showcase/assets/images"
+cd "$ROOT"
+
+echo "=== [1/4] hero ==="
+bash "$GROK" image "Photorealistic editorial photograph, late afternoon golden hour. A warm light-wood desk in a calm Tucson office. On the desk: an open paper accounting ledger with neat handwritten columns of numbers, a modern matte-aluminum laptop with no logos open beside it, a plain white ceramic coffee cup, and a brass fountain pen. Behind the desk a large window frames the distant Santa Catalina mountains and a single saguaro cactus in warm hazy desert light. Natural raking side light, soft long shadows, subtle fine film grain, gentle shallow depth of field. No people. Calm, premium, trustworthy mood. Warm cream, tan and soft amber tones, restrained and not orange-saturated. Wide 3:2 landscape composition." "$OUT/hero.png"
+
+echo "=== [2/4] story windowsill ==="
+bash "$GROK" image "Photorealistic architectural close-up. Warm desert golden-hour light rakes across the corner where a smooth hand-troweled white stucco wall meets a clean light-wood windowsill. Minimal, calm, textural, quiet shadow play. Tucson afternoon light, soft fine film grain, warm cream and tan palette. No text, no people, no logos. Wide 3:2 landscape." "$OUT/story.png"
+
+echo "=== [3/4] trust still life ==="
+bash "$GROK" image "Photorealistic editorial still life on a warm wooden desk in soft afternoon window light. In focus: an open paper notebook with a date neatly hand-written in ink, and a well-worn keyboard. In the soft out-of-focus background, a small potted barrel cactus sits on a windowsill. Honest, lived-in, premium and human. Warm cream and charcoal palette, fine film grain. No logos, no visible faces. Wide 3:2 landscape." "$OUT/trust.png"
+
+echo "=== [4/4] paper texture ==="
+bash "$GROK" image "Seamless subtle warm cream paper texture, very faint fibers and tone variation, almost flat, high resolution, soft and clean, suitable as a quiet website background. No text, no objects, evenly lit. Square." "$OUT/paper.png"
+
+echo "=== DONE ==="
+ls -la "$OUT"

projects/acg-website-showcase/design/grok-direction-prompt.txt

@@ -0,0 +1,24 @@
+Design-direction consultation (text only, no image generation). You are an opinionated senior art director.
+
+CONTEXT: Art-directing a flagship single-page marketing website for "Arizona Computer Guru" (ACG), a Tucson MSP / IT-services company operating since 2001. Core differentiator: "concierge IT" — they go far beyond typical IT companies, build genuine relationships with clients, transparent honest pricing, kind + direct (never condescending), strong local Tucson presence. Brand voice from their own materials: anti-sales-games, transparent, premium-but-grounded, "we built it the way we'd want to be treated."
+
+Existing brand cues to respect (but you may evolve): accent orange ~oklch(0.70 0.18 55) (a warm amber-orange), display font Barlow Condensed, body font Lexend.
+
+HARD REQUIREMENTS:
+- Must NOT look like a generic AI-slop SaaS template (no default gradient-blob hero, no purple, no generic 3-card row clichés).
+- Must be genuinely beautiful, distinctive, memorable.
+- ALL text readable in BOTH a light theme and a dark theme.
+- Includes an interactive IT-cost calculator.
+- Sections to convey: hero, concierge story/differentiator, services, GPS pricing tiers ($19/$26/$39 per endpoint + support plans), trust/proof, FAQ, contact.
+
+DELIVERABLE: Give me 3 DISTINCT, concrete, BUILDABLE art directions. For each include:
+1. Name
+2. Core visual concept (one tight paragraph)
+3. Color strategy — explicit for LIGHT theme and DARK theme (name the background, surface, text, accent roles)
+4. Typography approach (how Barlow Condensed + Lexend are used; any third face)
+5. Layout / section rhythm (how the long scroll is paced)
+6. Imagery treatment — exactly what hero image + 2-3 section images Grok should generate (describe each image so I can prompt it)
+7. ONE signature distinctive element that makes it memorable
+8. What specifically keeps it from looking generic
+
+Then RANK the 3 by which best expresses "concierge, premium, Tucson-local, anti-generic" and say why in 2 sentences. Be specific and opinionated. Keep under ~750 words total.

projects/acg-website-showcase/design/grok-direction-response.md

@@ -0,0 +1,54 @@
+**Sonoran Ledger**
+
+Core visual concept: The page feels like a trusted local bookkeeper’s ledger updated for the web — precise horizontal rules, warm paper surfaces, and restrained typography carrying every number and promise with the same weight as the desert light. No marketing theater; the design treats pricing, the calculator, and the story as permanent records.
+
+Color strategy — LIGHT: Background warm cream #F7F3EB; surface soft paper #EDE6D9; primary text deep warm charcoal #2A2521; secondary #5A5148; accent remains the specified oklch(0.70 0.18 55) orange used only for active numbers, underlines, and the single “Get the estimate” button. DARK: Background warm deep charcoal #1C1814; surface muted slate-brown #2A2520; primary text warm parchment #E8DFCE; secondary #C4B8A3; accent orange desaturated slightly for contrast on dark.
+
+Typography approach: Barlow Condensed 600–700 for every headline, subhead, and the “Since 2001” lockup with tight tracking and generous line height. Lexend for all body, story, and form labels at comfortable reading sizes. JetBrains Mono (or system mono) used exclusively for every price, the calculator output, and endpoint counts — this single-face restriction gives the whole page its ledger precision.
+
+Layout / section rhythm: Hero (contained, not full-bleed), then a long single-column “page” for the concierge story broken only by subtle rules. Services read as continuous justified text with occasional orange accent underlines instead of cards. Pricing sits as a wide ruled rate card. The calculator becomes the largest break in rhythm — a full-width interactive panel treated as an open ledger page with live totals. Trust and FAQ stay quiet and narrow; contact closes with one clear phone/email block.
+
+Imagery treatment: Hero — late-afternoon Tucson interior, wooden desk with an open paper ledger showing neat columns, a modern but unbranded laptop, a white coffee cup, and a window framing distant Catalina mountains and one saguaro; natural side light, slight film grain, no people. Section image 1 (concierge story) — close crop of a stucco wall meeting a clean wooden windowsill with desert light raking across it. Section image 2 (trust) — horizontal strip of three quiet details: a hand writing a date in a notebook, a well-worn keyboard on a desk, a small potted barrel cactus on a windowsill.
+
+Signature distinctive element: Extremely faint warm-gray ledger rulings (0.5–1 px) that run continuously behind the story, pricing, and calculator, aligned to a consistent baseline grid so the entire scroll reads as one continuous book.
+
+What specifically keeps it from looking generic: The entire information architecture is subordinated to the ledger metaphor; there are no floating cards, no gradient blobs, no three-up grids, and the calculator is not an afterthought widget but the central “open page.”
+
+**Desert Threshold**
+
+Core visual concept: The site is experienced as a sequence of thresholds — moving from the bright desert into shaded, well-kept rooms where real work and real conversations happen. Architecture, not abstraction: thick walls, deep reveals, and light that feels like Tucson at 5 p.m.
+
+Color strategy — LIGHT: Background off-white plaster #F4F0E8; surface warmer sand #E6DFD2; primary text near-black #24201C; secondary #51463C; accent orange used for door-like details and the calculator’s primary action. DARK: Background deep warm umber #1A1612; surface #25211C; primary text soft warm #EDE3D3; secondary #B8A998; accent orange kept but never glowing.
+
+Typography approach: Barlow Condensed for all section titles and the large “concierge” word in the story. Lexend for body and most UI. A quiet, slightly condensed geometric (Inter or similar) for navigation, buttons, and calculator controls only — keeps the display face special.
+
+Layout / section rhythm: Short, tall hero with a literal framed view. Concierge story uses a wide left text column against a right full-height “wall” image. Services use a stepped vertical list that feels like walking down a hallway. Pricing tiers are presented as three equal “openings” in a thick wall (subtle recessed panels, not cards). The calculator sits in its own deep niche after pricing. Trust, FAQ, and contact fold back into tighter, lower-ceiling passages.
+
+Imagery treatment: Hero — exterior of a simple Tucson adobe or stucco building at golden hour, shot straight-on through a deep shaded portal or window frame so the viewer is literally looking “in”; one clean saguaro and mountain ridge visible beyond; no people. Section image 1 — interior corner where white plaster meets thick wooden lintel and a slice of bright desert is visible through an open door. Section image 2 — tight shot of a real wooden threshold with a worn doormat, a pair of clean work boots, and a small brass house number plate.
+
+Signature distinctive element: Every major section divider is a thick horizontal “beam” or lintel (CSS border + shadow) that creates the sensation of moving under architectural elements; the calculator panel has the deepest reveal and sits lower, like stepping down into the workroom.
+
+What specifically keeps it from looking generic: The visual system is built from real Tucson residential and small commercial architecture rather than UI patterns; the pacing feels like walking through a cared-for building, not scrolling a marketing deck.
+
+**The Workbench**
+
+Core visual concept: Everything is arranged on a single long, solid workbench. Materials are honest (wood, metal, paper, warm light). The visitor sits across from the craftsman; pricing, the calculator, and proof are all laid out at working height with no theater.
+
+Color strategy — LIGHT: Background soft warm gray #F1EDE5; primary surface #D9CDB8 (actual wood tone); text #2C2621; secondary #5C5146; accent orange only on active elements and the calculator total. DARK: Background #1D1914; surface #2E2720; text #E6D9C7; secondary #A99A85; accent orange held at the same hue but lowered lightness for legibility.
+
+Typography approach: Barlow Condensed for headlines and the pricing tier names only. Lexend for everything else. No third face — the two fonts plus the physical surface treatment carry all distinction.
+
+Layout / section rhythm: Hero is low and wide, like looking across the bench top. The concierge story is two tight columns of text above a long horizontal “work surface” band. Services are listed as a single running inventory down the left edge. Pricing and the calculator occupy the widest, most physical-feeling section — a continuous bench surface that holds the three tiers on the left and the live calculator on the right. Trust uses small object photos set directly into the surface. FAQ and contact sit at the far end of the bench.
+
+Imagery treatment: Hero — straight-down or 3/4 view of a real wooden workbench in a Tucson garage or workshop; on the bench: a clean laptop, a paper work order, a tape measure, a small orange-handled tool, and a cup; strong side light from a window, visible concrete or stucco wall behind. Section image 1 — macro of hands (one older, one younger) plugging a clean network cable into a small switch on the same bench. Section image 2 — close detail of the bench edge with a few honest scuffs, a brass ruler, and a printed invoice showing the $19 / $26 / $39 numbers.
+
+Signature distinctive element: The pricing tiers and calculator are rendered as objects actually resting on the same continuous wooden plane; subtle material texture, soft realistic shadows, and a consistent “edge” treatment make the interactive elements feel physical rather than overlaid.
+
+What specifically keeps it from looking generic: The metaphor is resolutely physical and local (a real bench in a real Tucson workshop) instead of any digital “surface”; the calculator is not a module but part of the same working surface as the prices.
+
+**Ranking**  
+1. Sonoran Ledger (best)  
+2. Desert Threshold  
+3. The Workbench
+
+Sonoran Ledger best expresses concierge, premium, Tucson-local, and anti-generic because the entire visual language is built around transparent record-keeping rather than marketing decoration — the calculator and pricing literally sit inside the “books,” which directly embodies the client promise of honest numbers and no games. The other two are still strong and local, but Threshold risks feeling more like a boutique hotel and Workbench slightly more tradesman than the relationship-first concierge positioning.

projects/acg-website-showcase/design/review-gemini.md

@@ -0,0 +1,29 @@
+### index.html
+[ERROR] Accessibility: FAQ accordion buttons lack `aria-controls` and panels lack `id`s (line 217). Verified by checking markup. Confidence: 100%.
+[WARN] Accessibility: Calculator `aria-live="polite"` (line 197) contains the entire output ledger. Refutation attempt: Maybe `app.js` debounces input? No, `app.js:125` fires `recalc()` and rewrites DOM immediately on every `input` event, causing severe screen reader spam while typing. Confidence: 100%.
+[OK] Form labels (line 261): Explicitly linked via `for`/`id`. 
+[OK] Focus visibility: Custom outlines exist for inputs, and default browser outlines remain intact for buttons since no global reset exists. Confidence: 100%.
+
+### styles.css
+[ERROR] WCAG Contrast (Light): `--ink-3` (`#837868`) on `--paper` (`#F7F3EB`) yields ~3.8:1, failing AA 4.5:1. Refutation attempt: Is it only used for large text? No, it's used for small body text like `.hero__note` and `.calc__foot`. Corrected hex: `#6D6456`. Confidence: 100%.
+[ERROR] Accessibility: Collapsed FAQ answers `.faq__a` (line 327) hide visually via `max-height: 0` but lack `visibility: hidden`. Screen readers will inappropriately read collapsed answers. Confidence: 100%.
+[ERROR] Responsive: Mobile nav links are `display: none` < 880px (line 127). Refutation attempt: Because it is a single-page site, users can still scroll. However, removing primary wayfinding without a hamburger fallback completely breaks standard user expectation. Confidence: High.
+[WARN] Responsive: Pricing tables lack a horizontal overflow wrapper. A 5-column table will break 320px mobile viewports. Confidence: 100%.
+[OK] WCAG Contrast (Dark): `--ink-3` (`#9A8C77`) on `#1C1814` is 5.3:1. Both light/dark `--accent-ink` and button texts pass AA comfortably. Confidence: 100%.
+
+### app.js
+[WARN] Calculator Edge Case: Typing an empty string `""` evaluates safely to `0` mathematically (line 64). Refutation attempt: Does this break the math? No. Does it break UI state? Yes, `input.value` is not overwritten in the UI during typing, leaving the input visually blank while the calculator computes `0`. Confidence: 100%.
+[OK] Calculator Math: Divide-by-zero is handled safely via `endpoints > 0` condition (line 112). `NaN` correctly defaults to `0`. Confidence: 100%.
+[OK] Theme Toggle: Properly sets `aria-pressed` and respects system preferences dynamically (line 16). Confidence: 100%.
+
+### Design & Art Direction
+[OK] AI-slop: None detected. The "Sonoran Ledger" constraints (strict 24px baseline, tabular-nums, sparse orange accent) are mathematically and visually respected. Copy is direct and avoids generic SaaS bloat words.
+
+### PRIORITIZED FIX LIST
+1. **[CRITICAL]** Update `--ink-3` in `styles.css:12` to `#6D6456` to meet WCAG AA contrast.
+2. **[CRITICAL]** Add `visibility: hidden` to `.faq__a` (`styles.css:327`) and `visibility: visible` to its expanded state to prevent screen reader leakage.
+3. **[HIGH]** Implement a mobile menu fallback for viewports `< 880px` rather than purely hiding `.nav__link` (`styles.css:127`).
+4. **[HIGH]** Wrap `.plan-table` in an `overflow-x: auto` container to prevent layout breakage on narrow screens (`index.html:120`).
+5. **[MED]** Add `id`s to FAQ panels and `aria-controls` to FAQ buttons (`index.html:217`).
+6. **[MED]** Scope `aria-live` to specific total spans or debounce the `input` listener to prevent screen reader spam (`index.html:197`, `app.js:125`).
+7. **[LOW]** Add a `blur` listener to calculator inputs to visually sync empty/invalid inputs back to `"0"` (`app.js:61`).

projects/acg-website-showcase/design/review-grok.md

@@ -0,0 +1,62 @@
+**VERDICT**
+
+Hand-built static site that largely executes the "Sonoran Ledger" direction (warm paper #F7F3EB/#1C1814, sparse --accent orange as ink only, mono tabular numerals for money, 2px sharp corners, repeating-linear-gradient ledger rulings at 24px baseline). It is not generic AI-slop in the visual layer — custom tokens, no framework, hand-rolled selects/switches/steppers, sectional rulings, split trust numerals, and explicit "open book" copy differentiate it. However, the information architecture (hero/trust/story/services/pricing/calc/faq/contact/footer) is the standard MSP marketing skeleton, and several real defects exist, especially in JS behavior and mobile.
+
+Prioritized by the requested hunt areas. All analysis from the three full file reads. No modifications performed.
+
+**index.html**
+
+[ERROR] Mobile navigation breakage. At <=880px, `.nav .nav__link` are hidden via CSS with no hamburger, no remaining in-nav anchors, and no alternative (e.g., footer or select). Only the phone number and theme toggle survive in the header. Sections #services, #pricing, #calculator, #faq become unreachable without scrolling the entire page on phones/tablets. (cross-ref css/styles.css:154)
+
+[ERROR] "Send me this estimate" (id="sendEstimate") is a plain `<a href="#contact">`. It performs scroll only; calculator state (ledger lines, total) is never injected into #cf-msg or any hidden field. The contact form and estimator are completely disconnected. (index.html:362)
+
+[WARN] Schema.org LocalBusiness "image" and the two `<img>` src values point to "assets/images/hero.png" / "assets/images/story.png" (relative, no root guarantee). If served from a subpath the images 404 and JSON-LD is invalid. Width/height present on imgs (good). (index.html:20,82,124)
+
+[WARN] Accordion (FAQ) buttons carry aria-expanded correctly, but the answer containers lack role="region", id, or aria-labelledby wiring back to the button. Content remains in DOM (good for search), but grouping is weak for assistive tech. (index.html:377-407)
+
+[INFO] Semantics otherwise strong: `<main>`, skip link, section+aria-labelledby, table+caption+scope="col", label+for on all form controls (including the custom switch and number inputs), tel/mailto, descriptive alts on the two photos, novalidate + custom validation on contact. Trust strip uses a labeled section + grid of cells (not a list or dl, but acceptable). Inline style tweaks exist on a few containers for spacing (minor hygiene).
+
+[INFO] No obvious duplicate IDs, broken heading order, or missing lang/color-scheme. The `<span id="top">` inside main is harmless but odd.
+
+**css/styles.css**
+
+[INFO] Tokens and dark override correctly implement the spec: --paper/--surface warm, --rule/--rule-soft for lines, --accent/#BD5A00 (light) and #F2A24E/#F4A85C (dark) used only for marks, flags, underlines (.ul), section-tag::before rules, brand mark, hover states, and selection. No heavy rounded corners (2px max), no large blurs except header. .mono + font-variant-numeric: tabular-nums on all money. Ledger ruling via precise repeating-linear-gradient (23px transparent + 1px at 24px) on .ledger sections only. (css/styles.css:9-46,184-189,254, etc.)
+
+[WARN] Contrast. Tokens comment claims AA for --accent-ink. Core --ink on --paper is high-contrast. --ink-2 muted (#5A5148 light / #C4B8A3 dark) on body copy and small labels is borderline, especially at 0.78-0.92rem. Rule lines (rgba 0.16 / 0.08) and ledger rulings are intentionally faint; in dark mode or outdoors they become nearly invisible. This undercuts the "premium ledger" readability claim on real devices. (css/styles.css:13,38,101,186)
+
+[WARN] Mobile risks beyond nav. Stepper buttons fixed at 34px wide (sub-44px touch minimum). Many breakpoints (880/860/820/720/680) but no container queries; tables and grids can squeeze (right-aligned .num columns in plan-table). Header sticky + backdrop-filter is modern but the surviving mobile nav content (phone + 40px toggle) can feel cramped. No focus-visible beyond the form-control outline rule. (css/styles.css:154,288-292,264-269,346-349,382)
+
+[INFO] Distinctive execution, not templated. Custom chevron-less selects (bg-image linear gradients), custom .switch, custom .stepper (spinners explicitly killed), grid-gap + background-rule trick for trust separators, reveal using IntersectionObserver, section tags with accent rule, .tier--pop flag, .svc continuous ruled list instead of cards. The visual system fights generic. However, the overall page skeleton, "Most chosen" ribbon, trust strip, live two-pane estimator, and +/x FAQ are still recognizable marketing patterns.
+
+[OK] Reduced-motion, box-sizing, and basic reset present. Body transitions limited to bg/color.
+
+**js/app.js**
+
+[ERROR] Stepper bounds + direct edit desync (core bug). Stepper click path (js/app.js:139) does `Math.max(0, Math.min(500, v + dir))` and writes back. But `intVal` (67-72) only clamps the *read* value for calculations (`if (v > 500) v = 500; return v;`) and never mutates `el.value`. Typing 600 (or -5) into an endpoints/m365/voip field leaves the input showing the out-of-range number while every recalc, line, total, and per-endpoint uses the clamped 500/0. Subsequent stepper clicks read the lying input.value. (js/app.js:67-72,136-143)
+
+[ERROR] Calculator "per endpoint" math/presentation. `per = endpoints > 0 ? total / endpoints : 0` (125) then unconditionally renders "X per endpoint / mo". Total includes large fixed adders (support plan 200-850, equip 25, m365, voip, hosting). The displayed per-endpoint figure therefore amortizes the support plan etc. across seats. This contradicts the page claim "the same math we'd walk you through in person" and "per-endpoint pricing". Arithmetic is correct; the semantics of the output are misleading when any non-endpoint item is selected. (js/app.js:119,125-128)
+
+[WARN] Support-plan line exactly as flagged. `var support = numSelect("support");` (94) pulls the raw `<option value="380">` price. It is passed verbatim as the `cost` argument to `lineRow` (114): `lineRow((supportName || "Support plan") + " support", ..., support)`. The same raw value is added directly into total (119). For the "None" case (value 0) this produces the label "Support plan support" (supportName falls to "") with cost 0 (hidden by .is-zero). Functionally the total is correct (flat fee), but it is the only line that does not compute cost from a rate; it trusts the select value as both identifier and dollar amount. (js/app.js:94,105-107,114,119)
+
+[WARN] FAQ max-height on resize is present but fragile. Click handler (159) sets `panel.style.maxHeight = (inner.offsetHeight + 8) + "px"`. Resize listener (163-171) re-queries every open panel and does the same. Issues: magic +8, only updates *currently open* panels, measures at event time (font loading, subpixel, zoom, or post-open reflow can still clip or leave extra space), no removal of style on close beyond hard "0px", no MutationObserver for content changes. Works for static text on this page but is a classic source of cut-off answers. (js/app.js:152-171)
+
+[INFO] Theme persistence. STORE="acg-theme", localStorage read on load, write on toggle, OS prefers listener that only applies when no explicit saved value (40-48). Logic is correct. Weaknesses: initial `<html data-theme="light">` + script at very end of body guarantees a flash of the wrong theme on first paint for users with dark saved or OS dark. No early inline script or critical CSS. (js/app.js:12-49)
+
+[INFO] Contact validation (demo level). Trims name + cf-contact only (181). No format check on the "phone or email" field. On error sets accent color + message + focus. On success sets good color + thanks + reset(). Note text/color survives the reset until next submit. No aria-live on #formNote (calc side has aria-live="polite" on the output shell). Correct for a static demo; insufficient for production. (js/app.js:173-192)
+
+[OK] Remaining calculator paths: money() rounds, no NaN escapes in the hot path, form submit prevented, input+change both trigger recalc, steppers call recalc after write. Ledger hides zero lines. No other arithmetic defects found.
+
+**Short ranked list of the top fixes that matter (real defects only, highest impact first)**
+
+1. Mobile nav: .nav__link {display:none} at 880px with no menu or persistent anchors — primary navigation is lost on phones.
+2. Stepper direct-edit desync: intVal clamps for math only; input.value can show values outside 0-500 while all outputs use the clamped number.
+3. Per-endpoint display math: total (with fixed support/equip/etc.) is divided by endpoints and labeled "per endpoint / mo" — misrepresents the per-endpoint claim.
+4. FAQ max-height: offsetHeight + 8 px snapshots on resize only for open items; content can clip after reflow, font load, or width change.
+5. Theme flash + late application: hardcoded light on <html>, script at bottom; dark users see wrong theme before JS runs.
+6. Touch targets: stepper +/- buttons locked at 34px wide.
+7. Estimate-to-contact handoff missing: the CTA only scrolls; no data transfer occurs.
+8. Support line label: raw price passed as cost produces "Support plan support" (value 0 case) and couples the select value to both identity and dollars.
+9. Contact status region has no aria-live; results are invisible to screen readers.
+10. Faint ledger rulings + muted text contrast: especially in dark mode; undercuts premium paper/ink readability.
+
+The rest are nits (inline styles, brittle asset paths in JSON-LD, missing focus-visible on .btn, etc.). The site is closer to a deliberate craft artifact than a generic template, but the defects above are functional or accessibility issues that affect real use.