changes i dont like ft. black banner

src/components/Layout.css

@@ -34,6 +34,27 @@
   border-bottom: 1px solid var(--line);
   background: #faf9f5;
 }
+.contact-strip {
+  display: flex;
+  justify-content: center;
+  padding: 9px var(--page-gutter);
+  background: #111;
+  color: #fff;
+  font-size: 10px;
+  letter-spacing: 0.04em;
+}
+.contact-strip__details {
+  display: flex;
+  gap: 12px;
+}
+.contact-strip a {
+  color: inherit;
+  text-decoration: none;
+}
+.contact-strip a:hover {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
 .site-header__inner {
   display: flex;
   justify-content: space-between;
@@ -260,6 +281,14 @@
     padding-left: 10px;
     font-size: 11px;
   }
+  .contact-strip {
+    padding-block: 8px;
+  }
+  .contact-strip__details {
+    width: 100%;
+    justify-content: center;
+    gap: 8px;
+  }
   .site-header__toggle {
     display: flex;
     justify-content: space-between;

src/components/Layout.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { Link, NavLink, Outlet, useLocation } from "react-router-dom";
-import { company, navigation } from "../data";
+import { company, navigation, phoneHref } from "../data";
 import { Arrow, WhatsAppAction } from "./Primitives";
 import "./Layout.css";
 
@@ -32,6 +32,13 @@ function Header() {
         }
       }}
     >
+      <div className="contact-strip">
+        <div className="contact-strip__details">
+          <a href={`mailto:${company.email}`}>{company.email}</a>
+          <span aria-hidden="true">·</span>
+          <a href={phoneHref(company.phone)}>{company.phone}</a>
+        </div>
+      </div>
       <div className="site-header__inner">
         <Brand />
         <button