Spaces:

Testing347
/

Copy-ava-testing

Running

App Files Files Community

Testing347 commited on Dec 15, 2025

Commit

121e169

verified ·

1 Parent(s): 93a96fd

Update capabilities.html

Browse files

Files changed (1) hide show

capabilities.html +579 -209

capabilities.html CHANGED Viewed

@@ -3,20 +3,89 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-  <title>SILENTPATTERN — Program Bay</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
-  <link rel="stylesheet" href="assets/site.css">
 </head>
 <body class="bg-black text-white overflow-x-hidden">
   <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
   <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm">
     <a href="index.html" class="flex items-center space-x-2">
       <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center">
@@ -39,132 +108,265 @@
     </div>
   </nav>
-  <section class="relative z-10 px-6 pt-14 pb-10">
     <div class="max-w-6xl mx-auto">
-      <div class="inline-flex items-center gap-3 self-start px-4 py-2 rounded-full border border-gray-800 bg-gray-900/20 backdrop-blur-sm">
-        <span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span>
-        <span class="text-xs text-gray-300 tracking-widest uppercase">Programs</span>
-        <span class="text-xs text-gray-500">Program Bay</span>
-      </div>
-      <div class="mt-6">
-        <h1 class="text-3xl md:text-5xl font-bold leading-tight">
           <span class="gradient-text">Program Bay</span><br>
-          Dossiers, protocols, and evaluation gates
         </h1>
-        <p class="mt-4 text-gray-300 max-w-3xl text-lg leading-relaxed">
-          Each program is presented as a dossier: scope, assumptions, evaluation protocol, and access gating.
-          This page is intentionally conservative: it is an interface to artifacts, not promotional copy.
         </p>
       </div>
-      <div class="mt-8 grid grid-cols-1 lg:grid-cols-3 gap-4">
-        <!-- MCAP -->
-        <div class="rounded-2xl border border-gray-800 bg-gray-900/20 p-6 aura conscious-element">
-          <div class="flex items-start justify-between gap-4">
             <div>
-              <div class="text-sm text-gray-200 font-semibold"><i class="fas fa-diagram-project mr-2 text-indigo-300"></i>MCAP</div>
-              <div class="text-xs text-gray-500 mt-1">Causal abstraction and fidelity evaluation</div>
             </div>
-            <span class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15">DRAFT</span>
-          </div>
-          <ul class="mt-4 text-sm text-gray-300 space-y-2">
-            <li class="flex gap-2"><span class="text-indigo-300">•</span><span>Explicit abstraction mapping</span></li>
-            <li class="flex gap-2"><span class="text-indigo-300">•</span><span>Testable causal fidelity criteria</span></li>
-            <li class="flex gap-2"><span class="text-indigo-300">•</span><span>Baseline comparisons and failure modes</span></li>
-          </ul>
-          <div class="mt-5 flex gap-3">
-            <a href="chat.html" class="px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-700 transition text-sm">Open in Console</a>
-            <a href="research.html" class="px-4 py-2 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition text-sm">View Notes</a>
           </div>
-        </div>
-        <!-- CHAI -->
-        <div class="rounded-2xl border border-gray-800 bg-gray-900/20 p-6 aura conscious-element">
-          <div class="flex items-start justify-between gap-4">
-            <div>
-              <div class="text-sm text-gray-200 font-semibold"><i class="fas fa-chart-line mr-2 text-indigo-300"></i>CHAI</div>
-              <div class="text-xs text-gray-500 mt-1">Regime modeling and forecasting harness</div>
             </div>
-            <span class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15">DRAFT</span>
-          </div>
-          <ul class="mt-4 text-sm text-gray-300 space-y-2">
-            <li class="flex gap-2"><span class="text-indigo-300">•</span><span>Clear horizon and labeling rules</span></li>
-            <li class="flex gap-2"><span class="text-indigo-300">•</span><span>Walk-forward protocol and leakage checks</span></li>
-            <li class="flex gap-2"><span class="text-indigo-300">•</span><span>Risk and calibration metrics</span></li>
-          </ul>
-          <div class="mt-5 flex gap-3">
-            <a href="chat.html" class="px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-700 transition text-sm">Open in Console</a>
-            <a href="research.html" class="px-4 py-2 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition text-sm">View Notes</a>
           </div>
         </div>
-        <!-- Quantum Lambda -->
-        <div class="rounded-2xl border border-gray-800 bg-gray-900/20 p-6 aura conscious-element">
-          <div class="flex items-start justify-between gap-4">
-            <div>
-              <div class="text-sm text-gray-200 font-semibold"><i class="fas fa-bolt mr-2 text-indigo-300"></i>Quantum Lambda</div>
-              <div class="text-xs text-gray-500 mt-1">High-frequency decision systems constraints</div>
             </div>
-            <span class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15">DRAFT</span>
-          </div>
-          <ul class="mt-4 text-sm text-gray-300 space-y-2">
-            <li class="flex gap-2"><span class="text-indigo-300">•</span><span>Microstructure realism (slippage/latency)</span></li>
-            <li class="flex gap-2"><span class="text-indigo-300">•</span><span>Execution assumptions documented</span></li>
-            <li class="flex gap-2"><span class="text-indigo-300">•</span><span>Risk limits and fail-closed behavior</span></li>
-          </ul>
-          <div class="mt-5 flex gap-3">
-            <a href="chat.html" class="px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-700 transition text-sm">Open in Console</a>
-            <a href="research.html" class="px-4 py-2 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition text-sm">View Notes</a>
           </div>
-        </div>
-        <!-- AI Scientist -->
-        <div class="rounded-2xl border border-gray-800 bg-gray-900/20 p-6 aura conscious-element lg:col-span-2">
-          <div class="flex items-start justify-between gap-4">
-            <div>
-              <div class="text-sm text-gray-200 font-semibold"><i class="fas fa-flask mr-2 text-indigo-300"></i>AI Scientist</div>
-              <div class="text-xs text-gray-500 mt-1">Hypothesis → experiment → report pipeline</div>
             </div>
-            <span class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15">PROTOTYPE</span>
           </div>
-          <p class="mt-4 text-sm text-gray-300 leading-relaxed">
-            Standardizes experiments, enforces reproducibility hooks, and produces auditable reports with uncertainty, baselines, and known failure modes.
-          </p>
-          <div class="mt-5 flex gap-3">
-            <a href="chat.html" class="px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-700 transition text-sm">Open in Console</a>
-            <a href="research.html" class="px-4 py-2 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition text-sm">View Notes</a>
           </div>
         </div>
-        <!-- Agentic Workforce -->
-        <div class="rounded-2xl border border-gray-800 bg-gray-900/20 p-6 aura conscious-element">
-          <div class="flex items-start justify-between gap-4">
-            <div>
-              <div class="text-sm text-gray-200 font-semibold"><i class="fas fa-users-gear mr-2 text-indigo-300"></i>Agentic Workforce</div>
-              <div class="text-xs text-gray-500 mt-1">Governed agent workflows (fail-closed)</div>
-            </div>
-            <span class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15">CONCEPT</span>
           </div>
-          <p class="mt-4 text-sm text-gray-300 leading-relaxed">
-            A structured approach to multi-agent task execution with explicit permissions, audit trails, and safe failure behavior.
-          </p>
-          <div class="mt-5 flex gap-3">
-            <button id="access-cta"
-              class="px-4 py-2 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:opacity-90 transition text-sm">
-              Request Access
-            </button>
-            <a href="contact.html" class="px-4 py-2 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition text-sm">Contact</a>
           </div>
         </div>
-      </div>
-      <div class="mt-10 text-xs text-gray-500 max-w-4xl">
-        Implementation note: if you deploy the Console with real model access, keep keys server-side, log policy decisions, and store transcript exports as immutable artifacts.
       </div>
     </div>
   </section>
   <footer class="relative z-10 px-6 pb-10">
     <div class="max-w-6xl mx-auto border-t border-gray-800/60 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
       <div class="text-sm text-gray-500">© 2025 SILENTPATTERN. All rights reserved.</div>
@@ -177,7 +379,7 @@
     </div>
   </footer>
-  <!-- ACCESS MODAL (same as index) -->
   <div id="access-modal"
     class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-hidden"
     role="dialog" aria-modal="true" aria-labelledby="access-modal-title" tabindex="-1">
@@ -227,11 +429,13 @@
     </div>
   </div>
-  <!-- LAB NAVIGATOR (reused structure) -->
   <div id="lab-navigator"
     class="fixed inset-0 z-[60] bg-black/80 backdrop-blur-md modal modal-hidden"
     role="dialog" aria-modal="true" aria-label="Lab Navigator" tabindex="-1">
     <div class="absolute inset-0" data-lab-close="true"></div>
     <div class="relative w-full h-full flex items-center justify-center p-6">
       <div class="w-full max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6">
         <div class="relative rounded-2xl border border-gray-800 bg-gray-900/20 overflow-hidden">
@@ -245,6 +449,7 @@
                 <div class="text-xs text-gray-500">Lab Navigator</div>
               </div>
             </div>
             <button id="lab-nav-close"
               class="w-9 h-9 rounded-full border border-gray-800 bg-gray-900/30 hover:bg-gray-900/50 transition flex items-center justify-center"
               aria-label="Close Lab Navigator">
@@ -253,43 +458,42 @@
           </div>
           <div class="relative p-6 min-h-[420px]">
             <div class="relative grid grid-cols-1 sm:grid-cols-2 gap-3">
               <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
-                data-dossier="start">
                 <div class="text-sm text-gray-200 font-medium">Start Here</div>
                 <div class="text-xs text-gray-500 mt-1">Entry interface</div>
               </button>
               <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
-                data-dossier="programs">
                 <div class="text-sm text-gray-200 font-medium">Programs</div>
                 <div class="text-xs text-gray-500 mt-1">This page</div>
               </button>
               <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
-                data-dossier="console">
                 <div class="text-sm text-gray-200 font-medium">Console</div>
                 <div class="text-xs text-gray-500 mt-1">Controlled chat</div>
               </button>
               <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
-                data-dossier="research">
                 <div class="text-sm text-gray-200 font-medium">Research</div>
                 <div class="text-xs text-gray-500 mt-1">Notes and briefs</div>
               </button>
-              <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
-                data-dossier="contact">
                 <div class="text-sm text-gray-200 font-medium">Contact</div>
                 <div class="text-xs text-gray-500 mt-1">Direct channel</div>
               </button>
-              <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
-                data-dossier="access">
-                <div class="text-sm text-gray-200 font-medium">Access</div>
-                <div class="text-xs text-gray-500 mt-1">Curated entry</div>
-              </button>
             </div>
             <div class="relative mt-6 text-xs text-gray-500">
               Tip: Press <span class="text-gray-300">Esc</span> to close.
             </div>
@@ -298,38 +502,12 @@
         <div class="relative rounded-2xl border border-gray-800 bg-gray-900/30 overflow-hidden">
           <div class="px-6 py-5 border-b border-gray-800/60">
-            <div class="flex items-start justify-between gap-4">
-              <div>
-                <div id="dossier-title" class="text-lg font-semibold text-gray-100">Lab Dossier</div>
-                <div id="dossier-subtitle" class="text-xs text-gray-500 mt-1">Select a node to load details.</div>
-              </div>
-              <div id="dossier-status"
-                class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15">
-                READY
-              </div>
-            </div>
           </div>
-          <div class="p-6 space-y-5 max-h-[560px] overflow-auto thin-scroll">
-            <div id="dossier-body" class="text-sm text-gray-300 leading-relaxed"></div>
-            <div class="rounded-xl border border-gray-800 bg-black/20 p-4">
-              <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Evidence Capsule</div>
-              <ul id="dossier-evidence" class="text-sm text-gray-300 space-y-1"></ul>
-            </div>
-            <div class="flex flex-col sm:flex-row gap-3">
-              <button id="dossier-primary"
-                class="flex-1 px-5 py-3 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:opacity-90 transition">
-                Open
-              </button>
-              <button id="dossier-secondary"
-                class="flex-1 px-5 py-3 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition">
-                View Note
-              </button>
-            </div>
-            <div id="dossier-meta" class="text-xs text-gray-500"></div>
           </div>
         </div>
@@ -337,77 +515,269 @@
     </div>
   </div>
-  <script src="assets/site.js"></script>
   <script>
-    document.addEventListener('DOMContentLoaded', () => {
-      SilentPattern.initVanta();
-      SilentPattern.setupAccessModal();
-      const DOSSIERS = {
-        start: {
-          title: "Start Here",
-          subtitle: "Return to the main interface",
-          status: "ACTIVE",
-          body: "SILENTPATTERN is presented as a lab interface: minimal surface, deep artifacts. The index is the entrypoint.",
-          evidence: ["Public entry layer", "Dossiers reveal depth", "Controlled demos by access"],
-          primary: { label: "Go to Index", action: () => { window.location.href = "index.html"; } },
-          secondary: { label: "Research", action: () => { window.location.href = "research.html"; } },
-          updated: "—"
-        },
-        programs: {
-          title: "Programs",
-          subtitle: "Program Bay dossiers",
-          status: "ACTIVE",
-          body: "This page collects program dossiers. Each dossier should be expanded over time with explicit protocols and evaluation artifacts.",
-          evidence: ["MCAP · CHAI · Quantum Lambda", "AI Scientist", "Agentic Workforce"],
-          primary: { label: "Close Navigator", action: () => SilentPattern.toggleModal(document.getElementById('lab-navigator'), false) },
-          secondary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
-          updated: "—"
-        },
-        console: {
-          title: "Console",
-          subtitle: "Controlled interaction channel",
-          status: "DRAFT",
-          body: "Use the Console for structured requests. Keep model access server-side and export transcripts for auditability.",
-          evidence: ["No client-side secrets", "Policy + logging server-side", "Exportable transcripts"],
-          primary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
-          secondary: { label: "Close Navigator", action: () => SilentPattern.toggleModal(document.getElementById('lab-navigator'), false) },
-          updated: "—"
-        },
-        research: {
-          title: "Research",
-          subtitle: "Notes and briefs",
-          status: "DRAFT",
-          body: "Research artifacts should keep protocols and uncertainty explicit. This page should host reproducibility hooks and failure modes.",
-          evidence: ["Evaluation artifacts", "Reproducibility hooks", "Conservative external wording"],
-          primary: { label: "Open Research", action: () => { window.location.href = "research.html"; } },
-          secondary: { label: "Contact", action: () => { window.location.href = "contact.html"; } },
-          updated: "—"
-        },
-        contact: {
-          title: "Contact",
-          subtitle: "Direct channel",
-          status: "ACTIVE",
-          body: "Use Contact for coordination, partnerships, and qualified inquiries.",
-          evidence: ["Curated inbound", "Clear scope alignment", "Responsible scaling"],
-          primary: { label: "Open Contact", action: () => { window.location.href = "contact.html"; } },
-          secondary: { label: "Request Access", action: () => { SilentPattern.toggleModal(document.getElementById('lab-navigator'), false); document.getElementById('access-btn').click(); } },
-          updated: "—"
-        },
-        access: {
-          title: "Access",
-          subtitle: "Curated entry",
-          status: "ACTIVE",
-          body: "Access is curated for controlled evaluation: qualified users, high-signal feedback, and responsible iteration.",
-          evidence: ["Application-based", "Segmented by intent", "Controlled demos"],
-          primary: { label: "Request Access", action: () => { SilentPattern.toggleModal(document.getElementById('lab-navigator'), false); document.getElementById('access-btn').click(); } },
-          secondary: { label: "Contact", action: () => { window.location.href = "contact.html"; } },
-          updated: "—"
         }
-      };
-      SilentPattern.setupLabNavigator(DOSSIERS, 'programs');
     });
   </script>
 </body>
 </html>

 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+  <title>SILENTPATTERN — Programs</title>
+  <!-- Tailwind -->
   <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Three.js + Vanta -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
+  <!-- Icons + Font -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
+  <style>
+    body { font-family: 'Inter', sans-serif; }
+    .gradient-text {
+      background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+    }
+    .aura {
+      background:
+        radial-gradient(circle at 25% 20%, rgba(99,102,241,0.22), transparent 44%),
+        radial-gradient(circle at 80% 75%, rgba(236,72,153,0.12), transparent 50%),
+        radial-gradient(circle at 55% 45%, rgba(139,92,246,0.10), transparent 60%);
+    }
+    .conscious-element { transition: all 0.28s ease; }
+    .conscious-element:hover { transform: translateY(-2px); }
+    .focus-ring:focus { outline: none; box-shadow: 0 0 0 2px rgba(99,102,241,0.65); }
+    /* Scrollbar for dossier panel */
+    .thin-scroll {
+      scrollbar-width: thin;
+      scrollbar-color: #4f46e5 #1e1b4b;
+    }
+    .thin-scroll::-webkit-scrollbar { width: 6px; }
+    .thin-scroll::-webkit-scrollbar-track { background: #1e1b4b; }
+    .thin-scroll::-webkit-scrollbar-thumb { background-color: #4f46e5; border-radius: 3px; }
+    .modal { transition: opacity 0.3s ease, transform 0.3s ease; }
+    .modal-hidden { opacity: 0; transform: translateY(20px); pointer-events: none; }
+    .modal-visible { opacity: 1; transform: translateY(0); }
+    /* Stage badges */
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 10px;
+      border-radius: 999px;
+      font-size: 12px;
+      border: 1px solid rgba(148,163,184,0.18);
+      background: rgba(15,23,42,0.25);
+      color: rgba(226,232,240,0.9);
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+    .dot { width: 8px; height: 8px; border-radius: 999px; }
+    .dot-concept { background: rgba(99,102,241,0.9); }
+    .dot-proto { background: rgba(139,92,246,0.9); }
+    .dot-validated { background: rgba(16,185,129,0.9); }
+    /* Subtle “bay” grid */
+    .bay-grid {
+      background-image:
+        linear-gradient(rgba(148,163,184,0.06) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(148,163,184,0.06) 1px, transparent 1px);
+      background-size: 40px 40px;
+      background-position: center;
+    }
+  </style>
 </head>
 <body class="bg-black text-white overflow-x-hidden">
+  <!-- Animated background -->
   <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
+  <!-- Minimal top bar -->
   <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm">
     <a href="index.html" class="flex items-center space-x-2">
       <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center">
     </div>
   </nav>
+  <!-- HERO -->
+  <section class="relative z-10 px-6 pt-14 pb-8">
     <div class="max-w-6xl mx-auto">
+      <div class="flex flex-col gap-5">
+        <div class="inline-flex items-center gap-3 self-start px-4 py-2 rounded-full border border-gray-800 bg-gray-900/20 backdrop-blur-sm">
+          <span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span>
+          <span class="text-xs text-gray-300 tracking-widest uppercase">Programs</span>
+          <span class="text-xs text-gray-500">Research artifacts and prototypes</span>
+        </div>
+        <h1 class="text-3xl md:text-6xl font-bold leading-tight">
           <span class="gradient-text">Program Bay</span><br>
+          Capabilities as auditable systems
         </h1>
+        <p class="text-gray-300 max-w-3xl text-lg md:text-xl">
+          SILENTPATTERN is presented as an interface, not a brochure. Each program has a dossier: scope, assumptions, evaluation protocol, and access gates.
         </p>
+        <div class="text-xs text-gray-500 max-w-3xl">
+          Note: Programs involving markets are research prototypes. Nothing here constitutes investment advice, solicitation, or performance claims.
+        </div>
       </div>
+    </div>
+  </section>
+  <!-- PROGRAM BAY + DOSSIER PANEL -->
+  <section class="relative z-10 px-6 pb-16">
+    <div class="max-w-6xl mx-auto">
+      <div class="grid grid-cols-1 lg:grid-cols-5 gap-6">
+        <!-- LEFT: Program Bay -->
+        <div class="lg:col-span-3 rounded-2xl border border-gray-800 bg-gray-900/20 overflow-hidden aura">
+          <div class="px-6 py-5 border-b border-gray-800/60 flex items-center justify-between">
             <div>
+              <div class="text-sm text-gray-200 font-medium">Program Bay</div>
+              <div class="text-xs text-gray-500 mt-1">Select a module to load its dossier.</div>
+            </div>
+            <div class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15">
+              INTERFACE MODE
             </div>
           </div>
+          <div class="p-6 bay-grid">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <!-- MCAP -->
+              <button type="button"
+                class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element"
+                data-dossier="mcap">
+                <div class="flex items-start justify-between gap-4">
+                  <div>
+                    <div class="text-lg font-semibold text-gray-100">MCAP</div>
+                    <div class="text-xs text-gray-500 mt-1">Minimal Causal Abstraction Principle</div>
+                  </div>
+                  <span class="badge"><span class="dot dot-proto"></span>Prototype</span>
+                </div>
+                <p class="text-sm text-gray-300 mt-4 leading-relaxed">
+                  A compression rule for causal structure: preserve intervention-relevant information while minimizing representation.
+                </p>
+                <div class="mt-4 text-xs text-gray-500 flex items-center gap-2">
+                  <i class="fas fa-shield-halved"></i>
+                  <span>Evaluation-first; claims gated by evidence</span>
+                </div>
+              </button>
+              <!-- CHAI -->
+              <button type="button"
+                class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element"
+                data-dossier="chai">
+                <div class="flex items-start justify-between gap-4">
+                  <div>
+                    <div class="text-lg font-semibold text-gray-100">CHAI</div>
+                    <div class="text-xs text-gray-500 mt-1">Forecasting & regime inference stack</div>
+                  </div>
+                  <span class="badge"><span class="dot dot-concept"></span>Concept</span>
+                </div>
+                <p class="text-sm text-gray-300 mt-4 leading-relaxed">
+                  A research pipeline for market prediction under distribution shift: features, regimes, calibration, and robust validation.
+                </p>
+                <div class="mt-4 text-xs text-gray-500 flex items-center gap-2">
+                  <i class="fas fa-triangle-exclamation"></i>
+                  <span>Markets are adversarial; protocols matter</span>
+                </div>
+              </button>
+              <!-- Quantum Lambda -->
+              <button type="button"
+                class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element"
+                data-dossier="quantum_lambda">
+                <div class="flex items-start justify-between gap-4">
+                  <div>
+                    <div class="text-lg font-semibold text-gray-100">Quantum Lambda</div>
+                    <div class="text-xs text-gray-500 mt-1">High-frequency decision systems</div>
+                  </div>
+                  <span class="badge"><span class="dot dot-concept"></span>Concept</span>
+                </div>
+                <p class="text-sm text-gray-300 mt-4 leading-relaxed">
+                  A microstructure-aware control loop: latency budgets, execution constraints, and risk-aware action selection.
+                </p>
+                <div class="mt-4 text-xs text-gray-500 flex items-center gap-2">
+                  <i class="fas fa-stopwatch"></i>
+                  <span>Assumptions must be explicit (latency, slippage)</span>
+                </div>
+              </button>
+              <!-- AI Scientist -->
+              <button type="button"
+                class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element"
+                data-dossier="ai_scientist">
+                <div class="flex items-start justify-between gap-4">
+                  <div>
+                    <div class="text-lg font-semibold text-gray-100">AI Scientist</div>
+                    <div class="text-xs text-gray-500 mt-1">Hypothesis → Experiment → Report</div>
+                  </div>
+                  <span class="badge"><span class="dot dot-proto"></span>Prototype</span>
+                </div>
+                <p class="text-sm text-gray-300 mt-4 leading-relaxed">
+                  An internal research engine that standardizes experiments, enforces reproducibility, and generates concise research notes with uncertainty.
+                </p>
+                <div class="mt-4 text-xs text-gray-500 flex items-center gap-2">
+                  <i class="fas fa-flask"></i>
+                  <span>Reproducibility is a feature, not a slogan</span>
+                </div>
+              </button>
+              <!-- Agentic Workforce -->
+              <button type="button"
+                class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element md:col-span-2"
+                data-dossier="agentic_workforce">
+                <div class="flex items-start justify-between gap-4">
+                  <div>
+                    <div class="text-lg font-semibold text-gray-100">Agentic Workforce</div>
+                    <div class="text-xs text-gray-500 mt-1">Autonomous workflows under governance</div>
+                  </div>
+                  <span class="badge"><span class="dot dot-concept"></span>Concept</span>
+                </div>
+                <p class="text-sm text-gray-300 mt-4 leading-relaxed">
+                  “AI employees” as controlled agents: scoped permissions, logging, approval gates, and outcome verification.
+                </p>
+                <div class="mt-4 text-xs text-gray-500 flex items-center gap-2">
+                  <i class="fas fa-key"></i>
+                  <span>Permissions + audits + fail-closed behaviors</span>
+                </div>
+              </button>
             </div>
           </div>
         </div>
+        <!-- RIGHT: Dossier Panel -->
+        <div class="lg:col-span-2 rounded-2xl border border-gray-800 bg-gray-900/30 overflow-hidden">
+          <div class="px-6 py-5 border-b border-gray-800/60">
+            <div class="flex items-start justify-between gap-4">
+              <div>
+                <div id="dossier-title" class="text-lg font-semibold text-gray-100">Dossier</div>
+                <div id="dossier-subtitle" class="text-xs text-gray-500 mt-1">Select a module to load details.</div>
+              </div>
+              <div id="dossier-status"
+                class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15">
+                READY
+              </div>
             </div>
           </div>
+          <div class="p-6 space-y-5 max-h-[740px] overflow-auto thin-scroll">
+            <div class="rounded-xl border border-gray-800 bg-black/20 p-4">
+              <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Summary</div>
+              <div id="dossier-body" class="text-sm text-gray-300 leading-relaxed">
+                This panel is designed to be stable and audit-friendly: scope, assumptions, evaluation protocol, and access gates.
+              </div>
+            </div>
+            <div class="rounded-xl border border-gray-800 bg-black/20 p-4">
+              <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Evidence Capsule</div>
+              <ul id="dossier-evidence" class="text-sm text-gray-300 space-y-1">
+                <li class="text-gray-500">No module selected.</li>
+              </ul>
+            </div>
+            <div class="rounded-xl border border-gray-800 bg-black/20 p-4">
+              <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Public Interface</div>
+              <div id="dossier-public" class="text-sm text-gray-300 leading-relaxed">
+                Public copy remains conservative. Claims scale with verified evidence.
+              </div>
+            </div>
+            <div class="rounded-xl border border-gray-800 bg-black/20 p-4">
+              <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Evaluation Protocol</div>
+              <div id="dossier-eval" class="text-sm text-gray-300 leading-relaxed">
+                Define the benchmark first; then allow the method to earn its reputation.
+              </div>
+            </div>
+            <div class="flex flex-col gap-3">
+              <button id="dossier-primary"
+                class="px-5 py-3 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:opacity-90 transition">
+                Request Access
+              </button>
+              <button id="dossier-secondary"
+                class="px-5 py-3 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition">
+                Open Console
+              </button>
+            </div>
+            <div id="dossier-meta" class="text-xs text-gray-500">
+              Last updated: <span class="text-gray-300">—</span>
             </div>
           </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- CAPABILITY PRIMITIVES (SHORT, NON-BROCHURE) -->
+  <section class="relative z-10 px-6 pb-16">
+    <div class="max-w-6xl mx-auto rounded-2xl border border-gray-800 bg-gray-900/20 overflow-hidden">
+      <div class="px-6 py-5 border-b border-gray-800/60 flex items-center justify-between">
+        <div>
+          <div class="text-sm text-gray-200 font-medium">Capability Primitives</div>
+          <div class="text-xs text-gray-500 mt-1">The building blocks behind programs.</div>
+        </div>
+        <div class="text-xs text-gray-500">Concise by design</div>
+      </div>
+      <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="rounded-2xl border border-gray-800 bg-gray-900/30 p-5">
+          <div class="text-sm font-semibold text-gray-100">Causal Abstraction</div>
+          <div class="text-sm text-gray-300 mt-2">
+            Distill mechanisms, not correlations. Prefer intervention-relevant representations.
           </div>
         </div>
+        <div class="rounded-2xl border border-gray-800 bg-gray-900/30 p-5">
+          <div class="text-sm font-semibold text-gray-100">Regime Awareness</div>
+          <div class="text-sm text-gray-300 mt-2">
+            Models must survive distribution shift; calibration and uncertainty are first-class.
           </div>
+        </div>
+        <div class="rounded-2xl border border-gray-800 bg-gray-900/30 p-5">
+          <div class="text-sm font-semibold text-gray-100">Experiment Automation</div>
+          <div class="text-sm text-gray-300 mt-2">
+            Repeatable harnesses, tracked assumptions, and reportable deltas per change.
           </div>
         </div>
+        <div class="rounded-2xl border border-gray-800 bg-gray-900/30 p-5">
+          <div class="text-sm font-semibold text-gray-100">Agentic Orchestration</div>
+          <div class="text-sm text-gray-300 mt-2">
+            Autonomous workflows with permissions, logs, approvals, and fail-closed behavior.
+          </div>
+        </div>
       </div>
     </div>
   </section>
+  <!-- Minimal Footer -->
   <footer class="relative z-10 px-6 pb-10">
     <div class="max-w-6xl mx-auto border-t border-gray-800/60 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
       <div class="text-sm text-gray-500">© 2025 SILENTPATTERN. All rights reserved.</div>
     </div>
   </footer>
+  <!-- ACCESS MODAL -->
   <div id="access-modal"
     class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-hidden"
     role="dialog" aria-modal="true" aria-labelledby="access-modal-title" tabindex="-1">
     </div>
   </div>
+  <!-- LAB NAVIGATOR -->
   <div id="lab-navigator"
     class="fixed inset-0 z-[60] bg-black/80 backdrop-blur-md modal modal-hidden"
     role="dialog" aria-modal="true" aria-label="Lab Navigator" tabindex="-1">
     <div class="absolute inset-0" data-lab-close="true"></div>
     <div class="relative w-full h-full flex items-center justify-center p-6">
       <div class="w-full max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6">
         <div class="relative rounded-2xl border border-gray-800 bg-gray-900/20 overflow-hidden">
                 <div class="text-xs text-gray-500">Lab Navigator</div>
               </div>
             </div>
             <button id="lab-nav-close"
               class="w-9 h-9 rounded-full border border-gray-800 bg-gray-900/30 hover:bg-gray-900/50 transition flex items-center justify-center"
               aria-label="Close Lab Navigator">
           </div>
           <div class="relative p-6 min-h-[420px]">
+            <div class="absolute inset-0 opacity-70 pointer-events-none"
+              style="background: radial-gradient(circle at 30% 20%, rgba(99,102,241,0.18), transparent 45%),
+                              radial-gradient(circle at 70% 70%, rgba(236,72,153,0.10), transparent 50%);"></div>
             <div class="relative grid grid-cols-1 sm:grid-cols-2 gap-3">
               <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
+                data-nav="index.html">
                 <div class="text-sm text-gray-200 font-medium">Start Here</div>
                 <div class="text-xs text-gray-500 mt-1">Entry interface</div>
               </button>
               <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
+                data-nav="capabilities.html">
                 <div class="text-sm text-gray-200 font-medium">Programs</div>
                 <div class="text-xs text-gray-500 mt-1">This page</div>
               </button>
               <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
+                data-nav="chat.html">
                 <div class="text-sm text-gray-200 font-medium">Console</div>
                 <div class="text-xs text-gray-500 mt-1">Controlled chat</div>
               </button>
               <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
+                data-nav="research.html">
                 <div class="text-sm text-gray-200 font-medium">Research</div>
                 <div class="text-xs text-gray-500 mt-1">Notes and briefs</div>
               </button>
+              <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 sm:col-span-2"
+                data-nav="contact.html">
                 <div class="text-sm text-gray-200 font-medium">Contact</div>
                 <div class="text-xs text-gray-500 mt-1">Direct channel</div>
               </button>
             </div>
             <div class="relative mt-6 text-xs text-gray-500">
               Tip: Press <span class="text-gray-300">Esc</span> to close.
             </div>
         <div class="relative rounded-2xl border border-gray-800 bg-gray-900/30 overflow-hidden">
           <div class="px-6 py-5 border-b border-gray-800/60">
+            <div class="text-lg font-semibold text-gray-100">Navigation</div>
+            <div class="text-xs text-gray-500 mt-1">No top menu; only the lab interface.</div>
           </div>
+          <div class="p-6 text-sm text-gray-300 leading-relaxed">
+            SILENTPATTERN uses a reduced navigation surface to maintain a “lab console” feel.
+            Pages are modules. Each module is accessed through this navigator.
           </div>
         </div>
     </div>
   </div>
   <script>
+    /* VANTA BACKGROUND */
+    const vantaEffect = VANTA.NET({
+      el: "#vanta-bg",
+      mouseControls: true,
+      touchControls: true,
+      gyroControls: false,
+      minHeight: 200.00,
+      minWidth: 200.00,
+      scale: 1.00,
+      scaleMobile: 1.00,
+      color: 0x4f46e5,
+      backgroundColor: 0x020617,
+      points: 12.00,
+      maxDistance: 20.00,
+      spacing: 15.00
+    });
+    window.addEventListener('resize', () => vantaEffect.resize());
+    /* MODAL HELPERS */
+    function trapFocus(modal) {
+      const focusable = modal.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
+      if (!focusable.length) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      function handler(e) {
+        if (e.key === 'Tab') {
+          if (e.shiftKey) {
+            if (document.activeElement === first) { e.preventDefault(); last.focus(); }
+          } else {
+            if (document.activeElement === last) { e.preventDefault(); first.focus(); }
+          }
+        } else if (e.key === 'Escape') {
+          toggleModal(modal, false);
         }
+      }
+      modal.addEventListener('keydown', handler);
+      modal._focusHandler = handler;
+    }
+    function untrapFocus(modal) {
+      if (modal._focusHandler) {
+        modal.removeEventListener('keydown', modal._focusHandler);
+        delete modal._focusHandler;
+      }
+    }
+    const toggleModal = (modal, show) => {
+      if (show) {
+        modal.classList.remove('modal-hidden');
+        modal.classList.add('modal-visible');
+        document.body.style.overflow = 'hidden';
+        setTimeout(() => { modal.focus(); trapFocus(modal); }, 0);
+      } else {
+        modal.classList.remove('modal-visible');
+        modal.classList.add('modal-hidden');
+        document.body.style.overflow = '';
+        untrapFocus(modal);
+      }
+    };
+    /* ACCESS MODAL */
+    const accessModal = document.getElementById('access-modal');
+    const accessBtn = document.getElementById('access-btn');
+    const closeAccessModal = document.getElementById('close-access-modal');
+    accessBtn.addEventListener('click', () => {
+      toggleModal(accessModal, true);
+      setTimeout(() => document.getElementById('name').focus(), 50);
+    });
+    closeAccessModal.addEventListener('click', () => toggleModal(accessModal, false));
+    accessModal.addEventListener('click', (e) => { if (e.target === accessModal) toggleModal(accessModal, false); });
+    document.getElementById('access-form').addEventListener('submit', (e) => {
+      e.preventDefault();
+      const name = document.getElementById('name').value.trim();
+      const email = document.getElementById('email').value.trim();
+      const institution = document.getElementById('institution').value.trim();
+      const purpose = document.getElementById('purpose').value;
+      if (!name || !email || !institution || !purpose) {
+        alert('Please fill in all fields.');
+        return;
+      }
+      alert('Request received. You will be contacted after review.');
+      e.target.reset();
+      toggleModal(accessModal, false);
+    });
+    /* LAB NAVIGATOR */
+    const labNav = document.getElementById('lab-navigator');
+    const labNavBtn = document.getElementById('lab-nav-btn');
+    const labNavClose = document.getElementById('lab-nav-close');
+    function openLabNav() { toggleModal(labNav, true); setTimeout(() => labNav.focus(), 0); }
+    function closeLabNav() { toggleModal(labNav, false); }
+    labNavBtn.addEventListener('click', openLabNav);
+    labNavClose.addEventListener('click', closeLabNav);
+    labNav.addEventListener('click', (e) => {
+      const shouldClose = e.target && e.target.getAttribute('data-lab-close') === 'true';
+      if (shouldClose) closeLabNav();
     });
+    document.querySelectorAll('.lab-node').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const href = btn.getAttribute('data-nav');
+        if (href) window.location.href = href;
+      });
+    });
+    /* DOSSIERS */
+    const DOSSIERS = {
+      mcap: {
+        title: "MCAP",
+        subtitle: "Minimal Causal Abstraction Principle",
+        status: "PROTOTYPE",
+        body:
+          "MCAP is a proposed principle for building minimal representations of systems that preserve intervention-relevant causal structure. The public posture remains conservative until results are reproduced and benchmarked.",
+        evidence: [
+          "Defined abstraction objective (intervention-relevant compression)",
+          "Planned: causal fidelity checks under interventions",
+          "Planned: baseline comparisons (causal discovery + representation learning)"
+        ],
+        public:
+          "Public-facing language should emphasize: a research principle, an evaluation harness, and transparent baselines. Avoid performance claims until replicated.",
+        eval:
+          "Evaluation focus: (1) identifiability assumptions, (2) interventional accuracy, (3) stability under distribution shift, (4) ablation against simpler baselines. Prefer preregistered protocols where possible.",
+        primary: { label: "Request Access", action: () => accessBtn.click() },
+        secondary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
+        updated: "—"
+      },
+      chai: {
+        title: "CHAI",
+        subtitle: "Forecasting & regime inference stack",
+        status: "CONCEPT",
+        body:
+          "CHAI is positioned as a forecasting pipeline that prioritizes robustness: regime detection, calibration, and evidence-first evaluation. Markets are adversarial; the protocol is the product.",
+        evidence: [
+          "Regime-aware framing (distribution shift explicit)",
+          "Planned: walk-forward evaluation + leakage controls",
+          "Planned: calibration and uncertainty reporting"
+        ],
+        public:
+          "Public copy should emphasize methodology and evaluation (walk-forward, leakage prevention, calibration). Avoid any statement implying guaranteed returns or “high accuracy.”",
+        eval:
+          "Evaluation focus: strict temporal splits, realistic transaction cost modeling, sensitivity to slippage assumptions, and robustness across assets/regimes. Report uncertainty and failure modes.",
+        primary: { label: "Request Access", action: () => accessBtn.click() },
+        secondary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
+        updated: "—"
+      },
+      quantum_lambda: {
+        title: "Quantum Lambda",
+        subtitle: "High-frequency decision systems",
+        status: "CONCEPT",
+        body:
+          "Quantum Lambda is framed as a decision system under tight latency constraints. The core requirement is explicit assumptions: data latency, execution model, risk limits, and compliance boundaries.",
+        evidence: [
+          "Microstructure-aware constraints (latency/slippage explicit)",
+          "Planned: simulation harness with realistic fills",
+          "Planned: risk controls as first-class objects"
+        ],
+        public:
+          "Public copy should focus on systems engineering (constraints, risk, audit trails). Do not imply edge without verification. Emphasize that this is research, not a trading service.",
+        eval:
+          "Evaluation focus: execution realism, latency budgets, out-of-sample stability, and adversarial conditions. If assumptions are not auditable, results are not meaningful.",
+        primary: { label: "Request Access", action: () => accessBtn.click() },
+        secondary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
+        updated: "—"
+      },
+      ai_scientist: {
+        title: "AI Scientist",
+        subtitle: "Hypothesis → Experiment → Report",
+        status: "PROTOTYPE",
+        body:
+          "The AI Scientist is the lab’s internal instrument: it standardizes experiments, manages baselines, logs assumptions, and produces concise research notes with uncertainty and reproducibility hooks.",
+        evidence: [
+          "Experiment templates (dataset → protocol → metrics)",
+          "Baseline registry + ablation tracking",
+          "Report generator (results + uncertainty + failure modes)"
+        ],
+        public:
+          "Public positioning: an internal research engine for reproducibility and speed. Emphasize transparency, auditable reports, and discipline in evaluation.",
+        eval:
+          "Evaluation focus: reproducibility rates, time-to-result, and quality of decision-making under uncertainty. Output must be traceable from claim → experiment → evidence.",
+        primary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
+        secondary: { label: "Research", action: () => { window.location.href = "research.html"; } },
+        updated: "—"
+      },
+      agentic_workforce: {
+        title: "Agentic Workforce",
+        subtitle: "Autonomous workflows under governance",
+        status: "CONCEPT",
+        body:
+          "Agentic AI employees are introduced as controlled agents, not unbounded automation: scoped permissions, action logs, approval gates, and verification layers. Governance is the differentiator.",
+        evidence: [
+          "Scope definitions (what agents can and cannot do)",
+          "Audit trails (logs, transcripts, tool usage)",
+          "Approval gates (human-in-the-loop where required)"
+        ],
+        public:
+          "Public positioning: a governed agent platform for research ops and internal productivity. Avoid anthropomorphic claims; emphasize controls, accountability, and measurable outcomes.",
+        eval:
+          "Evaluation focus: error rates, containment failures avoided, auditability, and ROI in constrained workflows (data prep, experiments, reporting). Fail-closed behaviors are required.",
+        primary: { label: "Request Access", action: () => accessBtn.click() },
+        secondary: { label: "Contact", action: () => { window.location.href = "contact.html"; } },
+        updated: "—"
+      }
+    };
+    const dossierTitle = document.getElementById('dossier-title');
+    const dossierSubtitle = document.getElementById('dossier-subtitle');
+    const dossierStatus = document.getElementById('dossier-status');
+    const dossierBody = document.getElementById('dossier-body');
+    const dossierEvidence = document.getElementById('dossier-evidence');
+    const dossierPublic = document.getElementById('dossier-public');
+    const dossierEval = document.getElementById('dossier-eval');
+    const dossierPrimary = document.getElementById('dossier-primary');
+    const dossierSecondary = document.getElementById('dossier-secondary');
+    const dossierMeta = document.getElementById('dossier-meta');
+    function renderDossier(key) {
+      const d = DOSSIERS[key];
+      if (!d) return;
+      dossierTitle.textContent = d.title;
+      dossierSubtitle.textContent = d.subtitle;
+      dossierStatus.textContent = d.status;
+      dossierBody.textContent = d.body;
+      dossierEvidence.innerHTML = "";
+      d.evidence.forEach(item => {
+        const li = document.createElement('li');
+        li.textContent = item;
+        dossierEvidence.appendChild(li);
+      });
+      dossierPublic.textContent = d.public;
+      dossierEval.textContent = d.eval;
+      dossierPrimary.textContent = d.primary.label;
+      dossierPrimary.onclick = d.primary.action;
+      dossierSecondary.textContent = d.secondary.label;
+      dossierSecondary.onclick = d.secondary.action;
+      dossierMeta.innerHTML = `Last updated: <span class="text-gray-300">${d.updated}</span>`;
+    }
+    document.querySelectorAll('.program-card').forEach(btn => {
+      btn.addEventListener('click', () => renderDossier(btn.getAttribute('data-dossier')));
+    });
+    /* ESC behavior */
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        if (labNav && !labNav.classList.contains('modal-hidden')) closeLabNav();
+        if (accessModal && !accessModal.classList.contains('modal-hidden')) toggleModal(accessModal, false);
+      }
+    });
+    /* Default dossier */
+    renderDossier('mcap');
   </script>
 </body>
 </html>