diff --git a/THEME_AND_BRANDING.md b/THEME_AND_BRANDING.md
index 379c65d..e8c8707 100644
--- a/THEME_AND_BRANDING.md
+++ b/THEME_AND_BRANDING.md
@@ -295,10 +295,27 @@ When in doubt, add more space rather than less.
 
 ### Allowed Animations
 * Hover states: Subtle opacity shift (1.0 → 0.85) or slight color change (200ms ease)
+* Pressed states: Brief scale-down (~2%) on activation, ~150ms — tactile
+  acknowledgement, never playful
 * Loading states: Simple fade-in (300ms ease)
 * Page transitions: None (or instant)
 * Scroll-triggered reveals: Simple fade-in (600ms ease)
 
+### Interactive feedback
+
+* Every interactive control (buttons, links styled as buttons, clickable
+  rows/cards, filter chips, disclosure controls) must show a distinct
+  hover, focus-visible, and pressed state so a click or tap never feels
+  unacknowledged.
+* Use the shared primitives rather than bespoke per-component motion:
+  `buttonVariants` in `components/ui/button.tsx` for `Button` instances and
+  `pressableClasses` in `lib/utils.ts` for other clickable surfaces.
+* The pressed state is a small scale-down (scale 0.98, ~150ms) — no bounce,
+  spring, ripples, or large transforms, and no layout shift.
+* Press transforms are gated by `motion-safe:` so `prefers-reduced-motion`
+  sessions keep the instant color/border acknowledgement without movement.
+* Text-style links use the opacity hover only — they do not scale.
+
 ### Forbidden Animations
 * Parallax scrolling
 * Animated SVG decorations
diff --git a/components/admin-trade-workspace.tsx b/components/admin-trade-workspace.tsx
index 2c41ab6..155a35c 100644
--- a/components/admin-trade-workspace.tsx
+++ b/components/admin-trade-workspace.tsx
@@ -24,6 +24,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { formatAdminDate, formatAdminDateTime } from "@/lib/admin-format";
+import { cn, pressableClasses } from "@/lib/utils";
 import type { AdminPanelUser } from "@/components/admin-access";
 import {
   normalizePhoneNumber,
@@ -916,11 +917,13 @@ export function AdminTradeWorkspace({ user }: { user: AdminPanelUser }) {
                     type="button"
                     aria-current={selectedId === lead.id}
                     onClick={() => void openLead(lead.id)}
-                    className={`w-full rounded-md border px-2.5 py-2 text-left text-sm ${
+                    className={cn(
+                      "w-full rounded-md border px-2.5 py-2 text-left text-sm",
                       selectedId === lead.id
                         ? "border-ocean/60 bg-ocean/[0.07]"
-                        : "border-transparent hover:border-stone hover:bg-stone/25"
-                    }`}
+                        : "border-transparent hover:border-stone hover:bg-stone/25",
+                      pressableClasses
+                    )}
                   >
                     <div className="flex items-center justify-between gap-2">
                       <span className="min-w-0 truncate font-medium">
diff --git a/components/admin-workspace.tsx b/components/admin-workspace.tsx
index 8472fda..ba41b3e 100644
--- a/components/admin-workspace.tsx
+++ b/components/admin-workspace.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import type { Dispatch, SetStateAction } from "react";
+import { cn, pressableClasses } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
@@ -236,9 +237,13 @@ export function AdminWorkspace({
                       type="button"
                       aria-current={selectedBeerSlug === beer.slug}
                       onClick={() => onSelectBeer(beer.slug)}
-                      className={`w-full rounded-md px-2 py-1.5 text-left text-sm ${
-                        selectedBeerSlug === beer.slug ? "bg-stone/40" : "hover:bg-stone/20"
-                      }`}
+                      className={cn(
+                        "w-full rounded-md px-2 py-1.5 text-left text-sm",
+                        selectedBeerSlug === beer.slug
+                          ? "bg-stone/40"
+                          : "hover:bg-stone/20",
+                        pressableClasses
+                      )}
                     >
                       {beer.name}
                     </button>
@@ -352,9 +357,13 @@ export function AdminWorkspace({
                       type="button"
                       aria-current={selectedVenueSlug === venue.slug}
                       onClick={() => onSelectVenue(venue.slug)}
-                      className={`w-full rounded-md px-2 py-1.5 text-left text-sm ${
-                        selectedVenueSlug === venue.slug ? "bg-stone/40" : "hover:bg-stone/20"
-                      }`}
+                      className={cn(
+                        "w-full rounded-md px-2 py-1.5 text-left text-sm",
+                        selectedVenueSlug === venue.slug
+                          ? "bg-stone/40"
+                          : "hover:bg-stone/20",
+                        pressableClasses
+                      )}
                     >
                       {venue.name}
                     </button>
@@ -414,7 +423,7 @@ export function AdminWorkspace({
 
               <div className="mt-4 grid gap-4 sm:grid-cols-3">
                 <details className="text-sm">
-                  <summary className="cursor-pointer rounded-md border border-ink/50 px-3 py-2 font-medium">
+                  <summary className={cn("cursor-pointer rounded-md border border-ink/50 px-3 py-2 font-medium hover:bg-stone/20", pressableClasses)}>
                     Carries Beers
                   </summary>
                   <p className="mt-2 text-xs text-muted-foreground">
@@ -441,7 +450,7 @@ export function AdminWorkspace({
                 </details>
 
                 <details className="text-sm">
-                  <summary className="cursor-pointer rounded-md border border-ink/50 px-3 py-2 font-medium">
+                  <summary className={cn("cursor-pointer rounded-md border border-ink/50 px-3 py-2 font-medium hover:bg-stone/20", pressableClasses)}>
                     On Tap
                   </summary>
                   <p className="mt-2 text-xs text-muted-foreground">
@@ -468,7 +477,7 @@ export function AdminWorkspace({
                 </details>
 
                 <details className="text-sm">
-                  <summary className="cursor-pointer rounded-md border border-ink/50 px-3 py-2 font-medium">
+                  <summary className={cn("cursor-pointer rounded-md border border-ink/50 px-3 py-2 font-medium hover:bg-stone/20", pressableClasses)}>
                     In Can
                   </summary>
                   <p className="mt-2 text-xs text-muted-foreground">
diff --git a/components/beer-card.tsx b/components/beer-card.tsx
index b0d8f73..58889c9 100644
--- a/components/beer-card.tsx
+++ b/components/beer-card.tsx
@@ -1,7 +1,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import { Badge } from "@/components/ui/badge";
-import { beerImageUrl } from "@/lib/utils";
+import { beerImageUrl, cn, pressableClasses } from "@/lib/utils";
 import type { Beer } from "@/lib/types";
 
 interface BeerCardProps {
@@ -15,7 +15,10 @@ export function BeerCard({ beer, imageUrl, priority }: BeerCardProps) {
   return (
     <Link
       href={`/beers/${beer.slug}`}
-      className="group block rounded-lg border border-stone bg-paper transition-opacity duration-200 hover:opacity-85"
+      className={cn(
+        "group block rounded-lg border border-stone bg-paper hover:opacity-85",
+        pressableClasses
+      )}
     >
       <div className="relative aspect-4/5 w-full overflow-hidden rounded-t-lg">
         <Image
diff --git a/components/beer-carousel.tsx b/components/beer-carousel.tsx
index 3d6d9de..7657839 100644
--- a/components/beer-carousel.tsx
+++ b/components/beer-carousel.tsx
@@ -3,6 +3,7 @@
 import useEmblaCarousel from "embla-carousel-react";
 import { useCallback } from "react";
 import { BeerCard } from "@/components/beer-card";
+import { cn, pressableClasses } from "@/lib/utils";
 import type { Beer } from "@/lib/types";
 
 interface BeerCarouselProps {
@@ -60,7 +61,10 @@ export function BeerCarousel({ beers, imageUrls }: BeerCarouselProps) {
       <button
         onClick={scrollPrev}
         aria-label="Previous beer"
-        className="absolute -left-4 top-1/3 z-10 flex h-11 w-11 min-h-[44px] min-w-[44px] items-center justify-center rounded-full border border-stone bg-paper shadow-sm transition-opacity hover:opacity-75 focus-visible:ring-2 focus-visible:ring-ocean/50"
+        className={cn(
+          "absolute -left-4 top-1/3 z-10 flex h-11 w-11 min-h-[44px] min-w-[44px] items-center justify-center rounded-full border border-stone bg-paper shadow-sm hover:opacity-75 focus-visible:ring-2 focus-visible:ring-ocean/50",
+          pressableClasses
+        )}
       >
         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
           <path d="M15 18l-6-6 6-6" />
@@ -69,7 +73,10 @@ export function BeerCarousel({ beers, imageUrls }: BeerCarouselProps) {
       <button
         onClick={scrollNext}
         aria-label="Next beer"
-        className="absolute -right-4 top-1/3 z-10 flex h-11 w-11 min-h-[44px] min-w-[44px] items-center justify-center rounded-full border border-stone bg-paper shadow-sm transition-opacity hover:opacity-75 focus-visible:ring-2 focus-visible:ring-ocean/50"
+        className={cn(
+          "absolute -right-4 top-1/3 z-10 flex h-11 w-11 min-h-[44px] min-w-[44px] items-center justify-center rounded-full border border-stone bg-paper shadow-sm hover:opacity-75 focus-visible:ring-2 focus-visible:ring-ocean/50",
+          pressableClasses
+        )}
       >
         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
           <path d="M9 18l6-6-6-6" />
diff --git a/components/beers-filter-grid.tsx b/components/beers-filter-grid.tsx
index dbb2927..4989772 100644
--- a/components/beers-filter-grid.tsx
+++ b/components/beers-filter-grid.tsx
@@ -2,6 +2,7 @@
 
 import { useMemo, useState } from "react";
 import { Badge } from "@/components/ui/badge";
+import { cn, pressableClasses } from "@/lib/utils";
 import { trackEvent } from "@/lib/analytics";
 import { BeerCard } from "@/components/beer-card";
 import type { Beer } from "@/lib/types";
@@ -42,7 +43,10 @@ export function BeersFilterGrid({ beers }: BeersFilterGridProps) {
                 cta_location: "beers_page",
               });
             }}
-            className="min-h-[44px] min-w-[44px] cursor-pointer rounded-md focus-visible:ring-2 focus-visible:ring-ocean/50"
+            className={cn(
+              "min-h-[44px] min-w-[44px] cursor-pointer rounded-md hover:opacity-85 focus-visible:ring-2 focus-visible:ring-ocean/50",
+              pressableClasses
+            )}
             aria-pressed={activeFilter === option.value}
           >
             <Badge
diff --git a/components/contact-map.tsx b/components/contact-map.tsx
index be3042e..be456b6 100644
--- a/components/contact-map.tsx
+++ b/components/contact-map.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { MapPin } from "lucide-react";
-import { cn } from "@/lib/utils";
+import { cn, pressableClasses } from "@/lib/utils";
 import { BUSINESS_ADDRESS } from "@/lib/site";
 
 // Contextual consent boundary (Issue #77): the Google Maps embed is never
@@ -57,7 +57,10 @@ export function ContactMap({ className }: ContactMapProps) {
           <button
             type="button"
             onClick={() => setMapRequested(true)}
-            className="mt-2 inline-flex min-h-[44px] min-w-[44px] items-center justify-center rounded-md bg-ink px-4 py-2 text-sm font-medium text-paper transition-opacity duration-200 hover:opacity-90 focus-visible:ring-2 focus-visible:ring-ink/50"
+            className={cn(
+              "mt-2 inline-flex min-h-[44px] min-w-[44px] items-center justify-center rounded-md bg-ink px-4 py-2 text-sm font-medium text-paper hover:opacity-90 focus-visible:ring-2 focus-visible:ring-ink/50",
+              pressableClasses
+            )}
           >
             Load map
           </button>
diff --git a/components/hero-video.tsx b/components/hero-video.tsx
index 9e4acfd..d3f530f 100644
--- a/components/hero-video.tsx
+++ b/components/hero-video.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState, useSyncExternalStore } from "react";
 import Link from "next/link";
 import Image from "next/image";
+import { cn, pressableClasses } from "@/lib/utils";
 
 // Issue #135: the brewery still replaces the grain hero photo so the static
 // experience looks intentional instead of duplicating the hero above it.
@@ -145,7 +146,10 @@ export function HeroVideo() {
         <div className="mt-8">
           <Link
             href="/about"
-            className="inline-flex h-11 min-w-[44px] items-center justify-center rounded-md border border-paper/30 bg-transparent px-6 text-sm font-medium text-paper transition-colors hover:bg-paper/10 focus-visible:ring-2 focus-visible:ring-paper/50"
+            className={cn(
+              "inline-flex h-11 min-w-[44px] items-center justify-center rounded-md border border-paper/30 bg-transparent px-6 text-sm font-medium text-paper hover:bg-paper/10 focus-visible:ring-2 focus-visible:ring-paper/50",
+              pressableClasses
+            )}
           >
             Learn More
           </Link>
diff --git a/components/mobile-menu.tsx b/components/mobile-menu.tsx
index 0e181a4..cf4c189 100644
--- a/components/mobile-menu.tsx
+++ b/components/mobile-menu.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useId, useState } from "react";
 import Link from "next/link";
+import { cn, pressableClasses } from "@/lib/utils";
 
 const navLinks = [
   { href: "/beers", label: "Beers" },
@@ -42,7 +43,10 @@ export function MobileMenu({ variant = "dark" }: MobileMenuProps) {
     <div className="md:hidden">
       <button
         onClick={() => setOpen(!open)}
-        className={`flex h-11 w-11 min-h-[44px] min-w-[44px] items-center justify-center rounded-md ${iconColor} focus-visible:ring-2 ${focusRing}`}
+        className={cn(
+          `flex h-11 w-11 min-h-[44px] min-w-[44px] items-center justify-center rounded-md ${iconColor} focus-visible:ring-2 ${focusRing}`,
+          pressableClasses
+        )}
         aria-label={open ? "Close menu" : "Open menu"}
         aria-expanded={open}
         aria-controls={menuId}
diff --git a/components/tour-date-picker.tsx b/components/tour-date-picker.tsx
index 690eaf2..a4262c3 100644
--- a/components/tour-date-picker.tsx
+++ b/components/tour-date-picker.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import { Calendar as CalendarIcon, ChevronLeft, ChevronRight } from "lucide-react";
-import { cn } from "@/lib/utils";
+import { cn, pressableClasses } from "@/lib/utils";
 import {
   addCalendarDays,
   compareCalendarDates,
@@ -180,7 +180,10 @@ export function TourDatePicker({
                     : { year: v.year, month: v.month - 1 }
                 )
               }
-              className="inline-flex h-8 w-8 items-center justify-center rounded-md text-ink/70 transition-colors hover:bg-stone disabled:pointer-events-none disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ocean/50"
+              className={cn(
+                "inline-flex h-8 w-8 items-center justify-center rounded-md text-ink/70 hover:bg-stone disabled:pointer-events-none disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ocean/50",
+                pressableClasses
+              )}
             >
               <ChevronLeft className="size-5" aria-hidden="true" />
             </button>
@@ -200,7 +203,10 @@ export function TourDatePicker({
                     : { year: v.year, month: v.month + 1 }
                 )
               }
-              className="inline-flex h-8 w-8 items-center justify-center rounded-md text-ink/70 transition-colors hover:bg-stone focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ocean/50"
+              className={cn(
+                "inline-flex h-8 w-8 items-center justify-center rounded-md text-ink/70 hover:bg-stone focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ocean/50",
+                pressableClasses
+              )}
             >
               <ChevronRight className="size-5" aria-hidden="true" />
             </button>
@@ -245,7 +251,10 @@ export function TourDatePicker({
                         tabIndex={toIsoDate(day) === focusedIso ? 0 : -1}
                         onClick={() => select(day)}
                         onKeyDown={(e) => handleDayKeyDown(e, day)}
-                        className="mx-auto flex h-8 w-full max-w-8 items-center justify-center rounded-full text-sm text-ink transition-colors hover:bg-stone focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ocean/50 aria-[disabled=true]:text-ink/30 aria-[disabled=true]:hover:bg-transparent data-[selected=true]:bg-ink data-[selected=true]:text-paper"
+                        className={cn(
+                          "mx-auto flex h-8 w-full max-w-8 items-center justify-center rounded-full text-sm text-ink hover:bg-stone focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ocean/50 aria-[disabled=true]:text-ink/30 aria-[disabled=true]:hover:bg-transparent data-[selected=true]:bg-ink data-[selected=true]:text-paper",
+                          pressableClasses
+                        )}
                       >
                         {day.day}
                       </button>
diff --git a/components/tour-inquiry-cta.tsx b/components/tour-inquiry-cta.tsx
index d178d9e..708da43 100644
--- a/components/tour-inquiry-cta.tsx
+++ b/components/tour-inquiry-cta.tsx
@@ -10,6 +10,7 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { trackEvent } from "@/lib/analytics";
+import { cn, pressableClasses } from "@/lib/utils";
 import { TourDatePicker } from "@/components/tour-date-picker";
 import { toIsoDate } from "@/lib/calendar";
 import {
@@ -157,7 +158,10 @@ export function TourInquiryCta({
                     return (
                       <label
                         key={key}
-                        className="cursor-pointer rounded-md border border-stone bg-paper px-3 py-1.5 transition-colors has-checked:border-ink has-checked:bg-stone/40 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ocean/50"
+                        className={cn(
+                          "cursor-pointer rounded-md border border-stone bg-paper px-3 py-1.5 has-checked:border-ink has-checked:bg-stone/40 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ocean/50",
+                          pressableClasses
+                        )}
                       >
                         <input
                           type="radio"
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index b5ea4ab..aa3314e 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { Slot } from "radix-ui"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all motion-reduce:duration-0 disabled:pointer-events-none disabled:opacity-50 disabled:saturate-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
@@ -31,6 +31,16 @@ const buttonVariants = cva(
         "icon-lg": "size-10",
       },
     },
+    compoundVariants: [
+      // Shared press feedback for every button-style variant: a brief ~2%
+      // scale-down on activation (THEME_AND_BRANDING.md — Interactive
+      // feedback). The text-only link variant stays still — scaling inline
+      // text reads as a layout shift, not a press.
+      {
+        variant: ["default", "destructive", "outline", "secondary", "ghost"],
+        class: "motion-safe:active:scale-[0.98]",
+      },
+    ],
     defaultVariants: {
       variant: "default",
       size: "default",
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index 72f8111..edd5cf1 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import { Dialog as DialogPrimitive } from "radix-ui";
 import { X } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn, pressableClasses } from "@/lib/utils";
 
 const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
@@ -33,7 +33,10 @@ function DialogContent({
         {children}
         <DialogPrimitive.Close
           aria-label="Close"
-          className="absolute right-3 top-3 inline-flex h-11 w-11 min-h-[44px] min-w-[44px] items-center justify-center rounded-md text-ink/70 transition-colors hover:bg-stone hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ocean/50"
+          className={cn(
+            "absolute right-3 top-3 inline-flex h-11 w-11 min-h-[44px] min-w-[44px] items-center justify-center rounded-md text-ink/70 hover:bg-stone hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ocean/50",
+            pressableClasses
+          )}
         >
           <X className="size-5" aria-hidden="true" />
         </DialogPrimitive.Close>
diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx
index 7f73dcd..5b950fd 100644
--- a/components/ui/tabs.tsx
+++ b/components/ui/tabs.tsx
@@ -64,7 +64,7 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all motion-reduce:duration-0 motion-safe:active:scale-[0.98] group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
         "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
         "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
diff --git a/components/venue-card.tsx b/components/venue-card.tsx
index 390cf18..d61d55c 100644
--- a/components/venue-card.tsx
+++ b/components/venue-card.tsx
@@ -1,4 +1,5 @@
 import { Badge } from "@/components/ui/badge";
+import { cn, pressableClasses } from "@/lib/utils";
 import { venueCardLocation, venueIslandKey } from "@/lib/venue-filters";
 import type { Venue } from "@/lib/types";
 
@@ -66,7 +67,10 @@ export function VenueCard({ venue, beerNameBySlug }: VenueCardProps) {
               data-analytics-island={island}
               data-analytics-venue-type={typeLabels[venue.type]}
               aria-label={`Directions to ${venue.name}`}
-              className="inline-flex min-h-[44px] min-w-[44px] items-center justify-center rounded-md bg-ink px-4 py-2 text-sm font-medium text-paper transition-opacity duration-200 hover:opacity-90 focus-visible:ring-2 focus-visible:ring-ink/50"
+              className={cn(
+                "inline-flex min-h-[44px] min-w-[44px] items-center justify-center rounded-md bg-ink px-4 py-2 text-sm font-medium text-paper hover:opacity-90 focus-visible:ring-2 focus-visible:ring-ink/50",
+                pressableClasses
+              )}
             >
               Directions
             </a>
diff --git a/components/venue-directory.tsx b/components/venue-directory.tsx
index 9fc3141..9e5a658 100644
--- a/components/venue-directory.tsx
+++ b/components/venue-directory.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { VenueCard } from "@/components/venue-card";
+import { cn, pressableClasses } from "@/lib/utils";
 import { trackEvent } from "@/lib/analytics";
 import {
   distinctIslands,
@@ -172,7 +173,10 @@ export function VenueDirectory({
                       type="button"
                       onClick={() => onFormatChange(option.value)}
                       aria-pressed={filters.format === option.value}
-                      className="min-h-[44px] min-w-[44px] cursor-pointer rounded-md focus-visible:ring-2 focus-visible:ring-ocean/50"
+                      className={cn(
+                        "min-h-[44px] min-w-[44px] cursor-pointer rounded-md hover:opacity-85 focus-visible:ring-2 focus-visible:ring-ocean/50",
+                        pressableClasses
+                      )}
                     >
                       <Badge
                         variant={
@@ -220,7 +224,10 @@ export function VenueDirectory({
               <button
                 type="button"
                 onClick={onClear}
-                className="inline-flex min-h-[44px] items-center justify-center rounded-md border border-stone bg-paper px-4 py-2 text-sm font-medium text-ink transition-opacity duration-200 hover:opacity-85 focus-visible:ring-2 focus-visible:ring-ocean/50"
+                className={cn(
+                  "inline-flex min-h-[44px] items-center justify-center rounded-md border border-stone bg-paper px-4 py-2 text-sm font-medium text-ink hover:opacity-85 focus-visible:ring-2 focus-visible:ring-ocean/50",
+                  pressableClasses
+                )}
               >
                 Clear filters
               </button>
@@ -266,7 +273,10 @@ export function VenueDirectory({
           <button
             type="button"
             onClick={onClear}
-            className="mt-3 inline-flex min-h-[44px] items-center justify-center rounded-md border border-stone bg-paper px-4 py-2 text-sm font-medium text-ink transition-opacity duration-200 hover:opacity-85 focus-visible:ring-2 focus-visible:ring-ocean/50"
+            className={cn(
+              "mt-3 inline-flex min-h-[44px] items-center justify-center rounded-md border border-stone bg-paper px-4 py-2 text-sm font-medium text-ink hover:opacity-85 focus-visible:ring-2 focus-visible:ring-ocean/50",
+              pressableClasses
+            )}
           >
             Clear filters
           </button>
diff --git a/docs/TECHNICAL.md b/docs/TECHNICAL.md
index 3cc376e..5b83566 100644
--- a/docs/TECHNICAL.md
+++ b/docs/TECHNICAL.md
@@ -647,10 +647,12 @@ Email is a channel on the lead, not a separate inbox:
   Firestore failure returns the communication id so the client retries the
   same recorded send rather than composing a duplicate. The HTML part is a
   branded shell (`buildTradeLeadOutboundHtml` in
-  `lib/trade-leads-email-common.ts`): hoppy-turtle mark + white card around
-  the staff-written body + a compact footer — table layout and inline
-  styles only. The mark resolves to an absolute URL on `siteUrl`
-  (`/brand/email-mark-black.png`); the plain-text part is sent unchanged.
+  `lib/trade-leads-email-common.ts`): the hoppy-turtle mark centered over a
+  white card around the staff-written body, and a compact centered footer
+  that credits the sending admin ("Name · Deep Dive Brewing Co") — table
+  layout and inline styles only. The mark resolves to an absolute URL on
+  `siteUrl` (`/brand/email-mark-black.png`); the plain-text part is sent
+  unchanged.
   The rendered HTML is persisted on the communication (`htmlBody`) so a
   resend replays the identical provider payload under the same idempotency
   key; records written before branded mail fall back to the legacy
diff --git a/docs/operations/accessibility.md b/docs/operations/accessibility.md
index b5953e5..37e89ec 100644
--- a/docs/operations/accessibility.md
+++ b/docs/operations/accessibility.md
@@ -105,8 +105,15 @@ fail — stop your server first or start it with `ADMIN_A11Y_FIXTURE=1`.
   The hero video is muted, decorative, and swaps to a static poster under
   `prefers-reduced-motion`.
 - **`prefers-reduced-motion`** is honored in `globals.css` for the site's
-  fade/reveal animations and in JS (`hero-video`, `IntroSection`) for the
-  video swap.
+  fade/reveal animations, in JS (`hero-video`, `IntroSection`) for the
+  video swap, and on interactive controls — the shared press feedback
+  (`motion-safe:active:scale-[0.98]` in `buttonVariants` and
+  `pressableClasses` in `lib/utils.ts`) never transforms under reduced
+  motion, so the color/border acknowledgement remains without movement.
+- **Interactive controls acknowledge activation.** Buttons, clickable
+  rows/cards, filter chips, and disclosure controls carry a distinct
+  pressed state in addition to hover and `focus-visible` — via the shared
+  primitives above, not per-component one-offs.
 - **Multiple `<nav>` landmarks get distinct `aria-label`s** ("Main",
   "Mobile", "Breadcrumb").
 
diff --git a/lib/trade-leads-email-common.ts b/lib/trade-leads-email-common.ts
index 0a5c56e..6928382 100644
--- a/lib/trade-leads-email-common.ts
+++ b/lib/trade-leads-email-common.ts
@@ -288,10 +288,11 @@ export function plainTextToHtml(text: string): string {
 // --- Outbound branding ---
 //
 // Customer-facing mail is wrapped in a light branded shell: the hoppy
-// turtle mark (the primary brand mark), a clean white card for the
-// staff-written body, and a compact footer. Table-based layout and inline
-// styles only — no external fonts, background images, or scripts — so it
-// renders consistently across Gmail, Outlook, and mobile clients.
+// turtle mark (the primary brand mark) centered over a clean white card
+// for the staff-written body, and a compact centered footer. Table-based
+// layout and inline styles only — no external fonts, background images,
+// or scripts — so it renders consistently across Gmail, Outlook, and
+// mobile clients.
 //
 // The mark is served from the public site origin (`lib/site.ts` siteUrl) —
 // email clients need absolute URLs; relative paths never resolve outside
@@ -308,27 +309,35 @@ export function buildTradeLeadOutboundHtml(options: {
   markUrl: string;
   // Absolute site URL for the footer link.
   siteUrl: string;
+  // Sending admin's display name (the actor snapshot) — the footer's first
+  // line becomes "Name · Deep Dive Brewing Co" when present.
+  senderName?: string;
 }): string {
-  const { bodyHtml, markUrl, siteUrl } = options;
+  const { bodyHtml, markUrl, siteUrl, senderName } = options;
   const home = escapeHtml(siteUrl.replace(/^https?:\/\//, ""));
-  return `<div style="margin:0;padding:24px 16px;background-color:#fafaf8;font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;">
+  const sender = senderName?.trim();
+  const brandLine = sender
+    ? `${escapeHtml(sender)} &middot; Deep Dive Brewing Co`
+    : "Deep Dive Brewing Co";
+  return `<div style="margin:0;padding:16px 16px 24px;background-color:#fafaf8;font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;">
   <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
     <tr>
       <td align="center">
         <table role="presentation" width="560" cellpadding="0" cellspacing="0" border="0" style="width:560px;max-width:100%;">
           <tr>
-            <td style="padding:0 0 16px 4px;">
-              <img src="${escapeHtml(markUrl)}" width="64" height="54" alt="Deep Dive Brewing Co" style="display:block;border:0;outline:none;" />
+            <td align="center" style="padding:0 0 14px;">
+              <img src="${escapeHtml(markUrl)}" width="92" height="77" alt="Deep Dive Brewing Co" style="display:block;border:0;outline:none;margin:0 auto;" />
             </td>
           </tr>
           <tr>
-            <td style="background-color:#ffffff;border:1px solid #e6e7e3;border-radius:8px;padding:24px;font-size:15px;line-height:1.6;color:#0b0f14;">
+            <td style="background-color:#ffffff;border:1px solid #ececea;border-radius:8px;padding:20px 22px;font-size:15px;line-height:1.6;color:#0b0f14;">
               ${bodyHtml}
             </td>
           </tr>
           <tr>
-            <td style="padding:16px 4px 0;font-size:12px;line-height:1.5;color:#737373;">
-              Deep Dive Brewing Co &middot; Saba, Dutch Caribbean<br />
+            <td align="center" style="padding:14px 4px 0;font-size:12px;line-height:1.6;color:#737373;">
+              <span style="font-weight:600;color:#0b0f14;">${brandLine}</span><br />
+              Saba, Dutch Caribbean<br />
               <a href="${escapeHtml(siteUrl)}" style="color:#334e68;">${home}</a>
             </td>
           </tr>
diff --git a/lib/trade-leads-email.ts b/lib/trade-leads-email.ts
index bf8d9b7..d288a6e 100644
--- a/lib/trade-leads-email.ts
+++ b/lib/trade-leads-email.ts
@@ -151,6 +151,7 @@ async function prepareOutboundEmail(
       bodyHtml: plainTextToHtml(message.body),
       markUrl: `${siteUrl}${TRADE_EMAIL_MARK_PATH}`,
       siteUrl,
+      senderName: actor.name,
     });
 
     // Reply threading: resolve the referenced communication and seed
diff --git a/lib/utils.ts b/lib/utils.ts
index a62ac88..de516fc 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -5,6 +5,25 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
 
+/**
+ * Shared tactile feedback for interactive controls that are not `Button`
+ * instances — record rows, lead cards, filter chips, disclosure controls,
+ * icon buttons. `buttonVariants` carries the same press scale for shadcn
+ * Buttons; keep the two in sync (see THEME_AND_BRANDING.md — Interactive
+ * feedback).
+ *
+ * The transition list is explicit — the cheap paint properties the
+ * existing hovers already use (color, background, border, opacity,
+ * shadow) plus the press transform. `transition-all` is avoided on
+ * purpose: it would also animate layout-affecting properties, e.g. the
+ * width change when a submit label swaps to its loading text.
+ * The press scale is gated by `motion-safe:` and the transition duration
+ * drops to zero under `motion-reduce:`: reduced-motion sessions keep an
+ * instant color/border acknowledgement with no animation at all.
+ */
+export const pressableClasses =
+  "transition-[color,background-color,border-color,box-shadow,opacity,transform,translate,scale,rotate] duration-150 motion-reduce:duration-0 motion-safe:active:scale-[0.98]";
+
 /** Build a Firebase Storage download URL from a bucket name and object path. */
 export function storageDownloadUrl(bucket: string, objectPath: string): string {
   const encoded = encodeURIComponent(objectPath);
diff --git a/tests/lib/interaction.test.ts b/tests/lib/interaction.test.ts
new file mode 100644
index 0000000..0c75900
--- /dev/null
+++ b/tests/lib/interaction.test.ts
@@ -0,0 +1,74 @@
+import { describe, it } from "node:test";
+import assert from "node:assert";
+import { pressableClasses } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+// UX polish — the shared pressed-state primitive. These tests pin the
+// contract of pressableClasses and buttonVariants: every interactive
+// control gets a visible press acknowledgement, reduced-motion sessions
+// are never transformed, and disabled controls lose interactive feedback
+// entirely. They assert class contracts, not animation timing.
+
+describe("pressableClasses", () => {
+  it("carries a transition so state changes are visible", () => {
+    assert.match(pressableClasses, /transition/);
+    assert.match(pressableClasses, /duration-/);
+  });
+
+  it("scales down on :active but only when motion is allowed", () => {
+    assert.match(pressableClasses, /motion-safe:active:scale-/);
+    // The transform must never leak into prefers-reduced-motion sessions —
+    // it is gated by motion-safe, not merely overridden.
+    assert.doesNotMatch(pressableClasses, /motion-reduce:active:scale/);
+  });
+});
+
+describe("buttonVariants press feedback", () => {
+  it("gives button-style variants a pressed scale", () => {
+    for (const variant of [
+      "default",
+      "destructive",
+      "outline",
+      "secondary",
+      "ghost",
+    ] as const) {
+      assert.match(
+        buttonVariants({ variant }),
+        /motion-safe:active:scale-/,
+        `expected press feedback on variant "${variant}"`
+      );
+    }
+  });
+
+  it("does not scale the text-only link variant", () => {
+    const classes = buttonVariants({ variant: "link" });
+    assert.doesNotMatch(classes, /scale-/);
+  });
+
+  it("disabled controls lose interactive feedback and read as muted", () => {
+    const classes = buttonVariants({});
+    // pointer-events-none strips hover/press visuals entirely, and the
+    // opacity + desaturation read clearly as "off" rather than merely a
+    // slightly different gray.
+    assert.match(classes, /disabled:pointer-events-none/);
+    assert.match(classes, /disabled:opacity-/);
+    assert.match(classes, /disabled:saturate-/);
+  });
+
+  it("keeps a visible focus indicator on every variant", () => {
+    for (const variant of [
+      "default",
+      "destructive",
+      "outline",
+      "secondary",
+      "ghost",
+      "link",
+    ] as const) {
+      assert.match(
+        buttonVariants({ variant }),
+        /focus-visible:ring-/,
+        `expected focus-visible styling on variant "${variant}"`
+      );
+    }
+  });
+});
diff --git a/tests/lib/trade-leads-email.test.ts b/tests/lib/trade-leads-email.test.ts
index 4190f1e..96dc8dc 100644
--- a/tests/lib/trade-leads-email.test.ts
+++ b/tests/lib/trade-leads-email.test.ts
@@ -476,14 +476,53 @@ describe("buildTradeLeadOutboundHtml", () => {
     assert.ok(html.includes('alt="Deep Dive Brewing Co"'));
   });
 
+  it("renders the mark centered at the enlarged brand size", () => {
+    assert.ok(html.includes('width="92"'));
+    // Centered presentation: the cell aligns center and the image
+    // carries an auto-margin fallback for clients that need it.
+    assert.ok(html.includes("margin:0 auto"));
+  });
+
   it("carries the staff body inside the card unchanged", () => {
     assert.ok(html.includes("<p>Thanks for reaching out.</p>"));
     assert.ok(html.includes("<p>Price list attached.</p>"));
   });
 
   it("has a brand footer with the site link", () => {
-    assert.ok(html.includes("Deep Dive Brewing Co &middot; Saba"));
+    assert.ok(html.includes("Deep Dive Brewing Co"));
+    assert.ok(html.includes("Saba, Dutch Caribbean"));
     assert.ok(html.includes('href="https://deepdivebrewing.com"'));
+    // No sender name passed — the footer falls back to the bare brand line.
+    assert.ok(!html.includes("&middot; Deep Dive Brewing Co"));
+  });
+
+  it("credits the sending admin when a sender name is supplied", () => {
+    const withSender = buildTradeLeadOutboundHtml({
+      bodyHtml: "<p>hi</p>",
+      markUrl: `https://deepdivebrewing.com${TRADE_EMAIL_MARK_PATH}`,
+      siteUrl: "https://deepdivebrewing.com",
+      senderName: "Chad",
+    });
+    assert.ok(withSender.includes("Chad &middot; Deep Dive Brewing Co"));
+    // Blank or absent names fall back to the bare brand line.
+    const blank = buildTradeLeadOutboundHtml({
+      bodyHtml: "<p>hi</p>",
+      markUrl: `https://deepdivebrewing.com${TRADE_EMAIL_MARK_PATH}`,
+      siteUrl: "https://deepdivebrewing.com",
+      senderName: "   ",
+    });
+    assert.ok(!blank.includes("&middot;"));
+  });
+
+  it("escapes the sender name — it cannot inject markup", () => {
+    const evil = buildTradeLeadOutboundHtml({
+      bodyHtml: "<p>hi</p>",
+      markUrl: `https://deepdivebrewing.com${TRADE_EMAIL_MARK_PATH}`,
+      siteUrl: "https://deepdivebrewing.com",
+      senderName: 'Chad <img src=x onerror="alert(1)">',
+    });
+    assert.ok(!evil.includes("<img src=x"));
+    assert.ok(evil.includes("Chad &lt;img"));
   });
 
   it("escapes the mark URL and keeps email-safe markup", () => {