From 1693c97f65a45d45120081948b71423ae9f2afc3 Mon Sep 17 00:00:00 2001
From: Michael Victory <michael@opencommunications.consulting>
Date: Tue, 16 Jun 2026 11:16:49 -0700
Subject: [PATCH] =?UTF-8?q?OC=20footer:=20height=20=3D=20bg=20logo=20(aspe?=
 =?UTF-8?q?ct-ratio=204:1),=20no=20padding/min-height;=20mobile=20lets=20c?=
 =?UTF-8?q?ontent=20drive=20height=20with=20logo=20covering=20=E2=80=94=20?=
 =?UTF-8?q?fixes=20empty=20gap?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 index.html |  1 -
 style.css  | 16 ++++++++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index faca477..bd35014 100644
--- a/index.html
+++ b/index.html
@@ -161,7 +161,6 @@
 </main>
 
 <footer class="band dark site-footer" data-bg="dark">
-  <img class="footer-watermark" src="assets/brand/oc-mark-wh.svg" alt="" aria-hidden="true">
   <div class="footer-inner">
     <div class="wrap">
       <div class="footer-brand logo-mark" role="img" aria-label="Open Communications"></div>
diff --git a/style.css b/style.css
index 0185e7f..868f612 100644
--- a/style.css
+++ b/style.css
@@ -164,10 +164,18 @@ a.tel { text-decoration: none; }
 .actions.center { margin: 2.2em 0 0.8em; }
 .promise { font-style: italic; color: var(--ink-soft); font-size: 0.95rem; }
 
-/* Footer — full-bleed "open" watermark drives the height; content overlaid bottom-left */
-.site-footer { padding: 0; background: var(--navy); position: relative; overflow: hidden; min-height: 300px; }
-.footer-watermark { display: block; width: 100%; height: auto; opacity: 0.05; pointer-events: none; }
-.footer-inner { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 48px; }
+/* Footer — height = the bg "open" logo (aspect 4:1), tight, no padding; content overlaid flush bottom-left */
+.site-footer { padding: 0; background: var(--navy); position: relative; overflow: hidden; aspect-ratio: 1267.11 / 316.97; }
+.site-footer::before {
+  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
+  background: url(assets/brand/oc-mark-wh.svg) no-repeat center; background-size: 100% 100%;
+}
+.footer-inner { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 32px; }
+@media (max-width: 760px) {
+  .site-footer { aspect-ratio: auto; }
+  .site-footer::before { background-size: cover; }
+  .footer-inner { position: static; padding: 52px 0 36px; }
+}
 .footer-brand { width: 150px; height: 32px; background-color: var(--cream); margin-bottom: 24px; }
 .footer-nav { display: flex; flex-wrap: wrap; gap: 28px; font-family: 'DM Sans', sans-serif; font-size: 0.72rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.13em; margin-bottom: 22px; }
 .footer-nav a { color: var(--cream-soft); text-decoration: none; }