diff --git a/public/fonts/hanken-grotesk-400-latin-ext.woff2 b/public/fonts/hanken-grotesk-400-latin-ext.woff2
new file mode 100644
index 0000000..1dc0e89
Binary files /dev/null and b/public/fonts/hanken-grotesk-400-latin-ext.woff2 differ
diff --git a/public/fonts/hanken-grotesk-400-latin.woff2 b/public/fonts/hanken-grotesk-400-latin.woff2
new file mode 100644
index 0000000..518e2c4
Binary files /dev/null and b/public/fonts/hanken-grotesk-400-latin.woff2 differ
diff --git a/public/fonts/hanken-grotesk-500-latin-ext.woff2 b/public/fonts/hanken-grotesk-500-latin-ext.woff2
new file mode 100644
index 0000000..1dc0e89
Binary files /dev/null and b/public/fonts/hanken-grotesk-500-latin-ext.woff2 differ
diff --git a/public/fonts/hanken-grotesk-500-latin.woff2 b/public/fonts/hanken-grotesk-500-latin.woff2
new file mode 100644
index 0000000..518e2c4
Binary files /dev/null and b/public/fonts/hanken-grotesk-500-latin.woff2 differ
diff --git a/public/fonts/hanken-grotesk-600-latin-ext.woff2 b/public/fonts/hanken-grotesk-600-latin-ext.woff2
new file mode 100644
index 0000000..1dc0e89
Binary files /dev/null and b/public/fonts/hanken-grotesk-600-latin-ext.woff2 differ
diff --git a/public/fonts/hanken-grotesk-600-latin.woff2 b/public/fonts/hanken-grotesk-600-latin.woff2
new file mode 100644
index 0000000..518e2c4
Binary files /dev/null and b/public/fonts/hanken-grotesk-600-latin.woff2 differ
diff --git a/public/fonts/hanken-grotesk-700-latin-ext.woff2 b/public/fonts/hanken-grotesk-700-latin-ext.woff2
new file mode 100644
index 0000000..1dc0e89
Binary files /dev/null and b/public/fonts/hanken-grotesk-700-latin-ext.woff2 differ
diff --git a/public/fonts/hanken-grotesk-700-latin.woff2 b/public/fonts/hanken-grotesk-700-latin.woff2
new file mode 100644
index 0000000..518e2c4
Binary files /dev/null and b/public/fonts/hanken-grotesk-700-latin.woff2 differ
diff --git a/public/fonts/jetbrains-mono-400-latin-ext.woff2 b/public/fonts/jetbrains-mono-400-latin-ext.woff2
new file mode 100644
index 0000000..82f9668
Binary files /dev/null and b/public/fonts/jetbrains-mono-400-latin-ext.woff2 differ
diff --git a/public/fonts/jetbrains-mono-400-latin.woff2 b/public/fonts/jetbrains-mono-400-latin.woff2
new file mode 100644
index 0000000..4d09cda
Binary files /dev/null and b/public/fonts/jetbrains-mono-400-latin.woff2 differ
diff --git a/public/fonts/jetbrains-mono-500-latin-ext.woff2 b/public/fonts/jetbrains-mono-500-latin-ext.woff2
new file mode 100644
index 0000000..82f9668
Binary files /dev/null and b/public/fonts/jetbrains-mono-500-latin-ext.woff2 differ
diff --git a/public/fonts/jetbrains-mono-500-latin.woff2 b/public/fonts/jetbrains-mono-500-latin.woff2
new file mode 100644
index 0000000..4d09cda
Binary files /dev/null and b/public/fonts/jetbrains-mono-500-latin.woff2 differ
diff --git a/public/fonts/jetbrains-mono-600-latin-ext.woff2 b/public/fonts/jetbrains-mono-600-latin-ext.woff2
new file mode 100644
index 0000000..82f9668
Binary files /dev/null and b/public/fonts/jetbrains-mono-600-latin-ext.woff2 differ
diff --git a/public/fonts/jetbrains-mono-600-latin.woff2 b/public/fonts/jetbrains-mono-600-latin.woff2
new file mode 100644
index 0000000..4d09cda
Binary files /dev/null and b/public/fonts/jetbrains-mono-600-latin.woff2 differ
diff --git a/public/fonts/tilt-warp-400-latin-ext.woff2 b/public/fonts/tilt-warp-400-latin-ext.woff2
new file mode 100644
index 0000000..a457508
Binary files /dev/null and b/public/fonts/tilt-warp-400-latin-ext.woff2 differ
diff --git a/public/fonts/tilt-warp-400-latin.woff2 b/public/fonts/tilt-warp-400-latin.woff2
new file mode 100644
index 0000000..13f82c0
Binary files /dev/null and b/public/fonts/tilt-warp-400-latin.woff2 differ
diff --git a/src/App.scss b/src/App.scss
index 9cd653d..e43c804 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -7,7 +7,7 @@
   isolation: isolate;
   background: $color-bg;
 
-  // Blueprint guide lines – faint vertical structure spanning the page,
+  // Blueprint guide lines — faint vertical structure spanning the page,
   // sits behind all content and the WebGL field. Reads as an engineering grid.
   &::before {
     content: "";
diff --git a/src/App.tsx b/src/App.tsx
index 9f44b02..d302872 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
-import { lazy, Suspense } from 'react';
 import './App.scss';
+import Scene from './components/three/Scene';
 import Navbar from './components/sections/Navbar';
 import Hero from './components/sections/Hero';
 import About from './components/sections/About';
@@ -8,14 +8,10 @@ import Services from './components/sections/Services';
 import Contact from './components/sections/Contact';
 import Footer from './components/sections/Footer';
 
-const Scene = lazy(() => import('./components/three/Scene'));
-
 function App() {
   return (
     <div className="App">
-      <Suspense fallback={null}>
-        <Scene />
-      </Suspense>
+      <Scene />
       <Navbar />
       <main>
         <Hero />
diff --git a/src/components/sections/About.tsx b/src/components/sections/About.tsx
index 97f121c..90a0533 100644
--- a/src/components/sections/About.tsx
+++ b/src/components/sections/About.tsx
@@ -14,8 +14,13 @@ export const About = React.memo(function About() {
   return (
     <Section id="about" index="01" label="About">
       <SectionHeader
-        title="Senior engineers, end to end – no hand-offs to juniors"
-        lead="We take Web3 infrastructure, AI products and full-stack platforms from idea to production – and keep them running clean, without the technical debt that slows you down later"
+        title={
+          <>
+            Senior engineers, end to end –<br />
+            no hand-offs to juniors.
+          </>
+        }
+        lead="We take Web3 infrastructure, AI products and full-stack platforms from idea to production – and keep them running clean, without the technical debt that slows you down later."
       />
 
       <ul className="about__facts">
diff --git a/src/components/sections/Contact.scss b/src/components/sections/Contact.scss
index 08fcd13..b9b9a36 100644
--- a/src/components/sections/Contact.scss
+++ b/src/components/sections/Contact.scss
@@ -4,20 +4,15 @@
 .contact {
   &__email {
     position: relative;
-    z-index: 1;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: $space-md;
-    width: 100%;
     padding: $space-lg;
     margin-top: $space-lg;
     @include glass;
     border-radius: $radius-md;
     color: $color-text;
-    text-decoration: none;
-    cursor: pointer;
-    pointer-events: auto;
 
     &:hover {
       border-color: $color-glass-edge;
diff --git a/src/components/sections/Contact.tsx b/src/components/sections/Contact.tsx
index 10a564f..1935fa6 100644
--- a/src/components/sections/Contact.tsx
+++ b/src/components/sections/Contact.tsx
@@ -22,7 +22,7 @@ export const Contact = React.memo(function Contact() {
         </a>
 
         <p className="contact__note">
-          Tell us what you're building, we reply within a day
+          Tell us what you're building. We reply within a day.
         </p>
       </div>
     </Section>
diff --git a/src/components/sections/Footer.tsx b/src/components/sections/Footer.tsx
index 55aafb9..336417f 100644
--- a/src/components/sections/Footer.tsx
+++ b/src/components/sections/Footer.tsx
@@ -11,8 +11,6 @@ const socials = [
 ];
 
 export const Footer = React.memo(function Footer() {
-  const currentYear = new Date().getFullYear();
-
   return (
     <footer className="footer">
       <div className="footer__container">
@@ -22,7 +20,7 @@ export const Footer = React.memo(function Footer() {
         </div>
 
         <p className="footer__copyright">
-          © 2021-{currentYear} Ever Guild · All rights reserved · ever-guild.net
+          © 2026 Ever Guild
         </p>
 
         <div className="footer__socials">
diff --git a/src/components/sections/Hero.scss b/src/components/sections/Hero.scss
index 4470d73..d8eabab 100644
--- a/src/components/sections/Hero.scss
+++ b/src/components/sections/Hero.scss
@@ -6,7 +6,8 @@
   z-index: $z-content;
   display: flex;
   align-items: center;
-  min-height: 88vh;
+  min-height: 100vh;
+  min-height: 100svh; // full screen — keep the next section from peeking in
   padding-block: 8rem 4rem;
 
   &__inner {
diff --git a/src/components/sections/Hero.tsx b/src/components/sections/Hero.tsx
index 1b92997..7734279 100644
--- a/src/components/sections/Hero.tsx
+++ b/src/components/sections/Hero.tsx
@@ -28,14 +28,14 @@ const Hero = React.memo(function Hero() {
         </p>
 
         <h1 className="hero__tagline">
-          Software that lasts
+          Software that lasts.
           <br />
-          <span className="hero__tagline-accent">Community</span> that builds
+          <span className="hero__tagline-accent">Community</span> that builds.
         </h1>
 
         <p className="hero__description">
           Senior engineers who ship Web3, AI and full-stack products built to
-          survive production – and stay maintainable long after launch
+          survive production – and stay maintainable long after launch.
         </p>
 
         <div className="hero__actions">
diff --git a/src/components/sections/Navbar.scss b/src/components/sections/Navbar.scss
index c85f02d..8b1c2f6 100644
--- a/src/components/sections/Navbar.scss
+++ b/src/components/sections/Navbar.scss
@@ -16,7 +16,7 @@
     inset: 0 0 -24px 0;
     z-index: -1;
     pointer-events: none;
-    // Blur only – no darkening tint.
+    // Blur only — no darkening tint.
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     // Feather the bottom edge so there is no hard line under the header.
diff --git a/src/components/sections/Navbar.tsx b/src/components/sections/Navbar.tsx
index 6e87e26..62f206d 100644
--- a/src/components/sections/Navbar.tsx
+++ b/src/components/sections/Navbar.tsx
@@ -8,6 +8,7 @@ const navLinks = [
   { label: "About", href: "#about" },
   { label: "Team", href: "#team" },
   { label: "Services", href: "#services" },
+  { label: "Contact", href: "#contact" },
 ];
 
 const Navbar = React.memo(function Navbar() {
@@ -31,7 +32,7 @@ const Navbar = React.memo(function Navbar() {
     <header className={`navbar ${isScrolled ? "navbar--scrolled" : ""}`}>
       <div className="navbar__container">
         <a href="#" className="navbar__brand" onClick={closeMobileMenu}>
-          <img src={logo} alt="Ever Guild" className="navbar__logo" width={1020} height={157} />
+          <img src={logo} alt="Ever Guild" className="navbar__logo" />
         </a>
 
         <nav
diff --git a/src/components/sections/Services.scss b/src/components/sections/Services.scss
index 7382bc3..7c25e58 100644
--- a/src/components/sections/Services.scss
+++ b/src/components/sections/Services.scss
@@ -19,7 +19,7 @@
     padding: $space-lg;
     overflow: hidden;
 
-    // Gold top edge – strengthens on hover.
+    // Gold top edge — strengthens on hover.
     &::before {
       content: "";
       position: absolute;
@@ -41,37 +41,27 @@
     }
   }
 
-  &__sigil {
-    display: block;
-    width: 3.5rem;
-    height: 3.5rem;
-    margin-bottom: $space-sm;
-    color: $color-accent;
-    filter: drop-shadow(0 0 10px rgba(241, 184, 0, 0.12));
-  }
-
-  &__sigil-ring,
-  &__sigil-ray,
-  &__sigil-glyph {
-    fill: none;
-    stroke: currentColor;
-    stroke-linecap: round;
-    stroke-linejoin: round;
+  &__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: $space-md;
   }
 
-  &__sigil-ring {
-    stroke-width: 1.2;
-    opacity: 0.62;
-  }
+  &__icon {
+    display: inline-flex;
+    font-size: 1.6rem;
+    color: $color-accent;
 
-  &__sigil-ray {
-    stroke-width: 1;
-    opacity: 0.32;
+    svg { display: block; }
   }
 
-  &__sigil-glyph {
-    stroke-width: 2;
-    opacity: 0.9;
+  &__num {
+    font-family: $font-mono;
+    font-size: $text-xs;
+    font-weight: 600;
+    letter-spacing: $tracking-wide;
+    color: $color-text-3;
   }
 
   &__title {
@@ -91,7 +81,7 @@
   &__marquee {
     margin-top: $space-xl;
     overflow: hidden;
-    // Ends dissolve into a gradient – text appears to fade away.
+    // Ends dissolve into a gradient — text appears to fade away.
     mask-image: linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%);
     -webkit-mask-image: linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%);
 
diff --git a/src/components/sections/Services.tsx b/src/components/sections/Services.tsx
index db1e0d9..d0624d2 100644
--- a/src/components/sections/Services.tsx
+++ b/src/components/sections/Services.tsx
@@ -5,80 +5,44 @@ import {
   SiTypescript, SiReact, SiNextdotjs, SiNodedotjs, SiPython, SiRust,
   SiGo, SiSolidity, SiDocker, SiPostgresql, SiGraphql, SiFigma,
 } from 'react-icons/si';
+import {
+  LuBlocks, LuCpu, LuLayers, LuPenTool, LuBadgeCheck, LuLifeBuoy,
+} from 'react-icons/lu';
 import './Services.scss';
 
 const services = [
   {
+    Icon: LuBlocks,
     title: 'Web3 & Blockchain',
-    description: 'Production-grade smart contracts and protocol integrations on TON, EVM and NEAR – audited patterns, built to hold real value',
+    description: 'Production-grade smart contracts and protocol integrations on TON, EVM and NEAR – audited patterns, built to hold real value.',
   },
   {
+    Icon: LuCpu,
     title: 'AI & Automation',
-    description: 'LLM integrations, AI agents and workflow automation wired into your product – not bolted on as an afterthought',
+    description: 'LLM integrations, AI agents and workflow automation wired into your product – not bolted on as an afterthought.',
   },
   {
+    Icon: LuLayers,
     title: 'Full-Stack Development',
-    description: 'React, Next.js and Node.js SaaS platforms, dashboards and marketplaces – shipped fast, built to scale',
+    description: 'React, Next.js and Node.js SaaS platforms, dashboards and marketplaces – shipped fast, built to scale.',
   },
   {
+    Icon: LuPenTool,
     title: 'Product Design & UI/UX',
-    description: 'Interfaces, prototypes and design systems that stay clean and responsive across every screen',
+    description: 'Interfaces, prototypes and design systems that stay clean and responsive across every screen.',
   },
   {
+    Icon: LuBadgeCheck,
     title: 'Candidate Experience Verification',
-    description: 'Independent verification of claimed engineering experience for safer technical hiring decisions',
+    description: 'Independent verification of claimed engineering experience for safer, sharper technical hiring decisions.',
   },
   {
+    Icon: LuLifeBuoy,
     title: 'Crisis Engineering Management',
-    description: 'Rapid intervention for software projects facing delivery, quality or team breakdowns',
+    description: 'Rapid intervention for software projects facing delivery, quality or team breakdowns – back on track, fast.',
   },
 ];
 
-const morphemes: Record<string, React.ReactNode> = {
-  axis: <path d="M32 16v32" />,
-  break: <path d="M22 22l9 10-7 10M42 22l-9 10 7 10" />,
-  core: <circle cx="32" cy="32" r="5" />,
-  frame: <path d="M20 20h24v24H20z" />,
-  gate: <path d="M18 24h28v18H18zM18 24l14 12 14-12" />,
-  link: <path d="M18 32h28M24 24l16 16M40 24 24 40" />,
-  stack: <path d="M20 24h24l-12 8-12-8Zm0 16h24l-12-8-12 8Z" />,
-  spark: <path d="M32 16v32M16 32h32M22 22l20 20M42 22 22 42" />,
-  seal: <path d="M20 38c4-10 20-10 24 0M24 24h16" />,
-  sight: <path d="M18 32c6-9 22-9 28 0-6 9-22 9-28 0Z" />,
-};
-
-const serviceSigils = [
-  ['core', 'link', 'stack'],
-  ['core', 'spark', 'axis'],
-  ['core', 'stack', 'axis'],
-  ['core', 'frame', 'sight'],
-  ['core', 'seal', 'sight'],
-  ['core', 'break', 'link'],
-];
-
-function ServiceSigil({ variant }: { variant: number }) {
-  const parts = serviceSigils[variant % serviceSigils.length];
-
-  return (
-    <svg
-      className="services__sigil"
-      viewBox="0 0 64 64"
-      role="img"
-      aria-hidden="true"
-      focusable="false"
-    >
-      <circle className="services__sigil-ring" cx="32" cy="32" r="26" />
-      <path className="services__sigil-ray" d="M32 4v10M32 50v10M4 32h10M50 32h10" />
-      <path className="services__sigil-ray" d="M12.2 12.2l7.1 7.1M44.7 44.7l7.1 7.1M51.8 12.2l-7.1 7.1M19.3 44.7l-7.1 7.1" />
-      <g className="services__sigil-glyph">
-        {parts.map((part) => (
-          <React.Fragment key={part}>{morphemes[part]}</React.Fragment>
-        ))}
-      </g>
-    </svg>
-  );
-}
-
 const stack = [
   { name: 'TypeScript', Icon: SiTypescript },
   { name: 'React', Icon: SiReact },
@@ -97,12 +61,19 @@ const stack = [
 export const Services = React.memo(function Services() {
   return (
     <Section id="services" index="03" label="Services">
-      <SectionHeader title="What we build for you" />
+      <SectionHeader title="What we build for you." />
 
       <div className="services__grid">
         {services.map((service, i) => (
           <article key={service.title} className="services__card">
-            <ServiceSigil variant={i} />
+            <div className="services__head">
+              <span className="services__icon" aria-hidden="true">
+                <service.Icon />
+              </span>
+              <span className="services__num" aria-hidden="true">
+                {String(i + 1).padStart(2, '0')}
+              </span>
+            </div>
             <h3 className="services__title">{service.title}</h3>
             <p className="services__desc">{service.description}</p>
           </article>
diff --git a/src/components/sections/Team.tsx b/src/components/sections/Team.tsx
index 69532c0..3d3d74d 100644
--- a/src/components/sections/Team.tsx
+++ b/src/components/sections/Team.tsx
@@ -3,19 +3,19 @@ import { Section } from "../ui/Section";
 import { SectionHeader } from "../ui/SectionHeader";
 import { SiGithub } from "react-icons/si";
 import { ArrowUpRight } from "lucide-react";
-import ilyarAvatar from "../../assets/avatars/ilyar.webp";
+import iljarAvatar from "../../assets/avatars/ilyar.webp";
 import ppmarkekAvatar from "../../assets/avatars/ppmarkek.webp";
 import glazlkAvatar from "../../assets/avatars/glazlk.webp";
 import "./Team.scss";
 
 const team = [
   {
-    name: "Ilyar",
+    name: "Ilia",
     role: "Senior Engineer · Web3 Lead",
-    avatar: ilyarAvatar,
+    avatar: iljarAvatar,
     github: "https://github.com/ilyar",
     handle: "ilyar",
-    bio: "Leads the guild with expertise in Web3 infrastructure, backend systems, blockchain architecture, smart contracts, Rust (Near, Solana), TON, EVM, TypeScript, automated testing, and reliability",
+    bio: "Leads Web3 infrastructure and backend systems – smart contracts in Rust and Solidity on TON and EVM, built to stay reliable.",
   },
   {
     name: "Marks",
@@ -23,7 +23,7 @@ const team = [
     avatar: ppmarkekAvatar,
     github: "https://github.com/ppmarkek",
     handle: "ppmarkek",
-    bio: "Full-stack development, AI automation, frontend engineering, and backend APIs. React, Next.js, TypeScript, Node.js, SaaS apps, dashboards, marketplaces, and product delivery",
+    bio: "Builds full-stack products and AI automation – React, Next.js and Node.js for SaaS apps, dashboards and marketplaces.",
   },
   {
     name: "Andrei",
@@ -31,14 +31,14 @@ const team = [
     avatar: glazlkAvatar,
     github: "https://github.com/Glazlk",
     handle: "Glazlk",
-    bio: "Product design and frontend: UI/UX, visual design, interface layouts, prototypes, responsive web, web animation, game UI/UX, design systems, and AI-assisted workflows",
+    bio: "Designs products end to end – UI/UX, prototypes and design systems for responsive web, with AI-assisted workflows.",
   },
 ];
 
 export const Team = React.memo(function Team() {
   return (
     <Section id="team" variant="alt" index="02" label="Team">
-      <SectionHeader title="The senior engineers you'll work with directly" />
+      <SectionHeader title="The senior engineers you'll work with directly." />
 
       <div className="team">
         {team.map((member) => (
@@ -47,10 +47,7 @@ export const Team = React.memo(function Team() {
               src={member.avatar}
               alt={member.name}
               className="team__avatar"
-              width={800}
-              height={800}
               loading="lazy"
-              decoding="async"
             />
 
             <div className="team__body">
@@ -63,7 +60,7 @@ export const Team = React.memo(function Team() {
                 target="_blank"
                 rel="noopener noreferrer"
                 className="team__github"
-                aria-label={`${member.name} (@${member.handle}) on GitHub`}
+                aria-label={`${member.name} on GitHub`}
               >
                 <SiGithub size={15} />
                 <span className="team__github-handle">@{member.handle}</span>
diff --git a/src/components/three/InfinityField.tsx b/src/components/three/InfinityField.tsx
index ba891da..63b9c4c 100644
--- a/src/components/three/InfinityField.tsx
+++ b/src/components/three/InfinityField.tsx
@@ -18,10 +18,11 @@ interface ParticleData {
   paths: Float32Array;
 }
 
-const MAIN_PARTICLES = 2600;
-const HALO_PARTICLES = 1100;
-const MIST_PARTICLES = 480;
-const TOTAL_PARTICLES = MAIN_PARTICLES + HALO_PARTICLES + MIST_PARTICLES;
+// Base counts at full (desktop) density. Mobile/tablet render a fraction of
+// these so the loop stays as airy as it looks on desktop instead of clumping.
+const BASE_MAIN = 2600;
+const BASE_HALO = 1100;
+const BASE_MIST = 480;
 
 const teal = new THREE.Color('#4db8cc');
 const deepTeal = new THREE.Color('#0a3a4d');
@@ -48,20 +49,20 @@ const vertexShader = `
     float s = aSeed * 6.28318530718;
     float tt = aPath * 6.28318530718;
 
-    // Gentle breathing scale; scroll nudges it a touch.
-    float breathe = 1.0 + sin(uTime * 0.3 + s * 0.1) * 0.06 + uScroll * 0.12;
+    // Gentle breathing scale; scroll pushes it harder for a snappy response.
+    float breathe = 1.0 + sin(uTime * 0.3 + s * 0.1) * 0.06 + uScroll * 0.56;
     vec3 p = position * breathe;
 
-    // Organic form mutation – slow traveling waves warp the loop a little,
+    // Organic form mutation — slow traveling waves warp the loop a little,
     // never enough to stop it reading as an infinity.
     p.x += sin(tt * 2.0 - uTime * 0.5 + s * 0.2) * 0.30;
     p.y += cos(tt * 3.0 + uTime * 0.35) * 0.24;
     p.z += sin(tt * 2.0 + uTime * 0.6) * 0.5 + cos(uTime * 0.4 + s) * 0.26;
 
-    // Atom-like dispersion – each particle drifts slightly off the curve and
+    // Atom-like dispersion — each particle drifts slightly off the curve and
     // back, staggered, so the figure shimmers like it is made of atoms.
     float pulse = 0.5 + 0.5 * sin(uTime * 0.55 + s * 1.7);
-    float drift = pulse * (0.45 + 0.5 * sin(uTime * 0.22 + aPath * 9.0)) + uScroll * 0.4;
+    float drift = pulse * (0.45 + 0.5 * sin(uTime * 0.22 + aPath * 9.0)) + uScroll * 4.5;
     p += aScatter * drift;
 
     vec4 mvPosition = modelViewMatrix * vec4(p, 1.0);
@@ -154,22 +155,27 @@ function writeParticle(
   data.paths[index] = path;
 }
 
-function createParticles(): ParticleData {
+function createParticles(density: number): ParticleData {
+  const MAIN = Math.round(BASE_MAIN * density);
+  const HALO = Math.round(BASE_HALO * density);
+  const MIST = Math.round(BASE_MIST * density);
+  const TOTAL = MAIN + HALO + MIST;
+
   const data: ParticleData = {
-    positions: new Float32Array(TOTAL_PARTICLES * 3),
-    scatter: new Float32Array(TOTAL_PARTICLES * 3),
-    colors: new Float32Array(TOTAL_PARTICLES * 3),
-    seeds: new Float32Array(TOTAL_PARTICLES),
-    sizes: new Float32Array(TOTAL_PARTICLES),
-    alphas: new Float32Array(TOTAL_PARTICLES),
-    paths: new Float32Array(TOTAL_PARTICLES),
+    positions: new Float32Array(TOTAL * 3),
+    scatter: new Float32Array(TOTAL * 3),
+    colors: new Float32Array(TOTAL * 3),
+    seeds: new Float32Array(TOTAL),
+    sizes: new Float32Array(TOTAL),
+    alphas: new Float32Array(TOTAL),
+    paths: new Float32Array(TOTAL),
   };
 
   const color = new THREE.Color();
 
-  // Main ribbon – the crisp infinity outline.
-  for (let i = 0; i < MAIN_PARTICLES; i += 1) {
-    const path = i / MAIN_PARTICLES;
+  // Main ribbon — the crisp infinity outline.
+  for (let i = 0; i < MAIN; i += 1) {
+    const path = i / MAIN;
     const seed = random(i + 1);
     const t = path * Math.PI * 2 + signedRandom(i + 101) * 0.018;
     const [baseX, baseY, baseZ] = infinityPoint(t);
@@ -196,9 +202,9 @@ function createParticles(): ParticleData {
     );
   }
 
-  // Halo – soft volume hugging the ribbon.
-  for (let i = 0; i < HALO_PARTICLES; i += 1) {
-    const index = MAIN_PARTICLES + i;
+  // Halo — soft volume hugging the ribbon.
+  for (let i = 0; i < HALO; i += 1) {
+    const index = MAIN + i;
     const path = random(i + 911);
     const seed = random(i + 1001);
     const t = path * Math.PI * 2;
@@ -225,9 +231,9 @@ function createParticles(): ParticleData {
     );
   }
 
-  // Mist – faint drifting sparkle that wanders a touch more.
-  for (let i = 0; i < MIST_PARTICLES; i += 1) {
-    const index = MAIN_PARTICLES + HALO_PARTICLES + i;
+  // Mist — faint drifting sparkle that wanders a touch more.
+  for (let i = 0; i < MIST; i += 1) {
+    const index = MAIN + HALO + i;
     const seed = random(i + 1881);
     const colorMix = random(i + 1991);
     const path = random(i + 2551);
@@ -262,28 +268,40 @@ export default function InfinityField({ reducedMotion = false, opacity = 1, scro
   const currentOpacity = useRef(opacity);
   const currentScroll = useRef(scroll);
   const scrollRef = useRef(scroll);
-  const particles = useMemo(() => createParticles(), []);
   const { gl, viewport } = useThree();
 
+  // Mirror the latest scroll into a ref (read inside useFrame) without
+  // mutating the ref during render.
   useEffect(() => {
     scrollRef.current = scroll;
   }, [scroll]);
 
-  // Responsive sizing/placement across phone / tablet / desktop tiers.
+  // Responsive sizing / placement / density across phone, tablet, desktop.
   const w = viewport.width;
+  const tier = w < 8 ? 'phone' : w < 16 ? 'tablet' : 'desktop';
+
   let scale: number;
   let verticalOffset: number;
-  if (w < 8) {
-    scale = THREE.MathUtils.clamp(w / 15.5, 0.4, 0.52);
-    verticalOffset = -0.35;
-  } else if (w < 16) {
+  let density: number;
+  if (tier === 'phone') {
+    // Open the loop up (bigger scale) and thin it out (fewer particles) so the
+    // mobile field reads like the airy desktop one instead of a dense clump.
+    scale = THREE.MathUtils.clamp(w / 13, 0.5, 0.64);
+    verticalOffset = -0.3;
+    density = 0.42;
+  } else if (tier === 'tablet') {
     scale = THREE.MathUtils.clamp(w / 16.5, 0.55, 0.72);
     verticalOffset = 0.25;
+    density = 0.68;
   } else {
     scale = THREE.MathUtils.clamp(w / 22, 0.82, 1.25);
     verticalOffset = 0.35;
+    density = 1;
   }
 
+  // Regenerate only when the density tier actually changes.
+  const particles = useMemo(() => createParticles(density), [density]);
+
   const uniforms = useMemo(
     () => ({
       uTime: { value: 0 },
@@ -291,7 +309,7 @@ export default function InfinityField({ reducedMotion = false, opacity = 1, scro
       uOpacity: { value: opacity },
       uScroll: { value: scroll },
     }),
-    [gl, opacity, scroll],
+    [gl],
   );
 
   useFrame((state, delta) => {
@@ -305,19 +323,21 @@ export default function InfinityField({ reducedMotion = false, opacity = 1, scro
       materialRef.current.uniforms.uTime.value = t;
       currentOpacity.current = THREE.MathUtils.damp(currentOpacity.current, opacity, 6, delta);
       materialRef.current.uniforms.uOpacity.value = currentOpacity.current;
-      currentScroll.current = THREE.MathUtils.damp(currentScroll.current, scrollRef.current, 4, delta);
+      // Snappy tracking — the scatter reacts to scroll almost immediately.
+      currentScroll.current = THREE.MathUtils.damp(currentScroll.current, scrollRef.current, 14, delta);
       materialRef.current.uniforms.uScroll.value = currentScroll.current;
     }
 
     if (pointsRef.current) {
-      pointsRef.current.rotation.z = Math.sin(t * 0.045) * 0.05;
-      pointsRef.current.rotation.y = Math.sin(t * 0.06) * 0.1;
+      const sc = currentScroll.current;
+      pointsRef.current.rotation.z = Math.sin(t * 0.045) * 0.05 + sc * 0.24;
+      pointsRef.current.rotation.y = Math.sin(t * 0.06) * 0.1 + sc * 0.44;
     }
   });
 
   return (
     <points ref={pointsRef} frustumCulled={false} scale={scale} position={[0, verticalOffset, 0]}>
-      <bufferGeometry>
+      <bufferGeometry key={tier}>
         <bufferAttribute attach="attributes-position" args={[particles.positions, 3]} />
         <bufferAttribute attach="attributes-aScatter" args={[particles.scatter, 3]} />
         <bufferAttribute attach="attributes-color" args={[particles.colors, 3]} />
diff --git a/src/components/three/Scene.tsx b/src/components/three/Scene.tsx
index 7e4157f..5aa6323 100644
--- a/src/components/three/Scene.tsx
+++ b/src/components/three/Scene.tsx
@@ -62,7 +62,9 @@ export default function Scene() {
   const isPhone = useMediaQuery('(max-width: 600px)');
   const isTablet = useMediaQuery('(max-width: 1024px)');
   const scroll = useScrollMorph();
-  const particleOpacity = isPhone ? 0.55 : isTablet ? 0.82 : 1;
+  // Fade the field down to 20% of its base opacity as the page scrolls.
+  const baseOpacity = isPhone ? 0.55 : isTablet ? 0.82 : 1;
+  const particleOpacity = baseOpacity * (1 - scroll * 0.8);
 
   const [webglReady] = useState(supportsWebGL);
 
diff --git a/src/components/ui/Button.scss b/src/components/ui/Button.scss
index 3c39c5b..22ca802 100644
--- a/src/components/ui/Button.scss
+++ b/src/components/ui/Button.scss
@@ -6,7 +6,7 @@
   align-items: center;
   justify-content: center;
   gap: 0.6rem;
-  // Mono uppercase – the engineering-console voice
+  // Mono uppercase — the engineering-console voice
   font-family: $font-mono;
   font-weight: 500;
   font-size: $text-xs;
@@ -31,7 +31,7 @@
     outline-offset: 3px;
   }
 
-  // Primary – solid gold, deep-teal text. Flat, no glow.
+  // Primary — solid gold, deep-teal text. Flat, no glow.
   &--primary {
     background: $color-accent;
     color: $color-on-accent;
@@ -41,7 +41,7 @@
     }
   }
 
-  // Secondary – hairline outline, cream text, gold edge on hover.
+  // Secondary — hairline outline, cream text, gold edge on hover.
   &--secondary {
     background: transparent;
     color: $color-text;
@@ -53,7 +53,7 @@
     }
   }
 
-  // Ghost / link – quiet, arrow affordance.
+  // Ghost / link — quiet, arrow affordance.
   &--ghost {
     background: transparent;
     color: $color-text-2;
diff --git a/src/components/ui/Section.scss b/src/components/ui/Section.scss
index 988a912..088a20a 100644
--- a/src/components/ui/Section.scss
+++ b/src/components/ui/Section.scss
@@ -6,9 +6,12 @@
   z-index: $z-content;
   @include section-padding;
   @include scroll-offset;
-  @include reveal;
+  // NOTE: no scroll-reveal here. A scroll-timeline animation (opacity) on the
+  // section promotes it to a composited layer = a backdrop root, which kills
+  // the glass cards' backdrop-filter (nothing left to blur). Keep sections
+  // un-layered so the frosted blur can sample the WebGL field behind them.
 
-  // Transparent – the background particle field shows through at full strength.
+  // Transparent — the background particle field shows through at full strength.
   background: transparent;
 
   &--alt,
@@ -23,47 +26,19 @@
   // --- Index / blueprint column ----------------------------------
   &__index {
     display: flex;
-    align-items: center;
-    gap: 0.75rem;
+    align-items: baseline;
+    gap: 0.6rem;
     margin-bottom: $space-md;
     padding-bottom: $space-sm;
     border-bottom: 1px solid $color-border;
   }
 
-  &__sigil {
-    flex-shrink: 0;
-    width: 2.25rem;
-    height: 2.25rem;
-    color: $color-accent;
-    filter: drop-shadow(0 0 10px rgba(241, 184, 0, 0.10));
-  }
-
-  &__sigil-ring,
-  &__sigil-ray,
-  &__sigil-glyph {
-    fill: none;
-    stroke: currentColor;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-  }
-
-  &__sigil-ring {
-    stroke-width: 1.2;
-    opacity: 0.62;
-  }
-
-  &__sigil-ray {
-    stroke-width: 1;
-    opacity: 0.32;
-  }
-
-  &__sigil-glyph {
-    stroke-width: 2;
-    opacity: 0.9;
-  }
-
   &__index-label {
     @include mono-label;
+    // Inherit the old index-number look: gold accent, mono — bigger and bolder.
+    color: $color-accent;
+    font-size: $text-lg;
+    font-weight: 700;
     position: relative;
     padding-left: 1.4rem;
 
@@ -89,7 +64,7 @@
 
   &--indexed &__index {
     @include desktop-up {
-      grid-column: 1 / span 1;
+      grid-column: 1 / span 2;
       flex-direction: column;
       align-items: flex-start;
       gap: 0.5rem;
@@ -99,10 +74,6 @@
       padding-bottom: 0;
       border-bottom: 0;
 
-      .section__sigil {
-        width: 3rem;
-        height: 3rem;
-      }
       .section__index-label {
         padding-left: 0;
         &::before { display: none; }
@@ -112,7 +83,9 @@
 
   &--indexed &__body {
     @include desktop-up {
-      grid-column: 2 / -1;
+      // Wider content: index keeps cols 1–2, body starts at col 3
+      // (narrower gutter → content spans more of the grid).
+      grid-column: 3 / -1;
     }
   }
 }
diff --git a/src/components/ui/Section.tsx b/src/components/ui/Section.tsx
index 47e9825..b962fec 100644
--- a/src/components/ui/Section.tsx
+++ b/src/components/ui/Section.tsx
@@ -6,51 +6,12 @@ interface SectionProps {
   id?: string;
   className?: string;
   variant?: 'default' | 'alt' | 'dark';
+  /** Two-digit section index, e.g. "01" — shown in the left blueprint column. */
   index?: string;
+  /** Short mono label, e.g. "ABOUT" — shown under the index. */
   label?: string;
 }
 
-const morphemes: Record<string, React.ReactNode> = {
-  axis: <path d="M32 16v32" />,
-  core: <circle cx="32" cy="32" r="5" />,
-  flow: <path d="M20 32c5-8 19-8 24 0M20 32c5 8 19 8 24 0" />,
-  frame: <path d="M20 20h24v24H20z" />,
-  gate: <path d="M18 24h28v18H18zM18 24l14 12 14-12" />,
-  link: <path d="M18 32h28M24 24l16 16M40 24 24 40" />,
-  people: <path d="M22 40c4-8 16-8 20 0M26 26a6 6 0 0 0 12 0" />,
-  stack: <path d="M20 24h24l-12 8-12-8Zm0 16h24l-12-8-12 8Z" />,
-};
-
-const sectionSigils: Record<string, string[]> = {
-  about: ['core', 'axis', 'link'],
-  team: ['core', 'people', 'flow'],
-  services: ['core', 'stack', 'frame'],
-  contact: ['core', 'gate', 'axis'],
-  default: ['core', 'frame'],
-};
-
-function SectionSigil({ type }: { type: string }) {
-  const parts = sectionSigils[type.toLowerCase()] ?? sectionSigils.default;
-
-  return (
-    <svg
-      className="section__sigil"
-      viewBox="0 0 64 64"
-      aria-hidden="true"
-      focusable="false"
-    >
-      <circle className="section__sigil-ring" cx="32" cy="32" r="25" />
-      <path className="section__sigil-ray" d="M32 5v9M32 50v9M5 32h9M50 32h9" />
-      <path className="section__sigil-ray" d="M13.6 13.6l6.4 6.4M44 44l6.4 6.4M50.4 13.6 44 20M20 44l-6.4 6.4" />
-      <g className="section__sigil-glyph">
-        {parts.map((part) => (
-          <React.Fragment key={part}>{morphemes[part]}</React.Fragment>
-        ))}
-      </g>
-    </svg>
-  );
-}
-
 export const Section = React.memo(function Section({
   children,
   id,
@@ -74,7 +35,6 @@ export const Section = React.memo(function Section({
       <div className="section__container">
         {indexed && (
           <div className="section__index" aria-hidden="true">
-            <SectionSigil type={id ?? label ?? 'default'} />
             {label && <span className="section__index-label">{label}</span>}
           </div>
         )}
diff --git a/src/components/ui/SectionHeader.scss b/src/components/ui/SectionHeader.scss
index ff2c7c4..8e99c89 100644
--- a/src/components/ui/SectionHeader.scss
+++ b/src/components/ui/SectionHeader.scss
@@ -9,7 +9,7 @@
     font-size: clamp(2.25rem, 5vw, 3.5rem);
     line-height: $leading-tight;
     letter-spacing: $tracking-tight;
-    max-width: 18ch;
+    text-wrap: balance;
   }
 
   &__lead {
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
new file mode 100644
index 0000000..c3d9e2e
--- /dev/null
+++ b/src/styles/_fonts.scss
@@ -0,0 +1,132 @@
+// Self-hosted brandbook fonts. Generated — see docs/brandbook.md §2.
+// Tilt Warp (display) · Hanken Grotesk (body) · JetBrains Mono (mono).
+// Subsets: latin + latin-ext. woff2 files live in /public/fonts.
+
+@font-face {
+  font-family: 'Hanken Grotesk';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/hanken-grotesk-400-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Hanken Grotesk';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/hanken-grotesk-400-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Hanken Grotesk';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('/fonts/hanken-grotesk-500-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Hanken Grotesk';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('/fonts/hanken-grotesk-500-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Hanken Grotesk';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('/fonts/hanken-grotesk-600-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Hanken Grotesk';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('/fonts/hanken-grotesk-600-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Hanken Grotesk';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('/fonts/hanken-grotesk-700-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Hanken Grotesk';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('/fonts/hanken-grotesk-700-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/jetbrains-mono-400-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('/fonts/jetbrains-mono-500-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('/fonts/jetbrains-mono-600-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('/fonts/jetbrains-mono-600-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Tilt Warp';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/tilt-warp-400-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Tilt Warp';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/tilt-warp-400-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 6397090..a9eec4b 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -1,7 +1,7 @@
 @use 'variables' as *;
 
 // ============================================
-// Ever Guild – SCSS Mixins
+// Ever Guild — SCSS Mixins
 // ============================================
 
 @mixin mobile-up  { @media (min-width: #{$bp-mobile})  { @content; } }
@@ -19,7 +19,7 @@
   @include desktop-up { padding-inline: 4rem; }
 }
 
-// Unified vertical rhythm – fluid, kills uneven gaps between sections
+// Unified vertical rhythm — fluid, kills uneven gaps between sections
 @mixin section-padding {
   padding-block: clamp(4rem, 8vw, 8.5rem);
 }
@@ -32,7 +32,7 @@
   row-gap: clamp(2rem, 4vw, 3.5rem);
 }
 
-// Blueprint hairlines – faint vertical structure behind content.
+// Blueprint hairlines — faint vertical structure behind content.
 // Subtle by design (uses translucent border token); reads as engineering grid.
 @mixin blueprint-lines($step: 16.666%, $color: $color-border) {
   background-image: repeating-linear-gradient(
@@ -60,7 +60,7 @@
   color: $color-text-3;
 }
 
-// Display type (headlines) – Tilt Warp
+// Display type (headlines) — Tilt Warp
 @mixin display {
   font-family: $font-display;
   font-weight: 400;
@@ -76,10 +76,10 @@
   transition: border-color $transition-base, background-color $transition-base;
 }
 
-// Liquid glass – matte murky-emerald frosted panel.
+// Liquid glass — matte murky-emerald frosted panel.
 // Blurs the particle field behind it for depth. Used for ALL content blocks.
 // Top rim-light + soft drop give the "liquid glass" read.
-@mixin glass($blur: 22px) {
+@mixin glass($blur: 43px) {
   background: $color-glass;
   backdrop-filter: blur($blur) saturate(150%) brightness(1.06);
   -webkit-backdrop-filter: blur($blur) saturate(150%) brightness(1.06);
@@ -94,8 +94,8 @@
     transform $transition-base;
 }
 
-// Small frosted glass chip (tags, pills) – lighter blur, same matte emerald.
-@mixin glass-chip($blur: 12px) {
+// Small frosted glass chip (tags, pills) — lighter blur, same matte emerald.
+@mixin glass-chip($blur: 22px) {
   background: $color-glass;
   backdrop-filter: blur($blur) saturate(150%) brightness(1.06);
   -webkit-backdrop-filter: blur($blur) saturate(150%) brightness(1.06);
@@ -146,9 +146,12 @@
 
 // Scroll-reveal (2026 scroll-driven animations, graceful fallback)
 @mixin reveal {
+  // NOTE: opacity-only — no transform. A transform on the section (an
+  // ancestor of the glass cards) would establish a containing block and
+  // permanently break the cards' backdrop-filter (nothing left to blur).
   @supports (animation-timeline: view()) {
     @media (prefers-reduced-motion: no-preference) {
-      transform: translateY(22px);
+      opacity: 0;
       animation: reveal-up linear both;
       animation-timeline: view();
       animation-range: entry 0% cover 26%;
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index 4aa45fb..f4192f4 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -1,3 +1,4 @@
+@use 'fonts';
 @use 'variables' as *;
 
 *,
@@ -79,7 +80,7 @@ button {
   border-radius: 1px;
 }
 
-// Scrollbar – thin, technical
+// Scrollbar — thin, technical
 ::-webkit-scrollbar {
   width: 10px;
   height: 10px;
@@ -97,8 +98,8 @@ button {
 }
 
 @keyframes reveal-up {
-  from { transform: translateY(22px); }
-  to   { transform: translateY(0); }
+  from { opacity: 0; }
+  to   { opacity: 1; }
 }
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 2bd7ab3..eb779c8 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,14 +1,14 @@
 // ============================================
-// Ever Guild – Design Tokens
+// Ever Guild — Design Tokens
 // Brand palette: deep teal base, gold signal,
 // cream highlight, warm-brown grounding.
 // Flat, technological, no gradients/glows.
 // Source of truth: docs/brandbook.md (Colors.svg).
-// Use ONLY these tokens – no ad-hoc hex.
+// Use ONLY these tokens — no ad-hoc hex.
 // ============================================
 
 // --- Surfaces (deep teal scale) ---------------
-$color-bg:           #001D25; // page – deepest
+$color-bg:           #001D25; // page — deepest
 $color-bg-alt:       #002028; // alternating band
 $color-surface:      #002835; // flat cards (brand teal)
 $color-surface-2:    #00323F; // hover / elevated
@@ -25,21 +25,21 @@ $color-border-3:     rgba(241, 184, 0, 0.32); // gold-tinted accent edge
 
 // --- Text -------------------------------------
 $color-text:         #FFE79C; // light cream (matches footer text)
-$color-text-2:       #9FB1AF; // secondary teal-gray
-$color-text-3:       #889995; // muted / mono labels
+$color-text-2:       #C7D4D1; // secondary teal-gray — lightened for readability (AA+)
+$color-text-3:       #AAB9B5; // muted / mono labels — lightened for readability
 $color-text-4:       #475957; // faintest
 
 // --- Accent (brand gold + cream highlight) ----
-$color-accent:       #F1B800; // gold – primary signal
-$color-accent-2:     #FFE79C; // cream – bright / hover glint
+$color-accent:       #F1B800; // gold — primary signal
+$color-accent-2:     #FFE79C; // cream — bright / hover glint
 $color-gold-2:       #F0B800; // brandbook intermediate (gradient start)
 $color-cream-2:      #FFE89E; // brandbook intermediate (cream halo)
 $color-accent-soft:  rgba(241, 184, 0, 0.10);
 $color-accent-line:  rgba(241, 184, 0, 0.34);
 
 // --- Liquid glass (frosted murky-emerald panels over the field) ---
-$color-glass:        rgba(6, 50, 44, 0.56);   // dark emerald, matte-frosted
-$color-glass-2:      rgba(10, 63, 55, 0.68);  // hover – denser
+$color-glass:        rgba(6, 50, 44, 0.46);   // dark emerald, matte-frosted
+$color-glass-2:      rgba(10, 63, 55, 0.60);  // hover — denser
 $color-glass-border: rgba(186, 240, 212, 0.16);
 $color-glass-edge:   rgba(186, 240, 212, 0.30); // hover edge highlight
 $color-glass-sheen:  rgba(255, 255, 255, 0.08); // top rim light
@@ -58,9 +58,12 @@ $color-text-inverse:      $color-on-accent;
 $color-border-strong:     $color-border-2;
 
 // --- Typography -------------------------------
-$font-display: system-ui, -apple-system, 'Segoe UI', sans-serif;
-$font-body:    system-ui, -apple-system, 'Segoe UI', sans-serif;
-$font-mono:    ui-monospace, 'SFMono-Regular', monospace;
+// Tilt Warp: characterful display — headings only.
+// Hanken Grotesk: warm, readable body & UI.
+// JetBrains Mono: small labels / tags.
+$font-display: 'Tilt Warp', system-ui, -apple-system, 'Segoe UI', sans-serif;
+$font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
+$font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
 
 $text-2xs:  0.6875rem; // 11
 $text-xs:   0.75rem;   // 12
@@ -114,7 +117,7 @@ $radius-xl:   26px;
 $radius-full: 9999px;
 
 // --- Layout -----------------------------------
-$container-max: 1320px;
+$container-max: 1450px;
 $gutter:        2rem;
 
 // --- Z-index ----------------------------------