diff --git a/presentation/learning-journey/index.html b/presentation/learning-journey/index.html
index 2fe18d2..009329b 100644
--- a/presentation/learning-journey/index.html
+++ b/presentation/learning-journey/index.html
@@ -158,46 +158,63 @@
         <p style="font-size: 1rem; color: #aaa; margin-bottom: 0; font-style: italic;">I'll unpack each of these as we go &mdash; for now, just let them wash over you.</p>
         <div style="position: relative; width: 100%; height: calc(100vh - 200px); min-height: 480px; overflow: hidden;">
 
-            <!-- Row 1 (top cluster) -->
-            <span style="position: absolute; top: 4%; left: 12%; transform: rotate(-4deg); background: #1565c0; color: #fff; padding: 10px 20px; border-radius: 24px; font-size: 1.25rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">vibe coding</span>
+            <!-- ===== HERO TIER: Blue chips (bigger, bolder, dominant) ===== -->
+            <!-- vibe coding — top-left anchor -->
+            <span style="position: absolute; top: 3%; left: 5%; transform: rotate(-3deg); background: #1565c0; color: #fff; padding: 14px 28px; border-radius: 28px; font-size: 1.6rem; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 18px rgba(21,101,192,0.45), 0 0 0 2px rgba(21,101,192,0.2);">vibe coding</span>
 
-            <span style="position: absolute; top: 2%; left: 45%; transform: rotate(3deg); background: #7b1fa2; color: #fff; padding: 8px 16px; border-radius: 24px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">agentic engineering</span>
+            <!-- agentic engineering — top-right -->
+            <span style="position: absolute; top: 2%; left: 52%; transform: rotate(4deg); background: #1565c0; color: #fff; padding: 14px 28px; border-radius: 28px; font-size: 1.55rem; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 18px rgba(21,101,192,0.45), 0 0 0 2px rgba(21,101,192,0.2);">agentic engineering</span>
 
-            <span style="position: absolute; top: 5%; left: 72%; transform: rotate(-5deg); background: #e65100; color: #fff; padding: 8px 16px; border-radius: 24px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">hallucination</span>
+            <!-- progressive disclosure — centre-right, row 2 -->
+            <span style="position: absolute; top: 22%; left: 55%; transform: rotate(-4deg); background: #1565c0; color: #fff; padding: 14px 28px; border-radius: 28px; font-size: 1.5rem; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 18px rgba(21,101,192,0.45), 0 0 0 2px rgba(21,101,192,0.2);">progressive disclosure</span>
 
-            <!-- Row 1b -->
-            <span style="position: absolute; top: 11%; left: 68%; transform: rotate(4deg); background: #2e7d32; color: #fff; padding: 9px 18px; border-radius: 24px; font-size: 1.05rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">prompt engineering</span>
+            <!-- orchestration — left-centre -->
+            <span style="position: absolute; top: 42%; left: 6%; transform: rotate(3deg); background: #1565c0; color: #fff; padding: 14px 28px; border-radius: 28px; font-size: 1.6rem; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 18px rgba(21,101,192,0.45), 0 0 0 2px rgba(21,101,192,0.2);">orchestration</span>
 
-            <!-- Row 2 -->
-            <span style="position: absolute; top: 18%; left: 3%; transform: rotate(5deg); background: #2e7d32; color: #fff; padding: 9px 18px; border-radius: 24px; font-size: 1.1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">context engineering</span>
+            <!-- dumb zone — centre, row 4 -->
+            <span style="position: absolute; top: 60%; left: 36%; transform: rotate(-5deg); background: #1565c0; color: #fff; padding: 14px 28px; border-radius: 28px; font-size: 1.55rem; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 18px rgba(21,101,192,0.45), 0 0 0 2px rgba(21,101,192,0.2);">dumb zone</span>
 
-            <span style="position: absolute; top: 20%; left: 35%; transform: rotate(-3deg); background: #e65100; color: #fff; padding: 7px 14px; border-radius: 24px; font-size: 0.9rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">context bloat</span>
+            <!-- agentic workflows — bottom-right (NEW) -->
+            <span style="position: absolute; top: 72%; left: 58%; transform: rotate(4deg); background: #1565c0; color: #fff; padding: 14px 28px; border-radius: 28px; font-size: 1.5rem; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 18px rgba(21,101,192,0.45), 0 0 0 2px rgba(21,101,192,0.2);">agentic workflows</span>
 
-            <span style="position: absolute; top: 17%; left: 58%; transform: rotate(4deg); background: #1565c0; color: #fff; padding: 11px 22px; border-radius: 24px; font-size: 1.3rem; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">progressive disclosure</span>
+            <!-- ===== SUPPORTING TIER: Purple chips (smaller, softer) ===== -->
+            <!-- MCP -->
+            <span style="position: absolute; top: 14%; left: 3%; transform: rotate(5deg); background: #7b1fa2; color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.18);">MCP</span>
 
-            <!-- Row 3 (middle) -->
-            <span style="position: absolute; top: 35%; left: 8%; transform: rotate(-5deg); background: #2e7d32; color: #fff; padding: 10px 20px; border-radius: 24px; font-size: 1.15rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">context rot</span>
+            <!-- hooks -->
+            <span style="position: absolute; top: 31%; left: 46%; transform: rotate(-4deg); background: #7b1fa2; color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.18);">hooks</span>
 
-            <span style="position: absolute; top: 37%; left: 30%; transform: rotate(6deg); background: #7b1fa2; color: #fff; padding: 12px 24px; border-radius: 24px; font-size: 1.4rem; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">orchestration</span>
+            <!-- harness (was blue, now purple) -->
+            <span style="position: absolute; top: 52%; left: 64%; transform: rotate(3deg); background: #7b1fa2; color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.18);">harness</span>
 
-            <span style="position: absolute; top: 33%; left: 60%; transform: rotate(-3deg); background: #e65100; color: #fff; padding: 8px 16px; border-radius: 24px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">one-shot prompting</span>
+            <!-- compaction (was blue, now purple) -->
+            <span style="position: absolute; top: 80%; left: 8%; transform: rotate(-3deg); background: #7b1fa2; color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.18);">compaction</span>
 
-            <!-- Row 3b -->
-            <span style="position: absolute; top: 42%; left: 62%; transform: rotate(5deg); background: #2e7d32; color: #fff; padding: 9px 18px; border-radius: 24px; font-size: 1.05rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">AI slop</span>
+            <!-- ===== SUPPORTING TIER: Green chips ===== -->
+            <!-- context engineering -->
+            <span style="position: absolute; top: 8%; left: 28%; transform: rotate(-2deg); background: #2e7d32; color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.18);">context engineering</span>
 
-            <!-- Row 4 -->
-            <span style="position: absolute; top: 52%; left: 2%; transform: rotate(3deg); background: #7b1fa2; color: #fff; padding: 8px 16px; border-radius: 24px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">MCP</span>
+            <!-- context rot -->
+            <span style="position: absolute; top: 36%; left: 30%; transform: rotate(5deg); background: #2e7d32; color: #fff; padding: 7px 14px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.18);">context rot</span>
 
-            <span style="position: absolute; top: 50%; left: 18%; transform: rotate(-6deg); background: #2e7d32; color: #fff; padding: 10px 20px; border-radius: 24px; font-size: 1.2rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">dumb zone</span>
+            <!-- prompt engineering -->
+            <span style="position: absolute; top: 55%; left: 3%; transform: rotate(-4deg); background: #2e7d32; color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.18);">prompt engineering</span>
 
-            <span style="position: absolute; top: 54%; left: 42%; transform: rotate(4deg); background: #1565c0; color: #fff; padding: 9px 18px; border-radius: 24px; font-size: 1.05rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">harness</span>
+            <!-- AI slop -->
+            <span style="position: absolute; top: 68%; left: 24%; transform: rotate(4deg); background: #2e7d32; color: #fff; padding: 7px 14px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.18);">AI slop</span>
 
-            <span style="position: absolute; top: 51%; left: 62%; transform: rotate(-3deg); background: #e65100; color: #fff; padding: 11px 22px; border-radius: 24px; font-size: 1.25rem; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">token burn</span>
+            <!-- ===== SUPPORTING TIER: Amber chips ===== -->
+            <!-- hallucination -->
+            <span style="position: absolute; top: 5%; left: 78%; transform: rotate(-5deg); background: #e65100; color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.18);">hallucination</span>
 
-            <!-- Row 5 (bottom cluster) -->
-            <span style="position: absolute; top: 68%; left: 10%; transform: rotate(5deg); background: #7b1fa2; color: #fff; padding: 11px 22px; border-radius: 24px; font-size: 1.3rem; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">hooks</span>
+            <!-- context bloat -->
+            <span style="position: absolute; top: 20%; left: 22%; transform: rotate(3deg); background: #e65100; color: #fff; padding: 7px 14px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.18);">context bloat</span>
 
-            <span style="position: absolute; top: 70%; left: 35%; transform: rotate(-5deg); background: #1565c0; color: #fff; padding: 8px 16px; border-radius: 24px; font-size: 0.9rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">compaction</span>
+            <!-- one-shot prompting -->
+            <span style="position: absolute; top: 45%; left: 52%; transform: rotate(-3deg); background: #e65100; color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.18);">one-shot prompting</span>
+
+            <!-- token burn -->
+            <span style="position: absolute; top: 81%; left: 42%; transform: rotate(5deg); background: #e65100; color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.18);">token burn</span>
 
         </div>
     </div>