{"id":632,"date":"2026-08-20T10:51:32","date_gmt":"2026-08-20T10:51:32","guid":{"rendered":"https:\/\/vp-kuljetus.fi\/?page_id=632"},"modified":"2026-09-08T08:19:21","modified_gmt":"2026-09-08T08:19:21","slug":"yritys","status":"publish","type":"page","link":"https:\/\/vp-kuljetus.fi\/?page_id=632","title":{"rendered":"Kuljetus"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"632\" class=\"elementor elementor-632\">\n\t\t\t\t<div class=\"elementor-element elementor-element-25d6751 e-con-full e-flex e-con e-parent\" data-id=\"25d6751\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-95eb6f8 elementor-widget elementor-widget-ucaddon_kuljetus_hero\" data-id=\"95eb6f8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ucaddon_kuljetus_hero.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<!-- start Kuljetus-HERO -->\n<style>\/* widget: Kuljetus-HERO *\/\n\n\/* Base Container *\/\n.vp-hero-wrapper {\n    box-sizing: border-box;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n    margin: 0 auto;\n    padding: 2rem 1.5rem;\n    max-width: 1300px; \n    width: 100%;\n}\n\n.vp-hero-wrapper * {\n    box-sizing: border-box;\n}\n\n\/* --- PREMIUM ANIMATIONS --- *\/\n@keyframes vpScaleIn {\n    0% {\n        opacity: 0;\n        transform: scale(0.98);\n    }\n    100% {\n        opacity: 1;\n        transform: scale(1);\n    }\n}\n\n@keyframes vpFadeUp {\n    0% {\n        opacity: 0;\n        transform: translateY(30px);\n    }\n    100% {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n\/* Main Hero Card *\/\n.vp-hero-card {\n    position: relative;\n    width: 100%;\n    min-height: 75vh;\n    border-radius: 1.75rem; \n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    text-align: left;\n    color: #ffffff;\n    background-color: #0f3b35; \n    background-size: cover;\n    background-position: center;\n    background-repeat: no-repeat;\n    \n    \/* Entrance Animation *\/\n    opacity: 0;\n    animation: vpScaleIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n\/* Left-Aligned Content *\/\n.vp-hero-content {\n    max-width: 850px;\n    padding: 0 4rem;\n    z-index: 2;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n}\n\n.vp-hero-title {\n    font-size: clamp(2rem, 5vw, 3.5rem);\n    font-weight: 700;\n    line-height: 1.15;\n    margin: 0 0 1.25rem 0;\n    letter-spacing: -0.02em;\n    color: #ffffff;\n    \n    \/* Entrance Animation *\/\n    opacity: 0;\n    animation: vpFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    animation-delay: 0.2s;\n}\n\n.vp-hero-subtitle {\n    font-size: 1.15rem;\n    font-weight: 400;\n    line-height: 1.7;\n    margin: 0 0 2.5rem 0;\n    max-width: 700px;\n    color: #e5e7eb;\n    \n    \/* Entrance Animation *\/\n    opacity: 0;\n    animation: vpFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    animation-delay: 0.35s;\n}\n\n\/* Primary Action Button *\/\n.vp-action-btn-main {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.75rem;\n    background-color: #c7eb98; \n    color: #0f3b35;\n    padding: 0.85rem 2rem;\n    border-radius: 50px;\n    font-weight: 700;\n    font-size: 1.05rem;\n    text-decoration: none;\n    transition: all 0.3s ease;\n    box-shadow: 0 4px 15px rgba(199, 235, 152, 0.2);\n    \n    \/* Entrance Animation *\/\n    opacity: 0;\n    animation: vpFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    animation-delay: 0.5s;\n}\n\n.vp-action-btn-main:hover,\n.vp-action-btn-main:focus {\n    background-color: #d4f0b3;\n    \/* !important ensures hover transform isn't overridden by the ending state of the keyframe animation *\/\n    transform: translateY(-3px) !important; \n    box-shadow: 0 8px 25px rgba(199, 235, 152, 0.4);\n    outline: none;\n}\n\n\/* Bottom Bar *\/\n.vp-hero-bottom-bar {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    padding: 2.5rem 4rem;\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-end;\n    z-index: 2;\n}\n\n\/* Bottom Left: Text & Avatars *\/\n.vp-hero-bottom-left {\n    display: flex;\n    align-items: center;\n    gap: 1.5rem;\n    \n    \/* Entrance Animation *\/\n    opacity: 0;\n    animation: vpFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    animation-delay: 0.7s;\n}\n\n.vp-hero-bottom-text {\n    text-align: left;\n    font-size: 0.95rem;\n    line-height: 1.4;\n    font-weight: 500;\n    color: #ffffff;\n}\n\n\/* Avatar Grouping *\/\n.vp-pill-glass-avatars {\n    display: flex;\n    align-items: center;\n    background: rgba(255, 255, 255, 0.15);\n    backdrop-filter: blur(12px);\n    -webkit-backdrop-filter: blur(12px);\n    border: 1px solid rgba(255, 255, 255, 0.3);\n    padding: 6px;\n    border-radius: 50px;\n}\n\n.vp-pill-glass-avatars img {\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    border: 2px solid #0f3b35;\n    object-fit: cover;\n    margin-left: -12px;\n}\n\n.vp-pill-glass-avatars img:first-child {\n    margin-left: 0;\n}\n\n\/* Bottom Right: Quick Links *\/\n.vp-hero-bottom-right {\n    display: flex;\n    gap: 1.5rem;\n    \n    \/* Entrance Animation *\/\n    opacity: 0;\n    animation: vpFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    animation-delay: 0.85s;\n}\n\n.vp-hero-bottom-right a {\n    color: #ffffff;\n    text-decoration: none;\n    font-size: 0.95rem;\n    font-weight: 500;\n    transition: color 0.2s ease;\n    display: flex;\n    align-items: center;\n    gap: 0.25rem;\n}\n\n.vp-hero-bottom-right a:hover {\n    color: #c7eb98;\n}\n\n\/* Responsive Design *\/\n@media (max-width: 768px) {\n    .vp-hero-content {\n        padding: 0 1.5rem;\n    }\n\n    .vp-hero-bottom-bar {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 1.5rem;\n        padding: 1.5rem;\n    }\n\n    .vp-hero-card {\n        border-radius: 1.5rem;\n        min-height: 85vh;\n    }\n\n    .vp-pill-glass-avatars img {\n        width: 32px;\n        height: 32px;\n    }\n}\n\n<\/style>\n\n<div class=\"vp-hero-wrapper\">\n    <div class=\"vp-hero-card\" style=\"background-image: linear-gradient(to right, rgba(15, 59, 53, 0.9) 0%, rgba(15, 59, 53, 0.4) 100%), url('https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/IMG_20211210_230754.webp');\">\n        \n        <!-- Main Left-Aligned Content -->\n        <div class=\"vp-hero-content\">\n            <h1 class=\"vp-hero-title\">Asiantuntevaa ja joustavaa kuljetuspalvelua.<\/h1>\n            <p class=\"vp-hero-subtitle\">Tarjoamme r\u00e4\u00e4t\u00e4l\u00f6ityj\u00e4 ratkaisuja yrityksesi logistiikkatarpeisiin. Hoidamme kuljetukset luotettavasti, aikataulussa ja vuosikymmenten tuomalla ammattitaidolla.<\/p>\n            <a href=\"https:\/\/vp-kuljetus.fi\/#YHT\" class=\"vp-action-btn-main\" aria-label=\"Lue lis\u00e4\u00e4 yrityksest\u00e4mme\">\n                Ole meihin yhteydess\u00e4\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"><\/line>\n                    <polyline points=\"7 7 17 7 17 17\"><\/polyline>\n                <\/svg>\n            <\/a>\n        <\/div>\n\n        <!-- Absolute Bottom Elements -->\n        <div class=\"vp-hero-bottom-bar\">\n            \n            <!-- Left Side: Text & Trust Markers -->\n            <div class=\"vp-hero-bottom-left\">\n                <div class=\"vp-hero-bottom-text\">\n                    Teollisuus- ja kappaletavara.\nAina aikataulussa.\n                <\/div>\n                <div class=\"vp-pill-glass-avatars\">\n                    <img decoding=\"async\" src=\"https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/8.webp\" alt=\"Asiantuntija 1\" loading=\"lazy\">\n                    <img decoding=\"async\" src=\"https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/social_icon12.webp\" alt=\"Asiantuntija 2\" loading=\"lazy\">\n                <\/div>\n            <\/div>\n\n            <!-- Right Side: Navigation Links -->\n            <div class=\"vp-hero-bottom-right\">\n                <a href=\"https:\/\/vp-kuljetus.fi\/?page_id=754\">Historia \u2197<\/a>\n                <a href=\"https:\/\/vp-kuljetus.fi\/?page_id=735\">Terminaalit \u2197<\/a>\n                <a href=\"#YHT\">Ota yhteytt\u00e4 \u2197<\/a>\n            <\/div>\n            \n        <\/div>\n    <\/div>\n<\/div>\n<!-- end Kuljetus-HERO -->\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-8363890 e-flex e-con-boxed e-con e-parent\" data-id=\"8363890\" 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-5ccfbc7 elementor-widget elementor-widget-ucaddon_palvelutaulu\" data-id=\"5ccfbc7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ucaddon_palvelutaulu.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<!-- start Kuljetus-Palvelutaulu -->\n<style>\/* widget: Kuljetus-Palvelutaulu *\/\n\n\/* Base Container & Responsive Padding *\/\n  .vp-services-wrapper {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n    color: #111827;\n    padding: 3rem 1rem; \/* Mobile padding *\/\n    max-width: 1300px;\n    margin: 0 auto;\n    box-sizing: border-box;\n  }\n\n  .vp-services-wrapper * {\n    box-sizing: border-box;\n  }\n\n  @media (min-width: 768px) {\n    .vp-services-wrapper {\n      padding: 4rem 1.5rem; \/* Tablet & Desktop padding *\/\n    }\n  }\n\n  \/* --- PREMIUM ENTRANCE ANIMATIONS --- *\/\n  @keyframes vpFadeUp {\n    0% {\n      opacity: 0;\n      transform: translateY(30px);\n    }\n    100% {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes vpScaleIn {\n    0% {\n      opacity: 0;\n      transform: scale(0.98);\n    }\n    100% {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  \/* --- Top Explanatory Text --- *\/\n  .vp-section-header {\n    text-align: left;\n    max-width: 850px;\n    margin: 0 0 2.5rem 0;\n  }\n  \n  @media (min-width: 768px) {\n    .vp-section-header {\n      margin: 0 0 3.5rem 0;\n    }\n  }\n\n  .vp-section-header h2 {\n    font-size: clamp(2rem, 5vw, 3rem); \/* Scales smoothly across all devices *\/\n    line-height: 1.15;\n    font-weight: 700;\n    color: #2F6B52;\n    margin: 0 0 1.25rem 0;\n    letter-spacing: -0.02em;\n    \n    \/* Entrance Animation *\/\n    opacity: 0;\n    animation: vpFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    animation-delay: 0.1s;\n  }\n\n  .vp-section-header p {\n    font-size: 1.15rem;\n    color: #4b5563;\n    line-height: 1.7;\n    margin: 0;\n    max-width: 700px;\n    \n    \/* Entrance Animation *\/\n    opacity: 0;\n    animation: vpFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    animation-delay: 0.2s;\n  }\n\n  \/* --- Main Grid Layout --- *\/\n  .vp-modern-grid {\n    display: grid;\n    grid-template-columns: 1fr; \/* 1 column for mobile & tablet *\/\n    gap: 2rem; \/* Tighter gap on mobile *\/\n  }\n\n  @media (min-width: 1024px) {\n    .vp-modern-grid {\n      grid-template-columns: 1fr 1.1fr 0.9fr; \/* 3 columns for desktop *\/\n      gap: 2.5rem;\n      align-items: stretch;\n    }\n  }\n\n  \/* --- COLUMN 1: Text & Intro --- *\/\n  .vp-col-text {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n  }\n\n  .vp-heading {\n    font-size: clamp(1.4rem, 3vw, 2.2rem);\n    line-height: 1.4;\n    font-weight: 400;\n    color: #111827;\n    margin: 0 0 2rem 0;\n    letter-spacing: -0.02em;\n    \n    \/* Entrance Animation *\/\n    opacity: 0;\n    animation: vpFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    animation-delay: 0.3s;\n  }\n\n  @media (min-width: 1024px) {\n    .vp-heading {\n      margin: 0 0 3rem 0;\n    }\n  }\n\n  .vp-action-btn-main {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.75rem;\n    background-color: #c7eb98; \n    color: #0f3b35;\n    padding: 0.85rem 1.75rem;\n    border-radius: 50px;\n    font-weight: 700;\n    font-size: 0.95rem;\n    text-decoration: none;\n    transition: all 0.3s ease;\n    box-shadow: 0 4px 15px rgba(199, 235, 152, 0.2);\n    \n    \/* Entrance Animation *\/\n    opacity: 0;\n    animation: vpFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    animation-delay: 0.4s;\n  }\n\n  .vp-action-btn-main:hover,\n  .vp-action-btn-main:focus {\n    background-color: #d4f0b3;\n    transform: translateY(-3px) !important; \/* Forces hover transform over keyframe resting state *\/\n    box-shadow: 0 8px 25px rgba(199, 235, 152, 0.4);\n    outline: none;\n  }\n\n  .vp-action-btn-main:focus-visible {\n    outline: 2px solid #2F6B52;\n    outline-offset: 4px;\n  }\n\n  \/* --- COLUMN 2: Tall Image Card --- *\/\n  .vp-col-tall {\n    position: relative;\n    border-radius: 1.5rem;\n    overflow: hidden;\n    min-height: 350px; \/* Shorter on mobile so it doesn't take the whole screen *\/\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    padding: 1.5rem;\n    background-color: #0f3b35;\n    \n    \/* Entrance Animation *\/\n    opacity: 0;\n    animation: vpScaleIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    animation-delay: 0.4s;\n  }\n\n  @media (min-width: 1024px) {\n    .vp-col-tall {\n      min-height: 450px; \/* Full height on desktop *\/\n      border-radius: 1.75rem;\n      padding: 1.75rem;\n    }\n  }\n\n  .vp-col-tall::before {\n    content: '';\n    position: absolute;\n    top: 0; left: 0; right: 0; bottom: 0;\n    background: linear-gradient(to bottom, rgba(15, 59, 53, 0.1) 0%, rgba(15, 59, 53, 0.85) 100%);\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  \/* Image Fit Fix *\/\n  .vp-card-img {\n    position: absolute !important;\n    top: 0 !important; left: 0 !important;\n    width: 100% !important; height: 100% !important;\n    object-fit: cover !important;\n    object-position: center !important;\n    display: block !important;\n    z-index: 0 !important;\n    margin: 0 !important; padding: 0 !important;\n    border-radius: 0 !important;\n    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n  }\n  \n  .vp-col-tall:hover .vp-card-img,\n  .vp-split-img-wrapper:hover .vp-card-img,\n  .vp-slide:focus-within .vp-card-img {\n    transform: scale(1.05);\n  }\n\n  .vp-pill-glass, .vp-tall-bottom {\n    position: relative;\n    z-index: 2;\n  }\n\n  .vp-pill-glass {\n    align-self: flex-start;\n    background: rgba(255, 255, 255, 0.2);\n    backdrop-filter: blur(12px);\n    -webkit-backdrop-filter: blur(12px);\n    border: 1px solid rgba(255, 255, 255, 0.3);\n    color: #ffffff;\n    padding: 0.4rem 1.2rem;\n    border-radius: 50px;\n    font-size: 0.85rem;\n    font-weight: 600;\n  }\n\n  .vp-tall-bottom {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-end;\n    gap: 1rem;\n  }\n\n  .vp-tall-bottom p {\n    color: #ffffff;\n    font-size: 1.05rem;\n    font-weight: 500;\n    line-height: 1.4;\n    margin: 0;\n    max-width: 80%;\n  }\n\n  @media (min-width: 768px) {\n    .vp-tall-bottom p {\n      font-size: 1.15rem;\n    }\n  }\n\n  .vp-icon-circle {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 40px; height: 40px;\n    flex-shrink: 0;\n    background-color: #2F6B52;\n    color: #ffffff;\n    border-radius: 50%;\n    transition: all 0.3s ease;\n  }\n\n  @media (min-width: 768px) {\n    .vp-icon-circle {\n      width: 44px; height: 44px;\n    }\n  }\n  \n  .vp-col-tall:hover .vp-icon-circle {\n    background-color: #c7eb98;\n    color: #0f3b35;\n    transform: scale(1.1);\n  }\n\n  \/* --- COLUMN 3: Split Card & Interactive Slider --- *\/\n  .vp-col-split {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    height: 100%;\n    gap: 1.5rem;\n    \n    \/* Entrance Animation *\/\n    opacity: 0;\n    animation: vpFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    animation-delay: 0.5s;\n  }\n\n  .vp-slider-container {\n    position: relative;\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    outline: none;\n  }\n\n  .vp-slider-container:focus-visible {\n    outline: 2px dashed #2F6B52;\n    outline-offset: 8px;\n    border-radius: 8px;\n  }\n\n  .vp-slide {\n    display: none;\n    flex-direction: column;\n    height: 100%;\n    gap: 1.25rem;\n    animation: smoothFade 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;\n  }\n\n  .vp-slide.active {\n    display: flex;\n  }\n\n  @keyframes smoothFade {\n    0% { opacity: 0; transform: translateY(10px); }\n    100% { opacity: 1; transform: translateY(0); }\n  }\n\n  .vp-split-img-wrapper {\n    position: relative;\n    border-radius: 1.5rem;\n    overflow: hidden;\n    height: 200px; \/* Reduced for mobile *\/\n    padding: 1.25rem;\n    background-color: #0f3b35;\n  }\n\n  @media (min-width: 1024px) {\n    .vp-split-img-wrapper {\n      border-radius: 1.75rem;\n      height: 240px; \/* Desktop height *\/\n    }\n  }\n  \n  .vp-split-img-wrapper::after {\n    content: '';\n    position: absolute;\n    top: 0; left: 0; width: 100%; height: 50%;\n    background: linear-gradient(to bottom, rgba(15, 59, 53, 0.4) 0%, rgba(0,0,0,0) 100%);\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  .vp-split-img-wrapper .vp-pill-glass {\n    position: relative;\n    z-index: 2;\n  }\n\n  .vp-split-text {\n    font-size: 0.95rem;\n    color: #4b5563;\n    line-height: 1.6;\n    margin: 0;\n    flex-grow: 1;\n  }\n\n  \/* Navigation Arrows Area *\/\n  .vp-slider-controls {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 0.75rem;\n    margin-top: 1rem;\n  }\n  \n  .vp-slide-counter {\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: #9ca3af;\n    letter-spacing: 0.05em;\n  }\n\n  .vp-arrows-group {\n    display: flex;\n    gap: 0.5rem;\n  }\n\n  .vp-arrow-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 40px; height: 40px;\n    border: 1px solid #e5e7eb;\n    background: transparent;\n    border-radius: 50%;\n    cursor: pointer;\n    color: #111827;\n    transition: all 0.2s ease;\n  }\n\n  @media (min-width: 768px) {\n    .vp-arrow-btn {\n      width: 44px; height: 44px;\n      gap: 0.75rem;\n    }\n  }\n\n  .vp-arrow-btn:hover,\n  .vp-arrow-btn:focus {\n    border-color: #2F6B52;\n    background-color: #2F6B52;\n    color: #ffffff;\n    transform: translateY(-2px) !important;\n    outline: none;\n  }\n  \n  .vp-arrow-btn:focus-visible {\n    outline: 2px solid #2F6B52;\n    outline-offset: 2px;\n  }\n\n<\/style>\n\n<section class=\"vp-services-wrapper\" aria-labelledby=\"vp-section-title\">\n  \n  <header class=\"vp-section-header\">\n    <h2 id=\"vp-section-title\">Asiantuntevaa ja joustavaa kuljetuspalvelua.<\/h2>\n    <p>Tarjoamme r\u00e4\u00e4t\u00e4l\u00f6ityj\u00e4 ratkaisuja yrityksesi logistiikkatarpeisiin. Hoidamme kuljetukset luotettavasti, aikataulussa ja vuosikymmenten tuomalla ammattitaidolla.<\/p>\n  <\/header>\n\n  <div class=\"vp-modern-grid\">\n    \n    <!-- Column 1: Intro Text -->\n    <div class=\"vp-col-text\">\n      <h3 class=\"vp-heading\">\n        VP-Kuljetuksella on monipuolinen historia kuljettamisesta. Kotimaan tavarakuljetukset muodostuvat yhteyksist\u00e4 Helsingin alueen ja Kaakkois-Suomen v\u00e4lill\u00e4.\n      <\/h3>\n      <a href=\"https:\/\/vp-kuljetus.fi\/?page_id=754\" class=\"vp-action-btn-main\" aria-label=\"Lue lis\u00e4\u00e4 yrityksest\u00e4mme ja kalustostamme\">\n        Tutustu yritykseen\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"><\/line>\n          <polyline points=\"7 7 17 7 17 17\"><\/polyline>\n        <\/svg>\n      <\/a>\n    <\/div>\n\n    <!-- Column 2: Tall Image Card -->\n    <article class=\"vp-col-tall\">\n      <img decoding=\"async\" src=\"https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/53455341.webp\" alt=\"VP-Kuljetuksen rekat tiell\u00e4 iltavalaistuksessa, edustaen raskasta teollisuuskuljetusta\" class=\"vp-card-img\" loading=\"lazy\">\n      <span class=\"vp-pill-glass\">Teollisuuskuljetukset<\/span>\n      <div class=\"vp-tall-bottom\">\n        <p>Luotettavat teollisuuden tuotekuljetukset kaikenkokoisiin tarpeisiin.<\/p>\n        <div class=\"vp-icon-circle\" aria-hidden=\"true\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"><\/line>\n            <polyline points=\"7 7 17 7 17 17\"><\/polyline>\n          <\/svg>\n        <\/div>\n      <\/div>\n    <\/article>\n\n    <!-- Column 3: Slider Grid -->\n    <div class=\"vp-col-split\">\n      \n      <div class=\"vp-slider-container\" id=\"vp-services-slider-\" tabindex=\"0\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Monipuoliset logistiikkaratkaisut\">\n        \n        <!-- Slide 1 -->\n        <article class=\"vp-slide active\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1\/5\">\n          <div class=\"vp-split-img-wrapper\">\n            <img decoding=\"async\" src=\"https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/20211122_134440.webp\" alt=\"VP-Kuljetuksen kuorma-auto Vuosaaren satamassa\" class=\"vp-card-img\" loading=\"lazy\">\n            <span class=\"vp-pill-glass\">Thermo &amp; Kontti<\/span>\n          <\/div>\n          <p class=\"vp-split-text\">\n            Fennoroadin osakasliikenn\u00f6itsij\u00e4n\u00e4 VP-Kuljetus toimittaa kuljetuksia eri puolille Suomea Vuosaaren terminaalin kautta.\n          <\/p>\n        <\/article>\n\n        <!-- Slide 2 -->\n        <article class=\"vp-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"2\/5\">\n          <div class=\"vp-split-img-wrapper\">\n            <img decoding=\"async\" src=\"https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/53455341.webp\" alt=\"VP-Kuljetuksen kalusto s\u00e4\u00e4nn\u00f6llisess\u00e4 kappaletavaraliikenteess\u00e4\" class=\"vp-card-img\" loading=\"lazy\">\n            <span class=\"vp-pill-glass\">Kappaletavara<\/span>\n          <\/div>\n          <p class=\"vp-split-text\">\n            S\u00e4\u00e4nn\u00f6lliset kappaletavarakuljetukset Helsingin ja Kaakkois-Suomen v\u00e4lill\u00e4. Joustavat ja nopeat toimitukset aikataulussa.\n          <\/p>\n        <\/article>\n\n        <!-- Slide 3 -->\n        <article class=\"vp-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"3\/5\">\n          <div class=\"vp-split-img-wrapper\">\n            <img decoding=\"async\" src=\"https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/IMG_20211210_230754.webp\" alt=\"VP-Kuljetus y\u00f6ll\u00e4, luotettava kuljetus\" class=\"vp-card-img\" loading=\"lazy\">\n            <span class=\"vp-pill-glass\">Ammattitaito<\/span>\n          <\/div>\n          <p class=\"vp-split-text\">\n            Osaava henkil\u00f6st\u00f6mme ja nykyaikainen kalustomme takaavat, ett\u00e4 kuljetuksesi ovat turvallisissa k\u00e4siss\u00e4 vuorokaudenajasta riippumatta.\n          <\/p>\n        <\/article>\n\n        <!-- Slide 4 -->\n        <article class=\"vp-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"4\/5\">\n          <div class=\"vp-split-img-wrapper\">\n            <img decoding=\"async\" src=\"https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/20230820_225359.webp\" alt=\"Erikoiskuljetus ja joustavuus\" class=\"vp-card-img\" loading=\"lazy\">\n            <span class=\"vp-pill-glass\">Monipuolisuus<\/span>\n          <\/div>\n          <p class=\"vp-split-text\">\n            Tarjoamme laajan valikoiman logistiikkaratkaisuja, jotka mukautuvat saumattomasti yrityksesi muuttuviin ja vaativiinkin tarpeisiin.\n          <\/p>\n        <\/article>\n\n        <!-- Slide 5 -->\n        <article class=\"vp-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"5\/5\">\n          <div class=\"vp-split-img-wrapper\">\n            <img decoding=\"async\" src=\"https:\/\/vp-kuljetus.fi\/wp-content\/uploads\/2026\/07\/huolto2.webp\" alt=\"Kuorma-auton huolto ja korjaus\" class=\"vp-card-img\" loading=\"lazy\">\n            <span class=\"vp-pill-glass\">Oma Huolto<\/span>\n          <\/div>\n          <p class=\"vp-split-text\">\n            Oma huoltokorjaamomme varmistaa, ett\u00e4 kalustomme on aina huippukunnossa ja valmiina matkaan ilman turhia viivytyksi\u00e4.\n          <\/p>\n        <\/article>\n\n      <\/div>\n\n      <!-- Arrow Controls & Counter -->\n      <div class=\"vp-slider-controls\">\n        <span class=\"vp-slide-counter\" id=\"vp-slide-status-\" aria-live=\"polite\">1 \/ 5<\/span>\n        <div class=\"vp-arrows-group\">\n          <button class=\"vp-arrow-btn\" id=\"vp-slide-prev-\" aria-controls=\"vp-services-slider-\" aria-label=\"N\u00e4yt\u00e4 edellinen\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"><\/line>\n              <polyline points=\"12 19 5 12 12 5\"><\/polyline>\n            <\/svg>\n          <\/button>\n          <button class=\"vp-arrow-btn\" id=\"vp-slide-next-\" aria-controls=\"vp-services-slider-\" aria-label=\"N\u00e4yt\u00e4 seuraava\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\n              <polyline points=\"12 5 19 12 12 19\"><\/polyline>\n            <\/svg>\n          <\/button>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- SEO Schema Markup -->\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"LogisticsService\",\n  \"name\": \"VP-Kuljetus Palvelut\",\n  \"description\": \"Asiantuntevaa ja joustavaa kuljetuspalvelua. Tarjoamme r\u00e4\u00e4t\u00e4l\u00f6ityj\u00e4 ratkaisuja yrityksesi logistiikkatarpeisiin, mukaan lukien oma huoltokorjaamo.\",\n  \"provider\": {\n    \"@type\": \"Organization\",\n    \"name\": \"VP-Kuljetus Oy\",\n    \"url\": \"https:\/\/vp-kuljetus.fi\"\n  },\n  \"areaServed\": [\n    { \"@type\": \"Place\", \"name\": \"Helsinki\" },\n    { \"@type\": \"Place\", \"name\": \"Kaakkois-Suomi\" },\n    { \"@type\": \"Place\", \"name\": \"Vuosaari, Helsinki\" }\n  ],\n  \"knowsAbout\": [\n    \"Kaluston huolto ja yll\u00e4pito\",\n    \"Thermokuljetukset\",\n    \"Konttikuljetukset\",\n    \"Kappaletavarakuljetukset\"\n  ],\n  \"hasOfferCatalog\": {\n    \"@type\": \"OfferCatalog\",\n    \"name\": \"Palveluvalikoima\",\n    \"itemListElement\": [\n      {\n        \"@type\": \"Offer\",\n        \"itemOffered\": {\n          \"@type\": \"Service\",\n          \"name\": \"Teollisuuskuljetukset\",\n          \"description\": \"Luotettavat teollisuuden tuotekuljetukset kaikenkokoisiin tarpeisiin.\"\n        }\n      },\n      {\n        \"@type\": \"Offer\",\n        \"itemOffered\": {\n          \"@type\": \"Service\",\n          \"name\": \"Oma kaluston huolto\",\n          \"description\": \"Oma huoltokorjaamomme varmistaa, ett\u00e4 kalustomme on aina huippukunnossa.\"\n        }\n      }\n    ]\n  }\n}\n<\/script>\n<!-- end Kuljetus-Palvelutaulu -->\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-58e6429 e-con e-atomic-element e-flexbox-base e-c847b9d \" data-id=\"58e6429\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"58e6429\">\n    \t\t<div class=\"elementor-element elementor-element-7f2bddd elementor-widget elementor-widget-ucaddon_etusivu_footer\" data-id=\"7f2bddd\" 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\n<\/div>\n<div class=\"elementor-element elementor-element-1d17fc7 e-con e-atomic-element e-flexbox-base e-4dd49f1 \" data-id=\"1d17fc7\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"1d17fc7\">\n    \t\t<div class=\"elementor-element elementor-element-0d6bc2b elementor-widget elementor-widget-html\" data-id=\"0d6bc2b\" 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<\/a>\n          <a href=\"\/#YHT\">Avoin hakemus<\/a>\n          <a href=\"\/#YHT\">Tarjouspyynt\u00f6<\/a>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n    <!-- Mobile Burger -->\n    <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<\/a>\n        <a href=\"\/avoin-hakemus\/\">Avoin hakemus<\/a>\n        <a href=\"\/tarjouspyynto\/\">Tarjouspyynt\u00f6<\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/nav>\n\n<style>\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; \/* Deep brand green *\/\n  --nav-text-hover: #2F6B52; \/* Dark mint *\/\n  --nav-btn-bg: #c7eb98; \/* Light green CTA *\/\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: fixed; \n  top: 24px;       \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  \/\/ Prevent Elementor from hiding the fixed nav inside a section\n  if (nav.parentElement !== document.body) {\n    document.body.appendChild(nav);\n  }\n\n  \/\/ Mobile menu toggle\n  burger.addEventListener('click', () => {\n    nav.classList.toggle('mobile-open');\n  });\n\n  \/\/ Background Contrast Logic (Still checks the background color to swap dark\/light text)\n  const evaluateBackgroundLuminance = () => {\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      const elementsUnder = document.elementsFromPoint(point.x, point.y);\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    nav.style.pointerEvents = '';\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  };\n\n  \/\/ Run on scroll\n  let isScrolling;\n  window.addEventListener('scroll', () => {\n    window.clearTimeout(isScrolling);\n    isScrolling = setTimeout(evaluateBackgroundLuminance, 50);\n  });\n\n  \/\/ Run on load\n  setTimeout(evaluateBackgroundLuminance, 300);\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-d84e725 e-con e-atomic-element e-flexbox-base e-8695995 \" data-id=\"d84e725\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"d84e725\">\n    \n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>skip render: ucaddon_kuljetus_hero skip render: ucaddon_palvelutaulu skip render: ucaddon_etusivu_footer Yrityksest\u00e4 Palvelut Kuljetustoiminta Terminaalit Ota yhteytt\u00e4 Yhteydenotto Avoin hakemus Tarjouspyynt\u00f6 Yrityksest\u00e4 Palvelut Kuljetustoiminta Terminaalit Ota yhteytt\u00e4 Yhteydenotto Avoin hakemus Tarjouspyynt\u00f6<\/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-632","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vp-kuljetus.fi\/index.php?rest_route=\/wp\/v2\/pages\/632","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=632"}],"version-history":[{"count":70,"href":"https:\/\/vp-kuljetus.fi\/index.php?rest_route=\/wp\/v2\/pages\/632\/revisions"}],"predecessor-version":[{"id":1094,"href":"https:\/\/vp-kuljetus.fi\/index.php?rest_route=\/wp\/v2\/pages\/632\/revisions\/1094"}],"wp:attachment":[{"href":"https:\/\/vp-kuljetus.fi\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}