diff --git a/src/pages/home.mjs b/src/pages/home.mjs
index 0b3ee91..3e24711 100644
--- a/src/pages/home.mjs
+++ b/src/pages/home.mjs
@@ -254,7 +254,7 @@ export default {
 </section>
 
 <section id="connect" aria-labelledby="connect-title">
-  <div class="talk" aria-hidden="true"><img class="ribbon" alt="" src="/assets/o2/ribbon.webp" width="1600" height="900" loading="lazy"><h2>Let’s talk</h2></div>
+  <div class="talk" aria-hidden="true"><img class="ribbon" alt="" src="/assets/o2/ribbon-hd.webp" width="3200" height="1800" loading="lazy"><h2>Let’s talk</h2></div>
   <div class="cbody">
     ${eyebrow('LET’S CONNECT')}
     <h3 id="connect-title" class="grad">Interesting Things Usually Start With a Conversation.</h3>
diff --git a/static/assets/home.css b/static/assets/home.css
index ef2f105..192f115 100644
--- a/static/assets/home.css
+++ b/static/assets/home.css
@@ -245,7 +245,7 @@
 /* ---------- connect ---------- */
 .o2 > #connect { padding: clamp(3rem, 8vh, 5rem) 0 0; overflow: hidden; }
 .talk { position: relative; width: 100%; height: clamp(14rem, 38vw, 34rem); display: flex; justify-content: center; align-items: center; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); }
-.ribbon { position: absolute; left: 50%; top: 50%; width: max(165%, 1900px); max-width: none; height: auto; transform: translate(-50%, -50%); animation: rib 14s ease-in-out infinite alternate; }
+.ribbon { position: absolute; left: 50%; top: 50%; width: max(130%, 1500px); max-width: none; height: auto; transform: translate(-50%, -50%); animation: rib 14s ease-in-out infinite alternate; filter: blur(.35px) saturate(1.08); image-rendering: auto; }
 @keyframes rib { from { transform: translate(-52%, -48%) rotate(-3deg) scale(1); } to { transform: translate(-48%, -52%) rotate(3deg) scale(1.06); } }
 .talk h2 { position: relative; z-index: 2; font-weight: 600; font-size: clamp(5rem, 23vw, 22rem); line-height: .9; letter-spacing: -0.07em; color: #fff; mix-blend-mode: difference; white-space: nowrap; }
 :root[data-theme="light"] .talk h2 { mix-blend-mode: normal; color: #0b1220; text-shadow: 0 2px 30px rgba(255, 255, 255, .6); }
diff --git a/static/assets/o2/ribbon-hd.webp b/static/assets/o2/ribbon-hd.webp
new file mode 100644
index 0000000..30ce573
Binary files /dev/null and b/static/assets/o2/ribbon-hd.webp differ
diff --git a/static/assets/o2/ribbon.webp b/static/assets/o2/ribbon.webp
deleted file mode 100644
index e20b850..0000000
Binary files a/static/assets/o2/ribbon.webp and /dev/null differ
diff --git a/static/assets/styles.css b/static/assets/styles.css
index d5ffb0c..b060af5 100644
--- a/static/assets/styles.css
+++ b/static/assets/styles.css
@@ -857,6 +857,7 @@ h1, h2, h3, h4 { font-weight: 600; }
 .btn-light:hover { background: #fff; box-shadow: 0 0 36px rgba(159, 230, 255, .35); }
 .btn-sm { min-height: 40px; padding: 5px 5px 5px 16px; font-size: 11.5px; }
 .btn-sm .go { width: 28px; height: 28px; }
+.btn-ghost.btn-sm, .btn-ghost-light.btn-sm { padding: 5px 18px; justify-content: center; }
 .text-link { color: var(--sky); }
 
 /* Glass cards */