diff --git a/docs/superpowers/specs/2026-06-27-mobile-homepage-fidelity-design.md b/docs/superpowers/specs/2026-06-27-mobile-homepage-fidelity-design.md
new file mode 100644
index 0000000..7cfb72f
--- /dev/null
+++ b/docs/superpowers/specs/2026-06-27-mobile-homepage-fidelity-design.md
@@ -0,0 +1,88 @@
+# Mobile Homepage Fidelity Corrections
+
+## Goal
+
+Correct the mobile homepage so the supplied section crops in `notes/` are pixel-accurate at a 402px viewport and adapt proportionally from 320px through 767px. Preserve all layouts at 768px and above.
+
+## Responsive Architecture
+
+- Scope presentation changes to `@media (max-width: 767px)`.
+- Treat 402px as the exact visual baseline.
+- Scale between 320px and 767px with bounded percentages, viewport-relative dimensions, `clamp()`, and component container widths.
+- Keep responsive rules with the component or block that owns them.
+- Reuse the existing templates and WordPress content. Do not duplicate mobile markup.
+- Make minimal template changes only when CSS cannot provide correct semantic ordering or accessible controls.
+
+## Component Corrections
+
+### Header
+
+Change only the hamburger button to match the reference: shape, size, coral fill, and white line treatment. Preserve the current header height, logo treatment, padding, and spacing.
+
+### Homepage Hero
+
+- Match the reference heading width, line breaks, left alignment, and vertical placement.
+- Match the CTA dimensions, spacing, and alignment.
+- Adjust the background image crop and overlay so the image remains visible behind the content.
+- Scale and anchor the linework vector to the bottom composition shown in the reference.
+- Position and size the location label to match the crop.
+
+### Pull Quote
+
+- Match the reference type size, weight, line height, and centered text width.
+- Match the vertical padding and overall block height.
+- Scale and position the background vector independently from the text.
+
+### Image/Text Block
+
+- Present the text before the image collage on mobile.
+- Keep the Services and About CTAs side by side.
+- Place the complete image collage below the text and CTAs.
+- Reduce excess space between the collage and the contact block while retaining the reference breathing room.
+
+### Contact Block
+
+- Match the reference card width, height, corner radius, and bottom coral rule.
+- Preserve recognizable photo detail with the reference gradient treatment.
+- Match heading width, line breaks, alignment, and CTA placement.
+- Scale and anchor the linework along the lower portion of the card.
+
+### Our Work
+
+- Match the reference content-first mobile layout and CTA row.
+- Scale the decorative vector independently so its linework matches the reference density.
+- Fully contain both supplied images at mobile sizes.
+- Recreate their reference overlap without clipping either image.
+
+### Footer
+
+- Match the reference mobile structure: logo and back-to-top row, two-column navigation, full-width contact text/details, social row, and centered copyright.
+- Match reference widths, gaps, type scale, icon sizing, and bottom coral border.
+- Continue sourcing navigation, contact information, social links, and copyright text from WordPress.
+
+## Content and Behavior
+
+- Do not change editorial content, links, or WordPress field sources.
+- Preserve existing desktop and tablet-above-767 behavior.
+- Preserve the current accessible Recent Insights carousel behavior.
+- Maintain keyboard navigation, focus visibility, semantic reading order, and sufficient touch targets.
+
+## Verification
+
+- Add Playwright regression coverage at 402px for content order, CTA layout, and key component geometry.
+- Check proportional behavior at 320px and 767px.
+- Add assertions at 768px or wider that guard against mobile overrides leaking into desktop.
+- Run the production CSS build.
+- Run all configured Playwright and axe accessibility tests.
+- Run PHPCS, PHP syntax checks, Prettier, Composer validation, and `git diff --check`.
+- Capture a final 402px full-page screenshot and compare it directly with the supplied section crops.
+
+## Acceptance Criteria
+
+1. At 402px, each listed section visually matches its corresponding crop in `notes/`.
+2. Between 320px and 767px, content remains proportional, readable, unclipped, and operable.
+3. At 768px and above, the existing layout is unchanged.
+4. The image/text block uses text-first order, a side-by-side CTA row, and a complete collage below.
+5. The contact and Our Work vectors and images match the intended crop and containment behavior.
+6. The footer follows the reference hierarchy and alignment.
+7. All configured verification commands pass without accessibility regressions.