fix-typo (#18)

add SEO adjustments, apply html segments

Reviewed-on: #18
Co-authored-by: Michael DiLeo <michael_dileo@proton.me>
Co-committed-by: Michael DiLeo <michael_dileo@proton.me>

public/site-styles/style.css

@@ -391,6 +391,79 @@
     border: 0;
 }
 
+
+/* Main Navigation Structure */
+.main-nav {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--pico-spacing) * 0.5);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.main-nav li {
+    margin: 0;
+}
+
+.main-nav a[aria-current="page"] {
+    font-weight: bold;
+    color: var(--pico-primary);
+}
+
+/* Services Navigation */
+.services-nav {
+    margin-top: calc(var(--pico-spacing) * 0.5);
+    padding-top: calc(var(--pico-spacing) * 0.5);
+    border-top: 1px solid var(--pico-muted-border-color);
+}
+
+.services-nav h2 {
+    margin: 0 0 calc(var(--pico-spacing) * 0.5) 0;
+    font-size: 1em;
+    color: var(--pico-muted-color);
+}
+
+/* Navigation Layout */
+header nav {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--pico-spacing) * 0.5);
+}
+
+/* Desktop navigation layout */
+@media (min-width: 768px) {
+    header nav {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: flex-start;
+        flex-wrap: wrap;
+    }
+    
+    .main-nav {
+        order: 1;
+        flex: 0 0 auto;
+    }
+    
+    .services-nav {
+        order: 2;
+        margin-top: 0;
+        padding-top: 0;
+        border-top: none;
+        flex: 1 1 100%;
+        margin-top: calc(var(--pico-spacing) * 0.5);
+    }
+}
+
+/* Mobile navigation layout */
+@media (max-width: 767px) {
+    .services-nav {
+        margin-top: calc(var(--pico-spacing) * 0.5);
+        padding-top: calc(var(--pico-spacing) * 0.5);
+        border-top: 1px solid var(--pico-muted-border-color);
+    }
+}
+
 /* Responsive service links */
 @media (max-width: 768px) {
     .service-links {