instagram cta changes, mail fixes

src/lib/components/InstagramSection.svelte

@@ -4,7 +4,7 @@
 
   export let instagram: HomePageContent['instagram'];
 
-  const dogCutoutSrc = '/images/smiling-dog-cutout.webp';
+  const dogCutoutSrc = '/images/smiling-dogs-instagram-cta.png';
 </script>
 
 <section id="instagram">
@@ -30,7 +30,7 @@
 <style>
   #instagram {
     overflow: visible;
-    padding-bottom: 102px;
+    padding-bottom: 40px;
   }
 
   .instagram-stage {
@@ -40,8 +40,10 @@
   }
 
   .instagram-panel {
-    padding: 42px 44px 112px;
-    border-radius: 32px;
+    position: relative;
+    min-height: 150px;
+    padding: 24px 320px 24px 44px;
+    border-radius: 24px;
     background:
       radial-gradient(circle at top left, rgba(255, 255, 255, 0.52), transparent 42%),
       linear-gradient(135deg, rgba(255, 252, 242, 0.98), rgba(255, 243, 198, 0.96));
@@ -52,75 +54,62 @@
   }
 
   .instagram-copy {
-    padding-top: 10px;
-    max-width: 620px;
-    margin: 0 auto;
-    text-align: center;
+    max-width: 580px;
+    margin: 0;
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
   }
 
   .instagram-kicker {
     display: inline-flex;
-    margin-bottom: 16px;
-    padding: 8px 14px;
+    margin-bottom: 10px;
+    padding: 6px 12px;
     border-radius: 999px;
     background: rgba(33, 48, 33, 0.08);
     color: var(--green);
-    font-size: 12px;
+    font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.08em;
     text-transform: uppercase;
   }
 
   .instagram-copy :global(h2) {
-    max-width: 12ch;
-    margin-left: auto;
-    margin-right: auto;
+    max-width: none;
+    margin: 0 0 6px;
+    font-size: 22px;
+    line-height: 1.2;
   }
 
   .instagram-blurb {
     max-width: 520px;
-    margin-bottom: 0;
-    margin-left: auto;
-    margin-right: auto;
+    margin: 0;
+    font-size: 14px;
   }
 
   .instagram-button {
-    margin-top: 28px;
+    margin-top: 14px;
+    position: relative;
+    z-index: 1;
   }
 
   .instagram-dog-wrap {
     position: absolute;
-    left: 50%;
-    bottom: -74px;
+    right: 24px;
+    bottom: 0;
     display: flex;
     align-items: flex-end;
     justify-content: center;
-    width: clamp(300px, 36vw, 430px);
+    width: 280px;
     pointer-events: none;
-    transform: translateX(-50%);
-    z-index: 1;
-  }
-
-  .instagram-dog-wrap::before {
-    content: '';
-    position: absolute;
-    left: 50%;
-    bottom: 54px;
-    width: 92%;
-    height: 56%;
-    border-radius: 999px 999px 40px 40px;
-    background:
-      radial-gradient(circle at 50% 35%, rgba(255, 244, 194, 0.95), rgba(255, 224, 122, 0.88));
-    transform: translateX(-50%);
-    filter: blur(2px);
-    z-index: -1;
+    z-index: 0;
   }
 
   .instagram-dog {
     display: block;
     width: 100%;
     height: auto;
-    filter: drop-shadow(0 20px 28px rgba(33, 48, 33, 0.16));
   }
 
   @media (min-width: 1800px) {
@@ -131,24 +120,31 @@
 
   @media (max-width: 768px) {
     #instagram {
-      padding-bottom: 76px;
+      padding-bottom: 120px;
     }
 
     .instagram-panel {
-      padding: 30px 24px 120px;
+      padding: 30px 24px 180px;
       border-radius: 28px;
+      min-height: 0;
     }
 
     .instagram-copy {
       max-width: none;
+      margin: 0 auto;
+      text-align: center;
+      align-items: center;
     }
 
     .instagram-copy :global(h2) {
       max-width: none;
+      font-size: inherit;
+      line-height: inherit;
     }
 
     .instagram-blurb {
       max-width: none;
+      font-size: inherit;
       margin-left: auto;
       margin-right: auto;
     }
@@ -160,17 +156,11 @@
     .instagram-dog-wrap {
       left: 50%;
       right: auto;
-      bottom: -10px;
+      bottom: -80px;
       width: min(260px, calc(100% - 40px));
       transform: translateX(-50%);
     }
 
-    .instagram-dog-wrap::before {
-      width: 86%;
-      height: 52%;
-      bottom: 8px;
-    }
-
     .instagram-dog {
       width: 100%;
     }