Fix negative offset on homepage "Our Promise" box per Brad

dist/app.css

@@ -12164,15 +12164,23 @@ a {
 }
 .top-nav nav.main-nav ul#menu-main-menu {
   display: flex;
-  gap: 3rem;
+  gap: 1.25rem;
   padding: 0;
   margin: 0;
   list-style-type: none;
   height: 100%;
   align-items: center;
+  font-size: 1rem;
 }
 .top-nav nav.main-nav ul#menu-main-menu a {
   color: #000;
+  white-space: nowrap;
+}
+@media (min-width: 1200px) {
+  .top-nav nav.main-nav ul#menu-main-menu {
+    font-size: 1.25rem;
+    gap: 2rem;
+  }
 }
 
 footer.site-footer {
@@ -12182,6 +12190,9 @@ footer.site-footer {
 footer.site-footer .left {
   max-width: 436px;
 }
+footer.site-footer .left img {
+  margin-bottom: 1rem;
+}
 footer.site-footer .left .footer-contact {
   list-style-type: none;
   padding: 0;
@@ -12277,7 +12288,7 @@ section.side-by-side-text h2, section.side-by-side-text .h2 {
 }
 .text-over-image-a .content-wrapper {
   background-color: rgba(6, 60, 90, 0.8);
-  transform: translateY(-1.25rem);
+  transform: translateY(1.25rem);
   padding: 4rem 3rem 2rem;
 }
 .text-over-image-a .content-wrapper .content {
@@ -12315,6 +12326,10 @@ section.side-by-side-text h2, section.side-by-side-text .h2 {
   padding-bottom: 20rem;
 }
 @media (max-width: 767.98px) {
+  .text-over-image-c {
+    background-position: center top;
+    background-size: auto 160%;
+  }
   .text-over-image-c .col:first-of-type {
     display: none;
   }
@@ -12394,6 +12409,19 @@ section.flex-5050-cta.grey .overflow-image {
   width: 48% !important;
   height: 100% !important;
 }
+section.flex-5050-cta .col-image-wrapper {
+  display: none;
+}
+section.flex-5050-cta.contain .overflow-image {
+  display: none !important;
+}
+section.flex-5050-cta.contain .col-image-wrapper {
+  display: block;
+}
+section.flex-5050-cta.contain .col-image-wrapper img {
+  display: block;
+  width: 100%;
+}
 @media (max-width: 991.98px) {
   section.flex-5050-cta .col:last-of-type {
     display: none;
@@ -12534,6 +12562,7 @@ section.large-quote .quote p.attribution {
   margin-top: 3rem;
   font-size: 38px;
   line-height: 63px;
+  font-style: italic;
 }
 
 section.services-blocks {

dist/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/app.js": "/app.js?id=ac271f1d4ead304b5ae143995cb9455e",
+    "/app.js": "/app.js?id=4cb03e0a718ef84b2464e0ef7fbdead9",
-    "/app.css": "/app.css?id=2f7ba30e071cbd564c36e453568cf64c"
+    "/app.css": "/app.css?id=f8f0465cd03a3c8aa4a6477906c75750"
 }

src/scss/flex-5050-cta.scss

@@ -2,6 +2,7 @@ section.flex-5050-cta {
     position: relative;
     padding: 6rem 0;
 
+    // grey mode
     &.grey {
         background-color: $c-offWhite;
 
@@ -17,6 +18,26 @@ section.flex-5050-cta {
         }
     }
 
+    .col-image-wrapper {
+        display: none;
+    }
+
+    // image contain mode
+    &.contain {
+        .overflow-image {
+            display: none !important;
+        }
+
+        .col-image-wrapper {
+            display: block;
+
+            img {
+                display: block;
+                width: 100%;
+            }
+        }
+    }
+
     @include media-breakpoint-down(lg) {
         .col:last-of-type {
             display: none;

src/scss/flex-large-quote.scss

@@ -16,6 +16,7 @@ section.large-quote {
             margin-top: 3rem;
             font-size: 38px;
             line-height: 63px;
+            font-style: italic;
         }
     }
 }

src/scss/flex-text-over-image-a.scss

@@ -11,7 +11,7 @@
 
     .content-wrapper {
         background-color: rgba($c-navy, 0.8);
-        transform: translateY(-1.25rem);
+        transform: translateY(1.25rem);
         padding: 4rem 3rem 2rem;
 
         .content {

src/scss/flex-text-over-image-c.scss

@@ -5,6 +5,9 @@
     padding-bottom: 20rem;
 
     @include media-breakpoint-down(md) {
+        background-position: center top;
+        background-size: auto 160%;
+
         .col:first-of-type {
             display: none;
         }

src/scss/footer.scss

@@ -5,6 +5,10 @@ footer.site-footer {
     .left {
         max-width: 436px;
 
+        img {
+            margin-bottom: 1rem;
+        }
+
         .footer-contact {
             list-style-type: none;
             padding: 0;

src/scss/header.scss

@@ -79,15 +79,22 @@
 
         ul#menu-main-menu {
             display: flex;
-            gap: 3rem;
+            gap: 1.25rem;
             padding: 0;
             margin: 0;
             list-style-type: none;
             height: 100%;
             align-items: center;
+            font-size: 1rem;
 
             a {
                 color: $c-black;
+                white-space: nowrap;
+            }
+
+            @include media-breakpoint-up(xl) {
+                font-size: 1.25rem;
+                gap: 2rem;
             }
         }
     }

tpl/contact.tpl

@@ -27,6 +27,8 @@
                         <a href="mailto:{{ contact_email }}">Email: {{ contact_email }}</a>
                     </li>
                 </ul>
+
+                <script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/e048c4e851c5e351f4bb73de9/c3dd1604c5ac487baa3de2c78.js");</script>
             </div>
 
             <div class="col-12 col-md-6">

tpl/flex_5050_cta.tpl

@@ -1,7 +1,7 @@
-<section class="flex-5050-cta {{ style }}">
+<section class="flex-5050-cta {{ style }} {{ image_mode }}">
     <div class="overflow-image" style="background-image:url({{ image }})">&nbsp;</div>
     <div class="container">
-        <div class="row">
+        <div class="row align-items-center">
             <div class="col">
                 <h2>{{ headline }}</h2>
                 {{{ content }}}
@@ -14,7 +14,12 @@
 
                 <img src="{{ image }}" alt="" />
             </div>
-            <div class="col">&nbsp;</div>
+
+            <div class="col">
+                <div class="col-image-wrapper">
+                    <img src="{{ image }}" alt="" />
+                </div>
+            </div>
         </div>
     </div>
 </section>

tpl/header.tpl

@@ -17,7 +17,7 @@
     <div class="container">
         <div class="row">
             <div class="col">
-                <div class="d-flex justify-content-between flex-column flex-md-row">
+                <div class="d-flex justify-content-between flex-column flex-md-row align-items-center gap-4">
                     <div class="logo-wrapper">
                         <a href="/"><img src="{{ logo }}" alt="{{#wp-title}}" /></a>