Use the new AI Growth Technologies logo files in the header, footer and icons

src/app/globals.css

@@ -348,13 +348,12 @@ a {
 .logo {
   display: inline-flex;
   align-items: center;
-  gap: 14px;
 }
 
-.logo-mark {
+.logo img {
+  display: block;
   width: auto;
-  height: 40px;
-  flex: none;
+  height: 44px;
 }
 
 .logo-stacked {
@@ -367,27 +366,6 @@ a {
   height: auto;
 }
 
-.logo-type {
-  display: flex;
-  flex-direction: column;
-  line-height: 1;
-}
-
-.logo-type b {
-  white-space: nowrap;
-  font-size: 14px;
-  font-weight: 600;
-  letter-spacing: 0.2em;
-}
-
-.logo-type span {
-  margin-top: 5px;
-  font-size: 8.5px;
-  font-weight: 500;
-  letter-spacing: 0.42em;
-  color: var(--fumo);
-}
-
 .nav {
   display: flex;
   align-items: center;
@@ -2770,12 +2748,15 @@ a {
   }
 }
 
-/* The stacked logo's wordmark is white; the light theme swaps in the dark-lettered file. */
+/* The logos' wordmarks are white; the light theme swaps in the dark-lettered files. */
+.logo .on-light,
 .logo-stacked .on-light,
+:root[data-theme="light"] .logo .on-dark,
 :root[data-theme="light"] .logo-stacked .on-dark {
   display: none;
 }
 
+:root[data-theme="light"] .logo .on-light,
 :root[data-theme="light"] .logo-stacked .on-light {
   display: block;
 }

src/components/logo.tsx

@@ -4,11 +4,8 @@ import Image from "next/image";
 export default function Logo({ href, label }: { href: string; label: string }) {
   return (
     <Link href={href} className="logo" aria-label={label}>
-      <Image className="logo-mark" src="/logo-mark.png" alt="" width={229} height={192} priority />
-      <span className="logo-type">
-        <b>AI GROWTH</b>
-        <span>TECHNOLOGIES</span>
-      </span>
+      <Image className="on-dark" src="/logo-horizontal.png" alt="AI Growth Technologies" width={640} height={191} priority />
+      <Image className="on-light" src="/logo-horizontal-dark.png" alt="AI Growth Technologies" width={640} height={191} priority />
     </Link>
   );
 }
@@ -16,8 +13,8 @@ export default function Logo({ href, label }: { href: string; label: string }) {
 export function LogoStacked({ href, label }: { href: string; label: string }) {
   return (
     <Link href={href} className="logo-stacked" aria-label={label}>
-      <Image className="on-dark" src="/logo-stacked.png" alt="AI Growth Technologies" width={480} height={547} />
-      <Image className="on-light" src="/logo-stacked-dark.png" alt="AI Growth Technologies" width={480} height={547} />
+      <Image className="on-dark" src="/logo-stacked.png" alt="AI Growth Technologies" width={480} height={542} />
+      <Image className="on-light" src="/logo-stacked-dark.png" alt="AI Growth Technologies" width={480} height={542} />
     </Link>
   );
 }