From 8c5fbc4668178303828f50e59def162e61834dce Mon Sep 17 00:00:00 2001
From: Jon <git@jonstarkey.co.uk>
Date: Mon, 15 Jun 2026 17:17:07 +0100
Subject: [PATCH] Restructure hero: SVG full-width block, copy flows below
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removes the absolute-positioned overlay layout. The drone AI vision SVG now sits as a full-width block element sized by CSS height (clamp 360px–640px), with the Build/Share/Deploy copy in normal document flow beneath it.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 index.html | 38 ++++++++++++++++++--------------------
 style.css  | 15 +++++++++------
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index 7135ab4..a77b547 100644
--- a/index.html
+++ b/index.html
@@ -103,7 +103,7 @@
 
     <!-- AI vision drone graphic (z-index 1) -->
     <div class="drone-vision-bg" aria-hidden="true">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1800 860" preserveAspectRatio="xMidYMid slice" style="width:100%;height:100%;display:block;">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1800 860" preserveAspectRatio="xMidYMid slice">
         <defs>
           <radialGradient id="rotorG" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#0A0A0A" stop-opacity="0.16"/><stop offset="60%" stop-color="#0A0A0A" stop-opacity="0.06"/><stop offset="100%" stop-color="#0A0A0A" stop-opacity="0"/></radialGradient>
           <linearGradient id="armG" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#3a3a3a"/><stop offset="100%" stop-color="#101010"/></linearGradient>
@@ -180,25 +180,23 @@
       </svg>
     </div>
 
-    <!-- Copy: left-aligned, z-index 3 -->
-    <div style="position:relative;z-index:3;flex:1;padding-top:clamp(72px,10vw,130px);">
-      <div class="container">
-        <div style="max-width:540px;">
-          <div class="eyebrow">Drone development kits · Open source</div>
-          <h1 style="font-size:clamp(46px,5.6vw,88px);letter-spacing:-0.045em;line-height:0.9;margin:18px 0 0;text-align:left;">Build.<br>Share.<br>Deploy.</h1>
-          <p style="font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:var(--ink-2);max-width:480px;margin:24px 0 0;">Hardware devkits, open-source drone software, and integrated consultancy for domestic and industrial solutions.</p>
-          <div class="hero-ctas" style="justify-content:flex-start;margin-top:32px;">
-            <a href="devkits.html" class="btn btn-dark btn-lg">Buy a devkit · from £1,999</a>
-            <a href="videos.html" class="btn btn-outline btn-lg">
-              <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
-              Watch videos
-            </a>
-          </div>
-          <div class="hero-links" style="justify-content:flex-start;">
-            <a href="opensource.html">Docs ↗</a>
-            <a href="opensource.html">GitHub ↗</a>
-            <a href="https://www.youtube.com/@JonStarkeyfilms">YouTube ↗</a>
-          </div>
+    <!-- Copy below the vision graphic -->
+    <div style="position:relative;z-index:3;">
+      <div class="container" style="padding-top:48px;padding-bottom:52px;">
+        <div class="eyebrow">Drone development kits · Open source</div>
+        <h1 style="margin-top:14px;">Build.<br>Share.<br>Deploy.</h1>
+        <p style="max-width:520px;margin-top:20px;">Hardware devkits, open-source drone software, and integrated consultancy for domestic and industrial solutions.</p>
+        <div class="hero-ctas">
+          <a href="devkits.html" class="btn btn-dark btn-lg">Buy a devkit · from £1,999</a>
+          <a href="videos.html" class="btn btn-outline btn-lg">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
+            Watch videos
+          </a>
+        </div>
+        <div class="hero-links">
+          <a href="opensource.html">Docs ↗</a>
+          <a href="opensource.html">GitHub ↗</a>
+          <a href="https://www.youtube.com/@JonStarkeyfilms">YouTube ↗</a>
         </div>
       </div>
     </div>
diff --git a/style.css b/style.css
index f97b15b..52a96a3 100644
--- a/style.css
+++ b/style.css
@@ -235,9 +235,6 @@ img { display: block; max-width: 100%; }
 .hero {
   position: relative;
   overflow: hidden;
-  min-height: clamp(640px, 90vh, 940px);
-  display: flex;
-  flex-direction: column;
 }
 
 .hero-bg {
@@ -247,10 +244,16 @@ img { display: block; max-width: 100%; }
 }
 
 .drone-vision-bg {
-  position: absolute;
-  inset: 0;
+  position: relative;
   z-index: 1;
-  pointer-events: none;
+  width: 100%;
+  line-height: 0;
+}
+
+.drone-vision-bg svg {
+  display: block;
+  width: 100%;
+  height: clamp(360px, 48vw, 640px);
 }
 
 html.dark .drone-vision-bg svg { filter: invert(1); }