Update About page content, add list components, reorganize component structure, and clean up dependencies

- Updated AboutPage with comprehensive content structure including Hero Statement, The Basics, What I Do (with subsections for Customers/Users, Business, Product, Team), Currently, Recent Work, How I Work, What Drives Me, and Work With Me sections
- Created reusable list components (UnorderedList, OrderedList, ListItem) with customizable bullet/numbering styles and proper spacing
- Split blended component folders into separate directories following project pattern: Fact/Facts, Event/Events, Skill/Skills, Tag/Tags
- Redesigned CardRole to match CardArticle design with cover image, meta row, title, and subtitle
- Implemented dynamic Recent Work section loading latest 5 roles from jobs.json with proper date sorting
- Updated package.json to use 'latest' versions for all dependencies
- Removed unused packages: @headlessui/react, @heroicons/react, next-themes, @types/next
- Enhanced typography system with fluid type scale presets (sm, md, lg, xl)
- Updated component styles and improved dark mode support

package-lock.json

···
       "name": "portfolio",
       "version": "0.0.0",
       "dependencies": {
-        "@headlessui/react": "^2.1.8",
-        "@heroicons/react": "^2.1.5",
-        "@types/react-helmet-async": "^1.0.1",
-        "autoprefixer": "^10.4.20",
-        "clsx": "^2.1.1",
-        "lucide-react": "^0.446.0",
-        "next-themes": "^0.4.6",
-        "postcss": "^8.4.47",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
-        "react-helmet-async": "^2.0.5",
-        "react-router-dom": "^6.26.2",
-        "tailwind-merge": "^2.5.4",
-        "tailwindcss": "^3.4.13"
+        "@types/react-helmet-async": "latest",
+        "autoprefixer": "latest",
+        "clsx": "latest",
+        "lucide-react": "latest",
+        "postcss": "latest",
+        "react": "latest",
+        "react-dom": "latest",
+        "react-helmet-async": "latest",
+        "react-router-dom": "latest",
+        "tailwind-merge": "latest",
+        "tailwindcss": "latest"
       },
       "devDependencies": {
-        "@eslint/js": "^9.11.1",
-        "@tailwindcss/typography": "^0.5.16",
-        "@types/next": "^8.0.7",
-        "@types/node": "^22.9.0",
-        "@types/react": "^18.3.10",
-        "@types/react-dom": "^18.3.0",
-        "@types/react-router-dom": "^5.3.3",
-        "@typescript-eslint/eslint-plugin": "^8.8.0",
-        "@typescript-eslint/parser": "^8.8.0",
-        "@u3u/prettier-config": "^5.1.0",
-        "@vitejs/plugin-react": "^4.3.1",
-        "csv-parse": "^5.5.6",
-        "eslint": "^9.11.1",
-        "eslint-config-prettier": "^10.0.1",
-        "eslint-plugin-prettier": "^5.2.3",
-        "eslint-plugin-react": "^7.35.0",
-        "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-        "eslint-plugin-react-refresh": "^0.4.9",
-        "globals": "^15.9.0",
-        "prettier": "^3.5.2",
-        "tsx": "^4.19.2",
-        "typescript": "^5.6.2",
-        "vite": "^7.1.10"
+        "@eslint/js": "latest",
+        "@tailwindcss/typography": "latest",
+        "@types/node": "latest",
+        "@types/react": "latest",
+        "@types/react-dom": "latest",
+        "@types/react-router-dom": "latest",
+        "@typescript-eslint/eslint-plugin": "latest",
+        "@typescript-eslint/parser": "latest",
+        "@u3u/prettier-config": "latest",
+        "@vitejs/plugin-react": "latest",
+        "csv-parse": "latest",
+        "eslint": "latest",
+        "eslint-config-prettier": "latest",
+        "eslint-plugin-prettier": "latest",
+        "eslint-plugin-react": "latest",
+        "eslint-plugin-react-hooks": "latest",
+        "eslint-plugin-react-refresh": "latest",
+        "globals": "latest",
+        "prettier": "latest",
+        "tsx": "latest",
+        "typescript": "latest",
+        "vite": "latest"
       }
     },
     "node_modules/@alloc/quick-lru": {
···
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
-    "node_modules/@floating-ui/core": {
-      "version": "1.6.9",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
-      "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/utils": "^0.2.9"
-      }
-    },
-    "node_modules/@floating-ui/dom": {
-      "version": "1.6.13",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
-      "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/core": "^1.6.0",
-        "@floating-ui/utils": "^0.2.9"
-      }
-    },
-    "node_modules/@floating-ui/react": {
-      "version": "0.26.28",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz",
-      "integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/react-dom": "^2.1.2",
-        "@floating-ui/utils": "^0.2.8",
-        "tabbable": "^6.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
-    "node_modules/@floating-ui/react-dom": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
-      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/dom": "^1.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
-    "node_modules/@floating-ui/utils": {
-      "version": "0.2.9",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
-      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
-      "license": "MIT"
-    },
-    "node_modules/@headlessui/react": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.2.1.tgz",
-      "integrity": "sha512-daiUqVLae8CKVjEVT19P/izW0aGK0GNhMSAeMlrDebKmoVZHcRRwbxzgtnEadUVDXyBsWo9/UH4KHeniO+0tMg==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/react": "^0.26.16",
-        "@react-aria/focus": "^3.17.1",
-        "@react-aria/interactions": "^3.21.3",
-        "@tanstack/react-virtual": "^3.11.1"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "react": "^18 || ^19 || ^19.0.0-rc",
-        "react-dom": "^18 || ^19 || ^19.0.0-rc"
-      }
-    },
-    "node_modules/@heroicons/react": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz",
-      "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">= 16 || ^19.0.0-rc"
-      }
-    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
···
       "dev": true,
       "license": "Apache-2.0"
     },
-    "node_modules/@react-aria/focus": {
-      "version": "3.20.1",
-      "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.20.1.tgz",
-      "integrity": "sha512-lgYs+sQ1TtBrAXnAdRBQrBo0/7o5H6IrfDxec1j+VRpcXL0xyk0xPq+m3lZp8typzIghqDgpnKkJ5Jf4OrzPIw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/interactions": "^3.24.1",
-        "@react-aria/utils": "^3.28.1",
-        "@react-types/shared": "^3.28.0",
-        "@swc/helpers": "^0.5.0",
-        "clsx": "^2.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
-        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
-      }
-    },
-    "node_modules/@react-aria/interactions": {
-      "version": "3.24.1",
-      "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.24.1.tgz",
-      "integrity": "sha512-OWEcIC6UQfWq4Td5Ptuh4PZQ4LHLJr/JL2jGYvuNL6EgL3bWvzPrRYIF/R64YbfVxIC7FeZpPSkS07sZ93/NoA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/ssr": "^3.9.7",
-        "@react-aria/utils": "^3.28.1",
-        "@react-stately/flags": "^3.1.0",
-        "@react-types/shared": "^3.28.0",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
-        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
-      }
-    },
-    "node_modules/@react-aria/ssr": {
-      "version": "3.9.7",
-      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.7.tgz",
-      "integrity": "sha512-GQygZaGlmYjmYM+tiNBA5C6acmiDWF52Nqd40bBp0Znk4M4hP+LTmI0lpI1BuKMw45T8RIhrAsICIfKwZvi2Gg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      },
-      "engines": {
-        "node": ">= 12"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
-      }
-    },
-    "node_modules/@react-aria/utils": {
-      "version": "3.28.1",
-      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.28.1.tgz",
-      "integrity": "sha512-mnHFF4YOVu9BRFQ1SZSKfPhg3z+lBRYoW5mLcYTQihbKhz48+I1sqRkP7ahMITr8ANH3nb34YaMME4XWmK2Mgg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/ssr": "^3.9.7",
-        "@react-stately/flags": "^3.1.0",
-        "@react-stately/utils": "^3.10.5",
-        "@react-types/shared": "^3.28.0",
-        "@swc/helpers": "^0.5.0",
-        "clsx": "^2.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
-        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
-      }
-    },
-    "node_modules/@react-stately/flags": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@react-stately/flags/-/flags-3.1.0.tgz",
-      "integrity": "sha512-KSHOCxTFpBtxhIRcKwsD1YDTaNxFtCYuAUb0KEihc16QwqZViq4hasgPBs2gYm7fHRbw7WYzWKf6ZSo/+YsFlg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      }
-    },
-    "node_modules/@react-stately/utils": {
-      "version": "3.10.5",
-      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.5.tgz",
-      "integrity": "sha512-iMQSGcpaecghDIh3mZEpZfoFH3ExBwTtuBEcvZ2XnGzCgQjeYXcMdIUwAfVQLXFTdHUHGF6Gu6/dFrYsCzySBQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
-      }
-    },
-    "node_modules/@react-types/shared": {
-      "version": "3.28.0",
-      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.28.0.tgz",
-      "integrity": "sha512-9oMEYIDc3sk0G5rysnYvdNrkSg7B04yTKl50HHSZVbokeHpnU0yRmsDaWb9B/5RprcKj8XszEk5guBO8Sa/Q+Q==",
-      "license": "Apache-2.0",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
-      }
-    },
     "node_modules/@remix-run/router": {
       "version": "1.23.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
···
         "node": ">= 14.0.0"
       }
     },
-    "node_modules/@swc/helpers": {
-      "version": "0.5.15",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
-      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.8.0"
-      }
-    },
     "node_modules/@tailwindcss/typography": {
       "version": "0.5.16",
       "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.16.tgz",
···
         "node": ">=4"
       }
     },
-    "node_modules/@tanstack/react-virtual": {
-      "version": "3.13.6",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.6.tgz",
-      "integrity": "sha512-WT7nWs8ximoQ0CDx/ngoFP7HbQF9Q2wQe4nh2NB+u2486eX3nZRE40P9g6ccCVq7ZfTSH5gFOuCoVH5DLNS/aA==",
-      "license": "MIT",
-      "dependencies": {
-        "@tanstack/virtual-core": "3.13.6"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@tanstack/virtual-core": {
-      "version": "3.13.6",
-      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.6.tgz",
-      "integrity": "sha512-cnQUeWnhNP8tJ4WsGcYiX24Gjkc9ALstLbHcBj1t3E7EimN6n6kHH+DPV4PpDnuw00NApQp+ViojMj1GRdwYQg==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      }
-    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
···
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/next": {
-      "version": "8.0.7",
-      "resolved": "https://registry.npmjs.org/@types/next/-/next-8.0.7.tgz",
-      "integrity": "sha512-I/Gcj1YfOFmpBBX5XgBP1t1wKcFS0TGk8ytW99ujjvCp8U31QuKqM3fvvGb7+Hf1CJt3BAAgzGT0aCigqO5opQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/next-server": "*",
-        "@types/node": "*",
-        "@types/node-fetch": "*",
-        "@types/react": "*"
-      }
-    },
-    "node_modules/@types/next-server": {
-      "version": "8.1.2",
-      "resolved": "https://registry.npmjs.org/@types/next-server/-/next-server-8.1.2.tgz",
-      "integrity": "sha512-Fm4QhAxwDlC9AHiGy23Lhv7DeTTt1O1s7tnAsyVOLPjePmYXPZVbOCrxd2oRHZnIIYWw41JelLbq4hN1B5idlQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/next": "*",
-        "@types/node": "*",
-        "@types/react": "*",
-        "@types/react-loadable": "*"
-      }
-    },
     "node_modules/@types/node": {
       "version": "22.14.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.14.0.tgz",
···
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
-      }
-    },
-    "node_modules/@types/node-fetch": {
-      "version": "2.6.13",
-      "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.13.tgz",
-      "integrity": "sha512-QGpRVpzSaUs30JBSGPjOg4Uveu384erbHBoT1zeONvyCfwQxIkUshLAOqN/k9EjGviPRmWTTe6aH2qySWKTVSw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*",
-        "form-data": "^4.0.4"
       }
     },
     "node_modules/@types/prop-types": {
···
         "@types/react-helmet": "*"
       }
     },
-    "node_modules/@types/react-loadable": {
-      "version": "5.5.11",
-      "resolved": "https://registry.npmjs.org/@types/react-loadable/-/react-loadable-5.5.11.tgz",
-      "integrity": "sha512-/tq2IJ853MoIFRBmqVOxnGsRRjER5TmEKzsZtaAkiXAWoDeKgR/QNOT1vd9k0p9h/F616X21cpNh3hu4RutzRQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/react": "*",
-        "@types/webpack": "^4"
-      }
-    },
     "node_modules/@types/react-router": {
       "version": "5.1.20",
       "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
···
         "@types/react-router": "*"
       }
     },
-    "node_modules/@types/source-list-map": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.6.tgz",
-      "integrity": "sha512-5JcVt1u5HDmlXkwOD2nslZVllBBc7HDuOICfiZah2Z0is8M8g+ddAEawbmd3VjedfDHBzxCaXLs07QEmb7y54g==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@types/tapable": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.12.tgz",
-      "integrity": "sha512-bTHG8fcxEqv1M9+TD14P8ok8hjxoOCkfKc8XXLaaD05kI7ohpeI956jtDOD3XHKBQrlyPughUtzm1jtVhHpA5Q==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@types/uglify-js": {
-      "version": "3.17.5",
-      "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.17.5.tgz",
-      "integrity": "sha512-TU+fZFBTBcXj/GpDpDaBmgWk/gn96kMZ+uocaFUlV2f8a6WdMzzI44QBCmGcCiYR0Y6ZlNRiyUyKKt5nl/lbzQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "source-map": "^0.6.1"
-      }
-    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
···
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/webpack": {
-      "version": "4.41.40",
-      "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.40.tgz",
-      "integrity": "sha512-u6kMFSBM9HcoTpUXnL6mt2HSzftqb3JgYV6oxIgL2dl6sX6aCa5k6SOkzv5DuZjBTPUE/dJltKtwwuqrkZHpfw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*",
-        "@types/tapable": "^1",
-        "@types/uglify-js": "*",
-        "@types/webpack-sources": "*",
-        "anymatch": "^3.0.0",
-        "source-map": "^0.6.0"
-      }
-    },
-    "node_modules/@types/webpack-sources": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-3.2.3.tgz",
-      "integrity": "sha512-4nZOdMwSPHZ4pTEZzSp0AsTM4K7Qmu40UKW4tJDiOVs20UzYF9l+qUe4s0ftfN0pin06n+5cWWDJXH+sbhAiDw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*",
-        "@types/source-list-map": "*",
-        "source-map": "^0.7.3"
-      }
-    },
-    "node_modules/@types/webpack-sources/node_modules/source-map": {
-      "version": "0.7.6",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",
-      "integrity": "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">= 12"
-      }
-    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.29.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.29.0.tgz",
···
         "node": ">= 0.4"
       }
     },
-    "node_modules/asynckit": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/autoprefixer": {
       "version": "10.4.21",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
···
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "license": "MIT"
     },
-    "node_modules/combined-stream": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "delayed-stream": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/commander": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
···
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/delayed-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.4.0"
       }
     },
     "node_modules/dequal": {
···
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/form-data": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
-      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "es-set-tostringtag": "^2.1.0",
-        "hasown": "^2.0.2",
-        "mime-types": "^2.1.12"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
···
         "node": ">=8.6"
       }
     },
-    "node_modules/mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mime-types": {
-      "version": "2.1.35",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "mime-db": "1.52.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/minimatch": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
···
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "dev": true,
       "license": "MIT"
-    },
-    "node_modules/next-themes": {
-      "version": "0.4.6",
-      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
-      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
-      }
     },
     "node_modules/node-releases": {
       "version": "2.0.19",
···
         "node": ">=12.20"
       }
     },
-    "node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
···
         "url": "https://opencollective.com/synckit"
       }
     },
-    "node_modules/tabbable": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
-      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
-      "license": "MIT"
-    },
     "node_modules/tailwind-merge": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
···
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
       "license": "0BSD"
     },
     "node_modules/tsx": {
···
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "7.1.10",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.10.tgz",
-      "integrity": "sha512-CmuvUBzVJ/e3HGxhg6cYk88NGgTnBoOo7ogtfJJ0fefUWAxN/WDSUa50o+oVBxuIhO8FoEZW0j2eW7sfjs5EtA==",
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
+      "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
-        "fdir": "^6.5.0",
-        "picomatch": "^4.0.3",
-        "postcss": "^8.5.6",
-        "rollup": "^4.43.0",
-        "tinyglobby": "^0.2.15"
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2",
+        "postcss": "^8.5.3",
+        "rollup": "^4.34.9",
+        "tinyglobby": "^0.2.13"
       },
       "bin": {
         "vite": "bin/vite.js"
       },
       "engines": {
-        "node": "^20.19.0 || >=22.12.0"
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
       },
       "funding": {
         "url": "https://github.com/vitejs/vite?sponsor=1"
···
         "fsevents": "~2.3.3"
       },
       "peerDependencies": {
-        "@types/node": "^20.19.0 || >=22.12.0",
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
         "jiti": ">=1.21.0",
-        "less": "^4.0.0",
+        "less": "*",
         "lightningcss": "^1.21.0",
-        "sass": "^1.70.0",
-        "sass-embedded": "^1.70.0",
-        "stylus": ">=0.54.8",
-        "sugarss": "^5.0.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
         "terser": "^5.16.0",
         "tsx": "^4.8.1",
         "yaml": "^2.4.2"

package.json

···
     "preview": "vite preview"
   },
   "dependencies": {
-    "@headlessui/react": "^2.1.8",
-    "@heroicons/react": "^2.1.5",
-    "@types/react-helmet-async": "^1.0.1",
-    "autoprefixer": "^10.4.20",
-    "clsx": "^2.1.1",
-    "lucide-react": "^0.446.0",
-    "next-themes": "^0.4.6",
-    "postcss": "^8.4.47",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-helmet-async": "^2.0.5",
-    "react-router-dom": "^6.26.2",
-    "tailwind-merge": "^2.5.4",
-    "tailwindcss": "^3.4.13"
+    "@types/react-helmet-async": "latest",
+    "autoprefixer": "latest",
+    "clsx": "latest",
+    "lucide-react": "latest",
+    "postcss": "latest",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-helmet-async": "latest",
+    "react-router-dom": "latest",
+    "tailwind-merge": "latest",
+    "tailwindcss": "latest"
   },
   "devDependencies": {
-    "@eslint/js": "^9.11.1",
-    "@tailwindcss/typography": "^0.5.16",
-    "@types/next": "^8.0.7",
-    "@types/node": "^22.9.0",
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
-    "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^8.8.0",
-    "@typescript-eslint/parser": "^8.8.0",
-    "@u3u/prettier-config": "^5.1.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "csv-parse": "^5.5.6",
-    "eslint": "^9.11.1",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-prettier": "^5.2.3",
-    "eslint-plugin-react": "^7.35.0",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "^0.4.9",
-    "globals": "^15.9.0",
-    "prettier": "^3.5.2",
-    "tsx": "^4.19.2",
-    "typescript": "^5.6.2",
-    "vite": "^7.1.10"
+    "@eslint/js": "latest",
+    "@tailwindcss/typography": "latest",
+    "@types/node": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "@types/react-router-dom": "latest",
+    "@typescript-eslint/eslint-plugin": "latest",
+    "@typescript-eslint/parser": "latest",
+    "@u3u/prettier-config": "latest",
+    "@vitejs/plugin-react": "latest",
+    "csv-parse": "latest",
+    "eslint": "latest",
+    "eslint-config-prettier": "latest",
+    "eslint-plugin-prettier": "latest",
+    "eslint-plugin-react": "latest",
+    "eslint-plugin-react-hooks": "latest",
+    "eslint-plugin-react-refresh": "latest",
+    "globals": "latest",
+    "prettier": "latest",
+    "tsx": "latest",
+    "typescript": "latest",
+    "vite": "latest"
   }
 }

plugins/fluidType.ts

···
  * - Guards with clamp() to cap at the ends.
  */
 export default function fluidType() {
-  return plugin(function ({ matchUtilities, theme }) {
+  return plugin(function ({ matchUtilities }) {
     const toNum = (s: string) => Number(s.trim());
 
     const parse = (raw: string) => {
···
       { values: {}, type: 'any' },
     );
 
-    // Optional presets for common typography scales
+    // Typography scale presets
+    // Format: [minPx, maxPx, viewportMinPx, viewportMaxPx]
+    // Scales from mobile (360px) to desktop (1200px) viewports
     const fsPresets: Record<string, [number, number, number, number]> = {
+      // sm: Small text (captions, footnotes, labels)
+      sm: [
+        14,
+        16,
+        360,
+        1200,
+      ],
+      // md: Medium text (body copy, paragraphs)
+      md: [
+        16,
+        24,
+        360,
+        1200,
+      ],
+      // lg: Large text (subheadings, lead paragraphs)
+      lg: [
+        24,
+        48,
+        360,
+        1200,
+      ],
+      // xl: Extra large text (headings)
+      xl: [
+        32,
+        56,
+        360,
+        1200,
+      ],
+      // 2xl: Display text (hero headings, page titles)
+      '2xl': [
+        48,
+        64,
+        360,
+        1200,
+      ],
+      // Legacy presets for backward compatibility
       h1: [
         28,
         88,
···
       ],
       body: [
         16,
-        18,
+        24,
         360,
         1200,
       ],
···
       {
         'fluid-preset': (key: string) => {
           const p = fsPresets[key];
-          if (!p) return {};
+          if (!p) return null;
           const [
             min,
             max,

src/components/Caption/Caption.styles.ts

···
+/**
+ * Caption Styles
+ *
+ * Uses the global typography system with fluid type scaling.
+ * Captions are always small text (sm size) with normal weight.
+ * Used for image captions, figure descriptions, etc.
+ */
+export const captionStyles = {
+  base: 'caption', // Uses the .caption preset from global CSS
+} as const;

src/components/Caption/Caption.tsx

···
+import { cn } from '@/lib/utils';
+import React from 'react';
+import { captionStyles } from './Caption.styles';
+import { CaptionProps } from './Caption.types';
+
+export const Caption = React.forwardRef<HTMLElement, CaptionProps>(
+  ({ children, className = '', ...props }, ref) => {
+    return (
+      <figcaption ref={ref} className={cn(captionStyles.base, className)} {...props}>
+        {children}
+      </figcaption>
+    );
+  },
+);
+
+Caption.displayName = 'Caption';

src/components/Caption/Caption.types.ts

···
+import { ReactNode } from 'react';
+
+export interface CaptionProps {
+  children: ReactNode;
+  className?: string;
+}

src/components/Caption/index.ts

···
+export { Caption } from './Caption';
+export type { CaptionProps } from './Caption.types';

src/components/CardArticle/CardArticle.styles.ts

···
 export const coverImage = 'object-cover w-full h-full transition-transform group-hover:scale-105';
 export const coverImageContainer = 'relative aspect-[16/9] w-full overflow-hidden bg-neutral-100 dark:bg-neutral-700';
 export const date = 'text-neutral-600 dark:text-neutral-400';
-export const detailContainer = 'flex flex-col gap-1';
+export const detailContainer = 'flex flex-col gap-4';
 export const metaContainer = 'flex items-center justify-between';
 export const publicationContainer = 'flex items-center gap-2';
 export const publicationIcon = 'h-8 w-8 object-contain';

src/components/CardArticle/CardArticle.tsx

···
         </div>
         <div className={styles.detailContainer}>
           {/* Title */}
-          <Heading level={3} style="title">
+          <Heading level={3} size="lg">
             {article.title}
           </Heading>
 

src/components/CardRole/CardRole.styles.ts

···
-// No custom styles needed - using Card component defaults
+export const cardWrapper =
+  'group relative flex flex-col h-full bg-bones-white dark:bg-bones-black text-left w-full cursor-pointer hover:bg-bones-white-10 dark:hover:bg-bones-black-10 transition-colors';
+export const contentContainer = 'flex flex-col flex-grow gap-4 p-8 justify-between';
+export const coverImage = 'object-cover w-full h-full transition-transform group-hover:scale-105';
+export const coverImageContainer = 'relative aspect-[16/9] w-full overflow-hidden bg-neutral-100 dark:bg-neutral-700';
+export const date = 'text-neutral-600 dark:text-neutral-400';
+export const detailContainer = 'flex flex-col gap-4';
+export const metaContainer = 'flex items-center justify-between';
+export const companyName = 'font-medium text-neutral-900 dark:text-neutral-100';

src/components/CardRole/CardRole.tsx

···
-import { CardNote } from '@/components/CardNote/CardNote';
+import { Heading } from '@/components/Heading/Heading';
+import { Paragraph } from '@/components/Paragraph/Paragraph';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { ROLES_BASE_PATH } from './CardRole.constants';
+import * as styles from './CardRole.styles';
 import { CardRoleProps } from './CardRole.types';
 
 export const CardRole: React.FC<CardRoleProps> = ({ role }) => {
   const navigate = useNavigate();
 
   return (
-    <CardNote
-      coverImage={role.coverImage}
-      meta={{
-        date: role.date,
-      }}
-      title={role.title}
-      description={`${role.company} | ${role.subtitle}`}
-      onClick={() => navigate(`${ROLES_BASE_PATH}/${role.slug}`)}
-    />
+    <button onClick={() => navigate(`${ROLES_BASE_PATH}/${role.slug}`)} className={styles.cardWrapper}>
+      {/* Cover Image (if available) */}
+      {role.coverImage && (
+        <div className={styles.coverImageContainer}>
+          <img src={role.coverImage} alt="" className={styles.coverImage} />
+        </div>
+      )}
+
+      {/* Content */}
+      <div className={styles.contentContainer}>
+        {/* Company Name (left) and Date (right) */}
+        <div className={styles.metaContainer}>
+          <span className={styles.companyName}>{role.company}</span>
+          <span className={styles.date}>{role.date}</span>
+        </div>
+        <div className={styles.detailContainer}>
+          {/* Title */}
+          <Heading level={3} size="lg">
+            {role.title}
+          </Heading>
+
+          {/* Subtitle/Description */}
+          {role.subtitle && <Paragraph>{role.subtitle}</Paragraph>}
+        </div>
+      </div>
+    </button>
   );
 };

src/components/Code/Code.styles.ts

···
+/**
+ * Code Styles
+ *
+ * Uses the global typography system with fluid type scaling.
+ * All code uses DM Mono font (monospace).
+ * Supports inline and block variants.
+ */
+export const codeStyles = {
+  base: 'font-normal font-dm-mono',
+  variants: {
+    inline: 'code-inline px-1.5 py-0.5 rounded bg-bones-black-5 dark:bg-bones-white-10',
+    block: 'code-block block p-4 rounded-lg bg-bones-black-5 dark:bg-bones-white-10 overflow-x-auto',
+  },
+} as const;

src/components/Code/Code.tsx

···
+import { cn } from '@/lib/utils';
+import React from 'react';
+import { codeStyles } from './Code.styles';
+import { CodeProps } from './Code.types';
+
+export const Code = React.forwardRef<HTMLElement, CodeProps>(
+  ({ children, variant = 'inline', language, className = '', ...props }, ref) => {
+    const codeElement = (
+      <code
+        ref={ref}
+        className={cn(codeStyles.base, codeStyles.variants[variant], className)}
+        data-language={language}
+        {...props}
+      >
+        {children}
+      </code>
+    );
+
+    // For block variant, wrap in <pre> tag
+    if (variant === 'block') {
+      return <pre className="not-prose">{codeElement}</pre>;
+    }
+
+    return codeElement;
+  },
+);
+
+Code.displayName = 'Code';

src/components/Code/Code.types.ts

···
+import { ReactNode } from 'react';
+
+export type CodeVariant = 'inline' | 'block';
+
+export interface CodeProps {
+  children: ReactNode;
+  variant?: CodeVariant; // 'inline' for <code>, 'block' for <pre><code>
+  language?: string; // Optional language identifier for syntax highlighting
+  className?: string;
+}

src/components/Code/index.ts

···
+export { Code } from './Code';
+export type { CodeProps, CodeVariant } from './Code.types';

src/components/Events/Event.tsx src/components/Event/Event.tsx

···
 }) => (
   <div className={cn(eventStyles.wrapper, className)}>
     <div className="flex items-center justify-between">
-      <Paragraph size="footnote">{eventAffiliation}</Paragraph>
-      <Paragraph size="footnote">
+      <Paragraph size="sm">{eventAffiliation}</Paragraph>
+      <Paragraph size="sm">
         {eventStartYear} &ndash; {eventEndYear}
       </Paragraph>
     </div>
     <div className="flex flex-col gap-2">
-      <Heading level={3} style="body">
+      <Heading level={3} size="md">
         {eventTitle}
       </Heading>
-      <Paragraph size="body">{eventDescription}</Paragraph>
+      <Paragraph size="md">{eventDescription}</Paragraph>
     </div>
-    <Paragraph size="footnote">{eventType}</Paragraph>
+    <Paragraph size="sm">{eventType}</Paragraph>
   </div>
 );

src/components/Events/Events.tsx

···
 import { cn } from '@/lib/utils';
 import React from 'react';
-import { Event } from './Event';
+import { Event } from '@/components/Event/Event';
 import { eventsStyles } from './Events.styles';
 import { EventsProps } from './Events.types';
 

src/components/Facts/Fact.tsx src/components/Fact/Fact.tsx

···
 
 export const Fact: React.FC<FactProps> = ({ title, subtitle, className = '' }) => (
   <div className={cn(factStyles.wrapper, className)}>
-    <Heading level={3} style="body">
+    <Heading level={3} size="md">
       {title}
     </Heading>
-    <Paragraph size="body">{subtitle}</Paragraph>
+    <Paragraph size="md">{subtitle}</Paragraph>
   </div>
 );

src/components/Facts/Facts.tsx

···
 import { cn } from '@/lib/utils';
 import React from 'react';
-import { Fact } from './Fact';
+import { Fact } from '@/components/Fact/Fact';
 import { factsStyles } from './Facts.styles';
 import { FactsProps } from './Facts.types';
 

src/components/Heading/Heading.styles.ts

···
+/**
+ * Heading Styles
+ *
+ * Uses the global typography system with fluid type scaling. All headings are bold (font-weight: 700) by default.
+ *
+ * Size prop controls visual appearance independent of semantic level. Example: <Heading level={3} size="xl"> renders an
+ * h3 with xl styling
+ */
 export const HeadingStyles = {
-  base: 'font-bold font-dm-sans',
+  base: 'font-dm-sans',
   sizes: {
-    billboard: 'italic font-medium text-6xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl leading-normal',
-    body: 'italic text-xl sm:text-xl md:text-2xl lg:text-3xl xl:text-3xl leading-normal',
-    footnote: 'italic text-base sm:text-base md:text-lg lg:text-xl xl:text-xl font-semibold leading-normal',
-    page: 'italic text-1xl sm:text-1xl md:text-1xl lg:text-2xl xl:text-3xl leading-normal',
-    section: 'italic text-3xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-5xl leading-normal',
-    title:
-      'italic text-3xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-5xl leading-tight sm:leading-tight md:leading-tight lg:leading-tight xl:leading-tight 2xl:leading-tight',
+    sm: 'heading-sm',
+    md: 'heading-md',
+    lg: 'heading-lg',
+    xl: 'heading-xl',
+    '2xl': 'heading-2xl',
   },
 } as const;

src/components/Heading/Heading.tsx

···
       return 'h3';
     case 4:
       return 'h4';
+    case 5:
+      return 'h5';
+    case 6:
+      return 'h6';
     default:
       return 'h3';
   }
 };
 
 export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
-  ({ children, level = 3, style = 'body', className = '', ...props }, ref) => {
+  ({ children, level = 3, size = 'md', className = '', ...props }, ref) => {
     const Component = getHeadingTag(level);
 
     return React.createElement(
       Component,
       {
         ref,
-        className: cn(HeadingStyles.base, HeadingStyles.sizes[style], className),
+        className: cn(HeadingStyles.base, HeadingStyles.sizes[size], className),
         ...props,
       },
       children,

src/components/Heading/Heading.types.ts

···
 import { ReactNode } from 'react';
 
-export type HeadingLevel = 1 | 2 | 3 | 4;
-export type HeadingStyle = 'page' | 'section' | 'body' | 'billboard' | 'footnote' | `title`;
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type HeadingSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
 export interface HeadingProps {
   children: ReactNode;
-  level?: HeadingLevel; // Semantic HTML tag
-  style?: HeadingStyle; // Visual style class
+  level?: HeadingLevel; // Semantic HTML tag (h1-h6)
+  size?: HeadingSize; // Visual size (sm, md, lg, xl, 2xl)
   className?: string;
 }

src/components/ListItem/ListItem.styles.ts

···
+/**
+ * ListItem Styles
+ *
+ * Uses the global typography system with fluid type scaling. Works with both ordered and unordered lists.
+ */
+
+export const listItemBase = 'font-dm-sans pl-4 pb-2';
+
+export const listItemSizes = {
+  sm: 'paragraph-sm',
+  md: 'paragraph-md',
+  lg: 'paragraph-lg',
+} as const;

src/components/ListItem/ListItem.tsx

···
+import { cn } from '@/lib/utils';
+import React from 'react';
+import { listItemBase, listItemSizes } from './ListItem.styles';
+import { ListItemProps } from './ListItem.types';
+
+export const ListItem: React.FC<ListItemProps> = ({ children, size = 'md', className = '', ...props }) => {
+  return (
+    <li className={cn(listItemBase, listItemSizes[size], className)} {...props}>
+      {children}
+    </li>
+  );
+};
+
+export default ListItem;

src/components/ListItem/ListItem.types.ts

···
+import { ReactNode } from 'react';
+
+export type ListItemSize = 'sm' | 'md' | 'lg';
+
+export interface ListItemProps {
+  children: ReactNode;
+  size?: ListItemSize;
+  className?: string;
+}

src/components/Mark/Mark.styles.ts

···
+/**
+ * Mark Styles
+ *
+ * Uses the global typography system with fluid type scaling.
+ * Highlights text with background color (default yellow).
+ * Inherits font family and weight from parent.
+ */
+export const markStyles = {
+  base: 'bg-bones-yellow text-bones-black',
+  sizes: {
+    sm: 'type-sm',   // 14px → 16px fluid
+    md: 'type-md',   // 16px → 18px fluid
+    lg: 'type-lg',   // 18px → 24px fluid
+    xl: 'type-xl',   // 24px → 36px fluid
+    '2xl': 'type-2xl', // 36px → 64px fluid
+  },
+} as const;

src/components/Mark/Mark.tsx

···
+import { cn } from '@/lib/utils';
+import React from 'react';
+import { markStyles } from './Mark.styles';
+import { MarkProps } from './Mark.types';
+
+export const Mark = React.forwardRef<HTMLElement, MarkProps>(
+  ({ children, size = 'md', className = '', ...props }, ref) => {
+    return (
+      <mark ref={ref} className={cn(markStyles.base, markStyles.sizes[size], className)} {...props}>
+        {children}
+      </mark>
+    );
+  },
+);
+
+Mark.displayName = 'Mark';

src/components/Mark/Mark.types.ts

···
+import { ReactNode } from 'react';
+
+export type MarkSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+export interface MarkProps {
+  children: ReactNode;
+  size?: MarkSize;
+  className?: string;
+}

src/components/Mark/index.ts

···
+export { Mark } from './Mark';
+export type { MarkProps, MarkSize } from './Mark.types';

src/components/OrderedList/OrderedList.styles.ts

···
+/**
+ * OrderedList Styles
+ *
+ * Provides different numbering styles using CSS list-style-type.
+ */
+
+export const listBase = 'list-inside space-y-2';
+
+export const numberStyles = {
+  decimal: 'list-decimal',
+  'lower-alpha': 'list-[lower-alpha]',
+  'upper-alpha': 'list-[upper-alpha]',
+  'lower-roman': 'list-[lower-roman]',
+  'upper-roman': 'list-[upper-roman]',
+} as const;

src/components/OrderedList/OrderedList.tsx

···
+import { cn } from '@/lib/utils';
+import React from 'react';
+import { listBase, numberStyles } from './OrderedList.styles';
+import { OrderedListProps } from './OrderedList.types';
+
+export const OrderedList: React.FC<OrderedListProps> = ({
+  children,
+  numberStyle = 'decimal',
+  className = '',
+  ...props
+}) => {
+  return (
+    <ol className={cn(listBase, numberStyles[numberStyle], className)} {...props}>
+      {children}
+    </ol>
+  );
+};
+
+export default OrderedList;

src/components/OrderedList/OrderedList.types.ts

···
+import { ReactNode } from 'react';
+
+export type NumberStyle = 'decimal' | 'lower-alpha' | 'upper-alpha' | 'lower-roman' | 'upper-roman';
+
+export interface OrderedListProps {
+  children: ReactNode;
+  numberStyle?: NumberStyle;
+  className?: string;
+}

src/components/Paragraph/Paragraph.styles.ts

···
+/**
+ * Paragraph Styles
+ *
+ * Uses the global typography system with fluid type scaling. All paragraphs use normal font weight (400) by default.
+ */
 export const paragraphStyles = {
   base: 'font-dm-sans',
   sizes: {
-    body: 'text-lg sm:text-lg md:text-lg lg:text-xl xl:text-2xl leading-snug sm:leading-snug md:leading-normal lg:leading-normal xl:leading-relaxed',
-    blockquote:
-      'italic text-6xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-8xl leading-tight sm:leading-tight md:leading-tight lg:leading-tight xl:leading-tight',
-    byline:
-      'font-medium text-1xl sm:text-1xl md:text-1xl lg:text-2xl xl:text-2xl leading-snug sm:leading-snug md:leading-normal lg:leading-normal xl:leading-normal',
-    caption:
-      'font-medium text-sm sm:text-sm md:text-base lg:text-base xl:text-base leading-snug sm:leading-snug md:leading-normal lg:leading-normal xl:leading-normal',
-    display:
-      'font-black text-4xl sm:text-5xl md:text-5xl lg:text-7xl xl:text-8xl leading-tight sm:leading-tight md:leading-tight lg:leading-none xl:leading-none',
-    footnote:
-      'text-sm sm:text-sm md:text-base lg:text-lg xl:text-lg leading-snug sm:leading-snug md:leading-normal lg:leading-normal xl:leading-normal',
-    label:
-      'font-medium text-1xl sm:text-1xl md:text-1xl lg:text-2xl xl:text-2xl leading-snug sm:leading-snug md:leading-normal lg:leading-normal xl:leading-normal',
-    lede: 'italic text-2xl sm:text-2xl md:text-2xl lg:text-3xl xl:text-4xl leading-snug sm:leading-snug md:leading-normal lg:leading-normal xl:leading-relaxed',
-    billboard:
-      'font-medium text-6xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl leading-tight sm:leading-tight md:leading-tight lg:leading-tight xl:leading-tight',
+    sm: 'paragraph-sm',
+    md: 'paragraph-md',
+    lg: 'paragraph-lg',
+    xl: 'paragraph-xl',
+    '2xl': 'paragraph-2xl',
   },
 } as const;

src/components/Paragraph/Paragraph.tsx

···
 import { ParagraphProps } from './Paragraph.types';
 
 export const Paragraph = React.forwardRef<HTMLParagraphElement, ParagraphProps>(
-  ({ children, size = 'body', className = '' }, ref) => {
+  ({ children, size = 'md', className = '' }, ref) => {
     return (
       <p ref={ref} className={cn(paragraphStyles.base, paragraphStyles.sizes[size], className)}>
         {children}

src/components/Paragraph/Paragraph.types.ts

···
 import { ReactNode } from 'react';
 
-export type ParagraphSize = 'footnote' | 'body' | 'lede' | 'label' | 'display' | 'blockquote' | 'caption' | 'byline' | 'billboard';
+export type ParagraphSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
 export interface ParagraphProps {
   children: ReactNode;

src/components/Quote/Quote.styles.ts

···
+/**
+ * Quote Styles
+ *
+ * Uses the global typography system with fluid type scaling.
+ * Blockquotes use DM Serif Display font and are italicized by default.
+ * Normal weight (400) for elegant readability.
+ */
+export const quoteStyles = {
+  base: 'font-normal font-dm-serif italic',
+  sizes: {
+    md: 'quote-md',  // 18px → 24px fluid, serif, italic
+    lg: 'quote-lg',  // 24px → 36px fluid, serif, italic
+    xl: 'quote-xl',  // 36px → 64px fluid, sans, italic
+  },
+} as const;

src/components/Quote/Quote.tsx

···
+import { cn } from '@/lib/utils';
+import React from 'react';
+import { quoteStyles } from './Quote.styles';
+import { QuoteProps } from './Quote.types';
+
+export const Quote = React.forwardRef<HTMLQuoteElement, QuoteProps>(
+  ({ children, size = 'md', cite, className = '', ...props }, ref) => {
+    return (
+      <blockquote
+        ref={ref}
+        className={cn(quoteStyles.base, quoteStyles.sizes[size], className)}
+        cite={cite}
+        {...props}
+      >
+        {children}
+      </blockquote>
+    );
+  },
+);
+
+Quote.displayName = 'Quote';

src/components/Quote/Quote.types.ts

···
+import { ReactNode } from 'react';
+
+export type QuoteSize = 'md' | 'lg' | 'xl';
+
+export interface QuoteProps {
+  children: ReactNode;
+  size?: QuoteSize;
+  cite?: string; // Optional citation URL
+  className?: string;
+}

src/components/Quote/index.ts

···
+export { Quote } from './Quote';
+export type { QuoteProps, QuoteSize } from './Quote.types';

src/components/Section/Section.styles.ts

···
 // Section inherits colors from page theme context
-export const section = 'w-full pt-32 pb-48 h-min-screen';
+export const section = 'w-full h-min-screen';

src/components/Section/Section.tsx

···
 export const Section: React.FC<SectionProps> = ({ children, className = '', ...props }) => {
   return (
     <section className={cn(section, className)} {...props}>
-      <div className="container flex flex-col gap-16 mx-auto">{children}</div>
+      <div className="container flex flex-col gap-8 mx-auto">{children}</div>
     </section>
   );
 };

src/components/Skills/Skill.tsx src/components/Skill/Skill.tsx

···
     <div className="flex flex-col gap-8">
       <Artwork name={skillArtwork} />
       <div className="flex flex-col gap-2">
-        <Heading level={3} style="body">
+        <Heading level={3} size="md">
           {skillTitle}
         </Heading>
-        <Paragraph size="byline">{skillDescription}</Paragraph>
-        <Paragraph size="body">{skillApproach}</Paragraph>
+        <Paragraph size="sm">{skillDescription}</Paragraph>
+        <Paragraph size="md">{skillApproach}</Paragraph>
         <Tags tags={skillTags} />
       </div>
     </div>

src/components/Skills/Skills.tsx

···
 import { cn } from '@/lib/utils';
 import React from 'react';
-import { Skill } from './Skill';
+import { Skill } from '@/components/Skill/Skill';
 import { skillsStyles } from './Skills.styles';
 import { SkillsProps } from './Skills.types';
 

src/components/Span/Span.styles.ts

···
+/**
+ * Span Styles
+ *
+ * Uses the global typography system with fluid type scaling.
+ * Spans inherit font-weight from parent by default.
+ * Use for inline text that needs specific sizing.
+ */
+export const spanStyles = {
+  base: 'font-dm-sans',
+  sizes: {
+    sm: 'type-sm',   // 14px → 16px fluid
+    md: 'type-md',   // 16px → 18px fluid
+    lg: 'type-lg',   // 18px → 24px fluid
+    xl: 'type-xl',   // 24px → 36px fluid
+    '2xl': 'type-2xl', // 36px → 64px fluid
+  },
+} as const;

src/components/Span/Span.tsx

···
+import { cn } from '@/lib/utils';
+import React from 'react';
+import { spanStyles } from './Span.styles';
+import { SpanProps } from './Span.types';
+
+export const Span = React.forwardRef<HTMLSpanElement, SpanProps>(
+  ({ children, size = 'md', className = '', ...props }, ref) => {
+    return (
+      <span ref={ref} className={cn(spanStyles.base, spanStyles.sizes[size], className)} {...props}>
+        {children}
+      </span>
+    );
+  },
+);
+
+Span.displayName = 'Span';

src/components/Span/Span.types.ts

···
+import { ReactNode } from 'react';
+
+export type SpanSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+export interface SpanProps {
+  children: ReactNode;
+  size?: SpanSize;
+  className?: string;
+}

src/components/Span/index.ts

···
+export { Span } from './Span';
+export type { SpanProps, SpanSize } from './Span.types';

src/components/TLDRProfile/TLDRProfile.tsx

···
 import { Tags } from '@/components/Tags/Tags';
 import { specializations } from '@/data/specializations';
 import type { JSX } from 'react';
-import * as styles from './TLDRProfile.styles';
+import { Heading } from '../Heading/Heading';
+import { Paragraph } from '../Paragraph/Paragraph';
 import { CONNECT_LINKS, PROFILE, SECTIONS } from './TLDRProfile.constants';
+import * as styles from './TLDRProfile.styles';
 
 /**
  * TL;DR Profile sidebar component
···
         <img src={PROFILE.avatarSrc} alt={PROFILE.name} className={styles.avatar} />
 
         <div className={styles.infoSection}>
-          <h1 className={styles.name}>{PROFILE.name}</h1>
-          <p className={styles.detail}>{PROFILE.title}</p>
-          <p className={styles.detail}>{PROFILE.location}</p>
-          <p className={styles.detail}>{PROFILE.experience}</p>
+          <Heading level={3} size="md">
+            {PROFILE.name}
+          </Heading>
+          <Paragraph size="sm">{PROFILE.title}</Paragraph>
+          <Paragraph size="sm">{PROFILE.location}</Paragraph>
+          <Paragraph size="sm">{PROFILE.experience}</Paragraph>
         </div>
 
         <div className={styles.section}>
-          <p className={styles.sectionTitle}>{SECTIONS.specializations}</p>
+          <Paragraph size="md">{SECTIONS.specializations}</Paragraph>
           <Tags tags={specializations} className="flex-wrap" />
         </div>
 
         <div className={styles.section}>
-          <p className={styles.sectionTitle}>{SECTIONS.connect}</p>
+          <Paragraph size="md">{SECTIONS.connect}</Paragraph>
+
+          <Paragraph className={styles.sectionTitle}>{SECTIONS.connect}</Paragraph>
           <div className={styles.connectLinks}>
             {CONNECT_LINKS.map((link) => (
               <Link key={link.href} href={link.href} target="_blank" rel="noopener noreferrer">

src/components/Tags/Tag.tsx src/components/Tag/Tag.tsx

···
 export const Tag: React.FC<TagProps> = ({ label, className = '' }) => {
   return (
     <div className={cn(tagStyles.base, className)}>
-      <Paragraph size="label">{label}</Paragraph>
+      <Paragraph size="sm">{label}</Paragraph>
     </div>
   );
 };

src/components/Tags/Tags.tsx

···
 import { cn } from '@/lib/utils';
 import React from 'react';
-import { Paragraph } from '../Paragraph/Paragraph';
-
-interface TagProps {
-  label: string;
-}
-
-export const Tag: React.FC<TagProps> = ({ label }) => (
-  <span className="px-2 py-1 text-sm font-medium bg-gray-200 rounded">{label}</span>
-);
+import { Paragraph } from '@/components/Paragraph/Paragraph';
+import { Tag } from '@/components/Tag/Tag';
 
 interface TagsProps {
   tags?: string;
···
       {tagArray.length > 0 ? (
         tagArray.map((tag, index) => <Tag key={`${tag}-${index}`} label={tag} />)
       ) : (
-        <Paragraph size="label">No tags available</Paragraph>
+        <Paragraph size="sm">No tags available</Paragraph>
       )}
     </div>
   );

src/components/Timeline/Timeline.tsx

···
             <span className={timelineStyles.date}>{item.date}</span>
           </div>
           <div className={timelineStyles.contentWrapper}>
-            <Heading level={4} style="footnote" className={timelineStyles.title}>
+            <Heading level={4} size="sm" className={timelineStyles.title}>
               {item.title}
             </Heading>
-            <Paragraph size="footnote" className={timelineStyles.description}>
+            <Paragraph size="sm" className={timelineStyles.description}>
               {item.description}
             </Paragraph>
           </div>

src/components/UnorderedList/UnorderedList.styles.ts

···
+/**
+ * UnorderedList Styles
+ *
+ * Provides different bullet styles using CSS list-style-type. Custom bullets use unicode glyphs for consistent
+ * cross-browser rendering.
+ */
+
+export const listBase = 'list-outside';
+
+export const bulletStyles = {
+  disc: "[&>li]:list-['•']",
+  circle: "[&>li]:list-['◦']",
+  square: "[&>li]:list-['▪']",
+  arrow: "[&>li]:list-['➝']",
+  dash: "[&>li]:list-['–']",
+  angle: "[&>li]:list-['›']",
+} as const;

src/components/UnorderedList/UnorderedList.tsx

···
+import { cn } from '@/lib/utils';
+import React from 'react';
+import { bulletStyles, listBase } from './UnorderedList.styles';
+import { UnorderedListProps } from './UnorderedList.types';
+
+export const UnorderedList: React.FC<UnorderedListProps> = ({ children, bullet = 'disc', className = '', ...props }) => {
+  return (
+    <ul className={cn(listBase, bulletStyles[bullet], className)} {...props}>
+      {children}
+    </ul>
+  );
+};
+
+export default UnorderedList;

src/components/UnorderedList/UnorderedList.types.ts

···
+import { ReactNode } from 'react';
+
+export type BulletStyle = 'disc' | 'circle' | 'square' | 'arrow' | 'dash' | 'angle';
+
+export interface UnorderedListProps {
+  children: ReactNode;
+  bullet?: BulletStyle;
+  className?: string;
+}

src/global.css

···
-html {
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  font-family: sans-serif;
-}
-
-body {
-  margin: 0;
-}
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block;
-}
-
-audio,
-canvas,
-progress,
-video {
-  vertical-align: baseline;
-  display: inline-block;
-}
-
-audio:not([controls]) {
-  height: 0;
-  display: none;
-}
-
-[hidden],
-template {
-  display: none;
-}
-
-a {
-  background-color: rgba(0, 0, 0, 0);
-}
-
-a:active,
-a:hover {
-  outline: 0;
-}
-
-abbr[title] {
-  border-bottom: 1px dotted;
-}
-
-b,
-strong {
-  font-weight: bold;
-}
-
-dfn {
-  font-style: italic;
-}
-
-h1 {
-  margin: 0.67em 0;
-  font-size: 2em;
-}
-
-mark {
-  color: #000;
-  background: #ff0;
-}
-
-small {
-  font-size: 80%;
-}
-
-sub,
-sup {
-  vertical-align: baseline;
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-}
-
-sup {
-  top: -0.5em;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-img {
-  border: 0;
-}
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
-hr {
-  box-sizing: content-box;
-  height: 0;
-}
-
-pre {
-  overflow: auto;
-}
-
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace;
-  font-size: 1em;
-}
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  color: inherit;
-  font: inherit;
-  margin: 0;
-}
-
-button {
-  overflow: visible;
-}
-
-button,
-select {
-  text-transform: none;
-}
-
-button,
-html input[type='button'],
-input[type='reset'] {
-  -webkit-appearance: button;
-  appearance: button;
-  cursor: pointer;
-}
-
-button[disabled],
-html input[disabled] {
-  cursor: default;
-}
-
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-
-input {
-  line-height: normal;
-}
-
-input[type='checkbox'],
-input[type='radio'] {
-  box-sizing: border-box;
-  padding: 0;
-}
-
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
-  height: auto;
-}
-
-input[type='search'] {
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-input[type='search']::-webkit-search-cancel-button,
-input[type='search']::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-legend {
-  border: 0;
-  padding: 0;
-}
-
-textarea {
-  overflow: auto;
-}
-
-optgroup {
-  font-weight: bold;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-td,
-th {
-  padding: 0;
-}
-
-@font-face {
-  font-family: webflow-icons;
-  src: url('data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==')
-    format('truetype');
-  font-weight: normal;
-  font-style: normal;
-}
-
-[class^='w-icon-'],
-[class*=' w-icon-'] {
-  font-variant: normal;
-  text-transform: none;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-style: normal;
-  font-weight: normal;
-  line-height: 1;
-  font-family: webflow-icons !important;
-}
-
-.w-icon-slider-right:before {
-  content: '';
-}
-
-.w-icon-slider-left:before {
-  content: '';
-}
-
-.w-icon-nav-menu:before {
-  content: '';
-}
-
-.w-icon-arrow-down:before,
-.w-icon-dropdown-toggle:before {
-  content: '';
-}
-
-.w-icon-file-upload-remove:before {
-  content: '';
-}
-
-.w-icon-file-upload-icon:before {
-  content: '';
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html {
-  height: 100%;
-}
-
-body {
-  color: #333;
-  background-color: #fff;
-  min-height: 100%;
-  margin: 0;
-  font-family: Arial, sans-serif;
-  font-size: 14px;
-  line-height: 20px;
-}
-
-img {
-  vertical-align: middle;
-  max-width: 100%;
-  display: inline-block;
-}
-
-html.w-mod-touch * {
-  background-attachment: scroll !important;
-}
-
-.w-block {
-  display: block;
-}
-
-.w-inline-block {
-  max-width: 100%;
-  display: inline-block;
-}
-
-.w-clearfix:before,
-.w-clearfix:after {
-  content: ' ';
-  grid-area: 1 / 1 / 2 / 2;
-  display: table;
-}
-
-.w-clearfix:after {
-  clear: both;
-}
-
-.w-hidden {
-  display: none;
-}
-
-.w-button {
-  color: #fff;
-  line-height: inherit;
-  cursor: pointer;
-  background-color: #3898ec;
-  border: 0;
-  border-radius: 0;
-  padding: 9px 15px;
-  text-decoration: none;
-  display: inline-block;
-}
-
-input.w-button {
-  -webkit-appearance: button;
-  appearance: button;
-}
-
-html[data-w-dynpage] [data-w-cloak] {
-  color: rgba(0, 0, 0, 0) !important;
-}
-
-.w-code-block {
-  margin: unset;
-}
-
-pre.w-code-block code {
-  all: inherit;
-}
-
-.w-webflow-badge,
-.w-webflow-badge * {
-  z-index: auto;
-  visibility: visible;
-  box-sizing: border-box;
-  float: none;
-  clear: none;
-  box-shadow: none;
-  opacity: 1;
-  direction: ltr;
-  font-family: inherit;
-  font-weight: inherit;
-  color: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  font-style: inherit;
-  font-variant: inherit;
-  text-align: inherit;
-  letter-spacing: inherit;
-  -webkit-text-decoration: inherit;
-  text-decoration: inherit;
-  text-indent: 0;
-  text-transform: inherit;
-  text-shadow: none;
-  cursor: inherit;
-  white-space: inherit;
-  word-break: normal;
-  word-spacing: normal;
-  word-wrap: normal;
-  background: none;
-  border: 0 rgba(0, 0, 0, 0);
-  border-radius: 0;
-  width: auto;
-  min-width: 0;
-  max-width: none;
-  height: auto;
-  min-height: 0;
-  max-height: none;
-  margin: 0;
-  padding: 0;
-  list-style-type: disc;
-  transition: none;
-  display: block;
-  position: static;
-  top: auto;
-  bottom: auto;
-  left: auto;
-  right: auto;
-  overflow: visible;
-  transform: none;
-}
-
-.w-webflow-badge {
-  white-space: nowrap;
-  cursor: pointer;
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.1),
-    0 1px 3px rgba(0, 0, 0, 0.1);
-  visibility: visible !important;
-  z-index: 2147483647 !important;
-  color: #aaadb0 !important;
-  opacity: 1 !important;
-  background-color: #fff !important;
-  border-radius: 3px !important;
-  width: auto !important;
-  height: auto !important;
-  margin: 0 !important;
-  padding: 6px !important;
-  font-size: 12px !important;
-  line-height: 14px !important;
-  text-decoration: none !important;
-  display: inline-block !important;
-  position: fixed !important;
-  top: auto !important;
-  bottom: 12px !important;
-  left: auto !important;
-  right: 12px !important;
-  overflow: visible !important;
-  transform: none !important;
-}
-
-.w-webflow-badge > img {
-  visibility: visible !important;
-  opacity: 1 !important;
-  vertical-align: middle !important;
-  display: inline-block !important;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-bottom: 10px;
-  font-weight: bold;
-}
-
-h1 {
-  margin-top: 20px;
-  font-size: 38px;
-  line-height: 44px;
-}
-
-h2 {
-  margin-top: 20px;
-  font-size: 32px;
-  line-height: 36px;
-}
-
-h3 {
-  margin-top: 20px;
-  font-size: 24px;
-  line-height: 30px;
-}
-
-h4 {
-  margin-top: 10px;
-  font-size: 18px;
-  line-height: 24px;
-}
-
-h5 {
-  margin-top: 10px;
-  font-size: 14px;
-  line-height: 20px;
-}
-
-h6 {
-  margin-top: 10px;
-  font-size: 12px;
-  line-height: 18px;
-}
-
-p {
-  margin-top: 0;
-  margin-bottom: 10px;
-}
-
-blockquote {
-  border-left: 5px solid #e2e2e2;
-  margin: 0 0 10px;
-  padding: 10px 20px;
-  font-size: 18px;
-  line-height: 22px;
-}
-
-figure {
-  margin: 0 0 10px;
-}
-
-figcaption {
-  text-align: center;
-  margin-top: 5px;
-}
-
-ul,
-ol {
-  margin-top: 0;
-  margin-bottom: 10px;
-  padding-left: 40px;
-}
-
-.w-list-unstyled {
-  padding-left: 0;
-  list-style: none;
-}
-
-.w-embed:before,
-.w-embed:after {
-  content: ' ';
-  grid-area: 1 / 1 / 2 / 2;
-  display: table;
-}
-
-.w-embed:after {
-  clear: both;
-}
-
-.w-video {
-  width: 100%;
-  padding: 0;
-  position: relative;
-}
-
-.w-video iframe,
-.w-video object,
-.w-video embed {
-  border: none;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-fieldset {
-  border: 0;
-  margin: 0;
-  padding: 0;
-}
-
-button,
-[type='button'],
-[type='reset'] {
-  cursor: pointer;
-  -webkit-appearance: button;
-  appearance: button;
-  border: 0;
-}
-
-.w-form {
-  margin: 0 0 15px;
-}
-
-.w-form-done {
-  text-align: center;
-  background-color: #ddd;
-  padding: 20px;
-  display: none;
-}
-
-.w-form-fail {
-  background-color: #ffdede;
-  margin-top: 10px;
-  padding: 10px;
-  display: none;
-}
-
-label {
-  margin-bottom: 5px;
-  font-weight: bold;
-  display: block;
-}
-
-.w-input,
-.w-select {
-  color: #333;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  width: 100%;
-  height: 38px;
-  margin-bottom: 10px;
-  padding: 8px 12px;
-  font-size: 14px;
-  line-height: 1.42857;
-  display: block;
-}
-
-.w-input:-moz-placeholder,
-.w-select:-moz-placeholder {
-  color: #999;
-}
-
-.w-input::-moz-placeholder,
-.w-select::-moz-placeholder {
-  color: #999;
-  opacity: 1;
-}
-
-.w-input::-webkit-input-placeholder,
-.w-select::-webkit-input-placeholder {
-  color: #999;
-}
-
-.w-input:focus,
-.w-select:focus {
-  border-color: #3898ec;
-  outline: 0;
-}
-
-.w-input[disabled],
-.w-select[disabled],
-.w-input[readonly],
-.w-select[readonly],
-fieldset[disabled] .w-input,
-fieldset[disabled] .w-select {
-  cursor: not-allowed;
-}
-
-.w-input[disabled]:not(.w-input-disabled),
-.w-select[disabled]:not(.w-input-disabled),
-.w-input[readonly],
-.w-select[readonly],
-fieldset[disabled]:not(.w-input-disabled) .w-input,
-fieldset[disabled]:not(.w-input-disabled) .w-select {
-  background-color: #eee;
-}
-
-textarea.w-input,
-textarea.w-select {
-  height: auto;
-}
-
-.w-select {
-  background-color: #f3f3f3;
-}
-
-.w-select[multiple] {
-  height: auto;
-}
-
-.w-form-label {
-  cursor: pointer;
-  margin-bottom: 0;
-  font-weight: normal;
-  display: inline-block;
-}
-
-.w-radio {
-  margin-bottom: 5px;
-  padding-left: 20px;
-  display: block;
-}
-
-.w-radio:before,
-.w-radio:after {
-  content: ' ';
-  grid-area: 1 / 1 / 2 / 2;
-  display: table;
-}
-
-.w-radio:after {
-  clear: both;
-}
-
-.w-radio-input {
-  float: left;
-  margin: 3px 0 0 -20px;
-  line-height: normal;
-}
-
-.w-file-upload {
-  margin-bottom: 10px;
-  display: block;
-}
-
-.w-file-upload-input {
-  opacity: 0;
-  z-index: -100;
-  width: 0.1px;
-  height: 0.1px;
-  position: absolute;
-  overflow: hidden;
-}
-
-.w-file-upload-default,
-.w-file-upload-uploading,
-.w-file-upload-success {
-  color: #333;
-  display: inline-block;
-}
-
-.w-file-upload-error {
-  margin-top: 10px;
-  display: block;
-}
-
-.w-file-upload-default.w-hidden,
-.w-file-upload-uploading.w-hidden,
-.w-file-upload-error.w-hidden,
-.w-file-upload-success.w-hidden {
-  display: none;
-}
-
-.w-file-upload-uploading-btn {
-  cursor: pointer;
-  background-color: #fafafa;
-  border: 1px solid #ccc;
-  margin: 0;
-  padding: 8px 12px;
-  font-size: 14px;
-  font-weight: normal;
-  display: flex;
-}
-
-.w-file-upload-file {
-  background-color: #fafafa;
-  border: 1px solid #ccc;
-  flex-grow: 1;
-  justify-content: space-between;
-  margin: 0;
-  padding: 8px 9px 8px 11px;
-  display: flex;
-}
-
-.w-file-upload-file-name {
-  font-size: 14px;
-  font-weight: normal;
-  display: block;
-}
-
-.w-file-remove-link {
-  cursor: pointer;
-  width: auto;
-  height: auto;
-  margin-top: 3px;
-  margin-left: 10px;
-  padding: 3px;
-  display: block;
-}
-
-.w-icon-file-upload-remove {
-  margin: auto;
-  font-size: 10px;
-}
-
-.w-file-upload-error-msg {
-  color: #ea384c;
-  padding: 2px 0;
-  display: inline-block;
-}
-
-.w-file-upload-info {
-  padding: 0 12px;
-  line-height: 38px;
-  display: inline-block;
-}
-
-.w-file-upload-label {
-  cursor: pointer;
-  background-color: #fafafa;
-  border: 1px solid #ccc;
-  margin: 0;
-  padding: 8px 12px;
-  font-size: 14px;
-  font-weight: normal;
-  display: inline-block;
-}
-
-.w-icon-file-upload-icon,
-.w-icon-file-upload-uploading {
-  width: 20px;
-  margin-right: 8px;
-  display: inline-block;
-}
-
-.w-icon-file-upload-uploading {
-  height: 20px;
-}
-
-.w-container {
-  max-width: 940px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.w-container:before,
-.w-container:after {
-  content: ' ';
-  grid-area: 1 / 1 / 2 / 2;
-  display: table;
-}
-
-.w-container:after {
-  clear: both;
-}
-
-.w-container .w-row {
-  margin-left: -10px;
-  margin-right: -10px;
-}
-
-.w-row:before,
-.w-row:after {
-  content: ' ';
-  grid-area: 1 / 1 / 2 / 2;
-  display: table;
-}
-
-.w-row:after {
-  clear: both;
-}
-
-.w-row .w-row {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.w-col {
-  float: left;
-  width: 100%;
-  min-height: 1px;
-  padding-left: 10px;
-  padding-right: 10px;
-  position: relative;
-}
-
-.w-col .w-col {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.w-col-1 {
-  width: 8.33333%;
-}
-
-.w-col-2 {
-  width: 16.6667%;
-}
-
-.w-col-3 {
-  width: 25%;
-}
-
-.w-col-4 {
-  width: 33.3333%;
-}
-
-.w-col-5 {
-  width: 41.6667%;
-}
-
-.w-col-6 {
-  width: 50%;
-}
-
-.w-col-7 {
-  width: 58.3333%;
-}
-
-.w-col-8 {
-  width: 66.6667%;
-}
-
-.w-col-9 {
-  width: 75%;
-}
-
-.w-col-10 {
-  width: 83.3333%;
-}
-
-.w-col-11 {
-  width: 91.6667%;
-}
-
-.w-col-12 {
-  width: 100%;
-}
-
-.w-hidden-main {
-  display: none !important;
-}
-
-@media screen and (max-width: 991px) {
-  .w-container {
-    max-width: 728px;
-  }
-
-  .w-hidden-main {
-    display: inherit !important;
-  }
-
-  .w-hidden-medium {
-    display: none !important;
-  }
-
-  .w-col-medium-1 {
-    width: 8.33333%;
-  }
-
-  .w-col-medium-2 {
-    width: 16.6667%;
-  }
-
-  .w-col-medium-3 {
-    width: 25%;
-  }
-
-  .w-col-medium-4 {
-    width: 33.3333%;
-  }
-
-  .w-col-medium-5 {
-    width: 41.6667%;
-  }
-
-  .w-col-medium-6 {
-    width: 50%;
-  }
-
-  .w-col-medium-7 {
-    width: 58.3333%;
-  }
-
-  .w-col-medium-8 {
-    width: 66.6667%;
-  }
-
-  .w-col-medium-9 {
-    width: 75%;
-  }
-
-  .w-col-medium-10 {
-    width: 83.3333%;
-  }
-
-  .w-col-medium-11 {
-    width: 91.6667%;
-  }
-
-  .w-col-medium-12 {
-    width: 100%;
-  }
-
-  .w-col-stack {
-    width: 100%;
-    left: auto;
-    right: auto;
-  }
-}
-
-@media screen and (max-width: 767px) {
-  .w-hidden-main,
-  .w-hidden-medium {
-    display: inherit !important;
-  }
-
-  .w-hidden-small {
-    display: none !important;
-  }
-
-  .w-row,
-  .w-container .w-row {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  .w-col {
-    width: 100%;
-    left: auto;
-    right: auto;
-  }
-
-  .w-col-small-1 {
-    width: 8.33333%;
-  }
-
-  .w-col-small-2 {
-    width: 16.6667%;
-  }
-
-  .w-col-small-3 {
-    width: 25%;
-  }
-
-  .w-col-small-4 {
-    width: 33.3333%;
-  }
-
-  .w-col-small-5 {
-    width: 41.6667%;
-  }
-
-  .w-col-small-6 {
-    width: 50%;
-  }
-
-  .w-col-small-7 {
-    width: 58.3333%;
-  }
-
-  .w-col-small-8 {
-    width: 66.6667%;
-  }
-
-  .w-col-small-9 {
-    width: 75%;
-  }
-
-  .w-col-small-10 {
-    width: 83.3333%;
-  }
-
-  .w-col-small-11 {
-    width: 91.6667%;
-  }
-
-  .w-col-small-12 {
-    width: 100%;
-  }
-}
-
-@media screen and (max-width: 479px) {
-  .w-container {
-    max-width: none;
-  }
-
-  .w-hidden-main,
-  .w-hidden-medium,
-  .w-hidden-small {
-    display: inherit !important;
-  }
-
-  .w-hidden-tiny {
-    display: none !important;
-  }
-
-  .w-col {
-    width: 100%;
-  }
-
-  .w-col-tiny-1 {
-    width: 8.33333%;
-  }
-
-  .w-col-tiny-2 {
-    width: 16.6667%;
-  }
-
-  .w-col-tiny-3 {
-    width: 25%;
-  }
-
-  .w-col-tiny-4 {
-    width: 33.3333%;
-  }
-
-  .w-col-tiny-5 {
-    width: 41.6667%;
-  }
-
-  .w-col-tiny-6 {
-    width: 50%;
-  }
-
-  .w-col-tiny-7 {
-    width: 58.3333%;
-  }
-
-  .w-col-tiny-8 {
-    width: 66.6667%;
-  }
-
-  .w-col-tiny-9 {
-    width: 75%;
-  }
-
-  .w-col-tiny-10 {
-    width: 83.3333%;
-  }
-
-  .w-col-tiny-11 {
-    width: 91.6667%;
-  }
-
-  .w-col-tiny-12 {
-    width: 100%;
-  }
-}
-
-.w-widget {
-  position: relative;
-}
-
-.w-widget-map {
-  width: 100%;
-  height: 400px;
-}
-
-.w-widget-map label {
-  width: auto;
-  display: inline;
-}
-
-.w-widget-map img {
-  max-width: inherit;
-}
-
-.w-widget-map .gm-style-iw {
-  text-align: center;
-}
-
-.w-widget-map .gm-style-iw > button {
-  display: none !important;
-}
-
-.w-widget-twitter {
-  overflow: hidden;
-}
-
-.w-widget-twitter-count-shim {
-  vertical-align: top;
-  text-align: center;
-  background: #fff;
-  border: 1px solid #758696;
-  border-radius: 3px;
-  width: 28px;
-  height: 20px;
-  display: inline-block;
-  position: relative;
-}
-
-.w-widget-twitter-count-shim * {
-  pointer-events: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.w-widget-twitter-count-shim .w-widget-twitter-count-inner {
-  text-align: center;
-  color: #999;
-  font-family: serif;
-  font-size: 15px;
-  line-height: 12px;
-  position: relative;
-}
-
-.w-widget-twitter-count-shim .w-widget-twitter-count-clear {
-  display: block;
-  position: relative;
-}
-
-.w-widget-twitter-count-shim.w--large {
-  width: 36px;
-  height: 28px;
-}
-
-.w-widget-twitter-count-shim.w--large .w-widget-twitter-count-inner {
-  font-size: 18px;
-  line-height: 18px;
-}
-
-.w-widget-twitter-count-shim:not(.w--vertical) {
-  margin-left: 5px;
-  margin-right: 8px;
-}
-
-.w-widget-twitter-count-shim:not(.w--vertical).w--large {
-  margin-left: 6px;
-}
-
-.w-widget-twitter-count-shim:not(.w--vertical):before,
-.w-widget-twitter-count-shim:not(.w--vertical):after {
-  content: ' ';
-  pointer-events: none;
-  border: solid rgba(0, 0, 0, 0);
-  width: 0;
-  height: 0;
-  position: absolute;
-  top: 50%;
-  left: 0;
-}
-
-.w-widget-twitter-count-shim:not(.w--vertical):before {
-  border-width: 4px;
-  border-color: rgba(117, 134, 150, 0) #5d6c7b rgba(117, 134, 150, 0) rgba(117, 134, 150, 0);
-  margin-top: -4px;
-  margin-left: -9px;
-}
-
-.w-widget-twitter-count-shim:not(.w--vertical).w--large:before {
-  border-width: 5px;
-  margin-top: -5px;
-  margin-left: -10px;
-}
-
-.w-widget-twitter-count-shim:not(.w--vertical):after {
-  border-width: 4px;
-  border-color: rgba(255, 255, 255, 0) #fff rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
-  margin-top: -4px;
-  margin-left: -8px;
-}
-
-.w-widget-twitter-count-shim:not(.w--vertical).w--large:after {
-  border-width: 5px;
-  margin-top: -5px;
-  margin-left: -9px;
-}
-
-.w-widget-twitter-count-shim.w--vertical {
-  width: 61px;
-  height: 33px;
-  margin-bottom: 8px;
-}
-
-.w-widget-twitter-count-shim.w--vertical:before,
-.w-widget-twitter-count-shim.w--vertical:after {
-  content: ' ';
-  pointer-events: none;
-  border: solid rgba(0, 0, 0, 0);
-  width: 0;
-  height: 0;
-  position: absolute;
-  top: 100%;
-  left: 50%;
-}
-
-.w-widget-twitter-count-shim.w--vertical:before {
-  border-width: 5px;
-  border-color: #5d6c7b rgba(117, 134, 150, 0) rgba(117, 134, 150, 0);
-  margin-left: -5px;
-}
-
-.w-widget-twitter-count-shim.w--vertical:after {
-  border-width: 4px;
-  border-color: #fff rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
-  margin-left: -4px;
-}
-
-.w-widget-twitter-count-shim.w--vertical .w-widget-twitter-count-inner {
-  font-size: 18px;
-  line-height: 22px;
-}
-
-.w-widget-twitter-count-shim.w--vertical.w--large {
-  width: 76px;
-}
-
-.w-background-video {
-  color: #fff;
-  height: 500px;
-  position: relative;
-  overflow: hidden;
-}
-
-.w-background-video > video {
-  object-fit: cover;
-  z-index: -100;
-  background-position: 50%;
-  background-size: cover;
-  width: 100%;
-  height: 100%;
-  margin: auto;
-  position: absolute;
-  top: -100%;
-  bottom: -100%;
-  left: -100%;
-  right: -100%;
-}
-
-.w-background-video > video::-webkit-media-controls-start-playback-button {
-  -webkit-appearance: none;
-  display: none !important;
-}
-
-.w-background-video--control {
-  background-color: rgba(0, 0, 0, 0);
-  padding: 0;
-  position: absolute;
-  bottom: 1em;
-  right: 1em;
-}
-
-.w-background-video--control > [hidden] {
-  display: none !important;
-}
-
-.w-slider {
-  text-align: center;
-  clear: both;
-
-  background: #ddd;
-  height: 300px;
-  position: relative;
-}
-
-.w-slider-mask {
-  z-index: 1;
-  white-space: nowrap;
-  height: 100%;
-  display: block;
-  position: relative;
-  left: 0;
-  right: 0;
-  overflow: hidden;
-}
-
-.w-slide {
-  vertical-align: top;
-  white-space: normal;
-  text-align: left;
-  width: 100%;
-  height: 100%;
-  display: inline-block;
-  position: relative;
-}
-
-.w-slider-nav {
-  z-index: 2;
-  text-align: center;
-
-  height: 40px;
-  margin: auto;
-  padding-top: 10px;
-  position: absolute;
-  top: auto;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
-.w-slider-nav.w-round > div {
-  border-radius: 100%;
-}
-
-.w-slider-nav.w-num > div {
-  font-size: inherit;
-  line-height: inherit;
-  width: auto;
-  height: auto;
-  padding: 0.2em 0.5em;
-}
-
-.w-slider-nav.w-shadow > div {
-  box-shadow: 0 0 3px rgba(51, 51, 51, 0.4);
-}
-
-.w-slider-nav-invert {
-  color: #fff;
-}
-
-.w-slider-nav-invert > div {
-  background-color: rgba(34, 34, 34, 0.4);
-}
-
-.w-slider-nav-invert > div.w-active {
-  background-color: #222;
-}
-
-.w-slider-dot {
-  cursor: pointer;
-  background-color: rgba(255, 255, 255, 0.4);
-  width: 1em;
-  height: 1em;
-  margin: 0 3px 0.5em;
-  transition:
-    background-color 0.1s,
-    color 0.1s;
-  display: inline-block;
-  position: relative;
-}
-
-.w-slider-dot.w-active {
-  background-color: #fff;
-}
-
-.w-slider-dot:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #fff;
-}
-
-.w-slider-dot:focus.w-active {
-  box-shadow: none;
-}
-
-.w-slider-arrow-left,
-.w-slider-arrow-right {
-  cursor: pointer;
-  color: #fff;
-
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  width: 80px;
-  margin: auto;
-  font-size: 40px;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  overflow: hidden;
-}
-
-.w-slider-arrow-left [class^='w-icon-'],
-.w-slider-arrow-right [class^='w-icon-'],
-.w-slider-arrow-left [class*=' w-icon-'],
-.w-slider-arrow-right [class*=' w-icon-'] {
-  position: absolute;
-}
-
-.w-slider-arrow-left:focus,
-.w-slider-arrow-right:focus {
-  outline: 0;
-}
-
-.w-slider-arrow-left {
-  z-index: 3;
-  right: auto;
-}
-
-.w-slider-arrow-right {
-  z-index: 4;
-  left: auto;
-}
-
-.w-icon-slider-left,
-.w-icon-slider-right {
-  width: 1em;
-  height: 1em;
-  margin: auto;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
-.w-slider-aria-label {
-  clip: rect(0 0 0 0);
-  border: 0;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  position: absolute;
-  overflow: hidden;
-}
-
-.w-slider-force-show {
-  display: block !important;
-}
-
-.w-dropdown {
-  text-align: left;
-  z-index: 900;
-  margin-left: auto;
-  margin-right: auto;
-  display: inline-block;
-  position: relative;
-}
-
-.w-dropdown-btn,
-.w-dropdown-toggle,
-.w-dropdown-link {
-  vertical-align: top;
-  color: #222;
-  text-align: left;
-  white-space: nowrap;
-  margin-left: auto;
-  margin-right: auto;
-  padding: 20px;
-  text-decoration: none;
-  position: relative;
-}
-
-.w-dropdown-toggle {
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  cursor: pointer;
-  padding-right: 40px;
-  display: inline-block;
-}
-
-.w-dropdown-toggle:focus {
-  outline: 0;
-}
-
-.w-icon-dropdown-toggle {
-  width: 1em;
-  height: 1em;
-  margin: auto 20px auto auto;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-}
-
-.w-dropdown-list {
-  background: #ddd;
-  min-width: 100%;
-  display: none;
-  position: absolute;
-}
-
-.w-dropdown-list.w--open {
-  display: block;
-}
-
-.w-dropdown-link {
-  color: #222;
-  padding: 10px 20px;
-  display: block;
-}
-
-.w-dropdown-link.w--current {
-  color: #0082f3;
-}
-
-.w-dropdown-link:focus {
-  outline: 0;
-}
-
-@media screen and (max-width: 767px) {
-  .w-nav-brand {
-    padding-left: 10px;
-  }
-}
-
-.w-lightbox-backdrop {
-  cursor: auto;
-  letter-spacing: normal;
-  text-indent: 0;
-  text-shadow: none;
-  text-transform: none;
-  visibility: visible;
-  white-space: normal;
-  word-break: normal;
-  word-spacing: normal;
-  word-wrap: normal;
-  color: #fff;
-  text-align: center;
-  z-index: 2000;
-  opacity: 0;
-  -webkit-tap-highlight-color: transparent;
-  background: rgba(0, 0, 0, 0.9);
-  outline: 0;
-  font-family:
-    Helvetica Neue,
-    Helvetica,
-    Ubuntu,
-    Segoe UI,
-    Verdana,
-    sans-serif;
-  font-size: 17px;
-  font-style: normal;
-  font-weight: 300;
-  line-height: 1.2;
-  list-style: disc;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  -webkit-transform: translate(0);
-  transform: translate(0);
-}
-
-.w-lightbox-backdrop,
-.w-lightbox-container {
-  -webkit-overflow-scrolling: touch;
-  height: 100%;
-  overflow: auto;
-}
-
-.w-lightbox-content {
-  height: 100vh;
-  position: relative;
-  overflow: hidden;
-}
-
-.w-lightbox-view {
-  opacity: 0;
-  width: 100vw;
-  height: 100vh;
-  position: absolute;
-}
-
-.w-lightbox-view:before {
-  content: '';
-  height: 100vh;
-}
-
-.w-lightbox-group,
-.w-lightbox-group .w-lightbox-view,
-.w-lightbox-group .w-lightbox-view:before {
-  height: 86vh;
-}
-
-.w-lightbox-frame,
-.w-lightbox-view:before {
-  vertical-align: middle;
-  display: inline-block;
-}
-
-.w-lightbox-figure {
-  margin: 0;
-  position: relative;
-}
-
-.w-lightbox-group .w-lightbox-figure {
-  cursor: pointer;
-}
-
-.w-lightbox-img {
-  width: auto;
-  max-width: none;
-  height: auto;
-}
-
-.w-lightbox-image {
-  float: none;
-  max-width: 100vw;
-  max-height: 100vh;
-  display: block;
-}
-
-.w-lightbox-group .w-lightbox-image {
-  max-height: 86vh;
-}
-
-.w-lightbox-caption {
-  text-align: left;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  background: rgba(0, 0, 0, 0.4);
-  padding: 0.5em 1em;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  overflow: hidden;
-}
-
-.w-lightbox-embed {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
-.w-lightbox-control {
-  cursor: pointer;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 24px;
-  width: 4em;
-  transition: all 0.3s;
-  position: absolute;
-  top: 0;
-}
-
-.w-lightbox-left {
-  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yMCAwIDI0IDQwIiB3aWR0aD0iMjQiIGhlaWdodD0iNDAiPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHBhdGggZD0ibTAgMGg1djIzaDIzdjVoLTI4eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDN2MjNoMjN2M2gtMjZ6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==');
-  display: none;
-  bottom: 0;
-  left: 0;
-}
-
-.w-lightbox-right {
-  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMjQgNDAiIHdpZHRoPSIyNCIgaGVpZ2h0PSI0MCI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMC0waDI4djI4aC01di0yM2gtMjN6IiBvcGFjaXR5PSIuNCIvPjxwYXRoIGQ9Im0xIDFoMjZ2MjZoLTN2LTIzaC0yM3oiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+');
-  display: none;
-  bottom: 0;
-  right: 0;
-}
-
-.w-lightbox-close {
-  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMTggMTciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMCAwaDd2LTdoNXY3aDd2NWgtN3Y3aC01di03aC03eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDd2LTdoM3Y3aDd2M2gtN3Y3aC0zdi03aC03eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=');
-  background-size: 18px;
-  height: 2.6em;
-  right: 0;
-}
-
-.w-lightbox-strip {
-  white-space: nowrap;
-  padding: 0 1vh;
-  line-height: 0;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-
-.w-lightbox-item {
-  box-sizing: content-box;
-  cursor: pointer;
-  width: 10vh;
-  padding: 2vh 1vh;
-  display: inline-block;
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-}
-
-.w-lightbox-active {
-  opacity: 0.3;
-}
-
-.w-lightbox-thumbnail {
-  background: #222;
-  height: 10vh;
-  position: relative;
-  overflow: hidden;
-}
-
-.w-lightbox-thumbnail-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.w-lightbox-thumbnail .w-lightbox-tall {
-  width: 100%;
-  top: 50%;
-  transform: translate(0, -50%);
-}
-
-.w-lightbox-thumbnail .w-lightbox-wide {
-  height: 100%;
-  left: 50%;
-  transform: translate(-50%);
-}
-
-.w-lightbox-spinner {
-  box-sizing: border-box;
-  border: 5px solid rgba(0, 0, 0, 0.4);
-  border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  margin-top: -20px;
-  margin-left: -20px;
-  animation: 0.8s linear infinite spin;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-}
-
-.w-lightbox-spinner:after {
-  content: '';
-  border: 3px solid rgba(0, 0, 0, 0);
-  border-bottom-color: #fff;
-  border-radius: 50%;
-  position: absolute;
-  top: -4px;
-  bottom: -4px;
-  left: -4px;
-  right: -4px;
-}
-
-.w-lightbox-hide {
-  display: none;
-}
-
-.w-lightbox-noscroll {
-  overflow: hidden;
-}
-
-@media (min-width: 768px) {
-  .w-lightbox-content {
-    height: 96vh;
-    margin-top: 2vh;
-  }
-
-  .w-lightbox-view,
-  .w-lightbox-view:before {
-    height: 96vh;
-  }
-
-  .w-lightbox-group,
-  .w-lightbox-group .w-lightbox-view,
-  .w-lightbox-group .w-lightbox-view:before {
-    height: 84vh;
-  }
-
-  .w-lightbox-image {
-    max-width: 96vw;
-    max-height: 96vh;
-  }
-
-  .w-lightbox-group .w-lightbox-image {
-    max-width: 82.3vw;
-    max-height: 84vh;
-  }
-
-  .w-lightbox-left,
-  .w-lightbox-right {
-    opacity: 0.5;
-    display: block;
-  }
-
-  .w-lightbox-close {
-    opacity: 0.8;
-  }
-
-  .w-lightbox-control:hover {
-    opacity: 1;
-  }
-}
-
-.w-lightbox-inactive,
-.w-lightbox-inactive:hover {
-  opacity: 0;
-}
-
-.w-richtext:before,
-.w-richtext:after {
-  content: ' ';
-  grid-area: 1 / 1 / 2 / 2;
-  display: table;
-}
-
-.w-richtext:after {
-  clear: both;
-}
-
-.w-richtext[contenteditable='true']:before,
-.w-richtext[contenteditable='true']:after {
-  white-space: initial;
-}
-
-.w-richtext ol,
-.w-richtext ul {
-  overflow: hidden;
-}
-
-.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after,
-.w-richtext .w-richtext-figure-selected[data-rt-type='video'] div:after,
-.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div,
-.w-richtext .w-richtext-figure-selected[data-rt-type='image'] div {
-  outline: 2px solid #2895f7;
-}
-
-.w-richtext figure.w-richtext-figure-type-video > div:after,
-.w-richtext figure[data-rt-type='video'] > div:after {
-  content: '';
-  display: none;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
-.w-richtext figure {
-  max-width: 60%;
-  position: relative;
-}
-
-.w-richtext figure > div:before {
-  cursor: default !important;
-}
-
-.w-richtext figure img {
-  width: 100%;
-}
-
-.w-richtext figure figcaption.w-richtext-figcaption-placeholder {
-  opacity: 0.6;
-}
-
-.w-richtext figure div {
-  color: rgba(0, 0, 0, 0);
-  font-size: 0;
-}
-
-.w-richtext figure.w-richtext-figure-type-image,
-.w-richtext figure[data-rt-type='image'] {
-  display: table;
-}
-
-.w-richtext figure.w-richtext-figure-type-image > div,
-.w-richtext figure[data-rt-type='image'] > div {
-  display: inline-block;
-}
-
-.w-richtext figure.w-richtext-figure-type-image > figcaption,
-.w-richtext figure[data-rt-type='image'] > figcaption {
-  caption-side: bottom;
-  display: table-caption;
-}
-
-.w-richtext figure.w-richtext-figure-type-video,
-.w-richtext figure[data-rt-type='video'] {
-  width: 60%;
-  height: 0;
-}
-
-.w-richtext figure.w-richtext-figure-type-video iframe,
-.w-richtext figure[data-rt-type='video'] iframe {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.w-richtext figure.w-richtext-figure-type-video > div,
-.w-richtext figure[data-rt-type='video'] > div {
-  width: 100%;
-}
-
-.w-richtext figure.w-richtext-align-center {
-  clear: both;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image > div,
-.w-richtext figure.w-richtext-align-center[data-rt-type='image'] > div {
-  max-width: 100%;
-}
-
-.w-richtext figure.w-richtext-align-normal {
-  clear: both;
-}
-
-.w-richtext figure.w-richtext-align-fullwidth {
-  text-align: center;
-  clear: both;
-  width: 100%;
-  max-width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  display: block;
-}
-
-.w-richtext figure.w-richtext-align-fullwidth > div {
-  padding-bottom: inherit;
-  display: inline-block;
-}
-
-.w-richtext figure.w-richtext-align-fullwidth > figcaption {
-  display: block;
-}
-
-.w-richtext figure.w-richtext-align-floatleft {
-  float: left;
-  clear: none;
-  margin-right: 15px;
-}
-
-.w-richtext figure.w-richtext-align-floatright {
-  float: right;
-  clear: none;
-  margin-left: 15px;
-}
-
-.w-nav {
-  z-index: 1000;
-  background: #ddd;
-  position: relative;
-}
-
-.w-nav:before,
-.w-nav:after {
-  content: ' ';
-  grid-area: 1 / 1 / 2 / 2;
-  display: table;
-}
-
-.w-nav:after {
-  clear: both;
-}
-
-.w-nav-brand {
-  float: left;
-  color: #333;
-  text-decoration: none;
-  position: relative;
-}
-
-.w-nav-link {
-  vertical-align: top;
-  color: #222;
-  text-align: left;
-  margin-left: auto;
-  margin-right: auto;
-  padding: 20px;
-  text-decoration: none;
-  display: inline-block;
-  position: relative;
-}
-
-.w-nav-link.w--current {
-  color: #0082f3;
-}
-
-.w-nav-menu {
-  float: right;
-  position: relative;
-}
-
-[data-nav-menu-open] {
-  text-align: center;
-  background: #c8c8c8;
-  min-width: 200px;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  overflow: visible;
-  display: block !important;
-}
-
-.w--nav-link-open {
-  display: block;
-  position: relative;
-}
-
-.w-nav-overlay {
-  width: 100%;
-  display: none;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  overflow: hidden;
-}
-
-.w-nav-overlay [data-nav-menu-open] {
-  top: 0;
-}
-
-.w-nav[data-animation='over-left'] .w-nav-overlay {
-  width: auto;
-}
-
-.w-nav[data-animation='over-left'] .w-nav-overlay,
-.w-nav[data-animation='over-left'] [data-nav-menu-open] {
-  z-index: 1;
-  top: 0;
-  right: auto;
-}
-
-.w-nav[data-animation='over-right'] .w-nav-overlay {
-  width: auto;
-}
-
-.w-nav[data-animation='over-right'] .w-nav-overlay,
-.w-nav[data-animation='over-right'] [data-nav-menu-open] {
-  z-index: 1;
-  top: 0;
-  left: auto;
-}
-
-.w-nav-button {
-  float: right;
-  cursor: pointer;
-
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  padding: 18px;
-  font-size: 24px;
-  display: none;
-  position: relative;
-}
-
-.w-nav-button:focus {
-  outline: 0;
-}
-
-.w-nav-button.w--open {
-  color: #fff;
-  background-color: #c8c8c8;
-}
-
-.w-nav[data-collapse='all'] .w-nav-menu {
-  display: none;
-}
-
-.w-nav[data-collapse='all'] .w-nav-button,
-.w--nav-dropdown-open,
-.w--nav-dropdown-toggle-open {
-  display: block;
-}
-
-.w--nav-dropdown-list-open {
-  position: static;
-}
-
-@media screen and (max-width: 991px) {
-  .w-nav[data-collapse='medium'] .w-nav-menu {
-    display: none;
-  }
-
-  .w-nav[data-collapse='medium'] .w-nav-button {
-    display: block;
-  }
-}
-
-@media screen and (max-width: 767px) {
-  .w-nav[data-collapse='small'] .w-nav-menu {
-    display: none;
-  }
-
-  .w-nav[data-collapse='small'] .w-nav-button {
-    display: block;
-  }
-
-  .w-nav-brand {
-    padding-left: 10px;
-  }
-}
-
-@media screen and (max-width: 479px) {
-  .w-nav[data-collapse='tiny'] .w-nav-menu {
-    display: none;
-  }
-
-  .w-nav[data-collapse='tiny'] .w-nav-button {
-    display: block;
-  }
-}
-
-.w-tabs {
-  position: relative;
-}
-
-.w-tabs:before,
-.w-tabs:after {
-  content: ' ';
-  grid-area: 1 / 1 / 2 / 2;
-  display: table;
-}
-
-.w-tabs:after {
-  clear: both;
-}
-
-.w-tab-menu {
-  position: relative;
-}
-
-.w-tab-link {
-  vertical-align: top;
-  text-align: left;
-  cursor: pointer;
-  color: #222;
-  background-color: #ddd;
-  padding: 9px 30px;
-  text-decoration: none;
-  display: inline-block;
-  position: relative;
-}
-
-.w-tab-link.w--current {
-  background-color: #c8c8c8;
-}
-
-.w-tab-link:focus {
-  outline: 0;
-}
-
-.w-tab-content {
-  display: block;
-  position: relative;
-  overflow: hidden;
-}
-
-.w-tab-pane {
-  display: none;
-  position: relative;
-}
-
-.w--tab-active {
-  display: block;
-}
-
-@media screen and (max-width: 479px) {
-  .w-tab-link {
-    display: block;
-  }
-}
-
-.w-ix-emptyfix:after {
-  content: '';
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.w-dyn-empty {
-  background-color: #ddd;
-  padding: 10px;
-}
-
-.w-dyn-hide,
-.w-dyn-bind-empty,
-.w-condition-invisible {
-  display: none !important;
-}
-
-.wf-layout-layout {
-  display: grid;
-}
-
-.w-code-component > * {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-:root {
-  --mono-98: #f5f5ff;
-  --mono-00: #00010d;
-  --act-1: #01f;
-  --hi-1: #fb0;
-  --mono-75: #a9aabf;
-  --act-2: #000cb3;
-  --trans-50: rgba(51, 54, 102, 0.5);
-  --mono-100: white;
-  --mono-35: #000659;
-  --mono-97: #e4e5f7;
-  --mono-95: #d5d7f2;
-  --act-100: #d1d4ff;
-  --hi-2: #ffcd42;
-  --mono-50: #000980;
-  --mono-25: #101340;
-  --act-90: #b3b8ff;
-  --trans-25: rgba(51, 54, 102, 0.25);
-  --err-1: #cc2900;
-  --err-2: #f5c4b8;
-  --mono-92: #ced0eb;
-  --mono-85: #c3c5d9;
-}
-
-.w-layout-blockcontainer {
-  max-width: 940px;
-  margin-left: auto;
-  margin-right: auto;
-  display: block;
-}
-
-.w-layout-hflex {
-  flex-direction: row;
-  align-items: flex-start;
-  display: flex;
-}
-
-.w-layout-grid {
-  grid-row-gap: 16px;
-  grid-column-gap: 16px;
-  grid-template-rows: auto auto;
-  grid-template-columns: 1fr 1fr;
-  grid-auto-columns: 1fr;
-  display: grid;
-}
-
-@media screen and (max-width: 991px) {
-  .w-layout-blockcontainer {
-    max-width: 728px;
-  }
-}
-
-@media screen and (max-width: 767px) {
-  .w-layout-blockcontainer {
-    max-width: none;
-  }
-}
-
-body {
-  background-color: var(--mono-98);
-  color: var(--mono-00);
-  font-family:
-    DM Sans,
-    sans-serif;
-  font-size: 24px;
-  font-weight: 400;
-  line-height: 1.6;
-  transition:
-    flex 0.4s linear,
-    background-color 0.2s linear,
-    color 0.2s linear;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin-top: 0;
-  margin-bottom: 0;
-  font-size: 1em;
-  font-weight: 400;
-  line-height: 1.6;
-}
-
-h6 {
-  margin-top: 0;
-  margin-bottom: 0;
-  font-size: 1em;
-  font-weight: 400;
-}
-
-p {
-  margin-bottom: 0;
-  font-size: 1em;
-}
-
-/* a {
-  color: var(--act-1);
-  font-size: 1em;
-  font-weight: 400;
-  text-decoration: none;
-} */
-
-/* a:hover {
-  text-decoration: underline;
-} */
-
-/* a:focus-visible {
-  outline-color: var(--hi-1);
-  outline-offset: 4px;
-  border-radius: 2px;
-  outline-width: 4px;
-  outline-style: solid;
-} */
-
-/* a[data-wf-focus-visible] {
-  outline-color: var(--hi-1);
-  outline-offset: 4px;
-  border-radius: 2px;
-  outline-width: 4px;
-  outline-style: solid;
-} */
-
-ul,
-ol {
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-left: 0;
-  font-size: 1em;
-}
-
-li {
-  margin-bottom: 0;
-}
-
-label {
-  margin-bottom: 5px;
-  font-size: 1.5rem;
-  font-weight: 500;
-  line-height: 2rem;
-}
-
-blockquote {
-  border-left: 1px solid var(--mono-75);
-  letter-spacing: 0.5px;
-  margin-top: 0;
-  margin-bottom: 0;
-  padding: 0.25em 1em 0.5em;
-  font-family:
-    DM Serif Text,
-    sans-serif;
-  font-size: 1em;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.6;
-}
-
-figcaption {
-  color: #2a2f31;
-  text-align: center;
-  margin-top: 6px;
-  font-size: 16px;
-}
-
-.bp--text {
-  line-height: 1.6;
-}
-
-.bp--text:hover {
-  text-decoration: none;
-}
-
-.bp--text.md {
-  font-size: 1.25em;
-}
-
-.bp--text.lg {
-  margin-bottom: 0;
-  font-size: 1.5em;
-}
-
-.bp--text.sm {
-  margin-bottom: 0;
-  font-size: 0.75em;
-  line-height: 1.8em;
-}
-
-.bp--text.xs {
-  font-size: 0.625em;
-}
-
-.bp--text.hero-primary {
-  font-family:
-    DM Serif Display,
-    sans-serif;
-  font-size: 2.5em;
-  font-style: italic;
-  font-weight: 700;
-  line-height: 1.25;
-}
-
-.bp--text.hero-secondary {
-  font-family:
-    DM Sans,
-    sans-serif;
-  font-size: 1.25em;
-  font-weight: 400;
-}
-
-.bp--text.hidden {
-  display: none;
-}
-
-.bp--image {
-  display: block;
-}
-
-.bp--button {
-  background-color: var(--act-2);
-  box-shadow: 0 0 0 0 var(--trans-50);
-  color: var(--mono-100);
-  text-align: left;
-  border-radius: 2px;
-  padding: 0.375em 0.75em;
-  font-size: 1em;
-  font-weight: 500;
-  transition:
-    box-shadow 80ms ease-in,
-    color 80ms linear,
-    transform 80ms ease-in-out,
-    background-color 80ms linear;
-}
-
-.bp--button:hover {
-  background-color: var(--act-1);
-  box-shadow:
-    0 10px 2px -4px rgba(95, 92, 153, 0.24),
-    0 2px 3px -2px var(--trans-50);
-  color: var(--mono-100);
-  text-decoration: none;
-  transform: scale(1.025);
-}
-
-.bp--button:active {
-  background-color: var(--mono-35);
-  box-shadow: 0 2px 1px 0 var(--trans-50);
-  transform: scale(1);
-}
-
-.bp--button:focus-visible {
-  background-color: var(--act-1);
-  outline-color: var(--hi-1);
-  outline-offset: 2px;
-  border-radius: 1px;
-  outline-width: 3px;
-  outline-style: solid;
-  transform: scale(1.05);
-}
-
-.bp--button[data-wf-focus-visible] {
-  background-color: var(--act-1);
-  outline-color: var(--hi-1);
-  outline-offset: 2px;
-  border-radius: 1px;
-  outline-width: 3px;
-  outline-style: solid;
-  transform: scale(1.05);
-}
-
-.bp--button.emphasis-low {
-  background-color: var(--mono-97);
-  color: var(--act-2);
-}
-
-.bp--button.emphasis-low:hover {
-  background-color: var(--mono-98);
-  color: var(--act-1);
-}
-
-.bp--button.emphasis-low:active {
-  background-color: var(--mono-95);
-  color: var(--act-2);
-}
-
-.bp--button.emphasis-low.w--current:hover {
-  background-color: var(--act-100);
-  color: var(--act-1);
-}
-
-.bp--button.icon {
-  background-color: var(--mono-100);
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-.bp--button.icon:hover {
-  background-color: #ced6f5;
-  transform: scale(1.1);
-}
-
-.bp--button.primary {
-  background-color: var(--act-1);
-  color: var(--mono-100);
-}
-
-.bp--button.primary:hover,
-.bp--button.primary.w--current {
-  background-color: var(--act-2);
-}
-
-.bp--button.primary.mobile {
-  display: none;
-}
-
-.bp--button.primary.dropup {
-  grid-column-gap: 16px;
-  grid-row-gap: 16px;
-  grid-template-rows: auto auto;
-  grid-template-columns: 1fr 1fr;
-  grid-auto-columns: 1fr;
-  justify-content: flex-start;
-  position: fixed;
-  bottom: 1em;
-  left: 1em;
-}
-
-.bp--button.primary.dropup:hover {
-  transform: none;
-}
-
-.bp--button.dropup {
-  display: flex;
-}
-
-.bp--button.emphasis-lowest {
-  box-shadow: none;
-  color: var(--mono-00);
-  background-color: rgba(0, 0, 0, 0);
-}
-
-.bp--button.emphasis-lowest:hover {
-  background-color: var(--mono-98);
-  box-shadow: none;
-  color: var(--act-1);
-}
-
-.bp--button.emphasis-lowest:active {
-  background-color: var(--mono-95);
-  color: var(--act-1);
-}
-
-.bp--button.emphasis-lowest:focus-visible {
-  background-color: var(--act-100);
-  color: var(--act-1);
-}
-
-.bp--button.emphasis-lowest[data-wf-focus-visible] {
-  background-color: var(--act-100);
-  color: var(--act-1);
-}
-
-.bp--button.emphasis-lowest.w--current {
-  background-color: var(--mono-98);
-  color: var(--act-1);
-}
-
-.bp--button.emphasis-lowest.w--current:hover {
-  transform: none;
-}
-
-.bp--button.emphasis-lowest.icon {
-  justify-content: center;
-  align-items: center;
-  font-family: 'FontAwesome 6', sans-serif;
-  font-weight: 300;
-  display: flex;
-}
-
-.bp--button.emphasis-lowest.icon.brand {
-  font-family: 'FontAwesome Brands 6', sans-serif;
-}
-
-.bp--button.wide {
-  width: 100%;
-}
-
-.bp--section {
-  flex-direction: column;
-  margin-left: auto;
-  margin-right: auto;
-  padding-top: 2em;
-  padding-bottom: 2em;
-  display: flex;
-}
-
-.bp--section.hero {
-  background-color: var(--mono-100);
-}
-
-.bp--section.nav-bar {
-  z-index: 999998;
-  background-color: var(--mono-100);
-  box-shadow: 0 4px 16px -3px var(--trans-50);
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0%;
-  bottom: auto;
-  left: 0%;
-  right: 0%;
-}
-
-.bp--section.nav-callout {
-  z-index: 999999;
-  background-color: var(--hi-2);
-}
-
-.bp--section.fit {
-  width: 100%;
-  padding-left: 2em;
-}
-
-.bp--row {
-  grid-column-gap: 1rem;
-  grid-row-gap: 1rem;
-  border-radius: 2px;
-  flex-direction: column;
-  display: flex;
-}
-
-.bp--row.image-caption {
-  grid-column-gap: 0.5em;
-  grid-row-gap: 0.5em;
-}
-
-.bp--row.grid {
-  grid-column-gap: 1px;
-  grid-row-gap: 1px;
-  grid-template-rows: auto auto;
-  grid-template-columns: 1fr 1fr;
-  grid-auto-columns: 1fr;
-  display: grid;
-}
-
-.bp--row.large-gap {
-  grid-column-gap: 2rem;
-  grid-row-gap: 2rem;
-}
-
-.bp--row.small-gap {
-  grid-column-gap: 0.5rem;
-  grid-row-gap: 0.5rem;
-}
-
-.bp--row.small-gap.small-text {
-  font-size: 0.75em;
-}
-
-.bp--row.no-gap {
-  grid-column-gap: 0rem;
-  grid-row-gap: 0rem;
-}
-
-.bp--row.no-gap.align-c {
-  justify-content: center;
-}
-
-.bp--row.align-l {
-  align-items: flex-start;
-}
-
-.bp--col {
-  grid-column-gap: 1rem;
-  grid-row-gap: 1rem;
-  flex-direction: row;
-  align-items: stretch;
-  display: flex;
-}
-
-.bp--col.icons {
-  grid-column-gap: 1rem;
-  grid-row-gap: 1rem;
-  flex-direction: row;
-  grid-template-rows: auto;
-  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-  grid-auto-columns: 1fr;
-  width: 100%;
-  display: flex;
-}
-
-.bp--col.keywords {
-  display: block;
-}
-
-.bp--col.menu {
-  grid-column-gap: 0.5em;
-  grid-row-gap: 0.5em;
-  flex-direction: row;
-  flex: 1;
-  grid-template-rows: auto;
-  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-  grid-auto-columns: 1fr;
-  align-items: center;
-  display: flex;
-}
-
-.bp--col.menu.trigger {
-  display: none;
-}
-
-.bp--col.menu.right {
-  justify-content: flex-end;
-}
-
-.bp--col.menu.left {
-  grid-column-gap: 0.125em;
-  grid-row-gap: 0.125em;
-  flex: 0 auto;
-}
-
-.bp--col.large-gap {
-  grid-column-gap: 2rem;
-  grid-row-gap: 2rem;
-}
-
-.bp--col.small-gap {
-  grid-column-gap: 0.5rem;
-  grid-row-gap: 0.5rem;
-}
-
-.bp--col.no-gap {
-  grid-column-gap: 0rem;
-  grid-row-gap: 0rem;
-}
-
-.bp--col.nav-bar {
-  justify-content: space-between;
-  max-width: 100%;
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
-  font-size: 0.75em;
-}
-
-.bp--col.fieldset {
-  flex-direction: row;
-  align-items: stretch;
-}
-
-.bp--col.right {
-  justify-content: flex-end;
-}
-
-.bp--col.align-m {
-  grid-column-gap: 0.25em;
-  grid-row-gap: 0.25em;
-  align-items: center;
-}
-
-.bp--container-2rem {
-  grid-column-gap: 2em;
-  grid-row-gap: 2em;
-  flex-direction: column;
-  grid-template-rows: auto auto;
-  grid-template-columns: 1fr;
-  grid-auto-columns: 1fr;
-  justify-content: space-around;
-  display: flex;
-}
-
-.bp--body {
-  color: var(--mono-00);
-}
-
-.bp--type-overline {
-  color: var(--mono-50);
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  margin-bottom: 0;
-  font-size: 1em;
-  font-weight: 300;
-  line-height: 1.5em;
-}
-
-.bp--heading {
-  letter-spacing: 0.375px;
-  font-family:
-    DM Serif Display,
-    sans-serif;
-  font-size: 1em;
-  font-weight: 400;
-  line-height: 1.6em;
-}
-
-.bp--heading.overline {
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  font-family:
-    DM Sans,
-    sans-serif;
-  font-size: 0.75em;
-}
-
-.bp--heading.xxl {
-  font-family:
-    DM Serif Text,
-    sans-serif;
-  font-size: 2em;
-  line-height: 1.3em;
-}
-
-.bp--heading.xl {
-  font-size: 2.75rem;
-  line-height: 1.4;
-}
-
-.bp--heading.lg {
-  font-size: 1.5em;
-  line-height: 1.3em;
-}
-
-.bp--heading.lg.sans {
-  color: var(--mono-00);
-  letter-spacing: -0.375px;
-  font-family:
-    DM Sans,
-    sans-serif;
-  font-size: 1.25em;
-  font-weight: 700;
-  line-height: 1.2;
-}
-
-.bp--heading.md {
-  font-size: 1.25em;
-  line-height: 1.4em;
-}
-
-.bp--heading.sm {
-  font-size: 0.75em;
-  font-weight: 700;
-}
-
-.bp--heading.xs {
-  font-family:
-    DM Serif Text,
-    sans-serif;
-  font-size: 0.625em;
-  font-weight: 400;
-}
-
-.bp--quote {
-  font-size: 1em;
-  font-style: italic;
-}
-
-.bp--quote.lg {
-  font-size: 1.5em;
-  line-height: 1.4;
-}
-
-.bp--quote.md {
-  font-size: 1.25em;
-}
-
-.bp--quote.sm {
-  font-size: 0.75em;
-}
-
-.bp--list {
-  grid-column-gap: 0.5em;
-  grid-row-gap: 0.5em;
-  flex-direction: column;
-  padding-left: 2rem;
-  display: flex;
-}
-
-.bp--list.ul {
-  list-style-type: disc;
-}
-
-.bp--list.ol {
-  list-style-type: decimal;
-}
-
-.bp--hightlight {
-  background-color: var(--hi-1);
-  padding-left: 0.125rem;
-  padding-right: 0.125rem;
-  font-weight: 400;
-  transition: background-color 0.2s;
-}
-
-.bp-type--link {
-  color: var(--act-1);
-  text-decoration: none;
-  transition:
-    transform 0.1s linear,
-    color 0.1s linear;
-}
-
-.bp-type--link:hover {
-  color: var(--act-1);
-  text-decoration: underline;
-}
-
-.bp-type--link:focus-visible {
-  outline-offset: 4px;
-  border-radius: 0.25rem;
-  outline-width: 4px;
-  text-decoration: underline;
-}
-
-.bp-type--link[data-wf-focus-visible] {
-  outline-offset: 4px;
-  border-radius: 0.25rem;
-  outline-width: 4px;
-  text-decoration: underline;
-}
-
-.homepage-link {
-  text-decoration: underline;
-  transition: all 0.2s ease;
-}
-
-.homepage-link:hover {
-  text-decoration: none;
-}
-
-.homepage-link:focus-visible {
-  outline-color: var(--bones-yellow, #fb0);
-  outline-offset: 4px;
-  outline-width: 4px;
-  outline-style: solid;
-  border-radius: 2px;
-}
-
-.bp-type--link.icon {
-  text-align: center;
-  width: 1.5em;
-  font-family: 'FontAwesome 6', sans-serif;
-  text-decoration: none;
-}
-
-.bp-type--link.icon.brand {
-  font-family: 'FontAwesome Brands 6', sans-serif;
-  font-weight: 400;
-}
-
-.bp-type--link.dropup {
-  color: var(--mono-00);
-  flex: none;
-}
-
-.bp-type--link.dropup:hover {
-  color: var(--act-1);
-  text-decoration: none;
-}
-
-.bp--icon {
-  text-align: center;
-  font-family: 'FontAwesome 6', sans-serif;
-  font-weight: 400;
-  display: inline-block;
-}
-
-.bp--icon.brand {
-  font-family: 'FontAwesome Brands 6', sans-serif;
-}
-
-.bp--icon.button {
-  min-width: 1.5em;
-}
-
-.bp--icon.value {
-  color: var(--act-1);
-  text-align: center;
-  border-radius: 1rem;
-  font-size: 4em;
-  font-weight: 100;
-  line-height: 1.25em;
-}
-
-.bp--icon.sm {
-  font-size: 0.75em;
-  font-weight: 400;
-}
-
-.sg--icon-holder {
-  background-color: var(--mono-100);
-  color: #04041e;
-  text-align: center;
-  border-radius: 0.5rem;
-  padding: 0.5rem;
-}
-
-.bp--keyword {
-  background-color: var(--mono-97);
-  color: var(--mono-25);
-  cursor: default;
-  transform-style: preserve-3d;
-  border-radius: 2px;
-  margin-bottom: 2px;
-  margin-right: 2px;
-  padding: 0.125em 0.5em;
-  font-weight: 400;
-  transition: background-color 0.1s;
-  display: inline-block;
-}
-
-.bp--keyword.small {
-  background-color: var(--mono-35);
-  color: var(--mono-100);
-  padding-top: 0;
-  padding-bottom: 0;
-  font-size: 0.75em;
-}
-
-.bp--nav-menu {
-  z-index: 9999;
-  grid-column-gap: 0.5em;
-  grid-row-gap: 0.5em;
-  background-color: var(--mono-100);
-  flex-direction: column;
-  align-content: flex-start;
-  justify-content: space-between;
-  align-items: stretch;
-  width: 100svw;
-  height: 100svh;
-  padding: 2em;
-  display: flex;
-  position: fixed;
-  top: 0%;
-  bottom: 0%;
-  left: 0%;
-  right: 0%;
-}
-
-.bp--global-icon {
-  padding-left: 0.125rem;
-  padding-right: 0.125rem;
-  font-family: 'FontAwesome 6', sans-serif;
-  font-weight: 300;
-}
-
-.bp--dropup {
-  z-index: 9999999;
-  flex-direction: column;
-  position: fixed;
-  bottom: 1em;
-  left: 1em;
-}
-
-.bp--dropup-content {
-  grid-column-gap: 1em;
-  grid-row-gap: 1em;
-  background-color: var(--mono-100);
-  flex-direction: column;
-  padding: 2em;
-  font-size: 1em;
-  display: flex;
-  position: fixed;
-  top: 0%;
-  bottom: 0%;
-  left: 0%;
-  right: auto;
-  overflow: hidden;
-}
-
-.bp-link:hover {
-  color: var(--act-2);
-}
-
-.bp-avatar {
-  background-color: var(--act-90);
-  background-image: url('https://assets-global.website-files.com/63020a6ad41103c31cd7414e/6342ba1ac5c73022236607cb_me--site-hero-colour.jpg');
-  background-position: 50%;
-  background-size: cover;
-  border-radius: 100%;
-  width: 3em;
-  height: 3em;
-}
-
-.bp-avatar.large {
-  width: 5em;
-  height: 5em;
-}
-
-.bp--plate {
-  grid-column-gap: 1em;
-  grid-row-gap: 1em;
-  border-radius: 0;
-  flex-direction: column;
-  grid-template:
-    '.'
-    / 1fr 0.5fr;
-  grid-auto-columns: 1fr;
-  grid-auto-flow: row;
-  align-content: end;
-  justify-content: end;
-  height: 28em;
-  display: grid;
-  position: relative;
-  overflow: hidden;
-}
-
-.bp--plate:hover {
-  box-shadow: none;
-  text-decoration: none;
-}
-
-.bp--plate:focus-visible {
-  background-color: var(--mono-100);
-  outline-color: var(--hi-1);
-  outline-style: solid;
-}
-
-.bp--plate[data-wf-focus-visible] {
-  background-color: var(--mono-100);
-  outline-color: var(--hi-1);
-  outline-style: solid;
-}
-
-.bp--plate.mini {
-  grid-column-gap: 0em;
-  grid-row-gap: 0em;
-  grid-template-columns: 1fr;
-}
-
-.bp--plate-card {
-  grid-column-gap: 0em;
-  grid-row-gap: 0em;
-  background-color: var(--mono-100);
-  box-shadow: 0 0 15px 0 var(--trans-25);
-  border-radius: 0;
-  flex-direction: column;
-  padding: 2em 1.5em;
-  text-decoration: none;
-  display: flex;
-}
-
-.bp--plate-card:hover {
-  text-decoration: none;
-}
-
-.error-message {
-  background-color: var(--hi-1);
-}
-
-.bp-input {
-  border-style: solid;
-  border-width: 1px 0 0;
-  border-color: var(--mono-75) black var(--mono-25);
-  border-radius: 2px;
-  margin-bottom: 0;
-  padding: 1.5em 1em;
-  font-size: 1.25rem;
-  line-height: 1.5;
-  transition:
-    background-color 0.1s linear,
-    color 0.1s linear;
-}
-
-.bp-input:hover {
-  border-color: var(--mono-00);
-}
-
-.bp-input:focus-visible {
-  border-color: var(--mono-00);
-  outline-color: var(--hi-1);
-  outline-offset: 2px;
-  outline-width: 3px;
-  outline-style: solid;
-}
-
-.bp-input[data-wf-focus-visible] {
-  border-color: var(--mono-00);
-  outline-color: var(--hi-1);
-  outline-offset: 2px;
-  outline-width: 3px;
-  outline-style: solid;
-}
-
-.bp-input::placeholder {
-  color: var(--mono-50);
-}
-
-.fill-mono-00 {
-  background-color: #000;
-}
-
-.fill-mono-100 {
-  background-color: var(--mono-100);
-}
-
-.fill-mono-50 {
-  background-color: var(--mono-50);
-}
-
-.fill-trans {
-  background-color: rgba(0, 0, 0, 0);
-}
-
-.fill-trans-50 {
-  background-color: var(--trans-50);
-}
-
-.fill-mono-95 {
-  background-color: var(--mono-95);
-}
-
-.fill-info {
-  background-color: #fbb800;
-}
-
-.fill-error {
-  background-color: var(--err-1);
-}
-
-.fill-error-low {
-  background-color: var(--err-2);
-}
-
-.bp-pad-1 {
-  padding: 1rem;
-}
-
-.bp-pad-2 {
-  padding: 2rem;
-}
-
-.bp-pad-4 {
-  padding: 4rem;
-}
-
-.bp-pad-0_5 {
-  padding: 0.5rem;
-}
-
-.bp-pad-0 {
-  padding: 0;
-}
-
-.bp-pad-0_5-v {
-  padding: 0.5rem 0;
-}
-
-.bp-pad-1-v {
-  padding: 1rem 0;
-}
-
-.bp-pad-2-v {
-  padding: 2rem 0;
-}
-
-.bp-pad-4-v {
-  padding: 4rem 0;
-}
-
-.tooltip-container {
-  z-index: 9999;
-  background-color: var(--mono-00);
-  opacity: 0;
-  color: var(--mono-100);
-  white-space: nowrap;
-  border-radius: 4px;
-  padding: 0.5rem 0.75rem;
-  font-size: 1rem;
-  font-weight: 500;
-  line-height: 1rem;
-  transition: opacity 0.2s;
-  display: none;
-  position: absolute;
-}
-
-.tooltip-container.visible {
-  opacity: 1;
-  display: block;
-}
-
-.tooltip {
-  cursor: default;
-  display: inline-block;
-  position: relative;
-}
-
-.meta {
-  color: var(--mono-50);
-}
-
-.bp--plate-bg {
-  z-index: -1;
-  transform: scale3d(1none, 1none, 1none);
-  object-fit: cover;
-  transform-style: preserve-3d;
-  width: 100%;
-  height: 100%;
-  transition: transform 0.425s;
-  position: absolute;
-  top: 0%;
-  bottom: 0%;
-  left: 0%;
-  right: 0%;
-}
-
-.fill-act-4 {
-  background-color: var(--act-100);
-}
-
-.fill-act-1 {
-  background-color: #000ed9;
-}
-
-.fill-act-3 {
-  background-color: var(--act-90);
-}
-
-.fill-act-2 {
-  background-color: var(--act-1);
-}
-
-.fill-mono-25 {
-  background-color: var(--mono-25);
-}
-
-.bp--section-hero {
-  background-color: var(--mono-100);
-  padding-top: 2em;
-  padding-bottom: 2em;
-}
-
-.bp--section-hero.portfolio {
-  background-color: var(--mono-00);
-  color: var(--mono-100);
-  background-image: url('https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg');
-  background-position: 50%;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-
-.bp--job {
-  grid-column-gap: 0.5em;
-  grid-row-gap: 0.5em;
-  background-color: var(--mono-100);
-  text-align: left;
-  flex-direction: column;
-  justify-content: center;
-  padding: 2em;
-  text-decoration: none;
-  display: flex;
-}
-
-.bp--job:hover {
-  text-decoration: none;
-}
-
-.bp--value {
-  grid-column-gap: 0.5em;
-  grid-row-gap: 0.5em;
-  background-color: var(--mono-100);
-  text-align: center;
-  flex-direction: column;
-  justify-content: center;
-  padding: 2em 1em;
-  text-decoration: none;
-  display: flex;
-}
-
-.bp--value:hover {
-  text-decoration: none;
-}
-
-.bp-block-inline {
-  display: inline-block;
-}
-
-.hopper {
-  height: 1px;
-}
-
-.bp--button-group {
-  grid-column-gap: 1rem;
-  grid-row-gap: 1rem;
-  flex-direction: row;
-  align-items: stretch;
-  padding-top: 0.5em;
-  padding-bottom: 0;
-  display: flex;
-}
-
-.bp--button-group.mini {
-  font-size: 0.75em;
-}
-
-.bp--plate-card-content {
-  grid-column-gap: 0.5em;
-  grid-row-gap: 0.5em;
-  flex-direction: column;
-  display: flex;
-}
-
-.bp--identity {
-  grid-column-gap: 1em;
-  grid-row-gap: 1em;
-  align-items: center;
-  display: flex;
-}
-
-.bp--container {
-  max-width: 940px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.bp--card {
-  grid-column-gap: 0.5em;
-  grid-row-gap: 0.5em;
-  background-color: var(--mono-100);
-  text-align: left;
-  flex-direction: column;
-  justify-content: center;
-  padding: 2em;
-  text-decoration: none;
-  display: flex;
-}
-
-.bp--card:hover {
-  text-decoration: none;
-}
-
-.bp--container-max {
-  grid-column-gap: 1em;
-  grid-row-gap: 1em;
-  border-radius: 2px;
-  flex-direction: column;
-  width: 100%;
-  display: flex;
-}
-
-.bp--container-max.hero {
-  max-width: 1024px;
-}
-
-.bp--container-full {
-  grid-column-gap: 3em;
-  grid-row-gap: 3em;
-  grid-template-rows: auto;
-  grid-template-columns: 1fr 1fr;
-  grid-auto-columns: 1fr;
-  grid-auto-flow: row;
-  justify-content: space-between;
-  width: 100%;
-  max-width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: 2em;
-  padding-right: 2em;
-  display: grid;
-}
-
-.bp--container-collection_source {
-  width: 100%;
-  max-width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: 2em;
-  padding-right: 2em;
-  display: none;
-}
-
-.bp--prev {
-  grid-column-gap: 0rem;
-  grid-row-gap: 0rem;
-  border-radius: 2px;
-  flex-direction: column;
-  grid-template-rows: auto auto;
-  grid-template-columns: 1fr;
-  grid-auto-columns: 1fr;
-  justify-content: start;
-  display: grid;
-}
-
-.bp--next {
-  grid-column-gap: 0rem;
-  grid-row-gap: 0rem;
-  border-radius: 2px;
-  flex-direction: column;
-  grid-template-rows: auto auto;
-  grid-template-columns: 1fr;
-  grid-auto-columns: 1fr;
-  justify-content: end;
-  display: grid;
-}
-
-.bp--prev_next-wrapper {
-  grid-column-gap: 1rem;
-  grid-row-gap: 1rem;
-  border-radius: 2px;
-  flex-direction: column;
-  align-items: stretch;
-  display: block;
-}
-
-.bp--footer {
-  background-color: var(--mono-97);
-  border-bottom: 1px solid #e4ebf3;
-  margin-top: 4rem;
-  margin-left: auto;
-  margin-right: auto;
-  position: relative;
-}
-
-.bp--footer-col {
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  display: flex;
-}
-
-.bp--divider {
-  background-color: var(--mono-75);
-  width: 100%;
-  height: 1px;
-  margin-top: 70px;
-  margin-bottom: 15px;
-}
-
-.bp--footer-grid {
-  grid-column-gap: 1em;
-  grid-row-gap: 1em;
-  grid-template-rows: auto;
-  grid-template-columns: 2fr 1fr 1fr;
-  grid-auto-columns: 1fr;
-  display: grid;
-}
-
-.bp--badge {
-  background-color: var(--mono-92);
-  color: var(--mono-50);
-  border-radius: 2px;
-  padding-left: 0.5em;
-  padding-right: 0.5em;
-  font-size: 0.75em;
-  line-height: 1.8em;
-  display: inline-block;
-}
-
-.bp--empty-state {
-  background-color: var(--mono-92);
-  padding: 1em;
-}
-
-.fill-mono-35 {
-  background-color: var(--mono-35);
-}
-
-.fill-mono-75 {
-  background-color: var(--mono-75);
-}
-
-.fill-mono-85 {
-  background-color: var(--mono-85);
-}
-
-.fill-mono-92 {
-  background-color: var(--mono-92);
-}
-
-.fill-mono-97 {
-  background-color: var(--mono-97);
-}
-
-.bp--main {
-  flex-direction: column;
-  display: flex;
-}
-
-.bp--navbar {
-  width: 240px;
-  max-width: 400px;
-  height: 100vh;
-  padding-top: 2em;
-  padding-left: 1em;
-  padding-right: 1em;
-  font-size: 0.75em;
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0%;
-  bottom: 0%;
-  left: 0%;
-  right: auto;
-}
-
-.bp--navbar.hero {
-  grid-column-gap: 1px;
-  grid-row-gap: 1px;
-  background-color: var(--mono-100);
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding-top: 1em;
-  padding-bottom: 1em;
-  display: flex;
-}
-
-.bp--navbar.h {
-  z-index: 999998;
-  background-color: var(--mono-100);
-  box-shadow: 0 4px 16px -3px var(--trans-50);
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0%;
-  bottom: auto;
-  left: 0%;
-  right: 0%;
-}
-
-.bp--navbar.nav-callout {
-  z-index: 999999;
-  background-color: var(--hi-2);
-}
-
-.bp--navbar.v {
-  z-index: 999998;
-  background-color: var(--mono-100);
-  box-shadow: 0 4px 16px -3px var(--trans-50);
-  flex-direction: column;
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
-  display: flex;
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0%;
-  bottom: auto;
-  left: 0%;
-  right: 0%;
-}
-
-.bp--scaffold {
-  width: 100vw;
-  display: flex;
-}
-
-.bp--col-copy {
-  grid-column-gap: 1rem;
-  grid-row-gap: 1rem;
-  flex-direction: row;
-  align-items: stretch;
-  display: flex;
-}
-
-.bp--col-copy.icons {
-  grid-column-gap: 1rem;
-  grid-row-gap: 1rem;
-  flex-direction: row;
-  grid-template-rows: auto;
-  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-  grid-auto-columns: 1fr;
-  width: 100%;
-  display: flex;
-}
-
-.bp--col-copy.keywords {
-  display: block;
-}
-
-.bp--col-copy.menu {
-  grid-column-gap: 0.5em;
-  grid-row-gap: 0.5em;
-  flex-direction: row;
-  flex: 1;
-  grid-template-rows: auto;
-  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-  grid-auto-columns: 1fr;
-  align-items: center;
-  display: flex;
-}
-
-.bp--col-copy.menu.trigger {
-  display: none;
-}
-
-.bp--col-copy.menu.right {
-  justify-content: flex-end;
-}
-
-.bp--col-copy.menu.left {
-  grid-column-gap: 0.125em;
-  grid-row-gap: 0.125em;
-  flex: 0 auto;
-}
-
-.bp--col-copy.large-gap {
-  grid-column-gap: 2rem;
-  grid-row-gap: 2rem;
-}
-
-.bp--col-copy.small-gap {
-  grid-column-gap: 0.5rem;
-  grid-row-gap: 0.5rem;
-}
-
-.bp--col-copy.no-gap {
-  grid-column-gap: 0rem;
-  grid-row-gap: 0rem;
-}
-
-.bp--col-copy.nav-bar {
-  justify-content: space-between;
-  max-width: 100%;
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
-  font-size: 0.625em;
-}
-
-.bp--col-copy.fieldset {
-  flex-direction: row;
-  align-items: stretch;
-}
-
-.bp--col-copy.right {
-  justify-content: flex-end;
-}
-
-.bp--col-copy.align-m {
-  grid-column-gap: 0.25em;
-  grid-row-gap: 0.25em;
-  align-items: center;
-}
-
-.surface {
-  z-index: 999999;
-  background-color: var(--mono-100);
-  box-shadow: 0 4px 12px 0 var(--trans-25);
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0;
-}
-
-@media screen and (min-width: 1280px) {
-  .bp--keyword:hover {
-    transform: scale3d(1none, 1none, 1none);
-  }
-}
-
-@media screen and (max-width: 991px) {
-  .bp--container-2rem {
-    grid-column-gap: 2em;
-    grid-row-gap: 2em;
-  }
-
-  .bp--body,
-  .bp--site-body {
-    font-size: 20px;
-  }
-
-  .bp--plate {
-    grid-template-columns: 1fr;
-    grid-auto-columns: 5fr;
-    display: flex;
-  }
-
-  .bp--badge {
-    font-size: 20px;
-  }
-}
-
-@media screen and (max-width: 767px) {
-  .bp--button.icon {
-    text-align: center;
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-  }
-
-  .bp--section {
-    padding-left: 1em;
-    padding-right: 1em;
-  }
-
-  .bp--container-2rem {
-    grid-column-gap: 1em;
-    grid-row-gap: 1em;
-    padding-left: 1em;
-    padding-right: 1em;
-  }
-
-  .bp--body,
-  .bp--site-body {
-    font-size: 16px;
-  }
-
-  .bp-avatar.large {
-    width: 6rem;
-    height: 6rem;
-  }
-
-  .bp--footer {
-    padding-left: 15px;
-    padding-right: 15px;
-  }
-
-  .bp--footer-col {
-    align-items: center;
-  }
-
-  .bp--divider {
-    margin-top: 60px;
-  }
-
-  .bp--badge {
-    font-size: 16px;
-  }
-
-  .bp--navbar {
-    padding-left: 1em;
-    padding-right: 1em;
-  }
-}
-
-@media screen and (max-width: 479px) {
-  .bp--button.primary.mobile {
-    display: block;
-  }
-
-  .bp--button.primary.desktop {
-    display: none;
-  }
-
-  .bp--quote {
-    padding-left: 0.5em;
-    padding-right: 1em;
-  }
-
-  .bp--site-body {
-    font-size: 14px;
-  }
-
-  .bp--dropup {
-    bottom: 4em;
-    right: 1em;
-  }
-
-  .bp-avatar.large {
-    width: 4rem;
-    height: 4rem;
-  }
-
-  .bp--plate {
-    padding: 0 1em 1em;
-  }
-
-  .bp--plate:hover {
-    transform: scale(1.01);
-  }
-
-  .bp--plate-card {
-    padding-top: 1.5em;
-    padding-left: 1.5em;
-    padding-right: 1.5em;
-  }
-
-  .bp-input {
-    font-size: 1.5rem;
-  }
-
-  .bp--job,
-  .bp--value,
-  .bp--card {
-    padding-top: 1.5em;
-    padding-left: 1.5em;
-    padding-right: 1.5em;
-  }
-}
-
-#w-node-_399d947d-56b1-e710-5746-a0a5f0039a87-9fd74154,
-#w-node-_399d947d-56b1-e710-5746-a0a5f0039a82-9fd74154,
-#w-node-_399d947d-56b1-e710-5746-a0a5f0039a8c-9fd74154,
-#w-node-_399d947d-56b1-e710-5746-a0a5f0039a91-9fd74154,
-#w-node-_041de344-4f4b-53e4-1bfd-fb069093f632-9093f623,
-#w-node-_041de344-4f4b-53e4-1bfd-fb069093f63d-9093f623,
-#w-node-_4c308b66-d1d3-2bd2-33c3-6d4a8eb213b0-79ded8ce,
-#w-node-_692c258b-e6b3-6ae4-a71f-374b5ed108ec-22d74155,
-#w-node-_27d964d7-71bf-8ce5-1e1d-4b972b3ba478-22d74155,
-#w-node-_7466db0e-81a6-9bbe-98ec-b431b3344db5-22d74155,
-#w-node-_817dc116-5c27-258c-e786-af444fa08762-22d74155,
-#w-node-_38676560-e717-595a-5094-877f49e544a0-49e5449f,
-#w-node-_9b92584f-99b9-23be-771a-34fd65faf4d4-a9745761,
-#w-node-_6ae5c451-b99c-2666-8289-3a462e35fd71-2e35fd71,
-#w-node-c87483e8-cc45-6b38-841c-2f17ba12af6d-2e35fd71 {
-  grid-area: span 1 / span 1 / span 1 / span 1;
-}
-
-@font-face {
-  font-family: 'FontAwesome 6';
-  src:
-    url('https://uploads-ssl.webflow.com/63020a6ad41103c31cd7414e/63020a6ad41103330ed7417a_fa-regular-400.woff2')
-      format('woff2'),
-    url('https://uploads-ssl.webflow.com/63020a6ad41103c31cd7414e/63020a6ad41103db67d7417e_fa-regular-400.ttf')
-      format('truetype');
-  font-weight: 400;
-  font-style: normal;
-  font-display: auto;
-}
-
-@font-face {
-  font-family: 'FontAwesome 6';
-  src:
-    url('https://uploads-ssl.webflow.com/63020a6ad41103c31cd7414e/63020a6ad41103794bd7418c_fa-solid-900.woff2')
-      format('woff2'),
-    url('https://uploads-ssl.webflow.com/63020a6ad41103c31cd7414e/63020a6ad411033fc7d7417d_fa-solid-900.ttf')
-      format('truetype');
-  font-weight: 900;
-  font-style: normal;
-  font-display: auto;
-}
-
-@font-face {
-  font-family: 'FontAwesome Brands 6';
-  src:
-    url('https://uploads-ssl.webflow.com/63020a6ad41103c31cd7414e/63020a6ad41103fe94d74178_fa-brands-400.woff2')
-      format('woff2'),
-    url('https://uploads-ssl.webflow.com/63020a6ad41103c31cd7414e/63020a6ad411037fcdd7417c_fa-brands-400.ttf')
-      format('truetype');
-  font-weight: 400;
-  font-style: normal;
-  font-display: auto;
-}
-
-@font-face {
-  font-family: 'FontAwesome 6';
-  src:
-    url('https://uploads-ssl.webflow.com/63020a6ad41103c31cd7414e/63020a6ad411039933d74179_fa-thin-100.woff2')
-      format('woff2'),
-    url('https://uploads-ssl.webflow.com/63020a6ad41103c31cd7414e/63020a6ad411038365d7418e_fa-thin-100.ttf')
-      format('truetype');
-  font-weight: 100;
-  font-style: normal;
-  font-display: auto;
-}
-
-@font-face {
-  font-family: 'FontAwesome 6';
-  src:
-    url('https://uploads-ssl.webflow.com/63020a6ad41103c31cd7414e/63020a6ad411031febd7417b_fa-light-300.woff2')
-      format('woff2'),
-    url('https://uploads-ssl.webflow.com/63020a6ad41103c31cd7414e/63020a6ad41103530ed7418d_fa-light-300.ttf')
-      format('truetype');
-  font-weight: 300;
-  font-style: normal;
-  font-display: auto;
-}

src/index.css

···
-@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=DM+Serif+Display:ital@0;1&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=DM+Serif+Display:ital@0;1&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+html {
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  font-family: sans-serif;
+}
+
+body {
+  margin: 0;
+}
+
+/**
+ * Typography System
+ *
+ * A modular, responsive typography system using fluid type scaling.
+ * All typography components use these base classes for consistency.
+ *
+ * Design principles:
+ * - Fluid scaling from mobile (360px) to desktop (1200px)
+ * - Semantic sizing (sm, md, lg, xl, 2xl)
+ * - Optical adjustments for readability
+ * - Consistent vertical rhythm
+ */
+
+@layer base {
+  /* Typography base reset */
+  body {
+    @apply font-sans antialiased;
+    font-weight: 400;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /* Prevent layout shift during font load */
+  html {
+    font-feature-settings:
+      'kern' 1,
+      'liga' 1,
+      'calt' 1;
+  }
+}
+
+@layer components {
+  /**
+   * Typography Scale Classes
+   * Base sizing classes with optimized line heights
+   */
+
+  /* sm: Captions, footnotes, labels (14px → 16px) */
+  .type-sm {
+    @apply fluid-preset-sm;
+    line-height: 1.62;
+  }
+
+  /* md: Body copy, paragraphs (16px → 18px) */
+  .type-md {
+    @apply fluid-preset-md;
+    line-height: 1.38;
+  }
+
+  /* lg: Subheadings, lead paragraphs (18px → 24px) */
+  .type-lg {
+    @apply fluid-preset-lg;
+    line-height: 1.24;
+  }
+
+  /* xl: Headings (24px → 36px) */
+  .type-xl {
+    @apply fluid-preset-xl;
+    line-height: 1.16;
+  }
+
+  /* 2xl: Display text, hero headings (36px → 64px) */
+  .type-2xl {
+    @apply fluid-preset-2xl;
+    line-height: 1;
+  }
+
+  /**
+   * Heading Presets
+   * Always bold, uses Tailwind's native font-sans
+   */
+
+  .heading-display {
+    @apply type-2xl font-semibold font-sans;
+  }
+
+  .heading-2xl {
+    @apply type-2xl font-semibold font-sans;
+  }
+
+  .heading-xl {
+    @apply type-xl font-semibold font-sans;
+  }
+
+  .heading-lg {
+    @apply type-lg font-extrabold font-sans;
+  }
+
+  .heading-md {
+    @apply type-md font-extrabold font-sans;
+  }
+
+  .heading-sm {
+    @apply type-sm font-semibold font-sans;
+  }
+
+  /**
+   * Paragraph Presets
+   * Normal weight (400), uses Tailwind's native font-sans
+   */
+
+  .paragraph-2xl {
+    @apply type-2xl font-semibold font-sans;
+  }
+
+  .paragraph-xl {
+    @apply type-xl font-normal font-sans;
+  }
+
+  .paragraph-lg {
+    @apply type-lg font-normal font-sans;
+  }
+
+  .paragraph-md {
+    @apply type-md font-normal font-sans;
+  }
+
+  .paragraph-sm {
+    @apply type-sm font-normal font-sans;
+  }
+
+  /**
+   * Quote Presets
+   * Uses Tailwind's native font-serif, italic
+   */
+
+  .quote-xl {
+    @apply type-2xl font-normal font-sans italic;
+  }
+
+  .quote-lg {
+    @apply type-xl font-normal font-serif italic;
+  }
+
+  .quote-md {
+    @apply type-lg font-normal font-serif italic;
+  }
+
+  /**
+   * Code Presets
+   * Uses Tailwind's native font-mono
+   */
+
+  .code-inline {
+    @apply type-sm font-normal font-mono;
+  }
+
+  .code-block {
+    @apply type-sm font-normal font-mono;
+    line-height: 1.75;
+  }
+
+  /**
+   * Caption Preset
+   * Small text for image/media captions
+   */
+
+  .caption {
+    @apply type-sm font-normal font-sans;
+  }
+}
+
 @layer utilities {
+  /* Text selection */
   ::selection {
     @apply bg-bones-yellow text-bones-black;
   }
+
+  /* Prevent orphans in headings (last word alone on a line) */
+  .balance-text {
+    text-wrap: balance;
+  }
+
+  /* Optimize for readability */
+  .optimize-legibility {
+    text-rendering: optimizeLegibility;
+  }
+}
+
+/**
+ * Icon System - FontAwesome 6
+ */
+
+@font-face {
+  font-family: 'FontAwesome 6';
+  src:
+    url('https://uploads-ssl.webflow.com/63020a6ad41103c31cd7414e/63020a6ad41103330ed7417a_fa-regular-400.woff2')
+      format('woff2'),
+    url('https://uploads-ssl.webflow.com/63020a6ad41103c31cd7414e/63020a6ad41103db67d7417e_fa-regular-400.ttf')
+      format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: auto;
+}
+
+@font-face {
+  font-family: 'FontAwesome 6';
+  src:
+    url('https://uploads-ssl.webflow.com/63020a6ad41103c31cd7414e/63020a6ad41103794bd7418c_fa-solid-900.woff2')
+      format('woff2'),
+    url('https://uploads-ssl.webflow.com/63020a6ad41103c31cd7414e/63020a6ad411033fc7d7417d_fa-solid-900.ttf')
+      format('truetype');
+  font-weight: 900;
+  font-style: normal;
+  font-display: auto;
+}
+
+@font-face {
+  font-family: 'FontAwesome Brands 6';
+  src:
+    url('https://uploads-ssl.webflow.com/63020a6ad41103c31cd7414e/63020a6ad41103fe94d74178_fa-brands-400.woff2')
+      format('woff2'),
+    url('https://uploads-ssl.webflow.com/63020a6ad41103c31cd7414e/63020a6ad411037fcdd7417c_fa-brands-400.ttf')
+      format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: auto;
+}
+
+@font-face {
+  font-family: 'FontAwesome 6';
+  src:
+    url('https://uploads-ssl.webflow.com/63020a6ad41103c31cd7414e/63020a6ad411039933d74179_fa-thin-100.woff2')
+      format('woff2'),
+    url('https://uploads-ssl.webflow.com/63020a6ad41103c31cd7414e/63020a6ad411038365d7418e_fa-thin-100.ttf')
+      format('truetype');
+  font-weight: 100;
+  font-style: normal;
+  font-display: auto;
+}
+
+@font-face {
+  font-family: 'FontAwesome 6';
+  src:
+    url('https://uploads-ssl.webflow.com/63020a6ad41103c31cd7414e/63020a6ad411031febd7417b_fa-light-300.woff2')
+      format('woff2'),
+    url('https://uploads-ssl.webflow.com/63020a6ad41103c31cd7414e/63020a6ad41103530ed7418d_fa-light-300.ttf')
+      format('truetype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: auto;
 }

src/lib/data/getData.ts

···
 import path from 'path';
 import type { Article, CaseStudy, Company, ContentData, Job, Skill } from '@/types/content';
 
-const dataDirectory = path.join(process.cwd(), 'src', 'lib', 'data', 'json');
+const dataDirectory = path.join(process.cwd(), 'src', 'data', 'json');
 
 export async function getContent(): Promise<ContentData> {
   const filePath = path.join(dataDirectory, 'content.json');
···
     .sort((a, b) => new Date(b.publishedOn).getTime() - new Date(a.publishedOn).getTime())
     .slice(0, limit);
 }
+
+// Helper function to get latest jobs
+export async function getLatestJobs(limit: number = 5): Promise<Job[]> {
+  const jobs = await getJobs();
+  return jobs
+    .sort((a, b) => {
+      const dateA = b.endDate ? new Date(b.endDate).getTime() : Date.now();
+      const dateB = a.endDate ? new Date(a.endDate).getTime() : Date.now();
+      return dateA - dateB;
+    })
+    .slice(0, limit);
+}

src/main.tsx

···
 import { BrowserRouter as Router } from 'react-router-dom';
 import App from './App.tsx';
 import './index.css';
-import './global.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

src/pages/AboutPage.tsx

···
+import { CardRole } from '@/components/CardRole/CardRole';
+import { Divider } from '@/components/Divider/Divider';
 import { Heading } from '@/components/Heading/Heading';
 import { Aside, Layout, Main } from '@/components/Layout/Layout';
 import { Link } from '@/components/Link/Link';
+import { ListItem } from '@/components/ListItem/ListItem';
 import { Paragraph } from '@/components/Paragraph/Paragraph';
+import Section from '@/components/Section/Section';
 import TLDRProfile from '@/components/TLDRProfile/TLDRProfile';
+import { UnorderedList } from '@/components/UnorderedList/UnorderedList';
+import jobsData from '@/data/json/jobs.json';
 import type { JSX } from 'react';
 import { Helmet } from 'react-helmet-async';
 
···
  * @returns JSX element with about page content
  */
 export default function AboutPage(): JSX.Element {
+  // Get latest 5 jobs sorted by end date
+  const latestJobs = jobsData
+    .sort((a, b) => {
+      const dateA = b.endDate ? new Date(b.endDate).getTime() : Date.now();
+      const dateB = a.endDate ? new Date(a.endDate).getTime() : Date.now();
+      return dateA - dateB;
+    })
+    .slice(0, 5);
+
   const jsonLd = {
     '@context': 'https://schema.org',
     '@type': 'AboutPage',
     mainEntity: {
       '@type': 'Person',
       name: 'Barry Prendergast',
-      jobTitle: 'Consulting Design Strategist',
+      jobTitle: 'Product Designer',
       description:
-        'Design strategist helping ambitious organisations get better products to market faster by focusing on the metrics that matter.',
+        'Independent product designer helping organisations deliver better products through clear thinking, practical design, and meaningful collaboration.',
       url: 'https://renderg.host/about',
       sameAs: [
         'https://bsky.app/profile/renderg.host',
···
         <title>About | Barry Prendergast</title>
         <meta
           name="description"
-          content="Design strategist helping ambitious organisations get better products to market faster through outcome-driven design."
+          content="Independent product designer helping organisations deliver better products through clear thinking, practical design, and meaningful collaboration."
         />
         <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
       </Helmet>
 
       <Layout theme="default">
         <Main>
-          <div className="flex flex-col gap-12">
-            <Heading level={1} style="page">
-              About Me
+          <div className="flex flex-col gap-16">
+            {/* Heading */}
+            <Heading level={2} size="md">
+              about / <Link href="/">renderg.host</Link>
             </Heading>
-            <Paragraph size="billboard">
-              I help ambitious organisations get better products to market faster by focusing on the metrics that
-              matter.
-            </Paragraph>
+
+            {/* Hero Section*/}
+            <Section className="flex flex-col">
+              <Paragraph size="2xl">
+                I&apos;m an independent designer helping organisations deliver better products and services through
+                clear thinking, practical design, and meaningful collaboration.
+              </Paragraph>
+              <Paragraph size="xl">
+                I&apos;ve spent over 15 years building measurably successful things in complex domains, from scientific
+                publishing and medical devices, to energy infrastructure and government services, and more.
+              </Paragraph>
+            </Section>
+
+            {/* What I Do Section*/}
+            <Section className="flex flex-col">
+              <Heading level={2} size="xl">
+                What I do...
+              </Heading>
+
+              <Heading level={3} size="md">
+                For Customers & Users
+              </Heading>
+
+              <UnorderedList bullet="angle">
+                <ListItem>Build autonomy-driven products that people can easily master</ListItem>
+                <ListItem>Connect people to help them work better, together</ListItem>
+                <ListItem>Create interactions that feel obvious and reassuring</ListItem>
+                <ListItem>Design efficient usable interfaces that respect people&apos;s time</ListItem>
+                <ListItem>Simplify complexity so users can get things done, faster</ListItem>
+              </UnorderedList>
+
+              <Heading level={3} size="md">
+                For Business
+              </Heading>
+
+              <UnorderedList bullet="angle">
+                <ListItem>Connect design decisions to leading metrics that drive growth</ListItem>
+                <ListItem>Get to market faster by testing risky product assumptions early</ListItem>
+                <ListItem>Increase adoption and retention by simplifying complexity</ListItem>
+                <ListItem>Reduce support costs with self-service user experiences</ListItem>
+                <ListItem>Streamline engineering overheads with lean iteration</ListItem>
+              </UnorderedList>
+
+              <Heading level={3} size="md">
+                For Products & Services
+              </Heading>
 
-            <Paragraph size="billboard">
-              I believe that great design comes from <em>bold ideas</em>, timely conversations with the right people,
-              and rigorous testing against the right metrics in lean, iterative cycles.
-            </Paragraph>
+              <UnorderedList bullet="angle">
+                <ListItem>Build prototypes that answer key questions before development</ListItem>
+                <ListItem>Create scalable, maintainable design systems</ListItem>
+                <ListItem>Test designs with real users to guide confident decisions</ListItem>
+                <ListItem>Translate business goals into measurable design outcomes</ListItem>
+                <ListItem>Turn complex workflows into clear, usable interfaces</ListItem>
+              </UnorderedList>
 
-            <Paragraph size="billboard">
-              I&apos;m a fellow of the{' '}
-              <Link href="https://thomaskuhnfoundation.org/" target="_blank">
-                Thomas Kuhn Foundation
-              </Link>
-              , supporting new ways to understand scientific knowledge.
-            </Paragraph>
+              <Heading level={3} size="md">
+                For Stakeholders & Teams
+              </Heading>
+
+              <UnorderedList bullet="angle">
+                <ListItem>Coach teams to make confident, informed design choices</ListItem>
+                <ListItem>Create healthy feedback loops that strengthen outcomes</ListItem>
+                <ListItem>Define design processes that support collaboration and progress</ListItem>
+                <ListItem>Establish research practices that directly inform decisions</ListItem>
+                <ListItem>Write lightweight docs teams refer to every day</ListItem>
+              </UnorderedList>
+            </Section>
+
+            <Section>
+              <Heading level={2} size="lg">
+                Currently
+              </Heading>
+
+              <div className="flex flex-col gap-6">
+                <Paragraph size="lg">Freelancing as a ____</Paragraph>
+                {/* TODO: Add CTA to /Contact page when ready */}
+
+                <Paragraph size="lg">
+                  I&apos;m a fellow of the{' '}
+                  <Link href="https://thomaskuhnfoundation.org/" target="_blank" rel="noopener noreferrer">
+                    Thomas Kuhn Foundation
+                  </Link>
+                  , supporting new ways to understand scientific knowledge.
+                </Paragraph>
+
+                <Paragraph size="lg">
+                  <Link href="/writing">Read my Blog</Link>
+                </Paragraph>
+
+                <Paragraph size="lg">I&apos;m building tools for the ATprotocol</Paragraph>
+
+                <Paragraph size="lg">
+                  <Link href="/writing">Read my Blog</Link>
+                </Paragraph>
+              </div>
+            </Section>
+            <Section>
+              <Heading level={2} size="lg">
+                Recent Work
+              </Heading>
+
+              <div className="grid grid-cols-1 border-2 border-bones-white-30">
+                {latestJobs.map((job, index) => {
+                  const startYear = new Date(job.startDate).getFullYear();
+                  const endYear = job.endDate ? new Date(job.endDate).getFullYear() : 'Present';
+                  const dateRange = startYear === endYear ? `${startYear}` : `${startYear}–${endYear}`;
 
-            <Paragraph size="billboard">
-              I try to tackle the hardest problems by listening closely, communicating clearly and collaborating openly
-              by default.
-            </Paragraph>
+                  return (
+                    <>
+                      <CardRole
+                        key={job.slug}
+                        role={{
+                          title: job.title,
+                          company: job.client,
+                          subtitle: job.summary,
+                          date: dateRange,
+                          // coverImage: job.cover,
+                          slug: job.slug,
+                        }}
+                      />
+                      {index < latestJobs.length - 1 && <Divider />}
+                    </>
+                  );
+                })}
+              </div>
 
-            <Paragraph size="billboard">
-              My design approach balances <em>strategic clarity</em> with research and design excellence, while
-              responding to the everchanging needs of an agile product team.
-            </Paragraph>
+              {/* TODO: Add link to Resume when ready */}
+              {/* TODO: Add CTA to /Contact page when ready */}
+            </Section>
+            <Section>
+              <Heading level={2} size="lg">
+                How I Work
+              </Heading>
 
-            <Paragraph size="billboard">
-              I help teams to cut through distractions, to adapt when things don&apos;t go to plan, and to stay focused
-              on what matters most—to the teams and their customers alike.
-            </Paragraph>
+              <Paragraph size="lg">My approach is straightforward and outcome-focused.</Paragraph>
 
-            <Heading level={2} style="section">
-              I <Link href="#">specialise</Link> in three areas.
-            </Heading>
+              <UnorderedList bullet="disc">
+                <ListItem size="lg">I start by understanding users and the problems they face</ListItem>
+                <ListItem>I design and prototype quickly to validate ideas early</ListItem>
+                <ListItem>I measure results and refine based on evidence</ListItem>
+                <ListItem>I document decisions to help teams move with clarity</ListItem>
+                <ListItem>I build systems that continue to work well beyond my involvement</ListItem>
+              </UnorderedList>
 
-            <Paragraph size="billboard">
-              <em>Design Strategy</em>: Aligning key business metrics with unmet user needs. I translate business goals
-              into actionable product and design objectives, ensuring every design decision drives meaningful success.
-            </Paragraph>
+              <Paragraph size="lg">
+                <Link href="/writing">Read my Blog</Link>
+              </Paragraph>
+            </Section>
+            <Section>
+              <Heading level={2} size="lg">
+                What Drives Me
+              </Heading>
 
-            <Paragraph size="billboard">
-              <em>Product Design</em>: Hands-on design and prototyping to validate bets and improve user experiences. I
-              combine research, usability, and rapid prototyping to de-risk product decisions and refine solutions over
-              time through continuous iteration.
-            </Paragraph>
+              <Paragraph size="lg">
+                <strong>At work:</strong> Designing with purpose. Creating products that respect users&apos; time and
+                intelligence. Collaborating with teams that value clarity, curiosity, and progress.
+              </Paragraph>
 
-            <Paragraph size="billboard">
-              <em>Design Operations</em>: Optimising the tools, rituals, and metrics that nurture great design culture.
-              I streamline workflows, remove friction, and embed scalable design practices that empower teams to move
-              fast without compromising quality.
-            </Paragraph>
+              <Paragraph size="lg">
+                <strong>Outside work:</strong> Learning continuously—currently exploring systems thinking and
+                information architecture. Making experimental music when the kids are asleep. Reading everything from
+                technical manuals to science fiction.
+              </Paragraph>
+            </Section>
+            <Section>
+              <Heading level={2} size="lg">
+                Work With Me
+              </Heading>
 
-            <Paragraph size="billboard">
-              Since 2008, I&apos;ve worked with organisations including{' '}
-              <Link href="https://www.morressier.com/" target="_blank">
-                Morressier
-              </Link>
-              ,{' '}
-              <Link href="https://www.leo-pharma.com/" target="_blank">
-                LEO Pharma
-              </Link>
-              ,{' '}
-              <Link href="https://www.edfenergy.com/" target="_blank">
-                EDF Energy
-              </Link>
-              ,{' '}
-              <Link href="https://www.gov.uk/government/organisations/home-office" target="_blank">
-                UK Home Office
-              </Link>
-              ,{' '}
-              <Link href="https://www.brandwatch.com/" target="_blank">
-                Brandwatch
-              </Link>
-              , and{' '}
-              <Link href="https://mediatonicgames.com/" target="_blank">
-                Mediatonic
-              </Link>
-              —from scientific publishing to pharmaceuticals, energy to government, consumer intelligence to gaming.
-            </Paragraph>
+              <Paragraph size="lg">I collaborate with organisations that:</Paragraph>
 
-            <Paragraph size="billboard">
-              <Link href="https://calendar.app.google/cuYkSrDLca1Wxfqo9" target="_blank" rel="noopener noreferrer">
-                Book our first meeting
-              </Link>
-              , connect on{' '}
-              <Link href="https://linkedin.com/in/barryprendergast" target="_blank" rel="noopener noreferrer">
-                LinkedIn
-              </Link>
-              , or message me on{' '}
-              <Link
-                href="https://signal.me/#eu/XO_aKC1aE1GZYWdMx7WK7HKGSCfrlpNhlxLGNi774dhiL7qr32BAMrH1BqgChaiM"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Signal
-              </Link>
-              .
-            </Paragraph>
+              <UnorderedList bullet="disc">
+                <ListItem>Are tackling meaningful challenges</ListItem>
+                <ListItem>Value clarity, purpose, and long-term impact</ListItem>
+                <ListItem>See design as a driver of business value</ListItem>
+                <ListItem>Want to build better ways of working, not just better interfaces</ListItem>
+              </UnorderedList>
 
-            <Paragraph size="billboard">
-              <Link href="/">← Back to Home</Link>
+              {/* TODO: Add CTA to /Contact page when ready */}
+            </Section>
+            <Paragraph size="lg">
+              <Link href="/">← Back to home</Link>
             </Paragraph>
           </div>
         </Main>

src/pages/HomePage.tsx

···
 
       <Layout theme="accent">
         <Main>
-          <div className="flex flex-col gap-12">
-            <Heading level={1} style="billboard">
+          <div className="flex flex-col gap-16">
+            <Heading level={1} size="2xl">
               Hi! 👋 I&apos;m Barry Prendergast, a design strategist living in Berlin, Germany.
             </Heading>
 
-            <Paragraph size="billboard">
+            <Paragraph size="2xl">
               I <Link href="/about">specialise</Link> in <em>outcome</em>-driven design strategy, practice, and systems
               for digital products and services.
             </Paragraph>
 
-            <Paragraph size="billboard">
+            <Paragraph size="2xl">
               I{' '}
               <Link href="https://www.linkedin.com/in/barrymprendergast/details/experience/" target="_blank">
                 work
···
               with nonprofits and startups to ease their growing pains, and to market faster.
             </Paragraph>
 
-            <Paragraph size="billboard">
+            <Paragraph size="2xl">
               I <Link href="/writing">write</Link> about about academia, design, product, science, systems, technology &
               the messy in-betweens.
             </Paragraph>
 
-            <Paragraph size="billboard">
+            <Paragraph size="2xl">
               <Link href="https://cal.com/renderghost" target="_blank" rel="noopener noreferrer">
                 Book a meeting
               </Link>{' '}

src/pages/WritingPage.tsx

···
  *
  * @returns JSX element with writing page content
  */
+
 export default function WritingPage(): JSX.Element {
   const { data: documents, loading, error } = fetchPublications();
 
···
       <Layout theme="default">
         <Main>
           <div className="flex flex-col gap-12">
-            <Heading level={1} style="page">
-              Writing
+            <Paragraph size="md">
+              <Link href="/">←Home </Link>
+            </Paragraph>
+            <Heading level={1} size="md">
+              My Writing
             </Heading>
 
-            <Paragraph size="billboard">
-              Thoughts on design strategy, product design, and building better products.
-            </Paragraph>
+            <Paragraph size="lg">Thoughts on design strategy, product design, and building better products.</Paragraph>
 
-            {loading && <Paragraph size="billboard">Loading posts...</Paragraph>}
+            {loading && <Paragraph size="lg">Loading posts...</Paragraph>}
 
-            {error && <Paragraph size="billboard">Error loading posts: {error}</Paragraph>}
+            {error && <Paragraph size="lg">Error loading posts: {error}</Paragraph>}
 
             {!loading && !error && (!documents || documents.length === 0) && (
-              <Paragraph size="billboard">No posts found.</Paragraph>
+              <Paragraph size="lg">No posts found.</Paragraph>
             )}
 
             {!loading && !error && documents && documents.length > 0 && (
···
               </div>
             )}
 
-            <Paragraph size="billboard">
+            <Paragraph size="lg">
               <Link href="/">← Back to Home</Link>
             </Paragraph>
           </div>

tailwind.config.ts

···
       fontFamily: {
         sans: ['DM Sans', 'sans-serif'],
         serif: ['DM Serif Display', 'serif'],
+        mono: ['DM Mono', 'monospace'],
       },
       colors: {
         // Mono