Add background images to hero, stats break, and city CTA sections

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

style.css

@@ -178,33 +178,43 @@ img {
 /* ---- Hero ---- */
 .hero {
     position: relative;
-    padding: 160px 0 100px;
+    padding: 180px 0 100px;
     text-align: center;
     overflow: hidden;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
 }
 
-.hero-bg {
+.hero-overlay {
     position: absolute;
     inset: 0;
-    background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--orange-light) 0%, transparent 70%);
-    z-index: -1;
+    background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 100%);
+    z-index: 1;
+}
+
+.hero-container {
+    position: relative;
+    z-index: 2;
 }
 
 .hero-badge {
     display: inline-block;
     padding: 6px 16px;
-    background: var(--orange-light);
-    color: var(--orange-dark);
+    background: rgba(255,255,255,0.15);
+    backdrop-filter: blur(4px);
+    color: var(--orange-light);
     font-size: 0.82rem;
     font-weight: 600;
     border-radius: 100px;
     margin-bottom: 24px;
+    border: 1px solid rgba(255,255,255,0.1);
 }
 
 .hero h1 {
     font-size: 3.4rem;
     font-weight: 800;
-    color: var(--dark);
+    color: #fff;
     line-height: 1.15;
     margin-bottom: 20px;
     letter-spacing: -0.5px;
@@ -216,7 +226,7 @@ img {
 
 .hero-sub {
     font-size: 1.15rem;
-    color: var(--text-light);
+    color: rgba(255,255,255,0.8);
     max-width: 560px;
     margin: 0 auto 36px;
     line-height: 1.7;
@@ -229,6 +239,19 @@ img {
     margin-bottom: 64px;
 }
 
+.btn-outline-light {
+    background: transparent;
+    color: #fff;
+    border: 1.5px solid rgba(255,255,255,0.3);
+}
+
+.btn-outline-light:hover {
+    background: rgba(255,255,255,0.1);
+    border-color: rgba(255,255,255,0.5);
+    box-shadow: none;
+    transform: translateY(-1px);
+}
+
 .hero-stats {
     display: flex;
     justify-content: center;
@@ -239,12 +262,74 @@ img {
     display: block;
     font-size: 1.4rem;
     font-weight: 700;
-    color: var(--dark);
+    color: #fff;
 }
 
 .hero-stat span {
     font-size: 0.85rem;
-    color: var(--text-light);
+    color: rgba(255,255,255,0.6);
+}
+
+/* ---- Image Break ---- */
+.image-break {
+    position: relative;
+    padding: 64px 0;
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+.image-break-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0,0,0,0.7);
+}
+
+.image-break-overlay-warm {
+    background: linear-gradient(135deg, rgba(30,20,10,0.8), rgba(100,60,20,0.7));
+}
+
+.image-break-content {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    justify-content: center;
+    gap: 64px;
+}
+
+.image-break-stat strong {
+    display: block;
+    font-size: 1.6rem;
+    font-weight: 800;
+    color: var(--orange);
+}
+
+.image-break-stat span {
+    font-size: 0.85rem;
+    color: rgba(255,255,255,0.7);
+}
+
+.image-break-tall {
+    padding: 120px 0;
+}
+
+.image-break-cta {
+    position: relative;
+    z-index: 2;
+    text-align: center;
+}
+
+.image-break-cta h2 {
+    font-size: 2.4rem;
+    font-weight: 700;
+    color: #fff;
+    margin-bottom: 12px;
+}
+
+.image-break-cta p {
+    font-size: 1.1rem;
+    color: rgba(255,255,255,0.8);
+    margin-bottom: 28px;
 }
 
 /* ---- Services ---- */
@@ -570,6 +655,23 @@ img {
         grid-template-columns: 1fr;
     }
 
+    .image-break-content {
+        flex-direction: column;
+        gap: 32px;
+    }
+
+    .image-break {
+        background-attachment: scroll;
+    }
+
+    .image-break-tall {
+        padding: 80px 0;
+    }
+
+    .image-break-cta h2 {
+        font-size: 1.8rem;
+    }
+
     .footer-top {
         grid-template-columns: 1fr;
         gap: 32px;