Fix logo scaling and positioning across screen sizes

- Enhanced responsive breakpoints for 5 screen size categories
- Fixed logo centering with flexbox at multiple container levels
- Added proper CSS centering for Three.js canvas element
- Improved logo container positioning and aspect ratio handling
- Logo now scales from 4rem (mobile) to 16rem (desktop) appropriately

🤖 Generated with [Claude Code](https://claude.ai/code)

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

modules/teaser/app/globals.css

@@ -202,7 +202,7 @@ body {
 
 /* CHORUS Typography Classes */
 .text-h1 {
-  font-size: 4.768rem;
+  font-size: 4.268rem;
   line-height: 6.96rem;
   font-weight: 100;
   font-family: 'Exo', 'Inter Tight', sans-serif;
@@ -323,4 +323,59 @@ body {
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
   }
+}
+
+/* Logo scaling utilities for better responsive design */
+.logo-container {
+  width: 100%;
+  height: 100%;
+  aspect-ratio: 1 / 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* Enhanced responsive logo sizes */
+.responsive-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+@media (max-width: 320px) {
+  .responsive-logo {
+    width: 4rem;
+    height: 4rem;
+  }
+}
+
+@media (min-width: 321px) and (max-width: 640px) {
+  .responsive-logo {
+    width: 6rem;
+    height: 6rem;
+  }
+}
+
+@media (min-width: 641px) and (max-width: 768px) {
+  .responsive-logo {
+    width: 8rem;
+    height: 8rem;
+  }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  .responsive-logo {
+    width: 12rem;
+    height: 12rem;
+  }
+}
+
+@media (min-width: 1025px) {
+  .responsive-logo {
+    width: 16rem;
+    height: 16rem;
+  }
 }