diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7bb24e3..89f60ab 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/assets/css/knowledge-base.css b/src/assets/css/knowledge-base.css
index f799a53..855848e 100644
--- a/src/assets/css/knowledge-base.css
+++ b/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;
diff --git a/src/assets/css/services-v2.css b/src/assets/css/services-v2.css
index 13cb9df..7ee15af 100644
--- a/src/assets/css/services-v2.css
+++ b/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).
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 26a90f0..98390b7 100644
--- a/src/components/Footer.jsx
+++ b/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>
 
diff --git a/src/components/KnowledgeBasePage.jsx b/src/components/KnowledgeBasePage.jsx
index 676ade0..47a1126 100644
--- a/src/components/KnowledgeBasePage.jsx
+++ b/src/components/KnowledgeBasePage.jsx
@@ -1,7 +1,9 @@
-import React, { useMemo, useState } from "react";
-import { ArrowRight, ArrowUpRight, Brain, Cpu, Gauge, Search, Sparkles, Wrench } from "lucide-react";
+import React, { useId, useMemo, useState } from "react";
+import { ArrowUpRight, Brain, Cpu, FileDown, Gauge, Mail, Search, Sparkles, Wrench } from "lucide-react";
 import PageHero from "./common/PageHero.jsx";
-import { kbGlossary, kbMeta, kbPillars, kbProjects } from "../data/aiKnowledgeBase.js";
+import { SectionIndex, SectionRail } from "./common/SectionNav.jsx";
+import { contact, labels } from "../content/site.js";
+import { kbClosing, kbGlossary, kbHero, kbMeta, kbPillars, kbProjects, kbPublicProof, kbSectionNav } from "../data/aiKnowledgeBase.js";
 
 const ICONS = { Brain, Cpu, Gauge, Sparkles, Wrench };
 
@@ -12,12 +14,45 @@ const MATRIX_PROJECTS = kbProjects.filter((project) =>
   kbPillars.some((pillar) => pillar.projects.some((item) => item.project === project.id)),
 );
 
+// On mobile, long lists show this many items until expanded. Desktop always shows everything (CSS).
+const PREVIEW_COUNT = 3;
+
 const slug = (value) => value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
 
 function Pill({ kind, value }) {
   return <span className={`kb-pill kb-pill--${kind}-${slug(value)}`}>{value}</span>;
 }
 
+// Renders every item; items past PREVIEW_COUNT get a class that CSS hides below 768px until opened.
+// renderItem(item, extraClass) must return a keyed element and apply extraClass to it.
+function CollapsibleList({ as = "ul", className = "", items, renderItem, forceOpen = false }) {
+  const [open, setOpen] = useState(false);
+  const id = useId();
+  const expanded = open || forceOpen;
+  const collapsible = items.length > PREVIEW_COUNT && !forceOpen;
+
+  return (
+    <>
+      {React.createElement(
+        as,
+        { id, className: `${className} kb-collapse ${expanded ? "kb-collapse--open" : ""}`.trim() },
+        items.map((item, index) => renderItem(item, index >= PREVIEW_COUNT ? "kb-collapse__extra" : "")),
+      )}
+      {collapsible ? (
+        <button
+          type="button"
+          className="kb-collapse__toggle"
+          aria-expanded={expanded}
+          aria-controls={id}
+          onClick={() => setOpen((value) => !value)}
+        >
+          {expanded ? "Show fewer" : `Show all ${items.length}`}
+        </button>
+      ) : null}
+    </>
+  );
+}
+
 function PillarNav() {
   return (
     <nav className="kb-pillar-nav" aria-label="Knowledge base pillars">
@@ -60,42 +95,71 @@ function PillarSection({ pillar }) {
       <div className="kb-two-col">
         <div className="kb-box kb-box--do">
           <h3>Best practices</h3>
-          <ul>{pillar.practices.map((item) => <li key={item}>{item}</li>)}</ul>
+          <CollapsibleList
+            items={pillar.practices}
+            renderItem={(item, extra) => <li key={item} className={extra || undefined}>{item}</li>}
+          />
         </div>
         <div className="kb-box kb-box--dont">
           <h3>Pitfalls</h3>
-          <ul>{pillar.pitfalls.map((item) => <li key={item}>{item}</li>)}</ul>
+          <CollapsibleList
+            items={pillar.pitfalls}
+            renderItem={(item, extra) => <li key={item} className={extra || undefined}>{item}</li>}
+          />
         </div>
       </div>
 
       <div className="kb-box kb-box--projects">
         <h3>In my projects</h3>
-        <ul className="kb-applications">
-          {pillar.projects.map((item) => (
-            <li key={`${item.project}-${item.text}`}>
+        <CollapsibleList
+          className="kb-applications"
+          items={pillar.projects}
+          renderItem={(item, extra) => (
+            <li key={`${item.project}-${item.text}`} className={extra || undefined}>
               <div className="kb-applications__meta">
                 <strong>{PROJECT_BY_ID[item.project]?.name || item.project}</strong>
                 <Pill kind="status" value={item.status} />
               </div>
               <p>{item.text}</p>
             </li>
-          ))}
-        </ul>
+          )}
+        />
       </div>
 
       <div className="kb-box">
         <h3>Tools: use, try, skip</h3>
-        <ul className="kb-tools">
-          {pillar.tools.map((tool) => (
-            <li key={tool.name}>
+        <CollapsibleList
+          className="kb-tools"
+          items={pillar.tools}
+          renderItem={(tool, extra) => (
+            <li key={tool.name} className={extra || undefined}>
               <Pill kind="verdict" value={tool.verdict} />
               <a href={tool.href} target="_blank" rel="noreferrer">
                 {tool.name} <ArrowUpRight size={13} aria-hidden="true" />
               </a>
               <span>{tool.note}</span>
             </li>
-          ))}
-        </ul>
+          )}
+        />
+      </div>
+    </section>
+  );
+}
+
+function PublicProof() {
+  return (
+    <section id="kb-proof" className="section container kb-section" aria-labelledby="kb-proof-title">
+      <header className="kb-section__head reveal">
+        <p className="kb-kicker">Public proof</p>
+        <h2 id="kb-proof-title"><span className="about__chev">&gt;</span> {kbPublicProof.name}</h2>
+        <p>{kbPublicProof.text}</p>
+      </header>
+      <div className="kb-proof-links">
+        {kbPublicProof.links.map((link) => (
+          <a key={link.href} href={link.href} className="btn btn--ghost" target="_blank" rel="noreferrer">
+            {link.label} <ArrowUpRight size={15} className="icon ml-1" aria-hidden="true" />
+          </a>
+        ))}
       </div>
     </section>
   );
@@ -139,6 +203,18 @@ function ProjectMatrix() {
           </tbody>
         </table>
       </div>
+      {/* Below 768px the table is hidden and each project is a card. */}
+      <ul className="kb-matrix-cards" aria-label="Projects">
+        {MATRIX_PROJECTS.map((project) => (
+          <li key={project.id} className="kb-matrix-card">
+            <div className="kb-matrix-card__head">
+              <strong>{project.name}</strong>
+              <Pill kind="status" value={project.status} />
+            </div>
+            <p>{project.note}</p>
+          </li>
+        ))}
+      </ul>
     </section>
   );
 }
@@ -181,17 +257,22 @@ function Glossary() {
         </div>
       </div>
       <p className="kb-glossary__count" aria-live="polite">{entries.length} terms</p>
-      <dl className="kb-glossary">
-        {entries.map((entry) => (
-          <div key={entry.term} className={`kb-glossary__item kb-accent--${entry.pillar}`}>
+      {/* A search shows every match, so the mobile preview only applies to browsing. */}
+      <CollapsibleList
+        as="dl"
+        className="kb-glossary"
+        items={entries}
+        forceOpen={query.trim() !== ""}
+        renderItem={(entry, extra) => (
+          <div key={entry.term} className={`kb-glossary__item kb-accent--${entry.pillar} ${extra}`.trim()}>
             <dt>
               {entry.term}
               <a href={`#${entry.pillar}`} className="kb-glossary__tag">{PILLAR_BY_ID[entry.pillar]?.title}</a>
             </dt>
             <dd>{entry.def}</dd>
           </div>
-        ))}
-      </dl>
+        )}
+      />
     </section>
   );
 }
@@ -200,13 +281,29 @@ export default function KnowledgeBasePage() {
   return (
     <div className="kb-page">
       <PageHero
+        id="kb-top"
         eyebrow={`${kbMeta.title} · Last reviewed ${kbMeta.lastReviewed}`}
-        title="How I build with AI agents"
-        subtitle={kbMeta.intro}
-        primaryCta={{ label: "Start with the five pillars", href: "#kb-pillars", icon: <ArrowRight size={15} className="icon ml-1" aria-hidden="true" /> }}
-        secondaryCta={{ label: "Jump to glossary", href: "#kb-glossary" }}
+        title={kbHero.title}
+        subtitle={kbHero.subtitle}
         showScrollCue={false}
-      />
+      >
+        <ul className="kb-hero-points" aria-label="Proof points">
+          {kbHero.proofPoints.map((point) => <li key={point}>{point}</li>)}
+        </ul>
+        <div className="page-hero__actions">
+          <a href={contact.cvUrl} className="btn btn--primary" download>
+            {labels.downloadCv} <FileDown size={15} className="icon ml-1" aria-hidden="true" />
+          </a>
+          <a href={contact.emailHref} className="btn btn--ghost">
+            {labels.emailMe} <Mail size={15} className="icon ml-1" aria-hidden="true" />
+          </a>
+        </div>
+        <SectionIndex nav={kbSectionNav} />
+      </PageHero>
+
+      <SectionRail nav={kbSectionNav} heroId="kb-top" />
+
+      <PublicProof />
 
       <section id="kb-pillars" className="section container kb-section" aria-labelledby="kb-pillars-title">
         <header className="kb-section__head reveal">
@@ -233,6 +330,17 @@ export default function KnowledgeBasePage() {
           </p>
         </div>
       </section>
+
+      <section id="kb-contact" className="section container kb-section" aria-labelledby="kb-closing-title">
+        <div className="kb-box kb-closing">
+          <h2 id="kb-closing-title">{kbClosing.title}</h2>
+          <p>
+            {"Here's "}<a href={contact.cvUrl} download>my CV</a>, or email{" "}
+            <a href={contact.emailHref}>{contact.email}</a>.
+          </p>
+          <p className="kb-closing__quiet">{kbClosing.quiet}</p>
+        </div>
+      </section>
     </div>
   );
 }
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index a3ce1b5..7a6d270 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState, useCallback } from "react";
 import ThemeSwitcher from "./ThemeSwitcher.jsx";
 import NavControls from "./NavControls.jsx";
-import { identity, labels, nav, navServices } from "../content/site.js";
+import { identity, labels, nav, navAi, navServices } from "../content/site.js";
 
 // 800px matches the CSS mobile breakpoint
 const MOBILE_MQ = "(max-width: 800px)";
@@ -19,6 +19,8 @@ export default function Navbar({ themeMode, onThemeChange }) {
   const path = currentPath();
   const isHome = path === "/";
   const isServicesPage = path === navServices.href;
+  // /ai is written for hiring teams, so the Services link is hidden there.
+  const isAiPage = path === navAi.href;
   // Anchors scroll on the landing page and link back to it from every other page.
   const navIds = useMemo(() => (isHome ? nav.map((item) => item.id) : []), [isHome]);
   // Exception: on /services, Contact points to that page's own #contact section, because the
@@ -168,14 +170,26 @@ export default function Navbar({ themeMode, onThemeChange }) {
           ))}
           <li>
             <a
-              href={navServices.href}
-              className={`nav__link ${isServicesPage ? "nav__link--active" : ""}`}
-              aria-current={isServicesPage ? "page" : undefined}
+              href={navAi.href}
+              className={`nav__link ${isAiPage ? "nav__link--active" : ""}`}
+              aria-current={isAiPage ? "page" : undefined}
               onClick={() => setIsOpen(false)}
             >
-              {navServices.label}
+              {navAi.label}
             </a>
           </li>
+          {isAiPage ? null : (
+            <li>
+              <a
+                href={navServices.href}
+                className={`nav__link ${isServicesPage ? "nav__link--active" : ""}`}
+                aria-current={isServicesPage ? "page" : undefined}
+                onClick={() => setIsOpen(false)}
+              >
+                {navServices.label}
+              </a>
+            </li>
+          )}
         </ul>
 
         <div className="nav__actions">
diff --git a/src/components/site/ServicesSectionNav.jsx b/src/components/common/SectionNav.jsx
similarity index 92%
rename from src/components/site/ServicesSectionNav.jsx
rename to src/components/common/SectionNav.jsx
index bca9465..6ef9719 100644
--- a/src/components/site/ServicesSectionNav.jsx
+++ b/src/components/common/SectionNav.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 
-// In-page navigation for /services, in two forms:
+// In-page navigation for long pages (/services, /ai), in two forms:
 // - "index": a static list under the hero, shown below 1360px (phones, tablets, small laptops).
 // - "rail": a fixed list in the left margin, shown from 1360px. It fades in after the hero
 //   and highlights the section in view. Up to 1599px it shows numbers only (labels on hover
@@ -24,7 +24,7 @@ function useActiveSection(ids) {
           if (entry.isIntersecting) inBand.add(entry.target.id);
           else inBand.delete(entry.target.id);
         }
-        // Unlisted sections (Who you work with, Fit) leave nothing highlighted.
+        // Unlisted sections leave nothing highlighted.
         setActive(ids.find((id) => inBand.has(id)) || "");
       },
       { rootMargin: ACTIVE_BAND }
@@ -75,7 +75,7 @@ function SectionLinks({ items, active }) {
   );
 }
 
-export function ServicesSectionIndex({ nav }) {
+export function SectionIndex({ nav }) {
   return (
     <nav className="sv2-index" aria-label={nav.label}>
       <p className="sv2-index__label">{nav.label}</p>
@@ -84,7 +84,7 @@ export function ServicesSectionIndex({ nav }) {
   );
 }
 
-export function ServicesSectionRail({ nav, heroId }) {
+export function SectionRail({ nav, heroId }) {
   const ids = useMemo(() => nav.items.map((item) => item.id), [nav.items]);
   const active = useActiveSection(ids);
   const shown = usePastHero(heroId);
diff --git a/src/components/site/HomePage.jsx b/src/components/site/HomePage.jsx
index f8f7fc4..2c37aa3 100644
--- a/src/components/site/HomePage.jsx
+++ b/src/components/site/HomePage.jsx
@@ -3,6 +3,7 @@ import { CTAStrip, FeaturePill, PageHero, SectionHeader, StatusBadge } from "../
 import ProofCaseCard from "../common/ProofCaseCard.jsx";
 import {
   about,
+  aiTeaser,
   cases,
   contact,
   contactSection,
@@ -96,9 +97,12 @@ export default function HomePage() {
             </article>
           ))}
         </div>
+      </section>
+
+      <section id="ai" className="section container market-page__section">
+        <SectionHeader title={aiTeaser.title} text={aiTeaser.text} />
         <p className="home-delivery-note reveal">
-          {delivery.note}{" "}
-          <TextLink href={delivery.noteLink.href}>{delivery.noteLink.label}</TextLink>
+          <TextLink href={aiTeaser.link.href}>{aiTeaser.link.label}</TextLink>
         </p>
       </section>
 
diff --git a/src/components/site/ServicesPage.jsx b/src/components/site/ServicesPage.jsx
index a74eb5b..e302316 100644
--- a/src/components/site/ServicesPage.jsx
+++ b/src/components/site/ServicesPage.jsx
@@ -2,7 +2,7 @@ import { track } from "@vercel/analytics";
 import { ArrowRight, Calendar, CheckCircle2, FileDown, XCircle } from "lucide-react";
 import { CTAStrip, PageHero } from "../system/SystemVisuals.jsx";
 import { contact, services } from "../../content/site.js";
-import { ServicesSectionIndex, ServicesSectionRail } from "./ServicesSectionNav.jsx";
+import { SectionIndex, SectionRail } from "../common/SectionNav.jsx";
 
 // Section ids where a booking click counts as the hero or the closing CTA.
 const BOOKING_POSITIONS = { top: "hero", contact: "cta" };
@@ -56,10 +56,10 @@ export default function ServicesPage() {
         showScrollCue={false}
       >
         <p className="services-v2__credibility">{hero.credibility.join(" · ")}</p>
-        <ServicesSectionIndex nav={services.sectionNav} />
+        <SectionIndex nav={services.sectionNav} />
       </PageHero>
 
-      <ServicesSectionRail nav={services.sectionNav} heroId="top" />
+      <SectionRail nav={services.sectionNav} heroId="top" />
 
       <section id="patterns" className="services-v2__section container" aria-labelledby="patterns-title">
         <SectionHead kicker={patterns.kicker} title={patterns.title} id="patterns-title">
diff --git a/src/content/site.js b/src/content/site.js
index 5d78380..ad36ef3 100644
--- a/src/content/site.js
+++ b/src/content/site.js
@@ -32,6 +32,11 @@ export const nav = [
   { id: "contact", label: "Contact" },
 ];
 
+export const navAi = {
+  label: "AI",
+  href: "/ai",
+};
+
 export const navServices = {
   label: "Services",
   href: "/services",
@@ -123,10 +128,16 @@ export const delivery = {
     { title: "Build and integrate", text: "Configuration, integrations and data flows, acceptance testing with vendors and engineers." },
     { title: "Rollout and adoption", text: "Go-live, training, handover docs and support." },
   ],
-  note: "For my own builds I also run an AI-assisted delivery system: defined roles, one source of truth, decision logs and review gates.",
   noteLink: { label: "How I work with AI", href: "/ai" },
 };
 
+// Homepage teaser for /ai. Replaces the one-line note that used to close the Delivery section.
+export const aiTeaser = {
+  title: "How I work with AI",
+  text: "For my own builds I run a team of AI agents working daily from one versioned source of truth, with defined roles, decision logs and review gates. The AI page shows the setup, the practices that hold up, the tools I use and a public project you can inspect.",
+  link: { label: "See how I work with AI", href: "/ai" },
+};
+
 export const about = {
   title: "Technical PM. 20+ years in regulated industries.",
   photo: { src: "/images/profile-400.webp", alt: "Roman Mazuryk portrait" },
diff --git a/src/data/aiKnowledgeBase.js b/src/data/aiKnowledgeBase.js
index 634eba8..8cf966a 100644
--- a/src/data/aiKnowledgeBase.js
+++ b/src/data/aiKnowledgeBase.js
@@ -6,19 +6,62 @@
 export const kbMeta = {
   title: "AI Field Guide",
   lastReviewed: "30 Sep 2026",
-  intro:
-    "My working reference for building with AI agents: the terms, the practices that hold up, and the tools I actually use across my own projects. Five pillars, each tied back to a real build.",
   mentalModel:
     "The model is the engine. The harness is the car around it. Skills are the driving lessons. Memory is the logbook. Tools are the roads it can reach. Cost is the fuel budget.",
 };
 
+// Hero and closing copy approved by Roman; keep it verbatim.
+export const kbHero = {
+  title: "I help organisations move AI from pilot to everyday use, safely.",
+  subtitle:
+    "20+ years delivering software in regulated MedTech, pharma and logistics. This page shows how I build and run AI workflows in practice.",
+  proofPoints: [
+    "20+ multi-vendor OR and imaging integrations delivered at Medintegro, from requirements to acceptance testing and go-live.",
+    "Owned a system rollout at PharmaLogis, a GDP and ISO 9001 certified pharma logistics provider, steering engineers and vendors.",
+    "Built and run my own AI operating system: a team of AI agents working daily from one versioned source of truth.",
+  ],
+};
+
+export const kbClosing = {
+  title: "Hiring a Technical PM or AI Implementation Lead?",
+  quiet: "Building an AI product or pilot? Happy to compare notes.",
+};
+
+// In-page navigation (same component as /services). Pillars keep their numbers; other sections have none.
+export const kbSectionNav = {
+  label: "On this page",
+  items: [
+    { id: "kb-proof", label: "Proof" },
+    { id: "harness", number: "01", label: "Harness" },
+    { id: "skills", number: "02", label: "Skills" },
+    { id: "memory", number: "03", label: "Memory" },
+    { id: "tools", number: "04", label: "Tools" },
+    { id: "cost", number: "05", label: "Cost" },
+    { id: "kb-matrix", label: "Projects" },
+    { id: "kb-glossary", label: "Glossary" },
+    { id: "kb-contact", label: "Contact" },
+  ],
+};
+
+// Public repos only. No users or revenue claims.
+export const kbPublicProof = {
+  name: "Magic Kick",
+  text:
+    "The private-use planner I keep public as implementation proof. It has AI routes for coaching, weekly summaries and risk patterns, and is built with ADRs plus an issue-to-PR workflow.",
+  links: [
+    { label: "Code on GitHub", href: "https://github.com/romahawk/magic-kick" },
+    { label: "Live app", href: "https://magic-kick.vercel.app" },
+  ],
+};
+
+// status: the project's own state, shown on the mobile project cards.
 export const kbProjects = [
-  { id: "deutschon", name: "DeutschOn-AI", note: "MSc capstone: human-in-the-loop AI assessment for German B1 learners" },
-  { id: "magic-kick", name: "Magic Kick", note: "AI-augmented personal execution OS" },
-  { id: "alpharhythm", name: "AlphaRhythm", note: "Trading rule-compliance micro-SaaS" },
-  { id: "proof-engine", name: "Proof Engine", note: "90-day plan tracker where tasks close only with evidence" },
-  { id: "business-os", name: "AI-Business-OS", note: "Markdown + Git strategic OS that agents read first" },
-  { id: "portfolio", name: "mazuryk.dev", note: "This site" },
+  { id: "learning-product", name: "AI learning product", status: "In build", note: "Capstone, Dec 2026" },
+  { id: "magic-kick", name: "Magic Kick", status: "In use", note: "Private-use planner, public as implementation proof" },
+  { id: "alpharhythm", name: "AlphaRhythm", status: "Pre-beta", note: "Trading rule-compliance micro-SaaS" },
+  { id: "proof-engine", name: "Proof Engine", status: "In build", note: "90-day plan tracker where tasks close only with evidence" },
+  { id: "agent-os", name: "My personal agent operating system", status: "In use", note: "Markdown + Git strategic OS that agents read first" },
+  { id: "portfolio", name: "mazuryk.dev", status: "In use", note: "This site" },
 ];
 
 export const kbPillars = [
@@ -32,7 +75,7 @@ export const kbPillars = [
       "A harness is everything wrapped around the model that turns it into an agent: the loop that calls the model, the system prompt, the tools it may use, the permissions, and the rules for planning, checking and stopping. Claude Code is a harness. The same model behaves very differently inside a good or a bad one.",
     parts: [
       { term: "Agent loop", text: "Model thinks → calls a tool → reads the result → repeats until the task is done or it hands back control." },
-      { term: "Project instructions", text: "CLAUDE.md / AGENTS.md: the standing brief the agent reads at the start of every session." },
+      { term: "Project instructions", text: "CLAUDE.md: the standing brief the agent reads at the start of every session." },
       { term: "Plan mode", text: "The agent proposes a plan and waits for approval before touching files." },
       { term: "Hooks", text: "Deterministic scripts that fire on events (before a tool call, after an edit, on stop). Rules that must always hold belong here, not in prose." },
       { term: "Subagents", text: "Separate agents with their own context for a bounded job (search, review), so the main session stays clean." },
@@ -52,8 +95,9 @@ export const kbPillars = [
     ],
     projects: [
       { project: "portfolio", status: "In use", text: "CLAUDE.md defines the orient → branch → lint → build → PR loop, a freeze list and architecture rules the agent must not break." },
-      { project: "business-os", status: "In use", text: "AGENTS.md defines the entry protocol every agent follows before it touches a project." },
-      { project: "deutschon", status: "In use", text: "Sessions start from docs/STATE.md and decisions.md; work ships as small, bounded issues." },
+      { project: "agent-os", status: "In use", text: "An entry file defines the protocol every agent follows before it touches a project." },
+      { project: "magic-kick", status: "In use", text: "An issue-to-PR workflow: every change starts as a GitHub issue and lands as a pull request." },
+      { project: "learning-product", status: "In use", text: "Sessions start from docs/STATE.md and decisions.md; work ships as small, bounded issues." },
     ],
     tools: [
       { name: "Claude Code", href: "https://docs.claude.com/en/docs/claude-code/overview", verdict: "Use", note: "Primary harness." },
@@ -91,9 +135,9 @@ export const kbPillars = [
       "Two skills that cover the same job with different rules.",
     ],
     projects: [
-      { project: "deutschon", status: "In use", text: "A sync skill orients each strategy session from the repo's STATE and decision log, and flags what needs a ruling." },
+      { project: "learning-product", status: "In use", text: "A sync skill orients each strategy session from the repo's STATE and decision log, and flags what needs a ruling." },
       { project: "alpharhythm", status: "Pre-beta", text: "A sync skill reads NEXT_SESSION_START and the decisions log before any work begins." },
-      { project: "business-os", status: "In use", text: "Custom skills, packaged once and reused across Claude apps: recruiter research, VC-style pitch review, a German tutor." },
+      { project: "agent-os", status: "In use", text: "Custom skills, packaged once and reused across Claude apps: recruiter research, VC-style pitch review, a German tutor." },
     ],
     tools: [
       { name: "anthropics/skills", href: "https://github.com/anthropics/skills", verdict: "Use", note: "Reference for structure; skill-creator for building and testing." },
@@ -132,13 +176,14 @@ export const kbPillars = [
       "Storing personal or regulated data in memory tools that leave your control.",
     ],
     projects: [
-      { project: "business-os", status: "In use", text: "The strategic memory layer: goals, current focus, decision rules and a decision log in Markdown + Git." },
-      { project: "deutschon", status: "In use", text: "docs/STATE.md and decisions.md are the handover between strategy and build sessions." },
+      { project: "agent-os", status: "In use", text: "The strategic memory layer: goals, current focus, decision rules and a decision log in Markdown + Git." },
+      { project: "learning-product", status: "In use", text: "docs/STATE.md and decisions.md are the handover between strategy and build sessions." },
       { project: "alpharhythm", status: "Pre-beta", text: "NEXT_SESSION_START.md and DECISIONS_LOG.md make every session resumable in one read." },
-      { project: "proof-engine", status: "In build", text: "The 90-day plan lives as Markdown in AI-Business-OS; the app generates its data from it: one source, two views." },
+      { project: "magic-kick", status: "In use", text: "Architecture decisions are recorded as ADRs in the repo." },
+      { project: "proof-engine", status: "In build", text: "The 90-day plan lives as Markdown in my personal agent operating system; the app generates its data from it, so there is one source and two views." },
     ],
     tools: [
-      { name: "CLAUDE.md / AGENTS.md", href: "https://docs.claude.com/en/docs/claude-code/memory", verdict: "Use", note: "Built in. Keep it lean." },
+      { name: "CLAUDE.md", href: "https://docs.claude.com/en/docs/claude-code/memory", verdict: "Use", note: "Built in. Keep it lean." },
       { name: "repomix", href: "https://github.com/yamadashy/repomix", verdict: "Try", note: "Pack a repo into one file for a chat-based strategy session." },
       { name: "planning-with-files", href: "https://github.com/OthmanAdi/planning-with-files", verdict: "Skip", note: "Good pattern, but I already run it with my own state files." },
       { name: "claude-mem", href: "https://github.com/thedotmack/claude-mem", verdict: "Skip", note: "Would compete with existing state files as a second source of truth." },
@@ -172,7 +217,8 @@ export const kbPillars = [
       "Scraping sites whose terms forbid it.",
     ],
     projects: [
-      { project: "deutschon", status: "In build", text: "Claude via the Vercel AI SDK returns structured assessments checked against a schema; the teacher accepts, edits or rejects before a student sees anything." },
+      { project: "magic-kick", status: "In use", text: "AI routes for coaching, weekly summaries and risk patterns." },
+      { project: "learning-product", status: "In build", text: "Claude via the Vercel AI SDK returns structured assessments checked against a schema; the teacher accepts, edits or rejects before a student sees anything." },
     ],
     tools: [
       { name: "playwright-mcp", href: "https://github.com/microsoft/playwright-mcp", verdict: "Use", note: "Lets the agent test in a real browser." },
@@ -210,7 +256,7 @@ export const kbPillars = [
       "Cutting tokens by making output unreadable: cheaper, but slower to review.",
     ],
     projects: [
-      { project: "business-os", status: "In use", text: "A written usage discipline: one task per session, lean instruction files, periodic usage audits." },
+      { project: "agent-os", status: "In use", text: "A written usage discipline: one task per session, lean instruction files, periodic usage audits." },
     ],
     tools: [
       { name: "claude-hud", href: "https://github.com/jarrodwatts/claude-hud", verdict: "Use", note: "Shows context, tools and agents live in the status line." },
@@ -227,7 +273,7 @@ export const kbGlossary = [
   { term: "Agent loop", pillar: "harness", def: "The cycle of think → act (tool call) → observe result → repeat." },
   { term: "Harness", pillar: "harness", def: "The software around a model that makes it an agent: loop, prompt, tools, permissions, rules." },
   { term: "System prompt", pillar: "harness", def: "Standing instructions the harness gives the model before any user input." },
-  { term: "CLAUDE.md / AGENTS.md", pillar: "memory", def: "Project instruction files an agent loads at session start." },
+  { term: "CLAUDE.md", pillar: "memory", def: "A project instruction file an agent loads at session start." },
   { term: "Plan mode", pillar: "harness", def: "A mode where the agent proposes a plan and makes no changes until approved." },
   { term: "Hook", pillar: "harness", def: "A script that runs automatically on an agent event, used to enforce rules deterministically." },
   { term: "Subagent", pillar: "harness", def: "A helper agent with its own context window, used to isolate a bounded task." },