From edd491d680c7e0657f25a87db77af0981bef8f85 Mon Sep 17 00:00:00 2001
From: root <root@vm6.template>
Date: Wed, 11 Feb 2026 07:15:11 +0000
Subject: [PATCH] Fix navbar across all pages: add nav include, fonts, active
 state, spacing, stats, error pages

- Add nav.php include to 5 missing pages (cost-calculator, thank-you, 403, 404, 500)
- Add ErrorDocument directives to .htaccess for custom 403/404/500 pages
- Fix bogus accuracy stats (homepage, web-scraping, location pages)
- Fix invisible CTA buttons on property and financial service pages
- Add Google Fonts (Roboto Slab + Lato) to all pages missing it (tools, blog articles, error pages)
- Add active nav link highlighting (teal underline for current page)
- Improve footer contrast to WCAG AA, equal-height cards, mobile text scaling
- Consistent navbar-to-content spacing across all pages
- Bump cache version to v1.1.3
---
 .htaccess                                     |    5 +
 403.php                                       |    7 +-
 404.php                                       |    1 +
 500.php                                       |    7 +-
 assets/css/main.css                           |  186 +-
 assets/css/main.css.bak.20260211              | 4496 +++++++++++++++++
 assets/css/main.min.css                       |  186 +-
 .../free-web-scraping-tools-launch.php        |    5 +-
 .../real-time-analytics-streaming.php         |    5 +-
 .../retail-competitor-monitoring-case.php     |    5 +-
 blog/articles/uk-cookie-law-compliance.php    |    5 +-
 case-studies/index.php                        |    5 +-
 includes/nav.php                              |   30 +-
 index.php                                     |   10 +-
 locations/birmingham.php                      |    2 +-
 locations/london.php                          |    2 +-
 locations/manchester.php                      |    2 +-
 quote.php                                     |    2 +-
 services/data-cleaning.php                    |    5 +-
 services/financial-data-services.php          |    2 +-
 services/property-data-extraction.php         |    2 +-
 services/web-scraping.php                     |    4 +-
 thank-you.php                                 |    6 +-
 tools/cost-calculator.php                     |    6 +-
 tools/data-converter.php                      |    5 +-
 tools/index.php                               |    7 +-
 tools/robots-analyzer.php                     |    5 +-
 tools/scrapeability-checker.php               |    5 +-
 28 files changed, 4922 insertions(+), 86 deletions(-)
 create mode 100644 assets/css/main.css.bak.20260211
diff --git a/.htaccess b/.htaccess
index d5103ae..e7394d7 100644
--- a/.htaccess
+++ b/.htaccess
@@ -1,3 +1,8 @@
+# Custom error pages
+ErrorDocument 403 /403.php
+ErrorDocument 404 /404.php
+ErrorDocument 500 /500.php
+
 # Security Rules for UK Data Services
 
 # Protect sensitive files and configs
diff --git a/403.php b/403.php
index e835716..61adc06 100644
--- a/403.php
+++ b/403.php
@@ -10,7 +10,10 @@ http_response_code(403);
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Access Forbidden - UK Data Services</title>
-    <style>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Lato:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+<style>
         body {
             font-family: 'Arial', sans-serif;
             margin: 0;
@@ -68,8 +71,10 @@ http_response_code(403);
             opacity: 0.8;
         }
     </style>
+<link rel="stylesheet" href="/css/main.css">
 </head>
 <body>
+<?php include($_SERVER["DOCUMENT_ROOT"] . "/includes/nav.php"); ?>
     <div class="container">
         <div class="logo">
             <h3>UK Data Services</h3>
diff --git a/404.php b/404.php
index 2e0086d..8aa364f 100644
--- a/404.php
+++ b/404.php
@@ -88,6 +88,7 @@ $page_description = "The page you're looking for doesn't exist. Explore our data
     </style>
 </head>
 <body>
+<?php include($_SERVER["DOCUMENT_ROOT"] . "/includes/nav.php"); ?>
     <div class="error-page">
         <div class="error-container">
             <div class="error-code">404</div>
diff --git a/500.php b/500.php
index 56f0b60..3207b7b 100644
--- a/500.php
+++ b/500.php
@@ -13,7 +13,10 @@ error_log('500 Error triggered: ' . date('Y-m-d H:i:s') . ' - IP: ' . $_SERVER['
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Service Temporarily Unavailable - UK Data Services</title>
-    <style>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Lato:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+<style>
         body {
             font-family: 'Arial', sans-serif;
             margin: 0;
@@ -78,8 +81,10 @@ error_log('500 Error triggered: ' . date('Y-m-d H:i:s') . ' - IP: ' . $_SERVER['
             border-radius: 10px;
         }
     </style>
+<link rel="stylesheet" href="/css/main.css">
 </head>
 <body>
+<?php include($_SERVER["DOCUMENT_ROOT"] . "/includes/nav.php"); ?>
     <div class="container">
         <div class="logo">
             <h3>UK Data Services</h3>
diff --git a/assets/css/main.css b/assets/css/main.css
index 9157817..def83de 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -149,6 +149,7 @@ body {
     transition: color 0.3s ease;
 }
 
+.nav-link.active {    color: #148069;    font-weight: 600;    border-bottom: 2px solid #148069;    padding-bottom: 2px;}
 .nav-link:hover {
     color: #144784;
 }
@@ -3599,41 +3600,55 @@ aside.related-articles {
     }
 }
 
-/* Fix for navbar overlap on content pages */
+/* ===== NAVBAR SPACING FIX (consistent across all pages) ===== */
+/* Navbar is position:fixed, height 70px */
+
+/* Hero pages: all hero variants get 120px top padding (70px navbar + 50px space) */
+.hero,
+.page-hero,
+.about-hero,
+.faq-hero,
+.service-hero,
+.project-types-hero,
+.tools-hero,
+.quote-hero {
+    padding-top: 120px !important;
+}
+
+/* Non-hero pages with <main>: push content below navbar */
 main {
-    padding-top: 90px; /* Add padding to account for fixed navbar (70px + 20px buffer) */
+    padding-top: 90px; /* 70px navbar + 20px breathing room */
 }
 
-/* Specific fix for legal content pages */
+/* But if main contains a hero, don't double-pad */
+main > .hero:first-child,
+main > .page-hero:first-child,
+main > .about-hero:first-child,
+main > .faq-hero:first-child,
+main > .service-hero:first-child,
+main > .project-types-hero:first-child {
+    margin-top: -90px; /* Cancel out the main padding */
+}
+
+/* Legal content pages (no hero, text-heavy) */
 .legal-content {
-    padding-top: 120px !important; /* Override inline styles for legal pages */
+    padding-top: 100px !important; /* 70px navbar + 30px breathing room */
 }
 
-/* Also ensure any page sections that might be affected have proper spacing */
+/* Tool sub-pages and standalone pages (no <main>, no hero) */
+.calculator-container,
+.analyzer-container,
+.converter-container,
+.checker-container,
+.thank-you-container {
+    padding-top: 100px !important; /* 70px navbar + 30px breathing room */
+}
+
+/* Generic page-content class */
 .page-content {
     padding-top: 90px;
 }
 
-/* For hero sections that should start right under navbar */
-.hero {
-    padding-top: 140px; /* 120px base + 20px for navbar */
-}
-
-/* For about page hero */
-.about-hero {
-    padding-top: 140px; /* 120px base + 20px for navbar */
-}
-
-/* For FAQ page hero */
-.faq-hero {
-    padding-top: 140px; /* 120px base + 20px for navbar */
-}
-
-/* For project types and other page heroes */
-.page-hero {
-    padding-top: 140px; /* 120px base + 20px for navbar */
-}
-
 /* Hide reCAPTCHA badge */
 .grecaptcha-badge {
     visibility: hidden !important;
@@ -4370,3 +4385,124 @@ body { font-size: 17px; }
 }
 
 /* ===== END VISUAL FIXES ===== */
+
+
+/* ===== VISUAL FIXES 2026-02-11 ===== */
+
+/* 1. Equal-height capability cards on project-types page */
+.capabilities-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 30px;
+    align-items: stretch;
+}
+.capability-card {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+.capability-card p {
+    flex-grow: 1;
+}
+
+/* 2. Footer contrast improvements — WCAG AA */
+.footer-section p,
+.footer-section li,
+.footer-bottom p,
+.footer-bottom .company-details,
+.trust-badge-text span {
+    color: #d1d5db; /* ~9:1 on #151f25 */
+}
+.footer-section a {
+    color: #93c5fd; /* light blue — ~7.5:1 on #151f25 */
+}
+.footer-section a:hover {
+    color: #bfdbfe;
+}
+.footer-section h3 {
+    color: #f3f4f6;
+}
+.footer-bottom p,
+.footer-bottom .company-details {
+    color: #9ca3af; /* muted but still 4.6:1 */
+}
+.footer-logo img {
+    filter: brightness(1.2);
+}
+
+/* 3. Mobile text sizing & layout */
+@media (max-width: 768px) {
+    body {
+        font-size: 16px;
+    }
+    
+    /* Project-types hero */
+    .project-types-hero h1 {
+        font-size: 1.8rem;
+        line-height: 1.3;
+    }
+    .project-types-hero p {
+        font-size: 1rem;
+    }
+    
+    /* Capability cards single column on mobile */
+    .capabilities-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    /* Industry grid single column */
+    .industry-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    /* Project category headings */
+    .project-category h2 {
+        font-size: 1.6rem;
+    }
+    .project-category h3 {
+        font-size: 1.2rem;
+    }
+    .project-description {
+        font-size: 1rem;
+    }
+    
+    /* Footer content single column (already done but ensure) */
+    .footer-content {
+        grid-template-columns: 1fr;
+    }
+    
+    /* Footer bottom stack */
+    .footer-bottom,
+    .footer-bottom .footer-bottom-content {
+        flex-direction: column;
+        gap: 15px;
+        text-align: center;
+    }
+}
+
+@media (max-width: 480px) {
+    .project-types-hero h1 {
+        font-size: 1.5rem;
+    }
+    .project-types-hero {
+        padding: 100px 0 40px;
+    }
+    .project-category {
+        padding: 40px 0;
+    }
+    .project-category h2 {
+        font-size: 1.4rem;
+    }
+}
+
+/* 4. General polish */
+/* project-types-hero padding now in unified block above */
+
+/* Tech tags wrapping fix */
+.tech-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+/* ===== END VISUAL FIXES 2026-02-11 ===== */
diff --git a/assets/css/main.css.bak.20260211 b/assets/css/main.css.bak.20260211
new file mode 100644
index 0000000..1228549
--- /dev/null
+++ b/assets/css/main.css.bak.20260211
@@ -0,0 +1,4496 @@
+/* CSS Reset and Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: 'Roboto Slab', 'Lato', sans-serif;
+    line-height: 1.6;
+    color: #333333;
+    background-color: #ffffff;
+}
+
+/* Utility Classes */
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+.btn {
+    display: inline-block;
+    padding: 14px 28px;
+    border: none;
+    border-radius: 8px;
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 16px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    font-family: inherit;
+    line-height: 1.4;
+    white-space: nowrap;
+    min-height: 48px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: #148069;
+    color: white;
+}
+
+.btn-primary {
+    background: #148069;
+    color: white !important;
+    text-decoration: none !important;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    background: #11725e;
+    box-shadow: 0 4px 16px rgba(23, 158, 131, 0.3);
+    color: white !important;
+    text-decoration: none !important;
+}
+
+.btn-secondary {
+    background: white;
+    color: #144784 !important;
+    border: 2px solid #144784;
+    text-decoration: none !important;
+}
+
+.btn-secondary:hover {
+    background: #144784;
+    color: white !important;
+    transform: translateY(-2px);
+    text-decoration: none !important;
+}
+
+.btn-full {
+    width: 100%;
+}
+
+.highlight {
+    background: linear-gradient(135deg, #179e83, #1bbc9b);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.section-header {
+    text-align: center;
+    margin-bottom: 60px;
+}
+
+.section-header h2 {
+    font-size: 2.5rem;
+    font-weight: 600;
+    margin-bottom: 16px;
+    color: #1a1a1a;
+}
+
+.section-header p {
+    font-size: 1.2rem;
+    color: #555;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+/* Navigation */
+.navbar {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    transition: all 0.3s ease;
+}
+
+.navbar.scrolled {
+    background: rgba(255, 255, 255, 0.98);
+    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
+}
+
+.nav-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 70px;
+}
+
+.nav-logo img {
+    height: 40px;
+    width: auto;
+}
+
+.nav-menu {
+    display: flex;
+    align-items: center;
+    gap: 30px;
+}
+
+.nav-link {
+    text-decoration: none;
+    color: #1a1a1a;
+    font-weight: 500;
+    transition: color 0.3s ease;
+}
+
+.nav-link:hover {
+    color: #144784;
+}
+
+.nav-link.cta-button {
+    background: #148069;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+}
+
+.nav-link.cta-button:hover {
+    transform: translateY(-2px);
+    background: #11725e;
+    box-shadow: 0 4px 16px rgba(23, 158, 131, 0.3);
+}
+
+.nav-toggle {
+    display: none;
+    flex-direction: column;
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 8px;
+    min-width: 48px;
+    min-height: 48px;
+    justify-content: center;
+    align-items: center;
+}
+
+.bar {
+    width: 25px;
+    height: 3px;
+    background: #1a1a1a;
+    margin: 3px 0;
+    transition: 0.3s;
+}
+
+/* Hero Section */
+.hero {
+    padding: 120px 0 80px;
+    background: linear-gradient(135deg, #252d3b 0%, #144784 100%);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    color: white;
+    position: relative;
+    overflow: hidden;
+}
+
+.hero::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 50%;
+    height: 100%;
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><circle cx="300" cy="200" r="150" fill="%23179e83" opacity="0.1"/><circle cx="350" cy="150" r="100" fill="%23ffffff" opacity="0.05"/><rect x="250" y="180" width="120" height="80" rx="10" fill="%23ffffff" opacity="0.1"/></svg>') no-repeat center;
+    background-size: contain;
+    animation: float 6s ease-in-out infinite;
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-20px); }
+}
+
+.hero-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 60px;
+    align-items: center;
+}
+
+.hero-content {
+    animation: fadeInUp 1s ease;
+}
+
+.hero-title {
+    font-size: 3.5rem;
+    font-weight: 700;
+    line-height: 1.2;
+    margin-bottom: 24px;
+    color: #ffffff;
+}
+
+.hero-subtitle {
+    font-size: 1.3rem;
+    font-weight: 500;
+    color: #ffffff;
+    margin-bottom: 40px;
+    line-height: 1.6;
+    opacity: 0.9;
+}
+
+.hero-buttons {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 60px;
+}
+
+.hero-stats {
+    display: flex;
+    gap: 40px;
+}
+
+.stat {
+    text-align: center;
+}
+
+.stat-number {
+    display: block;
+    font-size: 2rem;
+    font-weight: 700;
+    color: #ffffff;
+}
+
+.stat-label {
+    display: block;
+    font-size: 0.9rem;
+    color: #ffffff;
+    font-weight: 500;
+}
+
+.hero-image {
+    animation: fadeInRight 1s ease;
+    position: relative;
+    z-index: 2;
+}
+
+.hero-graphic {
+    width: 100%;
+    height: auto;
+    max-width: 500px;
+    animation: float 6s ease-in-out infinite;
+}
+
+.hero-graphic svg {
+    width: 100%;
+    height: auto;
+    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.1));
+}
+
+/* Hero Graphic Animations */
+.hero-graphic .bg-circle-1 {
+    animation: rotate 20s linear infinite;
+    transform-origin: center;
+}
+
+.hero-graphic .bg-circle-2 {
+    animation: rotate 15s linear infinite reverse;
+    transform-origin: center;
+}
+
+.hero-graphic .browser-main {
+    animation: pulse 4s ease-in-out infinite;
+}
+
+.hero-graphic .database {
+    animation: pulse 6s ease-in-out infinite;
+}
+
+.hero-graphic .dashboard {
+    animation: pulse 5s ease-in-out infinite;
+}
+
+.hero-graphic .chart-bar-1 {
+    animation: grow-bar 3s ease-in-out infinite;
+}
+
+.hero-graphic .chart-bar-2 {
+    animation: grow-bar 3s ease-in-out infinite 0.5s;
+}
+
+.hero-graphic .chart-bar-3 {
+    animation: grow-bar 3s ease-in-out infinite 1s;
+}
+
+.hero-graphic .chart-bar-4 {
+    animation: grow-bar 3s ease-in-out infinite 1.5s;
+}
+
+.hero-graphic .chart-bar-5 {
+    animation: grow-bar 3s ease-in-out infinite 2s;
+}
+
+.hero-graphic .extraction-path {
+    stroke-dasharray: 200;
+    stroke-dashoffset: 200;
+    animation: draw-line 4s ease-in-out infinite;
+}
+
+@keyframes rotate {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+@keyframes grow-bar {
+    0%, 100% { transform: scaleY(1); }
+    50% { transform: scaleY(1.3); }
+}
+
+@keyframes draw-line {
+    0% { stroke-dashoffset: 200; }
+    50% { stroke-dashoffset: 0; }
+    100% { stroke-dashoffset: -200; }
+}
+
+@keyframes data-pulse {
+    0%, 100% { opacity: 0.7; transform: scale(1); }
+    50% { opacity: 1; transform: scale(1.1); }
+}
+
+.hero-img {
+    width: 100%;
+    height: auto;
+    max-width: 500px;
+}
+
+/* Services Section */
+.services {
+    padding: 100px 0;
+    background: white;
+}
+
+.services-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 30px;
+}
+
+.service-card {
+    background: white;
+    padding: 40px;
+    border-radius: 16px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    transition: all 0.3s ease;
+    border: 1px solid #f0f0f0;
+}
+
+.service-card:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
+}
+
+.service-icon {
+    width: 60px;
+    height: 60px;
+    margin-bottom: 24px;
+}
+
+.service-icon img {
+    width: 100%;
+    height: 100%;
+}
+
+.service-card h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 16px;
+    color: #1a1a1a;
+}
+
+.service-card p {
+    color: #555;
+    margin-bottom: 20px;
+    line-height: 1.6;
+}
+
+.service-card ul {
+    list-style: none;
+}
+
+.service-card li {
+    padding: 8px 0;
+    color: #555;
+    position: relative;
+    padding-left: 20px;
+}
+
+.service-card li:before {
+    content: '✓';
+    position: absolute;
+    left: 0;
+    color: #148a72;
+    font-weight: bold;
+}
+
+/* Process Section */
+.process {
+    padding: 100px 0;
+    background: #f8f9fa;
+}
+
+.process-steps {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.step {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 50px;
+    animation: fadeInUp 0.6s ease;
+}
+
+.step:last-child {
+    margin-bottom: 0;
+}
+
+.step-number {
+    background: #148069;
+    color: white;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 1.2rem;
+    margin-right: 30px;
+    flex-shrink: 0;
+}
+
+.step-content h3 {
+    font-size: 1.4rem;
+    font-weight: 600;
+    margin-bottom: 12px;
+    color: #1a1a1a;
+}
+
+.step-content p {
+    color: #555;
+    line-height: 1.6;
+}
+
+/* Why Us Section */
+.why-us {
+    padding: 100px 0;
+    background: white;
+}
+
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 40px;
+}
+
+.feature {
+    text-align: center;
+    padding: 30px;
+    animation: fadeInUp 0.6s ease;
+}
+
+.feature-icon {
+    width: 80px;
+    height: 80px;
+    margin: 0 auto 24px;
+}
+
+.feature-icon img {
+    width: 100%;
+    height: 100%;
+}
+
+.feature h3 {
+    font-size: 1.3rem;
+    font-weight: 600;
+    margin-bottom: 16px;
+    color: #1a1a1a;
+}
+
+.feature p {
+    color: #555;
+    line-height: 1.6;
+}
+
+/* Contact Section */
+.contact {
+    padding: 100px 0;
+    background: #f8f9fa;
+}
+
+.contact-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 60px;
+    align-items: start;
+}
+
+.contact-info h2 {
+    font-size: 2.5rem;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: #1a1a1a;
+}
+
+.contact-info p {
+    font-size: 1.2rem;
+    color: #555;
+    margin-bottom: 40px;
+    line-height: 1.6;
+}
+
+.contact-details {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+}
+
+.contact-item {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.contact-item img {
+    width: 40px;
+    height: 40px;
+}
+
+.contact-item strong {
+    display: block;
+    font-weight: 600;
+    color: #1a1a1a;
+    margin-bottom: 4px;
+}
+
+.contact-item p {
+    margin: 0;
+    color: #555;
+}
+
+.contact-item a {
+    color: #148a72;
+    text-decoration: none;
+}
+
+.contact-item a:hover {
+    text-decoration: underline;
+}
+
+/* Form Styles */
+.contact-form {
+    background: white;
+    padding: 40px;
+    border-radius: 16px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+
+.form-group {
+    margin-bottom: 24px;
+}
+
+.form-group label {
+    display: block;
+    font-weight: 500;
+    margin-bottom: 8px;
+    color: #1a1a1a;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+    width: 100%;
+    padding: 14px 16px;
+    border: 2px solid #e1e5e9;
+    border-radius: 8px;
+    font-size: 16px;
+    transition: border-color 0.3s ease;
+    background: white;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+    outline: none;
+    border-color: #148a72;
+    box-shadow: 0 0 0 3px rgba(23, 158, 131, 0.1);
+}
+
+.form-group textarea {
+    resize: vertical;
+    min-height: 120px;
+}
+
+/* Form validation states */
+.form-group input[aria-invalid="true"],
+.form-group select[aria-invalid="true"],
+.form-group textarea[aria-invalid="true"] {
+    border-color: #dc2626;
+    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
+}
+
+.form-group input[aria-invalid="true"]:focus,
+.form-group select[aria-invalid="true"]:focus,
+.form-group textarea[aria-invalid="true"]:focus {
+    border-color: #dc2626;
+    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
+}
+
+.form-error {
+    display: block;
+    color: #dc2626;
+    font-size: 0.875rem;
+    margin-top: 6px;
+    min-height: 1.25rem;
+}
+
+.form-error:empty {
+    display: none;
+}
+
+/* Footer */
+.footer {
+    background: #151f25;
+    color: white;
+    padding: 60px 0 30px;
+}
+
+.footer-content {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr 1fr;
+    gap: 40px;
+    margin-bottom: 40px;
+}
+
+.footer-section h3 {
+    font-size: 1.2rem;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: white;
+}
+
+.footer-section ul {
+    list-style: none;
+}
+
+.footer-section li {
+    margin-bottom: 12px;
+}
+
+.footer-section a {
+    color: #ccc;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.footer-section a:hover {
+    color: #148a72;
+}
+
+.footer-logo img {
+    height: 40px;
+    margin-bottom: 20px;
+}
+
+.footer-section p {
+    color: #ccc;
+    line-height: 1.6;
+}
+
+.footer-bottom {
+    border-top: 1px solid #333;
+    padding-top: 30px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.social-links {
+    display: flex;
+    gap: 20px;
+}
+
+.social-links a {
+    display: block;
+    width: 40px;
+    height: 40px;
+}
+
+.social-links img {
+    width: 100%;
+    height: 100%;
+    filter: invert(1);
+    transition: filter 0.3s ease;
+}
+
+.social-links a:hover img {
+    filter: invert(0.7) sepia(1) saturate(2) hue-rotate(240deg);
+}
+
+/* Animations */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeInRight {
+    from {
+        opacity: 0;
+        transform: translateX(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes fadeInLeft {
+    from {
+        opacity: 0;
+        transform: translateX(-30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-20px); }
+}
+
+@keyframes pulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+}
+
+@keyframes slideInFromBottom {
+    from {
+        opacity: 0;
+        transform: translateY(50px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Animation Classes */
+.animate-on-scroll {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: all 0.8s ease-out;
+}
+
+.animate-on-scroll.animated {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.service-card {
+    animation: slideInFromBottom 0.6s ease-out forwards;
+    animation-delay: var(--animation-delay, 0s);
+}
+
+.feature {
+    animation: fadeInUp 0.6s ease-out forwards;
+    animation-delay: var(--animation-delay, 0s);
+}
+
+.step {
+    animation: fadeInLeft 0.6s ease-out forwards;
+    animation-delay: var(--animation-delay, 0s);
+}
+
+/* Blog responsive styles */
+@media (max-width: 768px) {
+    .featured-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .featured-article.main-feature {
+        grid-row: span 1;
+    }
+    
+    .articles-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .newsletter-form .form-group {
+        flex-direction: column;
+    }
+    
+    .article-title {
+        font-size: 2.2rem;
+    }
+    
+    .article-author {
+        flex-direction: column;
+        text-align: center;
+        gap: 15px;
+    }
+    
+    .blog-categories h2,
+    .blog-featured h2,
+    .blog-recent h2 {
+        font-size: 2rem;
+    }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .nav-menu {
+        position: fixed;
+        left: -100%;
+        top: 70px;
+        flex-direction: column;
+        background-color: white;
+        width: 100%;
+        text-align: center;
+        transition: 0.3s;
+        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
+        padding: 40px 0;
+        gap: 20px;
+    }
+
+    .nav-menu.active {
+        left: 0;
+    }
+
+    .nav-toggle {
+        display: flex;
+    }
+
+    .nav-toggle.active .bar:nth-child(2) {
+        opacity: 0;
+    }
+
+    .nav-toggle.active .bar:nth-child(1) {
+        transform: translateY(8px) rotate(45deg);
+    }
+
+    .nav-toggle.active .bar:nth-child(3) {
+        transform: translateY(-8px) rotate(-45deg);
+    }
+
+    .hero-container {
+        grid-template-columns: 1fr;
+        gap: 40px;
+        text-align: center;
+    }
+
+    .hero-title {
+        font-size: 2.5rem;
+    }
+
+    .hero-buttons {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .hero-stats {
+        justify-content: center;
+        gap: 30px;
+    }
+
+    .section-header h2 {
+        font-size: 2rem;
+    }
+
+    .services-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .features-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .contact-content {
+        grid-template-columns: 1fr;
+        gap: 40px;
+    }
+
+    .footer-content {
+        grid-template-columns: 1fr;
+        gap: 30px;
+        text-align: center;
+    }
+
+    .footer-bottom {
+        flex-direction: column;
+        gap: 20px;
+        text-align: center;
+    }
+}
+
+@media (max-width: 480px) {
+    .container {
+        padding: 0 15px;
+    }
+
+    .hero {
+        padding: 100px 0 60px;
+    }
+
+    .hero-title {
+        font-size: 2rem;
+    }
+
+    .hero-subtitle {
+        font-size: 1.1rem;
+    }
+
+    .btn {
+        padding: 12px 24px;
+        font-size: 14px;
+    }
+
+    .service-card,
+    .contact-form {
+        padding: 30px 20px;
+    }
+
+    .step {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .step-number {
+        margin: 0 0 20px 0;
+    }
+}
+
+/* Performance Optimizations */
+img {
+    max-width: 100%;
+    height: auto;
+    loading: lazy;
+}
+
+/* Logo specific styles */
+.logo {
+    height: auto;
+    max-height: 50px;
+    width: auto;
+}
+
+.footer-logo img {
+    height: 40px;
+    width: auto;
+}
+
+/* Favicon links don't need display properties */
+
+/* Loading states */
+.loading {
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+/* Blog-specific styles */
+.blog-categories {
+    padding: 80px 0;
+    background: #f8f9fa;
+}
+
+.blog-categories h2 {
+    text-align: center;
+    font-size: 2.5rem;
+    font-weight: 600;
+    margin-bottom: 60px;
+    color: #1a1a1a;
+}
+
+.blog-featured {
+    padding: 80px 0;
+    background: white;
+}
+
+.blog-featured h2 {
+    text-align: center;
+    font-size: 2.5rem;
+    font-weight: 600;
+    margin-bottom: 60px;
+    color: #1a1a1a;
+}
+
+.featured-grid {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+    gap: 30px;
+}
+
+.featured-article {
+    background: white;
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    border: 1px solid #f0f0f0;
+    transition: all 0.3s ease;
+}
+
+.featured-article:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
+}
+
+.featured-article.main-feature {
+    grid-row: span 2;
+}
+
+.featured-article .article-image {
+    height: 200px;
+    overflow: hidden;
+}
+
+.featured-article.main-feature .article-image {
+    height: 300px;
+}
+
+.featured-article .article-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+}
+
+.featured-article:hover .article-image img {
+    transform: scale(1.05);
+}
+
+.featured-article .article-content {
+    padding: 30px;
+}
+
+.article-meta {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    margin-bottom: 15px;
+    font-size: 14px;
+}
+
+.article-meta .category {
+    background: #179e83;
+    color: white;
+    padding: 5px 12px;
+    border-radius: 15px;
+    font-weight: 500;
+    text-decoration: none;
+}
+
+.article-meta .category a {
+    color: white;
+    text-decoration: none;
+}
+
+.article-meta .category a:hover {
+    color: white;
+    text-decoration: none;
+}
+
+.article-meta time {
+    color: #555;
+    font-weight: 500;
+}
+
+.article-meta .read-time {
+    color: #555;
+    font-weight: 500;
+}
+
+.featured-article h3 {
+    font-size: 1.4rem;
+    font-weight: 600;
+    margin-bottom: 15px;
+    line-height: 1.3;
+}
+
+.featured-article h3 a {
+    color: #1a1a1a;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.featured-article h3 a:hover {
+    color: #148a72;
+}
+
+.featured-article p {
+    color: #555;
+    line-height: 1.6;
+    margin-bottom: 20px;
+}
+
+.article-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-top: 1px solid #f0f0f0;
+    padding-top: 15px;
+    margin-top: 15px;
+}
+
+.article-footer .read-more {
+    color: #148a72;
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.3s ease;
+}
+
+.article-footer .read-more:hover {
+    color: #144784;
+    text-decoration: underline;
+}
+
+.blog-recent {
+    padding: 80px 0;
+    background: #f8f9fa;
+}
+
+.blog-recent h2 {
+    text-align: center;
+    font-size: 2.5rem;
+    font-weight: 600;
+    margin-bottom: 60px;
+    color: #1a1a1a;
+}
+
+.articles-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 30px;
+    margin-bottom: 50px;
+}
+
+.article-card {
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    border: 1px solid #f0f0f0;
+    transition: all 0.3s ease;
+}
+
+.article-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
+}
+
+.article-card h3 {
+    font-size: 1.3rem;
+    font-weight: 600;
+    margin-bottom: 15px;
+    line-height: 1.3;
+}
+
+.article-card h3 a {
+    color: #1a1a1a;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.article-card h3 a:hover {
+    color: #148a72;
+}
+
+.article-card p {
+    color: #555;
+    line-height: 1.6;
+    margin-bottom: 20px;
+}
+
+.blog-pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+    margin-top: 40px;
+}
+
+.pagination-info {
+    color: #555;
+    font-weight: 500;
+}
+
+.blog-newsletter {
+    padding: 80px 0;
+    background: linear-gradient(135deg, #144784 0%, #179e83 100%);
+    color: white;
+    text-align: center;
+}
+
+.newsletter-content h2 {
+    font-size: 2.5rem;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: white;
+}
+
+.newsletter-content p {
+    font-size: 1.2rem;
+    margin-bottom: 40px;
+    opacity: 0.95;
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.newsletter-form .form-group {
+    display: flex;
+    max-width: 500px;
+    margin: 0 auto 20px;
+    gap: 15px;
+}
+
+.newsletter-form input {
+    flex: 1;
+    padding: 15px 20px;
+    border: none;
+    border-radius: 50px;
+    font-size: 16px;
+    background: rgba(255, 255, 255, 0.95);
+    color: #333;
+}
+
+.newsletter-form .btn {
+    padding: 15px 30px;
+    border-radius: 50px;
+    white-space: nowrap;
+}
+
+.newsletter-privacy {
+    font-size: 14px;
+    opacity: 0.8;
+    max-width: 400px;
+    margin: 0 auto;
+}
+
+.newsletter-privacy a {
+    color: white;
+    text-decoration: underline;
+}
+
+/* Blog article styles */
+.blog-article {
+    padding: 110px 0 80px;
+    background: white;
+    position: relative;
+    clear: both;
+    width: 100%;
+}
+
+.blog-article .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+    position: relative;
+}
+
+.article-header {
+    max-width: 800px;
+    margin: 0 auto 40px;
+    text-align: center;
+}
+
+.article-title {
+    font-size: 3rem;
+    font-weight: 700;
+    margin-bottom: 20px;
+    color: #1a1a1a;
+    line-height: 1.2;
+}
+
+.article-subtitle {
+    font-size: 1.3rem;
+    color: #555;
+    margin-bottom: 30px;
+    line-height: 1.6;
+}
+
+.article-author {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 30px;
+    text-align: left;
+}
+
+.author-info strong {
+    color: #1a1a1a;
+    font-weight: 600;
+    display: block;
+    margin-bottom: 5px;
+}
+
+.author-info p {
+    color: #555;
+    margin: 0;
+    font-size: 14px;
+}
+
+.article-share a {
+    color: #148a72;
+    text-decoration: none;
+    font-weight: 500;
+    padding: 8px 16px;
+    border: 1px solid #179e83;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+}
+
+.article-share a:hover {
+    background: #179e83;
+    color: white;
+}
+
+.article-image {
+    max-width: 1000px;
+    margin: 0 auto 40px;
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
+}
+
+.article-image img {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
+.article-toc {
+    max-width: 800px;
+    margin: 0 auto 40px;
+    background: #f8f9fa;
+    padding: 30px;
+    border-radius: 12px;
+    border: 1px solid #e1e5e9;
+}
+
+.article-toc h2 {
+    font-size: 1.3rem;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: #1a1a1a;
+}
+
+.article-toc ol {
+    list-style: none;
+    counter-reset: toc-counter;
+}
+
+.article-toc li {
+    counter-increment: toc-counter;
+    margin-bottom: 10px;
+}
+
+.article-toc li::before {
+    content: counter(toc-counter) ". ";
+    color: #148a72;
+    font-weight: 600;
+}
+
+.article-toc a {
+    color: #144784;
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.3s ease;
+}
+
+.article-toc a:hover {
+    color: #148a72;
+    text-decoration: underline;
+}
+
+.article-content {
+    max-width: 800px;
+    margin: 0 auto;
+    line-height: 1.7;
+    background: white;
+    position: relative;
+    z-index: 1;
+}
+
+.article-content pre {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 0;
+    margin: 25px 0;
+    overflow-x: auto;
+    position: relative;
+}
+
+.article-content pre code {
+    display: block;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    padding: 20px;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Courier New', monospace;
+    font-size: 14px;
+    line-height: 1.6;
+    color: #495057;
+    white-space: pre;
+    overflow-x: auto;
+    margin: 0;
+}
+
+.article-content code {
+    background: #f1f3f4;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Courier New', monospace;
+    font-size: 0.9em;
+    color: #d63384;
+}
+
+.article-content pre code {
+    background: transparent;
+    padding: 20px;
+    color: #495057;
+}
+
+/* Code block copy button */
+.article-content pre {
+    position: relative;
+    cursor: pointer;
+}
+
+.article-content pre:hover::before {
+    content: '📋 Copy';
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: #179e83;
+    color: white;
+    padding: 5px 10px;
+    border-radius: 4px;
+    font-size: 12px;
+    cursor: pointer;
+    z-index: 10;
+}
+
+.article-content pre[data-copied]:hover::before {
+    content: '✅ Copied!';
+    background: #10b981;
+}
+
+.article-content pre:hover {
+    border-color: #148a72;
+    box-shadow: 0 2px 8px rgba(23, 158, 131, 0.1);
+}
+
+.article-content h2 {
+    font-size: 2rem;
+    font-weight: 600;
+    margin: 40px 0 20px;
+    color: #1a1a1a;
+    border-bottom: 2px solid #179e83;
+    padding-bottom: 10px;
+}
+
+.article-content h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin: 30px 0 15px;
+    color: #144784;
+}
+
+.article-content p {
+    margin-bottom: 20px;
+    color: #444;
+}
+
+.article-content ul,
+.article-content ol {
+    margin-bottom: 20px;
+    padding-left: 25px;
+}
+
+.article-content li {
+    margin-bottom: 8px;
+    color: #444;
+}
+
+.article-content a {
+    color: #148a72;
+    text-decoration: underline;
+    transition: color 0.3s ease;
+}
+
+.article-content a:hover {
+    color: #144784;
+}
+
+.callout-box {
+    background: #f8f9fa;
+    border-left: 4px solid #179e83;
+    padding: 20px;
+    margin: 30px 0;
+    border-radius: 0 8px 8px 0;
+}
+
+.callout-box.legal-warning {
+    background: #fff3cd;
+    border-left-color: #f59e0b;
+}
+
+.callout-box h3 {
+    margin-top: 0;
+    margin-bottom: 15px;
+    color: #1a1a1a;
+}
+
+.comparison-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px;
+    margin: 30px 0;
+    width: 100%;
+    clear: both;
+}
+
+.comparison-item {
+    background: white;
+    padding: 25px;
+    border-radius: 12px;
+    border: 1px solid #e1e5e9;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.comparison-item h4 {
+    margin-bottom: 15px;
+    color: #144784;
+    font-size: 1.2rem;
+}
+
+.best-practice-box {
+    background: linear-gradient(135deg, #e8f5f3 0%, #f0f9ff 100%);
+    border: 1px solid #179e83;
+    border-radius: 12px;
+    padding: 25px;
+    margin: 30px 0;
+}
+
+.best-practice-box h3 {
+    margin-top: 0;
+    color: #144784;
+}
+
+/* Image optimization */
+img {
+    height: auto;
+    max-width: 100%;
+}
+
+/* Lazy loading support */
+img[loading="lazy"] {
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+img[loading="lazy"].loaded {
+    opacity: 1;
+}
+
+/* WebP support with fallbacks */
+picture img {
+    width: 100%;
+    height: auto;
+}
+
+/* Focus improvements for keyboard navigation */
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+textarea:focus-visible {
+    outline: 2px solid #179e83;
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px rgba(23, 158, 131, 0.1);
+}
+
+/* Reading progress bar */
+.reading-progress {
+    position: fixed;
+    top: 70px;
+    left: 0;
+    width: 0%;
+    height: 3px;
+    background: linear-gradient(90deg, #179e83, #144784);
+    z-index: 999;
+    transition: width 0.3s ease;
+}
+
+/* Category link styles */
+.category-link {
+    background: #148069;
+    color: white !important;
+    padding: 5px 12px;
+    border-radius: 15px;
+    font-weight: 500;
+    text-decoration: none;
+    transition: background 0.3s ease;
+}
+
+.category-link:hover {
+    background: #144784;
+    color: white !important;
+    text-decoration: none;
+}
+
+.loading::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 20px;
+    height: 20px;
+    margin: -10px 0 0 -10px;
+    border: 2px solid #f3f3f3;
+    border-top: 2px solid #179e83;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Notification styles */
+.notification {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 10000;
+    max-width: 400px;
+    padding: 16px 20px;
+    border-radius: 8px;
+    color: white;
+    font-family: 'Roboto Slab', sans-serif;
+    font-size: 14px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    transition: all 0.3s ease;
+}
+
+.notification-success {
+    background: #10b981;
+}
+
+.notification-error {
+    background: #ef4444;
+}
+
+.notification-info {
+    background: #3b82f6;
+}
+
+.notification-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+}
+
+.notification-close {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 18px;
+    cursor: pointer;
+    padding: 12px;
+    width: 48px;
+    height: 48px;
+    min-width: 48px;
+    min-height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: -12px -12px -12px 0;
+}
+
+/* Scroll to top button */
+.scroll-top-btn {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    width: 50px;
+    height: 50px;
+    border: none;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #179e83 0%, #144784 100%);
+    color: white;
+    font-size: 20px;
+    cursor: pointer;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+    z-index: 1000;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.scroll-top-btn:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+}
+
+/* Tooltip styles */
+.tooltip {
+    position: absolute;
+    background: #1a1a1a;
+    color: white;
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 14px;
+    white-space: nowrap;
+    z-index: 10000;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+}
+
+/* Form validation states */
+.form-group.error input,
+.form-group.error select,
+.form-group.error textarea {
+    border-color: #ef4444;
+    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+.form-group.success input,
+.form-group.success select,
+.form-group.success textarea {
+    border-color: #10b981;
+    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
+}
+
+.form-error-message {
+    color: #ef4444;
+    font-size: 12px;
+    margin-top: 4px;
+    display: block;
+}
+
+/* Image loading states */
+img.loading {
+    background: #f0f0f0;
+    opacity: 0.7;
+}
+
+img.loaded {
+    transition: opacity 0.3s ease;
+    opacity: 1;
+}
+
+/* Enhanced button hover effects */
+.btn {
+    position: relative;
+    overflow: hidden;
+}
+
+.btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.5s;
+}
+
+.btn:hover::before {
+    left: 100%;
+}
+
+/* Print styles */
+@media print {
+    .navbar,
+    .footer,
+    .scroll-top-btn,
+    .notification {
+        display: none !important;
+    }
+    
+    .hero {
+        background: white !important;
+        color: black !important;
+    }
+    
+    .page-hero,
+    .service-hero {
+        background: white !important;
+        color: black !important;
+    }
+    
+    body {
+        font-size: 12pt;
+        line-height: 1.4;
+    }
+    
+    h1, h2, h3, h4, h5, h6 {
+        color: black !important;
+        page-break-after: avoid;
+    }
+    
+    .container {
+        max-width: none;
+        margin: 0;
+        padding: 0;
+    }
+}
+
+/* Accessibility */
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+/* Focus styles for accessibility */
+button:focus,
+input:focus,
+select:focus,
+textarea:focus,
+a:focus {
+    outline: 2px solid #179e83;
+    outline-offset: 2px;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+    .btn-primary {
+        background: #000;
+        border: 2px solid #000;
+    }
+    
+    .highlight {
+        background: #000;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg-primary: #1a1a1a;
+        --bg-secondary: #2d2d2d;
+        --text-primary: #ffffff;
+        --text-secondary: #cccccc;
+    }
+}
+
+/* Focus visible improvements */
+.btn:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+a:focus-visible {
+    outline: 2px solid #179e83;
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px rgba(23, 158, 131, 0.1);
+}
+
+/* Skip to content link for accessibility */
+.skip-to-content {
+    position: absolute;
+    top: -40px;
+    left: 6px;
+    background: #179e83;
+    color: white;
+    padding: 8px;
+    border-radius: 4px;
+    text-decoration: none;
+    z-index: 100000;
+    transition: top 0.3s;
+}
+
+.skip-to-content:focus {
+    top: 6px;
+}
+
+/* Screen reader only content */
+.visually-hidden {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+}
+
+/* Error page specific improvements */
+.error-container {
+    position: relative;
+}
+
+/* Improved form styling */
+.form-group {
+    position: relative;
+}
+
+.form-group label {
+    transition: all 0.3s ease;
+}
+
+.form-group input:focus + label,
+.form-group select:focus + label,
+.form-group textarea:focus + label {
+    color: #148a72;
+}
+
+/* Status indicators */
+.status-indicator {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    margin-right: 8px;
+}
+
+.status-online {
+    background: #10b981;
+    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
+    animation: pulse-green 2s infinite;
+}
+
+.status-offline {
+    background: #ef4444;
+}
+
+.status-pending {
+    background: #f59e0b;
+    animation: pulse-yellow 2s infinite;
+}
+
+@keyframes pulse-green {
+    0% {
+        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
+    }
+    70% {
+        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+    }
+}
+
+@keyframes pulse-yellow {
+    0% {
+        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
+    }
+    70% {
+        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
+    }
+}
+
+/* NEW COMPONENT STYLES - Missing CSS for enhanced pages */
+
+/* Breadcrumb Navigation */
+.breadcrumb {
+    background: #f8f9fa;
+    padding: 20px 0;
+    border-bottom: 1px solid #e1e5e9;
+}
+
+.breadcrumb nav {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+.breadcrumb ol {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    align-items: center;
+    gap: 8px;
+}
+
+.breadcrumb li {
+    display: flex;
+    align-items: center;
+}
+
+.breadcrumb li:not(:last-child)::after {
+    content: '>';
+    margin-left: 8px;
+    color: #555;
+    font-weight: 500;
+}
+
+.breadcrumb a {
+    color: #144784;
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.3s ease;
+}
+
+.breadcrumb a:hover {
+    color: #148a72;
+    text-decoration: underline;
+}
+
+.breadcrumb li[aria-current="page"] span {
+    color: #555;
+    font-weight: 500;
+}
+
+/* Page Hero Section */
+.page-hero {
+    background: linear-gradient(135deg, #144784 0%, #179e83 100%);
+    color: white;
+    padding: 120px 0 80px;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+}
+
+.page-hero::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 300"><path d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,208C1248,224,1344,192,1392,176L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z" fill="%23ffffff" opacity="0.1"/></svg>') no-repeat bottom;
+    background-size: cover;
+}
+
+.page-hero .hero-content {
+    position: relative;
+    z-index: 2;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.page-hero h1 {
+    font-size: 3rem;
+    font-weight: 700;
+    margin-bottom: 20px;
+    color: white;
+    line-height: 1.2;
+}
+
+.page-hero .hero-subtitle {
+    font-size: 1.25rem;
+    margin-bottom: 30px;
+    opacity: 0.95;
+    line-height: 1.6;
+}
+
+.page-hero .hero-stats {
+    display: flex;
+    justify-content: center;
+    gap: 40px;
+    margin-top: 40px;
+}
+
+.page-hero .hero-search {
+    max-width: 500px;
+    margin: 30px auto 0;
+    position: relative;
+}
+
+.page-hero .hero-search form {
+    position: relative;
+    display: block;
+}
+
+.page-hero .hero-search input {
+    width: 100%;
+    padding: 15px 50px 15px 20px;
+    border: none;
+    border-radius: 50px;
+    font-size: 16px;
+    background: rgba(255, 255, 255, 0.95);
+    color: #333;
+    box-sizing: border-box;
+}
+
+.page-hero .hero-search button {
+    position: absolute;
+    right: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    font-size: 18px;
+    cursor: pointer;
+    color: #555;
+    transition: color 0.3s ease;
+}
+
+.page-hero .hero-search button:hover {
+    color: #333;
+}
+
+/* Service Hero Section */
+.service-hero {
+    background: linear-gradient(135deg, #144784 0%, #179e83 100%);
+    color: white;
+    padding: 120px 0 80px;
+    text-align: center;
+    position: relative;
+}
+
+.service-hero .hero-content {
+    max-width: 900px;
+    margin: 0 auto;
+}
+
+.service-hero h1 {
+    font-size: 3rem;
+    font-weight: 700;
+    margin-bottom: 20px;
+    line-height: 1.2;
+}
+
+.service-hero .hero-subtitle {
+    font-size: 1.25rem;
+    margin-bottom: 40px;
+    opacity: 0.95;
+    line-height: 1.6;
+}
+
+.service-hero .hero-stats {
+    display: flex;
+    justify-content: center;
+    gap: 40px;
+    margin: 40px 0;
+}
+
+.service-hero .hero-cta {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+/* Service Features Section */
+.service-features {
+    padding: 80px 0;
+    background: #f8f9fa;
+}
+
+.service-features h2 {
+    text-align: center;
+    font-size: 2.5rem;
+    font-weight: 600;
+    margin-bottom: 60px;
+    color: #1a1a1a;
+}
+
+.service-features .features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 30px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.feature-card {
+    background: white;
+    padding: 40px;
+    border-radius: 16px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    transition: all 0.3s ease;
+    border: 1px solid #f0f0f0;
+}
+
+.feature-card:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
+}
+
+.feature-card .feature-icon {
+    font-size: 3rem;
+    margin-bottom: 20px;
+    display: block;
+}
+
+.feature-card h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 16px;
+    color: #1a1a1a;
+}
+
+.feature-card p {
+    color: #555;
+    margin-bottom: 20px;
+    line-height: 1.6;
+}
+
+.feature-card ul {
+    list-style: none;
+    padding: 0;
+}
+
+.feature-card li {
+    padding: 8px 0;
+    color: #555;
+    position: relative;
+    padding-left: 20px;
+}
+
+.feature-card li:before {
+    content: '✓';
+    position: absolute;
+    left: 0;
+    color: #148a72;
+    font-weight: bold;
+}
+
+/* Industries Section */
+.industries {
+    padding: 80px 0;
+    background: white;
+}
+
+.industries h2 {
+    text-align: center;
+    font-size: 2.5rem;
+    font-weight: 600;
+    margin-bottom: 60px;
+    color: #1a1a1a;
+}
+
+.industries-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 30px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.industry-card {
+    background: #f8f9fa;
+    padding: 30px;
+    border-radius: 12px;
+    transition: all 0.3s ease;
+    border: 1px solid #e1e5e9;
+}
+
+.industry-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.industry-card h3 {
+    font-size: 1.3rem;
+    font-weight: 600;
+    margin-bottom: 12px;
+    color: #144784;
+}
+
+.industry-card p {
+    color: #555;
+    line-height: 1.6;
+}
+
+/* Pricing Section */
+.pricing {
+    padding: 80px 0;
+    background: #f8f9fa;
+}
+
+.pricing h2 {
+    text-align: center;
+    font-size: 2.5rem;
+    font-weight: 600;
+    margin-bottom: 60px;
+    color: #1a1a1a;
+}
+
+.pricing-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 30px;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.pricing-card {
+    background: white;
+    padding: 40px 30px;
+    border-radius: 16px;
+    text-align: center;
+    position: relative;
+    border: 2px solid #e1e5e9;
+    transition: all 0.3s ease;
+}
+
+.pricing-card.featured {
+    border-color: #148a72;
+    transform: scale(1.05);
+    box-shadow: 0 8px 40px rgba(23, 158, 131, 0.15);
+}
+
+.pricing-card.featured::before {
+    content: 'Most Popular';
+    position: absolute;
+    top: -12px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #179e83;
+    color: white;
+    padding: 8px 20px;
+    border-radius: 20px;
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.pricing-card h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: #1a1a1a;
+}
+
+.pricing-card .price {
+    font-size: 3rem;
+    font-weight: 700;
+    color: #148a72;
+    margin-bottom: 30px;
+    line-height: 1;
+}
+
+.pricing-card .price span {
+    font-size: 1rem;
+    color: #555;
+    font-weight: 400;
+}
+
+.pricing-card ul {
+    list-style: none;
+    padding: 0;
+    margin-bottom: 30px;
+}
+
+.pricing-card li {
+    padding: 10px 0;
+    color: #555;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.pricing-card li:last-child {
+    border-bottom: none;
+}
+
+.pricing-card .pricing-note {
+    font-size: 14px;
+    color: #999;
+    margin-top: 20px;
+    font-style: italic;
+}
+
+.pricing-cta {
+    text-align: center;
+    margin-top: 50px;
+}
+
+/* FAQ Sections */
+.faq {
+    padding: 80px 0;
+    background: white;
+}
+
+.faq h2 {
+    text-align: center;
+    font-size: 2.5rem;
+    font-weight: 600;
+    margin-bottom: 60px;
+    color: #1a1a1a;
+}
+
+.faq-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: 30px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.faq-item {
+    background: #f8f9fa;
+    border-radius: 12px;
+    overflow: hidden;
+    border: 1px solid #e1e5e9;
+}
+
+.faq-item h3 {
+    background: #144784;
+    color: white;
+    padding: 20px;
+    margin: 0;
+    font-size: 1.2rem;
+    font-weight: 600;
+}
+
+.faq-item p {
+    padding: 20px;
+    margin: 0;
+    color: #555;
+    line-height: 1.6;
+}
+
+/* Enhanced FAQ Components */
+.faq-categories {
+    padding: 60px 0;
+    background: white;
+}
+
+.categories-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 30px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.category-card {
+    background: #f8f9fa;
+    padding: 30px;
+    border-radius: 12px;
+    text-align: center;
+    text-decoration: none;
+    color: inherit;
+    transition: all 0.3s ease;
+    border: 1px solid #e1e5e9;
+}
+
+.category-card:hover {
+    transform: translateY(-5px);
+    background: white;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+    color: inherit;
+    text-decoration: none;
+}
+
+.category-icon {
+    font-size: 3rem;
+    margin-bottom: 20px;
+    display: block;
+}
+
+.category-card h3 {
+    font-size: 1.3rem;
+    font-weight: 600;
+    margin-bottom: 12px;
+    color: #144784;
+}
+
+.category-card p {
+    color: #555;
+    line-height: 1.4;
+    margin: 0;
+}
+
+.faq-content {
+    padding: 60px 0;
+    background: #f8f9fa;
+}
+
+.faq-section {
+    max-width: 1000px;
+    margin: 0 auto 60px;
+}
+
+.faq-section h2 {
+    font-size: 2rem;
+    font-weight: 600;
+    margin-bottom: 40px;
+    color: #1a1a1a;
+    border-bottom: 3px solid #179e83;
+    padding-bottom: 10px;
+}
+
+.faq-question {
+    width: 100%;
+    background: white;
+    border: none;
+    padding: 20px;
+    text-align: left;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: #1a1a1a;
+    border-radius: 8px;
+    margin-bottom: 2px;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.faq-question:hover {
+    background: #f8f9fa;
+    transform: translateX(5px);
+}
+
+.faq-question[aria-expanded="true"],
+.faq-question.active {
+    background: #179e83;
+    color: white;
+}
+
+.faq-icon {
+    font-size: 1.5rem;
+    font-weight: bold;
+    transition: transform 0.3s ease;
+}
+
+.faq-question[aria-expanded="true"] .faq-icon,
+.faq-question.active .faq-icon {
+    transform: rotate(180deg);
+}
+
+.faq-answer {
+    background: white;
+    padding: 0 20px;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease, padding 0.3s ease;
+    border-radius: 0 0 8px 8px;
+    border-top: 1px solid #e1e5e9;
+    margin-bottom: 20px;
+}
+
+.faq-answer.active {
+    padding: 20px;
+    max-height: 1000px;
+}
+
+.faq-answer p {
+    margin-bottom: 15px;
+    color: #555;
+    line-height: 1.6;
+}
+
+.faq-answer ul {
+    margin-left: 20px;
+    margin-bottom: 15px;
+}
+
+.faq-answer li {
+    margin-bottom: 8px;
+    color: #555;
+    line-height: 1.5;
+}
+
+.faq-cta {
+    padding: 80px 0;
+    background: linear-gradient(135deg, #144784 0%, #179e83 100%);
+    color: white;
+    text-align: center;
+}
+
+.faq-cta h2 {
+    font-size: 2.5rem;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: white;
+}
+
+.faq-cta p {
+    font-size: 1.2rem;
+    margin-bottom: 40px;
+    opacity: 0.95;
+}
+
+.faq-cta .cta-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-bottom: 50px;
+    flex-wrap: wrap;
+}
+
+.contact-options {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 30px;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.contact-option {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 15px;
+    text-align: left;
+}
+
+.contact-icon {
+    font-size: 2rem;
+}
+
+.contact-option strong {
+    display: block;
+    margin-bottom: 5px;
+    color: white;
+}
+
+.contact-option p {
+    margin: 0;
+    opacity: 0.9;
+}
+
+.contact-option a {
+    color: white;
+    text-decoration: none;
+}
+
+.contact-option a:hover {
+    text-decoration: underline;
+}
+
+/* CTA Section */
+.cta {
+    padding: 80px 0;
+    background: linear-gradient(135deg, #144784 0%, #179e83 100%);
+    color: white;
+    text-align: center;
+}
+
+.cta-content h2 {
+    font-size: 2.5rem;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: white;
+}
+
+.cta-content p {
+    font-size: 1.2rem;
+    margin-bottom: 40px;
+    opacity: 0.95;
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.cta-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+/* Case Studies Specific */
+.case-study {
+    background: white;
+    border-radius: 16px;
+    padding: 40px;
+    margin-bottom: 40px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    border: 1px solid #f0f0f0;
+}
+
+.case-study.featured {
+    border: 2px solid #179e83;
+    box-shadow: 0 8px 40px rgba(23, 158, 131, 0.15);
+}
+
+.case-study-content {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 40px;
+    align-items: start;
+}
+
+.case-study-meta {
+    display: flex;
+    gap: 15px;
+    margin-bottom: 20px;
+}
+
+.case-study-meta span {
+    background: #f0f0f0;
+    color: #555;
+    padding: 5px 12px;
+    border-radius: 15px;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.case-study h3 {
+    font-size: 1.8rem;
+    font-weight: 600;
+    margin-bottom: 15px;
+    color: #1a1a1a;
+    line-height: 1.3;
+}
+
+.case-study-intro {
+    font-size: 1.1rem;
+    color: #555;
+    margin-bottom: 30px;
+    line-height: 1.6;
+}
+
+.challenge,
+.solution,
+.results {
+    margin-bottom: 30px;
+}
+
+.challenge h4,
+.solution h4,
+.results h4 {
+    font-size: 1.2rem;
+    font-weight: 600;
+    margin-bottom: 15px;
+    color: #144784;
+}
+
+.results-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: 20px;
+    margin: 20px 0;
+}
+
+.result-item {
+    text-align: center;
+    padding: 20px;
+    background: #f8f9fa;
+    border-radius: 12px;
+}
+
+.result-number {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #148a72;
+    display: block;
+    margin-bottom: 5px;
+}
+
+.result-label {
+    font-size: 14px;
+    color: #555;
+    font-weight: 500;
+}
+
+.testimonial {
+    background: #f8f9fa;
+    padding: 30px;
+    border-radius: 12px;
+    margin-top: 30px;
+    border-left: 4px solid #179e83;
+}
+
+.testimonial p {
+    font-style: italic;
+    font-size: 1.1rem;
+    color: #444;
+    margin-bottom: 20px;
+    line-height: 1.6;
+}
+
+.testimonial cite {
+    display: block;
+    font-style: normal;
+}
+
+.testimonial cite strong {
+    color: #1a1a1a;
+    font-weight: 600;
+    display: block;
+    margin-bottom: 5px;
+}
+
+.testimonial cite span {
+    color: #555;
+    font-size: 14px;
+}
+
+.case-study-visual {
+    background: #f8f9fa;
+    padding: 30px;
+    border-radius: 12px;
+    text-align: center;
+}
+
+.chart-container h5 {
+    font-size: 1.1rem;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: #1a1a1a;
+}
+
+/* Industries Overview */
+.industries-overview {
+    padding: 80px 0;
+    background: white;
+}
+
+.industries-overview h2 {
+    text-align: center;
+    font-size: 2.5rem;
+    font-weight: 600;
+    margin-bottom: 60px;
+    color: #1a1a1a;
+}
+
+.industry-stat {
+    text-align: center;
+    padding: 30px;
+    background: #f8f9fa;
+    border-radius: 12px;
+    transition: all 0.3s ease;
+}
+
+.industry-stat:hover {
+    transform: translateY(-5px);
+    background: white;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+}
+
+.industry-icon {
+    font-size: 3rem;
+    margin-bottom: 20px;
+    display: block;
+}
+
+.industry-stat h3 {
+    font-size: 1.3rem;
+    font-weight: 600;
+    margin-bottom: 15px;
+    color: #144784;
+}
+
+.industry-stat .stat-number {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: #148a72;
+    display: block;
+    margin-bottom: 5px;
+}
+
+.industry-stat .stat-label {
+    font-size: 14px;
+    color: #555;
+    font-weight: 500;
+}
+
+/* Related Articles Section */
+.related-articles {
+    padding: 60px 0;
+    background: #f8f9fa;
+    border-top: 1px solid #e1e5e9;
+    margin-top: 60px;
+}
+
+.related-articles h2,
+.related-articles h3 {
+    font-size: 2rem;
+    font-weight: 600;
+    margin-bottom: 40px;
+    color: #1a1a1a;
+    text-align: center;
+}
+
+/* Handle both aside and section elements */
+aside.related-articles {
+    padding: 40px 0;
+    background: #f8f9fa;
+    border-top: 1px solid #e1e5e9;
+    margin-top: 40px;
+}
+
+.related-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 30px;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.related-card {
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+    border: 1px solid #e1e5e9;
+    transition: all 0.3s ease;
+}
+
+.related-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+}
+
+.related-card h3,
+.related-card h4 {
+    font-size: 1.3rem;
+    font-weight: 600;
+    margin-bottom: 15px;
+    line-height: 1.3;
+}
+
+.related-card h3 a,
+.related-card h4 a {
+    color: #1a1a1a;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.related-card h3 a:hover,
+.related-card h4 a:hover {
+    color: #148a72;
+}
+
+.related-card .category {
+    background: #179e83;
+    color: white;
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    font-weight: 500;
+    display: inline-block;
+    margin-bottom: 12px;
+}
+
+.related-card span.category {
+    display: inline-block;
+    margin-bottom: 12px;
+}
+
+.related-card p {
+    color: #555;
+    line-height: 1.6;
+    margin-bottom: 15px;
+}
+
+.related-card .read-time {
+    color: #148a72;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+/* Category links section */
+.category-links {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-top: 2rem;
+    width: 100%;
+}
+
+.category-links .btn {
+    min-width: 200px;
+}
+
+/* Mobile responsive for category links */
+@media (max-width: 768px) {
+    .category-links {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .category-links .btn {
+        width: 100%;
+        max-width: 300px;
+    }
+}
+
+/* Button text visibility fix */
+.btn * {
+    color: inherit;
+    text-decoration: inherit;
+}
+
+.btn:visited,
+.btn:link,
+.btn:active {
+    color: inherit;
+    text-decoration: none;
+}
+
+.btn-primary,
+.btn-primary:visited,
+.btn-primary:link,
+.btn-primary:active {
+    color: white !important;
+    text-decoration: none !important;
+}
+
+.btn-primary:hover,
+.btn-primary:focus {
+    color: white !important;
+    text-decoration: none !important;
+}
+
+/* Expert Consultation CTA */
+.expert-consultation-cta {
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+    border: 2px solid #179e83;
+    border-radius: 12px;
+    padding: 40px;
+    text-align: center;
+    margin: 40px 0;
+    clear: both;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.expert-consultation-cta h3 {
+    color: #144784;
+    font-size: 1.5rem;
+    margin-bottom: 15px;
+    font-weight: 600;
+}
+
+.expert-consultation-cta p {
+    color: #555;
+    margin-bottom: 25px;
+    font-size: 1.1rem;
+    line-height: 1.6;
+}
+
+.expert-consultation-cta .btn {
+    font-size: 1.1rem;
+    padding: 15px 30px;
+    min-width: 200px;
+    font-weight: 600;
+}
+
+/* Testimonials Grid */
+.testimonials {
+    padding: 80px 0;
+    background: #f8f9fa;
+}
+
+.testimonials h2 {
+    text-align: center;
+    font-size: 2.5rem;
+    font-weight: 600;
+    margin-bottom: 60px;
+    color: #1a1a1a;
+}
+
+.testimonials-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 30px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.testimonial-card {
+    background: white;
+    padding: 40px;
+    border-radius: 16px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    border: 1px solid #f0f0f0;
+    position: relative;
+}
+
+.testimonial-card::before {
+    content: '"';
+    position: absolute;
+    top: -10px;
+    left: 30px;
+    font-size: 4rem;
+    color: #148a72;
+    font-family: serif;
+    line-height: 1;
+}
+
+.testimonial-content p {
+    font-style: italic;
+    font-size: 1.1rem;
+    color: #444;
+    margin-bottom: 30px;
+    line-height: 1.6;
+}
+
+.testimonial-author {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.author-info strong {
+    color: #1a1a1a;
+    font-weight: 600;
+    display: block;
+    margin-bottom: 5px;
+}
+
+.author-info span {
+    color: #555;
+    font-size: 14px;
+}
+
+.company-logo {
+    width: 60px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.company-logo img {
+    max-width: 100%;
+    max-height: 100%;
+    filter: grayscale(100%);
+    opacity: 0.7;
+}
+
+/* Social Proof Section */
+.social-proof {
+    padding: 80px 0;
+    background: white;
+}
+
+.social-proof h2 {
+    text-align: center;
+    font-size: 2.5rem;
+    font-weight: 600;
+    margin-bottom: 60px;
+    color: #1a1a1a;
+}
+
+.client-logos {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 30px;
+    margin: 40px 0 60px;
+    padding: 40px 0;
+    border-top: 1px solid #e1e5e9;
+    border-bottom: 1px solid #e1e5e9;
+}
+
+.logo-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    background: #f8f9fa;
+    border-radius: 8px;
+    min-height: 80px;
+    color: #999;
+    font-weight: 500;
+    text-align: center;
+    transition: all 0.3s ease;
+}
+
+.logo-item:hover {
+    background: white;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    transform: translateY(-2px);
+}
+
+/* Responsive Updates for New Components */
+@media (max-width: 768px) {
+    .case-study-content {
+        grid-template-columns: 1fr;
+        gap: 30px;
+    }
+    
+    .results-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 15px;
+    }
+    
+    .pricing-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .pricing-card.featured {
+        transform: none;
+        margin: 20px 0;
+    }
+    
+    .categories-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 20px;
+    }
+    
+    .contact-options {
+        grid-template-columns: 1fr;
+        gap: 20px;
+    }
+    
+    .contact-option {
+        justify-content: flex-start;
+    }
+    
+    .faq-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .page-hero h1,
+    .service-hero h1 {
+        font-size: 2.2rem;
+    }
+    
+    .breadcrumb ol {
+        flex-wrap: wrap;
+    }
+    
+    .client-logos {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 20px;
+    }
+}
+
+@media (max-width: 480px) {
+    .categories-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .results-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .case-study {
+        padding: 30px 20px;
+    }
+    
+    .service-hero .hero-stats,
+    .page-hero .hero-stats {
+        flex-direction: column;
+        gap: 20px;
+    }
+    
+    .hero-cta {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .cta-buttons {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .related-grid {
+        grid-template-columns: 1fr;
+        gap: 20px;
+    }
+    
+    .related-card {
+        padding: 25px 20px;
+    }
+    
+    .expert-consultation-cta {
+        padding: 30px 20px;
+        margin: 30px 0;
+    }
+    
+    .article-content pre {
+        margin: 20px -20px;
+        border-radius: 0;
+        border-left: none;
+        border-right: none;
+    }
+    
+    .article-content pre code {
+        padding: 15px 20px;
+        font-size: 13px;
+    }
+    
+    .article-content pre:hover::before {
+        top: 5px;
+        right: 5px;
+        font-size: 11px;
+        padding: 4px 8px;
+    }
+}
+
+/* Technology Showcase Section */
+.technology-showcase {
+    padding: 80px 0;
+    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+    position: relative;
+}
+
+.technology-showcase::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e2e8f0" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
+    opacity: 0.3;
+    pointer-events: none;
+}
+
+.technology-showcase .container {
+    position: relative;
+    z-index: 1;
+}
+
+.technology-showcase h2 {
+    text-align: center;
+    margin-bottom: 50px;
+    color: #1a202c;
+    font-size: 2.5rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, #144784 0%, #179e83 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.tech-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 30px;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.tech-card {
+    background: white;
+    padding: 40px 30px;
+    border-radius: 16px;
+    text-align: center;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    transition: all 0.3s ease;
+    border: 1px solid #e2e8f0;
+    position: relative;
+    overflow: hidden;
+}
+
+.tech-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(135deg, #144784 0%, #179e83 100%);
+    transform: scaleX(0);
+    transition: transform 0.3s ease;
+}
+
+.tech-card:hover::before {
+    transform: scaleX(1);
+}
+
+.tech-card:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+    border-color: #cbd5e0;
+}
+
+.tech-icon {
+    font-size: 3rem;
+    margin-bottom: 20px;
+    display: block;
+    line-height: 1;
+    filter: grayscale(0.2);
+    transition: all 0.3s ease;
+}
+
+.tech-card:hover .tech-icon {
+    transform: scale(1.1);
+    filter: grayscale(0);
+}
+
+.tech-card h3 {
+    color: #1a202c;
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin: 0 0 15px 0;
+    transition: color 0.3s ease;
+}
+
+.tech-card:hover h3 {
+    color: #144784;
+}
+
+.tech-card p {
+    color: #64748b;
+    font-size: 1rem;
+    line-height: 1.6;
+    margin: 0;
+    font-weight: 500;
+}
+
+/* Responsive Design for Technology Showcase */
+@media (max-width: 768px) {
+    .technology-showcase {
+        padding: 60px 0;
+    }
+    
+    .technology-showcase h2 {
+        font-size: 2rem;
+        margin-bottom: 40px;
+    }
+    
+    .tech-grid {
+        grid-template-columns: 1fr;
+        gap: 20px;
+    }
+    
+    .tech-card {
+        padding: 30px 20px;
+    }
+    
+    .tech-icon {
+        font-size: 2.5rem;
+        margin-bottom: 15px;
+    }
+    
+    .tech-card h3 {
+        font-size: 1.3rem;
+    }
+}
+
+/* Capabilities Grid (used in project-types.php) */
+.capabilities-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 40px;
+    margin: 40px 0;
+}
+
+.capability-card {
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    border-left: 4px solid #179e83;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.capability-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+    border-left-color: #144784;
+}
+
+.capability-card h3 {
+    color: #1a202c;
+    font-size: 1.3rem;
+    font-weight: 600;
+    margin: 0 0 15px 0;
+    transition: color 0.3s ease;
+}
+
+.capability-card:hover h3 {
+    color: #144784;
+}
+
+.capability-card p {
+    color: #64748b;
+    line-height: 1.6;
+    margin: 0 0 20px 0;
+}
+
+.capability-card ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.capability-card li {
+    color: #4a5568;
+    margin: 8px 0;
+    padding-left: 20px;
+    position: relative;
+    font-size: 0.95rem;
+}
+
+.capability-card li::before {
+    content: '✓';
+    position: absolute;
+    left: 0;
+    color: #148a72;
+    font-weight: bold;
+    font-size: 1rem;
+}
+
+/* Technology badges/tags styling */
+.tech-tag {
+    display: inline-block;
+    background: #179e83;
+    color: white;
+    padding: 6px 12px;
+    border-radius: 20px;
+    font-size: 0.9rem;
+    margin: 4px 8px 4px 0;
+    font-weight: 500;
+    transition: all 0.3s ease;
+}
+
+.tech-tag:hover {
+    background: #11725e;
+    transform: translateY(-2px);
+    box-shadow: 0 2px 8px rgba(23, 158, 131, 0.3);
+}
+
+/* Responsive design for capabilities grid */
+@media (max-width: 768px) {
+    .capabilities-grid {
+        grid-template-columns: 1fr;
+        gap: 20px;
+        margin: 30px 0;
+    }
+    
+    .capability-card {
+        padding: 25px 20px;
+    }
+    
+    .capability-card h3 {
+        font-size: 1.2rem;
+    }
+}
+
+/* Fix for navbar overlap on content pages */
+main {
+    padding-top: 90px; /* Add padding to account for fixed navbar (70px + 20px buffer) */
+}
+
+/* Specific fix for legal content pages */
+.legal-content {
+    padding-top: 120px !important; /* Override inline styles for legal pages */
+}
+
+/* Also ensure any page sections that might be affected have proper spacing */
+.page-content {
+    padding-top: 90px;
+}
+
+/* For hero sections that should start right under navbar */
+.hero {
+    padding-top: 140px; /* 120px base + 20px for navbar */
+}
+
+/* For about page hero */
+.about-hero {
+    padding-top: 140px; /* 120px base + 20px for navbar */
+}
+
+/* For FAQ page hero */
+.faq-hero {
+    padding-top: 140px; /* 120px base + 20px for navbar */
+}
+
+/* For project types and other page heroes */
+.page-hero {
+    padding-top: 140px; /* 120px base + 20px for navbar */
+}
+
+/* Hide reCAPTCHA badge */
+.grecaptcha-badge {
+    visibility: hidden !important;
+}
+
+/* Additional hero graphic animations */
+.hero-graphic .data-line-1,
+.hero-graphic .data-line-2,
+.hero-graphic .data-line-3,
+.hero-graphic .data-line-4,
+.hero-graphic .data-line-5,
+.hero-graphic .data-line-6 {
+    animation: data-pulse 3s ease-in-out infinite;
+}
+
+.hero-graphic .data-line-2 {
+    animation-delay: 0.5s;
+}
+
+.hero-graphic .data-line-3 {
+    animation-delay: 1s;
+}
+
+.hero-graphic .data-line-4 {
+    animation-delay: 1.5s;
+}
+
+.hero-graphic .data-line-5 {
+    animation-delay: 2s;
+}
+
+.hero-graphic .data-line-6 {
+    animation-delay: 2.5s;
+}
+
+/* ============================================
+   UNIFIED COMPONENT STYLES
+   Added for UI consistency across all pages
+   ============================================ */
+
+/* CSS Variables for Brand Consistency */
+:root {
+    --color-primary: #148069;
+    --color-primary-dark: #11725e;
+    --color-secondary: #144784;
+    --color-secondary-light: #1a5a9e;
+    --color-accent: #1a5a9e;
+    --gradient-hero: linear-gradient(135deg, #144784 0%, #179e83 100%);
+    --gradient-hero-alt: linear-gradient(135deg, #144784 0%, #1a5a9e 100%);
+    --gradient-cta: linear-gradient(135deg, #144784 0%, #179e83 100%);
+    --color-text: #444444;
+    --color-text-dark: #1a1a1a;
+    --color-text-light: #666666;
+    --color-border: #e1e5e9;
+    --color-bg-light: #f8f9fa;
+    --star-color: #f0c14b;
+}
+
+/* Dark Testimonials Section (Homepage) */
+.testimonials-section-dark {
+    padding: 80px 0;
+    background: var(--gradient-hero-alt);
+    color: white;
+}
+
+.testimonials-section-dark .section-header {
+    text-align: center;
+    margin-bottom: 50px;
+}
+
+.testimonials-section-dark .section-header h2 {
+    color: white;
+    font-size: 2.2rem;
+    margin-bottom: 16px;
+}
+
+.testimonials-section-dark .section-header p {
+    color: rgba(255, 255, 255, 0.9);
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.testimonials-dark-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 30px;
+}
+
+.testimonial-card-dark {
+    background: rgba(255, 255, 255, 0.1);
+    padding: 35px;
+    border-radius: 12px;
+    backdrop-filter: blur(10px);
+    transition: all 0.3s ease;
+}
+
+.testimonial-card-dark:hover {
+    background: rgba(255, 255, 255, 0.15);
+    transform: translateY(-5px);
+}
+
+.testimonial-stars {
+    display: flex;
+    gap: 5px;
+    margin-bottom: 20px;
+}
+
+.testimonial-stars .star {
+    color: var(--star-color);
+    font-size: 1.3rem;
+}
+
+.testimonial-card-dark .testimonial-text {
+    font-style: italic;
+    margin-bottom: 25px;
+    line-height: 1.7;
+    font-size: 1.05rem;
+    color: white;
+}
+
+.testimonial-author-dark {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.testimonial-avatar {
+    width: 50px;
+    height: 50px;
+    background: var(--color-primary);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 1.2rem;
+    color: white;
+}
+
+.testimonial-author-info .author-name {
+    font-weight: 600;
+    margin: 0;
+    color: white;
+}
+
+.testimonial-author-info .author-role {
+    opacity: 0.8;
+    margin: 0;
+    font-size: 0.9rem;
+    color: white;
+}
+
+.testimonials-cta {
+    text-align: center;
+    margin-top: 40px;
+}
+
+.testimonials-cta .btn-white {
+    background: white;
+    color: var(--color-secondary);
+    padding: 14px 28px;
+    border-radius: 8px;
+    text-decoration: none;
+    font-weight: 600;
+    display: inline-block;
+    transition: all 0.3s ease;
+}
+
+.testimonials-cta .btn-white:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.3);
+}
+
+/* Unified Location Hero (for location pages) */
+.location-hero {
+    background: var(--gradient-hero);
+    color: white;
+    padding: 120px 0 80px;
+    text-align: center;
+    position: relative;
+}
+
+.location-hero .hero-content {
+    max-width: 900px;
+    margin: 0 auto;
+    position: relative;
+    z-index: 2;
+}
+
+.location-hero h1 {
+    font-size: 3rem;
+    font-weight: 700;
+    margin-bottom: 20px;
+    line-height: 1.2;
+}
+
+.location-hero .hero-subtitle {
+    font-size: 1.25rem;
+    margin-bottom: 40px;
+    opacity: 0.95;
+    line-height: 1.6;
+}
+
+.location-hero .hero-stats {
+    display: flex;
+    justify-content: center;
+    gap: 40px;
+    margin: 40px 0;
+}
+
+.location-hero .hero-cta {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+/* Unified Breadcrumb Styling */
+.breadcrumb-nav {
+    background: var(--color-bg-light);
+    padding: 15px 0;
+    border-bottom: 1px solid var(--color-border);
+}
+
+.breadcrumb-nav .breadcrumb-list {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    align-items: center;
+    gap: 8px;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+.breadcrumb-nav .breadcrumb-item {
+    display: flex;
+    align-items: center;
+}
+
+.breadcrumb-nav .breadcrumb-item:not(:last-child)::after {
+    content: '>';
+    margin-left: 8px;
+    color: var(--color-text-light);
+    font-weight: 500;
+}
+
+.breadcrumb-nav .breadcrumb-link {
+    color: var(--color-secondary);
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.3s ease;
+}
+
+.breadcrumb-nav .breadcrumb-link:hover {
+    color: var(--color-primary);
+    text-decoration: underline;
+}
+
+.breadcrumb-nav .breadcrumb-current {
+    color: var(--color-text-light);
+    font-weight: 500;
+}
+
+/* Unified Card Styles with Top Border Accent */
+.unified-card {
+    background: white;
+    padding: 40px;
+    border-radius: 16px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    border: 1px solid #f0f0f0;
+    border-top: 4px solid var(--color-primary);
+    transition: all 0.3s ease;
+}
+
+.unified-card:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
+}
+
+.unified-card h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 16px;
+    color: var(--color-text-dark);
+}
+
+.unified-card p {
+    color: var(--color-text-light);
+    margin-bottom: 20px;
+    line-height: 1.6;
+}
+
+/* Unified CTA Section */
+.unified-cta {
+    padding: 80px 0;
+    background: var(--gradient-cta);
+    color: white;
+    text-align: center;
+}
+
+.unified-cta h2 {
+    font-size: 2.5rem;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: white;
+}
+
+.unified-cta p {
+    font-size: 1.2rem;
+    margin-bottom: 40px;
+    opacity: 0.95;
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.unified-cta .cta-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+/* Responsive adjustments for unified components */
+@media (max-width: 768px) {
+    .testimonials-dark-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .testimonials-section-dark {
+        padding: 60px 0;
+    }
+
+    .testimonials-section-dark .section-header h2 {
+        font-size: 1.8rem;
+    }
+
+    .location-hero h1 {
+        font-size: 2.2rem;
+    }
+
+    .location-hero .hero-stats {
+        flex-direction: column;
+        gap: 20px;
+    }
+
+    .location-hero .hero-cta {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .unified-cta h2 {
+        font-size: 2rem;
+    }
+
+    .unified-cta .cta-buttons {
+        flex-direction: column;
+        align-items: center;
+    }
+}
+
+@media (max-width: 480px) {
+    .testimonial-card-dark {
+        padding: 25px;
+    }
+
+    .testimonial-card-dark .testimonial-text {
+        font-size: 1rem;
+    }
+
+    .unified-card {
+        padding: 30px 20px;
+    }
+}
+
+/* Certifications & Trust Badges Section */
+.certifications-section {
+    padding: 80px 0;
+    background: #f8f9fa;
+}
+
+.certifications-section .section-header {
+    text-align: center;
+    margin-bottom: 60px;
+}
+
+.certifications-section .section-header h2 {
+    font-size: 2.5rem;
+    color: #144784;
+    margin-bottom: 16px;
+}
+
+.certifications-section .section-header p {
+    color: #555;
+    max-width: 700px;
+    margin: 0 auto;
+    font-size: 1.1rem;
+}
+
+.certifications-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 40px;
+    max-width: 1100px;
+    margin: 0 auto;
+}
+
+.certification-badge {
+    text-align: center;
+    padding: 40px 30px;
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+    transition: all 0.3s ease;
+}
+
+.certification-badge:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 8px 25px rgba(20, 71, 132, 0.15);
+}
+
+.certification-badge .badge-icon {
+    margin-bottom: 25px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.certification-badge .badge-icon svg {
+    width: 80px;
+    height: 80px;
+}
+
+.certification-badge h3 {
+    font-size: 1.3rem;
+    color: #144784;
+    margin-bottom: 12px;
+    font-weight: 600;
+}
+
+.certification-badge p {
+    color: #555;
+    font-size: 0.95rem;
+    line-height: 1.6;
+    margin: 0;
+}
+
+/* Responsive Design for Certifications */
+@media (max-width: 1024px) {
+    .certifications-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 30px;
+    }
+}
+
+@media (max-width: 768px) {
+    .certifications-section {
+        padding: 60px 0;
+    }
+
+    .certifications-section .section-header h2 {
+        font-size: 2rem;
+    }
+
+    .certifications-grid {
+        grid-template-columns: 1fr;
+        gap: 25px;
+    }
+
+    .certification-badge {
+        padding: 30px 25px;
+    }
+}
+
+@media (max-width: 480px) {
+    .certifications-section .section-header h2 {
+        font-size: 1.75rem;
+    }
+
+    .certification-badge h3 {
+        font-size: 1.15rem;
+    }
+
+    .certification-badge p {
+        font-size: 0.9rem;
+    }
+}
+
+/* Trust Signals Below Hero */
+.trust-signals-hero {
+    background: #f8f9fa;
+    padding: 2rem 0;
+    text-align: center;
+}
+.trust-signals-hero .trust-heading {
+    font-size: 0.95rem;
+    color: #6c757d;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 1.5rem;
+}
+.trust-signals-hero .trust-logos {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 2rem;
+    flex-wrap: wrap;
+    margin-bottom: 1.5rem;
+}
+.trust-signals-hero .trust-logo-placeholder {
+    width: 120px;
+    height: 50px;
+    background: #e9ecef;
+    border-radius: 6px;
+}
+.trust-signals-hero .trust-badges {
+    display: flex;
+    justify-content: center;
+    gap: 1.5rem;
+    flex-wrap: wrap;
+}
+.trust-signals-hero .trust-badges .badge {
+    background: #fff;
+    border: 1px solid #dee2e6;
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    font-size: 0.9rem;
+    color: #495057;
+}
+
+/* Quote Page Layout */
+.quote-page-layout {
+    display: grid;
+    grid-template-columns: 1fr 350px;
+    gap: 2rem;
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 2rem 0;
+}
+@media (max-width: 768px) {
+    .quote-page-layout {
+        grid-template-columns: 1fr;
+    }
+}
+.quote-sidebar {
+    position: sticky;
+    top: 100px;
+    align-self: start;
+}
+.quote-sidebar .testimonial-card {
+    background: #f8f9fa;
+    border-left: 4px solid #0d6efd;
+    padding: 1.5rem;
+    border-radius: 8px;
+    margin-bottom: 1.5rem;
+}
+.quote-sidebar .testimonial-card blockquote p {
+    font-style: italic;
+    margin-bottom: 0.5rem;
+}
+.quote-sidebar .what-happens-next {
+    background: #fff;
+    border: 1px solid #dee2e6;
+    padding: 1.5rem;
+    border-radius: 8px;
+}
+.quote-sidebar .what-happens-next ol {
+    padding-left: 1.2rem;
+}
+.quote-sidebar .what-happens-next li {
+    margin-bottom: 0.75rem;
+}
+.optional {
+    color: #6c757d;
+    font-weight: normal;
+    font-size: 0.85em;
+}
+.form-group input.error,
+.form-group select.error {
+    border-color: #dc3545;
+}
+.form-buttons {
+    display: flex;
+    gap: 1rem;
+    margin-top: 1.5rem;
+}
+}
+
+
+/* ===== VISUAL FIXES 2026-02-08 v2 ===== */
+
+/* Fix 10: Increase base font size */
+body { font-size: 17px; }
+
+/* Fix 11: Widen containers */
+.container { max-width: 1320px; }
+
+/* Fix 1: Trust badges as styled pills */
+.trust-signals-hero .trust-badges .badge {
+    background: linear-gradient(135deg, #144784, #1a5298);
+    color: #fff;
+    border: none;
+    padding: 0.65rem 1.5rem;
+    font-size: 0.95rem;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    border-radius: 24px;
+    box-shadow: 0 2px 8px rgba(20, 71, 132, 0.25);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+}
+.trust-signals-hero .trust-badges .badge::before {
+    content: '✓';
+    font-weight: 700;
+    font-size: 0.85rem;
+}
+.trust-signals-hero .trust-badges {
+    gap: 1.2rem;
+    margin-top: 0.5rem;
+}
+.trust-signals-hero .trust-heading {
+    margin-bottom: 1rem;
+    font-size: 1rem;
+}
+
+/* Fix 2: Service cards breathing room */
+.service-card { padding: 42px; }
+.service-card p {
+    font-size: 1.05rem;
+    line-height: 1.75;
+    margin-bottom: 22px;
+}
+.service-card li {
+    padding: 9px 0;
+    font-size: 1.02rem;
+    padding-left: 24px;
+    line-height: 1.55;
+}
+.service-card ul { margin-top: 8px; }
+.service-card h3 { font-size: 1.4rem; }
+
+/* Fix 3: Stats row labels bigger */
+.hero-stats .stat-label { font-size: 1.05rem; }
+.hero-stats .stat-number { font-size: 2.4rem; }
+
+/* Fix 4: Consistent card heights */
+.services-grid {
+    grid-template-columns: repeat(3, 1fr);
+}
+.services-grid .service-card {
+    display: flex;
+    flex-direction: column;
+}
+.services-grid .service-card p { flex-shrink: 0; }
+.services-grid .service-card ul { flex-grow: 1; }
+@media (max-width: 1100px) {
+    .services-grid { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 700px) {
+    .services-grid { grid-template-columns: 1fr; }
+}
+
+/* Fix 5: About values grid 3-col */
+.values-grid {
+    grid-template-columns: repeat(3, 1fr);
+    justify-items: stretch;
+}
+@media (max-width: 900px) {
+    .values-grid { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 600px) {
+    .values-grid { grid-template-columns: 1fr; }
+}
+
+/* Fix 6: About stats grid 3-col */
+.stats-grid { grid-template-columns: repeat(3, 1fr); }
+@media (max-width: 768px) {
+    .stats-grid { grid-template-columns: repeat(2, 1fr); }
+}
+
+/* Fix 7: Team bio cards equal height */
+.values-grid .value-card {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Fix 8: Consistent testimonial style on quote page */
+/* Override the big teal quote mark on sidebar testimonial-card */
+.quote-sidebar .testimonial-card {
+    background: #f8f9fa;
+    border-left: 4px solid #144784;
+    border-top: none;
+    border-right: none;
+    border-bottom: none;
+    padding: 1.5rem;
+    border-radius: 8px;
+    margin-bottom: 1.5rem;
+    box-shadow: none;
+}
+.quote-sidebar .testimonial-card::before {
+    display: none;
+}
+.quote-sidebar .testimonial-card blockquote p {
+    font-style: italic;
+    margin-bottom: 0.5rem;
+    line-height: 1.6;
+    color: #333;
+}
+.quote-sidebar .testimonial-card blockquote cite {
+    color: #555;
+    font-size: 0.9rem;
+}
+
+/* Fix 9: FAQ full width below form & sidebar */
+.quote-faq-section {
+    grid-column: 1 / -1;
+    margin-top: 2rem;
+    padding-top: 2rem;
+    border-top: 1px solid #e0e0e0;
+}
+
+/* Features grid improvements */
+.features-grid {
+    grid-template-columns: repeat(3, 1fr);
+}
+@media (max-width: 1100px) {
+    .features-grid { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 700px) {
+    .features-grid { grid-template-columns: 1fr; }
+}
+
+/* ===== END VISUAL FIXES ===== */
+
+
+/* ===== VISUAL FIXES 2026-02-11 ===== */
+
+/* 1. Equal-height capability cards on project-types page */
+.capabilities-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 30px;
+    align-items: stretch;
+}
+.capability-card {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+.capability-card p {
+    flex-grow: 1;
+}
+
+/* 2. Footer contrast improvements — WCAG AA */
+.footer-section p,
+.footer-section li,
+.footer-bottom p,
+.footer-bottom .company-details,
+.trust-badge-text span {
+    color: #d1d5db; /* ~9:1 on #151f25 */
+}
+.footer-section a {
+    color: #93c5fd; /* light blue — ~7.5:1 on #151f25 */
+}
+.footer-section a:hover {
+    color: #bfdbfe;
+}
+.footer-section h3 {
+    color: #f3f4f6;
+}
+.footer-bottom p,
+.footer-bottom .company-details {
+    color: #9ca3af; /* muted but still 4.6:1 */
+}
+.footer-logo img {
+    filter: brightness(1.2);
+}
+
+/* 3. Mobile text sizing & layout */
+@media (max-width: 768px) {
+    body {
+        font-size: 16px;
+    }
+    
+    /* Project-types hero */
+    .project-types-hero h1 {
+        font-size: 1.8rem;
+        line-height: 1.3;
+    }
+    .project-types-hero p {
+        font-size: 1rem;
+    }
+    
+    /* Capability cards single column on mobile */
+    .capabilities-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    /* Industry grid single column */
+    .industry-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    /* Project category headings */
+    .project-category h2 {
+        font-size: 1.6rem;
+    }
+    .project-category h3 {
+        font-size: 1.2rem;
+    }
+    .project-description {
+        font-size: 1rem;
+    }
+    
+    /* Footer content single column (already done but ensure) */
+    .footer-content {
+        grid-template-columns: 1fr;
+    }
+    
+    /* Footer bottom stack */
+    .footer-bottom,
+    .footer-bottom .footer-bottom-content {
+        flex-direction: column;
+        gap: 15px;
+        text-align: center;
+    }
+}
+
+@media (max-width: 480px) {
+    .project-types-hero h1 {
+        font-size: 1.5rem;
+    }
+    .project-types-hero {
+        padding: 100px 0 40px;
+    }
+    .project-category {
+        padding: 40px 0;
+    }
+    .project-category h2 {
+        font-size: 1.4rem;
+    }
+}
+
+/* 4. General polish */
+/* Ensure project-types hero accounts for fixed nav */
+.project-types-hero {
+    padding-top: 140px;
+}
+
+/* Tech tags wrapping fix */
+.tech-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+/* ===== END VISUAL FIXES 2026-02-11 ===== */
diff --git a/assets/css/main.min.css b/assets/css/main.min.css
index 9157817..def83de 100644
--- a/assets/css/main.min.css
+++ b/assets/css/main.min.css
@@ -149,6 +149,7 @@ body {
     transition: color 0.3s ease;
 }
 
+.nav-link.active {    color: #148069;    font-weight: 600;    border-bottom: 2px solid #148069;    padding-bottom: 2px;}
 .nav-link:hover {
     color: #144784;
 }
@@ -3599,41 +3600,55 @@ aside.related-articles {
     }
 }
 
-/* Fix for navbar overlap on content pages */
+/* ===== NAVBAR SPACING FIX (consistent across all pages) ===== */
+/* Navbar is position:fixed, height 70px */
+
+/* Hero pages: all hero variants get 120px top padding (70px navbar + 50px space) */
+.hero,
+.page-hero,
+.about-hero,
+.faq-hero,
+.service-hero,
+.project-types-hero,
+.tools-hero,
+.quote-hero {
+    padding-top: 120px !important;
+}
+
+/* Non-hero pages with <main>: push content below navbar */
 main {
-    padding-top: 90px; /* Add padding to account for fixed navbar (70px + 20px buffer) */
+    padding-top: 90px; /* 70px navbar + 20px breathing room */
 }
 
-/* Specific fix for legal content pages */
+/* But if main contains a hero, don't double-pad */
+main > .hero:first-child,
+main > .page-hero:first-child,
+main > .about-hero:first-child,
+main > .faq-hero:first-child,
+main > .service-hero:first-child,
+main > .project-types-hero:first-child {
+    margin-top: -90px; /* Cancel out the main padding */
+}
+
+/* Legal content pages (no hero, text-heavy) */
 .legal-content {
-    padding-top: 120px !important; /* Override inline styles for legal pages */
+    padding-top: 100px !important; /* 70px navbar + 30px breathing room */
 }
 
-/* Also ensure any page sections that might be affected have proper spacing */
+/* Tool sub-pages and standalone pages (no <main>, no hero) */
+.calculator-container,
+.analyzer-container,
+.converter-container,
+.checker-container,
+.thank-you-container {
+    padding-top: 100px !important; /* 70px navbar + 30px breathing room */
+}
+
+/* Generic page-content class */
 .page-content {
     padding-top: 90px;
 }
 
-/* For hero sections that should start right under navbar */
-.hero {
-    padding-top: 140px; /* 120px base + 20px for navbar */
-}
-
-/* For about page hero */
-.about-hero {
-    padding-top: 140px; /* 120px base + 20px for navbar */
-}
-
-/* For FAQ page hero */
-.faq-hero {
-    padding-top: 140px; /* 120px base + 20px for navbar */
-}
-
-/* For project types and other page heroes */
-.page-hero {
-    padding-top: 140px; /* 120px base + 20px for navbar */
-}
-
 /* Hide reCAPTCHA badge */
 .grecaptcha-badge {
     visibility: hidden !important;
@@ -4370,3 +4385,124 @@ body { font-size: 17px; }
 }
 
 /* ===== END VISUAL FIXES ===== */
+
+
+/* ===== VISUAL FIXES 2026-02-11 ===== */
+
+/* 1. Equal-height capability cards on project-types page */
+.capabilities-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 30px;
+    align-items: stretch;
+}
+.capability-card {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+.capability-card p {
+    flex-grow: 1;
+}
+
+/* 2. Footer contrast improvements — WCAG AA */
+.footer-section p,
+.footer-section li,
+.footer-bottom p,
+.footer-bottom .company-details,
+.trust-badge-text span {
+    color: #d1d5db; /* ~9:1 on #151f25 */
+}
+.footer-section a {
+    color: #93c5fd; /* light blue — ~7.5:1 on #151f25 */
+}
+.footer-section a:hover {
+    color: #bfdbfe;
+}
+.footer-section h3 {
+    color: #f3f4f6;
+}
+.footer-bottom p,
+.footer-bottom .company-details {
+    color: #9ca3af; /* muted but still 4.6:1 */
+}
+.footer-logo img {
+    filter: brightness(1.2);
+}
+
+/* 3. Mobile text sizing & layout */
+@media (max-width: 768px) {
+    body {
+        font-size: 16px;
+    }
+    
+    /* Project-types hero */
+    .project-types-hero h1 {
+        font-size: 1.8rem;
+        line-height: 1.3;
+    }
+    .project-types-hero p {
+        font-size: 1rem;
+    }
+    
+    /* Capability cards single column on mobile */
+    .capabilities-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    /* Industry grid single column */
+    .industry-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    /* Project category headings */
+    .project-category h2 {
+        font-size: 1.6rem;
+    }
+    .project-category h3 {
+        font-size: 1.2rem;
+    }
+    .project-description {
+        font-size: 1rem;
+    }
+    
+    /* Footer content single column (already done but ensure) */
+    .footer-content {
+        grid-template-columns: 1fr;
+    }
+    
+    /* Footer bottom stack */
+    .footer-bottom,
+    .footer-bottom .footer-bottom-content {
+        flex-direction: column;
+        gap: 15px;
+        text-align: center;
+    }
+}
+
+@media (max-width: 480px) {
+    .project-types-hero h1 {
+        font-size: 1.5rem;
+    }
+    .project-types-hero {
+        padding: 100px 0 40px;
+    }
+    .project-category {
+        padding: 40px 0;
+    }
+    .project-category h2 {
+        font-size: 1.4rem;
+    }
+}
+
+/* 4. General polish */
+/* project-types-hero padding now in unified block above */
+
+/* Tech tags wrapping fix */
+.tech-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+/* ===== END VISUAL FIXES 2026-02-11 ===== */
diff --git a/blog/articles/free-web-scraping-tools-launch.php b/blog/articles/free-web-scraping-tools-launch.php
index 91406e4..d7f8dc0 100644
--- a/blog/articles/free-web-scraping-tools-launch.php
+++ b/blog/articles/free-web-scraping-tools-launch.php
@@ -12,7 +12,10 @@ $author = "UK Data Services Team";
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title><?php echo htmlspecialchars($page_title); ?></title>
     <meta name="description" content="<?php echo htmlspecialchars($page_description); ?>">
-    <link rel="canonical" href="<?php echo htmlspecialchars($canonical_url); ?>">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Lato:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+<link rel="canonical" href="<?php echo htmlspecialchars($canonical_url); ?>">
     
     <meta property="og:title" content="<?php echo htmlspecialchars($page_title); ?>">
     <meta property="og:description" content="<?php echo htmlspecialchars($page_description); ?>">
diff --git a/blog/articles/real-time-analytics-streaming.php b/blog/articles/real-time-analytics-streaming.php
index 02e2a73..79e65da 100644
--- a/blog/articles/real-time-analytics-streaming.php
+++ b/blog/articles/real-time-analytics-streaming.php
@@ -23,7 +23,10 @@ $read_time = 11;
     <meta name="keywords" content="<?php echo htmlspecialchars($article_keywords); ?>">
     <meta name="author" content="<?php echo htmlspecialchars($article_author); ?>">
     <meta name="robots" content="index, follow">
-    <link rel="canonical" href="<?php echo htmlspecialchars($canonical_url); ?>">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Lato:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+<link rel="canonical" href="<?php echo htmlspecialchars($canonical_url); ?>">
     
     <link rel="stylesheet" href="../../assets/css/main.css">
     <link rel="stylesheet" href="../../assets/css/cro-enhancements.css">
diff --git a/blog/articles/retail-competitor-monitoring-case.php b/blog/articles/retail-competitor-monitoring-case.php
index d2c737d..e19fd14 100644
--- a/blog/articles/retail-competitor-monitoring-case.php
+++ b/blog/articles/retail-competitor-monitoring-case.php
@@ -23,7 +23,10 @@ $read_time = 9;
     <meta name="keywords" content="<?php echo htmlspecialchars($article_keywords); ?>">
     <meta name="author" content="<?php echo htmlspecialchars($article_author); ?>">
     <meta name="robots" content="index, follow">
-    <link rel="canonical" href="<?php echo htmlspecialchars($canonical_url); ?>">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Lato:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+<link rel="canonical" href="<?php echo htmlspecialchars($canonical_url); ?>">
     
     <link rel="stylesheet" href="../../assets/css/main.css">
     <link rel="stylesheet" href="../../assets/css/cro-enhancements.css">
diff --git a/blog/articles/uk-cookie-law-compliance.php b/blog/articles/uk-cookie-law-compliance.php
index 2b11f8d..c0803d4 100644
--- a/blog/articles/uk-cookie-law-compliance.php
+++ b/blog/articles/uk-cookie-law-compliance.php
@@ -23,7 +23,10 @@ $read_time = 8;
     <meta name="keywords" content="<?php echo htmlspecialchars($article_keywords); ?>">
     <meta name="author" content="<?php echo htmlspecialchars($article_author); ?>">
     <meta name="robots" content="index, follow">
-    <link rel="canonical" href="<?php echo htmlspecialchars($canonical_url); ?>">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Lato:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+<link rel="canonical" href="<?php echo htmlspecialchars($canonical_url); ?>">
     
     <!-- Article metadata and other head elements (same as previous template) -->
     <link rel="stylesheet" href="../../assets/css/main.css">
diff --git a/case-studies/index.php b/case-studies/index.php
index 1a2a9df..b0f197b 100644
--- a/case-studies/index.php
+++ b/case-studies/index.php
@@ -12,7 +12,10 @@ $keywords = "UK data services case studies, client success stories, data transfo
     <title><?php echo htmlspecialchars($page_title); ?></title>
     <meta name="description" content="<?php echo htmlspecialchars($page_description); ?>">
     <meta name="keywords" content="<?php echo htmlspecialchars($keywords); ?>">
-    <link rel="canonical" href="<?php echo htmlspecialchars($canonical_url); ?>">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Lato:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+<link rel="canonical" href="<?php echo htmlspecialchars($canonical_url); ?>">
     
     <!-- Open Graph -->
     <meta property="og:title" content="<?php echo htmlspecialchars($page_title); ?>">
diff --git a/includes/nav.php b/includes/nav.php
index bd34f7a..59e7d86 100644
--- a/includes/nav.php
+++ b/includes/nav.php
@@ -1,3 +1,17 @@
+<?php
+$current_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
+$current_path = rtrim($current_path, '/');
+if ($current_path === '') $current_path = '/';
+
+function nav_active($href, $current) {
+    // Exact match
+    if ($href === $current) return ' active';
+    // Section match (e.g. /tools/ matches /tools/cost-calculator)
+    $href_trimmed = rtrim($href, '/');
+    if ($href_trimmed !== '' && $href_trimmed !== '/' && strpos($current, $href_trimmed) === 0) return ' active';
+    return '';
+}
+?>
 <!-- Navigation -->
 <nav class="navbar" id="navbar">
     <div class="nav-container">
@@ -10,14 +24,14 @@
             </a>
         </div>
         <div class="nav-menu" id="nav-menu">
-            <a href="/" class="nav-link">Home</a>
-            <a href="/#services" class="nav-link">Services</a>
-            <a href="/project-types" class="nav-link">Project Types</a>
-            <a href="/about" class="nav-link">About</a>
-            <a href="/tools/" class="nav-link">Free Tools</a>
-            <a href="/blog/" class="nav-link">Blog</a>
+            <a href="/" class="nav-link<?php echo $current_path === '/' ? ' active' : ''; ?>">Home</a>
+            <a href="/#services" class="nav-link<?php echo (strpos($current_path, '/services') === 0) ? ' active' : ''; ?>">Services</a>
+            <a href="/project-types" class="nav-link<?php echo nav_active('/project-types', $current_path); ?>">Project Types</a>
+            <a href="/about" class="nav-link<?php echo nav_active('/about', $current_path); ?>">About</a>
+            <a href="/tools/" class="nav-link<?php echo nav_active('/tools', $current_path); ?>">Free Tools</a>
+            <a href="/blog/" class="nav-link<?php echo nav_active('/blog', $current_path); ?>">Blog</a>
             <a href="/#contact" class="nav-link">Contact</a>
-            <a href="/quote" class="nav-link cta-button">Request Consultation</a>
+            <a href="/quote" class="nav-link cta-button<?php echo nav_active('/quote', $current_path); ?>">Request Consultation</a>
         </div>
         <button class="nav-toggle" id="nav-toggle" aria-expanded="false" aria-controls="nav-menu" aria-label="Toggle navigation menu">
             <span class="bar"></span>
@@ -25,4 +39,4 @@
             <span class="bar"></span>
         </button>
     </div>
-</nav>
\ No newline at end of file
+</nav>
diff --git a/index.php b/index.php
index 8d018fb..8d4d9ac 100644
--- a/index.php
+++ b/index.php
@@ -111,9 +111,9 @@ $twitter_card_image = "https://ukdataservices.co.uk/assets/images/ukds-main-logo
     <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Lato:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
     
     <!-- Resource Preloading for Performance -->
-    <link rel="preload" href="/assets/css/main.min.css?v=1.1.2" as="style">
+    <link rel="preload" href="/assets/css/main.min.css?v=1.1.3" as="style">
     <link rel="preload" href="/assets/images/ukds-main-logo.webp" as="image">
-    <link rel="preload" href="/assets/js/main.min.js?v=1.1.0" as="script">
+    <link rel="preload" href="/assets/js/main.min.js?v=1.1.1" as="script">
     
     <!-- Critical CSS for Above-the-Fold -->
     <style>
@@ -137,8 +137,8 @@ $twitter_card_image = "https://ukdataservices.co.uk/assets/images/ukds-main-logo
     </style>
     
     <!-- Styles -->
-    <link rel="stylesheet" href="/assets/css/main.min.css?v=1.1.2" media="print" onload="this.media='all'">
-    <noscript><link rel="stylesheet" href="assets/css/main.min.css?v=1.1.2"></noscript>
+    <link rel="stylesheet" href="/assets/css/main.min.css?v=1.1.3" media="print" onload="this.media='all'">
+    <noscript><link rel="stylesheet" href="assets/css/main.min.css?v=1.1.3"></noscript>
     
     <!-- Enhanced Local SEO Schema -->
     <script type="application/ld+json">
@@ -1298,7 +1298,7 @@ $twitter_card_image = "https://ukdataservices.co.uk/assets/images/ukds-main-logo
     </footer>
 
     <!-- Scripts -->
-    <script src="/assets/js/main.min.js?v=1.1.0"></script>
+    <script src="/assets/js/main.min.js?v=1.1.1"></script>
     
     <!-- Service Worker Registration -->
     <script>
diff --git a/locations/birmingham.php b/locations/birmingham.php
index 5610f96..70b71f3 100644
--- a/locations/birmingham.php
+++ b/locations/birmingham.php
@@ -427,7 +427,7 @@ $breadcrumbs = [
                     <span class="stat-label">Birmingham Clients</span>
                 </div>
                 <div class="stat">
-                    <span class="stat-number">99.8%</span>
+                    <span class="stat-number">99.5%</span>
                     <span class="stat-label">Accuracy Rate</span>
                 </div>
                 <div class="stat">
diff --git a/locations/london.php b/locations/london.php
index cfcd958..c7dece7 100644
--- a/locations/london.php
+++ b/locations/london.php
@@ -427,7 +427,7 @@ $breadcrumbs = [
                     <span class="stat-label">London Clients</span>
                 </div>
                 <div class="stat">
-                    <span class="stat-number">99.8%</span>
+                    <span class="stat-number">99.5%</span>
                     <span class="stat-label">Accuracy Rate</span>
                 </div>
                 <div class="stat">
diff --git a/locations/manchester.php b/locations/manchester.php
index 1507150..8673313 100644
--- a/locations/manchester.php
+++ b/locations/manchester.php
@@ -427,7 +427,7 @@ $breadcrumbs = [
                     <span class="stat-label">Manchester Clients</span>
                 </div>
                 <div class="stat">
-                    <span class="stat-number">99.8%</span>
+                    <span class="stat-number">99.5%</span>
                     <span class="stat-label">Accuracy Rate</span>
                 </div>
                 <div class="stat">
diff --git a/quote.php b/quote.php
index 51df07b..6ee9e0e 100644
--- a/quote.php
+++ b/quote.php
@@ -193,7 +193,7 @@ $breadcrumbs = [
     
     <style>
         .quote-hero {
-            padding: 100px 0 30px;
+            padding: 100px 0 30px; /* padding-top overridden by main.css */
             background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
             text-align: center;
         }
diff --git a/services/data-cleaning.php b/services/data-cleaning.php
index 54f44f8..3d570a3 100644
--- a/services/data-cleaning.php
+++ b/services/data-cleaning.php
@@ -12,7 +12,10 @@ $keywords = "data cleaning UK, data validation, duplicate removal, data standard
     <title><?php echo htmlspecialchars($page_title); ?></title>
     <meta name="description" content="<?php echo htmlspecialchars($page_description); ?>">
     <meta name="keywords" content="<?php echo htmlspecialchars($keywords); ?>">
-    <link rel="canonical" href="<?php echo htmlspecialchars($canonical_url); ?>">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Lato:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+<link rel="canonical" href="<?php echo htmlspecialchars($canonical_url); ?>">
     
     <!-- Open Graph -->
     <meta property="og:title" content="<?php echo htmlspecialchars($page_title); ?>">
diff --git a/services/financial-data-services.php b/services/financial-data-services.php
index 2de7792..63e1aae 100644
--- a/services/financial-data-services.php
+++ b/services/financial-data-services.php
@@ -402,7 +402,7 @@ $faqPageName = 'Financial Data Services FAQ';
             <div class="container">
                 <h1>Financial Data Services & Market Intelligence UK</h1>
                 <p class="hero-subtitle">FCA-aware financial data services for hedge funds, asset managers, and investment firms. Market data extraction, alternative data solutions, and compliant financial intelligence to support your investment strategies.</p>
-                <a href="/quote" class="btn btn-white">Request Consultation</a>
+                <a href="/quote" class="btn btn-primary">Request Consultation</a>
             </div>
         </section>
 
diff --git a/services/property-data-extraction.php b/services/property-data-extraction.php
index 506990f..3edecd5 100644
--- a/services/property-data-extraction.php
+++ b/services/property-data-extraction.php
@@ -381,7 +381,7 @@ $faqPageName = 'Property Data Extraction FAQ';
             <div class="container">
                 <h1>UK Property Data Extraction Services</h1>
                 <p class="hero-subtitle">Professional property data extraction from Rightmove, Zoopla, OnTheMarket, and other UK property portals. GDPR-compliant property market intelligence for investors, analysts, estate agents, and property developers.</p>
-                <a href="/quote" class="btn btn-white">Get a Free Consultation</a>
+                <a href="/quote" class="btn btn-primary">Get a Free Consultation</a>
             </div>
         </section>
 
diff --git a/services/web-scraping.php b/services/web-scraping.php
index 0b552b8..2ae6dce 100644
--- a/services/web-scraping.php
+++ b/services/web-scraping.php
@@ -592,7 +592,7 @@ $breadcrumbs = [
                     <span class="stat-label">Projects Delivered</span>
                 </div>
                 <div class="stat">
-                    <span class="stat-number">99.8%</span>
+                    <span class="stat-number">99.7%</span>
                     <span class="stat-label">Data Accuracy</span>
                 </div>
                 <div class="stat">
@@ -667,7 +667,7 @@ $breadcrumbs = [
                     <p>From simple static pages to complex JavaScript applications, we handle all website technologies. Extract from one site or thousands simultaneously with our scalable infrastructure.</p>
                 </div>
                 <div class="feature-card">
-                    <h3>99.8% Data Accuracy</h3>
+                    <h3>99.7% Data Accuracy</h3>
                     <p>Multi-layer validation, automated quality checks, and human review processes ensure the data you receive is accurate, complete, and properly formatted.</p>
                 </div>
                 <div class="feature-card">
diff --git a/thank-you.php b/thank-you.php
index 70e89ad..2cdc0d0 100644
--- a/thank-you.php
+++ b/thank-you.php
@@ -9,7 +9,10 @@ $page_title = "Thank You | UK Data Services";
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title><?php echo $page_title; ?></title>
     <meta name="robots" content="noindex, nofollow">
-    <link rel="stylesheet" href="assets/css/main.css">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Lato:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="assets/css/main.css">
     <style>
         .thank-you-container {
             max-width: 700px;
@@ -127,6 +130,7 @@ $page_title = "Thank You | UK Data Services";
     </style>
 </head>
 <body>
+<?php include($_SERVER["DOCUMENT_ROOT"] . "/includes/nav.php"); ?>
     <div class="thank-you-container">
         <div class="success-icon">🎉</div>
         <h1>Thank You for Your Enquiry!</h1>
diff --git a/tools/cost-calculator.php b/tools/cost-calculator.php
index 8e80874..6bffa60 100644
--- a/tools/cost-calculator.php
+++ b/tools/cost-calculator.php
@@ -6,7 +6,10 @@
     <title>Web Scraping Cost Calculator | UK Data Services</title>
     <meta name="description" content="Estimate your web scraping project cost instantly. Our free calculator helps UK businesses budget for data extraction, pricing intelligence, and market research projects.">
     <meta name="keywords" content="web scraping cost, data extraction pricing, scraping quote, web scraping calculator UK">
-    <link rel="canonical" href="https://ukdataservices.co.uk/tools/cost-calculator">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Lato:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+<link rel="canonical" href="https://ukdataservices.co.uk/tools/cost-calculator">
     
     <!-- Open Graph -->
     <meta property="og:title" content="Free Web Scraping Cost Calculator">
@@ -223,6 +226,7 @@
     </style>
 </head>
 <body>
+<?php include($_SERVER["DOCUMENT_ROOT"] . "/includes/nav.php"); ?>
     <!-- Header would be included here -->
     
     <div class="calculator-container">
diff --git a/tools/data-converter.php b/tools/data-converter.php
index 1eefd53..206191a 100644
--- a/tools/data-converter.php
+++ b/tools/data-converter.php
@@ -10,7 +10,10 @@ $canonical_url = "https://ukdataservices.co.uk/tools/data-converter";
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title><?php echo htmlspecialchars($page_title); ?></title>
     <meta name="description" content="<?php echo htmlspecialchars($page_description); ?>">
-    <link rel="canonical" href="<?php echo htmlspecialchars($canonical_url); ?>">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Lato:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+<link rel="canonical" href="<?php echo htmlspecialchars($canonical_url); ?>">
     
     <meta property="og:title" content="<?php echo htmlspecialchars($page_title); ?>">
     <meta property="og:description" content="<?php echo htmlspecialchars($page_description); ?>">
diff --git a/tools/index.php b/tools/index.php
index d43e4b9..d13266e 100644
--- a/tools/index.php
+++ b/tools/index.php
@@ -10,7 +10,10 @@ $canonical_url = "https://ukdataservices.co.uk/tools/";
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title><?php echo htmlspecialchars($page_title); ?></title>
     <meta name="description" content="<?php echo htmlspecialchars($page_description); ?>">
-    <link rel="canonical" href="<?php echo htmlspecialchars($canonical_url); ?>">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Lato:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+<link rel="canonical" href="<?php echo htmlspecialchars($canonical_url); ?>">
     
     <meta property="og:title" content="<?php echo htmlspecialchars($page_title); ?>">
     <meta property="og:description" content="<?php echo htmlspecialchars($page_description); ?>">
@@ -94,7 +97,7 @@ $canonical_url = "https://ukdataservices.co.uk/tools/";
         .tools-hero {
             background: linear-gradient(135deg, #144784 0%, #179e83 100%);
             color: white;
-            padding: 80px 20px;
+            padding: 80px 20px; /* padding-top overridden by main.css */
             text-align: center;
         }
         .tools-hero h1 { font-size: 2.5em; margin-bottom: 15px; }
diff --git a/tools/robots-analyzer.php b/tools/robots-analyzer.php
index 6a60ec1..ba4ca43 100644
--- a/tools/robots-analyzer.php
+++ b/tools/robots-analyzer.php
@@ -10,7 +10,10 @@ $canonical_url = "https://ukdataservices.co.uk/tools/robots-analyzer";
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title><?php echo htmlspecialchars($page_title); ?></title>
     <meta name="description" content="<?php echo htmlspecialchars($page_description); ?>">
-    <link rel="canonical" href="<?php echo htmlspecialchars($canonical_url); ?>">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Lato:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+<link rel="canonical" href="<?php echo htmlspecialchars($canonical_url); ?>">
     
     <meta property="og:title" content="<?php echo htmlspecialchars($page_title); ?>">
     <meta property="og:description" content="<?php echo htmlspecialchars($page_description); ?>">
diff --git a/tools/scrapeability-checker.php b/tools/scrapeability-checker.php
index 806e6ee..2e80b47 100644
--- a/tools/scrapeability-checker.php
+++ b/tools/scrapeability-checker.php
@@ -10,7 +10,10 @@ $canonical_url = "https://ukdataservices.co.uk/tools/scrapeability-checker";
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title><?php echo htmlspecialchars($page_title); ?></title>
     <meta name="description" content="<?php echo htmlspecialchars($page_description); ?>">
-    <link rel="canonical" href="<?php echo htmlspecialchars($canonical_url); ?>">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Lato:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+<link rel="canonical" href="<?php echo htmlspecialchars($canonical_url); ?>">
     
     <meta property="og:title" content="<?php echo htmlspecialchars($page_title); ?>">
     <meta property="og:description" content="<?php echo htmlspecialchars($page_description); ?>">
