diff --git a/website/public/awesome-github/LS-Agency-Logo-White.svg b/website/public/awesome-github/LS-Agency-Logo-White.svg
new file mode 100644
index 00000000..1c63d008
--- /dev/null
+++ b/website/public/awesome-github/LS-Agency-Logo-White.svg
@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 418.8 90" style="enable-background:new 0 0 418.8 90;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#313535;}
+	.st1{fill:#127EFF;}
+	.st2{fill:#FF954D;}
+	.st3{fill:#43DFEF;}
+	.st4{fill:none;stroke:#43DFEF;stroke-width:2.8346;stroke-linecap:round;stroke-miterlimit:10;}
+	.st5{fill:none;stroke:#43DFEF;stroke-width:3.2393;stroke-linecap:round;stroke-miterlimit:10;}
+	.st6{fill:none;stroke:#43DFEF;stroke-width:5.6693;stroke-linecap:round;stroke-miterlimit:10;}
+	.st7{fill:none;stroke:#313535;stroke-miterlimit:10;}
+	.st8{fill:#FFFFFF;}
+	.st9{fill:#48FFB0;}
+	.st10{fill:none;stroke:#127EFF;stroke-miterlimit:10;}
+	.st11{fill:none;stroke:#FFFFFF;stroke-width:2.8346;stroke-linecap:round;stroke-miterlimit:10;}
+	.st12{fill:none;stroke:#FF954D;stroke-miterlimit:10;}
+	.st13{fill:none;stroke:#000000;stroke-width:2.8346;stroke-linecap:round;stroke-miterlimit:10;}
+	.st14{fill:#CE5AFF;}
+	.st15{opacity:0.7;fill:#127EFF;}
+	.st16{opacity:0.2;fill:#CE5AFF;}
+	.st17{opacity:0.2;fill:#127EFF;}
+	.st18{opacity:0.6;fill:#48FFB0;}
+	.st19{fill:none;stroke:#127EFF;stroke-width:2.8346;stroke-linecap:round;stroke-miterlimit:10;}
+	.st20{fill:none;stroke:#313535;stroke-width:0.5669;stroke-miterlimit:10;}
+	.st21{fill:none;stroke:#313535;stroke-width:2.8346;stroke-linecap:round;stroke-miterlimit:10;}
+	.st22{fill:none;stroke:#CE5AFF;stroke-width:0.5669;stroke-miterlimit:10;}
+</style>
+<g>
+	<path class="st8" d="M97.9,71.3V18.7h7.5v52.6H97.9z"/>
+	<path class="st8" d="M113.2,26.3V19h7.5v7.3H113.2z M113.2,71.3V32.6h7.5v38.6H113.2z"/>
+	<path class="st8" d="M143.6,72.3c-3.6,0-6.7-0.9-9.3-2.7c-2.6-1.8-4.6-4.2-6-7.3c-1.4-3.1-2.1-6.6-2.1-10.4c0-3.9,0.7-7.4,2.1-10.4
+		c1.4-3.1,3.5-5.5,6.1-7.3c2.6-1.8,5.8-2.7,9.4-2.7c3.6,0,6.7,0.9,9.2,2.7c2.5,1.8,4.4,4.2,5.7,7.3c1.3,3.1,1.9,6.5,1.9,10.4
+		c0,3.9-0.6,7.3-1.9,10.4c-1.3,3.1-3.2,5.5-5.7,7.3C150.4,71.4,147.3,72.3,143.6,72.3z M144.1,89.5c-2.1,0-4.1-0.3-6-1
+		c-1.9-0.6-3.7-1.6-5.3-2.8c-1.6-1.3-2.9-2.8-4-4.6l6.9-3.5c0.8,1.7,2,2.8,3.6,3.6c1.5,0.8,3.2,1.1,4.9,1.1c2.1,0,3.9-0.4,5.4-1.1
+		c1.5-0.8,2.6-1.9,3.4-3.4c0.8-1.5,1.2-3.4,1.1-5.6V61.4h0.9V32.6h6.6v39.7c0,1,0,2-0.1,2.9c-0.1,0.9-0.2,1.9-0.4,2.8
+		c-0.6,2.6-1.6,4.7-3.1,6.4s-3.5,3-5.9,3.8C149.8,89.1,147.1,89.5,144.1,89.5z M144.6,65.6c2.5,0,4.5-0.6,6-1.7
+		c1.6-1.2,2.7-2.8,3.4-4.8c0.7-2,1.1-4.4,1.1-7.1c0-2.7-0.4-5-1.1-7.1c-0.7-2-1.9-3.6-3.4-4.8c-1.5-1.1-3.4-1.7-5.8-1.7
+		c-2.5,0-4.5,0.6-6.1,1.8c-1.6,1.2-2.8,2.8-3.6,4.9c-0.8,2.1-1.2,4.3-1.2,6.9c0,2.5,0.4,4.9,1.2,6.9c0.8,2.1,1.9,3.7,3.5,4.9
+		C140.3,65,142.2,65.6,144.6,65.6z"/>
+	<path class="st8" d="M168.7,71.3V19.8h6.7v27.8h0.9v23.7H168.7z M195.9,71.3v-19c0-1.5-0.1-3-0.4-4.6c-0.2-1.6-0.7-3.1-1.4-4.4
+		c-0.7-1.4-1.7-2.4-3-3.3c-1.3-0.8-2.9-1.3-5-1.3c-1.3,0-2.6,0.2-3.8,0.7c-1.2,0.4-2.2,1.2-3.1,2.1c-0.9,1-1.6,2.3-2.1,3.9
+		s-0.8,3.5-0.8,5.8l-4.6-1.8c0-3.5,0.7-6.6,2-9.3s3.2-4.8,5.7-6.3c2.4-1.5,5.4-2.3,8.9-2.3c2.7,0,4.9,0.4,6.7,1.3
+		c1.8,0.9,3.3,2,4.4,3.4c1.1,1.4,2,2.9,2.6,4.6c0.6,1.7,1,3.3,1.2,4.8c0.2,1.6,0.3,3,0.3,4.2v21.5H195.9z"/>
+	<path class="st8" d="M205.1,38.6v-6h26.4v6H205.1z M231.5,71.3c-2.4,0.5-4.8,0.7-7.2,0.6c-2.3-0.1-4.4-0.5-6.3-1.4
+		c-1.8-0.8-3.2-2.1-4.2-3.9c-0.8-1.6-1.3-3.2-1.3-4.9c-0.1-1.7-0.1-3.5-0.1-5.6V21.9h7.5v33.8c0,1.5,0,2.9,0.1,4
+		c0,1.1,0.3,2.1,0.7,2.9c0.9,1.5,2.2,2.3,4.1,2.5c1.9,0.2,4.1,0.1,6.6-0.2V71.3z"/>
+	<path class="st8" d="M251.6,72.3c-4.4,0-8-0.9-10.9-2.7c-2.9-1.8-4.7-4.3-5.4-7.6l3.1-0.6c0.6,2.4,2.1,4.3,4.5,5.7
+		c2.4,1.4,5.3,2.1,8.7,2.1c3.5,0,6.3-0.7,8.4-2.3c2.1-1.5,3.1-3.5,3.1-6.1c0-1.4-0.3-2.6-0.9-3.5c-0.6-0.9-1.8-1.7-3.6-2.4
+		c-1.8-0.7-4.5-1.6-8-2.5c-3.7-1-6.5-2-8.6-2.9c-2-0.9-3.5-2-4.3-3.2c-0.8-1.2-1.2-2.6-1.2-4.3c0-2,0.6-3.9,1.8-5.4
+		c1.2-1.6,2.9-2.8,5-3.7c2.1-0.9,4.6-1.3,7.4-1.3c2.8,0,5.4,0.5,7.7,1.4s4.1,2.3,5.5,3.9c1.4,1.7,2.2,3.6,2.4,5.8l-3.1,0.6
+		c-0.5-2.7-1.8-4.8-4.1-6.4c-2.3-1.6-5.2-2.3-8.6-2.3c-3.2,0-5.8,0.6-7.9,2c-2,1.4-3.1,3.1-3.1,5.3c0,1.2,0.3,2.3,1,3.1
+		c0.7,0.9,1.9,1.7,3.6,2.4s4.1,1.5,7.2,2.2c3.9,1,6.9,2,9,3c2.2,1,3.7,2.2,4.5,3.5c0.9,1.3,1.3,3,1.3,5c0,3.5-1.3,6.2-3.9,8.2
+		C259.7,71.3,256.1,72.3,251.6,72.3z"/>
+	<path class="st8" d="M271.5,88.4V32.6h2.8V63h0.2v25.4H271.5z M288,72.3c-3.4,0-6.3-0.9-8.7-2.7c-2.4-1.8-4.2-4.3-5.5-7.4
+		c-1.3-3.1-1.9-6.5-1.9-10.4c0-3.9,0.6-7.4,1.9-10.5c1.3-3.1,3.1-5.5,5.6-7.2c2.5-1.7,5.5-2.6,9.1-2.6c3.5,0,6.4,0.9,8.8,2.7
+		c2.4,1.8,4.3,4.2,5.5,7.3c1.3,3.1,1.9,6.5,1.9,10.3c0,3.9-0.6,7.3-1.9,10.4c-1.3,3.1-3.2,5.5-5.7,7.3
+		C294.7,71.4,291.7,72.3,288,72.3z M288,69.3c3,0,5.5-0.8,7.5-2.3c2-1.5,3.5-3.6,4.6-6.2s1.5-5.6,1.5-8.9c0-3.3-0.5-6.2-1.5-8.9
+		c-1-2.6-2.5-4.7-4.5-6.2c-2-1.5-4.5-2.3-7.6-2.3c-3,0-5.5,0.7-7.6,2.2c-2,1.5-3.6,3.5-4.6,6.1c-1,2.6-1.6,5.6-1.6,9
+		c0,3.3,0.5,6.3,1.5,8.9c1,2.6,2.6,4.7,4.6,6.2C282.5,68.6,285,69.3,288,69.3z"/>
+	<path class="st8" d="M325.8,72.3c-3.6,0-6.8-0.8-9.4-2.5c-2.6-1.6-4.7-4-6.1-7c-1.4-3.1-2.1-6.7-2.1-10.9c0-4.2,0.7-7.9,2.1-10.9
+		c1.4-3.1,3.4-5.4,6.1-7c2.6-1.6,5.8-2.4,9.5-2.4c3.7,0,6.9,0.8,9.5,2.5c2.6,1.7,4.6,4.1,6,7.3c1.4,3.2,2.1,7,2.1,11.5h-3.2v-1
+		c-0.1-5.6-1.4-9.8-3.9-12.8c-2.5-3-6-4.5-10.5-4.5c-4.6,0-8.1,1.5-10.7,4.6c-2.5,3-3.8,7.3-3.8,12.8c0,5.5,1.3,9.8,3.8,12.8
+		c2.5,3,6.1,4.6,10.7,4.6c3.2,0,6-0.8,8.4-2.3c2.4-1.5,4.3-3.7,5.8-6.5l2.5,1.4c-1.6,3.3-3.8,5.8-6.7,7.6
+		C332.9,71.4,329.6,72.3,325.8,72.3z M310.1,52.8v-3h31.5v3H310.1z"/>
+	<path class="st8" d="M364.2,72.3c-3.6,0-6.8-0.8-9.4-2.5c-2.6-1.6-4.7-4-6.1-7c-1.4-3.1-2.1-6.7-2.1-10.9c0-4.2,0.7-7.9,2.1-10.9
+		c1.4-3.1,3.4-5.4,6.1-7c2.6-1.6,5.8-2.4,9.5-2.4c3.7,0,6.9,0.8,9.5,2.5c2.6,1.7,4.6,4.1,6,7.3c1.4,3.2,2.1,7,2.1,11.5h-3.2v-1
+		c-0.1-5.6-1.4-9.8-3.9-12.8c-2.5-3-6-4.5-10.5-4.5c-4.6,0-8.1,1.5-10.7,4.6c-2.5,3-3.8,7.3-3.8,12.8c0,5.5,1.3,9.8,3.8,12.8
+		c2.5,3,6.1,4.6,10.7,4.6c3.2,0,6-0.8,8.4-2.3c2.4-1.5,4.3-3.7,5.8-6.5l2.5,1.4c-1.6,3.3-3.8,5.8-6.7,7.6
+		C371.3,71.4,368,72.3,364.2,72.3z M348.5,52.8v-3h31.5v3H348.5z"/>
+	<path class="st8" d="M401.8,72.3c-3.6,0-6.7-0.9-9.2-2.7c-2.5-1.8-4.4-4.2-5.7-7.3c-1.3-3.1-1.9-6.6-1.9-10.4
+		c0-3.8,0.6-7.2,1.9-10.3c1.3-3.1,3.1-5.5,5.5-7.3c2.4-1.8,5.4-2.7,8.8-2.7c3.6,0,6.6,0.9,9.1,2.6c2.5,1.8,4.3,4.2,5.6,7.2
+		c1.3,3.1,1.9,6.5,1.9,10.5c0,3.8-0.6,7.3-1.9,10.4c-1.3,3.1-3.1,5.5-5.5,7.4C408.1,71.4,405.2,72.3,401.8,72.3z M401.8,69.3
+		c3,0,5.6-0.8,7.6-2.3c2-1.5,3.6-3.6,4.6-6.2c1-2.6,1.5-5.6,1.5-8.9c0-3.4-0.5-6.4-1.6-9s-2.6-4.7-4.6-6.1c-2-1.5-4.6-2.2-7.6-2.2
+		c-3.1,0-5.6,0.8-7.6,2.3c-2,1.5-3.5,3.6-4.5,6.2c-1,2.6-1.5,5.6-1.5,8.9c0,3.3,0.5,6.3,1.5,8.9c1,2.6,2.5,4.7,4.6,6.2
+		C396.3,68.6,398.8,69.3,401.8,69.3z M415.5,71.3V40.9h-0.2V19.8h3v51.5H415.5z"/>
+</g>
+<g>
+	<polygon class="st8" points="51.8,32.6 44.8,0.4 35.4,49.3 60.1,49.3 47.5,89.6 90.2,32.7 	"/>
+	<polygon class="st8" points="0.5,71.1 48.4,71.1 53.5,53.9 29.2,53.9 37.3,14 	"/>
+</g>
+</svg>
diff --git a/website/public/awesome-github/LS-Agency-Site-Icon-Blue.svg b/website/public/awesome-github/LS-Agency-Site-Icon-Blue.svg
new file mode 100644
index 00000000..0d01557c
--- /dev/null
+++ b/website/public/awesome-github/LS-Agency-Site-Icon-Blue.svg
@@ -0,0 +1,4 @@
+<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M51.3 32.2L44.3 0L34.9 48.9H59.6L47 89.2L89.7 32.3L51.3 32.2Z" fill="#127EFF"/>
+<path d="M0 70.7H47.9L53 53.5H28.7L36.8 13.6L0 70.7Z" fill="#127EFF"/>
+</svg>
diff --git a/website/public/awesome-github/LS-Agency-Site-Icon-Light-Blue.svg b/website/public/awesome-github/LS-Agency-Site-Icon-Light-Blue.svg
new file mode 100644
index 00000000..ebfdcba3
--- /dev/null
+++ b/website/public/awesome-github/LS-Agency-Site-Icon-Light-Blue.svg
@@ -0,0 +1,4 @@
+<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M51.3 32.2L44.3 0L34.9 48.9H59.6L47 89.2L89.7 32.3L51.3 32.2Z" fill="#43DFEF"/>
+<path d="M0 70.7H47.9L53 53.5H28.7L36.8 13.6L0 70.7Z" fill="#43DFEF"/>
+</svg>
diff --git a/website/src/components/AwesomeGithub/AwesomeGithubFooter.astro b/website/src/components/AwesomeGithub/AwesomeGithubFooter.astro
index dfda4197..5bcd54d3 100644
--- a/website/src/components/AwesomeGithub/AwesomeGithubFooter.astro
+++ b/website/src/components/AwesomeGithub/AwesomeGithubFooter.astro
@@ -1,204 +1,270 @@
 ---
+import Icon from "./Icon.astro";
+import { CATEGORIES } from "../../lib/catalogue";
+
 const base = import.meta.env.BASE_URL;
+
+// Split categories: first 4 for Browse, remaining for More
+const browseCats = CATEGORIES.slice(0, 4);
+const moreCats = CATEGORIES.slice(4);
 ---
 
-<footer class="ag-footer">
-  <div class="ag-footer-container">
-    <div class="ag-footer-brand">
-      <a href={`${base}`} class="ag-footer-logo-link">
-        <span class="ag-footer-logo" aria-hidden="true">✦</span>
-        <span class="ag-footer-brand-text">
-          <span>Awesome</span><span class="ag-footer-brand-em">GitHub</span>
-        </span>
-      </a>
-      <p class="ag-footer-tagline">Governance, not opinions.</p>
-    </div>
+<footer class="foot">
+  <!-- Cyan halo effect -->
+  <div class="foot-halo" aria-hidden="true"></div>
 
-    <nav class="ag-footer-nav" aria-label="Footer navigation">
-      <div class="ag-footer-col">
-        <h3 class="ag-footer-col-title">Explore</h3>
-        <ul class="ag-footer-links">
-          <li><a href={`${base}c/agents/`}>Agents</a></li>
-          <li><a href={`${base}c/instructions/`}>Instructions</a></li>
-          <li><a href={`${base}c/prompts/`}>Prompts</a></li>
-          <li><a href={`${base}c/skills/`}>Skills</a></li>
-          <li><a href={`${base}c/hooks/`}>Hooks</a></li>
-          <li><a href={`${base}c/workflows/`}>Workflows</a></li>
-        </ul>
+  <div class="foot-inner">
+    <!-- Top section: brand + 4 columns -->
+    <div class="foot-top">
+      <!-- Brand block (left) -->
+      <div class="foot-brand">
+        <a href={`${base}`} class="foot-logo-link">
+          <img src={`${base}awesome-github/LS-Agency-Logo-White.svg`} alt="LightSpeed" />
+        </a>
+        <p>Installable AI governance for the LightSpeed WordPress & WooCommerce team.</p>
       </div>
 
-      <div class="ag-footer-col">
-        <h3 class="ag-footer-col-title">Learn</h3>
-        <ul class="ag-footer-links">
-          <li><a href={`${base}learn/`}>Learning Centre</a></li>
-          <li><a href={`${base}learn/oriented/`}>Getting Oriented</a></li>
-          <li><a href={`${base}learn/governance/`}>Governance</a></li>
-          <li><a href={`${base}learn/quality/`}>Quality</a></li>
-          <li><a href={`${base}cookbook/`}>Cookbook</a></li>
-          <li><a href={`${base}glossary/`}>Glossary</a></li>
-        </ul>
-      </div>
+      <!-- 4 columns of links -->
+      <div class="foot-cols">
+        <!-- Column 1: Catalogues (Browse categories, first 4) -->
+        <div class="foot-col">
+          <h5>Catalogues</h5>
+          <div class="foot-cat-grid">
+            {browseCats.map((cat) => (
+              <a href={`${base}c/${cat.id}/`}>
+                <Icon name={cat.icon} size={18} />
+                <span>{cat.label}</span>
+              </a>
+            ))}
+          </div>
+        </div>
 
-      <div class="ag-footer-col">
-        <h3 class="ag-footer-col-title">About</h3>
-        <ul class="ag-footer-links">
-          <li><a href={`${base}why/`}>Why This Exists</a></li>
-          <li><a href={`${base}references/`}>References</a></li>
-          <li><a href={`${base}getting-started/`}>Getting Started</a></li>
-          <li>
-            <a
-              href="https://github.com/lightspeedwp/.github"
-              target="_blank"
-              rel="noopener noreferrer"
-            >GitHub Repository ↗</a>
-          </li>
-          <li>
-            <a
-              href="https://github.com/lightspeedwp/.github/blob/develop/AGENTS.md"
-              target="_blank"
-              rel="noopener noreferrer"
-            >AGENTS.md ↗</a>
-          </li>
-        </ul>
+        <!-- Column 2: More (remaining categories) -->
+        <div class="foot-col">
+          <h5>More</h5>
+          {moreCats.map((cat) => (
+            <a href={`${base}c/${cat.id}/`}>{cat.label}</a>
+          ))}
+        </div>
+
+        <!-- Column 3: Learn -->
+        <div class="foot-col">
+          <h5>Learn</h5>
+          <a href={`${base}learn/`}>Learning Centre</a>
+          <a href={`${base}cookbook/`}>Cookbook</a>
+          <a href={`${base}onboarding/`}>Onboarding journey</a>
+          <a href={`${base}getting-started/`}>Getting started</a>
+        </div>
+
+        <!-- Column 4: Reference -->
+        <div class="foot-col">
+          <h5>Reference</h5>
+          <a href={`${base}glossary/`}>Glossary</a>
+          <a href={`${base}references/`}>References</a>
+          <a href="https://lightspeedwp.agency/" target="_blank" rel="noopener noreferrer">LightSpeed site</a>
+        </div>
       </div>
-    </nav>
-  </div>
+    </div>
 
-  <div class="ag-footer-bottom">
-    <p>
-      Built by <a href="https://lightspeedwp.agency" target="_blank" rel="noopener noreferrer">LightSpeed WP Agency</a>.
-      Open source under the <a href="https://github.com/lightspeedwp/.github/blob/develop/LICENSE" target="_blank" rel="noopener noreferrer">GPL v3 Licence</a>.
-    </p>
+    <!-- Bottom bar -->
+    <div class="foot-bottom">
+      <p>© 2026 LightSpeed · Crafted with care in WordPress.</p>
+      <p>GPL-3.0</p>
+    </div>
   </div>
 </footer>
 
 <style>
-  .ag-footer {
+  /* ── Footer container ────────────────────────────────────────────── */
+  .foot {
     background: var(--c-black);
-    color: var(--c-white);
-    padding: var(--space-16) var(--gutter) 0;
+    color: #fff;
+    padding: 56px 0 36px;
+    margin-top: 40px;
+    position: relative;
+    overflow: hidden;
   }
 
-  .ag-footer-container {
-    max-width: var(--container-max);
-    margin: 0 auto;
-    display: grid;
-    grid-template-columns: 1fr 2fr;
-    gap: var(--space-16);
-    padding-bottom: var(--space-16);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  /* Cyan halo from top center */
+  .foot-halo {
+    position: absolute;
+    top: -120px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 460px;
+    height: 260px;
+    background: radial-gradient(circle, rgba(123, 231, 255, 0.18), transparent 70%);
+    pointer-events: none;
   }
 
-  .ag-footer-brand {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-3);
+  .foot-inner {
+    position: relative;
+    z-index: 1;
   }
 
-  .ag-footer-logo-link {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-2);
-    text-decoration: none;
-    color: var(--c-white);
+  /* ── Top section ─────────────────────────────────────────────────── */
+  .foot-top {
+    display: flex;
+    justify-content: space-between;
+    gap: 32px;
+    flex-wrap: wrap;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    padding-bottom: 28px;
+    max-width: var(--container-max);
+    margin: 0 auto;
+    padding-left: var(--gutter);
+    padding-right: var(--gutter);
   }
 
-  .ag-footer-logo {
-    font-size: 20px;
+  /* ── Brand block ─────────────────────────────────────────────────── */
+  .foot-brand {
+    flex: 0 0 auto;
   }
 
-  .ag-footer-brand-text {
-    font-size: 16px;
-    font-weight: var(--weight-bold);
-    font-family: var(--font-display);
-    display: flex;
-    gap: var(--space-1);
+  .foot-logo-link {
+    display: block;
   }
 
-  .ag-footer-brand-em {
-    color: var(--c-light-blue);
+  .foot-brand img {
+    height: 26px;
+    width: auto;
+    margin-bottom: 14px;
   }
 
-  .ag-footer-tagline {
-    font-size: var(--fs-body-sm);
-    color: var(--c-slate-400);
+  .foot-brand p {
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 14px;
+    max-width: 280px;
     margin: 0;
-    font-style: italic;
+    line-height: 1.5;
   }
 
-  .ag-footer-nav {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: var(--space-8);
+  /* ── Link columns ────────────────────────────────────────────────── */
+  .foot-cols {
+    display: flex;
+    gap: 56px;
+    flex-wrap: wrap;
   }
 
-  .ag-footer-col-title {
-    font-size: var(--fs-eyebrow);
-    font-weight: var(--weight-semibold);
+  .foot-col h5 {
+    font-size: 12px;
     text-transform: uppercase;
-    letter-spacing: var(--tracking-eyebrow);
-    color: var(--c-slate-300);
-    margin: 0 0 var(--space-4) 0;
+    letter-spacing: 0.1em;
+    color: rgba(255, 255, 255, 0.45);
+    margin: 0 0 12px;
+    font-weight: 700;
   }
 
-  .ag-footer-links {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+  .foot-col a {
     display: flex;
-    flex-direction: column;
-    gap: var(--space-3);
-  }
-
-  .ag-footer-links a {
-    font-size: var(--fs-body-sm);
-    color: var(--c-slate-400);
+    align-items: center;
+    gap: 8px;
+    color: rgba(255, 255, 255, 0.8);
     text-decoration: none;
+    font-size: 14px;
+    padding: 4px 0;
+    cursor: pointer;
     transition: color var(--dur) var(--ease-out);
   }
 
-  .ag-footer-links a:hover {
-    color: var(--c-white);
+  .foot-col a:hover {
+    color: var(--c-light-blue);
   }
 
-  .ag-footer-bottom {
-    max-width: var(--container-max);
-    margin: 0 auto;
-    padding: var(--space-6) 0;
+  /* Browse categories grid (2 columns within Catalogues column) */
+  .foot-cat-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
   }
 
-  .ag-footer-bottom p {
-    font-size: var(--fs-body-sm);
-    color: var(--c-slate-500);
-    margin: 0;
+  .foot-cat-grid a {
+    padding: 8px;
+    border-radius: var(--radius-sm);
+    transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
   }
 
-  .ag-footer-bottom a {
-    color: var(--c-slate-400);
-    text-decoration: none;
-    transition: color var(--dur) var(--ease-out);
+  .foot-cat-grid a:hover {
+    background: rgba(255, 255, 255, 0.08);
+  }
+
+  .foot-cat-grid a span {
+    font-size: 13px;
   }
 
-  .ag-footer-bottom a:hover {
-    color: var(--c-white);
+  /* ── Bottom bar ──────────────────────────────────────────────────── */
+  .foot-bottom {
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+    flex-wrap: wrap;
+    margin-top: 24px;
+    color: rgba(255, 255, 255, 0.45);
+    font-size: 13px;
+    max-width: var(--container-max);
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: var(--gutter);
+    padding-right: var(--gutter);
   }
 
-  @media (max-width: 900px) {
-    .ag-footer-container {
-      grid-template-columns: 1fr;
-      gap: var(--space-10);
+  .foot-bottom p {
+    margin: 0;
+  }
+
+  /* ── Responsive ──────────────────────────────────────────────────── */
+  @media (max-width: 1024px) {
+    .foot-top {
+      flex-direction: column;
+    }
+
+    .foot-cols {
+      width: 100%;
+      gap: 32px;
+    }
+
+    .foot-col {
+      flex: 1;
+      min-width: 200px;
     }
   }
 
-  @media (max-width: 640px) {
-    .ag-footer-nav {
-      grid-template-columns: repeat(2, 1fr);
+  @media (max-width: 768px) {
+    .foot-cols {
+      gap: 24px;
+    }
+
+    .foot-col {
+      min-width: 150px;
+    }
+
+    .foot-cat-grid {
+      gap: 4px;
+    }
+
+    .foot-cat-grid a span {
+      font-size: 12px;
     }
   }
 
   @media (max-width: 480px) {
-    .ag-footer-nav {
-      grid-template-columns: 1fr;
+    .foot-top {
+      gap: 24px;
+      padding-bottom: 20px;
+    }
+
+    .foot-cols {
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    .foot-col {
+      min-width: unset;
+    }
+
+    .foot-bottom {
+      flex-direction: column;
+      gap: 8px;
     }
   }
 </style>
diff --git a/website/src/components/AwesomeGithub/AwesomeGithubNav.astro b/website/src/components/AwesomeGithub/AwesomeGithubNav.astro
index e2431f80..073ca859 100644
--- a/website/src/components/AwesomeGithub/AwesomeGithubNav.astro
+++ b/website/src/components/AwesomeGithub/AwesomeGithubNav.astro
@@ -9,182 +9,245 @@ interface Props {
 
 const { base, pathname } = Astro.props;
 
-const navLinks = [
-  { href: `${base}getting-started/`, path: "/getting-started", label: "Getting started" },
-  { href: `${base}learn/`, path: "/learn", label: "Learn" },
-  { href: `${base}cookbook/`, path: "/cookbook", label: "Cookbook" },
-  { href: `${base}glossary/`, path: "/glossary", label: "Glossary" },
-  { href: `${base}why/`, path: "/why", label: "Why" },
-];
-
-const isCatActive = (linkPath: string): boolean => {
+const isActive = (path: string): boolean => {
   const norm = pathname.replace(/\/$/, "");
-  const lp = linkPath.replace(/\/$/, "");
-  return norm === lp || norm.startsWith(lp + "/");
+  const p = path.replace(/\/$/, "");
+  return norm === p || norm.startsWith(p + "/");
 };
 ---
 
 <!-- Sticky nav bar -->
-<header class="ag-nav" role="banner">
-  <div class="ag-nav-inner">
+<header class="nav" role="banner">
+  <div class="wrap">
 
     <!-- Brand / Logo -->
-    <a href={base} class="ag-nav-brand" aria-label="Awesome GitHub — home">
-      <svg class="ag-nav-sparkle" width="28" height="28" viewBox="0 0 28 28" fill="none" aria-hidden="true" focusable="false">
-        <path d="M14 2 L15.8 11.2 L24 10 L17.2 16 L20 24 L14 19.6 L8 24 L10.8 16 L4 10 L12.2 11.2 Z" fill="currentColor"/>
-      </svg>
-      <span class="ag-brand-text">
-        <span class="ag-brand-word">Awesome</span><span class="ag-brand-em">GitHub</span>
-      </span>
+    <a href={base} class="nav-brand" aria-label="Awesome GitHub — home">
+      <img class="brand-icon-light" src={base + "awesome-github/LS-Agency-Site-Icon-Blue.svg"} alt="" width="26" height="26" />
+      <img class="brand-icon-dark" src={base + "awesome-github/LS-Agency-Site-Icon-Light-Blue.svg"} alt="" width="26" height="26" />
+      <b>Awesome<span class="tld"> GitHub</span></b>
     </a>
 
     <!-- Desktop nav (hidden on mobile) -->
-    <nav class="ag-nav-desktop" aria-label="Main navigation">
-      <!-- Browse mega-dropdown -->
-      <div class="ag-browse-wrapper" data-browse-menu>
-        <button
-          class="ag-nav-link ag-browse-trigger"
-          aria-expanded="false"
-          aria-controls="ag-browse-panel"
-        >
+    <nav class="nav-primary" aria-label="Main navigation">
+      <!-- Browse dropdown -->
+      <div class="browse-wrapper" data-browse-menu>
+        <button class="nav-btn" aria-expanded="false" aria-controls="browse-panel">
           Browse
-          <span class="ag-caret-icon"><Icon name="caret-down" size={13} /></span>
+          <span class="chev"><Icon name="chevron-down" size={15} /></span>
         </button>
-        <div
-          class="ag-browse-panel"
-          id="ag-browse-panel"
-        >
-          <div class="ag-browse-grid">
-            {CATEGORIES.map((cat) => (
-              <a
-                href={`${base}c/${cat.id}/`}
-                class="ag-browse-card"
-              >
-                <span class="ag-browse-cat-icon"><Icon name={cat.icon} size={22} /></span>
-                <span class="ag-browse-cat-name">{cat.label}</span>
-                <span class="ag-browse-cat-blurb">{cat.blurb}</span>
-              </a>
-            ))}
-          </div>
+        <div class="dropdown dd-cats" id="browse-panel" role="menu">
+          {CATEGORIES.map((cat) => (
+            <a href={`${base}c/${cat.id}/`} class="dd-item" role="menuitem">
+              <div class="ddi"><Icon name={cat.icon} size={16} /></div>
+              <div>
+                <b>{cat.label}</b>
+                <span>{cat.blurb}</span>
+              </div>
+            </a>
+          ))}
         </div>
       </div>
 
-      <!-- Other nav links -->
-      {navLinks.map((link) => (
-        <a
-          href={link.href}
-          class="ag-nav-link"
-          aria-current={isCatActive(link.path) ? "page" : undefined}
-        >
-          {link.label}
-        </a>
-      ))}
+      <!-- Regular nav buttons -->
+      <a href={`${base}cookbook/`} class="nav-btn" aria-current={isActive("/cookbook") ? "page" : undefined}>
+        Cookbook
+      </a>
+      <a href={`${base}learn/`} class="nav-btn" aria-current={isActive("/learn") ? "page" : undefined}>
+        Learn
+      </a>
+
+      <!-- Resources dropdown -->
+      <div class="resources-wrapper" data-resources-menu>
+        <button class="nav-btn" aria-expanded="false" aria-controls="resources-panel">
+          Resources
+          <span class="chev"><Icon name="chevron-down" size={15} /></span>
+        </button>
+        <div class="dropdown dd-res" id="resources-panel" role="menu">
+          <a href={`${base}onboarding/`} class="dd-simple" role="menuitem">
+            <Icon name="bolt" size={16} class="ddi" />
+            Onboarding journey
+          </a>
+          <a href={`${base}getting-started/`} class="dd-simple" role="menuitem">
+            <Icon name="download" size={16} class="ddi" />
+            Getting started
+          </a>
+          <a href={`${base}why/`} class="dd-simple" role="menuitem">
+            <Icon name="layers" size={16} class="ddi" />
+            Why this exists
+          </a>
+          <a href={`${base}glossary/`} class="dd-simple" role="menuitem">
+            <Icon name="book" size={16} class="ddi" />
+            Glossary
+          </a>
+          <a href={`${base}references/`} class="dd-simple" role="menuitem">
+            <Icon name="github" size={16} class="ddi" />
+            References
+          </a>
+        </div>
+      </div>
     </nav>
 
-    <!-- Right-side controls -->
-    <div class="ag-nav-actions">
-      <button
-        class="ag-icon-btn"
-        type="button"
-        aria-label="Search (Ctrl+K)"
-        title="Search (Ctrl+K)"
-        data-search-open
-      >
-        <Icon name="magnifying-glass" size={18} />
-      </button>
-      <button
-        class="ag-icon-btn ag-theme-toggle-btn"
-        type="button"
-        data-awesome-github-theme-toggle
-        aria-pressed="false"
-        aria-label="Switch to dark mode"
-        title="Switch to dark mode"
-      >
-        <span class="ag-icon-sun"><Icon name="sun" size={18} /></span>
-        <span class="ag-icon-moon"><Icon name="moon" size={18} /></span>
+    <!-- Right-side actions -->
+    <div class="nav-actions">
+      <button class="search-trigger" type="button" data-search-open aria-label="Search resources (⌘K)">
+        <Icon name="search" size={16} />
+        <span class="stxt">Search resources</span>
+        <span class="kbd">⌘K</span>
       </button>
-      <!-- Hamburger — only visible on mobile -->
-      <button
-        class="ag-icon-btn ag-hamburger-btn"
-        type="button"
-        aria-label="Open navigation menu"
-        aria-expanded="false"
-        aria-controls="ag-mobile-drawer"
-        data-nav-hamburger
-      >
-        <span class="ag-icon-menu"><Icon name="list" size={20} /></span>
-        <span class="ag-icon-close"><Icon name="x" size={20} /></span>
+
+      <div class="nav-extra">
+        <!-- Branch toggle -->
+        <div class="branch" role="group" aria-label="Repository branch">
+          <button class="branch-btn" data-branch="main" aria-pressed="true">
+            <span class="bdot"></span>main
+          </button>
+          <button class="branch-btn" data-branch="develop" aria-pressed="false">
+            <span class="bdot"></span>dev
+          </button>
+        </div>
+
+        <!-- Theme toggle -->
+        <button class="icon-btn" type="button" data-awesome-github-theme-toggle aria-pressed="false" aria-label="Switch theme">
+          <Icon name="sun" size={18} class="sun-icon" />
+          <Icon name="moon" size={18} class="moon-icon" />
+        </button>
+
+        <!-- GitHub link -->
+        <a href="https://github.com/lightspeedwp/.github" target="_blank" rel="noopener noreferrer" class="icon-btn" aria-label="GitHub repository">
+          <Icon name="github" size={18} />
+        </a>
+      </div>
+
+      <!-- Hamburger menu (mobile only) -->
+      <button class="burger" type="button" data-nav-hamburger aria-expanded="false" aria-controls="mobile-drawer" aria-label="Open navigation">
+        <Icon name="list" size={20} class="menu-icon" />
+        <Icon name="x" size={20} class="close-icon" />
       </button>
     </div>
 
   </div>
 </header>
 
-<!-- Mobile backdrop overlay -->
-<div
-  class="ag-mobile-overlay"
-  id="ag-mobile-overlay"
-  aria-hidden="true"
-  data-nav-overlay
-></div>
-
-<!-- Mobile full-screen drawer -->
-<aside
-  class="ag-mobile-drawer"
-  id="ag-mobile-drawer"
-  aria-label="Mobile navigation menu"
-  aria-hidden="true"
-  inert
->
-  <div class="ag-drawer-content">
-
-    <div class="ag-drawer-section">
-      <h2 class="ag-drawer-section-title">Browse</h2>
-      <div class="ag-drawer-cat-grid">
+<!-- Mobile overlay & drawer -->
+<div class="drawer-scrim" id="mobile-scrim" aria-hidden="true" data-nav-overlay></div>
+
+<aside class="drawer" id="mobile-drawer" aria-label="Navigation menu" aria-hidden="true" inert>
+  <div class="drawer-head">
+    <a href={base} class="nav-brand">
+      <img class="brand-icon-light" src={base + "awesome-github/LS-Agency-Site-Icon-Blue.svg"} alt="" width="26" height="26" />
+      <img class="brand-icon-dark" src={base + "awesome-github/LS-Agency-Site-Icon-Light-Blue.svg"} alt="" width="26" height="26" />
+      <b>Awesome<span class="tld"> GitHub</span></b>
+    </a>
+    <button class="icon-btn" type="button" data-drawer-close aria-label="Close menu">
+      <Icon name="x" size={20} />
+    </button>
+  </div>
+
+  <div class="drawer-body">
+    <!-- Search -->
+    <div class="drawer-sec">
+      <button class="search-trigger" type="button" data-search-open style="width: 100%;" aria-label="Search resources">
+        <Icon name="search" size={16} />
+        <span class="stxt" style="flex: 1; text-align: left;">Search resources</span>
+      </button>
+    </div>
+
+    <!-- Browse categories -->
+    <div class="drawer-sec">
+      <h6>BROWSE</h6>
+      <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;">
         {CATEGORIES.map((cat) => (
-          <a href={`${base}c/${cat.id}/`} class="ag-drawer-cat-item">
-            <span class="ag-drawer-cat-icon"><Icon name={cat.icon} size={18} /></span>
+          <a href={`${base}c/${cat.id}/`} class="drawer-link">
+            <Icon name={cat.icon} size={18} class="dli" />
             <span>{cat.label}</span>
           </a>
         ))}
       </div>
     </div>
 
-    <div class="ag-drawer-section">
-      <h2 class="ag-drawer-section-title">Explore</h2>
-      <nav aria-label="Mobile navigation links">
-        {navLinks.map((link) => (
-          <a href={link.href} class="ag-drawer-nav-link">
-            {link.label}
-          </a>
-        ))}
-      </nav>
+    <!-- Cook & Learn -->
+    <div class="drawer-sec">
+      <h6>COOK & LEARN</h6>
+      <a href={`${base}cookbook/`} class="drawer-link">
+        <Icon name="bolt" size={18} class="dli" />
+        <span>Cookbook</span>
+      </a>
+      <a href={`${base}learn/`} class="drawer-link">
+        <Icon name="layers" size={18} class="dli" />
+        <span>Learning Centre</span>
+      </a>
     </div>
 
-    <div class="ag-drawer-section ag-drawer-section--theme">
-      <button
-        class="ag-drawer-theme-btn"
-        type="button"
-        data-awesome-github-theme-toggle
-        aria-pressed="false"
-      >
-        <span class="ag-icon-sun"><Icon name="sun" size={20} /></span>
-        <span class="ag-icon-moon"><Icon name="moon" size={20} /></span>
-        <span class="ag-drawer-theme-label">
-          <span class="ag-drawer-theme-label--light">Switch to dark mode</span>
-          <span class="ag-drawer-theme-label--dark">Switch to light mode</span>
-        </span>
-      </button>
+    <!-- Resources -->
+    <div class="drawer-sec">
+      <h6>RESOURCES</h6>
+      <a href={`${base}onboarding/`} class="drawer-link">
+        <Icon name="bolt" size={18} class="dli" />
+        <span>Onboarding journey</span>
+      </a>
+      <a href={`${base}getting-started/`} class="drawer-link">
+        <Icon name="download" size={18} class="dli" />
+        <span>Getting started</span>
+      </a>
+      <a href={`${base}why/`} class="drawer-link">
+        <Icon name="layers" size={18} class="dli" />
+        <span>Why this exists</span>
+      </a>
+      <a href={`${base}glossary/`} class="drawer-link">
+        <Icon name="book" size={18} class="dli" />
+        <span>Glossary</span>
+      </a>
+      <a href={`${base}references/`} class="drawer-link">
+        <Icon name="github" size={18} class="dli" />
+        <span>References</span>
+      </a>
     </div>
 
+    <!-- Install source (branch + theme) -->
+    <div class="drawer-sec">
+      <h6>INSTALL SOURCE</h6>
+      <div class="drawer-row">
+        <span class="rl">Branch</span>
+        <div class="branch">
+          <button class="branch-btn" data-branch="main" aria-pressed="true">
+            <span class="bdot"></span>main
+          </button>
+          <button class="branch-btn" data-branch="develop" aria-pressed="false">
+            <span class="bdot"></span>dev
+          </button>
+        </div>
+      </div>
+      <div class="drawer-row">
+        <span class="rl">Theme</span>
+        <button class="icon-btn" type="button" data-awesome-github-theme-toggle aria-pressed="false">
+          <Icon name="sun" size={18} class="sun-icon" />
+          <Icon name="moon" size={18} class="moon-icon" />
+        </button>
+      </div>
+    </div>
+
+    <!-- External -->
+    <div class="drawer-sec">
+      <h6>EXTERNAL</h6>
+      <a href="https://github.com/lightspeedwp/.github" target="_blank" rel="noopener noreferrer" class="drawer-link">
+        <Icon name="github" size={18} class="dli" />
+        <span>.github repository</span>
+        <Icon name="external" size={14} class="ext" />
+      </a>
+      <a href="https://lightspeedwp.agency/" target="_blank" rel="noopener noreferrer" class="drawer-link">
+        <Icon name="bolt" size={18} class="dli" />
+        <span>LightSpeed site</span>
+        <Icon name="external" size={14} class="ext" />
+      </a>
+    </div>
   </div>
 </aside>
 
 <script>
-  // ── Browse dropdown (Disclosure pattern) ────────────────────────
+  // ── Browse dropdown ────────────────────────────────────────────────
   const browseWrapper = document.querySelector<HTMLElement>("[data-browse-menu]");
-  const browseTrigger = browseWrapper?.querySelector<HTMLButtonElement>(".ag-browse-trigger");
-  const browsePanel = document.getElementById("ag-browse-panel");
+  const browseTrigger = browseWrapper?.querySelector<HTMLButtonElement>(".nav-btn");
+  const browsePanel = document.getElementById("browse-panel");
 
   if (browseWrapper && browseTrigger && browsePanel) {
     const openBrowse = () => {
@@ -203,7 +266,6 @@ const isCatActive = (linkPath: string): boolean => {
       browseWrapper.hasAttribute("data-open") ? closeBrowse() : openBrowse();
     });
 
-    // Close when focus moves entirely outside the wrapper
     browseWrapper.addEventListener("focusout", (e) => {
       const related = (e as FocusEvent).relatedTarget;
       if (related instanceof Element && browseWrapper.contains(related)) return;
@@ -228,30 +290,99 @@ const isCatActive = (linkPath: string): boolean => {
     });
   }
 
-  // ── Mobile drawer ───────────────────────────────────────────────
+  // ── Resources dropdown ────────────────────────────────────────────────
+  const resourcesWrapper = document.querySelector<HTMLElement>("[data-resources-menu]");
+  const resourcesTrigger = resourcesWrapper?.querySelector<HTMLButtonElement>(".nav-btn");
+  const resourcesPanel = document.getElementById("resources-panel");
+
+  if (resourcesWrapper && resourcesTrigger && resourcesPanel) {
+    const openResources = () => {
+      resourcesWrapper.dataset.open = "";
+      resourcesTrigger.setAttribute("aria-expanded", "true");
+    };
+    const closeResources = () => {
+      delete resourcesWrapper.dataset.open;
+      resourcesTrigger.setAttribute("aria-expanded", "false");
+    };
+
+    resourcesWrapper.addEventListener("mouseenter", openResources);
+    resourcesWrapper.addEventListener("mouseleave", closeResources);
+
+    resourcesTrigger.addEventListener("click", () => {
+      resourcesWrapper.hasAttribute("data-open") ? closeResources() : openResources();
+    });
+
+    resourcesWrapper.addEventListener("focusout", (e) => {
+      const related = (e as FocusEvent).relatedTarget;
+      if (related instanceof Element && resourcesWrapper.contains(related)) return;
+      closeResources();
+    });
+
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && resourcesWrapper.hasAttribute("data-open")) {
+        closeResources();
+        resourcesTrigger.focus();
+      }
+    });
+
+    document.addEventListener("click", (e) => {
+      if (e.target instanceof Element && !resourcesWrapper.contains(e.target)) {
+        closeResources();
+      }
+    });
+
+    resourcesPanel.querySelectorAll("a").forEach((link) => {
+      link.addEventListener("click", closeResources);
+    });
+  }
+
+  // ── Branch toggle ──────────────────────────────────────────────────────
+  const BRANCH_STORAGE_KEY = "github_branch";
+  const branchBtns = document.querySelectorAll<HTMLButtonElement>(".branch-btn");
+
+  const initBranch = () => {
+    const saved = localStorage.getItem(BRANCH_STORAGE_KEY) || "main";
+    branchBtns.forEach((btn) => {
+      const branch = btn.getAttribute("data-branch");
+      btn.setAttribute("aria-pressed", branch === saved ? "true" : "false");
+    });
+  };
+
+  initBranch();
+
+  branchBtns.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const branch = btn.getAttribute("data-branch");
+      localStorage.setItem(BRANCH_STORAGE_KEY, branch || "main");
+      branchBtns.forEach((b) => {
+        b.setAttribute("aria-pressed", b.getAttribute("data-branch") === branch ? "true" : "false");
+      });
+    });
+  });
+
+  // ── Mobile drawer ──────────────────────────────────────────────────────
   const hamburger = document.querySelector<HTMLButtonElement>("[data-nav-hamburger]");
-  const drawer = document.getElementById("ag-mobile-drawer");
-  const overlay = document.getElementById("ag-mobile-overlay");
+  const drawer = document.getElementById("mobile-drawer");
+  const scrim = document.getElementById("mobile-scrim");
+  const drawerClose = drawer?.querySelector<HTMLButtonElement>("[data-drawer-close]");
 
-  if (hamburger && drawer && overlay) {
-    // Elements outside the nav that should be hidden from assistive tech when drawer is open
-    const bgEls = Array.from(document.querySelectorAll<HTMLElement>("body > :not(nav)"));
+  if (hamburger && drawer && scrim) {
+    const bgEls = Array.from(document.querySelectorAll<HTMLElement>("body > :not(header):not(aside):not(.drawer-scrim)"));
 
     const openDrawer = () => {
       hamburger.setAttribute("aria-expanded", "true");
-      hamburger.setAttribute("aria-label", "Close navigation menu");
       drawer.setAttribute("aria-hidden", "false");
       drawer.removeAttribute("inert");
-      overlay.setAttribute("aria-hidden", "false");
+      scrim.setAttribute("aria-hidden", "false");
       document.body.classList.add("ag-drawer-open");
       bgEls.forEach((el) => el.setAttribute("inert", ""));
     };
+
     const closeDrawer = () => {
       hamburger.setAttribute("aria-expanded", "false");
-      hamburger.setAttribute("aria-label", "Open navigation menu");
       drawer.setAttribute("aria-hidden", "true");
       drawer.setAttribute("inert", "");
-      overlay.setAttribute("aria-hidden", "true");
+      scrim.setAttribute("aria-hidden", "true");
       document.body.classList.remove("ag-drawer-open");
       bgEls.forEach((el) => el.removeAttribute("inert"));
     };
@@ -259,9 +390,11 @@ const isCatActive = (linkPath: string): boolean => {
     hamburger.addEventListener("click", () => {
       hamburger.getAttribute("aria-expanded") === "true" ? closeDrawer() : openDrawer();
     });
-    overlay.addEventListener("click", closeDrawer);
 
-    drawer.querySelectorAll("a").forEach((link) => {
+    drawerClose?.addEventListener("click", closeDrawer);
+    scrim.addEventListener("click", closeDrawer);
+
+    drawer.querySelectorAll("a, [data-search-open]").forEach((link) => {
       link.addEventListener("click", closeDrawer);
     });
 
@@ -272,436 +405,530 @@ const isCatActive = (linkPath: string): boolean => {
       }
     });
 
-    window.matchMedia("(min-width: 961px)").addEventListener("change", (e) => {
+    window.matchMedia("(min-width: 1025px)").addEventListener("change", (e) => {
       if (e.matches) closeDrawer();
     });
   }
 
-  // ── Sync aria-pressed on all theme toggle buttons ────────────────
+  // ── Theme toggle icon visibility & aria-pressed sync ────────────────────
   const syncThemePressed = () => {
     const isDark = document.documentElement.dataset.theme === "dark";
-    const label = isDark ? "Switch to light mode" : "Switch to dark mode";
     document.querySelectorAll<HTMLElement>("[data-awesome-github-theme-toggle]").forEach((btn) => {
       btn.setAttribute("aria-pressed", isDark ? "true" : "false");
-      // Only update aria-label/title on icon-only buttons (drawer button has visible text)
-      if (!btn.querySelector(".ag-drawer-theme-label")) {
-        btn.setAttribute("aria-label", label);
-        btn.setAttribute("title", label);
-      }
     });
   };
-  // Run once on load, then the layout script handles click updates
+
   syncThemePressed();
   document.addEventListener("theme-changed", syncThemePressed);
 </script>
 
 <style>
-  /* ── Nav shell ─────────────────────────────────────────────────── */
-  .ag-nav {
+  /* ── Nav bar ───────────────────────────────────────────────────────── */
+  .nav {
     position: sticky;
     top: 0;
-    z-index: 300;
-    border-bottom: 1px solid var(--border);
-    backdrop-filter: blur(16px);
-    -webkit-backdrop-filter: blur(16px);
-    background: rgba(255, 255, 255, 0.88);
-    transition:
-      background var(--dur) var(--ease-out),
-      border-color var(--dur) var(--ease-out);
+    z-index: 50;
+    background: color-mix(in srgb, var(--bg) 82%, transparent);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--hair);
   }
 
-  [data-theme="dark"] .ag-nav {
-    background: rgba(15, 16, 20, 0.92);
-    border-bottom-color: rgba(255, 255, 255, 0.06);
-  }
-
-  .ag-nav-inner {
+  .wrap {
     display: flex;
     align-items: center;
-    height: 72px;
+    gap: 18px;
+    height: 64px;
     max-width: var(--container-max);
     margin: 0 auto;
     padding: 0 var(--gutter);
-    gap: var(--space-4);
   }
 
-  /* ── Brand ──────────────────────────────────────────────────────── */
-  .ag-nav-brand {
+  /* ── Brand ──────────────────────────────────────────────────────────── */
+  .nav-brand {
     display: flex;
     align-items: center;
-    gap: var(--space-2);
+    gap: 10px;
     text-decoration: none;
     color: var(--fg-1);
+    cursor: pointer;
     flex-shrink: 0;
-    transition: color var(--dur) var(--ease-out);
   }
 
-  .ag-nav-brand:hover { color: var(--accent); }
-  .ag-nav-brand:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 3px;
-    border-radius: 4px;
+  .nav-brand img {
+    height: 26px;
+    width: auto;
   }
 
-  .ag-nav-sparkle {
-    color: var(--accent);
-    flex-shrink: 0;
-    transition: color var(--dur) var(--ease-out);
+  .brand-icon-light {
+    display: inline;
   }
 
-  .ag-brand-text {
+  .brand-icon-dark {
+    display: none;
+  }
+
+  [data-theme="dark"] .brand-icon-light {
+    display: none;
+  }
+
+  [data-theme="dark"] .brand-icon-dark {
+    display: inline;
+  }
+
+  .nav-brand b {
     font-family: var(--font-display);
-    font-size: clamp(14px, 1.2vw, 16px);
-    font-weight: var(--weight-bold);
-    display: flex;
-    gap: 3px;
-    letter-spacing: -0.01em;
+    font-weight: 800;
+    font-size: 16px;
+    letter-spacing: -0.02em;
   }
 
-  .ag-brand-word { color: var(--fg-1); }
-  .ag-brand-em   { color: var(--accent); font-style: normal; }
+  .nav-brand .tld {
+    color: var(--accent);
+  }
 
-  /* ── Desktop nav ────────────────────────────────────────────────── */
-  .ag-nav-desktop {
+  /* ── Primary nav ────────────────────────────────────────────────────── */
+  .nav-primary {
     display: flex;
     align-items: center;
-    gap: 0;
-    flex: 1;
-    margin-left: var(--space-4);
+    gap: 2px;
+    margin-left: 10px;
   }
 
-  .ag-nav-link {
+  .nav-btn {
     display: inline-flex;
     align-items: center;
-    gap: 4px;
-    padding: 8px 12px;
-    font-family: var(--font-body);
-    font-size: clamp(13px, 1vw, 14px);
-    font-weight: var(--weight-medium);
+    gap: 5px;
+    font-size: 14px;
+    font-weight: 500;
     color: var(--fg-2);
-    text-decoration: none;
+    background: transparent;
     border: none;
-    background: none;
     cursor: pointer;
-    border-radius: var(--radius-sm);
+    padding: 8px 12px;
+    border-radius: var(--radius-md);
     transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
-    white-space: nowrap;
   }
 
-  [data-theme="light"] .ag-nav-link,
-  :not([data-theme]) .ag-nav-link { color: var(--c-slate-700, #404040); }
-  [data-theme="dark"]  .ag-nav-link { color: var(--fg-2); }
-
-  .ag-nav-link:hover {
+  .nav-btn:hover,
+  .nav-btn[aria-expanded="true"] {
     color: var(--fg-1);
-    background: var(--bg-alt);
+    background: var(--panel-2);
   }
 
-  .ag-nav-link[aria-current="page"] {
+  .nav-btn[aria-current="page"] {
     color: var(--accent);
-    font-weight: var(--weight-semibold);
   }
 
-  .ag-caret-icon {
-    display: inline-flex;
-    align-items: center;
+  .nav-btn .chev {
     transition: transform var(--dur) var(--ease-out);
   }
-  .ag-browse-trigger[aria-expanded="true"] .ag-caret-icon {
-    transform: rotate(-180deg);
+
+  .nav-btn[aria-expanded="true"] .chev {
+    transform: rotate(180deg);
   }
 
-  /* ── Browse dropdown ────────────────────────────────────────────── */
-  .ag-browse-wrapper { position: relative; }
+  /* ── Dropdowns ──────────────────────────────────────────────────────── */
+  .browse-wrapper,
+  .resources-wrapper {
+    position: relative;
+  }
 
-  .ag-browse-panel {
+  .dropdown {
     position: absolute;
-    top: calc(100% + 8px);
-    left: -24px;
-    z-index: 300;
-    background: var(--bg);
-    border: 1px solid var(--border);
+    top: calc(100% - 4px);
+    background: var(--panel);
+    border: 1px solid var(--hair);
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-lg);
-    padding: var(--space-6);
-    min-width: min(960px, 92vw);
+    padding: 10px;
+    z-index: 55;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     transform: translateY(-6px);
-    transition:
-      opacity var(--dur) var(--ease-out),
-      visibility var(--dur) var(--ease-out),
-      transform var(--dur) var(--ease-out);
+    transition: opacity var(--dur) var(--ease-out), visibility var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
   }
 
-  .ag-browse-wrapper[data-open] .ag-browse-panel {
+  .browse-wrapper[data-open] .dropdown,
+  .resources-wrapper[data-open] .dropdown {
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
     transform: translateY(0);
   }
 
-  .ag-browse-grid {
+  /* Browse dropdown: 2×4 grid */
+  .dd-cats {
+    width: min(620px, 92vw);
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: var(--space-3);
-  }
-
-  @media (max-width: 1100px) {
-    .ag-browse-grid { grid-template-columns: repeat(2, 1fr); }
-    .ag-browse-panel { min-width: min(520px, 90vw); }
+    grid-template-columns: repeat(2, 1fr);
+    gap: 4px;
   }
 
-  .ag-browse-card {
+  .dd-item {
     display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-    padding: var(--space-3) var(--space-4);
+    gap: 12px;
+    align-items: flex-start;
+    padding: 10px 12px;
     border-radius: var(--radius-md);
+    cursor: pointer;
     text-decoration: none;
-    color: var(--fg-1);
-    border: 1px solid transparent;
-    transition:
-      background var(--dur) var(--ease-out),
-      border-color var(--dur) var(--ease-out),
-      transform var(--dur) var(--ease-out),
-      box-shadow var(--dur) var(--ease-out);
-  }
-
-  .ag-browse-card:hover {
-    background: var(--bg-alt);
-    border-color: var(--border);
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-md);
+    transition: background var(--dur) var(--ease-out);
   }
 
-  .ag-browse-card:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-    border-radius: var(--radius-md);
+  .dd-item:hover {
+    background: var(--panel-2);
   }
 
-  .ag-browse-cat-icon {
-    display: inline-flex;
+  .dd-item .ddi {
+    width: 32px;
+    height: 32px;
+    border-radius: var(--radius-sm);
+    background: var(--accent-soft);
     color: var(--accent);
-    line-height: 1;
+    display: grid;
+    place-items: center;
+    flex: none;
   }
 
-  .ag-browse-cat-name {
+  .dd-item b {
     font-size: 14px;
-    font-weight: var(--weight-semibold);
     color: var(--fg-1);
-    line-height: 1.2;
+    font-family: var(--font-display);
+    font-weight: 700;
+    display: block;
   }
 
-  .ag-browse-cat-blurb {
+  .dd-item span {
     font-size: 12px;
     color: var(--fg-3);
-    line-height: 1.45;
+    line-height: 1.4;
   }
 
-  /* ── Right-side icon buttons ────────────────────────────────────── */
-  .ag-nav-actions {
+  /* Resources dropdown: simple list */
+  .dd-res {
+    width: 250px;
+  }
+
+  .dd-simple {
     display: flex;
     align-items: center;
-    gap: var(--space-2);
+    gap: 10px;
+    padding: 9px 12px;
+    border-radius: var(--radius-md);
+    font-size: 14px;
+    color: var(--fg-1);
+    text-decoration: none;
+    cursor: pointer;
+    transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
+  }
+
+  .dd-simple:hover {
+    background: var(--panel-2);
+    color: var(--accent);
+  }
+
+  .dd-simple .ddi {
+    color: var(--fg-3);
+    transition: color var(--dur) var(--ease-out);
+  }
+
+  .dd-simple:hover .ddi {
+    color: var(--accent);
+  }
+
+  /* ── Search trigger ────────────────────────────────────────────────── */
+  .search-trigger {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    background: var(--panel-2);
+    border: 1px solid var(--hair);
+    color: var(--fg-2);
+    border-radius: var(--radius-md);
+    padding: 8px 10px;
+    font-size: 13px;
+    min-width: 200px;
+    transition: border-color var(--dur) var(--ease-out);
+  }
+
+  .search-trigger:hover {
+    border-color: var(--border-strong);
+  }
+
+  .search-trigger .kbd {
     margin-left: auto;
-    flex-shrink: 0;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    padding: 2px 6px;
+    border-radius: 5px;
+    background: var(--bg);
+    border: 1px solid var(--hair);
+    color: var(--fg-3);
   }
 
-  .ag-icon-btn {
+  /* ── Nav actions ────────────────────────────────────────────────────── */
+  .nav-actions {
+    margin-left: auto;
     display: flex;
     align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    padding: 0;
+    gap: 8px;
+  }
+
+  .nav-extra {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  /* ── Branch toggle ──────────────────────────────────────────────────── */
+  .branch {
+    display: inline-flex;
+    align-items: center;
+    border: 1px solid var(--hair);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    background: var(--panel);
+  }
+
+  .branch-btn {
+    border: none;
     background: transparent;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
-    color: var(--fg-2);
     cursor: pointer;
-    transition:
-      color var(--dur) var(--ease-out),
-      border-color var(--dur) var(--ease-out),
-      background var(--dur) var(--ease-out);
-    flex-shrink: 0;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--fg-3);
+    padding: 7px 11px;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
   }
 
-  .ag-icon-btn:hover {
+  .branch-btn:hover {
     color: var(--fg-1);
-    border-color: var(--accent);
-    background: var(--accent-soft);
   }
 
-  .ag-icon-btn:active { transform: scale(0.96); }
+  .branch-btn[aria-pressed="true"] {
+    background: var(--accent);
+    color: var(--accent-contrast);
+  }
+
+  .bdot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: currentColor;
+  }
+
+  /* ── Icon button ────────────────────────────────────────────────────── */
+  .icon-btn {
+    display: grid;
+    place-items: center;
+    width: 38px;
+    height: 38px;
+    cursor: pointer;
+    background: transparent;
+    border: 1px solid var(--hair);
+    border-radius: var(--radius-md);
+    color: var(--fg-2);
+    padding: 0;
+    transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
+  }
+
+  .icon-btn:hover {
+    color: var(--fg-1);
+    background: var(--panel-2);
+  }
 
-  .ag-icon-btn:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
+  /* Theme icon visibility */
+  .sun-icon {
+    display: none;
   }
 
-  /* ── Theme toggle icon visibility ───────────────────────────────── */
-  .ag-icon-sun  { display: none; }
-  .ag-icon-moon { display: inline-flex; align-items: center; }
+  .moon-icon {
+    display: inline-flex;
+  }
 
-  [data-theme="dark"]  .ag-icon-sun  { display: inline-flex; align-items: center; }
-  [data-theme="dark"]  .ag-icon-moon { display: none; }
-  [data-theme="light"] .ag-icon-sun  { display: none; }
-  [data-theme="light"] .ag-icon-moon { display: inline-flex; align-items: center; }
+  [data-theme="dark"] .sun-icon {
+    display: inline-flex;
+  }
 
-  /* ── Hamburger ──────────────────────────────────────────────────── */
-  .ag-hamburger-btn { display: none; }
+  [data-theme="dark"] .moon-icon {
+    display: none;
+  }
 
-  .ag-icon-close { display: none; }
-  .ag-icon-menu  { display: inline-flex; align-items: center; }
+  /* ── Hamburger (mobile only) ────────────────────────────────────────── */
+  .burger {
+    display: none;
+  }
 
-  [data-nav-hamburger][aria-expanded="true"] .ag-icon-close { display: inline-flex; align-items: center; }
-  [data-nav-hamburger][aria-expanded="true"] .ag-icon-menu  { display: none; }
+  .close-icon {
+    display: none;
+  }
 
-  /* ── Mobile overlay ─────────────────────────────────────────────── */
-  .ag-mobile-overlay {
+  .menu-icon {
+    display: inline-flex;
+  }
+
+  [data-nav-hamburger][aria-expanded="true"] .close-icon {
+    display: inline-flex;
+  }
+
+  [data-nav-hamburger][aria-expanded="true"] .menu-icon {
+    display: none;
+  }
+
+  /* ── Mobile overlay & drawer ────────────────────────────────────────── */
+  .drawer-scrim {
     position: fixed;
     inset: 0;
-    z-index: 150;
-    background: rgba(0, 0, 0, 0.45);
+    z-index: 90;
+    background: rgba(9, 9, 9, 0.5);
+    backdrop-filter: blur(3px);
     opacity: 0;
     visibility: hidden;
     transition: opacity var(--dur) var(--ease-out), visibility var(--dur) var(--ease-out);
   }
 
-  .ag-mobile-overlay[aria-hidden="false"] {
+  .drawer-scrim[aria-hidden="false"] {
     opacity: 1;
     visibility: visible;
   }
 
-  /* ── Mobile drawer ──────────────────────────────────────────────── */
-  .ag-mobile-drawer {
+  .drawer {
     position: fixed;
     top: 0;
     right: 0;
-    width: 100%;
-    height: 100dvh;
-    z-index: 200;
+    bottom: 0;
+    z-index: 91;
+    width: min(360px, 87vw);
     background: var(--bg);
-    border-left: 1px solid var(--border);
+    border-left: 1px solid var(--hair);
+    box-shadow: var(--shadow-xl);
+    display: flex;
+    flex-direction: column;
     overflow-y: auto;
     transform: translateX(100%);
     transition: transform var(--dur-slow) var(--ease-out);
   }
 
-  .ag-mobile-drawer[aria-hidden="false"] {
+  .drawer[aria-hidden="false"] {
     transform: translateX(0);
   }
 
-  .ag-drawer-content {
+  .drawer-head {
     display: flex;
-    flex-direction: column;
-    padding: calc(72px + var(--space-6)) var(--gutter) var(--space-10);
-    gap: var(--space-8);
-    min-height: 100%;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 16px;
+    border-bottom: 1px solid var(--hair);
+    position: sticky;
+    top: 0;
+    background: var(--bg);
+    z-index: 1;
   }
 
-  .ag-drawer-section-title {
-    font-family: var(--font-body);
-    font-size: var(--fs-eyebrow);
-    font-weight: var(--weight-semibold);
-    text-transform: uppercase;
-    letter-spacing: var(--tracking-eyebrow);
-    color: var(--fg-3);
-    margin: 0 0 var(--space-3) 0;
+  .drawer-body {
+    padding: 12px 12px 32px;
   }
 
-  .ag-drawer-cat-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: var(--space-2);
+  .drawer-sec {
+    margin-top: 16px;
+  }
+
+  .drawer-sec h6 {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--fg-3);
+    margin: 0 0 4px;
+    padding: 0 10px;
+    font-weight: 700;
   }
 
-  .ag-drawer-cat-item {
+  .drawer-link {
     display: flex;
     align-items: center;
-    gap: var(--space-2);
-    padding: var(--space-3) var(--space-4);
+    gap: 12px;
+    padding: 11px 10px;
     border-radius: var(--radius-md);
-    text-decoration: none;
     color: var(--fg-1);
+    text-decoration: none;
+    cursor: pointer;
     font-size: 15px;
-    font-weight: var(--weight-medium);
-    border: 1px solid var(--border);
-    transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
+    transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
   }
 
-  .ag-drawer-cat-icon {
-    display: inline-flex;
+  .drawer-link:hover,
+  .drawer-link.active {
+    background: var(--panel-2);
     color: var(--accent);
-    flex-shrink: 0;
   }
 
-  .ag-drawer-cat-item:hover {
-    background: var(--bg-alt);
-    border-color: var(--accent);
+  .drawer-link .dli {
+    color: var(--accent);
+    display: grid;
+    place-items: center;
+    flex: none;
   }
 
-  .ag-drawer-nav-link {
-    display: block;
-    padding: var(--space-3) 0;
-    border-bottom: 1px solid var(--border);
-    color: var(--fg-1);
-    text-decoration: none;
-    font-size: 17px;
-    font-weight: var(--weight-medium);
-    transition: color var(--dur) var(--ease-out);
+  .drawer-link .ext {
+    margin-left: auto;
+    color: var(--fg-3);
   }
 
-  .ag-drawer-nav-link:last-child { border-bottom: none; }
-  .ag-drawer-nav-link:hover { color: var(--accent); }
-
-  .ag-drawer-theme-btn {
+  .drawer-row {
     display: flex;
     align-items: center;
-    gap: var(--space-3);
-    width: 100%;
-    padding: var(--space-4);
-    background: var(--bg-alt);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-    color: var(--fg-1);
-    font-size: 15px;
-    font-weight: var(--weight-medium);
-    font-family: var(--font-body);
-    cursor: pointer;
-    transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
+    justify-content: space-between;
+    padding: 12px 10px;
   }
 
-  .ag-drawer-theme-btn:hover { background: var(--bg-muted); border-color: var(--accent); }
-  .ag-drawer-theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  .drawer-row .rl {
+    font-size: 13px;
+    color: var(--fg-2);
+    font-weight: 600;
+  }
 
-  .ag-drawer-theme-label { flex: 1; text-align: left; }
-  .ag-drawer-theme-label--light,
-  .ag-drawer-theme-label--dark { display: none; }
+  /* ── Responsive ────────────────────────────────────────────────────── */
+  @media (max-width: 1024px) {
+    .nav-primary {
+      display: none;
+    }
 
-  [data-theme="light"] .ag-drawer-theme-label--light { display: block; }
-  [data-theme="dark"]  .ag-drawer-theme-label--dark  { display: block; }
-  :not([data-theme])   .ag-drawer-theme-label--light { display: block; }
+    .nav-extra {
+      display: none;
+    }
 
-  /* ── Responsive breakpoints ─────────────────────────────────────── */
-  @media (max-width: 960px) {
-    .ag-nav-desktop { display: none; }
-    .ag-hamburger-btn { display: flex; }
-  }
+    .burger {
+      display: flex;
+    }
+
+    .search-trigger {
+      min-width: auto;
+      padding: 8px;
+    }
 
-  @media (min-width: 961px) {
-    .ag-mobile-overlay,
-    .ag-mobile-drawer { display: none; }
+    .search-trigger .stxt,
+    .search-trigger .kbd {
+      display: none;
+    }
   }
 
-  @media (max-width: 480px) {
-    .ag-brand-text { display: none; }
+  @media (max-width: 1024px) {
+    body.ag-drawer-open {
+      overflow: hidden;
+    }
   }
 
-  @media (max-width: 960px) {
-    :global(body.ag-drawer-open) { overflow: hidden; }
+  @media (min-width: 1025px) {
+    .drawer-scrim,
+    .drawer {
+      display: none;
+    }
   }
 </style>
diff --git a/website/src/components/AwesomeGithub/Icon.astro b/website/src/components/AwesomeGithub/Icon.astro
index 6fe75684..c5d59881 100644
--- a/website/src/components/AwesomeGithub/Icon.astro
+++ b/website/src/components/AwesomeGithub/Icon.astro
@@ -1,35 +1,21 @@
 ---
-import { readFileSync } from "node:fs";
-import { fileURLToPath } from "node:url";
+import { getIconSvg } from "../../lib/icons";
 
 interface Props {
   name: string;
   size?: number;
-  weight?: "regular" | "bold" | "fill" | "light" | "thin";
   class?: string;
 }
 
-const { name, size = 24, weight = "regular", class: className } = Astro.props;
+const { name, size = 24, class: className } = Astro.props;
 
-let svgContent = "";
-try {
-  const svgPath = fileURLToPath(
-    import.meta.resolve(`@phosphor-icons/core/assets/${weight}/${name}.svg`),
-  );
-  const raw = readFileSync(svgPath, "utf-8");
-  svgContent = raw
-    .replace(/\bwidth="\d+"/, `width="${size}"`)
-    .replace(/\bheight="\d+"/, `height="${size}"`);
-} catch (err) {
-  console.warn(`[Icon.astro] Missing Phosphor icon: "${weight}/${name}"`, err);
-  svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="${size}" height="${size}" fill="currentColor"></svg>`;
-}
+const svgContent = getIconSvg(name, size);
 ---
 
-<span class:list={["ph-icon", className]} aria-hidden="true" set:html={svgContent} />
+<span class:list={["ag-icon", className]} aria-hidden="true" set:html={svgContent} />
 
 <style>
-  .ph-icon {
+  .ag-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -37,7 +23,7 @@ try {
     line-height: 1;
   }
 
-  .ph-icon svg {
+  .ag-icon svg {
     display: block;
   }
 </style>
diff --git a/website/src/lib/icons.ts b/website/src/lib/icons.ts
new file mode 100644
index 00000000..30623f1c
--- /dev/null
+++ b/website/src/lib/icons.ts
@@ -0,0 +1,118 @@
+/**
+ * Custom Heroicons-style SVG icon library
+ * 24×24 viewBox, stroke style (not filled)
+ * Source: spec icons.jsx
+ */
+
+interface IconDef {
+  path: string;
+  viewBox?: string;
+}
+
+const icons: Record<string, IconDef> = {
+  // Category icons (8)
+  robot: {
+    path: `<rect x="4" y="8" width="16" height="11" rx="2"/><path d="M12 8V5M9 5h6M9 13h.01M15 13h.01M9 16h6"/>`,
+  },
+  book: {
+    path: `<path d="M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2zM19 3v16"/>`,
+  },
+  chat: {
+    path: `<path d="M21 12a8 8 0 0 1-8 8H6l-3 2v-5a8 8 0 1 1 18-5z"/><path d="M8 11h8M8 14h5"/>`,
+  },
+  sparkles: {
+    path: `<path d="M12 4l1.6 4.4L18 10l-4.4 1.6L12 16l-1.6-4.4L6 10l4.4-1.6zM18 15l.8 2.2L21 18l-2.2.8L18 21l-.8-2.2L15 18l2.2-.8z"/>`,
+  },
+  shield: {
+    path: `<path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z"/><path d="M9.5 12l1.8 1.8L15 10"/>`,
+  },
+  workflow: {
+    path: `<rect x="3" y="3" width="6" height="6" rx="1.5"/><rect x="15" y="15" width="6" height="6" rx="1.5"/><path d="M6 9v3a3 3 0 0 0 3 3h6"/>`,
+  },
+  puzzle: {
+    path: `<path d="M10 4a1.5 1.5 0 0 1 3 0c0 .8.7 1 1.5 1H17v2.5c0 .8.2 1.5 1 1.5a1.5 1.5 0 0 1 0 3c-.8 0-1 .7-1 1.5V17h-2.5c-.8 0-1.5.2-1.5 1a1.5 1.5 0 0 1-3 0c0-.8-.7-1-1.5-1H5v-2.5c0-.8-.2-1.5-1-1.5a1.5 1.5 0 0 1 0-3c.8 0 1-.7 1-1.5V5h2.5C8.3 5 9 4.8 9 4z"/>`,
+  },
+  wrench: {
+    path: `<path d="M15 7a4 4 0 0 0-5 5l-6 6 2 2 6-6a4 4 0 0 0 5-5l-2.5 2.5L12 12l-1-2.5z"/>`,
+  },
+
+  // UI icons
+  "magnifying-glass": {
+    path: `<circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/>`,
+  },
+  search: {
+    path: `<circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/>`,
+  },
+  sun: {
+    path: `<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/>`,
+  },
+  moon: {
+    path: `<path d="M20 14.5A8 8 0 0 1 9.5 4 8 8 0 1 0 20 14.5z"/>`,
+  },
+  list: {
+    path: `<path d="M4 6h16M4 12h16M4 18h16"/>`,
+  },
+  menu: {
+    path: `<path d="M4 6h16M4 12h16M4 18h16"/>`,
+  },
+  x: {
+    path: `<path d="M6 6l12 12M18 6L6 18"/>`,
+  },
+  close: {
+    path: `<path d="M6 6l12 12M18 6L6 18"/>`,
+  },
+  "chevron-down": {
+    path: `<path d="M6 9l6 6 6-6"/>`,
+  },
+  "caret-down": {
+    path: `<path d="M6 9l6 6 6-6"/>`,
+  },
+  github: {
+    path: `<path d="M9 19c-4 1.2-4-2-6-2.5M15 21v-3.5c0-1 .2-1.6-.5-2.2 2.3-.3 4.5-1.2 4.5-5a3.9 3.9 0 0 0-1-2.7 3.6 3.6 0 0 0-.1-2.7s-.9-.3-2.9 1a10 10 0 0 0-5 0C7 3.6 6.1 3.9 6.1 3.9a3.6 3.6 0 0 0-.1 2.7A3.9 3.9 0 0 0 5 9.3c0 3.8 2.2 4.7 4.5 5-.5.5-.5 1-.5 1.6V21"/>`,
+  },
+  external: {
+    path: `<path d="M14 4h6v6M20 4l-9 9M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4"/>`,
+  },
+  bolt: {
+    path: `<path d="M13 3L5 13h6l-1 8 8-10h-6z"/>`,
+  },
+  download: {
+    path: `<path d="M12 3v12M7 10l5 5 5-5M5 21h14"/>`,
+  },
+  layers: {
+    path: `<path d="M12 3l9 5-9 5-9-5zM3 13l9 5 9-5M3 16.5l9 5 9-5"/>`,
+  },
+
+  // Icon aliases for compatibility with existing catalogues and pages
+  "book-open": {
+    path: `<path d="M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2zM19 3v16"/>`,
+  },
+  "chat-circle": {
+    path: `<path d="M21 12a8 8 0 0 1-8 8H6l-3 2v-5a8 8 0 1 1 18-5z"/><path d="M8 11h8M8 14h5"/>`,
+  },
+  sparkle: {
+    path: `<path d="M12 4l1.6 4.4L18 10l-4.4 1.6L12 16l-1.6-4.4L6 10l4.4-1.6zM18 15l.8 2.2L21 18l-2.2.8L18 21l-.8-2.2L15 18l2.2-.8z"/>`,
+  },
+  "git-branch": {
+    path: `<path d="M6 3v9a3 3 0 0 0 3 3h6m0 0a3 3 0 0 0 3-3v-9M15 3v3m0 9v3M9 12v3M9 3v3"/>`,
+  },
+  "puzzle-piece": {
+    path: `<path d="M10 4a1.5 1.5 0 0 1 3 0c0 .8.7 1 1.5 1H17v2.5c0 .8.2 1.5 1 1.5a1.5 1.5 0 0 1 0 3c-.8 0-1 .7-1 1.5V17h-2.5c-.8 0-1.5.2-1.5 1a1.5 1.5 0 0 1-3 0c0-.8-.7-1-1.5-1H5v-2.5c0-.8-.2-1.5-1-1.5a1.5 1.5 0 0 1 0-3c.8 0 1-.7 1-1.5V5h2.5C8.3 5 9 4.8 9 4z"/>`,
+  },
+  "cooking-pot": {
+    path: `<path d="M7 4v6a4 4 0 0 0 4 4h2a4 4 0 0 0 4-4V4M9 20h6M8 4h8a2 2 0 0 1 2 2v1H6V6a2 2 0 0 1 2-2z"/>`,
+  },
+  books: {
+    path: `<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20M4 19.5A2.5 2.5 0 0 0 6.5 22H20M4 19.5V7a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6.5M20 10V7a2 2 0 0 0-2-2h-5.5"/>`,
+  },
+};
+
+export function getIconSvg(name: string, size: number = 24): string {
+  const icon = icons[name];
+  if (!icon) {
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${size}" height="${size}" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></svg>`;
+  }
+
+  const viewBox = icon.viewBox || "0 0 24 24";
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}" width="${size}" height="${size}" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">${icon.path}</svg>`;
+}
diff --git a/website/src/styles/awesome-github.css b/website/src/styles/awesome-github.css
index 47335aef..1e1a1b4f 100644
--- a/website/src/styles/awesome-github.css
+++ b/website/src/styles/awesome-github.css
@@ -103,6 +103,11 @@
   --accent-contrast: var(--c-white);
   --highlight:       var(--c-light-blue);
 
+  /* Surface tokens (flip with theme) */
+  --panel:           #fff;
+  --panel-2:         var(--c-slate-50);
+  --hair:            var(--border);
+
   /* === RADII ================================================== */
   --radius-xs:    2px;
   --radius-sm:    4px;
@@ -225,6 +230,11 @@
   --accent-soft:     rgba(123,231,255,0.18);
   --accent-contrast: var(--c-black);
   --highlight:       var(--c-light-blue);
+
+  /* Surface tokens (dark mode) */
+  --panel:           #16171D;
+  --panel-2:         #1B1C23;
+  --hair:            rgba(255,255,255,.09);
 }
 
 /* ──────────────────────────────────────────────────────────────────