{"id":7,"date":"2026-06-18T03:55:54","date_gmt":"2026-06-18T03:55:54","guid":{"rendered":"https:\/\/skillful-aqua-salamander.157-180-92-33.cpanel.site\/?page_id=7"},"modified":"2026-08-11T10:28:49","modified_gmt":"2026-08-11T10:28:49","slug":"elementor-7","status":"publish","type":"page","link":"https:\/\/tjrcapital.fi\/","title":{"rendered":"Etusivu"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"7\" class=\"elementor elementor-7\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5502068 e-con e-atomic-element e-flexbox-base e-72799cb \" data-id=\"5502068\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"5502068\">\n    <div class=\"elementor-element elementor-element-2dfd40a e-flex e-con-boxed e-con e-child\" data-id=\"2dfd40a\" 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-8228b7b elementor-widget elementor-widget-html\" data-id=\"8228b7b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Mobile Hamburger Button -->\n<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  \/* Container Morph (Desktop) *\/\n  .nav-container {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100vw;\n    height: 100px;\n    background: transparent;\n    border-bottom-right-radius: 0;\n    pointer-events: none;\n    z-index: 9998;\n    \n    transition: width 1.2s cubic-bezier(0.77, 0, 0.175, 1), \n                height 1.2s cubic-bezier(0.77, 0, 0.175, 1),\n                border-radius 1.2s cubic-bezier(0.77, 0, 0.175, 1),\n                background-color 0.5s ease;\n  }\n\n  .nav-container.scrolled {\n    width: 170px; \n    height: 100vh;\n    border-bottom-right-radius: 100%; \n  }\n\n  \/* Luxury White Items *\/\n  .nav-item {\n    position: absolute;\n    top: 50px; \n    transform: translate(-50%, -50%); \n    pointer-events: auto; \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    \n    transition: top 1.2s cubic-bezier(0.77, 0, 0.175, 1),\n                left 1.2s cubic-bezier(0.77, 0, 0.175, 1),\n                transform 1.2s cubic-bezier(0.77, 0, 0.175, 1),\n                opacity 0.4s ease,\n                color 0.4s ease;\n  }\n\n  .nav-item:nth-child(1) { transition-delay: 0s; }\n  .nav-item:nth-child(2) { transition-delay: 0.05s; }\n  .nav-item:nth-child(3) { transition-delay: 0.1s; }\n  .nav-item:nth-child(4) { transition-delay: 0.15s; }\n\n  \/* Left-to-right hover underline *\/\n  .nav-item::after {\n    content: '';\n    position: absolute;\n    bottom: -6px;\n    left: 0;\n    width: 0;\n    height: 1px;\n    background: #FF7602;\n    transition: width 0.4s ease;\n  }\n  \n  .nav-item:hover::after {\n    width: 100%;\n  }\n  \n  .nav-item:hover {\n    opacity: 0.7;\n  }\n\n  \/* Base Top Positions (Desktop) *\/\n  .nav-item:nth-child(1) { left: calc(50vw - 215px); }\n  .nav-item:nth-child(2) { left: calc(50vw - 100px); }\n  .nav-item:nth-child(3) { left: calc(50vw + 25px); }\n  .nav-item:nth-child(4) { left: calc(50vw + 182px); }\n\n  \/* Scrolled Vertical Positions (Flush Left) *\/\n  .nav-container.scrolled .nav-item {\n    transform: translate(0%, -50%); \n    left: 35px; \n  }\n  \n  .nav-container.scrolled .nav-item:nth-child(1) { top: calc(50vh - 60px); }\n  .nav-container.scrolled .nav-item:nth-child(2) { top: calc(50vh - 20px); }\n  .nav-container.scrolled .nav-item:nth-child(3) { top: calc(50vh + 20px); }\n  .nav-container.scrolled .nav-item:nth-child(4) { top: calc(50vh + 60px); }\n\n  \/* Forces the active item to turn orange ONLY when in the vertical .scrolled state *\/\n  .nav-container.scrolled .nav-item.active {\n    color: #FF7602 !important;\n    opacity: 1 !important;\n  }\n\n  .nav-container.scrolled .nav-item.active::after {\n    width: 100% !important;\n  }\n\n  \/* --- Hamburger Menu Icon --- *\/\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 .line:nth-child(1) { transform: rotate(45deg); top: 9px; }\n  .hamburger.active .line:nth-child(2) { opacity: 0; }\n  .hamburger.active .line:nth-child(3) { transform: rotate(-45deg); top: 9px; }\n\n  \/* --- Responsive Adjustments for Mobile --- *\/\n  @media (max-width: 768px) {\n    .hamburger {\n      display: block;\n    }\n\n    \/* Override the complex morphing for a full-screen overlay *\/\n    .nav-container, .nav-container.scrolled {\n      width: 100vw !important;\n      height: 100vh !important;\n      background: rgba(17, 17, 17, 0.98) !important;\n      border-radius: 0 !important;\n      transform: translateY(-100%);\n      transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      pointer-events: auto; \/* Captures clicks on the dark background *\/\n    }\n\n    .nav-container.open {\n      transform: translateY(0);\n    }\n\n    \/* Stack items cleanly in the center *\/\n    .nav-item, .nav-container.scrolled .nav-item {\n      position: relative;\n      top: auto !important;\n      left: auto !important;\n      transform: none !important;\n      margin: 20px 0;\n      font-size: 16px;\n      letter-spacing: 2px;\n    }\n    \n    \/* Allow active state to show clearly on mobile overlay *\/\n    .nav-container .nav-item.active {\n      color: #FF7602 !important;\n    }\n    .nav-container .nav-item.active::after {\n      width: 100% !important;\n    }\n  }\n<\/style>\n\n<script>\n  document.addEventListener('DOMContentLoaded', () => {\n    const nav = document.getElementById('luxury-nav');\n    const hamburger = document.getElementById('hamburger');\n    const navItems = document.querySelectorAll('.nav-item');\n    \n    if (!nav) return;\n\n    \/\/ Mobile menu toggle\n    if (hamburger) {\n      hamburger.addEventListener('click', () => {\n        hamburger.classList.toggle('active');\n        nav.classList.toggle('open');\n        \n        \/\/ Prevent background scrolling\n        if (nav.classList.contains('open')) {\n          document.body.style.overflow = 'hidden';\n        } else {\n          document.body.style.overflow = '';\n        }\n      });\n    }\n\n    \/\/ Close menu when clicking a link on mobile\n    navItems.forEach(item => {\n      item.addEventListener('click', () => {\n        if (window.innerWidth <= 768) {\n          hamburger.classList.remove('active');\n          nav.classList.remove('open');\n          document.body.style.overflow = '';\n        }\n      });\n    });\n\n    window.addEventListener('scroll', () => {\n      \/\/ 1. Handle the Glass Morph (Only active visually on Desktop due to CSS overrides)\n      if (window.scrollY > 50) {\n        nav.classList.add('scrolled');\n      } else {\n        nav.classList.remove('scrolled');\n      }\n\n      \/\/ 2. Scan live DOM for matching IDs\n      let activeSectionHref = null;\n\n      navItems.forEach(item => {\n        const targetId = item.getAttribute('href');\n        if (!targetId || targetId === '#') return;\n\n        const liveSection = document.querySelector(targetId);\n\n        if (liveSection) {\n          const rect = liveSection.getBoundingClientRect();\n          const triggerLine = window.innerHeight * 0.35;\n\n          if (rect.top <= triggerLine && rect.bottom >= 0) {\n            activeSectionHref = targetId;\n          }\n        }\n      });\n\n      \/\/ 3. Paint the active status\n      navItems.forEach(item => {\n        if (item.getAttribute('href') === activeSectionHref) {\n          item.classList.add('active');\n        } else {\n          item.classList.remove('active');\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\t\t<div class=\"elementor-element elementor-element-b0db08b elementor-widget elementor-widget-html\" data-id=\"b0db08b\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"alkuun\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"tjr-hero-custom\" class=\"tjr-hero-section\">\n    <!-- Moving Video Background -->\n    <div class=\"tjr-video-wrapper\">\n        <video autoplay muted loop playsinline class=\"tjr-bg-video\">\n            <source src=\"https:\/\/tjrcapital.fi\/wp-content\/uploads\/2026\/06\/Sequence-01_1.mp4\" type=\"video\/mp4\">\n        <\/video>\n        <div class=\"tjr-overlay\"><\/div>\n    <\/div>\n\n    <!-- Center Logo (Moves down, then fades out) -->\n    <img decoding=\"async\" src=\"https:\/\/tjrcapital.fi\/wp-content\/uploads\/2026\/06\/TJRWP1.png\" alt=\"TJR Capital Logo Center\" class=\"tjr-hero-logo-center\">\n\n    <!-- Premium Layout Content -->\n    <div class=\"tjr-content-wrapper\">\n        \n        <!-- Left Column: Logo at the top, Subheading at the bottom -->\n        <div class=\"tjr-col-left\">\n            <img decoding=\"async\" src=\"https:\/\/tjrcapital.fi\/wp-content\/uploads\/2026\/06\/TJRWP1.png\" alt=\"TJR Capital Logo Left\" class=\"tjr-hero-logo-left\">\n            <h3 class=\"tjr-subheading tjr-anim-up\" style=\"transition-delay: 1.0s;\">Pohjoisesta etel\u00e4\u00e4n \u2013<br>rakennamme infraa, joka kest\u00e4\u00e4.<\/h3>\n        <\/div>\n        \n        <!-- Right Column: Main Content (Vertically Centered & Pushed Right) -->\n        <div class=\"tjr-col-right tjr-anim-up\" style=\"transition-delay: 1.2s;\">\n            <h1 class=\"tjr-heading\">TJR CAPITAL OY<\/h1>\n            <p class=\"tjr-body-text\">\n                Etsitk\u00f6 kumppania, jolle verkonrakennuksen kriittisyys ja maanrakennuksen laatuvaatimukset ovat itsest\u00e4\u00e4nselvyys? TJR Capital Oy on valintasi, kun ty\u00f6n on valmistuttava kerralla oikein.\n            <\/p>\n            <a href=\"#OTA\" class=\"tjr-btn\">Ota Yhteytt\u00e4<\/a>\n        <\/div>\n        \n    <\/div>\n<\/div>\n\n<style>\n    \/* Base Container Setup *\/\n    .tjr-hero-section {\n        position: relative;\n        width: 100%;\n        height: 100vh; \/* Fallback for older browsers *\/\n        height: 100dvh; \/* Modern dynamic mobile height *\/\n        min-height: 650px; \/* Safety net so content never gets crushed on tiny phones *\/\n        overflow: hidden;\n        background-color: #000000;\n        font-family: 'Inter', 'Montserrat', sans-serif;\n    }\n\n    \/* Video Background *\/\n    .tjr-video-wrapper {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%; \/* Defaults to full container height *\/\n        z-index: 1;\n        transition: top 2.5s cubic-bezier(0.16, 1, 0.3, 1), height 2.5s cubic-bezier(0.16, 1, 0.3, 1);\n    }\n\n    .tjr-bg-video {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n    }\n\n    .tjr-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.3);\n    }\n\n    \/* Center Logo - Starts middle, moves down *\/\n    .tjr-hero-logo-center {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        z-index: 4;\n        width: 90px; \n        opacity: 1;\n        transition: top 2.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;\n        pointer-events: none;\n    }\n\n    \/* The Content Wrapper - STRICTLY LOCKED *\/\n    .tjr-content-wrapper {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 60%; \/* Percentage based to perfectly align with split *\/\n        z-index: 3;\n        display: grid;\n        grid-template-columns: 45% 55%; \n        padding: 4rem 5rem;\n        box-sizing: border-box;\n        pointer-events: none;\n        overflow-y: auto; \/* Allows scrolling inside if content forces its way out on strange screen sizes *\/\n        scrollbar-width: none; \/* Hides scrollbar on Firefox *\/\n    }\n    \n    .tjr-content-wrapper::-webkit-scrollbar {\n        display: none; \/* Hides scrollbar on Chrome\/Safari *\/\n    }\n\n    \/* Left Column Structure *\/\n    .tjr-col-left {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between; \n        height: 100%;\n    }\n\n    \/* Right Column Structure *\/\n    .tjr-col-right {\n        display: flex;\n        flex-direction: column;\n        justify-content: center; \n        height: 100%;\n        padding-left: 4rem; \n    }\n\n    \/* Top Left Logo *\/\n    .tjr-hero-logo-left {\n        width: 150px !important; \n        height: auto;\n        display: block;\n        opacity: 0;\n    }\n\n    \/* Text Animations Base *\/\n    .tjr-anim-up {\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    \/* ----------------------------------\n       ACTIVE SPLIT STATE \n       ---------------------------------- *\/\n       \n    \/* 1. Video moves down using percentages so it respects min-height *\/\n    .tjr-hero-section.is-split .tjr-video-wrapper {\n        top: 60%;\n        height: 40%;\n    }\n\n    \/* 2. Center logo moves down WITH the video, then fades out *\/\n    .tjr-hero-section.is-split .tjr-hero-logo-center {\n        top: 80%; \n        opacity: 0;\n        transition: top 2.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease 2.5s;\n    }\n\n    \/* 3. Top left logo appears exactly AFTER center logo vanishes *\/\n    .tjr-hero-section.is-split .tjr-hero-logo-left {\n        opacity: 1;\n        transition: opacity 0.6s ease 2.8s; \n    }\n\n    \/* 4. Text grid activates *\/\n    .tjr-hero-section.is-split .tjr-content-wrapper {\n        pointer-events: auto;\n    }\n\n    .tjr-hero-section.is-split .tjr-anim-up {\n        opacity: 1;\n        transform: translateY(0);\n    }\n\n    \/* ----------------------------------\n       TYPOGRAPHY & STYLING\n       ---------------------------------- *\/\n    .tjr-subheading {\n        color: #888888; \n        font-size: 1.1rem;\n        font-weight: 400;\n        line-height: 1.6;\n        margin: 0;\n        max-width: 320px;\n    }\n\n    .tjr-heading {\n        color: #ffffff;\n        font-size: 3.5rem;\n        font-weight: 400; \n        margin: 0 0 1.5rem 0;\n        letter-spacing: -0.02em;\n        line-height: 1.1;\n    }\n\n    .tjr-body-text {\n        color: #cccccc;\n        font-size: 1.1rem;\n        line-height: 1.8;\n        margin: 0 0 2.5rem 0;\n        font-weight: 300;\n        max-width: 700px;\n    }\n\n    .tjr-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        background-color: transparent;\n        transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n        align-self: flex-start;\n    }\n\n    .tjr-btn:hover {\n        background-color: #FF7602; \n        border-color: #FF7602;\n        color: #ffffff;\n    }\n\n    \/* ----------------------------------\n       RESPONSIVE: TABLET LANDSCAPE\n       ---------------------------------- *\/\n    @media (max-width: 1100px) {\n        .tjr-content-wrapper {\n            padding: 3rem 4rem;\n            grid-template-columns: 40% 60%;\n        }\n        .tjr-col-right {\n            padding-left: 2rem;\n        }\n        .tjr-heading {\n            font-size: 3rem;\n        }\n    }\n\n    \/* ----------------------------------\n       RESPONSIVE: TABLET PORTRAIT\n       ---------------------------------- *\/\n    @media (max-width: 900px) {\n        .tjr-content-wrapper {\n            grid-template-columns: 1fr; \/* Stack columns *\/\n            padding: 3rem;\n            align-content: center;\n        }\n        .tjr-col-left {\n            height: auto;\n            margin-bottom: 2rem;\n        }\n        .tjr-col-right {\n            padding-left: 0;\n            height: auto;\n        }\n        .tjr-hero-logo-left {\n            margin-bottom: 1.5rem;\n        }\n    }\n\n    \/* ----------------------------------\n       RESPONSIVE: MOBILE\n       ---------------------------------- *\/\n    @media (max-width: 768px) {\n        \/* Shift ratio to give text more vertical breathing room on tiny screens *\/\n        .tjr-hero-section.is-split .tjr-video-wrapper {\n            top: 70%;\n            height: 30%; \n        }\n        \n        .tjr-content-wrapper {\n            height: 70%; \n            padding: 2rem 1.5rem;\n            justify-content: center;\n        }\n\n        .tjr-hero-section.is-split .tjr-hero-logo-center {\n            top: 85%; \/* Keeps it dead center of the 30% area *\/\n        }\n\n        .tjr-col-left {\n            margin-bottom: 1.5rem;\n        }\n\n        .tjr-hero-logo-left {\n            width: 80px !important; \/* Elegant scaling for mobile *\/\n            margin-bottom: 1rem;\n        }\n\n        .tjr-subheading {\n            font-size: 0.95rem;\n            margin-bottom: 0;\n            max-width: 100%;\n        }\n\n        .tjr-heading {\n            font-size: 2.2rem;\n            margin: 0 0 1rem 0;\n        }\n\n        .tjr-body-text {\n            font-size: 0.95rem;\n            line-height: 1.6;\n            margin: 0 0 2rem 0;\n        }\n        \n        .tjr-btn {\n            padding: 0.9rem 2.2rem;\n            font-size: 0.8rem;\n        }\n    }\n    \n    \/* ----------------------------------\n       RESPONSIVE: EXTRA SMALL PHONES\n       ---------------------------------- *\/\n    @media (max-width: 400px) {\n        .tjr-heading {\n            font-size: 1.9rem;\n        }\n        .tjr-content-wrapper {\n            padding: 1.5rem 1rem;\n        }\n    }\n<\/style>\n\n<script>\n    \/\/ Self-executing script to handle the timing logic smoothly\n    (() => {\n        const triggerAnimation = () => {\n            const hero = document.getElementById('tjr-hero-custom');\n            if (hero) {\n                \/\/ Wait exactly 3 seconds before sliding the video down\n                setTimeout(() => {\n                    hero.classList.add('is-split');\n                }, 3000);\n            }\n        };\n        \n        if (document.readyState === 'loading') {\n            document.addEventListener('DOMContentLoaded', triggerAnimation);\n        } else {\n            triggerAnimation();\n        }\n    })();\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-4d16e18 e-con e-atomic-element e-flexbox-base e-3c44638 \" data-id=\"4d16e18\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"4d16e18\">\n    <div class=\"elementor-element elementor-element-f07281e e-flex e-con-boxed e-con e-parent\" data-id=\"f07281e\" 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-79fc015 e-con-full e-flex e-con e-child\" data-id=\"79fc015\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-df37fdf e-con-full e-flex e-con e-child\" data-id=\"df37fdf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8cfc8f4 elementor-widget elementor-widget-heading\" data-id=\"8cfc8f4\" 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\">TJR \u2013 Luotettavaa <\/br>valokuiturakentamista <\/br>koko Suomessa<\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t\n<hr class=\"e-divider-base\" data-interaction-id=\"f88f517\"   \/>\n\t\t\t\t<div class=\"elementor-element elementor-element-60f93ff elementor-widget elementor-widget-text-editor\" data-id=\"60f93ff\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tTJR on valokuituverkon rakentamiseen erikoistunut asiantuntijayritys. Toimimme valtakunnallisesti toimialan suurimpien toimijoiden, kuten Eltelin ja Voimatelin, luotettuna aliurakoitsijakumppanina.\n<\/br><\/br>\nOsaamisemme kattaa koko verkon elinkaaren: vastaamme laadukkaasta runkorakentamisesta, kiinteist\u00f6liittymien toteutuksesta sek\u00e4 omakotitalojen kuituasennuksista aina p\u00e4\u00e4telaitteiden k\u00e4ytt\u00f6\u00f6nottoon asti. Suhtaudumme jokaiseen projektiin suurella tarkkuudella, oli kyseess\u00e4 sitten laaja runkoverkkokokonaisuus tai yksitt\u00e4isen kiinteist\u00f6n liitt\u00e4minen nykyaikaiseen verkkoon.\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-54c51bd e-con-full e-flex e-con e-child\" data-id=\"54c51bd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-a5b8fa3 e-con-full e-flex e-con e-child\" data-id=\"a5b8fa3\" 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-404b458 e-con e-atomic-element e-flexbox-base e-e6ebbf9 \" data-id=\"404b458\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"404b458\">\n    <div class=\"elementor-element elementor-element-94d1607 e-flex e-con-boxed e-con e-parent\" data-id=\"94d1607\" 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-de64b3d elementor-widget elementor-widget-html\" data-id=\"de64b3d\" 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 40px 0;\n    letter-spacing: -0.02em;\n    line-height: 1.1;\n    \/* Uudet s\u00e4\u00e4nn\u00f6t: Estet\u00e4\u00e4n tekstin valuminen yli reunojen *\/\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n    -webkit-hyphens: auto;\n    hyphens: auto;\n  }\n\n  \/* --- Cards Wrapper & Row (Mobile Swipe Optimized) --- *\/\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  .service-cards-row::after {\n    content: \"\";\n    flex: 0 0 5px; \n    display: block;\n  }\n\n  \/* --- Premium Dark Mode 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 0 auto; \n    width: 180px; \n    position: relative;\n    z-index: 1;\n    scroll-snap-align: start; \n  }\n\n  .sc-card:hover {\n    border-color: #FF7602;\n    transform: translateY(-8px);\n    background: rgba(255, 118, 2, 0.03); \n  }\n\n  .sc-card.active {\n    border-color: #FF7602; \n    background: rgba(255, 118, 2, 0.05);\n  }\n\n  \/* ICON STYLING *\/\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: #FF7602; \n  }\n\n  \/* TITLE STYLING *\/\n  .sc-title {\n    color: #a3a3a3; \n    font-size: 0.75rem; \n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    line-height: 1.5;\n    width: 100%;\n    transition: color 0.4s ease;\n    \/* Uusi s\u00e4\u00e4nt\u00f6 korttien otsikoille varmuuden vuoksi *\/\n    overflow-wrap: break-word;\n    word-wrap: break-word;\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: 250px;\n  }\n\n  .sc-content-panel {\n    display: none; \n    grid-template-columns: 45% 55%; \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  \/* Left Side: Title & Button *\/\n  .sc-left h2 {\n    font-size: 2.5rem;\n    line-height: 1.15;\n    margin: 0 0 30px 0; \n    font-weight: 300; \n    letter-spacing: -0.02em;\n    color: #ffffff;\n    \/* Uudet s\u00e4\u00e4nn\u00f6t: Estet\u00e4\u00e4n tekstin valuminen yli reunojen *\/\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n    -webkit-hyphens: auto;\n    hyphens: auto;\n  }\n\n  \/* Minimalist Premium Button *\/\n  .sc-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    background-color: transparent;\n    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n    box-sizing: border-box;\n  }\n\n  .sc-btn:hover {\n    background-color: #FF7602;\n    border-color: #FF7602;\n    color: #ffffff;\n  }\n\n  \/* Right Side: Text *\/\n  .sc-right p {\n    font-size: 1.1rem;\n    line-height: 1.8;\n    margin: 0; \n    color: #cccccc; \n    font-weight: 300;\n  }\n\n  \/* --- Responsive Design for Tablet --- *\/\n  @media (max-width: 1024px) {\n    .sc-content-panel {\n      grid-template-columns: 50% 50%;\n      gap: 40px;\n    }\n    .main-section-title {\n      font-size: 2.8rem;\n    }\n    .sc-left h2 {\n      font-size: 2.2rem;\n    }\n  }\n\n  \/* --- Responsive Design for Mobile --- *\/\n  @media (max-width: 768px) {\n    .sc-content-panel.active {\n      grid-template-columns: 1fr; \n      gap: 20px; \n    }\n    .main-section-title {\n      font-size: 2.2rem;\n      margin-bottom: 25px;\n    }\n    .sc-left h2 {\n      font-size: 1.8rem;\n      margin: 0 0 20px 0;\n    }\n    .sc-right p {\n      font-size: 1.05rem;\n      line-height: 1.6;\n      margin-bottom: 30px; \n    }\n    .sc-left {\n      display: flex;\n      flex-direction: column;\n    }\n    .sc-btn {\n      order: 3; \n      width: 100%; \n      text-align: center;\n      padding: 1rem 0;\n    }\n    .sc-right {\n      order: 2; \n    }\n    \n    .service-cards-wrapper {\n      margin-bottom: 20px; \n    }\n\n    .service-cards-row {\n      padding-right: 1rem;\n    }\n    \n    .sc-card {\n      width: 140px; \n      padding: 20px 10px;\n      min-height: 130px;\n    }\n    .sc-icon {\n      margin-bottom: 15px;\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\n  \/* --- Extra Small Phones --- *\/\n  @media (max-width: 480px) {\n    .main-section-title {\n      font-size: 1.7rem; \/* Pienennetty jotta mahtuu paremmin kapeille n\u00e4yt\u00f6ille *\/\n    }\n    .sc-left h2 {\n      font-size: 1.4rem; \/* Pienennetty jotta mahtuu paremmin kapeille n\u00e4yt\u00f6ille *\/\n    }\n    .sc-card {\n      width: 130px;\n    }\n  }\n<\/style>\n<!-- Lis\u00e4tty lang=\"fi\" p\u00e4\u00e4s\u00e4ili\u00f6\u00f6n -->\n<div class=\"custom-service-section\" lang=\"fi\">\n  \n  <!-- Lis\u00e4tty pehme\u00e4 tavuviiva pitk\u00e4\u00e4n sanaan -->\n  <h2 class=\"main-section-title\">Meilt\u00e4 saat kokonais&shy;valtaiset palvelut<\/h2>\n\n  <div class=\"service-cards-container\">\n    <!-- CARDS ROW IN WRAPPER -->\n    <div class=\"service-cards-wrapper\" id=\"service-scroll-area\">\n      <div class=\"service-cards-row\">\n        \n        <!-- Card 1 -->\n        <div class=\"sc-card active\" data-tab=\"tab-1\">\n          <div class=\"sc-icon\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <circle cx=\"18\" cy=\"5\" r=\"3\"><\/circle>\n              <circle cx=\"6\" cy=\"12\" r=\"3\"><\/circle>\n              <circle cx=\"18\" cy=\"19\" r=\"3\"><\/circle>\n              <line x1=\"8.59\" y1=\"13.51\" x2=\"15.42\" y2=\"17.49\"><\/line>\n              <line x1=\"15.41\" y1=\"6.51\" x2=\"8.59\" y2=\"10.49\"><\/line>\n            <\/svg>\n          <\/div>\n          <!-- T\u00e4ss\u00e4 on jo manuaalinen <br>, mik\u00e4 on ok -->\n          <div class=\"sc-title\">Valokuitu-<br>rakentaminen<\/div>\n        <\/div>\n        \n        <!-- Card 2 -->\n        <div class=\"sc-card\" data-tab=\"tab-2\">\n          <div class=\"sc-icon\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"><\/polyline>\n            <\/svg>\n          <\/div>\n          <div class=\"sc-title\">Kuituhitsaukset &<br>mittaukset<\/div>\n        <\/div>\n        \n        <!-- Card 3 -->\n        <div class=\"sc-card\" data-tab=\"tab-3\">\n          <div class=\"sc-icon\">\n            <svg width=\"32\" height=\"32\" 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\"><\/path>\n              <polyline points=\"14 2 14 8 20 8\"><\/polyline>\n              <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"><\/line>\n              <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"><\/line>\n              <polyline points=\"10 9 9 9 8 9\"><\/polyline>\n            <\/svg>\n          <\/div>\n          <div class=\"sc-title\">Dokumentointi<\/div>\n        <\/div>\n        \n        <!-- Card 4 -->\n        <div class=\"sc-card\" data-tab=\"tab-4\">\n          <div class=\"sc-icon\">\n            <svg width=\"32\" height=\"32\" 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\"><\/path>\n            <\/svg>\n          <\/div>\n          <div class=\"sc-title\">Viankorjaus<\/div>\n        <\/div>\n        \n        <!-- Card 5 -->\n        <div class=\"sc-card\" data-tab=\"tab-5\">\n          <div class=\"sc-icon\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <polygon points=\"12 2 2 7 12 12 22 7 12 2\"><\/polygon>\n              <polyline points=\"2 12 12 17 22 12\"><\/polyline>\n              <polyline points=\"2 17 12 22 22 17\"><\/polyline>\n            <\/svg>\n          <\/div>\n          <div class=\"sc-title\">Maanrakennus<\/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  <!-- CONTENT AREA -->\n  <div class=\"service-content-area\">\n    \n    <!-- Tab 1 -->\n    <div class=\"sc-content-panel active\" id=\"tab-1\">\n      <div class=\"sc-left\">\n        <!-- &shy; lis\u00e4tty pitkiin sanoihin -->\n        <h2>Valokuitu&shy;rakentaminen suunnittelusta toteutukseen<\/h2>\n        <a href=\"#OTA\" class=\"sc-btn\">Pyyd\u00e4 tarjous<\/a>\n      <\/div>\n      <div class=\"sc-right\">\n        <!-- My\u00f6s leip\u00e4tekstiss\u00e4 voi k\u00e4ytt\u00e4\u00e4, jos siell\u00e4 on ylipitki\u00e4 sanoja -->\n        <p>Toteutamme tietoliikenneverkot kokonais&shy;valtaisena projektin&shy;hallintana runkoverkoista tilaajaliittymiin saakka. K\u00e4yt\u00f6ss\u00e4mme on moderni kalusto, joka mahdollistaa tehokkaan ja ymp\u00e4rist\u00f6\u00e4 kunnioittavan rakentamisen kaikissa olosuhteissa, varmistaen tulevaisuuden kest\u00e4v\u00e4t ja nopeat yhteydet.<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- Tab 2 -->\n    <div class=\"sc-content-panel\" id=\"tab-2\">\n      <div class=\"sc-left\">\n        <h2>Kuitu&shy;hitsaukset ja tarkat laatu&shy;mittaukset<\/h2>\n        <a href=\"#OTA\" class=\"sc-btn\">Kysy lis\u00e4\u00e4<\/a>\n      <\/div>\n      <div class=\"sc-right\">\n        <p>Verkon pitk\u00e4ik\u00e4isyys kulminoituu liitosten laatuun, mink\u00e4 vuoksi suoritamme kuitu&shy;hitsaukset alan uusimmalla tekniikalla minimaalisen vaimennuksen takaamiseksi. Kattavat OTDR- ja tehomittauksemme varmistavat tiukimpien laatuvaatimusten t\u00e4yttymisen, ja toimitamme jokaisesta mittauksesta selke\u00e4n laaturaportin.<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- Tab 3 -->\n    <div class=\"sc-content-panel\" id=\"tab-3\">\n      <div class=\"sc-left\">\n        <h2>Huolellinen dokumentointi ja raportointi<\/h2>\n        <a href=\"#OTA\" class=\"sc-btn\">Ota yhteytt\u00e4<\/a>\n      <\/div>\n      <div class=\"sc-right\">\n        <p>Laadukas dokumentointi on verkon elinkaaren perusta, joten raportoimme toteutuneet reitit, sijainnit ja kytkenn\u00e4t digitaalisesti alan standardien mukaisesti. GPS-pohjainen loppu&shy;reititysten kartoitus varmistaa ajantasaiset tiedot tulevia laajennuksia varten \u2013 meill\u00e4 ty\u00f6 on valmis vasta, kun se on dokumentoitu.<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- Tab 4 -->\n    <div class=\"sc-content-panel\" id=\"tab-4\">\n      <div class=\"sc-left\">\n        <h2>Nopea ja luotettava vian&shy;korjaus<\/h2>\n        <a href=\"#OTA\" class=\"sc-btn\">Tilaa viankorjaus<\/a>\n      <\/div>\n      <div class=\"sc-right\">\n        <p>Tietoliikennekatko on aina kriittinen tilanne, joten tarjoamme nopean vasteajan vian&shy;paikannukseen ja korjaukseen k\u00e4ytt\u00f6katkojen minimoimiseksi. Olipa kyseess\u00e4 kaapeli&shy;vaurio tai tekninen h\u00e4iri\u00f6, asiantuntijamme palauttavat yhteydet toimintaan tehokkaasti ja luotettavasti kaikissa olosuhteissa.<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- Tab 5 -->\n    <div class=\"sc-content-panel\" id=\"tab-5\">\n      <div class=\"sc-left\">\n        <h2>Monipuolinen maan&shy;rakennus ja infra<\/h2>\n        <a href=\"#OTA\" class=\"sc-btn\">Pyyd\u00e4 tarjous<\/a>\n      <\/div>\n      <div class=\"sc-right\">\n        <p>Maanrakennus on vahvaa ydinosaamistamme, kattoipa tarpeesi tietoliikenne&shy;verkkojen ojituksen, piha-alueiden pohjaty\u00f6t tai vaativat infra&shy;rakentamisen kohteet. Nykyaikainen konekantamme ja tarkka ty\u00f6skentelytapamme takaavat siistin lopputuloksen ja kest\u00e4v\u00e4t rakenteet kerralla oikein tehtyn\u00e4.<\/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\n      const targetCard = document.querySelector(`[data-tab=\"${targetId}\"]`);\n      const targetPanel = document.getElementById(targetId);\n\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-dd014b0 e-con e-atomic-element e-flexbox-base e-850f81d \" data-id=\"dd014b0\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"dd014b0\">\n    <div class=\"elementor-element elementor-element-6b77dfd e-flex e-con-boxed e-con e-parent\" data-id=\"6b77dfd\" 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-1601d74 e-con-full e-flex e-con e-child\" data-id=\"1601d74\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5b80c91 elementor-widget elementor-widget-google_maps\" data-id=\"5b80c91\" 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\t\t<div class=\"elementor-element elementor-element-6e6209c elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-shortcode\" data-id=\"6e6209c\" 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-f98-o1\" lang=\"fi\" dir=\"ltr\" data-wpcf7-id=\"98\">\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%2F7#wpcf7-f98-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=\"98\" \/><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-f98-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\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-16252dd e-con e-atomic-element e-flexbox-base e-464f6db \" data-id=\"16252dd\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"16252dd\">\n    \t\t<div class=\"elementor-element elementor-element-dfbac90 elementor-widget elementor-widget-html\" data-id=\"dfbac90\" 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  .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-info p {\n    margin: 5px 0;\n  }\n\n  .footer-credit {\n    font-size: 0.65rem;\n    color: #777777;\n    margin-top: 10px;\n  }\n  \n  .footer-credit p {\n    margin: 0;\n  }\n\n  \/* --- Mobile Responsive Styles --- *\/\n  @media (max-width: 768px) {\n    .luxury-footer {\n      padding: 60px 15px;\n      gap: 35px;\n    }\n\n    .footer-nav {\n      flex-direction: column;\n      gap: 25px;\n    }\n\n    .footer-nav a {\n      font-size: 0.9rem; \/* Slightly larger for better tap targets on touch screens *\/\n      padding: 5px 0;\n    }\n\n    .footer-info {\n      font-size: 0.7rem;\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>ALKUUN MEIST\u00c4 PALVELUT OTA YHTEYTT\u00c4 Pohjoisesta etel\u00e4\u00e4n \u2013rakennamme infraa, joka kest\u00e4\u00e4. TJR CAPITAL OY Etsitk\u00f6 kumppania, jolle verkonrakennuksen kriittisyys ja maanrakennuksen laatuvaatimukset ovat itsest\u00e4\u00e4nselvyys? TJR Capital Oy on valintasi, kun ty\u00f6n on valmistuttava kerralla oikein. Ota Yhteytt\u00e4 TJR \u2013 Luotettavaa valokuiturakentamista koko Suomessa TJR on valokuituverkon rakentamiseen erikoistunut asiantuntijayritys. Toimimme valtakunnallisesti toimialan suurimpien toimijoiden, kuten [&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-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tjrcapital.fi\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tjrcapital.fi\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tjrcapital.fi\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tjrcapital.fi\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tjrcapital.fi\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":71,"href":"https:\/\/tjrcapital.fi\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":108,"href":"https:\/\/tjrcapital.fi\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/108"}],"wp:attachment":[{"href":"https:\/\/tjrcapital.fi\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}