diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 692a06f..0d3e9d5 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -2,6 +2,7 @@ import React from "react";
import Link from "next/link";
import AppImage from "@/components/ui/AppImage";
import AnimatedLogo from "@/components/AnimatedLogo";
+import RmpMark from "@/components/RmpMark";
import {
LinkedInIcon,
InstagramIcon,
@@ -137,14 +138,17 @@ export default function Footer() {
diff --git a/src/components/RmpMark.tsx b/src/components/RmpMark.tsx
new file mode 100644
index 0000000..d2ab710
--- /dev/null
+++ b/src/components/RmpMark.tsx
@@ -0,0 +1,129 @@
+import React from 'react';
+
+/**
+ * RmpMark — compact static "Relevant Media Properties" lockup placed
+ * inline next to any RMP text mention on a property site.
+ *
+ * Variants:
+ * mode="light" → for placement on dark backgrounds (BB, BE, SMB, TCG footers)
+ * mode="dark" → for placement on light backgrounds (AV footer, white pages)
+ *
+ * Mirrors the geometry of the canonical RelevantMediaPropertiesLogo on the
+ * RMP site but ships a fully static inline SVG (no JS, no animation) so it
+ * works inside React Server Components and email-template renders.
+ *
+ * Link target is always the public RMP homepage.
+ */
+export type RmpMarkMode = 'light' | 'dark';
+
+interface RmpMarkProps {
+ /** 'light' = light wordmark on dark bg; 'dark' = dark wordmark on light bg. */
+ mode?: RmpMarkMode;
+ /** Vertical size in px. Width is auto via SVG aspect ratio. Default 22. */
+ height?: number;
+ /** Extra wrapper classes. Wrapper is inline-flex by default. */
+ className?: string;
+ /** Override the link href — defaults to the RMP homepage. */
+ href?: string;
+ /** Hide the link wrapper (renders just the SVG). */
+ asImage?: boolean;
+}
+
+export default function RmpMark({
+ mode = 'light',
+ height = 22,
+ className = '',
+ href = 'https://relevantmediaproperties.com',
+ asImage = false,
+}: RmpMarkProps) {
+ const inkColor = mode === 'light' ? '#F4F6FF' : '#0A0A0A';
+ const accent = '#D60701';
+
+ const VB_W = 220;
+ const VB_H = 44;
+ const CELL = 9.5;
+ const GAP = 1.5;
+ const TOTAL_GRID = 3 * CELL + 2 * GAP;
+ const GRID_Y = (VB_H - TOTAL_GRID) / 2;
+ const WM_X = TOTAL_GRID + 10;
+ const ACCENT_SET = new Set(['0-2', '2-0']);
+
+ const cells: { id: string; x: number; y: number; isAccent: boolean }[] = [];
+ for (let r = 0; r < 3; r++) {
+ for (let c = 0; c < 3; c++) {
+ const id = `${r}-${c}`;
+ cells.push({
+ id,
+ x: c * (CELL + GAP),
+ y: r * (CELL + GAP),
+ isAccent: ACCENT_SET.has(id),
+ });
+ }
+ }
+
+ const svg = (
+
+ );
+
+ if (asImage) return svg;
+ return (
+
+ {svg}
+
+ );
+}