diff --git a/app/styles/brand.css b/app/styles/brand.css
index 4cdc148..391ae85 100644
--- a/app/styles/brand.css
+++ b/app/styles/brand.css
@@ -139,6 +139,29 @@
   letter-spacing: 0.01em;
 }
 
+/* === Safe-area insets =================================================
+ *
+ * Opt-in padding helpers for sticky top / fixed bottom bars on devices
+ * with notches, dynamic islands, or gesture home indicators.  Pair with
+ * the viewport-fit=cover viewport meta (set in app/layout.tsx) — without
+ * that, env(safe-area-inset-*) resolves to 0 and these utilities are
+ * no-ops, which is the desired fallback on non-PWA / non-mobile contexts.
+ *
+ * Usage:
+ *   <header class="sticky top-0 pt-safe ...">      // header clears notch
+ *   <nav class="fixed bottom-0 pb-safe ...">       // bottom bar clears home bar
+ *
+ * Closes PWA-04 (REQUIREMENTS.md) and ROADMAP Phase 1 SC #3.
+ * ==================================================================== */
+
+@utility pt-safe {
+  padding-top: env(safe-area-inset-top);
+}
+
+@utility pb-safe {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
 /* === Wolf-mark watermark ============================================
  *
  * Apply .has-mark-watermark to a positioned container; place a child