{"id":10,"date":"2026-06-26T06:55:59","date_gmt":"2026-06-26T06:55:59","guid":{"rendered":"https:\/\/expressive-azure-mockingbird.157-180-92-33.cpanel.site\/?page_id=10"},"modified":"2026-08-04T06:50:39","modified_gmt":"2026-08-04T06:50:39","slug":"elementor-10","status":"publish","type":"page","link":"https:\/\/fbioy.fi\/","title":{"rendered":"Elementor #10"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"10\" class=\"elementor elementor-10\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ca29ee1 e-con e-atomic-element e-flexbox-base e-dd30f46 \" data-id=\"ca29ee1\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"ca29ee1\" id=\"alkuun\">\n    \t\t<div class=\"elementor-element elementor-element-0c2c1b6 elementor-widget elementor-widget-html\" data-id=\"0c2c1b6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"fbi-hero\" class=\"fbi-hero-section\">\n    <div class=\"fbi-video-wrapper\">\n        <video autoplay muted loop playsinline class=\"fbi-bg-video\">\n            <source src=\"https:\/\/www.pexels.com\/fi-fi\/download\/video\/6473926\/\" type=\"video\/mp4\">\n        <\/video>\n        <div class=\"fbi-overlay\"><\/div>\n    <\/div>\n\n    <img decoding=\"async\" src=\"https:\/\/fbioy.fi\/wp-content\/uploads\/2026\/06\/FBIFBILOGOT.png\" alt=\"FBI Logo Center\" class=\"fbi-logo-center\">\n\n    <img decoding=\"async\" src=\"https:\/\/fbioy.fi\/wp-content\/uploads\/2026\/06\/FBIFBILOGOT.png\" alt=\"FBI Logo Persistent\" class=\"fbi-logo-top-right\">\n\n    <div class=\"fbi-content-wrapper\">\n        <div class=\"fbi-text-group\">\n            <h1 class=\"fbi-heading fbi-anim\" style=\"transition-delay: 1.0s;\">FBI<\/h1>\n            <p class=\"fbi-body-text fbi-anim\" style=\"transition-delay: 1.2s;\">\n                on luotettava ja ammattitaitoinen rakennusalan kumppani, joka toteuttaa vaativat hankkeet sopimuksen mukaan, ajallaan ja budjetissa.\n\nOlemme erikoistuneet palvelemaan julkista sektoria, seurakuntia sek\u00e4 toimimaan luotettavana aliurakoitsijana suurille rakennusalan yrityksille. Tarjoamme vahvaa osaamista, joustavaa palvelua ja nykyaikaiset menetelm\u00e4t infrastruktuurin ja toimitilojen rakentamiseen. Palvelemme joustavasti my\u00f6s yksityisasiakkaita valikoiduissa hankkeissa.\n            <\/p>\n            <div class=\"fbi-btn-wrapper fbi-anim\" style=\"transition-delay: 1.4s;\">\n                <a href=\"#OTA\" class=\"fbi-btn\">Ota yhteytt\u00e4!<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n    \/* Base Container *\/\n    .fbi-hero-section {\n        position: relative;\n        width: 100%;\n        height: 100vh;\n        height: 100dvh;\n        min-height: 650px;\n        background: transparent;\n        overflow: hidden;\n        font-family: 'Inter', 'Montserrat', sans-serif;\n        color: #ffffff;\n        box-sizing: border-box;\n    }\n\n    \/* Video Background *\/\n    .fbi-video-wrapper {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        z-index: 1;\n        transition: width 2.2s cubic-bezier(0.16, 1, 0.3, 1), \n                    height 2.2s cubic-bezier(0.16, 1, 0.3, 1),\n                    top 2.2s cubic-bezier(0.16, 1, 0.3, 1);\n        will-change: width, height, top;\n    }\n\n    .fbi-bg-video {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n    }\n\n    .fbi-overlay {\n        position: absolute;\n        inset: 0;\n        background: rgba(0, 0, 0, 0.3);\n    }\n\n    \/* Logo Handling *\/\n    .fbi-logo-center {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 120px;\n        z-index: 4;\n        transition: left 2.2s cubic-bezier(0.16, 1, 0.3, 1), \n                    top 2.2s cubic-bezier(0.16, 1, 0.3, 1), \n                    opacity 0.4s ease 1.8s;\n        pointer-events: none;\n    }\n\n    .fbi-logo-top-right {\n        position: absolute;\n        top: 3rem;\n        right: 5rem;\n        width: 120px;\n        z-index: 10;\n        opacity: 0;\n        transition: opacity 0.8s ease 2.1s;\n        pointer-events: none;\n    }\n\n    \/* Content Area *\/\n    .fbi-content-wrapper {\n        position: absolute;\n        top: 0;\n        right: 0;\n        width: 55%;\n        height: 100%;\n        z-index: 3;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        padding: 4rem 5rem;\n        box-sizing: border-box;\n        pointer-events: none;\n    }\n\n    .fbi-text-group {\n        max-width: 600px;\n    }\n\n    .fbi-heading {\n        font-size: 3.5rem;\n        font-weight: 400;\n        margin: 0 0 1.5rem 0;\n        letter-spacing: -0.02em;\n    }\n\n    .fbi-body-text {\n        font-size: 1.1rem;\n        line-height: 1.8;\n        color: #cccccc;\n        margin: 0 0 2.5rem 0;\n        font-weight: 300;\n    }\n\n    \/* Button *\/\n    .fbi-btn {\n        display: inline-block;\n        padding: 1rem 3rem;\n        color: #ffffff;\n        text-decoration: none;\n        font-weight: 400;\n        font-size: 0.85rem;\n        letter-spacing: 0.1em;\n        text-transform: uppercase;\n        border: 1px solid rgba(255, 255, 255, 0.3);\n        border-radius: 50px;\n        transition: all 0.5s ease;\n    }\n\n    .fbi-btn:hover {\n        background-color: #0A4DFF;\n        border-color: #0A4DFF;\n        color: #ffffff;\n    }\n\n    .fbi-anim {\n        opacity: 0;\n        transform: translateY(20px);\n        transition: opacity 1.8s ease, transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);\n    }\n\n    \/* Animation States - Desktop *\/\n    .fbi-hero-section.is-split .fbi-video-wrapper { width: 45%; }\n    .fbi-hero-section.is-split .fbi-logo-center { left: 22.5%; opacity: 0; }\n    .fbi-hero-section.is-split .fbi-content-wrapper { pointer-events: auto; }\n    .fbi-hero-section.is-split .fbi-logo-top-right { opacity: 1; }\n    .fbi-hero-section.is-split .fbi-anim { opacity: 1; transform: translateY(0); }\n\n    \/* --- RESPONSIVE BREAKPOINTS --- *\/\n\n    \/* Tablets and Small Laptops *\/\n    @media (max-width: 1024px) {\n        .fbi-content-wrapper { padding: 3rem; }\n        .fbi-logo-top-right { right: 3rem; top: 2rem; }\n    }\n\n    \/* Mobile Devices (Vertical Split) *\/\n    @media (max-width: 900px) {\n        .fbi-hero-section.is-split .fbi-video-wrapper { \n            width: 100%; \n            height: 40%;\n        }\n        \n        .fbi-hero-section.is-split .fbi-logo-center {\n            left: 50%;\n            top: 20%;\n        }\n\n        .fbi-content-wrapper { \n            top: 40%; \n            width: 100%; \n            height: 60%; \n            padding: 2.5rem 2rem; \n            justify-content: flex-start;\n            overflow-y: auto; \n        }\n\n        \/* Shifted logo to top left *\/\n        .fbi-logo-top-right { \n            top: 1.5rem; \n            right: auto; \n            left: 1.5rem;\n            width: 80px; \n        }\n\n        .fbi-heading {\n            font-size: 2.5rem;\n            margin-bottom: 1rem;\n        }\n\n        .fbi-body-text {\n            font-size: 14px; \n            margin-bottom: 1.5rem;\n        }\n    }\n\n    \/* Extra Small Devices (Phones) *\/\n    @media (max-width: 480px) {\n        .fbi-hero-section.is-split .fbi-video-wrapper {\n            height: 35%;\n        }\n        .fbi-hero-section.is-split .fbi-logo-center {\n            top: 17.5%;\n        }\n        .fbi-content-wrapper {\n            top: 35%;\n            height: 65%;\n            padding: 1.5rem;\n        }\n        .fbi-heading {\n            font-size: 2rem;\n        }\n        .fbi-body-text {\n            font-size: 13px;\n        }\n        \/* Adjusted top left logo spacing for small screens *\/\n        .fbi-logo-top-right {\n            width: 65px;\n            top: 1rem;\n            right: auto;\n            left: 1rem;\n        }\n        .fbi-btn {\n            padding: 0.8rem 2rem;\n        }\n    }\n<\/style>\n\n<script>\n    (() => {\n        const init = () => {\n            const hero = document.getElementById('fbi-hero');\n            if (hero) {\n                setTimeout(() => { hero.classList.add('is-split'); }, 3000);\n            }\n        };\n        document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', init) : init();\n    })();\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-377be75d e-con e-atomic-element e-flexbox-base e-377be75d-463eb49 \" data-id=\"377be75d\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"377be75d\">\n    <div class=\"elementor-element elementor-element-146cf962 e-flex e-con-boxed e-con e-child\" data-id=\"146cf962\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6565c23f elementor-widget elementor-widget-html\" data-id=\"6565c23f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"hamburger\" id=\"hamburger\" aria-label=\"Toggle Menu\">\n  <span class=\"line\"><\/span>\n  <span class=\"line\"><\/span>\n  <span class=\"line\"><\/span>\n<\/div>\n\n<div id=\"luxury-nav\" class=\"nav-container\">\n  <a href=\"#alkuun\" class=\"nav-item\">ALKUUN<\/a>\n  <a href=\"#MEISTA\" class=\"nav-item\">MEIST\u00c4<\/a>\n  <a href=\"#PALVELUT\" class=\"nav-item\">PALVELUT<\/a>\n  <a href=\"#OTA\" class=\"nav-item\">OTA YHTEYTT\u00c4<\/a>\n<\/div>\n\n<style>\n  \/* Fixed Left Navigation (Desktop) *\/\n  .nav-container {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 170px;\n    height: 100vh;\n    background: transparent;\n    z-index: 9998;\n    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background-color 0.4s ease;\n  }\n\n  .nav-item {\n    position: absolute;\n    left: 35px;\n    color: #ffffff;\n    text-decoration: none;\n    font-family: 'Helvetica Neue', 'Montserrat', sans-serif;\n    font-weight: 300;\n    font-size: 13px;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    white-space: nowrap;\n    transition: opacity 0.4s ease, color 0.4s ease;\n  }\n\n  \/* Vertical Positions *\/\n  .nav-item:nth-child(1) { top: calc(50vh - 60px); }\n  .nav-item:nth-child(2) { top: calc(50vh - 20px); }\n  .nav-item:nth-child(3) { top: calc(50vh + 20px); }\n  .nav-item:nth-child(4) { top: calc(50vh + 60px); }\n\n  \/* Underline Effect *\/\n  .nav-item::after {\n    content: '';\n    position: absolute;\n    bottom: -6px;\n    left: 0;\n    width: 0;\n    height: 1px;\n    background: #0A4DFF;\n    transition: width 0.4s ease;\n  }\n\n  .nav-item:hover::after, .nav-item.active::after {\n    width: 100%;\n  }\n\n  .nav-item:hover, .nav-item.active {\n    opacity: 1;\n    color: #0A4DFF;\n  }\n\n  \/* Hamburger Menu Button *\/\n  .hamburger {\n    display: none;\n    position: fixed;\n    top: 25px;\n    right: 25px;\n    width: 30px;\n    height: 20px;\n    z-index: 9999;\n    cursor: pointer;\n  }\n\n  .hamburger .line {\n    position: absolute;\n    width: 100%;\n    height: 2px;\n    background-color: #ffffff;\n    transition: all 0.3s ease;\n  }\n\n  .hamburger .line:nth-child(1) { top: 0; }\n  .hamburger .line:nth-child(2) { top: 9px; }\n  .hamburger .line:nth-child(3) { top: 18px; }\n\n  \/* Hamburger Active State (Turns into an X) *\/\n  .hamburger.active .line:nth-child(1) {\n    transform: rotate(45deg);\n    top: 9px;\n  }\n  .hamburger.active .line:nth-child(2) {\n    opacity: 0;\n  }\n  .hamburger.active .line:nth-child(3) {\n    transform: rotate(-45deg);\n    top: 9px;\n  }\n\n  \/* Mobile Styles *\/\n  @media (max-width: 768px) {\n    .hamburger {\n      display: block;\n    }\n\n    .nav-container {\n      width: 100vw;\n      height: 100vh; \/* Ensures the menu covers the full screen vertically *\/\n      background: rgba(17, 17, 17, 0.98); \/* Almost solid dark background *\/\n      transform: translateY(-100%); \/* Hides the menu above the viewport *\/\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n    }\n\n    .nav-container.open {\n      transform: translateY(0); \/* Slides down from the top *\/\n    }\n\n    \/* Override absolute positioning for a clean centered list *\/\n    .nav-item {\n      position: relative;\n      top: auto !important;\n      left: auto !important;\n      margin: 25px 0;\n      font-size: 18px; \/* Slightly larger for easier tapping on mobile *\/\n    }\n  }\n<\/style>\n\n<script>\n  document.addEventListener('DOMContentLoaded', () => {\n    const navItems = document.querySelectorAll('.nav-item');\n    const hamburger = document.getElementById('hamburger');\n    const navContainer = document.getElementById('luxury-nav');\n\n    \/\/ Toggle mobile menu visibility\n    hamburger.addEventListener('click', () => {\n      hamburger.classList.toggle('active');\n      navContainer.classList.toggle('open');\n      \n      \/\/ Prevent background scrolling when menu is active\n      if (navContainer.classList.contains('open')) {\n        document.body.style.overflow = 'hidden';\n      } else {\n        document.body.style.overflow = '';\n      }\n    });\n\n    \/\/ Close mobile menu automatically when a navigation link is clicked\n    navItems.forEach(item => {\n      item.addEventListener('click', () => {\n        if (window.innerWidth <= 768) {\n          hamburger.classList.remove('active');\n          navContainer.classList.remove('open');\n          document.body.style.overflow = ''; \/\/ Restore scrolling\n        }\n      });\n    });\n\n    \/\/ Scroll active state logic\n    window.addEventListener('scroll', () => {\n      let activeSectionHref = null;\n\n      navItems.forEach(item => {\n        const targetId = item.getAttribute('href');\n        if (!targetId || targetId === '#') return;\n        const liveSection = document.querySelector(targetId);\n\n        if (liveSection) {\n          const rect = liveSection.getBoundingClientRect();\n          \/\/ Trigger when section is in the middle of the screen\n          if (rect.top <= window.innerHeight * 0.4 && rect.bottom >= window.innerHeight * 0.4) {\n            activeSectionHref = targetId;\n          }\n        }\n      });\n\n      navItems.forEach(item => {\n        item.classList.toggle('active', item.getAttribute('href') === activeSectionHref);\n      });\n    });\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-44f5ef30 e-con e-atomic-element e-flexbox-base e-44f5ef30-507f7ce \" data-id=\"44f5ef30\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"44f5ef30\">\n    <div class=\"elementor-element elementor-element-491d0b1b e-flex e-con-boxed e-con e-parent\" data-id=\"491d0b1b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-60f25ef9 e-con-full e-flex e-con e-child\" data-id=\"60f25ef9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-47f3cebb e-con-full e-flex e-con e-child\" data-id=\"47f3cebb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-71028686 elementor-widget elementor-widget-heading\" data-id=\"71028686\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">FBI \u2013 Luotettavaa <br>rakentamista <br>koko Suomessa<\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t\n<hr class=\"e-divider-base\" data-interaction-id=\"57056065\"   \/>\n\t\t\t\t<div class=\"elementor-element elementor-element-45276674 elementor-widget elementor-widget-text-editor\" data-id=\"45276674\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-path-to-node=\"17\">FBI on perustettu tarpeesta tarjota rehellist\u00e4, kest\u00e4v\u00e4\u00e4 ja aikataulussa pysyv\u00e4\u00e4 rakennuspalvelua. Meille jokainen ty\u00f6maa on k\u00e4yntikortti, ja panostamme pitk\u00e4aikaisiin kumppanuuksiin.<\/p><p data-path-to-node=\"18\">Toimintamme kulmakivi\u00e4 ovat ty\u00f6turvallisuus, ymp\u00e4rist\u00f6vastuu sek\u00e4 tiivis vuoropuhelu tilaajan kanssa. K\u00e4yt\u00e4mme vain laadukkaita, sertifioituja materiaaleja ja varmistamme, ett\u00e4 j\u00e4lki kest\u00e4\u00e4 aikaa.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7a126833 e-con-full e-flex e-con e-child\" data-id=\"7a126833\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-79f0967 e-con-full e-flex e-con e-child\" data-id=\"79f0967\" data-element_type=\"container\" data-e-type=\"container\" id=\"MEISTA\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-2e0e3725 e-con e-atomic-element e-flexbox-base e-2e0e3725-8bcce2f \" data-id=\"2e0e3725\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"2e0e3725\">\n    <div class=\"elementor-element elementor-element-145fbf9 e-con e-atomic-element e-flexbox-base e-b329bad \" data-id=\"145fbf9\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"145fbf9\">\n    \t\t<div class=\"elementor-element elementor-element-a5e7eab elementor-widget elementor-widget-html\" data-id=\"a5e7eab\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  \/* --- Main Container --- *\/\n  .custom-why-us-section {\n    width: 100%;\n    max-width: 1200px;\n    margin: 0 auto;\n    font-family: 'Inter', 'Montserrat', sans-serif;\n    color: #ffffff;\n    padding: 4rem 1rem; \n    box-sizing: border-box;\n  }\n\n  .why-us-title {\n    text-align: left; \n    color: #ffffff; \n    font-size: 3.2rem;\n    font-weight: 300; \n    margin: 0 0 50px 0;\n    letter-spacing: -0.02em;\n    line-height: 1.1;\n  }\n\n  \/* --- Grid Layout --- *\/\n  .why-us-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 30px;\n  }\n\n  \/* --- Premium Airy Cards with Blurred Backgrounds --- *\/\n  .wu-card {\n    border: 1px solid rgba(255, 255, 255, 0.15); \n    border-radius: 6px; \n    padding: 40px 30px; \n    text-align: left;\n    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); \n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    position: relative;\n    overflow: hidden; \/* Pit\u00e4\u00e4 sumennuksen kortin sis\u00e4ll\u00e4 *\/\n  }\n\n  \/* Taustakuvan pseudo-elementti *\/\n  .wu-card::before {\n    content: '';\n    position: absolute;\n    \/* Venytet\u00e4\u00e4n hieman yli reunojen, jottei sumennus j\u00e4t\u00e4 reunoja ohuiksi\/valoiksi *\/\n    top: -20px; \n    left: -20px; \n    right: -20px; \n    bottom: -20px; \n    background-image: var(--bg-img);\n    background-size: cover;\n    background-position: center;\n    filter: blur(8px) brightness(0.3); \/* Sumennus ja tummennus tekstin luettavuuden takaamiseksi *\/\n    z-index: 0;\n    transition: all 0.5s ease;\n  }\n\n  \/* Hover State *\/\n  .wu-card:hover {\n    border-color: #0056b3;\n    transform: translateY(-8px);\n  }\n\n  .wu-card:hover::before {\n    transform: scale(1.05); \/* Pieni zoomaus *\/\n    filter: blur(4px) brightness(0.4); \/* Kirkastuu ja tarkentuu hieman *\/\n  }\n\n  \/* Varmistetaan, ett\u00e4 sis\u00e4lt\u00f6 on taustakuvan p\u00e4\u00e4ll\u00e4 *\/\n  .wu-icon, .wu-title, .wu-text {\n    position: relative;\n    z-index: 1;\n  }\n\n  .wu-icon {\n    margin-bottom: 25px;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n  }\n\n  .wu-icon svg {\n    stroke: #ffffff; \n    transition: stroke 0.4s ease;\n  }\n\n  .wu-card:hover .wu-icon svg {\n    stroke: #00a8ff; \/* Vaaleampi sininen korostus, n\u00e4kyy paremmin tummaa taustaa vasten *\/\n  }\n\n  .wu-title {\n    color: #ffffff; \n    font-size: 1.3rem; \n    font-weight: 400;\n    margin: 0 0 15px 0;\n    line-height: 1.4;\n    letter-spacing: -0.01em;\n  }\n\n  .wu-text {\n    color: #cccccc; \n    font-size: 1rem;\n    line-height: 1.7;\n    font-weight: 300;\n    margin: 0;\n  }\n\n  \/* --- Responsiveness --- *\/\n  @media (max-width: 992px) {\n    .why-us-grid {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n\n  @media (max-width: 768px) {\n    .why-us-title {\n      font-size: 2.5rem;\n      margin-bottom: 35px;\n    }\n    .why-us-grid {\n      grid-template-columns: 1fr;\n      gap: 20px;\n    }\n    .wu-card {\n      padding: 30px 20px;\n    }\n  }\n<\/style>\n\n<div class=\"custom-why-us-section\">\n  <h2 class=\"why-us-title\">Miksi valita meid\u00e4t?<\/h2>\n\n  <div class=\"why-us-grid\">\n    \n    <div class=\"wu-card\" style=\"--bg-img: url('https:\/\/fbioy.fi\/wp-content\/uploads\/2026\/06\/josh-olalde-X1P1_EDNnok-unsplash-scaled.jpg');\">\n      <div class=\"wu-icon\">\n        <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/>\n        <\/svg>\n      <\/div>\n      <h3 class=\"wu-title\">Korkea laatu ja luotettavuus<\/h3>\n      <p class=\"wu-text\">Noudatamme tarkasti alan standardeja ja viranomaism\u00e4\u00e4r\u00e4yksi\u00e4.<\/p>\n    <\/div>\n\n    <div class=\"wu-card\" style=\"--bg-img: url('https:\/\/fbioy.fi\/wp-content\/uploads\/2026\/06\/steffen-lemmerzahl-XXanshmt5so-unsplash-scaled.jpg');\">\n      <div class=\"wu-icon\">\n        <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/>\n          <circle cx=\"8.5\" cy=\"7\" r=\"4\"\/>\n          <polyline points=\"17 11 19 13 23 9\"\/>\n        <\/svg>\n      <\/div>\n      <h3 class=\"wu-title\">Sujuva aliurakointi<\/h3>\n      <p class=\"wu-text\">Toimimme suurten p\u00e4\u00e4urakoitsijoiden kumppanina tehokkaasti ja saumattomasti.<\/p>\n    <\/div>\n\n    <div class=\"wu-card\" style=\"--bg-img: url('https:\/\/fbioy.fi\/wp-content\/uploads\/2026\/06\/steffen-lemmerzahl-pBZBbCqyW8M-unsplash.jpg');\">\n      <div class=\"wu-icon\">\n        <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/>\n          <polyline points=\"14 2 14 8 20 8\"\/>\n          <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/>\n          <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/>\n          <polyline points=\"10 9 9 9 8 9\"\/>\n        <\/svg>\n      <\/div>\n      <h3 class=\"wu-title\">Julkisen sektorin tuntemus<\/h3>\n      <p class=\"wu-text\">Kaupunkien, kuntien ja seurakuntien hankintaprosessit ja vaatimukset ovat meille tuttuja.<\/p>\n    <\/div>\n\n  <\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-77fd6725 e-flex e-con-boxed e-con e-parent\" data-id=\"77fd6725\" data-element_type=\"container\" data-e-type=\"container\" id=\"PALVELUT\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5e753323 elementor-widget elementor-widget-html\" data-id=\"5e753323\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  \/* --- Main Container --- *\/\n  .custom-service-section {\n    width: 100%;\n    max-width: 1200px;\n    margin: 0 auto;\n    font-family: 'Inter', 'Montserrat', sans-serif;\n    color: #ffffff;\n    padding: 2rem 1rem; \n    box-sizing: border-box;\n    overflow: hidden;\n  }\n\n  .main-section-title {\n    text-align: left; \n    color: #ffffff; \n    font-size: 3.2rem;\n    font-weight: 300; \n    margin: 0 0 15px 0;\n    letter-spacing: -0.02em;\n    line-height: 1.1;\n  }\n\n  .main-section-desc {\n    text-align: left;\n    color: #cccccc;\n    font-size: 1.1rem;\n    line-height: 1.6;\n    max-width: 800px;\n    margin: 0 0 40px 0;\n    font-weight: 300;\n  }\n\n  \/* --- Cards Wrapper --- *\/\n  .service-cards-container {\n    position: relative;\n    width: 100%;\n  }\n\n  .service-cards-wrapper {\n    width: 100%;\n    overflow-x: auto; \n    -webkit-overflow-scrolling: touch; \n    -ms-overflow-style: none;\n    scrollbar-width: none;\n    scroll-snap-type: x mandatory; \n    margin-bottom: 60px; \n  }\n\n  .service-cards-wrapper::-webkit-scrollbar {\n    display: none;\n  }\n\n  .service-cards-row {\n    display: flex;\n    flex-wrap: nowrap;\n    gap: 20px;\n    padding: 15px 0; \n    position: relative;\n    z-index: 1;\n  }\n\n  \/* --- Premium Cards --- *\/\n  .sc-card {\n    background: transparent; \n    border: 1px solid rgba(255, 255, 255, 0.15); \n    border-radius: 4px; \n    padding: 30px 15px; \n    text-align: center;\n    cursor: pointer;\n    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); \n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    min-height: 150px;\n    flex: 1 1 30%; \n    width: 200px; \n    position: relative;\n    z-index: 1;\n    scroll-snap-align: start; \n  }\n\n  .sc-card:hover, .sc-card.active {\n    border-color: #0056b3;\n    transform: translateY(-8px);\n    background: rgba(0, 86, 179, 0.1); \n  }\n\n  .sc-icon {\n    margin-bottom: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .sc-icon svg {\n    stroke: #ffffff; \n    transition: stroke 0.4s ease;\n  }\n\n  .sc-card:hover .sc-icon svg,\n  .sc-card.active .sc-icon svg {\n    stroke: #0056b3; \n  }\n\n  .sc-title {\n    color: #a3a3a3; \n    font-size: 0.85rem; \n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    line-height: 1.4;\n    transition: color 0.4s ease;\n  }\n\n  .sc-card:hover .sc-title,\n  .sc-card.active .sc-title {\n    color: #ffffff; \n  }\n\n  \/* --- Mobile Scroll Hint --- *\/\n  .mobile-scroll-hint {\n    display: none;\n  }\n\n  \/* --- Content Area --- *\/\n  .service-content-area {\n    position: relative;\n    min-height: 200px;\n  }\n\n  .sc-content-panel {\n    display: none; \n    grid-template-columns: 40% 60%; \n    gap: 60px; \n    animation: fadeInSlide 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n  }\n\n  .sc-content-panel.active {\n    display: grid; \n  }\n\n  @keyframes fadeInSlide {\n    from { opacity: 0; transform: translateY(15px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  .sc-left h2 {\n    font-size: 2.2rem;\n    line-height: 1.2;\n    margin: 0 0 20px 0; \n    font-weight: 300; \n    color: #ffffff;\n  }\n\n  .sc-btn {\n    display: inline-block;\n    padding: 1rem 2.5rem;\n    color: #ffffff;\n    text-decoration: none;\n    font-weight: 400;\n    font-size: 0.8rem;\n    letter-spacing: 0.1em;\n    text-transform: uppercase;\n    border: 1px solid rgba(255, 255, 255, 0.3);\n    border-radius: 4px;\n    transition: all 0.5s ease;\n    text-align: center;\n  }\n\n  .sc-btn:hover {\n    background-color: #0056b3;\n    border-color: #0056b3;\n  }\n\n  .sc-right p {\n    font-size: 1.1rem;\n    line-height: 1.8;\n    color: #cccccc; \n    font-weight: 300;\n  }\n\n  \/* --- Mobile Styles --- *\/\n  @media (max-width: 768px) {\n    .main-section-title {\n      font-size: 2.2rem;\n      margin-bottom: 10px;\n    }\n\n    .main-section-desc {\n      font-size: 1rem;\n      margin-bottom: 30px;\n    }\n\n    .service-cards-wrapper {\n      margin-bottom: 20px; \/* Reduced to make room for the arrow *\/\n    }\n    \n    .service-cards-row {\n      padding-right: 1rem; \n    }\n\n    .sc-card {\n      flex: 0 0 180px; \n      width: 180px; \n      min-height: 140px;\n      padding: 25px 15px;\n    }\n\n    .sc-card:hover, .sc-card.active {\n      transform: none; \n    }\n    \n    \/* Mobile Scroll Hint Setup *\/\n    .mobile-scroll-hint {\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      gap: 8px;\n      color: #a3a3a3;\n      font-size: 0.85rem;\n      font-weight: 300;\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: 30px;\n      opacity: 1;\n      transition: opacity 0.5s ease;\n      padding-right: 1rem;\n    }\n\n    .mobile-scroll-hint svg {\n      animation: swipeBounce 1.5s infinite;\n    }\n\n    @keyframes swipeBounce {\n      0%, 100% { transform: translateX(0); }\n      50% { transform: translateX(6px); }\n    }\n\n    .mobile-scroll-hint.hidden {\n      opacity: 0;\n      pointer-events: none;\n    }\n\n    .sc-content-panel {\n      grid-template-columns: 1fr;\n      gap: 30px; \n    }\n\n    .sc-left h2 {\n      font-size: 1.8rem; \n      margin-bottom: 15px;\n    }\n\n    .sc-right p {\n      font-size: 1rem;\n      line-height: 1.6;\n    }\n\n    .sc-btn {\n      width: 100%; \n      box-sizing: border-box;\n    }\n  }\n<\/style>\n\n<div class=\"custom-service-section\">\n  <h2 class=\"main-section-title\">Palvelut<\/h2>\n  <p class=\"main-section-desc\">Tarjoamme monipuolisia rakennusalan palveluita pitk\u00e4ll\u00e4 kokemuksella. P\u00e4\u00e4painomme on julkisessa rakentamisessa ja B2B-kumppanuuksissa, mutta toteutamme projekteja my\u00f6s yksityisille toimijoille.<\/p>\n\n  <div class=\"service-cards-container\">\n    <div class=\"service-cards-wrapper\" id=\"service-scroll-area\">\n      <div class=\"service-cards-row\">\n        \n        <!-- Kortti 1: Julkinen sektori -->\n        <div class=\"sc-card active\" data-tab=\"tab-1\">\n          <div class=\"sc-icon\">\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M4 9h16M4 21h16M2 21h20M12 3l8 6H4l8-6zM6 9v12M10 9v12M14 9v12M18 9v12\"\/>\n            <\/svg>\n          <\/div>\n          <div class=\"sc-title\">Kaupungit, kunnat<br>ja seurakunnat<\/div>\n        <\/div>\n\n        <!-- Kortti 2: Aliurakointi -->\n        <div class=\"sc-card\" data-tab=\"tab-2\">\n          <div class=\"sc-icon\">\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"\/>\n            <\/svg>\n          <\/div>\n          <div class=\"sc-title\">Aliurakointi suurille<br>rakennusliikkeille<\/div>\n        <\/div>\n\n        <!-- Kortti 3: Yksityisasiakkaat -->\n        <div class=\"sc-card\" data-tab=\"tab-3\">\n          <div class=\"sc-icon\">\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/>\n              <polyline points=\"9 22 9 12 15 12 15 22\"\/>\n            <\/svg>\n          <\/div>\n          <div class=\"sc-title\">Yksityis-<br>asiakkaat<\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n    \n    <!-- Mobile visual cue for horizontal scroll -->\n    <div class=\"mobile-scroll-hint\" id=\"scroll-hint\">\n      <span>Pyyhk\u00e4ise<\/span>\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\n      <\/svg>\n    <\/div>\n  <\/div>\n\n  <div class=\"service-content-area\">\n    \n    <!-- Paneeli 1 -->\n    <div class=\"sc-content-panel active\" id=\"tab-1\">\n      <div class=\"sc-left\">\n        <h2>Kaupungit, kunnat ja seurakunnat<\/h2>\n        <a href=\"#OTA\" class=\"sc-btn\">Ota yhteytt\u00e4<\/a>\n      <\/div>\n      <div class=\"sc-right\">\n        <p>Toteutamme julkisen sektorin rakennushankkeet vastuullisesti ja l\u00e4pin\u00e4kyv\u00e4sti. Olipa kyseess\u00e4 toimitilojen saneeraus, infra-rakentaminen tai seurakuntien erityisosaamista vaativat kohteet, olemme varma kumppani kilpailutuksesta valmiiseen lopputulokseen.<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- Paneeli 2 -->\n    <div class=\"sc-content-panel\" id=\"tab-2\">\n      <div class=\"sc-left\">\n        <h2>Aliurakointi suurille rakennusliikkeille<\/h2>\n        <a href=\"#OTA\" class=\"sc-btn\">Ota yhteytt\u00e4<\/a>\n      <\/div>\n      <div class=\"sc-right\">\n        <p>Tarjoamme suuryrityksille ammattitaitoista ja itsen\u00e4ist\u00e4 aliurakointia. Meill\u00e4 on oma, osaava henkil\u00f6st\u00f6 ja nykyaikainen kalusto, joten pystymme reagoimaan nopeasti ja pit\u00e4m\u00e4\u00e4n kiinni tiukoistakin aikatauluista osana laajempaa ty\u00f6maakokonaisuutta.<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- Paneeli 3 -->\n    <div class=\"sc-content-panel\" id=\"tab-3\">\n      <div class=\"sc-left\">\n        <h2>Yksityisasiakkaat<\/h2>\n        <a href=\"#OTA\" class=\"sc-btn\">Ota yhteytt\u00e4<\/a>\n      <\/div>\n      <div class=\"sc-right\">\n        <p>Palvelemme yksityishenkil\u00f6it\u00e4 valikoiduissa ja vaativissa rakennus- sek\u00e4 remonttihankkeissa. Tuomme suuren mittakaavan osaamisen ja laatuvaatimukset my\u00f6s kotitalouksien k\u00e4ytt\u00f6\u00f6n.<\/p>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n  (() => {\n    const serviceCards = document.querySelectorAll('.sc-card');\n    const servicePanels = document.querySelectorAll('.sc-content-panel');\n    const scrollArea = document.getElementById('service-scroll-area');\n    const scrollHint = document.getElementById('scroll-hint');\n\n    const switchServiceTab = (targetId) => {\n      serviceCards.forEach(card => card.classList.remove('active'));\n      servicePanels.forEach(panel => panel.classList.remove('active'));\n      const targetCard = document.querySelector(`[data-tab=\"${targetId}\"]`);\n      const targetPanel = document.getElementById(targetId);\n      if (targetCard) targetCard.classList.add('active');\n      if (targetPanel) targetPanel.classList.add('active');\n    };\n\n    serviceCards.forEach(card => {\n      card.addEventListener('mouseenter', () => switchServiceTab(card.dataset.tab));\n      card.addEventListener('click', () => switchServiceTab(card.dataset.tab));\n    });\n\n    \/\/ Hide scroll hint when the user scrolls the cards container horizontally\n    if (scrollArea && scrollHint) {\n      scrollArea.addEventListener('scroll', () => {\n        if (scrollArea.scrollLeft > 20) {\n          scrollHint.classList.add('hidden');\n        } else {\n          scrollHint.classList.remove('hidden');\n        }\n      });\n    }\n  })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-7121ffd4 e-con e-atomic-element e-flexbox-base e-7121ffd4-6709479 \" data-id=\"7121ffd4\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"7121ffd4\">\n    <div class=\"elementor-element elementor-element-722f7544 e-flex e-con-boxed e-con e-parent\" data-id=\"722f7544\" data-element_type=\"container\" data-e-type=\"container\" id=\"OTA\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-7ea692f8 e-con-full e-flex e-con e-child\" data-id=\"7ea692f8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9813f62 elementor-widget elementor-widget-google_maps\" data-id=\"9813f62\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"google_maps.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-custom-embed\">\n\t\t\t<iframe loading=\"lazy\"\n\t\t\t\t\tsrc=\"https:\/\/maps.google.com\/maps?q=Harapaisentie%2049%20as.%201%2C%2053500%20Lappeenranta&#038;t=m&#038;z=12&#038;output=embed&#038;iwloc=near\"\n\t\t\t\t\ttitle=\"Harapaisentie 49 as. 1, 53500 Lappeenranta\"\n\t\t\t\t\taria-label=\"Harapaisentie 49 as. 1, 53500 Lappeenranta\"\n\t\t\t><\/iframe>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2d84b0f e-con-full e-flex e-con e-child\" data-id=\"2d84b0f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c600ab2 elementor-widget elementor-widget-shortcode\" data-id=\"c600ab2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f50-o1\" lang=\"fi\" dir=\"ltr\" data-wpcf7-id=\"50\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F10#wpcf7-f50-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Yhteydenottolomake\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"50\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.7\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"fi\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f50-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/fieldset>\n<style>\n .lux-form-container {\n max-width: 500px;\n margin: 0 auto;\n padding: 20px;\n }\n\n .lux-title {\n color: #ffffff;\n font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-weight: 300;\n text-transform: uppercase;\n letter-spacing: 4px;\n margin-bottom: 40px;\n text-align: left; \n }\n \n .lux-input, .lux-textarea {\n width: 100%;\n background: transparent;\n border: none;\n border-bottom: 1px solid rgba(255, 255, 255, 0.3);\n padding: 15px 0;\n margin-bottom: 20px;\n color: #ffffff;\n font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-size: 16px;\n outline: none;\n transition: border-bottom 0.3s ease;\n }\n\n .lux-input:focus, .lux-textarea:focus {\n border-bottom: 1px solid #FF7602;\n }\n\n .lux-input::placeholder, .lux-textarea::placeholder {\n color: rgba(255, 255, 255, 0.5);\n text-transform: uppercase;\n letter-spacing: 1px;\n font-size: 12px;\n }\n\n .lux-button {\n background: transparent;\n color: #ffffff;\n border: 1px solid #ffffff;\n padding: 12px 40px;\n text-transform: uppercase;\n letter-spacing: 2px;\n font-size: 12px;\n cursor: pointer;\n transition: all 0.3s ease;\n display: inline-block; \n border-radius: 50px; \n margin-top: 20px;\n }\n\n .lux-button:hover {\n background: #FF7602;\n border: 1px solid #FF7602;\n color: #ffffff;\n }\n\n .lux-form-container .wpcf7-response-output {\n color: #ffffff !important;\n border: 1px solid rgba(255, 255, 255, 0.3) !important;\n font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n border-radius: 5px;\n }\n\n .lux-form-container .wpcf7-not-valid-tip {\n color: #FF7602 !important;\n font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-size: 12px;\n }\n<\/style>\n<div class=\"lux-form-container\" id=\"your-id-here\">\n\t<h2 class=\"lux-title\">Ota yhteytt\u00e4\n\t<\/h2>\n\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required lux-input\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Nimi\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span>\n\t<\/p>\n\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email lux-input\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"S\u00e4hk\u00f6posti\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span>\n\t<\/p>\n\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"your-subject\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required lux-input\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Aihe\" value=\"\" type=\"text\" name=\"your-subject\" \/><\/span>\n\t<\/p>\n\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea lux-textarea\" aria-invalid=\"false\" placeholder=\"Viesti\" name=\"your-message\"><\/textarea><\/span>\n\t<\/p>\n\t<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner lux-button\" type=\"submit\" value=\"L\u00e4het\u00e4 viesti\" \/>\n\t<\/p>\n<\/div><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-16ff8109 e-con e-atomic-element e-flexbox-base e-16ff8109-08692e4 \" data-id=\"16ff8109\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"16ff8109\">\n    \t\t<div class=\"elementor-element elementor-element-488d1ab5 elementor-widget elementor-widget-html\" data-id=\"488d1ab5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<footer class=\"luxury-footer\">\n  <nav class=\"footer-nav\">\n    <a href=\"#alkuun\">ALKUUN<\/a>\n    <a href=\"#MEISTA\">MEIST\u00c4<\/a>\n    <a href=\"#PALVELUT\">PALVELUT<\/a>\n    <a href=\"#OTA\">OTA YHTEYTT\u00c4<\/a>\n  <\/nav>\n\n  <div class=\"footer-info\">\n    <p>Harapaisentie 49 as. 1, 53500 Lappeenranta<\/p>\n    <p>3510494-2<\/p>\n  <\/div>\n\n  <div class=\"footer-credit\">\n    <p>Sivun suunnitellut Haiku Creative<\/p>\n  <\/div>\n<\/footer>\n\n<style>\n  \/* Base \/ Desktop Styles *\/\n  .luxury-footer {\n    background: transparent;\n    color: #ffffff;\n    padding: 80px 20px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 40px;\n    text-align: center;\n    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    letter-spacing: 0.15em;\n    text-transform: uppercase;\n  }\n\n  .footer-nav {\n    display: flex;\n    gap: 30px;\n  }\n\n  .footer-nav a {\n    color: #ffffff;\n    text-decoration: none;\n    font-size: 0.85rem;\n    transition: opacity 0.3s ease;\n  }\n\n  .footer-nav a:hover {\n    opacity: 0.6;\n  }\n\n  .footer-info {\n    font-size: 0.75rem;\n    color: #cccccc;\n    line-height: 1.8;\n  }\n\n  .footer-credit {\n    font-size: 0.65rem;\n    color: #777777;\n    margin-top: 10px;\n  }\n\n  \/* Mobile Styles *\/\n  @media (max-width: 600px) {\n    .luxury-footer {\n      padding: 50px 20px; \/* Reduces the height of the footer on small screens *\/\n      gap: 30px;          \/* Tightens the spacing between major sections *\/\n    }\n\n    .footer-nav {\n      flex-direction: column; \/* Stacks the links vertically *\/\n      gap: 20px;              \/* Gives breathing room between stacked links *\/\n    }\n  }\n<\/style>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>FBI on luotettava ja ammattitaitoinen rakennusalan kumppani, joka toteuttaa vaativat hankkeet sopimuksen mukaan, ajallaan ja budjetissa. Olemme erikoistuneet palvelemaan julkista sektoria, seurakuntia sek\u00e4 toimimaan luotettavana aliurakoitsijana suurille rakennusalan yrityksille. Tarjoamme vahvaa osaamista, joustavaa palvelua ja nykyaikaiset menetelm\u00e4t infrastruktuurin ja toimitilojen rakentamiseen. Palvelemme joustavasti my\u00f6s yksityisasiakkaita valikoiduissa hankkeissa. Ota yhteytt\u00e4! ALKUUN MEIST\u00c4 PALVELUT OTA YHTEYTT\u00c4 FBI [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fbioy.fi\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fbioy.fi\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fbioy.fi\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fbioy.fi\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fbioy.fi\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":25,"href":"https:\/\/fbioy.fi\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":53,"href":"https:\/\/fbioy.fi\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/53"}],"wp:attachment":[{"href":"https:\/\/fbioy.fi\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}