diff --git a/design.md b/design.md
new file mode 100644
index 0000000..a6813c8
--- /dev/null
+++ b/design.md
@@ -0,0 +1,110 @@
+# Design System — Ryan Moore (ryantmoore.ca)
+
+**Style:** Swiss / International Typographic Style  
+**Principle:** One typeface, expressed through weight and size only. Flush-left grid. Generous whitespace. Restrained brand-blue accent.
+
+---
+
+## Typeface
+
+**Archivo Variable** (`/public/fonts/archivo-variable-latin.woff2`)  
+Self-hosted. Latin subset. Weight axis: 100–900. Loaded via `@font-face` in `global.css`, preloaded in `Base.astro`.
+
+One family across the entire site — display, body, labels, UI. No secondary typefaces.
+
+```css
+--display: "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
+--sans:    "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
+--label:   "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
+```
+
+---
+
+## Type Scale
+
+1.25 ratio (Major Third), anchored at 1rem / 16px.  
+`size = 1rem × 1.25ⁿ`
+
+| Token         | Value        | Pixels  | Usage                                    |
+|---------------|-------------|---------|------------------------------------------|
+| `--text-2xs`  | 0.64rem      | 10.24px | Diagram sub-labels, micro tags           |
+| `--text-xs`   | 0.8rem       | 12.8px  | Kickers, nav links, meta labels, tags    |
+| `--text-sm`   | 0.875rem     | 14px    | Secondary body, button text              |
+| `--text-base` | 1rem         | 16px    | Primary body copy, form inputs           |
+| `--text-lg`   | 1.25rem      | 20px    | Card headings, service titles, timeline  |
+| `--text-xl`   | 1.5625rem    | 25px    | Sub-headings, pull-quote minimum         |
+| `--text-2xl`  | 1.953rem     | 31.25px | Section h2 minimum, post titles         |
+| `--text-3xl`  | 2.441rem     | 39px    | Section h2 maximum, case study headings  |
+| `--text-4xl`  | 3.052rem     | 48.8px  | Hero baseline, h1 minimum               |
+| `--text-5xl`  | 3.815rem     | 61px    — Hero mid, case study title max |
+| `--text-6xl`  | 4.768rem     | 76.3px  | Hero headline maximum                    |
+
+**Rule:** Never hardcode a `font-size`. Use a scale token or `clamp(token, vw, token)`.
+
+---
+
+## Weights
+
+Restrained set — four stops only:
+
+| Weight | Use                                                        |
+|--------|------------------------------------------------------------|
+| 400    | Body copy, prose paragraphs                                |
+| 500    | Nav links, kicker labels, button text                      |
+| 700    | Headings (h1–h3), section titles, card headings            |
+| 800    | Hero headline, large display numerics (price, metrics)     |
+
+---
+
+## Leading & Tracking
+
+| Context             | `line-height` | `letter-spacing`        |
+|---------------------|---------------|-------------------------|
+| Body copy           | 1.6           | default (0)             |
+| Prose paragraphs    | 1.75          | default (0)             |
+| Display headings    | 0.96–1.02     | −0.025em to −0.04em     |
+| Kickers / labels    | default       | +0.22em (tracked caps)  |
+| Nav / UI labels     | default       | +0.03–0.05em            |
+
+---
+
+## Grid & Layout
+
+- **Max width:** `--wrap: 1180px`, centered with `margin-inline: auto`
+- **Narrow column:** `820px` for prose, lab posts, case study body
+- **Gutter:** `--gut: clamp(1.25rem, 4vw, 3rem)` — both sides
+- **Default alignment:** flush-left / ragged-right everywhere
+- **Center alignment:** only for pull-quotes (`.quotes`) — deliberate typographic pause
+
+---
+
+## Colour
+
+One accent, always `--accent: #1f4fff`.
+
+| Token           | Value      | Role                               |
+|-----------------|------------|------------------------------------|
+| `--ink`         | `#f7f5f0`  | Page background                    |
+| `--ink-2`       | `#fffefb`  | Raised panels, cards               |
+| `--ink-3`       | `#efece4`  | Hover / alt fill                   |
+| `--paper`       | `#14140f`  | Primary text                       |
+| `--paper-dim`   | `#51504a`  | Secondary text                     |
+| `--paper-faint` | `#6d6b60`  | Tertiary text (min WCAG AA on ink) |
+| `--accent`      | `#1f4fff`  | Brand blue — the one signal colour |
+| `--accent-2`    | `#1a3fd6`  | Accent hover / pressed             |
+| `--accent-hi`   | `#5a86ff`  | Accent on dark hero                |
+
+---
+
+## Pages Covered
+
+Every page and component in the site inherits from `global.css` via `Base.astro`. The type system applies to:
+
+- **Home (`/`)** — hero, work rows, projects grid, services, timeline, audit section, contact form
+- **Case studies (`/work/[slug]`)** — hero, meta table, metrics, prose body, next-study footer
+- **Lab index (`/lab/`)** — header, post list rows
+- **Lab posts (`/lab/[slug]`)** — prose body, post meta
+- **404** — error page
+- **Nav** — brand mark, name, links, CTA
+- **Footer** — meta, links
+- **Schematic** (`Schematic.astro`) — SVG labels inherit `--label` / `--display` tokens; px sizes intentionally kept for SVG coordinate space
diff --git a/public/fonts/archivo-variable-latin.woff2 b/public/fonts/archivo-variable-latin.woff2
new file mode 100644
index 0000000..716d4ab
Binary files /dev/null and b/public/fonts/archivo-variable-latin.woff2 differ
diff --git a/public/fonts/hanken-grotesk-latin.woff2 b/public/fonts/hanken-grotesk-latin.woff2
deleted file mode 100644
index 518e2c4..0000000
Binary files a/public/fonts/hanken-grotesk-latin.woff2 and /dev/null differ
diff --git a/src/components/Schematic.astro b/src/components/Schematic.astro
index b76c23e..4989294 100644
--- a/src/components/Schematic.astro
+++ b/src/components/Schematic.astro
@@ -4,6 +4,14 @@
 // Ryan integrates orbit it and exchange data along glowing cables. The story is "I build
 // the product at the centre AND wire your whole stack into it", not "we run a platform".
 
+// AGENTIC LOOP — Direction B (July 2026 redesign):
+// Each agent action is a VISIBLE ROUND-TRIP: a packet leaves the core → reaches a tool
+// → a return packet traces a bowed return arc back on the OPPOSITE side of the cable,
+// so out+return form a lasso/eye shape. The cycle is in the motion itself, grounded in
+// the real tool stack (HubSpot, Stripe, Twilio, etc.) that already orbits the core.
+// A small circular-arrow glyph on the core marks where observations land.
+// No abstract decorative ring; no Plan/Act/Observe text labels.
+
 // Monochrome brand glyphs, tinted via CSS (fill: currentColor inherits .sch-glyph).
 // simple-icons live in a 24-unit box; Twilio's mark is a 64-unit box (ring + 4 dots).
 const GLYPHS: Record<string, { box: number; d?: string; twilio?: boolean }> = {
@@ -31,14 +39,7 @@ const C = { x: 600, y: 300 };
 const R_sun = 64; // cables meet the sun's body here
 const ORBIT = { inner: { rx: 300, ry: 118 }, outer: { rx: 480, ry: 172 } };
 
-// Services that orbit the product. `logo` -> a GLYPHS key. Each sits on a tilted
-// elliptical orbit at angle `deg` (0°=right, 90°=front/bottom); `s` is the depth scale
-// (front-of-orbit nodes read larger/brighter/nearer). `bow` curves its cable. Asymmetric
-// on purpose — a loose constellation, not a clock face.
-// `dir` is which way this service's data packets travel: most feed 'in' to the product,
-// but the services the hero outcomes name as destinations — bookings out to the calendar,
-// orders out to the books, texts out via Twilio — flow 'out', so the diagram shows the
-// two-way conversation the lede promises ("so they finally talk to each other").
+// Services that orbit the product.
 const sources = [
   { name: 'HubSpot',         logo: 'hubspot',    orbit: 'outer', deg: 145, s: 1.12, bow:  20, dir: 'in' },
   { name: 'Stripe',          logo: 'stripe',     orbit: 'outer', deg: 35,  s: 1.05, bow: -18, dir: 'in' },
@@ -57,7 +58,6 @@ type Node = (typeof sources)[number];
 function geom(n: Node) {
   const o = ORBIT[n.orbit as 'inner' | 'outer'];
   const t = (n.deg * Math.PI) / 180;
-  // the anchor sits exactly ON the orbit ellipse — the planet's true position
   const ax = C.x + o.rx * Math.cos(t);
   const ay = C.y + o.ry * Math.sin(t);
   const s = n.s;
@@ -68,8 +68,6 @@ function geom(n: Node) {
   const padL = 16 * s, gap = 11 * s, padR = 18 * s;
   const textW = n.name.length * font * 0.6;
   const w = padL + markerW + gap + textW + padR;
-  // the label card hangs just OUTSIDE its anchor (radially away from the sun), so the
-  // glowing anchor node stays visible on the orbit line with the card attached to it
   const vx = ax - C.x, vy = ay - C.y;
   const vl = Math.hypot(vx, vy) || 1;
   const ux = vx / vl, uy = vy / vl;
@@ -78,21 +76,19 @@ function geom(n: Node) {
   const cy = ay + uy * off;
   const x = cx - w / 2;
   const y = cy - h / 2;
-  // nearer nodes read brighter; further ones recede into the field
   const depth = +(0.55 + 0.45 * ((s - S_MIN) / (S_MAX - S_MIN))).toFixed(3);
   const labelX = x + padL + markerW + gap;
   return { ...n, ax, ay, cx, cy, s, font, h, w, x, y, markerW, padL, gap, depth, hasLogo, labelX };
 }
 const N = sources.map(geom);
 
-// each cable runs from the planet's orbit anchor inward to the sun's body, gently
-// bowed so the constellation reads as cables rather than rigid spokes.
-// packets travel anchor -> sun for dir:'in' cables, sun -> anchor for dir:'out'.
+// cable() — the outbound path from tool anchor to core surface.
+// bow > 0 curves left-of-centre; bow < 0 curves right-of-centre.
 function cable(n: ReturnType<typeof geom>) {
   const dx = C.x - n.ax, dy = C.y - n.ay;
   const dist = Math.hypot(dx, dy) || 1;
   const ux = dx / dist, uy = dy / dist;
-  const sx = n.ax + ux * 9, sy = n.ay + uy * 9; // leave the anchor dot crisp
+  const sx = n.ax + ux * 9, sy = n.ay + uy * 9;
   const ex = C.x - ux * R_sun, ey = C.y - uy * R_sun;
   const mx = (sx + ex) / 2, my = (sy + ey) / 2;
   const px = -(ey - sy), py = ex - sx;
@@ -102,8 +98,24 @@ function cable(n: ReturnType<typeof geom>) {
   return `M${r(sx)},${r(sy)} Q${r(qx)},${r(qy)} ${r(ex)},${r(ey)}`;
 }
 
-// the sun's rays — hand-varied angle / length / width / opacity so the corona reads
-// as a radiant star, not a uniform gear. R_ray is where rays begin (just off the body).
+// returnCable() — the return arc from core back to the tool, bowed on the OPPOSITE side.
+// Together with cable() this forms a lasso/eye shape: act→observe per interaction.
+function returnCable(n: ReturnType<typeof geom>) {
+  const dx = C.x - n.ax, dy = C.y - n.ay;
+  const dist = Math.hypot(dx, dy) || 1;
+  const ux = dx / dist, uy = dy / dist;
+  const sx = n.ax + ux * 9, sy = n.ay + uy * 9;
+  const ex = C.x - ux * R_sun, ey = C.y - uy * R_sun;
+  const mx = (sx + ex) / 2, my = (sy + ey) / 2;
+  const px = -(ey - sy), py = ex - sx;
+  const len = Math.hypot(px, py) || 1;
+  // Opposite bow: creates the return arc on the other side of the cable
+  const qx = mx - (px / len) * n.bow, qy = my - (py / len) * n.bow;
+  const r = (v: number) => v.toFixed(1);
+  // Return path runs core→tool (reversed start/end from cable())
+  return `M${r(ex)},${r(ey)} Q${r(qx)},${r(qy)} ${r(sx)},${r(sy)}`;
+}
+
 const R_ray = 72;
 const rays = [
   { ang: 5,   len: 34, w: 4,   o: 0.80 },
@@ -124,10 +136,13 @@ const rays = [
   { ang: 338, len: 26, w: 3,   o: 0.40 },
 ];
 
-// One source of truth per cable — base line, drawn-in current line, and the GSAP packet
-// all reference the same id/d. The path always runs service -> sun; `dir` tells the
-// packet which way to ride it.
-const cables = N.map((n, i) => ({ id: `cbl-${i}`, d: cable(n), dir: n.dir }));
+const cables = N.map((n, i) => ({
+  id: `cbl-${i}`,
+  retId: `ret-${i}`,
+  d: cable(n),
+  retD: returnCable(n),
+  dir: n.dir,
+}));
 const orbits = [ORBIT.inner, ORBIT.outer];
 ---
 
@@ -135,7 +150,7 @@ const orbits = [ORBIT.inner, ORBIT.outer];
   class="schematic"
   viewBox="0 64 1200 488"
   role="img"
-  aria-label="A solar-system diagram: a glowing core represents the client's website and app at the centre, with the services Ryan integrates (HubSpot, Stripe, Drupal, Twilio, Shopify, WordPress, QuickBooks, Google Calendar, Workiz and Jobber) orbiting it and exchanging data along glowing cables."
+  aria-label="An orchestration diagram: a glowing core represents the client's website and app at the centre; the services Ryan integrates (HubSpot, Stripe, Drupal, Twilio, Shopify, WordPress, QuickBooks, Google Calendar, Workiz and Jobber) orbit it and exchange data along glowing cables — each interaction is a visible round-trip, action packet out and observation packet back, showing the agentic act-observe loop grounded in the real tool stack."
 >
   <defs>
     <linearGradient id="flowGrad" x1="0" y1="0" x2="0" y2="1">
@@ -147,13 +162,16 @@ const orbits = [ORBIT.inner, ORBIT.outer];
       <stop offset="0.55" stop-color="#3d6fff" />
       <stop offset="1" stop-color="#1f4fff" />
     </radialGradient>
-    <!-- soft radial bloom with opacity falloff — the star's light, not a hard ring -->
     <radialGradient id="bloomGrad">
       <stop offset="0" stop-color="#cdddff" stop-opacity="0.55" />
       <stop offset="0.35" stop-color="#5a86ff" stop-opacity="0.28" />
       <stop offset="0.7" stop-color="#1f4fff" stop-opacity="0.1" />
       <stop offset="1" stop-color="#1f4fff" stop-opacity="0" />
     </radialGradient>
+    <!-- Return arc arrowhead — points toward the tool, marks observation landing -->
+    <marker id="retArrow" markerWidth="6" markerHeight="5" refX="5" refY="2.5" orient="auto" markerUnits="strokeWidth">
+      <path d="M0,0.5 L5,2.5 L0,4.5 Z" fill="#7fa0ff" opacity="0.70" />
+    </marker>
     <filter id="wireGlow" x="-60%" y="-60%" width="220%" height="220%">
       <feGaussianBlur stdDeviation="3" result="b" />
       <feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
@@ -166,6 +184,10 @@ const orbits = [ORBIT.inner, ORBIT.outer];
       <feGaussianBlur stdDeviation="2.6" result="b" />
       <feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
     </filter>
+    <filter id="retGlow" x="-80%" y="-80%" width="260%" height="260%">
+      <feGaussianBlur stdDeviation="2" result="b" />
+      <feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
+    </filter>
   </defs>
 
   <!-- sun corona glow -->
@@ -175,21 +197,24 @@ const orbits = [ORBIT.inner, ORBIT.outer];
   <!-- tilted orbit guides -->
   {orbits.map((o) => <ellipse class="orbit-guide" cx={C.x} cy={C.y} rx={o.rx} ry={o.ry} />)}
 
-  <!-- cables (faint base) -->
+  <!-- cables — faint base (both outbound and return arcs are always visible as structure) -->
   {cables.map((c) => <path class="wire-base wire-base--cable" d={c.d} />)}
+  {cables.map((c) => <path class="wire-base wire-base--return" d={c.retD} />)}
 
-  <!-- cables (bright current) — DrawSVG draws these in on load so the diagram assembles -->
+  <!-- cables — bright current (DrawSVG draws outbound in on load; returns are GSAP-controlled) -->
   {cables.map((c) => <path id={c.id} class="wire-flow wire-flow--cable" d={c.d} />)}
+  <!-- Return arc flow paths — faint, drawn by GSAP when the return packet travels them -->
+  {cables.map((c) => <path id={c.retId} class="wire-flow wire-flow--return" d={c.retD} />)}
 
-  <!-- data packets — GSAP MotionPath sends these inward along the cables to the core -->
+  <!-- Outbound data packets — GSAP MotionPath sends these toward the tool or core -->
   {cables.map((c) => <circle class="packet" data-path={`#${c.id}`} data-dir={c.dir} r="4.5" cx="0" cy="0" />)}
+  <!-- Return observation packets — travel the return arc back to the core -->
+  {cables.map((c) => <circle class="packet packet--return" data-ret-path={`#${c.retId}`} data-dir={c.dir} r="3.5" cx="0" cy="0" />)}
 
-  <!-- planet anchors — glowing nodes that sit exactly ON their orbit line (these stay
-       fixed while the label cards float, so the orbit relationship never breaks) -->
+  <!-- planet anchors — glowing nodes that sit exactly ON their orbit line -->
   {N.map((s) => <circle class="orbit-anchor" cx={s.ax.toFixed(1)} cy={s.ay.toFixed(1)} r={(3.4 + 2.6 * s.s).toFixed(1)} opacity={s.depth} />)}
 
-  <!-- external system nodes (top) — solid raised panels carrying real brand marks.
-       depth (opacity + scale) makes nearer nodes command attention, further ones recede -->
+  <!-- external system nodes (top) — solid raised panels carrying real brand marks -->
   {N.map((s) => (
     <g class="sch-node-g" opacity={s.depth}>
       <rect class="sch-node" x={s.x} y={s.y} width={s.w} height={s.h} rx={13 * s.s} />
@@ -242,6 +267,15 @@ const orbits = [ORBIT.inner, ORBIT.outer];
     <circle class="core-screen__dot" cx={C.x - 14} cy={C.y - 15} r="1.7" />
     <circle class="core-screen__dot" cx={C.x - 8} cy={C.y - 15} r="1.7" />
   </g>
+  <!-- Small circular-arrow glyph on the core: marks where observations land.
+       A tight arc (~300°) with arrowhead, sitting just outside the core screen. -->
+  <g class="core-loop-mark" aria-hidden="true">
+    <path
+      d="M 600,258 A 22,22 0 1 1 578.1,271"
+      class="core-loop-arc"
+      marker-end="url(#retArrow)"
+    />
+  </g>
 
   <!-- the deliverable, named at the centre of it all -->
   <text class="out-label" x={C.x} y="532" text-anchor="middle">YOUR WEBSITE &amp; APPS</text>
@@ -250,8 +284,7 @@ const orbits = [ORBIT.inner, ORBIT.outer];
 <script>
   // Motion is gated behind prefers-reduced-motion: no-preference, and skipped on phones
   // where the graphic is hidden (CSS, <=640px) so we don't animate an invisible element.
-  // When we bail, cables stay drawn, packets stay hidden (CSS opacity: 0), nodes stay still.
-  // GSAP is dynamically imported inside the gate so those visitors never download it.
+  // When we bail out: cables stay drawn, packets stay hidden (CSS opacity: 0), nodes still.
   const animate =
     window.matchMedia('(prefers-reduced-motion: no-preference)').matches &&
     !window.matchMedia('(max-width: 640px)').matches;
@@ -264,30 +297,71 @@ const orbits = [ORBIT.inner, ORBIT.outer];
     gsap.registerPlugin(MotionPathPlugin, DrawSVGPlugin);
 
     const currents = gsap.utils.toArray<SVGPathElement>('.wire-flow--cable');
-    const packets = gsap.utils.toArray<SVGCircleElement>('.packet');
-    const nodes = gsap.utils.toArray<SVGGElement>('.sch-node-g');
+    const returns  = gsap.utils.toArray<SVGPathElement>('.wire-flow--return');
+    const packets  = gsap.utils.toArray<SVGCircleElement>('.packet:not(.packet--return)');
+    const retPkts  = gsap.utils.toArray<SVGCircleElement>('.packet--return');
+    const nodes    = gsap.utils.toArray<SVGGElement>('.sch-node-g');
 
-    // SUPPORT — connectors draw in on load, so the diagram assembles rather than appears.
+    // SUPPORT — outbound connectors draw in on load, so the diagram assembles visibly.
     gsap.set(currents, { drawSVG: '0%' });
     gsap.to(currents, { drawSVG: '100%', duration: 0.9, ease: 'power2.out', stagger: 0.08 });
 
-    // PRIMARY — glowing data packets travel the cables continuously into / out of the core.
-    // dir:'in' packets ride the path forward (service -> sun); dir:'out' packets ride it in
-    // reverse (sun -> service), so the system reads as a conversation, not a sink.
-    // Each packet fades in as it leaves a node and out as it lands, so the loop never snaps.
+    // Return arcs start hidden — they appear only as a return packet travels them,
+    // then fade back to near-invisible so the base-wire faint trace carries the structure.
+    gsap.set(returns, { opacity: 0 });
+
+    // ROUND-TRIP LOOP — each tool interaction reads as act → observe:
+    //   1. Outbound packet travels toward / from the tool (same as before)
+    //   2. After the outbound trip, a return packet traces the opposite-bowed arc back,
+    //      revealing the return wire briefly so the eye traces the lasso shape.
+    // The round-trip is the loop — no abstract ring needed.
     packets.forEach((p, i) => {
-      const path = p.getAttribute('data-path')!;
-      const out = p.getAttribute('data-dir') === 'out';
-      const dur = 2.2 + (i % 3) * 0.35;
-      gsap.timeline({ repeat: -1, delay: 0.7 + i * 0.16 })
-        .set(p, { opacity: 0 })
+      const path     = p.getAttribute('data-path')!;
+      const retPkt   = retPkts[i];
+      const retPath  = retPkt.getAttribute('data-ret-path')!;
+      const retWire  = returns[i];
+      const out      = p.getAttribute('data-dir') === 'out';
+
+      // Outbound trip: same direction logic as before.
+      const durOut   = 2.2 + (i % 3) * 0.35;
+      // Return trip: slightly quicker (observation is faster than action), same stagger base.
+      const durRet   = durOut * 0.80;
+      const pause    = 0.15; // brief moment at the tool before the return
+      const totalCycle = durOut + pause + durRet + 0.5;
+      const delay    = 0.7 + i * 0.22;
+
+      // Outbound packet timeline
+      const tl = gsap.timeline({ repeat: -1, delay });
+      tl.set(p, { opacity: 0 })
         .to(p, {
-          duration: dur,
+          duration: durOut,
           ease: 'none',
           motionPath: { path, align: path, alignOrigin: [0.5, 0.5], start: out ? 1 : 0, end: out ? 0 : 1 },
         }, 0)
-        .to(p, { opacity: 1, duration: dur * 0.18 }, 0)
-        .to(p, { opacity: 0, duration: dur * 0.22 }, dur * 0.78);
+        .to(p, { opacity: 1, duration: durOut * 0.18 }, 0)
+        .to(p, { opacity: 0, duration: durOut * 0.22 }, durOut * 0.78);
+
+      // Return packet timeline: starts after the outbound trip + pause.
+      // The return wire flashes on as the packet travels, then fades back.
+      const rtl = gsap.timeline({ repeat: -1, delay: delay + durOut + pause });
+      rtl.set(retPkt, { opacity: 0 })
+         // Flash the return wire on
+         .to(retWire, { opacity: 0.45, duration: 0.15, ease: 'power1.in' }, 0)
+         .to(retPkt, {
+           duration: durRet,
+           ease: 'none',
+           motionPath: {
+             path: retPath,
+             align: retPath,
+             alignOrigin: [0.5, 0.5],
+             start: 0,
+             end: 1,
+           },
+         }, 0)
+         .to(retPkt, { opacity: 0.75, duration: durRet * 0.18 }, 0)
+         .to(retPkt, { opacity: 0, duration: durRet * 0.25 }, durRet * 0.75)
+         // Fade the return wire back out
+         .to(retWire, { opacity: 0, duration: 0.4, ease: 'power1.out' }, durRet * 0.75);
     });
 
     // SUPPORT — gentle, staggered float so nothing is ever dead still.
diff --git a/src/data/site.ts b/src/data/site.ts
index 5dfa721..bd7ad87 100644
--- a/src/data/site.ts
+++ b/src/data/site.ts
@@ -25,9 +25,10 @@ export const seo = {
 // What the connected system in the hero diagram actually gets a business owner —
 // plain-language outcomes, rendered as the caption row under the graphic.
 export const outcomes = [
-  'Bookings land in your calendar',
-  'Orders flow straight to your books',
-  'Nothing typed in twice',
+  'Reads what comes in and figures out what to do',
+  'Deals with the odd ones, flags you only when it matters',
+  'Sees a job through start to finish',
+  "Double-checks its own work before it reaches a customer",
 ];
 
 export const services = [
@@ -43,6 +44,10 @@ export const services = [
     title: 'Websites & web apps you run yourself',
     body: 'Fast is a feature. The sites I build score 100 on Google\'s PageSpeed test, on phones and desktops alike, and load in under a second. And you can update them yourself: change a price, post an update, swap a photo, with no developer on call.',
   },
+  {
+    title: 'Audits & fixing what you already have',
+    body: 'Sometimes the answer is not a new build. It is finding the two tools that should talk and do not, or the manual step that runs six times a week for no good reason. I map what you have, find what is slowing you down, and hand you a plain-English fix list — yours to use with any developer.',
+  },
 ];
 
 // Smaller, notable builds shown in the denser projects grid.
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index ffc4d8b..c8e5612 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -56,7 +56,9 @@ const year = new Date().getFullYear(); // build-time: site is fully static
   <meta name="twitter:description" content={description} />
   <meta name="twitter:image" content={ogImage} />
   <script type="application/ld+json" set:html={JSON.stringify(personSchema)} />
-  <link rel="preload" href="/fonts/hanken-grotesk-latin.woff2" as="font" type="font/woff2" crossorigin />
+  <!-- Archivo Variable: the ONE typeface used across the entire site (Swiss discipline).
+       Preloaded to eliminate FOUT on the hero headline — first thing a visitor reads. -->
+  <link rel="preload" href="/fonts/archivo-variable-latin.woff2" as="font" type="font/woff2" crossorigin />
 </head>
 <body>
   <a href="#main" class="skip-link">Skip to content</a>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 9ae2c3d..20d5d9d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -16,41 +16,45 @@ const quotes = testimonials.filter((t) => !t.draft);
 <Base>
   <!-- HERO -->
   <section class="hero">
-    <div class="wrap hero__head">
-      <span class="kicker reveal" style="margin-bottom: 1.5rem; display: inline-flex;">
-        Software engineer, {site.location}
-      </span>
-
-      <h1 class="hero__title serif reveal">
-        I build the <em>AI agent systems</em> businesses quietly <span class="u">run on</span>.
-      </h1>
-
-      <p class="hero__lede reveal">
-        I build AI agents that handle the repetitive work a business runs on:
-        sorting, scheduling, replying, following up. Then I wire them into the
-        tools you already use, so it all moves on its own. Twenty-five years connecting
-        business systems; now with agents orchestrating them.
-      </p>
+    <div class="wrap">
+      <div class="hero__inner">
+        <div class="hero__head">
+          <span class="kicker reveal" style="margin-bottom: 1.5rem; display: inline-flex;">
+            Software engineer, {site.location}
+          </span>
+
+          <h1 class="hero__title serif reveal">
+            I build the <em>AI agent systems</em> businesses quietly <span class="u">run on</span>.
+          </h1>
+
+          <p class="hero__lede reveal">
+            I build AI that works like a sharp new hire, not another app to babysit.
+            It handles the admin, the follow-ups, and the back-and-forth between the
+            tools you already use, and it makes the calls a good employee would. It
+            only comes to you when something genuinely needs you. Twenty-five years
+            connecting business systems, and I run a whole team of these on my own.
+          </p>
 
-      <div class="hero__cta reveal">
-        <a href={`mailto:${site.email}`} class="btn btn--primary">
-          Work with me <span class="arr">↗</span>
-        </a>
-        <a href="#work" class="btn btn--ghost">Selected work</a>
-      </div>
+          <div class="hero__cta reveal">
+            <a href="#contact" class="btn btn--primary">
+              Work with me <span class="arr">↗</span>
+            </a>
+            <a href="#work" class="btn btn--ghost">Selected work</a>
+          </div>
 
-      <div class="hero__status reveal">
-        <span class="led"></span> Available now, taking on a few new projects
-      </div>
-    </div>
+          <div class="hero__status reveal">
+            <span class="led"></span> Available now, taking on a few new projects
+          </div>
 
-    <div class="wrap">
-      <div class="hero__viz reveal">
-        <Schematic />
+          <ul class="hero__outcomes reveal">
+            {outcomes.map((o) => <li class="hero__outcome">{o}</li>)}
+          </ul>
+        </div>
+
+        <div class="hero__viz reveal">
+          <Schematic />
+        </div>
       </div>
-      <ul class="hero__outcomes reveal">
-        {outcomes.map((o) => <li class="hero__outcome">{o}</li>)}
-      </ul>
     </div>
   </section>
 
@@ -86,6 +90,20 @@ const quotes = testimonials.filter((t) => !t.draft);
     </div>
   </section>
 
+  <!-- MID-PAGE CTA — single conversion path: funnels to contact form -->
+  <section class="section cta-band">
+    <div class="wrap wrap--narrow">
+      <div class="cta-band__inner reveal">
+        <p class="cta-band__line serif">
+          Seen enough? <em>Let's talk about your project.</em>
+        </p>
+        <a href="#contact" class="btn btn--primary" data-prefill-audit>
+          Book an audit <span class="arr">↗</span>
+        </a>
+      </div>
+    </div>
+  </section>
+
   <!-- PROJECTS -->
   <section class="section section--raise" id="projects">
     <div class="wrap">
@@ -248,7 +266,7 @@ const quotes = testimonials.filter((t) => !t.draft);
   <!-- CONTACT -->
   <section class="section contact" id="contact">
     <div class="wrap wrap--narrow">
-      <span class="kicker kicker--plain reveal" style="justify-content: center; display: flex;">06 · Contact</span>
+      <span class="kicker kicker--plain reveal">06 · Contact</span>
       <h2 class="contact__title serif reveal" style="margin-top: 1.25rem;">
         Available for the <em>right</em> project.
       </h2>
diff --git a/src/styles/global.css b/src/styles/global.css
index 28d0cdc..f123cf1 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,28 +1,28 @@
 @import "tailwindcss";
 
 /* ============================================================
-   Ryan Moore — design system
-   "Field notes from a systems engineer"
-   Warm near-black · editorial serif · mono technical labels
+   Ryan Moore — design system (Swiss / International Typographic Style)
+   One typeface · weight contrast · modular scale · flush-left grid
+   See design.md at repo root for the full type system spec.
    ============================================================ */
 
-/* Hanken Grotesk, self-hosted: one variable file (wght 300–900, latin subset, no
-   italics — every <em> on the site is restyled upright). Keeps fonts.googleapis.com
-   and fonts.gstatic.com out of the critical path entirely; preloaded in Base.astro. */
+/* Archivo Variable — self-hosted, wght 100–900, latin subset.
+   One file covers every weight used on the site.
+   Preloaded in Base.astro to eliminate FOUT on the hero headline. */
 @font-face {
-  font-family: 'Hanken Grotesk';
+  font-family: 'Archivo';
   font-style: normal;
-  font-weight: 300 900;
+  font-weight: 100 900;
   font-display: swap;
-  src: url('/fonts/hanken-grotesk-latin.woff2') format('woff2');
+  src: url('/fonts/archivo-variable-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 :root {
   /* ---- surfaces (light, soft off-white) ---- */
-  --ink:        #f7f5f0;   /* page base */
-  --ink-2:      #fffefb;   /* raised cards / white panels */
-  --ink-3:      #efece4;   /* hover / alt fill */
+  --ink:        #f7f5f0;
+  --ink-2:      #fffefb;
+  --ink-3:      #efece4;
   --ink-4:      #e6e1d5;
   --line:       rgba(20, 20, 15, 0.10);
   --line-2:     rgba(20, 20, 15, 0.16);
@@ -35,18 +35,33 @@
   /* ---- accent — ONE signal colour, everywhere ---- */
   --accent:     #1f4fff;
   --accent-2:   #1a3fd6;
-  --accent-hi:  #5a86ff;   /* lighter tint of the same blue, for legibility on the dark hero */
+  --accent-hi:  #5a86ff;
   --accent-ink: #ffffff;
   --glow:       color-mix(in srgb, var(--accent) 36%, transparent);
 
-  /* ---- fonts — one family, weight contrast does the work ---- */
-  --display: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
-  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
-  /* label voice: same family, set in caps with tracking (no monospace) */
-  --label: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
+  /* ---- typeface — ONE family, Archivo variable ---- */
+  --display: "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
+  --sans:    "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
+  --label:   "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
+
+  /* ---- modular type scale (1.25 ratio, anchored at 1rem / 16px) ----
+     Steps follow: size = 1rem × 1.25^n
+     Use these tokens everywhere — never hardcode a font-size.
+  */
+  --text-2xs:  0.64rem;    /* 10.24px — diagram sublabels         */
+  --text-xs:   0.8rem;     /* 12.8px  — kickers, tags, meta       */
+  --text-sm:   0.875rem;   /* 14px    — secondary body            */
+  --text-base: 1rem;       /* 16px    — primary body              */
+  --text-lg:   1.25rem;    /* 20px    — large body, card headings */
+  --text-xl:   1.5625rem;  /* 25px    — h3 / sub-headings         */
+  --text-2xl:  1.953rem;   /* 31.25px — section h2                */
+  --text-3xl:  2.441rem;   /* 39px    — large section headings    */
+  --text-4xl:  3.052rem;   /* 48.8px  — h1 / hero headline base   */
+  --text-5xl:  3.815rem;   /* 61px    — hero headline mid         */
+  --text-6xl:  4.768rem;   /* 76.3px  — hero headline max         */
 
   /* ---- rhythm ---- */
-  --wrap: 1180px;
+  --wrap: 1320px;
   --gut: clamp(1.25rem, 4vw, 3rem);
 }
 
@@ -106,7 +121,7 @@ img, svg { display: block; max-width: 100%; }
   background: var(--accent);
   color: var(--accent-ink);
   font-family: var(--label);
-  font-size: 0.8rem;
+  font-size: var(--text-xs);
   font-weight: 600;
   letter-spacing: 0.05em;
   border-radius: 8px;
@@ -118,9 +133,10 @@ img, svg { display: block; max-width: 100%; }
 .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
 .wrap--narrow { max-width: 820px; }
 
+/* Swiss eyebrow label: UPPERCASE + generous tracking (the ITS micro-label trope) */
 .kicker {
   font-family: var(--label);
-  font-size: 0.72rem;
+  font-size: var(--text-xs);
   font-weight: 500;
   letter-spacing: 0.22em;
   text-transform: uppercase;
@@ -143,9 +159,9 @@ img, svg { display: block; max-width: 100%; }
 
 .serif { font-family: var(--display); font-optical-sizing: auto; }
 .accent { color: var(--accent); }
-.italic { font-style: italic; }
 
-h1, h2, h3 { font-family: var(--display); font-weight: 640; line-height: 1.02; letter-spacing: -0.025em; }
+/* headings — Archivo, tight leading, slightly negative tracking */
+h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.02; letter-spacing: -0.025em; }
 
 /* ---------- blueprint grid backdrop ---------- */
 .grid-bg {
@@ -179,30 +195,27 @@ h1, h2, h3 { font-family: var(--display); font-weight: 640; line-height: 1.02; l
 }
 .brand { display: inline-flex; align-items: baseline; gap: 0.55rem; }
 .brand__mark {
-  font-family: var(--label); font-weight: 700; font-size: 0.8rem;
+  font-family: var(--label); font-weight: 700; font-size: var(--text-xs);
   letter-spacing: 0.05em;
   border: 1px solid var(--line-2); border-radius: 5px;
   padding: 0.2rem 0.4rem; color: var(--accent);
 }
-.brand__name { font-family: var(--display); font-weight: 500; font-size: 1.05rem; letter-spacing: -0.01em; }
+.brand__name { font-family: var(--display); font-weight: 500; font-size: var(--text-base); letter-spacing: -0.01em; }
 .nav__links { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.25rem); }
 .nav__link {
-  font-family: var(--label); font-size: 0.78rem; letter-spacing: 0.04em;
+  font-family: var(--label); font-size: var(--text-xs); letter-spacing: 0.04em;
   color: var(--paper-dim); transition: color 0.2s;
   display: inline-flex; align-items: center; min-height: 44px;
 }
 .nav__link:hover { color: var(--paper); }
 .nav__cta {
-  font-family: var(--label); font-size: 0.76rem; letter-spacing: 0.03em;
+  font-family: var(--label); font-size: var(--text-xs); letter-spacing: 0.03em;
   color: var(--paper); border: 1px solid var(--line-2);
   padding: 0.5rem 0.9rem; border-radius: 7px; transition: all 0.2s;
 }
 .nav__cta:hover { border-color: var(--accent); color: var(--accent); }
 
-/* transparent variant while sitting over the dark hero (toggled by JS) */
-/* Over the dark hero the nav reads as airy white-on-dark, but it must still separate
-   from content scrolling beneath it. A dark glass scrim keyed to the hero's top colour
-   (#0a0e1c) is near-invisible at rest yet dims + frosts text that slides under on scroll. */
+/* transparent variant while sitting over the dark hero */
 .nav--ghost {
   background: linear-gradient(180deg, rgba(10, 14, 28, 0.66) 0%, rgba(10, 14, 28, 0.5) 55%, rgba(10, 14, 28, 0) 100%);
   backdrop-filter: blur(7px);
@@ -221,7 +234,7 @@ h1, h2, h3 { font-family: var(--display); font-weight: 640; line-height: 1.02; l
    ============================================================ */
 .btn {
   display: inline-flex; align-items: center; gap: 0.55rem;
-  font-family: var(--label); font-size: 0.84rem; font-weight: 500;
+  font-family: var(--label); font-size: var(--text-sm); font-weight: 500;
   letter-spacing: 0.02em; padding: 0.85rem 1.4rem; border-radius: 9px;
   transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.2s;
   will-change: transform;
@@ -234,13 +247,14 @@ h1, h2, h3 { font-family: var(--display); font-weight: 640; line-height: 1.02; l
 .btn:hover .arr { transform: translate(3px, -3px); }
 
 /* ============================================================
-   HERO
+   HERO — dark full-bleed band; Swiss: flush-left headline block
    ============================================================ */
-/* full-bleed dark Splunk-style band; the big radial graphic is the centrepiece */
 .hero {
   position: relative;
-  margin-top: -68px; /* slide up under the sticky (transparent) nav */
-  padding: calc(68px + clamp(2.5rem, 5vw, 4.5rem)) 0 clamp(4rem, 8vw, 7rem);
+  margin-top: -68px;
+  /* FIX: bump minimum extra clearance from 2.5rem → 4rem so kicker + headline
+     always sit at least 64px below the 68px nav at every breakpoint. */
+  padding: calc(68px + clamp(4rem, 5vw, 5rem)) 0 clamp(4rem, 8vw, 7rem);
   color: #fff;
   overflow: hidden;
   isolation: isolate;
@@ -260,28 +274,30 @@ h1, h2, h3 { font-family: var(--display); font-weight: 640; line-height: 1.02; l
 }
 .hero > * { position: relative; z-index: 1; }
 .hero .kicker { color: rgba(255, 255, 255, 0.75); }
-.hero__head { text-align: center; max-width: 900px; margin: 0 auto clamp(2.25rem, 4.5vw, 3.5rem); }
-/* the solar system breaks out of .wrap to span the viewport — a sun needs room to
-   radiate. left:50% + negative half-width margin centres it on the viewport without
-   touching transform (which .reveal animates). */
+/* Swiss: flush-left text block, not centred */
+/* Desktop: two-column grid — copy left, schematic right */
+.hero__inner {
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
+  gap: clamp(2rem, 5vw, 5rem);
+  align-items: center;
+}
+.hero__head {
+  text-align: left;
+}
 .hero__viz {
   position: relative;
-  width: min(1440px, 94vw);
-  left: 50%;
-  margin-left: calc(min(1440px, 94vw) / -2);
+  width: 100%;
 }
-/* the caption row under the diagram: what the connected system gets you, in plain
-   words. each outcome carries the same port-node marker as the kickers — the circuit
-   language, lit. this is the comprehension layer for non-technical visitors. */
 .hero__outcomes {
   list-style: none;
-  display: flex; justify-content: center; align-items: center;
+  display: flex; justify-content: flex-start; align-items: center;
   flex-wrap: wrap; gap: 0.9rem 2.75rem;
-  margin: 1.25rem auto 0;
+  margin: 1.75rem 0 0;
 }
 .hero__outcome {
   display: inline-flex; align-items: center; gap: 0.6rem;
-  font-family: var(--label); font-size: 0.88rem; letter-spacing: 0.02em;
+  font-family: var(--label); font-size: var(--text-sm); letter-spacing: 0.02em;
   color: rgba(255, 255, 255, 0.68);
 }
 .hero__outcome::before {
@@ -291,17 +307,24 @@ h1, h2, h3 { font-family: var(--display); font-weight: 640; line-height: 1.02; l
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-hi) 18%, transparent);
 }
 
-/* the constellation loses its impact when squeezed onto a phone — drop it there
-   (the JS skips its animation too, see Schematic.astro) and let the copy carry the hero.
-   the outcomes row stays: it is copy, and the best sales line in the hero. */
+/* FIX: stack hero to single column at ≤900px (catches 768px tablet).
+   Two-column only above 900px. */
+@media (max-width: 900px) {
+  .hero__inner { grid-template-columns: 1fr; }
+  .hero__outcomes { margin-top: 2rem; }
+  /* Tablet (641–900px): show schematic centred below copy at a capped width */
+  .hero__viz {
+    max-width: 520px;
+    margin-inline: auto;
+  }
+}
+/* Mobile ≤640px: hide schematic entirely (no room, no overflow) */
 @media (max-width: 640px) {
   .hero__viz { display: none; }
-  .hero__head { margin-bottom: 0; }
-  .hero__outcomes { margin-top: 2rem; }
 }
 .schematic { position: relative; z-index: 1; width: 100%; height: auto; display: block; overflow: visible; }
 
-/* nodes — solid raised navy panels that lift clearly off the hero bg (second tier) */
+/* schematic node styling */
 .sch-node {
   fill: #2c3c6b;
   stroke: rgba(155, 185, 255, 0.72);
@@ -312,9 +335,7 @@ h1, h2, h3 { font-family: var(--display); font-weight: 640; line-height: 1.02; l
 .core { fill: url(#coreGrad); stroke: rgba(255, 255, 255, 0.5); stroke-width: 2; filter: url(#coreGlow); }
 .core-ring { fill: none; stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.5; stroke-dasharray: 3 7; }
 .core-label { font-size: 27px; font-weight: 700; letter-spacing: -0.01em; }
-/* font-size is set per-node on the element for depth; do not hardcode it here */
 .sch-label { font-family: var(--label); font-weight: 600; fill: #ffffff; letter-spacing: 0.005em; }
-/* brand glyphs — single light tint, keeps the one-accent discipline */
 .sch-glyph { fill: #e6ecff; }
 .sch-label--strong { fill: #fff; font-weight: 600; font-size: 18px; }
 .sch-label--sub { font-size: 12px; fill: rgba(255, 255, 255, 0.66); letter-spacing: 0.06em; }
@@ -322,7 +343,7 @@ h1, h2, h3 { font-family: var(--display); font-weight: 640; line-height: 1.02; l
 .sch-label--onfill.sch-label--sub { fill: rgba(255, 255, 255, 0.82); }
 .in-dot { fill: #5a86ff; filter: url(#dotGlow); }
 
-/* wires — faint base + neon gradient current */
+/* wires */
 .wire-base { fill: none; stroke-linecap: round; stroke: rgba(150, 175, 255, 0.1); }
 .wire-base--in { stroke-width: 3.5; }
 .wire-base--main { stroke-width: 16; stroke: rgba(90, 130, 255, 0.2); }
@@ -361,14 +382,12 @@ h1, h2, h3 { font-family: var(--display); font-weight: 640; line-height: 1.02; l
 .spoke { fill: none; stroke: rgba(150, 175, 255, 0.14); stroke-width: 2; }
 .ring-label { font-family: var(--label); font-size: 12.5px; letter-spacing: 0.18em; font-weight: 600; fill: #aeb9e0; }
 
-/* vertical IPaaS-style flow: sources -> integration gear -> website/app devices */
+/* vertical IPaaS-style flow */
 .wire-base--cable { stroke-width: 2.5; }
-/* current lines are solid (no marching dash) — GSAP DrawSVG draws them in, packets carry the flow */
 .wire-flow--cable { stroke-width: 3; opacity: 0.55; stroke-dasharray: none; animation: none; }
 .packet { fill: #eaf1ff; opacity: 0; filter: url(#dotGlow); }
 .gear-body { fill: url(#coreGrad); stroke: rgba(255, 255, 255, 0.32); stroke-width: 1.5; }
 .gear-hub { fill: #0a0e1f; opacity: 0.55; }
-/* the star: varied rays + a soft bloom that pulses slowly (gated under reduced-motion) */
 .sun-ray { fill: #8aa8ff; }
 .sun-bloom {
   transform-box: fill-box; transform-origin: center;
@@ -378,13 +397,10 @@ h1, h2, h3 { font-family: var(--display); font-weight: 640; line-height: 1.02; l
   0%, 100% { opacity: 0.75; transform: scale(1); }
   50% { opacity: 1; transform: scale(1.05); }
 }
-/* planet anchors — live nodes pinned to the orbit lines */
 .orbit-anchor { fill: #d4e3ff; filter: url(#dotGlow); }
 .gear-core { fill: #d4e3ff; filter: url(#dotGlow); }
-/* the sun's corona — two soft layers behind the gear-core */
 .sun-halo { fill: #3d6fff; filter: blur(28px); opacity: 0.34; animation: breathe 3.6s ease-in-out infinite; }
 .sun-halo--wide { fill: #2f5bff; filter: blur(60px); opacity: 0.22; animation: none; }
-/* the website/app screen sitting in the sun's hub = the product you run on */
 .core-screen__frame { fill: rgba(8, 12, 28, 0.5); stroke: #d4e3ff; stroke-width: 2; }
 .core-screen__bar { stroke: rgba(212, 227, 255, 0.85); stroke-width: 2; }
 .core-screen__dot { fill: #d4e3ff; }
@@ -395,9 +411,38 @@ h1, h2, h3 { font-family: var(--display); font-weight: 640; line-height: 1.02; l
 .device-dot { fill: rgba(255, 255, 255, 0.55); }
 .out-label { font-family: var(--label); font-size: 13px; letter-spacing: 0.14em; fill: #aeb9e0; opacity: 0.6; }
 
+/* ---- Return arcs (round-trip agentic loop) ---- */
+.wire-base--return {
+  stroke-width: 1.5;
+  stroke: rgba(127, 160, 255, 0.07);
+  stroke-dasharray: 3 8;
+}
+.wire-flow--return {
+  fill: none;
+  stroke-linecap: round;
+  stroke: rgba(127, 160, 255, 0.55);
+  stroke-width: 2;
+  opacity: 0;
+  stroke-dasharray: none;
+  animation: none;
+  filter: url(#retGlow);
+}
+.packet--return {
+  fill: #7fa0ff;
+  opacity: 0;
+  filter: url(#dotGlow);
+}
+.core-loop-mark { pointer-events: none; }
+.core-loop-arc {
+  fill: none;
+  stroke: rgba(127, 160, 255, 0.55);
+  stroke-width: 1.6;
+  stroke-linecap: round;
+}
+
 .hero__status {
   display: inline-flex; align-items: center; gap: 0.6rem;
-  font-family: var(--label); font-size: 0.74rem; letter-spacing: 0.04em;
+  font-family: var(--label); font-size: var(--text-xs); letter-spacing: 0.04em;
   color: rgba(255, 255, 255, 0.6); margin-top: 1.75rem;
 }
 .hero__status .led {
@@ -411,43 +456,70 @@ h1, h2, h3 { font-family: var(--display); font-weight: 640; line-height: 1.02; l
   100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-hi) 0%, transparent); }
 }
 
+/* Swiss hero headline: Archivo 800, tight leading, flush-left
+   The annotation underline on <em> reads as a precise technical mark — kept. */
 .hero__title {
-  font-size: clamp(2.7rem, 6.8vw, 5.8rem);
-  font-weight: 780; line-height: 0.96; letter-spacing: -0.04em;
-  max-width: 17ch; margin: 0 auto; color: #fff;
+  font-size: clamp(var(--text-4xl), 6.8vw, var(--text-6xl));
+  font-family: var(--display);
+  font-weight: 800;
+  line-height: 0.96;
+  letter-spacing: -0.04em;
+  max-width: 17ch;
+  margin: 0;
+  color: #fff;
+}
+.hero__title em {
+  font-style: normal;
+  color: #fff;
+  font-weight: 800;
+  text-decoration: underline;
+  text-decoration-style: solid;
+  text-decoration-color: var(--accent-hi);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 0.18em;
+  text-decoration-skip-ink: none;
 }
-/* one emphasis treatment, one colour: the accent blue, brightened for the dark hero */
-.hero__title em { font-style: normal; color: var(--accent-hi); }
 .hero__title .u {
   font-style: normal;
   color: #fff;
   box-shadow: inset 0 -0.12em 0 var(--accent-hi);
 }
 .hero__lede {
-  font-size: clamp(1.08rem, 1.7vw, 1.32rem); color: rgba(255, 255, 255, 0.74);
-  max-width: 56ch; margin: 1.75rem auto 2.5rem; line-height: 1.7;
+  font-size: clamp(var(--text-base), 1.7vw, var(--text-lg));
+  color: rgba(255, 255, 255, 0.74);
+  max-width: 56ch;
+  margin: 1.75rem 0 2.5rem;
+  line-height: 1.7;
 }
-.hero__cta { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; justify-content: center; }
+.hero__cta { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
 .hero .btn--ghost { border-color: rgba(255, 255, 255, 0.26); color: rgba(255, 255, 255, 0.86); }
 .hero .btn--ghost:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.08); }
 
+/* Ultrawide: keep the hero in the SAME container as the nav + every section
+   (var(--wrap)) so all left/right edges align. Only rebalance the two hero
+   columns to equal weight for breathing room; never widen the hero past the
+   shared container (that misaligns it from the rest of the page). */
+@media (min-width: 1600px) {
+  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
+}
+
 /* ============================================================
    SECTION SCAFFOLD
    ============================================================ */
 .section { padding: clamp(3rem, 5.5vw, 5rem) 0; border-top: 1px solid var(--line); position: relative; }
 .section--raise { background: linear-gradient(180deg, var(--ink-2), var(--ink)); }
 .section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
-.section__title { font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 760; letter-spacing: -0.035em; margin-top: 0.75rem; max-width: 22ch; text-wrap: balance; }
+.section__title { font-size: clamp(var(--text-2xl), 3.4vw, var(--text-3xl)); font-weight: 700; letter-spacing: -0.035em; margin-top: 0.75rem; max-width: 22ch; text-wrap: balance; }
 .section__title em { font-style: normal; color: var(--accent); }
-.section__lede { margin-top: 0.9rem; max-width: 52ch; color: var(--paper-dim); font-size: 1.05rem; line-height: 1.6; }
+.section__lede { margin-top: 0.9rem; max-width: 52ch; color: var(--paper-dim); font-size: var(--text-base); line-height: 1.6; }
 
-/* testimonials — a centred pull-quote moment (unnumbered by design) */
+/* testimonials — pull-quote; centered by design (controlled use) */
 .quotes { text-align: center; }
 .quote { max-width: 46ch; margin: 0 auto; }
 .quote + .quote { margin-top: clamp(2.5rem, 5vw, 4rem); }
-.quote__mark { font-family: var(--display); font-weight: 800; font-size: 4rem; line-height: 0.4; color: var(--accent); height: 2.2rem; }
-.quote__text { font-size: clamp(1.45rem, 3vw, 2.05rem); font-weight: 620; letter-spacing: -0.02em; line-height: 1.3; }
-.quote__cite { font-family: var(--label); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-faint); margin-top: 1.5rem; }
+.quote__mark { font-family: var(--display); font-weight: 800; font-size: var(--text-5xl); line-height: 0.4; color: var(--accent); height: 2.2rem; }
+.quote__text { font-size: clamp(var(--text-xl), 3vw, var(--text-2xl)); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
+.quote__cite { font-family: var(--label); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-faint); margin-top: 1.5rem; }
 .quote__detail { color: var(--paper-dim); }
 
 /* ============================================================
@@ -469,7 +541,7 @@ h1, h2, h3 { font-family: var(--display); font-weight: 640; line-height: 1.02; l
   opacity: 0.07;
 }
 .work__row:hover::before { transform: scaleX(1); }
-.work__idx { font-family: var(--label); font-size: 0.8rem; color: var(--paper-faint); position: relative; padding-left: 1.1rem; }
+.work__idx { font-family: var(--label); font-size: var(--text-xs); color: var(--paper-faint); position: relative; padding-left: 1.1rem; }
 .work__idx::before {
   content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
   width: 7px; height: 7px; border-radius: 50%;
@@ -480,13 +552,13 @@ h1, h2, h3 { font-family: var(--display); font-weight: 640; line-height: 1.02; l
   box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
 }
 .work__main { min-width: 0; }
-.work__client { font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; }
-.work__name { font-size: clamp(1.45rem, 2.7vw, 2.1rem); font-weight: 740; letter-spacing: -0.03em; line-height: 1.08; transition: transform 0.35s cubic-bezier(0.2,0.8,0.2,1); }
+.work__client { font-family: var(--label); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; }
+.work__name { font-size: clamp(var(--text-xl), 2.7vw, var(--text-2xl)); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; transition: transform 0.35s cubic-bezier(0.2,0.8,0.2,1); }
 .work__row:hover .work__name { transform: translateX(0.6rem); }
-.work__sum { color: var(--paper-dim); font-size: 0.98rem; margin-top: 0.6rem; max-width: 60ch; }
+.work__sum { color: var(--paper-dim); font-size: var(--text-base); margin-top: 0.6rem; max-width: 60ch; }
 .work__tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.9rem; }
 .work__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; text-align: right; }
-.work__year { font-family: var(--label); font-size: 0.78rem; color: var(--paper-faint); }
+.work__year { font-family: var(--label); font-size: var(--text-xs); color: var(--paper-faint); }
 .work__go {
   width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--line-2);
   display: grid; place-items: center; color: var(--paper-dim); transition: all 0.3s;
@@ -498,11 +570,29 @@ h1, h2, h3 { font-family: var(--display); font-weight: 640; line-height: 1.02; l
 }
 
 .tag {
-  font-family: var(--label); font-size: 0.68rem; letter-spacing: 0.03em;
+  font-family: var(--label); font-size: var(--text-2xs); letter-spacing: 0.03em;
   color: var(--paper-dim); border: 1px solid var(--line);
   padding: 0.22rem 0.55rem; border-radius: 5px; background: var(--ink-2);
 }
 
+/* ============================================================
+   MID-PAGE CTA BAND
+   ============================================================ */
+.cta-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
+.cta-band__inner {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 1.5rem; padding: 0.5rem 0;
+}
+.cta-band__line {
+  font-size: var(--text-xl); font-weight: 400; letter-spacing: -0.02em;
+  color: var(--paper); margin: 0;
+}
+.cta-band__line em { font-style: italic; color: var(--accent-hi); }
+@media (max-width: 640px) {
+  .cta-band__inner { flex-direction: column; align-items: flex-start; }
+  .cta-band__line { font-size: var(--text-lg); }
+}
+
 /* ============================================================
    PROJECTS (denser grid)
    ============================================================ */
@@ -513,16 +603,15 @@ h1, h2, h3 { font-family: var(--display); font-weight: 640; line-height: 1.02; l
 }
 .proj:hover { background: var(--ink-3); }
 .proj__top { display: flex; align-items: center; justify-content: space-between; }
-.proj__ix { font-family: var(--label); font-size: 0.72rem; color: var(--paper-faint); }
-.proj__kind { font-family: var(--label); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
-.proj__name { font-family: var(--display); font-size: 1.3rem; font-weight: 640; letter-spacing: -0.02em; line-height: 1.15; }
-.proj__desc { font-size: 0.9rem; color: var(--paper-dim); line-height: 1.55; }
-.proj__foot { margin-top: auto; font-family: var(--label); font-size: 0.7rem; color: var(--paper-faint); letter-spacing: 0.04em; }
-/* optional status pill (e.g. private beta) — a live-dot + label, echoing the hero LED */
+.proj__ix { font-family: var(--label); font-size: var(--text-xs); color: var(--paper-faint); }
+.proj__kind { font-family: var(--label); font-size: var(--text-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
+.proj__name { font-family: var(--display); font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
+.proj__desc { font-size: var(--text-sm); color: var(--paper-dim); line-height: 1.55; }
+.proj__foot { margin-top: auto; font-family: var(--label); font-size: var(--text-2xs); color: var(--paper-faint); letter-spacing: 0.04em; }
 .proj__tags { display: inline-flex; align-items: center; gap: 0.55rem; }
 .proj__status {
   display: inline-flex; align-items: center; gap: 0.4rem;
-  font-family: var(--label); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
+  font-family: var(--label); font-size: var(--text-2xs); letter-spacing: 0.1em; text-transform: uppercase;
   color: var(--accent); border-radius: 999px; padding: 0.18rem 0.5rem;
   border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
   background: color-mix(in srgb, var(--accent) 9%, transparent);
@@ -545,9 +634,9 @@ h1, h2, h3 { font-family: var(--display); font-weight: 640; line-height: 1.02; l
 @media (max-width: 640px) { .svc-grid { grid-template-columns: 1fr; } }
 .svc { background: var(--ink); padding: clamp(1.75rem, 3vw, 2.5rem); transition: background 0.25s; }
 .svc:hover { background: var(--ink-2); }
-.svc__no { font-family: var(--label); font-size: 0.72rem; color: var(--accent); letter-spacing: 0.1em; margin-bottom: 1.5rem; }
-.svc__title { font-family: var(--display); font-size: 1.35rem; font-weight: 640; letter-spacing: -0.02em; margin-bottom: 0.75rem; }
-.svc__body { color: var(--paper-dim); font-size: 0.96rem; line-height: 1.65; }
+.svc__no { font-family: var(--label); font-size: var(--text-xs); color: var(--accent); letter-spacing: 0.1em; margin-bottom: 1.5rem; }
+.svc__title { font-family: var(--display); font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.75rem; }
+.svc__body { color: var(--paper-dim); font-size: var(--text-base); line-height: 1.65; }
 
 /* ============================================================
    TIMELINE / BACKGROUND
@@ -559,36 +648,34 @@ h1, h2, h3 { font-family: var(--display); font-weight: 640; line-height: 1.02; l
   transition: background 0.25s;
 }
 .tl__row:hover { background: var(--ink-2); }
-.tl__period { font-family: var(--label); font-size: 0.8rem; color: var(--accent); letter-spacing: 0.02em; padding-top: 0.3rem; }
-.tl__role { font-family: var(--display); font-size: 1.3rem; font-weight: 640; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
+.tl__period { font-family: var(--label); font-size: var(--text-xs); color: var(--accent); letter-spacing: 0.02em; padding-top: 0.3rem; }
+.tl__role { font-family: var(--display); font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
 .tl__role a { border-bottom: 1px solid var(--accent); padding-bottom: 0.1rem; transition: color 0.2s; }
 .tl__role a:hover { color: var(--accent); }
 .tl__role .arr { font-size: 0.8em; color: var(--accent); }
-.tl__detail { color: var(--paper-dim); font-size: 0.96rem; line-height: 1.6; max-width: 64ch; }
+.tl__detail { color: var(--paper-dim); font-size: var(--text-base); line-height: 1.6; max-width: 64ch; }
 @media (max-width: 640px) { .tl__row { grid-template-columns: 1fr; gap: 0.5rem; } }
 
 /* ============================================================
    AUDIT — fixed-price entry offer
    ============================================================ */
 .audit { display: grid; grid-template-columns: 1fr 340px; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
-/* steps reuse the proj-grid treatment: hairline-separated white cells */
 .audit__steps {
   list-style: none; display: grid; gap: 1px;
   background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
 }
 .audit__step { background: var(--ink-2); padding: 1.75rem; }
-.audit__no { font-family: var(--label); font-size: 0.72rem; color: var(--accent); }
-.audit__title { font-family: var(--display); font-size: 1.25rem; font-weight: 640; letter-spacing: -0.02em; margin: 0.5rem 0 0.4rem; }
-.audit__body { color: var(--paper-dim); font-size: 0.96rem; line-height: 1.6; max-width: 58ch; }
-/* the offer card goes dark — an echo of the hero, so the price reads as the centrepiece */
+.audit__no { font-family: var(--label); font-size: var(--text-xs); color: var(--accent); }
+.audit__title { font-family: var(--display); font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.02em; margin: 0.5rem 0 0.4rem; }
+.audit__body { color: var(--paper-dim); font-size: var(--text-base); line-height: 1.6; max-width: 58ch; }
 .audit__card {
   background: var(--paper); border-radius: 16px; padding: 2.1rem;
   display: flex; flex-direction: column; align-items: flex-start;
 }
-.audit__price { font-size: 2.7rem; font-weight: 760; letter-spacing: -0.03em; line-height: 1; color: #fff; }
-.audit__meta { font-family: var(--label); font-size: 0.74rem; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.55); margin-top: 0.65rem; }
+.audit__price { font-size: var(--text-4xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #fff; }
+.audit__meta { font-family: var(--label); font-size: var(--text-xs); letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.55); margin-top: 0.65rem; }
 .audit__perks { list-style: none; margin: 1.5rem 0 1.9rem; display: grid; gap: 0.6rem; }
-.audit__perk { display: flex; gap: 0.6rem; font-size: 0.92rem; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
+.audit__perk { display: flex; gap: 0.6rem; font-size: var(--text-sm); line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
 .audit__perk::before { content: '·'; color: var(--accent-hi); font-weight: 700; }
 @media (max-width: 860px) { .audit { grid-template-columns: 1fr; } }
 
@@ -606,11 +693,11 @@ h1, h2, h3 { font-family: var(--display); font-weight: 640; line-height: 1.02; l
 .cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
 .cform label { display: grid; gap: 0.45rem; }
 .cform .lab {
-  font-family: var(--label); font-size: 0.7rem; letter-spacing: 0.1em;
+  font-family: var(--label); font-size: var(--text-xs); letter-spacing: 0.1em;
   text-transform: uppercase; color: var(--paper-faint);
 }
 .cform input, .cform select, .cform textarea {
-  font: inherit; font-size: 0.95rem; color: var(--paper); width: 100%;
+  font: inherit; font-size: var(--text-base); color: var(--paper); width: 100%;
   background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 8px;
   padding: 0.7rem 0.85rem; transition: border-color 0.2s, box-shadow 0.2s;
 }
@@ -622,22 +709,18 @@ h1, h2, h3 { font-family: var(--display); font-weight: 640; line-height: 1.02; l
 .cform textarea { min-height: 130px; resize: vertical; }
 .cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
 .cform__send { justify-self: center; margin-top: 0.4rem; }
-.cform__status { font-size: 0.92rem; line-height: 1.5; color: var(--paper-dim); text-align: center; }
+.cform__status { font-size: var(--text-sm); line-height: 1.5; color: var(--paper-dim); text-align: center; }
 .cform__status--ok { color: var(--accent-2); }
-.cform__alt { color: var(--paper-dim); font-size: 0.95rem; }
+.cform__alt { color: var(--paper-dim); font-size: var(--text-base); }
 @media (max-width: 560px) { .cform__row { grid-template-columns: 1fr; } }
 
 /* ============================================================
    STACK
    ============================================================ */
-/* technology logos: bare monochrome brand marks on an even grid. Each mark is normalised
-   to a shared optical size via its viewBox (see tech-glyphs.ts), so the row reads as one
-   deliberate set. Muted at rest, accent + lift on hover — the "complete the circuit"
-   language used elsewhere on the site. */
-.tech { margin-top: clamp(2.5rem, 5vw, 4rem); text-align: center; }
+.tech { margin-top: clamp(2.5rem, 5vw, 4rem); text-align: left; }
 .tech__kicker { display: block; margin-bottom: 1.75rem; }
 .stack {
-  list-style: none; margin: 0 auto; padding: 0;
+  list-style: none; margin: 0; padding: 0;
   display: grid; grid-template-columns: repeat(7, 1fr);
   gap: clamp(1.5rem, 3vw, 2.75rem);
   max-width: 52rem;
@@ -654,11 +737,11 @@ h1, h2, h3 { font-family: var(--display); font-weight: 640; line-height: 1.02; l
 /* ============================================================
    CONTACT
    ============================================================ */
-.contact { text-align: center; }
-.contact__title { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 780; letter-spacing: -0.04em; line-height: 1; margin-bottom: 1.5rem; }
+.contact { text-align: left; }
+.contact__title { font-size: clamp(var(--text-3xl), 5vw, var(--text-4xl)); font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-bottom: 1.5rem; }
 .contact__title em { font-style: normal; color: var(--accent); }
-.contact__lede { color: var(--paper-dim); font-size: 1.08rem; line-height: 1.7; max-width: 46ch; margin: 0 auto 2.75rem; }
-.contact__mail { font-family: var(--label); font-size: clamp(0.95rem, 2.5vw, 1.3rem); color: var(--paper); border-bottom: 1px solid var(--accent); padding-bottom: 0.25rem; transition: color 0.2s; }
+.contact__lede { color: var(--paper-dim); font-size: var(--text-base); line-height: 1.7; max-width: 46ch; margin: 0 0 2.75rem; }
+.contact__mail { font-family: var(--label); font-size: clamp(var(--text-base), 2.5vw, var(--text-lg)); color: var(--paper); border-bottom: 1px solid var(--accent); padding-bottom: 0.25rem; transition: color 0.2s; }
 .contact__mail:hover { color: var(--accent); }
 
 /* ============================================================
@@ -666,57 +749,57 @@ h1, h2, h3 { font-family: var(--display); font-weight: 640; line-height: 1.02; l
    ============================================================ */
 .footer { border-top: 1px solid var(--line); padding: 3rem 0; }
 .footer__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
-.footer__meta { font-family: var(--label); font-size: 0.74rem; color: var(--paper-faint); letter-spacing: 0.04em; }
+.footer__meta { font-family: var(--label); font-size: var(--text-xs); color: var(--paper-faint); letter-spacing: 0.04em; }
 .footer__links { display: flex; gap: 1.5rem; }
-.footer__links a { font-family: var(--label); font-size: 0.76rem; color: var(--paper-dim); transition: color 0.2s; display: inline-flex; align-items: center; min-height: 44px; }
+.footer__links a { font-family: var(--label); font-size: var(--text-xs); color: var(--paper-dim); transition: color 0.2s; display: inline-flex; align-items: center; min-height: 44px; }
 .footer__links a:hover { color: var(--accent); }
 
 /* ============================================================
    CASE STUDY ARTICLE
    ============================================================ */
 .cs-hero { padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4rem); position: relative; }
-.cs-back { font-family: var(--label); font-size: 0.76rem; color: var(--paper-dim); display: inline-flex; gap: 0.5rem; align-items: center; margin-bottom: 2.5rem; transition: color 0.2s; }
+.cs-back { font-family: var(--label); font-size: var(--text-xs); color: var(--paper-dim); display: inline-flex; gap: 0.5rem; align-items: center; margin-bottom: 2.5rem; transition: color 0.2s; }
 .cs-back:hover { color: var(--accent); }
-.cs-title { font-size: clamp(2.3rem, 6vw, 4.5rem); font-weight: 740; letter-spacing: -0.04em; line-height: 0.98; max-width: 18ch; margin-bottom: 1.5rem; }
+.cs-title { font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl)); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98; max-width: 18ch; margin-bottom: 1.5rem; }
 .cs-title em { font-style: normal; color: var(--accent); }
-.cs-summary { font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--paper-dim); max-width: 56ch; line-height: 1.6; }
+.cs-summary { font-size: clamp(var(--text-base), 2vw, var(--text-lg)); color: var(--paper-dim); max-width: 56ch; line-height: 1.6; }
 
 .cs-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 2rem 0; margin: 3rem 0; }
-.cs-meta dt { font-family: var(--label); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: 0.5rem; }
-.cs-meta dd { font-size: 0.95rem; color: var(--paper); line-height: 1.5; }
+.cs-meta dt { font-family: var(--label); font-size: var(--text-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: 0.5rem; }
+.cs-meta dd { font-size: var(--text-base); color: var(--paper); line-height: 1.5; }
 
 .cs-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 3rem 0; }
 .cs-metric { background: var(--ink-2); padding: 2rem 1.5rem; }
-.cs-metric__val { font-family: var(--display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 760; color: var(--accent); letter-spacing: -0.03em; line-height: 1; }
-.cs-metric__lab { font-family: var(--label); font-size: 0.74rem; color: var(--paper-dim); margin-top: 0.6rem; letter-spacing: 0.02em; }
+.cs-metric__val { font-family: var(--display); font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); font-weight: 800; color: var(--accent); letter-spacing: -0.03em; line-height: 1; }
+.cs-metric__lab { font-family: var(--label); font-size: var(--text-xs); color: var(--paper-dim); margin-top: 0.6rem; letter-spacing: 0.02em; }
 
-/* prose */
+/* prose — case study body copy */
 .prose { max-width: 720px; }
 .prose > * + * { margin-top: 1.4rem; }
-.prose h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; margin-top: 3.5rem; letter-spacing: -0.025em; }
-.prose h3 { font-size: 1.3rem; font-weight: 640; margin-top: 2.5rem; font-family: var(--display); }
-.prose p { color: var(--paper-dim); font-size: 1.06rem; line-height: 1.75; }
+.prose h2 { font-size: clamp(var(--text-xl), 3vw, var(--text-2xl)); font-weight: 700; margin-top: 3.5rem; letter-spacing: -0.025em; }
+.prose h3 { font-size: var(--text-lg); font-weight: 700; margin-top: 2.5rem; font-family: var(--display); }
+.prose p { color: var(--paper-dim); font-size: var(--text-base); line-height: 1.75; }
 .prose a { color: var(--accent); border-bottom: 1px solid var(--line-2); }
 .prose a:hover { border-color: var(--accent); }
-.prose strong { color: var(--paper); font-weight: 600; }
+.prose strong { color: var(--paper); font-weight: 700; }
 .prose ul, .prose ol { padding-left: 1.3rem; color: var(--paper-dim); }
 .prose li { margin-top: 0.6rem; line-height: 1.7; }
 .prose li::marker { color: var(--accent); }
-.prose blockquote { border-left: 3px solid var(--accent); padding-left: 1.5rem; font-family: var(--display); font-weight: 600; font-size: 1.35rem; color: var(--paper); letter-spacing: -0.01em; }
+.prose blockquote { border-left: 3px solid var(--accent); padding-left: 1.5rem; font-family: var(--display); font-weight: 700; font-size: var(--text-lg); color: var(--paper); letter-spacing: -0.01em; }
 .prose code { font-family: var(--label); font-size: 0.88em; background: var(--ink-3); padding: 0.15em 0.4em; border-radius: 4px; color: var(--accent-2); }
 .prose pre { background: var(--ink-2); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem; overflow-x: auto; }
 .prose pre code { background: none; padding: 0; color: var(--paper-dim); }
 .prose hr { border: none; border-top: 1px solid var(--line); margin: 3rem 0; }
 
 .cs-next { border-top: 1px solid var(--line); padding: clamp(3rem,6vw,5rem) 0; }
-.cs-next__lab { font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: 1rem; }
-.cs-next__title { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.035em; transition: color 0.2s; }
+.cs-next__lab { font-family: var(--label); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: 1rem; }
+.cs-next__title { font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); font-weight: 700; letter-spacing: -0.035em; transition: color 0.2s; }
 .cs-next:hover .cs-next__title { color: var(--accent); }
 
 /* ============================================================
    BLOG (listing + post header — post body reuses .prose)
    ============================================================ */
-.post-meta { display: flex; gap: 0.9rem; align-items: baseline; font-family: var(--label); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: 1.25rem; }
+.post-meta { display: flex; gap: 0.9rem; align-items: baseline; font-family: var(--label); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: 1.25rem; }
 .post-meta__tags { color: var(--accent); }
 
 .post-list { display: flex; flex-direction: column; padding-bottom: clamp(4rem, 8vw, 7rem); }
@@ -735,10 +818,10 @@ h1, h2, h3 { font-family: var(--display); font-weight: 640; line-height: 1.02; l
   opacity: 0.07;
 }
 .post-row:hover::before { transform: scaleX(1); }
-.post-row__date { font-family: var(--label); font-size: 0.78rem; color: var(--paper-faint); }
-.post-row__title { font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 740; letter-spacing: -0.03em; line-height: 1.1; transition: transform 0.35s cubic-bezier(0.2,0.8,0.2,1); }
+.post-row__date { font-family: var(--label); font-size: var(--text-xs); color: var(--paper-faint); }
+.post-row__title { font-size: clamp(var(--text-lg), 2.4vw, var(--text-2xl)); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; transition: transform 0.35s cubic-bezier(0.2,0.8,0.2,1); }
 .post-row:hover .post-row__title { transform: translateX(0.6rem); }
-.post-row__desc { color: var(--paper-dim); font-size: 0.96rem; margin-top: 0.5rem; max-width: 60ch; }
+.post-row__desc { color: var(--paper-dim); font-size: var(--text-base); margin-top: 0.5rem; max-width: 60ch; }
 .post-row:hover .work__go { background: var(--accent); border-color: var(--accent); color: #fff; }
 .post-list__empty { color: var(--paper-dim); padding: 2rem 0; }
 @media (max-width: 760px) {
@@ -761,4 +844,6 @@ h1, h2, h3 { font-family: var(--display); font-weight: 640; line-height: 1.02; l
   .hub-halo, .sun-halo, .sun-bloom { animation: none; }
   .int-ring { animation: none; }
   html { scroll-behavior: auto; }
+  .packet--return { display: none; }
+  .wire-flow--return { display: none; }
 }