{"id":6,"date":"2026-07-15T07:40:46","date_gmt":"2026-07-15T07:40:46","guid":{"rendered":"https:\/\/vp-kuljetus.fi\/?page_id=6"},"modified":"2026-09-17T06:43:03","modified_gmt":"2026-09-17T06:43:03","slug":"elementor-6","status":"publish","type":"page","link":"https:\/\/vp-kuljetus.fi\/","title":{"rendered":"Etusivu"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"6\" class=\"elementor elementor-6\">\n\t\t\t\t<div class=\"elementor-element elementor-element-32c01f5 e-con-full e-flex e-con e-parent\" data-id=\"32c01f5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-43f7a02 e-con-full e-flex e-con e-child\" data-id=\"43f7a02\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-49cf2ea elementor-widget__width-inherit elementor-widget elementor-widget-ucaddon_etusivu_hero\" data-id=\"49cf2ea\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ucaddon_etusivu_hero.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<!-- start Etusivu HERO -->\n<style>\/* widget: Etusivu HERO *\/\n\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;700;900&family=Roboto:wght@400;500&display=swap');\n\n.tkh3{\n  position:relative;width:100%;isolation:isolate;\n  --ui:-apple-system,BlinkMacSystemFont,\"SF Pro Text\",\"SF Pro Display\",\"Inter\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;\n  --display:'Montserrat',var(--ui);\n  --ease:cubic-bezier(.22,.61,.36,1);\n  font-family:var(--ui);\n  --ui-xs:  clamp(12px,   .78vw, 16px);\n  --ui-sm:  clamp(13.5px, .92vw, 18px);\n  --ui-md:  clamp(15px,  1.05vw, 20px);\n  --ui-lg:  clamp(16.5px, 1.2vw, 23px);\n  --logo-h: clamp(26px,  1.90vw, 42px);\n  --tod-sz: clamp(36px,  2.50vw, 50px);\n  --tod-ic: clamp(18px,  1.25vw, 25px);\n  --nav-gap:clamp(1.7rem, 2.2vw, 3.4rem);\n  --link-gap:clamp(1.45rem,1.75vw,2.9rem);\n  --hair:   clamp(16px,  1.15vw, 24px);\n  --brand-light:#c7eb98;\n  --brand-lift: #d4f0b3;\n  --brand-mid:  #2F6B52;\n  --brand-deep: #0f3b35;\n}\n.tkh3[data-uifont=\"roboto\"]{ --ui:'Roboto',-apple-system,Helvetica,Arial,sans-serif }\n\n.tkh3[data-tod=\"night\"]{ --g-bg:#010307; --g-fg:#ffffff;\n  --g-line:rgba(255,255,255,.19);\n  --g-line-soft:rgba(255,255,255,.13);\n  --g-accent:var(--brand-light);\n  --cta-bg:var(--brand-light); --cta-fg:var(--brand-deep); --cta-bg-h:var(--brand-lift);\n  --g-lq1:rgba(14,24,32,.46); --g-lq2:rgba(4,9,14,.24);\n  --g-scrim-a:rgba(0,0,0,.46); --g-scrim-b:rgba(0,0,0,.58);\n  --poster:linear-gradient(180deg,#02040a 0%,#050b14 44%,#0a1522 60%,#070d14 76%,#020408 100%); }\n.tkh3[data-tod=\"day\"]{ --g-bg:#a8cbe2; --g-fg:#0a0f12;\n  --g-line:rgba(10,15,18,.22);\n  --g-line-soft:rgba(10,15,18,.14);\n  --g-accent:var(--brand-mid);\n  --cta-bg:var(--brand-mid); --cta-fg:#EAF4DA; --cta-bg-h:var(--brand-deep);\n  --g-lq1:rgba(255,255,255,.36); --g-lq2:rgba(226,238,246,.2);\n  --g-scrim-a:rgba(24,40,54,.30); --g-scrim-b:rgba(24,40,54,.40);\n  --poster:linear-gradient(180deg,#3f86c4 0%,#7fb4dc 36%,#bcd8ec 56%,#8d9c86 64%,#46523a 100%); }\n\n.tkh3{ background:var(--g-bg); transition:background .6s ease }\n.tkh3 *{box-sizing:border-box;margin:0;padding:0}\n.tkh3 .t3-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}\n.tkh3 canvas.t3-gl{position:absolute;inset:0;width:100%;height:100%;display:block}\n\n\/* ATMOSPHERE LAYERS - Optimized *\/\n.tkh3 .t3-vignette{position:absolute;inset:0;pointer-events:none;z-index:2;\n  will-change:opacity;transition:opacity .1s linear}\n.tkh3[data-tod=\"night\"] .t3-vignette{\n  background:radial-gradient(ellipse 120% 94% at 50% 44%,transparent 26%,rgba(0,1,3,0.94) 100%)}\n.tkh3[data-tod=\"day\"] .t3-vignette{\n  background:radial-gradient(ellipse 134% 104% at 50% 44%,transparent 48%,rgba(38,62,80,0.26) 100%)}\n\n\/* Frost overlay without GPU-killing blur *\/\n.tkh3 .t3-frost{position:absolute;left:0;top:0;bottom:0;z-index:3;\n  width:min(52vw,780px);pointer-events:none;opacity:0;transform:translateX(-100%);\n  will-change:opacity,transform;transition:opacity .1s linear}\n.tkh3 .t3-frost::before{content:\"\";position:absolute;inset:0;\n  background:\n    radial-gradient(120% 80% at 12% 14%, var(--g-lq1) 0%, transparent 64%),\n    radial-gradient(90% 70% at 30% 86%, var(--g-lq2) 0%, transparent 60%),\n    linear-gradient(102deg, var(--g-lq1) 0%, transparent 72%)}\n\n\/* Hard disabled heavy composite effects *\/\n.tkh3 .t3-speed, .tkh3 .t3-grain, .tkh3 .t3-frost::after { display:none !important; }\n\n.tkh3 .t3-bottomfade{position:absolute;left:0;right:0;bottom:0;z-index:4;\n  pointer-events:none;height:var(--fade-h,30%);will-change:opacity;transition:opacity .1s linear;}\n.tkh3 .t3-bottomfade::after{content:\"\";position:absolute;inset:0;transition:background .6s ease}\n.tkh3[data-tod=\"night\"] .t3-bottomfade::after{\n  background:linear-gradient(to top,rgba(1,3,7,1) 0%,rgba(1,3,7,.92) 30%,rgba(1,3,7,.5) 62%,transparent 100%)}\n.tkh3[data-tod=\"day\"] .t3-bottomfade::after{\n  background:linear-gradient(to top,rgba(168,203,226,1) 0%,rgba(168,203,226,.88) 30%,rgba(168,203,226,.42) 62%,transparent 100%)}\n\n.tkh3 .t3-cornerfade{position:absolute;right:0;bottom:0;z-index:4;pointer-events:none;\n  width:52%;height:46%;will-change:opacity;transition:opacity .1s linear,background .6s ease}\n.tkh3[data-tod=\"night\"] .t3-cornerfade{\n  background:radial-gradient(ellipse 100% 100% at 100% 100%,rgba(1,3,7,.95) 0%,rgba(1,3,7,.6) 42%,transparent 72%)}\n.tkh3[data-tod=\"day\"] .t3-cornerfade{\n  background:radial-gradient(ellipse 100% 100% at 100% 100%,rgba(168,203,226,.88) 0%,rgba(168,203,226,.48) 42%,transparent 72%)}\n\n.tkh3 .t3-scrim{position:absolute;inset:0;z-index:5;pointer-events:none;\n  will-change:opacity;transition:background .6s ease;\n  background:\n    linear-gradient(to bottom, var(--g-scrim-a) 0%, rgba(0,0,0,0) 42%),\n    linear-gradient(to top,    var(--g-scrim-b) 0%, rgba(0,0,0,0) 50%)}\n\n\/* LAYOUT SHELL *\/\n.tkh3 .t3-shell{\n  position:absolute;inset:0;z-index:7;\n  display:grid;\n  grid-template-columns:repeat(12,1fr);\n  grid-template-rows:auto 1fr auto;\n  column-gap:1.5rem;\n  padding:3.4vh 4vw;\n  pointer-events:none;\n}\n\n.tkh3 .t3-nav{\n  grid-column:1 \/ -1; grid-row:1;\n  position:relative;\n  display:flex; align-items:center; justify-content:space-between;\n  gap:2rem; padding-bottom:clamp(1.05rem,1.15vw,2rem);\n  pointer-events:auto; flex-wrap:nowrap;\n  opacity:1; will-change:opacity; transition:opacity .1s linear;\n}\n.tkh3 .t3-nav::after{\n  content:\"\"; position:absolute; left:0; right:0; bottom:0; height:1px;\n  background:var(--g-line);\n  transform:scaleX(var(--rule,0)); transform-origin:left center;\n  transition:background .6s ease;\n}\n.tkh3 .t3-nav-l{ display:flex; align-items:center; gap:var(--nav-gap); min-width:0 }\n.tkh3 .t3-nav-r{ display:flex; align-items:center; gap:clamp(.85rem,1vw,1.6rem); flex:none }\n\n\/* LOGO FIX *\/\n.tkh3 .t3-logo-top {\n  height: var(--logo-h, 42px) !important;\n  max-width: 250px !important;\n  object-fit: contain;\n  opacity: 0;\n  display: block;\n  flex: none;\n  will-change: opacity;\n  transition: filter .6s ease;\n}\n\n.tkh3[data-tod=\"night\"] .t3-logo-top{ filter:brightness(0) invert(1) }\n.tkh3[data-tod=\"day\"]   .t3-logo-top{ filter:brightness(0) }\n\n.tkh3 .t3-links{ display:flex; align-items:center; gap:var(--link-gap); min-width:0; overflow:hidden }\n.tkh3 .t3-link{\n  font-family:var(--ui); font-size:var(--ui-md); font-weight:500;\n  letter-spacing:-0.006em; line-height:1;\n  color:var(--g-fg); opacity:.72; text-decoration:none; white-space:nowrap;\n  transition:opacity .28s var(--ease);\n}\n.tkh3 a.t3-link:hover{ opacity:1 }\n.tkh3 a.t3-link:focus-visible{ outline:2px solid var(--g-accent); outline-offset:5px; border-radius:3px }\n\n.tkh3 .t3-tod{\n  width:var(--tod-sz); height:var(--tod-sz); border:0; background:transparent; padding:0;\n  color:var(--g-fg); opacity:.62; cursor:pointer; border-radius:50%; flex:none;\n  display:flex; align-items:center; justify-content:center; line-height:0;\n  transition:opacity .28s var(--ease);\n}\n.tkh3 .t3-tod:hover{ opacity:1 }\n.tkh3 .t3-tod:focus-visible{ outline:2px solid var(--g-accent); outline-offset:3px; opacity:1 }\n.tkh3 .t3-tod svg{ width:var(--tod-ic); height:var(--tod-ic); display:block; fill:none;\n  stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;\n  transition:transform .45s var(--ease) }\n.tkh3 .t3-tod .t3-ico-sun{ display:none }\n.tkh3 .t3-tod .t3-ico-moon{ display:block }\n.tkh3[data-tod=\"day\"] .t3-tod .t3-ico-sun{ display:block }\n.tkh3[data-tod=\"day\"] .t3-tod .t3-ico-moon{ display:none }\n.tkh3 .t3-tod:hover svg{ transform:rotate(18deg) }\n\n.tkh3 .t3-nav-div{ width:1px; height:var(--hair); background:var(--g-line-soft); flex:none }\n\n.tkh3 .t3-navcta{\n  display:inline-flex; align-items:center; justify-content:center;\n  padding:.68em 1.28em; border-radius:999px;\n  background:var(--cta-bg); color:var(--cta-fg); text-decoration:none;\n  font-family:var(--ui); font-size:var(--ui-md); font-weight:500;\n  letter-spacing:-0.004em; white-space:nowrap; opacity:0;\n  will-change:opacity; border:1px solid transparent;\n  transition:opacity .28s var(--ease), transform .28s var(--ease),\n             background .32s var(--ease), color .32s var(--ease);\n}\n.tkh3 .t3-navcta:hover{ transform:translateY(-1px); background:var(--cta-bg-h) }\n.tkh3 .t3-navcta:active{ transform:translateY(0) }\n.tkh3 .t3-navcta:focus-visible{ outline:2px solid var(--g-accent); outline-offset:3px }\n\n.tkh3 .t3-copy{\n  grid-column:1 \/ 9; grid-row:2;\n  align-self:end;\n  color:var(--g-fg); pointer-events:none;\n  opacity:1; will-change:opacity; transition:opacity .1s linear;\n  padding-bottom:2.6rem;\n}\n\n.tkh3 .t3-eyebrow{\n  display:inline-flex; align-items:center; gap:.62em;\n  padding:.5em 1em .5em .78em; margin-bottom:clamp(1.35rem,1.5vw,2.4rem);\n  font-size:var(--ui-sm);\n  border:1px solid var(--g-line); border-radius:999px;\n  opacity:0; will-change:opacity,transform;\n  transition:border-color .6s ease;\n}\n.tkh3 .t3-eyebrow span{\n  font-family:var(--ui); font-size:1em; font-weight:500;\n  letter-spacing:-0.002em; color:var(--g-fg); opacity:.85; white-space:nowrap;\n}\n.tkh3 .t3-eb-mark{\n  width:.42em; height:.42em; border-radius:50%; background:var(--g-accent);\n  flex:none; transition:background .6s ease;\n}\n.tkh3 .t3-eb-dot{\n  width:.17em; height:.17em; border-radius:50%; background:currentColor;\n  color:var(--g-fg); opacity:.34; flex:none;\n}\n\n.tkh3 .t3-headline{\n  font-family:var(--display); font-weight:400;\n  font-size:clamp(48px,6.6vw,132px);\n  line-height:0.96; margin:0;\n  color:var(--g-fg); display:flex; flex-direction:column;\n}\n.tkh3 .t3-word{ display:block; overflow:hidden; padding-bottom:.2em; margin-bottom:-.16em }\n.tkh3 .t3-word i{\n  font-family:var(--display); font-style:normal;\n  font-weight:400; letter-spacing:-0.018em;\n  display:block; line-height:0.96;\n  will-change:transform,opacity;\n}\n.tkh3 .t3-word.is-em i{ font-weight:900; letter-spacing:-0.032em }\n\n.tkh3 .t3-footrow{\n  grid-column:1 \/ -1; grid-row:3;\n  position:relative;\n  display:flex; align-items:flex-end; justify-content:space-between;\n  gap:3rem; padding-top:clamp(1.4rem,1.5vw,2.6rem);\n}\n.tkh3 .t3-footrow::before{\n  content:\"\"; position:absolute; left:0; right:0; top:0; height:1px;\n  background:var(--g-line);\n  transform:scaleX(var(--rule,0)); transform-origin:left center;\n  transition:background .6s ease;\n}\n.tkh3 .t3-support{\n  display:flex; align-items:flex-end; gap:clamp(2.2rem,3vw,4.4rem); flex-wrap:wrap;\n  pointer-events:none;\n}\n.tkh3 .t3-sub{\n  font-family:var(--ui);\n  font-size:var(--ui-md); font-weight:400; line-height:1.52;\n  letter-spacing:-0.004em;\n  color:var(--g-fg); opacity:0; max-width:36ch;\n  will-change:opacity,transform;\n}\n.tkh3 .t3-contact{ display:flex; gap:clamp(1.8rem,2.4vw,3.6rem); opacity:0; will-change:opacity,transform }\n.tkh3 .t3-c-row{ display:flex; flex-direction:column; gap:.42em; text-decoration:none; pointer-events:auto }\n.tkh3 .t3-c-l{\n  font-family:var(--ui); font-size:var(--ui-xs); font-weight:500;\n  letter-spacing:0.02em; color:var(--g-fg); opacity:0.5;\n}\n.tkh3 .t3-c-v{\n  font-family:var(--ui); font-size:var(--ui-lg);\n  font-weight:500; letter-spacing:-0.008em; color:var(--g-fg);\n  transition:opacity .25s var(--ease);\n}\n.tkh3 a.t3-c-row:hover .t3-c-v{ opacity:0.6 }\n.tkh3 a.t3-c-row:focus-visible{ outline:2px solid var(--g-accent); outline-offset:4px; border-radius:3px }\n\n.tkh3 .t3-tail{ display:flex; align-items:flex-end; gap:clamp(1.8rem,2.2vw,3.4rem) }\n.tkh3 .t3-plate{\n  display:flex; flex-direction:column; gap:.32rem;\n  text-align:right; opacity:0; will-change:opacity,transform;\n  transition:opacity .1s linear;\n}\n.tkh3 .t3-tag{\n  font-family:var(--ui); font-size:var(--ui-sm); font-weight:400;\n  letter-spacing:-0.004em; color:var(--g-fg); opacity:0.58;\n}\n\n.tkh3 .t3-cta{\n  pointer-events:none; display:inline-flex; align-items:center; justify-content:center;\n  padding:.78em 1.5em; border-radius:999px;\n  background:transparent; color:var(--g-fg); text-decoration:none;\n  font-family:var(--ui); font-size:var(--ui-md); font-weight:500;\n  letter-spacing:-0.004em; white-space:nowrap;\n  border:1px solid var(--g-line); opacity:0;\n  will-change:opacity,transform;\n  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .28s var(--ease);\n}\n.tkh3 .t3-cta:hover{ background:var(--cta-bg); color:var(--cta-fg); border-color:var(--cta-bg); transform:translateY(-1px) }\n.tkh3 .t3-cta:focus-visible{ outline:2px solid var(--g-accent); outline-offset:4px }\n\n.tkh3 .t3-hint{\n  position:absolute; left:4vw; bottom:3.4vh;\n  z-index:8; display:flex; align-items:center; gap:.7rem;\n  color:var(--g-fg); pointer-events:none; will-change:opacity;\n}\n.tkh3 .t3-hint-labels{ position:relative; height:1em; display:flex; align-items:center }\n.tkh3 .t3-hint-labels span{\n  font-family:var(--ui); font-weight:500; font-size:var(--ui-sm);\n  letter-spacing:-0.004em; opacity:.7; white-space:nowrap;\n  position:absolute; left:0; top:50%; transform:translateY(-50%);\n}\n.tkh3 .t3-hint-rule{\n  width:1px; height:var(--hair); background:var(--g-line);\n  position:relative; overflow:hidden; flex:none;\n}\n.tkh3 .t3-hint-rule::after{\n  content:''; position:absolute; top:0; left:0; width:100%; height:50%;\n  background:var(--g-fg);\n  animation:t3ScrollHint 1.6s infinite cubic-bezier(.65,0,.35,1);\n}\n@keyframes t3ScrollHint{ 0%{transform:translateY(-100%)} 100%{transform:translateY(200%)} }\n\n@media (min-width:901px) and (max-width:1200px){\n  .tkh3{ --nav-gap:1.6rem; --link-gap:1.35rem;\n         --logo-h:clamp(22px,2.1vw,28px); --ui-md:clamp(14px,1.15vw,17px) }\n  .tkh3 .t3-copy{ grid-column:1 \/ 11 }\n  .tkh3 .t3-support{ gap:2.1rem }\n  .tkh3 .t3-tail{ gap:1.6rem }\n}\n\n@media (min-width:901px) and (max-height:780px){\n  .tkh3 .t3-shell{ padding:2.8vh 4vw }\n  .tkh3 .t3-headline{ font-size:clamp(40px,5.2vw,88px) }\n  .tkh3 .t3-copy{ padding-bottom:1.7rem }\n  .tkh3 .t3-eyebrow{ margin-bottom:1rem }\n}\n\n@media (max-width:900px){\n  .tkh3 .t3-shell{ padding:2.6vh 6vw; column-gap:0 }\n  .tkh3 .t3-nav{ padding-bottom:.95rem }\n  .tkh3 .t3-nav-r{ gap:.7rem }\n  .tkh3 .t3-logo-top{ height:clamp(22px,5.6vw,30px) }\n  .tkh3 .t3-links{ display:none }\n  .tkh3 .t3-nav-div{ display:none }\n  .tkh3 .t3-tod{ width:40px; height:40px }         \n  .tkh3 .t3-tod svg{ width:20px; height:20px }\n  .tkh3 .t3-navcta{ padding:.66em 1.15em }\n  .tkh3 .t3-copy{ grid-column:1 \/ -1; padding-bottom:1.7rem }\n  .tkh3 .t3-eyebrow{ margin-bottom:1.15rem; padding:.46em .9em .46em .7em }\n  .tkh3 .t3-headline{ font-size:clamp(40px,11.5vw,76px) }\n  .tkh3 .t3-word i{ letter-spacing:-0.014em }\n  .tkh3 .t3-word.is-em i{ letter-spacing:-0.028em }\n  .tkh3 .t3-footrow{ flex-direction:column; align-items:flex-start; gap:1.4rem }\n  .tkh3 .t3-support{ flex-direction:column; align-items:flex-start; gap:1.2rem }\n  .tkh3 .t3-tail{ width:100%; justify-content:space-between; align-items:center }\n  .tkh3 .t3-plate{ text-align:left }\n  .tkh3 .t3-hint{ display:none }\n  .tkh3 .t3-frost{\n    width:100%; top:45%; bottom:0; left:0; transform:translateY(100%);\n  }\n}\n\n@media (max-width:430px){\n  .tkh3{ --ui-md:14px; --ui-sm:12.5px; --ui-xs:11px; --ui-lg:15.5px }\n  .tkh3 .t3-logo-top{ height:clamp(19px,5vw,24px) }\n  .tkh3 .t3-nav-r{ gap:.35rem }\n  .tkh3 .t3-navcta{ padding:.6em 1em }\n  .tkh3 .t3-tod{ width:36px; height:36px }\n  .tkh3 .t3-tod svg{ width:18px; height:18px }\n  .tkh3 .t3-contact{ gap:1.4rem }\n}\n\n@media (max-height:520px) and (orientation:landscape){\n  .tkh3 .t3-shell{ padding:2.2vh 5vw }\n  .tkh3 .t3-eyebrow{ display:none }\n  .tkh3 .t3-headline{ font-size:clamp(28px,6vw,54px) }\n  .tkh3 .t3-copy{ padding-bottom:1rem }\n  .tkh3 .t3-sub{ display:none }\n}\n\n.tkh3[data-gl=\"off\"] canvas.t3-gl{ display:none }\n.tkh3[data-gl=\"off\"] .t3-pin{ background:var(--poster) }\n.tkh3[data-gl=\"off\"] .t3-hint{ display:none }\n\n@media (prefers-reduced-motion:reduce){\n  .tkh3 .t3-hint-rule::after{animation:none;transform:translateY(25%)}\n}\n\n<\/style>\n\n<!-- Kirjastot -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;700;900&family=Roboto:wght@400;500&display=swap\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/build\/three.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/loaders\/GLTFLoader.js\"><\/script>\n\n<!-- Asetukset sidottuna Elementorin kenttiin -->\n<script>\nwindow.TKH3_CFG = window.TKH3_CFG || {\n  scrollLen: 500,\n  words:   [\"Linjana\", \"Laadukas\", \"Logistiikka\"],\n  emphasis: 2,          \n  sub:     \"Kaakkoissuomalainen kuljetus- ja terminaalipalveluyritys. L\u00e4ht\u00f6kohtina laatu, nopeus ja monipuolisuus.\",\n  ctaText: \"Pyyd\u00e4 tarjous\",\n  ctaHref: \"#YHT\",\n  navCtaOn: true,       \n  eyebrowOn: true,\n  uiFont:  \"system\",    \n  brand:   \"VP\",\n  brandWord: \"-Kuljetus Oy\",\n  lerp:    0.05,\n  mouse:   0.4,\n  dprCap:  1.6,\n  dprCapLow:    1.25,   \n  scrollLenLow: 360,    \n  forceLow:     null,   \n  forcePoster:  false,  \n  base:    \"https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/\",\n\n  info: {\n    phone:  \"0500 552 421\",\n    email:  \"myynti@vp-kuljetus.fi\",\n    addr1:  \"J\u00e4nhi\u00e4l\u00e4ntie 28\",\n    addr2:  \"55300 Rauha\"\n  },\n\n  rail: [\"Laatu\", \"Nopeus\", \"Monipuolisuus\"],   \n  nav:  [\"Kuljetus\", \"Terminaalipalvelut\", \"Kaakkois-Suomi\"],\n\n  yawTruck: \"auto\",\n  yawCar:   180,\n  debugMarkers: false,\n  cabColor:  0xdfe3e8,\n  bodyColor: 0xe8ebee,\n  cabMatch:  [\"cab\",\"body\",\"paint\",\"blue\",\"cabin\",\"chassis\",\"truck\"],\n  hideMatch: [],\n  logoZ:      1.21,\n  logoX:     -1.0,\n  logoY:      2.35,\n  logoW:      4.8,\n  logoH:      1.18,\n  cabLogoOn:  true,\n  cabLogoZ:   0,\n  cabLogoX:   3.85,\n  cabLogoY:   2.8,\n  cabLogoW:   1.1,\n  cabLogoH:   0.3,\n  timeOfDay:  null,\n  finalShot:  null,\n  frontShotChance: 0.4,\n  todToggle:  true,\n  signGreen:  \"#0f3b35\",   \n  roadWet:     0.88,\n  waitEnd:     0.10,\n  lampSpacing: 74,\n  bottomFade:  0.30,\n  laneZ:       0.2,\n  trafficMin:  8,\n  trafficMax:  14,\n  trafficGap:  46,\n  frostEnd:   0.30,\n  motionBlur: 1.0\n};\n<\/script>\n\n<!-- Varsinainen HTML-rakenne -->\n<div class=\"tkh3\" data-tkh3 data-tod=\"night\" data-uifont=\"system\">\n  <div class=\"t3-pin\">\n    <canvas class=\"t3-gl\" data-t3-gl aria-hidden=\"true\"><\/canvas>\n    <div class=\"t3-vignette\"><\/div>\n    <div class=\"t3-frost\" data-t3-frost><\/div>\n    <div class=\"t3-speed\" data-t3-speed><\/div>\n    <div class=\"t3-bottomfade\"><\/div>\n    <div class=\"t3-cornerfade\"><\/div>\n    <div class=\"t3-scrim\" data-t3-scrim><\/div>\n    <div class=\"t3-grain\"><\/div>\n    <div class=\"t3-hint\" data-t3-hint>\n      <div class=\"t3-hint-rule\"><\/div>\n      <div class=\"t3-hint-labels\">\n        <span data-t3-hint-a>Aloita scrollaamalla<\/span>\n        <span data-t3-hint-b style=\"opacity:0\">Jatka scrollaamista<\/span>\n      <\/div>\n    <\/div>\n    <div class=\"t3-shell\">\n      <header class=\"t3-nav\" data-t3-nav>\n        <div class=\"t3-nav-l\" data-t3-nav-l>\n          <!-- HUOM! T\u00e4ss\u00e4 on kuvakent\u00e4n dynaaminen muuttuja -->\n          <img decoding=\"async\" src=\"https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/Asset-1-1-scaled.png\" class=\"t3-logo-top\" data-t3-toplogo alt=\"Logo\">\n          <nav class=\"t3-links\" data-t3-links><\/nav>\n        <\/div>\n        <div class=\"t3-nav-r\" data-t3-nav-r>\n          <button class=\"t3-tod\" data-t3-tod type=\"button\" aria-label=\"Vaihda vuorokaudenaika\">\n            <svg class=\"t3-ico-moon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path d=\"M20 14.5A8.5 8.5 0 1 1 9.5 4a6.6 6.6 0 0 0 10.5 10.5z\"\/>\n            <\/svg>\n            <svg class=\"t3-ico-sun\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <circle cx=\"12\" cy=\"12\" r=\"4.2\"\/>\n              <path d=\"M12 2.4v2.1M12 19.5v2.1M4.2 4.2l1.5 1.5M18.3 18.3l1.5 1.5M2.4 12h2.1M19.5 12h2.1M4.2 19.8l1.5-1.5M18.3 5.7l1.5-1.5\"\/>\n            <\/svg>\n          <\/button>\n          <span class=\"t3-nav-div\" data-t3-navdiv><\/span>\n          <a class=\"t3-navcta\" data-t3-navcta href=\"#\"><\/a>\n        <\/div>\n      <\/header>\n      <div class=\"t3-copy\" data-t3-copy>\n        <div class=\"t3-eyebrow\" data-t3-eyebrow><\/div>\n        <h1 class=\"t3-headline\" data-t3-headline><\/h1>\n      <\/div>\n      <div class=\"t3-footrow\" data-t3-footrow>\n        <div class=\"t3-support\" data-t3-support>\n          <p class=\"t3-sub\" data-t3-sub><\/p>\n          <div class=\"t3-contact\" data-t3-contact>\n            <a class=\"t3-c-row\" data-t3-phone href=\"#\">\n              <span class=\"t3-c-l\">Puhelin<\/span>\n              <span class=\"t3-c-v\" data-t3-phone-v><\/span>\n            <\/a>\n            <a class=\"t3-c-row\" data-t3-email href=\"#\">\n              <span class=\"t3-c-l\">S\u00e4hk\u00f6posti<\/span>\n              <span class=\"t3-c-v\" data-t3-email-v><\/span>\n            <\/a>\n          <\/div>\n        <\/div>\n        <div class=\"t3-tail\">\n          <div class=\"t3-plate\" data-t3-plate>\n            <div class=\"t3-tag\" data-t3-addr1><\/div>\n            <div class=\"t3-tag\" data-t3-addr2><\/div>\n          <\/div>\n          <a class=\"t3-cta\" data-t3-cta href=\"#\"><span data-t3-cta-t><\/span><\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<!-- end Etusivu HERO -->\t\t\t\t<\/div>\n\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-9f5bc1b e-con e-atomic-element e-flexbox-base e-f1d2fb6 \" data-id=\"9f5bc1b\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"9f5bc1b\" id=\"KAKKONEN\">\n    <div class=\"elementor-element elementor-element-119152b e-con e-atomic-element e-flexbox-base e-99c9fb9 \" data-id=\"119152b\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"119152b\">\n    \t\t<div class=\"elementor-element elementor-element-57ea85b elementor-widget elementor-widget-ucaddon_esittely\" data-id=\"57ea85b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ucaddon_esittely.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<!-- start Etusivun Esittely -->\n<style>\/* widget: Etusivun Esittely *\/\n\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@600;700;800&family=Roboto:wght@300;400;500&display=swap');\n\n  .vp-section {\n    --vpk-bg: #F4F7F9;\n    --vpk-paper: #FFFFFF;\n    --vpk-ink: #11181C;\n    --vpk-ink-soft: #5B6B63;\n    --vpk-green: #1B3B2F;\n    --vpk-green-mid: #2F6B52;\n    --vpk-green-lt: #4A9E76;\n    --vpk-line: rgba(20,35,29,.12);\n    \n    --vpk-display: 'Montserrat', sans-serif;\n    --vpk-body: 'Roboto', sans-serif;\n\n    background-color: var(--vpk-bg) !important; \n    width: 100%;\n    padding: 6% 8% !important; \n    box-sizing: border-box !important;\n    font-family: var(--vpk-body) !important;\n    -webkit-font-smoothing: antialiased !important;\n  }\n\n  .vp-container {\n    width: 100%;\n    max-width: 1440px !important;\n    margin: 0 auto !important;\n    display: flex !important;\n    flex-direction: column !important;\n    gap: 45px !important;\n  }\n\n  .vp-image-area {\n    position: relative !important;\n    width: 100% !important;\n    height: 55vh !important; \n    min-height: 400px !important;\n    border-radius: 32px !important;\n    overflow: hidden !important;\n    background-color: var(--vpk-paper) !important;\n    box-shadow: 0 24px 48px -12px rgba(17,24,28,.12) !important;\n  }\n\n  .vp-slide-base {\n    position: absolute !important; \n    top: 0 !important;\n    left: 0 !important;\n    width: 100% !important;\n    height: 100% !important;\n    object-fit: cover !important;\n    z-index: 1 !important; \n    pointer-events: none !important; \n    opacity: 0;\n    transform: scale(1.05);\n    animation: vpCarouselModern 75s infinite; \n  }\n\n  @keyframes vpCarouselModern {\n    0% { opacity: 0; transform: scale(1.05); }\n    3% { opacity: 1; transform: scale(1.03); }    \n    20% { opacity: 1; transform: scale(1); }  \n    23% { opacity: 0; transform: scale(1); }  \n    100% { opacity: 0; transform: scale(1); }\n  }\n\n  .delay-1 { animation-delay: 0s; }\n  .delay-2 { animation-delay: 15s; }\n  .delay-3 { animation-delay: 30s; }\n  .delay-4 { animation-delay: 45s; }\n  .delay-5 { animation-delay: 60s; }\n\n  .vp-text-area {\n    display: flex !important;\n    justify-content: space-between !important;\n    align-items: flex-start !important;\n    gap: 70px !important; \n    background-color: transparent !important; \n    z-index: 10 !important;\n    position: relative !important;\n  }\n\n  .vp-col-left {\n    width: 42% !important; \n    flex-shrink: 0 !important;\n    display: flex !important;\n    flex-direction: column !important; \n    align-items: flex-start !important;\n    gap: 40px !important; \n  }\n\n  .vp-logo {\n    max-width: 320px !important; \n    height: auto !important;\n    display: block !important;\n    object-fit: contain !important;\n  }\n\n  .vp-stats-row {\n    display: flex !important;\n    gap: 20px !important;\n    width: 100% !important;\n  }\n\n  .vp-stat-box {\n    flex: 1 !important;\n    background: var(--vpk-paper) !important;\n    border-radius: 20px !important; \n    padding: 24px 16px !important;\n    text-align: center !important;\n    box-shadow: 0 4px 6px -1px rgba(17,24,28,.04), 0 2px 4px -2px rgba(17,24,28,.04) !important;\n    border: 1px solid rgba(27,59,47,.08) !important;\n    display: flex !important;\n    flex-direction: column !important;\n    justify-content: center !important;\n    transition: all 0.3s cubic-bezier(.25,.8,.25,1) !important;\n  }\n\n  .vp-stat-box:hover {\n    transform: translateY(-5px) !important;\n    box-shadow: 0 12px 24px -8px rgba(17,24,28,.12) !important;\n    border-color: rgba(27,59,47,.2) !important;\n  }\n\n  .vp-stat-num {\n    font-family: var(--vpk-display) !important;\n    font-size: 2.25rem !important;\n    font-weight: 800 !important;\n    color: var(--vpk-ink) !important; \n    line-height: 1 !important;\n    letter-spacing: -.03em !important;\n    margin-bottom: 8px !important;\n  }\n\n  .vp-stat-text {\n    font-family: var(--vpk-display) !important;\n    font-size: 11px !important;\n    font-weight: 700 !important;\n    color: var(--vpk-green-mid) !important; \n    text-transform: uppercase !important;\n    letter-spacing: .15em !important;\n  }\n\n  .vp-btn {\n    display: inline-flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    background-color: var(--vpk-green-mid) !important; \n    color: var(--vpk-paper) !important;\n    font-family: var(--vpk-display) !important;\n    font-size: 0.95rem !important;\n    font-weight: 700 !important;\n    letter-spacing: 0.8px !important;\n    text-transform: uppercase !important;\n    text-decoration: none !important;\n    padding: 18px 48px !important;\n    border-radius: 10px !important; \n    transition: all 0.3s ease !important;\n    box-shadow: 0 8px 16px -4px rgba(47,107,82,.3) !important; \n    border: 2px solid transparent !important;\n    cursor: pointer !important;\n  }\n\n  .vp-btn:hover {\n    transform: translateY(-3px) !important;\n    background-color: var(--vpk-paper) !important; \n    color: var(--vpk-green-mid) !important;\n    border-color: var(--vpk-green-mid) !important;\n    box-shadow: 0 12px 20px -4px rgba(47,107,82,.2) !important;\n  }\n\n  .vp-col-right {\n    width: 58% !important; \n    padding-top: 15px !important; \n  }\n\n  .vp-col-right p {\n    font-family: var(--vpk-body) !important; \n    font-size: clamp(16px, 1.2vw, 18px) !important; \n    line-height: 1.8 !important;\n    font-weight: 400 !important; \n    margin: 0 !important;\n    color: var(--vpk-ink-soft) !important; \n  }\n\n  @media (max-width: 992px) {\n    .vp-section {\n      padding: 40px 5% !important; \n    }\n    .vp-container {\n      gap: 30px !important;\n    }\n    .vp-image-area {\n      height: 40vh !important; \n      min-height: 300px !important;\n      border-radius: 24px !important;\n    }\n    .vp-text-area {\n      flex-direction: column !important;\n      gap: 40px !important; \n    }\n    .vp-col-left, .vp-col-right {\n      width: 100% !important;\n    }\n    .vp-logo {\n      max-width: 260px !important; \n    }\n    .vp-col-right p {\n      font-size: 1rem !important; \n      line-height: 1.7 !important;\n    }\n  }\n\n  @media (max-width: 768px) {\n    .vp-section {\n      padding: 30px 20px !important; \n    }\n    .vp-image-area {\n      height: 35vh !important;\n      min-height: 250px !important;\n      border-radius: 20px !important;\n    }\n    .vp-col-left {\n      gap: 30px !important;\n    }\n    .vp-stats-row {\n      flex-wrap: wrap !important;\n      gap: 12px !important;\n    }\n    .vp-stat-box {\n      flex: 1 1 calc(50% - 12px) !important;\n      padding: 20px 12px !important;\n      border-radius: 16px !important;\n    }\n    .vp-stat-box:nth-child(3) {\n      flex: 1 1 100% !important;\n    }\n    .vp-stat-num {\n      font-size: 1.75rem !important;\n    }\n    .vp-btn {\n      width: 100% !important; \n      padding: 16px 20px !important;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .vp-section {\n      padding: 25px 15px !important; \n    }\n    .vp-image-area {\n      min-height: 200px !important;\n      border-radius: 16px !important;\n    }\n    .vp-logo {\n      max-width: 200px !important;\n    }\n    .vp-col-left {\n      gap: 25px !important;\n    }\n    .vp-stat-box {\n      flex: 1 1 100% !important; \n      flex-direction: row !important; \n      justify-content: center !important;\n      align-items: center !important;\n      gap: 15px !important;\n      padding: 16px !important;\n    }\n    .vp-stat-num {\n      margin-bottom: 0 !important;\n      font-size: 1.5rem !important;\n    }\n    .vp-stat-text {\n      font-size: 12px !important;\n    }\n  }\n\n<\/style>\n\n<div class=\"vp-section\">\n  <div class=\"vp-container\">\n    \n    <div class=\"vp-image-area\">\n      <img decoding=\"async\" class=\"vp-slide-base delay-1\" src=\"https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/20211122_134440.webp\" alt=\"Kuva 1\">\n      <img decoding=\"async\" class=\"vp-slide-base delay-2\" src=\"https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/53455341.webp\" alt=\"Kuva 2\">\n      <img decoding=\"async\" class=\"vp-slide-base delay-3\" src=\"https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/ylakuva1.webp\" alt=\"Kuva 3\">\n      <img decoding=\"async\" class=\"vp-slide-base delay-4\" src=\"https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/IMG_20211210_230754.webp\" alt=\"Kuva 4\">\n      <img decoding=\"async\" class=\"vp-slide-base delay-5\" src=\"https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/social_icon12.webp\" alt=\"Kuva 5\">\n    <\/div>\n\n    <div class=\"vp-text-area\">\n      <div class=\"vp-col-left\">\n        \n        <img decoding=\"async\" class=\"vp-logo\" src=\"https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/Asset-1-scaled.png\" alt=\"VP-Kuljetus Logo\">\n        \n        <div class=\"vp-stats-row\">\n          <div class=\"vp-stat-box\">\n            <span class=\"vp-stat-num\">30+<\/span>\n            <span class=\"vp-stat-text\">Ajoneuvoa<\/span>\n          <\/div>\n          \n          <div class=\"vp-stat-box\">\n            <span class=\"vp-stat-num\">100+<\/span>\n            <span class=\"vp-stat-text\">Ammattilaista<\/span>\n          <\/div>\n          \n          <div class=\"vp-stat-box\">\n            <span class=\"vp-stat-num\">100%<\/span>\n            <span class=\"vp-stat-text\">Kotimainen<\/span>\n          <\/div>\n        <\/div>\n\n        <a href=\"#YHT\" class=\"vp-btn\">Ota yhteytt\u00e4<\/a>\n        \n      <\/div>\n\n      <div class=\"vp-col-right\">\n        <p>VP-Kuljetus Oy on kaakkoissuomalainen kuljetusliike, joka tuottaa laadukkaita kuljetus-, jakelu- ja terminaalipalveluita p\u00e4\u00e4asiassa Kaakkois- ja Etel\u00e4-Suomessa. Logistiikkamme keskittyy elintarvike- ja pakastekuljetuksiin, mutta toteutamme my\u00f6s kontti-, kappaletavara- ja teollisuuskuljetuksia. Olemme ammattilaisia kuljetusalalla. Ajoj\u00e4rjestelymme on eritt\u00e4in ammattitaitoinen ja pystyy my\u00f6s nopeasti reagoimaan uusiin tilanteisiin ja ratkaisemaan asiakkaan kuljetusongelman. Koulutamme s\u00e4\u00e4nn\u00f6llisesti kuljettajamme, jotta kaikilla on uusin mahdollinen tieto liittyen kaluston tehokkaaseen ja turvalliseen k\u00e4ytt\u00f6\u00f6n.<\/p>\n      <\/div>\n      \n    <\/div>\n  <\/div>\n<\/div>\n<!-- end Etusivun Esittely -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/div>\n<div class=\"elementor-element elementor-element-5b2ea42 e-con e-atomic-element e-flexbox-base e-41b5495 \" data-id=\"5b2ea42\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"5b2ea42\">\n    \n<\/div>\n<div class=\"elementor-element elementor-element-d384ebb e-con e-atomic-element e-flexbox-base e-70a74c1 \" data-id=\"d384ebb\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"d384ebb\" id=\"PALVELUT\">\n    \t\t<div class=\"elementor-element elementor-element-89369fd elementor-widget elementor-widget-ucaddon_etusivun_palvelut\" data-id=\"89369fd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ucaddon_etusivun_palvelut.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<!-- start Etusivun Palvelut -->\n<style>\/* widget: Etusivun Palvelut *\/\n\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@600;700&family=Roboto:wght@300;400;500&display=swap');\n\n  .vpk-service-showcase {\n    --vpk-ink: #11181C;\n    --vpk-ink-soft: #64748B;\n    --vpk-border: #E2E8F0;\n    --vpk-green-mid: #2F6B52;\n    --vpk-green-lt: #4A9E76;\n    --vpk-display: \"Montserrat\", sans-serif;\n    --vpk-body: \"Roboto\", sans-serif;\n\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    max-width: 1440px; \n    margin: 0 auto 80px auto; \n    font-family: var(--vpk-body);\n    box-sizing: border-box;\n  }\n\n  .vpk-service-showcase * {\n    box-sizing: inherit;\n  }\n\n  .vpk-section-header {\n    margin-bottom: 56px;\n    max-width: 700px;\n    padding: 0 16px;\n  }\n\n  .vpk-section-title {\n    font-family: var(--vpk-display);\n    font-size: clamp(36px, 4.5vw, 48px);\n    font-weight: 700;\n    color: #2F6B52;\n    margin: 0 0 20px 0;\n    letter-spacing: -.025em;\n  }\n\n  .vpk-section-desc {\n    font-size: clamp(16px, 1.2vw, 20px);\n    line-height: 1.6;\n    color: var(--vpk-ink-soft);\n    margin: 0;\n    font-weight: 400;\n  }\n\n  .vpk-services-content {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 64px;\n    width: 100%;\n    padding: 0 16px; \n  }\n\n  .vpk-modern-card {\n    display: flex;\n    flex-direction: column;\n    text-decoration: none;\n    color: var(--vpk-ink);\n  }\n\n  .vpk-card-image-wrapper {\n    width: 100%;\n    aspect-ratio: 16 \/ 9;\n    border-radius: 24px;\n    overflow: hidden;\n    margin-bottom: 32px;\n    background-color: var(--vpk-border);\n    position: relative; \n  }\n\n  .vpk-card-image {\n    position: absolute;\n    top: 0; left: 0; width: 100%; height: 100%;\n    background-size: cover;\n    background-position: center;\n    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);\n  }\n\n  .vpk-slideshow-image {\n    animation: vpkCrossfade 8s ease-in-out infinite alternate;\n  }\n\n  @keyframes vpkCrossfade {\n    0%, 25% { opacity: 0; }\n    75%, 100% { opacity: 1; }\n  }\n\n  .vpk-modern-card:hover .vpk-card-image,\n  .vpk-modern-card:focus-visible .vpk-card-image {\n    transform: scale(1.05);\n  }\n\n  .vpk-card-text-content {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    padding-right: 24px;\n  }\n\n  .vpk-card-title {\n    font-family: var(--vpk-display);\n    font-size: clamp(22px, 2vw, 32px);\n    font-weight: 700;\n    margin: 0 0 16px 0;\n    color: var(--vpk-green-mid);\n    transition: color 0.3s ease;\n  }\n\n  .vpk-modern-card:hover .vpk-card-title,\n  .vpk-modern-card:focus-visible .vpk-card-title {\n    color: var(--vpk-green-lt);\n  }\n\n  .vpk-card-text {\n    font-size: clamp(15px, 1vw, 17px);\n    line-height: 1.7;\n    color: var(--vpk-ink-soft);\n    margin: 0 0 32px 0;\n  }\n\n  .vpk-card-action {\n    font-family: var(--vpk-display);\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--vpk-green-mid);\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    display: flex;\n    align-items: center;\n    opacity: 0.9;\n    transition: opacity 0.3s ease, color 0.3s ease;\n    margin-top: auto;\n  }\n\n  .vpk-arrow {\n    margin-left: 12px;\n    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);\n  }\n\n  .vpk-modern-card:hover .vpk-card-action,\n  .vpk-modern-card:focus-visible .vpk-card-action {\n    opacity: 1;\n    color: var(--vpk-green-lt);\n  }\n\n  .vpk-modern-card:hover .vpk-arrow,\n  .vpk-modern-card:focus-visible .vpk-arrow {\n    transform: translateX(6px);\n  }\n\n  @media (max-width: 900px) {\n    .vpk-services-content {\n      grid-template-columns: 1fr;\n      gap: 48px;\n    }\n    .vpk-service-showcase {\n      margin-bottom: 56px;\n    }\n    .vpk-card-text-content {\n      padding-right: 0;\n    }\n  }\n\n  @media (max-width: 600px) {\n    .vpk-section-header {\n      margin-bottom: 32px;\n      padding: 0 12px;\n    }\n    .vpk-services-content {\n      gap: 36px;\n      padding: 0 12px;\n    }\n    .vpk-card-image-wrapper {\n      margin-bottom: 20px;\n      border-radius: 16px;\n    }\n    .vpk-card-text {\n      margin-bottom: 24px;\n    }\n    .vpk-service-showcase {\n      margin-bottom: 40px;\n    }\n  }\n\n<\/style>\n\n<div class=\"vpk-service-showcase\">\n  <div class=\"vpk-section-header\">\n    <h2 class=\"vpk-section-title\">Palvelut<\/h2>\n    <p class=\"vpk-section-desc\">\n      Tarjoamme joustavia ja luotettavia logistiikkaratkaisuja sek\u00e4 tehokkaita terminaalipalveluja, jotka pit\u00e4v\u00e4t yrityksesi py\u00f6r\u00e4t py\u00f6rim\u00e4ss\u00e4.\n    <\/p>\n  <\/div>\n\n  <div class=\"vpk-services-content\">\n    \n    <a href=\"https:\/\/vp-kuljetus.fi\/?page_id=632](https:\/\/vp-kuljetus.fi\/?page_id=632\" class=\"vpk-modern-card\">\n      <div class=\"vpk-card-image-wrapper\">\n        <div class=\"vpk-card-image\" style=\"background-image: url('https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/8.webp');\" aria-label=\"Kuorma-auto maantiell\u00e4\"><\/div>\n      <\/div>\n      <div class=\"vpk-card-text-content\">\n        <h4 class=\"vpk-card-title\">Kuljetustoiminta<\/h4>\n        <p class=\"vpk-card-text\">\n          VP-Kuljetuksella on monipuolinen historia kuljettamisesta. Kuljetusmuotoina ovat thermo-, kontti-, kappaletavarakuljetukset sek\u00e4 teollisuuden tuotekuljetukset. Kotimaan tavarakuljetukset muodostuvat yhteyksist\u00e4 Helsingin alueen ja Kaakkois-Suomen v\u00e4lill\u00e4.\n        <\/p>\n        <div class=\"vpk-card-action\">Lue lis\u00e4\u00e4 <span class=\"vpk-arrow\">&rarr;<\/span><\/div>\n      <\/div>\n    <\/a>\n\n    <a href=\"https:\/\/vp-kuljetus.fi\/?page_id=735\" class=\"vpk-modern-card\">\n      <div class=\"vpk-card-image-wrapper\">\n        <div class=\"vpk-card-image\" style=\"background-image: url('https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/ylakuva1.webp');\" aria-label=\"Terminaali ilmasta\"><\/div>\n        <div class=\"vpk-card-image vpk-slideshow-image\" style=\"background-image: url('https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/DJI_01816tie.webp');\" aria-label=\"Terminaalialue\"><\/div>\n      <\/div>\n      <div class=\"vpk-card-text-content\">\n        <h4 class=\"vpk-card-title\">Terminaalit<\/h4>\n        <p class=\"vpk-card-text\">\n          Lappeenrannan Rauhassa sek\u00e4 Kouvolassa sijaitsevat terminaalimme ovat suurten kulkuyhteyksien varrella. Asiakkaan lasti pystyt\u00e4\u00e4n purkamaan ja lastaamaan nopeasti.\n        <\/p>\n        <div class=\"vpk-card-action\">Lue lis\u00e4\u00e4 <span class=\"vpk-arrow\">&rarr;<\/span><\/div>\n      <\/div>\n    <\/a>\n\n  <\/div>\n<\/div>\n<!-- end Etusivun Palvelut -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-fbff774 e-con-full e-flex e-con e-parent\" data-id=\"fbff774\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bdd3894 elementor-widget__width-inherit elementor-widget elementor-widget-ucaddon_etusivu_kartta\" data-id=\"bdd3894\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ucaddon_etusivu_kartta.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<!-- start Etusivu Kartta -->\n<style>\/* widget: Etusivu Kartta *\/\n\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@700&family=Roboto:wght@400;500;600;700&display=swap');\n\n.vpk-map {\n  --vpk-bg: #F4F7F9;\n  --vpk-paper: #FFFFFF;\n  --vpk-ink: #11181C;\n  --vpk-ink-soft: #5B6B63;\n  --vpk-green: #1B3B2F;\n  --vpk-green-mid: #2F6B52;\n  --vpk-green-lt: #4A9E76;\n  --vpk-line: rgba(20,35,29,.12);\n\n  --vpk-display: \"Montserrat\", sans-serif;\n  --vpk-body: \"Roboto\", sans-serif;\n\n  position: relative;\n  width: 100%;\n  max-width: 1440px;\n  margin: 0 auto;\n  color: var(--vpk-ink);\n  font-family: var(--vpk-body);\n  -webkit-font-smoothing: antialiased;\n  overflow: visible;\n  isolation: isolate;\n}\n.vpk-map * { box-sizing: border-box; }\n\n.vpk-bg-layer {\n  position: absolute;\n  inset: 0;\n  background: radial-gradient(120% 90% at 68% 55%, rgba(74,158,118,.07) 0%, rgba(74,158,118,0) 60%), var(--vpk-bg);\n  border-radius: 32px;\n  box-shadow: 0 24px 64px rgba(0,0,0,0.04);\n  border: 1px solid rgba(0,0,0,0.02);\n  z-index: 0;\n  pointer-events: none;\n}\n\n.vpk-stage {\n  position: relative;\n  z-index: 1;\n  height: clamp(650px, 80vh, 900px);\n  display: flex;\n  flex-direction: column;\n}\n\n.vpk-head {\n  position: absolute;\n  top: clamp(40px, 5vw, 64px);\n  left: clamp(40px, 5vw, 64px);\n  z-index: 5;\n  width: 100%;\n  max-width: 520px;\n  pointer-events: none;\n}\n.vpk-title {\n  margin: 0 0 20px;\n  font-family: var(--vpk-display);\n  font-weight: 700;\n  font-size: clamp(38px, 4.5vw, 64px);\n  line-height: 1.05;\n  letter-spacing: -.025em;\n  color: var(--vpk-green-mid);\n}\n.vpk-lede {\n  margin: 0;\n  max-width: 48ch;\n  font-size: clamp(20px, 1.1vw, 16px);\n  line-height: 1.7;\n  color: var(--vpk-ink-soft);\n  font-weight: 400;\n}\n\n.vpk-view-wrap {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n}\n\n.vpk-canvas {\n  width: 100%;\n  height: 100%;\n  display: block;\n  touch-action: pan-y;\n  cursor: grab;\n}\n.vpk-canvas.vpk-drag { cursor: grabbing; }\n\n.vpk-pins {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.vpk-pin {\n  position: absolute;\n  top: 0; left: 0;\n  pointer-events: auto;\n  cursor: pointer;\n  background: transparent;\n  border: 0;\n  padding: 0;\n  z-index: 2;\n  -webkit-tap-highlight-color: transparent;\n}\n.vpk-pin.vpk-hidden { opacity: 0; pointer-events: none; }\n.vpk-pin:hover, .vpk-pin:focus-within, .vpk-pin.vpk-on { z-index: 10; }\n\n.vpk-hitbox {\n  position: absolute;\n  left: -24px;\n  top: -24px;\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  background: transparent;\n  z-index: 1;\n}\n\n.vpk-pin i {\n  display: block;\n  position: absolute;\n  left: -7px;\n  top: -7px;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: var(--vpk-green);\n  box-shadow: 0 0 0 3px rgba(244,247,249,.9), 0 2px 8px rgba(27,59,47,.30);\n  transition: transform .3s cubic-bezier(.2,.9,.25,1), background .3s, box-shadow .3s;\n  z-index: 2;\n}\n.vpk-pin:hover i, .vpk-pin:focus-visible i, .vpk-pin.vpk-on i {\n  transform: scale(1.5);\n  background: var(--vpk-green-lt);\n  box-shadow: 0 0 0 3px rgba(244,247,249,.95), 0 3px 12px rgba(74,158,118,.5), 0 0 22px rgba(74,158,118,.35);\n}\n.vpk-pin:focus-visible { outline: none; }\n.vpk-pin:focus-visible i { outline: 2px solid var(--vpk-green-lt); outline-offset: 6px; }\n\n.vpk-pin i::before {\n  content: ''; position: absolute; inset: -5px; border-radius: 50%;\n  border: 1px solid var(--vpk-green-lt); opacity: 0; transform: scale(.6);\n}\n.vpk-pin.vpk-on i::before { animation: vpk-ping 2s ease-out infinite; }\n@keyframes vpk-ping {\n  0% { opacity: 1; transform: scale(.6); }\n  100% { opacity: 0; transform: scale(2.8); }\n}\n\n.vpk-global-tooltip {\n  --vpk-tail-y: 50%;\n  position: absolute;\n  top: 0; left: 0;\n  background: var(--vpk-paper);\n  border-radius: 18px;\n  padding: 22px 24px;\n  width: max-content;\n  max-width: 360px;\n  box-shadow: 0 1px 2px rgba(17,24,28,.04), 0 12px 28px -8px rgba(17,24,28,.10), 0 32px 64px -16px rgba(27,59,47,.14);\n  border: 1px solid rgba(27,59,47,.06);\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  transition: opacity .34s cubic-bezier(.2,.9,.25,1), visibility .34s, left .38s cubic-bezier(.22,1,.36,1), top .38s cubic-bezier(.22,1,.36,1);\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  will-change: left, top;\n}\n.vpk-global-tooltip.vpk-nolag { transition: opacity .34s, visibility .34s; }\n\n.vpk-global-tooltip::after {\n  content: '';\n  position: absolute;\n  left: -7px;\n  right: auto;\n  top: var(--vpk-tail-y);\n  margin-top: -8px;\n  width: 0; height: 0;\n  border-width: 8px 7px 8px 0;\n  border-style: solid;\n  border-color: transparent var(--vpk-paper) transparent transparent;\n  filter: drop-shadow(-1.5px 0 1.5px rgba(27,59,47,.05));\n  transition: top .38s cubic-bezier(.22,1,.36,1);\n}\n.vpk-global-tooltip.vpk-nolag::after { transition: none; }\n\n.vpk-global-tooltip.vpk-flip::after {\n  left: auto;\n  right: -7px;\n  border-width: 8px 0 8px 7px;\n  border-color: transparent transparent transparent var(--vpk-paper);\n  filter: drop-shadow(1.5px 0 1.5px rgba(27,59,47,.05));\n}\n\n.vpk-global-tooltip.is-visible {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n}\n\n.vpk-leader {\n  position: absolute;\n  top: 0; left: 0;\n  width: 100%; height: 100%;\n  pointer-events: none;\n  z-index: 99;\n  overflow: visible;\n}\n.vpk-leader line {\n  stroke: var(--vpk-green-lt);\n  stroke-width: 1;\n  stroke-dasharray: 2 3;\n  opacity: 0;\n  transition: opacity .3s;\n}\n.vpk-leader.is-visible line { opacity: .5; }\n\n.vpk-tooltip-header { border-bottom: 1px solid var(--vpk-line); padding-bottom: 12px; }\n.vpk-tooltip-sub { display: block; font-size: 10px; color: var(--vpk-green-mid); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; margin: 0 0 7px; }\n.vpk-tooltip-title { display: block; font-family: var(--vpk-display); font-size: 25px; font-weight: 700; color: var(--vpk-ink); line-height: 1.05; letter-spacing: -.02em; }\n.vpk-tooltip-quote { font-size: 13.5px; line-height: 1.6; color: var(--vpk-ink-soft); font-weight: 400; border-left: 2px solid rgba(74,158,118,.4); padding-left: 14px; margin: 0; white-space: normal; }\n.vpk-tooltip-meta { display: flex; gap: 6px; flex-wrap: wrap; }\n.vpk-tooltip-meta span { font-size: 11px; font-weight: 600; letter-spacing: .01em; padding: 5px 11px; border-radius: 99px; background: rgba(74,158,118,.07); border: 1px solid rgba(74,158,118,.14); color: var(--vpk-green-mid); white-space: nowrap; }\n.vpk-tooltip-contact { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--vpk-line); padding-top: 15px; }\n.vpk-cbit { display: flex; flex-direction: column; gap: 6px; }\n.vpk-crole { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--vpk-ink-soft); opacity: .75; }\n.vpk-clinks { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }\n.vpk-clinks a { color: var(--vpk-ink); text-decoration: none; font-size: 15px; line-height: 1.35; font-weight: 700; letter-spacing: -.005em; transition: color .18s; position: relative; }\n.vpk-clinks a + a { font-size: 13px; font-weight: 500; color: var(--vpk-ink-soft); word-break: break-all; }\n.vpk-clinks a:hover { color: var(--vpk-green-lt); }\n.vpk-clinks a:focus-visible { outline: 2px solid var(--vpk-green-lt); outline-offset: 3px; border-radius: 3px; }\n\n@media (max-width: 860px) {\n  .vpk-bg-layer { border-radius: 16px; }\n  .vpk-stage { height: auto; min-height: auto; padding: 0; display: flex; flex-direction: column; overflow: hidden; }\n  .vpk-head { position: relative; top: auto; left: auto; padding: 32px 24px 16px; max-width: 100%; pointer-events: auto; flex-shrink: 0; text-align: center; }\n  .vpk-title { font-size: clamp(28px, 8vw, 36px); margin-bottom: 12px; }\n  .vpk-lede { margin: 0 auto; font-size: 15px; }\n  .vpk-view-wrap { position: relative; inset: auto; flex-grow: 1; min-height: 400px; height: 55vh; margin-top: 0; }\n  .vpk-global-tooltip { left: 12px !important; right: 12px !important; top: auto !important; bottom: 16px !important; transform: translateY(120%) scale(.95); transform-origin: bottom center; max-width: none; width: auto; padding: 16px 20px; transition: opacity .35s cubic-bezier(.2,.9,.25,1), transform .35s cubic-bezier(.2,.9,.25,1), visibility .35s; box-shadow: 0 -4px 24px rgba(17,24,28,.15); }\n  .vpk-global-tooltip::after { display: none; }\n  .vpk-global-tooltip.is-visible { transform: translateY(0) scale(1); }\n  .vpk-leader { display: none; }\n}\n\n@media (max-width: 480px) {\n  .vpk-head { padding: 24px 16px 8px; }\n  .vpk-title { font-size: 26px; }\n  .vpk-view-wrap { min-height: 350px; }\n  .vpk-global-tooltip { padding: 16px; bottom: 12px !important; left: 12px !important; right: 12px !important; }\n  .vpk-tooltip-title { font-size: 20px; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .vpk-pin.vpk-on i::before { animation: none; }\n}\n\n<\/style>\n\n<div class=\"vpk-map\" data-vpk-map>\n  <div class=\"vpk-bg-layer\"><\/div>\n\n  <div class=\"vpk-stage\">\n\n    <div class=\"vpk-head\">\n      <h2 class=\"vpk-title\">Kaakkois-Suomesta <\/br>   koko maahan<\/h2>\n      <div class=\"vpk-lede\">\n        Thermo-, kontti- ja kappaletavarakuljetukset sek\u00e4 teollisuuden tuotekuljetukset. Kotimaan liikenne kulkee Helsingin alueen ja Kaakkois-Suomen v\u00e4lill\u00e4 &mdash; Fennoroadin osakasliikenn\u00f6itsij\u00e4n\u00e4 toimitamme l\u00e4hetykset Vuosaaren terminaalin kautta koko Suomeen.\n      <\/div>\n    <\/div>\n\n    <div class=\"vpk-view-wrap\">\n      <canvas class=\"vpk-canvas\" data-vpk-canvas><\/canvas>\n      <div class=\"vpk-pins\" data-vpk-pins><\/div>\n    <\/div>\n\n    <svg class=\"vpk-leader\" data-vpk-leader aria-hidden=\"true\">\n      <line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"0\"><\/line>\n    <\/svg>\n\n    <div class=\"vpk-global-tooltip\" data-vpk-tooltip>\n      <div class=\"vpk-tooltip-header\">\n        <span class=\"vpk-tooltip-sub\"><\/span>\n        <span class=\"vpk-tooltip-title\"><\/span>\n      <\/div>\n      <div class=\"vpk-tooltip-quote\"><\/div>\n      <div class=\"vpk-tooltip-meta\"><\/div>\n      <div class=\"vpk-tooltip-contact\"><\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n<!-- end Etusivu Kartta -->\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-6898ea3 e-con e-atomic-element e-flexbox-base e-6898ea3-b9bc422 \" data-id=\"6898ea3\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"6898ea3\">\n    <div class=\"elementor-element elementor-element-921e283 e-con e-atomic-element e-flexbox-base e-921e283-7a2113c \" data-id=\"921e283\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"921e283\">\n    \t\t<div class=\"elementor-element elementor-element-137182a elementor-widget elementor-widget-heading\" data-id=\"137182a\" 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\">Olemme<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6637815 elementor-widget elementor-widget-heading\" data-id=\"6637815\" 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\">Luotettava \nKumppani<\/h2>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-41fb195 e-con e-atomic-element e-flexbox-base e-41fb195-bbda4be \" data-id=\"41fb195\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"41fb195\">\n    \t\t<div class=\"elementor-element elementor-element-4330d30 elementor-widget elementor-widget-text-editor\" data-id=\"4330d30\" 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>Olemme luotettava kumppanisi kuljetuslogistiikassa. Meill\u00e4 yhdistyv\u00e4t paikallinen osaaminen ja valtakunnallinen Fenno Road -verkoston kattavuus. Toimintamme ytimess\u00e4 on tinkim\u00e4t\u00f6n laatu, joka n\u00e4kyy kaikkialla tekemisess\u00e4mme.Takaamme asiakkaillemme mielenrauhan ja sujuvan palvelun joka tilanteessa.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-4b52db0 e-con e-atomic-element e-flexbox-base e-4b52db0-86d15f4 \" data-id=\"4b52db0\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"4b52db0\">\n    \t\t<div class=\"elementor-element elementor-element-b26d57b elementor-widget elementor-widget-html\" data-id=\"b26d57b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\n     VP-KULJETUS OY \u2014 SERTIFIKAATIT \/ J\u00c4SENYYDET\n     Elementor Custom HTML -widget. Itsen\u00e4inen, paste-safe.\n     Neli\u00f6kortit riviss\u00e4 | mintunvihre\u00e4 tausta | pill + valkoinen logo.\n     Hover: kortti venyy ja paljastaa kuvauksen + linkin, palautuu pois.\n     CSS nimiavaruudessa .vpc26-  | Fontit: Montserrat + Roboto.\n     ============================================================ -->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@600;700&family=Roboto:wght@400;500&display=swap\" rel=\"stylesheet\">\n\n<section class=\"vpc26-root\">\n  <ul class=\"vpc26-row\">\n\n    <!-- 01 \u2014 Fenno Road -->\n    <li class=\"vpc26-slot\"><div class=\"vpc26-card\">\n      <span class=\"vpc26-pill\">Verkosto<\/span>\n      <div class=\"vpc26-logo\">\n        <img src=\"https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/image001.png\"\n             alt=\"Fenno Road\" loading=\"lazy\" decoding=\"async\">\n      <\/div>\n      <div class=\"vpc26-reveal\">\n        <div class=\"vpc26-reveal-body\">\n        <h3 class=\"vpc26-title\">Fenno Road -toimija<\/h3>\n        <p class=\"vpc26-desc\">Kuulumme valtakunnalliseen Fenno Road -verkostoon \u2014 paikallisesti tunnettujen vahvojen kuljetusliikkeiden omistama kotimainen verkosto.<\/p>\n        <a class=\"vpc26-link\" href=\"http:\/\/www.fennoroad.fi\/\" target=\"_blank\" rel=\"noopener noreferrer\">Lue lis\u00e4\u00e4<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M1 8h13M9 3l5 5-5 5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\/><\/svg><\/a>\n      <\/div>\n      <\/div>\n    <\/div><\/li>\n\n    <!-- 02 \u2014 AAA -->\n    <li class=\"vpc26-slot\"><div class=\"vpc26-card\">\n      <span class=\"vpc26-pill\">Luottoluokitus<\/span>\n      <div class=\"vpc26-logo\">\n        <img src=\"https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/AAA-logo-2018-FI.png\"\n             alt=\"AAA-luottoluokitus\" loading=\"lazy\" decoding=\"async\">\n      <\/div>\n      <div class=\"vpc26-reveal\">\n        <div class=\"vpc26-reveal-body\">\n        <h3 class=\"vpc26-title\">AAA-luottoluokitus<\/h3>\n        <p class=\"vpc26-desc\">Luokiteltu korkeimpaan luottoluokkaan AAA, joka edellytt\u00e4\u00e4 mm. erinomaisia talouden tunnuslukuja sek\u00e4 maksuk\u00e4ytt\u00e4ytymist\u00e4.<\/p>\n        <a class=\"vpc26-link\" href=\"https:\/\/www.tilaajavastuu.fi\/fi\/luotettava-kumppani\/\" target=\"_blank\" rel=\"noopener noreferrer\">Lue lis\u00e4\u00e4<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M1 8h13M9 3l5 5-5 5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\/><\/svg><\/a>\n      <\/div>\n      <\/div>\n    <\/div><\/li>\n\n    <!-- 03 \u2014 Reseni -->\n    <li class=\"vpc26-slot\"><div class=\"vpc26-card\">\n      <span class=\"vpc26-pill\">Laadunhallinta<\/span>\n      <div class=\"vpc26-logo\">\n        <img src=\"https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/34r.png\"\n             alt=\"Reseni Oy\" loading=\"lazy\" decoding=\"async\">\n      <\/div>\n      <div class=\"vpc26-reveal\">\n        <div class=\"vpc26-reveal-body\">\n        <h3 class=\"vpc26-title\">PKY-LAATU on nyt Reseni<\/h3>\n        <p class=\"vpc26-desc\">Tehostamme toimintaamme ja k\u00e4yt\u00e4mme laadunhallinnassamme Reseni-toimintaj\u00e4rjestelm\u00e4\u00e4.<\/p>\n        <a class=\"vpc26-link\" href=\"https:\/\/www.reseni.fi\/\" target=\"_blank\" rel=\"noopener noreferrer\">Lue lis\u00e4\u00e4<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M1 8h13M9 3l5 5-5 5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\/><\/svg><\/a>\n      <\/div>\n      <\/div>\n    <\/div><\/li>\n\n    <!-- 04 \u2014 Oiva -->\n    <li class=\"vpc26-slot\"><div class=\"vpc26-card\">\n      <span class=\"vpc26-pill\">Elintarvikevalvonta<\/span>\n      <div class=\"vpc26-logo\">\n        <img src=\"https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/oiva-logo.png\"\n             alt=\"Oiva\" loading=\"lazy\" decoding=\"async\">\n      <\/div>\n      <div class=\"vpc26-reveal\">\n        <div class=\"vpc26-reveal-body\">\n        <h3 class=\"vpc26-title\">Oiva-raportti<\/h3>\n        <p class=\"vpc26-desc\">Olemme saaneet valtakunnallisessa elintarvikevalvonnan Oiva-raportissa kiitett\u00e4v\u00e4n arvion.<\/p>\n        <div class=\"vpc26-linkset\">\n          <a class=\"vpc26-link\" href=\"https:\/\/www.vp-kuljetus.fi\/s\/SKM_C301i25072415210.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Terminaalitoiminta<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M1 8h13M9 3l5 5-5 5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\/><\/svg><\/a>\n          <a class=\"vpc26-link\" href=\"https:\/\/www.vp-kuljetus.fi\/s\/SKM_C301i25072415220.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Elintarvikekuljetus<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M1 8h13M9 3l5 5-5 5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\/><\/svg><\/a>\n        <\/div>\n      <\/div>\n      <\/div>\n    <\/div><\/li>\n\n    <!-- 05 \u2014 Logistiikkayritysten Liitto -->\n    <li class=\"vpc26-slot\"><div class=\"vpc26-card\">\n      <span class=\"vpc26-pill\">J\u00e4senyys<\/span>\n      <div class=\"vpc26-logo\">\n        <img src=\"https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/lig.png\"\n             alt=\"Logistiikkayritysten Liitto ry\" loading=\"lazy\" decoding=\"async\">\n      <\/div>\n      <div class=\"vpc26-reveal\">\n        <div class=\"vpc26-reveal-body\">\n        <h3 class=\"vpc26-title\">Logistiikkayritysten Liitto<\/h3>\n        <p class=\"vpc26-desc\">Liiton tavoitteina ovat kuljetus- ja kokonaislogistiikan toimintaedellytysten edist\u00e4minen sek\u00e4 alan liiketoiminnan kehitt\u00e4minen.<\/p>\n        <a class=\"vpc26-link\" href=\"http:\/\/www.logistiikkayritykset.fi\/\" target=\"_blank\" rel=\"noopener noreferrer\">Lue lis\u00e4\u00e4<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M1 8h13M9 3l5 5-5 5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\/><\/svg><\/a>\n      <\/div>\n      <\/div>\n    <\/div><\/li>\n\n    <!-- 06 \u2014 Luotettava Kumppani -->\n    <li class=\"vpc26-slot\"><div class=\"vpc26-card\">\n      <span class=\"vpc26-pill\">Tilaajavastuu<\/span>\n      <div class=\"vpc26-logo\">\n        <img src=\"https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/luotettava-kumppani-logo.png\"\n             alt=\"Luotettava Kumppani\" loading=\"lazy\" decoding=\"async\">\n      <\/div>\n      <div class=\"vpc26-reveal\">\n        <div class=\"vpc26-reveal-body\">\n        <h3 class=\"vpc26-title\">Luotettava kumppani<\/h3>\n        <p class=\"vpc26-desc\">Ohjelma noutaa tilaajavastuulain edellytt\u00e4m\u00e4t tiedot eri rekistereist\u00e4 ja pit\u00e4\u00e4 ne aina ajan tasalla.<\/p>\n        <a class=\"vpc26-link\" href=\"https:\/\/www.vastuugroup.fi\/fi-fi\/\" target=\"_blank\" rel=\"noopener noreferrer\">Lue lis\u00e4\u00e4<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M1 8h13M9 3l5 5-5 5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\/><\/svg><\/a>\n      <\/div>\n      <\/div>\n    <\/div><\/li>\n\n  <\/ul>\n<\/section>\n\n<style>\n\/* ---- Tokens ------------------------------------------------ *\/\n.vpc26-root{\n  --vpc26-mint:      #2b6b53;\n  --vpc26-mint-lo:   #1f5540;\n  --vpc26-cream:     #f4f6f3;\n  --vpc26-cream-dim: #cfe0d8;\n  --vpc26-page:      #ffffff;\n\n  --vpc26-gap:       clamp(12px, 1.4vw, 22px);\n  --vpc26-radius:    18px;\n\n  box-sizing: border-box;\n  width: 100%;\n  padding: 0;\n  background: var(--vpc26-page);\n  font-family: \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n}\n.vpc26-root *,\n.vpc26-root *::before,\n.vpc26-root *::after{ box-sizing: border-box; }\n\n\/* ---- Row --------------------------------------------------- *\/\n.vpc26-row{\n  list-style: none;\n  margin: 0;\n  padding: 10px 2px 28px;     \/* room for hover-lift + shadow *\/\n  display: grid;\n  grid-template-columns: repeat(6, minmax(0, 1fr));\n  gap: var(--vpc26-gap);\n  align-items: start;\n}\n\n\/* ---- Slot: reserves a fixed square; never resizes ---------- *\/\n.vpc26-slot{\n  position: relative;\n  aspect-ratio: 1\/1;          \/* the footprint the layout reserves *\/\n}\n\n\/* ---- Card: overlays the slot, grows on hover (no reflow) --- *\/\n.vpc26-card{\n  position: absolute;\n  inset: 0;                   \/* fills the square slot at rest *\/\n  display: flex;\n  flex-direction: column;\n  padding: 16px;\n  border-radius: var(--vpc26-radius);\n  background: var(--vpc26-mint);\n  overflow: hidden;\n  isolation: isolate;\n  transform-origin: top center;\n  transition: transform .42s cubic-bezier(.22,.61,.36,1),\n              box-shadow .42s ease,\n              background-color .42s ease,\n              height .42s cubic-bezier(.22,.61,.36,1),\n              margin-top .42s cubic-bezier(.22,.61,.36,1);\n}\n.vpc26-card::before{\n  content: \"\";\n  position: absolute; inset: 0; z-index: 0;\n  background: radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.13), transparent 60%);\n  pointer-events: none;\n}\n.vpc26-card:hover,\n.vpc26-card:focus-within{\n  \/* grow downward as an overlay: card leaves flow already (absolute),\n     so expanding its height + lifting never moves the page *\/\n  height: calc(100% + 140px); \/* extra room for the revealed text *\/\n  margin-top: -8px;           \/* the lift *\/\n  background: var(--vpc26-mint-lo);\n  box-shadow: 0 26px 46px -18px rgba(20,60,45,.6);\n  z-index: 5;\n}\n\n\/* ---- Pill (top-left tag) ---------------------------------- *\/\n.vpc26-pill{\n  position: relative; z-index: 2;\n  align-self: flex-start;\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: .06em;\n  text-transform: uppercase;\n  color: var(--vpc26-cream);\n  padding: 6px 13px;\n  border: 1px solid rgba(244,246,243,.34);\n  border-radius: 999px;\n  background: rgba(244,246,243,.06);\n  backdrop-filter: blur(4px);\n}\n\n\/* ---- Logo (large, centered, forced white) ------------------ *\/\n.vpc26-logo{\n  position: relative; z-index: 1;\n  flex: 1 1 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 12px 8px;\n  transition: transform .42s cubic-bezier(.22,.61,.36,1), flex-basis .42s ease;\n}\n.vpc26-logo img{\n  max-height: 70%;\n  max-width: 88%;\n  width: auto;\n  height: auto;\n  object-fit: contain;\n  display: block;\n  filter: brightness(0) invert(1);   \/* force pure white *\/\n}\n.vpc26-card:hover .vpc26-logo,\n.vpc26-card:focus-within .vpc26-logo{\n  transform: translateY(-4px) scale(.9);\n}\n\n\/* ---- Reveal panel: hidden by default, opens on hover ------- *\/\n.vpc26-reveal{\n  position: relative; z-index: 2;\n  display: grid;\n  grid-template-rows: 0fr;            \/* collapsed *\/\n  opacity: 0;\n  transform: translateY(8px);\n  overflow: hidden;\n  transition: grid-template-rows .42s cubic-bezier(.22,.61,.36,1),\n              opacity .32s ease,\n              transform .42s ease;\n}\n.vpc26-reveal-body{ min-height: 0; overflow: hidden; }\n.vpc26-card:hover .vpc26-reveal,\n.vpc26-card:focus-within .vpc26-reveal{\n  grid-template-rows: 1fr;\n  opacity: 1;\n  transform: none;\n}\n\n.vpc26-title{\n  margin: 0 0 8px;\n  font-family: \"Montserrat\", sans-serif;\n  font-size: clamp(14px, 1.05vw, 17px);\n  font-weight: 600;\n  line-height: 1.22;\n  letter-spacing: -.01em;\n  color: var(--vpc26-cream);\n}\n.vpc26-desc{\n  margin: 0 0 12px;\n  font-size: 12.5px;\n  line-height: 1.5;\n  color: var(--vpc26-cream-dim);\n}\n.vpc26-link,\n.vpc26-linkset{ display: flex; flex-wrap: wrap; gap: 6px 16px; }\n.vpc26-link{\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: .04em;\n  text-transform: uppercase;\n  text-decoration: none;\n  color: var(--vpc26-cream);\n  transition: opacity .2s ease;\n}\n.vpc26-link:hover{ opacity: .75; }\n.vpc26-link svg{ width: 12px; height: 12px; flex: none; transition: transform .3s cubic-bezier(.22,.61,.36,1); }\n.vpc26-link:hover svg,\n.vpc26-link:focus-visible svg{ transform: translateX(4px); }\n.vpc26-link:focus-visible{ outline: 2px solid var(--vpc26-cream); outline-offset: 3px; border-radius: 2px; }\n\n\/* ============================================================\n   RESPONSIVE LAYOUT & TOUCH BEHAVIOR \n   ============================================================ *\/\n\n\/* 1. Grid Resizing for Desktops\/Laptops *\/\n@media (max-width: 1180px){\n  .vpc26-row{ grid-template-columns: repeat(3, minmax(0, 1fr)); }\n}\n@media (max-width: 720px){\n  .vpc26-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }\n}\n\n\/* 2. Touch Devices & Smaller Screens \n      (Disables absolute positioning so content dictates card height) *\/\n@media (hover: none), (max-width: 820px) {\n  .vpc26-row { \n    gap: 16px; \n    padding-bottom: 10px; \/* Reset padding since there's no hover lift *\/\n  }\n  \n  .vpc26-slot { \n    aspect-ratio: auto; \n  }\n  \n  .vpc26-card {\n    position: relative; \n    inset: auto;\n    height: auto; \n    min-height: 100%; \/* Ensures cards stretch equally in their grid track *\/\n    margin-top: 0;\n  }\n  \n  \/* Reset hover effects for standard flow *\/\n  .vpc26-card:hover,\n  .vpc26-card:focus-within {\n    height: auto; \n    margin-top: 0;\n    box-shadow: none;\n    background: var(--vpc26-mint); \n  }\n  \n  \/* Give the logo area a predictable height since aspect-ratio is gone *\/\n  .vpc26-card .vpc26-logo { \n    transform: none !important; \n    flex: none;\n    padding: 24px 8px;\n    height: 120px; \n  }\n  \n  \/* Permanently reveal content *\/\n  .vpc26-reveal { \n    grid-template-rows: 1fr; \n    opacity: 1; \n    transform: none; \n    margin-top: auto; \/* Pushes content down if card is taller *\/\n  }\n  \n  .vpc26-title {\n    font-size: 16px; \/* Override clamp for a solid readable size *\/\n  }\n}\n\n\/* 3. Single Column for Mobile Phones *\/\n@media (max-width: 480px){\n  .vpc26-row{ grid-template-columns: 1fr; gap: 14px; }\n  .vpc26-card .vpc26-logo { height: 140px; } \/* Slightly larger logo room on mobile *\/\n}\n\n\/* ---- A11y -------------------------------------------------- *\/\n@media (prefers-reduced-motion: reduce){\n  .vpc26-root *{ transition-duration: .01ms !important; animation-duration: .01ms !important; }\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/div>\n<div class=\"elementor-element elementor-element-f338848 e-con e-atomic-element e-flexbox-base e-521811d \" data-id=\"f338848\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"f338848\" id=\"YHT\">\n    \t\t<div class=\"elementor-element elementor-element-8d4ef93 elementor-widget elementor-widget-html\" data-id=\"8d4ef93\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Load Fonts -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700&family=Roboto:wght@300;400;500&display=swap\" rel=\"stylesheet\">\n\n<style>\n    \/* Base Variables and Reset *\/\n    :root {\n        --bg-color: #ffffff;\n        --accent-color: #2F6B52;\n        --text-main: #333333;\n        --text-muted: #666666;\n        --input-bg: #fafafa;\n        --input-border: #e0e6e3;\n        --input-focus-shadow: rgba(47, 107, 82, 0.15);\n        --font-heading: 'Montserrat', sans-serif;\n        --font-body: 'Roboto', sans-serif;\n    }\n\n    .custom-widget-container {\n        display: flex;\n        flex-wrap: wrap;\n        width: 100%;\n        max-width: 1400px;\n        margin: 0 auto;\n        background-color: var(--bg-color);\n        border-radius: 24px;\n        overflow: hidden;\n        box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.1);\n        font-family: var(--font-body);\n        min-height: 800px;\n    }\n\n    \/* Left Side: Form Area *\/\n    .form-panel {\n        flex: 1 1 50%;\n        padding: 60px 40px 60px 60px;\n        display: flex;\n        flex-direction: column;\n        max-height: 800px; \n        position: relative;\n    }\n\n    \/* Header Area (Pinned Top) *\/\n    .form-header-area {\n        padding-right: 26px; \n        flex-shrink: 0;\n    }\n\n    \/* Internal Scrolling for the Form *\/\n    .form-scroll-area {\n        overflow-y: auto;\n        padding-right: 20px;\n        flex-grow: 1;\n        margin-top: 10px;\n    }\n\n    \/* Premium Custom Scrollbar *\/\n    .form-scroll-area::-webkit-scrollbar {\n        width: 6px;\n    }\n    .form-scroll-area::-webkit-scrollbar-track {\n        background: #f1f1f1;\n        border-radius: 10px;\n        margin-top: 5px;\n        margin-bottom: 5px;\n    }\n    .form-scroll-area::-webkit-scrollbar-thumb {\n        background: #c5d4cd;\n        border-radius: 10px;\n    }\n    .form-scroll-area::-webkit-scrollbar-thumb:hover {\n        background: var(--accent-color);\n    }\n\n    \/* Right Side: Image & Quote *\/\n    .image-panel {\n        flex: 1 1 50%;\n        position: relative;\n        background-image: url('https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/20230820_225359.webp');\n        background-size: cover;\n        background-position: center;\n        min-height: 400px;\n    }\n\n    .image-overlay {\n        position: absolute;\n        top: 0; left: 0; right: 0; bottom: 0;\n        background: linear-gradient(to top, rgba(47, 107, 82, 0.95) 0%, rgba(47, 107, 82, 0.2) 100%);\n        display: flex;\n        align-items: flex-end;\n        padding: 60px;\n    }\n\n    .quote-box {\n        font-family: var(--font-heading);\n        color: #ffffff;\n    }\n\n    .quote-text {\n        font-size: 1.6rem;\n        font-weight: 600;\n        line-height: 1.4;\n        margin-bottom: 20px;\n    }\n\n    .quote-author {\n        font-family: var(--font-body);\n        font-size: 1.05rem;\n        font-weight: 400;\n        opacity: 0.9;\n        letter-spacing: 0.5px;\n    }\n\n    \/* Form Elements Styling *\/\n    .form-header-area h2 {\n        color: var(--accent-color);\n        font-family: var(--font-heading);\n        font-size: 2.5rem;\n        margin-top: 0;\n        margin-bottom: 35px;\n        font-weight: 700;\n        letter-spacing: -0.5px;\n    }\n\n    .form-group {\n        margin-bottom: 25px;\n    }\n\n    .form-group.grid-2 {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 20px;\n    }\n\n    .form-panel label {\n        display: block;\n        color: var(--accent-color);\n        font-family: var(--font-heading);\n        font-size: 0.85rem;\n        font-weight: 600;\n        margin-bottom: 10px;\n        letter-spacing: 0.5px;\n        text-transform: uppercase;\n    }\n\n    .form-panel input[type=\"text\"],\n    .form-panel input[type=\"email\"],\n    .form-panel input[type=\"tel\"],\n    .form-panel select,\n    .form-panel textarea {\n        width: 100%;\n        padding: 16px;\n        background: var(--input-bg);\n        border: 1.5px solid var(--input-border);\n        border-radius: 10px;\n        color: var(--text-main);\n        font-family: var(--font-body);\n        font-size: 1rem;\n        transition: all 0.3s ease;\n        box-sizing: border-box;\n    }\n\n    .form-panel input::placeholder,\n    .form-panel textarea::placeholder {\n        color: #a0aab2;\n    }\n\n    .form-panel input:focus, \n    .form-panel select:focus, \n    .form-panel textarea:focus {\n        outline: none;\n        border-color: var(--accent-color);\n        background: #ffffff;\n        box-shadow: 0 0 0 4px var(--input-focus-shadow);\n    }\n\n    .form-panel textarea {\n        resize: vertical;\n        min-height: 140px;\n    }\n\n    \/* Checkbox Groups *\/\n    .checkbox-title {\n        color: var(--accent-color);\n        font-family: var(--font-heading);\n        font-weight: 700;\n        font-size: 1.2rem;\n        margin-bottom: 15px;\n        display: block;\n        border-bottom: 2px solid var(--input-border);\n        padding-bottom: 10px;\n        margin-top: 35px;\n    }\n\n    .checkbox-grid {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 15px;\n        margin-bottom: 25px;\n    }\n\n    \/* Action Buttons *\/\n    .submit-btn {\n        background-color: #c7eb98;\n        color: #2F6B52;\n        border: none;\n        padding: 20px 40px;\n        font-family: var(--font-heading);\n        font-size: 1.05rem;\n        font-weight: 600;\n        border-radius: 10px;\n        cursor: pointer;\n        transition: all 0.3s ease;\n        margin-top: 20px;\n        margin-bottom: 20px;\n        width: 100%;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        box-shadow: 0 10px 20px rgba(47, 107, 82, 0.2);\n    }\n\n    .submit-btn:hover {\n        background-color: #235440;\n        color: #ffffff;\n        transform: translateY(-2px);\n        box-shadow: 0 15px 25px rgba(47, 107, 82, 0.3);\n    }\n\n    \/* Section Toggling *\/\n    .form-section {\n        display: none;\n        animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n    }\n\n    @keyframes fadeIn {\n        from { opacity: 0; transform: translateY(15px); }\n        to { opacity: 1; transform: translateY(0); }\n    }\n\n    \/* Success Screen View *\/\n    .form-success-screen {\n        display: none;\n        height: 100%;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        text-align: center;\n        padding: 40px 20px;\n        animation: fadeIn 0.4s ease;\n    }\n\n    .form-success-screen.active {\n        display: flex;\n    }\n\n    .success-icon-badge {\n        width: 84px;\n        height: 84px;\n        border-radius: 50%;\n        background-color: #e9f7ea;\n        color: var(--accent-color);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        margin-bottom: 25px;\n        box-shadow: 0 8px 20px rgba(47, 107, 82, 0.12);\n    }\n\n    .success-icon-badge svg {\n        width: 44px;\n        height: 44px;\n        stroke: var(--accent-color);\n    }\n\n    .form-success-screen h3 {\n        font-family: var(--font-heading);\n        font-size: 2.2rem;\n        color: var(--accent-color);\n        margin: 0 0 15px 0;\n        font-weight: 700;\n        letter-spacing: -0.5px;\n    }\n\n    .form-success-screen p {\n        font-size: 1.1rem;\n        line-height: 1.6;\n        color: var(--text-muted);\n        max-width: 440px;\n        margin: 0 auto 35px auto;\n    }\n\n    .reset-btn {\n        background-color: #c7eb98;\n        color: #2F6B52;\n        border: none;\n        padding: 16px 36px;\n        font-family: var(--font-heading);\n        font-size: 1rem;\n        font-weight: 600;\n        border-radius: 10px;\n        cursor: pointer;\n        transition: all 0.3s ease;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n        box-shadow: 0 8px 18px rgba(47, 107, 82, 0.15);\n    }\n\n    .reset-btn:hover {\n        background-color: #235440;\n        color: #ffffff;\n        transform: translateY(-2px);\n    }\n\n    \/* Contact Form 7 Adaptations *\/\n    .form-panel .wpcf7-form-control-wrap {\n        display: block;\n        width: 100%;\n    }\n\n    .form-panel .checkbox-grid .wpcf7-list-item {\n        margin: 0;\n        display: block;\n    }\n\n    .form-panel .checkbox-grid label {\n        display: flex;\n        align-items: center;\n        font-size: 0.95rem;\n        color: var(--text-main);\n        font-weight: 400;\n        text-transform: none;\n        cursor: pointer;\n        margin-bottom: 0;\n    }\n\n    .form-panel .checkbox-grid input[type=\"checkbox\"] {\n        margin-right: 12px;\n        accent-color: var(--accent-color);\n        width: 18px;\n        height: 18px;\n        cursor: pointer;\n    }\n\n    .form-panel .wpcf7-not-valid-tip {\n        color: #d93025;\n        font-size: 0.82rem;\n        margin-top: 6px;\n        font-weight: 500;\n    }\n\n    \/* Hide standard inline CF7 green success box since custom screen handles it *\/\n    .form-panel .wpcf7-mail-sent-ok {\n        display: none !important;\n    }\n\n    .form-panel .wpcf7-spinner {\n        display: block;\n        margin: 10px auto;\n    }\n\n    \/* Responsive Adjustments *\/\n    @media (max-width: 992px) {\n        .custom-widget-container {\n            border-radius: 16px;\n            flex-direction: column-reverse;\n            min-height: auto;\n        }\n        .form-panel, .image-panel {\n            flex: 1 1 100%;\n        }\n        .form-panel {\n            padding: 40px 30px;\n            max-height: none;\n        }\n        .image-panel {\n            min-height: 350px;\n            padding-bottom: 0; \n        }\n        .form-header-area {\n            padding-right: 0; \n        }\n        .form-scroll-area {\n            padding-right: 0;\n            overflow-y: visible;\n        }\n        .form-group.grid-2 {\n            grid-template-columns: 1fr;\n            gap: 15px;\n        }\n        .checkbox-grid {\n            grid-template-columns: 1fr;\n        }\n    }\n\n    @media (max-width: 576px) {\n        .custom-widget-container {\n            border-radius: 12px;\n        }\n        .form-panel {\n            padding: 30px 20px;\n        }\n        .image-overlay {\n            padding: 40px 25px;\n        }\n        .form-header-area h2 {\n            font-size: 1.8rem;\n            margin-bottom: 25px;\n        }\n        .form-success-screen h3 {\n            font-size: 1.7rem;\n        }\n        .quote-text {\n            font-size: 1.25rem;\n            margin-bottom: 15px;\n        }\n        .quote-author {\n            font-size: 0.95rem;\n        }\n        .form-panel input[type=\"text\"],\n        .form-panel input[type=\"email\"],\n        .form-panel input[type=\"tel\"],\n        .form-panel select,\n        .form-panel textarea {\n            padding: 14px;\n        }\n        .submit-btn {\n            padding: 16px 20px;\n            font-size: 1rem;\n        }\n        .checkbox-title {\n            font-size: 1.1rem;\n            margin-top: 25px;\n        }\n    }\n<\/style>\n\n<div id=\"YHT\" class=\"custom-widget-container\">\n    \n    <!-- Left Panel: Form Section -->\n    <div class=\"form-panel\">\n        \n        <!-- Pinned Header Area -->\n        <div id=\"form-header\" class=\"form-header-area\">\n            <h2>Miten voimme auttaa?<\/h2>\n            <div class=\"form-group\">\n                <label for=\"topic-selector\">Valitse aihe *<\/label>\n                <select id=\"topic-selector\">\n                    <option value=\"yhteydenotto\">Yhteydenotto<\/option>\n                    <option value=\"avoin_hakemus\">Avoin hakemus<\/option>\n                    <option value=\"tarjouspyynto\">Tarjouspyynt\u00f6<\/option>\n                <\/select>\n            <\/div>\n        <\/div>\n\n        <!-- Scrollable Form Panes -->\n        <div id=\"form-scroll\" class=\"form-scroll-area\">\n            <div id=\"yhteydenotto\" class=\"form-section\">\n                \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f1128-o1\" lang=\"fi\" dir=\"ltr\" data-wpcf7-id=\"1128\">\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%2F6#wpcf7-f1128-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=\"1128\" \/><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-f1128-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/fieldset>\n<div class=\"form-group\">\n\t<p><label>Nimi *<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"80\" minlength=\"2\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Kirjoita nimesi\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span>\n\t<\/p>\n<\/div>\n<div class=\"form-group\">\n\t<p><label>Aihe *<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-subject\"><input size=\"40\" maxlength=\"100\" minlength=\"2\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Viestin aihe\" value=\"\" type=\"text\" name=\"your-subject\" \/><\/span>\n\t<\/p>\n<\/div>\n<div class=\"form-group\">\n\t<p><label>S\u00e4hk\u00f6posti *<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"100\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"S\u00e4hk\u00f6postiosoite\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span>\n\t<\/p>\n<\/div>\n<div class=\"form-group\">\n\t<p><label>Viesti *<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Kirjoita viestisi t\u00e4h\u00e4n...\" name=\"your-message\"><\/textarea><\/span>\n\t<\/p>\n<\/div>\n<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner submit-btn\" type=\"submit\" value=\"L\u00e4het\u00e4\" \/>\n<\/p><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\n            <\/div>\n\n            <div id=\"avoin_hakemus\" class=\"form-section\">\n                \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f1129-o2\" lang=\"fi\" dir=\"ltr\" data-wpcf7-id=\"1129\">\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%2F6#wpcf7-f1129-o2\" 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=\"1129\" \/><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-f1129-o2\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/fieldset>\n<p><span class=\"checkbox-title\">Henkil\u00f6tiedot<\/span>\n<\/p>\n<div class=\"form-group grid-2\">\n\t<div>\n\t\t<p><label>Nimi *<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"applicant-name\"><input size=\"40\" maxlength=\"80\" minlength=\"2\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Etunimi ja sukunimi\" value=\"\" type=\"text\" name=\"applicant-name\" \/><\/span>\n\t\t<\/p>\n\t<\/div>\n\t<div>\n\t\t<p><label>Puhelin *<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"applicant-phone\"><input size=\"40\" maxlength=\"20\" minlength=\"6\" class=\"wpcf7-form-control wpcf7-tel wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-tel\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"+358...\" value=\"\" type=\"tel\" name=\"applicant-phone\" \/><\/span>\n\t\t<\/p>\n\t<\/div>\n<\/div>\n<div class=\"form-group\">\n\t<p><label>S\u00e4hk\u00f6posti *<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"applicant-email\"><input size=\"40\" maxlength=\"100\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"esimerkki@domain.fi\" value=\"\" type=\"email\" name=\"applicant-email\" \/><\/span>\n\t<\/p>\n<\/div>\n<div class=\"form-group\">\n\t<p><label>Katuosoite<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"applicant-address\"><input size=\"40\" maxlength=\"120\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"applicant-address\" \/><\/span>\n\t<\/p>\n<\/div>\n<div class=\"form-group grid-2\">\n\t<div>\n\t\t<p><label>Postinumero<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"applicant-zipcode\"><input size=\"40\" maxlength=\"10\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"applicant-zipcode\" \/><\/span>\n\t\t<\/p>\n\t<\/div>\n\t<div>\n\t\t<p><label>Postitoimipaikka<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"applicant-city\"><input size=\"40\" maxlength=\"60\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"applicant-city\" \/><\/span>\n\t\t<\/p>\n\t<\/div>\n<\/div>\n<p><span class=\"checkbox-title\">Koulutus ja Kokemus<\/span>\n<\/p>\n<div class=\"form-group\">\n\t<p><label>Koulutus *<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"applicant-education\"><textarea cols=\"40\" rows=\"10\" maxlength=\"3000\" class=\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Oppilaitos, tutkinto, opintolinja\/p\u00e4\u00e4aine, aloitus- ja lopetusajankohta\" name=\"applicant-education\"><\/textarea><\/span>\n\t<\/p>\n<\/div>\n<div class=\"form-group\">\n\t<p><label>Ty\u00f6kokemus *<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"applicant-experience\"><textarea cols=\"40\" rows=\"10\" maxlength=\"3000\" class=\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Ty\u00f6nantaja, ty\u00f6teht\u00e4v\u00e4, ty\u00f6n alkamis- ja p\u00e4\u00e4ttymisajankohta\" name=\"applicant-experience\"><\/textarea><\/span>\n\t<\/p>\n<\/div>\n<p><span class=\"checkbox-title\">Teht\u00e4v\u00e4<\/span><br \/>\n<label>Ty\u00f6teht\u00e4v\u00e4t *<\/label>\n<\/p>\n<div class=\"checkbox-grid\">\n\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"applicant-roles\"><span class=\"wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required\"><span class=\"wpcf7-list-item first\"><label><input type=\"checkbox\" name=\"applicant-roles[]\" value=\"Jakeluautonkuljettaja\" \/><span class=\"wpcf7-list-item-label\">Jakeluautonkuljettaja<\/span><\/label><\/span><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"applicant-roles[]\" value=\"Yhdistelm\u00e4ajoneuvonkuljettaja\" \/><span class=\"wpcf7-list-item-label\">Yhdistelm\u00e4ajoneuvonkuljettaja<\/span><\/label><\/span><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"applicant-roles[]\" value=\"Terminaali-\/varastoty\u00f6ntekij\u00e4\" \/><span class=\"wpcf7-list-item-label\">Terminaali-\/varastoty\u00f6ntekij\u00e4<\/span><\/label><\/span><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"applicant-roles[]\" value=\"Toimistoty\u00f6ntekij\u00e4\" \/><span class=\"wpcf7-list-item-label\">Toimistoty\u00f6ntekij\u00e4<\/span><\/label><\/span><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"applicant-roles[]\" value=\"Raskaan kaluston asentaja\" \/><span class=\"wpcf7-list-item-label\">Raskaan kaluston asentaja<\/span><\/label><\/span><span class=\"wpcf7-list-item last\"><label><input type=\"checkbox\" name=\"applicant-roles[]\" value=\"Muu\" \/><span class=\"wpcf7-list-item-label\">Muu<\/span><\/label><\/span><\/span><\/span>\n\t<\/p>\n<\/div>\n<p><label>Ty\u00f6suhde *<\/label>\n<\/p>\n<div class=\"checkbox-grid\">\n\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"applicant-type\"><span class=\"wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required\"><span class=\"wpcf7-list-item first\"><label><input type=\"checkbox\" name=\"applicant-type[]\" value=\"Vakinainen\" \/><span class=\"wpcf7-list-item-label\">Vakinainen<\/span><\/label><\/span><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"applicant-type[]\" value=\"M\u00e4\u00e4r\u00e4aikainen\" \/><span class=\"wpcf7-list-item-label\">M\u00e4\u00e4r\u00e4aikainen<\/span><\/label><\/span><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"applicant-type[]\" value=\"Osa-aikainen\" \/><span class=\"wpcf7-list-item-label\">Osa-aikainen<\/span><\/label><\/span><span class=\"wpcf7-list-item last\"><label><input type=\"checkbox\" name=\"applicant-type[]\" value=\"Kes\u00e4ty\u00f6\" \/><span class=\"wpcf7-list-item-label\">Kes\u00e4ty\u00f6<\/span><\/label><\/span><\/span><\/span>\n\t<\/p>\n<\/div>\n<div class=\"form-group\">\n\t<p><label>Lis\u00e4tiedot<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"applicant-notes\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" placeholder=\"Vapaamuotoinen teksti...\" name=\"applicant-notes\"><\/textarea><\/span>\n\t<\/p>\n<\/div>\n<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner submit-btn\" type=\"submit\" value=\"L\u00e4het\u00e4 hakemus\" \/>\n<\/p><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\n            <\/div>\n\n            <div id=\"tarjouspyynto\" class=\"form-section\">\n                \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f1130-o3\" lang=\"fi\" dir=\"ltr\" data-wpcf7-id=\"1130\">\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%2F6#wpcf7-f1130-o3\" 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=\"1130\" \/><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-f1130-o3\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/fieldset>\n<div class=\"form-group grid-2\">\n\t<div>\n\t\t<p><label>Nimi *<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"quote-name\"><input size=\"40\" maxlength=\"80\" minlength=\"2\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"quote-name\" \/><\/span>\n\t\t<\/p>\n\t<\/div>\n\t<div>\n\t\t<p><label>Yritys \/ Y-Tunnus<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"quote-company\"><input size=\"40\" maxlength=\"100\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"quote-company\" \/><\/span>\n\t\t<\/p>\n\t<\/div>\n<\/div>\n<div class=\"form-group grid-2\">\n\t<div>\n\t\t<p><label>S\u00e4hk\u00f6posti *<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"quote-email\"><input size=\"40\" maxlength=\"100\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"email\" name=\"quote-email\" \/><\/span>\n\t\t<\/p>\n\t<\/div>\n\t<div>\n\t\t<p><label>Puhelin *<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"quote-phone\"><input size=\"40\" maxlength=\"20\" minlength=\"6\" class=\"wpcf7-form-control wpcf7-tel wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-tel\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"tel\" name=\"quote-phone\" \/><\/span>\n\t\t<\/p>\n\t<\/div>\n<\/div>\n<div class=\"form-group grid-2\">\n\t<div>\n\t\t<p><label>L\u00e4ht\u00f6paikka *<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"quote-origin\"><input size=\"40\" maxlength=\"120\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"quote-origin\" \/><\/span>\n\t\t<\/p>\n\t<\/div>\n\t<div>\n\t\t<p><label>M\u00e4\u00e4r\u00e4paikka *<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"quote-destination\"><input size=\"40\" maxlength=\"120\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"quote-destination\" \/><\/span>\n\t\t<\/p>\n\t<\/div>\n<\/div>\n<div class=\"form-group\">\n\t<p><label>Ajankohta<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"quote-date\"><input size=\"40\" maxlength=\"80\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Milloin kuljetus tarvitaan?\" value=\"\" type=\"text\" name=\"quote-date\" \/><\/span>\n\t<\/p>\n<\/div>\n<div class=\"form-group\">\n\t<p><label>Laskutustiedot<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"quote-billing\"><textarea cols=\"40\" rows=\"10\" maxlength=\"1000\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" placeholder=\"Anna laskutusosoite ja viitteet\" name=\"quote-billing\"><\/textarea><\/span>\n\t<\/p>\n<\/div>\n<div class=\"form-group\">\n\t<p><label>Vapaamuotoinen viesti<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"quote-message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"3000\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" placeholder=\"Kuvaile tarvittavaa palvelua tarkemmin...\" name=\"quote-message\"><\/textarea><\/span>\n\t<\/p>\n<\/div>\n<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner submit-btn\" type=\"submit\" value=\"L\u00e4het\u00e4 tarjouspyynt\u00f6\" \/>\n<\/p><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\n            <\/div>\n        <\/div>\n\n        <!-- Dedicated Sent Confirmation View -->\n        <div id=\"form-success\" class=\"form-success-screen\">\n            <div class=\"success-icon-badge\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <polyline points=\"20 6 9 17 4 12\"><\/polyline>\n                <\/svg>\n            <\/div>\n            <h3 id=\"success-title\">Lomake l\u00e4hetetty!<\/h3>\n            <p>Kiitos yhteydenotostasi. Olemme vastaanottaneet tiedot ja palaamme asiaan pikimmiten.<\/p>\n            <button type=\"button\" id=\"btn-reset-sent\" class=\"reset-btn\">L\u00e4het\u00e4 uusi viesti<\/button>\n        <\/div>\n\n    <\/div>\n\n    <!-- Right Panel: Image & Quote -->\n    <div class=\"image-panel\">\n        <div class=\"image-overlay\">\n            <div class=\"quote-box\">\n                <div class=\"quote-text\">\n                    \u201cVisiomme on olla Kaakkois-Suomen monipuolisin, luotettavin ja toiminnaltaan kannattava kuljetus- ja terminaalipalveluiden tuottaja.\u201d\n                <\/div>\n                <div class=\"quote-author\">- Arto Piiparinen<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n<\/div>\n\n<script>\n    const dropdown = document.getElementById('topic-selector');\n    const sections = document.querySelectorAll('.form-section');\n    const headerArea = document.getElementById('form-header');\n    const scrollArea = document.getElementById('form-scroll');\n    const successScreen = document.getElementById('form-success');\n    const successTitle = document.getElementById('success-title');\n    const resetSentBtn = document.getElementById('btn-reset-sent');\n\n    const formNames = {\n        '4eba1a6': 'Yhteydenotto',\n        'f7ff4e2': 'Avoin hakemus',\n        '06cf670': 'Tarjouspyynt\u00f6'\n    };\n\n    const toggleFormSections = () => {\n        sections.forEach(section => {\n            section.style.display = 'none';\n        });\n        \n        const activeId = dropdown.value;\n        const targetSection = document.getElementById(activeId);\n        \n        if (targetSection) {\n            targetSection.style.display = 'block';\n        }\n    };\n\n    const updateFormFromHash = (hashString) => {\n        if (!hashString) return;\n        \n        let matched = false;\n        \n        if (hashString.includes('avoin_hakemus')) {\n            dropdown.value = 'avoin_hakemus';\n            matched = true;\n        } else if (hashString.includes('tarjouspyynto')) {\n            dropdown.value = 'tarjouspyynto';\n            matched = true;\n        } else if (hashString.includes('yhteydenotto') || hashString.endsWith('#YHT')) {\n            dropdown.value = 'yhteydenotto';\n            matched = true;\n        }\n\n        if (matched) {\n            toggleFormSections();\n            \n            const formContainer = document.getElementById('YHT');\n            if (formContainer) {\n                setTimeout(() => {\n                    const y = formContainer.getBoundingClientRect().top + window.scrollY - 100;\n                    window.scrollTo({ top: y, behavior: 'smooth' });\n                }, 50);\n            }\n        }\n    };\n\n    toggleFormSections();\n    updateFormFromHash(window.location.hash);\n\n    dropdown.addEventListener('change', toggleFormSections);\n\n    window.addEventListener('hashchange', () => {\n        updateFormFromHash(window.location.hash);\n    });\n\n    document.addEventListener('click', (e) => {\n        const link = e.target.closest('a');\n        if (!link) return;\n\n        const href = link.getAttribute('href') || '';\n        \n        if (href.includes('#YHT') && document.getElementById('YHT')) {\n            updateFormFromHash(href);\n        }\n    });\n\n    \/\/ Contact Form 7 Mail Sent Listener\n    document.addEventListener('wpcf7mailsent', (event) => {\n        const unitTag = event.detail.unitTag || '';\n        let sentName = 'Lomake';\n\n        Object.keys(formNames).forEach(id => {\n            if (unitTag.includes(id)) {\n                sentName = formNames[id];\n            }\n        });\n\n        successTitle.textContent = `${sentName} l\u00e4hetetty!`;\n        headerArea.style.display = 'none';\n        scrollArea.style.display = 'none';\n        successScreen.classList.add('active');\n    });\n\n    \/\/ Reset and Return to Form View\n    resetSentBtn.addEventListener('click', () => {\n        document.querySelectorAll('.wpcf7 form').forEach(formElement => {\n            formElement.reset();\n            formElement.querySelectorAll('.wpcf7-not-valid-tip').forEach(tip => tip.remove());\n        });\n\n        successScreen.classList.remove('active');\n        headerArea.style.display = 'block';\n        scrollArea.style.display = 'block';\n        toggleFormSections();\n    });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-68dab2a elementor-widget elementor-widget-ucaddon_etusivu_laskutus\" data-id=\"68dab2a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ucaddon_etusivu_laskutus.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<!-- start Etusivu-Laskutus -->\n<style>\/* widget: Etusivu-Laskutus *\/\n\n:root {\n    --bg-color: #ffffff;\n    --accent-color: #2F6B52;\n    --text-main: #333333;\n    --text-muted: #666666;\n    --input-border: #e0e6e3;\n    --font-heading: 'Montserrat', sans-serif;\n    --font-body: 'Roboto', sans-serif;\n}\n\n.billing-container {\n    width: 100%;\n    max-width: 1400px;\n    margin: 30px auto 0;\n    background-color: var(--bg-color);\n    border-radius: 24px;\n    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.1);\n    padding: 40px 60px;\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n    gap: 30px;\n    box-sizing: border-box;\n    font-family: var(--font-body);\n}\n\n.billing-col h4 {\n    color: var(--accent-color);\n    font-family: var(--font-heading);\n    font-size: 1.1rem;\n    font-weight: 700;\n    margin-bottom: 15px;\n    margin-top: 0;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    border-bottom: 2px solid var(--input-border);\n    padding-bottom: 10px;\n}\n\n.billing-col p {\n    color: var(--text-muted);\n    font-size: 1rem;\n    line-height: 1.8;\n    margin: 0;\n}\n\n.billing-col p strong {\n    color: var(--text-main);\n    font-weight: 600;\n    display: block;\n    margin-bottom: 5px;\n}\n\n.billing-col a {\n    color: var(--accent-color);\n    text-decoration: none;\n    font-weight: 600;\n    transition: opacity 0.3s ease;\n}\n\n.billing-col a:hover {\n    opacity: 0.7;\n    text-decoration: underline;\n}\n\n@media (max-width: 992px) {\n    .billing-container {\n        border-radius: 16px;\n        padding: 40px 30px;\n    }\n}\n\n@media (max-width: 576px) {\n    .billing-container {\n        border-radius: 12px;\n        padding: 30px 20px;\n        gap: 25px;\n        margin-top: 20px;\n    }\n}\n\n<\/style>\n\n<div class=\"billing-container\">\n    <div class=\"billing-col\">\n        <h4>Verkkolasku<\/h4>\n        <p>\n            <strong>VP-Kuljetus Oy<\/strong>\n            Y-tunnus: 0872637-5<br>\n            Verkkolaskuosoite: 003708726375<br>\n            Operaattori: Maventa (003721291126)\n        <\/p>\n    <\/div>\n    <div class=\"billing-col\">\n        <h4>Paperilasku<\/h4>\n        <p>\n            <strong>VP-Kuljetus Oy<\/strong>\n            08726375<br>\n            PL 100<br>\n            80020 Kollektor Scan\n        <\/p>\n    <\/div>\n    <div class=\"billing-col\">\n        <h4>Laskut s\u00e4hk\u00f6postilla<\/h4>\n        <p><a href=\"mailto:invoice-08726375@kollektor.fi\">invoice-08726375@kollektor.fi<\/a><\/p>\n    <\/div>\n<\/div>\n<!-- end Etusivu-Laskutus -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-e82834c e-flex e-con-boxed e-con e-parent\" data-id=\"e82834c\" 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-539e126 elementor-widget elementor-widget-ucaddon_etusivu_footer\" data-id=\"539e126\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ucaddon_etusivu_footer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<!-- start Etusivu Footer -->\n<style>\/* widget: Etusivu Footer *\/\n\n.custom-elementor-footer {\n  font-family: inherit;\n  width: 100%;\n  padding: 60px 0 0 0; \n  box-sizing: border-box;\n  background-color: transparent; \n  overflow: hidden; \n}\n\n.footer-container {\n  max-width: 1400px;\n  margin: 0 auto;\n  padding: 0 20px;\n}\n\n\/* --- Animation Classes --- *\/\n.fade-up-element {\n  opacity: 0;\n  transform: translateY(25px);\n  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), \n              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n.fade-up-element.is-visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.delay-100 { transition-delay: 0.1s; }\n.delay-200 { transition-delay: 0.2s; }\n.delay-300 { transition-delay: 0.3s; }\n\n\/* --- Top CTA Box --- *\/\n.footer-cta-box {\n  background-color: #2F6B52;\n  border-radius: 14px;\n  padding: 48px 56px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 40px;\n  margin-bottom: 60px; \n  box-shadow: 0 16px 35px rgba(15, 59, 53, 0.07);\n}\n\n.cta-content {\n  max-width: 50%;\n}\n\n.cta-content h2 {\n  color: #ffffff;\n  font-size: 32px;\n  font-weight: 600;\n  margin: 0 0 12px 0;\n  line-height: 1.2;\n  letter-spacing: -0.4px;\n}\n\n.cta-content p {\n  color: #8fa8a4;\n  font-size: 15px;\n  margin: 0 0 24px 0;\n  line-height: 1.6;\n}\n\n.cta-button {\n  display: inline-block;\n  background-color: #c7eb98;\n  color: #0f3b35;\n  text-decoration: none;\n  border-radius: 8px;\n  padding: 13px 28px;\n  font-weight: 600;\n  font-size: 14px;\n  transition: transform 0.2s ease, background-color 0.2s ease;\n}\n\n.cta-button:hover {\n  transform: translateY(-2px);\n  background-color: #d4f0b3;\n}\n\n\/* --- Quick Contact Block --- *\/\n.cta-quick-contact {\n  display: flex;\n  align-items: center;\n  gap: 18px;\n  background: rgba(255, 255, 255, 0.05);\n  padding: 22px 28px;\n  border-radius: 14px;\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  backdrop-filter: blur(10px);\n  transition: transform 0.3s ease, background 0.3s ease;\n}\n\n.cta-quick-contact:hover {\n  transform: translateY(-3px);\n  background: rgba(255, 255, 255, 0.08);\n}\n\n.cta-quick-contact svg {\n  width: 32px;\n  height: 32px;\n  color: #c7eb98;\n  flex-shrink: 0;\n}\n\n.contact-text-group {\n  display: flex;\n  flex-direction: column;\n}\n\n.contact-title {\n  color: #8fa8a4;\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.1em;\n  font-weight: 600;\n  margin-bottom: 3px;\n}\n\n.contact-number {\n  color: #ffffff;\n  font-size: 24px;\n  font-weight: 700;\n  letter-spacing: -0.5px;\n  text-decoration: none;\n}\n\n\/* --- MAIN LAYOUT --- *\/\n.single-layout {\n  max-width: 500px;\n  margin: 0 auto 60px 0; \n}\n\n\/* --- Left Side: Boxed Brand & Links Card --- *\/\n.brand-card {\n  background: #f8fafc;\n  border: 1px solid #e2e8f0;\n  border-radius: 14px;\n  padding: 36px;\n  display: flex;\n  flex-direction: column;\n  gap: 32px;\n  transition: all 0.3s ease;\n}\n\n.brand-card:hover {\n  border-color: #cbd5e0;\n  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.02);\n}\n\n.brand-identity h3 {\n  font-size: 24px;\n  font-weight: 800;\n  color: #1a202c;\n  margin: 0 0 10px 0;\n  letter-spacing: -0.4px;\n}\n\n.brand-identity p {\n  color: #718096;\n  font-size: 14px;\n  line-height: 1.6;\n  margin: 0;\n}\n\n.links-cluster {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 20px;\n  border-top: 1px solid #e2e8f0;\n  padding-top: 24px;\n}\n\n.nav-col h4 {\n  color: #1a202c;\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  font-weight: 700;\n  margin: 0 0 12px 0;\n}\n\n.nav-col ul {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.nav-col ul li a {\n  color: #718096;\n  text-decoration: none;\n  font-size: 14px;\n  transition: color 0.2s ease;\n  display: inline-block;\n}\n\n.nav-col ul li a:hover {\n  color: #2F6B52;\n}\n\n\/* --- Maker's Note Bottom Bar --- *\/\n.footer-bottom {\n  border-top: 1px solid #e2e8f0;\n  padding: 24px 0;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.footer-bottom p {\n  margin: 0;\n  color: #a0aec0;\n  font-size: 13px;\n}\n\n.footer-bottom a {\n  color: #718096;\n  text-decoration: none;\n  font-weight: 600;\n  transition: color 0.2s ease;\n}\n\n.footer-bottom a:hover {\n  color: #1a202c;\n}\n\n\/* --- Responsive Enhancements --- *\/\n@media (max-width: 1024px) {\n  .footer-cta-box {\n    padding: 40px;\n    gap: 30px;\n  }\n}\n\n@media (max-width: 900px) {\n  .footer-cta-box {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  .cta-content {\n    max-width: 100%;\n    width: 100%;\n    margin-bottom: 20px;\n  }\n  .cta-quick-contact {\n    width: 100%;\n    box-sizing: border-box;\n  }\n}\n\n@media (max-width: 600px) {\n  .custom-elementor-footer {\n    padding: 40px 0 0 0;\n  }\n  .footer-cta-box {\n    padding: 28px 22px;\n    margin-bottom: 40px;\n  }\n  .cta-content h2 {\n    font-size: 26px;\n  }\n  .brand-card {\n    padding: 28px 22px;\n  }\n  .links-cluster {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n  .footer-bottom {\n    flex-direction: column;\n    gap: 12px;\n    text-align: center;\n  }\n}\n\n<\/style>\n\n<div class=\"custom-elementor-footer\">\n  <div class=\"footer-container\">\n    <!-- CTA Block (Muokattava osuus) -->\n    <div class=\"footer-cta-box fade-up-element delay-100\">\n      <div class=\"cta-content\">\n        <h2>Olemme luotettava kuljetuskumppanisi<\/h2>\n        <p>Etsitk\u00f6 asiantuntevaa ja joustavaa kuljetuspalvelua? Ota yhteytt\u00e4, niin etsit\u00e4\u00e4n yhdess\u00e4 sinulle paras ratkaisu.<\/p>\n        <a href=\"\/#YHT\" class=\"cta-button\">Ota yhteytt\u00e4<\/a>\n      <\/div>\n      \n      <!-- Quick Contact Element -->\n      <div class=\"cta-quick-contact\">\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-2.896-1.596-5.48-4.18-7.076-7.076l1.293-.97c.362-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z\" \/>\n        <\/svg>\n        <div class=\"contact-text-group\">\n          <span class=\"contact-title\">Soita suoraan<\/span>\n          <a href=\"tel:+358500552421\" class=\"contact-number\">0500 552 421<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Main Area -->\n    <div class=\"single-layout\">\n      <!-- Boxed Brand & Links Card -->\n      <div class=\"brand-card fade-up-element delay-200\">\n        <div class=\"brand-identity\">\n          <h3>VP-Kuljetus Oy<\/h3>\n          <p>\n            J\u00e4nhi\u00e4l\u00e4ntie 28<br>\n            55300 Rauha\n          <\/p>\n        <\/div>\n        \n        <div class=\"links-cluster\">\n          <div class=\"nav-col\">\n            <h4>Sivut<\/h4>\n            <ul>\n              <li><a href=\"https:\/\/vp-kuljetus.fi\/\">Etusivu<\/a><\/li>\n              <li><a href=\"https:\/\/vp-kuljetus.fi\/?page_id=754\">Yritys<\/a><\/li>\n              <li><a href=\"\/#YHT\">Ota yhteytt\u00e4<\/a><\/li>\n            <\/ul>\n          <\/div>\n          <div class=\"nav-col\">\n            <h4>Legal<\/h4>\n            <ul>\n              <li><a href=\"https:\/\/vp-kuljetus.fi\/?page_id=787\">Tietosuojaseloste<\/a><\/li>\n              <li><a href=\"https:\/\/whistleblower.esalkku.fi\/vpkuljetus\">Whistleblowing-kanava<\/a><\/li>\n            <\/ul>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Maker's Note -->\n    <div class=\"footer-bottom fade-up-element delay-300\">\n      <p>&copy; 2026 VP-Kuljetus Oy. Kaikki oikeudet pid\u00e4tet\u00e4\u00e4n.<\/p>\n      <p>Sivuston toteutti <a href=\"https:\/\/haikucreative.fi\" target=\"_blank\" rel=\"noopener\">Haiku Creative<\/a><\/p>\n    <\/div>\n  <\/div>\n<\/div>\n<!-- end Etusivu Footer -->\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<div class=\"elementor-element elementor-element-1d231e5 e-con e-atomic-element e-flexbox-base e-5230061 \" data-id=\"1d231e5\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"1d231e5\">\n    \t\t<div class=\"elementor-element elementor-element-964804d elementor-widget elementor-widget-html\" data-id=\"964804d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\n     VPK GLASS NAVIGATION WIDGET\n     ============================================================ -->\n\n<nav id=\"vpk-glass-nav\" class=\"vpk-nav theme-light\" aria-label=\"P\u00e4\u00e4valikko\">\n  <div class=\"vpk-nav__shell\">\n    \n    <!-- Branding \/ Logo -->\n    <a class=\"vpk-glass__brand\" href=\"https:\/\/vp-kuljetus.fi\/\" aria-label=\"Etusivu\">\n      <img decoding=\"async\" class=\"vpk-glass__brand-img\" src=\"https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/Asset-1-scaled.png\" alt=\"VP-Kuljetus Oy\">\n    <\/a>\n\n    <!-- Desktop Menu -->\n    <div class=\"vpk-nav__menu\">\n      \n      <!-- Single Link (No Dropdown) -->\n      <a href=\"https:\/\/vp-kuljetus.fi\/?page_id=754\" class=\"vpk-nav__link\">Yrityksest\u00e4<\/a>\n\n      <div class=\"vpk-nav__dropdown\">\n        <a href=\"\/#PALVELUT\" class=\"vpk-nav__link\" aria-expanded=\"false\">Palvelut<\/a>\n        <div class=\"vpk-nav__dropdown-panel\">\n          <a href=\"https:\/\/vp-kuljetus.fi\/?page_id=632\">Kuljetustoiminta<\/a>\n          <a href=\"https:\/\/vp-kuljetus.fi\/?page_id=735\">Terminaalit<\/a>\n        <\/div>\n      <\/div>\n\n      <div class=\"vpk-nav__dropdown vpk-nav__dropdown--cta\">\n        <a href=\"\/#YHT\" class=\"vpk-nav__link vpk-nav__btn\" aria-expanded=\"false\">Ota yhteytt\u00e4<\/a>\n        <div class=\"vpk-nav__dropdown-panel vpk-nav__dropdown-panel--right\">\n          <a href=\"\/#YHT-yhteydenotto\">Yhteydenotto<\/a>\n          <a href=\"\/#YHT-avoin_hakemus\">Avoin hakemus<\/a>\n          <a href=\"\/#YHT-tarjouspyynto\">Tarjouspyynt\u00f6<\/a>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n    <!-- Mobile Burger (FIXED: Added type=\"button\" to prevent form submission refreshes) -->\n    <button type=\"button\" class=\"vpk-nav__burger\" aria-label=\"Valikko\">\n      <span><\/span><span><\/span><span><\/span>\n    <\/button>\n    \n  <\/div>\n\n  <!-- Mobile Menu -->\n  <div class=\"vpk-nav__mobile-panel\">\n    <div class=\"vpk-nav__mobile-inner\">\n      <div class=\"vpk-nav__mobile-group\">\n        <a href=\"https:\/\/vp-kuljetus.fi\/?page_id=754\">Yrityksest\u00e4<\/a>\n      <\/div>\n      <div class=\"vpk-nav__mobile-group\">\n        <a href=\"\/#PALVELUT\" class=\"vpk-nav__mobile-heading\">Palvelut<\/a>\n        <a href=\"https:\/\/vp-kuljetus.fi\/?page_id=632\">Kuljetustoiminta<\/a>\n        <a href=\"https:\/\/vp-kuljetus.fi\/?page_id=735\">Terminaalit<\/a>\n      <\/div>\n      <div class=\"vpk-nav__mobile-group\">\n        <a href=\"\/#YHT\" class=\"vpk-nav__mobile-heading\">Ota yhteytt\u00e4<\/a>\n        <a href=\"\/#YHT-yhteydenotto\">Yhteydenotto<\/a>\n        <a href=\"\/#YHT-avoin_hakemus\">Avoin hakemus<\/a>\n        <a href=\"\/#YHT-tarjouspyynto\">Tarjouspyynt\u00f6<\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/nav>\n\n<style>\n\/* ============================================================\n   RESET GLOBAL THEME BLEED-THROUGH (KILLS THE RED COLOR)\n   ============================================================ *\/\n#vpk-glass-nav,\n#vpk-glass-nav * {\n  -webkit-tap-highlight-color: transparent !important;\n}\n\n#vpk-glass-nav a:focus,\n#vpk-glass-nav a:active,\n#vpk-glass-nav button:focus,\n#vpk-glass-nav button:active {\n  outline: none !important;\n  box-shadow: none !important;\n}\n\n\/* ============================================================\n   CSS VARIABLES & THEMING\n   ============================================================ *\/\n:root {\n  --vpk-ease: cubic-bezier(0.25, 1, 0.5, 1);\n  --vpk-blur: blur(24px) saturate(180%);\n}\n\n.vpk-nav.theme-light {\n  --nav-bg: rgba(255, 255, 255, 0.75);\n  --nav-border: rgba(47, 107, 82, 0.15);\n  --nav-text: #0f3b35; \n  --nav-text-hover: #2F6B52; \n  --nav-btn-bg: #c7eb98; \n  --nav-btn-text: #0f3b35;\n  --nav-btn-bg-hover: #2F6B52;\n  --nav-btn-text-hover: #ffffff;\n  --nav-shadow: 0 12px 32px rgba(15, 59, 53, 0.08);\n  --nav-dropdown-bg: rgba(255, 255, 255, 0.9);\n  --nav-hover-bg: rgba(199, 235, 152, 0.25);\n}\n\n.vpk-nav.theme-dark {\n  --nav-bg: rgba(18, 18, 22, 0.55);\n  --nav-border: rgba(199, 235, 152, 0.1);\n  --nav-text: #ffffff;\n  --nav-text-hover: #c7eb98;\n  --nav-btn-bg: #c7eb98;\n  --nav-btn-text: #0f3b35;\n  --nav-btn-bg-hover: #ffffff;\n  --nav-btn-text-hover: #0f3b35;\n  --nav-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);\n  --nav-dropdown-bg: rgba(25, 25, 30, 0.85);\n  --nav-hover-bg: rgba(199, 235, 152, 0.15);\n}\n\n\/* ============================================================\n   BASE STRUCTURE\n   ============================================================ *\/\n.vpk-nav {\n  position: absolute; \n  top: 0;        \n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 9999;\n  width: max-content;\n  max-width: 90vw;\n  font-family: inherit;\n}\n\n.vpk-nav__shell {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 68px;\n  padding: 0 8px 0 18px;\n  border-radius: 999px;\n  background: var(--nav-bg);\n  border: 1px solid var(--nav-border);\n  box-shadow: var(--nav-shadow);\n  backdrop-filter: var(--vpk-blur);\n  -webkit-backdrop-filter: var(--vpk-blur);\n  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;\n}\n\n\/* ============================================================\n   BRANDING \/ LOGO\n   ============================================================ *\/\n.vpk-glass__brand {\n  display: flex;\n  align-items: center;\n  margin-right: 28px;\n  text-decoration: none;\n  flex-shrink: 0; \n  height: 100%;\n}\n\n.vpk-glass__brand-img {\n  height: 22px;\n  width: auto;\n  display: block;\n  object-fit: contain;\n  filter: brightness(0);\n  transition: filter 0.4s;\n}\n\n.vpk-nav.theme-dark .vpk-glass__brand-img {\n  filter: brightness(0) invert(1);\n}\n\n\/* ============================================================\n   DESKTOP MENU\n   ============================================================ *\/\n.vpk-nav__menu {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  height: 100%;\n}\n\n.vpk-nav__dropdown {\n  position: relative;\n  height: 100%;\n  display: flex;\n  align-items: center;\n}\n\n.vpk-nav__link {\n  background: none;\n  border: none;\n  color: var(--nav-text);\n  font-size: 15px;\n  font-weight: 500;\n  cursor: pointer;\n  padding: 8px 14px;\n  border-radius: 99px;\n  transition: background 0.3s, color 0.3s;\n  text-decoration: none;\n  display: inline-block;\n}\n\n.vpk-nav__link:hover {\n  background: var(--nav-hover-bg);\n  color: var(--nav-text-hover);\n}\n\n.vpk-nav__btn {\n  background: var(--nav-btn-bg);\n  color: var(--nav-btn-text);\n  font-weight: 600;\n  padding: 10px 20px;\n  margin-left: 4px;\n  transition: background 0.3s, color 0.3s, transform 0.2s;\n}\n\n.vpk-nav__btn:hover {\n  background: var(--nav-btn-bg-hover);\n  color: var(--nav-btn-text-hover);\n  transform: scale(1.03); \n}\n\n\/* ============================================================\n   DROPDOWN PANELS\n   ============================================================ *\/\n.vpk-nav__dropdown-panel {\n  position: absolute;\n  top: calc(100% + 12px);\n  left: 50%;\n  transform: translateX(-50%) translateY(10px);\n  background: var(--nav-dropdown-bg);\n  backdrop-filter: var(--vpk-blur);\n  -webkit-backdrop-filter: var(--vpk-blur);\n  border: 1px solid var(--nav-border);\n  border-radius: 16px;\n  padding: 12px;\n  min-width: 200px;\n  opacity: 0;\n  visibility: hidden;\n  box-shadow: var(--nav-shadow);\n  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.vpk-nav__dropdown-panel--right {\n  left: auto;\n  right: 0;\n  transform: translateX(0) translateY(10px);\n}\n\n.vpk-nav__dropdown:hover .vpk-nav__dropdown-panel {\n  opacity: 1;\n  visibility: visible;\n  transform: translateX(-50%) translateY(0);\n}\n\n.vpk-nav__dropdown.vpk-nav__dropdown--cta:hover .vpk-nav__dropdown-panel--right {\n  transform: translateX(0) translateY(0);\n}\n\n.vpk-nav__dropdown-panel a {\n  text-decoration: none;\n  color: var(--nav-text);\n  padding: 10px 14px;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  transition: background 0.2s, color 0.2s;\n}\n\n.vpk-nav__dropdown-panel a:hover {\n  background: var(--nav-hover-bg);\n  color: var(--nav-text-hover);\n}\n\n\/* ============================================================\n   MOBILE BURGER & PANEL\n   ============================================================ *\/\n.vpk-nav__burger {\n  display: none;\n  background: none;\n  border: none;\n  cursor: pointer;\n  width: 44px;\n  height: 44px;\n  position: relative;\n  border-radius: 50%;\n  background: var(--nav-hover-bg);\n}\n\n.vpk-nav__burger span {\n  position: absolute;\n  left: 12px;\n  right: 12px;\n  height: 2px;\n  background: var(--nav-text);\n  border-radius: 2px;\n  transition: 0.3s var(--vpk-ease);\n}\n\n.vpk-nav__burger span:nth-child(1) { top: 14px; }\n.vpk-nav__burger span:nth-child(2) { top: 21px; }\n.vpk-nav__burger span:nth-child(3) { top: 28px; }\n\n.vpk-nav.mobile-open .vpk-nav__burger span:nth-child(1) { top: 21px; transform: rotate(45deg); }\n.vpk-nav.mobile-open .vpk-nav__burger span:nth-child(2) { opacity: 0; }\n.vpk-nav.mobile-open .vpk-nav__burger span:nth-child(3) { top: 21px; transform: rotate(-45deg); }\n\n.vpk-nav__mobile-panel {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 100%;\n  margin-top: 16px;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(-10px);\n  transition: opacity 0.4s var(--vpk-ease), transform 0.4s var(--vpk-ease), visibility 0.4s;\n}\n\n.vpk-nav.mobile-open .vpk-nav__mobile-panel {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n.vpk-nav__mobile-inner {\n  background: var(--nav-dropdown-bg);\n  backdrop-filter: var(--vpk-blur);\n  -webkit-backdrop-filter: var(--vpk-blur);\n  border: 1px solid var(--nav-border);\n  border-radius: 24px;\n  padding: 24px;\n  box-shadow: var(--nav-shadow);\n  max-height: 70vh;\n  overflow-y: auto;\n}\n\n.vpk-nav__mobile-group {\n  margin-bottom: 24px;\n}\n\n.vpk-nav__mobile-group:last-child {\n  margin-bottom: 0;\n}\n\n.vpk-nav__mobile-heading {\n  font-size: 12px;\n  text-transform: uppercase;\n  letter-spacing: 1px;\n  color: var(--nav-text);\n  opacity: 0.6;\n  margin-bottom: 8px;\n  padding-left: 12px;\n  text-decoration: none;\n  display: block;\n}\n\n.vpk-nav__mobile-group a:not(.vpk-nav__mobile-heading) {\n  display: block;\n  text-decoration: none;\n  color: var(--nav-text);\n  font-size: 16px;\n  font-weight: 500;\n  padding: 12px;\n  border-radius: 12px;\n  transition: background 0.2s, color 0.2s;\n}\n\n.vpk-nav__mobile-group a:not(.vpk-nav__mobile-heading):hover {\n  background: var(--nav-hover-bg);\n  color: var(--nav-text-hover);\n}\n\n\/* ============================================================\n   RESPONSIVE BREAKPOINTS\n   ============================================================ *\/\n@media (max-width: 1024px) {\n  .vpk-nav__menu { display: none; }\n  .vpk-nav__burger { display: block; }\n  .vpk-nav__shell { width: calc(100vw - 48px); max-width: none; }\n  .vpk-nav { width: calc(100vw - 48px); }\n  .vpk-glass__brand { margin-right: auto; }\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n  const nav = document.getElementById('vpk-glass-nav');\n  const burger = nav.querySelector('.vpk-nav__burger');\n  const shell = nav.querySelector('.vpk-nav__shell');\n  \n  \/\/ The section we want to track\n  const hostSection = document.getElementById('KAKKONEN');\n  const offsetDistance = 24; \n\n  if (!nav || !burger) return;\n\n  if (nav.parentElement !== document.body) {\n    document.body.appendChild(nav);\n  }\n\n  \/\/ FIXED: Stop the browser\/theme from hijacking the click\n  burger.addEventListener('click', (e) => {\n    e.preventDefault(); \n    nav.classList.toggle('mobile-open');\n  });\n\n  \/\/ Position Tracking Logic\n  const updatePosition = () => {\n    if (!hostSection) {\n      nav.style.position = 'fixed';\n      nav.style.top = `${offsetDistance}px`;\n      return; \n    }\n    \n    const hostRect = hostSection.getBoundingClientRect();\n    \n    if (hostRect.top <= offsetDistance) {\n      nav.style.position = 'fixed';\n      nav.style.top = `${offsetDistance}px`;\n    } else {\n      nav.style.position = 'absolute';\n      nav.style.top = `${hostRect.top + window.scrollY + offsetDistance}px`;\n    }\n  };\n\n  \/\/ Background Contrast Logic (FIXED: Added try-catch so it never breaks click events)\n  const evaluateBackgroundLuminance = () => {\n    try {\n      nav.style.pointerEvents = 'none';\n      \n      const rect = shell.getBoundingClientRect();\n      const samplePoints = [\n        { x: rect.left + 20, y: rect.top + (rect.height \/ 2) },\n        { x: rect.left + (rect.width \/ 2), y: rect.top + (rect.height \/ 2) },\n        { x: rect.right - 20, y: rect.top + (rect.height \/ 2) }\n      ];\n\n      let totalLuminance = 0;\n      let validSamples = 0;\n\n      samplePoints.forEach(point => {\n        \/\/ Prevent checking off-screen coordinates\n        if (point.x < 0 || point.y < 0 || point.x > window.innerWidth || point.y > window.innerHeight) return;\n\n        const elementsUnder = document.elementsFromPoint(point.x, point.y);\n        if (!elementsUnder) return;\n\n        for (let i = 0; i < elementsUnder.length; i++) {\n          const el = elementsUnder[i];\n          const bgColor = window.getComputedStyle(el).backgroundColor;\n          const rgbMatch = bgColor.match(\/\\d+\/g);\n          \n          if (rgbMatch && rgbMatch.length >= 3) {\n            const r = parseInt(rgbMatch[0]);\n            const g = parseInt(rgbMatch[1]);\n            const b = parseInt(rgbMatch[2]);\n            const a = rgbMatch[3] ? parseFloat(rgbMatch[3]) : 1;\n            \n            if (a > 0.1) {\n              totalLuminance += (0.299 * r + 0.587 * g + 0.114 * b);\n              validSamples++;\n              break;\n            }\n          }\n        }\n      });\n\n      if (validSamples > 0) {\n        const averageLuminance = totalLuminance \/ validSamples;\n        if (averageLuminance < 128) {\n          nav.classList.remove('theme-light');\n          nav.classList.add('theme-dark');\n        } else {\n          nav.classList.remove('theme-dark');\n          nav.classList.add('theme-light');\n        }\n      }\n    } catch (err) {\n      console.warn(\"VPK Nav: Luminance check skipped.\", err);\n    } finally {\n      \/\/ Always restore pointer events even if the calculation fails\n      nav.style.pointerEvents = '';\n    }\n  };\n\n  \/\/ Dedicated scroll listener logic \n  let isScrolling;\n  window.addEventListener('scroll', () => {\n    window.requestAnimationFrame(updatePosition);\n    window.clearTimeout(isScrolling);\n    isScrolling = setTimeout(evaluateBackgroundLuminance, 50);\n  });\n\n  \/\/ Run initial calculations\n  updatePosition();\n  setTimeout(updatePosition, 100); \n  setTimeout(evaluateBackgroundLuminance, 300);\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>skip render: ucaddon_etusivu_hero skip render: ucaddon_esittely skip render: ucaddon_etusivun_palvelut skip render: ucaddon_etusivu_kartta Olemme Luotettava Kumppani Olemme luotettava kumppanisi kuljetuslogistiikassa. Meill\u00e4 yhdistyv\u00e4t paikallinen osaaminen ja valtakunnallinen Fenno Road -verkoston kattavuus. Toimintamme ytimess\u00e4 on tinkim\u00e4t\u00f6n laatu, joka n\u00e4kyy kaikkialla tekemisess\u00e4mme.Takaamme asiakkaillemme mielenrauhan ja sujuvan palvelun joka tilanteessa. Verkosto Fenno Road -toimija Kuulumme valtakunnalliseen Fenno Road -verkostoon \u2014 [&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-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vp-kuljetus.fi\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vp-kuljetus.fi\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vp-kuljetus.fi\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vp-kuljetus.fi\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vp-kuljetus.fi\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":746,"href":"https:\/\/vp-kuljetus.fi\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":1136,"href":"https:\/\/vp-kuljetus.fi\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/1136"}],"wp:attachment":[{"href":"https:\/\/vp-kuljetus.fi\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}