Align with AM stack SOPs: required files, nginx hardening, mobile CSS

- Add robots.txt, sitemap.xml (16 pages), 404.html, 500.html per SOP
- nginx: allow robots.txt/sitemap.xml explicitly, fix error_page to 404.html, deny _template.html, remove txt from deny list, fix API proxy comment
- Convert residential.png to residential.webp per image SOP
- components.css: mobile nav breakpoint 768→1023px, 360px ultra-narrow query, overflow-x:clip, inline grid collapse overrides
- blog/index.html: placeholder blog listing page with 3 article cards

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

assets/css/components.css

@@ -1236,11 +1236,15 @@
   .contact-layout { grid-template-columns: 1fr; }
 }
 
-@media (max-width: 768px) {
+/* Header: switch to mobile menu earlier — desktop nav with logo + 6 links
+   + phone + CTA needs ~1024px to fit without overflowing. */
+@media (max-width: 1023px) {
   .header-nav { display: none; }
   .header-phone { display: none; }
   .header-menu-btn { display: flex; }
+}
 
+@media (max-width: 768px) {
   .hero-content { padding-block: var(--space-16); }
 
   .process-steps { grid-template-columns: 1fr; }
@@ -1264,6 +1268,16 @@
   .header-logo-sub { display: none; }
 }
 
+/* Ultra-narrow phones (iPhone SE portrait, 320px) — tighten header */
+@media (max-width: 360px) {
+  .header-cta .btn--sm {
+    padding-inline: 0.75rem;
+    font-size: 0.75rem;
+  }
+  .header-logo img { height: 36px !important; }
+  .container { padding-inline: 0.875rem; }
+}
+
 /* --- Premium Elevation Pass ----------------------------- */
 
 /* Hero: refined layout, larger stat section */
@@ -1651,3 +1665,132 @@
   gap: var(--space-4);
   align-items: flex-start;
 }
+
+/* ============================================================
+   Mobile responsive overrides — inline grids must collapse
+   to single column on narrow viewports. Inline styles win over
+   CSS unless we use !important inside media queries.
+   ============================================================ */
+
+/* Prevent off-screen positioned elements (mobile nav panel, etc.)
+   from creating horizontal scroll on the document. */
+html, body {
+  overflow-x: clip;
+  max-width: 100%;
+}
+
+@media (max-width: 900px) {
+  /* Any inline 2-col grid pattern → single column */
+  [style*="grid-template-columns:1fr 1fr"],
+  [style*="grid-template-columns: 1fr 1fr"],
+  [style*="grid-template-columns:repeat(2,1fr)"],
+  [style*="grid-template-columns: repeat(2,1fr)"],
+  [style*="grid-template-columns:repeat(2, 1fr)"],
+  [style*="grid-template-columns: repeat(2, 1fr)"],
+  [style*="grid-template-columns:5fr 7fr"],
+  [style*="grid-template-columns: 5fr 7fr"] {
+    grid-template-columns: 1fr !important;
+    gap: 2rem !important;
+  }
+
+  /* Services 2x2 grid → single column */
+  .services-grid-2x2 {
+    grid-template-columns: 1fr !important;
+  }
+
+  /* Auto grids should stack tighter */
+  .grid--auto-3,
+  .grid--auto-4 {
+    grid-template-columns: 1fr !important;
+    gap: 1.5rem !important;
+  }
+
+  /* Order overrides — when 2-col uses order:1/2 to flip image/content,
+     reset on mobile so content always reads top-to-bottom */
+  [style*="order:1"],
+  [style*="order: 1"] {
+    order: 0 !important;
+  }
+  [style*="order:2"],
+  [style*="order: 2"] {
+    order: 0 !important;
+  }
+
+  /* Form rows stack */
+  .form-grid--2 {
+    grid-template-columns: 1fr !important;
+  }
+
+  /* Hero sub-stats stack with proper spacing */
+  .hero-trust {
+    flex-direction: column !important;
+    gap: 1.5rem !important;
+    align-items: flex-start !important;
+  }
+
+  /* Page hero padding tighten */
+  .page-hero {
+    padding-block: 4rem 3rem;
+  }
+
+  /* Section padding tighten */
+  .section {
+    padding-block: 3.5rem;
+  }
+
+  /* CTA strip vertical layout */
+  .cta-group {
+    flex-direction: column !important;
+    align-items: stretch !important;
+  }
+  .cta-group .btn {
+    width: 100%;
+  }
+
+  /* Form/contact layout — prevent intrinsic input width from blowing out
+     the grid track. Without min-width:0, <select> and <input> defaults push
+     the parent column wider than the viewport, causing horizontal scroll. */
+  .contact-layout { min-width: 0; }
+  .contact-form-wrap,
+  .contact-info-list { min-width: 0; max-width: 100%; }
+  .form-grid,
+  .form-grid--2 { min-width: 0; }
+  .form-field { min-width: 0; }
+  .form-field input,
+  .form-field textarea,
+  .form-field select {
+    min-width: 0;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+}
+
+@media (max-width: 600px) {
+  /* Tighten inline grid gaps further on phones */
+  [style*="grid-template-columns:1fr 1fr"],
+  [style*="grid-template-columns:repeat(2,1fr)"],
+  [style*="grid-template-columns: 1fr 1fr"],
+  [style*="grid-template-columns: repeat(2,1fr)"] {
+    gap: 1.5rem !important;
+  }
+
+  /* Auto-3 grid items single column */
+  .grid--auto-3 { gap: 1rem !important; }
+
+  /* Container side padding tighter */
+  .container {
+    padding-inline: 1rem;
+  }
+
+  /* Reduce all heading sizes a touch */
+  h1 { font-size: clamp(1.875rem, 8vw, 2.5rem) !important; }
+  h2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
+
+  /* Page hero text tighter */
+  .page-hero h1 {
+    font-size: clamp(1.875rem, 7vw, 2.25rem) !important;
+  }
+  .lead {
+    font-size: 1rem;
+  }
+}