acg-website: import ww9 redesign into repo + homepage polish pass

Pull the impeccable-built static redesign (ww9.azcomputerguru.com) into
projects/acg-website/ and apply the genuinely-real fixes from the AGY review.
AGY's original critique was ~80% capture artifact (un-triggered scroll-reveals
+ full-page-screenshot rendering of position:fixed elements); the real work was
six small fixes, all deployed live to ww9 and verified:

- exit-offer banner: visibility:hidden until triggered (was bleeding behind nav)
- hero h1 line-height 0.9 -> 1.0 (descender collision)
- "2001" stat: solid number (was split 20|01; .u accent kept only on real units)
- .svc__meta price color --accent-ink -> --ink (reserve orange for action links)
- radio bars de-stacked (Mike's call): static promo stays top, scrolling ticker
  un-fixed from position:fixed bottom overlay to an in-flow band above the footer
- .svc__calc-link display:block (consistent own-line rhythm across all 6 rows)

Includes the live-site UI/UX plan and corrected project memory (documents the
scroll-trigger-before-screenshot requirement so future passes don't chase phantoms).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

.claude/memory/MEMORY.md

@@ -27,6 +27,7 @@
 - [Radio Show Website](reference_radio_website.md) — Astro static site at radio.azcomputerguru.com on IX server.
 - [IX PHP-FPM/OPcache remediation](project_ix_php_fpm_opcache_remediation.md) — IX server default is suPHP/CGI per-request with OPcache cold: 71/72 sites recompile PHP every request (1-5.6s TTFB). Fix = per-vhost PHP-FPM. ezfast pilot done (3.1s->0.44s); fleet rollout proposed.
 - [Profile before hardware](feedback_profile_before_hardware.md) — For ANY performance complaint, measure/decompose the actual bottleneck BEFORE proposing hardware; config/cheapest cause first. (IX: $600 SSDs recommended before finding the real cause was OPcache-off — a config issue.)
+- [ACG website redesign (ww9)](project_acg_website_redesign.md) — azcomputerguru.com redesign lives at staging ww9.azcomputerguru.com (static impeccable-built "Bold" brutalist, /home/azcomputerguru/public_html/ww9 on IX). STANDING: keep Gemini(AGY)+Grok in the loop the whole project. AGY critique + AutoSSL fix (Let's Encrypt) recorded.
 - [Dataforth datasheet pipeline recovery](project_dataforth_datasheet_pipeline_recovery.md) — 2026-07-21 recovery of DOS datasheet pipeline: NAS (D2TESTNAS, TS 100.85.152.90) DNS pointed at dead .1 (UDM is .254) → rsync reverse-DNS 10s timeouts stalled pulls; fixed. Daily task broke on PS mojibake parse error. import.js/test_date/_bulk_push_all internals. jlehman added to reports.
 - [IX Server Access](reference_ix_server_access.md) — `ix.azcomputerguru.com` / 172.16.3.10. Reachable when Tailscale is on (no VPN). SSH currently uses sshpass with root password; key auth from GURU-5070 not configured yet (was CachyOS, now Win11 — verify).
 - [Cloudflare access](reference_cloudflare_access.md) — Cloudflare API creds in SOPS `services/cloudflare.sops.yaml` (full DNS + account tokens; azcomputerguru zone_id 1beb9917...). azcomputerguru.com DNS is on Cloudflare (not IX) — edit via Cloudflare API, not whmapi1.
@@ -52,6 +53,7 @@
 - [Trebesch DESKTOP-QNP3ON5 shell replacement](reference_trebesch_qnp3on5.md) — AT Trebesch box runs an Explorer shell replacement; explorer.exe owner check returns blank — use Win32_ComputerSystem.UserName. GuruRMM SWIFT-LION-2892.
 - [reference_backblaze_storage_rate](reference_backblaze_storage_rate.md) -- ACG's Backblaze B2 storage cost rate ($0.00695/GB) for the GuruRMM mspbackups storage-cost calculation
 - [Unraid VM no-IP causes](unraid-windows-vm-virtio-no-ip.md) — PRIMARY (general "new VMs stopped getting IPs lately"): Docker sets bridge-nf-call-iptables=1, so br0 VM DHCP OFFERs hit DOCKER-FORWARD (no br0 ACCEPT) and get dropped; new VMs can't complete DORA (existing renew via ESTABLISHED). Fix `=0` runtime (needs persistent post-Docker hook; not yet persisted on Jupiter). SECONDARY (Windows VM): virtio-net has no in-box driver -> use e1000 or virtio-win. Diagnose: tcpdump DHCP on pfSense; /sys vnetN rx_packets.
+- [EcoSense WiFi (UOS)](reference_ecosense_wifi.md) — 4x U7-Mesh site (site_id 6193fb3f…, short ja3n6cs5), NO 6GHz; South Office=wired root, Eli's/Mobile Park=wireless children, Mobile Park weakest (needs on-site power-cycle). 2.4 on 1/6/11, 5GHz mesh on ch149. LESSON: remote 5GHz channel hop on a wireless mesh drops the children — do it on-site or wire the weak child first.
 - [Starr Pass mail routing](reference_starrpass_mail_routing.md) — starrpass.com is DIRECT to MS (EOP/Defender, tenant 222450dd…); only devconllc.com is on Mailprotector (MP acct 16170). Check @starrpass.com quarantine/rejects via remediation-tool, not Mailprotector.
 - [INKY outbound breaks DMARC](reference_inky_outbound_breaks_dmarc.md) — Reverse-resolve DMARC rua failing IPs before blaming a sender: ipw-outbound.inkyphishfence.com / us.cloud-sec-av.com = INKY re-injection breaking DKIM+SPF. INKY is in-M365 (connectors+transport rules) per enrolled tenant, but hosting-level (IX/cPanel website) outbound also routes through it independent of M365 enrollment. Fix is INKY-side (outbound DKIM/SPF/ARC), not cPanel DNS.
 - [Syncro prepay: full-GET only](feedback_syncro_prepay_full_get_only.md) — read prepay_hours ONLY from GET /customers/{id}; the customer search/list endpoint returns null/stale prepay. Never assert "no block" in a billing preview from search data.

.claude/memory/project_acg_website_redesign.md

@@ -0,0 +1,60 @@
+---
+name: project_acg_website_redesign
+description: ACG website redesign lives on staging ww9.azcomputerguru.com (static, impeccable-built "Bold" brutalist); keep Gemini(AGY)+Grok in the loop the whole project.
+metadata:
+  type: project
+---
+
+Rebuilding **azcomputerguru.com**. Live site = a dated WordPress "Managed IT Services" build on IX (custom
+theme `arizonacomputerguru` + RevSlider + Forminator; 12px body, WCAG-failing orange text, carousel hero,
+inauthentic 3D/circuit-board imagery, no trust signals). Full live-site critique:
+`clients/internal-infrastructure/reports/2026-07-22-azcomputerguru-website-uiux-plan.md`.
+
+**The redesign already exists** as a static, from-scratch build at **`ww9.azcomputerguru.com`** (staging;
+grey-clouded → hits IX directly at 72.194.62.5). Docroot: **`/home/azcomputerguru/public_html/ww9`** (addon
+domain on the `azcomputerguru` cPanel account). It is **NOT WordPress** — plain HTML/CSS/JS built with the
+**impeccable** skill: `PRODUCT.md` + `DESIGN.md` present, pages index/about/services/pricing/contact +
+`calculator.html` (pricing calc) + `radical.html` variant, `css/styles.css` (~44KB), `js/app.js`,
+`assets/images/` (grayscale documentary photos, + a "verdigris" color variant).
+
+Design language **"Bold"**: premium brutalist — **Anton** poster headlines (uppercase), **Hanken Grotesk**
+body, **JetBrains Mono** for money/calc, **signal orange** the ONLY accent (`#E24A12`/`#FF5A1F`; AA text
+variants `#C23A0A`/`#FF8A4D`), 1px ink borders, light+dark first-class. Positioning: **"Concierge IT for
+Tucson, since 2001", publishes prices** (GPS-Basic/Pro/Advanced tiers), voice kind/direct/no-hype. KVOI radio
+show ticker = local authority. Anti-references = generic SaaS/MSP slop (gradients, 3D isometrics, server-rack
+clip art, glowing shields, hero-metric templates) — i.e. exactly the LIVE site's flaws.
+
+**STANDING INSTRUCTION (Mike, 2026-07-22):** keep **Gemini (AGY)** and **Grok** in the loop for the ENTIRE
+project — run design work past them for second opinions. Method: screenshot with cert-ignore
+(`playwright firefox ... ignore_https_errors`), then `ask-agy.sh image-analyze` / `review-files`. Grok has been
+returning empty all session (dead) — retry each time, use if it responds.
+
+**AGY critique of the ww9 homepage (2026-07-22) — MOSTLY CAPTURE ARTIFACT, corrected:** AGY's first pass was
+run on a full-page screenshot taken WITHOUT triggering the scroll-reveal animations, so below-fold `.reveal`
+elements were still at `opacity:0` and read as "empty." The phantom items ("empty WHAT WE DO / blank DISPATCH
+BOARD", "stray floating arrows", "orange-on-beige fails AA") were ALL false positives: those sections are fully
+populated (6 svc rows + 3 dispatch cards in index.html), and section-tags/eyebrow use `--accent-ink` #C23A0A =
+**4.62:1 AA-pass** on bone, NOT the #E24A12 fill. **Lesson: always scroll-trigger reveals before screenshotting
+this site** — `.js .reveal{opacity:0}` at styles.css:660 is JS-gated (`.in` on IntersectionObserver, app.js:272)
+with a no-IO fallback; capture via `ff.py` then `eval` a scroll-through, then POST `/shot {"full":true}`.
+
+**Real fixes applied + AGY-confirmed resolved (2026-07-22, deployed live to ww9):** (1) exit-offer banner
+(`#exitOffer`) now `visibility:hidden` until `.show` — was bleeding a sliver behind the nav (`top:73px` +
+`translateY(-100%)`, z45<50); (2) hero H1 `line-height` 0.9 -> 1.0 (styles.css:157) — descender collision;
+(3) split "2001" stat -> solid number (index.html:87; `.u` unit style kept ONLY on real units 1-2**hr**/100**%**/
+30**day**); (4) `.svc__meta` price color `--accent-ink` -> `--ink` (styles.css:452) so signal-orange is reserved
+for the "See what this costs" action links only. **Still open (AGY 2nd pass):** duplicate radio-show elements —
+static `.radio-promo` (index.html:76) AND scrolling `.radio-ticker` (line 224) both show the same KVOI info
+stacked; needs Mike's call on which to keep (his show). Numbers ARE consistent (call-in 520-790-2020, biz
+520.304.8300 — AGY's number-mismatch read was OCR error). Minor: svc calc-link wraps to its own line on rows
+03/04 (text-length) — trivial `display:block` fix if wanted. Grok dead all session (no vision mode + empty text).
+
+**AutoSSL fix (2026-07-22):** ww9 had a self-signed cert (browser warnings) because it was in the account's
+AutoSSL **exclude list** (`/var/cpanel/ssl/autossl/excludes/azcomputerguru.json`, alongside proxied/external
+subdomains). Removed ww9+www.ww9 from excludes, triggered `uapi --user=azcomputerguru SSL start_autossl_check`
+(NOT `whmapi1 start_autossl_check` — "unknown app" on this version) → **Let's Encrypt cert issued**. AutoSSL
+logs live in timestamped subdirs under `/var/cpanel/logs/autossl/<UTC>/` (not `*.log`).
+
+Next: pull ww9 into the repo (`projects/acg-website/`?) to work with impeccable + version + deploy previews;
+finish empty sections; apply AGY's refinements; a11y/contrast pass; then plan go-live to replace the WP site.
+See [[reference_cloudflare_access]] (zone edits) and the live-site UI/UX report above.

clients/internal-infrastructure/reports/2026-07-22-azcomputerguru-website-uiux-plan.md

@@ -0,0 +1,189 @@
+# azcomputerguru.com — UI/UX Improvement Plan
+
+**Date:** 2026-07-22 · **Site:** https://azcomputerguru.com (ACG marketing site) · **Author:** Mike Swanson (GURU-5070)
+**Method:** Live capture (Firefox driver) + AGY/Gemini vision critique of the homepage + source-level extraction
+(rendered HTML, theme CSS, DOM a11y signals, network/perf). Stack: **custom WordPress theme
+`arizonacomputerguru`** + Revolution Slider + Forminator; font **Lexend**; brand accent **orange `#FE7400`**.
+
+---
+
+## 1. Executive summary
+
+The site has good bones — a clean typeface (Lexend), a strong SEO title, semantic landmarks, a clear local
+identity (Tucson MSP), and a legible information architecture. But it currently **reads as a mid-2010s template
+and leaks leads**: the hero is a rotating carousel with a generic "LEARN MORE" button, the most prominent header
+button serves *existing* clients ("Remote Support") rather than new ones, there are **no trust signals above the
+fold**, body text is set at an unreadable **12px**, and brand orange is used as text on white in ways that **fail
+WCAG contrast**. It's also **front-end heavy** (921 KB, 60 requests, 19 CSS files, 7 fonts).
+
+None of this requires a rebuild. A staged effort — **quick wins → conversion/trust → visual refresh →
+structural (a11y/perf/nav)** — will materially improve first impression, readability, trust, and lead capture.
+
+**The single highest-leverage change:** turn the hero + header into a **conversion machine** (one strong value
+prop, one high-intent CTA, visible social proof) instead of a carousel that hides the message.
+
+---
+
+## 2. Current-state snapshot (measured)
+
+| Dimension | Finding |
+|---|---|
+| Tech | Custom theme `arizonacomputerguru`, Revolution Slider, Forminator; Lexend via Google Fonts |
+| Title/meta | Title good ("Arizona Computer Guru \| Managed IT Services Tucson AZ"); meta desc 170 chars (good) |
+| Hero | Rotating **carousel** (‹ › arrows); H1 "Managed IT Services / for your business" (72px, orange); tiny body copy; generic "LEARN MORE" CTA; 3D "G/building" render |
+| Typography | **Base body font 12px** (line-height 16.8px); H1 72px; sizes in CSS cluster at 12/13/14/16px |
+| Color | Body text pure black `#000`; links/accent orange `#FE7400`; white text on orange service cards |
+| Layout | Hero left/right unbalanced; floating vertical **social-icon bar** overlapping content; service cards on a **circuit-board** background with tight top padding |
+| Page | ~4.8 screens tall (3,871px); 11 images, 1 contact form (Forminator), phone `1.520.304.8300` |
+| Accessibility | **4/11 images missing alt**; **2 `<h1>`** (should be 1); **3 form inputs without labels**; **8 links with no text/aria-label** (icons/arrows/social); **no skip link**; `lang=en-US` OK; landmarks present |
+| Performance | **921 KB / 60 requests**; 14 scripts, **19 CSS files**, 11 imgs, **7 font files**; DOMContentLoaded ~1.3s |
+| Responsive | Only **1 `@media` query** in the theme CSS (most responsiveness deferred to plugins/RevSlider — fragile) |
+| Content | Value prop generic; **typo "Continous"** on the "24/7 System Monitoring" service card |
+
+---
+
+## 3. Findings & fixes (by category, severity-tagged)
+
+### A. Hero & first impression — [HIGH]
+- **Carousel/slider hero.** Rotating heroes hide the message and depress conversion; the ‹ › arrows are a dated
+  tell. **Fix:** replace with a **static hero** — one headline, one subhead, one CTA, one supporting image.
+- **Fragmented hierarchy.** The eye jumps from the H1 to the oversized abstract 3D "G," skipping the subhead and
+  the (tiny) value copy. **Fix:** shrink/relocate the graphic; make the text column the focal point; vertically
+  center the text with the image.
+
+### B. Typography & readability — [HIGH]
+- **12px base body font.** Too small; tiring to read; below modern norms and a soft accessibility issue.
+  **Fix:** base **16–18px**, hero body **18–20px**, with a deliberate type scale (see §5).
+- **Pure black `#000` body.** Harsh on white. **Fix:** dark slate `#1f2430`/`#333`.
+- **Style soup in the hero** (orange H1 + italic dark-blue subhead + black body). **Fix:** unify — solid dark
+  subhead (drop italics), one accent color used sparingly.
+
+### C. Color & contrast (WCAG) — [HIGH]
+- **Orange `#FE7400` as text on white fails WCAG AA** (contrast ~2.9:1; AA needs 4.5:1 for body text). Affects
+  the orange H1 and orange links. **Fix:** use a dark navy/slate for headline + body text; **reserve orange for
+  buttons, icons, and small accents** — and even on buttons, verify white-on-orange meets AA (it's borderline;
+  a slightly darker orange `#E85D00`ish for interactive states helps).
+- **White text on bright-orange service cards vibrates.** **Fix:** darken the card background or switch to dark
+  text on those cards.
+
+### D. Layout, spacing, whitespace — [MED]
+- Unbalanced hero; cramped top padding on the service-card band; floating social bar overlaps content.
+  **Fix:** consistent vertical rhythm (see spacing scale §5); ≥80px section padding; **move social icons to the
+  footer** and remove the floating bar.
+
+### E. Imagery & visual identity — [MED/HIGH]
+- **Inauthentic hero render** (glass building + glowing "G") and a **literal circuit-board** background are IT
+  clichés that don't say "local Tucson experts you can trust." **Fix:** real **team/office photography** and/or a
+  clean modern abstract; drop the circuit board for a solid or subtle geometric background. This is the biggest
+  *perceived-quality* lever after the hero rework.
+
+### F. CTAs & conversion path — [HIGH]
+- **"LEARN MORE"** is low-intent. **Fix:** benefit-driven — **"Get a Free IT Assessment"** (or "Get a Quote").
+- **Header prioritizes "Remote Support"** (an existing-client tool) as the brightest button — prime real estate
+  wasted on non-leads. **Fix:** primary header button = **"Get a Quote"/"Contact Us"**; move "Remote Support" to
+  a slim top utility bar (with the phone number).
+- **One conversion path only** (a single Forminator form deep in the page). **Fix:** repeat a clear CTA after the
+  hero, mid-page, and in the footer; consider a sticky header CTA + click-to-call on mobile.
+
+### G. Trust signals & social proof — [HIGH]
+- **None above the fold.** For an MSP asking for access to a client's infrastructure, this is a major trust gap.
+  **Fix:** add, immediately below the hero, a **partner/vendor logo strip** (Microsoft, Dell, the security
+  vendors we actually use), a **"5-star on Google" badge with review count**, client logos, and any
+  certifications/associations. Add 2–3 short testimonials with names.
+
+### H. Navigation & IA — [MED]
+- **"HOME" is redundant** (logo does that). **"SERVICES"/"Business Services"** hide what we actually do until a
+  click. **Fix:** drop "HOME"; make services a **descriptive dropdown/mega-menu** (Managed IT, Cybersecurity,
+  Compliance, Cloud/Hosting, Web/SEO); consider an **"Industries"** entry if we target verticals (medical,
+  legal, etc. — we already serve them).
+
+### I. Content & copy — [MED]
+- **Typo "Continous" → "Continuous"** on the first service card (visible, credibility-damaging for an IT firm).
+- Value proposition is generic. **Fix:** lead with a specific, local, benefit-first line (e.g., "Tucson's IT
+  team that keeps your business running — monitored 24/7, answered by real people.").
+
+### J. Accessibility — [MED, some HIGH for compliance-conscious clients]
+- **4/11 images missing alt text** (a11y + image SEO). Add descriptive alt.
+- **2 `<h1>` elements** — collapse to a single H1; demote the second to H2 (SEO + semantics).
+- **3 form inputs without labels** (Forminator) — add visible/`<label>`-associated labels; don't rely on
+  placeholders.
+- **8 links with no accessible name** (carousel arrows, icon/social links) — add `aria-label`s (or remove the
+  carousel/social bar, which also fixes this).
+- **No skip-to-content link** — add one for keyboard users.
+- Verify focus states and tab order after the hero rework.
+
+### K. Performance — [MED]
+- **921 KB, 60 requests, 19 CSS files, 14 scripts, 7 font files.** The 7 fonts (Lexend + Font Awesome + several
+  "uicons" icon sets) and 19 separate CSS files are the low-hanging fruit. **Fix:** subset/consolidate to **one
+  icon font** (or inline SVGs), drop unused icon sets, combine/defer CSS/JS, lazy-load below-fold images, serve
+  next-gen image formats (WebP). Server side is already on PHP-FPM+OPcache (recent IX work), so this is purely a
+  front-end asset problem. Target: <500 KB, <35 requests, Lighthouse Performance 90+.
+
+### L. Responsive / mobile — [MED, needs verification]
+- Only **1 media query** in the theme CSS; mobile layout leans on plugin defaults. Mobile is where most MSP
+  visitors and phone-call conversions come from, and I couldn't capture a true mobile viewport in this pass.
+  **Fix:** dedicated mobile audit — hero stacks cleanly, tap targets ≥44px, sticky click-to-call, form usable,
+  no horizontal scroll, the floating social bar gone.
+
+---
+
+## 4. Prioritized roadmap
+
+### Phase 0 — Quick wins (hours; do first)
+1. Fix the **"Continous" → "Continuous"** typo.
+2. Bump **base body font 12px → 16px** (hero body 18px).
+3. **Change hero CTA** "LEARN MORE" → **"Get a Free IT Assessment."**
+4. **Remove the carousel** (make the hero static on the strongest slide).
+5. **Remove the floating social-icon bar** (also fixes 8 empty links).
+6. Make the **primary header button "Get a Quote"**; move "Remote Support" to a top utility bar.
+7. Add **alt text** to the 4 missing images; collapse to a **single H1**.
+8. Add a **"5-star on Google" badge** near the hero CTA.
+
+### Phase 1 — Conversion & trust (days)
+- Rebuild the hero as a static, single-message section with a strong CTA + click-to-call.
+- Add the **trust bar** (partner logos, Google rating, client logos, certs) directly under the hero.
+- Add **testimonials** (2–3, with names) and repeat CTAs mid-page + footer.
+- Label the **contact form** fields; make submission frictionless; confirm email routing.
+
+### Phase 2 — Visual refresh (1–2 weeks)
+- Replace the **3D render + circuit board** with authentic team photography / clean modern backgrounds.
+- Apply the **type scale, color roles, and spacing system** (§5) sitewide; fix the orange-on-white contrast.
+- Rebalance hero and section spacing; consistent card styling.
+
+### Phase 3 — Structural (ongoing)
+- **Navigation/IA:** drop HOME, add descriptive Services dropdown (+ Industries if applicable).
+- **Accessibility remediation** to WCAG AA (labels, skip link, focus, contrast) — worth doing well since we sell
+  IT/compliance and some clients (medical/legal) care.
+- **Performance:** consolidate fonts/CSS/JS, lazy-load, WebP; target <500 KB / Lighthouse 90+.
+- **Responsive audit** on real devices.
+
+---
+
+## 5. Design-system recommendations (to make the above consistent)
+
+- **Type scale** (Lexend): base 16px · body 16–18/1.6 · small 14 · H3 24 · H2 32–36 · H1 clamp(40px, 6vw, 64px).
+  Kill the 12/13px body sizes.
+- **Color roles:** Ink `#1f2430` (text) · Navy `#0F2A4A` (headings) · **Orange `#FE7400` = actions/accents only**
+  · Orange-hover `#E85D00` · neutrals tinted toward navy, never pure `#000`/`#fff`. All text pairs must hit
+  WCAG AA (4.5:1 body, 3:1 large).
+- **Spacing:** 4/8/12/16/24/32/48/64/80/120 rhythm; section padding ≥80px desktop / 48px mobile.
+- **Components:** one button system (primary orange, secondary outline, both AA-contrast), one card style, one
+  icon font (or SVG), consistent form styling with real labels.
+
+---
+
+## 6. How we'll know it worked
+
+- **Contact-form submissions / calls** up (primary business metric).
+- **Bounce rate** down, **time-on-page**/scroll depth up (esp. mobile).
+- **Lighthouse:** Performance 90+, Accessibility 95+, page weight <500 KB, <35 requests.
+- **Contrast:** zero WCAG AA failures on text.
+- Qualitative: the homepage's *message and next step* are obvious within 3 seconds.
+
+---
+
+## Appendix — sources of this assessment
+- Live homepage screenshot + DOM/CSS/network extraction (Firefox driver, 2026-07-22).
+- AGY/Gemini vision critique of the homepage (full text retained in session artifacts).
+- Note: this pass covered the **homepage**; the same treatment should be applied to Services, About, and Contact
+  pages, and a dedicated **mobile** audit is still outstanding (couldn't capture a true mobile viewport here).

projects/acg-website/DESIGN.md

@@ -0,0 +1,60 @@
+# DESIGN.md — "Bold" (default)
+
+The locked design language for the ACG site. Premium brutalist: confident authority
+without arrogance. Anton poster headlines, signal orange accents, grayscale documentary
+photos, refined 1px borders. Direct, transparent, inked precision.
+
+## Color strategy: High-contrast refined brutalist
+Sharp contrasts, near-neutral palette with signal orange as the ONLY accent color.
+
+- **Light:** bone `#F4EDE1`, surface `#FBF7F0`, surface-2 `#EAE2D4`,
+  ink `#16120F`, ink-2 `#46403A`, ink-3 `#5C544B` (AA on bone ~5:1).
+- **Dark:** near-black `#0C0A09`, surface `#16120F`, surface-2 `#1E1814`,
+  ink `#F4EDE1`, ink-2 `#C9C1B5`, ink-3 `#9A9082`.
+- **Accent:** signal orange `#E24A12` (light) / `#FF5A1F` (dark) — fills, CTA,
+  underlines, marks. Orange TEXT: `#C23A0A` (light, AA) / `#FF8A4D` (dark, AA).
+- Accent is restrained, authoritative. Never decorative gradients or tints.
+
+## Theme
+Both light and dark are first-class. Light = crisp professional confidence. Dark =
+refined premium authority. System preference honored, set before first paint (no FOUC).
+
+## Typography
+- Display: **Anton** 400 (headlines, tier names, brand lockup, pricing numerals).
+  Uppercase for h1/h2/tier names. Sentence-case for functional labels (service names,
+  FAQ questions) to avoid condensed-caps smear at UI sizes.
+- Body: **Hanken Grotesk** 400/500/700 (paragraphs, UI labels, functional copy).
+- Mono: **JetBrains Mono** tabular-nums for money, calculator, endpoint counts.
+- Hierarchy via size + case + weight. Large poster numerals lean into Anton's authority.
+
+## Layout & rhythm
+- 24px baseline. NO ledger rulings (dropped from the paper aesthetic).
+- Hard 1px ink borders on major sections, header, rate cards, calculator shell.
+- Vary spacing per page. Premium softening: extra breathing room on tiers/calc panels.
+- Radius: 2px on buttons/cards/inputs (refined, not zero-radius industrial).
+- Rate cards use ink background with 1px gap dividers (frame + inner grid unified).
+
+## Photography
+Grayscale documentary photos (scoped to .hero__frame / .story__img / .page-head--img /
+.office-figure only). `filter: grayscale(1) contrast(1.08)` matches the high-contrast
+palette. Future logos/badges/UI images stay color.
+
+## Motion
+- Reveal on scroll (opacity + small translate), ease-out only, respects reduced-motion.
+- Never animate layout properties.
+
+## Alternate skins (header switcher)
+- **Midnight Concierge** — cool dark-premium slate aesthetic
+- **Verdigris Gate** — oxidized-copper green/plaster, Fraunces serif, cool color photos
+
+## House laws (impeccable)
+- **No em dashes** anywhere in copy. Use commas, colons, semicolons, periods, parentheses.
+- **No side-stripe accent borders** (no border-left/right > 1px as a colored accent).
+  Use full borders, leading numerals/marks, background tints, or nothing.
+- No gradient text, no decorative glassmorphism, no hero-metric template, no AI slop.
+
+## Multipage specifics
+- Shared sticky header (brand + nav + theme toggle + skin switcher + mobile menu) and footer on every page.
+- Active nav state per page (`aria-current="page"`).
+- Pages: Home, Services, Pricing, Calculator, About, Contact. Each has its own
+  opening rhythm so the set never feels templated.

projects/acg-website/PRODUCT.md

@@ -0,0 +1,44 @@
+# PRODUCT.md — Arizona Computer Guru (ACG) website
+
+register: brand
+
+## Product purpose
+A multipage marketing website for Arizona Computer Guru, a Tucson managed-IT and
+cybersecurity provider operating since 2001. The site sells trust before it sells
+services: the goal is for a small-business owner to feel they have found honest,
+local people who will go further than the last IT company, then to reach out or
+build an estimate. Design IS the product here.
+
+## Users
+- Tucson / southern-Arizona small-business owners and office managers (roughly
+  5 to 100 employees): law firms, medical practices, accounting, construction,
+  property management, retail, manufacturing.
+- Often burned before: surprise bills, offshore call centers, three-year lock-ins,
+  "unlimited support" that wasn't. Skeptical, value-conscious, not deeply technical.
+- They want a real person, fast local help, and to know what it costs before a call.
+
+## Brand & tone
+- The differentiator is **concierge IT**: genuine relationships, going much further
+  than typical IT companies, at reasonable prices.
+- Voice: kind, direct, transparent, plain-spoken, confident without arrogance.
+  Never condescending, never sales-pressure, never hype. "We built it the way we'd
+  want to be treated." Publishes its prices on purpose.
+- Local and rooted: Tucson since 2001, physical office at 7437 E. 22nd St, onsite
+  in 1 to 2 hours, month-to-month terms.
+
+## Anti-references (do NOT look like these)
+- Generic SaaS/MSP slop: blue/purple gradients, floating 3D isometrics, server-rack
+  clip art, glowing shields, "hero metric" stat templates, identical icon-card grids.
+- Hard-sell landing pages: countdown timers, fake scarcity, manufactured testimonials.
+- Cold enterprise-security navy-and-gold. Cold healthcare white-and-teal.
+
+## Strategic principles
+- Transparency is the aesthetic. Show real numbers, real pricing, real process.
+- Warmth and place: Tucson light, paper, ledgers, honest materials. Photographic,
+  not illustrated.
+- Every word earns its place. No restated headings, no filler.
+
+## Integrity rules
+- No fabricated named client testimonials. Proof is built from verifiable facts.
+- The contact form is a demo (not wired to a mailbox). Pricing is illustrative of
+  published GPS rates. Photography is representational.

projects/acg-website/about.html

@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>About | Arizona Computer Guru</title>
+  <meta name="description" content="A Tucson IT company since 2001. We started as a break-fix shop, then built GPS to align our incentives with our clients. Concierge IT, the way we'd want to be treated." />
+  <meta name="color-scheme" content="light dark" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Lexend:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600;700&family=Fraunces:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600;700&family=Anton&family=Hanken+Grotesk:wght@400;500;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="css/styles.css" />
+  <link rel="icon" href="assets/logo/acg-mark.svg" type="image/svg+xml" />
+  <script>(function(){try{var s=localStorage.getItem("acg-theme");var m=s||(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");document.documentElement.setAttribute("data-theme",m);document.documentElement.setAttribute("data-skin",(localStorage.getItem("acg-skin")||"bold"));document.documentElement.classList.add("js");}catch(e){}})();</script>
+</head>
+<body>
+  <a href="#main" class="sr-only">Skip to content</a>
+  <header class="site-header">
+    <div class="wrap">
+      <a class="brand" href="index.html" aria-label="Arizona Computer Guru home">
+        <span class="brand__mark" aria-hidden="true"><svg viewBox="0 0 100 104" fill="none" stroke="currentColor" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(20 50 54)"><path d="M61.2 26.2 A30 30 0 1 1 38.8 26.2"/><line x1="50" y1="14" x2="50" y2="50"/></g></svg></span>
+        <span><span class="brand__name">Arizona Computer Guru</span><br /><span class="brand__since">Concierge IT &middot; Tucson &middot; since 2001</span></span>
+      </a>
+      <nav class="nav" aria-label="Primary">
+        <div class="nav__links" id="navLinks">
+          <a class="nav__link" href="index.html">Home</a>
+          <a class="nav__link" href="services.html">Services</a>
+          <a class="nav__link" href="pricing.html">Pricing</a>
+          <a class="nav__link nav__link--cta" href="calculator.html">Estimate</a>
+          <a class="nav__link" href="about.html" aria-current="page">About</a>
+          <a class="nav__link" href="contact.html">Contact</a>
+        </div>
+        <a class="nav__phone" href="tel:+15203048300">520.304.8300</a>
+        <button class="skin-toggle" id="skinToggle" type="button" aria-label="Switch visual skin (Bold, Midnight, or Verdigris)" title="Switch skin: Bold / Midnight / Verdigris"><span class="sw" aria-hidden="true"></span></button>
+        <button class="theme-toggle" id="themeToggle" type="button" aria-pressed="false" aria-label="Switch to dark theme" title="Toggle light / dark"><span aria-hidden="true" data-theme-icon>&#9728;</span></button>
+        <button class="nav__toggle" id="navToggle" type="button" aria-expanded="false" aria-controls="navLinks" aria-label="Open menu">&#8801;</button>
+      </nav>
+    </div>
+  </header>
+
+  <main id="main">
+    <section class="page-head page-head--img ledger">
+      <div class="wrap">
+        <div class="reveal">
+          <p class="eyebrow">Tucson, since 2001</p>
+          <h1>The IT partner that actually picks up</h1>
+          <p class="lead">We are not a national chain and we are not venture-backed. We are a local Tucson team that has been here for two decades because we do right by the businesses we serve.</p>
+        </div>
+        <figure class="reveal">
+          <img src="assets/images/about.png" width="1248" height="832" alt="A friendly handshake over a wooden desk with a laptop and a handwritten notebook, an Arizona map framed on the wall." />
+        </figure>
+      </div>
+    </section>
+
+    <!-- Origin story -->
+    <section class="story" aria-labelledby="origin-h">
+      <div class="wrap">
+        <div class="story__copy reveal">
+          <p class="section-tag">Why we work this way <span>/ the short version</span></p>
+          <h2 id="origin-h">We used to be the company we now warn you about</h2>
+          <p class="muted">We started in 2001 as a break-fix shop. We charged by the hour, showed up when things broke, and quietly made more money when our clients had more problems. That did not sit right.</p>
+          <p class="muted">So we built Guru Protection Services: proactive monitoring, transparent published pricing, and month-to-month terms. The point was to put our incentives on the same side of the table as yours. We make more when your systems stay healthy, not when they fail.</p>
+          <p class="muted">Today we look after businesses across Tucson, from small offices to busy practices and job sites. We have stopped ransomware before a single file was encrypted, replaced failing drives before anyone noticed, and helped owners meet the cyber-insurance requirements that used to keep them up at night.</p>
+          <blockquote>We built our service the way we'd want to be treated if we were the customer.</blockquote>
+        </div>
+        <figure class="story__img reveal">
+          <img src="assets/images/story.png" width="1248" height="832" alt="Warm afternoon desert light raking across a white stucco wall meeting a clean wooden windowsill." loading="lazy" />
+        </figure>
+      </div>
+    </section>
+
+    <!-- Philosophy -->
+    <section class="home-services ledger" aria-labelledby="phil-h">
+      <div class="wrap">
+        <p class="section-tag">What concierge means, concretely <span>/ five choices</span></p>
+        <h2 id="phil-h">The promises behind the work</h2>
+        <div class="svc-list">
+          <article class="svc reveal"><div class="svc__no">01</div><div><h3 class="svc__name">Transparent pricing</h3><p class="svc__desc">Published per-endpoint rates. You know what you pay before you call us. No games, no "call for quote," no fees that appear at the bottom of an invoice.</p></div><div class="svc__meta">$19&ndash;$39 /endpoint</div></article>
+          <article class="svc reveal"><div class="svc__no">02</div><div><h3 class="svc__name">Local Tucson team</h3><p class="svc__desc">A real office at 7437 E. 22nd St since 2001. When your server dies at 3pm you do not want a ticket, you want someone at your door by 3:45. We can usually be onsite within an hour or two.</p></div><div class="svc__meta">onsite 1&ndash;2 hr</div></article>
+          <article class="svc reveal"><div class="svc__no">03</div><div><h3 class="svc__name">Proactive, not reactive</h3><p class="svc__desc">24/7 monitoring, automated patching, and alerts that reach us before they reach you. The goal is that you never have to call because something broke.</p></div><div class="svc__meta">24/7 monitoring</div></article>
+          <article class="svc reveal"><div class="svc__no">04</div><div><h3 class="svc__name">Month-to-month terms</h3><p class="svc__desc">No three-year lock-ins, no early-termination fees. If we stop earning your business, you can leave with 30 days' notice. We would rather keep you by choice.</p></div><div class="svc__meta">cancel in 30 days</div></article>
+          <article class="svc reveal"><div class="svc__no">05</div><div><h3 class="svc__name">Plain English, always</h3><p class="svc__desc">Many IT people are dismissive or condescending. That is never tolerated here. We are kind, direct, and honest, and we will never make you feel small for asking a question.</p></div><div class="svc__meta">no jargon walls</div></article>
+        </div>
+      </div>
+    </section>
+
+    <!-- Big quote band -->
+    <section aria-labelledby="bq-h">
+      <div class="wrap" style="max-width:900px;">
+        <h2 id="bq-h" class="sr-only">Our standard</h2>
+        <p class="bigquote reveal">You might not choose us. That's okay. But you'll make a better decision because we told you the truth.</p>
+        <p class="signature reveal">// Arizona Computer Guru, Tucson</p>
+      </div>
+    </section>
+
+    <section class="cta-band" aria-labelledby="cta-h">
+      <div class="wrap">
+        <div class="reveal">
+          <h2 id="cta-h">Come see for yourself</h2>
+          <p>Stop by the office, or have us out to look at the server closet that runs hot and the printer that jams every Tuesday. The first conversation is free, and there is no pitch.</p>
+        </div>
+        <div class="cta-band__actions reveal">
+          <a class="btn btn--primary" href="contact.html">Talk to a human <span class="arrow" aria-hidden="true">&rarr;</span></a>
+          <a class="btn btn--ghost" href="calculator.html">Estimate your cost</a>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <!-- RADIO TICKER MARQUEE -->
+  <div class="radio-ticker">
+    <div class="radio-ticker__track">
+      <div class="radio-ticker__item"><strong>The Computer Guru Show</strong> Saturdays 9AM on KVOI 1030AM</div>
+      <div class="radio-ticker__item">Call in: <strong>520-790-2020</strong></div>
+      <div class="radio-ticker__item">Tucson's trusted tech talk since 2001</div>
+      <div class="radio-ticker__item"><strong>The Computer Guru Show</strong> Saturdays 9AM on KVOI 1030AM</div>
+      <div class="radio-ticker__item">Call in: <strong>520-790-2020</strong></div>
+      <div class="radio-ticker__item">Tucson's trusted tech talk since 2001</div>
+    </div>
+  </div>
+
+  <!-- EXIT INTENT BANNER -->
+  <div class="exit-offer" id="exitOffer">
+    <div class="exit-offer__content">
+      <div class="exit-offer__message">
+        <strong>Wait — Free IT Assessment</strong>
+        <p>Most Tucson businesses overpay for IT. Get a free audit before you go.</p>
+      </div>
+      <div class="exit-offer__actions">
+        <a class="btn btn--primary" href="contact.html">Get Free Assessment</a>
+        <button class="exit-offer__close" id="closeExit" aria-label="Close banner">&times;</button>
+      </div>
+    </div>
+  </div>
+
+  <footer class="site-footer">
+    <div class="wrap">
+      <p>&copy; <span id="year">2026</span> Arizona Computer Guru &middot; Protecting Tucson businesses since 2001</p>
+      <p><a href="tel:+15203048300">520.304.8300</a> &middot; <a href="mailto:info@azcomputerguru.com">info@azcomputerguru.com</a></p>
+      <p class="disclaimer">Local demonstration build of a proposed azcomputerguru.com (multipage). Pricing reflects published GPS rates and is illustrative for the estimator; a real quote is tailored to your environment. The contact form is not wired to a mailbox. Photography is representational.</p>
+    </div>
+  </footer>
+  <script src="js/app.js"></script>
+</body>
+</html>

projects/acg-website/assets/logo/acg-mark.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 104" role="img" aria-label="Arizona Computer Guru">
+  <g transform="rotate(20 50 54)" fill="none" stroke="#F2922E" stroke-width="11" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M61.2 26.2 A30 30 0 1 1 38.8 26.2" />
+    <line x1="50" y1="14" x2="50" y2="50" />
+  </g>
+</svg>

projects/acg-website/calculator.html

@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Estimate your IT cost | Arizona Computer Guru</title>
+  <meta name="description" content="Build a transparent IT estimate in seconds: endpoints, protection tier, support plan, Microsoft 365, phones, and hosting. No email wall, no sales call." />
+  <meta name="color-scheme" content="light dark" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Lexend:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600;700&family=Fraunces:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600;700&family=Anton&family=Hanken+Grotesk:wght@400;500;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="css/styles.css" />
+  <link rel="icon" href="assets/logo/acg-mark.svg" type="image/svg+xml" />
+  <script>(function(){try{var s=localStorage.getItem("acg-theme");var m=s||(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");document.documentElement.setAttribute("data-theme",m);document.documentElement.setAttribute("data-skin",(localStorage.getItem("acg-skin")||"bold"));document.documentElement.classList.add("js");}catch(e){}})();</script>
+</head>
+<body>
+  <a href="#main" class="sr-only">Skip to content</a>
+  <header class="site-header">
+    <div class="wrap">
+      <a class="brand" href="index.html" aria-label="Arizona Computer Guru home">
+        <span class="brand__mark" aria-hidden="true"><svg viewBox="0 0 100 104" fill="none" stroke="currentColor" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(20 50 54)"><path d="M61.2 26.2 A30 30 0 1 1 38.8 26.2"/><line x1="50" y1="14" x2="50" y2="50"/></g></svg></span>
+        <span><span class="brand__name">Arizona Computer Guru</span><br /><span class="brand__since">Concierge IT &middot; Tucson &middot; since 2001</span></span>
+      </a>
+      <nav class="nav" aria-label="Primary">
+        <div class="nav__links" id="navLinks">
+          <a class="nav__link" href="index.html">Home</a>
+          <a class="nav__link" href="services.html">Services</a>
+          <a class="nav__link" href="pricing.html">Pricing</a>
+          <a class="nav__link" href="calculator.html" aria-current="page">Estimate</a>
+          <a class="nav__link" href="about.html">About</a>
+          <a class="nav__link" href="contact.html">Contact</a>
+        </div>
+        <a class="nav__phone" href="tel:+15203048300">520.304.8300</a>
+        <button class="skin-toggle" id="skinToggle" type="button" aria-label="Switch visual skin (Bold, Midnight, or Verdigris)" title="Switch skin: Bold / Midnight / Verdigris"><span class="sw" aria-hidden="true"></span></button>
+        <button class="theme-toggle" id="themeToggle" type="button" aria-pressed="false" aria-label="Switch to dark theme" title="Toggle light / dark"><span aria-hidden="true" data-theme-icon>&#9728;</span></button>
+        <button class="nav__toggle" id="navToggle" type="button" aria-expanded="false" aria-controls="navLinks" aria-label="Open menu">&#8801;</button>
+      </nav>
+    </div>
+  </header>
+
+  <main id="main">
+    <section class="page-head ledger">
+      <div class="wrap reveal">
+        <p class="eyebrow">Live estimate &middot; no email wall</p>
+        <h1>Your IT, accounted for</h1>
+        <p class="lead">Move the numbers, watch the total. This is the same math we would walk you through in person, with nothing hidden behind a "contact sales" button.</p>
+      </div>
+    </section>
+
+    <section class="calc ledger" id="calculator" aria-labelledby="calc-h" style="padding-top:calc(var(--base)*2);">
+      <div class="wrap">
+        <h2 id="calc-h" class="sr-only">IT cost estimator</h2>
+        <div class="calc__shell">
+          <div class="calc__grid">
+            <form class="calc__inputs" id="calcForm" aria-label="IT cost estimator">
+              <div class="calc__row">
+                <label for="endpoints">Computers &amp; servers <span class="hint">Every monitored endpoint</span></label>
+                <div class="calc__control"><div class="stepper" data-step="endpoints">
+                  <button type="button" data-dir="-1" aria-label="Fewer endpoints">&minus;</button>
+                  <input id="endpoints" name="endpoints" type="number" inputmode="numeric" min="0" max="500" value="22" />
+                  <button type="button" data-dir="1" aria-label="More endpoints">+</button>
+                </div></div>
+              </div>
+              <div class="calc__row">
+                <label for="gpsTier">Protection tier <span class="hint">Per-endpoint monitoring level</span></label>
+                <div class="calc__control"><select id="gpsTier" name="gpsTier">
+                  <option value="19">GPS-Basic &middot; $19</option>
+                  <option value="26" selected>GPS-Pro &middot; $26</option>
+                  <option value="39">GPS-Advanced &middot; $39</option>
+                </select></div>
+              </div>
+              <div class="calc__row">
+                <label for="equip">Equipment monitoring <span class="hint">Network gear, printers, NAS. $25/mo</span></label>
+                <div class="calc__control toggle-row"><span class="switch">
+                  <input type="checkbox" id="equip" name="equip" />
+                  <span class="track" aria-hidden="true"></span><span class="knob" aria-hidden="true"></span>
+                </span></div>
+              </div>
+              <div class="calc__row">
+                <label for="support">Support plan <span class="hint">Bundled labor hours each month</span></label>
+                <div class="calc__control"><select id="support" name="support">
+                  <option value="0">None, pay as you go</option>
+                  <option value="200">Essential &middot; $200 (2 hr)</option>
+                  <option value="380" selected>Standard &middot; $380 (4 hr)</option>
+                  <option value="540">Premium &middot; $540 (6 hr)</option>
+                  <option value="850">Priority &middot; $850 (10 hr)</option>
+                </select></div>
+              </div>
+              <div class="calc__row">
+                <label for="m365">Microsoft 365 users <span class="hint">Business Standard, $14/user</span></label>
+                <div class="calc__control"><div class="stepper" data-step="m365">
+                  <button type="button" data-dir="-1" aria-label="Fewer Microsoft 365 users">&minus;</button>
+                  <input id="m365" name="m365" type="number" inputmode="numeric" min="0" max="500" value="0" />
+                  <button type="button" data-dir="1" aria-label="More Microsoft 365 users">+</button>
+                </div></div>
+              </div>
+              <div class="calc__row">
+                <label for="voip">Business phone users <span class="hint">GPS-Voice Standard, $28/user</span></label>
+                <div class="calc__control"><div class="stepper" data-step="voip">
+                  <button type="button" data-dir="-1" aria-label="Fewer phone users">&minus;</button>
+                  <input id="voip" name="voip" type="number" inputmode="numeric" min="0" max="500" value="0" />
+                  <button type="button" data-dir="1" aria-label="More phone users">+</button>
+                </div></div>
+              </div>
+              <div class="calc__row" style="border-bottom:0;">
+                <label for="hosting">Web hosting <span class="hint">Managed, with SSL &amp; backups</span></label>
+                <div class="calc__control"><select id="hosting" name="hosting">
+                  <option value="0" selected>None</option>
+                  <option value="15">Starter &middot; $15</option>
+                  <option value="35">Business &middot; $35</option>
+                  <option value="65">Commerce &middot; $65</option>
+                </select></div>
+              </div>
+            </form>
+
+            <div class="calc__out">
+              <h3>Monthly statement</h3>
+              <div class="ledger-lines" id="ledgerLines"></div>
+              <hr class="calc__divider" />
+              <div class="calc__total" aria-live="polite">
+                <span class="tlabel">Per month</span>
+                <span class="tnum mono" id="totalMonthly">$0</span>
+              </div>
+              <div class="calc__annual mono" id="totalAnnual">$0 / year</div>
+              <div class="calc__perep mono" id="perEndpoint">all-in, per endpoint / mo</div>
+              <a class="btn btn--primary calc__cta" href="contact.html#contact" id="sendEstimate">Send me this estimate <span class="arrow" aria-hidden="true">&rarr;</span></a>
+              <p class="calc__foot">Estimate only, your real quote is tailored to your setup. No card, no commitment, and we will tell you if you are buying more than you need.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <!-- RADIO TICKER MARQUEE -->
+  <div class="radio-ticker">
+    <div class="radio-ticker__track">
+      <div class="radio-ticker__item"><strong>The Computer Guru Show</strong> Saturdays 9AM on KVOI 1030AM</div>
+      <div class="radio-ticker__item">Call in: <strong>520-790-2020</strong></div>
+      <div class="radio-ticker__item">Tucson's trusted tech talk since 2001</div>
+      <div class="radio-ticker__item"><strong>The Computer Guru Show</strong> Saturdays 9AM on KVOI 1030AM</div>
+      <div class="radio-ticker__item">Call in: <strong>520-790-2020</strong></div>
+      <div class="radio-ticker__item">Tucson's trusted tech talk since 2001</div>
+    </div>
+  </div>
+
+  <!-- EXIT INTENT BANNER -->
+  <div class="exit-offer" id="exitOffer">
+    <div class="exit-offer__content">
+      <div class="exit-offer__message">
+        <strong>Wait — Free IT Assessment</strong>
+        <p>Most Tucson businesses overpay for IT. Get a free audit before you go.</p>
+      </div>
+      <div class="exit-offer__actions">
+        <a class="btn btn--primary" href="contact.html">Get Free Assessment</a>
+        <button class="exit-offer__close" id="closeExit" aria-label="Close banner">&times;</button>
+      </div>
+    </div>
+  </div>
+
+  <footer class="site-footer">
+    <div class="wrap">
+      <p>&copy; <span id="year">2026</span> Arizona Computer Guru &middot; Protecting Tucson businesses since 2001</p>
+      <p><a href="tel:+15203048300">520.304.8300</a> &middot; <a href="mailto:info@azcomputerguru.com">info@azcomputerguru.com</a></p>
+      <p class="disclaimer">Local demonstration build of a proposed azcomputerguru.com (multipage). Pricing reflects published GPS rates and is illustrative for the estimator; a real quote is tailored to your environment. The contact form is not wired to a mailbox. Photography is representational.</p>
+    </div>
+  </footer>
+  <script src="js/app.js"></script>
+</body>
+</html>

projects/acg-website/contact.html

@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Contact | Arizona Computer Guru</title>
+  <meta name="description" content="Talk to a human in Tucson. Call 520.304.8300, email info@azcomputerguru.com, or visit 7437 E. 22nd St. No pressure, no pitch." />
+  <meta name="color-scheme" content="light dark" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Lexend:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600;700&family=Fraunces:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600;700&family=Anton&family=Hanken+Grotesk:wght@400;500;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="css/styles.css" />
+  <link rel="icon" href="assets/logo/acg-mark.svg" type="image/svg+xml" />
+  <script>(function(){try{var s=localStorage.getItem("acg-theme");var m=s||(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");document.documentElement.setAttribute("data-theme",m);document.documentElement.setAttribute("data-skin",(localStorage.getItem("acg-skin")||"bold"));document.documentElement.classList.add("js");}catch(e){}})();</script>
+  <script type="application/ld+json">
+  {"@context":"https://schema.org","@type":"LocalBusiness","name":"Arizona Computer Guru","image":"assets/images/contact.png","address":{"@type":"PostalAddress","streetAddress":"7437 E. 22nd St","addressLocality":"Tucson","addressRegion":"AZ","postalCode":"85710","addressCountry":"US"},"telephone":"+1-520-304-8300","email":"info@azcomputerguru.com","url":"https://azcomputerguru.com","openingHours":"Mo-Fr 09:00-17:00"}
+  </script>
+</head>
+<body>
+  <a href="#main" class="sr-only">Skip to content</a>
+  <header class="site-header">
+    <div class="wrap">
+      <a class="brand" href="index.html" aria-label="Arizona Computer Guru home">
+        <span class="brand__mark" aria-hidden="true"><svg viewBox="0 0 100 104" fill="none" stroke="currentColor" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(20 50 54)"><path d="M61.2 26.2 A30 30 0 1 1 38.8 26.2"/><line x1="50" y1="14" x2="50" y2="50"/></g></svg></span>
+        <span><span class="brand__name">Arizona Computer Guru</span><br /><span class="brand__since">Concierge IT &middot; Tucson &middot; since 2001</span></span>
+      </a>
+      <nav class="nav" aria-label="Primary">
+        <div class="nav__links" id="navLinks">
+          <a class="nav__link" href="index.html">Home</a>
+          <a class="nav__link" href="services.html">Services</a>
+          <a class="nav__link" href="pricing.html">Pricing</a>
+          <a class="nav__link nav__link--cta" href="calculator.html">Estimate</a>
+          <a class="nav__link" href="about.html">About</a>
+          <a class="nav__link" href="contact.html" aria-current="page">Contact</a>
+        </div>
+        <a class="nav__phone" href="tel:+15203048300">520.304.8300</a>
+        <button class="skin-toggle" id="skinToggle" type="button" aria-label="Switch visual skin (Bold, Midnight, or Verdigris)" title="Switch skin: Bold / Midnight / Verdigris"><span class="sw" aria-hidden="true"></span></button>
+        <button class="theme-toggle" id="themeToggle" type="button" aria-pressed="false" aria-label="Switch to dark theme" title="Toggle light / dark"><span aria-hidden="true" data-theme-icon>&#9728;</span></button>
+        <button class="nav__toggle" id="navToggle" type="button" aria-expanded="false" aria-controls="navLinks" aria-label="Open menu">&#8801;</button>
+      </nav>
+    </div>
+  </header>
+
+  <main id="main">
+    <section class="contact ledger" id="contact" aria-labelledby="contact-h" style="padding-top:calc(var(--base)*3);">
+      <div class="wrap">
+        <div class="contact__intro reveal">
+          <p class="section-tag">No pressure, no pitch <span>/ let's talk</span></p>
+          <h1 id="contact-h">Talk to a human</h1>
+          <p class="muted">Tell us what is frustrating you, or send over an estimate from the calculator. We will give you honest feedback, even if that is "your current setup is fine, here is one thing to fix."</p>
+          <div class="contact__lines">
+            <div><span class="k">Phone</span><br /><a class="v" href="tel:+15203048300">520.304.8300</a></div>
+            <div><span class="k">Email</span><br /><a class="v" href="mailto:info@azcomputerguru.com">info@azcomputerguru.com</a></div>
+            <div><span class="k">Office</span><br /><span class="v">7437 E. 22nd St, Tucson, AZ 85710</span></div>
+            <div><span class="k">Hours</span><br /><span class="v">Mon&ndash;Fri 9&ndash;5 &middot; 24/7 emergency for Priority clients</span></div>
+          </div>
+          <figure class="office-figure">
+            <img src="assets/images/contact.png" width="1248" height="832" alt="A warm southwestern stucco storefront at golden hour with a saguaro and the Santa Catalina mountains in the distance, Tucson." loading="lazy" />
+            <figcaption><span>East side, Tucson</span><span>come say hello</span></figcaption>
+          </figure>
+        </div>
+
+        <form class="contact__form reveal" id="contactForm" novalidate>
+          <div class="form-field">
+            <label for="cf-name">Your name</label>
+            <input id="cf-name" name="name" type="text" autocomplete="name" required />
+          </div>
+          <div class="form-field">
+            <label for="cf-biz">Business</label>
+            <input id="cf-biz" name="business" type="text" autocomplete="organization" />
+          </div>
+          <div class="form-field">
+            <label for="cf-contact">Phone or email</label>
+            <input id="cf-contact" name="contact" type="text" autocomplete="email" required />
+          </div>
+          <div class="form-field">
+            <label for="cf-msg">What can we help with?</label>
+            <textarea id="cf-msg" name="message"></textarea>
+          </div>
+          <button class="btn btn--primary" type="submit">Send message <span class="arrow" aria-hidden="true">&rarr;</span></button>
+          <p class="form-note" id="formNote" aria-live="polite">We reply the same business day. (Demo build: this form is not wired to a mailbox.)</p>
+        </form>
+      </div>
+    </section>
+
+    <section class="faq" id="faq" aria-labelledby="faq-h">
+      <div class="wrap wrap--narrow">
+        <p class="section-tag">Straight answers <span>/ ask us anything</span></p>
+        <h2 id="faq-h">Questions worth asking any IT company</h2>
+        <div class="faq__list" id="faqList">
+          <div class="faq__item"><button class="faq__q" aria-expanded="false"><span>Will I get a real person, or an offshore call center?</span><span class="pm" aria-hidden="true">+</span></button><div class="faq__a"><div class="faq__a-inner">A real, local person. Our team works out of our Tucson office at 7437 E. 22nd St. You can visit, and after hours you reach an on-call tech who is also local, not a queue overseas.</div></div></div>
+          <div class="faq__item"><button class="faq__q" aria-expanded="false"><span>What's your contract term?</span><span class="pm" aria-hidden="true">+</span></button><div class="faq__a"><div class="faq__a-inner">Month-to-month. Cancel with 30 days' notice, no early-termination fee. We would rather earn your business every month than trap you in a three-year agreement.</div></div></div>
+          <div class="faq__item"><button class="faq__q" aria-expanded="false"><span>What happens if I use more support hours than my plan includes?</span><span class="pm" aria-hidden="true">+</span></button><div class="faq__a"><div class="faq__a-inner">Plan hours are used first. After that we draw from any pre-paid block time you have banked ($100 to $150/hr), which never expires. No block time? Overage is billed at $175/hr, and we will always flag it before the meter runs.</div></div></div>
+          <div class="faq__item"><button class="faq__q" aria-expanded="false"><span>How fast do you respond to an emergency?</span><span class="pm" aria-hidden="true">+</span></button><div class="faq__a"><div class="faq__a-inner">By plan: Standard is 8 hours, Premium 4 hours, Priority 2 hours around the clock. A total outage is escalated immediately regardless of plan, and for local clients we are typically onsite within 1 to 2 hours.</div></div></div>
+          <div class="faq__item"><button class="faq__q" aria-expanded="false"><span>What security is actually included?</span><span class="pm" aria-hidden="true">+</span></button><div class="faq__a"><div class="faq__a-inner">GPS-Pro and above include advanced EDR, email security, dark-web monitoring, and monthly security-awareness training. GPS-Advanced adds compliance tooling and ransomware rollback. Basic antivirus alone is not enough anymore, so we do not pretend it is.</div></div></div>
+          <div class="faq__item"><button class="faq__q" aria-expanded="false"><span>Can you help me meet cyber-insurance requirements?</span><span class="pm" aria-hidden="true">+</span></button><div class="faq__a"><div class="faq__a-inner">Yes. GPS-Pro covers most of what insurers ask for: MFA enforcement, EDR, training, and cloud backups, and we will provide documentation for your agent. We work with several Tucson insurance agents regularly.</div></div></div>
+          <div class="faq__item"><button class="faq__q" aria-expanded="false"><span>What if my team grows or shrinks?</span><span class="pm" aria-hidden="true">+</span></button><div class="faq__a"><div class="faq__a-inner">Billing is per endpoint, so it just follows your headcount. Add three people, add three endpoints; downsize and it drops the next month. No contract amendments, no penalties.</div></div></div>
+          <div class="faq__item"><button class="faq__q" aria-expanded="false"><span>Do you really publish your pricing?</span><span class="pm" aria-hidden="true">+</span></button><div class="faq__a"><div class="faq__a-inner">You are looking at it. Our rates are on the pricing page and in the estimator. We think hiding prices is a red flag, in any IT company, including us.</div></div></div>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <!-- RADIO TICKER MARQUEE -->
+  <div class="radio-ticker">
+    <div class="radio-ticker__track">
+      <div class="radio-ticker__item"><strong>The Computer Guru Show</strong> Saturdays 9AM on KVOI 1030AM</div>
+      <div class="radio-ticker__item">Call in: <strong>520-790-2020</strong></div>
+      <div class="radio-ticker__item">Tucson's trusted tech talk since 2001</div>
+      <div class="radio-ticker__item"><strong>The Computer Guru Show</strong> Saturdays 9AM on KVOI 1030AM</div>
+      <div class="radio-ticker__item">Call in: <strong>520-790-2020</strong></div>
+      <div class="radio-ticker__item">Tucson's trusted tech talk since 2001</div>
+    </div>
+  </div>
+
+  <!-- EXIT INTENT BANNER -->
+  <div class="exit-offer" id="exitOffer">
+    <div class="exit-offer__content">
+      <div class="exit-offer__message">
+        <strong>Wait — Free IT Assessment</strong>
+        <p>Most Tucson businesses overpay for IT. Get a free audit before you go.</p>
+      </div>
+      <div class="exit-offer__actions">
+        <a class="btn btn--primary" href="contact.html">Get Free Assessment</a>
+        <button class="exit-offer__close" id="closeExit" aria-label="Close banner">&times;</button>
+      </div>
+    </div>
+  </div>
+
+  <footer class="site-footer">
+    <div class="wrap">
+      <p>&copy; <span id="year">2026</span> Arizona Computer Guru &middot; Protecting Tucson businesses since 2001</p>
+      <p><a href="tel:+15203048300">520.304.8300</a> &middot; <a href="mailto:info@azcomputerguru.com">info@azcomputerguru.com</a></p>
+      <p class="disclaimer">Local demonstration build of a proposed azcomputerguru.com (multipage). Pricing reflects published GPS rates and is illustrative for the estimator; a real quote is tailored to your environment. The contact form is not wired to a mailbox. Photography is representational.</p>
+    </div>
+  </footer>
+  <script src="js/app.js"></script>
+</body>
+</html>

projects/acg-website/css/radical.css

@@ -0,0 +1,206 @@
+/* ===========================================================================
+   ARIZONA COMPUTER GURU - "BLOWOUT"  (radical direction)
+   Poster brutalism: ultra-condensed display, drenched signal-orange,
+   scrolling marquee, giant numerals, hard edges, zero ledger calm.
+   Self-contained (does not use styles.css).
+   =========================================================================== */
+
+:root {
+  --ink:    #0C0A09;   /* near-black canvas            */
+  --ink-2:  #16120F;   /* raised black panel           */
+  --bone:   #F4EDE1;   /* primary text                 */
+  --bone-2: #B8AE9E;   /* secondary                    */
+  --hot:    #FF5A1F;   /* signal orange, used BIG      */
+  --hot-2:  #FF8A4D;   /* lighter orange for fine text */
+  --line:   rgba(244, 237, 225, 0.16);
+
+  --maxw: 1280px;
+  --f-poster: "Anton", "Arial Narrow", system-ui, sans-serif;
+  --f-body:   "Hanken Grotesk", system-ui, -apple-system, Segoe UI, sans-serif;
+  --f-mono:   "JetBrains Mono", ui-monospace, Consolas, monospace;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+* { margin: 0; }
+html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
+  .marquee__track { animation: none !important; }
+}
+body {
+  background: var(--ink); color: var(--bone);
+  font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.5;
+  -webkit-font-smoothing: antialiased; overflow-x: hidden;
+}
+img { display: block; max-width: 100%; }
+a { color: inherit; text-decoration: none; }
+::selection { background: var(--hot); color: var(--ink); }
+.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
+
+.wrap { width: min(100% - 3rem, var(--maxw)); margin-inline: auto; }
+.hot { color: var(--hot); }
+
+/* ---- Header ------------------------------------------------------------- */
+.rx-header {
+  position: sticky; top: 0; z-index: 50;
+  background: var(--ink); border-bottom: 2px solid var(--bone);
+}
+.rx-header .wrap { display: flex; align-items: center; gap: 1.5rem;
+  height: 68px; }
+.rx-brand { font-family: var(--f-poster); font-size: 1.6rem; letter-spacing: 0.02em;
+  text-transform: uppercase; line-height: 1; }
+.rx-brand b { color: var(--hot); }
+.rx-nav { margin-left: auto; display: flex; align-items: center; gap: 1.75rem; }
+.rx-nav a { font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.08em;
+  text-transform: uppercase; color: var(--bone-2); }
+.rx-nav a:hover { color: var(--hot); }
+.rx-cta-sm { border: 2px solid var(--hot); color: var(--bone) !important;
+  padding: 0.45rem 0.9rem; }
+.rx-cta-sm:hover { background: var(--hot); color: var(--ink) !important; }
+@media (max-width: 760px) { .rx-nav a:not(.rx-cta-sm) { display: none; } }
+
+/* ---- Hero --------------------------------------------------------------- */
+.rx-hero { padding-block: clamp(2.5rem, 7vw, 6rem) clamp(2rem, 5vw, 4rem);
+  border-bottom: 2px solid var(--bone); position: relative; overflow: hidden; }
+.rx-hero__eyebrow { font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.25em;
+  text-transform: uppercase; color: var(--hot); margin-bottom: 1.5rem; }
+.rx-hero h1 {
+  font-family: var(--f-poster); font-weight: 400; text-transform: uppercase;
+  font-size: clamp(3.5rem, 16vw, 13rem); line-height: 0.86; letter-spacing: -0.01em;
+  margin-left: -0.06em;
+}
+.rx-hero h1 .stroke {
+  color: transparent; -webkit-text-stroke: 2px var(--bone); text-stroke: 2px var(--bone);
+}
+.rx-hero__sub { font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--bone-2);
+  max-width: 30ch; margin-top: 2rem; }
+.rx-hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.25rem; }
+.rx-hero__art {
+  position: absolute; right: -4%; top: 50%; transform: translateY(-50%);
+  width: 42vw; max-width: 620px; aspect-ratio: 3/2; pointer-events: none;
+  filter: grayscale(1) contrast(1.15) brightness(0.62);
+  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%);
+  mask-image: linear-gradient(90deg, transparent, #000 35%);
+  opacity: 0.55; z-index: -1;
+}
+.rx-hero__art::after { content: ""; position: absolute; inset: 0; background: var(--hot);
+  mix-blend-mode: overlay; }
+.rx-hero__art img { width: 100%; height: 100%; object-fit: cover; }
+@media (max-width: 900px) { .rx-hero__art { display: none; } }
+
+/* ---- Buttons ------------------------------------------------------------ */
+.rx-btn { font-family: var(--f-poster); text-transform: uppercase; letter-spacing: 0.02em;
+  font-size: 1.15rem; display: inline-flex; align-items: center; gap: 0.6rem;
+  padding: 0.85rem 1.6rem; border: 2px solid transparent; cursor: pointer; }
+.rx-btn--hot { background: var(--hot); color: var(--ink); }
+.rx-btn--hot:hover { background: var(--bone); }
+.rx-btn--out { border-color: var(--bone); color: var(--bone); }
+.rx-btn--out:hover { background: var(--bone); color: var(--ink); }
+.rx-btn .x { font-family: var(--f-mono); }
+:focus-visible { outline: 3px solid var(--hot); outline-offset: 3px; }
+
+/* ---- Marquee ------------------------------------------------------------ */
+.marquee { background: var(--hot); color: var(--ink); border-bottom: 2px solid var(--bone);
+  overflow: hidden; padding-block: 0.7rem; }
+.marquee__track { display: inline-flex; white-space: nowrap; will-change: transform;
+  animation: marquee 26s linear infinite; }
+.marquee:hover .marquee__track { animation-play-state: paused; }
+.marquee span { font-family: var(--f-poster); text-transform: uppercase;
+  font-size: 1.4rem; letter-spacing: 0.03em; padding-inline: 1.25rem; }
+.marquee span::after { content: "\273F"; margin-left: 2.5rem; opacity: 0.6; }
+@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
+
+/* ---- Section scaffold --------------------------------------------------- */
+.rx-sec { padding-block: clamp(3rem, 7vw, 6.5rem); border-bottom: 2px solid var(--bone); position: relative; }
+.rx-kicker { font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.22em;
+  text-transform: uppercase; color: var(--hot); display: flex; gap: 1rem; align-items: center; }
+.rx-kicker::before { content: ""; width: 40px; height: 2px; background: var(--hot); }
+.rx-h2 { font-family: var(--f-poster); text-transform: uppercase; font-weight: 400;
+  font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: 0.92; margin-top: 1rem; }
+.rx-ghost { position: absolute; right: 2%; top: 0.5rem; font-family: var(--f-poster);
+  font-size: clamp(6rem, 18vw, 16rem); line-height: 1; color: transparent;
+  -webkit-text-stroke: 1px var(--line); pointer-events: none; user-select: none; z-index: 0; }
+.rx-sec > .wrap { position: relative; z-index: 1; }
+
+/* ---- Services (giant rows) ---------------------------------------------- */
+.rx-svc { display: grid; grid-template-columns: 4.5rem 1fr auto; align-items: baseline;
+  gap: 1.5rem; padding-block: 1.4rem; border-top: 2px solid var(--line);
+  transition: background 0.18s, padding-left 0.18s; }
+.rx-svc:last-child { border-bottom: 2px solid var(--line); }
+.rx-svc:hover { background: var(--ink-2); padding-left: 1rem; }
+.rx-svc__n { font-family: var(--f-mono); color: var(--hot); font-size: 0.95rem; }
+.rx-svc__name { font-family: var(--f-poster); text-transform: uppercase;
+  font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 0.95; }
+.rx-svc__d { color: var(--bone-2); font-size: 0.98rem; max-width: 52ch; margin-top: 0.4rem; }
+.rx-svc__meta { font-family: var(--f-mono); color: var(--hot-2); font-size: 0.85rem;
+  white-space: nowrap; text-align: right; }
+@media (max-width: 640px) {
+  .rx-svc { grid-template-columns: 2.5rem 1fr; }
+  .rx-svc__meta { grid-column: 2; text-align: left; }
+}
+
+/* ---- Pricing (blowout numerals) ----------------------------------------- */
+.rx-prices { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 2.5rem;
+  border: 2px solid var(--bone); }
+.rx-price { padding: clamp(1.5rem, 3vw, 2.5rem); border-right: 2px solid var(--bone); }
+.rx-price:last-child { border-right: 0; }
+.rx-price--pop { background: var(--hot); color: var(--ink); }
+.rx-price__tier { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.1em;
+  font-size: 0.85rem; }
+.rx-price__big { font-family: var(--f-poster); font-size: clamp(4rem, 11vw, 8.5rem);
+  line-height: 0.8; margin-top: 0.75rem; }
+.rx-price__u { font-family: var(--f-mono); font-size: 0.8rem; color: var(--bone-2); display: block;
+  margin-top: 0.75rem; }
+.rx-price--pop .rx-price__u { color: var(--ink); opacity: 0.7; }
+.rx-price__list { list-style: none; padding: 0; margin-top: 1.25rem; display: grid; gap: 0.4rem;
+  font-size: 0.9rem; color: var(--bone-2); }
+.rx-price--pop .rx-price__list { color: var(--ink); }
+.rx-price__list li::before { content: "+ "; font-family: var(--f-mono); }
+@media (max-width: 760px) {
+  .rx-prices { grid-template-columns: 1fr; }
+  .rx-price { border-right: 0; border-bottom: 2px solid var(--bone); }
+  .rx-price:last-child { border-bottom: 0; }
+}
+
+/* ---- Calculator teaser -------------------------------------------------- */
+.rx-calc { background: var(--ink-2); }
+.rx-calc .wrap { display: grid; grid-template-columns: 1.4fr auto; gap: 2rem; align-items: center; }
+.rx-calc__big { font-family: var(--f-poster); text-transform: uppercase;
+  font-size: clamp(2.2rem, 6vw, 4.5rem); line-height: 0.9; }
+.rx-calc p { color: var(--bone-2); margin-top: 1rem; max-width: 46ch; }
+@media (max-width: 760px) { .rx-calc .wrap { grid-template-columns: 1fr; } }
+
+/* ---- CTA drench --------------------------------------------------------- */
+.rx-cta { background: var(--hot); color: var(--ink); border-bottom: 0; text-align: center; }
+.rx-cta__big { font-family: var(--f-poster); text-transform: uppercase;
+  font-size: clamp(3rem, 13vw, 10rem); line-height: 0.85; }
+.rx-cta__row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
+.rx-cta .rx-btn--hot { background: var(--ink); color: var(--hot); }
+.rx-cta .rx-btn--hot:hover { background: var(--bone); color: var(--ink); }
+.rx-cta .rx-btn--out { border-color: var(--ink); color: var(--ink); }
+.rx-cta .rx-btn--out:hover { background: var(--ink); color: var(--hot); }
+
+/* ---- Footer ------------------------------------------------------------- */
+.rx-footer { padding-block: 2.5rem; }
+.rx-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
+.rx-footer p { font-family: var(--f-mono); font-size: 0.8rem; color: var(--bone-2); }
+.rx-footer a { color: var(--bone); }
+.rx-footer a:hover { color: var(--hot); }
+.rx-note { width: 100%; font-size: 0.72rem; color: var(--bone-2); opacity: 0.7;
+  border-top: 2px solid var(--line); padding-top: 1rem; margin-top: 0.5rem; }
+
+/* reveal */
+.rx-up { opacity: 0; transform: translateY(18px); transition: opacity 0.6s cubic-bezier(0.2,0.7,0.2,1), transform 0.6s cubic-bezier(0.2,0.7,0.2,1); }
+.rx-up.in { opacity: 1; transform: none; }
+
+/* ---- narrow-screen polish ---------------------------------------------- */
+@media (max-width: 480px) {
+  .rx-header .wrap { gap: 0.75rem; }
+  .rx-brand { font-size: 1.15rem; }
+  .rx-cta-sm { font-size: 0.72rem; padding: 0.4rem 0.6rem; }
+  .rx-hero__cta { flex-direction: column; align-items: stretch; }
+  .rx-hero__cta .rx-btn { justify-content: center; }
+  .marquee span { font-size: 1.1rem; }
+  .rx-calc .rx-btn { justify-self: start; }
+}

projects/acg-website/design/detect.json

@@ -0,0 +1 @@
+Error: bundled detector not found.

projects/acg-website/design/gen-extra-images.sh

@@ -0,0 +1,18 @@
+#!/usr/bin/env bash
+set -u
+ROOT=/d/ClaudeTools
+GROK="$ROOT/.claude/skills/grok/scripts/ask-grok.sh"
+OUT="$ROOT/projects/acg-website-showcase/multipage/assets/images"
+cd "$ROOT"
+
+echo "=== [1/3] services / hardware ==="
+bash "$GROK" image "Photorealistic editorial close-up of a tidy small-office network setup in warm afternoon light: a clean wall-mounted patch panel and a small network switch with neatly dressed cables on a light wooden shelf against a smooth white stucco wall. Orderly, honest, premium, no logos, no text. Warm cream, tan and soft amber palette, gentle film grain, shallow depth of field. No people. Wide 3:2 landscape." "$OUT/services.png"
+
+echo "=== [2/3] about / relationship ==="
+bash "$GROK" image "Photorealistic editorial photograph, warm afternoon window light: a friendly handshake across a light-wood desk in a small Tucson office, mid-shot focusing on the two hands meeting above the desk, with a modern laptop and an open paper notebook nearby. Genuine, human, welcoming. Warm cream and tan palette, soft fine film grain, shallow depth of field. No logos, no visible faces, no text. Wide 3:2 landscape." "$OUT/about.png"
+
+echo "=== [3/3] contact / Tucson exterior ==="
+bash "$GROK" image "Photorealistic golden-hour photograph: the exterior of a modest single-story southwestern commercial building with warm hand-troweled stucco walls and a clean simple storefront, a saguaro cactus and the soft silhouette of the Santa Catalina mountains in the distance, Tucson Arizona. Calm, local, welcoming. No signage text, no people, no logos. Warm cream and amber palette, soft film grain. Wide 3:2 landscape." "$OUT/contact.png"
+
+echo "=== DONE ==="
+ls -la "$OUT"

projects/acg-website/design/gen-verdigris-images.sh

@@ -0,0 +1,21 @@
+#!/usr/bin/env bash
+set -u
+ROOT=/d/ClaudeTools
+GROK="$ROOT/.claude/skills/grok/scripts/ask-grok.sh"
+OUT="$ROOT/projects/acg-website-showcase/multipage/assets/images/verdigris"
+mkdir -p "$OUT"
+cd "$ROOT"
+
+echo "=== [1/4] hero: copper gate latch ==="
+bash "$GROK" image "Photorealistic documentary close-up: a verdigris-patinated copper gate latch on a whitewashed stucco wall, soft cool morning side light, the latch in sharp focus and the plaster softly blurred behind it. Neutral-to-cool white balance, desaturated palette, the verdigris blue-green patina is the only saturated hue in frame, shallow depth of field, fine grain. No people, no text, no lens flare. Wide 3:2 landscape." "$OUT/hero.png"
+
+echo "=== [2/4] services: patch panel labeling ==="
+bash "$GROK" image "Photorealistic documentary photo: a pair of hands labeling a network patch panel with small neat handwritten tags, careful and human, cool neutral light, shallow depth of field, desaturated palette with a faint hint of verdigris green. Industrial, orderly, transparent process. No faces, no logos, no text on screen. Wide 3:2 landscape." "$OUT/services.png"
+
+echo "=== [3/4] about: weathered enamel storefront sign ==="
+bash "$GROK" image "Photorealistic documentary photo: a weathered hand-painted enamel storefront service sign mounted on a whitewashed Tucson stucco wall, cared-for but not glossy, the lettering soft and partly out of focus, partial sidewalk and plaster visible. Cool neutral white balance, side light, desaturated palette with verdigris-green and aged-metal accents. No people. Wide 3:2 landscape." "$OUT/about.png"
+
+echo "=== [4/4] contact: cool Tucson storefront ==="
+bash "$GROK" image "Photorealistic documentary photo: the exterior of a tidy 1950s single-story Tucson stucco storefront in cool overcast morning light, whitewashed plaster walls, a weathered copper-patina door pull and trim, clean simple windows. Calm, local, cared-for. Cool neutral white balance, desaturated palette, verdigris-green the only saturated hue. No signage text, no people. Wide 3:2 landscape." "$OUT/contact.png"
+
+echo "=== DONE ==="; ls -la "$OUT"

projects/acg-website/design/grok-newdesign-prompt.txt

@@ -0,0 +1,20 @@
+You are the lead designer. Originate ONE complete, opinionated, buildable art direction for a website. I will implement it exactly, then put it through an independent design critique, so be concrete and commit.
+
+THE SITE: A multipage marketing website for "Arizona Computer Guru" (ACG), a Tucson managed-IT and cybersecurity company since 2001. Differentiator: "concierge IT" (genuine relationships, going far beyond typical IT companies, transparent honest pricing, kind and direct, local). Audience: Tucson small-business owners, often burned before by surprise bills, offshore call centers, three-year lock-ins. The site sells trust first. Pages: Home, Services, Pricing, Calculator (interactive IT-cost estimator), About, Contact.
+
+HARD CONSTRAINTS:
+- Hand-built static HTML/CSS/vanilla-JS, driven by CSS custom-property design tokens. So give me CONCRETE values.
+- Must be genuinely premium and distinctive, and must NOT look like generic AI-slop SaaS (no blue/purple gradient blobs, no floating 3D isometrics, no glowing shields, no hero-metric template, no identical icon-card grids).
+- ALL text must be readable (WCAG AA, ~4.5:1 body) in BOTH a light theme AND a dark theme.
+- It must be DISTINCT from the two skins this site already has: (1) "Sonoran Ledger" = warm cream paper, ledger rulings, mono numerals, burnt-amber accent; (2) "Midnight Concierge" = cool slate dark-premium with amber accent. Do not give me a third variation on warm-paper or cool-slate. Go somewhere new.
+
+DELIVER, in this structure:
+1. NAME.
+2. CONCEPT: one tight paragraph. Name a real-world reference object/aesthetic so it is not generic.
+3. COLOR TOKENS, explicit hex, for BOTH modes. Give exactly these roles for LIGHT and for DARK: paper (bg), surface, surface-2, ink (primary text), ink-2 (secondary), ink-3 (muted), rule (hairline rgba), accent (the one signal color used <=10%), accent-ink (the accent as TEXT, AA-safe on that mode's bg), on-accent (text on an accent fill). Keep chroma sane at extremes. State the accent hue you chose and why (you may keep ACG's amber or pick a new brand-justified color).
+4. TYPOGRAPHY: display + body + mono families (real Google Fonts). You MAY change from the current Barlow Condensed / Lexend / JetBrains Mono if your concept needs it; justify. Note weights and the hierarchy approach.
+5. SIGNATURE MOVES: 2-4 concrete, distinctive treatments that define the look (what replaces ledger rulings, corner radius, dividers, the way pricing/the calculator are framed, motion). Be specific enough to build.
+6. IMAGERY: describe the hero image + 2 section images you want (photographic, so I can generate them with an image model), and the overall art-direction of photography (light, palette, mood). Say if existing warm golden-hour Tucson photos (desk-with-ledger, handshake, stucco storefront) should be reused or replaced.
+7. ANTI-SLOP: 3 specific reasons this will not read as AI-generated, and name the single biggest risk that it DOES, plus how to avoid it.
+
+Keep it tight and decisive, under ~750 words. Commit to specifics; do not hedge with ranges.

projects/acg-website/design/grok-newdesign.md

@@ -0,0 +1,96 @@
+# 1. NAME
+
+**Verdigris Gate**
+
+---
+
+# 2. CONCEPT
+
+Reference object: the **oxidized copper hardware on a maintained 1950s Tucson stucco storefront** — whitewashed plaster, brushed aluminum door pulls weathered to verdigris, hand-painted enamel service signage. Premium through material honesty, not dashboard gloss. Concierge IT is the gate you walk through: labeled, direct, locally kept. The site should feel like that building’s fascia and service counter, not a SaaS landing template.
+
+---
+
+# 3. COLOR TOKENS
+
+**Accent hue: Verdigris (#2F7A6B light / #4DA896 dark).** Copper oxidation is Tucson-native (pipes, roof flashings, desert hardware) and signals stewardship and longevity — not alarm-red security or fintech amber. Used ≤10%: primary CTA, active nav rule, calculator totals, one pull-quote bar.
+
+### Light (plaster day)
+| Role | Value |
+|---|---|
+| paper | `#E9EDEA` |
+| surface | `#FFFFFF` |
+| surface-2 | `#DFE5E1` |
+| ink | `#1C2421` |
+| ink-2 | `#3F4F49` |
+| ink-3 | `#5C6B65` |
+| rule | `rgba(28, 36, 33, 0.12)` |
+| accent | `#2F7A6B` |
+| accent-ink | `#1F5F52` |
+| on-accent | `#F0F7F5` |
+
+### Dark (wet courtyard night)
+| Role | Value |
+|---|---|
+| paper | `#141A18` |
+| surface | `#1C2421` |
+| surface-2 | `#25302C` |
+| ink | `#E4EBE8` |
+| ink-2 | `#A8B5AF` |
+| ink-3 | `#7A8A84` |
+| rule | `rgba(228, 235, 232, 0.10)` |
+| accent | `#4DA896` |
+| accent-ink | `#6BC4B0` |
+| on-accent | `#0D1614` |
+
+All body pairs (`ink` on `paper`, `ink-2` on `surface`) exceed 4.5:1. `accent-ink` is for text links and inline emphasis on backgrounds, never large accent fills.
+
+---
+
+# 4. TYPOGRAPHY
+
+**Display: Fraunces** (Google Fonts) — weights 500 (H1), 400 (H2–H3). Soft, old-metal signage energy; breaks SaaS sans uniformity without ledger nostalgia.
+
+**Body: Source Sans 3** — 400 body, 600 labels/nav. Humanist, plainspoken; reads kind and direct at 18px/1.6.
+
+**Mono: IBM Plex Mono** — 400 inputs, 500 calculator totals and pricing figures. Clinical where money is discussed.
+
+**Hierarchy:** One Fraunces H1 per page (max 48px). Sections lead with Source Sans 600 uppercase tracked labels (11px, `letter-spacing: 0.08em`, `ink-3`) — enamel caption style. No hero metrics; trust copy is body-scale, not billboard numbers.
+
+---
+
+# 5. SIGNATURE MOVES
+
+1. **Enamel double-rule frames** — Pricing tiers, calculator shell, and contact form sit inside a 1px `rule` border with a second 1px border 4px inset (no outer glow). `border-radius: 2px` everywhere. Max corner radius site-wide: 4px on buttons only.
+
+2. **Gate-rail header** — Nav lives on a full-width `surface-2` band with a CSS brushed-metal grain (`repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 3px)` in light; `0.06` opacity in dark). Not floating, not sticky glass.
+
+3. **Verdigris underscore navigation** — Links are `ink`; hover/active = 2px `accent` bottom border. One filled `accent` button per viewport (primary CTA). Secondary actions are outlined `rule` borders, never ghost gradients.
+
+4. **Calculator as meter tape** — The estimator is a vertical stack on `surface-2`, top edge perforated via `radial-gradient(circle, paper 30%, transparent 31%)` spaced 8px. Live total in IBM Plex Mono 28px `accent-ink` on `paper` strip — receipt, not widget card. Sliders are 2px track + square 12px thumb (no pill toggles).
+
+**Motion:** 180ms ease on border-color and underscore only. No parallax, no blob drift. Theme toggle cross-fades `color`/`background-color` 200ms.
+
+---
+
+# 6. IMAGERY
+
+**Photography direction:** Documentary maintenance photography — neutral-to-cool white balance, side light, shallow depth of field, desaturated greens and plaster whites, verdigris as the only saturated hue in frame. No lens flare, no neon, no server-room blue wash.
+
+- **Hero:** Close-up of a **verdigris-patinated copper gate latch** on white stucco, morning side light, latch sharp / stucco soft blur. Conveys “local gatekeeper,” not “cyber shield.”
+- **Services section:** **Hands labeling a network patch panel** with handwritten tags — neat, human, transparent process.
+- **About section:** **Weathered hand-painted enamel “Computer Guru” sign** on a Tucson storefront, cared-for not glossy, partial stucco and sidewalk visible.
+
+**Reuse verdict:** **Replace** golden-hour desk-with-ledger (too Sonoran Ledger), **replace** generic handshake (stock trust cliché). **Adapt** stucco storefront only if re-shot cooler/plaster-toned with enamel-sign framing; do not reuse warm golden-hour grade.
+
+---
+
+# 7. ANTI-SLOP
+
+**Why this won’t read AI-generated:**
+1. Verdigris-on-plaster palette — neither blue-purple SaaS nor amber concierge variants already in the repo.
+2. Fraunces serif + enamel double-rules — explicitly rejects icon-card grids and rounded-16px component libraries.
+3. Calculator-as-meter-tape and gate-rail nav are site-specific behaviors, not interchangeable hero-metric templates.
+
+**Biggest risk:** Fraunces + muted green reads **boutique wellness spa**, not MSP.
+
+**Avoid it:** Keep photography industrial (patch panels, hardware, signage). Use IBM Plex Mono and plain-dollar copy on Pricing. No leaf motifs, no “wellness” whitespace — use `surface-2` bands and double-rules to maintain civic/commercial weight. Fraunces only on headlines; body stays Source Sans at 18px minimum.

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

@@ -0,0 +1,27 @@
+[INFO] 1. B2B Trust Assessment (Dial-back)
+- **Verdict:** Credible but leans industrial/brutalist; overcorrected away from "concierge."
+- **Reasoning:** Restricting the signal orange and relying on the bone/ink palette effectively neutralizes the "loud poster" liability. However, the relentless 2px hard ink borders (`styles.css:151`) and ubiquitous zero-radius corners project "heavy construction/logistics" rather than high-touch IT. It is safe for B2B, but lacks premium polish.
+
+[ERROR] 2. WCAG AA Contrast 
+- **Verdict:** CLAIM REFUTED. Light mode buttons fail AA compliance.
+- **Reasoning:** `styles.css:135` pairs `--accent: #E24A12` with `--on-accent: #FBF7F0`. For a 16.8px (1.05rem) 600-weight button text, WCAG AA requires 4.5:1. This pairing yields ~3.78:1. 
+- **Fix:** Change `html[data-skin="bold"]` light mode `--on-accent` to `#16120F` (yields 5.5:1). Dark mode passes (button `5.5:1`, text `7.4:1`).
+
+[WARN] 3. Anton Readability at UI Sizes
+- **Verdict:** Severe legibility friction on sentence-length strings.
+- **Reasoning:** `styles.css:147` forces `.faq__q` (full questions) and `.svc__name` to uppercase. Anton's ultra-condensed, heavy letterforms are designed for isolated poster words. At 1.25rem (20px), block-capital questions smear into unreadable rectangles.
+- **Fix:** Remove `.faq__q`, `.svc__name`, and `.brand__name` from the `styles.css:147` uppercase block.
+
+[WARN] 4. Grayscale Filter Scope
+- **Verdict:** Destructive global targeting.
+- **Reasoning:** `styles.css:158` (`html[data-skin="bold"] img { filter: grayscale(1)... }`) blindly desaturates the entire DOM. This will break Microsoft/partner badges, future client logos, and functional UI images.
+- **Fix:** Scope specifically to narrative frames: `html[data-skin="bold"] .hero__frame img, html[data-skin="bold"] .story__img img, html[data-skin="bold"] .page-head--img img`.
+
+[ERROR] 5. Skin Scoping & Real Bugs
+- **Verdict:** 3 implementation failures detected.
+- **Leak (Mobile Nav):** `styles.css:160` applies an active link gradient with a specificity of `0,0,2,2`. This permanently defeats the multipage mobile reset at `styles.css:431` (`0,0,2,0`), causing desktop underlines to break the mobile dropdown layout.
+  - *Fix:* Add `@media (max-width: 880px) { html[data-skin="bold"] .nav__links a[aria-current="page"] { background-image: none; } }`
+- **Missing Selector:** `styles.css:154` applies thick borders to `.pricing`. `index.html:121` uses `.home-pricing`. The homepage pricing block floats without borders.
+  - *Fix:* Add `.home-pricing` to the line 154 selector list.
+- **Internal/External Clash:** `styles.css:153` slaps a harsh 2px ink border around `.rate-card`, but the internal dividers rely on a soft translucent 1px gap (`--rule`). The contrast looks like a rendering glitch.
+  - *Fix:* Override the `.rate-card` gap background to `var(--ink)` for the bold skin to unify the grid lines.

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

@@ -0,0 +1,45 @@
+**index.html**
+- [WARN] Cross-page consistency: The inline theme `<script>` in the `<head>` is unminified, whereas it is a minified one-liner in the other 5 pages (line 12).
+- [WARN] Cross-page consistency: Footer `<p class="disclaimer">` text heavily drifts/diverges from the strings used on other pages (line 109).
+- [WARN] Inline styling: Uses a hardcoded `<div style="display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:var(--base);">` instead of a CSS utility class (line 94).
+
+**services.html**
+- [ERROR] Accessibility: Missing semantic headings. Item titles use `<div class="svc__name">` inside `<article>` tags instead of heading elements (line 46). Group titles use `<p class="svc-group__title">` instead of headings (line 44).
+- [WARN] Cross-page consistency: Footer disclaimer text drifts from other pages (line 78).
+
+**pricing.html**
+- [ERROR] Accessibility: Missing semantic headings. The rate cards use `<div class="tier__name">` instead of `<h3>` elements (line 37).
+- [WARN] Cross-page consistency: Footer disclaimer text drifts from other pages (line 107).
+
+**calculator.html**
+- [OK] Accessibility: Form controls are properly labeled, input modes are specified, and `aria-live` is correctly placed on the total output.
+- [WARN] Cross-page consistency: Footer disclaimer text drifts from other pages (line 90).
+
+**about.html**
+- [ERROR] Accessibility: Missing semantic headings. Similar to the services page, item names inside the `.svc-list` are structured as `<div class="svc__name">` instead of headings (line 51).
+- [WARN] Cross-page consistency: Footer disclaimer text drifts from other pages (line 81).
+
+**contact.html**
+- [WARN] Inline styling: The main page heading uses heavy inline styles `<h1 id="contact-h" style="...">` rather than pulling from the stylesheet (line 39).
+- [WARN] Cross-page consistency: Footer disclaimer text drifts from other pages (line 80).
+
+**styles.css**
+- [ERROR] House Rules: An em dash (`—`) is used in the header comment string block, violating the strict no em dash rule (line 2).
+- [ERROR] WCAG AA Contrast: The `active nav underline` uses `var(--accent)` (orange) on `--paper` (cream), which fails the 3:1 non-text contrast requirement in light mode (line 348).
+- [ERROR] WCAG AA Contrast: The `.bigquote::before` quotation mark uses `var(--accent)` on `--paper`, failing the 3:1 ratio for large text in light mode (line 364).
+- [ERROR] WCAG AA Contrast: The `.office-figure figcaption` uses `var(--ink-3)` on `var(--surface)`. While `--ink-3` passes on `--paper`, the darker `--surface` background causes this to fail the 4.5:1 ratio for small text in light mode (line 386).
+- [WARN] Responsive risk: The mobile nav `.nav__links` relies on `max-height: 60vh; overflow: hidden;`. On short landscape viewports, overflowed links will clip and become entirely inaccessible because it lacks `overflow-y: auto` (line 103).
+- [OK] House Rules: Verified no side-stripe accent borders (`border-left` / `border-right`) are used on components.
+
+**app.js**
+- [OK] Calculator handoff logic: Cleanly captures `.lname` and `.lcost` strings, utilizes `.textContent` to safely strip nested spans/HTML entities (like `&times;`), and successfully targets the contact textarea via `sessionStorage`.
+- [INFO] Handoff edge case: The `acg-estimate` payload is *only* saved when clicking the specific `#sendEstimate` button (line 125). If a user builds an estimate and manually clicks the "Contact" header link, their built estimate is lost.
+
+### Prioritized Fix List
+1. **WCAG Contrast Check:** In `styles.css`, darken `--accent` (or swap to `--accent-ink`) for active nav underlines and `.bigquote` marks in light mode. Change the `.office-figure figcaption` text color to `--ink-2` to pass 4.5:1 contrast on `--surface`.
+2. **Semantic Hierarchy:** Convert `<div class="svc__name">`, `<div class="tier__name">`, and `<p class="svc-group__title">` elements to appropriate heading tags (`<h3>`, `<h4>`) across `services.html`, `pricing.html`, and `about.html`.
+3. **Mobile Nav Overflow Risk:** Add `overflow-y: auto` to `.nav__links` within the `@media (max-width: 880px)` query in `styles.css` to prevent clipping.
+4. **Markup Unification:** Standardize the varying footer `.disclaimer` text into a single unified string across all 6 HTML pages to resolve cross-page drift. Do the same for the `<head>` theme inline `<script>`.
+5. **CSS Cleanup:** Relocate the inline styles from `index.html` (line 94) and `contact.html` (line 39) into utility or block classes in `styles.css`.
+6. **House Rules:** Delete the em dash on line 2 of `styles.css`.
+7. **Handoff Improvement (Optional):** Bind the `sessionStorage.setItem` call to the `recalc` function in `app.js` so the estimate auto-saves, preventing data loss if a user navigates to the contact page manually.

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

@@ -0,0 +1,48 @@
+[INFO] INDEPENDENT DESIGN & CODE REVIEW
+Verdict: The 'Blowout' concept effectively shatters boring MSP templates, but heavily overshoots "trust" into "retail clearance" territory. It requires strategic dialing back to balance radical boldness with B2B stability.
+
+---
+
+### 1. DIAL-BACK STRATEGY (Ranked)
+1. [ERROR] Overshoot: 13rem poster-typography (`radical.css:54`). Screams "event poster", refuting stability.
+   > Alternative: Cap clamp at ~5-6rem. Keep Anton, but size it for authority, not alarm.
+2. [ERROR] Overshoot: Drenched signal-orange background blocks (`radical.css:80`, `radical.css:143`). Triggers urgency/warning semantics.
+   > Alternative: Restrict orange exclusively to interactive elements/accents. Use `--ink` for section backgrounds.
+3. [WARN] Overshoot: 8.5rem blowout price numerals (`radical.css:128`). Reads as a discount warehouse.
+   > Alternative: Scale down to 3-4rem. Keep the transparent grid, but refine the typography.
+4. [WARN] Overshoot: Infinite scrolling marquee (`radical.html:36`). Associated with aggressive retail.
+   > Alternative: Replace with a static, horizontal trust bar (logos or key features) below the hero.
+5. [INFO] Overshoot: 16rem transparent ghost numerals (`radical.css:102`). Adds meaningless visual noise.
+   > Alternative: Remove entirely. Rely on the stark grid and whitespace.
+
+### 2. WHAT TO KEEP
+[OK] The `--ink` and `--bone` palette foundation: highly premium and tech-forward.
+[OK] The brutalist structural borders (`2px solid var(--bone)`): communicates transparency and zero-BS.
+[OK] Direct, no-fluff copywriting ("Everything, handled", "No games").
+[OK] JetBrains Mono for metadata: adds legitimate engineering credibility.
+
+### 3. WCAG AA CONTRAST
+[ERROR] Orange text on `--ink`: `#FF5A1F` on `#0C0A09` yields ~4.3:1. Fails AA for body text.
+   > Corrected hex: Use `--hot-2` (`#FF8A4D`) for all orange text on dark backgrounds. Confidence: High.
+[ERROR] Black on `#FF5A1F` (`rx-price--pop` unit text): `#0C0A09` on `#FF5A1F` at `opacity: 0.7` (`radical.css:131`). Fails functional contrast.
+   > Corrected hex: Remove opacity. Use solid `#0C0A09`. Confidence: High.
+[ERROR] Stroke headline (`radical.css:57`): Transparent fill with 2px stroke fails functional contrast for low-vision users. Shape is lost.
+   > Corrected hex: Replace `color: transparent;` with solid `color: #F4EDE1;` (`var(--bone)`). Confidence: High.
+[WARN] Bone-2 on `--ink`: `#B8AE9E` on `#0C0A09`. Technically passes (~7.3:1), but thin font (`radical.css:13`) makes it functionally weak.
+   > Corrected hex: Lighten to `#C9C1B5` or increase font-weight to 500. Confidence: Medium.
+
+### 4. ACCESSIBILITY
+[ERROR] Marquee data loss (`radical.html:35`): Claim: `aria-hidden="true"` is fine for decorative elements. Refutation: The values ("Since 2001", "No offshore") are not exposed to screen readers *anywhere else* in the DOM. Core value propositions are completely lost. Confidence: High.
+[WARN] Focus management (`radical.css:76`): Claim: Global `:focus-visible` outline is visible. Refutation: Uses `--hot`. For `.rx-btn--hot` placed on a `--hot` background (like the CTA section), the outline relies entirely on `outline-offset`, becoming invisible. Confidence: High.
+[OK] `prefers-reduced-motion` (`radical.css:21`): Correctly zeroes out animations.
+[OK] Decorative image (`radical.html:26`): `alt=""` and `aria-hidden="true"` correctly implemented.
+
+### 5. RESPONSIVE RISKS
+[ERROR] Layout break (`radical.css:122`): 3-column pricing grid persists down to 761px. At ~761px-950px, 8.5rem text will overflow column bounds.
+[WARN] Hover reflow (`radical.css:112`): `.rx-svc:hover` increases `padding-left: 1rem;` without initial padding compensation, causing text to abruptly jump right.
+[WARN] Viewport overflow (`radical.css:54`): `clamp(3.5rem, ...)` sets a 56px minimum. The word "picks" may exceed a 320px width viewport, triggering horizontal scroll.
+
+### 6. REAL CODE / MARKUP BUGS
+[ERROR] Negative margin clip (`radical.css:55`): `margin-left: -0.06em;` on `h1` risks clipping the first letter ("I") outside the scrollable area.
+[WARN] Inline styles (`radical.html:46`): `<div class="rx-svc-list" style="margin-top:2.5rem;">` violates structural separation.
+[INFO] Legacy prefixing (`radical.css:58`): `text-stroke` is non-standard. `-webkit-text-stroke` is sufficient for all modern engines.

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

@@ -0,0 +1,25 @@
+[VERDICT] Verdigris Gate is structurally safe, cleanly scoped, and transitions reliably. However, it requires a minor contrast fix and a critical font-weight correction to prevent text degradation.
+
+### 1. WCAG AA Contrast
+- [ERROR] Light Primary Button: `--on-accent` (#F0F7F5) on `--accent` (#2F7A6B) yields ~4.4:1 contrast. At 1.05rem (16.8px) 600-weight, this fails the 4.5:1 requirement for normal-sized text. 
+  *Fix: Lighten `--on-accent` to `#FFFFFF` (yields 4.9:1) or darken `--accent` to `#2B7364`.*
+- [OK] Light Mode Base: Body text (10.9:1), muted text (6.4:1), and accent-ink (#1F5F52, 5.6:1) on #E9EDEA all comfortably pass.
+- [OK] Dark Mode Base: Body text, muted text (7.6:1), accent-ink (#6BC4B0, 8.5:1), and primary button (#0D1614 on #4DA896, 6.5:1) on #141A18 all pass.
+
+### 2. Typography & Faux-Bold Risk
+- [ERROR] Missing Font Weights: Fraunces and IBM Plex Mono are loaded at 400;500 but are heavily applied at 600 and 700 across headings, buttons, and pricing tiers. This will force destructive, browser-synthesized faux-bolding.
+  *Fix: Append `600;700` to both Fraunces and IBM Plex Mono in the `<link>` Google Fonts payload.*
+
+### 3. app.js Logic & Skin Swapping
+- [OK] 3-Way Cycle: Modulo logic (`(cur + 1) % SKINS.length`) safely iterates `ledger -> midnight -> verdigris` and gracefully fails to index 0 (`ledger`) on null or corrupt local storage states.
+- [OK] Image Swapping: `swapSkinImages` uses `getAttribute("src")` to correctly capture the un-resolved relative string, strictly matching `VERDIGRIS_IMG` keys. Reversal logic using `data-orig-src` is sound.
+- [WARN] Double-Download (LCP impact): Because image `src` is hardcoded in HTML, direct loads into the Verdigris skin will fetch the `orig` image first, then immediately request the Verdigris variant. 
+
+### 4. Specificity & Token Leaks
+- [OK] Token Scoping: No token leakage. `html[data-skin="verdigris"]` (0,1,1) securely overrides `:root` (0,1,0) and detaches entirely when the attribute changes.
+- [OK] Signature Elements: Override rules like `html[data-skin="verdigris"] .site-header` (0,2,1) successfully trump base class styles `.site-header` (0,1,0) without relying on `!important`.
+
+### 5. Accessibility Regressions
+- [OK] Focus Navigation: Verdigris `--accent` maintains strong visibility as an outline color (4.47:1 against paper), preserving keyboard interaction cues.
+- [INFO] Stale Static Tooltip: The static HTML `title` and `aria-label` for `#skinToggle` only declare "Paper / Midnight". 
+  *Fix: Update the initial static HTML to "Paper / Midnight / Verdigris" so pre-JS screen readers announce it accurately.*

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

@@ -0,0 +1,79 @@
+**VERDICT:** [INFO] Dial-back largely lands as credible-bold for a B2B MSP selling trust. It reads as inked poster authority rather than loud gig-poster or bland corporate. Orange is disciplined (buttons + .amp + .tier__flag + section accents). Hard 2px borders, 0-radius, and Anton numerals give weight without noise. However, forced uppercase + Anton on functional labels (.svc__name, .faq__q, .brand__name, .tier__name) plus global img filter push it toward "designed artifact" and away from quiet competence. Not overcorrected to bland; still slightly loud on the typography axis for pure trust sale.
+
+Assessed only html[data-skin="bold"] and descendants across the four files. Base styles apply unless overridden. JS is skin-agnostic except for the cycle and verdigris image swap.
+
+**(1) Did the dial-back land?**
+
+- Intent visible and mostly successful: near-black #0C0A09 / bone #F4EDE1 canvas, orange restricted per spec, thick ink borders on .site-header / .trust / .pricing / .faq / .home-services / .cta-band / .rate-card / .calc__shell, sharp corners, Anton numerals on .tier__price (clamp 4.25rem) and .trust__num (2.6rem), grayscale(1) contrast(1.08) photos.
+- Specifics that still feel loud: uppercase Anton at 1.35rem on .brand__name (header, both pages), 1.5rem .svc__name (index.html:105-110), 1.7rem .tier__name (pricing.html:56+), 1.25rem .faq__q (if present). These are UI labels, not headlines.
+- The "one headline word" (.amp) + single "Most chosen" flag work cleanly.
+- Photos + bone/near-black + 2px rules create a consistent documentary-ink story that fits "concierge since 2001" better than full radical poster would.
+- Overcorrection risk: none apparent; it is still visually assertive. On pricing.html the stacked rate-cards + orange flag read strong but professional.
+
+**(2) WCAG AA contrast (using the exact values supplied)**
+
+Light (#F4EDE1 bg):
+- #16120F ink on bone: ~14+:1 PASS (normal + large).
+- #C23A0A accent-ink on bone: ~5.6:1 PASS (CSS comment at styles.css:154 roughly accurate for text).
+- #E24A12 button fill + #FBF7F0 text: ~4.1:1 FAIL (below 4.5:1 for normal text). Affects .btn--primary, .tier__flag, .brand__mark (accent bg), current nav treatment in some states, .section-tag::before accent bar.
+- Secondary: --ink-3 #6B6359 on paper and some surfaces hovers ~4.0-4.3:1 — marginal for 0.72-0.78rem text (.hero__note, .section-tag span, .tier__price .per, footer, form labels).
+
+Dark (#0C0A09 bg):
+- #F4EDE1 on #0C0A09: excellent PASS.
+- #FF8A4D accent-ink on dark: high PASS.
+- #FF5A1F button + #0C0A09 text: ~7+:1 PASS.
+- --ink-3 #9A9082 on dark: ~5.5:1 PASS for small text.
+
+Flags: light-mode primary button/flag text contrast fails; several muted elements in light are borderline. No dark fails under the stated palette. (Refutes the blanket "AA" implication in bold comments.)
+
+**(3) Anton at body/UI sizes + forced uppercase on .faq__q / .svc__name / .brand__name**
+
+- Readability problems present. Anton is a high-contrast, condensed, geometric display face. At 1.25rem-1.7rem all-caps with only 0.005em letter-spacing it loses ascender/descender cues, reduces word-shape recognition, and can appear dense or "shouting."
+- Affected elements: .brand__name (1.35rem, header on index.html:32 and pricing.html:21), .svc__name (1.5rem, index.html:105-110 and services teasers), .tier__name (1.7rem), .faq__q (1.25rem), plus h1/h2.
+- Long phrases suffer most: "Microsoft 365 & Email", "Business Phones", full questions in FAQ, "Arizona Computer Guru". On mobile (<680px, <820px queries) wrapping + caps increases visual noise.
+- .tier__price and .trust__num at larger sizes (2.6-4.25rem) are acceptable poster numerals.
+- Hero h1 cap 5.5rem is within the "capped ~5.5rem" spec but remains loud in caps.
+- No evidence of tracking/kerning fixes for Anton.
+
+**(4) Grayscale img filter**
+
+- html[data-skin="bold"] img { filter: grayscale(1) contrast(1.08); } (styles.css:204) hits every <img> when skin is bold.
+- In the supplied pages it only affects the intended documentary photos (hero, about, story, etc. in index.html:68,94 and pricing.html equivalents via page-head/figures).
+- No non-photo images exist in these files, so no current collateral damage.
+- However, universal selector is over-broad: any future inline icon, logo asset, diagram, or UI screenshot rendered as <img> will be desaturated. No exceptions (e.g., [data-no-filter] or .photo). The JS image swap path for verdigris is separate and does not guard bold.
+- Photos themselves lose any warm tonal cues that might support "Tucson / golden hour" story; contrast bump helps legibility but is global.
+
+**(5) Leak / breakage by other skins (scoping)**
+
+- Core palette, fonts, borders, radius:0, img filter, and uppercase rules are correctly prefixed html[data-skin="bold"] and do not leak outward.
+- However, active nav treatment is broken under bold due to cascade order: bold rule at styles.css:205-206 only sets background-image (no size/position/color), while the later general multipage rule at styles.css:595-599 sets color + full background properties using --accent-ink. Last rule wins; bold skin gets the ledger-style accent-ink underline instead of its intended accent treatment.
+- .nav__link[aria-current="page"] on index.html (Home) and pricing.html (Pricing) will not reflect bold's accent choice when skin=bold.
+- No other cross-skin breakage observed. Verdigris/midnight/ledger rules are similarly prefixed and do not pollute bold. JS skin cycle (app.js:53,71-90) correctly includes "bold" and only does verdigris-specific src swaps.
+- .site-header bold border (2px) and background overrides are scoped and not overridden by later rules in conflicting ways.
+
+**(6) Responsive + real bugs**
+
+- Responsive: most shared media queries (820px, 880px, 720px, 680px, 560px, 440px) apply. rate-card stacks, svc grid adjusts, nav collapses, hero switches to single column. Large bold h1 (clamp) and 2.6rem Anton .trust__num in 2-col trust grid (<720px) become cramped but do not overflow.
+- Issues:
+  - Universal img filter + no photo-only class.
+  - Incomplete bold active-nav override (see 5).
+  - .btn, .brand__mark, and form controls inherit --f-display (Anton) at ~1.05rem; condensed caps on small interactive targets reduce legibility.
+  - .tier--pop inset accent shadow + flag remain visible and orange-restricted as intended.
+  - No layout breakage on the two pages; calc/faq/contact not in these files but would inherit same skin rules.
+  - Page-head.ledger class on pricing.html is harmless (bold disables the repeating-linear ledger bg).
+  - Inline script + localStorage skin persistence works for bold.
+  - No JS console-level skin bugs visible.
+
+**Ranked, severity-tagged observations (terse, no edit suggestions):**
+
+[HIGH] Light bold primary button/flag contrast fail (#E24A12 fill + #FBF7F0): ~4.1:1 < 4.5 (styles.css:153,278; affects .btn--primary, .tier__flag, .brand__mark).  
+[HIGH] Active nav styling does not receive bold accent treatment due to later general rule override (styles.css:205 vs 595; index.html:38, pricing.html:27).  
+[HIGH] Universal `img` grayscale filter (styles.css:204) has no exceptions.  
+[MED] Forced uppercase + Anton at 1.25-1.7rem on .svc__name, .faq__q, .brand__name, .tier__name harms readability/scannability (styles.css:177-181,299,408,427,545; index.html:32,105-110; pricing.html:21,56+).  
+[MED] Several light-mode small text elements near or below 4.5:1 (--ink-3 #6B6359 etc. on bone/paper).  
+[MED] Anton at button/control sizes (1.05rem) and tight mobile hero/trust numerals.  
+[LOW] Hero h1 at max 5.5rem + caps is assertive on wide viewports (styles.css:182).  
+[LOW] No bold-specific handling or exceptions in app.js beyond the shared SKINS array.  
+[LOW] .ul underline and section-tag accent bars correctly use restricted orange.
+
+Confidence in palette extraction, selector scoping, and markup coverage: high. Exact contrast ratios are approximate without runtime computation; real-browser or tooling verification would be required for borderline cases. All analysis derived strictly from the four read files.

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

@@ -0,0 +1,161 @@
+Reading all eight files for an independent review across the listed defect categories.
+Searching for em dashes, side-stripe patterns, and verifying assets exist.
+## Verdict
+
+**[OK] Ship-ready demo with one real handoff gap and a few UX/mobile nits.** Nav/`aria-current` are correct per page, calculator math matches published rates, assets resolve, and the normal left-click estimate flow works. I found no broken internal links and no user-facing em dashes or side-stripe accent borders.
+
+**Confidence: high** on nav/math/links; **medium** on narrow-mobile layout (CSS-only inference, not browser-tested).
+
+---
+
+## 1. Cross-page header / footer / nav
+
+**[OK] Header structure is consistent** across all six pages: same brand, six nav links, phone, theme toggle, mobile menu (`navLinks`, `navToggle`, `themeToggle`).
+
+**[OK] `aria-current="page"` is correct** on every page:
+
+| Page | Active link |
+|------|-------------|
+| `index.html:38` | Home |
+| `services.html:26` | Services |
+| `pricing.html:27` | Pricing |
+| `calculator.html:28` | Estimate |
+| `about.html:29` | About |
+| `contact.html:33` | Contact |
+
+**[WARN] Footer disclaimer copy drifts** (not broken, but inconsistent):
+
+- `index.html:152` — longest (estimator + tailored quote)
+- `about.html:112` — no pricing disclaimer at all
+- `contact.html:106` — form-not-wired note only
+
+**[INFO] Cosmetic head-script formatting** differs (`index.html` expanded vs minified on other pages). No functional impact.
+
+---
+
+## 2. Calculator → contact estimate handoff
+
+**[OK] Normal left-click path works.** Flow:
+
+```140:153:D:\ClaudeTools\projects\acg-website-showcase\multipage\js\app.js
+    var sendBtn = $("#sendEstimate");
+    if (sendBtn) {
+      sendBtn.addEventListener("click", function () {
+        // ... builds summary from #ledgerLines ...
+        try { sessionStorage.setItem("acg-estimate", summary); } catch (e) {}
+      });
+    }
+```
+
+```192:201:D:\ClaudeTools\projects\acg-website-showcase\multipage\js\app.js
+    var msg = $("#cf-msg");
+    if (msg) {
+      try {
+        var est = sessionStorage.getItem("acg-estimate");
+        if (est) {
+          msg.value = est;
+          sessionStorage.removeItem("acg-estimate");
+```
+
+- `#sendEstimate` is an `<a href="contact.html#contact">` (`calculator.html:124`)
+- Click handler is synchronous before navigation — `sessionStorage` is set in time
+- `app.js` is at end of `<body>` on `contact.html:109`, so `#cf-msg` exists before prefill runs
+- Anchor target `#contact` exists (`contact.html:43`)
+
+**[OK] JS-before/after hash jump is not a data bug.** Script runs after DOM parse; hash scroll does not block prefill.
+
+**[ERROR] Middle-click / “Open in new tab” drops the estimate.** `#sendEstimate` is a plain link; middle-click and some modifier opens navigate without firing the `click` listener, so `acg-estimate` is never written. Left-click only.
+
+**[WARN] Hash lands on section top, not the form.** `contact.html#contact` scrolls to the section (`id="contact"`), not `#cf-msg` / `#contactForm`. On desktop two-column layout, the prefilled textarea can be off-screen right; user may not see the handoff without scrolling.
+
+**[WARN] No focus management after prefill** — textarea is filled but never focused/scrolled into view.
+
+**[INFO] One-shot storage** — reload clears the estimate (`removeItem` on read). Intentional, but worth knowing.
+
+---
+
+## 3. Calculator math and stepper clamp
+
+**[OK] Math matches pricing page rates:**
+
+| Input | Rate | Source |
+|-------|------|--------|
+| GPS tiers | $19 / $26 / $39 | `app.js:99`, `pricing.html:56-82` |
+| Equipment | $25 flat | `app.js:78`, `pricing.html:94` |
+| Support | $200–$850 | `app.js:94`, `pricing.html:108-111` |
+| M365 | $14/user | `app.js:78`, `pricing.html:154` |
+| VoIP | $28/user | `app.js:78`, `pricing.html:166` |
+| Hosting | $15 / $35 / $65 | `app.js:97`, `pricing.html:141-143` |
+
+Default (22 endpoints, Pro, Standard support): **$952/mo** — arithmetic checks out.
+
+**[OK] Stepper clamp** — `clampInt` 0–500 (`app.js:80`), HTML `min="0" max="500"`, buttons use clamp + `recalc()`.
+
+**[WARN] Typing invalid numbers** — `recalc()` uses clamped value on `input`, but the visible field can still show garbage until `change` blur clamp (`app.js:136`). Totals can disagree with displayed digits briefly.
+
+---
+
+## 4. Links, assets, duplicate IDs
+
+**[OK] All internal page links resolve** — `index`, `services`, `pricing`, `calculator`, `about`, `contact`, `tel:`, `mailto:`.
+
+**[OK] Referenced images exist** under `assets/images/`: `hero.png`, `about.png`, `services.png`, `story.png`, `contact.png`.
+
+**[WARN] Duplicate `id="cta-h"`** on four pages (`index.html:137`, `services.html:88`, `pricing.html:179`, `about.html:97`). Harmless in multipage navigation; invalid if pages were ever combined.
+
+**[WARN] Shared IDs across pages** (`year`, `navLinks`, `themeToggle`, etc.) — same note; one page at a time so no runtime collision.
+
+---
+
+## 5. Light + dark contrast (new components)
+
+**[OK] Token design is deliberate** — `--ink-3` annotated AA-safe on light paper (`styles.css:14`); dark tokens mirrored (`styles.css:32-44`).
+
+**[OK] New multipage components** (active nav underline, page-head eyebrow, contact labels, CTA band, office figure) use `--ink`, `--ink-2`, `--ink-3`, `--accent-ink` — consistent with the system.
+
+**[WARN] `.calc__foot` at 0.78rem / `--ink-3`** (`styles.css:374`) — likely fine in light mode; dark-mode small muted text is the usual borderline case. Worth a quick contrast pass in browser, not a confirmed fail.
+
+**[OK] Primary buttons** — `--on-accent` on `--accent` is an intentional pairing (`styles.css:18-19, 118`).
+
+---
+
+## 6. Em dashes and side-stripe accents
+
+**[OK] No em dashes in user-facing HTML** across any of the six pages.
+
+**[WARN] Em dashes only in CSS comments** (`styles.css:2, 17`) — violates house style in source, not visible to visitors.
+
+**[OK] No forbidden side-stripe accent borders.** Only structural rules: `.calc__inputs { border-right: 1px solid var(--rule) }` (`styles.css:310`), `.tier--pop` top inset accent (`styles.css:263`). Matches DESIGN intent (no colored left/right accent stripes).
+
+---
+
+## 7. Mobile
+
+**[OK] Major breakpoints covered** — nav drawer @880px, hero/story/calc/contact/CTA stack @760–820px, trust 2-col @720px, tables scroll via `.table-wrap`.
+
+**[WARN] Calculator rows stay two-column on all widths** — `.calc__row { grid-template-columns: 1fr auto }` (`styles.css:311-312`) with no narrow override. Stepper is ~152px fixed; on ~320px viewports labels + controls may crush or overflow.
+
+**[WARN] `.svc__meta { white-space: nowrap }`** (`styles.css:251`) — on very narrow screens, right-aligned meta could overflow when not yet in stacked mobile layout.
+
+**[OK] Mobile nav** — `aria-expanded` toggles, Escape closes, link click closes drawer (`app.js:57-69`).
+
+**[ERROR] Progressive enhancement gap** — `.reveal { opacity: 0 }` (`styles.css:427`) until `app.js` adds `.in`. If JS fails, large sections stay invisible sitewide.
+
+---
+
+## Ranked top fixes
+
+| Rank | Severity | Issue | Where |
+|------|----------|-------|-------|
+| **1** | **[ERROR]** | Estimate handoff fails on middle-click / open-in-new-tab because storage write is click-only on an `<a>` | `calculator.html:124`, `app.js:140-153` |
+| **2** | **[ERROR]** | Content hidden without JS (`.reveal` starts at `opacity: 0`) | `styles.css:427-428`, all pages |
+| **3** | **[WARN]** | After handoff, user may not see prefilled message (hash → section, not form; no focus/scroll) | `calculator.html:124`, `contact.html:43-76`, `app.js:192-201` |
+| **4** | **[WARN]** | Calculator input rows don’t stack on very narrow phones | `styles.css:311-312, 375-378` |
+| **5** | **[WARN]** | Invalid stepper text vs calculated total until blur | `app.js:136-137, 156-157` |
+| **6** | **[INFO]** | Footer disclaimer text inconsistent | all footers |
+| **7** | **[INFO]** | Duplicate `id="cta-h"` across four pages | see §4 |
+| **8** | **[INFO]** | Em dashes in CSS comments only | `styles.css:2, 17` |
+
+---
+
+**Bottom line:** The multipage shell is coherent and the primary estimate workflow is sound. Fix **#1** (handoff reliability) and **#2** (no-JS visibility) first; the rest are polish. I did not modify any files per your instruction.

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

@@ -0,0 +1,58 @@
+**VERDICT**  
+[INFO] Radical "Blowout" poster concept (Anton 13rem, #FF5A1F drench, marquee, stroke outline, giant pricing) succeeds at raw visual arrest and hierarchy but oversteps for a Tucson MSP selling long-term trust and concierge reliability. It reads like a one-day sale flyer more than a stable partner. radical.html + radical.css reviewed in full. No modifications performed.
+
+**(1) DIAL-BACK list (ranked 1 = most damaging for trust sale)**
+
+1. [HIGH] Hero headline scale + Anton ultra-condensed at clamp(3.5rem, 16vw, 13rem) (radical.html:36, radical.css:70). 13rem on desktop and still 7-9rem on tablets feels like carnival signage, not enterprise IT. Tamer: cap at clamp(2.75rem, 7vw, 5.75rem); keep Anton for one word only or add 0.03-0.04em tracking and switch subheads to Hanken Grotesk 700.
+
+2. [HIGH] Full-bleed #FF5A1F CTA section + multiple hot buttons and pop pricing tier (radical.html:112, radical.css:175, 148, 96). Orange overload + "Talk to a human" at 10rem screams urgency/deal, erodes calm authority. Tamer: limit full-bleed hot to one primary CTA band only; use bone/ink inverted or bone-bordered buttons elsewhere; reserve solid hot for the single highest-value action.
+
+3. [MED] 26s continuous marquee on full #FF5A1F bar (radical.html:46-50, radical.css:104, 107). Perpetual motion + saturated strip reads gimmicky for a 2001-established MSP. Tamer: 48-60s duration or convert to static centered pills row; keep hot only for text if bar must remain.
+
+4. [MED] Transparent-fill -webkit-text-stroke headline on "up." (radical.html:36, radical.css:73-75). 2px bone outline with no interior fill creates thin, haloed, low-density letters that feel unfinished and hard to parse at speed. Tamer: solid bone or hot fill + 1px hot or bone underline/shadow; drop stroke entirely for body copy sizes.
+
+5. [MED] Volume and placement of hot / hot-2 accents (kickers, eyebrow, svc__n, svc__meta, price pop, cta) (radical.css:42, 67, 117, 136, 148, 175). Too many saturated hits dilute focus and hierarchy. Tamer: restrict #FF5A1F to 1-2 CTAs + one price highlight; use bone-2 or ink-2 for meta; replace most hot-2 with bone or a darker orange variant.
+
+6. [LOW] Giant ghost section numerals (16rem clamp) + 8.5rem pricing numerals (radical.css:121, 151). Poster numerals compete with actual content and make pricing feel theatrical. Tamer: ghost max 5-6rem; pricing bigs to clamp(2.5rem, 5vw, 4rem) or switch to weighted Hanken Grotesk for numerals while keeping Anton for true headlines.
+
+**(2) KEEP (moves that are genuinely strong)**
+
+- Direct "no email wall" calculator teaser and published per-endpoint grid with clear tiering and "most chosen" callout (radical.html:100-107, 76-95). Honest pricing posture is the single biggest trust signal here.
+- Service row hover + IntersectionObserver reveal (radical.html:134-140, radical.css:194-195, 131). Subtle progressive disclosure without heavy JS.
+- Mono + poster font pairing for scannability and brand lockup in header (radical.css:18-20, 51-56).
+- Sticky header, phone CTA, and immediate human contact paths without friction.
+- Self-contained file, proper lang/meta, skip link, and existing reduced-motion rule (radical.html:15, 8-12, radical.css:26-30).
+
+**(3) WCAG AA contrast failures**
+
+- Black #0C0A09 on #FF5A1F (rx-btn--hot, marquee text, rx-cta hot buttons, price pop): estimated 8-10:1+. Passes AA/AAA for large text and UI components. [OK]
+- #FF5A1F on #0C0A09 (`.hot`, rx-kicker, rx-hero__eyebrow, rx-svc__n): ~3.6-4.0:1. FAILS AA for normal text (needs 4.5:1). Passes only if treated strictly as large text. Corrected hex for reliable AA: #FF7A4D or #FF8F60 (brighter) or switch accent text to #F4EDE1 bone on dark.
+- #FF8A4D on #0C0A09 (svc__meta, some price units): ~2.8-3.2:1. FAILS AA. Corrected: #FFB57A or replace with #F4EDE1 / #CFC6B4.
+- #B8AE9E (bone-2) on #0C0A09 (rx-hero__sub, rx-svc__d, rx-price__list, footer, calc p): ~4.1-4.4:1. FAILS AA 4.5:1 for body text under ~18pt/14pt bold. Corrected: #CFC6B4 or #D8D0C0 (lighten ~10-12%).
+- -webkit-text-stroke headline (transparent fill + 2px bone): effective contrast fails. Thin outline only allows background bleed between strokes; no solid interior. Not reliably readable per WCAG for text. Fails even large-text criteria in practice. Corrected approach: solid #F4EDE1 fill + optional 1px #FF5A1F stroke or 2-3px text-shadow; never rely on stroke-only for critical headlines.
+
+**(4) Accessibility**
+
+- Marquee: aria-hidden="true" present (radical.html:46). Reduced-motion rule already kills the animation (radical.css:29). [OK] Gaps: hover-only pause (css:108) is useless on touch; content is duplicated for seamlessness but animation still runs for keyboard/screen-reader users who do not use hover. Recommend static fallback or `prefers-reduced-motion` + `aria-hidden` already good; add `role="presentation"` or convert to non-animated row for production.
+- focus-visible: global rule exists (radical.css:101) with 3px hot outline. [OK] Risk: hot outline on #FF5A1F backgrounds has insufficient contrast. No legacy :focus fallback. Test on hot CTAs; consider conditional darker/bone outline for hot elements.
+- Decorative hero image: container aria-hidden="true", img alt="", masked/grayscale + overlay (radical.html:33, radical.css:79-88). [OK] Correct for pure decoration. Mid-width (760-900px) absolute positioning could cause visual layering surprises if image ever gains meaning.
+
+**(5) Responsive risks (ranked)**
+
+- [CRITICAL] Nav collapse at 760px hides all links except phone CTA with no mobile menu or fallback (radical.css:61, radical.html:20-26). On phones/tablets users lose Work/Pricing/Estimate/Contact access.
+- [HIGH] 16vw hero type + 13vw CTA type still produce 6-9rem sizes on 700-900px widths; risk of clipping, tall first fold, and poor line wrapping (radical.css:70, 177).
+- [MED] Marquee text 1.4rem only shrinks at 480px; separators and long phrases can overflow or crowd on 320-360px (radical.css:204, 110).
+- [MED] Pricing 3-col grid + service grid changes at 760/640px are clean but the orange pop tier loses visual weight when stacked.
+- [LOW] Absolute hero art (42vw) + mask can cause text overlap or empty right gutter on 900-1100px before hiding (radical.css:90, 80-84). Body overflow-x:hidden can mask real scroll bugs.
+
+**(6) Real code bugs (severity-tagged, ranked)**
+
+- [ERROR] Stroke-only "up." headline uses non-standard `text-stroke` (radical.css:74). Only `-webkit-text-stroke` is reliable; other engines leave color:transparent text invisible or barely stroked.
+- [ERROR] Marquee relies on exact duplicate span blocks for infinite loop (radical.html:48-49). Any content edit, font timing, or resize breaks the seam.
+- [HIGH] `.marquee:hover .marquee__track` pause (radical.css:108) has no keyboard, focus, or touch equivalent. Animation cannot be stopped on mobile or by non-mouse users.
+- [MED] Service hover applies `padding-left:1rem` (radical.css:131). Causes layout shift on every hover; better to use transform or background change only.
+- [MED] Global `* { margin:0 }` + late :focus-visible (radical.css:24, 101) + reduced-motion rules are broad; some transitions on .rx-up and .rx-svc may still leak on older reduced-motion implementations.
+- [LOW] rx-ghost and stroke elements use pointer-events:none + user-select:none but remain in tab order or selection edge cases in some engines (radical.css:123, 74).
+- [LOW] Year script and IO observer are safe (radical.html:132-140). No console errors obvious from static source. Assets path and missing calculator.html are out-of-scope for this file pair.
+
+[OK] End of review. All analysis derived strictly from the two read files.

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

@@ -0,0 +1,94 @@
+Reading all four files for an independent review of the Verdigris Gate skin and skin system.
+Computing WCAG contrast ratios for Verdigris token pairs.
+Checking image paths across pages and additional contrast edge cases (small text, hover states).
+**Verdict:** Verdigris Gate is cleanly scoped and does not break ledger/midnight. Primary button and accent-text pass AA in both modes at rest. Real issues: small muted text on `surface-2` (including the gate-rail header), light-mode button hover, missing font weights 600/700, and stale skin-switcher copy. Confidence: **high** on tokens/contrast/JS; **medium** on live rendering (no browser pass).
+
+---
+
+### Ranked fix list
+
+**1. [ERROR] `--ink-3` fails AA normal text on `surface-2` (both modes)**  
+`styles.css:91,107` — Header uses `surface-2` (`styles.css:118-119`); `.brand__since` is `ink-3` at 0.66rem (`styles.css:233-234`). Also hits 0.72–0.78rem hints/captions on `surface-2`.
+
+| Mode | Pair | Ratio | Need |
+|------|------|-------|------|
+| Light | `#5C6B65` / `#DFE5E1` | 4.39:1 | 4.5:1 |
+| Dark | `#7A8A84` / `#25302C` | 3.77:1 | 4.5:1 |
+
+**Corrected hex:** light `--ink-3: #4A5853` (5.84:1 on `#DFE5E1`, 6.32:1 on paper); dark `--ink-3: #8FA098` (4.97:1 on `#25302C`, 5.78:1 on surface).
+
+---
+
+**2. [ERROR] Font loading vs CSS weights — faux-bold on Verdigris**  
+`index.html:11` loads `Fraunces:wght@400;500` and `IBM Plex Mono:wght@400;500`, but CSS uses **600–700**:
+
+- Fraunces: `h1–h4`, `.btn`, `.brand__mark` at 600–700 (`styles.css:188-191,203,227,270`)
+- IBM Plex Mono: `.tier__price`, `.calc__total .tnum`, `.trust__num` at 600–700 (`styles.css:304,360,459`)
+
+Source Sans 3 loads 400;600 but `.nav__phone` uses `font-weight: 500` (`styles.css:240`) → synthesized medium.
+
+**Fix:** load `Fraunces:wght@400;500;600;700`, `IBM Plex Mono:wght@400;500;600;700`, add `500` to Source Sans 3 (or change phone to 600).
+
+---
+
+**3. [WARN] Light primary button hover drops below AA**  
+`styles.css:211` — `filter: brightness(1.05)` on `#2F7A6B` → `#F0F7F5` contrast **4.34:1** (need 4.5:1). Dark hover stays fine (7.05:1).
+
+**At-rest button passes:** light `#F0F7F5` / `#2F7A6B` = 4.69:1; dark `#0D1614` / `#4DA896` = 6.44:1.
+
+**Fix options:** drop hover brighten; darken hover fill to `#2A6F61` (5.45:1); or light `--on-accent: #FFFFFF` (5.10:1 rest, 4.60:1 hover).
+
+---
+
+**4. [WARN] `swapSkinImages` — path fragility + duplicate art**  
+`app.js:63-69`
+
+- Lookup is exact string on `data-orig-src`; resolved URLs, relative variants, or `?cache` params miss the map and stay on ledger art.
+- `story.png` → `verdigris/hero.png` (`app.js:61`) duplicates hero latch on about (`about.html:66`) — likely unintentional; no dedicated `story` asset.
+- `$$("img")` is broad but safe: non-mapped images restore via `orig`; `data-orig-src` caching is correct for the 3-skin cycle.
+- Invalid/missing `data-skin` → `indexOf` = -1 → cycles to `ledger` (`app.js:86-87`) — OK but silent.
+
+---
+
+**5. [WARN] Skin switcher HTML still 2-skin**  
+`index.html:46`, `calculator.html:33` — `title="Switch skin: Paper / Midnight"` while JS cycles three skins (`app.js:53-54`). `aria-label` updates at runtime; static `title` does not.
+
+---
+
+**6. [INFO] Double-rule inset frames — mostly fine; rate-card frame weak**  
+`styles.css:124-127` — `inset 4px paper + 5px rule` on `.calc__shell`, `.rate-card`, `.contact__form`.
+
+- `.calc__shell` / `.rate-card` have `overflow: hidden` (`styles.css:352,399`) — no scroll bleed.
+- `.contact__form` has no overflow rule; inset shadows are paint-only — low risk.
+- On `.rate-card`, child tiers fill the grid and likely **cover** most of the inset ring — frame may barely show. Calculator/contact are the visible wins.
+
+---
+
+**7. [INFO] Gate-rail header grain — no overflow concern**  
+`styles.css:118-122` — Opaque `surface-2` + 3px repeating gradient; `backdrop-filter: none` correctly drops ledger glass. Subtle moiré possible on low-DPI; not a layout issue.
+
+---
+
+**8. [OK] Accent-as-text and muted body copy**  
+Light: `--accent-ink #1F5F52` 6.31:1 on paper; `--ink-2 #3F4F49` 7.32:1 on paper.  
+Dark: `--accent-ink #6BC4B0` 8.52:1 on paper; `--ink-2 #A8B5AF` 8.31:1 on paper.  
+`::selection` accent/on-accent: 4.69:1 light, 6.44:1 dark.
+
+---
+
+**9. [OK] Ledger / Midnight isolation**  
+Verdigris tokens and treatments are scoped to `html[data-skin="verdigris"]` (`styles.css:81-138`). `ledger` falls through to `:root`; `midnight` overrides stay separate (`styles.css:49-78`). Extra font families in the shared Google Fonts URL add weight for all skins but do not alter their palettes or typography tokens. Image swap only runs for `verdigris`; ledger/midnight always get `orig` src.
+
+---
+
+### Summary table (requested checks)
+
+| Check | Result |
+|-------|--------|
+| Primary button AA | Pass at rest; light hover fail |
+| Accent-as-text | Pass both modes |
+| Muted text | `--ink-2` pass; `--ink-3` fail on `surface-2` |
+| Font weights | Fail — load 600/700 (and 500 for Source Sans) |
+| Image swap | Logic sound; path/exact-match + story duplicate |
+| Double-rule / grain | No overflow; rate-card frame may be invisible |
+| Other skins | Not broken |

projects/acg-website/design/vision-gemini-verdigris.md

@@ -0,0 +1,40 @@
+  {"rect": [861, 145, 874, 481], "text": "Migrations, licensing, and email that is configured, secured, and\nsupported."},
+  {"rect": [850, 808, 854, 895], "text": "from $2 /mailbox"},
+  {"rect": [894, 104, 899, 114], "text": "05"},
+  {"rect": [895, 145, 904, 283], "text": "Business Phones"},
+  {"rect": [909, 145, 922, 481], "text": "Cloud phone systems with mobile and desktop apps, porting, and no\nusage surprises."},
+  {"rect": [898, 819, 903, 895], "text": "from $22 /user"},
+  {"rect": [943, 104, 947, 114], "text": "06"},
+  {"rect": [943, 145, 952, 311], "text": "Web & Email Hosting"},
+  {"rect": [957, 145, 971, 481], "text": "Managed hosting with free SSL, daily backups, and real humans on\nsupport."},
+  {"rect": [946, 830, 951, 895], "text": "from $15 /mo"},
+  {"rect": [989, 104, 995, 199], "text": "See all services →"}, "text": "See all services →"},
+  {"rect": [1050, 131, 1054, 434], "text": "PUBLISHED, NOT \"CALL FOR QUOTE\" / PER ENDPOINT"},
+  {"rect": [1067, 104, 1088, 581], "text": "Pricing with nothing hidden"},
+  {"rect": [1098, 104, 1118, 481], "text": "You pay for exactly the computers you have. No rounding you up into a\nbigger package tier."},
+  {"rect": [1147, 120, 1157, 214], "text": "GPS-Basic"},
+  {"rect": [1160, 120, 1180, 175], "text": "$19"},
+  {"rect": [1170, 191, 1175, 280], "text": "/ endpoint / mo"},
+  {"rect": [1189, 120, 1195, 340], "text": "Essential monitoring for small, simple environments."},
+  {"rect": [1135, 564, 1140, 626], "text": "MOST CHOSEN"},
+  {"rect": [1147, 384, 1157, 463], "text": "GPS-Pro"},
+  {"rect": [1160, 384, 1180, 439], "text": "$26"},
+  {"rect": [1170, 455, 1175, 544], "text": "/ endpoint / mo"},
+  {"rect": [1189, 384, 1195, 602], "text": "Comprehensive protection for growing businesses."},
+  {"rect": [1147, 648, 1157, 781], "text": "GPS-Advanced"},
+  {"rect": [1160, 648, 1180, 703], "text": "$39"},
+  {"rect": [1170, 719, 1175, 808], "text": "/ endpoint / mo"},
+  {"rect": [1189, 648, 1195, 829], "text": "Enterprise-grade security and compliance."},
+  {"rect": [1235, 104, 1240, 246], "text": "Full pricing breakdown →"},
+  {"rect": [1235, 261, 1240, 370], "text": "Build an estimate →"},
+  {"rect": [1309, 104, 1330, 426], "text": "Let's talk, no pitch."},
+  {"rect": [1340, 104, 1360, 481], "text": "Tell us what is frustrating you, and we'll give you honest\nfeedback. Even if that is \"your current setup is fine, here is one\nthing to fix.\""},
+  {"rect": [1365, 652, 1370, 757], "text": "Talk to a human →"},
+  {"rect": [1365, 801, 1370, 880], "text": "520.304.8300"},
+  {"rect": [1412, 104, 1417, 497], "text": "© 2026 Arizona Computer Guru . Protecting Tucson businesses since 2001"},
+  {"rect": [1412, 683, 1417, 750], "text": "520.304.8300"},
+  {"rect": [1412, 757, 1417, 762], "text": "."},
+  {"rect": [1412, 768, 1417, 895], "text": "info@azcomputerguru.com"},
+  {"rect": [1433, 104, 1445, 895], "text": "Local demonstration build of a proposed azcomputerguru.com (multipage). Pricing reflects published GPS rates and is illustrative for the estimator; a real quote\nis tailored to your environment. The contact form is not wired to a mailbox. Photography is representational."}
+]
+```

projects/acg-website/index.html

@@ -0,0 +1,258 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Arizona Computer Guru | Concierge IT for Tucson, since 2001</title>
+  <meta name="description" content="Tucson's concierge managed IT and cybersecurity partner since 2001. Transparent per-endpoint pricing, local people, month-to-month terms. Build an estimate in seconds." />
+  <meta name="color-scheme" content="light dark" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Lexend:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600;700&family=Fraunces:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600;700&family=Anton&family=Hanken+Grotesk:wght@400;500;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="css/styles.css" />
+  <link rel="icon" href="assets/logo/acg-mark.svg" type="image/svg+xml" />
+  <script>
+    (function () { try {
+      var s = localStorage.getItem("acg-theme");
+      var m = s || (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+      document.documentElement.setAttribute("data-theme",m);document.documentElement.setAttribute("data-skin",(localStorage.getItem("acg-skin")||"bold"));document.documentElement.classList.add("js");
+    } catch (e) {} })();
+  </script>
+  <script type="application/ld+json">
+  {"@context":"https://schema.org","@type":"LocalBusiness","name":"Arizona Computer Guru","image":"assets/images/hero.png","description":"Concierge managed IT and cybersecurity for Tucson businesses since 2001.","address":{"@type":"PostalAddress","streetAddress":"7437 E. 22nd St","addressLocality":"Tucson","addressRegion":"AZ","postalCode":"85710","addressCountry":"US"},"telephone":"+1-520-304-8300","url":"https://azcomputerguru.com","foundingDate":"2001","areaServed":"Tucson, Arizona","openingHours":"Mo-Fr 09:00-17:00"}
+  </script>
+</head>
+<body>
+  <a href="#main" class="sr-only">Skip to content</a>
+
+  <header class="site-header">
+    <div class="wrap">
+      <a class="brand" href="index.html" aria-label="Arizona Computer Guru home">
+        <span class="brand__mark" aria-hidden="true"><svg viewBox="0 0 100 104" fill="none" stroke="currentColor" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(20 50 54)"><path d="M61.2 26.2 A30 30 0 1 1 38.8 26.2"/><line x1="50" y1="14" x2="50" y2="50"/></g></svg></span>
+        <span>
+          <span class="brand__name">Arizona Computer Guru</span><br />
+          <span class="brand__since">Concierge IT &middot; Tucson &middot; since 2001</span>
+        </span>
+      </a>
+      <nav class="nav" aria-label="Primary">
+        <div class="nav__links" id="navLinks">
+          <a class="nav__link" href="index.html" aria-current="page">Home</a>
+          <a class="nav__link" href="services.html">Services</a>
+          <a class="nav__link" href="pricing.html">Pricing</a>
+          <a class="nav__link nav__link--cta" href="calculator.html">Estimate</a>
+          <a class="nav__link" href="about.html">About</a>
+          <a class="nav__link" href="contact.html">Contact</a>
+        </div>
+        <a class="nav__phone" href="tel:+15203048300">520.304.8300 <span class="radio-badge" title="The Computer Guru Show - Saturdays 9AM KVOI 1030AM">&#9654; LIVE</span></a>
+        <button class="skin-toggle" id="skinToggle" type="button" aria-label="Switch visual skin (Bold, Midnight, or Verdigris)" title="Switch skin: Bold / Midnight / Verdigris"><span class="sw" aria-hidden="true"></span></button>
+        <button class="theme-toggle" id="themeToggle" type="button" aria-pressed="false" aria-label="Switch to dark theme" title="Toggle light / dark"><span aria-hidden="true" data-theme-icon>&#9728;</span></button>
+        <button class="nav__toggle" id="navToggle" type="button" aria-expanded="false" aria-controls="navLinks" aria-label="Open menu">&#8801;</button>
+      </nav>
+    </div>
+  </header>
+
+  <main id="main">
+    <!-- HERO -->
+    <section class="hero ledger" aria-labelledby="hero-h">
+      <div class="wrap">
+        <div class="hero__copy reveal">
+          <p class="hero__eyebrow">Tucson &middot; Managed IT &amp; Security &middot; Est. 2001</p>
+          <h1 id="hero-h">Concierge IT for Tucson,<br /><span class="amp">every number on the table.</span></h1>
+          <p class="hero__sub">We go further than your last IT company, build a real relationship, and never hide the math. Honest pricing, local people, problems fixed before you feel them.</p>
+          <div class="hero__cta">
+            <a class="btn btn--primary" href="calculator.html">Estimate your cost <span class="arrow" aria-hidden="true">&rarr;</span></a>
+            <a class="btn btn--ghost" href="contact.html">Talk to a human</a>
+          </div>
+          <p class="hero__note mono">// Month-to-month. No lock-in. No offshore call centers.</p>
+        </div>
+        <figure class="hero__frame reveal">
+          <img src="assets/images/hero.png" width="1248" height="832" alt="A wooden desk at golden hour with an open paper ledger, a laptop, and a coffee cup; the Santa Catalina mountains and a saguaro through the window." />
+          <figcaption class="hero__caption"><span>Tucson, AZ</span><span>open book, nothing hidden</span></figcaption>
+        </figure>
+      </div>
+    </section>
+
+    <!-- RADIO PROMO BAR -->
+    <aside class="radio-promo" aria-label="Radio show information">
+      <div class="wrap" style="display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;">
+        <strong>The Computer Guru Show</strong>
+        <span>Saturdays <span class="time">9AM</span> on KVOI 1030AM</span>
+        <span style="margin-left:auto;">Call in: <strong>520-790-2020</strong></span>
+      </div>
+    </aside>
+
+    <!-- TRUST -->
+    <section class="trust" aria-label="Why businesses stay with us" style="padding-block:0;">
+      <div class="wrap">
+        <div class="trust__cell"><div class="trust__num">2001</div><div class="trust__label">Serving Tucson businesses since</div></div>
+        <div class="trust__cell"><div class="trust__num">1&ndash;2<span class="u">hr</span></div><div class="trust__label">Typical onsite emergency response</div></div>
+        <div class="trust__cell"><div class="trust__num">100<span class="u">%</span></div><div class="trust__label">Local team, never offshore</div></div>
+        <div class="trust__cell"><div class="trust__num">30<span class="u">day</span></div><div class="trust__label">Cancel anytime, no penalty</div></div>
+      </div>
+    </section>
+
+    <!-- 3-STEP FUNNEL -->
+    <section class="funnel-steps" aria-label="How to get started">
+      <div class="wrap">
+        <div class="funnel-track">
+          <div class="funnel-step reveal">
+            <div class="funnel-step__num">1</div>
+            <div class="funnel-step__label">Build your estimate</div>
+            <a class="funnel-step__link" href="calculator.html">Calculator <span class="arrow" aria-hidden="true">&rarr;</span></a>
+          </div>
+          <div class="funnel-connector" aria-hidden="true">&rarr;</div>
+          <div class="funnel-step reveal">
+            <div class="funnel-step__num">2</div>
+            <div class="funnel-step__label">Talk it through</div>
+            <a class="funnel-step__link" href="contact.html">Contact <span class="arrow" aria-hidden="true">&rarr;</span></a>
+          </div>
+          <div class="funnel-connector" aria-hidden="true">&rarr;</div>
+          <div class="funnel-step reveal">
+            <div class="funnel-step__num">3</div>
+            <div class="funnel-step__label">Month-to-month start</div>
+            <span class="funnel-step__note">No lock-in</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CONCIERGE TEASER -->
+    <section class="story" aria-labelledby="story-h">
+      <div class="wrap">
+        <div class="story__copy reveal">
+          <p class="section-tag">Our difference <span>/ concierge</span></p>
+          <h2 id="story-h">What "concierge" actually means</h2>
+          <p class="muted">Most IT companies wait for things to break, route you to a call center three time zones away, and lock you into a three-year contract. We built Arizona Computer Guru to be the opposite. We learn your business, pick up the phone, and explain things in plain English. Because we charge the same whether your systems break or not, our only incentive is to keep them running.</p>
+          <a class="more-link" href="about.html">Read our story <span class="arrow" aria-hidden="true">&rarr;</span></a>
+        </div>
+        <figure class="story__img reveal">
+          <img src="assets/images/about.png" width="1248" height="832" alt="A friendly handshake over a wooden desk with a laptop and a handwritten notebook, an Arizona map framed on the wall." loading="lazy" />
+        </figure>
+      </div>
+    </section>
+
+    <!-- SERVICES TEASER -->
+    <section class="home-services ledger" aria-labelledby="hsvc-h">
+      <div class="wrap">
+        <p class="section-tag">Everything you need <span>/ one local partner</span></p>
+        <h2 id="hsvc-h">What we do</h2>
+        <div class="svc-list">
+          <article class="svc reveal"><div class="svc__no">01</div><div><h3 class="svc__name">Managed IT (GPS)</h3><p class="svc__desc">24/7 monitoring, automated patching, and a help desk that knows your name. <a class="svc__calc-link" href="calculator.html">See what this costs &rarr;</a></p></div><div class="svc__meta">from&nbsp;$19&nbsp;/endpoint</div></article>
+          <article class="svc reveal"><div class="svc__no">02</div><div><h3 class="svc__name">Cybersecurity</h3><p class="svc__desc">EDR, email security, dark-web monitoring, and training that catch what antivirus misses. <a class="svc__calc-link" href="calculator.html">See what this costs &rarr;</a></p></div><div class="svc__meta">in GPS-Pro &amp; up</div></article>
+          <article class="svc reveal"><div class="svc__no">03</div><div><h3 class="svc__name">Backup &amp; Recovery</h3><p class="svc__desc">Tested backups, offsite copies, and ransomware rollback. <a class="svc__calc-link" href="calculator.html">See what this costs &rarr;</a></p></div><div class="svc__meta">in GPS-Pro &amp; up</div></article>
+          <article class="svc reveal"><div class="svc__no">04</div><div><h3 class="svc__name">Microsoft 365 &amp; Email</h3><p class="svc__desc">Migrations, licensing, and email that is configured, secured, and supported. <a class="svc__calc-link" href="calculator.html">See what this costs &rarr;</a></p></div><div class="svc__meta">from&nbsp;$2&nbsp;/mailbox</div></article>
+          <article class="svc reveal"><div class="svc__no">05</div><div><h3 class="svc__name">Business Phones</h3><p class="svc__desc">Cloud phone systems with mobile and desktop apps, porting, and no usage surprises. <a class="svc__calc-link" href="calculator.html">See what this costs &rarr;</a></p></div><div class="svc__meta">from&nbsp;$22&nbsp;/user</div></article>
+          <article class="svc reveal"><div class="svc__no">06</div><div><h3 class="svc__name">Web &amp; Email Hosting</h3><p class="svc__desc">Managed hosting with free SSL, daily backups, and real humans on support. <a class="svc__calc-link" href="calculator.html">See what this costs &rarr;</a></p></div><div class="svc__meta">from&nbsp;$15&nbsp;/mo</div></article>
+        </div>
+        <a class="more-link" href="services.html">See all services <span class="arrow" aria-hidden="true">&rarr;</span></a>
+      </div>
+    </section>
+
+    <!-- PRICING TEASER -->
+    <section class="home-pricing" aria-labelledby="hp-h">
+      <div class="wrap">
+        <p class="section-tag">Published, not "call for quote" <span>/ per endpoint</span></p>
+        <h2 id="hp-h">Pricing with nothing hidden</h2>
+        <p class="lead">You pay for exactly the computers you have. No rounding you up into a bigger package tier.</p>
+        <div class="rate-card" role="list">
+          <div class="tier" role="listitem"><h3 class="tier__name">GPS-Basic</h3><div class="tier__price">$19 <span class="per">/ endpoint / mo</span></div><p class="tier__blurb" style="border-bottom:0;">Essential monitoring for small, simple environments.</p></div>
+          <div class="tier tier--pop" role="listitem"><div class="tier__flag">Most chosen</div><h3 class="tier__name">GPS-Pro</h3><div class="tier__price">$26 <span class="per">/ endpoint / mo</span></div><p class="tier__blurb" style="border-bottom:0;">Comprehensive protection for growing businesses.</p></div>
+          <div class="tier" role="listitem"><h3 class="tier__name">GPS-Advanced</h3><div class="tier__price">$39 <span class="per">/ endpoint / mo</span></div><p class="tier__blurb" style="border-bottom:0;">Enterprise-grade security and compliance.</p></div>
+        </div>
+        <div class="inline-actions">
+          <a class="btn btn--primary" href="calculator.html">Build your exact price <span class="arrow" aria-hidden="true">&rarr;</span></a>
+          <a class="more-link" href="pricing.html">See full pricing breakdown <span class="arrow" aria-hidden="true">&rarr;</span></a>
+        </div>
+      </div>
+    </section>
+
+    <!-- FIELD INTELLIGENCE DISPATCH BOARD -->
+    <section class="dispatch-board ledger" aria-labelledby="dispatch-h">
+      <div class="wrap">
+        <p class="section-tag">Field intelligence <span>/ community blog</span></p>
+        <h2 id="dispatch-h">Dispatch Board</h2>
+        <p class="lead">Real fixes, real lessons, real clients. What we learned this week so you do not have to.</p>
+        <div class="dispatch-grid">
+          <article class="dispatch-card reveal">
+            <div class="dispatch-card__label">Field Report #142</div>
+            <h3 class="dispatch-card__title">Why Your Backup Is Not Actually a Backup</h3>
+            <p class="dispatch-card__excerpt">Three Tucson businesses discovered their backups were corrupted only after ransomware hit. Here is what they missed.</p>
+            <div class="dispatch-card__meta">
+              <span class="dispatch-card__date">June 14, 2026</span>
+              <span class="dispatch-card__tag">Backup & Recovery</span>
+            </div>
+          </article>
+          <article class="dispatch-card reveal">
+            <div class="dispatch-card__label">Field Report #141</div>
+            <h3 class="dispatch-card__title">The $47,000 Phishing Email</h3>
+            <p class="dispatch-card__excerpt">How a single wire transfer approval almost bankrupted a local law firm, and the one setting that would have stopped it.</p>
+            <div class="dispatch-card__meta">
+              <span class="dispatch-card__date">June 11, 2026</span>
+              <span class="dispatch-card__tag">Email Security</span>
+            </div>
+          </article>
+          <article class="dispatch-card reveal">
+            <div class="dispatch-card__label">Field Report #140</div>
+            <h3 class="dispatch-card__title">Microsoft Copilot Is Leaking Your Data</h3>
+            <p class="dispatch-card__excerpt">Default Copilot settings expose internal emails and documents to the entire company. Here is how to lock it down.</p>
+            <div class="dispatch-card__meta">
+              <span class="dispatch-card__date">June 7, 2026</span>
+              <span class="dispatch-card__tag">Microsoft 365</span>
+            </div>
+          </article>
+        </div>
+        <a class="more-link" href="https://community.azcomputerguru.com" target="_blank" rel="noopener">Read all field reports <span class="arrow" aria-hidden="true">&rarr;</span></a>
+      </div>
+    </section>
+
+    <!-- CTA -->
+    <section class="cta-band" aria-labelledby="cta-h">
+      <div class="wrap">
+        <div class="reveal">
+          <h2 id="cta-h">Let's talk, no pitch.</h2>
+          <p>Tell us what is frustrating you, and we'll give you honest feedback. Even if that is "your current setup is fine, here is one thing to fix."</p>
+        </div>
+        <div class="cta-band__actions reveal">
+          <a class="btn btn--primary" href="contact.html">Talk to a human <span class="arrow" aria-hidden="true">&rarr;</span></a>
+          <a class="btn btn--ghost" href="tel:+15203048300">520.304.8300</a>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <!-- RADIO TICKER MARQUEE -->
+  <div class="radio-ticker">
+    <div class="radio-ticker__track">
+      <div class="radio-ticker__item"><strong>The Computer Guru Show</strong> Saturdays 9AM on KVOI 1030AM</div>
+      <div class="radio-ticker__item">Call in: <strong>520-790-2020</strong></div>
+      <div class="radio-ticker__item">Tucson's trusted tech talk since 2001</div>
+      <div class="radio-ticker__item"><strong>The Computer Guru Show</strong> Saturdays 9AM on KVOI 1030AM</div>
+      <div class="radio-ticker__item">Call in: <strong>520-790-2020</strong></div>
+      <div class="radio-ticker__item">Tucson's trusted tech talk since 2001</div>
+    </div>
+  </div>
+
+  <!-- EXIT INTENT BANNER -->
+  <div class="exit-offer" id="exitOffer">
+    <div class="exit-offer__content">
+      <div class="exit-offer__message">
+        <strong>Wait — Free IT Assessment</strong>
+        <p>Most Tucson businesses overpay for IT. Get a free audit before you go.</p>
+      </div>
+      <div class="exit-offer__actions">
+        <a class="btn btn--primary" href="contact.html">Get Free Assessment</a>
+        <button class="exit-offer__close" id="closeExit" aria-label="Close banner">&times;</button>
+      </div>
+    </div>
+  </div>
+
+  <footer class="site-footer">
+    <div class="wrap">
+      <p>&copy; <span id="year">2026</span> Arizona Computer Guru &middot; Protecting Tucson businesses since 2001</p>
+      <p><a href="tel:+15203048300">520.304.8300</a> &middot; <a href="mailto:info@azcomputerguru.com">info@azcomputerguru.com</a></p>
+      <p class="disclaimer">Local demonstration build of a proposed azcomputerguru.com (multipage). Pricing reflects published GPS rates and is illustrative for the estimator; a real quote is tailored to your environment. The contact form is not wired to a mailbox. Photography is representational.</p>
+    </div>
+  </footer>
+  <script src="js/app.js"></script>
+</body>
+</html>

projects/acg-website/js/app.js

@@ -0,0 +1,366 @@
+/* ===========================================================================
+   Arizona Computer Guru, Sonoran Ledger (multipage)
+   Shared vanilla JS across all pages. Each block guards on its own DOM.
+   =========================================================================== */
+(function () {
+  "use strict";
+
+  var $  = function (s, c) { return (c || document).querySelector(s); };
+  var $$ = function (s, c) { return Array.prototype.slice.call((c || document).querySelectorAll(s)); };
+
+  /* ---- Theme ------------------------------------------------------------ */
+  var root = document.documentElement;
+  var toggle = $("#themeToggle");
+  var icon = $("[data-theme-icon]");
+  var STORE = "acg-theme";
+
+  function applyTheme(mode) {
+    root.setAttribute("data-theme", mode);
+    var dark = mode === "dark";
+    if (toggle) {
+      toggle.setAttribute("aria-pressed", String(dark));
+      toggle.setAttribute("aria-label", dark ? "Switch to light theme" : "Switch to dark theme");
+    }
+    if (icon) icon.innerHTML = dark ? "☾" : "☀";
+  }
+
+  var saved = null;
+  try { saved = localStorage.getItem(STORE); } catch (e) {}
+  var prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  applyTheme(saved || (prefersDark ? "dark" : "light"));
+
+  if (toggle) {
+    toggle.addEventListener("click", function () {
+      var next = root.getAttribute("data-theme") === "dark" ? "light" : "dark";
+      applyTheme(next);
+      try { localStorage.setItem(STORE, next); } catch (e) {}
+    });
+  }
+  if (window.matchMedia) {
+    var mq = window.matchMedia("(prefers-color-scheme: dark)");
+    var onChange = function (e) {
+      var explicit = null;
+      try { explicit = localStorage.getItem(STORE); } catch (err) {}
+      if (!explicit) applyTheme(e.matches ? "dark" : "light");
+    };
+    if (mq.addEventListener) mq.addEventListener("change", onChange);
+    else if (mq.addListener) mq.addListener(onChange);
+  }
+
+  /* ---- Skin (Bold / Midnight / Verdigris) ------------------------------ */
+  var skinToggle = $("#skinToggle");
+  var SKIN = "acg-skin";
+  var SKINS = ["bold", "midnight", "verdigris"];
+  var SKIN_NAME = { bold: "Bold", midnight: "Midnight", verdigris: "Verdigris" };
+  // Verdigris uses its own cooler documentary photography.
+  var VERDIGRIS_IMG = {
+    "assets/images/hero.png": "assets/images/verdigris/hero.png",
+    "assets/images/about.png": "assets/images/verdigris/about.png",
+    "assets/images/services.png": "assets/images/verdigris/services.png",
+    "assets/images/contact.png": "assets/images/verdigris/contact.png",
+    "assets/images/story.png": "assets/images/verdigris/contact.png"
+  };
+  function swapSkinImages(skin) {
+    $$("img").forEach(function (img) {
+      var orig = img.getAttribute("data-orig-src");
+      if (orig === null) { orig = img.getAttribute("src"); img.setAttribute("data-orig-src", orig); }
+      if (skin === "verdigris" && VERDIGRIS_IMG[orig]) img.setAttribute("src", VERDIGRIS_IMG[orig]);
+      else img.setAttribute("src", orig);
+    });
+  }
+  function applySkin(skin) {
+    if (SKINS.indexOf(skin) < 0) skin = "bold";
+    root.setAttribute("data-skin", skin);
+    swapSkinImages(skin);
+    if (skinToggle) {
+      var name = SKIN_NAME[skin];
+      skinToggle.setAttribute("aria-label", "Current skin: " + name + ". Switch.");
+      skinToggle.setAttribute("title", "Skin: " + name + " (click to switch)");
+    }
+  }
+  var savedSkin = "bold";
+  try { savedSkin = localStorage.getItem(SKIN) || "bold"; } catch (e) {}
+  applySkin(savedSkin);
+  if (skinToggle) {
+    skinToggle.addEventListener("click", function () {
+      var cur = SKINS.indexOf(root.getAttribute("data-skin"));
+      var next = SKINS[(cur + 1) % SKINS.length];
+      applySkin(next);
+      try { localStorage.setItem(SKIN, next); } catch (e) {}
+    });
+  }
+
+  /* ---- Dynamic year ----------------------------------------------------- */
+  var yr = $("#year");
+  if (yr) yr.textContent = String(new Date().getFullYear());
+
+  /* ---- Mobile nav ------------------------------------------------------- */
+  var header = $(".site-header");
+  var navToggle = $("#navToggle");
+  if (navToggle && header) {
+    var closeNav = function () {
+      header.classList.remove("nav-open");
+      navToggle.setAttribute("aria-expanded", "false");
+      navToggle.setAttribute("aria-label", "Open menu");
+    };
+    navToggle.addEventListener("click", function () {
+      var open = header.classList.toggle("nav-open");
+      navToggle.setAttribute("aria-expanded", String(open));
+      navToggle.setAttribute("aria-label", open ? "Close menu" : "Open menu");
+    });
+    $$("#navLinks a").forEach(function (a) { a.addEventListener("click", closeNav); });
+    document.addEventListener("keydown", function (e) { if (e.key === "Escape") closeNav(); });
+  }
+
+  /* ---- Money helper ----------------------------------------------------- */
+  function money(n) { return "$" + Math.round(n).toLocaleString("en-US"); }
+
+  /* ---- Calculator (calculator.html) ------------------------------------ */
+  var form = $("#calcForm");
+  if (form) {
+    var EQUIP = 25, M365_RATE = 14, VOIP_RATE = 28;
+
+    function clampInt(v) { if (isNaN(v) || v < 0) return 0; return v > 500 ? 500 : v; }
+    function intVal(id) { return clampInt(parseInt(($("#" + id) || {}).value, 10)); }
+    function numSelect(id) { var v = parseFloat(($("#" + id) || {}).value); return isNaN(v) ? 0 : v; }
+
+    function lineRow(name, detail, cost) {
+      return '<div class="lline' + (cost <= 0 ? " is-zero" : "") + '">' +
+        '<span class="lname">' + name + (detail ? ' <span class="muted">' + detail + "</span>" : "") + "</span>" +
+        '<span class="lcost">' + money(cost) + "</span></div>";
+    }
+
+    function recalc() {
+      var endpoints = intVal("endpoints");
+      var tier = numSelect("gpsTier");
+      var equip = $("#equip").checked;
+      var support = numSelect("support");
+      var m365 = intVal("m365");
+      var voip = intVal("voip");
+      var hosting = numSelect("hosting");
+
+      var gpsCost = endpoints * tier;
+      var equipCost = equip ? EQUIP : 0;
+      var m365Cost = m365 * M365_RATE;
+      var voipCost = voip * VOIP_RATE;
+
+      var tierName = tier === 19 ? "GPS-Basic" : tier === 39 ? "GPS-Advanced" : "GPS-Pro";
+      var supportName = support === 0 ? "" : support === 200 ? "Essential" :
+        support === 380 ? "Standard" : support === 540 ? "Premium" : "Priority";
+      var hostingName = hosting === 0 ? "" : hosting === 15 ? "Starter" :
+        hosting === 35 ? "Business" : "Commerce";
+
+      var lines = "";
+      lines += lineRow(tierName + " monitoring", endpoints + " &times; " + money(tier), gpsCost);
+      lines += lineRow("Equipment monitoring", "up to 10 devices", equipCost);
+      lines += lineRow((supportName || "Support plan") + " support", supportName ? "bundled labor" : "none", support);
+      lines += lineRow("Microsoft 365", m365 + " &times; " + money(M365_RATE), m365Cost);
+      lines += lineRow("Business phones", voip + " &times; " + money(VOIP_RATE), voipCost);
+      lines += lineRow((hostingName || "Web hosting") + " hosting", hostingName ? "managed" : "none", hosting);
+
+      var total = gpsCost + equipCost + support + m365Cost + voipCost + hosting;
+
+      $("#ledgerLines").innerHTML = lines;
+      $("#totalMonthly").textContent = money(total);
+      $("#totalAnnual").textContent = money(total * 12) + " / year";
+      $("#perEndpoint").innerHTML = endpoints > 0
+        ? money(total / endpoints) + " all-in, per endpoint / mo"
+        : "add endpoints to see per-seat cost";
+    }
+
+    $$(".stepper").forEach(function (st) {
+      var input = $("input", st);
+      $$("button", st).forEach(function (b) {
+        b.addEventListener("click", function () {
+          input.value = clampInt(parseInt(input.value, 10) + parseInt(b.getAttribute("data-dir"), 10));
+          recalc();
+        });
+      });
+      input.addEventListener("change", function () { input.value = clampInt(parseInt(input.value, 10)); });
+    });
+
+    // Carry the built estimate across to the contact page.
+    var sendBtn = $("#sendEstimate");
+    if (sendBtn) {
+      var storeEstimate = function () {
+        var lines = $$("#ledgerLines .lline")
+          .filter(function (l) { return !l.classList.contains("is-zero"); })
+          .map(function (l) {
+            return "- " + $(".lname", l).textContent.replace(/\s+/g, " ").trim() +
+              ": " + $(".lcost", l).textContent.trim();
+          });
+        var summary = "Here is the estimate I built:\n" + lines.join("\n") +
+          "\n\nMonthly: " + $("#totalMonthly").textContent +
+          " (" + $("#totalAnnual").textContent + ")\n\nI'd like to talk it through.";
+        try { sessionStorage.setItem("acg-estimate", summary); } catch (e) {}
+      };
+      // 'click' covers keyboard + left-click; 'pointerdown' also catches
+      // middle-click / cmd-click / open-in-new-tab, which never fire 'click'.
+      sendBtn.addEventListener("click", storeEstimate);
+      sendBtn.addEventListener("pointerdown", storeEstimate);
+    }
+
+    form.addEventListener("input", recalc);
+    form.addEventListener("change", recalc);
+    form.addEventListener("submit", function (e) { e.preventDefault(); });
+    recalc();
+  }
+
+  /* ---- FAQ accordion (contact.html) ------------------------------------ */
+  $$(".faq__q").forEach(function (q, i) {
+    var panel = q.nextElementSibling;
+    var inner = panel ? panel.firstElementChild : null;
+    if (panel) {
+      var pid = "faq-a-" + (i + 1), qid = "faq-q-" + (i + 1);
+      panel.id = pid; q.id = qid;
+      panel.setAttribute("role", "region");
+      panel.setAttribute("aria-labelledby", qid);
+      q.setAttribute("aria-controls", pid);
+    }
+    q.addEventListener("click", function () {
+      var open = q.getAttribute("aria-expanded") === "true";
+      q.setAttribute("aria-expanded", String(!open));
+      if (panel) panel.style.maxHeight = open ? "0px" : (inner.scrollHeight + 8) + "px";
+    });
+  });
+  window.addEventListener("resize", function () {
+    $$(".faq__q").forEach(function (q) {
+      if (q.getAttribute("aria-expanded") === "true") {
+        var panel = q.nextElementSibling, inner = panel ? panel.firstElementChild : null;
+        if (panel && inner) panel.style.maxHeight = (inner.scrollHeight + 8) + "px";
+      }
+    });
+  });
+
+  /* ---- Contact form (contact.html) ------------------------------------- */
+  var contact = $("#contactForm");
+  if (contact) {
+    // Prefill from a calculator estimate, if one was just built.
+    var msg = $("#cf-msg");
+    if (msg) {
+      try {
+        var est = sessionStorage.getItem("acg-estimate");
+        if (est) {
+          msg.value = est;
+          sessionStorage.removeItem("acg-estimate");
+          var fn = $("#formNote");
+          if (fn) fn.textContent = "Your estimate is attached below. Add your name and we'll take it from there.";
+          // Bring the form into view and focus it so the handoff is visible.
+          if (contact.scrollIntoView) contact.scrollIntoView({ behavior: "smooth", block: "start" });
+          var nameField = $("#cf-name");
+          if (nameField) nameField.focus({ preventScroll: true });
+        }
+      } catch (e) {}
+    }
+    contact.addEventListener("submit", function (e) {
+      e.preventDefault();
+      var name = $("#cf-name"), contactField = $("#cf-contact"), note = $("#formNote");
+      if (!name.value.trim() || !contactField.value.trim()) {
+        note.textContent = "Please add your name and a phone or email so we can reach you.";
+        note.style.color = "var(--accent-ink)";
+        (name.value.trim() ? contactField : name).focus();
+        return;
+      }
+      note.textContent = "Thanks, " + name.value.trim().split(" ")[0] +
+        ". In a live build this reaches our Tucson team. (Demo: nothing was sent.)";
+      note.style.color = "var(--good)";
+      contact.reset();
+    });
+  }
+
+  /* ---- Reveal on scroll (with stagger) ---------------------------------- */
+  var reveals = $$(".reveal");
+  if ("IntersectionObserver" in window && reveals.length) {
+    var io = new IntersectionObserver(function (entries) {
+      entries.forEach(function (en) {
+        if (en.isIntersecting) { en.target.classList.add("in"); io.unobserve(en.target); }
+      });
+    }, { rootMargin: "0px 0px -8% 0px", threshold: 0.08 });
+    // Add stagger delays for sequential reveal
+    reveals.forEach(function (el, i) {
+      el.style.transitionDelay = Math.min(i * 55, 280) + "ms";
+      io.observe(el);
+    });
+  } else {
+    reveals.forEach(function (el) { el.classList.add("in"); });
+  }
+
+  /* ---- Custom Cursor - REMOVED (restored to normal system cursor) ------- */
+
+  /* ---- Magnetic Buttons ------------------------------------------------- */
+  $$(".btn, .tier, button").forEach(function (btn) {
+    btn.addEventListener("mousemove", function (e) {
+      var rect = btn.getBoundingClientRect();
+      var x = (e.clientX - rect.left - rect.width / 2) * 0.15;
+      var y = (e.clientY - rect.top - rect.height / 2) * 0.15;
+      btn.style.transform = "translate(" + x + "px, " + y + "px)";
+    });
+
+    btn.addEventListener("mouseleave", function () {
+      btn.style.transform = "";
+    });
+  });
+
+  /* ---- Calculator to Contact Handoff ------------------------------------ */
+  window.lockEstimate = function () {
+    var endpoints = $("#endpoints");
+    var tier = $("#tier");
+    var support = $("#support");
+    var monthlyTotal = $(".calc__out .tnum");
+
+    if (endpoints && tier && monthlyTotal) {
+      var estimate = {
+        endpoints: endpoints.value,
+        tier: tier.options[tier.selectedIndex].text,
+        support: support ? support.options[support.selectedIndex].text : "Standard",
+        monthly: monthlyTotal.textContent.trim(),
+        timestamp: Date.now()
+      };
+
+      try {
+        sessionStorage.setItem("acg_estimate", JSON.stringify(estimate));
+      } catch (e) {}
+
+      window.location.href = "contact.html?from=calculator";
+    }
+  };
+
+  // Pre-fill contact form with estimate if coming from calculator
+  if (window.location.search.indexOf("from=calculator") > -1) {
+    try {
+      var storedEstimate = sessionStorage.getItem("acg_estimate");
+      if (storedEstimate) {
+        var est = JSON.parse(storedEstimate);
+        var msgField = $("#cf-message");
+        if (msgField) {
+          msgField.value = "I'd like a quote for:\n" +
+            est.endpoints + " endpoints\n" +
+            est.tier + " tier\n" +
+            est.support + " support\n" +
+            "Estimated monthly: " + est.monthly;
+        }
+      }
+    } catch (e) {}
+  }
+
+  /* ---- Exit Intent Banner (Subtle, 3-second delay) ---------------------- */
+  var exitShown = false;
+  document.addEventListener("mouseout", function (e) {
+    if (!exitShown && e.clientY <= 0 && e.relatedTarget == null) {
+      exitShown = true;
+      // Show exit banner after 3 second delay (less aggressive)
+      setTimeout(function () {
+        var offer = $("#exitOffer");
+        if (offer) offer.classList.add("show");
+      }, 3000);
+    }
+  });
+
+  var closeExit = $("#closeExit");
+  if (closeExit) {
+    closeExit.addEventListener("click", function () {
+      var offer = $("#exitOffer");
+      if (offer) offer.classList.remove("show");
+    });
+  }
+})();

projects/acg-website/pricing.html

@@ -0,0 +1,227 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Pricing | Arizona Computer Guru</title>
+  <meta name="description" content="Published, transparent IT pricing: GPS monitoring tiers, support plans, non-expiring block time, hosting, Microsoft 365, and business phones." />
+  <meta name="color-scheme" content="light dark" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Lexend:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600;700&family=Fraunces:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600;700&family=Anton&family=Hanken+Grotesk:wght@400;500;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="css/styles.css" />
+  <link rel="icon" href="assets/logo/acg-mark.svg" type="image/svg+xml" />
+  <script>(function(){try{var s=localStorage.getItem("acg-theme");var m=s||(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");document.documentElement.setAttribute("data-theme",m);document.documentElement.setAttribute("data-skin",(localStorage.getItem("acg-skin")||"bold"));document.documentElement.classList.add("js");}catch(e){}})();</script>
+</head>
+<body>
+  <a href="#main" class="sr-only">Skip to content</a>
+  <header class="site-header">
+    <div class="wrap">
+      <a class="brand" href="index.html" aria-label="Arizona Computer Guru home">
+        <span class="brand__mark" aria-hidden="true"><svg viewBox="0 0 100 104" fill="none" stroke="currentColor" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(20 50 54)"><path d="M61.2 26.2 A30 30 0 1 1 38.8 26.2"/><line x1="50" y1="14" x2="50" y2="50"/></g></svg></span>
+        <span><span class="brand__name">Arizona Computer Guru</span><br /><span class="brand__since">Concierge IT &middot; Tucson &middot; since 2001</span></span>
+      </a>
+      <nav class="nav" aria-label="Primary">
+        <div class="nav__links" id="navLinks">
+          <a class="nav__link" href="index.html">Home</a>
+          <a class="nav__link" href="services.html">Services</a>
+          <a class="nav__link" href="pricing.html" aria-current="page">Pricing</a>
+          <a class="nav__link nav__link--cta" href="calculator.html">Estimate</a>
+          <a class="nav__link" href="about.html">About</a>
+          <a class="nav__link" href="contact.html">Contact</a>
+        </div>
+        <a class="nav__phone" href="tel:+15203048300">520.304.8300</a>
+        <button class="skin-toggle" id="skinToggle" type="button" aria-label="Switch visual skin (Bold, Midnight, or Verdigris)" title="Switch skin: Bold / Midnight / Verdigris"><span class="sw" aria-hidden="true"></span></button>
+        <button class="theme-toggle" id="themeToggle" type="button" aria-pressed="false" aria-label="Switch to dark theme" title="Toggle light / dark"><span aria-hidden="true" data-theme-icon>&#9728;</span></button>
+        <button class="nav__toggle" id="navToggle" type="button" aria-expanded="false" aria-controls="navLinks" aria-label="Open menu">&#8801;</button>
+      </nav>
+    </div>
+  </header>
+
+  <main id="main">
+    <section class="page-head ledger">
+      <div class="wrap reveal">
+        <p class="eyebrow">Published, not "call for quote"</p>
+        <h1>Pricing with nothing hidden</h1>
+        <p class="lead">We think hiding prices is a red flag, in any IT company, including us. Here is the whole list. You pay for exactly what you have.</p>
+      </div>
+    </section>
+
+    <!-- GPS tiers -->
+    <section aria-labelledby="gps-h">
+      <div class="wrap">
+        <p class="section-tag">Per endpoint <span>/ monitoring &amp; protection</span></p>
+        <h2 id="gps-h">GPS monitoring tiers</h2>
+        <div class="rate-card" role="list" style="margin-top:var(--base);">
+          <div class="tier" role="listitem">
+            <h3 class="tier__name">GPS-Basic</h3>
+            <div class="tier__price">$19 <span class="per">/ endpoint / mo</span></div>
+            <p class="tier__blurb">Essential monitoring for small, simple environments.</p>
+            <ul>
+              <li class="is-base">Remote monitoring &amp; management</li>
+              <li class="is-base">Automated patch management</li>
+              <li class="is-base">Business-grade antivirus</li>
+              <li class="is-base">8&times;5 help desk</li>
+              <li class="is-base">Monthly health reports</li>
+            </ul>
+          </div>
+          <div class="tier tier--pop" role="listitem">
+            <div class="tier__flag">Most chosen</div>
+            <h3 class="tier__name">GPS-Pro</h3>
+            <div class="tier__price">$26 <span class="per">/ endpoint / mo</span></div>
+            <p class="tier__blurb">Comprehensive protection for growing businesses.</p>
+            <ul>
+              <li class="is-base">Everything in Basic</li>
+              <li>24&times;7 help desk</li>
+              <li>Advanced EDR &amp; email security</li>
+              <li>Dark-web monitoring</li>
+              <li>Backup &amp; disaster recovery</li>
+              <li>Security-awareness training</li>
+            </ul>
+          </div>
+          <div class="tier" role="listitem">
+            <h3 class="tier__name">GPS-Advanced</h3>
+            <div class="tier__price">$39 <span class="per">/ endpoint / mo</span></div>
+            <p class="tier__blurb">Enterprise-grade security and compliance.</p>
+            <ul>
+              <li class="is-base">Everything in Pro</li>
+              <li>Compliance management (HIPAA/SOC)</li>
+              <li>Ransomware rollback</li>
+              <li>Virtual CIO services</li>
+              <li>Priority response SLA</li>
+              <li>Dedicated account manager</li>
+            </ul>
+          </div>
+        </div>
+        <p class="muted" style="margin-top:1rem;font-size:0.9rem;">Add equipment monitoring (routers, switches, printers, NAS) for <span class="mono">$25/mo</span> up to 10 devices.</p>
+      </div>
+    </section>
+
+    <!-- Support + block -->
+    <section class="pricing" aria-labelledby="sup-h">
+      <div class="wrap">
+        <p class="section-tag">Labor <span>/ predictable rates</span></p>
+        <h2 id="sup-h">Support plans &amp; block time</h2>
+        <div class="table-wrap">
+          <table class="plan-table">
+            <caption>Support plans, bundled labor at a lower effective rate</caption>
+            <thead><tr><th scope="col">Plan</th><th class="num" scope="col">Monthly</th><th class="num" scope="col">Hours</th><th class="num" scope="col">Effective&nbsp;rate</th><th scope="col">Response</th></tr></thead>
+            <tbody>
+              <tr><td>Essential</td><td class="num">$200</td><td class="num">2</td><td class="num">$100/hr</td><td>Next business day</td></tr>
+              <tr class="pop"><td>Standard</td><td class="num">$380</td><td class="num">4</td><td class="num">$95/hr</td><td>8 hours</td></tr>
+              <tr><td>Premium</td><td class="num">$540</td><td class="num">6</td><td class="num">$90/hr</td><td>4 hours</td></tr>
+              <tr><td>Priority</td><td class="num">$850</td><td class="num">10</td><td class="num">$85/hr</td><td>2 hours, 24/7</td></tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="table-wrap">
+          <table class="plan-table" style="margin-top:var(--base);">
+            <caption>Block time, pre-paid hours that never expire</caption>
+            <thead><tr><th scope="col">Block</th><th class="num" scope="col">Price</th><th class="num" scope="col">Effective&nbsp;rate</th><th scope="col">Notes</th></tr></thead>
+            <tbody>
+              <tr><td>10 hours</td><td class="num">$1,500</td><td class="num">$150/hr</td><td>Use anytime, no expiry</td></tr>
+              <tr><td>20 hours</td><td class="num">$2,600</td><td class="num">$130/hr</td><td>Bank &amp; draw down</td></tr>
+              <tr><td>30 hours</td><td class="num">$3,000</td><td class="num">$100/hr</td><td>Best per-hour value</td></tr>
+            </tbody>
+          </table>
+        </div>
+        <p class="muted" style="margin-top:1rem;font-size:0.9rem;">Off-plan labor is <span class="mono">$175/hr</span>. Plans and block time bring that down, and there is never a charge to find out what something will cost.</p>
+      </div>
+    </section>
+
+    <!-- Hosting / 365 / Phones -->
+    <section aria-labelledby="more-h">
+      <div class="wrap">
+        <p class="section-tag">Hosting, email &amp; phones <span>/ the rest of the stack</span></p>
+        <h2 id="more-h">Everything else, also published</h2>
+        <div class="price-cols">
+          <div class="price-block reveal">
+            <h3>Web hosting</h3>
+            <div class="table-wrap"><table class="plan-table">
+              <thead><tr><th scope="col">Tier</th><th class="num" scope="col">Monthly</th><th scope="col">Includes</th></tr></thead>
+              <tbody>
+                <tr><td>Starter</td><td class="num">$15</td><td>5&nbsp;GB, 1 site</td></tr>
+                <tr class="pop"><td>Business</td><td class="num">$35</td><td>25&nbsp;GB, 5 sites</td></tr>
+                <tr><td>Commerce</td><td class="num">$65</td><td>50&nbsp;GB, unlimited</td></tr>
+              </tbody>
+            </table></div>
+          </div>
+          <div class="price-block reveal">
+            <h3>Microsoft 365 &amp; email</h3>
+            <div class="table-wrap"><table class="plan-table">
+              <thead><tr><th scope="col">Plan</th><th class="num" scope="col">Per user</th><th scope="col">For</th></tr></thead>
+              <tbody>
+                <tr><td>Hosted email</td><td class="num">$2&ndash;$10</td><td>IMAP/POP, by storage</td></tr>
+                <tr><td>M365 Basic</td><td class="num">$7</td><td>Web apps, Teams</td></tr>
+                <tr class="pop"><td>M365 Standard</td><td class="num">$14</td><td>Desktop Office</td></tr>
+                <tr><td>M365 Premium</td><td class="num">$24</td><td>Security &amp; device mgmt</td></tr>
+              </tbody>
+            </table></div>
+            <p class="muted" style="font-size:0.84rem;margin-top:0.6rem;">Email security add-on: <span class="mono">$3</span>/mailbox.</p>
+          </div>
+          <div class="price-block reveal">
+            <h3>Business phones</h3>
+            <div class="table-wrap"><table class="plan-table">
+              <thead><tr><th scope="col">Tier</th><th class="num" scope="col">Per user</th><th scope="col">Highlights</th></tr></thead>
+              <tbody>
+                <tr><td>Basic</td><td class="num">$22</td><td>Unlimited US, app, e911</td></tr>
+                <tr class="pop"><td>Standard</td><td class="num">$28</td><td>Ring groups, recording</td></tr>
+                <tr><td>Pro</td><td class="num">$35</td><td>SMS, analytics, CRM</td></tr>
+                <tr><td>Call Center</td><td class="num">$55</td><td>Queues, supervisor tools</td></tr>
+              </tbody>
+            </table></div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="cta-band" aria-labelledby="cta-h">
+      <div class="wrap">
+        <div class="reveal">
+          <h2 id="cta-h">Add it up for your business</h2>
+          <p>Put in your numbers and watch the total. No email wall, no sales call required.</p>
+        </div>
+        <div class="cta-band__actions reveal">
+          <a class="btn btn--primary" href="calculator.html">Build an estimate <span class="arrow" aria-hidden="true">&rarr;</span></a>
+          <a class="btn btn--ghost" href="contact.html">Ask a question</a>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <!-- RADIO TICKER MARQUEE -->
+  <div class="radio-ticker">
+    <div class="radio-ticker__track">
+      <div class="radio-ticker__item"><strong>The Computer Guru Show</strong> Saturdays 9AM on KVOI 1030AM</div>
+      <div class="radio-ticker__item">Call in: <strong>520-790-2020</strong></div>
+      <div class="radio-ticker__item">Tucson's trusted tech talk since 2001</div>
+      <div class="radio-ticker__item"><strong>The Computer Guru Show</strong> Saturdays 9AM on KVOI 1030AM</div>
+      <div class="radio-ticker__item">Call in: <strong>520-790-2020</strong></div>
+      <div class="radio-ticker__item">Tucson's trusted tech talk since 2001</div>
+    </div>
+  </div>
+
+  <!-- EXIT INTENT BANNER -->
+  <div class="exit-offer" id="exitOffer">
+    <div class="exit-offer__content">
+      <div class="exit-offer__message">
+        <strong>Wait — Free IT Assessment</strong>
+        <p>Most Tucson businesses overpay for IT. Get a free audit before you go.</p>
+      </div>
+      <div class="exit-offer__actions">
+        <a class="btn btn--primary" href="contact.html">Get Free Assessment</a>
+        <button class="exit-offer__close" id="closeExit" aria-label="Close banner">&times;</button>
+      </div>
+    </div>
+  </div>
+
+  <footer class="site-footer">
+    <div class="wrap">
+      <p>&copy; <span id="year">2026</span> Arizona Computer Guru &middot; Protecting Tucson businesses since 2001</p>
+      <p><a href="tel:+15203048300">520.304.8300</a> &middot; <a href="mailto:info@azcomputerguru.com">info@azcomputerguru.com</a></p>
+      <p class="disclaimer">Local demonstration build of a proposed azcomputerguru.com (multipage). Pricing reflects published GPS rates and is illustrative for the estimator; a real quote is tailored to your environment. The contact form is not wired to a mailbox. Photography is representational.</p>
+    </div>
+  </footer>
+  <script src="js/app.js"></script>
+</body>
+</html>

projects/acg-website/radical.html

@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Arizona Computer Guru | IT that picks up</title>
+  <meta name="description" content="Concierge IT for Tucson since 2001. We go further, answer the phone, and fix it before you feel it. Transparent per-endpoint pricing, month-to-month." />
+  <meta name="color-scheme" content="dark" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Anton&family=Hanken+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="css/radical.css" />
+  <link rel="icon" href="assets/logo/acg-mark.svg" type="image/svg+xml" />
+</head>
+<body>
+  <a href="#main" class="sr-only">Skip to content</a>
+
+  <header class="rx-header">
+    <div class="wrap">
+      <a class="rx-brand" href="radical.html">ARIZONA <b>COMPUTER</b> GURU</a>
+      <nav class="rx-nav" aria-label="Primary">
+        <a href="#work">Work</a>
+        <a href="#pricing">Pricing</a>
+        <a href="#calc">Estimate</a>
+        <a href="#contact">Contact</a>
+        <a class="rx-cta-sm" href="tel:+15203048300">520.304.8300</a>
+      </nav>
+    </div>
+  </header>
+
+  <main id="main">
+    <!-- HERO -->
+    <section class="rx-hero">
+      <div class="rx-hero__art" aria-hidden="true"><img src="assets/images/hero.png" alt="" /></div>
+      <div class="wrap">
+        <p class="rx-hero__eyebrow">Tucson &middot; Managed IT &amp; Security &middot; Est. 2001</p>
+        <h1>IT that<br /><span class="hot">picks</span> <span class="stroke">up.</span></h1>
+        <p class="rx-hero__sub">Concierge IT for Tucson. We go further, we answer the phone, and we fix it before you feel it.</p>
+        <div class="rx-hero__cta">
+          <a class="rx-btn rx-btn--hot" href="#calc">Estimate your cost <span class="x" aria-hidden="true">&rarr;</span></a>
+          <a class="rx-btn rx-btn--out" href="#contact">Talk to a human</a>
+        </div>
+      </div>
+    </section>
+
+    <!-- MARQUEE -->
+    <div class="marquee" aria-hidden="true">
+      <div class="marquee__track">
+        <span>Since 2001</span><span>Local Tucson team</span><span>Month to month</span><span>No offshore</span><span>Onsite in 1-2 hrs</span><span>Published pricing</span>
+        <span>Since 2001</span><span>Local Tucson team</span><span>Month to month</span><span>No offshore</span><span>Onsite in 1-2 hrs</span><span>Published pricing</span>
+      </div>
+    </div>
+
+    <!-- WORK / SERVICES -->
+    <section class="rx-sec" id="work">
+      <span class="rx-ghost" aria-hidden="true">01</span>
+      <div class="wrap">
+        <p class="rx-kicker">What we run</p>
+        <h2 class="rx-h2">Everything, <span class="hot">handled.</span></h2>
+        <div class="rx-svc-list" style="margin-top:2.5rem;">
+          <article class="rx-svc rx-up"><div class="rx-svc__n">01</div><div><div class="rx-svc__name">Managed IT</div><p class="rx-svc__d">24/7 monitoring, automated patching, and a help desk that already knows your setup.</p></div><div class="rx-svc__meta">from $19/endpoint</div></article>
+          <article class="rx-svc rx-up"><div class="rx-svc__n">02</div><div><div class="rx-svc__name">Cybersecurity</div><p class="rx-svc__d">EDR, email security, dark-web monitoring, and training that catch what antivirus misses.</p></div><div class="rx-svc__meta">in GPS-Pro &amp; up</div></article>
+          <article class="rx-svc rx-up"><div class="rx-svc__n">03</div><div><div class="rx-svc__name">Backup &amp; Recovery</div><p class="rx-svc__d">Tested backups, offsite copies, ransomware rollback. A bad day stays a bad day, not a closure.</p></div><div class="rx-svc__meta">in GPS-Pro &amp; up</div></article>
+          <article class="rx-svc rx-up"><div class="rx-svc__n">04</div><div><div class="rx-svc__name">Microsoft 365</div><p class="rx-svc__d">Migrations, licensing, and email configured, secured, and supported by people you can call.</p></div><div class="rx-svc__meta">from $2/mailbox</div></article>
+          <article class="rx-svc rx-up"><div class="rx-svc__n">05</div><div><div class="rx-svc__name">Business Phones</div><p class="rx-svc__d">Cloud phone systems, mobile and desktop apps, free porting. No per-minute surprises.</p></div><div class="rx-svc__meta">from $22/user</div></article>
+          <article class="rx-svc rx-up"><div class="rx-svc__n">06</div><div><div class="rx-svc__name">Web &amp; Hosting</div><p class="rx-svc__d">Managed hosting with free SSL, daily backups, and a real human when something needs a hand.</p></div><div class="rx-svc__meta">from $15/mo</div></article>
+        </div>
+      </div>
+    </section>
+
+    <!-- PRICING -->
+    <section class="rx-sec" id="pricing">
+      <span class="rx-ghost" aria-hidden="true">$</span>
+      <div class="wrap">
+        <p class="rx-kicker">Published, not "call for quote"</p>
+        <h2 class="rx-h2">Per endpoint.<br />Per month. <span class="hot">No games.</span></h2>
+        <div class="rx-prices rx-up">
+          <div class="rx-price">
+            <div class="rx-price__tier">GPS-Basic</div>
+            <div class="rx-price__big">$19</div>
+            <span class="rx-price__u">/ endpoint / month</span>
+            <ul class="rx-price__list"><li>Monitoring &amp; patching</li><li>Antivirus</li><li>8x5 help desk</li></ul>
+          </div>
+          <div class="rx-price rx-price--pop">
+            <div class="rx-price__tier">GPS-Pro &mdash; most chosen</div>
+            <div class="rx-price__big">$26</div>
+            <span class="rx-price__u">/ endpoint / month</span>
+            <ul class="rx-price__list"><li>Everything in Basic</li><li>EDR + email security</li><li>Dark-web monitoring</li><li>Backup &amp; recovery</li></ul>
+          </div>
+          <div class="rx-price">
+            <div class="rx-price__tier">GPS-Advanced</div>
+            <div class="rx-price__big">$39</div>
+            <span class="rx-price__u">/ endpoint / month</span>
+            <ul class="rx-price__list"><li>Everything in Pro</li><li>Compliance (HIPAA/SOC)</li><li>Ransomware rollback</li><li>Virtual CIO</li></ul>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CALCULATOR TEASER -->
+    <section class="rx-sec rx-calc" id="calc">
+      <div class="wrap">
+        <div>
+          <p class="rx-kicker">No email wall</p>
+          <div class="rx-calc__big">Do the math <span class="hot">yourself.</span></div>
+          <p>Move the numbers, watch the total. The same math we would walk you through in person, with nothing hidden behind a "contact sales" button.</p>
+        </div>
+        <a class="rx-btn rx-btn--hot" href="calculator.html">Open the estimator <span class="x" aria-hidden="true">&rarr;</span></a>
+      </div>
+    </section>
+
+    <!-- CTA -->
+    <section class="rx-sec rx-cta" id="contact">
+      <div class="wrap">
+        <div class="rx-cta__big">Talk to a<br />human.</div>
+        <div class="rx-cta__row">
+          <a class="rx-btn rx-btn--hot" href="tel:+15203048300">520.304.8300</a>
+          <a class="rx-btn rx-btn--out" href="mailto:info@azcomputerguru.com">info@azcomputerguru.com</a>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer class="rx-footer">
+    <div class="wrap">
+      <p>&copy; <span id="yr">2026</span> Arizona Computer Guru &middot; Tucson since 2001</p>
+      <p><a href="tel:+15203048300">520.304.8300</a> &middot; <a href="mailto:info@azcomputerguru.com">info@azcomputerguru.com</a></p>
+      <p class="rx-note">Radical concept build of a proposed azcomputerguru.com. One dark, poster-scale direction; pricing reflects published GPS rates and is illustrative. This is a separate experiment from the Paper / Midnight / Verdigris skin set.</p>
+    </div>
+  </footer>
+
+  <script>
+    document.getElementById("yr").textContent = String(new Date().getFullYear());
+    (function () {
+      var els = [].slice.call(document.querySelectorAll(".rx-up"));
+      if (!("IntersectionObserver" in window) || !els.length) { els.forEach(function(e){e.classList.add("in");}); return; }
+      var io = new IntersectionObserver(function (en) {
+        en.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
+      }, { threshold: 0.12, rootMargin: "0px 0px -6% 0px" });
+      els.forEach(function (e) { io.observe(e); });
+    })();
+  </script>
+</body>
+</html>

projects/acg-website/serve.ps1

@@ -0,0 +1,9 @@
+# Serve the ACG multipage showcase locally, then open it.
+# Usage:  powershell -ExecutionPolicy Bypass -File serve.ps1  [port]
+param([int]$Port = 4328)
+$ErrorActionPreference = "Stop"
+Set-Location -Path $PSScriptRoot
+Write-Host "Arizona Computer Guru - showcase (multipage)" -ForegroundColor Yellow
+Write-Host "Serving $PSScriptRoot at http://localhost:$Port/  (Ctrl+C to stop)"
+Start-Process "http://localhost:$Port/"
+if (Get-Command py -ErrorAction SilentlyContinue) { py -m http.server $Port } else { python -m http.server $Port }

projects/acg-website/services.html

@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Services | Arizona Computer Guru</title>
+  <meta name="description" content="Managed IT, cybersecurity, backup, Microsoft 365, business phones, and hosting for Tucson businesses. One local partner, plainly laid out." />
+  <meta name="color-scheme" content="light dark" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Lexend:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600;700&family=Fraunces:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600;700&family=Anton&family=Hanken+Grotesk:wght@400;500;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="css/styles.css" />
+  <link rel="icon" href="assets/logo/acg-mark.svg" type="image/svg+xml" />
+  <script>(function(){try{var s=localStorage.getItem("acg-theme");var m=s||(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");document.documentElement.setAttribute("data-theme",m);document.documentElement.setAttribute("data-skin",(localStorage.getItem("acg-skin")||"bold"));document.documentElement.classList.add("js");}catch(e){}})();</script>
+</head>
+<body>
+  <a href="#main" class="sr-only">Skip to content</a>
+  <header class="site-header">
+    <div class="wrap">
+      <a class="brand" href="index.html" aria-label="Arizona Computer Guru home">
+        <span class="brand__mark" aria-hidden="true"><svg viewBox="0 0 100 104" fill="none" stroke="currentColor" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(20 50 54)"><path d="M61.2 26.2 A30 30 0 1 1 38.8 26.2"/><line x1="50" y1="14" x2="50" y2="50"/></g></svg></span>
+        <span><span class="brand__name">Arizona Computer Guru</span><br /><span class="brand__since">Concierge IT &middot; Tucson &middot; since 2001</span></span>
+      </a>
+      <nav class="nav" aria-label="Primary">
+        <div class="nav__links" id="navLinks">
+          <a class="nav__link" href="index.html">Home</a>
+          <a class="nav__link" href="services.html" aria-current="page">Services</a>
+          <a class="nav__link" href="pricing.html">Pricing</a>
+          <a class="nav__link nav__link--cta" href="calculator.html">Estimate</a>
+          <a class="nav__link" href="about.html">About</a>
+          <a class="nav__link" href="contact.html">Contact</a>
+        </div>
+        <a class="nav__phone" href="tel:+15203048300">520.304.8300</a>
+        <button class="skin-toggle" id="skinToggle" type="button" aria-label="Switch visual skin (Bold, Midnight, or Verdigris)" title="Switch skin: Bold / Midnight / Verdigris"><span class="sw" aria-hidden="true"></span></button>
+        <button class="theme-toggle" id="themeToggle" type="button" aria-pressed="false" aria-label="Switch to dark theme" title="Toggle light / dark"><span aria-hidden="true" data-theme-icon>&#9728;</span></button>
+        <button class="nav__toggle" id="navToggle" type="button" aria-expanded="false" aria-controls="navLinks" aria-label="Open menu">&#8801;</button>
+      </nav>
+    </div>
+  </header>
+
+  <main id="main">
+    <section class="page-head page-head--img ledger">
+      <div class="wrap">
+        <div class="reveal">
+          <p class="eyebrow">What we do</p>
+          <h1>Services, laid out plainly</h1>
+          <p class="lead">One local partner for the whole stack: the computers, the security, the phones, the email, and the people who keep it all running. No bundles you do not need.</p>
+        </div>
+        <figure class="reveal">
+          <img src="assets/images/services.png" width="1248" height="832" alt="A tidy wall-mounted patch panel and small network switch with neatly dressed cables on a wooden shelf in warm light." />
+        </figure>
+      </div>
+    </section>
+
+    <section aria-label="All services">
+      <div class="wrap">
+
+        <div class="svc-group">
+          <h2 class="svc-group__title">Run your systems</h2>
+          <div class="svc-list">
+            <article class="svc reveal"><div class="svc__no">01</div><div><h3 class="svc__name">Managed IT (GPS)</h3><p class="svc__desc">Guru Protection Services keeps every endpoint healthy: 24/7 monitoring, automated patching, and a help desk that already knows your setup. You get monthly health reports showing what we fixed before it broke.</p></div><div class="svc__meta">from&nbsp;$19&nbsp;/endpoint</div></article>
+            <article class="svc reveal"><div class="svc__no">02</div><div><h3 class="svc__name">Backup &amp; Recovery</h3><p class="svc__desc">Tested backups, offsite copies, and ransomware rollback. A bad day becomes an inconvenience instead of a closure, and we prove the restores actually work.</p></div><div class="svc__meta">in GPS-Pro &amp; up</div></article>
+            <article class="svc reveal"><div class="svc__no">03</div><div><h3 class="svc__name">Projects &amp; Block Time</h3><p class="svc__desc">Migrations, network buildouts, new-office setups, and one-off work, billed against pre-paid hours that never expire. Bank the hours, draw them down when you need them.</p></div><div class="svc__meta">from&nbsp;$100&nbsp;/hr</div></article>
+          </div>
+        </div>
+
+        <div class="svc-group">
+          <h2 class="svc-group__title">Protect your business</h2>
+          <div class="svc-list">
+            <article class="svc reveal"><div class="svc__no">04</div><div><h3 class="svc__name">Cybersecurity</h3><p class="svc__desc">Advanced EDR, email security, dark-web monitoring, and security-awareness training. Basic antivirus alone is not enough anymore, so we do not pretend it is.</p></div><div class="svc__meta">in GPS-Pro &amp; up</div></article>
+            <article class="svc reveal"><div class="svc__no">05</div><div><h3 class="svc__name">vCIO &amp; Compliance</h3><p class="svc__desc">Strategy, budgeting, and cyber-insurance readiness. We help you check the boxes auditors and insurers ask for (HIPAA, SOC, MFA, documented backups) and hand you the paperwork.</p></div><div class="svc__meta">in GPS-Advanced</div></article>
+          </div>
+        </div>
+
+        <div class="svc-group">
+          <h2 class="svc-group__title">Connect your people</h2>
+          <div class="svc-list">
+            <article class="svc reveal"><div class="svc__no">06</div><div><h3 class="svc__name">Microsoft 365 &amp; Email</h3><p class="svc__desc">Migrations, Business Standard or Premium licensing, or budget-friendly hosted email. Configured, secured, and supported by people you can call.</p></div><div class="svc__meta">from&nbsp;$2&nbsp;/mailbox</div></article>
+            <article class="svc reveal"><div class="svc__no">07</div><div><h3 class="svc__name">Business Phones (GPS-Voice)</h3><p class="svc__desc">Cloud phone systems with mobile and desktop apps, auto-attendants, and free number porting for managed clients. Four tiers, no per-minute surprises.</p></div><div class="svc__meta">from&nbsp;$22&nbsp;/user</div></article>
+            <article class="svc reveal"><div class="svc__no">08</div><div><h3 class="svc__name">Web &amp; Email Hosting</h3><p class="svc__desc">Managed hosting with free SSL, daily backups, and a real person (not a ticket robot) when something needs a hand.</p></div><div class="svc__meta">from&nbsp;$15&nbsp;/mo</div></article>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="cta-band" aria-labelledby="cta-h">
+      <div class="wrap">
+        <div class="reveal">
+          <h2 id="cta-h">See what it costs</h2>
+          <p>Every service above is on our published price list. Build your own estimate, or read the full breakdown.</p>
+        </div>
+        <div class="cta-band__actions reveal">
+          <a class="btn btn--primary" href="calculator.html">Estimate your cost <span class="arrow" aria-hidden="true">&rarr;</span></a>
+          <a class="btn btn--ghost" href="pricing.html">Full pricing</a>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <!-- RADIO TICKER MARQUEE -->
+  <div class="radio-ticker">
+    <div class="radio-ticker__track">
+      <div class="radio-ticker__item"><strong>The Computer Guru Show</strong> Saturdays 9AM on KVOI 1030AM</div>
+      <div class="radio-ticker__item">Call in: <strong>520-790-2020</strong></div>
+      <div class="radio-ticker__item">Tucson's trusted tech talk since 2001</div>
+      <div class="radio-ticker__item"><strong>The Computer Guru Show</strong> Saturdays 9AM on KVOI 1030AM</div>
+      <div class="radio-ticker__item">Call in: <strong>520-790-2020</strong></div>
+      <div class="radio-ticker__item">Tucson's trusted tech talk since 2001</div>
+    </div>
+  </div>
+
+  <!-- EXIT INTENT BANNER -->
+  <div class="exit-offer" id="exitOffer">
+    <div class="exit-offer__content">
+      <div class="exit-offer__message">
+        <strong>Wait — Free IT Assessment</strong>
+        <p>Most Tucson businesses overpay for IT. Get a free audit before you go.</p>
+      </div>
+      <div class="exit-offer__actions">
+        <a class="btn btn--primary" href="contact.html">Get Free Assessment</a>
+        <button class="exit-offer__close" id="closeExit" aria-label="Close banner">&times;</button>
+      </div>
+    </div>
+  </div>
+
+  <footer class="site-footer">
+    <div class="wrap">
+      <p>&copy; <span id="year">2026</span> Arizona Computer Guru &middot; Protecting Tucson businesses since 2001</p>
+      <p><a href="tel:+15203048300">520.304.8300</a> &middot; <a href="mailto:info@azcomputerguru.com">info@azcomputerguru.com</a></p>
+      <p class="disclaimer">Local demonstration build of a proposed azcomputerguru.com (multipage). Pricing reflects published GPS rates and is illustrative for the estimator; a real quote is tailored to your environment. The contact form is not wired to a mailbox. Photography is representational.</p>
+    </div>
+  </footer>
+  <script src="js/app.js"></script>
+</body>
+</html>