diff --git a/OVERHAUL_PLAN.md b/OVERHAUL_PLAN.md
index a86b329..c034ac4 100644
--- a/OVERHAUL_PLAN.md
+++ b/OVERHAUL_PLAN.md
@@ -860,12 +860,14 @@ Goals:
 - Port existing business content into React components.
 - Replace hash routing with React Router.
 - Move repeated content into data files.
+- Remove legacy `styles.css` file.
 
 Result:
 
 - Site content exists in the new React app.
 - Routes are clean and shareable.
 - Structure is maintainable.
+- Old global stylesheet removed.
 
 ---
 
diff --git a/README.md b/README.md
index 1b8477d..944c171 100644
--- a/README.md
+++ b/README.md
@@ -88,6 +88,49 @@ Primary structure:
 /support
 ```
 
+## Overhaul Phases
+
+Version numbers correlate directly to the active phase:
+
+- **Phase 1 — Stack Scaffold**: `0.1.x`
+  - Vite + React app foundation
+  - Tailwind CSS setup
+  - shadcn/ui-style primitives
+  - React Router
+  - Express backend
+  - better-sqlite3 database
+  - Initial API health/contact/support paths
+
+- **Phase 2 — Layout Rebuild**: `0.2.x`
+  - App shell: Header, Footer, layout wrapper, mobile nav
+  - Route pages fully built and navigable
+  - Existing business content ported into React
+  - Repeated service/industry content moved into data files
+  - Static hash routing fully replaced by React Router
+
+- **Phase 3 — Visual Overhaul**: `0.3.x`
+  - Modern light-first business design
+  - Tailwind theme polish
+  - Typography, spacing, radius, shadows, and responsive rhythm
+  - Refined service/industry cards and CTA sections
+  - Mobile-first layout polish
+
+- **Phase 4 — Forms + Backend Hardening**: `0.4.x`
+  - Contact and support forms fully wired to Express
+  - SQLite persistence verified
+  - Validation and user feedback with Sonner
+  - Optional Zoho forwarding layer
+  - Backend/API hardening as needed
+
+- **Phase 5 — Verification + Release Readiness**: `0.5.x`
+  - Build/runtime verification
+  - Route and form testing
+  - Accessibility checks
+  - Documentation and release cleanup
+  - Final push to `dev` for the completed phase
+
+Patch versions increment for completed agent passes/checkpoints inside each phase. Example: `0.2.0`, then `0.2.1`, `0.2.2`, etc.
+
 ## Backend Goals
 
 Initial API endpoints:
@@ -105,6 +148,19 @@ Initial SQLite tables:
 
 Contact and support forms should submit through Express, save to SQLite, and show user feedback with Sonner.
 
+## Agent Plan
+
+The overhaul is handled through the agent pipeline below:
+
+1. **Scarlett** — design system, Tailwind/shadcn layout direction, responsive polish, accessibility review
+2. **Neo** — Vite/React implementation, Express API, SQLite/database work, build-system changes
+3. **Private Hudson** — security review for API routes, form handling, validation, data exposure, dependency risks, and backend hardening
+4. **Scarlett** — UI polish pass after implementation changes
+5. **Bishop** — build/runtime verification, route checks, documentation verification, version consistency
+6. **Ripley** — final local checks, commit, tag, and push to `dev`
+
+Agents do not touch git. Ripley owns all commits, tags, and pushes.
+
 ## Design Source of Truth
 
 See [OVERHAUL_PLAN.md](./OVERHAUL_PLAN.md) for the full rebuild plan and Scarlett's design implementation brief.
diff --git a/package.json b/package.json
index 8c26dc3..1691bc6 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "queuenorth-website",
   "private": true,
-  "version": "0.1.1",
+  "version": "0.2.0",
   "type": "module",
   "scripts": {
     "dev": "concurrently \"vite\" \"node server/index.js\"",
diff --git a/styles.css b/styles.css
deleted file mode 100644
index 6b58460..0000000
--- a/styles.css
+++ /dev/null
@@ -1,2629 +0,0 @@
-/* 
-  Queue North Technologies - Global Styles
-  Color Palette:
-    Background: #07293A (deep navy)
-    Text:       #C7BEA1 (beige)
-    Accent:     #3BA3FF (button / link highlight)
-*/
-
-/* =========================
-   CSS Variables
-========================= */
-:root {
-  --background: #07293A;
-  --background-alt: #0B3246;
-  --background-panel: #0F3A51;
-  --background-panel-soft: #0D364B;
-
-  --text: #C7BEA1;
-  --text-muted: #9E9476;
-
-  --border-subtle: rgba(199, 190, 161, 0.25);
-
-  --accent: #3BA3FF;
-  --accent-hover: #1990ff;
-}
-
-/* =========================
-   Reset / Base
-========================= */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html, body {
-  height: 100%;
-}
-
-body {
-  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  color: var(--text);
-  background: radial-gradient(circle at top, #0E3A52 0%, #07293A 45%, #041720 100%);
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-}
-
-/* Global element defaults */
-img {
-  max-width: 100%;
-  display: block;
-}
-
-a {
-  color: var(--accent);
-  text-decoration: none;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
-p, h1, h2, h3, h4, h5, h6, li, label {
-  color: var(--text);
-}
-
-/* =========================
-   Layout Helpers
-========================= */
-.container {
-  max-width: 1120px;
-  margin: 0 auto;
-  padding: 0 20px;
-}
-
-.section {
-  padding: 70px 0;
-  background: transparent;
-}
-
-.alt-section {
-  background: linear-gradient(135deg, #07293A 0%, #0B3246 40%, #07293A 100%);
-}
-
-.section h2 {
-  font-size: 32px;
-  margin-bottom: 16px;
-  letter-spacing: 0.03em;
-}
-
-.section-intro {
-  max-width: 1250px;
-  margin-bottom: 30px;
-  font-size: 21px;
-  color: var(--text-muted);
-}
-
-/* =========================
-   Header (compact + logo bleed)
-========================= */
-.site-header {
-  position: sticky;
-  top: 0;
-  z-index: 50;
-  background: rgba(4, 23, 32, 0.9);
-  backdrop-filter: blur(12px);
-  border-bottom: 1px solid rgba(59, 163, 255, 0.15);
-
-  height: 84px;
-  padding: 0 20px;
-
-  display: flex;
-  align-items: center;
-  justify-content: flex-end; /* nav stays right */
-}
-
-/* Logo does NOT take layout width (prevents nav wrapping) */
-.logo {
-  position: absolute;
-  left: 5px;
-  top: 125%;
-  transform: translateY(-50%);
-  z-index: 60;
-}
-
-.logo-link {
-  display: inline-flex;
-  align-items: center;
-}
-
-/* Desktop logo size + bleed */
-.logo-link img {
-  height: 300px;
-  width: auto;
-  transform: translateY(14px); /* bleed down */
-  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45));
-}
-
-/* Make room below so bleed doesn't collide */
-.app {
-  min-height: calc(100vh - 140px);
-  padding-top: 18px;
-}
-
-/* =========================
-   Nav (tab-like view switching)
-   - No layout shift underline
-========================= */
-.site-nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  flex-wrap: nowrap;      /* IMPORTANT: prevent wrap on desktop */
-  gap: 24px;
-
-  width: min(100%, 1240px);
-  margin-left: auto;
-  padding-left: 140px;    /* reserves space so nav doesn't collide with logo */
-}
-
-.site-nav a {
-  font-size: 16px;
-  color: var(--text-muted);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  white-space: nowrap;
-
-  position: relative;
-  padding: 6px 0;
-  transition: color 0.25s ease;
-}
-
-.site-nav a:hover {
-  color: var(--text);
-  text-decoration: none;
-}
-
-/* underline (hidden by default) */
-.site-nav a::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  bottom: -2px;
-  width: 100%;
-  height: 2px;
-  background: rgba(59, 163, 255, 0.65);
-  transform: scaleX(0);
-  transform-origin: left;
-  transition: transform 0.25s ease;
-}
-
-/* Active link */
-.site-nav a.active {
-  color: var(--text);
-  text-decoration: none;
-}
-
-.site-nav a.active::after {
-  transform: scaleX(1);
-}
-
-.site-nav a:hover::after {
-  transform: scaleX(1);
-}
-
-/* =========================
-   Mobile
-========================= */
-@media (max-width: 900px) {
-  .site-header {
-    height: 76px;
-    padding: 0 16px;
-  }
-
-  .logo {
-    left: 16px;
-  }
-
-  .logo-link img {
-    height: 56px;
-    transform: translateY(10px);
-  }
-
-  .app {
-    padding-top: 8px;
-  }
-
-  /* On mobile, allow wrap so links don't get microscopic */
-  .site-nav {
-    padding-left: 86px;
-    justify-content: flex-end;
-    flex-wrap: wrap;
-    gap: 12px 16px;
-    width: auto;
-  }
-}
-
-/* =========================
-   Hero
-========================= */
-.hero {
-  min-height: 70vh;
-  display: flex;
-  align-items: center;
-  background: radial-gradient(circle at top left, #0E3A52 0%, #07293A 40%, #020910 100%);
-  padding: 80px 0 90px;
-}
-
-.hero-inner {
-  max-width: 1360px;
-  margin: 0 auto;
-  padding: 0 20px;
-}
-
-.hero h1 {
-  font-size: 38px;
-  margin-bottom: 16px;
-  letter-spacing: 0.04em;
-}
-
-.hero p {
-  font-size: 18px;
-  max-width: 840px;
-  margin-bottom: 26px;
-  color: var(--text-muted);
-}
-
-/* Center the CTA under the copy (and no "View Services" now) */
-.hero-actions {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 22px;
-}
-
-.hero-trust {
-  display: flex;
-  flex-wrap: nowrap;       /* keep them on one row when possible */
-  gap: 10px;
-  font-size: 13px;
-  opacity: 0.92;
-}
-
-.hero-trust span {
-  border-radius: 999px;
-  border: 1px solid rgba(199, 190, 161, 0.35);
-  padding: 6px 13px;
-  background: rgba(11, 50, 70, 0.7);
-  white-space: nowrap;
-}
-
-/* =========================
-   Buttons
-========================= */
-.primary-btn {
-  background: var(--accent);
-  color: #031019;
-  border: none;
-  padding: 11px 24px;
-  border-radius: 999px;
-  cursor: pointer;
-  font-size: 15px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.primary-btn:hover {
-  background: var(--accent-hover);
-}
-
-.secondary-link {
-  font-size: 14px;
-  color: var(--text-muted);
-}
-
-/* =========================
-   Highlights (pain points)
-========================= */
-.highlights {
-  padding: 60px 0;
-  background: linear-gradient(180deg, #07293A 0%, #0B3246 60%, #07293A 100%);
-}
-
-.highlights h2 {
-  text-align: center;
-  margin-bottom: 30px;
-}
-
-.highlight-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 24px;
-}
-
-.highlight-card {
-  background: var(--background-panel);
-  padding: 24px;
-  border-radius: 10px;
-  box-shadow: 0 10px 30px rgba(3, 10, 17, 0.7);
-  border: 1px solid var(--border-subtle);
-}
-
-.highlight-card h3 {
-  margin-bottom: 10px;
-  color: var(--text);
-}
-
-.highlight-card p {
-  color: var(--text-muted);
-}
-
-/* =========================
-   Two-column layout
-========================= */
-.two-column {
-  display: grid;
-  grid-template-columns: 1.25fr 1fr;
-  gap: 40px;
-}
-
-/* =========================
-   Lists
-========================= */
-.bullet-list {
-  list-style: disc;
-  padding-left: 20px;
-  color: var(--text-muted);
-}
-
-.bullet-list li + li {
-  margin-top: 6px;
-}
-
-/* =========================
-   Cards grid (Services / Industries / etc.)
-========================= */
-.card-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 24px;
-}
-
-.card {
-  background: var(--background-panel-soft);
-  padding: 22px;
-  border-radius: 10px;
-  box-shadow: 0 8px 26px rgba(3, 10, 17, 0.7);
-  border: 1px solid var(--border-subtle);
-}
-
-/* =========================
-   Forms
-========================= */
-.contact-form {
-  background: var(--background-panel);
-  padding: 22px;
-  border-radius: 10px;
-  box-shadow: 0 10px 30px rgba(3, 10, 17, 0.9);
-  border: 1px solid var(--border-subtle);
-}
-
-.contact-form label {
-  display: block;
-  font-size: 13px;
-  margin-bottom: 10px;
-}
-
-.contact-form input,
-.contact-form textarea {
-  width: 100%;
-  margin-top: 4px;
-  padding: 9px 10px;
-  border-radius: 6px;
-  border: 1px solid rgba(199, 190, 161, 0.35);
-  font-size: 14px;
-  background: #031521;
-  color: var(--text);
-}
-
-.contact-form input::placeholder,
-.contact-form textarea::placeholder {
-  color: rgba(199, 190, 161, 0.6);
-}
-
-.contact-form input:focus,
-.contact-form textarea:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 1px rgba(59, 163, 255, 0.3);
-}
-
-.contact-form button {
-  margin-top: 10px;
-}
-
-.form-status {
-  margin-top: 8px;
-  font-size: 13px;
-  color: #5ee0b1;
-}
-
-
-/* =========================
-   Footer
-========================= */
-.site-footer {
-  background: #020910;
-  color: var(--text-muted);
-  padding: 28px 0 18px;
-  font-size: 13px;
-  border-top: 1px solid rgba(59, 163, 255, 0.15);
-}
-
-.footer-main {
-  display: grid;
-  grid-template-columns: minmax(220px, 1.35fr) minmax(220px, 1fr) minmax(220px, 1fr) minmax(220px, 1fr);
-  gap: 28px;
-  align-items: start;
-}
-
-.footer-brand,
-.footer-column {
-  min-width: 0;
-}
-
-.footer-heading {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--text);
-  margin-bottom: 10px;
-}
-
-.footer-brand p,
-.footer-phone a,
-.footer-link-list a,
-.footer-linkedin {
-  color: var(--text-muted);
-}
-
-.footer-brand p {
-  max-width: 280px;
-}
-
-.footer-phone,
-.footer-social {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.footer-phone a,
-.footer-linkedin {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.footer-phone a:hover,
-.footer-link-list a:hover,
-.footer-linkedin:hover {
-  color: var(--text);
-  text-decoration: none;
-}
-
-.footer-quick-links .footer-link-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px 18px;
-}
-
-.footer-link-list a {
-  display: inline-block;
-}
-
-.linkedin-badge {
-  width: 22px;
-  height: 22px;
-  border-radius: 5px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: #0a66c2;
-  color: #ffffff;
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 1;
-  flex: 0 0 22px;
-  text-transform: lowercase;
-}
-
-.footer-legal {
-  display: grid;
-  gap: 8px;
-  margin-top: 22px;
-  padding-top: 16px;
-  border-top: 1px solid rgba(199, 190, 161, 0.12);
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-
-/* =========================
-   Pages (tabbed views\)
-========================= */
-.page {
-  display: none;
-}
-
-.page.active {
-  display: block;
-}
-
-/* =========================
-   Split hero (content + image area)
-========================= */
-.hero-split-inner {
-  display: grid;
-  grid-template-columns: 0.7fr 1.3fr;
-  gap: 28px;
-  align-items: center;
-}
-
-.hero-media {
-  position: relative;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-/* NEW: unboxed hero image */
-.hero-photo {
-  width: 100%;
-  max-width: 980px;
-  height: auto;
-  border-radius: 14px; /* keep the soft rounding */
-  display: block;
-  filter: drop-shadow(0 16px 30px rgba(3, 10, 17, 0.55));
-}
-
-
-/* =========================
-   Hero image overlay: rotating phrases + lockup
-========================= */
-.hero-media-overlay {
-  position: absolute;
-  left: 18px;
-  right: 18px;
-  bottom: 0px;
-  pointer-events: none;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.hero-rotator-text,
-.hero-lockup-subtitle {
-  color: #ffffff;
-  font-size: 32px;
-  font-weight: 600;
-  text-align: center;
-  letter-spacing: 0.06em;
-  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
-}
-
-.hero-brand {
-  color: #1F8FB3;	
-  font-size: 36px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  margin-bottom: 6px;
-}
-
-.hero-rotator-text {
-  display: inline-block;
-}
-
-/* Visibility toggles driven by main.js */
-.is-hidden {
-  opacity: 0;
-  visibility: hidden;
-  transform: translateY(6px);
-}
-
-.is-visible {
-  opacity: 1;
-  visibility: visible;
-  transform: translateY(0);
-}
-
-.hero-rotator-text {
-  transition:
-    opacity var(--hero-fade-ms, 900ms) ease,
-    transform var(--hero-fade-ms, 900ms) ease,
-    visibility 0ms linear var(--hero-fade-ms, 900ms);
-}
-
-.hero-lockup {
-  transition:
-    opacity var(--hero-lockup-fade-ms, 1100ms) ease,
-    transform var(--hero-lockup-fade-ms, 1100ms) ease,
-    visibility 0ms linear var(--hero-lockup-fade-ms, 1100ms);
-}
-/* Shared media card (images / placeholders) */
-.media-card {
-  width: 100%;
-  max-width: 820px;
-  border-radius: 14px;
-  border: 1px solid var(--border-subtle);
-  background: rgba(15, 58, 81, 0.65);
-  box-shadow: 0 12px 34px rgba(3, 10, 17, 0.75);
-  overflow: hidden;
-}
-.about-meaning-image {
-  width: 100%;
-  height: auto;
-  display: block;
-  border-radius: 14px;
-  object-fit: cover;
-}
-.media-placeholder {
-  padding: 26px;
-  min-height: 300px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 6px;
-  color: var(--text-muted);
-  background:
-    radial-gradient(circle at 20% 20%, rgba(59,163,255,0.18), transparent 45%),
-    radial-gradient(circle at 80% 30%, rgba(199,190,161,0.10), transparent 40%),
-    rgba(3, 21, 33, 0.35);
-}
-
-.media-placeholder span {
-  color: var(--text);
-  font-weight: 400;
-  letter-spacing: 0.02em;
-}
-
-.media-placeholder small {
-  color: var(--text-muted);
-}
-
-/* =========================
-   Page-level hero
-========================= */
-.page-hero {
-  padding: 70px 0 30px;
-  background: transparent;
-}
-
-.page-hero-inner {
-  display: grid;
-  grid-template-columns: 0.9fr 1.1fr;
-  gap: 28px;
-  align-items: center;
-}
-
-/* =========================
-   ABOUT: full-bleed image canvas
-========================= */
-.about-canvas{
-  position: relative;
-  min-height: calc(100vh - 84px); /* header height */
-  padding: 130px 60px 80px;       /* space so we don’t fight the logo bleed */
-  background:
-    linear-gradient(rgba(4,23,32,0.20), rgba(4,23,32,0.20)),
-    url("assets/about-image.png");
-  background-size: 67%;
-  background-position: center 5%;
-  background-repeat: no-repeat;
-}
-
-.about-canvas::before{
-  content:"";
-  position:absolute;
-  inset:0;
-  pointer-events:none;
-
-  /* 1) vignette fade on edges + 2) warm paper tint */
-  background:
-    radial-gradient(
-      ellipse at center,
-      rgba(0,0,0,0) 55%,
-      rgba(0,0,0,0.35) 78%,
-      rgba(0,0,0,0.65) 100%
-    ),
-    linear-gradient(
-      rgba(210, 190, 140, 0.06),
-      rgba(210, 190, 140, 0.02)
-    );
-}
-
-#page-services{
-  position: relative;
-  min-height: calc(100vh - 84px); /* header height */
-  padding: 130px 60 80px;
-  background:
-    linear-gradient(rgba(4,23,32,0.25), rgba(4,23,32,0.25)),
-    url("assets/services-image.png");
-  background-size: 45%;
-  background-position: center 45%;
-  background-repeat: no-repeat;
-}
-
-#page-services::before{
-  content:"";
-  position:absolute;
-  inset:0;
-  pointer-events:none;
-  background:
-    radial-gradient(
-      ellipse at center,
-      rgba(0,0,0,0) 55%,
-      rgba(0,0,0,0.85) 78%,
-      rgba(0,0,0,0.45) 100%
-    );
-}
-
-/* Keep Services content above the background + vignette */
-#page-services > section{
-  position: relative;
-  z-index: 2;
-}
-
-/* Center the Services header at the top */
-#page-services .page-hero{
-  padding: 0 0 26px;
-  background: transparent;
-}
-
-#page-services .page-hero-inner{
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: 10px;
-}
-
-/* Pull the cards up so they sit over the image more tightly */
-#page-services .section{
-  padding-top: 0;
-}
-
-@media (max-width: 900px){
-  #page-services{
-    padding: 110px 0 50px;
-    min-height: auto;
-  }
-}
-
-.about-panel{
-  position: relative;
-  z-index: 2;
-}
-
-.about-canvas{
-  z-index: 0;
-}
-
-/* Panels */
-.about-panel{
-  max-width: 520px;
-  padding: 22px 22px;
-  border-radius: 14px;
-  background: rgba(11, 50, 70, 0.72); /* matches your alt-section blues */
-  border: 1px solid rgba(199, 190, 161, 0.25);
-  box-shadow: 0 12px 34px rgba(3, 10, 17, 0.75);
-  backdrop-filter: blur(10px);
-}
-
-.about-panel h2{
-  font-size: 24px;
-  margin-bottom: 10px;
-}
-
-.about-panel h3{
-  font-size: 24px;
-  margin-bottom: 10px;
-}
-
-.about-panel p{
-  color: var(--text-muted);
-  font-size: 18px;
-  font-weight: 300;
-  color: #C7BEA1;
-}
-
-.about-panel ul{
-  color: var(--text-muted);
-  font-size: 18px;
-  font-weight: 300;
-  color: #C7BEA1;
-}
-
-/* Placement: keep away from the compass area */
-.about-panel-left{
-  position: absolute;
-  top: 140px;
-  left: 80px;
-}
-
-.about-panel-right{
-  position: absolute;
-  top: 140px;
-  right: 80px;
-}
-
-.services-full-image {
-  width: 100%;
-  display: block;
-}
-
-.container h2{
-	font-size: 38px;
-	margin-bottom: 10px;
-	text-align: center;
-	padding-top: 15px;
-}
-
-/* Mobile: stack panels and stop absolute positioning */
-@media (max-width: 900px){
-  .about-canvas{
-    padding: 110px 18px 40px;
-    min-height: auto;
-  }
-
-  .about-panel-left,
-  .about-panel-right{
-    position: static;
-    max-width: 100%;
-    margin-bottom: 18px;
-  }
-}
-
-/* Make the 8x8 hero give more space to the logo */
-#page-8x8 .page-hero-inner {
-  grid-template-columns: 1fr 1fr;   /* 50/50 on the 8x8 tab */
-}
-
-.page-hero-media .media-card {
-  max-width: 820px;
-  margin-left: auto;
-}
-
-/* ===== 8x8 joint logo lockup (no box) ===== */
-.partner-lockup {
-  display: flex;
-  flex-direction: column;
-  align-items: center;     /* centers the logo block */
-  justify-content: center;
-  gap: 12px;
-  width: 100%;
-}
-
-.partner-lockup-img {
-  width: min(100%, 760px); /* make it bigger, but still safe */
-  height: auto;
-  display: block;
-  margin: 0 auto;
-
-  filter: drop-shadow(0 12px 22px rgba(0,0,0,0.4));
-}
-
-.partner-lockup-caption {
-  text-align: center;
-  width: 100%;
-  font-size: 14px;
-  color: var(--text-muted);
-  margin: 0;
-}
-
-@media (max-width: 900px) {
-  .partner-lockup-img {
-    width: min(100%, 520px);
-  }
-}
-
-.partner-logo {
-  max-width: 240px;
-  height: auto;
-  display: block;
-  margin: 22px auto 0;
-  padding: 10px 0;
-}
-
-.small-muted {
-  color: var(--text-muted);
-  font-size: 18px;
-  text-align: center;
-}
-
-/* =========================
-   Responsive
-========================= */
-@media (max-width: 900px) {
-  .site-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 10px;
-  }
-
-  /* keep logo readable, reduce bleed */
-  .logo-link img {
-    height: 64px;
-    transform: translateY(10px);
-  }
-
-  /* match the bleed to avoid overlap */
-  .app {
-    padding-top: 10px;
-  }
-
-  .site-nav {
-    width: 100%;
-    justify-content: flex-start;
-    gap: 10px 14px;
-  }
-
-  .hero {
-    padding: 60px 0 70px;
-  }
-
-  .hero h1 {
-    font-size: 30px;
-  }
-
-  /* allow pills to wrap on smaller screens */
-  .hero-trust {
-    flex-wrap: wrap;
-  }
-
-  .two-column {
-    grid-template-columns: 1fr;
-  }
-
-  .hero-split-inner,
-  .page-hero-inner {
-    grid-template-columns: 1fr;
-  }
-
-  .hero-media,
-  .page-hero-media {
-    justify-content: flex-start;
-  }
-
-  .hero-photo {
-    max-width: 100%;
-  }
-
-@media (max-width: 900px) {
-  .site-footer {
-    padding-top: 24px;
-  }
-
-  .footer-main {
-    grid-template-columns: 1fr;
-    gap: 20px;
-  }
-
-  .footer-brand p {
-    max-width: none;
-  }
-
-  .footer-quick-links .footer-link-list {
-    gap: 10px 16px;
-  }
-}
-}
-
-/* =========================================
-   Services + Industries: force 2x2 layout
-   (Only affects these two tabs)
-========================================= */
-
-/* Desktop / large screens: always 2 columns */
-#page-services .card-grid,
-#page-industries .card-grid {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  max-width: 980px;      /* keeps the 2-column layout looking intentional */
-  margin-left: auto;
-  margin-right: auto;
-}
-
-/* Make cards slightly “longer” (taller) so the layout feels balanced */
-#page-services .card,
-#page-industries .card {
-  min-height: 150px;     /* adjust to taste: try 160–200 */
-}
-
-/* Medium screens: still 2 columns until it truly needs to stack */
-@media (max-width: 900px) {
-  #page-services .card-grid,
-  #page-industries .card-grid {
-    grid-template-columns: 1fr; /* single column on mobile */
-    max-width: 720px;
-  }
-
-  #page-services .card,
-  #page-industries .card {
-    min-height: 0; /* let content define height on mobile */
-  }
-}
-
-/* =========================
-   SERVICES: make cards feel like About panels
-========================= */
-
-/* Spread the 2x2 grid out more (less cramped) */
-#page-services .card-grid {
-  max-width: 1120px;     /* wider than the current 980px */
-  gap: 200px 200px;        /* more breathing room */
-  padding: 10px 0 0;     /* tiny separation from the header */
-}
-
-/* Glassy / semi-transparent cards (match About panel vibe) */
-#page-services .card {
-  background: rgba(11, 50, 70, 0.72); /* same family as .about-panel */
-  border: 1px solid rgba(199, 190, 161, 0.25);
-  box-shadow: 0 12px 34px rgba(3, 10, 17, 0.75);
-  backdrop-filter: blur(10px);
-}
-
-/* Optional: slightly bigger headings for presence */
-#page-services .card h3 {
-  font-size: 20px;
-  margin-bottom: 10px;
-}
-
-/* Optional: make body copy a touch more readable on photo background */
-#page-services .card p {
-  color: rgba(199, 190, 161, 0.92);
-}
-
-/* Balance last service card when odd number of services */
-#page-services .card-grid > .card:last-child {
-  grid-column: 1 / -1;
-  width: min(100%, calc((100% - 28px) / 2));
-  justify-self: center;
-}
-
-@media (max-width: 900px) {
-  #page-services .card-grid > .card:last-child {
-    grid-column: auto;
-    width: 100%;
-  }
-}
-
-/* =========================
-   INDUSTRIES: images beside cards (images NOT inside cards)
-========================= */
-
-#page-industries .industries-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 58px;
-  max-width: 1620px;
-  margin: 0 auto;
-}
-
-/* Each item is a 2-column mini-layout: big image + card */
-#page-industries .industry-item {
-  display: grid;
-  gap: 18px;
-  align-items: stretch;
-}
-
-/* Big image, no container */
-#page-industries .industry-image {
-  width: 100%;
-  height: 100%;
-  min-height: 80px;
-  min-width: 80px;
-  object-fit: cover;
-  border-radius: 14px;
-  border: 1px solid rgba(199, 190, 161, 0.25);
-  box-shadow: 0 12px 30px rgba(3, 10, 17, 0.6);
-  background: transparent;
-}
-
-/* Card stays card (container for text only) */
-#page-industries .industry-card {
-  min-height: 80px;
-  min-width: 80px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-/* =========================
-   INDUSTRIES: center text inside cards + larger font
-========================= */
-
-#page-industries .industry-card {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;   /* vertical center */
-  align-items: center;       /* horizontal center */
-  text-align: center;        /* center text itself */
-  padding: 28px;             /* a little more breathing room */
-}
-
-/* Larger headline */
-#page-industries .industry-card h3 {
-  font-size: 24px;           /* was default ~20px */
-  margin-bottom: 12px;
-}
-
-/* Larger body copy */
-#page-industries .industry-card p {
-  font-size: 18px;
-  max-width: 520px;          /* keeps lines from stretching too wide */
-  color: rgba(199, 190, 161, 0.92);
-}
-
-/* Mobile: stack image above card */
-@media (max-width: 900px) {
-  #page-industries .industries-grid {
-    grid-template-columns: 1fr;
-  }
-
-  #page-industries .industry-item {
-    grid-template-columns: 1fr;
-  }
-
-  #page-industries .industry-image {
-    min-height: 220px;
-  }
-}
-/* =========================
-   INDUSTRIES: center page title + intro like Services
-========================= */
-
-#page-industries .page-hero {
-  padding: 30px 0 10px;   /* was 70px 0 30px */
-}
-
-#page-industries .page-hero-inner{
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: 10px;
-}
-
-#page-industries .section {
-  padding-top: 20px;      /* was 70px default */
-}
-
-#page-industries .section-intro{
-  margin-left: auto;
-  margin-right: auto;
-  text-align: center;
-  max-width: 650px; /* tweak if you want wider/narrower */
-}
-
-/* =========================
-   Contact Hero Background
-========================= */
-
-.contact-hero {
-  position: relative;
-  background: 
-    linear-gradient(
-      rgba(7, 41, 58, 0.85),
-      rgba(7, 41, 58, 0.85)
-    ),
-    url("assets/contact.png");
-
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-
-  padding: 120px 20px;
-  text-align: center;
-}
-
-/* Keeps content above overlay */
-.contact-hero > * {
-  position: relative;
-  z-index: 2;
-}
-.contact-hero h1 {
-  font-size: 3rem;
-  margin-bottom: 10px;
-}
-
-.contact-hero p {
-  max-width: 800px;
-  margin: 0 auto;
-  font-size: 1.2rem;
-  line-height: 1.6;
-}
-
-/* CONTACT hero background image */
-#page-contact .page-hero{
-  /* keep your existing spacing from the global .page-hero */
-  background:
-    linear-gradient(rgba(7,41,58,0.55), rgba(7,41,58,0.55)),
-    url("assets/contact.png");
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-/* center the hero text block */
-#page-contact .page-hero-inner{
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-}
-#page-contact .section-intro{
-  max-width: 900px;
-}
-/* Left column title */
-#page-contact h3{
-  font-size: 1.8rem;   /* increase heading size */
-  margin-bottom: 18px;
-}
-
-/* Bullet list text */
-#page-contact .bullet-list li{
-  font-size: 1.15rem;   /* larger body text */
-  line-height: 1.6;
-  margin-bottom: 8px;
-}
-#page-contact .contact-form label{
-  font-size: 1.05rem;
-  font-weight: 500;
-}
-#page-contact .contact-form label{
-  font-size: 1.05rem;
-  font-weight: 500;
-}
-#page-contact .contact-form button{
-  font-size: 1rem;
-  padding: 14px 28px;
-}
-/* =========================
-   SUPPORT page layout (scoped)
-========================= */
-
-#page-support .container{
-  max-width: 1320px;
-}
-
-#page-support .support-hero-inner{
-  display: grid;
-  grid-template-columns: 0.7fr 1.3fr;
-  gap: 200px;
-  align-items: center;
-}
-
-/* Left column: center the title + intro + form */
-#page-support .support-hero-left{
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: left;
-}
-
-/* Keep the intro readable and centered */
-#page-support .support-hero-left .section-intro{
-  max-width: 560px;
-}
-
-/* Right column image: not in a “card”, just a clean image */
-#page-support .support-hero-image{
-  width: 100%;
-  max-width: 1050px;     /* was 720px */
-  height: auto;
-  display: block;
-  border-radius: 18px;
-  box-shadow: 0 30px 65px rgba(0,0,0,0.55);
-}
-
-/* Push the photo farther right without shifting the left column */
-#page-support .support-hero-right{
-  justify-self: end;
-}
-
-#page-support .support-hero-image{
-  margin-left: auto;
-}
-
-
-#page-support .support-action-card{
-  width: 100%;
-  max-width: 420px;
-  padding: 28px 28px 34px;
-  background: var(--background-panel);
-  border: 1px solid var(--border-subtle);
-  border-radius: 10px;
-  box-shadow: 0 10px 30px rgba(3, 10, 17, 0.9);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 18px;
-  text-align: center;
-}
-
-#page-support .support-action-btn{
-  min-width: 180px;
-  text-align: center;
-  text-decoration: none;
-}
-
-#page-support .support-member-text{
-  margin: 2px 0 -4px;
-  color: var(--text-muted);
-  font-size: 16px;
-}
-
-#page-support .support-phone-block{
-  margin-top: 6px;
-  padding-top: 18px;
-  border-top: 1px solid rgba(199, 190, 161, 0.25);
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  color: var(--text-muted);
-  font-size: 16px;
-}
-
-#page-support .support-phone-block a{
-  color: var(--accent);
-  font-size: 20px;
-  font-weight: 700;
-  text-decoration: none;
-}
-
-#page-support .support-phone-block a:hover{
-  color: var(--accent-hover);
-}
-
-/* Make the support form thinner + taller */
-#page-support .support-form{
-  width: 100%;
-  max-width: 420px;          /* thinner */
-  padding: 28px 28px 34px;
-  text-align: left;
-}
-
-#page-support .support-form .primary-btn{
-  display: block;
-  margin: 24px auto 0;   /* centers only the button */
-}
-
-/* Larger form font like your Contact page improvements */
-#page-support .support-form label{
-  font-size: 16px;
-}
-
-#page-support .support-form input,
-#page-support .support-form textarea{
-  font-size: 16px;
-  padding: 12px 14px;
-}
-
-/* Taller textarea to make the card feel taller */
-#page-support .support-form textarea{
-  min-height: 190px;
-  resize: vertical;
-}
-
-/* Mobile stacking */
-@media (max-width: 980px){
-  #page-support .support-hero-inner{
-    grid-template-columns: 1fr;
-    gap: 28px;
-  }
-
-  #page-support .support-hero-right{
-    order: 2;
-  }
-
-  #page-support .support-hero-left{
-    order: 1;
-  }
-
-  #page-support .support-hero-image{
-    max-width: 720px;
-    margin: 0 auto;
-  }
-}
-#page-support .section-intro{
-	text-align: center;
-}
-
-/* =========================
-   Services Dropdown
-========================= */
-.nav-dropdown {
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding-bottom: 12px;
-  margin-bottom: -12px;
-}
-
-.nav-dropdown-toggle {
-  appearance: none;
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  font: inherit;
-  font-size: 16px;
-  color: var(--text-muted);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  white-space: nowrap;
-  position: relative;
-  padding: 6px 18px 6px 0;
-  transition: color 0.25s ease;
-}
-
-.nav-dropdown-toggle::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  bottom: -2px;
-  width: calc(100% - 12px);
-  height: 2px;
-  background: rgba(59, 163, 255, 0.65);
-  transform: scaleX(0);
-  transform-origin: left;
-  transition: transform 0.25s ease;
-}
-
-.nav-dropdown-toggle::after {
-  content: "";
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 12px;
-  height: 12px; /* gives us room for clean spacing */
-
-  background:
-    linear-gradient(currentColor 0 0) 0 0 / 100% 2px no-repeat,
-    linear-gradient(currentColor 0 0) 0 50% / 100% 2px no-repeat,
-    linear-gradient(currentColor 0 0) 0 100% / 100% 2px no-repeat;
-}
-
-.nav-dropdown:hover .nav-dropdown-toggle,
-.nav-dropdown:focus-within .nav-dropdown-toggle,
-.nav-dropdown.open .nav-dropdown-toggle,
-.nav-dropdown-toggle.active {
-  color: var(--text);
-}
-
-.nav-dropdown:hover .nav-dropdown-toggle::before,
-.nav-dropdown:focus-within .nav-dropdown-toggle::before,
-.nav-dropdown.open .nav-dropdown-toggle::before,
-.nav-dropdown-toggle.active::before {
-  transform: scaleX(1);
-}
-
-.nav-dropdown-menu {
-  position: absolute;
-  top: calc(100% - 2px);
-  left: 0;
-  min-width: 320px;
-  display: none;
-  flex-direction: column;
-  padding: 10px;
-  background: rgba(4, 23, 32, 0.97);
-  border: 1px solid rgba(59, 163, 255, 0.2);
-  border-radius: 14px;
-  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
-}
-
-.nav-dropdown:hover .nav-dropdown-menu,
-.nav-dropdown:focus-within .nav-dropdown-menu,
-.nav-dropdown.open .nav-dropdown-menu {
-  display: flex;
-}
-
-.nav-dropdown-menu a {
-  padding: 10px 12px;
-  border-radius: 10px;
-  color: var(--text);
-  font-size: 15px;
-  letter-spacing: 0.02em;
-  text-transform: none;
-}
-
-.nav-dropdown-menu a::after {
-  display: none;
-}
-
-.nav-dropdown-menu a:hover,
-.nav-dropdown-menu a.active {
-  color: var(--text);
-  text-decoration: none;
-  background: rgba(59, 163, 255, 0.12);
-}
-
-/* =========================
-   Service Detail Pages
-========================= */
-.service-page-section {
-  min-height: calc(100vh - 180px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 70px 0 90px;
-}
-
-.service-page-content {
-  text-align: center;
-}
-
-.service-page-title {
-  font-size: 36px;
-  margin-bottom: 28px;
-  letter-spacing: 0.03em;
-}
-
-.service-page-image {
-  width: min(100%, 860px);
-  max-height: 64vh;
-  margin: 0 auto 24px;
-  object-fit: contain;
-  border-radius: 18px;
-  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
-}
-
-.service-page-tagline {
-  max-width: 920px;
-  margin: 0 auto;
-  font-size: 26px;
-  color: var(--text-muted);
-}
-
-@media (max-width: 900px) {
-  .nav-dropdown {
-    width: 100%;
-    align-items: flex-start;
-  }
-
-  .nav-dropdown-toggle {
-    font-size: 15px;
-    padding-right: 16px;
-  }
-
-  .nav-dropdown-menu {
-    position: static;
-    min-width: 100%;
-    margin-top: 8px;
-  }
-
-  .service-page-title {
-    font-size: 30px;
-  }
-
-  .service-page-tagline {
-    font-size: 21px;
-  }
-}
-
-
-/* =========================
-   Mobile Navigation + Cleanup Overrides
-   Added to preserve desktop while fixing phone layout
-========================= */
-.mobile-nav-toggle {
-  display: none;
-  appearance: none;
-  background: transparent;
-  border: 1px solid rgba(59, 163, 255, 0.28);
-  border-radius: 10px;
-  width: 48px;
-  height: 44px;
-  padding: 0;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  flex-direction: column;
-  cursor: pointer;
-}
-
-.mobile-nav-toggle span {
-  display: block;
-  width: 20px;
-  height: 2px;
-  background: var(--text);
-  border-radius: 999px;
-}
-
-@media (max-width: 900px) {
-  .site-header {
-    height: auto;
-    min-height: 76px;
-    padding: 12px 16px;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    gap: 12px;
-  }
-
-  .logo {
-    position: static;
-    left: auto;
-    top: auto;
-    transform: none;
-    z-index: auto;
-  }
-
-  .logo-link img {
-    height: 52px;
-    width: auto;
-    transform: none;
-    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
-  }
-
-  .mobile-nav-toggle {
-    display: inline-flex;
-    margin-left: auto;
-  }
-
-  .app {
-    padding-top: 0;
-    min-height: calc(100vh - 92px);
-  }
-
-  .site-nav {
-    display: none;
-    width: 100%;
-    margin-left: 0;
-    padding: 10px 0 0;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: flex-start;
-    gap: 8px;
-  }
-
-  .site-nav.open {
-    display: flex;
-  }
-
-  .site-nav > a,
-  .site-nav > .nav-dropdown {
-    width: 100%;
-  }
-
-  .site-nav a,
-  .nav-dropdown-toggle {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    padding: 12px 14px;
-    border-radius: 12px;
-    background: rgba(11, 50, 70, 0.55);
-    border: 1px solid rgba(199, 190, 161, 0.12);
-    font-size: 14px;
-    line-height: 1.2;
-  }
-
-  .site-nav a::after {
-    display: none;
-  }
-
-  .nav-dropdown {
-    display: block;
-    padding-bottom: 0;
-    margin-bottom: 0;
-  }
-
-  .nav-dropdown-toggle {
-    padding-right: 36px;
-  }
-
-  .nav-dropdown-toggle::before {
-    display: none;
-  }
-
-  .nav-dropdown-toggle::after {
-    right: 14px;
-    width: 12px;
-    height: 12px;
-  }
-
-  .nav-dropdown-menu {
-    position: static;
-    display: none;
-    min-width: 0;
-    width: 100%;
-    margin-top: 8px;
-    padding: 8px;
-    border-radius: 12px;
-  }
-
-  .nav-dropdown:hover .nav-dropdown-menu,
-  .nav-dropdown:focus-within .nav-dropdown-menu {
-    display: none;
-  }
-
-  .nav-dropdown.open .nav-dropdown-menu {
-    display: flex;
-  }
-
-  .nav-dropdown-menu a {
-    background: transparent;
-    border: 0;
-    padding: 10px 12px;
-    font-size: 14px;
-  }
-
-  .hero {
-    min-height: auto;
-    padding: 32px 0 46px;
-  }
-
-  .hero-inner {
-    padding: 0 16px;
-  }
-
-  .hero-split-inner,
-  .page-hero-inner,
-  .two-column,
-  .footer-main {
-    grid-template-columns: 1fr;
-  }
-
-  .hero-content {
-    order: 1;
-  }
-
-  .hero-media {
-    order: 2;
-    justify-content: center;
-  }
-
-  .hero h1 {
-    font-size: 28px;
-    line-height: 1.15;
-  }
-
-  .hero p {
-    font-size: 16px;
-    max-width: none;
-  }
-
-  .hero-actions {
-    justify-content: flex-start;
-  }
-
-  .hero-trust {
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-
-  .hero-trust span {
-    font-size: 12px;
-    padding: 6px 10px;
-  }
-
-  .hero-photo {
-    max-width: 100%;
-    border-radius: 12px;
-  }
-
-  .hero-media-overlay {
-    left: 12px;
-    right: 12px;
-    bottom: 12px;
-    gap: 4px;
-  }
-
-  .hero-rotator-text,
-  .hero-lockup-subtitle {
-    font-size: 18px;
-    letter-spacing: 0.04em;
-  }
-
-  .hero-brand {
-    font-size: 22px;
-    margin-bottom: 2px;
-  }
-
-  .section,
-  .page-hero {
-    padding: 42px 0;
-  }
-
-  .container {
-    padding: 0 16px;
-  }
-
-  .section h2,
-  .service-page-title {
-    font-size: 28px;
-    line-height: 1.15;
-  }
-
-  .section-intro,
-  .service-page-tagline {
-    font-size: 18px;
-    max-width: none;
-  }
-
-  .service-page-section {
-    min-height: auto;
-    padding: 42px 0 56px;
-  }
-
-  .service-page-image {
-    width: 100%;
-    max-height: none;
-    margin-bottom: 18px;
-    border-radius: 14px;
-  }
-
-  .card-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .about-canvas {
-    min-height: auto;
-    padding: 108px 16px 48px;
-    background-size: 92%;
-    background-position: center 72px;
-  }
-
-  #page-services {
-    min-height: auto;
-    padding: 108px 0 48px;
-    background-size: 88%;
-    background-position: center 180px;
-  }
-
-  #page-industries .industry-item {
-    grid-template-columns: 1fr;
-    gap: 16px;
-  }
-
-  .industry-image img {
-    width: 100%;
-  }
-
-  #page-8x8 .page-hero,
-  #page-contact .page-hero,
-  #page-support .page-hero {
-    padding-top: 36px;
-  }
-
-  .site-footer {
-    padding-top: 24px;
-  }
-}
-
-/* =========================
-   Mobile layout refinement only
-   Tightens phone layout without changing desktop
-========================= */
-@media (max-width: 900px) {
-  .site-header {
-    min-height: 68px;
-    padding: 10px 16px;
-    gap: 8px;
-    position: sticky;
-    top: 0;
-    z-index: 120;
-  }
-
-  .logo-link img {
-    height: 72px;
-    width: auto;
-    max-width: 132px;
-  }
-
-  .mobile-nav-toggle {
-    width: 42px;
-    height: 40px;
-    border-radius: 12px;
-    border-color: rgba(59, 163, 255, 0.22);
-    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
-  }
-
-  .mobile-nav-toggle span {
-    width: 18px;
-  }
-
-  .site-nav {
-    position: absolute;
-    top: calc(100% + 1px);
-    left: 0;
-    right: 0;
-    display: none;
-    padding: 10px 16px 14px;
-    background: rgba(4, 23, 32, 0.96);
-    backdrop-filter: blur(14px);
-    border-top: 1px solid rgba(59, 163, 255, 0.12);
-    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
-    gap: 8px;
-  }
-
-  .site-nav a,
-  .nav-dropdown-toggle {
-    padding: 10px 14px;
-    min-height: 48px;
-    border-radius: 14px;
-    background: rgba(11, 50, 70, 0.46);
-    border: 1px solid rgba(199, 190, 161, 0.1);
-    font-size: 13px;
-    letter-spacing: 0.06em;
-  }
-
-  .nav-dropdown-toggle {
-    padding-right: 34px;
-  }
-
-  .nav-dropdown-toggle::after {
-    right: 14px;
-    width: 11px;
-    height: 11px;
-    opacity: 0.9;
-  }
-
-  .nav-dropdown-menu {
-    margin-top: 6px;
-    padding: 6px;
-    border-radius: 14px;
-    background: rgba(8, 33, 45, 0.88);
-    border: 1px solid rgba(199, 190, 161, 0.1);
-  }
-
-  .nav-dropdown-menu a {
-    min-height: 40px;
-    padding: 8px 10px;
-    font-size: 12.5px;
-    border-radius: 10px;
-  }
-
-  .app {
-    min-height: calc(100vh - 76px);
-  }
-
-  .hero {
-    padding: 18px 0 40px;
-  }
-
-  .hero-inner {
-    padding: 0 14px;
-  }
-
-  .hero h1 {
-    font-size: 27px;
-    line-height: 1.08;
-    margin-bottom: 14px;
-  }
-
-  .hero p {
-    font-size: 15px;
-    line-height: 1.55;
-    margin-bottom: 22px;
-  }
-
-  .primary-btn {
-    width: 100%;
-    max-width: 340px;
-    padding: 12px 18px;
-    font-size: 13px;
-  }
-
-  .hero-trust {
-    gap: 6px;
-  }
-
-  .hero-trust span {
-    font-size: 11px;
-    padding: 5px 9px;
-  }
-
-  .hero-media {
-    margin-top: 6px;
-  }
-
-  .hero-photo {
-    border-radius: 14px;
-  }
-
-  .hero-media-overlay {
-    left: 10px;
-    right: 10px;
-    bottom: 10px;
-  }
-
-  .hero-rotator-text,
-  .hero-lockup-subtitle {
-    font-size: 16px;
-  }
-
-  .hero-brand {
-    font-size: 20px;
-  }
-}
-
-/* =========================
-   Mobile corrections only - visible tabs, larger logo, no hamburger
-   Keeps desktop unchanged
-========================= */
-@media (max-width: 900px) {
-  .mobile-nav-toggle {
-    display: none !important;
-  }
-
-  .site-header {
-    height: auto;
-    min-height: 94px;
-    padding: 10px 14px 12px;
-    align-items: center;
-    justify-content: flex-end;
-    flex-wrap: nowrap;
-    gap: 10px;
-  }
-
-  .logo {
-    position: absolute;
-    left: 8px;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 60;
-  }
-
-  .logo-link img {
-    height: 110px;
-    width: auto;
-    max-width: none;
-    transform: translateY(6px);
-    filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45));
-  }
-
-  .app {
-    padding-top: 4px;
-    min-height: calc(100vh - 110px);
-  }
-
-  .site-nav {
-    display: flex !important;
-    position: static;
-    width: 100%;
-    margin-left: auto;
-    padding: 0 0 0 108px;
-    background: transparent;
-    backdrop-filter: none;
-    border-top: 0;
-    box-shadow: none;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 8px 14px;
-  }
-
-  .site-nav.open {
-    display: flex !important;
-  }
-
-  .site-nav > a,
-  .site-nav > .nav-dropdown {
-    width: auto;
-  }
-
-  .site-nav a,
-  .nav-dropdown-toggle {
-    display: inline-flex;
-    width: auto;
-    min-height: 0;
-    padding: 6px 0;
-    background: transparent;
-    border: 0;
-    border-radius: 0;
-    font-size: 12px;
-    line-height: 1.2;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-  }
-
-  .site-nav a::after {
-    display: block;
-  }
-
-  .nav-dropdown {
-    display: flex;
-    width: auto;
-    align-items: center;
-    padding-bottom: 10px;
-    margin-bottom: -10px;
-  }
-
-  .nav-dropdown-toggle {
-    padding: 6px 18px 6px 0;
-  }
-
-  .nav-dropdown-toggle::before {
-    display: block;
-  }
-
-  .nav-dropdown-toggle::after {
-    right: 0;
-    width: 11px;
-    height: 11px;
-    opacity: 1;
-  }
-
-  .nav-dropdown-menu {
-    position: absolute;
-    top: calc(100% - 2px);
-    left: 0;
-    right: auto;
-    width: max-content;
-    min-width: 260px;
-    max-width: min(88vw, 340px);
-    margin-top: 0;
-    padding: 8px;
-    background: rgba(4, 23, 32, 0.98);
-    backdrop-filter: blur(12px);
-    border: 1px solid rgba(59, 163, 255, 0.2);
-    border-radius: 14px;
-    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
-  }
-
-  .nav-dropdown:hover .nav-dropdown-menu,
-  .nav-dropdown:focus-within .nav-dropdown-menu,
-  .nav-dropdown.open .nav-dropdown-menu {
-    display: flex;
-  }
-
-  .nav-dropdown-menu a {
-    display: block;
-    width: 100%;
-    min-height: 0;
-    padding: 9px 12px;
-    background: transparent;
-    border: 0;
-    border-radius: 10px;
-    font-size: 14px;
-    letter-spacing: 0.02em;
-    text-transform: none;
-  }
-
-  .hero {
-    padding: 26px 0 40px;
-  }
-
-  .hero-inner,
-  .container {
-    padding: 0 14px;
-  }
-
-  #page-services {
-    padding: 104px 0 48px;
-    background-size: 118%;
-    background-position: center 170px;
-  }
-
-  #page-services .page-hero {
-    padding-bottom: 18px;
-  }
-
-  #page-services .card-grid {
-    gap: 18px;
-  }
-
-  .service-page-section {
-    padding: 36px 0 52px;
-  }
-
-  .service-page-image {
-    width: 100%;
-    max-width: 100%;
-    display: block;
-    margin: 0 auto 18px;
-    max-height: none;
-  }
-}
-
-@media (max-width: 520px) {
-  .site-header {
-    min-height: 102px;
-    padding: 10px 12px 12px;
-  }
-
-  .logo {
-    left: 6px;
-  }
-
-  .logo-link img {
-    height: 124px;
-  }
-
-  .site-nav {
-    padding-left: 96px;
-    gap: 7px 12px;
-  }
-
-  .site-nav a,
-  .nav-dropdown-toggle {
-    font-size: 11px;
-    letter-spacing: 0.045em;
-  }
-
-  .nav-dropdown-menu {
-    min-width: 232px;
-    max-width: min(90vw, 320px);
-  }
-
-  .hero h1 {
-    font-size: 26px;
-  }
-
-  .hero p {
-    font-size: 15px;
-  }
-
-  #page-services {
-    background-size: 132%;
-    background-position: center 188px;
-  }
-}
-
-
-/* =========================================================
-   Services overview image grid
-========================================================= */
-#page-services .services-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 28px;
-}
-
-#page-services .service-item {
-  display: block;
-  text-decoration: none;
-}
-
-#page-services .service-item:hover {
-  text-decoration: none;
-}
-
-#page-services .service-overview-image {
-  width: 100%;
-  height: 320px;
-  object-fit: cover;
-  object-position: center;
-  border-radius: 22px;
-  box-shadow: 0 12px 34px rgba(3, 10, 17, 0.75);
-}
-
-#page-services .service-overview-card {
-  margin-top: 16px;
-  text-align: center;
-}
-
-#page-services .service-overview-card h3 {
-  font-size: 28px;
-  margin-bottom: 10px;
-}
-
-#page-services .service-overview-card p {
-  font-size: 20px;
-  line-height: 1.6;
-  color: var(--text-muted);
-}
-
-/* =========================================================
-   Mobile navigation + layout cleanup
-========================================================= */
-@media (max-width: 900px) {
-  .mobile-nav-toggle {
-    display: none !important;
-  }
-
-  .site-header {
-    height: auto !important;
-    padding: 14px 12px 12px !important;
-    display: flex !important;
-    flex-direction: column !important;
-    align-items: center !important;
-    justify-content: center !important;
-  }
-
-  .logo {
-    position: static !important;
-    left: auto !important;
-    top: auto !important;
-    transform: none !important;
-    margin: 0 auto 10px !important;
-  }
-
-  .logo-link img {
-    height: 120px !important;
-    width: auto !important;
-    transform: none !important;
-  }
-
-  .app {
-    padding-top: 0 !important;
-  }
-
-  .site-nav {
-    position: static !important;
-    inset: auto !important;
-    opacity: 1 !important;
-    visibility: visible !important;
-    pointer-events: auto !important;
-    transform: none !important;
-    display: flex !important;
-    width: 100% !important;
-    margin: 0 auto !important;
-    padding: 0 !important;
-    justify-content: center !important;
-    align-items: center !important;
-    flex-wrap: wrap !important;
-    gap: 10px 18px !important;
-    background: transparent !important;
-    border: 0 !important;
-    box-shadow: none !important;
-  }
-
-  .site-nav > a,
-  .site-nav > .nav-dropdown {
-    flex: 0 0 auto !important;
-  }
-
-  .site-nav a,
-  .nav-dropdown-toggle {
-    font-size: 14px !important;
-    letter-spacing: 0.04em !important;
-    padding: 6px 0 !important;
-    white-space: nowrap !important;
-  }
-
-  .nav-dropdown {
-    position: relative !important;
-    width: auto !important;
-  }
-
-  .nav-dropdown-toggle {
-    min-width: 0 !important;
-    justify-content: flex-start !important;
-    background: transparent !important;
-    border: 0 !important;
-    box-shadow: none !important;
-    border-radius: 0 !important;
-  }
-
-  .nav-dropdown-toggle::before {
-    bottom: -2px !important;
-  }
-
-  .nav-dropdown-menu {
-    position: absolute !important;
-    top: calc(100% + 8px) !important;
-    left: 50% !important;
-    right: auto !important;
-    transform: translateX(-50%) !important;
-    min-width: 220px !important;
-    max-width: min(92vw, 320px) !important;
-    padding: 10px 0 !important;
-    z-index: 120 !important;
-  }
-
-  .nav-dropdown-menu a {
-    padding: 10px 18px !important;
-    font-size: 14px !important;
-  }
-
-  .hero {
-    padding-top: 42px !important;
-  }
-
-  #page-services .services-grid {
-    grid-template-columns: 1fr !important;
-    gap: 24px !important;
-  }
-
-  #page-services .service-overview-image {
-    height: auto !important;
-    aspect-ratio: 16 / 10;
-  }
-
-  #page-services .service-overview-card h3 {
-    font-size: 24px !important;
-  }
-
-  #page-services .service-overview-card p {
-    font-size: 18px !important;
-  }
-}
-
-/* =========================================================
-   Final mobile nav override: force horizontal tab flow
-   without changing desktop layout
-========================================================= */
-@media (max-width: 900px) {
-  .site-header {
-    align-items: center !important;
-  }
-
-  .site-nav {
-    display: flex !important;
-    flex-direction: row !important;
-    flex-wrap: wrap !important;
-    justify-content: center !important;
-    align-items: center !important;
-    align-content: center !important;
-    width: min(100%, 360px) !important;
-    max-width: 360px !important;
-    margin: 0 auto !important;
-    padding: 0 !important;
-    gap: 12px 18px !important;
-  }
-
-  .site-nav > a,
-  .site-nav > .nav-dropdown {
-    display: inline-flex !important;
-    flex: 0 0 auto !important;
-    width: auto !important;
-    max-width: none !important;
-    min-width: 0 !important;
-    margin: 0 !important;
-  }
-
-  .site-nav a,
-  .nav-dropdown-toggle {
-    display: inline-flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    width: auto !important;
-    min-width: 0 !important;
-    max-width: none !important;
-    margin: 0 !important;
-    text-align: center !important;
-    line-height: 1.1 !important;
-    font-size: 13px !important;
-    padding: 4px 0 !important;
-  }
-
-  .nav-dropdown {
-    display: inline-flex !important;
-    align-items: center !important;
-  }
-
-  .nav-dropdown-toggle::after {
-    margin-left: 8px !important;
-  }
-
-  .nav-dropdown-menu {
-    top: calc(100% + 6px) !important;
-  }
-}
-
-
-/* =========================================================
-   Mobile-only: remove Services/Industries dropdown behavior
-   and keep nav as simple wrapped tabs
-========================================================= */
-@media (max-width: 900px) {
-  .site-nav {
-    width: 100% !important;
-    max-width: 100% !important;
-    justify-content: center !important;
-    gap: 10px 16px !important;
-    padding: 0 12px !important;
-  }
-
-  .site-nav a,
-  .nav-dropdown-toggle {
-    font-size: 12px !important;
-    padding: 4px 0 !important;
-    letter-spacing: 0.035em !important;
-  }
-
-  .nav-dropdown-toggle::after,
-  .nav-dropdown-toggle::before {
-    display: none !important;
-    content: none !important;
-  }
-
-  .nav-dropdown-menu {
-    display: none !important;
-    opacity: 0 !important;
-    visibility: hidden !important;
-    pointer-events: none !important;
-  }
-
-  .nav-dropdown.open .nav-dropdown-menu,
-  .nav-dropdown:hover .nav-dropdown-menu {
-    display: none !important;
-    opacity: 0 !important;
-    visibility: hidden !important;
-    pointer-events: none !important;
-  }
-
-  .nav-dropdown,
-  .site-nav > .nav-dropdown {
-    display: inline-flex !important;
-    width: auto !important;
-  }
-
-  .nav-dropdown-toggle {
-    background: transparent !important;
-    border: 0 !important;
-    box-shadow: none !important;
-    border-radius: 0 !important;
-  }
-
-  .nav-dropdown.open .nav-dropdown-toggle,
-  .nav-dropdown:hover .nav-dropdown-toggle {
-    color: var(--text) !important;
-  }
-}
-
-/* Zoho CRM Webform splash message - scoped to Contact page form only */
-.wf_customMessageBox {
-  font-family: Arial, Helvetica, sans-serif;
-  color: #132C14;
-  background: #F5FAF5;
-  box-shadow: 0 2px 6px 0 rgba(0,0,0,0.25);
-  max-width: 90%;
-  width: max-content;
-  word-break: break-word;
-  z-index: 11000;
-  border-radius: 6px;
-  border: 1px solid #A9D3AB;
-  min-width: 100px;
-  padding: 10px 15px;
-  align-items: center;
-  position: fixed;
-  top: 20px;
-  left: 50%;
-  transform: translate(-50%, 0);
-}
-.wf_customCircle {
-  position: relative;
-  background-color: #12AA67;
-  border-radius: 100%;
-  width: 20px;
-  height: 20px;
-  flex: none;
-  margin-right: 7px;
-}
-.wf_customCheckMark {
-  box-sizing: unset !important;
-  position: absolute;
-  transform: rotate(45deg) translate(-50%, -50%);
-  left: 6px;
-  top: 9px;
-  height: 8px;
-  width: 3px;
-  border-bottom: 2px solid #fff;
-  border-right: 2px solid #fff;
-}
-.wf_customClose {
-  box-sizing: border-box;
-  position: relative;
-  width: 18px;
-  height: 18px;
-  margin-left: 12px;
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-}
-.wf_customClose::after,
-.wf_customClose::before {
-  content: '';
-  display: block;
-  box-sizing: border-box;
-  position: absolute;
-  width: 12px;
-  height: 1.5px;
-  background: #616E88;
-  transform: rotate(45deg);
-  border-radius: 5px;
-  top: 8px;
-  left: 3px;
-}
-.wf_customClose::after {
-  transform: rotate(-45deg);
-}