From 1ead3a96747bfec0efe5a3fd2d6ce92c895269fd Mon Sep 17 00:00:00 2001
From: Tom Roth <info@tomroth.consulting>
Date: Fri, 31 Jul 2026 09:47:58 +0200
Subject: [PATCH] Footer: brand tagline, remove tagline line, 2-col services,
 Bay Area heading

---
 src/_includes/components/footer.njk | 31 +++++++++++++------
 src/css/main.css                    | 46 ++++++++++++++++++++++-------
 2 files changed, 57 insertions(+), 20 deletions(-)

diff --git a/src/_includes/components/footer.njk b/src/_includes/components/footer.njk
index fee84ea..a664278 100644
--- a/src/_includes/components/footer.njk
+++ b/src/_includes/components/footer.njk
@@ -2,17 +2,30 @@
   <div class="footer__inner container">
 
     <div>
-      <a href="{{ rootPath }}index.html" class="footer__brand">HER</a>
-      <p class="footer__tagline">Home Enhancement and Renovation<br>San Francisco &amp; Bay Area</p>
+      <a href="{{ rootPath }}index.html" class="footer__brand" aria-label="HER Home Enhancement &amp; Restoration — Home">
+        <span class="footer__brand-her">HER</span>
+        <span class="footer__brand-tagline" aria-hidden="true">Home Enhancement<br><span class="footer__brand-amp">&amp;</span> Restoration</span>
+      </a>
     </div>
 
     <nav aria-label="Footer navigation">
-      <p class="footer__nav-heading">Services</p>
-      <ul class="footer__nav" role="list">
-        {% for service in services %}
-        <li><a href="{{ rootPath }}services/{{ service.slug }}/index.html">{{ service.name }}</a></li>
-        {% endfor %}
-      </ul>
+      <p class="footer__nav-heading">Services in the Bay Area</p>
+      <div class="footer__nav-cols">
+        <ul class="footer__nav" role="list">
+          {% for service in services %}
+          {% if loop.index <= 5 %}
+          <li><a href="{{ rootPath }}services/{{ service.slug }}/index.html">{{ service.name }}</a></li>
+          {% endif %}
+          {% endfor %}
+        </ul>
+        <ul class="footer__nav" role="list">
+          {% for service in services %}
+          {% if loop.index > 5 %}
+          <li><a href="{{ rootPath }}services/{{ service.slug }}/index.html">{{ service.name }}</a></li>
+          {% endif %}
+          {% endfor %}
+        </ul>
+      </div>
     </nav>
 
     <div>
@@ -27,7 +40,7 @@
 
   <div class="footer__bottom">
     <div class="container">
-      <p>&copy; {{ "" | currentYear }} Home Enhancement and Renovation &mdash; HER. All rights reserved.</p>
+      <p>&copy; {{ "" | currentYear }} Home Enhancement &amp; Restoration &mdash; HER. All rights reserved.</p>
     </div>
   </div>
 </footer>
diff --git a/src/css/main.css b/src/css/main.css
index 31b2b3c..7068efd 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -1083,30 +1083,48 @@ a {
 
 @media (min-width: 1024px) {
   .footer__inner {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: 1fr 2fr 1fr;
   }
 }
 
 .footer__brand {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.footer__brand-her {
   font-family: var(--font-display);
   font-style: italic;
   font-size: var(--text-2xl);
   color: var(--col-copper);
-  text-decoration: none;
-  margin-bottom: var(--space-2);
+  letter-spacing: -0.01em;
+  line-height: 1;
+  flex-shrink: 0;
   transition: color 0.2s ease;
 }
 
-.footer__brand:hover {
-  color: var(--col-copper-hover);
+.footer__brand-tagline {
+  font-family: var(--font-body);
+  font-size: 0.65rem;
+  font-weight: 500;
+  color: var(--col-copper);
+  line-height: 1.38;
+  border-left: 1px solid rgba(181, 98, 42, 0.35);
+  padding-left: 0.6rem;
+  transition: color 0.2s ease;
 }
 
-.footer__tagline {
-  font-family: var(--font-body);
-  font-size: var(--text-sm);
-  color: rgba(255, 255, 255, 0.55);
-  margin: 0;
+.footer__brand-amp {
+  font-family: Georgia, 'Times New Roman', serif;
+  font-style: italic;
+}
+
+.footer__brand:hover .footer__brand-her,
+.footer__brand:hover .footer__brand-tagline {
+  color: var(--col-copper-hover);
 }
 
 .footer__nav-heading {
@@ -1120,6 +1138,12 @@ a {
   margin-bottom: var(--space-2);
 }
 
+.footer__nav-cols {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-4);
+}
+
 .footer__nav {
   list-style: none;
   margin: 0;