Lisää uudet kuvat: kirja-selfie Minusta-osioon ja puutalo-banneri

- Vaihda Minusta-osion kuva Kunta 2035 -kirja-selfieen
- Lisää punainen puutalo -banneri Minusta- ja Yhteystiedot-osioiden väliin
- Siivoa käyttämätön region-osion CSS pois
- Lisää responsiivinen banneri-tyyli mobiilille

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

index.html

@@ -82,7 +82,7 @@
     <section class="about-section" id="minusta">
         <div class="about-content">
             <div class="about-image">
-                <img src="images/fence-portrait.jpg" alt="Jukka Lampikoski" loading="lazy">
+                <img src="images/book-selfie.jpg" alt="Jukka Lampikoski - Kunta 2035" loading="lazy">
             </div>
             <div class="about-text">
                 <h2 data-fi="Jukka Lampikoski" data-en="Jukka Lampikoski">Jukka Lampikoski</h2>
@@ -97,6 +97,15 @@
         </div>
     </section>
 
+    <!-- Banner Section -->
+    <section class="banner-section">
+        <div class="banner-image" style="background-image: url('images/red-house.jpg');">
+            <div class="banner-overlay">
+                <p class="banner-text" data-fi="Rakennetaan yhdessä parempaa tulevaisuutta." data-en="Let's build a better future together.">Rakennetaan yhdessä parempaa tulevaisuutta.</p>
+            </div>
+        </div>
+    </section>
+
     <!-- Contact Section -->
     <section class="contact-section" id="yhteystiedot">
         <div class="container">

style.css

@@ -412,14 +412,14 @@ ul {
     line-height: 1.5;
 }
 
-/* ========== Region Section ========== */
+/* ========== Banner Section ========== */
-.region-section {
+.banner-section {
-    background: var(--color-bg);
+    overflow: hidden;
 }
 
-.region-hero {
+.banner-image {
-    height: 50vh;
+    height: 45vh;
-    min-height: 400px;
+    min-height: 300px;
     background-size: cover;
     background-position: center;
     position: relative;
@@ -428,68 +428,26 @@ ul {
     justify-content: center;
 }
 
-.region-overlay {
+.banner-overlay {
     position: absolute;
     inset: 0;
-    background: rgba(26, 35, 50, 0.7);
+    background: rgba(30, 45, 43, 0.6);
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 2rem;
 }
 
-.region-overlay h2 {
+.banner-text {
-    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
+    font-size: clamp(1.4rem, 3vw, 2.2rem);
     font-weight: 800;
     color: white;
     text-align: center;
-    max-width: 800px;
+    max-width: 700px;
     line-height: 1.3;
     letter-spacing: -0.01em;
 }
 
-.region-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 3rem;
-    padding: 5rem 0;
-}
-
-.region-card h3 {
-    font-size: 1.6rem;
-    font-weight: 800;
-    color: var(--color-dark);
-    margin-bottom: 1.2rem;
-    letter-spacing: -0.01em;
-}
-
-.region-card p {
-    font-size: 0.95rem;
-    line-height: 1.7;
-    color: var(--color-text);
-}
-
-.region-card ul {
-    list-style: none;
-}
-
-.region-card ul li {
-    font-size: 0.95rem;
-    line-height: 1.6;
-    color: var(--color-text);
-    padding: 0.5rem 0;
-    padding-left: 1.2rem;
-    position: relative;
-}
-
-.region-card ul li::before {
-    content: '—';
-    position: absolute;
-    left: 0;
-    color: var(--color-accent);
-    font-weight: 700;
-}
-
 /* ========== Contact Section ========== */
 .contact-section {
     padding: 6rem 0;
@@ -610,11 +568,6 @@ ul {
         padding: 3rem 2rem;
     }
 
-    .region-grid {
-        grid-template-columns: 1fr;
-        gap: 2rem;
-    }
-
     .contact-content {
         flex-direction: column;
         text-align: center;
@@ -665,13 +618,9 @@ ul {
         font-size: 1.8rem;
     }
 
-    .region-hero {
+    .banner-image {
-        height: 35vh;
+        height: 30vh;
-        min-height: 250px;
+        min-height: 200px;
-    }
-
-    .region-overlay h2 {
-        font-size: 1.2rem;
     }
 
     .contact-name {