From 9d390da76b577bb8236fabbc8eecee357cb38bc5 Mon Sep 17 00:00:00 2001
From: TheFlow <theflow@sydigital.com>
Date: Sun, 19 Oct 2025 12:48:29 +1300
Subject: [PATCH] style(ui): update theme, branding, and GitHub repository
 links
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Update UI across all pages with:
- New favicon and brand icons (favicon-new.svg, tractatus-icon-new.svg)
- Theme CSS integration (tractatus-theme.min.css)
- Correct GitHub repository links (AgenticGovernance/tractatus)
- PWA manifest updates
- Consistent branding colors and gradients

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 public/about.html                       |  71 ++-----
 public/about/values.html                | 162 +++++++--------
 public/admin/audit-analytics.html       |   3 +-
 public/admin/blog-curation.html         |   1 +
 public/admin/case-moderation.html       |   3 +-
 public/admin/claude-md-migrator.html    |   1 +
 public/admin/dashboard.html             |   1 +
 public/admin/hooks-dashboard.html       |   1 +
 public/admin/login.html                 |   1 +
 public/admin/media-triage.html          |   3 +-
 public/admin/newsletter-management.html |   1 +
 public/admin/project-manager.html       |   3 +-
 public/admin/rule-manager.html          |   3 +-
 public/api-reference.html               |  32 +--
 public/architecture.html                | 106 ++++------
 public/blog-post.html                   |  84 +-------
 public/blog.html                        |  47 +----
 public/case-submission.html             | 162 ++-------------
 public/check-version.html               |  58 +-----
 public/demos/27027-demo.html            |   5 +-
 public/demos/boundary-demo.html         |   1 +
 public/demos/classification-demo.html   |   1 +
 public/demos/tractatus-demo.html        |   3 +-
 public/docs-viewer.html                 |   1 +
 public/faq.html                         |  66 +-----
 public/implementer.html                 |  78 ++------
 public/index.html                       | 255 ++++++++++++------------
 public/js/components/document-viewer.js |  24 ++-
 public/js/components/footer.js          |   6 +-
 public/js/components/navbar.js          |  41 +++-
 public/koha.html                        |   1 +
 public/koha/success.html                |  79 ++------
 public/koha/transparency.html           |  74 +++----
 public/leader.html                      |  96 ++++-----
 public/manifest.json                    |  12 +-
 public/media-inquiry.html               | 145 ++------------
 public/media-triage-transparency.html   |  56 +-----
 public/privacy.html                     |   1 +
 public/researcher.html                  | 106 ++++------
 public/service-worker.js                |  63 +++---
 public/version.json                     |  12 +-
 41 files changed, 627 insertions(+), 1242 deletions(-)

diff --git a/public/about.html b/public/about.html
index 0a18b2fe..c3649c37 100644
--- a/public/about.html
+++ b/public/about.html
@@ -5,7 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>About | Tractatus AI Safety Framework</title>
   <meta name="description" content="Learn about the Tractatus Framework: our mission, values, team, and commitment to preserving human agency through structural AI safety.">
+  <link rel="stylesheet" href="/css/fonts.css">
   <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
   <style>
     /* Accessibility: Skip link */
     .skip-link { position: absolute; left: -9999px; top: 0; }
@@ -28,6 +30,17 @@
   <!-- Navigation (injected by navbar.js) -->
   <script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
 
+  <!-- Breadcrumb Navigation -->
+  <nav class="bg-gray-50 border-b border-gray-200 py-3" aria-label="Breadcrumb">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <ol class="flex items-center space-x-2 text-sm">
+        <li><a href="/" class="hover:underline transition-colors" style="color: var(--tractatus-core-end);">Home</a></li>
+        <li class="text-gray-400">/</li>
+        <li class="text-gray-900 font-medium" aria-current="page">About</li>
+      </ol>
+    </div>
+  </nav>
+
   <!-- Hero Section -->
   <div class="bg-gradient-to-br from-blue-50 to-purple-50 py-20">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -229,60 +242,12 @@
 
   <!-- Footer with Te Tiriti Acknowledgment -->
   <!-- Footer -->
-  <footer class="bg-gray-900 text-gray-400 py-12 mt-16" role="contentinfo">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="grid grid-cols-1 md:grid-cols-5 gap-8">
-        <div>
-          <h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
-          <p class="text-sm">
-            Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
-          </p>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Resources</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
-            <li><a href="/demos/tractatus-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
-            <li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
-            <li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
-            <li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
-            <li><a href="/about.html" class="hover:text-white transition">About & Values</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Community</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
-            <li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
-            <li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
-            <li><a href="/#newsletter" class="hover:text-white transition">Newsletter</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Support This Work</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
-            <li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Acknowledgment</h3>
-          <p class="text-sm">
-            This framework acknowledges Te Tiriti o Waitangi and indigenous leadership in digital sovereignty.
-            Built with respect for CARE Principles and Māori data sovereignty.
-          </p>
-        </div>
-      </div>
-      <div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
-        <p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
-        <p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
-      </div>
-    </div>
-  </footer>
-
   <!-- Internationalization -->
-  <script src="/js/i18n-simple.js?v=0.1.0.1760643941"></script>
-  <script src="/js/components/language-selector.js?v=0.1.0.1760643941"></script>
+  <script src="/js/i18n-simple.js?v=1760818106"></script>
+  <script src="/js/components/language-selector.js?v=1760818106"></script>
+
+  <!-- Footer Component -->
+  <script src="/js/components/footer.js"></script>
 
 </body>
 </html>
diff --git a/public/about/values.html b/public/about/values.html
index 641204a2..44753dce 100644
--- a/public/about/values.html
+++ b/public/about/values.html
@@ -5,7 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Values & Principles | Tractatus AI Safety Framework</title>
   <meta name="description" content="Our core values: sovereignty, transparency, harmlessness, and community. Including our commitment to Te Tiriti o Waitangi and indigenous data sovereignty.">
+  <link rel="stylesheet" href="/css/fonts.css">
   <link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
   <style>
     html { scroll-behavior: smooth; }
 
@@ -34,10 +36,10 @@
   <div class="bg-gradient-to-br from-purple-50 to-blue-50 py-20">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="text-center">
-        <h1 class="text-5xl font-bold text-gray-900 mb-6">
+        <h1 class="text-5xl font-bold text-gray-900 mb-6" data-i18n="header.title">
           Values & Principles
         </h1>
-        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
+        <p class="text-xl text-gray-600 max-w-3xl mx-auto" data-i18n="header.subtitle">
           The foundational values that guide the Tractatus Framework's development, governance, and community.
         </p>
       </div>
@@ -47,13 +49,13 @@
   <!-- Table of Contents -->
   <main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
     <div class="bg-white rounded-lg shadow-sm p-6">
-      <h2 class="text-lg font-bold text-gray-900 mb-4">Contents</h2>
+      <h2 class="text-lg font-bold text-gray-900 mb-4" data-i18n="toc.heading">Contents</h2>
       <nav class="space-y-2">
-        <a href="#core-values" class="block text-blue-600 hover:text-blue-700">Core Values</a>
-        <a href="#sovereignty" class="block text-blue-600 hover:text-blue-700 pl-4">• Sovereignty</a>
-        <a href="#transparency" class="block text-blue-600 hover:text-blue-700 pl-4">• Transparency</a>
-        <a href="#harmlessness" class="block text-blue-600 hover:text-blue-700 pl-4">• Harmlessness</a>
-        <a href="#community" class="block text-blue-600 hover:text-blue-700 pl-4">• Community</a>
+        <a href="#core-values" class="block text-blue-600 hover:text-blue-700" data-i18n="toc.core_values">Core Values</a>
+        <a href="#sovereignty" class="block text-blue-600 hover:text-blue-700 pl-4" data-i18n="toc.sovereignty">• Sovereignty</a>
+        <a href="#transparency" class="block text-blue-600 hover:text-blue-700 pl-4" data-i18n="toc.transparency">• Transparency</a>
+        <a href="#harmlessness" class="block text-blue-600 hover:text-blue-700 pl-4" data-i18n="toc.harmlessness">• Harmlessness</a>
+        <a href="#community" class="block text-blue-600 hover:text-blue-700 pl-4" data-i18n="toc.community">• Community</a>
         <a href="#te-tiriti" class="block text-blue-600 hover:text-blue-700">Te Tiriti o Waitangi & Digital Sovereignty</a>
         <a href="#indigenous-data-sovereignty" class="block text-blue-600 hover:text-blue-700">Indigenous Data Sovereignty</a>
         <a href="#governance" class="block text-blue-600 hover:text-blue-700">Governance & Accountability</a>
@@ -66,21 +68,21 @@
 
     <!-- Core Values -->
     <section id="core-values" class="mb-16">
-      <h2 class="text-3xl font-bold text-gray-900 mb-6">Core Values</h2>
+      <h2 class="text-3xl font-bold text-gray-900 mb-6" data-i18n="core_values.heading">Core Values</h2>
       <div class="prose prose-lg text-gray-600 mb-8">
-        <p>
+        <p data-i18n="core_values.intro">
           These four values form the foundation of the Tractatus Framework. They are not aspirational—they are architectural. The framework is designed to enforce these values through structure, not training.
         </p>
       </div>
 
       <!-- Sovereignty -->
       <div id="sovereignty" class="mb-12 bg-white rounded-lg shadow-md p-8 border-l-4 border-green-600">
-        <h3 class="text-2xl font-bold text-gray-900 mb-4">1. Sovereignty</h3>
+        <h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="sovereignty.title">1. Sovereignty</h3>
         <p class="text-gray-600 mb-4">
-          <strong>Principle:</strong> Individuals and communities must maintain control over decisions affecting their data, privacy, values, and agency. AI systems must preserve human sovereignty, not erode it.
+          <strong data-i18n="sovereignty.principle">Principle:</strong> <span data-i18n="sovereignty.principle_text">Individuals and communities must maintain control over decisions affecting their data, privacy, values, and agency. AI systems must preserve human sovereignty, not erode it.</span>
         </p>
 
-        <h4 class="text-lg font-semibold text-gray-900 mb-2">What This Means in Practice:</h4>
+        <h4 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="sovereignty.practice_heading">What This Means in Practice:</h4>
         <ul class="list-disc list-inside text-gray-600 space-y-2 mb-4">
           <li>AI cannot make values trade-offs (e.g., privacy vs. convenience) without human approval</li>
           <li>Users can always override AI decisions</li>
@@ -89,7 +91,7 @@
           <li>No paternalistic "AI knows best" approaches</li>
         </ul>
 
-        <h4 class="text-lg font-semibold text-gray-900 mb-2">Framework Implementation:</h4>
+        <h4 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="sovereignty.framework_heading">Framework Implementation:</h4>
         <ul class="list-disc list-inside text-gray-600 space-y-2">
           <li><strong>BoundaryEnforcer</strong> blocks values decisions requiring human judgment</li>
           <li><strong>InstructionPersistenceClassifier</strong> respects STRATEGIC and HIGH persistence instructions</li>
@@ -99,12 +101,12 @@
 
       <!-- Transparency -->
       <div id="transparency" class="mb-12 bg-white rounded-lg shadow-md p-8 border-l-4 border-blue-600">
-        <h3 class="text-2xl font-bold text-gray-900 mb-4">2. Transparency</h3>
+        <h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="transparency.title">2. Transparency</h3>
         <p class="text-gray-600 mb-4">
-          <strong>Principle:</strong> All AI decisions must be explainable, auditable, and reversible. No black boxes. Users deserve to understand how and why systems make choices.
+          <strong data-i18n="transparency.principle">Principle:</strong> <span data-i18n="transparency.principle_text">All AI decisions must be explainable, auditable, and reversible. No black boxes. Users deserve to understand how and why systems make choices.</span>
         </p>
 
-        <h4 class="text-lg font-semibold text-gray-900 mb-2">What This Means in Practice:</h4>
+        <h4 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="transparency.practice_heading">What This Means in Practice:</h4>
         <ul class="list-disc list-inside text-gray-600 space-y-2 mb-4">
           <li>Every AI decision includes reasoning and evidence</li>
           <li>Users can inspect instruction history and classification</li>
@@ -113,7 +115,7 @@
           <li>Source code is open and auditable</li>
         </ul>
 
-        <h4 class="text-lg font-semibold text-gray-900 mb-2">Framework Implementation:</h4>
+        <h4 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="transparency.framework_heading">Framework Implementation:</h4>
         <ul class="list-disc list-inside text-gray-600 space-y-2">
           <li><strong>CrossReferenceValidator</strong> shows which instruction conflicts with proposed action</li>
           <li><strong>MetacognitiveVerifier</strong> provides reasoning analysis and confidence scores</li>
@@ -123,12 +125,12 @@
 
       <!-- Harmlessness -->
       <div id="harmlessness" class="mb-12 bg-white rounded-lg shadow-md p-8 border-l-4 border-purple-600">
-        <h3 class="text-2xl font-bold text-gray-900 mb-4">3. Harmlessness</h3>
+        <h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="harmlessness.title">3. Harmlessness</h3>
         <p class="text-gray-600 mb-4">
-          <strong>Principle:</strong> AI systems must not cause harm through action or inaction. This includes preventing drift, detecting degradation, and enforcing boundaries against values erosion.
+          <strong data-i18n="harmlessness.principle">Principle:</strong> <span data-i18n="harmlessness.principle_text">AI systems must not cause harm through action or inaction. This includes preventing drift, detecting degradation, and enforcing boundaries against values erosion.</span>
         </p>
 
-        <h4 class="text-lg font-semibold text-gray-900 mb-2">What This Means in Practice:</h4>
+        <h4 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="harmlessness.practice_heading">What This Means in Practice:</h4>
         <ul class="list-disc list-inside text-gray-600 space-y-2 mb-4">
           <li>Prevent parameter contradictions (e.g., 27027 incident)</li>
           <li>Detect and halt values drift before deployment</li>
@@ -137,7 +139,7 @@
           <li>Fail safely: when uncertain, ask rather than assume</li>
         </ul>
 
-        <h4 class="text-lg font-semibold text-gray-900 mb-2">Framework Implementation:</h4>
+        <h4 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="harmlessness.framework_heading">Framework Implementation:</h4>
         <ul class="list-disc list-inside text-gray-600 space-y-2">
           <li><strong>ContextPressureMonitor</strong> detects when error probability increases</li>
           <li><strong>BoundaryEnforcer</strong> prevents values drift</li>
@@ -147,12 +149,12 @@
 
       <!-- Community -->
       <div id="community" class="mb-12 bg-white rounded-lg shadow-md p-8 border-l-4 border-orange-600">
-        <h3 class="text-2xl font-bold text-gray-900 mb-4">4. Community</h3>
+        <h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="community.title">4. Community</h3>
         <p class="text-gray-600 mb-4">
           <strong>Principle:</strong> AI safety is a collective endeavor, not a corporate product. Communities must have tools, knowledge, and agency to shape AI systems affecting their lives.
         </p>
 
-        <h4 class="text-lg font-semibold text-gray-900 mb-2">What This Means in Practice:</h4>
+        <h4 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="community.practice_heading">What This Means in Practice:</h4>
         <ul class="list-disc list-inside text-gray-600 space-y-2 mb-4">
           <li>Open source framework under permissive Apache License 2.0 (with patent protection)</li>
           <li>Accessible documentation and educational resources</li>
@@ -161,7 +163,7 @@
           <li>No paywalls, no vendor lock-in, no proprietary control</li>
         </ul>
 
-        <h4 class="text-lg font-semibold text-gray-900 mb-2">Framework Implementation:</h4>
+        <h4 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="community.framework_heading">Framework Implementation:</h4>
         <ul class="list-disc list-inside text-gray-600 space-y-2">
           <li>All code publicly available on GitHub</li>
           <li>Interactive demos for education and advocacy</li>
@@ -172,52 +174,52 @@
 
     <!-- Te Tiriti o Waitangi -->
     <section id="te-tiriti" class="mb-16">
-      <h2 class="text-3xl font-bold text-gray-900 mb-6">Te Tiriti o Waitangi & Digital Sovereignty</h2>
+      <h2 class="text-3xl font-bold text-gray-900 mb-6" data-i18n="te_tiriti_section.title">Te Tiriti o Waitangi & Digital Sovereignty</h2>
 
       <div class="bg-blue-50 border-l-4 border-blue-600 p-6 rounded-r-lg mb-8">
         <p class="text-blue-900 mb-4">
-          <strong>Context:</strong> The Tractatus Framework is developed in Aotearoa New Zealand. We acknowledge Te Tiriti o Waitangi (the Treaty of Waitangi, 1840) as the founding document of this nation, and recognize the ongoing significance of tino rangatiratanga (self-determination) and kaitiakitanga (guardianship) in the digital realm.
+          <strong data-i18n="te_tiriti_section.context_label">Context:</strong> <span data-i18n="te_tiriti_section.context_text">The Tractatus Framework is developed in Aotearoa New Zealand. We acknowledge Te Tiriti o Waitangi (the Treaty of Waitangi, 1840) as the founding document of this nation, and recognize the ongoing significance of tino rangatiratanga (self-determination) and kaitiakitanga (guardianship) in the digital realm.</span>
         </p>
         <p class="text-blue-900">
-          This acknowledgment is not performative. Digital sovereignty—the principle that communities control their own data and technology—has deep roots in indigenous frameworks that predate Western tech by centuries.
+          <span data-i18n="te_tiriti_section.context_para2">This acknowledgment is not performative. Digital sovereignty—the principle that communities control their own data and technology—has deep roots in indigenous frameworks that predate Western tech by centuries.</span>
         </p>
       </div>
 
-      <h3 class="text-xl font-bold text-gray-900 mb-4">Why This Matters for AI Safety</h3>
+      <h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="te_tiriti_section.why_matters_heading">Why This Matters for AI Safety</h3>
       <div class="prose prose-lg text-gray-600 mb-6">
         <p>
-          Te Tiriti o Waitangi establishes principles of partnership, protection, and participation. These principles directly inform the Tractatus Framework's approach to digital sovereignty:
+          <span data-i18n="te_tiriti_section.why_matters_text">Te Tiriti o Waitangi establishes principles of partnership, protection, and participation. These principles directly inform the Tractatus Framework\'s approach to digital sovereignty:</span>
         </p>
         <ul class="list-disc list-inside space-y-2">
-          <li><strong>Rangatiratanga (sovereignty):</strong> Communities must control decisions affecting their data and values</li>
-          <li><strong>Kaitiakitanga (guardianship):</strong> AI systems must be stewards, not exploiters, of data and knowledge</li>
-          <li><strong>Mana (authority & dignity):</strong> Technology must respect human dignity and cultural context</li>
-          <li><strong>Whanaungatanga (relationships):</strong> AI safety is collective, not individual—relationships matter</li>
+          <li><strong data-i18n="te_tiriti_section.rangatiratanga_label">Rangatiratanga (sovereignty):</strong> <span data-i18n="te_tiriti_section.rangatiratanga_text">Communities must control decisions affecting their data and values</span></li>
+          <li><strong data-i18n="te_tiriti_section.kaitiakitanga_label">Kaitiakitanga (guardianship):</strong> <span data-i18n="te_tiriti_section.kaitiakitanga_text">AI systems must be stewards, not exploiters, of data and knowledge</span></li>
+          <li><strong data-i18n="te_tiriti_section.mana_label">Mana (authority & dignity):</strong> <span data-i18n="te_tiriti_section.mana_text">Technology must respect human dignity and cultural context</span></li>
+          <li><strong data-i18n="te_tiriti_section.whanaungatanga_label">Whanaungatanga (relationships):</strong> <span data-i18n="te_tiriti_section.whanaungatanga_text">AI safety is collective, not individual—relationships matter</span></li>
         </ul>
       </div>
 
-      <h3 class="text-xl font-bold text-gray-900 mb-4">Our Approach</h3>
+      <h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="te_tiriti_section.approach_heading">Our Approach</h3>
       <div class="prose prose-lg text-gray-600 mb-6">
         <p>
-          We do not claim to speak for Māori or indigenous communities. Instead, we:
+          <span data-i18n="te_tiriti_section.approach_intro">We do not claim to speak for Māori or indigenous communities. Instead, we:</span>
         </p>
         <ul class="list-disc list-inside space-y-2">
-          <li><strong>Follow established frameworks:</strong> We align with <em>Te Mana Raraunga</em> (Māori Data Sovereignty Network) and CARE Principles for Indigenous Data Governance</li>
-          <li><strong>Respect without tokenism:</strong> Te Tiriti forms part of our strategic foundation, not a superficial overlay</li>
-          <li><strong>Avoid premature engagement:</strong> We will not approach Māori organizations for endorsement until we have demonstrated value and impact</li>
-          <li><strong>Document and learn:</strong> We study indigenous data sovereignty principles and incorporate them architecturally</li>
+          <li><strong data-i18n="te_tiriti_section.approach_frameworks_label">Follow established frameworks:</strong> <span data-i18n="te_tiriti_section.approach_frameworks_text">We align with <em>Te Mana Raraunga</em> (Māori Data Sovereignty Network) and CARE Principles for Indigenous Data Governance</span></li>
+          <li><strong data-i18n="te_tiriti_section.approach_respect_label">Respect without tokenism:</strong> <span data-i18n="te_tiriti_section.approach_respect_text">Te Tiriti forms part of our strategic foundation, not a superficial overlay</span></li>
+          <li><strong data-i18n="te_tiriti_section.approach_engagement_label">Avoid premature engagement:</strong> <span data-i18n="te_tiriti_section.approach_engagement_text">We will not approach Māori organizations for endorsement until we have demonstrated value and impact</span></li>
+          <li><strong data-i18n="te_tiriti_section.approach_learn_label">Document and learn:</strong> <span data-i18n="te_tiriti_section.approach_learn_text">We study indigenous data sovereignty principles and incorporate them architecturally</span></li>
         </ul>
       </div>
 
       <div class="bg-gray-100 rounded-lg p-6">
-        <h4 class="text-lg font-semibold text-gray-900 mb-3">Te Tiriti Principles in Practice</h4>
+        <h4 class="text-lg font-semibold text-gray-900 mb-3" data-i18n="te_tiriti_section.principles_heading">Te Tiriti Principles in Practice</h4>
         <div class="space-y-4 text-sm text-gray-700">
           <div class="flex items-start">
             <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0 mt-1">
               <span class="text-green-700 font-bold">✓</span>
             </div>
             <div>
-              <strong>Partnership:</strong> AI systems should be developed in partnership with affected communities, not imposed upon them.
+              <strong data-i18n="te_tiriti_section.partnership_label">Partnership:</strong> <span data-i18n="te_tiriti_section.partnership_text">AI systems should be developed in partnership with affected communities, not imposed upon them.</span>
             </div>
           </div>
           <div class="flex items-start">
@@ -225,7 +227,7 @@
               <span class="text-green-700 font-bold">✓</span>
             </div>
             <div>
-              <strong>Protection:</strong> The framework protects against values erosion, ensuring cultural contexts are not overridden by AI assumptions.
+              <strong data-i18n="te_tiriti_section.protection_label">Protection:</strong> <span data-i18n="te_tiriti_section.protection_text">The framework protects against values erosion, ensuring cultural contexts are not overridden by AI assumptions.</span>
             </div>
           </div>
           <div class="flex items-start">
@@ -233,7 +235,7 @@
               <span class="text-green-700 font-bold">✓</span>
             </div>
             <div>
-              <strong>Participation:</strong> Communities maintain agency over AI decisions affecting their data and values.
+              <strong data-i18n="te_tiriti_section.participation_label">Participation:</strong> <span data-i18n="te_tiriti_section.participation_text">Communities maintain agency over AI decisions affecting their data and values.</span>
             </div>
           </div>
         </div>
@@ -242,61 +244,61 @@
 
     <!-- Indigenous Data Sovereignty -->
     <section id="indigenous-data-sovereignty" class="mb-16">
-      <h2 class="text-3xl font-bold text-gray-900 mb-6">Indigenous Data Sovereignty</h2>
+      <h2 class="text-3xl font-bold text-gray-900 mb-6" data-i18n="indigenous_data.title">Indigenous Data Sovereignty</h2>
 
       <div class="prose prose-lg text-gray-600 mb-6">
         <p>
-          Indigenous data sovereignty is the principle that indigenous peoples have the right to control the collection, ownership, and application of their own data. This goes beyond privacy—it's about self-determination in the digital age.
+          <span data-i18n="indigenous_data.intro">Indigenous data sovereignty is the principle that indigenous peoples have the right to control the collection, ownership, and application of their own data. This goes beyond privacy—it\'s about self-determination in the digital age.</span>
         </p>
       </div>
 
-      <h3 class="text-xl font-bold text-gray-900 mb-4">CARE Principles for Indigenous Data Governance</h3>
+      <h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="indigenous_data.care_heading">CARE Principles for Indigenous Data Governance</h3>
       <p class="text-gray-600 mb-4">
-        The Tractatus Framework aligns with the <a href="https://www.gida-global.org/care" class="text-blue-600 hover:text-blue-700 underline" target="_blank" rel="noopener">CARE Principles</a>, developed by indigenous data governance experts:
+        <span data-i18n="indigenous_data.care_intro">The Tractatus Framework aligns with the <a href="https://www.gida-global.org/care" class="text-blue-600 hover:text-blue-700 underline" target="_blank" rel="noopener">CARE Principles</a>, developed by indigenous data governance experts:</span>
       </p>
 
       <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
         <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-teal-500">
-          <h4 class="text-lg font-bold text-gray-900 mb-2">Collective Benefit</h4>
+          <h4 class="text-lg font-bold text-gray-900 mb-2" data-i18n="indigenous_data.collective_benefit_label">Collective Benefit</h4>
           <p class="text-sm text-gray-600">
-            Data ecosystems shall be designed and function in ways that enable Indigenous Peoples to derive benefit from the data.
+            <span data-i18n="indigenous_data.collective_benefit_text">Data ecosystems shall be designed and function in ways that enable Indigenous Peoples to derive benefit from the data.</span>
           </p>
         </div>
 
         <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-blue-500">
-          <h4 class="text-lg font-bold text-gray-900 mb-2">Authority to Control</h4>
+          <h4 class="text-lg font-bold text-gray-900 mb-2" data-i18n="indigenous_data.authority_label">Authority to Control</h4>
           <p class="text-sm text-gray-600">
-            Indigenous Peoples' rights and interests in Indigenous data must be recognized and their authority to control such data be empowered.
+            <span data-i18n="indigenous_data.authority_text">Indigenous Peoples\' rights and interests in Indigenous data must be recognized and their authority to control such data be empowered.</span>
           </p>
         </div>
 
         <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-purple-500">
-          <h4 class="text-lg font-bold text-gray-900 mb-2">Responsibility</h4>
+          <h4 class="text-lg font-bold text-gray-900 mb-2" data-i18n="indigenous_data.responsibility_label">Responsibility</h4>
           <p class="text-sm text-gray-600">
-            Those working with Indigenous data have a responsibility to share how data are used to support Indigenous Peoples' self-determination and collective benefit.
+            <span data-i18n="indigenous_data.responsibility_text">Those working with Indigenous data have a responsibility to share how data are used to support Indigenous Peoples\' self-determination and collective benefit.</span>
           </p>
         </div>
 
         <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-green-500">
-          <h4 class="text-lg font-bold text-gray-900 mb-2">Ethics</h4>
+          <h4 class="text-lg font-bold text-gray-900 mb-2" data-i18n="indigenous_data.ethics_label">Ethics</h4>
           <p class="text-sm text-gray-600">
-            Indigenous Peoples' rights and wellbeing should be the primary concern at all stages of the data life cycle and across the data ecosystem.
+            <span data-i18n="indigenous_data.ethics_text">Indigenous Peoples\' rights and wellbeing should be the primary concern at all stages of the data life cycle and across the data ecosystem.</span>
           </p>
         </div>
       </div>
 
-      <h3 class="text-xl font-bold text-gray-900 mb-4">Resources & Further Reading</h3>
+      <h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="indigenous_data.resources_heading">Resources & Further Reading</h3>
       <div class="bg-gray-50 rounded-lg p-6">
         <ul class="space-y-3">
           <li>
             <a href="https://www.temanararaunga.maori.nz/" class="text-blue-600 hover:text-blue-700 font-medium" target="_blank" rel="noopener">
-              Te Mana Raraunga – Māori Data Sovereignty Network →
+              <span data-i18n="indigenous_data.tmr_title">Te Mana Raraunga – Māori Data Sovereignty Network →</span>
             </a>
             <p class="text-sm text-gray-600 mt-1">Leading network advancing Māori data sovereignty in Aotearoa.</p>
           </li>
           <li>
             <a href="https://www.gida-global.org/care" class="text-blue-600 hover:text-blue-700 font-medium" target="_blank" rel="noopener">
-              CARE Principles for Indigenous Data Governance →
+              <span data-i18n="indigenous_data.care_title">CARE Principles for Indigenous Data Governance →</span>
             </a>
             <p class="text-sm text-gray-600 mt-1">International framework for indigenous data rights.</p>
           </li>
@@ -306,40 +308,40 @@
 
     <!-- Governance & Accountability -->
     <section id="governance" class="mb-16">
-      <h2 class="text-3xl font-bold text-gray-900 mb-6">Governance & Accountability</h2>
+      <h2 class="text-3xl font-bold text-gray-900 mb-6" data-i18n="governance.title">Governance & Accountability</h2>
 
       <div class="prose prose-lg text-gray-600 mb-6">
         <p>
-          Values without enforcement are aspirations. The Tractatus Framework implements these values through architectural governance:
+          <span data-i18n="governance.intro">Values without enforcement are aspirations. The Tractatus Framework implements these values through architectural governance:</span>
         </p>
       </div>
 
       <div class="space-y-6">
         <div class="bg-white rounded-lg shadow-sm p-6">
-          <h3 class="text-lg font-bold text-gray-900 mb-3">Strategic Review Protocol</h3>
+          <h3 class="text-lg font-bold text-gray-900 mb-3" data-i18n="governance.strategic_review_heading">Strategic Review Protocol</h3>
           <p class="text-gray-600">
-            Quarterly reviews of framework alignment with stated values. Any drift from sovereignty, transparency, harmlessness, or community principles triggers mandatory correction.
+            <span data-i18n="governance.strategic_review_text">Quarterly reviews of framework alignment with stated values. Any drift from sovereignty, transparency, harmlessness, or community principles triggers mandatory correction.</span>
           </p>
         </div>
 
         <div class="bg-white rounded-lg shadow-sm p-6">
-          <h3 class="text-lg font-bold text-gray-900 mb-3">Values Alignment Framework</h3>
+          <h3 class="text-lg font-bold text-gray-900 mb-3" data-i18n="governance.values_alignment_heading">Values Alignment Framework</h3>
           <p class="text-gray-600">
-            All major decisions (architectural changes, partnerships, licensing) must pass values alignment check. If a decision would compromise any core value, it is rejected.
+            <span data-i18n="governance.values_alignment_text">All major decisions (architectural changes, partnerships, licensing) must pass values alignment check. If a decision would compromise any core value, it is rejected.</span>
           </p>
         </div>
 
         <div class="bg-white rounded-lg shadow-sm p-6">
-          <h3 class="text-lg font-bold text-gray-900 mb-3">Human Oversight Requirements</h3>
+          <h3 class="text-lg font-bold text-gray-900 mb-3" data-i18n="governance.human_oversight_heading">Human Oversight Requirements</h3>
           <p class="text-gray-600">
-            AI-generated content (documentation, code examples, case studies) requires human approval before publication. No AI makes values decisions without human judgment.
+            <span data-i18n="governance.human_oversight_text">AI-generated content (documentation, code examples, case studies) requires human approval before publication. No AI makes values decisions without human judgment.</span>
           </p>
         </div>
 
         <div class="bg-white rounded-lg shadow-sm p-6">
-          <h3 class="text-lg font-bold text-gray-900 mb-3">Community Accountability</h3>
+          <h3 class="text-lg font-bold text-gray-900 mb-3" data-i18n="governance.community_accountability_heading">Community Accountability</h3>
           <p class="text-gray-600">
-            Open source development means community oversight. If we fail to uphold these values, the community can fork, modify, or create alternatives. This is by design.
+            <span data-i18n="governance.community_accountability_text">Open source development means community oversight. If we fail to uphold these values, the community can fork, modify, or create alternatives. This is by design.</span>
           </p>
         </div>
       </div>
@@ -348,20 +350,20 @@
     <!-- Commitment Statement -->
     <section class="mb-16">
       <div class="bg-gradient-to-r from-purple-600 to-blue-600 rounded-2xl p-12 text-white">
-        <h2 class="text-3xl font-bold mb-4">Our Commitment</h2>
+        <h2 class="text-3xl font-bold mb-4" data-i18n="commitment.title">Our Commitment</h2>
         <div class="prose prose-lg text-white opacity-95">
           <p class="mb-4">
-            These values are not negotiable. They form the architectural foundation of the Tractatus Framework. We commit to:
+            <span data-i18n="commitment.intro">These values are not negotiable. They form the architectural foundation of the Tractatus Framework. We commit to:</span>
           </p>
           <ul class="space-y-2 mb-6">
-            <li>Preserving human sovereignty over values decisions</li>
-            <li>Maintaining radical transparency in all framework operations</li>
-            <li>Preventing harm through structural constraints, not promises</li>
-            <li>Building and empowering community, not extracting from it</li>
-            <li>Respecting Te Tiriti o Waitangi and indigenous data sovereignty</li>
+            <li data-i18n="commitment.item1">Preserving human sovereignty over values decisions</li>
+            <li data-i18n="commitment.item2">Maintaining radical transparency in all framework operations</li>
+            <li data-i18n="commitment.item3">Preventing harm through structural constraints, not promises</li>
+            <li data-i18n="commitment.item4">Building and empowering community, not extracting from it</li>
+            <li data-i18n="commitment.item5">Respecting Te Tiriti o Waitangi and indigenous data sovereignty</li>
           </ul>
           <p class="font-semibold">
-            When in doubt, we choose human agency over AI capability. Always.
+            <span data-i18n="commitment.closing">When in doubt, we choose human agency over AI capability. Always.</span>
           </p>
         </div>
       </div>
@@ -411,5 +413,9 @@
     </div>
   </footer>
 
-</body>
+  <!-- Internationalization -->
+  <script src="/js/i18n-simple.js?v=1760823000"></script>
+  <script src="/js/components/language-selector.js?v=1760823000"></script>
+
+

 </html>
diff --git a/public/admin/audit-analytics.html b/public/admin/audit-analytics.html
index 8df4f834..439ddf1f 100644
--- a/public/admin/audit-analytics.html
+++ b/public/admin/audit-analytics.html
@@ -4,8 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Audit Analytics | Tractatus Admin</title>
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
   <link rel="stylesheet" href="/css/tailwind.css">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css">
   <script src="/js/admin/auth-check.js"></script>
   <style>
     html { scroll-behavior: smooth; }
diff --git a/public/admin/blog-curation.html b/public/admin/blog-curation.html
index 9a08ae2e..138f8b00 100644
--- a/public/admin/blog-curation.html
+++ b/public/admin/blog-curation.html
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Blog Curation | Tractatus Admin</title>
   <link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css">
   <script src="/js/admin/auth-check.js"></script>
 </head>
 <body class="bg-gray-50">
diff --git a/public/admin/case-moderation.html b/public/admin/case-moderation.html
index 3c2a1ab1..50c8b2b2 100644
--- a/public/admin/case-moderation.html
+++ b/public/admin/case-moderation.html
@@ -4,8 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Case Study Moderation | Tractatus Admin</title>
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
   <link rel="stylesheet" href="/css/tailwind.css">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css">
   <script src="/js/admin/auth-check.js"></script>
 </head>
 <body class="bg-gray-50">
diff --git a/public/admin/claude-md-migrator.html b/public/admin/claude-md-migrator.html
index a3368cad..4a795035 100644
--- a/public/admin/claude-md-migrator.html
+++ b/public/admin/claude-md-migrator.html
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CLAUDE.md Migration Wizard - Tractatus Admin</title>
   <link href="../css/tailwind.css" rel="stylesheet">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css">
   <script src="/js/admin/auth-check.js"></script>
 </head>
 <body class="bg-gray-100">
diff --git a/public/admin/dashboard.html b/public/admin/dashboard.html
index 0ff10eb5..ba485cef 100644
--- a/public/admin/dashboard.html
+++ b/public/admin/dashboard.html
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Admin Dashboard | Tractatus Framework</title>
   <link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css">
   <script src="/js/admin/auth-check.js"></script>
 </head>
 <body class="bg-gray-50">
diff --git a/public/admin/hooks-dashboard.html b/public/admin/hooks-dashboard.html
index 60c85b0a..e8260417 100644
--- a/public/admin/hooks-dashboard.html
+++ b/public/admin/hooks-dashboard.html
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Framework Hooks Dashboard | Tractatus Admin</title>
   <link rel="stylesheet" href="/css/tailwind.css">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css">
   <script src="/js/admin/auth-check.js"></script>
 </head>
 <body class="bg-gray-50">
diff --git a/public/admin/login.html b/public/admin/login.html
index fb9f1199..99f27b4f 100644
--- a/public/admin/login.html
+++ b/public/admin/login.html
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Admin Login | Tractatus Framework</title>
   <link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css">
 </head>
 <body class="bg-gray-50">
 
diff --git a/public/admin/media-triage.html b/public/admin/media-triage.html
index 8a1129ee..1e29eb93 100644
--- a/public/admin/media-triage.html
+++ b/public/admin/media-triage.html
@@ -4,8 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Media Triage | Tractatus Admin</title>
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
   <link rel="stylesheet" href="/css/tailwind.css">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css">
   <script src="/js/admin/auth-check.js"></script>
 </head>
 <body class="bg-gray-50">
diff --git a/public/admin/newsletter-management.html b/public/admin/newsletter-management.html
index 2d1dc62e..9398e603 100644
--- a/public/admin/newsletter-management.html
+++ b/public/admin/newsletter-management.html
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Newsletter Management | Tractatus Admin</title>
   <link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css">
   <script src="/js/admin/auth-check.js"></script>
 </head>
 <body class="bg-gray-50">
diff --git a/public/admin/project-manager.html b/public/admin/project-manager.html
index 2751ad71..b6304912 100644
--- a/public/admin/project-manager.html
+++ b/public/admin/project-manager.html
@@ -4,8 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Project Manager | Multi-Project Governance</title>
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
   <link rel="stylesheet" href="/css/tailwind.css?v=1760127701">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css">
   <script src="/js/admin/auth-check.js"></script>
 </head>
 <body class="bg-gray-50">
diff --git a/public/admin/rule-manager.html b/public/admin/rule-manager.html
index e9040775..b22c39fd 100644
--- a/public/admin/rule-manager.html
+++ b/public/admin/rule-manager.html
@@ -4,8 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Rule Manager | Multi-Project Governance</title>
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
   <link rel="stylesheet" href="/css/tailwind.css?v=1760127701">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css">
   <script src="/js/admin/auth-check.js"></script>
 </head>
 <body class="bg-gray-50">
diff --git a/public/api-reference.html b/public/api-reference.html
index d3947797..9171d94a 100644
--- a/public/api-reference.html
+++ b/public/api-reference.html
@@ -6,6 +6,7 @@
   <title>API Reference | Tractatus Framework</title>
   <meta name="description" content="Complete API reference for Tractatus Framework - endpoints, authentication, request/response formats, and examples.">
   <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css">
   <style>
     .endpoint-badge {
       @apply inline-block px-2 py-1 rounded text-xs font-mono font-semibold;
@@ -867,35 +868,8 @@
   </div>
 
   <!-- Footer -->
-  <footer class="bg-gray-900 text-gray-400 py-12 mt-16">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-        <div>
-          <h3 class="text-white font-bold mb-4">Tractatus Framework</h3>
-          <p class="text-sm">Preserving human agency through architectural constraints.</p>
-        </div>
-        <div>
-          <h3 class="text-white font-bold mb-4">Documentation</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/docs.html" class="hover:text-white">Framework Docs</a></li>
-            <li><a href="/implementer.html" class="hover:text-white">Implementation Guide</a></li>
-            <li><a href="/api-reference.html" class="hover:text-white">API Reference</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-bold mb-4">Resources</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/demos/classification-demo.html" class="hover:text-white">Interactive Demos</a></li>
-            <li><a href="/admin/login.html" class="hover:text-white">Admin Portal</a></li>
-            <li><a href="/" class="hover:text-white">Home</a></li>
-          </ul>
-        </div>
-      </div>
-      <div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm">
-        <p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
-      </div>
-    </div>
-  </footer>
+    <!-- Footer Component -->
+  <script src="/js/components/footer.js"></script>
 
 </body>
 </html>
diff --git a/public/architecture.html b/public/architecture.html
index 178fc15f..8a3d0a7b 100644
--- a/public/architecture.html
+++ b/public/architecture.html
@@ -5,8 +5,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>System Architecture | Tractatus AI Safety Framework</title>
   <meta name="description" content="Tractatus runtime-agnostic governance architecture: exploring structural boundaries for AI safety that may be more resistant to adversarial manipulation than behavioral training alone.">
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
+  <link rel="stylesheet" href="/css/fonts.css">
   <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
   <style>
     .skip-link { position: absolute; left: -9999px; }
     .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
@@ -30,6 +32,17 @@
   <!-- Navigation (injected by navbar.js) -->
   <script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
 
+  <!-- Breadcrumb Navigation -->
+  <nav class="bg-gray-50 border-b border-gray-200 py-3" aria-label="Breadcrumb">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <ol class="flex items-center space-x-2 text-sm">
+        <li><a href="/" class="hover:underline transition-colors" style="color: var(--tractatus-core-end);">Home</a></li>
+        <li class="text-gray-400">/</li>
+        <li class="text-gray-900 font-medium" aria-current="page">Architecture</li>
+      </ol>
+    </div>
+  </nav>
+
   <!-- Hero Section -->
   <header role="banner">
   <section class="bg-gradient-to-br from-blue-600 via-blue-700 to-purple-700 text-white py-20">
@@ -194,10 +207,10 @@
 
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 
-      <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-green-500">
+      <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" style="border-left-color: #10b981;">
         <div class="flex items-center mb-3">
-          <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
-            <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
+            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
             </svg>
           </div>
@@ -206,15 +219,15 @@
         <p class="text-gray-600 text-sm mb-3">
           Blocks AI from making values decisions (privacy, ethics, strategic direction). Requires human approval.
         </p>
-        <div class="text-xs text-green-700 bg-green-50 rounded px-3 py-2">
+        <div class="text-xs rounded px-3 py-2" style="color: #065f46; background-color: #d1fae5;">
           <strong>Early Promise:</strong> Values boundaries enforced externally—harder to manipulate through prompting.
         </div>
       </div>
 
-      <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-blue-500">
+      <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" style="border-left-color: #6366f1;">
         <div class="flex items-center mb-3">
-          <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
-            <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" style="background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);">
+            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
             </svg>
           </div>
@@ -223,15 +236,15 @@
         <p class="text-gray-600 text-sm mb-3">
           Stores instructions externally with persistence levels (HIGH/MEDIUM/LOW). Aims to reduce directive fade.
         </p>
-        <div class="text-xs text-blue-700 bg-blue-50 rounded px-3 py-2">
+        <div class="text-xs rounded px-3 py-2" style="color: #3730a3; background-color: #e0e7ff;">
           <strong>Early Promise:</strong> Instructions stored outside AI—more resistant to context manipulation.
         </div>
       </div>
 
-      <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-purple-500">
+      <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" style="border-left-color: #8b5cf6;">
         <div class="flex items-center mb-3">
-          <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
-            <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);">
+            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
             </svg>
           </div>
@@ -240,15 +253,15 @@
         <p class="text-gray-600 text-sm mb-3">
           Validates AI actions against instruction history. Aims to prevent pattern bias overriding explicit directives.
         </p>
-        <div class="text-xs text-purple-700 bg-purple-50 rounded px-3 py-2">
+        <div class="text-xs rounded px-3 py-2" style="color: #581c87; background-color: #f3e8ff;">
           <strong>Early Promise:</strong> Independent verification—AI claims checked against external source.
         </div>
       </div>
 
-      <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-yellow-500">
+      <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" style="border-left-color: #f59e0b;">
         <div class="flex items-center mb-3">
-          <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mr-3">
-            <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
+            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
             </svg>
           </div>
@@ -257,15 +270,15 @@
         <p class="text-gray-600 text-sm mb-3">
           Monitors AI performance degradation. Escalates when context pressure threatens quality.
         </p>
-        <div class="text-xs text-yellow-700 bg-yellow-50 rounded px-3 py-2">
+        <div class="text-xs rounded px-3 py-2" style="color: #92400e; background-color: #fef3c7;">
           <strong>Early Promise:</strong> Objective metrics may detect manipulation attempts early.
         </div>
       </div>
 
-      <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-red-500">
+      <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" style="border-left-color: #ec4899;">
         <div class="flex items-center mb-3">
-          <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center mr-3">
-            <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" style="background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);">
+            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
             </svg>
           </div>
@@ -274,15 +287,15 @@
         <p class="text-gray-600 text-sm mb-3">
           Requires AI to pause and verify complex operations before execution. Structural safety check.
         </p>
-        <div class="text-xs text-red-700 bg-red-50 rounded px-3 py-2">
+        <div class="text-xs rounded px-3 py-2" style="color: #831843; background-color: #fce7f3;">
           <strong>Early Promise:</strong> Architectural gates aim to enforce verification steps.
         </div>
       </div>
 
-      <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-indigo-500">
+      <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" style="border-left-color: #14b8a6;">
         <div class="flex items-center mb-3">
-          <div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center mr-3">
-            <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" style="background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);">
+            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
             </svg>
           </div>
@@ -291,7 +304,7 @@
         <p class="text-gray-600 text-sm mb-3">
           Facilitates multi-stakeholder deliberation for values conflicts. AI provides facilitation, not authority.
         </p>
-        <div class="text-xs text-indigo-700 bg-indigo-50 rounded px-3 py-2">
+        <div class="text-xs rounded px-3 py-2" style="color: #134e4a; background-color: #ccfbf1;">
           <strong>Early Promise:</strong> Human judgment required—architecturally enforced escalation for values.
         </div>
       </div>
@@ -450,47 +463,8 @@
   </main>
 
   <!-- Footer -->
-  <footer class="bg-gray-900 text-gray-400 py-12" role="contentinfo">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
-        <div>
-          <h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
-          <p class="text-sm">
-            World's first production implementation of architectural AI safety constraints for human agency preservation.
-          </p>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Resources</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
-            <li><a href="/architecture.html" class="hover:text-white transition">System Architecture</a></li>
-            <li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
-            <li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
-            <li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Community</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
-            <li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
-            <li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Support This Work</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
-            <li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
-          </ul>
-        </div>
-      </div>
-      <div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
-        <p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
-        <p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
-      </div>
-    </div>
-  </footer>
+    <!-- Footer Component -->
+  <script src="/js/components/footer.js"></script>
 
 </body>
 </html>
diff --git a/public/blog-post.html b/public/blog-post.html
index 310859d9..f886e6c3 100644
--- a/public/blog-post.html
+++ b/public/blog-post.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title id="page-title">Loading... | Tractatus Blog</title>
   <meta id="page-description" name="description" content="Tractatus AI Safety Framework blog post">
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
 
   <!-- Open Graph Meta Tags (Facebook, LinkedIn) -->
   <meta property="og:type" content="article">
@@ -32,6 +32,7 @@
   <link rel="alternate" type="application/rss+xml" title="Tractatus Blog RSS Feed" href="/api/blog/rss">
 
   <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css">
   <style>
     /* Accessibility: Skip link */
     .skip-link { position: absolute; left: -9999px; top: 0; }
@@ -211,43 +212,7 @@
       <div id="post-body" class="blog-content prose prose-lg max-w-none mb-12"></div>
 
       <!-- Post Footer -->
-      <footer class="border-t border-gray-200 pt-8">
-        <!-- Share Section -->
-        <div class="mb-8">
-          <h3 class="text-lg font-semibold text-gray-900 mb-4">Share this post</h3>
-          <div class="flex gap-3">
-            <button id="share-twitter" class="flex items-center gap-2 px-4 py-2 bg-blue-400 text-white rounded-lg hover:bg-blue-500 transition">
-              <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"/>
-              </svg>
-              Twitter
-            </button>
-            <button id="share-linkedin" class="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
-              <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
-              </svg>
-              LinkedIn
-            </button>
-            <button id="copy-link" class="flex items-center gap-2 px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition">
-              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
-              </svg>
-              Copy Link
-            </button>
-          </div>
-        </div>
-
-        <!-- Back to Blog -->
-        <div>
-          <a href="/blog.html" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 font-medium">
-            <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
-            </svg>
-            Back to all posts
-          </a>
-        </div>
-      </footer>
-    </article>
+      </article>
 
     <!-- Related Posts -->
     <div id="related-posts-section" class="hidden mt-16 border-t border-gray-200 pt-12">
@@ -259,49 +224,12 @@
   </div>
 
   <!-- Footer -->
-  <footer class="bg-gray-900 text-gray-400 py-12 mt-16">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
-        <div>
-          <h3 class="text-white font-bold mb-4">Tractatus Framework</h3>
-          <p class="text-sm">
-            Preserving human agency through architectural constraints, not aspirational goals.
-          </p>
-        </div>
-        <div>
-          <h3 class="text-white font-bold mb-4">Audience Paths</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/researcher.html" class="hover:text-white">Researchers</a></li>
-            <li><a href="/implementer.html" class="hover:text-white">Implementers</a></li>
-            <li><a href="/leader.html" class="hover:text-white">Leaders</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-bold mb-4">Resources</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/docs.html" class="hover:text-white">Documentation</a></li>
-            <li><a href="/blog.html" class="hover:text-white">Blog</a></li>
-            <li><a href="/demos/classification-demo.html" class="hover:text-white">Interactive Demos</a></li>
-            <li><a href="/" class="hover:text-white">Home</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-bold mb-4">Community</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/media-inquiry.html" class="hover:text-white">Media Inquiries</a></li>
-            <li><a href="/case-submission.html" class="hover:text-white">Submit Case Study</a></li>
-          </ul>
-        </div>
-      </div>
-      <div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
-        <p class="text-gray-500">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
-        <p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
-      </div>
-    </div>
-  </footer>
 
   <!-- Load Blog Post JavaScript -->
   <script src="/js/blog-post.js?v=1760394750"></script>
 
+  <!-- Footer Component -->
+  <script src="/js/components/footer.js"></script>
+
 </body>
 </html>
diff --git a/public/blog.html b/public/blog.html
index 774f0938..a05e9c34 100644
--- a/public/blog.html
+++ b/public/blog.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Blog | Tractatus AI Safety Framework</title>
   <meta name="description" content="Insights, updates, and analysis on AI governance, safety frameworks, and the Tractatus boundary enforcement approach.">
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
 
   <!-- Open Graph Meta Tags (Facebook, LinkedIn) -->
   <meta property="og:type" content="website">
@@ -29,6 +29,7 @@
   <link rel="alternate" type="application/rss+xml" title="Tractatus Blog RSS Feed" href="/api/blog/rss">
 
   <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css">
   <style>
     /* Accessibility: Skip link */
     .skip-link { position: absolute; left: -9999px; top: 0; }
@@ -258,49 +259,11 @@
   </div>
 
   <!-- Footer -->
-  <footer class="bg-gray-900 text-gray-400 py-12">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
-        <div>
-          <h3 class="text-white font-bold mb-4">Tractatus Framework</h3>
-          <p class="text-sm">
-            Preserving human agency through architectural constraints, not aspirational goals.
-          </p>
-        </div>
-        <div>
-          <h3 class="text-white font-bold mb-4">Audience Paths</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/researcher.html" class="hover:text-white">Researchers</a></li>
-            <li><a href="/implementer.html" class="hover:text-white">Implementers</a></li>
-            <li><a href="/leader.html" class="hover:text-white">Leaders</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-bold mb-4">Resources</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/docs.html" class="hover:text-white">Documentation</a></li>
-            <li><a href="/blog.html" class="hover:text-white">Blog</a></li>
-            <li><a href="/demos/classification-demo.html" class="hover:text-white">Interactive Demos</a></li>
-            <li><a href="/" class="hover:text-white">Home</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-bold mb-4">Community</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/media-inquiry.html" class="hover:text-white">Media Inquiries</a></li>
-            <li><a href="/case-submission.html" class="hover:text-white">Submit Case Study</a></li>
-          </ul>
-        </div>
-      </div>
-      <div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
-        <p class="text-gray-500">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
-        <p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
-      </div>
-    </div>
-  </footer>
-
   <!-- Load Blog JavaScript -->
   <script src="/js/blog.js?v=1760396209"></script>
 
+  <!-- Footer Component -->
+  <script src="/js/components/footer.js"></script>
+
 </body>
 </html>
diff --git a/public/case-submission.html b/public/case-submission.html
index 38c8ba42..e56456a1 100644
--- a/public/case-submission.html
+++ b/public/case-submission.html
@@ -4,19 +4,21 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Submit Case Study | Tractatus AI Safety</title>
+  <link rel="stylesheet" href="/css/fonts.css">
   <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
   <style>
     /* Accessibility: Skip link */
     .skip-link { position: absolute; left: -9999px; top: 0; }
-    .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid #3b82f6; }
+    .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid var(--tractatus-core-end); }
 
     /* Accessibility: Focus indicators (WCAG 2.4.7) */
     a:focus, button:focus, input:focus, select:focus, textarea:focus {
-      outline: 3px solid #3b82f6;
+      outline: 3px solid var(--tractatus-core-end);
       outline-offset: 2px;
     }
     a:focus:not(:focus-visible) { outline: none; }
-    a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
+    a:focus-visible { outline: 3px solid var(--tractatus-core-end); outline-offset: 2px; }
 
     .form-group { margin-bottom: 1.5rem; }
     .form-label {
@@ -28,15 +30,16 @@
     .form-input, .form-textarea, .form-select {
       width: 100%;
       padding: 0.75rem;
-      border: 1px solid #d1d5db;
-      border-radius: 0.375rem;
+      border: 2px solid #e2e8f0;
+      border-radius: 0.5rem;
       font-size: 1rem;
-      transition: border-color 0.15s;
+      transition: all 0.2s ease;
     }
     .form-input:focus, .form-textarea:focus, .form-select:focus {
       outline: none;
-      border-color: #3b82f6;
-      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+      border-color: var(--tractatus-core-end);
+      box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
+      transform: translateY(-1px);
     }
     .form-textarea { min-height: 150px; resize: vertical; }
     .form-help { font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem; }
@@ -86,9 +89,9 @@
       <p class="text-lg text-gray-600 mb-4">
         Share real-world examples of AI safety failures that could have been prevented by the Tractatus Framework.
       </p>
-      <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded">
-        <h3 class="text-blue-900 font-semibold mb-2">What makes a good case study?</h3>
-        <ul class="text-blue-800 text-sm space-y-1">
+      <div class="bg-sky-50 border-l-4 p-4 rounded" style="border-left-color: var(--tractatus-core-end);">
+        <h3 class="font-semibold mb-2" style="color: var(--tractatus-core-end);">What makes a good case study?</h3>
+        <ul class="text-gray-700 text-sm space-y-1">
           <li>• <strong>Documented failure:</strong> Real incident with evidence (not hypothetical)</li>
           <li>• <strong>Clear failure mode:</strong> Specific way the AI system went wrong</li>
           <li>• <strong>Tractatus relevance:</strong> Shows how framework boundaries could have helped</li>
@@ -183,7 +186,7 @@
           <label for="case-evidence" class="form-label">
             Evidence/Sources
           </label>
-          <textarea id="case-evidence" name="case_study.evidence" class="form-textarea" style="min-height: 100px;"></textarea>
+          <textarea id="case-evidence" name="case_study.evidence" class="form-textarea"></textarea>
           <p class="form-help">
             Links to documentation, screenshots, articles, or other evidence (one per line)
           </p>
@@ -191,7 +194,7 @@
 
         <!-- Submit Button -->
         <div class="mt-8">
-          <button type="submit" id="submit-button" class="w-full bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition">
+          <button type="submit" id="submit-button" class="w-full text-white px-6 py-3 rounded-lg font-semibold transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5" style="background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);">
             Submit Case Study
           </button>
           <p class="form-help mt-3 text-center">
@@ -206,141 +209,18 @@
     <div class="mt-6 text-sm text-gray-600 text-center">
       <p>
         Your submission is handled according to our
-        <a href="/about/values.html" class="text-blue-600 hover:text-blue-700">privacy principles</a>.
+        <a href="/about/values.html" class="hover:underline transition-colors" style="color: var(--tractatus-core-end);">privacy principles</a>.
         All case studies undergo human review before publication.
       </p>
     </div>
 
-  </div>
+  </main>
 
   <!-- Footer -->
-  <footer class="bg-gray-900 text-gray-400 py-12 mt-16" role="contentinfo">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="grid grid-cols-1 md:grid-cols-5 gap-8">
-        <div>
-          <h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
-          <p class="text-sm">
-            Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
-          </p>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Resources</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
-            <li><a href="/demos/tractatus-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
-            <li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
-            <li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
-            <li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
-            <li><a href="/about.html" class="hover:text-white transition">About & Values</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Community</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
-            <li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
-            <li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
-            <li><a href="/#newsletter" class="hover:text-white transition">Newsletter</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Support This Work</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
-            <li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Acknowledgment</h3>
-          <p class="text-sm">
-            This framework acknowledges Te Tiriti o Waitangi and indigenous leadership in digital sovereignty.
-            Built with respect for CARE Principles and Māori data sovereignty.
-          </p>
-        </div>
-      </div>
-      <div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
-        <p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
-        <p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
-      </div>
-    </div>
-  </footer>
+  <script src="/js/case-submission.js"></script>
 
-  <script>
-    const form = document.getElementById('case-submission-form');
-    const submitButton = document.getElementById('submit-button');
-    const successMessage = document.getElementById('success-message');
-    const errorMessage = document.getElementById('error-message');
-
-    form.addEventListener('submit', async (e) => {
-      e.preventDefault();
-
-      // Hide previous messages
-      successMessage.style.display = 'none';
-      errorMessage.style.display = 'none';
-
-      // Disable submit button
-      submitButton.disabled = true;
-      submitButton.textContent = 'Submitting...';
-
-      // Collect form data
-      const evidenceText = document.getElementById('case-evidence').value;
-      const evidence = evidenceText
-        ? evidenceText.split('\n').filter(line => line.trim())
-        : [];
-
-      const formData = {
-        submitter: {
-          name: document.getElementById('submitter-name').value,
-          email: document.getElementById('submitter-email').value,
-          organization: document.getElementById('submitter-organization').value || null,
-          public: document.getElementById('submitter-public').checked
-        },
-        case_study: {
-          title: document.getElementById('case-title').value,
-          description: document.getElementById('case-description').value,
-          failure_mode: document.getElementById('case-failure-mode').value,
-          tractatus_applicability: document.getElementById('case-tractatus').value,
-          evidence: evidence,
-          attachments: []
-        }
-      };
-
-      try {
-        const response = await fetch('/api/cases/submit', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify(formData)
-        });
-
-        const data = await response.json();
-
-        if (response.ok) {
-          // Success
-          successMessage.textContent = data.message || 'Thank you for your submission. We will review it shortly.';
-          successMessage.style.display = 'block';
-          form.reset();
-          window.scrollTo({ top: 0, behavior: 'smooth' });
-        } else {
-          // Error
-          errorMessage.textContent = data.message || 'An error occurred. Please try again.';
-          errorMessage.style.display = 'block';
-          window.scrollTo({ top: 0, behavior: 'smooth' });
-        }
-
-      } catch (error) {
-        console.error('Submit error:', error);
-        errorMessage.textContent = 'Network error. Please check your connection and try again.';
-        errorMessage.style.display = 'block';
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-      } finally {
-        // Re-enable submit button
-        submitButton.disabled = false;
-        submitButton.textContent = 'Submit Case Study';
-      }
-    });
-  </script>
+  <!-- Footer Component -->
+  <script src="/js/components/footer.js"></script>
 
 </body>
 </html>
diff --git a/public/check-version.html b/public/check-version.html
index eabeb31f..68fc87e0 100644
--- a/public/check-version.html
+++ b/public/check-version.html
@@ -40,62 +40,6 @@
     </ol>
   </div>
 
-  <script>
-    // Get the version from the main docs page
-    fetch('/docs.html?' + Date.now())
-      .then(r => r.text())
-      .then(html => {
-        const match = html.match(/docs-app\.js\?v=(\d+)/);
-        const version = match ? match[1] : 'NOT FOUND';
-
-        const expected = '1759828916';
-        const correct = version === expected;
-
-        // Now fetch the actual JavaScript
-        return fetch('/js/docs-app.js?v=' + version + '&' + Date.now())
-          .then(r => r.text())
-          .then(js => {
-            const hasNewHandler = js.includes('window.location.href=');
-            const hasOldHandler = js.includes('event.stopPropagation()');
-
-            let html = '';
-
-            if (correct && hasNewHandler) {
-              html = `
-                <div class="box good">
-                  <h2>✅ Version is CORRECT</h2>
-                  <p>JavaScript version: <code>${version}</code></p>
-                  <p>Handler includes: <code>window.location.href</code></p>
-                  <p><strong>Downloads should work now!</strong></p>
-                </div>
-              `;
-            } else {
-              html = `
-                <div class="box bad">
-                  <h2>❌ Version is WRONG</h2>
-                  <p>JavaScript version loaded: <code>${version}</code></p>
-                  <p>Expected: <code>${expected}</code></p>
-                  <p>Has new handler: ${hasNewHandler ? '✅ YES' : '❌ NO'}</p>
-                  <p><strong>Your browser is serving cached files!</strong></p>
-                </div>
-                <div class="box">
-                  <h3>Cached JavaScript Snippet:</h3>
-                  <pre>${js.substring(js.indexOf('onclick='), js.indexOf('onclick=') + 200).replace(/</g, '&lt;').replace(/>/g, '&gt;')}</pre>
-                </div>
-              `;
-            }
-
-            document.getElementById('results').innerHTML = html;
-          });
-      })
-      .catch(err => {
-        document.getElementById('results').innerHTML = `
-          <div class="box bad">
-            <h2>Error</h2>
-            <p>${err.message}</p>
-          </div>
-        `;
-      });
-  </script>
+  <script src="/js/check-version.js"></script>
 </body>
 </html>
diff --git a/public/demos/27027-demo.html b/public/demos/27027-demo.html
index 3e1f0d26..fa0e4635 100644
--- a/public/demos/27027-demo.html
+++ b/public/demos/27027-demo.html
@@ -4,8 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>The 27027 Incident - Tractatus Framework</title>
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
   <link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css">
   <style>
     @keyframes fadeIn {
       from { opacity: 0; transform: translateY(10px); }
@@ -75,7 +76,7 @@
                 <span id="progress-text">0 / 8</span>
               </div>
               <div class="w-full bg-gray-200 rounded-full h-2">
-                <div id="progress-bar" class="bg-blue-600 h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
+                <div id="progress-bar" class="bg-blue-600 h-2 rounded-full transition-all duration-300"></div>
               </div>
             </div>
 
diff --git a/public/demos/boundary-demo.html b/public/demos/boundary-demo.html
index 3bb0d212..aba53e94 100644
--- a/public/demos/boundary-demo.html
+++ b/public/demos/boundary-demo.html
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Boundary Enforcement Simulator - Tractatus Framework</title>
   <link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css">
 </head>
 <body class="bg-gray-50">
 
diff --git a/public/demos/classification-demo.html b/public/demos/classification-demo.html
index 0f01e4be..f2a60076 100644
--- a/public/demos/classification-demo.html
+++ b/public/demos/classification-demo.html
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Instruction Classification Demo - Tractatus Framework</title>
   <link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css">
   <style>
     .quadrant-badge {
       @apply inline-block px-3 py-1 rounded-full text-sm font-semibold;
diff --git a/public/demos/tractatus-demo.html b/public/demos/tractatus-demo.html
index 08e2cbdb..44ae1684 100644
--- a/public/demos/tractatus-demo.html
+++ b/public/demos/tractatus-demo.html
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Tractatus Framework Interactive Demo | AI Safety Architecture</title>
   <link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css">
   <style>
     .fade-in { animation: fadeIn 0.5s; }
     @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@@ -345,7 +346,7 @@
                 <span id="pressure-percentage" class="font-medium">15%</span>
               </div>
               <div class="w-full bg-gray-200 rounded-full h-3">
-                <div id="pressure-bar" class="bg-green-500 h-3 rounded-full transition-all duration-300" style="width: 15%"></div>
+                <div id="pressure-bar" class="bg-green-500 h-3 rounded-full transition-all duration-300"></div>
               </div>
             </div>
             <div id="pressure-recommendations" class="text-sm text-gray-600">
diff --git a/public/docs-viewer.html b/public/docs-viewer.html
index e883f026..2b9ce0c3 100644
--- a/public/docs-viewer.html
+++ b/public/docs-viewer.html
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Documentation - Tractatus Framework</title>
   <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css">
   <style>
     /* Prose styling for document content */
     .prose h1 { @apply text-3xl font-bold mt-8 mb-4 text-gray-900; }
diff --git a/public/faq.html b/public/faq.html
index 51eef888..e995c6d4 100644
--- a/public/faq.html
+++ b/public/faq.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Frequently Asked Questions | Tractatus AI Safety Framework</title>
   <meta name="description" content="Common questions about Tractatus framework: implementation, performance, relationship to Claude Code, and governance architecture.">
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
 
   <!-- PWA Manifest -->
   <link rel="manifest" href="/manifest.json">
@@ -16,9 +16,11 @@
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="default">
   <meta name="apple-mobile-web-app-title" content="Tractatus">
-  <link rel="apple-touch-icon" href="/images/tractatus-icon.svg">
+  <link rel="apple-touch-icon" href="/images/tractatus-icon-new.svg">
 
+  <link rel="stylesheet" href="/css/fonts.css">
   <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css">
 
   <!-- Syntax highlighting for code blocks -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
@@ -442,7 +444,7 @@
           </svg>
           <span data-i18n="still_have_questions.submit_case_study_btn">Submit a Case Study</span>
         </a>
-        <a href="https://github.com/AgenticGovernance/tractatus-framework/issues" target="_blank" rel="noopener noreferrer" class="bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-800 transition border-2 border-white inline-flex items-center gap-2">
+        <a href="https://github.com/AgenticGovernance/tractatus/issues" target="_blank" rel="noopener noreferrer" class="bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-800 transition border-2 border-white inline-flex items-center gap-2">
           <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
             <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.430.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
           </svg>
@@ -460,57 +462,6 @@
   </main>
 
   <!-- Footer -->
-  <footer class="bg-gray-900 text-gray-400 py-12 mt-16" role="contentinfo">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="grid grid-cols-1 md:grid-cols-5 gap-8">
-        <div>
-          <h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
-          <p class="text-sm">
-            Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
-          </p>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Resources</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
-            <li><a href="/demos/tractatus-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
-            <li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
-            <li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
-            <li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
-            <li><a href="/about.html" class="hover:text-white transition">About & Values</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Community</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
-            <li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
-            <li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
-            <li><a href="/#newsletter" class="hover:text-white transition">Newsletter</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Support This Work</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
-            <li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Acknowledgment</h3>
-          <p class="text-sm">
-            This framework acknowledges Te Tiriti o Waitangi and indigenous leadership in digital sovereignty.
-            Built with respect for CARE Principles and Māori data sovereignty.
-          </p>
-        </div>
-      </div>
-      <div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
-        <p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
-        <p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
-      </div>
-    </div>
-  </footer>
-
   <!-- Search Modal -->
   <div id="search-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center p-4">
     <div class="bg-white rounded-lg shadow-2xl max-w-4xl w-full h-[85vh] flex flex-col">
@@ -679,13 +630,16 @@
   </div>
 
   <!-- Internationalization -->
-  <script src="/js/i18n-simple.js?v=0.1.0.1760643941"></script>
-  <script src="/js/components/language-selector.js?v=0.1.0.1760643941"></script>
+  <script src="/js/i18n-simple.js?v=1760818106"></script>
+  <script src="/js/components/language-selector.js?v=1760818106"></script>
 
   <!-- Version Management & PWA -->
   <script src="/js/version-manager.js"></script>
 
   <script src="/js/faq.js?v=1760430000"></script>
 
+  <!-- Footer Component -->
+  <script src="/js/components/footer.js"></script>
+
 </body>
 </html>
diff --git a/public/implementer.html b/public/implementer.html
index c63b698c..5d58303f 100644
--- a/public/implementer.html
+++ b/public/implementer.html
@@ -14,9 +14,12 @@
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="default">
   <meta name="apple-mobile-web-app-title" content="Tractatus">
-  <link rel="apple-touch-icon" href="/images/tractatus-icon.svg">
+  <link rel="apple-touch-icon" href="/images/tractatus-icon-new.svg">
 
+  <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
+  <link rel="stylesheet" href="/css/fonts.css">
   <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
   <style>
     /* Accessibility: Skip link */
     .skip-link { position: absolute; left: -9999px; top: 0; }
@@ -39,6 +42,17 @@
   <!-- Navigation (injected by navbar.js) -->
   <script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
 
+  <!-- Breadcrumb Navigation -->
+  <nav class="bg-gray-50 border-b border-gray-200 py-3" aria-label="Breadcrumb">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <ol class="flex items-center space-x-2 text-sm">
+        <li><a href="/" class="hover:underline transition-colors" style="color: var(--tractatus-core-end);">Home</a></li>
+        <li class="text-gray-400">/</li>
+        <li class="text-gray-900 font-medium" aria-current="page">Implementer</li>
+      </ol>
+    </div>
+  </nav>
+
   <!-- Hero Section -->
   <div class="bg-gradient-to-br from-blue-50 to-indigo-50 py-20">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -116,7 +130,7 @@
                 <span class="text-gray-700 text-sm">Troubleshooting guidance</span>
               </div>
             </div>
-            <a href="https://github.com/AgenticGovernance/tractatus-framework/tree/main/deployment-guide"
+            <a href="https://github.com/AgenticGovernance/tractatus/tree/main/deployment-guide"
                target="_blank"
                rel="noopener noreferrer"
                class="inline-flex items-center bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition shadow-lg">
@@ -423,7 +437,7 @@
       <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-8 rounded-r-lg">
         <p class="text-sm text-blue-900 font-medium mb-2">⚠️ Note: Reference Implementation</p>
         <p class="text-sm text-blue-800">
-          The code examples below show conceptual API design. The npm package <code class="bg-blue-100 px-1 py-0.5 rounded">@tractatus/framework</code> is not yet published. To implement these patterns, adapt the governance services from this project's <a href="https://github.com/AgenticGovernance/tractatus-framework" class="underline font-medium hover:text-blue-900">source code</a>.
+          The code examples below show conceptual API design. The npm package <code class="bg-blue-100 px-1 py-0.5 rounded">@tractatus/framework</code> is not yet published. To implement these patterns, adapt the governance services from this project's <a href="https://github.com/AgenticGovernance/tractatus" class="underline font-medium hover:text-blue-900">source code</a>.
         </p>
       </div>
 
@@ -727,63 +741,15 @@ if (pressure.level === 'CRITICAL') {
   </div>
 
   <!-- Footer -->
-  <footer class="bg-gray-900 text-gray-400 py-12 mt-16" role="contentinfo">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="grid grid-cols-1 md:grid-cols-5 gap-8">
-        <div>
-          <h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
-          <p class="text-sm">
-            Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
-          </p>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Resources</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
-            <li><a href="/demos/tractatus-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
-            <li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
-            <li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
-            <li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
-            <li><a href="/about.html" class="hover:text-white transition">About & Values</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Community</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
-            <li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
-            <li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
-            <li><a href="/#newsletter" class="hover:text-white transition">Newsletter</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Support This Work</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
-            <li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Acknowledgment</h3>
-          <p class="text-sm">
-            This framework acknowledges Te Tiriti o Waitangi and indigenous leadership in digital sovereignty.
-            Built with respect for CARE Principles and Māori data sovereignty.
-          </p>
-        </div>
-      </div>
-      <div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
-        <p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
-        <p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
-      </div>
-    </div>
-  </footer>
-
   <!-- Internationalization -->
-  <script src="/js/i18n-simple.js?v=0.1.0.1760643941"></script>
-  <script src="/js/components/language-selector.js?v=0.1.0.1760643941"></script>
+  <script src="/js/i18n-simple.js?v=1760818106"></script>
+  <script src="/js/components/language-selector.js?v=1760818106"></script>
 
   <!-- Version Management & PWA -->
   <script src="/js/version-manager.js"></script>
 
+  <!-- Footer Component -->
+  <script src="/js/components/footer.js"></script>
+
 </body>
 </html>
diff --git a/public/index.html b/public/index.html
index dfc8d434..9c73b1c7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,14 +10,20 @@
   <link rel="manifest" href="/manifest.json">
 
   <!-- PWA Meta Tags -->
-  <meta name="theme-color" content="#3b82f6">
+  <meta name="theme-color" content="#0ea5e9">
   <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="default">
   <meta name="apple-mobile-web-app-title" content="Tractatus">
-  <link rel="apple-touch-icon" href="/images/tractatus-icon.svg">
+  <link rel="apple-touch-icon" href="/images/tractatus-icon-new.svg">
+
+  <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
+
+  <!-- Fonts -->
+  <link rel="stylesheet" href="/css/fonts.css">
 
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
   <style>
     .gradient-text { background: linear-gradient(120deg, #3b82f6 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
     .hover-lift { transition: transform 0.2s; }
@@ -40,19 +46,35 @@
   <a href="#main-content" class="skip-link">Skip to main content</a>
 
   <!-- Navigation (injected by navbar.js) -->
+  <div id="navbar-placeholder" style="min-height: 64px;"></div>
   <script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
 
   <!-- Hero Section -->
   <header role="banner">
-  <section class="bg-gradient-to-br from-blue-600 via-blue-700 to-purple-700 text-white">
+  <section class="text-white" style="background: linear-gradient(135deg, #64ffda 0%, #448aff 50%, #0ea5e9 100%);">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
       <div class="text-center">
-        <h1 class="text-5xl md:text-6xl font-bold mb-6" data-i18n="hero.title">Tractatus AI Safety Framework</h1>
-        <p class="text-xl md:text-2xl text-blue-100 mb-8 max-w-4xl mx-auto" data-i18n="hero.subtitle">Structural constraints that require AI systems to preserve human agency<br>for values decisions—tested on Claude Code</p>
+        <!-- Animated Brand Logo -->
+        <div class="flex justify-center mb-8">
+          <img src="/images/tractatus-icon-animated.svg"
+               alt="Tractatus Framework - Six Governance Services"
+               width="256" height="256" class="w-48 h-48 md:w-64 md:h-64"
+               loading="eager">
+        </div>
+
+        <h1 class="text-5xl md:text-6xl font-bold mb-6 tracking-tight" style="text-shadow: 0 2px 4px rgba(0,0,0,0.1);" data-i18n="hero.title">Tractatus AI Safety Framework</h1>
+        <p class="text-xl md:text-2xl mb-8 max-w-4xl mx-auto" style="text-shadow: 0 1px 2px rgba(0,0,0,0.1);" data-i18n="hero.subtitle">Structural constraints that require AI systems to preserve human agency<br>for values decisions—tested on Claude Code</p>
+
         <div class="flex flex-col sm:flex-row gap-4 justify-center">
-          <a href="/architecture.html" class="inline-block bg-white text-blue-700 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition" data-i18n="hero.cta_architecture">System Architecture</a>
-          <a href="/docs.html" class="inline-block bg-blue-800 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-900 transition" data-i18n="hero.cta_docs">Read Documentation</a>
-          <a href="/faq.html" class="inline-block bg-purple-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-800 transition" data-i18n="hero.cta_faq">FAQ</a>
+          <a href="/architecture.html"
+             class="inline-block px-8 py-3 rounded-lg font-semibold transition-all duration-300 bg-white text-blue-700 hover:shadow-lg hover:-translate-y-1"
+             data-i18n="hero.cta_architecture">System Architecture</a>
+          <a href="/docs.html"
+             class="btn-base btn-primary inline-block"
+             data-i18n="hero.cta_docs">Read Documentation</a>
+          <a href="/faq.html"
+             class="btn-base btn-validator inline-block"
+             data-i18n="hero.cta_faq">FAQ</a>
         </div>
       </div>
     </div>
@@ -83,131 +105,151 @@ We recognize this is one small step in addressing AI safety challenges. Explore
 
     <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 
-      <!-- Researcher Path -->
-      <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-visible hover-lift relative group">
+      <!-- Researcher Path → CrossReferenceValidator (Purple) -->
+      <a href="/researcher.html" class="block bg-white rounded-xl shadow-lg border-l-4 overflow-visible hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 relative group animate-fade-in-scale animate-delay-100" style="border-left-color: var(--service-validator-light);">
         <!-- Tooltip -->
         <div class="absolute bottom-full mb-4 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center shadow-xl">
-<span data-i18n="paths.researcher.tooltip">For AI safety researchers, academics, and scientists investigating LLM failure modes and governance architectures</span>
+          <span data-i18n="paths.researcher.tooltip">For AI safety researchers, academics, and scientists investigating LLM failure modes and governance architectures</span>
           <div class="absolute top-full left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div>
         </div>
 
-        <div class="bg-gradient-to-r from-blue-500 to-blue-600 p-6">
-          <svg aria-hidden="true" class="w-12 h-12 text-white mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
-          </svg>
-          <h3 class="text-2xl font-bold text-white" data-i18n="paths.researcher.title">Researcher</h3>
-          <p class="text-blue-100 mt-2" data-i18n="paths.researcher.subtitle">Academic & technical depth</p>
-        </div>
         <div class="p-6">
+          <div class="flex items-center space-x-4 mb-4">
+            <div class="w-14 h-14 rounded-xl flex items-center justify-center text-2xl" style="background: var(--gradient-btn-validator);">
+              🔬
+            </div>
+            <div>
+              <h3 class="text-2xl font-bold text-gray-900 group-hover:text-purple-600 transition-colors" data-i18n="paths.researcher.title">Researcher</h3>
+              <p class="text-gray-600 text-sm" data-i18n="paths.researcher.subtitle">Academic & technical depth</p>
+            </div>
+          </div>
+
           <p class="text-gray-700 mb-6" data-i18n="paths.researcher.description">
 Explore the theoretical foundations, architectural constraints, and scholarly context of the Tractatus framework.
           </p>
+
           <ul class="space-y-3 mb-6 text-sm">
             <li class="flex items-start">
-              <svg aria-hidden="true" class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
+              <svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-validator-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
               <span class="text-gray-700" data-i18n="paths.researcher.features.0">Technical specifications & proofs</span>
             </li>
             <li class="flex items-start">
-              <svg aria-hidden="true" class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
+              <svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-validator-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
               <span class="text-gray-700" data-i18n="paths.researcher.features.1">Academic research review</span>
             </li>
             <li class="flex items-start">
-              <svg aria-hidden="true" class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
+              <svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-validator-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
               <span class="text-gray-700" data-i18n="paths.researcher.features.2">Failure mode analysis</span>
             </li>
             <li class="flex items-start">
-              <svg aria-hidden="true" class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
+              <svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-validator-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
               <span class="text-gray-700" data-i18n="paths.researcher.features.3">Mathematical foundations</span>
             </li>
           </ul>
-          <a href="/researcher.html" class="block w-full text-center bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition font-medium" data-i18n="paths.researcher.cta">Explore Research
-          </a>
-        </div>
-      </div>
 
-      <!-- Implementer Path -->
-      <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-visible hover-lift relative group">
+          <div class="mt-6 pt-4 border-t border-gray-200">
+            <span class="font-semibold group-hover:underline" style="color: var(--service-validator-dark);" data-i18n="paths.researcher.cta">Explore Research →</span>
+          </div>
+        </div>
+      </a>
+
+      <!-- Implementer Path → InstructionPersistenceClassifier (Indigo) -->
+      <a href="/implementer.html" class="block bg-white rounded-xl shadow-lg border-l-4 overflow-visible hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 relative group animate-fade-in-scale animate-delay-200" style="border-left-color: var(--service-instruction-light);">
         <!-- Tooltip -->
         <div class="absolute bottom-full mb-4 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center shadow-xl">
           <span data-i18n="paths.implementer.tooltip">For software engineers, ML engineers, and technical teams building production AI systems</span>
           <div class="absolute top-full left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div>
         </div>
 
-        <div class="bg-gradient-to-r from-purple-500 to-purple-600 p-6">
-          <svg aria-hidden="true" class="w-12 h-12 text-white mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
-          </svg>
-          <h3 class="text-2xl font-bold text-white" data-i18n="paths.implementer.title">Implementer</h3>
-          <p class="text-purple-100 mt-2" data-i18n="paths.implementer.subtitle">Code & integration guides</p>
-        </div>
         <div class="p-6">
+          <div class="flex items-center space-x-4 mb-4">
+            <div class="w-14 h-14 rounded-xl flex items-center justify-center text-2xl" style="background: var(--gradient-btn-instruction);">
+              ⚙️
+            </div>
+            <div>
+              <h3 class="text-2xl font-bold text-gray-900 group-hover:text-indigo-600 transition-colors" data-i18n="paths.implementer.title">Implementer</h3>
+              <p class="text-gray-600 text-sm" data-i18n="paths.implementer.subtitle">Code & integration guides</p>
+            </div>
+          </div>
+
           <p class="text-gray-700 mb-6" data-i18n="paths.implementer.description">
 Get hands-on with implementation guides, API documentation, and reference code examples.
           </p>
+
           <ul class="space-y-3 mb-6 text-sm">
             <li class="flex items-start">
-              <svg aria-hidden="true" class="w-5 h-5 text-purple-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
+              <svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-instruction-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
               <span class="text-gray-700" data-i18n="paths.implementer.features.0">Working code examples</span>
             </li>
             <li class="flex items-start">
-              <svg aria-hidden="true" class="w-5 h-5 text-purple-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
+              <svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-instruction-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
               <span class="text-gray-700" data-i18n="paths.implementer.features.1">API integration patterns</span>
             </li>
             <li class="flex items-start">
-              <svg aria-hidden="true" class="w-5 h-5 text-purple-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
+              <svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-instruction-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
               <span class="text-gray-700" data-i18n="paths.implementer.features.2">Service architecture diagrams</span>
             </li>
             <li class="flex items-start">
-              <svg aria-hidden="true" class="w-5 h-5 text-purple-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
+              <svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-instruction-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
               <span class="text-gray-700" data-i18n="paths.implementer.features.3">Deployment best practices</span>
             </li>
           </ul>
-          <a href="/implementer.html" class="block w-full text-center bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition font-medium" data-i18n="paths.implementer.cta">View Implementation Guide
-          </a>
-        </div>
-      </div>
 
-      <!-- Leader Path -->
-      <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-visible hover-lift relative group">
+          <div class="mt-6 pt-4 border-t border-gray-200">
+            <span class="font-semibold group-hover:underline" style="color: var(--service-instruction-dark);" data-i18n="paths.implementer.cta">View Implementation Guide →</span>
+          </div>
+        </div>
+      </a>
+
+      <!-- Leader Path → PluralisticDeliberationOrchestrator (Teal) -->
+      <a href="/leader.html" class="block bg-white rounded-xl shadow-lg border-l-4 overflow-visible hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 relative group animate-fade-in-scale animate-delay-300" style="border-left-color: var(--service-deliberation-light);">
         <!-- Tooltip -->
         <div class="absolute bottom-full mb-4 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center shadow-xl">
           <span data-i18n="paths.leader.tooltip">For AI executives, research directors, startup founders, and strategic decision makers setting AI safety policy</span>
           <div class="absolute top-full left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div>
         </div>
 
-        <div class="bg-gradient-to-r from-amber-500 to-orange-600 p-6">
-          <svg aria-hidden="true" class="w-12 h-12 text-white mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
-          </svg>
-          <h3 class="text-2xl font-bold text-white" data-i18n="paths.leader.title">Leader</h3>
-          <p class="text-amber-100 mt-2" data-i18n="paths.leader.subtitle">Strategic AI Safety</p>
-        </div>
         <div class="p-6">
+          <div class="flex items-center space-x-4 mb-4">
+            <div class="w-14 h-14 rounded-xl flex items-center justify-center text-2xl" style="background: var(--gradient-btn-deliberation);">
+              💼
+            </div>
+            <div>
+              <h3 class="text-2xl font-bold text-gray-900 group-hover:text-teal-600 transition-colors" data-i18n="paths.leader.title">Leader</h3>
+              <p class="text-gray-600 text-sm" data-i18n="paths.leader.subtitle">Strategic AI Safety</p>
+            </div>
+          </div>
+
           <p class="text-gray-700 mb-6" data-i18n="paths.leader.description">
 Navigate the business case, compliance requirements, and competitive advantages of structural AI safety.
           </p>
+
           <ul class="space-y-3 mb-6 text-sm">
             <li class="flex items-start">
-              <svg aria-hidden="true" class="w-5 h-5 text-amber-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
+              <svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-deliberation-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
               <span class="text-gray-700" data-i18n="paths.leader.features.0">Executive briefing & business case</span>
             </li>
             <li class="flex items-start">
-              <svg aria-hidden="true" class="w-5 h-5 text-amber-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
+              <svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-deliberation-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
               <span class="text-gray-700" data-i18n="paths.leader.features.1">Risk management & compliance (EU AI Act)</span>
             </li>
             <li class="flex items-start">
-              <svg aria-hidden="true" class="w-5 h-5 text-amber-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
+              <svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-deliberation-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
               <span class="text-gray-700" data-i18n="paths.leader.features.2">Implementation roadmap & ROI</span>
             </li>
             <li class="flex items-start">
-              <svg aria-hidden="true" class="w-5 h-5 text-amber-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
+              <svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-deliberation-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
               <span class="text-gray-700" data-i18n="paths.leader.features.3">Competitive advantage analysis</span>
             </li>
           </ul>
-          <a href="/leader.html" class="block w-full text-center bg-amber-600 text-white py-3 rounded-lg hover:bg-amber-700 transition font-semibold" data-i18n="paths.leader.cta">View Leadership Resources
-          </a>
+
+          <div class="mt-6 pt-4 border-t border-gray-200">
+            <span class="font-semibold group-hover:underline" style="color: var(--service-deliberation-dark);" data-i18n="paths.leader.cta">View Leadership Resources →</span>
+          </div>
         </div>
-      </div>
+      </a>
+    </div>
+  </section>
 
     </div>
   </section>
@@ -219,9 +261,9 @@ Navigate the business case, compliance requirements, and competitive advantages
 
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 
-        <div class="border border-gray-200 rounded-lg p-6">
-          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
-            <svg aria-hidden="true" class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <div class="card-base card-interactive card-service instruction">
+          <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4" style="background: var(--gradient-btn-instruction);">
+            <svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
             </svg>
           </div>
@@ -231,9 +273,9 @@ Quadrant-based classification (STR/OPS/TAC/SYS/STO) with time-persistence metada
           </p>
         </div>
 
-        <div class="border border-gray-200 rounded-lg p-6">
-          <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
-            <svg aria-hidden="true" class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <div class="card-base card-interactive card-service validator">
+          <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4" style="background: var(--gradient-btn-validator);">
+            <svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
             </svg>
           </div>
@@ -243,9 +285,9 @@ Validates AI actions against explicit user instructions to prevent pattern-based
           </p>
         </div>
 
-        <div class="border border-gray-200 rounded-lg p-6">
-          <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
-            <svg aria-hidden="true" class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <div class="card-base card-interactive card-service boundary">
+          <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4" style="background: var(--gradient-btn-boundary);">
+            <svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
             </svg>
           </div>
@@ -255,9 +297,9 @@ Implements Tractatus 12.1-12.7 boundaries - values decisions architecturally req
           </p>
         </div>
 
-        <div class="border border-gray-200 rounded-lg p-6">
-          <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4">
-            <svg aria-hidden="true" class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <div class="card-base card-interactive card-service pressure">
+          <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4" style="background: var(--gradient-btn-pressure);">
+            <svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
             </svg>
           </div>
@@ -267,9 +309,9 @@ Detects degraded operating conditions (token pressure, errors, complexity) and a
           </p>
         </div>
 
-        <div class="border border-gray-200 rounded-lg p-6">
-          <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4">
-            <svg aria-hidden="true" class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <div class="card-base card-interactive card-service metacognitive">
+          <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4" style="background: var(--gradient-btn-metacognitive);">
+            <svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
             </svg>
           </div>
@@ -279,9 +321,9 @@ AI self-checks alignment, coherence, safety before execution - structural pause-
           </p>
         </div>
 
-        <div class="border border-gray-200 rounded-lg p-6">
-          <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
-            <svg aria-hidden="true" class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <div class="card-base card-interactive card-service deliberation">
+          <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4" style="background: var(--gradient-btn-deliberation);">
+            <svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
             </svg>
           </div>
@@ -345,63 +387,16 @@ Additional case studies and research findings documented in technical papers
   </main>
 
   <!-- Footer -->
-  <footer class="bg-gray-900 text-gray-400 py-12" role="contentinfo">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
-        <div>
-          <h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
-          <p class="text-sm" data-i18n="footer.description">
-Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
-          </p>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Resources</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
-            <li><a href="/demos/tractatus-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
-            <li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
-            <li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
-            <li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
-            <li><a href="/about.html" class="hover:text-white transition">About & Values</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Community</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
-            <li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
-            <li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Support This Work</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
-            <li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Acknowledgment</h3>
-          <p class="text-sm" data-i18n="footer.acknowledgment">
-This framework acknowledges Te Tiriti o Waitangi and indigenous leadership in digital sovereignty.
-            Built with respect for CARE Principles and Māori data sovereignty.
-          </p>
-        </div>
-      </div>
-      <div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
-        <p class="text-gray-300"><span data-i18n="footer.tagline">Safety Through Structure, Not Aspiration</span> | <span data-i18n="footer.built_with">Built with</span> <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
-        <p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
-      </div>
-    </div>
-  </footer>
-
   <!-- Version Management & PWA -->
   <script src="/js/version-manager.js"></script>
 
 
   <!-- Internationalization -->
-  <script src="/js/i18n-simple.js?v=0.1.0.1760643941"></script>
-  <script src="/js/components/language-selector.js?v=0.1.0.1760643941"></script>
+  <script src="/js/i18n-simple.js?v=1760818106"></script>
+  <script src="/js/components/language-selector.js?v=1760818106"></script>
+
+  <!-- Footer Component -->
+  <script src="/js/components/footer.js"></script>
 
 </body>
 </html>
diff --git a/public/js/components/document-viewer.js b/public/js/components/document-viewer.js
index 6f0a3a9e..8bbdbaab 100644
--- a/public/js/components/document-viewer.js
+++ b/public/js/components/document-viewer.js
@@ -103,14 +103,22 @@ class DocumentViewer {
         <h2 class="text-lg font-semibold text-gray-900 mb-4">Table of Contents</h2>
         <nav>
           <ul class="space-y-2">
-            ${toc.map(item => `
-              <li style="margin-left: ${(item.level - 1) * 16}px">
-                <a href="#${item.id}"
-                   class="text-blue-600 hover:text-blue-700 hover:underline">
-                  ${this.escapeHtml(item.text)}
-                </a>
-              </li>
-            `).join('')}
+            ${toc.map(item => {
+              // Generate Tailwind margin class based on level
+              const marginClass = item.level === 1 ? '' :
+                                 item.level === 2 ? 'ml-4' :
+                                 item.level === 3 ? 'ml-8' :
+                                 item.level === 4 ? 'ml-12' :
+                                 'ml-16';
+              return `
+                <li class="${marginClass}">
+                  <a href="#${item.id}"
+                     class="text-blue-600 hover:text-blue-700 hover:underline">
+                    ${this.escapeHtml(item.text)}
+                  </a>
+                </li>
+              `;
+            }).join('')}
           </ul>
         </nav>
       </div>
diff --git a/public/js/components/footer.js b/public/js/components/footer.js
index 7baac78e..3a80b097 100644
--- a/public/js/components/footer.js
+++ b/public/js/components/footer.js
@@ -37,7 +37,7 @@
           <div>
             <h3 class="text-white font-semibold mb-4">Support</h3>
             <ul class="space-y-2 text-sm">
-              <li><a href="/koha.html" class="hover:text-white transition">Donate (Koha)</a></li>
+              <li><a href="/koha.html" class="hover:text-white transition">Support (Koha)</a></li>
               <li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency</a></li>
               <li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
               <li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
@@ -50,7 +50,7 @@
             <ul class="space-y-2 text-sm">
               <li><a href="/privacy.html" class="hover:text-white transition">Privacy Policy</a></li>
               <li><a href="mailto:hello@agenticgovernance.digital" class="hover:text-white transition">Contact Us</a></li>
-              <li><a href="https://github.com/yourusername/tractatus" class="hover:text-white transition" target="_blank" rel="noopener">GitHub</a></li>
+              <li><a href="https://github.com/AgenticGovernance/tractatus-framework" class="hover:text-white transition" target="_blank" rel="noopener">GitHub</a></li>
             </ul>
           </div>
 
@@ -69,7 +69,7 @@
           <!-- Bottom Row -->
           <div class="flex flex-col md:flex-row justify-between items-center gap-4 text-sm">
             <p class="text-gray-400">
-              © ${new Date().getFullYear()} Tractatus AI Safety Framework. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache 2.0</a>.
+              © ${new Date().getFullYear()} John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache 2.0</a>.
             </p>
             <p class="text-gray-400">
               Made in Aotearoa New Zealand 🇳🇿
diff --git a/public/js/components/navbar.js b/public/js/components/navbar.js
index 5fd9b4c4..f8fd5e62 100644
--- a/public/js/components/navbar.js
+++ b/public/js/components/navbar.js
@@ -12,6 +12,7 @@ class TractatusNavbar {
   init() {
     this.render();
     this.attachEventListeners();
+    this.setActivePageIndicator();
   }
 
   render() {
@@ -25,7 +26,7 @@ class TractatusNavbar {
               <a href="/"
                  class="flex items-center space-x-3 px-3 py-2 -ml-3 rounded-lg hover:bg-blue-50 transition-all duration-200 group"
                  title="Return to homepage">
-                <img src="/images/tractatus-icon.svg" alt="Tractatus Icon" class="w-8 h-8">
+                <img src="/images/tractatus-icon-new.svg" alt="Tractatus Icon" class="w-8 h-8">
                 <span class="text-xl font-bold text-gray-900 group-hover:text-blue-700 transition-colors hidden sm:inline">Tractatus Framework</span>
                 <span class="text-xl font-bold text-gray-900 group-hover:text-blue-700 transition-colors sm:hidden">Tractatus</span>
                 <svg class="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity ml-1 hidden sm:block"
@@ -61,7 +62,7 @@ class TractatusNavbar {
           <div id="mobile-menu-panel" class="absolute right-0 top-0 bottom-0 w-80 max-w-[85vw] bg-white shadow-2xl transform transition-transform duration-300 ease-out">
             <div class="flex justify-between items-center px-5 h-16 border-b border-gray-200">
               <div class="flex items-center space-x-2">
-                <img src="/images/tractatus-icon.svg" alt="Tractatus Icon" class="w-6 h-6">
+                <img src="/images/tractatus-icon-new.svg" alt="Tractatus Icon" class="w-6 h-6">
                 <span class="font-bold text-gray-900">Navigation</span>
               </div>
               <button id="mobile-menu-close-btn" class="text-gray-600 hover:text-gray-900 p-2 rounded hover:bg-gray-100 transition" aria-label="Close menu">
@@ -111,7 +112,12 @@ class TractatusNavbar {
     if (existingNavbar) {
       existingNavbar.outerHTML = navHTML;
     } else {
-      document.body.insertAdjacentHTML('afterbegin', navHTML);
+      const placeholder = document.getElementById('navbar-placeholder');
+      if (placeholder) {
+        placeholder.outerHTML = navHTML;
+      } else {
+        document.body.insertAdjacentHTML('afterbegin', navHTML);
+      }
     }
   }
 
@@ -174,6 +180,35 @@ class TractatusNavbar {
       });
     });
   }
+
+  setActivePageIndicator() {
+    // Get current page path
+    const currentPath = window.location.pathname;
+
+    // Normalize paths (handle both /page.html and /page)
+    const normalizePath = (path) => {
+      if (path === '/' || path === '/index.html') return '/';
+      return path.replace('.html', '').replace(/\/$/, '');
+    };
+
+    const normalizedCurrent = normalizePath(currentPath);
+
+    // Find all navigation links in mobile menu
+    const mobileLinks = document.querySelectorAll('#mobile-menu a');
+
+    mobileLinks.forEach(link => {
+      const linkPath = link.getAttribute('href');
+      const normalizedLink = normalizePath(linkPath);
+
+      if (normalizedLink === normalizedCurrent) {
+        // Add active styling with brand colors
+        link.classList.add('border-l-4', 'bg-sky-50');
+        link.style.borderLeftColor = 'var(--tractatus-core-end)';
+        link.style.color = 'var(--tractatus-core-end)';
+        link.classList.remove('text-gray-700');
+      }
+    });
+  }
 }
 
 // Auto-initialize when DOM is ready
diff --git a/public/koha.html b/public/koha.html
index bd0c6176..8a2a15f8 100644
--- a/public/koha.html
+++ b/public/koha.html
@@ -6,6 +6,7 @@
   <title>Koha — Reciprocal Support | Tractatus AI Safety</title>
   <meta name="description" content="Join a relationship of mutual support for AI safety. Koha is reciprocal giving that maintains community bonds — your contribution sustains this work; our work serves you and the commons.">
   <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css">
   <style>
     .gradient-text { background: linear-gradient(120deg, #3b82f6 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
     .skip-link { position: absolute; left: -9999px; }
diff --git a/public/koha/success.html b/public/koha/success.html
index 121670fe..3547c6ed 100644
--- a/public/koha/success.html
+++ b/public/koha/success.html
@@ -6,6 +6,7 @@
   <title>Thank You! | Tractatus Koha</title>
   <meta name="description" content="Thank you for supporting the Tractatus AI Safety Framework. Your donation helps preserve human agency in AI systems.">
   <link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css">
   <style>
     .skip-link { position: absolute; left: -9999px; }
     .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
@@ -52,6 +53,13 @@
     .fade-in-up {
       animation: fadeInUp 0.6s ease-out forwards;
     }
+
+    /* Animation delays */
+    .delay-1 { animation-delay: 0.1s; }
+    .delay-2 { animation-delay: 0.2s; }
+    .delay-3 { animation-delay: 0.3s; }
+    .delay-4 { animation-delay: 0.4s; }
+    .delay-5 { animation-delay: 0.5s; }
   </style>
 </head>
 <body class="bg-gray-50">
@@ -79,12 +87,12 @@
         Ngā mihi nui! Thank You!
       </h1>
 
-      <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto fade-in-up" style="animation-delay: 0.1s;">
+      <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto fade-in-up delay-1">
         Your generous support helps us build architectural AI safety constraints that preserve human agency for everyone.
       </p>
 
       <!-- Donation Details -->
-      <div id="donation-details" class="bg-white shadow-lg rounded-lg p-8 mb-8 fade-in-up" style="animation-delay: 0.2s;">
+      <div id="donation-details" class="bg-white shadow-lg rounded-lg p-8 mb-8 fade-in-up delay-2">
         <h2 class="text-2xl font-bold text-gray-900 mb-6">Donation Details</h2>
 
         <div class="space-y-4 text-left max-w-md mx-auto">
@@ -110,7 +118,7 @@
       </div>
 
       <!-- What Happens Next -->
-      <div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg p-8 mb-8 text-white fade-in-up" style="animation-delay: 0.3s;">
+      <div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg p-8 mb-8 text-white fade-in-up delay-3">
         <h2 class="text-2xl font-bold mb-4">What Happens Next</h2>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-left">
           <div>
@@ -164,7 +172,7 @@
       </div>
 
       <!-- Monthly Donors Section -->
-      <div id="monthly-section" class="bg-white shadow rounded-lg p-8 mb-8 fade-in-up" style="animation-delay: 0.4s; display: none;">
+      <div id="monthly-section" class="hidden bg-white shadow rounded-lg p-8 mb-8 fade-in-up delay-4">
         <h2 class="text-2xl font-bold text-gray-900 mb-4">Managing Your Monthly Donation</h2>
         <p class="text-gray-600 mb-6">
           Your monthly support provides sustainable funding for the Tractatus Framework. You can cancel or modify your donation anytime.
@@ -204,7 +212,7 @@
       </div>
 
       <!-- Next Steps -->
-      <div class="flex flex-col sm:flex-row gap-4 justify-center fade-in-up" style="animation-delay: 0.5s;">
+      <div class="flex flex-col sm:flex-row gap-4 justify-center fade-in-up delay-5">
         <a href="/koha/transparency" class="inline-block bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition">
           View Transparency Dashboard
         </a>
@@ -219,7 +227,7 @@
     </div>
 
     <!-- Loading State -->
-    <div id="loading-content" class="text-center" style="display: none;">
+    <div id="loading-content" class="hidden text-center">
       <div class="inline-flex items-center justify-center w-16 h-16 mb-4">
         <svg class="animate-spin h-12 w-12 text-blue-600" fill="none" viewBox="0 0 24 24">
           <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
@@ -230,7 +238,7 @@
     </div>
 
     <!-- Error State -->
-    <div id="error-content" class="text-center" style="display: none;">
+    <div id="error-content" class="hidden text-center">
       <div class="inline-flex items-center justify-center w-24 h-24 bg-red-100 rounded-full mb-8">
         <svg class="w-12 h-12 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
@@ -261,61 +269,8 @@
   <!-- Footer -->
   <script src="/js/components/footer.js"></script>
 
-  <!-- Coming Soon Overlay (remove when Stripe is configured) -->
-  <script src="/js/components/coming-soon-overlay.js"></script>
-
-  <script>
-    // Get session ID from URL
-    const urlParams = new URLSearchParams(window.location.search);
-    const sessionId = urlParams.get('session_id');
-
-    // Verify donation
-    async function verifyDonation() {
-      if (!sessionId) {
-        // No session ID - just show success message
-        document.getElementById('loading-content').style.display = 'none';
-        document.getElementById('success-content').style.display = 'block';
-        return;
-      }
-
-      try {
-        const response = await fetch(`/api/koha/verify/${sessionId}`);
-        const data = await response.json();
-
-        if (data.success && data.data.isSuccessful) {
-          // Show success content
-          document.getElementById('loading-content').style.display = 'none';
-          document.getElementById('success-content').style.display = 'block';
-
-          // Update details
-          document.getElementById('amount').textContent = `$${data.data.amount.toFixed(2)} ${data.data.currency.toUpperCase()}`;
-
-          const frequencyText = data.data.frequency === 'monthly' ? 'Monthly Donation' : 'One-Time Donation';
-          document.getElementById('frequency').textContent = frequencyText;
-
-          // Show monthly section if applicable
-          if (data.data.frequency === 'monthly') {
-            document.getElementById('monthly-section').style.display = 'block';
-          }
-
-        } else {
-          throw new Error('Donation not successful');
-        }
-
-      } catch (error) {
-        console.error('Verification error:', error);
-        document.getElementById('loading-content').style.display = 'none';
-        document.getElementById('error-content').style.display = 'block';
-      }
-    }
-
-    // Verify on page load
-    if (sessionId) {
-      document.getElementById('success-content').style.display = 'none';
-      document.getElementById('loading-content').style.display = 'block';
-      verifyDonation();
-    }
-  </script>
+  <!-- Donation verification -->
+  <script src="/js/koha-success.js"></script>
 
 </body>
 </html>
diff --git a/public/koha/transparency.html b/public/koha/transparency.html
index bc02a867..1c052c6b 100644
--- a/public/koha/transparency.html
+++ b/public/koha/transparency.html
@@ -6,6 +6,7 @@
   <title>Transparency Dashboard | Tractatus Koha</title>
   <meta name="description" content="Full transparency on donations received and how they're allocated to support the Tractatus AI Safety Framework.">
   <link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css">
   <!-- Chart.js for visual analytics -->
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js" crossorigin="anonymous"></script>
   <style>
@@ -47,10 +48,10 @@
 
     <!-- Header -->
     <div class="text-center mb-12">
-      <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
+      <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4" data-i18n="heading">
         Transparency Dashboard
       </h1>
-      <p class="text-xl text-gray-600 max-w-3xl mx-auto">
+      <p class="text-xl text-gray-600 max-w-3xl mx-auto" data-i18n="subheading">
         Full visibility into donations received and how we allocate them to support the Tractatus Framework.
       </p>
       <div class="flex items-center justify-center gap-4 mt-6">
@@ -61,7 +62,7 @@
           <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
           </svg>
-          Export CSV
+          <span data-i18n="export_csv">Export CSV</span>
         </button>
       </div>
     </div>
@@ -72,44 +73,44 @@
       <!-- Total Received -->
       <div class="stat-card bg-white shadow rounded-lg p-6">
         <div class="flex items-center justify-between mb-2">
-          <h2 class="text-sm font-medium text-gray-600">Total Received</h2>
+          <h2 class="text-sm font-medium text-gray-600" data-i18n="metrics.total_received">Total Received</h2>
           <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
           </svg>
         </div>
         <div class="text-4xl font-bold text-gray-900" id="total-received">$0</div>
-        <div class="text-sm text-gray-500 mt-1">NZD lifetime</div>
+        <div class="text-sm text-gray-500 mt-1" data-i18n="metrics.lifetime">NZD lifetime</div>
       </div>
 
       <!-- Monthly Supporters -->
       <div class="stat-card bg-white shadow rounded-lg p-6">
         <div class="flex items-center justify-between mb-2">
-          <h2 class="text-sm font-medium text-gray-600">Monthly Supporters</h2>
+          <h2 class="text-sm font-medium text-gray-600" data-i18n="metrics.monthly_supporters">Monthly Supporters</h2>
           <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
           </svg>
         </div>
         <div class="text-4xl font-bold text-gray-900" id="monthly-supporters">0</div>
-        <div class="text-sm text-gray-500 mt-1">Active subscriptions</div>
+        <div class="text-sm text-gray-500 mt-1" data-i18n="metrics.active_subscriptions">Active subscriptions</div>
       </div>
 
       <!-- Monthly Recurring -->
       <div class="stat-card bg-white shadow rounded-lg p-6">
         <div class="flex items-center justify-between mb-2">
-          <h2 class="text-sm font-medium text-gray-600">Monthly Recurring</h2>
+          <h2 class="text-sm font-medium text-gray-600" data-i18n="metrics.monthly_recurring">Monthly Recurring</h2>
           <svg class="w-6 h-6 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
           </svg>
         </div>
         <div class="text-4xl font-bold text-gray-900" id="monthly-revenue">$0</div>
-        <div class="text-sm text-gray-500 mt-1">NZD per month</div>
+        <div class="text-sm text-gray-500 mt-1" data-i18n="metrics.per_month">NZD per month</div>
       </div>
 
     </div>
 
     <!-- Allocation Breakdown -->
     <div class="bg-white shadow rounded-lg p-8 mb-12">
-      <h2 class="text-2xl font-bold text-gray-900 mb-6">How Donations Are Allocated</h2>
+      <h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="allocation.heading">How Donations Are Allocated</h2>
 
       <!-- Allocation Chart -->
       <div class="mb-8 max-w-md mx-auto">
@@ -121,13 +122,13 @@
         <div>
           <div class="flex justify-between items-center mb-2">
             <div>
-              <span class="font-semibold text-gray-900">Development</span>
-              <span class="text-sm text-gray-600 ml-2">Feature development, bug fixes, security updates</span>
+              <span class="font-semibold text-gray-900" data-i18n="allocation.development">Development</span>
+              <span class="text-sm text-gray-600 ml-2" data-i18n="allocation.development_desc">Feature development, bug fixes, security updates</span>
             </div>
             <span class="font-bold text-blue-600">40%</span>
           </div>
           <div class="w-full bg-gray-200 rounded-full h-3">
-            <div class="progress-bar bg-blue-600 h-3 rounded-full" style="width: 0%;" data-width="40"></div>
+            <div class="progress-bar bg-blue-600 h-3 rounded-full" data-width="40"></div>
           </div>
         </div>
 
@@ -135,13 +136,13 @@
         <div>
           <div class="flex justify-between items-center mb-2">
             <div>
-              <span class="font-semibold text-gray-900">Hosting & Infrastructure</span>
-              <span class="text-sm text-gray-600 ml-2">Servers, database, CDN, domain, SSL</span>
+              <span class="font-semibold text-gray-900" data-i18n="allocation.hosting">Hosting & Infrastructure</span>
+              <span class="text-sm text-gray-600 ml-2" data-i18n="allocation.hosting_desc">Servers, database, CDN, domain, SSL</span>
             </div>
             <span class="font-bold text-green-600">30%</span>
           </div>
           <div class="w-full bg-gray-200 rounded-full h-3">
-            <div class="progress-bar bg-green-600 h-3 rounded-full" style="width: 0%;" data-width="30"></div>
+            <div class="progress-bar bg-green-600 h-3 rounded-full" data-width="30"></div>
           </div>
         </div>
 
@@ -149,13 +150,13 @@
         <div>
           <div class="flex justify-between items-center mb-2">
             <div>
-              <span class="font-semibold text-gray-900">Research</span>
-              <span class="text-sm text-gray-600 ml-2">AI safety research, academic partnerships, publications</span>
+              <span class="font-semibold text-gray-900" data-i18n="allocation.research">Research</span>
+              <span class="text-sm text-gray-600 ml-2" data-i18n="allocation.research_desc">AI safety research, academic partnerships, publications</span>
             </div>
             <span class="font-bold text-purple-600">20%</span>
           </div>
           <div class="w-full bg-gray-200 rounded-full h-3">
-            <div class="progress-bar bg-purple-600 h-3 rounded-full" style="width: 0%;" data-width="20"></div>
+            <div class="progress-bar bg-purple-600 h-3 rounded-full" data-width="20"></div>
           </div>
         </div>
 
@@ -163,13 +164,13 @@
         <div>
           <div class="flex justify-between items-center mb-2">
             <div>
-              <span class="font-semibold text-gray-900">Community</span>
-              <span class="text-sm text-gray-600 ml-2">Documentation, outreach, contributor support</span>
+              <span class="font-semibold text-gray-900" data-i18n="allocation.community">Community</span>
+              <span class="text-sm text-gray-600 ml-2" data-i18n="allocation.community_desc">Documentation, outreach, contributor support</span>
             </div>
             <span class="font-bold text-orange-600">10%</span>
           </div>
           <div class="w-full bg-gray-200 rounded-full h-3">
-            <div class="progress-bar bg-orange-600 h-3 rounded-full" style="width: 0%;" data-width="10"></div>
+            <div class="progress-bar bg-orange-600 h-3 rounded-full" data-width="10"></div>
           </div>
         </div>
       </div>
@@ -178,41 +179,41 @@
     <!-- One-Time Donations -->
     <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
       <div class="bg-white shadow rounded-lg p-6">
-        <h3 class="text-lg font-semibold text-gray-900 mb-3">One-Time Donations</h3>
+        <h3 class="text-lg font-semibold text-gray-900 mb-3" data-i18n="metrics.one_time_donations">One-Time Donations</h3>
         <div class="text-3xl font-bold text-gray-900" id="onetime-count">0</div>
-        <div class="text-sm text-gray-500">Total gifts received</div>
+        <div class="text-sm text-gray-500" data-i18n="metrics.total_gifts">Total gifts received</div>
       </div>
 
       <div class="bg-white shadow rounded-lg p-6">
-        <h3 class="text-lg font-semibold text-gray-900 mb-3">Average Donation</h3>
+        <h3 class="text-lg font-semibold text-gray-900 mb-3" data-i18n="metrics.average_donation">Average Donation</h3>
         <div class="text-3xl font-bold text-gray-900" id="average-donation">$0</div>
-        <div class="text-sm text-gray-500">NZD across all donations</div>
+        <div class="text-sm text-gray-500" data-i18n="metrics.across_all">NZD across all donations</div>
       </div>
     </div>
 
     <!-- Recent Supporters (Public Acknowledgements) -->
     <div class="bg-white shadow rounded-lg p-8">
-      <h2 class="text-2xl font-bold text-gray-900 mb-6">Recent Supporters</h2>
-      <p class="text-gray-600 mb-6">
+      <h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="supporters.heading">Recent Supporters</h2>
+      <p class="text-gray-600 mb-6" data-i18n="supporters.intro">
         Thank you to these generous supporters who have opted to be publicly acknowledged. All supporters are valued equally, whether listed here or donating anonymously.
       </p>
 
       <div id="recent-donors" class="space-y-3">
-        <p class="text-gray-500 text-center py-8">Loading supporters...</p>
+        <p class="text-gray-500 text-center py-8" data-i18n="supporters.loading">Loading supporters...</p>
       </div>
 
-      <div id="no-donors" class="text-center py-8 text-gray-500" style="display: none;">
+      <div id="no-donors" class="hidden text-center py-8 text-gray-500" data-i18n="supporters.none">
         No public acknowledgements yet. Be the first to support Tractatus!
       </div>
     </div>
 
     <!-- Call to Action -->
     <div class="mt-12 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg p-8 text-center text-white">
-      <h2 class="text-2xl font-bold mb-4">Support the Tractatus Framework</h2>
-      <p class="text-blue-100 mb-6 max-w-2xl mx-auto">
+      <h2 class="text-2xl font-bold mb-4" data-i18n="cta.heading">Support the Tractatus Framework</h2>
+      <p class="text-blue-100 mb-6 max-w-2xl mx-auto" data-i18n="cta.text">
         Help us build architectural AI safety constraints that preserve human agency. Every contribution makes a difference.
       </p>
-      <a href="/koha.html" class="inline-block bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition">
+      <a href="/koha.html" class="inline-block bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition" data-i18n="cta.button">
         Make a Donation
       </a>
     </div>
@@ -222,11 +223,12 @@
   <!-- Footer -->
   <script src="/js/components/footer.js"></script>
 
-  <!-- Coming Soon Overlay (remove when Stripe is configured) -->
-  <script src="/js/components/coming-soon-overlay.js"></script>
-
   <!-- Transparency Dashboard JavaScript -->
   <script src="/js/koha-transparency.js"></script>
 
+  <!-- Internationalization -->
+  <script src="/js/i18n-simple.js"></script>
+  <script src="/js/components/language-selector.js"></script>
+
 </body>
 </html>
diff --git a/public/leader.html b/public/leader.html
index a94cdd59..5a968517 100644
--- a/public/leader.html
+++ b/public/leader.html
@@ -14,9 +14,12 @@
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="default">
   <meta name="apple-mobile-web-app-title" content="Tractatus">
-  <link rel="apple-touch-icon" href="/images/tractatus-icon.svg">
+  <link rel="apple-touch-icon" href="/images/tractatus-icon-new.svg">
 
+  <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
+  <link rel="stylesheet" href="/css/fonts.css">
   <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
   <style>
     .hover-lift { transition: all 0.3s ease; }
     .hover-lift:hover { transform: translateY(-2px); }
@@ -52,6 +55,17 @@
 
   <script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
 
+  <!-- Breadcrumb Navigation -->
+  <nav class="bg-gray-50 border-b border-gray-200 py-3" aria-label="Breadcrumb">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <ol class="flex items-center space-x-2 text-sm">
+        <li><a href="/" class="hover:underline transition-colors" style="color: var(--tractatus-core-end);">Home</a></li>
+        <li class="text-gray-400">/</li>
+        <li class="text-gray-900 font-medium" aria-current="page">Leader</li>
+      </ol>
+    </div>
+  </nav>
+
   <!-- Header -->
   <div class="bg-gray-50 border-b border-gray-200 py-16">
     <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -487,6 +501,24 @@
                 </svg>
               </a>
             </p>
+            <p class="mt-3">
+              <strong>AI Safety Research:</strong> Architectural Safeguards Against LLM Hierarchical Dominance — How Tractatus protects pluralistic values from AI pattern bias while maintaining safety boundaries.
+              <span class="inline-flex gap-3 mt-2">
+                <a href="/docs/research/ARCHITECTURAL-SAFEGUARDS-Against-LLM-Hierarchical-Dominance-Prose.pdf" target="_blank" class="text-amber-700 hover:text-amber-800 font-medium inline-flex items-center">
+                  PDF
+                  <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
+                  </svg>
+                </a>
+                <span class="text-gray-400">|</span>
+                <a href="/docs.html?doc=architectural-safeguards-against-llm-hierarchical-dominance-prose" class="text-amber-700 hover:text-amber-800 font-medium inline-flex items-center">
+                  Read online
+                  <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+                  </svg>
+                </a>
+              </span>
+            </p>
           </div>
         </div>
       </div>
@@ -562,64 +594,16 @@
   </div>
 
   <!-- Footer -->
-  <footer class="bg-gray-900 text-gray-400 py-12 mt-16" role="contentinfo">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="grid grid-cols-1 md:grid-cols-5 gap-8">
-        <div>
-          <h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
-          <p class="text-sm">
-            Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
-          </p>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Resources</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
-            <li><a href="/demos/tractatus-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
-            <li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
-            <li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
-            <li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
-            <li><a href="/about.html" class="hover:text-white transition">About & Values</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Community</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
-            <li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
-            <li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
-            <li><a href="/#newsletter" class="hover:text-white transition">Newsletter</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Support This Work</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
-            <li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Acknowledgment</h3>
-          <p class="text-sm">
-            This framework acknowledges Te Tiriti o Waitangi and indigenous leadership in digital sovereignty.
-            Built with respect for CARE Principles and Māori data sovereignty.
-          </p>
-        </div>
-      </div>
-      <div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
-        <p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
-        <p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
-      </div>
-    </div>
-  </footer>
-
   <!-- Internationalization -->
-  <script src="/js/i18n-simple.js?v=0.1.0.1760643941"></script>
-  <script src="/js/components/language-selector.js?v=0.1.0.1760643941"></script>
+  <script src="/js/i18n-simple.js?v=1760818106"></script>
+  <script src="/js/components/language-selector.js?v=1760818106"></script>
 
   <!-- Version Management & PWA -->
-  <script src="/js/version-manager.js"></script>
-  <script src="/js/leader-page.js"></script>
+  <script src="/js/version-manager.js?v=0.1.0.1760680958072"></script>
+  <script src="/js/leader-page.js?v=0.1.0.1760680958072"></script>
+
+  <!-- Footer Component -->
+  <script src="/js/components/footer.js"></script>
 
 </body>
 </html>
diff --git a/public/manifest.json b/public/manifest.json
index 1bc8688f..25933064 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -5,17 +5,17 @@
   "start_url": "/",
   "display": "standalone",
   "background_color": "#ffffff",
-  "theme_color": "#3b82f6",
+  "theme_color": "#0ea5e9",
   "orientation": "portrait-primary",
   "icons": [
     {
-      "src": "/images/tractatus-icon.svg",
+      "src": "/images/tractatus-icon-new.svg",
       "sizes": "any",
       "type": "image/svg+xml",
       "purpose": "any maskable"
     },
     {
-      "src": "/favicon.svg",
+      "src": "/favicon-new.svg",
       "sizes": "any",
       "type": "image/svg+xml"
     }
@@ -27,21 +27,21 @@
       "short_name": "Docs",
       "description": "Browse framework documentation",
       "url": "/docs.html",
-      "icons": [{ "src": "/images/tractatus-icon.svg", "sizes": "any" }]
+      "icons": [{ "src": "/images/tractatus-icon-new.svg", "sizes": "any" }]
     },
     {
       "name": "FAQ",
       "short_name": "FAQ",
       "description": "Frequently asked questions",
       "url": "/faq.html",
-      "icons": [{ "src": "/images/tractatus-icon.svg", "sizes": "any" }]
+      "icons": [{ "src": "/images/tractatus-icon-new.svg", "sizes": "any" }]
     },
     {
       "name": "27027 Demo",
       "short_name": "Demo",
       "description": "Interactive pattern bias demonstration",
       "url": "/demos/27027-demo.html",
-      "icons": [{ "src": "/images/tractatus-icon.svg", "sizes": "any" }]
+      "icons": [{ "src": "/images/tractatus-icon-new.svg", "sizes": "any" }]
     }
   ]
 }
diff --git a/public/media-inquiry.html b/public/media-inquiry.html
index 87bdd6bd..cbfe3fa1 100644
--- a/public/media-inquiry.html
+++ b/public/media-inquiry.html
@@ -4,7 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Media Inquiry | Tractatus AI Safety</title>
+  <link rel="stylesheet" href="/css/fonts.css">
   <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
   <style>
     .form-group { margin-bottom: 1.5rem; }
     .form-label {
@@ -16,15 +18,16 @@
     .form-input, .form-textarea {
       width: 100%;
       padding: 0.75rem;
-      border: 1px solid #d1d5db;
-      border-radius: 0.375rem;
+      border: 2px solid #e2e8f0;
+      border-radius: 0.5rem;
       font-size: 1rem;
-      transition: border-color 0.15s;
+      transition: all 0.2s ease;
     }
     .form-input:focus, .form-textarea:focus {
       outline: none;
-      border-color: #3b82f6;
-      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+      border-color: var(--tractatus-core-end);
+      box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
+      transform: translateY(-1px);
     }
     .form-textarea { min-height: 150px; resize: vertical; }
     .form-help { font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem; }
@@ -48,15 +51,15 @@
 
     /* Accessibility: Skip link */
     .skip-link { position: absolute; left: -9999px; top: 0; }
-    .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid #3b82f6; }
+    .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid var(--tractatus-core-end); }
 
     /* Accessibility: Focus indicators (WCAG 2.4.7) */
     a:focus, button:focus, input:focus, select:focus, textarea:focus {
-      outline: 3px solid #3b82f6;
+      outline: 3px solid var(--tractatus-core-end);
       outline-offset: 2px;
     }
     a:focus:not(:focus-visible) { outline: none; }
-    a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
+    a:focus-visible { outline: 3px solid var(--tractatus-core-end); outline-offset: 2px; }
   </style>
 </head>
 <body class="bg-gray-50">
@@ -145,7 +148,7 @@
 
         <!-- Submit Button -->
         <div class="mt-8">
-          <button type="submit" id="submit-button" class="w-full bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition">
+          <button type="submit" id="submit-button" class="w-full text-white px-6 py-3 rounded-lg font-semibold transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5" style="background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);">
             Submit Inquiry
           </button>
           <p class="form-help mt-3 text-center">
@@ -160,7 +163,7 @@
     <div class="mt-6 text-sm text-gray-600 text-center">
       <p>
         Your contact information is handled according to our
-        <a href="/about/values.html" class="text-blue-600 hover:text-blue-700">privacy principles</a>.
+        <a href="/about/values.html" class="hover:underline transition-colors" style="color: var(--tractatus-core-end);">privacy principles</a>.
         We never share media inquiries with third parties.
       </p>
     </div>
@@ -168,126 +171,10 @@
   </main>
 
   <!-- Footer -->
-  <footer class="bg-gray-900 text-gray-400 py-12 mt-16" role="contentinfo">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="grid grid-cols-1 md:grid-cols-5 gap-8">
-        <div>
-          <h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
-          <p class="text-sm">
-            Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
-          </p>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Resources</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
-            <li><a href="/demos/tractatus-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
-            <li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
-            <li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
-            <li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
-            <li><a href="/about.html" class="hover:text-white transition">About & Values</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Community</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
-            <li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
-            <li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
-            <li><a href="/#newsletter" class="hover:text-white transition">Newsletter</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Support This Work</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
-            <li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Acknowledgment</h3>
-          <p class="text-sm">
-            This framework acknowledges Te Tiriti o Waitangi and indigenous leadership in digital sovereignty.
-            Built with respect for CARE Principles and Māori data sovereignty.
-          </p>
-        </div>
-      </div>
-      <div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
-        <p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
-        <p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
-      </div>
-    </div>
-  </footer>
+  <script src="/js/media-inquiry.js"></script>
 
-  <script>
-    const form = document.getElementById('media-inquiry-form');
-    const submitButton = document.getElementById('submit-button');
-    const successMessage = document.getElementById('success-message');
-    const errorMessage = document.getElementById('error-message');
-
-    form.addEventListener('submit', async (e) => {
-      e.preventDefault();
-
-      // Hide previous messages
-      successMessage.style.display = 'none';
-      errorMessage.style.display = 'none';
-
-      // Disable submit button
-      submitButton.disabled = true;
-      submitButton.textContent = 'Submitting...';
-
-      // Collect form data
-      const formData = {
-        contact: {
-          name: document.getElementById('contact-name').value,
-          email: document.getElementById('contact-email').value,
-          outlet: document.getElementById('contact-outlet').value,
-          phone: document.getElementById('contact-phone').value || null
-        },
-        inquiry: {
-          subject: document.getElementById('inquiry-subject').value,
-          message: document.getElementById('inquiry-message').value,
-          deadline: document.getElementById('inquiry-deadline').value || null,
-          topic_areas: []
-        }
-      };
-
-      try {
-        const response = await fetch('/api/media/inquiries', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify(formData)
-        });
-
-        const data = await response.json();
-
-        if (response.ok) {
-          // Success
-          successMessage.textContent = data.message || 'Thank you for your inquiry. We will review and respond shortly.';
-          successMessage.style.display = 'block';
-          form.reset();
-          window.scrollTo({ top: 0, behavior: 'smooth' });
-        } else {
-          // Error
-          errorMessage.textContent = data.message || 'An error occurred. Please try again.';
-          errorMessage.style.display = 'block';
-          window.scrollTo({ top: 0, behavior: 'smooth' });
-        }
-
-      } catch (error) {
-        console.error('Submit error:', error);
-        errorMessage.textContent = 'Network error. Please check your connection and try again.';
-        errorMessage.style.display = 'block';
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-      } finally {
-        // Re-enable submit button
-        submitButton.disabled = false;
-        submitButton.textContent = 'Submit Inquiry';
-      }
-    });
-  </script>
+  <!-- Footer Component -->
+  <script src="/js/components/footer.js"></script>
 
 </body>
 </html>
diff --git a/public/media-triage-transparency.html b/public/media-triage-transparency.html
index 85aaa124..390e4238 100644
--- a/public/media-triage-transparency.html
+++ b/public/media-triage-transparency.html
@@ -6,6 +6,7 @@
   <title>Media Triage Transparency | Tractatus Framework</title>
   <meta name="description" content="Transparent AI-powered media inquiry triage with 100% human oversight. See how the Tractatus framework governs AI analysis in practice.">
   <link rel="stylesheet" href="/css/tailwind.css">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css">
   <style>
     /* Accessibility: Skip link */
     .skip-link { position: absolute; left: -9999px; top: 0; }
@@ -187,7 +188,7 @@
                 <span id="urgency-high-count" class="text-gray-600">- inquiries</span>
               </div>
               <div class="w-full bg-gray-200 rounded-full h-3">
-                <div id="urgency-high-bar" class="bg-red-500 h-3 rounded-full" style="width: 0%"></div>
+                <div id="urgency-high-bar" class="bg-red-500 h-3 rounded-full"></div>
               </div>
             </div>
 
@@ -198,7 +199,7 @@
                 <span id="urgency-medium-count" class="text-gray-600">- inquiries</span>
               </div>
               <div class="w-full bg-gray-200 rounded-full h-3">
-                <div id="urgency-medium-bar" class="bg-yellow-500 h-3 rounded-full" style="width: 0%"></div>
+                <div id="urgency-medium-bar" class="bg-yellow-500 h-3 rounded-full"></div>
               </div>
             </div>
 
@@ -209,7 +210,7 @@
                 <span id="urgency-low-count" class="text-gray-600">- inquiries</span>
               </div>
               <div class="w-full bg-gray-200 rounded-full h-3">
-                <div id="urgency-low-bar" class="bg-green-500 h-3 rounded-full" style="width: 0%"></div>
+                <div id="urgency-low-bar" class="bg-green-500 h-3 rounded-full"></div>
               </div>
             </div>
           </div>
@@ -228,7 +229,7 @@
                 <span id="sensitivity-high-count" class="text-gray-600">- inquiries</span>
               </div>
               <div class="w-full bg-gray-200 rounded-full h-3">
-                <div id="sensitivity-high-bar" class="bg-red-500 h-3 rounded-full" style="width: 0%"></div>
+                <div id="sensitivity-high-bar" class="bg-red-500 h-3 rounded-full"></div>
               </div>
             </div>
 
@@ -239,7 +240,7 @@
                 <span id="sensitivity-medium-count" class="text-gray-600">- inquiries</span>
               </div>
               <div class="w-full bg-gray-200 rounded-full h-3">
-                <div id="sensitivity-medium-bar" class="bg-yellow-500 h-3 rounded-full" style="width: 0%"></div>
+                <div id="sensitivity-medium-bar" class="bg-yellow-500 h-3 rounded-full"></div>
               </div>
             </div>
 
@@ -250,7 +251,7 @@
                 <span id="sensitivity-low-count" class="text-gray-600">- inquiries</span>
               </div>
               <div class="w-full bg-gray-200 rounded-full h-3">
-                <div id="sensitivity-low-bar" class="bg-green-500 h-3 rounded-full" style="width: 0%"></div>
+                <div id="sensitivity-low-bar" class="bg-green-500 h-3 rounded-full"></div>
               </div>
             </div>
           </div>
@@ -354,47 +355,10 @@
   </div>
 
   <!-- Footer -->
-  <footer class="bg-gray-900 text-gray-400 py-12">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
-        <div>
-          <h3 class="text-white font-bold mb-4">Tractatus Framework</h3>
-          <p class="text-sm">
-            Preserving human agency through architectural constraints, not aspirational goals.
-          </p>
-        </div>
-        <div>
-          <h3 class="text-white font-bold mb-4">Audience Paths</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/researcher.html" class="hover:text-white">Researchers</a></li>
-            <li><a href="/implementer.html" class="hover:text-white">Implementers</a></li>
-            <li><a href="/leader.html" class="hover:text-white">Leaders</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-bold mb-4">Resources</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/docs.html" class="hover:text-white">Documentation</a></li>
-            <li><a href="/media-triage-transparency.html" class="hover:text-white">Triage Transparency</a></li>
-            <li><a href="/" class="hover:text-white">Home</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-bold mb-4">Community</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/media-inquiry.html" class="hover:text-white">Media Inquiries</a></li>
-            <li><a href="/case-submission.html" class="hover:text-white">Submit Case Study</a></li>
-          </ul>
-        </div>
-      </div>
-      <div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
-        <p class="text-gray-500">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
-        <p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
-      </div>
-    </div>
-  </footer>
-
   <script src="/js/media-triage-transparency.js"></script>
 
+  <!-- Footer Component -->
+  <script src="/js/components/footer.js"></script>
+
 </body>
 </html>
diff --git a/public/privacy.html b/public/privacy.html
index 4babb479..aaf8fb39 100644
--- a/public/privacy.html
+++ b/public/privacy.html
@@ -6,6 +6,7 @@
   <title>Privacy Policy | Tractatus AI Safety Framework</title>
   <meta name="description" content="Privacy policy for the Tractatus AI Safety Framework. Learn how we collect, use, and protect your data.">
   <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css">
   <style>
     .skip-link { position: absolute; left: -9999px; }
     .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
diff --git a/public/researcher.html b/public/researcher.html
index cf116a53..740a8398 100644
--- a/public/researcher.html
+++ b/public/researcher.html
@@ -14,9 +14,12 @@
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="default">
   <meta name="apple-mobile-web-app-title" content="Tractatus">
-  <link rel="apple-touch-icon" href="/images/tractatus-icon.svg">
+  <link rel="apple-touch-icon" href="/images/tractatus-icon-new.svg">
 
+  <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
+  <link rel="stylesheet" href="/css/fonts.css">
   <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
   <style>
     .skip-link { position: absolute; left: -9999px; }
     .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
@@ -43,6 +46,17 @@
 
   <script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
 
+  <!-- Breadcrumb Navigation -->
+  <nav class="bg-gray-50 border-b border-gray-200 py-3" aria-label="Breadcrumb">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <ol class="flex items-center space-x-2 text-sm">
+        <li><a href="/" class="hover:underline transition-colors" style="color: var(--tractatus-core-end);">Home</a></li>
+        <li class="text-gray-400">/</li>
+        <li class="text-gray-900 font-medium" aria-current="page">Researcher</li>
+      </ol>
+    </div>
+  </nav>
+
   <!-- Header -->
   <div class="bg-gray-50 border-b border-gray-200 py-16">
     <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -87,10 +101,10 @@
       <h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.theoretical_foundations.heading">Theoretical Foundations</h2>
 
       <!-- Organisational Theory -->
-      <div class="border border-gray-300 rounded-lg mb-4">
-        <div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" data-accordion="org-theory">
-          <h3 class="font-semibold text-gray-900" data-i18n="sections.theoretical_foundations.org_theory_title">Organisational Theory Basis</h3>
-          <svg id="org-theory-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <div class="border-l-4 border border-gray-200 rounded-lg mb-4" style="border-left-color: #8b5cf6;">
+        <div class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200" data-accordion="org-theory">
+          <h3 class="font-semibold text-gray-900 group-hover:text-[#8b5cf6] transition-colors" data-i18n="sections.theoretical_foundations.org_theory_title">Organisational Theory Basis</h3>
+          <svg id="org-theory-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
           </svg>
         </div>
@@ -136,10 +150,10 @@
       </div>
 
       <!-- Values Pluralism -->
-      <div class="border border-gray-300 rounded-lg">
-        <div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" data-accordion="values">
-          <h3 class="font-semibold text-gray-900" data-i18n="sections.theoretical_foundations.values_pluralism_title">Values Pluralism & Moral Philosophy</h3>
-          <svg id="values-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <div class="border-l-4 border border-gray-200 rounded-lg" style="border-left-color: #8b5cf6;">
+        <div class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200" data-accordion="values">
+          <h3 class="font-semibold text-gray-900 group-hover:text-[#8b5cf6] transition-colors" data-i18n="sections.theoretical_foundations.values_pluralism_title">Values Pluralism & Moral Philosophy</h3>
+          <svg id="values-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
           </svg>
         </div>
@@ -283,10 +297,10 @@
     <section class="mb-16">
       <h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.architecture.heading">Six-Component Architecture</h2>
 
-      <div class="border border-gray-300 rounded-lg">
-        <div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" data-accordion="architecture">
-          <h3 class="font-semibold text-gray-900" data-i18n="sections.architecture.services_title">Framework Services & Functions</h3>
-          <svg id="architecture-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <div class="border-l-4 border border-gray-200 rounded-lg" style="border-left-color: #8b5cf6;">
+        <div class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200" data-accordion="architecture">
+          <h3 class="font-semibold text-gray-900 group-hover:text-[#8b5cf6] transition-colors" data-i18n="sections.architecture.services_title">Framework Services & Functions</h3>
+          <svg id="architecture-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
           </svg>
         </div>
@@ -425,10 +439,10 @@
     <section class="mb-16">
       <h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.limitations.heading">Limitations & Future Research Directions</h2>
 
-      <div class="border border-gray-300 rounded-lg">
-        <div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" data-accordion="limitations">
-          <h3 class="font-semibold text-gray-900" data-i18n="sections.limitations.title">Known Limitations & Research Gaps</h3>
-          <svg id="limitations-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <div class="border-l-4 border border-gray-200 rounded-lg" style="border-left-color: #8b5cf6;">
+        <div class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200" data-accordion="limitations">
+          <h3 class="font-semibold text-gray-900 group-hover:text-[#8b5cf6] transition-colors" data-i18n="sections.limitations.title">Known Limitations & Research Gaps</h3>
+          <svg id="limitations-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
           </svg>
         </div>
@@ -495,64 +509,16 @@
 
   <!-- Footer -->
   <!-- Footer -->
-  <footer class="bg-gray-900 text-gray-400 py-12 mt-16" role="contentinfo">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="grid grid-cols-1 md:grid-cols-5 gap-8">
-        <div>
-          <h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
-          <p class="text-sm">
-            Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
-          </p>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Resources</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
-            <li><a href="/demos/tractatus-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
-            <li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
-            <li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
-            <li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
-            <li><a href="/about.html" class="hover:text-white transition">About & Values</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Community</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
-            <li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
-            <li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
-            <li><a href="/#newsletter" class="hover:text-white transition">Newsletter</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Support This Work</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
-            <li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-semibold mb-4">Acknowledgment</h3>
-          <p class="text-sm">
-            This framework acknowledges Te Tiriti o Waitangi and indigenous leadership in digital sovereignty.
-            Built with respect for CARE Principles and Māori data sovereignty.
-          </p>
-        </div>
-      </div>
-      <div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
-        <p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
-        <p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
-      </div>
-    </div>
-  </footer>
-
   <!-- Internationalization -->
-  <script src="/js/i18n-simple.js?v=0.1.0.1760643941"></script>
-  <script src="/js/components/language-selector.js?v=0.1.0.1760643941"></script>
+  <script src="/js/i18n-simple.js?v=1760818106"></script>
+  <script src="/js/components/language-selector.js?v=1760818106"></script>
 
   <!-- Version Management & PWA -->
   <script src="/js/version-manager.js"></script>
   <script src="/js/researcher-page.js"></script>
 
+  <!-- Footer Component -->
+  <script src="/js/components/footer.js"></script>
+
 </body>
 </html>
diff --git a/public/service-worker.js b/public/service-worker.js
index 19789630..a6591eda 100644
--- a/public/service-worker.js
+++ b/public/service-worker.js
@@ -5,7 +5,7 @@
  * - PWA functionality
  */
 
-const CACHE_VERSION = '1.1.1';
+const CACHE_VERSION = '1.1.5';
 const CACHE_NAME = `tractatus-v${CACHE_VERSION}`;
 const VERSION_CHECK_INTERVAL = 3600000; // 1 hour in milliseconds
 
@@ -61,48 +61,65 @@ self.addEventListener('fetch', (event) => {
     return;
   }
 
-  // HTML files: Network-first (always check for updates)
+  // HTML files: Network-ONLY (never cache, always fetch fresh)
+  // This ensures users always get the latest content without cache refresh
   if (request.destination === 'document' || url.pathname.endsWith('.html')) {
     event.respondWith(
       fetch(request)
-        .then((response) => {
-          // Clone response to cache and return
-          const responseClone = response.clone();
-          caches.open(CACHE_NAME).then((cache) => {
-            cache.put(request, responseClone);
-          });
-          return response;
-        })
         .catch(() => {
-          // If network fails, try cache
-          return caches.match(request);
+          // Only for offline fallback: serve cached index.html
+          if (url.pathname === '/' || url.pathname === '/index.html') {
+            return caches.match('/index.html');
+          }
+          // All other HTML: network only, fail if offline
+          throw new Error('Network required for HTML pages');
         })
     );
     return;
   }
 
-  // Static assets (CSS, JS, images): Cache-first
+  // Static assets (CSS, JS, images): Network-first for versioned URLs, cache-first for others
   if (
     request.destination === 'style' ||
     request.destination === 'script' ||
     request.destination === 'image' ||
     request.destination === 'font'
   ) {
-    event.respondWith(
-      caches.match(request).then((cachedResponse) => {
-        if (cachedResponse) {
-          return cachedResponse;
-        }
-        return fetch(request).then((response) => {
-          // Clone response to cache
+    // If URL has version parameter, always fetch fresh (network-first)
+    const hasVersionParam = url.searchParams.has('v');
+
+    if (hasVersionParam) {
+      // Network-first for versioned assets (ensures cache-busting works)
+      event.respondWith(
+        fetch(request).then((response) => {
+          // Cache the response for offline use
           const responseClone = response.clone();
           caches.open(CACHE_NAME).then((cache) => {
             cache.put(request, responseClone);
           });
           return response;
-        });
-      })
-    );
+        }).catch(() => {
+          // Fallback to cache if offline
+          return caches.match(request);
+        })
+      );
+    } else {
+      // Cache-first for non-versioned assets
+      event.respondWith(
+        caches.match(request).then((cachedResponse) => {
+          if (cachedResponse) {
+            return cachedResponse;
+          }
+          return fetch(request).then((response) => {
+            const responseClone = response.clone();
+            caches.open(CACHE_NAME).then((cache) => {
+              cache.put(request, responseClone);
+            });
+            return response;
+          });
+        })
+      );
+    }
     return;
   }
 
diff --git a/public/version.json b/public/version.json
index dc688db5..14884acb 100644
--- a/public/version.json
+++ b/public/version.json
@@ -1,11 +1,11 @@
 {
-  "version": "1.1.1",
-  "buildDate": "2025-10-14T01:30:00Z",
+  "version": "1.1.5",
+  "buildDate": "2025-10-18T03:03:00Z",
   "changelog": [
-    "Revised Copilot Q&A to match measured tone of leader page",
-    "Removed overconfident claims, added context and limitations",
-    "Focused on structural governance questions rather than assertions"
+    "Implemented proper cache-busting for JavaScript files",
+    "Versioned assets now use network-first strategy",
+    "Fixes deployment issues without requiring manual cache clearing"
   ],
   "forceUpdate": true,
-  "minVersion": "1.1.1"
+  "minVersion": "1.1.5"
 }