change

src/components/Header.astro

@@ -9,7 +9,6 @@ const home = localePath(lang, '/');
 const items = [
   { href: `${home}#capabilities`, label: ui.nav.capabilities },
   { href: localePath(lang, '/cipherverifier'), label: ui.nav.product },
-  { href: `${home}#sectors`, label: ui.nav.sectors },
   { href: localePath(lang, '/insights'), label: ui.nav.insights },
   { href: localePath(lang, '/team'), label: ui.nav.team },
 ];
@@ -60,13 +59,20 @@ const isCurrent = (href: string) => href.split('#')[0] === path && !href.include
     padding-block: var(--space-3);
     transition:
       max-width var(--dur-slow) var(--ease),
-      padding-inline var(--dur-slow) var(--ease);
+      padding var(--dur-slow) var(--ease);
   }
-  /* Once the page scrolls, the bar widens from the content column to the viewport. */
+  /* Once the page scrolls, the bar docks: full width, flush to the top, and as tall as the header
+     so nothing below moves. Its outer crosses would sit off-screen (and the side ones would make
+     the page scroll sideways), so they go, with the top and side borders; the bottom line stays. */
   .header[data-scrolled] .header__shell {
     max-width: 100%;
-    padding-inline: var(--header-inset-scrolled);
+    padding: 0;
   }
+  .header[data-scrolled] .header__bar {
+    min-height: var(--header-height);
+    border-width: 0 0 var(--line);
+  }
+  .header[data-scrolled] .header__bar::after { content: none; }
   .header__bar {
     pointer-events: auto;
     isolation: isolate;
@@ -80,7 +86,10 @@ const isCurrent = (href: string) => href.split('#')[0] === path && !href.include
     line-height: 1;
     letter-spacing: var(--track-caps);
     text-transform: uppercase;
-    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
+    transition:
+      color var(--dur) var(--ease),
+      border-color var(--dur) var(--ease),
+      min-height var(--dur-slow) var(--ease);
   }
   /* The glass sits on a pseudo-element rather than the bar itself: a backdrop-filter on the bar
      would make it a backdrop root, and the mobile panel inside it could then blur nothing. */
@@ -183,6 +192,12 @@ const isCurrent = (href: string) => href.split('#')[0] === path && !href.include
     .header__nav.hud-frame { border: var(--line) solid var(--frame-color); }
     .header__nav.hud-frame::after { content: ''; }
     .header__nav[data-open] { display: block; }
+    /* Docked: the panel hangs straight off the bar's bottom line, edge to edge. */
+    .header[data-scrolled] .header__nav {
+      top: calc(100% + var(--line));
+      border-width: 0 0 var(--line);
+    }
+    .header[data-scrolled] .header__nav.hud-frame::after { content: none; }
     .header__list { flex-direction: column; }
     .header__list li { border-left: 0; }
     .header__list li + li { border-top: var(--line) solid var(--frame-color); }