Use new brand assets and add mascot GIF to hero

Replace header/footer logos and favicons with the PostcardMojo brand
asset set, fix logo sizing, and add an optimized mascot GIF under the
hero postcard.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

app/views/Home/landing.asp

@@ -33,7 +33,7 @@ Response.CodePage = 65001
       "@id": "https://postcardmojo.com/#organization",
       "name": "PostcardMojo",
       "url": "https://postcardmojo.com/",
-      "logo": "https://postcardmojo.com/images/logos/png/logo_full_large.png"
+      "logo": "https://postcardmojo.com/images/PostcardMojo_Brand_Assets/PostcardMojo_Full_Logo_1000.png"
     },
     {
       "@type": "WebSite",
@@ -92,7 +92,9 @@ Response.CodePage = 65001
   ]
 }
   </script>
-  <link rel="icon" type="image/jpeg" href="/images/logos/sharp/jpg/icon_64.jpg">
+  <link rel="icon" href="/images/PostcardMojo_Brand_Assets/PostcardMojo_Favicon.ico" sizes="any">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/PostcardMojo_Brand_Assets/PostcardMojo_Favicon_32.png">
+  <link rel="apple-touch-icon" href="/images/PostcardMojo_Brand_Assets/PostcardMojo_Apple_Touch_180.png">
   <link rel="preload" as="image" type="image/webp" href="/images/hero-postcard-1200.webp" imagesrcset="/images/hero-postcard-600.webp 600w, /images/hero-postcard-1200.webp 1200w" imagesizes="(max-width: 700px) 92vw, 640px">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -119,7 +121,7 @@ Response.CodePage = 65001
   <header class="site-header">
     <div class="shell nav-shell">
       <a class="brand" href="/" aria-label="PostcardMojo home">
-        <img src="/images/logos/sharp/jpg/logo_full_small_b.jpg" width="217" height="73" alt="PostcardMojo">
+        <img src="/images/PostcardMojo_Brand_Assets/PostcardMojo_Full_Logo_500.png" width="88" height="88" alt="PostcardMojo">
       </a>
       <nav class="site-nav" id="site-nav" aria-label="Primary navigation">
         <a href="#how-it-works">How it works</a>
@@ -164,6 +166,7 @@ Response.CodePage = 65001
             </picture>
           </div>
           <div class="stage-note"><span><svg class="icon" aria-hidden="true" focusable="false"><use href="#i-arrow-up-right"/></svg></span> One card. Multiple businesses. A whole neighborhood of opportunity.</div>
+          <img class="hero-mascot" src="/images/gifs/mascot-good-idea.gif" width="400" height="225" alt="The PostcardMojo mascot with a good idea" loading="lazy" decoding="async">
         </div>
       </div>
     </section>
@@ -423,7 +426,7 @@ Response.CodePage = 65001
   <footer class="site-footer">
     <div class="shell footer-grid">
       <a class="footer-brand" href="#top" aria-label="Back to top">
-        <img src="/images/logos/sharp/jpg/logo_full_small_a.jpg" width="187" height="63" alt="PostcardMojo">
+        <img src="/images/PostcardMojo_Brand_Assets/PostcardMojo_Full_Logo_500.png" width="110" height="110" alt="PostcardMojo">
       </a>
       <p>Big local visibility, delivered.</p>
       <nav aria-label="Footer navigation">

app/views/Home/privacy.asp

@@ -11,7 +11,9 @@ Response.CodePage = 65001
   <meta name="description" content="How PostcardMojo collects and uses the information you send us. We do not sell or distribute your information.">
   <meta name="theme-color" content="#062f4f">
   <link rel="canonical" href="https://postcardmojo.com/privacy">
-  <link rel="icon" type="image/jpeg" href="/images/logos/sharp/jpg/icon_64.jpg">
+  <link rel="icon" href="/images/PostcardMojo_Brand_Assets/PostcardMojo_Favicon.ico" sizes="any">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/PostcardMojo_Brand_Assets/PostcardMojo_Favicon_32.png">
+  <link rel="apple-touch-icon" href="/images/PostcardMojo_Brand_Assets/PostcardMojo_Apple_Touch_180.png">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap" rel="stylesheet">
@@ -23,7 +25,7 @@ Response.CodePage = 65001
   <header class="site-header">
     <div class="shell nav-shell">
       <a class="brand" href="/" aria-label="PostcardMojo home">
-        <img src="/images/logos/sharp/jpg/logo_full_small_b.jpg" width="217" height="73" alt="PostcardMojo">
+        <img src="/images/PostcardMojo_Brand_Assets/PostcardMojo_Full_Logo_500.png" width="88" height="88" alt="PostcardMojo">
       </a>
       <nav class="site-nav" id="site-nav" aria-label="Primary navigation">
         <a href="/#how-it-works">How it works</a>
@@ -96,7 +98,7 @@ Response.CodePage = 65001
   <footer class="site-footer">
     <div class="shell footer-grid">
       <a class="footer-brand" href="/" aria-label="PostcardMojo home">
-        <img src="/images/logos/sharp/jpg/logo_full_small_a.jpg" width="187" height="63" alt="PostcardMojo">
+        <img src="/images/PostcardMojo_Brand_Assets/PostcardMojo_Full_Logo_500.png" width="110" height="110" alt="PostcardMojo">
       </a>
       <p>Big local visibility, delivered.</p>
       <nav aria-label="Footer navigation">

public/css/home.css

@@ -100,20 +100,25 @@ summary {
 }
 
 .nav-shell {
-  min-height: 82px;
+  min-height: 100px;
   display: grid;
-  grid-template-columns: minmax(180px, 235px) 1fr auto;
+  grid-template-columns: minmax(88px, 235px) 1fr auto;
   align-items: center;
   gap: 30px;
 }
 
 .brand {
   display: block;
-  width: 217px;
+  width: 88px;
 }
 
 .brand img,
-.footer-brand img,
+.footer-brand img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
 .postcard-feature img {
   width: auto;
   max-width: none;
@@ -800,6 +805,21 @@ summary {
   gap: clamp(60px, 9vw, 125px);
 }
 
+.hero-mascot {
+  display: block;
+  justify-self: start;
+  width: min(220px, 36%);
+  height: auto;
+  margin-top: 10px;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hero-mascot {
+    display: none;
+  }
+}
+
 .offer-card {
   position: relative;
   max-width: 485px;
@@ -1046,7 +1066,7 @@ summary {
 }
 
 .footer-brand {
-  width: 187px;
+  width: 110px;
 }
 
 .site-footer p {
@@ -1104,7 +1124,7 @@ summary {
   }
 
   .brand {
-    width: 217px;
+    width: 88px;
   }
 
   .site-nav {

public/images/PostcardMojo_Brand_Assets/README.txt

@@ -0,0 +1,12 @@
+POSTCARD MOJO BRAND ASSETS
+
+Transparent PNGs are ideal for websites, logos and email signatures. JPEG does not support transparency and is provided on white.
+
+Full Logo: Full_Logo_Transparent.png or Full_Logo_1000.png
+Email: Email_Logo_320.png (320 by 320 px)
+Mascot alone: Mascot_Only_Transparent.png
+Website Icons: Icon_192.png or Icon_512.png
+Apple touch: Apple_Touch_180.png
+Browser Favicon: Favicon.ico or Favicon_32.png
+
+NOTE: Background removal is automated from the supplied illustration. Because the original is raster with soft shadows, minor residual light fringes may be visible against very dark backgrounds.