diff --git a/web/components/brand-mark.tsx b/web/components/brand-mark.tsx
new file mode 100644
index 0000000..e46fba6
--- /dev/null
+++ b/web/components/brand-mark.tsx
@@ -0,0 +1,57 @@
+/**
+ * BrandMark — The Disclosure Bureau wordmark + mark.
+ *
+ * Small inline SVG (three offset gold bars suggesting a redaction edge / a
+ * classification stamp) paired with the serif wordmark and a tiny
+ * monospace "CLASSIFIED · PUBLIC RECORD" microline beneath. Used in
+ * SiteHeader on every page and inside the mobile drawer header. Keeps the
+ * brand presence consistent without depending on an external asset.
+ *
+ * Two sizes: `default` (header) and `compact` (mobile drawer).
+ */
+interface BrandMarkProps {
+  size?: "default" | "compact";
+  className?: string;
+}
+
+export function BrandMark({ size = "default", className = "" }: BrandMarkProps) {
+  const isCompact = size === "compact";
+  return (
+    <span className={`inline-flex items-center gap-2.5 group ${className}`}>
+      <span
+        aria-hidden="true"
+        className="inline-flex items-end gap-[2px]"
+        style={{ height: isCompact ? "20px" : "24px" }}
+      >
+        <span
+          className="block w-[3px] rounded-sm bg-[#e0c080] transition-transform group-hover:translate-y-[-1px]"
+          style={{ height: "100%" }}
+        />
+        <span
+          className="block w-[3px] rounded-sm bg-[#e0c080]/70 transition-transform group-hover:translate-y-[-1px]"
+          style={{ height: "70%" }}
+        />
+        <span
+          className="block w-[3px] rounded-sm bg-[#e0c080]/40 transition-transform group-hover:translate-y-[-1px]"
+          style={{ height: "45%" }}
+        />
+      </span>
+      <span className="flex flex-col leading-none">
+        <span
+          className={
+            isCompact
+              ? "font-display font-semibold text-[16px] text-[#e7ecf3] group-hover:text-[#e0c080] transition-colors"
+              : "font-display font-semibold text-[19px] md:text-[20px] text-[#e7ecf3] group-hover:text-[#e0c080] transition-colors"
+          }
+        >
+          The Disclosure Bureau
+        </span>
+        {!isCompact && (
+          <span className="hidden md:inline mt-1 font-mono text-[9px] uppercase tracking-[0.22em] text-[#5a6678]">
+            Classified · public record
+          </span>
+        )}
+      </span>
+    </span>
+  );
+}
diff --git a/web/components/mobile-nav.tsx b/web/components/mobile-nav.tsx
index bc573ae..692ef06 100644
--- a/web/components/mobile-nav.tsx
+++ b/web/components/mobile-nav.tsx
@@ -22,6 +22,7 @@ import { usePathname } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 import { Menu, X } from "lucide-react";
 import { AuthBar } from "./auth-bar";
+import { BrandMark } from "./brand-mark";
 import { LocaleToggleClient } from "./locale-toggle-client";
 
 interface NavItem {
@@ -94,10 +95,7 @@ export function MobileNav({
           {/* Panel */}
           <div className="absolute top-0 right-0 h-full w-[85vw] max-w-sm bg-[#0d1220] border-l border-[rgba(224,192,128,0.20)] shadow-2xl flex flex-col">
             <div className="flex items-center justify-between px-4 py-4 border-b border-[rgba(224,192,128,0.15)]">
-              <span className="font-display text-lg text-[#e7ecf3]">
-                <span className="text-[#e0c080] mr-1" aria-hidden="true">▍</span>
-                The Disclosure Bureau
-              </span>
+              <BrandMark size="compact" />
               <button
                 ref={closeBtnRef}
                 type="button"
diff --git a/web/components/site-header.tsx b/web/components/site-header.tsx
index 19cb235..a066d32 100644
--- a/web/components/site-header.tsx
+++ b/web/components/site-header.tsx
@@ -8,6 +8,7 @@
  */
 import Link from "next/link";
 import { AuthBar } from "./auth-bar";
+import { BrandMark } from "./brand-mark";
 import { LocaleToggle } from "./locale-toggle";
 import { MobileNav } from "./mobile-nav";
 import { NavLink } from "./nav-link";
@@ -26,11 +27,8 @@ export function SiteHeader({ locale }: { locale: "pt-br" | "en" }) {
   return (
     <header className="border-b border-[rgba(224,192,128,0.15)]">
       <div className="mx-auto max-w-7xl px-4 md:px-8 py-4 flex items-center justify-between gap-4">
-        <Link href="/" className="flex items-center gap-2 group" aria-label="The Disclosure Bureau — home">
-          <span className="text-[#e0c080] text-lg" aria-hidden="true">▍</span>
-          <span className="font-display text-xl text-[#e7ecf3] group-hover:text-[#e0c080] transition-colors">
-            The Disclosure Bureau
-          </span>
+        <Link href="/" aria-label="The Disclosure Bureau — home">
+          <BrandMark />
         </Link>
 
         {/* Desktop nav — hidden below md, shown md+. */}