Pop semvar up

Reviewed-on: #8
Co-authored-by: mifi <badmf@mifi.dev>
Co-committed-by: mifi <badmf@mifi.dev>

.dockerignore

@@ -0,0 +1,8 @@
+# Preview-only 410 path artifacts (copy-410-paths.mjs).
+# Deploy uses pnpm run build (no copy step); nginx serves 410 via error_page.
+# These dirs exist only when running build-preview for local serve dist.
+dist/pt
+dist/feed
+dist/2024
+dist/category
+dist/comments

.husky/pre-commit

@@ -0,0 +1,4 @@
+# Only run CI tests when files under src/ are changed
+if git diff --cached --name-only | grep -q '^src/'; then
+  pnpm run test:ci
+fi

.woodpecker/deploy.yaml

@@ -20,13 +20,17 @@ steps:
           - /var/run/docker.sock:/var/run/docker.sock
       commands:
           - set -e
+          - apk add --no-cache jq
+          - APP_VERSION=$(jq -r .version package.json | tr -d '\r\n' | sed 's/^v//')
           - echo "=== Building Docker image ==="
           - 'echo "Commit SHA: ${CI_COMMIT_SHA:0:8}"'
           - 'echo "Registry repo: $REGISTRY_REPO"'
+          - 'echo "App version: $APP_VERSION"'
           - |
               docker build \
-                --tag $REGISTRY_REPO:${CI_COMMIT_SHA} \
-                --tag $REGISTRY_REPO:latest \
+                --tag "$REGISTRY_REPO:$CI_COMMIT_SHA" \
+                --tag "$REGISTRY_REPO:latest" \
+                --tag "$REGISTRY_REPO:$APP_VERSION" \
                 --label "git.commit=${CI_COMMIT_SHA}" \
                 --label "git.branch=${CI_COMMIT_BRANCH}" \
                 .
@@ -82,15 +86,19 @@ steps:
           - /var/run/docker.sock:/var/run/docker.sock
       commands:
           - set -e
+          - apk add --no-cache jq
+          - APP_VERSION=$(jq -r .version package.json | tr -d '\r\n' | sed 's/^v//')
           - echo "=== Pushing to registry ==="
           - 'echo "Registry: $REGISTRY_URL"'
           - 'echo "Repository: $REGISTRY_REPO"'
+          - 'echo "App version: $APP_VERSION"'
           - |
               echo "$REGISTRY_PASSWORD" | docker login "$REGISTRY_URL" \
                 -u "$REGISTRY_USERNAME" \
                 --password-stdin
-          - docker push $REGISTRY_REPO:${CI_COMMIT_SHA}
-          - docker push $REGISTRY_REPO:latest
+          - 'docker push $REGISTRY_REPO:$CI_COMMIT_SHA'
+          - 'docker push $REGISTRY_REPO:latest'
+          - 'docker push $REGISTRY_REPO:$APP_VERSION'
           - echo "✓ Images pushed successfully"
       depends_on:
           - 'Docker image build'

AGENTS.md

@@ -10,7 +10,7 @@ This file helps LLM agents work in this repo without introducing anti-patterns.
 ## Stack and architecture
 
 - **Framework**: SvelteKit with **adapter-static**. All routes are prerendered; there is no client-side router or hydration (`csr: false` in `src/routes/+layout.ts`).
-- **Build**: `pnpm run build` = `vite build` → `node scripts/critters.mjs` → `node scripts/minify-static-js.mjs` → `node scripts/copy-410-paths.mjs`. Output is `dist/` (static files only).
+- **Build**: `pnpm run build` = `vite build` → `node scripts/beasties.mjs` → `node scripts/generate-sitemap.mjs` → `node scripts/minify-static-js.mjs`. Output is `dist/` (static files only). Deploy uses this; no 410 path copies. For local preview with 410 URLs working, use `pnpm run build-preview` (adds `copy-410-paths.mjs`). The 410 path dirs are in `.dockerignore` so they are never included in the image.
 - **Runtime**: nginx serves `dist/` (mounted as `/usr/share/nginx/html` in the container). No Node at runtime.
 - **Theming**: CSS only. Light/dark follows **system preference** via `@media (prefers-color-scheme: dark)` in `src/app.css`. There is no JS theme toggle or `data-theme`; do not add one unless explicitly requested.
 - **Fonts**: **Local only.** Inter and Fraunces are served from `static/assets/fonts/` (e.g. `inter-v20-latin-*.woff2`, `fraunces-v38-latin-*.woff2`). Preloads are in `src/routes/+layout.svelte`. Do not add Google Fonts or other external font URLs for the main site or error pages.
@@ -27,21 +27,21 @@ This file helps LLM agents work in this repo without introducing anti-patterns.
 | `src/lib/data/*.ts` | Content and meta (home-meta, content, experience, engagements, json-ld). Edit here for copy or SEO. |
 | `src/lib/seo.ts` | SEO defaults (baseUrl, theme colors, etc.) and `mergeMeta()`. |
 | `static/` | Copied as-is into `dist/` by SvelteKit. Favicon, robots.txt, fonts, images, **404.html**, **410.html**, and **assets/error-pages.css** live here. |
-| `scripts/critters.mjs` | Post-build: inlines critical CSS into **every** `dist/*.html` (including 404 and 410). Resolves stylesheet URLs relative to `dist/`. |
+| `scripts/beasties.mjs` | Post-build: inlines critical CSS into **every** `dist/*.html` (including 404 and 410). Resolves stylesheet URLs relative to `dist/`. |
 | `scripts/minify-static-js.mjs` | Post-build: minifies JS in `dist/assets/`. |
-| `scripts/copy-410-paths.mjs` | Post-build: copies `410.html` to each 410 URL path as `index.html` so static preview (e.g. `serve dist`) shows the 410 page at those URLs; nginx still returns 410 via explicit location blocks. |
+| `scripts/copy-410-paths.mjs` | Run by `build-preview` only: copies `410.html` to each 410 URL path as `index.html` so static preview (e.g. `serve dist`) shows the 410 page at those URLs. Production uses `build` (no copy); nginx returns 410 via explicit location blocks and `error_page 410 /410.html`. |
 | `nginx.conf` | Serves static files; `try_files $uri $uri/ /index.html` for SPA-style fallback; `error_page 404 /404.html` and `error_page 410 /410.html` for custom error pages. |
 
 ## Static error pages (404, 410)
 
 - **Files**: `static/404.html`, `static/410.html`. They are **standalone HTML** (not Svelte). Do not convert them to Svelte routes.
 - **Styling**: Both link to **one** shared stylesheet: `<link rel="stylesheet" href="/assets/error-pages.css">`. All error-page CSS lives in **`static/assets/error-pages.css`** (theme variables for light/dark, local `@font-face` for Inter/Fraunces, layout for `.error-page`). Do not duplicate theme tokens or add inline `<style>` in the HTML; keep a single source in `error-pages.css`.
-- **Critical CSS**: The build runs Critters on all `dist/*.html`. Critters inlines critical CSS from linked stylesheets (including `/assets/error-pages.css`) into 404.html and 410.html. So:
-  - **Do** keep the `<link rel="stylesheet" href="/assets/error-pages.css">` in 404.html and 410.html; Critters will inline it at build time.
+- **Critical CSS**: The build runs Beasties on all `dist/*.html`. Beasties inlines critical CSS from linked stylesheets (including `/assets/error-pages.css`) into 404.html and 410.html. So:
+  - **Do** keep the `<link rel="stylesheet" href="/assets/error-pages.css">` in 404.html and 410.html; Beasties will inline it at build time.
   - **Do not** add error-page-only CSS in `src/app.css`; the app bundle is not loaded on error pages.
 - **Theme alignment**: When changing light/dark colors or typography in `src/app.css`, update **`static/assets/error-pages.css`** so 404/410 stay visually consistent (same `--ep-*` tokens and, if needed, `@media (prefers-color-scheme: dark)`).
 - **Local fonts**: Error pages use the same font paths as the main site (`/assets/fonts/...`) via `@font-face` in `error-pages.css`. Do not use Google Fonts or other external font URLs on error pages.
-- **Preview vs production**: In preview (`serve dist`), the 410 URLs (e.g. `/pt/`, `/feed/`) are served by copying `410.html` to each path as `index.html` (see `scripts/copy-410-paths.mjs`). In production, nginx returns HTTP 410 for those paths and serves the same content via `error_page 410 /410.html`. If you add or remove 410 paths, update both `nginx.conf` and the `PATHS` array in `scripts/copy-410-paths.mjs`.
+- **Preview vs production**: Deploy runs `pnpm run build` (no 410 path copies); the image stays minimal and nginx serves 410 via `error_page 410 /410.html`. For local preview with 410 URLs working, run `pnpm run build-preview` then `serve dist`; the copied `index.html` files under each 410 path are in `.dockerignore` so they are never copied into the image. If you add or remove 410 paths, update `nginx.conf` and the `PATHS` array in `scripts/410-paths.mjs`.
 
 ## Anti-patterns to avoid
 
@@ -54,8 +54,8 @@ This file helps LLM agents work in this repo without introducing anti-patterns.
 3. **External fonts**  
    Do not add `<link>` to Google Fonts (or similar) in layout or error pages. Use local fonts in `static/assets/fonts/` and reference them via preload (layout) or `@font-face` (error-pages.css).
 
-4. **Skipping Critters for new HTML**  
-   Any new `.html` in `static/` is copied to `dist/` and **must** be processed by Critters (the script already runs on all `dist/*.html`). Do not add static HTML that bypasses the build or that uses only inline styles without a linked stylesheet (linked styles get inlined by Critters).
+4. **Skipping Beasties for new HTML**  
+   Any new `.html` in `static/` is copied to `dist/` and **must** be processed by Beasties (the script already runs on all `dist/*.html`). Do not add static HTML that bypasses the build or that uses only inline styles without a linked stylesheet (linked styles get inlined by Beasties).
 
 5. **Diverging error page theme**  
    Do not change 404/410 styling in a way that ignores `static/assets/error-pages.css` or that duplicates theme tokens from `src/app.css` in ad-hoc form. Keep one error-page stylesheet and align its variables with `app.css` when you change the main theme.
@@ -71,5 +71,5 @@ This file helps LLM agents work in this repo without introducing anti-patterns.
 - **Change copy or structure (home)**: `src/lib/data/*.ts`, `src/lib/components/*.svelte`, `src/routes/+page.svelte`.
 - **Change global styles or theme**: `src/app.css`. Then sync **`static/assets/error-pages.css`** if tokens or dark mode change.
 - **Change error page copy or structure**: `static/404.html`, `static/410.html`. Style changes: **`static/assets/error-pages.css`** only.
-- **Add a new static HTML page**: Add it under `static/`, link to `/assets/error-pages.css` (or a dedicated stylesheet that Critters can inline). Ensure `scripts/critters.mjs` runs over all `dist/*.html` (it already does).
+- **Add a new static HTML page**: Add it under `static/`, link to `/assets/error-pages.css` (or a dedicated stylesheet that Beasties can inline). Ensure `scripts/beasties.mjs` runs over all `dist/*.html` (it already does).
 - **Change nginx behavior**: `nginx.conf` (e.g. cache headers, `error_page`, `try_files`).

README.md

@@ -34,10 +34,13 @@ This project uses **pnpm** as the package manager. After cloning, run `pnpm inst
 | `pnpm test`         | Run unit tests (Vitest)                                                        |
 | `pnpm run test:e2e` | Run Playwright visual regression (e2e)                                         |
 | `pnpm run test:e2e:update-snapshots` | Regenerate e2e snapshots (in devcontainer = CI; see Visual regression) |
+| `pnpm run test:ci` | Run same tests as CI: lint, lint:css, unit tests, e2e (used by pre-commit hook) |
 | `pnpm run lint`     | ESLint (JS/TS/Svelte)                                                          |
 | `pnpm run lint:css` | Stylelint (global CSS + Svelte styles)                                         |
 | `pnpm run format`   | Prettier (JS/TS/Svelte/CSS/JSON)                                               |
 
+A **pre-commit hook** (Husky) runs `pnpm run test:ci` so the same tests as CI run before each commit. Skip with `git commit --no-verify` if needed.
+
 ### Option 1: pnpm dev (recommended for editing)
 
 From the project root:
@@ -88,7 +91,7 @@ E2e tests use Playwright and compare full-page screenshots to committed snapshot
 
 **If you’re not using the devcontainer:** run the **update-e2e-snapshots** workflow manually in Woodpecker (requires a `git_push_token` secret), or run `pnpm run test:e2e:update-snapshots` on a host with Docker.
 
-Local `pnpm run test:e2e` on **macOS** uses the Darwin snapshot; the Linux snapshot is used in CI and in the devcontainer.
+**Running e2e locally:** `pnpm run test:e2e` mirrors CI when Docker is available (runs tests in the same Playwright image). Without Docker (e.g. inside the devcontainer), it runs in the current environment. The config uses Linux snapshot paths so baselines stay consistent; run in Docker or devcontainer for matching rendering.
 
 ### Option 4: Docker (Production-like Test)
 
@@ -127,7 +130,7 @@ mifi-ventures-landing/
 ├── svelte.config.js        # SvelteKit config (adapter-static)
 ├── vite.config.ts          # Vite config
 ├── postcss.config.js       # PostCSS (autoprefixer)
-├── scripts/critters.mjs    # Post-build critical CSS inlining
+├── scripts/beasties.mjs    # Post-build critical CSS inlining
 ├── static/                 # Static assets (copied to dist as-is)
 │   ├── favicon.svg, favicon.ico, robots.txt
 │   ├── copyright-year.js   # Minimal client script (footer year)

nginx.conf

@@ -103,9 +103,9 @@ http {
             access_log off;
         }
 
-        # Default location
+        # Default location: try $uri.html so /services serves services.html, /services/foo serves services/foo.html
         location / {
-            try_files $uri $uri/ /index.html;
+            try_files $uri $uri.html $uri/ /index.html;
         }
 
         # 410 Gone: permanently removed URLs (tells crawlers to deindex)

package.json

@@ -1,44 +1,48 @@
 {
     "name": "mifi-ventures-landing",
-    "version": "2.0.0",
+    "version": "4.0.3",
     "private": true,
     "repository": "https://git.mifi.dev/mifi-ventures/landing.git",
-    "packageManager": "pnpm@10.29.3+sha512.498e1fb4cca5aa06c1dcf2611e6fafc50972ffe7189998c409e90de74566444298ffe43e6cd2acdc775ba1aa7cc5e092a8b7054c811ba8c5770f84693d33d2dc",
+    "packageManager": "pnpm@10.31.0+sha512.e3927388bfaa8078ceb79b748ffc1e8274e84d75163e67bc22e06c0d3aed43dd153151cbf11d7f8301ff4acb98c68bdc5cadf6989532801ffafe3b3e4a63c268",
     "description": "mifi Ventures landing site — SvelteKit static build with critical CSS inlining",
     "type": "module",
     "scripts": {
-        "build": "vite build && node scripts/critters.mjs && node scripts/minify-static-js.mjs && node scripts/copy-410-paths.mjs",
+        "build": "vite build && node scripts/beasties.mjs && node scripts/generate-sitemap.mjs && node scripts/minify-static-js.mjs",
+        "build-preview": "pnpm run build && node scripts/copy-410-paths.mjs",
         "dev": "vite dev",
         "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
         "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-        "format": "prettier --write \"src/**/*.{ts,js,svelte,css,json}\"",
+        "format": "prettier --write \"src/**/*.{ts,js,svelte,css,json}\" \"static/**/*.{css,html,js}\"",
         "lint": "eslint .",
         "lint:fix": "eslint . --fix",
-        "lint:css": "stylelint \"src/**/*.css\" \"src/**/*.svelte\"",
-        "lint:css:fix": "stylelint \"src/**/*.css\" \"src/**/*.svelte\" --fix",
+        "lint:css": "stylelint \"src/**/*.css\" \"src/**/*.svelte\" \"static/**/*.css\"",
+        "lint:css:fix": "stylelint \"src/**/*.css\" \"src/**/*.svelte\" \"static/**/*.css\" --fix",
         "preview": "serve dist -p 4173",
         "test": "vitest run",
         "test:unit": "vitest run",
-        "test:e2e": "playwright test",
+        "test:e2e": "bash scripts/run-e2e.sh",
         "test:e2e:update-snapshots": "bash scripts/update-e2e-snapshots.sh",
         "test:all": "vitest run && playwright test",
-        "test:watch": "vitest"
+        "test:ci": "pnpm run lint && pnpm run lint:css && pnpm exec svelte-kit sync && pnpm test && pnpm run test:e2e && pnpm install --config.confirmModulesPurge=false",
+        "test:watch": "vitest",
+        "prepare": "husky"
     },
     "devDependencies": {
-        "@eslint/js": "^9.39.2",
+        "@eslint/js": "^10.0.1",
         "@playwright/test": "^1.58.1",
         "@sveltejs/adapter-static": "^3.0.8",
         "@sveltejs/kit": "^2.15.0",
-        "@sveltejs/vite-plugin-svelte": "^5.0.0",
+        "@sveltejs/vite-plugin-svelte": "^6.2.4",
         "@types/gtag.js": "^0.0.20",
         "@typescript-eslint/eslint-plugin": "^8.54.0",
         "@typescript-eslint/parser": "^8.54.0",
-        "critters": "^0.0.24",
-        "esbuild": "^0.24.0",
-        "eslint": "^9.39.2",
-        "jsdom": "^25.0.0",
+        "beasties": "^0.4.1",
+        "esbuild": "^0.27.3",
+        "eslint": "^10.0.3",
         "eslint-config-prettier": "^10.1.8",
-        "eslint-plugin-svelte": "^3.14.0",
+        "eslint-plugin-svelte": "^3.15.0",
+        "husky": "^9.1.7",
+        "jsdom": "^28.1.0",
         "postcss-html": "^1.8.1",
         "postcss-preset-env": "^11.1.2",
         "prettier": "^3.8.1",
@@ -52,10 +56,10 @@
         "tslib": "^2.8.0",
         "typescript": "^5.7.0",
         "typescript-eslint": "^8.54.0",
-        "vite": "^6.0.0",
+        "vite": "^7.3.1",
         "vitest": "^4.0.18"
     },
     "dependencies": {
-        "@lucide/svelte": "^0.563.1"
+        "@lucide/svelte": "^0.577.0"
     }
 }

playwright.config.ts

@@ -3,6 +3,8 @@ import { defineConfig, devices } from '@playwright/test';
 export default defineConfig({
     testDir: 'tests',
     testMatch: /.*\.spec\.(ts|js)/,
+    // Use linux in snapshot paths so local (darwin) runs compare against the same snapshots as CI.
+    snapshotPathTemplate: '{snapshotDir}/{testFileDir}/{testFileName}-snapshots/{arg}-{projectName}-linux{ext}',
     fullyParallel: true,
     forbidOnly: !!process.env.CI,
     retries: process.env.CI ? 2 : 0,
@@ -13,7 +15,10 @@ export default defineConfig({
         trace: 'on-first-retry',
         screenshot: 'only-on-failure',
     },
-    projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
+    projects: [
+        { name: 'chromium-desktop', use: { ...devices['Desktop Chrome'] } },
+        { name: 'chromium-mobile', use: { ...devices['iPhone 14'] } },
+    ],
     webServer: process.env.CI
         ? undefined
         : {

scripts/410-paths.mjs

@@ -0,0 +1,12 @@
+/**
+ * URL paths that return 410 Gone. Shared by copy-410-paths.mjs and generate-sitemap.mjs.
+ * Keep in sync with nginx.conf location blocks.
+ */
+export const PATHS = [
+    '2024/02/18/hello-world',
+    'pt',
+    'feed',
+    'category/uncategorized/feed',
+    'category/uncategorized',
+    'comments/feed',
+];

scripts/beasties.mjs

@@ -0,0 +1,69 @@
+#!/usr/bin/env node
+/**
+ * Post-build: inline critical CSS in dist/*.html (SvelteKit adapter-static output).
+ * Runs after vite build; Beasties reads/writes relative to dist/.
+ *
+ * Beasties with preload:'default' adds preload tags; same options as legacy Critters.
+ */
+
+import Beasties from 'beasties';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.join(__dirname, '..');
+const DIST = path.join(ROOT, 'dist');
+
+async function main() {
+    if (!fs.existsSync(DIST)) {
+        console.error('dist/ not found. Run vite build first.');
+        process.exit(1);
+    }
+
+    const beasties = new Beasties({
+        path: DIST,
+        preload: 'default',
+        noscriptFallback: true,
+        pruneSource: false,
+        logLevel: 'warn',
+    });
+
+    const rootFiles = fs.readdirSync(DIST)
+        .filter((f) => f.endsWith('.html'))
+        .map((f) => path.join(DIST, f));
+
+    const servicesDir = path.join(DIST, 'services');
+    const serviceFiles = [];
+
+    if (fs.existsSync(servicesDir)) {
+        const walk = (dir) => {
+            for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+                const fullPath = path.join(dir, entry.name);
+                if (entry.isDirectory()) {
+                    walk(fullPath);
+                } else if (entry.isFile() && entry.name.endsWith('.html')) {
+                    serviceFiles.push(fullPath);
+                }
+            }
+        };
+
+        walk(servicesDir);
+    }
+
+    const files = [...rootFiles, ...serviceFiles];
+
+    for (const filePath of files) {
+        let html = fs.readFileSync(filePath, 'utf8');
+        html = await beasties.process(html);
+        fs.writeFileSync(filePath, html, 'utf8');
+        console.log('✓ Critical CSS inlined → dist/' + path.relative(DIST, filePath));
+    }
+
+    console.log('Critical CSS step complete.');
+}
+
+main().catch((err) => {
+    console.error(err);
+    process.exit(1);
+});

scripts/copy-410-paths.mjs

@@ -9,19 +9,12 @@ import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
 
+import { PATHS } from './410-paths.mjs';
+
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const DIST = path.join(__dirname, '..', 'dist');
 const SOURCE = path.join(DIST, '410.html');
 
-const PATHS = [
-    '2024/02/18/hello-world',
-    'pt',
-    'feed',
-    'category/uncategorized/feed',
-    'category/uncategorized',
-    'comments/feed',
-];
-
 function main() {
     if (!fs.existsSync(SOURCE)) {
         console.error('dist/410.html not found. Run build first.');

scripts/critters.mjs

@@ -1,71 +0,0 @@
-#!/usr/bin/env node
-/**
- * Post-build: inline critical CSS in dist/*.html (SvelteKit adapter-static output).
- * Runs after vite build; Critters reads/writes relative to dist/.
- *
- * Critters with preload:'swap' adds onload but does not set rel="preload" as="style",
- * so the link stays render-blocking. We fix that in postProcessSwapLinks().
- */
-
-import Critters from 'critters';
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const ROOT = path.join(__dirname, '..');
-const DIST = path.join(ROOT, 'dist');
-
-/**
- * Critters leaves rel="stylesheet" on swap links; change to rel="preload" as="style"
- * so the full CSS loads async and only applies on load (non-blocking).
- */
-// function postProcessSwapLinks(html) {
-//     return html.replace(/<link\s+([^>]*)>/gi, (full, attrs) => {
-//         if (
-//             !/rel="stylesheet"/i.test(attrs) ||
-//             !/onload="this\.rel='stylesheet'"/i.test(attrs)
-//         ) {
-//             return full;
-//         }
-//         const fixed = attrs
-//             .replace(/\brel="stylesheet"\s*/i, 'rel="preload" as="style" ')
-//             .replace(
-//                 /\bonload="this\.rel='stylesheet'"/i,
-//                 'onload="this.onload=null;this.rel=\'stylesheet\'"',
-//             );
-//         return `<link ${fixed}>`;
-//     });
-// }
-
-async function main() {
-    if (!fs.existsSync(DIST)) {
-        console.error('dist/ not found. Run vite build first.');
-        process.exit(1);
-    }
-
-    const critters = new Critters({
-        path: DIST,
-        preload: 'default',
-        noscriptFallback: true,
-        pruneSource: false,
-        logLevel: 'warn',
-    });
-
-    const files = fs.readdirSync(DIST).filter((f) => f.endsWith('.html'));
-    for (const file of files) {
-        const filePath = path.join(DIST, file);
-        let html = fs.readFileSync(filePath, 'utf8');
-        html = await critters.process(html);
-        // html = postProcessSwapLinks(html);
-        fs.writeFileSync(filePath, html, 'utf8');
-        console.log('✓ Critical CSS inlined → dist/' + file);
-    }
-
-    console.log('Critical CSS step complete.');
-}
-
-main().catch((err) => {
-    console.error(err);
-    process.exit(1);
-});

scripts/generate-sitemap.mjs

@@ -0,0 +1,99 @@
+#!/usr/bin/env node
+/**
+ * Post-build: generate sitemap.xml from prerendered pages in dist/.
+ * Scans for index.html (root and under each path), excludes 410 paths.
+ * Run after vite build and beasties, before copy-410-paths so 410 dirs don't exist yet.
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+import { PATHS as PATHS_410 } from './410-paths.mjs';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const DIST = path.join(__dirname, '..', 'dist');
+
+/** Must match src/lib/seo.ts SEO_DEFAULTS.baseUrl */
+const BASE_URL = 'https://mifi.ventures';
+
+const EXCLUDE_FILES = new Set(['404.html', '410.html']);
+const excludeSet = new Set(PATHS_410);
+
+/**
+ * adapter-static emits path.html or path/index.html. Walk dist and collect
+ * every .html that represents a page (exclude 404/410 and 410-gone paths).
+ */
+function findPages(dir, basePath = '') {
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+    const pages = [];
+
+    for (const e of entries) {
+        const rel = basePath ? `${basePath}/${e.name}` : e.name;
+
+        if (e.isDirectory()) {
+            const indexPath = path.join(dir, e.name, 'index.html');
+            if (fs.existsSync(indexPath)) {
+                if (!excludeSet.has(rel)) {
+                    pages.push({ path: rel, indexPath });
+                }
+            } else {
+                pages.push(...findPages(path.join(dir, e.name), rel));
+            }
+        } else if (e.name.endsWith('.html') && !EXCLUDE_FILES.has(e.name)) {
+            const urlPath = e.name === 'index.html'
+                ? basePath
+                : (basePath ? `${basePath}/${e.name.slice(0, -5)}` : e.name.slice(0, -5));
+            if (!excludeSet.has(urlPath)) {
+                pages.push({ path: urlPath, indexPath: path.join(dir, e.name) });
+            }
+        }
+    }
+
+    return pages;
+}
+
+function escapeXml(s) {
+    return s
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&apos;');
+}
+
+function main() {
+    const indexHtml = path.join(DIST, 'index.html');
+    if (!fs.existsSync(indexHtml)) {
+        console.error('dist/index.html not found. Run build first.');
+        process.exit(1);
+    }
+
+    const pages = findPages(DIST).sort((a, b) => {
+        if (a.path === '') return -1;
+        if (b.path === '') return 1;
+        return a.path.localeCompare(b.path);
+    });
+    const urlElements = [];
+
+    for (const { path: pagePath, indexPath } of pages) {
+        const loc = pagePath ? `${BASE_URL}/${pagePath}` : BASE_URL;
+        const stat = fs.statSync(indexPath);
+        const lastmod = stat.mtime.toISOString().slice(0, 10);
+
+        urlElements.push(
+            `  <url>\n    <loc>${escapeXml(loc)}</loc>\n    <lastmod>${lastmod}</lastmod>\n  </url>`
+        );
+    }
+
+    const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${urlElements.join('\n')}
+</urlset>
+`;
+
+    fs.writeFileSync(path.join(DIST, 'sitemap.xml'), xml, 'utf8');
+    console.log('✓ sitemap.xml generated with', pages.length, 'URLs.');
+}
+
+main();

scripts/minify-static-js.mjs

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 /**
  * Post-build: minify all JS in dist/assets/js/ (static scripts copied from static/assets/js/).
- * Runs after vite build (and optionally after critters). Uses esbuild for minification.
+ * Runs after vite build (and optionally after beasties). Uses esbuild for minification.
  */
 
 import * as esbuild from 'esbuild';

scripts/run-e2e-in-docker.sh

@@ -0,0 +1,28 @@
+#!/usr/bin/env bash
+# Run Playwright e2e tests in the same Docker image as CI (and as snapshot generation).
+# Use when running locally on macOS/Windows so tests mirror CI; in CI or devcontainer use pnpm test:e2e directly.
+set -e
+
+SCRIPT_DIR="${BASH_SOURCE%/*}"
+PROJECT_ROOT="${SCRIPT_DIR}/.."
+cd "$PROJECT_ROOT"
+PROJECT_ROOT="$(pwd)"
+
+PLAYWRIGHT_IMAGE="${PLAYWRIGHT_IMAGE:-mcr.microsoft.com/playwright:v1.58.0-noble}"
+echo "Running e2e tests in Docker image: $PLAYWRIGHT_IMAGE (same as CI)"
+echo "Project root: $PROJECT_ROOT"
+echo ""
+
+docker run --rm \
+  -v "$PROJECT_ROOT:/app" -w /app \
+  -e CI=1 \
+  "$PLAYWRIGHT_IMAGE" \
+  bash -c '
+    corepack enable && corepack prepare pnpm@10.28.2 --activate
+    pnpm install --no-frozen-lockfile || pnpm install
+    pnpm run build
+    npx serve dist -p 4173 &
+    sleep 2
+    pnpm exec playwright test
+    pnpm install --config.confirmModulesPurge=false
+  '

scripts/run-e2e.sh

@@ -0,0 +1,21 @@
+#!/usr/bin/env bash
+# Run Playwright e2e tests. Mirrors CI when possible.
+# - In CI: run playwright test (pipeline already built and started serve).
+# - Local with Docker: run tests in same Playwright image as CI (run-e2e-in-docker.sh).
+# - Local without Docker (e.g. devcontainer): build and run playwright test (webServer in config).
+set -e
+
+if [ -n "$CI" ]; then
+    pnpm exec playwright test
+    exit 0
+fi
+
+if command -v docker >/dev/null 2>&1; then
+    bash "$(dirname "$0")/run-e2e-in-docker.sh"
+    pnpm install --config.confirmModulesPurge=false
+    exit 0
+fi
+
+# No Docker: run in current environment (e.g. devcontainer; same image as CI)
+pnpm run build
+pnpm exec playwright test

scripts/update-e2e-snapshots.sh

@@ -8,6 +8,7 @@ set -e
 SCRIPT_DIR="${BASH_SOURCE%/*}"
 PROJECT_ROOT="${SCRIPT_DIR}/.."
 cd "$PROJECT_ROOT"
+PROJECT_ROOT="$(pwd)"
 
 if command -v docker >/dev/null 2>&1; then
     PLAYWRIGHT_IMAGE="${PLAYWRIGHT_IMAGE:-mcr.microsoft.com/playwright:v1.58.0-noble}"
@@ -27,6 +28,7 @@ if command -v docker >/dev/null 2>&1; then
         sleep 2
         pnpm exec playwright test --update-snapshots
       '
+    pnpm install --config.confirmModulesPurge=false
 else
     echo "Updating snapshots in the current environment (matches CI when using the devcontainer)."
     echo ""

src/app.css

@@ -32,6 +32,7 @@
     --font-family-heading: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
 
     --font-size-base: 18px;
+    --font-size-xs: 14px;
     --font-size-small: 15px;
     --font-size-medium: 16px;
     --font-size-large: 20px;
@@ -130,6 +131,50 @@
     }
 }
 
+/* ========================================
+   Local Font Faces
+   ======================================== */
+
+@font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('/assets/fonts/inter-v20-latin-regular.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('/assets/fonts/inter-v20-latin-500.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('/assets/fonts/inter-v20-latin-700.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: Fraunces;
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('/assets/fonts/fraunces-v38-latin-600.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: Fraunces;
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('/assets/fonts/fraunces-v38-latin-700.woff2') format('woff2');
+}
+
 /* ========================================
    Base Styles
    ======================================== */
@@ -177,6 +222,11 @@ body {
     text-rendering: optimizeLegibility;
 }
 
+strong,
+b {
+    font-weight: var(--font-weight-bold);
+}
+
 /* ========================================
    Skip Link (Accessibility)
    ======================================== */
@@ -323,11 +373,20 @@ a {
    Layout Containers
    ======================================== */
 
+/* Avoid in-page anchor targets sitting under sticky nav */
+[id] {
+    scroll-margin-top: 6rem;
+}
+
 .container {
     width: 100%;
     max-width: var(--max-width);
     margin: 0 auto;
     padding: 0 var(--space-md);
+
+    &.narrow {
+        max-width: var(--max-narrow-width);
+    }
 }
 
 .section {
@@ -373,6 +432,14 @@ a {
     &:active {
         transform: translateY(0);
     }
+
+    &.small {
+        border-radius: var(--border-radius-small);
+        font-size: var(--font-size-xs);
+        min-height: 36px;
+        min-width: fit-content;
+        padding: 0.5rem 1rem;
+    }
 }
 
 .icon-button {
@@ -481,6 +548,52 @@ a {
             top: 0.1em;
         }
     }
+
+    &.ordered {
+        list-style: decimal;
+        padding-left: var(--space-xl);
+
+        & li {
+            padding-left: var(--space-sm);
+
+            &::before {
+                content: none;
+            }
+        }
+    }
+}
+
+/* ========================================
+   Services Landing: Card Grid, Engagements, Ideal
+   ======================================== */
+
+.engagements-list {
+    margin: var(--space-lg) 0;
+
+    & dt {
+        font-weight: var(--font-weight-semibold);
+        color: var(--color-text);
+        margin-top: var(--space-lg);
+        margin-bottom: var(--space-xs);
+
+        &:first-child {
+            margin-top: 0;
+        }
+    }
+
+    & dd {
+        margin: 0 0 0 var(--space-md);
+        color: var(--color-text-secondary);
+        line-height: var(--line-height-relaxed);
+    }
+}
+
+.services-intro {
+    background-color: var(--color-bg-alt);
+}
+
+.services-ideal {
+    background-color: var(--color-bg-alt);
 }
 
 /* ========================================

src/lib/components/Breadcrumbs.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+    interface BreadcrumbItem {
+        label: string;
+        href?: string;
+    }
+
+    const {
+        items = [],
+    }: {
+        items: BreadcrumbItem[];
+    } = $props();
+</script>
+
+<nav class="section breadcrumbs" aria-label="Breadcrumbs">
+    <div class="container">
+        <ol class="list">
+            {#each items as item, index}
+                <li class="item">
+                    {#if item.href}
+                        <a href={item.href}>{item.label}</a>
+                        {#if index < items.length - 1}<span
+                                class="separator"
+                                aria-hidden="true">&gt;</span
+                            >{/if}
+                    {:else}
+                        {item.label}
+                    {/if}
+                </li>
+            {/each}
+        </ol>
+    </div>
+</nav>
+
+<style>
+    .breadcrumbs {
+        padding: var(--space-md) 0;
+        font-size: var(--font-size-small);
+        color: var(--color-text-secondary);
+    }
+
+    .list {
+        display: inline-block;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .item {
+        display: inline;
+    }
+
+    .item a {
+        color: var(--color-text-secondary);
+        text-decoration: none;
+    }
+
+    .separator {
+        font-size: var(--font-size-small);
+        margin-inline: var(--space-xs);
+    }
+</style>

src/lib/components/EngagementsDl.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import type { EngagementItem } from '$lib/types/service-page';
+
+    const {
+        items,
+        sectionId = 'how-engagements-work',
+        headingId = 'engagements-heading',
+        heading = 'How engagements work',
+        intro,
+        outro,
+    }: {
+        items: EngagementItem[];
+        sectionId?: string;
+        headingId?: string;
+        heading?: string;
+        intro?: string;
+        outro?: string;
+    } = $props();
+</script>
+
+<section id={sectionId} class="section" aria-labelledby={headingId}>
+    <div class="container narrow">
+        <h2 id={headingId}>{heading}</h2>
+        {#if intro}
+            <p>{intro}</p>
+        {/if}
+        <dl class="engagements-list">
+            {#each items as item}
+                <dt>{item.term}</dt>
+                <dd>{item.definition}</dd>
+            {/each}
+        </dl>
+        {#if outro}
+            <p>{outro}</p>
+        {/if}
+    </div>
+</section>

src/lib/components/FAQ.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+    import { page } from '$app/state';
+    import type { FaqList } from '$lib/types/faq';
+
+    const BASE = 'https://mifi.ventures';
+    const PAGE_URL = `${BASE}${page.url?.pathname ?? '/'}`;
+
+    const {
+        faqList,
+        title = 'FAQ',
+    }: {
+        faqList: FaqList;
+        title?: string;
+    } = $props();
+
+    const faqPageJsonLd = $derived(
+        JSON.stringify({
+            '@context': 'https://schema.org',
+            '@type': 'FAQPage',
+            '@id': `${PAGE_URL}#faq`,
+            mainEntity: faqList.map((item) => ({
+                '@type': 'Question',
+                name: item.question,
+                acceptedAnswer: {
+                    '@type': 'Answer',
+                    text: item.answer,
+                },
+            })),
+        }),
+    );
+
+    const jsonLdHtml = $derived(
+        faqPageJsonLd
+            ? '<scr' +
+                  'ipt type="application/ld+json">' +
+                  faqPageJsonLd +
+                  '</scr' +
+                  'ipt>'
+            : '',
+    );
+</script>
+
+<section id="faq" class="section faq" aria-labelledby="faq-heading">
+    <div class="container narrow">
+        <h2 id="faq-heading">{title}</h2>
+        <dl class="faq-list">
+            {#each faqList as { question, answer }, index (index)}
+                <dt>{question}</dt>
+                <dd>{answer}</dd>
+            {/each}
+        </dl>
+    </div>
+    {#if jsonLdHtml}
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -- static trusted JSON-LD -->
+        {@html jsonLdHtml}
+    {/if}
+</section>
+
+<style>
+    .faq {
+        background-color: var(--color-bg-alt);
+    }
+
+    .faq-list {
+        margin: 0;
+
+        & dt {
+            font-weight: var(--font-weight-semibold);
+            color: var(--color-text);
+            margin-top: var(--space-xl);
+            margin-bottom: var(--space-sm);
+
+            &:first-child {
+                margin-top: 0;
+            }
+        }
+
+        & dd {
+            margin: 0 0 0 var(--space-md);
+            color: var(--color-text-secondary);
+            line-height: var(--line-height-relaxed);
+            max-width: var(--max-text-width);
+        }
+    }
+</style>

src/lib/components/Footer.svelte

@@ -7,15 +7,17 @@
 <footer class="footer">
     <div class="container">
         <p class="copyright">
-            © <span id="copyright-year">2026</span> mifi Ventures, LLC · Boston, MA
+            © <span id="copyright-year">2026</span> mifi Ventures, LLC. All rights reserved.
         </p>
-        <nav class="footer-links" aria-label="Social media links">
+        <nav class="footer-links footer-links-wrap" aria-label="Footer links">
             <a
                 class="link"
                 href="https://linkedin.com/in/the-mifi"
                 target="_blank"
                 rel="noopener noreferrer"
                 aria-label="LinkedIn profile (opens in new tab)"
+                data-umami-event="footer link"
+                data-umami-event-label="linkedin"
             >
                 <LinkedInIcon size={15} />
                 LinkedIn
@@ -27,12 +29,37 @@
                 target="_blank"
                 rel="noopener noreferrer"
                 aria-label="GitHub profile (opens in new tab)"
+                data-umami-event="footer link"
+                data-umami-event-label="github"
             >
                 <GithubIcon size={15} />
                 GitHub
                 <ExternalLinkIcon aria-label="Opens in new tab" size={15} />
             </a>
+            <a
+                class="link"
+                href="/privacy-policy"
+                data-umami-event="footer link"
+                data-umami-event-label="privacy-policy"
+            >
+                Privacy Policy
+            </a>
+            <a
+                class="link"
+                href="/terms-of-service"
+                data-umami-event="footer link"
+                data-umami-event-label="terms-of-service"
+            >
+                Terms of Service
+            </a>
         </nav>
+        <p class="legal-notice">
+            We improve our products and advertising by using Google Analytics and
+            Microsoft Clarity to see how you use our website. By using our site, you agree
+            that we and Microsoft can collect and use this data. Our <a
+                href="/privacy-policy">privacy policy</a
+            > has more details.
+        </p>
     </div>
 </footer>
 
@@ -52,10 +79,32 @@
         max-width: 100%;
     }
 
+    .footer-links-wrap {
+        flex-wrap: wrap;
+    }
+
     .link {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: var(--space-xs);
     }
+
+    .legal-notice {
+        margin-top: var(--space-md);
+        font-size: var(--font-size-xs);
+        font-weight: var(--font-weight-normal);
+        color: var(--color-text-tertiary);
+        max-width: 100%;
+    }
+
+    .legal-notice a {
+        color: var(--color-primary);
+        text-decoration: underline;
+        text-underline-offset: 0.2em;
+    }
+
+    .legal-notice a:hover {
+        color: var(--color-primary-hover);
+    }
 </style>

src/lib/components/Hero.svelte

@@ -1,37 +1,58 @@
 <script lang="ts">
-    import ExternalLinkIcon from './Icon/ExternalLink.svelte';
-    import FiletypePdfIcon from './Icon/FiletypePdf.svelte';
-    import Logo from './Logo.svelte';
+    import ExternalLinkIcon from '$lib/components/Icon/ExternalLink.svelte';
+
+    interface SecondaryCta {
+        href: string;
+        label: string;
+        umamiEventLabel: string;
+    }
+
+    const {
+        title,
+        subtitle,
+        bookingLinkTitle,
+        bookingLinkUrl,
+        secondaryCta,
+    }: {
+        title: string;
+        subtitle: string;
+        bookingLinkTitle: string;
+        bookingLinkUrl: string;
+        secondaryCta?: SecondaryCta;
+    } = $props();
 </script>
 
 <header id="header" class="hero">
     <div class="container">
-        <Logo />
-        <p class="headline">Software Engineering Consulting</p>
-        <p class="subhead">
-            Principal: Mike Fitzpatrick — senior full-stack engineer and architect helping
-            teams ship reliable, accessible, high-performance web products.
+        <h1 class="title">
+            {title}
+        </h1>
+        <p class="subtitle">
+            {subtitle}
         </p>
         <div class="cta-group">
             <a
-                href="https://cal.mifi.ventures/the-mifi/30min?utm_source=website&utm_medium=cta&utm_campaign=schedule_call&utm_medium=hero_cta"
+                href={bookingLinkUrl}
                 class="btn btn-primary icon-button"
                 target="_blank"
                 rel="noopener noreferrer"
-                aria-label="Schedule a 30-minute intro call (opens in new tab)"
+                aria-label={`${bookingLinkTitle} (opens in new tab)`}
+                data-umami-event="book discovery call"
+                data-umami-event-location="hero"
             >
-                Schedule a 30-minute intro call
+                {bookingLinkTitle}
                 <ExternalLinkIcon aria-label="Opens in new tab" size={17} />
             </a>
-            <a
-                href="/downloads/resume.pdf"
-                class="btn btn-secondary icon-button"
-                download
-                aria-label="Download Mike Fitzpatrick's resume as PDF"
-            >
-                Download resume
-                <FiletypePdfIcon aria-label="PDF format file" size={17} />
-            </a>
+            {#if secondaryCta}
+                <a
+                    href={secondaryCta.href}
+                    class="btn btn-secondary"
+                    data-umami-event={secondaryCta.umamiEventLabel}
+                    data-umami-event-location="hero"
+                >
+                    {secondaryCta.label}
+                </a>
+            {/if}
         </div>
     </div>
 </header>
@@ -42,26 +63,20 @@
         text-align: center;
         background-color: var(--color-bg);
         border-bottom: 1px solid var(--color-border);
-
-        @media (max-width: 768px) {
-            padding: var(--space-xxl) 0 var(--space-xl) 0;
-        }
-
-        @media (max-width: 480px) {
-            padding: var(--space-xl) 0 var(--space-lg) 0;
-        }
     }
 
-    .headline {
+    .title {
         margin-bottom: var(--space-lg);
         font-family: var(--font-family-heading);
-        font-size: var(--font-size-xl);
-        font-weight: var(--font-weight-semibold);
-        color: var(--color-text);
-        letter-spacing: -0.02em;
+        font-size: var(--font-size-xxl);
+        font-weight: var(--font-weight-bold);
+        letter-spacing: -0.03em;
+        max-width: var(--max-text-width);
+        margin-left: auto;
+        margin-right: auto;
     }
 
-    .subhead {
+    .subtitle {
         max-width: var(--max-narrow-width);
         margin: 0 auto var(--space-xl) auto;
         font-size: var(--font-size-large);
@@ -77,8 +92,10 @@
         justify-content: center;
         align-items: center;
         margin-top: var(--space-lg);
+    }
 
-        @media (max-width: 768px) {
+    @media (max-width: 768px) {
+        .cta-group {
             flex-direction: column;
             width: 100%;
         }

src/lib/components/HowWeWork.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-    import { howWeWorkItems } from '$lib/data/content';
-</script>
-
-<section id="how-we-work" class="section" aria-labelledby="how-we-work-heading">
-    <div class="container">
-        <h2 id="how-we-work-heading" class="section-title">How We Work</h2>
-        <ul class="content-list">
-            {#each howWeWorkItems as item (item)}
-                <li>{item}</li>
-            {/each}
-        </ul>
-    </div>
-</section>

src/lib/components/Navigation.svelte

@@ -1,5 +1,23 @@
 <script lang="ts">
+    import { page as pageState } from '$app/state';
     import Wordmark from './Wordmark.svelte';
+
+    const path = $derived(pageState.url?.pathname ?? '/');
+
+    /** Page slug for body class: "page-home" | "page-services" | "page-services-hands-on-saas-architecture-consultant" etc. Set at build time per route; no client JS. */
+    const bodyClass = $derived(
+        path === '/'
+            ? 'page-home'
+            : 'page-' + path.replace(/^\/|\/$/g, '').replace(/\//g, '-'),
+    );
+
+    interface NavigationItem {
+        label: string;
+        href: string;
+        umamiEventLabel: string;
+    }
+
+    const { items = [], page }: { items: NavigationItem[]; page: string } = $props();
 </script>
 
 <nav id="nav" class="nav" aria-label="Main navigation">
@@ -11,8 +29,13 @@
         hidden
     />
     <div class="mobile-nav-header">
-        <span class="mobile nav-header-logo">
-            <Wordmark />
+        <span
+            class={['mobile nav-header-logo', { 'page-home': bodyClass === 'page-home' }]}
+        >
+            <a href="/" class="logo-link">
+                <Wordmark />
+                <span class="sr-only">mifi Ventures home page</span>
+            </a>
         </span>
         <button
             type="button"
@@ -37,25 +60,43 @@
         </button>
     </div>
     <div id="nav-menu" class="nav-menu container">
-        <span class="nav-header-logo desktop">
-            <Wordmark />
+        <span
+            class={[
+                'nav-header-logo desktop',
+                { 'page-home': bodyClass === 'page-home' },
+            ]}
+        >
+            {#if page !== 'home'}
+                <a href="/" class="logo-link">
+                    <Wordmark />
+                    <span class="sr-only">mifi Ventures home page</span>
+                </a>
+            {:else}
+                <Wordmark />
+            {/if}
         </span>
         <ul class="nav-list">
-            <li class="nav-item">
-                <a href="#what-we-do" class="nav-link">Services</a>
-            </li>
-            <li class="nav-item">
-                <a href="#impact" class="nav-link">Impact</a>
-            </li>
-            <li class="nav-item">
-                <a href="#how-we-work" class="nav-link">Process</a>
-            </li>
-            <li class="nav-item">
-                <a href="#schedule" class="nav-link">Contact</a>
-            </li>
+            {#each items as item (item.href)}
+                <li class="nav-item">
+                    <a
+                        href={item.href}
+                        class="nav-link"
+                        data-umami-event="navigation"
+                        data-umami-event-label={item.umamiEventLabel}
+                        data-umami-event-page={page}
+                    >
+                        {item.label}
+                    </a>
+                </li>
+            {/each}
         </ul>
         <div class="nav-item nav-back-to-top">
-            <a href="#header" class="nav-link">Back to top</a>
+            <a
+                href="#header"
+                class="nav-link"
+                data-umami-event="navigation"
+                data-umami-event-label="back to top">Back to top</a
+            >
         </div>
     </div>
 </nav>
@@ -117,6 +158,15 @@
                 display: inline-block;
             }
         }
+
+        & .logo-link {
+            text-decoration: none;
+
+            &:hover {
+                text-decoration: none;
+                border-bottom: none;
+            }
+        }
     }
 
     /* Hamburger toggle: mobile only, animates to X when open */
@@ -221,7 +271,7 @@
 
     .nav-list {
         display: flex;
-        justify-content: center;
+        justify-content: space-between;
         align-items: center;
         list-style: none;
         padding: 0;
@@ -234,7 +284,7 @@
 
     /* Back to top + mobile nav logo: hidden until page is scrolled (CSS scroll-driven animation) */
     .nav-back-to-top,
-    .nav-header-logo {
+    .nav-header-logo.page-home {
         /* Fallback when scroll-driven animations aren’t supported: always visible */
         opacity: 1;
         visibility: visible;
@@ -337,7 +387,7 @@
 
         /* Composited-only animation: opacity only (visibility/pointer-events not animated) */
         .nav-back-to-top,
-        .nav-header-logo {
+        .nav-header-logo.page-home {
             opacity: 0;
             animation: nav-reveal-on-scroll linear;
             animation-timeline: scroll(root block);

src/lib/components/ScheduleSection.svelte

@@ -1,25 +1,65 @@
 <script lang="ts">
     import ExternalLinkIcon from './Icon/ExternalLink.svelte';
+
+    const {
+        title,
+        subtitle,
+        bookingLinkTitle,
+        bookingLinkUrl = 'https://cal.mifi.ventures/the-mifi/30min',
+        showEmailLink = false,
+        showServicesLink = false,
+        sectionId = 'contact',
+        headingId = 'contact-heading',
+    }: {
+        title: string;
+        subtitle: string;
+        bookingLinkTitle: string;
+        bookingLinkUrl?: string;
+        showEmailLink?: boolean;
+        showServicesLink?: boolean;
+        sectionId?: string;
+        headingId?: string;
+    } = $props();
 </script>
 
-<section
-    id="schedule"
-    class="section schedule-section"
-    aria-labelledby="schedule-heading"
->
+<section id={sectionId} class="section schedule-section" aria-labelledby={headingId}>
     <div class="container">
-        <h2 id="schedule-heading" class="section-title">Let's Talk</h2>
-        <p class="schedule-text">Ready to discuss your project?</p>
-        <a
-            href="https://cal.mifi.ventures/the-mifi/30min?utm_source=website&utm_medium=cta&utm_campaign=schedule_call&utm_medium=schedule_section_cta"
-            class="btn btn-primary icon-button"
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label="Schedule a 30-minute intro call (opens in new tab)"
-        >
-            Schedule a 30-minute intro call
-            <ExternalLinkIcon aria-label="Opens in new tab" size={17} />
-        </a>
+        <h2 id={headingId} class="section-title">{title}</h2>
+        <p class="schedule-text">{subtitle}</p>
+        <div class="cta-group">
+            <a
+                href={bookingLinkUrl}
+                class="btn btn-primary icon-button"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Schedule a 30-minute intro call (opens in new tab)"
+                data-umami-event="schedule call"
+                data-umami-event-location="contact section"
+            >
+                {bookingLinkTitle}
+                <ExternalLinkIcon aria-label="Opens in new tab" size={17} />
+            </a>
+            {#if showEmailLink}
+                <a
+                    href="mailto:hello@mifi.ventures"
+                    class="btn btn-secondary"
+                    data-umami-event="email"
+                    data-umami-event-location="contact section"
+                >
+                    Email me
+                </a>
+            {/if}
+            {#if showServicesLink}
+                <a
+                    href="/services"
+                    class="btn btn-secondary"
+                    data-umami-event="view services"
+                    data-umami-event-location="contact section"
+                >
+                    View services
+                </a>
+            {/if}
+        </div>
     </div>
 </section>
 
@@ -35,10 +75,23 @@
         font-weight: var(--font-weight-normal);
         color: var(--color-text-secondary);
         line-height: var(--line-height-relaxed);
-        max-width: 100%;
+        max-width: var(--max-text-width);
+        margin-left: auto;
+        margin-right: auto;
     }
 
-    .btn {
-        margin: 0 auto;
+    .cta-group {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--space-md);
+        justify-content: center;
+        align-items: center;
+    }
+
+    @media (max-width: 768px) {
+        .cta-group {
+            flex-direction: column;
+            width: 100%;
+        }
     }
 </style>

src/lib/components/ServiceSection.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+    import type { ServiceSectionContent } from '$lib/types/service-page';
+
+    const {
+        section,
+    }: {
+        section: ServiceSectionContent;
+    } = $props();
+
+    const headingId = $derived(section.headingId ?? `${section.id}-heading`);
+    const sectionClasses = $derived(
+        ['section', section.sectionClass].filter(Boolean).join(' '),
+    );
+    const containerClass = $derived(
+        section.narrowContainer === false ? 'container' : 'container narrow',
+    );
+    const listClass = $derived(
+        [section.bulletsListClass, 'content-list'].filter(Boolean).join(' '),
+    );
+</script>
+
+<section id={section.id} class={sectionClasses} aria-labelledby={headingId}>
+    <div class={containerClass}>
+        <h2 id={headingId} class={{ 'sr-only': section.headingSrOnly ?? false }}>
+            {section.heading}
+        </h2>
+
+        {#if section.lede}
+            <p>{section.lede}</p>
+        {/if}
+
+        {#each section.paragraphs ?? [] as p}
+            <p>{p}</p>
+        {/each}
+
+        {#each section.subsections ?? [] as sub, subIndex}
+            {@const subId = sub.headingId ?? `${section.id}-sub-${subIndex}`}
+            <h3 id={subId}>{sub.heading}</h3>
+            {#each sub.paragraphs ?? [] as p}
+                <p>{p}</p>
+            {/each}
+            {#if (sub.bullets?.length ?? 0) > 0}
+                <ul class="content-list">
+                    {#each sub.bullets as bullet}
+                        <li>{bullet}</li>
+                    {/each}
+                </ul>
+            {/if}
+        {/each}
+
+        {#if (section.bullets?.length ?? 0) > 0}
+            <ul class={listClass}>
+                {#each section.bullets as bullet}
+                    <li>{bullet}</li>
+                {/each}
+            </ul>
+        {/if}
+
+        {#if (section.orderedBullets?.length ?? 0) > 0}
+            <ol class="content-list ordered">
+                {#each section.orderedBullets as bullet}
+                    <li>{bullet}</li>
+                {/each}
+            </ol>
+        {/if}
+
+        {#each section.trailingParagraphs ?? [] as p}
+            <p>{p}</p>
+        {/each}
+
+        {#if (section.footerLinks?.length ?? 0) > 0}
+            <p>
+                {#each section.footerLinks as link, i}
+                    {#if i > 0}
+                        <span aria-hidden="true"> · </span>
+                    {/if}
+                    <a href={link.href}>{link.label}</a>
+                {/each}
+            </p>
+        {/if}
+    </div>
+</section>

src/lib/components/ServicesCardGrid.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+    import type { ServiceCard } from '$lib/types/service-page';
+
+    const {
+        services,
+        sectionId = 'services-grid',
+        headingId = 'services-heading',
+        heading = 'Services',
+        overview = '',
+        surface = 'bg',
+    }: {
+        services: ServiceCard[];
+        sectionId?: string;
+        headingId?: string;
+        heading?: string;
+        overview?: string;
+        surface?: 'bg' | 'bg-alt';
+    } = $props();
+</script>
+
+<section
+    id={sectionId}
+    class={['section services-grid-section', { 'bg-alt': surface === 'bg-alt' }]}
+    aria-labelledby={headingId}
+>
+    <div class="container">
+        <h2 id={headingId} class="section-title">{heading}</h2>
+        {#if overview}
+            <p class="overview">{overview}</p>
+        {/if}
+        <ul class="services-card-list">
+            {#each services as service (service.href)}
+                <li class={['services-card', { bg: surface === 'bg-alt' }]}>
+                    <h3 class="title">{service.title}</h3>
+                    <p class="desc">{service.description}</p>
+                    <a
+                        href={service.href}
+                        class="link"
+                        data-umami-event="service link"
+                        data-umami-event-label={service.href}
+                    >
+                        Learn more
+                        <span aria-hidden="true">→</span>
+                    </a>
+                </li>
+            {/each}
+        </ul>
+    </div>
+</section>
+
+<style>
+    .services-grid-section {
+        background-color: var(--color-bg);
+
+        &.bg-alt {
+            background-color: var(--color-bg-alt);
+        }
+    }
+
+    .overview {
+        max-width: var(--max-text-width);
+        margin: 0 auto var(--space-xxl) auto;
+        font-size: var(--font-size-base);
+        color: var(--color-text-secondary);
+        line-height: var(--line-height-relaxed);
+        text-align: center;
+    }
+
+    .services-card-list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: grid;
+        gap: var(--space-xl);
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    }
+
+    .services-card {
+        padding: var(--space-xl);
+        background-color: var(--color-bg-alt);
+        border: 1px solid var(--color-border);
+        border-radius: var(--border-radius-medium);
+        display: flex;
+        flex-direction: column;
+
+        &.bg {
+            background-color: var(--color-bg);
+        }
+    }
+
+    .title {
+        margin-bottom: var(--space-md);
+        font-size: var(--font-size-large);
+        font-weight: var(--font-weight-semibold);
+    }
+
+    .desc {
+        flex: 1;
+        margin-bottom: var(--space-lg);
+        font-size: var(--font-size-base);
+        color: var(--color-text-secondary);
+        line-height: var(--line-height-relaxed);
+    }
+
+    .link {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-xs);
+        font-weight: var(--font-weight-semibold);
+
+        & span {
+            margin-left: var(--space-xs);
+        }
+    }
+</style>

src/lib/components/TOC.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+    interface TOCItem {
+        label: string;
+        href: string;
+    }
+
+    const {
+        ariaLabel = 'Page contents',
+        items,
+        title = 'On this page',
+    }: {
+        ariaLabel?: string;
+        items: TOCItem[];
+        title?: string;
+    } = $props();
+</script>
+
+<nav class="section toc" aria-label={ariaLabel}>
+    <div class="container">
+        <h2 class="title">{title}</h2>
+        <ul class="list">
+            {#each items as item}
+                <li><a href={item.href}>{item.label}</a></li>
+            {/each}
+        </ul>
+    </div>
+</nav>
+
+<style>
+    .toc {
+        padding: var(--space-xl) 0;
+        border-bottom: 1px solid var(--color-border);
+    }
+
+    .title {
+        font-size: var(--font-size-large);
+        font-weight: var(--font-weight-semibold);
+        margin-bottom: var(--space-md);
+    }
+
+    .list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--space-sm) var(--space-xl);
+
+        & a {
+            color: var(--color-text-secondary);
+            font-size: var(--font-size-medium);
+
+            &:hover {
+                color: var(--color-primary);
+            }
+        }
+    }
+</style>

src/lib/components/WhatWeDo.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-    import { whatWeDoItems } from '$lib/data/content';
-</script>
-
-<section id="what-we-do" class="section" aria-labelledby="what-we-do-heading">
-    <div class="container">
-        <h2 id="what-we-do-heading" class="section-title">What We Do</h2>
-        <ul class="content-list">
-            {#each whatWeDoItems as item (item)}
-                <li>{item}</li>
-            {/each}
-        </ul>
-    </div>
-</section>

src/lib/components/WhoGrid.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    const {
+        showTitle = false,
+        title = 'Who this is for',
+        whoForList,
+        whoNotList,
+        whoForHeading = 'Good fit',
+        whoNotHeading = 'Who this is not for',
+    }: {
+        title?: string;
+        showTitle?: boolean;
+        whoForList: string[];
+        whoNotList: string[];
+        whoForHeading?: string;
+        whoNotHeading?: string;
+    } = $props();
+</script>
+
+<section id="who-its-for" class="section" aria-labelledby="who-for-heading">
+    <div class="container">
+        <h2 id="who-for-heading" class={['title', { 'sr-only': !showTitle }]}>{title}</h2>
+        <div class="who-grid">
+            <div class="who-block">
+                <h3 id="who-for-list-heading" class="list-heading">{whoForHeading}</h3>
+                <ul class="content-list" aria-labelledby="who-for-list-heading">
+                    {#each whoForList as item, index (index)}
+                        <li>{item}</li>
+                    {/each}
+                </ul>
+            </div>
+            <div class="who-block">
+                <h3 id="who-not-list-heading" class="list-heading">{whoNotHeading}</h3>
+                <ul class="content-list" aria-labelledby="who-not-list-heading">
+                    {#each whoNotList as item, index (index)}
+                        <li>{item}</li>
+                    {/each}
+                </ul>
+            </div>
+        </div>
+    </div>
+</section>
+
+<style>
+    .who-grid {
+        display: grid;
+        gap: var(--space-xxl);
+        grid-template-columns: 1fr 1fr;
+
+        @media (max-width: 768px) {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    .title,
+    .list-heading {
+        font-size: var(--font-size-xl);
+        margin-bottom: var(--space-md);
+    }
+</style>

src/lib/components/home/EngagementsSection.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { engagements } from '$lib/data/engagements';
+    import { engagements } from '$lib/data/home/engagements';
 </script>
 
 <section id="engagements" class="section" aria-labelledby="engagements-heading">

src/lib/components/home/ExperienceSection.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { experienceLogos, experienceTextList } from '$lib/data/experience';
+    import { experienceLogos, experienceTextList } from '$lib/data/home/experience';
 </script>
 
 <section

src/lib/components/home/Hero.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+    import ExternalLinkIcon from '$lib/components/Icon/ExternalLink.svelte';
+    import Logo from '$lib/components/Logo.svelte';
+</script>
+
+<header id="header" class="hero">
+    <div class="container">
+        <Logo />
+        <h2 class="headline">Hands-On Product Architecture for Early-Stage SaaS</h2>
+        <p class="subhead">
+            I help SaaS teams ship quickly without creating frontend debt, architectural
+            drift, or technical complexity that slows iteration later.
+        </p>
+        <p class="supporting">
+            Mike Fitzpatrick — product architect and senior software engineer
+        </p>
+        <div class="cta-group">
+            <a
+                href="https://cal.mifi.ventures/the-mifi/30min?utm_source=website&utm_medium=cta&utm_campaign=schedule_call&utm_content=hero"
+                class="btn btn-primary icon-button"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Schedule a 30-minute intro call (opens in new tab)"
+                data-umami-event="schedule call"
+                data-umami-event-location="hero"
+            >
+                Schedule a 30-minute intro call
+                <ExternalLinkIcon aria-label="Opens in new tab" size={17} />
+            </a>
+            <a
+                href="/services"
+                class="btn btn-secondary"
+                data-umami-event="view services"
+                data-umami-event-location="hero"
+            >
+                View services
+            </a>
+        </div>
+    </div>
+</header>
+
+<style>
+    .hero {
+        padding: var(--space-xxxl) 0 var(--space-xxl) 0;
+        text-align: center;
+        background-color: var(--color-bg);
+        border-bottom: 1px solid var(--color-border);
+
+        @media (max-width: 768px) {
+            padding: var(--space-xxl) 0 var(--space-xl) 0;
+        }
+
+        @media (max-width: 480px) {
+            padding: var(--space-xl) 0 var(--space-lg) 0;
+        }
+    }
+
+    .headline {
+        margin-bottom: var(--space-lg);
+        font-family: var(--font-family-heading);
+        font-size: var(--font-size-xxl);
+        font-weight: var(--font-weight-bold);
+        letter-spacing: -0.03em;
+        color: var(--color-text);
+        line-height: var(--line-height-heading);
+
+        @media (max-width: 768px) {
+            font-size: var(--font-size-xl);
+        }
+    }
+
+    .subhead {
+        max-width: var(--max-narrow-width);
+        margin: 0 auto var(--space-md) auto;
+        font-size: var(--font-size-large);
+        font-weight: var(--font-weight-normal);
+        color: var(--color-text-secondary);
+        line-height: var(--line-height-relaxed);
+    }
+
+    .supporting {
+        margin: 0 auto var(--space-xl) auto;
+        font-size: var(--font-size-base);
+        font-weight: var(--font-weight-medium);
+        color: var(--color-text-tertiary);
+    }
+
+    .cta-group {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--space-md);
+        justify-content: center;
+        align-items: center;
+        margin-top: var(--space-lg);
+
+        @media (max-width: 768px) {
+            flex-direction: column;
+            width: 100%;
+        }
+    }
+</style>

src/lib/components/home/HowWeWork.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import { howIWorkItems } from '$lib/data/home/content';
+</script>
+
+<section id="process" class="section" aria-labelledby="process-heading">
+    <div class="container">
+        <h2 id="process-heading" class="section-title">How I Work</h2>
+        <ul class="content-list">
+            {#each howIWorkItems as item (item)}
+                <li>{item}</li>
+            {/each}
+        </ul>
+    </div>
+</section>

src/lib/components/home/ImpactSection.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { impactItems } from '$lib/data/content';
+    import { impactItems } from '$lib/data/home/content';
 </script>
 
 <section id="impact" class="section" aria-labelledby="impact-heading">

src/lib/components/home/WhatWeDo.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import {
+        whatIHelpTeamsFixIntro,
+        whatIHelpTeamsFixItems,
+    } from '$lib/data/home/content';
+</script>
+
+<section id="what-i-help-fix" class="section" aria-labelledby="what-i-help-fix-heading">
+    <div class="container">
+        <h2 id="what-i-help-fix-heading" class="section-title">What I Help Teams Fix</h2>
+        <p class="what-fix-intro">{whatIHelpTeamsFixIntro}</p>
+        <ul class="content-list">
+            {#each whatIHelpTeamsFixItems as item (item)}
+                <li>{item}</li>
+            {/each}
+        </ul>
+    </div>
+</section>
+
+<style>
+    .what-fix-intro {
+        max-width: var(--max-text-width);
+        margin: 0 auto var(--space-lg) auto;
+    }
+</style>

src/lib/data/content.ts

@@ -1,26 +0,0 @@
-export const whatWeDoItems = [
-    'Product-focused frontend and UI architecture for modern web applications, with an emphasis on clarity, scalability, and long-term maintainability.',
-    'Greenfield product builds and early-stage foundations, getting new projects off the ground quickly with structures designed to grow, not be rewritten.',
-    'Performance, Core Web Vitals, rendering strategy, and technical SEO optimization focused on real-world user journeys—not just lab scores.',
-    'Accessibility-first engineering, ensuring WCAG-compliant interfaces with semantic markup, keyboard parity, and inclusive interaction patterns.',
-    'Modernization and stabilization of existing systems, including refactors, framework upgrades, and untangling overgrown frontend codebases.',
-    'End-to-end feature delivery with clear ownership and documentation, spanning frontend and supporting backend work without unnecessary complexity.',
-];
-
-export const impactItems = [
-    'Get new products off the ground quickly by establishing durable frontend and platform foundations—clean architecture, clear patterns, and pragmatic defaults designed to scale with teams and traffic.',
-    'Improve performance, Core Web Vitals, and technical SEO on high-traffic user journeys through rendering strategy, bundle discipline, and careful attention to real-world loading behavior.',
-    'Build accessibility into core UI systems, not as a retrofit—semantic markup, keyboard parity, and screen reader support baked into reusable components and design patterns.',
-    'Bring order to complex or aging codebases by simplifying structure, reducing duplication, and clarifying ownership, enabling teams to ship confidently without over-engineering.',
-    'Design and evolve shared component libraries and UI systems that improve consistency, velocity, and long-term maintainability across multiple teams.',
-    'Partner closely with product, design, and engineering leadership (including marketing teams and non-technical organizations) to translate goals into shippable systems, balancing speed, quality, and technical risk.',
-];
-
-export const howWeWorkItems = [
-    'Engagements are consulting-led and senior-driven. I work directly with founders, product leaders, marketing teams, and engineering teams—including organizations without in-house technical staff—to establish direction and deliver solutions with a high degree of autonomy.',
-    'Focused, pragmatic scope. Work is scoped to deliver real progress quickly, with an emphasis on building the right foundation rather than over-engineering for hypothetical futures.',
-    'Async-friendly, low-friction communication. Clear written updates, documented decisions, and scheduled calls when they add value—not meetings for their own sake.',
-    'Quality as a default. Accessibility, performance, and maintainability are built into the work from the start, not added later as cleanup.',
-    "Flexible engagement models. Hourly or fixed-scope work depending on clarity and needs; longer-term engagements welcome when there's ongoing product momentum.",
-    'Clean handoff. Code, documentation, and context are left in a state where internal teams—or future vendors—can confidently extend the work without dependency.',
-];

src/lib/data/home-meta.ts

@@ -1,9 +0,0 @@
-import type { PageMeta } from '$lib/seo';
-import { defaultJsonLdGraph } from './json-ld';
-
-export const homeMeta: PageMeta = {
-    title: 'mifi Ventures — Software Engineering Consulting | Boston, MA',
-    description:
-        'Boston-based software engineering consulting. Mike Fitzpatrick helps teams build reliable, accessible, high-performance web applications. Specializing in frontend architecture, performance optimization, and modern web development.',
-    jsonLd: defaultJsonLdGraph,
-};

src/lib/data/home/content.ts

@@ -0,0 +1,27 @@
+export const whatIHelpTeamsFixIntro =
+    'Most early-stage SaaS products do not break because of lack of effort. They break because the foundation was rushed, the frontend was treated as secondary, or complexity arrived before the company was ready for it.';
+
+export const whatIHelpTeamsFixItems = [
+    "Backend-heavy products with frontend foundations that don't scale",
+    'CSS and component systems that slow iteration',
+    'MVPs built quickly but not structured to evolve',
+    'Teams shipping features without architectural guardrails',
+    'Infrastructure and tooling decisions that outpace company stage',
+];
+
+export const impactItems = [
+    'Faster iteration through cleaner frontend systems and reusable components.',
+    'Improved performance, Core Web Vitals, and technical SEO on critical user journeys.',
+    'Accessibility built into core UI systems—semantic markup, keyboard parity, and screen reader support in reusable components.',
+    'Order in complex or aging codebases: simpler structure, less duplication, clearer ownership so teams ship confidently without over-engineering.',
+    'Shared component libraries and UI systems that improve consistency, velocity, and maintainability.',
+    'Stronger technical direction: partnering with product and engineering leadership to translate goals into shippable systems.',
+];
+
+export const howIWorkItems = [
+    'Hands-on and implementation-led, not diagram theater.',
+    'Scoped for real progress, not endless strategy loops.',
+    'Built around clarity, accessibility, and maintainability.',
+    'Flexible engagement models: focused projects, implementation, advisory.',
+    'Documentation and handoff that internal teams can actually use.',
+];

src/lib/data/home/home-meta.ts

@@ -0,0 +1,11 @@
+import type { PageMeta } from '$lib/seo';
+import { baseJsonLdGraph, catalogJsonLdGraph } from '$lib/data/json-ld/baseJsonLdGraphs';
+import { homepageJsonLdGraph } from '$lib/data/json-ld/webpageJsonLdGraphs';
+
+export const homeMeta: PageMeta = {
+    title: 'mifi Ventures — Hands-On Product Architecture for Early-Stage SaaS | Boston, MA',
+    description:
+        'Product architecture and senior software engineering for early-stage SaaS teams. Mike Fitzpatrick works inside your codebase to build foundations that ship fast without structural debt—frontend systems, MVP launch, fractional CTO, and stage-aligned infrastructure.',
+    canonical: 'https://mifi.ventures',
+    jsonLd: [...baseJsonLdGraph, homepageJsonLdGraph, ...catalogJsonLdGraph],
+};

src/lib/data/home/navigation.ts

@@ -0,0 +1,22 @@
+export const items = [
+    {
+        label: 'Services',
+        href: '/services',
+        umamiEventLabel: 'services',
+    },
+    {
+        label: 'Impact',
+        href: '/#impact',
+        umamiEventLabel: 'impact',
+    },
+    {
+        label: 'Process',
+        href: '/#process',
+        umamiEventLabel: 'process',
+    },
+    {
+        label: 'Contact',
+        href: '/#contact',
+        umamiEventLabel: 'contact',
+    },
+];

src/lib/data/home/services.ts

@@ -0,0 +1,26 @@
+export const services = [
+    {
+        title: 'Hands-On SaaS Architecture',
+        description:
+            'Build the foundations that let SaaS products evolve without accumulating structural debt.',
+        href: '/services/hands-on-saas-architecture-consultant',
+    },
+    {
+        title: 'MVP Architecture & Launch',
+        description:
+            'Ship quickly without creating a frontend mess or fragile product foundation.',
+        href: '/services/mvp-architecture-and-launch',
+    },
+    {
+        title: 'Fractional CTO / Technical Partner',
+        description:
+            'Technical leadership for teams that need architectural direction without hiring a full-time CTO.',
+        href: '/services/fractional-cto-for-early-stage-saas',
+    },
+    {
+        title: 'Stage-Aligned Infrastructure',
+        description:
+            "Infrastructure decisions that match your company's stage, without unnecessary SaaS sprawl or cloud complexity.",
+        href: '/services/stage-aligned-infrastructure',
+    },
+];

src/lib/data/json-ld.ts

@@ -1,150 +0,0 @@
-/**
- * Default JSON-LD graph nodes (Organization, Person, WebSite, WebPage, OfferCatalog).
- * Used for the home page; other pages can add or override via meta.jsonLd.
- */
-
-const BASE = 'https://mifi.ventures';
-
-export const defaultJsonLdGraph: Record<string, unknown>[] = [
-    {
-        '@type': 'Organization',
-        '@id': `${BASE}/#organization`,
-        name: 'mifi Ventures, LLC',
-        legalName: 'mifi Ventures, LLC',
-        url: `${BASE}/`,
-        logo: { '@type': 'ImageObject', url: `${BASE}/favicon.svg` },
-        description:
-            'Software engineering consulting specializing in product-focused frontend architecture, performance optimization, and accessibility-first engineering.',
-        founder: { '@id': `${BASE}/#principal` },
-        address: {
-            '@type': 'PostalAddress',
-            addressLocality: 'Boston',
-            addressRegion: 'MA',
-            addressCountry: 'US',
-        },
-        geo: { '@type': 'GeoCoordinates', latitude: 42.360082, longitude: -71.05888 },
-        areaServed: { '@type': 'Country', name: 'United States' },
-        hasOfferCatalog: { '@id': `${BASE}/#services` },
-        sameAs: ['https://www.linkedin.com/in/the-mifi', 'https://github.com/the-mifi'],
-    },
-    {
-        '@type': 'Person',
-        '@id': `${BASE}/#principal`,
-        name: 'Mike Fitzpatrick',
-        jobTitle: 'Principal Software Engineer and Architect',
-        description:
-            'Senior full-stack engineer and architect helping teams ship reliable, accessible, high-performance web products.',
-        url: `${BASE}/`,
-        worksFor: { '@id': `${BASE}/#organization` },
-        knowsAbout: [
-            'Frontend Architecture',
-            'UI Architecture',
-            'React Development',
-            'Web Performance Optimization',
-            'Core Web Vitals',
-            'Technical SEO',
-            'Web Accessibility (WCAG)',
-            'Component Libraries',
-            'Design Systems',
-            'JavaScript',
-            'TypeScript',
-            'Modern Web Development',
-            'Greenfield Product Development',
-            'Legacy System Modernization',
-            'Code Refactoring',
-        ],
-        sameAs: ['https://www.linkedin.com/in/the-mifi', 'https://github.com/the-mifi'],
-    },
-    {
-        '@type': 'WebSite',
-        '@id': `${BASE}/#website`,
-        url: `${BASE}/`,
-        name: 'mifi Ventures',
-        description: 'Software Engineering Consulting — Boston, MA',
-        publisher: { '@id': `${BASE}/#organization` },
-        potentialAction: {
-            '@type': 'ReserveAction',
-            target: {
-                '@type': 'EntryPoint',
-                urlTemplate: 'https://cal.mifi.ventures/the-mifi',
-            },
-            name: 'Schedule a 30-minute intro call',
-        },
-    },
-    {
-        '@type': 'WebPage',
-        '@id': `${BASE}/#webpage`,
-        url: `${BASE}/`,
-        name: 'mifi Ventures — Software Engineering Consulting | Boston, MA',
-        description:
-            'Boston-based software engineering consulting. Mike Fitzpatrick helps teams build reliable, accessible, high-performance web applications.',
-        isPartOf: { '@id': `${BASE}/#website` },
-        about: { '@id': `${BASE}/#organization` },
-        mainEntity: { '@id': `${BASE}/#organization` },
-        primaryImageOfPage: { '@type': 'ImageObject', url: `${BASE}/favicon.svg` },
-        inLanguage: 'en-US',
-    },
-    {
-        '@type': 'OfferCatalog',
-        '@id': `${BASE}/#services`,
-        name: 'Software Engineering Consulting Services',
-        description: 'Consulting services offered by mifi Ventures',
-        numberOfItems: 6,
-        itemListElement: [
-            {
-                '@type': 'Offer',
-                itemOffered: {
-                    '@type': 'Service',
-                    name: 'Frontend and UI Architecture',
-                    description:
-                        'Product-focused frontend and UI architecture for modern web applications, with an emphasis on clarity, scalability, and long-term maintainability.',
-                },
-            },
-            {
-                '@type': 'Offer',
-                itemOffered: {
-                    '@type': 'Service',
-                    name: 'Greenfield Product Development',
-                    description:
-                        'Greenfield product builds and early-stage foundations, getting new projects off the ground quickly with structures designed to grow, not be rewritten.',
-                },
-            },
-            {
-                '@type': 'Offer',
-                itemOffered: {
-                    '@type': 'Service',
-                    name: 'Performance Optimization',
-                    description:
-                        'Performance, Core Web Vitals, rendering strategy, and technical SEO optimization focused on real-world user journeys.',
-                },
-            },
-            {
-                '@type': 'Offer',
-                itemOffered: {
-                    '@type': 'Service',
-                    name: 'Accessibility Engineering',
-                    description:
-                        'Accessibility-first engineering, ensuring WCAG-compliant interfaces with semantic markup, keyboard parity, and inclusive interaction patterns.',
-                },
-            },
-            {
-                '@type': 'Offer',
-                itemOffered: {
-                    '@type': 'Service',
-                    name: 'System Modernization',
-                    description:
-                        'Modernization and stabilization of existing systems, including refactors, framework upgrades, and untangling overgrown frontend codebases.',
-                },
-            },
-            {
-                '@type': 'Offer',
-                itemOffered: {
-                    '@type': 'Service',
-                    name: 'End-to-End Feature Delivery',
-                    description:
-                        'End-to-end feature delivery with clear ownership and documentation, spanning frontend and supporting backend work without unnecessary complexity.',
-                },
-            },
-        ],
-    },
-];

src/lib/data/json-ld/baseJsonLdGraphs.ts

@@ -0,0 +1,190 @@
+import { BASE, PHONE, WORDMARK } from './constants';
+
+/**
+ * Default JSON-LD graph nodes (Organization, Person, WebSite, WebPage,
+ * ProfessionalService, OfferCatalog).
+ *
+ * Used for the home page; other pages can add or override via meta.jsonLd.
+ */
+
+export const baseJsonLdGraph: Record<string, unknown>[] = [
+    {
+        '@type': 'Organization',
+        '@id': `${BASE}/#organization`,
+        name: 'mifi Ventures',
+        legalName: 'mifi Ventures LLC',
+        url: `${BASE}/`,
+        logo: {
+            '@type': 'ImageObject',
+            url: WORDMARK,
+        },
+        image: {
+            '@type': 'ImageObject',
+            url: WORDMARK,
+        },
+        telephone: PHONE,
+        description:
+            'Hands-on product architecture for early-stage SaaS teams: SaaS product architecture, MVP architecture and launch support, fractional CTO guidance, and stage-aligned infrastructure strategy.',
+        founder: { '@id': `${BASE}/#principal` },
+        address: {
+            '@type': 'PostalAddress',
+            addressLocality: 'Boston',
+            addressRegion: 'MA',
+            addressCountry: 'US',
+        },
+        areaServed: { '@type': 'Country', name: 'United States' },
+        hasOfferCatalog: { '@id': `${BASE}/#services` },
+        sameAs: [
+            'https://www.linkedin.com/company/mifi-ventures',
+            'https://github.com/mifi-ventures',
+        ],
+        contactPoint: [
+            {
+                '@type': 'ContactPoint',
+                contactType: 'sales',
+                telephone: PHONE,
+                areaServed: 'US',
+                availableLanguage: ['en'],
+            },
+        ],
+    },
+    {
+        '@type': 'Person',
+        '@id': `${BASE}/#principal`,
+        name: 'Mike Fitzpatrick',
+        jobTitle: 'Product Architect and Senior Software Engineer',
+        description:
+            'Hands-on technical partner for early-stage SaaS teams; works inside codebases to build strong product foundations that ship fast without structural debt.',
+        url: `${BASE}/`,
+        worksFor: { '@id': `${BASE}/#organization` },
+        knowsAbout: [
+            'Product Architecture',
+            'Frontend Architecture',
+            'UI Architecture',
+            'React Development',
+            'JavaScript',
+            'TypeScript',
+            'Component Libraries',
+            'Design Systems',
+            'Design Tokens',
+            'CSS Architecture',
+            'Web Accessibility (WCAG)',
+            'Technical SEO',
+            'Core Web Vitals',
+            'MVP Architecture',
+            'Greenfield Product Development',
+            'Fractional CTO',
+            'Startup Infrastructure Strategy',
+            'Code Refactoring',
+        ],
+        sameAs: [
+            'https://www.linkedin.com/in/the-mifi',
+            'https://github.com/the-mifi',
+            'https://mifi.dev',
+        ],
+    },
+    {
+        '@type': 'WebSite',
+        '@id': `${BASE}/#website`,
+        url: `${BASE}/`,
+        name: 'mifi Ventures',
+        description: 'Hands-on product architecture for early-stage SaaS teams.',
+        publisher: { '@id': `${BASE}/#organization` },
+        image: {
+            '@type': 'ImageObject',
+            url: WORDMARK,
+        },
+        potentialAction: {
+            '@type': 'ReserveAction',
+            target: {
+                '@type': 'EntryPoint',
+                urlTemplate: 'https://cal.mifi.ventures/the-mifi',
+            },
+            name: 'Schedule a 30-minute intro call',
+        },
+    },
+];
+
+export const catalogJsonLdGraph: Record<string, unknown>[] = [
+    {
+        '@type': 'ProfessionalService',
+        '@id': `${BASE}/#professional-service`,
+        name: 'mifi Ventures',
+        url: `${BASE}/`,
+        image: {
+            '@type': 'ImageObject',
+            url: WORDMARK,
+        },
+        logo: {
+            '@type': 'ImageObject',
+            url: WORDMARK,
+        },
+        telephone: PHONE,
+        description:
+            'Hands-on product architecture and senior software engineering for early-stage SaaS teams: SaaS product architecture, MVP architecture and launch, fractional CTO guidance, and stage-aligned infrastructure.',
+        serviceType: [
+            'SaaS Product Architecture',
+            'MVP Architecture and Launch Consulting',
+            'Fractional CTO Services',
+            'Startup Infrastructure Strategy',
+        ],
+        provider: { '@id': `${BASE}/#organization` },
+        address: {
+            '@type': 'PostalAddress',
+            addressLocality: 'Boston',
+            addressRegion: 'MA',
+            addressCountry: 'US',
+        },
+        areaServed: { '@type': 'Country', name: 'United States' },
+    },
+    {
+        '@type': 'OfferCatalog',
+        '@id': `${BASE}/#services`,
+        name: 'SaaS Architecture Services',
+        description:
+            'Consulting services offered by mifi Ventures for early-stage SaaS teams.',
+        numberOfItems: 4,
+        itemListElement: [
+            {
+                '@type': 'Offer',
+                url: `${BASE}/hands-on-saas-architecture-consultant`,
+                itemOffered: {
+                    '@type': 'Service',
+                    name: 'Hands-On SaaS Architecture',
+                    description:
+                        'Hands-on product architecture for early-stage SaaS teams, focused on frontend systems, reusable components, design tokens, accessibility, and scalable foundations for fast iteration.',
+                },
+            },
+            {
+                '@type': 'Offer',
+                url: `${BASE}/mvp-architecture-and-launch`,
+                itemOffered: {
+                    '@type': 'Service',
+                    name: 'MVP Architecture & Launch',
+                    description:
+                        'Architecture and implementation support for early-stage SaaS MVPs that need to ship quickly without creating structural debt, fragile CSS, or difficult-to-extend product foundations.',
+                },
+            },
+            {
+                '@type': 'Offer',
+                url: `${BASE}/fractional-cto-for-early-stage-saas`,
+                itemOffered: {
+                    '@type': 'Service',
+                    name: 'Fractional CTO / Technical Partner',
+                    description:
+                        'Part-time technical leadership for early-stage SaaS teams that need architectural guidance, tradeoff evaluation, and hands-on technical oversight without hiring a full-time CTO.',
+                },
+            },
+            {
+                '@type': 'Offer',
+                url: `${BASE}/stage-aligned-infrastructure`,
+                itemOffered: {
+                    '@type': 'Service',
+                    name: 'Stage-Aligned Infrastructure',
+                    description:
+                        'Infrastructure strategy for early-stage SaaS teams that aligns cloud, SaaS, and deployment decisions with company stage, reducing unnecessary complexity and preserving runway.',
+                },
+            },
+        ],
+    },
+];

src/lib/data/json-ld/constants.ts

@@ -0,0 +1,3 @@
+export const BASE = 'https://mifi.ventures';
+export const WORDMARK = `${BASE}/assets/wordmark.svg`;
+export const PHONE = '+1-888-991-6434';

src/lib/data/json-ld/servicesJsonLdGraphs.ts

@@ -0,0 +1,68 @@
+import { BASE } from './constants';
+
+export const handsOnSaaSArchitectureConsultantServiceJsonLdGraph: Record<
+    string,
+    unknown
+> = {
+    '@type': 'Service',
+    '@id': `${BASE}/hands-on-saas-architecture-consultant#service`,
+    name: 'Hands-On SaaS Architecture',
+    url: `${BASE}/hands-on-saas-architecture-consultant`,
+    description:
+        'Hands-on product architecture for early-stage SaaS teams, focused on frontend systems, reusable components, design tokens, accessibility, and scalable foundations for fast iteration.',
+    serviceType: 'SaaS Product Architecture',
+    provider: { '@id': `${BASE}/#organization` },
+    areaServed: { '@type': 'Country', name: 'United States' },
+    audience: {
+        '@type': 'Audience',
+        audienceType: 'Early-stage SaaS founders and engineering teams',
+    },
+};
+
+export const mvpArchitectureAndLaunchServiceJsonLdGraph: Record<string, unknown> = {
+    '@type': 'Service',
+    '@id': `${BASE}/mvp-architecture-and-launch#service`,
+    name: 'MVP Architecture & Launch',
+    url: `${BASE}/mvp-architecture-and-launch`,
+    description:
+        'Architecture and implementation support for early-stage SaaS MVPs that need to ship quickly without structural debt, fragile CSS, or difficult-to-extend product foundations.',
+    serviceType: 'MVP Architecture and Launch Consulting',
+    provider: { '@id': `${BASE}/#organization` },
+    areaServed: { '@type': 'Country', name: 'United States' },
+    audience: {
+        '@type': 'Audience',
+        audienceType: 'Founder-led SaaS startups and early product teams',
+    },
+};
+
+export const fractionalCtoForEarlyStageSaaSServiceJsonLdGraph: Record<string, unknown> = {
+    '@type': 'Service',
+    '@id': `${BASE}/fractional-cto-for-early-stage-saas#service`,
+    name: 'Fractional CTO / Technical Partner',
+    url: `${BASE}/fractional-cto-for-early-stage-saas`,
+    description:
+        'Part-time technical leadership for early-stage SaaS teams that need architectural guidance, tradeoff evaluation, and hands-on technical oversight without hiring a full-time CTO.',
+    serviceType: 'Fractional CTO Services',
+    provider: { '@id': `${BASE}/#organization` },
+    areaServed: { '@type': 'Country', name: 'United States' },
+    audience: {
+        '@type': 'Audience',
+        audienceType: 'Early-stage SaaS founders and growing engineering teams',
+    },
+};
+
+export const stageAlignedInfrastructureServiceJsonLdGraph: Record<string, unknown> = {
+    '@type': 'Service',
+    '@id': `${BASE}/stage-aligned-infrastructure#service`,
+    name: 'Stage-Aligned Infrastructure',
+    url: `${BASE}/stage-aligned-infrastructure`,
+    description:
+        'Infrastructure strategy for early-stage SaaS teams that aligns cloud, SaaS, and deployment decisions with company stage, reducing unnecessary complexity and preserving runway.',
+    serviceType: 'Startup Infrastructure Strategy',
+    provider: { '@id': `${BASE}/#organization` },
+    areaServed: { '@type': 'Country', name: 'United States' },
+    audience: {
+        '@type': 'Audience',
+        audienceType: 'Early-stage SaaS founders and small engineering teams',
+    },
+};

src/lib/data/json-ld/webpageJsonLdGraphs.ts

@@ -0,0 +1,130 @@
+import { BASE, WORDMARK } from './constants';
+
+export const homepageJsonLdGraph: Record<string, unknown> = {
+    '@type': 'WebPage',
+    '@id': `${BASE}/#webpage`,
+    url: `${BASE}/`,
+    name: 'mifi Ventures | Hands-On Product Architecture for Early-Stage SaaS',
+    description:
+        'Hands-on product architecture for early-stage SaaS teams—SaaS architecture, MVP launch support, fractional CTO guidance, and stage-aligned infrastructure strategy.',
+    isPartOf: { '@id': `${BASE}/#website` },
+    about: { '@id': `${BASE}/#organization` },
+    mainEntity: { '@id': `${BASE}/#organization` },
+    primaryImageOfPage: {
+        '@type': 'ImageObject',
+        url: WORDMARK,
+    },
+    inLanguage: 'en-US',
+};
+
+export const servicesPageJsonLdGraph: Record<string, unknown> = {
+    '@type': 'WebPage',
+    '@id': `${BASE}/services#webpage`,
+    url: `${BASE}/services`,
+    name: 'SaaS Architecture Services | mifi Ventures',
+    description:
+        'Hands-on SaaS architecture consulting for early-stage teams. Services include product architecture, MVP launch support, fractional CTO guidance, and stage-aligned infrastructure strategy.',
+    isPartOf: { '@id': `${BASE}/#website` },
+    about: { '@id': `${BASE}/#organization` },
+    primaryImageOfPage: {
+        '@type': 'ImageObject',
+        url: WORDMARK,
+    },
+    inLanguage: 'en-US',
+};
+
+export const handsOnSaaSArchitectureConsultantPageJsonLdGraph: Record<string, unknown> = {
+    '@type': 'WebPage',
+    '@id': `${BASE}/hands-on-saas-architecture-consultant#webpage`,
+    url: `${BASE}/hands-on-saas-architecture-consultant`,
+    name: 'SaaS Product Architecture Consultant | mifi Ventures',
+    description:
+        'Hands-on product architecture for early-stage SaaS teams. Build frontend foundations that scale with reusable components, design tokens, accessibility, and clean architecture.',
+    isPartOf: { '@id': `${BASE}/#website` },
+    about: { '@id': `${BASE}/#organization` },
+    primaryImageOfPage: {
+        '@type': 'ImageObject',
+        url: WORDMARK,
+    },
+    inLanguage: 'en-US',
+};
+
+export const mvpArchitectureAndLaunchPageJsonLdGraph: Record<string, unknown> = {
+    '@type': 'WebPage',
+    '@id': `${BASE}/mvp-architecture-and-launch#webpage`,
+    url: `${BASE}/mvp-architecture-and-launch`,
+    name: 'MVP Architecture & Launch Consultant | mifi Ventures',
+    description:
+        'Architecture and implementation support for early-stage SaaS MVPs that need to ship quickly without structural debt, fragile CSS, or difficult-to-extend product foundations.',
+    isPartOf: { '@id': `${BASE}/#website` },
+    about: { '@id': `${BASE}/#organization` },
+    primaryImageOfPage: {
+        '@type': 'ImageObject',
+        url: WORDMARK,
+    },
+    inLanguage: 'en-US',
+};
+
+export const fractionalCtoForEarlyStageSaaSPageJsonLdGraph: Record<string, unknown> = {
+    '@type': 'WebPage',
+    '@id': `${BASE}/fractional-cto-for-early-stage-saas#webpage`,
+    url: `${BASE}/fractional-cto-for-early-stage-saas`,
+    name: 'Fractional CTO for Early-Stage SaaS | mifi Ventures',
+    description:
+        'Hands-on technical leadership for early-stage SaaS teams that need architectural guidance, technical tradeoff evaluation, and senior oversight without hiring a full-time CTO.',
+    isPartOf: { '@id': `${BASE}/#website` },
+    about: { '@id': `${BASE}/#organization` },
+    primaryImageOfPage: {
+        '@type': 'ImageObject',
+        url: WORDMARK,
+    },
+    inLanguage: 'en-US',
+};
+
+export const stageAlignedInfrastructurePageJsonLdGraph: Record<string, unknown> = {
+    '@type': 'WebPage',
+    '@id': `${BASE}/stage-aligned-infrastructure#webpage`,
+    url: `${BASE}/stage-aligned-infrastructure`,
+    name: 'Stage-Aligned Infrastructure for Startups | mifi Ventures',
+    description:
+        'Infrastructure strategy for early-stage SaaS teams that aligns cloud, SaaS, and deployment decisions with company stage, reducing unnecessary complexity and preserving runway.',
+    isPartOf: { '@id': `${BASE}/#website` },
+    about: { '@id': `${BASE}/#organization` },
+    primaryImageOfPage: {
+        '@type': 'ImageObject',
+        url: WORDMARK,
+    },
+    inLanguage: 'en-US',
+};
+
+export const privacyPolicyPageJsonLdGraph: Record<string, unknown> = {
+    '@type': 'WebPage',
+    '@id': `${BASE}/privacy-policy#webpage`,
+    url: `${BASE}/privacy-policy`,
+    name: 'Privacy Policy | mifi Ventures',
+    description:
+        'Read the mifi Ventures privacy policy, including how personal information is collected, used, stored, and protected.',
+    isPartOf: { '@id': `${BASE}/#website` },
+    about: { '@id': `${BASE}/#organization` },
+    primaryImageOfPage: {
+        '@type': 'ImageObject',
+        url: WORDMARK,
+    },
+    inLanguage: 'en-US',
+};
+
+export const termsOfServicePageJsonLdGraph: Record<string, unknown> = {
+    '@type': 'WebPage',
+    '@id': `${BASE}/terms-of-service#webpage`,
+    url: `${BASE}/terms-of-service`,
+    name: 'Terms of Service | mifi Ventures',
+    description:
+        'Read the mifi Ventures terms of service, including the terms governing use of the site and consulting services.',
+    isPartOf: { '@id': `${BASE}/#website` },
+    about: { '@id': `${BASE}/#organization` },
+    primaryImageOfPage: {
+        '@type': 'ImageObject',
+        url: WORDMARK,
+    },
+    inLanguage: 'en-US',
+};

src/lib/data/privacy-policy.ts

@@ -0,0 +1,229 @@
+/**
+ * Privacy Policy content for mifi Ventures. Used by /privacy-policy.
+ * Last updated: March 12, 2026. Includes Messaging Policy (SMS) for OpenPhone / A2P compliance; Microsoft Clarity and Google Analytics.
+ */
+
+export interface LegalSectionLink {
+    href: string;
+    label: string;
+}
+
+export interface LegalSection {
+    id: string;
+    heading: string;
+    body: string[];
+    list?: string[];
+    /** Optional links to inject into body paragraphs (URLs in text become <a> with this label) */
+    links?: LegalSectionLink[];
+    /** Numbered sub-sections (e.g. Messaging Policy 1–6) */
+    subsections?: { title: string; body: string[]; list?: string[] }[];
+}
+
+export const privacyPolicy = {
+    title: 'Privacy Policy',
+    lastUpdated: 'March 12, 2026',
+    intro: [
+        'mifi Ventures LLC respects your privacy and is committed to protecting personal information shared through this website and related communications.',
+        'This policy explains what information we collect, how it is used, and how it is protected.',
+    ],
+    sections: [
+        {
+            id: 'information-we-collect',
+            heading: 'Information We Collect',
+            body: [
+                'We may collect limited personal information when you interact with the website or contact us.',
+                'This may include:',
+            ],
+        },
+        {
+            id: 'contact-information',
+            heading: 'Contact Information',
+            body: [],
+            list: ['Name', 'Email address', 'Phone number'],
+        },
+        {
+            id: 'communication-data',
+            heading: 'Communication Data',
+            body: [
+                'Information you provide when contacting us through email, contact forms, or SMS.',
+            ],
+        },
+        {
+            id: 'technical-information',
+            heading: 'Technical Information',
+            body: [
+                'Basic technical information collected through analytics or server logs, such as:',
+            ],
+            list: ['IP address', 'Browser type', 'Pages visited', 'Device type'],
+        },
+        {
+            id: 'technical-information-use',
+            heading: 'Use of technical information',
+            body: [
+                'This information is used only to maintain the website, improve performance, and monitor security.',
+            ],
+        },
+        {
+            id: 'analytics-and-tracking',
+            heading: 'Analytics and Tracking Technologies',
+            body: [
+                'We use a mix of first-party and third-party analytics tools to understand how visitors use this website and to improve our services.',
+                'We use Umami as a first-party analytics tool to measure aggregate usage of this site for internal reporting and performance insights; Umami data is not sold or shared for third-party advertising.',
+                'We partner with Microsoft Clarity and Microsoft Advertising to capture how you use and interact with our website through behavioral metrics, heatmaps, and session replay to improve and market our products and services. Website usage data is captured using first- and third-party cookies and similar tracking technologies to determine the popularity of content and online activity. We also use this information for site optimization, security and fraud detection, and advertising. These third-party tools only run if you consent to non-essential analytics via our cookie banner.',
+                'For more information about how Microsoft collects and uses your data, see the Microsoft Privacy Statement: https://www.microsoft.com/privacy/privacystatement.',
+                'We also use Google Analytics (only if you consent) to collect information about website usage, such as pages visited, time on site, and browser and device information. Google Analytics uses cookies and similar technologies to help us analyze how visitors use the site and to compile aggregated statistics.',
+                'You can learn more about how Google handles data in Google Analytics at: https://policies.google.com/privacy and https://policies.google.com/technologies/partner-sites.',
+                'We store your analytics preference (for example, whether you accepted or rejected non-essential analytics) in a small piece of first-party device storage so we can remember your choice on future visits.',
+            ],
+            links: [
+                {
+                    href: 'https://www.microsoft.com/privacy/privacystatement',
+                    label: 'Microsoft Privacy Statement',
+                },
+                {
+                    href: 'https://policies.google.com/privacy',
+                    label: 'Google Privacy Policy',
+                },
+                {
+                    href: 'https://policies.google.com/technologies/partner-sites',
+                    label: 'How Google uses data from sites and apps',
+                },
+            ],
+        },
+        {
+            id: 'how-we-use',
+            heading: 'How We Use Information',
+            body: ['Information collected may be used to:'],
+            list: [
+                'Respond to inquiries',
+                'Provide consulting or development services',
+                'Communicate with clients',
+                'Improve website functionality',
+                'Maintain security and prevent abuse',
+            ],
+        },
+        {
+            id: 'messaging-policy',
+            heading: 'Messaging Policy (SMS)',
+            body: [
+                'mifi Ventures uses SMS messages only for direct, conversational communication with clients or prospective clients.',
+            ],
+            subsections: [
+                {
+                    title: 'Purpose',
+                    body: ['SMS may be used for:'],
+                    list: [
+                        'Responding to inbound inquiries',
+                        'Scheduling and appointment coordination',
+                        'Project and service-related communication',
+                        'Status updates and time-sensitive notifications requested by the client',
+                    ],
+                },
+                {
+                    title: 'No Marketing / No Sale of Data',
+                    body: [
+                        'We do not send unsolicited marketing text messages. We do not sell, rent, or share phone numbers for marketing purposes.',
+                    ],
+                },
+                {
+                    title: 'Consent',
+                    body: [
+                        'You provide consent by initiating contact with us, requesting communication by text, and/or providing your phone number for communication related to your inquiry or services.',
+                    ],
+                },
+                {
+                    title: 'Opt-Out',
+                    body: [
+                        'You may opt out at any time by replying STOP. After opting out, you will no longer receive SMS messages unless you re-initiate contact.',
+                    ],
+                },
+                {
+                    title: 'Message Frequency and Rates',
+                    body: [
+                        'Message frequency varies depending on the nature of the communication. Standard message and data rates may apply depending on your mobile carrier.',
+                    ],
+                },
+                {
+                    title: 'Support',
+                    body: ['For support, contact: contact@mifi.ventures'],
+                },
+            ],
+        },
+        {
+            id: 'sms-phone-communications',
+            heading: 'SMS and Phone Communications',
+            body: [
+                'If you provide a phone number when contacting us, we may respond via phone call or SMS.',
+                'SMS messages are used only for direct communication with clients or prospective clients, including scheduling, service communication, or responses to inquiries.',
+                'We do not send unsolicited marketing messages.',
+                'You may opt out of SMS communication at any time by replying STOP.',
+            ],
+        },
+        {
+            id: 'data-security',
+            heading: 'Data Security',
+            body: [
+                'mifi Ventures implements reasonable administrative and technical safeguards to protect personal information.',
+                'Security measures may include:',
+            ],
+            list: [
+                'Encrypted website connections (HTTPS)',
+                'Secure hosting infrastructure',
+                'Restricted access to internal systems',
+            ],
+        },
+        {
+            id: 'data-security-note',
+            heading: 'Security limitations',
+            body: [
+                'While we take reasonable precautions, no online system can guarantee absolute security.',
+            ],
+        },
+        {
+            id: 'data-sharing',
+            heading: 'Data Sharing',
+            body: [
+                'mifi Ventures does not sell, rent, or trade personal information.',
+                'Information may be shared only when necessary with trusted service providers that support the operation of the website or business services. These providers are required to protect the confidentiality of the data they process.',
+            ],
+        },
+        {
+            id: 'data-retention',
+            heading: 'Data Retention',
+            body: [
+                'Personal information is retained only for as long as necessary to fulfill communication, operational, or legal obligations.',
+            ],
+        },
+        {
+            id: 'your-rights',
+            heading: 'Your Rights',
+            body: [
+                'Depending on your jurisdiction, you may have the right to: request access to personal data; request correction or deletion of data; withdraw consent for communications.',
+                'If you are located in a region with specific data protection laws (such as the European Economic Area or the United Kingdom), you may have additional rights under those laws; we will handle such requests in line with applicable legal requirements.',
+                'Requests may be submitted using the contact information below.',
+            ],
+            list: [
+                'Request access to personal data',
+                'Request correction or deletion of data',
+                'Withdraw consent for communications',
+            ],
+        },
+        {
+            id: 'policy-updates',
+            heading: 'Policy Updates',
+            body: [
+                'This Privacy Policy may be updated periodically to reflect operational or legal changes. The updated date will appear at the top of the page.',
+            ],
+        },
+        {
+            id: 'contact',
+            heading: 'Contact',
+            body: [
+                'Questions regarding this Privacy Policy may be directed to:',
+                'mifi Ventures LLC',
+                'legal@mifi.ventures',
+                'https://mifi.ventures',
+            ],
+        },
+    ] as LegalSection[],
+};

src/lib/data/services/fractional-cto-for-early-stage-saas/content.ts

@@ -0,0 +1,187 @@
+import type { ServiceDetailContent } from '$lib/types/service-page';
+
+const discoveryCallUrl =
+    'https://cal.mifi.ventures/the-mifi/30min?utm_source=website&utm_medium=cta&utm_campaign=schedule_call&utm_content=fractional_cto_page';
+
+export const pageContent: ServiceDetailContent = {
+    hero: {
+        title: 'Fractional CTO for Early-Stage SaaS',
+        subtitle:
+            'At a certain point, early-stage SaaS teams need more than just developers shipping features. They need someone steering the technical decisions. I work alongside founders and engineers to keep architecture sane, prevent premature complexity, and help teams move fast without creating structural problems.',
+        bookingLinkTitle: 'Book a discovery call',
+        bookingLinkUrl: discoveryCallUrl,
+        secondaryCta: {
+            href: '#approach',
+            label: 'See how I work',
+            umamiEventLabel: 'see how i work',
+        },
+    },
+    tocItems: [
+        { label: 'When teams need technical leadership', href: '#when-teams' },
+        { label: 'The two common failure modes', href: '#failure-modes' },
+        { label: 'What working with me looks like', href: '#approach' },
+        { label: 'What engineering teams notice', href: '#what-changes' },
+        { label: 'Engagement structure', href: '#engagement' },
+        { label: "Who it's for", href: '#who-its-for' },
+        { label: 'FAQ', href: '#faq' },
+        { label: 'Get in touch', href: '#final-cta' },
+    ],
+    navItems: [
+        { label: 'Home', href: '/', umamiEventLabel: 'home' },
+        { label: 'How I work', href: '#approach', umamiEventLabel: 'approach' },
+        { label: 'Engagement', href: '#engagement', umamiEventLabel: 'engagement' },
+        { label: 'FAQ', href: '#faq', umamiEventLabel: 'faq' },
+        {
+            label: 'Book a call',
+            href: `${discoveryCallUrl}-navigation`,
+            umamiEventLabel: 'book-call',
+        },
+    ],
+    sections: [
+        {
+            id: 'when-teams',
+            headingId: 'when-teams-heading',
+            heading: 'When a team needs technical leadership—but not a full-time CTO',
+            paragraphs: [
+                'Most early-stage SaaS companies reach a moment where shipping features is no longer the only challenge. Architecture decisions start to compound. Tooling choices matter. Hiring decisions become technical decisions.',
+                'But hiring a full-time CTO is often premature.',
+                'A fractional CTO provides senior-level guidance without the cost and commitment of a full-time executive.',
+                'Typical signs a team is here:',
+            ],
+            bullets: [
+                'The codebase is growing quickly and architectural decisions are becoming harder to reverse',
+                'Founders want a second opinion on technical tradeoffs',
+                'Engineering teams are shipping but lack architectural guardrails',
+                'Tooling and infrastructure decisions feel arbitrary',
+                'Hiring engineers without a clear technical standard',
+            ],
+        },
+        {
+            id: 'failure-modes',
+            headingId: 'failure-modes-heading',
+            heading: 'The two ways early-stage teams usually get it wrong',
+            paragraphs: ['I see two patterns repeatedly.'],
+            subsections: [
+                {
+                    heading: 'Over-building too early',
+                    paragraphs: [
+                        "Teams adopt infrastructure and services designed for companies ten times their size. They spend time and capital building systems they don't yet need.",
+                    ],
+                },
+                {
+                    heading: 'Shipping chaos',
+                    paragraphs: [
+                        'Other teams rush an MVP by outsourcing development cheaply, producing something that works—but is extremely difficult to iterate on.',
+                    ],
+                },
+            ],
+            trailingParagraphs: [
+                'Healthy early-stage engineering balances both pressures: lean spending with solid foundations.',
+            ],
+            footerLinks: [
+                {
+                    label: 'Hands-on SaaS architecture',
+                    href: '/services/hands-on-saas-architecture-consultant',
+                },
+                {
+                    label: 'MVP architecture and launch',
+                    href: '/services/mvp-architecture-and-launch',
+                },
+                {
+                    label: 'Stage-aligned infrastructure',
+                    href: '/services/stage-aligned-infrastructure',
+                },
+            ],
+        },
+        {
+            id: 'approach',
+            headingId: 'approach-heading',
+            heading: 'What working with me looks like',
+            paragraphs: [
+                'I operate as a technical partner for founders and engineering teams.',
+                'That means I help with both strategic decisions and practical implementation.',
+                'Typical involvement includes:',
+            ],
+            bullets: [
+                'Reviewing architecture decisions before they become expensive mistakes',
+                'Participating in product and roadmap discussions',
+                'Setting architectural guardrails for the engineering team',
+                'Evaluating tooling and infrastructure choices',
+                'Mentoring developers and improving engineering practices',
+                'Refactoring critical parts of the codebase when necessary',
+                'Helping founders understand the technical tradeoffs behind decisions',
+            ],
+            trailingParagraphs: [
+                'I am not a slide-deck CTO. I stay close enough to the code to keep decisions grounded in reality.',
+            ],
+        },
+        {
+            id: 'what-changes',
+            headingId: 'what-changes-heading',
+            heading: 'What changes when technical leadership is present',
+            paragraphs: [
+                'When a team has clear technical leadership, several things happen quickly:',
+            ],
+            bullets: [
+                'Architectural decisions become intentional instead of reactive',
+                'Developers move faster because the system has clearer structure',
+                'Tooling choices become consistent',
+                'Technical discussions shift from opinion to reasoning',
+                'Engineers spend more time building and less time debating direction',
+            ],
+            trailingParagraphs: [
+                'The result is not just cleaner systems—but a calmer engineering culture.',
+            ],
+        },
+        {
+            id: 'engagement',
+            headingId: 'engagement-heading',
+            heading: 'How fractional CTO engagements usually work',
+            paragraphs: [
+                'Engagements are typically structured as a monthly retainer with defined availability.',
+                "Typical involvement ranges between 10–40 hours per month depending on the company's stage and needs.",
+                'This usually includes:',
+            ],
+            bullets: [
+                'Regular founder check-ins',
+                'Engineering architecture reviews',
+                'Product roadmap discussions',
+                'Codebase and system reviews',
+                'Guidance on hiring and technical standards',
+            ],
+            trailingParagraphs: [
+                'The goal is consistent oversight without becoming a bottleneck.',
+            ],
+        },
+    ],
+    who: {
+        whoForList: [
+            'Founder-led SaaS companies',
+            '1–15 engineers',
+            'Teams preparing to scale their product',
+            'Companies that want technical leadership without a full-time CTO',
+        ],
+        whoNotList: [
+            'Companies that already have strong senior technical leadership',
+            'Enterprises needing full-time executive presence',
+            'Teams looking only for implementation without architectural guidance',
+        ],
+    },
+    scheduleCta: {
+        sectionId: 'final-cta',
+        headingId: 'final-cta-heading',
+        title: 'Need a technical adult in the room?',
+        subtitle:
+            'If your team is shipping quickly but architectural decisions are starting to feel heavier, a fractional CTO engagement can provide the guidance needed to keep the system healthy while the product grows.',
+        bookingLinkTitle: 'Book a discovery call',
+        bookingLinkUrl: `${discoveryCallUrl}-schedule-section`,
+        showEmailLink: true,
+    },
+    meta: {
+        title: 'Fractional CTO for Early-Stage SaaS | mifi Ventures',
+        description:
+            'Technical leadership for early-stage SaaS teams that need architectural direction without hiring a full-time CTO. Hands-on guidance that keeps teams shipping while preventing structural mistakes.',
+        jsonLdServiceDescription:
+            'Fractional CTO and technical partner for early-stage SaaS: architectural direction, codebase and tooling guidance, and hands-on leadership without the cost of a full-time CTO. Monthly retainer engagements.',
+    },
+};

src/lib/data/services/fractional-cto-for-early-stage-saas/faq.ts

@@ -0,0 +1,36 @@
+/**
+ * FAQ for the fractional CTO for early-stage SaaS service page.
+ * Single source of truth for both the page content and FAQPage JSON-LD.
+ */
+
+export interface FaqItem {
+    question: string;
+    answer: string;
+}
+
+export const faqItems: FaqItem[] = [
+    {
+        question: 'What does "fractional CTO" actually mean?',
+        answer: 'A fractional CTO is a part-time technical leader who provides CTO-level guidance without the cost of a full-time executive. You get senior architectural direction, decision review, and technical oversight on a retainer basis—typically 10–40 hours per month depending on your stage.',
+    },
+    {
+        question: 'How involved are you in day-to-day engineering?',
+        answer: 'I stay close enough to the code to keep decisions grounded. That means architecture reviews, participation in product and roadmap discussions, and hands-on refactoring when it matters. I’m not a slide-deck CTO—I operate as a technical partner who can both advise and implement.',
+    },
+    {
+        question: 'Can you still contribute code?',
+        answer: 'Yes. I contribute code when it’s the right leverage: critical refactors, foundation work, or examples that set standards for the team. The goal is to improve the system and transfer knowledge, not to become a permanent implementer.',
+    },
+    {
+        question: 'How long do engagements usually last?',
+        answer: 'Engagements are typically ongoing month-to-month. Some teams need fractional leadership for 6–12 months until they hire a full-time CTO; others stay on a retainer longer. We align on goals and revisit as your team grows.',
+    },
+    {
+        question: 'Can you help with hiring engineers?',
+        answer: 'Yes. I help define technical standards, review candidates, and advise on team structure. Hiring decisions are technical decisions—having a clear bar and someone who can assess it makes a big difference.',
+    },
+    {
+        question: 'What tech stacks do you work with?',
+        answer: 'I work with modern web and SaaS stacks—frontend, backend, and infrastructure. The principles of good architecture (separation of concerns, maintainability, stage-appropriate choices) transfer across stacks. We can discuss fit for your stack.',
+    },
+];

src/lib/data/services/hands-on-saas-architecture-consultant/content.ts

@@ -0,0 +1,230 @@
+import type { ServiceDetailContent } from '$lib/types/service-page';
+
+const discoveryCallUrl =
+    'https://cal.mifi.ventures/the-mifi/30min?utm_source=website&utm_medium=cta&utm_campaign=schedule_call&utm_content=hands_on_saas_arch_page';
+
+export const pageContent: ServiceDetailContent = {
+    hero: {
+        title: 'Hands-On Product Architecture for Early-Stage SaaS',
+        subtitle:
+            "Most early-stage teams obsess over backend performance and treat the frontend as a thin layer. That's backwards. The frontend is the product—and if its foundations aren't built to scale, iteration slows, bugs multiply, and shipping becomes stressful. I work inside your codebase to build frontend systems that enable velocity: clean CSS architecture, reusable components, tokenized design systems, and accessibility from day one.",
+        bookingLinkTitle: 'Book a discovery call',
+        bookingLinkUrl: discoveryCallUrl,
+        secondaryCta: {
+            href: '#approach',
+            label: 'See my approach',
+            umamiEventLabel: 'see my approach',
+        },
+    },
+    tocItems: [
+        { label: 'Credibility', href: '#credibility' },
+        { label: 'Why this matters', href: '#why-this-matters' },
+        { label: 'The frontend is the product', href: '#frontend-is-product' },
+        { label: 'What goes wrong', href: '#what-goes-wrong' },
+        { label: 'My approach', href: '#approach' },
+        { label: 'Outcomes', href: '#outcomes' },
+        { label: 'Engagement options', href: '#engagement' },
+        { label: "Who it's for", href: '#who-its-for' },
+        { label: 'FAQ', href: '#faq' },
+        { label: 'Get in touch', href: '#final-cta' },
+    ],
+    navItems: [
+        { label: 'Home', href: '/', umamiEventLabel: 'home' },
+        { label: 'My approach', href: '#approach', umamiEventLabel: 'approach' },
+        { label: 'Outcomes', href: '#outcomes', umamiEventLabel: 'outcomes' },
+        { label: 'Engagement', href: '#engagement', umamiEventLabel: 'engagement' },
+        { label: 'FAQ', href: '#faq', umamiEventLabel: 'faq' },
+        {
+            label: 'Book a call',
+            href: `${discoveryCallUrl}-navigation`,
+            umamiEventLabel: 'book-call',
+        },
+    ],
+    sections: [
+        {
+            id: 'credibility',
+            heading: 'Credibility',
+            headingSrOnly: true,
+            sectionClass: 'service-credibility',
+            narrowContainer: false,
+            bulletsListClass: 'service-credibility__list',
+            bullets: [
+                'Product developer at heart; systems-minded by default',
+                'Frontend foundations: CSS architecture, design tokens, component libraries',
+                'Accessibility-first (bolting it on later is always expensive)',
+                'Stage-aware decisions that preserve runway without slowing shipping',
+            ],
+        },
+        {
+            id: 'why-this-matters',
+            headingId: 'why-heading',
+            heading: "Shipping slows down quietly—until it suddenly doesn't",
+            paragraphs: [
+                "Early-stage SaaS rarely fails because the backend can't handle load. It fails because iteration becomes painful.",
+                'When the frontend is ad hoc—CSS drift, inconsistent components, no tokens, accessibility bolted on later—every new feature costs more than it should. Engineers hesitate to touch code. Small changes break unrelated screens. Design becomes inconsistent. Velocity drops.',
+                'This is not a "design problem." It\'s an architecture problem.',
+            ],
+        },
+        {
+            id: 'frontend-is-product',
+            headingId: 'frontend-heading',
+            heading: 'The frontend is the product',
+            paragraphs: [
+                "Your customers don't experience your database schema. They experience your UI.",
+                "A performant backend matters—but it's not more important than a frontend built for iteration. The frontend drives conversion, communicates trust, and determines how quickly your team can ship new features without breaking old ones.",
+                'If you want to move fast later, you have to build a foundation now.',
+            ],
+        },
+        {
+            id: 'what-goes-wrong',
+            headingId: 'wrong-heading',
+            heading: 'What I see most often',
+            bullets: [
+                'Backend-crafted frontends: functional, but brittle and inconsistent',
+                '"CSS as an afterthought": global overrides, magic numbers, creeping specificity wars',
+                "Component sprawl: dozens of one-off components that can't be reused",
+                'No design tokens: colors, spacing, typography duplicated everywhere',
+                'Accessibility postponed: expensive retrofits, inconsistent semantics',
+                'Rebuilding instead of composing: no "lego system," so iteration is slow and repetitive',
+            ],
+        },
+        {
+            id: 'approach',
+            headingId: 'approach-heading',
+            heading: 'My approach: architecture through implementation',
+            paragraphs: [
+                "I'm not a diagram consultant. I'm hands-on. I get into the codebase and build the foundation your team can extend.",
+                'The goal is simple: make iteration cheap.',
+            ],
+            subsections: [
+                {
+                    heading: '1) Fix the CSS foundation first',
+                    paragraphs: [
+                        'Bad CSS makes everything inconsistent and makes change arduous. I start by establishing a maintainable CSS architecture that supports a coherent visual language and reduces the bug surface area.',
+                    ],
+                },
+                {
+                    heading: '2) Build a reusable component system',
+                    paragraphs: [
+                        'I create a component library that lowers duplication and prevents developers from "re-solving" the same UI problems. This increases speed and improves consistency.',
+                    ],
+                },
+                {
+                    heading: '3) Tokenize the design system',
+                    paragraphs: [
+                        'Design tokens (color, spacing, typography, radii, shadows) allow the brand to evolve without rewrites. You can iterate quickly as you discover what your product should feel like.',
+                    ],
+                },
+                {
+                    heading: '4) Bake in accessibility from day one',
+                    paragraphs: [
+                        'Accessibility isn\'t optional and it isn\'t "later." Bolting it on later is always expensive. Doing it early saves time, improves UX, and strengthens SEO.',
+                    ],
+                },
+                {
+                    heading: '5) Keep the whole system stage-aligned',
+                    paragraphs: [
+                        "I'm pragmatic about tooling. Some things can stay on free tiers early. Some choices should be intentional because migration later is painful. The point is to preserve runway without slowing shipping.",
+                    ],
+                },
+            ],
+            footerLinks: [
+                {
+                    label: 'Fractional CTO for early-stage SaaS',
+                    href: '/services/fractional-cto-for-early-stage-saas',
+                },
+                {
+                    label: 'MVP architecture and launch',
+                    href: '/services/mvp-architecture-and-launch',
+                },
+                {
+                    label: 'Stage-aligned infrastructure',
+                    href: '/services/stage-aligned-infrastructure',
+                },
+            ],
+        },
+        {
+            id: 'outcomes',
+            headingId: 'outcomes-heading',
+            heading: 'What changes when the foundation is right',
+            paragraphs: [
+                "It's all connected—speed, bugs, confidence, and morale are one big ball of yarn. When the frontend foundation is right, the whole system gets calmer.",
+            ],
+            bullets: [
+                'Developers ship faster with less hesitation',
+                'Lower bug rate from fewer one-off implementations',
+                'Cohesive UI and clearer product identity',
+                'Faster design iteration without rewrites',
+                'Accessibility becomes the default, not a retrofit',
+                'SEO improves naturally via good structure and semantics',
+                'Higher release confidence and better team morale',
+            ],
+        },
+        {
+            id: 'engagement',
+            headingId: 'engagement-heading',
+            heading: 'How we can work together',
+            subsections: [
+                {
+                    heading: 'Architecture engagement (high-fee, fixed scope)',
+                    bullets: [
+                        'Codebase review focused on frontend foundations',
+                        'CSS + component audit, prioritized action plan',
+                        'Token strategy and incremental adoption plan',
+                        'Accessibility baseline and standards',
+                        'A roadmap your team can execute',
+                    ],
+                },
+                {
+                    heading: 'Implementation (optional, bounded)',
+                    bullets: [
+                        'Hands-on refactors and foundation building',
+                        'Component library creation and rollout',
+                        'Tokenization and theming support',
+                        "Documentation and handoff so you're not dependent on me",
+                    ],
+                },
+                {
+                    heading: 'Advisory retainer (recurring, low-liability)',
+                    bullets: [
+                        'Regular check-ins to keep architecture clean as you ship',
+                        'Review of component/API decisions and PRs (optional)',
+                        'Guidance on tooling tradeoffs as you grow',
+                        'No 24/7 pager-duty MSP model',
+                    ],
+                },
+            ],
+        },
+    ],
+    who: {
+        whoForHeading: 'Who this is for',
+        whoForList: [
+            'Founder-led SaaS teams',
+            '1–15 engineers (and growing)',
+            'Teams shipping fast but feeling UI/UX friction',
+            'Teams who want adult-level architecture without slowing down',
+        ],
+        whoNotList: [
+            'Organizations looking for pure strategy decks and diagrams',
+            'Teams wanting a long-term embedded full-time DevOps engineer',
+            'Companies needing 24/7 managed hosting with strict SLAs',
+        ],
+    },
+    scheduleCta: {
+        sectionId: 'final-cta',
+        headingId: 'final-cta-heading',
+        title: 'Want to ship faster without frontend debt?',
+        subtitle:
+            "If your UI feels brittle, inconsistent, or slow to evolve, you're not alone—and you don't need a massive rewrite. Let's build a foundation that makes iteration cheap.",
+        bookingLinkTitle: 'Book a discovery call',
+        bookingLinkUrl: `${discoveryCallUrl}-schedule-section`,
+        showEmailLink: true,
+    },
+    meta: {
+        title: 'SaaS Product Architecture Consultant | mifi Ventures',
+        description:
+            'I help early-stage SaaS teams ship faster by building scalable frontend foundations—clean CSS, component libraries, design tokens, and accessibility from day one—so iteration accelerates instead of slowing down.',
+        jsonLdServiceDescription:
+            'Hands-on product architecture for early-stage SaaS: frontend foundations, CSS architecture, component libraries, design tokens, and accessibility from day one. Architecture engagement, implementation support, and advisory retainer.',
+    },
+};

src/lib/data/services/hands-on-saas-architecture-consultant/faq.ts

@@ -0,0 +1,40 @@
+/**
+ * FAQ for the hands-on SaaS architecture consultant service page.
+ * Single source of truth for both the page content and FAQPage JSON-LD.
+ */
+
+export interface FaqItem {
+    question: string;
+    answer: string;
+}
+
+export const faqItems: FaqItem[] = [
+    {
+        question: 'Do you only do frontend?',
+        answer: "No. I'm product-first with backend and infra awareness—but frontend foundations are often the bottleneck for early-stage teams. I focus where the friction is.",
+    },
+    {
+        question: 'Will this slow us down?',
+        answer: 'No. The goal is to make iteration cheaper. A solid foundation reduces rework and lets you ship faster over time.',
+    },
+    {
+        question: 'Do we need a full redesign?',
+        answer: 'Usually no. I take an incremental foundation approach: fix the architecture and systems first, then evolve the UI. Big-bang redesigns are rarely necessary.',
+    },
+    {
+        question: 'What tech stacks do you work with?',
+        answer: 'I work with modern web stacks—React, Vue, Svelte, and similar. The principles (CSS architecture, tokens, components, accessibility) transfer. We can discuss fit for your stack.',
+    },
+    {
+        question: 'How do you handle accessibility?',
+        answer: "Baseline standards (semantic markup, keyboard, focus, ARIA where needed) plus components built accessibly from the start. It's baked into the system, not bolted on.",
+    },
+    {
+        question: 'Can you work with our designer?',
+        answer: 'Yes. Design tokens and a component system give designers and engineers a shared language. I can align with your design process and tools.',
+    },
+    {
+        question: 'Do you offer ongoing support?',
+        answer: 'Yes, via an advisory retainer: regular check-ins, optional PR review, and guidance as you grow. Bounded and lightweight—not a 24/7 MSP model.',
+    },
+];

src/lib/data/services/landing/content.ts

@@ -0,0 +1,103 @@
+import type { ServicesLandingContent } from '$lib/types/service-page';
+
+const discoveryCallUrl =
+    'https://cal.mifi.ventures/the-mifi/30min?utm_source=website&utm_medium=cta&utm_campaign=schedule_call&utm_content=services_landing';
+
+export const pageContent: ServicesLandingContent = {
+    hero: {
+        title: 'Consulting Services',
+        subtitle:
+            'I work with early-stage SaaS teams to build products that ship quickly and evolve cleanly. Engagements range from hands-on architecture work inside your codebase to technical leadership for growing teams.',
+        bookingLinkTitle: 'Schedule a discovery call',
+        bookingLinkUrl: discoveryCallUrl,
+        secondaryCta: {
+            href: '/#process',
+            label: 'See how I work',
+            umamiEventLabel: 'see how i work',
+        },
+    },
+    navItems: [
+        { label: 'Home', href: '/', umamiEventLabel: 'home' },
+        { label: 'Services', href: '#services-grid', umamiEventLabel: 'services' },
+        {
+            label: 'How engagements work',
+            href: '#how-engagements-work',
+            umamiEventLabel: 'engagements',
+        },
+        {
+            label: 'Book a call',
+            href: `${discoveryCallUrl}-navigation`,
+            umamiEventLabel: 'book-call',
+        },
+    ],
+    introParagraphs: [
+        'Early-stage SaaS companies face different technical challenges as they grow. Some need help building their MVP correctly. Others need architectural guidance as complexity increases. Some teams simply need a senior engineer who can step in and stabilize a chaotic codebase.',
+        'The services below represent the most common ways I work with founders and engineering teams.',
+    ],
+    services: [
+        {
+            title: 'Hands-On SaaS Architecture',
+            description:
+                'Build the foundations that allow SaaS products to evolve without accumulating structural debt. I work directly inside your codebase to improve frontend systems, establish reusable components, and create architecture that supports long-term iteration.',
+            href: '/services/hands-on-saas-architecture-consultant',
+        },
+        {
+            title: 'MVP Architecture & Launch',
+            description:
+                "Ship your product quickly without creating a fragile system you'll have to rewrite six months later. I help teams design and build MVPs that are simple, scalable, and structured for rapid iteration.",
+            href: '/services/mvp-architecture-and-launch',
+        },
+        {
+            title: 'Fractional CTO / Technical Partner',
+            description:
+                "Technical leadership for teams that need architectural direction but aren't ready for a full-time CTO. I work alongside founders and engineers to guide system design, evaluate technical decisions, and maintain long-term architectural clarity.",
+            href: '/services/fractional-cto-for-early-stage-saas',
+        },
+        {
+            title: 'Stage-Aligned Infrastructure',
+            description:
+                "Infrastructure decisions should match your company's stage. I help teams avoid unnecessary SaaS sprawl and cloud complexity while building infrastructure that can grow with the product.",
+            href: '/services/stage-aligned-infrastructure',
+        },
+    ],
+    engagementsIntro: 'Most engagements fall into one of three patterns:',
+    engagements: [
+        {
+            term: 'Architecture engagements',
+            definition:
+                'Focused, fixed-scope projects designed to diagnose and correct structural issues in a codebase.',
+        },
+        {
+            term: 'Implementation work',
+            definition: 'Hands-on engineering to build or refactor core product systems.',
+        },
+        {
+            term: 'Advisory retainers',
+            definition:
+                'Ongoing architectural guidance for teams that need senior technical oversight.',
+        },
+    ],
+    engagementsOutro:
+        'Engagements are typically consulting-led and scoped to deliver meaningful progress quickly.',
+    idealClients: [
+        'Founder-led SaaS startups',
+        'Engineering teams with 1–15 developers',
+        'Products that are actively shipping and evolving',
+        'Teams that value thoughtful engineering decisions',
+    ],
+    scheduleCta: {
+        title: 'Not sure which service fits?',
+        subtitle:
+            'Many engagements start with a short conversation about your product and technical challenges. From there we can determine whether architecture work, MVP support, or ongoing technical leadership makes the most sense.',
+        bookingLinkTitle: 'Schedule a discovery call',
+        bookingLinkUrl: `${discoveryCallUrl}-schedule-section`,
+        showEmailLink: true,
+    },
+    meta: {
+        title: 'SaaS Architecture Services | mifi Ventures',
+        description:
+            'Hands-on SaaS architecture consulting for early-stage teams. Services include product architecture, MVP launch support, fractional CTO guidance, and stage-aligned infrastructure strategy.',
+        jsonLdServiceDescription:
+            'SaaS architecture consulting for early-stage teams: hands-on product architecture, MVP launch support, fractional CTO, and stage-aligned infrastructure strategy.',
+    },
+};

src/lib/data/services/mvp-architecture-and-launch/content.ts

@@ -0,0 +1,195 @@
+import type { ServiceDetailContent } from '$lib/types/service-page';
+
+const discoveryCallUrl =
+    'https://cal.mifi.ventures/the-mifi/30min?utm_source=website&utm_medium=cta&utm_campaign=schedule_call&utm_content=mvp_arch_launch_page';
+
+export const pageContent: ServiceDetailContent = {
+    hero: {
+        title: 'MVP Architecture & Launch for Early-Stage SaaS',
+        subtitle:
+            'Shipping fast is good. Shipping chaos is expensive. I help early-stage SaaS teams build MVPs that move quickly without creating frontend debt, fragile CSS, or structural problems that slow iteration six months later.',
+        bookingLinkTitle: 'Book a discovery call',
+        bookingLinkUrl: discoveryCallUrl,
+        secondaryCta: {
+            href: '#approach',
+            label: 'See how I work',
+            umamiEventLabel: 'see how i work',
+        },
+    },
+    tocItems: [
+        { label: 'The common MVP pattern', href: '#common-pattern' },
+        { label: 'What a good MVP foundation looks like', href: '#good-foundation' },
+        { label: 'My approach', href: '#approach' },
+        { label: 'What changes within 1–2 weeks', href: '#what-changes' },
+        { label: 'Engagement options', href: '#engagement' },
+        { label: "Who it's for", href: '#who-its-for' },
+        { label: 'FAQ', href: '#faq' },
+        { label: 'Get in touch', href: '#final-cta' },
+    ],
+    navItems: [
+        { label: 'Home', href: '/', umamiEventLabel: 'home' },
+        { label: 'My approach', href: '#approach', umamiEventLabel: 'approach' },
+        { label: 'Engagement', href: '#engagement', umamiEventLabel: 'engagement' },
+        { label: 'FAQ', href: '#faq', umamiEventLabel: 'faq' },
+        {
+            label: 'Book a call',
+            href: `${discoveryCallUrl}-navigation`,
+            umamiEventLabel: 'book-call',
+        },
+    ],
+    sections: [
+        {
+            id: 'common-pattern',
+            headingId: 'common-pattern-heading',
+            heading: 'Most MVPs are built for speed—few are built for iteration',
+            paragraphs: [
+                'Early MVPs often prioritize backend logic and feature delivery. The frontend becomes an afterthought—functional, but brittle. Six months later, every new feature feels heavier than the last.',
+                'Common symptoms:',
+            ],
+            bullets: [
+                'Poor separation of concerns',
+                'Backend-heavy architecture with fragile UI',
+                'Repeated components instead of reusable systems',
+                'Spaghetti CSS and specificity wars',
+                'Accessibility postponed',
+                '"We\'ll clean it up later" decisions compounding',
+            ],
+            trailingParagraphs: ["Speed isn't the problem. Structure is."],
+        },
+        {
+            id: 'good-foundation',
+            headingId: 'good-foundation-heading',
+            heading: 'MVP does not mean throwaway',
+            paragraphs: ['A well-built MVP is minimal—but intentional.', 'It includes:'],
+            bullets: [
+                'Clear separation between layers',
+                'Reusable, composable frontend components',
+                'Tokenized design systems (color, spacing, typography)',
+                'Clean, maintainable CSS architecture',
+                'Accessibility baked in from day one',
+                'A simple, predictable deployment path',
+            ],
+            trailingParagraphs: [
+                'You can move fast and build correctly at the same time.',
+            ],
+            footerLinks: [
+                {
+                    label: 'Hands-on SaaS architecture',
+                    href: '/services/hands-on-saas-architecture-consultant',
+                },
+                {
+                    label: 'Fractional CTO for early-stage SaaS',
+                    href: '/services/fractional-cto-for-early-stage-saas',
+                },
+                {
+                    label: 'Stage-aligned infrastructure',
+                    href: '/services/stage-aligned-infrastructure',
+                },
+            ],
+        },
+        {
+            id: 'approach',
+            headingId: 'approach-heading',
+            heading: 'Architecture through implementation',
+            paragraphs: [
+                "I don't deliver diagrams and disappear. I work inside your codebase.",
+                'My approach:',
+            ],
+            orderedBullets: [
+                'Fix the CSS foundation first.',
+                'Extract and standardize reusable components.',
+                'Introduce design tokens to prevent duplication.',
+                'Align frontend and backend boundaries.',
+                'Improve accessibility and semantics incrementally.',
+                'Keep shipping while refactoring.',
+            ],
+            trailingParagraphs: ['No rewrite mandates. No velocity freeze.'],
+        },
+        {
+            id: 'what-changes',
+            headingId: 'what-changes-heading',
+            heading: 'What teams notice quickly',
+            paragraphs: [
+                'In most cases, teams feel the difference within 1–2 weeks once foundational issues are corrected.',
+                "You'll see:",
+            ],
+            bullets: [
+                'Faster feature implementation',
+                'Lower bug rates',
+                'More consistent UI',
+                'Safer refactors',
+                'Increased release confidence',
+                'Better team morale',
+            ],
+            trailingParagraphs: [
+                "It's all one big ball of yarn—clean up the foundation and everything moves more smoothly.",
+            ],
+        },
+        {
+            id: 'engagement',
+            headingId: 'engagement-heading',
+            heading: 'How we can work together',
+            subsections: [
+                {
+                    heading: 'MVP Architecture Engagement (fixed scope)',
+                    bullets: [
+                        'Codebase review focused on frontend foundations',
+                        'Structural audit and prioritized roadmap',
+                        'Component system extraction plan',
+                        'CSS cleanup and token strategy',
+                        'Accessibility baseline',
+                    ],
+                },
+                {
+                    heading: 'Hands-On Implementation (optional)',
+                    bullets: [
+                        'Direct refactoring and component system creation',
+                        'Tokenized design system rollout',
+                        'Pairing with your engineers',
+                        'Documentation and knowledge transfer',
+                    ],
+                },
+                {
+                    heading: 'Ongoing Advisory (optional)',
+                    bullets: [
+                        'Periodic architecture reviews',
+                        'Guardrails as you scale',
+                        'Guidance on feature/system tradeoffs',
+                    ],
+                },
+            ],
+        },
+    ],
+    who: {
+        whoForHeading: 'Ideal fit',
+        whoForList: [
+            'Founder-led SaaS teams',
+            '1–10 engineers',
+            'Recently launched MVP',
+            'Feeling UI friction or code fragility',
+            'Want adult-level architecture without slowing down',
+        ],
+        whoNotList: [
+            'Teams who only want features shipped as fast as possible without regard for structure',
+            'Organizations looking purely for architecture slide decks',
+            'Large enterprises needing formal procurement processes',
+        ],
+    },
+    scheduleCta: {
+        sectionId: 'final-cta',
+        headingId: 'final-cta-heading',
+        title: 'Ready to stabilize your MVP?',
+        subtitle:
+            "If your MVP shipped fast but now feels fragile, let's reinforce the foundation before iteration slows further.",
+        bookingLinkTitle: 'Schedule a discovery call',
+        bookingLinkUrl: `${discoveryCallUrl}-schedule-section`,
+        showEmailLink: true,
+    },
+    meta: {
+        title: 'MVP Architecture & Launch Consultant | mifi Ventures',
+        description:
+            'I help early-stage SaaS teams build and stabilize MVPs with clean frontend foundations, reusable components, and scalable architecture—so you can ship fast without creating chaos six months later.',
+        jsonLdServiceDescription:
+            'MVP architecture and launch for early-stage SaaS: clean foundations, reusable components, tokenized design systems, and accessibility from day one. Fixed-scope engagement, hands-on implementation, and optional advisory.',
+    },
+};

src/lib/data/services/mvp-architecture-and-launch/faq.ts

@@ -0,0 +1,40 @@
+/**
+ * FAQ for the MVP architecture and launch service page.
+ * Single source of truth for both the page content and FAQPage JSON-LD.
+ */
+
+export interface FaqItem {
+    question: string;
+    answer: string;
+}
+
+export const faqItems: FaqItem[] = [
+    {
+        question: 'Will this slow us down?',
+        answer: 'No. The goal is to make iteration cheaper. I work incrementally—fixing foundations while you keep shipping. No rewrite mandates, no velocity freeze.',
+    },
+    {
+        question: 'Do we need a full rewrite?',
+        answer: 'Usually no. Most MVPs need structural cleanup and a clear component/CSS strategy, not a from-scratch rebuild. We prioritize the highest-leverage fixes first.',
+    },
+    {
+        question: 'What tech stacks do you work with?',
+        answer: 'I work with modern web stacks—React, Vue, Svelte, and similar. The principles (separation of concerns, tokens, components, accessibility) transfer. We can discuss fit for your stack.',
+    },
+    {
+        question: 'How do you handle accessibility?',
+        answer: 'Accessibility is baked in incrementally: semantic markup, keyboard and focus behavior, and ARIA where needed. Doing it as we refactor is far cheaper than retrofitting later.',
+    },
+    {
+        question: 'Can you work alongside our existing devs?',
+        answer: 'Yes. I pair with your team, document decisions, and hand off so you’re not dependent on me. Knowledge transfer is part of the engagement.',
+    },
+    {
+        question: 'How quickly will we see impact?',
+        answer: 'Most teams feel the difference within 1–2 weeks once foundational issues are addressed: faster feature work, fewer bugs, and safer refactors.',
+    },
+    {
+        question: 'Do you only focus on frontend?',
+        answer: "I'm product-first. Frontend foundations are often the bottleneck for early MVPs, so that's where I focus—but I align with your backend boundaries and deployment so the whole system makes sense.",
+    },
+];

src/lib/data/services/stage-aligned-infrastructure/content.ts

@@ -0,0 +1,185 @@
+import type { ServiceDetailContent } from '$lib/types/service-page';
+
+const discoveryCallUrl =
+    'https://cal.mifi.ventures/the-mifi/30min?utm_source=website&utm_medium=cta&utm_campaign=schedule_call&utm_content=stage_aligned_infra_page';
+
+export const pageContent: ServiceDetailContent = {
+    hero: {
+        title: 'Stage-Aligned Infrastructure for Early-Stage SaaS',
+        subtitle:
+            'Infrastructure should match the stage of your company. Many early SaaS teams inherit complex cloud architectures and SaaS stacks designed for companies ten times their size. The result is predictable: large monthly bills and operational complexity that slows engineering teams down. I help founders design infrastructure that is simple, predictable, and able to evolve as the product grows.',
+        bookingLinkTitle: 'Book a discovery call',
+        bookingLinkUrl: discoveryCallUrl,
+        secondaryCta: {
+            href: '#approach',
+            label: 'See my approach',
+            umamiEventLabel: 'see my approach',
+        },
+    },
+    tocItems: [
+        { label: 'The early-stage infrastructure trap', href: '#trap' },
+        { label: 'The real cost', href: '#real-cost' },
+        { label: 'What stage-aligned looks like', href: '#what-it-looks-like' },
+        { label: 'Seeded cloud', href: '#seeded-cloud' },
+        { label: 'When cloud services make sense', href: '#when-cloud' },
+        { label: 'How I help', href: '#approach' },
+        { label: "Who it's for", href: '#who-its-for' },
+        { label: 'FAQ', href: '#faq' },
+        { label: 'Get in touch', href: '#final-cta' },
+    ],
+    navItems: [
+        { label: 'Home', href: '/', umamiEventLabel: 'home' },
+        { label: 'My approach', href: '#approach', umamiEventLabel: 'approach' },
+        { label: 'FAQ', href: '#faq', umamiEventLabel: 'faq' },
+        {
+            label: 'Book a call',
+            href: `${discoveryCallUrl}-navigation`,
+            umamiEventLabel: 'book-call',
+        },
+    ],
+    sections: [
+        {
+            id: 'trap',
+            headingId: 'trap-heading',
+            heading: 'How early-stage companies end up with enterprise infrastructure',
+            paragraphs: [
+                'Many startups adopt infrastructure patterns designed for much larger organizations.',
+                'Common causes include:',
+            ],
+            bullets: [
+                'Copying architectures from big tech companies',
+                'Following tutorials designed for enterprise-scale systems',
+                'Adding cloud services incrementally without a clear strategy',
+                'Believing that complex infrastructure signals maturity',
+            ],
+            trailingParagraphs: [
+                'The result is often a patchwork of services that are expensive to run and difficult to reason about.',
+            ],
+        },
+        {
+            id: 'real-cost',
+            headingId: 'real-cost-heading',
+            heading: 'The hidden cost of infrastructure complexity',
+            paragraphs: [
+                'Infrastructure complexity has two costs: money and cognitive load.',
+                'Founders frequently notice the first sign when monthly cloud or SaaS bills grow unexpectedly. But the second cost can be even more damaging.',
+                'Engineers begin spending time navigating infrastructure instead of building product. Debugging becomes harder. Deployments become fragile. Small teams are suddenly maintaining systems designed for companies with dedicated platform teams.',
+                'Infrastructure should enable product development, not compete with it.',
+            ],
+        },
+        {
+            id: 'what-it-looks-like',
+            headingId: 'what-heading',
+            heading: 'Infrastructure that grows with the product',
+            paragraphs: [
+                'Stage-aligned infrastructure starts simple and becomes more sophisticated only when necessary.',
+                'For many early products, a straightforward deployment environment can support far more growth than founders expect. Simple environments are easier to understand, easier to maintain, and far less expensive.',
+                'As the product scales, infrastructure can evolve deliberately rather than reactively.',
+                'The goal is not minimalism for its own sake. The goal is intentional complexity.',
+            ],
+        },
+        {
+            id: 'seeded-cloud',
+            headingId: 'seeded-cloud-heading',
+            heading: 'Seeded Cloud Infrastructure',
+            paragraphs: [
+                'I sometimes describe this approach as "seeded cloud."',
+                'Instead of inheriting a massive ecosystem of services from day one, companies plant a small, understandable infrastructure foundation that can grow over time.',
+                'This might include:',
+            ],
+            bullets: [
+                'Simple compute environments',
+                'Predictable deployment pipelines',
+                'Minimal operational overhead',
+                'Tooling chosen for clarity and maintainability',
+            ],
+            trailingParagraphs: [
+                'As the product grows, that foundation can expand naturally into more sophisticated architectures.',
+                'Infrastructure evolves when scale requires it—not before.',
+            ],
+        },
+        {
+            id: 'when-cloud',
+            headingId: 'when-cloud-heading',
+            heading: 'When managed cloud services are the right choice',
+            paragraphs: [
+                'Cloud platforms and SaaS tools exist for good reasons. For some companies and stages they are absolutely the right decision.',
+                'Examples include:',
+            ],
+            bullets: [
+                'Teams operating at significant scale',
+                'Organizations with compliance requirements',
+                'Products requiring specialized infrastructure capabilities',
+                'Companies with dedicated platform engineering teams',
+            ],
+            trailingParagraphs: [
+                'The key is adopting these tools deliberately, not reflexively.',
+            ],
+        },
+        {
+            id: 'approach',
+            headingId: 'approach-heading',
+            heading: 'How I help teams realign their infrastructure',
+            paragraphs: [
+                'My work typically focuses on helping founders and engineering teams simplify their infrastructure while preserving the ability to grow.',
+                'Typical engagements include:',
+            ],
+            bullets: [
+                'Infrastructure audits and simplification',
+                'Evaluating cloud and SaaS tool usage',
+                'Identifying unnecessary complexity',
+                'Designing simpler deployment patterns',
+                'Aligning infrastructure with product stage',
+                'Planning transitions as scale increases',
+            ],
+            trailingParagraphs: [
+                'The goal is not rebuilding everything. The goal is restoring clarity and intentionality.',
+            ],
+            footerLinks: [
+                {
+                    label: 'Hands-on SaaS architecture',
+                    href: '/services/hands-on-saas-architecture-consultant',
+                },
+                {
+                    label: 'MVP architecture and launch',
+                    href: '/services/mvp-architecture-and-launch',
+                },
+                {
+                    label: 'Fractional CTO for early-stage SaaS',
+                    href: '/services/fractional-cto-for-early-stage-saas',
+                },
+            ],
+        },
+    ],
+    who: {
+        whoForHeading: 'Ideal clients',
+        whoForList: [
+            'Founder-led SaaS companies',
+            'Teams with 1–15 engineers',
+            'Startups experiencing growing infrastructure costs',
+            'Companies that feel their infrastructure is more complex than their product requires',
+        ],
+        whoNotList: [
+            'Large enterprises with dedicated platform teams',
+            'Companies already operating at significant infrastructure scale',
+            'Organizations seeking fully managed hosting providers',
+        ],
+    },
+    scheduleCta: {
+        sectionId: 'final-cta',
+        headingId: 'final-cta-heading',
+        title: 'Infrastructure should support your product—not compete with it',
+        subtitle:
+            'If your infrastructure feels more complicated than your product requires, it may be time to simplify. Stage-aligned infrastructure helps teams focus on building features instead of maintaining unnecessary systems.',
+        bookingLinkTitle: 'Schedule a discovery call',
+        bookingLinkUrl: `${discoveryCallUrl}-schedule-section`,
+        showEmailLink: true,
+    },
+    meta: {
+        title: 'Startup Infrastructure Strategy | mifi Ventures',
+        description:
+            "Infrastructure decisions should match your company's stage. I help early-stage SaaS teams avoid unnecessary cloud complexity and SaaS sprawl while building infrastructure foundations that scale with the product.",
+        jsonLdServiceDescription:
+            'Stage-aligned infrastructure for early-stage SaaS: infrastructure audits, simplification, and strategy so complexity matches company stage. Capital efficiency, reduced sprawl, and foundations that evolve with the product.',
+    },
+};

src/lib/data/services/stage-aligned-infrastructure/faq.ts

@@ -0,0 +1,36 @@
+/**
+ * FAQ for the stage-aligned infrastructure service page.
+ * Single source of truth for both the page content and FAQPage JSON-LD.
+ */
+
+export interface FaqItem {
+    question: string;
+    answer: string;
+}
+
+export const faqItems: FaqItem[] = [
+    {
+        question: 'What does stage-aligned infrastructure mean?',
+        answer: 'Infrastructure complexity should grow with your company’s stage—not ahead of it. Stage-aligned infrastructure starts simple and intentional, then evolves deliberately when scale, compliance, or team size justify it. The goal is to avoid overbuilding too early while keeping a foundation that can grow.',
+    },
+    {
+        question: 'Are you anti-cloud?',
+        answer: 'No. Cloud and managed services are the right choice for many companies at the right stage. I’m pragmatic: the question is whether your current complexity matches your actual needs. Adopting cloud services deliberately, when they’re justified, is different from inheriting enterprise patterns by default.',
+    },
+    {
+        question: 'Can simple infrastructure really support a growing SaaS product?',
+        answer: 'Yes. Many early-stage products are surprised by how much a straightforward deployment environment can support. Simple systems are easier to maintain, cheaper to run, and leave more time for building product. You add complexity when scale or requirements demand it—not before.',
+    },
+    {
+        question: 'When should startups adopt more advanced cloud architectures?',
+        answer: 'When compliance, team size, availability requirements, or scale justify the cost and operational burden. There’s no single threshold—it’s about aligning infrastructure with real needs. The goal is to adopt advanced tooling intentionally, with clear reasons, rather than by default.',
+    },
+    {
+        question: 'Can you work with our existing infrastructure?',
+        answer: 'Yes. Most engagements focus on auditing and simplifying what you already have—identifying unnecessary complexity, consolidating tooling, and designing clearer deployment patterns. The goal is restoring clarity and intentionality, not rebuilding everything from scratch.',
+    },
+    {
+        question: 'How quickly can infrastructure complexity be reduced?',
+        answer: 'It depends on the current state, but many teams see a clear path within the first engagement. Simplification is often incremental: we prioritize the highest-impact changes first and plan transitions so the team can keep shipping while complexity is reduced.',
+    },
+];

src/lib/data/terms-of-service.ts

@@ -0,0 +1,115 @@
+/**
+ * Terms of Service content for mifi Ventures. Used by /terms-of-service.
+ * Last updated: March 12, 2026. OpenPhone / A2P messaging compliance; data protection positioning.
+ */
+
+export interface LegalSection {
+    id: string;
+    heading: string;
+    body: string[];
+    list?: string[];
+}
+
+export const termsOfService = {
+    title: 'Terms of Service',
+    lastUpdated: 'March 12, 2026',
+    intro: [
+        'These Terms of Service govern the use of the website operated by mifi Ventures LLC ("mifi Ventures", "we", "our", or "us").',
+        'By accessing or using this website, you agree to these terms. If you do not agree, you should not use this website.',
+    ],
+    sections: [
+        {
+            id: 'services',
+            heading: 'Services',
+            body: [
+                'mifi Ventures provides consulting, software development, technical architecture, and related professional services. The information presented on this website is for informational purposes and may be updated or modified at any time.',
+                'Use of the website does not create a client relationship unless explicitly established through a written agreement.',
+            ],
+        },
+        {
+            id: 'client-communications',
+            heading: 'Client Communications',
+            body: [
+                'If you contact mifi Ventures through this website, email, phone, or other communication channels, you consent to receiving responses related to your inquiry.',
+                'These communications may include:',
+            ],
+            list: ['Email', 'Phone calls', 'SMS or text messages'],
+        },
+        {
+            id: 'client-communications-sms',
+            heading: 'SMS and text messages',
+            body: [
+                'SMS messages are used solely for direct communication with clients or prospective clients. These may include scheduling messages, project communications, or responses to inquiries.',
+                'mifi Ventures does not send unsolicited marketing text messages and does not sell or share phone numbers for marketing purposes.',
+                'Message frequency varies depending on the nature of the communication. Standard messaging and data rates may apply depending on your mobile carrier.',
+                'You may opt out of SMS communications at any time by replying STOP.',
+            ],
+        },
+        {
+            id: 'acceptable-use',
+            heading: 'Acceptable Use',
+            body: ['Users of this website agree not to:'],
+            list: [
+                'Use the website for unlawful purposes',
+                'Attempt to gain unauthorized access to systems or data',
+                'Interfere with the operation or security of the website',
+                'Use automated tools to scrape or harvest data from the site',
+            ],
+        },
+        {
+            id: 'intellectual-property',
+            heading: 'Intellectual Property',
+            body: [
+                'All content on this website, including text, graphics, branding, and software, is the property of mifi Ventures LLC unless otherwise stated.',
+                'Content may not be reproduced, distributed, or reused without written permission.',
+            ],
+        },
+        {
+            id: 'third-party-services',
+            heading: 'Third-Party Services',
+            body: [
+                'This website may reference or integrate with third-party platforms or services. mifi Ventures is not responsible for the privacy practices or content of external services.',
+            ],
+        },
+        {
+            id: 'data-protection-and-privacy',
+            heading: 'Data Protection and Privacy',
+            body: [
+                'Your use of this website is also subject to our Privacy Policy, which explains what information we collect, how it is used, and your choices. By using this website, you acknowledge that you have reviewed the Privacy Policy.',
+                'mifi Ventures is based in the United States and primarily serves U.S.-based clients. However, if you are located in a region with specific data protection laws (such as the European Economic Area or the United Kingdom), we will handle personal data in accordance with applicable data protection requirements to the extent they apply and as described in the Privacy Policy.',
+            ],
+        },
+        {
+            id: 'limitation-of-liability',
+            heading: 'Limitation of Liability',
+            body: [
+                'To the fullest extent permitted by law, mifi Ventures LLC shall not be liable for indirect, incidental, or consequential damages arising from use of this website or related services.',
+            ],
+        },
+        {
+            id: 'governing-law',
+            heading: 'Governing Law and Jurisdiction',
+            body: [
+                'These Terms of Service are governed by the laws of the Commonwealth of Massachusetts and applicable federal law of the United States, without regard to conflict of law principles.',
+                'Any disputes arising out of or relating to these terms or your use of this website shall be brought exclusively in the state or federal courts located in Massachusetts, except where applicable data protection laws provide you with mandatory rights to bring claims in another jurisdiction.',
+            ],
+        },
+        {
+            id: 'changes',
+            heading: 'Changes to These Terms',
+            body: [
+                'These Terms of Service may be updated periodically. Continued use of the website after updates indicates acceptance of the revised terms.',
+            ],
+        },
+        {
+            id: 'contact',
+            heading: 'Contact',
+            body: [
+                'Questions regarding these Terms of Service may be directed to:',
+                'mifi Ventures LLC',
+                'legal@mifi.ventures',
+                'https://mifi.ventures',
+            ],
+        },
+    ] satisfies LegalSection[],
+} as const;

src/lib/types/faq.ts

@@ -0,0 +1,6 @@
+export interface FaqItem {
+    question: string;
+    answer: string;
+}
+
+export type FaqList = FaqItem[];

src/lib/types/service-page.ts

@@ -0,0 +1,132 @@
+/**
+ * Shared types for service pages and services landing.
+ * Used by content modules and components for localization-ready structure.
+ */
+
+export interface ServiceHeroSecondaryCta {
+    href: string;
+    label: string;
+    umamiEventLabel: string;
+}
+
+export interface ServiceHeroContent {
+    title: string;
+    subtitle: string;
+    bookingLinkTitle: string;
+    bookingLinkUrl: string;
+    secondaryCta?: ServiceHeroSecondaryCta;
+}
+
+export interface ServiceTocItem {
+    label: string;
+    href: string;
+}
+
+export interface ServiceFooterLink {
+    label: string;
+    href: string;
+}
+
+export interface ServiceSectionContent {
+    id: string;
+    heading: string;
+    headingId?: string;
+    /** If true, heading is visually hidden (sr-only) for accessibility */
+    headingSrOnly?: boolean;
+    /** Extra class(es) for the section element (e.g. service-credibility) */
+    sectionClass?: string;
+    /** Use narrow; set false for full-width strips (e.g. credibility) */
+    narrowContainer?: boolean;
+    /** Optional class for the bullets ul (e.g. service-credibility__list) */
+    bulletsListClass?: string;
+    lede?: string;
+    paragraphs?: string[];
+    bullets?: string[];
+    orderedBullets?: string[];
+    /** Paragraph(s) rendered after bullets (e.g. "Speed isn't the problem. Structure is.") */
+    trailingParagraphs?: string[];
+    /** Inline links (e.g. cross-links to other services) rendered after content */
+    footerLinks?: ServiceFooterLink[];
+    /** Optional sub-sections: h3 + content (paragraphs and/or bullets) */
+    subsections?: Array<{
+        heading: string;
+        headingId?: string;
+        paragraphs?: string[];
+        bullets?: string[];
+    }>;
+}
+
+export interface WhoGridContent {
+    whoForList: string[];
+    whoNotList: string[];
+    title?: string;
+    showTitle?: boolean;
+    whoForHeading?: string;
+    whoNotHeading?: string;
+}
+
+export interface ServiceScheduleCta {
+    title: string;
+    subtitle: string;
+    bookingLinkTitle: string;
+    bookingLinkUrl: string;
+    showEmailLink?: boolean;
+    showServicesLink?: boolean;
+    sectionId?: string;
+    headingId?: string;
+}
+
+/** Nav item for service/landing page navigation */
+export interface ServiceNavItem {
+    label: string;
+    href: string;
+    umamiEventLabel: string;
+}
+
+/** Service card for the services landing grid */
+export interface ServiceCard {
+    title: string;
+    description: string;
+    href: string;
+}
+
+/** Term/definition for "How engagements work" dl on landing */
+export interface EngagementItem {
+    term: string;
+    definition: string;
+}
+
+/** SEO meta for use in +page.ts (single source of truth with content) */
+export interface ServicePageMeta {
+    title: string;
+    description: string;
+    /** Optional short description for JSON-LD ProfessionalService */
+    jsonLdServiceDescription?: string;
+}
+
+/** Content shape for the services landing page */
+export interface ServicesLandingContent {
+    hero: ServiceHeroContent;
+    navItems: ServiceNavItem[];
+    introParagraphs: string[];
+    services: ServiceCard[];
+    engagements: EngagementItem[];
+    engagementsIntro?: string;
+    engagementsOutro?: string;
+    idealClients: string[];
+    scheduleCta: ServiceScheduleCta;
+    meta: ServicePageMeta;
+}
+
+/** Content shape for a service detail page */
+export interface ServiceDetailContent {
+    hero: ServiceHeroContent;
+    tocItems: ServiceTocItem[];
+    navItems: ServiceNavItem[];
+    sections: ServiceSectionContent[];
+    who: WhoGridContent;
+    scheduleCta: ServiceScheduleCta;
+    /** Optional FAQ section title override */
+    faqTitle?: string;
+    meta: ServicePageMeta;
+}

src/routes/+layout.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
     import { page } from '$app/state';
     import { mergeMeta, SEO_DEFAULTS } from '$lib/seo';
-    import { homeMeta } from '$lib/data/home-meta';
+    import { homeMeta } from '$lib/data/home/home-meta';
+    import Footer from '$lib/components/Footer.svelte';
 
     import '../app.css';
 
@@ -19,17 +20,21 @@
               })
             : '',
     );
+
     const jsonLdHtml = $derived(
         jsonLdScript
-            ? '<script type="application/ld+json">' + jsonLdScript + '</scr' + 'ipt>'
+            ? '<scr' + 'ipt type="application/ld+json">' + jsonLdScript + '</scr' + 'ipt>'
             : '',
     );
 </script>
 
 <svelte:head>
-    <!-- Google tag (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-36F29PDKRT"></script>
-    <script defer src="/assets/js/ga-init.js"></script>
+    <script
+        defer
+        src="https://analytics.mifi.holdings/script.js"
+        data-website-id="72ac01ce-e7fc-4582-8593-703f15add8d5"
+    ></script>
+    <script defer src="/assets/js/umami-helper.js"></script>
 
     <title>{merged.title}</title>
     <meta name="description" content={merged.description ?? ''} />
@@ -42,13 +47,6 @@
         type="font/woff2"
         crossorigin="anonymous"
     />
-    <link
-        rel="preload"
-        href="/assets/fonts/fraunces-v38-latin-700.woff2"
-        as="font"
-        type="font/woff2"
-        crossorigin="anonymous"
-    />
     <link
         rel="preload"
         href="/assets/fonts/inter-v20-latin-regular.woff2"
@@ -56,13 +54,6 @@
         type="font/woff2"
         crossorigin="anonymous"
     />
-    <link
-        rel="preload"
-        href="/assets/fonts/inter-v20-latin-italic.woff2"
-        as="font"
-        type="font/woff2"
-        crossorigin="anonymous"
-    />
     <link
         rel="preload"
         href="/assets/fonts/inter-v20-latin-500.woff2"
@@ -141,7 +132,139 @@
 
     <script src="/assets/js/copyright-year.js" defer></script>
     <script src="/assets/js/mobile-menu-helper.js" defer></script>
+    <script src="/assets/js/cookie-consent.js" defer></script>
 </svelte:head>
 
-<a href="#main" class="skip-link">Skip to main content</a>
+<a href="#main" class="skip-link" data-umami-event="skip to main content"
+    >Skip to main content</a
+>
 {@render children()}
+<Footer />
+<div id="cookie-banner" class="cookie-banner" role="region" aria-label="Cookie consent">
+    <div class="cookie-banner-content">
+        <p class="cookie-notification-text">
+            We use first-party analytics and, if you accept, third-party tools (e.g.
+            Google, Microsoft) to understand usage and improve this site. You can accept
+            all or reject non-essential analytics.
+            <a href="/privacy-policy#analytics-and-tracking">Learn more</a>.
+        </p>
+        <div class="cookie-banner-actions">
+            <button type="button" class="btn btn-primary small" data-consent="accept"
+                >Accept all</button
+            >
+            <button type="button" class="btn btn-secondary small" data-consent="reject"
+                >Reject non-essential</button
+            >
+        </div>
+    </div>
+</div>
+<img
+    src="https://analytics.mifi.holdings/p/wQ9GYnLIg"
+    alt=""
+    width="1"
+    height="1"
+    role="presentation"
+    loading="eager"
+/>
+
+<style>
+    .cookie-banner {
+        position: fixed;
+        inset-inline: 0;
+        bottom: 0;
+        z-index: 1000;
+        display: none;
+        background-color: var(--color-bg-elevated, var(--color-bg));
+        color: var(--color-text);
+        border-top: 1px solid var(--color-border);
+        box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.16);
+
+        &:global(.is-visible) {
+            display: block;
+        }
+    }
+
+    .cookie-banner-content {
+        container: cookie-banner / inline-size;
+        max-width: var(--max-narrow-width);
+        margin: 0 auto;
+        padding: var(--space-md) var(--space-md);
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-sm);
+
+        @media (min-width: 768px) {
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+        }
+    }
+
+    .cookie-notification-text {
+        margin: 0;
+        font-size: var(--font-size-small);
+        line-height: var(--line-height-base);
+
+        @container cookie-banner (width >= 644px) {
+            flex: 1 1 auto;
+        }
+
+        @container cookie-banner (width < 644px) {
+            flex: 0 0 100%;
+            text-align: center;
+            width: 100%;
+        }
+
+        & a {
+            color: var(--color-primary);
+            text-decoration: underline;
+            text-underline-offset: 0.16em;
+
+            &:hover {
+                color: var(--color-primary-hover);
+            }
+        }
+    }
+
+    .cookie-banner-actions {
+        display: flex;
+        flex-flow: column nowrap;
+        justify-content: flex-start;
+
+        @container cookie-banner (width >= 644px) {
+            flex: 0 0 auto;
+            gap: var(--space-xs);
+        }
+
+        @container cookie-banner (width < 644px) {
+            flex: 0 0 100%;
+            gap: var(--space-sm);
+            justify-content: center;
+            width: 100%;
+
+            & .btn {
+                max-width: 100%;
+                width: 100%;
+            }
+        }
+
+        & [data-consent='accept'] {
+            background-color: var(--color-primary);
+            color: var(--color-bg);
+
+            &:hover {
+                background-color: var(--color-primary-hover);
+            }
+        }
+
+        & [data-consent='reject'] {
+            background-color: transparent;
+            color: var(--color-text);
+            border-color: var(--color-primary);
+
+            &:hover {
+                background-color: var(--color-surface-subtle, rgba(148, 163, 184, 0.16));
+            }
+        }
+    }
+</style>

src/routes/+page.svelte

@@ -1,23 +1,31 @@
 <script lang="ts">
     import Navigation from '$lib/components/Navigation.svelte';
-    import Hero from '$lib/components/Hero.svelte';
-    import ExperienceSection from '$lib/components/ExperienceSection.svelte';
-    import WhatWeDo from '$lib/components/WhatWeDo.svelte';
-    import ImpactSection from '$lib/components/ImpactSection.svelte';
-    import HowWeWork from '$lib/components/HowWeWork.svelte';
-    import EngagementsSection from '$lib/components/EngagementsSection.svelte';
+    import HomeHero from '$lib/components/home/Hero.svelte';
+    import ExperienceSection from '$lib/components/home/ExperienceSection.svelte';
+    import WhatWeDo from '$lib/components/home/WhatWeDo.svelte';
+    import ImpactSection from '$lib/components/home/ImpactSection.svelte';
+    import HowWeWork from '$lib/components/home/HowWeWork.svelte';
+    import EngagementsSection from '$lib/components/home/EngagementsSection.svelte';
     import ScheduleSection from '$lib/components/ScheduleSection.svelte';
-    import Footer from '$lib/components/Footer.svelte';
+    import { items as navigationItems } from '$lib/data/home/navigation';
+    import ServicesCardGrid from '$lib/components/ServicesCardGrid.svelte';
+    import { services } from '$lib/data/home/services';
 </script>
 
-<Navigation />
-<Hero />
+<Navigation items={navigationItems} page="home" />
+<HomeHero />
 <main id="main">
+    <ServicesCardGrid {services} surface="bg-alt" />
     <ExperienceSection />
     <WhatWeDo />
     <ImpactSection />
     <HowWeWork />
     <EngagementsSection />
-    <ScheduleSection />
+    <ScheduleSection
+        title="Need a technical adult in the room?"
+        subtitle="Whether you need help launching an MVP, stabilizing a messy product foundation, or adding senior technical judgment as complexity grows, I can help."
+        bookingLinkTitle="Schedule a 30-minute intro call"
+        bookingLinkUrl="https://cal.mifi.ventures/the-mifi/30min?utm_source=website&utm_medium=cta&utm_campaign=schedule_call&utm_content=home_page-schedule-section"
+        showServicesLink
+    />
 </main>
-<Footer />

src/routes/+page.ts

@@ -1,5 +1,5 @@
 import type { PageLoad } from './$types';
-import { homeMeta } from '$lib/data/home-meta';
+import { homeMeta } from '$lib/data/home/home-meta';
 
 export const load: PageLoad = () => {
     return { meta: homeMeta };

src/routes/privacy-policy/+page.svelte

@@ -0,0 +1,215 @@
+<script lang="ts">
+    import Navigation from '$lib/components/Navigation.svelte';
+    import { privacyPolicy } from '$lib/data/privacy-policy';
+    import type { LegalSectionLink } from '$lib/data/privacy-policy';
+
+    const navItems = [{ label: 'Home', href: '/', umamiEventLabel: 'home' }];
+
+    type BodySegment = string | { type: 'link'; href: string; label: string };
+
+    /** Splits a paragraph by link URLs and returns text/link segments for rendering. */
+    function linkify(para: string, links: LegalSectionLink[]): BodySegment[] {
+        const matches: { index: number; link: LegalSectionLink }[] = [];
+        for (const link of links) {
+            const idx = para.indexOf(link.href);
+            if (idx !== -1) matches.push({ index: idx, link });
+        }
+        matches.sort((a, b) => a.index - b.index);
+        const result: BodySegment[] = [];
+        let last = 0;
+        for (const { index, link } of matches) {
+            if (index > last) result.push(para.slice(last, index));
+            result.push({ type: 'link', href: link.href, label: link.label });
+            last = index + link.href.length;
+        }
+        if (last < para.length) result.push(para.slice(last));
+        return result.length ? result : [para];
+    }
+</script>
+
+<Navigation items={navItems} page="privacy-policy" />
+
+<main id="main" class="legal-page">
+    <div class="container narrow">
+        <header id="header" class="legal-header">
+            <h1>{privacyPolicy.title}</h1>
+            <p class="legal-last-updated">Last updated: {privacyPolicy.lastUpdated}</p>
+        </header>
+
+        <div class="legal-content">
+            {#each privacyPolicy.intro as para}
+                <p>{para}</p>
+            {/each}
+
+            {#each privacyPolicy.sections as section (section.id)}
+                <section
+                    id={section.id}
+                    class="legal-section"
+                    aria-labelledby={`${section.id}-heading`}
+                >
+                    <h2 id={`${section.id}-heading`}>{section.heading}</h2>
+                    {#each section.body as para}
+                        <p>
+                            {#if section.id === 'contact' && para === 'mifi Ventures LLC'}
+                                <strong>{para}</strong>
+                            {:else if section.id === 'contact' && para === 'legal@mifi.ventures'}
+                                <a href="mailto:legal@mifi.ventures"
+                                    >legal@mifi.ventures</a
+                                >
+                            {:else if section.id === 'contact' && para === 'https://mifi.ventures'}
+                                <a href="https://mifi.ventures" rel="noopener noreferrer"
+                                    >https://mifi.ventures</a
+                                >
+                            {:else if section.links}
+                                {#each linkify(para, section.links) as segment}
+                                    {#if typeof segment === 'string'}
+                                        {segment}
+                                    {:else}
+                                        <a href={segment.href} rel="noopener noreferrer"
+                                            >{segment.label}</a
+                                        >
+                                    {/if}
+                                {/each}
+                            {:else}
+                                {para}
+                            {/if}
+                        </p>
+                    {/each}
+                    {#if section.list}
+                        <ul>
+                            {#each section.list as item}
+                                <li>{item}</li>
+                            {/each}
+                        </ul>
+                    {/if}
+                    {#if section.subsections}
+                        {#each section.subsections as sub (sub.title)}
+                            <div class="legal-subsection">
+                                <h3>{sub.title}</h3>
+                                {#each sub.body as para}
+                                    <p>{para}</p>
+                                {/each}
+                                {#if sub.list}
+                                    <ul>
+                                        {#each sub.list as item}
+                                            <li>{item}</li>
+                                        {/each}
+                                    </ul>
+                                {/if}
+                            </div>
+                        {/each}
+                    {/if}
+                </section>
+            {/each}
+        </div>
+
+        <nav class="legal-cross-links" aria-label="Related legal pages">
+            <a href="/terms-of-service">Terms of Service</a>
+        </nav>
+    </div>
+</main>
+
+<style>
+    .legal-page {
+        padding: var(--space-xxl) 0;
+        background-color: var(--color-bg);
+    }
+
+    .narrow {
+        max-width: var(--max-narrow-width);
+        margin: 0 auto;
+        padding: 0 var(--space-md);
+    }
+
+    .legal-header {
+        margin-bottom: var(--space-xl);
+    }
+
+    .legal-header h1 {
+        font-family: var(--font-family-heading);
+        font-size: var(--font-size-xxl);
+        font-weight: var(--font-weight-bold);
+        line-height: var(--line-height-heading);
+        color: var(--color-text);
+        margin: 0 0 var(--space-sm) 0;
+    }
+
+    .legal-last-updated {
+        font-size: var(--font-size-medium);
+        color: var(--color-text-tertiary);
+        margin: 0;
+    }
+
+    .legal-content {
+        font-size: var(--font-size-base);
+        line-height: var(--line-height-base);
+        color: var(--color-text);
+    }
+
+    .legal-content p {
+        margin: 0 0 var(--space-md) 0;
+    }
+
+    .legal-content a {
+        color: var(--color-primary);
+        text-decoration: underline;
+        text-underline-offset: 0.2em;
+    }
+
+    .legal-content a:hover {
+        color: var(--color-primary-hover);
+    }
+
+    .legal-section {
+        margin-bottom: var(--space-xl);
+    }
+
+    .legal-section h2 {
+        font-family: var(--font-family-heading);
+        font-size: var(--font-size-xl);
+        font-weight: var(--font-weight-semibold);
+        line-height: var(--line-height-tight);
+        color: var(--color-text);
+        margin: 0 0 var(--space-md) 0;
+    }
+
+    .legal-subsection {
+        margin-top: var(--space-lg);
+    }
+
+    .legal-subsection h3 {
+        font-family: var(--font-family-heading);
+        font-size: var(--font-size-large);
+        font-weight: var(--font-weight-semibold);
+        line-height: var(--line-height-tight);
+        color: var(--color-text);
+        margin: 0 0 var(--space-sm) 0;
+    }
+
+    .legal-section ul,
+    .legal-subsection ul {
+        margin: 0 0 var(--space-md) 0;
+        padding-left: var(--space-lg);
+    }
+
+    .legal-section li,
+    .legal-subsection li {
+        margin-bottom: var(--space-xs);
+    }
+
+    .legal-cross-links {
+        margin-top: var(--space-xxl);
+        padding-top: var(--space-xl);
+        border-top: 1px solid var(--color-border);
+    }
+
+    .legal-cross-links a {
+        color: var(--color-primary);
+        text-decoration: underline;
+        text-underline-offset: 0.2em;
+    }
+
+    .legal-cross-links a:hover {
+        color: var(--color-primary-hover);
+    }
+</style>

src/routes/privacy-policy/+page.ts

@@ -0,0 +1,20 @@
+import type { PageLoad } from './$types';
+import type { PageMeta } from '$lib/seo';
+import { baseJsonLdGraph } from '$lib/data/json-ld/baseJsonLdGraphs';
+import { privacyPolicyPageJsonLdGraph } from '$lib/data/json-ld/webpageJsonLdGraphs';
+
+const BASE = 'https://mifi.ventures';
+const PATH = '/privacy-policy';
+const PAGE_URL = `${BASE}${PATH}`;
+
+const privacyPageMeta: PageMeta = {
+    title: 'Privacy Policy | mifi Ventures',
+    description:
+        'Privacy Policy for mifi Ventures LLC. Describes information we collect, how we use it, messaging policy (SMS), data security, and your rights. Last updated March 5, 2026.',
+    canonical: PAGE_URL,
+    jsonLd: [...baseJsonLdGraph, privacyPolicyPageJsonLdGraph],
+};
+
+export const load: PageLoad = () => {
+    return { meta: privacyPageMeta };
+};

src/routes/services/+page.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    import Navigation from '$lib/components/Navigation.svelte';
+    import Hero from '$lib/components/Hero.svelte';
+    import ScheduleSection from '$lib/components/ScheduleSection.svelte';
+    import ServicesCardGrid from '$lib/components/ServicesCardGrid.svelte';
+    import EngagementsDl from '$lib/components/EngagementsDl.svelte';
+    import { pageContent } from '$lib/data/services/landing/content';
+</script>
+
+<Navigation items={pageContent.navItems} page="services" />
+
+<Hero {...pageContent.hero} />
+
+<main id="main">
+    <section class="section services-intro" aria-labelledby="intro-heading">
+        <div class="container narrow">
+            <h2 id="intro-heading" class="sr-only">How we work together</h2>
+            {#each pageContent.introParagraphs as p}
+                <p>{p}</p>
+            {/each}
+        </div>
+    </section>
+
+    <ServicesCardGrid services={pageContent.services} />
+
+    <EngagementsDl
+        items={pageContent.engagements}
+        intro={pageContent.engagementsIntro}
+        outro={pageContent.engagementsOutro}
+    />
+
+    <section class="section services-ideal" aria-labelledby="ideal-heading">
+        <div class="container narrow">
+            <h2 id="ideal-heading">Ideal clients</h2>
+            <ul class="content-list">
+                {#each pageContent.idealClients as item}
+                    <li>{item}</li>
+                {/each}
+            </ul>
+        </div>
+    </section>
+
+    <ScheduleSection {...pageContent.scheduleCta} />
+</main>

src/routes/services/+page.ts

@@ -0,0 +1,21 @@
+import type { PageLoad } from './$types';
+import type { PageMeta } from '$lib/seo';
+import { baseJsonLdGraph } from '$lib/data/json-ld/baseJsonLdGraphs';
+import { pageContent } from '$lib/data/services/landing/content';
+import { servicesPageJsonLdGraph } from '$lib/data/json-ld/webpageJsonLdGraphs';
+import { catalogJsonLdGraph } from '$lib/data/json-ld/baseJsonLdGraphs';
+
+const BASE = 'https://mifi.ventures';
+const PATH = '/services';
+const PAGE_URL = `${BASE}${PATH}`;
+
+export const load: PageLoad = () => {
+    const { meta } = pageContent;
+    const servicePageMeta: PageMeta = {
+        title: meta.title,
+        description: meta.description,
+        canonical: PAGE_URL,
+        jsonLd: [...baseJsonLdGraph, ...catalogJsonLdGraph, servicesPageJsonLdGraph],
+    };
+    return { meta: servicePageMeta };
+};

src/routes/services/fractional-cto-for-early-stage-saas/+page.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import Navigation from '$lib/components/Navigation.svelte';
+    import Hero from '$lib/components/Hero.svelte';
+    import TOC from '$lib/components/TOC.svelte';
+    import ServiceSection from '$lib/components/ServiceSection.svelte';
+    import WhoGrid from '$lib/components/WhoGrid.svelte';
+    import FAQ from '$lib/components/FAQ.svelte';
+    import ScheduleSection from '$lib/components/ScheduleSection.svelte';
+    import { pageContent } from '$lib/data/services/fractional-cto-for-early-stage-saas/content';
+    import { faqItems } from '$lib/data/services/fractional-cto-for-early-stage-saas/faq';
+    import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
+</script>
+
+<Navigation items={pageContent.navItems} page="fractional-cto-for-early-stage-saas" />
+
+<Breadcrumbs
+    items={[
+        { label: 'Services', href: '/services' },
+        { label: 'Fractional CTO for Early-Stage SaaS' },
+    ]}
+/>
+
+<Hero {...pageContent.hero} />
+
+<main id="main">
+    <TOC items={pageContent.tocItems} />
+
+    {#each pageContent.sections as section (section.id)}
+        <ServiceSection {section} />
+    {/each}
+
+    <WhoGrid {...pageContent.who} />
+
+    <FAQ faqList={faqItems} />
+
+    <ScheduleSection {...pageContent.scheduleCta} />
+</main>

src/routes/services/fractional-cto-for-early-stage-saas/+page.ts

@@ -0,0 +1,25 @@
+import type { PageLoad } from './$types';
+import type { PageMeta } from '$lib/seo';
+import { baseJsonLdGraph } from '$lib/data/json-ld/baseJsonLdGraphs';
+import { pageContent } from '$lib/data/services/fractional-cto-for-early-stage-saas/content';
+import { fractionalCtoForEarlyStageSaaSServiceJsonLdGraph } from '$lib/data/json-ld/servicesJsonLdGraphs';
+import { fractionalCtoForEarlyStageSaaSPageJsonLdGraph } from '$lib/data/json-ld/webpageJsonLdGraphs';
+
+const BASE = 'https://mifi.ventures';
+const PATH = '/services/fractional-cto-for-early-stage-saas';
+const PAGE_URL = `${BASE}${PATH}`;
+
+export const load: PageLoad = () => {
+    const { meta } = pageContent;
+    const servicePageMeta: PageMeta = {
+        title: meta.title,
+        description: meta.description,
+        canonical: PAGE_URL,
+        jsonLd: [
+            ...baseJsonLdGraph,
+            fractionalCtoForEarlyStageSaaSPageJsonLdGraph,
+            fractionalCtoForEarlyStageSaaSServiceJsonLdGraph,
+        ],
+    };
+    return { meta: servicePageMeta };
+};

src/routes/services/hands-on-saas-architecture-consultant/+page.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import Navigation from '$lib/components/Navigation.svelte';
+    import Hero from '$lib/components/Hero.svelte';
+    import TOC from '$lib/components/TOC.svelte';
+    import ServiceSection from '$lib/components/ServiceSection.svelte';
+    import WhoGrid from '$lib/components/WhoGrid.svelte';
+    import FAQ from '$lib/components/FAQ.svelte';
+    import ScheduleSection from '$lib/components/ScheduleSection.svelte';
+    import { pageContent } from '$lib/data/services/hands-on-saas-architecture-consultant/content';
+    import { faqItems } from '$lib/data/services/hands-on-saas-architecture-consultant/faq';
+    import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
+</script>
+
+<Navigation items={pageContent.navItems} page="hands-on-saas-architecture-consultant" />
+
+<Breadcrumbs
+    items={[
+        { label: 'Services', href: '/services' },
+        { label: 'Hands-On SaaS Architecture Consultant' },
+    ]}
+/>
+
+<Hero {...pageContent.hero} />
+
+<main id="main">
+    <TOC items={pageContent.tocItems} />
+
+    {#each pageContent.sections as section (section.id)}
+        <ServiceSection {section} />
+    {/each}
+
+    <WhoGrid {...pageContent.who} />
+
+    <FAQ faqList={faqItems} />
+
+    <ScheduleSection {...pageContent.scheduleCta} />
+</main>

src/routes/services/hands-on-saas-architecture-consultant/+page.ts

@@ -0,0 +1,25 @@
+import type { PageLoad } from './$types';
+import type { PageMeta } from '$lib/seo';
+import { pageContent } from '$lib/data/services/hands-on-saas-architecture-consultant/content';
+import { handsOnSaaSArchitectureConsultantPageJsonLdGraph } from '$lib/data/json-ld/webpageJsonLdGraphs';
+import { handsOnSaaSArchitectureConsultantServiceJsonLdGraph } from '$lib/data/json-ld/servicesJsonLdGraphs';
+import { baseJsonLdGraph } from '$lib/data/json-ld/baseJsonLdGraphs';
+
+const BASE = 'https://mifi.ventures';
+const PATH = '/services/hands-on-saas-architecture-consultant';
+const PAGE_URL = `${BASE}${PATH}`;
+
+export const load: PageLoad = () => {
+    const { meta } = pageContent;
+    const servicePageMeta: PageMeta = {
+        title: meta.title,
+        description: meta.description,
+        canonical: PAGE_URL,
+        jsonLd: [
+            ...baseJsonLdGraph,
+            handsOnSaaSArchitectureConsultantPageJsonLdGraph,
+            handsOnSaaSArchitectureConsultantServiceJsonLdGraph,
+        ],
+    };
+    return { meta: servicePageMeta };
+};

src/routes/services/mvp-architecture-and-launch/+page.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import Navigation from '$lib/components/Navigation.svelte';
+    import Hero from '$lib/components/Hero.svelte';
+    import TOC from '$lib/components/TOC.svelte';
+    import ServiceSection from '$lib/components/ServiceSection.svelte';
+    import WhoGrid from '$lib/components/WhoGrid.svelte';
+    import FAQ from '$lib/components/FAQ.svelte';
+    import ScheduleSection from '$lib/components/ScheduleSection.svelte';
+    import { pageContent } from '$lib/data/services/mvp-architecture-and-launch/content';
+    import { faqItems } from '$lib/data/services/mvp-architecture-and-launch/faq';
+    import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
+</script>
+
+<Navigation items={pageContent.navItems} page="mvp-architecture-and-launch" />
+
+<Breadcrumbs
+    items={[
+        { label: 'Services', href: '/services' },
+        { label: 'MVP Architecture & Launch' },
+    ]}
+/>
+
+<Hero {...pageContent.hero} />
+
+<main id="main">
+    <TOC items={pageContent.tocItems} />
+
+    {#each pageContent.sections as section (section.id)}
+        <ServiceSection {section} />
+    {/each}
+
+    <WhoGrid {...pageContent.who} />
+
+    <FAQ faqList={faqItems} />
+
+    <ScheduleSection {...pageContent.scheduleCta} />
+</main>

src/routes/services/mvp-architecture-and-launch/+page.ts

@@ -0,0 +1,25 @@
+import type { PageLoad } from './$types';
+import type { PageMeta } from '$lib/seo';
+import { baseJsonLdGraph } from '$lib/data/json-ld/baseJsonLdGraphs';
+import { pageContent } from '$lib/data/services/mvp-architecture-and-launch/content';
+import { mvpArchitectureAndLaunchServiceJsonLdGraph } from '$lib/data/json-ld/servicesJsonLdGraphs';
+import { mvpArchitectureAndLaunchPageJsonLdGraph } from '$lib/data/json-ld/webpageJsonLdGraphs';
+
+const BASE = 'https://mifi.ventures';
+const PATH = '/services/mvp-architecture-and-launch';
+const PAGE_URL = `${BASE}${PATH}`;
+
+export const load: PageLoad = () => {
+    const { meta } = pageContent;
+    const servicePageMeta: PageMeta = {
+        title: meta.title,
+        description: meta.description,
+        canonical: PAGE_URL,
+        jsonLd: [
+            ...baseJsonLdGraph,
+            mvpArchitectureAndLaunchPageJsonLdGraph,
+            mvpArchitectureAndLaunchServiceJsonLdGraph,
+        ],
+    };
+    return { meta: servicePageMeta };
+};

src/routes/services/stage-aligned-infrastructure/+page.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import Navigation from '$lib/components/Navigation.svelte';
+    import Hero from '$lib/components/Hero.svelte';
+    import TOC from '$lib/components/TOC.svelte';
+    import ServiceSection from '$lib/components/ServiceSection.svelte';
+    import WhoGrid from '$lib/components/WhoGrid.svelte';
+    import FAQ from '$lib/components/FAQ.svelte';
+    import ScheduleSection from '$lib/components/ScheduleSection.svelte';
+    import { pageContent } from '$lib/data/services/stage-aligned-infrastructure/content';
+    import { faqItems } from '$lib/data/services/stage-aligned-infrastructure/faq';
+    import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
+</script>
+
+<Navigation items={pageContent.navItems} page="stage-aligned-infrastructure" />
+
+<Breadcrumbs
+    items={[
+        { label: 'Services', href: '/services' },
+        { label: 'Stage-Aligned Infrastructure' },
+    ]}
+/>
+
+<Hero {...pageContent.hero} />
+
+<main id="main">
+    <TOC items={pageContent.tocItems} />
+
+    {#each pageContent.sections as section (section.id)}
+        <ServiceSection {section} />
+    {/each}
+
+    <WhoGrid {...pageContent.who} />
+
+    <FAQ faqList={faqItems} />
+
+    <ScheduleSection {...pageContent.scheduleCta} />
+</main>

src/routes/services/stage-aligned-infrastructure/+page.ts

@@ -0,0 +1,25 @@
+import type { PageLoad } from './$types';
+import type { PageMeta } from '$lib/seo';
+import { baseJsonLdGraph } from '$lib/data/json-ld/baseJsonLdGraphs';
+import { pageContent } from '$lib/data/services/stage-aligned-infrastructure/content';
+import { stageAlignedInfrastructureServiceJsonLdGraph } from '$lib/data/json-ld/servicesJsonLdGraphs';
+import { stageAlignedInfrastructurePageJsonLdGraph } from '$lib/data/json-ld/webpageJsonLdGraphs';
+
+const BASE = 'https://mifi.ventures';
+const PATH = '/services/stage-aligned-infrastructure';
+const PAGE_URL = `${BASE}${PATH}`;
+
+export const load: PageLoad = () => {
+    const { meta } = pageContent;
+    const servicePageMeta: PageMeta = {
+        title: meta.title,
+        description: meta.description,
+        canonical: PAGE_URL,
+        jsonLd: [
+            ...baseJsonLdGraph,
+            stageAlignedInfrastructurePageJsonLdGraph,
+            stageAlignedInfrastructureServiceJsonLdGraph,
+        ],
+    };
+    return { meta: servicePageMeta };
+};

src/routes/terms-of-service/+page.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+    import Navigation from '$lib/components/Navigation.svelte';
+    import { termsOfService } from '$lib/data/terms-of-service';
+
+    const navItems = [{ label: 'Home', href: '/', umamiEventLabel: 'home' }];
+</script>
+
+<Navigation items={navItems} page="terms-of-service" />
+
+<main id="main" class="legal-page">
+    <div class="container narrow">
+        <header id="header" class="legal-header">
+            <h1>{termsOfService.title}</h1>
+            <p class="legal-last-updated">Last updated: {termsOfService.lastUpdated}</p>
+        </header>
+
+        <div class="legal-content">
+            {#each termsOfService.intro as para}
+                <p>{para}</p>
+            {/each}
+
+            {#each termsOfService.sections as section (section.id)}
+                <section
+                    id={section.id}
+                    class="legal-section"
+                    aria-labelledby={`${section.id}-heading`}
+                >
+                    <h2 id={`${section.id}-heading`}>{section.heading}</h2>
+                    {#each section.body as para}
+                        <p>
+                            {#if section.id === 'contact' && para === 'mifi Ventures LLC'}
+                                <strong>{para}</strong>
+                            {:else if section.id === 'contact' && para === 'legal@mifi.ventures'}
+                                <a href="mailto:legal@mifi.ventures"
+                                    >legal@mifi.ventures</a
+                                >
+                            {:else if section.id === 'contact' && para === 'https://mifi.ventures'}
+                                <a href="https://mifi.ventures" rel="noopener noreferrer"
+                                    >https://mifi.ventures</a
+                                >
+                            {:else}
+                                {para}
+                            {/if}
+                        </p>
+                    {/each}
+                    {#if section.list}
+                        <ul>
+                            {#each section.list as item}
+                                <li>{item}</li>
+                            {/each}
+                        </ul>
+                    {/if}
+                </section>
+            {/each}
+        </div>
+
+        <nav class="legal-cross-links" aria-label="Related legal pages">
+            <a href="/privacy-policy">Privacy Policy</a>
+        </nav>
+    </div>
+</main>
+
+<style>
+    .legal-page {
+        padding: var(--space-xxl) 0;
+        background-color: var(--color-bg);
+    }
+
+    .narrow {
+        max-width: var(--max-narrow-width);
+        margin: 0 auto;
+        padding: 0 var(--space-md);
+    }
+
+    .legal-header {
+        margin-bottom: var(--space-xl);
+    }
+
+    .legal-header h1 {
+        font-family: var(--font-family-heading);
+        font-size: var(--font-size-xxl);
+        font-weight: var(--font-weight-bold);
+        line-height: var(--line-height-heading);
+        color: var(--color-text);
+        margin: 0 0 var(--space-sm) 0;
+    }
+
+    .legal-last-updated {
+        font-size: var(--font-size-medium);
+        color: var(--color-text-tertiary);
+        margin: 0;
+    }
+
+    .legal-content {
+        font-size: var(--font-size-base);
+        line-height: var(--line-height-base);
+        color: var(--color-text);
+    }
+
+    .legal-content p {
+        margin: 0 0 var(--space-md) 0;
+    }
+
+    .legal-section {
+        margin-bottom: var(--space-xl);
+    }
+
+    .legal-section h2 {
+        font-family: var(--font-family-heading);
+        font-size: var(--font-size-xl);
+        font-weight: var(--font-weight-semibold);
+        line-height: var(--line-height-tight);
+        color: var(--color-text);
+        margin: 0 0 var(--space-md) 0;
+    }
+
+    .legal-section ul {
+        margin: 0 0 var(--space-md) 0;
+        padding-left: var(--space-lg);
+    }
+
+    .legal-section li {
+        margin-bottom: var(--space-xs);
+    }
+
+    .legal-cross-links {
+        margin-top: var(--space-xxl);
+        padding-top: var(--space-xl);
+        border-top: 1px solid var(--color-border);
+    }
+
+    .legal-cross-links a {
+        color: var(--color-primary);
+        text-decoration: underline;
+        text-underline-offset: 0.2em;
+    }
+
+    .legal-cross-links a:hover {
+        color: var(--color-primary-hover);
+    }
+</style>

src/routes/terms-of-service/+page.ts

@@ -0,0 +1,20 @@
+import type { PageLoad } from './$types';
+import type { PageMeta } from '$lib/seo';
+import { termsOfServicePageJsonLdGraph } from '$lib/data/json-ld/webpageJsonLdGraphs';
+import { baseJsonLdGraph } from '$lib/data/json-ld/baseJsonLdGraphs';
+
+const BASE = 'https://mifi.ventures';
+const PATH = '/terms-of-service';
+const PAGE_URL = `${BASE}${PATH}`;
+
+const termsPageMeta: PageMeta = {
+    title: 'Terms of Service | mifi Ventures',
+    description:
+        'Terms of Service for mifi Ventures LLC. Covers use of the website, services, client communications including SMS, acceptable use, and contact information.',
+    canonical: PAGE_URL,
+    jsonLd: [...baseJsonLdGraph, termsOfServicePageJsonLdGraph],
+};
+
+export const load: PageLoad = () => {
+    return { meta: termsPageMeta };
+};

static/.well-known/appspecific/com.chrome.devtools.json

@@ -0,0 +1,5 @@
+{
+    "name": "mifi Ventures",
+    "description": "mifi Ventures is a consulting firm that helps early-stage SaaS companies build and scale their businesses.",
+    "url": "https://mifi.ventures"
+}

static/404.html

@@ -1,20 +1,66 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>404 Not Found — mifi Ventures</title>
-    <meta name="theme-color" content="#0052cc" media="(prefers-color-scheme: light)">
-    <meta name="theme-color" content="#4da6ff" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-    <link rel="stylesheet" href="/assets/error-pages.css">
-</head>
-<body class="error-page">
-    <main>
-        <div class="emoji" aria-hidden="true">🔍</div>
-        <h1>404 Not Found</h1>
-        <p>This page went off to find itself. We’re not sure it’s coming back.</p>
-        <p><a href="/">Back to mifi Ventures →</a></p>
-    </main>
-</body>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link
+            rel="preload"
+            href="/assets/fonts/fraunces-v38-latin-600.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+        />
+        <link
+            rel="preload"
+            href="/assets/fonts/inter-v20-latin-regular.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+        />
+        <link
+            rel="preload"
+            href="/assets/fonts/inter-v20-latin-500.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+        />
+        <link
+            rel="preload"
+            href="/assets/fonts/inter-v20-latin-600.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+        />
+        <link
+            rel="preload"
+            href="/assets/fonts/inter-v20-latin-700.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+        />
+        <link
+            rel="preload"
+            href="/assets/fonts/fraunces-v38-latin-700.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+        />
+        <title>404 Not Found — mifi Ventures</title>
+        <meta
+            name="theme-color"
+            content="#0052cc"
+            media="(prefers-color-scheme: light)"
+        />
+        <meta name="theme-color" content="#4da6ff" media="(prefers-color-scheme: dark)" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link rel="stylesheet" href="/assets/error-pages.css" />
+    </head>
+    <body class="error-page">
+        <main>
+            <div class="emoji" aria-hidden="true">🔍</div>
+            <h1 data-testid="404-title">404 Not Found</h1>
+            <p>This page went off to find itself. We’re not sure it’s coming back.</p>
+            <p><a href="/">Back to mifi Ventures →</a></p>
+        </main>
+    </body>
 </html>

static/410.html

@@ -1,20 +1,66 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>410 Gone — mifi Ventures</title>
-    <meta name="theme-color" content="#0052cc" media="(prefers-color-scheme: light)">
-    <meta name="theme-color" content="#4da6ff" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-    <link rel="stylesheet" href="/assets/error-pages.css">
-</head>
-<body class="error-page">
-    <main>
-        <div class="emoji" aria-hidden="true">👋</div>
-        <h1>410 Gone</h1>
-        <p>This page has left the building. We’ve moved on—and so should you.</p>
-        <p><a href="/">Back to mifi Ventures →</a></p>
-    </main>
-</body>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link
+            rel="preload"
+            href="/assets/fonts/fraunces-v38-latin-600.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+        />
+        <link
+            rel="preload"
+            href="/assets/fonts/inter-v20-latin-regular.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+        />
+        <link
+            rel="preload"
+            href="/assets/fonts/inter-v20-latin-500.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+        />
+        <link
+            rel="preload"
+            href="/assets/fonts/inter-v20-latin-600.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+        />
+        <link
+            rel="preload"
+            href="/assets/fonts/inter-v20-latin-700.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+        />
+        <link
+            rel="preload"
+            href="/assets/fonts/fraunces-v38-latin-700.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+        />
+        <title>410 Gone — mifi Ventures</title>
+        <meta
+            name="theme-color"
+            content="#0052cc"
+            media="(prefers-color-scheme: light)"
+        />
+        <meta name="theme-color" content="#4da6ff" media="(prefers-color-scheme: dark)" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link rel="stylesheet" href="/assets/error-pages.css" />
+    </head>
+    <body class="error-page">
+        <main>
+            <div class="emoji" aria-hidden="true">👋</div>
+            <h1 data-testid="410-title">410 Gone</h1>
+            <p>This page has left the building. We’ve moved on—and so should you.</p>
+            <p><a href="/">Back to mifi Ventures →</a></p>
+        </main>
+    </body>
 </html>

static/assets/error-pages.css

@@ -32,28 +32,47 @@
 }
 
 /* Local fonts — same paths as +layout.svelte preloads */
+
 @font-face {
-    font-family: 'Inter';
+    font-family: Inter;
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src: url('/assets/fonts/inter-v20-latin-regular.woff2') format('woff2');
 }
+
 @font-face {
-    font-family: 'Inter';
+    font-family: Inter;
     font-style: normal;
     font-weight: 500;
     font-display: swap;
     src: url('/assets/fonts/inter-v20-latin-500.woff2') format('woff2');
 }
+
 @font-face {
-    font-family: 'Fraunces';
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('/assets/fonts/inter-v20-latin-700.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: Fraunces;
     font-style: normal;
     font-weight: 600;
     font-display: swap;
     src: url('/assets/fonts/fraunces-v38-latin-600.woff2') format('woff2');
 }
 
+@font-face {
+    font-family: Fraunces;
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('/assets/fonts/fraunces-v38-latin-700.woff2') format('woff2');
+}
+
 /* Error page layout */
 .error-page {
     margin: 0;
@@ -67,15 +86,18 @@
     color: var(--ep-text);
     background-color: var(--ep-bg-alt);
 }
+
 .error-page main {
     text-align: center;
     padding: 2rem 1.5rem;
     max-width: 28rem;
 }
+
 .error-page .emoji {
     font-size: 4rem;
     margin-bottom: 0.5rem;
 }
+
 .error-page h1 {
     font-family: var(--ep-font-heading);
     font-size: 2rem;
@@ -83,19 +105,23 @@
     margin: 0 0 0.75rem;
     color: var(--ep-text);
 }
+
 .error-page p {
     margin: 0 0 1.5rem;
     color: var(--ep-text-secondary);
 }
+
 .error-page a {
     color: var(--ep-primary);
     font-weight: 500;
     text-decoration: none;
 }
+
 .error-page a:hover {
     color: var(--ep-primary-hover);
     text-decoration: underline;
 }
+
 .error-page a:focus-visible {
     outline: 2px solid var(--ep-primary);
     outline-offset: 2px;

static/assets/js/cookie-consent.js

@@ -0,0 +1,168 @@
+// Cookie consent banner & third-party analytics loader
+// - Stores preference in localStorage
+// - Shows a bottom banner until user accepts or rejects
+// - Loads Google Analytics and Microsoft Clarity only when accepted
+
+(function () {
+    'use strict';
+
+    var STORAGE_KEY = 'mifi-ventures-cookie-consent';
+    var BANNER_ID = 'cookie-banner';
+    var BANNER_VISIBLE_CLASS = 'is-visible';
+    var hasLoadedThirdParty = false;
+
+    // Trusted Types support (for CSP `require-trusted-types-for 'script'`)
+    // Clarity's tag script looks up window.trustedTypePolicies[policyName] to load its inner script;
+    // we must expose the policy there for Safari (and other browsers) to avoid TT violations.
+    var ttPolicy = null;
+    try {
+        if (
+            window.trustedTypes &&
+            typeof window.trustedTypes.createPolicy === 'function'
+        ) {
+            ttPolicy = window.trustedTypes.createPolicy('mifi-ventures-policy', {
+                createScriptURL: function (url) {
+                    return url;
+                },
+            });
+
+            if (ttPolicy && !window.trustedTypePolicies) {
+                window.trustedTypePolicies = {};
+            }
+
+            if (ttPolicy) {
+                window.trustedTypePolicies['mifi-ventures-policy'] = ttPolicy;
+            }
+        }
+    } catch (_) {
+        ttPolicy = null;
+    }
+
+    function setScriptSrc(el, url) {
+        if (!el) return;
+        if (ttPolicy) {
+            // When Trusted Types are enforced, wrap URLs via our policy
+            el.src = ttPolicy.createScriptURL(url);
+        } else {
+            el.src = url;
+        }
+    }
+
+    function loadThirdPartyAnalytics() {
+        if (hasLoadedThirdParty) return;
+        hasLoadedThirdParty = true;
+
+        // Google Analytics (gtag.js + ga-init.js)
+        try {
+            var gtagScript = document.createElement('script');
+            gtagScript.async = true;
+            setScriptSrc(
+                gtagScript,
+                'https://www.googletagmanager.com/gtag/js?id=G-36F29PDKRT',
+            );
+
+            gtagScript.onload = function () {
+                // Load the existing ga-init.js helper once gtag is ready
+                var gaInit = document.createElement('script');
+                gaInit.defer = true;
+                setScriptSrc(gaInit, '/assets/js/ga-init.js');
+                document.head.appendChild(gaInit);
+            };
+
+            document.head.appendChild(gtagScript);
+        } catch (e) {
+            // Fail silently – analytics are non-essential
+            console.error('Failed to load Google Analytics', e);
+        }
+
+        // Microsoft Clarity – use the official loader snippet so that
+        // window.clarity is defined before the tag script runs.
+        try {
+            (function (c, l, a, r, i, t, y) {
+                c[a] =
+                    c[a] ||
+                    function () {
+                        (c[a].q = c[a].q || []).push(arguments);
+                    };
+                t = l.createElement(r);
+                t.async = 1;
+                setScriptSrc(
+                    t,
+                    `https://www.clarity.ms/tag/${i}?trustedTypes=mifi-ventures-policy`,
+                );
+                y = l.getElementsByTagName(r)[0];
+                y.parentNode.insertBefore(t, y);
+            })(window, document, 'clarity', 'script', 'vuo5q3yf79');
+
+            window.clarity('consentv2', {
+                ad_Storage: 'granted',
+                analytics_Storage: 'granted',
+            });
+        } catch (e2) {
+            console.error('Failed to load Microsoft Clarity', e2);
+        }
+    }
+
+    function hideBanner(banner) {
+        if (!banner) return;
+        banner.classList.remove(BANNER_VISIBLE_CLASS);
+    }
+
+    function showBanner(banner) {
+        if (!banner) return;
+        banner.classList.add(BANNER_VISIBLE_CLASS);
+    }
+
+    function init() {
+        var banner = document.getElementById(BANNER_ID);
+        if (!banner) return;
+
+        var acceptBtn = banner.querySelector('[data-consent="accept"]');
+        var rejectBtn = banner.querySelector('[data-consent="reject"]');
+
+        var pref;
+        try {
+            pref = window.localStorage.getItem(STORAGE_KEY);
+        } catch (_) {
+            pref = null;
+        }
+
+        if (pref === 'accept') {
+            hideBanner(banner);
+            loadThirdPartyAnalytics();
+        } else if (pref === 'reject') {
+            hideBanner(banner);
+        } else {
+            showBanner(banner);
+        }
+
+        if (acceptBtn) {
+            acceptBtn.addEventListener('click', function () {
+                try {
+                    window.localStorage.setItem(STORAGE_KEY, 'accept');
+                } catch (_) {
+                    // ignore
+                }
+                hideBanner(banner);
+                loadThirdPartyAnalytics();
+            });
+        }
+
+        if (rejectBtn) {
+            rejectBtn.addEventListener('click', function () {
+                try {
+                    window.localStorage.setItem(STORAGE_KEY, 'reject');
+                } catch (_) {
+                    // ignore
+                }
+                hideBanner(banner);
+            });
+        }
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+})();

static/assets/js/copyright-year.js

@@ -1,5 +1,5 @@
 (function () {
-  'use strict';
-  var el = document.getElementById('copyright-year');
-  if (el) el.textContent = new Date().getFullYear();
+    'use strict';
+    var el = document.getElementById('copyright-year');
+    if (el) el.textContent = new Date().getFullYear();
 })();

static/assets/js/ga-init.js

@@ -1,8 +1,10 @@
 window.dataLayer = window.dataLayer || [];
-function gtag(){ window.dataLayer.push(arguments); }
+function gtag() {
+    window.dataLayer.push(arguments);
+}
 
-gtag("js", new Date());
-gtag("config", "G-36F29PDKRT", {
+gtag('js', new Date());
+gtag('config', 'G-36F29PDKRT', {
     // optional, but often helpful:
     anonymize_ip: true,
 });

static/assets/js/mobile-menu-helper.js

@@ -1,8 +1,7 @@
 const MOBILE_BREAKPOINT_PX = 768;
 
 /** All focusable elements inside the menu (links). */
-const getMenuFocusables = (menu) =>
-    menu.querySelectorAll('a[href]');
+const getMenuFocusables = (menu) => menu.querySelectorAll('a[href]');
 
 const mobileMenuHelper = () => {
     const mobileMenu = document.getElementById('nav-menu');
@@ -15,10 +14,7 @@ const mobileMenuHelper = () => {
     const syncMenuAriaHidden = () => {
         if (isMobile()) {
             const hidden = !mobileMenuToggle.checked;
-            mobileMenu.setAttribute(
-                'aria-hidden',
-                hidden ? 'true' : 'false',
-            );
+            mobileMenu.setAttribute('aria-hidden', hidden ? 'true' : 'false');
             // inert removes the subtree from the a11y tree and makes descendants non-focusable
             if (hidden) {
                 mobileMenu.setAttribute('inert', '');

static/assets/js/umami-helper.js

@@ -0,0 +1,25 @@
+// Umami: safe track (no-op if script blocked or not loaded)
+function umamiTrack(name, data) {
+    if (typeof window.umami !== 'undefined' && typeof window.umami.track === 'function') {
+        if (data != null) window.umami.track(name, data);
+        else window.umami.track(name);
+    }
+}
+
+// Umami: scroll depth (25%, 50%, 75%, 100%) – once per milestone
+const scrollMilestones = new Set();
+function onScroll() {
+    const doc = document.documentElement;
+    const scrollTop = doc.scrollTop || document.body.scrollTop;
+    const scrollHeight =
+        (doc.scrollHeight || document.body.scrollHeight) - window.innerHeight;
+    if (scrollHeight <= 0) return;
+    const pct = Math.round((scrollTop / scrollHeight) * 100);
+    for (const m of [25, 50, 75, 100]) {
+        if (pct >= m && !scrollMilestones.has(m)) {
+            scrollMilestones.add(m);
+            umamiTrack('scroll-depth', { depth: String(m) });
+        }
+    }
+}
+window.addEventListener('scroll', onScroll, { passive: true });

static/sitemap.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-    <url>
-        <loc>https://mifi.ventures/</loc>
-        <lastmod>2025-02-02</lastmod>
-        <changefreq>monthly</changefreq>
-        <priority>1.0</priority>
-    </url>
-</urlset>

stylelint.config.js

@@ -14,6 +14,12 @@ export default {
         'no-descending-specificity': null,
         'media-feature-name-value-no-unknown': null,
         'selector-pseudo-element-colon-notation': null,
+        'selector-pseudo-class-no-unknown': [
+            true,
+            {
+                ignorePseudoClasses: ['global'],
+            },
+        ],
     },
     overrides: [
         {

svelte.config.js

@@ -12,6 +12,10 @@ const config = {
             precompress: false,
             strict: true,
         }),
+        prerender: {
+            // Allow placeholder links to future pages (e.g. /seeded-cloud) without failing the build
+            handleHttpError: 'warn',
+        },
     },
 };
 

tests/cookie-options.spec.ts

@@ -0,0 +1,46 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('visual regression', () => {
+    test('cookie banner is visible', async ({ page }) => {
+        await page.goto('/');
+        await expect(page.locator('#cookie-banner')).toBeVisible();
+    });
+
+    test('cookie banner is not visible when choices are accepted', async ({ page }) => {
+        await page.goto('/');
+
+        await page.evaluate(() => {
+            localStorage.setItem('mifi-ventures-cookie-consent', 'accept');
+        });
+
+        await page.goto('/');
+        await expect(page.locator('#cookie-banner')).not.toBeVisible();
+    });
+
+    test('cookie banner is not visible when choices are rejected', async ({ page }) => {
+        await page.goto('/');
+
+        await page.evaluate(() => {
+            localStorage.setItem('mifi-ventures-cookie-consent', 'reject');
+        });
+
+        await page.goto('/');
+        await expect(page.locator('#cookie-banner')).not.toBeVisible();
+    });
+
+    test('cookie banner is hidden when user selects accept', async ({ page }) => {
+        await page.goto('/');
+        await expect(page.locator('#cookie-banner')).toBeVisible();
+        await page.locator('[data-consent="accept"]').click();
+        await expect(page.locator('#cookie-banner')).not.toBeVisible();
+        await expect(await page.evaluate(() => localStorage.getItem('mifi-ventures-cookie-consent'))).toBe('accept');
+    });
+
+    test('cookie banner is hidden when user selects reject', async ({ page }) => {
+        await page.goto('/');
+        await expect(page.locator('#cookie-banner')).toBeVisible();
+        await page.locator('[data-consent="reject"]').click();
+        await expect(page.locator('#cookie-banner')).not.toBeVisible();
+        await expect(await page.evaluate(() => localStorage.getItem('mifi-ventures-cookie-consent'))).toBe('reject');
+    });
+});

tests/unit/cookie-consent.test.ts

@@ -0,0 +1,116 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const SCRIPT_PATH = join(__dirname, '../../static/assets/js/cookie-consent.js');
+
+function createBannerDOM() {
+    const banner = document.createElement('div');
+    banner.id = 'cookie-banner';
+
+    const acceptBtn = document.createElement('button');
+    acceptBtn.type = 'button';
+    acceptBtn.dataset.consent = 'accept';
+
+    const rejectBtn = document.createElement('button');
+    rejectBtn.type = 'button';
+    rejectBtn.dataset.consent = 'reject';
+
+    banner.appendChild(acceptBtn);
+    banner.appendChild(rejectBtn);
+    document.body.appendChild(banner);
+
+    return { banner, acceptBtn, rejectBtn };
+}
+
+describe('cookie-consent.js', () => {
+    const STORAGE_KEY = 'mifi-ventures-cookie-consent';
+    let dom: ReturnType<typeof createBannerDOM>;
+
+    beforeEach(() => {
+        // Ensure a fresh DOM and storage for each test
+        document.body.innerHTML = '';
+        window.localStorage.clear();
+        dom = createBannerDOM();
+
+        const code = readFileSync(SCRIPT_PATH, 'utf8');
+        eval(code);
+        document.dispatchEvent(new Event('DOMContentLoaded'));
+    });
+
+    afterEach(() => {
+        dom.banner.remove();
+        vi.restoreAllMocks();
+        window.localStorage.clear();
+    });
+
+    it('shows banner when no preference is stored', () => {
+        expect(dom.banner.classList.contains('is-visible')).toBe(true);
+    });
+
+    it('hides banner and loads analytics when preference is "accept"', () => {
+        document.body.innerHTML = '';
+        window.localStorage.setItem(STORAGE_KEY, 'accept');
+        dom = createBannerDOM();
+
+        const appendChildSpy = vi.spyOn(document.head, 'appendChild');
+
+        const code = readFileSync(SCRIPT_PATH, 'utf8');
+        eval(code);
+        document.dispatchEvent(new Event('DOMContentLoaded'));
+
+        expect(dom.banner.classList.contains('is-visible')).toBe(false);
+        expect(appendChildSpy).toHaveBeenCalled();
+        const urls = appendChildSpy.mock.calls
+            .map((args) => (args[0] as HTMLScriptElement).src)
+            .filter(Boolean);
+        expect(urls.some((src) => src.includes('googletagmanager.com'))).toBe(true);
+    });
+
+    it('hides banner when preference is "reject" and does not load analytics', () => {
+        document.body.innerHTML = '';
+        window.localStorage.setItem(STORAGE_KEY, 'reject');
+        dom = createBannerDOM();
+
+        const appendChildSpy = vi.spyOn(document.head, 'appendChild');
+
+        const code = readFileSync(SCRIPT_PATH, 'utf8');
+        eval(code);
+        document.dispatchEvent(new Event('DOMContentLoaded'));
+
+        expect(dom.banner.classList.contains('is-visible')).toBe(false);
+        const urls = appendChildSpy.mock.calls
+            .map((args) => (args[0] as HTMLScriptElement).src)
+            .filter(Boolean);
+        expect(urls.some((src) => src.includes('googletagmanager.com'))).toBe(false);
+    });
+
+    it('stores "accept" in localStorage, hides banner, and loads analytics on accept click', () => {
+        const appendChildSpy = vi.spyOn(document.head, 'appendChild');
+
+        dom.acceptBtn.click();
+
+        expect(window.localStorage.getItem(STORAGE_KEY)).toBe('accept');
+        expect(dom.banner.classList.contains('is-visible')).toBe(false);
+        expect(appendChildSpy).toHaveBeenCalled();
+    });
+
+    it('stores "reject" in localStorage and hides banner on reject click', () => {
+        const appendChildSpy = vi.spyOn(document.head, 'appendChild');
+
+        dom.rejectBtn.click();
+
+        expect(window.localStorage.getItem(STORAGE_KEY)).toBe('reject');
+        expect(dom.banner.classList.contains('is-visible')).toBe(false);
+        const urls = appendChildSpy.mock.calls
+            .map((args) => (args[0] as HTMLScriptElement).src)
+            .filter(Boolean);
+        expect(urls.some((src) => src.includes('googletagmanager.com'))).toBe(false);
+    });
+});
+

tests/visual.spec.ts

@@ -7,6 +7,149 @@ test.describe('visual regression', () => {
         await expect(page.locator('h1')).toBeVisible();
         await expect(page.locator('#main')).toBeVisible();
         await expect(page.locator('.footer')).toBeVisible();
+        await expect(page.locator('#cookie-banner')).toBeVisible();
+
+        await page.evaluate(() => {
+            localStorage.setItem('mifi-ventures-cookie-consent', 'reject');
+        });
+
+        await page.goto('/');
+        await expect(page.locator('#cookie-banner')).not.toBeVisible();
         await expect(page).toHaveScreenshot('home.png', { fullPage: true });
     });
+
+    test('services page matches snapshot', async ({ page }) => {
+        await page.goto('/services');
+        await expect(page).toHaveTitle(/SaaS Architecture Services | mifi Ventures/);
+        await expect(page.locator('h1')).toBeVisible();
+        await expect(page.locator('#main')).toBeVisible();
+        await expect(page.locator('.footer')).toBeVisible();
+        await expect(page.locator('#cookie-banner')).toBeVisible();
+
+        await page.evaluate(() => {
+            localStorage.setItem('mifi-ventures-cookie-consent', 'reject');
+        });
+
+        await page.goto('/services');
+        await expect(page.locator('#cookie-banner')).not.toBeVisible();
+        await expect(page).toHaveScreenshot('services.png', { fullPage: true });
+    });
+
+    test('services/hands-on-saas-architecture-consultant page matches snapshot', async ({ page }) => {
+        await page.goto('/services/hands-on-saas-architecture-consultant');
+        await expect(page).toHaveTitle(/SaaS Product Architecture Consultant | mifi Ventures/);
+        await expect(page.locator('h1')).toBeVisible();
+        await expect(page.locator('#main')).toBeVisible();
+        await expect(page.locator('#faq')).toBeVisible();
+        await expect(page.locator('.footer')).toBeVisible();
+        await expect(page.locator('#cookie-banner')).toBeVisible();
+
+        await page.evaluate(() => {
+            localStorage.setItem('mifi-ventures-cookie-consent', 'reject');
+        });
+
+        await page.goto('/services/hands-on-saas-architecture-consultant');
+        await expect(page.locator('#cookie-banner')).not.toBeVisible();
+        await expect(page).toHaveScreenshot('services-hands-on-saas-architecture-consultant.png', { fullPage: true });
+    });
+
+    test('services/mvp-architecture-and-launch page matches snapshot', async ({ page }) => {
+        await page.goto('/services/mvp-architecture-and-launch');
+        await expect(page).toHaveTitle(/MVP Architecture & Launch Consultant | mifi Ventures/);
+        await expect(page.locator('h1')).toBeVisible();
+        await expect(page.locator('#main')).toBeVisible();
+        await expect(page.locator('#faq')).toBeVisible();
+        await expect(page.locator('.footer')).toBeVisible();
+        await expect(page.locator('#cookie-banner')).toBeVisible();
+
+        await page.evaluate(() => {
+            localStorage.setItem('mifi-ventures-cookie-consent', 'reject');
+        });
+
+        await page.goto('/services/mvp-architecture-and-launch');
+        await expect(page.locator('#cookie-banner')).not.toBeVisible();
+        await expect(page).toHaveScreenshot('services-mvp-architecture-and-launch.png', { fullPage: true });
+    });
+
+    test('services/fractional-cto-for-early-stage-saas page matches snapshot', async ({ page }) => {
+        await page.goto('/services/fractional-cto-for-early-stage-saas');
+        await expect(page).toHaveTitle(/Fractional CTO for Early-Stage SaaS | mifi Ventures/);
+        await expect(page.locator('h1')).toBeVisible();
+        await expect(page.locator('#main')).toBeVisible();
+        await expect(page.locator('#faq')).toBeVisible();
+        await expect(page.locator('.footer')).toBeVisible();
+        await expect(page.locator('#cookie-banner')).toBeVisible();
+
+        await page.evaluate(() => {
+            localStorage.setItem('mifi-ventures-cookie-consent', 'reject');
+        });
+
+        await page.goto('/services/fractional-cto-for-early-stage-saas');
+        await expect(page.locator('#cookie-banner')).not.toBeVisible();
+        await expect(page).toHaveScreenshot('services-fractional-cto-for-early-stage-saas.png', { fullPage: true });
+    });
+
+    test('services/stage-aligned-infrastructure page matches snapshot', async ({ page }) => {
+        await page.goto('/services/stage-aligned-infrastructure');
+        await expect(page).toHaveTitle(/Startup Infrastructure Strategy | mifi Ventures/);
+        await expect(page.locator('h1')).toBeVisible();
+        await expect(page.locator('#main')).toBeVisible();
+        await expect(page.locator('#faq')).toBeVisible();
+        await expect(page.locator('.footer')).toBeVisible();
+        await expect(page.locator('#cookie-banner')).toBeVisible();
+
+        await page.evaluate(() => {
+            localStorage.setItem('mifi-ventures-cookie-consent', 'reject');
+        });
+
+        await page.goto('/services/stage-aligned-infrastructure');
+        await expect(page.locator('#cookie-banner')).not.toBeVisible();
+        await expect(page).toHaveScreenshot('services-stage-aligned-infrastructure.png', { fullPage: true });
+    });
+
+    test('privacy policy page matches snapshot', async ({ page }) => {
+        await page.goto('/privacy-policy');
+        await expect(page).toHaveTitle(/Privacy Policy | mifi Ventures/);
+        await expect(page.locator('h1')).toBeVisible();
+        await expect(page.locator('#main')).toBeVisible();
+        await expect(page.locator('.footer')).toBeVisible();
+        await expect(page.locator('#cookie-banner')).toBeVisible();
+
+        await page.evaluate(() => {
+            localStorage.setItem('mifi-ventures-cookie-consent', 'reject');
+        });
+
+        await page.goto('/privacy-policy');
+        await expect(page.locator('#cookie-banner')).not.toBeVisible();
+        await expect(page).toHaveScreenshot('privacy-policy.png', { fullPage: true });
+    });
+
+    test('terms of service page matches snapshot', async ({ page }) => {
+        await page.goto('/terms-of-service');
+        await expect(page).toHaveTitle(/Terms of Service | mifi Ventures/);
+        await expect(page.locator('h1')).toBeVisible();
+        await expect(page.locator('#main')).toBeVisible();
+        await expect(page.locator('.footer')).toBeVisible();
+        await expect(page.locator('#cookie-banner')).toBeVisible();
+
+        await page.evaluate(() => {
+            localStorage.setItem('mifi-ventures-cookie-consent', 'reject');
+        });
+
+        await page.goto('/terms-of-service');
+        await expect(page.locator('#cookie-banner')).not.toBeVisible();
+        await expect(page).toHaveScreenshot('terms-of-service.png', { fullPage: true });
+    });
+
+    test('404 page matches snapshot', async ({ page }) => {
+        await page.goto('/404');
+        await expect(page).toHaveTitle(/404 | mifi Ventures/);
+        await expect(page).toHaveScreenshot('404.png', { fullPage: true });
+    });
+
+    test('410 page matches snapshot', async ({ page }) => { 
+        await page.goto('/410');
+        await expect(page).toHaveTitle(/410 | mifi Ventures/);
+        await expect(page).toHaveScreenshot('410.png', { fullPage: true });
+    });
 });