diff --git a/style.css b/style.css
index 8a5f5f8..762b747 100644
--- a/style.css
+++ b/style.css
@@ -322,9 +322,9 @@ img {
 
 .hero-content {
   flex: 1;
-  padding-inline-end: var(--space-xl);
-  max-width: 650px;
-  margin-inline-start: auto;
+  max-width: 550px;
+  position: relative;
+  z-index: 2;
 }
 
 .hero-eyebrow {
@@ -363,12 +363,10 @@ img {
 }
 
 .hero-visual {
-  position: absolute;
-  inset-inline-end: 5%;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 35%;
-  max-width: 450px;
+  flex: 0 0 45%;
+  max-width: 500px;
+  position: relative;
+  z-index: 1;
 }
 
 .hero-image-container {
@@ -392,6 +390,15 @@ img {
   background: linear-gradient(to top, rgba(44, 24, 16, 0.3) 0%, transparent 50%);
 }
 
+/* Hero inner wrapper for proper two-column layout */
+.hero {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-inline: var(--space-xl);
+  gap: var(--space-xl);
+}
+
 /* Showcase Section */
 .showcase {
   padding: var(--space-xl) 0;
@@ -1129,15 +1136,25 @@ section {
 
 /* Responsive */
 @media (max-width: 1024px) {
-  .hero-visual {
-    display: none;
+  .hero {
+    flex-direction: column;
+    padding-inline: var(--space-md);
+    gap: var(--space-lg);
+    padding-top: 120px;
+    padding-bottom: var(--space-xl);
   }
   
   .hero-content {
     max-width: 100%;
     text-align: center;
-    padding-inline: var(--space-md);
-    margin-inline: auto;
+    order: 1;
+  }
+  
+  .hero-visual {
+    flex: 0 0 auto;
+    max-width: 350px;
+    width: 100%;
+    order: 2;
   }
   
   .hero-desc {
@@ -1312,6 +1329,10 @@ section {
   .popup-title {
     font-size: 1.5rem;
   }
+  
+  .hero-visual {
+    max-width: 280px;
+  }
 }
 
 @media (max-width: 480px) {
@@ -1345,4 +1366,8 @@ section {
     position: static;
     margin-bottom: var(--space-sm);
   }
-}
\ No newline at end of file
+  
+  .hero-visual {
+    max-width: 240px;
+  }
+}