integration: compact the wide primary navigation and keep fragment targets visible

Co-authored-by: Cursor <cursoragent@cursor.com>

src/app/app.html

@@ -31,7 +31,7 @@
                 >{{ item.label }}</a
               >
               @if (item.children; as children) {
-                <ul>
+                <ul class="submenu">
                   @for (child of children; track child.routeId) {
                     <li>
                       <a

src/app/app.scss

@@ -157,43 +157,74 @@
 }
 
 @include bp.respond-to(md) {
-  .site-header {
-    position: sticky;
-  }
-
   .nav-toggle {
     display: none;
   }
 
+  .site-header {
+    padding-block: var(--space-2);
+  }
+
   .site-header-inner {
-    grid-template-columns: auto 1fr auto auto;
+    grid-template-columns: 1fr auto auto;
     align-items: center;
+    gap: var(--space-2);
+    padding-block: var(--space-2);
   }
 
   .site-nav,
+  .nav-collapsed .site-nav {
+    display: flex;
+    grid-column: 1 / -1;
+    order: 5;
+  }
+
   .site-actions,
-  .nav-collapsed .site-nav,
   .nav-collapsed .site-actions {
     display: flex;
     grid-column: auto;
-  }
-
-  .site-toolbar {
     order: 3;
   }
 
-  .site-actions {
-    order: 4;
+  .site-toolbar {
+    order: 2;
   }
 
   .primary-nav {
     flex-direction: row;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    gap: var(--space-4);
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: var(--space-3);
   }
 
-  .primary-nav ul {
-    padding-inline-start: 0;
+  .primary-nav > li {
+    position: relative;
+  }
+
+  .primary-nav > li > a {
+    white-space: nowrap;
+  }
+
+  .primary-nav > li > .submenu {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    min-width: max-content;
+    z-index: 20;
+    padding: var(--space-2) var(--space-3);
+    gap: var(--space-1);
+    border-radius: var(--radius-md);
+    background: var(--surface-glass);
+    backdrop-filter: blur(var(--blur-glass));
+    -webkit-backdrop-filter: blur(var(--blur-glass));
+    border: 1px solid var(--surface-glass-border);
+    box-shadow: var(--shadow-soft);
+  }
+
+  .primary-nav > li:hover > .submenu,
+  .primary-nav > li:focus-within > .submenu {
+    display: flex;
+    flex-direction: column;
   }
 }

src/styles.scss

@@ -1,5 +1,3 @@
-@use 'breakpoints' as bp;
-
 /* Design tokens — the only place raw brand hex values are defined. */
 :root {
   /* Color — surface ramp built on #0a0a0f */
@@ -82,15 +80,8 @@
   --focus-ring-width: 2px;
   --focus-ring-offset: 3px;
 
-  /* Scroll offset: no sticky header below md, so phones need no extra inset. */
-  --header-offset: 0rem;
-}
-
-@include bp.respond-to(md) {
-  :root {
-    /* Matches the sticky header once the primary nav and service list sit in one row. */
-    --header-offset: 22rem;
-  }
+  /* Header is no longer sticky, so the inset is only breathing room. */
+  --header-offset: var(--space-4);
 }
 
 *,