Design Language tweaks

src/lib/styles/layout.css

@@ -13,10 +13,7 @@ header {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0;
-  padding: 11px 24px;
-  flex-wrap: nowrap;
-  overflow: hidden;
+  padding: 10px 18px;
 }
 
 .nav-ribbon-item {
@@ -26,52 +23,33 @@ header {
   font-family: var(--font-head);
   font-size: 11px;
   font-weight: 700;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.04em;
   text-transform: uppercase;
   color: var(--gw-green);
   white-space: nowrap;
-  padding: 0 28px;
+  text-align: center;
 }
 
 .nav-ribbon-item .icon {
-  font-size: 14px;
-}
-
-.nav-ribbon-divider {
-  width: 1px;
-  height: 14px;
-  background: rgba(33, 48, 33, 0.2);
-  flex: none;
+  font-size: 13px;
 }
 
 @media (max-width: 768px) {
   .nav-ribbon {
-    padding: 14px 16px;
+    padding: 11px 14px;
   }
 
   .nav-ribbon-item {
-    flex: 1;
     justify-content: center;
-    padding: 0;
     gap: 7px;
     font-size: 9px;
     line-height: 1.25;
     letter-spacing: 0.045em;
-    white-space: nowrap;
+    white-space: normal;
   }
 
   .nav-ribbon-item .icon {
-    font-size: 14px;
-  }
-
-  /* Hide the third ribbon item and its preceding divider on mobile */
-  .nav-ribbon > :nth-child(4),
-  .nav-ribbon > :nth-child(5) {
-    display: none;
-  }
-
-  .nav-ribbon-divider {
-    display: none;
+    font-size: 12px;
   }
 }
 
@@ -79,7 +57,6 @@ nav,
 .mobile-menu,
 .hero-inner,
 .intro-inner,
-.promise-inner,
 .services-inner,
 .values-inner,
 .testimonials-inner,
@@ -112,6 +89,25 @@ nav {
   list-style: none;
 }
 
+/* Left group hugs the centre logo; right group + actions sit in column 3 */
+.nav-links-left {
+  justify-content: flex-end;
+  padding-right: 34px;
+}
+
+.nav-end {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding-left: 34px;
+}
+
+/* Breathing room so the nav groups don't crowd the centre logo */
+.logo {
+  margin: 0 44px;
+}
+
 .nav-links li {
   position: relative;
 }
@@ -327,20 +323,17 @@ nav {
 .mobile-phone {
   display: none;
   align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.08);
   color: #fff;
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 1;
   text-decoration: none;
-  white-space: nowrap;
 }
 
 .mobile-phone .icon {
-  font-size: 14px;
+  font-size: 16px;
 }
 
 .instagram-icon {
@@ -394,15 +387,13 @@ nav {
   transform: translateY(1px) scale(0.94);
 }
 
-.hero-inner,
-.promise-inner {
+.hero-inner {
   display: flex;
   align-items: center;
   gap: 60px;
   width: 100%;
 }
 
-.promise-inner,
 .services-inner,
 .values-inner,
 .testimonials-inner,
@@ -411,25 +402,10 @@ nav {
   padding: 0 50px;
 }
 
-.services-grid,
 .testimonials-grid {
   margin-top: 48px;
 }
 
-.services-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 32px;
-}
-
-.values-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 0;
-  margin-top: 48px;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
 .testimonials-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);