feat: rework /ai for hiring teams with proof, mobile layout and nav link

CHANGELOG.md

@@ -9,6 +9,16 @@ Versioning: [Semantic Versioning](https://semver.org/spec/v2.0.0.html)
 
 ## [Unreleased]
 
+### Changed (/ai for hiring teams: intro, proof, mobile, navigation)
+- `/ai` hero uses the approved copy: "I help organisations move AI from pilot to everyday use, safely.", a sub-line, three proof points (Medintegro, PharmaLogis, own AI operating system) and Download CV / Email me buttons
+- `/ai` closes with "Hiring a Technical PM or AI Implementation Lead?" (CV and email links) and a quieter line for AI product or pilot builders. No services or prices on `/ai`: the Services link is hidden in the header and footer on that page only
+- New Public proof section on `/ai`: Magic Kick, the private-use planner kept public as implementation proof (GitHub and live app links). Its issue-to-PR workflow, ADRs and AI routes are listed in the Harness, Memory and Tools pillars and in the project matrix
+- Privacy: `/ai` no longer names the personal OS or the language app. They are "My personal agent operating system" and "AI learning product" (Capstone, Dec 2026); AGENTS.md references are reduced to CLAUDE.md
+- Mobile (below 768px): the project matrix becomes one card per project (name, status, short description), and best practices, project applications, tool verdicts and the glossary show 3 items with a "Show all" toggle. A glossary search always shows every match. Desktop layout unchanged
+- Navigation: "AI" link to `/ai` in the header (desktop and mobile menu) and the footer
+- `/ai` section navigation, the same component as `/services`: an "On this page" list under the hero below 1360px, and from 1360px a rail in the left margin that fades in after the hero and marks the section in view (Proof, 01 Harness to 05 Cost, Projects, Glossary, Contact). The component moved from `site/ServicesSectionNav.jsx` to `common/SectionNav.jsx` (`SectionIndex`, `SectionRail`); `/services` is unchanged
+- Homepage: a "How I work with AI" teaser section after Delivery links to `/ai`. It replaces the one-line AI note that closed the Delivery section
+
 ### Changed (/ai project matrix)
 - Empty matrix cells show "n/a" instead of an em dash; the "Not applicable" label for screen readers is unchanged
 

src/assets/css/knowledge-base.css

@@ -5,6 +5,8 @@
   --kb-memory: #3ecf6c;
   --kb-tools: #f3c14e;
   --kb-cost: #f38b5e;
+  /* Accent for the shared section nav (common/SectionNav.jsx); same values as on /services. */
+  --sv2-accent-text: var(--brand);
   padding-bottom: 40px;
 }
 
@@ -14,6 +16,7 @@
   --kb-memory: #167a3a; /* 5.4:1 on light panels (WCAG AA) */
   --kb-tools: #946200;
   --kb-cost: #b8481c;
+  --sv2-accent-text: #136c33;
 }
 
 .kb-accent--harness { --kb-accent: var(--kb-harness); }
@@ -34,7 +37,10 @@
   border: 0;
 }
 
-.kb-section { padding-top: 56px; }
+.kb-section {
+  padding-top: 56px;
+  scroll-margin-top: calc(var(--nav-h, 72px) + 12px);
+}
 
 .kb-section__head,
 .kb-pillar__head {
@@ -348,6 +354,113 @@
   text-decoration: none;
 }
 
+/* Hero proof points (buttons follow them, inside .page-hero__extra) */
+.kb-hero-points {
+  display: grid;
+  gap: 10px;
+  max-width: 760px;
+  margin: 8px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.kb-hero-points li {
+  position: relative;
+  padding-left: 22px;
+  color: var(--muted-strong);
+  line-height: 1.6;
+}
+
+.kb-hero-points li::before {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 0.62em;
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--brand);
+}
+
+/* Public proof */
+.kb-proof-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+/* Mobile project cards (replace the matrix below 768px) */
+.kb-matrix-cards {
+  display: none;
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.kb-matrix-card {
+  padding: 14px 16px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--panel);
+}
+
+.kb-matrix-card__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  color: var(--text);
+}
+
+.kb-matrix-card p { margin: 6px 0 0; color: var(--muted-strong); line-height: 1.6; }
+
+/* Collapsible lists: toggle only exists below 768px */
+.kb-page .kb-collapse__toggle { display: none; }
+
+/* Closing call to action */
+.kb-closing h2 {
+  margin: 0 0 10px;
+  font-size: clamp(20px, 3vw, 26px);
+}
+
+.kb-closing a {
+  color: var(--brand);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  overflow-wrap: anywhere;
+}
+
+.kb-box .kb-closing__quiet {
+  margin-top: 14px;
+  color: var(--muted);
+  font-size: 14px;
+}
+
+@media (max-width: 767px) {
+  .kb-matrix { display: none; }
+  .kb-matrix-cards { display: grid; }
+
+  .kb-collapse:not(.kb-collapse--open) > .kb-collapse__extra { display: none; }
+
+  .kb-page .kb-collapse__toggle {
+    display: inline-flex;
+    align-items: center;
+    min-height: 44px;
+    margin-top: 6px;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--brand);
+    font: inherit;
+    font-weight: 600;
+    text-decoration: underline;
+    text-underline-offset: 3px;
+    cursor: pointer;
+  }
+}
+
 @media (max-width: 640px) {
   .kb-tools li {
     grid-template-columns: 58px 1fr;

src/assets/css/services-v2.css

@@ -510,7 +510,7 @@
   }
 }
 
-/* In-page navigation (ServicesSectionNav.jsx).
+/* In-page navigation (common/SectionNav.jsx), shared with /ai (which sets --sv2-accent-text in knowledge-base.css).
    Below 1360px: a static "On this page" index under the hero.
    1360 to 1599px: a compact rail in the left margin, numbers only, 56px from the content;
    the label shows as a tooltip on hover and focus (and is always the link's accessible name).

src/components/Footer.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Linkedin, Github, Mail, FileDown, ArrowUpRight } from "lucide-react";
-import { contact, identity, labels, nav, navServices } from "../content/site.js";
+import { contact, identity, labels, nav, navAi, navServices } from "../content/site.js";
 
 const SOCIAL_LINKS = [
   { label: "LinkedIn", href: contact.linkedin, icon: Linkedin },
@@ -11,7 +11,10 @@ const SOCIAL_LINKS = [
 
 export default function Footer() {
   const year = new Date().getFullYear();
-  const isHome = typeof window !== "undefined" && (window.location.pathname.replace(/\/+$/, "") || "/") === "/";
+  const path = typeof window !== "undefined" ? window.location.pathname.replace(/\/+$/, "") || "/" : "/";
+  const isHome = path === "/";
+  // Matches the header: no Services link on /ai.
+  const isAiPage = path === navAi.href;
 
   return (
     <footer className="site-footer">
@@ -49,8 +52,13 @@ export default function Footer() {
               </li>
             ))}
             <li>
-              <a href={navServices.href} className="footer__nav-link">{navServices.label}</a>
+              <a href={navAi.href} className="footer__nav-link">{navAi.label}</a>
             </li>
+            {isAiPage ? null : (
+              <li>
+                <a href={navServices.href} className="footer__nav-link">{navServices.label}</a>
+              </li>
+            )}
           </ul>
         </nav>