diff --git a/styles.css b/styles.css
index a28d406..edc78c8 100644
--- a/styles.css
+++ b/styles.css
@@ -220,7 +220,8 @@ p {
 .logo-lockup {
   display: inline-flex;
   align-items: center;
-  gap: 1rem;
+  gap: 1.15rem;
+  max-width: 100%;
   margin-bottom: 1rem;
   padding: 0;
   border: 0;
@@ -234,14 +235,17 @@ p {
 
 .hero-logo-icon {
   display: block;
-  width: clamp(72px, 9vw, 112px);
+  flex: 0 0 auto;
+  width: clamp(104px, 12vw, 164px);
   height: auto;
 }
 
 .hero-logo {
   display: block;
-  width: clamp(300px, 42vw, 620px);
+  max-width: 100%;
+  width: clamp(200px, 24vw, 340px);
   height: auto;
+  mix-blend-mode: screen;
 }
 
 .hero-setup h1 {
@@ -514,7 +518,8 @@ textarea:focus {
 .brand-link-logo {
   display: inline-flex;
   align-items: center;
-  gap: 0.8rem;
+  gap: 0.9rem;
+  max-width: 100%;
   padding: 0;
   border: 0;
   background: transparent;
@@ -523,14 +528,17 @@ textarea:focus {
 
 .brand-link-icon {
   display: block;
-  width: 2.7rem;
+  flex: 0 0 auto;
+  width: 3.7rem;
   height: auto;
 }
 
 .brand-link-mark {
   display: block;
-  width: 10.4rem;
+  max-width: 100%;
+  width: 7.4rem;
   height: auto;
+  mix-blend-mode: screen;
 }
 
 .phase-title {